/* SOFON_HEALTH_UI_014A1 */

:root {
    --danger: #ff6b6b;
    --accent-red: #e4525d;
    --surface-color: rgba(14, 39, 49, .84);
    --border-color: var(--border);
    --muted-color: var(--muted);
    --input-background: rgba(255, 255, 255, .045);
    --soft-background: rgba(255, 255, 255, .03);
    --strong-surface: rgba(10, 31, 39, .96);
    --overlay: rgba(2, 10, 14, .78);
}

html[data-theme="light"] {
    --background: #f7fbff;
    --background-soft: #edf5fb;
    --surface: rgba(255, 255, 255, .9);
    --surface-strong: #ffffff;
    --surface-light: rgba(29, 103, 191, .065);
    --border: rgba(34, 96, 164, .17);
    --text: #14243a;
    --muted: #5e7188;
    --primary: #1769c2;
    --primary-dark: #0d4f9f;
    --secondary: #348bd0;
    --warning: #a8680b;
    --danger: #c9333d;
    --accent-red: #d94752;
    --shadow: 0 24px 72px rgba(31, 77, 130, .14);
    --surface-color: rgba(255, 255, 255, .94);
    --border-color: rgba(34, 96, 164, .17);
    --muted-color: #5e7188;
    --input-background: rgba(245, 250, 255, .94);
    --soft-background: rgba(232, 242, 251, .68);
    --strong-surface: #ffffff;
    --overlay: rgba(16, 34, 55, .56);
}

html {
    background: var(--background);
}

body {
    transition:
        color .24s ease,
        background .35s ease;
}

html[data-theme="light"] body {
    color: var(--text);
    background:
        radial-gradient(
            circle at 10% 0,
            rgba(45, 130, 214, .17),
            transparent 35%
        ),
        radial-gradient(
            circle at 92% 16%,
            rgba(218, 68, 80, .11),
            transparent 31%
        ),
        linear-gradient(
            145deg,
            #ffffff,
            #f3f8fd 52%,
            #eef6fc
        );
}

.background-gradient {
    position: fixed;
    z-index: -4;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
}

.background-gradient::before,
.background-gradient::after {
    position: absolute;
    width: 62vw;
    height: 62vw;
    border-radius: 50%;
    content: "";
    filter: blur(58px);
    opacity: .12;
    animation:
        health-gradient-drift
        24s
        ease-in-out
        infinite
        alternate;
}

.background-gradient::before {
    top: -32vw;
    left: -22vw;
    background:
        radial-gradient(
            circle,
            var(--primary),
            transparent 68%
        );
}

.background-gradient::after {
    right: -27vw;
    bottom: -37vw;
    background:
        radial-gradient(
            circle,
            var(--secondary),
            transparent 68%
        );
    animation-direction: alternate-reverse;
    animation-duration: 29s;
}

html[data-theme="light"] .background-gradient::after {
    background:
        radial-gradient(
            circle,
            var(--accent-red),
            transparent 68%
        );
}

html[data-theme="light"] .orb-one {
    background:
        radial-gradient(
            circle,
            rgba(31, 119, 208, .27),
            transparent 68%
        );
}

html[data-theme="light"] .orb-two {
    background:
        radial-gradient(
            circle,
            rgba(222, 65, 78, .17),
            transparent 68%
        );
}

html[data-theme="light"] .background-grid {
    opacity: .25;
    background-image:
        linear-gradient(
            rgba(30, 92, 157, .07) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(30, 92, 157, .07) 1px,
            transparent 1px
        );
    mask-image:
        linear-gradient(
            to bottom,
            rgba(0, 0, 0, .58),
            transparent 91%
        );
}

.ui-icon {
    width: 1.15rem;
    height: 1.15rem;
    flex: 0 0 auto;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    margin: -1px;
    padding: 0;
    border: 0;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.site-header {
    gap: 24px;
}

.app-header {
    padding-bottom: 13px;
}

.landing-header .header-actions,
.app-header .header-actions {
    justify-content: flex-end;
}

.brand-logo {
    overflow: hidden;
    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, .11),
            rgba(255, 255, 255, .025)
        );
}

.brand-logo img {
    display: block;
    border-radius: 13px;
    object-fit: contain;
}

html[data-theme="light"] .brand-logo {
    border-color: rgba(31, 103, 177, .18);
    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, .98),
            rgba(231, 242, 252, .92)
        );
    box-shadow:
        0 12px 30px
        rgba(31, 77, 130, .13);
}

.user-chip-icon {
    display: grid;
    width: 30px;
    height: 30px;
    flex: 0 0 auto;
    place-items: center;
    border-radius: 10px;
    color: var(--primary);
    background:
        color-mix(
            in srgb,
            var(--primary) 12%,
            transparent
        );
}

.user-chip-icon .ui-icon {
    width: 17px;
    height: 17px;
}

.theme-toggle,
.privacy-button,
.top-action {
    white-space: nowrap;
}

