/*
    The clinic console's chrome — specs/23 §5.1, co-branded per specs/06
    AC25 and specs/34 §3.

    Header band in the practice's colour (or forest when it has none, or a
    stripe under forest when its colour cannot carry text), a persistent left
    navigation, and "powered by VetNutriLab" at navigation size in the header and
    the footer.

    Everything resolves to a --vn-* token. The six the practice may override
    (--vn-bg-brand, --vn-text-on-brand, --vn-action-primary and its hover,
    --vn-action-link, --vn-accent-clay) are set inline on <html> by the layout
    and picked up here without this file knowing a single hex value. Nothing
    inside .vn-shell__main reads them except links and the primary button:
    urgency, recall, status and the maths are styled by vetnexus-clinic.css
    against fixed palette steps.

    The dark bridge in vetnexus-clinic.css maps data-bs-theme onto the tokens,
    and the layout mirrors the attribute onto data-vn-theme for the token
    sheet's own rules. A practice's band colour is not re-mapped in dark: the
    guard computed on-band text for it, and that pair holds in either theme.
*/

.vn-shell {
    margin: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: var(--vn-bg-page);
    color: var(--vn-text-primary);
    font-family: var(--vn-font-body);
    line-height: var(--vn-leading-normal);
}

.vn-skip {
    position: absolute;
    left: -9999px;
    top: 0;
    padding: var(--vn-space-sm) var(--vn-space-md);
    background: var(--vn-bg-surface);
    color: var(--vn-text-primary);
    z-index: 10;
}

.vn-skip:focus {
    left: var(--vn-space-md);
}

/* ------------------------------------------------------------------------- *
   Header band
 * ------------------------------------------------------------------------- */
.vn-shell__top {
    background: var(--vn-bg-brand);
    color: var(--vn-text-on-brand);
}

.vn-shell__top-inner {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--vn-space-md) var(--vn-space-lg);
    padding: var(--vn-space-sm) var(--vn-space-lg);
    min-height: 64px;
}

.vn-shell__practice {
    display: flex;
    flex-direction: column;
    justify-content: center;
    color: inherit;
    text-decoration: none;
    min-width: 0;
}

.vn-shell__practice:hover {
    color: inherit;
    text-decoration: none;
}

