/* =========================================================
   Seeds of Hope Supervision Hub
   Application stylesheet (loaded after Bootstrap 5.3)

   Sections
    1.  Tokens
    2.  Base
    3.  Application shell
    4.  Navigation
    5.  Typography
    6.  Page headers
    7.  Cards and sections
    8.  Statuses and counts
    9.  Tabs and view switches
   10.  Tables
   11.  Forms
   12.  Buttons
   13.  Alerts, lists, overlays
   14.  Detail layouts
   15.  Supervisor dashboard
   16.  Account pages
   16b. Supervisee workflow
   17.  Responsive
   18.  DEVELOPMENT-ONLY

   Status colour meaning (used identically everywhere; always
   paired with a text label, never colour alone):
     pending   amber  waiting, outstanding, unsigned, open, needs attention
     urgent    red    overdue, rejected, requires correction now
     info      blue   in progress, upcoming, suggested
     complete  green  approved, complete, signed, active
     neutral   grey   archived, cancelled, inactive, historical, N/A
   ========================================================= */


/* =========================================================
   1. Tokens
   ========================================================= */

:root {
    --sidebar-width: 224px;

    --brand-primary: #657b69;
    --brand-primary-hover: #566b5b;
    --brand-primary-active: #485b4d;
    --brand-primary-soft: #e5ece5;
    --brand-primary-soft-hover: #dbe5dc;

    --page-bg: #f6f5f1;
    --sidebar-bg: #f0f1ec;
    --surface: #ffffff;
    --surface-soft: #faf9f6;
    --surface-hover: #f7f8f5;

    --border: #dddcd5;
    --border-light: #ebeae5;
    --border-input: #d2d4ce;

    --text: #303630;
    --heading: #292f2a;
    --muted: #6f756d;
    --label: #4d554e;

    --nav-text: #4e5b50;
    --nav-hover: #e5e9e2;
    --nav-active: #dbe5dc;
    --nav-active-text: #405646;
    --nav-section: #80867e;

    --topbar-bg: rgba(255, 255, 255, 0.97);

    /* Status colours (see header comment for meaning). */
    --status-pending-bg: #fff0dc;
    --status-pending-border: #e6a443;
    --status-pending-text: #8a4b00;

    --status-action-bg: #f8e7e8;
    --status-action-border: #d9969f;
    --status-action-text: #8b3440;

    --status-progress-bg: #e2eef4;
    --status-progress-border: #86b5cb;
    --status-progress-text: #285e76;

    --status-complete-bg: #e4efe5;
    --status-complete-border: #91b796;
    --status-complete-text: #35633c;

    --status-na-bg: #eceeeb;
    --status-na-border: #c9cdc8;
    --status-na-text: #5c625b;

    /* Geometry */
    --radius-sm: 3px;
    --radius: 7px;
    --radius-card: 9px;
    --status-radius: var(--radius-sm);
    --shadow-card: 0 1px 2px rgba(40, 50, 42, 0.025);

    /* Spacing rhythm */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.25rem;
    --space-6: 1.5rem;
    --space-section: 1.5rem;
    --card-pad-x: 1.25rem;
    --card-pad-y: 1.125rem;
}


/* =========================================================
   2. Base
   ========================================================= */

html {
    font-size: 14px;
}

@media (min-width: 768px) {
    html {
        font-size: 16px;
    }
}

html,
body {
    margin: 0;
    min-height: 100%;
}

body {
    background: var(--page-bg);
    color: var(--text);
    font-family: Inter, "Segoe UI", Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
}

a {
    color: var(--brand-primary);
    text-decoration: none;
}

a:hover {
    color: var(--brand-primary-hover);
}

hr {
    margin: 1.75rem 0;
    border-color: var(--border);
    opacity: 1;
}

/* One focus treatment for every interactive element. */
a:focus-visible,
button:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
    outline: 2px solid var(--brand-primary);
    outline-offset: 2px;
}

.text-muted {
    /* Bootstrap's utility uses !important; matching is required. */
    color: var(--muted) !important;
}

.bg-light {
    background-color: var(--surface-soft) !important;
}

.text-prewrap {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}


/* =========================================================
   3. Application shell
   ========================================================= */

.app-shell {
    display: flex;
    min-height: 100vh;
}

.app-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: var(--sidebar-width);
    display: flex;
    flex-direction: column;
    background: var(--sidebar-bg);
    border-right: 1px solid var(--border);
    z-index: 1000;
}

.sidebar-main {
    min-height: 0;
    overflow-y: auto;
    padding: 14px 10px 18px;
    scrollbar-width: thin;
    scrollbar-color: #c4cbc3 transparent;
}

.sidebar-main::-webkit-scrollbar {
    width: 7px;
}

.sidebar-main::-webkit-scrollbar-track {
    background: transparent;
}

.sidebar-main::-webkit-scrollbar-thumb {
    background: #c4cbc3;
    border-radius: 4px;
}

.sidebar-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 62px;
    padding: 3px 6px 15px;
    margin-bottom: 2px;
    color: inherit;
}

.sidebar-brand:hover {
    color: inherit;
}

.sidebar-logo {
    width: 48px;
    height: 48px;
    flex: 0 0 48px;
    object-fit: contain;
}

.sidebar-brand-text {
    min-width: 0;
}

.sidebar-brand-name {
    color: var(--heading);
    font-size: 14px;
    font-weight: 700;
    line-height: 1.2;
}

.sidebar-brand-org {
    margin-top: 3px;
    color: var(--muted);
    font-size: 11px;
    line-height: 1.2;
}

.app-main {
    width: calc(100% - var(--sidebar-width));
    min-width: 0;
    min-height: 100vh;
    margin-left: var(--sidebar-width);
}

.app-topbar {
    position: sticky;
    top: 0;
    z-index: 900;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    padding: 0 26px;
    background: var(--topbar-bg);
    border-bottom: 1px solid var(--border);
}

