/* =====================================================================
   Clinic Records System — Global Stylesheet
   ===================================================================== */

:root {
    /* One identity across the whole system, taken from the PRMSU seal.
       The staff pages previously ran on a separate teal, and the sidebar
       on a third navy, so signing in visibly changed the brand. These
       now resolve to the same Arapawa navy the public pages use, which
       is why the variable names stayed put: the value moved, not the
       25 places that reference it. */
    --primary: #0C096A;
    --primary-dark: #080647;
    --primary-light: #ebeaf3;

    /* Sidebar ground and the muted text that sits on it. */
    --sidebar: #0C096A;
    --sidebar-muted: #a9b0d4;

    /* Institutional palette for the public-facing pages (landing,
       sign-in), taken from the PRMSU seal: Arapawa navy and Ronchi gold
       are the identity pair, Korma brown is the text accent, Quarter
       Spanish White is the page ground. Gold is a surface and rule
       colour only -- on the cream ground it measures 1.55:1, so it is
       never used for text except on navy, where it measures 9.75:1. */
    --iron: #F8F4E6;
    --ebony: #0C096A;
    --ebony-rule: #242080;
    --brick: #944A10;
    --muesli: #EBC15C;

    --ins-text: #2C3449;
    --ins-body: #545a6b;
    /* Nudged one step darker than it was: against the cream page ground
       the old value landed at 4.49:1, a hair under AA. */
    --ins-muted: #666c7c;
    --ins-dim: #9aa1b1;
    --ins-line: #d3d5da;
    --ins-line-soft: #e3e4e7;

    --font-serif: "Libre Baskerville", Georgia, "Times New Roman", serif;
    --font-sans: "Libre Franklin", "Helvetica Neue", Arial, sans-serif;

    --danger: #b91c1c;
    --danger-dark: #991b1b;
    --danger-light: #fee2e2;

    --text: #1f2937;
    --text-muted: #6b7280;
    --text-label: #374151;

    --border: #d1d5db;
    --border-strong: #9ca3af;

    --bg: #f4f6f8;
    --surface: #ffffff;
    --surface-alt: #f9fafb;

    --error: #b91c1c;
    --error-bg: #fef2f2;
    --error-border: #fca5a5;

    --success: #15803d;
    --success-bg: #f0fdf4;
    --success-border: #86efac;

    --info: #1e40af;
    --info-bg: #eff6ff;

    /* Two radii, not seven. Surfaces sit square, matching the public
       pages and the printed record; controls take a small radius so they
       read as interactive. Circles stay 50% where the shape is the point
       (avatars, seals). Nothing is a pill. */
    --radius: 3px;
    --radius-surface: 0;
    --shadow: 0 1px 3px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.06);
    --shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.08), 0 4px 10px rgba(0, 0, 0, 0.05);
}

/* --------------------------------------------------------------------
   Reset / base
   -------------------------------------------------------------------- */
*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    font-size: 16px;
}

body {
    margin: 0;
    /* The institutional pair, applied globally rather than only on the
       public shells. The staff pages were falling through to the system
       UI stack, which is what made signing in feel like a different
       product even once the font files were being loaded. */
    font-family: var(--font-sans);
    color: var(--text);
    background: var(--bg);
    line-height: 1.5;
}

/* Every role-gated control (nav links, admin-only buttons) starts
   hidden and stays that way until auth.js confirms the session's role
   and marks the body ready. Without this, a role-gated link like Audit
   Log or Manage Users is visible from first paint through the async
   auth/me.php round-trip on every navigation, then disappears once
   applyRoleBasedNav() runs — a visible flash for anyone who isn't
   admin. Elements applyRoleBasedNav() actually hides for the resolved
   role stay hidden afterward via the [hidden] attribute rule below. */
body:not(.role-ready) [data-roles] {
    display: none;
}

/* Same reasoning, for the sidebar's user menu (avatar/username/role,
   Change password, Sign out): its placeholder content ("—", "…", a
   blank role) is otherwise visible through the same round-trip, then
   swaps to the real values — a flash even though none of it is
   role-gated. Hiding it until role-ready means it only ever appears
   fully populated. */
body:not(.role-ready) .app-user-menu-wrap {
    display: none;
}

/* The [hidden] attribute selector and a class like .btn (display:
   inline-flex) both have specificity 0-1-0, so without this an element
   that is both .btn and [hidden] falls to source order and can end up
   visible anyway — this bit the Archive/Restore toggle on the patient
   chart. !important makes hidden win unconditionally, which is the
   point of the attribute. */
[hidden] {
    display: none !important;
}

h1,
h2,
h3 {
    margin: 0 0 0.5rem;
    line-height: 1.25;
    color: var(--text);
    font-family: var(--font-serif);
    font-weight: 700;
}

p {
    margin: 0 0 1rem;
}

/* --------------------------------------------------------------------
   Layout
   -------------------------------------------------------------------- */
.container {
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 1rem;
}

/* --------------------------------------------------------------------
   Header / nav
   -------------------------------------------------------------------- */
.site-header {
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    margin-bottom: 2rem;
}

.header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 1rem;
    padding-bottom: 1rem;
    flex-wrap: wrap;
    gap: 1rem;
}

.brand {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--primary);
    margin: 0;
}

.site-nav {
    display: flex;
    gap: 1.25rem;
    flex-wrap: wrap;
    align-items: center;
}

.site-nav a {
    color: var(--text-muted);
    text-decoration: none;
    font-weight: 500;
    font-size: 0.95rem;
    padding: 0.25rem 0;
    border-bottom: 2px solid transparent;
    transition: color 0.15s, border-color 0.15s;
}

.site-nav a:hover {
    color: var(--primary);
}

.site-nav a.active {
    color: var(--primary);
    border-bottom-color: var(--primary);
}

.user-info {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding-left: 1rem;
    border-left: 1px solid var(--border);
    color: var(--text-muted);
    font-size: 0.9rem;
}

#current-user {
    font-weight: 500;
    color: var(--text-label);
}

.logout-btn {
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    font: inherit;
    font-size: 0.9rem;
    padding: 0.25rem 0.5rem;
    border-radius: var(--radius);
    transition: color 0.15s, background 0.15s;
}

.logout-btn:hover {
    color: var(--error);
    background: var(--error-bg);
}

/* --------------------------------------------------------------------
   Card
   -------------------------------------------------------------------- */
.card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-surface);
    padding: 2rem;
    box-shadow: var(--shadow);
    margin-bottom: 2rem;
}

.card-header {
    margin-bottom: 1.5rem;
}

.card h2 {
    font-size: 1.5rem;
    font-weight: 600;
}

.subtitle {
    color: var(--text-muted);
    font-size: 0.95rem;
    margin: 0;
}

/* --------------------------------------------------------------------
   Form structure
   -------------------------------------------------------------------- */
fieldset {
    border: 1px solid var(--border);
    border-radius: var(--radius-surface);
    padding: 1.25rem 1.5rem 1.5rem;
    margin: 0 0 1.5rem;
}

legend {
    font-weight: 600;
    color: var(--text-label);
    padding: 0 0.5rem;
    font-size: 0.95rem;
}

.form-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem 1.25rem;
}

.form-group {
    display: flex;
    flex-direction: column;
    min-width: 0;
    margin-bottom: 1rem;
}

.form-group--full {
    grid-column: 1 / -1;
}

/* A field that doesn't apply to the chosen patient type. It stays on
   screen so the shape of the record is still legible, and just reads as
   not currently editable. The control keeps its normal border so it
   still looks like a field rather than a broken one. */
.form-group--unavailable > label {
    color: var(--text-muted);
}

.form-group--unavailable input,
.form-group--unavailable select {
    background: var(--bg);
    color: var(--text-muted);
    cursor: not-allowed;
}

