/* ==========================================================================
   Medico Legal Admin — design system
   --------------------------------------------------------------------------
   One CSS layer on top of stock Bootstrap 5.3. Everything here is presentation
   only: no template class, id, form field name, route, or JS hook depends on
   it for behaviour.

   Structure:
     1. Tokens          — the only place raw colours/sizes are written down
     2. Base            — element-level typography and page frame
     3. Layout          — app shell, page header, sections
     4. Surfaces        — card, panel, stat tile
     5. Forms & filters — inputs, labels, the filter bar
     6. Buttons         — solid / outline / subtle / segmented
     7. Tables          — the one data-table treatment used on every list page
     8. Badges          — soft status pills
     9. Feedback        — alerts, empty states, pagination
    10. Chat            — conversation bubbles and thread list
    11. Login           — the one page outside the app shell
    12. Responsive      — breakpoint adjustments

   Component classes are prefixed `ml-` so they never collide with Bootstrap's
   own utilities, which the templates still use for spacing and grid.
   ========================================================================== */

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

:root {
    /* --- Palette ------------------------------------------------------- */
    --ml-primary: #3457ff;
    --ml-primary-dark: #2440cf;
    --ml-primary-darker: #1c34a8;
    --ml-primary-tint: #eef1ff;
    --ml-primary-tint-strong: #dfe4ff;

    --ml-navy: #141a2e;
    --ml-navy-2: #1f2742;

    --ml-success: #0f8a54;
    --ml-success-tint: #e6f6ee;
    --ml-warning: #a15c00;
    --ml-warning-tint: #fdf1de;
    --ml-danger: #c8324a;
    --ml-danger-tint: #fdecef;
    --ml-info: #0b6f9c;
    --ml-info-tint: #e5f3fa;
    --ml-neutral: #4b5565;
    --ml-neutral-tint: #eef0f5;

    /* --- Surfaces & text ----------------------------------------------- */
    --ml-bg: #f5f7fb;
    --ml-surface: #ffffff;
    --ml-surface-muted: #f8f9fc;
    --ml-surface-hover: #f3f5fd;
    --ml-border: #e4e8f0;
    --ml-border-strong: #d3d9e6;
    --ml-text: #1b2233;
    --ml-text-muted: #656f82;
    --ml-text-subtle: #8c95a6;

    /* --- Spacing scale (4px base) --------------------------------------- */
    --ml-sp-1: 0.25rem;
    --ml-sp-2: 0.5rem;
    --ml-sp-3: 0.75rem;
    --ml-sp-4: 1rem;
    --ml-sp-5: 1.5rem;
    --ml-sp-6: 2rem;
    --ml-sp-7: 3rem;

    /* --- Typography scale ----------------------------------------------- */
    --ml-font: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
    --ml-fs-xs: 0.75rem;    /* micro-labels, table heads, meta */
    --ml-fs-sm: 0.8125rem;  /* secondary text, small buttons */
    --ml-fs-base: 0.9375rem;/* body */
    --ml-fs-md: 1.0625rem;  /* section titles */
    --ml-fs-lg: 1.375rem;   /* page titles */
    --ml-fs-xl: 2.25rem;    /* stat figures */
    --ml-lh-tight: 1.25;
    --ml-lh-base: 1.5;

    /* --- Radii ----------------------------------------------------------- */
    --ml-radius-sm: 0.5rem;
    --ml-radius: 0.75rem;
    --ml-radius-lg: 1rem;
    --ml-radius-pill: 999px;

    /* --- Elevation -------------------------------------------------------- */
    --ml-shadow-sm: 0 1px 2px rgba(20, 26, 46, 0.05), 0 1px 3px rgba(20, 26, 46, 0.04);
    --ml-shadow-md: 0 6px 18px rgba(20, 26, 46, 0.08);
    --ml-shadow-lg: 0 18px 44px rgba(20, 26, 46, 0.16);
    --ml-ring: 0 0 0 3px rgba(52, 87, 255, 0.18);

    /* --- Motion ----------------------------------------------------------- */
    --ml-transition: 0.15s ease;

    /* --- Bootstrap runtime variables -------------------------------------
       Overriding these once here means Bootstrap's own utilities, focus rings
       and link colours inherit the system instead of fighting it. */
    --bs-body-bg: var(--ml-bg);
    --bs-body-color: var(--ml-text);
    --bs-body-font-family: var(--ml-font);
    --bs-body-font-size: var(--ml-fs-base);
    --bs-body-line-height: var(--ml-lh-base);
    --bs-link-color: var(--ml-primary);
    --bs-link-hover-color: var(--ml-primary-dark);
    --bs-focus-ring-color: rgba(52, 87, 255, 0.18);
    --bs-primary: var(--ml-primary);
    --bs-primary-rgb: 52, 87, 255;
    --bs-secondary-color: var(--ml-text-muted);
    --bs-border-color: var(--ml-border);
    --bs-border-radius: var(--ml-radius-sm);
    --bs-border-radius-sm: 0.4375rem;
    --bs-border-radius-lg: var(--ml-radius);
}

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

