:root {
    /* Design tokeny (sladění s konvencí BackLeas-style „modern“ UI — slate / tmavý režim) */
    --bg-app: #0a1628;
    --bg-sidebar: #070f1c;
    --bg-card: rgba(10, 36, 62, 0.92);
    --bg-input: rgba(6, 22, 40, 0.88);
    --text-main: #e8f4fc;
    --text-muted: rgba(232, 244, 252, 0.72);
    --accent-primary: #1fb5a8;
    --accent-hover: #2dd4c5;
    --accent-success: #5ecf9a;
    --accent-danger: #e07a7a;
    --accent-warning: #d9a84a;
    --border-color: rgba(100, 170, 220, 0.35);

    /* Legacy aliasy (stávající selektory v projektu) */
    --bg-a: #061830;
    --bg-b: #0c2844;
    --text: var(--text-main);
    --line: var(--border-color);
    --accent: var(--accent-primary);
    --danger: var(--accent-danger);
    --panel: var(--bg-card);
    --panel-elevated: rgba(14, 48, 82, 0.95);
    --header-h: 52px;
    --sidebar-w: clamp(200px, 17vw, 260px);
    /* modern-pedikura.css používá --sidebar-width */
    --sidebar-width: var(--sidebar-w);
    --radius: 12px;
    --shadow: 0 8px 28px rgba(0, 0, 0, 0.24);
    --page-pad-x: clamp(0.65rem, 1.5vw, 1.35rem);
}

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

html {
    height: 100%;
    margin: 0;
    overflow: hidden;
}

body {
    margin: 0;
    height: 100%;
    max-height: 100%;
    font-family: system-ui, "Segoe UI", -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 15px;
    line-height: 1.45;
    color: var(--text);
    background: linear-gradient(165deg, var(--bg-a) 0%, var(--bg-b) 55%, #0a2238 100%);
    background-attachment: fixed;
    overflow: hidden;
}

/* Jeden kořenový sloupec: výška okna bez :has() (PWA / WebView bez :has stále vykreslí UI) */
#app {
    height: 100vh;
    height: 100dvh;
    max-height: 100vh;
    max-height: 100dvh;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: relative;
}

.pedikura-app-host {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* Start Blazor: viditelný průběh (PWA / WebView — bez scoped stylů může být „černý pruh“) */
#app > .loading-progress {
    position: absolute;
    left: 50%;
    top: 42%;
    transform: translate(-50%, -50%);
    width: 4.5rem;
    height: 4.5rem;
    display: block;
    vertical-align: middle;
    color: rgba(120, 200, 255, 0.85);
}

#app > .loading-progress circle:first-child {
    fill: none;
    stroke: rgba(80, 140, 190, 0.28);
    stroke-width: 0.35rem;
}

#app > .loading-progress circle:last-child {
    fill: none;
    stroke: currentColor;
    stroke-width: 0.35rem;
    stroke-dasharray: 1, 200;
    stroke-dashoffset: 0;
    stroke-linecap: round;
    transform-origin: 50% 50%;
    animation: app-loading-spin 1.1s linear infinite;
}

#app > .loading-progress-text {
    position: absolute;
    left: 50%;
    top: calc(42% + 3.25rem);
    transform: translateX(-50%);
    font-size: 0.88rem;
    color: var(--text-muted);
    white-space: nowrap;
}

@keyframes app-loading-spin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

@media (prefers-reduced-motion: reduce) {
    #app > .loading-progress circle:last-child {
        animation: none;
        stroke-dasharray: none;
        opacity: 0.85;
    }

    /* Banner v hlavičce: velmi pomalý běh místo úplného vypnutí (jinak vypadá „nefunkčně“). */
    .running-text-track {
        animation: backleasTickerX 90s linear infinite !important;
    }
}

/* Blazor shell error banner */
#blazor-error-ui {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 9999;
    padding: 0.65rem 1rem;
    background: #2a1518;
    color: #ffc9c9;
    border-top: 1px solid rgba(255, 120, 120, 0.35);
    font-size: 0.9rem;
    display: none;
}

#blazor-error-ui .reload {
    color: #8de8ff;
    margin-left: 0.5rem;
}

#blazor-error-ui .dismiss {
    cursor: pointer;
    float: right;
    opacity: 0.85;
}

/* ----- Přihlášení (LoginLayout) ----- */
.login-shell {
    flex: 1 1 auto;
    min-height: 0;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* Vycentrovat kartu přihlášení ve svislém prostředku volné plochy pod hlavičkou */
    justify-content: center;
    justify-content: safe center;
    padding: clamp(0.5rem, 2.5vmin, 1.25rem) 1rem;
    padding-left: max(1rem, env(safe-area-inset-left, 0px));
    padding-right: max(1rem, env(safe-area-inset-right, 0px));
    padding-bottom: max(clamp(0.5rem, 2.5vmin, 1.25rem), env(safe-area-inset-bottom, 0px));
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.login-card {
    width: 100%;
    max-width: 440px;
    /* přepíše modern-pedikura.css (40px), které zbytečně zvyšovalo výšku stránky */
    padding: 0 0.35rem;
    box-sizing: border-box;
}

.login-card > h1 {
    text-align: center;
    margin-top: 0;
    margin-bottom: 0.2rem;
    font-size: clamp(1.25rem, 4vw, 1.6rem);
}

.login-pwa-row {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
    margin: 0 auto 0.4rem;
    max-width: 26rem;
    padding: 0 0.25rem;
}

.login-pwa-install {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    margin: 0;
    padding: 0.32rem 0.75rem;
    font-size: 0.78rem;
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: 0.02em;
    color: var(--text-muted);
    background: rgba(255, 255, 255, 0.04);
    border: 1px dashed rgba(120, 180, 220, 0.35);
    border-radius: 999px;
    cursor: pointer;
    transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}

.login-pwa-install:hover {
    color: var(--text-main);
    border-color: rgba(31, 181, 168, 0.45);
    background: rgba(31, 181, 168, 0.1);
}

.login-pwa-install:focus-visible {
    outline: 2px solid var(--accent-primary);
    outline-offset: 2px;
}

.login-pwa-hint {
    margin: 0;
    padding: 0.5rem 0.65rem;
    font-size: 0.78rem;
    line-height: 1.45;
    text-align: center;
    color: var(--text-muted);
    background: rgba(6, 22, 40, 0.55);
    border: 1px solid rgba(100, 170, 220, 0.22);
    border-radius: var(--radius, 12px);
}

.login-mobile-apk {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.55rem;
    margin: 0.15rem auto 0.45rem;
    max-width: 26rem;
    padding: 0.65rem 0.75rem 0.55rem;
    text-align: left;
    background: rgba(6, 22, 40, 0.45);
    border: 1px solid rgba(100, 170, 220, 0.2);
    border-radius: var(--radius, 12px);
    box-sizing: border-box;
}

.login-mobile-apk__lead {
    margin: 0;
    font-size: 0.82rem;
    font-weight: 600;
    text-align: center;
    color: rgba(220, 235, 250, 0.95);
}

.login-mobile-apk__version-short {
    margin: 0;
    font-size: 0.7rem;
    line-height: 1.35;
    text-align: center;
    color: var(--text-muted);
}

.login-mobile-apk__checks {
    margin: 0;
    padding-left: 1.15rem;
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    font-size: 0.72rem;
    line-height: 1.45;
    color: rgba(210, 228, 245, 0.92);
}

.login-mobile-apk__check {
    display: flex;
    gap: 0.45rem;
    align-items: flex-start;
    cursor: pointer;
}

.login-mobile-apk__check input {
    margin-top: 0.2rem;
    flex-shrink: 0;
}

.login-mobile-apk__actions {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    align-items: stretch;
}

.login-mobile-apk__btn {
    width: 100%;
    max-width: none;
    text-decoration: none;
    text-align: center;
    box-sizing: border-box;
}

.login-mobile-apk__btn--muted {
    opacity: 0.55;
    cursor: not-allowed;
    pointer-events: none;
}

.login-mobile-apk__hint {
    margin: 0;
    font-size: 0.72rem;
    line-height: 1.35;
    text-align: center;
    color: var(--text-muted);
}

.login-mobile-apk__hint code {
    font-size: 0.85em;
    color: #9ee8ff;
}

.login-android-cta {
    margin: 0.85rem auto 0;
    max-width: 26rem;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.login-android-cta__btn {
    text-decoration: none;
    text-align: center;
    box-sizing: border-box;
}

.login-android-cta__hint {
    margin: 0;
    font-size: 0.7rem;
    line-height: 1.35;
    text-align: center;
    color: var(--text-muted);
}

.apk-download-card {
    max-width: 26rem;
    margin-left: auto;
    margin-right: auto;
}

.apk-download-back {
    margin: 0 0 0.5rem;
    text-align: left;
}

.apk-download-back__link {
    font-size: 0.78rem;
    color: rgba(140, 200, 255, 0.88);
    text-decoration: none;
}

.apk-download-back__link:hover {
    text-decoration: underline;
    color: #b8e8ff;
}

.apk-download-title {
    font-size: clamp(1.05rem, 3.5vw, 1.35rem);
    margin: 0 0 0.35rem;
    text-align: center;
}

.apk-download-lead {
    margin-top: 0;
    margin-bottom: 0.75rem;
}

.apk-download-empty {
    margin: 0;
    font-size: 0.78rem;
    line-height: 1.45;
    color: var(--text-muted);
    text-align: center;
}

.apk-download-empty code {
    font-size: 0.85em;
    color: #9ee8ff;
}

.apk-download-mixed-content-warning {
    margin: 0 0 0.5rem;
    padding: 0.55rem 0.65rem;
    font-size: 0.72rem;
    line-height: 1.45;
    text-align: left;
    color: #ffe8a8;
    background: rgba(120, 60, 20, 0.35);
    border: 1px solid rgba(255, 200, 120, 0.35);
    border-radius: var(--radius, 12px);
}

.apk-download-mixed-content-warning code {
    font-size: 0.85em;
    color: #9ee8ff;
}

.apk-download-copy-link {
    font-size: 0.78rem;
    color: rgba(160, 210, 255, 0.92) !important;
    text-decoration: underline;
    padding: 0.35rem 0.25rem;
}

.apk-download-copy-link:hover {
    color: #d4ecff !important;
}

.apk-download-copy-done {
    margin-top: -0.15rem;
}

.login-mobile-apk--standalone {
    margin-top: 0.25rem;
}

.login-card > .sub {
    text-align: center;
    margin-top: 0;
    margin-bottom: 0.55rem;
}

.login-panel {
    width: 100%;
}

.login-hero {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0 auto;
    /* průměr koule + záře: mobil 220px, širší obrazovky větší (textura lépe čitelná) */
    --login-sphere-d: 220px;
    margin-bottom: -1.35rem;
}

@media (min-width: 768px) {
    .login-hero {
        --login-sphere-d: 252px;
    }
}

@media (min-width: 1024px) {
    .login-hero {
        --login-sphere-d: 272px;
    }
}

@media (min-width: 1280px) {
    .login-hero {
        --login-sphere-d: 288px;
    }
}

.login-hero .hero-title {
    transform: scale(0.88);
    transform-origin: center center;
}

/* Koule: canvas (mapování na sféru) + rozptýlená záře v pozadí */
.sphere-stage {
    position: relative;
    width: calc(var(--login-sphere-d) + 50px);
    height: calc(var(--login-sphere-d) + 50px);
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 0.35rem;
}

.sphere-glow {
    position: absolute;
    /* stejný poměr jako dřív 218/220 — záře těsně pod průměr koule */
    width: calc(var(--login-sphere-d) * 109 / 110);
    height: calc(var(--login-sphere-d) * 109 / 110);
    min-width: calc(var(--login-sphere-d) * 109 / 110);
    min-height: calc(var(--login-sphere-d) * 109 / 110);
    aspect-ratio: 1 / 1;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background-size: cover;
    background-position: center;
    opacity: 0.32;
    filter: blur(12px) saturate(1.12);
    pointer-events: none;
    z-index: 0;
}

.sphere-canvas-wrap {
    position: relative;
    z-index: 1;
    width: var(--login-sphere-d);
    height: var(--login-sphere-d);
    flex-shrink: 0;
    border-radius: 50%;
    overflow: hidden;
    box-shadow: 0 22px 48px rgba(0, 0, 0, 0.48);
}

@media (min-width: 1024px) {
    .sphere-canvas-wrap {
        box-shadow: 0 26px 54px rgba(0, 0, 0, 0.5);
    }
}

.sphere-canvas-wrap::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    pointer-events: none;
    background: radial-gradient(
        circle at 28% 22%,
        rgba(255, 255, 255, 0.38) 0%,
        rgba(255, 255, 255, 0.05) 24%,
        transparent 46%
    );
}

.login-sphere-canvas {
    display: block;
    width: var(--login-sphere-d);
    height: var(--login-sphere-d);
    vertical-align: middle;
}

/* Heslo: tlačítko „oko“ vpravo */
.field-password-wrap {
    position: relative;
    display: block;
    width: 100%;
}

.field-password-wrap .input-password-toggle {
    width: 100%;
    padding-right: 3rem;
}

.btn-password-visibility {
    position: absolute;
    right: 4px;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 36px;
    margin: 0;
    padding: 0;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: rgba(200, 225, 245, 0.75);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: color 0.15s ease, background 0.15s ease;
}

.btn-password-visibility:hover {
    color: var(--accent-hover);
    background: rgba(31, 181, 168, 0.12);
}

.btn-password-visibility:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px rgba(31, 181, 168, 0.45);
    border-radius: 6px;
}