label {
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--text-label);
    margin-bottom: 0.35rem;
}

.field-hint {
    font-weight: 400;
    color: var(--text-muted);
    font-size: 0.85rem;
    margin-left: 0.25rem;
}

/* --------------------------------------------------------------------
   Password reveal
   -------------------------------------------------------------------- */
.password-field {
    position: relative;
    display: block;
}

/* Keeps the typed characters clear of the control sitting over them. */
.password-field input {
    width: 100%;
    padding-right: 4.25rem;
}

.password-toggle {
    position: absolute;
    top: 50%;
    right: 0.5rem;
    transform: translateY(-50%);
    background: none;
    border: none;
    padding: 0.375rem 0.5rem;
    font: inherit;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--primary);
    cursor: pointer;
    border-radius: var(--radius);
}

.password-toggle:hover {
    background: var(--primary-light);
}


/* --------------------------------------------------------------------
   Inputs
   -------------------------------------------------------------------- */
input[type="text"],
input[type="tel"],
input[type="email"],
input[type="date"],
input[type="file"],
input[type="search"],
input[type="password"],
select {
    width: 100%;
    padding: 0.55rem 0.75rem;
    font-size: 0.95rem;
    font-family: inherit;
    color: var(--text);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    transition: border-color 0.15s, box-shadow 0.15s;
}

input[type="file"] {
    padding: 0.4rem;
    cursor: pointer;
}

input:focus,
select:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(13, 110, 112, 0.15);
}

.form-group.has-error input,
.form-group.has-error select {
    border-color: var(--error);
    background: var(--error-bg);
}

.form-group.has-error input:focus,
.form-group.has-error select:focus {
    box-shadow: 0 0 0 3px rgba(185, 28, 28, 0.15);
}

.error-message {
    display: block;
    color: var(--error);
    font-size: 0.85rem;
    margin-top: 0.3rem;
    min-height: 1.1em;
}

/* --------------------------------------------------------------------
   Form-level alert
   -------------------------------------------------------------------- */
.form-message {
    padding: 0.85rem 1rem;
    border-radius: var(--radius);
    border: 1px solid transparent;
    font-size: 0.95rem;
    margin-bottom: 1.25rem;
}

.form-message--success {
    color: var(--success);
    background: var(--success-bg);
    border-color: var(--success-border);
}

.form-message--error {
    color: var(--error);
    background: var(--error-bg);
    border-color: var(--error-border);
}

/* --------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------- */
.form-actions {
    display: flex;
    gap: 0.75rem;
    justify-content: flex-end;
    margin-top: 1rem;
}

.form-actions--full .btn {
    width: 100%;
}

.btn {
    font-family: inherit;
    font-size: 0.95rem;
    font-weight: 500;
    /* Clears the 44px minimum touch target; the old 0.6rem left it at
       roughly 36px, which is awkward on a phone. */
    padding: 0.75rem 1.25rem;
    min-height: 44px;
    border-radius: var(--radius);
    border: 1px solid transparent;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
    text-decoration: none;
    /* inline-flex rather than inline-block so min-height centres the
       label instead of leaving it sitting at the top. */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.btn-primary {
    background: var(--primary);
    color: #fff;
    border-color: var(--primary);
}

.btn-primary:hover:not(:disabled) {
    background: var(--primary-dark);
    border-color: var(--primary-dark);
}

.btn-secondary {
    background: var(--surface);
    color: var(--text-label);
    border-color: var(--border-strong);
}

.btn-secondary:hover:not(:disabled) {
    background: var(--bg);
}

.btn-danger {
    background: var(--surface);
    color: var(--danger);
    border-color: var(--danger);
}

.btn-danger:hover:not(:disabled) {
    background: var(--danger);
    color: #fff;
}

.btn-link {
    color: var(--primary);
    text-decoration: none;
    font-weight: 500;
    font-size: 0.9rem;
    padding: 0.25rem 0.5rem;
    border-radius: var(--radius);
    transition: background 0.15s, color 0.15s;
}

.btn-link:hover {
    background: var(--primary-light);
    color: var(--primary-dark);
}


/* =====================================================================
   Landing page  (index.html)
   Institutional treatment matched to the main University website:
   flat colour bands, hairline rules, serif headings, no shadows.
   ===================================================================== */

.landing-body {
    margin: 0;
    background: var(--iron);
    font-family: var(--font-sans);
    color: var(--ins-text);
    font-size: 15px;
    line-height: 1.55;
}

.landing-body h1,
.landing-body h2,
.landing-body h3 {
    font-family: var(--font-serif);
    font-weight: 700;
    margin: 0;
}

/* Only the decoration is reset globally. A blanket `color: inherit`
   here would be (0,1,1) and quietly beat every single-class link rule
   below it (.ins-btn, .ins-link-gold, .ins-sec-link), so colour is
   inherited only where a link genuinely takes its parent's colour. */
.landing-body a {
    text-decoration: none;
}

.ins-strip-links a,
.ins-footer ul a {
    color: inherit;
}

.ins-container {
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 1.75rem;
}

/* Off-screen until focused, so a keyboard user can jump the masthead
   and nav instead of tabbing through them on every page load. */
.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 100;
    background: var(--muesli);
    color: var(--ebony);
    font-size: 13px;
    font-weight: 600;
    padding: 0.75rem 1.25rem;
}

.skip-link:focus {
    left: 0;
}

/* --- Utility strip --- */
.ins-strip {
    background: var(--ebony);
    color: #b9bfcc;
    font-size: 11.5px;
}

.ins-strip-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding-top: 7px;
    padding-bottom: 7px;
    flex-wrap: wrap;
}

.ins-strip-gov {
    text-transform: uppercase;
    letter-spacing: 0.09em;
}

.ins-strip-links {
    display: flex;
    gap: 1.375rem;
    flex-wrap: wrap;
}

.ins-strip-links a:hover {
    color: var(--muesli);
}

/* --- Masthead --- */
.ins-masthead {
    background: #ffffff;
    border-bottom: 1px solid var(--ins-line);
}

.ins-masthead-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.75rem;
    padding-top: 1.25rem;
    padding-bottom: 1.25rem;
    flex-wrap: wrap;
}

.ins-identity {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.ins-seal {
    width: 62px;
    height: 62px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.ins-seal img,
.auth-seal img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
}

.ins-uni-name {
    font-family: var(--font-serif);
    font-size: 20px;
    font-weight: 700;
    line-height: 1.25;
}

.ins-unit-line {
    font-size: 13.5px;
    color: var(--ins-muted);
    margin-top: 3px;
}

/* --- Portal masthead user menu (avatar button + dropdown) ---
   A collapsed avatar rather than an always-visible "Signed in as… /
   Change password / Sign Out" row — that row didn't fit one line on a
   phone and either wrapped awkwardly or ran into the edge. */
.ins-user-menu-wrap {
    position: relative;
    flex-shrink: 0;
}

.ins-user-avatar-btn {
    display: block;
    border: none;
    background: none;
    padding: 0;
    border-radius: 50%;
    cursor: pointer;
    transition: box-shadow 0.15s;
}

.ins-user-avatar-btn:hover,
.ins-user-avatar-btn[aria-expanded="true"] {
    box-shadow: 0 0 0 3px rgba(12, 9, 106, 0.15);
}

.ins-user-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--ebony);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    font-weight: 700;
    flex-shrink: 0;
}

/* Hidden by default (see the [hidden] attribute in the markup) and
   toggled open by auth.js. */
