/*
 | Residieons 2.0 — the design system's component layer.
 |
 | app.css holds the tokens. This file holds the parts the Claude Design
 | package draws the same way on every screen: KPI cards, data tables,
 | drawers, filter panels, toasts, segmented controls, wizards, bar charts,
 | document previews.
 |
 | It exists so no screen invents its own version of a shared component. Every
 | value here is lifted from "claude design/README.md" or from the .dc.html
 | prototypes' inline styles — read literally, as the package's fidelity note
 | asks. Where a number appears in a comment it is the design's own.
 |
 | Layered after app.css, so it may use every --rd-* token.
 |
 | Rule for anyone adding to this file: a rule belongs here only if two or
 | more screens draw the thing. One screen's layout belongs in that screen's
 | module stylesheet.
 */

/* ==========================================================================
   1. Animation — the design's complete set. Nothing else animates.
   ========================================================================== */

@keyframes rdFadeIn   { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: none; } }
@keyframes rdPopIn    { from { opacity: 0; transform: translateY(-6px) scale(.99); } to { opacity: 1; transform: none; } }
@keyframes rdSlideIn  { from { opacity: 0; transform: translateX(18px); } to { opacity: 1; transform: none; } }
@keyframes rdSlideDown { from { opacity: 0; max-height: 0; } to { opacity: 1; max-height: 520px; } }
@keyframes rdToastIn  { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes rdShake    { 10%, 90% { transform: translateX(-1px); } 20%, 80% { transform: translateX(2px); } 30%, 50%, 70% { transform: translateX(-4px); } 40%, 60% { transform: translateX(4px); } }

.rd-fade-in   { animation: rdFadeIn .18s ease; }
.rd-pop-in    { animation: rdPopIn .17s ease; }
.rd-shake     { animation: rdShake .35s ease; }

/* v2 motion — declared once (DESIGN-SPEC §6). Only on mount, never on data change. */
@keyframes rdRise    { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes rdGrowY   { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes rdGrowX   { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes rdDraw    { from { stroke-dashoffset: 1200; } to { stroke-dashoffset: 0; } }
@keyframes rdRing    { from { stroke-dashoffset: 340; } }
@keyframes rdFade    { from { opacity: 0; } to { opacity: 1; } }
@keyframes rdPop     { from { opacity: 0; transform: scale(.85); } to { opacity: 1; transform: none; } }
@keyframes rdFloat   { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes rdPulse   { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .35; transform: scale(1.6); } }
@keyframes rdShimmer { 0% { background-position: -240% 0; } 100% { background-position: 240% 0; } }

.rd-rise { animation: rdRise .45s ease both; }
.rd-rise-card { animation: rdRise .5s ease both; }

/*
 | animation: none, not a zero duration — a zeroed duration keeps the delay and
 | fill-mode, so an element holds opacity:0 through its delay and then pops in.
 | Every animated element is fully visible with no animation at all.
 */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; }
    .rd-progress-fill { transition: none !important; }
}

/* ==========================================================================
   2. Type — the design's scale, as utilities.
   ========================================================================== */

.rd-h1     { font-family: var(--rd-heading-font); font-size: 26px; font-weight: 800; margin: 0; letter-spacing: -.02em; color: var(--rd-text-primary); }
.rd-h2     { font-family: var(--rd-heading-font); font-size: 18px; font-weight: 800; margin: 0; letter-spacing: -.01em; color: var(--rd-text-primary); }
.rd-h3     { font-family: var(--rd-heading-font); font-size: 15.5px; font-weight: 800; margin: 0; color: var(--rd-text-primary); }
.rd-h4     { font-family: var(--rd-heading-font); font-size: 14px; font-weight: 800; margin: 0; color: var(--rd-text-primary); }
.rd-display { font-family: var(--rd-heading-font); font-size: 28px; font-weight: 800; letter-spacing: -.02em; margin: 0; }
.rd-figure  { font-family: var(--rd-heading-font); font-size: 34px; font-weight: 800; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
/* 11px/700, 0.09em, uppercase — the design's section kicker. */
.rd-kicker {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--rd-text-meta);
}

/* 11px/600, 0.05em, uppercase — field labels. */
.rd-label {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--rd-text-muted);
}

.rd-meta  { font-size: 12px; color: var(--rd-text-meta); line-height: 1.45; }
.rd-help  { font-size: 12px; color: var(--rd-text-muted); line-height: 1.5; }
.rd-faint { color: var(--rd-text-faint); }
.rd-mono  { font-family: var(--rd-mono-font); font-weight: 600; font-variant-numeric: tabular-nums; }

/* Money, counts, percentages, dates, times, phones, IDs. Non-negotiable. */
.rd-tnum { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }

/* ==========================================================================
   3. Tone pills — bg + border + fg + dot, never colour alone.
   ========================================================================== */

.rd-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: var(--rd-radius-pill);
    font-size: 11.5px;
    font-weight: 800;
    line-height: 1.35;
    border: 0;
    background: var(--rd-plain-bg);
    color: var(--rd-plain-fg);
    white-space: nowrap;
}

.rd-pill::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--rd-plain-dot);
    flex: none;
}
.rd-pill-bare::before { display: none; }

.rd-pill-ok   { background: var(--rd-ok-bg);   border-color: var(--rd-ok-bd);   color: var(--rd-ok-fg); }
.rd-pill-info { background: var(--rd-info-bg); border-color: var(--rd-info-bd); color: var(--rd-info-fg); }
.rd-pill-warn { background: var(--rd-warn-bg); border-color: var(--rd-warn-bd); color: var(--rd-warn-fg); }
.rd-pill-bad  { background: var(--rd-bad-bg);  border-color: var(--rd-bad-bd);  color: var(--rd-bad-fg); }
.rd-pill-navy { background: var(--rd-primary-light); color: var(--rd-primary-ink); }
.rd-pill-accent { background: var(--rd-accent-light); color: var(--rd-accent-ink); }
.rd-pill-accent::before { background: var(--rd-accent); }
.rd-pill-gold { background: var(--rd-secondary-light); color: var(--rd-secondary-ink); }
.rd-pill-gold::before { background: var(--rd-secondary); }

.rd-pill-ok::before   { background: var(--rd-ok-dot); }
.rd-pill-info::before { background: var(--rd-info-dot); }
.rd-pill-warn::before { background: var(--rd-warn-dot); }
.rd-pill-bad::before  { background: var(--rd-bad-dot); }
.rd-pill-navy::before { background: var(--rd-primary); }

/* 10px/700, 0.1em — micro badges. */
.rd-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 7px;
    border-radius: var(--rd-radius-pill);
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
    border: 1px solid var(--rd-plain-bd);
    background: var(--rd-plain-bg);
    color: var(--rd-plain-fg);
}

.rd-badge-ok   { background: var(--rd-ok-bg);   border-color: var(--rd-ok-bd);   color: var(--rd-ok-fg); }
.rd-badge-info { background: var(--rd-info-bg); border-color: var(--rd-info-bd); color: var(--rd-info-fg); }
.rd-badge-warn { background: var(--rd-warn-bg); border-color: var(--rd-warn-bd); color: var(--rd-warn-fg); }
.rd-badge-bad  { background: var(--rd-bad-bg);  border-color: var(--rd-bad-bd);  color: var(--rd-bad-fg); }
.rd-badge-navy { background: var(--rd-navy-tint); border-color: var(--rd-navy-border); color: var(--rd-navy); }

/* ==========================================================================
   4. Cards and panels
   ========================================================================== */

.rd-card-header {
    padding: 16px 18px;
    border-bottom: 1px solid var(--rd-hairline);
    display: flex;
    align-items: center;
    gap: 10px;
}

.rd-card-header > :first-child { flex: 1; min-width: 0; }
.rd-card-body   { padding: 16px 18px; }
.rd-card-footer {
    padding: 11px 16px;
    border-top: 1px solid var(--rd-hairline);
    background: var(--rd-surface-alt);
    font-size: 12px;
    color: var(--rd-text-muted);
}

.rd-card-tight  { padding: 0; }

/* Inset panel inside a card. */
.rd-inset {
    background: var(--rd-surface-alt);
    border: 1px solid var(--rd-hairline);
    border-radius: var(--rd-radius-inset);
    padding: 12px 14px;
}

.rd-inset-warn { background: var(--rd-amber-inset); border-color: var(--rd-warn-bd); }
.rd-inset-bad  { background: var(--rd-red-inset);   border-color: var(--rd-bad-bd); }
.rd-inset-navy { background: var(--rd-primary-light); border-color: var(--rd-primary-mid); }
.rd-inset-info { background: var(--rd-primary-light); border-color: var(--rd-primary-mid); color: var(--rd-text-secondary); }

/* A dashed affordance — empty slots, fallback rules, drop targets. */
.rd-dashed {
    border: 1px dashed var(--rd-navy-border);
    border-radius: var(--rd-radius-inset);
    padding: 14px;
    background: var(--rd-surface);
}

/* ==========================================================================
   5. KPI cards — white, radius 12, 3px tone left border. The delta pill's
   colour comes from an explicit `good` flag, never from the direction: a
   falling cost per booking is good, a rising overdue is bad.
   ========================================================================== */

.rd-kpi-strip {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 14px;
    margin-bottom: 18px;
}

.rd-kpi {
    position: relative;
    min-width: 0;
    background: var(--rd-surface);
    border: 1px solid var(--rd-border);
    border-radius: var(--rd-radius-card);
    padding: 18px;
    box-shadow: var(--rd-shadow-card);
    transition: transform .15s, border-color .15s;
    animation: rdRise .5s ease both;
    --kpi-tone: var(--rd-plain-dot);
}

.rd-kpi:hover { transform: translateY(-2px); border-color: var(--rd-primary-mid); }
.rd-kpi-strip > .rd-kpi:nth-child(2) { animation-delay: .05s; }
.rd-kpi-strip > .rd-kpi:nth-child(3) { animation-delay: .1s; }
.rd-kpi-strip > .rd-kpi:nth-child(4) { animation-delay: .15s; }
.rd-kpi-strip > .rd-kpi:nth-child(n+5) { animation-delay: .2s; }

/*
 | The tone is a dot beside the label. The v2 design draws a 4px coloured strip
 | across the top; on a rounded card that is the curved coloured edge the owner
 | ruled out, so the same colour carries the same meaning as a dot.
 */
.rd-kpi-ok   { --kpi-tone: var(--rd-accent); }
.rd-kpi-info { --kpi-tone: var(--rd-primary); }
.rd-kpi-warn { --kpi-tone: var(--rd-secondary); }
.rd-kpi-bad  { --kpi-tone: var(--rd-danger); background: var(--rd-danger-light); border-color: var(--rd-danger-border); }
.rd-kpi-bad .rd-kpi-label { color: var(--rd-danger); }
.rd-kpi-navy { --kpi-tone: var(--rd-primary); }