.topbar-title {
    color: var(--heading);
    font-size: 15px;
    font-weight: 600;
}

.topbar-actions {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.topbar-user {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 5px 7px;
    border-radius: var(--radius);
    color: inherit;
    text-decoration: none;
    transition: background-color 120ms ease;
}

.topbar-user:hover {
    background: var(--brand-primary-soft);
    color: inherit;
}

.topbar-user-text {
    text-align: right;
}

.topbar-user-name {
    font-size: 13px;
    font-weight: 600;
    line-height: 1.2;
}

.topbar-user-role {
    margin-top: 2px;
    color: var(--muted);
    font-size: 11px;
    line-height: 1.2;
}

.topbar-avatar {
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--brand-primary-soft);
    color: var(--brand-primary-active);
    font-size: 13px;
    font-weight: 700;
}

.app-content {
    width: 100%;
    max-width: 1500px;
    margin: 0 auto;
    padding: 26px;
}

/* Unauthenticated pages (sign-in, access denied). */
.app-content--public {
    max-width: 1100px;
    padding-top: 2rem;
}


/* =========================================================
   4. Navigation
   ========================================================= */

.sidebar-section-title,
.mobile-nav-title {
    margin: 17px 8px 6px;
    color: var(--nav-section);
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.035em;
    text-transform: uppercase;
}

.sidebar-nav {
    display: flex;
    flex-direction: column;
}

.sidebar-nav-link {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 9px;
    min-height: 36px;
    margin-bottom: 2px;
    padding: 7px 9px;
    border: 0;
    border-radius: var(--radius);
    background: transparent;
    color: var(--nav-text);
    font-family: inherit;
    font-size: 13.5px;
    font-weight: 400;
    line-height: 1.2;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 120ms ease, color 120ms ease;
}

.sidebar-nav-link:hover {
    background: var(--nav-hover);
    color: var(--heading);
}

.sidebar-nav-link.active {
    background: var(--nav-active);
    color: var(--nav-active-text);
    font-weight: 600;
}

.sidebar-icon {
    width: 18px;
    height: 18px;
    flex: 0 0 18px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sidebar-icon svg {
    width: 17px;
    height: 17px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Supervisor: quick links to each supervisee. */
.sidebar-supervisees-title {
    margin-top: 19px;
}

.sidebar-supervisee-link {
    width: 100%;
    min-height: 34px;
    display: flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 2px;
    padding: 6px 9px 6px 12px;
    border-radius: var(--radius);
    color: var(--nav-text);
    font-size: 13px;
    line-height: 1.2;
    text-decoration: none;
    transition: background-color 120ms ease, color 120ms ease;
}

.sidebar-supervisee-link:hover {
    background: var(--nav-hover);
    color: var(--heading);
}

.sidebar-supervisee-link.active {
    background: var(--nav-active);
    color: var(--nav-active-text);
    font-weight: 600;
}

.sidebar-supervisee-marker {
    width: 7px;
    height: 7px;
    flex: 0 0 7px;
    border-radius: 50%;
    background: currentColor;
    opacity: 0.45;
}

.sidebar-supervisee-link.active .sidebar-supervisee-marker {
    opacity: 1;
}

.sidebar-supervisee-name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sidebar-supervisee-manage-link {
    display: block;
    margin: 5px 5px 0 12px;
    padding: 6px 9px;
    border-radius: 6px;
    color: var(--brand-primary);
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
}

.sidebar-supervisee-manage-link:hover,
.sidebar-supervisee-manage-link.active {
    background: var(--nav-hover);
    color: var(--brand-primary-hover);
}

.sidebar-supervisee-empty {
    padding: 6px 12px;
    color: var(--muted);
    font-size: 12px;
}

/* Mobile header and off-canvas menu. */
.mobile-header {
    display: none;
}

.mobile-header-title {
    color: var(--heading);
    font-size: 15px;
    font-weight: 600;
}

.mobile-nav-title {
    margin: 15px 0 7px;
}

.mobile-nav-link {
    display: block;
    padding: 8px 5px;
    border-radius: 6px;
    color: var(--nav-text);
}

.mobile-nav-link:hover {
    background: var(--nav-hover);
    color: var(--heading);
}

.mobile-nav-link.active {
    background: var(--nav-active);
    color: var(--nav-active-text);
    font-weight: 600;
}

.offcanvas {
    background: var(--sidebar-bg);
}

.offcanvas-header {
    border-bottom: 1px solid var(--border);
}

.offcanvas-title {
    font-size: 1rem;
    font-weight: 600;
}


/* =========================================================
   5. Typography
   Scale: page title > section title > card title > body.
   Use the semantic classes; avoid h4/h5/fs-* utilities.
   ========================================================= */

h1, h2, h3, h4, h5, h6 {
    color: var(--heading);
}

h1,
.page-title {
    margin: 0;
    font-size: 1.625rem;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.015em;
}

h2 {
    font-size: 1.25rem;
    font-weight: 650;
}

/* Heading for a group of cards or a full-width block. */
.section-title {
    margin: 0 0 var(--space-3);
    color: var(--heading);
    font-size: 1.125rem;
    font-weight: 650;
    line-height: 1.3;
}

/* Heading inside a card header or card body. */
.card-title {
    margin: 0;
    color: var(--heading);
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.35;
}

/* Smaller heading for a group inside a card. */
.subsection-title {
    margin: 0 0 var(--space-2);
    color: var(--heading);
    font-size: 0.9375rem;
    font-weight: 600;
    line-height: 1.35;
}

/* Muted supporting text under a heading. */
.section-help {
    margin: 0.125rem 0 0;
    color: var(--muted);
    font-size: 0.875rem;
    line-height: 1.4;
}

/* Small secondary information: timestamps, ids, owners. */
.meta {
    color: var(--muted);
    font-size: 0.8125rem;
    line-height: 1.35;
}

/* Prominent value (an item title in a list). */
.item-title {
    color: var(--heading);
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.35;
}

/* KPI label + value. */
.kpi-label {
    color: var(--muted);
    font-size: 0.8125rem;
    font-weight: 600;
}

.kpi-value {
    margin-top: 0.125rem;
    color: var(--heading);
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.2;
}

.kpi-value--sm {
    font-size: 1.0625rem;
    font-weight: 600;
}

.kpi-detail {
    margin-top: 0.25rem;
    color: var(--muted);
    font-size: 0.8125rem;
}


/* =========================================================
   6. Page headers
   Left: optional eyebrow, title, muted subtitle/metadata.
   Right: the page's primary action plus few secondary actions.
   ========================================================= */

.page-header {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-4);
    margin-bottom: var(--space-section);
}

.page-header__main {
    min-width: 0;
    flex: 1 1 24rem;
}

.page-eyebrow {
    margin-bottom: 0.25rem;
    color: var(--muted);
    font-size: 0.8125rem;
    font-weight: 500;
}

.page-eyebrow a {
    color: inherit;
}

.page-eyebrow a:hover {
    color: var(--brand-primary-hover);
    text-decoration: underline;
}

.page-subtitle {
    margin: 0.25rem 0 0;
    color: var(--muted);
    font-size: 0.9375rem;
    line-height: 1.45;
}

.page-header__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
}

