/*
 * GMDA-GCMS Design System
 * ------------------------------------------------------------------
 * A restrained, government/enterprise-appropriate visual layer on top
 * of Bootstrap 5 (kept for grid/utilities/JS components — tabs, collapse,
 * dropdowns). This file overrides Bootstrap's defaults via CSS variables
 * plus a small set of GMDA-prefixed component classes; it does not
 * reimplement layout primitives Bootstrap already provides.
 *
 * Token scale: colors -> typography -> spacing -> radius -> shadow,
 * then components in the order they appear in the app shell.
 */

:root {
    /* --- Brand --- */
    --gmda-primary: #1b3a5c;
    --gmda-primary-dark: #10253a;
    --gmda-primary-light: #2c5680;
    --gmda-primary-tint: #eaf0f6;
    --gmda-primary-tint-strong: #dbe6f1;

    /* --- Accent (used sparingly: focus rings, highlights, links-on-dark) --- */
    --gmda-accent: #0d7d8c;
    --gmda-accent-tint: #e3f4f5;

    /* --- Neutrals --- */
    --gmda-gray-50: #f8f9fb;
    --gmda-gray-100: #eef0f3;
    --gmda-gray-200: #e2e5ea;
    --gmda-gray-300: #cbd1d9;
    --gmda-gray-400: #9aa4b2;
    --gmda-gray-500: #6b7684;
    --gmda-gray-600: #4b5563;
    --gmda-gray-700: #374151;
    --gmda-gray-800: #1f2937;
    --gmda-gray-900: #101828;

    /* --- Status palette (maps to case_statuses.color_code — data-driven, not hard-coded per status) --- */
    --gmda-status-grey-bg: #eef0f3;
    --gmda-status-grey-fg: #4b5563;
    --gmda-status-blue-bg: #e3edf9;
    --gmda-status-blue-fg: #1d4e89;
    --gmda-status-orange-bg: #fbedde;
    --gmda-status-orange-fg: #9a5b12;
    --gmda-status-yellow-bg: #fdf3d7;
    --gmda-status-yellow-fg: #8a6408;
    --gmda-status-green-bg: #e3f2e7;
    --gmda-status-green-fg: #196c37;
    --gmda-status-red-bg: #fbe7e7;
    --gmda-status-red-fg: #a32828;
    --gmda-status-dark-bg: #e5e7eb;
    --gmda-status-dark-fg: #1f2937;

    /* --- Typography --- */
    --gmda-font-sans:
        -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --gmda-fs-xs: 0.75rem;
    --gmda-fs-sm: 0.8125rem;
    --gmda-fs-base: 0.875rem;
    --gmda-fs-md: 1rem;
    --gmda-fs-lg: 1.125rem;
    --gmda-fs-xl: 1.375rem;
    --gmda-fs-2xl: 1.875rem;
    --gmda-fs-3xl: 2.25rem;

    /* --- Spacing (4px base) --- */
    --gmda-space-1: 0.25rem;
    --gmda-space-2: 0.5rem;
    --gmda-space-3: 0.75rem;
    --gmda-space-4: 1rem;
    --gmda-space-5: 1.5rem;
    --gmda-space-6: 2rem;
    --gmda-space-7: 2.5rem;
    --gmda-space-8: 3rem;

    /* --- Radius / shadow — still restrained (a government workflow tool, not a
       consumer app) but with enough softness/elevation to read as current rather
       than dated: layered shadows (a tight contact shadow + a diffuse ambient one)
       instead of a single flat line, and a slightly deeper radius scale. --- */
    --gmda-radius-sm: 6px;
    --gmda-radius-md: 10px;
    --gmda-radius-lg: 14px;
    --gmda-radius-xl: 20px;
    --gmda-shadow-xs: 0 1px 2px rgba(16, 24, 40, 0.05);
    --gmda-shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.04), 0 2px 6px rgba(16, 24, 40, 0.05);
    --gmda-shadow-md: 0 2px 6px rgba(16, 24, 40, 0.05), 0 8px 20px rgba(16, 24, 40, 0.08);
    --gmda-shadow-lg: 0 8px 16px rgba(16, 24, 40, 0.06), 0 20px 48px rgba(16, 24, 40, 0.14);
    --gmda-ease: cubic-bezier(0.2, 0.8, 0.2, 1);

    /* Bootstrap variable overrides so its own components (buttons, forms,
       tabs, dropdowns) inherit the palette without per-component overrides */
    --bs-primary: var(--gmda-primary);
    --bs-primary-rgb: 27, 58, 92;
    --bs-body-font-family: var(--gmda-font-sans);
    --bs-body-color: var(--gmda-gray-800);
    --bs-body-font-size: var(--gmda-fs-base);
    --bs-border-color: var(--gmda-gray-200);
    --bs-link-color: var(--gmda-primary);
    --bs-link-hover-color: var(--gmda-primary-dark);
}

body {
    background-color: var(--gmda-gray-50);
    font-family: var(--gmda-font-sans);
    color: var(--gmda-gray-800);
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
    font-weight: 600;
    color: var(--gmda-gray-900);
    letter-spacing: -0.01em;
}

a {
    text-decoration: none;
    transition: color 0.15s var(--gmda-ease);
}
a:hover {
    text-decoration: underline;
}

::selection {
    background: var(--gmda-primary-tint-strong);
    color: var(--gmda-primary-dark);
}

/* ------------------------------------------------------------------ */
/* App shell                                                          */
/* ------------------------------------------------------------------ */

.gcms-topbar {
    background: linear-gradient(155deg, var(--gmda-primary) 0%, var(--gmda-primary-dark) 130%);
    height: 60px;
    padding: 0 var(--gmda-space-5);
    display: flex;
    align-items: center;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06) inset, 0 4px 16px rgba(9, 17, 27, 0.18);
    position: sticky;
    top: 0;
    z-index: 1030;
}

.gcms-brand {
    display: flex;
    align-items: center;
    gap: var(--gmda-space-2);
    color: #fff;
    font-weight: 700;
    font-size: var(--gmda-fs-lg);
    letter-spacing: 0.2px;
    white-space: nowrap;
}
.gcms-brand:hover {
    text-decoration: none;
    color: #fff;
}
.gcms-brand small {
    display: block;
    font-weight: 400;
    font-size: 0.6875rem;
    color: rgba(255, 255, 255, 0.72);
    letter-spacing: 0.3px;
}
.gcms-brand-logo {
    height: 30px;
    width: auto;
    flex-shrink: 0;
    display: block;
    background: #fff;
    border-radius: 5px;
    padding: 3px 5px;
}

.gcms-topbar-search {
    flex: 1 1 auto;
    max-width: 420px;
    margin-left: var(--gmda-space-6);
}
.gcms-topbar-search input {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: var(--gmda-radius-md);
    color: #fff;
    font-size: var(--gmda-fs-sm);
    transition: background-color 0.15s var(--gmda-ease), border-color 0.15s var(--gmda-ease), box-shadow 0.15s var(--gmda-ease);
}
.gcms-topbar-search input::placeholder {
    color: rgba(255, 255, 255, 0.65);
}
.gcms-topbar-search input:hover {
    background: rgba(255, 255, 255, 0.14);
}
.gcms-topbar-search input:focus {
    background: #fff;
    color: var(--gmda-gray-900);
    border-color: #fff;
    box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.2);
}
.gcms-topbar-search input:focus::placeholder {
    color: var(--gmda-gray-400);
}

.gcms-topbar-actions {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: var(--gmda-space-1);
}

.gcms-icon-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: var(--gmda-radius-md);
    color: rgba(255, 255, 255, 0.85);
    background: transparent;
    border: none;
    transition: background-color 0.15s var(--gmda-ease), color 0.15s var(--gmda-ease);
}
.gcms-icon-btn:hover {
    background: rgba(255, 255, 255, 0.14);
    color: #fff;
    text-decoration: none;
}
.gcms-icon-btn .gcms-icon {
    width: 19px;
    height: 19px;
}
.gcms-icon-btn__badge {
    position: absolute;
    top: 2px;
    right: 2px;
    min-width: 16px;
    height: 16px;
    padding: 0 3px;
    border-radius: 999px;
    background: #d64545;
    color: #fff;
    font-size: 0.625rem;
    font-weight: 700;
    line-height: 16px;
    text-align: center;
    border: 1.5px solid var(--gmda-primary);
}

.gcms-user-menu {
    display: flex;
    align-items: center;
    gap: var(--gmda-space-2);
    padding: var(--gmda-space-1) var(--gmda-space-2);
    border-radius: var(--gmda-radius-md);
    color: #fff;
    margin-left: var(--gmda-space-2);
    transition: background-color 0.15s var(--gmda-ease);
}
.gcms-user-menu:hover {
    background: rgba(255, 255, 255, 0.12);
    text-decoration: none;
    color: #fff;
}
.gcms-user-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.16);
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.28) inset;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--gmda-fs-xs);
    font-weight: 700;
    flex-shrink: 0;
}
.gcms-user-menu-name {
    font-size: var(--gmda-fs-sm);
    line-height: 1.1;
}
.gcms-user-menu-role {
    font-size: 0.6875rem;
    color: rgba(255, 255, 255, 0.65);
    line-height: 1.1;
}

/* --- Sidebar --- */

.gcms-shell {
    min-height: calc(100vh - 56px);
}

.gcms-sidebar {
    width: 252px;
    flex-shrink: 0;
    background: #fff;
    border-right: 1px solid var(--gmda-gray-200);
    padding: var(--gmda-space-4) var(--gmda-space-3);
    transition: width 0.15s var(--gmda-ease);
}
.gcms-sidebar-group {
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--gmda-gray-400);
    padding: var(--gmda-space-4) var(--gmda-space-3) var(--gmda-space-1);
}
.gcms-sidebar-group:first-child {
    padding-top: var(--gmda-space-1);
}

