/* =============================================================================
   style.css — To-Do s AI koučem
   Design: "Clinical Kineticism" — medical-tech editorial, Space Grotesk + Inter
   ============================================================================= */

/* Fonty jsou načítány přes <link> v index.html (neblokující), @import odstraněn */

/* --- CSS proměnné ---------------------------------------------------------- */
:root {
    /* Primární paleta — Clinical Blue */
    --primary:                  #006685;
    --on-primary:               #ffffff;
    --primary-container:        #8AD8FD;
    --on-primary-container:     #005F7B;
    --accent-glow:              #A6D6E5;

    /* Povrchy — vrstvení jako laboratorní sklo (pozadí čistě bílé) */
    --surface:                  #FFFFFF;
    --surface-container-lowest: #FFFFFF;
    --surface-container-low:    #F2F4F5;
    --surface-container:        #ECEEEF;
    --surface-container-high:   #E6E8E9;
    --surface-container-highest:#E1E3E4;

    /* Text */
    --on-surface:               #191C1D;
    --on-surface-variant:       #40484B;
    --outline:                  #71787B;
    --outline-variant:          #C0C8CB;

    /* Sémantické */
    --error:                    #BA1A1A;
    --error-container:          #FFDAD6;
    --secondary:                #356572;
    --secondary-container:      #B7E7F7;
    --tertiary:                 #7F5533;
    --success:                  #2E8B4F;   /* "Hotovo" — paleta zelenou nemá, harmonizovaná zeleň */

    /* Akční barva — „vytvořit/přidělit" (NE modrá primární); token --action */
    --action:                   #C2410C;
    --on-action:                #FFFFFF;
    --action-hover:             #9A3412;

    /* Aliasy pro zpětnou kompatibilitu */
    --accent:        var(--primary);
    --accent-dark:   var(--on-primary-container);
    --bg:            var(--surface);
    --bg-card:       var(--surface-container-lowest);
    --bg-alt:        var(--surface-container-low);
    --bg-hover:      var(--surface-container-low);
    --text:          var(--on-surface);
    --text-muted:    var(--on-surface-variant);
    --text-light:    var(--outline);
    --border:        rgba(192, 200, 203, 0.25);
    --border-focus:  var(--primary);
    --done-bg:       var(--surface-container-low);
    --done-text:     var(--outline);
    --high:          var(--error);
    --mid:           #D4880A;
    --low:           var(--secondary);
    --overdue:       var(--error);
    --bg-page:       var(--surface);
    --text-secondary: var(--on-surface-variant);

    /* Typy úkolů — nezávislé na prioritě (Varianta A: stávající paleta) */
    --task-tint-assigned: var(--surface-container-low); /* PŮVOD: přiřazený manažerem = jemný šedý nádech (o stupínek tmavší, čitelné i bez ikony) */
    --task-project:       var(--primary);               /* PROJEKT: chip + pravý okraj + obálka */

    /* Fonty — Space Grotesk (headlines/labels) + Inter (body) */
    --font-display:  'Space Grotesk', system-ui, sans-serif;
    --font-body:     'Inter', system-ui, sans-serif;
    --font-mono:     'Space Grotesk', system-ui, sans-serif;

    /* Typografická škála — beze změny */
    --fs-2xs:  0.6875rem;
    --fs-xs:   0.75rem;
    --fs-sm:   0.8125rem;
    --fs-base: 0.875rem;
    --fs-md:   0.9375rem;
    --fs-lg:   1rem;
    --fs-xl:   1.125rem;
    --fs-2xl:  1.375rem;
    --fs-3xl:  1.5rem;
    --fs-4xl:  2rem;
    --fs-5xl:  3rem;

    --radius:        2px;
    --radius-lg:     6px;
    --radius-xl:     8px;
    --transition:    150ms ease;

    /* Statické karty: na bílém pozadí drží hierarchii jemný hairline okraj (přes box-shadow ring) */
    --shadow:        0 0 0 1px rgba(192, 200, 203, 0.55);
    /* Floating prvky (banner kouče, modaly, dropdowny): skutečná elevace stínem */
    --shadow-float:  0px 8px 32px rgba(25, 28, 29, 0.08);

    /* Šířkové tiery — vázané na typ obsahu (jediný zdroj pravdy) */
    --max-width:      640px;   /* narrow — jednoduchý lineární seznam úkolů na "/" */
    --max-width-wide: 960px;   /* wide   — strukturovaný obsah: Tým, report */
    --max-width-data: 1280px;  /* data   — husté tabulky: Overview, DSÚ view */
    --padding-x:     24px;
}

/* --- Dark mode — Clinical Kineticism --------------------------------------- */
html.dark {
    --primary:                  #82D0F4;
    --on-primary:               #003547;
    --primary-container:        #004D65;
    --on-primary-container:     #BEE9FF;
    --accent-glow:              #82D0F4;

    --surface:                  #000000;
    --surface-container-lowest: #0C0F10;
    --surface-container-low:    #191C1D;
    --surface-container:        #1D2021;
    --surface-container-high:   #272B2C;
    --surface-container-highest:#323638;

    --on-surface:               #E2E2E6;
    --on-surface-variant:       #C2C8CB;
    --outline:                  #8C9296;
    --outline-variant:          #40484B;

    --error:                    #FFB4AB;
    --error-container:          #93000A;
    --secondary:                #9ECEDD;
    --secondary-container:      #1A4D59;
    --success:                  #8FD99A;   /* "Hotovo" — světlejší zeleň pro tmavé pozadí */

    /* Akční barva — světlejší odstín pro tmavý povrch (vzor: dark = světlá barva + tmavý text) */
    --action:                   #FB923C;
    --on-action:                #2A1505;
    --action-hover:             #FDBA74;

    --border:        rgba(64, 72, 75, 0.4);
    --border-focus:  var(--primary);
    /* Hairline okraj statických karet — tmavý ekvivalent (na čistě černém pozadí) */
    --shadow:        0 0 0 1px rgba(120, 128, 132, 0.30);
    --done-bg:       var(--surface-container-low);
    --done-text:     var(--outline);
    --high:          #FFB4AB;
    --mid:           #F0A030;
    --low:           #9ECEDD;
    --overdue:       #FFB4AB;
    --bg-hover:      var(--surface-container);
    --bg-alt:        var(--surface-container-low);

    /* Typy úkolů — tmavý režim (--task-project dědí primary automaticky) */
    --task-tint-assigned: var(--surface-container-low); /* jemný nadzdvih nad černým pozadím (ztlumené) */

    color-scheme: dark;
}

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

/* --- Keyboard focus ring — viditelný pouze při navigaci klávesnicí --------- */
/*
 * Zobrazí se jen při Tab navigaci (focus-visible), ne při kliknutí myší.
 * Vstupy (input, textarea, select) mají vlastní focus styl přes border + box-shadow.
 */
:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

/* Skrýt nativní outline při kliknutí myší (prohlížeče s :focus-visible podporou) */
:focus:not(:focus-visible) {
    outline: none;
}

/* Vstupy — zachovat jejich vlastní focus styl, outline nepoužíváme */
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
    outline: none;
}

html {
    font-size: 16px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    font-family: var(--font-body);
    font-weight: 400;
    color: var(--text);
    background: var(--bg);
    min-height: 100vh;
    line-height: 1.5;
    min-width: 480px;
}

/* Na mobilu zrušit pevnou min-šířku, jinak je stránka širší než displej a ujíždí do stran */
@media (max-width: 600px) {
    body {
        min-width: 0;
        overflow-x: hidden;
    }
}

/* --- Typografie ------------------------------------------------------------ */
h1, h2, h3 {
    font-family: var(--font-display);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.02em;
}

/* --- Layout --------------------------------------------------------------- */
#app {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.container {
    width: 100%;
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 var(--padding-x);
}

.container--wide {
    max-width: var(--max-width-wide);
}

/* --- Hlavní navigace ------------------------------------------------------- */
.site-header {
    padding: 12px 0;
    position: sticky;
    top: 0;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--outline-variant);
    z-index: 100;
}

html.dark .site-header {
    background: rgba(0, 0, 0, 0.95);
    border-bottom-color: rgba(64, 72, 75, 0.5);
}

.site-header .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.site-title {
    font-family: var(--font-display);
    font-size: var(--fs-lg);
    font-weight: 700;
    color: var(--text);
    text-decoration: none;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.site-title span {
    color: var(--primary);
}

.dev-badge {
    font-size: var(--fs-2xs);
    font-family: var(--font-body);
    font-weight: 600;
    letter-spacing: 0.05em;
    vertical-align: middle;
    color: var(--accent);
}

.prod-badge {
    font-size: var(--fs-2xs);
    font-family: var(--font-body);
    font-weight: 600;
    letter-spacing: 0.05em;
    vertical-align: middle;
    color: #16a34a;
}

/* Badge role v hlavičce (neutrální — vidí ho každý admin, dev i prod) */
.role-badge {
    font-size: var(--fs-2xs);
    font-family: var(--font-body);
    font-weight: 600;
    letter-spacing: 0.05em;
    vertical-align: middle;
    color: var(--text-muted);
}

.nav-actions {
    display: flex;
    align-items: center;
    gap: 20px;
}

.nav-link {
    font-size: var(--fs-base);
    font-weight: 500;
    color: var(--text-muted);
    text-decoration: none;
    transition: color var(--transition);
    cursor: pointer;
    background: none;
    border: none;
    font-family: var(--font-body);
    letter-spacing: 0.02em;
}

.nav-link:hover,
.nav-link.active {
    color: var(--text);
}

.nav-link.danger:hover {
    color: var(--accent);
}

/* --- User dropdown menu v desktop navigaci --------------------------------- */
.nav-user-menu {
    position: relative;
}

.nav-user-trigger {
    display: flex;
    align-items: center;
    gap: 5px;
}

.nav-user-chevron {
    width: 12px;
    height: 12px;
    flex-shrink: 0;
    transition: transform var(--transition);
    color: var(--text-muted);
}

.nav-user-menu.open .nav-user-chevron {
    transform: rotate(180deg);
}

.nav-user-dropdown {
    display: none;
    position: absolute;
    right: 0;
    top: calc(100% + 10px);
    min-width: 160px;
    background: var(--surface-container-lowest);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-float);
    padding: 6px 0;
    z-index: 200;
}

.nav-user-menu.open .nav-user-dropdown {
    display: block;
}

.nav-user-dropdown-name {
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--text);
    padding: 8px 16px 10px;
    margin-bottom: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 200px;
}

.nav-user-dropdown-item {
    display: block;
    width: 100%;
    text-align: left;
    font-size: var(--fs-base);
    font-weight: 500;
    color: var(--text-muted);
    padding: 8px 16px;
    background: none;
    border: none;
    cursor: pointer;
    font-family: var(--font-body);
    transition: color var(--transition), background var(--transition);
}

.nav-user-dropdown-item:hover {
    color: var(--text);
    background: var(--border);
}

.nav-user-dropdown-item.danger:hover {
    color: var(--accent);
    background: rgba(0,180,216,0.05);
}

/* --- Mobilní bottom navigace (skrytá na desktopu) -------------------------- */
.bottom-nav {
    display: none;
}

/* --- Hlavní obsah ---------------------------------------------------------- */
.main-content {
    flex: 1;
    padding: 16px 0 64px;
}

/* --- Autentizace ----------------------------------------------------------- */
.auth-view {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px var(--padding-x);
}

.auth-header {
    text-align: center;
    margin-bottom: 48px;
}

.auth-header h1 {
    font-size: var(--fs-5xl);
    letter-spacing: -0.03em;
    color: var(--text);
}

.auth-header h1 span {
    color: var(--accent);
}

.auth-header p {
    margin-top: 8px;
    color: var(--text-muted);
    font-size: var(--fs-md);
}

.auth-card {
    width: 100%;
    max-width: 360px;
    background: var(--surface-container-lowest);
    border-radius: var(--radius-xl);
    padding: 36px 32px;
    box-shadow: var(--shadow);
    border-top: 2px solid var(--primary);
}

.auth-card h2 {
    font-size: var(--fs-2xl);
    margin-bottom: 28px;
    letter-spacing: -0.02em;
}

.auth-switch {
    margin-top: 20px;
    text-align: center;
    font-size: var(--fs-base);
    color: var(--text-muted);
}

.auth-switch a {
    color: var(--accent);
    text-decoration: none;
    font-weight: 500;
    cursor: pointer;
}

.auth-switch a:hover {
    text-decoration: underline;
}

/* --- Formulářové prvky ---------------------------------------------------- */
.field {
    margin-bottom: 16px;
}

.field label {
    display: block;
    font-size: var(--fs-sm);
    font-weight: 500;
    color: var(--text-muted);
    margin-bottom: 6px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.field input,
.field select,
.field textarea {
    width: 100%;
    padding: 10px 12px;
    font-family: var(--font-body);
    font-size: var(--fs-md);
    color: var(--text);
    background: var(--surface-container-low);
    border: none;
    border-left: 2px solid transparent;
    border-radius: var(--radius-lg);
    transition: background var(--transition), border-color var(--transition);
    outline: none;
    appearance: none;
    -webkit-appearance: none;
}

.field input:focus,
.field select:focus,
.field textarea:focus {
    background: var(--surface-container-lowest);
    border-left-color: var(--primary);
    box-shadow: none;
}

.field select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%238A877F' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 32px;
    cursor: pointer;
}

/* --- Pole se zaškrtávátkem ------------------------------------------------- */
/* Přebíjí obecné .field input/.field label, aby se checkbox nevykreslil
   jako neviditelný box přes celou šířku. */
.field--checkbox > label {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 0;
    text-transform: none;
    letter-spacing: normal;
    font-size: var(--fs-md);
    font-weight: 500;
    color: var(--text);
    cursor: pointer;
    user-select: none;
}

.field--checkbox input[type="checkbox"] {
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    padding: 0;
    appearance: none;
    -webkit-appearance: none;
    border: 1.5px solid var(--outline-variant);
    border-radius: 3px;
    background: var(--surface-container-lowest);
    cursor: pointer;
    transition: background var(--transition), border-color var(--transition);
    position: relative;
}

/* Fajfka přes CSS ::after */
.field--checkbox input[type="checkbox"]::after {
    content: '';
    position: absolute;
    left: 4px;
    top: 1px;
    width: 5px;
    height: 8px;
    border: 1.5px solid #fff;
    border-top: none;
    border-left: none;
    transform: rotate(45deg);
    opacity: 0;
    transition: opacity 100ms ease;
}

.field--checkbox input[type="checkbox"]:checked {
    background: var(--accent);
    border-color: var(--accent);
}

.field--checkbox input[type="checkbox"]:checked::after {
    opacity: 1;
}

.field--checkbox input[type="checkbox"]:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 1px;
}

/* --- Tlačítka -------------------------------------------------------------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 20px;
    font-family: var(--font-body);
    font-size: var(--fs-md);
    font-weight: 500;
    border-radius: var(--radius);
    border: 1px solid transparent;
    cursor: pointer;
    transition: all var(--transition);
    text-decoration: none;
    white-space: nowrap;
    letter-spacing: 0.01em;
}

.btn-primary {
    background: var(--primary);
    color: var(--on-primary);
    border-color: var(--primary);
    font-family: var(--font-display);
    font-weight: 600;
    letter-spacing: 0.02em;
}

.btn-primary:hover {
    background: var(--accent-glow);
    border-color: var(--accent-glow);
    color: var(--on-surface);
}

/* Akční tlačítko — „vytvořit/přidělit"; akční barva, NE modrá primární */
.btn-action {
    background: var(--action);
    color: var(--on-action);
    border-color: var(--action);
    font-family: var(--font-display);
    font-weight: 600;
    letter-spacing: 0.02em;
}

.btn-action:hover {
    background: var(--action-hover);
    border-color: var(--action-hover);
}

/* Utility lišta čočky Lidé — pravý zarovnaný akční pruh (globální „+ Přidělit") */
.team-utility {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 12px;
}

/* Sjednocený assign sheet (Fáze 3) — overlay nad obsahem, akční akcent místo modré */
.assign-sheet-card {
    border-top-color: var(--action);
    max-height: calc(100vh - 32px);
    overflow-y: auto;
}
.assign-sheet-card .profile-section { margin: 0; }
/* Zamčený příjemce (předvyplněno z kontextu) — nečitelný jako input, ale read-only */
.assign-recipient-locked {
    padding: 9px 12px;
    background: var(--surface-container-low);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font-weight: 600;
    color: var(--on-surface);
}
/* Kontextový řádek souhrnného úkolu nad formulářem */
.assign-master-ctx {
    font-size: var(--fs-sm);
    color: var(--on-surface-variant);
}
.assign-sheet-actions {
    display: flex;
    gap: 12px;
    justify-content: flex-end;
}

.btn-secondary {
    background: var(--surface-container-high);
    color: var(--text);
    border-color: transparent;
}

.btn-secondary:hover {
    background: var(--surface-container-highest);
}

.btn-ghost {
    background: transparent;
    color: var(--text-muted);
    border-color: transparent;
    padding: 6px 10px;
    font-size: var(--fs-base);
}

.btn-ghost:hover {
    color: var(--text);
    background: var(--surface-container-low);
}

.btn-danger {
    background: transparent;
    color: var(--error);
    border-color: transparent;
    padding: 6px 10px;
    font-size: var(--fs-base);
}

.btn-danger:hover {
    background: rgba(186, 26, 26, 0.06);
}

.btn-full {
    width: 100%;
}

.btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

/* --- Chybová hláška -------------------------------------------------------- */
.error-msg {
    font-size: var(--fs-base);
    color: var(--error);
    margin-top: 12px;
    min-height: 20px;
}

/* --- Sekce úkolů ----------------------------------------------------------- */
.tasks-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
}

.tasks-header h1 {
    font-size: var(--fs-3xl);
    letter-spacing: -0.03em;
}

.tasks-count {
    font-size: var(--fs-base);
    color: var(--text-muted);
}

.tasks-date {
    font-size: var(--fs-base);
    color: var(--accent);
    white-space: nowrap;
}

/* Přepínač světlý/tmavý režim */
.theme-toggle {
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--surface-container-low);
    border: none;
    border-radius: 50%;
    cursor: pointer;
    color: var(--on-surface-variant);
    transition: background var(--transition), color var(--transition);
    flex-shrink: 0;
}

.theme-toggle:hover {
    background: var(--surface-container);
    color: var(--on-surface);
}

/* Ve světlém režimu zobrazit měsíc (přepnout na tmavý) */
.theme-toggle .icon-sun  { display: none; }
.theme-toggle .icon-moon { display: block; }

/* V tmavém režimu zobrazit slunce (přepnout na světlý) */
html.dark .theme-toggle .icon-sun  { display: block; }
html.dark .theme-toggle .icon-moon { display: none; }

/* --- Rychlé přidání úkolu -------------------------------------------------- */
.quick-add {
    display: flex;
    gap: 8px;
    margin-bottom: 24px;
}

.quick-add input {
    flex: 1;
    padding: 12px 14px;
    font-family: var(--font-body);
    font-size: var(--fs-lg);
    color: var(--text);
    background: var(--surface-container-lowest);
    border: none;
    border-left: 2px solid transparent;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
    transition: background var(--transition), border-color var(--transition);
    outline: none;
}

.quick-add input:focus {
    background: var(--surface-container-lowest);
    border-left-color: var(--primary);
    box-shadow: var(--shadow-float);
}

.quick-add input::placeholder {
    color: var(--text-light);
}

/* --- Rozšířený formulář úkolu ---------------------------------------------- */
.task-form-extended {
    background: var(--surface-container-lowest);
    border-radius: var(--radius-xl);
    padding: 20px;
    margin-bottom: 24px;
    display: none;
    animation: slideDown 150ms ease forwards;
    box-shadow: var(--shadow);
}

.task-form-extended.open {
    display: block;
}

@keyframes slideDown {
    from { opacity: 0; transform: translateY(-8px); }
    to   { opacity: 1; transform: translateY(0); }
}

.task-form-row {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 12px;
    margin-bottom: 16px;
}

.task-form-row .field {
    margin-bottom: 0;
}

/* --- Přiřazení slotů ------------------------------------------------------- */
.slot-checkboxes {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 4px;
}

.slot-checkbox-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: var(--fs-base);
    color: var(--text-muted);
    cursor: pointer;
    padding: 6px 12px 6px 10px;
    background: var(--surface-container-low);
    border-radius: var(--radius-lg);
    transition: all var(--transition);
    user-select: none;
}

/* Vlastní checkbox */
.slot-checkbox-label input[type="checkbox"] {
    flex-shrink: 0;
    appearance: none;
    -webkit-appearance: none;
    width: 16px;
    height: 16px;
    border: 1.5px solid var(--outline-variant);
    border-radius: 3px;
    background: var(--surface-container-lowest);
    cursor: pointer;
    transition: background var(--transition), border-color var(--transition);
    position: relative;
}

/* Fajfka přes CSS ::after */
.slot-checkbox-label input[type="checkbox"]::after {
    content: '';
    position: absolute;
    left: 4px;
    top: 1px;
    width: 5px;
    height: 8px;
    border: 1.5px solid #fff;
    border-top: none;
    border-left: none;
    transform: rotate(45deg);
    opacity: 0;
    transition: opacity 100ms ease;
}

.slot-checkbox-label input[type="checkbox"]:checked {
    background: var(--accent);
    border-color: var(--accent);
}

@keyframes checkIn {
    from { opacity: 0; transform: rotate(45deg) scale(0.5); }
    to   { opacity: 1; transform: rotate(45deg) scale(1); }
}

.slot-checkbox-label input[type="checkbox"]:checked::after {
    animation: checkIn 150ms ease forwards;
}

.slot-checkbox-label:has(input:checked) {
    background: rgba(0, 102, 133, 0.08);
    color: var(--primary);
}

/* --- Kroky (podúkoly) v přidávacím formuláři ------------------------------ */
.steps-input-list {
    list-style: none;
    margin-bottom: 8px;
}

.step-input-item {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
}

.step-input-item input {
    flex: 1;
    padding: 7px 10px;
    font-family: var(--font-body);
    font-size: var(--fs-base);
    border: none;
    border-left: 2px solid transparent;
    border-radius: var(--radius-lg);
    background: var(--surface-container-low);
    color: var(--text);
    outline: none;
    transition: background var(--transition), border-color var(--transition);
}

.step-input-item input:focus {
    background: var(--surface-container-lowest);
    border-left-color: var(--primary);
}

.step-remove-btn {
    background: none;
    border: none;
    color: var(--text-light);
    cursor: pointer;
    font-size: var(--fs-xl);
    line-height: 1;
    padding: 2px 4px;
    transition: color var(--transition);
}

.step-remove-btn:hover {
    color: var(--accent);
}

.step-confirm-btn {
    background: none;
    border: none;
    color: var(--primary);
    cursor: pointer;
    font-size: var(--fs-xl);
    line-height: 1;
    padding: 2px 4px;
    transition: color var(--transition);
    flex-shrink: 0;
}

.step-confirm-btn:hover {
    color: var(--on-primary-container);
}

.add-step-btn {
    font-size: var(--fs-sm);
    color: var(--text-muted);
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px 0;
    font-family: var(--font-body);
    transition: color var(--transition);
}

.add-step-btn:hover {
    color: var(--accent);
}

/* --- Filtry ---------------------------------------------------------------- */
.task-filters {
    display: flex;
    gap: 2px;
    margin-bottom: 24px;
}