body {
    font-family: var(--ml-font);
    font-size: var(--ml-fs-base);
    line-height: var(--ml-lh-base);
    color: var(--ml-text);
    background-color: var(--ml-bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
    font-weight: 600;
    line-height: var(--ml-lh-tight);
    letter-spacing: -0.011em;
    color: var(--ml-text);
}

p { margin-bottom: var(--ml-sp-3); }

a { text-decoration: none; }

main a:not(.btn):not(.badge):not(.ml-badge):not(.ml-thread):not(.ml-tile-link):not(.ml-chip):hover {
    text-decoration: underline;
}

small, .small { font-size: var(--ml-fs-sm); }

.text-muted { color: var(--ml-text-muted) !important; }

::selection { background: rgba(52, 87, 255, 0.18); }

:focus-visible {
    outline: none;
    box-shadow: var(--ml-ring);
    border-radius: var(--ml-radius-sm);
}

/* ==========================================================================
   3. Layout — app shell, page header, sections
   ========================================================================== */

.ml-navbar {
    background: linear-gradient(135deg, var(--ml-navy) 0%, var(--ml-navy-2) 100%);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06), 0 4px 16px rgba(20, 26, 46, 0.18);
    padding-top: var(--ml-sp-2);
    padding-bottom: var(--ml-sp-2);
}

.ml-navbar .container-fluid { max-width: 1320px; }

.ml-navbar .navbar-brand {
    display: inline-flex;
    align-items: center;
    gap: var(--ml-sp-2);
    font-weight: 650;
    font-size: 1rem;
    letter-spacing: -0.012em;
    color: #fff;
}

.ml-brand-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.875rem;
    height: 1.875rem;
    border-radius: var(--ml-radius-sm);
    background: rgba(255, 255, 255, 0.14);
    color: #fff;
    font-size: var(--ml-fs-xs);
    font-weight: 700;
    letter-spacing: 0.02em;
}

.ml-navbar .navbar-toggler {
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: var(--ml-radius-sm);
    padding: 0.3rem 0.55rem;
}

.ml-navbar .navbar-toggler:focus { box-shadow: var(--ml-ring); }

.ml-navbar .nav-link {
    display: inline-flex;
    align-items: center;
    gap: var(--ml-sp-2);
    color: rgba(255, 255, 255, 0.72);
    font-weight: 500;
    font-size: var(--ml-fs-base);
    padding: 0.4rem 0.75rem;
    border-radius: var(--ml-radius-sm);
    transition: background-color var(--ml-transition), color var(--ml-transition);
}

.ml-navbar .nav-link:hover,
.ml-navbar .nav-link:focus-visible {
    color: #fff;
    background-color: rgba(255, 255, 255, 0.09);
}

.ml-navbar .nav-link.active {
    color: #fff;
    background-color: rgba(255, 255, 255, 0.15);
}

.ml-navbar .navbar-text {
    color: rgba(255, 255, 255, 0.66);
    font-size: var(--ml-fs-sm);
}

.ml-navbar .navbar-text a { color: rgba(255, 255, 255, 0.92); font-weight: 500; }
.ml-navbar .navbar-text a:hover { color: #fff; text-decoration: underline; }

/* Count pill sitting inside a nav link. */
.ml-nav-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.25rem;
    height: 1.25rem;
    padding: 0 0.35rem;
    border-radius: var(--ml-radius-pill);
    background: var(--ml-danger);
    color: #fff;
    font-size: 0.6875rem;
    font-weight: 700;
    line-height: 1;
}