/* Entity detail header: identity on the left, key facts below. */
.entity-header {
    margin-bottom: var(--space-section);
    padding: var(--card-pad-y) var(--card-pad-x);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-card);
}

.entity-header .page-header {
    margin-bottom: 0;
}

.entity-header__facts {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
    gap: var(--space-3) var(--space-6);
    margin: var(--space-4) 0 0;
    padding-top: var(--space-4);
    border-top: 1px solid var(--border-light);
}

.entity-header__facts dt {
    color: var(--muted);
    font-size: 0.8125rem;
    font-weight: 500;
}

.entity-header__facts dd {
    margin: 0.125rem 0 0;
    color: var(--heading);
    font-size: 0.9375rem;
    font-weight: 500;
}


/* =========================================================
   7. Cards and sections
   ========================================================= */

.page-section {
    margin-bottom: var(--space-section);
}

.card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-card);
}

.card-body {
    padding: var(--card-pad-y) var(--card-pad-x);
}

.card-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2) var(--space-4);
    padding: 0.875rem var(--card-pad-x);
    background: var(--surface);
    border-bottom: 1px solid var(--border);
}

.card-header:first-child {
    border-radius: calc(var(--radius-card) - 1px) calc(var(--radius-card) - 1px) 0 0;
}

.card-header .section-help {
    flex-basis: 100%;
    margin-top: -0.25rem;
}

.card-footer {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: var(--space-2);
    padding: 0.75rem var(--card-pad-x);
    background: var(--surface-soft);
    border-top: 1px solid var(--border);
}

/* Header row inside a card body: title left, count/action right. */
.card-heading {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2) var(--space-4);
    margin-bottom: var(--space-3);
}

/* KPI cards (summary numbers above a page's main content). */
.kpi-card .card-body {
    padding: 0.875rem var(--card-pad-x);
}

/* Bordered sub-item inside a card (an open task, a transfer, a
   discussion). Flat: no shadow, so it does not read as a card. */
.item-block {
    padding: var(--space-4);
    border: 1px solid var(--border-light);
    border-radius: var(--radius);
    background: var(--surface);
}

.item-block + .item-block {
    margin-top: var(--space-3);
}

.item-block__head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-2) var(--space-4);
}

.item-block__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
    margin-top: var(--space-3);
}

/* Read-only text from a record (notes, summaries, descriptions). */
.text-panel {
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--border-light);
    border-radius: var(--radius);
    background: var(--surface-soft);
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.text-panel--tall {
    min-height: 8rem;
}

.text-panel--empty {
    color: var(--muted);
    font-style: italic;
    white-space: normal;
}

/* Empty state inside a card or table area. */
.empty-state {
    padding: var(--space-6) var(--card-pad-x);
    color: var(--muted);
}

.card-body > .empty-state {
    padding: 0;
}


/* =========================================================
   8. Statuses and counts
   Compact rectangles sized to their content. Not buttons:
   no hover lift, no pill shape, no fixed width.
   .dash-chip / .dash-count are the dashboard's original names
   (emitted from C#) and map to the same system.
   ========================================================= */

.status,
.dash-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.125rem 0.45rem;
    border: 1px solid var(--status-na-border);
    border-radius: var(--status-radius);
    background: var(--status-na-bg);
    color: var(--status-na-text);
    font-size: 0.76rem;
    font-weight: 600;
    line-height: 1.35;
    white-space: nowrap;
    vertical-align: middle;
    text-decoration: none;
}

.status--pending,
.dash-chip--pending {
    background: var(--status-pending-bg);
    border-color: var(--status-pending-border);
    color: var(--status-pending-text);
}

.status--urgent,
.dash-chip--action {
    background: var(--status-action-bg);
    border-color: var(--status-action-border);
    color: var(--status-action-text);
}

.status--info,
.dash-chip--progress {
    background: var(--status-progress-bg);
    border-color: var(--status-progress-border);
    color: var(--status-progress-text);
}

.status--complete,
.dash-chip--complete {
    background: var(--status-complete-bg);
    border-color: var(--status-complete-border);
    color: var(--status-complete-text);
}

.status--neutral,
.dash-chip--na {
    background: var(--status-na-bg);
    border-color: var(--status-na-border);
    color: var(--status-na-text);
}

/* Role / relationship labels (Primary, Owner, ...): a tag, not a state. */
.status--role,
.dash-chip--role {
    background: var(--brand-primary-soft);
    border-color: #b9c8bb;
    color: var(--nav-active-text);
}