.theme-toggle {
    min-width: 132px;
}

.theme-toggle-icon {
    display: inline-grid;
    width: 22px;
    height: 22px;
    place-items: center;
    font-size: 1.08rem;
    line-height: 1;
}

.privacy-button {
    width: 44px;
    min-width: 44px;
    padding-right: 10px;
    padding-left: 10px;
    color: var(--primary);
}

.privacy-button:hover {
    color: var(--accent-red);
    border-color:
        color-mix(
            in srgb,
            var(--accent-red) 40%,
            transparent
        );
    background:
        color-mix(
            in srgb,
            var(--accent-red) 9%,
            transparent
        );
}

.module-nav-shell {
    position: relative;
    z-index: 9;
    width: min(1180px, calc(100% - 40px));
    margin: 0 auto 24px;
    padding: 8px;
    border: 1px solid var(--border);
    border-radius: 20px;
    background:
        color-mix(
            in srgb,
            var(--surface-strong) 78%,
            transparent
        );
    box-shadow:
        0 16px 44px
        rgba(0, 0, 0, .1);
    backdrop-filter: blur(18px);
}

.module-nav {
    display: grid;
    max-width: 100%;
    align-items: stretch;
    overflow: visible;
    gap: 7px;
    grid-template-columns:
        repeat(10, minmax(0, 1fr));
}

.module-nav.is-admin {
    grid-template-columns:
        repeat(7, minmax(0, 1fr));
}

.module-nav-item {
    position: relative;
    display: flex;
    min-width: 0;
    min-height: 76px;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 7px;
    padding: 10px 8px;
    border: 1px solid var(--border);
    border-radius: 14px;
    color: var(--muted);
    background:
        color-mix(
            in srgb,
            var(--surface-light) 72%,
            transparent
        );
    font-size: .84rem;
    font-weight: 760;
    line-height: 1.1;
    text-align: center;
    white-space: nowrap;
    transition:
        color .18s ease,
        border-color .18s ease,
        background .18s ease,
        transform .18s ease,
        box-shadow .18s ease;
}

.module-nav-item:hover {
    color: var(--text);
    border-color: var(--border);
    background: var(--surface-light);
    transform: translateY(-1px);
}

.module-nav-item.is-active {
    color: #fff;
    border-color: transparent;
    background:
        linear-gradient(
            135deg,
            var(--primary),
            var(--primary-dark)
        );
    box-shadow:
        0 11px 26px
        color-mix(
            in srgb,
            var(--primary) 25%,
            transparent
        );
}

.module-nav-item.is-active::after {
    position: absolute;
    right: 18px;
    bottom: 4px;
    left: 18px;
    height: 2px;
    border-radius: 999px;
    background:
        color-mix(
            in srgb,
            var(--accent-red) 82%,
            white
        );
    content: "";
}

.module-nav-item .ui-icon {
    width: 22px;
    height: 22px;
    flex: 0 0 auto;
}

html[data-theme="light"] .site-header,
html[data-theme="light"] .module-nav-shell,
html[data-theme="light"] .site-footer {
    color: var(--text);
}

html[data-theme="light"] .button-primary {
    color: #fff;
    background:
        linear-gradient(
            135deg,
            #2379d0,
            #1159aa
        );
    box-shadow:
        0 12px 30px
        rgba(22, 95, 171, .2);
}

html[data-theme="light"] .button-primary:hover {
    box-shadow:
        0 16px 38px
        rgba(22, 95, 171, .28);
}

html[data-theme="light"] .button-secondary,
html[data-theme="light"] .button-ghost {
    color: var(--text);
    border-color: var(--border);
    background: rgba(255, 255, 255, .72);
}

html[data-theme="light"] .button-secondary:hover,
html[data-theme="light"] .button-ghost:hover {
    border-color: rgba(25, 105, 193, .38);
    background: rgba(28, 109, 198, .075);
}

html[data-theme="light"] .user-chip {
    border-color: var(--border);
    background: rgba(255, 255, 255, .79);
}

.site-footer a {
    color: inherit;
    transition:
        color .18s ease,
        opacity .18s ease;
}

.site-footer a:hover {
    color: var(--primary);
}

.footer-made {
    display: inline-block;
}

.privacy-section {
    padding-top: 45px;
    padding-bottom: 92px;
}

.privacy-grid {
    display: grid;
    margin-top: 32px;
    gap: 18px;
    grid-template-columns:
        repeat(4, minmax(0, 1fr));
}

.privacy-card {
    min-height: 225px;
    padding: 27px;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background:
        linear-gradient(
            145deg,
            rgba(19, 48, 58, .84),
            rgba(10, 31, 39, .82)
        );
    box-shadow:
        0 17px 50px
        rgba(0, 0, 0, .11);
}

.privacy-card-icon {
    display: grid;
    width: 52px;
    height: 52px;
    margin-bottom: 21px;
    place-items: center;
    border-radius: 17px;
    background:
        color-mix(
            in srgb,
            var(--primary) 13%,
            transparent
        );
    font-size: 1.55rem;
}

