/* 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-width-expanded: 240px;   /* room for the Credentialing submenu's names on one line */
}

.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);
}

/* ---- Sally's theme option 2 (2026-10-19): a white top band holding the full-colour logo and the
   header, the navy sidebar below it, and the active item as a lighter navy pill with the red marker.
   The full logo cannot sit on the navy: its "linora" is the same navy. Both layouts (MainLayout and
   the Repository's) use these classes, so this is all CSS: no markup changes, and eSkribes, which
   does not load this file, is untouched. */
:root {
    --clinorasys-band: 76px;           /* the white top band's height */
    --clinorasys-brand-width: 240px;   /* the logo's corner of it; the expanded sidebar's width */
}

.app-sidebar__brand,
.app-header {
    min-height: var(--clinorasys-band);
    box-sizing: border-box;
}

.app-sidebar__brand {
    background: #FFFFFF;
    border-bottom: 1px solid var(--line);
    padding: 0.5rem 0.5rem 0.5rem 1rem;
}

/* The logo stands in for the mark and the word: it is the mark button's background, so clicking it
   still collapses the sidebar where the layout offers that. Sized up on 2026-10-21 ("make the logo
   stand out more"): it fills the band's height rather than sitting small in it. */
.app-sidebar__mark,
.app-sidebar__wordmark {
    display: none;
}

.app-sidebar__mark-button {
    flex: 1 1 auto;
    height: 62px;
    margin: 0;
    padding: 0;
    background: url("img/clinorasys-logo-full.svg") left center / contain no-repeat;
}

/* The whole background again, not just its colour: theme.css's hover rule is the `background`
   shorthand, which reset the logo image to none, so the logo vanished while hovered and came back
   on leaving -- the flicker. */
.app-sidebar__mark-button:hover {
    background: url("img/clinorasys-logo-full.svg") left center / contain no-repeat;
}

/* The collapse toggle is a menu icon, whatever glyph the layout's markup names: the ligature is
   drawn by ::before, and the markup's own text is hidden. */
.app-sidebar__pin {
    width: 36px;
    height: 36px;
    color: var(--slate);
}

.app-sidebar__pin i {
    font-size: 0;
}

.app-sidebar__pin i::before {
    content: "menu";
    font-size: 1.5rem;
}

.app-sidebar__pin:hover {
    color: var(--clinorasys-navy);
    background: rgba(22, 60, 125, 0.08);
}

/* Collapsed (2026-10-21): only the navy menu narrows to its icon rail. The logo keeps its full size
   and its corner of the band, with the menu icon beside it to open the menu again -- before, the logo
   was squeezed down to the stethoscope "C" to fit the rail. The brand leaves the sidebar's flow to do
   this (fixed, like the sticky header it lines up with), so the rail is padded down by the band's
   height and the header moves over by the width the logo now covers. */
.app-sidebar:not(.app-sidebar--pinned) {
    padding-top: var(--clinorasys-band);
}

.app-sidebar:not(.app-sidebar--pinned) .app-sidebar__brand {
    position: fixed;
    top: 0;
    left: 0;
    width: var(--clinorasys-brand-width);
    height: var(--clinorasys-band);
    z-index: 101;
}

.app-sidebar:not(.app-sidebar--pinned) .app-sidebar__pin {
    display: flex;
}

.app-sidebar:not(.app-sidebar--pinned) ~ .app-main .app-header {
    padding-left: calc(var(--clinorasys-brand-width) - var(--app-sidebar-width, 68px) + 1.5rem);
}

/* The menu: items as rounded pills inset from the edges, the active one lighter, with the red
   marker at its left edge. */
.app-sidebar__menu {
    padding-top: 0.75rem;
}

.app-sidebar__menu .rz-navigation-item-wrapper {
    margin: 0.125rem 0.625rem;
    border-radius: 8px;
    overflow: hidden;
}

.app-sidebar__menu .rz-navigation-item-wrapper-active {
    background: rgba(255, 255, 255, 0.16);
    box-shadow: inset 3px 0 0 var(--clinorasys-red);
}

.app-sidebar__menu .rz-navigation-item-link {
    border-radius: 8px;
}

.app-sidebar__menu .rz-navigation-item-link-active {
    background: transparent;
}

/* Submenus (Credentialing here; Billing and Admin on the clinic side): Radzen paints nested items a
   neutral grey that clashes with the navy. They stay on the navy, indented under their parent, with
   the same lighter pill and red marker for the active one. */
.app-sidebar__menu .rz-navigation-menu,
.app-sidebar__menu .rz-navigation-menu .rz-navigation-item-wrapper {
    background: transparent;
}

.app-sidebar__menu .rz-navigation-menu .rz-navigation-item-wrapper {
    margin: 0.125rem 0.625rem 0.125rem 1.375rem;
    border-radius: 8px;
}