.ml-main {
    max-width: 1320px;
    padding-top: var(--ml-sp-5);
    padding-bottom: var(--ml-sp-7);
}

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

.ml-page-header { margin-bottom: var(--ml-sp-5); }

.ml-back-link {
    display: inline-flex;
    align-items: center;
    gap: var(--ml-sp-1);
    font-size: var(--ml-fs-sm);
    font-weight: 500;
    color: var(--ml-text-muted);
    margin-bottom: var(--ml-sp-2);
}

.ml-back-link:hover { color: var(--ml-primary); }

.ml-page-title {
    font-size: var(--ml-fs-lg);
    font-weight: 650;
    letter-spacing: -0.018em;
    margin: 0;
}

.ml-page-subtitle {
    margin: var(--ml-sp-2) 0 0;
    max-width: 72ch;
    font-size: var(--ml-fs-sm);
    color: var(--ml-text-muted);
}

.ml-page-header-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--ml-sp-3);
}

/* --- Section (a titled block within a page) ---------------------------- */

.ml-section { margin-bottom: var(--ml-sp-5); }
.ml-section:last-child { margin-bottom: 0; }

.ml-section-title {
    font-size: var(--ml-fs-md);
    font-weight: 600;
    letter-spacing: -0.01em;
    margin: 0 0 var(--ml-sp-3);
}

.ml-eyebrow {
    font-size: var(--ml-fs-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--ml-text-muted);
    margin: 0 0 var(--ml-sp-2);
}

/* Report header line (Period / Generated / totals) above a list table.
   Wraps to one item per line on narrow screens rather than truncating. */
.ml-report-meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ml-sp-1) var(--ml-sp-4);
    margin: 0 0 var(--ml-sp-3);
    font-size: var(--ml-fs-sm);
    color: var(--ml-text-muted);
}

/* Row of actions under a header or beside a form. */
.ml-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--ml-sp-2);
}

/* ==========================================================================
   4. Surfaces — card, panel, stat tile
   ========================================================================== */

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

.card.shadow-sm { box-shadow: var(--ml-shadow-sm) !important; }

.ml-card-body,
.card-body { padding: var(--ml-sp-4); }

/* --- Stat tile ---------------------------------------------------------- */

.ml-tile {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: var(--ml-sp-1);
    height: 100%;
    padding: var(--ml-sp-4);
    background: var(--ml-surface);
    border: 1px solid var(--ml-border);
    border-radius: var(--ml-radius);
    box-shadow: var(--ml-shadow-sm);
    text-align: center;
    overflow: hidden;
    transition: transform var(--ml-transition), box-shadow var(--ml-transition), border-color var(--ml-transition);
}

/* Tone is carried by a top accent bar and the figure colour, so the tile
   surface stays neutral and a row of tiles reads as one set. */
.ml-tile::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 3px;
    background: transparent;
}

.ml-tile--neutral::before { background: var(--ml-border-strong); }
.ml-tile--primary::before { background: var(--ml-primary); }
.ml-tile--success::before { background: var(--ml-success); }
.ml-tile--warning::before { background: var(--ml-warning); }
.ml-tile--danger::before  { background: var(--ml-danger); }
.ml-tile--info::before    { background: var(--ml-info); }

.ml-tile-value {
    font-size: var(--ml-fs-xl);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.03em;
    font-variant-numeric: tabular-nums;
    color: var(--ml-text);
}

.ml-tile--primary .ml-tile-value { color: var(--ml-primary); }
.ml-tile--success .ml-tile-value { color: var(--ml-success); }
.ml-tile--warning .ml-tile-value { color: var(--ml-warning); }
.ml-tile--danger  .ml-tile-value { color: var(--ml-danger); }
.ml-tile--info    .ml-tile-value { color: var(--ml-info); }

.ml-tile-label {
    font-size: var(--ml-fs-sm);
    font-weight: 500;
    color: var(--ml-text-muted);
}

.ml-tile-link { display: block; height: 100%; color: inherit; }

.ml-tile-link:hover .ml-tile,
.ml-tile-link:focus-visible .ml-tile {
    transform: translateY(-2px);
    border-color: var(--ml-border-strong);
    box-shadow: var(--ml-shadow-md);
}

/* --- Definition list (detail pages) ------------------------------------ */

.ml-detail-list {
    display: grid;
    grid-template-columns: minmax(7.5rem, 12rem) 1fr;
    gap: var(--ml-sp-3) var(--ml-sp-4);
    margin: 0;
}

