/* ==========================================================================
   InstaMed Portal — Dashboard layer (operator-style)
   Loaded after portal.css. Overrides shared portal classes with a calm,
   high-density, work-surface aesthetic. Uses ONLY the existing color
   tokens from main.css and portal.css — palette unchanged.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. EXTENDED TOKEN LAYER
   Adds dashboard-specific tokens on top of the existing palette. No new
   hues — these are recombinations of the tokens already in main.css /
   portal.css to give the work surface its operational character.
   -------------------------------------------------------------------------- */

:root {
    /* Workspace surfaces — sit just above the existing ladder */
    --d-bg:           var(--surface-page);      /* page (--surface-page = #FAFBFE) */
    --d-surface:      var(--surface-card);      /* primary work surface */
    --d-rail:         var(--surface-tinted);    /* sidebar, secondary rail */
    --d-band:         #F4F7FB;                  /* status band, sub-headers */

    /* Hairlines — pulled from existing portal tokens */
    --d-hairline:     var(--hairline);
    --d-hairline-2:   var(--hairline-strong);

    /* Ink — typography colors */
    --d-ink:          var(--ink-strong);
    --d-ink-body:     var(--ink-default);
    --d-ink-muted:    var(--ink-muted);
    --d-ink-subtle:   var(--ink-subtle);

    /* Accents — the existing palette, used SPARINGLY here */
    --d-accent:       var(--primary);           /* #1E88E5 — primary actions, focus */
    --d-accent-bg:    rgba(30, 136, 229, 0.06); /* tint for selected rows */
    --d-warn:         var(--warning);
    --d-error:        var(--error);
    --d-ok:           var(--success);

    /* Live state dots — semantic colors at 8px circles */
    --d-dot-pending:  var(--warning);
    --d-dot-active:   var(--primary);
    --d-dot-ok:       var(--success);
    --d-dot-idle:     var(--gray-400);

    /* Type system — dashboards use mono for IDs/timestamps */
    --d-font-mono:    "JetBrains Mono", "SF Mono", "Roboto Mono", ui-monospace, Menlo, monospace;
    --d-font-sans:    var(--font-sans, "Inter", system-ui, -apple-system, sans-serif);

    /* Type scale — slightly tighter than marketing scale */
    --d-fs-label:     11px;   /* caps labels */
    --d-fs-meta:      12px;   /* mono metadata */
    --d-fs-body:      13.5px; /* table cells */
    --d-fs-row:       14px;   /* primary row text */
    --d-fs-title:     16px;   /* section titles */
    --d-fs-h1:        22px;   /* page H1 (subordinate to work) */
    --d-fs-data:      28px;   /* primary numeric (count-up) */

    /* Spacing — dashboard density */
    --d-pad-cell:     10px 14px;
    --d-pad-section:  16px 18px;
    --d-pad-band:     12px 18px;

    /* Borders + radius — flatter than marketing radius */
    --d-radius:       6px;
    --d-radius-pill:  4px;
}

/* --------------------------------------------------------------------------
   2. PAGE FRAME
   Sidebar narrower, denser. Main surface uses the tinted page background
   so cards have something to sit on visually.
   -------------------------------------------------------------------------- */

body.instamed-portal {
    background: var(--d-bg);
    color: var(--d-ink-body);
    font-family: var(--d-font-sans);
    font-size: var(--d-fs-body);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body.instamed-portal .site-main {
    grid-template-columns: 232px 1fr;
}

@media (max-width: 900px) {
    body.instamed-portal .site-main {
        grid-template-columns: 1fr;
    }
}

/* --------------------------------------------------------------------------
   3. SIDEBAR
   Compact, tinted, with proper SVG icons (no emoji). Status dot on the
   user card for active session indicator.
   -------------------------------------------------------------------------- */

.portal-sidebar {
    background: var(--d-rail);
    border-right: 1px solid var(--d-hairline);
    padding: 14px 12px 12px;
    gap: 4px;
}

.portal-logo {
    padding: 6px 10px 18px;
    border-bottom: 1px solid var(--d-hairline);
    margin-bottom: 10px;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--d-ink);
    display: flex;
    align-items: center;
    gap: 10px;
}

