/*
 * ourPlan — doplňky nad Bootstrap 5.3 (vzor ourShift: Bootstrap vendorovaný
 * v public/vendor/). Jen značka a komponenty, které Bootstrap nemá.
 *
 * Barva značky pochází ze soustavy rodiny ourApps (viz ourLib/branding a
 * grafický manuál na ourapps.cloud/brand) — ourPlan je v ní žlutá #EAB308
 * na úhlu 135°. Neměnit ji tady zvlášť: škála je počítaná jako celek a posun
 * jedné barvy rozbije odstupy sousedů.
 *
 * #2c5282 zůstává jako doplňková modrá. Bývala primární barvou aplikace;
 * dneska nese pruhy Ganttu a odstín vedení, protože značka patří hlavní akci
 * stránky, ne obsahu.
 */

:root {
    --plan-brand: #EAB308;
    --plan-brand-2: #2c5282;
}

/* Ve tmavém je krémová žlutá na tmavém podkladu o odstín světlejší, jinak
   působí zašle. Plocha tlačítka zůstává stejná — ta má pod sebou tmavý text. */
[data-bs-theme="dark"] {
    --plan-brand: #FACC15;
}

.text-brand { color: var(--plan-brand); }

/* Hlavní akce stránky.
   POZOR na barvu textu: na rozdíl od ostatních aplikací rodiny je TMAVÁ.
   Bílá na #EAB308 má kontrast 1,7:1 a je nečitelná; rodinná černá #14120F
   má 11:1. Kdo to bude „opravovat" zpátky na bílou, ať si to nejdřív
   změří. */
.btn-brand {
    --bs-btn-bg: #EAB308;
    --bs-btn-border-color: #EAB308;
    --bs-btn-hover-bg: #CA8A04;
    --bs-btn-hover-border-color: #CA8A04;
    --bs-btn-active-bg: #A16207;
    --bs-btn-active-border-color: #A16207;
    --bs-btn-color: #14120F;
    --bs-btn-hover-color: #14120F;
    --bs-btn-active-color: #14120F;
    --bs-btn-disabled-bg: #EAB308;
    --bs-btn-disabled-border-color: #EAB308;
    --bs-btn-disabled-color: #14120F;
}

/* ── Odstíny podle role ──────────────────────────────────────────────
   Převzato z ourShiftu beze změny hodnot, ať to napříč rodinou znamená
   totéž. ourPlan dnes rozlišuje jen vedení (ROLE_PLAN_MANAGER), zbylé dvě
   úrovně jsou tu připravené.

     moje        neutrální (dědí barvu textu) — každodenní práce nemá křičet
     vedení týmu modrá     — doplňková barva značky
     správa      jantarová — nastavení tenanta
     napříč      fialová   — superadmin, nejvzácnější

   Barví se JEN písmo a obrys, nikdy plocha: odstín má informovat, ne
   přebíjet obsah. Značková žlutá zůstává vyhrazená hlavní akci stránky. */
:root {
    --role-manager: #2C5282;
    --role-admin:   #B45309;
    --role-super:   #6D28D9;
}

[data-bs-theme="dark"] {
    --role-manager: #7DA7D9;
    --role-admin:   #F0A868;
    --role-super:   #B39DF3;
}

.role-manager { --role-accent: var(--role-manager); }
.role-admin   { --role-accent: var(--role-admin); }
.role-super   { --role-accent: var(--role-super); }

/* Odkaz v liště — tlumený odstín, na aktivní stránce a po najetí plný. */
.nav-link.role-manager,
.nav-link.role-admin,
.nav-link.role-super {
    color: color-mix(in srgb, var(--role-accent) 78%, var(--bs-body-color));
}

.nav-link.role-manager:hover, .nav-link.role-manager:focus, .nav-link.role-manager.active,
.nav-link.role-admin:hover,   .nav-link.role-admin:focus,   .nav-link.role-admin.active,
.nav-link.role-super:hover,   .nav-link.role-super:focus,   .nav-link.role-super.active {
    color: var(--role-accent);
}

/* Ovládání na stránce, které se ukazuje jen podle role. Stejný odstín jako
   odpovídající položka lišty, takže je vidět, že spolu souvisí. */