.icon-eye {
    width: 22px;
    height: 22px;
    display: block;
}

.hero-title {
    margin-top: 0.35rem;
    font-size: clamp(1.05rem, 4vw, 1.65rem);
    font-weight: 800;
    letter-spacing: 0.12em;
    text-align: center;
    background: linear-gradient(90deg, #ffd166, #62d4ff, #c9a8ff, #ffd166);
    background-size: 220% auto;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation: hero-title-flow 10s ease-in-out infinite;
}

@keyframes hero-title-flow {
    0%,
    100% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .hero-title {
        animation: none;
        background-size: 100% auto;
    }
}

/* ----- Aplikační shell (BackLeas-style: sidebar + main + statusbar v CSS gridu) ----- */
.app-shell {
    flex: 1 1 auto;
    min-height: 0;
    max-height: 100%;
    overflow: hidden;
}

/* Veřejná část: sloupec; přihlášený stav: mřížka z modern-pedikura.css (.pedikura-app-grid) */
.app-shell-public {
    display: flex;
    flex-direction: column;
}

.app-shell-authenticated.pedikura-app-grid {
    display: grid;
}

.app-sidebar {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    padding: 0.75rem 0.65rem 1rem;
    background: var(--bg-sidebar);
    border-right: 1px solid var(--border-color);
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

/* Sidebar uvnitř gridu — šířku řídí sloupec mřížky, ne flex-basis */
.app-shell-authenticated .app-sidebar {
    width: auto;
    flex: unset;
}

.sidebar-brand {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.35rem 0.45rem;
    text-decoration: none;
    color: var(--text-main);
    font-weight: 800;
    font-size: 1.02rem;
    letter-spacing: 0.04em;
    border-radius: var(--radius);
    transition: background 0.15s ease, color 0.15s ease;
}

.sidebar-brand:hover {
    background: rgba(255, 255, 255, 0.06);
    color: var(--accent-hover);
}

.sidebar-brand-mark {
    font-size: 1.15rem;
    line-height: 1;
    color: var(--accent-primary);
    opacity: 0.95;
}

.sidebar-brand-text {
    min-width: 0;
}

a.app-logo {
    text-decoration: none;
    color: inherit;
    margin-bottom: 1rem;
}

a.app-logo:hover {
    color: var(--accent-primary);
}

.app-logo-mark {
    font-size: 1.25rem;
    line-height: 1;
    color: var(--accent-primary);
}

.app-sidebar-footer {
    margin-top: auto;
    padding-top: 0.5rem;
    border-top: 1px solid var(--border-color);
}

.sidebar-logout-btn {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 10px 14px;
    text-align: left;
    text-decoration: none;
    color: var(--text-muted);
    border-radius: 8px;
    border: none;
    background: transparent;
    cursor: pointer;
    font: inherit;
    font-weight: 500;
    font-size: 0.95rem;
    transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.sidebar-logout-btn:hover {
    background-color: var(--bg-input);
    color: var(--text-main);
    transform: translateX(3px);
}

.sidebar-logout-btn .nav-icon {
    margin-right: 12px;
    width: 20px;
    text-align: center;
    flex-shrink: 0;
}

.app-shell-authenticated .app-header .user-profile {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.65rem;
    min-width: 0;
}

.app-header .user-profile-text {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.08rem;
    min-width: 0;
    text-align: right;
}

.app-user-status {
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: rgba(80, 220, 190, 0.95);
}

.header-logout-btn {
    flex-shrink: 0;
    margin: 0;
    padding: 0.38rem 0.75rem;
    font: inherit;
    font-size: 0.72rem;
    font-weight: 600;
    color: rgba(230, 242, 255, 0.92);
    background: rgba(31, 181, 168, 0.22);
    border: 1px solid rgba(31, 181, 168, 0.45);
    border-radius: 8px;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.header-logout-btn:hover {
    background: rgba(31, 181, 168, 0.35);
    border-color: rgba(31, 181, 168, 0.65);
}

/* Jemný mask na ticker v hlavičce (modern-pedikura.css má zbytek layoutu). */
.app-shell-authenticated .app-header .app-header-ticker {
    mask-image: linear-gradient(90deg, transparent 0%, black 6%, black 94%, transparent 100%);
}

.app-shell-authenticated .app-header .app-user-name {
    font-weight: 600;
    color: var(--text-main);
    max-width: min(200px, 42vw);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.app-shell-authenticated .app-header .app-user-role {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    opacity: 0.88;
}

/* Mřížku na úzkých šířkách řeší modern-pedikura.css (breakpoint cca 1024px). */

/* Scrollovatelná plocha: chování z modern-pedikura.css (overflow-y: auto). Jen doplňky layoutu. */
.app-shell-authenticated .content-scrollable {
    position: relative;
    display: flex;
    flex-direction: column;
}

/* Veřejná hlavička (404, nebo chvíle před přesměrováním) */
.app-header-public {
    flex: 0 0 auto;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 1rem;
    min-height: var(--header-h);
    padding: max(0.5rem, env(safe-area-inset-top, 0px)) max(var(--page-pad-x), env(safe-area-inset-right, 0px)) 0.5rem
        max(var(--page-pad-x), env(safe-area-inset-left, 0px));
    background: rgba(5, 20, 38, 0.92);
    border-bottom: 1px solid var(--line);
    backdrop-filter: blur(10px);
}

.app-header {
    flex: 0 0 auto;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 1rem;
    min-height: var(--header-h);
    padding: max(0.5rem, env(safe-area-inset-top, 0px)) max(var(--page-pad-x), env(safe-area-inset-right, 0px)) 0.5rem
        max(var(--page-pad-x), env(safe-area-inset-left, 0px));
    background: rgba(5, 20, 38, 0.92);
    border-bottom: 1px solid var(--line);
    backdrop-filter: blur(10px);
}

.app-brand {
    font-weight: 800;
    font-size: 1.15rem;
    color: var(--text);
    text-decoration: none;
    letter-spacing: 0.04em;
    margin-right: 0.25rem;
}

.app-brand:hover {
    color: var(--accent-hover);
}

.app-user-name {
    font-weight: 600;
    color: var(--text);
    max-width: 160px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.app-user-role {
    opacity: 0.85;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

/* V přihlášeném gridu řídí rozložení modern-pedikura.css (.app-main = grid + řádky). */
.app-shell-public .app-main {
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.app-main-inner {
    flex: 1 1 auto;
    min-height: 0;
    max-width: none;
    margin: 0;
    padding-top: max(0.45rem, env(safe-area-inset-top, 0px));
    padding-bottom: max(0.45rem, env(safe-area-inset-bottom, 0px));
    padding-left: max(var(--page-pad-x), env(safe-area-inset-left, 0px));
    padding-right: max(var(--page-pad-x), env(safe-area-inset-right, 0px));
    width: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-sizing: border-box;
    position: relative;
}

.app-main-inner--public {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    /* přihlášení: bez extra mezer — centrování řeší .login-shell */
    padding-top: 0;
    padding-bottom: 0;
}

/* Jemná mřížka přes celou pracovní plochu (neomezí obsah) */
.app-main-inner::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0.07;
    background-image:
        linear-gradient(90deg, rgba(120, 190, 255, 0.45) 1px, transparent 1px),
        linear-gradient(rgba(120, 190, 255, 0.35) 1px, transparent 1px);
    background-size: 28px 28px;
    mask-image: linear-gradient(180deg, black 0%, transparent 78%);
}

/* Stránky v MainLayout: výplň mezi hlavičkou a patičkou */
.app-page-fill {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    width: 100%;
    max-width: 100%;
}

.app-page-fill.app-page-centered {
    justify-content: center;
    align-items: center;
}

.app-page-fill.app-page-error {
    justify-content: flex-start;
    padding-top: 0.5rem;
}

/* ----- Dashboard: žádný posuvník celé stránky, scroll jen v tabulce / panelu klientů ----- */
.dash-page {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    overflow: hidden;
    width: 100%;
    max-width: 100%;
}

.dash-page > .dash-header.panel {
    flex-shrink: 0;
}

.dash-page > .dash-toolbar.panel {
    flex-shrink: 0;
}

.dash-page > .dash-main {
    flex: 1 1 auto;
    min-height: 0;
}

/* Kompaktní hero: vlevo přehled, uprostřed upozornění, vpravo čas */
.panel.dash-header-compact.dash-header {
    padding: 0.38rem 0.75rem;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr) minmax(0, 1fr);
    align-items: center;
    column-gap: 0.65rem;
    row-gap: 0.35rem;
}

.dash-header-text {
    min-width: 0;
    justify-self: start;
    text-align: left;
}

.dash-header-alerts {
    min-width: 0;
    max-width: 36rem;
    justify-self: center;
    text-align: center;
}

.dash-alert-summary {
    display: inline-block;
    margin: 0;
    font-size: 0.72rem;
    line-height: 1.35;
    font-weight: 500;
}

.dash-alerts-inline {
    display: inline-block;
    margin: 0;
    padding-left: 1.05rem;
    text-align: left;
    font-size: 0.72rem;
    line-height: 1.35;
    max-width: 100%;
    max-height: 3.2em;
    overflow-x: hidden;
    overflow-y: auto;
    vertical-align: middle;
}

.dash-alerts-inline li {
    margin: 0.1rem 0;
}

.dash-header-lead {
    margin: 0;
    font-size: 0.82rem;
    line-height: 1.28;
    font-weight: 600;
    color: var(--text-muted);
}

.dash-header-meta {
    margin: 0.12rem 0 0 0;
    font-size: 0.72rem;
    line-height: 1.25;
    opacity: 0.88;
}

.dash-page > .kpi-grid {
    flex-shrink: 0;
    margin-top: 0;
}

.dash-page > .dash-panel-unclosed {
    flex-shrink: 0;
}

.dash-panel-unclosed {
    border: 1px solid rgba(230, 140, 70, 0.55);
    background: linear-gradient(165deg, rgba(72, 32, 12, 0.42), rgba(12, 20, 36, 0.96));
    box-shadow: 0 0 0 1px rgba(255, 200, 140, 0.08) inset;
}

.dash-unclosed-title {
    color: #ffcaa6;
    margin-bottom: 0.15rem;
}

.dash-unclosed-lead {
    margin: 0.2rem 0 0.35rem;
    max-width: 52rem;
    line-height: 1.45;
}

.dash-panel-unclosed .table-scroll {
    max-height: min(15rem, 34vh);
}

/* Hlavní blok dashboardu (dnešní termíny) pod lištou stavu */
.dash-main > .dash-panel-today {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 0;
}

.btn-sm-compact {
    min-height: 34px;
    padding: 0.28rem 0.65rem;
    font-size: 0.82rem;
}

/* Nižší okno (notebook, PWA): zhuštění bez ztráty čitelnosti */
@media (max-height: 780px) {
    .dash-page {
        gap: 0.45rem;
    }

    .panel.dash-header-compact.dash-header {
        padding: 0.32rem 0.65rem;
    }

    .dash-header-lead {
        font-size: 0.78rem;
    }

    .dash-header-meta {
        font-size: 0.68rem;
    }

    .dash-alert-summary,
    .dash-alerts-inline {
        font-size: 0.68rem;
    }

    .dash-clock {
        font-size: 0.95rem;
    }

    .dash-date-day {
        font-size: 0.7rem;
    }

    .kpi {
        padding: 0.42rem 0.52rem;
    }

    .kpi span {
        font-size: 0.68rem;
    }

    .kpi strong {
        margin-top: 0.14rem;
        font-size: 0.92rem;
    }

    .section-title {
        margin-bottom: 0.45rem;
    }

    .btn {
        min-height: 38px;
        font-size: 0.9rem;
    }
}

.dash-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.75rem;
    margin-top: clamp(0.45rem, 1vw, 0.75rem);
    padding: 0.5rem 0.75rem;
    font-size: 0.84rem;
}

.dash-toolbar-msg {
    flex: 1 1 200px;
    min-width: 0;
    line-height: 1.35;
}

.dash-toolbar-msg--ok {
    color: #8cf0b0;
}

.dash-toolbar-msg--err {
    color: #ffb0b0;
}

.dash-toolbar-dismiss {
    flex-shrink: 0;
    min-height: 32px;
    padding: 0.2rem 0.45rem;
}

.dash-main {
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: clamp(0.65rem, 1.2vw, 1.1rem);
    margin-top: 0;
}

.dash-panel-today {
    display: flex;
    flex-direction: column;
    min-height: 0;
    min-width: 0;
    overflow: hidden;
    align-self: stretch;
    background: linear-gradient(145deg, rgba(12, 44, 78, 0.55) 0%, rgba(10, 36, 62, 0.88) 100%);
    box-shadow: var(--shadow);
}

.dash-panel-today .section-title {
    flex-shrink: 0;
}

.dash-schedule-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem 0.8rem;
}

.dash-range-switch {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.btn.btn-sm {
    min-height: 36px;
    padding: 0.3rem 0.75rem;
    font-size: 0.85rem;
}

.dash-panel-today .table-scroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow-x: auto;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

/* Klienti: jeden vnitřní scroll místo celého okna */
.clients-page {
    gap: 0.65rem;
}

.clients-page > .page-head {
    flex-shrink: 0;
}

/* Panel se seznamem je druhý blok (za .page-head), ne :first-of-type — ten by byl .page-head jako první div. */
.clients-page > .page-head + .panel {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.clients-page > .page-head + .panel .filters {
    flex-shrink: 0;
}

.clients-page > .page-head + .panel .table-scroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}

/* Klienti: kompaktní lišta výběru (tabulka má maximum výšky), nový klient v modalu */
.clients-selection-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.55rem 1rem;
    flex-shrink: 0;
    margin-bottom: 0.55rem;
    padding: 0.45rem 0.65rem;
    border-radius: var(--radius, 10px);
    border: 1px solid rgba(59, 130, 246, 0.42);
    background: rgba(22, 58, 105, 0.35);
}

.clients-selection-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem 0.65rem;
    min-width: 0;
    flex: 1 1 12rem;
}

.clients-selection-meta strong {
    font-size: 0.95rem;
    font-weight: 700;
}

.clients-selection-contact {
    font-size: 0.82rem;
    min-width: 0;
    max-width: min(100%, 26rem);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.clients-selection-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    flex-shrink: 0;
}

.clients-num-badge {
    display: inline-block;
    padding: 0.2rem 0.55rem;
    border-radius: 8px;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    background: rgba(59, 130, 246, 0.35);
    border: 1px solid rgba(59, 130, 246, 0.55);
    color: #e8f0ff;
}

.clients-archived-pill {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 0.18rem 0.42rem;
    border-radius: 6px;
    background: rgba(148, 120, 80, 0.35);
    border: 1px solid rgba(200, 160, 90, 0.45);
    color: #f5e6c8;
}

.app-modal-dialog.clients-new-modal {
    width: min(100%, 30rem);
    max-height: min(90vh, 560px);
}

.clients-modal-form {
    margin-top: 0.35rem;
}

.clients-modal-form .form-grid {
    margin-bottom: 0.35rem;
}

.clients-modal-date {
    display: flex;
    flex-direction: column;
    gap: 0.28rem;
    grid-column: 1 / -1;
}

.clients-modal-date input {
    max-width: 17rem;
    width: 100%;
}

.clients-modal-label {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--text-muted, #94a3b8);
}

.clients-modal-msg {
    margin: 0.35rem 0 0;
    font-size: 0.88rem;
}

.tbl tr.clients-row-selected td {
    background: rgba(46, 125, 146, 0.22);
    box-shadow: inset 0 0 0 1px rgba(59, 130, 246, 0.4);
}

.clients-detail-page {
    gap: 0.65rem;
}

.clients-detail-page .client-detail-back {
    margin-bottom: 0.35rem;
}

.clients-detail-page .client-detail-note-label {
    display: block;
    margin-top: 0.5rem;
}

.clients-detail-page .client-detail-note {
    width: 100%;
    box-sizing: border-box;
    margin-top: 0.35rem;
    padding: 0.5rem 0.65rem;
    border-radius: var(--radius, 8px);
    border: 1px solid var(--line);
    background: rgba(255, 255, 255, 0.04);
    color: var(--text);
    font: inherit;
    resize: vertical;
}

.clients-detail-page .client-detail-select {
    display: block;
    width: 100%;
    max-width: 28rem;
    margin-top: 0.35rem;
    padding: 0.45rem 0.55rem;
    border-radius: var(--radius, 8px);
    border: 1px solid var(--line);
    background: rgba(255, 255, 255, 0.06);
    color: var(--text);
    font: inherit;
}

.clients-detail-page .client-detail-actions {
    margin-top: 0.75rem;
}

.tbl .tbl-actions {
    white-space: nowrap;
    width: 1%;
}

.tbl .tbl-actions .btn {
    padding: 0.35rem 0.65rem;
    font-size: 0.85rem;
}

.tbl-action-group {
    display: inline-flex;
    gap: 0.25rem;
    align-items: center;
    justify-content: flex-end;
}

.tbl-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 34px;
    margin: 0;
    padding: 0;
    border: none;
    border-radius: 8px;
    background: rgba(100, 160, 220, 0.14);
    color: rgba(210, 230, 255, 0.92);
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}

.tbl-icon-btn:hover {
    background: rgba(31, 181, 168, 0.28);
    color: #fff;
}

.tbl-icon-btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px rgba(31, 181, 168, 0.5);
}

.tbl-icon-btn-danger:hover {
    background: rgba(220, 80, 90, 0.28);
    color: #ffc8cc;
}

.tbl-icon-svg {
    width: 18px;
    height: 18px;
    display: block;
}

.clients-row-editable {
    cursor: pointer;
}

/* Modální okno (klik mimo dialog nic neudělá — jen blokuje) */
.app-modal-root {
    position: fixed;
    inset: 0;
    z-index: 3000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: max(0.75rem, env(safe-area-inset-top, 0px)) max(0.75rem, env(safe-area-inset-right, 0px))
        max(0.75rem, env(safe-area-inset-bottom, 0px)) max(0.75rem, env(safe-area-inset-left, 0px));
    pointer-events: auto;
}

.app-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(2, 8, 22, 0.82);
    backdrop-filter: blur(5px);
}

