:root {
    color-scheme: dark;

    --sklady-page-overlay:
        linear-gradient(180deg, rgba(5, 12, 30, .56), rgba(5, 12, 30, .88));
    --sklady-glass: rgba(15, 23, 42, .78);
    --sklady-glass-strong: rgba(15, 23, 42, .94);
    --sklady-border: rgba(255, 255, 255, .11);
    --sklady-border-strong: rgba(125, 211, 252, .36);
    --sklady-text: #f8fafc;
    --sklady-muted: rgba(226, 232, 240, .72);
    --sklady-soft: rgba(148, 163, 184, .16);
    --sklady-field-bg: rgba(2, 6, 23, .68);
    --sklady-field-text: #f8fafc;
    --sklady-field-border: rgba(148, 163, 184, .28);
    --sklady-shadow: 0 18px 55px rgba(0, 0, 0, .34);
    --sklady-shadow-soft: 0 10px 30px rgba(0, 0, 0, .22);
    --sklady-primary: #2563eb;
    --sklady-primary-hover: #1d4ed8;
    --sklady-primary-soft: rgba(37, 99, 235, .20);
    --sklady-danger-soft: rgba(239, 68, 68, .17);
    --sklady-danger-border: rgba(248, 113, 113, .52);
    --sklady-success-soft: rgba(34, 197, 94, .16);
    --sklady-success-border: rgba(74, 222, 128, .48);
}

html[data-theme="light"] {
    color-scheme: light;

    --bg: #e8eef8;
    --panel: rgba(255, 255, 255, .80);
    --panel-strong: rgba(255, 255, 255, .96);
    --line: rgba(15, 23, 42, .13);
    --text: #0f172a;
    --muted: rgba(51, 65, 85, .78);
    --shadow: 0 24px 70px rgba(51, 65, 85, .18);

    --sklady-page-overlay:
        linear-gradient(180deg, rgba(241, 245, 249, .72), rgba(226, 232, 240, .91));
    --sklady-glass: rgba(255, 255, 255, .80);
    --sklady-glass-strong: rgba(255, 255, 255, .96);
    --sklady-border: rgba(15, 23, 42, .13);
    --sklady-border-strong: rgba(37, 99, 235, .31);
    --sklady-text: #0f172a;
    --sklady-muted: rgba(51, 65, 85, .76);
    --sklady-soft: rgba(15, 23, 42, .06);
    --sklady-field-bg: rgba(255, 255, 255, .96);
    --sklady-field-text: #0f172a;
    --sklady-field-border: rgba(15, 23, 42, .18);
    --sklady-shadow: 0 18px 55px rgba(51, 65, 85, .20);
    --sklady-shadow-soft: 0 10px 30px rgba(51, 65, 85, .14);
    --sklady-primary-soft: rgba(37, 99, 235, .11);
    --sklady-danger-soft: rgba(239, 68, 68, .10);
    --sklady-danger-border: rgba(220, 38, 38, .30);
    --sklady-success-soft: rgba(34, 197, 94, .10);
    --sklady-success-border: rgba(22, 163, 74, .28);
}

html,
body {
    min-height: 100%;
}

body {
    transition: color .2s ease, background-color .2s ease;
}

body.sofon-app-body {
    color: var(--sklady-text) !important;
    background:
        var(--sklady-page-overlay),
        url('/bg.jpg') center / cover fixed no-repeat !important;
}

.glass {
    background: var(--sklady-glass) !important;
    border: 1px solid var(--sklady-border) !important;
    box-shadow: var(--sklady-shadow-soft) !important;
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

/* Přepínač motivu */
.theme-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .48rem;
    min-height: 42px;
    padding: .58rem .9rem;
    border: 1px solid var(--sklady-border);
    border-radius: .9rem;
    color: var(--sklady-text);
    background: var(--sklady-glass);
    box-shadow: var(--sklady-shadow-soft);
    cursor: pointer;
    font: inherit;
    font-size: .875rem;
    font-weight: 700;
    line-height: 1.15;
    white-space: nowrap;
    transition:
        transform .2s ease,
        background .2s ease,
        border-color .2s ease,
        box-shadow .2s ease;
}

.theme-toggle:hover {
    transform: translateY(-1px);
    background: var(--sklady-glass-strong);
    border-color: var(--sklady-border-strong);
}