.rd-kpi-label::before {
    content: "";
    flex: none;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--kpi-tone);
}

.rd-kpi-label {
    font-size: 11.5px;
    font-weight: 800;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--rd-text-meta);
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 7px;
}

.rd-kpi-value {
    font-family: var(--rd-heading-font);
    font-size: 30px;
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -.03em;
    font-variant-numeric: tabular-nums;
    color: var(--rd-text-primary);
}

.rd-kpi-bad .rd-kpi-value { color: var(--rd-danger); }

.rd-kpi-foot {
    margin-top: 8px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 7px;
    font-size: 12px;
    color: var(--rd-text-meta);
}

/* Inverted stat card — kpiAccentBg carries white text (§3, dark surfaces). */
.rd-kpi-dark { background: var(--rd-kpi-accent-bg); border-color: transparent; color: var(--rd-kpi-accent-fg); }
.rd-kpi-dark .rd-kpi-label, .rd-kpi-dark .rd-kpi-foot { color: rgba(255,255,255,.78); }
.rd-kpi-dark .rd-kpi-value { color: #fff; }
.rd-kpi-dark .rd-kpi-label::before { background: rgba(255,255,255,.85); }
.rd-delta {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 2px 7px;
    border-radius: var(--rd-radius-pill);
    font-size: 12px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    background: var(--rd-plain-bg);
    color: var(--rd-plain-fg);
}

.rd-delta-good { background: var(--rd-success-light); color: var(--rd-success-ink); }
.rd-delta-bad  { background: var(--rd-bad-bg); color: var(--rd-bad-fg); }

/* ==========================================================================
   6. Data tables — the leads list sets the convention every table follows.
   ========================================================================== */

.rd-table-wrap {
    background: var(--rd-surface);
    border: 1px solid var(--rd-border);
    border-radius: var(--rd-radius-card);
    box-shadow: var(--rd-shadow-card);
    overflow: auto;
    max-height: none;
    /* A containing block, so absolutely positioned children — Bootstrap's
       .visually-hidden labels in the cells — are clipped by this scroller
       instead of anchoring to <body> and widening the whole page. */
    position: relative;
}

.table-responsive { position: relative; }

/* A wrap that scrolls internally, so header and totals can stick. */
.rd-table-scroll { max-height: calc(100vh - 260px); }

.rd-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 13px;
    color: var(--rd-text-3);
    margin: 0;
}

.rd-table th,
.rd-table td {
    padding: 12px 14px;
    text-align: left;
    vertical-align: middle;
    border-bottom: 1px solid var(--rd-border);
    white-space: nowrap;
}

.rd-table th:first-child, .rd-table td:first-child { padding-left: 18px; }
.rd-table th:last-child, .rd-table td:last-child { padding-right: 18px; }

.rd-table thead th {
    position: sticky;
    top: 0;
    z-index: 11;
    background: var(--rd-surface-alt);
    border-bottom: 1px solid var(--rd-border);
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--rd-text-meta);
}

.rd-table tbody tr             { background: var(--rd-surface); transition: background .15s; }
.rd-table tbody tr:hover       { background: var(--rd-surface-alt); }
.rd-table tbody tr:last-child td { border-bottom: 0; }
.rd-table tbody tr.is-selected,
.rd-table tbody tr.is-selected td { background: var(--rd-primary-light); }
.rd-table tbody tr.is-overdue  { background: var(--rd-danger-light); }
/* Sticky first column, where the row's identity is what you scroll against. */
.rd-table .rd-col-id {
    position: sticky;
    left: 0;
    z-index: 2;
    background: inherit;
    border-right: 1px solid var(--rd-border);
}

.rd-table thead .rd-col-id {
    z-index: 12;
    background: var(--rd-surface-alt);
}

/* Second sticky identity column, for tables that need name + status pinned. */
.rd-table .rd-col-id-2 {
    position: sticky;
    z-index: 2;
    background: inherit;
    border-right: 1px solid var(--rd-border);
}

.rd-table thead .rd-col-id-2 { z-index: 12; background: var(--rd-surface-alt); }

/* Totals row: sticky to the bottom on canvas, with a strong top border. */
.rd-table tfoot td {
    position: sticky;
    bottom: 0;
    z-index: 10;
    background: var(--rd-surface-alt);
    border-top: 1px solid var(--rd-border);
    border-bottom: none;
    font-weight: 800;
    color: var(--rd-text);
}

.rd-table tfoot td.rd-col-id { z-index: 11; background: var(--rd-surface-alt); }

/* Sortable header: a button showing caret-up / caret-down / dash. The dash is
   drawn on every sortable column, so which columns sort is visible without
   clicking one to find out. */
.rd-sort {
    text-transform: inherit;
    letter-spacing: inherit;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: none;
    border: 0;
    padding: 0;
    font: inherit;
    color: inherit;
    cursor: pointer;
}

.rd-sort:hover { color: var(--rd-navy); }
.rd-sort .bi   { font-size: 10px; color: var(--rd-text-faint); }
.rd-sort.is-sorted { color: var(--rd-text); }
.rd-sort.is-sorted .bi { color: var(--rd-navy); }

/* A zero renders faint, so the eye lands on real numbers. */
.rd-zero { color: var(--rd-text-faint); }

/* An inline proportion bar inside a percentage cell. */
.rd-cell-bar {
    display: inline-block;
    vertical-align: middle;
    width: 46px;
    height: 4px;
    border-radius: 999px;
    background: var(--rd-n-100);
    margin-right: 7px;
    overflow: hidden;
}

.rd-cell-bar > span {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: var(--rd-accent);
}

/* Tinted "after" column in a before -> after preview table. */
.rd-col-after      { background: var(--rd-tint-col) !important; border-left: 1px solid var(--rd-tint-col-edge); }
.rd-table tbody tr:nth-child(even) .rd-col-after { background: var(--rd-tint-col-alt) !important; }

/* Grand-total row inside a cost sheet: navy tint, navy 15px/600. */
.rd-total-row td {
    background: var(--rd-navy-tint);
    color: var(--rd-navy);
    font-size: 15px;
    font-weight: 600;
}

/* ==========================================================================
   7. Toolbars, filter panels and chips
   ========================================================================== */

.rd-toolbar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 12px;
}

.rd-toolbar-spacer { flex: 1; }

.rd-tool-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 32px;
    padding: 0 10px;
    border-radius: var(--rd-radius-toolbar);
    border: 1px solid var(--rd-border-strong);
    background: var(--rd-surface);
    color: var(--rd-text-3);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
}

.rd-tool-btn:hover { background: var(--rd-canvas); color: var(--rd-text); text-decoration: none; }
.rd-tool-btn .bi   { font-size: 13px; }

/* Active treatment, carrying its own count: "Filters · 2". */
.rd-tool-btn.is-active {
    background: var(--rd-navy-tint);
    border-color: var(--rd-navy-border);
    color: var(--rd-navy);
}

.rd-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 27px;
    height: 27px;
    border-radius: var(--rd-radius-toolbar);
    border: 1px solid var(--rd-border-strong);
    background: var(--rd-surface);
    color: var(--rd-text-muted);
    cursor: pointer;
    flex: none;
}

.rd-icon-btn:hover { background: var(--rd-canvas); color: var(--rd-text); }
.rd-icon-btn .bi   { font-size: 12px; }

/* Search field with a leading icon. */
.rd-search {
    position: relative;
    flex: 1;
    min-width: 200px;
    max-width: 380px;
}

.rd-search .bi {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 13px;
    color: var(--rd-text-faint);
    pointer-events: none;
}

.rd-search input {
    width: 100%;
    height: 32px;
    padding: 0 10px 0 30px;
    border-radius: var(--rd-radius-toolbar);
    border: 1px solid var(--rd-border-strong);
    background: var(--rd-surface);
    font-size: 13px;
    color: var(--rd-text);
}

.rd-search input:focus {
    outline: none;
    border-color: var(--rd-navy);
    box-shadow: var(--rd-focus-ring);
}

/* Expands inline below the toolbar, never as an overlay. */
.rd-filter-panel {
    background: var(--rd-surface);
    border: 1px solid var(--rd-border);
    border-radius: var(--rd-radius-card);
    padding: 13px 14px;
    margin-bottom: 12px;
    overflow: hidden;
    animation: rdSlideDown .2s ease;
}

.rd-filter-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding: 7px 0;
}

.rd-filter-row + .rd-filter-row { border-top: 1px solid var(--rd-hairline); }
.rd-filter-row > .rd-label { width: 110px; flex: none; }

/* A filter chip toggles on click; active goes solid navy. */
.rd-chip-toggle {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    border-radius: var(--rd-radius-pill);
    border: 1px solid var(--rd-border-strong);
    background: var(--rd-surface);
    color: var(--rd-text-3);
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
}

.rd-chip-toggle:hover { background: var(--rd-canvas); }

.rd-chip-toggle.is-on {
    background: var(--rd-primary-light);
    border-color: var(--rd-primary);
    color: var(--rd-primary-ink);
    font-weight: 800;
}

/* Segmented control — surfaceAlt track, active item on primaryLight with ink text. */
.rd-seg {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 3px;
    padding: 4px;
    background: var(--rd-surface-alt);
    border: 1px solid var(--rd-border);
    border-radius: 12px;
}

.rd-seg-item {
    border: 0;
    background: none;
    border-radius: 9px;
    padding: 7px 13px;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--rd-text-meta);
    cursor: pointer;
    white-space: nowrap;
    min-height: 32px;
    transition: background .15s, color .15s;
}

.rd-seg-item:hover { color: var(--rd-text-primary); background: var(--rd-surface); }

.rd-seg-item.is-on {
    background: var(--rd-surface);
    color: var(--rd-primary-ink);
    font-weight: 800;
    box-shadow: 0 1px 3px rgba(31,27,22,.08);
}
/* ==========================================================================
   8. Left rails — settings and reports use a wider one than the app nav.
   ========================================================================== */

.rd-split {
    display: flex;
    align-items: flex-start;
    gap: 16px;
}

.rd-rail {
    width: var(--rd-rail-w);
    flex: none;
    background: var(--rd-surface);
    border: 1px solid var(--rd-border);
    border-radius: var(--rd-radius-card);
    padding: 10px;
    box-shadow: var(--rd-shadow-card);
    position: sticky;
    top: calc(var(--rd-stick) + 14px);
}

.rd-rail-narrow { width: 232px; }

.rd-rail-group + .rd-rail-group { margin-top: 12px; }