.privacy-card h3 {
    margin: 0 0 10px;
}

.privacy-card p {
    margin: 0;
    color: var(--muted);
    line-height: 1.67;
}

html[data-theme="light"] .privacy-card {
    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, .98),
            rgba(239, 247, 253, .94)
        );
    box-shadow:
        0 16px 42px
        rgba(35, 80, 126, .1);
}

.privacy-dialog {
    width: min(700px, calc(100% - 32px));
}

.privacy-modal-content {
    display: grid;
    gap: 16px;
    color: var(--muted);
    line-height: 1.7;
}

.privacy-modal-content p,
.privacy-modal-content ul {
    margin: 0;
}

.privacy-modal-content ul {
    display: grid;
    padding-left: 23px;
    gap: 10px;
}

.privacy-note {
    padding: 14px 16px;
    border: 1px solid
        color-mix(
            in srgb,
            var(--warning) 28%,
            transparent
        );
    border-radius: 13px;
    color:
        color-mix(
            in srgb,
            var(--warning) 72%,
            var(--text)
        );
    background:
        color-mix(
            in srgb,
            var(--warning) 8%,
            transparent
        );
}

.privacy-modal-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 22px;
}

.access-denied-main {
    display: grid;
    width: min(760px, calc(100% - 40px));
    min-height: calc(100vh - 260px);
    align-items: center;
    margin: 0 auto;
    padding: 55px 0 85px;
}

.access-denied-card {
    padding: clamp(30px, 6vw, 60px);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    text-align: center;
    background:
        linear-gradient(
            145deg,
            rgba(19, 48, 58, .91),
            rgba(10, 31, 39, .91)
        );
    box-shadow: var(--shadow);
    backdrop-filter: blur(20px);
}

.access-denied-icon {
    display: grid;
    width: 76px;
    height: 76px;
    margin: 0 auto 22px;
    place-items: center;
    border-radius: 24px;
    background:
        color-mix(
            in srgb,
            var(--accent-red) 14%,
            transparent
        );
    font-size: 2.2rem;
}

.access-denied-card .eyebrow {
    justify-content: center;
}

.access-denied-card h1 {
    margin: 0 0 15px;
    font-size: clamp(2.3rem, 7vw, 4.3rem);
    letter-spacing: -.045em;
}

.access-denied-card > p {
    max-width: 570px;
    margin: 0 auto 28px;
    color: var(--muted);
    line-height: 1.7;
}

.access-denied-card .hero-actions {
    justify-content: center;
}

html[data-theme="light"] .access-denied-card {
    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, .98),
            rgba(238, 247, 253, .96)
        );
}

/*
 * Světlý medicínský motiv.
 *
 * Modulové styly byly původně navržené výhradně pro tmavý
 * režim, proto jsou hlavní plochy a ovládací prvky přepsány
 * společnou bílou, modrou a červenou paletou.
 */
html[data-theme="light"] :is(
    .preview-window,
    .demo-card,
    .feature-grid article,
    .dashboard-card,
    .dashboard-welcome,
    .health-summary-card,
    .health-item-card,
    .health-section,
    .health-group,
    .health-chart-card,
    .health-record-card,
    .health-summary-stat,
    .health-summary-attention,
    .health-summary-panel,
    .health-summary-alert,
    .health-summary-row,
    .health-summary-tile,
    .care-summary-grid article,
    .care-section,
    .care-card,
    .care-tabs,
    .care-empty,
    .laboratory-summary-grid article,
    .laboratory-section,
    .laboratory-panel-card,
    .laboratory-result-card,
    .laboratory-empty,
    .records-summary-grid article,
    .records-section,
    .record-card,
    .records-empty,
    .documents-summary-grid article,
    .documents-section,
    .document-card,
    .documents-upload,
    .documents-empty,
    .reminders-summary-grid article,
    .reminders-section,
    .reminder-card,
    .reminders-empty,
    .exports-summary-grid article,
    .exports-section,
    .export-card,
    .exports-security-badge,
    .exports-empty,
    .operations-summary-card,
    .operations-panel,
    .operations-table-card,
    .operations-record,
    .import-operations-summary-card,
    .import-operations-panel,
    .import-preview-card,
    .import-preview-section,
    .import-plan-card,
    .import-plan-section,
    .import-request-card,
    .import-request-section,
    .empty-state
) {
    color: var(--text);
    border-color: var(--border);
    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, .98),
            rgba(241, 248, 253, .94)
        );
    box-shadow:
        0 15px 42px
        rgba(35, 80, 126, .09);
}

html[data-theme="light"] :is(
    .modal-dialog,
    .care-form-dialog,
    .laboratory-small-dialog,
    .laboratory-detail-dialog,
    .records-form-dialog,
    .documents-form-dialog,
    .reminder-form-dialog,
    .export-dialog,
    .maintenance-modal-card
) {
    color: var(--text);
    border-color: var(--border);
    background:
        linear-gradient(
            145deg,
            #ffffff,
            #eef6fc
        );
    box-shadow:
        0 26px 80px
        rgba(23, 57, 92, .22);
}