.portal-logo .logo-mark {
    width: 22px;
    height: 22px;
    background: var(--d-ink);
    color: white;
    border-radius: 5px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: -0.04em;
}

.portal-logo .logo-word {
    font-size: 13.5px;
    color: var(--d-ink);
}

/* Nav section label */
.portal-nav-section {
    font-family: var(--d-font-sans);
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--d-ink-subtle);
    padding: 14px 10px 6px;
}

.portal-nav ul { gap: 1px; }

.portal-nav-link {
    padding: 7px 10px;
    border-radius: var(--d-radius);
    font-size: 13px;
    font-weight: 500;
    color: var(--d-ink-body);
    gap: 10px;
    transition: background 100ms linear, color 100ms linear;
}

.portal-nav-link:hover {
    background: rgba(15, 23, 42, 0.04);
    color: var(--d-ink);
}

.portal-nav-link.is-active {
    background: var(--d-surface);
    color: var(--d-ink);
    box-shadow: 0 0 0 1px var(--d-hairline);
    font-weight: 600;
}

.portal-nav-icon {
    width: 16px;
    height: 16px;
    color: var(--d-ink-muted);
    flex: 0 0 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.portal-nav-link.is-active .portal-nav-icon { color: var(--d-accent); }
.portal-nav-icon svg { width: 16px; height: 16px; stroke-width: 1.75; }

.portal-nav-badge {
    margin-left: auto;
    font-family: var(--d-font-mono);
    font-size: 10.5px;
    font-weight: 600;
    color: var(--d-ink-muted);
    background: rgba(15, 23, 42, 0.06);
    padding: 1px 6px;
    border-radius: 4px;
    min-width: 18px;
    text-align: center;
    font-variant-numeric: tabular-nums;
}
.portal-nav-link.is-active .portal-nav-badge {
    background: var(--d-accent-bg);
    color: var(--d-accent);
}

/* User card at the bottom — compact identity strip */
.portal-user {
    margin-top: auto;
    padding-top: 10px;
    border-top: 1px solid var(--d-hairline);
}

.portal-user-card {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: var(--d-radius);
    background: var(--d-surface);
    box-shadow: 0 0 0 1px var(--d-hairline);
    position: relative;
}

.portal-avatar {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    background: var(--d-ink);
    color: white;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.02em;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.portal-user-info strong {
    display: block;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--d-ink);
    line-height: 1.25;
}

.portal-user-tier {
    font-family: var(--d-font-mono);
    font-size: 10.5px;
    font-weight: 500;
    color: var(--d-ink-subtle);
    letter-spacing: 0.02em;
}

/* Status dot on user card */
.portal-user-card::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translateY(-50%);
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--d-ok);
    box-shadow: 0 0 0 2px var(--d-rail);
}

.portal-logout {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
    padding: 7px 10px;
    font-size: 12px;
    font-weight: 500;
    color: var(--d-ink-muted);
    border-radius: var(--d-radius);
    transition: color 100ms linear, background 100ms linear;
}
.portal-logout:hover {
    color: var(--d-ink);
    background: rgba(15, 23, 42, 0.04);
}
.portal-logout svg { width: 13px; height: 13px; stroke-width: 1.75; }

/* --------------------------------------------------------------------------
   4. MAIN WORK SURFACE
   Slim outer padding, no marketing hero. Page header is subordinate to
   the work — short title + a status band immediately below.
   -------------------------------------------------------------------------- */

.portal-main {
    padding: 18px 22px 28px;
    max-width: 1280px;
    width: 100%;
}

@media (max-width: 700px) {
    .portal-main { padding: 14px; }
}