.ml-detail-list dt {
    font-size: var(--ml-fs-sm);
    font-weight: 500;
    color: var(--ml-text-muted);
}

.ml-detail-list dd {
    margin: 0;
    font-weight: 500;
    overflow-wrap: anywhere;
}

/* ==========================================================================
   5. Forms & filters
   ========================================================================== */

.form-label,
.ml-label {
    display: block;
    font-size: var(--ml-fs-sm);
    font-weight: 500;
    color: var(--ml-text-muted);
    margin-bottom: var(--ml-sp-1);
}

/* Compact label used inside the filter bar. */
.ml-filter-label {
    display: block;
    font-size: var(--ml-fs-xs);
    font-weight: 600;
    color: var(--ml-text-muted);
    margin-bottom: var(--ml-sp-1);
}

.form-control,
.form-select {
    background-color: var(--ml-surface);
    border: 1px solid var(--ml-border-strong);
    border-radius: var(--ml-radius-sm);
    color: var(--ml-text);
    font-size: var(--ml-fs-base);
    padding: 0.5rem 0.75rem;
    transition: border-color var(--ml-transition), box-shadow var(--ml-transition);
}

.form-control-sm,
.form-select-sm {
    font-size: var(--ml-fs-sm);
    padding: 0.375rem 0.625rem;
    border-radius: var(--ml-radius-sm);
}

.form-control::placeholder { color: var(--ml-text-subtle); }

.form-control:focus,
.form-select:focus {
    border-color: var(--ml-primary);
    box-shadow: var(--ml-ring);
}

/* --- Filter bar --------------------------------------------------------- */

/* Flex rather than a 12-column grid: every control sits on one line at desktop
   width and wraps as a whole field when there isn't room, instead of snapping
   to fixed column fractions that forced the dates onto a second row. */
.ml-filters {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--ml-sp-3);
    background: var(--ml-surface);
    border: 1px solid var(--ml-border);
    border-radius: var(--ml-radius);
    box-shadow: var(--ml-shadow-sm);
    padding: var(--ml-sp-4);
    margin: 0 0 var(--ml-sp-4);
}

.ml-filters-title {
    flex: 0 0 100%;
    font-size: var(--ml-fs-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--ml-text-muted);
    margin-bottom: 0;
}

/* One field slot. The basis is a target, not a floor — fields share the free
   space evenly and only wrap once they'd go below min-width. */
.ml-field {
    flex: 1 1 9rem;
    min-width: 8.5rem;
}

/* Free-text search earns more of the leftover room than the selects. */
.ml-field--grow { flex: 2.2 1 12rem; }

/* The trailing submit: sized to its label, never stretched or shrunk. */
.ml-field--action { flex: 0 0 auto; }
.ml-field--action .btn { min-width: 7rem; }

.ml-filters-footer {
    flex: 0 0 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--ml-sp-2);
    margin-top: var(--ml-sp-1);
    padding-top: var(--ml-sp-3);
    border-top: 1px solid var(--ml-border);
}

/* ==========================================================================
   6. Buttons
   ========================================================================== */

.btn {
    --bs-btn-focus-box-shadow: var(--ml-ring);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--ml-sp-2);
    font-family: var(--ml-font);
    font-size: var(--ml-fs-base);
    font-weight: 500;
    line-height: 1.25;
    padding: 0.5rem 0.9rem;
    border-radius: var(--ml-radius-sm);
    border-width: 1px;
    transition: background-color var(--ml-transition), border-color var(--ml-transition),
                color var(--ml-transition), box-shadow var(--ml-transition), transform var(--ml-transition);
}

.btn:active { transform: translateY(1px); }

.btn-sm {
    font-size: var(--ml-fs-sm);
    padding: 0.34rem 0.7rem;
    border-radius: var(--ml-radius-sm);
}

.btn-lg {
    font-size: var(--ml-fs-md);
    padding: 0.65rem 1.1rem;
}