html[data-theme="light"] .modal-backdrop,
html[data-theme="light"] .maintenance-modal {
    background: var(--overlay);
}

html[data-theme="light"] :is(
    input,
    select,
    textarea,
    .health-filter-button,
    .care-tab,
    .document-filter,
    .reminder-filter
) {
    color: var(--text);
    border-color: var(--border);
    background: var(--input-background);
}

html[data-theme="light"] :is(
    input,
    textarea
)::placeholder {
    color: #8090a2;
}

html[data-theme="light"] select option {
    color: #14243a;
    background: #ffffff;
}

html[data-theme="light"] :is(
    table,
    thead,
    tbody,
    tr,
    th,
    td
) {
    border-color: var(--border);
}

html[data-theme="light"] :is(
    th,
    .table-heading
) {
    color: #35536f;
    background: rgba(226, 239, 250, .78);
}

html[data-theme="light"] :is(
    code,
    pre,
    .operations-code,
    .import-operations-event-details
) {
    color: #18334e;
    border-color: var(--border);
    background: rgba(226, 239, 250, .72);
}

html[data-theme="light"] :is(
    .health-toast,
    .care-toast,
    .laboratory-toast,
    .records-toast,
    .documents-toast,
    .reminders-toast,
    .exports-toast
) {
    color: #123b35;
    border-color: rgba(26, 139, 110, .24);
    background: rgba(235, 252, 247, .98);
    box-shadow:
        0 18px 50px
        rgba(30, 84, 72, .17);
}

html[data-theme="light"] :is(
    .health-toast[data-type="error"],
    .care-toast[data-type="error"],
    .laboratory-toast[data-type="error"],
    .records-toast[data-type="error"],
    .documents-toast[data-type="error"],
    .reminders-toast[data-type="error"],
    .exports-toast[data-type="error"]
) {
    color: #7d1d26;
    border-color: rgba(201, 51, 61, .27);
    background: rgba(255, 240, 242, .98);
}

html[data-theme="light"] :is(
    .danger,
    .has-error,
    [data-status="error"],
    [data-level="error"]
) {
    --danger-surface: rgba(201, 51, 61, .075);
}

html[data-theme="light"] .import-operations-page {
    --surface-color: rgba(255, 255, 255, .96);
    --border-color: var(--border);
    --muted-color: var(--muted);
}

html[data-theme="dark"] .import-operations-page {
    --surface-color: rgba(14, 39, 49, .84);
    --border-color: var(--border);
    --muted-color: var(--muted);
}

html[data-theme="dark"] .import-operations-page :is(
    .import-operations-summary-card,
    .import-operations-panel,
    .import-operations-event
) {
    color: var(--text);
    border-color: var(--border);
    background:
        linear-gradient(
            145deg,
            rgba(19, 48, 58, .91),
            rgba(10, 31, 39, .9)
        );
}

html[data-theme="dark"] .import-operations-page :is(
    .import-operations-event-details,
    pre
) {
    color: #d8e8e7;
    border-color: var(--border);
    background: rgba(2, 16, 22, .43);
}

@keyframes health-gradient-drift {
    from {
        transform:
            translate3d(-2%, -1%, 0)
            scale(1);
    }

    to {
        transform:
            translate3d(8%, 5%, 0)
            scale(1.12);
    }
}

@media (prefers-reduced-motion: reduce) {
    .background-gradient::before,
    .background-gradient::after,
    .background-orb {
        animation: none;
    }

    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
    }
}

@media (max-width: 1050px) {
    .privacy-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .module-nav,
    .module-nav.is-admin {
        grid-template-columns:
            repeat(4, minmax(0, 1fr));
    }
}

@media (max-width: 700px) {
    .site-header {
        width: min(100% - 26px, 1180px);
        align-items: stretch;
        flex-direction: column;
        gap: 13px;
    }

    .landing-header .header-actions,
    .app-header .header-actions {
        display: flex;
        width: 100%;
        align-items: center;
        overflow-x: auto;
        padding: 3px 1px 7px;
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: flex-start;
        scrollbar-width: thin;
    }

    .app-header .header-actions > *,
    .landing-header .header-actions > * {
        flex: 0 0 auto;
    }

    .app-header .user-chip {
        display: inline-flex;
    }

    .theme-toggle {
        min-width: 48px;
    }

    .theme-toggle [data-theme-label] {
        display: none;
    }

    .module-nav-shell {
        width: min(100% - 26px, 1180px);
        margin-bottom: 18px;
        padding: 6px;
        border-radius: 17px;
    }

    .module-nav,
    .module-nav.is-admin {
        grid-template-columns:
            repeat(3, minmax(0, 1fr));
    }

    .module-nav-item {
        min-height: 68px;
        padding: 9px 7px;
        gap: 5px;
        font-size: .8rem;
    }

    .module-nav-item .ui-icon {
        width: 20px;
        height: 20px;
    }

    .privacy-grid {
        grid-template-columns: 1fr;
    }

    .privacy-card {
        min-height: 0;
    }

    .access-denied-main {
        width: min(100% - 26px, 760px);
        min-height: calc(100vh - 300px);
        padding-top: 30px;
    }
}