.app-modal-sub {
    margin: 0 0 0.85rem;
}

.app-modal-section-title {
    margin-top: 1rem;
    margin-bottom: 0.45rem;
    font-size: 0.95rem;
}

.app-modal-dialog {
    position: relative;
    z-index: 1;
    width: min(100%, 32rem);
    max-height: min(88vh, 640px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 1.25rem 1.35rem;
    border-radius: 12px;
    border: 1px solid var(--line);
    background: linear-gradient(165deg, rgba(12, 28, 52, 0.98), rgba(6, 16, 36, 0.99));
    box-shadow: 0 22px 56px rgba(0, 0, 0, 0.55);
    outline: none;
}

.app-modal-dialog.app-modal-dialog-wide {
    width: min(100%, 40rem);
    max-height: min(90vh, 720px);
}

/* Karta klienta: širší dialog (+70 % oproti 40rem → 68rem) */
.client-detail-modal.app-modal-dialog-wide {
    width: min(100%, 68rem);
    max-width: min(96vw, 68rem);
}

.app-modal-title {
    margin: 0 0 0.75rem;
    font-size: 1.12rem;
    font-weight: 650;
}

.app-modal-hint {
    font-size: 0.84rem;
    margin: 0.35rem 0 0.85rem;
    line-height: 1.4;
}

.app-modal-footer {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 1rem;
}

.app-modal-footer.app-modal-footer--split {
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.65rem;
}

.app-modal-footer-start,
.app-modal-footer-end {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
}

.app-modal-footer-end {
    margin-left: auto;
}

.app-modal-root--nested {
    z-index: 4000;
}

.app-modal-root--on-top {
    z-index: 5000;
}

.app-modal-dialog.app-modal-dialog-appointment-sheet {
    max-height: min(94vh, 960px);
}

.client-detail-modal.app-modal-dialog-appointment-sheet {
    width: min(100%, 88rem);
    max-width: min(98vw, 88rem);
}

/* Karta klienta — vizuál jako ve vzoru (plochá tmavá modř, síť rámečků, žluté štítky, bez vnitřního scrollu v dialogu) */
.app-modal-root.client-card-v2-modal-root {
    align-items: center;
    justify-content: center;
    overflow: hidden;
    padding: 0.5rem 0.35rem;
}

.app-modal-dialog.app-modal-dialog-wide.client-detail-modal.client-card-v2-dialog {
    width: min(1120px, 96vw);
    max-width: min(1120px, 96vw);
    height: min(860px, calc(100dvh - 1.25rem));
    max-height: min(860px, calc(100dvh - 1.25rem));
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: 0.5rem 0.55rem 0.55rem;
    border-radius: 2px;
    border: 1px solid rgba(255, 236, 188, 0.55);
    background: #0b1a32;
    box-shadow:
        0 0 0 1px rgba(255, 220, 150, 0.12) inset,
        0 20px 50px rgba(0, 0, 0, 0.55);
}

.client-card-v2-title {
    margin: 0 0 0.45rem;
    padding-bottom: 0.35rem;
    border-bottom: 1px solid rgba(255, 236, 188, 0.4);
    font-size: 0.98rem;
    font-weight: 650;
    letter-spacing: 0.03em;
    color: #f2e6a8;
}

.client-card-v2-body {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 0.38rem;
    overflow: hidden;
}

.client-card-v2-cell {
    box-sizing: border-box;
    border: 1px solid rgba(255, 240, 210, 0.5);
    background: #081426;
    padding: 0.3rem 0.4rem 0.35rem;
}

.client-card-v2-top {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(11.5rem, 22%);
    gap: 0.35rem;
    align-items: stretch;
    padding: 0;
    border: none;
    background: transparent;
    flex: 0 0 auto;
    min-height: 0;
}

.client-card-v2-top-grid {
    display: flex;
    flex-direction: column;
    gap: 0.32rem;
    min-width: 0;
    min-height: 0;
    grid-column: 1;
}

.client-card-v2-row {
    display: grid;
    gap: 0;
    align-items: stretch;
}

.client-card-v2-row-bordered {
    gap: 1px;
    box-sizing: border-box;
    background: rgba(255, 236, 188, 0.55);
    padding: 1px;
    border: 1px solid rgba(255, 236, 188, 0.55);
}

.client-card-v2-row-bordered > .client-card-v2-cell {
    border: none;
    background: #081426;
}

.client-card-v2-row--dense {
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

.client-card-v2-row--tel-adr {
    grid-template-columns: minmax(0, 0.38fr) minmax(0, 1fr);
}

.client-card-v2-row--email {
    grid-template-columns: 1fr;
}

.client-card-v2-field {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
}

.client-card-v2-field--grow {
    grid-column: span 1;
}

.client-card-v2-field--narrow {
    max-width: none;
}

.client-card-v2-field--date .client-detail-date-cell {
    width: 100%;
}

.client-card-v2-label {
    font-size: 0.65rem;
    font-weight: 750;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #fff8c8;
    margin: 0;
    line-height: 1.2;
}

.client-card-v2-input,
.client-card-v2-select,
.client-card-v2-textarea {
    width: 100%;
    box-sizing: border-box;
    min-height: 32px;
    border-radius: 0;
    border: 1px solid rgba(255, 236, 200, 0.35);
    padding: 0.28rem 0.4rem;
    background: #061018;
    color: #fff6b8;
    font-family: inherit;
    font-size: 0.92rem;
    font-weight: 600;
    line-height: 1.25;
}

.client-card-v2-textarea {
    resize: none;
    line-height: 1.35;
}

.client-card-v2-textarea--tall {
    flex: 1 1 auto;
    min-height: 5.5rem;
    max-height: 100%;
    height: auto;
}

.client-card-v2-textarea--expand-modal {
    min-height: 50vh;
    resize: vertical;
    font-size: 0.95rem;
    line-height: 1.45;
}

.client-card-v2-select {
    cursor: pointer;
    color: #f5ebc8;
}

.client-card-v2-readonly {
    min-height: 32px;
    display: flex;
    align-items: center;
    padding: 0 0.4rem;
    border-radius: 0;
    border: 1px solid rgba(255, 236, 200, 0.35);
    background: #061018;
    color: #fff6b8;
    font-size: 0.92rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.client-card-v2-readonly-block {
    flex: 1 1 auto;
    min-height: 4.5rem;
    max-height: 7.5rem;
    overflow: auto;
    padding: 0.35rem 0.45rem;
    border-radius: 0;
    border: 1px solid rgba(255, 236, 200, 0.35);
    background: #061018;
    color: #fff6b8;
    font-size: 0.88rem;
    font-weight: 500;
    line-height: 1.45;
    white-space: pre-wrap;
}

.client-card-v2-health {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    min-width: 0;
    min-height: 0;
    padding: 0.3rem 0.4rem 0.35rem;
    grid-column: 2;
    align-self: stretch;
}

.client-card-v2-health-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.35rem;
}

.client-card-v2-health-expand {
    border: none;
    background: transparent;
    color: #ffe87a;
    font-size: 0.68rem;
    font-weight: 650;
    text-decoration: underline;
    cursor: pointer;
    padding: 0.1rem 0;
}

.client-card-v2-health-expand:hover {
    color: #fff3b8;
}

.client-card-v2-meeting {
    align-items: stretch;
    padding: 0;
    border: none;
    background: transparent;
}

.client-card-v2-meeting.client-card-v2-row-bordered {
    display: grid;
    grid-template-columns: 11.5rem minmax(0, 1fr);
    flex: 0 0 auto;
    min-height: 0;
}

.client-card-v2-meeting-left {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    justify-content: center;
}

.client-card-v2-meeting-notes {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-height: 0;
}

.client-card-v2-meeting-date {
    font-size: 0.95rem;
    color: #f8e8b8;
    font-variant-numeric: tabular-nums;
}

.client-card-v2-foto {
    padding: 0.3rem 0.4rem 0.35rem;
    flex: 0 1 auto;
    min-height: 0;
}

.client-card-v2-foto-heading {
    margin: 0 0 0.35rem;
    font-size: 0.62rem;
    font-weight: 750;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #ffe23a;
}

.client-card-v2-foto-inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.35rem;
    max-height: 9.25rem;
    overflow: hidden;
}

.client-card-v2-foto-caption {
    margin: 0 0 0.28rem;
    font-size: 0.78rem;
    color: rgba(245, 235, 200, 0.72);
}

.client-card-v2-foto-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.22rem;
    align-items: start;
}

