/*
 * Clair CRM — modern Code Red Safety-themed overrides.
 * Loaded AFTER the legacy sales_styles.css and bootstrap.min.css, so declarations
 * here win when specificity ties.
 *
 * Palette is deliberately limited:
 *   --crs-red       primary brand (alerts, links, primary actions)
 *   --crs-charcoal  secondary surface (navbar, header)
 *   --crs-gray-*    neutral scale for text / backgrounds / borders
 *   success/warn/danger lane for commission status semantics
 */

:root {
    /* brand */
    --crs-red:         #C8102E;
    --crs-red-dark:    #8E0A20;
    --crs-red-light:   #FCE8EC;
    --crs-red-tint:    #F9D6DC;

    /* neutrals */
    --crs-black:       #0D0D0D;
    --crs-charcoal:    #1A1A1A;
    --crs-slate:       #2D2D2D;
    --crs-gray-900:    #212529;
    --crs-gray-700:    #495057;
    --crs-gray-600:    #6C757D;
    --crs-gray-500:    #ADB5BD;
    --crs-gray-400:    #CED4DA;
    --crs-gray-300:    #DEE2E6;
    --crs-gray-200:    #E9ECEF;
    --crs-gray-100:    #F8F9FA;
    --crs-white:       #FFFFFF;

    /* semantic */
    --crs-success:     #2E8B57;
    --crs-success-bg:  #E8F5EE;
    --crs-warning:     #D97706;
    --crs-warning-bg:  #FEF5E7;
    --crs-danger:      #B91C1C;
    --crs-danger-bg:   #FDECEA;
    --crs-info:        #0C63E4;

    /* typography */
    --crs-font-body:   "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI",
                       Roboto, "Helvetica Neue", Arial, sans-serif;
    --crs-font-mono:   "JetBrains Mono", "Fira Code", Consolas, Monaco, monospace;

    /* spacing + depth */
    --crs-radius:      6px;
    --crs-radius-lg:   10px;
    --crs-shadow-sm:   0 1px 2px 0 rgba(13, 13, 13, 0.06);
    --crs-shadow-md:   0 4px 14px -2px rgba(13, 13, 13, 0.10);
    --crs-shadow-lg:   0 20px 40px -12px rgba(13, 13, 13, 0.20);

    /* transitions */
    --crs-trans:       0.15s cubic-bezier(0.4, 0, 0.2, 1);
}

/* --------------------------------------------------------------------- *
 * Base                                                                   *
 * --------------------------------------------------------------------- */

html, body {
    height: 100%;
    margin: 0;
    padding: 0;
}
body {
    font-family: var(--crs-font-body) !important;
    font-feature-settings: "cv02", "cv03", "cv04", "cv11";
    background-color: var(--crs-gray-100) !important;
    color: var(--crs-gray-900);
    min-width: 0 !important;               /* kill the 1340px minimum width */
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--crs-font-body);
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--crs-gray-900);
}
h1.dashboard_heading,
h2, h3, h4 {
    text-transform: none !important;
}
h1 { font-size: 1.875rem; font-weight: 700; }
h2 { font-size: 1.5rem; }
h3 { font-size: 1.25rem; }
h4 { font-size: 1.1rem; }

a {
    color: var(--crs-red);
    transition: color var(--crs-trans);
}
a:hover { color: var(--crs-red-dark); text-decoration: none; }

code, pre, .mono { font-family: var(--crs-font-mono); }

/* --------------------------------------------------------------------- *
 * Global top header (`#header` in base.html)                             *
 * --------------------------------------------------------------------- */

#header.navbar {
    background: var(--crs-charcoal) !important;
    color: var(--crs-white);
    padding: 0.6rem 1.25rem;
    border-bottom: 3px solid var(--crs-red);
    box-shadow: var(--crs-shadow-sm);
    position: sticky;
    top: 0;
    z-index: 1000;
    opacity: 1 !important;
    line-height: 1.2;
    flex-wrap: wrap;
    min-height: auto;
}
#header .logo,
#header .navbar-brand {
    font-family: var(--crs-font-body);
    font-weight: 700;
    font-size: 1.05rem;
    letter-spacing: -0.01em;
    color: var(--crs-white) !important;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0;
    margin-right: 1rem;
}
#header .navbar-brand i { color: var(--crs-red); }
#header .brand-icon {
    width: 28px;
    height: 28px;
    display: inline-block;
    object-fit: contain;
    flex-shrink: 0;
}
@media (max-width: 480px) {
    #header .brand-icon { width: 24px; height: 24px; }
}
#header .navbar-toggler {
    color: var(--crs-white);
    border: 1px solid rgba(255, 255, 255, 0.25);
    padding: 0.3rem 0.55rem;
    background: transparent;
    font-size: 1rem;
    border-radius: var(--crs-radius);
}
#header .navbar-toggler:focus {
    outline: none;
    box-shadow: 0 0 0 0.2rem rgba(200, 16, 46, 0.35);
}
#header .navbar-toggler:hover { background: rgba(255, 255, 255, 0.08); }
#header .navbar-nav .nav-link {
    color: var(--crs-white) !important;
    font-weight: 500;
    padding: 0.4rem 0.85rem !important;
    border-radius: var(--crs-radius);
    transition: all var(--crs-trans);
    display: flex;
    align-items: center;
    gap: 0.3rem;
}
#header .navbar-nav .nav-link:hover,
#header .navbar-nav .nav-link:focus,
#header .navbar-nav .nav-item.show > .nav-link,
#header .navbar-nav .dropdown-toggle[aria-expanded="true"] {
    background: var(--crs-red);
    color: var(--crs-white) !important;
}
#header .navbar-nav .dropdown-toggle::after { margin-left: 0.35rem; }
#header #logout_link { color: var(--crs-white) !important; }
#header #logout_link:hover { background: var(--crs-red); }

/* Logout is a <button type=submit> wrapped in a POST form so Django 5
   accepts it. Strip the native button chrome so it looks identical to
   the surrounding .nav-link anchors. */
#header form#logout-form {
    margin: 0 !important;
    padding: 0 !important;
    display: inline-block !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}
#header .logout-btn,
#header button#logout_link {
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    border: 0 !important;
    box-shadow: none !important;
    cursor: pointer;
    font: inherit;
    font-weight: 500;
    padding: 0.4rem 0.85rem !important;
    border-radius: var(--crs-radius) !important;
    color: var(--crs-white) !important;
    display: inline-flex !important;
    align-items: center;
    gap: 0.3rem;
    transition: all var(--crs-trans);
    line-height: 1.5;
    min-height: 0;
}
#header .logout-btn:hover,
#header .logout-btn:focus,
#header button#logout_link:hover,
#header button#logout_link:focus {
    background: var(--crs-red) !important;
    background-color: var(--crs-red) !important;
    color: var(--crs-white) !important;
    outline: none !important;
    box-shadow: none !important;
}
#header .logout-btn i { color: var(--crs-white) !important; }
@media (max-width: 991px) {
    #header form#logout-form { width: 100%; display: block !important; }
    #header .logout-btn,
    #header button#logout_link {
        width: 100%;
        justify-content: flex-start !important;
        text-align: left;
    }
}
#header .dropdown-menu {
    border: 1px solid var(--crs-gray-300);
    border-radius: var(--crs-radius);
    box-shadow: var(--crs-shadow-lg);
    padding: 0.25rem;
    margin-top: 0.35rem;
}
#header .dropdown-item {
    color: var(--crs-gray-900);
    border-radius: calc(var(--crs-radius) - 2px);
    padding: 0.55rem 0.85rem;
    font-weight: 500;
    transition: background var(--crs-trans);
    display: flex;
    align-items: center;
    gap: 0.45rem;
}
#header .dropdown-item:hover,
#header .dropdown-item:focus {
    background: var(--crs-red-light);
    color: var(--crs-red-dark);
}
#header .dropdown-item i { color: var(--crs-red); margin-right: 0; width: 1.1rem; text-align: center; }

/* Mobile: stack the collapsed nav into a drawer under the brand */
@media (max-width: 991px) {
    #header.navbar { padding: 0.55rem 0.9rem; }
    #header .navbar-collapse {
        width: 100%;
        margin-top: 0.55rem;
        padding: 0.4rem;
        background: rgba(255, 255, 255, 0.04);
        border-radius: var(--crs-radius);
    }
    #header .navbar-nav { width: 100%; }
    #header .navbar-nav .nav-item { width: 100%; }
    #header .navbar-nav .nav-link {
        width: 100%;
        justify-content: flex-start;
    }
    #header .navbar-nav .dropdown-menu {
        background: var(--crs-white);
        width: 100%;
        border: none;
        margin: 0.2rem 0 0.4rem;
        box-shadow: none;
        padding: 0.2rem 0.4rem;
    }
    #header .brand-text { font-size: 0.95rem; }
    #header .user-name { max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}
@media (max-width: 480px) {
    #header .brand-text { display: none; }
}

/* --------------------------------------------------------------------- *
 * Content wrapper                                                        *
 * --------------------------------------------------------------------- */

#content {
    padding: 0;                          /* edge-to-edge; inner pages add their own */
    width: 100%;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    /* No overflow-x here — it creates a sticky scroll context that offsets
       children (e.g. the sidebar-toggle) by `top:` even at scrollY=0. Wide
       tables use .table-responsive wrappers for their own horizontal scroll. */
    min-width: 0;
}
#content > * { width: 100%; }
/* Commissions pages use .container-fluid; restore breathing room around
   their cards/tables since #content itself no longer pads. */
.container-fluid {
    max-width: none !important;
    padding: 1rem 1.5rem !important;
    flex: 1 1 auto;
}
/* /sales/ flex-grid sits flush with the viewport on all sides. */
#content > .flex-grid { padding: 0; }

@media (max-width: 768px) {
    .container-fluid { padding: 0.75rem !important; }
}

/* --------------------------------------------------------------------- *
 * Bootstrap 4 color overrides                                            *
 * --------------------------------------------------------------------- */

.btn-primary, .bg-primary {
    background-color: var(--crs-red) !important;
    border-color: var(--crs-red) !important;
}
.btn-primary:hover, .btn-primary:focus {
    background-color: var(--crs-red-dark) !important;
    border-color: var(--crs-red-dark) !important;
    box-shadow: 0 0 0 0.2rem rgba(200, 16, 46, 0.25) !important;
}
.btn-outline-primary {
    color: var(--crs-red) !important;
    border-color: var(--crs-red) !important;
}
.btn-outline-primary:hover, .btn-outline-primary:focus {
    background-color: var(--crs-red) !important;
    color: var(--crs-white) !important;
    border-color: var(--crs-red) !important;
}
/* Active state on the period toggles (TTM / YTD / Range) — Bootstrap's
   default flips the outline button to its theme primary (blue), which
   clashes with our red branding and washes out the label. Force the
   same red+white pairing as :hover so the selected pill reads as
   "this is the active window". */
.btn-outline-primary.active,
.btn-outline-primary:not(:disabled):not(.disabled).active,
.btn-outline-primary:not(:disabled):not(.disabled):active {
    background-color: var(--crs-red) !important;
    color: var(--crs-white) !important;
    border-color: var(--crs-red) !important;
    box-shadow: none !important;
}
.btn-outline-secondary {
    color: var(--crs-gray-700) !important;
    border-color: var(--crs-gray-400) !important;
}
.btn-outline-secondary:hover, .btn-outline-secondary.active {
    background-color: var(--crs-charcoal) !important;
    border-color: var(--crs-charcoal) !important;
    color: var(--crs-white) !important;
}
.text-primary { color: var(--crs-red) !important; }

/* buttons — generic modernization */
.btn {
    border-radius: var(--crs-radius);
    font-weight: 500;
    transition: all var(--crs-trans);
    letter-spacing: 0;
}
.btn-sm { padding: 0.3rem 0.65rem; font-size: 0.8125rem; }
.btn-group > .btn.active {
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.08);
}

/* --------------------------------------------------------------------- *
 * Cards (commissions KPI cards, etc.)                                    *
 * --------------------------------------------------------------------- */

.card {
    border: 1px solid var(--crs-gray-300) !important;
    border-radius: var(--crs-radius-lg) !important;
    box-shadow: var(--crs-shadow-sm);
    transition: transform var(--crs-trans), box-shadow var(--crs-trans);
    background: var(--crs-white);
}
.card:hover {
    box-shadow: var(--crs-shadow-md);
}
.card-body {
    padding: 1rem 1.25rem;
}
.card .small.text-muted {
    color: var(--crs-gray-600) !important;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 0.7rem;
    margin-bottom: 0.25rem;
}
.card h4, .card h5 {
    font-weight: 700;
    margin-bottom: 0.1rem;
    color: var(--crs-gray-900);
}

/* --------------------------------------------------------------------- *
 * Tables                                                                 *
 * --------------------------------------------------------------------- */

.table {
    color: var(--crs-gray-900);
    background: var(--crs-white);
    border-radius: var(--crs-radius-lg);
    overflow: hidden;
    box-shadow: var(--crs-shadow-sm);
    border-collapse: separate;
    border-spacing: 0;
}
.table thead.thead-dark th,
.table thead th {
    background-color: var(--crs-charcoal) !important;
    color: var(--crs-white) !important;
    border: none !important;
    font-weight: 600;
    font-size: 0.82rem;
    letter-spacing: 0.025em;
    text-transform: uppercase;
    padding: 0.6rem 0.8rem;
    border-bottom: 2px solid var(--crs-red) !important;
    white-space: nowrap;
}
.table td, .table th {
    border-top: 1px solid var(--crs-gray-200);
    padding: 0.5rem 0.8rem;
    vertical-align: middle;
}
.table.table-striped tbody tr:nth-of-type(odd) {
    background-color: var(--crs-gray-100);
}
.table tbody tr:hover {
    background-color: var(--crs-red-light) !important;
}
.table .table-active, .table tr.table-active {
    background-color: var(--crs-gray-200) !important;
    font-weight: 600;
}
.table .table-warning, .table tr.table-warning {
    background-color: var(--crs-warning-bg) !important;
}
.table .table-danger, .table tr.table-danger {
    background-color: var(--crs-danger-bg) !important;
}

.table a {
    color: var(--crs-red);
    font-weight: 500;
    border-bottom: 1px dashed transparent;
    transition: border-color var(--crs-trans);
}
.table a:hover {
    border-bottom-color: var(--crs-red);
}

/* DataTables polish (v2 class names: dt-container / dt-length / dt-search / dt-paging).
   Pagination selectors cover both the Bootstrap-4 integration markup (.page-item /
   .page-link / .active) and DataTables' own button class (.dt-paging-button). */
.dt-container { margin-top: 0.5rem; }
.dt-container .dt-length select,
.dt-container .dt-search input {
    border: 1px solid var(--crs-gray-400);
    border-radius: var(--crs-radius);
    padding: 0.25rem 0.6rem;
    font-size: 0.875rem;
}
.dt-container .dt-paging .dt-paging-button,
.dt-container .dt-paging .page-link {
    border-radius: var(--crs-radius) !important;
    color: var(--crs-gray-700) !important;
    border: 1px solid transparent;
    transition: all var(--crs-trans);
}
.dt-container .dt-paging .dt-paging-button.current,
.dt-container .dt-paging .dt-paging-button.current:hover,
.dt-container .dt-paging .page-item.active .page-link {
    background: var(--crs-red) !important;
    border-color: var(--crs-red) !important;
    color: var(--crs-white) !important;
}
.dt-container .dt-paging .dt-paging-button:hover,
.dt-container .dt-paging .page-item:not(.active) .page-link:hover {
    background: var(--crs-red-light) !important;
    border-color: var(--crs-red-tint) !important;
    color: var(--crs-red-dark) !important;
}

/* --------------------------------------------------------------------- *
 * Badges                                                                 *
 * --------------------------------------------------------------------- */

.badge {
    padding: 0.3em 0.55em;
    border-radius: 999px;
    font-weight: 600;
    letter-spacing: 0.02em;
    font-size: 0.72rem;
}
.badge-warning {
    background-color: var(--crs-warning-bg) !important;
    color: var(--crs-warning) !important;
    border: 1px solid var(--crs-warning);
}
.badge-danger {
    background-color: var(--crs-danger-bg) !important;
    color: var(--crs-danger) !important;
    border: 1px solid var(--crs-danger);
}
.badge-info {
    background-color: #E8F1FE !important;
    color: var(--crs-info) !important;
    border: 1px solid var(--crs-info);
}
.badge-success {
    background-color: var(--crs-success-bg) !important;
    color: var(--crs-success) !important;
    border: 1px solid var(--crs-success);
}

/* --------------------------------------------------------------------- *
 * Alerts                                                                 *
 * --------------------------------------------------------------------- */

.alert {
    border: 1px solid transparent;
    border-radius: var(--crs-radius);
    padding: 0.75rem 1rem;
    font-weight: 500;
}
.alert-warning {
    background: var(--crs-warning-bg);
    color: var(--crs-warning);
    border-color: var(--crs-warning);
}

/* --------------------------------------------------------------------- *
 * Forms                                                                  *
 * --------------------------------------------------------------------- */

.form-control, select.form-control, input.form-control {
    border: 1px solid var(--crs-gray-400);
    border-radius: var(--crs-radius);
    padding: 0.45rem 0.75rem;
    transition: border-color var(--crs-trans), box-shadow var(--crs-trans);
}
.form-control:focus {
    border-color: var(--crs-red);
    box-shadow: 0 0 0 0.2rem rgba(200, 16, 46, 0.15);
    outline: none;
}

/* --------------------------------------------------------------------- *
 * Commission dashboard fine-tuning                                       *
 * --------------------------------------------------------------------- */

.container-fluid {
    background: transparent;
}

/* KPI cards — make the headline number pop */
.row.mb-4 .card h4 {
    font-size: 1.4rem;
    color: var(--crs-gray-900);
    font-variant-numeric: tabular-nums;
}
.row.mb-4 .card .small {
    font-variant-numeric: tabular-nums;
    color: var(--crs-gray-600);
}

/* Period selector + filter button groups get a subtle card treatment */
form.form-inline {
    background: var(--crs-white);
    padding: 0.5rem 0.85rem;
    border-radius: var(--crs-radius);
    border: 1px solid var(--crs-gray-300);
    box-shadow: var(--crs-shadow-sm);
    display: inline-flex !important;
    align-items: center;
    gap: 0.5rem;
}
form.form-inline label { margin-bottom: 0 !important; }

/* h2 / h4 section headers get a subtle red underline accent */
.container-fluid h4 {
    border-bottom: 2px solid var(--crs-red);
    padding-bottom: 0.35rem;
    display: inline-block;
}

/* --------------------------------------------------------------------- *
 * Legacy /sales/ dashboard — sidebar + smrytats + login                  *
 * Overrides the teal/pink palette in sales_styles.css.                   *
 * --------------------------------------------------------------------- */

/* Sidebar: charcoal instead of teal */
.sidebar {
    background-color: var(--crs-charcoal) !important;
    color: var(--crs-white);
    padding: 1.25rem 0.75rem !important;
}
.sidebar hr {
    border-color: rgba(255, 255, 255, 0.12);
    margin: 1rem 0;
}
.sidebar #teamscore {
    color: var(--crs-white);
    font-weight: 600;
    text-align: center;
    padding: 0.5rem;
}

/* Sentiment buttons (thumbs up / meh / thumbs down) */
.flex-sentiment {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
}
.sentiment {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: var(--crs-radius);
    padding: 0.45rem 0.75rem;
    color: var(--crs-white);
    cursor: pointer;
    transition: all var(--crs-trans);
}
.sentiment:hover {
    background: var(--crs-red);
    border-color: var(--crs-red);
    transform: translateY(-1px);
}

/* Sidebar navigation links */
a.sidebar_link {
    display: block;
    background-color: transparent !important;
    color: var(--crs-white) !important;
    padding: 0.65rem 1rem !important;
    border-radius: var(--crs-radius);
    box-shadow: none !important;
    text-transform: none !important;
    font-weight: 500;
    transition: all var(--crs-trans);
    border-left: 3px solid transparent;
    margin-bottom: 2px;
}
a.sidebar_link i { color: var(--crs-red); margin-right: 0.5rem; }
a.sidebar_link:hover {
    background-color: rgba(200, 16, 46, 0.18) !important;
    border-left-color: var(--crs-red);
    color: var(--crs-white) !important;
    cursor: pointer;
    top: 0 !important;
}
a.sidebar_link:active {
    box-shadow: none !important;
    top: 0 !important;
    background-color: var(--crs-red) !important;
}
.sidebar ul { list-style: none; padding-left: 0; }
.sidebar li { margin-bottom: 2px; }

/* Summary stat cards (total open, total weighted, total number) */
.smry_stats > div {
    background-color: var(--crs-white) !important;
    border-radius: var(--crs-radius-lg);
    border: 1px solid var(--crs-gray-300);
    box-shadow: var(--crs-shadow-sm);
    padding: 0.75rem !important;
    transition: all var(--crs-trans);
}
.smry_stats > div:hover {
    box-shadow: var(--crs-shadow-md);
    transform: translateY(-1px);
}
.stats_amount {
    color: var(--crs-red);
    font-weight: 700 !important;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
}

/* Dashboard heading */
h1.dashboard_heading {
    text-transform: none !important;
    font-weight: 700;
    color: var(--crs-gray-900);
    font-size: 1.5rem;
    margin-bottom: 0.75rem;
}
h1.dashboard_heading::after {
    content: '';
    display: block;
    width: 3rem;
    height: 3px;
    background: var(--crs-red);
    margin-top: 0.4rem;
    border-radius: 3px;
}

/* Rep name filter indicator (executive view) */
.rep-name {
    background: var(--crs-red-light);
    color: var(--crs-red-dark);
    border-radius: var(--crs-radius);
    padding: 0.3rem 0.7rem;
    font-weight: 600;
    display: inline-block;
}