@media (max-width: 470px) {
    .module-nav,
    .module-nav.is-admin {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .top-action span,
    .logout-action span {
        display: none;
    }

    .top-action,
    .logout-action {
        width: 42px;
        min-width: 42px;
        padding-right: 9px;
        padding-left: 9px;
    }

    .user-chip {
        padding-right: 10px;
        padding-left: 8px;
    }

    .user-chip > span:last-child small {
        display: none;
    }
}
/* SOFON_HEALTH_THEME_CONTRAST_HOTFIX_014A2 */

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

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

/* Přehled – úvodní panel má stejnou kartu jako ostatní moduly. */
html[data-theme="light"] .dashboard-welcome {
    padding: clamp(1.45rem, 3vw, 2.35rem);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, .98),
            rgba(240, 247, 253, .95)
        );
    box-shadow:
        0 18px 50px
        rgba(35, 80, 126, .1);
}

/* Lékařské upozornění – čitelné na všech stránkách ve světlém režimu. */
html[data-theme="light"] .medical-warning {
    border-color: rgba(169, 105, 12, .28);
    background:
        linear-gradient(
            145deg,
            rgba(255, 251, 235, .97),
            rgba(255, 245, 214, .92)
        );
    box-shadow:
        0 14px 36px
        rgba(123, 86, 18, .07);
}

html[data-theme="light"] .medical-warning > div {
    color: #795000;
    background: rgba(224, 164, 38, .16);
}

html[data-theme="light"] .medical-warning p {
    color: #624d20;
}

html[data-theme="light"] .medical-warning strong {
    color: #7b4b00;
}

/* Modální okna – popisky a pomocné texty nesmějí zůstat světlé. */
html[data-theme="light"] .modal-dialog {
    color: var(--text);
}

html[data-theme="light"] .modal-dialog :is(
    h1,
    h2,
    h3,
    h4,
    legend,
    label
) {
    color: var(--text);
}

html[data-theme="light"] :is(
    .health-field,
    .care-field,
    .laboratory-field,
    .records-field,
    .documents-field,
    .reminder-field
) > span,
html[data-theme="light"] :is(
    .import-request-confirm-label,
    .notification-rules label,
    .records-checkbox
) {
    color: #36536f;
}

html[data-theme="light"] :is(
    .health-field small,
    .care-description,
    .laboratory-method-description,
    .records-field small,
    .documents-field small,
    .reminder-field small,
    .notification-settings-intro
) {
    color: #61768c;
}

html[data-theme="light"] .modal-close {
    color: #49627d;
    border-color: var(--border);
    background: rgba(245, 250, 255, .96);
}

html[data-theme="light"] .modal-close:hover {
    color: #a82733;
    border-color: rgba(201, 51, 61, .28);
    background: rgba(255, 237, 239, .96);
}

html[data-theme="light"] .button:disabled,
html[data-theme="light"] .button[aria-disabled="true"] {
    color: #667b91;
    border-color: rgba(54, 94, 136, .15);
    background: rgba(226, 236, 246, .82);
    opacity: .78;
}

/* Exporty – úplný světlý režim. */
html[data-theme="light"] :is(
    .exports-hero,
    .export-option-card,
    .exports-progress,
    .export-history-card,
    .import-workflow-shell,
    .import-preview-section,
    .import-upload-card,
    .import-safety-card,
    .import-preview-result,
    .import-history-card,
    .import-plan-section,
    .import-plan-source-card,
    .import-plan-history-card,
    .import-plan-result,
    .import-request-section,
    .import-request-plan-card,
    .import-request-card,
    .import-request-dialog
) {
    color: var(--text);
    border-color: var(--border);
    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, .98),
            rgba(240, 247, 253, .95)
        );
    box-shadow:
        0 16px 44px
        rgba(35, 80, 126, .09);
}

html[data-theme="light"] :is(
    .export-option-card,
    .export-history-card,
    .import-workflow-shell,
    .import-preview-section,
    .import-plan-section,
    .import-request-section
) :is(p, small, li) {
    color: var(--muted);
}

html[data-theme="light"] :is(
    .export-option-card,
    .export-history-card,
    .import-workflow-shell,
    .import-preview-section,
    .import-plan-section,
    .import-request-section
) :is(h1, h2, h3, h4, strong) {
    color: var(--text);
}

html[data-theme="light"] .export-option-label {
    color: #17643f;
    background: rgba(36, 174, 111, .11);
}