.filter-btn {
    padding: 5px 14px;
    font-family: var(--font-display);
    font-size: var(--fs-2xs);
    font-weight: 600;
    color: var(--text-muted);
    background: none;
    border: none;
    border-radius: 12px;
    cursor: pointer;
    transition: all var(--transition);
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.filter-btn:hover {
    color: var(--text);
    background: var(--surface-container-low);
}

.filter-btn.active {
    background: var(--primary);
    color: var(--on-primary);
}

/* --- Seznam úkolů ---------------------------------------------------------- */
.task-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.task-empty {
    padding: 64px 0;
    text-align: center;
    color: var(--text-muted);
    font-size: var(--fs-md);
}

.task-empty .task-empty-hint {
    display: block;
    font-size: var(--fs-sm);
    margin-top: 6px;
    color: var(--text-light);
    font-family: var(--font-mono);
}

/* --- Skupinové hlavičky ---------------------------------------------------- */
.task-group-header {
    display: flex;
    align-items: center;
    gap: 10px;
    list-style: none;
    padding: 28px 0 10px;
    pointer-events: none;
}

.task-group-header:first-child {
    padding-top: 0;
}

.task-group-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex-shrink: 0;
}

.task-group-header--high .task-group-dot { background: var(--high); }
.task-group-header--mid  .task-group-dot { background: var(--mid); }
.task-group-header--low  .task-group-dot { background: var(--low); }
.task-group-header--assigned .task-group-dot { background: var(--text-muted); }
.task-group-header--returned .task-group-dot { background: var(--mid); }

.task-group-label {
    font-family: var(--font-display);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    color: var(--outline);
    white-space: nowrap;
}

.task-group-line {
    flex: 1;
    height: 1px;
    background: var(--surface-container-high);
}

/* --- Jednotlivý úkol ------------------------------------------------------- */
.task-item {
    position: relative;
    background: var(--surface-container-lowest);
    border-radius: var(--radius-lg);
    overflow: hidden;
    transition: background var(--transition);
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
    box-shadow: var(--shadow);
}

.task-item:hover {
    background: var(--surface-container-low);
}

.task-item.expanded {
    background: var(--surface-container-lowest);
    box-shadow: var(--shadow-float);
}

.task-item.task-highlight {
    box-shadow: 0 0 0 2px var(--primary);
    transition: box-shadow 0.2s ease;
}

/* Prioritní levý pruh přes ::before */
.task-item::before {
    content: '';
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 3px;
    border-radius: var(--radius-lg) 0 0 var(--radius-lg);
}

.task-item[data-priority="high"]::before { background: var(--high); }
.task-item[data-priority="mid"]::before  { background: var(--mid); }
.task-item[data-priority="low"]::before  { background: var(--low); }

/* === Typy úkolů — tři nezávislé kanály (priorita = levý pruh výše) === */

/* PŮVOD = pozadí řádku: vlastní = bílá (bez třídy), přiřazený = slabý tint.
   Pozn.: vlastní třída --from-manager (ne --assigned), aby se nepralo s pending kartami
   v sekci „čeká na přijetí" (.task-item--assigned má vlastní levý border + zalamování). */
.task-item--from-manager { background: var(--task-tint-assigned); }
.task-item--from-manager:hover { background: var(--surface-container); }

/* PROJEKT = barevný pravý okraj v barvě SÚ (chip viz .task-master-label) */
.task-item--in-project::after {
    content: '';
    position: absolute;
    right: 0; top: 0; bottom: 0;
    width: 3px;
    background: var(--task-project);
    border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
}
/* U úkolů pod SÚ se levý prioritní pruh nevykresluje — prioritu nese skupina +
   obarvený checkbox; jinak by se modrá vlevo (nízká priorita) zdvojovala s projektem vpravo */
.task-item--in-project::before { display: none; }

/* SÚ OBÁLKA = nadřazený kontejner: výraznější než přidělený úkol — silnější modrý
   tint, barevný titulek, znatelný rámeček; potlačený prioritní pruh (obálka nemá prioritu) */
.task-item--envelope {
    background: color-mix(in srgb, var(--task-project) 11%, var(--surface));
    box-shadow: none;
    border: 1px dashed color-mix(in srgb, var(--task-project) 55%, transparent);
}
.task-item--envelope::before { display: none; }          /* obálka nemá prioritu */
.task-item--envelope:hover { background: color-mix(in srgb, var(--task-project) 15%, var(--surface)); }
.task-item--envelope .task-title { color: var(--task-project); font-weight: 600; }

/* Dokončené úkoly */
.task-item.done { opacity: 0.5; }

.task-item.done .task-title {
    text-decoration: line-through;
    color: var(--text-muted);
}

/* --- Hlavní řádek ---------------------------------------------------------- */
.task-row {
    display: flex;
    align-items: center;
    padding: 11px 12px 11px 16px;
    cursor: pointer;
    user-select: none;
    gap: 0;
    min-height: 46px;
}

/* Checkbox */
.task-checkbox {
    width: 20px;
    height: 20px;
    min-width: 20px;
    border: 2px solid var(--outline-variant);
    border-radius: 4px;
    background: transparent;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--transition);
    margin-right: 10px;
    flex-shrink: 0;
    position: relative;
    z-index: 1;
}

.task-item:hover .task-checkbox { border-color: var(--primary); }
.task-item[data-priority="high"] .task-checkbox { border-color: var(--high); }
.task-item[data-priority="mid"]  .task-checkbox { border-color: var(--mid); }
.task-item[data-priority="low"]  .task-checkbox { border-color: var(--primary); }

.task-item.done .task-checkbox {
    background: var(--primary);
    border-color: var(--primary);
}

.task-checkbox-inner {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #fff;
    opacity: 0;
    transition: opacity var(--transition);
}

.task-item.done .task-checkbox-inner {
    opacity: 1;
}

/* Název úkolu */
.task-title {
    flex: 1;
    font-size: var(--fs-base);
    font-weight: 600;
    color: var(--text);
    /* Dlouhé názvy: ořez na 2 řádky (migrace bezpečná — staré dlouhé názvy se jen oříznou) */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.3;
    min-width: 0;
    overflow-wrap: anywhere;
}

/* Počet kroků — badge */
.task-steps-count {
    font-family: var(--font-display);
    font-size: var(--fs-2xs);
    font-weight: 500;
    color: var(--text-muted);
    background: transparent;
    border: 1px solid color-mix(in srgb, var(--outline) 45%, transparent);
    border-radius: var(--radius);
    padding: 1px 6px;
    margin-left: 8px;
    flex-shrink: 0;
    white-space: nowrap;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

/* Datum chip */
.task-due {
    font-family: var(--font-display);
    font-size: var(--fs-2xs);
    font-weight: 500;
    padding: 2px 8px;
    border-radius: var(--radius);
    color: var(--text-muted);
    background: transparent;
    border: 1px solid color-mix(in srgb, var(--outline) 45%, transparent);
    margin-left: 6px;
    flex-shrink: 0;
    white-space: nowrap;
    letter-spacing: 0.06em;
}

.task-due.overdue {
    color: var(--error);
    border-color: color-mix(in srgb, var(--error) 55%, transparent);
}

.task-due.due-today {
    color: var(--primary);
    border-color: color-mix(in srgb, var(--primary) 55%, transparent);
    font-weight: 600;
}

/* Ikony note/manager */
.task-note-icon,
.task-manager-icon {
    width: 16px;
    height: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 5px;
    flex-shrink: 0;
    color: var(--text-muted);
    opacity: 0.6;
}

.task-note-icon svg,
.task-manager-icon svg {
    width: 12px;
    height: 12px;
    pointer-events: none;
}

/* Akce — skryté, zobrazí se na hover */
.task-actions {
    display: flex;
    align-items: center;
    gap: 1px;
    flex-shrink: 0;
    opacity: 0;
    transition: opacity var(--transition);
}

.task-item:hover .task-actions,
.task-item:focus-within .task-actions {
    opacity: 1;
}

.task-icon-btn {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: none;
    cursor: pointer;
    border-radius: var(--radius);
    color: var(--text-muted);
    transition: all var(--transition);
    flex-shrink: 0;
}

.task-icon-btn:hover {
    background: var(--bg);
    color: var(--text);
}

.task-icon-btn.danger:hover {
    color: var(--high);
    background: rgba(232,64,26,.06);
}

.task-icon-btn svg {
    width: 14px;
    height: 14px;
    pointer-events: none;
}

/* Chevron */
.task-expand-icon {
    width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 4px;
    flex-shrink: 0;
    color: var(--text-light);
    transition: transform 250ms cubic-bezier(.16,1,.3,1), color var(--transition);
}

.task-item.expanded .task-expand-icon {
    transform: rotate(180deg);
    color: var(--text-muted);
}

.task-expand-icon svg {
    width: 11px;
    height: 11px;
    pointer-events: none;
}

/* --- Detail panel (kroky + editace) ---------------------------------------- */
.task-detail {
    display: none;
    background: var(--surface-container-low);
    padding: 12px 14px 14px 40px;
    animation: slideDown 150ms ease forwards;
}

.task-item.expanded .task-detail {
    display: block;
}

/* Tab bar v detailu úkolu */
.task-tab-bar {
    display: flex;
    gap: 0;
    border-bottom: 1px solid var(--border);
    margin-bottom: 12px;
    overflow-x: auto;
    scrollbar-width: none;
}
.task-tab-bar::-webkit-scrollbar { display: none; }

.task-tab {
    flex-shrink: 0;
    padding: 5px 14px 6px;
    font-size: var(--fs-sm);
    font-weight: 500;
    font-family: var(--font-body);
    color: var(--text-muted);
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    cursor: pointer;
    transition: color var(--transition), border-color var(--transition);
    white-space: nowrap;
}
.task-tab:hover { color: var(--text); }
.task-tab.active {
    color: var(--primary);
    border-bottom-color: var(--primary);
}

/* Tab panely — skryté pokud nejsou aktivní */
.task-tab-panel { display: none; }
.task-tab-panel.active { display: block; }

/* Panel obalující kroky v detailu */
.steps-panel {
    background: var(--surface-container-lowest);
    border-radius: var(--radius-xl);
    padding: 6px 12px 4px;
}

/* Kroky v detailu */
.step-list {
    list-style: none;
    margin-bottom: 10px;
}

.step-item {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--surface-container-low);
    border-radius: var(--radius-md);
    padding: 6px 0;
}

.step-item + .step-item {
    margin-top: 2px;
}

.step-checkbox {
    width: 15px;
    height: 15px;
    min-width: 15px;
    border: 1.5px solid var(--outline-variant);
    border-radius: 3px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--transition);
    background: transparent;
    flex-shrink: 0;
}

.step-checkbox:hover {
    border-color: var(--primary);
}

.step-item.done .step-checkbox {
    background: var(--primary);
    border-color: var(--primary);
}

.step-checkbox-tick {
    font-size: 0.5625rem;
    color: #fff;
    opacity: 0;
    transition: opacity var(--transition);
    line-height: 1;
}

.step-item.done .step-checkbox-tick {
    opacity: 1;
}

.step-title {
    font-size: var(--fs-sm);
    color: var(--text-muted);
    flex: 1;
}

.step-item.done .step-title {
    text-decoration: line-through;
    color: var(--text-light);
}

.step-actions {
    display: flex;
    gap: 2px;
    opacity: 0;
    transition: opacity var(--transition);
    flex-shrink: 0;
}

.step-item:hover .step-actions {
    opacity: 1;
}

.step-action-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    padding: 0;
    border: none;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    border-radius: 3px;
    transition: color var(--transition), background var(--transition);
    flex-shrink: 0;
}

.step-action-btn svg {
    width: 12px;
    height: 12px;
}

.step-action-btn:hover {
    color: var(--text);
    background: var(--bg-alt);
}

.step-action-btn.danger:hover {
    color: var(--error, #c0392b);
    background: var(--bg-alt);
}

.step-edit-row {
    display: flex;
    align-items: center;
    gap: 4px;
    flex: 1;
}

.step-edit-input {
    flex: 1;
    padding: 2px 6px;
    font-family: var(--font-body);
    font-size: var(--fs-sm);
    border: 1px solid var(--border-focus);
    border-radius: var(--radius);
    background: var(--bg);
    color: var(--text);
    outline: none;
}

.step-action-btn[data-action="save-step-edit"],
.step-action-btn[data-action="cancel-step-edit"] {
    font-size: 0.6875rem;
    font-weight: 600;
    color: var(--text-muted);
}

/* Přidání kroku v detailu */
.step-add-inline {
    display: flex;
    gap: 6px;
    margin-bottom: 12px;
}

.step-add-inline input {
    flex: 1;
    padding: 5px 8px;
    font-family: var(--font-body);
    font-size: var(--fs-sm);
    border: none;
    border-left: 2px solid transparent;
    border-radius: var(--radius-lg);
    background: var(--surface-container);
    color: var(--text);
    outline: none;
    transition: background var(--transition), border-color var(--transition);
}

.step-add-inline input:focus {
    background: var(--surface-container-lowest);
    border-left-color: var(--primary);
}

.step-add-inline input::placeholder {
    color: var(--text-light);
}

/* Bílý panel obalující editační sekci v detailu */
.task-edit-panel {
    background: var(--surface-container-lowest);
    border-radius: var(--radius-xl);
    padding: 10px 12px 12px;
    margin-top: 8px;
}

/* Editační řádek v detailu */
.task-edit-row {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 10px;
    margin-bottom: 12px;
}

.task-edit-row .field {
    margin-bottom: 0;
}

.field--full {
    grid-column: 1 / -1;
}

/* Note textarea v editačním panelu */
.task-note-field {
    margin-bottom: 12px;
}

.task-note-field textarea {
    width: 100%;
    padding: 8px 10px;
    font-family: var(--font-body);
    font-size: var(--fs-base);
    color: var(--text);
    background: var(--surface-container);
    border: none;
    border-left: 2px solid transparent;
    border-radius: var(--radius-lg);
    resize: vertical;
    min-height: 60px;
    outline: none;
    transition: background var(--transition), border-color var(--transition);
    line-height: 1.4;
}

.task-note-field textarea:focus {
    background: var(--surface-container-lowest);
    border-left-color: var(--primary);
}

.task-note-field textarea::placeholder {
    color: var(--text-light);
}

.task-note-field label {
    display: block;
    font-size: var(--fs-xs);
    font-weight: 500;
    color: var(--text-muted);
    margin-bottom: 4px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

/* --- Pole Popis (sdílený popis úkolu) — Tým UX Fáze 4 ----------------------- */
/* Editační textarea + label sdílí vzhled s poznámkou */
.task-desc-field {
    margin-bottom: 12px;
}
.task-desc-field textarea {
    width: 100%;
    padding: 8px 10px;
    font-family: var(--font-body);
    font-size: var(--fs-base);
    color: var(--text);
    background: var(--surface-container);
    border: none;
    border-left: 2px solid transparent;
    border-radius: var(--radius-lg);
    resize: vertical;
    min-height: 48px;
    outline: none;
    transition: background var(--transition), border-color var(--transition);
    line-height: 1.4;
}
.task-desc-field textarea:focus {
    background: var(--surface-container-lowest);
    border-left-color: var(--primary);
}
.task-desc-field textarea::placeholder { color: var(--text-light); }
.task-desc-field label {
    display: block;
    font-size: var(--fs-xs);
    font-weight: 500;
    color: var(--text-muted);
    margin-bottom: 4px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

/* Sekundární řádek Popisu pod názvem úkolu (read-only v seznamu) */
.task-desc-line {
    padding: 0 12px 6px 37px;
}
/* Při rozbalení se Popis ukáže v plné podobě v detailu → kompaktní řádek skryj (žádná duplicita) */
.task-item.expanded .task-desc-line {
    display: none;
}
.task-desc-text {
    font-size: var(--fs-sm);
    color: var(--text-muted);
    line-height: 1.4;
}

/* Popis v detailu úkolu (read-only blok nad taby) */
.task-detail-desc {
    padding: 8px 12px 10px 12px;
    font-size: var(--fs-sm);
    color: var(--text);
    line-height: 1.45;
    white-space: pre-wrap;
    border-left: 3px solid color-mix(in srgb, var(--primary) 40%, transparent);
    background: var(--surface-container-low);
    border-radius: var(--radius);
    margin-bottom: 8px;
}

/* Ořez na 2 řádky + rozbalení („…více"/„…méně") */
.clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    overflow-wrap: anywhere;
}
.clamp-2.expanded {
    -webkit-line-clamp: unset;
    overflow: visible;
}
.clamp-toggle {
    margin-top: 2px;
    padding: 0;
    background: none;
    border: none;
    cursor: pointer;
    font-size: var(--fs-xs);
    font-weight: 600;
    color: var(--primary);
}
.clamp-toggle:hover { text-decoration: underline; }

/* Počítadlo znaků + jemný nudge u názvu úkolu (BEZ tvrdého limitu) */
.title-nudge-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-top: 4px;
    min-height: 16px;
}
.title-nudge-hint {
    font-size: var(--fs-xs);
    color: var(--mid);
}
.title-char-count {
    margin-left: auto;
    font-size: var(--fs-2xs);
    color: var(--text-light);
    font-variant-numeric: tabular-nums;
}

/* Akce edit/delete v detail panelu — viditelné pouze na mobilu */
.task-detail-mobile-actions {
    display: none;
    gap: 8px;
    padding-bottom: 8px;
    margin-bottom: 8px;
}

.task-detail-mobile-actions .btn.danger:hover {
    color: var(--high);
}

.task-edit-actions {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    margin-top: 8px;
}

/* --- Profil / Nastavení ---------------------------------------------------- */
.profile-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 40px;
}

.profile-header h1 {
    font-size: var(--fs-4xl);
    letter-spacing: -0.02em;
}

.profile-section {
    margin-bottom: 48px;
}

.profile-section-title {
    font-size: var(--fs-sm);
    font-weight: 500;
    color: var(--text-muted);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: 4px;
}

.profile-section-desc {
    font-size: var(--fs-base);
    color: var(--text-muted);
    margin-bottom: 20px;
}

/* C6 — návod jak odblokovat notifikace (denied stav) */
.push-denied { display: flex; flex-direction: column; gap: 6px; }
.push-denied-help summary {
    cursor: pointer;
    font-size: var(--fs-sm);
    color: var(--primary);
    width: fit-content;
}
.push-denied-steps {
    margin: 6px 0 0;
    font-size: var(--fs-sm);
    color: var(--text-muted);
    line-height: 1.5;
}

/* --- Časové sloty ---------------------------------------------------------- */
.slot-list {
    list-style: none;
    margin-bottom: 16px;
}

.slot-item {
    display: grid;
    grid-template-columns: 1fr 90px 90px 130px auto;
    align-items: center;
    gap: 10px;
    padding: 12px 0;
    position: relative;
}

.slot-item + .slot-item {
    margin-top: 4px;
}

.slot-item input,
.slot-item select {
    padding: 7px 10px;
    font-family: var(--font-body);
    font-size: var(--fs-base);
    border: none;
    border-radius: var(--radius-lg);
    background: var(--surface-container-low);
    color: var(--text);
    outline: none;
    transition: background var(--transition), border-color var(--transition);
    width: 100%;
}

.slot-item input.slot-name,
.slot-item input.slot-from,
.slot-item input.slot-to {
    background: var(--surface-container);
}

.slot-item input:focus,
.slot-item select:focus {
    background: var(--surface-container-lowest);
    box-shadow: 0 0 0 2px var(--primary-container);
}

.slot-item select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%238A877F' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 8px center;
    padding-right: 28px;
    appearance: none;
    cursor: pointer;
}

/* Ovládací prvky pod seznamem slotů */
.slot-controls {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-top: 16px;
}

.slot-overlap-warning {
    font-size: var(--fs-sm);
    color: var(--accent);
    margin-top: 8px;
    display: none;
}

.slot-overlap-warning.visible {
    display: block;
}

/* Slot s neuloženými změnami — zvýrazněný název jako indikátor */
.slot-item--dirty .slot-name {
    box-shadow: 0 0 0 2px var(--primary) !important;
    background: rgba(0, 102, 133, 0.04) !important;
}


/* --- Přepínač jazyka ------------------------------------------------------- */
.lang-switcher {
    display: flex;
    gap: 4px;
}

.lang-btn {
    padding: 6px 14px;
    font-family: var(--font-display);
    font-size: var(--fs-xs);
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    border: none;
    border-radius: var(--radius-lg);
    background: var(--surface-container-low);
    color: var(--text-muted);
    cursor: pointer;
    transition: all var(--transition);
}

.lang-btn.active {
    background: var(--primary);
    color: var(--on-primary);
}

.lang-btn:not(.active):hover {
    background: var(--surface-container-high);
    color: var(--text);
}

/* --- Toast notifikace ------------------------------------------------------ */
.toast-container {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 1000;
    display: flex;
    flex-direction: column;
    gap: 8px;
    pointer-events: none;
}

.toast {
    padding: 12px 16px;
    border-radius: var(--radius);
    font-size: var(--fs-base);
    font-weight: 500;
    background: var(--text);
    color: var(--bg);
    max-width: 300px;
    animation: toastIn 200ms ease forwards;
    pointer-events: auto;
}

.toast.error {
    background: var(--error);
    color: #fff;
}

@keyframes toastIn {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes toastOut {
    from { opacity: 1; transform: translateY(0); }
    to   { opacity: 0; transform: translateY(8px); }
}

.toast.removing {
    animation: toastOut 200ms ease forwards;
}

/* --- Loading stav ---------------------------------------------------------- */
.loading {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 48px 0;
}

.loading-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--text-light);
    margin: 0 3px;
    animation: pulse 1.2s ease-in-out infinite;
}

.loading-dot:nth-child(2) { animation-delay: 0.2s; }
.loading-dot:nth-child(3) { animation-delay: 0.4s; }

@keyframes pulse {
    0%, 80%, 100% { transform: scale(1); opacity: 0.5; }
    40%           { transform: scale(1.3); opacity: 1; }
}

/* --- Řazení úkolů ---------------------------------------------------------- */
.task-toolbar {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 16px;
}

.task-toolbar .task-filters {
    margin-bottom: 0;
}

/* --- Přepínač pohledu: Dle priority ↔ Dle projektů ------------------------- */
.task-toolbar #filter-dd { margin-left: auto; } /* přepínač vlevo, filtr+řazení vpravo */
.view-toggle {
    display: inline-flex;
    background: var(--surface-container-low);
    border-radius: var(--radius-lg);
    padding: 2px;
    gap: 2px;
    flex-shrink: 0;
}
.view-toggle-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 30px;
    padding: 0 10px;
    border: none;
    background: transparent;
    color: var(--text-muted);
    font-family: var(--font-display);
    font-size: var(--fs-xs);
    font-weight: 600;
    border-radius: 4px;
    cursor: pointer;
    transition: color var(--transition), background var(--transition);
}
.view-toggle-btn svg { width: 15px; height: 15px; flex-shrink: 0; }
.view-toggle-btn.on {
    background: var(--surface);
    color: var(--text);
    box-shadow: 0 0 0 1px var(--border);
}
.view-toggle-btn:hover:not(.on) { color: var(--text); }

/* V projektovém pohledu nemá řazení smysl (grouping je fixní) — skryj sort dd */
.task-toolbar.is-project-view #sort-dd { display: none; }

/* --- Projektový pohled: skupiny + vizuální zanoření podúkolů --------------- */
.task-item.task-project-head { margin-top: 14px; }
.task-list > .task-project-head:first-child { margin-top: 0; }

/* Podúkol zanořený pod obálkou (vizuálně, bez <li> v <li>) */
.task-item--nested {
    margin-left: 18px;
    border-left: 2px solid color-mix(in srgb, var(--task-project) 35%, transparent);
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}
.task-item--nested::before { display: none; }   /* prioritní pruh nahrazuje spojnice projektu */
.task-item--nested::after  { display: none; }   /* pravý okraj uvnitř skupiny netřeba */