.ins-user-menu {
    position: absolute;
    top: calc(100% + 0.625rem);
    right: 0;
    z-index: 40;
    min-width: 220px;
    background: #ffffff;
    border: 1px solid var(--ins-line);
    border-radius: var(--radius);
    padding: 0.625rem;
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.16);
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.ins-user-menu-header {
    padding: 0.4rem 0.75rem 0.75rem;
    margin-bottom: 0.25rem;
    border-bottom: 1px solid var(--ins-line);
}

.ins-user-menu-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--ins-text);
}

/* Account action / sign-out rows inside the dropdown — one shared
   treatment so both read as the same kind of control. */
.ins-menu-row {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    width: 100%;
    padding: 0.625rem 0.75rem;
    border: none;
    background: none;
    border-radius: 6px;
    color: var(--ins-body);
    font: inherit;
    font-size: 13.5px;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}

.ins-menu-row:hover {
    background: var(--ins-line-soft);
    color: var(--ins-text);
}

/* --- Buttons --- */
.ins-btn {
    display: inline-block;
    background: var(--muesli);
    color: var(--ebony);
    font-family: var(--font-sans);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 0.8125rem 1.625rem;
    border: none;
    border-radius: var(--radius);
    cursor: pointer;
    transition: background 0.15s;
}

.ins-btn--sm {
    padding: 0.5625rem 1.125rem;
    font-size: 11.5px;
}

.ins-btn:hover {
    background: #dcae42;
}

/* Duplicate of the masthead's Log In link, shown only on the nav's
   mobile toggle bar instead (see the media query below) — the two
   never appear at once. */
.ins-nav-login {
    display: none;
}

.ins-link-gold {
    color: var(--muesli);
    font-size: 13.5px;
    font-weight: 600;
    letter-spacing: 0.03em;
    border-bottom: 1px solid var(--muesli);
    padding-bottom: 2px;
}

/* --- Primary nav --- */
.ins-nav {
    background: var(--ebony);
    border-bottom: 3px solid var(--muesli);
}

.ins-nav-inner {
    display: flex;
    align-items: stretch;
    flex-wrap: wrap;
}

/* Scoped to .ins-nav-inner specifically (not every <a> inside .ins-nav)
   so the Log In link that also lives in the nav bar on mobile (see
   .ins-nav-login) doesn't inherit this link-list styling too. */
.ins-nav-inner a {
    color: #d5d8df;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    padding: 0.875rem 1.25rem;
    transition: background 0.15s, color 0.15s;
}

.ins-nav-inner a:hover {
    background: rgba(255, 255, 255, 0.07);
    color: #ffffff;
}

.ins-nav-inner a.active {
    background: var(--muesli);
    color: var(--ebony);
    font-weight: 600;
}

.ins-nav-toggle {
    display: none;
}

/* --- Banner --- */
.ins-banner {
    /* Campus photograph behind a navy scrim. The scrim is load-bearing:
       the photograph is bright (pale facade, white sky) and the banner
       type is white, so below ~0.78 alpha the body copy drops under AA.
       Heavier on the left where the type sits, lighter over the hours
       panel so the building still reads. */
    background:
        linear-gradient(95deg,
            rgba(12, 9, 106, 0.94) 0%,
            rgba(12, 9, 106, 0.88) 48%,
            rgba(12, 9, 106, 0.72) 100%),
        url("../img/campus-banner.webp") center / cover no-repeat;
    background-color: var(--ebony);
}

.ins-banner-inner {
    display: grid;
    grid-template-columns: 1.35fr 1fr;
    gap: 3.5rem;
    align-items: center;
    padding-top: 3.25rem;
    padding-bottom: 3rem;
}

.ins-rule {
    width: 46px;
    height: 3px;
    background: var(--muesli);
    margin-bottom: 1.25rem;
}

.ins-banner h1 {
    font-size: 33px;
    line-height: 1.32;
    color: #ffffff;
    margin-bottom: 1rem;
}

.ins-banner-copy {
    font-size: 15.5px;
    line-height: 1.7;
    color: #b9bfcc;
    max-width: 560px;
    margin-bottom: 1.625rem;
}

.ins-banner-actions {
    display: flex;
    align-items: center;
    gap: 1.625rem;
    flex-wrap: wrap;
}


/* --- At-a-glance panel ---
   Sits in the banner so hours, place and the emergency line are all
   readable without scrolling. Square, bordered, no floating card. */
.ins-glance {
    background: #ffffff;
    border-top: 4px solid var(--muesli);
    padding: 1.5rem 1.625rem 1.375rem;
    align-self: start;
}

.ins-glance-row {
    padding-bottom: 0.9375rem;
    margin-bottom: 0.9375rem;
    border-bottom: 1px solid var(--ins-line-soft);
}

.ins-glance-label {
    display: block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.11em;
    text-transform: uppercase;
    color: var(--brick);
    margin-bottom: 0.375rem;
}

.ins-glance-value {
    display: block;
    font-family: var(--font-serif);
    font-size: 17px;
    font-weight: 700;
    color: var(--ins-text);
    line-height: 1.3;
}

.ins-glance-sub {
    display: block;
    font-size: 13.5px;
    color: var(--ins-body);
    margin-top: 2px;
}

.ins-glance-alert {
    margin: 0;
    font-size: 12.5px;
    line-height: 1.65;
    color: var(--ins-body);
}

.ins-glance-alert strong {
    display: block;
    color: var(--brick);
    font-weight: 700;
}

/* --- Section headings --- */
.ins-sec-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    border-bottom: 2px solid var(--ebony);
    padding-bottom: 0.625rem;
    margin-bottom: 1.25rem;
}

.ins-sec-head h2 {
    font-size: 21px;
}

.ins-lede {
    font-size: 15px;
    line-height: 1.7;
    color: var(--ins-body);
    max-width: 60ch;
    margin: 0 0 1.5rem;
}

/* A tinted full-width band. Alternating these against the plain page
   ground is what separates the sections, instead of boxing every
   section into its own card. */
.ins-band {
    background: #ffffff;
    border-top: 1px solid var(--ins-line);
    border-bottom: 1px solid var(--ins-line);
    padding-top: 2.875rem;
    padding-bottom: 3rem;
}

/* --- Hours and emergency, side by side --- */
.ins-split {
    display: grid;
    grid-template-columns: 1.25fr 1fr;
    gap: 3rem;
    align-items: start;
    padding-top: 2.875rem;
    padding-bottom: 3rem;
}

.ins-hours-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14.5px;
}

.ins-caption {
    caption-side: top;
    text-align: left;
    font-size: 12px;
    color: var(--ins-muted);
    padding-bottom: 0.5rem;
}

.ins-hours-table tr {
    border-bottom: 1px solid var(--ins-line-soft);
}

.ins-hours-table tr:last-child {
    border-bottom: none;
}

.ins-hours-table th {
    text-align: left;
    font-weight: 500;
    color: var(--ins-body);
    padding: 11px 0;
}

.ins-hours-table td {
    text-align: right;
    font-weight: 600;
    color: var(--ins-text);
    padding: 11px 0;
}

.ins-hours-table .is-closed {
    color: var(--ins-muted);
    font-weight: 500;
}

.ins-note {
    font-size: 13px;
    line-height: 1.65;
    color: var(--ins-muted);
    margin: 1.125rem 0 0;
    padding-top: 0.875rem;
    border-top: 1px solid var(--ins-line-soft);
    max-width: 52ch;
}

/* The one place on the page that raises its voice, so it has to be the
   only thing wearing this colour. */
.ins-emergency-block {
    background: var(--brick);
    color: #ffffff;
    padding: 1.75rem 1.75rem 1.5rem;
}

.ins-emergency-block h2 {
    font-size: 18px;
    color: #ffffff;
    margin-bottom: 0.75rem;
}