.theme-toggle:focus-visible,
.app-action-link:focus-visible,
.app-menu-item:focus-visible,
.auth-control:focus-visible,
.auth-submit:focus-visible,
.auth-back-link:focus-visible {
    outline: 3px solid rgba(56, 189, 248, .34);
    outline-offset: 3px;
}

.theme-toggle-landing {
    box-shadow: none;
}

/* Hlavička a menu aplikace */
.app-shell {
    width: 100%;
    padding: 1.25rem;
}

.app-header {
    margin-bottom: 1.5rem;
    padding: clamp(1.1rem, 2vw, 2rem);
}

.app-brand {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    text-align: left;
}

.app-logo {
    display: block;
    width: 82px;
    height: 82px;
    flex: 0 0 82px;
    object-fit: cover;
    border-radius: 1.4rem;
    box-shadow: var(--sklady-shadow-soft);
}

.app-brand-kicker {
    margin: 0 0 .22rem;
    color: var(--sklady-muted);
    font-size: .78rem;
    font-weight: 800;
    letter-spacing: .13em;
    text-transform: uppercase;
}

.app-brand h1 {
    margin: 0;
    color: var(--sklady-text);
    font-size: clamp(2rem, 4vw, 3.25rem);
    font-weight: 900;
    line-height: 1.02;
    letter-spacing: -.04em;
}

.app-user-meta {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .65rem;
    margin: 1.2rem auto 0;
}

.app-meta-chip {
    display: inline-flex;
    align-items: baseline;
    gap: .42rem;
    min-height: 38px;
    padding: .52rem .78rem;
    border: 1px solid var(--sklady-border);
    border-radius: 999px;
    background: var(--sklady-soft);
    color: var(--sklady-text);
}

.app-meta-chip small {
    color: var(--sklady-muted);
    font-size: .75rem;
    font-weight: 700;
}

.app-meta-chip strong {
    font-size: .875rem;
    font-weight: 800;
}

.app-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .7rem;
    margin-top: 1rem;
}

.app-action-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    min-height: 42px;
    padding: .58rem .9rem;
    border-radius: .9rem;
    color: var(--sklady-text);
    font-size: .875rem;
    font-weight: 700;
    text-decoration: none;
}

.menu-link {
    transition:
        transform .2s ease,
        background .2s ease,
        border-color .2s ease,
        box-shadow .2s ease;
}

.menu-link:hover {
    transform: translateY(-2px);
    background: var(--sklady-glass-strong) !important;
    border-color: var(--sklady-border-strong) !important;
}

.app-menu-wrap {
    margin-top: 1.35rem;
    padding-top: 1.35rem;
    border-top: 1px solid var(--sklady-border);
}

.app-menu-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: .72rem;
}

.app-menu-item {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .62rem;
    min-height: 68px;
    padding: .85rem 1rem;
    border-radius: 1.05rem;
    color: var(--sklady-text);
    font-size: .98rem;
    font-weight: 800;
    text-align: center;
    text-decoration: none;
}

.app-menu-item.is-active {
    background: var(--sklady-primary-soft) !important;
    border-color: rgba(96, 165, 250, .48) !important;
    box-shadow: inset 0 0 0 1px rgba(96, 165, 250, .12), var(--sklady-shadow-soft) !important;
}

.app-menu-icon {
    font-size: 1.18rem;
    line-height: 1;
}

/* Výběr oddělení, lokální přihlášení a změna hesla */
.auth-page {
    display: grid;
    place-items: center;
    min-height: 100vh;
    padding: clamp(1rem, 4vw, 2.5rem);
}

.auth-card {
    width: min(100%, 560px);
    padding: clamp(1.35rem, 4vw, 2.35rem);
    border-radius: 1.8rem;
    box-shadow: var(--sklady-shadow) !important;
}

.auth-card-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}

.auth-brand {
    display: flex;
    align-items: center;
    gap: .9rem;
    min-width: 0;
}

.auth-logo {
    display: block;
    width: 74px;
    height: 74px;
    flex: 0 0 74px;
    object-fit: cover;
    border-radius: 1.3rem;
    box-shadow: var(--sklady-shadow-soft);
}