/* Syntetická hlavička skupiny (když obálka SÚ není v listu) */
.task-project-synthetic {
    list-style: none;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: var(--fs-sm);
    color: var(--task-project);
    background: color-mix(in srgb, var(--task-project) 9%, var(--surface));
    border: 1px dashed color-mix(in srgb, var(--task-project) 50%, transparent);
    border-radius: var(--radius-lg);
}
.task-project-synthetic svg { width: 16px; height: 16px; flex-shrink: 0; }

/* Hlavička „Ostatní úkoly" v projektovém pohledu — dědí .task-group-header */
.task-group-header--other .task-group-label { color: var(--text-muted); }

/* --- Toolbar dropdowny: filtr (multi) + řazení (single + směr) -------------- */
/* Obrysový trigger ve stylu z Celkového přehledu; panel = floating se stínem. */
.dd { position: relative; }
.dd-trigger {
    height: 34px;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-family: var(--font-display);
    font-size: var(--fs-2xs);
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-muted);
    background: transparent;
    border: 1px solid var(--outline-variant);
    border-radius: var(--radius);
    padding: 0 28px 0 11px;
    cursor: pointer;
    white-space: nowrap;
    transition: border-color var(--transition), color var(--transition);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='7' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%2371787B' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
}
html.dark .dd-trigger {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='7' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%238C9296' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
}
.dd-trigger.is-set { color: var(--text); }
.dd-dir-arrow { font-weight: 700; }

.dd-panel {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    z-index: 30;
    min-width: 200px;
    background: var(--surface-container-lowest);
    border: 1px solid var(--outline-variant);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-float);
    padding: 6px;
}
.dd-panel--right { left: auto; right: 0; }
.dd-opt {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 7px 10px;
    border-radius: var(--radius);
    font-size: var(--fs-sm);
    color: var(--text);
    cursor: pointer;
    white-space: nowrap;
}
.dd-opt:hover { background: var(--surface-container-low); }
.dd-opt input { accent-color: var(--primary); width: 15px; height: 15px; flex-shrink: 0; cursor: pointer; }
.dd-sep { height: 1px; background: var(--outline-variant); margin: 4px 2px; }
.dd-clear {
    font-size: var(--fs-sm);
    color: var(--text-muted);
    padding: 6px 10px;
    border-radius: var(--radius);
    cursor: pointer;
}
.dd-clear:hover { background: var(--surface-container-low); color: var(--text); }
.dd-dir { display: flex; gap: 4px; padding: 4px 4px 2px; }
.dd-dir-btn {
    flex: 1;
    font-family: var(--font-body);
    font-size: var(--fs-sm);
    padding: 5px 8px;
    border: 1px solid var(--outline-variant);
    border-radius: var(--radius);
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    white-space: nowrap;
}
.dd-dir-btn.active { background: var(--primary); color: var(--on-primary); border-color: var(--primary); }

.sort-controls {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}

.sort-label {
    font-size: var(--fs-sm);
    color: var(--text-muted);
    white-space: nowrap;
}

.sort-btn {
    padding: 5px 12px;
    font-family: var(--font-body);
    font-size: var(--fs-sm);
    font-weight: 500;
    color: var(--text-muted);
    background: none;
    border: 1px solid transparent;
    border-radius: 20px;
    cursor: pointer;
    transition: all var(--transition);
}

.sort-btn:hover {
    color: var(--text);
}

.sort-btn.active {
    color: var(--text);
    background: var(--surface-container-low);
}

/* --- Animace přidání úkolu ------------------------------------------------- */
@keyframes taskEnter {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}

.task-item--entering {
    animation: taskEnter 200ms ease forwards;
}

/* --- Animace checkboxu ----------------------------------------------------- */
@keyframes checkPop {
    0%   { transform: scale(1); }
    40%  { transform: scale(1.25); }
    100% { transform: scale(1); }
}

.task-checkbox--popping {
    animation: checkPop 220ms ease forwards;
}

/* --- Skupinové záhlaví priority -------------------------------------------- */
.task-group-header {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 16px 4px 5px;
    font-size: var(--fs-2xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--text-muted);
    list-style: none;
}

.task-group-header:first-child { padding-top: 4px; }

.task-group-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex-shrink: 0;
}

.task-group-header--high .task-group-dot { background: var(--high); }
.task-group-header--mid  .task-group-dot { background: var(--mid); }
.task-group-header--low  .task-group-dot { background: var(--low); }

/* Barevné nadpisy skupin — okamžitá čitelnost priority bez výkřiku */
.task-group-header--high { color: var(--high); }
.task-group-header--mid  { color: var(--mid); }
.task-group-header--low  { color: var(--low); }

.task-group-count {
    margin-left: auto;
    font-weight: 400;
    opacity: 0.55;
}

/* --- Drag handle ----------------------------------------------------------- */
.task-drag-handle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    cursor: grab;
    color: var(--text-muted);
    opacity: 0;
    transition: opacity 0.15s;
    margin-right: 2px;
}

.task-drag-handle svg {
    width: 10px;
    height: 14px;
}

.task-item:hover .task-drag-handle { opacity: 0.45; }
.task-drag-handle:hover             { opacity: 0.75 !important; }
.task-drag-handle:active            { cursor: grabbing; }

/* Stavy při přetahování */
.task-item--dragging { opacity: 0.35; }

.task-item--drag-over {
    box-shadow: 0 -2px 0 0 var(--primary), 0 2px 12px rgba(25,28,29,0.06);
}

/* Sentinel na konci skupiny — zachytí drop na poslední pozici */
.task-group-end {
    height: 12px;
    list-style: none;
}

.task-group-end.task-item--drag-over {
    box-shadow: 0 -2px 0 0 var(--primary);
}

/* --- Prázdný stav ---------------------------------------------------------- */
.task-empty {
    padding: 48px 0;
    text-align: center;
    color: var(--text-muted);
    font-size: var(--fs-md);
}

.task-empty-hint {
    display: block;
    margin-top: 8px;
    font-size: var(--fs-sm);
    color: var(--text-light);
}

/* --- Coach toast ----------------------------------------------------------- */
/*
 * Notifikace kouče — slide zprava, pozice top-right pod navigací.
 * Animace: translateX(calc(100% + 16px)) → 0 při přidání třídy --visible.
 */
.coach-toast {
    position: fixed;
    top: 72px;
    right: 0;
    width: 500px;                      /* šířka toastu — upravuj zde */
    max-width: calc(100vw - 16px);
    z-index: 200;
    padding-right: 16px;
    transform: translateX(calc(100% + 16px));
    transition: transform 320ms cubic-bezier(0.34, 1.3, 0.64, 1);
    pointer-events: none;
}

.coach-toast--visible {
    transform: translateX(0);
    pointer-events: auto;
}

.coach-toast-inner {
    background: var(--surface-container-lowest);
    border-left: 3px solid var(--primary);
    border-radius: var(--radius-xl);
    padding: 24px 28px 20px;
    box-shadow: var(--shadow-float);
}

.coach-toast-header {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 10px;
}

.coach-toast-emoji {
    font-size: var(--fs-3xl);                 /* emoji — upravuj zde */
    line-height: 1;
}

.coach-toast-label {
    font-family: var(--font-display);
    font-size: var(--fs-xs);
    font-weight: 700;
    color: var(--on-surface-variant);
    text-transform: uppercase;
    letter-spacing: 0.12em;
}

.coach-message {
    font-size: var(--fs-2xl);                 /* hlavní text zprávy — upravuj zde */
    color: var(--text);
    line-height: 1.5;
    margin-bottom: 16px;
}

.coach-actions {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.coach-actions .btn {
    width: 100%;
    text-align: left;
    justify-content: flex-start;
}

/* Prioritní tečka v tlačítkách kouče */
.coach-priority-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
    margin-right: 7px;
}
.coach-priority-dot--high { background: var(--high); }
.coach-priority-dot--mid  { background: var(--mid); }
.coach-priority-dot--low  { background: var(--low); }

.coach-secondary {
    margin-top: 6px;
    display: flex;
    align-items: center;
}

.coach-secondary .btn {
    width: 100%;
    text-align: left;
    justify-content: flex-start;
}

.coach-snooze-wrap {
    position: relative;
    width: 100%;
}

.coach-snooze-menu {
    position: absolute;
    bottom: calc(100% + 4px);
    left: 0;
    right: 0;
    background: var(--surface-container-lowest);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-float);
    z-index: 10;
}

.coach-snooze-opt {
    display: block;
    width: 100%;
    padding: 9px 14px;
    background: none;
    border: none;
    text-align: left;
    font-size: var(--fs-base);
    color: var(--text);
    cursor: pointer;
    transition: background 150ms;
}

.coach-snooze-opt:hover {
    background: var(--bg-hover);
}

/* --- Slot change notification ---------------------------------------------- */
/*
 * Malá info karta — slide zprava při přechodu na nový slot.
 * Stejná animace jako coach-toast, ale užší, neutrální border, bez akcí.
 * Auto-dismiss po 4 s, klik zavře okamžitě.
 */
.slot-notify {
    position: fixed;
    top: 72px;
    right: 0;
    width: 260px;
    max-width: calc(100vw - 16px);
    z-index: 190;
    padding-right: 16px;
    transform: translateX(calc(100% + 16px));
    transition: transform 280ms cubic-bezier(0.34, 1.3, 0.64, 1);
    pointer-events: none;
    cursor: pointer;
}

.slot-notify--visible {
    transform: translateX(0);
    pointer-events: auto;
}

.slot-notify-inner {
    background: var(--surface-container-lowest);
    border-left: 3px solid var(--on-surface-variant);
    border-radius: var(--radius-xl);
    padding: 14px 18px 12px;
    box-shadow: var(--shadow-float);
}

.slot-notify-label {
    font-family: var(--font-display);
    font-size: var(--fs-2xs);
    font-weight: 700;
    color: var(--on-surface-variant);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    margin-bottom: 4px;
}

.slot-notify-name {
    font-family: var(--font-display);
    font-size: var(--fs-lg);
    font-weight: 600;
    color: var(--text);
    margin-bottom: 2px;
}

.slot-notify-sub {
    font-size: var(--fs-sm);
    color: var(--text-muted);
}

/* --- Indikátor stavu kouče ------------------------------------------------- */
/*
 * Malý badge v pravém rohu tasks-headeru.
 * Tečka + text — barva tečky se mění dle stavu state machine.
 */
.tasks-header-right {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
}

.coach-status {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: var(--fs-2xs);
    color: var(--text-muted);
    opacity: 0;
    transition: opacity 300ms;
    user-select: none;
    letter-spacing: 0.01em;
}

.coach-status.visible {
    opacity: 1;
}

.coach-status-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex-shrink: 0;
    transition: background-color 600ms;
}

/* --- Work session — fixní lišta ------------------------------------------- */
/*
 * Fixed panel nad coach bannerem (pokud je viditelný) nebo na spodku obrazovky.
 * Aktivní stav: akcent #C8472A. Pozastavený: tlumená šedá.
 */
.work-session-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 150; /* pod coach bannerem (z-index: 200) */
    padding: 0 var(--padding-x);
    transition: transform 300ms ease, bottom 300ms ease;
}



.work-session-bar-inner {
    max-width: var(--max-width);
    margin: 0 auto;
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
    padding: 16px 20px;
    min-height: 72px;
    box-shadow: 0 -8px 32px rgba(25, 28, 29, 0.06);
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

html.dark .work-session-bar-inner {
    background: rgba(29, 32, 33, 0.92);
}

/* Aktivní stav — levý pruh v primary */
.work-session-bar--active .work-session-bar-inner {
    border-left: 3px solid var(--primary);
}

/* Pozastavený stav — levý pruh tlumený */
.work-session-bar--paused .work-session-bar-inner {
    border-left: 3px solid var(--outline-variant);
}

.work-session-bar-label {
    font-size: var(--fs-xs);
    font-weight: 500;
    color: var(--text-muted);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    white-space: nowrap;
}

.work-session-bar-title {
    font-size: var(--fs-md);
    font-weight: 500;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 200px;
}

.work-session-bar-icon {
    font-size: var(--fs-lg);
}

.work-session-bar-timer {
    font-family: var(--font-display);
    font-size: 1.75rem;
    font-weight: 300;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
    flex-shrink: 0;
}

.work-session-bar--active .work-session-bar-timer {
    color: var(--primary);
}

.work-session-bar--paused .work-session-bar-timer {
    color: var(--on-surface-variant);
}

.work-session-bar-actions {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-left: auto;
    flex-shrink: 0;
}

/* --- Work session — inline v task-row ------------------------------------- */

/* Tlačítko Začít — cyan chip v řádku */
.task-start-btn {
    font-size: var(--fs-2xs);
    font-weight: 700;
    font-family: var(--font-display);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--primary);
    background: transparent;
    border: 1px solid color-mix(in srgb, var(--primary) 50%, transparent);
    border-radius: var(--radius);
    padding: 4px 10px;
    margin-left: 8px;
    cursor: pointer;
    flex-shrink: 0;
    white-space: nowrap;
    transition: all var(--transition);
    display: flex;
    align-items: center;
    gap: 4px;
}

.task-start-btn:not(:disabled):hover {
    background: color-mix(in srgb, var(--primary) 10%, transparent);
}

.task-start-btn:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}

/* Timer v řádku (aktivní session) */
.task-row-timer {
    font-family: var(--font-display);
    font-size: var(--fs-sm);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--primary);
    letter-spacing: 0.02em;
    margin-left: 8px;
    flex-shrink: 0;
}

.task-row-timer--paused {
    color: var(--text-muted);
    font-weight: 600;
}

/* Akce work session v řádku */
.task-work-actions {
    display: flex;
    align-items: center;
    gap: 2px;
    margin-left: 4px;
    flex-shrink: 0;
}

/* --- Responzivita ---------------------------------------------------------- */
@media (max-width: 600px) {
    :root {
        --padding-x: 16px;
    }

    /* Nav kompaktnější na úzkých desktopových oknech */
    .nav-actions {
        gap: 14px;
    }

    /* "Začít" tlačítko — na mobilu jen ikona ▶, bez textu */
    .start-label {
        display: none;
    }
    .task-start-btn {
        padding: 4px 8px;
        margin-left: 4px;
    }

    .main-content {
        padding: 12px 0 64px;
    }

    .tasks-header h1 {
        font-size: var(--fs-2xl);
    }

    .auth-header h1 {
        font-size: var(--fs-4xl);
    }

    .task-form-row,
    .task-edit-row {
        grid-template-columns: 1fr 1fr;
    }

    .task-form-row .field:last-child,
    .task-edit-row .field:last-child {
        grid-column: 1 / -1;
    }

    .slot-item {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto auto auto;
    }

    .slot-item > *:first-child {
        grid-column: 1 / -1;
    }

    .slot-item > *:last-child {
        grid-column: 1 / -1;
        justify-self: end;
    }

    /* Na mobilu: akce přesunuty do detail panelu */
    .task-actions {
        display: none;
    }

    .task-detail-mobile-actions {
        display: flex;
    }

    /* Řádek na mobilu o trochu vyšší pro touch */
    .task-row {
        height: 52px;
    }

    .task-toolbar {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
    }

    /* Přepínač pohledu přes celou šířku, filtr zpět zarovnaný doleva */
    .task-toolbar #filter-dd { margin-left: 0; }
    .view-toggle { width: 100%; }
    .view-toggle-btn { flex: 1; justify-content: center; }

    .sort-controls {
        align-self: flex-end;
    }

    .sort-label {
        display: none;
    }

    /* Větší touch target pro checkbox — pseudo-element rozšíří klikatelnou plochu na 44×44px */
    .task-checkbox {
        width: 22px;
        height: 22px;
        min-width: 22px;
        position: relative;
    }

    .task-checkbox::before {
        content: '';
        position: absolute;
        inset: -11px;
    }

    .task-checkbox-inner {
        width: 8px;
        height: 8px;
    }

    .filter-btn,
    .sort-btn {
        padding: 6px 12px;
    }

    .profile-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    /* Slot položky na mobilu */
    .slot-item input,
    .slot-item select {
        font-size: var(--fs-lg); /* zabraňuje zoom na iOS */
    }

    /* Quick-add na mobilu: vše v jedné řadě, "+ více" zúženo na ikonku "+" */
    .quick-add input {
        font-size: var(--fs-lg);
    }

    #quick-add-expand-btn {
        font-size: 0;        /* schovat text "+ více" */
        width: 44px;
        padding: 0;
        flex-shrink: 0;
    }

    #quick-add-expand-btn::before {
        content: '+';
        font-size: var(--fs-2xl);
        line-height: 1;
    }

    /* Coach toast na mobilu — posun od kraje */
    .coach-toast {
        top: 60px;
        padding-right: 8px;
        padding-left: 8px;
        width: 100%;
        max-width: 100%;
    }

    /* Slot notification na mobilu */
    .slot-notify {
        top: 60px;
        padding-right: 8px;
        padding-left: 8px;
        width: 100%;
        max-width: 100%;
    }

    /* Work session lišta na mobilu */
    .work-session-bar-inner {
        gap: 6px;
        padding: 8px 12px;
    }

    .work-session-bar-title {
        max-width: 120px;
    }

    .work-session-bar-actions {
        width: 100%;
        justify-content: flex-end;
        margin-left: 0;
    }

}

/* --- Mobilní bottom navigace (pouze skutečné telefony < 480px) ------------- */
@media (pointer: coarse) and (max-width: 480px) {
    /* Desktop nav skrytý, nahrazen bottom nav */
    .nav-actions {
        display: none;
    }

    /* Mobilní bottom navigace — glassmorphism */
    .bottom-nav {
        display: flex;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        background: rgba(255, 255, 255, 0.95);
        backdrop-filter: blur(24px);
        -webkit-backdrop-filter: blur(24px);
        border-top: 1px solid var(--outline-variant);
        z-index: 100;
        padding-bottom: env(safe-area-inset-bottom);
    }

    html.dark .bottom-nav {
        background: rgba(0, 0, 0, 0.95);
        border-top-color: rgba(64, 72, 75, 0.5);
    }

    .bottom-nav-item {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 3px;
        padding: 10px 8px;
        background: none;
        border: none;
        color: var(--outline);
        font-size: var(--fs-2xs);
        font-family: var(--font-display);
        letter-spacing: 0.1em;
        text-transform: uppercase;
        cursor: pointer;
        transition: color var(--transition), transform var(--transition);
    }

    html.dark .bottom-nav-item {
        color: var(--outline);
    }

    .bottom-nav-item svg {
        width: 22px;
        height: 22px;
        flex-shrink: 0;
    }

    .bottom-nav-item.active {
        color: var(--primary);
        font-weight: 700;
        transform: translateY(-2px);
    }

    .bottom-nav-item:hover {
        color: var(--accent-glow);
    }

    .bottom-nav-item.danger:active {
        color: var(--error);
    }

    .main-content {
        padding: 12px 0 calc(70px + env(safe-area-inset-bottom));
    }
}

/* =============================================================================
   Costs — přehled nákladů AI kouče (admin záložka)
   ============================================================================= */

.costs-section {
    padding: 32px 0;
}

.costs-section .section-title {
    font-family: var(--font-display);
    font-size: var(--fs-3xl);
    margin-bottom: 24px;
}

.costs-subtitle {
    font-family: var(--font-body);
    font-size: var(--fs-xs);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-muted);
    margin: 28px 0 10px;
}

/* Přehledové řádky (klíč–hodnota) */
.costs-summary {
    margin-bottom: 8px;
}

.costs-summary-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 8px 0;
    font-size: var(--fs-md);
    border-bottom: 1px solid var(--surface-container-high);
}

.costs-summary-row span {
    color: var(--text-muted);
}

.costs-summary-row strong {
    font-weight: 500;
    font-variant-numeric: tabular-nums;
}

.costs-summary-row small {
    font-weight: 400;
    color: var(--text-muted);
    font-size: 0.8em;
}

/* Tabulky */
.costs-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--fs-base);
}

.costs-table th,
.costs-table td {
    padding: 7px 0;
    text-align: left;
    border-bottom: 1px solid var(--surface-container-high);
}

.costs-table th {
    font-size: var(--fs-xs);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted);
}

.costs-table td.num,
.costs-table th.num {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* Tabulka posledních interakcí — kompaktní font pro čas */
.costs-table--recent td:first-child {
    color: var(--text-muted);
    font-size: var(--fs-sm);
    white-space: nowrap;
}

/* =============================================================================
   Usage — anonymizovaná usage analytika (admin záložka, docs/44)
   ============================================================================= */

.usage-section {
    padding: 32px 0;
}

.usage-section .section-title {
    font-family: var(--font-display);
    font-size: var(--fs-3xl);
    margin-bottom: 24px;
}

.usage-controls {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    margin-bottom: 24px;
}

.usage-select,
.usage-custom input {
    padding: 7px 10px;
    font-size: var(--fs-base);
    font-family: var(--font-body);
    border: 1px solid var(--surface-container-high);
    border-radius: var(--radius);
    background: var(--surface);
    color: var(--text);
}

.usage-custom {
    display: inline-flex;
    gap: 8px;
}

/* Mřížka karet sekcí A1–A6 */
.usage-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 20px;
    align-items: start;
}

.usage-card {
    border: 1px solid var(--surface-container-high);
    border-radius: var(--radius-lg);
    padding: 4px 16px 16px;
    background: var(--surface);
}

.usage-card .costs-subtitle {
    margin-top: 16px;
}

.usage-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    padding: 6px 0;
    font-size: var(--fs-sm);
    border-bottom: 1px solid var(--surface-container-high);
}

.usage-row span {
    color: var(--text-muted);
}

.usage-row strong {
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.usage-note {
    font-size: var(--fs-xs);
    margin: 4px 0 8px;
}

.usage-graph-title {
    font-family: var(--font-body);
    font-size: var(--fs-xs);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-muted);
    margin: 16px 0 8px;
}

/* Vodorovné bary (WAU, distribuce, odpovědi kouči) */
.usage-bar-row {
    display: grid;
    grid-template-columns: 88px 1fr auto;
    gap: 8px;
    align-items: center;
    padding: 3px 0;
    font-size: var(--fs-xs);
}

.usage-bar-label {
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.usage-bar-track {
    height: 8px;
    background: var(--surface-container-high);
    border-radius: var(--radius);
    overflow: hidden;
}

.usage-bar-fill {
    height: 100%;
    background: var(--primary);
    border-radius: var(--radius);
}

.usage-bar-value {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* ============================================================ */
/* Profile admin — tabulka profilů uživatelů (wide layout)     */
/* ============================================================ */

/* Vlastní kontejner pro admin profily — širší než standardní wide (960px) */
.padmin-view.container--wide {
    max-width: 1260px;
}

/* Záhlaví stránky: nadpis + Obnovit */
.padmin-header-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 6px;
}

.padmin-legend {
    margin-bottom: 24px;
    font-size: var(--fs-sm);
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

/* Sekce pro každou firmu — bílá karta jako Report sekce */
.padmin-company-section {
    margin-bottom: 24px;
    background: var(--surface-container-lowest);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow);
    overflow: hidden;
}
[data-theme="dark"] .padmin-company-section {
    background: var(--surface-container-low);
}

.padmin-company-name {
    font-family: var(--font-display);
    font-size: var(--fs-xs);
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--on-surface-variant);
    padding: 16px 20px 12px;
}

.padmin-table-wrap {
    overflow-x: auto;
}

/* ── Základní tabulka (bez závislosti na costs-table) ────── */
.padmin-table {
    table-layout: fixed;
    width: 100%;
    border-collapse: collapse;
    font-size: var(--fs-sm);
}