.status--sm,
.dash-chip--sm {
    padding: 0.05rem 0.35rem;
    font-size: 0.72rem;
}

.dash-chip--sm {
    margin-top: 0.15rem;
}

.status-group {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem;
}

/* Count indicators: zero is quiet; only non-zero stands out. */
.count,
.dash-count {
    display: inline-block;
    min-width: 2.1rem;
    padding: 0.15rem 0.5rem;
    border: 1px solid transparent;
    border-radius: var(--status-radius);
    font-size: 0.875rem;
    font-weight: 700;
    line-height: 1.35;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
}

.count--attention,
.dash-count--action {
    background: var(--status-pending-bg);
    border-color: var(--status-pending-border);
    color: var(--status-pending-text);
}

.count--urgent,
.dash-count--urgent {
    background: var(--status-action-bg);
    border-color: var(--status-action-border);
    color: var(--status-action-text);
}

.count--clear,
.dash-count--clear {
    background: transparent;
    color: var(--status-complete-text);
    font-weight: 600;
}

.count--neutral,
.dash-count--na {
    background: var(--status-na-bg);
    border-color: var(--status-na-border);
    color: var(--status-na-text);
    font-weight: 600;
}

/* A count or status that is also a link: underline on hover only. */
a.status,
a.dash-chip,
a.count,
a.dash-count {
    cursor: pointer;
}

a.status:hover,
a.dash-chip:hover,
a.count:hover,
a.dash-count:hover {
    text-decoration: underline;
}

.text-pending,
.dash-text-pending {
    color: var(--status-pending-text);
}

.text-urgent,
.dash-text-urgent {
    color: var(--status-action-text);
    font-weight: 600;
}


/* =========================================================
   9. Tabs and view switches
   Tabs: sections of one entity (understated bottom border).
   View switch: filters of one list (Active / Archived).
   ========================================================= */

.nav-tabs {
    gap: var(--space-5);
    margin-bottom: var(--space-4);
    border-bottom: 1px solid var(--border);
}

.nav-tabs .nav-link {
    margin-bottom: -1px;
    padding: 0.625rem 0.125rem;
    border: 0;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    background: transparent;
    color: var(--muted);
    font-size: 0.9375rem;
    font-weight: 500;
    transition: color 120ms ease, border-color 120ms ease;
}

.nav-tabs .nav-link:hover {
    color: var(--heading);
    border-bottom-color: var(--border);
}

.nav-tabs .nav-link.active {
    color: var(--heading);
    background: transparent;
    border-bottom-color: var(--brand-primary);
    font-weight: 600;
}

.nav-tabs .nav-link:focus-visible {
    outline-offset: -2px;
}

.nav-tabs .count,
.nav-tabs .status {
    margin-left: 0.35rem;
}

.view-switch {
    display: inline-flex;
    margin-bottom: var(--space-4);
    border: 1px solid var(--border-input);
    border-radius: var(--radius);
    background: var(--surface);
    overflow: hidden;
}

.view-switch__item {
    padding: 0.375rem 0.875rem;
    color: var(--muted);
    font-size: 0.875rem;
    font-weight: 500;
}

.view-switch__item + .view-switch__item {
    border-left: 1px solid var(--border-input);
}

.view-switch__item:hover {
    background: var(--surface-hover);
    color: var(--heading);
}

.view-switch__item.active {
    background: var(--brand-primary-soft);
    color: var(--nav-active-text);
    font-weight: 600;
}

.view-switch__item:focus-visible {
    outline-offset: -2px;
}


/* =========================================================
   10. Tables
   Data tables sit flush inside a card (.card > .table-responsive)
   and scroll sideways on narrow screens.
   ========================================================= */

.table {
    --bs-table-bg: transparent;
    --bs-table-hover-bg: var(--surface-hover);
    margin-bottom: 0;
    font-size: 0.9375rem;
}

.table > :not(caption) > * > * {
    padding: 0.75rem 0.875rem;
    vertical-align: middle;
}

.table > thead > tr > th,
.table > thead.table-light > tr > th {
    --bs-table-bg: var(--surface-soft);
    color: var(--nav-text);
    background-color: var(--surface-soft);
    border-bottom: 1px solid var(--border);
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1.25;
    white-space: nowrap;
    vertical-align: bottom;
}

.table > tbody > tr > * {
    border-bottom-color: var(--border-light);
}

.table > :not(caption) > tr > :first-child {
    padding-left: var(--card-pad-x);
}

.table > :not(caption) > tr > :last-child {
    padding-right: var(--card-pad-x);
}

.card .table > tbody > tr:last-child > * {
    border-bottom: 0;
}

.table-hover > tbody > tr:hover > * {
    --bs-table-bg-state: var(--surface-hover);
}

/* Contain absolutely positioned descendants (e.g. .visually-hidden
   header labels) so they scroll with the table rather than widening
   the page on narrow screens. */
.table-responsive {
    position: relative;
}

.card > .table-responsive:first-child,
.card > .table-responsive:first-child .table > thead > tr > th {
    border-top-left-radius: calc(var(--radius-card) - 1px);
    border-top-right-radius: calc(var(--radius-card) - 1px);
}

.card > .table-responsive:last-child {
    border-bottom-left-radius: calc(var(--radius-card) - 1px);
    border-bottom-right-radius: calc(var(--radius-card) - 1px);
}