.rd-rail-group-label {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--rd-text-faint);
    padding: 4px 8px;
}

.rd-rail-link {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 9px;
    border-radius: var(--rd-radius-toolbar);
    font-size: 13px;
    font-weight: 500;
    color: var(--rd-text-3);
    text-decoration: none;
}

.rd-rail-link:hover { background: var(--rd-canvas); color: var(--rd-text); text-decoration: none; }

.rd-rail-link.is-active {
    background: var(--rd-navy-tint);
    color: var(--rd-navy);
    font-weight: 600;
}

.rd-rail-link .rd-rail-meta { margin-left: auto; font-size: 11px; color: var(--rd-text-faint); }

.rd-split-main { flex: 1; min-width: 0; }

@media (max-width: 991.98px) {
    .rd-split { flex-direction: column; }
    .rd-rail  { width: 100%; position: static; }
}

/* ==========================================================================
   9. Drawers — they push content, they do not overlay it, so the table
   beside them stays readable while a record is open.
   ========================================================================== */

.rd-drawer {
    width: 352px;
    flex: none;
    align-self: flex-start;
    background: var(--rd-surface);
    border: 1px solid var(--rd-border);
    border-radius: var(--rd-radius-card);
    box-shadow: var(--rd-shadow-card);
    animation: rdSlideIn .2s ease;
    position: sticky;
    top: calc(var(--rd-stick) + 14px);
    max-height: calc(100vh - var(--rd-stick) - 90px);
    display: flex;
    flex-direction: column;
}

.rd-drawer-narrow { width: 330px; }
.rd-drawer-wide   { width: 376px; }

.rd-drawer-head {
    padding: 13px 14px;
    border-bottom: 1px solid var(--rd-hairline);
    display: flex;
    align-items: flex-start;
    gap: 10px;
    flex: none;
}

.rd-drawer-title { font-size: 17px; font-weight: 600; margin: 0; }

.rd-drawer-close {
    width: 26px;
    height: 26px;
    flex: none;
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--rd-radius-toolbar);
    border: 1px solid var(--rd-border-strong);
    background: var(--rd-surface);
    color: var(--rd-text-muted);
    cursor: pointer;
}

.rd-drawer-close:hover { background: var(--rd-canvas); color: var(--rd-text); }
.rd-drawer-body { padding: 14px; overflow: auto; flex: 1; }

.rd-drawer-foot {
    padding: 11px 14px;
    border-top: 1px solid var(--rd-hairline);
    background: var(--rd-surface-alt);
    display: flex;
    gap: 8px;
    flex: none;
}

@media (max-width: 1199.98px) {
    .rd-drawer, .rd-drawer-narrow, .rd-drawer-wide {
        width: 100%;
        position: static;
        max-height: none;
    }
}

/* ==========================================================================
   10. Toasts — fixed, bottom centre. A reversible action carries its Undo
   here, in navy-mid on the dark ground.
   ========================================================================== */

.rd-toast-dock {
    position: fixed;
    left: 50%;
    bottom: 22px;
    transform: translateX(-50%);
    z-index: 1080;
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: center;
    pointer-events: none;
}

/* Where a wizard has a sticky footer the dock clears it. */
.rd-toast-dock-raised { bottom: 78px; }

.rd-toast {
    pointer-events: auto;
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--rd-n-900);
    color: #FFFFFF;
    font-size: 13px;
    padding: 10px 14px;
    border-radius: var(--rd-radius-block);
    box-shadow: var(--rd-shadow-toast);
    animation: rdToastIn .22s ease;
    max-width: min(560px, calc(100vw - 32px));
}

.rd-toast-action {
    background: none;
    border: 0;
    padding: 0;
    color: var(--rd-navy-mid);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
}

.rd-toast-action:hover { color: #FFFFFF; text-decoration: underline; }

/* ==========================================================================
   11. Wizards — numbered strip, sticky footer, and a footnote that states
   what the next step will actually do.
   ========================================================================== */

.rd-steps {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}

.rd-steps-item {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 12px 6px 7px;
    border-radius: var(--rd-radius-pill);
    border: 1px solid transparent;
    background: none;
    font-size: 13px;
    font-weight: 500;
    color: var(--rd-text-faint);
    cursor: default;
}

.rd-steps-marker {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 700;
    background: var(--rd-n-100);
    border: 1px solid var(--rd-n-300);
    color: var(--rd-text-faint);
    flex: none;
}

/*
 | A future step shows a dash, a done step a check, a current step its number.
 | Drawn here rather than by each wizard: the product has four of them
 | (import, demand run, booking, provisioning) and they must not disagree
 | about what a completed step looks like.
 |
 | The glyph is content on the marker, so a wizard that already writes its
 | number into the marker keeps it for the current step and has it replaced
 | for the other two.
 */
.rd-steps-item:not(.is-current):not(.is-done) .rd-steps-marker { font-size: 0; }
.rd-steps-item:not(.is-current):not(.is-done) .rd-steps-marker::after {
    content: "–";
    font-size: 11px;
}

.rd-steps-item.is-done .rd-steps-marker { font-size: 0; }
.rd-steps-item.is-done .rd-steps-marker::after {
    content: "✓";
    font-size: 11px;
    font-weight: 700;
}

.rd-steps-item.is-done {
    color: var(--rd-text-3);
    cursor: pointer;
}

.rd-steps-item.is-done .rd-steps-marker { background: var(--rd-ok-bg); border-color: var(--rd-ok-bd); color: var(--rd-ok-fg); }

.rd-steps-item.is-current {
    color: var(--rd-text);
    font-weight: 600;
    background: var(--rd-navy-tint);
    border-color: var(--rd-navy-border);
}

.rd-steps-item.is-current .rd-steps-marker { background: var(--rd-navy); border-color: var(--rd-navy); color: #FFFFFF; }
.rd-steps-sep { color: var(--rd-n-300); font-size: 11px; }

.rd-sticky-foot {
    position: sticky;
    bottom: 0;
    z-index: 20;
    margin: 18px -20px -40px;
    padding: 12px 20px;
    background: var(--rd-surface);
    border-top: 1px solid var(--rd-border);
    box-shadow: var(--rd-shadow-sticky);
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

/* The bleed must match .rd-content's gutter, which drops to 16px on a phone —
   at -20px the bar stuck out 4px and gave every form a sideways scroll. */
@media (max-width: 767.98px) {
    .rd-sticky-foot { margin: 18px -16px -32px; padding: 12px 16px; }
}

.rd-sticky-foot-note {
    font-size: 12px;
    color: var(--rd-text-muted);
    flex: 1;
    min-width: 200px;
}

/* ==========================================================================
   12. Charts — CSS boxes. No library, no gradient, no load animation.
   ========================================================================== */

.rd-bars { display: flex; flex-direction: column; gap: 9px; }

.rd-bar-row {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 12px;
}

.rd-bar-label { width: 150px; flex: none; color: var(--rd-text-3); }

.rd-bar-track {
    flex: 1;
    height: 10px;
    border-radius: 999px;
    background: var(--rd-n-100);
    overflow: hidden;
}

.rd-bar-fill {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: var(--rd-navy);
    transition: width .38s linear;
}

.rd-bar-fill-2   { background: var(--rd-navy-mid); }
.rd-bar-fill-ok  { background: var(--rd-ok-dot); }
.rd-bar-fill-warn{ background: var(--rd-warn-dot); }
.rd-bar-fill-bad { background: var(--rd-bad-dot); }

.rd-bar-value {
    width: 86px;
    flex: none;
    text-align: right;
    font-variant-numeric: tabular-nums;
    color: var(--rd-text);
    font-weight: 600;
}

/* A stacked availability bar — sold / blocked / on hold / free. */
.rd-stack {
    display: flex;
    height: 8px;
    border-radius: 999px;
    overflow: hidden;
    background: var(--rd-n-100);
}

.rd-stack > span { display: block; height: 100%; }

/* Funnel rows. The percentage is of the PREVIOUS stage, not of the top —
   that is the only way the drop-off reads correctly. */
.rd-funnel-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 0;
    font-size: 12px;
    border-bottom: 1px solid var(--rd-hairline);
}

.rd-funnel-row:last-child { border-bottom: 0; }
.rd-funnel-label { width: 150px; flex: none; font-weight: 500; color: var(--rd-text-3); }
.rd-funnel-count { width: 80px; flex: none; text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; color: var(--rd-text); }
.rd-funnel-pct   { width: 62px; flex: none; text-align: right; font-variant-numeric: tabular-nums; color: var(--rd-text-muted); }
.rd-funnel-drop  { width: 96px; flex: none; text-align: right; font-variant-numeric: tabular-nums; color: var(--rd-bad-fg); }

/* Progress bar with a live fill. */
.rd-progress {
    height: 6px;
    border-radius: 999px;
    background: var(--rd-n-100);
    overflow: hidden;
}

.rd-progress-tall { height: 10px; }

.rd-progress-fill {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: var(--rd-navy);
    transition: width .38s linear;
}

/* ==========================================================================
   13. The insight block — every report names its finding in words. A number
   without an interpretation is work passed to the reader.
   ========================================================================== */

.rd-insights { display: flex; flex-direction: column; gap: 12px; }

.rd-insight { display: flex; gap: 11px; align-items: flex-start; }

.rd-insight-icon {
    width: 28px;
    height: 28px;
    flex: none;
    border-radius: var(--rd-radius-tile);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    background: var(--rd-plain-bg);
    color: var(--rd-plain-fg);
}

.rd-insight-ok   .rd-insight-icon { background: var(--rd-ok-bg);   color: var(--rd-ok-fg); }
.rd-insight-info .rd-insight-icon { background: var(--rd-info-bg); color: var(--rd-info-fg); }
.rd-insight-warn .rd-insight-icon { background: var(--rd-amber-icon); color: var(--rd-warn-fg); }
.rd-insight-bad  .rd-insight-icon { background: var(--rd-bad-bg);  color: var(--rd-bad-fg); }

.rd-insight-text { font-size: 13px; line-height: 1.55; color: var(--rd-text-2); }
.rd-insight-text strong { color: var(--rd-text); font-weight: 600; }

/* ==========================================================================
   14. Document preview — demand notes, receipts, agreements. A page on a
   desk, not a card.
   ========================================================================== */

.rd-desk {
    background: var(--rd-surface-alt);
    border: 1px solid var(--rd-border);
    border-radius: var(--rd-radius-card);
    padding: 22px;
    display: flex;
    justify-content: center;
}

.rd-doc {
    background: #FFFFFF;
    border: 1px solid var(--rd-border);
    border-radius: 4px;
    box-shadow: var(--rd-shadow-doc);
    width: 100%;
    max-width: 660px;
    padding: 30px 34px;
    font-size: 13px;
    line-height: 1.65;
    color: var(--rd-text-2);
}

.rd-doc h1, .rd-doc h2 { color: var(--rd-text); }

.rd-doc-head {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--rd-border-strong);
    margin-bottom: 16px;
}

.rd-doc-table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.rd-doc-table th, .rd-doc-table td { padding: 7px 8px; border-bottom: 1px solid var(--rd-hairline); text-align: left; }
.rd-doc-table th { font-size: 11px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--rd-text-muted); }
.rd-doc-table td.rd-doc-amount, .rd-doc-table th.rd-doc-amount { text-align: right; }