/* Login form. Capped at 440px wide so it doesn't stretch across the
   viewport on desktop. width:min() means it shrinks gracefully on
   smaller screens while keeping a 1rem gutter from the edges. The
   existing mobile media-query block further down sets width:100% +
   smaller padding for true mobile widths. */
#login_form {
    background: var(--crs-white);
    padding: 2rem 2.5rem;
    width: min(440px, calc(100vw - 2rem));
    max-width: 440px;
    border-radius: var(--crs-radius-lg);
    box-shadow: var(--crs-shadow-lg);
    color: var(--crs-gray-900) !important;
    min-width: 320px;
}
#login_form h1, #login_form h2, #login_form label {
    color: var(--crs-gray-900) !important;
}
.login_btn {
    background-color: var(--crs-red) !important;
    border: 2px solid var(--crs-red) !important;
    color: var(--crs-white) !important;
    border-radius: var(--crs-radius) !important;
    text-transform: none !important;
    font-weight: 600 !important;
    padding: 0.5rem 1.2rem !important;
    transition: all var(--crs-trans);
}
.login_btn:hover, .login_btn:focus {
    background-color: var(--crs-red-dark) !important;
    border-color: var(--crs-red-dark) !important;
    box-shadow: 0 0 0 0.2rem rgba(200, 16, 46, 0.25) !important;
    color: var(--crs-white) !important;
}

/* Generic form-control — legacy CSS strips borders; add them back */
.form-control {
    border: 1px solid var(--crs-gray-400) !important;
    border-radius: var(--crs-radius) !important;
    background: var(--crs-white) !important;
    color: var(--crs-gray-900) !important;
    min-height: 2.3rem !important;
    padding: 0.4rem 0.7rem !important;
}

/* Grid layout — page background neutral gray, fill available height
   below the header. The flex-grid used to be height:100vh which caused
   a double scrollbar because the header is sticky on top. */
.flex-grid, .main_content {
    background-color: var(--crs-gray-100) !important;
}
.flex-grid {
    height: auto !important;
    min-height: calc(100vh - 64px);   /* header is ~64px tall */
    width: 100%;
    grid-template-columns: minmax(230px, 260px) 1fr !important;
    grid-template-areas: 'sidebar main_content' !important;
    grid-gap: 0 !important;
}
.flex-grid > .sidebar { grid-area: sidebar; }
.flex-grid > .main_content { grid-area: main_content; }
.main_content {
    padding: 1.25rem !important;
    min-height: 100%;
    min-width: 0;                      /* lets children shrink inside grid */
}

/* Mobile sidebar drawer toggle (shows only on small screens) */
.sidebar-toggle {
    display: none;
    position: sticky;
    top: 0;
    z-index: 900;
    width: 100%;
    padding: 0.6rem 1rem;
    background: var(--crs-charcoal);
    color: var(--crs-white);
    border: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    text-align: left;
    font-weight: 600;
    letter-spacing: 0.02em;
    cursor: pointer;
    /* Auto-hide-on-scroll transition (mobile) */
    transform: translateY(0);
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: transform;
}
.sidebar-toggle.is-hidden { transform: translateY(-110%); }
.sidebar-toggle i { margin-right: 0.45rem; color: var(--crs-red); }
.sidebar-toggle:focus { outline: none; box-shadow: 0 0 0 0.2rem rgba(200, 16, 46, 0.3); }

@media (max-width: 991.98px) {
    .sidebar-toggle { display: block; }
    .flex-grid {
        grid-template-columns: 1fr !important;
        grid-template-areas: 'main_content' !important;
    }
    .flex-grid > .sidebar { display: none; }
    .flex-grid.sidebar-open {
        grid-template-columns: 1fr !important;
        grid-template-areas: 'sidebar' 'main_content' !important;
    }
    .flex-grid.sidebar-open > .sidebar {
        display: block;
        grid-area: sidebar;
        padding: 1rem 0.85rem !important;
    }
    .main_content { padding: 0.9rem !important; }
    .sidebar .btn-group .dropdown-menu {
        position: static !important;
        transform: none !important;
        width: 100%;
    }
}

/* Tables inside /sales/ dashboards */
#table_id {
    background-color: var(--crs-white);
    border-radius: var(--crs-radius-lg);
    overflow: hidden;
    box-shadow: var(--crs-shadow-sm);
    border: 1px solid var(--crs-gray-300);
}

/* FAQ edit button (small icon next to FAQ link in sidebar) */
.faq-edit-button {
    color: var(--crs-white) !important;
    opacity: 0.7;
    transition: opacity var(--crs-trans);
}
.faq-edit-button:hover { opacity: 1; color: var(--crs-red) !important; }

/* --------------------------------------------------------------------- *
 * Sidebar filter dropdowns (Company / Sales Rep)                         *
 * --------------------------------------------------------------------- */

.sidebar form {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0 0.25rem;
    margin-top: 0.5rem;
}
.sidebar .btn-group {
    width: 100%;
    display: block;
}
.sidebar .btn-group > .dropdown-toggle {
    background: rgba(255, 255, 255, 0.06) !important;
    border: 1px solid rgba(255, 255, 255, 0.18) !important;
    color: var(--crs-white) !important;
    font-weight: 500;
    border-radius: var(--crs-radius) !important;
    padding: 0.55rem 0.85rem;
    width: 100%;
    text-align: left;
    display: flex;
    align-items: center;
    justify-content: space-between;
    transition: all var(--crs-trans);
    box-shadow: none !important;
}
.sidebar .btn-group > .dropdown-toggle::before {
    content: '\f0b1';          /* far fa-id-badge — consistent icon */
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    color: var(--crs-red);
    margin-right: 0.55rem;
    font-size: 0.85rem;
}
.sidebar .btn-group > .dropdown-toggle::after {
    color: var(--crs-gray-400);
    margin-left: auto;
}
.sidebar .btn-group > .dropdown-toggle:hover,
.sidebar .btn-group > .dropdown-toggle:focus,
.sidebar .btn-group > .dropdown-toggle[aria-expanded="true"] {
    background: rgba(200, 16, 46, 0.2) !important;
    border-color: var(--crs-red) !important;
    color: var(--crs-white) !important;
}
.sidebar .btn-group > .dropdown-toggle[aria-expanded="true"]::after {
    transform: rotate(180deg);
}

/* Dropdown menu itself (pops out to the right of the sidebar) */
.sidebar .btn-group .dropdown-menu {
    background: var(--crs-white);
    border: 1px solid var(--crs-gray-300);
    border-radius: var(--crs-radius-lg) !important;
    box-shadow: var(--crs-shadow-lg);
    padding: 0.3rem;
    min-width: 14rem;
    max-height: 60vh;
    overflow-y: auto;
}
.sidebar .btn-group .dropdown-menu .dropdown-item {
    color: var(--crs-gray-900);
    border-radius: calc(var(--crs-radius) - 2px);
    padding: 0.5rem 0.75rem;
    font-weight: 500;
    font-size: 0.875rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    transition: background var(--crs-trans);
}
.sidebar .btn-group .dropdown-menu .dropdown-item i {
    color: var(--crs-red);
    width: 1rem;
    text-align: center;
}
.sidebar .btn-group .dropdown-menu .dropdown-item:hover {
    background: var(--crs-red-light);
    color: var(--crs-red-dark);
}
.sidebar .btn-group .dropdown-menu .dropdown-item:first-child {
    border-bottom: 1px solid var(--crs-gray-200);
    font-weight: 600;
    margin-bottom: 0.2rem;
    padding-bottom: 0.55rem;
}
.sidebar .btn-group .dropdown-menu .dropdown-item:first-child i {
    color: var(--crs-gray-600);
}

/* Scrollbar for long rep lists */
.sidebar .btn-group .dropdown-menu::-webkit-scrollbar { width: 8px; }
.sidebar .btn-group .dropdown-menu::-webkit-scrollbar-thumb {
    background: var(--crs-gray-400);
    border-radius: 4px;
}
.sidebar .btn-group .dropdown-menu::-webkit-scrollbar-thumb:hover {
    background: var(--crs-gray-600);
}

/* --------------------------------------------------------------------- *
 * Sales dashboard — KPI tiles, cards, and chart rows                     *
 * --------------------------------------------------------------------- */

.main_content { padding: 1.5rem !important; }

.kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
    margin-bottom: 1.25rem;
}
.kpi-card {
    background: var(--crs-white);
    border: 1px solid var(--crs-gray-300);
    border-radius: var(--crs-radius-lg);
    box-shadow: var(--crs-shadow-sm);
    padding: 1rem 1.1rem;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    transition: all var(--crs-trans);
    position: relative;
    overflow: hidden;
    min-height: 110px;
}
.kpi-card::before {
    content: '';
    position: absolute; left: 0; top: 0; bottom: 0;
    width: 3px;
    background: var(--crs-gray-300);
    transition: background var(--crs-trans);
}
.kpi-card:hover {
    box-shadow: var(--crs-shadow-md);
    transform: translateY(-1px);
}
.kpi-card:hover::before { background: var(--crs-red); }
.kpi-card--accent::before { background: var(--crs-red); }
.kpi-icon {
    color: var(--crs-red);
    font-size: 1.1rem;
    line-height: 1;
}
.kpi-label {
    color: var(--crs-gray-600);
    font-size: 0.78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.kpi-value {
    font-size: 1.65rem;
    font-weight: 700;
    color: var(--crs-gray-900);
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
    line-height: 1.15;
}
.kpi-value a {
    color: var(--crs-gray-900);
    text-decoration: none;
    border-bottom: 2px solid var(--crs-red);
}
.kpi-value a:hover { color: var(--crs-red); }

/* Generic section card */
.sales-card {
    background: var(--crs-white);
    border: 1px solid var(--crs-gray-300);
    border-radius: var(--crs-radius-lg);
    box-shadow: var(--crs-shadow-sm);
    padding: 1.1rem 1.25rem;
    margin-bottom: 1.25rem;
    display: block !important;
}
.sales-card-header {
    font-size: 1rem;
    font-weight: 600;
    color: var(--crs-gray-900);
    margin-bottom: 0.9rem;
    padding-bottom: 0.6rem;
    border-bottom: 1px solid var(--crs-gray-200);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    text-transform: none;
}
.sales-card-header > i:first-child { color: var(--crs-red); flex-shrink: 0; }
.sales-card-header .sales-card-action { margin-left: auto; }
.sales-card-action {
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--crs-red);
    text-decoration: none;
    border: 1px solid var(--crs-gray-300);
    padding: 0.25rem 0.65rem;
    border-radius: var(--crs-radius);
    transition: all var(--crs-trans);
}
.sales-card-action:hover {
    background: var(--crs-red);
    color: var(--crs-white) !important;
    border-color: var(--crs-red);
}

.chart-row {
    display: grid;
    gap: 1rem;
    align-items: stretch;
}
.chart-row--two   { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); }
.chart-row--three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 992px) {
    .chart-row--two, .chart-row--three { grid-template-columns: 1fr; }
}
.chart-cell { min-width: 0; }
.chart-cell canvas { max-height: 260px; }

/* "Ranked list" charts live in a 2-up grid of small summary tiles;
   clicking the expand button in the header reveals the full list and
   the card spans the full row width. */
.ranked-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-bottom: 1.25rem;
}
.ranked-grid > .ranked-card { margin-bottom: 0; transition: grid-column 0.2s ease; }
.ranked-grid > .ranked-card:not(.is-collapsed) { grid-column: 1 / -1; }
@media (max-width: 992px) {
    .ranked-grid { grid-template-columns: 1fr; }
    .ranked-grid > .ranked-card:not(.is-collapsed) { grid-column: 1; }
}

.ranked-chart {
    position: relative;
    width: 100% !important;
    height: 240px !important;          /* collapsed-tile default */
    max-height: 520px;
    transition: height 0.25s ease;
}
.ranked-card:not(.is-collapsed) .ranked-chart {
    height: 440px !important;
}
@media (max-width: 768px) {
    .ranked-chart { height: 220px !important; }
    .ranked-card:not(.is-collapsed) .ranked-chart { height: 380px !important; }
}
@media (max-width: 480px) {
    .ranked-chart { height: 210px !important; }
    .ranked-card:not(.is-collapsed) .ranked-chart { height: 340px !important; }
}

/* Expand / collapse button in the card header */
.chart-toggle {
    margin-left: auto;
    background: transparent;
    border: 1px solid var(--crs-gray-300);
    border-radius: var(--crs-radius);
    color: var(--crs-gray-700);
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all var(--crs-trans);
    flex-shrink: 0;
    padding: 0;
}
.chart-toggle:hover,
.chart-toggle:focus {
    background: var(--crs-red);
    border-color: var(--crs-red);
    color: var(--crs-white);
    outline: none;
}
.chart-toggle i { font-size: 0.85rem; }
.chart-toggle .collapse-icon { display: none; }
.ranked-card:not(.is-collapsed) .chart-toggle .expand-icon { display: none; }
.ranked-card:not(.is-collapsed) .chart-toggle .collapse-icon { display: inline-block; }

/* --------------------------------------------------------------------- *
 * Shared rep-code split indicators                                       *
 * --------------------------------------------------------------------- */

.badge-split {
    display: inline-block;
    background: var(--crs-red-light);
    color: var(--crs-red-dark);
    border: 1px solid var(--crs-red-tint);
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    padding: 0.1rem 0.5rem;
    margin-left: 0.35rem;
    vertical-align: middle;
    white-space: nowrap;
}
.is-split-row td {
    background: rgba(200, 16, 46, 0.04) !important;
    border-left-color: var(--crs-red) !important;
}
.is-split-row > td:first-child {
    border-left: 3px solid var(--crs-red) !important;
}
/* Rows attributed via a special commission rule get a gold/amber accent. */
.is-special-row td {
    background: rgba(217, 119, 6, 0.05) !important;
}
.is-special-row > td:first-child {
    border-left: 3px solid #D97706 !important;
}
.badge-special {
    display: inline-block;
    background: #FEF3E4;
    color: #78350F;
    border: 1px solid #FCD49B;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    padding: 0.1rem 0.55rem;
    margin-left: 0.35rem;
    vertical-align: middle;
    white-space: nowrap;
}
.badge-special i { color: #D97706; margin-right: 0.25rem; }

/* --------------------------------------------------------------------- *
 * Monthly-grid tables — fixed column widths so Monthly Revenue,          *
 * Actual vs Plan, Commission Earned, and Unpaid/Potential all share the  *
 * same month columns visually. Without table-layout:fixed each table     *
 * sizes its own columns from its own content, making the months drift    *
 * a few pixels off between stacked tables.                               *
 * --------------------------------------------------------------------- *
 *   col 1  = Metric (wider, labels vary)                                 *
 *   cols 2-13 = twelve months, equal share                               *
 *   col 14 = TTM Total (a bit wider for the bold totals)                 *
 * --------------------------------------------------------------------- */

/* Monthly grid sizing -------------------------------------------------------
 * Goals:
 *   1. Dollar amounts never wrap ($3,949,499 must sit on one line).
 *   2. Columns align PERFECTLY across the 4 stacked monthly tables
 *      (Monthly Revenue, Actual vs Plan, Commission Earned, Uncollected).
 *
 * Approach:
 *   * table-layout: fixed     -> the first-row cell widths are authoritative;
 *                                every cell beneath them in the same column
 *                                is forced to that exact width, regardless
 *                                of content length. This is what guarantees
 *                                alignment across tables.
 *   * Explicit width = sum of column widths + min-width: 100% so on wide
 *     viewports all 4 tables stretch proportionally (still matching each
 *     other); on narrow viewports they keep their base widths and the
 *     .table-responsive wrapper + sticky top-mirror scrollbar provide
 *     horizontal scroll.
 *   * white-space: nowrap + overflow: visible so numbers stay one-line
 *     and any accidental overflow leaks rather than wrapping.
 *
 * Column widths (sum = 116rem ≈ 1856px):
 *   first col (metric label)    = 13rem  (wraps long labels to 2 lines)
 *   12 month columns @ 8rem     = 96rem  (fits \$9,999,999 + trend-arrow pill)
 *   last col (TTM Total)        =  7rem
 *
 * Month columns were 6.5rem but the tinted trend-arrow pills on Above/Below
 * Quota cells pushed content past the cell boundary into neighbors. Bumped
 * to 8rem + switched overflow to hidden so any extreme value clips in-cell
 * rather than leaking out.
 * --------------------------------------------------------------------------- */
.monthly-grid {
    table-layout: fixed;
    /* Try to fit all 14 cells (metric + 12 months + total) within the
       page's container width. Tighter column widths + a slightly smaller
       font let realistic values like "$10,000.00" or "▼25.00%" sit on
       one line without wrapping or truncation. The .table-responsive
       wrapper still falls back to horizontal scroll on narrow screens.
       Width math: 12rem label + (12 × 5.75rem months) + 6.5rem total
                  = 12 + 69 + 6.5 = 87.5rem (~1,400px at 16px base) */
    width: 100%;
    min-width: calc(12rem + (12 * 5.75rem) + 6.5rem);
}
.monthly-grid th,
.monthly-grid td {
    white-space: nowrap;
    overflow: visible;
    word-break: normal;
    font-size: 0.82rem;
    padding: 0.4rem 0.45rem;
}
/* First column (metric label) — keep the full descriptor + (?) help
   button on one line so labels read cleanly without wrapping. Slightly
   smaller font + a wider column accommodate the longest label
   ("Cumulative Above/Below Quota ($)") plus the inline help pill. */
.monthly-grid thead th:first-child,
.monthly-grid tbody td:first-child {
    width: 12rem;
    white-space: normal;
    overflow-wrap: break-word;
    word-break: break-word;
    font-size: 0.82rem;
}
.monthly-grid thead th:last-child,
.monthly-grid tbody td:last-child {
    width: 6.5rem;
    font-weight: 600;
}
/* Each of the 12 month columns gets equal width. table-layout:fixed +
   evenly-distributed widths means narrow viewports compress columns
   uniformly instead of one column hogging the row. */
.monthly-grid thead th:not(:first-child):not(:last-child),
.monthly-grid tbody td:not(:first-child):not(:last-child) {
    width: 5.75rem;
}

/* Customer Accounts table — fit-to-page treatment for 21 columns
   (Customer No / Name / 12 months / 7 totals). Use a small font, tight
   padding, and word-wrapped headers to keep dollar values on single
   lines without forcing horizontal scroll on a typical desktop.
   DataTables sets inline `width: Npx` after init, so we override with
   !important — otherwise it expands to content-fit and overflows. */
#customers_table {
    table-layout: fixed !important;
    width: 100% !important;
    font-size: 0.72rem;
}
#customers_table th,
#customers_table td {
    box-sizing: border-box;
    padding: 0.25rem 0.25rem;
    white-space: nowrap;
    overflow: visible;
}
#customers_table thead th {
    white-space: normal !important;
    word-break: keep-all;
    overflow-wrap: normal;
    vertical-align: bottom;
    line-height: 1.15;
    padding-top: 5px;
    /* Total columns (right side) get a bit more room than month columns.
       Default to a tight cap; overrides below adjust per column slot. */
    max-width: 75px !important;
    width: 75px !important;
}
#customers_table thead th:nth-child(1),
#customers_table tbody td:nth-child(1) {
    white-space: nowrap !important;
    width: 56px !important;
    max-width: 56px !important;
}
#customers_table thead th:nth-child(2),
#customers_table tbody td:nth-child(2) {
    /* Customer name column — wrap onto multiple lines instead of
       truncating with ellipsis. The previous 110px / nowrap / ellipsis
       combination cut off long names ("Tesoro Refining & Marketing
       Company LLC" etc.) at the column edge; widening + allowing
       wrap keeps the full name readable on two-three lines. */
    white-space: normal !important;
    width: 200px !important;
    max-width: 200px !important;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

/* Per-tile scope disclaimer for the Unlockable Commission /
   Commission Earned pipeline tiles. Tucked under the meta line so it
   doesn't compete with the headline value but makes the tile's
   inclusion rules obvious at a glance. */
.cmp-stage-disclaimer {
    margin-top: 0.4rem;
    font-size: 0.7rem;
    line-height: 1.3;
    color: rgba(255, 255, 255, 0.85);
    display: flex;
    align-items: baseline;
    gap: 0.25rem;
    /* On the colored gradient tiles the lighter color reads as a hint
       rather than an active link; override on lighter tile variants
       below where contrast inverts. */
}
.cmp-stage-disclaimer > i {
    flex-shrink: 0;
    opacity: 0.85;
}
/* The Unlockable / Earned tiles have a white card body — restore
   normal muted-grey text so the disclaimer is legible. */