.client-card-v2-photo-slot-wrap {
    display: flex;
    flex-direction: column;
    gap: 0.12rem;
    min-width: 0;
}

.client-card-v2-photo-slot {
    aspect-ratio: 1;
    width: 100%;
    border-radius: 2px;
    background: #5a6a78;
    border: 1px solid rgba(255, 236, 188, 0.45);
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.25) inset;
}

.client-card-v2-photo-thumb {
    display: block;
    width: 100%;
    aspect-ratio: 1;
    padding: 0;
    border-radius: 2px;
    border: 1px solid rgba(255, 236, 188, 0.55);
    background: #0a1528;
    cursor: zoom-in;
    overflow: hidden;
}

.client-card-v2-photo-thumb:focus-visible {
    outline: 2px solid #ffe23a;
    outline-offset: 1px;
}

.client-card-v2-photo-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.client-card-v2-photo-cap {
    font-size: 0.58rem;
    line-height: 1.15;
    color: rgba(255, 248, 200, 0.82);
    word-break: break-word;
    max-height: 2.1rem;
    overflow: hidden;
}

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

.client-card-v2-health-dialog {
    width: min(640px, 94vw);
    max-height: min(90dvh, 720px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.client-card-v2-health-dialog-hint {
    margin: 0 0 0.5rem;
    color: rgba(245, 235, 200, 0.88);
    font-size: 0.82rem;
}

/* Náhled fotky: portrét ~9∶15, vejde do okna; výška/šířka se vzájemně omezí. */
.client-card-v2-photo-lightbox {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: #0b1a32;
    border: 1px solid rgba(255, 236, 188, 0.55);
    aspect-ratio: 9 / 15;
    width: min(90vw, calc(84dvh * 9 / 15));
    max-width: min(90vw, 440px);
    max-height: min(84dvh, 780px, calc(90vw * 15 / 9));
    padding: 0.55rem 0.65rem;
}

.client-card-v2-photo-lb-caption {
    margin: 0 0 0.45rem;
    font-size: 0.78rem;
    line-height: 1.35;
    color: #fff6d0;
    word-break: break-word;
}

.client-card-v2-photo-lb-viewport {
    flex: 1 1 auto;
    min-height: 0;
    min-width: 0;
    /* overflow řídí Blazor třídou: při měřítku 1 bez posuvníků, po + s posuvem */
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr);
    place-items: center;
    background: #050d1a;
    border: 1px solid rgba(255, 236, 188, 0.35);
    padding: 0.35rem;
    touch-action: none;
}

.client-card-v2-photo-lb-viewport--noscroll {
    overflow: hidden;
}

.client-card-v2-photo-lb-viewport--scroll {
    overflow: auto;
}

/* Obal pro zoom — obrázek uvnitř má max. rozměr buňky (žádné nativní natažení přes celý dialog). */
.client-card-v2-photo-lb-zoom {
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: 100%;
    max-height: 100%;
    min-width: 0;
    min-height: 0;
    place-self: center;
    transform-origin: center center;
}

.client-card-v2-photo-lb-img {
    box-sizing: border-box;
    display: block;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    min-width: 0;
    min-height: 0;
    margin: 0;
    object-fit: contain;
    vertical-align: middle;
}

.client-card-v2-photo-lb-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-top: 0.5rem;
    align-items: center;
    justify-content: flex-end;
}