.btn-primary {
    background-color: var(--ml-primary);
    border-color: var(--ml-primary);
    color: #fff;
    box-shadow: 0 1px 2px rgba(52, 87, 255, 0.28);
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary:first-child:active {
    background-color: var(--ml-primary-dark);
    border-color: var(--ml-primary-dark);
    color: #fff;
}

.btn-outline-primary {
    background-color: transparent;
    color: var(--ml-primary);
    border-color: var(--ml-primary-tint-strong);
}

.btn-outline-primary:hover,
.btn-outline-primary:focus,
.btn-outline-primary:active,
.btn-outline-primary:first-child:active {
    background-color: var(--ml-primary);
    border-color: var(--ml-primary);
    color: #fff;
}

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

.btn-outline-secondary:hover,
.btn-outline-secondary:focus,
.btn-outline-secondary:active,
.btn-outline-secondary:first-child:active {
    background-color: var(--ml-surface-hover);
    border-color: var(--ml-border-strong);
    color: var(--ml-text);
}

/* Borderless text button — used for "Clear dates" and other low-weight resets. */
.ml-btn-subtle {
    background: transparent;
    border-color: transparent;
    color: var(--ml-text-muted);
    font-size: var(--ml-fs-sm);
    padding-left: 0.5rem;
    padding-right: 0.5rem;
}

.ml-btn-subtle:hover,
.ml-btn-subtle:focus {
    background: var(--ml-surface-hover);
    border-color: transparent;
    color: var(--ml-primary);
}

/* Destructive variant, for a subtle button that clears or discards rather
   than navigates — "Clear dates" today, any future reset of the same weight. */
.ml-btn-subtle--danger { color: var(--ml-danger); }

.ml-btn-subtle--danger:hover,
.ml-btn-subtle--danger:focus {
    background: var(--ml-danger-tint);
    color: var(--ml-danger);
}

/* --- Segmented control (quick ranges, time-window tabs) ----------------- */

.ml-segmented {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--ml-sp-1);
    padding: var(--ml-sp-1);
    background: var(--ml-surface);
    border: 1px solid var(--ml-border);
    border-radius: var(--ml-radius-pill);
    box-shadow: var(--ml-shadow-sm);
}

.ml-segmented .btn,
.ml-segment {
    display: inline-flex;
    align-items: center;
    border: 1px solid transparent;
    border-radius: var(--ml-radius-pill);
    background: transparent;
    color: var(--ml-text-muted);
    font-size: var(--ml-fs-sm);
    font-weight: 500;
    padding: 0.3rem 0.8rem;
    white-space: nowrap;
    transition: background-color var(--ml-transition), color var(--ml-transition);
}

.ml-segmented .btn:hover,
.ml-segment:hover {
    background: var(--ml-primary-tint);
    color: var(--ml-primary);
}

.ml-segmented .btn.active,
.ml-segment.active {
    background: var(--ml-primary);
    border-color: var(--ml-primary);
    color: #fff;
}

.ml-segmented .btn.active:hover,
.ml-segment.active:hover {
    background: var(--ml-primary-dark);
    color: #fff;
}

/* ==========================================================================
   7. Tables
   ========================================================================== */

.ml-table-wrap {
    background: var(--ml-surface);
    border: 1px solid var(--ml-border);
    border-radius: var(--ml-radius);
    box-shadow: var(--ml-shadow-sm);
    overflow-x: auto;
}

.ml-table {
    width: 100%;
    margin: 0;
    color: var(--ml-text);
    font-size: var(--ml-fs-base);
    border-collapse: separate;
    border-spacing: 0;
}

/* Not sticky: .ml-table-wrap scrolls horizontally, which makes it a scroll
   container with no fixed height, so a sticky header would never actually
   stick and only risks paint artefacts. */