.gcms-nav-link {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--gmda-space-3);
    padding: var(--gmda-space-2) var(--gmda-space-3);
    border-radius: var(--gmda-radius-md);
    color: var(--gmda-gray-700);
    font-size: var(--gmda-fs-base);
    font-weight: 500;
    margin-bottom: 2px;
    transition: background-color 0.15s var(--gmda-ease), color 0.15s var(--gmda-ease);
}
.gcms-nav-link:hover {
    background: var(--gmda-gray-100);
    color: var(--gmda-gray-900);
    text-decoration: none;
}
.gcms-nav-link.active {
    background: var(--gmda-primary-tint);
    color: var(--gmda-primary);
    font-weight: 600;
}
.gcms-nav-link.active::before {
    content: "";
    position: absolute;
    left: -12px;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 18px;
    border-radius: 0 3px 3px 0;
    background: var(--gmda-primary);
}
.gcms-nav-link .gcms-icon {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    color: var(--gmda-gray-400);
    transition: color 0.15s var(--gmda-ease);
}
.gcms-nav-link:hover .gcms-icon,
.gcms-nav-link.active .gcms-icon {
    color: currentColor;
}

/* --- Page header / breadcrumb --- */

.gcms-breadcrumb {
    font-size: var(--gmda-fs-sm);
    color: var(--gmda-gray-500);
    margin-bottom: var(--gmda-space-2);
}
.gcms-breadcrumb a {
    color: var(--gmda-gray-500);
}
.gcms-breadcrumb a:hover {
    color: var(--gmda-primary);
}
.gcms-breadcrumb .sep {
    margin: 0 var(--gmda-space-1);
    color: var(--gmda-gray-300);
}

.gcms-page-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--gmda-space-4);
    margin-bottom: var(--gmda-space-6);
    flex-wrap: wrap;
}
.gcms-page-title {
    font-size: var(--gmda-fs-3xl);
    font-weight: 700;
    color: var(--gmda-gray-900);
    margin: 0;
    letter-spacing: -0.02em;
}
.gcms-page-subtitle {
    color: var(--gmda-gray-500);
    font-size: var(--gmda-fs-sm);
    margin-top: 4px;
}
.gcms-page-actions {
    display: flex;
    gap: var(--gmda-space-2);
    flex-shrink: 0;
    flex-wrap: wrap;
}

/* ------------------------------------------------------------------ */
/* Components                                                          */
/* ------------------------------------------------------------------ */

.gcms-icon {
    width: 16px;
    height: 16px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    vertical-align: -0.15em;
}

/* Cards */
.card {
    border: 1px solid var(--gmda-gray-200);
    border-radius: var(--gmda-radius-lg);
    box-shadow: var(--gmda-shadow-sm);
}
.card-header {
    background: #fff;
    border-bottom: 1px solid var(--gmda-gray-200);
    font-weight: 600;
    font-size: var(--gmda-fs-md);
    color: var(--gmda-gray-900);
    padding: var(--gmda-space-4);
}

/* Stat cards */
.gcms-stat-card {
    display: flex;
    align-items: center;
    gap: var(--gmda-space-3);
    background: #fff;
    border: 1px solid var(--gmda-gray-200);
    border-radius: var(--gmda-radius-lg);
    padding: var(--gmda-space-4);
    box-shadow: var(--gmda-shadow-sm);
    height: 100%;
    transition: box-shadow 0.2s var(--gmda-ease), transform 0.2s var(--gmda-ease), border-color 0.2s var(--gmda-ease);
}
a:has(> .gcms-stat-card) {
    display: block;
}
a:hover > .gcms-stat-card {
    box-shadow: var(--gmda-shadow-md);
    transform: translateY(-2px);
    border-color: var(--gmda-gray-300);
}
.gcms-stat-card__icon {
    width: 46px;
    height: 46px;
    border-radius: var(--gmda-radius-md);
    background: var(--gmda-primary-tint);
    color: var(--gmda-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.gcms-stat-card__icon .gcms-icon {
    width: 22px;
    height: 22px;
}
.gcms-stat-card__value {
    font-size: var(--gmda-fs-2xl);
    font-weight: 700;
    color: var(--gmda-gray-900);
    line-height: 1.1;
    letter-spacing: -0.02em;
}
.gcms-stat-card__label {
    font-size: var(--gmda-fs-sm);
    color: var(--gmda-gray-500);
    margin-top: 3px;
}
.gcms-stat-card--accent .gcms-stat-card__icon {
    background: #fff;
    color: var(--gmda-primary);
}
.gcms-stat-card--accent {
    background: var(--gmda-primary-tint);
    border-color: var(--gmda-primary-light);
}

/* Status badges */
.badge-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: var(--gmda-fs-xs);
    font-weight: 700;
    padding: 5px 11px;
    border-radius: 999px;
    line-height: 1.4;
    letter-spacing: 0.01em;
}
.badge-status::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    flex-shrink: 0;
}
.badge-status .gcms-icon {
    width: 12px;
    height: 12px;
}
.status-grey { background: var(--gmda-status-grey-bg); color: var(--gmda-status-grey-fg); }
.status-blue { background: var(--gmda-status-blue-bg); color: var(--gmda-status-blue-fg); }
.status-orange { background: var(--gmda-status-orange-bg); color: var(--gmda-status-orange-fg); }
.status-yellow { background: var(--gmda-status-yellow-bg); color: var(--gmda-status-yellow-fg); }
.status-green { background: var(--gmda-status-green-bg); color: var(--gmda-status-green-fg); }
.status-red { background: var(--gmda-status-red-bg); color: var(--gmda-status-red-fg); }
.status-dark { background: var(--gmda-status-dark-bg); color: var(--gmda-status-dark-fg); }

/* Aging indicator */
.gcms-aging {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: var(--gmda-fs-xs);
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 999px;
}
.gcms-aging--ok { background: var(--gmda-status-green-bg); color: var(--gmda-status-green-fg); }
.gcms-aging--watch { background: var(--gmda-status-yellow-bg); color: var(--gmda-status-yellow-fg); }
.gcms-aging--warn { background: var(--gmda-status-orange-bg); color: var(--gmda-status-orange-fg); }
.gcms-aging--overdue { background: var(--gmda-status-red-bg); color: var(--gmda-status-red-fg); }

/* Tables */
.gcms-table-card {
    background: #fff;
    border: 1px solid var(--gmda-gray-200);
    border-radius: var(--gmda-radius-lg);
    box-shadow: var(--gmda-shadow-sm);
    overflow: hidden;
}
.gcms-table-scroll {
    overflow-x: auto;
}
.table.gcms-table {
    margin-bottom: 0;
    font-size: var(--gmda-fs-base);
}
.gcms-table thead th {
    position: sticky;
    top: 0;
    z-index: 1;
    background: var(--gmda-gray-50);
    border-bottom: 1px solid var(--gmda-gray-200);
    color: var(--gmda-gray-600);
    font-size: var(--gmda-fs-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: var(--gmda-space-3) var(--gmda-space-4);
    white-space: nowrap;
}
.gcms-table tbody td {
    padding: var(--gmda-space-3) var(--gmda-space-4);
    vertical-align: middle;
    border-bottom: 1px solid var(--gmda-gray-100);
    color: var(--gmda-gray-800);
}
.gcms-table tbody tr:last-child td {
    border-bottom: none;
}
.gcms-table tbody tr {
    transition: background-color 0.1s var(--gmda-ease);
}
.gcms-table tbody tr:hover td {
    background: var(--gmda-gray-50);
}
.gcms-table a.gcms-case-link {
    font-weight: 700;
    color: var(--gmda-primary);
}
.gcms-table a.gcms-case-link:hover {
    color: var(--gmda-accent);
}

/* Filter panel + chips */
.gcms-filter-panel {
    background: #fff;
    border: 1px solid var(--gmda-gray-200);
    border-radius: var(--gmda-radius-lg);
    padding: var(--gmda-space-4);
    box-shadow: var(--gmda-shadow-sm);
}
.gcms-filter-panel .form-label {
    font-size: var(--gmda-fs-xs);
    font-weight: 600;
    color: var(--gmda-gray-600);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    margin-bottom: 4px;
}
.gcms-filter-chips {
    display: flex;
    flex-wrap: wrap;
    gap: var(--gmda-space-2);
    align-items: center;
}
.gcms-filter-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--gmda-primary-tint);
    color: var(--gmda-primary-dark);
    border: 1px solid var(--gmda-primary-tint-strong);
    border-radius: 999px;
    padding: 4px 8px 4px 12px;
    font-size: var(--gmda-fs-xs);
    font-weight: 600;
}
.gcms-filter-chip button {
    border: none;
    background: transparent;
    color: inherit;
    line-height: 1;
    padding: 2px;
    display: inline-flex;
    opacity: 0.7;
}
.gcms-filter-chip button:hover {
    opacity: 1;
}
.gcms-filter-clear {
    font-size: var(--gmda-fs-xs);
    color: var(--gmda-gray-500);
    font-weight: 600;
}

/* Empty / error states */
.gcms-empty-state {
    text-align: center;
    padding: var(--gmda-space-7) var(--gmda-space-4);
    color: var(--gmda-gray-500);
}
.gcms-empty-state .gcms-icon {
    width: 26px;
    height: 26px;
    color: var(--gmda-gray-400);
}
.gcms-empty-state__icon-wrap {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--gmda-gray-100);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto var(--gmda-space-3);
}
.gcms-empty-state__title {
    font-weight: 600;
    color: var(--gmda-gray-700);
    font-size: var(--gmda-fs-md);
    margin-bottom: 4px;
}
.gcms-empty-state__desc {
    font-size: var(--gmda-fs-sm);
}

/* Notifications */
.gcms-notification--unread {
    background: var(--gmda-primary-tint);
}