.app-sidebar__menu .rz-navigation-menu .rz-navigation-item-wrapper:hover {
    background: rgba(255, 255, 255, 0.10);
}

.app-sidebar__menu .rz-navigation-menu .rz-navigation-item-wrapper-active,
.app-sidebar__menu .rz-navigation-menu .rz-navigation-item-wrapper-active:hover {
    background: rgba(255, 255, 255, 0.16);
    box-shadow: inset 3px 0 0 var(--clinorasys-red);
}

.app-sidebar__menu .rz-navigation-menu .rz-navigation-item-link {
    padding-block: 0.45rem;
    padding-inline-start: 0.75rem;
    font-weight: 500;
}

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;
}

/* ---- The clinic sign-in, after Sally's Login.png (2026-10-19): the art fills the whole page, the
   white logo and the tagline sit top-left, and the sign-in card sits under them on the left. The
   shared page's split layout is restyled here rather than changed.

   THE ART: img/login-background.jpg (the user's choice, 2026-10-21; recompressed from 3.6 MB to
   0.3 MB at its full 2048px). Already dark, the doctor on the right: anchored right so the doctor
   stays in view whatever the width, and only a light wash on the left, where the card sits. */
.login-split {
    --login-art: url("img/login-background.jpg");
    position: relative;
    background:
        linear-gradient(90deg, rgba(5, 13, 43, 0.70) 0%, rgba(5, 13, 43, 0.35) 40%, rgba(5, 13, 43, 0) 65%),
        var(--login-art) right center / cover no-repeat,
        #050D2B;
}

.login-split__image {
    position: absolute;
    inset: 0 0 auto 0;
    flex: none;
    background: none;
    align-items: flex-start;
    pointer-events: none;
}

.login-split__overlay {
    padding: 2.5rem 3.5rem 0;
    background: none;
}

.login-split__logo {
    height: 120px;
    margin-bottom: 1.25rem;
}

.login-split__tagline {
    font-size: 1.5rem;
    max-width: none;
}

.login-split__form {
    flex: 1 1 auto;
    align-items: flex-start;
    justify-content: flex-start;
    padding: 17.5rem 3.5rem 3rem;
}

.login-split__form .auth-card {
    max-width: 440px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.97);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35);
}

.login-split__mobile-logo {
    display: none;
}

/* A phone: the logo and tagline stay at the top instead of disappearing, the card follows. */
@media (max-width: 860px) {
    .login-split {
        flex-direction: column;
    }

    .login-split__image {
        display: flex;
        position: static;
    }

    .login-split__overlay {
        padding: 1.75rem 1.25rem 0;
    }

    .login-split__logo {
        height: 84px;
    }

    .login-split__tagline {
        font-size: 1.125rem;
    }

    .login-split__form {
        padding: 1.5rem 1.25rem 2rem;
    }

    .login-split__mobile-logo {
        display: none;
    }
}

/* 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);
}

/* ---- The Credentialing pages (Payer Status, Required Documents, Contracts & Letters), after Sally's
   prototype: a navy banner naming the provider, plain tables with uppercase headers, and statuses and
   expiries as coloured pills. Colours: green enrolled/valid, blue in process, amber warning, red
   denied/expired/missing, grey not started. */
.cred-banner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    background: var(--clinorasys-navy);
    color: #FFFFFF;
    border-radius: 12px;
    padding: 1rem 1.25rem;
    margin-bottom: 1rem;
}