.ml-table thead th {
    background: var(--ml-surface-muted);
    color: var(--ml-text-muted);
    font-size: var(--ml-fs-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    white-space: nowrap;
    text-align: left;
    padding: var(--ml-sp-3) var(--ml-sp-4);
    border-bottom: 1px solid var(--ml-border);
}

.ml-table tbody td {
    padding: var(--ml-sp-3) var(--ml-sp-4);
    border-bottom: 1px solid var(--ml-border);
    vertical-align: middle;
}

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

.ml-table tbody tr { transition: background-color var(--ml-transition); }

.ml-table--hover tbody tr:hover { background-color: var(--ml-surface-hover); }

/* Whole-row link target. The click handler lives in the template; this is
   only the affordance for it. */
.ml-row-link { cursor: pointer; }

/* Right-aligned trailing action column. */
.ml-table .ml-cell-action { text-align: right; white-space: nowrap; }

/* Per-row "Actions" menu (Unpaid page): each item has a one-line hint
   underneath, so the menu explains itself without extra columns. */
.ml-row-actions { min-width: 15rem; }
.ml-row-actions .dropdown-item { white-space: normal; padding-top: 0.4rem; padding-bottom: 0.4rem; }
.ml-row-actions__hint {
    display: block;
    color: var(--ml-text-muted);
    font-size: var(--ml-fs-xs);
}
.ml-row-actions .dropdown-item.text-danger .ml-row-actions__hint { color: var(--ml-text-muted); }

/* Stacked table (data_table(stack=True)): on phones each row becomes a card
   of label/value lines, labelled from each cell's data-label, rather than a
   table the user has to scroll sideways. */
@media (max-width: 767.98px) {
    .ml-table--stack thead { display: none; }
    .ml-table--stack,
    .ml-table--stack tbody,
    .ml-table--stack tr,
    .ml-table--stack td { display: block; width: 100%; }
    .ml-table--stack tbody tr {
        padding: var(--ml-sp-2) 0;
        border-bottom: 1px solid var(--ml-border);
    }
    .ml-table--stack tbody tr:last-child { border-bottom: none; }
    /* Label in the first column, everything in the cell stacked in the
       second, so a cell with several parts (date + badge) stays together. */
    .ml-table--stack tbody td {
        display: grid;
        grid-template-columns: 7.5rem minmax(0, 1fr);
        column-gap: var(--ml-sp-3);
        align-items: start;
        text-align: left;
        white-space: normal;
        padding: var(--ml-sp-1) var(--ml-sp-4);
        border-bottom: none;
    }
    .ml-table--stack tbody td > * { grid-column: 2; justify-self: start; }
    .ml-table--stack tbody td[data-label]::before {
        content: attr(data-label);
        grid-column: 1;
        grid-row: 1 / span 3;
        color: var(--ml-text-muted);
        font-size: var(--ml-fs-xs);
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        text-align: left;
        padding-top: 0.15rem;
    }
    .ml-table--stack tbody td.ml-empty { display: block; text-align: center; }
    .ml-table--stack tbody td.ml-cell-action { padding-top: var(--ml-sp-2); }
}

/* Tablet / small laptop: same table, tighter cells, so it still fits
   without scrolling sideways. */
@media (min-width: 768px) and (max-width: 1199.98px) {
    .ml-table--stack thead th,
    .ml-table--stack tbody td { padding-left: var(--ml-sp-2); padding-right: var(--ml-sp-2); }
    .ml-table--stack thead th:first-child,
    .ml-table--stack tbody td:first-child { padding-left: var(--ml-sp-4); }
}

.ml-table .ml-cell-num { font-variant-numeric: tabular-nums; }

/* Compact secondary tables on detail pages. */
.ml-table--compact thead th { padding: var(--ml-sp-2) var(--ml-sp-4); }
.ml-table--compact tbody td { padding: var(--ml-sp-2) var(--ml-sp-4); font-size: var(--ml-fs-sm); }

/* ==========================================================================
   8. Badges — soft status pills
   ========================================================================== */

.ml-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--ml-sp-1);
    padding: 0.2rem 0.55rem;
    border-radius: var(--ml-radius-pill);
    border: 1px solid transparent;
    font-size: var(--ml-fs-xs);
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: 0.01em;
    white-space: nowrap;
    background: var(--ml-neutral-tint);
    color: var(--ml-neutral);
}

.ml-badge--neutral { background: var(--ml-neutral-tint); color: var(--ml-neutral); }
.ml-badge--primary { background: var(--ml-primary-tint); color: var(--ml-primary-darker); }
.ml-badge--success { background: var(--ml-success-tint); color: var(--ml-success); }
.ml-badge--warning { background: var(--ml-warning-tint); color: var(--ml-warning); }
.ml-badge--danger  { background: var(--ml-danger-tint);  color: var(--ml-danger); }
.ml-badge--info    { background: var(--ml-info-tint);    color: var(--ml-info); }

.ml-badge--count {
    justify-content: center;
    min-width: 1.375rem;
    background: var(--ml-danger);
    color: #fff;
}