/* Notesheet */
.gcms-note {
    border: 1px solid var(--gmda-gray-200);
    border-left: 3px solid var(--gmda-primary-light);
    border-radius: var(--gmda-radius-md);
    padding: var(--gmda-space-4);
    background: #fff;
    margin-bottom: var(--gmda-space-3);
    box-shadow: var(--gmda-shadow-xs);
    transition: box-shadow 0.15s var(--gmda-ease);
}
.gcms-note:hover {
    box-shadow: var(--gmda-shadow-sm);
}
.gcms-note--amendment {
    border-left-color: var(--gmda-status-yellow-fg);
    background: #fffdf6;
}
.gcms-note__header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: var(--gmda-space-2);
}
.gcms-note__serial {
    font-weight: 700;
    color: var(--gmda-gray-900);
    font-size: var(--gmda-fs-md);
}
.gcms-note__timestamp {
    font-size: var(--gmda-fs-xs);
    color: var(--gmda-gray-500);
}
.gcms-note__meta {
    font-size: var(--gmda-fs-sm);
    color: var(--gmda-gray-600);
    margin-bottom: var(--gmda-space-2);
    display: flex;
    flex-wrap: wrap;
    gap: 6px 10px;
    align-items: center;
}
.gcms-note__author {
    font-weight: 600;
    color: var(--gmda-gray-800);
}
.gcms-note__text {
    white-space: pre-wrap;
    color: var(--gmda-gray-800);
    line-height: 1.6;
}
.gcms-note__footer {
    margin-top: var(--gmda-space-3);
    padding-top: var(--gmda-space-3);
    border-top: 1px dashed var(--gmda-gray-200);
    font-size: var(--gmda-fs-sm);
    display: flex;
    flex-wrap: wrap;
    gap: var(--gmda-space-4);
}

/* Assignment path */
.gcms-assignment-path {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0;
}
.gcms-assignment-node {
    background: var(--gmda-gray-100);
    border: 1px solid var(--gmda-gray-200);
    border-radius: var(--gmda-radius-md);
    padding: 7px 13px;
    font-size: var(--gmda-fs-sm);
    font-weight: 600;
    color: var(--gmda-gray-800);
}
.gcms-assignment-arrow {
    color: var(--gmda-gray-400);
    margin: 0 var(--gmda-space-2);
    display: inline-flex;
}

/* Info grid — label-over-value display used for read-only Case fields (Overview,
   Property/Location). Consistent rhythm instead of ad hoc row/col markup per page. */
.gcms-info-label {
    font-size: var(--gmda-fs-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--gmda-gray-400);
    margin-bottom: 3px;
}
.gcms-info-value {
    font-size: var(--gmda-fs-base);
    color: var(--gmda-gray-900);
    font-weight: 500;
}
.gcms-info-value--muted {
    color: var(--gmda-gray-400);
    font-weight: 400;
}

/* Case detail meta bar: status + current holder + age, directly under the title */
.gcms-case-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--gmda-space-3);
    padding: var(--gmda-space-3) var(--gmda-space-4);
    background: #fff;
    border: 1px solid var(--gmda-gray-200);
    border-radius: var(--gmda-radius-lg);
    box-shadow: var(--gmda-shadow-xs);
    margin-bottom: var(--gmda-space-5);
}
.gcms-case-meta__item {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: var(--gmda-fs-sm);
    color: var(--gmda-gray-600);
}
.gcms-case-meta__item .gcms-icon {
    width: 15px;
    height: 15px;
    color: var(--gmda-gray-400);
}
.gcms-case-meta__item strong {
    color: var(--gmda-gray-900);
    font-weight: 700;
}
.gcms-case-meta__sep {
    width: 1px;
    height: 18px;
    background: var(--gmda-gray-200);
}

/* Tabs (case detail) */
.gcms-tabs {
    border-bottom: 1px solid var(--gmda-gray-200);
    gap: var(--gmda-space-1);
}
/* Tabs carry the Case Received tint so the file's sections read as one group.
   The active tab inverts to the solid tone rather than relying on an underline. */
.gcms-tabs .nav-link {
    border: none;
    border-bottom: 2px solid transparent;
    background: var(--gmda-status-blue-bg);
    color: var(--gmda-status-blue-fg);
    font-weight: 600;
    font-size: var(--gmda-fs-base);
    padding: var(--gmda-space-3) var(--gmda-space-3);
    border-radius: var(--gmda-radius-sm) var(--gmda-radius-sm) 0 0;
    display: flex;
    align-items: center;
    gap: 7px;
    transition: color 0.15s var(--gmda-ease), border-color 0.15s var(--gmda-ease), background-color 0.15s var(--gmda-ease);
}
.gcms-tabs .nav-link:hover {
    color: var(--gmda-status-blue-fg);
    background: var(--gmda-primary-tint-strong);
    border-color: transparent;
}
.gcms-tabs .nav-link.active {
    color: #fff;
    border-color: var(--gmda-status-blue-fg);
    background: var(--gmda-status-blue-fg);
}
.gcms-tabs .badge {
    font-weight: 700;
    background: var(--gmda-gray-100) !important;
    color: var(--gmda-gray-600) !important;
    border: none !important;
}
.gcms-tabs .nav-link .badge {
    background: rgba(255, 255, 255, 0.72) !important;
    color: var(--gmda-status-blue-fg) !important;
}
.gcms-tabs .nav-link.active .badge {
    background: rgba(255, 255, 255, 0.9) !important;
    color: var(--gmda-status-blue-fg) !important;
}

/* Buttons */
.btn {
    border-radius: var(--gmda-radius-md);
    font-weight: 600;
    font-size: var(--gmda-fs-base);
    padding: 0.5rem 1rem;
    transition: background-color 0.15s var(--gmda-ease), border-color 0.15s var(--gmda-ease),
        color 0.15s var(--gmda-ease), box-shadow 0.15s var(--gmda-ease), transform 0.1s var(--gmda-ease);
}
.btn:active {
    transform: translateY(1px);
}
.btn-sm {
    padding: 0.3125rem 0.75rem;
    font-size: var(--gmda-fs-sm);
}
.btn-primary {
    background: var(--gmda-primary);
    border-color: var(--gmda-primary);
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05), 0 1px 0 rgba(255, 255, 255, 0.06) inset;
}
.btn-primary:hover,
.btn-primary:focus {
    background: var(--gmda-primary-dark);
    border-color: var(--gmda-primary-dark);
}
.btn-outline-primary {
    color: var(--gmda-primary);
    border-color: var(--gmda-primary-light);
    background: #fff;
}
.btn-outline-primary:hover {
    background: var(--gmda-primary);
    border-color: var(--gmda-primary);
}
.btn-outline-secondary {
    color: var(--gmda-gray-600);
    border-color: var(--gmda-gray-300);
    background: #fff;
}
.btn-outline-secondary:hover {
    background: var(--gmda-gray-100);
    border-color: var(--gmda-gray-400);
    color: var(--gmda-gray-900);
}

/* Forms */
.form-label {
    font-weight: 500;
    font-size: var(--gmda-fs-sm);
    color: var(--gmda-gray-700);
    margin-bottom: 4px;
}
.form-control,
.form-select {
    font-size: var(--gmda-fs-base);
    border-color: var(--gmda-gray-300);
    border-radius: var(--gmda-radius-md);
}
.form-control:focus,
.form-select:focus {
    border-color: var(--gmda-primary-light);
    box-shadow: 0 0 0 3px rgba(27, 58, 92, 0.12);
}
.gcms-required::after {
    content: " *";
    color: var(--gmda-status-red-fg);
}

/* Section card used across registration form */
.gcms-form-section {
    background: #fff;
    border: 1px solid var(--gmda-gray-200);
    border-radius: var(--gmda-radius-lg);
    box-shadow: var(--gmda-shadow-sm);
    margin-bottom: var(--gmda-space-4);
    overflow: hidden;
}
.gcms-form-section__header {
    display: flex;
    align-items: center;
    gap: var(--gmda-space-2);
    padding: var(--gmda-space-3) var(--gmda-space-4);
    background: var(--gmda-gray-50);
    border-bottom: 1px solid var(--gmda-gray-200);
    font-weight: 700;
    font-size: var(--gmda-fs-base);
    color: var(--gmda-gray-800);
}
.gcms-form-section__header .gcms-icon {
    color: var(--gmda-primary);
}
.gcms-form-section__body {
    padding: var(--gmda-space-5);
}
/* Action variant — visually distinct from read-only info cards: a Case whose next
   step is user-initiated (Forward / Add Notesheet) rather than just informational. */
.gcms-form-section--action {
    border-color: var(--gmda-primary-light);
}
.gcms-form-section--action .gcms-form-section__header {
    background: var(--gmda-primary-tint);
    border-bottom-color: var(--gmda-primary-tint-strong);
    color: var(--gmda-primary-dark);
}

/* Alerts: keep semantic colors but tone down borders */
.alert {
    border-radius: var(--gmda-radius-md);
    border: 1px solid transparent;
    font-size: var(--gmda-fs-base);
}

/* Sidebar collapse (desktop) */
.gcms-sidebar.is-collapsed {
    width: 68px;
}
.gcms-sidebar.is-collapsed .gcms-sidebar-group,
.gcms-sidebar.is-collapsed .gcms-nav-label {
    display: none;
}
.gcms-sidebar.is-collapsed .gcms-nav-link {
    justify-content: center;
    padding: var(--gmda-space-2);
}
.gcms-sidebar-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: var(--gmda-space-2);
    border: none;
    background: transparent;
    color: var(--gmda-gray-400);
    border-top: 1px solid var(--gmda-gray-200);
    margin-top: var(--gmda-space-3);
}
.gcms-sidebar-toggle:hover {
    color: var(--gmda-primary);
}

/* Login screen — now framed by the landing page's header/footer (see login.html,
   login-verify.html), so this fills the #main flex slot between them rather than
   claiming a full extra viewport height of its own. Background matches the
   homepage hero's light gradient (.lp-hero in landing.css) rather than its own
   dark navy treatment, so the two pages read as the same site. */
.gcms-login-page {
    flex: 1;
    min-height: 320px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(180deg, var(--gmda-primary-tint) 0%, #ffffff 78%);
    padding: var(--gmda-space-4);
}
.gcms-login-card {
    width: 100%;
    max-width: 400px;
    background: #fff;
    border-radius: var(--gmda-radius-xl);
    box-shadow: var(--gmda-shadow-lg);
    overflow: hidden;
}
.gcms-login-card__header {
    padding: var(--gmda-space-6) var(--gmda-space-5) var(--gmda-space-4);
    text-align: center;
}
.gcms-login-card__body {
    padding: 0 var(--gmda-space-5) var(--gmda-space-6);
}
.gcms-login-logo {
    height: 56px;
    width: auto;
    margin: 0 auto var(--gmda-space-3);
    display: block;
    border-radius: var(--gmda-radius-sm);
}

/* Compact footer for the authenticated shell — the full marketing footer lives
   only on the public landing page (home.html / fragments/landing.html). */
.gcms-compact-footer {
    margin-top: var(--gmda-space-6);
    padding-top: var(--gmda-space-4);
    border-top: 1px solid var(--gmda-gray-200);
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--gmda-space-2);
    font-size: var(--gmda-fs-xs);
    color: var(--gmda-gray-500);
}
.gcms-compact-footer strong {
    color: var(--gmda-gray-600);
    font-weight: 600;
}