.ins-emergency-block p {
    font-size: 14px;
    line-height: 1.7;
    margin: 0 0 0.875rem;
    /* Warm tint rather than a pink one: the ground is rust, not red. */
    color: #f0e0cf;
}

/* Two classes beats class-plus-element, so this wins over the rule
   above on its own without reaching for !important. */
.ins-emergency-block .ins-emergency-action {
    font-weight: 600;
    color: #ffffff;
    margin-bottom: 0;
    padding-top: 0.875rem;
    border-top: 1px solid rgba(255, 255, 255, 0.28);
}

/* --- What the record contains: two-column definition list --- */
.ins-deflist {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.75rem 3rem;
    margin: 0;
}

.ins-def {
    border-left: 2px solid var(--muesli);
    padding-left: 1.125rem;
}

.ins-def dt {
    font-family: var(--font-serif);
    font-size: 15.5px;
    font-weight: 700;
    color: var(--ins-text);
    margin-bottom: 0.4375rem;
}

.ins-def dd {
    margin: 0;
    font-size: 14px;
    line-height: 1.72;
    color: var(--ins-body);
}

/* --- Visit steps --- */
.ins-visit-section {
    padding-top: 2.875rem;
    padding-bottom: 3rem;
}

.ins-steps {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
}

.ins-steps li {
    display: flex;
    gap: 0.875rem;
    padding: 0 1.5rem;
    border-left: 1px solid var(--ins-line);
}

.ins-steps li:first-child {
    padding-left: 0;
    border-left: none;
}

.ins-steps li:last-child {
    padding-right: 0;
}

.ins-step-no {
    flex-shrink: 0;
    width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--ebony);
    color: #ffffff;
    font-size: 12.5px;
    font-weight: 700;
    line-height: 1;
}

.ins-steps h3 {
    font-size: 14.5px;
    margin-bottom: 0.375rem;
    color: var(--ins-text);
}

.ins-steps p {
    font-size: 13.5px;
    line-height: 1.65;
    color: var(--ins-body);
    margin: 0;
}

/* --- Campus table --- */
.ins-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
    background: #ffffff;
}

.ins-table thead tr {
    background: var(--ebony);
    color: #ffffff;
}

.ins-table thead th {
    text-align: left;
    padding: 11px 18px;
    font-family: var(--font-sans);
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.ins-table tbody tr {
    border-bottom: 1px solid var(--ins-line);
}

.ins-table tbody tr:last-child {
    border-bottom: none;
}

.ins-table tbody th {
    text-align: left;
    padding: 11px 18px;
    font-weight: 600;
    color: var(--ins-text);
}

.ins-table tbody th span {
    color: var(--ins-muted);
    font-weight: 400;
}

.ins-table td {
    padding: 11px 18px;
    color: var(--ins-body);
}

.ins-table .is-numeric {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* --- Access and privacy: asymmetric, deliberately not a card row --- */
.ins-privacy {
    display: grid;
    grid-template-columns: 1fr 1.9fr;
    gap: 3rem;
    align-items: start;
    padding-top: 2.875rem;
    padding-bottom: 3.25rem;
}

.ins-privacy-lead h2 {
    font-size: 21px;
    line-height: 1.3;
}

.ins-privacy-body p {
    font-size: 14.5px;
    line-height: 1.78;
    color: var(--ins-body);
    margin: 0 0 1rem;
    max-width: 68ch;
}

.ins-privacy-body p:last-child {
    margin-bottom: 0;
}
/* --- Footer --- */
.ins-footer {
    background: var(--ebony);
    border-top: 3px solid var(--muesli);
}

.ins-footer-inner {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr;
    gap: 3rem;
    padding-top: 2.5rem;
    padding-bottom: 1.875rem;
}

.ins-footer-name {
    font-family: var(--font-serif);
    font-size: 16px;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 0.625rem;
}

.ins-footer p {
    font-size: 13px;
    line-height: 1.75;
    color: var(--ins-dim);
    margin: 0;
}

.ins-footer-head {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--muesli);
    margin-bottom: 0.75rem;
}

.ins-footer ul {
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 13px;
    line-height: 2.05;
    color: var(--ins-dim);
}

.ins-footer ul a:hover {
    color: #ffffff;
}

.ins-footer-bottom {
    border-top: 1px solid var(--ebony-rule);
}

.ins-footer-bottom-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding-top: 0.9375rem;
    padding-bottom: 0.9375rem;
    font-size: 12px;
    color: #7d8494;
    flex-wrap: wrap;
}


/* =====================================================================
   App shell — sidebar layout shared by every staff page
   ===================================================================== */

.app-body {
    margin: 0;
    min-height: 100vh;
    display: flex;
    background: var(--bg);
}

/* --- Sidebar --- */
.app-sidebar {
    width: 238px;
    flex-shrink: 0;
    background: var(--sidebar);
    display: flex;
    flex-direction: column;
    padding: 1.375rem 0;
}

/* Brand + user menu share one row at the top of the sidebar, rather
   than the user menu living at the very bottom — that meant scrolling
   all the way down a long page just to sign out, and on a phone (where
   the sidebar becomes a horizontal top bar) it was a whole extra row
   below the nav strip instead of sitting where a profile menu is
   normally expected. */
.app-sidebar-topline {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.375rem;
    padding: 0 1rem 1.5rem 1.25rem;
}

.app-sidebar-brand {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0;
    text-decoration: none;
    min-width: 0;
}

.app-sidebar-logo {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--surface);
    padding: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.app-sidebar-logo img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
}

.app-sidebar-brand-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.app-sidebar-name {
    font-size: 0.92rem;
    font-weight: 600;
    color: #ffffff;
    line-height: 1.2;
}

.app-sidebar-sub {
    font-size: 0.68rem;
    color: var(--sidebar-muted);
    letter-spacing: 0.03em;
}

.app-nav {
    display: flex;
    flex-direction: column;
    gap: 0.1875rem;
    padding: 0 0.75rem;
    flex-grow: 1;
}

.app-nav a {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.6875rem 0.875rem;
    border-radius: var(--radius);
    color: #b6c6d9;
    font-size: 0.92rem;
    font-weight: 500;
    text-decoration: none;
    transition: background 0.15s, color 0.15s;
}

.app-nav a svg {
    flex-shrink: 0;
}

.app-nav a:hover {
    background: rgba(255, 255, 255, 0.07);
    color: #ffffff;
}

/* Gold on navy, the same active treatment the public nav uses. It also
   has to differ from the sidebar ground, which is now the same navy as
   --primary, so the old fill would have been invisible. */
.app-nav a.active {
    background: var(--muesli);
    color: var(--ebony);
    font-weight: 600;
}

/* --- User menu (avatar button + dropdown) ---
   On a wide screen it sits at the bottom of the sidebar, full width,
   with the dropdown opening upward (the sidebar can be much taller
   than the viewport, so anchoring here means it's always reachable
   without scrolling). On a phone, where the sidebar collapses into a
   horizontal top bar, .app-sidebar's mobile media query below turns
   this into a small avatar next to the logo instead — there's no
   meaningful "bottom of the sidebar" once it's a single top row. */
.app-sidebar {
    position: relative;
}

.app-user-menu-wrap {
    position: absolute;
    left: 0.75rem;
    right: 0.75rem;
    bottom: 1.25rem;
    padding-top: 0.75rem;
    border-top: 1px solid rgba(255, 255, 255, 0.09);
}

.app-user-avatar-btn {
    display: flex;
    align-items: center;
    gap: 0.6875rem;
    width: 100%;
    border: none;
    background: none;
    padding: 0.5rem 0.875rem;
    border-radius: var(--radius);
    cursor: pointer;
    transition: background 0.15s;
}