/* Compact page header — work is the hero, not the title */
.portal-page-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 12px;
    gap: 20px;
    flex-wrap: wrap;
}

.portal-page-header h1 {
    font-size: var(--d-fs-h1);
    font-weight: 700;
    color: var(--d-ink);
    letter-spacing: -0.015em;
    margin: 0;
    line-height: 1.2;
}

.portal-page-header p,
.portal-page-header time {
    font-family: var(--d-font-mono);
    font-size: var(--d-fs-meta);
    color: var(--d-ink-subtle);
    letter-spacing: 0.02em;
    margin: 0;
}

/* --------------------------------------------------------------------------
   5. STATUS BAND
   The dashboard's actual hero. A horizontal slab showing live state —
   not "Welcome" copy. Numbers in tabular mono, separators between facts.
   -------------------------------------------------------------------------- */

.d-status-band {
    display: flex;
    align-items: center;
    gap: 0;
    padding: 0;
    background: var(--d-surface);
    border: 1px solid var(--d-hairline);
    border-radius: var(--d-radius);
    margin-bottom: 16px;
    overflow: hidden;
}

.d-status-cell {
    flex: 1;
    min-width: 0;
    padding: 14px 18px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    position: relative;
}

.d-status-cell + .d-status-cell::before {
    content: "";
    position: absolute;
    left: 0;
    top: 12px;
    bottom: 12px;
    width: 1px;
    background: var(--d-hairline);
}

.d-status-cell-label {
    font-size: var(--d-fs-label);
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--d-ink-subtle);
}

.d-status-cell-value {
    font-size: var(--d-fs-data);
    font-weight: 600;
    color: var(--d-ink);
    line-height: 1.1;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
    display: flex;
    align-items: baseline;
    gap: 8px;
}

.d-status-cell-value .unit {
    font-size: 13px;
    font-weight: 500;
    color: var(--d-ink-muted);
    letter-spacing: 0;
}

.d-status-cell-meta {
    font-family: var(--d-font-mono);
    font-size: var(--d-fs-meta);
    color: var(--d-ink-muted);
    font-variant-numeric: tabular-nums;
}

.d-status-cell-meta .ok    { color: var(--d-ok); }
.d-status-cell-meta .warn  { color: var(--d-warn); }
.d-status-cell-meta .alert { color: var(--d-error); }

/* --------------------------------------------------------------------------
   6. WORK LAYOUT
   Two-column work surface: primary queue + secondary inspection rail.
   Falls back to single column under 1000px.
   -------------------------------------------------------------------------- */

.d-work {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 16px;
    align-items: start;
}
@media (max-width: 1100px) {
    .d-work { grid-template-columns: 1fr; }
}

.d-panel {
    background: var(--d-surface);
    border: 1px solid var(--d-hairline);
    border-radius: var(--d-radius);
    overflow: hidden;
}

.d-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-bottom: 1px solid var(--d-hairline);
    background: linear-gradient(180deg, var(--d-band) 0%, transparent 100%);
}

.d-panel-head h2,
.d-panel-head h3 {
    font-size: var(--d-fs-title);
    font-weight: 600;
    color: var(--d-ink);
    margin: 0;
    letter-spacing: -0.005em;
    display: flex;
    align-items: center;
    gap: 8px;
}

.d-panel-head .d-count {
    font-family: var(--d-font-mono);
    font-size: 11.5px;
    font-weight: 500;
    color: var(--d-ink-muted);
    background: rgba(15, 23, 42, 0.05);
    padding: 1px 6px;
    border-radius: 4px;
    font-variant-numeric: tabular-nums;
}

.d-panel-head .d-actions {
    display: flex;
    align-items: center;
    gap: 6px;
}

.d-panel-head .d-link {
    font-size: 12.5px;
    font-weight: 500;
    color: var(--d-accent);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 3px;
}
.d-panel-head .d-link:hover { text-decoration: underline; }