/* Utility */
.gcms-text-muted-sm {
    color: var(--gmda-gray-500);
    font-size: var(--gmda-fs-sm);
}
.gcms-divider {
    border-top: 1px solid var(--gmda-gray-200);
    margin: var(--gmda-space-4) 0;
}

/* Calendar (month grid) */
.gcms-calendar-month-label {
    font-size: var(--gmda-fs-lg);
    font-weight: 600;
    color: var(--gmda-gray-700);
    margin-top: 2px;
}
.gcms-calendar-nav {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    background: var(--gmda-gray-50);
    border: 1px solid var(--gmda-gray-200);
    border-radius: var(--gmda-radius-md);
    padding: 3px;
}
.gcms-calendar-nav__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 34px;
    height: 34px;
    padding: 0 var(--gmda-space-3);
    border-radius: var(--gmda-radius-sm);
    color: var(--gmda-gray-600);
    text-decoration: none;
    font-size: var(--gmda-fs-sm);
    font-weight: 600;
    transition: background 0.15s var(--gmda-ease), color 0.15s var(--gmda-ease);
}
.gcms-calendar-nav__btn:hover {
    background: #fff;
    color: var(--gmda-primary);
    box-shadow: var(--gmda-shadow-xs);
}
.gcms-calendar-nav__btn--today {
    color: var(--gmda-primary);
}

.gcms-calendar-legend {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--gmda-space-2);
}
.gcms-calendar-legend__note {
    font-size: var(--gmda-fs-sm);
    color: var(--gmda-gray-500);
}

.gcms-calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    background: #fff;
    border: 1px solid var(--gmda-gray-100);
    border-radius: var(--gmda-radius-lg);
    overflow: hidden;
    box-shadow: var(--gmda-shadow-sm);
}
.gcms-calendar-head {
    padding: var(--gmda-space-3) var(--gmda-space-2);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    text-align: center;
    color: var(--gmda-gray-400);
    border-bottom: 1px solid var(--gmda-gray-100);
}
/* Sunday (1st, 8th... child) / Saturday (7th, 14th... child) columns, headers included —
   a subtle weekend tint, purely CSS, no extra markup needed. */
.gcms-calendar-grid > :nth-child(7n+1),
.gcms-calendar-grid > :nth-child(7n) {
    background: var(--gmda-gray-50);
}
.gcms-calendar-cell {
    position: relative;
    background: transparent;
    min-height: 112px;
    padding: var(--gmda-space-2);
    display: block;
    text-decoration: none;
    color: inherit;
    border-right: 1px solid var(--gmda-gray-100);
    border-bottom: 1px solid var(--gmda-gray-100);
    transition: background 0.15s var(--gmda-ease);
}
.gcms-calendar-grid > .gcms-calendar-cell:nth-child(7n) {
    border-right: none;
}
.gcms-calendar-cell:hover {
    background: var(--gmda-primary-tint);
}
.gcms-calendar-cell--outside {
    color: var(--gmda-gray-300);
}
.gcms-calendar-cell--outside .gcms-calendar-cell__date {
    color: var(--gmda-gray-300);
}
.gcms-calendar-cell.gcms-calendar-cell--today {
    background: var(--gmda-primary-tint);
}
.gcms-calendar-cell--selected {
    box-shadow: inset 0 0 0 2px var(--gmda-primary);
    border-radius: var(--gmda-radius-sm);
}
.gcms-calendar-cell__date {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    height: 24px;
    padding: 0 6px;
    font-size: var(--gmda-fs-sm);
    font-weight: 600;
    color: var(--gmda-gray-700);
    border-radius: 999px;
}
.gcms-calendar-cell__date--today {
    background: var(--gmda-primary);
    color: #fff;
}
.gcms-calendar-cell__events {
    display: flex;
    flex-direction: column;
    gap: 3px;
    margin-top: var(--gmda-space-2);
}
.gcms-calendar-event {
    display: inline-flex;
    max-width: 100%;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.5;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.gcms-calendar-event--grey { background: var(--gmda-status-grey-bg); color: var(--gmda-status-grey-fg); }
.gcms-calendar-event--blue { background: var(--gmda-status-blue-bg); color: var(--gmda-status-blue-fg); }
.gcms-calendar-event--orange { background: var(--gmda-status-orange-bg); color: var(--gmda-status-orange-fg); }
.gcms-calendar-event--yellow { background: var(--gmda-status-yellow-bg); color: var(--gmda-status-yellow-fg); }
.gcms-calendar-event--green { background: var(--gmda-status-green-bg); color: var(--gmda-status-green-fg); }
.gcms-calendar-event--red { background: var(--gmda-status-red-bg); color: var(--gmda-status-red-fg); }
.gcms-calendar-event--dark { background: var(--gmda-status-dark-bg); color: var(--gmda-status-dark-fg); }
.gcms-calendar-more {
    display: block;
    font-size: 11px;
    font-weight: 600;
    color: var(--gmda-gray-500);
    margin-top: 3px;
}

.gcms-calendar-view-tabs {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    background: var(--gmda-gray-50);
    border: 1px solid var(--gmda-gray-200);
    border-radius: var(--gmda-radius-md);
    padding: 3px;
}
.gcms-calendar-tab {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 34px;
    padding: 0 var(--gmda-space-3);
    border-radius: var(--gmda-radius-sm);
    color: var(--gmda-gray-600);
    text-decoration: none;
    font-size: var(--gmda-fs-sm);
    font-weight: 600;
    transition: background 0.15s var(--gmda-ease), color 0.15s var(--gmda-ease);
}
.gcms-calendar-tab:hover {
    color: var(--gmda-primary);
}
.gcms-calendar-tab.active {
    background: #fff;
    color: var(--gmda-primary);
    box-shadow: var(--gmda-shadow-xs);
}

.gcms-calendar-week-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: var(--gmda-space-3);
    align-items: start;
}
.gcms-calendar-week-day {
    background: #fff;
    border: 1px solid var(--gmda-gray-100);
    border-radius: var(--gmda-radius-lg);
    box-shadow: var(--gmda-shadow-sm);
    min-height: 220px;
    overflow: hidden;
}
.gcms-calendar-week-day--today {
    box-shadow: inset 0 0 0 2px var(--gmda-primary);
}
.gcms-calendar-week-day__head {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: var(--gmda-space-3) var(--gmda-space-2);
    text-decoration: none;
    color: inherit;
    border-bottom: 1px solid var(--gmda-gray-100);
    background: var(--gmda-gray-50);
}
.gcms-calendar-week-day__dow {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--gmda-gray-400);
}
.gcms-calendar-week-day__num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 26px;
    height: 26px;
    padding: 0 6px;
    font-size: var(--gmda-fs-md);
    font-weight: 700;
    color: var(--gmda-gray-700);
    border-radius: 999px;
}
.gcms-calendar-week-day__num--today {
    background: var(--gmda-primary);
    color: #fff;
}
.gcms-calendar-week-day__events {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: var(--gmda-space-2);
}
.gcms-calendar-event--block {
    display: block;
    width: 100%;
    text-align: left;
    text-decoration: none;
    box-sizing: border-box;
}
.gcms-calendar-week-day__empty {
    font-size: var(--gmda-fs-sm);
    color: var(--gmda-gray-300);
    padding: var(--gmda-space-1) var(--gmda-space-2);
}

/* ============================================================================
   ACCESSIBILITY FOUNDATIONS
   Previously absent entirely: no focus-visible ring, no reduced-motion guard,
   no screen-reader utility. WCAG 2.2 AA.
   ========================================================================= */

/* Skip link — first tabbable element, visible only once focused. */
.gcms-skip-link {
    position: absolute;
    left: var(--gmda-space-3);
    top: -100px;
    z-index: 2000;
    padding: var(--gmda-space-3) var(--gmda-space-4);
    background: #fff;
    color: var(--gmda-primary);
    font-weight: 700;
    font-size: var(--gmda-fs-base);
    border-radius: var(--gmda-radius-md);
    box-shadow: var(--gmda-shadow-lg);
    transition: top 0.15s var(--gmda-ease);
}
.gcms-skip-link:focus {
    top: var(--gmda-space-3);
}

/* Visually hidden but still announced by assistive technology. */
.gcms-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* One consistent, high-contrast focus ring across every interactive element.
   :focus-visible so a mouse click leaves no ring behind, while keyboard and
   assistive-tech navigation always does. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible,
.gcms-nav-link:focus-visible,
.gcms-icon-btn:focus-visible,
.gcms-calendar-cell:focus-visible,
.gcms-calendar-tab:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px #fff, 0 0 0 4.5px var(--gmda-primary-light);
    border-radius: var(--gmda-radius-sm);
}
/* On the dark topbar the white inner gap would vanish — invert it there. */
.gcms-topbar a:focus-visible,
.gcms-topbar button:focus-visible,
.gcms-topbar input:focus-visible,
.gcms-topbar .gcms-icon-btn:focus-visible,
.gcms-topbar .gcms-user-menu:focus-visible {
    box-shadow: 0 0 0 2px var(--gmda-primary-dark), 0 0 0 4.5px rgba(255, 255, 255, 0.85);
}

/* Respect the operating system "reduce motion" setting everywhere at once. */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ============================================================================
   DASHBOARD — attention band, aging distribution, activity
   ========================================================================= */

.gcms-section-label {
    display: flex;
    align-items: center;
    gap: var(--gmda-space-2);
    margin-bottom: var(--gmda-space-3);
}
.gcms-section-label__text {
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--gmda-gray-500);
}
.gcms-section-label__rule {
    flex-grow: 1;
    height: 1px;
    background: var(--gmda-gray-200);
}