@media print {
    .rd-appbar, .rd-sidebar, .rd-pagehead, .rd-toolbar, .rd-sticky-foot, .rd-toast-dock { display: none !important; }
    .rd-desk { background: none; border: 0; padding: 0; }
    .rd-doc  { box-shadow: none; border: 0; max-width: none; padding: 0; }
}

/* ==========================================================================
   15. Avatars, toggles, definition rows, empty states
   ========================================================================== */

.rd-face {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--rd-navy-soft);
    color: var(--rd-navy);
    font-size: 11px;
    font-weight: 600;
    flex: none;
}

.rd-face-22 { width: 22px; height: 22px; font-size: 10px; }
.rd-face-24 { width: 24px; height: 24px; font-size: 10px; }
.rd-face-30 { width: 30px; height: 30px; font-size: 12px; }
.rd-face-34 { width: 34px; height: 34px; font-size: 13px; }
.rd-face-38 { width: 38px; height: 38px; font-size: 14px; }

/* 42x24 track with an 18px knob. */
.rd-toggle {
    position: relative;
    display: inline-block;
    width: 42px;
    height: 24px;
    flex: none;
}

.rd-toggle input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }

.rd-toggle-track {
    position: absolute;
    inset: 0;
    border-radius: 999px;
    background: var(--rd-n-300);
    transition: background .15s ease;
    pointer-events: none;
}

.rd-toggle-track::after {
    content: "";
    position: absolute;
    top: 3px;
    left: 3px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #FFFFFF;
    transition: transform .15s ease;
}

.rd-toggle input:checked + .rd-toggle-track { background: var(--rd-navy); }
.rd-toggle input:checked + .rd-toggle-track::after { transform: translateX(18px); }
.rd-toggle input:focus-visible + .rd-toggle-track { box-shadow: var(--rd-focus-ring); }
.rd-toggle input:disabled + .rd-toggle-track { background: var(--rd-n-200); }

/* A settings row: label and help on the left, control on the right. */
.rd-setting-row {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 13px 0;
    border-bottom: 1px solid var(--rd-hairline);
}

.rd-setting-row:last-child { border-bottom: 0; }
.rd-setting-row > :first-child { flex: 1; min-width: 0; }
.rd-setting-name { font-size: 13px; font-weight: 600; color: var(--rd-text); }
.rd-setting-help { font-size: 12px; color: var(--rd-text-muted); line-height: 1.5; margin-top: 2px; }
.rd-setting-control { flex: none; min-width: 180px; display: flex; justify-content: flex-end; }

.rd-empty {
    text-align: center;
    padding: 40px 20px;
    color: var(--rd-text-muted);
}

.rd-empty .bi { font-size: 22px; color: var(--rd-n-300); display: block; margin-bottom: 9px; }
.rd-empty-title { font-size: 14px; font-weight: 600; color: var(--rd-text-3); margin-bottom: 4px; }

/* A two-column definition list, for drawers and detail panels. */
.rd-facts { display: grid; grid-template-columns: auto 1fr; gap: 7px 14px; font-size: 13px; margin: 0; }
.rd-facts dt { color: var(--rd-text-muted); font-weight: 400; }
.rd-facts dd { margin: 0; color: var(--rd-text); font-variant-numeric: tabular-nums; }

/* ==========================================================================
   16. Bootstrap component overrides — so existing markup adopts the design
   without every screen being rewritten.
   ========================================================================== */

.btn {
    --bs-btn-font-size: 13px;
    --bs-btn-font-weight: 500;
    --bs-btn-padding-y: .4rem;
    --bs-btn-padding-x: .7rem;
    --bs-btn-border-radius: var(--rd-radius-control);
}

.btn-sm {
    --bs-btn-font-size: 12px;
    --bs-btn-padding-y: .25rem;
    --bs-btn-padding-x: .55rem;
    --bs-btn-border-radius: var(--rd-radius-toolbar);
}

.btn-primary {
    --bs-btn-bg: var(--rd-navy);
    --bs-btn-border-color: var(--rd-navy);
    --bs-btn-hover-bg: var(--rd-navy-hover);
    --bs-btn-hover-border-color: var(--rd-navy-hover);
    --bs-btn-active-bg: var(--rd-navy-deep);
    --bs-btn-active-border-color: var(--rd-navy-deep);
    --bs-btn-disabled-bg: var(--rd-n-100);
    --bs-btn-disabled-border-color: var(--rd-n-300);
    --bs-btn-disabled-color: var(--rd-n-400);
}

.btn-secondary, .btn-outline-secondary {
    --bs-btn-color: var(--rd-text-3);
    --bs-btn-bg: var(--rd-surface);
    --bs-btn-border-color: var(--rd-border-strong);
    --bs-btn-hover-color: var(--rd-text);
    --bs-btn-hover-bg: var(--rd-canvas);
    --bs-btn-hover-border-color: var(--rd-border-strong);
    --bs-btn-active-color: var(--rd-text);
    --bs-btn-active-bg: var(--rd-canvas);
    --bs-btn-active-border-color: var(--rd-border-strong);
    --bs-btn-disabled-color: var(--rd-n-400);
    --bs-btn-disabled-bg: var(--rd-n-100);
    --bs-btn-disabled-border-color: var(--rd-n-300);
}

/* Navy-text button — hovers to the navy tint, per the design's hover rules. */
.btn-outline-primary {
    --bs-btn-color: var(--rd-navy);
    --bs-btn-border-color: var(--rd-navy-border);
    --bs-btn-hover-color: var(--rd-navy);
    --bs-btn-hover-bg: var(--rd-navy-tint);
    --bs-btn-hover-border-color: var(--rd-navy-border);
    --bs-btn-active-color: var(--rd-navy);
    --bs-btn-active-bg: var(--rd-navy-tint);
    --bs-btn-active-border-color: var(--rd-navy);
}

.btn:disabled, .btn.disabled { cursor: not-allowed; }

.form-control, .form-select {
    font-size: 13px;
    padding: .44rem .6rem;
    border-radius: var(--rd-radius-control);
    border-color: var(--rd-border-strong);
    color: var(--rd-text);
    background-color: var(--rd-surface);
}

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

.form-control:disabled, .form-select:disabled {
    background-color: var(--rd-n-100);
    border-color: var(--rd-n-300);
    color: var(--rd-n-400);
    cursor: not-allowed;
}

.form-control.is-invalid, .form-select.is-invalid { border-color: var(--rd-bad-bd); }
.form-control.is-invalid:focus { box-shadow: 0 0 0 3px rgba(179,38,30,.1); }
.invalid-feedback { font-size: 12px; color: var(--rd-bad-fg); }

.form-label {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--rd-text-muted);
    margin-bottom: 5px;
}

/* A required field is marked in red, per the design's validation note.
   Standalone rather than nested under .form-label: screens that draw the
   design's own .rd-label instead of Bootstrap's would otherwise lose it. */
.rd-req { color: var(--rd-bad-dot); font-weight: 700; }

.form-text { font-size: 12px; color: var(--rd-text-muted); }

.alert {
    font-size: 13px;
    border-radius: var(--rd-radius-inset);
    padding: 11px 13px;
}

.alert-success { background: var(--rd-ok-bg);   border-color: var(--rd-ok-bd);   color: var(--rd-ok-fg); }
.alert-info    { background: var(--rd-info-bg); border-color: var(--rd-info-bd); color: var(--rd-info-fg); }
.alert-warning { background: var(--rd-warn-bg); border-color: var(--rd-warn-bd); color: var(--rd-warn-fg); }
.alert-danger  { background: var(--rd-bad-bg);  border-color: var(--rd-bad-bd);  color: var(--rd-bad-fg); }

.modal-content { border-radius: var(--rd-radius-card); border-color: var(--rd-border); }
.modal-header, .modal-footer { border-color: var(--rd-hairline); }
.modal-title { font-size: 17px; font-weight: 600; }

.dropdown-menu {
    --bs-dropdown-font-size: 13px;
    --bs-dropdown-border-color: var(--rd-border);
    --bs-dropdown-border-radius: var(--rd-radius-block);
    --bs-dropdown-link-active-bg: var(--rd-navy-tint);
    --bs-dropdown-link-active-color: var(--rd-navy);
    box-shadow: var(--rd-shadow-doc);
}

.nav-tabs {
    --bs-nav-tabs-border-color: var(--rd-border);
    --bs-nav-link-font-size: 13px;
    --bs-nav-tabs-link-active-color: var(--rd-navy);
    --bs-nav-tabs-link-active-border-color: var(--rd-border) var(--rd-border) var(--rd-surface);
    font-weight: 500;
}

.badge { font-weight: 600; font-size: 11px; }

.form-check-input:checked { background-color: var(--rd-navy); border-color: var(--rd-navy); }
.form-check-input:focus   { border-color: var(--rd-navy); box-shadow: var(--rd-focus-ring); }
.form-check-label { font-size: 13px; }

.table { --bs-table-color: var(--rd-text-3); font-size: 13px; }
.table > thead { --bs-table-color: var(--rd-text-muted); }
.table > :not(caption) > * > * { border-bottom-color: var(--rd-hairline); }

/* ==========================================================================
   17. The existing .rd-chip, moved onto the design's pill treatment.
   Every screen already uses it, so upgrading it here moves the whole
   product at once rather than requiring ninety-eight rewrites. It keeps its
   class names; only what it draws changes.
   ========================================================================== */

.rd-chip {
    padding: 2px 8px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.45;
    gap: 5px;
    border: 1px solid var(--rd-plain-bd);
    background: var(--rd-plain-bg);
    color: var(--rd-plain-fg);
}

.rd-chip::before { width: 5px; height: 5px; background: var(--rd-plain-dot); }

.rd-chip-success { background: var(--rd-ok-bg);   border-color: var(--rd-ok-bd);   color: var(--rd-ok-fg); }
.rd-chip-warning { background: var(--rd-warn-bg); border-color: var(--rd-warn-bd); color: var(--rd-warn-fg); }
.rd-chip-danger  { background: var(--rd-bad-bg);  border-color: var(--rd-bad-bd);  color: var(--rd-bad-fg); }
.rd-chip-info    { background: var(--rd-info-bg); border-color: var(--rd-info-bd); color: var(--rd-info-fg); }
.rd-chip-muted   { background: var(--rd-plain-bg); border-color: var(--rd-plain-bd); color: var(--rd-plain-fg); }