/* Column helpers. */
.col-num {
    text-align: right;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.col-center {
    text-align: center;
    white-space: nowrap;
}

.col-actions {
    width: 1%;
    text-align: right;
    white-space: nowrap;
}

.col-wide {
    min-width: 18rem;
}

.cell-actions {
    display: inline-flex;
    flex-wrap: nowrap;
    justify-content: flex-end;
    gap: var(--space-2);
}

/* Rows navigated by data-row-href (site.js); embedded links and
   buttons stay independently clickable. */
.clickable-row {
    cursor: pointer;
}

.clickable-row:hover > td {
    background: var(--brand-primary-soft);
}

.clickable-row:focus {
    outline: 2px solid var(--brand-primary);
    outline-offset: -2px;
}


/* =========================================================
   11. Forms
   ========================================================= */

.form-label {
    margin-bottom: 0.375rem;
    color: var(--label);
    font-size: 0.875rem;
    font-weight: 500;
}

.form-label.required::after {
    content: " *";
    color: var(--status-action-text);
}

.form-text {
    margin-top: 0.3rem;
    color: var(--muted);
    font-size: 0.8125rem;
}

.form-control,
.form-select {
    color: var(--text);
    background-color: var(--surface);
    border-color: var(--border-input);
    border-radius: var(--radius);
}

.form-control:hover,
.form-select:hover {
    border-color: #bfc5bc;
}

.form-control:focus,
.form-select:focus,
.form-check-input:focus {
    border-color: #8ea294;
    box-shadow: 0 0 0 0.15rem rgba(101, 123, 105, 0.16);
}

.form-control:disabled,
.form-control[readonly] {
    background-color: var(--surface-soft);
}

.form-check-input:checked {
    background-color: var(--brand-primary);
    border-color: var(--brand-primary);
}

.field-validation-error,
.text-danger {
    color: var(--status-action-text) !important;
}

.validation-summary-errors ul {
    margin: 0;
    padding-left: 1.1rem;
}

/* Form width presets (replace inline max-width). */
.form-narrow {
    max-width: 36rem;
}

.form-medium {
    max-width: 52rem;
}

.field-narrow {
    max-width: 10rem;
}

.field-medium {
    max-width: 26rem;
}

/* A titled group of fields within a form. */
.form-section + .form-section {
    margin-top: var(--space-6);
    padding-top: var(--space-6);
    border-top: 1px solid var(--border-light);
}

.form-section__title {
    margin: 0 0 0.125rem;
    color: var(--heading);
    font-size: 1rem;
    font-weight: 600;
}

.form-section__help {
    margin: 0 0 var(--space-3);
    color: var(--muted);
    font-size: 0.875rem;
}

/* Submit row: primary first, then secondary/cancel. */
.form-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
    margin-top: var(--space-6);
}

/* Filter / selector bar above a list. */
.filter-bar .card-body {
    padding: 0.875rem var(--card-pad-x);
}


/* =========================================================
   12. Buttons
   One primary per area. Secondary actions are outline.
   Danger only for destructive actions.
   ========================================================= */

.btn {
    border-radius: var(--radius);
    font-weight: 500;
    transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease, box-shadow 120ms ease;
}

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

.btn-primary:hover,
.btn-primary:focus {
    background: var(--brand-primary-hover);
    border-color: var(--brand-primary-hover);
    color: #ffffff;
}

.btn-primary:active,
.btn-primary.active,
.show > .btn-primary.dropdown-toggle {
    background: var(--brand-primary-active);
    border-color: var(--brand-primary-active);
    color: #ffffff;
}

.btn-primary:focus {
    box-shadow: 0 0 0 0.2rem rgba(101, 123, 105, 0.2);
}

.btn-outline-primary {
    color: var(--brand-primary-hover);
    border-color: #899b8c;
    background: transparent;
}

.btn-outline-primary:hover,
.btn-outline-primary:focus {
    color: #ffffff;
    background: var(--brand-primary);
    border-color: var(--brand-primary);
}

.btn-outline-secondary {
    color: #5f655e;
    border-color: #c7cbc5;
}

.btn-outline-secondary:hover {
    color: #444b45;
    background: #eceeea;
    border-color: #bcc1bb;
}

.btn-outline-danger {
    color: var(--status-action-text);
    border-color: var(--status-action-border);
}

.btn-outline-danger:hover,
.btn-outline-danger:focus {
    color: #ffffff;
    background: #a13f4c;
    border-color: #a13f4c;
}


/* =========================================================
   13. Alerts, lists, overlays
   ========================================================= */

.alert {
    padding: 0.75rem var(--space-4);
    border-radius: var(--radius);
}

.alert-light {
    background: var(--surface-soft);
    border-color: var(--border);
    color: var(--text);
}

.list-group-item {
    padding: 0.75rem var(--card-pad-x);
    border-color: var(--border-light);
}

.list-group-item-action {
    color: var(--text);
    transition: background-color 100ms ease;
}

.list-group-item-action:hover,
.list-group-item-action:focus {
    background: var(--surface-hover);
    color: var(--text);
}

.list-item-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
}

.page-link {
    color: var(--brand-primary-hover);
}

.page-link:hover {
    color: var(--brand-primary-active);
    background: var(--brand-primary-soft);
    border-color: var(--border);
}

.page-item.active .page-link {
    color: #ffffff;
    background: var(--brand-primary);
    border-color: var(--brand-primary);
}

.dropdown-menu {
    border-color: var(--border);
    border-radius: 8px;
    box-shadow: 0 5px 18px rgba(40, 50, 42, 0.08);
}

.dropdown-item:active,
.dropdown-item.active {
    color: var(--nav-active-text);
    background: var(--nav-active);
}

.modal-content {
    border-color: var(--border);
    border-radius: 10px;
    box-shadow: 0 12px 40px rgba(40, 50, 42, 0.14);
}

.modal-header,
.modal-footer {
    border-color: var(--border);
}

.modal-title {
    font-size: 1.0625rem;
    font-weight: 600;
}

.progress-thin {
    height: 8px;
}


/* =========================================================
   14. Detail layouts
   Label/value pairs: <dl class="detail-grid"><div><dt/><dd/></div></dl>
   ========================================================= */

.detail-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
    gap: var(--space-4) var(--space-6);
    margin: 0;
}

