/* ClinoraSys brand theme -- loaded after theme.css on ClinoraSys deployments only (App.razor).
   The colours are the logo's (Media/Clinorasys Logo.svg, the cleaner master of 2026-10-04; the
   img/ files are built from it by tools/make_logo.py), read from its vectors:

     navy  #163C7D   the stethoscope "C" and "linora"   -> primary: sidebar, buttons, links, headings
     red   #FD1531   the tube, chest piece and "Sys"     -> accent: active marker, counts, highlights

   White on the navy is about 10:1.

   Red is an ACCENT, never body text: on white it measures about 3.9:1, under the 4.5:1 that small
   text needs. Errors keep their own deeper red so a warning is not mistaken for the brand. eSkribes
   is untouched: everything here only re-points theme.css's tokens. */

:root {
    --clinorasys-navy: #163C7D;
    --clinorasys-red: #FD1531;

    /* theme.css's brand tokens */
    --ink: #0F1B36;          /* text: a navy-black, so headings sit with the logo */
    --petrol: #163C7D;       /* theme.css's primary token -> navy */
    --signal: #FD1531;       /* theme.css's accent token -> red */
    --slate: #4B5670;        /* secondary text, navy-grey */
    --mist: #98A2B8;
    --line: #DDE2EC;
    --paper: #F6F7FB;
    --alert: #B42318;        /* errors: deeper than the brand red */

    --rz-primary: #163C7D;
    --rz-primary-light: #2A55A0;
    --rz-primary-lighter: rgba(22, 60, 125, 0.10);
    --rz-primary-dark: #11306A;
    --rz-primary-darker: #0C2550;
    --rz-on-primary: #FFFFFF;
    --rz-on-primary-lighter: #163C7D;

    --rz-secondary: #FD1531;
    --rz-secondary-light: #FF4D63;
    --rz-secondary-lighter: rgba(253, 21, 49, 0.10);
    --rz-secondary-dark: #D90E2B;
    --rz-secondary-darker: #B00A22;

    --rz-danger: #B42318;
    --rz-danger-light: #C8382D;
    --rz-danger-lighter: rgba(180, 35, 24, 0.10);
    --rz-danger-dark: #912018;
    --rz-danger-darker: #7A1A13;

    --rz-card-shadow: 0 1px 2px 0 rgba(22, 60, 125, 0.08);

    /* Radzen colours links with the accent token; links are text, so they are navy, red only on hover. */
    --rz-link-color: #163C7D;
    --rz-link-hover-color: #FD1531;
}

/* The sidebar in the logo's navy (theme.css uses --ink, the text colour), with the red marker on
   the active item that the logo's red tube suggests. */
.app-sidebar {
    background: var(--clinorasys-navy);
}

.app-sidebar__menu {
    --rz-panel-menu-item-hover-background-color: rgba(255, 255, 255, 0.10);
    --rz-panel-menu-item-active-background-color: rgba(255, 255, 255, 0.16);
    --rz-panel-menu-item-active-indicator: var(--clinorasys-red);
}

a:hover {
    color: var(--clinorasys-red);
}

/* Focus rings in the brand navy, clearly visible on white. */
:focus-visible {
    outline-color: var(--clinorasys-navy);
}

/* The full logo (the stethoscope's tube makes it about 2:1) with hairline lettering: it needs real
   height to read, far more than eSkribes' one-line wordmark. */
.auth-card__logo {
    height: 108px;
    margin-bottom: 1rem;
}

.login-split__logo {
    height: 96px;
    margin-bottom: 1rem;
}

.login-split__mobile-logo {
    height: 88px;
}

/* The sign-in photo's shade, in navy and deep enough at the bottom for the white logo's thin strokes. */
.login-split__overlay {
    padding-top: 6rem;
    background: linear-gradient(180deg, rgba(22, 60, 125, 0) 0%, rgba(22, 60, 125, 0.80) 45%, rgba(22, 60, 125, 0.95) 100%);
}

/* The dashboard's "needs attention" wash used eSkribes' teal. */
.dash-stat--attention {
    background: linear-gradient(to bottom, rgba(253, 21, 49, 0.05), #FFFFFF 60%);
}

/* Repository: avatar initials and role chip in the brand navy tint. */
.avatar--initials,
.user-menu__role {
    background: rgba(22, 60, 125, 0.10);
    color: var(--clinorasys-navy);
}

/* The bell's unread count is the brand red, with the white ring the mockup shows. */
.user-menu__count {
    background: var(--clinorasys-red);
}