html[data-theme="light"] .exports-progress {
    background: rgba(237, 249, 248, .88);
}

/* Obnova ze zálohy – nativní tmavá varianta místo světlého ostrůvku. */
html[data-theme="dark"] .import-workflow-shell {
    color: var(--text);
    border-color: var(--border);
    background:
        linear-gradient(
            145deg,
            rgba(17, 47, 57, .96),
            rgba(8, 28, 36, .95)
        );
    box-shadow:
        0 22px 60px
        rgba(0, 0, 0, .2);
}

html[data-theme="dark"] .import-workflow-heading p,
html[data-theme="dark"] .import-workflow-step-copy small,
html[data-theme="dark"] .import-workflow-status-copy p,
html[data-theme="dark"] .import-workflow-stats small {
    color: var(--muted);
}

html[data-theme="dark"] .import-workflow-safety {
    color: #9ff1db;
    border-color: rgba(85, 223, 182, .26);
    background: rgba(85, 223, 182, .08);
}

html[data-theme="dark"] .import-workflow-step button,
html[data-theme="dark"] .import-workflow-status,
html[data-theme="dark"] .import-workflow-stats span {
    color: var(--text);
    border-color: var(--border);
    background: rgba(255, 255, 255, .045);
}

html[data-theme="dark"] .import-workflow-step-marker,
html[data-theme="dark"] .import-workflow-status-icon {
    color: #d9e8e7;
    background: rgba(255, 255, 255, .09);
}

html[data-theme="dark"] .import-workflow-step-state,
html[data-theme="dark"] .import-workflow-status-copy small {
    color: #9eb4b3;
}

html[data-theme="dark"] .import-workflow-step[data-state="active"] button,
html[data-theme="dark"] .import-workflow-status[data-type="active"] {
    border-color: rgba(73, 173, 212, .38);
    background: rgba(73, 173, 212, .09);
}

html[data-theme="dark"] .import-workflow-step[data-state="complete"] button,
html[data-theme="dark"] .import-workflow-status[data-type="ready"] {
    border-color: rgba(85, 223, 182, .34);
    background: rgba(85, 223, 182, .08);
}

html[data-theme="dark"] .import-workflow-step[data-state="error"] button,
html[data-theme="dark"] .import-workflow-status[data-type="error"] {
    border-color: rgba(255, 107, 107, .34);
    background: rgba(255, 91, 91, .075);
}

/* Fronta importů – explicitní motiv má přednost před systémovým media query. */
html[data-theme="light"] :is(
    .import-operations-hero,
    .import-operations-panel,
    .import-operations-summary-card,
    .import-operations-alert,
    .import-operations-request-card,
    .import-operations-event
) {
    color: var(--text);
    border-color: var(--border);
    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, .98),
            rgba(240, 247, 253, .95)
        );
    box-shadow:
        0 15px 42px
        rgba(35, 80, 126, .09);
}

html[data-theme="light"] :is(
    .import-operations-request-main,
    .import-operations-event-main
) :is(small, summary) {
    color: #60758c;
}

html[data-theme="light"] .import-operations-event-main pre {
    color: #18334e;
    border: 1px solid var(--border);
    background: rgba(226, 239, 250, .78);
}

/* Provoz – vnitřní karty nesmějí respektovat tmavý systémový media query. */
html[data-theme="light"] :is(
    .operations-hero,
    .operations-panel,
    .operations-summary-card,
    .operations-alert,
    .operations-job-card,
    .operations-service-card,
    .operations-storage-card,
    .operations-worker-card,
    .operations-system-card
) {
    color: var(--text);
    border-color: var(--border);
    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, .98),
            rgba(240, 247, 253, .95)
        );
    box-shadow:
        0 15px 42px
        rgba(35, 80, 126, .09);
}

html[data-theme="light"] :is(
    .operations-job-main,
    .operations-service-card,
    .operations-storage-card,
    .operations-worker-card,
    .operations-system-card
) small,
html[data-theme="light"] :is(
    .operations-worker-card,
    .operations-system-card,
    .operations-definition-list
) dt {
    color: #60758c;
}

html[data-theme="light"] :is(
    .operations-worker-card dl > div,
    .operations-system-card dl > div,
    .operations-definition-list > div
) {
    border: 1px solid rgba(34, 96, 164, .1);
    background: rgba(231, 241, 250, .72);
}


/* SOFON_HEALTH_HELP_LAYOUT_014B */
.health-help-dialog {
    display: flex;
    width: min(980px, 100%);
    max-height: calc(100dvh - 32px);
    flex-direction: column;
    overflow: hidden;
    padding: 0;
}

.health-help-heading {
    display: flex;
    flex: 0 0 auto;
    padding: 30px 76px 18px 30px;
    gap: 16px;
}

.health-help-heading .modal-icon {
    margin: 0;
}

.health-help-heading h2 {
    margin: 4px 0 6px;
}

.health-help-heading p {
    margin: 0;
}