.padmin-table col.pcol-id      { width: 36px; }
.padmin-table col.pcol-name    { width: 190px; }
.padmin-table col.pcol-manager { width: 120px; }
.padmin-table col.pcol-onb     { width: 52px; }
.padmin-table col.pcol-style   { width: 90px; }
.padmin-table col.pcol-prog    { width: 116px; }
.padmin-table col.pcol-next    { width: 138px; }
.padmin-table col.pcol-actions { width: auto; }

/* ── Záhlaví — vizuál jako Report (světle šedé bg) ──────── */
.padmin-table thead tr:first-child th {
    padding: 9px 10px 5px;
    border-bottom: none;
    font-size: var(--fs-xs);
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--on-surface-variant);
    background: var(--surface-container-low);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.padmin-table thead tr:nth-child(2) th {
    padding: 4px 10px 8px;
    font-size: var(--fs-xs);
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--on-surface-variant);
    background: var(--surface-container-low);
    border-bottom: 2px solid var(--surface-container-high);
    white-space: nowrap;
    text-align: center;
}

/* Skupinové záhlaví (colspan) — musí být centrované */
.padmin-table thead th.padmin-th-group {
    text-align: center;
    font-weight: 700;
    font-size: var(--fs-xs);
    letter-spacing: 0.07em;
    border-bottom: none;
}

.padmin-table thead th.padmin-th-user {
    border-left: 2px solid rgba(0, 102, 133, 0.30);
    color: var(--primary);
}

.padmin-table thead th.padmin-th-mgrdata {
    border-left: 2px solid rgba(100, 116, 139, 0.30);
    color: var(--text-muted);
}

/* Sub-header řádek — také centrovaný */
.padmin-table thead th.padmin-th-sub {
    text-align: center;
    font-size: var(--fs-xs);
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--text-muted);
}

/* ── Datové buňky ────────────────────────────────────────── */
.padmin-table td {
    padding: 8px 10px;
    border-bottom: 1px solid var(--surface-container-high);
    vertical-align: middle;
    font-size: var(--fs-sm);
    text-align: left;
}

.padmin-table tbody tr:last-child td {
    border-bottom: none;
}

.padmin-table tbody tr:hover td {
    background: var(--surface-container-low);
}

/* Jméno + email */
.padmin-name-main {
    font-weight: 500;
    line-height: 1.3;
}

.padmin-name-email {
    font-size: var(--fs-xs);
    color: var(--text-muted);
    line-height: 1.3;
}

.padmin-table .padmin-id {
    color: var(--text-muted);
    font-size: var(--fs-xs);
    text-align: center;
    font-variant-numeric: tabular-nums;
}

.padmin-table .padmin-manager {
    color: var(--text-muted);
    font-size: var(--fs-xs);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Buňky skupin — centrování dat */
.padmin-table td.padmin-user-col,
.padmin-table td.padmin-mgr-col {
    text-align: center;
}

/* Skupinové separátory */
.padmin-table thead th.padmin-group-start-th,
.padmin-table td.padmin-group-start {
    border-left: 2px solid rgba(0, 102, 133, 0.15);
}

.padmin-table thead th.padmin-group-start-th.padmin-mgr-col,
.padmin-table td.padmin-group-start.padmin-mgr-col {
    border-left: 2px solid rgba(64, 72, 75, 0.18);
}

/* Skupinové pásy — odstraněno; vizuální oddělení zajišťují jen border-left separátory */

/* Zatržítko / pomlčka */
.padmin-check {
    color: var(--primary);
    font-weight: 700;
    font-size: 15px;
}

.padmin-dash {
    color: var(--outline-variant);
}

/* Progress bar */
.padmin-progress {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    max-width: 100%;
}

.padmin-bar-wrap {
    width: 48px;
    flex-shrink: 0;
    height: 4px;
    background: var(--surface-container-high);
    border-radius: 3px;
    overflow: hidden;
}

.padmin-bar {
    height: 100%;
    background: var(--primary);
    border-radius: 3px;
    transition: width 0.4s ease;
}

.padmin-progress-label {
    font-size: 11px;
    color: var(--text-muted);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

/* Stavový indikátor kouče — malý kroužek */
.padmin-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
    vertical-align: middle;
    font-size: 0; /* skryjeme text obsahu */
}

.padmin-dot--active  { background: #22c55e; box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.20); }
.padmin-dot--waiting { background: #f59e0b; }
.padmin-dot--done    { background: var(--outline-variant); }
.padmin-dot--pending { background: transparent; border: 1.5px solid var(--outline-variant); }

/* Příští otázka */
.padmin-next {
    white-space: nowrap;
    font-size: var(--fs-sm);
}

.padmin-next-inner {
    display: flex;
    align-items: center;
    gap: 6px;
}

.padmin-now {
    color: #22c55e;
    font-weight: 600;
}

.padmin-done {
    color: var(--text-muted);
    font-size: var(--fs-xs);
}

/* ── Akční tlačítka ──────────────────────────────────────── */
.padmin-actions {
    display: flex;
    flex-wrap: nowrap;
    gap: 4px;
    align-items: center;
}

.padmin-toggle-btn,
.padmin-test-btn,
.padmin-reset-btn {
    font-size: 11px;
    font-weight: 500;
    padding: 3px 9px;
    border-radius: 20px;
    cursor: pointer;
    white-space: nowrap;
    line-height: 1.5;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.padmin-toggle-btn {
    border: none;
    background: var(--surface-container-low);
    color: var(--on-surface-variant);
}

.padmin-toggle-btn:hover {
    background: var(--surface-container-high);
    color: var(--primary);
}

.padmin-test-btn {
    border: none;
    background: rgba(0, 102, 133, 0.08);
    color: var(--primary);
}

.padmin-test-btn:hover {
    background: rgba(0, 102, 133, 0.14);
}

.padmin-reset-btn {
    border: none;
    background: rgba(0, 102, 133, 0.06);
    color: var(--primary);
}

.padmin-reset-btn:hover {
    background: var(--primary);
    color: var(--on-primary);
}

/* ── Test kouče — výsledek ───────────────────────────────── */
.padmin-testresult-row td {
    background: var(--surface-container-low);
    padding: 7px 14px !important;
    font-size: var(--fs-sm);
}

.padmin-test-ok    { color: #22c55e; font-weight: 600; }
.padmin-test-wait  { color: #f59e0b; }
.padmin-test-done  { color: var(--text-muted); }
.padmin-test-info  { color: var(--text-muted); }
.padmin-test-error { color: #ef4444; }

/* ── Detail řádek — behavioral odpovědi ─────────────────── */
.padmin-detail-row td {
    background: var(--surface-container-low);
    padding: 14px 18px !important;
}

.padmin-detail-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 28px;
}

.padmin-detail-title {
    font-size: 11px;
    font-weight: 700;
    margin-bottom: 8px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.07em;
}

.padmin-answers-table {
    width: 100%;
    font-size: var(--fs-sm);
    border-collapse: collapse;
}

.padmin-answers-table td {
    padding: 3px 10px 3px 0;
    border: none;
    background: transparent !important;
    text-align: left !important;
}

.padmin-answers-table .padmin-key {
    color: var(--text-muted);
    white-space: nowrap;
    width: 45%;
}

.padmin-answers-table .padmin-val {
    font-weight: 500;
}

/* ============================================================ */
/* Prompt debug sekce                                           */
/* ============================================================ */

.padmin-prompt-section {
    margin-top: 48px;
    padding-top: 32px;
}

.padmin-prompt-controls {
    display: flex;
    gap: 12px;
    align-items: center;
    margin-bottom: 20px;
}

.padmin-prompt-select {
    padding: 7px 12px;
    border: none;
    border-radius: var(--radius-lg);
    background: var(--surface-container-low);
    color: var(--text);
    font-size: var(--fs-sm);
    min-width: 280px;
}

.padmin-prompt-result {
    margin-top: 12px;
}

.padmin-prompt-header {
    font-size: var(--fs-sm);
    margin-bottom: 16px;
    padding-bottom: 10px;
}

.padmin-prompt-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px;
}

.padmin-prompt-pre {
    white-space: pre-wrap;
    font-family: var(--font-mono, monospace);
    font-size: 12px;
    line-height: 1.65;
    background: var(--surface-container-low);
    border-radius: var(--radius-lg);
    padding: 14px;
    overflow-x: auto;
    color: var(--text);
}

/* Touch zařízení — touch targets, viditelnost akcí, drag handle */
@media (pointer: coarse) {
    /* Drag handle */
    .task-drag-handle {
        opacity: 0.3;
        cursor: default;
        padding: 0 10px;
        margin-right: 0;
    }

    /* Touch targets — minimálně 44×44px */
    .task-icon-btn {
        width: 44px;
        height: 44px;
    }

    .filter-btn,
    .sort-btn {
        min-height: 44px;
        padding: 10px 14px;
    }

    /* step-checkbox: vizuál zůstává 15px, touch plocha rozšířena pseudo-elementem */
    .step-checkbox {
        position: relative;
    }

    .step-checkbox::before {
        content: '';
        position: absolute;
        inset: -14px;
    }
}

/* Tablet touch (≥601px, pointer: coarse) — task actions vždy viditelné, hover nefunguje */
@media (pointer: coarse) and (min-width: 601px) {
    .task-actions {
        opacity: 1;
    }
}

/* Touch: step-actions vždy viditelné (hover nefunguje) */
@media (pointer: coarse) {
    .step-actions {
        opacity: 1;
    }
}

/* --- Flatpickr — přizpůsobení designu + větší kalendář -------------------- */
.flatpickr-calendar {
    font-family: var(--font-body);
    font-size: var(--fs-md);
    border: none;
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-float);
    width: 336px;
}

/* Záhlaví — měsíc + šipky */
.flatpickr-months .flatpickr-month {
    height: 44px;
}
.flatpickr-current-month {
    font-size: var(--fs-lg);
    font-weight: 500;
    color: var(--text);
    padding-top: 10px;
}
.flatpickr-months .flatpickr-prev-month,
.flatpickr-months .flatpickr-next-month {
    padding: 10px 12px;
    color: var(--text-muted);
}
.flatpickr-months .flatpickr-prev-month:hover,
.flatpickr-months .flatpickr-next-month:hover {
    color: var(--primary);
}
.flatpickr-months .flatpickr-prev-month svg,
.flatpickr-months .flatpickr-next-month svg {
    fill: currentColor;
}

/* Názvy dnů v týdnu */
.flatpickr-weekdays {
    height: 36px;
}
span.flatpickr-weekday {
    font-size: var(--fs-sm);
    font-weight: 500;
    color: var(--text-muted);
}

/* Buňky dnů — větší, lépe se strefuje */
.flatpickr-day {
    width: 44px;
    height: 44px;
    max-width: 44px;
    line-height: 44px;
    font-size: var(--fs-md);
    border-radius: var(--radius-lg);
    color: var(--text);
}
.flatpickr-day:hover {
    background: var(--surface-container-low);
    border-color: transparent;
}
.flatpickr-day.selected,
.flatpickr-day.selected:hover {
    background: var(--primary);
    border-color: var(--primary);
    color: var(--on-primary);
    font-weight: 600;
}
.flatpickr-day.today {
    border-color: var(--primary);
    font-weight: 600;
}
.flatpickr-day.today:hover {
    background: var(--surface-container-low);
    color: var(--text);
}
.flatpickr-day.flatpickr-disabled,
.flatpickr-day.prevMonthDay,
.flatpickr-day.nextMonthDay {
    color: var(--text-light);
}

/* Oddělení záhlaví od mřížky */
.flatpickr-innerContainer {
    padding: 4px 0 8px;
}

/* Tlačítko "Dnes" (pokud povoleno) */
.flatpickr-day.today.selected {
    border-color: var(--accent);
    background: var(--accent);
    color: #fff;
}

/* ==========================================================
 * Coach — progresivní otázky (tile výběr v banneru)
 * ========================================================== */

.coach-question-tiles {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 10px 0 4px;
}

.coach-question-tile {
    position: relative;
    flex: 1 1 calc(50% - 4px);
    min-width: 100px;
    padding: 8px 10px;
    background: var(--surface-container-low);
    border: none;
    border-radius: var(--radius-lg);
    font-size: var(--fs-base);
    cursor: pointer;
    text-align: center;
    transition: background 0.15s;
    color: var(--text);
}

.coach-question-tile:hover {
    background: var(--surface-container-high);
}

.coach-question-tile--selected {
    background: rgba(0, 102, 133, 0.12);
    color: var(--primary);
    font-weight: 600;
    box-shadow: inset 0 0 0 2px var(--primary-container);
}

.coach-question-tile:disabled {
    opacity: 0.5;
    cursor: default;
}

/* Badge s pořadím výběru (multi-select) */
.coach-question-tile-badge {
    position: absolute;
    top: 4px;
    right: 6px;
    min-width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--primary);
    color: var(--on-primary);
    font-size: var(--fs-2xs);
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.12s;
    pointer-events: none;
}

.coach-question-tile-badge:not(:empty) {
    opacity: 1;
}

/* Stav utlumení — pro ostatní dlaždice pokud je vybráno "Netýká se mě" */
.coach-question-tile--muted {
    opacity: 0.35;
    pointer-events: none;
}

/* Popis / nápověda pod otázkou */
.coach-question-desc {
    font-size: var(--fs-sm);
    color: var(--text-muted);
    margin: -4px 0 8px;
    line-height: 1.45;
}

.coach-question-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 6px;
}

/* ==========================================================
 * Onboarding wizard — modal s tile otázkami
 * ========================================================== */

.wizard-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 900;
    padding: 16px;
}

.wizard-card {
    background: var(--surface-container-lowest);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-float);
    max-width: 440px;
    width: 100%;
    padding: 28px 24px 20px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    border-top: 2px solid var(--primary);
}

.wizard-header {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.wizard-title {
    font-size: var(--fs-xl);
    font-weight: 700;
    color: var(--text);
}

.wizard-subtitle {
    font-size: var(--fs-base);
    color: var(--text-muted);
}

.wizard-progress {
    font-size: var(--fs-sm);
    color: var(--text-light);
    margin-bottom: 6px;
}

.wizard-question {
    font-size: var(--fs-lg);
    font-weight: 600;
    color: var(--text);
    margin-bottom: 8px;
}

.wizard-tiles {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.wizard-tile {
    position: relative;
    padding: 11px 14px;
    background: var(--surface-container-low);
    border: none;
    border-radius: var(--radius-lg);
    font-size: var(--fs-md);
    cursor: pointer;
    text-align: left;
    transition: background 0.15s;
    color: var(--text);
}

.wizard-tile:hover {
    background: var(--surface-container-high);
}

.wizard-tile--selected {
    background: rgba(0, 102, 133, 0.1);
    color: var(--primary);
    font-weight: 600;
    box-shadow: inset 0 0 0 2px var(--primary-container);
}

/* Badge s pořadím výběru (multi-select) */
.wizard-tile-badge {
    position: absolute;
    top: 6px;
    right: 8px;
    min-width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--primary);
    color: var(--on-primary);
    font-size: var(--fs-2xs);
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.12s;
    pointer-events: none;
}

.wizard-tile-badge:not(:empty) {
    opacity: 1;
}

/* Stav utlumení — pro ostatní dlaždice pokud je vybráno "Netýká se mě" */
.wizard-tile--muted {
    opacity: 0.35;
    pointer-events: none;
}

/* "Jiné..." tile s textovým inputem — sdíleno pro wizard i coach banner */
.other-input {
    display: none;
    width: 100%;
    margin-top: 8px;
    padding: 6px 8px;
    font-size: var(--fs-base);
    border: none;
    border-left: 2px solid var(--primary-container);
    border-radius: var(--radius-lg);
    background: var(--surface-container);
    color: var(--text);
    box-sizing: border-box;
}
.other-input.visible {
    display: block;
}
.other-input:focus {
    outline: none;
    border-left-color: var(--primary);
    background: var(--surface-container-lowest);
}
.other-input-count {
    display: none;
    font-size: var(--fs-2xs);
    color: var(--text-muted);
    text-align: right;
    margin-top: 2px;
}
.wizard-tile--selected .other-input-count,
.coach-question-tile--selected .other-input-count {
    display: block;
}

/* Popis / nápověda pod otázkou */
.wizard-question-desc {
    font-size: var(--fs-sm);
    color: var(--text-muted);
    margin: -4px 0 8px;
    line-height: 1.45;
}

.wizard-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 4px;
}

.wizard-body {
    display: flex;
    flex-direction: column;
}

/* Shrnutí vyplněného manažerského profilu — styl inspirovaný reportem */
.profile-summary-card {
    background: var(--surface-container-lowest);
    border-radius: var(--radius-xl);
    padding: 20px 24px;
    box-shadow: var(--shadow);
    margin-top: 16px;
}

.profile-summary-card-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    padding-bottom: 12px;
    margin-bottom: 16px;
    border-bottom: 2px solid var(--primary);
}

.profile-summary-card-title {
    font-size: var(--fs-xl);
    font-weight: 700;
    color: var(--text);
}

.profile-summary-card-meta {
    font-size: var(--fs-xs);
    color: var(--text-light);
    white-space: nowrap;
}

.profile-summary-section-label {
    font-size: var(--fs-xs);
    font-weight: 600;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--text-light);
    margin: 16px 0 8px;
}

.profile-summary-section:first-child .profile-summary-section-label {
    margin-top: 0;
}

.profile-summary-row {
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 9px 0;
    border-bottom: 1px solid var(--surface-container-high);
}

.profile-summary-row:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.profile-summary-q {
    font-size: var(--fs-sm);
    color: var(--text-muted);
    line-height: 1.4;
}

.profile-summary-a {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

.profile-summary-tag {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 12px;
    font-size: var(--fs-sm);
    background: var(--surface-container-low);
    color: var(--text);
}

.profile-summary-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 20px;
}

.wizard-thanks {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 32px 8px;
    text-align: center;
    cursor: pointer;
}

.wizard-thanks-title {
    font-size: var(--fs-3xl);
    font-weight: 700;
    color: var(--text);
}

.wizard-thanks-text {
    font-size: var(--fs-md);
    color: var(--text-muted);
    line-height: 1.5;
}

@media (max-width: 600px) {
    .wizard-card {
        padding: 20px 16px 16px;
        border-radius: 10px;
    }
}

/* =============================================================================
   Manager Console
   ============================================================================= */

/* --- Tlačítko menší varianty ------------------------------------------------ */
.btn-sm {
    padding: 6px 12px;
    font-size: var(--fs-sm);
}

/* --- Seznam členů týmu ------------------------------------------------------ */
.manager-grid {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 16px;
}

/* --- Řádek člena týmu ------------------------------------------------------- */
.manager-card {
    border-radius: var(--radius-lg);
    padding: 12px 16px;
    background: var(--surface-container-lowest);
    box-shadow: var(--shadow);
}

.manager-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.manager-card-name {
    font-weight: 600;
    font-size: var(--fs-lg);
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
    min-width: 0;
}

.manager-card-session {
    font-size: var(--fs-sm);
    color: var(--text-muted);
    margin-top: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.manager-card-session--inactive {
    color: var(--text-light);
    font-style: italic;
}

.manager-card-counts {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
}

/* --- Badge počtů ------------------------------------------------------------ */
.manager-badge {
    font-family: var(--font-display);
    font-size: var(--fs-2xs);
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 2px 8px;
    border-radius: 10px;
    background: var(--surface-container);
    color: var(--on-surface-variant);
    white-space: nowrap;
}

.manager-badge--overdue {
    background: rgba(192, 57, 43, 0.12);
    color: var(--overdue);
}

/* Vrácený úkol od podřízeného — oranžový badge */
.manager-badge--pending {
    background: rgba(221, 132, 0, 0.18);
    color: var(--mid);
    border: 1px solid rgba(221, 132, 0, 0.35);
    font-size: var(--fs-xs);
    padding: 2px 9px;
}

/* Nové nepřečtené notifikace — červený badge v kartě podřízeného */
.manager-badge--notifications {
    background: rgba(192, 57, 43, 0.10);
    color: var(--overdue);
    border: 1px solid rgba(192, 57, 43, 0.28);
    font-size: var(--fs-xs);
    padding: 2px 9px;
}

/* Badge v nav odkazu "Tým" */
.nav-notification-badge {
    display: inline;
    background: transparent;
    border: none;
    color: var(--overdue);
    font-size: 0.75em;
    font-weight: 700;
    line-height: 1;
    margin-left: 1px;
    vertical-align: super;
    padding: 0;
}

/* Badge na bottom nav ikoně */
.bnav-notification-badge {
    position: absolute;
    top: -4px;
    right: -8px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 8px;
    background: rgba(192, 57, 43, 0.10);
    color: var(--overdue);
    border: 1px solid rgba(192, 57, 43, 0.28);
    font-size: 10px;
    font-weight: 700;
    line-height: 14px;
    pointer-events: none;
}

/* Modrá tečka u task itemu s novou událostí */
.task-new-event-dot {
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--primary);
    flex-shrink: 0;
    margin-left: 4px;
    vertical-align: middle;
}

/* --- Akce v řádku ----------------------------------------------------------- */
.manager-card-actions {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
}

.manager-card-actions .btn {
    padding: 6px 12px;
    font-size: var(--fs-base);
    white-space: nowrap;
}

/* ========================================================================== */
/* Tým — Fáze 2: zhuštěná hlavička + accordion Lidé + attention karty          */
/* ========================================================================== */

/* --- Zhuštěná hlavička: nadpis „Tým" + přepínač pohledů na jednom řádku ------ */
.team-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 20px;
}

.team-head .team-title {
    margin: 0;
}

.team-lens-switcher {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
}

/* Přepínač pohledů = segmentový control: šedý rámeček + aktivní segment modře vyplněný */
.team-lens-group {
    display: flex;
    gap: 2px;
    background: var(--surface-container);
    border-radius: var(--radius-lg);
    padding: 3px;
}
.team-lens-btn {
    padding: 7px 16px;
    border-radius: 4px;
    transition: background var(--transition), color var(--transition);
}
.team-lens-btn:hover {
    color: var(--text);
}
.team-lens-btn.active,
.team-lens-btn.active:hover {
    background: var(--primary);
    color: var(--on-primary);
    font-weight: 600;
}

/* --- Attention karty -------------------------------------------------------- */
.attn-wrap {
    margin: 0 0 16px;
}

.attn-caption {
    font-family: var(--font-display);
    font-size: var(--fs-2xs);
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 8px;
}

.attn-cards {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
}

.attn-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    padding: 10px 14px;
    border: 1px solid var(--border);
    border-left: 3px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--surface-container-lowest);
    box-shadow: var(--shadow);
    cursor: pointer;
    text-align: left;
    transition: background 0.12s ease, border-color 0.12s ease, transform 0.06s ease;
}

.attn-card:hover { background: var(--bg-hover); }
.attn-card:active { transform: translateY(1px); }

.attn-card-count {
    font-family: var(--font-display);
    font-size: var(--fs-xl);
    font-weight: 700;
    line-height: 1.1;
}

.attn-card-label {
    font-size: var(--fs-xs);
    color: var(--text-muted);
}

/* Barevné varianty (levý okraj + číslo) */
.attn-card--red   { border-left-color: var(--overdue); }
.attn-card--red   .attn-card-count { color: var(--overdue); }
.attn-card--blue  { border-left-color: var(--primary); }
.attn-card--blue  .attn-card-count { color: var(--primary); }
.attn-card--amber { border-left-color: var(--mid); }
.attn-card--amber .attn-card-count { color: var(--mid); }

/* Nulová karta — ztlumená, ale stále klikací (vrací pozitivní hlášku) */
.attn-card.zero {
    opacity: 0.55;
    border-left-color: var(--border);
}
.attn-card.zero .attn-card-count { color: var(--text-muted); }

/* Aktivní (zvolený) filtr */
.attn-card.active {
    background: var(--bg-hover);
    border-color: var(--primary);
    box-shadow: 0 0 0 1px var(--primary);
}