.pipeline-stage-unlockable .cmp-stage-disclaimer,
.pipeline-stage-payout .cmp-stage-disclaimer {
    color: var(--crs-gray-600, #5f6368);
}
.pipeline-stage-unlockable .cmp-stage-disclaimer > i,
.pipeline-stage-payout .cmp-stage-disclaimer > i {
    color: var(--crs-gray-500, #adb5bd);
}

/* Quota-scope disclaimer under the Commission Paid tile — clarifies
   that commission is summed across BOTH reps with and without a
   quota, since the adjacent Quota Tracking tile only counts reps
   with a target. Tight-spacing so it tucks under the trend chip
   without pushing the sparkline. */
.kpi-quota-scope-note {
    margin-top: 0.2rem;
    font-size: 0.7rem;
    line-height: 1.3;
}
.kpi-quota-scope-note > i {
    margin-right: 0.2rem;
}

/* With-quota / without-quota / total stack used on the team-scope
   invoice detail KPI tiles. The main tile value leads with the
   with-quota number (matches the chart bar that drilled here) and
   the stack below shows the without-quota slice + the all-rows
   total in a compact two-row block. */
.invoice-kpi-sub-stack {
    margin-top: 0.35rem;
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    border-top: 1px solid rgba(0, 0, 0, 0.06);
    padding-top: 0.35rem;
}
.invoice-kpi-sub-line {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.4rem;
    font-size: 0.78rem;
    color: var(--crs-gray-600, #5f6368);
    line-height: 1.25;
}
.invoice-kpi-sub-line .invoice-kpi-sub-amount {
    font-variant-numeric: tabular-nums;
    font-weight: 500;
}
.invoice-kpi-sub-line .invoice-kpi-sub-label {
    font-size: 0.72rem;
    text-transform: lowercase;
    letter-spacing: 0.02em;
}
.invoice-kpi-sub-total {
    color: var(--crs-gray-900, #202124);
    font-weight: 600;
    border-top: 1px dashed rgba(0, 0, 0, 0.1);
    padding-top: 0.15rem;
    margin-top: 0.05rem;
}
.invoice-kpi-sub-total .invoice-kpi-sub-amount {
    font-weight: 700;
}

/* Per-column filter row injected below DataTables headers. Keeps the
   dropdown compact, white text on the dark thead background, and
   stops the filter cell from inheriting the column's sort cursor. */
table.dataTable thead tr.dt-filter-row th {
    padding: 4px 6px;
    background: #f8f9fa;
    border-top: 1px solid #dee2e6;
    cursor: default;
}
table.dataTable thead tr.dt-filter-row th .dt-col-filter {
    height: auto;
    padding: 2px 4px;
    font-size: 0.78rem;
    font-weight: 400;
    background: #fff;
    color: #212529;
    border: 1px solid #ced4da;
    width: 100%;
    max-width: 160px;
}

/* Multi-select column filter — checkbox-list dropdown used on the
   team summary table for the Rep and Manager columns so a viewer can
   pick several reps/managers at once and watch the footer totals roll
   up just for that subset. The wrapper is `position: relative` and the
   panel pops down absolutely so it doesn't shift the column width. */
table.dataTable thead tr.dt-filter-row th .dt-multi-filter {
    position: relative;
    width: 100%;
    max-width: 200px;
    text-align: left;
    font-weight: 400;
}
table.dataTable thead tr.dt-filter-row th .dt-multi-filter-btn {
    height: auto;
    padding: 2px 22px 2px 6px;
    font-size: 0.78rem;
    font-weight: 400;
    background: #fff;
    color: #212529;
    border: 1px solid #ced4da;
    border-radius: 0.2rem;
    width: 100%;
    text-align: left;
    cursor: pointer;
    position: relative;
    line-height: 1.4;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
table.dataTable thead tr.dt-filter-row th .dt-multi-filter-btn:hover {
    border-color: #adb5bd;
}
.dt-msf-caret {
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.7rem;
    color: #6c757d;
}
.dt-multi-filter-panel {
    position: absolute;
    top: calc(100% + 2px);
    left: 0;
    z-index: 1080;
    min-width: 220px;
    max-width: 320px;
    background: #fff;
    border: 1px solid #ced4da;
    border-radius: 0.25rem;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
    padding: 0.4rem;
    font-weight: 400;
    color: #212529;
}
.dt-multi-filter-panel[hidden] { display: none; }
.dt-msf-head {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    margin-bottom: 0.35rem;
}
.dt-msf-search {
    flex: 1;
    height: auto;
    padding: 2px 6px;
    font-size: 0.78rem;
}
.dt-msf-clear {
    padding: 0;
    font-size: 0.75rem;
    color: #6c757d;
    text-decoration: underline;
}
.dt-msf-clear:hover { color: #dc3545; text-decoration: underline; }
.dt-msf-list {
    max-height: 260px;
    overflow-y: auto;
    border-top: 1px solid #f0f0f0;
    padding-top: 0.25rem;
}
.dt-msf-option {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 2px 4px;
    margin: 0;
    font-size: 0.8rem;
    cursor: pointer;
    border-radius: 0.15rem;
}
.dt-msf-option:hover { background: #f6f7f9; }
.dt-msf-option > input[type="checkbox"] {
    margin: 0;
    flex-shrink: 0;
}
.dt-msf-option > span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* No-quota banner on the per-rep dashboard. Surfaces a clear notice
   that the page is missing quota context (chart hidden, % to plan
   meaningless) so the user understands why those sections are absent. */
.rep-no-quota-banner {
    border-left: 4px solid #f59e0b;
}
.rep-no-quota-banner-title {
    font-size: 0.95rem;
    margin-bottom: 0.25rem;
}
.rep-no-quota-banner-title > i {
    color: #b45309;
    margin-right: 0.25rem;
}
.rep-no-quota-banner-body {
    font-size: 0.85rem;
    line-height: 1.45;
}

/* Per-rep dashboard title: when a profile maps to many BC codes (e.g.
   the House Accounts placeholder collects 30+ HOUSE* / unmapped codes
   into one Profile), the comma-joined code list runs off the page.
   Constrain the H2 itself so its child block can't push it past the
   viewport, then let the codes line wrap freely. */
.commission-dashboard-title {
    max-width: 100%;
    overflow-wrap: anywhere;
    word-break: break-word;
}
.commission-dashboard-title .dashboard-title-codes {
    display: block;
    /* Bound to viewport so an overflowing parent can't widen us.
       calc subtracts left+right page padding (~2rem each). */
    max-width: calc(100vw - 4rem);
    /* !important needed — somewhere up the stylesheet stack a rule on
       <small> (Bootstrap / our own helpers) sets white-space: nowrap
       which keeps the codes on a single line that overflows the
       viewport. Force-wrap so the long house-account code list
       breaks cleanly. */
    white-space: normal !important;
    font-size: 0.78rem;
    margin-top: 0.15rem;
    word-break: break-word;
    overflow-wrap: anywhere;
    line-height: 1.4;
    font-weight: 400;
}
/* The 12 month columns (cols 3-14): generous 88px each since the
   Summary column merged 6 right-side totals into a compact stacked
   cell. Months were 60px when 7 narrow totals competed for space; now
   they get the breathing room reclaimed. Fits "$10,000.00" cleanly. */
#customers_table thead th:nth-child(n+3):nth-child(-n+14),
#customers_table tbody td:nth-child(n+3):nth-child(-n+14) {
    width: 88px !important;
    max-width: 88px !important;
}
/* Summary column (last) — fixed 220px since the inline lines are at
   0.7-0.85rem and "$10,000.00 customer paid · $-500 customer owes" is
   ~205px at this font. Stacked vertically: My Invoiced headline + 3
   secondary lines (paid/owed · commission/percentages · customer total). */
#customers_table thead th:last-child,
#customers_table tbody td:last-child {
    width: 220px !important;
    max-width: 220px !important;
    text-align: left !important;
    vertical-align: top !important;
}
.customer-summary-cell {
    line-height: 1.3;
}
/* New stacked-line layout — every line is `<icon> <amount> <label>` so
   amounts line up vertically across the cell at the same horizontal
   position. flex + min-width on the icon column does the alignment. */
.cs-row {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 0.7rem;
    color: var(--crs-gray-700, #495057);
    margin-top: 2px;
}
.cs-icon {
    width: 14px;
    color: var(--crs-gray-500, #9ca3af);
    flex-shrink: 0;
    font-size: 0.72rem;
}
.cs-amount {
    font-weight: 600;
    color: var(--crs-gray-900, #212529);
    font-variant-numeric: tabular-nums;
}
.cs-label {
    color: var(--crs-gray-600, #6c757d);
    font-weight: 400;
}
/* Headline (Invoiced) — bigger, accented icon. */
.cs-headline {
    font-size: 0.85rem;
}
.cs-headline .cs-icon {
    color: var(--crs-charcoal, #1a1a1a);
    font-size: 0.85rem;
}
.cs-headline .cs-amount {
    font-size: 0.95rem;
}
/* Commission row — green tint to read as "money to you". */
.cs-commission {
    margin-top: 4px;
}
.cs-commission .cs-icon {
    color: #0f9d58;
}
.cs-commission .cs-amount {
    color: #0b7a45;
}
/* Potential commission — amber, sits directly under the "owed" line so
   the user reads "$X owed → $Y potential commission" as a single
   thought. Only rendered when ttm_potential_commission > 0. */
.cs-potential .cs-icon { color: #d97706; }
.cs-potential .cs-amount { color: #b45309; }
.cs-potential .cs-label { color: #92400e; font-style: italic; }

/* All links inside the customer-summary cell: keep the parent row's
   color (each row's own palette is meaningful — green for commission,
   red for owed, etc.) and only show a subtle underline on hover. */
.cs-link, .cs-link:hover, .cs-link:focus { text-decoration: none; color: inherit; }
.cs-link { cursor: pointer; }
.cs-link:hover { background: rgba(200, 16, 46, 0.04); border-radius: 3px; }
.cs-link:hover .cs-amount { text-decoration: underline; }
/* All-reps spend (final muted line). */
.cs-muted {
    color: var(--crs-gray-500, #adb5bd);
    font-style: italic;
}
.cs-muted .cs-amount {
    color: var(--crs-gray-600, #6c757d);
    font-weight: 500;
}

/* Customer Payment summary card on the invoice-lines drill-down. Lays
   out four blocks (status / total paid / still owed / paid date) in a
   single row with a payment-progress strip below. */
.invoice-payment-card {
    border-left: 3px solid var(--crs-red, #c8102e);
}
.invoice-payment-block {
    flex: 1 1 22%;
    padding: 0 1rem;
    border-right: 1px solid var(--crs-gray-200, #e5e7eb);
    min-width: 180px;
}
.invoice-payment-block:first-child { padding-left: 0; }
.invoice-payment-block:last-child  { border-right: none; }
.payment-progress-wrapper {
    width: 100%;
}
.payment-progress-bar {
    height: 8px;
    background: rgba(200, 16, 46, 0.14);   /* CRS red, low alpha = owed */
    border-radius: 4px;
    overflow: hidden;
    width: 100%;
}
.payment-progress-fill {
    display: block;
    height: 100%;
    width: var(--paid-pct, 0%);
    background: linear-gradient(90deg, #0f9d58 0%, #16a34a 100%);
    border-radius: 4px;
    transition: width 0.2s ease-out;
}

/* Payment progress bar — green fill on a light-red track. Width = paid
   ÷ invoiced %. Empty bar = nothing paid; full bar = fully paid. */
.cs-payment-bar {
    height: 6px;
    background: rgba(200, 16, 46, 0.12);   /* CRS red, low alpha = "owed" */
    border-radius: 3px;
    overflow: hidden;
    margin: 4px 0 2px;
}
.cs-payment-bar-fill {
    display: block;
    height: 100%;
    background: rgba(15, 157, 88, 0.85);   /* green = paid */
    border-radius: 3px;
    transition: width 0.2s ease-out;
}
.cs-payment-line {
    display: flex;
    justify-content: space-between;
    gap: 4px;
}
.cs-payment-line > span {
    display: inline-flex;
    align-items: center;
    gap: 3px;
}
.cs-payment-paid {
    color: #0b7a45;
    font-weight: 500;
}
.cs-payment-paid .fa-check-circle {
    color: #0f9d58;
}
.cs-payment-owed {
    color: var(--crs-gray-600, #6c757d);
}
.cs-payment-owed .fa-circle {
    color: var(--crs-gray-300, #dee2e6);
    font-size: 0.5rem;
}
.cs-payment-owed.is-owed {
    color: var(--crs-red, #c8102e);
    font-weight: 600;
}
.cs-payment-owed.is-owed .fa-exclamation-circle {
    color: var(--crs-red, #c8102e);
}

/* Customer share bars — visual indicator of what % of the rep's TTM
   revenue / commission this customer represents. Each pill has a tinted
   fill behind the text whose width = the % share, so the eye reads the
   share AT A GLANCE before reading the number. */
.customer-share-bars {
    display: flex;
    flex-direction: column;
    gap: 3px;
    margin-top: 3px;
}
.share-bar {
    position: relative;
    display: block;
    height: 18px;
    border: 1px solid var(--crs-gray-300, #dee2e6);
    border-radius: 3px;
    overflow: hidden;
    background: var(--crs-gray-100, #f6f7f9);
    line-height: 16px;
}
.share-bar-fill {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: var(--pct, 0%);
    z-index: 0;
    /* Cap fill at 100% so values >100% don't overflow visually. */
    max-width: 100%;
}
.share-bar-fill-revenue   { background: rgba(29, 112, 184, 0.18); }   /* blue tint */
.share-bar-fill-commission{ background: rgba(15, 157, 88, 0.20); }    /* green tint */
.share-bar-text {
    position: relative;
    z-index: 1;
    padding: 0 6px;
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--crs-gray-800, #1f2937);
    white-space: nowrap;
}

.split-hint {
    font-size: 0.72rem;
    color: var(--crs-gray-600);
    font-style: italic;
    line-height: 1.2;
    margin-top: 2px;
}

/* Customer-payment status pills on the invoice-detail / customer-detail
   table. Partial gets a saturated amber so it visually stands out among
   long lists of "paid" rows — that's the row the user usually wants to
   investigate ("why hasn't this closed yet?"). Paid is muted green;
   unpaid is muted red. Color choices match the dashboard's existing
   payment-progress bar so the page reads as a single visual language. */
.payment-status-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 0.78rem;
    font-weight: 600;
    text-transform: lowercase;
    letter-spacing: 0.01em;
    line-height: 1.4;
    border: 1px solid currentColor;
}
.payment-status-pill .fas {
    font-size: 0.72rem;
}
.payment-status-paid {
    color: #0b7a45;
    background: #d1fae5;
    border-color: #6ee7b7;
}
.payment-status-partial {
    /* Saturated amber — the "needs attention" row. Higher contrast than
       paid/unpaid so it pops in a long list of green checkmarks. */
    color: #92400e;
    background: #fde68a;
    border-color: #f59e0b;
    box-shadow: 0 1px 0 rgba(245, 158, 11, 0.25);
}
.payment-status-unpaid {
    color: #991b1b;
    background: #fee2e2;
    border-color: #fca5a5;
}

/* "mixed basis" tag on the Commissionable KPI label — surfaces that
   the displayed total is a sum of rule-correct bases (some rows on
   gross basis, some on gross-margin basis), since the formula sub-line
   alone can't fully convey that. Same purple as the per-row basis-tag
   so the visual language stays consistent. */
.invoice-kpi-label .kpi-basis-tag {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 6px;
    font-size: 0.65rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    border-radius: 4px;
    color: #5b21b6;
    background: #ede9fe;
    border: 1px solid #a78bfa;
    line-height: 1.4;
    vertical-align: 1px;
    cursor: help;
}
.invoice-kpi-label .kpi-basis-tag .fas {
    font-size: 0.6rem;
    margin-right: 2px;
}

/* Annotation under a deduct in the Commissionable formula sub-line —
   used to flag that "− Cost" only applies to GM rows. Subtle, italic,
   small font so it reads as a footnote not a competing value. */
.invoice-kpi-sub .deduct .deduct-note {
    font-style: italic;
    font-size: 0.78em;
    color: var(--crs-gray-500, #9ca3af);
    margin-left: 2px;
}

/* Earned vs Potential split shown under the Commission on These Rows
   KPI when a non-trivial potential exists. Two pills side-by-side
   joined by a "+" so the math reads: earned + potential = full picture
   of this month's posted-invoice commission story. */
.kpi-commission-split {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 4px;
    font-size: 0.75rem;
    flex-wrap: wrap;
    line-height: 1.4;
}
.kpi-commission-split .fas {
    font-size: 0.72rem;
    margin-right: 2px;
}
.kpi-commission-earned {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 10px;
    color: #0b7a45;
    background: #d1fae5;
    border: 1px solid #6ee7b7;
    font-weight: 600;
}
.kpi-commission-potential {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 10px;
    color: #92400e;
    background: #fde68a;
    border: 1px solid #f59e0b;
    font-weight: 600;
}
.kpi-commission-divider {
    color: var(--crs-gray-500, #9ca3af);
    font-weight: 700;
}

/* Formula appendix on the "across all invoices" subtitle of the
   Commissionable KPI tile — shows the unfiltered breakdown
   ($27,300 − PT $400 − L/D $400) so the user sees what makes up
   the all-invoices figure alongside the filtered formula above. */
.invoice-kpi-filtered .kpi-sub-formula {
    display: inline-block;
    color: var(--crs-gray-600, #6b7280);
    font-size: 0.85em;
    font-weight: 400;
    margin-left: 4px;
}

/* Per-row basis tag in the Commission Rate column. Distinguishes
   gross-basis rows (amount − PT − LD) from gross-margin-basis rows
   (amount − cost − PT − LD) so users can see at a glance which math
   was applied to a row's commission. Same shape as the bucket-mode
   tags so the row's "this is how the engine treated it" annotations
   read as a consistent set. */
.basis-tag {
    display: inline-block;
    margin-left: 4px;
    padding: 1px 6px;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    border-radius: 4px;
    border: 1px solid currentColor;
    line-height: 1.4;
    vertical-align: 1px;
    white-space: nowrap;
}
.basis-tag .fas { margin-right: 2px; font-size: 0.65rem; }
.basis-tag.basis-tag-gm {
    color: #5b21b6;          /* purple — the "non-default" path */
    background: #ede9fe;
    border-color: #a78bfa;
}
.basis-tag.basis-tag-gross {
    color: var(--crs-gray-700, #374151);
    background: var(--crs-gray-100, #f3f4f6);
    border-color: var(--crs-gray-300, #d1d5db);
}

/* Active-filter banner — sits above the KPI tile strip whenever the
   user has toggled "Paid by Customer" or "Not Yet Paid". One canonical
   notification beats per-tile pills scattered across the page. Color
   shifts with the filter (green = paid, amber = unpaid) so the visual
   matches the row payment-status pills + the bucket-mode tags. */
.filter-status-banner {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 18px;
    margin-bottom: 1rem;
    border-radius: 12px;
    border: 1px solid;
    font-size: 0.92rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04),
                0 1px 2px rgba(0, 0, 0, 0.03);
    transition: box-shadow 0.15s ease;
}

/* "Commission earned this month" callout — shown on the All Invoices
   tab as the rep's paycheck-side number for the month (paid-mode
   commission across any invoice with cash collected this month).
   Distinct from the KPI tiles below it, which describe POSTED-in-month
   activity. Hidden whenever a sub-filter (Paid/Unpaid) is active — the
   filter banner takes over context. */
.earned-this-month-callout {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 14px 20px;
    margin-bottom: 0;
    border-radius: 12px;
    border: 1px solid rgba(16, 185, 129, 0.3);
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.08), rgba(5, 150, 105, 0.04));
    box-shadow: 0 1px 3px rgba(16, 185, 129, 0.08);
}
.earned-this-month-icon {
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(16, 185, 129, 0.15);
    color: #047857;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
}
.earned-this-month-body {
    flex: 1 1 auto;
    min-width: 0;
}
.earned-this-month-label {
    font-size: 0.85rem;
    color: #065f46;
    font-weight: 600;
    margin-bottom: 2px;
}
.earned-this-month-sub {
    font-weight: 400;
    color: #047857;
    font-size: 0.78rem;
}
.earned-this-month-value {
    font-size: 1.65rem;
    font-weight: 700;
    color: #047857;
    line-height: 1.1;
}
.earned-this-month-link {
    flex: 0 0 auto;
    color: #047857;
    font-weight: 600;
    font-size: 0.85rem;
    text-decoration: none;
    white-space: nowrap;
    padding: 6px 12px;
    border-radius: 8px;
    border: 1px solid rgba(16, 185, 129, 0.35);
    background: rgba(255, 255, 255, 0.6);
    transition: background 0.15s ease, border-color 0.15s ease;
}
.earned-this-month-link:hover {
    background: rgba(255, 255, 255, 0.95);
    border-color: rgba(16, 185, 129, 0.55);
    color: #065f46;
    text-decoration: none;
}
/* The CTA also renders as a <button> when it triggers a client-side
   tab toggle instead of navigating (so the page doesn't reload). The
   button defaults (gray border, autosizing, focus ring) would clash
   with the pill styling above, so we explicitly reset them. */
button.earned-this-month-link,
button.earned-this-month-link-toggle {
    cursor: pointer;
    font-family: inherit;
    line-height: inherit;
}
button.earned-this-month-link:focus,
button.earned-this-month-link-toggle:focus {
    outline: 2px solid rgba(16, 185, 129, 0.45);
    outline-offset: 1px;
}

/* Posted-mode rep — commission credits at invoice posting, not on
   customer payment. Visually shift to indigo to make it clear at a
   glance that the framing differs from the cash-driven default. */
.earned-this-month-mode-posted {
    border-color: rgba(99, 102, 241, 0.3);
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.08), rgba(79, 70, 229, 0.04));
    box-shadow: 0 1px 3px rgba(99, 102, 241, 0.08);
}
.earned-this-month-mode-posted .earned-this-month-icon {
    background: rgba(99, 102, 241, 0.15);
    color: #4338ca;
}
.earned-this-month-mode-posted .earned-this-month-label,
.earned-this-month-mode-posted .earned-this-month-value,
.earned-this-month-mode-posted .earned-this-month-sub,
.earned-this-month-mode-posted .earned-this-month-link {
    color: #3730a3;
}
.earned-this-month-mode-posted .earned-this-month-link {
    border-color: rgba(99, 102, 241, 0.35);
}
.earned-this-month-mode-posted .earned-this-month-link:hover {
    border-color: rgba(99, 102, 241, 0.55);
    color: #312e81;
}

/* Mixed-mode rep — combination of paid-mode and posted-mode rules.
   Slate / neutral palette since neither framing dominates; the
   breakdown line carries the explanation. */
.earned-this-month-mode-mixed {
    border-color: rgba(100, 116, 139, 0.3);
    background: linear-gradient(135deg, rgba(100, 116, 139, 0.06), rgba(71, 85, 105, 0.03));
}
.earned-this-month-mode-mixed .earned-this-month-icon {
    background: rgba(100, 116, 139, 0.15);
    color: #334155;
}
.earned-this-month-mode-mixed .earned-this-month-label,
.earned-this-month-mode-mixed .earned-this-month-value,
.earned-this-month-mode-mixed .earned-this-month-sub,
.earned-this-month-mode-mixed .earned-this-month-link {
    color: #1e293b;
}
.earned-this-month-mode-mixed .earned-this-month-link {
    border-color: rgba(100, 116, 139, 0.35);
}
.earned-this-month-mode-mixed .earned-this-month-link:hover {
    border-color: rgba(100, 116, 139, 0.55);
    color: #0f172a;
}

/* Paid-by-Customer filter variant — re-uses the earned-this-month
   callout shell but is reused as the active-filter banner under the
   Paid by Customer tab. Same green palette as the rep's earned
   callout under All (which makes sense — both are about cash-driven
   commission), with the headline value being the commission EARNED
   on the paid-this-month slice. */
.earned-this-month-mode-filter-paid {
    /* Inherits the default (green) callout palette — no overrides
       needed beyond the base class. Distinct class kept so future
       tweaks can target it without touching the All-tab callout. */
}

/* Not-Yet-Paid filter variant — amber, matching the row payment-status
   "pending" pills + the Not Yet Paid tab color. The hero value is
   POTENTIAL commission (what the rep will earn when these outstanding
   invoices are collected), so the visual cue should not feel
   celebratory like the green paid variant. */
.earned-this-month-mode-filter-unpaid {
    border-color: rgba(245, 158, 11, 0.32);
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.08), rgba(217, 119, 6, 0.04));
    box-shadow: 0 1px 3px rgba(245, 158, 11, 0.08);
}
.earned-this-month-mode-filter-unpaid .earned-this-month-icon {
    background: rgba(245, 158, 11, 0.18);
    color: #92400e;
}
.earned-this-month-mode-filter-unpaid .earned-this-month-label,
.earned-this-month-mode-filter-unpaid .earned-this-month-value,
.earned-this-month-mode-filter-unpaid .earned-this-month-sub,
.earned-this-month-mode-filter-unpaid .earned-this-month-link {
    color: #92400e;
}
.earned-this-month-mode-filter-unpaid .earned-this-month-link {
    border-color: rgba(245, 158, 11, 0.4);
    background: rgba(255, 255, 255, 0.7);
}
.earned-this-month-mode-filter-unpaid .earned-this-month-link:hover {
    border-color: rgba(245, 158, 11, 0.6);
    color: #78350f;
    background: rgba(255, 255, 255, 0.95);
}

/* Mixed-mode breakdown row — shows the paid-mode + posted-mode
   sub-totals so the rep can see which slice came from each rule
   type. Two pills side-by-side under the headline value. */
.earned-this-month-breakdown {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 6px;
    font-size: 0.82rem;
    color: #334155;
    flex-wrap: wrap;
}
.earned-this-month-bd-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.7);
    border: 1px solid rgba(100, 116, 139, 0.2);
    font-weight: 600;
}
.earned-this-month-bd-item > i {
    opacity: 0.7;
}
.earned-this-month-bd-label {
    font-weight: 400;
    color: #475569;
    margin-left: 2px;
}
.earned-this-month-bd-sep {
    color: #94a3b8;
    font-weight: 700;
}

/* Per-tile filter chip — small inline pill appended to each KPI tile's
   label when a sub-filter (Paid/Unpaid) is active. Makes it explicit
   that the headline value on the tile is scoped to that filter, not
   the unfiltered set. The "SHOWING ONLY" banner above the tiles still
   declares the filter globally; this chip reinforces it at the point
   the user reads each value. */
.invoice-kpi-filter-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-left: 8px;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0.01em;
    vertical-align: middle;
    white-space: nowrap;
    border: 1px solid;
}
.invoice-kpi-filter-tag > i {
    font-size: 0.65rem;
}
.invoice-kpi-filter-tag-paid {
    background: rgba(16, 185, 129, 0.12);
    border-color: rgba(16, 185, 129, 0.35);
    color: #065f46;
}
.invoice-kpi-filter-tag-unpaid {
    background: rgba(245, 158, 11, 0.12);
    border-color: rgba(245, 158, 11, 0.35);
    color: #92400e;
}

/* Per-tile contextual sub-label — appears just under the tile's
   headline value when a sub-filter is active. Explains in plain
   language what the number means under THIS filter (e.g. "$0 by
   definition — these invoices have been paid in full"). Pairs with
   the inline filter chip on the label row above. */
.invoice-kpi-filter-context {
    font-size: 0.78rem;
    line-height: 1.3;
    margin-top: 4px;
    margin-bottom: 4px;
    padding: 4px 8px;
    border-radius: 6px;
    border-left: 3px solid;
    font-style: italic;
}
.invoice-kpi-filter-context.context-paid {
    background: rgba(16, 185, 129, 0.06);
    border-left-color: rgba(16, 185, 129, 0.6);
    color: #065f46;
}
.invoice-kpi-filter-context.context-unpaid {
    background: rgba(245, 158, 11, 0.06);
    border-left-color: rgba(245, 158, 11, 0.6);
    color: #92400e;
}
/* All-tab variant — neutral slate palette so the All view's per-tile
   context lines (e.g. "Face value of every invoice you posted this
   month") read as informational baseline, not a filter-specific
   override. Distinguishable from the green/amber filtered variants
   so the rep can tell at a glance which slice they're looking at. */
.invoice-kpi-filter-context.context-all {
    background: rgba(100, 116, 139, 0.05);
    border-left-color: rgba(100, 116, 139, 0.5);
    color: #334155;
}
.filter-status-banner:hover {
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06),
                0 1px 3px rgba(0, 0, 0, 0.04);
}

/* Filter-icon disc on the left — gives the banner a sturdy anchor
   point and a clear "this is a filter notification" cue. */
.filter-status-banner .filter-status-icon-wrap {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    flex-shrink: 0;
    background: rgba(255, 255, 255, 0.55);
    border: 1px solid rgba(0, 0, 0, 0.06);
}
.filter-status-banner .filter-status-icon-wrap .fa-filter {
    font-size: 0.95rem;
}

/* Inline text block: prefix → arrow → bold label. The arrow gives
   the eye a path to the filter name without adding a colon. */
.filter-status-banner .filter-status-text {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex: 1;
    flex-wrap: wrap;
    line-height: 1.3;
}
.filter-status-banner .filter-status-prefix {
    color: var(--crs-gray-600, #6b7280);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 0.78rem;
}
.filter-status-banner .filter-status-arrow {
    font-size: 0.7rem;
    opacity: 0.55;
}
.filter-status-banner .filter-status-label {
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: -0.01em;
}

/* Clear-filter button — outlined, compact, dismissive without being
   loud. Hover feedback matches the banner color so the click target
   feels integrated. */
.filter-status-banner .filter-status-clear {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-left: auto;
    padding: 5px 12px;
    font-size: 0.82rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    background: rgba(255, 255, 255, 0.55);
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.15s ease, transform 0.05s ease;
    color: inherit;
}
.filter-status-banner .filter-status-clear:hover {
    background: rgba(255, 255, 255, 0.85);
}
.filter-status-banner .filter-status-clear:active {
    transform: translateY(1px);
}
.filter-status-banner .filter-status-clear .fa-times-circle {
    font-size: 0.85rem;
    opacity: 0.7;
}

/* Paid (green) variant — soft mint gradient with green text. */
.filter-status-banner-paid {
    color: #065f46;
    background: linear-gradient(135deg, #d1fae5 0%, #ecfdf5 100%);
    border-color: #6ee7b7;
}
.filter-status-banner-paid .filter-status-icon-wrap {
    color: #047857;
}
.filter-status-banner-paid .filter-status-arrow {
    color: #047857;
}

/* Unpaid (amber) variant — warm honey gradient with brown text. */
.filter-status-banner-unpaid {
    color: #78350f;
    background: linear-gradient(135deg, #fde68a 0%, #fef3c7 100%);
    border-color: #f59e0b;
}
.filter-status-banner-unpaid .filter-status-icon-wrap {
    color: #b45309;
}
.filter-status-banner-unpaid .filter-status-arrow {
    color: #b45309;
}

/* Shared "Totals" footer row across every commission-app table that
   carries a tfoot. Light gray fill + thicker top border so it visually
   separates from the data rows; numbers right-align via the dollar
   tabular-nums treatment that DataTables already applies. */
tfoot tr.table-totals-row td {
    background: var(--crs-gray-50, #f9fafb);
    border-top: 2px solid var(--crs-gray-300, #d1d5db);
    font-weight: 600;
    padding: 8px !important;
}
tfoot tr.table-totals-row td:first-child {
    text-align: left;
}

/* Tfoot deduction sub-line on the invoice-lines page. Shows the gross
   sum struck through followed by the PT/LD deductions, so the user
   sees how the smaller "commissionable" total was derived. */
.line-foot-deduction {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 8px;
    margin-top: 3px;
    font-size: 0.7rem;
    line-height: 1.3;
    color: var(--crs-gray-600, #6b7280);
}
.line-foot-deduction-orig {
    text-decoration: line-through;
    text-decoration-color: rgba(107, 114, 128, 0.55);
    color: var(--crs-gray-500, #9ca3af);
}
.line-foot-deduction-sub {
    color: var(--crs-red, #c8102e);
    font-weight: 500;
}

/* Override column on the invoice-lines drill-down. Stacks the per-line
   "Edit line" pencil (BCDocumentOverride on bcinvoiceline) above the
   per-Object-No "Override Object No" button (PassThroughObjectNo) when
   both apply. */
.line-override-cell {
    white-space: nowrap;
}
.line-override-cell .btn,
.line-override-cell .badge {
    display: inline-block;
    margin: 0;
}
.line-override-cell .btn + .btn,
.line-override-cell .btn + .badge {
    display: block;
    margin-top: 4px;
}

/* Per-line commission column on the invoice-lines drill-down. The
   banner above the table announces the rule + basis; cells just show
   the dollars. Hint text underneath calls out non-commissionable lines
   (pass-through / lost-damaged) so the $0.00 reads explicit. */
.line-commission-banner {
    border-left: 3px solid var(--crs-red, #c8102e);
    background: var(--crs-gray-50, #f9fafb);
}
.line-commission-banner .rate-pill {
    margin: 0 4px;
}
.line-commission-cell {
    text-align: right;
    white-space: nowrap;
}
.line-commission-hint {
    font-size: 0.68rem;
    color: var(--crs-gray-500, #9ca3af);
    font-style: italic;
    line-height: 1.2;
    margin-top: 1px;
}
.line-commission-footer {
    background: var(--crs-gray-50, #f9fafb);
    border-top: 2px solid var(--crs-gray-300, #d1d5db);
}
.line-commission-footer td { padding: 8px !important; }

/* Commission column "Earned: $X · paid-mode" sub-line. Shows the rep's
   actual booked commission for paid-mode rules (full × rate × paid_ratio)
   alongside the forecast in the main cell. Posted-mode rules render a
   simpler "earned at posting" tag — earned == forecast for those. */
.commission-earned-hint {
    font-size: 0.72rem;
    line-height: 1.25;
    margin-top: 3px;
    color: var(--crs-gray-700);
    white-space: nowrap;
}
.commission-earned-hint i {
    margin-right: 2px;
    color: var(--crs-green, #16a34a);
}
.commission-earned-fully i {
    color: var(--crs-green, #16a34a);
}
.commission-bucket-tag {
    display: inline-block;
    margin-left: 4px;
    padding: 0 5px;
    font-size: 0.62rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    border-radius: 4px;
    border: 1px solid currentColor;
    line-height: 1.4;
    vertical-align: 1px;
}
.commission-bucket-tag.bucket-paid {
    color: #92400e;
    background: #fef3c7;
    border-color: #fbbf24;
}
.commission-bucket-tag.bucket-posted {
    color: #1e40af;
    background: #dbeafe;
    border-color: #60a5fa;
}
.commission-bucket-tag.bucket-credited {
    color: #3f6212;
    background: #ecfccb;
    border-color: #a3e635;
}

/* Dashboard callout: "You share the following rep codes with other users." */
.split-banner {
    background: var(--crs-red-light);
    border: 1px solid var(--crs-red-tint);
    border-left: 3px solid var(--crs-red);
    border-radius: var(--crs-radius);
    padding: 0.7rem 0.9rem;
    margin-bottom: 1rem;
    color: var(--crs-gray-900);
    font-size: 0.9rem;
}
.split-banner .split-banner-title {
    font-weight: 600;
    color: var(--crs-red-dark);
    margin-right: 0.5rem;
}
.split-banner .split-banner-title i { margin-right: 0.35rem; }
.split-banner ul {
    list-style: none;
    padding: 0;
    margin: 0.3rem 0 0 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 1rem;
}
.split-banner li {
    font-variant-numeric: tabular-nums;
}
.split-banner li code {
    background: var(--crs-white);
    border: 1px solid var(--crs-red-tint);
    border-radius: 4px;
    padding: 0.05rem 0.35rem;
    font-size: 0.82rem;
    color: var(--crs-red-dark);
    margin-right: 0.2rem;
}

/* Per-rule $ metrics under each rule in the special-rules banner. */
.special-rule-totals {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem 1.1rem;
    margin-top: 0.25rem;
    padding-top: 0.25rem;
    border-top: 1px dashed var(--crs-red-tint);
    font-size: 0.85rem;
}
.special-rule-metric { color: var(--crs-gray-700); }
.special-rule-metric strong {
    color: var(--crs-red-dark);
    font-variant-numeric: tabular-nums;
}
.special-rule-metric.special-rule-meta {
    color: var(--crs-gray-600);
    font-style: italic;
}

/* Per-rule badges in the Special commission rules banner. Show role
   (Default / Special / Bonus) and a "Excluded from quota" flag when the
   rule's revenue doesn't count toward % of Quota math. */
.rule-role-badge {
    display: inline-block;
    padding: 0.08rem 0.5rem;
    margin: 0 0.15rem;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    vertical-align: 1px;
    line-height: 1.4;
    background: var(--crs-gray-200, #e5e7eb);
    color: var(--crs-gray-800, #1f2937);
    border: 1px solid var(--crs-gray-300, #d1d5db);
}
.rule-role-badge.rule-role-special {
    background: rgba(200, 16, 46, 0.08);
    color: var(--crs-red-dark);
    border-color: var(--crs-red-tint, #fce8ec);
}
.rule-role-badge.rule-role-bonus {
    background: rgba(15, 157, 88, 0.10);
    color: #0b7a45;
    border-color: rgba(15, 157, 88, 0.25);
}
.rule-role-badge.rule-role-default {
    background: rgba(0, 102, 204, 0.10);
    color: #0b5fa6;
    border-color: rgba(0, 102, 204, 0.25);
}
.rule-role-badge.rule-role-noquota {
    background: rgba(217, 119, 6, 0.12);
    color: #92400e;
    border-color: rgba(217, 119, 6, 0.30);
}

/* View-filter pill buttons above the KPI cards (all / solo / shared). */
.view-filter {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    background: var(--crs-gray-100);
    border: 1px solid var(--crs-gray-300);
    border-radius: 999px;
    padding: 0.25rem;
}
.view-filter-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.35rem 0.9rem;
    border-radius: 999px;
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--crs-gray-700);
    text-decoration: none;
    transition: all var(--crs-trans);
    white-space: nowrap;
}
.view-filter-btn:hover {
    background: var(--crs-white);
    color: var(--crs-red);
    text-decoration: none;
}
.view-filter-btn.active {
    background: var(--crs-red);
    color: var(--crs-white);
    box-shadow: var(--crs-shadow-sm);
}
.view-filter-btn.active:hover { color: var(--crs-white); }
.view-filter-btn i { font-size: 0.8rem; }

/* Rep-name tooltip trigger on the Commission Dashboard heading */
.rep-name-tip {
    border-bottom: 1px dotted var(--crs-gray-500);
    cursor: help;
}

/* --------------------------------------------------------------------- *
 * Responsive "card" transformation for wide data tables on phones       *
 * Apply the `.responsive-cards` class to any <table> with <td data-label>*
 * cells. Below 768px, rows stack into readable cards with labeled       *
 * fields instead of forcing a horizontal scroll.                        *
 * DataTables' sort/search/paginate still work — we only change display. *
 * --------------------------------------------------------------------- */

@media (max-width: 768px) {
    .responsive-cards thead { display: none; }
    .responsive-cards,
    .responsive-cards tbody,
    .responsive-cards tr,
    .responsive-cards td {
        display: block;
        width: 100%;
        box-sizing: border-box;
    }
    .responsive-cards tr {
        background: var(--crs-white);
        border: 1px solid var(--crs-gray-300);
        border-left: 3px solid var(--crs-red);
        border-radius: var(--crs-radius);
        box-shadow: var(--crs-shadow-sm);
        margin-bottom: 0.75rem;
        padding: 0.65rem 0.85rem;
        /* Two-column mini-grid so "Amount + Win%" line up neatly */
        display: grid !important;
        grid-template-columns: 1fr 1fr;
        gap: 0.4rem 0.8rem;
    }
    .responsive-cards td {
        text-align: left !important;
        padding: 0 !important;
        border: none !important;
        background: transparent !important;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: normal;
    }
    .responsive-cards td::before {
        content: attr(data-label);
        display: block;
        font-size: 0.68rem;
        font-weight: 600;
        letter-spacing: 0.05em;
        text-transform: uppercase;
        color: var(--crs-gray-600);
        margin-bottom: 0.1rem;
    }
    /* Opportunity title spans full width, big and prominent */
    .responsive-cards td.oppty-name-cell {
        grid-column: 1 / -1;
        font-weight: 600;
        font-size: 0.95rem;
        padding-bottom: 0.2rem !important;
        border-bottom: 1px solid var(--crs-gray-200) !important;
        margin-bottom: 0.3rem;
    }
    .responsive-cards td.oppty-name-cell::before {
        display: none;
    }
    .responsive-cards td.oppty-name-cell a {
        color: var(--crs-red);
        font-weight: 600;
    }
    /* Amount stands out in brand red */
    .responsive-cards td.oppty-amount-cell {
        color: var(--crs-gray-900);
        font-weight: 700;
        font-size: 1rem;
        font-variant-numeric: tabular-nums;
    }
    /* DataTables pagination / length / filter controls wrap cleanly */
    .dt-container .dt-length,
    .dt-container .dt-search { margin-bottom: 0.5rem; }
}
.chart-cell--text { padding: 0.25rem 0.25rem; }

/* KPI list (inside cards) */
.kpi-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.kpi-list li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.65rem 0;
    border-bottom: 1px solid var(--crs-gray-200);
    font-size: 0.95rem;
    color: var(--crs-gray-700);
}
.kpi-list li:last-child { border-bottom: none; }
.kpi-list li i { color: var(--crs-red); margin-right: 0.5rem; }
.kpi-list li span:last-child {
    font-weight: 700;
    color: var(--crs-gray-900);
    font-variant-numeric: tabular-nums;
}
.kpi-list--compact li { padding: 0.4rem 0; font-size: 0.9rem; }
.kpi-list .trophy { color: #D97706; }

.section-label {
    text-transform: uppercase;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--crs-gray-600);
    margin-bottom: 0.55rem;
}
.section-label i { color: var(--crs-red); margin-right: 0.35rem; }

.bounty-link {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.55rem 0.7rem;
    background: var(--crs-red-light);
    color: var(--crs-red-dark) !important;
    border-radius: var(--crs-radius);
    font-weight: 500;
    margin-bottom: 0.4rem;
    transition: all var(--crs-trans);
    cursor: pointer;
    text-decoration: none;
}
.bounty-link:hover {
    background: var(--crs-red);
    color: var(--crs-white) !important;
}
.bounty-link i { color: inherit !important; }

.bounty-empty {
    background: var(--crs-gray-100);
    border: 1px dashed var(--crs-gray-400);
    border-radius: var(--crs-radius);
    color: var(--crs-gray-600);
    padding: 0.75rem;
    font-size: 0.9rem;
}
.bounty-empty i { color: var(--crs-red); margin-right: 0.4rem; }

/* Open Opportunities table — tighten up */
#table_id { margin-top: 0.5rem; }
#table_id thead th {
    background: var(--crs-gray-100);
    color: var(--crs-gray-700);
    font-size: 0.78rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.04em;
    font-weight: 600;
    border-bottom: 2px solid var(--crs-gray-300);
    padding: 0.6rem 0.75rem;
}
#table_id tbody td {
    padding: 0.55rem 0.75rem;
    font-size: 0.9rem;
    color: var(--crs-gray-900);
}

/* --------------------------------------------------------------------- *
 * Deals closing soon (sidebar)                                           *
 * --------------------------------------------------------------------- */

.deals-closing {
    margin-top: 1.5rem;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: var(--crs-radius);
    padding: 0.75rem;
}
.deals-closing-header {
    color: var(--crs-white);
    font-weight: 600;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding-bottom: 0.6rem;
    margin-bottom: 0.5rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    display: flex;
    align-items: center;
    gap: 0.4rem;
}
.deals-closing-header i { color: var(--crs-red); }
.deals-closing-list {
    list-style: none;
    padding: 0;
    margin: 0;
    max-height: 280px;
    overflow-y: auto;
}
.deals-closing-list li { margin: 0; padding: 0; }
.deals-closing-list li + li { border-top: 1px solid rgba(255, 255, 255, 0.06); }
.deals-closing-list a {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    padding: 0.5rem 0.25rem;
    color: var(--crs-white) !important;
    text-decoration: none;
    font-size: 0.85rem;
    transition: background var(--crs-trans);
    border-radius: calc(var(--crs-radius) - 2px);
}
.deals-closing-list a:hover {
    background: rgba(200, 16, 46, 0.14);
    padding-left: 0.5rem;
}
.deals-closing-name {
    font-weight: 500;
    line-height: 1.3;
    overflow-wrap: break-word;
}
.deals-closing-date {
    font-size: 0.72rem;
    color: rgba(255, 255, 255, 0.6);
    letter-spacing: 0.02em;
}
.deals-closing-date i { margin-right: 0.2rem; }
.deals-closing-list::-webkit-scrollbar { width: 6px; }
.deals-closing-list::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.15);
    border-radius: 3px;
}
.deals-closing-list::-webkit-scrollbar-thumb:hover { background: var(--crs-red); }

/* --------------------------------------------------------------------- *
 * Toggle switches (.switch/.slider) — pink -> CRS red                    *
 * --------------------------------------------------------------------- */

.switch .slider { background-color: var(--crs-gray-500) !important; }
.switch input:checked + .slider {
    background-color: var(--crs-red) !important;
}
.switch input:focus + .slider {
    box-shadow: 0 0 0 0.2rem rgba(200, 16, 46, 0.25) !important;
}

/* --------------------------------------------------------------------- *
 * Mobile responsive tweaks (shared across sales + commissions)           *
 * --------------------------------------------------------------------- */

/* Let Bootstrap .row cells wrap naturally on mobile */
@media (max-width: 768px) {
    html, body { overflow-x: hidden; }
    .container-fluid { padding: 0.85rem !important; }

    /* Commissions dashboard: stack KPI cards and tighten spacing */
    .row > [class*="col-md-"],
    .row > [class*="col-lg-"] { margin-bottom: 0.75rem; }

    /* Typography scale-down so headings don't wrap awkwardly */
    h1 { font-size: 1.45rem; }
    h2 { font-size: 1.2rem; }
    h3 { font-size: 1.05rem; }
    h4 { font-size: 0.95rem; }
    .kpi-value { font-size: 1.35rem; }
    .kpi-card { min-height: 90px; padding: 0.85rem 0.95rem; }

    /* Cards take less padding on mobile */
    .sales-card { padding: 0.9rem 0.95rem; margin-bottom: 0.9rem; }
    .sales-card-header {
        font-size: 0.95rem;
        flex-wrap: wrap;
        gap: 0.4rem;
    }
    .sales-card-action { font-size: 0.72rem; padding: 0.2rem 0.55rem; }

    /* Stack two/three-column chart rows */
    .chart-row--two, .chart-row--three { grid-template-columns: 1fr !important; }
    .chart-cell canvas { max-height: 240px; }

    /* Force table-responsive wrappers to truly scroll horizontally */
    .table-responsive {
        -webkit-overflow-scrolling: touch;
        margin-bottom: 0.75rem;
    }
    .table { font-size: 0.82rem; }
    .table td, .table th { padding: 0.4rem 0.5rem !important; white-space: nowrap; }

    /* DataTables toolbar stacks vertically */
    .dt-container .dt-length,
    .dt-container .dt-search,
    .dt-container .dt-info,
    .dt-container .dt-paging {
        float: none !important;
        text-align: left !important;
        width: 100%;
        margin-bottom: 0.4rem;
    }
    .dt-container .dt-search input { width: 100%; max-width: none; }

    /* Commission page selector pills wrap */
    .period-selector, .period-selector .btn-group {
        display: flex;
        flex-wrap: wrap;
        gap: 0.35rem;
    }

    /* Buttons: full-width on small screens when part of a card footer */
    .sales-card .btn-block-sm { width: 100%; }

    /* Bootstrap d-flex/justify-content-between groups — allow wrap */
    .d-flex.justify-content-between { flex-wrap: wrap; gap: 0.5rem; }
}

/* Extra-tight layout for very narrow phones */
@media (max-width: 480px) {
    .kpi-grid { grid-template-columns: 1fr 1fr; gap: 0.6rem; }
    .kpi-card { padding: 0.75rem 0.85rem; min-height: 80px; }
    .kpi-value { font-size: 1.15rem; }
    .kpi-label { font-size: 0.72rem; }
    .main_content { padding: 0.7rem !important; }
    .sidebar .btn-group .dropdown-toggle { font-size: 0.9rem; padding: 0.45rem 0.6rem; }
}

/* Admin-like pages: make Django admin tables readable on mobile */
@media (max-width: 768px) {
    #content table, .change-list table, .change-form table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}

/* --------------------------------------------------------------------- *
 * Mobile-friendly forms (create opportunity, edit profile, etc.)         *
 * --------------------------------------------------------------------- */

/* Create-opportunity grid collapses to a single column on phones; on
   tablets it uses 2 columns so "amount + win %" can live side-by-side. */
@media (max-width: 991.98px) {
    .grid-new-oppty {
        grid-template-areas:
            'hexagroup hexagroup'
            'project_branch project_branch'
            'customer customer'
            'name name'
            'collaborator collaborator'
            'amount win'
            'start-date duration'
            'state city'
            'type status'
            'lob lob'
            'notes notes'
            'submit submit' !important;
        grid-template-columns: 1fr 1fr !important;
        grid-gap: 0.6rem !important;
    }
    .new-oppty-btn { max-width: none !important; width: 100%; }
}
@media (max-width: 575px) {
    .grid-new-oppty {
        grid-template-areas:
            'hexagroup'
            'project_branch'
            'customer'
            'name'
            'collaborator'
            'amount'
            'win'
            'start-date'
            'duration'
            'state'
            'city'
            'type'
            'status'
            'lob'
            'notes'
            'submit' !important;
        grid-template-columns: 1fr !important;
    }
}

/* Touch-friendly form controls everywhere (applies to crispy-rendered
   inputs, selects, textareas). iOS zooms the page on focus if the input
   font-size is below 16px — keep it at 16px on mobile. */
@media (max-width: 768px) {
    .form-control, .form-select, input[type=text], input[type=email],
    input[type=password], input[type=number], input[type=date],
    input[type=tel], input[type=url], select, textarea {
        font-size: 16px !important;
        min-height: 2.75rem;
        padding: 0.55rem 0.75rem !important;
        width: 100% !important;
        max-width: 100% !important;
    }
    textarea.form-control, textarea { min-height: 6rem; }
    label, .form-label, .control-label {
        font-size: 0.85rem;
        font-weight: 600;
        margin-bottom: 0.25rem !important;
        display: block;
    }
    .form-group { margin-bottom: 0.9rem !important; }
    .form-row { margin-left: 0 !important; margin-right: 0 !important; }
    .form-row > [class*="col-"] { padding-left: 0 !important; padding-right: 0 !important; }
    .btn { min-height: 2.75rem; font-size: 1rem; }
    .btn-block { width: 100% !important; }
    select.select2-hidden-accessible + .select2-container { width: 100% !important; }
    .select2-container .select2-selection--single,
    .select2-container--default .select2-selection--single { min-height: 2.75rem !important; }
    .select2-container--default .select2-selection--single .select2-selection__rendered {
        line-height: 2.6rem !important;
        font-size: 16px !important;
    }

    /* "Edit your information" panel (#login_form re-used for edit view) */
    #login_form {
        width: 100% !important;
        min-width: 0 !important;
        margin: 0.6rem auto !important;
        padding: 1.1rem 1rem !important;
    }
    #login_form .login_btn {
        width: 100% !important;
        padding: 0.7rem !important;
    }

    /* Any form wrapped in main_content: give it the card-style padding */
    .main_content form { padding: 0 0.25rem; }
}

/* Make the "Create Opportunity" heading + the potential-commission
   indicator wrap on small screens instead of running off the right. */
@media (max-width: 768px) {
    h1.main-h1, h1 {
        font-size: 1.2rem !important;
        line-height: 1.3;
        display: flex;
        flex-wrap: wrap;
        align-items: baseline;
        gap: 0.5rem;
    }
    #commission-amount {
        font-size: 1rem !important;
        font-weight: 700;
        color: var(--crs-red) !important;
    }
}

/* --------------------------------------------------------------------- *
 * Lines of Business — checkbox grid (crispy CheckboxSelectMultiple)      *
 * --------------------------------------------------------------------- */

/* Crispy/Bootstrap 4 CheckboxSelectMultiple — pill/tag toggle style.
   Structure: #div_id_…  >  label  +  div(wrapper)  >  div.custom-control … */
#div_id_base-project_lines_business > div:not(.custom-control),
#div_id_project_lines_business > div:not(.custom-control) {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding: 0.5rem 0;
}
#div_id_base-project_lines_business .custom-control.custom-checkbox,
#div_id_project_lines_business .custom-control.custom-checkbox {
    display: inline-flex;
    align-items: center;
    padding: 0.35rem 0.85rem 0.35rem 2rem;
    margin: 0;
    border: 1px solid #ced4da;
    border-radius: 50px;
    background: #fff;
    font-size: 0.825rem;
    white-space: nowrap;
    cursor: pointer;
    transition: all 0.15s ease;
    user-select: none;
}
#div_id_base-project_lines_business .custom-control.custom-checkbox:hover,
#div_id_project_lines_business .custom-control.custom-checkbox:hover {
    background: #f0f0f0;
    border-color: #adb5bd;
}
/* Checked state — highlight the pill */
#div_id_base-project_lines_business .custom-control-input:checked ~ .custom-control-label,
#div_id_project_lines_business .custom-control-input:checked ~ .custom-control-label {
    font-weight: 500;
}
#div_id_base-project_lines_business .custom-control-input:checked + .custom-control-label,
#div_id_project_lines_business .custom-control-input:checked + .custom-control-label {
    font-weight: 500;
}
/* Style the parent pill when its checkbox is checked */
#div_id_base-project_lines_business .custom-checkbox:has(.custom-control-input:checked),
#div_id_project_lines_business .custom-checkbox:has(.custom-control-input:checked) {
    background: #e8f4fd;
    border-color: #4a9fd5;
}
#div_id_base-project_lines_business .custom-control-label,
#div_id_project_lines_business .custom-control-label {
    margin-bottom: 0;
    cursor: pointer;
    font-weight: 400;
    line-height: 1.3;
}
/* Reposition the native checkbox inside the pill */
#div_id_base-project_lines_business .custom-control-input,
#div_id_project_lines_business .custom-control-input {
    position: absolute;
    left: 0.65rem;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1;
    opacity: 1;
    width: 1rem;
    height: 1rem;
    margin: 0;
}
/* Override Bootstrap's custom-control-label ::before/::after (the fake
   checkbox) since we're showing the real <input> */
#div_id_base-project_lines_business .custom-control-label::before,
#div_id_base-project_lines_business .custom-control-label::after,
#div_id_project_lines_business .custom-control-label::before,
#div_id_project_lines_business .custom-control-label::after {
    display: none;
}

/* --------------------------------------------------------------------- *
 * Opportunity DETAIL / EDIT page (/sales/<slug>) — mobile rules          *
 * --------------------------------------------------------------------- */

@media (max-width: 991.98px) {
    .edit-oppty {
        grid-template-columns: 1fr 1fr !important;
        max-width: 100% !important;
        grid-gap: 0.75rem !important;
        padding: 0 0.25rem;
    }
}
@media (max-width: 575px) {
    .edit-oppty {
        grid-template-columns: 1fr !important;
    }
}

@media (max-width: 768px) {
    .edit-oppty-submit {
        width: 100%;
        margin-left: 0 !important;
        margin-top: 0.5rem;
    }

    /* Upload + file list section — stack instead of side-by-side */
    .view-files-section {
        display: flex !important;
        flex-direction: column !important;
        height: auto !important;
        border-top: 1px solid var(--crs-red) !important;
        margin-top: 1.5rem !important;
        padding-top: 1rem;
        gap: 1rem;
    }
    .view-files-upload, .view-files-list { flex-grow: 1 !important; width: 100%; }
    .view-files-list > div[style*="justify-content: flex-end"] {
        justify-content: space-between !important;
        gap: 0.5rem;
        flex-wrap: wrap;
    }

    /* Similar-projects section: drop the fixed 100vh and the huge top spacing */
    .similar-projects-section {
        height: auto !important;
        border-top: 1px solid var(--crs-red);
        margin-top: 1.5rem !important;
    }
    #edit-project-name, #edit-project-name h1 {
        width: 100% !important;
        margin: 0.5rem 0 !important;
        padding-left: 0 !important;
    }
    #edit-project-name p { padding-left: 0 !important; font-size: 0.9rem !important; }
    #change-project { margin-bottom: 1rem !important; }
}

/* Desktop restore: the default inline styles on .view-files-section
   (display: flex; height: 100vh) were removed from the template, so
   reinstate them for wide screens. */
@media (min-width: 769px) {
    .view-files-section {
        display: flex;
        height: 100vh;
        border-top: 1px solid var(--crs-red);
        margin-top: 2rem;
    }
    .view-files-upload { flex-grow: 2; margin-top: 1rem; }
    .view-files-list { flex-grow: 4; }
    .similar-projects-section {
        border-top: 1px solid var(--crs-red);
        margin-top: 2rem;
        height: 100vh;
    }
}

/* Historical-month cells / columns ---------------------------------------
   Months overlaid from HistoricalCommissionData (hand-loaded pre-BC totals).
   Drill-down is available but shows summary data only. Style them so it's
   obvious at a glance the month is a totals-only entry — italic, slightly
   muted. The header gets a small clock icon (.historical-icon) and a subtle
   tinted background to mark the column. */
.historical-cell {
    color: var(--crs-gray-700, #495057);
    font-style: italic;
    border-bottom: 1px dotted var(--crs-gray-400, #ced4da);
}
a.historical-cell { text-decoration: none; }
a.historical-cell:hover { color: #2563eb; }
th.historical-col {
    background-color: #faf6ed !important;  /* warm parchment tint */
    cursor: help;
}
.historical-icon {
    font-size: 0.72em;
    margin-left: 3px;
    opacity: 0.75;
    color: var(--crs-gray-600, #6c757d);
}

/* Payment Pipeline — compact horizontal strip.
   Carries the "customer pays → commission grows" framing in one tight
   row instead of the prior 3-deep hero banner. Green left stripe keeps
   the "positive / incoming money" branding without eating real estate. */
.pipeline-strip {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0 0.7rem;
    padding: 0.55rem 0.85rem;
    background: linear-gradient(90deg, #f3faf5 0%, #ffffff 70%);
    border: 1px solid #cfe2d4;
    border-left: 3px solid #0f9d58;
    border-radius: 6px;
    font-size: 0.95rem;
    line-height: 1.4;
}
.pipeline-strip-title {
    font-weight: 600;
    color: #0b7a45;
    margin-right: 0.4rem;
    white-space: nowrap;
}
.pipeline-strip-title > i { margin-right: 4px; }
.pipeline-strip-flow {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0 0.45rem;
    font-variant-numeric: tabular-nums;
}
.pipeline-strip-label {
    color: var(--crs-gray-600, #5f6368);
    font-size: 0.82rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 600;
}
.pipeline-strip-label-reward { color: #0b7a45; }
.pipeline-strip-amount {
    font-weight: 700;
    color: var(--crs-gray-900, #202124);
    font-size: 1rem;
}
.pipeline-strip-amount-reward {
    color: #0b7a45;
    font-size: 1.1rem;
}
.pipeline-strip-arrow {
    color: #0f9d58;
    font-size: 0.95rem;
    margin: 0 0.25rem;
    animation: pipeline-nudge 2.4s ease-in-out infinite;
}
@keyframes pipeline-nudge {
    0%,  100% { transform: translateX(0); }
    50%       { transform: translateX(3px); }
}
.pipeline-strip-note {
    color: var(--crs-gray-500, #8a8f99);
    font-size: 0.82rem;
    font-style: italic;
}

/* Help (?) button for the Payment Pipeline strip. Reuses .kpi-help
   styling but positioned inline at the right edge of the strip (the
   strip is horizontal flex; push the help button to the far right).
   Selector intentionally compound (.pipeline-strip .pipeline-strip-help +
   .kpi-help.pipeline-strip-help) so its specificity beats the plain
   .kpi-help rule further down in this file — otherwise source order
   gives .kpi-help's position:absolute the win and the button lands
   off-screen at top:8px right:8px of whatever ancestor happens to be
   positioned. */
.pipeline-strip .pipeline-strip-help,
.kpi-help.pipeline-strip-help {
    position: static !important;   /* override .kpi-help's absolute positioning */
    top: auto !important;
    right: auto !important;
    margin-left: auto;             /* pushes to right edge of the flex row */
    flex: 0 0 auto;
    align-self: center;
}

/* Current-month projection banner — slim strip showing this month's
   in-progress numbers + a linear projection to month-end. Sits between
   the headline KPIs and the commission pipeline. Visually distinct from
   the (green) Payment Pipeline strip — uses an amber/in-progress accent
   so reps register it as "this is still being shaped" not "this is settled." */
.current-month-banner {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0 0.9rem;
    padding: 0.65rem 1rem;
    background: linear-gradient(90deg, #fffbeb 0%, #ffffff 70%);
    border: 1px solid #fde68a;
    border-left: 3px solid #d97706;
    border-radius: 6px;
    line-height: 1.4;
}
.current-month-banner-title {
    font-weight: 600;
    color: #92400e;
    margin-right: 0.6rem;
    white-space: nowrap;
    display: flex;
    align-items: baseline;
    gap: 0.4rem;
}
.current-month-banner-title > i {
    margin-right: 4px;
    font-size: 0.95em;
}
.current-month-banner-subtitle {
    color: var(--crs-gray-600, #5f6368);
    font-size: 0.78rem;
    font-weight: 500;
    font-style: italic;
}
.current-month-banner-flow {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0 1.1rem;
    flex: 1 1 auto;
}
.current-month-stat {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
}
.current-month-stat-label {
    color: var(--crs-gray-600, #5f6368);
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 600;
}
.current-month-stat-value {
    font-weight: 700;
    color: var(--crs-gray-900, #202124);
    font-size: 1rem;
    font-variant-numeric: tabular-nums;
}
.current-month-stat-projected .current-month-stat-label { color: #92400e; }
.current-month-stat-projected .current-month-stat-value { color: #92400e; font-size: 1.1rem; }
.current-month-banner-arrow {
    color: #d97706;
    font-size: 0.9rem;
    margin: 0 0.15rem;
}

/* New responsive pipeline layout for the in-progress month banner.
   Replaces the wrap-prone single flex row with: a header strip
   (title · methodology · help) above, and a CSS-grid of metric
   cells below. Auto-fits column count to viewport — 4 across at
   1200px+, 2 across at ~600px, 1 column on phones. */
.current-month-banner {
    /* Override the default flex-row-wrap layout above so the new
       header + pipeline grid stacks vertically. flex-wrap MUST be
       reset to nowrap — the inherited "wrap" from the row-layout
       version interacts badly with column flex (browsers compute
       phantom-tall flex lines), inflating the banner from ~110px
       to ~325px even though every child is well under 100px tall. */
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 0.3rem;
    padding: 0.5rem 0.85rem;
}
.current-month-banner-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    line-height: 1.2;
}
.current-month-banner-method {
    flex: 1 1 auto;
    font-size: 0.72rem;
    color: var(--crs-gray-600, #5f6368);
    font-style: italic;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: wrap;
}
.current-month-banner-method > i {
    color: #92400e;
    font-style: normal;
}
.current-month-banner-warn {
    display: inline-flex;
    align-items: center;
    padding: 0.05rem 0.5rem;
    border-radius: 999px;
    background: rgba(245, 158, 11, 0.18);
    color: #92400e;
    font-style: normal;
    font-weight: 600;
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.current-month-pipeline {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 0.4rem;
    /* Don't stretch cards to match the tallest sibling — the quota
       cell carries an extra gauge row, and stretching the others
       just adds whitespace. */
    align-items: start;
}
.cmp-stage {
    background: rgba(255, 255, 255, 0.55);
    border: 1px solid rgba(146, 64, 14, 0.12);
    border-radius: 0.4rem;
    padding: 0.35rem 0.6rem;
    display: flex;
    flex-direction: column;
    gap: 0.05rem;
    text-align: left;
    text-decoration: none;
    color: inherit;
    transition: background 150ms ease, border-color 150ms ease;
    font-family: inherit;
    line-height: 1.25;
    /* Reset native button defaults so <button class="cmp-stage"> reads
       identical to the <a class="cmp-stage"> siblings. */
    appearance: none;
}
.cmp-stage:hover {
    background: rgba(255, 255, 255, 0.95);
    border-color: rgba(146, 64, 14, 0.3);
    text-decoration: none;
    color: inherit;
}
button.cmp-stage {
    cursor: pointer;
}
.cmp-stage-label {
    font-size: 0.68rem;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--crs-gray-600, #5f6368);
    letter-spacing: 0.04em;
}
.cmp-stage-actual {
    font-size: 1rem;
    font-weight: 700;
    color: var(--crs-gray-900, #202124);
    font-variant-numeric: tabular-nums;
}
.cmp-stage-projected {
    font-size: 0.72rem;
    color: #b45309;
    font-style: italic;
    font-variant-numeric: tabular-nums;
}
.cmp-arrow {
    color: #f59e0b;
    font-weight: 700;
    margin-right: 0.15rem;
    font-style: normal;
}
.cmp-stage-sub {
    font-size: 0.68rem;
    color: var(--crs-gray-600, #5f6368);
    font-weight: 500;
    margin-left: 0.25rem;
}
/* No-quota sub-stack stacked under each in-progress pipeline tile. The
   tile's headline value is the QUOTA'D-rep slice (matches the quota
   chart bar); this sub-stack adds the no-quota subtotal and the all-rep
   total in two compact rows so the user can tie back to the drill-down
   without a separate callout. */
.cmp-stage-substack {
    margin-top: 0.3rem;
    padding-top: 0.25rem;
    border-top: 1px solid rgba(146, 64, 14, 0.12);
    display: flex;
    flex-direction: column;
    gap: 0.05rem;
}
.cmp-stage-subline {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.4rem;
    font-size: 0.7rem;
    line-height: 1.25;
    color: var(--crs-gray-600, #5f6368);
}
.cmp-stage-subline .cmp-stage-sublabel {
    font-size: 0.65rem;
    text-transform: lowercase;
    letter-spacing: 0.02em;
}
.cmp-stage-subline .cmp-stage-subvalue {
    font-variant-numeric: tabular-nums;
    font-weight: 500;
}
.cmp-stage-subline-total {
    color: var(--crs-gray-900, #202124);
    font-weight: 600;
    border-top: 1px dashed rgba(146, 64, 14, 0.18);
    padding-top: 0.15rem;
    margin-top: 0.05rem;
}
.cmp-stage-subline-total .cmp-stage-subvalue {
    font-weight: 700;
}
.cmp-stage-quota .quota-attainment-gauge {
    margin-top: 0.1rem;
}
.cmp-stage-quota .quota-attainment-track {
    height: 0.4rem;
}
.current-month-banner .current-month-banner-help,
.kpi-help.current-month-banner-help {
    /* Same specificity-bumping trick as .pipeline-strip-help — beat the
       later .kpi-help { position: absolute } rule in source order. */
    position: static !important;
    top: auto !important;
    right: auto !important;
    margin-left: auto;
    flex: 0 0 auto;
    align-self: center;
}

/* TTM / YTD segmented toggle in the dashboard top-right ------------------
   Groups two pill buttons as a segmented control. The ".active" button
   reads as the currently selected window; the other sits as an outline
   affordance. Sits next to the "Trailing 12 months ending" dropdown so
   the two together read as one Window picker. */
.period-mode-toggle .btn-group > .btn {
    border-radius: 0;
    padding: 0.25rem 0.7rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    min-width: 48px;
}
.period-mode-toggle .btn-group > .btn:first-child {
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
}
.period-mode-toggle .btn-group > .btn:last-child {
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
}
.period-mode-toggle .btn.active {
    /* hairline inset shadow to make the selected segment read as pressed */
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.15);
}

/* Invoice-detail KPI tiles (5-across) ------------------------------------
   Same visual family as the dashboard KPI cards but color-coded per metric
   so the rep scans the row quickly: gray=input, green=collected,
   amber=outstanding, blue=calculated base, bold green=payoff. */
.invoice-kpis { gap: 0; }
.invoice-kpi-card {
    border: 1px solid var(--crs-gray-300, #e5e7eb);
    border-radius: 6px;
    margin-bottom: 0;
    height: 100%;
    transition: box-shadow 0.15s ease, transform 0.15s ease;
}
.invoice-kpi-card .card-body {
    padding: 0.85rem 1rem;
}
.invoice-kpi-card:hover {
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
}
.invoice-kpi-label {
    font-size: 0.78rem;
    color: var(--crs-gray-600, #5f6368);
    font-weight: 600;
    margin-bottom: 6px;
    display: flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.invoice-kpi-label > i {
    opacity: 0.55;
    font-size: 0.82rem;
}

/* Source-stack lines on the A/R aging detail's Sources tile. Each
   row pairs a small source badge (BC / Hist) with a count + dollar
   amount so the rep can see both contributions at a glance. */
.aging-sources-stack {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: 4px;
}
.aging-source-line {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.85rem;
    line-height: 1.25;
}
.aging-source-badge {
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    flex: 0 0 auto;
    min-width: 38px;
    text-align: center;
}
.aging-source-count {
    flex: 1 1 auto;
    color: var(--crs-gray-700, #5f6368);
}
.aging-source-amt {
    flex: 0 0 auto;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--crs-gray-900, #202124);
}
.aging-source-suppressed {
    font-size: 0.75rem;
    font-style: italic;
    color: var(--crs-gray-600, #80868b);
    margin-top: 2px;
}
.aging-source-suppressed > i {
    color: #b58105;
}

/* Aging-context tile's main value — slightly smaller than the dollar-
   amount tiles so the bucket label (e.g. "61-90 days past due")
   doesn't overflow the card width on narrow viewports. */
.aging-context-value {
    font-size: 1.15rem;
    font-weight: 700;
    line-height: 1.2;
    color: var(--crs-gray-900, #202124);
}

.invoice-kpi-value {
    font-size: 1.35rem;
    font-weight: 700;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
    color: var(--crs-gray-900, #202124);
}
/* Subtext under the Commissionable tile showing the math trail
   (Total − PT − LD). Kept tiny and muted so it doesn't compete
   with the headline number. */
.invoice-kpi-sub {
    margin-top: 6px;
    font-size: 0.72rem;
    color: var(--crs-gray-600, #5f6368);
    font-variant-numeric: tabular-nums;
    line-height: 1.35;
    display: flex;
    flex-wrap: wrap;
    gap: 0 6px;
}
.invoice-kpi-sub .deduct {
    color: #a8261d;
    font-weight: 500;
}

/* Color variants — subtle left-border accent + tinted label to make the
   metric category obvious at a glance without looking gaudy. */
.invoice-kpi-neutral  { border-left: 3px solid #adb5bd; }
.invoice-kpi-positive { border-left: 3px solid #0f9d58; }
.invoice-kpi-positive .invoice-kpi-label > i { color: #0f9d58; opacity: 0.85; }
.invoice-kpi-warning  { border-left: 3px solid #d97706; }
.invoice-kpi-warning  .invoice-kpi-label > i { color: #d97706; opacity: 0.85; }
.invoice-kpi-info     { border-left: 3px solid #1d70b8; }
.invoice-kpi-info     .invoice-kpi-label > i { color: #1d70b8; opacity: 0.85; }
.invoice-kpi-reward {
    border-left: 3px solid #0f9d58;
    background: linear-gradient(135deg, #fff 0%, #f3faf5 100%);
}
.invoice-kpi-reward .invoice-kpi-label { color: #0b7a45; }
.invoke-kpi-reward .invoice-kpi-label > i,
.invoice-kpi-reward .invoice-kpi-label > i { color: #0f9d58; opacity: 1; }
.invoice-kpi-reward .invoice-kpi-value {
    color: #0b7a45;
    font-size: 1.5rem;   /* slightly larger — this is the money number */
}

/* Tighter gutters so 5 tiles fit neatly on wide screens. */
.invoice-kpis > [class*="col-"] {
    padding-left: 6px;
    padding-right: 6px;
}
.invoice-kpis > [class*="col-"]:first-child { padding-left: 15px; }
.invoice-kpis > [class*="col-"]:last-child  { padding-right: 15px; }

/* On narrow viewports, tiles wrap onto multiple lines (Bootstrap does
   this automatically with col-md → stacks on <768px). Add a small gap
   so stacked tiles aren't touching. */
@media (max-width: 767.98px) {
    .invoice-kpis > [class*="col-"] { margin-bottom: 8px; }
}

/* Invoice-No cell on the invoice detail table — keep the edit pencil
   and the invoice link on the same line so the column can size to fit
   both side by side. Without nowrap the cell wraps to two lines. */
#invoice_table td.invoice-no-cell {
    white-space: nowrap;
}

/* Visible group boundary on the invoice-detail table — first cell of
   each logical column group gets a slightly heavier left border so the
   grouping (Identity · Customer/Location · Money billed · Commission ·
   Customer payment) reads as visual sections rather than a long flat row. */
#invoice_table thead th.col-group-start,
#invoice_table tbody td.col-group-start {
    border-left: 2px solid var(--crs-charcoal, #1a1a1a) !important;
}
/* Light heading bar above the group's first column to label the section. */
#invoice_table thead th.col-group-start {
    position: relative;
}

/* Commission-rate pill (invoice detail table) --------------------------- */
.rate-pill {
    display: inline-block;
    padding: 1px 6px;
    font-size: 0.82em;
    font-weight: 600;
    line-height: 1.35;
    border-radius: 3px;
    white-space: nowrap;
}
.rate-pill-normal {
    background: rgba(108, 117, 125, 0.12);
    color: #4a5157;
}
.rate-pill-shared {
    background: rgba(13, 110, 253, 0.14);
    color: #084faa;
}
.rate-pill-special {
    background: rgba(200, 16, 46, 0.14);
    color: #8E0A20;
}

/* Trend arrows (commission dashboard variance cells) --------------------- */
.trend-arrow {
    /* Chunky tinted pill so direction reads at a glance. Kept narrow
       (padding 0 3px, margin-right 3px) so it fits inside the 8rem
       month columns alongside values like \$3,307,090 without overflow. */
    display: inline-block;
    padding: 0 3px;
    margin-right: 3px;
    font-size: 0.9em;
    font-weight: 900;
    line-height: 1.3;
    border-radius: 3px;
    vertical-align: 1px;
}
.trend-arrow.text-success {
    background: rgba(15, 157, 88, 0.16);
    color: #0b7a45 !important;
}
.trend-arrow.text-danger {
    background: rgba(217, 48, 37, 0.16);
    color: #a8261d !important;
}

/* Trend chips on KPI tiles — small pill with arrow + signed % change
   vs the prior equal window. Green = good direction, red = bad. */
.trend-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    padding: 0.1rem 0.45rem;
    margin-top: 0.25rem;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 600;
    line-height: 1.4;
    font-variant-numeric: tabular-nums;
    border: 1px solid transparent;
}
.trend-chip-up {
    background: rgba(15, 157, 88, 0.10);
    color: #0b7a45;
    border-color: rgba(15, 157, 88, 0.25);
}
.trend-chip-down {
    background: rgba(217, 48, 37, 0.10);
    color: #a8261d;
    border-color: rgba(217, 48, 37, 0.30);
}
.trend-chip-flat {
    background: var(--crs-gray-100, #f6f7f9);
    color: var(--crs-gray-600, #6c757d);
    border-color: var(--crs-gray-200, #e5e7eb);
}

/* Commission page header — flex row containing back button, page title,
   and "Data as of" stamp. Rendered in base.html for all commission pages. */
.commission-page-header {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.75rem;
    padding: 0.5rem 1rem;
}
.commission-page-header h2 {
    margin: 0;
    font-size: 1.35rem;
    white-space: nowrap;
}
/* sales_styles.css has a GLOBAL `.btn-group, .btn { width: 100% !important }`
   that balloons every button to its container width. For the inline action
   buttons in the page-header H2 (View in BC / Edit header / Export) this makes
   each button as wide as the whole H2, so they overflow and collide with the
   "Data as of" stamp. Restore content-sizing for buttons in the commission
   header (equal specificity to the global rule, but !important + later source
   order win); re-assert the fixed Back-button width AFTER so it still applies. */
.commission-page-header .btn { width: auto !important; }
.commission-page-header .btn-back {
    width: 120px !important;
    text-align: center;
    flex-shrink: 0;
}

/* "Data as of <timestamp>" stamp — site-wide indicator that the current
   page's numbers reflect data through the last BC sync run. Sits in the
   commission-page-header row (rendered in base.html). */
.data-as-of {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.35rem 0.7rem;
    margin-left: auto;
    font-size: 0.78rem;
    color: var(--crs-gray-600, #6c757d);
    background: var(--crs-gray-100, #f6f7f9);
    border: 1px solid var(--crs-gray-200, #e5e7eb);
    border-radius: 4px;
}
.data-as-of i { color: var(--crs-gray-500, #9ca3af); }
.data-as-of strong { color: var(--crs-gray-800, #1f2937); font-weight: 600; }
/* Cadence note ("refreshes nightly at 2:30 AM CT") — quieter than the
   timestamp so the eye lands on the freshness value first. */
.data-as-of .data-as-of-cadence {
    color: var(--crs-gray-500, #9ca3af);
    font-weight: 400;
    margin-left: 0.15rem;
}

/* Filtered KPI subtitle (invoice detail — shown when paid/unpaid toggle active) */
.invoice-kpi-filtered {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--crs-gray-700, #495057);
    margin-top: 0.25rem;
    padding-top: 0.2rem;
    border-top: 1px dashed var(--crs-gray-300, #dee2e6);
}

/* Shared-codes dropdown — sits inside the All / Solo / Shared / Special
   pill row when the rep has 2+ shared BC codes and the user wants to
   narrow Shared to a specific subset. */
.shared-codes-picker .dropdown-toggle::after {
    margin-left: 0.4rem;
    vertical-align: 0.18em;
}
.shared-codes-summary {
    color: var(--crs-gray-600, #6c757d);
    font-weight: 500;
    margin-left: 0.25rem;
}
.shared-codes-menu {
    /* Bootstrap drops dropdown-menu padding to 0; we want internal
       padding for the form contents. p-3 utility provides that, this
       just fixes scrollability + max height. */
    max-height: 320px;
    overflow-y: auto;
}
.shared-codes-menu .form-check {
    padding-left: 1.6rem;
    margin-bottom: 0.25rem;
}
.shared-codes-menu code {
    font-size: 0.85rem;
}

/* KPI tile help (?) icon ------------------------------------------------- */
.kpi-card-body {
    position: relative;
    /* Ensure the value + label don't end up under the absolute-positioned
       help button on narrow cards. */
    padding-right: 1.8rem;
    /* Flex column so the label sits at the top and the dollar value
       fills the remaining vertical space (anchored at the bottom).
       Without this, tiles without a sub-line have a big empty bottom
       chunk while tiles with a sub-line look full. */
    display: flex;
    flex-direction: column;
    min-height: 110px;
}
.kpi-card-body > h4 {
    margin-top: auto;     /* push value (and any sub-line) to the bottom */
    margin-bottom: 0;
    font-size: 1.6rem;
    font-weight: 600;
    line-height: 1.15;
}
.kpi-card-body > h4 + .small {
    margin-top: 0.35rem;
}
/* Tiny inline sparkline under a KPI tile's value — visualises the
   monthly trend that drives the headline number. Chart.js needs a
   positioned parent with an explicit height for `responsive: true,
   maintainAspectRatio: false` to clamp the canvas; without it Chart's
   resizer grows the canvas to fill the page. */
.kpi-sparkline-wrap {
    position: relative;
    margin-top: 0.4rem;
    height: 32px;
    width: 100%;
}
.kpi-sparkline {
    display: block;
}
/* Tall sparkline variant — used by the Commission Paid to Rep tile so
   the bar chart fills the same vertical real estate as the Quota
   Tracking chart next to it. flex: 1 lets it grow to fill the
   remaining card height; min-height keeps it from collapsing if the
   card itself is short. */
.kpi-sparkline-wrap-tall {
    height: auto;
    flex: 1 1 auto;
    min-height: 150px;
}
.kpi-sparkline-wrap-tall canvas { cursor: pointer; }
/* High / Low pills under the Commission Paid sparkline. Two small
   chips that pull the peak and trough months out of the bar chart so
   the rep doesn't have to mouse over to find them. Colors mirror the
   bars (green = peak, red = trough). */
.kpi-hl-caption {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    margin-top: 0.3rem;
    font-size: 0.7rem;
    line-height: 1.1;
}
.kpi-hl-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    padding: 0.1rem 0.4rem;
    border-radius: 999px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    border: 1px solid;
}
.kpi-hl-high { background: #ecfdf5; border-color: #a7f3d0; color: #047857; }
.kpi-hl-low  { background: #fef2f2; border-color: #fecaca; color: #b91c1c; }
.kpi-hl-current { background: #fffbeb; border-color: #fcd34d; color: #92400e; font-weight: 500; }
/* "vs last month" pill — same visual language as high/low. Up = green,
   down = red, flat = neutral. */
.kpi-hl-up   { background: #ecfdf5; border-color: #a7f3d0; color: #047857; }
.kpi-hl-down { background: #fef2f2; border-color: #fecaca; color: #b91c1c; }
.kpi-hl-flat { background: #f3f4f6; border-color: #d1d5db; color: #4b5563; }

/* Commission Due callout — sits directly under the main "Commission
   Paid" headline and breaks out the END-month commission that's
   excluded from the headline. Amber palette matches the "outstanding"
   semantics used by the Commission Due to Rep pipeline stage so reps
   get a consistent color for "earned but not yet paid out". */
.kpi-due-callout {
    display: inline-flex;
    align-items: baseline;
    gap: 0.4rem;
    margin-top: 0.25rem;
    padding: 0.25rem 0.55rem;
    border-radius: 0.4rem;
    background: #fffbeb;
    border: 1px solid #fcd34d;
    color: #b45309;
    font-variant-numeric: tabular-nums;
    line-height: 1.2;
}
.kpi-due-callout-tag {
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 700;
}
.kpi-due-callout-amount {
    font-size: 0.95rem;
    font-weight: 700;
    color: #92400e;
}
.kpi-hl-month {
    font-weight: 500;
    color: inherit;
    opacity: 0.78;
    font-variant-numeric: normal;
}
/* Short tag label that prefixes each kpi-hl-pill (Peak / Low / MoM)
   so the user can see at a glance what the chip means without hovering
   the tooltip. Slate-on-pill background pop keeps it readable across
   the green/red pill variants. */
.kpi-hl-tag {
    display: inline-block;
    margin-right: 0.35em;
    padding: 0.05em 0.4em;
    border-radius: 0.3em;
    background: rgba(15, 23, 42, 0.12);
    font-size: 0.65em;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    line-height: 1.4;
    vertical-align: middle;
    color: inherit;
}
/* Quota tracker — projected current-month subtext below the chart.
   Subtle amber fill keeps it visually separate from the 12-month
   actual bars so the user reads it as a side calculation. */
.quota-tracker-projected-caption {
    display: block;
    padding: 0.3rem 0.55rem;
    background: #fffbeb;
    border: 1px solid #fcd34d;
    border-radius: 0.4rem;
    color: #92400e;
    font-variant-numeric: tabular-nums;
}
.quota-tracker-projected-caption strong { color: #78350f; }
.quota-tracker-projected-meta {
    color: #b45309;
    margin-left: 0.4em;
}
/* Inline attainment gauge — sits inside the in-progress current-month
   banner under the "{Month} quota" cell. Filled bar = commissionable
   sales so far as % of that month's quota; the dashed marker is the
   projected end-of-month %. Bar visually caps at 100% width but the
   text label always shows the true projected % (so > 100% projections
   read as "projecting 327%" with the marker pinned to the right). */
.quota-attainment-gauge {
    margin-top: 0.35rem;
    width: 11rem;
    max-width: 100%;
}
.quota-attainment-track {
    position: relative;
    width: 100%;
    height: 0.55rem;
    background: rgba(15, 23, 42, 0.08);
    border-radius: 999px;
    overflow: hidden;
}
.quota-attainment-fill {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, #10b981 0%, #34d399 100%);
    border-radius: 999px;
    transition: width 400ms ease;
}
.quota-attainment-fill.is-under {
    background: linear-gradient(90deg, #ef4444 0%, #f87171 100%);
}
/* Projected fill — amber to read as "forecast" rather than actual.
   Diagonal stripe overlay reinforces "this is a projection, not a
   measured value". */
.quota-attainment-fill.is-projected {
    background:
        repeating-linear-gradient(
            45deg,
            rgba(255, 255, 255, 0.18) 0,
            rgba(255, 255, 255, 0.18) 4px,
            transparent 4px,
            transparent 8px
        ),
        linear-gradient(90deg, #f59e0b 0%, #fbbf24 100%);
}
.quota-attainment-marker {
    position: absolute;
    top: -3px; bottom: -3px;
    width: 2px;
    background: #1f2937;
    transform: translateX(-50%);
    pointer-events: none;
}
.quota-attainment-label {
    margin-top: 0.2rem;
    font-size: 0.7rem;
    color: #475569;
    line-height: 1.3;
}
.quota-attainment-label strong {
    color: #1e293b;
    font-variant-numeric: tabular-nums;
}
/* House Accounts callout — same visual rhythm as kpi-due-callout but a
   neutral slate palette so the eye groups it as "informational" (this
   slice doesn't go to a salesperson) rather than "due" (amber). Sits
   one line below the due pill on the team-summary Commission Paid tile. */
.kpi-house-callout {
    display: inline-flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-top: 0.35rem;
    padding: 0.25rem 0.55rem;
    border-radius: 0.4rem;
    background: #f1f5f9;
    border: 1px solid #cbd5e1;
    color: #475569;
    font-variant-numeric: tabular-nums;
    line-height: 1.2;
}
.kpi-house-callout-tag {
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 700;
    color: #334155;
}
.kpi-house-callout-amount {
    font-size: 0.95rem;
    font-weight: 700;
    color: #1e293b;
}
.kpi-house-callout-btn {
    margin-left: auto;
    padding: 0.1rem 0.55rem;
    font-size: 0.7rem;
    line-height: 1.3;
    font-weight: 600;
    border-color: #94a3b8;
    color: #334155;
    background: #ffffff;
}
/* Range-total subtotal — sits beneath the Paid headline + the end-month Due
   pill on the Commission Paid tile and sums the two, so the user sees the
   full commission for the report range (incl. the end month) without either
   figure above it changing. The top rule reads as a "subtotal" line; neutral
   slate keeps it from competing with the amber due pill. */
.kpi-range-total {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.4rem;
    margin-top: 0.4rem;
    padding-top: 0.35rem;
    border-top: 1px dashed #cbd5e1;
    font-variant-numeric: tabular-nums;
    line-height: 1.2;
}
.kpi-range-total-tag {
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 700;
    color: #475569;
}
.kpi-range-total-amount {
    font-size: 0.95rem;
    font-weight: 700;
    color: #1e293b;
}
.kpi-house-callout-btn:hover {
    background: #475569;
    border-color: #475569;
    color: #ffffff;
    text-decoration: none;
}
.kpi-house-callout-btn .fa-arrow-right {
    margin-left: 0.2rem;
    font-size: 0.65rem;
}
.kpi-house-callout-meta {
    font-size: 0.78rem;
    font-weight: 500;
    color: #64748b;
}
/* Section rail — short uppercase label above a band of related cards
   so the dashboard reads as discrete sections ("Headline", "Trends",
   etc.) rather than one long scroll. */
.dashboard-section-heading {
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--clair-muted, #6b7280);
    margin: 1.25rem 0 0.5rem;
    border-left: 3px solid var(--clair-primary, #2563eb);
    padding-left: 0.6rem;
}
.dashboard-section-heading small {
    font-weight: 500;
    text-transform: none;
    letter-spacing: 0;
    color: var(--clair-muted, #6b7280);
    margin-left: 0.4rem;
}
/* The FIRST section heading on a page doesn't need the big band gap —
   it sits right under the page-header toolbar. Recovers ~1.25rem of
   dead space at the top of the team summary / dashboards. */
.exec-overview > .dashboard-section-heading:first-child,
.container-fluid > .dashboard-section-heading:first-child {
    margin-top: 0.15rem;
}

/* Executive overview — action tiles + leaderboards + aging donut.
   Sits on top of team_summary / all_reps. Mirrors the screenshot:
   four wide action tiles in a row, then two leaderboards + a donut
   side-by-side beneath. */
.exec-overview { margin-bottom: 1.5rem; }
.exec-tiles {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.75rem;
    margin-bottom: 0.5rem;
}
.exec-tile {
    background: #fff;
    border-radius: 0.5rem;
    border: 1px solid #e5e7eb;
    padding: 0.85rem 1rem;
    /* Reserve space at the top-right for the absolute-positioned
       (?) help button so the tile label doesn't sit underneath it. */
    padding-right: 1.85rem;
    border-left: 4px solid #94a3b8;
    position: relative;
}
.exec-tile-label {
    text-transform: uppercase;
    font-size: 0.7rem;
    letter-spacing: 0.06em;
    font-weight: 600;
    color: #6b7280;
}
.exec-tile-value {
    font-size: 1.55rem;
    font-weight: 700;
    color: #111827;
    margin: 0.15rem 0 0.1rem;
}
.exec-tile-sub { font-size: 0.78rem; color: #6b7280; }
/* Driver line — shows the underlying receivables / pipeline $ that
   drives the headline commission number. Slightly smaller, in a tabular
   font so the dollar amounts line up across tiles. */
.exec-tile-meta {
    font-size: 0.72rem;
    color: #4b5563;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    margin-top: 0.2rem;
    letter-spacing: 0.01em;
}
.exec-tile-unlockable  { border-left-color: #10b981; }
.exec-tile-unlockable  .exec-tile-value { color: #10b981; }
.exec-tile-outstanding { border-left-color: #f59e0b; }
.exec-tile-outstanding .exec-tile-value { color: #d97706; }
.exec-tile-atrisk      { border-left-color: #ef4444; }
.exec-tile-atrisk      .exec-tile-value { color: #ef4444; }
.exec-tile-pipeline    { border-left-color: #2563eb; }
.exec-tile-pipeline    .exec-tile-value { color: #2563eb; }

/* Clickable tile — anchors to #team_table sorted by the relevant
   column. Override the bootstrap link defaults so the tile itself
   doesn't underline / re-color its inner text. */
a.exec-tile-link {
    text-decoration: none;
    color: inherit;
    cursor: pointer;
    transition: transform 0.12s ease, box-shadow 0.12s ease;
}
a.exec-tile-link:hover {
    text-decoration: none;
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.08);
    color: inherit;
}
a.exec-tile-link:focus { outline: 2px solid #2563eb; outline-offset: 2px; }

/* Aging legend rows — clickable, Power BI-style cross-filter.
   Hover lifts the row; active row gets a tinted bg + bold weight; the
   other rows fade to muted while a filter is on. */
.exec-aging-legend-item {
    cursor: pointer;
    border-radius: 4px;
    padding-left: 0.25rem !important;
    padding-right: 0.25rem !important;
    transition: background-color 0.15s ease, opacity 0.15s ease;
    user-select: none;
}
.exec-aging-legend-item:hover {
    background-color: #f3f4f6;
}
.exec-aging-legend-item:focus-visible {
    outline: 2px solid #2563eb;
    outline-offset: 1px;
}
.exec-aging-legend-item.is-active {
    background-color: #eef2ff;
    font-weight: 600;
}
.exec-aging-legend-item.is-dim {
    opacity: 0.45;
}

/* Brief 0.9s yellow flash on the team_table column header that the
   user just sorted — confirms the click did something even if the
   page didn't visibly scroll (already at the top). */
.exec-sort-flash {
    background-color: #fef3c7 !important;
    transition: background-color 0.6s ease;
}

/* Rep / Manager name columns on the team summary table — keep them
   on a single line so "Maci Gansky" doesn't break to two rows when
   the table is narrow. width: 1% with white-space: nowrap is the
   table-cell idiom for "shrink to content + don't wrap". */
#team_table th:nth-child(1),
#team_table td:nth-child(1),
#team_table th:nth-child(2),
#team_table td:nth-child(2) {
    white-space: nowrap;
    width: 1%;
}

/* Money / metric columns: wrap the LABEL in the header (so multi-word
   names like "Commissionable Payments Received" stack vertically and
   the column itself stays narrow), but never wrap the dollar values
   in the body cells. Cap header column widths so DataTables doesn't
   expand them past the underlying data width.
   `!important` is needed because DataTables writes inline `width: Npx`
   on each th after init based on auto-measured content. We want the
   user's wrapping target to win over DataTables' auto-measure. */
#team_table thead th {
    white-space: normal !important;
    /* Only break BETWEEN words (no mid-word splits like "COMM ISSION ABLE") */
    word-wrap: normal;
    overflow-wrap: normal;
    word-break: keep-all;
    vertical-align: bottom;
    /* Width sized so "COMMISSIONABLE" fits on a single line; longer
       multi-word labels wrap to 2-3 lines. */
    max-width: 140px !important;
    width: 140px !important;
    line-height: 1.25;
    padding-top: 8px;
}
/* Keep Rep + Manager columns single-line and content-sized. */
#team_table thead th:nth-child(1),
#team_table thead th:nth-child(2) {
    white-space: nowrap !important;
    width: 1% !important;
    max-width: none !important;
}
#team_table tbody td {
    white-space: nowrap;
}
/* DataTables injects the sort-arrow span. Keep the label and arrow
   on separate visual lines when the label wraps. */
#team_table thead th.sorting,
#team_table thead th.sorting_asc,
#team_table thead th.sorting_desc {
    padding-right: 18px; /* room for the sort arrow on the right */
}

/* Freeze the Rep (first) column when the team table scrolls
   horizontally. position: sticky needs the cell to have an opaque
   background so the underlying scrolled cells don't show through; we
   set white for even rows + a paler tone for striped odd rows so it
   blends with the existing table-striped look. The right-edge box
   shadow signals there's content scrolled off to the right. */
#team_table thead th:first-child,
#team_table tbody td:first-child,
#team_table tfoot td:first-child {
    position: sticky;
    left: 0;
    z-index: 2;
    background-color: #ffffff;
    box-shadow: 2px 0 4px -2px rgba(15, 23, 42, 0.12);
}
#team_table thead th:first-child {
    /* Header sits ABOVE body cells so the body sticky column doesn't
       paint over the dark header on horizontal scroll. */
    z-index: 3;
    background-color: #343a40;  /* matches Bootstrap 4 thead-dark */
}
/* Match the .table-striped odd-row tint on the sticky cell so the
   stripe pattern stays consistent. Bootstrap 4 stripes :nth-of-type(odd)
   with rgba(0,0,0,0.05); we render that as the equivalent solid
   #f3f4f6 so the cell is opaque (sticky requires a solid bg). */
#team_table.table-striped tbody tr:nth-of-type(odd) td:first-child {
    background-color: #f3f4f6;
}

.exec-leaderboards {
    display: grid;
    grid-template-columns: 1fr 1fr 1.2fr;
    gap: 0.75rem;
}
.exec-board {
    background: #fff;
    border-radius: 0.5rem;
    border: 1px solid #e5e7eb;
    padding: 0.85rem 1rem;
}
.exec-board-title {
    font-size: 0.85rem;
    font-weight: 700;
    color: #374151;
    margin-bottom: 0.5rem;
}
.exec-board-title .fas { margin-right: 0.4rem; color: #6b7280; }
.exec-board-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.exec-board-list li {
    display: grid;
    grid-template-columns: 1fr auto auto;
    gap: 0.5rem;
    align-items: baseline;
    padding: 0.3rem 0;
    border-bottom: 1px solid #f3f4f6;
    font-size: 0.85rem;
}
.exec-board-list li:last-child { border-bottom: 0; }
.exec-board-list a { color: #1f2937; font-weight: 500; text-decoration: none; }
.exec-board-list a:hover { text-decoration: underline; }
.exec-board-list .exec-board-pct {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}
.exec-board-list .exec-board-pct-up   { color: #10b981; }
.exec-board-list .exec-board-pct-down { color: #ef4444; }
.exec-board-list .exec-board-amount {
    font-size: 0.75rem;
    color: #6b7280;
    font-variant-numeric: tabular-nums;
}
.exec-board-empty {
    grid-template-columns: 1fr !important;
    color: #9ca3af;
    font-style: italic;
}

/* Scope disclaimer for the Unlockable-by-aging pipeline stage —
   calls out that the figures only reflect rep-assigned invoices and
   exclude house accounts. Sits between the stage title and the
   stacked-bar graphic. */
.pipeline-stage-disclaimer {
    font-size: 0.72rem;
    line-height: 1.35;
    color: var(--crs-gray-600, #5f6368);
    background: var(--crs-gray-100, #f6f7f9);
    border: 1px solid var(--crs-gray-200, #e9ecef);
    border-left: 3px solid var(--crs-gray-400, #ced4da);
    padding: 0.4rem 0.55rem;
    margin: 0.25rem 0 0.5rem;
    border-radius: 4px;
    display: flex;
    align-items: flex-start;
    gap: 0.4rem;
}
.pipeline-stage-disclaimer > i {
    color: var(--crs-gray-500, #adb5bd);
    margin-top: 0.15rem;
    flex-shrink: 0;
}

/* Edit-overrides pencil shown next to invoice numbers in the drill-down.
   Subtle gray by default; warm amber on hover to match the in-progress
   semantics of other override / current-month UI. */
.invoice-override-edit-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    margin-right: 4px;
    color: var(--crs-gray-500, #adb5bd);
    font-size: 0.7rem;
    border-radius: 4px;
    transition: color 0.15s ease, background 0.15s ease;
}
.invoice-override-edit-link:hover,
.invoice-override-edit-link:focus {
    color: #d97706;
    background: #fff7ed;
    text-decoration: none;
    outline: none;
}

.exec-aging-flex {
    display: flex;
    align-items: center;
    gap: 0.85rem;
}
.exec-aging-canvas-wrap {
    position: relative;
    width: 130px;
    height: 130px;
    flex-shrink: 0;
}
.exec-aging-canvas-wrap canvas { display: block; }
.exec-aging-center {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    text-align: center;
}
.exec-aging-center-label {
    font-size: 0.65rem;
    text-transform: uppercase;
    color: #6b7280;
    letter-spacing: 0.04em;
}
.exec-aging-center-value {
    font-weight: 700;
    font-size: 0.9rem;
    color: #111827;
}
.exec-aging-legend {
    list-style: none;
    padding: 0;
    margin: 0;
    flex: 1;
    font-size: 0.8rem;
}
.exec-aging-legend li {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 0.4rem;
    align-items: center;
    padding: 0.15rem 0;
}
.exec-aging-swatch {
    width: 10px; height: 10px;
    border-radius: 2px;
    display: inline-block;
}
.exec-aging-swatch-0 { background: #10b981; }
.exec-aging-swatch-1 { background: #2563eb; }
.exec-aging-swatch-2 { background: #f59e0b; }
.exec-aging-swatch-3 { background: #ef4444; }
.exec-aging-swatch-4 { background: #991b1b; }

@media (max-width: 992px) {
    .exec-tiles, .exec-leaderboards { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
    .exec-tiles, .exec-leaderboards { grid-template-columns: 1fr; }
}

/* ----------------------------------------------------------------- */
/* Quota Tracker tile (per-rep dashboard headline KPIs)              */
/* ----------------------------------------------------------------- */
/* Stretch the card to fill its row alongside the (taller) Commission
   Paid tile so the chart can absorb the otherwise-empty whitespace
   under the bar/percentage block. The column itself is already a flex
   item with stretch alignment (Bootstrap 4 default); these rules pass
   that height all the way down to .quota-tracker-chart-wrap so the
   chart grows to fill it. */
.quota-tracker-card.card {
    height: 100%;
    display: flex;
    flex-direction: column;
}
.quota-tracker-card .card-body {
    padding: 1rem 1.1rem;
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
}
.quota-tracker-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 0.85rem;
    margin: 0.25rem 0 0.5rem;
}
.quota-tracker-stat { flex: 1; min-width: 0; }
.quota-tracker-actual {
    font-size: 1.55rem;
    font-weight: 700;
    color: #111827;
    line-height: 1.15;
}
.quota-tracker-vs {
    font-size: 0.78rem;
    color: #6b7280;
    margin-top: 0.1rem;
}
.quota-tracker-status {
    text-align: right;
    padding: 0.45rem 0.75rem;
    border-radius: 0.45rem;
    border: 1px solid;
    min-width: 130px;
}
.quota-tracker-pct {
    font-size: 1.2rem;
    font-weight: 700;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}
.quota-tracker-state {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 600;
    margin-top: 0.1rem;
}
.quota-tracker-status.status-on     { background: #ecfdf5; border-color: #a7f3d0; color: #047857; }
.quota-tracker-status.status-pace   { background: #fffbeb; border-color: #fcd34d; color: #b45309; }
.quota-tracker-status.status-behind { background: #fef2f2; border-color: #fecaca; color: #b91c1c; }

.quota-tracker-progress {
    position: relative;
    height: 8px;
    background: #f3f4f6;
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 0.65rem;
}
.quota-tracker-progress-fill {
    height: 100%;
    border-radius: 4px;
    transition: width 0.3s ease;
}
.quota-tracker-progress-fill { background: #2563eb; }
.quota-tracker-progress-fill.fill-on     { background: #10b981; }
.quota-tracker-progress-fill.fill-pace   { background: #f59e0b; }
.quota-tracker-progress-fill.fill-behind { background: #ef4444; }

/* Callout shown under the quota progress bar when there's revenue from
   reps without a quota — those sales are bucketed out of the chart +
   the % of quota math so the comparison is apples-to-apples, but the
   total surfaces here so it's still visible. */
.quota-tracker-no-quota {
    font-size: 0.75rem;
    color: var(--crs-gray-700, #495057);
    background: var(--crs-gray-100, #f6f7f9);
    border: 1px solid var(--crs-gray-200, #e9ecef);
    border-left: 3px solid var(--crs-gray-500, #adb5bd);
    border-radius: 4px;
    padding: 0.35rem 0.55rem;
    margin: 0.5rem 0 0.65rem;
    display: flex;
    align-items: baseline;
    gap: 0.4rem;
    line-height: 1.4;
}
.quota-tracker-no-quota > i {
    color: var(--crs-gray-500, #adb5bd);
    flex-shrink: 0;
    align-self: center;
}
.quota-tracker-no-quota strong {
    color: var(--crs-gray-900, #202124);
    font-variant-numeric: tabular-nums;
}
.quota-tracker-no-quota-meta {
    color: var(--crs-gray-500, #adb5bd);
    font-style: italic;
    font-size: 0.7rem;
    margin-left: auto;
}
/* Tick mark at 100% to show the quota target. The progress bar's max
   visible width is 100% so the marker sits at the right edge — but we
   keep it as a separate vertical bar so reps can see the threshold
   even when their fill is short. */
.quota-tracker-progress-target {
    position: absolute;
    top: -2px;
    bottom: -2px;
    right: 0;
    width: 2px;
    background: #1f2937;
}

.quota-tracker-chart-wrap {
    position: relative;
    /* Grow to absorb the slack space inside .quota-tracker-card so the
       chart fills whatever height the sibling Commission Paid tile
       (with its sparkline) sets. min-height keeps the chart legible
       on short cards (e.g. when the no-quota callout is hidden). */
    flex: 1 1 auto;
    min-height: 200px;
    margin-top: 0.4rem;
}
.quota-tracker-chart-wrap canvas { display: block; cursor: pointer; }

/* ----------------------------------------------------------------- */
/* Commission pipeline graphic (per-rep dashboard)                   */
/* ----------------------------------------------------------------- */
/* Three-stage horizontal flow: aging buckets → total unlockable →
   commission outstanding. Reads as a money funnel — customer A/R
   collects on the left, the aged dollars convert into unlockable
   commission, and the most-recent month's earned commission spills
   out the right side as the rep's payout. */
.commission-pipeline {
    display: grid;
    grid-template-columns: minmax(0, 2.4fr) auto minmax(0, 1fr);
    align-items: stretch;
    gap: 0.5rem;
}
.pipeline-stage {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 0.5rem;
    padding: 0.85rem 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    position: relative;
}
.pipeline-stage-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}
.pipeline-stage-title {
    text-transform: uppercase;
    font-size: 0.7rem;
    letter-spacing: 0.06em;
    font-weight: 600;
    color: #6b7280;
}
.pipeline-stage-help {
    position: static !important;
    width: 22px; height: 22px;
    border-radius: 50%;
    background: transparent;
    border: 1px solid #d1d5db;
    color: #6b7280;
    font-size: 0.7rem;
    line-height: 1;
    cursor: pointer;
    transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.pipeline-stage-help:hover {
    background: var(--crs-red, #c8102e);
    border-color: var(--crs-red, #c8102e);
    color: #fff;
}
.pipeline-stage-amount {
    font-size: 1.55rem;
    font-weight: 700;
    color: #111827;
    line-height: 1.15;
    margin-top: auto;
}
.pipeline-stage-sub { font-size: 0.78rem; color: #6b7280; }
.pipeline-stage-meta {
    font-size: 0.72rem;
    color: #4b5563;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.01em;
}
.pipeline-stage-unlockable { border-left: 4px solid #10b981; }
.pipeline-stage-unlockable .pipeline-stage-amount { color: #10b981; }
.pipeline-stage-payout     {
    border-left: 4px solid #10b981;
    background: linear-gradient(135deg, #ecfdf5 0%, #f0fdf4 100%);
    border-color: #a7f3d0;
    border-left-color: #10b981;
    box-shadow: 0 2px 8px rgba(16, 185, 129, 0.12);
}
.pipeline-stage-payout .cmp-stage-amount {
    font-size: 1.55rem;
    font-weight: 800;
    color: #059669;
    letter-spacing: -0.02em;
}
.pipeline-stage-payout .pipeline-stage-title {
    color: #059669;
    font-weight: 700;
}
.pipeline-stage-payout .pipeline-stage-amount { color: #059669; }
.pipeline-stage-aging      { border-left: 4px solid #2563eb; }

/* Full-width variant of .pipeline-stage-payout — reused as a Headline-KPI
   banner (Aug 2026) instead of the narrow rightmost pipeline stage. Same
   green treatment, but flows its header/amount/meta horizontally so the
   extra width reads as a banner instead of a tall card with empty sides. */
.kpi-banner-full {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 1.5rem;
}
.kpi-banner-full .pipeline-stage-header {
    flex: 0 0 auto;
}
.kpi-banner-full .cmp-stage-amount {
    margin-top: 0;
}
.kpi-banner-full .cmp-stage-sub,
.kpi-banner-full .cmp-stage-meta,
.kpi-banner-full .cmp-stage-disclaimer {
    flex: 0 0 auto;
}
@media (max-width: 700px) {
    .kpi-banner-full { flex-direction: column; align-items: flex-start; }
}

.pipeline-buckets {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0.4rem;
    margin-top: 0.2rem;
}

/* Single stacked-bar graphic — each segment width = its bucket's share
   of total outstanding receivables, so the geometry of the bar IS the
   breakdown. Replaces the 5-column grid for a more cohesive read. */
.pipeline-stack {
    display: flex;
    align-items: stretch;
    margin-top: 0.35rem;
    border: 1px solid #e5e7eb;
    border-radius: 0.4rem;
    overflow: hidden;
    background: #f9fafb;
    min-height: 84px;
}
.pipeline-stack-seg {
    /* flex-grow comes from the inline style (= share_pct). Setting a
       min-basis keeps near-zero buckets visible enough to label. */
    flex-basis: 0;
    flex-shrink: 0;
    min-width: 84px;
    padding: 0.55rem 0.7rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 0.15rem;
    border-right: 1px solid rgba(255, 255, 255, 0.85);
    /* Default tinted gradient — bucket-specific colors override below. */
    background: linear-gradient(180deg, #f3f4f6 0%, #e5e7eb 100%);
    color: #111827;
    transition: filter 0.15s ease;
    overflow: hidden;
}
.pipeline-stack-seg:last-child { border-right: 0; }
.pipeline-stack-seg:hover { filter: brightness(0.96); }
.pipeline-stack-seg.is-empty { opacity: 0.55; }

.pipeline-stack-seg-label {
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.92);
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}
.pipeline-stack-seg-amount {
    font-size: 1.05rem;
    font-weight: 700;
    color: #fff;
    line-height: 1.15;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.pipeline-stack-seg-meta {
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.85);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Bucket-specific gradients — match the bar-fill colors used elsewhere
   so the visual language stays consistent across the dashboard. */
.pipeline-stack-seg.pipeline-bucket-0-30   { background: linear-gradient(180deg, #34d399 0%, #10b981 100%); }
.pipeline-stack-seg.pipeline-bucket-31-60  { background: linear-gradient(180deg, #60a5fa 0%, #2563eb 100%); }
.pipeline-stack-seg.pipeline-bucket-61-90  { background: linear-gradient(180deg, #fbbf24 0%, #f59e0b 100%); }
.pipeline-stack-seg.pipeline-bucket-91-120 { background: linear-gradient(180deg, #f87171 0%, #ef4444 100%); }
.pipeline-stack-seg.pipeline-bucket-120\+  { background: linear-gradient(180deg, #b91c1c 0%, #991b1b 100%); }
.pipeline-stack-seg.is-empty {
    /* No data → flat gray so it doesn't draw the eye. */
    background: linear-gradient(180deg, #e5e7eb 0%, #d1d5db 100%);
}
.pipeline-stack-seg.is-empty .pipeline-stack-seg-label,
.pipeline-stack-seg.is-empty .pipeline-stack-seg-amount,
.pipeline-stack-seg.is-empty .pipeline-stack-seg-meta {
    color: #6b7280;
}

/* Click-to-expand on a pipeline-stack segment.
   Default state shows the abbreviated value (.pipeline-stack-seg-short)
   and hides the full value (.pipeline-stack-seg-full). When a segment
   is clicked, JS adds .is-expanded to it and .has-expanded to the
   parent .pipeline-stack — the focused seg grows to dominate the row,
   the rest collapse to a min-width sliver, and the focused seg
   reveals its un-abbreviated values. Click again (or click another
   segment) to reset. */
.pipeline-stack-seg-short { display: inline; }
.pipeline-stack-seg-full  { display: none; }
.pipeline-stack-seg.is-expanded .pipeline-stack-seg-short { display: none; }
.pipeline-stack-seg.is-expanded .pipeline-stack-seg-full  { display: inline; }

.pipeline-stack-seg {
    cursor: pointer;
    /* Smooth size transition when a segment is focused / unfocused. */
    transition: filter 0.15s ease, flex-grow 0.25s ease, opacity 0.2s ease;
}
.pipeline-stack-seg:focus { outline: 2px solid #2563eb; outline-offset: -2px; }

/* When the parent stack has a focused segment, dim + collapse the
   non-focused segments. The focused seg gets a much higher flex-grow
   so it visibly dominates the row (proportions are no longer
   share-based — that's the whole point of focus mode). */
.pipeline-stack.has-expanded .pipeline-stack-seg {
    flex-grow: 0.4 !important;
    opacity: 0.55;
}
.pipeline-stack.has-expanded .pipeline-stack-seg.is-expanded {
    flex-grow: 6 !important;
    opacity: 1;
    box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.6);
}
/* In focused state, the expanded seg's full values get a touch more
   breathing room so the comma-formatted figure reads cleanly. */
.pipeline-stack-seg.is-expanded .pipeline-stack-seg-amount {
    font-size: 1.4rem;
    line-height: 1.2;
    white-space: normal;
}
.pipeline-stack-seg.is-expanded .pipeline-stack-seg-meta {
    font-size: 0.85rem;
    white-space: normal;
}
/* "View details" drill-down button inside an expanded segment. Hidden
   in the default (collapsed) state since the seg is too narrow to host
   it; revealed when the seg gains .is-expanded so the user has a clear
   action target after focusing a bucket. */
.pipeline-stack-seg-action {
    display: none;
    margin-top: 0.5rem;
    align-self: center;
    font-size: 0.8rem;
    font-weight: 600;
    color: #1f2937;
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid rgba(0, 0, 0, 0.08);
    text-decoration: none;
}
.pipeline-stack-seg-action:hover,
.pipeline-stack-seg-action:focus {
    background: #ffffff;
    color: #111827;
    text-decoration: none;
}
.pipeline-stack-seg.is-expanded .pipeline-stack-seg-action {
    display: inline-block;
}

/* KPI drill-down links — clickable KPI values that navigate to detail pages. */
.kpi-drilldown-link {
    color: inherit;
    text-decoration: none;
    border-bottom: 2px dashed rgba(0, 0, 0, 0.15);
    transition: border-color 0.15s, color 0.15s;
    cursor: pointer;
}
.kpi-drilldown-link:hover,
.kpi-drilldown-link:focus {
    color: #2563eb;
    border-bottom-color: #2563eb;
    text-decoration: none;
}
a.kpi-drilldown-block {
    color: inherit;
    text-decoration: none;
    transition: box-shadow 0.15s, border-color 0.15s;
    cursor: pointer;
}
a.kpi-drilldown-block:hover,
a.kpi-drilldown-block:focus {
    box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.25);
    border-color: #2563eb;
    text-decoration: none;
    color: inherit;
}
a.pipeline-stage.kpi-drilldown-block:hover .pipeline-stage-amount,
a.pipeline-stage.kpi-drilldown-block:focus .pipeline-stage-amount {
    text-decoration: underline;
}
a.current-month-stat.kpi-drilldown-block {
    border-radius: 0.4rem;
    padding: 0.3rem 0.5rem;
}
a.current-month-stat.kpi-drilldown-block:hover .current-month-stat-value {
    color: #2563eb;
}
.pipeline-bucket {
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 0.35rem;
    padding: 0.45rem 0.55rem;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}
.pipeline-bucket-label {
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #6b7280;
    font-weight: 600;
}
.pipeline-bucket-amount {
    font-size: 1rem;
    font-weight: 700;
    color: #111827;
    line-height: 1.15;
    font-variant-numeric: tabular-nums;
}
.pipeline-bucket-meta {
    font-size: 0.7rem;
    color: #6b7280;
    font-variant-numeric: tabular-nums;
}
.pipeline-bucket-bar {
    height: 4px;
    background: #e5e7eb;
    border-radius: 2px;
    margin-top: 0.25rem;
    overflow: hidden;
}
.pipeline-bucket-bar-fill {
    height: 100%;
    background: #2563eb;
    transition: width 0.25s ease;
}
.pipeline-bucket-0-30   .pipeline-bucket-bar-fill { background: #10b981; }
.pipeline-bucket-31-60  .pipeline-bucket-bar-fill { background: #2563eb; }
.pipeline-bucket-61-90  .pipeline-bucket-bar-fill { background: #f59e0b; }
.pipeline-bucket-91-120 .pipeline-bucket-bar-fill { background: #ef4444; }
.pipeline-bucket-120\+  .pipeline-bucket-bar-fill { background: #991b1b; }

.pipeline-bucket.is-overdue .pipeline-bucket-amount { color: #b91c1c; }
.pipeline-bucket-0-30 .pipeline-bucket-amount { color: #047857; }

.pipeline-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #9ca3af;
    font-size: 1rem;
    padding: 0 0.25rem;
}

@media (max-width: 1100px) {
    .commission-pipeline { grid-template-columns: 1fr; }
    .pipeline-arrow { transform: rotate(90deg); height: 1.25rem; }
}
@media (max-width: 700px) {
    .pipeline-buckets { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Equal-height KPI tiles. Bootstrap rows already stretch their columns,
   but the inner .card defaults to its content height — so a tile with a
   sub-line (e.g. "vs Quota: ...") would stand taller than its neighbors.
   Force every .card whose body is a kpi-card-body to fill the column. */
.card:has(> .kpi-card-body) {
    height: 100%;
}
.kpi-help {
    /* Small circular pill — subtle when idle, brand-red and slightly
       raised on hover. Sized so it aligns with typical card padding. */
    position: absolute;
    top: 8px;
    right: 8px;
    width: 22px;
    height: 22px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--crs-gray-300, #e5e7eb);
    border-radius: 50%;
    background: var(--crs-gray-100, #f6f7f9);
    color: var(--crs-gray-600, #6c757d);
    font-size: 0.72rem;
    line-height: 1;
    opacity: 0.85;
    cursor: pointer;
    transition: background 0.18s ease, color 0.18s ease,
                border-color 0.18s ease, transform 0.18s ease,
                box-shadow 0.18s ease, opacity 0.18s ease;
}
.kpi-help:hover,
.kpi-help:focus {
    opacity: 1;
    background: var(--crs-red-light, #FCE8EC);
    color: var(--crs-red, #C8102E);
    border-color: var(--crs-red, #C8102E);
    outline: none;
    transform: scale(1.08);
    box-shadow: 0 2px 6px rgba(200, 16, 46, 0.22);
}
.kpi-help:active {
    transform: scale(0.94);
    box-shadow: 0 1px 2px rgba(200, 16, 46, 0.18) inset;
}
.kpi-help i { pointer-events: none; }

/* Inline variant of the help pill for cells inside the monthly-grid
   tables (e.g. the "Commissionable Amount" row labels). Same visual
   language as .kpi-help but inline-positioned next to the label text
   instead of absolute-positioned in a card corner. */
.row-help {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    padding: 0;
    margin-left: 4px;
    border: 1px solid var(--crs-gray-300, #e5e7eb);
    border-radius: 50%;
    background: var(--crs-gray-100, #f6f7f9);
    color: var(--crs-gray-600, #6c757d);
    font-size: 0.65rem;
    line-height: 1;
    opacity: 0.85;
    cursor: pointer;
    vertical-align: middle;
    transition: background 0.18s ease, color 0.18s ease,
                border-color 0.18s ease, transform 0.18s ease,
                box-shadow 0.18s ease, opacity 0.18s ease;
}
.row-help:hover,
.row-help:focus {
    opacity: 1;
    background: var(--crs-red-light, #FCE8EC);
    color: var(--crs-red, #C8102E);
    border-color: var(--crs-red, #C8102E);
    outline: none;
    transform: scale(1.1);
    box-shadow: 0 2px 6px rgba(200, 16, 46, 0.22);
}
.row-help:active {
    transform: scale(0.94);
    box-shadow: 0 1px 2px rgba(200, 16, 46, 0.18) inset;
}
.row-help i { pointer-events: none; }

/* Modal body spacing */
#kpiHelpBody p  { margin-bottom: 0.7rem; }
#kpiHelpBody ul { margin-bottom: 0.7rem; padding-left: 1.2rem; }
#kpiHelpBody li { margin-bottom: 0.2rem; }

/* Commission-summary controls row ---------------------------------------
   Horizontal strip with:  [period]  [rep filter + inline Clear]  ...  [export]
   Implemented as CSS flex. Each .controls-cell is a column holding a small
   label + the control itself. Export gets pushed to the right via
   .controls-cell-right (margin-left: auto). Nothing stretches — every
   control sits at the natural content width of its select/button. */
.controls-row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 14px 20px;
    margin-bottom: 1rem;
}
.controls-cell { display: flex; flex-direction: column; }
.controls-cell > label {
    font-size: 0.78rem;
    color: var(--crs-gray-600, #6c757d);
    margin-bottom: 4px;
    font-weight: 500;
}
.controls-cell > label .hint {
    font-weight: 400;
    color: var(--crs-gray-500, #9aa0a6);
    font-size: 0.75rem;
}
.controls-cell-right { margin-left: auto; }
.controls-row form { margin: 0; }
.controls-row .form-control-sm { min-width: 160px; }

/* --- Searchable chip-based rep filter -------------------------------------
   Replaces the previous native <select multiple>. Structure:
     .rep-filter-widget
       .rep-filter-inputwrap  (search icon + input + clear)
       .rep-filter-dropdown   (absolute-positioned options list)
       .rep-filter-chips      (selected rep pills with × buttons)
       select.rep-filter-hidden-select  (DOM-only source of truth)
*/
.rep-filter-cell { min-width: 320px; max-width: 420px; }
.rep-filter-widget {
    position: relative;
    width: 100%;
}
.rep-filter-inputwrap {
    position: relative;
    display: flex;
    align-items: stretch;
    gap: 6px;
}
.rep-filter-search-icon {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--crs-gray-500);
    font-size: 0.85rem;
    pointer-events: none;
}
input.rep-filter-search {
    flex: 1;
    /* Bootstrap's `.form-control-sm` ships a left padding of 0.5rem that
       overrides this rule due to specificity unless we force it. The
       icon sits at left: 10px (~14px wide) so the text needs to start
       at ~32px+ to clear it. */
    padding-left: 32px !important;
    border-radius: var(--crs-radius, 6px);
    border: 1px solid var(--crs-gray-300);
    transition: border-color 0.15s, box-shadow 0.15s;
}
input.rep-filter-search:focus {
    border-color: var(--crs-red);
    box-shadow: 0 0 0 3px var(--crs-red-tint);
    outline: none;
}
.rep-filter-clear-btn {
    background: transparent;
    color: var(--crs-gray-600);
    border: 1px solid var(--crs-gray-300);
    border-radius: var(--crs-radius, 6px);
    padding: 0 0.75rem;
    font-size: 0.78rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s;
    line-height: 1;
}
.rep-filter-clear-btn:hover {
    background: var(--crs-red-light);
    color: var(--crs-red-dark);
    border-color: var(--crs-red);
}
.rep-filter-dropdown {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    z-index: 30;
    max-height: 260px;
    overflow-y: auto;
    background: #fff;
    border: 1px solid var(--crs-gray-300);
    border-radius: var(--crs-radius, 6px);
    box-shadow: 0 6px 16px rgba(13, 13, 13, 0.12);
}
.rep-filter-item {
    padding: 0.45rem 0.75rem;
    cursor: pointer;
    font-size: 0.9rem;
    color: var(--crs-gray-900);
    border-bottom: 1px solid var(--crs-gray-100);
    transition: background 0.12s, color 0.12s;
}
.rep-filter-item:last-child { border-bottom: none; }
.rep-filter-item:hover,
.rep-filter-item:focus {
    background: var(--crs-red-light);
    color: var(--crs-red-dark);
    outline: none;
}
.rep-filter-item mark {
    background: transparent;
    color: inherit;
    font-weight: 700;
    padding: 0;
}
.rep-filter-empty {
    padding: 0.55rem 0.75rem;
    color: var(--crs-gray-600);
    font-style: italic;
    font-size: 0.85rem;
    text-align: center;
}
.rep-filter-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    margin-top: 0.5rem;
}
.rep-filter-chips:empty { display: none; }
.rep-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    background: var(--crs-red-light);
    color: var(--crs-red-dark);
    border: 1px solid var(--crs-red-tint);
    border-radius: 999px;
    padding: 0.2rem 0.4rem 0.2rem 0.7rem;
    font-size: 0.78rem;
    font-weight: 600;
    line-height: 1.2;
    transition: box-shadow 0.12s;
}
.rep-chip:hover { box-shadow: 0 1px 4px rgba(200, 16, 46, 0.15); }
.rep-chip-x {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(200, 16, 46, 0.15);
    color: var(--crs-red-dark);
    border: 0;
    border-radius: 50%;
    width: 1.15rem;
    height: 1.15rem;
    padding: 0;
    font-size: 0.95rem;
    line-height: 1;
    cursor: pointer;
    transition: background 0.12s;
}
.rep-chip-x:hover {
    background: var(--crs-red);
    color: #fff;
}
.rep-filter-hidden-select { display: none !important; }
/* Bootstrap 4 provides .text-success / .text-danger, but nail the exact
   shade we want so they read at a glance on white-background cells. */
.text-success { color: #0f9d58 !important; }
.text-danger  { color: #d93025 !important; }

/* ── Projection modal (current-month banner click) ────────────── */
button.current-month-stat-projected {
    background: none;
    border: 1px solid transparent;
    border-radius: 0.4rem;
    padding: 0.3rem 0.5rem;
    cursor: pointer;
    transition: border-color 0.18s, box-shadow 0.18s, background 0.18s;
    text-align: left;
}
button.current-month-stat-projected:hover,
button.current-month-stat-projected:focus {
    border-color: #d97706;
    box-shadow: 0 2px 8px rgba(217, 119, 6, 0.15);
    background: #fffbeb;
    outline: none;
}
button.current-month-stat-projected:hover .current-month-stat-value {
    text-decoration: underline;
}

.projection-breakdown { font-size: 0.92rem; }

.projection-formula {
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 0.5rem;
    padding: 0.75rem 1rem;
}
.projection-formula-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.3rem 0;
}
.projection-formula-row + .projection-formula-row {
    border-top: 1px solid #f3f4f6;
}
.projection-formula-divider {
    border-top: 2px dashed #d1d5db !important;
    margin-top: 0.15rem;
    padding-top: 0.45rem;
}
.projection-formula-label {
    color: #374151;
    font-weight: 500;
}
.projection-formula-value {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: #111827;
}
.projection-formula-computed { color: #2563eb; }
.projection-formula-result {
    border-top: 2px solid #111827 !important;
    margin-top: 0.25rem;
    padding-top: 0.5rem;
}
.projection-formula-result .projection-formula-label {
    font-weight: 700;
    color: #111827;
}
.projection-formula-result .projection-formula-value {
    font-size: 1.05rem;
    color: #92400e;
}

.projection-drivers h6 {
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #6b7280;
    font-weight: 600;
    margin-bottom: 0.5rem;
}
.projection-driver-card {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 0.4rem;
    padding: 0.6rem 0.75rem;
    text-align: center;
}
.projection-driver-label {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: #6b7280;
    font-weight: 600;
    margin-bottom: 0.3rem;
}
.projection-driver-values {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    font-variant-numeric: tabular-nums;
}
.projection-driver-actual {
    font-weight: 700;
    color: #111827;
    font-size: 0.95rem;
}
.projection-driver-arrow {
    color: #9ca3af;
    font-size: 0.85rem;
}
.projection-driver-projected {
    font-weight: 700;
    color: #92400e;
    font-size: 0.95rem;
}
.projection-driver-sub {
    font-size: 0.68rem;
    color: #9ca3af;
    margin-top: 0.15rem;
}

.projection-chart-wrap {
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 0.5rem;
    padding: 0.75rem;
    position: relative;
    height: 260px;
}
.projection-chart-wrap h6 {
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #6b7280;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

#projectionModal .modal-header {
    border-bottom: 2px solid #f59e0b;
    background: #fffbeb;
}
#projectionModal .modal-title {
    color: #92400e;
    font-weight: 700;
    font-size: 1rem;
}
#projectionModal .modal-title i { margin-right: 0.35rem; }

#projectionModal .text-muted.small {
    font-size: 0.75rem;
    margin-top: 0.75rem;
}

/* Potential commission sub-line in earned callout */
.earned-this-month-potential {
    font-size: 0.82rem;
    color: #b45309;
    margin-top: 2px;
    font-weight: 500;
}
.earned-this-month-potential i {
    color: #d97706;
    margin-right: 3px;
    font-size: 0.75rem;
}

/* ---- Scope Visual (Invoice Detail) ---- */
.scope-visual {
    background: var(--clair-card-bg, #fff);
    border: 1px solid var(--clair-border, #e2e8f0);
    border-radius: 10px;
    padding: 14px 18px 12px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}
.scope-visual-header {
    font-size: 0.85rem;
    color: var(--clair-text-secondary, #475569);
    margin-bottom: 8px;
}
.scope-visual-header i {
    margin-right: 5px;
    opacity: 0.6;
}
.scope-visual-header strong {
    color: var(--clair-text, #1e293b);
}
.scope-visual-note {
    font-weight: 400;
    color: var(--clair-text-secondary, #64748b);
    font-size: 0.8rem;
}
/* Stacked bar */
.scope-visual-bar-wrap { margin-bottom: 8px; }
.scope-visual-bar {
    display: flex;
    height: 18px;
    border-radius: 9px;
    overflow: hidden;
    background: var(--clair-bg, #f1f5f9);
}
.scope-seg {
    min-width: 2px;
    transition: flex 0.3s ease;
}
.scope-seg-paid        { background: rgba(16, 185, 129, 0.75); }
.scope-seg-paid-other  { background: rgba(16, 185, 129, 0.35); }
.scope-seg-unpaid      { background: rgba(245, 158, 11, 0.60); }
.scope-seg-this-month  { background: rgba(59, 130, 246, 0.70); }
.scope-seg-other-month { background: rgba(139, 92, 246, 0.60); }
/* Legend */
.scope-visual-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 16px;
    font-size: 0.78rem;
    color: var(--clair-text-secondary, #475569);
}
.scope-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    white-space: nowrap;
}
.scope-dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 3px;
    flex-shrink: 0;
}
.scope-dot-paid        { background: rgba(16, 185, 129, 0.75); }
.scope-dot-paid-other  { background: rgba(16, 185, 129, 0.35); }
.scope-dot-unpaid      { background: rgba(245, 158, 11, 0.60); }
.scope-dot-this-month  { background: rgba(59, 130, 246, 0.70); }
.scope-dot-other-month { background: rgba(139, 92, 246, 0.60); }
/* Section label between bars */
.scope-visual-section-label {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--clair-text-secondary, #64748b);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    margin-top: 10px;
    margin-bottom: 4px;
}
/* Info callout inside scope visual */
.scope-visual-callout {
    margin-top: 8px;
    padding: 8px 12px;
    font-size: 0.78rem;
    color: var(--clair-text-secondary, #475569);
    background: rgba(59, 130, 246, 0.06);
    border-left: 3px solid rgba(59, 130, 246, 0.4);
    border-radius: 0 6px 6px 0;
    line-height: 1.4;
}
.scope-visual-callout i {
    color: rgba(59, 130, 246, 0.6);
    margin-right: 4px;
}