.health-help-search {
    display: grid;
    flex: 0 0 auto;
    margin: 0 30px 10px;
    gap: 7px;
    color: var(--muted);
    font-size: .82rem;
    font-weight: 800;
}

.health-help-search input {
    width: 100%;
    min-height: 48px;
    padding: 11px 14px;
    border: 1px solid var(--border);
    border-radius: 14px;
    outline: none;
    color: var(--text);
    background: var(--surface-light);
}

.health-help-search input:focus {
    border-color: color-mix(in srgb, var(--primary) 65%, transparent);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary) 13%, transparent);
}

.health-help-result {
    flex: 0 0 auto;
    margin: 0 30px 12px;
    color: var(--muted);
    font-size: .82rem;
}

.health-help-content {
    display: grid;
    min-height: 0;
    flex: 1 1 auto;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
    padding: 0 30px 24px;
    gap: 10px;
    -webkit-overflow-scrolling: touch;
}

.health-help-topic {
    border: 1px solid var(--border);
    border-radius: 16px;
    background: color-mix(in srgb, var(--surface-light) 82%, transparent);
}

.health-help-topic[hidden] {
    display: none;
}

.health-help-topic summary {
    padding: 15px 18px;
    color: var(--text);
    cursor: pointer;
    font-weight: 850;
    line-height: 1.35;
}

.health-help-topic[open] summary {
    border-bottom: 1px solid var(--border);
    color: var(--primary);
}

.health-help-topic > div {
    padding: 5px 18px 17px;
}

.health-help-topic p,
.health-help-topic li {
    color: var(--muted);
    line-height: 1.65;
}

.health-help-topic ul,
.health-help-topic ol {
    padding-left: 22px;
}

.health-help-topic a {
    color: var(--secondary);
    font-weight: 800;
}

.health-help-actions {
    display: flex;
    flex: 0 0 auto;
    justify-content: flex-end;
    padding: 16px 30px 24px;
    border-top: 1px solid var(--border);
    background: color-mix(in srgb, var(--surface-strong) 86%, transparent);
}

html[data-theme="light"] .health-help-topic {
    background: rgba(255, 255, 255, .76);
}

html[data-theme="light"] .health-help-actions {
    background: rgba(244, 249, 255, .96);
}

html[data-theme="light"] .health-help-search input {
    color: #10223b;
    background: #fff;
}

@media (max-width: 700px) {
    .health-help-dialog {
        max-height: calc(100dvh - 12px);
    }

    .health-help-heading {
        padding: 24px 58px 14px 18px;
    }

    .health-help-search,
    .health-help-result {
        margin-right: 18px;
        margin-left: 18px;
    }

    .health-help-content {
        padding-right: 18px;
        padding-left: 18px;
    }

    .health-help-actions {
        padding: 14px 18px 18px;
    }

    .health-help-actions .button {
        width: 100%;
    }
}


/* SOFON_HEALTH_MODULE_NAVIGATION_014D21 */
/* SOFON_HEALTH_MODULE_NAVIGATION_014D24 */
.module-nav-item > span {
    display: block;
    min-width: 0;
    max-width: 100%;
    overflow: visible;
    white-space: nowrap;
    overflow-wrap: normal;
    word-break: normal;
    hyphens: none;
}


/* SOFON_HEALTH_LANDING_AND_MODULE_BUTTONS_014D24 */
html[data-theme="light"] .module-nav-item:not(.is-active) {
    color: var(--muted);
    border-color: var(--border);
    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, .96),
            rgba(238, 246, 253, .9)
        );
    box-shadow:
        0 8px 20px
        rgba(35, 80, 126, .055);
}

html[data-theme="light"] .module-nav-item:not(.is-active):hover {
    color: var(--text);
    border-color:
        color-mix(
            in srgb,
            var(--primary) 36%,
            var(--border)
        );
    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 1),
            rgba(231, 242, 252, .97)
        );
}

html[data-theme="light"] :is(
    .landing-module-card,
    .workflow-card,
    .trust-panel,
    .landing-cta
) {
    color: var(--text);
    border-color: var(--border);
    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, .98),
            rgba(239, 247, 253, .95)
        );
    box-shadow:
        0 16px 42px
        rgba(35, 80, 126, .085);
}

html[data-theme="light"] .hero-highlight {
    color: var(--text);
    border-color: var(--border);
    background: rgba(255, 255, 255, .72);
}

/* SOFON_HEALTH_INFORMATION_NAVIGATION_014D22 */

/* SOFON_HEALTH_ACCESSIBILITY_HARDENING_014E */
:where(
    a[href],
    button,
    input,
    select,
    textarea,
    summary,
    [tabindex]:not([tabindex="-1"])
):focus-visible {
    outline:
        3px solid
        color-mix(
            in srgb,
            var(--primary) 72%,
            white
        ) !important;
    outline-offset: 3px;
}