.auth-brand-kicker {
    margin: 0 0 .18rem;
    color: var(--sklady-muted);
    font-size: .69rem;
    font-weight: 800;
    letter-spacing: .11em;
    text-transform: uppercase;
}

.auth-brand-title {
    margin: 0;
    color: var(--sklady-text);
    font-size: clamp(1.45rem, 5vw, 2rem);
    font-weight: 900;
    line-height: 1.05;
    letter-spacing: -.035em;
}

.auth-theme-toggle {
    flex: 0 0 auto;
    min-height: 40px;
    padding: .52rem .78rem;
}

.auth-divider {
    height: 1px;
    margin: 1.35rem 0;
    background: var(--sklady-border);
}

.auth-heading {
    margin-bottom: 1.2rem;
}

.auth-eyebrow {
    display: inline-flex;
    margin-bottom: .5rem;
    color: #60a5fa;
    font-size: .74rem;
    font-weight: 900;
    letter-spacing: .12em;
    text-transform: uppercase;
}

html[data-theme="light"] .auth-eyebrow {
    color: #1d4ed8;
}

.auth-heading h1 {
    margin: 0;
    color: var(--sklady-text);
    font-size: clamp(1.75rem, 5vw, 2.35rem);
    font-weight: 900;
    line-height: 1.08;
    letter-spacing: -.035em;
}

.auth-heading p {
    margin: .62rem 0 0;
    color: var(--sklady-muted);
    font-size: .95rem;
    line-height: 1.6;
}

.auth-department {
    display: flex;
    align-items: center;
    gap: .72rem;
    margin: 0 0 1.15rem;
    padding: .8rem .9rem;
    border: 1px solid var(--sklady-border);
    border-radius: 1rem;
    background: var(--sklady-soft);
}

.auth-department > span:first-child {
    font-size: 1.25rem;
}

.auth-department small,
.auth-department strong {
    display: block;
}

.auth-department small {
    color: var(--sklady-muted);
    font-size: .72rem;
    font-weight: 700;
}

.auth-department strong {
    margin-top: .12rem;
    color: var(--sklady-text);
    font-size: .94rem;
    font-weight: 850;
}

.auth-form {
    display: grid;
    gap: .72rem;
}

.auth-label {
    color: var(--sklady-text);
    font-size: .86rem;
    font-weight: 800;
}

.auth-control {
    width: 100%;
    min-height: 48px;
    margin: 0 0 .25rem;
    padding: .72rem .86rem;
    border: 1px solid var(--sklady-field-border);
    border-radius: .9rem;
    background: var(--sklady-field-bg);
    color: var(--sklady-field-text);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04);
    font: inherit;
    transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}

.auth-control:hover {
    border-color: var(--sklady-border-strong);
}

.auth-control:focus {
    border-color: rgba(59, 130, 246, .76);
    box-shadow: 0 0 0 4px rgba(59, 130, 246, .15);
}

.auth-control option {
    background: var(--sklady-glass-strong);
    color: var(--sklady-text);
}

.auth-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .65rem;
    width: 100%;
    min-height: 50px;
    margin-top: .35rem;
    padding: .78rem 1rem;
    border: 0;
    border-radius: .95rem;
    background: var(--sklady-primary);
    color: #fff;
    box-shadow: 0 12px 24px rgba(37, 99, 235, .24);
    cursor: pointer;
    font: inherit;
    font-weight: 850;
    transition: transform .2s ease, background .2s ease, box-shadow .2s ease;
}

.auth-submit:hover {
    transform: translateY(-1px);
    background: var(--sklady-primary-hover);
    box-shadow: 0 15px 28px rgba(37, 99, 235, .30);
}

.auth-back-link {
    display: block;
    width: fit-content;
    margin: 1.1rem auto 0;
    color: var(--sklady-muted);
    font-size: .84rem;
    font-weight: 750;
    text-decoration: none;
    transition: color .2s ease;
}

.auth-back-link:hover {
    color: var(--sklady-text);
}

.auth-alert {
    margin-bottom: 1rem;
    padding: .82rem .92rem;
    border: 1px solid;
    border-radius: .95rem;
    font-size: .88rem;
    line-height: 1.45;
}

.auth-alert-error {
    border-color: var(--sklady-danger-border);
    background: var(--sklady-danger-soft);
}