/* Clickable badge (appointment chips on a chat thread). */
.ml-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--ml-sp-1);
    padding: 0.25rem 0.6rem;
    border-radius: var(--ml-radius-pill);
    border: 1px solid var(--ml-border-strong);
    background: var(--ml-surface);
    color: var(--ml-text);
    font-size: var(--ml-fs-xs);
    font-weight: 500;
    white-space: nowrap;
    transition: border-color var(--ml-transition), background-color var(--ml-transition);
}

.ml-chip:hover {
    background: var(--ml-primary-tint);
    border-color: var(--ml-primary-tint-strong);
    color: var(--ml-primary-darker);
}

/* Bootstrap badges still used anywhere get the same proportions. */
.badge { font-weight: 600; padding: 0.35em 0.6em; border-radius: var(--ml-radius-pill); }

/* ==========================================================================
   9. Feedback — alerts, empty states, pagination
   ========================================================================== */

.alert {
    display: flex;
    align-items: flex-start;
    gap: var(--ml-sp-3);
    border: 1px solid transparent;
    border-radius: var(--ml-radius);
    box-shadow: var(--ml-shadow-sm);
    font-size: var(--ml-fs-base);
    padding: var(--ml-sp-3) var(--ml-sp-4);
    margin-bottom: var(--ml-sp-4);
}