.rd-chip-success::before { background: var(--rd-ok-dot); }
.rd-chip-warning::before { background: var(--rd-warn-dot); }
.rd-chip-danger::before  { background: var(--rd-bad-dot); }
.rd-chip-info::before    { background: var(--rd-info-dot); }
.rd-chip-muted::before   { background: var(--rd-plain-dot); }

/* The page header, at the design's H1 size with its subtitle beneath. */
.rd-page-title    { font-size: 20px; font-weight: 600; letter-spacing: -.005em; }
.rd-page-subtitle { font-size: 12px; color: var(--rd-text-muted); }

/* ==========================================================================
   18. The bare shell — the five signed-out screens.
   The design gives sign-in, sign-up, onboarding and the invitation a
   full-bleed layout of their own: no brand bar, no content padding, the
   whole viewport. layouts/app.blade.php renders this instead of the padded
   guest column on those routes.
   ========================================================================== */

.rd-guest-bare {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: var(--rd-canvas);
}

.rd-guest-bare > * { flex: 1; min-height: 0; }

/* ==========================================================================
   19. "Viewing as" — the organisation scope control.
   Shared by the dashboard and the reports, and by anything else that shows
   figures for a part of the company rather than for one person.
   ========================================================================== */

.rd-scope {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 4px 4px 4px 10px;
    border: 1px solid var(--rd-navy-border);
    background: var(--rd-navy-tint);
    border-radius: var(--rd-radius-pill);
}

.rd-scope-label {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--rd-navy);
    white-space: nowrap;
}

.rd-scope-select {
    width: auto;
    min-width: 170px;
    max-width: 260px;
    border-radius: var(--rd-radius-pill);
    border-color: var(--rd-navy-border);
    background-color: var(--rd-surface);
    font-weight: 500;
    /* Room for the chevron: the global select padding is sized for square
       corners, and on a pill the arrow sat on top of the last word. */
    padding-left: 12px;
    padding-right: 34px;
    background-position: right 12px center;
    text-overflow: ellipsis;
}

.rd-scope-reset {
    width: 28px;
    height: 28px;
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--rd-navy-border);
    border-radius: 50%;
    background: var(--rd-surface);
    color: var(--rd-navy);
    font-size: 11px;
    cursor: pointer;
}

.rd-scope-reset:hover { background: var(--rd-navy); border-color: var(--rd-navy); color: #FFFFFF; }

@media (max-width: 575.98px) {
    .rd-scope { width: 100%; flex-wrap: wrap; border-radius: var(--rd-radius-inset); }
    .rd-scope-select { width: 100%; }
}

/* ==========================================================================
   Card hubs — Settings, and Reports after it.
   A searchable index of icon cards in sections. Each card is a link to its
   own page; nothing is edited on the hub itself.
   ========================================================================== */

.set-hub-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 18px;
}

.set-hub-search {
    position: relative;
    display: flex;
    align-items: center;
    width: min(440px, 100%);
    margin: 0;
}

.set-hub-search > .bi {
    position: absolute;
    left: 13px;
    color: var(--rd-text-meta);
    font-size: 14px;
    pointer-events: none;
}

.set-hub-search input {
    width: 100%;
    height: 42px;
    padding: 0 40px 0 38px;
    border: 1px solid var(--rd-border);
    border-radius: 11px;
    background: var(--rd-surface);
    font-size: 14px;
    color: var(--rd-text);
    box-shadow: var(--rd-shadow-card);
}

.set-hub-search input:focus {
    outline: none;
    border-color: var(--rd-navy);
    box-shadow: 0 0 0 3px rgba(18, 57, 94, .14);
}

.set-hub-search kbd {
    position: absolute;
    right: 11px;
    padding: 1px 7px;
    border: 1px solid var(--rd-border);
    border-bottom-width: 2px;
    border-radius: 6px;
    background: var(--rd-surface-alt);
    color: var(--rd-text-meta);
    font-size: 11px;
    font-family: inherit;
    font-weight: 600;
}

.set-hub-section + .set-hub-section { margin-top: 26px; }

.set-hub-section-head {
    display: flex;
    align-items: center;
    gap: 11px;
    margin-bottom: 12px;
}

.set-hub-section-icon {
    flex: none;
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    background: var(--rd-navy);
    color: #FFFFFF;
    font-size: 14px;
}

.set-hub-section-title { margin: 0; font-size: 15px; font-weight: 600; color: var(--rd-text); }
.set-hub-section-text { margin: 1px 0 0; font-size: 12px; color: var(--rd-text-muted); }

.set-hub-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
    gap: 12px;
}

.set-hub-card {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 13px;
    min-height: 108px;
    padding: 15px 16px 14px;
    background: var(--rd-surface);
    border: 1px solid var(--rd-border);
    border-radius: var(--rd-radius-card);
    box-shadow: var(--rd-shadow-card);
    color: inherit;
    text-decoration: none;
    transition: border-color .12s ease, box-shadow .12s ease, transform .12s ease;
}

.set-hub-card:hover,
.set-hub-card:focus-visible {
    color: inherit;
    text-decoration: none;
    border-color: var(--rd-navy-border);
    box-shadow: 0 6px 18px rgba(18, 57, 94, .09);
    transform: translateY(-1px);
    outline: none;
}

.set-hub-card-icon {
    flex: none;
    width: 42px;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 11px;
    background: var(--rd-navy-tint);
    border: 1px solid var(--rd-navy-border);
    color: var(--rd-navy);
    font-size: 18px;
    transition: background .12s ease, color .12s ease;
}