.client-card-v2-archive-block {
    margin-top: 0.05rem;
    font-size: 0.85rem;
    color: rgba(245, 235, 200, 0.88);
}

.client-card-v2-footer {
    flex-wrap: wrap;
    margin-top: 0.45rem;
    flex-shrink: 0;
}

.client-card-v2-footer-close {
    color: #f5ebc8 !important;
    border: 1px solid rgba(255, 236, 188, 0.45) !important;
}

.client-card-v2-history-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
    margin-top: 0.35rem;
}

.client-card-v2-close-confirm-text {
    margin: 0 0 1rem;
    color: rgba(245, 235, 200, 0.92);
}

.client-card-v2-close-confirm-footer {
    margin-top: 0 !important;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.client-card-v2-dialog .btn.btn-client-save-close,
.client-card-v2-dialog .btn.btn-client-new-appt,
.client-card-v2-dialog .btn.btn-client-history,
.client-card-v2-dialog .btn.btn-client-archive {
    border-radius: 10px;
    padding: 0.45rem 0.85rem;
    font-weight: 700;
}

.btn.btn-client-save-close {
    color: #0a0a0a;
    font-weight: 700;
    font-size: 0.88rem;
    background: #a8aeb8;
    border: 1px solid rgba(255, 236, 100, 0.55);
}

.btn.btn-client-save-close:hover:not(:disabled) {
    filter: brightness(1.05);
}

.btn.btn-client-new-appt {
    color: #0a0a0a;
    font-weight: 700;
    font-size: 0.88rem;
    background: #7fd8f0;
    border: 1px solid rgba(255, 236, 100, 0.55);
}

.btn.btn-client-new-appt:hover:not(:disabled) {
    filter: brightness(1.05);
}

.btn.btn-client-history {
    color: #0a0a0a;
    font-weight: 700;
    font-size: 0.88rem;
    background: #4ae090;
    border: 1px solid rgba(255, 236, 100, 0.55);
}

.btn.btn-client-history:hover:not(:disabled) {
    filter: brightness(1.05);
}

.btn.btn-client-archive {
    color: #0a0a0a;
    font-weight: 700;
    font-size: 0.88rem;
    background: #f0923a;
    border: 1px solid rgba(255, 236, 100, 0.55);
}

.btn.btn-client-archive:hover:not(:disabled) {
    filter: brightness(1.05);
}

.client-card-v2-dialog .client-detail-date-cell input {
    border-radius: 0;
    border: 1px solid rgba(255, 236, 200, 0.35);
    background: #061018;
    color: #f5ebc8;
}

.client-card-v2-dialog .client-card-v2-input:focus,
.client-card-v2-dialog .client-card-v2-select:focus,
.client-card-v2-dialog .client-card-v2-textarea:focus,
.client-card-v2-dialog .client-detail-date-cell input:focus {
    outline: none;
    border-color: rgba(255, 226, 80, 0.85);
    box-shadow: 0 0 0 1px rgba(255, 220, 100, 0.15);
}

@media (max-width: 900px) {
    .client-card-v2-top {
        grid-template-columns: 1fr;
    }

    .client-card-v2-top-grid {
        grid-column: auto;
    }

    .client-card-v2-health {
        grid-column: auto;
    }

    .client-card-v2-row--dense {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .client-card-v2-row--contact {
        grid-template-columns: 1fr;
    }

    .client-card-v2-meeting.client-card-v2-row-bordered {
        grid-template-columns: 1fr;
    }

    .client-card-v2-foto-inner {
        grid-template-columns: 1fr;
    }

    .client-card-v2-foto-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Karta schůzky: patička zůstane dole, scroll jen uvnitř těla (žádný „dvojitý“ posuv celé stránky) */
.app-modal-dialog.appt-sheet-dialog.client-detail-modal {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    max-height: min(100dvh - 0.75rem, 940px);
    padding-bottom: 0.85rem;
}

.app-modal-dialog.appt-sheet-dialog .app-modal-sub {
    flex-shrink: 0;
}

.app-modal-dialog.appt-sheet-dialog .appt-sheet-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding-right: 0.2rem;
    margin-right: -0.05rem;
}

.app-modal-dialog.appt-sheet-dialog .app-modal-footer {
    flex-shrink: 0;
    margin-top: 0.55rem;
}

.appt-photo-fullwidth {
    width: 100%;
    box-sizing: border-box;
    margin-top: 0.65rem;
    padding: 0.65rem 0.75rem 0.75rem;
    border: 1px solid rgba(80, 140, 190, 0.5);
    border-radius: 10px;
    background: rgba(4, 14, 32, 0.55);
    box-shadow: 0 0 0 1px rgba(120, 200, 255, 0.06) inset;
}

.appt-photo-fullwidth-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 0.45rem 1rem;
    margin-bottom: 0.25rem;
}

.appt-photo-fullwidth-label {
    margin-bottom: 0 !important;
}

.appt-photo-upload-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.45rem 0.75rem;
    min-width: min(100%, 22rem);
}