/* Pruh „Zobrazeno jen: X ✕ Zrušit filtr" */
.attn-filterbar {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 10px;
    padding: 6px 10px;
    border-radius: var(--radius);
    background: var(--surface-container-low);
}

/* display:flex výše přebíjí atribut [hidden] → explicitně skryj sbalený pruh */
.attn-filterbar[hidden] {
    display: none;
}

.attn-filtered-label {
    font-size: var(--fs-sm);
    color: var(--text-muted);
}

/* --- Accordion Lidé --------------------------------------------------------- */
.manager-people {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.person-row {
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--surface-container-lowest);
    box-shadow: var(--shadow);
    overflow: hidden;
}

.person-row.open {
    border-color: var(--primary);
    box-shadow: 0 0 0 1px var(--primary);
}

.person-head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    cursor: pointer;
    flex-wrap: wrap;
}

.person-head:hover { background: var(--bg-hover); }

/* Otevřená karta: tónovaný pruh hlavičky — jasná kotva „čí úkoly to jsou" */
.person-row.open .person-head {
    background: color-mix(in srgb, var(--primary) 6%, transparent);
    border-bottom: 1px solid color-mix(in srgb, var(--primary) 28%, transparent);
}

.person-chevron {
    color: var(--text-muted);
    transition: transform 0.15s ease;
    flex-shrink: 0;
}

.person-row.open .person-chevron {
    transform: rotate(90deg);
}

/* Avatar s iniciálami — posiluje identitu osoby jako nadpisu sekce */
.person-avatar {
    flex-shrink: 0;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-display);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.02em;
    background: color-mix(in srgb, var(--primary) 14%, transparent);
    color: var(--primary);
}

.person-row.open .person-avatar {
    background: var(--primary);
    color: var(--on-primary);
}

.person-name {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 1.0625rem;
    letter-spacing: 0.005em;
    min-width: 0;
}

.person-status {
    font-size: var(--fs-sm);
    color: var(--text-muted);
    white-space: nowrap;
    flex-shrink: 0;
}

/* Dlouhý titul aktivní session ořízneme; krátké „Neaktivní" se nesmí ořezávat
   (italický glyf jinak přesahuje přes overflow:hidden). */
.person-status--active {
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 240px;
}

.person-status--inactive {
    color: var(--text-light);
    font-style: italic;
}

.person-mini {
    font-size: var(--fs-sm);
    color: var(--text-muted);
    white-space: nowrap;
}

.person-badges {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-left: auto;
    flex-wrap: wrap;
}

.person-assign-btn {
    flex-shrink: 0;
    white-space: nowrap;
}

/* Vrácený úkol od podřízeného — oranžový badge (Fáze 2 split z pending) */
.manager-badge--returned {
    background: rgba(221, 132, 0, 0.18);
    color: var(--mid);
    border: 1px solid rgba(221, 132, 0, 0.35);
    font-size: var(--fs-xs);
    padding: 2px 9px;
}

.person-body {
    padding: 0 16px 16px;
    border-top: 1px solid var(--border);
}

.person-actions {
    display: flex;
    gap: 8px;
    margin-top: 16px;
    padding-top: 12px;
    border-top: 1px solid var(--border);
}

/* Responzivně: karty stackovat pod ~900 px */
@media (max-width: 900px) {
    .attn-cards {
        grid-template-columns: repeat(2, 1fr);
    }
    .person-head {
        gap: 8px;
    }
    .person-badges {
        margin-left: 0;
        width: 100%;
    }
    .person-assign-btn {
        margin-left: auto;
    }
}

/* --- Záložky navigace v pohledu podřízeného ---------------------------------- */
.manager-sub-tabs {
    display: flex;
    gap: 8px;
    margin: 12px 0 0;
    padding-bottom: 12px;
}

/* --- Tlačítko akce nad listem úkolů ----------------------------------------- */
.manager-tasks-topbar {
    margin: 16px 0 12px;
}

/* --- Badge "Přiděleno" v task-row (pohled vedoucího) -------------------------- */
/* Hranatý outline styl sladěný se systémem (task-due, steps-count, master-badge) */
.manager-assigned-badge {
    font-family: var(--font-display);
    font-size: var(--fs-2xs);
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 2px 8px;
    border-radius: var(--radius);
    background: transparent;
    color: var(--text-muted);
    border: 1px solid color-mix(in srgb, var(--outline) 45%, transparent);
    margin-left: 6px;
    white-space: nowrap;
    flex-shrink: 0;
}

/* --- Záhlaví skupiny — přiřazené úkoly (accent barva) ----------------------- */
.task-group-header--assigned .task-group-dot {
    background: var(--primary);
}

/* --- Přiřazený task-item — levý border pro vizuální odlišení ---------------- */
.task-item--assigned {
    border-left: 3px solid var(--primary);
}

/* --- Sekce úkolů vedoucího: Čeká na přijetí / Aktivní úkoly ----------------- */
.task-section {
    margin-bottom: 12px;
}

.task-section-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 0 4px;
}

.task-section-title {
    font-family: var(--font-display);
    font-size: var(--fs-2xs);
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}

.task-section-count {
    font-family: var(--font-display);
    font-size: var(--fs-2xs);
    font-weight: 600;
    padding: 1px 6px;
    border-radius: 10px;
}

.task-section-divider {
    flex: 1;
    height: 1px;
    background: var(--outline-variant);
    opacity: 0.5;
}

.task-section--pending .task-section-title { color: var(--mid); }
.task-section--pending .task-section-count {
    background: color-mix(in srgb, var(--mid) 14%, transparent);
    color: var(--mid);
}

.task-item--pending {
    border-left: 3px solid var(--mid);
}

.task-section--active .task-section-title { color: var(--text-muted); }
.task-section--active .task-section-count {
    background: rgba(0, 102, 133, 0.08);
    color: var(--text-muted);
}

/* === Tým / Lidé — výraznější nadpisy sekcí v kartě osoby („V1 Pruh") =========
   Sjednocuje dva dosavadní systémy hlaviček (.task-group-header--returned
   + .task-section-header) do jednoho vizuálu „police": barevný levý akcent
   + jemná výplň + plná pilulka s počtem. SCOPOVÁNO pod .person-body, aby se
   nezměnil hlavní seznam úkolů (tasks.js) ani Přehled (overview-lens.js),
   které sdílí třídu .task-group-header. */
.person-body .task-section-header,
.person-body .task-group-header--returned {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 20px 0 10px;
    padding: 8px 12px;
    border-left: 3px solid var(--grp, var(--outline));
    border-radius: var(--radius-lg);
    background: color-mix(in srgb, var(--grp, var(--outline)) 9%, transparent);
    font-family: var(--font-display);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--grp, var(--outline));
    pointer-events: auto;
}

/* první sekce v těle karty bez velké horní mezery */
.person-body #mgr-normal-tasks > .task-section:first-child .task-section-header,
.person-body .task-list > .task-group-header--returned:first-child { margin-top: 4px; }

/* semantická barva police */
.person-body .task-section--pending .task-section-header { --grp: var(--primary); }
.person-body .task-section--active  .task-section-header { --grp: var(--secondary); }
.person-body .task-group-header--returned                { --grp: var(--mid); }

/* titulek u .task-section (span) zdědí styl police */
.person-body .task-section-header .task-section-title {
    font: inherit;
    letter-spacing: inherit;
    text-transform: inherit;
    color: inherit;
}

/* prvky, které police nahrazuje, skryjeme */
.person-body .task-section-header .task-section-divider,
.person-body .task-group-header--returned .task-group-dot { display: none; }

/* počet = plná pilulka v barvě police */
.person-body .task-section-header .task-section-count,
.person-body .task-group-header--returned .task-group-count {
    margin-left: auto;
    font-family: var(--font-display);
    font-size: 11px;
    font-weight: 700;
    padding: 1px 8px;
    border-radius: 10px;
    background: var(--grp, var(--outline));
    color: var(--surface);
    opacity: 1;
}

/* Akce v přiřazeném tasku jsou primární CTA — vždy viditelné */
.task-item--assigned .task-actions {
    opacity: 1;
}

/* Titulek přiřazeného úkolu se zalomí místo zkrácení */
.task-item--assigned .task-title {
    white-space: normal;
    overflow: visible;
    text-overflow: unset;
}

/* --- Row varianty: přiřazený task nemá expand chování ----------------------- */
.task-row--assigned {
    cursor: default;
}

/* --- Wrapper akcí (přijmout/vrátit/zprávy/?) — desktop inline, mobil vlastní řádek --- */
.task-row-actions {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
    margin-left: auto;     /* odsadit akce doprava, název dostane prostor */
    padding-left: 14px;    /* garantovaná mezera mezi badge „Po termínu" a tlačítky */
}

/* Desktop: tlačítka accept/return jsou textová jako dosud — ikonu skrýt
   (na mobilu se to obrátí: ikona se zobrazí, text skryje — viz @media níže) */
.task-row-actions .btn-primary svg,
.task-row-actions .btn-ghost svg { display: none; }

/* --- Meta-řádek pod task-row: badge + kategorie ---------------------------- */
.task-assigned-meta {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0 12px 6px 40px;
    flex-wrap: wrap;
}

/* --- Badge "Přidělil vedoucí" jako ghost chip -------------------------------- */
.task-assigned-badge {
    font-family: var(--font-display);
    font-size: var(--fs-2xs);
    font-weight: 600;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    padding: 2px 8px;
    border-radius: var(--radius);
    background: transparent;
    border: 1px solid color-mix(in srgb, var(--primary) 50%, transparent);
    color: var(--primary);
    white-space: nowrap;
    flex-shrink: 0;
}

/* --- Formulář pro vrácení úkolu (inline, pod task-row) --------------------- */
.assigned-return-form {
    padding: 8px 12px 10px 40px;
    background: var(--surface-container-low);
    border-top: 1px solid var(--border);
}

.assigned-return-label {
    font-size: var(--fs-xs);
    color: var(--text-muted);
    margin: 0 0 6px 0;
}

.assigned-return-form textarea {
    width: 100%;
    font-family: var(--font-body);
    font-size: var(--fs-base);
    color: var(--text);
    background: var(--surface-container);
    border: none;
    border-left: 2px solid transparent;
    border-radius: var(--radius-lg);
    padding: 8px 10px;
    outline: none;
    resize: vertical;
    min-height: 58px;
    transition: background var(--transition), border-color var(--transition);
}

.assigned-return-form textarea:focus {
    background: var(--surface-container-lowest);
    border-left-color: var(--primary);
}

.assigned-return-actions {
    display: flex;
    gap: 8px;
    margin-top: 10px;
    align-items: center;
}

/* --- Note-thread uvnitř task-detail (přijatý přidělený úkol) --------------- */
.note-thread--task-detail {
    padding: 0;
}

/* --- Na mobilu: assigned-tasks akce viditelné (override globálního display:none) */
@media (max-width: 600px) {
    .task-item--assigned .task-actions {
        display: flex;
    }
    .task-assigned-meta {
        padding-left: 12px;
    }
    .assigned-return-form {
        padding-left: 12px;
    }

    /* Přiřazený/vrácený úkol: akce se zalomí na vlastní řádek pod název */
    .task-row--assigned,
    .task-item--returned .task-row {
        flex-wrap: wrap;
        align-items: center;
        column-gap: 6px;
        row-gap: 8px;
    }
    /* Pevná výška .task-row{height:52px} brání růstu při zalomení → překryv
       s meta řádkem. U přiřazených/vrácených povolit růst řádku. */
    .task-item--assigned .task-row,
    .task-item--returned .task-row {
        height: auto;
        min-height: 52px;
    }
    .task-item--assigned .task-title,
    .task-item--returned .task-title {
        flex: 1 1 auto;      /* zabere zbytek 1. řádku, badge zůstane vedle */
        min-width: 0;
    }
    .task-row-actions {
        flex-basis: 100%;    /* celý wrapper na 2. řádek */
        margin-left: 0;
        padding-left: 0;     /* na mobilu akce zarovnané pod název, bez odsazení */
        justify-content: flex-start;
        flex-wrap: wrap;
    }
    /* Mobil: accept/return jako ikona (text skryt), čtvercový touch target */
    .task-row-actions .btn-primary svg,
    .task-row-actions .btn-ghost svg {
        display: inline-block;
        width: 17px;
        height: 17px;
    }
    .task-row-actions .btn-primary .btn-label,
    .task-row-actions .btn-ghost .btn-label {
        display: none;
    }
    .task-row-actions .btn-primary.btn-sm,
    .task-row-actions .btn-ghost.btn-sm {
        padding: 8px;
        min-width: 38px;
        justify-content: center;
    }
}

/* --- Vrácený úkol — amber barva (čeká na reakci vedoucího) ------------------ */
.task-group-header--returned {
    border-left: 2px solid var(--mid);
    padding-left: 8px;
}

.task-group-header--returned .task-group-label {
    color: var(--mid);
}

.task-group-header--returned .task-group-dot {
    background: var(--mid);
}

.task-item--returned {
    border-left: 3px solid var(--mid);
}

/* --- Returned tasks: tlačítka vždy viditelná (stejně jako u assigned) ------ */
.task-item--returned .task-actions {
    opacity: 1;
    pointer-events: auto;
}

.task-returned-label {
    font-size: var(--fs-xs);
    color: var(--mid);
    white-space: nowrap;
    flex-shrink: 0;
    margin-right: auto;
}

/* --- Poznámka od podřízeného — jantarový pruh ------------------------------- */
.returned-note {
    padding: 6px 12px 8px 37px;
    font-size: var(--fs-sm);
    color: var(--on-surface-variant);
    background: var(--surface-container-low);
    font-style: italic;
    border-left: 3px solid var(--mid);
}

/* --- Poznámka od vedoucího — modrý pruh ------------------------------------- */
.assignment-note {
    padding: 6px 12px 8px 37px;
    font-size: var(--fs-sm);
    color: var(--on-surface-variant);
    background: var(--surface-container-low);
    font-style: italic;
    border-left: 3px solid var(--primary);
}

.assignment-note--detail {
    padding-left: 0;
    background: transparent;
    margin-bottom: 8px;
    border-left: none;
}

/* Popisek: barva odpovídá roli autora poznámky */
.returned-note-label {
    font-weight: 600;
    font-style: normal;
    margin-right: 4px;
    color: var(--mid);
}

.assignment-note .returned-note-label {
    color: var(--primary);
}

/* --- Notes thread ----------------------------------------------------------- */
.note-thread {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 8px 12px 8px 40px;
}
.note-thread--collapsible {
    display: none;
}
.note-thread--collapsible.is-open {
    display: flex;
}

/* Toggle button for collapsible note threads */
.btn-note-toggle {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: var(--fs-sm);
    color: var(--text-muted);
    background: none;
    border: none;
    cursor: pointer;
    padding: 2px 6px;
    border-radius: var(--radius);
    flex-shrink: 0;
    line-height: 1;
}
.btn-note-toggle:hover {
    color: var(--text);
    background: var(--surface-container);
}
.btn-note-toggle.is-open {
    color: var(--primary);
}
.btn-note-toggle svg {
    width: 12px;
    height: 12px;
    transition: transform 0.15s ease;
}
.btn-note-toggle.is-open svg {
    transform: rotate(180deg);
}

/* Varianta A — accordion řádek v .field kontextu */
.btn-note-toggle.field-toggle {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 12px;
    background: var(--surface-container-low);
    border: 1px solid var(--surface-container-highest);
    border-radius: var(--radius-lg);
    color: var(--text-muted);
    user-select: none;
}
.btn-note-toggle.field-toggle:hover {
    background: var(--surface-container);
    border-color: var(--on-surface-variant, #787874);
    color: var(--text);
}
.btn-note-toggle.field-toggle.is-open {
    border-left: 2px solid var(--primary);
    color: var(--text);
}
.btn-note-toggle.field-toggle svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.note-bubble {
    display: flex;
    flex-direction: column;
    max-width: 88%;
}

.note-bubble--mine  { align-self: flex-end; }
.note-bubble--other { align-self: flex-start; }

.note-bubble-meta {
    font-size: 0.7rem;
    color: var(--text-muted);
    margin-bottom: 2px;
}

.note-bubble--mine .note-bubble-meta  { text-align: right; color: var(--primary); }
.note-bubble--other .note-bubble-meta { color: var(--mid); }

.note-bubble-body {
    padding: 6px 10px;
    border-radius: 4px 12px 12px 4px;
    font-size: var(--fs-sm);
    line-height: 1.4;
    word-break: break-word;
}

.note-bubble--mine .note-bubble-body {
    background: var(--primary-container);
    color: var(--on-surface);
    border-radius: 12px 4px 12px 12px;
}

.note-bubble--other .note-bubble-body {
    background: var(--surface-container-high);
    color: var(--on-surface);
}

.note-thread-input {
    display: flex;
    gap: 6px;
    padding: 6px 12px 8px 40px;
    align-items: flex-end;
}

.note-thread-input textarea {
    flex: 1;
    resize: none;
    font-size: var(--fs-sm);
    padding: 6px 8px;
    border-radius: var(--radius);
    border: 1px solid var(--border);
    background: var(--surface-container-lowest);
    color: var(--text);
    line-height: 1.4;
    min-height: 34px;
    max-height: 80px;
}

.note-thread-input textarea:focus {
    outline: none;
    border-color: var(--border-focus);
}

.note-thread-input .btn-send {
    flex-shrink: 0;
    padding: 6px 12px;
    font-size: var(--fs-sm);
    align-self: flex-end;
}

/* --- Na mobilu: returned-tasks akce vždy viditelné (bez hover) ------------- */
@media (max-width: 600px) {
    .task-item--returned .task-actions {
        position: static;
        transform: none;
        background: none;
        padding-left: 0;
        pointer-events: auto;
        opacity: 1;
        display: flex;
    }
}

/* --- Expandovatelné read-only řádky úkolů (manažerský pohled) -------------- */
.task-row--expandable {
    cursor: pointer;
    user-select: none;
}

/* Rotace SVG chevronu při rozbalení read-only řádku (pohled vedoucího na podřízeného) */
.task-item--expanded > .task-row--expandable .task-expand-icon {
    transform: rotate(180deg);
    color: var(--text-muted);
}

.task-detail-panel {
    padding: 8px 12px 10px 40px;
    background: var(--surface-container-low);
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.task-detail-row {
    display: flex;
    align-items: baseline;
    gap: 6px;
    font-size: var(--fs-sm);
}

.task-detail-label {
    font-weight: 600;
    color: var(--text-muted);
}

.task-detail-key {
    color: var(--text-light);
    white-space: nowrap;
}

.task-detail-val {
    color: var(--text);
}

/* ===================================================================
   Company Console — org strom + formulář nové firmy
   =================================================================== */

/* Hlavička detailu firmy */
.org-detail-header {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 20px;
}

/* Nadpis sekce v detailu (Členové, Pozvánky) */
.org-section-title {
    font-size: var(--fs-md);
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin: 0 0 12px;
}

/* Badge: hierarchie vs single */
.org-badge--hierarchy {
    background: var(--accent);
}
.org-badge--single {
    background: #888;
}
.org-feature-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid var(--outline-variant, rgba(0,0,0,.1));
    margin-bottom: 4px;
}
.org-feature-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    cursor: pointer;
    flex: 1;
}

/* ── Org strom ──────────────────────────────────────────────────────────── */

/*
 * Connector geometry (avatar 38px, row padding 8px top/bottom → row height 54px)
 * Level  padding-left  avatar-center-x   trunk-x
 *   0       14px           33px           33px
 *   1       42px           61px           61px
 *   2       70px           89px           89px
 *   3       98px          117px              —
 *
 * Horizontal arm width: 9px per level
 * Trunk bottom offset:  27px (= row-height/2 = 54/2)
 * Connector color:      outline at 28 % opacity
 */
:root    { --org-connector: rgba(113, 120, 123, 0.28); }
html.dark { --org-connector: rgba(140, 146, 150, 0.25); }

.org-tree {
    border-radius: var(--radius-xl);
    background: var(--surface-container-lowest);
    box-shadow: var(--shadow);
    padding: 8px 0;
    margin-bottom: 8px;
    overflow: visible;
}

.org-node { }

/* Řádek uzlu — position:relative nutné pro pseudo-element konektory */
.org-node-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 14px;
    position: relative;
    transition: background var(--transition, 150ms ease);
}
.org-node-row:hover { background: var(--bg-hover); }
.org-node-row--inactive { opacity: 0.45; }

/* Info sekce */
.org-node-info {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
    min-width: 0;
}

/* Textový blok vedle avataru (jméno + meta) */
.org-node-text {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
    flex: 1;
}

.org-node-name {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: var(--fs-md);
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}
.org-node-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.org-node-email {
    font-size: var(--fs-xs);
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.org-node-title {
    font-size: var(--fs-xs);
    color: var(--outline);
    white-space: nowrap;
}
.org-node-reports {
    font-size: var(--fs-xs);
    color: var(--primary);
    font-family: var(--font-display);
    font-weight: 500;
    white-space: nowrap;
}

/* Akce: ⋯ tlačítko + dropdown */
.org-node-actions {
    position: relative;
    flex-shrink: 0;
}
.org-menu-btn {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 20px;
    color: var(--text-muted);
    padding: 2px 8px;
    border-radius: var(--radius-sm, 4px);
    line-height: 1;
    transition: background 0.15s, color 0.15s;
}
.org-menu-btn:hover {
    background: var(--bg-hover);
    color: var(--text);
}
.org-menu-dropdown {
    display: none;
    position: absolute;
    right: 0;
    top: calc(100% + 4px);
    z-index: 200;
    background: var(--surface-container-lowest);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-float);
    padding: 10px 12px;
    min-width: 280px;
    gap: 8px;
    flex-direction: column;
}
.org-menu-dropdown--open { display: flex; }
.org-menu-manager-row { display: flex; align-items: center; gap: 6px; }
.org-menu-btns-row    { display: flex; align-items: center; gap: 6px; }
.org-manager-select {
    font-size: var(--fs-sm);
    padding: 4px 6px;
    border: none;
    border-radius: var(--radius-lg);
    background: var(--surface-container-low);
    color: var(--text);
    flex: 1;
}

/* Odsazení dle hloubky */
.org-node--level-0 > .org-node-row { padding-left: 14px; }
.org-node--level-1 > .org-node-row { padding-left: 42px; }
.org-node--level-2 > .org-node-row { padding-left: 70px; }
.org-node--level-3 > .org-node-row { padding-left: 98px; }

/* ── Connector lines ─────────────────────────────────────────────────────
 * Vertikální stonek z parent uzlu dolů ke children containeru
 */
.org-node--level-0:has(> .org-children) > .org-node-row::after {
    content: '';
    position: absolute;
    left: 33px;
    top: 50%;
    bottom: 0;
    width: 1px;
    background: var(--org-connector);
    pointer-events: none;
}
.org-node--level-1:has(> .org-children) > .org-node-row::after {
    content: '';
    position: absolute;
    left: 61px;
    top: 50%;
    bottom: 0;
    width: 1px;
    background: var(--org-connector);
    pointer-events: none;
}
.org-node--level-2:has(> .org-children) > .org-node-row::after {
    content: '';
    position: absolute;
    left: 89px;
    top: 50%;
    bottom: 0;
    width: 1px;
    background: var(--org-connector);
    pointer-events: none;
}

/* Vertikální trunk linka v children containeru (top → center posledního dítěte) */
.org-children { position: relative; }

