/* MedAssistant Design System — v2 "StarsClinic" light theme
   (tokens extracted from the Claude Design prototypes, see STA-66) */

:root {
    --c-bg:             #f5f7f8;
    --c-surface:        #ffffff;
    --c-surface-muted:  #f3f6f7;
    --c-text-primary:   #1b272d;
    --c-text-body:      #33424a;
    --c-text-secondary: #4a585f;
    --c-text-muted:     #9aa7ad;
    --c-text-label:     #a4afb4;
    --c-accent:         oklch(0.56 0.08 205);
    --c-accent-hover:   oklch(0.51 0.08 205);
    --c-accent-light:   oklch(0.96 0.02 205);
    --c-accent-border:  oklch(0.9 0.03 205);
    --c-accent-text:    oklch(0.46 0.08 205);
    --c-border:         #e4e9eb;
    --c-border-card:    #e6ebed;
    --c-border-soft:    #eef2f3;
    --c-border-input:   #dfe5e8;
    --c-hover:          #f2f5f6;
    --c-success:        oklch(0.55 0.1 155);
    --c-success-text:   oklch(0.45 0.09 155);
    --c-success-light:  oklch(0.95 0.04 155);
    --c-error:          #cf4444;
    --c-error-light:    #fdf2f2;
    --c-warning:        oklch(0.6 0.12 50);
    --c-warning-text:   oklch(0.45 0.1 50);
    --c-warning-light:  oklch(0.96 0.04 85);
    --c-sidebar-bg:         #fbfcfc;
    --c-sidebar-text:       #28333a;
    --c-sidebar-text-muted: #9aa7ad;
    --c-sidebar-border:     #eef2f3;
    --c-sidebar-hover:      #f2f5f6;
    --c-sidebar-active:     oklch(0.96 0.02 205);
    --c-sidebar-accent:     oklch(0.56 0.08 205);

    --font-sans: 'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
    --font-mono: 'IBM Plex Mono', ui-monospace, 'Cascadia Code', 'Consolas', 'Courier New', monospace;
    --text-xs:   0.75rem;
    --text-sm:   0.875rem;
    --text-base: 1rem;
    --text-lg:   1.125rem;
    --text-xl:   1.5rem;
    --text-2xl:  2rem;
    --weight-normal:   400;
    --weight-medium:   500;
    --weight-semibold: 600;
    --leading-tight:   1.25;
    --leading-normal:  1.5;
    --leading-relaxed: 1.625;

    --sp-1: 0.25rem;
    --sp-2: 0.5rem;
    --sp-3: 0.75rem;
    --sp-4: 1rem;
    --sp-6: 1.5rem;
    --sp-8: 2rem;

    --radius-sm:    6px;
    --radius-md:    9px;
    --radius-lg:    12px;
    --radius-card:  14px;
    --radius-xl:    16px;
    --radius-full:  9999px;

    --shadow-xs:    0 1px 2px rgba(20,60,70,.08);
    --shadow-sm:    0 1px 4px rgba(15,30,40,.07);
    --shadow-md:    0 4px 16px rgba(15,30,40,.08);
    --shadow-lg:    0 8px 40px rgba(15,30,40,.12);
    --shadow-modal: 0 22px 60px rgba(15,30,40,.3);

    --focus-ring: 0 0 0 3px oklch(0.56 0.08 205 / 0.3);
}

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

html, body {
    height: 100%;
    font-family: var(--font-sans);
    font-size: var(--text-base);
    line-height: var(--leading-normal);
    color: var(--c-text-primary);
    background: var(--c-bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

#app { height: 100%; }

:focus { outline: none; }
:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--radius-sm); }

h1,h2,h3,h4 { line-height: var(--leading-tight); font-weight: var(--weight-semibold); }
p { line-height: var(--leading-relaxed); }
a { color: var(--c-accent); text-decoration: none; }
a:hover { color: var(--c-accent-hover); text-decoration: underline; }

code {
    font-family: var(--font-mono);
    font-size: .85em;
    background: var(--c-surface-muted);
    border: 1px solid var(--c-border-soft);
    border-radius: var(--radius-sm);
    padding: 1px 5px;
    color: var(--c-accent-text);
}

