/* ─────────────────────────────────────────────────────────────────────────
   OnePortal design tokens — the shared visual language.
   Mirrors OnePortal.Blazor/wwwroot/css/themes.css exactly. Any downstream
   portal that consumes these tokens will look like it belongs to the same
   product family. Update tokens here ONLY by reflecting a token change in
   OnePortal itself — never diverge.
   ───────────────────────────────────────────────────────────────────────── */

:root {
    /* ── Surfaces ───────────────────────────────────────────────────────── */
    --bg-primary:    #ffffff;
    --bg-secondary:  #f8fafc;
    --bg-tertiary:   #f1f5f9;
    --bg-app:        #f8fafc;       /* page-level background */
    --bg-sidebar:    #ffffff;

    /* ── Text ───────────────────────────────────────────────────────────── */
    --text-primary:    #141414;     /* brand ink */
    --text-secondary:  #141414;
    --text-tertiary:   #4b5563;
    --text-muted:      #6b7280;
    --text-on-dark:    #ffffff;
    --text-sidebar:    #141414;

    /* ── Borders ────────────────────────────────────────────────────────── */
    --border-primary:    #e2e8f0;
    --border-secondary:  #d1d5db;
    --border-focus:      #3b82f6;
    --hairline:          #e2e8f0;
    --hair-light:        #f1f5f9;

    /* ── Accent (brand) ─────────────────────────────────────────────────── */
    --accent-primary:  #1e40af;   /* royal blue — buttons, active states */
    --accent-hover:    #1d4ed8;
    --accent-light:    #dbeafe;
    --accent-dark:     #001f57;   /* deep navy — header bar, collapsed pill */
    --accent-darker:   #001236;

    /* ── Cards ──────────────────────────────────────────────────────────── */
    --card-bg:      #ffffff;
    --card-border:  #e2e8f0;

    /* ── Buttons ────────────────────────────────────────────────────────── */
    --btn-primary-bg:    #1e40af;
    --btn-primary-hover: #1d4ed8;
    --btn-primary-text:  #ffffff;

    /* ── Status ─────────────────────────────────────────────────────────── */
    --success:    #10b981;
    --success-bg: #f0fdf4;
    --error:      #ef4444;
    --error-bg:   #fef2f2;
    --warning:    #f59e0b;
    --warning-bg: #fffbeb;
    --info:       #0ea5e9;

    /* ── Shadows ────────────────────────────────────────────────────────── */
    --shadow-sm:  0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-md:  0 4px 6px -1px rgba(0, 0, 0, 0.10);
    --shadow-lg:  0 10px 15px -3px rgba(0, 0, 0, 0.10);
    --shadow-xl:  0 20px 25px -5px rgba(0, 0, 0, 0.10);
    --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
    --shadow-sidebar: 2px 0 16px rgba(0, 31, 87, 0.07);
    --shadow-header: 0 4px 18px rgba(0, 31, 87, 0.12);

    /* ── Radius ─────────────────────────────────────────────────────────── */
    --radius-xs:    4px;
    --radius-sm:    6px;
    --radius-md:    8px;
    --radius-lg:    12px;
    --radius-xl:    16px;
    --radius-pill:  30px;
    --radius-full:  999px;

    /* ── Spacing ────────────────────────────────────────────────────────── */
    --sidebar-width:  260px;
    --sidebar-width-collapsed: 78px;

    /* ── Typography ─────────────────────────────────────────────────────── */
    --font-display: 'Ubuntu', 'Inter', 'Segoe UI', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
    --font-body:    'Ubuntu', 'Segoe UI', 'Inter', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;

    /* ── Motion ─────────────────────────────────────────────────────────── */
    --transition-fast: 150ms ease;
    --transition-base: 200ms ease;
}

/* ─────────────────────────────────────────────────────────────────────────
   Global resets aligned to OnePortal.
   ───────────────────────────────────────────────────────────────────────── */