.appt-photo-upload-row--split {
    align-items: flex-start;
    gap: 0.75rem 1rem;
}

.appt-photo-upload-col {
    flex: 1 1 min(100%, 14rem);
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.appt-photo-upload-label {
    font-size: 0.88rem;
    color: var(--text-muted);
    margin: 0;
}

.appt-photo-file-input {
    margin-bottom: 0 !important;
}

.appt-photo-pending {
    width: 100%;
    margin-top: 0.35rem !important;
}

.appt-photo-toolbar-inner {
    margin-top: 0.35rem;
    padding-top: 0.35rem;
    border-top: 1px solid rgba(80, 140, 190, 0.22);
}

.appt-photo-gallery {
    grid-template-columns: repeat(auto-fill, minmax(148px, 1fr));
    gap: 0.65rem;
}

.appt-photo-fig img {
    height: 128px;
}

.appt-photo-empty,
.appt-photo-loading {
    margin: 0.5rem 0 0.15rem;
    font-size: 0.88rem;
}

.appt-history-trigger {
    margin-top: 0.75rem;
    display: flex;
    justify-content: center;
}

.appt-history-dialog {
    max-height: min(88vh, 720px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.appt-history-dialog .app-modal-sub {
    flex-shrink: 0;
}

.appt-history-modal-scroll {
    flex: 1 1 auto;
    min-height: 0;
    max-height: none;
    margin-top: 0.35rem;
}

.appt-history-dialog .app-modal-footer {
    flex-shrink: 0;
    margin-top: 0.65rem;
}

.photo-preview-zoom-hint {
    margin-top: 0.15rem;
    margin-bottom: 0.35rem;
    font-size: 0.82rem;
    color: var(--text-muted);
}

/* Karta klienta (modál): stejné pozadí polí včetně e-mailu a data */
.client-detail-modal .client-detail-udaje-grid .cdf-cell input,
.client-detail-modal input[type="email"],
.client-detail-modal input[type="tel"],
.client-detail-modal input[type="date"],
.client-detail-modal .client-detail-date-cell input {
    width: 100%;
    box-sizing: border-box;
    min-height: 42px;
    border-radius: 8px;
    border: 1px solid rgba(80, 140, 190, 0.55);
    padding: 0.5rem 0.75rem;
    background: var(--bg-input);
    color: var(--text-main);
    font: inherit;
    font-size: 1rem;
}

.client-detail-modal .client-detail-udaje-grid .cdf-cell input:focus,
.client-detail-modal .client-detail-date-cell input:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 2px rgba(31, 181, 168, 0.25);
}

.client-detail-modal .client-detail-udaje-grid .cdf-cell input::placeholder,
.client-detail-modal .client-detail-date-cell input::placeholder {
    color: rgba(232, 244, 252, 0.4);
}

.client-detail-modal input:-webkit-autofill,
.client-detail-modal input:-webkit-autofill:hover,
.client-detail-modal input:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--text-main) !important;
    caret-color: var(--text-main);
    transition: background-color 99999s ease-out;
    box-shadow: 0 0 0 1000px var(--bg-input) inset !important;
}

.client-detail-modal input[type="date"] {
    color-scheme: dark;
}

.client-detail-modal .client-detail-archive-fields {
    width: 100%;
    max-width: 100%;
    margin-top: 0.5rem;
}

.client-detail-archive-hint {
    max-width: 52rem;
}

.client-detail-udaje-grid {
    display: grid;
    grid-template-columns: 0.55fr 0.6fr minmax(11rem, 0.42fr) minmax(14rem, 0.92fr);
    grid-template-rows: auto auto auto auto;
    gap: 0.65rem;
    align-items: start;
    margin-bottom: 0.5rem;
    min-width: 0;
}

.client-detail-udaje-grid .cdf-cell {
    min-width: 0;
}

.client-detail-udaje-grid .cdf-note-heading {
    grid-column: 4;
    grid-row: 1;
    margin: 0 0 0.15rem;
}

.client-detail-udaje-grid .cdf-jmeno {
    grid-column: 1;
    grid-row: 2;
}

.client-detail-udaje-grid .cdf-prijmeni {
    grid-column: 2;
    grid-row: 2;
}

.client-detail-udaje-grid .cdf-narozeni {
    grid-column: 3;
    grid-row: 2;
}

.client-detail-udaje-grid .cdf-note-wrap {
    grid-column: 4;
    grid-row: 2 / 5;
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
    align-self: stretch;
}

.client-detail-udaje-grid .cdf-telefon {
    grid-column: 1;
    grid-row: 3;
}

.client-detail-udaje-grid .cdf-adresa {
    grid-column: 2 / 4;
    grid-row: 3;
}

.client-detail-udaje-grid .cdf-email {
    grid-column: 1 / 4;
    grid-row: 4;
}

.client-detail-modal .client-detail-note--grid {
    flex: 1 1 auto;
    width: 100%;
    min-height: 6.5rem;
    resize: none;
    box-sizing: border-box;
}

.client-detail-modal .client-detail-archive-label {
    display: block;
    margin: 0 0 0.35rem;
    font-size: 0.9rem;
    color: var(--text-muted);
}

.client-detail-schuzky-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 0.85rem 1.25rem;
    margin-bottom: 0.35rem;
}

.client-detail-schuzky-history {
    flex: 1 1 280px;
    min-width: min(100%, 320px);
}

.client-detail-schuzky-history-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
}

.client-detail-select--flex {
    flex: 1 1 220px;
    min-width: 0;
    margin-bottom: 0;
}

.client-detail-new-appt-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem 1.25rem;
    margin-top: 0.35rem;
}

.client-detail-new-appt-col {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.client-detail-new-appt-photo-pair {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem 1rem;
    margin-top: 0.25rem;
}

@media (max-width: 560px) {
    .client-detail-new-appt-photo-pair {
        grid-template-columns: 1fr;
    }
}

.client-detail-archive-label--inline {
    display: block;
    font-size: 0.78rem;
    color: var(--text-muted);
    margin-bottom: 0.15rem;
}

.client-detail-status-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.45rem 0.75rem;
    margin-bottom: 0.2rem;
}

.client-detail-select--status-narrow {
    flex: 0 1 auto;
    width: auto;
    min-width: 7.5rem;
    max-width: 11rem;
}

.client-detail-reschedule-toggle {
    flex: 1 1 auto;
    min-width: 0;
    justify-content: flex-start;
    padding: 0.35rem 0.5rem;
    font-size: 0.88rem;
    white-space: normal;
    text-align: left;
}

.client-detail-note--tall {
    min-height: 12rem;
}

.client-detail-text-input,
.client-detail-datetime-local {
    width: 100%;
    box-sizing: border-box;
    min-height: 42px;
    border-radius: 8px;
    border: 1px solid rgba(80, 140, 190, 0.55);
    padding: 0.5rem 0.75rem;
    background: var(--bg-input);
    color: var(--text-main);
    font: inherit;
    font-size: 1rem;
}

.client-detail-datetime-local {
    color-scheme: dark;
}

.client-detail-datetime-wrap {
    display: flex;
    gap: 0.55rem;
    align-items: center;
}

.client-detail-datetime-wrap .client-detail-datetime-local {
    flex: 1 1 auto;
}

.client-detail-datetime-confirm {
    min-height: 42px;
    white-space: nowrap;
}

.client-detail-datetime-hint {
    margin: 0.18rem 0 0.1rem;
    font-size: 0.8rem;
    color: var(--text-muted);
}

.client-detail-datetime-hint--ok {
    color: #a8ffce;
}

.client-detail-check-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0.35rem 0 0.5rem;
    font-size: 0.9rem;
    color: var(--text-muted);
}

.client-detail-file-input {
    font-size: 0.88rem;
    margin-bottom: 0.35rem;
}

.client-detail-pending-files {
    margin: 0.35rem 0 0;
    padding-left: 1.1rem;
    font-size: 0.88rem;
    color: var(--text-muted);
}

.client-detail-pending-files li {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem 0.5rem;
    margin: 0.2rem 0;
}

.client-detail-btn-compact {
    padding: 0.2rem 0.5rem;
    font-size: 0.82rem;
}

.client-detail-past-readonly .client-detail-k {
    color: var(--text-muted);
    font-size: 0.85rem;
    margin-right: 0.35rem;
}

