/* WorkPortal — base styles */

*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* 26. 10. — atribut hidden skrývá VŽDY. Vlastní display třídy (.btn
   inline-flex, .form-group flex…) by ho jinak přebil (Odemknout v deníku,
   Sdílet odkaz, výběr organizace). Lokální .x[hidden] pravidla neškodí. */
[hidden] { display: none !important; }

:root {
    --color-primary:   #2563eb;
    --color-primary-h: #1d4ed8;
    /* Značkový akcent — jen tmavý sidebar + .page-header--dark. Tinty níž
       jedou přes color-mix(var(--color-accent) …), takže změna barvy značky
       = přepsat jen --color-accent (hover zvlášť). Stavové barvy (--status-*,
       --color-warning) s tímhle NESDÍLÍ nic, mění se nezávisle. */
    --color-accent:    #FBB108;
    --color-accent-h:  #E5A000;
    --color-accent-ink:#03254E;   /* tmavý text NA akcentu — bílá je na žluté nečitelná */
    --color-danger:    #dc2626;
    --color-success:   #16a34a;
    --color-warning:   #d97706;
    --color-text:      #111827;
    --color-muted:     #6b7280;
    --color-border:    #e5e7eb;
    --color-bg:        #f9fafb;
    --color-white:     #ffffff;
    --radius:          6px;
    --shadow:          0 1px 3px rgba(0,0,0,.1), 0 1px 2px rgba(0,0,0,.06);

    /* ── Stav uzlu/milníku (order_nodes.status, milestones.status) ──
       JEDNO místo pravdy pro barvu stavu napříč Gantt/MindMap/Deníkem/
       badge. Audit před 62.7b zjistil, že stejný stav měl dřív různou
       barvu podle místa — Gantt/MindMap/badge/externí náhled používaly
       modrá(planned)->oranžová(in_progress)->zelená(done), ale Deník
       (diary-entry--*/diary-ms-status--* níž) měl vlastní paletu šedá->
       modrá->zelená. Sjednoceno na tu PRVNÍ rodinu (zavedená na víc
       místech) — Deník byl upravený, aby ji použil taky, ne naopak.
       Globální :root proměnná, čte ji i <style> blok v pages/orders/
       mindmap.php (vykreslený za tímhle souborem, custom properties
       nejsou scoped na stylesheet, který je deklaroval).

       4 úrovně sytosti podle vizuální role, NE 4 různé barvy:
         --status-X        plný akcent (Gantt bar výplň)
         --status-X-soft   světlý akcent (Gantt tečka, MindMap obrys/
                            text fáze, Deník tečka)
         --status-X-bg     bledé pozadí (MindMap karta, badge/Deník
                            štítek pozadí)
         --status-X-text   sytý text na -bg pozadí (badge/Deník štítek)
         --status-X-ring   halo kolem tečky (Deník) */
    --status-planned:            #3b82f6;
    --status-in-progress:        #d97706;
    --status-done:                #16a34a;

    --status-planned-soft:       #93c5fd;
    --status-in-progress-soft:   #fbbf24;
    --status-done-soft:          #4ade80;

    --status-planned-bg:         #eff6ff;
    --status-in-progress-bg:     #fffbeb;
    --status-done-bg:            #f0fdf4;

    --status-planned-text:       #2563eb;
    --status-in-progress-text:   #92400e;
    --status-done-text:          #15803d;

    --status-planned-ring:       #bfdbfe;
    --status-in-progress-ring:   #fde68a;
    --status-done-ring:          #bbf7d0;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 15px;
    line-height: 1.5;
    color: var(--color-text);
    background: var(--color-bg);
}

a {
    color: var(--color-primary);
    text-decoration: none;
}
a:hover { text-decoration: underline; }

/* ── Navbar ── */
.navbar {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0 1.5rem;
    height: 56px;
    background: var(--color-white);
    border-bottom: 1px solid var(--color-border);
    box-shadow: var(--shadow);
}

.navbar-brand {
    display: flex;
    align-items: center;
    gap: .75rem;
    margin-right: auto;
}

.navbar-logo {
    font-weight: 700;
    font-size: 1rem;
    color: var(--color-primary);
}

.navbar-tenant {
    font-size: .85rem;
    color: var(--color-muted);
    border-left: 1px solid var(--color-border);
    padding-left: .75rem;
}

.navbar-menu {
    display: flex;
    list-style: none;
    gap: .25rem;
}

.navbar-menu a {
    display: block;
    padding: .4rem .75rem;
    border-radius: var(--radius);
    color: var(--color-text);
    font-size: .9rem;
}
.navbar-menu a:hover,
.navbar-menu a.active {
    background: var(--color-bg);
    color: var(--color-primary);
    text-decoration: none;
}

.navbar-user {
    display: flex;
    align-items: center;
    gap: .75rem;
    font-size: .875rem;
}

.navbar-username { font-weight: 500; }
.navbar-role {
    font-size: .75rem;
    color: var(--color-muted);
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    padding: .1rem .5rem;
    border-radius: 999px;
}

.btn-logout {
    color: var(--color-muted);
    font-size: .875rem;
    padding: .35rem .75rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    transition: .15s;
}
.btn-logout:hover {
    color: var(--color-danger);
    border-color: var(--color-danger);
    text-decoration: none;
}

/* ── Layout ── */
.main-content {
    padding: 2rem 1.5rem;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
}

/* ── Auth ── */
.auth-wrapper {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
}

.auth-card {
    width: 100%;
    max-width: 400px;
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 2rem;
}

.auth-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-muted);
    margin-bottom: .25rem;
}

.auth-card h2 {
    font-size: 1.4rem;
    margin-bottom: 1.5rem;
}

.auth-form label {
    display: block;
    margin-bottom: 1rem;
    font-size: .9rem;
    font-weight: 500;
}

.auth-form input {
    display: block;
    width: 100%;
    margin-top: .25rem;
    padding: .55rem .75rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    font-size: .95rem;
    outline: none;
    transition: border-color .15s;
}
.auth-form input:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(37,99,235,.15);
}
/* 84c-1 — „Zůstat přihlášen“: obecné .auth-form input (block, 100 %) checkbox rozbíjelo */
.auth-form .auth-checkbox { display: flex; align-items: center; gap: .5rem; font-weight: 400; }
.auth-form .auth-checkbox input { display: inline-block; width: auto; margin: 0; }