.set-hub-card:hover .set-hub-card-icon { background: var(--rd-navy); border-color: var(--rd-navy); color: #FFFFFF; }

.set-hub-card-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.set-hub-card-title { font-size: 14px; font-weight: 600; color: var(--rd-text); padding-right: 18px; }
.set-hub-card-text { font-size: 12px; line-height: 1.5; color: var(--rd-text-muted); }

.set-hub-card-count {
    align-self: flex-start;
    margin-top: 6px;
    padding: 1px 8px;
    border-radius: 999px;
    background: var(--rd-surface-alt);
    border: 1px solid var(--rd-hairline);
    font-size: 11px;
    font-weight: 600;
    color: var(--rd-text-3);
}

.set-hub-card-go {
    position: absolute;
    top: 16px;
    right: 15px;
    font-size: 14px;
    color: var(--rd-text-faint);
    opacity: 0;
    transform: translateX(-4px);
    transition: opacity .12s ease, transform .12s ease, color .12s ease;
}

.set-hub-card:hover .set-hub-card-go { opacity: 1; transform: none; color: var(--rd-navy); }

.set-hub-none { margin-top: 8px; }

[x-cloak] { display: none !important; }

@media (max-width: 767.98px) {
    .set-hub-search { width: 100%; }
    .set-hub-grid { grid-template-columns: 1fr; }
    .set-hub-card { min-height: 0; }
    .set-hub-search kbd { display: none; }
}

/* The question a report answers, above its description. */
.set-hub-card-q { font-size: 12.5px; font-weight: 500; color: var(--rd-navy); line-height: 1.45; }

/* A dependent custom field — shown because of the answer above it — sits
   indented under a rule, so it reads as part of that answer. */
.rd-cf-dependent {
    margin-left: 6px;
    padding-left: 14px;
    border-left: 2px solid var(--rd-navy-border);
    animation: rdFadeIn .18s ease;
}

/* ==========================================================================
   Screen header band — Partner directory.dc.html lines 41-74.
   White, full-bleed to the content edges, ending in the tier tabs, with the
   table starting immediately under it. Shared: several screens open exactly this way
   (partners, listings, deals).
   ========================================================================== */

.rd-screen-head {
    margin: -18px -20px 14px;
    padding: 14px 20px 0;
    background: var(--rd-surface);
    border-bottom: 1px solid var(--rd-border);
}

.rd-screen-head-row {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: flex-start;
    justify-content: space-between;
}

.rd-title-line {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin-top: 3px;
    flex-wrap: wrap;
}

.rd-screen-head .rd-kpi-strip-head { margin: 13px 0 0; }
.rd-screen-head .rd-kpi { background: var(--rd-surface-alt); box-shadow: none; }

.rd-kpi-link:not(.rd-kpi) {
    padding: 0;
    border: 0;
    background: none;
    color: var(--rd-navy);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}

.rd-kpi-link:not(.rd-kpi):hover { text-decoration: underline; }

/* A whole stat card that is a link keeps the card; only the lift says it opens. */
a.rd-kpi { display: block; color: inherit; text-decoration: none; }
a.rd-kpi:hover { color: inherit; text-decoration: none; }

/* Underline tabs, as the design draws a primary filter. */
.rd-filter-tabs {
    display: flex;
    gap: 2px;
    margin-top: 12px;
    overflow-x: auto;
}

.rd-filter-tab {
    padding: 9px 12px;
    border: 0;
    border-bottom: 2px solid transparent;
    background: none;
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    color: var(--rd-text-muted);
    cursor: pointer;
}

.rd-filter-tab:hover { color: var(--rd-text); }
.rd-filter-tab.is-on { color: var(--rd-navy); border-bottom-color: var(--rd-navy); }
.rd-filter-tab-count { opacity: .6; }

/* The clash count in the directory's toolbar: the one red thing on the page. */
.rd-tool-btn-bad {
    border-color: var(--rd-bad-bd);
    color: var(--rd-bad-fg);
}

.rd-tool-btn-bad:hover { background: var(--rd-red-inset); color: var(--rd-bad-fg); }

.rd-toolbar-filters { margin-bottom: 12px; }
.rd-toolbar-select { width: auto; min-width: 150px; height: 32px; padding-top: 0; padding-bottom: 0; }

@media (max-width: 767.98px) {
    .rd-screen-head { margin: -14px -16px 12px; padding: 12px 16px 0; }
}

/* ==========================================================================
   The confirmation dialog (partials/confirm-modal.blade.php).
   ========================================================================== */

.rd-confirm { position: fixed; inset: 0; z-index: 2000; display: flex; align-items: center; justify-content: center; padding: 16px; }
.rd-confirm-backdrop { position: absolute; inset: 0; background: rgba(20, 24, 31, .45); }
.rd-confirm-box { position: relative; width: 100%; max-width: 440px; padding: 22px 22px 18px; border-radius: 14px; background: var(--rd-surface); box-shadow: 0 24px 60px rgba(20, 24, 31, .28); }
.rd-confirm-icon { width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; margin-bottom: 12px; border-radius: 12px; font-size: 20px; }
.rd-confirm-icon.is-bad { background: var(--rd-bad-bg, #FDECEC); color: var(--rd-bad-fg, #B42318); }
.rd-confirm-icon.is-warn { background: var(--rd-warn-bg); color: var(--rd-warn-fg); }
.rd-confirm-title { margin: 0 0 6px; font-size: 17px; font-weight: 700; line-height: 1.35; color: var(--rd-text); }
.rd-confirm-body { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--rd-text-3); }
.rd-confirm-effects { margin: 10px 0 0; padding-left: 18px; font-size: 13px; line-height: 1.5; color: var(--rd-text-3); }
.rd-confirm-type { margin-top: 14px; }
.rd-confirm-type label { display: block; margin-bottom: 5px; font-size: 12.5px; color: var(--rd-text-muted); }
.rd-confirm-type b { color: var(--rd-text); font-family: var(--bs-font-monospace); }
.rd-confirm-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 18px; }

/* Quick-add beside a master-backed dropdown (pages/⚡quick-master). */
.qm { display: block; margin-top: 4px; }
.qm-open { padding: 0; border: 0; background: none; font-size: 12px; font-weight: 600; color: var(--rd-navy); }
.qm-open:hover { text-decoration: underline; }
.qm-box { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 6px; border: 1px solid var(--rd-navy-border); border-radius: 8px; background: var(--rd-navy-tint); }
.qm-box .form-control { flex: 1 1 140px; }
.qm-box .form-select { flex: 0 1 150px; width: auto; }

/* The shared pager: range · rows · pages, above and below a list. */
.rd-pager { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin: 10px 0; }
.rd-pager.is-top { margin: 0 0 10px; }
.rd-pager-size { width: auto; min-width: 78px; height: 30px; padding-top: 0; padding-bottom: 0; }
.rd-pager-links { margin-left: auto; }
.rd-pager-links nav p.small { display: none; }
.rd-pager-links .pagination { margin: 0; }

/* App bar: My WhatsApp (personal linked phone) */
.rd-appbar-wa { font-size: 16px; }
.rd-appbar-wa-dot { position: absolute; right: 6px; bottom: 6px; width: 8px; height: 8px; border-radius: 50%; background: var(--rd-track-empty); border: 2px solid var(--rd-surface); }
.rd-appbar-wa-dot.is-on { background: #25D366; }

/* Shared list tools (partials/table-tools, partials/table-bulk) — the leads list's view tabs, for every list */
.tt-bar { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin: 4px 0 12px; border-bottom: 1px solid var(--rd-hairline); }
.tt-views { display: flex; align-items: center; gap: 2px; overflow-x: auto; scrollbar-width: thin; min-width: 0; }
.tt-view { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; font-weight: 600; padding: 9px 12px; border: none; background: none; cursor: pointer; white-space: nowrap; color: var(--rd-text-muted); border-bottom: 2px solid transparent; margin-bottom: -1px; }
.tt-view:hover { color: var(--rd-text); }
.tt-view.is-on { color: var(--rd-navy); border-bottom-color: var(--rd-navy); }
.tt-view-add { color: var(--rd-text-meta); }
.tt-view-add::after { display: none; }
.tt-view-pick, .tt-view-star, .tt-view-remove { border: 0; background: none; padding: 0; font: inherit; color: inherit; cursor: pointer; line-height: 1; }
.tt-view-star { color: var(--rd-text-meta); }
.tt-view-star .bi-star-fill { color: #E0A100; }
.tt-view-remove { opacity: .55; padding-left: 2px; }
.tt-view-remove:hover { opacity: 1; }
.tt-save { min-width: 240px; }
.tt-bar > .dropdown { margin-bottom: 6px; flex: none; }
.tt-bulk { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; padding: 8px 12px; border: 1px solid var(--rd-navy-border); border-radius: 10px; background: var(--rd-navy-tint); font-size: 13px; position: sticky; top: var(--rd-stick, 56px); z-index: 5; }
.tt-bulk-select { width: auto; min-width: 150px; }
.tt-check { width: 34px; }
.tt-card { position: relative; display: flex; flex-direction: column; }
.tt-card > a { flex: 1; }
.tt-card-check { position: absolute; top: 10px; right: 10px; z-index: 2; margin: 0; padding: 3px 5px; border-radius: 6px; background: var(--rd-surface); box-shadow: 0 1px 3px rgba(20,24,31,.12); line-height: 1; }
.tt-card-check .form-check-input { margin: 0; }
.tt-card .lsx-top { padding-right: 30px; }


/* ==========================================================================
   v2 — parts every redesigned screen shares (DESIGN-SPEC §4.2, §5)
   ========================================================================== */

/* Breadcrumb — detail pages only. */
.rd-crumbs { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; font-size: 12px; color: var(--rd-text-meta); }
.rd-crumbs a { color: var(--rd-primary-ink); font-weight: 600; text-decoration: none; }
.rd-crumbs a:hover { color: var(--rd-hover-color); text-decoration: underline; }
.rd-crumbs .bi { font-size: 9px; }

/* Page head: title + a sub-line that states the numbers, then actions. */
.rd-head { display: flex; align-items: flex-end; flex-wrap: wrap; gap: 16px; margin-bottom: 20px; }
.rd-head-text { flex: 1; min-width: 260px; }
.rd-title { margin: 0 0 6px; font-family: var(--rd-heading-font); font-size: 26px; font-weight: 800; letter-spacing: -.02em; color: var(--rd-text-primary); }
.rd-sub { margin: 0; font-size: 13.5px; color: var(--rd-text-meta); text-wrap: pretty; }
.rd-head-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; flex: none; }

/* Card title row inside a v2 panel. */
.rd-panel { background: var(--rd-surface); border: 1px solid var(--rd-border); border-radius: var(--rd-radius-card); padding: 18px 20px; box-shadow: var(--rd-shadow-card); min-width: 0; }
.rd-panel-head { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 14px; }
.rd-panel-head > :first-child { flex: 1; min-width: 0; }
.rd-panel-title { margin: 0; font-family: var(--rd-heading-font); font-size: 15.5px; font-weight: 800; color: var(--rd-text-primary); }
.rd-panel-sub { margin: 3px 0 0; font-size: 12px; color: var(--rd-text-meta); }
.rd-panel-link { font-size: 12.5px; font-weight: 700; color: var(--rd-primary-ink); text-decoration: none; white-space: nowrap; }
.rd-panel-link:hover { color: var(--rd-hover-color); }

/* Reflowing grids — never a fixed repeat(N, 1fr) (§4.3). */
.rd-grid-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 14px; }
.rd-grid-two { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; }
.rd-grid-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 16px; }

/* 30px icon tile beside a label. */
.rd-icon-tile { display: grid; place-items: center; width: 30px; height: 30px; flex: none; border-radius: 9px; background: var(--rd-primary-light); color: var(--rd-primary-ink); font-size: 14px; }
.rd-icon-tile-accent { background: var(--rd-accent-light); color: var(--rd-accent-ink); }
.rd-icon-tile-gold { background: var(--rd-secondary-light); color: var(--rd-secondary-ink); }
.rd-icon-tile-bad { background: var(--rd-danger-bg); color: var(--rd-danger); }

/* Hero banner — heroBg is dark and carries white text (§3). */
.rd-hero { position: relative; overflow: hidden; border-radius: 20px; padding: 24px 26px; background: var(--rd-hero-bg); color: #fff; margin-bottom: 18px; animation: rdRise .5s ease both; }
.rd-hero-kicker { font-size: 11.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.8); }
.rd-hero-title { margin: 8px 0 6px; font-family: var(--rd-heading-font); font-size: 28px; font-weight: 800; letter-spacing: -.02em; color: #fff; }
.rd-hero-sub { margin: 0; font-size: 14px; color: rgba(255,255,255,.86); max-width: 620px; }
.rd-hero-deco { position: absolute; border-radius: 50%; background: rgba(255,255,255,.08); pointer-events: none; animation: rdFloat 9s ease-in-out infinite; }

/* Progress bar: bright fill, ink label (§5.4). */
.rd-progress { display: flex; align-items: center; gap: 10px; min-width: 0; }
/* The track-and-label bar is a row, not the older 6px strip it shares a name with. */
.rd-progress:has(> .rd-progress-track) { height: auto; background: none; border-radius: 0; overflow: visible; }
.rd-progress-label { flex: none; }
.rd-progress-track { flex: 1; height: 8px; border-radius: 999px; background: var(--rd-surface-alt); overflow: hidden; }
.rd-progress-track > span { display: block; height: 100%; border-radius: 999px; background: var(--rd-accent); transform-origin: left; animation: rdGrowX .9s ease-out both .3s; }
.rd-progress-label { font-family: var(--rd-mono-font); font-size: 12px; font-weight: 600; color: var(--rd-success-ink); white-space: nowrap; }
.rd-progress.is-mid .rd-progress-track > span { background: var(--rd-accent); }
.rd-progress.is-low .rd-progress-track > span { background: var(--rd-secondary); }
.rd-progress.is-low .rd-progress-label { color: var(--rd-secondary-ink); }
.rd-progress.is-zero .rd-progress-label { color: var(--rd-danger); }

/* Bar charts — CSS only (§5.6). */
.rd-vbars { display: flex; align-items: flex-end; gap: 14px; height: 190px; padding-top: 8px; }
.rd-vbars-col { flex: 1; min-width: 0; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 8px; }
.rd-vbars-pair { flex: 1; width: 100%; display: flex; align-items: flex-end; justify-content: center; gap: 5px; }
.rd-vbar { width: 100%; max-width: 22px; min-height: 2px; border-radius: 7px 7px 3px 3px; background: var(--rd-chart-bar-1); transform-origin: bottom; animation: rdGrowY .9s cubic-bezier(.2,.8,.2,1) both; }
.rd-vbar-2 { background: var(--rd-chart-bar-2); }
.rd-vbars-col.is-current .rd-vbar { background: var(--rd-chart-bar-1-active); }
.rd-vbars-col.is-current .rd-vbar-2 { background: var(--rd-chart-bar-2-active); }
.rd-vbars-label { font-size: 11.5px; font-weight: 700; color: var(--rd-text-meta); white-space: nowrap; }
.rd-vbars-col.is-current .rd-vbars-label { color: var(--rd-text-primary); font-weight: 800; }
.rd-legend { display: flex; flex-wrap: wrap; gap: 14px; font-size: 12px; color: var(--rd-text-meta); }
.rd-legend span { display: inline-flex; align-items: center; gap: 6px; }
.rd-legend i { width: 10px; height: 10px; border-radius: 3px; background: var(--rd-chart-bar-1-active); }
.rd-legend i.is-2 { background: var(--rd-chart-bar-2-active); }

/* Avatar tones, rotating by row (§5.5): primary → accent → secondary → danger. */
.rd-ava { display: inline-grid; place-items: center; flex: none; width: 30px; height: 30px; border-radius: 9px; font-size: 11.5px; font-weight: 800; background: var(--rd-primary-light); color: var(--rd-primary-ink); }
.rd-ava-1 { background: var(--rd-accent-light); color: var(--rd-accent-ink); }
.rd-ava-2 { background: var(--rd-secondary-light); color: var(--rd-secondary-ink); }
.rd-ava-3 { background: var(--rd-danger-bg); color: var(--rd-danger); }
.rd-ava-lg { width: 34px; height: 34px; border-radius: 10px; font-size: 12.5px; }

/* Live indicator dot. */
.rd-live { position: relative; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--rd-accent); }
.rd-live::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: inherit; animation: rdPulse 1.8s ease-in-out infinite; }