.client-detail-pre {
    white-space: pre-wrap;
    margin: 0.15rem 0 0.65rem;
    line-height: 1.45;
}

.client-detail-photo-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    gap: 0.75rem;
    margin-top: 0.35rem;
}

.client-detail-photo-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.55rem 0.75rem;
    margin-top: 0.35rem;
}

.client-detail-photo-autorefresh {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    margin: 0;
    font-size: 0.84rem;
    color: var(--text-muted);
}

.client-detail-photo-fig {
    margin: 0;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid var(--line);
    background: rgba(0, 0, 0, 0.2);
}

.client-detail-photo-fig img {
    display: block;
    width: 100%;
    height: 110px;
    object-fit: cover;
}

.client-detail-photo-thumb-btn {
    border: none;
    margin: 0;
    padding: 0;
    width: 100%;
    background: transparent;
    cursor: zoom-in;
}

.client-detail-photo-thumb-btn:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: -2px;
}

.client-detail-photo-fig figcaption {
    font-size: 0.7rem;
    padding: 0.35rem 0.45rem;
    color: var(--text-muted);
    word-break: break-word;
}

.client-detail-photo-cap {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.35rem;
}

.app-modal-dialog-photo-preview {
    width: min(94vw, 1280px);
    max-height: min(92dvh, 900px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-height: 0;
}

.app-modal-dialog-photo-preview .photo-preview-toolbar,
.app-modal-dialog-photo-preview .photo-preview-note-row,
.app-modal-dialog-photo-preview .app-modal-footer {
    flex-shrink: 0;
}

.photo-preview-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.7rem;
}

.photo-preview-toolbar label {
    margin: 0;
    color: var(--text-muted);
    font-size: 0.82rem;
}

.photo-preview-note-row {
    margin-top: 0.45rem;
}

.photo-preview-note-row label {
    margin: 0 0 0.22rem 0;
}

.photo-preview-stage-wrap {
    margin-top: 0.55rem;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.45);
    width: 100%;
    flex: 1 1 auto;
    min-height: 0;
    min-width: 0;
    height: min(52vh, 620px);
    max-height: min(56vh, 680px);
}

.photo-preview-stage-wrap--fit {
    overflow: hidden;
}

.photo-preview-stage-wrap--scroll {
    overflow: auto;
}

.photo-preview-stage {
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    transform-origin: center center;
    transform: scale(var(--preview-zoom, 1));
}

.photo-preview-frame {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    width: auto;
    max-width: 100%;
    max-height: 100%;
    min-width: 0;
    line-height: 0;
}

.photo-preview-frame img {
    display: block;
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
}

.photo-preview-frame canvas {
    position: absolute;
    left: 0;
    top: 0;
    display: block;
    cursor: crosshair;
    pointer-events: auto;
}

.client-detail-modal .client-detail-note {
    display: block;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    min-height: 7.5rem;
    padding: 0.55rem 0.7rem;
    border-radius: 8px;
    border: 1px solid rgba(80, 140, 190, 0.55);
    background: var(--bg-input);
    color: var(--text-main);
    font: inherit;
    font-size: 0.95rem;
    line-height: 1.45;
    resize: vertical;
}

.client-detail-modal .client-detail-archive-fields .client-detail-note {
    min-height: 5.5rem;
}

.client-detail-modal .client-detail-select {
    display: block;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    margin: 0 0 0.75rem;
    padding: 0.5rem 0.65rem;
    min-height: 42px;
    border-radius: 8px;
    border: 1px solid rgba(80, 140, 190, 0.55);
    background: var(--bg-input);
    color: var(--text-main);
    font: inherit;
}

.client-detail-modal .client-detail-select.client-detail-select--status-narrow {
    width: auto;
    max-width: 11rem;
    min-width: 7.5rem;
    margin-bottom: 0;
}

/* Spodní lišta: stav DB a S3 / manifest po přihlášení */
.app-footer.app-statusbar,
.app-footer-status {
    flex: 0 0 auto;
    padding: 0.45rem max(var(--page-pad-x), env(safe-area-inset-right, 0px)) max(0.45rem, env(safe-area-inset-bottom, 0px))
        max(var(--page-pad-x), env(safe-area-inset-left, 0px));
    font-size: 0.78rem;
    line-height: 1.35;
    color: var(--text-muted);
    background: rgba(5, 18, 36, 0.96);
    border-top: 1px solid var(--border-color);
    backdrop-filter: blur(8px);
}

.footer-status-grid {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem 0.75rem;
    max-width: none;
    margin: 0;
    width: 100%;
}

.footer-status-block {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.35rem 0.5rem;
    min-width: 0;
}

.footer-status-label {
    font-weight: 600;
    color: var(--text);
    opacity: 0.88;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: 0.68rem;
}

.footer-status-provider {
    color: var(--text-muted);
    max-width: min(42vw, 280px);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.footer-status-sep {
    opacity: 0.35;
    user-select: none;
}

.footer-status-ok {
    color: #5eead4;
    font-weight: 600;
    font-size: 0.72rem;
}

.footer-status-err {
    color: #f87171;
    font-weight: 600;
    font-size: 0.72rem;
}

.footer-status-muted {
    color: #94a3b8;
    font-weight: 600;
    font-size: 0.72rem;
}

.footer-status-optional {
    color: #8eb4d4;
    font-weight: 600;
    font-size: 0.72rem;
}

.footer-status-warn {
    color: #fbbf24;
}

/* Typografie stránek */
.page-head {
    margin-bottom: 1rem;
}

.page-title {
    margin: 0 0 0.25rem 0;
    font-size: clamp(1.35rem, 3vw, 1.75rem);
    font-weight: 700;
}

.page-lead {
    margin: 0;
}

.section-title {
    margin: 0 0 0.75rem 0;
    font-size: 1.05rem;
    font-weight: 600;
}

.muted {
    color: var(--text-muted) !important;
}

.sub {
    opacity: 0.88;
    color: var(--text-muted);
}

.panel,
.card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    padding: 1rem 1.1rem;
    box-shadow: var(--shadow);
}

h1 {
    margin-top: 0;
}

label {
    display: block;
    margin-top: 0.65rem;
    margin-bottom: 0.25rem;
    font-size: 0.9rem;
    color: var(--text-muted);
}

.form-group {
    margin-bottom: 0.35rem;
}

.form-input,
input[type="text"],
input[type="password"],
input[type="email"],
input[type="tel"],
input[type="url"],
input[type="search"],
input[type="date"],
input:not([type]) {
    width: 100%;
    height: 42px;
    border-radius: 8px;
    border: 1px solid rgba(80, 140, 190, 0.55);
    padding: 0.5rem 0.75rem;
    background: var(--bg-input);
    color: var(--text-main);
    font-size: 1rem;
}

input[type="email"]:-webkit-autofill,
input[type="email"]:-webkit-autofill:hover,
input[type="email"]:-webkit-autofill:focus,
input[type="tel"]:-webkit-autofill,
input[type="tel"]:-webkit-autofill:hover,
input[type="tel"]:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--text-main) !important;
    caret-color: var(--text-main);
    transition: background-color 99999s ease-out;
    box-shadow: 0 0 0 1000px var(--bg-input) inset !important;
}

input:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 2px rgba(31, 181, 168, 0.25);
}

input::placeholder {
    color: rgba(232, 244, 252, 0.4);
}

/* Checkbox řádky ve filtrech */
.filter-check {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    margin: 0;
    cursor: pointer;
    white-space: nowrap;
    font-size: 0.9rem;
    color: var(--text);
}

.filter-check input[type="checkbox"] {
    width: auto;
    height: auto;
    accent-color: var(--accent);
}

a.btn {
    text-decoration: none;
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    border: 1px solid rgba(80, 140, 190, 0.55);
    border-radius: 8px;
    background: rgba(20, 70, 110, 0.85);
    color: var(--text);
    font-weight: 600;
    font-size: 0.95rem;
    cursor: pointer;
    padding: 0.4rem 1rem;
    transition: background 0.15s, border-color 0.15s, opacity 0.15s;
}

.btn:hover:not(:disabled) {
    background: rgba(30, 90, 140, 0.95);
    border-color: rgba(120, 190, 235, 0.55);
}

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

/* Primární akce: jednotně .btn-primary (viz modern-pedikura + Pedikura tokeny). */
.btn.btn-primary {
    background: var(--accent-primary);
    border-color: var(--accent-primary);
    color: #04262a;
}

.app-main .btn.btn-primary {
    width: auto;
}

.btn.btn-primary:hover:not(:disabled) {
    background: var(--accent-hover);
    border-color: var(--accent-hover);
}

.btn-secondary {
    background: rgba(20, 70, 110, 0.85);
    border-color: rgba(80, 140, 190, 0.55);
    color: var(--text-main);
}

.btn-secondary:hover:not(:disabled) {
    background: rgba(30, 90, 140, 0.95);
    border-color: rgba(120, 190, 235, 0.55);
}

.btn-block {
    width: 100%;
    max-width: 100%;
}

.btn-ghost {
    background: transparent;
    border-style: dashed;
    border-color: rgba(120, 180, 220, 0.35);
    color: var(--text-muted);
}

.btn-danger {
    background: rgba(180, 70, 80, 0.35);
    border-color: rgba(220, 120, 130, 0.55);
    color: #ffe0e0;
}

.btn-danger:hover:not(:disabled) {
    background: rgba(200, 80, 90, 0.5);
}

.kpi-grid,
.dashboard-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: clamp(0.35rem, 0.75vw, 0.58rem);
}