.detail-grid dt {
    color: var(--muted);
    font-size: 0.8125rem;
    font-weight: 500;
}

.detail-grid dd {
    margin: 0.2rem 0 0;
    color: var(--text);
}

.detail-grid .detail-grid__full {
    grid-column: 1 / -1;
}


/* =========================================================
   15. Supervisor dashboard
   Amber: action needed. Green: nothing currently needed (not a
   clinical signal). Red: overdue only.
   ========================================================= */

.dash-empty {
    padding: 28px 24px;
}

a.dash-action {
    color: var(--text);
    text-decoration: none;
    border-top: 3px solid var(--border);
    transition: box-shadow 0.12s ease, border-color 0.12s ease;
}

a.dash-action:hover {
    box-shadow: 0 2px 8px rgba(48, 54, 48, 0.12);
}

a.dash-action.dash-action--attention {
    border-top-color: var(--status-pending-border);
}

a.dash-action.dash-action--urgent {
    border-top-color: var(--status-action-border);
}

.dash-action .card-body {
    display: flex;
    flex-direction: column;
}

.dash-action__label {
    color: var(--muted);
    font-size: 0.85rem;
    font-weight: 600;
}

.dash-action__count {
    color: var(--heading);
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.15;
}

.dash-action__empty {
    margin-top: 0.4rem;
    color: var(--muted);
}

.dash-action__detail {
    margin-top: 0.15rem;
    font-size: 0.875rem;
    line-height: 1.35;
}

.dash-action__count + .dash-action__detail {
    margin-top: 0.25rem;
}

.dash-action__go {
    margin-top: auto;
    padding-top: 0.75rem;
    color: var(--brand-primary-hover);
    font-size: 0.85rem;
    font-weight: 600;
}

a.dash-action__go {
    text-decoration: none;
}

a.dash-action__go:hover {
    text-decoration: underline;
}

.dash-progress {
    display: block;
    width: 100%;
    height: 6px;
    border: 0;
    border-radius: 3px;
    background: var(--border-light);
    appearance: none;
    overflow: hidden;
}

.dash-progress::-webkit-progress-bar {
    background: var(--border-light);
}

.dash-progress::-webkit-progress-value {
    background: var(--brand-primary);
}

.dash-progress::-moz-progress-bar {
    background: var(--brand-primary);
}

.dash-queue__heading {
    padding: 12px 16px 6px;
    border-top: 1px solid var(--border-light);
    color: var(--muted);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.dash-queue__heading:first-child {
    border-top: 0;
}

.dash-queue__more {
    display: block;
    padding: 8px 16px 12px;
    color: var(--brand-primary-hover);
    font-size: 0.85rem;
    font-weight: 600;
    text-decoration: none;
}

/* Needs Your Action: a plain card holding several links. */
.dash-needs {
    border-top: 3px solid var(--border);
}

.dash-needs.dash-action--attention {
    border-top-color: var(--status-pending-border);
    background: #fffaf2;
}

.dash-needs.dash-action--urgent {
    border-top-color: var(--status-action-border);
}

.dash-needs.dash-action--clear {
    border-top-color: var(--status-complete-border);
}

.dash-needs h2.dash-action__label {
    margin: 0;
}

.dash-needs__total {
    margin-top: 0.1rem;
    color: var(--heading);
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.2;
}

.dash-needs__clear {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-top: 0.35rem;
    color: var(--status-complete-text);
    font-size: 1.1rem;
    font-weight: 600;
}

.dash-needs__check {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.4rem;
    height: 1.4rem;
    border: 1px solid var(--status-complete-border);
    border-radius: 3px;
    background: var(--status-complete-bg);
    font-size: 0.85rem;
}

.dash-needs__list {
    margin: 0.5rem 0 0;
    padding: 0;
    list-style: none;
}

.dash-needs__list li + li {
    border-top: 1px solid var(--border-light);
}

.dash-needs__item {
    display: block;
    padding: 0.3rem 0;
    color: var(--text);
    line-height: 1.3;
    text-decoration: none;
}

.dash-needs__item:hover .dash-needs__name {
    text-decoration: underline;
}

.dash-needs__name {
    display: block;
    color: var(--heading);
    font-size: 0.875rem;
    font-weight: 600;
}

.dash-needs__what {
    display: block;
    overflow: hidden;
    color: var(--status-pending-text);
    font-size: 0.8125rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Supervisee table: full width; scrolls sideways when the screen
   is too narrow instead of dropping columns. position: relative
   keeps the row-link overlay inside the scroll container. */
.dash-table-wrap {
    position: relative;
    overflow-x: auto;
    overflow-y: hidden;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-card);
}

.dash-table {
    width: 100%;
    min-width: 1180px;
    border-collapse: collapse;
    font-size: 0.9375rem;
}

.dash-table th {
    padding: 12px 14px;
    background: var(--surface-soft);
    border-bottom: 1px solid var(--border);
    color: var(--nav-text);
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.25;
    text-align: left;
    vertical-align: bottom;
    white-space: nowrap;
}

.dash-table td {
    padding: 16px 14px;
    border-bottom: 1px solid var(--border-light);
    vertical-align: middle;
}

.dash-table tbody tr:last-child td {
    border-bottom: 0;
}

.dash-table th:first-child,
.dash-table td:first-child {
    padding-left: 20px;
}

.dash-table .dash-table__num {
    text-align: center;
    white-space: nowrap;
}

.dash-table .dash-table__chev {
    width: 32px;
    padding-right: 16px;
    color: var(--muted);
    font-size: 1.35rem;
    text-align: right;
}

/* The whole row opens the supervisee: the name link's overlay
   covers the row; count links sit above it. */
.dash-row {
    position: relative;
    transition: background-color 0.12s ease;
}

.dash-row:hover,
.dash-row:focus-within {
    background: var(--surface-hover);
}

.dash-row:hover .dash-table__chev {
    color: var(--brand-primary-hover);
}

.dash-row__link {
    color: var(--heading);
    font-size: 1rem;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}

.dash-row__link::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
}