.auth-alert-success {
    border-color: var(--sklady-success-border);
    background: var(--sklady-success-soft);
}

/* Světlý režim obecného rozhraní a landing page */
html[data-theme="light"] body:not(.sofon-app-body) {
    background:
        var(--sklady-page-overlay),
        url('/bg.jpg') center / cover fixed no-repeat;
}

html[data-theme="light"] .site-header,
html[data-theme="light"] .feature-card,
html[data-theme="light"] .workflow-step,
html[data-theme="light"] .overview-panel,
html[data-theme="light"] .visual-card,
html[data-theme="light"] .floating-card,
html[data-theme="light"] .cta {
    border-color: var(--line);
    background: var(--panel);
    box-shadow: var(--shadow);
}

html[data-theme="light"] .page-glow {
    opacity: .11;
}

html[data-theme="light"] .text-white,
html[data-theme="light"] .text-white\/75,
html[data-theme="light"] .text-white\/70,
html[data-theme="light"] .text-white\/60,
html[data-theme="light"] .text-white\/50,
html[data-theme="light"] .text-white\/40,
html[data-theme="light"] .text-white\/30 {
    color: var(--sklady-text) !important;
}

html[data-theme="light"] .text-white\/75,
html[data-theme="light"] .text-white\/70,
html[data-theme="light"] .text-white\/60,
html[data-theme="light"] .text-white\/50,
html[data-theme="light"] .text-white\/40,
html[data-theme="light"] .text-white\/30 {
    opacity: .74;
}

html[data-theme="light"] .border-white\/10,
html[data-theme="light"] .border-white\/5,
html[data-theme="light"] .border-white\/20 {
    border-color: rgba(15, 23, 42, .13) !important;
}

html[data-theme="light"] .bg-white\/10,
html[data-theme="light"] .bg-white\/5 {
    background-color: rgba(15, 23, 42, .07) !important;
}

html[data-theme="light"] .hover\:bg-white\/10:hover,
html[data-theme="light"] .hover\:bg-white\/5:hover {
    background-color: rgba(15, 23, 42, .09) !important;
}

html[data-theme="light"] .bg-slate-800,
html[data-theme="light"] .bg-slate-900 {
    background-color: rgba(255, 255, 255, .96) !important;
    color: #0f172a !important;
}

html[data-theme="light"] table {
    color: #0f172a;
}

html[data-theme="light"] input:not([type="checkbox"]):not([type="radio"]):not(.auth-control),
html[data-theme="light"] select:not(.auth-control),
html[data-theme="light"] textarea:not(.auth-control) {
    background-color: rgba(255, 255, 255, .96);
    color: #0f172a;
    border-color: rgba(15, 23, 42, .16);
}

@media (max-width: 760px) {
    .app-shell {
        padding: .75rem;
    }

    .app-header {
        padding: 1rem .35rem;
    }

    .app-brand {
        align-items: center;
    }

    .app-logo {
        width: 66px;
        height: 66px;
        flex-basis: 66px;
        border-radius: 1.1rem;
    }

    .app-brand-kicker {
        font-size: .64rem;
    }

    .app-meta-chip {
        width: 100%;
        justify-content: space-between;
        border-radius: .85rem;
    }

    .app-actions {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        width: 100%;
    }

    .app-action-link,
    .app-actions .theme-toggle {
        width: 100%;
        min-width: 0;
        padding-inline: .65rem;
    }

    .app-menu-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .app-menu-item {
        min-height: 62px;
        padding: .72rem .55rem;
        font-size: .88rem;
    }

    .auth-card-top {
        align-items: center;
    }

    .auth-theme-toggle [data-theme-label],
    .app-actions .theme-toggle [data-theme-label] {
        display: none;
    }
}

@media (max-width: 480px) {
    .auth-card {
        padding: 1.2rem;
        border-radius: 1.35rem;
    }

    .auth-logo {
        width: 60px;
        height: 60px;
        flex-basis: 60px;
        border-radius: 1rem;
    }

    .auth-brand-kicker {
        display: none;
    }

    .auth-theme-toggle {
        min-width: 42px;
        padding-inline: .68rem;
    }

    .app-actions {
        grid-template-columns: 1fr;
    }

    .app-menu-grid {
        grid-template-columns: 1fr;
    }
}