html, body {
    background: var(--bg-app);
    color: var(--text-primary);
    font-family: var(--font-body);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Scrollbar — slimmer, brand-tinted */
::-webkit-scrollbar         { width: 8px; height: 8px; }
::-webkit-scrollbar-track   { background: transparent; }
::-webkit-scrollbar-thumb   { background: #cbd5e1; border-radius: 999px; }
::-webkit-scrollbar-thumb:hover { background: #94a3b8; }

/* ─────────────────────────────────────────────────────────────────────────
   Tighten the top of every page so the navy banner sits close to the top
   like OnePortal. The pages all use `.page-content` with padding: 2rem 2.5rem
   which adds 32px on top; we zero the top component here so the only spacing
   above the banner is the PageHeader's own 16px margin — matches OnePortal's
   tp-hdr-inner spacing.
   ───────────────────────────────────────────────────────────────────────── */
.page-container { background: var(--bg-app) !important; }
.page-content   { padding-top: 0 !important; }

/* ── App shell: sidebar + main column ─────────────────────────────────── */
.onep-shell {
    display: flex;
    min-height: 100vh;
    width: 100%;
    font-family: var(--font-body);
    background: var(--bg-app);
}

.onep-main {
    flex: 1;
    min-width: 0;
    background: var(--bg-app);
    overflow-y: auto;
    overflow-x: hidden;
    padding: 0;
    text-align: left;
}

@media (max-width: 992px) {
    .onep-shell { flex-direction: column; }
    .onep-main  { width: 100%; }
}

/* ─────────────────────────────────────────────────────────────────────────
   DARK THEME — applied when window.medicalTheme.toggleTheme() flips the
   .dark-theme class on <html>. Overrides every surface, text, border and
   shadow token so every component (sidebar, cards, page-header, inputs)
   repaints without per-component code changes.
   ───────────────────────────────────────────────────────────────────────── */
html.dark-theme {
    /* Surfaces — deep slate for cards, near-black for app shell */
    --bg-primary:    #1E293B;
    --bg-secondary:  #0F172A;
    --bg-tertiary:   #334155;
    --bg-app:        #0B1426;
    --bg-sidebar:    #0F172A;

    /* Text — high contrast against dark surface */
    --text-primary:    #F1F5F9;
    --text-secondary:  #E2E8F0;
    --text-tertiary:   #CBD5E1;
    --text-muted:      #94A3B8;
    --text-sidebar:    #F1F5F9;

    /* Borders / hairlines — soft slate so cards still separate */
    --border-primary:    #334155;
    --border-secondary:  #475569;
    --hairline:          #334155;
    --hair-light:        #1E293B;

    /* Accent — same brand-blue, but the "light" surface that fills active
       nav items needs to be a tinted navy rather than a pale-blue wash. */
    --accent-light:  #1E3A8A;

    /* Cards */
    --card-bg:      #1E293B;
    --card-border:  #334155;

    /* Shadows — deeper opacity so they read on dark surface */
    --shadow-sm:      0 1px 2px 0 rgba(0, 0, 0, 0.30);
    --shadow-md:      0 4px 6px -1px rgba(0, 0, 0, 0.30);
    --shadow-lg:      0 10px 15px -3px rgba(0, 0, 0, 0.40);
    --shadow-xl:      0 20px 25px -5px rgba(0, 0, 0, 0.45);
    --shadow-card:    0 1px 3px rgba(0, 0, 0, 0.30);
    --shadow-sidebar: 2px 0 16px rgba(0, 0, 0, 0.40);
    --shadow-header:  0 4px 18px rgba(0, 0, 0, 0.50);
}

/* Body painted with the app surface so the page behind cards is the right
   dark tone rather than the browser's default white between paints. */
html.dark-theme body { background: var(--bg-app); color: var(--text-primary); }

/* Help card in the sidebar — its bespoke gradient needs a darker variant
   so it doesn't glow white on a dark rail. */
html.dark-theme .onep-sidebar-help {
    background: linear-gradient(135deg, #1E293B 0%, #1E3A8A 100%);
    border-color: #334155;
}
html.dark-theme .onep-help-text  { color: var(--text-tertiary); }
html.dark-theme .onep-help-title { color: var(--text-primary); }

/* Scrollbar repaints for dark mode */
html.dark-theme ::-webkit-scrollbar-thumb        { background: #475569; }
html.dark-theme ::-webkit-scrollbar-thumb:hover  { background: #64748B; }