/* ── Motion (prototype: fadeUp on content, overlayIn on modal backdrops) ── */
@keyframes fadeUp   { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes overlayIn { from { opacity: 0; } to { opacity: 1; } }

/* ── Thin scrollbars ── */
* { scrollbar-width: thin; scrollbar-color: #ccd4d9 transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
    background: #ccd4d9;
    border-radius: 8px;
    border: 3px solid transparent;
    background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover { background: #b2bcc2; background-clip: content-box; }

/* ── Shared primitives from the prototype ── */

/* 10.5px uppercase section headings ("Пациенты", "Хронология", …) */
.section-label {
    font-size: 0.657rem;
    font-weight: var(--weight-semibold);
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--c-text-label);
}

/* Status pills: «готово» / «готовится» / errors */
.pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 0.656rem;
    font-weight: var(--weight-semibold);
    border-radius: 6px;
    padding: 3px 8px;
    white-space: nowrap;
}
.pill-success { color: var(--c-success-text); background: var(--c-success-light); }
.pill-warning { color: var(--c-warning-text); background: var(--c-warning-light); }
.pill-error   { color: var(--c-error);        background: var(--c-error-light); }
.pill-accent  { color: var(--c-accent-text);  background: var(--c-accent-light); }

/* Mono value chips (meds, IDs, file extensions) */
.chip-mono {
    display: inline-block;
    font-family: var(--font-mono);
    font-size: 0.781rem;
    color: var(--c-text-secondary);
    background: var(--c-surface-muted);
    border: 1px solid #e7ecee;
    border-radius: 8px;
    padding: 6px 11px;
}

/* Initial loader (visible until Blazor mounts and replaces #app contents).
   Fixed-position flex centering keeps the spinner and the percent label
   in a single column with a stable gap, so the label never overlaps the
   ring (the previous absolute layout placed the text inside the circle). */
.initial-loader {
    position: fixed; inset: 0;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    gap: var(--sp-4);
    background: var(--c-bg);
    z-index: 1;
}
.loading-progress {
    display: block;
    width: 5rem; height: 5rem;
}
.loading-progress circle {
    fill: none; stroke: var(--c-border);
    stroke-width: .5rem; transform-origin: 50% 50%; transform: rotate(-90deg);
}
.loading-progress circle:last-child {
    stroke: var(--c-accent);
    stroke-dasharray: calc(3.141 * var(--blazor-load-percentage, 0%) * 0.8), 500%;
    transition: stroke-dasharray .15s ease-in-out;
}
/* `tabular-nums` keeps digit widths equal so "5%" → "12%" → "100%" doesn't
   visually jiggle. `min-width` reserves a stable slot so the column stays
   centered as the label changes length. */
.loading-progress-text {
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    color: var(--c-text-secondary);
    letter-spacing: .02em;
    font-variant-numeric: tabular-nums;
    min-width: 4rem;
    text-align: center;
}
.loading-progress-text::after { content: var(--blazor-load-percentage-text, "Loading\2026"); }

#blazor-error-ui {
    color-scheme: light only;
    background: var(--c-warning-light);
    border-top: 1px solid var(--c-border);
    bottom: 0; left: 0;
    box-shadow: var(--shadow-md);
    display: none;
    padding: var(--sp-3) var(--sp-6);
    position: fixed; width: 100%; z-index: 9999;
    font-size: var(--text-sm);
}
#blazor-error-ui .dismiss { cursor: pointer; position: absolute; right: var(--sp-4); top: var(--sp-3); }
.blazor-error-boundary { background: var(--c-error-light); border: 1px solid var(--c-error); border-radius: var(--radius-md); padding: var(--sp-4); color: var(--c-error); }
.blazor-error-boundary::after { content: "An error has occurred."; }

/* Pre-auth (login) shell: full-viewport, no app chrome. The login page
   itself owns the split-screen layout, so this is just a full-height host. */
.auth-shell {
    display: flex;
    min-height: 100vh;
    background: var(--c-bg);
}

.auth-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    color: var(--c-text-muted);
    font-size: var(--text-sm);
}