.dash-row__link:hover,
.dash-row__link:focus-visible {
    text-decoration: underline;
    outline: none;
}

.dash-row:has(.dash-row__link:focus-visible) {
    outline: 2px solid var(--brand-primary);
    outline-offset: -2px;
}

.dash-row__sub {
    margin-top: 2px;
    color: var(--muted);
    font-size: 0.8125rem;
    line-height: 1.3;
    white-space: nowrap;
}

/* Status text keeps its colour over the row/list item defaults. */
.dash-row__sub.dash-text-pending {
    color: var(--status-pending-text);
}

.dash-row__sub.dash-text-urgent,
.dash-needs__what.dash-text-urgent {
    color: var(--status-action-text);
}

/* Links layered above a stretched card/row link stay clickable. */
a.dash-chip,
.dash-row a.dash-count,
.dash-row a.dash-chip {
    position: relative;
    z-index: 2;
}

.dash-meter {
    min-width: 220px;
}

.dash-meter + .dash-meter {
    margin-top: 10px;
}

.dash-meter__line {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    font-size: 0.8125rem;
    line-height: 1.3;
}

.dash-meter__label {
    color: var(--muted);
    white-space: nowrap;
}

.dash-meter__value {
    color: var(--heading);
    font-weight: 600;
    white-space: nowrap;
}

.dash-meter .dash-progress {
    height: 8px;
    margin-top: 4px;
}


/* =========================================================
   16. Account pages
   ========================================================= */

.auth-shell {
    min-height: 75vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.auth-card {
    width: 100%;
    max-width: 27rem;
}

.auth-brand {
    margin-bottom: var(--space-6);
    text-align: center;
}

.auth-logo {
    max-height: 125px;
}

.auth-org {
    margin-top: var(--space-2);
    color: var(--heading);
    font-size: 1.125rem;
    font-weight: 500;
}


/* =========================================================
   16b. Supervisee workflow
   Modal forms, derived values, actionable statuses and the
   compact dashboard summary. Reuses section 8 colours.
   ========================================================= */

/* Shared modal / page form spacing. */
.modal-form .modal-body {
    padding: var(--space-5) var(--space-6);
}

.modal-form .modal-footer {
    gap: var(--space-2);
}

.modal-form .modal-footer > * {
    margin: 0;
}

.modal-form fieldset > legend {
    float: none;
    width: auto;
    font-size: 0.875rem;
}

/* One-line helper text under a field. */
.form-hint {
    margin-top: 0.3rem;
    color: var(--muted);
    font-size: 0.8125rem;
    line-height: 1.35;
}

/* A value computed by the system, shown read-only in a form. */
.derived-value {
    display: flex;
    align-items: center;
    min-height: calc(1.5em + 0.75rem + 2px);
    padding: 0.375rem 0.75rem;
    border: 1px dashed var(--border-input);
    border-radius: var(--radius);
    background: var(--surface-soft);
    color: var(--heading);
    font-weight: 600;
}

.derived-value--empty {
    color: var(--muted);
    font-weight: 400;
}

/* A status that is also the way to resolve it. */
a.status-link {
    cursor: pointer;
    text-decoration: none;
}

a.status-link::after {
    content: "\2192";
    font-weight: 700;
}

a.status-link:hover,
a.status-link:focus-visible {
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* Inline task rows inside the Add Session form. */
.inline-tasks {
    margin-top: var(--space-2);
    padding-top: var(--space-3);
    border-top: 1px solid var(--border-light);
}

.inline-tasks__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    margin-bottom: var(--space-2);
}

.inline-task {
    padding: var(--space-2) 0;
}

.inline-task + .inline-task {
    border-top: 1px solid var(--border-light);
}

.inline-task__remove {
    display: flex;
    align-items: flex-end;
    align-self: stretch;
    justify-content: flex-end;
}

/* Flat label/value columns separated by dividers. */
.summary-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin: 0;
}

.summary-grid > div {
    padding: 0 var(--space-4);
}

.summary-grid > div:first-child {
    padding-left: 0;
}

.summary-grid > div + div {
    border-left: 1px solid var(--border-light);
}

.summary-grid dt {
    color: var(--muted);
    font-size: 0.8125rem;
    font-weight: 500;
}

.summary-grid dd {
    margin: 0.15rem 0 0;
    color: var(--heading);
    font-weight: 600;
}

@media (max-width: 767.98px) {
    .summary-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--space-3) 0;
    }

    .summary-grid > div:nth-child(odd) {
        padding-left: 0;
        border-left: 0;
    }
}

.summary-grid__note {
    display: block;
    margin-top: 0.15rem;
    color: var(--muted);
    font-size: 0.8125rem;
    font-weight: 400;
}

/* Labelled progress rows in a dashboard panel. */
.progress-list {
    display: grid;
    gap: var(--space-3);
}

.progress-list__head {
    display: flex;
    justify-content: space-between;
    gap: var(--space-2);
    margin-bottom: 0.3rem;
    font-size: 0.875rem;
}

.dash-progress--lg {
    height: 8px;
}

/* Quiet confirmation when a requirement is met. */
.compliance-note {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-bottom: var(--space-section);
    color: var(--status-complete-text);
    font-size: 0.875rem;
    font-weight: 500;
}

/* Compact search sitting beside a list's view switch. */
.list-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2) var(--space-4);
    margin-bottom: var(--space-3);
}

.list-toolbar .view-switch {
    margin-bottom: 0;
}

.utility-search {
    display: flex;
    gap: var(--space-2);
    width: 100%;
    max-width: 22rem;
}

.utility-search .form-control {
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
    font-size: 0.875rem;
}