.kpi {
    background: var(--panel-elevated);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 0.58rem 0.65rem;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.kpi:hover {
    border-color: rgba(100, 190, 210, 0.45);
    box-shadow: 0 0 0 1px rgba(31, 181, 168, 0.12);
}

.kpi span {
    font-size: 0.72rem;
    line-height: 1.25;
    color: var(--text-muted);
}

.kpi strong {
    display: block;
    margin-top: 0.2rem;
    font-size: clamp(0.95rem, 2.1vw, 1.28rem);
    font-weight: 700;
    line-height: 1.15;
}

.table-scroll {
    overflow-x: auto;
    overflow-y: auto;
    max-width: 100%;
    margin: 0 -0.15rem;
    padding: 0 0.15rem;
    -webkit-overflow-scrolling: touch;
}

.tbl {
    width: 100%;
    min-width: min(560px, 100%);
    border-collapse: collapse;
}

.tbl th,
.tbl td {
    border: 1px solid rgba(90, 150, 200, 0.28);
    padding: 0.5rem 0.55rem;
    font-size: 0.9rem;
}

.tbl th {
    background: rgba(18, 58, 95, 0.9);
    text-align: left;
    font-weight: 600;
}

.tbl tr:nth-child(even) td {
    background: rgba(12, 42, 72, 0.35);
}

.tbl-compact th,
.tbl-compact td {
    padding: 0.35rem 0.45rem;
    font-size: 0.85rem;
}

.dash-schedule-row--clickable {
    cursor: pointer;
}

.dash-schedule-row--clickable:hover td {
    background: rgba(31, 181, 168, 0.14);
}

.dash-schedule-row--clickable:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: -2px;
}

.filters {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
    align-items: center;
    margin-bottom: 0.85rem;
}

.filter-search {
    flex: 1 1 200px;
    min-width: 160px;
}

.form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.65rem;
}

.form-grid input {
    width: 100%;
}

.err {
    color: #ffb0b0;
    margin-bottom: 0;
}

.ok {
    color: #8cf0b0;
}

.mt {
    margin-top: 1rem;
}

.mt-sm {
    margin-top: 0.55rem;
}

.dash-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.65rem 1rem;
    flex-wrap: wrap;
}

.dash-header-compact.dash-header .dash-date {
    justify-self: end;
    text-align: right;
}

.dash-date {
    text-align: right;
    flex-shrink: 0;
    min-width: 9.5rem;
}

.dash-date-day {
    font-size: 0.78rem;
    color: var(--text-muted);
    text-transform: capitalize;
    line-height: 1.2;
}

.dash-clock {
    display: block;
    margin-top: 0.06rem;
    font-size: 1.02rem;
    font-weight: 700;
    color: #9ee8ff;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.03em;
    text-shadow: 0 0 12px rgba(100, 200, 255, 0.22);
}

.side-actions {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}

.service-row {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    align-items: stretch;
}

.sync-badge {
    border: 1px solid rgba(120, 180, 220, 0.4);
    border-radius: 999px;
    padding: 0.35rem 0.75rem;
    font-size: 0.8rem;
    text-align: center;
    white-space: nowrap;
}

.sync-ok {
    background: rgba(60, 180, 120, 0.2);
    color: #a8ffce;
}

.sync-err {
    background: rgba(200, 80, 90, 0.2);
    color: #ffc8c8;
}

.sync-wait {
    background: rgba(100, 150, 200, 0.18);
    color: #d2ebff;
}

.alerts-list {
    margin: 0;
    padding-left: 1.1rem;
}

.alerts-list li {
    margin: 0.25rem 0;
}

.btn-warning {
    background: #d9a84a;
    border-color: #a67c28;
    color: #1a1204;
}

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

    .panel.dash-header-compact.dash-header {
        grid-template-columns: 1fr;
        justify-items: stretch;
    }

    .dash-header-text {
        justify-self: stretch;
    }

    .dash-header-alerts {
        justify-self: center;
        max-width: none;
    }

    .dash-header-compact.dash-header .dash-date {
        justify-self: center;
        text-align: center;
    }
}

@media (max-width: 640px) {
    .app-shell-authenticated .app-header .app-user-name {
        max-width: 120px;
    }

    .client-detail-udaje-grid {
        grid-template-columns: 1fr;
        grid-template-rows: none;
    }

    .client-detail-udaje-grid .cdf-note-heading,
    .client-detail-udaje-grid .cdf-jmeno,
    .client-detail-udaje-grid .cdf-prijmeni,
    .client-detail-udaje-grid .cdf-narozeni,
    .client-detail-udaje-grid .cdf-note-wrap,
    .client-detail-udaje-grid .cdf-telefon,
    .client-detail-udaje-grid .cdf-adresa,
    .client-detail-udaje-grid .cdf-email {
        grid-column: 1;
        grid-row: auto;
    }

    .client-detail-udaje-grid .cdf-note-wrap {
        min-height: 8rem;
    }

    .client-detail-modal .client-detail-note--grid {
        min-height: 7.5rem;
        resize: vertical;
    }

    .client-detail-new-appt-grid {
        grid-template-columns: 1fr;
    }

    .kpi-grid,
    .form-grid,
    .filters {
        grid-template-columns: 1fr;
    }

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

    .filter-check {
        white-space: normal;
    }

    .tbl th,
    .tbl td {
        font-size: 0.82rem;
        padding: 0.4rem;
    }
}

/* Nastavení webu — správa uživatelů */
.link-like {
    color: var(--accent-primary);
    text-decoration: underline;
    text-underline-offset: 2px;
}

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

/* Scrollovatelný obal stránky (nadřazený .app-main-inner má overflow:hidden) */
.settings-scroll-host {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    display: flex;
    flex-direction: column;
}

.settings-page {
    padding: clamp(0.75rem, 2vw, 1.25rem);
    max-width: 960px;
    margin: 0 auto;
    width: 100%;
    box-sizing: border-box;
}

.settings-page-title {
    margin: 0;
}

.settings-simple-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.settings-table-card {
    background: var(--panel);
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    overflow: auto;
    max-height: min(70vh, 560px);
}

.settings-users-tbl {
    margin: 0;
    min-width: 100%;
}

.settings-col-icons {
    width: 1%;
    white-space: nowrap;
    text-align: right;
    vertical-align: middle;
}

.settings-icon-row {
    justify-content: flex-end;
}

.settings-users-tbl tbody tr.row-selected {
    background: rgba(46, 125, 146, 0.22);
}

.settings-banner {
    padding: 0.65rem 0.85rem;
    border-radius: var(--radius);
    margin-bottom: 1rem;
    font-size: 0.92rem;
}

.settings-banner--ok {
    background: rgba(31, 181, 168, 0.15);
    border: 1px solid rgba(31, 181, 168, 0.4);
    color: var(--text-main);
}

.settings-banner--err {
    background: rgba(224, 122, 122, 0.12);
    border: 1px solid rgba(224, 122, 122, 0.45);
    color: #ffd0d0;
}

.tbl.tbl--compact th,
.tbl.tbl--compact td {
    padding: 0.35rem 0.5rem;
    font-size: 0.88rem;
}

.settings-modal-layer {
    position: fixed;
    inset: 0;
    z-index: 4000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: max(1rem, env(safe-area-inset-top)) max(1rem, env(safe-area-inset-right))
        max(1rem, env(safe-area-inset-bottom)) max(1rem, env(safe-area-inset-left));
    box-sizing: border-box;
    pointer-events: auto;
}

.settings-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(2, 8, 18, 0.72);
    backdrop-filter: blur(4px);
    pointer-events: auto;
}

.settings-modal-dialog {
    position: relative;
    z-index: 1;
    width: min(100%, 440px);
    max-height: min(88vh, 640px);
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0;
    overflow: hidden;
    box-shadow: var(--shadow);
}

.settings-modal-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.85rem 1rem 0.5rem;
    border-bottom: 1px solid var(--border-color);
    flex-shrink: 0;
}

.settings-modal-title {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 700;
}

.settings-modal-msg {
    margin: 0 1rem;
    padding: 0.5rem 0.65rem;
    border-radius: 8px;
    font-size: 0.88rem;
}

.settings-modal-msg--ok {
    background: rgba(31, 181, 168, 0.12);
    border: 1px solid rgba(31, 181, 168, 0.35);
}

.settings-modal-msg--err {
    background: rgba(224, 122, 122, 0.12);
    border: 1px solid rgba(224, 122, 122, 0.4);
    color: #ffc8c8;
}

.settings-modal-body {
    padding: 0.75rem 1rem 0.5rem;
    overflow-y: auto;
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.settings-modal-footer {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.5rem;
    padding: 0.65rem 1rem 0.85rem;
    border-top: 1px solid var(--border-color);
    flex-shrink: 0;
    background: rgba(0, 0, 0, 0.08);
}

.settings-hint {
    margin: 0 0 0.35rem;
    font-size: 0.78rem;
    line-height: 1.35;
}

.settings-modal-body .fld,
.settings-modal-body select.fld {
    width: 100%;
    padding: 0.45rem 0.55rem;
    font: inherit;
    color: var(--text-main);
    background: var(--bg-input);
    border: 1px solid var(--border-color);
    border-radius: 9px;
    box-sizing: border-box;
}

.fld-label {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--text-muted);
    margin-top: 0.35rem;
}

.fld-label:first-child {
    margin-top: 0;
}

.fld-check {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.9rem;
    margin-top: 0.25rem;
    cursor: pointer;
}

@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

}