.app-user-avatar-btn:hover,
.app-user-avatar-btn[aria-expanded="true"] {
    background: rgba(255, 255, 255, 0.07);
}

.app-user-caret {
    margin-left: auto;
    color: var(--sidebar-muted);
    flex-shrink: 0;
    transition: transform 0.15s;
}

.app-user-avatar-btn[aria-expanded="true"] .app-user-caret {
    transform: rotate(180deg);
}

/* Hidden by default (see the [hidden] attribute in the markup) and
   toggled open by auth.js. Opens upward, above the trigger. */
.app-user-menu {
    position: absolute;
    bottom: calc(100% + 0.625rem);
    left: 0;
    right: 0;
    z-index: 40;
    background: var(--sidebar);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: var(--radius-surface, 10px);
    padding: 0.5rem;
    box-shadow: 0 -12px 28px rgba(0, 0, 0, 0.35);
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.app-user-menu-header {
    padding: 0.5rem 0.875rem 0.625rem;
    margin-bottom: 0.25rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.09);
    display: flex;
    flex-direction: column;
}

.app-sidebar-avatar {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    /* Lifted off the sidebar ground rather than filled with --primary,
       which now matches that ground exactly. */
    background: rgba(255, 255, 255, 0.14);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.78rem;
    font-weight: 700;
    flex-shrink: 0;
}

.app-sidebar-username {
    font-size: 0.85rem;
    font-weight: 600;
    color: #ffffff;
    overflow-wrap: anywhere;
}

.app-logout {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    padding: 0.625rem 0.875rem;
    border: none;
    background: none;
    border-radius: var(--radius);
    color: var(--sidebar-muted);
    font: inherit;
    font-size: 0.86rem;
    text-align: left;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}

.app-logout:hover {
    background: rgba(255, 255, 255, 0.07);
    color: #ffffff;
}

/* --- Main column --- */
.app-main {
    flex-grow: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.app-topbar {
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    padding: 1.125rem 2rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.25rem;
    flex-wrap: wrap;
}

.app-topbar h1 {
    font-size: 1.4rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    margin: 0;
}

.app-topbar .subtitle {
    margin-top: 0.125rem;
}

.app-topbar-actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.app-content {
    padding: 1.625rem 2rem;
    flex-grow: 1;
}

/* --- Sidebar responsive: collapse to a horizontal strip --- */
@media (max-width: 900px) {
    .app-body {
        flex-direction: column;
    }

    .app-sidebar {
        width: 100%;
        padding: 1rem 0;
    }

    .app-sidebar-topline {
        padding-bottom: 1rem;
    }

    /* On a phone the sidebar is a single top row, not a tall column,
       so "bottom of the sidebar" stops being a meaningful place —
       back to a small avatar next to the logo instead. */
    .app-user-menu-wrap {
        position: relative;
        left: auto;
        right: auto;
        bottom: auto;
        padding-top: 0;
        border-top: none;
        flex-shrink: 0;
    }

    .app-user-avatar-btn {
        display: block;
        width: auto;
        padding: 0;
        border-radius: 50%;
    }

    .app-user-avatar-btn:hover,
    .app-user-avatar-btn[aria-expanded="true"] {
        background: none;
        box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.16);
    }

    .app-user-trigger-text,
    .app-user-caret {
        display: none;
    }

    .app-user-menu {
        top: calc(100% + 0.625rem);
        bottom: auto;
        left: auto;
        right: 0;
        min-width: 200px;
    }

    /* One scrolling row rather than a wrapping block. Five items at two
       per row pushed the actual page content most of a screen down on a
       phone; this keeps the nav to a single row's height and lets it
       scroll sideways instead. */
    .app-nav {
        flex-direction: row;
        flex-wrap: nowrap;
        overflow-x: auto;
        gap: 0.25rem;
        padding-bottom: 0.25rem;
        /* Momentum scrolling without a visible scrollbar eating height. */
        scrollbar-width: none;
        /* Same scroll-shadow hint as .table-wrapper, tuned to the
           sidebar's own navy background instead of a white surface —
           without this, a cut-off "Recor" at the edge just looked
           broken instead of like a strip you can swipe. */
        background:
            linear-gradient(to right, var(--sidebar) 30%, rgba(12, 9, 106, 0)) 0 0,
            linear-gradient(to left, var(--sidebar) 30%, rgba(12, 9, 106, 0)) 100% 0;
        background-repeat: no-repeat;
        background-size: 28px 100%, 28px 100%;
        background-attachment: local, local;
    }

    .app-nav::-webkit-scrollbar {
        display: none;
    }

    .app-nav a {
        flex: 0 0 auto;
        white-space: nowrap;
    }

    .app-topbar,
    .app-content {
        padding-left: 1.25rem;
        padding-right: 1.25rem;
    }
}


/* =====================================================================
   Sign-in page  (login.html)
   Shares the institutional treatment of the landing page.
   ===================================================================== */

.auth-body {
    margin: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: var(--iron);
    font-family: var(--font-sans);
    color: var(--ins-text);
    font-size: 15px;
    line-height: 1.55;
}

.auth-body h1 {
    font-family: var(--font-serif);
    font-weight: 700;
    margin: 0;
}

/* Same reasoning as the landing page: no blanket colour: inherit, or
   it outranks .auth-back and .ins-btn. */
.auth-body a {
    text-decoration: none;
}

.auth-masthead {
    background: #ffffff;
    border-bottom: 3px solid var(--muesli);
}

.auth-masthead-inner {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding-top: 1.125rem;
    padding-bottom: 1.125rem;
}

.auth-seal {
    width: 54px;
    height: 54px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.auth-uni-name {
    font-family: var(--font-serif);
    font-size: 18px;
    font-weight: 700;
    line-height: 1.25;
}

.auth-unit-line {
    font-size: 13px;
    color: var(--ins-muted);
    margin-top: 2px;
}

/* --- Body --- */
.auth-main {
    flex-grow: 1;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 3.5rem 1.75rem;
}

.auth-box {
    width: 100%;
    max-width: 700px;
    display: grid;
    grid-template-columns: 1.15fr 1fr;
    border: 1px solid var(--ins-line);
    background: #ffffff;
}

.auth-box--single {
    max-width: 460px;
    grid-template-columns: 1fr;
}

.auth-form-col {
    padding: 2.25rem 2.25rem 2.125rem;
}

.auth-form-col h1 {
    font-size: 22px;
    margin-bottom: 0.4375rem;
}

.auth-lede {
    font-size: 13.5px;
    color: var(--ins-muted);
    line-height: 1.6;
    margin: 0 0 1.625rem;
}

/* Fields — square, bordered, no rounded corners */
.auth-body .form-group {
    margin-bottom: 1.0625rem;
}

.auth-body label {
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #4a5060;
    margin-bottom: 0.375rem;
}

.auth-body input[type="text"],
.auth-body input[type="password"] {
    padding: 0.6875rem 0.8125rem;
    font-size: 14px;
    font-family: var(--font-sans);
    border: 1px solid #c3c6cd;
    border-radius: var(--radius);
    background: #fbfbfc;
}

.auth-body input[type="text"]:focus,
.auth-body input[type="password"]:focus {
    border-color: var(--brick);
    box-shadow: 0 0 0 2px rgba(148, 74, 16, 0.12);
    background: #ffffff;
}

.auth-body .form-group.has-error input {
    border-color: var(--error);
    background: var(--error-bg);
}

.auth-body .error-message {
    color: var(--error);
}

.auth-body .form-message {
    border-radius: var(--radius);
    font-size: 13.5px;
}

.auth-body .form-actions {
    margin-top: 0.3125rem;
}

.auth-body .form-actions--full .ins-btn {
    width: 100%;
}

.auth-note {
    font-size: 12.5px;
    line-height: 1.65;
    color: var(--ins-muted);
    margin: 1.375rem 0 0;
    padding-top: 1rem;
    border-top: 1px solid var(--ins-line-soft);
}

/* When the note carries actions rather than prose, keep them apart so
   "Back" and "Sign out instead" don't read as one run of text. */
#login-footer {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    flex-wrap: wrap;
}