.vn-shell__practice-name {
    font-family: var(--vn-font-display);
    font-weight: 700;
    font-size: var(--vn-text-headline);
    letter-spacing: -0.01em;
    line-height: var(--vn-leading-tight);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.vn-shell__practice-where {
    font-size: var(--vn-text-caption);
    opacity: 0.85;
    line-height: var(--vn-leading-tight);
}

.vn-shell__logo {
    height: 36px;
    width: auto;
    max-width: 240px;
    object-fit: contain;
}

/* The site switcher (23 §5.1). */
.vn-shell__sites {
    display: inline-flex;
    align-items: center;
    gap: var(--vn-space-xs);
    margin: 0;
}

.vn-shell__sites-label {
    font-size: var(--vn-text-overline);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-weight: 600;
    opacity: 0.85;
}

.vn-shell__sites-select {
    height: 36px;
    padding: 0 var(--vn-space-sm);
    border-radius: var(--vn-radius-sm);
    border: 1px solid color-mix(in srgb, var(--vn-text-on-brand) 45%, transparent);
    background: color-mix(in srgb, var(--vn-text-on-brand) 12%, transparent);
    color: inherit;
    font: inherit;
    max-width: 260px;
}

.vn-shell__sites-select option {
    color: var(--vn-text-primary);
    background: var(--vn-bg-surface);
}

.vn-shell__sites-go {
    height: 36px;
    padding: 0 var(--vn-space-sm);
    border-radius: var(--vn-radius-sm);
    border: 1px solid color-mix(in srgb, var(--vn-text-on-brand) 45%, transparent);
    background: transparent;
    color: inherit;
    font: inherit;
}

.vn-js .vn-nojs-only {
    display: none;
}

.vn-shell__top-right {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: var(--vn-space-md);
}

/* Attribution: navigation size, on-band colour, never themed by a practice. */
.vn-lockup {
    display: inline-flex;
    align-items: baseline;
    gap: var(--vn-space-xs);
    color: inherit;
    text-decoration: none;
    white-space: nowrap;
}

.vn-lockup:hover {
    color: inherit;
    text-decoration: none;
    opacity: 0.9;
}

.vn-lockup__by {
    font-size: var(--vn-text-overline);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-weight: 600;
    opacity: 0.85;
}

.vn-wordmark {
    font-family: var(--vn-font-display);
    font-weight: 400;
    font-size: var(--vn-text-headline);
    letter-spacing: -0.02em;
    white-space: nowrap;
}

.vn-wordmark b {
    font-weight: 700;
}

.vn-wordmark--sm {
    font-size: var(--vn-text-body);
}

.vn-shell__theme {
    color: inherit;
}

/* Plain links in the account area take the band's text colour. The Identity
   package's buttons (.nf-btn) carry their own fill and text colour, and
   inheriting the band's would put cream text on a white button. */
.vn-shell__account .nav-link,
.vn-shell__account a:not(.nf-btn),
.vn-shell__account .btn-link {
    color: inherit;
}

/* Except the signed-in person's own button (.nf-persona): a subtle button, so it
   has no fill of its own and sits straight on the band. Its theme text colour is
   dark in the light theme — 1.2:1 on forest — so it takes the band's instead, and
   a hover tint the band can carry rather than the light theme's pale one. */
.vn-shell__account .nf-persona {
    color: inherit;
}

.vn-shell__account .nf-persona:hover,
.vn-shell__account .nf-persona:focus-visible,
.vn-shell__account .nf-persona[aria-expanded="true"] {
    color: inherit;
    background-color: rgb(255 255 255 / 0.14);
}

.vn-shell__account .navbar-nav {
    flex-direction: row;
    gap: var(--vn-space-sm);
}

/* The guard's fallback: a practice colour that cannot carry text sits under
   the forest band as a stripe. */
.vn-clinic-stripe {
    height: 6px;
}

/* ------------------------------------------------------------------------- *
   Body: persistent left navigation + main
 * ------------------------------------------------------------------------- */
.vn-shell__body {
    flex: 1 1 auto;
    display: grid;
    grid-template-columns: 220px minmax(0, 1fr);
    max-width: var(--vn-band-max-width, 1400px);
    width: 100%;
    margin: 0 auto;
}

.vn-shell__nav {
    border-right: 1px solid var(--vn-border-hairline);
    padding: var(--vn-space-lg) var(--vn-space-sm);
    position: sticky;
    top: 0;
    align-self: start;
    max-height: 100vh;
    overflow-y: auto;
}

.vn-shell__nav-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.vn-shell__nav-link {
    display: block;
    padding: var(--vn-space-xs) var(--vn-space-sm);
    border-radius: var(--vn-radius-sm);
    color: var(--vn-text-primary);
    text-decoration: none;
    font-weight: 500;
    border-left: 3px solid transparent;
}

.vn-shell__nav-link:hover {
    background: var(--vn-bg-surface-quiet);
    color: var(--vn-text-primary);
    text-decoration: none;
}

.vn-shell__nav-link--current {
    background: var(--vn-bg-surface);
    border-left-color: var(--vn-action-primary);
    font-weight: 600;
}

.vn-shell__nav-note {
    margin: var(--vn-space-md) var(--vn-space-sm) 0;
    font-size: var(--vn-text-caption);
    color: var(--vn-text-secondary);
}

.vn-shell__main {
    padding: var(--vn-space-lg) var(--vn-space-xl) var(--vn-space-2xl);
    min-width: 0;
}

/* The clinic screens link vetnexus-clinic.css themselves and set their own
   headings; the shell adds nothing above them. */
.vn-shell__main > .vn-clinic {
    max-width: 1100px;
}

/* ------------------------------------------------------------------------- *
   Footer
 * ------------------------------------------------------------------------- */
.vn-shell__footer {
    border-top: 1px solid var(--vn-border-hairline);
    color: var(--vn-text-secondary);
    font-size: var(--vn-text-caption);
}

.vn-shell__footer-inner {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: var(--vn-space-sm);
    padding: var(--vn-space-sm) var(--vn-space-lg);
    max-width: var(--vn-band-max-width, 1400px);
    margin: 0 auto;
}

.vn-shell__footer-links a {
    color: var(--vn-action-link);
}

/* ------------------------------------------------------------------------- *
   Narrow: the navigation becomes a row of links above the content.
 * ------------------------------------------------------------------------- */
@media (max-width: 860px) {
    .vn-shell__body {
        grid-template-columns: minmax(0, 1fr);
    }

    .vn-shell__nav {
        position: static;
        max-height: none;
        border-right: 0;
        border-bottom: 1px solid var(--vn-border-hairline);
        padding: var(--vn-space-xs) var(--vn-space-sm);
    }

    .vn-shell__nav-list {
        flex-direction: row;
        flex-wrap: wrap;
    }

    .vn-shell__nav-link {
        border-left: 0;
        border-bottom: 3px solid transparent;
        border-radius: 0;
    }

    .vn-shell__nav-link--current {
        border-bottom-color: var(--vn-action-primary);
        background: transparent;
    }

    .vn-shell__main {
        padding: var(--vn-space-md);
    }

    .vn-shell__top-right {
        margin-left: 0;
        width: 100%;
        justify-content: space-between;
    }
}

@media print {
    .vn-shell__nav,
    .vn-shell__theme,
    .vn-shell__account,
    .vn-shell__sites {
        display: none;
    }

    .vn-shell__body {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* A practice its staff can see but VetNexus has not verified yet (06 §9).
   On-band colour, a word, no tint that could read as an alarm. */
.vn-shell__pending {
    align-self: center;
    font-size: var(--vn-text-overline);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-weight: 600;
    padding: 2px var(--vn-space-xs);
    border: 1px solid color-mix(in srgb, var(--vn-text-on-brand) 55%, transparent);
    border-radius: var(--vn-radius-pill);
    white-space: nowrap;
}

.vn-shell__nav-enroll {
    display: block;
    margin-top: var(--vn-space-xs);
    color: var(--vn-action-link);
    font-weight: 600;
}