/* --------------------------------------------------------------------------
   7. QUEUE / TABLE
   Real table semantics with dashboard density. Mono for IDs and
   timestamps, status dots before status labels, hover row highlight.
   -------------------------------------------------------------------------- */

.d-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--d-fs-body);
}

.d-table thead th {
    text-align: left;
    padding: 8px 14px;
    font-size: var(--d-fs-label);
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--d-ink-subtle);
    background: var(--d-band);
    border-bottom: 1px solid var(--d-hairline);
    white-space: nowrap;
}

.d-table tbody tr {
    border-bottom: 1px solid var(--d-hairline);
    transition: background 80ms linear;
}
.d-table tbody tr:last-child { border-bottom: none; }
.d-table tbody tr:hover { background: rgba(15, 23, 42, 0.02); }
.d-table tbody tr.is-active { background: var(--d-accent-bg); }

.d-table tbody td {
    padding: var(--d-pad-cell);
    vertical-align: middle;
    color: var(--d-ink-body);
}

.d-table td.d-id,
.d-table td.d-time,
.d-table td.d-num {
    font-family: var(--d-font-mono);
    font-size: var(--d-fs-meta);
    color: var(--d-ink-muted);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.d-table td.d-num {
    text-align: right;
    color: var(--d-ink);
    font-weight: 500;
}

.d-table td.d-title {
    font-weight: 500;
    color: var(--d-ink);
    max-width: 320px;
}
.d-table td.d-title a {
    color: var(--d-ink);
    text-decoration: none;
}
.d-table td.d-title a:hover { color: var(--d-accent); }

.d-table td.d-title .d-title-sub {
    display: block;
    font-size: 12px;
    color: var(--d-ink-muted);
    font-weight: 400;
    margin-top: 1px;
}

/* --------------------------------------------------------------------------
   8. STATUS PILLS / DOTS
   Compact, single-line, dot + label. Hold the existing semantic colors
   but lay them out as a precise tool-surface chip rather than a balloon.
   -------------------------------------------------------------------------- */

.d-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 2px 8px 2px 6px;
    border-radius: var(--d-radius-pill);
    font-size: 11.5px;
    font-weight: 600;
    line-height: 1.4;
    background: rgba(15, 23, 42, 0.06);
    color: var(--d-ink-body);
    letter-spacing: 0.01em;
    white-space: nowrap;
}

.d-status::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--d-dot-idle);
    flex: 0 0 6px;
}