/* --- Notice column --- */
.auth-notice-col {
    background: var(--ebony);
    padding: 2.25rem 1.875rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.auth-notice-head {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.11em;
    text-transform: uppercase;
    color: var(--muesli);
    margin-bottom: 0.875rem;
}

.auth-notice-col p {
    font-size: 13px;
    line-height: 1.75;
    color: #c8ccd6;
    margin: 0 0 1.125rem;
}

.auth-notice-col p:last-of-type {
    margin-bottom: 0;
}

.auth-back {
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--muesli);
    border-bottom: 1px solid var(--muesli);
    padding-bottom: 2px;
    align-self: flex-start;
    margin-top: 1.5rem;
}

/* --- Footer --- */
.auth-footer-bar {
    background: var(--ebony);
    border-top: 3px solid var(--muesli);
}

.auth-footer-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding-top: 1rem;
    padding-bottom: 1rem;
    font-size: 12px;
    color: #7d8494;
    flex-wrap: wrap;
}


/* =====================================================================
   Landing + sign-in responsive
   ===================================================================== */

@media (max-width: 900px) {
    .ins-banner-inner,
    .ins-split,
    .ins-privacy {
        grid-template-columns: 1fr;
        gap: 2.25rem;
    }

    /* Hours, place and the emergency line matter more on a phone than
       the introduction does, so the panel comes first once stacked. */
    .ins-glance {
        order: -1;
    }

    .ins-deflist {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    /* Four abreast becomes unreadable well before this width; two rows
       of two keeps the sequence obvious. */
    .ins-steps {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.75rem 0;
    }

    .ins-steps li:nth-child(odd) {
        padding-left: 0;
        border-left: none;
    }

    .ins-footer-inner {
        grid-template-columns: 1fr 1fr;
        gap: 2rem;
    }

    .ins-banner h1 {
        font-size: 26px;
    }

    .auth-box {
        grid-template-columns: 1fr;
    }

    /* The notice reads as context, not a sidebar, once stacked. */
    .auth-notice-col {
        padding: 1.75rem;
    }
}

@media (max-width: 640px) {
    .ins-container {
        padding: 0 1.125rem;
    }

    .ins-strip-inner,
    .ins-masthead-inner {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.75rem;
    }

    /* Tighter gap so the four links have a real chance of fitting two
       (or all four) to a row instead of stranding the last one alone
       on its own line. */
    .ins-strip-links {
        gap: 0.375rem 0.875rem;
    }

    /* The portal masthead's right side is just a small avatar button,
       not a full-width action like the landing page's "Log In" — it
       stays on the identity's row instead of dropping to its own. */
    .ins-masthead-inner:has(.ins-user-menu-wrap) {
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: center;
        justify-content: space-between;
    }

    .ins-masthead-inner:has(.ins-user-menu-wrap) .ins-identity {
        min-width: 0;
    }

    /* The masthead's Log In button, on its own row with no content
       either side of it, looked stranded — moved to sit beside the
       Menu toggle instead (see .ins-nav-login below). */
    .ins-masthead-login {
        display: none;
    }

    .ins-nav-bar {
        position: relative;
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        gap: 0 0.75rem;
    }

    .ins-nav-toggle {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        padding: 0.875rem 0;
        background: none;
        border: none;
        color: #d5d8df;
        font: inherit;
        font-size: 13px;
        font-weight: 600;
        letter-spacing: 0.05em;
        text-transform: uppercase;
        cursor: pointer;
    }

    .ins-nav-login {
        display: inline-block;
        margin-left: auto;
    }

    .ins-nav-inner {
        display: none;
        flex-direction: column;
        flex-basis: 100%;
        width: 100%;
    }

    .ins-nav-bar.is-open .ins-nav-inner {
        display: flex;
    }

    .ins-nav-inner a {
        padding: 0.75rem 0;
        border-bottom: 1px solid var(--ebony-rule);
    }

    .ins-nav-inner a.active {
        padding-left: 0.75rem;
    }

    .ins-banner h1 {
        font-size: 23px;
    }

    .ins-uni-name {
        font-size: 17px;
    }

    .ins-footer-inner {
        grid-template-columns: 1fr;
    }

    .ins-table {
        font-size: 13px;
    }

    .ins-table th,
    .ins-table td {
        padding: 9px 12px;
    }

    /* One step per row: at this width a two-up grid leaves each step a
       column too narrow for its sentence. */
    .ins-steps {
        grid-template-columns: 1fr;
        gap: 1.375rem;
    }

    .ins-steps li,
    .ins-steps li:nth-child(odd) {
        padding: 0;
        border-left: none;
    }

    .ins-emergency-block,
    .ins-glance {
        padding: 1.375rem 1.25rem;
    }

    .auth-main {
        padding: 2rem 1.125rem;
    }

    .auth-form-col {
        padding: 1.75rem;
    }
}


/* =====================================================================
   Records page
   ===================================================================== */

.records-toolbar {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
    flex-wrap: wrap;
}

#records-search {
    flex: 1 1 280px;
    max-width: 420px;
}

.records-count {
    color: var(--text-muted);
    font-size: 0.9rem;
    white-space: nowrap;
}

.records-status {
    padding: 0.75rem 1rem;
    border-radius: var(--radius);
    font-size: 0.95rem;
    margin-bottom: 1rem;
}

.records-status--info {
    color: var(--info);
    background: var(--info-bg);
    border: 1px solid #bfdbfe;
}

.records-status--error {
    color: var(--error);
    background: var(--error-bg);
    border: 1px solid var(--error-border);
}

.table-wrapper {
    overflow-x: auto;
    border: 1px solid var(--border);
    border-radius: var(--radius-surface);
    /* A scroll-shadow hint: a soft shadow at each edge that only shows
       while there's more table to scroll to on that side, so a narrow
       screen doesn't just look like it cut columns off. The two
       "local" layers scroll WITH the content and mask the shadow once
       there's nothing left behind it; the two "scroll" layers stay put. */
    background:
        linear-gradient(to right, var(--surface) 30%, rgba(255, 255, 255, 0)) 0 0,
        linear-gradient(to left, var(--surface) 30%, rgba(255, 255, 255, 0)) 100% 0,
        linear-gradient(to right, rgba(15, 23, 42, 0.12), rgba(15, 23, 42, 0)) 0 0,
        linear-gradient(to left, rgba(15, 23, 42, 0.12), rgba(15, 23, 42, 0)) 100% 0;
    background-repeat: no-repeat;
    background-color: var(--surface);
    background-size: 32px 100%, 32px 100%, 12px 100%, 12px 100%;
    background-attachment: local, local, scroll, scroll;
}

.pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    margin-top: 1.25rem;
}

.pagination[hidden] {
    display: none;
}

.pagination-info {
    color: var(--text-muted);
    font-size: 0.9rem;
    white-space: nowrap;
}

.records-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.95rem;
}

.records-table thead {
    background: var(--surface-alt);
    border-bottom: 1px solid var(--border);
}

.records-table th {
    text-align: left;
    font-weight: 600;
    color: var(--text-label);
    padding: 0.75rem 1rem;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    white-space: nowrap;
}

.records-table td {
    padding: 0.75rem 1rem;
    border-top: 1px solid var(--border);
    vertical-align: middle;
    /* Rows keep a single line and the table scrolls sideways instead
       (see .table-wrapper) — ragged multi-line wrapping in a narrow
       mobile column looked broken, not responsive. */
    white-space: nowrap;
}