/* "Needs your attention" cards — the answer to "what do I do now?" */
.gcms-attention {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    background: #fff;
    border: 1px solid var(--gmda-gray-200);
    border-left: 3px solid var(--gmda-gray-300);
    border-radius: var(--gmda-radius-lg);
    box-shadow: var(--gmda-shadow-sm);
    padding: 1.125rem;
    height: 100%;
    text-decoration: none;
    color: inherit;
    transition: box-shadow 0.2s var(--gmda-ease), transform 0.2s var(--gmda-ease);
}
.gcms-attention:hover {
    box-shadow: var(--gmda-shadow-md);
    transform: translateY(-1px);
    color: inherit;
}
.gcms-attention--critical { border-left-color: var(--gmda-status-red-fg); }
.gcms-attention--primary  { border-left-color: var(--gmda-primary-light); }
.gcms-attention--warn     { border-left-color: var(--gmda-status-yellow-fg); }

.gcms-attention__head {
    display: flex;
    align-items: center;
    gap: var(--gmda-space-2);
    font-weight: 700;
    font-size: var(--gmda-fs-sm);
}
.gcms-attention--critical .gcms-attention__head { color: var(--gmda-status-red-fg); }
.gcms-attention--primary  .gcms-attention__head { color: var(--gmda-primary); }
.gcms-attention--warn     .gcms-attention__head { color: var(--gmda-status-yellow-fg); }

.gcms-attention__row {
    display: flex;
    align-items: flex-end;
    gap: 0.6rem;
}
.gcms-attention__value {
    font-size: var(--gmda-fs-3xl);
    font-weight: 700;
    line-height: 1;
    color: var(--gmda-gray-900);
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
}
.gcms-attention__unit {
    color: var(--gmda-gray-500);
    font-size: var(--gmda-fs-sm);
    padding-bottom: 4px;
}
.gcms-attention__cta {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-weight: 600;
    font-size: var(--gmda-fs-sm);
    margin-top: auto;
}

/* File aging distribution — renders DashboardSummary.agingBuckets, which the
   service already computes on every dashboard load but never displayed. */
