/*
 * ourShift — doplňky nad Bootstrap 5.3 (vzor ourPlan: Bootstrap vendored
 * v public/vendor/). Jen značka a pár komponent, které Bootstrap nemá.
 * Barva značky pochází ze soustavy rodiny ourApps (viz ourLib/branding a
 * grafický manuál na ourapps.cloud/brand) — ourShift je v ní karmínová
 * #DB2777. Neměnit ji tady zvlášť: škála je počítaná jako celek.
 * Sdílí ji i landing page; #2c5282 zůstává jako doplňková modrá.
 */

:root {
    --shift-brand: #DB2777;
    --shift-brand-2: #2c5282;
}

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

.btn-brand {
    --bs-btn-bg: var(--shift-brand);
    --bs-btn-border-color: var(--shift-brand);
    --bs-btn-hover-bg: #BE185D;
    --bs-btn-hover-border-color: #BE185D;
    --bs-btn-active-bg: #9D174D;
    --bs-btn-active-border-color: #9D174D;
    --bs-btn-color: #fff;
    --bs-btn-hover-color: #fff;
    --bs-btn-active-color: #fff;
    --bs-btn-disabled-bg: var(--shift-brand);
    --bs-btn-disabled-border-color: var(--shift-brand);
    --bs-btn-disabled-color: #fff;
}

/* ── Odstíny podle role ──────────────────────────────────────────────
   Aplikace ukazuje deset položek v liště a další ovládání na stránkách,
   ale běžný uživatel z toho vidí zlomek. Kdo má práva, si toho nevšimne —
   vidí všechno a nepozná, co ostatním chybí.

   Proto má každá úroveň vlastní odstín a platí všude stejně:

     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á karmínová zůstává vyhrazená hlavní akci
   stránky, aby zůstala poznat.

   Hodnoty jsou tlumené a mají tmavou variantu — kontrast nad 4.5:1
   v obou režimech. */
: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 (obrysová tlačítka,
   přepínač osoby). Stejný odstín jako odpovídající položka lišty, takže je
   na první pohled 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;
}

.select-role {
    border-color: color-mix(in srgb, var(--role-accent) 45%, transparent);
    color: var(--role-accent);
}

/* 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;
    }
}

/* Docházkový stav — levý akcent karty */
.punch-card { border-left: 4px solid var(--bs-secondary); }
.punch-card.open { border-left-color: var(--bs-success); }

/* Jednorázový párovací kód brány */
.pairing-code {
    font-size: 2.3rem;
    letter-spacing: .3em;
    font-weight: 700;
    font-family: var(--bs-font-monospace);
    padding: 1rem;
    background: var(--bs-tertiary-bg);
    border: 1px dashed var(--bs-border-color);
    border-radius: .75rem;
}

/* QR vždy na bílé (čitelnost i v dark mode) */
.qr-frame {
    background: #fff;
    display: inline-block;
    padding: .5rem;
    border-radius: .75rem;
    border: 1px solid var(--bs-border-color);
}

/* ===== Měsíční časová osa docházky (vzor CIS /attendance/month) ===== */

.att-grid { font-size: .82rem; }

.att-grid .att-row {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: 1px 0;
}

.att-grid .att-row.weekend .att-track { background: var(--bs-secondary-bg); }

.att-grid .att-row.holiday .att-date { color: var(--bs-danger); }

.att-grid .att-row.today .att-label { color: var(--shift-brand); font-weight: 700; }

.att-grid .att-label {
    flex: 0 0 8.5rem;
    display: flex;
    justify-content: flex-end;
    gap: .45rem;
    white-space: nowrap;
    color: var(--bs-body-color);
    font-variant-numeric: tabular-nums;
}

.att-grid .att-label .att-day { width: 1.5rem; color: var(--bs-secondary-color); }
.att-grid .att-label .att-date { width: 3rem; text-align: right; }
/* Širší, než bývalo: vejde se sem i „8:27/4:40". Bez pevné šířky by se
   sloupec dnů rozskákal podle toho, které dny mají nevykázaný zbytek. */
.att-grid .att-label .att-sum { width: 5.6rem; text-align: right; color: var(--bs-secondary-color); }
/* Odpracované hodiny jsou odkaz na vykázání jen tam, kde tenant má ourCIS.
   Podtržení až na najetí — v hustém seznamu dnů by trvalé podtržení každého
   čísla dělalo z přehledu mřížku odkazů. */
.att-grid .att-label .att-sum-link { text-decoration: none; cursor: pointer; }
.att-grid .att-label .att-sum-link:hover { text-decoration: underline; color: var(--bs-body-color); }
/* Nevykázaný zbytek. Oranžová, ne červená: není to chyba ani dluh, jen
   nedodělek, který ještě jde vyřešit — a po uzávěrce už ne. */
/* Nevykázaný zbytek. Oranžová, ne červená: není to chyba ani dluh, jen
   nedodělek, který ještě jde vyřešit — a po uzávěrce už ne.

   Napevno, ne přes --bs-warning-text-emphasis: ta proměnná je ve světlém
   motivu #997404, což je na bílé olivově hnědá a jako oranžová se nečte
   vůbec. Bootstrapí „warning" je stavěná na žluté cedule s pozadím, ne na
   barvu textu. */
.att-grid .att-label .att-sum-unreported,
.att-grid .att-label .att-sum-unreported:hover { color: #e8590c; font-weight: 600; }
[data-bs-theme="dark"] .att-grid .att-label .att-sum-unreported,
[data-bs-theme="dark"] .att-grid .att-label .att-sum-unreported:hover { color: #ff922b; }
/* Vykázaný čas o odstín slabší — hlavní je odpracováno, tohle je proti čemu. */
.att-grid .att-label .att-sum-rest { opacity: .85; }

.att-grid .att-track {
    position: relative;
    flex: 1;
    height: 1.15rem;
    background: var(--bs-tertiary-bg);
    border-radius: .25rem;
    /* hodinové linky po 6 h */
    background-image: linear-gradient(to right, var(--bs-border-color) 1px, transparent 1px);
    background-size: 25% 100%;
}

.att-grid .att-block {
    position: absolute;
    top: 0;
    bottom: 0;
    border-radius: .2rem;
    min-width: 2px;
}

.att-grid .att-block.open {
    background-image: repeating-linear-gradient(45deg, rgba(255,255,255,.35) 0 4px, transparent 4px 8px);
}

.att-grid .att-hours {
    flex: 1;
    display: flex;
    color: var(--bs-secondary-color);
    font-size: .72rem;
}

.att-grid .att-hours span { flex: 1; }


/* Identita v liště: dva pevné řádky — jméno, pod ním firma.
   Zalomení podle šířky trhalo název firmy uprostřed a vypadalo jako chyba;
   pevné rozdělení navíc drží stejnou výšku lišty na každé stránce. */
/* Identita v liště: dva řádky uvnitř tlačítka s nabídkou účtu. */
.navbar-identity { display: flex; flex-direction: column; line-height: 1.15; }
.navbar-identity-name { white-space: nowrap; }
.navbar-identity-tenant { white-space: nowrap; font-size: .82em; opacity: .75; }
/* Tlačítko nesmí vypadat jako akce — je to jen vstup do nabídky. Rámeček
   proto až na najetí; ve výchozím stavu je to pořád „popisek, na který jde
   kliknout". */
.navbar-identity-btn { border-color: transparent; text-align: left; }
.navbar-identity-btn::after { margin-left: .25rem; }