/* This column holds prose (diffs, multi-field summaries) rather than
   a short tabular value, so it wraps within its own max-width instead
   of forcing the whole table wider. */
.audit-details-cell {
    white-space: normal;
}

.records-row {
    cursor: pointer;
    transition: background 0.1s;
}

.records-row:hover {
    background: var(--surface-alt);
}

.records-row:focus {
    outline: none;
    background: var(--primary-light);
    box-shadow: inset 3px 0 0 var(--primary);
}

.records-table .col-photo {
    width: 72px;
    text-align: center;
}

.records-table .col-action {
    width: 80px;
    text-align: right;
}

.thumbnail {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid var(--border);
    background: var(--surface-alt);
}

.thumbnail--placeholder {
    color: var(--primary-dark);
    background: var(--primary-light);
    font-weight: 600;
    font-size: 0.85rem;
    border-color: transparent;
}

/* =====================================================================
   Patient chart  (patient.html)
   ===================================================================== */

.patient-chart {
    padding: 0;
    overflow: hidden;
}

.chart-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 2rem;
    background: var(--surface-alt);
    border-bottom: 1px solid var(--border);
    flex-wrap: wrap;
    gap: 1rem;
}

.chart-toolbar-actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.chart-meta {
    color: var(--text-muted);
    font-size: 0.9rem;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.chart-header {
    display: flex;
    gap: 1.5rem;
    align-items: center;
    padding: 2rem;
    border-bottom: 1px solid var(--border);
}

.chart-photo {
    flex: 0 0 auto;
}

.chart-photo-img {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 120px;
    height: 120px;
    border-radius: var(--radius-surface);
    object-fit: cover;
    border: 2px solid var(--border);
    background: var(--surface-alt);
}

.chart-photo-img--placeholder {
    color: var(--primary-dark);
    background: var(--primary-light);
    font-weight: 700;
    font-size: 2.5rem;
    border-color: transparent;
}

.chart-headline {
    min-width: 0;
}

.chart-headline h2 {
    font-size: 1.75rem;
    margin-bottom: 0.25rem;
}

.chart-subline {
    margin: 0;
    color: var(--text-muted);
    font-size: 1rem;
}

.chart-sep {
    margin: 0 0.5rem;
    opacity: 0.5;
}

.chart-section {
    padding: 1.5rem 2rem;
    border-bottom: 1px solid var(--border);
}

.chart-section:last-of-type {
    border-bottom: none;
}

.chart-section h3 {
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
    margin-bottom: 1rem;
}

.chart-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem 2rem;
    margin: 0;
}

.chart-item {
    min-width: 0;
}

.chart-item--full {
    grid-column: 1 / -1;
}

.chart-item dt {
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    margin-bottom: 0.2rem;
}

.chart-item dd {
    margin: 0;
    font-size: 1rem;
    color: var(--text);
    word-wrap: break-word;
}

.chart-footer {
    padding: 1rem 2rem;
    background: var(--surface-alt);
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    color: var(--text-muted);
    font-size: 0.85rem;
    flex-wrap: wrap;
}

/* =====================================================================
   Visit timeline  (patient.html, my-record.html)
   ===================================================================== */

.visit-card {
    border: 1px solid var(--border);
    border-radius: var(--radius-surface);
    margin-bottom: 1rem;
    overflow: hidden;
}

.visit-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding: 0.75rem 1.25rem;
    background: var(--surface-alt);
    border-bottom: 1px solid var(--border);
}

.visit-date {
    font-weight: 600;
    color: var(--text-label);
}

.visit-meta {
    color: var(--text-muted);
    font-size: 0.85rem;
}

.visit-actions {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    padding: 0.75rem 1.25rem 0;
}

.visit-section {
    padding: 1rem 1.25rem;
    border-top: 1px solid var(--border);
}

.visit-section:first-of-type {
    border-top: none;
}

.visit-section h4 {
    margin: 0 0 0.5rem;
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
}

.visit-empty {
    margin: 0;
    color: var(--text-muted);
    font-size: 0.9rem;
    font-style: italic;
}

.visit-vitals-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 0.75rem 1.5rem;
    margin: 0;
}

.visit-vitals-grid dt {
    font-size: 0.8rem;
    color: var(--text-muted);
}

.visit-vitals-grid dd {
    margin: 0;
    font-weight: 500;
}

.diagnosis-entry {
    padding-bottom: 0.75rem;
    margin-bottom: 0.75rem;
    border-bottom: 1px dashed var(--border);
}

.diagnosis-entry:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.diagnosis-entry--superseded {
    opacity: 0.7;
}

.diagnosis-badge {
    display: inline-block;
    background: var(--surface-alt);
    color: var(--text-muted);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius);
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    padding: 0.15rem 0.5rem;
    margin-bottom: 0.4rem;
}

.visit-diagnosis-text {
    margin: 0 0 0.5rem;
    font-size: 1rem;
}

.visit-diagnosis-notes {
    margin: 0 0 0.5rem;
    color: var(--text-muted);
    font-size: 0.9rem;
}

.visit-subheading {
    margin: 0.75rem 0 0.25rem;
    font-weight: 600;
    font-size: 0.85rem;
}

.visit-prescription-list,
.visit-request-list,
.visit-attachment-list {
    margin: 0;
    padding-left: 1.25rem;
}

.visit-request-list li {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.25rem;
}

.visit-attribution {
    margin: 0.75rem 0 0;
    color: var(--text-muted);
    font-size: 0.8rem;
}

.clinical-visits-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    flex-wrap: wrap;
}

.inline-form {
    background: var(--surface-alt);
    border: 1px solid var(--border);
    border-radius: var(--radius-surface);
    padding: 1rem 1.25rem;
    margin: 0.75rem 1.25rem 0;
}

.medicine-row {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.medicine-row input {
    flex: 1;
}

/* =====================================================================
   Printable patient record  (print-record.html)
   ===================================================================== */

.print-body {
    background: var(--bg);
}

.print-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 800px;
    margin: 1rem auto;
    padding: 0 1rem;
}

.print-page {
    max-width: 800px;
    margin: 0 auto 2rem;
    background: var(--surface);
    border: 1px solid var(--border);
    padding: 2.5rem;
}

.print-letterhead {
    text-align: center;
    border-bottom: 2px solid var(--text);
    padding-bottom: 1rem;
    margin-bottom: 1.5rem;
}

.print-seal {
    display: block;
    margin: 0 auto 0.5rem;
}

.print-republic {
    margin: 0;
    font-size: 0.85rem;
    font-family: var(--font-sans);
}

.print-letterhead h1 {
    font-family: var(--font-serif);
    font-size: 1.15rem;
    margin: 0.15rem 0;
}

.print-clinic-name {
    margin: 0 0 0.5rem;
    font-weight: 600;
}

.print-letterhead h2 {
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin: 0.75rem 0 0.25rem;
}

.print-generated {
    margin: 0;
    font-size: 0.8rem;
    color: var(--text-muted);
}

.print-section {
    margin-bottom: 1.5rem;
}

.print-section h3 {
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-bottom: 1px solid var(--border);
    padding-bottom: 0.35rem;
    margin-bottom: 0.75rem;
}

.print-fields {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.5rem 1.5rem;
    margin: 0;
}

.print-field--full {
    grid-column: 1 / -1;
}