.gcms-aging-track {
    display: flex;
    height: 12px;
    border-radius: 999px;
    overflow: hidden;
    background: var(--gmda-gray-100);
    margin-bottom: var(--gmda-space-4);
}
.gcms-aging-seg { height: 100%; }
.gcms-aging-seg--1 { background: #3f8f5c; }
.gcms-aging-seg--2 { background: #5b9dd6; }
.gcms-aging-seg--3 { background: #e0a341; }
.gcms-aging-seg--4 { background: #d9822b; }
.gcms-aging-seg--5 { background: #c0392b; }

.gcms-aging-buckets {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: var(--gmda-space-3);
}
.gcms-aging-bucket {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    padding: 0.6rem 0.75rem;
    border-radius: var(--gmda-radius-md);
    background: var(--gmda-gray-50);
    border: 1px solid var(--gmda-gray-100);
    text-decoration: none;
    transition: border-color 0.15s var(--gmda-ease), background 0.15s var(--gmda-ease);
}
.gcms-aging-bucket:hover {
    border-color: var(--gmda-primary-tint-strong);
    background: var(--gmda-primary-tint);
}
.gcms-aging-bucket--critical {
    background: #fdf1f1;
    border-color: #f3d5d5;
}
.gcms-aging-bucket--critical:hover {
    background: #fbe7e7;
    border-color: #eabfbf;
}
.gcms-aging-bucket__label {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: var(--gmda-fs-xs);
    font-weight: 600;
    color: var(--gmda-gray-600);
}
.gcms-aging-bucket--critical .gcms-aging-bucket__label {
    color: var(--gmda-status-red-fg);
    font-weight: 700;
}
.gcms-aging-bucket__swatch {
    width: 8px;
    height: 8px;
    border-radius: 2px;
    flex-shrink: 0;
}
.gcms-aging-bucket__value {
    font-size: 1.375rem;
    font-weight: 700;
    color: var(--gmda-gray-900);
    font-variant-numeric: tabular-nums;
}
.gcms-aging-bucket--critical .gcms-aging-bucket__value { color: var(--gmda-status-red-fg); }

/* Status distribution rows */
.gcms-dist-row {
    display: flex;
    align-items: center;
    gap: var(--gmda-space-3);
    padding: var(--gmda-space-2) 0.625rem;
    border-radius: var(--gmda-radius-sm);
    text-decoration: none;
    transition: background 0.15s var(--gmda-ease);
}
.gcms-dist-row:hover { background: var(--gmda-gray-50); }
.gcms-dist-row__badge { min-width: 150px; justify-content: center; }
.gcms-dist-row__track {
    flex-grow: 1;
    height: 8px;
    border-radius: 999px;
    background: var(--gmda-gray-100);
    overflow: hidden;
    display: flex;
}
.gcms-dist-row__fill {
    border-radius: 999px;
    opacity: 0.85;
    background: currentColor;
}
.gcms-dist-row__count {
    min-width: 44px;
    text-align: right;
    font-weight: 700;
    color: var(--gmda-gray-800);
    font-variant-numeric: tabular-nums;
}

/* Recent activity list */
.gcms-activity { display: flex; flex-direction: column; gap: 0.9rem; }
.gcms-activity__item { display: flex; gap: var(--gmda-space-3); align-items: flex-start; }
.gcms-activity__avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.6875rem;
    font-weight: 700;
    background: var(--gmda-primary-tint);
    color: var(--gmda-primary);
}
.gcms-activity__text { font-size: var(--gmda-fs-sm); color: var(--gmda-gray-800); line-height: 1.45; }
.gcms-activity__time { font-size: var(--gmda-fs-xs); color: var(--gmda-gray-400); margin-top: 2px; }

/* ============================================================================
   CASE STATUS TIMELINE
   ========================================================================= */

.gcms-timeline {
    display: flex;
    align-items: flex-start;
}
.gcms-timeline__step {
    flex-grow: 1;
    flex-basis: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    min-width: 0;
}
.gcms-timeline__track {
    display: flex;
    align-items: center;
    width: 100%;
}
.gcms-timeline__line {
    flex-grow: 1;
    height: 2px;
    background: var(--gmda-gray-200);
}
.gcms-timeline__line.is-done { background: var(--gmda-status-green-fg); }
.gcms-timeline__line.is-hidden { background: transparent; }
.gcms-timeline__dot {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: var(--gmda-fs-xs);
    background: var(--gmda-gray-100);
    color: var(--gmda-gray-400);
    font-variant-numeric: tabular-nums;
}
.gcms-timeline__dot.is-done {
    background: var(--gmda-status-green-fg);
    color: #fff;
}
.gcms-timeline__dot.is-current {
    background: #fff;
    color: var(--gmda-status-yellow-fg);
    box-shadow: 0 0 0 3px var(--gmda-status-yellow-bg);
}
.gcms-timeline__pulse {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: currentColor;
}
.gcms-timeline__body { margin-top: 0.6rem; padding: 0 0.35rem; }
.gcms-timeline__name {
    font-size: var(--gmda-fs-xs);
    font-weight: 700;
    line-height: 1.3;
    color: var(--gmda-gray-700);
}
.gcms-timeline__name.is-current { color: var(--gmda-status-yellow-fg); }
.gcms-timeline__name.is-todo { color: var(--gmda-gray-400); }
.gcms-timeline__meta {
    font-size: 0.6875rem;
    color: var(--gmda-gray-400);
    margin-top: 3px;
    line-height: 1.35;
}

/* Vertical variant — replaces the horizontal stepper on narrow screens. */
.gcms-timeline-v { display: none; flex-direction: column; }
.gcms-timeline-v__step { display: flex; gap: 0.7rem; align-items: flex-start; }
.gcms-timeline-v__gutter { display: flex; flex-direction: column; align-items: center; flex-shrink: 0; }
.gcms-timeline-v__line { width: 2px; flex-grow: 1; min-height: 22px; background: var(--gmda-gray-200); }
.gcms-timeline-v__line.is-done { background: var(--gmda-status-green-fg); }
.gcms-timeline-v__body { padding-bottom: 0.7rem; min-width: 0; }

/* ============================================================================
   REGISTRATION PROGRESS RAIL
   ========================================================================= */

.gcms-rail { display: flex; flex-direction: column; gap: 0.15rem; }
.gcms-rail__item {
    display: flex;
    gap: 0.65rem;
    align-items: flex-start;
    padding: var(--gmda-space-2);
    border-radius: var(--gmda-radius-sm);
    text-decoration: none;
}
.gcms-rail__item--current { background: var(--gmda-primary-tint); }
.gcms-rail__gutter {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-shrink: 0;
}
.gcms-rail__dot {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.6875rem;
    font-weight: 700;
    background: var(--gmda-gray-100);
    color: var(--gmda-gray-500);
    font-variant-numeric: tabular-nums;
}
.gcms-rail__dot--done { background: var(--gmda-status-green-fg); color: #fff; }
.gcms-rail__dot--current {
    background: #fff;
    color: var(--gmda-primary);
    box-shadow: 0 0 0 2px var(--gmda-primary-tint-strong);
}
.gcms-rail__line { width: 2px; flex-grow: 1; min-height: 10px; background: var(--gmda-gray-200); }
.gcms-rail__name { font-size: var(--gmda-fs-sm); font-weight: 500; color: var(--gmda-gray-500); line-height: 1.3; }
.gcms-rail__name--done { font-weight: 600; color: var(--gmda-gray-700); }
.gcms-rail__name--current { font-weight: 700; color: var(--gmda-primary-dark); }
.gcms-rail__meta { font-size: 0.6875rem; color: var(--gmda-gray-400); margin-top: 2px; }
.gcms-rail__bar {
    height: 6px;
    border-radius: 999px;
    background: var(--gmda-gray-100);
    overflow: hidden;
}
.gcms-rail__bar-fill {
    height: 100%;
    background: var(--gmda-primary-light);
    border-radius: 999px;
}

/* ============================================================================
   LOADING SKELETONS
   ========================================================================= */

.gcms-skeleton {
    background: linear-gradient(90deg, var(--gmda-gray-100) 25%, #e4e7ec 37%, var(--gmda-gray-100) 63%);
    background-size: 400% 100%;
    border-radius: 5px;
    animation: gcms-shimmer 1.4s ease-in-out infinite;
}
@keyframes gcms-shimmer {
    from { background-position: 100% 50%; }
    to   { background-position: 0 50%; }
}

/* ============================================================================
   TOASTS
   ========================================================================= */

.gcms-toast-region {
    position: fixed;
    right: var(--gmda-space-4);
    bottom: var(--gmda-space-4);
    z-index: 1080;
    display: flex;
    flex-direction: column;
    gap: var(--gmda-space-2);
    max-width: min(420px, calc(100vw - 2rem));
}
.gcms-toast {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.8rem 0.9rem;
    border-radius: var(--gmda-radius-md);
    background: var(--gmda-gray-900);
    color: #fff;
    box-shadow: var(--gmda-shadow-lg);
    font-size: var(--gmda-fs-sm);
    font-weight: 600;
    animation: gcms-toast-in 0.2s var(--gmda-ease);
}
@keyframes gcms-toast-in {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: none; }
}
.gcms-toast__icon { flex-shrink: 0; }
.gcms-toast--success .gcms-toast__icon { color: #7fd6a0; }
.gcms-toast--error .gcms-toast__icon { color: #f0a3a3; }
.gcms-toast__close {
    margin-left: auto;
    background: transparent;
    border: none;
    color: rgba(255, 255, 255, 0.6);
    padding: 2px;
    display: flex;
    cursor: pointer;
}
.gcms-toast__close:hover { color: #fff; }

/* ============================================================================
   MOBILE NAVIGATION (hamburger + off-canvas scrim + bottom bar)
   Hidden on desktop; revealed by the responsive block below.
   ========================================================================= */

.gcms-topbar-menu {
    display: none;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border: none;
    background: transparent;
    color: #fff;
    border-radius: var(--gmda-radius-sm);
    flex-shrink: 0;
    cursor: pointer;
}
.gcms-topbar-menu:hover { background: rgba(255, 255, 255, 0.12); }

.gcms-sidebar-scrim {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 1019;
    background: rgba(9, 17, 27, 0.45);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s var(--gmda-ease);
}
.gcms-sidebar-scrim.is-visible {
    opacity: 1;
    pointer-events: auto;
}

.gcms-mobile-nav {
    display: none;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1040;
    background: #fff;
    border-top: 1px solid var(--gmda-gray-200);
    box-shadow: 0 -4px 16px rgba(16, 24, 40, 0.06);
    padding-bottom: env(safe-area-inset-bottom);
}
.gcms-mobile-nav__link {
    flex-grow: 1;
    flex-basis: 0;
    min-height: 56px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    font-size: 0.625rem;
    font-weight: 600;
    color: var(--gmda-gray-500);
    text-decoration: none;
    position: relative;
}
.gcms-mobile-nav__link.active { color: var(--gmda-primary); }
.gcms-mobile-nav__badge {
    position: absolute;
    top: 6px;
    left: 50%;
    margin-left: 4px;
    min-width: 15px;
    height: 15px;
    padding: 0 4px;
    border-radius: 999px;
    background: var(--gmda-status-red-fg);
    color: #fff;
    font-size: 0.5625rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ============================================================================
   RESPONSIVE — the portal was effectively desktop-only before this.
   Layouts are redesigned per breakpoint, not merely shrunk.
   ========================================================================= */

/* --- Laptop / small desktop --- */
@media (max-width: 1199.98px) {
    .gcms-sidebar { width: 216px; }
    .gcms-page-title { font-size: var(--gmda-fs-2xl); }
    .gcms-dist-row__badge { min-width: 120px; }
}

/* --- Tablet and below: the sidebar becomes an off-canvas drawer --- */
@media (max-width: 991.98px) {
    .gcms-topbar { padding: 0 var(--gmda-space-3); gap: var(--gmda-space-2); }
    .gcms-topbar-menu { display: flex; }
    .gcms-topbar-search { display: none; }
    .gcms-brand small { display: none; }
    .gcms-brand { font-size: var(--gmda-fs-md); }

    .gcms-sidebar {
        position: fixed;
        top: 60px;             /* matches the 60px topbar — was 56px, a visible seam */
        left: 0;
        bottom: 0;
        width: 272px;
        z-index: 1020;
        overflow-y: auto;
        transform: translateX(-100%);
        transition: transform 0.2s var(--gmda-ease);
    }
    .gcms-sidebar.is-open {
        transform: translateX(0);
        box-shadow: var(--gmda-shadow-lg);
    }
    /* The desktop collapse state must not leak into the drawer. */
    .gcms-sidebar.is-collapsed { width: 272px; }
    .gcms-sidebar.is-collapsed .gcms-sidebar-group,
    .gcms-sidebar.is-collapsed .gcms-nav-label { display: block; }
    .gcms-sidebar.is-collapsed .gcms-nav-link {
        justify-content: flex-start;
        padding: var(--gmda-space-2) var(--gmda-space-3);
    }
    .gcms-sidebar-toggle { display: none; }
    .gcms-sidebar-scrim { display: block; }

    /* 44px minimum touch target on every nav row. */
    .gcms-nav-link { min-height: 44px; }

    .gcms-mobile-nav { display: flex; }
    /* Clear the fixed bottom bar so the last element is never trapped beneath it. */
    .gcms-shell main { padding-bottom: calc(56px + var(--gmda-space-5)) !important; }

    .gcms-page-header { margin-bottom: var(--gmda-space-5); }
    .gcms-timeline { display: none; }
    .gcms-timeline-v { display: flex; }
}

/* --- Phones --- */
@media (max-width: 767.98px) {
    .gcms-shell main { padding: var(--gmda-space-4) var(--gmda-space-3) calc(56px + var(--gmda-space-5)) !important; }
    .gcms-page-title { font-size: var(--gmda-fs-xl); }
    .gcms-page-header { flex-direction: column; align-items: stretch; gap: var(--gmda-space-3); }
    .gcms-page-actions { display: flex; flex-wrap: wrap; gap: var(--gmda-space-2); }
    .gcms-page-actions .btn { flex-grow: 1; min-height: 44px; }

    .gcms-attention__value { font-size: var(--gmda-fs-2xl); }
    .gcms-aging-buckets { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .gcms-dist-row { flex-wrap: wrap; }
    .gcms-dist-row__badge { min-width: 0; }
    .gcms-dist-row__track { order: 3; flex-basis: 100%; }

    .gcms-form-section__body { padding: var(--gmda-space-3) !important; }
    .gcms-filter-panel { padding: var(--gmda-space-3); }

    /* Controls reach the 44px touch floor. */
    .btn, .form-control, .form-select { min-height: 44px; }
    .btn-sm { min-height: 38px; }

    .gcms-toast-region {
        right: var(--gmda-space-3);
        left: var(--gmda-space-3);
        bottom: calc(56px + var(--gmda-space-3));
        max-width: none;
    }
}

/* --- Tables become cards ---
   An eight-column table that scrolls sideways is unusable on a phone. Each row
   re-flows into a stacked card, with the column name supplied by data-label.
   Requires .gcms-table--cards on the table and data-label on each cell. */
@media (max-width: 767.98px) {
    .gcms-table--cards,
    .gcms-table--cards tbody,
    .gcms-table--cards tr,
    .gcms-table--cards td {
        display: block;
        width: 100%;
    }
    .gcms-table--cards thead { display: none; }
    .gcms-table--cards tr {
        border: 1px solid var(--gmda-gray-200);
        border-radius: var(--gmda-radius-lg);
        box-shadow: var(--gmda-shadow-xs);
        background: #fff;
        padding: var(--gmda-space-3);
        margin-bottom: var(--gmda-space-3);
    }
    .gcms-table--cards td {
        border: none !important;
        padding: 0.3rem 0 !important;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: var(--gmda-space-3);
        text-align: right;
    }
    .gcms-table--cards td::before {
        content: attr(data-label);
        flex-shrink: 0;
        text-align: left;
        font-size: var(--gmda-fs-xs);
        font-weight: 700;
        letter-spacing: 0.04em;
        text-transform: uppercase;
        color: var(--gmda-gray-400);
    }
    /* The primary cell reads as the card heading: full width, no label. */
    .gcms-table--cards td.gcms-cell-primary {
        display: block;
        text-align: left;
        padding-bottom: var(--gmda-space-2) !important;
        margin-bottom: var(--gmda-space-2);
        border-bottom: 1px solid var(--gmda-gray-100) !important;
    }
    .gcms-table--cards td.gcms-cell-primary::before { content: none; }
    .gcms-table--cards td.gcms-cell-actions {
        justify-content: flex-end;
        padding-top: var(--gmda-space-3) !important;
        margin-top: var(--gmda-space-2);
        border-top: 1px solid var(--gmda-gray-100) !important;
    }
    .gcms-table--cards td.gcms-cell-actions::before { content: none; }
    .gcms-table--cards .gcms-table-scroll { overflow-x: visible; }
}

/* Foreground-only status helpers — let a child use currentColor to pick up the
   status hue (the distribution bar fill on the dashboard). */
.status-fg-grey   { color: var(--gmda-status-grey-fg); }
.status-fg-blue   { color: var(--gmda-status-blue-fg); }
.status-fg-orange { color: var(--gmda-status-orange-fg); }
.status-fg-yellow { color: var(--gmda-status-yellow-fg); }
.status-fg-green  { color: var(--gmda-status-green-fg); }
.status-fg-red    { color: var(--gmda-status-red-fg); }
.status-fg-dark   { color: var(--gmda-status-dark-fg); }

/* Collapsible secondary filters (location + date) on the search screen. */
.gcms-more-filters {
    margin-top: var(--gmda-space-3);
    border-top: 1px solid var(--gmda-gray-100);
    padding-top: var(--gmda-space-2);
}
.gcms-more-filters > summary {
    display: flex;
    align-items: center;
    gap: var(--gmda-space-2);
    list-style: none;
    cursor: pointer;
    padding: var(--gmda-space-2) 0;
    font-size: var(--gmda-fs-sm);
    font-weight: 600;
    color: var(--gmda-gray-600);
    min-height: 38px;
}
.gcms-more-filters > summary::-webkit-details-marker { display: none; }
.gcms-more-filters > summary:hover { color: var(--gmda-primary); }
.gcms-more-filters__caret {
    margin-left: auto;
    transition: transform 0.15s var(--gmda-ease);
}
.gcms-more-filters[open] .gcms-more-filters__caret { transform: rotate(180deg); }

/* ============================================================================
   CASE REGISTRATION — progress rail + sticky action bar
   ========================================================================= */

.gcms-register-grid {
    display: grid;
    grid-template-columns: 236px minmax(0, 1fr);
    gap: var(--gmda-space-4);
    align-items: start;
}
.gcms-register-main { min-width: 0; }

.gcms-register-rail {
    padding: 1.125rem;
    position: sticky;
    top: calc(60px + var(--gmda-space-4));
}
.gcms-register-rail__title {
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--gmda-gray-400);
    margin-bottom: var(--gmda-space-3);
}
.gcms-register-rail__progress {
    margin-top: var(--gmda-space-4);
    padding-top: var(--gmda-space-3);
    border-top: 1px solid var(--gmda-gray-100);
}
/* The rail's own rows: state classes are is-* so they stay usable inside
   Thymeleaf expressions, where "__" is the preprocessing delimiter. */
.gcms-rail__item.is-current { background: var(--gmda-primary-tint); }
.gcms-rail__item.is-current .gcms-rail__name { font-weight: 700; color: var(--gmda-primary-dark); }
.gcms-rail__item.is-current .gcms-rail__dot {
    background: #fff;
    color: var(--gmda-primary);
    box-shadow: 0 0 0 2px var(--gmda-primary-tint-strong);
}
.gcms-rail__item.is-done .gcms-rail__dot { background: var(--gmda-status-green-fg); color: #fff; }
.gcms-rail__item.is-done .gcms-rail__name { font-weight: 600; color: var(--gmda-gray-700); }
.gcms-rail__dot-check { width: 12px; height: 12px; stroke-width: 3; }

.gcms-form-actions {
    display: flex;
    align-items: center;
    gap: var(--gmda-space-4);
    flex-wrap: wrap;
    background: #fff;
    border: 1px solid var(--gmda-gray-200);
    border-radius: var(--gmda-radius-lg);
    padding: 0.9rem 1.25rem;
    position: sticky;
    bottom: var(--gmda-space-4);
    box-shadow: 0 -2px 6px rgba(16, 24, 40, 0.04), 0 8px 20px rgba(16, 24, 40, 0.10);
}
.gcms-form-actions__hint {
    display: flex;
    align-items: flex-start;
    gap: 0.45rem;
    color: var(--gmda-gray-500);
    font-size: var(--gmda-fs-sm);
    line-height: 1.45;
    min-width: 0;
}
.gcms-form-actions__buttons {
    margin-left: auto;
    display: flex;
    gap: var(--gmda-space-2);
    flex-wrap: wrap;
}

@media (max-width: 991.98px) {
    /* The rail becomes a horizontal strip above the form — a sticky column is
       worthless at this width, but the orientation it provides still is. */
    .gcms-register-grid { grid-template-columns: minmax(0, 1fr); }
    .gcms-register-rail { position: static; }
    .gcms-register-rail .gcms-rail {
        flex-direction: row;
        overflow-x: auto;
        gap: var(--gmda-space-2);
        padding-bottom: var(--gmda-space-1);
    }
    .gcms-register-rail .gcms-rail__item { flex-shrink: 0; }
    .gcms-register-rail .gcms-rail__line { display: none; }
    .gcms-register-rail .gcms-rail__meta { display: none; }
}

@media (max-width: 767.98px) {
    .gcms-form-actions { bottom: calc(56px + var(--gmda-space-2)); }
    .gcms-form-actions__hint { display: none; }
    .gcms-form-actions__buttons { margin-left: 0; width: 100%; }
    .gcms-form-actions__buttons .btn { flex-grow: 1; }
}

/* ============================================================================
   SEGMENTED CONTROL (notification filter, and any two/three-way view switch)
   ========================================================================= */

.gcms-segmented {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    background: var(--gmda-gray-50);
    border: 1px solid var(--gmda-gray-200);
    border-radius: var(--gmda-radius-md);
    padding: 3px;
}
.gcms-segmented__item {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    min-height: 34px;
    padding: 0 var(--gmda-space-3);
    border-radius: var(--gmda-radius-sm);
    color: var(--gmda-gray-600);
    text-decoration: none;
    font-size: var(--gmda-fs-sm);
    font-weight: 600;
    transition: background 0.15s var(--gmda-ease), color 0.15s var(--gmda-ease);
}
.gcms-segmented__item:hover { color: var(--gmda-primary); }
.gcms-segmented__item.is-active {
    background: #fff;
    color: var(--gmda-primary);
    box-shadow: var(--gmda-shadow-xs);
}
.gcms-segmented__count {
    background: var(--gmda-status-red-bg);
    color: var(--gmda-status-red-fg);
    font-size: var(--gmda-fs-xs);
    font-weight: 700;
    padding: 1px 7px;
    border-radius: 999px;
    font-variant-numeric: tabular-nums;
}

/* ============================================================================
   NOTIFICATION CENTRE
   ========================================================================= */

.gcms-notif-list { list-style: none; margin: 0; padding: 0; }
.gcms-notif {
    display: flex;
    align-items: flex-start;
    gap: var(--gmda-space-3);
    padding: var(--gmda-space-4);
    border-bottom: 1px solid var(--gmda-gray-100);
    border-left: 3px solid transparent;
}
.gcms-notif:last-child { border-bottom: none; }
.gcms-notif.is-unread { background: var(--gmda-primary-tint); }
.gcms-notif.is-unread.is-action { border-left-color: var(--gmda-primary-light); }
.gcms-notif.is-unread.is-reminder {
    background: #fefaf0;
    border-left-color: var(--gmda-status-yellow-fg);
}

.gcms-notif__icon {
    width: 36px;
    height: 36px;
    border-radius: var(--gmda-radius-md);
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--gmda-gray-100);
    color: var(--gmda-gray-500);
}
.gcms-notif.is-action .gcms-notif__icon { background: var(--gmda-primary-tint-strong); color: var(--gmda-primary); }
.gcms-notif.is-reminder .gcms-notif__icon { background: var(--gmda-status-yellow-bg); color: var(--gmda-status-yellow-fg); }

.gcms-notif__body { min-width: 0; flex-grow: 1; }
.gcms-notif__head {
    display: flex;
    align-items: center;
    gap: var(--gmda-space-2);
    flex-wrap: wrap;
}
.gcms-notif__title { font-weight: 700; color: var(--gmda-gray-900); }
.gcms-notif__kind {
    font-size: var(--gmda-fs-xs);
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--gmda-gray-400);
}
.gcms-notif.is-action .gcms-notif__kind { color: var(--gmda-primary); }
.gcms-notif.is-reminder .gcms-notif__kind { color: var(--gmda-status-yellow-fg); }
.gcms-notif__message { color: var(--gmda-gray-700); margin-top: 3px; line-height: 1.5; }
.gcms-notif__meta {
    display: flex;
    align-items: center;
    gap: var(--gmda-space-3);
    margin-top: var(--gmda-space-2);
    font-size: var(--gmda-fs-sm);
    color: var(--gmda-gray-400);
    flex-wrap: wrap;
}
.gcms-notif__meta a {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-weight: 600;
    text-decoration: none;
}
.gcms-notif__action { flex-shrink: 0; }

@media (max-width: 767.98px) {
    .gcms-notif { flex-wrap: wrap; }
    .gcms-notif__action { width: 100%; padding-left: calc(36px + var(--gmda-space-3)); }
    .gcms-notif__action .btn { width: 100%; }
}

/* ============================================================================
   MASTER-DATA LOOKUP CARDS
   ========================================================================= */

.gcms-lookup-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: var(--gmda-space-4);
    align-items: start;
}
.gcms-lookup { display: flex; flex-direction: column; overflow: hidden; }
.gcms-lookup__header {
    display: flex;
    align-items: center;
    gap: var(--gmda-space-2);
    padding: var(--gmda-space-3) var(--gmda-space-4);
    border-bottom: 1px solid var(--gmda-gray-100);
    background: var(--gmda-gray-50);
    font-weight: 700;
    color: var(--gmda-gray-800);
}
.gcms-lookup__count {
    margin-left: auto;
    background: var(--gmda-gray-200);
    color: var(--gmda-gray-600);
    font-size: var(--gmda-fs-xs);
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 999px;
    font-variant-numeric: tabular-nums;
}
.gcms-lookup__list {
    list-style: none;
    margin: 0;
    padding: 0;
    max-height: 320px;
    overflow-y: auto;
}
.gcms-lookup__item {
    display: flex;
    align-items: center;
    gap: var(--gmda-space-2);
    padding: var(--gmda-space-2) var(--gmda-space-4);
    border-bottom: 1px solid var(--gmda-gray-100);
    min-height: 44px;
}
.gcms-lookup__item:last-child { border-bottom: none; }
.gcms-lookup__item.is-inactive .gcms-lookup__name { color: var(--gmda-gray-400); }
.gcms-lookup__name { min-width: 0; overflow-wrap: anywhere; }
.gcms-lookup__action { margin-left: auto; flex-shrink: 0; }
.gcms-lookup__add {
    padding: var(--gmda-space-3) var(--gmda-space-4);
    border-top: 1px solid var(--gmda-gray-100);
    background: var(--gmda-gray-50);
    margin-top: auto;
}

/* ============================================================================
   ADMIN SECTION NAVIGATION (case configuration is six stacked sections)
   ========================================================================= */

.gcms-section-nav {
    display: flex;
    gap: var(--gmda-space-2);
    flex-wrap: wrap;
    padding: var(--gmda-space-3);
    background: #fff;
    border: 1px solid var(--gmda-gray-200);
    border-radius: var(--gmda-radius-lg);
    box-shadow: var(--gmda-shadow-sm);
    margin-bottom: var(--gmda-space-4);
    position: sticky;
    top: calc(60px + var(--gmda-space-3));
    z-index: 10;
}
.gcms-section-nav__link {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    min-height: 38px;
    padding: 0 var(--gmda-space-3);
    border-radius: var(--gmda-radius-md);
    background: var(--gmda-gray-50);
    border: 1px solid var(--gmda-gray-200);
    color: var(--gmda-gray-700);
    font-size: var(--gmda-fs-sm);
    font-weight: 600;
    text-decoration: none;
    transition: background 0.15s var(--gmda-ease), color 0.15s var(--gmda-ease), border-color 0.15s var(--gmda-ease);
}
.gcms-section-nav__link:hover {
    background: var(--gmda-primary-tint);
    border-color: var(--gmda-primary-tint-strong);
    color: var(--gmda-primary-dark);
}

/* Anchored sections must clear the sticky topbar and section nav when jumped to. */
.gcms-anchor { scroll-margin-top: calc(60px + 64px + var(--gmda-space-4)); }

/* ============================================================================
   REPORTS — export bar
   ========================================================================= */

.gcms-export-bar {
    display: flex;
    align-items: center;
    gap: var(--gmda-space-3);
    flex-wrap: wrap;
    padding: var(--gmda-space-3) var(--gmda-space-4);
    background: var(--gmda-gray-50);
    border: 1px solid var(--gmda-gray-200);
    border-radius: var(--gmda-radius-lg);
    margin-bottom: var(--gmda-space-3);
}
.gcms-export-bar__label {
    display: flex;
    align-items: flex-start;
    gap: 0.45rem;
    color: var(--gmda-gray-600);
    font-size: var(--gmda-fs-sm);
    line-height: 1.45;
    min-width: 0;
}
.gcms-export-bar__actions {
    margin-left: auto;
    display: flex;
    gap: var(--gmda-space-2);
    flex-wrap: wrap;
}
@media (max-width: 767.98px) {
    .gcms-export-bar__actions { margin-left: 0; width: 100%; }
    .gcms-export-bar__actions .btn { flex-grow: 1; }
}

/* ============================================================================
   CALENDAR — responsive
   A 7-column month grid at 112px row height does not fit a phone. Cells shrink
   and event pills collapse to colour bars; the day number stays legible, and
   the day-agenda below the grid carries the detail.
   ========================================================================= */
@media (max-width: 991.98px) {
    .gcms-calendar-week-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .gcms-calendar-nav__btn { min-width: 40px; height: 40px; }
    .gcms-calendar-tab { min-height: 40px; }
}
@media (max-width: 767.98px) {
    .gcms-calendar-cell { min-height: 68px; padding: 4px; }
    .gcms-calendar-cell__date { min-width: 20px; height: 20px; font-size: var(--gmda-fs-xs); padding: 0 3px; }
    .gcms-calendar-cell__events { gap: 2px; margin-top: 4px; }
    /* Labels are unreadable at this width — show each event as a colour bar and
       let the agenda list underneath do the explaining. */
    .gcms-calendar-event {
        font-size: 0;
        padding: 0;
        height: 5px;
        border-radius: 3px;
        width: 100%;
        display: block;
    }
    .gcms-calendar-more { font-size: 9px; margin-top: 2px; }
    .gcms-calendar-head { padding: var(--gmda-space-2) 2px; font-size: 9px; }
    /* The legend is the one place the pills must stay readable. */
    .gcms-calendar-legend .gcms-calendar-event {
        font-size: 11px;
        padding: 2px 8px;
        height: auto;
        width: auto;
        display: inline-flex;
        border-radius: 999px;
    }
    .gcms-calendar-week-grid { grid-template-columns: minmax(0, 1fr); }
    .gcms-calendar-week-day { min-height: 0; }
    .gcms-calendar-week-day .gcms-calendar-event {
        font-size: 11px;
        padding: 2px 8px;
        height: auto;
        border-radius: 999px;
    }
    .gcms-calendar-month-label { font-size: var(--gmda-fs-md); }
    .gcms-calendar-view-tabs, .gcms-calendar-nav { flex-shrink: 0; }
}

/* A cell that carries only a decorative glyph has nothing to say as a labelled
   card row, so it is dropped when the table re-flows. */
@media (max-width: 767.98px) {
    .gcms-table--cards td.gcms-cell-decorative { display: none; }
}

/* ============================================================================
   INTAKE vs DISPOSAL — a two-series weekly comparison, drawn in CSS.
   No charting library: two bars per week sharing one scale is all this needs.
   ========================================================================= */
.gcms-flow {
    display: flex;
    align-items: flex-end;
    gap: var(--gmda-space-2);
    height: 170px;
    padding: 0 0 var(--gmda-space-1);
    overflow-x: auto;
}
.gcms-flow__week {
    flex: 1 1 0;
    min-width: 44px;
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100%;
}
.gcms-flow__bars {
    flex-grow: 1;
    width: 100%;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 3px;
}
.gcms-flow__bar {
    width: 44%;
    max-width: 18px;
    min-height: 2px;
    border-radius: 3px 3px 0 0;
    transition: opacity 0.15s var(--gmda-ease);
}
.gcms-flow__bar--in { background: var(--gmda-primary-light); }
.gcms-flow__bar--out { background: var(--gmda-status-green-fg); }
.gcms-flow__week:hover .gcms-flow__bar { opacity: 0.82; }
.gcms-flow__label {
    margin-top: var(--gmda-space-2);
    font-size: 0.6875rem;
    color: var(--gmda-gray-400);
    white-space: nowrap;
}
.gcms-flow-legend {
    display: flex;
    gap: var(--gmda-space-4);
    font-size: var(--gmda-fs-sm);
    color: var(--gmda-gray-600);
}
.gcms-flow-legend > span { display: inline-flex; align-items: center; gap: var(--gmda-space-2); }
.gcms-flow-key { width: 12px; height: 12px; border-radius: 3px; flex-shrink: 0; }
.gcms-flow-key--in { background: var(--gmda-primary-light); }
.gcms-flow-key--out { background: var(--gmda-status-green-fg); }

@media (max-width: 767.98px) {
    .gcms-flow { height: 140px; }
    .gcms-flow__week { min-width: 38px; }
    .gcms-flow__label { font-size: 0.625rem; }
}

/* CEO dashboard: the Reports card carries a description rather than a figure,
   so it needs its own text treatment in place of the big number. */
.gcms-attention--report { border-left-color: var(--gmda-accent); }
.gcms-attention--report .gcms-attention__head { color: var(--gmda-accent); }
.gcms-attention--report .gcms-attention__cta { color: var(--gmda-accent); }
.gcms-attention__report-text {
    font-size: var(--gmda-fs-base);
    color: var(--gmda-gray-600);
    line-height: 1.45;
}

/* The CEO's Overview carries the whole file in two columns (cases/detail.html).
   Without a ceiling, a case with thirty notesheet entries makes the right column
   several screens taller than the left, and the case details it sits beside scroll
   away entirely. Each panel scrolls within itself instead. */
.gcms-ceo-scroll {
    max-height: 32rem;
    overflow-y: auto;
}
@media (max-width: 1199.98px) {
    /* Below the xl breakpoint the columns stack, so the panels are already in
       reading order and a fixed height would only trap content in a small box. */
    .gcms-ceo-scroll { max-height: none; overflow-y: visible; }
}

/* ---- Document viewer (cases/detail.html + document-viewer.js) ----
   A dark stage so a scanned page or photograph is read against a neutral ground
   rather than the page's own background tint. */
.gcms-doc-viewer__body {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 60vh;
    background: #1b1f24;
    padding: 0;
}
.gcms-doc-viewer__stage {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    max-height: 78vh;
    overflow: auto;
    padding: 0.75rem;
}
/* Fits the dialog without cropping — a document read at the wrong scale is worse
   than one that needs scrolling. */
.gcms-doc-viewer__image {
    max-width: 100%;
    max-height: 76vh;
    object-fit: contain;
}
.gcms-doc-viewer__frame {
    width: 100%;
    height: 76vh;
    border: 0;
    background: #fff;
}
.gcms-doc-viewer__fallback {
    color: #dfe4ea;
    padding: 3rem 1.5rem;
    text-align: center;
}
/* Overlaid rather than in the flow, so the document keeps the full width. */
.gcms-doc-viewer__nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    border: 0;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.55);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
}
.gcms-doc-viewer__nav:hover { background: rgba(0, 0, 0, 0.78); }
.gcms-doc-viewer__nav:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.gcms-doc-viewer__nav--prev { left: 0.5rem; }
.gcms-doc-viewer__nav--next { right: 0.5rem; }
.gcms-doc-viewer__nav[hidden] { display: none; }
.gcms-doc-viewer__counter {
    font-size: 0.8rem;
    color: var(--gmda-text-muted, #6b7684);
    white-space: nowrap;
}
.gcms-doc-viewer__fallback-name {
    font-weight: 600;
    color: #fff;
    margin-bottom: 0.35rem;
    word-break: break-all;
}

/* Site Visits Map -- Leaflet requires the container to have an explicit height; unset,
   it renders zero pixels tall with no visible error. */
.gcms-visits-map {
    height: 72vh;
    min-height: 420px;
    border: 1px solid var(--gmda-border, #e2e5ea);
    border-radius: 8px;
    overflow: hidden;
}
.gcms-visits-map .leaflet-popup-content-wrapper {
    border-radius: 6px;
}
.gcms-visits-popup {
    display: block;
    color: inherit;
    text-decoration: none;
    min-width: 180px;
}
.gcms-visits-popup:hover .gcms-visits-popup__case { text-decoration: underline; }
.gcms-visits-popup__case {
    display: block;
    font-weight: 700;
    color: var(--gmda-primary, #1b3a5c);
}
.gcms-visits-popup__name {
    display: block;
    margin-top: 0.15rem;
}
.gcms-visits-popup__meta {
    display: block;
    margin-top: 0.35rem;
    font-size: 0.8rem;
    color: var(--gmda-text-muted, #6b7684);
}
/* The always-visible label beside each pin -- overrides Leaflet's default plain white
   tooltip box so it reads clearly against map tiles of any colour. */
.gcms-visits-label.leaflet-tooltip {
    background: var(--gmda-primary, #1b3a5c);
    color: #fff;
    border: none;
    border-radius: 4px;
    padding: 2px 7px;
    font-size: 0.72rem;
    font-weight: 600;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
}
.gcms-visits-label.leaflet-tooltip-top::before {
    border-top-color: var(--gmda-primary, #1b3a5c);
}