.alert-success { background: var(--ml-success-tint); border-color: rgba(15, 138, 84, 0.2); color: #0b6b41; }
.alert-warning { background: var(--ml-warning-tint); border-color: rgba(161, 92, 0, 0.2); color: #7d4700; }
.alert-danger  { background: var(--ml-danger-tint);  border-color: rgba(200, 50, 74, 0.2); color: #a3283c; }
.alert-info    { background: var(--ml-info-tint);    border-color: rgba(11, 111, 156, 0.2); color: #0a5a80; }

.alert-dismissible { padding-right: var(--ml-sp-6); }
.alert .btn-close { padding: var(--ml-sp-3); }

/* --- Empty state -------------------------------------------------------- */

.ml-empty {
    padding: var(--ml-sp-6) var(--ml-sp-4);
    text-align: center;
    color: var(--ml-text-muted);
    font-size: var(--ml-fs-sm);
}

.ml-table .ml-empty { border-bottom: none; }

/* --- Pagination --------------------------------------------------------- */

.ml-pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ml-sp-3);
    margin-top: var(--ml-sp-4);
    padding: var(--ml-sp-2) var(--ml-sp-3);
    background: var(--ml-surface);
    border: 1px solid var(--ml-border);
    border-radius: var(--ml-radius);
    box-shadow: var(--ml-shadow-sm);
}

.ml-pagination .btn { border-radius: var(--ml-radius-pill); }

.ml-pagination-status {
    font-size: var(--ml-fs-sm);
    color: var(--ml-text-muted);
    font-variant-numeric: tabular-nums;
    text-align: center;
}

/* ==========================================================================
   10. Chat
   ========================================================================== */

.ml-thread-list {
    display: flex;
    flex-direction: column;
    background: var(--ml-surface);
    border: 1px solid var(--ml-border);
    border-radius: var(--ml-radius);
    box-shadow: var(--ml-shadow-sm);
    overflow: hidden;
}

.ml-thread {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--ml-sp-4);
    padding: var(--ml-sp-3) var(--ml-sp-4);
    border-bottom: 1px solid var(--ml-border);
    color: inherit;
    transition: background-color var(--ml-transition);
}

.ml-thread:last-child { border-bottom: none; }
.ml-thread:hover { background: var(--ml-surface-hover); }

.ml-thread-main { min-width: 0; }
.ml-thread-name { font-weight: 600; }
.ml-thread-meta { font-size: var(--ml-fs-sm); color: var(--ml-text-muted); }

.ml-thread-preview {
    font-size: var(--ml-fs-sm);
    color: var(--ml-text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 60vw;
}

.ml-thread-side {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: var(--ml-sp-1);
    white-space: nowrap;
}

.ml-chat-window {
    display: flex;
    flex-direction: column;
    gap: var(--ml-sp-1);
    max-height: 55vh;
    overflow-y: auto;
    padding: var(--ml-sp-4);
    background: var(--ml-surface);
    border: 1px solid var(--ml-border);
    border-radius: var(--ml-radius);
    box-shadow: var(--ml-shadow-sm);
    margin-bottom: var(--ml-sp-3);
}

.ml-bubble {
    max-width: 80%;
    padding: var(--ml-sp-2) var(--ml-sp-3);
    margin-bottom: var(--ml-sp-2);
    border-radius: var(--ml-radius-lg);
    font-size: var(--ml-fs-base);
    line-height: var(--ml-lh-base);
    overflow-wrap: anywhere;
}

.ml-bubble.inbound {
    align-self: flex-start;
    background: var(--ml-neutral-tint);
    color: var(--ml-text);
    border-bottom-left-radius: var(--ml-radius-sm);
}

.ml-bubble.outbound {
    align-self: flex-end;
    background: var(--ml-primary);
    color: #fff;
    border-bottom-right-radius: var(--ml-radius-sm);
}

.ml-bubble-meta {
    display: block;
    margin-top: var(--ml-sp-1);
    font-size: var(--ml-fs-xs);
    opacity: 0.72;
}

.ml-composer {
    display: flex;
    gap: var(--ml-sp-2);
    align-items: center;
}

.ml-composer .form-control { flex: 1 1 auto; }

/* ==========================================================================
   11. Login
   ========================================================================== */

.ml-login {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: var(--ml-sp-5) var(--ml-sp-4);
}

body:has(.ml-login) {
    background: radial-gradient(circle at 50% 0%, #212a49 0%, #131a2e 55%, #0b0e1a 100%);
}

body:has(.ml-login) .ml-main { padding-top: 0; padding-bottom: 0; }

.ml-login-card {
    width: 100%;
    max-width: 22.5rem;
    padding: var(--ml-sp-5);
    background: var(--ml-surface);
    border: none;
    border-radius: var(--ml-radius-lg);
    box-shadow: var(--ml-shadow-lg);
}

.ml-login-brand {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--ml-sp-2);
    margin-bottom: var(--ml-sp-5);
}

.ml-login-brand .ml-brand-mark {
    width: 2.5rem;
    height: 2.5rem;
    background: var(--ml-navy);
    font-size: var(--ml-fs-sm);
}

.ml-login-title {
    font-size: var(--ml-fs-md);
    font-weight: 650;
    margin: 0;
}

.ml-login-card .form-label { color: var(--ml-text); font-weight: 500; }
.ml-login-card .ml-field { margin-bottom: var(--ml-sp-4); }

/* Login is the one page rendered outside the app shell, so its own alerts
   need the surface treatment the dark backdrop would otherwise swallow. */
body:has(.ml-login) .alert { max-width: 22.5rem; margin-inline: auto; }

/* ==========================================================================
   12. Responsive
   ========================================================================== */

@media (max-width: 991.98px) {
    .ml-navbar .navbar-collapse {
        margin-top: var(--ml-sp-2);
        padding-top: var(--ml-sp-2);
        border-top: 1px solid rgba(255, 255, 255, 0.1);
    }

    .ml-navbar .nav-link { padding: var(--ml-sp-2) var(--ml-sp-3); }
    .ml-navbar .navbar-text { display: block; padding: var(--ml-sp-2) var(--ml-sp-3) 0; }
}

@media (max-width: 767.98px) {
    .ml-detail-list { grid-template-columns: minmax(6rem, 8rem) 1fr; gap: var(--ml-sp-2) var(--ml-sp-3); }
    .ml-filters { padding: var(--ml-sp-3); }
    /* Once the fields have wrapped, a full-width submit reads as "apply all
       of the above" rather than as one more field in the row. */
    .ml-field--action { flex: 1 1 100%; }
    .ml-field--action .btn { width: 100%; }
}

@media (max-width: 575.98px) {
    .ml-main {
        padding-top: var(--ml-sp-4);
        padding-left: var(--ml-sp-3);
        padding-right: var(--ml-sp-3);
    }

    :root { --ml-fs-xl: 1.75rem; --ml-fs-lg: 1.25rem; }

    .ml-table thead th,
    .ml-table tbody td { padding: var(--ml-sp-2) var(--ml-sp-3); }

    .ml-pagination { flex-direction: row; gap: var(--ml-sp-2); }
    .ml-pagination-status { font-size: var(--ml-fs-xs); }
    .ml-bubble { max-width: 90%; }
    .ml-thread-preview { max-width: 55vw; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
    }
    .ml-tile-link:hover .ml-tile { transform: none; }
    .btn:active { transform: none; }
}