.print-fields dt {
    font-size: 0.75rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.print-fields dd {
    margin: 0 0 0.5rem;
    font-size: 0.95rem;
}

.print-visit {
    border: 1px solid var(--border);
    border-radius: var(--radius-surface);
    padding: 0.75rem 1rem;
    margin-bottom: 0.75rem;
}

.print-visit h4 {
    margin: 0 0 0.4rem;
    font-size: 0.9rem;
}

.print-vitals-line,
.print-diagnosis-line,
.print-attachments-line {
    margin: 0 0 0.4rem;
    font-size: 0.9rem;
}

.print-signature-block {
    display: flex;
    justify-content: space-between;
    gap: 3rem;
    margin-top: 3rem;
}

.print-signature {
    flex: 1;
    text-align: center;
    font-size: 0.85rem;
    color: var(--text-muted);
}

.print-signature-line {
    border-top: 1px solid var(--text);
    margin-bottom: 0.35rem;
    height: 2.5rem;
}

@page {
    margin: 1.2cm;
}

@media print {
    .no-print {
        display: none !important;
    }

    body.print-body {
        background: #fff;
    }

    .print-page {
        border: none;
        max-width: none;
        margin: 0;
        padding: 0;
    }

    .print-letterhead {
        margin-bottom: 1rem;
        padding-bottom: 0.75rem;
    }

    .print-section {
        margin-bottom: 1rem;
    }

    .print-visit {
        break-inside: avoid;
        padding: 0.5rem 0.75rem;
        margin-bottom: 0.5rem;
    }

    .print-signature-block {
        margin-top: 1.5rem;
    }
}

/* =====================================================================
   Audit log  (audit-log.html)
   ===================================================================== */

.audit-badge {
    display: inline-block;
    padding: 0.15rem 0.55rem;
    border-radius: var(--radius);
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.audit-badge--create {
    background: var(--success-bg);
    color: var(--success);
    border: 1px solid var(--success-border);
}

.audit-badge--update {
    background: var(--info-bg);
    color: var(--info);
    border: 1px solid #bfdbfe;
}

.audit-badge--delete {
    background: var(--error-bg);
    color: var(--error);
    border: 1px solid var(--error-border);
}

.audit-badge--archive {
    background: var(--info-bg);
    color: var(--info);
    border: 1px solid #bfdbfe;
}

.audit-badge--restore {
    background: var(--success-bg);
    color: var(--success);
    border: 1px solid var(--success-border);
}

.audit-badge--deactivate {
    background: var(--error-bg);
    color: var(--error);
    border: 1px solid var(--error-border);
}

.audit-badge--activate {
    background: var(--success-bg);
    color: var(--success);
    border: 1px solid var(--success-border);
}

.audit-badge--view {
    background: var(--info-bg);
    color: var(--info);
    border: 1px solid #bfdbfe;
}

.audit-details-cell {
    max-width: 420px;
}

.audit-diff-list {
    margin: 0;
    padding-left: 1.1rem;
    font-size: 0.85rem;
}

/* =====================================================================
   Modal dialog  (manage-users.html)
   ===================================================================== */

.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100;
    padding: 1rem;
}

.modal-overlay[hidden] {
    display: none;
}

.modal-box {
    background: var(--surface);
    border-radius: var(--radius-surface);
    box-shadow: var(--shadow-lg);
    padding: 1.75rem;
    width: 100%;
    max-width: 400px;
}

.modal-box h3 {
    margin-bottom: 1rem;
}

/* =====================================================================
   Dashboard  (dashboard.html)
   ===================================================================== */

.dashboard-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 1.5rem;
    gap: 1rem;
    flex-wrap: wrap;
}

.dashboard-header h2 {
    font-size: 1.75rem;
    font-weight: 600;
    margin-bottom: 0.25rem;
}

/* --------------------------------------------------------------------
   Dashboard figures

   A short row of numbers, not a grid of cards. Each one is a labelled
   figure, so it reads as a fact about the clinic rather than a tile.
   -------------------------------------------------------------------- */
.figure-row {
    display: flex;
    flex-wrap: wrap;
    gap: 2.5rem;
    margin: 0;
}

.figure dt {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--text-muted);
    margin-bottom: 0.375rem;
}

.figure dd {
    margin: 0;
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--text);
    line-height: 1.1;
    /* Keeps digit widths steady so a number doesn't jump when it
       updates from its placeholder to a real value. */
    font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------------------
   Recent activity (admin)
   -------------------------------------------------------------------- */
.activity-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.activity-list li {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.375rem;
    padding: 0.6875rem 0;
    border-bottom: 1px solid var(--border);
    font-size: 0.9rem;
    color: var(--text);
}

.activity-list li:last-child {
    border-bottom: none;
}

.activity-actor {
    font-weight: 600;
}

.activity-when {
    margin-left: auto;
    font-size: 0.82rem;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
}

/* --- Recent-patients table cells (dashboard) --- */
.patient-cell {
    display: flex;
    align-items: center;
    gap: 0.6875rem;
}



.patient-cell-name {
    font-weight: 550;
}

.patient-cell-sub {
    font-size: 0.78rem;
    color: #9aa5b1;
}



/* Empty / loading row inside the recent-patients table */
.table-empty {
    text-align: center;
    color: var(--text-muted);
    font-style: italic;
    padding: 1.5rem 1rem;
}

/* --------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------- */
@media (max-width: 640px) {
    .card {
        padding: 1.25rem;
    }

    .form-grid {
        grid-template-columns: 1fr;
    }

    .form-actions {
        flex-direction: column-reverse;
    }

    .form-actions .btn {
        width: 100%;
    }

    .header-inner {
        flex-direction: column;
        align-items: flex-start;
    }

    .user-info {
        padding-left: 0;
        border-left: none;
    }

    .records-table th,
    .records-table td {
        padding: 0.6rem 0.75rem;
    }

    #records-search {
        max-width: 100%;
    }

    /* The "Today" / "Registry" figures don't all fit on a phone and
       used to wrap onto a second line instead — same scroll-shadow
       treatment as the sidebar nav and data tables, so it reads as a
       row you swipe rather than a layout that broke. */
    .figure-row {
        flex-wrap: nowrap;
        overflow-x: auto;
        gap: 1.75rem;
        padding-bottom: 0.25rem;
        scrollbar-width: none;
        background:
            linear-gradient(to right, var(--surface) 30%, rgba(255, 255, 255, 0)) 0 0,
            linear-gradient(to left, var(--surface) 30%, rgba(255, 255, 255, 0)) 100% 0,
            linear-gradient(to right, rgba(15, 23, 42, 0.12), rgba(15, 23, 42, 0)) 0 0,
            linear-gradient(to left, rgba(15, 23, 42, 0.12), rgba(15, 23, 42, 0)) 100% 0;
        background-repeat: no-repeat;
        background-color: var(--surface);
        background-size: 24px 100%, 24px 100%, 10px 100%, 10px 100%;
        background-attachment: local, local, scroll, scroll;
    }

    .figure-row::-webkit-scrollbar {
        display: none;
    }

    .figure {
        flex-shrink: 0;
    }

    .chart-toolbar,
    .chart-header,
    .chart-section,
    .chart-footer {
        padding-left: 1.25rem;
        padding-right: 1.25rem;
    }

    .chart-toolbar {
        flex-direction: column;
        align-items: stretch;
    }

    /* Print Record / Edit / Archive used to wrap raggedly — one button
       alone on its own row, the rest crowded onto the next. An even
       grid keeps every button the same size instead. */
    .chart-toolbar-actions {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
        gap: 0.5rem;
        width: 100%;
    }

    .chart-toolbar-actions .chart-meta {
        grid-column: 1 / -1;
        text-align: left;
    }

    .chart-header {
        flex-direction: column;
        text-align: center;
    }

    .chart-list {
        grid-template-columns: 1fr;
        gap: 0.75rem;
    }

    .login-card {
        padding: 1.75rem;
    }
}