.btn-role {
    --bs-btn-color: var(--role-accent);
    --bs-btn-border-color: color-mix(in srgb, var(--role-accent) 45%, transparent);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--role-accent);
    --bs-btn-hover-border-color: var(--role-accent);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--role-accent);
    --bs-btn-active-border-color: var(--role-accent);
    --bs-btn-focus-shadow-rgb: 0, 0, 0;
}

/* Hranice mezi skupinami v liště. Vykresluje se jen když je co oddělovat —
   běžnému uživateli by jinak visela osamocená čárka. */
.nav-divider {
    align-self: center;
    width: 1px;
    height: 1.25rem;
    margin: 0 .6rem;
    background: var(--bs-border-color);
}

/* Ve sbalené (mobilní) navigaci jde řada pod sebe — svislá čárka by tam
   nedávala smysl, tak z ní udělá vodorovnou. */
@media (max-width: 991.98px) {
    .nav-divider {
        width: 100%;
        height: 1px;
        margin: .45rem 0;
    }
}

/* Identita v liště: dva řádky uvnitř tlačítka s nabídkou účtu. Tlačítko nesmí
   vypadat jako akce — je to jen vstup do nabídky, proto rámeček až na najetí. */
.navbar-identity { display: flex; flex-direction: column; line-height: 1.15; }
.navbar-identity-name { white-space: nowrap; }
.navbar-identity-sub { white-space: nowrap; font-size: .82em; opacity: .75; }
.navbar-identity-btn { border-color: transparent; text-align: left; }
.navbar-identity-btn::after { margin-left: .25rem; }

/* QR kód pro párování vždy na bílé (čitelnost čtečkou i v tmavém režimu). */
.qr-frame {
    background: #fff;
    border: 1px solid var(--bs-border-color);
}

/* ── Paleta Ganttu ───────────────────────────────────────────────────
   Jedno místo pro CSS i pro SVG kreslené z JavaScriptu: renderer si hodnoty
   čte přes getComputedStyle (viz assets/gantt/renderer.js → ganttPalette).
   Proto tu musí zůstat i to, co by v CSS šlo napsat rovnou proměnnou
   Bootstrapu — renderer potřebuje jméno, které přežije změnu motivu.

   Pruh úkolu je doplňková modrá, ne značková žlutá: značka patří hlavní
   akci, a stovka žlutých pruhů by ji přebila.

   Světlé hodnoty jsou schválně i pod [data-bs-theme="light"], nejen na
   :root — tisk do PDF si kvůli tomu umí vynutit světlou paletu i uprostřed
   tmavého režimu tím, že čte z podstrčeného elementu s tím atributem.
   Kdyby byly jen na :root, element by ve tmavém režimu zdědil tmavé. */
:root,
[data-bs-theme="light"] {
    --gantt-bar:         #3182ce;
    --gantt-critical:    #e03131;
    --gantt-milestone:   #6f42c1;
    --gantt-today:       #fa5252;
    --gantt-baseline:    #adb5bd;
    --gantt-surface:     var(--bs-body-bg);
    --gantt-weekend:     var(--bs-tertiary-bg);
    --gantt-grid:        var(--bs-border-color);
    --gantt-grid-major:  var(--bs-secondary-color);
    --gantt-label:       var(--bs-body-color);
    --gantt-label-muted: var(--bs-secondary-color);
}

[data-bs-theme="dark"] {
    --gantt-bar:       #4D9DE0;
    --gantt-critical:  #FF6B6B;
    --gantt-milestone: #B39DF3;   /* shodné s --role-super v tmavém */
    --gantt-today:     #FF8787;
    --gantt-baseline:  #6C757D;
}

/* ── Rozdělený panel: tabulka úkolů ⟷ Gantt ──────────────────────────
   Bylo dvakrát inline v project/show a share/view; sdílený odkaz má o dvě
   lišty méně, proto si výšku posouvá přes --split-offset. */
.schedule-split {
    height: calc(100vh - var(--split-offset, 260px));
    min-height: 360px;
}

/* Sdílený odkaz má o lištu nástrojů méně, tak si vezme víc výšky. */
.schedule-split.is-shared { --split-offset: 220px; }

