/* =========================================================
   LabClinic — global styles (MudBlazor based)
========================================================= */

/* ---------------------------------------------------------
   Design tokens. Single source of truth for the palette,
   radii, spacing and shadows used across the app. These
   mirror AppMudTheme.cs so component CSS and inline styles
   can reference one name instead of repeating hex values —
   and so a future dark theme only has to reassign these.
--------------------------------------------------------- */
:root {
    --lc-primary: #2d57dc;
    --lc-primary-dark: #1c3fa8;
    --lc-primary-light: #5b7df0;
    --lc-secondary: #5e51ad;
    --lc-success: #16a063;
    --lc-warning: #d18a17;
    --lc-error: #d63b3b;

    --lc-text-primary: #1f2a44;
    --lc-text-secondary: #5d6786;

    --lc-bg: #f4f6fb;
    --lc-surface: #ffffff;
    --lc-surface-muted: #fbfcfe;
    --lc-border: #eef0f5;
    --lc-border-strong: #e7eaf3;

    --lc-radius: 4px;
    --lc-radius-pill: 999px;

    --lc-shadow-sm: 0 6px 14px rgba(31, 42, 68, 0.05);
    --lc-shadow-md: 0 12px 22px rgba(31, 42, 68, 0.10);

    --lc-ease: cubic-bezier(.4, 0, .2, 1);
}