/* Tone families — one class sets a fill, its light tint and its ink together,
   for chips (*Light + *Ink + a dot in the fill) and icon tiles. */
.tone-primary   { --t-fill: var(--rd-primary);   --t-light: var(--rd-primary-light);   --t-ink: var(--rd-primary-ink); }
.tone-secondary { --t-fill: var(--rd-secondary); --t-light: var(--rd-secondary-light); --t-ink: var(--rd-secondary-ink); }
.tone-accent    { --t-fill: var(--rd-accent);    --t-light: var(--rd-accent-light);    --t-ink: var(--rd-accent-ink); }
.tone-success   { --t-fill: var(--rd-success);   --t-light: var(--rd-success-light);   --t-ink: var(--rd-success-ink); }
.tone-danger    { --t-fill: var(--rd-danger);    --t-light: var(--rd-danger-bg);       --t-ink: var(--rd-danger); }
.tone-plain     { --t-fill: var(--rd-text-meta); --t-light: var(--rd-surface-alt);     --t-ink: var(--rd-text-secondary); }
.tone-bg-primary   { background: var(--rd-primary-light);   color: var(--rd-primary-ink); }
.tone-bg-secondary { background: var(--rd-secondary-light); color: var(--rd-secondary-ink); }
.tone-bg-accent    { background: var(--rd-accent-light);    color: var(--rd-accent-ink); }
.tone-bg-danger    { background: var(--rd-danger-bg);       color: var(--rd-danger); }



/* Status chip — *Light + *Ink + a dot; also the inline status control when it holds a <select>. */
/* The stage chip is also the inline status control. */
.lead-stage-pill {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0 10px;
    border-radius: 999px;
    background: var(--t-light);
    color: var(--t-ink);
    font-size: 11.5px;
    font-weight: 800;
    white-space: nowrap;
}

.lead-stage-pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--t-fill); flex: none; }
.lead-stage-pill-text { padding: 4px 0; }

.lead-stage-pill select {
    appearance: none;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    padding: 4px 2px;
    cursor: pointer;
    max-width: 170px;
}

.lead-stage-pill:has(select)::after { content: "\F282"; font-family: "bootstrap-icons"; font-size: 9px; opacity: .7; }
.lead-stage-pill select:focus-visible { outline: 2px solid var(--t-fill); outline-offset: 3px; border-radius: 4px; }


/* ---- Horizontal bars (pipeline, queue) ---- */