.org-node--level-0 > .org-children::before {
    content: '';
    position: absolute;
    left: 33px;
    top: 0;
    bottom: 27px;
    width: 1px;
    background: var(--org-connector);
    pointer-events: none;
}
.org-node--level-1 > .org-children::before {
    content: '';
    position: absolute;
    left: 61px;
    top: 0;
    bottom: 27px;
    width: 1px;
    background: var(--org-connector);
    pointer-events: none;
}
.org-node--level-2 > .org-children::before {
    content: '';
    position: absolute;
    left: 89px;
    top: 0;
    bottom: 27px;
    width: 1px;
    background: var(--org-connector);
    pointer-events: none;
}

/* Horizontální ramena z trunk linky k avataru každého dítěte */
.org-node--level-1 > .org-node-row::before {
    content: '';
    position: absolute;
    left: 33px;
    top: 50%;
    width: 9px;
    height: 1px;
    background: var(--org-connector);
    pointer-events: none;
}
.org-node--level-2 > .org-node-row::before {
    content: '';
    position: absolute;
    left: 61px;
    top: 50%;
    width: 9px;
    height: 1px;
    background: var(--org-connector);
    pointer-events: none;
}
.org-node--level-3 > .org-node-row::before {
    content: '';
    position: absolute;
    left: 89px;
    top: 50%;
    width: 9px;
    height: 1px;
    background: var(--org-connector);
    pointer-events: none;
}

/* Separator v stromě (např. "Deaktivovaní") */
.org-section-label {
    font-family: var(--font-display);
    font-size: var(--fs-xs);
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--outline);
    padding: 10px 14px 4px;
    margin-top: 4px;
}

/* ── Přepínač seznam / strom ─────────────────────────────────────────────
 * Umístěn v .tasks-header vpravo vedle h1
 */
.members-view-toggle {
    display: flex;
    background: var(--surface-container-low);
    border-radius: var(--radius-lg);
    padding: 3px;
    gap: 2px;
    flex-shrink: 0;
}
.members-toggle-btn {
    font-family: var(--font-display);
    font-size: var(--fs-xs);
    font-weight: 500;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    padding: 5px 14px;
    border: none;
    border-radius: var(--radius);
    cursor: pointer;
    background: transparent;
    color: var(--outline);
    transition: background var(--transition, 150ms ease), color var(--transition, 150ms ease);
}
.members-toggle-btn:hover { color: var(--on-surface); }
.members-toggle-btn.active {
    background: var(--surface-container-lowest);
    color: var(--primary);
    box-shadow: var(--shadow-float);
}

/* ── Statistiky stromu ───────────────────────────────────────────────────
 * Řádek s číselnými přehledy nad org-tree
 */
.members-tree-stats {
    display: flex;
    gap: 24px;
    margin-bottom: 12px;
    padding: 10px 14px;
    background: var(--surface-container-lowest);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow);
    flex-wrap: wrap;
}
.members-tree-stat { }
.members-tree-stat-value {
    display: block;
    font-family: var(--font-display);
    font-size: var(--fs-xl);
    font-weight: 700;
    color: var(--primary);
    line-height: 1.1;
}
.members-tree-stat-label {
    display: block;
    font-family: var(--font-display);
    font-size: var(--fs-xs);
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--outline);
    margin-top: 1px;
}

/* Neaktivní avatar v stromovém pohledu */
.member-avatar--inactive {
    background: var(--surface-container);
    color: var(--outline);
}

/* Formulář pozvánky (detail firmy) */
.org-invite-hint {
    font-size: var(--fs-base);
    color: var(--text-muted);
    margin: 0 0 12px;
    line-height: 1.5;
}
.org-invite-box {
    background: var(--surface-container-lowest);
    border-radius: var(--radius-xl);
    padding: 20px 24px;
    box-shadow: var(--shadow);
}
.org-invite-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 12px;
    margin-bottom: 14px;
}
.org-invite-grid .org-invite-field {
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.org-invite-field label {
    font-size: var(--fs-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
}
.org-invite-field .task-input {
    width: 100%;
    box-sizing: border-box;
    padding: 10px 12px;
    font-size: var(--fs-md);
}
.org-invite-result {
    margin-top: 14px;
    padding: 12px 16px;
    background: var(--surface-container-low);
    border-radius: var(--radius-lg);
}
.org-invite-result p {
    margin: 0 0 8px;
    font-size: var(--fs-base);
}
.org-invite-link-row {
    display: flex;
    gap: 8px;
    align-items: center;
}
.org-invite-link-row .task-input {
    flex: 1;
    font-size: var(--fs-sm);
    padding: 8px 10px;
    box-sizing: border-box;
}
/* Role selector v pozvánce */
.org-invite-role {
    margin-bottom: 16px;
}
.org-invite-role-label {
    display: block;
    font-size: var(--fs-xs);
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 8px;
}
.org-invite-role-options {
    display: flex;
    gap: 10px;
}
.org-role-option {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    flex: 1;
    padding: 10px 14px;
    background: var(--surface-container-low);
    border-radius: var(--radius-lg);
    cursor: pointer;
    transition: background 0.15s;
}
.org-role-option:has(input:checked) {
    background: rgba(0, 102, 133, 0.1);
    box-shadow: inset 0 0 0 2px var(--primary-container);
}
.org-role-option input[type="radio"] {
    margin-top: 2px;
    flex-shrink: 0;
}
.org-role-title {
    display: block;
    font-size: var(--fs-base);
    font-weight: 600;
    color: var(--text);
}
.org-role-desc {
    display: block;
    font-size: var(--fs-xs);
    color: var(--text-muted);
    margin-top: 2px;
}
.org-role-option span { display: block; }

@media (max-width: 600px) {
    .org-invite-grid { grid-template-columns: 1fr; }
    .org-invite-role-options { flex-direction: column; }
}

/* Formulář nové firmy */
.org-create-box {
    background: var(--surface-container-lowest);
    border-radius: var(--radius-xl);
    padding: 16px 20px;
    box-shadow: var(--shadow);
}
.org-create-title {
    font-size: var(--fs-md);
    font-weight: 600;
    margin: 0 0 12px;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.org-create-form {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.org-create-form .task-input {
    flex: 1;
    min-width: 140px;
}
.org-toggle-label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: var(--fs-base);
    color: var(--text-secondary);
    white-space: nowrap;
    cursor: pointer;
}

@media (max-width: 600px) {
    .org-detail-header {
        flex-direction: column;
        align-items: flex-start;
    }
    .org-node-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }
    .org-manager-select {
        max-width: 100%;
        width: 100%;
    }
    .org-create-form {
        flex-direction: column;
        align-items: stretch;
    }
}

/* =============================================================================
   Invite panel — Správa týmu (Company Admin)
   ============================================================================= */

.invite-panel {
    margin-top: 32px;
    padding-top: 24px;
}

.invite-panel-title {
    font-family: var(--font-display);
    font-size: var(--fs-2xl);
    color: var(--text);
    margin-bottom: 16px;
}

.invite-form-box {
    background: var(--surface-container-lowest);
    border-radius: var(--radius-xl);
    padding: 20px;
    margin-bottom: 24px;
    box-shadow: var(--shadow);
}

.invite-form-box .field {
    margin-bottom: 12px;
}

.invite-form-box .field label {
    display: block;
    font-size: var(--fs-sm);
    color: var(--text-muted);
    margin-bottom: 4px;
}

.invite-form-box .field input,
.invite-form-box .field select {
    width: 100%;
    padding: 8px 10px;
    border: none;
    border-left: 2px solid transparent;
    border-radius: var(--radius-lg);
    font-size: var(--fs-md);
    font-family: var(--font-body);
    color: var(--text);
    background: var(--surface-container-low);
    transition: background var(--transition), border-color var(--transition);
}

.invite-form-box .field input:focus,
.invite-form-box .field select:focus {
    outline: none;
    background: var(--surface-container-lowest);
    border-left-color: var(--primary);
}

.invite-form-actions {
    display: flex;
    gap: 10px;
    margin-top: 16px;
}

.invite-link-box {
    background: var(--surface-container-low);
    border-radius: var(--radius-lg);
    padding: 14px 16px;
    margin-top: 16px;
}

.invite-link-box-url {
    font-size: var(--fs-sm);
    color: var(--text-muted);
    word-break: break-all;
    margin-bottom: 10px;
    font-family: monospace;
}

.invite-link-box-validity {
    font-size: var(--fs-sm);
    color: var(--text-muted);
    margin-bottom: 10px;
}

.invite-pending-list {
    background: var(--surface-container-lowest);
    border-radius: var(--radius-xl);
    overflow: hidden;
    margin-top: 8px;
    box-shadow: var(--shadow);
}

.invite-pending-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    font-size: var(--fs-base);
}

.invite-pending-row + .invite-pending-row {
    border-top: 1px solid var(--surface-container-high);
}

/* A5 — prošlá pozvánka */
.invite-pending-row--expired .invite-pending-email { opacity: 0.65; }
.invite-expired-tag {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 6px;
    border-radius: var(--radius);
    background: var(--error-container, #fde2e1);
    color: var(--error, #b3261e);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.02em;
}

.invite-pending-email {
    flex: 1;
    font-weight: 500;
    color: var(--text);
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.invite-pending-meta {
    font-size: var(--fs-sm);
    color: var(--text-muted);
    white-space: nowrap;
}

.invite-pending-empty {
    padding: 12px 14px;
    color: var(--text-muted);
    font-size: var(--fs-base);
}

@media (max-width: 480px) {
    .invite-form-actions {
        flex-direction: column;
    }
    .invite-pending-row {
        flex-wrap: wrap;
    }
}

/* ==========================================================================
 * Remove member modal
 * ========================================================================== */

.remove-modal-card {
    gap: 16px;
}

.remove-modal-options {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.remove-modal-option {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: var(--fs-base);
    cursor: pointer;
    line-height: 1.4;
}

.remove-modal-option input[type="checkbox"] {
    margin-top: 2px;
    flex-shrink: 0;
    accent-color: var(--primary);
}

.remove-modal-option-hint {
    font-size: var(--fs-sm);
    color: var(--text-muted);
    margin-top: 2px;
}

.remove-modal-option-hint--danger {
    color: var(--overdue);
}

.remove-modal-actions {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    padding-top: 4px;
}

/* ==========================================================================
 * Members manage section (company admin — manager view)
 * ========================================================================== */

/* Sort bar */
.members-sort-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 16px;
    flex-wrap: wrap;
}

.members-sort-label {
    font-size: var(--fs-sm);
    color: var(--text-muted);
    white-space: nowrap;
}

.members-sort-group {
    display: flex;
    gap: 4px;
}

.members-sort-btn {
    font-size: var(--fs-sm);
    padding: 4px 10px;
    border-radius: 2px;
    border: 1px solid var(--surface-container-high);
    background: var(--surface-container-lowest);
    color: var(--text-muted);
    cursor: pointer;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.members-sort-btn:hover {
    background: var(--surface-container-low);
    color: var(--text);
}

.members-sort-btn.active {
    background: var(--primary);
    color: var(--on-primary);
    border-color: var(--primary);
}

.members-sort-dir {
    font-size: var(--fs-sm);
    padding: 4px 8px;
    border-radius: 2px;
    border: 1px solid var(--surface-container-high);
    background: var(--surface-container-lowest);
    color: var(--text-muted);
    cursor: pointer;
    transition: background 0.15s;
}

.members-sort-dir:hover {
    background: var(--surface-container-low);
    color: var(--text);
}

/* Members manage section */
.members-manage-section {
    margin-top: 12px;
}

.members-manage-title {
    font-size: var(--fs-md);
    color: var(--text-muted);
    margin-bottom: 10px;
}

.members-manage-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Avatar */
.member-avatar {
    width: 38px;
    height: 38px;
    border-radius: 4px;
    background: var(--primary-container);
    color: var(--on-primary-container);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--fs-sm);
    font-weight: 600;
    flex-shrink: 0;
    letter-spacing: 0.02em;
    font-family: var(--font-head, inherit);
}

.members-manage-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    font-size: var(--fs-base);
    background: var(--surface-container-lowest);
    border: 1px solid var(--surface-container-high);
    border-radius: 4px;
    transition: border-color 0.15s;
}

.members-manage-row:hover {
    border-color: var(--outline, #bbb);
}

.members-manage-info {
    display: flex;
    align-items: center;
    min-width: 0;
    flex: 1;
}

.members-manage-identity {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.members-manage-name-row {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

.members-manage-name {
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.members-manage-secondary {
    font-size: var(--fs-sm);
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.members-manage-hint {
    font-size: 0.7rem;
    color: var(--text-light);
    flex-shrink: 0;
    background: var(--surface-container);
    border-radius: 2px;
    padding: 1px 5px;
    border: 1px solid var(--surface-container-high);
    white-space: nowrap;
}

.members-manage-actions {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}

.members-remove-btn {
    flex-shrink: 0;
    color: var(--overdue);
    font-size: var(--fs-sm);
    padding: 3px 8px;
}

.members-manage-row--inactive {
    opacity: 0.5;
}

.members-manage-row--inactive .member-avatar {
    background: var(--surface-container);
    color: var(--text-muted);
}

.members-manage-row--inactive .members-manage-name {
    text-decoration: line-through;
}

.members-edit-form {
    display: none;
    margin-top: -4px;
    border: 1px solid var(--surface-container-high);
    border-top: none;
    border-radius: 0 0 4px 4px;
}
.members-edit-form--open {
    display: block;
}

.members-edit-panel {
    padding: 14px 0 12px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.members-edit-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px 16px;
}

.members-edit-field--manager {
    grid-column: 1 / -1;
}

.members-edit-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.members-edit-label {
    font-size: var(--fs-sm);
    font-weight: 500;
    color: var(--text-muted);
}

.members-edit-field .task-input {
    font-size: var(--fs-sm);
    padding: 6px 10px;
}

.members-edit-footer {
    display: flex;
    justify-content: flex-end;
    gap: 6px;
}

.org-menu-edit-row {
    display: flex;
    align-items: center;
    gap: 6px;
    padding-top: 8px;
    flex-wrap: wrap;
}
.org-menu-edit-row input {
    flex: 1;
    min-width: 80px;
    font-size: var(--fs-sm);
    padding: 4px 6px;
    border: none;
    border-radius: var(--radius-lg);
    background: var(--surface-container-low);
    color: var(--text);
}

/* --- Redukce pohybu — respektujeme systémové nastavení uživatele ----------- */
/*
 * Uživatelé s vestibulárními poruchami, epilepsií nebo citlivostí na pohyb
 * mohou v systému zapnout "Redukce pohybu". Všechny animace a přechody
 * zkrátíme na minimum.
 */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

    /* Specificky spring animace kouče — bez odskoku */
    .coach-toast {
        transition: transform 0.01ms !important;
    }
}

/* ============================================================
   Confirm dialog (manager — smazání přiřazeného úkolu)
   ============================================================ */
.confirm-dialog-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.35);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 500;
}
.confirm-dialog {
    background: var(--surface-container-lowest);
    border-radius: var(--radius-xl);
    padding: 24px 28px;
    max-width: 360px;
    width: 90%;
    box-shadow: var(--shadow-float);
    border-top: 2px solid var(--error);
}
.confirm-dialog p {
    margin: 0 0 20px;
    font-size: var(--fs-base);
    color: var(--text);
    line-height: 1.5;
}
.confirm-dialog-actions {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
}

/* Badge smazáno podřízeným */
.task-deleted-by-sub-badge {
    font-family: var(--font-display);
    font-size: var(--fs-2xs);
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--error);
    background: var(--error-container);
    border-radius: 6px;
    padding: 2px 8px;
    white-space: nowrap;
}

/* ============================================================
   SOUHRNNÉ ÚKOLY (Master Tasks)
   ============================================================ */

/* Sekce Souhrnné úkoly v Tým tabu */
.master-tasks-section {
    margin-bottom: 24px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--outline-variant);
}

.master-tasks-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}

.master-tasks-title {
    font-family: var(--font-display);
    font-size: var(--fs-sm);
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--on-surface-variant);
    margin: 0;
}

.master-tasks-empty {
    font-size: var(--fs-sm);
    color: var(--text-muted);
    padding: 8px 0;
}

/* Řádek jednoho souhrnného úkolu */
.master-task-item {
    background: var(--surface-container);
    border-radius: var(--radius-lg);
    border-left: 3px solid var(--primary);
    margin-bottom: 8px;
    overflow: hidden;
}

.master-task-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    cursor: pointer;
    user-select: none;
}

.master-task-row:hover {
    background: var(--surface-container-high);
}

.master-task-icon {
    font-size: 1rem;
    flex-shrink: 0;
}

.master-task-name {
    font-size: var(--fs-base);
    font-weight: 500;
    color: var(--text);
    flex: 1;
    min-width: 0;
    overflow-wrap: anywhere;
    /* Dlouhý název SÚ v kartě Týmu se nesmí lámat na 4 řádky — clamp na 2 + ellipsis */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.master-task-responsible {
    font-size: var(--fs-xs);
    color: var(--text);
    opacity: 0.6;
    white-space: nowrap;
}

/* Progress bar */
.master-task-progress-wrap {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

.master-task-progress-bar {
    width: 64px;
    height: 6px;
    background: var(--surface-container-highest);
    border-radius: 3px;
    overflow: hidden;
}

.master-task-progress-fill {
    display: block;
    height: 100%;
    background: var(--primary);
    border-radius: 3px;
    transition: width 0.3s ease;
}

.master-task-progress-label {
    font-size: var(--fs-xs);
    color: var(--on-surface-variant);
    white-space: nowrap;
}

.master-task-chevron {
    font-size: var(--fs-xs);
    color: var(--on-surface-variant);
    flex-shrink: 0;
}

.master-task-delete-btn {
    opacity: 0;
    transition: opacity var(--transition);
    flex-shrink: 0;
    color: var(--error);
}

.master-task-item:hover .master-task-delete-btn {
    opacity: 1;
}

/* Rozbalený seznam úkolů */
.master-task-subtasks {
    border-top: 1px solid var(--outline-variant);
    background: var(--surface-container-low);
}

.master-subtask-list {
    list-style: none;
    margin: 0;
    padding: 6px 0;
}

.master-subtask-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 16px;
    font-size: var(--fs-sm);
}

.master-subtask-item.done {
    opacity: 0.5;
}

.master-subtask-item.done .master-subtask-title {
    text-decoration: line-through;
    color: var(--text-muted);
}

.master-subtask-check {
    font-size: var(--fs-xs);
    color: var(--primary);
    flex-shrink: 0;
    width: 16px;
    text-align: center;
}

.master-subtask-title {
    flex: 1;
    color: var(--text);
}

/* Podúkoly v kartě SÚ (Tým) musí být plně čitelné — přebij ellipsis/nowrap z .master-subtask-row */
.master-subtask-item .master-subtask-title {
    min-width: 0;
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    overflow-wrap: anywhere;
}

.master-subtask-assignee {
    font-size: var(--fs-xs);
    color: var(--on-surface-variant);
    white-space: nowrap;
}

.master-subtask-add {
    padding: 4px 12px 6px;
}

.master-task-item--pending {
    opacity: 0.75;
    border-left-color: var(--mid);
}

.master-task-item--done {
    opacity: 0.55;
    border-left-color: var(--success, #2e7d32);
}

.master-task-item--done .master-task-name {
    text-decoration: line-through;
    color: var(--text-muted);
}

/* Sekce dokončených SÚ */
.master-tasks-done-section {
    margin-top: 12px;
}

.master-tasks-done-toggle {
    display: flex;
    align-items: center;
    gap: 6px;
    background: none;
    border: none;
    cursor: pointer;
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--text-muted);
    padding: 4px 0;
    letter-spacing: .02em;
    text-transform: uppercase;
}

.master-tasks-done-toggle:hover {
    color: var(--text);
}

.master-tasks-done-chevron {
    font-size: 10px;
}

.master-tasks-done-list {
    display: none;
    margin-top: 6px;
}

.master-tasks-done-section.is-open .master-tasks-done-list {
    display: block;
}

.master-task-pending-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 9px;
    font-size: var(--fs-xs);
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    border-radius: var(--radius);
    background: rgba(221, 132, 0, 0.18);
    color: var(--mid);
    border: 1px solid rgba(221, 132, 0, 0.35);
    white-space: nowrap;
    flex-shrink: 0;
}

/* Konverzace uvnitř souhrnného úkolu (collapsible thread) */
.note-thread--master {
    border-top: 1px solid var(--outline-variant);
    background: var(--surface-container-low);
    padding: 10px 16px;
}

/* Formulář pro vytvoření souhrnného úkolu */
.master-task-form {
    margin-top: 0;
    border: 1px solid var(--outline-variant);
    border-radius: var(--radius-lg);
    padding: 16px;
    background: var(--surface-container-low);
}

/* Badge "SOUHRNNÝ ÚKOL" na pending master tasku u podřízeného */
.task-master-badge {
    font-family: var(--font-display);
    font-size: var(--fs-2xs);
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--primary);
    background: transparent;
    border-radius: var(--radius);
    border: 1px solid color-mix(in srgb, var(--primary) 50%, transparent);
    padding: 2px 8px;
    white-space: nowrap;
    flex-shrink: 0;
}

/* Chip "📂 Nákup stroje" na úkolech v hlavním listu — výrazný, v barvě SÚ (PROJEKT kanál) */
.task-master-label {
    font-family: var(--font-display);
    font-size: var(--fs-2xs);
    font-weight: 600;
    color: var(--task-project);
    background: color-mix(in srgb, var(--task-project) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--task-project) 45%, transparent);
    border-radius: var(--radius);
    padding: 2px 7px;
    margin-left: 8px;
    flex-shrink: 0;
    max-width: 150px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.task-master-responsible {
    display: none;
}

/* Kontext banner v rozkliknutém podúkolu */
.task-subtask-banner {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    background: var(--surface-container-low);
    border-left: 2px solid var(--primary);
    font-size: var(--fs-sm);
    color: var(--on-surface-variant);
    opacity: 0.9;
}
.task-subtask-banner-icon { flex-shrink: 0; font-size: 13px; }
.task-subtask-banner strong { color: var(--on-surface); font-weight: 600; }
.task-subtask-banner-person {
    font-size: var(--fs-xs);
    color: var(--on-surface-variant);
}

/* Přijatý souhrnný úkol v osobním listu podřízeného */
.task-item--project {
    border-left: 3px solid var(--primary);
    background: var(--primary-container);
}

/* Nastavení organizace v company-admin */
.ca-org-settings-section {
    margin-bottom: 24px;
    padding: 16px;
    background: var(--surface-container);
    border-radius: var(--radius-lg);
    border: 1px solid var(--outline-variant);
}

.ca-org-settings-title {
    font-family: var(--font-display);
    font-size: var(--fs-sm);
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--on-surface-variant);
    margin: 0 0 12px;
}

.ca-org-settings-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.ca-org-settings-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.ca-org-settings-label {
    font-size: var(--fs-base);
    font-weight: 500;
    color: var(--text);
}

.ca-org-settings-desc {
    font-size: var(--fs-sm);
    color: var(--text-muted);
}

/* ============================================================
   Notifikační dropdown (otevřen klikem na nav badge)
   ============================================================ */

#notification-dropdown {
    display: none;
    z-index: 300;
    background: var(--surface-container-lowest);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-float);
    overflow: hidden;
}

#notification-dropdown.open {
    display: block;
}

.notif-dropdown-header {
    padding: 8px 14px 6px;
    font-size: var(--fs-xs);
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--text-muted);
    border-bottom: 1px solid var(--border);
}

.notif-dropdown-row {
    padding: 10px 14px;
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    border-bottom: 1px solid var(--border);
    transition: background var(--transition);
}

.notif-dropdown-row:hover {
    background: var(--bg-hover);
}

.notif-dropdown-row:focus-visible {
    background: var(--bg-hover);
    outline: none;
    box-shadow: inset 0 0 0 2px var(--accent);
}