.cred-banner__name { font-size: 1.125rem; font-weight: 700; }
.cred-banner__meta { display: flex; gap: 0.75rem; flex-wrap: wrap; align-items: center; font-size: 0.8rem; color: rgba(255, 255, 255, 0.8); margin-top: 0.25rem; }
.cred-banner__meta b { color: #FFFFFF; font-family: ui-monospace, monospace; }
.cred-banner__chip { background: rgba(255, 255, 255, 0.14); border: 1px solid rgba(255, 255, 255, 0.25); border-radius: 999px; padding: 0.1rem 0.6rem; color: #FFFFFF; }
.cred-banner__count { background: rgba(255, 255, 255, 0.12); border: 1px solid rgba(255, 255, 255, 0.25); border-radius: 8px; padding: 0.4rem 0.9rem; text-align: center; min-width: 110px; }
.cred-banner__count span { display: block; font-size: 0.65rem; text-transform: uppercase; letter-spacing: 0.06em; color: rgba(255, 255, 255, 0.75); }
.cred-banner__count b { font-size: 1.05rem; }

.cred-table-wrap { overflow-x: auto; background: #FFFFFF; border: 1px solid var(--line); border-radius: 12px; }
.cred-table { width: 100%; border-collapse: collapse; font-size: 0.8125rem; }
.cred-table th { text-align: left; padding: 0.7rem 0.75rem; font-size: 0.68rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em;
                 color: var(--slate); background: #F1F4F9; border-bottom: 1px solid var(--line); }
.cred-table td { padding: 0.5rem 0.75rem; border-bottom: 1px solid #EEF1F6; vertical-align: middle; }
.cred-table tbody tr:hover { background: #F8FAFC; }
.cred-table tr:last-child td { border-bottom: none; }
.cred-subhead td { background: #F6F7FB; font-size: 0.7rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--slate); }
.cred-empty { text-align: center; color: var(--mist); padding: 1.25rem !important; }
.cred-mono, .cred-mono input { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; }
.cred-row-error { color: var(--alert); font-size: 0.75rem; margin-top: 0.2rem; }
.cred-problems { margin: 0.25rem 0 0.5rem 1.25rem; font-size: 0.8rem; color: var(--alert); }

/* Status: the dropdown's own box takes the colour, so the grid reads at a glance. */
.cred-status { display: inline-block; padding: 0.15rem 0.6rem; border-radius: 999px; font-size: 0.72rem; font-weight: 700; border: 1px solid; }
.cred-status--enrolled, .rz-dropdown.cred-status--enrolled { background: #ECFDF3; color: #067647; border-color: #6CE9A6; }
.cred-status--in-process, .rz-dropdown.cred-status--in-process { background: #EFF6FF; color: #1D4ED8; border-color: #93C5FD; }
.cred-status--not-started, .rz-dropdown.cred-status--not-started { background: #F8FAFC; color: #475467; border-color: #CBD5E1; }
.cred-status--denied, .rz-dropdown.cred-status--denied { background: #FEF3F2; color: #B42318; border-color: #FDA29B; }
.cred-status--terminated, .rz-dropdown.cred-status--terminated { background: #F2F4F7; color: #344054; border-color: #98A2B3; }
.rz-dropdown[class*="cred-status--"] .rz-dropdown-label { font-weight: 700; color: inherit; }

/* Expiry badges (Required Documents). */
.cred-badge { display: inline-block; padding: 0.2rem 0.65rem; border-radius: 999px; font-size: 0.7rem; font-weight: 700; border: 1px solid; white-space: nowrap; }
.cred-badge--valid { background: #ECFDF3; color: #067647; border-color: #6CE9A6; }
.cred-badge--warning { background: #FFFAEB; color: #B54708; border-color: #FEC84B; }
.cred-badge--danger { background: #FEF3F2; color: #B42318; border-color: #FDA29B; }
.cred-badge--none { background: #F2F4F7; color: #475467; border-color: #D0D5DD; }

.cred-legend { font-size: 0.75rem; color: var(--slate); background: #F6F7FB; border: 1px solid var(--line); border-radius: 8px; padding: 0.5rem 0.75rem; }

/* The dashboard's credentialing figures. */
.cred-tile { display: flex; justify-content: space-between; align-items: center; height: 100%; }
.cred-tile__label { font-size: 0.7rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--slate); }
.cred-tile__value { font-size: 1.75rem; font-weight: 700; color: var(--ink); line-height: 1.2; margin-top: 0.15rem; }
.cred-tile__sub { font-size: 0.75rem; color: var(--slate); }
.cred-tile__icon { width: 46px; height: 46px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; }
.cred-tile__icon--navy { background: rgba(22, 60, 125, 0.08); color: var(--clinorasys-navy); }
.cred-tile__icon--green { background: #ECFDF3; color: #067647; }
.cred-tile__icon--red { background: #FEF3F2; color: #B42318; }
.cred-tile__value--green { color: #067647; }
.cred-tile__value--red { color: #B42318; }

.cred-bar { margin-bottom: 0.75rem; }
.cred-bar__head { display: flex; justify-content: space-between; font-size: 0.78rem; margin-bottom: 0.25rem; color: var(--slate); }
.cred-bar__head b { color: var(--ink); }
.cred-bar__track { height: 8px; border-radius: 999px; background: #EEF1F6; overflow: hidden; }
.cred-bar__fill { height: 100%; border-radius: 999px; }
.cred-bar__fill--enrolled { background: #12B76A; }
.cred-bar__fill--in-process { background: #2E90FA; }
.cred-bar__fill--not-started { background: #98A2B3; }
.cred-bar__fill--denied { background: #F04438; }
.cred-bar__fill--terminated { background: #475467; }

/* Payer Status's note when it is read-only, and the Credentials Vault's masked password. */
.cred-note {
    white-space: pre-wrap;
    color: var(--slate);
}

.cred-secret {
    letter-spacing: 0.04em;
    min-width: 10ch;
}