/* De-emphasised history section. */
.history-section .card-title {
    color: var(--muted);
}

.history-section .table {
    color: var(--muted);
    font-size: 0.875rem;
}

/* Target of an in-page deep link. */
.deep-link-target:target {
    scroll-margin-top: 5rem;
    outline: 2px solid var(--status-pending-border);
    outline-offset: 4px;
    border-radius: var(--radius-card);
}

.back-link {
    display: inline-block;
    margin-bottom: var(--space-2);
    color: var(--brand-primary-hover);
    font-size: 0.875rem;
    font-weight: 600;
    text-decoration: none;
}

.back-link:hover {
    text-decoration: underline;
}


/* =========================================================
   16c. Supervisor workspace primitives
   Dense operational tables, record headers and detail
   sections. Rectangular, flat, no pills or gradients.
   ========================================================= */

/* Compact rows for 1080p work lists. */
.table-dense > :not(caption) > * > * {
    padding: 0.35rem 0.5rem;
    font-size: 0.875rem;
}

.table-dense > thead > tr > th {
    font-size: 0.78rem;
    vertical-align: bottom;
}

/* Two-line column header: name, then a quiet qualifier. */
.th-2l {
    line-height: 1.2;
}

.th-2l small {
    display: block;
    color: var(--muted);
    font-size: 0.72rem;
    font-weight: 500;
}

/* Record header: identity | key dates | supervisors. */
.record-header {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 2fr) minmax(0, 1.2fr);
    gap: var(--space-4) var(--space-6);
    margin-bottom: var(--space-4);
    padding: var(--space-4) var(--space-5);
    border: 1px solid var(--border);
    border-radius: var(--radius-card);
    background: var(--surface);
}

.record-header__identity h1 {
    margin: 0;
    font-size: 1.35rem;
}

.record-header__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-top: var(--space-2);
}

/* Label-over-value grid for key dates and metadata. */
.meta-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr));
    gap: var(--space-2) var(--space-4);
    margin: 0;
}

.meta-grid dt {
    color: var(--muted);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.meta-grid dd {
    margin: 0;
    font-size: 0.9rem;
    font-weight: 600;
}

/* A labelled group of tasks (My / Supervisee / Shared / History). */
.task-group + .task-group {
    margin-top: var(--space-5);
}

.task-group__title {
    display: flex;
    align-items: baseline;
    gap: var(--space-2);
    margin: 0 0 var(--space-2);
    font-size: 0.95rem;
    font-weight: 700;
}

.task-group__count {
    color: var(--muted);
    font-size: 0.8rem;
    font-weight: 600;
}

/* Sections inside a large detail modal or detail page. */
.detail-section + .detail-section {
    margin-top: var(--space-4);
    padding-top: var(--space-4);
    border-top: 1px solid var(--border);
}

.detail-section__title {
    margin: 0 0 var(--space-2);
    color: var(--muted);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

/* Dashboard task card: three labelled counts, no total. */
.dash-tasks {
    display: grid;
    gap: 2px;
    margin: var(--space-1) 0 var(--space-2);
}

.dash-tasks > div {
    display: flex;
    justify-content: space-between;
    gap: var(--space-3);
}

.dash-tasks dt {
    color: var(--muted);
    font-size: 0.85rem;
    font-weight: 600;
}

.dash-tasks dd {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

/* Five summary figures on a record page. */
@media (min-width: 992px) {
    .summary-grid--5 {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }
}

/* Per-tab toolbar: filter on the left, add actions on the right. */
.tab-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2) var(--space-3);
    margin: var(--space-3) 0;
}

.tab-toolbar__search {
    flex: 1 1 22rem;
    max-width: 38rem;
}

.tab-toolbar__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

@media (max-width: 991.98px) {
    .record-header {
        grid-template-columns: minmax(0, 1fr);
    }
}


/* =========================================================
   17. Responsive
   ========================================================= */

@media (max-width: 991.98px) {
    .app-sidebar,
    .app-topbar {
        display: none;
    }

    .app-main {
        width: 100%;
        margin-left: 0;
    }

    .mobile-header {
        position: sticky;
        top: 0;
        z-index: 900;
        height: 56px;
        display: flex;
        align-items: center;
        gap: 16px;
        padding: 0 18px;
        background: var(--topbar-bg);
        border-bottom: 1px solid var(--border);
    }

    .app-content {
        padding: 22px 18px 48px;
    }
}

@media (max-width: 575.98px) {
    :root {
        --card-pad-x: 1rem;
        --card-pad-y: 1rem;
    }

    .app-content {
        padding: 18px 12px 40px;
    }

    .page-header__actions {
        width: 100%;
    }
}


/* =========================================================
   18. DEVELOPMENT-ONLY identity switcher
   Deliberately unlike production navigation.
   ========================================================= */

.dev-switcher {
    flex-shrink: 0;
    margin: auto 10px 10px;
    padding: 8px 10px 10px;
    border: 2px dashed #b4530a;
    border-radius: 6px;
    background: #fff4e0;
    color: #6b3200;
    font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
    font-size: 11px;
}

.dev-switcher--standalone {
    max-width: 430px;
    margin: 24px auto 0;
}

.dev-switcher__title {
    font-weight: 700;
    letter-spacing: 0.08em;
}

.dev-switcher__current {
    margin: 2px 0 6px;
    overflow-wrap: anywhere;
}

.dev-switcher__buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.dev-switcher__button {
    padding: 2px 6px;
    border: 1px solid #b4530a;
    border-radius: 3px;
    background: transparent;
    color: #6b3200;
    font: inherit;
    cursor: pointer;
}

.dev-switcher__button:hover,
.dev-switcher__button:focus-visible {
    background: #ffe3b8;
    outline: 2px solid #b4530a;
    outline-offset: 1px;
}

.dev-switcher__button.is-current {
    background: #b4530a;
    color: #ffffff;
}