.notif-dropdown-avatar {
    width: 34px;
    height: 34px;
    background: var(--accent);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--on-primary, #fff);
    font-size: var(--fs-sm);
    font-weight: 700;
    flex-shrink: 0;
}

.notif-dropdown-info {
    flex: 1;
    min-width: 0;
}

.notif-dropdown-name {
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--text);
    line-height: 1.3;
}

.notif-dropdown-events {
    font-size: var(--fs-xs);
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-top: 1px;
}

.notif-dropdown-count {
    background: var(--accent);
    color: var(--on-primary, #fff);
    border-radius: 9999px;
    min-width: 20px;
    height: 20px;
    font-size: var(--fs-xs);
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 5px;
    flex-shrink: 0;
}

.notif-dropdown-footer {
    padding: 8px 14px;
    text-align: right;
    border-top: 1px solid var(--border);
}

.notif-dropdown-all {
    background: none;
    border: none;
    font-size: var(--fs-xs);
    color: var(--accent);
    cursor: pointer;
    font-weight: 600;
    padding: 0;
    font-family: var(--font-body);
    letter-spacing: .01em;
}

.notif-dropdown-all:hover {
    text-decoration: underline;
}

.notif-dropdown-empty {
    padding: 16px 14px;
    font-size: var(--fs-sm);
    color: var(--text-muted);
    text-align: center;
}

/* ============================================================
   SOUHRNNÝ ÚKOL — zodpovědná osoba v tasks.js (Konverzace 2)
   ============================================================ */

.master-convert-row {
    padding: 10px 0 2px;
    margin-top: 4px;
}

.master-task-detail-section {
    border-top: 1px solid var(--outline-variant);
    padding: 12px 0 6px;
    margin-top: 4px;
}

.master-task-detail-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
    flex-wrap: wrap;
}

.master-task-detail-title {
    font-family: var(--font-display);
    font-size: var(--fs-sm);
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--text-muted);
    white-space: nowrap;
}

.master-task-progress {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
    min-width: 120px;
}

.master-task-progress-track {
    flex: 1;
    height: 4px;
    background: var(--outline-variant);
    border-radius: 2px;
    overflow: hidden;
}

.master-task-progress-fill {
    height: 100%;
    background: var(--primary);
    border-radius: 2px;
    transition: width 300ms ease;
}

.master-task-progress-label {
    font-size: var(--fs-xs);
    color: var(--text-muted);
    white-space: nowrap;
}

.master-subtasks-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 10px;
}

.master-subtask-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    border-radius: var(--radius);
    background: var(--surface-container-lowest);
    border: 1px solid var(--outline-variant);
}

.master-subtask-row.done {
    opacity: 0.55;
}

.master-subtask-title {
    flex: 1;
    min-width: 0;
    font-size: var(--fs-sm);
    color: var(--text);
    /* Fáze 5: podúkoly musí být plně čitelné — žádný ořez „…", dlouhé názvy se zalomí */
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    overflow-wrap: anywhere;
}

.master-subtask-row.done .master-subtask-title {
    text-decoration: line-through;
}

.master-subtask-assignee {
    font-size: var(--fs-xs);
    color: var(--text-muted);
    white-space: nowrap;
}

.master-subtask-assignedby {
    display: block;
    font-size: var(--fs-2xs);
    color: var(--text-muted);
    opacity: 0.75;
}

.master-subtask-status {
    font-size: var(--fs-2xs);
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 1px 6px;
    border-radius: var(--radius);
    white-space: nowrap;
    background: transparent;
    border: 1px solid color-mix(in srgb, var(--outline) 45%, transparent);
    color: var(--text-muted);
}

.master-subtask-status--pending  { color: var(--primary); border-color: color-mix(in srgb, var(--primary) 50%, transparent); }
.master-subtask-status--accepted { color: var(--success); border-color: color-mix(in srgb, var(--success) 50%, transparent); }
.master-subtask-status--returned { color: var(--error);   border-color: color-mix(in srgb, var(--error) 55%, transparent); }
.master-subtask-status--done     { color: var(--success); border-color: color-mix(in srgb, var(--success) 50%, transparent); }

.master-subtasks-empty {
    font-size: var(--fs-sm);
    color: var(--text-muted);
    padding: 6px 2px;
}

/* Dialog pro zadání podúkolu (wider form) */
.confirm-dialog--wide {
    max-width: 440px;
    border-top-color: var(--primary);
}

.confirm-dialog--wide h3 {
    margin: 0 0 14px;
    font-size: var(--fs-lg);
    font-weight: 600;
    color: var(--text);
}

.confirm-dialog--wide .field {
    margin-bottom: 10px;
}

.confirm-dialog--wide .field label {
    display: block;
    font-size: var(--fs-sm);
    font-weight: 500;
    margin-bottom: 4px;
    color: var(--text);
}

.confirm-dialog--wide .field input,
.confirm-dialog--wide .field select {
    width: 100%;
    box-sizing: border-box;
}

/* =============================================================================
   COMPANY ADMIN — Hamburger menu + Settings view (Konverzace 4)
   ============================================================================= */

/* Hamburger button */
.hamburger-btn {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 36px;
    height: 36px;
    padding: 6px;
    background: none;
    border: 1px solid var(--outline-variant);
    border-radius: 4px;
    cursor: pointer;
    position: relative;
}

.hamburger-btn:hover {
    background: var(--surface-container-low);
}

.hamburger-btn span {
    display: block;
    width: 100%;
    height: 2px;
    background: var(--text);
    border-radius: 1px;
    transition: opacity 0.15s;
}

/* Hamburger dropdown panel */
.hamburger-panel {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    min-width: 160px;
    background: var(--surface-container-lowest);
    border: 1px solid var(--outline-variant);
    border-radius: 4px;
    box-shadow: 0 4px 16px rgba(0,0,0,.12);
    z-index: 200;
    padding: 4px 0;
}

.hamburger-panel.hidden {
    display: none;
}

.hamburger-wrapper {
    position: relative;
}

.hamburger-item {
    display: block;
    width: 100%;
    text-align: left;
    padding: 9px 16px;
    font-size: var(--fs-sm);
    font-weight: 500;
    color: var(--text);
    background: none;
    border: none;
    cursor: pointer;
    white-space: nowrap;
}

.hamburger-item:hover {
    background: var(--surface-container-low);
}

.hamburger-item.active {
    color: var(--primary);
    background: var(--surface-container-low);
}

.hamburger-item.danger {
    color: var(--error);
}

.hamburger-item.danger:hover {
    background: var(--error-container);
}

.hamburger-divider {
    height: 1px;
    background: var(--outline-variant);
    margin: 4px 0;
}

/* Settings view */
.ca-settings-section {
    margin-bottom: 28px;
}

.ca-settings-section-title {
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 12px;
}

.ca-settings-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 0;
    border-bottom: 1px solid var(--outline-variant);
}

.ca-settings-row:last-child {
    border-bottom: none;
}

.ca-settings-row--disabled {
    opacity: 0.45;
    pointer-events: none;
}

.ca-settings-subsection {
    padding-left: 20px;
    border-left: 2px solid var(--outline-variant);
}

.ca-settings-row-text {
    flex: 1;
}

.ca-settings-row-label {
    font-size: var(--fs-base);
    font-weight: 500;
    color: var(--text);
}

.ca-settings-row-desc {
    font-size: var(--fs-sm);
    color: var(--text-muted);
    margin-top: 2px;
}

/* Toggle switch */
.toggle-switch {
    position: relative;
    width: 44px;
    height: 24px;
    flex-shrink: 0;
    cursor: pointer;
}

.toggle-switch input {
    opacity: 0;
    width: 0;
    height: 0;
    position: absolute;
}

.toggle-track {
    position: absolute;
    inset: 0;
    background: var(--outline-variant);
    border-radius: 12px;
    transition: background 0.2s;
}

.toggle-thumb {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 18px;
    height: 18px;
    background: var(--surface-container-lowest);
    border-radius: 50%;
    transition: transform 0.2s;
    box-shadow: 0 1px 3px rgba(0,0,0,.2);
}

.toggle-switch--on .toggle-track {
    background: var(--primary);
}

.toggle-switch--on .toggle-thumb {
    transform: translateX(20px);
}

/* Radio option group pro 3-stavová nastavení (participants_can_assign) */
.ca-pca-options {
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex-shrink: 0;
}

.ca-pca-option {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: var(--fs-sm);
    color: var(--text);
    cursor: pointer;
    white-space: nowrap;
}

.ca-pca-option input[type="radio"] {
    accent-color: var(--primary);
    width: 16px;
    height: 16px;
    cursor: pointer;
    flex-shrink: 0;
}

/* --- User search widget (nahrazuje <select> pro výběr uživatele) ---------- */
.user-search-wrapper {
    position: relative;
    width: 100%;
}

.user-search-input {
    width: 100%;
    box-sizing: border-box;
}

/* Kontrastnější pole hledání osoby — viditelná hranice, ať je zřejmé, že jde o vstup.
   Vyšší specificita (.user-search-wrapper …) přebíjí ploché .field input. */
.user-search-wrapper .user-search-input {
    border: 1px solid var(--outline-variant);
    border-radius: var(--radius-lg);
    background: var(--surface-container-lowest);
}
.user-search-wrapper .user-search-input:focus {
    border-color: var(--primary);
    background: var(--surface-container-lowest);
}

/* #8 — pole „zodpovědná osoba" v SÚ formulářích zřetelně zvýraznit (jasný rámeček + jemný
   nádech primární), ať je na první pohled vidět, že se tam vybírá osoba. */
.user-search-wrapper:has(#master-responsible) .user-search-input,
.user-search-wrapper:has(#reassign-responsible) .user-search-input {
    border: 1.5px solid var(--primary);
    background: color-mix(in srgb, var(--primary) 7%, var(--surface-container-lowest));
}
.user-search-wrapper:has(#master-responsible) .user-search-input:focus,
.user-search-wrapper:has(#reassign-responsible) .user-search-input:focus {
    border-color: var(--primary);
    background: color-mix(in srgb, var(--primary) 4%, var(--surface-container-lowest));
}

/* #6 — lišta řazení v Souhrnných úkolech */
.master-tasks-sortbar {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 10px;
    font-size: var(--fs-sm);
    color: var(--text-muted);
}
.master-tasks-sortbar select { min-width: 150px; }

.user-search-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background: var(--surface-container-lowest);
    border: 1px solid var(--border);
    border-radius: var(--radius-md, 4px);
    box-shadow: var(--shadow-float);
    z-index: 300;
    max-height: 220px;
    overflow-y: auto;
    margin-top: 2px;
}

.user-search-option {
    padding: 8px 12px;
    font-size: var(--fs-base);
    cursor: pointer;
    color: var(--text);
    transition: background var(--transition);
}

.user-search-option:hover {
    background: var(--border);
}

.user-search-no-results {
    padding: 8px 12px;
    font-size: var(--fs-sm);
    color: var(--text-muted);
}

/* ============================================================
   CELKOVÝ PŘEHLED — overview SPA
   ============================================================ */

/* Dropdown Team menu — zarovnání vlevo (liší se od user menu vpravo) */
.nav-team-menu .nav-user-dropdown {
    right: auto;
    left: 0;
}

/* Toolbar s filtry */
.overview-toolbar {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    padding: 12px 0 16px;
    border-bottom: 1px solid var(--outline-variant);
    margin-bottom: 16px;
}

.overview-filters {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    flex: 1;
}

/* Toolbar přehledu — jednotná výška všech prvků (select / vstup / multi-select) */
.field-input--sm {
    box-sizing: border-box;
    height: 34px;
    display: inline-flex;
    align-items: center;
    font-family: var(--font-body);
    font-size: var(--fs-sm);
    line-height: 1;
    padding: 0 12px;
    min-width: 0;
    color: var(--text);
    background: transparent;
    border: 1px solid var(--outline-variant);
    border-radius: var(--radius);
    transition: border-color var(--transition);
}
.field-input--sm::placeholder { color: var(--text-muted); }
.field-input--sm:focus { outline: none; border-color: var(--primary); }

/* Selecty + trigger multi-selectu: vlastní chevron z palety (místo nativního macOS) */
select.field-input--sm,
.field-input--sm.ov-multi {
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
    padding-right: 30px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%2371787B' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 11px center;
}
html.dark select.field-input--sm,
html.dark .field-input--sm.ov-multi {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%238C9296' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.field-input--sm.ov-multi { justify-content: flex-start; }

.status-filter-group {
    display: flex;
    gap: 4px;
}

.status-filter-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 34px;                 /* sladěno se selecty a hledáním v toolbaru */
    box-sizing: border-box;
    font-size: var(--fs-sm);
    padding: 0 12px;
    border-radius: var(--radius);
    border: 1px solid var(--outline-variant);
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    transition: background var(--transition), color var(--transition), border-color var(--transition);
}

.status-filter-btn::before {
    content: '○';
    font-size: 10px;
    line-height: 1;
    opacity: 0.55;
}

.status-filter-btn.active {
    background: var(--primary);
    color: #fff;
    border-color: var(--primary);
}

.status-filter-btn.active::before {
    content: '✓';
    opacity: 1;
}

/* --- Multi-select pracovníků (vlastní dropdown se zaškrtávátky) ------------- */
.ov-multiwrap { position: relative; display: inline-block; }
.ov-multi { min-width: 180px; }
.ov-multi-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--text-muted); }
.ov-multi-label.is-set { color: var(--text); font-weight: 500; }

.ov-multi-panel {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    z-index: 30;
    min-width: 220px;
    max-height: 320px;
    overflow-y: auto;
    background: var(--surface-container-lowest);
    border: 1px solid var(--outline-variant);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-float);
    padding: 6px;
}
/* #3b — vyhledávací pole ve filtru jmen (lepí nahoře při scrollu seznamu) */
.ov-multi-search {
    width: 100%;
    box-sizing: border-box;
    margin-bottom: 6px;
    padding: 6px 9px;
    font-size: var(--fs-sm);
    border: 1px solid var(--outline-variant);
    border-radius: var(--radius);
    background: var(--surface-container-lowest);
    color: var(--text);
    position: sticky;
    top: 0;
}
.ov-multi-search:focus { border-color: var(--primary); outline: none; }
.ov-multi-opt {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 7px 10px;
    border-radius: var(--radius);
    font-size: var(--fs-sm);
    color: var(--text);
    cursor: pointer;
    white-space: nowrap;
}
.ov-multi-opt:hover { background: var(--surface-container-low); }
.ov-multi-opt input { accent-color: var(--primary); width: 15px; height: 15px; flex-shrink: 0; cursor: pointer; }
.ov-multi-sep { height: 1px; background: var(--outline-variant); margin: 4px 2px; }
.ov-multi-clear {
    font-size: var(--fs-sm);
    color: var(--text-muted);
    padding: 6px 10px;
    border-radius: var(--radius);
    cursor: pointer;
}
.ov-multi-clear:hover { background: var(--surface-container-low); color: var(--text); }

.container--overview {
    max-width: var(--max-width-data);
}

/* ============================================================
   SOUHRNNÉ ÚKOLY — samostatný full-width pohled (master-tasks.js)
   ============================================================ */
.mtv-head { margin: 4px 0 14px; }
.mtv-title { font-family: var(--font-display); font-size: var(--fs-3xl); margin: 0; }

.mtv-toolbar {
    display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
    padding-bottom: 16px; margin-bottom: 4px;
    border-bottom: 1px solid var(--outline-variant);
}
.mtv-seg { display: inline-flex; border: 1px solid var(--outline-variant); border-radius: var(--radius); overflow: hidden; }
.mtv-seg button {
    border: none; background: var(--surface-container-lowest); padding: 7px 13px;
    font-family: var(--font-display); font-weight: 500; font-size: var(--fs-sm);
    color: var(--on-surface-variant); cursor: pointer;
}
.mtv-seg button.is-on { background: var(--primary); color: var(--on-primary); }
.mtv-field {
    border: 1px solid var(--outline-variant); border-radius: var(--radius);
    padding: 7px 11px; background: var(--surface-container-lowest);
    font-size: var(--fs-base); color: var(--on-surface); font-family: var(--font-body);
}
.mtv-field:focus { outline: none; border-color: var(--primary); }
.mtv-search { min-width: 220px; flex: 1; max-width: 320px; }

/* Scroll-x wrapper — na úzkém displeji se posouvá jen tabulka, ne celá stránka */
#mtv-table-wrap { overflow-x: auto; padding-top: 8px; }
.mtv-table { width: 100%; min-width: 720px; border-collapse: collapse; font-size: var(--fs-sm); }
.mtv-table thead th {
    font-family: var(--font-display); font-weight: 600; font-size: var(--fs-xs);
    letter-spacing: .04em; text-transform: uppercase; color: var(--outline);
    text-align: left; padding: 8px 12px; border-bottom: 1px solid var(--outline-variant); white-space: nowrap;
}
.mtv-table th.mtv-sortable { cursor: pointer; user-select: none; }
.mtv-table th.mtv-sortable:hover { color: var(--on-surface-variant); }
.mtv-table th.is-sorted { color: var(--primary); }
.mtv-arrow { opacity: .4; font-size: 10px; }
.mtv-arrow--on { opacity: 1; color: var(--primary); }

.mtv-group { border-bottom: 1px solid var(--border); }
.mtv-row { cursor: pointer; }
.mtv-row:hover { background: var(--surface-container-low); }
.mtv-table td { padding: 11px 12px; vertical-align: middle; }
.mtv-c-chev { width: 26px; color: var(--outline); }
.mtv-c-name { display: flex; align-items: center; gap: 8px; max-width: 460px; }
.mtv-folder { flex-shrink: 0; }
.mtv-name-txt {
    font-family: var(--font-display); font-weight: 600;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mtv-group.is-done .mtv-name-txt { color: var(--outline); }
.mtv-c-resp { color: var(--on-surface-variant); white-space: nowrap; }
.mtv-c-prog { white-space: nowrap; }
.mtv-bar {
    display: inline-block; width: 84px; height: 6px; border-radius: 999px;
    background: var(--surface-container-high); overflow: hidden; vertical-align: middle;
}
.mtv-bar i { display: block; height: 100%; background: var(--primary); }
.mtv-bar-lbl { font-variant-numeric: tabular-nums; font-size: var(--fs-xs); color: var(--on-surface-variant); margin-left: 8px; }
.mtv-c-state { white-space: nowrap; }
.mtv-badge {
    display: inline-flex; align-items: center; gap: 5px;
    font-family: var(--font-display); font-weight: 500; font-size: var(--fs-2xs);
    padding: 2px 8px; border-radius: 999px; border: 1px solid var(--outline-variant); white-space: nowrap;
}
.mtv-badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--outline); }
.mtv-badge--pending { color: var(--mid); border-color: #e6c48f; }
.mtv-badge--pending::before { background: var(--mid); }
.mtv-badge--active { color: var(--primary); border-color: var(--primary-container); }
.mtv-badge--active::before { background: var(--primary); }
.mtv-badge--done { color: var(--success); border-color: #bfe3cb; }
.mtv-badge--done::before { background: var(--success); }
.mtv-c-due { white-space: nowrap; font-variant-numeric: tabular-nums; }
.mtv-overdue { color: var(--error); font-weight: 600; }

/* Rozbalený řádek s podúkoly (read-only) */
.mtv-subrow.is-hidden { display: none; }
.mtv-subrow td { background: var(--surface-container-low); padding: 0 12px 4px; }
.mtv-subtask-list { margin: 0; padding: 8px 0 12px; list-style: none; }
.mtv-subtask {
    display: flex; align-items: center; gap: 10px; padding: 7px 10px;
    border-radius: var(--radius); font-size: var(--fs-base);
}
.mtv-sub-check { color: var(--outline); flex-shrink: 0; }
.mtv-subtask.is-done .mtv-sub-check { color: var(--success); }
.mtv-sub-title { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mtv-subtask.is-done .mtv-sub-title { color: var(--outline); text-decoration: line-through; }
.mtv-sub-due { font-variant-numeric: tabular-nums; font-size: var(--fs-xs); color: var(--on-surface-variant); white-space: nowrap; }
.mtv-sub-assignee { color: var(--on-surface-variant); white-space: nowrap; }
.mtv-subtask--empty { color: var(--outline); font-style: italic; }

.mtv-empty { padding: 40px 12px; text-align: center; color: var(--outline); }

/* Tabulka úkolů */
.overview-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
    font-size: var(--fs-sm);
}

.overview-table th {
    text-align: left;
    font-family: var(--font-heading);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--text-muted);
    padding: 6px 10px;
    border-bottom: 2px solid var(--outline-variant);
    white-space: nowrap;
}

.overview-table th.sortable {
    cursor: pointer;
    user-select: none;
}

.overview-table th.sortable:hover,
.overview-table th.sort-active {
    color: var(--primary);
}

.overview-table td {
    padding: 10px 10px;
    border-bottom: 1px solid var(--outline-variant);
    vertical-align: middle;
    color: var(--text);
}

/* Šířky sloupců */
.overview-table .col-expand   { width: 28px; padding-left: 6px; padding-right: 2px; }
.overview-table .col-task     { /* auto — zbytek */ overflow: hidden; }
.overview-table .col-master   { width: 160px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--text-muted); font-size: var(--fs-sm); }
.overview-table .col-status   { width: 80px; white-space: nowrap; }
.overview-table .col-priority { width: 82px; white-space: nowrap; }
.overview-table .col-due      { width: 108px; white-space: nowrap; }
.overview-table .col-work     { width: 108px; white-space: nowrap; }
.overview-table .col-assigned { width: 148px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.own-task-label {
    color: var(--text-muted);
    font-style: italic;
    font-size: var(--fs-sm);
}

/* Sloučená buňka: pracovník + název úkolu */
.task-member-label {
    font-size: 11px;
    font-family: var(--font-heading);
    font-weight: 500;
    letter-spacing: 0.03em;
    color: var(--text-muted);
    margin-bottom: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* G3 — indikace deaktivovaného člena v Overview */
.task-member-label--inactive { opacity: 0.6; }
.member-inactive-badge {
    font-size: 10px;
    font-weight: 500;
    color: var(--text-muted);
    font-style: italic;
    opacity: 0.8;
}

.task-title-text {
    font-weight: 500;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: flex;
    align-items: center;
    gap: 4px;
}

.task-row {
    transition: background var(--transition);
}

/* Přepíše globální display:flex z .task-row (ten platí pro hlavní task list) */
.overview-table .task-row {
    display: table-row;
    padding: 0;
    min-height: unset;
    cursor: default;
}

.task-row:hover {
    background: var(--surface-container);
}

.task-row--overdue .col-due {
    color: var(--accent-danger, #d32f2f);
    font-weight: 500;
}

.task-row--expanded {
    background: var(--surface-container-low);
}

/* Expand button */
.expand-btn {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--text-muted);
    font-size: 14px;
    padding: 2px 4px;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    transform: rotate(0deg);
    transition: transform 150ms ease, color 150ms ease;
}

.expand-btn:hover {
    color: var(--primary);
}

.task-row--expanded .expand-btn {
    transform: rotate(90deg);
    color: var(--primary);
}

/* Detail row (expanded) */
.overview-table .task-detail-row {
    display: table-row;
}

.task-detail-row td {
    background: var(--surface-container-low);
    border-bottom: 1px solid var(--outline-variant);
    padding-top: 0;
    padding-bottom: 8px;
}

.task-detail-row .task-detail-accent {
    padding: 0;
    background: var(--primary);
    border-bottom: 1px solid var(--outline-variant);
}

.task-detail-row .task-detail {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 0;
    padding: 6px 10px 8px;
    font-size: var(--fs-sm);
    color: var(--text-muted);
}

.task-detail-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
    padding-right: 12px;
}

.task-detail-chip + .task-detail-chip::before {
    content: '·';
    margin-right: 12px;
    color: var(--outline-variant);
    font-size: 14px;
    line-height: 1;
}

.task-detail-chip strong {
    color: var(--text-secondary);
    font-weight: 500;
}

.detail-note {
    width: 100%;
    flex-basis: 100%;
    padding-top: 4px;
    font-style: italic;
    color: var(--text-muted);
}

.detail-note strong {
    font-style: normal;
    color: var(--text);
}

/* --- Přepínač Seznam / Seskupit (segmentové ovládání v toolbaru) ----------- */
.ov-view-toggle {
    display: inline-flex;
    height: 34px;                 /* sladěno se selecty a filtry v toolbaru */
    box-sizing: border-box;
    border: 1px solid var(--outline-variant);
    border-radius: var(--radius);
    overflow: hidden;
}
.ov-view-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 0 12px;
    font-size: var(--fs-sm);
    background: transparent;
    color: var(--text-muted);
    border: none;
    cursor: pointer;
    transition: background var(--transition), color var(--transition);
}
.ov-view-btn + .ov-view-btn { border-left: 1px solid var(--outline-variant); }
.ov-view-btn.active {
    background: var(--primary);
    color: #fff;
}