html, body {
    min-height: 100vh;
    margin: 0;
    background: #f4f6fb;
    font-family: 'Inter', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6,
.mud-typography-h1, .mud-typography-h2, .mud-typography-h3,
.mud-typography-h4, .mud-typography-h5, .mud-typography-h6 {
    font-family: 'Plus Jakarta Sans', 'Inter', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    letter-spacing: -0.01em;
}

h1:focus { outline: none; }

.valid.modified:not([type=checkbox]) { outline: 1px solid #26b050; }
.invalid { outline: 1px solid red; }
.validation-message { color: #d63b3b; font-size: .8rem; }

/* Scrollbar polish */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #cdd5e3; border-radius: 8px; border: 2px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background: #a8b3c7; }

/* App-level frame helpers — only set horizontal/bottom padding, leave
   padding-top to MudMainContent so it correctly clears the fixed MudAppBar.
   Add a margin on the first child to give the page some breathing room
   below the AppBar without overriding MudMainContent's offset. */
.app-content-shell {
    padding-left: 28px;
    padding-right: 28px;
    padding-bottom: 32px;
}

.app-content-shell > *:first-child {
    margin-top: 24px;
}

@media (max-width: 900px) {
    .app-content-shell {
        padding-left: 16px;
        padding-right: 16px;
        padding-bottom: 24px;
    }

    .app-content-shell > *:first-child {
        margin-top: 16px;
    }
}

/* Per-page hero — white workspace bar, dark text, soft border. No
   shadow (kept flat to read as part of the same surface as the
   panels below). */
.page-hero {
    background: #ffffff;
    color: #1f2a44;
    border: 1px solid #eef0f5;
    border-radius: 4px;
    padding: 12px 20px;
    min-height: 56px;
    display: flex;
    align-items: center;
}

.page-hero h1, .page-hero h2, .page-hero h3, .page-hero h4, .page-hero h5 {
    margin: 0;
    /* Hero bar is a white surface — keep headings dark. (Previously forced
       #fff, which was invisible on the white bar unless overridden inline.) */
    color: var(--lc-text-primary);
}

.page-hero-subtitle {
    margin-top: 10px !important;
    margin-bottom: 4px !important;
    color: var(--mud-palette-text-secondary) !important;
}

.page-hero-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

/* Hero variant that hosts inline form controls (filter / search bar etc). */
.page-hero-toolbar {
    min-height: 56px;
    padding: 8px 16px;
    flex-wrap: wrap;
    column-gap: 8px;
    row-gap: 8px;
}

.page-hero-toolbar .orders-title {
    margin-right: 8px;
    white-space: nowrap;
}

/* The whole search assembly reads as one connected unit — soft gray
   pill on the white hero, native HTML <select>/<input> elements flush
   against each other, separated only by thin dividers, with the search
   icon as the trailing button. */
.hero-search-group {
    display: inline-flex !important;
    align-items: stretch;
    background: #f4f6fb;
    border: 1px solid #e7eaf3;
    border-radius: 4px;
    overflow: hidden;
    height: 40px;
}

/* Aggressive reset on the children so they don't inherit any rounded
   chrome from MudBlazor's global form-element rules or browser defaults. */
.hero-search-group > .hero-input,
.hero-search-group > input.hero-input,
.hero-search-group > select.hero-input {
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    height: 40px !important;
    box-sizing: border-box !important;
    padding: 0 12px !important;
    margin: 0 !important;
    border: 0 !important;
    border-right: 1px solid rgba(31, 42, 68, 0.10) !important;
    border-radius: 0 !important;
    background-color: transparent !important;
    box-shadow: none !important;
    color: #1f2a44 !important;
    font-family: inherit !important;
    font-size: 0.9rem !important;
    line-height: 40px !important;
    outline: none !important;
    flex: 0 0 auto;
}

.hero-search-group > .hero-input::placeholder {
    color: rgba(31, 42, 68, 0.50) !important;
    opacity: 1;
}

.hero-search-group > .hero-input:focus,
.hero-search-group > .hero-input:focus-visible {
    box-shadow: none !important;
    background-color: transparent !important;
    outline: none !important;
}

.hero-search-group > .hero-input-narrow { width: 140px; }
.hero-search-group > .hero-input-medium { width: 180px; }
.hero-search-group > .hero-input-grow   { flex: 1 1 280px; min-width: 240px; max-width: 420px; }

/* Native input/select truncate gracefully when shrunk. */
.hero-search-group > .hero-input {
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

/* Below 900px: search group spans the full row, inputs flex-shrink
   evenly so the bar stops overflowing the viewport on tablets. */
@media (max-width: 900px) {
    .hero-search-group {
        width: 100%;
        max-width: 100%;
    }
    .hero-search-group > .hero-input-narrow,
    .hero-search-group > .hero-input-medium,
    .hero-search-group > .hero-input-grow {
        flex: 1 1 0 !important;
        width: auto !important;
        min-width: 0 !important;
        max-width: none !important;
    }
}

/* Below 600px (phones): also tighten padding so a 3-input search row
   stays usable. */
@media (max-width: 600px) {
    .page-hero-toolbar {
        padding: 8px 12px;
    }
    .hero-search-group > .hero-input {
        padding: 0 8px !important;
        font-size: 0.85rem !important;
    }
    .hero-search-group > .hero-select {
        padding-right: 26px !important;
        background-position: right 8px center !important;
    }
}

/* Native <select> needs a custom chevron since we hid the platform one. */
.hero-search-group > select.hero-select {
    cursor: pointer;
    padding-right: 32px !important;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path fill='%231f2a44' fill-opacity='0.55' d='M6 8L0 0h12z'/></svg>") !important;
    background-repeat: no-repeat !important;
    background-position: right 12px center !important;
}

/* Trailing search button — same height, same baseline. No right divider
   on the LAST visible segment of the group. */
.hero-search-group > .hero-search-btn {
    background: transparent !important;
    border: 0 !important;
    border-left: 1px solid rgba(31, 42, 68, 0.10) !important;
    border-radius: 0 !important;
    padding: 0 14px !important;
    color: var(--mud-palette-primary) !important;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    height: 40px;
    box-shadow: none !important;
}
.hero-search-group > .hero-search-btn:hover {
    background: rgba(31, 42, 68, 0.05) !important;
}

/* Stat cards used on dashboards */
.stat-card {
    border-radius: 4px;
    padding: 18px 22px;
    background: #ffffff;
    border: 1px solid #eef0f5;
    box-shadow: 0 6px 14px rgba(31, 42, 68, 0.05);
    transition: transform .18s ease, box-shadow .18s ease;
    height: 100%;
}

.stat-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 22px rgba(31, 42, 68, 0.10);
}

.stat-card .stat-label {
    font-size: .8rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #6b7390;
    font-weight: 600;
}

.stat-card .stat-value {
    font-size: 2rem;
    font-weight: 700;
    color: #1f2a44;
    margin: 6px 0 0;
    font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
}

/* Soft chip backgrounds */
.chip-priority-stat { background: #ffe1e3 !important; color: #b8333a !important; }
.chip-priority-urgent { background: #fff1d6 !important; color: #b16d10 !important; }
.chip-priority-routine { background: #e6ecf6 !important; color: #4a5781 !important; }

/* MudBlazor visual upgrades — tight radii for a serious look. */
.mud-paper { border-radius: 4px !important; }
.mud-card { border-radius: 4px !important; box-shadow: 0 6px 14px rgba(31, 42, 68, 0.05) !important; border: 1px solid #eef0f5; }
.mud-table { border-radius: 4px !important; overflow: hidden; }
.mud-table-head .mud-table-cell { font-weight: 600 !important; color: #4a5781 !important; background: #f7f9fc; }
.mud-table-row:hover .mud-table-cell { background-color: #f4f6fb !important; }

.mud-button { border-radius: 4px !important; text-transform: none !important; font-weight: 500 !important; letter-spacing: 0; }
.mud-button-filled { box-shadow: 0 4px 10px rgba(45, 87, 220, 0.18); }
.mud-icon-button { border-radius: 4px !important; }

.mud-input.mud-input-outlined .mud-input-outlined-border { border-radius: 4px; }
.mud-alert { border-radius: 4px !important; }
.mud-dialog { border-radius: 4px !important; }
.mud-menu-list, .mud-popover { border-radius: 4px !important; }

/* Override MudBlazor utility classes that paint heavy radii. Inline style
   like Style="border-radius:16px" is also defeated by these !important rules
   since they win on specificity tie. */
.rounded { border-radius: 4px !important; }
.rounded-sm { border-radius: 2px !important; }
.rounded-lg { border-radius: 4px !important; }
.rounded-xl { border-radius: 4px !important; }
.rounded-pill { border-radius: 999px !important; } /* keep chips pill-shaped */

/* Named container classes used across the app. */
.auth-card,
.page-container,
.page-container-top,
.page-container-side,
.page-container-main,
.page-container-bottom { border-radius: 4px !important; }

.mud-drawer {
    background: #ffffff !important;
    border-right: 1px solid #eef0f5 !important;
    /* Pin the fixed drawer on its own GPU layer so it doesn't flicker / blank out
       while the page scrolls (Chromium repaints fixed elements with heavy content). */
    transform: translateZ(0);
    backface-visibility: hidden;
}

/* Same treatment for the fixed app bar — its own compositor layer kills the
   scroll-time flicker without changing its fixed positioning. */
.mud-appbar {
    transform: translateZ(0);
    backface-visibility: hidden;
}

.mud-nav-link.active {
    background: linear-gradient(90deg, rgba(45, 87, 220, 0.08), rgba(94, 81, 173, 0.04)) !important;
    border-left: 3px solid #2d57dc;
    color: #2d57dc !important;
    font-weight: 600;
}

#blazor-error-ui {
    background: linear-gradient(180deg, #fef3f4 0%, #fde6ea 100%);
    border-top: 1px solid rgba(204, 51, 79, .35);
    color: #6b1e2c;
    bottom: 0;
    box-shadow: 0 -10px 30px -10px rgba(204, 51, 79, .25);
    display: none;
    left: 0;
    padding: 0.85rem 3rem 0.85rem 1.4rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
    font-size: 0.92rem;
    line-height: 1.4;
}

#blazor-error-ui .blazor-error-ui__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.6rem;
    height: 1.6rem;
    border-radius: 999px;
    background: #cc334f;
    color: #ffffff;
    font-weight: 800;
    font-size: 0.95rem;
    margin-right: 0.6rem;
    vertical-align: middle;
}

#blazor-error-ui .blazor-error-ui__copy {
    vertical-align: middle;
}

#blazor-error-ui a {
    color: #b4233b;
    font-weight: 600;
    text-decoration: underline;
}

#blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: 0.95rem;
    top: 50%;
    transform: translateY(-50%);
    width: 1.4rem;
    height: 1.4rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    color: #6b1e2c;
    font-size: 1.1rem;
    text-decoration: none !important;
}
#blazor-error-ui .dismiss:hover {
    background: rgba(204, 51, 79, .12);
}

.blazor-error-boundary {
    background: #b32121;
    padding: 1rem 1.25rem;
    color: white;
    border-radius: 8px;
}

.blazor-error-boundary::after { content: "An error has occurred." }

/* =========================================================
   Micro-interactions & accessibility polish
   Additive only — no layout or colour changes, just motion
   and focus affordances so the app feels responsive and is
   keyboard-navigable like a modern desktop application.
========================================================= */

/* Buttons gain a subtle lift and shadow on hover. */
.mud-button-root {
    transition: transform .12s var(--lc-ease), box-shadow .12s var(--lc-ease), background-color .12s var(--lc-ease) !important;
}
.mud-button-filled:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 14px rgba(45, 87, 220, 0.26) !important;
}
.mud-button-outlined:hover {
    background-color: rgba(45, 87, 220, 0.05) !important;
}

/* Nav links and table rows ease their hover/active transitions. */
.mud-nav-link { transition: background-color .15s var(--lc-ease), color .15s var(--lc-ease), border-color .15s var(--lc-ease); }
.mud-table-row .mud-table-cell { transition: background-color .12s var(--lc-ease); }

/* Clickable selection cards (e.g. the order lab picker) lift on hover. */
.order-lab-card:hover {
    box-shadow: var(--lc-shadow-sm);
    transform: translateY(-1px);
}

/* A single, consistent keyboard-focus ring across interactive elements.
   Only shows for keyboard users (:focus-visible), never on mouse click. */
.mud-button-root:focus-visible,
.mud-icon-button:focus-visible,
.mud-nav-link:focus-visible,
.mud-input-control:focus-within,
a:focus-visible,
[tabindex]:focus-visible {
    outline: 2px solid var(--lc-primary) !important;
    outline-offset: 2px !important;
    border-radius: var(--lc-radius);
}

/* Honour reduced-motion preferences. */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .001ms !important;
        transition-duration: .001ms !important;
    }
}