/* ============================================================
   DiCom CRM Phase 2 — Stylesheet
   Design system migrated from Phase 1 prototype
   Colors: Primary #009fdb, Navy #1b2a4a, Success #2E844A,
           Warning #FE9339, Error #EA001E, BG #f5f7fa
   ============================================================ */

/* ── RESET & BASE ──────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
    height: 100%;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Inter', 'Helvetica Neue', Arial, sans-serif;
    font-size: 14px;
    color: #1f2937;
    background: #f5f7fa;
    -webkit-font-smoothing: antialiased;
}

/* ── DATE INPUTS — click anywhere to open picker ──────────── */
input[type="date"] {
    cursor: pointer;
}

/* ── LOGIN OVERLAY ─────────────────────────────────────────── */
.login-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: linear-gradient(135deg, #1b2a4a 0%, #152238 100%);
    display: flex; align-items: center; justify-content: center;
    z-index: 10000;
}
.login-card {
    text-align: center; padding: 48px; max-width: 420px;
}
.login-logo {
    width: 100px; height: auto; margin-bottom: 24px;
    filter: drop-shadow(0 0 16px rgba(0, 159, 219, 0.4));
}
.login-title {
    font-size: 32px; font-weight: 700; color: #fff; margin-bottom: 8px;
}
.login-title .accent { color: #009fdb; }
.login-subtitle {
    font-size: 14px; color: rgba(255,255,255,0.6); margin-bottom: 40px;
}
.login-btn {
    padding: 14px 36px !important; font-size: 15px !important;
    display: inline-flex; align-items: center; justify-content: center;
}
.login-error {
    color: #ff6b6b; margin-top: 20px; font-size: 13px;
    display: none; max-width: 320px; margin-left: auto; margin-right: auto;
}

/* ── LOADING OVERLAY ───────────────────────────────────────── */
.loading-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: #f5f7fa;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    z-index: 9999;
}
.loading-spinner {
    width: 40px; height: 40px;
    border: 3px solid #e5e7eb; border-top-color: #009fdb;
    border-radius: 50%; animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.loading-text {
    margin-top: 16px; font-size: 14px; color: #6b7280; font-weight: 500;
}

/* ── APP LAYOUT ────────────────────────────────────────────── */
.app-container {
    display: flex; height: 100vh; overflow: hidden;
}

/* ── SIDEBAR ───────────────────────────────────────────────── */
.sidebar {
    width: 250px; min-width: 250px;
    background: linear-gradient(180deg, #1b2a4a 0%, #152238 100%);
    display: flex; flex-direction: column;
    overflow-y: auto;
}
.sidebar-header {
    padding: 24px 20px 20px;
    text-align: center;
    border-bottom: 1px solid rgba(255,255,255,0.08);
}
.sidebar-logo-img {
    width: 90px; height: auto;
    display: block; margin: 0 auto 8px;
    padding: 8px; border-radius: 10px;
    background: radial-gradient(circle, rgba(255,255,255,0.15) 0%, rgba(255,255,255,0.05) 50%, transparent 70%);
    filter: drop-shadow(0 0 12px rgba(0,159,219,0.3)) drop-shadow(0 2px 4px rgba(0,0,0,0.2));
}
.sidebar-logo {
    font-size: 22px; font-weight: 700; color: #fff;
    letter-spacing: 2px;
}
.sidebar-logo .accent { color: #009fdb; }
.sidebar-subtitle {
    font-size: 10px; color: rgba(255,255,255,0.5);
    text-transform: uppercase; letter-spacing: 2.5px;
    margin-top: 4px; font-weight: 500;
}

/* ── NAV MENU ──────────────────────────────────────────────── */
.nav-menu {
    flex: 1; padding: 12px 0;
    display: flex; flex-direction: column;
}
.nav-item {
    padding: 11px 20px; cursor: pointer;
    color: rgba(255,255,255,0.7); font-size: 13px; font-weight: 500;
    border-left: 3px solid transparent;
    transition: all 0.2s ease; display: flex; align-items: center; gap: 10px;
    letter-spacing: 0.2px;
    user-select: none;
}
.nav-item:hover {
    background: rgba(0, 159, 219, 0.08);
    border-left-color: rgba(0, 159, 219, 0.4);
    color: rgba(255,255,255,0.9);
}
.nav-item.active {
    background: rgba(0, 159, 219, 0.15);
    border-left-color: #009fdb;
    color: #fff; font-weight: 600;
}
.nav-icon { font-size: 15px; width: 24px; text-align: center; }

/* Admin-only section divider in sidebar.
   Visible to Admin role; hidden for SalesPartner via role-access.js.
   Visual cue: thin gold line + small "ADMIN ONLY" pill with lock icon. */
.nav-divider {
    display: flex; align-items: center; gap: 8px;
    padding: 14px 16px 6px;
    color: rgba(245, 200, 90, 0.85);
    font-size: 9px; font-weight: 700; letter-spacing: 1.2px;
    text-transform: uppercase;
    user-select: none;
}
.nav-divider .nav-divider-line {
    flex: 1; height: 1px;
    background: linear-gradient(to right, transparent, rgba(245, 200, 90, 0.35), transparent);
}
.nav-divider .nav-divider-label {
    display: inline-flex; align-items: center;
    color: rgba(245, 200, 90, 0.95);
    background: rgba(245, 200, 90, 0.08);
    padding: 2px 8px; border-radius: 8px;
    border: 1px solid rgba(245, 200, 90, 0.25);
}
/* Admin-only tab visual cue — left border accent in gold so the protection
   boundary is visible at a glance even after scrolling. */
.nav-item.nav-admin-only {
    border-left-color: rgba(245, 200, 90, 0.18);
}
.nav-item.nav-admin-only:hover {
    border-left-color: rgba(245, 200, 90, 0.6);
    background: rgba(245, 200, 90, 0.06);
}
.nav-item.nav-admin-only.active {
    border-left-color: #f5c85a;
    background: rgba(245, 200, 90, 0.12);
}
/* Hide divider + admin-only marker for SalesPartner.
   role-access.js sets body.role-salespartner; .nav-admin-only tabs are
   already hidden via JS (display:none), so the divider has nothing to
   separate when SP is viewing — collapse it. */
body.role-salespartner .admin-only-tabs-divider { display: none; }

.nav-bug-report {
    margin-top: auto;
    border-top: 1px solid rgba(255,255,255,0.08);
    opacity: 0.7;
    font-size: 12px !important;
}
.nav-bug-report:hover { opacity: 1; }

/* ── SIDEBAR FOOTER ────────────────────────────────────────── */
.sidebar-footer {
    border-top: 1px solid rgba(255,255,255,0.08);
}
.user-info { padding: 16px 20px; }
.user-name { font-weight: 600; color: #fff; font-size: 13px; }
.user-email { font-size: 11px; color: rgba(255,255,255,0.5); margin-top: 3px; }
.user-actions { margin-top: 10px; display: flex; align-items: center; gap: 8px; }

/* Sidebar version label — small monospace stamp shown beneath the user-info
   block so operators can see at a glance which build they're on. Mirrors the
   DiCom Hub pattern. */
.sidebar-version {
    padding: 6px 20px 12px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 10.5px;
    color: rgba(255, 255, 255, 0.32);
    letter-spacing: 0.3px;
    user-select: text;
    cursor: help;
}

/* ── MOBILE MENU ──────────────────────────────────────────── */
.mobile-menu-btn {
    display: none; align-items: center; justify-content: center;
    background: none; border: none; color: #1b2a4a; cursor: pointer;
    padding: 4px; margin-right: 8px; border-radius: 6px;
    flex-shrink: 0;
}
.mobile-menu-btn:hover { background: rgba(0,0,0,0.06); }
.sidebar-overlay {
    display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.5);
    z-index: 998;
}
.sidebar-overlay.active { display: block; }
@media (max-width: 768px) {
    .mobile-menu-btn { display: flex; }
    .sidebar {
        position: fixed; left: -260px; top: 0; bottom: 0; width: 250px;
        z-index: 999; transition: left 0.25s ease;
        display: flex !important;
    }
    .sidebar.mobile-open { left: 0; }
}

/* ── ROLE BADGES ───────────────────────────────────────────── */
.role-badge {
    display: inline-block; padding: 2px 10px; border-radius: 10px;
    font-size: 10px; font-weight: 600; text-transform: uppercase;
    letter-spacing: 0.5px;
}
.role-badge.role-admin {
    background: rgba(0, 159, 219, 0.2); color: #5cc8f0;
}
.role-badge.role-partner {
    background: rgba(46, 132, 74, 0.2); color: #5ccc7a;
}

/* ── LOGOUT BUTTON ─────────────────────────────────────────── */
.btn-logout {
    background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.15);
    color: rgba(255,255,255,0.7); padding: 3px 12px; border-radius: 4px;
    font-size: 11px; cursor: pointer; transition: all 0.2s;
}
.btn-logout:hover {
    background: rgba(234, 0, 30, 0.2); border-color: rgba(234, 0, 30, 0.4);
    color: #ff8a8a;
}

/* ── MAIN CONTENT ──────────────────────────────────────────── */
.main-content {
    flex: 1; display: flex; flex-direction: column;
    overflow: hidden;
}
.page-header {
    padding: 18px 28px; background: #fff;
    border-bottom: 1px solid #e8e6e3;
    display: flex; align-items: center; justify-content: space-between;
    min-height: 60px;
}
.page-title {
    font-size: 22px; font-weight: 600; color: #1b2a4a;
    letter-spacing: -0.3px;
}
.header-date {
    font-size: 12px; color: #6b7280;
}

/* ── HEADER SITE-LINK BUTTONS (Support / Hub) ──────────────────
   Mirrors the .crm-link-btn the Hub + Support sites use to link back
   to the CRM. Colors hardcoded (CRM defines no CSS variables). */
.header-actions { display: flex; align-items: center; gap: 12px; }

.crm-link-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 14px;
    background:
        linear-gradient(to bottom,
            rgba(255,255,255,0.22) 0%,
            rgba(255,255,255,0.06) 48%,
            rgba(0,0,0,0.00) 52%,
            rgba(0,0,0,0.14) 100%),
        linear-gradient(135deg, #1b2a4a 0%, #152238 100%);
    color: #fff;
    border: 1px solid rgba(255,255,255,0.14);
    border-radius: 10px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.3px;
    text-decoration: none;
    box-shadow:
        0 8px 20px rgba(0,0,0,0.28),
        0 3px 8px rgba(0,159,219,0.18),
        inset 0 1px 0 rgba(255,255,255,0.22),
        inset 0 -1px 0 rgba(0,0,0,0.30);
    transition: transform 0.18s cubic-bezier(0.2,0.9,0.3,1.2),
                box-shadow 0.18s ease,
                border-color 0.18s ease;
    flex-shrink: 0;
    white-space: nowrap;
    will-change: transform;
}
.crm-link-btn:hover {
    text-decoration: none;
    transform: translateY(-2px);
    border-color: rgba(0,159,219,0.55);
    box-shadow:
        0 14px 30px rgba(0,0,0,0.34),
        0 5px 12px rgba(0,159,219,0.40),
        inset 0 1px 0 rgba(255,255,255,0.30),
        inset 0 -1px 0 rgba(0,0,0,0.28);
}
.crm-link-btn:active {
    transform: translateY(0);
    box-shadow:
        0 4px 10px rgba(0,0,0,0.28),
        0 1px 3px rgba(0,159,219,0.25),
        inset 0 2px 4px rgba(0,0,0,0.35),
        inset 0 -1px 0 rgba(255,255,255,0.08);
}
.crm-link-btn:focus-visible {
    outline: 2px solid #009fdb;
    outline-offset: 3px;
}
.crm-link-btn .accent { color: #009fdb; }
.crm-link-btn .crm-link-logo {
    width: 34px;
    height: 34px;
    border-radius: 8px;
    padding: 3px;
    background: radial-gradient(circle, rgba(255,255,255,0.20) 0%, rgba(255,255,255,0.05) 55%, transparent 75%);
    filter: drop-shadow(0 0 10px rgba(0,159,219,0.50)) drop-shadow(0 2px 3px rgba(0,0,0,0.30));
    flex-shrink: 0;
    display: block;
}
.crm-link-btn .crm-link-arrow {
    font-size: 14px;
    line-height: 1;
    color: #009fdb;
    margin-left: 2px;
    transition: transform 0.15s;
}
.crm-link-btn:hover .crm-link-arrow {
    transform: translate(1px,-1px);
}
/* Buttons are visible to every role — access is enforced at each target site
   (Hub/Support allowlists), not by hiding the link here. */

@media (max-width: 600px) {
    .crm-link-btn .crm-link-text { display: none; }
    .crm-link-btn { padding: 6px 9px; }
    .crm-link-btn .crm-link-logo { width: 30px; height: 30px; }
}

/* ── CONTENT AREA ──────────────────────────────────────────── */
.content-area {
    flex: 1; overflow-y: auto; padding: 24px;
}

/* ── TAB PANELS ────────────────────────────────────────────── */
.tab-panel { display: none; }
.tab-panel.active { display: block; }

/* ── KPI CARDS ─────────────────────────────────────────────── */
.kpi-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 12px; margin-bottom: 30px;
}
.kpi-grid-4 {
    grid-template-columns: repeat(4, 1fr);
}
.kpi-card {
    background: #fff; border-radius: 10px; padding: 16px 18px;
    border-left: 4px solid #009fdb;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
    transition: box-shadow 0.2s, transform 0.2s;
    min-width: 0;
}
.kpi-card:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08), 0 2px 4px rgba(0, 0, 0, 0.04);
}
.kpi-card.positive { border-left-color: #2E844A; }
.kpi-card.negative { border-left-color: #EA001E; }
.kpi-card.warning  { border-left-color: #FE9339; }
.kpi-card.info     { border-left-color: #009fdb; }

.kpi-label {
    font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px;
    color: #767676; font-weight: 500; margin-bottom: 6px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.kpi-value {
    font-size: clamp(20px, 2.2vw, 28px); font-weight: 700; color: #323130;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.kpi-sub {
    font-size: 12px; color: #6b7280; margin-top: 6px;
}
.kpi-trend {
    font-size: 12px; margin-top: 6px; display: flex; align-items: center; gap: 4px;
}
.kpi-trend.up   { color: #2E844A; }
.kpi-trend.down { color: #EA001E; }

/* ── CHARTS ────────────────────────────────────────────────── */
.charts-area { margin-top: 4px; }
.chart-section {
    background: #fff; border-radius: 10px; padding: 20px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
    margin-bottom: 20px;
}
.chart-title {
    font-size: 15px; font-weight: 600; color: #1b2a4a;
    margin-bottom: 18px; padding-bottom: 10px;
    border-bottom: 1px solid #eee;
}
.chart-container {
    position: relative; height: 300px;
    margin-bottom: 20px;
}
.chart-container.tall {
    height: 400px;
}
.chart-container.small {
    height: 250px;
}
.chart-container.compact {
    height: 220px;
}
#tab-sales > .two-column-charts .chart-section {
    padding: 14px 16px; margin-bottom: 0;
}
#tab-sales > .two-column-charts .chart-title {
    font-size: 13px; margin-bottom: 10px; padding-bottom: 6px;
}
#tab-sales > .two-column-charts {
    margin-bottom: 14px;
}
/* Pipeline editable table inputs */
#pipelineTableContainer input:hover,
#pipelineTableContainer select:hover {
    border-color: #ccc !important;
}
#pipelineTableContainer input:focus,
#pipelineTableContainer select:focus {
    border-color: #009fdb !important;
    outline: none;
    box-shadow: 0 0 0 2px rgba(0,159,219,0.1);
}
.two-column-charts {
    display: grid; grid-template-columns: 1fr 1fr;
    gap: 20px; margin-bottom: 20px;
}
.three-column-charts {
    display: grid; grid-template-columns: 1fr 1fr 1fr;
    gap: 20px; margin-bottom: 20px;
}

/* ── TOOLBAR ───────────────────────────────────────────────── */
.tab-toolbar {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 16px; gap: 12px; flex-wrap: wrap;
}
.toolbar-left { display: flex; gap: 8px; align-items: center; }
.toolbar-right { display: flex; gap: 8px; align-items: center; }

/* ── SEARCH INPUT ──────────────────────────────────────────── */
.search-input {
    padding: 7px 14px; border: 1px solid #d2ccc8; border-radius: 6px;
    font-size: 13px; width: 260px; background: #fff;
    transition: border-color 0.2s, box-shadow 0.2s;
}
.search-input:focus {
    outline: none; border-color: #009fdb;
    box-shadow: 0 0 0 3px rgba(0, 159, 219, 0.1);
}

/* ── FILTER ROW ────────────────────────────────────────────── */
.filter-row {
    display: flex; gap: 12px;
    background: #fff; padding: 14px 16px; border-radius: 10px;
    margin-bottom: 20px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
    border: 1px solid #f0f1f3;
}
.filter-group {
    display: flex; flex-direction: column;
}
.filter-group label {
    font-size: 10px; text-transform: uppercase; font-weight: 600;
    color: #767676; letter-spacing: 0.5px; margin-bottom: 5px;
}
.filter-group select, .filter-group input {
    padding: 8px 12px; border: 1px solid #ddd; border-radius: 6px;
    font-size: 13px; background: #fff; min-width: 140px;
    width: 100%; box-sizing: border-box;
}
.filter-group select:focus, .filter-group input:focus {
    outline: none; border-color: #009fdb;
    box-shadow: 0 0 0 3px rgba(0, 159, 219, 0.1);
}
.filter-group input[required],
.filter-group select[required] {
    background: #fffde6;
    border-color: #e6d566;
}
.filter-group input[required]:focus,
.filter-group select[required]:focus {
    background: #fff;
    border-color: #009fdb;
    box-shadow: 0 0 0 3px rgba(0, 159, 219, 0.1);
}

/* ── CUSTOM AUTOCOMPLETE DROPDOWN ─────────────────────────── */
.crm-ac-wrap {
    position: relative; width: 100% !important;
    flex: 1 1 auto; align-self: stretch;
}
.crm-ac-wrap input {
    width: 100% !important; box-sizing: border-box;
    padding-right: 28px;
}
.crm-ac-arrow {
    position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
    cursor: pointer; color: #767676; font-size: 14px; user-select: none; z-index: 2;
}
.crm-ac-dropdown {
    display: none; position: absolute; top: 100%; left: 0; right: 0;
    max-height: 220px; overflow-y: auto; background: #fff;
    border: 1px solid #ddd; border-top: none; border-radius: 0 0 6px 6px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.12); z-index: 999;
}
.crm-ac-item {
    padding: 7px 12px; font-size: 13px; cursor: pointer;
    border-bottom: 1px solid #f0f0f0;
}
.crm-ac-item:hover, .crm-ac-item.highlighted {
    background: #e8f4fd;
}
.crm-ac-item:last-child { border-bottom: none; }
.crm-ac-divider {
    border-top: 1px solid #e0e0e0; margin: 2px 0;
}
.crm-ac-item--alias {
    padding: 7px 12px; font-size: 13px; cursor: pointer;
    border-bottom: 1px solid #f0f0f0;
    background: #fafafa; font-style: italic;
}
.crm-ac-item--alias:hover {
    background: #e8f4fd;
}
.crm-ac-alias-arrow {
    color: #aaa;
}
.crm-ac-item--addnew {
    padding: 7px 12px; font-size: 13px; cursor: pointer;
    border-top: 1px solid #e0e0e0;
    background: #f0fdf4; color: #0B6E4F; font-weight: 600;
}
.crm-ac-item--addnew:hover { background: #dcfce7; }

/* Sales Hub Company-cell alias breadcrumb (↳ <original name>). Rendered when
 * a sale's OriginalCompany differs from its Company (post-merge breadcrumb).
 * Inline styles in render-functions.js drive the visual; this rule exists for
 * CSS discoverability + so future restyling has a single target. */
.sales-alias-breadcrumb {
    font-size: 10px; color: #6b46c1; font-style: italic; margin-top: 2px;
}

/* Primary-payment-received dot: green bullet before company name when an
 * Active Primary CommissionPayment exists for this sale. */
.sales-has-primary-dot {
    color: #16a34a;
    font-size: 14px;
    line-height: 1;
    vertical-align: middle;
    margin-right: 2px;
    user-select: none;
}

/* ── BUTTONS ───────────────────────────────────────────────── */
.btn-primary {
    background: linear-gradient(135deg, #009fdb 0%, #0176D3 100%);
    color: #fff; border: none; padding: 10px 20px; border-radius: 8px;
    font-size: 13px; font-weight: 600; cursor: pointer;
    box-shadow: 0 1px 3px rgba(1, 118, 211, 0.3);
    transition: all 0.2s ease; white-space: nowrap;
}
.btn-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 3px 8px rgba(1, 118, 211, 0.35);
}
.btn-primary:active { transform: translateY(0); }
.btn-primary:disabled {
    opacity: 0.6; cursor: not-allowed; transform: none;
    box-shadow: none;
}

.btn-secondary {
    background: #f3f2f1; color: #323130; border: 1px solid #e1e0df;
    padding: 6px 14px; border-radius: 4px; font-size: 12px;
    font-weight: 500; cursor: pointer; transition: all 0.2s;
}
.btn-secondary:hover { background: #e8e8e8; }

.btn-sm { padding: 4px 10px; font-size: 11px; border-radius: 4px; }

.btn-outline {
    background: #fff; color: #0176D3; border: 1px solid #0176D3;
    padding: 4px 10px; border-radius: 4px; font-size: 11px;
    font-weight: 600; cursor: pointer; transition: all 0.2s;
}
.btn-outline:hover { background: #0176D3; color: #fff; }

.btn-danger {
    background: #fce4e6; color: #a4262c; border: 1px solid #f3d6d8;
    padding: 6px 14px; border-radius: 4px; font-size: 12px;
    font-weight: 500; cursor: pointer; transition: all 0.2s;
}
.btn-danger:hover { background: #d4484e; color: #fff; }

/* ── DATA TABLES ───────────────────────────────────────────── */
.data-table-container {
    background: #fff; border-radius: 10px; overflow: hidden;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}
.data-table {
    width: 100%; border-collapse: collapse; font-size: 13px;
}
.data-table thead {
    background: #f8f9fa; border-bottom: 2px solid #e5e7eb;
}
.data-table th {
    padding: 10px 12px; text-align: left; font-size: 12px;
    font-weight: 600; text-transform: uppercase; letter-spacing: 0.3px;
    color: #1b2a4a; white-space: nowrap;
}
.data-table th.sortable { cursor: pointer; user-select: none; }
.data-table th.sortable:hover { background: #eef1f5; color: #1b2a4a; }
.data-table th.sort-asc::after { content: ' ▲'; font-size: 9px; }
.data-table th.sort-desc::after { content: ' ▼'; font-size: 9px; }

.data-table td {
    padding: 10px 12px; border-bottom: 1px solid #f0f1f3;
    color: #374151; vertical-align: middle;
}
.data-table tbody tr { transition: background 0.15s; }
.data-table tbody tr:hover { background: #f8fafc; }
.data-table tbody tr.clickable { cursor: pointer; }

/* ── CTN CELL (Click to Copy) ──────────────────────────────── */
.ctn-cell {
    font-family: 'SF Mono', 'Consolas', 'Monaco', monospace;
    font-size: 12px; color: #009fdb; cursor: pointer;
    user-select: all; transition: all 0.15s;
    padding: 2px 6px; border-radius: 3px; border: 1px solid transparent;
}
.ctn-cell:hover {
    background: #e8f0fe; border-color: #0176D3;
}
.ctn-cell.copied {
    background: #dff6dd; border-color: #2E844A; color: #2E844A;
}

/* ── STATUS BADGES ─────────────────────────────────────────── */
.status-badge {
    display: inline-block; padding: 3px 10px; border-radius: 12px;
    font-size: 11px; font-weight: 600; letter-spacing: 0.3px;
}
.status-paid      { background: #e6f4ea; color: #1e7e34; }
.status-pending   { background: #fff3cd; color: #856404; }
.status-disputed  { background: #fce4e6; color: #c62828; }
.status-partial   { background: #fff0e0; color: #e65100; }
.status-cancelled { background: #f0f0f0; color: #6b7280; text-decoration: line-through; font-style: italic; }
.status-new       { background: #e3f2fd; color: #1565c0; }
.status-contacted { background: #e8eaf6; color: #283593; }
.status-qualified { background: #e0f2f1; color: #00695c; }
.status-proposal  { background: #fff8e1; color: #f57f17; }
.status-won       { background: #e6f4ea; color: #1e7e34; }
.status-lost      { background: #fce4e6; color: #c62828; }
.status-default   { background: #f5f5f5; color: #616161; }

/* ── KANBAN BOARD (Pipeline) ───────────────────────────────── */
.kanban-container {
    display: flex; gap: 16px; overflow-x: auto; padding-bottom: 8px;
    min-height: 400px;
}
.kanban-column {
    min-width: 220px; flex: 1;
    background: #f8f9fb; border-radius: 10px; overflow: hidden;
    border: 1px solid #eef0f4;
}
.kanban-header {
    background: linear-gradient(135deg, #009fdb 0%, #0176D3 100%);
    color: white; padding: 16px;
    font-weight: 600; font-size: 14px;
}
.kanban-card {
    background: #fff; border-radius: 8px; padding: 14px;
    margin-bottom: 10px; cursor: pointer;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
    border-left: 3px solid #009fdb;
    transition: transform 0.15s, box-shadow 0.15s;
}
.kanban-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}
.kanban-company {
    font-weight: 600; font-size: 13px; color: #1b2a4a; margin-bottom: 8px;
}
.kanban-detail {
    display: flex; justify-content: space-between; font-size: 12px;
    color: #6b7280; margin-bottom: 4px;
}
.kanban-detail span:last-child { font-weight: 600; color: #374151; }

/* ── MODAL / POPOVER ───────────────────────────────────────── */
.modal-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.35); z-index: 9990;
    display: flex; align-items: center; justify-content: center;
    animation: fadeIn 0.15s ease;
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

.modal-content {
    background: #fff; border-radius: 14px; padding: 24px;
    max-width: 520px; width: 94%; max-height: 90vh; overflow-y: auto;
    box-shadow: 0 20px 60px rgba(0,0,0,0.2), 0 0 0 1px rgba(0,0,0,0.05);
    animation: popFadeIn 0.2s ease-out;
}
.modal-content--wide {
    max-width: 820px;
}
/* Sale form sub-sections */
.sale-form-section {
    border-radius: 10px; padding: 14px 16px; margin-bottom: 12px;
}
.sale-form-section--partner {
    background: linear-gradient(135deg, #faf5ff 0%, #f3e8ff 100%);
    border: 1px solid #d8b4fe;
}
.sale-form-section--cosell {
    background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
    border: 1px solid #93c5fd;
}
.sale-form-section__heading {
    display: flex; align-items: center; gap: 8px; margin-bottom: 10px;
}
.sale-form-section__title {
    font-weight: 700; font-size: 13px;
}
.sale-form-section__title--partner { color: #7c3aed; }
.sale-form-section__title--cosell  { color: #1d4ed8; }
.sale-form-section__subtitle {
    font-size: 10px; font-weight: 500;
}
.sale-form-section__subtitle--partner { color: #a78bfa; }
.sale-form-section__subtitle--cosell  { color: #60a5fa; }
.sale-dicom-net {
    background: #f0fdf4; border: 1px solid #bbf7d0; border-radius: 6px;
    padding: 7px 10px; font-weight: 600; color: #166534; font-size: 13px;
    margin-top: 4px;
}
/* ── Role-based visibility via body class (covers dynamic content) ── */
body.role-salespartner .field-dicom-payout { display: none !important; }
body.role-salespartner .field-dicom-revenue { display: none !important; }
body.role-salespartner .field-amount-owed { display: none !important; }
body.role-salespartner .field-partner-select { display: none !important; }
body.role-salespartner .field-dicom-net { display: none !important; }
body.role-salespartner .dicom-net-display { display: none !important; }
body.role-salespartner .admin-only-field { display: none !important; }
body.role-admin .field-my-earnings { display: none !important; }

.form-row--5 { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; }
.form-row--4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.form-row--3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.form-row--2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 640px) {
    .form-row--5, .form-row--4, .form-row--3, .form-row--2 { grid-template-columns: 1fr; }
    .modal-content--wide { max-width: 94%; }
}
@keyframes popFadeIn {
    from { opacity: 0; transform: scale(0.96); }
    to { opacity: 1; transform: scale(1); }
}
.modal-header {
    display: flex; justify-content: space-between; align-items: center;
    margin-bottom: 20px; padding-bottom: 14px;
    border-bottom: 1px solid #f0f1f3;
}
.modal-title { font-size: 18px; font-weight: 700; color: #1b2a4a; }
.modal-close {
    background: none; border: none; font-size: 24px;
    color: #6b7280; cursor: pointer; padding: 4px 8px;
    border-radius: 4px; transition: all 0.15s;
}
.modal-close:hover { background: #f3f2f1; color: #1b2a4a; }

/* ── FORMS ─────────────────────────────────────────────────── */
.form-group { margin-bottom: 16px; }
.form-group label {
    display: block; font-size: 12px; font-weight: 600;
    color: #767676; text-transform: uppercase; letter-spacing: 0.3px;
    margin-bottom: 4px;
}
.form-group input,
.form-group select,
.form-group textarea {
    width: 100%; padding: 8px 12px;
    border: 1px solid #d2ccc8; border-radius: 6px;
    font-size: 13px; background: #fff; color: #1f2937;
    transition: border-color 0.2s, box-shadow 0.2s;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: none; border-color: #009fdb;
    box-shadow: 0 0 0 3px rgba(0, 159, 219, 0.1);
}
.form-group input[required],
.form-group select[required] {
    background: #fffde6;
    border-color: #e6d566;
}
.form-group input[required]:focus,
.form-group select[required]:focus {
    background: #fff;
    border-color: #009fdb;
    box-shadow: 0 0 0 3px rgba(0, 159, 219, 0.1);
}
.form-group textarea { resize: vertical; min-height: 80px; }
.form-group .error-text {
    color: #EA001E; font-size: 11px; margin-top: 4px; display: none;
}
.form-group.has-error input,
.form-group.has-error select {
    border-color: #EA001E;
    box-shadow: 0 0 0 2px rgba(234, 0, 30, 0.1);
}
.form-row {
    display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
}
.form-actions {
    display: flex; gap: 8px; margin-top: 24px; padding-top: 16px;
    border-top: 1px solid #f0f1f3;
}

/* ── ALERT MESSAGES ────────────────────────────────────────── */
.alert {
    padding: 12px 16px; border-radius: 8px; margin-bottom: 16px;
    font-size: 13px; display: flex; align-items: center; gap: 8px;
}
.alert-success { background: #e6f4ea; color: #1e7e34; border-left: 4px solid #2E844A; }
.alert-error   { background: #fce4e6; color: #c62828; border-left: 4px solid #EA001E; }
.alert-warning { background: #fff3cd; color: #856404; border-left: 4px solid #FE9339; }
.alert-info    { background: #e3f2fd; color: #1565c0; border-left: 4px solid #009fdb; }

/* ── PAGINATION ────────────────────────────────────────────── */
.pagination {
    display: flex; align-items: center; justify-content: center;
    gap: 8px; padding: 16px 0;
}
.pagination button {
    padding: 6px 12px; border: 1px solid #d2ccc8; border-radius: 4px;
    background: #fff; font-size: 12px; cursor: pointer; transition: all 0.15s;
}
.pagination button:hover { background: #f3f2f1; }
.pagination button.active {
    background: #009fdb; color: #fff; border-color: #009fdb;
}
.pagination button:disabled { opacity: 0.5; cursor: not-allowed; }
.pagination .page-info { font-size: 12px; color: #6b7280; }

/* ── DETAIL GRID (Popover Info) ────────────────────────────── */
.detail-grid {
    display: grid; grid-template-columns: 1fr 1fr; gap: 12px 20px;
}
.detail-item {}
.detail-label {
    font-size: 10px; text-transform: uppercase; font-weight: 600;
    color: #767676; letter-spacing: 0.3px; margin-bottom: 3px;
}
.detail-value { font-size: 13px; color: #323130; font-weight: 500; }

/* ── LOADING PLACEHOLDER ───────────────────────────────────── */
.loading-placeholder {
    text-align: center; padding: 60px 20px;
    color: #6b7280; font-size: 14px;
}

/* ── EMPTY STATE ───────────────────────────────────────────── */
.empty-state {
    text-align: center; padding: 60px 20px; color: #9ca3af;
}
.empty-state-icon { font-size: 48px; margin-bottom: 16px; }
.empty-state-text { font-size: 15px; font-weight: 500; color: #6b7280; }
.empty-state-sub { font-size: 13px; color: #9ca3af; margin-top: 6px; }

/* ── COMMISSION IMPORT WIZARD ──────────────────────────────── */
.import-step { margin-top: 16px; }
.import-step h3 { font-size: 16px; font-weight: 600; margin-bottom: 8px; color: #1b2a4a; }
.import-hint { font-size: 13px; color: #6b7280; margin-bottom: 12px; }

.file-drop-zone {
    border: 2px dashed #d2ccc8; border-radius: 12px; padding: 40px 20px;
    text-align: center; color: #6b7280; font-size: 14px;
    transition: all 0.2s; cursor: pointer; background: #fafafa;
}
.file-drop-zone.drag-over {
    border-color: #009fdb; background: #e3f2fd; color: #009fdb;
}
.file-drop-zone a { color: #009fdb; text-decoration: underline; cursor: pointer; }

.column-mapping-grid {
    display: grid; grid-template-columns: 1fr 40px 1fr; gap: 8px;
    align-items: center; max-width: 600px;
}
.mapping-arrow { text-align: center; color: #9ca3af; font-size: 18px; }
.mapping-label {
    font-size: 13px; padding: 8px 12px; background: #f5f7fa;
    border-radius: 6px; border: 1px solid #e5e7eb;
}
.mapping-select {
    padding: 8px 12px; border: 1px solid #d2ccc8; border-radius: 6px;
    font-size: 13px; background: #fff;
}
.mapping-required { color: #EA001E; font-weight: 600; }

.validation-summary {
    padding: 16px; border-radius: 8px; margin-bottom: 16px;
    font-size: 13px; line-height: 1.6;
}
.validation-summary.valid { background: #e6f4ea; border-left: 4px solid #2E844A; }
.validation-summary.has-errors { background: #fce4e6; border-left: 4px solid #EA001E; }
.validation-summary .stat { font-weight: 600; }

.import-preview-table {
    max-height: 400px; overflow-y: auto; border: 1px solid #e5e7eb;
    border-radius: 8px; margin-top: 12px;
}
.import-preview-table table { width: 100%; border-collapse: collapse; }
.import-preview-table th {
    position: sticky; top: 0; background: #f5f7fa; font-size: 11px;
    text-transform: uppercase; padding: 8px 12px; text-align: left;
    border-bottom: 2px solid #e5e7eb; font-weight: 600;
}
.import-preview-table td { padding: 6px 12px; font-size: 12px; border-bottom: 1px solid #f0f1f3; }
.import-preview-table tr.row-error { background: #fef2f2; }
.import-preview-table .cell-error { color: #EA001E; font-weight: 500; }
.import-progress {
    width: 100%; height: 8px; background: #e5e7eb; border-radius: 4px;
    margin: 16px 0; overflow: hidden;
}
.import-progress-bar {
    height: 100%; background: linear-gradient(90deg, #009fdb, #2E844A);
    border-radius: 4px; transition: width 0.3s;
}

/* ── SUMMARY ROW ───────────────────────────────────────────── */
.summary-row {
    background: linear-gradient(135deg, #f0f4f8 0%, #e8edf3 100%);
    padding: 16px; border-radius: 10px;
    margin-top: 16px; display: flex;
    justify-content: space-around; gap: 20px;
    border: 1px solid #e5e9ef;
    flex-wrap: wrap;
}
.summary-item { text-align: center; }
.summary-label {
    font-size: 11px; color: #767676;
    text-transform: uppercase; margin-bottom: 4px;
}
.summary-value {
    font-size: 18px; font-weight: 700; color: #323130;
}

/* ── EXPORT BAR ────────────────────────────────────────────── */
.export-bar {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 14px; margin: 10px 0;
    background: #f0f6ff; border: 1px solid #d0e2f7;
    border-radius: 8px; flex-wrap: wrap; font-size: 13px;
}
.export-bar select {
    padding: 5px 8px; border: 1px solid #ccc; border-radius: 4px;
    font-size: 12px; background: #fff;
}
.export-bar select:focus {
    outline: none; border-color: #009fdb;
    box-shadow: 0 0 0 2px rgba(0,159,219,0.1);
}
.btn-export {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 7px 14px; border: none; border-radius: 6px;
    font-size: 12px; font-weight: 600; cursor: pointer;
    min-height: 36px; min-width: 44px;
    transition: filter 0.15s ease, box-shadow 0.15s ease;
}
.btn-export:focus-visible {
    outline: 2px solid #0176D3; outline-offset: 2px;
}
.btn-export:hover { filter: brightness(0.92); }
.btn-export:active { filter: brightness(0.85); }
.btn-export-excel  { background: #2E844A; color: #fff; }
.btn-export-pdf    { background: #c0392b; color: #fff; }
.btn-export-upload { background: #FE9339; color: #fff; }

/* ── THREE COLUMN CHARTS (responsive) ──────────────────────── */
@media (max-width: 1200px) {
    .two-column-charts { grid-template-columns: 1fr; }
    .three-column-charts { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
    .kpi-grid { grid-template-columns: repeat(3, 1fr); }
    .kpi-value { font-size: 20px; }
    .export-bar { flex-direction: column; align-items: flex-start; }
    .summary-row { flex-direction: column; text-align: center; }
}

/* ── DANGER KPI CARD ───────────────────────────────────────── */
.kpi-card.negative { border-left-color: #EA001E; }
.kpi-card.danger   { border-left-color: #EA001E; }

/* ── STATUS CANCELLED (red strikethrough) ──────────────────── */
.status-cancelled {
    color: #D32F2F;
    font-weight: 600;
    font-style: italic;
    text-decoration: line-through;
}

/* ── CTN COPY CELL (click to copy) ────────────────────────── */
.ctn-copy-cell {
    cursor: pointer;
    position: relative;
    padding: 4px 8px;
    border-radius: 4px;
    transition: background 0.15s;
    user-select: all;
    font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
    font-size: 12px;
}
.ctn-copy-cell:hover {
    background: #e8f0fe;
    outline: 2px solid #0176D3;
}
.ctn-copy-cell.copied {
    background: #dff6dd;
    outline: 2px solid #2E844A;
}
.ctn-copy-cell .copy-toast {
    position: absolute;
    top: -24px;
    left: 50%;
    transform: translateX(-50%);
    background: #333;
    color: #fff;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 10px;
    white-space: nowrap;
    pointer-events: none;
    user-select: none;
    opacity: 0;
    transition: opacity 0.2s;
}
.ctn-copy-cell.copied .copy-toast { opacity: 1; }

/* ── ROW POPOVER (action modal) ────────────────────────────── */
.row-popover-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    z-index: 999; background: rgba(0,0,0,0.35);
}
.row-popover {
    z-index: 1000; background: #fff;
    border-radius: 10px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.22);
    padding: 20px 24px; width: 900px; max-width: 96vw; max-height: 90vh;
    overflow-y: auto;
    font-size: 13px; animation: popFadeIn 0.2s ease-out;
}
.row-popover .pop-header {
    font-weight: 700; font-size: 15px; color: #0176D3; margin-bottom: 4px;
}
.row-popover .pop-sub {
    font-size: 11px; color: #767676; margin-bottom: 12px;
}
.row-popover .pop-divider {
    border-top: 1px solid #e8e8e8; margin: 10px 0;
}
.row-popover .pop-row {
    display: flex; align-items: center; gap: 10px; margin-bottom: 8px;
}
.row-popover .pop-label {
    font-weight: 600; color: #333; min-width: 55px;
}
.row-popover .pop-status-btn {
    padding: 5px 14px; border-radius: 14px; border: 1.5px solid #ccc;
    background: #fff; cursor: pointer; font-size: 12px; font-weight: 600;
    transition: all 0.15s;
}
.row-popover .pop-status-btn:hover { filter: brightness(0.95); }
.row-popover .pop-status-btn.active { border-width: 2px; }
.row-popover .pop-status-btn.s-paid   { color: #0B6E4F; border-color: #0B6E4F; }
.row-popover .pop-status-btn.s-paid.active   { background: #dff6dd; }
.row-popover .pop-status-btn.s-pending { color: #8A6D3B; border-color: #C8A951; }
.row-popover .pop-status-btn.s-pending.active { background: #fff4ce; }
.row-popover .pop-status-btn.s-disputed { color: #C62828; border-color: #C62828; }
.row-popover .pop-status-btn.s-disputed.active { background: #fef2f2; }
.row-popover .pop-cancel-btn {
    padding: 6px 18px; border-radius: 6px; border: 1.5px solid;
    cursor: pointer; font-size: 12px; font-weight: 600; width: 100%;
}
.row-popover .pop-cancel-btn.cancel  { color: #D32F2F; border-color: #D32F2F; background: #fef2f2; }
.row-popover .pop-cancel-btn.cancel:hover  { background: #fde0e0; }
.row-popover .pop-cancel-btn.restore { color: #2E844A; border-color: #2E844A; background: #f0faf3; }
.row-popover .pop-cancel-btn.restore:hover { background: #d8f2e0; }
.data-table tbody tr.clickable-row { cursor: pointer; }
.data-table tbody tr.clickable-row:hover { background: #f0f4ff !important; }
tr.cancelled-row { position: relative; }
tr.cancelled-row::after {
    content: ''; position: absolute; left: 0; right: 0;
    top: 50%; height: 1px; background: #D32F2F; pointer-events: none;
}

/* ── SORT HEADER INDICATORS ────────────────────────────────── */
.sorted-asc::after  { content: " ▲"; color: #009fdb; }
.sorted-desc::after { content: " ▼"; color: #009fdb; }
/* Also support data-table class variants */
.data-table th.sort-asc::after  { content: ' ▲'; font-size: 9px; color: #009fdb; }
.data-table th.sort-desc::after { content: ' ▼'; font-size: 9px; color: #009fdb; }

/* ── YEARLY SALES SECTIONS ─────────────────────────────────── */
.yr-section {
    margin-bottom: 16px;
    border-radius: 10px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.08);
    overflow: hidden;
}
.yr-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 14px;
    background: #0176D3;
    color: #fff;
    cursor: pointer;
    user-select: none;
    font-weight: 600;
    font-size: 14px;
    border-radius: 10px 10px 0 0;
    transition: background 0.15s;
}
.yr-header:hover { background: #0165b8; }
.yr-header:focus-visible {
    outline: 3px solid #fff;
    outline-offset: -3px;
}
.yr-header-left {
    display: flex;
    align-items: center;
    gap: 6px;
}
.yr-arrow {
    display: inline-block;
    font-size: 11px;
    transition: transform 0.2s;
    width: 12px;
    text-align: center;
}
.yr-label { font-size: 14px; font-weight: 700; }
.yr-count { font-size: 12px; font-weight: 400; opacity: 0.9; }
.yr-cancelled-note { font-size: 11px; font-weight: 400; opacity: 0.8; }
.yr-header-right { font-size: 12px; font-weight: 400; opacity: 0.95; white-space: nowrap; display: inline-flex; align-items: center; gap: 10px; }
.yr-residual {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding-right: 10px;
    border-right: 1px solid rgba(255,255,255,0.4);
    font-weight: 500;
}
.yr-residual-label { font-size: 11px; opacity: 0.85; text-transform: uppercase; letter-spacing: 0.4px; }
.yr-residual-value { font-weight: 700; font-size: 12px; }
.yr-header-revenue { font-weight: 500; }
.cc-residual-badge {
    background: #dcfce7 !important;
    color: #15803d !important;
    border: 1px solid #86efac;
}

/* ── Aliases pills (Contacts company card) ────────────────────────────── */
.cc-aliases-section {
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid #e5e7eb;
}
.cc-aliases-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
}
.cc-alias-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px 3px 4px;
    border: 1px solid #c7d2fe;
    background: #eef2ff;
    border-radius: 999px;
    font-size: 11px;
    line-height: 1.5;
}
.cc-alias-pill .cc-alias-tsd {
    background: #4338ca;
    color: #fff;
    padding: 1px 8px;
    border-radius: 999px;
    font-weight: 700;
    font-size: 10px;
    letter-spacing: 0.3px;
}
.cc-alias-pill .cc-alias-text {
    color: #1e1b4b;
    font-weight: 500;
}
.yr-body { background: #fff; }
.yr-body .data-table { border-radius: 0; }
@media (max-width: 640px) {
    .yr-header { flex-direction: column; align-items: flex-start; gap: 4px; }
    .yr-header-right { font-size: 11px; }
}

/* ── LEAD GROUP HEADER COLORS ─────────────────────────────── */
.yr-header.lead-active  { background: #0176D3; }
.yr-header.lead-active:hover  { background: #0165b8; }
.yr-header.lead-won     { background: #2E844A; }
.yr-header.lead-won:hover     { background: #256e3d; }
.yr-header.lead-lost    { background: #BA0517; }
.yr-header.lead-lost:hover    { background: #9e0414; }

/* ── LEADS TABLE ALTERNATING ROWS ────────────────────────── */
#leads-table-container .data-table tbody tr:nth-child(even) { background: #f8fafc; }
#leads-table-container .data-table tbody tr:nth-child(odd)  { background: #ffffff; }
#leads-table-container .data-table tbody tr:hover           { background: #eef4fb; }

/* ── DORMANT CLIENT SEVERITY COLORS ───────────────────────── */
.yr-header.dormant-atrisk    { background: #d97706; }
.yr-header.dormant-atrisk:hover    { background: #b45309; }
.yr-header.dormant-aging     { background: #c2410c; }
.yr-header.dormant-aging:hover     { background: #9a3412; }
.yr-header.dormant-critical  { background: #BA0517; }
.yr-header.dormant-critical:hover  { background: #9e0414; }

/* ── PARTNER CATEGORY COLORS ───────────────────────────────── */
.partner-affiliate { background: #0B6E4F !important; }
.partner-internal  { background: #0176D3 !important; }
.partner-cosell    { background: #FE9339 !important; }
.partner-section-header.affiliate { border-bottom-color: #0B6E4F; }
.partner-section-header.internal  { border-bottom-color: #0176D3; }
.partner-section-header.cosell    { border-bottom-color: #FE9339; }

/* ── LOST LEADS SECTION (red border) ──────────────────────── */
.lost-leads-section {
    border-left: 4px solid #EA001E;
}

/* ── ADD PARTNER FORM (dashed border) ─────────────────────── */
.add-partner-form {
    background: #f8f9fa; border: 1px dashed #ccc; border-radius: 8px;
    padding: 16px; margin-top: 12px; display: none;
}
.add-partner-form.visible { display: block; }

/* ── PROSPECT SUB-TABS ─────────────────────────────────────── */
.tab-buttons {
    display: flex; gap: 8px; margin-bottom: 16px;
    border-bottom: 2px solid #f3f2f1;
}
.tab-button {
    padding: 10px 16px; background: transparent; border: none;
    cursor: pointer; font-size: 13px; font-weight: 500;
    color: #6b7280; border-bottom: 2px solid transparent;
    margin-bottom: -2px; transition: all 0.2s ease;
}
.tab-button:hover { color: #1b2a4a; }
.tab-button.active {
    color: #009fdb; border-bottom-color: #009fdb; font-weight: 600;
}
.tab-content { display: none; }
.tab-content.active { display: block; }

/* ── TSD CARDS ─────────────────────────────────────────────── */
.tsd-card {
    background: #fff; border-radius: 10px; margin-bottom: 12px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
    border-left: 4px solid #0176D3; overflow: hidden;
    transition: box-shadow 0.2s ease;
}
.tsd-card:hover { box-shadow: 0 4px 12px rgba(0,0,0,0.08); }
.tsd-card-header {
    padding: 14px 16px; display: flex; justify-content: space-between;
    align-items: center; cursor: pointer; transition: background 0.15s;
}
.tsd-card-header:hover { background: #fafafa; }
.tsd-card-body { display: none; padding: 0 16px 16px; border-top: 1px solid #f0f0f0; }
.tsd-card.expanded .tsd-card-body { display: block; }
.tsd-card.expanded .tsd-card-header { background: #fafafa; }
.tsd-name { font-weight: 700; font-size: 14px; color: #032D60; }
.tsd-status-chip {
    font-size: 10px; font-weight: 600; padding: 2px 8px;
    border-radius: 10px; margin-left: 8px; vertical-align: middle;
}
.tsd-status-chip.active   { background: #dff6dd; color: #0B6E4F; }
.tsd-status-chip.inactive { background: #fee2e2; color: #dc2626; }
.tsd-quick-stats { display: flex; gap: 16px; font-size: 12px; color: #555; }
.tsd-expand-arrow { font-size: 16px; color: #999; transition: transform 0.2s; }
.tsd-card.expanded .tsd-expand-arrow { transform: rotate(180deg); }

/* ── KANBAN BODY PADDING ───────────────────────────────────── */
.kanban-body { padding: 10px 12px; }
.kanban-body .kanban-card { margin: 0 0 10px 0; }

/* ── UNDO BUTTON ───────────────────────────────────────────── */
#globalUndoBtn {
    position: fixed; bottom: 24px; right: 24px; z-index: 9000;
    display: none; align-items: center; gap: 6px;
    padding: 10px 18px; border-radius: 28px; border: none;
    background: linear-gradient(135deg, #1b2a4a 0%, #2a3f6a 100%);
    color: #fff; cursor: pointer; font-size: 13px; font-weight: 600;
    box-shadow: 0 4px 16px rgba(27,42,74,0.35);
    transition: transform 0.15s, box-shadow 0.15s;
}
#globalUndoBtn:hover { transform: translateY(-2px); box-shadow: 0 6px 24px rgba(27,42,74,0.45); }
#globalUndoBtn .undo-count {
    background: #0176D3; color: #fff; border-radius: 10px;
    padding: 1px 7px; font-size: 11px; font-weight: 700;
}
.undo-toast {
    position: fixed; bottom: 80px; right: 24px; z-index: 9001;
    background: #333; color: #fff; padding: 8px 18px; border-radius: 8px;
    font-size: 12px; font-weight: 500; box-shadow: 0 4px 12px rgba(0,0,0,0.2);
    opacity: 0; transform: translateY(8px);
    transition: opacity 0.3s, transform 0.3s;
}
.undo-toast.show { opacity: 1; transform: translateY(0); }

/* ── COMPANY META (Contacts) — editable inputs ─────────────── */
.company-meta input,
.company-meta select {
    width: 100%; padding: 6px 8px;
    border: 1px solid #e1e0df; border-radius: 4px; font-size: 12px;
    background: #fff; transition: border-color 0.15s;
}
.company-meta input:focus,
.company-meta select:focus {
    outline: none; border-color: #009fdb;
    box-shadow: 0 0 0 2px rgba(0,159,219,0.1);
}

/* ── CONTACT ROW (editable inputs) ────────────────────────── */
.contact-row input {
    padding: 6px 8px; border: 1px solid #e1e0df; border-radius: 4px;
    font-size: 12px; width: 100%; background: #fff;
}
.contact-row input:focus {
    outline: none; border-color: #009fdb;
    box-shadow: 0 0 0 2px rgba(0,159,219,0.1);
}

/* ── FORECAST SECTION ──────────────────────────────────────── */
#dealsClosingForecast .chart-section {
    border-top: 4px solid transparent;
}
#dealsClosingForecast .chart-section:nth-child(1) { border-top-color: #2E844A; }
#dealsClosingForecast .chart-section:nth-child(2) { border-top-color: #FE9339; }
#dealsClosingForecast .chart-section:nth-child(3) { border-top-color: #0B3D91; }

/* ── RESPONSIVE ────────────────────────────────────────────── */
/* ── PARTNER DASHBOARD ─────────────────────────────────────── */
.partner-welcome {
    display: flex; justify-content: space-between; align-items: center;
    background: linear-gradient(135deg, #1b2a4a 0%, #009fdb 100%);
    color: #fff; padding: 24px 28px; border-radius: 10px; margin-bottom: 20px;
}
.partner-greeting { font-size: 22px; font-weight: 600; margin-bottom: 4px; }
.partner-subtitle { font-size: 14px; opacity: 0.85; }
.partner-quick-actions { display: flex; gap: 8px; }
.partner-quick-actions .btn-primary,
.partner-quick-actions .btn-secondary {
    white-space: nowrap; font-size: 13px; padding: 8px 16px;
}
.partner-quick-actions .btn-secondary {
    background: rgba(255,255,255,0.15); color: #fff; border: 1px solid rgba(255,255,255,0.3);
}
.partner-quick-actions .btn-secondary:hover { background: rgba(255,255,255,0.25); }

.partner-kpi-grid {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 20px;
}
.partner-kpi-card {
    background: #fff; border-radius: 8px; padding: 18px 20px;
    display: flex; align-items: center; gap: 14px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}
.partner-kpi-icon { font-size: 28px; }
.partner-kpi-value { font-size: 22px; font-weight: 700; color: #1b2a4a; }
.partner-kpi-label { font-size: 12px; color: #64748b; text-transform: uppercase; letter-spacing: 0.5px; }

.partner-two-col {
    display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 20px;
}
.partner-section {
    background: #fff; border-radius: 8px; padding: 20px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}
.partner-full-width { margin-bottom: 20px; }
.partner-section-header {
    display: flex; justify-content: space-between; align-items: center;
    margin-bottom: 14px; padding-bottom: 10px; border-bottom: 1px solid #e2e8f0;
}
.partner-section-header h3 { font-size: 15px; font-weight: 600; color: #1b2a4a; }
.partner-see-all {
    font-size: 12px; color: #009fdb; text-decoration: none; font-weight: 500;
}
.partner-see-all:hover { text-decoration: underline; }

.partner-mini-table {
    width: 100%; border-collapse: collapse; font-size: 13px;
}
.partner-mini-table thead th {
    text-align: left; padding: 8px 10px; font-size: 11px;
    text-transform: uppercase; color: #64748b; border-bottom: 1px solid #e2e8f0;
    font-weight: 600; letter-spacing: 0.3px;
}
.partner-mini-table tbody td {
    padding: 10px 10px; border-bottom: 1px solid #f1f5f9; color: #334155;
}
.partner-mini-table tbody tr:last-child td { border-bottom: none; }
.partner-mini-table tbody tr:hover { background: #f8fafc; }

.partner-charts-row {
    display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 20px;
}
.partner-charts-row .chart-section {
    background: #fff; border-radius: 8px; padding: 20px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}
.partner-charts-grid {
    display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 20px;
}
.partner-charts-grid .chart-section {
    background: #fff; border-radius: 8px; padding: 20px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}

/* ── CONTACTS: COMPANY CARDS ───────────────────────────────── */
.contacts-filter-bar {
    display: flex; align-items: center; gap: 12px; margin-bottom: 16px; font-size: 13px; font-weight: 600; color: #1b2a4a;
}
.company-card {
    background: #fff; border-radius: 8px; margin-bottom: 10px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08); border: 1px solid #e2e8f0; overflow: hidden;
    border-left: 4px solid #0176D3;
}
.company-meta {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; padding: 16px 18px;
    background: #f8fafc; border-bottom: 1px solid #e2e8f0;
}
.company-meta label {
    display: block; font-size: 10px; font-weight: 600; color: #767676;
    text-transform: uppercase; letter-spacing: 0.4px; margin-bottom: 3px;
}
.company-meta .meta-value {
    font-size: 13px; color: #323130; font-weight: 500;
}
.company-meta .meta-value.empty { color: #94a3b8; font-style: italic; }
.company-contacts-section { padding: 16px 18px; }
.company-contacts-header {
    display: flex; justify-content: space-between; align-items: center;
    margin-bottom: 8px;
}
.company-contacts-label { font-size: 13px; font-weight: 600; color: #323130; }
.contact-col-header {
    display: grid; grid-template-columns: 1fr 1fr 1fr 1fr auto;
    gap: 8px; padding: 6px 0; font-size: 11px; font-weight: 600; color: #767676;
    text-transform: uppercase; letter-spacing: 0.3px; border-bottom: 2px solid #e1e0df;
}
.contact-row {
    display: grid; grid-template-columns: 1fr 1fr 1fr 1fr auto;
    gap: 8px; padding: 6px 0; border-bottom: 1px solid #f3f2f1; align-items: center;
    font-size: 13px; color: #323130;
}
.contact-row span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.company-revenue-section {
    margin: 0 18px 16px; padding-top: 12px; border-top: 2px solid #e1e0df;
}
.company-revenue-header {
    display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px;
}
.company-revenue-title { font-size: 13px; font-weight: 600; color: #323130; }
.company-revenue-meta { display: flex; gap: 16px; font-size: 11px; color: #323130; }
.company-partner-section {
    padding: 12px 18px 16px; border-top: 1px solid #e2e8f0; background: #f8fafc;
}
.company-partner-grid {
    display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 6px;
}
.company-partner-label {
    font-size: 10px; color: #767676; text-transform: uppercase; display: block; margin-bottom: 2px;
}
.company-partner-value { font-size: 13px; font-weight: 600; }
.company-card-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 18px; cursor: pointer; user-select: none; transition: background 0.15s;
}
.company-card-header:hover { background: #f8fafc; }
.company-card-name { font-weight: 700; font-size: 14px; color: #032D60; }
.company-card-count {
    font-size: 12px; color: #64748b; background: #f1f5f9;
    padding: 2px 8px; border-radius: 10px; margin-left: 8px;
}
.company-expand-arrow { font-size: 12px; color: #94a3b8; transition: transform 0.2s; }
.company-card-body { display: none; border-top: 1px solid #f1f5f9; }
.company-card.expanded .company-card-body { display: block; }
.company-card.expanded .company-card-header { background: #f8fafc; }

/* ── PARTNERS TAB: PARTNER CARDS ──────────────────────────── */
.partner-card {
    background: #fff; border-radius: 8px; margin-bottom: 10px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08); border: 1px solid #e2e8f0; overflow: hidden;
    border-left: 4px solid #0176D3;
}
.partner-card.affiliate { border-left-color: #0B6E4F; }
.partner-card.cosell     { border-left-color: #FE9339; }
.partner-card-header {
    display: flex; align-items: center; gap: 12px;
    padding: 14px 18px; cursor: pointer; user-select: none; transition: background 0.15s;
}
.partner-card-header:hover { background: #f8fafc; }
.partner-card.expanded .partner-card-header { background: #f8fafc; }
.partner-card-body { display: none; border-top: 1px solid #f1f5f9; padding: 16px 18px; }
.partner-card.expanded .partner-card-body { display: block; }
.partner-name { font-weight: 700; font-size: 14px; color: #032D60; }
.partner-cat-chip {
    display: inline-block; font-size: 11px; color: #fff; padding: 2px 8px;
    border-radius: 10px; background: #0176D3;
}
.partner-cat-chip.affiliate { background: #0B6E4F; }
.partner-cat-chip.cosell     { background: #FE9339; }
.partner-quick-stats { display: flex; gap: 16px; font-size: 12px; color: #555; margin-left: auto; }
.partner-quick-stats span { white-space: nowrap; }
.partner-expand-arrow { font-size: 12px; color: #94a3b8; transition: transform 0.2s; margin-left: 8px; }
.partner-card.expanded .partner-expand-arrow { transform: rotate(180deg); }
.partner-section-header.internal { border-bottom: 3px solid #0176D3; padding-bottom: 10px; margin-bottom: 16px; }
.partner-section-header.affiliate { border-bottom-color: #0B6E4F; }
.partner-section-header.cosell    { border-bottom-color: #FE9339; }
.partner-section-header h3 { margin: 0; font-size: 16px; font-weight: 700; color: #032D60; display: inline; }
.section-badge {
    display: inline-block; background: #0176D3; color: #fff;
    font-size: 12px; font-weight: 600; padding: 2px 8px; border-radius: 12px; margin-left: 10px;
}
.partner-perf-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.partner-perf-card {
    background: #f8fafc; border-radius: 6px; padding: 12px 14px; text-align: center;
}
.partner-perf-card .perf-val { font-size: 16px; font-weight: 700; color: #032D60; }
.partner-perf-card .perf-label { font-size: 10px; color: #666; margin-top: 2px; }

/* ── RESIDUAL CONFIGURATION — partner card section ───────────── */
/* Matches Payment Configuration visually — differentiated by label text only. */
.residual-config-section {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid #e8ecf0;
}

/* "Last changed" history link — muted, consistent with other secondary links */
.residual-history-link {
    background: none; border: none; padding: 0;
    font-size: 11px; color: #767676; text-decoration: underline dotted;
    cursor: pointer; white-space: nowrap;
}
.residual-history-link:hover { color: #444; text-decoration: underline; }
.residual-history-link:focus-visible { outline: 2px solid #0176D3; outline-offset: 2px; border-radius: 2px; }

/* Edit button — matches partner-btn-rate style exactly */
.partner-btn-residual {
    background: #fff; color: #0176D3;
    border: 1px solid #0176D3;
    padding: 3px 10px; font-size: 11px;
    border-radius: 4px; cursor: pointer; font-weight: 600;
    transition: background 0.15s, border-color 0.15s;
}
.partner-btn-residual:hover { background: #e8f4fd; border-color: #0176D3; }
.partner-btn-residual:focus-visible { outline: 2px solid #0176D3; outline-offset: 2px; }

/* ── RESIDUAL HISTORY DRAWER ────────────────────────────────── */
/* Slides in from the right; overlays the page without blocking the rest of the UI. */
.residual-history-drawer {
    position: fixed; top: 0; right: -380px; width: 380px; max-width: 95vw;
    height: 100%; background: #fff;
    box-shadow: -4px 0 24px rgba(0,0,0,0.14);
    z-index: 9980; transition: right 0.3s ease;
    overflow-y: auto;
}
.residual-history-drawer--open { right: 0; }

.residual-history-drawer__inner { min-height: 100%; display: flex; flex-direction: column; }

.residual-history-drawer__header {
    display: flex; align-items: flex-start; justify-content: space-between;
    padding: 16px 18px 14px;
    border-bottom: 2px solid #e0fdf4;
    background: #f0fdfa; position: sticky; top: 0;
}

.residual-history-drawer__close {
    background: none; border: none; font-size: 20px; line-height: 1;
    cursor: pointer; color: #6b7280; padding: 2px 6px; border-radius: 4px;
    transition: background 0.15s;
}
.residual-history-drawer__close:hover { background: #d1fae5; color: #0E7490; }
.residual-history-drawer__close:focus-visible { outline: 2px solid #0E7490; outline-offset: 2px; }

/* ── ADMIN TAB ──────────────────────────────────────────────── */

/* Admin Sub-Navigation */
.admin-sub-nav {
    display: flex;
    gap: 8px;
    padding: 16px 24px;
    border-bottom: 1px solid #e5e7eb;
    background: #f8f9fa;
    flex-wrap: wrap;
}
.admin-pill {
    padding: 8px 16px;
    border: 1px solid #d1d5db;
    border-radius: 20px;
    background: #fff;
    font-size: 13px;
    font-weight: 500;
    color: #374151;
    cursor: pointer;
    transition: all 0.2s;
}
.admin-pill:hover { border-color: #009fdb; color: #009fdb; }
.admin-pill.active { background: #009fdb; color: #fff; border-color: #009fdb; }
.admin-pill-badge { display:inline-block; background:#dc2626; color:#fff; border-radius:50%; font-size:10px; font-weight:700; min-width:18px; height:18px; line-height:18px; text-align:center; margin-left:4px; vertical-align:middle; }
.badge-deletion-requested { background:#fee2e2; color:#dc2626; padding:1px 5px; border-radius:6px; font-size:9px; font-weight:600; }
.pill-grey { background:#e5e7eb; color:#4b5563; padding:1px 6px; border-radius:6px; font-size:10px; font-weight:600; display:inline-block; }

/* Admin Sections */
.admin-section { padding: 24px; }
.admin-section .section-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
.admin-section h3 { margin: 0; font-size: 18px; color: #1f2937; }

/* Admin Cards */
.admin-card { background: #fff; border-radius: 12px; padding: 20px; margin-bottom: 16px; box-shadow: 0 1px 3px rgba(0,0,0,0.1); }
.admin-card h4 { margin: 0 0 12px; font-size: 15px; color: #374151; }
.card-header-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }

/* Admin Description Text */
.admin-description { color: #6b7280; font-size: 13px; margin-bottom: 16px; }

/* Admin Filters */
.admin-filters { display: flex; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }
.admin-filters input, .admin-filters select { padding: 8px 12px; border: 1px solid #d1d5db; border-radius: 8px; font-size: 13px; }
.admin-filters input[type="text"] { min-width: 250px; }

/* Admin Log Sections */
.admin-log-section { margin-top: 24px; }
.admin-log-section h4 { margin-bottom: 12px; color: #374151; }

/* Toggle Switch */
.admin-toggle-wrap { display: flex; align-items: center; gap: 8px; }
.toggle-label { font-size: 13px; color: #374151; }
.toggle-switch { position: relative; display: inline-block; width: 44px; height: 24px; }
.toggle-switch input { opacity: 0; width: 0; height: 0; }
.toggle-slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background: #d1d5db; border-radius: 24px; transition: 0.3s; }
.toggle-slider:before { content: ""; position: absolute; height: 18px; width: 18px; left: 3px; bottom: 3px; background: white; border-radius: 50%; transition: 0.3s; }
.toggle-switch input:checked + .toggle-slider { background: #009fdb; }
.toggle-switch input:checked + .toggle-slider:before { transform: translateX(20px); }

/* View as Partner Banner */
.view-as-partner-banner { display: flex; justify-content: space-between; align-items: center; padding: 10px 24px; background: #FEF3C7; border-bottom: 1px solid #F59E0B; font-size: 13px; color: #92400E; }
.btn-warning { background: #F59E0B; color: #fff; border: none; padding: 4px 12px; border-radius: 6px; cursor: pointer; font-size: 12px; }
.btn-warning:hover { background: #D97706; }

/* Danger Button */
.btn-danger { background: #EA001E; color: #fff; border: none; padding: 8px 16px; border-radius: 8px; cursor: pointer; font-size: 13px; }
.btn-danger:hover { background: #C10018; }

/* Severity Badges */
.severity-high { background: #EA001E; color: #fff; padding: 2px 8px; border-radius: 10px; font-size: 11px; }
.severity-medium { background: #F59E0B; color: #fff; padding: 2px 8px; border-radius: 10px; font-size: 11px; }
.severity-low { background: #009fdb; color: #fff; padding: 2px 8px; border-radius: 10px; font-size: 11px; }
.severity-info { background: #94a3b8; color: #fff; padding: 2px 8px; border-radius: 10px; font-size: 11px; }

/* Admin Tables */
.admin-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.admin-table th { text-align: left; padding: 10px 12px; background: #f8f9fa; border-bottom: 2px solid #e5e7eb; font-weight: 600; color: #374151; }
.admin-table td { padding: 10px 12px; border-bottom: 1px solid #f3f4f6; }
.admin-table tr:hover td { background: #f8fafc; }

/* Role Select & Status in Admin Table */
.role-select { padding: 4px 8px; border: 1px solid #d1d5db; border-radius: 6px; font-size: 12px; }
.status-active { color: #059669; font-weight: 500; }
.status-inactive { color: #EA001E; font-weight: 500; }

/* Admin nav item — <a> matching existing .nav-item pattern */
a.nav-tab {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    color: rgba(255,255,255,0.7);
    text-decoration: none;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
    font-size: 13px;
    font-weight: 500;
    margin: 2px 0;
}
a.nav-tab:hover { background: rgba(255,255,255,0.1); color: #fff; }
a.nav-tab.active { background: rgba(0,159,219,0.2); color: #009fdb; }
a.nav-tab .nav-icon { width: 18px; height: 18px; flex-shrink: 0; }

@media (max-width: 1200px) {
    .two-column-charts { grid-template-columns: 1fr; }
    .three-column-charts { grid-template-columns: 1fr; }
    .partner-two-col { grid-template-columns: 1fr; }
    .partner-charts-row { grid-template-columns: 1fr; }
    .partner-charts-grid { grid-template-columns: 1fr; }
    .partner-kpi-grid { grid-template-columns: repeat(2, 1fr); }
    .partner-perf-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
    .sidebar { display: none; }
    .mobile-menu-btn { display: flex; }
    .content-area { padding: 12px; }
    .page-header { padding: 12px 16px; }
    .page-header h1 { font-size: 18px; }
    .kpi-grid { grid-template-columns: repeat(3, 1fr); gap: 10px; }
    .kpi-card { padding: 12px 14px; }
    .kpi-value { font-size: 20px; }
    .kpi-label { font-size: 10px; }
    .filter-row { flex-direction: column; }
    .form-row { grid-template-columns: 1fr; }
    .kanban-container { flex-direction: column; }
    .kanban-column { max-width: 100%; min-width: 100%; }
    .partner-perf-grid { grid-template-columns: 1fr 1fr; }
    .partner-kpi-grid { grid-template-columns: repeat(2, 1fr); }
    .partner-charts-grid { grid-template-columns: 1fr; }
    .chart-section { padding: 14px; }
    .chart-title { font-size: 13px; }
    /* Make tables horizontally scrollable on mobile */
    .tab-panel { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .tab-panel table { min-width: 600px; }
    /* Pipeline closing cards stack */
    .three-column-charts { grid-template-columns: 1fr; }
    .two-column-charts { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
    .kpi-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
    .kpi-card { padding: 12px 14px; }
    .kpi-value { font-size: 18px; }
    .kpi-label { font-size: 9px; }
    .partner-kpi-grid { grid-template-columns: 1fr; }
    .content-area { padding: 8px; }
    .page-header h1 { font-size: 16px; }
}

/* ── SECURITY & AUDIT LOG ──────────────────────────────────── */

/* Summary cards */
.audit-kpi-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 24px;
}
.audit-kpi-card {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 18px 20px;
    display: flex;
    align-items: center;
    gap: 16px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
    transition: box-shadow 0.2s, transform 0.2s;
}
.audit-kpi-card:hover {
    box-shadow: 0 4px 12px rgba(0,0,0,0.09);
    transform: translateY(-1px);
}
.audit-kpi-card--alert { border-left: 4px solid #EA001E; }
.audit-kpi-icon {
    font-size: 28px;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f3f4f6;
    border-radius: 10px;
    flex-shrink: 0;
}
.audit-icon-info  { background: #e0f2fe; }
.audit-icon-data  { background: #e0f7fa; }
.audit-icon-alert { background: #fce4e6; }
.audit-kpi-body { min-width: 0; }
.audit-kpi-value {
    font-size: 26px;
    font-weight: 700;
    color: #111827;
    line-height: 1.1;
}
.audit-kpi-label {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #6b7280;
    margin-top: 4px;
    font-weight: 500;
}

/* Filter bar */
.audit-filter-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    padding: 14px 16px;
    margin-bottom: 20px;
}
.audit-filter-bar select,
.audit-filter-bar input[type="text"],
.audit-filter-bar input[type="date"] {
    padding: 7px 11px;
    border: 1px solid #d1d5db;
    border-radius: 7px;
    font-size: 13px;
    background: #fff;
    color: #374151;
    min-width: 0;
}
.audit-filter-bar select:focus,
.audit-filter-bar input:focus {
    outline: 2px solid #009fdb;
    outline-offset: 1px;
    border-color: #009fdb;
}
.audit-filter-bar input[type="text"] { flex: 1 1 180px; min-width: 160px; }
.audit-date-range {
    display: flex;
    align-items: center;
    gap: 6px;
}
.audit-date-sep { font-size: 12px; color: #9ca3af; }
.btn-audit-clear {
    padding: 7px 14px;
    border: 1px solid #d1d5db;
    border-radius: 7px;
    background: #fff;
    color: #374151;
    font-size: 13px;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s, border-color 0.15s;
}
.btn-audit-clear:hover { background: #f3f4f6; border-color: #9ca3af; }
.btn-audit-clear:focus-visible { outline: 2px solid #009fdb; outline-offset: 2px; }

/* Table wrapper */
.audit-table-wrap { margin-bottom: 0; }
.audit-table-scroll { overflow-x: auto; border-radius: 10px; border: 1px solid #e5e7eb; }

/* Log table overrides */
.audit-log-table { border-collapse: collapse; width: 100%; font-size: 13px; min-width: 780px; }
.audit-log-table thead th {
    background: #f8f9fa;
    border-bottom: 2px solid #e5e7eb;
    padding: 10px 12px;
    font-weight: 600;
    color: #374151;
    text-align: left;
    white-space: nowrap;
}
.audit-log-table tbody td { padding: 10px 12px; border-bottom: 1px solid #f3f4f6; vertical-align: top; }
.audit-row-even td { background: #fff; }
.audit-row-odd  td { background: #fafbfc; }
.audit-log-table tbody tr:hover td { background: #f0f7fd; }

/* Column widths */
.audit-col-time     { white-space: nowrap; min-width: 150px; }
.audit-col-user     { min-width: 120px; max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.audit-col-action   { white-space: nowrap; }
.audit-col-table    { white-space: nowrap; }
.audit-col-details  { min-width: 160px; max-width: 280px; line-height: 1.45; }
.audit-col-severity { white-space: nowrap; }
.audit-col-ip       { font-family: monospace; font-size: 12px; white-space: nowrap; color: #6b7280; }

.audit-record-id { color: #6b7280; font-size: 12px; }
.audit-empty { color: #d1d5db; }

/* Action badges */
.action-badge {
    display: inline-block;
    padding: 3px 9px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.2px;
    white-space: nowrap;
}
.action-success { background: #d1fae5; color: #065f46; }
.action-danger  { background: #fee2e2; color: #991b1b; }
.action-info    { background: #dbeafe; color: #1e40af; }
.action-data    { background: #e0e7ff; color: #3730a3; }
.action-warning { background: #fef3c7; color: #92400e; }
.action-neutral { background: #f3f4f6; color: #4b5563; }

/* Severity badges */
.sev-badge {
    display: inline-block;
    padding: 3px 9px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
}
.sev-critical { background: #7f1d1d; color: #fff; }
.sev-high     { background: #fca5a5; color: #7f1d1d; }
.sev-medium   { background: #fde68a; color: #78350f; }
.sev-low      { background: #d1fae5; color: #065f46; }

/* Expand/collapse details */
.audit-details-full { display: block; margin-top: 4px; line-height: 1.5; color: #374151; }
.audit-expand-btn {
    background: none;
    border: none;
    color: #009fdb;
    cursor: pointer;
    font-size: 12px;
    padding: 0 2px;
    text-decoration: underline;
    white-space: nowrap;
}
.audit-expand-btn:focus-visible { outline: 2px solid #009fdb; border-radius: 2px; }

/* Pagination */
.audit-pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    padding: 14px 0 4px;
}
.audit-page-info { font-size: 13px; color: #6b7280; }
.audit-page-controls { display: flex; align-items: center; gap: 12px; }
.audit-page-num { font-size: 13px; color: #374151; font-weight: 500; }
.btn-audit-page {
    padding: 7px 16px;
    border: 1px solid #d1d5db;
    border-radius: 7px;
    background: #fff;
    color: #374151;
    font-size: 13px;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
    min-width: 44px;
    min-height: 36px;
}
.btn-audit-page:hover:not(:disabled) { background: #f3f4f6; border-color: #9ca3af; }
.btn-audit-page:disabled { opacity: 0.4; cursor: not-allowed; }
.btn-audit-page:focus-visible { outline: 2px solid #009fdb; outline-offset: 2px; }

/* Screen-reader only utility */
.sr-only {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    border: 0;
}

/* Responsive: 2-col cards at tablet */
@media (max-width: 1024px) {
    .audit-kpi-grid { grid-template-columns: repeat(2, 1fr); }
}
/* Responsive: stack cards on mobile */
@media (max-width: 480px) {
    .audit-kpi-grid { grid-template-columns: 1fr; }
    .audit-filter-bar { flex-direction: column; align-items: stretch; }
    .audit-date-range { flex-direction: column; align-items: stretch; }
    .audit-pagination { flex-direction: column; align-items: flex-start; }
}

/* ── SCROLLBAR ──────────────────────────────────────────────── */
/* 2026-07-09: widened 6px→12px + added `height` (was unset, so the horizontal
   bar fell back to native thickness) + Firefox `scrollbar-*` parity (the old rule
   was webkit-only, so Firefox rendered a faint semi-transparent native-blue bar —
   the "barely visible / blue" the operator saw). Global family stays neutral gray. */
* { scrollbar-width: thin; scrollbar-color: #98a2b3 transparent; }
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #98a2b3; border-radius: 6px; border: 3px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background: #6b7280; }

/* Commission upload parser (residuals wizard) — make its two scrollbars clearly
   visible and on-theme (brand blue #0176D3) per operator request. Scoped to the
   inner list wrapper so the rest of the app keeps the neutral treatment above. */
#res-table-wrapper .res-table-wrapper { scrollbar-width: auto; scrollbar-color: #0176D3 #eef2f7; }
#res-table-wrapper .res-table-wrapper::-webkit-scrollbar { width: 14px; height: 14px; }
#res-table-wrapper .res-table-wrapper::-webkit-scrollbar-track { background: #eef2f7; border-radius: 7px; }
#res-table-wrapper .res-table-wrapper::-webkit-scrollbar-thumb { background: #0176D3; border-radius: 7px; border: 3px solid #eef2f7; background-clip: padding-box; }
#res-table-wrapper .res-table-wrapper::-webkit-scrollbar-thumb:hover { background: #015aa3; }

/* === TSD Commission Cards === */
.tsd-card {
    background: #fff; border-radius: 10px; margin-bottom: 12px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04); border-left: 4px solid #0176D3; overflow: hidden;
    transition: box-shadow 0.2s ease;
}
.tsd-card:hover { box-shadow: 0 4px 12px rgba(0,0,0,0.08); }
.tsd-card-header {
    padding: 14px 16px; display: flex; justify-content: space-between;
    align-items: center; cursor: pointer; transition: background 0.15s;
}
.tsd-card-header:hover { background: #fafafa; }
.tsd-card-body { display: none; padding: 0 16px 16px; border-top: 1px solid #f0f0f0; }
.tsd-card.expanded .tsd-card-body { display: block; }
.tsd-card.expanded .tsd-card-header { background: #fafafa; }
.tsd-name { font-weight: 700; font-size: 14px; color: #032D60; }
.tsd-status-chip {
    font-size: 10px; font-weight: 600; padding: 2px 8px; border-radius: 10px; margin-left: 8px; vertical-align: middle;
}
.tsd-status-chip.active { background: #dff6dd; color: #0B6E4F; }
.tsd-status-chip.inactive { background: #fee2e2; color: #dc2626; }
.tsd-quick-stats { display: flex; gap: 16px; font-size: 12px; color: #555; }
.tsd-expand-arrow { font-size: 16px; color: #999; transition: transform 0.2s; }
.tsd-card.expanded .tsd-expand-arrow { transform: rotate(180deg); }
.tsd-sub-heading {
    font-size: 13px; font-weight: 700; color: #032D60;
    margin: 14px 0 6px; padding-bottom: 4px; border-bottom: 1px solid #e8e8e8;
}
.tsd-info-grid {
    display: grid; grid-template-columns: 1fr 1fr; gap: 8px 16px; margin: 12px 0; font-size: 13px;
}
.tsd-info-grid label { font-weight: 600; color: #555; font-size: 11px; display: block; margin-bottom: 2px; }
.tsd-info-grid input, .tsd-info-grid select, .tsd-info-grid textarea {
    width: 100%; padding: 6px 8px; border: 1px solid #d0d0d0; border-radius: 6px; font-size: 12px; background: #fafbfc;
}
.tsd-info-grid textarea { resize: vertical; min-height: 40px; grid-column: 1 / -1; }
.tsd-rate-section {
    background: linear-gradient(135deg, #e8f4fd 0%, #dbeafe 100%);
    border: 1px solid #93c5fd; border-radius: 8px; padding: 12px 16px; margin: 12px 0;
}
.tsd-rate-section h4 { margin: 0 0 8px; font-size: 13px; color: #1d4ed8; }
.tsd-rate-table { width: 100%; border-collapse: collapse; font-size: 12px; margin: 8px 0; }
.tsd-rate-table th {
    background: #f0f7ff; padding: 6px 8px; text-align: left; font-weight: 600; color: #555;
    border-bottom: 2px solid #93c5fd; font-size: 11px;
}
.tsd-rate-table td { padding: 5px 8px; border-bottom: 1px solid #dbeafe; color: #333; }
.tsd-rate-table input, .tsd-rate-table select {
    padding: 4px 6px; border: 1px solid #93c5fd; border-radius: 4px; font-size: 11px; background: white;
}
.tsd-rate-table input[type="number"] { width: 65px; }
.tsd-btn { padding: 6px 14px; border-radius: 6px; font-size: 12px; font-weight: 600; cursor: pointer; border: none; transition: background 0.15s; }
.tsd-btn-save { background: #0176D3; color: white; }
.tsd-btn-save:hover { background: #0b5cab; }
.tsd-btn-rate { background: #1d4ed8; color: white; }
.tsd-btn-rate:hover { background: #1e40af; }
.tsd-btn-remove { background: #fee2e2; color: #dc2626; border: 1px solid #fca5a5; }
.tsd-btn-remove:hover { background: #dc2626; color: white; }
.tsd-btn-add { background: #0176D3; color: white; padding: 8px 20px; font-size: 13px; }
.tsd-btn-add:hover { background: #0b5cab; }
.tsd-summary-table { width: 100%; border-collapse: collapse; font-size: 12px; margin: 8px 0; }
.tsd-summary-table th {
    background: #f8f9fa; padding: 6px 8px; text-align: left; font-weight: 600; color: #555;
    border-bottom: 2px solid #e0e0e0; font-size: 11px;
}
.tsd-summary-table td { padding: 5px 8px; border-bottom: 1px solid #f0f0f0; }
.tsd-effective-row { display: flex; gap: 12px; align-items: center; margin: 8px 0; }
.tsd-effective-row label { font-size: 11px; font-weight: 600; color: #1d4ed8; }
.tsd-effective-row input { padding: 5px 8px; border: 1px solid #93c5fd; border-radius: 6px; font-size: 12px; }
.add-tsd-form {
    background: #f8f9fa; border: 1px dashed #ccc; border-radius: 8px;
    padding: 16px; margin-top: 12px; display: none;
}
.add-tsd-form.visible { display: block; }

/* ── CONTACTS TAB: ENHANCED COMPANY CARDS ──────────────────── */

/* Accessible chevron — used by toggleCompanyCard */
.cc-chevron {
    display: inline-block; transition: transform 0.2s; font-size: 12px;
    color: #9ca3af; line-height: 1; flex-shrink: 0;
}
.company-card.expanded .cc-chevron { transform: rotate(90deg); }

/* Badge strip in card headers */
.cc-badges { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.cc-badge {
    font-size: 11px; padding: 2px 8px; border-radius: 10px;
    font-weight: 600; white-space: nowrap;
}

/* Inline-editable meta grid (replaces static .company-meta divs) */
.cc-meta-grid {
    display: grid; grid-template-columns: 1fr 1fr; gap: 8px 16px;
    padding: 14px 18px; background: #f8fafc; border-bottom: 1px solid #e2e8f0;
}
.cc-meta-grid label {
    font-size: 11px; font-weight: 600; color: #767676;
    text-transform: uppercase; letter-spacing: 0.3px;
    display: block; margin-bottom: 3px;
}
.cc-meta-grid input {
    width: 100%; padding: 4px 8px; border: 1px solid #d2d0ce;
    border-radius: 4px; font-size: 12px; color: #323130;
    background: #fff; transition: border-color 0.15s;
    min-height: 30px; /* 44px touch-target handled by padding */
}
.cc-meta-grid input:focus {
    border-color: #0176D3; outline: 2px solid rgba(1,118,211,0.25); outline-offset: 0;
}

/* Contacts table inside each card */
.cc-contacts-table {
    width: 100%; border-collapse: collapse; font-size: 12px; margin-bottom: 10px;
}
.cc-contacts-table th {
    text-align: left; padding: 6px 8px; font-size: 11px; font-weight: 600;
    color: #767676; text-transform: uppercase; letter-spacing: 0.3px;
    border-bottom: 2px solid #e5e7eb;
}
.cc-contacts-table td {
    padding: 4px 6px; border-bottom: 1px solid #f3f4f6; vertical-align: middle;
}
.cc-contacts-table td input {
    border: 1px solid transparent; background: transparent;
    padding: 3px 5px; font-size: 12px; width: 100%; border-radius: 3px;
    color: #323130; min-height: 28px;
}
.cc-contacts-table td input:focus {
    border-color: #0176D3; background: #fff;
    outline: 2px solid rgba(1,118,211,0.2); outline-offset: 0;
}
.cc-contact-tr:hover td { background: #f8fafc; }
.cc-contact-tr--new td { background: #fffbeb; }

/* Row action buttons */
.cc-row-btn {
    font-size: 11px; padding: 3px 10px; border-radius: 4px; cursor: pointer;
    font-weight: 600; border: 1px solid transparent; white-space: nowrap;
    transition: background 0.15s, color 0.15s;
    min-height: 28px; /* accessible touch size via padding */
}
.cc-row-btn--save   { background: #0176D3; color: #fff; border-color: #0176D3; }
.cc-row-btn--save:hover   { background: #0b5cab; }
.cc-row-btn--save:disabled { opacity: 0.6; cursor: not-allowed; }
.cc-row-btn--cancel { background: #fff; color: #5a5a5a; border-color: #d2d0ce; }
.cc-row-btn--cancel:hover { background: #f3f4f6; }
.cc-row-btn--remove {
    background: #fff; color: #dc2626; border-color: #fca5a5; font-size: 10px;
    padding: 2px 8px;
}
.cc-row-btn--remove:hover   { background: #fef2f2; border-color: #dc2626; }
.cc-row-btn--remove:disabled { opacity: 0.6; cursor: not-allowed; }

/* Revenue section inside each card */
.cc-revenue-section {
    margin: 0 18px 16px; padding-top: 12px; border-top: 2px solid #e1e0df;
}
.cc-revenue-table {
    width: 100%; border-collapse: collapse; font-size: 11px; margin-top: 6px;
}
.cc-revenue-table th {
    text-align: left; padding: 4px 6px; font-size: 10px; font-weight: 600;
    color: #767676; text-transform: uppercase; letter-spacing: 0.3px;
    border-bottom: 2px solid #e1e0df;
}
.cc-revenue-table td { padding: 5px 6px; border-bottom: 1px solid #f3f2f1; }

/* "Show all N records" toggle button */
.cc-show-more-btn {
    margin-top: 8px; background: none; border: 1px solid #0176D3;
    color: #0176D3; padding: 4px 14px; border-radius: 4px;
    font-size: 11px; font-weight: 600; cursor: pointer; display: inline-block;
    transition: background 0.15s;
}
.cc-show-more-btn:hover { background: #eff6ff; }

/* Screen-reader-only utility (for Actions column header) */
.sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* Responsive: stack meta grid to single column on small screens */
@media (max-width: 639px) {
    .cc-meta-grid { grid-template-columns: 1fr; }
    .cc-badges { gap: 4px; }
    .cc-contacts-table th:nth-child(2),
    .cc-contacts-table td:nth-child(2) { display: none; } /* hide Title column */
}

/* ══════════════════════════════════════════════════════════
   Sales Hub — Bulk Action Bar
══════════════════════════════════════════════════════════ */
.bulk-action-bar { display:none; padding:8px 12px; margin-bottom:8px; background:#f8f8f8; border:1px solid #e0e0e0; border-radius:6px; align-items:center; gap:10px; font-size:12px; flex-wrap:wrap; }
.bulk-action-bar.visible { display:flex; }
.bulk-count { font-weight:600; }
.bulk-separator { border-left:1px solid #ccc; height:20px; margin:0 4px; }
.bulk-label { font-size:11px; color:#555; font-weight:500; }
.bulk-status-btn { font-size:11px; padding:4px 12px; border-radius:14px; border:1.5px solid; background:#fff; cursor:pointer; font-weight:600; }
.bulk-status-btn[data-status="Paid"] { border-color:#0B6E4F; color:#0B6E4F; }
.bulk-status-btn[data-status="Pending"] { border-color:#C8A951; color:#8A6D3B; }
.bulk-status-btn[data-status="Disputed"] { border-color:#C62828; color:#C62828; }
.bulk-status-btn:hover { opacity:0.85; }
.bulk-cancel-btn { font-size:11px; padding:4px 14px; border:none; border-radius:4px; background:#D32F2F; color:#fff; cursor:pointer; font-weight:600; }
.bulk-restore-btn { font-size:11px; padding:4px 14px; border:none; border-radius:4px; background:#2E844A; color:#fff; cursor:pointer; font-weight:600; }
.bulk-clear-btn { font-size:11px; padding:4px 10px; background:none; border:1px solid #ccc; border-radius:4px; cursor:pointer; color:#666; }
.bulk-cancel-btn:hover { background:#b71c1c; }
.bulk-restore-btn:hover { background:#256b3c; }
.bulk-clear-btn:hover { background:#f5f5f5; }

/* ══════════════════════════════════════════════════════════
   Sales Hub — Year Tracker Bar
══════════════════════════════════════════════════════════ */
.yr-tracker { background:linear-gradient(135deg, #f8f9fc 0%, #eef1f7 100%); border-radius:0 0 12px 12px; padding:12px 20px; display:flex; flex-wrap:wrap; gap:12px; align-items:center; justify-content:space-between; border-top:2px solid #e2e6ef; font-size:12.5px; }
.yr-tracker-left, .yr-tracker-right { display:flex; gap:16px; flex-wrap:wrap; align-items:center; }
.yr-tracker-title { font-weight:700; color:#23272f; font-size:13px; }
.yr-tracker-right span { color:#555; }

/* ══════════════════════════════════════════════════════════
   Sales Hub — Preview Limit / Show All
══════════════════════════════════════════════════════════ */
.show-all-btn { margin:8px 0; font-size:12px; padding:6px 16px; border:1px solid #0176D3; background:#fff; color:#0176D3; border-radius:6px; cursor:pointer; font-weight:600; display:block; }
.show-all-btn:hover { background:#f0f7ff; }

/* ══════════════════════════════════════════════════════════
   Sales Hub — Row selection highlight
══════════════════════════════════════════════════════════ */
.clickable-row.row-highlighted { background:#f0f4ff !important; }

/* ══════════════════════════════════════════════════════════
   Leads — Inline cell editing
══════════════════════════════════════════════════════════ */
td.lead-editable { cursor: pointer; }
td.lead-editable:hover { background: #f0f4ff; }

/* ═══ LINKS TAB — File Explorer Style ═══════════════════ */
.links-section { margin-bottom: 32px; }
.links-section-header {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 0; margin-bottom: 16px;
    border-bottom: 2px solid #e5e7eb;
}
.links-section-icon { font-size: 20px; }
.links-section-title { margin: 0; font-size: 16px; font-weight: 700; color: #032D60; }
.links-section-count {
    font-size: 11px; color: #6b7280; background: #e5e7eb;
    padding: 2px 8px; border-radius: 10px; font-weight: 600;
}

/* Tile Grid */
.links-tile-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 16px;
}
.link-tile {
    display: flex; flex-direction: column; align-items: center;
    padding: 20px 12px 16px;
    background: #fff; border: 1px solid #e5e7eb; border-radius: 12px;
    cursor: pointer; transition: all 0.2s ease;
    position: relative; text-align: center;
}
.link-tile:hover {
    border-color: #009fdb; box-shadow: 0 4px 12px rgba(0,159,219,0.12);
    transform: translateY(-2px);
}
.link-tile-admin {
    position: absolute; top: 6px; right: 6px;
    display: none; gap: 2px;
}
.link-tile:hover .link-tile-admin { display: flex; }
.link-tile-admin button {
    background: rgba(0,0,0,0.06); border: none; border-radius: 4px;
    width: 22px; height: 22px; cursor: pointer; font-size: 12px;
    color: #6b7280; display: flex; align-items: center; justify-content: center;
}
.link-tile-admin button:hover { background: rgba(0,0,0,0.12); color: #032D60; }
.link-tile-badge {
    position: absolute; top: 6px; left: 6px;
    font-size: 8px; font-weight: 700; color: #fff; background: #ef4444;
    padding: 1px 5px; border-radius: 6px; text-transform: uppercase; letter-spacing: 0.5px;
}
.link-tile-logo {
    width: 72px; height: 72px; border-radius: 14px;
    display: flex; align-items: center; justify-content: center;
    margin-bottom: 10px; overflow: hidden;
    background: #eef0f4; border: 1px solid #dfe1e5;
}
.link-tile-img {
    width: 62px; height: 62px; object-fit: contain;
}
.link-tile-initials {
    color: #fff; font-size: 20px; font-weight: 700;
    letter-spacing: 1px;
    display: flex; align-items: center; justify-content: center;
    width: 100%; height: 100%;
}
.link-tile-name {
    font-size: 13px; font-weight: 600; color: #032D60;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    max-width: 100%;
}
.link-tile-count { font-size: 10px; color: #9ca3af; margin-top: 2px; }

/* Detail View */
.links-detail-header {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 20px;
}
.links-back-btn {
    display: flex; align-items: center; gap: 6px;
    background: none; border: 1px solid #d1d5db; border-radius: 8px;
    padding: 8px 16px; cursor: pointer; font-size: 13px;
    color: #374151; font-weight: 500; transition: all 0.15s;
}
.links-back-btn:hover { background: #f3f4f6; border-color: #9ca3af; }
.links-detail-actions { display: flex; gap: 8px; }
.links-detail-hero {
    display: flex; align-items: center; gap: 20px;
    padding: 20px; background: #f8fafc; border-radius: 12px;
    margin-bottom: 28px;
}
.links-detail-logo {
    width: 88px; height: 88px; border-radius: 18px;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0; overflow: hidden;
    background: #fff; border: 1px solid #e5e7eb;
}
.links-detail-logo-img {
    width: 64px; height: 64px; object-fit: contain;
}
.links-detail-name { margin: 0; font-size: 22px; font-weight: 700; color: #032D60; }
.links-detail-meta { font-size: 13px; color: #6b7280; }
.links-detail-category { margin-bottom: 24px; }
.links-detail-cat-title {
    font-size: 13px; font-weight: 700; color: #6b7280;
    text-transform: uppercase; letter-spacing: 0.5px;
    margin: 0 0 10px; padding-bottom: 6px;
    border-bottom: 1px solid #e5e7eb;
    transition: all 0.15s;
}

/* Link cards */
.links-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 10px;
}
.link-card {
    display: flex; align-items: center; gap: 12px;
    padding: 12px 14px;
    background: #fff; border: 1px solid #e5e7eb; border-radius: 8px;
    text-decoration: none; color: inherit;
    transition: all 0.15s ease;
    cursor: pointer; position: relative;
}
.link-card:hover {
    border-color: #009fdb; box-shadow: 0 2px 6px rgba(0,159,219,0.1);
}
.link-card-admin {
    position: absolute; top: 4px; right: 4px;
    display: none; gap: 2px;
}
.link-card:hover .link-card-admin { display: flex; }
.link-card-admin button {
    background: rgba(0,0,0,0.06); border: none; border-radius: 4px;
    width: 20px; height: 20px; cursor: pointer; font-size: 11px;
    color: #6b7280; display: flex; align-items: center; justify-content: center;
}
.link-card-admin button:hover { background: rgba(0,0,0,0.12); color: #032D60; }
.link-card-info { flex: 1; min-width: 0; }
.link-card-name {
    font-size: 13px; font-weight: 600; color: #032D60;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.link-card-desc { font-size: 11px; color: #6b7280; margin-top: 2px; }
.link-card-arrow { width: 16px; height: 16px; color: #9ca3af; flex-shrink: 0; transition: color 0.2s; }
.link-card:hover .link-card-arrow { color: #009fdb; }
.link-card.dragging { opacity: 0.4; border-style: dashed; }
.link-card-drag {
    cursor: grab; color: #ccc; font-size: 14px; user-select: none;
    display: flex; align-items: center; padding: 0 2px;
}
.link-card-drag:active { cursor: grabbing; }
.links-detail-cat-title.drag-over {
    background: #dbeafe; border-bottom-color: #3b82f6;
    border-radius: 4px; padding: 6px 8px; color: #1d4ed8;
}

/* Links Modal */
.links-modal-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.4); z-index: 10000;
    display: flex; align-items: center; justify-content: center;
}
.links-modal {
    background: #fff; border-radius: 12px; width: 440px; max-width: 90vw;
    box-shadow: 0 20px 60px rgba(0,0,0,0.2);
}
.links-modal-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 16px 20px; border-bottom: 1px solid #e5e7eb;
}
.links-modal-header h3 { margin: 0; font-size: 16px; color: #032D60; }
.links-modal-close {
    background: none; border: none; font-size: 22px; cursor: pointer;
    color: #9ca3af; padding: 0 4px; line-height: 1;
}
.links-modal-close:hover { color: #374151; }
.links-modal-body { padding: 20px; }
.links-modal-body .form-group { margin-bottom: 14px; }
.links-modal-body .form-group label {
    display: block; font-size: 12px; font-weight: 600;
    color: #374151; margin-bottom: 4px;
}
.links-modal-body .form-group input,
.links-modal-body .form-group select {
    width: 100%; padding: 8px 10px; border: 1px solid #d1d5db;
    border-radius: 6px; font-size: 13px; box-sizing: border-box;
}
.links-modal-footer {
    display: flex; gap: 8px; justify-content: flex-end;
    padding: 12px 20px; border-top: 1px solid #e5e7eb;
}

/* Dispute management table row hover (replaces inline onmouseover/onmouseout blocked by CSP) */
tr[data-dispute-id]:hover {
    background-color: #f0f4ff !important;
}
tr.dispute-row-resolved:hover {
    background-color: #f0fdf4 !important;
}
tr.dispute-row-disputed:hover {
    background-color: #fef2f2 !important;
}
tr.dispute-row-partial:hover {
    background-color: #fffbeb !important;
}

/* ── RESIDUALS TAB ──────────────────────────────────────────── */
.res-header { padding: 20px 24px 0; }
.res-title   { font-size: 20px; font-weight: 700; color: #1a2b4a; margin: 0 0 4px; }
.res-subtitle { font-size: 13px; color: #6b7280; margin: 0 0 16px; }

/* Legend */
.res-legend {
    display: flex; flex-wrap: wrap; gap: 10px;
    padding: 10px 14px; background: #f8f9fb;
    border: 1px solid #e5e7eb; border-radius: 8px;
    margin-bottom: 16px; font-size: 12px; color: #374151;
}
.res-legend-item { display: flex; align-items: center; gap: 6px; }

/* File upload — trigger buttons */
.res-upload-row { margin-bottom: 20px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.res-upload-btn {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 8px 18px; background: #0176D3; color: #fff;
    border: none; border-radius: 6px; font-size: 13px; font-weight: 600;
    cursor: pointer; transition: background 0.15s;
}
.res-upload-btn:hover { background: #015ea6; }
.res-upload-btn:focus-visible {
    outline: 2px solid #0176D3; outline-offset: 2px;
}
.res-upload-icon { font-size: 16px; }
.res-file-input { display: none; }

/* ── Upload modal overlay + card ────────────────────────────────── */
.res-upload-modal {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.4); z-index: 9995;
    display: flex; align-items: center; justify-content: center;
    animation: fadeIn 0.15s ease-out;
}
.res-upload-modal-card {
    background: #fff; border-radius: 12px; padding: 28px;
    max-width: 640px; width: 94%; max-height: 90vh; overflow-y: auto;
    box-shadow: 0 20px 60px rgba(0,0,0,0.18), 0 4px 12px rgba(0,0,0,0.08);
    animation: popFadeIn 0.2s ease-out;
    display: flex; flex-direction: column; gap: 16px;
}
.res-upload-modal-header {
    display: flex; justify-content: space-between; align-items: center;
}
.res-upload-modal-title {
    font-size: 18px; font-weight: 700; color: #1b2a4a; margin: 0;
}
.res-upload-modal-close {
    background: none; border: none; font-size: 20px; line-height: 1;
    color: #6b7280; cursor: pointer; padding: 4px 8px;
    border-radius: 4px; transition: all 0.15s;
}
.res-upload-modal-close:hover { background: #f3f2f1; color: #1b2a4a; }
.res-upload-modal-close:focus-visible { outline: 2px solid #0176D3; outline-offset: 2px; }
.res-upload-modal-helper {
    margin: 0; font-size: 13px; color: #6b7280; line-height: 1.5;
}
.res-upload-modal-footer {
    display: flex; justify-content: flex-end; gap: 10px; padding-top: 4px;
    border-top: 1px solid #f0f1f3; margin-top: 4px;
}

/* Drop zone */
.res-dropzone {
    border: 2px dashed #d1d5db; border-radius: 10px;
    padding: 36px 24px; text-align: center; cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
    display: flex; flex-direction: column; align-items: center; gap: 6px;
    background: #fafafa;
}
.res-dropzone:hover, .res-dropzone:focus-visible {
    border-color: #6366f1; background: #eef2ff;
}
.res-dropzone-active {
    border-color: #6366f1; background: #eef2ff;
}
.res-dropzone-icon { font-size: 32px; line-height: 1; }
.res-dropzone-primary {
    font-size: 14px; font-weight: 600; color: #374151;
}
.res-dropzone-secondary {
    font-size: 12px; color: #9ca3af;
}

/* Queue */
.res-queue-section { margin: 0; }
.res-queue-label {
    font-size: 12px; font-weight: 700; color: #374151; margin: 0 0 8px;
}
.res-queue-list {
    list-style: none; margin: 0; padding: 0;
    display: flex; flex-direction: column; gap: 6px;
}
.res-queue-item {
    display: flex; align-items: center; gap: 8px;
    padding: 6px 10px; background: #f8f9fb; border-radius: 6px;
    border: 1px solid #e5e7eb; font-size: 12px;
}
.res-queue-check { color: #15803d; font-weight: 700; flex-shrink: 0; }
.res-queue-name  { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #374151; }
.res-queue-type-badge {
    padding: 1px 8px; border-radius: 8px; font-size: 10px; font-weight: 700;
    background: #e0f2fe; color: #075985; white-space: nowrap; flex-shrink: 0;
}
.res-queue-type-unknown {
    background: #f3f4f6; color: #9ca3af;
}
.res-queue-remove { flex-shrink: 0; }

/* Modal live status line */
.res-modal-status {
    font-size: 11px; color: #92400e; min-height: 16px;
}

/* Source column in results table */
.res-source {
    font-size: 10px; color: #6b7280; font-style: italic;
    max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Status badges — residuals-specific */
.res-status-badge {
    display: inline-block; padding: 2px 9px; border-radius: 10px;
    font-size: 11px; font-weight: 600; letter-spacing: 0.2px; white-space: nowrap;
}

/* Primary sale-status chips — EXACT match to .status-* in the Sales Hub */
.res-status-paid      { background: #e6f4ea; color: #1e7e34; }
.res-status-pending   { background: #fff3cd; color: #856404; }
.res-status-partial   { background: #fff0e0; color: #e65100; }
.res-status-disputed  { background: #fce4e6; color: #c62828; }
.res-status-cancelled { background: #f0f0f0; color: #6b7280; }
.res-status-unknown   { background: #f0f0f0; color: #6b7280; }

/* Linked-variant chips — outlined/tinted version of the primary color.
   Solid chip = the sale's authoritative status; outlined chip = a residual row
   linked to that sale. Same hue, lighter fill, 1px solid border. */
.res-status-linked-paid     { background: #f3faf4; color: #1e7e34; border: 1px solid #1e7e34; }
.res-status-linked-pending  { background: #fffdf0; color: #856404; border: 1px solid #856404; }
.res-status-linked-partial  { background: #fff8f2; color: #e65100; border: 1px solid #e65100; }
.res-status-linked-disputed { background: #fff5f5; color: #c62828; border: 1px solid #c62828; }

/* Non-linked status chips — outlined for visual hierarchy */
.res-status-nomatch   { background: #f8f8f8; color: #6b7280; border: 1px solid #9ca3af; }
.res-status-ambiguous { background: #f5f0ff; color: #6d28d9; border: 1px solid #a78bfa; }
.res-status-sibling-collision { background: #f3e8ff; color: #7c3aed; border: 1px solid #c4b5fd; font-weight: 600; }
.res-status-chargeback { background: #dc2626; color: #fff; border: 1px solid #b91c1c; font-weight: 700; }

/* Revenue bucket badges — distinguishes where the row's $ routes */
.res-bucket-badge {
    display: inline-block; padding: 2px 10px;
    border-radius: 10px;
    font-size: 11px; font-weight: 700; letter-spacing: 0.03em;
    text-transform: uppercase; white-space: nowrap;
    border: 1px solid transparent;
}
.res-bucket-residual    { background: #ede9fe; color: #5b21b6; border-color: #c4b5fd; }
.res-bucket-onetime     { background: #e0f2fe; color: #075985; border-color: #7dd3fc; }
.res-bucket-chargeback  { background: #fee2e2; color: #991b1b; border-color: #fca5a5; }
.res-bucket-adjustment  { background: #f3f4f6; color: #4b5563; border-color: #d1d5db; }
.res-bucket-feature     { background: #f3e8ff; color: #7c3aed; border-color: #d8b4fe; }
.res-bucket-fleet       { background: #fff7ed; color: #c2410c; border-color: #fdba74; }
.res-bucket-duplicate   { background: #e2e8f0; color: #334155; border-color: #94a3b8; }
.res-bucket-unknown     { background: #fef9c3; color: #854d0e; border-color: #fde68a; }

/* Bucket banner on detail panel */
.res-detail-bucket-banner {
    padding: 8px 12px; margin-bottom: 12px;
    background: linear-gradient(90deg, #f8fafc, #eef2ff);
    border-left: 4px solid #6366f1; border-radius: 4px;
    font-size: 13px; color: #1f2937;
}
.res-bucket-flow {
    margin-left: 10px; font-style: italic; color: #4b5563;
}

/* Bucket chip — clickable version of .res-bucket-badge (inherits color classes) */
.res-bucket-chip {
    display: inline-block; padding: 2px 10px;
    border-radius: 10px;
    font-size: 11px; font-weight: 700; letter-spacing: 0.03em;
    text-transform: uppercase; white-space: nowrap;
    border: 1px solid transparent;
    cursor: pointer;
    /* Reset button styles so it looks like a badge */
    font-family: inherit; line-height: inherit;
    transition: box-shadow 0.1s, opacity 0.1s;
}
.res-bucket-chip:hover { opacity: 0.85; box-shadow: 0 0 0 2px rgba(99,102,241,0.35); }
.res-bucket-chip:focus-visible { outline: 2px solid #4f46e5; outline-offset: 2px; }

/* Adjustment review gate — amber "Needs Review" chip (overrides bucket color) */
.res-bucket-chip-needs-review {
    background: #fef3c7;
    color: #92400e;
    border: 1px solid #f59e0b;
    font-weight: 600;
}
.res-bucket-chip-needs-review::before { content: '\26a0\a0'; }
.res-bucket-chip-needs-review:hover { opacity: 0.85; box-shadow: 0 0 0 2px rgba(245,158,11,0.4); }

/* Asterisk override indicator next to chip */
.res-bucket-override-indicator {
    font-size: 10px; color: #6b7280; font-style: italic;
    margin-left: 2px; cursor: default; vertical-align: super;
}

/* Lightning-bolt smart-heuristic indicator next to chip.
   Shows when agentComm > MRC × 1 auto-flipped the bucket from Residual → One-Time.
   Hover reveals the ratio reason via the title attribute. */
.res-bucket-smart-indicator {
    font-size: 11px; color: #d97706; margin-left: 3px;
    cursor: help; vertical-align: middle; user-select: none;
    transition: color 0.15s ease;
}
.res-bucket-smart-indicator:hover { color: #b45309; }

/* "(overridden)" tag in the detail panel bucket banner */
.res-bucket-override-tag {
    font-size: 11px; color: #9333ea; font-style: italic; margin-left: 6px;
    background: #f3e8ff; border-radius: 4px; padding: 1px 6px;
}

/* Bucket override popup — positioned absolutely via JS */
.res-bucket-popup {
    position: absolute; z-index: 9200;
    background: #fff; border: 1px solid #e5e7eb;
    border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,.14);
    padding: 12px 14px; min-width: 230px; max-width: 300px;
    font-size: 13px; color: #1f2937;
}
.res-bucket-popup-title {
    font-weight: 700; font-size: 12px; text-transform: uppercase;
    letter-spacing: 0.05em; color: #6366f1; margin-bottom: 10px;
}
.res-bucket-popup-warning {
    background: #fffbeb; border-left: 3px solid #f59e0b;
    color: #92400e; font-size: 11px; padding: 5px 8px;
    border-radius: 0 4px 4px 0; margin-bottom: 10px;
}
.res-bucket-popup-options {
    display: flex; flex-direction: column; gap: 6px;
}
.res-bucket-popup-option {
    display: flex; align-items: flex-start; gap: 8px;
    cursor: pointer; padding: 5px 6px; border-radius: 5px;
    transition: background 0.1s;
}
.res-bucket-popup-option:hover { background: #f5f3ff; }
.res-bucket-popup-option input[type="radio"] {
    margin-top: 2px; cursor: pointer; accent-color: #6366f1;
}
.res-bucket-popup-opt-label {
    font-weight: 600; display: block; line-height: 1.3;
}
.res-bucket-popup-opt-hint {
    display: block; font-size: 11px; color: #6b7280; line-height: 1.3;
}
.res-bucket-popup-reset {
    display: block; width: 100%; margin-top: 10px;
    padding: 5px 8px; border: 1px solid #d1d5db;
    border-radius: 5px; background: #f9fafb; color: #374151;
    font-size: 11px; cursor: pointer; text-align: center;
    font-family: inherit; transition: background 0.1s;
}
.res-bucket-popup-reset:hover { background: #f3f4f6; }
.res-bucket-popup-reset:focus-visible { outline: 2px solid #4f46e5; outline-offset: 2px; }

/* Adjustment review gate — explanation hint inside popup */
.res-bucket-popup-adjustment-hint {
    background: #fef3c7; border-left: 3px solid #f59e0b;
    color: #92400e; font-size: 11px; padding: 5px 8px;
    border-radius: 0 4px 4px 0; margin-bottom: 10px;
    font-weight: 600;
}

/* Adjustment review gate — highlighted Residual/One-Time options in popup */
.res-bucket-popup-option.res-bucket-option-recommended {
    border: 2px solid #2563eb;
    border-radius: 5px;
    background: #eff6ff;
}
.res-bucket-popup-option.res-bucket-option-recommended:hover { background: #dbeafe; }

/* Adjustment review gate — pending-review warning row in summary bar */
.res-summary-pending-review {
    background: #fef3c7;
    color: #92400e;
    padding: 8px 12px;
    border-left: 4px solid #f59e0b;
    margin-bottom: 8px;
    border-radius: 4px;
    font-weight: 600;
}

/* Summary bar */
.res-summary-bar {
    padding: 10px 24px; background: #f0f4ff;
    border-bottom: 1px solid #dce4f5;
    font-size: 13px; color: #374151;
}
.res-summary-buckets {
    margin-bottom: 6px; padding-bottom: 6px;
    border-bottom: 1px dashed #c7d2e4;
}
.res-summary-bucket-lbl { font-weight: 600; margin-right: 4px; }
.res-summary-statuses { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.res-summary-total { font-weight: 600; }
.res-summary-item  { font-weight: 500; }

/* Warnings */
.res-warnings { padding: 0 24px 8px; }
.res-warning-item {
    margin: 4px 0; padding: 6px 12px;
    background: #fffbeb; border-left: 3px solid #f59e0b;
    color: #92400e; font-size: 12px; border-radius: 0 4px 4px 0;
}

/* Loading / error / empty states */
.res-loading {
    display: flex; align-items: center; gap: 10px;
    padding: 32px 24px; color: #6b7280; font-size: 14px;
}
.res-spinner {
    display: inline-block; width: 18px; height: 18px;
    border: 2px solid #d1d5db; border-top-color: #0176D3;
    border-radius: 50%; animation: res-spin 0.7s linear infinite;
}
@keyframes res-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
    .res-spinner { animation: none; border-top-color: #0176D3; }
}
.res-error {
    padding: 16px 24px; background: #fce4e6; color: #c62828;
    border-left: 4px solid #c62828; margin: 12px 24px;
    border-radius: 0 6px 6px 0; font-size: 13px;
}
.res-empty {
    padding: 32px 24px; color: #9ca3af; font-size: 14px; text-align: center;
}

/* Table */
.res-table-wrapper {
    overflow-x: auto;
    overflow-y: auto;
    max-height: 70vh;
    padding: 0 24px 24px;
    position: relative;
}
.res-table {
    width: 100%; border-collapse: collapse;
    font-size: 12px; color: #374151;
    min-width: 900px;
}
.res-table thead {
    position: sticky;
    top: 0;
    z-index: 2;
    background: #f3f4f6;
}
.res-table th {
    background: #f3f4f6; padding: 8px 10px;
    text-align: left; font-weight: 600; font-size: 11px;
    text-transform: uppercase; letter-spacing: 0.4px;
    border-bottom: 2px solid #e5e7eb; white-space: nowrap;
}

/* ── Filter bar ─────────────────────────────────────────────────────────── */
.res-filter-bar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px 12px;
    padding: 10px 24px;
    background: #f9fafb;
    border-top: 1px solid #e5e7eb;
    border-bottom: 1px solid #e5e7eb;
    margin-bottom: 0;
}
.res-filter-label {
    font-size: 11px;
    font-weight: 600;
    color: #6b7280;
    white-space: nowrap;
    margin-right: -4px;
}
.res-filter-select {
    height: 28px;
    padding: 2px 6px;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    font-size: 12px;
    color: #374151;
    background: #fff;
    cursor: pointer;
}
.res-filter-select:focus-visible {
    outline: 2px solid #0176D3;
    outline-offset: 1px;
}
.res-filter-search {
    height: 28px;
    padding: 2px 8px;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    font-size: 12px;
    color: #374151;
    background: #fff;
    min-width: 180px;
}
.res-filter-search:focus-visible {
    outline: 2px solid #0176D3;
    outline-offset: 1px;
}
.res-filter-clear {
    margin-left: 4px;
}

/* ── Export button (sits in the batch controls row) ─────────────────────── */
/*    Matches .btn-secondary weight: proper height, shadow, 500 weight       */
.res-export-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 14px;
    min-height: 34px;
    background: #f3f2f1;
    border: 1px solid #e1e0df;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 500;
    color: #323130;
    cursor: pointer;
    font-family: inherit;
    transition: background 0.15s, box-shadow 0.15s;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
    white-space: nowrap;
}
.res-export-btn:hover:not(:disabled) {
    background: #e8e8e8;
    box-shadow: 0 2px 4px rgba(0,0,0,0.08);
}
.res-export-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.res-table td {
    padding: 7px 10px; border-bottom: 1px solid #f0f0f0;
    vertical-align: top;
}
.res-table tbody tr:hover { background: #eef4fb; }
.res-table tbody tr:hover td:first-child { box-shadow: inset 3px 0 0 #009fdb; }
.res-ctn   { font-family: monospace; font-size: 11px; color: #4b5563; }
.res-amount { font-variant-numeric: tabular-nums; text-align: right; }

/* ── Partner Share column ────────────────────────────────────────────── */
.res-pshare        { font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; min-width: 80px; }
.res-pshare-green  { color: #15803d; font-weight: 600; }
.res-pshare-red    { color: #dc2626; font-weight: 600; }
.res-pshare-muted  { color: #9ca3af; font-size: 11px; }
.res-pshare-dash   { color: #d1d5db; }

/* Row tint by status — legacy names kept for backward compat */
/* 2026-05-29 #7: matched/linked-paid green deepened from #f9fef9 (≈white, indistinguishable
   from the #fafafa nomatch gray) to #dcfce7 (Tailwind green-100, already used by
   .cc-residual-badge) — clearly green, still light enough for black text (contrast ~13:1). */
.res-row-paid      { background: #dcfce7; }
.res-row-pending   { background: #fff9e6; }
.res-row-partial   { background: #fff8f0; }
.res-row-disputed  { background: #fff5f5; }
.res-row-nomatch   { background: #fafafa; }
.res-row-ambiguous { background: #faf5ff; }
.res-row-cancelled  { background: #fff5f5; }
/* New names generated from updated STATUS_CONFIG cls values */
.res-row-linked-paid     { background: #dcfce7; }  /* 2026-05-29 #7: deepened — see .res-row-paid above */
.res-row-linked-pending  { background: #fff9e6; }
.res-row-linked-partial  { background: #fff8f0; }
.res-row-linked-disputed { background: #fff5f5; }
.res-row-chargeback      { background: #fff5f5; }
.res-row-confirmed  { opacity: 0.65; }

/* Just-Created flash — gold-pulse highlight on a residual row immediately
   after the operator creates a sale via + Mobility / + Wireline. Auto-fades
   to a softer accent after JUST_CREATED_FLASH_MS (residuals.js). */
.res-row-just-created {
    background: linear-gradient(90deg, #fff8d8 0%, #fffaea 50%, #fffefb 100%) !important;
    border-left: 4px solid #d4a017;
    animation: resJustCreatedPulse 2.4s ease-in-out 1;
    box-shadow: inset 0 0 0 1px rgba(212, 160, 23, 0.18);
}
.res-row-just-created td:first-child { border-left: 4px solid #d4a017; }

@keyframes resJustCreatedPulse {
    0%   { background: #fff3b0; box-shadow: inset 0 0 0 2px rgba(212, 160, 23, 0.55); }
    40%  { background: #fff8d8; box-shadow: inset 0 0 0 1px rgba(212, 160, 23, 0.30); }
    100% { background: linear-gradient(90deg, #fff8d8 0%, #fffaea 50%, #fffefb 100%);
           box-shadow: inset 0 0 0 1px rgba(212, 160, 23, 0.18); }
}

/* "JUST CREATED" badge inside the Matched Sale cell — gold pill matching
   the row accent. Renders above the Sale # line. */
.res-just-created-badge {
    display: inline-block;
    background: #d4a017;
    color: #fff;
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 0.4px;
    padding: 2px 7px;
    border-radius: 10px;
    margin-bottom: 3px;
    box-shadow: 0 1px 3px rgba(212, 160, 23, 0.32);
    text-transform: uppercase;
    line-height: 1.4;
}
.res-just-created-badge span { margin-right: 3px; font-weight: 900; }

/* Auto-linked sibling — softer treatment than the originating "JUST CREATED"
   row. Used when the operator created a sale from one row and the residuals
   uploader auto-linked sibling rows (residual ↔ upfront for the same line). */
.res-row-auto-linked {
    background: linear-gradient(90deg, #eaf4ff 0%, #f4faff 50%, #fcfeff 100%) !important;
    border-left: 4px solid #1f7ad6;
    box-shadow: inset 0 0 0 1px rgba(31, 122, 214, 0.18);
}
.res-row-auto-linked td:first-child { border-left: 4px solid #1f7ad6; }

.res-auto-linked-badge {
    display: inline-block;
    background: #1f7ad6;
    color: #fff;
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 0.4px;
    padding: 2px 7px;
    border-radius: 10px;
    margin-bottom: 3px;
    box-shadow: 0 1px 3px rgba(31, 122, 214, 0.32);
    text-transform: uppercase;
    line-height: 1.4;
}
.res-auto-linked-badge span { margin-right: 3px; font-weight: 900; }

/* Per-row carrier override (Provider/Product cell). Lets the operator pick a
   canonical CRM carrier when the TSD's emit doesn't resolve cleanly. */
.res-carrier-override-select {
    border: 1px solid #d1d5db;
    border-radius: 4px;
    background: #fafbfc;
    color: #374151;
    font-family: inherit;
}
.res-carrier-override-select:focus {
    outline: 2px solid #1f7ad6;
    outline-offset: 1px;
}
/* Brief pulse on the Complete Batch button after Process All Linked finishes,
   to draw the operator's eye to the next click. Auto-clears via setTimeout. */
.res-pulse-once {
    animation: resPulseOnce 1.2s ease-in-out 2;
}
@keyframes resPulseOnce {
    0%   { box-shadow: 0 0 0 0 rgba(11, 110, 79, 0.55); }
    50%  { box-shadow: 0 0 0 8px rgba(11, 110, 79, 0.00); }
    100% { box-shadow: 0 0 0 0 rgba(11, 110, 79, 0.00); }
}

.res-carrier-override-chip {
    display: inline-block;
    background: #fff5db;
    color: #92400e;
    border: 1px solid #f5d76e;
    font-size: 10px;
    padding: 1px 6px;
    border-radius: 4px;
    font-weight: 600;
}

/* Skipped rows — archival-only, no CP entry written */
.res-row-skipped    { background: #f5f5f5 !important; opacity: 0.7; }
.res-row-skipped td { color: #9ca3af; }
/* Auto-paired chargeback+rebill net-zero rows — fade to faded RED so they
   read as chargeback-related at a glance vs ordinary gray manual skips.
   Both classes co-apply on these rows; this rule wins via being later. */
.res-row-paired-zero    { background: #fef2f2 !important; opacity: 0.85; }
.res-row-paired-zero td { color: #991b1b; }

/* Standalone chargeback rows (negative AgentComm, not auto-paired) — render
   in red so the negative is visually unmistakable in the wizard preview.
   Slightly stronger red than paired-zero so the two are distinguishable:
   paired-zero = already auto-skipped, res-row-chargeback = LIVE chargeback
   the operator must still Accept/Ignore. */
.res-row-chargeback     { background: #fee2e2 !important; }
.res-row-chargeback td  { color: #991b1b; }

/* Unified-flow Needs-Attention panel (2026-04-30) — replaces the 4-button
   bulk bar. Panel renders below the residual results table after Process All
   runs (or via the Review button), categorized by decision type to mirror
   the reconciliation uploader's sub-step pattern. */
.res-unified-bar               { display:flex; flex-direction:column; gap:10px; padding:12px 16px; background:#f8f9fa; border:1px solid #e0e0e0; border-radius:8px; margin-bottom:14px; }
.res-attn-chip                 { display:inline-block; padding:2px 8px; border-radius:10px; font-size:11px; font-weight:600; margin-left:4px; }
.res-chip-chargeback           { background:#fee2e2; color:#991b1b; border:1px solid #fecaca; }
.res-chip-disputed             { background:#fef3c7; color:#92400e; border:1px solid #fde68a; }
.res-chip-partial              { background:#dbeafe; color:#1e40af; border:1px solid #bfdbfe; }
.res-chip-nomatch              { background:#f3e8ff; color:#6b21a8; border:1px solid #e9d5ff; }

.res-needs-attention-panel     { margin:18px 24px; border:1px solid #fde68a; background:#fffbeb; border-radius:8px; padding:14px 18px; }

/* V1 inner classes (`.res-na-header`, `.res-na-title`, `.res-na-sub`,
   `.res-na-section`, `.res-na-section-title`, `.res-na-section-help`,
   `.res-na-table` family, `.res-na-section-cta`, and the kind-prefixed
   `.res-na-<kind> .res-na-section-title` chains) removed 2026-05-12.
   The V2 panel rewrite uses `.res-na-header-v2` / `.res-na-title-v2` /
   `.res-na-sub-v2` / `.res-na-section-v2` / `.res-na-section-label` /
   `.res-na-section-help-v2` / `.res-na-table-v2` / `.res-na-cta-row` —
   see the "RESIDUALS WIZARD MODERNIZATION" block further down. The V1
   panel base class above is kept because `_openNeedsAttentionPanel`
   still applies it alongside the `-v2` class. */

/* Per-row completion signal: superseded 2026-05-12 by `-v2` variants in the
   "RESIDUALS WIZARD MODERNIZATION" block further down (lines ~4441-4470).
   `_markPanelRowDone` (residuals.js ~4546) sets `res-na-row-done-v2` and
   appends `-v2` to the statusClass arg, so the old `.res-na-row-done`,
   `.res-na-row-confirmed`, `.res-na-row-skipped`, `.res-na-done-badge`, and
   `.res-na-section-done` selectors were unreachable. Removed in this cleanup. */

/* Skipped status badge — matches .res-status-* visual language */
.res-status-skipped {
    background: #f3f4f6; color: #6b7280;
    border: 1px solid #d1d5db;
    font-size: 10px; padding: 1px 6px; border-radius: 4px;
    display: inline-block; white-space: nowrap;
}

/* Skip counter chip in session toolbar */
.res-skip-counter {
    font-size: 12px; color: #6b7280;
    background: #f3f4f6; border: 1px solid #e5e7eb;
    border-radius: 12px; padding: 2px 8px; margin-right: 8px;
    display: inline-block;
}

/* Confirmed check overlay */
.res-confirmed-check {
    color: #15803d; font-weight: 600; font-size: 11px;
}
.res-confirmed-banner {
    padding: 10px 14px; background: #f0fdf4; color: #15803d;
    border-left: 3px solid #22c55e; font-size: 13px; font-weight: 600;
}

/* ── Session toolbar (replaces batch selector) ───────────────── */
/* The old .res-batch-selector / .res-batch-select rules are kept  */
/* for any legacy DOM that might reference them (e.g. Batch History */
/* admin cleanup dialog) but the Process Batch wizard now renders  */
/* .res-session-toolbar instead.                                   */
.res-batch-selector {
    padding: 12px 24px; background: #f8fafc;
    border-bottom: 1px solid #e5e7eb;
    display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
}
.res-batch-label { font-size: 12px; font-weight: 700; color: #374151; white-space: nowrap; }
.res-batch-controls { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.res-batch-select {
    padding: 5px 10px; border: 1px solid #d1d5db; border-radius: 6px;
    font-size: 12px; min-width: 240px; max-width: 360px;
}
.res-batch-status { font-size: 11px; color: #6b7280; }
.res-batch-active { color: #15803d; font-weight: 600; }
.res-batch-none   { color: #92400e; }

/* ── Session toolbar — JIT preview / batch status strip ─────── */
.res-session-toolbar {
    padding: 10px 24px; background: #f0f9ff;
    border-bottom: 1px solid #bae6fd;
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; flex-wrap: wrap;
}
.res-preview-banner {
    font-size: 13px; color: #0c4a6e; flex: 1 1 auto;
}
.res-banner-pending {
    font-style: italic; color: #0369a1; font-weight: 400;
}
.res-banner-draft {
    display: inline-block; padding: 1px 7px; border-radius: 10px;
    background: #e0f2fe; color: #0369a1; font-size: 11px; font-weight: 700;
}
.res-session-actions {
    display: flex; gap: 8px; align-items: center; flex-shrink: 0;
}

/* ── Bulk bar ────────────────────────────────────────────────── */
.res-bulk-bar {
    display: flex; align-items: center; justify-content: space-between;
    padding: 8px 24px; background: #fffbeb; border-bottom: 1px solid #fde68a;
    font-size: 12px; color: #92400e; gap: 12px; flex-wrap: wrap;
}

/* ── Buttons ─────────────────────────────────────────────────── */
.res-btn {
    padding: 6px 14px; border-radius: 6px; font-size: 12px; font-weight: 600;
    cursor: pointer; border: 1px solid transparent; transition: opacity 0.1s;
    white-space: nowrap;
}
.res-btn:disabled { opacity: 0.45; cursor: not-allowed; }
.res-btn-primary   { background: #0176D3; color: #fff; border-color: #0176D3; }
.res-btn-success   { background: #2E844A; color: #fff; border-color: #2E844A; }
.res-btn-warning   { background: #FE9339; color: #fff; border-color: #FE9339; }
.res-btn-danger    { background: #EA001E; color: #fff; border-color: #EA001E; }
.res-btn-secondary { background: #f3f4f6; color: #374151; border-color: #d1d5db; }
.res-btn-ghost     { background: #fff; color: #374151; border-color: #d1d5db; }
.res-btn-complete  { background: #065f46; color: #fff; border-color: #065f46; font-weight: 600; }
.res-btn-complete:hover:not(:disabled) { background: #047857; border-color: #047857; }
.res-btn-sm        { padding: 4px 10px; font-size: 11px; }

/* ── Detail panel ────────────────────────────────────────────── */
.res-detail-cell {
    padding: 0; border-bottom: 2px solid #e5e7eb; background: #f9fafb;
}
.res-detail-inner {
    padding: 14px 20px; display: flex; flex-direction: column; gap: 14px;
}
.res-detail-section {
    background: #fff; border: 1px solid #e5e7eb; border-radius: 8px; padding: 12px 16px;
}
.res-detail-title {
    font-size: 11px; font-weight: 700; color: #374151;
    text-transform: uppercase; letter-spacing: 0.4px; margin-bottom: 10px;
}
.res-detail-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 8px 16px;
}
.res-detail-field { display: flex; flex-direction: column; gap: 2px; }
.res-detail-lbl   { font-size: 10px; font-weight: 600; color: #9ca3af; text-transform: uppercase; letter-spacing: 0.3px; }
.res-detail-val   { font-size: 12px; color: #1f2937; }
.res-meta-row     { margin-top: 10px; display: flex; flex-wrap: wrap; gap: 8px; font-size: 11px; color: #6b7280; }
.res-meta-item    { }
.res-reason       { color: #374151; font-style: italic; }

/* DBA warning */
.res-dba-warn {
    margin-bottom: 8px; padding: 6px 10px;
    background: #fffbeb; border-left: 3px solid #f59e0b;
    font-size: 11px; color: #92400e; border-radius: 0 4px 4px 0;
}

/* Per-axis match chips */
.res-match-axes { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 6px; }
.res-axis-chip { font-size: 10px; padding: 2px 6px; border-radius: 3px; font-weight: 500; }
.res-axis-chip.hit { background: #dcfce7; color: #166534; }
.res-axis-chip.partial { background: #fef9c3; color: #854d0e; }
.res-axis-chip.miss { background: #fee2e2; color: #991b1b; }

/* Candidate table picker */
.res-cands-table { width: 100%; border-collapse: collapse; font-size: 0.9em; }
.res-cands-table th, .res-cands-table td { padding: 4px 8px; border-bottom: 1px solid #eee; text-align: left; vertical-align: middle; }
.res-cands-table th { background: #f5f5f5; font-weight: 600; }
.res-cands-table tr.res-cand-row:hover { background: #fafafa; }
.res-cand-winner-badge { display: inline-block; margin-left: 6px; padding: 1px 6px; background: #d4edda; color: #155724; border-radius: 3px; font-size: 0.75em; font-weight: 600; }

/* Candidate cards */
.res-candidates-list { display: flex; flex-wrap: wrap; gap: 12px; }
/* Sibling-picker scroll container: caps the long candidate table so scrolling the
   matches stays inside this box and the collision context above does not move. */
.res-candidates-scroll { display: block; max-height: 360px; overflow-y: auto; }
.res-candidates-scroll .res-cands-table thead th {
    position: sticky; top: 0; z-index: 1;
    box-shadow: 0 1px 0 #ddd;   /* compensate for border-collapse top-border drop on sticky th */
}
.res-candidate-card {
    flex: 1; min-width: 220px; max-width: 340px;
    border: 1px solid #e5e7eb; border-radius: 8px; padding: 10px 12px;
    background: #fff;
}
.res-candidate-primary { border-color: #2E844A; background: #f0fdf4; }
.res-cand-header {
    font-size: 12px; font-weight: 700; color: #1b2a4a; margin-bottom: 8px;
    display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
}
.res-cand-status { padding: 1px 6px; border-radius: 8px; font-size: 10px; font-weight: 600; }
.res-cand-grid {
    display: grid; grid-template-columns: 1fr 1fr; gap: 4px 12px;
    font-size: 11px; color: #374151; margin-bottom: 8px;
}
.res-cand-lbl { color: #9ca3af; font-weight: 600; font-size: 10px; text-transform: uppercase; margin-right: 3px; }
.res-cand-stream-badge { font-size: 10px; color: #6b7280; font-style: italic; margin-bottom: 6px; }

/* Candidate search (Feature E) */
.res-cand-search-row { padding: 8px 0; border-top: 1px dashed #d0d7de; margin-top: 8px; }
.res-cand-search-input { width: 100%; padding: 6px 10px; font-size: 13px; border: 1px solid #d0d7de; border-radius: 4px; box-sizing: border-box; }
.res-cand-search-results { margin-top: 8px; }
.res-cand-search-results-header { font-size: 11px; color: #6b7280; margin-bottom: 4px; font-style: italic; }

/* Feature D — consistent-sibling-set chronological pairing */
.res-cand-row-already-picked { opacity: 0.45; }
.res-cand-row-already-picked .res-cand-pick-badge::before { content: 'Already picked \2014 '; }
.res-cand-chronological-banner {
    background: #f0f9ff; border-left: 4px solid #0284c7;
    padding: 8px 12px; font-size: 13px; margin: 8px 0; border-radius: 0 4px 4px 0;
}
.res-cand-chronological-banner.fuzzy {
    background: #fefce8; border-left-color: #ca8a04;
}

/* Action bar */
.res-action-bar {
    display: flex; gap: 8px; flex-wrap: wrap; align-items: center;
    padding-top: 4px;
}

/* Create sale form */
.res-create-sale-form {
    background: #fff; border: 1px solid #bfdbfe; border-radius: 8px; padding: 14px 16px;
}
.res-form-title { font-size: 12px; font-weight: 700; color: #1d4ed8; margin-bottom: 10px; }
.res-form-grid  { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px 16px; margin-bottom: 10px; }
.res-form-field { display: flex; flex-direction: column; gap: 3px; }
.res-form-lbl   { font-size: 10px; font-weight: 600; color: #6b7280; text-transform: uppercase; }
.res-input {
    padding: 5px 8px; border: 1px solid #d1d5db; border-radius: 5px;
    font-size: 12px; width: 100%; box-sizing: border-box;
}
.res-input[readonly] { background: #f3f4f6; color: #6b7280; }
.res-form-actions { display: flex; gap: 8px; margin-top: 8px; }
.res-create-preview { font-size: 12px; margin-top: 6px; }
.res-preview-box { padding: 6px 10px; background: #f0fdf4; border: 1px solid #bbf7d0; border-radius: 5px; }
.res-preview-warn { color: #92400e; }

/* Residual-type row annotation beside action buttons */
.res-residual-note {
    font-size: 11px; color: #6b7280; font-style: italic; margin-left: 6px;
}

/* ── Sales popover — residual summary line (Feature B) ───────── */
.sale-popover-residual-line {
    margin-top: 8px; padding: 6px 10px;
    background: #f0fdf4; border: 1px solid #bbf7d0;
    border-radius: 5px; font-size: 12px; color: #15803d;
}

/* ============================================================
   RESIDUALS TAB REDESIGN — Task #57
   Sections:
     1. Sub-tab navigation        (.res-subtabs / .res-subtab*)
     2. Residual Book             (.rb-*)
     3. Residual status chips     (.residual-status-*)
     4. Batch History             (.bh-*)
     5. Responsive breakpoints
   No existing class modified.
   ============================================================ */

/* ── 1. SUB-TAB NAVIGATION ────────────────────────────────── */
/*    Styled to match .tab-buttons / .tab-button pattern used
      throughout the CRM (Prospect sub-tabs, Commissions wizard) */
.res-subtabs {
    display: flex;
    align-items: flex-end;
    gap: 0;
    border-bottom: 2px solid #f3f2f1;
    padding: 0 24px;
    background: #fff;
    margin-bottom: 0;
    box-shadow: 0 1px 0 #e5e7eb;
}

.res-subtab {
    appearance: none;
    background: transparent;
    border: none;
    border-bottom: 3px solid transparent;
    margin-bottom: -2px;
    padding: 12px 20px;
    font-size: 13px;
    font-weight: 500;
    color: #6b7280;
    cursor: pointer;
    white-space: nowrap;
    transition: color 0.2s ease, border-color 0.2s ease, background 0.15s ease;
    font-family: inherit;
    letter-spacing: 0.1px;
}

.res-subtab:hover {
    color: #1b2a4a;
    background: rgba(0, 159, 219, 0.05);
    border-radius: 6px 6px 0 0;
}

.res-subtab:focus-visible {
    outline: 2px solid #0176D3;
    outline-offset: -2px;
    border-radius: 4px 4px 0 0;
}

/* Active: accent blue underline + bold label — matches .tab-button.active */
.res-subtab-active {
    color: #009fdb;
    border-bottom-color: #009fdb;
    font-weight: 700;
}

.res-subtab-panel {
    /* display toggled by JS; no layout default required */
}

/* ── 2. RESIDUAL BOOK — KPI STRIP ─────────────────────────── */
/*    Matches .kpi-card visual language: border-left accent,
      white bg, subtle shadow, hover lift */
.rb-kpi-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    padding: 20px 24px 4px;
}

.rb-kpi-card {
    width: 150px;
    flex-shrink: 0;
    background: #fff;
    border-radius: 10px;
    border-left: 4px solid #009fdb;
    padding: 14px 16px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
    transition: box-shadow 0.2s, transform 0.2s;
    min-width: 0;
}

.rb-kpi-card:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.08), 0 2px 4px rgba(0,0,0,0.04);
}

/* Alert card — matches .kpi-card.negative */
.rb-kpi-alert {
    border-left-color: #EA001E;
}

/* Warning variant */
.rb-kpi-warning {
    border-left-color: #FE9339;
}

/* Positive / success */
.rb-kpi-positive {
    border-left-color: #2E844A;
}

/* ── Per-card accent colors (nth-child) ──────────────────────────
   Card 1  Residuals MTD          green   #2E844A
   Card 2  Residuals YTD          blue    #009fdb  (CRM primary)
   Card 3  Active Streams         purple  #5b21b6
   Card 4  Churned This Month     navy    #0176D3
   Card 5  Contract Renewals      red     #EA001E  (resting; .rb-kpi-alert overrides when count>0)
   Card 6  Projected Residual/mo  orange  #FE9339
   Value text: kept uniform #323130 — darkened per-card shades at
   clamp(18-24px) bold would fail 4.5:1 for mid-range hues; uniform
   navy passes on all six cards.                                   */
.rb-kpi-strip .rb-kpi-card:nth-child(1) { border-left-color: #2E844A; }
.rb-kpi-strip .rb-kpi-card:nth-child(2) { border-left-color: #009fdb; }
.rb-kpi-strip .rb-kpi-card:nth-child(3) { border-left-color: #5b21b6; }
.rb-kpi-strip .rb-kpi-card:nth-child(4) { border-left-color: #0176D3; }
.rb-kpi-strip .rb-kpi-card:nth-child(5) { border-left-color: #EA001E; }
.rb-kpi-strip .rb-kpi-card:nth-child(6) { border-left-color: #FE9339; }

.rb-kpi-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #767676;
    font-weight: 500;
    margin-bottom: 6px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.rb-kpi-value {
    font-size: clamp(18px, 1.8vw, 24px);
    font-weight: 700;
    color: #323130;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.15;
}

.rb-kpi-footnote {
    font-size: 11px;
    color: #6b7280;
    margin-top: 6px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.rb-trend-up   { color: #2E844A; }
.rb-trend-down { color: #EA001E; }
.rb-trend-flat { color: #9ca3af; }

/* ── 2. RESIDUAL BOOK — FILTER BAR ────────────────────────── */
/*    Inputs match .filter-group select/input conventions:
      border #ddd, radius 6px, focus ring #009fdb */
.rb-filter-bar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 12px;
    padding: 14px 24px;
    background: #fff;
    border-top: 1px solid #f0f1f3;
    border-bottom: 1px solid #f0f1f3;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}

.rb-filter-search {
    height: 34px;
    padding: 6px 12px;
    border: 1px solid #d2ccc8;
    border-radius: 6px;
    font-size: 13px;
    color: #1f2937;
    background: #fff;
    min-width: 200px;
    font-family: inherit;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.rb-filter-search:focus,
.rb-filter-search:focus-visible {
    outline: none;
    border-color: #009fdb;
    box-shadow: 0 0 0 3px rgba(0, 159, 219, 0.1);
}

.rb-filter-select {
    height: 34px;
    padding: 6px 10px;
    border: 1px solid #d2ccc8;
    border-radius: 6px;
    font-size: 13px;
    color: #1f2937;
    background: #fff;
    cursor: pointer;
    font-family: inherit;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.rb-filter-select:focus,
.rb-filter-select:focus-visible {
    outline: none;
    border-color: #009fdb;
    box-shadow: 0 0 0 3px rgba(0, 159, 219, 0.1);
}

.rb-filter-clear {
    appearance: none;
    background: #f3f2f1;
    border: 1px solid #e1e0df;
    border-radius: 6px;
    padding: 6px 12px;
    font-size: 12px;
    font-weight: 500;
    color: #323130;
    cursor: pointer;
    height: 34px;
    font-family: inherit;
    transition: background 0.15s;
    display: none; /* shown by JS when a filter is active */
}

.rb-filter-clear.visible { display: inline-flex; align-items: center; }
.rb-filter-clear:hover { background: #e8e8e8; }

/* Quick filter chips — pill shape, CRM accent theme */
.rb-quick-chip {
    appearance: none;
    background: #f3f2f1;
    border: 1px solid #d2ccc8;
    border-radius: 14px;
    height: 34px;
    padding: 0 14px;
    font-size: 12px;
    font-weight: 500;
    color: #605e5c;
    cursor: pointer;
    font-family: inherit;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
    white-space: nowrap;
    letter-spacing: 0.1px;
    line-height: 34px;
}

.rb-quick-chip:hover {
    background: rgba(0, 159, 219, 0.08);
    border-color: rgba(0, 159, 219, 0.5);
    color: #1b2a4a;
}
.rb-quick-chip:focus-visible { outline: 2px solid #0176D3; outline-offset: 2px; }

/* Active state — accent blue tint matching CRM #009fdb palette */
.rb-quick-chip.rb-quick-chip-active {
    background: rgba(0, 159, 219, 0.12);
    border-color: #009fdb;
    color: #005f85;
    font-weight: 600;
}
.rb-quick-chip.rb-quick-chip-active:hover {
    background: rgba(0, 159, 219, 0.2);
}

/* Reset / back button — matches .res-upload-btn (primary blue) used for Sandler/Telarus/CellHub uploads */
.rb-quick-reset {
    appearance: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #0176D3;
    color: #fff;
    border: none;
    padding: 0 18px;
    height: 34px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    white-space: nowrap;
    transition: background 0.15s;
}
.rb-quick-reset:hover { background: #015ea6; }
.rb-quick-reset:focus-visible { outline: 2px solid #0176D3; outline-offset: 2px; }

/* ── 2. RESIDUAL BOOK — SORT DROPDOWN ──────────────────────── */
/*    Matches .filter-group select style */
.rb-sort {
    margin-left: auto;
    height: 34px;
    padding: 6px 10px;
    border: 1px solid #d2ccc8;
    border-radius: 6px;
    font-size: 13px;
    color: #1f2937;
    background: #fff;
    cursor: pointer;
    font-family: inherit;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.rb-sort:focus,
.rb-sort:focus-visible {
    outline: none;
    border-color: #009fdb;
    box-shadow: 0 0 0 3px rgba(0, 159, 219, 0.1);
}

/* ── 2. RESIDUAL BOOK — COMPANY ACCORDION ──────────────────── */
/*    Header: mirrors .yr-header — solid #0176D3, white text,
      bold label, chevron rotation, box-shadow on the section  */
.rb-company-section {
    margin-bottom: 14px;
    border-radius: 10px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.08);
    overflow: hidden;
}

.rb-company-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    background: #0176D3;
    color: #fff;
    cursor: pointer;
    user-select: none;
    transition: background 0.15s;
    gap: 12px;
    border-radius: 10px 10px 0 0;
    font-weight: 600;
}

.rb-company-header:hover { background: #0165b8; }
.rb-company-header:focus-visible {
    outline: 3px solid #fff;
    outline-offset: -3px;
}

/* ── Per-company Export button — lives on the blue header bar ── */
.rb-export-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.35);
    color: #fff;
    font-size: 12px;
    font-weight: 500;
    padding: 0 12px;
    height: 30px;
    min-height: 30px;
    border-radius: 6px;
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
    transition: background 0.15s, border-color 0.15s;
    /* Stop click from toggling the accordion (handled by data-stop in markup) */
}
.rb-export-btn:hover {
    background: rgba(255, 255, 255, 0.25);
    border-color: rgba(255, 255, 255, 0.6);
}
.rb-export-btn:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
}

.rb-company-arrow {
    display: inline-block;
    font-size: 11px;
    width: 12px;
    text-align: center;
    flex-shrink: 0;
    transition: transform 0.2s;
    color: rgba(255,255,255,0.85);
}

.rb-company-arrow.expanded { transform: rotate(90deg); }

.rb-company-name {
    font-size: 15px;
    font-weight: 700;
    color: #fff;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    /* flex: 1 removed — parent .rb-company-identity now carries flex:1 */
}

.rb-company-count {
    font-size: 12px;
    color: rgba(255,255,255,0.8);
    font-weight: 400;
    flex-shrink: 0;
    white-space: nowrap;
}

.rb-company-lifetime {
    font-size: 15px;
    font-weight: 700;
    color: #fff;
    text-align: right;
    flex-shrink: 0;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.rb-company-runrate {
    font-size: 12px;
    color: rgba(255,255,255,0.8);
    text-align: right;
    flex-shrink: 0;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.rb-company-productmix {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
    flex-shrink: 0;
}

.rb-company-lastpaid {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    color: rgba(255,255,255,0.8);
    flex-shrink: 0;
    white-space: nowrap;
}

/* Body: white background with a subtle top shadow to look nested */
.rb-company-body {
    display: none;
    background: #fff;
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.04);
}

.rb-company-body.expanded { display: block; }

/* ── Company identity block (name + sub-line row) ── */
.rb-company-identity {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
    flex: 1;
    overflow: hidden;
}

/* Sub-line: MRC pool · partner chip */
.rb-company-sub {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

/* MRC pool label on company header */
.rb-company-mrc-pool {
    font-size: 11px;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.75);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}
.rb-company-mrc-none {
    color: rgba(255, 255, 255, 0.45);
}

/* Partner chip on company header */
.rb-partner-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 1px 8px;
    border-radius: 9px;
    font-size: 10px;
    font-weight: 600;
    background: rgba(255, 255, 255, 0.18);
    color: #fff;
    white-space: nowrap;
    flex-shrink: 0;
}
.rb-partner-chip.rb-partner-none {
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.45);
    font-weight: 400;
}
.rb-partner-more {
    font-weight: 400;
    font-size: 10px;
    opacity: 0.8;
}

/* Right cluster: earned label + dollar + freshness + badges */
.rb-company-right-cluster {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}
.rb-company-earned-label {
    font-size: 10px;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.7);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    white-space: nowrap;
}

/* Mix chips on company header — white-based tones for legibility on #0176D3 bg */
.rb-mix-chip {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 9px;
    font-size: 10px;
    font-weight: 700;
    white-space: nowrap;
}

.rb-mix-mob   { background: rgba(255,255,255,0.25); color: #fff; }
.rb-mix-wl    { background: rgba(255,255,255,0.18); color: rgba(255,255,255,0.95); }
.rb-mix-other { background: rgba(0,0,0,0.15); color: rgba(255,255,255,0.8); }

/* Freshness dot */
.rb-freshness-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.rb-fresh-green { background: #22c55e; }
.rb-fresh-amber { background: #f59e0b; }
.rb-fresh-red   { background: #ef4444; }

/* Alert chips on company header — semi-opaque on blue bg */
.rb-churn-flag {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 2px 9px;
    background: rgba(234, 0, 30, 0.85);
    color: #fff;
    border-radius: 9px;
    font-size: 10px;
    font-weight: 700;
    white-space: nowrap;
    flex-shrink: 0;
}

.rb-renewal-chip {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 2px 9px;
    background: rgba(254, 147, 57, 0.9);
    color: #fff;
    border-radius: 9px;
    font-size: 10px;
    font-weight: 700;
    white-space: nowrap;
    flex-shrink: 0;
}

/* Show-all button — ghost/dashed style, clearly interactive, centered */
.rb-show-all-btn {
    display: block;
    width: calc(100% - 48px);
    margin: 12px 24px 16px;
    padding: 10px 16px;
    background: #fff;
    border: 2px dashed #d2ccc8;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 600;
    color: #0176D3;
    cursor: pointer;
    text-align: center;
    font-family: inherit;
    transition: background 0.15s, border-color 0.15s;
}

.rb-show-all-btn:hover {
    background: #f0f6ff;
    border-color: #009fdb;
}
.rb-show-all-btn:focus-visible { outline: 2px solid #0176D3; outline-offset: 2px; }

/* ── 2. RESIDUAL BOOK — STREAM ROWS ────────────────────────── */
.rb-pool-strip {
    padding: 6px 16px;
    background: #fff8f0;
    border-bottom: 1px solid #fed7aa;
    font-size: 11px;
    color: #92400e;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

/* Indented sub-row under company header; hover matches .data-table tbody tr:hover */
.rb-stream-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 20px 10px 24px;
    border-bottom: 1px solid #f0f1f3;
    background: #fff;
    transition: background 0.15s;
    cursor: pointer;
    font-size: 12px;
}

.rb-stream-row:last-child { border-bottom: none; }
.rb-stream-row:hover { background: #eef4fb; box-shadow: inset 3px 0 0 #009fdb; }

.rb-stream-arrow {
    display: inline-block;
    font-size: 10px;
    width: 12px;
    text-align: center;
    flex-shrink: 0;
    transition: transform 0.2s;
    color: #9ca3af;
}

.rb-stream-arrow.expanded { transform: rotate(90deg); }

.rb-stream-ctn {
    font-family: 'Courier New', monospace;
    font-size: 11px;
    color: #4b5563;
    min-width: 90px;
    flex-shrink: 0;
}

.rb-stream-chip {
    display: inline-block;
    padding: 1px 7px;
    border-radius: 9px;
    font-size: 10px;
    font-weight: 600;
    background: #e0f2fe;
    color: #075985;
    white-space: nowrap;
    flex-shrink: 0;
}

.rb-stream-meta {
    color: #6b7280;
    font-size: 13px;
    font-weight: 500;
    white-space: nowrap;
    flex-shrink: 0;
}

.rb-stream-months {
    font-size: 11px;
    color: #9ca3af;
    flex-shrink: 0;
    white-space: nowrap;
}

.rb-stream-lifetime {
    font-weight: 700;
    font-size: 13px;
    color: #1f2937;
    font-variant-numeric: tabular-nums;
    text-align: right;
    flex-shrink: 0;
    white-space: nowrap;
}

.rb-stream-avg {
    font-size: 11px;
    color: #9ca3af;
    font-variant-numeric: tabular-nums;
    text-align: right;
    flex-shrink: 0;
    white-space: nowrap;
}

/* MRC column on stream row — same weight as lifetime but muted */
.rb-stream-mrc {
    font-size: 11px;
    color: #6b7280;
    font-variant-numeric: tabular-nums;
    flex-shrink: 0;
    white-space: nowrap;
}

/* Small "Residual:" / "MRC:" prefix labels inside stream row cells */
.rb-stream-col-label {
    font-size: 10px;
    font-weight: 400;
    color: #9ca3af;
    margin-right: 2px;
}

.rb-stream-lastpaid {
    font-size: 11px;
    color: #9ca3af;
    flex-shrink: 0;
    white-space: nowrap;
}

.rb-stream-actions {
    margin-left: auto;
    flex-shrink: 0;
    /* 28×28 icon button matching CRM action-button conventions */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    min-width: 28px;
    min-height: 28px;
    padding: 0;
    background: #f3f2f1;
    border: 1px solid #d2ccc8;
    border-radius: 4px;
    cursor: pointer;
    color: #323130;
    transition: background 0.12s, border-color 0.12s;
}
.rb-stream-actions:hover {
    background: #e8e6e4;
    border-color: #b3aeaa;
}
.rb-stream-actions:focus-visible {
    outline: 2px solid #0176D3;
    outline-offset: 2px;
}

.rb-stream-body {
    display: none;
    background: #f9fafb;
    border-bottom: 1px solid #e5e7eb;
    padding: 12px 20px;
}

.rb-stream-body.expanded { display: block; }

/* ── 2. RESIDUAL BOOK — STREAM HISTORY TABLE ───────────────── */
.rb-history-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
    color: #374151;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    overflow: hidden;
}

.rb-history-table th {
    background: #f8f9fa;
    padding: 8px 10px;
    text-align: left;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    color: #1b2a4a;
    border-bottom: 2px solid #e5e7eb;
    white-space: nowrap;
}

.rb-history-row td {
    padding: 7px 10px;
    border-bottom: 1px solid #f0f0f0;
    vertical-align: middle;
}

.rb-history-row:last-child td { border-bottom: none; }
.rb-history-row:hover td { background: #eef4fb; }
.rb-history-row:hover td:first-child { box-shadow: inset 3px 0 0 #009fdb; }

/* Row-level tints — the three visual states */
.rb-history-residual   { background: #fff; }                     /* neutral white — income */
.rb-history-chargeback { background: #fff8f8; }                  /* red-wash — money leaves */
.rb-history-adjustment { background: #f4f8ff; }                  /* blue-wash — correction */

/* Bucket pill reuse — matches .res-bucket-* palette */
.rb-bucket-chip {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 9px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    white-space: nowrap;
    border: 1px solid transparent;
}

.rb-bucket-residual   { background: #ede9fe; color: #5b21b6; border-color: #c4b5fd; }
.rb-bucket-chargeback { background: #fee2e2; color: #991b1b; border-color: #fca5a5; }
.rb-bucket-adjustment { background: #f3f4f6; color: #4b5563; border-color: #d1d5db; }

/* Money cells */
.rb-money {
    text-align: right;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.rb-neg { color: #EA001E; }
.rb-pos { color: #2E844A; }

/* ── 2. RESIDUAL BOOK — MODALS ─────────────────────────────── */
/*    Backdrop + panel match .modal-overlay / .modal-content exactly */
.rb-modal-backdrop {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.35);
    z-index: 9990;
    animation: fadeIn 0.15s ease;
}

.rb-modal {
    position: fixed;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    z-index: 9991;
    background: #fff;
    border-radius: 14px;
    padding: 24px;
    width: min(560px, 94vw);
    max-height: 86vh;
    overflow-y: auto;
    box-shadow: 0 20px 60px rgba(0,0,0,0.2), 0 0 0 1px rgba(0,0,0,0.05);
    animation: popFadeIn 0.2s ease-out;
}

.rb-modal-content {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.rb-sale-results {
    max-height: 260px;
    overflow-y: auto;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
}

.rb-sale-result {
    padding: 10px 14px;
    border-bottom: 1px solid #f0f0f0;
    cursor: pointer;
    font-size: 13px;
    color: #1f2937;
    transition: background 0.12s;
}

.rb-sale-result:last-child { border-bottom: none; }
.rb-sale-result:hover { background: #eef4fb; box-shadow: inset 3px 0 0 #009fdb; }

.rb-sale-result-selected {
    background: #e3f2fd;
    color: #0176D3;
    font-weight: 600;
}

/* ── 2. RESIDUAL BOOK — EMPTY / LOADING STATES ─────────────── */
.rb-empty {
    padding: 48px 24px;
    text-align: center;
    color: #9ca3af;
    font-size: 14px;
    background: #fff;
}

.rb-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 40px 24px;
    color: #6b7280;
    font-size: 14px;
}

.rb-skeleton {
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: rb-shimmer 1.4s ease-in-out infinite;
    border-radius: 4px;
    height: 14px;
}

@keyframes rb-shimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

@media (prefers-reduced-motion: reduce) {
    .rb-skeleton { animation: none; background: #f0f0f0; }
    .rb-company-arrow,
    .rb-stream-arrow { transition: none; }
}

/* ── 3. RESIDUAL STATUS CHIPS (shared) ─────────────────────── */
/*    Exactly matches .status-badge: same padding, radius, font-weight.
      Colors mirror .status-paid / .status-cancelled / .status-default. */
.residual-status-chip {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.3px;
    white-space: nowrap;
}

.residual-status-active  { background: #e6f4ea; color: #1e7e34; }
.residual-status-churned { background: #fce4e6; color: #c62828; }
.residual-status-ended   { background: #f0f0f0; color: #6b7280; }

/* ── 4. BATCH HISTORY (.bh-*) ──────────────────────────────── */
/*
 * Design language: restrained financial-tool aesthetic.
 * Dense without cramped. Tabular figures on all money.
 * Full rule set is in the "BATCH HISTORY MODERNIZATION" block below
 * (after the Residuals Wizard block). These top stubs exist for cascade order.
 */
.bh-view { padding: 0 0 24px; }

/* Wrap the table — kept for backwards compat */
.bh-table-container {
    background: #fff;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}

.bh-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
    color: #374151;
}

.bh-row td {
    padding: 10px 12px;
    border-bottom: 1px solid #f0f1f3;
    vertical-align: middle;
    color: #374151;
}

.bh-row { transition: box-shadow 0.15s; }
.bh-row:last-child td { border-bottom: none; }
.bh-row:hover td { background: #f8fafd; }
.bh-row:hover td:first-child { box-shadow: inset 3px 0 0 #009fdb; }

/* ============================================================
   RESIDUALS WIZARD — MODERNIZATION 2026-05-11
   Purely cosmetic. No data / logic / event-handler changes.
   All new classes are res-* prefixed. Existing classes preserved.
   ============================================================ */

/* ── Summary KPI strip (replaces flat text row) ───────────────────────────── */
.res-summary-bar-v2 {
    padding: 14px 24px 10px;
    background: #fff;
    border-bottom: 1px solid #e5e7eb;
}

.res-kpi-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 10px;
}

.res-kpi-card {
    display: flex;
    flex-direction: column;
    gap: 2px;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 10px 14px;
    /* 2026-05-12: flex: 1 1 0 makes every card claim an equal share of the
       strip's width, regardless of label-text length. min-width keeps the
       value readable on narrow viewports; min-width: 0 on the flex basis
       allows shrinking inside the strip when many cards exist. */
    flex: 1 1 0;
    min-width: 140px;
    position: relative;
    border-top: 3px solid transparent;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
    transition: box-shadow 0.15s, transform 0.15s;
}
.res-kpi-card:hover {
    box-shadow: 0 3px 8px rgba(0,0,0,0.08);
    transform: translateY(-1px);
}

/* Top-edge bucket accent colors */
.res-kpi-residual  { border-top-color: #5b21b6; }
.res-kpi-onetime   { border-top-color: #075985; }
.res-kpi-chargeback { border-top-color: #991b1b; }
.res-kpi-feature   { border-top-color: #7c3aed; }
.res-kpi-adjustment { border-top-color: #4b5563; }
.res-kpi-total     { border-top-color: #009fdb; }
.res-kpi-unclassified { border-top-color: #854d0e; }

.res-kpi-label {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #6b7280;
    white-space: nowrap;
}

.res-kpi-value {
    font-size: 18px;
    font-weight: 700;
    color: #1b2a4a;
    font-variant-numeric: tabular-nums;
    line-height: 1.15;
}

.res-kpi-sub {
    font-size: 10px;
    color: #9ca3af;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.res-kpi-card-negative .res-kpi-value { color: #991b1b; }
.res-kpi-card-negative { border-top-color: #991b1b; }

/* Match-status distribution chips — second row of summary bar */
.res-summary-statuses-v2 {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    color: #6b7280;
    padding: 4px 0 0;
}

.res-stat-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: 10px;
    border: 1px solid transparent;
    font-size: 11px;
    font-weight: 500;
    white-space: nowrap;
}

.res-stat-chip-count {
    font-weight: 700;
}

/* Chips inherit linked-variant palette */
.res-stat-paid     { background: #f3faf4; color: #1e7e34; border-color: #1e7e34; }
.res-stat-pending  { background: #fffdf0; color: #856404; border-color: #856404; }
.res-stat-partial  { background: #fff8f2; color: #e65100; border-color: #e65100; }
.res-stat-disputed { background: #fff5f5; color: #c62828; border-color: #c62828; }
.res-stat-nomatch  { background: #f8f8f8; color: #6b7280; border-color: #9ca3af; }
.res-stat-cancelled { background: #fee2e2; color: #991b1b; border-color: #fca5a5; }

/* ── Table row modernization ──────────────────────────────────────────────── */

/* Linear-style hover — elevation instead of heavy bg change */
.res-table tbody tr.res-data-row {
    transition: background 0.1s, box-shadow 0.1s;
    cursor: pointer;
}
.res-table tbody tr.res-data-row:hover {
    background: #f5f9ff !important;
    box-shadow: inset 3px 0 0 #009fdb;
}
.res-table tbody tr.res-data-row:hover td { box-shadow: none; }

/* Two-line cell primaries: customer name */
.res-cell-primary {
    font-size: 12px;
    font-weight: 600;
    color: #1f2937;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 160px;
    display: block;
}

.res-cell-secondary {
    font-size: 10px;
    color: #9ca3af;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
    margin-top: 1px;
}

/* Amount columns: tabular figures + right-align */
.res-amount, .res-mrc, .res-pshare, .res-dicom-net {
    font-variant-numeric: tabular-nums;
    text-align: right;
    white-space: nowrap;
}

/* DiCom-net column */
.res-dicom-net { min-width: 72px; }

/* Classifier reason — surfaces below bucket chip as subtle annotation */
.res-classifier-reason {
    display: block;
    font-size: 10px;
    color: #9ca3af;
    font-style: italic;
    margin-top: 2px;
    max-width: 160px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.res-classifier-reason-flipped {
    color: #b45309;
}

/* Bucket sub-label modernization — replaces inline style="color:#666" */
.res-bucket-sublabel {
    display: block;
    font-size: 10px;
    color: #9ca3af;
    margin-top: 2px;
    line-height: 1.3;
}
.res-bucket-sublabel-override {
    color: #b45309;
    font-style: italic;
}
.res-bucket-sublabel-flip {
    color: #b45309;
    font-style: italic;
}

/* ── Needs-Attention panel — modernized ───────────────────────────────────── */

.res-needs-attention-panel-v2 {
    margin: 18px 24px 24px;
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid #e5e7eb;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    background: #fff;
}

/* Panel header */
.res-na-header-v2 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px 12px;
    background: #f9fafb;
    border-bottom: 1px solid #e5e7eb;
    gap: 12px;
    flex-wrap: wrap;
}

.res-na-title-v2 {
    margin: 0;
    font-size: 14px;
    font-weight: 700;
    color: #1b2a4a;
    display: flex;
    align-items: center;
    gap: 8px;
}

.res-na-title-icon {
    font-size: 16px;
    line-height: 1;
}

.res-na-sub-v2 {
    margin: 2px 0 0;
    font-size: 11px;
    color: #6b7280;
}

/* Linked & Ready section — clear green accent */
.res-na-section-v2 {
    border-top: 1px solid #e5e7eb;
    background: #fff;
}

.res-na-section-v2:first-of-type {
    border-top: none;
}

.res-na-section-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px 8px;
    background: #f9fafb;
    border-bottom: 1px solid #f0f0f0;
    flex-wrap: wrap;
}

/* Sticky section headers for long panels */
.res-na-section-header-sticky {
    position: sticky;
    top: 0;
    z-index: 1;
}

.res-na-section-label {
    font-size: 12px;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 6px;
}

.res-na-section-count-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 18px;
    padding: 0 5px;
    border-radius: 9px;
    font-size: 10px;
    font-weight: 700;
    background: #e5e7eb;
    color: #374151;
}

/* Linked section: green accent */
.res-na-section-v2.res-na-linked .res-na-section-header { background: #f0fdf4; border-bottom-color: #d1fae5; }
.res-na-section-v2.res-na-linked .res-na-section-label   { color: #15803d; }
.res-na-section-v2.res-na-linked .res-na-section-count-badge { background: #bbf7d0; color: #065f46; }

/* Chargeback section: red */
.res-na-section-v2.res-na-chargeback .res-na-section-header { background: #fff5f5; border-bottom-color: #fecaca; }
.res-na-section-v2.res-na-chargeback .res-na-section-label   { color: #991b1b; }
.res-na-section-v2.res-na-chargeback .res-na-section-count-badge { background: #fee2e2; color: #991b1b; }

/* Disputed: amber */
.res-na-section-v2.res-na-disputed .res-na-section-header { background: #fffbeb; border-bottom-color: #fde68a; }
.res-na-section-v2.res-na-disputed .res-na-section-label   { color: #92400e; }
.res-na-section-v2.res-na-disputed .res-na-section-count-badge { background: #fef3c7; color: #92400e; }

/* Partial: blue */
.res-na-section-v2.res-na-partial .res-na-section-header { background: #eff6ff; border-bottom-color: #bfdbfe; }
.res-na-section-v2.res-na-partial .res-na-section-label   { color: #1d4ed8; }
.res-na-section-v2.res-na-partial .res-na-section-count-badge { background: #dbeafe; color: #1d4ed8; }

/* No-Match One-Time: purple */
.res-na-section-v2.res-na-nomatch .res-na-section-header { background: #f5f3ff; border-bottom-color: #e9d5ff; }
.res-na-section-v2.res-na-nomatch .res-na-section-label   { color: #6d28d9; }
.res-na-section-v2.res-na-nomatch .res-na-section-count-badge { background: #ede9fe; color: #5b21b6; }

.res-na-section-help-v2 {
    padding: 4px 16px 8px;
    font-size: 11px;
    color: #6b7280;
    border-bottom: 1px solid #f3f4f6;
    margin: 0;
}

/* NA table — inherits table reset from .res-na-table */
.res-na-table-v2 {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
    color: #374151;
}
.res-na-table-v2 thead tr { background: #f9fafb; }
.res-na-table-v2 th {
    padding: 6px 10px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #6b7280;
    border-bottom: 2px solid #e5e7eb;
    text-align: left;
    white-space: nowrap;
}
.res-na-table-v2 td {
    padding: 8px 10px;
    border-bottom: 1px solid #f3f4f6;
    vertical-align: middle;
}
.res-na-table-v2 tbody tr:last-child td { border-bottom: none; }
.res-na-table-v2 tbody tr:hover td { background: #f5f9ff; }
.res-na-table-v2 th.r, .res-na-table-v2 td.r { text-align: right; font-variant-numeric: tabular-nums; }

/* NA action cell */
.res-na-action-cell {
    white-space: nowrap;
    text-align: right;
}
.res-na-action-cell .res-btn { margin-left: 4px; }
.res-na-action-cell .res-btn:first-child { margin-left: 0; }

/* NA row done — faded confirmed state */
.res-na-row-done-v2 td { background: #fafafa !important; color: #9ca3af; }
.res-na-row-done-v2 td:nth-child(1),
.res-na-row-done-v2 td:nth-child(2),
.res-na-row-done-v2 td:nth-child(3) { text-decoration: line-through; opacity: 0.7; }
.res-na-done-badge-v2 {
    font-weight: 600;
    font-size: 11px;
    white-space: nowrap;
    color: #15803d;
    display: inline-flex;
    align-items: center;
    gap: 3px;
}
.res-na-row-skipped-v2 .res-na-done-badge-v2 { color: #6b7280; }
.res-na-section-done-v2 { opacity: 0.6; }
.res-na-section-done-v2 .res-na-section-label::after {
    content: " — all clear";
    font-weight: 400;
    color: #15803d;
    font-size: 10px;
    margin-left: 4px;
}

/* ── Process All error surfacing (Task #2) ────────────────────────────────── */
/* Light red flag on a panel row whose bulk-confirm threw (controls left intact). */
.res-na-row-error-v2 td { background: #fef2f2 !important; }
.res-na-row-error-v2 td:first-child { box-shadow: inset 3px 0 0 #dc2626; }

/* Dedicated error detail panel rendered below the results table. */
.res-process-errors-panel {
    margin: 16px 0 0;
    border: 1px solid #fecaca;
    border-left: 4px solid #dc2626;
    border-radius: 8px;
    background: #fef2f2;
    padding: 14px 18px;
}
.res-pe-header {
    font-weight: 700;
    font-size: 14px;
    color: #b91c1c;
    display: flex;
    align-items: center;
    gap: 6px;
}
.res-pe-sub {
    margin: 4px 0 10px;
    font-size: 12px;
    color: #7f1d1d;
}
.res-pe-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
}
.res-pe-table th {
    text-align: left;
    color: #991b1b;
    font-weight: 600;
    border-bottom: 1px solid #fecaca;
    padding: 4px 8px;
}
.res-pe-table td {
    padding: 6px 8px;
    border-bottom: 1px solid #fee2e2;
    color: #450a0a;
    vertical-align: top;
}
.res-pe-table tr:last-child td { border-bottom: none; }
.res-pe-idx { font-variant-numeric: tabular-nums; color: #b91c1c; white-space: nowrap; }
.res-pe-ctx { color: #374151; }
.res-pe-code { color: #9ca3af; font-size: 11px; }

/* ── Bulk summary bar modernization ───────────────────────────────────────── */
.res-bulk-bar-v2 {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px 16px;
    padding: 10px 24px;
    background: #f9fafb;
    border-bottom: 1px solid #e5e7eb;
    font-size: 12px;
    color: #374151;
}

.res-bulk-ready-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: #f0fdf4;
    color: #15803d;
    border: 1px solid #bbf7d0;
    border-radius: 6px;
    padding: 4px 10px;
    font-size: 12px;
    font-weight: 600;
}

.res-bulk-attn-group {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

/* ── Skeleton loading rows ────────────────────────────────────────────────── */
@keyframes res-skeleton-pulse {
    0%   { opacity: 0.55; }
    50%  { opacity: 1; }
    100% { opacity: 0.55; }
}
@media (prefers-reduced-motion: reduce) {
    @keyframes res-skeleton-pulse { from { opacity: 0.7; } to { opacity: 0.7; } }
}

.res-skeleton-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 24px;
    border-bottom: 1px solid #f0f0f0;
    animation: res-skeleton-pulse 1.4s ease-in-out infinite;
}
.res-skeleton-row + .res-skeleton-row { animation-delay: 0.15s; }
.res-skeleton-row + .res-skeleton-row + .res-skeleton-row { animation-delay: 0.30s; }

.res-skeleton-chip {
    height: 20px;
    border-radius: 10px;
    background: #e5e7eb;
    flex-shrink: 0;
}
.res-skeleton-chip-sm  { width: 60px; }
.res-skeleton-chip-md  { width: 90px; }
.res-skeleton-chip-lg  { width: 130px; }
.res-skeleton-bar {
    height: 12px;
    border-radius: 4px;
    background: #e5e7eb;
    flex-shrink: 0;
}
.res-skeleton-bar-sm  { width: 48px; }
.res-skeleton-bar-md  { width: 80px; }
.res-skeleton-bar-lg  { width: 110px; }
.res-skeleton-spacer  { flex: 1; }

/* ── Paired net-zero badge modernization ─────────────────────────────────── */
/* The inline-style-based badge is preserved for backward compat; this class
   offers the same semantics via a CSS class for new code. */
.res-status-paired-v2 {
    display: inline-block;
    font-size: 10px;
    background: #fef3c7;
    color: #92400e;
    border: 1px solid #fde68a;
    border-radius: 8px;
    padding: 1px 6px;
    font-weight: 600;
    white-space: nowrap;
}

/* ── NA confirm-all section CTA positioning ─────────────────────────────── */
.res-na-cta-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1 1 auto;
    justify-content: flex-end;
}

/* ── Upload modal modernization additions ────────────────────────────────── */
.res-dropzone-hint {
    font-size: 11px;
    color: #9ca3af;
    margin-top: 4px;
}

/* Queue file-type badge modernization */
.res-queue-type-badge-v2 {
    padding: 2px 8px;
    border-radius: 8px;
    font-size: 10px;
    font-weight: 700;
    background: #e0f2fe;
    color: #075985;
    white-space: nowrap;
    flex-shrink: 0;
    border: 1px solid #bae6fd;
}

/* ── Loading state: skeleton wrapper ─────────────────────────────────────── */
.res-loading-v2 {
    padding: 24px;
}
.res-loading-v2-header {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #6b7280;
    font-size: 13px;
    margin-bottom: 18px;
}

/* ── Classifier reason chip on bucket cell ───────────────────────────────── */
.res-classifier-badge {
    display: inline-block;
    font-size: 9.5px;
    color: #6b7280;
    background: #f3f4f6;
    border-radius: 4px;
    padding: 0 4px;
    margin-left: 3px;
    vertical-align: middle;
    font-style: normal;
    font-weight: 500;
    white-space: nowrap;
    max-width: 100px;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ── Focus/hover improvements on action buttons in table ─────────────────── */
.res-btn:hover:not(:disabled) {
    filter: brightness(0.94);
}
.res-btn:focus-visible {
    outline: 2px solid #0176D3;
    outline-offset: 2px;
}

/* ── Section-done "all clear" modernization ────────────────────────────────  */
.res-na-all-clear {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 16px;
    font-size: 12px;
    color: #15803d;
    font-weight: 600;
}
.res-na-all-clear-icon { font-size: 14px; }

/* No-Match One-Time section — alias for res-na-nomatch so both class names work */
.res-na-section-v2.res-na-nomatch-onetime .res-na-section-header { background: #f5f3ff; border-bottom-color: #e9d5ff; }
.res-na-section-v2.res-na-nomatch-onetime .res-na-section-label   { color: #6d28d9; }
.res-na-section-v2.res-na-nomatch-onetime .res-na-section-count-badge { background: #ede9fe; color: #5b21b6; }

/* Loading state label row (spinner + text) */
.res-loading-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: #6b7280;
    margin-bottom: 20px;
}

/* END MODERNIZATION 2026-05-11 */

/* ══════════════════════════════════════════════════════════════
   BATCH HISTORY MODERNIZATION 2026-05-11
   Purely cosmetic — no data/logic/event-handler changes.
   All new classes are bh-* prefixed. Existing classes preserved.
   Design: Apple Finance / Stripe Dashboard / Linear table.
   ══════════════════════════════════════════════════════════════ */

/* ── Header ──────────────────────────────────────────────────────────────── */

.bh-header {
    padding: 16px 0 0;
    margin-bottom: 2px;
}
.bh-header-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-bottom: 12px;
    flex-wrap: wrap;
}
.bh-title {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 16px;
    font-weight: 700;
    color: #1b2a4a;
    margin: 0;
    letter-spacing: -0.01em;
}
.bh-title svg { color: #009fdb; flex-shrink: 0; }

/* Batch count pill — top right */
.bh-total-badge {
    display: inline-flex;
    align-items: baseline;
    gap: 4px;
    background: #f0f9ff;
    border: 1px solid #bae6fd;
    border-radius: 20px;
    padding: 3px 10px;
    white-space: nowrap;
}
.bh-total-num {
    font-size: 14px;
    font-weight: 700;
    color: #075985;
    font-variant-numeric: tabular-nums;
}
.bh-total-label {
    font-size: 11px;
    font-weight: 500;
    color: #0284c7;
}

/* ── Filter bar ──────────────────────────────────────────────────────────── */

.bh-filter-bar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px 8px;
    padding: 8px 12px;
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    margin-bottom: 12px;
}

/* Filter group clusters the three selects */
.bh-filter-group {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
}

/* Select wrapper — positions chevron inside native select */
.bh-select-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
}
.bh-select-icon {
    position: absolute;
    right: 7px;
    top: 50%;
    transform: translateY(-50%);
    color: #9ca3af;
    pointer-events: none;
}
.bh-filter-bar .bh-filter-select {
    appearance: none;
    -webkit-appearance: none;
    padding-right: 24px;
    height: 30px;
    padding-left: 8px;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 500;
    color: #374151;
    background: #fff;
    cursor: pointer;
    transition: border-color 0.13s, box-shadow 0.13s;
}
.bh-filter-bar .bh-filter-select:focus-visible {
    outline: none;
    border-color: #009fdb;
    box-shadow: 0 0 0 2px rgba(0,159,219,0.2);
}

/* Search input wrapper */
.bh-search-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
    flex: 1;
    min-width: 180px;
    max-width: 280px;
}
.bh-search-icon {
    position: absolute;
    left: 8px;
    color: #9ca3af;
    pointer-events: none;
}
.bh-search-input { padding-left: 28px !important; width: 100%; }

/* ── Hidden-hint bar ─────────────────────────────────────────────────────── */

.bh-hidden-hint {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    margin-bottom: 10px;
    background: #fffbeb;
    border: 1px solid #fde68a;
    border-radius: 6px;
    font-size: 12px;
    color: #92400e;
}
.bh-hidden-hint svg { flex-shrink: 0; }
.bh-btn-link {
    background: none;
    border: none;
    padding: 0;
    font-size: 12px;
    font-weight: 600;
    color: #009fdb;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 2px;
}
.bh-btn-link:focus-visible { outline: 2px solid #009fdb; outline-offset: 2px; border-radius: 2px; }

/* ── Table wrapper ───────────────────────────────────────────────────────── */

.bh-table-wrapper {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 1px 4px rgba(0,0,0,0.05);
}

/* ── Table header ────────────────────────────────────────────────────────── */

.bh-table thead { position: sticky; top: 0; z-index: 2; }

.bh-table th,
.bh-th {
    background: #f8f9fb;
    padding: 9px 12px;
    text-align: left;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: #1b2a4a;
    border-bottom: 2px solid #e5e7eb;
    white-space: nowrap;
    user-select: none;
}
.bh-th-num     { text-align: right; }
.bh-th-money   { text-align: right; }
.bh-th-actions { text-align: right; min-width: 180px; }

/* Subtle header tints matching body-cell bucket colors */
.bh-th-residual   { color: #166534; background: #f0fdf4; border-bottom-color: #bbf7d0; }
.bh-th-onetime    { color: #075985; background: #f0f9ff; border-bottom-color: #bae6fd; }
.bh-th-chargeback { color: #991b1b; background: #fef2f2; border-bottom-color: #fecaca; }
.bh-th-adjustment { color: #4b5563; background: #f9fafb; }
.bh-th-tsdtotal   { color: #1b2a4a; background: #f8f9fb; }

/* ── Batch ID cell ───────────────────────────────────────────────────────── */

.bh-cell-id { white-space: nowrap; min-width: 90px; }
.bh-id-block { display: flex; flex-direction: column; gap: 3px; }
.bh-id-num { font-weight: 700; color: #1b2a4a; font-size: 13px; font-variant-numeric: tabular-nums; }

/* Status pill */
.bh-status-pill {
    display: inline-block;
    padding: 1px 7px;
    border-radius: 10px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.2px;
    white-space: nowrap;
    text-transform: uppercase;
}
/* Legacy span — kept for any stale renders, hidden in modern markup */
.bh-status-badge { display: none; }

.bh-status-completed  { background: #dcfce7; color: #166534; }
.bh-status-draft      { background: #fef9c3; color: #854d0e; }
.bh-status-inprogress { background: #dbeafe; color: #1d4ed8; }

/* ── TSD cell ────────────────────────────────────────────────────────────── */

.bh-cell-tsd { white-space: nowrap; }
.bh-tsd-block { display: inline-flex; align-items: center; gap: 6px; }
.bh-tsd-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}
.bh-tsd-name { font-weight: 500; font-size: 13px; color: #374151; }

/* ── Date / number cells ─────────────────────────────────────────────────── */

.bh-cell-month,
.bh-cell-date {
    font-size: 12.5px;
    color: #6b7280;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}
.bh-cell-num {
    text-align: right;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    color: #6b7280;
    font-size: 13px;
}
.bh-cell-money {
    text-align: right;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* ── Money bucket column tints ───────────────────────────────────────────── */

/* Updated from f5fef5/f0f8ff/fff8f8/f4f4ff → aligned with res-bucket-* palette */
.bh-cell-residual   { background: #f0fdf4; color: #166534; font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; }
.bh-cell-onetime    { background: #f0f9ff; color: #075985; font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; }
.bh-cell-chargeback { background: #fef2f2; color: #991b1b; font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; }
.bh-cell-adjustment { background: #f9fafb; color: #4b5563; font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; }
.bh-cell-skipped    { text-align: right; font-variant-numeric: tabular-nums; color: #6b7280; white-space: nowrap; }

.bh-skipped-count {
    display: inline-block;
    margin-left: 4px;
    font-size: 10px;
    font-weight: 600;
    color: #6b7280;
    background: #f3f4f6;
    border-radius: 8px;
    padding: 0 5px;
    vertical-align: middle;
}

.bh-cell-tsd-total {
    font-weight: 700;
    color: #1f2937;
    text-align: right;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.bh-cell-negative { color: #dc2626 !important; }

/* Backward-compat alias */
.bh-cell-total {
    font-weight: 700;
    color: #1f2937;
    text-align: right;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* ── Totals footer ───────────────────────────────────────────────────────── */

.bh-totals-row td {
    padding: 9px 12px;
    border-bottom: 2px solid #e5e7eb;
    background: #f8f9fb;
    font-size: 12px;
}
.bh-totals-label {
    font-weight: 700;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    color: #6b7280;
    white-space: nowrap;
}
.bh-totals-cell { font-weight: 700; }

/* ── Actions column ──────────────────────────────────────────────────────── */

.bh-cell-actions {
    white-space: nowrap;
    text-align: right;
    padding-right: 14px !important;
}
.bh-action-group {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

/* All action buttons share a base */
.bh-action-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    height: 28px;
    padding: 0 10px;
    font-size: 12px;
    font-weight: 500;
    font-family: inherit;
    border-radius: 6px;
    border: 1px solid transparent;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.13s, border-color 0.13s, color 0.13s, box-shadow 0.13s;
    line-height: 1;
}
.bh-action-btn:focus-visible { outline: 2px solid #009fdb; outline-offset: 2px; }

/* Primary — View Rows */
.bh-action-primary { background: #009fdb; color: #fff; border-color: #009fdb; }
.bh-action-primary:hover { background: #0088c2; border-color: #0088c2; box-shadow: 0 1px 3px rgba(0,0,0,0.12); }

/* Secondary — Export */
.bh-action-secondary { background: #fff; color: #374151; border-color: #d1d5db; }
.bh-action-secondary:hover { background: #f3f4f6; border-color: #9ca3af; color: #1f2937; }

/* Ghost — Reopen */
.bh-action-ghost { background: transparent; color: #6b7280; border-color: #e5e7eb; }
.bh-action-ghost:hover { background: #f3f4f6; color: #1f2937; border-color: #d1d5db; }

/* Danger — Cancel (icon only) */
.bh-action-danger { background: transparent; color: #9ca3af; border-color: transparent; padding: 0 6px; }
.bh-action-danger:hover { background: #fef2f2; color: #dc2626; border-color: #fecaca; }

/* Backward-compat: old class names still exist — no styles conflict because
   event-delegate uses data-action, not class selectors */
.bh-btn-cancel  { /* handled by .bh-action-danger  */ }
.bh-btn-reopen  { /* handled by .bh-action-ghost   */ }
.bh-btn-view    { /* handled by .bh-action-primary  */ }
.bh-btn-export  { /* handled by .bh-action-secondary */ }
.bh-btn-clear   { /* handled by res-btn-* chain */ }
.bh-btn-cleanup { /* handled by res-btn-* chain */ }

/* ── Pagination ──────────────────────────────────────────────────────────── */

.bh-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 14px 0 2px;
    font-size: 12px;
    color: #6b7280;
    flex-wrap: wrap;
}
.bh-btn-page {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.bh-btn-page:disabled { opacity: 0.4; cursor: not-allowed; }

.bh-page-info {
    display: inline-flex;
    align-items: baseline;
    gap: 4px;
    font-size: 12px;
    color: #6b7280;
}
.bh-page-range { font-weight: 600; color: #374151; font-variant-numeric: tabular-nums; }
.bh-page-of    { color: #6b7280; }
.bh-page-num   { color: #9ca3af; font-size: 11px; }

/* ── Empty state ─────────────────────────────────────────────────────────── */

.bh-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 56px 24px;
    text-align: center;
}
.bh-empty-icon { color: #d1d5db; margin-bottom: 4px; }
.bh-empty-heading { font-size: 14px; font-weight: 700; color: #374151; margin: 0; }
.bh-empty-msg { font-size: 13px; color: #6b7280; margin: 0; max-width: 380px; line-height: 1.5; }

/* ── Error state ─────────────────────────────────────────────────────────── */

.bh-error {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 48px 24px;
    text-align: center;
    background: #fff;
    border: 1px solid #fecaca;
    border-radius: 10px;
    margin-top: 8px;
}
.bh-error-icon     { color: #f87171; margin-bottom: 4px; }
.bh-error-heading  { font-size: 14px; font-weight: 700; color: #991b1b; margin: 0; }
.bh-error-msg      { font-size: 12px; color: #6b7280; margin: 0; max-width: 400px; }
.bh-btn-retry { margin-top: 4px; display: inline-flex; align-items: center; gap: 4px; }

/* ── Skeleton loading ────────────────────────────────────────────────────── */

.bh-loading { opacity: 1; }

@keyframes bh-shimmer {
    0%   { background-position: -600px 0; }
    100% { background-position:  600px 0; }
}
.bh-skel {
    display: inline-block;
    height: 14px;
    border-radius: 4px;
    background: linear-gradient(90deg, #f0f1f3 25%, #e8eaed 50%, #f0f1f3 75%);
    background-size: 600px 100%;
    animation: bh-shimmer 1.4s infinite linear;
}
.bh-skeleton-row td {
    padding: 11px 12px;
    border-bottom: 1px solid #f0f1f3;
}
.bh-filter-bar--skeleton { pointer-events: none; }

/* ── Modal (Batch Rows) ──────────────────────────────────────────────────── */

/* Batch History modal — updated to flex layout so header + footer are sticky */
.bh-modal {
    position: fixed;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    z-index: 9991;
    background: #fff;
    border-radius: 14px;
    padding: 0;
    width: min(760px, 96vw);
    max-height: 88vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 20px 60px rgba(0,0,0,0.2), 0 0 0 1px rgba(0,0,0,0.05);
    animation: popFadeIn 0.2s ease-out;
}
.bh-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid #e5e7eb;
    flex-shrink: 0;
    background: #f9fafb;
    border-radius: 14px 14px 0 0;
}
.bh-modal-title {
    font-size: 14px;
    font-weight: 700;
    color: #1b2a4a;
    margin: 0;
}
.bh-modal-close {
    background: none;
    border: none;
    font-size: 16px;
    color: #9ca3af;
    cursor: pointer;
    padding: 4px;
    border-radius: 4px;
    line-height: 1;
    transition: color 0.13s, background 0.13s;
}
.bh-modal-close:hover { color: #374151; background: #f3f4f6; }
.bh-modal-close:focus-visible { outline: 2px solid #009fdb; outline-offset: 2px; }

.bh-modal-body { overflow-y: auto; padding: 16px 20px; flex: 1; }

.bh-modal-loading {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 32px;
    color: #6b7280;
    font-size: 13px;
    justify-content: center;
}
.bh-modal-empty { text-align: center; color: #6b7280; font-size: 13px; padding: 32px; margin: 0; }
.bh-modal-error { text-align: center; padding: 24px; }
.bh-modal-error p { color: #991b1b; font-size: 13px; margin: 0 0 10px; }

.bh-modal-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 20px;
    border-top: 1px solid #e5e7eb;
    flex-shrink: 0;
    background: #f9fafb;
    border-radius: 0 0 14px 14px;
}
.bh-rows-count { font-size: 12px; color: #6b7280; font-weight: 500; }
.bh-modal-close-btn { display: inline-flex; align-items: center; gap: 4px; }

/* Spinner (modal loading) */
.bh-spinner {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid #e5e7eb;
    border-top-color: #009fdb;
    border-radius: 50%;
    animation: spin 0.7s linear infinite;
    flex-shrink: 0;
}

/* ── Modal rows table ────────────────────────────────────────────────────── */

.bh-rows-table-wrapper { overflow-x: auto; }
.bh-rows-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 11.5px;
    color: #374151;
    margin-top: 0;
}
.bh-rows-table th {
    background: #f3f4f6;
    padding: 7px 8px;
    text-align: left;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    border-bottom: 2px solid #e5e7eb;
    white-space: nowrap;
    color: #1b2a4a;
    position: sticky;
    top: 0;
}
.bh-rows-table td {
    padding: 6px 8px;
    border-bottom: 1px solid #f0f0f0;
    vertical-align: middle;
}
.bh-rows-table tbody tr:hover td { background: #f8fafd; }
.bh-rows-table tbody tr:hover td:first-child { box-shadow: inset 3px 0 0 #009fdb; }

/* END BATCH HISTORY MODERNIZATION 2026-05-11 */

/* ── 5. RESPONSIVE BREAKPOINTS ─────────────────────────────── */

/* 1280px — hide product mix on company header (still visible in stream rows) */
@media (max-width: 1280px) {
    .rb-company-productmix { display: none; }
}

/* 1180px — hide 5th and 6th KPI cards */
@media (max-width: 1180px) {
    .rb-kpi-strip .rb-kpi-card:nth-child(5),
    .rb-kpi-strip .rb-kpi-card:nth-child(6) { display: none; }
}

/* 1100px — filter bar wraps; constrain search min-width */
@media (max-width: 1100px) {
    .rb-filter-bar { row-gap: 8px; }
    .rb-filter-search { min-width: 150px; }
    .rb-sort { margin-left: 0; }
}

/* Below 1000px — simplified stream list; hide secondary columns */
@media (max-width: 999px) {
    .rb-stream-avg,
    .rb-stream-months,
    .rb-stream-lastpaid,
    .rb-stream-mrc { display: none; }

    .rb-kpi-strip .rb-kpi-card:nth-child(n+4) { display: none; }

    .rb-company-runrate { display: none; }

    /* Collapse sub-line on narrow screens — name row only */
    .rb-company-sub { display: none; }
    /* Hide "Residual Earned" text label; keep dollar figure */
    .rb-company-earned-label { display: none; }

    .bh-table th:nth-child(n+5),
    .bh-row td:nth-child(n+5) { display: none; }
}

/* ── Residual partner chip (in table Partner column) ────────────────────── */
.res-partner-cell {
    white-space: nowrap;
}
.res-partner-chip {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    user-select: none;
    border: 1px solid transparent;
    transition: box-shadow 0.1s, opacity 0.1s;
    white-space: nowrap;
    max-width: 140px;
    overflow: hidden;
    text-overflow: ellipsis;
}
.res-partner-chip:hover  { opacity: 0.85; box-shadow: 0 0 0 2px rgba(59,130,246,.35); }
.res-partner-chip:focus-visible { outline: 2px solid #3b82f6; outline-offset: 2px; }
/* Assigned — neutral blue: partner is known */
.res-partner-assigned {
    background: #eff6ff;
    color: #1d4ed8;
    border-color: #bfdbfe;
}
/* Unassigned — light gray: DiCom Direct, normal state */
.res-partner-unassigned {
    background: #f3f4f6;
    color: #6b7280;
    border-color: #e5e7eb;
    font-weight: 400;
}

/* ── Partner picker popup ────────────────────────────────────────────────── */
.res-partner-picker-popup {
    position: absolute;
    z-index: 9300;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0,0,0,.15);
    padding: 14px 16px;
    min-width: 260px;
    max-width: 340px;
    font-size: 13px;
    color: #1f2937;
}
.res-picker-title {
    font-size: 12px;
    font-weight: 700;
    color: #374151;
    margin-bottom: 10px;
    line-height: 1.4;
}
.res-picker-title strong { color: #111827; }
.res-picker-loading {
    font-size: 12px;
    color: #6b7280;
    padding: 6px 0;
}
.res-picker-select {
    width: 100%;
    padding: 6px 8px;
    border: 1px solid #d1d5db;
    border-radius: 5px;
    font-size: 13px;
    color: #111827;
    background: #fff;
    margin-bottom: 10px;
    box-sizing: border-box;
    cursor: pointer;
}
.res-picker-select:focus { outline: 2px solid #3b82f6; outline-offset: 1px; }
.res-picker-error {
    font-size: 11px;
    color: #dc2626;
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: 4px;
    padding: 5px 8px;
    margin-bottom: 8px;
}
.res-picker-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

/* ── Residual batch distribution table (Complete Batch dialog) ────────────── */
.res-dist-section {
    margin-top: 16px;
    border-top: 1px solid #d1fae5;
    padding-top: 12px;
}
.res-dist-header {
    font-size: 12px;
    font-weight: 700;
    color: #065f46;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 3px;
}
.res-dist-subtitle {
    font-size: 11px;
    color: #6b7280;
    margin-bottom: 10px;
}
.res-dist-table-wrap {
    overflow-x: auto;
}
.res-dist-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
    color: #1f2937;
}
.res-dist-table th,
.res-dist-table td {
    padding: 6px 10px;
    text-align: left;
    border-bottom: 1px solid #f0fdf4;
    white-space: nowrap;
}
.res-dist-table th {
    background: #f0fdf4;
    font-weight: 700;
    color: #065f46;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
.res-dist-num {
    text-align: right;
}
.res-dist-row:hover { background: #eef4fb; box-shadow: inset 3px 0 0 #009fdb; }
.res-dist-dicom-direct { background: #f9fafb; }
.res-dist-dicom-direct td { color: #6b7280; }
.res-dist-totals td {
    border-top: 2px solid #d1fae5;
    border-bottom: none;
    background: #ecfdf5;
    font-weight: 700;
    color: #065f46;
}

/* Below 640px — sub-tabs scroll horizontally, filter inputs full-width */
@media (max-width: 640px) {
    .res-subtabs { overflow-x: auto; padding: 0 16px; }
    .res-subtab  { padding: 10px 14px; }

    .rb-filter-bar { padding: 12px 16px; }
    .rb-filter-search,
    .rb-filter-select { min-width: 0; width: 100%; }

    .rb-company-header { flex-wrap: wrap; gap: 6px; }
    .rb-company-name   { font-size: 13px; }

    .bh-view { padding: 12px 16px; }
}

/* ── Rematch progress bar — 2px indeterminate stripe (per-row bucket override) */
.res-action-panel-rematching {
    position: relative;
}
.res-action-panel-rematching::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    height: 2px;
    width: 100%;
    background: linear-gradient(90deg, transparent 0%, #2563eb 50%, transparent 100%);
    background-size: 50% 100%;
    background-repeat: no-repeat;
    animation: res-rematch-stripe 1.2s linear infinite;
    z-index: 10;
    pointer-events: none;
}
.res-action-panel-rematching .res-action-button,
.res-action-panel-rematching button[data-action] {
    opacity: 0.6;
    pointer-events: none;
}
@keyframes res-rematch-stripe {
    0%   { background-position: -50% 0; }
    100% { background-position: 150% 0; }
}
@media (prefers-reduced-motion: reduce) {
    .res-action-panel-rematching::before { animation: none; background-position: 50% 0; }
}

/* ── END RESIDUALS TAB REDESIGN — Task #57 ─────────────────── */