/*
    The VetNexus internal console's chrome — specs/23 §5.2.

    Builds on vetnexus-clinic-shell.css (the layout grid, the left navigation,
    the footer) and changes only what makes it visually distinct: an ink band
    instead of a practice's colour, a clay rule under it, an "Internal" label,
    and section headings in the navigation, because the internal console has
    five sections of several screens where the clinic shell has eight single
    links. Everything resolves to a --vn-* token.
*/

.vn-shell--internal .vn-shell__top {
    background: var(--vn-ink-900);
    color: var(--vn-cream-050, #FBF8F2);
}

.vn-internal__rule {
    height: 4px;
    background: var(--vn-accent-clay);
}

.vn-internal__brand {
    display: inline-flex;
    align-items: center;
    gap: var(--vn-space-sm);
    color: inherit;
    text-decoration: none;
}

.vn-internal__brand:hover {
    color: inherit;
    text-decoration: none;
    opacity: 0.92;
}

.vn-internal__label {
    font-size: var(--vn-text-overline);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-weight: 700;
    padding: 2px var(--vn-space-xs);
    border-radius: var(--vn-radius-pill);
    background: var(--vn-accent-clay);
    color: var(--vn-ink-900);
}

.vn-internal__note {
    font-size: var(--vn-text-caption);
    opacity: 0.75;
}

.vn-shell__nav-heading {
    margin: var(--vn-space-md) var(--vn-space-sm) var(--vn-space-2xs);
    font-size: var(--vn-text-overline);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--vn-text-secondary);
}

.vn-shell__nav-heading:first-child {
    margin-top: 0;
}

/* The internal screens are Bootstrap pages that used to sit in a container;
   give them the same measure inside the shell. */
.vn-shell--internal .vn-shell__main {
    max-width: 1320px;
}

@media (max-width: 860px) {
    .vn-internal__note {
        display: none;
    }

    .vn-shell__nav-heading {
        width: 100%;
        margin: var(--vn-space-xs) var(--vn-space-sm) 0;
    }
}