html[data-theme="light"] :where(
    a[href],
    button,
    input,
    select,
    textarea,
    summary,
    [tabindex]:not([tabindex="-1"])
):focus-visible {
    outline-color:
        color-mix(
            in srgb,
            var(--primary) 78%,
            #0c4f8d
        ) !important;
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-delay: 0s !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-delay: 0s !important;
        transition-duration: .01ms !important;
    }
}

/* SOFON_HEALTH_FEEDBACK_UI_121 */
.feedback-dialog {
    width: min(680px, 100%);
}

.feedback-heading {
    display: flex;
    align-items: flex-start;
    margin-bottom: 22px;
    padding-right: 42px;
    gap: 15px;
}

.feedback-heading .modal-icon {
    margin: 0;
}

.feedback-heading h2 {
    margin: 4px 0 7px;
}

.feedback-heading p {
    margin: 0;
}

.feedback-form {
    display: grid;
    gap: 15px;
}

.feedback-field {
    display: grid;
    gap: 7px;
}

.feedback-field > span {
    color: var(--text);
    font-size: .82rem;
    font-weight: 850;
}

.feedback-field input,
.feedback-field select,
.feedback-field textarea {
    width: 100%;
    min-height: 48px;
    padding: 12px 14px;
    border: 1px solid var(--border);
    border-radius: 14px;
    outline: none;
    color: var(--text);
    background: var(--surface-light);
    font: inherit;
}

.feedback-field textarea {
    min-height: 155px;
    resize: vertical;
}

.feedback-field input:focus,
.feedback-field select:focus,
.feedback-field textarea:focus {
    border-color: color-mix(in srgb, var(--primary) 65%, transparent);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary) 13%, transparent);
}

.feedback-field small {
    color: var(--muted);
    font-size: .75rem;
    line-height: 1.5;
}

.feedback-honeypot {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
}

.feedback-status {
    min-height: 24px;
    margin: 0;
    padding: 0;
    color: var(--muted);
    font-size: .85rem;
    font-weight: 750;
}

.feedback-status:empty {
    display: none;
}

.feedback-status[data-type="success"] {
    color: #74e0b8;
}

.feedback-status[data-type="error"] {
    color: #ffadad;
}

.feedback-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

html[data-theme="light"] .feedback-field > span {
    color: #36536f;
}

html[data-theme="light"] .feedback-field :is(input, select, textarea) {
    color: #10223b;
    border-color: var(--border);
    background: #ffffff;
}

html[data-theme="light"] .feedback-status[data-type="success"] {
    color: #176b4b;
}

html[data-theme="light"] .feedback-status[data-type="error"] {
    color: #a82733;
}

@media (max-width: 700px) {
    .feedback-dialog {
        max-height: calc(100dvh - 12px);
        padding: 24px 18px;
    }

    .feedback-heading {
        padding-right: 34px;
    }

    .feedback-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .feedback-actions .button {
        width: 100%;
    }
}


/* SOFON_HEALTH_PUBLIC_DEMO_UI_130 */
.demo-launch-button {
    white-space: nowrap;
}

.demo-readonly-banner {
    position: relative;
    z-index: 12;
    width: min(1480px, calc(100% - 32px));
    margin: 12px auto 0;
    padding: 14px 18px;
    display: flex;
    align-items: center;
    gap: 14px;
    border: 1px solid color-mix(in srgb, var(--accent) 48%, transparent);
    border-radius: 18px;
    background: color-mix(in srgb, var(--panel-strong) 92%, var(--accent) 8%);
    box-shadow: var(--shadow-soft);
    backdrop-filter: blur(18px);
}

.demo-readonly-banner > div {
    min-width: 0;
    display: grid;
    gap: 2px;
    flex: 1;
}

.demo-readonly-banner strong {
    color: var(--text);
}

.demo-readonly-banner span:not(.demo-readonly-icon) {
    color: var(--text-muted);
    line-height: 1.45;
}

.demo-readonly-icon {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    flex: 0 0 auto;
    border-radius: 14px;
    background: color-mix(in srgb, var(--accent) 18%, transparent);
    font-size: 1.25rem;
}

.is-demo-readonly {
    opacity: .56 !important;
    cursor: not-allowed !important;
    filter: saturate(.55);
}

.demo-readonly-notice {
    position: fixed;
    z-index: 10000;
    left: 50%;
    bottom: 28px;
    max-width: min(520px, calc(100% - 32px));
    padding: 13px 18px;
    border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent);
    border-radius: 14px;
    background: var(--panel-strong);
    color: var(--text);
    box-shadow: var(--shadow-strong);
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, 18px);
    transition: opacity .18s ease, transform .18s ease;
}

.demo-readonly-notice.is-visible {
    opacity: 1;
    transform: translate(-50%, 0);
}

@media (max-width: 760px) {
    .demo-readonly-banner {
        align-items: flex-start;
        flex-wrap: wrap;
    }

    .demo-readonly-banner .button {
        width: 100%;
        justify-content: center;
    }
}