/* grid: flex 0 0 auto = šířka panelu je autoritativní (splitter ji řídí);
   gantt: flex-basis 0 + min-width 0 = bere zbytek bez ohledu na šířku SVG
   (s basis auto by obří SVG smáčklo grid na jeho minimum) */
.grid-pane { flex: 0 0 auto; width: 44%; min-width: 420px; overflow: auto; }
.gantt-pane { flex: 1 1 0; min-width: 0; overflow: auto; position: relative; background: var(--gantt-surface); }

.pane-splitter {
    flex: 0 0 6px;
    cursor: col-resize;
    background: var(--bs-border-color);
    transition: background .15s;
}
.pane-splitter:hover, .pane-splitter.dragging { background: var(--plan-brand-2); }

.gantt-header { display: block; position: sticky; top: 0; background: var(--bs-tertiary-bg); z-index: 2; }
.gantt-body { display: block; }

/* Řádky gridu musí přesně sedět na řádky Ganttu (32 px) */
#taskGrid { min-width: 660px; }
#taskGrid tbody tr { height: 32px; }
#taskGrid tbody td { padding-top: 0; padding-bottom: 0; vertical-align: middle; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 280px; }
/* nowrap: záhlaví se nesmí zalomit — jinak je vyšší než hlavička Ganttu (40 px) a řádky nenavazují */
#taskGrid thead th { height: 40px; vertical-align: middle; position: sticky; top: 0; background: var(--bs-tertiary-bg); z-index: 2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

#taskGrid tbody tr.selected { background-color: var(--bs-primary-bg-subtle); }
#taskGrid tbody tr.summary td { font-weight: 600; }
#taskGrid td.editable { cursor: text; }
#taskGrid .task-indent { display: inline-block; }
#taskGrid .milestone-icon { color: var(--gantt-milestone); }
#taskGrid input.cell-editor { width: 100%; border: 1px solid var(--bs-primary-border-subtle); border-radius: 3px; padding: 0 4px; font-size: inherit; background: var(--bs-body-bg); color: var(--bs-body-color); }

/* Tři tečky na začátku řádku (před WBS) — viditelné až na hover;
   visibility (ne display), ať číslo řádku neuskakuje */
#taskGrid .row-menu-btn {
    border: 0; background: transparent; border-radius: 3px;
    padding: 0 2px; margin-right: 2px; line-height: 1.2;
    color: var(--bs-secondary-color); visibility: hidden;
}
#taskGrid tbody tr:hover .row-menu-btn { visibility: visible; }
#taskGrid .row-menu-btn:hover { color: var(--bs-body-color); background: var(--bs-secondary-bg); }

.gantt-bar.gantt-editable { cursor: grab; }
.gantt-resize-handle { cursor: ew-resize; }
.gantt-link-handle { cursor: crosshair; opacity: 0; transition: opacity .15s; }
.gantt-task:hover .gantt-link-handle { opacity: 1; }
.gantt-dep { cursor: pointer; }
.gantt-dep:hover { stroke: var(--gantt-critical); stroke-width: 2; }

/* ── Portfolio ───────────────────────────────────────────────────────
   Stav projektu jako barva. SVG prezentační atributy (fill=, stroke=)
   proměnné neumí, takže se v šabloně píše style="fill: var(--pf-…)". */
:root,
[data-bs-theme="light"] {
    --pf-planning: #868e96;
    --pf-active:   var(--gantt-bar);
    --pf-on-hold:  #e8590c;
    --pf-closed:   #adb5bd;
}

[data-bs-theme="dark"] {
    --pf-planning: #9AA3AB;
    --pf-on-hold:  #FF922B;
    --pf-closed:   #6C757D;
}

/* Lepivý první sloupec u tabulek, které se posouvají do stran (kapacita).
   Pozadí musí být neprůhledné, jinak pod ním prosvítají projíždějící buňky —
   proto se bere z motivu, ne natvrdo bílá. */
.sticky-col {
    position: sticky;
    left: 0;
    z-index: 1;
    background: var(--bs-body-bg);
}

thead .sticky-col { background: var(--bs-tertiary-bg); }