/* 84c-1 — výběr workspace po globálním přihlášení */
.auth-ws-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .5rem; }
.auth-form .auth-ws-btn {
    background: var(--color-white);
    color: inherit;
    border: 1px solid var(--color-border);
    text-align: left;
}
.auth-form .auth-ws-btn:hover { background: var(--color-bg, #f9fafb); border-color: var(--color-primary); }
.auth-ws-role { display: block; font-size: .8rem; color: var(--color-muted); font-weight: 400; }
.auth-back { margin-top: 1rem; font-size: .85rem; text-align: center; }

/* 84c-1 — tmavé přihlášení (templates/auth_open.php): /login, /login/workspace,
   /t/{slug}/login. Navy = --brand-navy webu (www-site brand CSS), aby
   přechod web → přihlášení nebyl skok. Mobil první: logo + karta se vejdou
   na výšku telefonu (dvh = bez lišty prohlížeče), od 640px víc vzduchu. */
body:has(.auth-brand) { background: #002659; }
.auth-brand {
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1.25rem;
    padding: 1.25rem 1rem calc(1.25rem + env(safe-area-inset-bottom, 0px));
    background: #002659;
}
.auth-brand__logo { display: block; height: 40px; width: auto; max-width: 70vw; }
.auth-brand .auth-card {
    border-color: transparent;
    box-shadow: 0 12px 40px rgba(0, 0, 0, .35);
    padding: 1.5rem 1.25rem;
}
.auth-brand .auth-card h2 { margin-bottom: 1rem; }
.auth-brand .auth-form label { margin-bottom: .85rem; }
/* Instalace PWA pod kartou (templates/auth_close.php) — bílý obrys na navy */
.auth-install { max-width: 400px; width: 100%; text-align: center; }
.auth-install[hidden], .auth-install [hidden] { display: none !important; }
.auth-install__btn {
    background: transparent;
    color: #fff;
    border: 1px solid rgba(255, 255, 255, .85);
    border-radius: var(--radius);
    padding: .6rem 1.2rem;
    font-size: .95rem;
    font-weight: 500;
    cursor: pointer;
    transition: background .15s;
}
.auth-install__btn:hover, .auth-install__btn:focus-visible { background: rgba(255, 255, 255, .12); }
.auth-install__hint { color: rgba(255, 255, 255, .88); font-size: .85rem; line-height: 1.5; }
.auth-install__share { display: inline-block; vertical-align: -3px; margin: 0 .1rem; }
@media (min-width: 640px) {
    .auth-brand { gap: 2rem; padding: 2rem; }
    .auth-brand__logo { height: 52px; }
    .auth-brand .auth-card { padding: 2rem; }
    .auth-brand .auth-card h2 { margin-bottom: 1.5rem; }
    .auth-brand .auth-form label { margin-bottom: 1rem; }
}

.auth-form button {
    width: 100%;
    padding: .65rem;
    background: var(--color-primary);
    color: #fff;
    border: none;
    border-radius: var(--radius);
    font-size: 1rem;
    font-weight: 500;
    cursor: pointer;
    transition: background .15s;
}
.auth-form button:hover { background: var(--color-primary-h); }

/* 85b.5 — stav zveřejnění profilu (Nastavení › Veřejný profil) */
.profile-status { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .6rem 1rem;
    padding: .75rem .9rem; border-radius: var(--radius); border: 1px solid var(--color-border); background: #f8fafc; margin: .5rem 0 1rem; }
.profile-status strong { display: block; }
.profile-status__hint, .profile-status__reason { display: block; font-size: .85rem; color: var(--color-muted); margin-top: .15rem; }
.profile-status__reason { color: var(--color-danger); }
.profile-status .btn { min-height: 44px; }
.profile-status--pending_review { background: #fffbeb; border-color: #fde68a; }
.profile-status--published { background: #f0fdf4; border-color: #bbf7d0; }
.profile-status--suspended { background: #fef2f2; border-color: #fecaca; }
/* 85b.5 — žádosti o připojení (Workspace › Lidé) */
.access-requests { margin: 0 0 1rem; }
.access-request { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 1rem;
    padding: .7rem .9rem; border: 1px solid #fde68a; background: #fffbeb; border-radius: var(--radius); margin-bottom: .5rem; }
.access-request form { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.access-request .btn, .access-request select { min-height: 40px; }

/* 85b.5 — /admin/registrace (platform admin): karty místo tabulek, mobil první */
.admin-reg { max-width: 960px; margin: 0 auto; padding: 1rem .9rem 3rem; }
.admin-reg__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .25rem 1rem; margin-bottom: 1rem; }
.admin-reg__head h1 { font-size: 1.4rem; margin: 0; }
.admin-reg__section { margin-top: 1.75rem; }
.admin-reg__section h2 { font-size: 1.1rem; margin: 0 0 .6rem; display: flex; align-items: center; gap: .5rem; }
.admin-reg__count { font-size: .8rem; font-weight: 600; background: var(--color-bg, #f3f4f6); border-radius: 999px; padding: .1rem .55rem; }
.admin-reg__card { background: var(--color-white); border: 1px solid var(--color-border); border-radius: var(--radius); padding: .9rem 1rem; margin-bottom: .6rem; }
.admin-reg__card--row { display: flex; flex-direction: column; gap: .2rem; font-size: .9rem; }
.admin-reg__card-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .25rem 1rem; margin-bottom: .6rem; }
.admin-reg__dl { display: grid; grid-template-columns: 1fr; gap: .1rem .9rem; margin: 0 0 .8rem; font-size: .9rem; }
.admin-reg__dl dt { color: var(--color-muted); font-size: .8rem; margin-top: .35rem; }
.admin-reg__dl dd { margin: 0; overflow-wrap: anywhere; }
.admin-reg__actions { display: flex; flex-wrap: wrap; gap: .5rem; align-items: flex-start; }
.admin-reg__actions .btn { min-height: 44px; }
.admin-reg__reject { flex: 1 1 100%; }
.admin-reg__reject summary { display: inline-flex; align-items: center; list-style: none; cursor: pointer; }
.admin-reg__reject summary::-webkit-details-marker { display: none; }
.admin-reg__reject[open] form { margin-top: .6rem; display: flex; flex-direction: column; gap: .5rem; max-width: 520px; }
.admin-reg__cleanup-form { display: flex; flex-direction: column; gap: .5rem; max-width: 520px; margin: .5rem 0 1rem; }
.admin-reg__cleanup-form .btn { min-height: 44px; align-self: flex-start; }
.admin-reg__list { margin: .4rem 0 .6rem 1.1rem; font-size: .88rem; }
/* 6. 10. — Správa platformy: rám /admin (menu, zpět do workspace; zvonek je position:fixed vpravo nahoře) */
.admin-frame { min-height: 100vh; background: var(--color-bg, #f3f4f6); }
.admin-frame__top { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem 1rem; padding: .9rem 4.5rem .6rem .9rem; background: #002659; color: #fff; }
.admin-frame__back { color: #fff; text-decoration: none; font-size: .9rem; opacity: .9; }
.admin-frame__back:hover { opacity: 1; text-decoration: underline; }
.admin-frame__brand { font-weight: 700; letter-spacing: .02em; }
.admin-frame__nav { display: flex; gap: .25rem; overflow-x: auto; padding: 0 .9rem; background: #002659; scrollbar-width: none; }
.admin-frame__tab { display: inline-flex; align-items: center; gap: .35rem; white-space: nowrap; padding: .65rem .8rem; min-height: 44px;
    color: rgba(255,255,255,.8); text-decoration: none; font-size: .9rem; border-bottom: 3px solid transparent; }
.admin-frame__tab.is-active { color: #fff; border-bottom-color: #60a5fa; font-weight: 600; }
.admin-frame__tab.is-disabled { color: rgba(255,255,255,.45); cursor: default; }
.admin-frame__tab small { font-size: .7rem; }
.admin-frame .admin-reg { padding-top: 1rem; }
.admin-firm__filters { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 1rem; align-items: center; }
.admin-firm__filters .admin-firm__q { flex: 1 1 100%; }
.admin-firm__filters select.form-input { flex: 1 1 9rem; width: auto; }
.admin-firm__filters .btn { min-height: 44px; }
@media (min-width: 720px) { .admin-firm__filters .admin-firm__q { flex: 1 1 16rem; } }
.badge--test { background: #fef3c7; color: #92400e; margin-left: .35rem; font-size: .7rem; vertical-align: middle; }
.admin-firm__crumb { margin: 0 0 .6rem; font-size: .9rem; }
.admin-firm__manual > summary { cursor: pointer; font-weight: 600; padding: .6rem 0; min-height: 44px; }
.admin-firm__audit { list-style: none; margin: 0; padding: 0; font-size: .88rem; }
.admin-firm__audit li { padding: .45rem 0; border-top: 1px solid var(--color-border); overflow-wrap: anywhere; }
.admin-firm__reason { color: var(--color-muted); }

/* 6. 10. — /admin/registrace › Firmy */
.admin-firm__search { display: flex; gap: .5rem; margin: 0 0 .8rem; }
.admin-firm__search .form-input { flex: 1 1 auto; }
.admin-firm__search .btn { min-height: 44px; }
.admin-firm__ws { padding: .55rem 0; border-top: 1px solid var(--color-border); }
.admin-firm__line { display: flex; flex-wrap: wrap; gap: .35rem .6rem; align-items: center; font-size: .9rem; overflow-wrap: anywhere; }
.admin-firm__hint { font-size: .85rem; margin: 0; }
.admin-firm__check { display: flex; align-items: center; gap: .5rem; font-size: .85rem; margin: .25rem 0 .5rem; }
/* Karta firmy: akce vpravo v jednom sloupci na stejném místě (primární → vedlejší → červený odkaz).
   Formulář akce = panel pod tlačítkem, zarovnaný doprava, přes obsah pod ním. */
.admin-firm__ws { display: grid; grid-template-columns: 1fr; gap: .5rem; align-items: start; }
.admin-firm__actions { display: flex; flex-direction: column; align-items: stretch; gap: .4rem; }
.admin-firm__actions .btn, .admin-firm__actions summary.btn { width: 100%; justify-content: center; min-height: 40px; box-sizing: border-box; }
.admin-firm__act { position: relative; }
.admin-firm__act > summary { list-style: none; cursor: pointer; }
.admin-firm__act > summary::-webkit-details-marker { display: none; }
.admin-firm__act--danger { text-align: center; }
.admin-firm__danger-link { display: inline-block; color: var(--color-danger); font-size: .85rem; text-decoration: underline; padding: .3rem 0; min-height: 0; }
.admin-firm__panel { position: absolute; right: 0; top: calc(100% + .35rem); z-index: 20; width: min(26rem, calc(100vw - 2.5rem));
    display: flex; flex-direction: column; gap: .5rem; padding: .8rem; background: var(--color-white);
    border: 1px solid var(--color-border); border-radius: var(--radius); box-shadow: 0 8px 24px rgba(0,0,0,.12); text-align: left; }
@media (min-width: 720px) {
    .admin-firm__ws { grid-template-columns: 1fr 13rem; }
    .admin-firm__actions { grid-column: 2; }
}
.admin-firm__inline .btn { min-height: 40px; }
.admin-firm__inline { margin: 0; }

/* 89.7 — Průběh firmy (lifecycle): mini timeline v seznamu, blok v detailu.
   done = plná navy, current = žlutá, blocked = červená, todo = prázdný kroužek, optional = čárkovaný. */
.lc, .lc-mini { --lc-done: #03254E; --lc-current: #FBB108; --lc-blocked: var(--color-danger, #b91c1c); --lc-todo: var(--color-border-strong, #cccccc); }
.lc-mini { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .6rem; font-size: .85rem; grid-column: 1; }
.lc-mini__label { color: var(--color-muted); }
.lc-mini__dots { display: inline-flex; align-items: center; gap: 5px; }
.lc-mini__status { font-weight: 600; }
.lc-mini__status--ok { color: var(--lc-done); }
.lc-mini__status--alert { color: var(--lc-blocked); }
.lc-dot { width: 12px; height: 12px; border-radius: 50%; box-sizing: border-box; border: 2px solid var(--lc-todo); background: transparent; }
.lc-dot--done { background: var(--lc-done); border-color: var(--lc-done); }
.lc-dot--current { background: var(--lc-current); border-color: var(--lc-current); }
.lc-dot--blocked { background: var(--lc-blocked); border-color: var(--lc-blocked); }
.lc-dot--optional { border-style: dashed; }
@media (min-width: 720px) { .admin-firm__ws:has(> .lc-mini) > .admin-firm__actions { grid-row: 1 / span 2; } }

.lc { margin-bottom: 1rem; }
.lc__head { display: flex; flex-wrap: wrap; align-items: flex-start; gap: .5rem 1rem; }
.lc__title { flex: 1 1 14rem; margin: 0; font-size: 1.1rem; display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .6rem; }
.lc__status { font-size: .9rem; color: var(--color-muted); align-self: center; }
.lc__head .admin-firm__actions { flex: 1 1 100%; }
@media (min-width: 720px) { .lc__head .admin-firm__actions { flex: 0 0 13rem; } }
/* mobil: svisle (ikona + text, spojnice dolů) */
.lc-steps { list-style: none; margin: 1rem 0 0; padding: 0; display: flex; flex-direction: column; gap: .9rem; }
.lc-step { position: relative; }
/* 89.8 bod 5 — krok = tlačítko (bublina: hover/focus na desktopu, klepnutí → panel na dotyku) */
.lc-step__btn { display: flex; align-items: flex-start; gap: .7rem; width: 100%; margin: 0; padding: 0; border: 0; background: none;
    font: inherit; color: inherit; text-align: inherit; cursor: pointer; border-radius: var(--radius, 6px); }
.lc-step__btn:focus-visible { outline: 2px solid #2563eb; outline-offset: 3px; }
.lc-step__chev { display: none; }
.lc-step:not(:last-child)::after { content: ''; position: absolute; left: 17px; top: 38px; bottom: -.9rem; width: 2px; background: var(--color-border); }
.lc-step__ico { flex: 0 0 36px; width: 36px; height: 36px; box-sizing: border-box; border-radius: 50%; display: flex; align-items: center; justify-content: center;
    border: 2px solid var(--lc-todo); color: var(--color-muted); background: var(--color-white); position: relative; z-index: 1; }
.lc-ico { width: 20px; height: 20px; }
.lc-step--done .lc-step__ico { background: var(--lc-done); border-color: var(--lc-done); color: #fff; }
.lc-step--current .lc-step__ico { background: var(--lc-current); border-color: var(--lc-current); color: #1a1a1a; }
.lc-step--blocked .lc-step__ico { background: var(--lc-blocked); border-color: var(--lc-blocked); color: #fff; }
.lc-step--opt .lc-step__ico { border-style: dashed; }
.lc-step--opt.lc-step--done .lc-step__ico { border-style: solid; }
.lc-step__body { display: flex; flex-direction: column; gap: .15rem; min-width: 0; font-size: .85rem; }
.lc-step__name { font-weight: 600; font-size: .9rem; }
.lc-step__state { color: var(--color-muted); font-size: .8rem; }
.lc-step--opt .lc-step__name { font-weight: 500; }
.lc-date--derived { cursor: help; text-decoration: underline dotted; text-underline-offset: 2px; }
.lc-date--unknown { color: var(--color-muted); font-style: italic; }
.lc-badge { align-self: flex-start; font-size: .7rem; }
.lc-badge--suspended, .lc-badge--expired { background: #fee2e2; color: #991b1b; }
.lc-badge--complimentary { background: #e0e7ff; color: #3730a3; }
.lc-badge--hidden { background: #f3f4f6; color: #374151; }
.lc-step__reason { color: var(--lc-blocked); font-size: .8rem; overflow-wrap: anywhere; }
/* desktop / tablet: vodorovně, spojnice mezi ikonami */
@media (min-width: 640px) {
    .lc-steps { flex-direction: row; gap: .5rem; }
    .lc-step { flex: 1 1 0; text-align: center; }
    .lc-step__btn { flex-direction: column; align-items: center; }
    .lc-step:not(:last-child)::after { left: calc(50% + 20px); right: calc(-50% + 20px); top: 17px; bottom: auto; width: auto; height: 2px; }
    .lc-step__body { align-items: center; }
    .lc-badge { align-self: center; }
}
/* Bublina: barva stavu kroku (horní okraj, šipka, štítek) */
.lc-step--done { --tip-c: #03254E; }
.lc-step--current { --tip-c: #FBB108; }
.lc-step--blocked { --tip-c: var(--lc-blocked, #b91c1c); }
.lc-step--todo, .lc-step--optional, .lc-step--not_applicable { --tip-c: #9ca3af; }
/* Mimo desktop skrytá (tablet = panel pod timeline, mobil = akordeon níž) */
.lc-tip { display: none; position: absolute; z-index: 30; top: calc(100% + 12px); left: 50%; transform: translateX(calc(-50% + var(--lc-tip-dx, 0px)));
    width: min(340px, calc(100vw - 24px)); box-sizing: border-box; padding: .85rem 1rem .9rem; text-align: left; font-size: .875rem; line-height: 1.45;
    background: var(--color-white, #fff); border: 1px solid var(--color-border); border-top: 4px solid var(--tip-c, #9ca3af);
    border-radius: var(--radius, 6px); box-shadow: 0 14px 36px rgba(14, 32, 56, .22), 0 3px 8px rgba(14, 32, 56, .1); }
/* krajní kroky zarovnané ke kraji (JS navíc doladí --lc-tip-dx, aby bublina nepřetekla obrazovku) */
.lc-step:first-child > .lc-tip { left: 0; transform: translateX(var(--lc-tip-dx, 0px)); --lc-arrow-x: 1.6rem; }
.lc-step:last-child > .lc-tip { left: auto; right: 0; transform: translateX(var(--lc-tip-dx, 0px)); --lc-arrow-x: calc(100% - 1.6rem); }
/* šipka mířící na krok */
.lc-tip::before { content: ''; position: absolute; top: -20px; left: var(--lc-arrow-x, 50%); margin-left: -8px;
    border: 8px solid transparent; border-bottom-color: var(--tip-c, #9ca3af); }
/* neviditelný most mezi krokem a bublinou — přejetí kurzorem ji drží otevřenou */
.lc-tip::after { content: ''; position: absolute; left: 0; right: 0; top: -18px; height: 18px; }
/* desktop: zobrazení po 100 ms, skrytí až 600 ms po odjetí; klik = připíchnutí (is-pinned), hover jiného kroku ho nepřebije */
@media (min-width: 640px) and (hover: hover) and (pointer: fine) {
    .lc-tip { display: block; visibility: hidden; opacity: 0; transition: opacity .12s ease .48s, visibility 0s linear .6s; }
    .lc-step:hover > .lc-tip, .lc-step:focus-within > .lc-tip, .lc-step.is-pinned > .lc-tip {
        visibility: visible; opacity: 1; transition: opacity .12s ease .1s, visibility 0s linear .1s; }
    .lc-step.is-pinned > .lc-tip { z-index: 32; transition: none; }
    .lc-timeline.has-pin .lc-step:not(.is-pinned):hover > .lc-tip { visibility: hidden; opacity: 0; transition: none; }
    .lc-step.is-pinned .lc-step__ico { box-shadow: 0 0 0 4px rgba(37, 99, 235, .22); }
}
@media (min-width: 640px) and (hover: hover) and (pointer: fine) and (prefers-reduced-motion: reduce) {
    .lc-tip, .lc-step:hover > .lc-tip, .lc-step:focus-within > .lc-tip { transition: visibility 0s linear .1s; }
}
.lc-tip__title { display: block; font-size: 1rem; margin-bottom: .3rem; }
.lc-tip__text, .lc-tip__state, .lc-tip__admin { margin: 0 0 .45rem; }
.lc-tip__pill { display: inline-block; padding: .12rem .6rem; border-radius: 999px; font-size: .75rem; font-weight: 600; background: #e5e7eb; color: #374151; }
.lc-tip__pill--done { background: #03254E; color: #fff; }
.lc-tip__pill--current { background: #FBB108; color: #1a1a1a; }
.lc-tip__pill--blocked { background: var(--lc-blocked, #b91c1c); color: #fff; }
.lc-tip__admin { color: var(--color-muted); font-size: .8rem; overflow-wrap: anywhere; }
.lc-tip__links { list-style: none; margin: .55rem 0 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: .45rem 1rem; }
.lc-tip__links a { display: inline-block; padding: .2rem 0; min-height: 24px; }
.lc-tip__links a.lc-tip__cta { padding: .45rem .9rem; color: #fff; text-decoration: none; display: inline-flex; align-items: center; }
.lc-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* Panel pod timeline (dotyk): stejný obsah jako bublina */
.lc-tip-panel { margin-top: .9rem; padding: .75rem .85rem; font-size: .9rem; line-height: 1.45; border: 1px solid var(--color-border);
    border-left: 3px solid var(--lc-done); border-radius: var(--radius, 6px); background: var(--color-white, #fff); }
.lc-tip-panel[hidden] { display: none; }
.lc-tip-panel .lc-tip__links a { min-height: 44px; display: inline-flex; align-items: center; }
/* 89.8 bod 5 — mobil (< 640 px): svislý akordeon. Celý řádek kroku klikací (min. 48 px), šipka vpravo,
   obsah bubliny přímo pod krokem (li.is-open — aktuální krok rozbalený už ze serveru), panel se nepoužívá. */
@media (max-width: 639px) {
    .lc-step__btn { min-height: 48px; padding: .25rem 0; align-items: center; }
    .lc-step__body { flex: 1 1 auto; }
    .lc-step__chev { display: flex; flex: 0 0 24px; height: 24px; align-items: center; justify-content: center; color: var(--color-muted);
        transition: transform .18s ease; }
    .lc-step__chev svg { width: 14px; height: 14px; }
    .lc-step.is-open .lc-step__chev { transform: rotate(90deg); color: var(--lc-done); }
    .lc-step.is-open > .lc-tip { display: block; position: static; transform: none; width: auto; margin: .35rem 0 .25rem 46px;
        box-shadow: none; border-left: 3px solid var(--tip-c, var(--lc-done)); border-top: 1px solid var(--color-border); }
    .lc-step.is-open > .lc-tip::before, .lc-step.is-open > .lc-tip::after { display: none; }   /* šipka a most jen u desktopové bubliny */
    .lc-step.is-open > .lc-tip .lc-tip__links a { min-height: 44px; display: inline-flex; align-items: center; }
    .lc-step.is-open > .lc-tip .lc-tip__title { display: none; }   /* název kroku je hned nad obsahem */
    .lc-tip-panel { display: none !important; }
}
@media (max-width: 639px) and (prefers-reduced-motion: reduce) { .lc-step__chev { transition: none; } }
.lc-history > summary { cursor: pointer; font-weight: 600; padding: .6rem 0; min-height: 44px; display: flex; align-items: center; gap: .5rem; }
.lc-history__list { list-style: none; margin: 0; padding: 0; font-size: .88rem; }
.lc-history__list li { display: flex; flex-wrap: wrap; align-items: baseline; gap: .2rem .7rem; padding: .45rem 0; border-top: 1px solid var(--color-border); }
.lc-history__when { flex: 0 0 9.5rem; }
.lc-history__what { flex: 1 1 12rem; }
.lc-history__src { font-size: .7rem; }

/* 89.8g — owner: /start jako průvodce registrací + JEDINÝ ukazatel postupu (templates/lifecycle_progress.php).
   Lišta: 4 stejné díly — hotový #03254E, aktuální #FBB108, zamítnutý červeně, ostatní šedé.
   large = /start (popisky, klikací díly), compact = Nástěnka, mini = sidebar (3 px). Desktop i mobil stejné HTML. */
.lc-start, .lcp, .lc-dash { --lc-done: #03254E; --lc-current: #FBB108; --lc-blocked: var(--color-danger, #b91c1c); --lc-todo: var(--color-border, #e5e7eb); }
.lc-start { max-width: 720px; }
.lc-start__title { margin: 0 0 .75rem; }
.lc-start__status { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .8rem; margin: 0 0 .75rem; color: var(--color-muted); font-size: .88rem; }
.lc-start__status--alert { color: var(--color-text, #1f2937); }
.lc-start__status .btn { min-height: 36px; display: inline-flex; align-items: center; }

.lcp { margin: 0 0 .9rem; }
.lcp__row { display: flex; align-items: flex-start; gap: .75rem; }
.lcp__bar { flex: 1 1 auto; min-width: 0; display: flex; gap: 4px; list-style: none; margin: 0; padding: 0; }
.lcp__seg { position: relative; flex: 1 1 0; min-width: 0; --tip-c: #9ca3af; }
.lcp__seg--done { --tip-c: #03254E; }
.lcp__seg--current { --tip-c: #FBB108; }
.lcp__seg--blocked { --tip-c: var(--color-danger, #b91c1c); }
.lcp__hit { display: flex; flex-direction: column; gap: .35rem; padding: .5rem 0; color: inherit; text-decoration: none; cursor: pointer; }
.lcp__hit:hover, .lcp__hit:focus { text-decoration: none; }
.lcp__hit:focus-visible { outline: 2px solid var(--lc-done); outline-offset: 2px; border-radius: 4px; }
.lcp__fill { display: block; height: 8px; border-radius: 4px; background: var(--lc-todo); }
.lcp__fill--done { background: var(--lc-done); }
.lcp__fill--current { background: var(--lc-current); }
.lcp__fill--blocked { background: var(--lc-blocked); }
.lcp__fill--waiting { background: repeating-linear-gradient(-45deg, #cbd5e1 0 4px, var(--lc-todo) 4px 8px); }
.lcp__hit:hover .lcp__fill { filter: brightness(1.1); }
.lcp__seg.is-selected .lcp__fill { box-shadow: 0 0 0 2px var(--color-white, #fff), 0 0 0 3px var(--lc-done); }
.lcp__label { font-size: .8rem; line-height: 1.3; color: var(--color-muted); overflow-wrap: anywhere; }
.lcp__seg--done .lcp__label { color: var(--lc-done); }
.lcp__seg--current .lcp__label, .lcp__seg.is-selected .lcp__label { color: var(--color-text, #1f2937); font-weight: 600; }
.lcp__seg--blocked .lcp__label { color: var(--lc-blocked); font-weight: 600; }
.lcp__count { flex: 0 0 auto; padding-top: .3rem; font-size: .9rem; font-weight: 600; color: var(--lc-done); white-space: nowrap; }
.lcp--compact .lcp__hit { min-height: 32px; justify-content: center; padding: .3rem 0; }
.lcp--compact .lcp__count { padding-top: .45rem; }
/* řádek „Chybí: …“ — vždy viditelný (na dotyku jediná cesta k chybějícím polím) */
.lcp__missing { margin: .3rem 0 0; font-size: .88rem; line-height: 1.6; }
.lcp__missing-lbl, .lcp__sep, .lcp__more { color: var(--color-muted); }
.lcp__missing a { font-weight: 600; display: inline-block; min-height: 24px; }
/* bublina u dílu — chování jako admin timeline (89.8b bod 4): zobrazení po 100 ms, skrytí 600 ms po odjetí,
   neviditelný most (::after) ji drží při přejetí kurzorem do bubliny; jen desktop s myší */
.lcp__tip { display: none; position: absolute; z-index: 30; top: calc(100% + 8px); left: 50%; transform: translateX(-50%);
    width: min(280px, calc(100vw - 24px)); box-sizing: border-box; padding: .7rem .85rem .75rem; text-align: left; font-size: .85rem; line-height: 1.45;
    background: var(--color-white, #fff); border: 1px solid var(--color-border); border-top: 4px solid var(--tip-c);
    border-radius: var(--radius, 6px); box-shadow: 0 14px 36px rgba(14, 32, 56, .22), 0 3px 8px rgba(14, 32, 56, .1); }
.lcp__seg:first-child > .lcp__tip { left: 0; transform: none; }
.lcp__seg:last-child > .lcp__tip { left: auto; right: 0; transform: none; }
.lcp__tip::after { content: ''; position: absolute; left: 0; right: 0; top: -14px; height: 14px; }
@media (min-width: 640px) and (hover: hover) and (pointer: fine) {
    .lcp__tip { display: block; visibility: hidden; opacity: 0; transition: opacity .12s ease .48s, visibility 0s linear .6s; }
    .lcp__seg:hover > .lcp__tip, .lcp__seg:focus-within > .lcp__tip {
        visibility: visible; opacity: 1; transition: opacity .12s ease .1s, visibility 0s linear .1s; }
}
@media (min-width: 640px) and (hover: hover) and (pointer: fine) and (prefers-reduced-motion: reduce) {
    .lcp__tip, .lcp__seg:hover > .lcp__tip, .lcp__seg:focus-within > .lcp__tip { transition: visibility 0s linear .1s; }
}
.lcp__tip-title { display: block; font-size: .95rem; margin-bottom: .1rem; }
.lcp__tip-state { display: block; margin-bottom: .35rem; color: var(--color-muted); }
.lcp__tip-state--done { color: var(--color-success, #15803d); font-weight: 600; }
.lcp__tip-state--blocked { color: var(--lc-blocked); font-weight: 600; }
.lcp__tip-missing { display: block; font-weight: 600; }
.lcp__tip-list { list-style: none; margin: .15rem 0 0; padding: 0; display: flex; flex-direction: column; }
.lcp__tip-list a, .lcp__tip-edit { display: inline-block; min-height: 24px; padding: .1rem 0; font-weight: 600; }
/* mini: 3 px pod „Start x/4“ v tmavém sidebaru (hotový díl světlý kvůli kontrastu s tmavým pozadím) */
.lcp--mini { display: flex; gap: 3px; width: 100%; margin: 0; }
.lcp--mini .lcp__fill { flex: 1 1 0; height: 3px; border-radius: 2px; background: rgba(255, 255, 255, .22); }
.lcp--mini .lcp__fill--done { background: #fff; }
.lcp--mini .lcp__fill--current { background: #FBB108; }
.lcp--mini .lcp__fill--blocked { background: #ef4444; }

/* krok průvodce: jen pole kroku, jeden formulář */
.wz-step { margin-top: 1.1rem; padding: 1.1rem 1.2rem 1.2rem; border: 1px solid var(--color-border); border-left: 4px solid var(--lc-current);
    border-radius: var(--radius, 6px); background: var(--color-white, #fff); }
.wz-step--blocked { border-left-color: var(--lc-blocked); }
.wz-step--done, .wz-step--waiting { border-left-color: var(--lc-done); }
.wz-step__title { margin: 0 0 .25rem; font-size: 1.15rem; }
.wz-step__intro { margin: 0 0 1rem; color: var(--color-muted); font-size: .9rem; line-height: 1.45; }
.wz-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1rem; }
.wz-full { grid-column: 1 / -1; }
.wz-field { margin: 0 0 .75rem; padding-left: .7rem; border-left: 3px solid transparent; min-width: 0; }
.wz-missing { border-left-color: var(--lc-current); }   /* povinné nevyplněné pole: žlutý levý okraj + „povinné“ */
.wz-req { display: inline-block; margin-left: .35rem; padding: 0 .45rem; border-radius: 999px; background: rgba(251, 177, 8, .22); color: #6b4a00;
    font-size: .7rem; font-weight: 600; line-height: 1.6; vertical-align: middle; }
.wz-help { margin: .25rem 0 0; color: var(--color-muted); font-size: .8rem; }
p.wz-help.wz-full { margin: 0 0 .5rem; padding-left: calc(.7rem + 3px); }
.wz-ico { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.wz-ico .form-input { flex: 0 1 12rem; background: var(--color-bg-muted, #f3f4f6); }
.wz-ico .btn { min-height: 40px; white-space: nowrap; }
.wz-fieldset { border: 0; border-left: 3px solid transparent; margin: 0 0 .75rem; padding-top: 0; padding-bottom: 0; }
.wz-fieldset.wz-missing { border-left-color: var(--lc-current); }
.wz-fieldset > legend { padding: 0; }
.wz-regions { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 0 .75rem; }
.wz-check { display: flex; gap: .45rem; align-items: center; min-height: 32px; font-weight: 400; }
.wz-more { margin: 0 0 .75rem; }
.wz-more > summary { cursor: pointer; min-height: 40px; display: flex; align-items: center; font-weight: 600; color: var(--color-primary, #2563eb); }
.wz-more[open] > summary { margin-bottom: .4rem; }
.wz-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1.2rem; margin-top: .5rem; }
.wz-actions .btn { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
.wz-skip { border: 0; background: none; padding: .5rem 0; min-height: 44px; font: inherit; font-size: .9rem; color: var(--color-primary, #2563eb);
    text-decoration: underline; cursor: pointer; }
.wz-note { margin: 0 0 .6rem; padding: .6rem .8rem; border-radius: var(--radius, 6px); background: var(--color-bg-muted, #f3f4f6); font-size: .92rem; line-height: 1.45; }
.wz-note--alert { border-left: 3px solid var(--lc-blocked); background: rgba(185, 28, 28, .07); }
.wz-note__quote { font-style: italic; }
.wz-note__link { margin: 0 0 .5rem; font-size: .9rem; }
.wz-later { margin: 1rem 0 0; color: var(--color-muted); font-size: .8rem; }
.wz-flash { margin: .25rem 0 0; }
.wz-done { margin-top: 1.1rem; padding: 1.2rem; border: 1px solid var(--color-border); border-left: 4px solid var(--lc-done);
    border-radius: var(--radius, 6px); background: var(--color-white, #fff); }
.wz-done__title { margin: 0 0 .5rem; font-size: 1.2rem; color: var(--lc-done); }
.wz-done__lead { margin: 0 0 .6rem; color: var(--color-muted); }
.wz-next { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.wz-next .btn { min-height: 44px; display: inline-flex; align-items: center; }
.wz-ref { margin: 1rem 0 0; font-size: .85rem; }
@media (max-width: 639px) {
    .lcp__row { flex-wrap: wrap; gap: 0; }
    .lcp__count { order: -1; width: 100%; padding-top: 0; text-align: right; }
    .lcp__label { font-size: .72rem; }
    .wz-grid { grid-template-columns: 1fr; }   /* formuláře v jednom sloupci */
    .wz-step { padding: .9rem .85rem 1rem; }
    .wz-form .form-input { font-size: 16px; }   /* iOS nezoomuje při psaní */
    .wz-actions .btn, .wz-next li, .wz-next .btn { width: 100%; }
}
/* Nástěnka: „Start s WorkPortalem“ + kompaktní lišta + „Chybí: …“ + Pokračovat */
.lc-dash { max-width: 720px; margin: 0 0 1rem; padding: .7rem .9rem .8rem; border: 1px solid var(--color-border); border-left: 3px solid var(--lc-current);
    border-radius: var(--radius, 6px); background: var(--color-white, #fff); }
.lc-dash--blocked { border-left-color: var(--lc-blocked); }
.lc-dash__title { margin: 0 0 .15rem; font-size: 1rem; }
.lc-dash__title a { color: inherit; text-decoration: none; }
.lc-dash__title a:hover { text-decoration: underline; }
.lc-dash .lcp { margin-bottom: .5rem; }
.lc-dash__cta { margin: 0; }
.lc-dash__cta .btn { min-height: 40px; display: inline-flex; align-items: center; }
/* cílové stránky: „← Zpět na Start“ (jen při ?from=start) a odkaz na Přehledu Nastavení */
.lc-back { margin: 0 0 .75rem; font-size: .85rem; }
.lc-back a { display: inline-block; min-height: 24px; padding: .1rem 0; }
.lc-start-link { margin: 0 0 1rem; font-size: .9rem; }
/* 89.9 — checklist kroku (admin bublina / akordeon, /start) */
.lc-check { list-style: none; margin: .1rem 0 .5rem; padding: 0; display: flex; flex-wrap: wrap; gap: .2rem .85rem; font-size: .82rem; }
.lc-check__item { display: inline-flex; align-items: baseline; gap: .3rem; }
.lc-check__mark { font-weight: 700; width: .9em; text-align: center; }
.lc-check__item.is-done { color: var(--color-muted); }
.lc-check__item.is-done .lc-check__mark { color: var(--color-success, #15803d); }
.lc-check__item.is-missing .lc-check__mark { color: var(--color-danger, #b91c1c); }
.lc-check__item.is-missing.is-rec .lc-check__mark { color: var(--color-muted); }
.lc-check__item.is-missing a { font-weight: 600; }
.lc-check__rec, .lc-check__note { color: var(--color-muted); font-size: .72rem; }

/* hláška nad formulářem Firma (stejná funkce jako krok Údaje firmy) */
.lc-form-missing { max-width: 520px; margin: 0 0 1rem; padding: .55rem .8rem; font-size: .88rem; line-height: 1.5;
    border: 1px solid var(--color-border); border-left: 3px solid var(--lc-current, #FBB108); border-radius: var(--radius, 6px); background: var(--color-white, #fff); }
/* příchod z checklistu na pole: krátké podbarvení (JS přidá .lc-field-hit a focus) */
.lc-field-hit { border-radius: var(--radius, 6px); animation: lc-field-hit 2s ease-out; }
@keyframes lc-field-hit {
    0%, 35% { background-color: rgba(251, 177, 8, .22); box-shadow: 0 0 0 6px rgba(251, 177, 8, .22); }
    100% { background-color: transparent; box-shadow: 0 0 0 6px transparent; }
}
@media (prefers-reduced-motion: reduce) { .lc-field-hit { animation: none; background-color: rgba(251, 177, 8, .18); } }
.lc-flash { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; }
.lc-flash .btn { min-height: 36px; }
/* 89.8b — sidebar „Start 3/5“ (tmavý sidebar; žlutá = probíhá, červená = některý krok zablokovaný) */
.sb-start { display: flex; flex-direction: column; align-items: stretch; gap: 7px; margin: 0 12px 8px; padding: 9px 12px; min-height: 40px; box-sizing: border-box;
    border-radius: 8px; border: 1px solid rgba(251, 177, 8, .45); background: rgba(251, 177, 8, .12);
    color: #fff; font-size: .85rem; font-weight: 600; text-decoration: none; }
.sb-start:hover { background: rgba(251, 177, 8, .2); text-decoration: none; color: #fff; }
.sb-start:focus-visible { outline: 2px solid #FBB108; outline-offset: 2px; }
.sb-start__top { display: flex; align-items: center; gap: 10px; }   /* 89.8g — pod ním mini lišta */
.sb-start__dot { flex: 0 0 10px; height: 10px; border-radius: 50%; background: #FBB108; }
.sb-start--blocked { border-color: rgba(239, 68, 68, .55); background: rgba(239, 68, 68, .15); }
.sb-start--blocked:hover { background: rgba(239, 68, 68, .24); }
.sb-start--blocked .sb-start__dot { background: #ef4444; }


/* 86 — mobil: 16px ve formulářích = iOS nezoomuje při psaní důvodu; Schválit přes celou šířku */
.admin-reg .form-input { font-size: 16px; min-height: 44px; }
.admin-reg__dl dd a { word-break: break-all; }
@media (max-width: 719px) {
    .admin-reg__actions > form { flex: 1 1 auto; }
    .admin-reg__actions > form .btn { width: 100%; }
}
@media (min-width: 720px) {
    .admin-reg { padding: 1.5rem 1.5rem 3rem; }
    .admin-reg__dl { grid-template-columns: 9rem 1fr; }
    .admin-reg__dl dt { margin-top: 0; }
    .admin-reg__card--row { display: grid; grid-template-columns: 6.5rem 1.4fr 1.4fr 1fr; align-items: center; gap: .75rem; }
    .admin-reg__reject { flex: 0 1 auto; }
}

/* 86 — /login: registrace a zapomenuté heslo pod formulářem */
.auth-foot { margin: 1.1rem 0 0; font-size: .9rem; text-align: center; }
.auth-foot + .auth-foot { margin-top: .4rem; }
.auth-foot--muted { color: var(--color-muted); font-size: .82rem; }

/* 85b.3 — registrace firmy (/signup): širší karta, sekce, ARES náhled */
.auth-card.auth-card--wide { max-width: 560px; }
.signup-lead { color: var(--color-muted); font-size: .9rem; margin: -.5rem 0 1.25rem; }
.signup-section { font-size: .75rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
    color: var(--color-muted); margin: 1.25rem 0 .6rem; padding-top: 1rem; border-top: 1px solid var(--color-border); }
.signup-section:first-of-type { border-top: 0; padding-top: 0; margin-top: 0; }
.auth-form .signup-ico-row { display: flex; gap: .5rem; align-items: flex-end; }
.auth-form .signup-ico-row label { flex: 1; margin-bottom: 0; }
.auth-form .signup-ico-row .signup-ares-btn { width: auto; white-space: nowrap; padding: .58rem .9rem;
    background: var(--color-white); color: var(--color-primary); border: 1px solid var(--color-primary); font-size: .9rem; }
.auth-form .signup-ico-row .signup-ares-btn:hover { background: #eff6ff; }
.signup-ares { margin: .6rem 0 1rem; padding: .7rem .85rem; border-radius: var(--radius); background: #f8fafc;
    border: 1px solid var(--color-border); font-size: .88rem; line-height: 1.45; }
.signup-ares[hidden] { display: none; }
.signup-ares strong { display: block; font-size: .95rem; }
.signup-ares.is-error { background: #fef2f2; border-color: #fecaca; color: var(--color-danger); }
.signup-help { display: block; font-weight: 400; color: var(--color-muted); font-size: .8rem; margin-top: .2rem; }
.signup-ares-hint { margin: .4rem 0 1rem; }
.signup-ares:not([hidden]) + .signup-ares-hint { margin-top: -.4rem; }
.auth-form select { display: block; width: 100%; margin-top: .25rem; padding: .55rem .75rem; border: 1px solid var(--color-border);
    border-radius: var(--radius); font-size: .95rem; background: var(--color-white); }
.auth-form .signup-two { display: grid; grid-template-columns: 1fr; gap: 0 .75rem; }
.auth-form .field-error input, .auth-form .field-error select { border-color: var(--color-danger); }
.auth-form .signup-terms { align-items: flex-start; line-height: 1.45; }
.auth-form .signup-terms input { margin-top: .2rem; }
.auth-form .signup-terms a { color: var(--color-primary); }
/* Honeypot — mimo obrazovku, ne display:none (některé roboty ho přeskočí) */
.signup-hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
/* Výběr oborů uvnitř .auth-form: obecné .auth-form button/input by z něj udělaly velká modrá tlačítka */
.auth-form .cat-picker button { width: auto; padding: 0 .1rem; background: none; color: inherit; font-size: inherit; border-radius: 0; }
.auth-form .cat-picker button:hover { background: none; }
.auth-form .cat-picker .cp-search { margin-top: 0; }
.auth-form button.auth-btn-secondary { background: var(--color-white); color: var(--color-danger); border: 1px solid #fecaca; }
.auth-form button.auth-btn-secondary:hover { background: #fef2f2; }
.auth-form button.auth-btn-plain { background: var(--color-white); color: var(--color-primary); border: 1px solid var(--color-primary); }
.auth-form button.auth-btn-plain:hover { background: #eff6ff; }
.signup-alt { margin-top: 1rem; font-size: .85rem; text-align: center; }
.signup-alt a { color: var(--color-primary); }
.signup-actions { display: flex; flex-direction: column; gap: .6rem; margin-top: 1rem; }
.signup-actions a.btn-link { display: block; text-align: center; padding: .65rem; border-radius: var(--radius);
    background: var(--color-primary); color: #fff; text-decoration: none; font-weight: 500; }
@media (min-width: 640px) {
    .auth-form .signup-two { grid-template-columns: 1fr 1fr; }
}

/* ── Alerts ── */
.alert {
    padding: .75rem 1rem;
    border-radius: var(--radius);
    margin-bottom: 1rem;
    font-size: .9rem;
}
.alert-error   { background: #fef2f2; color: var(--color-danger);  border: 1px solid #fecaca; }
.alert-success { background: #f0fdf4; color: var(--color-success); border: 1px solid #bbf7d0; }
.alert-info    { background: #eff6ff; color: #1e40af;               border: 1px solid #bfdbfe; }
.alert-warning { background: #fffbeb; color: var(--color-warning); border: 1px solid #fde68a; }

/* ── Sidebar layout ── */
.app-shell {
    display: flex;
    min-height: 100vh;
}

/* ============ SIDEBAR ============ */
.sidebar{
    width:248px;flex:0 0 248px;min-width:0;
    background:#0e2038;
    display:flex;flex-direction:column;height:100vh;
    position:sticky;top:0;align-self:flex-start;
}

/* --- brand: tenant nahoře --- */
.sidebar-brand{flex:0 0 auto;padding:16px 18px 15px;border-bottom:1px solid rgba(255,255,255,.11)}
.sb-ten{display:flex;align-items:center;gap:10px}
.sb-ten-mark{
    flex:0 0 34px;height:34px;border-radius:7px;
    background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.14);
    color:#fff;display:flex;align-items:center;justify-content:center;
    font-size:14px;font-weight:700;letter-spacing:-.02em;overflow:hidden;
}
.sb-ten-mark img{width:100%;height:100%;object-fit:cover}
.sb-ten-txt{min-width:0;flex:1}
.sb-ten-txt b{
    display:block;font-size:13px;font-weight:600;color:#fff;line-height:1.25;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.sb-ten-txt span{
    display:flex;align-items:center;gap:6px;
    font-size:11px;color:rgba(255,255,255,.45);margin-top:2px;
}
.sb-ten-txt em{
    font-style:normal;font-size:9.5px;letter-spacing:.03em;text-transform:uppercase;
    padding:1px 5px;border-radius:4px;
    background:rgba(255,255,255,.08);color:rgba(255,255,255,.5);
}

/* --- scroll oblast --- */
.sidebar-scroll{flex:1;min-height:0;overflow-y:auto;padding:10px 0 20px}

/* --- řádek menu (položka i hlavička skupiny mají stejný tvar) --- */
.sidebar-nav{list-style:none;padding:0;margin:0}
.sidebar-nav a,
.sidebar-section{
    display:flex;align-items:center;gap:11px;
    padding:10px 20px 10px 17px;
    color:rgba(240,240,240,.66);
    font-size:16px;font-weight:500;line-height:1.2;
    text-decoration:none;cursor:pointer;
    border-left:3px solid transparent;
    transition:color .13s,background .13s,border-color .13s;
    user-select:none;
}
.sidebar-nav a:hover,
.sidebar-section:hover{color:#fff;background:rgba(255,255,255,.045);text-decoration:none}
.sb-ico{flex:0 0 18px;height:18px;opacity:.72;transition:opacity .13s}
.sidebar-nav a:hover .sb-ico,
.sidebar-section:hover .sb-ico{opacity:1}
.sb-lbl{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* aktivní položka */
.sidebar-nav a.active{
    color:#fff;background:color-mix(in srgb, var(--color-accent) 10%, transparent);border-left-color:var(--color-accent);
    box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--color-accent) 14%, transparent);
}
.sidebar-nav a.active .sb-ico{opacity:1;color:var(--color-accent)}

/* --- skupina --- */
.sidebar-group{margin:1px 0}
.sidebar-group+.sidebar-group,
.sidebar-group+.sidebar-nav,
.sidebar-nav+.sidebar-group{margin-top:5px}
.sidebar-group>summary{list-style:none}
.sidebar-group>summary::-webkit-details-marker{display:none}
.sb-chev{flex:0 0 9px;height:9px;opacity:.45;transition:transform .18s cubic-bezier(.4,0,.2,1),opacity .13s}
.sidebar-section:hover .sb-chev{opacity:.8}
.sidebar-group[open]>summary .sb-chev{transform:rotate(90deg)}
/* sbalená skupina s aktivní položkou uvnitř → akcentní tečka */
.sb-dot{flex:0 0 5px;height:5px;border-radius:50%;background:var(--color-accent);opacity:0}
.sidebar-group:not([open])>summary.has-active .sb-dot{opacity:1}
/* badge součtu jen na sbalené skupině */
.sidebar-group[open]>summary .badge{display:none}

/* --- podpoložky skupiny: svislá linka s tečkami --- */
.sidebar-kids{position:relative;padding:2px 0 6px;list-style:none;margin:0}
.sidebar-kids::before{
    content:"";position:absolute;left:29px;top:4px;bottom:10px;
    width:1px;background:rgba(255,255,255,.11);
}
.sidebar-kids a{
    display:flex;align-items:center;gap:10px;
    padding:7px 20px 7px 45px;
    color:rgba(240,240,240,.55);
    font-size:15px;font-weight:400;
    text-decoration:none;position:relative;
    border-left:0;
    transition:color .13s,background .13s;
}
.sidebar-kids a:hover{color:#fff;background:rgba(255,255,255,.04)}
.sidebar-kids a::before{
    content:"";position:absolute;left:26px;top:50%;transform:translateY(-50%);
    width:7px;height:7px;border-radius:50%;
    background:#0e2038;border:1.5px solid rgba(255,255,255,.11);
    transition:border-color .13s,background .13s;
}
.sidebar-kids a:hover::before{border-color:rgba(240,240,240,.3)}
.sidebar-kids a.active{color:#fff;font-weight:500;background:none;border-left:0}
.sidebar-kids a.active::before{background:var(--color-accent);border-color:var(--color-accent)}

/* --- badge --- */
.sidebar-nav .badge,
.sidebar-section .badge,
.sidebar-kids .badge{
    flex:0 0 auto;font-size:10.5px;font-weight:600;
    padding:1.5px 6px;border-radius:9px;
    background:color-mix(in srgb, var(--color-accent) 20%, transparent);
    color:color-mix(in srgb, var(--color-accent) 60%, #fff);
    letter-spacing:.01em;margin-left:0;
}

/* --- patička: logo WorkPortal --- */
.sidebar-footer{
    flex:0 0 auto;
    border-top:1px solid rgba(255,255,255,.11);padding:14px 18px;
    display:flex;align-items:center;justify-content:space-between;gap:10px;
}
.sb-wp-logo{height:32px;width:auto;opacity:.82;transition:opacity .15s}
.sb-wp-logo:hover{opacity:1}
.sb-out{
    flex:0 0 auto;color:rgba(255,255,255,.45);padding:5px;border-radius:5px;
    display:flex;cursor:pointer;transition:color .13s,background .13s;
}
.sb-out:hover{color:#fff;background:rgba(255,255,255,.07)}

@media (prefers-reduced-motion:reduce){
    .sidebar-nav a,.sidebar-section,.sb-chev,.sb-ico,.sidebar-kids a{transition:none}
}

/* ── App content area ── */
.app-content {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background: var(--color-bg);
}

.page-header {
    background: var(--color-white);
    border-bottom: 1px solid var(--color-border);
    padding: 1.1rem 2rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: sticky;
    top: 0;
    z-index: 50;
    box-shadow: 0 1px 0 var(--color-border);
}

.page-title {
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--color-text);
}

.page-sub {
    font-size: .82rem;
    color: var(--color-muted);
    margin-top: .1rem;
}

.page-body {
    padding: 1.75rem 2rem;
    flex: 1;
    min-width: 0;
}

/* ── Buttons ── */
.btn {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .5rem 1rem;
    border-radius: var(--radius);
    font-size: .875rem;
    font-weight: 500;
    cursor: pointer;
    border: none;
    text-decoration: none;
    transition: .15s;
    line-height: 1.4;
}
.btn:hover { text-decoration: none; }
.btn:disabled,
.btn[disabled] {
    opacity: .5;
    cursor: not-allowed;
}

.btn-primary {
    background: var(--color-primary);
    color: #fff;
}
.btn-primary:hover { background: var(--color-primary-h); color: #fff; }

.btn-secondary {
    background: var(--color-white);
    color: var(--color-text);
    border: 1px solid var(--color-border);
}
.btn-secondary:hover { border-color: #9ca3af; }

.btn-sm { padding: .35rem .75rem; font-size: .8rem; }

/* ── KPI cards ── */
.kpi-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.25rem;
    margin-bottom: 1.75rem;
}

@media (max-width: 1100px) {
    .kpi-grid { grid-template-columns: repeat(2, 1fr); }
}

.kpi-card {
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-top: 3px solid var(--color-border);
    border-radius: var(--radius);
    padding: 1.25rem 1.5rem;
    box-shadow: var(--shadow);
}

.kpi-label {
    font-size: .7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--color-muted);
    margin-bottom: .5rem;
}

.kpi-value {
    font-size: 2.1rem;
    font-weight: 700;
    line-height: 1;
    color: var(--color-text);
}

.kpi-sub {
    font-size: .78rem;
    color: var(--color-muted);
    margin-top: .4rem;
}

.kpi-card--primary { border-top-color: var(--color-primary); }
.kpi-card--primary .kpi-value { color: var(--color-primary); }

.kpi-card--success { border-top-color: var(--color-success); }
.kpi-card--success .kpi-value { color: var(--color-success); }

.kpi-card--warning { border-top-color: var(--color-warning); }
.kpi-card--warning .kpi-value { color: var(--color-warning); }

/* ── Table card ── */
.table-card {
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    overflow: hidden;
}

/* Seznam zakázek (18. 10.): široká tabulka se na mobilu posouvá, neořízne se. */
.table-card--scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.orders-realization { white-space: nowrap; }
.orders-realization-inline { display: none; }
@media (max-width: 640px) {
    .orders-realization-inline { display: block; margin-top: .2rem; font-size: .75rem; white-space: nowrap; }
}

.table-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.5rem;
    border-bottom: 1px solid var(--color-border);
}

.table-card-title {
    font-size: .9rem;
    font-weight: 600;
}

/* ── Kontext hrany (Verdikt 48 krok 4) — read-only karta "Místo plnění" u
   vykonavatele (downstream), viz pages/orders/detail.php. Mobile-first:
   řádky label/hodnota jsou defaultně nad sebou (úzká obrazovka), od 480px
   se zarovnávají do dvou sloupců — stejný lomový bod jako zbytek karet v
   téhle šabloně. Vlastní třídy (ne .table-card), protože nejde o tabulku —
   krátký seznam popisek/hodnota, tabulková sémantika by tu byla zbytečná. */
.link-context-card {
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    overflow: hidden;
}

.link-context-card-header {
    padding: .85rem 1.1rem;
    border-bottom: 1px solid var(--color-border);
}

.link-context-card-title {
    font-size: .85rem;
    font-weight: 600;
}

.link-context-card-body {
    padding: .4rem 1.1rem .9rem;
}

.link-context-row {
    display: flex;
    flex-direction: column;
    gap: .1rem;
    padding: .5rem 0;
    border-bottom: 1px solid var(--color-border);
}
.link-context-row:last-child { border-bottom: none; }

.link-context-label {
    font-size: .68rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--color-muted);
}

.link-context-value {
    font-size: .85rem;
    color: var(--color-text);
    word-break: break-word;
}

@media (min-width: 480px) {
    .link-context-row {
        flex-direction: row;
        align-items: baseline;
        gap: .75rem;
    }
    .link-context-label {
        flex: 0 0 9rem;
    }
    .link-context-value {
        flex: 1;
    }
}

.data-table {
    width: 100%;
    border-collapse: collapse;
    font-size: .875rem;
}

.data-table th {
    text-align: left;
    font-size: .7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--color-muted);
    padding: .7rem 1.5rem;
    border-bottom: 1px solid var(--color-border);
    background: #fafafa;
    white-space: nowrap;
}

.data-table td {
    padding: .85rem 1.5rem;
    border-bottom: 1px solid var(--color-border);
    color: var(--color-text);
    vertical-align: middle;
}

.data-table tr:last-child td { border-bottom: none; }
.data-table tbody tr:hover { background: var(--color-bg); }

.data-table a { color: var(--color-text); font-weight: 500; }
.data-table a:hover { color: var(--color-primary); text-decoration: none; }

.cell-muted {
    font-size: .82rem;
    color: var(--color-muted);
}

/* ── Status badges ── */
.badge {
    display: inline-flex;
    align-items: center;
    padding: .2rem .65rem;
    border-radius: 999px;
    font-size: .7rem;
    font-weight: 600;
    white-space: nowrap;
}

.badge--new         { background: var(--status-planned-bg);     color: var(--status-planned-text); }
.badge--in_progress { background: var(--status-in-progress-bg); color: var(--status-in-progress-text); }
.badge--done        { background: var(--status-done-bg);        color: var(--status-done-text); }
.badge--cancelled   { background: #fef2f2; color: #dc2626; }

/* ── Filter tabs ── */
.filter-tabs {
    display: flex;
    align-items: center;
    gap: .1rem;
    margin-bottom: 1rem;
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 0 .75rem;
    box-shadow: var(--shadow);
}

.filter-tab {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .75rem .85rem;
    font-size: .85rem;
    color: var(--color-muted);
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    text-decoration: none;
    white-space: nowrap;
    transition: color .15s;
}
.filter-tab:hover { color: var(--color-text); text-decoration: none; }
.filter-tab.active {
    color: var(--color-primary);
    border-bottom-color: var(--color-primary);
    font-weight: 500;
}

.filter-count {
    font-size: .68rem;
    padding: .05rem .42rem;
    border-radius: 999px;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    color: var(--color-muted);
    font-weight: 500;
}
.filter-tab.active .filter-count {
    background: #eff6ff;
    border-color: #bfdbfe;
    color: var(--color-primary);
}

/* ── Filter bar (nad status tabs) ── */
.filter-bar {
    display: flex;
    align-items: center;
    gap: .6rem;
    margin-bottom: .75rem;
}
.filter-bar-label {
    font-size: .8rem;
    color: var(--color-muted);
    white-space: nowrap;
}
.form-select--sm {
    width: auto;
    padding: .35rem 2rem .35rem .65rem;
    font-size: .82rem;
}

/* ── Todo: filtr pracovník+zakázka v jednom řádku (pages/todo/index.php) ── */
.todo-filter-bar {
    display: flex;
    align-items: center;
    gap: .6rem;
    flex-wrap: wrap;
    margin-bottom: .75rem;
}
.todo-filter-select {
    width: auto;
    min-width: 200px;
    max-width: 280px;
}
.todo-filter-badge {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
}
@media (max-width: 640px) {
    .todo-filter-select {
        width: 100%;
        max-width: none;
    }
}

/* ── Admin forms ── */
.form-card {
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    max-width: 860px;
}
.form-card--wide { max-width: none; }

.form-section {
    padding: 1.75rem 1.75rem 1.5rem;
    border-bottom: 1px solid var(--color-border);
}

.form-section-title {
    font-size: .68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .09em;
    color: var(--color-muted);
    margin-bottom: 1.5rem;
}

.form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.35rem 2rem;
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: .45rem;
}

.form-group--full { grid-column: 1 / -1; }

.form-label {
    font-size: .82rem;
    font-weight: 600;
    color: var(--color-text);
    letter-spacing: .01em;
}

.form-required { color: var(--color-danger); margin-left: .15rem; }

.form-input,
.form-textarea {
    width: 100%;
    padding: .6rem .85rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    font-size: .9rem;
    font-family: inherit;
    color: var(--color-text);
    background: var(--color-white);
    outline: none;
    transition: border-color .15s, box-shadow .15s;
}
.form-input:focus,
.form-textarea:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(37,99,235,.12);
}
.form-textarea { resize: vertical; min-height: 100px; }
/* Placeholder = nápověda, ne hodnota: světlejší než text i než --color-muted, kurzíva.
   opacity: 1 — Firefox jinak placeholder ještě zesvětlí nerovnoměrně. */
input::placeholder,
textarea::placeholder {
    color: #9ca3af;
    font-style: italic;
    opacity: 1;
}

/* Custom select */
.form-select {
    width: 100%;
    padding: .6rem 2.2rem .6rem .85rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    font-size: .9rem;
    font-family: inherit;
    color: var(--color-text);
    background-color: var(--color-white);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right .65rem center;
    background-size: 14px;
    -webkit-appearance: none;
    appearance: none;
    outline: none;
    cursor: pointer;
    transition: border-color .15s, box-shadow .15s;
}
.form-select:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(37,99,235,.12);
}

.has-error .form-input,
.has-error .form-select,
.has-error .form-textarea {
    border-color: var(--color-danger);
}
.has-error .form-input:focus,
.has-error .form-select:focus,
.has-error .form-textarea:focus {
    box-shadow: 0 0 0 3px rgba(220,38,38,.12);
}

.form-error {
    font-size: .78rem;
    color: var(--color-danger);
    margin-top: -.1rem;
}

.form-actions {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: 1.25rem 1.75rem;
    border-top: 1px solid var(--color-border);
    background: #fafafa;
    border-radius: 0 0 var(--radius) var(--radius);
}

.form-meta {
    margin-left: auto;
    font-size: .78rem;
    color: var(--color-muted);
}

/* Priority badges */
.badge--priority-high   { background: #fef2f2; color: #dc2626; }
.badge--priority-normal { background: #f0f9ff; color: #0369a1; }
.badge--priority-low    { background: var(--color-bg); color: var(--color-muted); border: 1px solid var(--color-border); }

/* Role badges */
.badge--role-owner  { background: #f5f3ff; color: #7c3aed; }
.badge--role-admin  { background: #eff6ff; color: #2563eb; }
.badge--role-crew_member { background: var(--color-bg); color: var(--color-muted); border: 1px solid var(--color-border); }

/* Status badges */
.badge--status-active   { background: #f0fdf4; color: #15803d; }
.badge--status-inactive { background: #f9fafb; color: var(--color-muted); border: 1px solid var(--color-border); }

/* lifecycle_stage badge (pages/orders/detail.php, hlavička detailu vedle
   názvu) — idea/planning/done/dropped reuse .badge--new/.badge--in_progress/
   .badge--done/.badge--status-inactive výš (barvy sedí i sémanticky).
   'active' potřebovala vlastní třídu — .badge--priority-normal měla sice
   stejné barvy, ale její jméno je o prioritě zakázky, ne o lifecycle fázi,
   matoucí reuse. Stejné barvy jako .badge--priority-normal, jen pod
   správným jménem. */
.badge--stage-active { background: #f0f9ff; color: #0369a1; }

/* ── Zakázky — karty (sekce Záměry/Plánování, pages/orders/index.php) ──
   Gate štítek (order-card-gate) reuses .badge/.badge--status-active/
   .badge--status-inactive výš, žádné nové barvy. */
.order-card-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.order-card {
    display: block;
    background: var(--color-white);
    border: 0.5px solid var(--color-border);
    border-radius: 12px;
    padding: 1rem 1.25rem;
    color: inherit;
    text-decoration: none;
    transition: border-color .15s, box-shadow .15s;
}
.order-card:hover {
    border-color: var(--color-primary);
    box-shadow: var(--shadow);
}

.order-card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: .75rem;
}

.order-card-title {
    font-size: 16px;
    font-weight: 500;
    color: var(--color-text);
}

.order-card-ref {
    font-family: monospace;
    font-size: 12px;
    color: var(--color-muted);
    white-space: nowrap;
    flex-shrink: 0;
    margin-top: .1rem;
}

.order-card-desc {
    margin-top: .3rem;
    font-size: 13px;
    color: var(--color-muted);
    line-height: 1.45;
}

.order-card-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .9rem;
    margin-top: .6rem;
    font-size: 13px;
    color: var(--color-muted);
}

.order-card-meta-item {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
}
.order-card-meta-item svg { flex-shrink: 0; }

.order-card-gate {
    margin-left: auto;
}

/* ── Milestones ── */
.ms-card {
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    margin-top: 1.5rem;
    overflow: hidden;
    max-width: 860px;
}

.ms-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.5rem;
    border-bottom: 1px solid var(--color-border);
}

.ms-list { padding: .25rem 0; }

.ms-row {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: .8rem 1.5rem;
    border-bottom: 1px solid var(--color-border);
    transition: background .1s;
}
.ms-row:last-child { border-bottom: none; }
.ms-row:hover { background: var(--color-bg); }

.ms-dot {
    width: 13px; height: 13px;
    border-radius: 50%;
    flex-shrink: 0;
}
.ms-dot--planned    { background: #d1d5db; }
.ms-dot--active     { background: #f59e0b; box-shadow: 0 0 0 3px rgba(245,158,11,.2); }
.ms-dot--done       { background: var(--color-success); }

.ms-body { flex: 1; min-width: 0; }

.ms-title {
    font-size: .9rem;
    font-weight: 500;
    color: var(--color-text);
}
.ms-title--done {
    text-decoration: line-through;
    color: var(--color-muted);
    font-weight: 400;
}

.ms-dates {
    font-size: .78rem;
    color: var(--color-muted);
    margin-top: .15rem;
}

.ms-actions {
    display: flex;
    align-items: center;
    gap: .35rem;
    flex-shrink: 0;
}

.btn-icon-del {
    width: 28px; height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: none;
    color: var(--color-muted);
    font-size: .75rem;
    cursor: pointer;
    transition: .15s;
    line-height: 1;
}
.btn-icon-del:hover {
    border-color: var(--color-danger);
    color: var(--color-danger);
    background: #fef2f2;
}

/* ── Page tabs ── */
.page-tabs {
    display: flex;
    align-items: center;
    padding: 0 2rem;
    border-bottom: 1px solid var(--color-border);
    background: var(--color-white);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.page-tabs::-webkit-scrollbar { display: none; }

/* overflow-x: auto výš vynucuje i clip na ose Y (CSS spec: visible sousedící
   s non-visible osou se počítá jako auto), takže #lc-overflow-menu se
   při otevření ořízne o spodní hranu .page-tabs — z-index na dropdownu
   (viz .page-tabs-overflow-menu) na tom nic nezmění, je to ořez, ne
   stacking. Dokud je menu otevřené (chybí atribut [hidden]), pustíme
   přetok, ať je vidět celé; horizontální scroll tabů se tím jen krátce
   pozastaví, ne odstraní. */
.page-tabs:has(#lc-overflow-menu:not([hidden])) {
    overflow: visible;
}

.page-tab {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .85rem .85rem;
    font-size: .875rem;
    font-weight: 500;
    color: var(--color-muted);
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    text-decoration: none;
    white-space: nowrap;
    flex-shrink: 0;
    transition: color .15s;
}
.page-tab:hover { color: var(--color-text); text-decoration: none; }
.page-tab.active {
    color: var(--color-primary);
    border-bottom-color: var(--color-primary);
}
.page-tab .filter-count { font-size: .68rem; }

/* ── Page subtabs (řada 2 — POHLED) ──
   pages/orders/detail.php: druhá řada pod .page-tabs, jen když má aktivní
   agenda víc než jeden pohled (Plán -> Časová osa/MindMap, Deník ->
   Stavební/Pracovní/Strom). Vizuálně lehčí než .page-tab — menší písmo,
   jemnější aktivní stav (barva textu místo spodní linky), ať je na první
   pohled jasné, že jde o podřazenou úroveň navigace, ne o další agendu. */
.page-subtabs {
    display: flex;
    align-items: center;
    gap: 1.4rem;
    padding: .5rem 2rem;
    border-bottom: 1px solid var(--color-border);
    background: var(--color-bg);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.page-subtabs::-webkit-scrollbar { display: none; }

.page-subtab {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    padding: .5rem .25rem;
    font-size: .9375rem;
    font-weight: 500;
    color: var(--color-muted);
    text-decoration: none;
    white-space: nowrap;
    flex-shrink: 0;
    transition: color .15s;
}
.page-subtab:hover { color: var(--color-text); text-decoration: none; }
.page-subtab.active { color: var(--color-primary); font-weight: 600; }

.page-tabs-action {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-left: auto;
    padding: .5rem 0 .5rem .75rem;
    flex-shrink: 0;
}

/* ── Zakázky detail — lifecycle přechod v nav liště (pages/orders/detail.php,
   nav.page-tabs, pokračování řady tabů hned za "Upravit zakázku" — NE
   v .page-tabs-action, ta zůstává vyhrazená pro "+ Přidat událost" úplně
   vpravo). Hlavní akce je textový odkaz stejné velikosti/řezu jako
   .page-tab, jen trvale v accent barvě (na rozdíl od .page-tab, kde accent
   dostane až .active stav) + šipka vpravo. Vedlejší akce (archivace, návrat
   do záměrů) v overflow menu hned vedle. */
.page-tabs-sep {
    display: inline-block;
    width: 1px;
    height: 16px;
    margin: 0 12px;
    background: var(--color-border);
    flex-shrink: 0;
}

.page-tab-transition {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .85rem 0;
    background: none;
    border: none;
    cursor: pointer;
    font-size: .875rem;
    font-weight: 500;
    font-family: inherit;
    color: var(--color-primary);
    white-space: nowrap;
    flex-shrink: 0;
    text-decoration: none;
}
.page-tab-transition:hover { color: var(--color-primary-h); text-decoration: none; }
.page-tab-transition svg { flex-shrink: 0; }

.page-tabs-overflow {
    position: relative;
    flex-shrink: 0;
}

.page-tabs-overflow-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    background: none;
    border: 1px solid transparent;
    border-radius: var(--radius);
    cursor: pointer;
    font-size: 1.1rem;
    line-height: 1;
    color: var(--color-muted);
}
.page-tabs-overflow-btn:hover { background: var(--color-bg); color: var(--color-text); }

.page-tabs-overflow-menu {
    position: absolute;
    top: calc(100% + .3rem);
    right: 0;
    z-index: 20;
    display: flex;
    flex-direction: column;
    min-width: 11rem;
    padding: .35rem;
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}
.page-tabs-overflow-menu[hidden] { display: none; }

.page-tabs-overflow-item {
    display: block;
    width: 100%;
    padding: .5rem .6rem;
    background: none;
    border: none;
    border-radius: var(--radius);
    cursor: pointer;
    font-size: .8rem;
    font-family: inherit;
    color: var(--color-text);
    text-align: left;
    white-space: nowrap;
}
.page-tabs-overflow-item:hover { background: var(--color-bg); }

/* ── Gantt outer wrapper ── */
.gantt-outer {
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    overflow: hidden;
}

.gantt-empty,
.gantt-nodates-hint {
    padding: 2.5rem 1.5rem;
    color: var(--color-muted);
    font-size: .875rem;
    text-align: center;
}

/* ── Gantt scroll container ── */
.gantt-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    cursor: grab;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.gantt-scroll::-webkit-scrollbar { display: none; }
.gantt-scroll:active { cursor: grabbing; }

/* ── Gantt inner grid ── */
.gantt {
    min-width: 560px;
    display: flex;
    flex-direction: column;
}

/* ── Gantt row ── */
.gantt-row {
    display: flex;
    align-items: stretch;
    border-bottom: 1px solid var(--color-border);
    min-height: 56px;
}
.gantt-row--header { min-height: 42px; }
.gantt-row:last-child { border-bottom: none; }
.gantt-row--header { background: #fafafa; }
.gantt-row:not(.gantt-row--header):hover { background: var(--color-bg); }

/* ── Label column (sticky left on horizontal scroll) ── */
.gantt-label {
    width: 170px;
    min-width: 170px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    padding: .5rem .85rem;
    border-right: 1px solid var(--color-border);
    position: sticky;
    left: 0;
    background: var(--color-white);
    z-index: 2;
    overflow: hidden;
}
.gantt-label-inner {
    display: flex;
    align-items: flex-start;
    gap: .4rem;
    min-width: 0;
    overflow: hidden;
}
.gantt-label-inner .gantt-ms-dot { margin-top: 4px; flex-shrink: 0; }
.gantt-label-text { min-width: 0; overflow: hidden; }
.gantt-label-name {
    display: flex;
    align-items: center;
    gap: .3rem;
    min-width: 0;
    font-size: .78rem;
    font-weight: 500;
    color: var(--color-text);
}
/* Oprava po balíku 1 (BOD F, regrese) — vlastní flex položka, žádné uříznutí
   spolu s přetékajícím titulkem uvnitř společného nowrap+overflow:hidden
   bloku (dřív vypadal jako sotva viditelná tečka na okraji sloupce,
   prakticky splývající s krajem baru). .gantt-unread-badge (malé číslo)
   zůstává beze změny — pevná velikost, nemá se co zkracovat.
   Verdikt 58.5 — "od {firma}" badge (.ms-shared-badge) byl z tohohle
   řádku (dated Gantt label) odstraněn, stejná info je teď v hoveru IN/OUT
   ikony + v detail modalu; badge sám dál žije v deníku a kartě milníku. */
.gantt-label-name-text {
    flex: 1 1 auto;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.gantt-label-name .gantt-unread-badge {
    flex-shrink: 0;
}
.gantt-label-date {
    font-size: .63rem;
    color: var(--color-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-top: 1px;
}
.gantt-row--header .gantt-label { background: #fafafa; }
.gantt-row:not(.gantt-row--header):hover .gantt-label { background: var(--color-bg); }
.gantt-label--head { background: #fafafa; }

/* ── Time axis (header) ── */
.gantt-axis {
    flex: 1;
    position: relative;
    height: 42px;
    overflow: visible;
}

.gantt-tick {
    position: absolute;
    top: 0;
    height: 100%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    pointer-events: none;
}

.gantt-tick-nub {
    width: 1px;
    height: 8px;
    background: var(--color-border);
    margin-top: auto; /* push to bottom of axis */
}

.gantt-tick-label {
    position: absolute;
    bottom: 10px;
    font-size: .62rem;
    color: var(--color-muted);
    white-space: nowrap;
    letter-spacing: .02em;
}

/* ── Today marker in header ── */
.gantt-today-head {
    position: absolute;
    top: 0;
    bottom: 0;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    pointer-events: none;
    z-index: 1;
}
.gantt-today-head::before {
    content: '';
    width: 2px;
    height: 8px;
    background: var(--color-danger);
    margin-top: auto;
    opacity: .7;
}
.gantt-today-label {
    position: absolute;
    bottom: 10px;
    font-size: .62rem;
    font-weight: 600;
    color: var(--color-danger);
    white-space: nowrap;
    opacity: .8;
}

/* ── Track — the horizontal bar area ── */
.gantt-track {
    flex: 1;
    position: relative;
    height: 56px;
}

/* ── Today vertical line inside track ── */
.gantt-today-line {
    position: absolute;
    top: 0; bottom: 0;
    width: 2px;
    background: var(--color-danger);
    opacity: .35;
    transform: translateX(-50%);
    pointer-events: none;
    z-index: 1;
}

/* ── Gantt bar ── */
.gantt-bar {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    height: 22px;
    border-radius: 4px;
    min-width: 4px;
    overflow: hidden;
    cursor: pointer;
    transition: filter .15s;
    z-index: 2;
}
.gantt-bar:hover { filter: brightness(.88); }

.gantt-bar--planned     { background: var(--status-planned-soft); }
.gantt-bar--in_progress { background: var(--status-in-progress-soft); }
.gantt-bar--done        { background: var(--status-done-soft); }

.gantt-bar-label {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    padding: 0 6px;
    font-size: .65rem;
    font-weight: 600;
    color: rgba(0,0,0,.55);
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    pointer-events: none;
}
.gantt-bar-label-text {
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ── Status dot in label ── */
.gantt-ms-dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}
.gantt-ms-dot--planned      { background: var(--status-planned-soft); }
.gantt-ms-dot--in_progress  { background: var(--status-in-progress-soft); }
.gantt-ms-dot--done         { background: var(--status-done-soft); }

/* (gantt-actions column removed — actions are in the popup) */

/* ── Legend ── */
.gantt-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    padding: .6rem 1rem;
    border-top: 1px solid var(--color-border);
    background: #fafafa;
}
.gantt-legend-item {
    display: flex;
    align-items: center;
    gap: .4rem;
    font-size: .72rem;
    color: var(--color-muted);
}
.gantt-legend-swatch {
    width: 12px; height: 12px;
    border-radius: 3px;
    flex-shrink: 0;
}
.gantt-legend-swatch--planned     { background: var(--status-planned-soft); }
.gantt-legend-swatch--in_progress { background: var(--status-in-progress-soft); }
.gantt-legend-swatch--done        { background: var(--status-done-soft); }
.gantt-legend-today {
    width: 2px; height: 14px;
    background: var(--color-danger);
    opacity: .6;
    border-radius: 1px;
    flex-shrink: 0;
}

/* ── Undated milestones ── */
.gantt-undated {
    border-top: 1px solid var(--color-border);
    padding: .85rem 1.25rem;
    background: #fafafa;
}
.gantt-undated-title {
    font-size: .65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .09em;
    color: var(--color-muted);
    margin-bottom: .6rem;
}
.gantt-undated-row {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .35rem 0;
    border-bottom: 1px solid var(--color-border);
}
.gantt-undated-row:last-child { border-bottom: none; }
.gantt-undated-name {
    flex: 1;
    font-size: .875rem;
    color: var(--color-text);
}
.gantt-undated-name--done {
    text-decoration: line-through;
    color: var(--color-muted);
}
.gantt-undated-actions {
    display: flex;
    align-items: center;
    gap: .3rem;
    flex-shrink: 0;
}

/* ── Sdílené milníky od druhé strany subcontract_link (Model B, read-only) ── */
.gantt-bar--shared {
    cursor: default;
    background: repeating-linear-gradient(45deg, #e5e7eb, #e5e7eb 6px, #d1d5db 6px, #d1d5db 12px);
    opacity: .85;
}
.gantt-bar--shared:hover { filter: none; }

/* ── Aktivně sdílený milník (mode='active'): horní půlka = původ (šrafa),
   dolní půlka = aktuální stav. Pasivní/náhled zůstává celý .gantt-bar--shared
   výš. overflow:hidden na .gantt-bar ořízne pseudoelementy do stejného
   zaobleného rohu, není potřeba border-radius duplikovat.
   Klikatelný (read-only náhled, viz openSharedPreviewSwal v JS) — na rozdíl
   od .gantt-bar--shared výš, ten klik ignoruje. z-index na ::before/::after
   drží obě půlky POD .gantt-bar-label (ta má z-index:2 v základním pravidle
   výš), ať label nikdy nezapadne pod žádnou z nich bez ohledu na pořadí
   pseudoelementů vs. reálných dětí v DOM. ── */
.gantt-bar--shared-active {
    cursor: pointer;
    background: none;
    opacity: 1;
}
.gantt-bar--shared-active:hover { filter: brightness(.94); }
.gantt-bar--shared-active::before,
.gantt-bar--shared-active::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    height: 50%;
    z-index: 1;
}
.gantt-bar--shared-active::before {
    top: 0;
    background: repeating-linear-gradient(45deg, #e5e7eb, #e5e7eb 3px, #d1d5db 3px, #d1d5db 6px);
}
.gantt-bar--shared-active::after { bottom: 0; }
.gantt-bar--shared-active--planned::after     { background: var(--status-planned-soft); }
.gantt-bar--shared-active--in_progress::after { background: var(--status-in-progress-soft); }
.gantt-bar--shared-active--done::after        { background: var(--status-done-soft); }

/* Podklad pod textem — čitelnost přes šrafovanou i barevnou půlku zároveň.
   Jen tady (ne globálně v .gantt-bar-label-text), normální bary se
   samotnou plnou barvou pod textem obejdou beze změny vzhledu. */
.gantt-bar--shared-active .gantt-bar-label {
    color: rgba(17, 24, 39, .88);
}
.gantt-bar--shared-active .gantt-bar-label-text {
    background: rgba(255, 255, 255, .72);
    padding: 1px 5px;
    border-radius: 3px;
}

/* Krok 5.2 — mode='active' vs 'read': vizuálně identický split bar dostane
   navíc tenhle malý zelený indikátor (jen 'active', 'read' ho nemá). Signál
   "aktivní sdílení" — zápis protistrany zatím nikde není zapojený, jen
   odlišení od read.
   Sjednocení do jedné řady — poloha (position/top/right/z-index) teď patří
   výhradně kontejneru .gantt-bar-indicators, tady zůstává jen velikost/
   barva/tvar (viz i override 10x10 v detail.php <style>). */
.gantt-bar-indicators {
    position: absolute;
    top: 50%;
    right: 6px;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    gap: 4px;
    z-index: 3;
    pointer-events: auto;
}
.gantt-bar-active-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #16a34a;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .9);
    pointer-events: none;
}

.gantt-legend-swatch--shared {
    background: repeating-linear-gradient(45deg, #e5e7eb, #e5e7eb 3px, #d1d5db 3px, #d1d5db 6px);
}
/* Malý swatch nemá prostor na 3 stavové barvy jako bar samotný — horní
   půlka hatch (původ), dolní půlka jedna reprezentativní barva (planned). */
.gantt-legend-swatch--shared-active {
    background-image:
        repeating-linear-gradient(45deg, #e5e7eb, #e5e7eb 2px, #d1d5db 2px, #d1d5db 4px),
        linear-gradient(var(--status-planned-soft), var(--status-planned-soft));
    background-size: 100% 50%, 100% 50%;
    background-position: top, bottom;
    background-repeat: no-repeat, no-repeat;
}
.gantt-undated-row--shared .gantt-undated-name { color: var(--color-muted); font-style: italic; }
.ms-shared-badge {
    font-size: .65rem;
    font-weight: 600;
    padding: .05rem .45rem;
    border-radius: 99px;
    background: #ede9fe;
    color: #6d28d9;
    border: 1px solid #ddd6fe;
    white-space: nowrap;
}

/* Etapa 57.C krok C3b — badge kaskáda (nepřečtené notifikace na milník),
   stejné barvy jako .badge--warning (žlutá) použitá jinde u menu badgí. */
.gantt-unread-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.05rem;
    height: 1.05rem;
    padding: 0 .3rem;
    margin-left: .3rem;
    border-radius: 999px;
    background: #fef9c3;
    color: #854d0e;
    font-size: .62rem;
    font-weight: 700;
    white-space: nowrap;
}
.diary-entry--shared .diary-entry-card { background: #f9fafb; opacity: .9; }
.diary-entry--shared .diary-entry-dot { background: #cbd5e1 !important; box-shadow: 0 0 0 2px #e5e7eb !important; }

/* Oprava po C3a/C3b (bod 8) — sjednocený feedback akčních tlačítek, viz
   window.showSavedFeedback v assets/js/app.js. !important přebíjí btn-primary/
   btn-secondary barvy na dobu feedbacku (2 s), pak se třída zase odebere. */
.btn-feedback-success {
    background: #16a34a !important;
    border-color: #16a34a !important;
    color: #fff !important;
}

/* ── Popup — stavební deník (msp = milestone popup) ── */
.msp-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: .75rem;
    padding: 1.1rem 1.25rem .85rem;
    border-bottom: 1px solid var(--color-border);
    flex-shrink: 0;
}
.msp-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-text);
    line-height: 1.35;
}
.msp-meta {
    font-size: .75rem;
    color: var(--color-muted);
    margin-top: .25rem;
    display: flex;
    align-items: center;
    gap: .35rem;
    flex-wrap: wrap;
}

.msp-body {
    flex: 1;
    overflow-y: auto;
    padding: 1rem 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
}

.msp-section {}
.msp-section-label {
    display: block;
    font-size: .75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--color-muted);
    margin-bottom: .5rem;
}

.msp-desc { min-height: 90px; resize: vertical; }

/* Photos header with add button */
.msp-photos-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: .5rem;
}
.msp-photos-header .msp-section-label { margin-bottom: 0; }

/* msp-photo-add-btn uses .btn.btn-secondary.btn-sm from design system */

/* Photo grid — 150×150 thumbnails in milestone detail modal */
.msp-photos {
    display: grid;
    grid-template-columns: repeat(auto-fill, 150px);
    gap: .5rem;
}

.msp-thumb {
    position: relative;
    width: 150px;
    height: 150px;
    border-radius: 6px;
    overflow: hidden;
    border: 1px solid var(--color-border);
    flex-shrink: 0;
    transition: opacity .2s;
}
.msp-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    cursor: zoom-in;
    display: block;
    transition: transform .2s;
}
.msp-thumb:hover img { transform: scale(1.04); }
.msp-thumb--removing { opacity: .4; pointer-events: none; }

.msp-thumb-del {
    position: absolute;
    top: 3px; right: 3px;
    width: 20px; height: 20px;
    border-radius: 50%;
    background: rgba(0,0,0,.55);
    color: #fff;
    font-size: .65rem;
    border: none;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    opacity: 0;
    transition: opacity .15s;
    line-height: 1;
}
.msp-thumb:hover .msp-thumb-del { opacity: 1; }

/* Verdikt 58 krok 58.2 — Přidat do deníku / Odebrat z deníku / V deníku.
   Levý horní roh (roh, kde NENÍ msp-thumb-del), aby se obě akce nepřekrývaly.
   "V deníku" stav je VŽDY viditelný (ne jen na hover) — je to stavová
   informace, ne jen akce, na rozdíl od del/scope tlačítek. */
.msp-thumb-diary {
    position: absolute;
    top: 3px; left: 3px;
    height: 20px;
    padding: 0 6px;
    border-radius: 10px;
    background: rgba(0,0,0,.55);
    color: #fff;
    font-size: .62rem;
    font-weight: 600;
    border: none;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    opacity: 0;
    transition: opacity .15s, background-color .15s;
    line-height: 1;
    white-space: nowrap;
}
.msp-thumb:hover .msp-thumb-diary { opacity: 1; }
.msp-thumb-diary--in {
    background: rgba(22,163,74,.85);
    opacity: 1;
}

/* ── Sjednocený lightbox fotek (WPLightbox, assets/js/app.js) ─────────────
   Jeden render helper pro Kartu milníku, Pracovní deník, Stavební deník i
   Média. z-index 99999 — musí být NAD Kartou milníku (ta je sama SweetAlert2
   modal, z-index 1060), viz .wp-lb-confirm-swal níž pro mazací potvrzení
   (to musí být zase NAD tímhle lightboxem). */
#wp-lightbox {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 99999;
    background: rgba(0,0,0,.93);
    align-items: stretch;
    justify-content: center;
}
.wp-lb-close {
    position: absolute;
    top: 1rem; right: 1rem;
    z-index: 1;
    width: 38px; height: 38px;
    border-radius: 50%;
    background: rgba(255,255,255,.12);
    border: none;
    color: #fff;
    font-size: 1.3rem;
    line-height: 1;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: background .15s;
}
.wp-lb-close:hover { background: rgba(255,255,255,.22); }

.wp-lb-body {
    display: flex;
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    align-items: stretch;
}
.wp-lb-main {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    padding: 2rem 1rem;
    min-width: 0;
}
.wp-lb-nav {
    flex-shrink: 0;
    width: 46px; height: 46px;
    border-radius: 50%;
    background: rgba(255,255,255,.12);
    border: none;
    color: #fff;
    font-size: 1.8rem;
    line-height: 1;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: background .15s;
}
.wp-lb-nav:hover { background: rgba(255,255,255,.22); }
.wp-lb-image-wrap {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
}
.wp-lb-img {
    max-width: 100%;
    max-height: 82vh;
    object-fit: contain;
    border-radius: 6px;
    display: block;
    box-shadow: 0 12px 48px rgba(0,0,0,.6);
}

.wp-lb-panel {
    flex: 0 0 300px;
    max-width: 300px;
    background: #17181c;
    color: rgba(255,255,255,.85);
    padding: 1.25rem 1rem;
    overflow-y: auto;
    font-size: .85rem;
}
.wp-lb-counter {
    font-size: .72rem;
    color: rgba(255,255,255,.4);
    letter-spacing: .05em;
    margin-bottom: 1rem;
}
.wp-lb-info-filename {
    font-weight: 600;
    color: #fff;
    margin-bottom: .75rem;
    word-break: break-word;
}
.wp-lb-info-row {
    display: flex;
    justify-content: space-between;
    gap: .5rem;
    padding: .35rem 0;
    border-bottom: 1px solid rgba(255,255,255,.08);
}
.wp-lb-info-label { color: rgba(255,255,255,.5); flex-shrink: 0; }
.wp-lb-info-value { text-align: right; word-break: break-word; }

.wp-lb-actions {
    margin-top: 1.25rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(255,255,255,.15);
    display: flex;
    flex-direction: column;
    gap: .75rem;
}
/* Přidat/odebrat z deníku — tlačítko (ne checkbox), barva odráží
   SKUTEČNÝ stav ze serveru (viz app.js wireActions — mění se jen uvnitř
   .then(data.ok), nikdy hned po kliku). Modrá = výchozí (není v deníku),
   zelená = v deníku. */
.wp-lb-diary-btn {
    align-self: flex-start;
    border: none;
    border-radius: 6px;
    padding: .45rem .8rem;
    font-size: .82rem;
    font-weight: 600;
    cursor: pointer;
    background: #2563eb;
    color: #fff;
    transition: background .15s;
}
.wp-lb-diary-btn:hover { background: #1d4ed8; }
.wp-lb-diary-btn--in { background: #16a34a; }
.wp-lb-diary-btn--in:hover { background: #15803d; }

.wp-lb-scope-row { display: flex; flex-direction: column; gap: .3rem; }
.wp-lb-scope-label { font-size: .72rem; color: rgba(255,255,255,.5); }
.wp-lb-scope-row.wp-lb-scope-info {
    font-size: .78rem;
    color: rgba(255,255,255,.7);
    line-height: 1.35;
}
.wp-lb-scope-select {
    background: #fff;
    color: #111827;
    border: none;
    border-radius: 4px;
    padding: .4rem .5rem;
    font-size: .8rem;
}
/* Mazání — oddělené od tlačítka/selektoru linkou + ~50px mezerou
   (destruktivní akce, nemá být hned vedle ovládacích prvků, kde se dá
   kliknout omylem). Klidový stav je decentní (prostý text, ne výrazné
   červené tlačítko) — výraznější smí být až dvoukrokové potvrzení
   (.wp-lb-delete-btn--confirm, viz app.js wireActions). */
/* 26. 10. — přepínač Před / Po / Bez v lightboxu deníku (app.js renderActions). */
.wp-lb-phase { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; margin-top: .9rem; }
.wp-lb-phase-title { flex-basis: 100%; font-size: .75rem; color: rgba(255,255,255,.6); }
.wp-lb-phase-btn {
    border: 1px solid rgba(255,255,255,.3); background: transparent; color: #fff;
    border-radius: 999px; padding: .3rem .8rem; font-size: .8rem; cursor: pointer;
}
.wp-lb-phase-btn:hover { border-color: rgba(255,255,255,.7); }
.wp-lb-phase-btn.is-active { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-accent-ink); font-weight: 600; cursor: default; }
.wp-lb-phase-btn:disabled { opacity: .5; }
.wp-lb-delete-sep {
    border: none;
    border-top: 1px solid rgba(255,255,255,.12);
    width: 100%;
    margin: 50px 0 0;
}
.wp-lb-delete-btn {
    align-self: flex-start;
    background: none;
    border: none;
    padding: 0;
    color: rgba(255,255,255,.45);
    font-size: .78rem;
    cursor: pointer;
    transition: color .15s;
}
.wp-lb-delete-btn:hover { color: #f87171; }
.wp-lb-delete-btn--confirm {
    color: #f87171;
    font-weight: 600;
}
.wp-lb-delete-btn--confirm:hover { color: #ef4444; }
.wp-lb-action-error {
    color: #fca5a5;
    font-size: .78rem;
}

/* Přesun fotky do jiného zápisu — tlačítko ve STEJNÉM stylu jako
   wp-lb-diary-btn (konstruktivní akce), ale neutrální barva (není to
   přepínač stavu jako "Přidat do deníku"). Nezávislé na wp-lb-delete-sep
   výš — může se vykreslit i v opts.readOnly kontextu (viz app.js
   renderActions), kde delete/diary vůbec nejsou. */
.wp-lb-move-btn {
    align-self: flex-start;
    border: 1px solid rgba(255,255,255,.3);
    border-radius: 6px;
    padding: .45rem .8rem;
    font-size: .82rem;
    font-weight: 600;
    cursor: pointer;
    background: none;
    color: #fff;
    transition: background .15s;
}
.wp-lb-move-btn:hover { background: rgba(255,255,255,.12); }

/* Oprava — výběr cílového zápisu se rozbaluje PŘÍMO V PANELU lightboxu
   (opts.canMove, app.js openMovePanel), ne v druhém modalu nad ním (ten
   měl nižší z-index než #wp-lightbox a byl vizuálně schovaný). Tmavé
   barvy jako zbytek .wp-lb-panel (wp-lb-info-row atd.), ne světlý Swal. */
.wp-lb-move-panel {
    margin-top: .75rem;
    padding-top: .75rem;
    border-top: 1px solid rgba(255,255,255,.15);
}
/* Select "Milník" — depth odsazení přes inline padding-left na <option>
   (app.js renderMovePanelBody, stejná formule jako .prg-name jinde v
   detail.php: depth * 1.25rem), STEJNÉ pořadí jako Deníkový strom/MindMap. */
.wp-lb-move-field-label { font-size: .72rem; color: rgba(255,255,255,.5); display: block; margin-bottom: .2rem; }
.wp-lb-move-node-select {
    width: 100%;
    background: #fff;
    color: #111827;
    border: none;
    border-radius: 4px;
    padding: .4rem .5rem;
    font-size: .8rem;
    margin-bottom: .5rem;
}
.wp-lb-move-entries { min-height: 1.5rem; }
.wp-lb-move-loading { font-size: .8rem; color: rgba(255,255,255,.5); padding: .3rem 0; }
.wp-lb-move-list { max-height: 220px; overflow-y: auto; margin-bottom: .5rem; }
.wp-lb-move-option {
    display: flex;
    align-items: flex-start;
    gap: .5rem;
    padding: .4rem 0;
    font-size: .82rem;
    color: rgba(255,255,255,.85);
    cursor: pointer;
    border-bottom: 1px solid rgba(255,255,255,.08);
}
.wp-lb-move-option input { margin-top: .2rem; }
/* Zamčený den — šedě, nevybratelné (radio disabled), poznámka "den
   uzamčen" je součástí .wp-lb-move-option--locked span (app.js). */
.wp-lb-move-option--locked {
    color: rgba(255,255,255,.4);
    cursor: default;
}
.wp-lb-move-option--locked em { font-style: normal; color: rgba(255,255,255,.35); }
.wp-lb-move-date-input {
    background: #fff;
    color: #111827;
    border: none;
    border-radius: 4px;
    padding: .25rem .4rem;
    font-size: .76rem;
    margin-left: .3rem;
}
.wp-lb-move-msg { font-size: .8rem; margin: .5rem 0; }
.wp-lb-move-msg--ok { color: #86efac; }
.wp-lb-move-msg--error { color: #fca5a5; }
.wp-lb-move-btn-row { display: flex; gap: .5rem; margin-top: .5rem; }
/* Tlačítka ve stylu aplikace — Přesunout stejné jako wp-lb-diary-btn
   (modrá, konstruktivní), Zrušit/Ponechat neutrální obrys jako
   wp-lb-move-btn — NIKDY výchozí fialová SweetAlert. */
.wp-lb-move-confirm-btn {
    border: none;
    border-radius: 6px;
    padding: .4rem .75rem;
    font-size: .8rem;
    font-weight: 600;
    cursor: pointer;
    background: #2563eb;
    color: #fff;
    transition: background .15s;
}
.wp-lb-move-confirm-btn:hover { background: #1d4ed8; }
.wp-lb-move-confirm-btn:disabled { opacity: .6; cursor: default; }
.wp-lb-move-cancel-btn {
    border: 1px solid rgba(255,255,255,.3);
    border-radius: 6px;
    padding: .4rem .75rem;
    font-size: .8rem;
    cursor: pointer;
    background: none;
    color: rgba(255,255,255,.85);
    transition: background .15s;
}
.wp-lb-move-cancel-btn:hover { background: rgba(255,255,255,.12); }
.wp-lb-move-cancel-btn:disabled { opacity: .6; cursor: default; }

@media (max-width: 860px) {
    .wp-lb-body { flex-direction: column; }
    .wp-lb-panel { flex: 0 0 auto; max-width: none; max-height: 40vh; }
    .wp-lb-main { padding: 1rem; }
    .wp-lb-img { max-height: 45vh; }
}

/* Upload progress bar */
.msp-upload-progress {
    height: 3px;
    background: var(--color-border);
    border-radius: 2px;
    margin-top: .5rem;
    overflow: hidden;
}
.msp-upload-bar {
    height: 100%;
    background: var(--color-primary);
    border-radius: 2px;
    transition: width .3s;
    width: 0%;
}

/* Footer */
.msp-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    padding: .85rem 1.25rem;
    border-top: 1px solid var(--color-border);
    background: #fafafa;
    border-radius: 0 0 10px 10px;
    flex-shrink: 0;
    flex-wrap: wrap;
}
.msp-footer-left { display: flex; align-items: center; gap: .6rem; }
.msp-footer-right { display: flex; align-items: center; gap: .5rem; }

.msp-saved-msg {
    font-size: .78rem;
    color: var(--color-muted);
    transition: opacity .3s;
}
.msp-saved-msg--ok { color: var(--color-success); }
.msp-saved-msg--saving { color: var(--color-muted); }

/* Lightbox */
.msp-lightbox {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.88);
    z-index: 9000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    opacity: 0;
    transition: opacity .18s;
    cursor: zoom-out;
}
.msp-lightbox.is-open { opacity: 1; }
.msp-lightbox-inner {
    position: relative;
    max-width: 90vw;
    max-height: 90vh;
}
.msp-lightbox-inner img {
    display: block;
    max-width: 100%;
    max-height: 90vh;
    object-fit: contain;
    border-radius: 4px;
    cursor: default;
}
.msp-lightbox-inner .ms-popup-close {
    position: absolute;
    top: -12px; right: -12px;
    background: #fff;
    box-shadow: 0 2px 8px rgba(0,0,0,.3);
}


/* ── Sdílené prvky popup — zavírací tlačítko a tečka stavu ── */
.ms-popup-close {
    flex-shrink: 0;
    width: 26px; height: 26px;
    display: flex; align-items: center; justify-content: center;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: none;
    color: var(--color-muted);
    font-size: .75rem;
    cursor: pointer;
    transition: .15s;
    line-height: 1;
    margin-top: -.1rem;
}
.ms-popup-close:hover {
    border-color: #9ca3af;
    color: var(--color-text);
}

.ms-popup-dot {
    width: 10px; height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}
.ms-popup-dot--planned     { background: var(--status-planned-soft); }
.ms-popup-dot--in_progress { background: var(--status-in-progress-soft); }
.ms-popup-dot--done        { background: var(--status-done-soft); }

/* ── Danger button ── */
.btn-danger {
    background: #fef2f2;
    color: var(--color-danger);
    border: 1px solid #fecaca;
}
.btn-danger:hover {
    background: #fee2e2;
    border-color: #fca5a5;
    color: var(--color-danger);
    text-decoration: none;
}

/* ── Mobile: Gantt compact ── */
@media (max-width: 640px) {
    .gantt-label       { width: 110px; min-width: 110px; padding: .4rem .5rem; }
    .gantt-label-name  { font-size: .70rem; }
    .gantt-label-date  { font-size: .58rem; }
    .gantt-bar-label   { display: none; }
    .gantt-legend      { gap: .65rem; }
}

/* ── Empty state ── */
.empty-state {
    text-align: center;
    padding: 3.5rem 2rem;
    color: var(--color-muted);
}
.empty-state strong { display: block; font-size: 1rem; color: var(--color-text); margin-bottom: .4rem; }
.empty-state p { font-size: .875rem; }

/* ── Media gallery grid — 250×250 thumbnails ── */
.media-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, 250px);
    gap: 1rem;
}

.media-card {
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    overflow: hidden;
    cursor: pointer;
    box-shadow: var(--shadow);
    transition: box-shadow .15s, transform .15s;
}
.media-card:hover {
    box-shadow: 0 4px 16px rgba(0,0,0,.12);
    transform: translateY(-2px);
}

.media-thumb {
    position: relative;
    width: 250px;
    height: 250px;
    border-radius: 6px;
    overflow: hidden;
    background: var(--color-bg);
}
/* Mazání fotek na stránce Média — znovupoužitá .msp-thumb-del (Karta
   milníku, assets/css/app.css výš), jen jiný hover-trigger (.media-card,
   ne .msp-thumb, protože tady je obal karty .media-card/.media-thumb, ne
   .msp-thumb). position:relative na .media-thumb výš je nutná podmínka
   pro absolutní pozicování tlačítka v jeho pravém horním rohu. */
.media-card:hover .msp-thumb-del { opacity: 1; }
.media-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .2s;
}
.media-card:hover .media-thumb img { transform: scale(1.04); }

.media-meta {
    padding: .55rem .75rem .65rem;
}
.media-order {
    font-size: .82rem;
    font-weight: 600;
    color: var(--color-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* ── Detail pages — shared layout ── */

/* Right-side buttons group in page-header */
.page-header-actions {
    display: flex;
    gap: .5rem;
    align-items: center;
}

/* Small inline badge (inside page-sub text) */
.badge--sm {
    font-size: .7rem;
    vertical-align: middle;
}

/* Section label above table-card content */
.section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.25rem .6rem;
    font-size: .8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--color-muted);
}

.section-header-count {
    font-weight: 400;
    margin-left: .4rem;
}

/* ── Subcontract links: příchozí subdodávky (Model B) — mobile-first ── */
.sc-invite-card { margin-bottom: 1rem; }
.sc-invite-header {
    display: flex;
    flex-direction: column;
    gap: .6rem;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--color-border);
}
.sc-invite-title { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; font-weight: 600; font-size: .9rem; }
.sc-invite-actions { display: flex; flex-direction: column; gap: .5rem; }
.sc-invite-actions form,
.sc-invite-actions a { width: 100%; }
.sc-invite-actions .btn { width: 100%; }
.sc-invite-body { padding: 1rem 1.25rem; font-size: .875rem; color: var(--color-text); }

@media (min-width: 640px) {
    .sc-invite-header { flex-direction: row; align-items: center; justify-content: space-between; }
    .sc-invite-actions { flex-direction: row; width: auto; }
    .sc-invite-actions form,
    .sc-invite-actions a { width: auto; }
    .sc-invite-actions .btn { width: auto; }
}

/* Read-only value inside form-group on detail pages */
.detail-value {
    padding: .45rem 0;
    font-size: .9rem;
    color: var(--color-text);
}

.detail-value--pre { white-space: pre-line; }

/* Metadata value (dates, system fields) */
.detail-value--sub {
    padding: .25rem 0;
    font-size: .875rem;
    color: var(--color-text);
}

/* Muted form label for metadata sections */
.form-label--sub { color: #9ca3af; }

/* Form section with visible top separator (inside detail cards) */
.form-section--separator { border-top: 1px solid var(--color-border); }

/* Compact meta row (objects/detail) */
.detail-meta {
    display: flex;
    flex-wrap: wrap;
    gap: .25rem 2rem;
    align-items: baseline;
    padding: .75rem 1.25rem;
}

.detail-meta-item {
    display: flex;
    align-items: baseline;
    gap: .4rem;
}

.detail-meta-item--full {
    flex-basis: 100%;
    margin-top: .15rem;
}

.detail-meta-label {
    font-size: .7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: #9ca3af;
    flex-shrink: 0;
}

.detail-meta-value {
    font-size: .875rem;
    color: var(--color-text);
}

.detail-meta-item--uuid .detail-meta-label { color: #d1d5db; }
.detail-meta-item--uuid .detail-meta-value {
    font-size: .75rem;
    color: #d1d5db;
    font-family: monospace;
}

/* Account / org link dot button */
.acc-dot-btn {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 20px;
    padding: 0;
    font-family: inherit;
    line-height: 1;
    vertical-align: middle;
}
.acc-dot-btn:hover { opacity: .75; }
.data-table .acc-dot-btn { margin-left: .3rem; }
/* barva podle stavu: bez emailu = šedá, email bez loginu = oranžová, propojeno = zelená */
.acc-dot-btn--none     { color: #9ca3af; cursor: default; }
.acc-dot-btn--unlinked { color: #f97316; }
.acc-dot-btn--linked   { color: #16a34a; }
.acc-dot-btn .acc-dot-label { color: var(--color-muted); font-size: .82rem; font-weight: 400; margin-left: .25rem; }

.media-ms {
    font-size: .72rem;
    color: var(--color-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-top: .1rem;
}
.media-date {
    font-size: .68rem;
    color: var(--color-muted);
    margin-top: .2rem;
}

@media (max-width: 640px) {
    .media-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .65rem; }
}

/* ── Grid 60/40 pro formulář nového kontaktu ── */
.contact-form-grid {
    display: grid;
    grid-template-columns: 6fr 4fr;
    gap: 1.25rem;
    align-items: start;
    margin-bottom: 1.25rem;
}
@media (max-width: 720px) {
    .contact-form-grid { grid-template-columns: 1fr; }
}

/* ── Sdílený 2-sloupcový grid (detail identity, účastníci) ── */
.dir-detail-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem;
    align-items: start;
    margin-bottom: 1.25rem;
}
@media (max-width: 720px) {
    .dir-detail-grid { grid-template-columns: 1fr; }
}

/* ── Stavební deník — timeline ── */
/* ── Stavební deník — timeline ─────────────────────────────────────────── */

.diary-timeline {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    padding-left: 2rem;
}

.diary-timeline::before {
    content: '';
    position: absolute;
    left: .6875rem;
    top: .5rem;
    bottom: .5rem;
    width: 2px;
    background: var(--color-border);
}

.diary-entry {
    position: relative;
    display: flex;
    gap: 1rem;
    align-items: flex-start;
}

.diary-entry-dot {
    position: absolute;
    left: -1.5rem;
    top: .75rem;
    width: .875rem;
    height: .875rem;
    border-radius: 50%;
    border: 2px solid var(--color-white);
    box-shadow: 0 0 0 2px var(--color-border);
    background: #d1d5db;
    flex-shrink: 0;
    z-index: 1;
}
/* Sjednoceno na barevnou rodinu Gantt/MindMap (audit před 62.7b — Deník
   dřív měl vlastní paletu šedá/modrá/zelená místo modrá/oranžová/zelená,
   viz --status-* proměnné v :root výš). */
.diary-entry--planned     .diary-entry-dot { background: var(--status-planned-soft);     box-shadow: 0 0 0 2px var(--status-planned-ring); }
.diary-entry--in_progress .diary-entry-dot { background: var(--status-in-progress-soft); box-shadow: 0 0 0 2px var(--status-in-progress-ring); }
.diary-entry--done        .diary-entry-dot { background: var(--status-done-soft);        box-shadow: 0 0 0 2px var(--status-done-ring); }

.diary-entry-card {
    flex: 1;
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    overflow: hidden;
}

.diary-entry-head {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .4rem;
    padding: .55rem .875rem;
    background: var(--color-bg);
    border-bottom: 1px solid var(--color-border);
    font-size: .8rem;
}

.diary-entry-date   { font-weight: 700; color: var(--color-text); }
.diary-entry-sep    { color: #cbd5e1; }
.diary-entry-author { color: var(--color-muted); }

.diary-entry-weather {
    font-size: .72rem;
    padding: .1rem .45rem;
    border-radius: 99px;
    background: #e0f2fe;
    color: #0369a1;
    border: 1px solid #bae6fd;
}

.diary-ms-status {
    margin-left: auto;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    padding: .1rem .5rem;
    border-radius: 99px;
}
/* Sjednoceno na barevnou rodinu Gantt/MindMap (audit před 62.7b — Deník
   dřív měl vlastní paletu šedá/modrá/zelená místo modrá/oranžová/zelená,
   viz --status-* proměnné v :root výš). */
.diary-ms-status--planned     { background: var(--status-planned-bg);     color: var(--status-planned-text);     border: 1px solid var(--status-planned-ring); }
.diary-ms-status--in_progress { background: var(--status-in-progress-bg); color: var(--status-in-progress-text); border: 1px solid var(--status-in-progress-ring); }
.diary-ms-status--done        { background: var(--status-done-bg);       color: var(--status-done-text);       border: 1px solid var(--status-done-ring); }

.diary-entry-title {
    margin: 0;
    padding: .65rem .875rem .25rem;
    font-size: .9375rem;
    font-weight: 700;
    color: var(--color-text);
}

.diary-entry-desc {
    padding: 0 .875rem .65rem;
    font-size: .875rem;
    line-height: 1.6;
    color: var(--color-text);
}

.diary-entry-meta {
    display: flex;
    flex-direction: column;
    gap: .3rem;
    padding: 0 .875rem .65rem;
    border-top: 1px solid var(--color-border);
    padding-top: .5rem;
    margin-top: -.1rem;
}

.diary-meta-item {
    display: flex;
    gap: .5rem;
    font-size: .8rem;
    align-items: baseline;
}

.diary-meta-label {
    font-weight: 700;
    font-size: .7rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--color-muted);
    white-space: nowrap;
    flex-shrink: 0;
    min-width: 6rem;
}

.diary-meta-value {
    color: var(--color-text);
    line-height: 1.45;
}

.diary-entry-photos {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    padding: .5rem .875rem .75rem;
    border-top: 1px solid var(--color-border);
}

/* Verdikt 58 krok 58.2 — "Fotky vybrané do deníku" sekce, odlišná od holé
   galerie milníku výš (.diary-entry-photos beze změny). */
.diary-entry-selected-photos {
    padding: .5rem .875rem .75rem;
    border-top: 1px solid var(--color-border);
}
.diary-selected-photos-title {
    font-weight: 700;
    font-size: .7rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--color-muted);
    margin-bottom: .4rem;
}
.diary-selected-photos-empty {
    font-size: .8rem;
    color: var(--color-muted);
    margin: 0;
}
.diary-entry-selected-photos .diary-entry-photos {
    padding: 0;
    border-top: none;
}

/* Verdikt 58 krok 58.4.2 — editovatelný denní blok (title/summary/weather/
   note), vnořený uvnitř karty milníku i samostatně (dny bez milníku). */
.cd-create-day {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-bottom: 1rem;
}

.cd-day-block {
    border-top: 1px solid var(--color-border);
    padding: .65rem .875rem;
}
.cd-day-block:first-child {
    border-top: none;
}

.cd-standalone-days > .cd-day-block {
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    margin-bottom: .75rem;
}
.cd-standalone-days > .cd-day-block:first-child {
    border-top: 1px solid var(--color-border);
}

.cd-day-head {
    font-weight: 700;
    font-size: .8rem;
    color: var(--color-text);
    margin-bottom: .4rem;
}

.cd-day-fields {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .5rem .75rem;
    margin-bottom: .5rem;
}
.cd-day-field--wide { grid-column: 1 / -1; }
.cd-day-field label {
    display: block;
    font-weight: 700;
    font-size: .7rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--color-muted);
    margin-bottom: .2rem;
}
.cd-day-fields--readonly {
    display: flex;
    flex-direction: column;
    gap: .3rem;
}

.cd-day-save-row {
    display: flex;
    align-items: center;
    gap: .6rem;
    margin-bottom: .5rem;
}
.cd-day-saved-badge { color: #15803d; font-size: .8rem; font-weight: 600; }
.cd-day-error       { color: #dc2626; font-size: .8rem; }

/* ── Zakázkový strom (orders/{id}/tree) — "flow" vizuál (SVG bezier hrany) ── */
.otree {
    position: relative;
    overflow-x: auto;
}

.otree-svg {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
    pointer-events: none;
    overflow: visible;
}

.otree-rows {
    position: relative;
    z-index: 1;
}

.otree-row {
    margin-left: calc(var(--depth, 0) * 2.5rem);
    margin-bottom: 1.25rem;
}
.otree-row:last-child { margin-bottom: 0; }

.otree-card {
    position: relative;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .5rem 1rem;
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-left: 4px solid var(--color-border);
    border-radius: 12px;
    box-shadow: var(--shadow);
    padding: .75rem 1.1rem;
}

.otree-card--rel-gd   { border-left-color: #2563eb; }
.otree-card--rel-hd   { border-left-color: #7c3aed; }
.otree-card--rel-subd { border-left-color: #9ca3af; }

.otree-card--current {
    border-color: var(--color-primary);
    border-left-color: #2563eb;
    box-shadow: 0 0 0 1px var(--color-primary), var(--shadow);
}

/* ── MindMap (pages/orders/mindmap.php, tab=mindmap na detailu zakázky) ──
   Layout (x/y pozice, elbow spojnice) se počítá ve vanilla JS přímo na
   stránce — tady jen vizuál. Viditelnostní pruh (levý border) stejný vzor
   jako .otree-card--rel-* výš (border-left barevný akcent, zbytek hairline). */
.mindmap-canvas-wrap {
    overflow: auto;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-bg);
    max-height: 70vh;
}

.mindmap-canvas {
    position: relative;
}

.mindmap-edges {
    position: absolute;
    top: 0;
    left: 0;
    pointer-events: none;
}
.mindmap-edges path {
    fill: none;
    stroke: var(--color-border);
    stroke-width: 1.5;
}

.mindmap-nodes {
    position: absolute;
    top: 0;
    left: 0;
}

.mindmap-node {
    position: absolute;
    background: var(--color-white);
    border: 0.5px solid var(--color-border);
    border-left: 4px solid var(--color-muted);
    border-radius: 8px;
    padding: 8px 12px;
    min-width: 180px;
    cursor: pointer;
    box-shadow: var(--shadow);
}
.mindmap-node:hover { border-color: var(--color-primary); }

.mindmap-node--scope-internal              { border-left-color: var(--color-muted); }
.mindmap-node--scope-subcontractor_visible { border-left-color: #7c3aed; }
.mindmap-node--scope-project_visible       { border-left-color: var(--color-primary); }
.mindmap-node--scope-client_visible        { border-left-color: var(--color-success); }

.mindmap-node--done { background: var(--status-done-bg); }

.mindmap-node-title {
    font-size: 14px;
    color: var(--color-text);
    line-height: 1.35;
}

/* Pravý okraj uzlu — sbalovací tlačítko (jen když má děti) + kulaté "+"
   pro založení dítěte (VŽDY, i bez dětí) — společný obal, ať jde snadno
   naskládat vedle sebe (zadání bod 2: "vedle stávajícího collapse
   tlačítka"). Obal sám mimo tok (position:absolute), takže nezvětšuje
   .mindmap-node offsetWidth/Height (na to se spoléhá měření spojnic v JS). */
.mindmap-node-actions {
    position: absolute;
    top: 50%;
    right: -10px;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    gap: 4px;
    z-index: 2;
}

.mindmap-collapse-btn,
.mindmap-add-child-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    padding: 0;
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: 999px;
    box-shadow: var(--shadow);
    color: var(--color-muted);
    cursor: pointer;
}
.mindmap-collapse-btn:hover,
.mindmap-add-child-btn:hover { color: var(--color-text); border-color: var(--color-primary); }
.mindmap-collapse-btn svg { transition: transform .15s; }
.mindmap-collapse-btn.is-collapsed svg { transform: rotate(180deg); }

/* Pod uzlem — malé čtvercové "+" pro založení sourozence (zadání bod 3),
   jen na hover, ať mapa není přeplácaná. */
.mindmap-add-sibling-btn {
    position: absolute;
    left: 50%;
    bottom: -9px;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    padding: 0;
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: 3px;
    box-shadow: var(--shadow);
    color: var(--color-muted);
    cursor: pointer;
    opacity: 0;
    pointer-events: none;
    transition: opacity .1s;
    z-index: 2;
}
.mindmap-node:hover .mindmap-add-sibling-btn {
    opacity: 1;
    pointer-events: auto;
}
.mindmap-add-sibling-btn:hover { color: var(--color-text); border-color: var(--color-primary); }

/* Křížek (smazání) — žije UVNITŘ .mindmap-node-actions (zadání bod 2, "do
   skupiny akcí vpravo"), stejné rozměry jako .mindmap-add-child-btn vedle
   něj, ale hover-only stejnou technikou jako .mindmap-add-sibling-btn výš
   (jen tenhle jeden prvek ve skupině, kolegové v .mindmap-node-actions
   zůstávají vždy vidět). JS ho vykreslí jen pro uzly bez dětí — kdo má
   děti, tohle tlačítko vůbec nedostane do DOM (zadání bod 3). */
.mindmap-delete-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    padding: 0;
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: 999px;
    box-shadow: var(--shadow);
    color: var(--color-muted);
    cursor: pointer;
    opacity: 0;
    pointer-events: none;
    transition: opacity .1s;
}
.mindmap-node:hover .mindmap-delete-btn {
    opacity: 1;
    pointer-events: auto;
}
.mindmap-delete-btn:hover {
    border-color: var(--color-danger);
    color: var(--color-danger);
    background: #fef2f2;
}

/* Inline vstup pro nový uzel — stejná souřadná soustava jako .mindmap-node
   (absolutní pozice v #mindmap-canvas), otevírá ho add-child/add-sibling
   tlačítko (mindmapShowInlineInput). */
.mindmap-inline-input {
    position: absolute;
    z-index: 3;
    background: var(--color-white);
    border: 1px solid var(--color-primary);
    border-radius: 8px;
    box-shadow: var(--shadow);
    padding: 4px;
}
.mindmap-inline-input-field {
    display: block;
    width: 180px;
    padding: 6px 8px;
    font-size: 13px;
    font-family: inherit;
    color: var(--color-text);
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: 4px;
}
.mindmap-inline-input-field:focus {
    outline: none;
    border-color: var(--color-primary);
}

.otree-card--placeholder {
    background: var(--color-bg);
    border-style: dashed;
    border-left-style: dashed;
    color: var(--color-muted);
    font-size: .8rem;
    box-shadow: none;
    display: block;
}

.otree-card-main {
    display: flex;
    flex-direction: column;
    min-width: 0;
    margin-right: auto;
}

.otree-card-name {
    font-weight: 600;
    font-size: .9rem;
    color: var(--color-text);
}

/* Druhý (podtitulkový) řádek bubliny — libovolný počet položek oddělených
   "·" (název zakázky, termín, případně další jako stav/cena později).
   Oddělovač je skutečný <span class="otree-card-meta-sep"> vypsaný v PHP
   mezi položkami (ne CSS ::before na + sourozenci — to se nezobrazovalo
   spolehlivě). */
.otree-card-meta-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    font-size: .78rem;
    color: var(--color-muted);
}

.otree-card-meta-item {
    white-space: nowrap;
}

.otree-card-meta-sep {
    color: var(--color-muted);
    margin: 0 6px;
}

.otree-card-side {
    display: flex;
    align-items: center;
    gap: .4rem;
    flex-wrap: wrap;
}

.otree-flag {
    font-size: .7rem;
    font-weight: 700;
    color: var(--color-primary);
    text-transform: uppercase;
    letter-spacing: .04em;
}

/* relation_type badge — GD/HD/SubD, odvozeno z pozice ve stromu (viz tree.php) */
.otree-relation {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.2rem;
    padding: .2rem .45rem;
    border-radius: 4px;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .02em;
    flex-shrink: 0;
}
.otree-relation--gd   { background: #eff6ff; color: #2563eb; }
.otree-relation--hd   { background: #f5f3ff; color: #7c3aed; }
.otree-relation--subd { background: var(--color-bg); color: var(--color-muted); border: 1px solid var(--color-border); }

/* Hranová karta — cena/přílohy/odkaz patří k hraně, ale do úzké svislé mezery
   mezi bublinami se nevejde spolehlivě (viz předchozí pokusy s pozicováním
   na bezier křivku). Místo toho je to malý "spojovací uzel" na hranici mezi
   bublinami — vodorovně na středu šířky bubliny DÍTĚTE té hrany, svisle přímo
   na hranici mezi rodičem a dítětem (překrývá spodní hranu rodiče i horní
   hranu dítěte). top: -10px = polovina .otree-row margin-bottom (1.25rem/2),
   tedy střed mezery mezi řádky; transform dovystřeďuje kartu na tuhle
   hranici (půl nahoře, půl dole) i vodorovně na střed. Čistě CSS
   (position:absolute vůči .otree-card, které je position:relative), žádné
   JS měření. */
.otree-edge-card {
    position: absolute;
    top: -10px;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 3;
    display: flex;
    align-items: center;
    gap: .35rem;
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: 999px;
    box-shadow: var(--shadow);
    padding: .35rem .65rem;
    font-size: .95rem;
    color: var(--color-text);
    white-space: nowrap;
    text-decoration: none;
    transition: box-shadow .15s;
    /* Pojistka: žádný vnořený obsah (ikony) nesmí vizuálně přetéct mimo
       zaoblenou pilulku, ať už by ho jakkoliv chybně naškáloval prohlížeč. */
    overflow: hidden;
}
.otree-edge-card:hover {
    box-shadow: 0 4px 14px rgba(0,0,0,.12);
    text-decoration: none;
    color: var(--color-text);
}

.otree-edge-price {
    font-weight: 700;
    color: var(--color-text);
}

.otree-edge-att {
    display: inline-flex;
    align-items: center;
    gap: .15rem;
    color: var(--color-muted);
    font-weight: 600;
}

.otree-edge-icon {
    width: 15px;
    height: 15px;
    flex-shrink: 0;
    /* Pojistka navíc k explicitnímu width/height v tree.php — kdyby se z
       jakéhokoliv důvodu vykreslilo víc, než 15×15, ořízne se to tady. */
    overflow: hidden;
}

.otree-edge-link-icon {
    width: 13px;
    height: 13px;
    flex-shrink: 0;
    color: var(--color-primary);
}

/* Health badge hrany (get_subcontract_link_edge_status) — malá barevná
   pilulka s tečkou. 4 stavy podle závažnosti (on_track < at_risk < delayed
   < blocked), barvy odděleně od .badge (ta se používá pro status/tree_status
   hrany jinde v kartě uzlu, ne v týhle pilulce). */
.otree-edge-health {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: .15rem .5rem;
    border-radius: 999px;
    font-size: .68rem;
    font-weight: 700;
    white-space: nowrap;
}

.otree-edge-health-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    flex-shrink: 0;
}

.otree-edge-health--on-track { background: #ecfdf5; color: #059669; }
.otree-edge-health--on-track .otree-edge-health-dot { background: #10b981; }

.otree-edge-health--at-risk { background: #fffbeb; color: #b45309; }
.otree-edge-health--at-risk .otree-edge-health-dot { background: #f59e0b; }

.otree-edge-health--delayed { background: #fef2f2; color: #dc2626; }
.otree-edge-health--delayed .otree-edge-health-dot { background: #ef4444; }

.otree-edge-health--blocked { background: #f3f4f6; color: #374151; }
.otree-edge-health--blocked .otree-edge-health-dot { background: #4b5563; }

.otree-edge-deadline {
    font-size: .72rem;
    color: var(--color-muted);
    white-space: nowrap;
}

.otree-edge-shift {
    display: inline-flex;
    align-items: center;
    padding: .15rem .45rem;
    border-radius: 999px;
    background: var(--color-bg);
    color: var(--color-muted);
    border: 1px solid var(--color-border);
    font-size: .65rem;
    font-weight: 600;
    white-space: nowrap;
}

@media (max-width: 640px) {
    .otree-row { margin-left: calc(var(--depth, 0) * 1.15rem); margin-bottom: 1rem; }
    .otree-card { padding: .6rem .75rem; gap: .35rem .6rem; border-radius: 10px; }
    .otree-card-name { font-size: .85rem; }

    .otree-edge-card {
        /* mobilní .otree-row margin-bottom je 1rem → střed mezery = -8px */
        top: -8px;
        gap: .28rem;
        padding: .3rem .55rem;
        font-size: .85rem;
    }

    /* Textový label health badge zabírá na mobilu moc místa vedle ceny/ikon
       — tečka + title tooltip zůstávají, plný text se schová (ne odstraní,
       jen visuálně skrytý, ať zůstane přístupný přes title atribut na rodiči). */
    .otree-edge-health-label { display: none; }
    .otree-edge-health { padding: .15rem .35rem; }
    .otree-edge-deadline { font-size: .68rem; }
    .otree-edge-shift { font-size: .6rem; padding: .12rem .35rem; }
}

/* ── Přílohy předávací karty (subcontracts/detail.php) ── */
.attachment-fixed-row,
.attachment-custom-row {
    display: flex;
    align-items: center;
    gap: .75rem;
    flex-wrap: wrap;
    margin-bottom: .85rem;
}

.attachment-fixed-row label {
    display: flex;
    align-items: center;
    gap: .4rem;
    font-size: .875rem;
    font-weight: 500;
    color: var(--color-text);
    min-width: 130px;
}

.attachment-fixed-row input[type="file"],
.attachment-custom-row input[type="file"] {
    font-size: .82rem;
    color: var(--color-muted);
}

.attachment-fixed-row input[type="file"]:disabled,
.attachment-custom-row input[type="file"]:disabled {
    opacity: .4;
    cursor: not-allowed;
}

.attachment-custom-row .form-input {
    max-width: 260px;
    padding: .45rem .7rem;
}

@media (max-width: 640px) {
    .attachment-fixed-row,
    .attachment-custom-row { flex-direction: column; align-items: flex-start; gap: .4rem; }
    .attachment-custom-row .form-input { max-width: 100%; width: 100%; }
}

/* ── Tmavá hlavička se záložkami (.page-header--dark) ─────────────────────
   Modifikátor, NE přepis .page-header — ostatní stránky beze změny. */
.page-header--dark {
    background: #0e2038;
    border-bottom: none;
    box-shadow: none;
    padding-bottom: 0;
    align-items: flex-end;
}
.page-header--dark .page-title { color: #fff; }
.page-header--dark .page-sub   { color: rgba(240,240,240,.55); }

/* hlavička má flex-end, ale nadpis potřebuje odsadit od spodní hrany */
.page-header--dark .page-head-left { padding-bottom: 1.1rem; }

/* záložky přisáté ke spodní hraně — aktivní vypadá jako list
   vytažený dopředu. .page-tabs je taky starší sdílená komponenta
   (nav lišta, pages/orders/detail.php, ř. 1030-1039) — bílý pruh/
   padding/border-bottom/overflow tam patří, tady se zneutralizuje. */
.page-header--dark .page-tabs {
    display: flex;
    align-items: flex-end;
    gap: .25rem;
    background: transparent;
    border-bottom: none;
    padding: 0;
    overflow-x: visible;
}
/* .page-tab sdílí název se starší .page-tab (ř. 1053-1072, stejná nav
   lišta) — background/color se nastavují přímo tady, prefix
   .page-header--dark už specificitu řeší sám, žádná vyšší specificita
   navíc není potřeba. */
.page-header--dark .page-tab {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .6rem 1.1rem;
    border-radius: 8px 8px 0 0;
    font-size: .875rem;
    font-weight: 500;
    background: transparent;
    color: rgba(240,240,240,.72);
    text-decoration: none;
    white-space: nowrap;
    transition: color .13s, background .13s;
}
.page-header--dark .page-tab:hover {
    color: #fff;
    background: rgba(255,255,255,.08);
    text-decoration: none;
}
.page-header--dark .page-tab.active {
    background: var(--color-bg);
    color: var(--color-text);
    font-weight: 600;
}
.page-header--dark .page-tab.active:hover { background: var(--color-bg); }

/* počítadlo v záložce */
.page-header--dark .page-tab-count {
    font-size: .68rem;
    padding: .05rem .42rem;
    border-radius: 999px;
    background: rgba(255,255,255,.12);
    color: rgba(240,240,240,.8);
    font-weight: 500;
}
.page-header--dark .page-tab.active .page-tab-count {
    background: color-mix(in srgb, var(--color-accent) 15%, #fff);
    color: var(--color-accent-ink);
}

/* primární akce v tmavé hlavičce — modrá by v navy zapadla. Text tmavý
   (--color-accent-ink): bílá na žlutém akcentu je nečitelná (~1.8:1). */
.page-header--dark .btn-primary { background: var(--color-accent); color: var(--color-accent-ink); }
.page-header--dark .btn-primary:hover { background: var(--color-accent-h); color: var(--color-accent-ink); }

/* rezerva na zvonek (position:fixed, top/right 1rem) */
.page-header--dark .page-head-right { padding-bottom: 1.1rem; margin-right: 3.5rem; }

@media (max-width: 640px) {
    .page-header--dark .page-tabs { flex-wrap: wrap; }
    .page-header--dark { padding-left: 1rem; padding-right: 1rem; }
}

/* Práce › přepínač období: Týden / Měsíc jako rozbalovací nabídka délky
   (pages/time/prehled.php, <details> — ťuknutí, ne hover). */
.wp-period-views { display: flex; flex-wrap: wrap; gap: .3rem; margin-left: .5rem; }
.wp-span { position: relative; }
.wp-span > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: .35rem; user-select: none; }
.wp-span > summary::-webkit-details-marker { display: none; }
.wp-span-caret { font-size: .7em; opacity: .8; transition: transform .15s; }
.wp-span[open] .wp-span-caret { transform: rotate(180deg); }
.wp-span-menu {
    position: absolute; top: calc(100% + .35rem); left: 0; z-index: 60;
    min-width: 10rem; padding: .3rem;
    background: #fff; border: 1px solid var(--color-border); border-radius: 8px;
    box-shadow: 0 10px 28px rgba(14,32,56,.18);
    display: flex; flex-direction: column;
}
.wp-span-menu a {
    display: flex; align-items: center; min-height: 40px; padding: 0 .75rem;
    border-radius: 6px; color: var(--color-text); font-size: .875rem;
    text-decoration: none; white-space: nowrap;
}
.wp-span-menu a:hover, .wp-span-menu a:focus-visible { background: var(--color-bg); text-decoration: none; }
.wp-span-menu a[aria-current="true"] { font-weight: 600; }
.wp-span-menu a[aria-current="true"]::after { content: "✓"; margin-left: auto; padding-left: 1rem; }
@media (max-width: 640px) {
    .wp-period-views { margin-left: 0; width: 100%; }
    .wp-span > summary { min-height: 40px; }
    .wp-span-menu a { min-height: 44px; font-size: .95rem; }
}
@media (prefers-reduced-motion: reduce) { .wp-span-caret { transition: none; } }

/* sekundární tlačítka (šipky, Týden/Měsíc) v tmavé hlavičce — btn-secondary
   je navržené pro světlé pozadí, na navy by bylo nečitelné */
.page-header--dark .btn-secondary {
    background: rgba(255,255,255,.08);
    border-color: rgba(255,255,255,.18);
    color: rgba(240,240,240,.9);
}
.page-header--dark .btn-secondary:hover {
    background: rgba(255,255,255,.14);
    border-color: rgba(255,255,255,.3);
}

/* text období (např. "31. 8. – 6. 9. 2026") vedle šipek/Týden/Měsíc —
   holý <span> bez třídy, jinak by zdědil tmavou .page-title/.page-sub
   barvu a na navy pozadí zmizel */
.page-header--dark .page-tabs ~ div span { color: rgba(240,240,240,.9); }

/* Stará .page-tab (ř. 1061-1071) přidává border-bottom a v aktivním
   stavu modrý border-bottom-color, který by se v tmavé hlavičce tloukl
   s oranžovým box-shadow. */
.page-header--dark .page-tab {
    border-bottom: none;
    margin-bottom: 0;
}
.page-header--dark .page-tab.active {
    border-bottom-color: transparent;
}

.section-title-alt {
    font-weight: 400;
    color: var(--color-muted);
}

.prg-wrap { max-width:820px; }

.prg-head { padding:.9rem 0 1.1rem; border-bottom:1px solid var(--color-border);
            margin-bottom:.6rem; }
.prg-head-top { display:flex; justify-content:space-between; align-items:baseline;
                margin-bottom:.5rem; }
.prg-head-name { font-size:1rem; font-weight:600; }
.prg-head-val { font-size:1.4rem; font-weight:700;
                font-variant-numeric:tabular-nums; }

.prg-row { display:grid; grid-template-columns:minmax(0,1fr) 200px 52px;
           align-items:center; gap:1rem; padding:.15rem 0; }
.prg-row:hover { background:#f8fafc; }
.prg-name { font-size:.85rem; overflow:hidden; text-overflow:ellipsis;
            white-space:nowrap; }
.prg-val { text-align:right; font-size:.78rem;
           font-variant-numeric:tabular-nums; color:var(--color-muted); }

.prg-bar { height:10px; background:#eef2f7; border-radius:5px; overflow:hidden; }
.prg-bar--lg { height:16px; border-radius:8px; }
.prg-bar i { display:block; height:100%; border-radius:inherit;
             background:var(--color-primary); }

.is-done .prg-bar i, .prg-head.is-done .prg-bar i { background:#16a34a; }
.is-done .prg-val { color:#16a34a; }
.prg-head.is-done .prg-head-val { color:#16a34a; }
.is-zero .prg-val { color:#cbd5e1; }
.is-derived .prg-name { font-weight:600; }
.is-derived .prg-bar i { opacity:.55; }

.card-prg-val { margin-top:.6rem; text-align:right; font-size:.72rem;
                color:var(--color-muted); font-variant-numeric:tabular-nums;
                line-height:1; }
.card-prg { margin-top:.25rem; height:4px; background:var(--color-border);
            border-radius:2px; overflow:hidden; }
.card-prg i { display:block; height:100%; background:var(--color-primary); }

.dash-stats { display:flex; gap:1.1rem; align-items:baseline;
              flex-wrap:wrap; font-size:.72rem; color:var(--color-muted);
              text-transform:none; }
.dash-stat b { font-size:.95rem; font-weight:700; margin-right:.3rem;
               color:var(--color-text); font-variant-numeric:tabular-nums; }
.dash-stat--new b  { color: var(--color-primary); }
.dash-stat--run b  { color: var(--color-warning); }
.dash-stat--done b { color: var(--color-success); }

.card-prg-link { display:block; text-decoration:none; }
.card-prg-link:hover .card-prg i { filter:brightness(1.15); }
.card-prg-link:hover .card-prg-val { color:var(--color-primary); }

/* ── Uzávěrka — štítek "Uzavřeno" (finální stav, neutrální tmavě modrá,
   záměrně ne zelená jako "Připraveno" / .badge--done) ── */
.badge--closed { background: #e0e7ff; color: #1e3a8a; }
/* Obecný informační štítek (filtr v todo, 'locked' v Přehledu docházky,
   typ identity v adresáři) — stejná světle modrá paleta. */
.badge--info   { background: #e0e7ff; color: #1e3a8a; }
/* Převzato z lokálních definic v pages/directory/* (jedno místo). */
.badge--success { background: #dcfce7; color: #166534; }
.badge--warning { background: #fef9c3; color: #854d0e; }
.badge--muted   { background: #f3f4f6; color: #6b7280; }

/* ── SweetAlert2 — barvy tlačítek aplikace na JEDNOM místě ──
   Swal si své CSS vkládá do <head> až za app.css, proto vyšší specificita
   (.swal2-popup …) místo !important. Nepoužívat confirmButtonColor
   u jednotlivých volání — destruktivní akce (Smazat, Odebrat, Ukončit)
   dostanou customClass: { confirmButton: 'swal-btn-danger' }. */
.swal2-popup .swal2-styled.swal2-confirm {
    background: var(--color-primary);
    background-image: none;
    color: #fff;
    border: 1px solid var(--color-primary);
    border-radius: var(--radius);
}
.swal2-popup .swal2-styled.swal2-confirm:hover { background: var(--color-primary-h); border-color: var(--color-primary-h); }
.swal2-popup .swal2-styled.swal2-confirm.swal-btn-danger { background: var(--color-danger); border-color: var(--color-danger); }
.swal2-popup .swal2-styled.swal2-confirm.swal-btn-danger:hover { background: #b91c1c; border-color: #b91c1c; }
.swal2-popup .swal2-styled.swal2-cancel {
    background: var(--color-white);
    background-image: none;
    color: var(--color-text);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
}
.swal2-popup .swal2-styled.swal2-cancel:hover { background: var(--color-bg); border-color: #9ca3af; }
.swal2-popup .swal2-styled:focus,
.swal2-popup .swal2-styled:focus-visible { box-shadow: 0 0 0 3px rgba(37,99,235,.3); }
.swal2-popup .swal2-styled.swal-btn-danger:focus,
.swal2-popup .swal2-styled.swal-btn-danger:focus-visible { box-shadow: 0 0 0 3px rgba(220,38,38,.3); }
/* Textarea v dialozích: prohlížeč jí dává monospace → písmo aplikace */
.swal2-popup .swal2-textarea { font-family: inherit; }

/* Dialog „Upravit zápis“ (modal dne deníku, detail.php) — textarea a fotky
   nad tlačítky Uložit/Zrušit. */
.swal2-popup .cd-edit-text { width: 100%; margin: .5rem 0 0; box-sizing: border-box; font-size: .95rem; line-height: 1.45; }
.cd-edit-photos { display: flex; flex-direction: column; align-items: flex-start; gap: .6rem; margin-top: .9rem; text-align: left; }
.cd-edit-photos-grid { display: flex; flex-wrap: wrap; gap: .4rem; }
.cd-edit-photos-grid:empty { display: none; }
.cd-edit-photo { display: block; width: 64px; height: 64px; object-fit: cover; border-radius: 6px; border: 1px solid var(--color-border); }
.cd-edit-photo-new { position: relative; display: inline-block; }
.cd-edit-photo-remove {
    position: absolute; top: -6px; right: -6px;
    width: 22px; height: 22px; border-radius: 999px;
    border: 1px solid var(--color-border); background: var(--color-white); color: var(--color-danger);
    font-size: 15px; line-height: 1; cursor: pointer; padding: 0;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 1px 3px rgba(0,0,0,.15);
}
.cd-edit-add-photos { display: inline-flex; align-items: center; gap: .4rem; cursor: pointer; margin: 0; }
/* 26. 10. — mazání stávající fotky: dialog Upravit zápis (.cd-edit-photo-del,
   označí ke smazání) a karta zápisu v modalu dne (.cd-thumb-del, smaže hned).
   Vždy viditelné (žádný hover), min. 32×32, vpravo nahoře — štítek Před/Po
   je vlevo nahoře, klik na náhled (lightbox) zůstává na obrázku. */
.cd-edit-photo-del,
.cd-thumb-del {
    position: absolute; top: 2px; right: 2px;
    min-width: 32px; height: 32px; padding: 0 6px; border-radius: 999px;
    border: 2px solid var(--color-white); background: rgba(17,24,39,.78); color: var(--color-white);
    font-size: 18px; line-height: 1; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 1px 3px rgba(0,0,0,.25);
}
.cd-edit-photo--marked .cd-edit-photo { opacity: .35; filter: grayscale(1); }
.cd-edit-photo--marked .cd-edit-photo-del { font-size: 11px; font-weight: 600; background: var(--color-white); color: var(--color-text, #111827); border-color: var(--color-border); }
.cd-thumb-del-wrap { position: relative; display: inline-block; vertical-align: top; }
/* 26. 10. — desktop (myš): křížek menší a decentní, plně vidět na hover /
   fokus náhledu. Mobil beze změny (32×32, vždy vidět). „Vrátit“ u označené
   fotky zůstává plně viditelné. */
@media (min-width: 768px) {
    .cd-edit-photo-del,
    .cd-thumb-del {
        min-width: 24px; height: 24px; padding: 0 4px; font-size: 15px; border-width: 1px;
        opacity: .55; transition: opacity .15s;
    }
    .cd-edit-photo-new:hover .cd-edit-photo-del,
    .cd-edit-photo-new:focus-within .cd-edit-photo-del,
    .cd-thumb-del-wrap:hover .cd-thumb-del,
    .cd-thumb-del-wrap:focus-within .cd-thumb-del,
    .cd-edit-photo--marked .cd-edit-photo-del { opacity: 1; }
    .cd-edit-photo--marked .cd-edit-photo-del { font-size: 11px; }
}