/* --- Vlastní název ve sloupci "Souhrnný úkol" u řádku, který sám je souhrn --- */
.own-summary-label {
    color: var(--text-secondary);
    font-style: italic;
}

/* --- Seskupený pohled: hlavička skupiny + odsazené podúkoly ----------------- */
/* Vynutit table-row jako u .task-row / .task-detail-row — jinak řádek vypadne
   z fixed-layout mřížky a buňky se scvrknou na šířku obsahu */
.overview-table .task-group-header {
    display: table-row;
}
.task-group-header td {
    background: var(--surface-container);
    border-top: 1px solid var(--outline-variant);
    border-bottom: 1px solid var(--outline-variant);
    padding: 8px 10px;
}
.group-header-inner {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.group-header-title {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: var(--fs-sm);
    color: var(--text);
}
.task-group-header--other .group-header-title {
    color: var(--text-muted);
    font-style: italic;
}
.group-chip {
    font-size: var(--fs-2xs);
    color: var(--text-secondary);
    background: var(--surface-container-low);
    border: 1px solid var(--outline-variant);
    border-radius: var(--radius);
    padding: 1px 7px;
    white-space: nowrap;
}

/* Odsazení podúkolu pod hlavičkou skupiny — svislý accent vlevo */
.overview-table--grouped .task-row--child .col-expand {
    box-shadow: inset 3px 0 0 var(--primary);
}
.overview-table--grouped .task-row--child .col-task {
    padding-left: 18px;
}

/* Badges: Status */
/* Badges: obrysový styl (ladí s hairline kartami), barvy z palety.
   STAV = obrys + barevná tečka (kategorie životního cyklu — hue jsou si blízko).
   PRIORITA = čistý obrys bez tečky (teplotní škála, barva rozlišuje sama). */
.status-badge,
.priority-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: var(--radius);
    font-size: 11px;
    font-weight: 600;
    font-family: var(--font-display);
    letter-spacing: 0.03em;
    white-space: nowrap;
    background: transparent;
    border: 1px solid transparent;
}

.status-badge--todo  { border-color: color-mix(in srgb, var(--outline) 55%, transparent); color: var(--text-muted); }
.status-badge--doing { border-color: color-mix(in srgb, var(--primary) 55%, transparent); color: var(--on-primary-container); }
.status-badge--done  { border-color: color-mix(in srgb, var(--success) 55%, transparent); color: var(--success); }

/* Barevná tečka uvnitř STAV badge */
.status-badge .badge-dot {
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    margin-right: 6px;
    vertical-align: middle;
}
.status-badge--todo  .badge-dot { background: var(--outline); }
.status-badge--doing .badge-dot { background: var(--primary); }
.status-badge--done  .badge-dot { background: var(--success); }

/* Badges: Priority — čistý obrys */
.priority-badge--high { border-color: color-mix(in srgb, var(--error) 55%, transparent); color: var(--error); }
.priority-badge--mid  { border-color: color-mix(in srgb, var(--mid) 60%, transparent);  color: var(--mid); }
.priority-badge--low  { border-color: color-mix(in srgb, var(--outline) 45%, transparent); color: var(--text-muted); }

/* Work badge */
.work-badge {
    font-size: var(--fs-sm);
    color: var(--text-muted);
    white-space: nowrap;
}

.work-badge--active {
    color: #2e7d32;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.work-badge--paused {
    color: var(--text-muted);
}

/* Animovaná zelená tečka — aktivní session */
.session-dot {
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #4caf50;
    flex-shrink: 0;
    animation: session-pulse 1.4s ease-in-out infinite;
}

@keyframes session-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.5; transform: scale(0.8); }
}


.master-badge--main {
    opacity: 1;
}

/* Počet výsledků */
.overview-count {
    font-size: var(--fs-sm);
    color: var(--text-muted);
    text-align: right;
    padding: 8px 4px 0;
}

/* Cross-team sekce */
.cross-team-section {
    margin-top: 32px;
    border-top: 1px solid var(--outline-variant);
    padding-top: 16px;
}

.cross-team-toggle {
    background: none;
    border: none;
    cursor: pointer;
    font-family: var(--font-heading);
    font-size: var(--fs-sm);
    font-weight: 600;
    letter-spacing: 0.03em;
    color: var(--text-muted);
    text-transform: uppercase;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 0;
    transition: color var(--transition);
}

.cross-team-toggle:hover {
    color: var(--text);
}

.cross-team-body {
    margin-top: 12px;
}

.cross-team-body.hidden {
    display: none;
}

.overview-table--secondary {
    opacity: 0.9;
}

/* ---------------------------------------------------------------------------
   Stromový pohled (Strom) — org. hierarchie podřízených.
   Hierarchii nese barevný rail (border-left) per úroveň + vodorovná spojnice
   ke jménu; úkoly seskupené dle priority s prioritním pruhem (jako vlastní úkoly).
   --------------------------------------------------------------------------- */
.ov-tree {
    --lvl1: var(--primary);
    --lvl2: var(--secondary);
    --lvl3: #9a7b1e;
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: 12px;
}
.ov-tree-toolbar {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 8px;
}

/* uzel osoby — barevný rail vlevo dle úrovně, bez orámování */
.ov-node { border-left: 3px solid var(--lvl1); }
.ov-node .ov-node { border-left-color: var(--lvl2); margin: 7px 0 1px 22px; }
.ov-node .ov-node .ov-node { border-left-color: var(--lvl3); }

.ov-node-head {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 8px 4px 16px;
    cursor: pointer;
    user-select: none;
    position: relative;
}
.ov-node-head:hover { background: var(--surface-container-low, #f1f5f6); }
/* vodorovná spojnice od railu ke jménu */
.ov-node-head::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 11px;
    height: 2px;
    background: var(--lvl1);
}
.ov-node .ov-node > .ov-node-head::before { background: var(--lvl2); }
.ov-node .ov-node .ov-node > .ov-node-head::before { background: var(--lvl3); }

.ov-chev { flex-shrink: 0; width: 11px; font-size: 9px; color: var(--text-muted); transition: transform .15s; }
.ov-node.collapsed > .ov-node-head .ov-chev { transform: rotate(-90deg); }

.ov-avatar {
    flex-shrink: 0;
    width: 20px; height: 20px;
    border-radius: 50%;
    font-size: 9px; font-weight: 600;
    display: flex; align-items: center; justify-content: center;
    background: color-mix(in srgb, var(--lvl1) 15%, transparent);
    color: var(--lvl1);
}
.ov-node .ov-node > .ov-node-head .ov-avatar { background: color-mix(in srgb, var(--lvl2) 16%, transparent); color: var(--lvl2); }

.ov-name { font-weight: 600; font-size: 12px; }
.ov-node--manager > .ov-node-head .ov-name { font-size: 13px; }
.ov-tree > .ov-node > .ov-node-head .ov-name { font-size: 13.5px; }
.ov-name--inactive { color: var(--text-muted); text-decoration: line-through; }
.ov-inactive-badge { font-size: var(--fs-2xs); color: var(--text-muted); font-weight: 400; text-decoration: none; margin-left: 3px; }

.ov-counts { display: flex; gap: 5px; margin-left: auto; flex-wrap: wrap; }
.ov-count { font-size: var(--fs-2xs); font-weight: 600; padding: 1px 7px; border-radius: 10px; background: var(--surface-container, #eef2f4); color: var(--text-muted); white-space: nowrap; }
.ov-count--doing { background: color-mix(in srgb, var(--primary) 12%, transparent); color: var(--primary); }
.ov-count--overdue { background: color-mix(in srgb, var(--high) 14%, transparent); color: var(--high); }

/* Fáze 6: pravý padding 0 — kumuloval se per úroveň zanoření a posouval pravé sloupce doleva.
   Pravý padding řádku nese samotná .ov-task (konstantní), takže pravé hrany teď lícují napříč hloubkou. */
.ov-node-body { padding: 1px 0 3px 8px; display: flex; flex-direction: column; }
.ov-node.collapsed > .ov-node-body { display: none; }

/* skupina priorit */
.ov-prio-head { display: flex; align-items: center; gap: 6px; padding: 5px 4px 2px; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; }
.ov-prio-head:first-child { padding-top: 2px; }
.ov-prio-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
.ov-prio-line { flex: 1; height: 1px; background: var(--border); }
.ov-prio-head--high { color: var(--high); } .ov-prio-head--high .ov-prio-dot { background: var(--high); }
.ov-prio-head--mid  { color: var(--mid);  } .ov-prio-head--mid  .ov-prio-dot { background: var(--mid); }
.ov-prio-head--low  { color: var(--low);  } .ov-prio-head--low  .ov-prio-dot { background: var(--low); }

/* Skupinová hlavička priority uvnitř ploché tabulky přehledu (řazení dle priority) */
.ov-group-row, .ov-group-row:hover { background: none; }
.overview-table .ov-group-cell { display: flex; padding: 16px 4px 4px; border-bottom: none; }

/* lišta stromových filtrů (jen v pohledu Strom) */
.ov-tree-filters { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.ov-tree-filters #ov-tree-toggle-all { margin-left: auto; }

/* řádek úkolu — 3px prioritní pruh vlevo (jako vlastní úkoly) + zarovnané pravé sloupce */
.ov-task { position: relative; display: flex; align-items: center; gap: 8px; padding: 3px 8px 3px 14px; font-size: 12px; border-radius: var(--radius); }
.ov-task:hover { background: var(--surface-container-low, #f4f7f8); }
.ov-task::before { content: ''; position: absolute; left: 4px; top: 5px; bottom: 5px; width: 3px; border-radius: 2px; }
.ov-task[data-priority="high"]::before { background: var(--high); }
.ov-task[data-priority="mid"]::before  { background: var(--mid); }
.ov-task[data-priority="low"]::before  { background: var(--low); }
/* slot pro ikonu nadřízeného (přidělené úkoly) — rezervovaný, ať jsou tituly zarovnané */
.ov-task-flag { flex: 0 0 15px; display: flex; align-items: center; justify-content: center; color: var(--secondary); }
.ov-task-flag svg { width: 13px; height: 13px; }
.ov-task-main { flex: 1; min-width: 0; display: flex; align-items: center; gap: 6px; }
.ov-task-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ov-task.done .ov-task-title { color: var(--text-muted); text-decoration: line-through; }
/* značky typu úkolu: ∑ souhrnný, 📂 příslušnost k souhrnu (název souhrnu jen v tooltipu) */
.ov-tag { flex: 0 0 auto; font-size: 10px; font-weight: 600; line-height: 1.4; }
.ov-tag--master { color: var(--primary); background: color-mix(in srgb, var(--primary) 12%, transparent); border-radius: var(--radius); padding: 0 5px; font-weight: 700; }
.ov-tag--sub { color: var(--text-muted); font-weight: 500; }
/* Sloupec Typ (Fáze 6) — pevná šířka, odznak vystředěný */
.ov-task-type { flex: 0 0 34px; display: flex; align-items: center; justify-content: center; }
/* pevné pravé sloupce → zarovnání typu, stavu a data napříč řádky i úrovněmi.
   Vše zarovnané doprava → čisté pravé sloupce s konstantní mezerou. */
.ov-status { flex: 0 0 96px; display: flex; justify-content: flex-end; white-space: nowrap; }
.ov-due { flex: 0 0 88px; font-size: var(--fs-xs); color: var(--text-muted); white-space: nowrap; text-align: right; }
.ov-due--overdue { color: var(--high); font-weight: 700; }
/* Termín: plné datum na šířce, krátké („25. 6.") na úzkém displeji — přepíná media query níže */
.ov-due-short { display: none; }

/* Jemná hlavička sloupců nad stromem (Fáze 6) — shodné šířky slotů + pravý padding jako .ov-task,
   takže popisky Typ/Stav/Termín lícují s odznaky v řádcích. */
.ov-tree-head {
    display: flex; align-items: center; gap: 8px;
    padding: 4px 8px 5px 14px; margin-bottom: 2px;
    font-size: var(--fs-2xs); font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
    color: var(--text-muted); border-bottom: 1px solid var(--border);
}
.ov-th-flag   { flex: 0 0 15px; }
.ov-th-main   { flex: 1; min-width: 0; }
.ov-th-type   { flex: 0 0 34px; text-align: center; }
.ov-th-status { flex: 0 0 96px; text-align: right; }
.ov-th-due    { flex: 0 0 88px; text-align: right; }

/* mobil — menší krok odsazení, ať se vejde obsah */
@media (pointer: coarse) {
    .ov-node .ov-node { margin-left: 14px; }
}

/* mobil <700px (Fáze 6, volba A) — zúžit pevné sloupce, nic neschovávat; Termín přepnout na krátké datum.
   Třídy .ov-task-type/.ov-status/.ov-due/.ov-th-* jsou jen ve stromu, ploché tabulky to neovlivní. */
@media (max-width: 700px) {
    .ov-task-type, .ov-th-type   { flex-basis: 26px; }
    .ov-status,    .ov-th-status { flex-basis: 70px; }
    .ov-status .status-badge     { padding: 2px 5px; font-size: 10px; }
    .ov-due,       .ov-th-due    { flex-basis: 54px; font-size: 11px; }
    .ov-th-due                   { white-space: nowrap; overflow: hidden; }
    .ov-due-full  { display: none; }
    .ov-due-short { display: inline; }
}

/* ---------------------------------------------------------------------------
   Celkový přehled na úzkých displejích (mobil/tablet) — tabulka → mřížka karet.
   Pevné sloupce zabírají ~714 px, takže pod 960 px už pro název není místo a
   řádek se zdrtí. Pod 960 px se proto řádky stanou kartami. Mřížka sama mění
   počet sloupců podle šířky (laptop ~3, tablet 2, mobil 1). Nic se neschovává,
   název se vždy plně zalomí, žádný horizontální scroll.
   --------------------------------------------------------------------------- */
@media (max-width: 960px) {
    .overview-table,
    .overview-table tbody {
        display: block;
    }
    .overview-table thead,
    .overview-table colgroup {
        display: none;
    }

    /* Mřížka karet — auto-fill drží karty ≥ 300 px, počet sloupců dle místa */
    .overview-table tbody {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
        gap: 10px;
        align-items: start;
    }

    /* Řádek → karta */
    .overview-table .task-row {
        display: block;
        position: relative;
        background: var(--surface);
        border: 1px solid var(--outline-variant);
        border-radius: var(--radius-lg);
        padding: 12px 14px 10px;
        cursor: pointer;
    }
    .overview-table .task-row:hover { background: var(--surface); }
    .overview-table .task-row--expanded { background: var(--surface); }

    /* Buňky karty zploštit na bloky */
    .overview-table .task-row td {
        display: block;
        border: none;
        padding: 0;
        overflow: visible;
        white-space: normal;
    }

    /* Rozbalovací šipka do pravého horního rohu karty */
    .overview-table .task-row .col-expand {
        position: absolute;
        top: 8px;
        right: 6px;
        width: auto;
        padding: 0;
    }

    /* Hlavička karty: pracovník + název (plně zalomený) */
    .overview-table .task-row .col-task { padding-right: 28px; }
    .overview-table .task-row .col-task .task-title-text {
        white-space: normal;
        font-size: 15px;
        line-height: 1.3;
    }
    /* zrušit desktopové odsazení podúkolu v seskupeném pohledu */
    .overview-table--grouped .task-row--child .col-task { padding-left: 0; }
    .overview-table--grouped .task-row--child .col-expand { box-shadow: none; }

    /* Souhrnný úkol jako jemný řádek pod názvem */
    .overview-table .task-row .col-master {
        margin-top: 4px;
        font-size: var(--fs-sm);
        font-style: italic;
    }
    .overview-table .task-row .col-master::before {
        content: '\2211\00a0';   /* ∑ + nbsp */
        color: var(--primary);
        font-style: normal;
    }

    /* Metadata = pás chipů, nic se neztrácí */
    .overview-table .task-row .col-status,
    .overview-table .task-row .col-priority,
    .overview-table .task-row .col-due,
    .overview-table .task-row .col-work,
    .overview-table .task-row .col-assigned {
        display: inline-flex;
        align-items: center;
        width: auto;
        margin: 8px 10px 0 0;
        font-size: var(--fs-sm);
        color: var(--text-muted);
    }
    .overview-table .task-row .col-status { margin-top: 10px; }
    .overview-table .task-row .col-due::before  { content: '\1F4C5'; margin-right: 5px; }
    .overview-table .task-row .col-work::before { content: '\23F1'; margin-right: 5px; }
    .overview-table .task-row .col-assigned::before {
        content: '\203A';
        margin-right: 5px;
        color: var(--outline);
        font-weight: 700;
    }

    /* Prázdné buňky (—) v kartě skrýt */
    .overview-table .task-row .col-empty { display: none; }

    /* Skupinová hlavička přes celou šířku mřížky */
    .overview-table .task-group-header {
        display: block;
        grid-column: 1 / -1;
    }
    .overview-table .task-group-header td { display: block; }

    /* Rozbalený detail přes celou šířku mřížky, pod svým úkolem */
    .overview-table .task-detail-row {
        display: block;
        grid-column: 1 / -1;
        background: var(--surface-container-low);
        border: 1px solid var(--outline-variant);
        border-radius: var(--radius-lg);
    }
    .overview-table .task-detail-row td {
        display: block;
        padding: 0;
        border: none;
        background: none;
    }
    .overview-table .task-detail-row .task-detail-accent { display: none; }
}

/* Statistiky: grid karet */
.stats-header {
    padding: 16px 0 12px;
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: 16px;
    padding-bottom: 32px;
}

.stat-card {
    background: var(--surface-container-lowest, var(--surface));
    border: 1px solid var(--outline-variant);
    border-radius: var(--radius-lg);
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.stat-card-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
}

.stat-name {
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: var(--fs-base);
    color: var(--text);
}

.stat-overdue {
    font-size: 11px;
    color: #c62828;
    white-space: nowrap;
}

.stat-session-badge {
    font-size: var(--fs-sm);
    padding: 4px 8px;
    border-radius: var(--radius);
    display: flex;
    align-items: center;
    gap: 6px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.stat-session--active {
    background: #e8f5e9;
    color: #2e7d32;
}

.stat-counts {
    display: flex;
    gap: 0;
    border: 1px solid var(--outline-variant);
    border-radius: var(--radius);
    overflow: hidden;
}

.stat-count {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 8px 4px;
    border-right: 1px solid var(--outline-variant);
}

.stat-count:last-child {
    border-right: none;
}

.stat-count-n {
    font-size: 20px;
    font-weight: 700;
    font-family: var(--font-heading);
    color: var(--text);
    line-height: 1;
}

.stat-count-l {
    font-size: 10px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-top: 2px;
}

.stat-count--done .stat-count-n {
    color: #2e7d32;
}

.stat-meta {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: var(--fs-sm);
    color: var(--text-muted);
}

.stat-meta strong {
    color: var(--text);
}

.stat-card-footer {
    margin-top: auto;
    padding-top: 4px;
}

/* Nav separator */
.nav-separator {
    width: 1px;
    height: 18px;
    background: var(--outline-variant);
    margin: 0 4px;
}

/* -------------------------------------------------------------------------
   PWA — Update banner
   ------------------------------------------------------------------------- */

.update-banner {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 2000;
    background: var(--primary);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 10px 16px;
    font-size: 13px;
    font-family: var(--font-ui, 'Space Grotesk', sans-serif);
}

.update-banner[hidden] { display: none; }

.update-banner-btn {
    background: rgba(255, 255, 255, 0.18);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: var(--radius);
    padding: 4px 14px;
    cursor: pointer;
    font-size: 12px;
    font-family: inherit;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    transition: background 0.15s;
}

.update-banner-btn:hover {
    background: rgba(255, 255, 255, 0.28);
}

/* Sticky header se posune pod banner */
.update-banner:not([hidden]) ~ .site-header {
    top: 44px;
}

/* -------------------------------------------------------------------------
   Servisní login (impersonation) — nápadný varovný banner (docs/46)
   Výrazná amber barva (NE primární modrá), ať je nezaměnitelný a jasně říká,
   že jde o developera přihlášeného do účtu zákazníka, jen pro čtení.
   ------------------------------------------------------------------------- */
.impersonation-banner {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 2147483000; /* nad vším ostatním, vč. modalů */
    background: repeating-linear-gradient(
        45deg, #b45309, #b45309 14px, #92400e 14px, #92400e 28px);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 9px 16px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.01em;
    font-family: var(--font-ui, 'Space Grotesk', sans-serif);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}

.impersonation-banner__text {
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
}

.impersonation-banner__exit {
    flex-shrink: 0;
    background: #fff;
    color: #92400e;
    border: none;
    border-radius: var(--radius);
    padding: 5px 14px;
    cursor: pointer;
    font-size: 12px;
    font-family: inherit;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    transition: background 0.15s;
}

.impersonation-banner__exit:hover {
    background: #fde68a;
}

/* Posun obsahu pod fixní banner (sticky header i běžný obsah ve všech 4 shellech) */
body.impersonating {
    padding-top: 40px;
}

body.impersonating .site-header {
    top: 40px;
}

/* -------------------------------------------------------------------------
   PWA — Install button v desktop nav
   ------------------------------------------------------------------------- */

.nav-install-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--primary);
    border: 1px solid var(--primary);
    border-radius: var(--radius);
    padding: 4px 12px;
    background: transparent;
    cursor: pointer;
    font-family: var(--font-ui, 'Space Grotesk', sans-serif);
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    transition: background 0.15s, color 0.15s;
}

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

.nav-install-btn[hidden] { display: none; }

/* -------------------------------------------------------------------------
   PWA — Mobilní install prompt (nad bottom nav)
   ------------------------------------------------------------------------- */

.mobile-install-prompt {
    position: fixed;
    bottom: 76px; /* nad bottom nav */
    left: 12px;
    right: 12px;
    background: var(--surface-container, #EEF2F3);
    border: 1px solid var(--outline-variant);
    border-radius: var(--radius-lg);
    padding: 12px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    z-index: 200;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
    font-size: 13px;
}

.mobile-install-prompt[hidden] { display: none; }

.mobile-install-close {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--text-secondary, #6B7680);
    font-size: 18px;
    line-height: 1;
    padding: 2px 4px;
    flex-shrink: 0;
}

html.dark .mobile-install-prompt {
    background: var(--surface-variant, #1E2428);
    border-color: rgba(64, 72, 75, 0.5);
}

/* Zobrazit jen na mobilech */
@media (min-width: 640px) {
    .mobile-install-prompt { display: none !important; }
}