.d-status.d-status--submitted    { background: rgba(237, 108, 2, 0.08); color: #B45309; }
.d-status.d-status--submitted::before    { background: var(--warning); }

.d-status.d-status--in-review,
.d-status.d-status--in_review    { background: rgba(30, 136, 229, 0.08); color: #1E40AF; }
.d-status.d-status--in-review::before,
.d-status.d-status--in_review::before { background: var(--primary); }

.d-status.d-status--completed    { background: rgba(46, 125, 50, 0.10); color: #166534; }
.d-status.d-status--completed::before { background: var(--success); }

.d-status.d-status--draft,
.d-status.d-status--cancelled    { background: rgba(15, 23, 42, 0.06); color: var(--d-ink-muted); }

.d-status.d-status--paid         { background: rgba(46, 125, 50, 0.10); color: #166534; }
.d-status.d-status--paid::before { background: var(--success); }

.d-status.d-status--issued,
.d-status.d-status--collected    { background: rgba(30, 136, 229, 0.08); color: #1E40AF; }
.d-status.d-status--issued::before,
.d-status.d-status--collected::before { background: var(--primary); }

.d-status.d-status--returned,
.d-status.d-status--overdue      { background: rgba(211, 47, 47, 0.08); color: #991B1B; }
.d-status.d-status--returned::before,
.d-status.d-status--overdue::before { background: var(--error); }

/* Priority flag — distinct from status, drawn as a thin tag */
.d-flag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-family: var(--d-font-mono);
    font-size: 10.5px;
    font-weight: 600;
    color: var(--warning);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.d-flag::before {
    content: "▲";
    font-size: 8px;
    line-height: 1;
}
.d-flag.d-flag--urgent { color: var(--error); }

/* Live state badges (small accent next to title) */
.d-badge {
    display: inline-block;
    padding: 1px 6px;
    border-radius: 4px;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    margin-left: 6px;
    vertical-align: 1px;
    line-height: 1.4;
}
.d-badge--upgrade      { background: rgba(94, 53, 177, 0.10); color: #5E35B1; }
.d-badge--consultation { background: rgba(0, 191, 166, 0.10); color: #00897B; }
.d-badge--manual       { background: rgba(237, 108, 2, 0.10); color: #B45309; }

/* --------------------------------------------------------------------------
   9. ACTIVITY RAIL
   Right-column secondary panel: condensed event stream. Uses mono for
   timestamps, no bullets, single-line entries.
   -------------------------------------------------------------------------- */

.d-rail {
    background: var(--d-surface);
    border: 1px solid var(--d-hairline);
    border-radius: var(--d-radius);
    overflow: hidden;
}

.d-rail-head {
    padding: 10px 14px;
    border-bottom: 1px solid var(--d-hairline);
    background: var(--d-band);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.d-rail-head h3 {
    font-size: 13px;
    font-weight: 600;
    color: var(--d-ink);
    margin: 0;
    letter-spacing: -0.005em;
}

.d-rail-head .d-live {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-family: var(--d-font-mono);
    font-size: 10.5px;
    color: var(--d-ink-muted);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.d-rail-head .d-live::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--d-ok);
    animation: d-pulse 2.4s ease-in-out infinite;
}

@keyframes d-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.35; }
}

.d-rail-list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.d-rail-list li {
    padding: 10px 14px;
    border-bottom: 1px solid var(--d-hairline);
    display: grid;
    grid-template-columns: 56px 1fr;
    gap: 10px;
    align-items: start;
}
.d-rail-list li:last-child { border-bottom: none; }

.d-rail-time {
    font-family: var(--d-font-mono);
    font-size: 11.5px;
    color: var(--d-ink-subtle);
    letter-spacing: 0.02em;
    font-variant-numeric: tabular-nums;
    padding-top: 1px;
}

.d-rail-event {
    font-size: 13px;
    color: var(--d-ink-body);
    line-height: 1.4;
}
.d-rail-event strong {
    font-weight: 600;
    color: var(--d-ink);
}
.d-rail-event a {
    color: var(--d-accent);
    text-decoration: none;
}
.d-rail-event a:hover { text-decoration: underline; }

/* --------------------------------------------------------------------------
   10. QUOTA SLAB
   The tier / usage display. Slim progress bar, mono numbers, no card
   chrome. Sits as a horizontal slab, not a stat card.
   -------------------------------------------------------------------------- */

.d-quota {
    margin-top: 16px;
    background: var(--d-surface);
    border: 1px solid var(--d-hairline);
    border-radius: var(--d-radius);
    padding: 14px 18px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 18px;
    align-items: center;
}

.d-quota-meta {
    display: flex;
    align-items: baseline;
    gap: 10px;
    flex-wrap: wrap;
}
.d-quota-meta .label {
    font-size: var(--d-fs-label);
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--d-ink-subtle);
}
.d-quota-meta .tier {
    font-size: 14px;
    font-weight: 600;
    color: var(--d-ink);
}
.d-quota-meta .usage {
    font-family: var(--d-font-mono);
    font-size: 12.5px;
    color: var(--d-ink-muted);
    font-variant-numeric: tabular-nums;
}
.d-quota-meta .usage .used { color: var(--d-ink); font-weight: 600; }

.d-quota-bar {
    grid-column: 1 / -1;
    height: 4px;
    background: rgba(15, 23, 42, 0.06);
    border-radius: 999px;
    overflow: hidden;
    position: relative;
}
.d-quota-bar-fill {
    position: absolute;
    inset: 0;
    background: var(--d-accent);
    border-radius: inherit;
    transform-origin: left;
    /* Width is set inline (style attribute) per template */
    transition: width 400ms var(--ease-out, ease-out);
}
.d-quota-bar-fill.is-warn  { background: var(--d-warn); }
.d-quota-bar-fill.is-alert { background: var(--d-error); }

.d-quota-cta {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--d-accent);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
}
.d-quota-cta:hover { text-decoration: underline; }
.d-quota-cta svg   { width: 12px; height: 12px; }

/* --------------------------------------------------------------------------
   11. ACTION RAIL
   Compact horizontal action row at the top (after status band). Used for
   "Start a case", search, filter — small buttons in a row, not card grid.
   -------------------------------------------------------------------------- */

.d-actionbar {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 14px;
    flex-wrap: wrap;
}

.d-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 12px;
    border-radius: var(--d-radius);
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: -0.005em;
    color: var(--d-ink);
    background: var(--d-surface);
    border: 1px solid var(--d-hairline);
    cursor: pointer;
    transition: background 100ms linear, border-color 100ms linear, color 100ms linear;
    text-decoration: none;
    line-height: 1.4;
}
.d-btn:hover {
    background: var(--d-band);
    color: var(--d-ink);
    border-color: var(--d-hairline-2);
}
.d-btn svg { width: 13px; height: 13px; stroke-width: 1.75; }

.d-btn.d-btn--primary {
    background: var(--d-ink);
    color: white;
    border-color: var(--d-ink);
}
.d-btn.d-btn--primary:hover {
    background: #000;
    border-color: #000;
    color: white;
}

.d-btn.d-btn--accent {
    background: var(--d-accent);
    color: white;
    border-color: var(--d-accent);
}
.d-btn.d-btn--accent:hover {
    background: var(--primary-dark);
    border-color: var(--primary-dark);
}

.d-btn.d-btn--ghost {
    background: transparent;
    border-color: transparent;
    color: var(--d-ink-muted);
}
.d-btn.d-btn--ghost:hover {
    background: rgba(15, 23, 42, 0.05);
    color: var(--d-ink);
}

/* Search input — command-bar style */
.d-search {
    flex: 1;
    min-width: 220px;
    max-width: 360px;
    position: relative;
}
.d-search input {
    width: 100%;
    padding: 7px 30px 7px 32px;
    border: 1px solid var(--d-hairline);
    border-radius: var(--d-radius);
    background: var(--d-surface);
    font-size: 13px;
    color: var(--d-ink);
    font-family: var(--d-font-sans);
    transition: border-color 100ms linear, box-shadow 100ms linear;
}
.d-search input:focus {
    outline: none;
    border-color: var(--d-accent);
    box-shadow: 0 0 0 3px var(--d-accent-bg);
}
.d-search input::placeholder { color: var(--d-ink-subtle); }
.d-search-icon {
    position: absolute;
    left: 9px;
    top: 50%;
    transform: translateY(-50%);
    width: 14px;
    height: 14px;
    color: var(--d-ink-subtle);
    pointer-events: none;
}
.d-search-icon svg { width: 14px; height: 14px; stroke-width: 1.75; }

.d-search-kbd {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    font-family: var(--d-font-mono);
    font-size: 10.5px;
    color: var(--d-ink-subtle);
    background: var(--d-band);
    padding: 2px 5px;
    border-radius: 3px;
    border: 1px solid var(--d-hairline);
    pointer-events: none;
}

/* Filter chip */
.d-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    border-radius: var(--d-radius-pill);
    font-size: 12px;
    font-weight: 500;
    color: var(--d-ink-muted);
    background: transparent;
    border: 1px solid var(--d-hairline);
    cursor: pointer;
    line-height: 1.4;
    text-decoration: none;
    transition: all 100ms linear;
    white-space: nowrap;
}
.d-chip:hover {
    color: var(--d-ink);
    border-color: var(--d-hairline-2);
}
.d-chip.is-active {
    background: var(--d-ink);
    color: white;
    border-color: var(--d-ink);
}
.d-chip .d-count {
    font-family: var(--d-font-mono);
    font-size: 11px;
    font-variant-numeric: tabular-nums;
    color: inherit;
    opacity: 0.7;
}

/* --------------------------------------------------------------------------
   12. EMPTY STATE
   No emoji. A real instruction with a primary action.
   -------------------------------------------------------------------------- */

.d-empty {
    padding: 48px 24px;
    text-align: center;
    color: var(--d-ink-muted);
}
.d-empty-icon {
    width: 44px;
    height: 44px;
    margin: 0 auto 12px;
    border-radius: 10px;
    background: var(--d-band);
    color: var(--d-ink-subtle);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.d-empty-icon svg { width: 22px; height: 22px; stroke-width: 1.5; }
.d-empty h3 {
    font-size: 14px;
    font-weight: 600;
    color: var(--d-ink);
    margin: 0 0 4px;
}
.d-empty p {
    font-size: 12.5px;
    color: var(--d-ink-muted);
    margin: 0 0 14px;
}

/* --------------------------------------------------------------------------
   13. KEYBOARD SHORTCUT
   Inline kbd tag styling for help text.
   -------------------------------------------------------------------------- */

kbd {
    font-family: var(--d-font-mono);
    font-size: 11px;
    color: var(--d-ink);
    background: var(--d-surface);
    padding: 1px 5px;
    border-radius: 3px;
    border: 1px solid var(--d-hairline);
    box-shadow: 0 1px 0 var(--d-hairline);
}

/* --------------------------------------------------------------------------
   14. PRINT — sane defaults if a patient prints a case page
   -------------------------------------------------------------------------- */

@media print {
    .portal-sidebar,
    .d-actionbar,
    .d-rail { display: none; }
    .d-panel, .d-status-band, .d-quota { border: 1px solid #999; box-shadow: none; }
    body.instamed-portal .site-main { grid-template-columns: 1fr; }
    .portal-main { max-width: none; padding: 0; }
}

/* --------------------------------------------------------------------------
   15. REDUCED MOTION
   Per the dashboards skill: live-state motion is helpful, but respect
   the OS preference.
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    .d-rail-head .d-live::before { animation: none; }
    .d-table tbody tr,
    .d-btn,
    .d-chip,
    .portal-nav-link,
    .portal-logout { transition: none; }
    .d-quota-bar-fill { transition: none; }
}

/* --------------------------------------------------------------------------
   16. LEGACY CLASS BRIDGE
   The redesign retemplated dashboard, cases, queue, and billing. Three
   smaller portal pages still use the older `.portal-card` / `.case-status`
   / `.empty-state` / `.portal-page-header` markup (messages, records,
   profile, case-new). Rather than rewrite them, we restyle the legacy
   classes here so they sit visually inside the new system.
   -------------------------------------------------------------------------- */

body.instamed-portal .portal-page-header h1 {
    font-size: var(--d-fs-h1);
    font-weight: 700;
    letter-spacing: -0.015em;
    color: var(--d-ink);
}
body.instamed-portal .portal-page-header p {
    font-family: var(--d-font-mono);
    font-size: var(--d-fs-meta);
    color: var(--d-ink-subtle);
    letter-spacing: 0.02em;
}

body.instamed-portal .portal-card {
    background: var(--d-surface);
    border: 1px solid var(--d-hairline);
    border-radius: var(--d-radius);
    padding: 16px 18px;
    box-shadow: none;
}

body.instamed-portal .portal-card .card-header {
    padding: 0 0 12px;
    border-bottom: 1px solid var(--d-hairline);
    margin: -16px -18px 16px;
    padding: 12px 18px;
    background: linear-gradient(180deg, var(--d-band) 0%, transparent 100%);
}
body.instamed-portal .portal-card .card-header h3 {
    font-size: var(--d-fs-title);
    font-weight: 600;
    color: var(--d-ink);
    margin: 0;
    letter-spacing: -0.005em;
}

body.instamed-portal .case-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 2px 8px 2px 6px;
    border-radius: var(--d-radius-pill);
    font-size: 11.5px;
    font-weight: 600;
    line-height: 1.4;
    background: rgba(15, 23, 42, 0.06);
    color: var(--d-ink-body);
    letter-spacing: 0.01em;
    white-space: nowrap;
}
body.instamed-portal .case-status::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--d-dot-idle);
    flex: 0 0 6px;
}
body.instamed-portal .case-status-submitted    { background: rgba(237, 108, 2, 0.08); color: #B45309; }
body.instamed-portal .case-status-submitted::before { background: var(--warning); }
body.instamed-portal .case-status-in_review,
body.instamed-portal .case-status-in-review    { background: rgba(30, 136, 229, 0.08); color: #1E40AF; }
body.instamed-portal .case-status-in_review::before,
body.instamed-portal .case-status-in-review::before { background: var(--primary); }
body.instamed-portal .case-status-completed    { background: rgba(46, 125, 50, 0.10); color: #166534; }
body.instamed-portal .case-status-completed::before { background: var(--success); }

body.instamed-portal .empty-state {
    padding: 40px 24px;
    text-align: center;
    color: var(--d-ink-muted);
}
body.instamed-portal .empty-state .empty-icon { display: none; }
body.instamed-portal .empty-state h3 {
    font-size: 14px;
    font-weight: 600;
    color: var(--d-ink);
    margin: 0 0 4px;
}
body.instamed-portal .empty-state p {
    font-size: 12.5px;
    color: var(--d-ink-muted);
    margin: 0 0 14px;
}
body.instamed-portal .empty-state .btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 12px;
    border-radius: var(--d-radius);
    font-size: 12.5px;
    font-weight: 600;
    background: var(--d-ink);
    color: white;
    border: 1px solid var(--d-ink);
    text-decoration: none;
}

/* Generic buttons in legacy templates */
body.instamed-portal .btn,
body.instamed-portal .btn-primary,
body.instamed-portal .btn-secondary {
    border-radius: var(--d-radius);
    font-size: 12.5px;
    font-weight: 600;
    padding: 7px 12px;
    letter-spacing: -0.005em;
}
body.instamed-portal .btn-primary {
    background: var(--d-ink);
    color: white;
    border-color: var(--d-ink);
}

/* Form inputs across the portal — calmer borders + focus ring */
body.instamed-portal .portal-card input[type="text"],
body.instamed-portal .portal-card input[type="email"],
body.instamed-portal .portal-card input[type="tel"],
body.instamed-portal .portal-card input[type="date"],
body.instamed-portal .portal-card input[type="number"],
body.instamed-portal .portal-card select,
body.instamed-portal .portal-card textarea {
    border: 1px solid var(--d-hairline);
    border-radius: var(--d-radius);
    background: var(--d-surface);
    font-family: var(--d-font-sans);
    font-size: 13.5px;
    color: var(--d-ink);
    padding: 8px 10px;
    transition: border-color 100ms linear, box-shadow 100ms linear;
}
body.instamed-portal .portal-card input:focus,
body.instamed-portal .portal-card select:focus,
body.instamed-portal .portal-card textarea:focus {
    outline: none;
    border-color: var(--d-accent);
    box-shadow: 0 0 0 3px var(--d-accent-bg);
}
body.instamed-portal .portal-card label {
    font-size: var(--d-fs-label);
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--d-ink-subtle);
}