.db-hbars { display: flex; flex-direction: column; gap: 12px; }
.db-hbar { display: flex; align-items: center; gap: 12px; }
.db-hbar-label { width: 140px; flex: none; font-size: 12.5px; font-weight: 700; color: var(--rd-text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.db-hbar .rd-progress-track { flex: 1; }
.db-hbar-value { width: 48px; flex: none; text-align: right; font-size: 12.5px; color: var(--rd-text-primary); }



/* ---- Filter bar (v2): quick-view chips, picker pills, search — every list screen. ---- */


.lead-bar { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; padding-bottom: 16px; }

.lead-quick {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 34px;
    padding: 7px 13px;
    border-radius: 9px;
    border: 1px solid var(--rd-border);
    background: var(--rd-surface);
    color: var(--rd-text-meta);
    font-size: 12.5px;
    font-weight: 700;
    white-space: nowrap;
    cursor: pointer;
    transition: border-color .15s, color .15s;
}

.lead-quick:hover { border-color: var(--rd-primary); color: var(--rd-hover-color); }
.lead-quick.is-on { background: var(--rd-text-primary); border-color: var(--rd-text-primary); color: #fff; font-weight: 800; }
.lead-quick.is-on .tt-view-star, .lead-quick.is-on .lead-view-remove { color: #fff; }
.lead-quick-own { padding-left: 8px; }
.lead-quick-save { border-style: dashed; color: var(--rd-primary-ink); }

.lead-bar-rule { width: 1px; height: 22px; background: var(--rd-border); margin: 0 4px; }
.lead-bar-gap { flex: 1 1 auto; }

.lead-pick {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 34px;
    margin: 0;
    padding: 0 8px 0 12px;
    border-radius: 9px;
    border: 1px solid var(--rd-border);
    background: var(--rd-surface);
    color: var(--rd-text-meta);
    font-size: 12.5px;
    font-weight: 600;
    white-space: nowrap;
}

.lead-pick select { max-width: 160px; border: 0; background: transparent; color: var(--rd-text-primary); font-size: 12.5px; font-weight: 600; padding: 6px 2px; cursor: pointer; }
.lead-pick select:focus { outline: none; }
.lead-pick:focus-within { border-color: var(--rd-primary); box-shadow: var(--rd-focus-ring); }
.lead-pick-btn { padding: 0 12px; color: var(--rd-text-primary); cursor: pointer; }
.lead-pick-btn i { color: var(--rd-text-meta); }
.lead-pick-btn:hover { border-color: var(--rd-primary); }
.lead-pick-btn.is-on { background: var(--rd-primary-light); border-color: var(--rd-primary); color: var(--rd-primary-ink); }

.lead-search { position: relative; }
.lead-search .bi { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); font-size: 13px; color: var(--rd-primary-ink); pointer-events: none; }
.lead-search input { width: 220px; height: 34px; padding: 0 12px 0 32px; border-radius: 9px; border: 1px solid var(--rd-border); background: var(--rd-surface-alt); font-size: 12.5px; color: var(--rd-text-primary); }
.lead-search input:focus { outline: none; border-color: var(--rd-primary); background: var(--rd-surface); box-shadow: var(--rd-focus-ring); }
.lead-bar-count { font-size: 12px; color: var(--rd-text-meta); white-space: nowrap; }



/* Inline banner — a warning or a stop, inside the page flow. */
.ld-banner { display: flex; align-items: flex-start; gap: 10px; padding: 12px 15px; margin-bottom: 12px; border-radius: 12px; font-size: 12.5px; line-height: 1.5; }
.ld-col .ld-banner { margin-bottom: 0; }
.ld-banner > .bi { font-size: 16px; flex: none; }
.ld-banner-warn { background: var(--rd-warning-light); border: 1px solid var(--rd-border-strong); color: var(--rd-warning); }
.ld-banner-bad { background: var(--rd-danger-light); border: 1px solid var(--rd-danger-border); color: var(--rd-danger); }



/* ---- Stage strip (v2): a clickable count per stage, with a share bar. Leads, bookings. ---- */
/* ---- Stage strip ---- */

.lead-stages { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin-bottom: 16px; }

.lead-stage {
    display: block;
    text-align: left;
    padding: 13px 14px;
    border: 1px solid var(--rd-border);
    border-radius: 12px;
    background: var(--rd-surface);
    font-family: var(--rd-body-font);
    cursor: pointer;
    animation: rdRise .5s ease both;
    transition: border-color .15s, background .15s;
}

.lead-stage:hover { border-color: var(--t-fill); }
.lead-stage.is-on { background: var(--t-light); border-color: var(--t-fill); }

.lead-stage-label { display: flex; align-items: center; gap: 7px; margin-bottom: 7px; font-size: 11px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--rd-text-meta); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lead-stage-label i { width: 7px; height: 7px; border-radius: 50%; background: var(--t-fill); flex: none; }
.lead-stage-count { display: block; font-family: var(--rd-heading-font); font-size: 22px; font-weight: 800; color: var(--rd-text-primary); line-height: 1.15; }
.lead-stage.is-on .lead-stage-count { color: var(--t-ink); }
.lead-stage-track { display: block; height: 4px; margin-top: 9px; border-radius: 999px; background: var(--t-light); overflow: hidden; }
.lead-stage-track span { display: block; height: 100%; border-radius: 999px; background: var(--t-fill); transform-origin: left; animation: rdGrowX .9s ease-out both; }

/* ---- List table card (v2): a card that scrolls sideways, footer inside it. ---- */
.lead-card { background: var(--rd-surface); border: 1px solid var(--rd-border); border-radius: 14px; overflow: hidden; margin-bottom: 16px; }
.lead-scroll { overflow-x: auto; }
.lead-card > .lead-foot { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin: 0; padding: 12px 18px; border-top: 1px solid var(--rd-border); background: var(--rd-surface-alt); }
.lead-foot-range { font-size: 12px; color: var(--rd-text-meta); }


/* ---- List cells and panel rows (v2) — shared by every list and detail screen. ---- */
.bk-stage-line { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px; }
.bk-stage-value { font-size: 12px; color: var(--rd-text-meta); }
.bk-code { font-size: 12.5px; font-weight: 600; color: var(--rd-text-secondary); text-decoration: none; }
.bk-code:hover { color: var(--rd-hover-color); }
.bk-buyer { display: block; font-size: 13px; font-weight: 800; color: var(--rd-text-primary); }
.bk-unit { display: block; font-size: 12.5px; font-weight: 600; color: var(--rd-text-primary); }
.bk-sub { display: block; margin-top: 1px; font-size: 11px; color: var(--rd-text-meta); }
.bk-strong { font-size: 13px; font-weight: 600; color: var(--rd-text-primary); }
.bk-foot-total { display: inline-flex; align-items: baseline; gap: 10px; font-size: 12px; font-weight: 700; color: var(--rd-text-secondary); }
.bk-foot-total b { font-size: 15px; color: var(--rd-text-primary); }
.cl-late { color: var(--rd-danger); font-weight: 700; }
.ld-list-panel, .ld-col .ld-dupes { padding: 0; overflow: hidden; }
.ld-list-panel .rd-panel-head, .ld-dupes .rd-panel-head { padding: 16px 17px 0; }
.ld-count { font-size: 11.5px; color: var(--rd-text-meta); }
.ld-count.is-late { color: var(--rd-danger); font-weight: 600; }
.ld-row { display: flex; align-items: center; gap: 10px; padding: 12px 17px; border-top: 1px solid var(--rd-border); }
.ld-row.is-done { opacity: .65; }
.ld-row-icon { display: grid; place-items: center; width: 28px; height: 28px; flex: none; border-radius: 8px; background: var(--t-light); color: var(--t-ink); font-size: 13px; }
.ld-row-text { flex: 1; min-width: 0; }
.ld-row-title { display: block; font-size: 12.5px; font-weight: 700; color: var(--rd-text-primary); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ld-row.is-done .ld-row-title { text-decoration: line-through; }
.ld-row-sub { display: block; margin-top: 2px; font-size: 11px; color: var(--rd-text-meta); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ld-row-sub a { color: inherit; }
.ld-row-sub.is-late { color: var(--rd-danger); }
.ld-row-btn { flex: none; font-size: 11px; padding: 5px 10px; }
.ld-empty-line { margin: 0; padding: 12px 17px; border-top: 1px solid var(--rd-border); }
.ld-add { display: flex; flex-direction: column; gap: 8px; padding: 13px 17px 16px; border-top: 1px solid var(--rd-border); background: var(--rd-surface-alt); }
.ld-add .lead-presets { margin: 0; }

/* ---- Secondary rail (Settings, Reports) — Settings.dc.html's rail. ---- */
.rd-rail { border-radius: 16px; padding: 12px; box-shadow: none; }
.rd-rail-group-label { padding: 6px 12px 6px; font-size: 10.5px; font-weight: 800; letter-spacing: .1em; color: var(--rd-text-meta); }
.rd-rail-link { gap: 10px; min-height: 36px; padding: 8px 12px; border-radius: 9px; font-size: 13px; font-weight: 600; color: var(--rd-text-secondary); transition: background .15s, color .15s; }
.rd-rail-link .bi { font-size: 14px; color: var(--rd-text-meta); }
.rd-rail-link:hover { background: var(--rd-hover-bg); color: var(--rd-hover-color); }
.rd-rail-link.is-active { background: var(--rd-primary-light); color: var(--rd-primary-ink); font-weight: 800; }
.rd-rail-link.is-active .bi { color: var(--rd-primary-ink); }

/* ---- Insights (the written read on reports) ---- */
.rd-insight-icon { border-radius: 10px; }
.rd-insight-ok   .rd-insight-icon { background: var(--rd-success-light); color: var(--rd-success-ink); }
.rd-insight-info .rd-insight-icon { background: var(--rd-primary-light); color: var(--rd-primary-ink); }
.rd-insight-warn .rd-insight-icon { background: var(--rd-secondary-light); color: var(--rd-secondary-ink); }
.rd-insight-bad  .rd-insight-icon { background: var(--rd-danger-bg); color: var(--rd-danger); }
.rd-insight-text { color: var(--rd-text-secondary); }
.rd-insight-text strong { color: var(--rd-text-primary); font-weight: 800; }

/* ==========================================================================
   v2 — the older shared parts, brought onto the v2 look in one place, so every
   screen that still uses them (settings sub-pages, forms, registers, detail
   pages) reads as the same product as the redesigned ones.
   ========================================================================== */

/* Page heading */
.rd-page-header { align-items: flex-end; gap: 16px; margin-bottom: 18px; }
.rd-page-title, .rd-page-header .rd-h1 { font-family: var(--rd-heading-font); font-size: 26px; font-weight: 800; letter-spacing: -.02em; color: var(--rd-text-primary); }
.rd-page-subtitle { font-size: 13.5px; color: var(--rd-text-meta); }
.rd-page-header .rd-meta:first-child { font-size: 12px; }

/* Cards and panels */
.rd-card { border-radius: 16px; box-shadow: none; }
.rd-card-header .rd-h3, .rd-card-header .rd-h4 { font-family: var(--rd-heading-font); }

/* Toolbars, tool buttons, search */
.rd-toolbar { gap: 8px; margin-bottom: 14px; }
.rd-tool-btn { height: 34px; padding: 0 12px; border-radius: 9px; border-color: var(--rd-border); color: var(--rd-text-secondary); font-size: 12.5px; font-weight: 700; white-space: nowrap; text-decoration: none; }
.rd-tool-btn:hover { background: var(--rd-surface); border-color: var(--rd-primary); color: var(--rd-hover-color); text-decoration: none; }
.rd-tool-btn.is-active { background: var(--rd-primary-light); border-color: var(--rd-primary); color: var(--rd-primary-ink); }
.rd-icon-btn { width: 32px; height: 32px; border-radius: 9px; border-color: var(--rd-border); color: var(--rd-text-meta); }
.rd-icon-btn:hover { background: var(--rd-surface); border-color: var(--rd-primary); color: var(--rd-primary-ink); }
.rd-search input { height: 34px; border-radius: 9px; border-color: var(--rd-border); background: var(--rd-surface-alt); font-size: 12.5px; }
.rd-search input:focus { border-color: var(--rd-primary); background: var(--rd-surface); }
.rd-search .bi { color: var(--rd-primary-ink); }
.rd-toolbar-select, .rd-filter-field, .rd-filter-field-sm { border-radius: 9px; }

/* Filter panel, chips */
.rd-filter-panel { border-radius: 14px; padding: 14px 16px; }
.rd-chip-toggle { min-height: 30px; padding: 5px 11px; border-radius: 9px; border-color: var(--rd-border); color: var(--rd-text-meta); font-weight: 700; }
.rd-chip-toggle:hover { background: var(--rd-surface); border-color: var(--rd-primary); color: var(--rd-hover-color); }

/* Tables in their wraps */
.rd-table-wrap { border-radius: 14px; box-shadow: none; }

/* Underline tab strip (older screens) */
.rd-tabstrip { border-bottom: 1px solid var(--rd-border); }
.rd-tabstrip-item { font-weight: 700; color: var(--rd-text-meta); }
.rd-tabstrip-item.is-on { color: var(--rd-primary-ink); border-bottom-color: var(--rd-primary); font-weight: 800; }

/* Initials */
.rd-face { background: var(--rd-primary-light); color: var(--rd-primary-ink); font-weight: 800; border-radius: 9px; }

/* Empty state */
.rd-empty .bi { color: var(--rd-border-strong); font-size: 26px; }
.rd-empty-title { font-family: var(--rd-heading-font); font-size: 15px; font-weight: 800; color: var(--rd-text-primary); }

/* Forms */
.form-control, .form-select { border-color: var(--rd-border); border-radius: 10px; color: var(--rd-text-primary); }
.form-control-sm, .form-select-sm { border-radius: 9px; }
.form-label, .rd-label { color: var(--rd-text-meta); font-weight: 700; }
.form-check-input { border-color: var(--rd-border-strong); }
.form-check-input:checked { background-color: var(--rd-primary-ink); border-color: var(--rd-primary-ink); }

/* Alerts on the theme */
.alert { border-radius: 12px; font-size: 13px; }
.alert-success { background: var(--rd-success-light); border-color: var(--rd-accent-mid); color: var(--rd-success-ink); }
.alert-warning { background: var(--rd-warning-light); border-color: var(--rd-border-strong); color: var(--rd-warning); }
.alert-danger { background: var(--rd-danger-light); border-color: var(--rd-danger-border); color: var(--rd-danger); }
.alert-info { background: var(--rd-primary-light); border-color: var(--rd-primary-mid); color: var(--rd-primary-ink); }


/* ---- Money-style stat cards (v2): label + icon tile, figure, note. ---- */
.cl-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px; margin-bottom: 18px; }
.cl-kicker { display: block; font-size: 11px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--rd-text-meta); }
.cl-kpi { padding: 17px; border-radius: 14px; background: var(--rd-surface); border: 1px solid var(--rd-border); animation: rdRise .5s ease both; transition: transform .15s; }
.cl-kpi:hover { transform: translateY(-2px); }
.cl-kpi.is-alert { background: var(--rd-danger-light); border-color: var(--rd-danger-border); }
.cl-kpi.is-alert .cl-kicker, .cl-kpi.is-alert .cl-kpi-value { color: var(--rd-danger); }
.cl-kpi-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 11px; }
.cl-kpi-icon { display: grid; place-items: center; width: 29px; height: 29px; border-radius: 9px; background: var(--t-light); color: var(--t-ink); font-size: 13px; }
.cl-kpi-value { display: block; font-family: var(--rd-heading-font); font-size: 25px; font-weight: 800; letter-spacing: -.02em; color: var(--rd-text-primary); }
.cl-kpi-note { display: block; margin-top: 4px; font-size: 11.5px; color: var(--rd-text-meta); }


/* ---- Alert banner (v2): icon tile, what is wrong, one action. ---- */
.sv-overdue { display: flex; align-items: center; flex-wrap: wrap; gap: 13px; padding: 15px 18px; margin-bottom: 16px; border-radius: 14px; background: var(--rd-danger-light); border: 1px solid var(--rd-danger-border); animation: rdRise .5s ease both .05s; }
.sv-overdue-icon { display: grid; place-items: center; width: 38px; height: 38px; flex: none; border-radius: 11px; background: var(--rd-danger-bg); color: var(--rd-danger); font-size: 16px; }
.sv-overdue-text { flex: 1; min-width: 180px; }
.sv-overdue-text b { display: block; font-size: 13.5px; font-weight: 800; color: var(--rd-danger); }
.sv-overdue-text span { display: block; margin-top: 2px; font-size: 12px; color: var(--rd-text-secondary); }
.sv-overdue-btn { flex: none; min-height: 36px; padding: 9px 15px; border: 1px solid var(--rd-danger-border); border-radius: 9px; background: var(--rd-surface); color: var(--rd-danger); font-size: 12.5px; font-weight: 800; white-space: nowrap; cursor: pointer; }
.sv-overdue-btn:hover { background: var(--rd-danger-bg); }

/* On/off switch — a button with role="switch"; the thumb slides, the track fills. */
.rd-switch { position: relative; display: inline-block; width: 40px; height: 23px; flex: none; padding: 0; border: 0; border-radius: 999px; background: var(--rd-track-empty); cursor: pointer; transition: background .15s; vertical-align: middle; }
.rd-switch > span { position: absolute; top: 3px; left: 3px; width: 17px; height: 17px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.25); transition: transform .15s; }
.rd-switch.is-on { background: var(--rd-success); }
.rd-switch.is-on > span { transform: translateX(17px); }
.rd-switch:focus-visible { outline: 2px solid var(--rd-primary); outline-offset: 2px; }
.rd-switch:disabled { opacity: .6; cursor: wait; }