/* ============================================================================
   BuyerEngine AI UI - light workbench theme
   ----------------------------------------------------------------------------
   Loaded AFTER css/modern-saas.css. Everything is scoped to .modern-saas-theme,
   which only the logged-in customer pages carry, so the admin pages keep the
   old look untouched.

   modern-saas.css paints the sidebar with a red gradient and pins white text on
   it using !important throughout. Matching that specificity from a later file is
   the only way to repaint it, which is why the sidebar block below leans on
   !important. New rules outside that block should not.

   Deliberately NOT set anywhere in this file: `display` with !important on .btn.
   An earlier version of the theme did that and it silently beat jQuery .hide(),
   so buttons could never be hidden. Nothing here forces display.
   ============================================================================ */

.modern-saas-theme {
    --rd-bg:#F7F8FA;
    --rd-panel:#FFFFFF;
    --rd-line:#E8EAEF;
    --rd-line-soft:#F0F1F5;
    --rd-ink:#14161B;
    --rd-ink-2:#5B6472;
    --rd-ink-3:#8A93A2;
    --rd-brand:#E5322D;
    --rd-brand-soft:#FEF2F1;
    --rd-brand-ink:#B3221E;
    --rd-green:#12886A;  --rd-green-soft:#E9F7F2;
    --rd-amber:#B4690E;  --rd-amber-soft:#FDF3E4;
    --rd-blue:#2563C9;   --rd-blue-soft:#EDF3FE;
    --rd-purple:#6D3FC4; --rd-purple-soft:#F3EEFC;
    --rd-r:12px;
    --rd-shadow:0 1px 2px rgba(16,24,40,.04), 0 1px 3px rgba(16,24,40,.06);
}

/* ---------------------------------------------------------------- canvas -- */
body.modern-saas-theme,
.modern-saas-theme #content-wrapper,
.modern-saas-theme #content {
    background: var(--rd-bg);
    color: var(--rd-ink);
}

/* =========================================================================
   SIDEBAR - red gradient becomes a white panel
   ========================================================================= */
body.modern-saas-theme .sidebar,
.modern-saas-theme .sidebar,
.modern-saas-theme .bg-gradient-modern-saas,
.modern-saas-theme ul.bg-gradient-modern-saas,
.modern-saas-theme .sidebar.bg-gradient-modern-saas {
    background: var(--rd-panel) !important;
    border-right: 1px solid var(--rd-line);
}

/* Group headings carry an inline colour from menucolor.php ($iconstyle, white
   at 80%), so this needs !important to be visible on a light panel at all. */
.modern-saas-theme .sidebar .sidebar-heading,
.modern-saas-theme .sidebar-heading {
    color: var(--rd-ink-3) !important;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    padding: 16px 22px 6px;
    text-align: left;
}

.modern-saas-theme .sidebar .sidebar-divider,
.modern-saas-theme .sidebar hr.sidebar-divider {
    border-color: var(--rd-line-soft);
    opacity: 1;
    margin: 6px 16px;
}

.modern-saas-theme .sidebar .nav-link {
    border-radius: 9px;
    margin: 1px 10px;
    padding: 9px 12px;
    padding-right: 34px;          /* room for the corner badge / lock */
    transition: background .12s ease, color .12s ease;
    position: relative;
    overflow: hidden;
    color: var(--rd-ink-2) !important;
    font-size: 13.5px;
}

/* The old theme slid links 4px right on hover. On a light panel a quiet
   background change reads better and stops the corner badges drifting. */
.modern-saas-theme .sidebar .nav-link:hover {
    background: var(--rd-line-soft);
    backdrop-filter: none;
    transform: none;
    color: var(--rd-ink) !important;
}

.modern-saas-theme .sidebar .nav-link i {
    width: 17px;
    margin-right: 11px;
    font-size: 14px;
    color: var(--rd-ink-3) !important;
}

.modern-saas-theme .sidebar .nav-link span {
    font-weight: 500;
    color: var(--rd-ink-2) !important;
    transition: none;
}

.modern-saas-theme .sidebar .nav-link:hover span,
.modern-saas-theme .sidebar .nav-link:hover i {
    color: var(--rd-ink) !important;
}

/* Current page */
.modern-saas-theme .sidebar .nav-item.active > .nav-link,
.modern-saas-theme .sidebar .nav-item.active > .nav-link:hover {
    background: var(--rd-brand-soft);
}
.modern-saas-theme .sidebar .nav-item.active > .nav-link span {
    color: var(--rd-brand-ink) !important;
    font-weight: 650;
}
.modern-saas-theme .sidebar .nav-item.active > .nav-link i {
    color: var(--rd-brand) !important;
}

/* Lock + MAX badge keep the absolute corner placement modern-saas.css set up,
   recoloured for a light panel. */
.modern-saas-theme .sidebar .nav-link .fa-lock,
.modern-saas-theme .sidebar .nav-link .fa-lock.text-warning {
    color: #C9CED8 !important;
    top: 11px !important;
    right: 13px !important;
    font-size: 11px !important;
}
.modern-saas-theme .sidebar .nav-link .badge,
body.modern-saas-theme .sidebar .nav-link .badge {
    top: 9px !important;
    right: 11px !important;
    font-size: 9.5px !important;
    font-weight: 700 !important;
    padding: 2px 7px !important;
    border-radius: 9px !important;
}
.modern-saas-theme .sidebar .nav-link .badge-warning {
    background: var(--rd-amber-soft) !important;
    color: var(--rd-amber) !important;
}

/* The Upgrades sub-menu is .bg-white, which vanished into the white panel. */
.modern-saas-theme .sidebar .nav-item .collapse .collapse-inner,
.modern-saas-theme .sidebar .nav-item .collapsing .collapse-inner {
    background: var(--rd-bg) !important;
    border: 1px solid var(--rd-line);
    border-radius: 10px;
    margin: 2px 10px 6px;
    box-shadow: none;
}
.modern-saas-theme .sidebar .nav-item .collapse .collapse-inner .collapse-item {
    color: var(--rd-ink-2) !important;
    font-size: 12.5px;
    font-weight: 500;
    padding: 7px 14px;
    border-radius: 7px;
}
.modern-saas-theme .sidebar .nav-item .collapse .collapse-inner .collapse-item:hover {
    background: var(--rd-line-soft) !important;
    color: var(--rd-ink) !important;
}

/* The logo is dark-on-transparent by design, so the white plate that made it
   readable on the red gradient is now just a floating rectangle. */
.modern-saas-theme .sidebar .sidebar-brand-icon img,
.modern-saas-theme .sidebar-brand-icon img {
    background: transparent;
    padding: 4px 10px;
    border-radius: 0;
    box-shadow: none;
    max-width: 84% !important;
}

/* Logout keeps its red tint, calmed down for a light panel. */
.modern-saas-theme .sidebar .nav-item .nav-link[href="logout.php"],
.modern-saas-theme #mobileSidebarFooter .nav-link {
    background: var(--rd-brand-soft) !important;
}
.modern-saas-theme .sidebar .nav-item .nav-link[href="logout.php"] span,
.modern-saas-theme .sidebar .nav-item .nav-link[href="logout.php"] i,
.modern-saas-theme #mobileSidebarFooter .nav-link span,
.modern-saas-theme #mobileSidebarFooter .nav-link i {
    color: var(--rd-brand-ink) !important;
}

.modern-saas-theme #sidebarToggle {
    background: var(--rd-line-soft) !important;
}

/* =========================================================================
   TOPBAR
   ========================================================================= */
.modern-saas-theme .topbar,
.modern-saas-theme nav.topbar {
    background: var(--rd-panel) !important;
    border-bottom: 1px solid var(--rd-line);
    box-shadow: none !important;
}

/* =========================================================================
   SURFACES
   ========================================================================= */
.modern-saas-theme .card {
    background: var(--rd-panel);
    border: 1px solid var(--rd-line);
    border-radius: var(--rd-r);
    box-shadow: var(--rd-shadow);
}
.modern-saas-theme .card-header {
    background: var(--rd-panel);
    border-bottom: 1px solid var(--rd-line-soft);
    font-weight: 700;
    font-size: 13.5px;
    letter-spacing: -.01em;
    color: var(--rd-ink);
}

.modern-saas-theme h1, .modern-saas-theme .h1,
.modern-saas-theme h2, .modern-saas-theme .h2 {
    letter-spacing: -.02em;
    color: var(--rd-ink);
}
.modern-saas-theme .text-gray-800 { color: var(--rd-ink) !important; }
.modern-saas-theme .text-gray-600,
.modern-saas-theme .text-gray-700 { color: var(--rd-ink-2) !important; }
.modern-saas-theme .text-muted,
.modern-saas-theme .text-gray-500,
.modern-saas-theme .text-gray-400 { color: var(--rd-ink-3) !important; }

/* =========================================================================
   BUTTONS  (never sets `display` - see the header note)
   ========================================================================= */
.modern-saas-theme .btn {
    border-radius: 9px;
    font-weight: 650;
    font-size: 12.5px;
    letter-spacing: 0;
}
.modern-saas-theme .btn-primary {
    background: var(--rd-brand);
    border-color: var(--rd-brand);
    box-shadow: none;
}
.modern-saas-theme .btn-primary:hover,
.modern-saas-theme .btn-primary:focus,
.modern-saas-theme .btn-primary:not(:disabled):not(.disabled):active {
    background: #CF2925;
    border-color: #CF2925;
    box-shadow: none;
    transform: none;
}
.modern-saas-theme .btn-secondary,
.modern-saas-theme .btn-light,
.modern-saas-theme .btn-outline-secondary {
    background: var(--rd-panel);
    color: var(--rd-ink-2);
    border: 1px solid var(--rd-line);
}
.modern-saas-theme .btn-secondary:hover,
.modern-saas-theme .btn-light:hover,
.modern-saas-theme .btn-outline-secondary:hover {
    background: var(--rd-panel);
    border-color: #D4D8E0;
    color: var(--rd-ink);
}
.modern-saas-theme .btn-success { background:var(--rd-green); border-color:var(--rd-green); }
.modern-saas-theme .btn-info    { background:var(--rd-blue);  border-color:var(--rd-blue); }

/* =========================================================================
   BADGES
   ========================================================================= */
.modern-saas-theme .badge {
    border-radius: 99px;
    font-weight: 700;
    font-size: 11px;
    padding: 3px 9px;
}
.modern-saas-theme .badge-success { background:var(--rd-green-soft); color:var(--rd-green); }
.modern-saas-theme .badge-info    { background:var(--rd-blue-soft);  color:var(--rd-blue); }
.modern-saas-theme .badge-warning { background:var(--rd-amber-soft); color:var(--rd-amber); }
.modern-saas-theme .badge-danger  { background:#FDECEC;              color:var(--rd-brand-ink); }
.modern-saas-theme .badge-secondary { background:#F1F3F7;            color:var(--rd-ink-2); }

/* =========================================================================
   TABLES + FORMS
   ========================================================================= */
.modern-saas-theme .table thead th {
    border-bottom: 1px solid var(--rd-line);
    border-top: 0;
    color: var(--rd-ink-3);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
}
.modern-saas-theme .table td {
    border-top: 1px solid var(--rd-line-soft);
    font-size: 13px;
    vertical-align: middle;
}
.modern-saas-theme .table-hover tbody tr:hover { background: #FCFCFD; }

.modern-saas-theme .form-control,
.modern-saas-theme .custom-select {
    border: 1px solid var(--rd-line);
    border-radius: 9px;
    font-size: 13.5px;
    color: var(--rd-ink);
}
.modern-saas-theme .form-control:focus,
.modern-saas-theme .custom-select:focus {
    border-color: var(--rd-brand);
    box-shadow: 0 0 0 3px var(--rd-brand-soft);
}
.modern-saas-theme .form-control::placeholder { color: var(--rd-ink-3); }

/* =========================================================================
   SHARED COMPONENTS for pages written against this theme (e.g. queue.php)
   ========================================================================= */
.modern-saas-theme .rd-h1  { font-size:21px; font-weight:750; letter-spacing:-.02em; margin:0 0 3px; }
.modern-saas-theme .rd-sub { color:var(--rd-ink-2); font-size:13.5px; margin:0 0 20px; }
.modern-saas-theme .rd-sec { font-size:13px; font-weight:700; margin:26px 0 11px; display:flex; align-items:center; gap:8px; }
.modern-saas-theme .rd-mut { color:var(--rd-ink-3); font-size:11.5px; }

.modern-saas-theme .rd-stats { display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:12px; margin-bottom:20px; }
.modern-saas-theme .rd-stat  { padding:14px 16px; background:var(--rd-panel); border:1px solid var(--rd-line); border-radius:var(--rd-r); box-shadow:var(--rd-shadow); }
.modern-saas-theme .rd-stat .k { font-size:11.5px; color:var(--rd-ink-2); font-weight:600; margin-bottom:5px; }
.modern-saas-theme .rd-stat .v { font-size:25px; font-weight:750; letter-spacing:-.02em; color:var(--rd-ink); }
.modern-saas-theme .rd-stat .d { font-size:11.5px; color:var(--rd-ink-3); margin-top:2px; }

.modern-saas-theme .rd-chips { display:flex; gap:7px; flex-wrap:wrap; margin-bottom:16px; }
.modern-saas-theme .rd-chip  { padding:6px 13px; border-radius:99px; border:1px solid var(--rd-line); background:var(--rd-panel); font-size:12.5px; font-weight:600; color:var(--rd-ink-2); }
.modern-saas-theme .rd-chip:hover { border-color:#D4D8E0; color:var(--rd-ink); text-decoration:none; }
.modern-saas-theme .rd-chip.on    { background:var(--rd-ink); color:#fff; border-color:var(--rd-ink); }

.modern-saas-theme .rd-tag { display:inline-flex; align-items:center; gap:5px; font-size:11px; font-weight:700; padding:2.5px 9px; border-radius:99px; white-space:nowrap; }
.modern-saas-theme .rd-t-queued  { background:var(--rd-blue-soft);  color:var(--rd-blue); }
.modern-saas-theme .rd-t-held    { background:var(--rd-amber-soft); color:var(--rd-amber); }
.modern-saas-theme .rd-t-sent    { background:var(--rd-green-soft); color:var(--rd-green); }
.modern-saas-theme .rd-t-skipped { background:#F1F3F7;              color:var(--rd-ink-2); }
.modern-saas-theme .rd-t-failed  { background:#FDECEC;              color:var(--rd-brand-ink); }
.modern-saas-theme .rd-t-sending  { background:var(--rd-blue-soft); color:var(--rd-blue); }
.modern-saas-theme .rd-t-cancelled{ background:#F1F3F7;             color:var(--rd-ink-3); }

.modern-saas-theme .rd-qrow { padding:14px 18px; border-bottom:1px solid var(--rd-line-soft); display:flex; gap:14px; align-items:flex-start; }
.modern-saas-theme .rd-qrow:last-child { border-bottom:0; }
.modern-saas-theme .rd-qs { width:8px; height:8px; border-radius:50%; margin-top:7px; flex:0 0 8px; }
.modern-saas-theme .rd-qs.queued{background:var(--rd-blue)}
.modern-saas-theme .rd-qs.held{background:var(--rd-amber)}
.modern-saas-theme .rd-qs.sent{background:var(--rd-green)}
.modern-saas-theme .rd-qs.skipped{background:#C9CED8}
.modern-saas-theme .rd-qs.failed{background:var(--rd-brand)}
.modern-saas-theme .rd-qs.sending{background:var(--rd-blue)}
.modern-saas-theme .rd-qs.cancelled{background:#DDE1E8}

.modern-saas-theme .rd-note { display:flex; gap:9px; padding:11px 13px; border-radius:9px; font-size:12.5px; line-height:1.5; margin-top:14px; }
.modern-saas-theme .rd-note-g { background:var(--rd-green-soft); color:#0C6B53; }
.modern-saas-theme .rd-note-b { background:var(--rd-blue-soft);  color:#1E4FA3; }
.modern-saas-theme .rd-note-r { background:#FDECEC;              color:#9E1F1B; }
.modern-saas-theme .rd-empty  { padding:52px; text-align:center; color:var(--rd-ink-3); font-size:13px; }

/* =========================================================================
   MOBILE - the collapsed sidebar is an overlay, so it needs the panel colour
   and a shadow to separate it from the page beneath.
   ========================================================================= */
@media (max-width: 991px) {
    body.modern-saas-theme.ms-sidebar-open .sidebar,
    .modern-saas-theme .sidebar {
        background: var(--rd-panel) !important;
        box-shadow: 0 10px 40px rgba(16,24,40,.16);
    }
}

/* =========================================================================
   OVERRIDES for rules modern-saas.css sets with !important.
   Kept in one block so it is obvious what is being fought and why.
   ========================================================================= */

/* modern-saas.css paints every h1 with a red gradient via background-clip and
   -webkit-text-fill-color:transparent, which beats `color` and made page titles
   read as red. Reset the clip so headings are ink again. */
.modern-saas-theme h1,
.modern-saas-theme .container-fluid h1 {
    background: none !important;
    -webkit-background-clip: border-box !important;
    background-clip: border-box !important;
    -webkit-text-fill-color: currentColor !important;
    color: var(--rd-ink) !important;
    margin-bottom: 3px;
}
.modern-saas-theme h2, .modern-saas-theme h3,
.modern-saas-theme .h3, .modern-saas-theme .text-gray-800 {
    color: var(--rd-ink) !important;
}

/* The old theme gives the non-primary buttons dark/coloured gradients with
   !important. The light theme wants them quiet and outlined. */
.modern-saas-theme .btn-secondary,
.modern-saas-theme .btn-secondary:focus {
    background: var(--rd-panel) !important;
    border: 1px solid var(--rd-line) !important;
    color: var(--rd-ink-2) !important;
    font-weight: 650 !important;
}
.modern-saas-theme .btn-secondary:hover {
    background: var(--rd-panel) !important;
    border-color: #D4D8E0 !important;
    color: var(--rd-ink) !important;
}
.modern-saas-theme .btn-success {
    background: var(--rd-green) !important;
    border: 1px solid var(--rd-green) !important;
}
.modern-saas-theme .btn-info {
    background: var(--rd-blue) !important;
    border: 1px solid var(--rd-blue) !important;
}

/* Table headers were a red gradient bar with white uppercase text. On the light
   theme the header should recede so the data reads first. Two rules in
   modern-saas.css paint it (one of them shared with .badge-primary), and both
   sit later in that file than its own .table block, hence the reset here. */
.modern-saas-theme .table thead th {
    background: transparent !important;
    background-image: none !important;
    color: var(--rd-ink-3) !important;
    border: 0 !important;
    border-bottom: 1px solid var(--rd-line) !important;
    padding: 10px 12px !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: .06em !important;
    text-transform: uppercase;
}
/* .badge-primary shares the gradient above; keep it a real badge. */
.modern-saas-theme .badge-primary {
    background: var(--rd-brand-soft) !important;
    background-image: none !important;
    color: var(--rd-brand-ink) !important;
}

/* Card headers used to be a red gradient, so modern-saas.css forces every heading
   inside one to white with -webkit-text-fill-color !important. Now that the header
   is a white panel that text was invisible. Repaint it as ink. */
.modern-saas-theme .card-header h1,
.modern-saas-theme .card-header h2,
.modern-saas-theme .card-header h3,
.modern-saas-theme .card-header h4,
.modern-saas-theme .card-header h5,
.modern-saas-theme .card-header h6,
.modern-saas-theme .card-header .h1,
.modern-saas-theme .card-header .h2,
.modern-saas-theme .card-header .h3,
.modern-saas-theme .card-header .h4,
.modern-saas-theme .card-header .h5,
.modern-saas-theme .card-header .h6,
.modern-saas-theme .card-header .card-title,
.modern-saas-theme .card-header > i,
.modern-saas-theme .card-header h1 i, .modern-saas-theme .card-header h2 i,
.modern-saas-theme .card-header h3 i, .modern-saas-theme .card-header h4 i,
.modern-saas-theme .card-header h5 i, .modern-saas-theme .card-header h6 i {
    color: var(--rd-ink) !important;
    -webkit-text-fill-color: currentColor !important;
}
/* Icons in a header read better as the brand accent than as flat ink. */
.modern-saas-theme .card-header h1 i, .modern-saas-theme .card-header h2 i,
.modern-saas-theme .card-header h3 i, .modern-saas-theme .card-header h4 i,
.modern-saas-theme .card-header h5 i, .modern-saas-theme .card-header h6 i,
.modern-saas-theme .card-header > i {
    color: var(--rd-brand) !important;
}

/* sb-admin-2's .text-warning is #F6C23E, which only ever worked on its darker
   surfaces — on a white card it measures 1.65:1 against the background. Use the
   theme's amber, which is readable at small sizes. (Pre-existing on mentions.php,
   surfaced by the contrast sweep rather than caused by it.) */
.modern-saas-theme .text-warning { color: var(--rd-amber) !important; }
.modern-saas-theme .text-success { color: var(--rd-green) !important; }
.modern-saas-theme .text-info    { color: var(--rd-blue) !important; }

/* =========================================================================
   AUTH PAGES  (login / register / forgot password / brand register)
   -------------------------------------------------------------------------
   These have no sidebar; they carry body.login-page.modern-saas-theme and load
   css/auth.css, which painted a full-bleed red gradient behind a frosted-glass
   card. That was the old identity. Here they become the same light workbench as
   the app: off-white ground, one crisp white card, a solid brand button.
   This block must load AFTER auth.css.
   ========================================================================= */
body.modern-saas-theme.login-page {
    background: var(--rd-bg);
    /* A faint brand wash at the top keeps some warmth without the full gradient. */
    background-image: radial-gradient(1100px 460px at 50% -180px, #FDECEA 0%, rgba(253,236,234,0) 70%);
    background-repeat: no-repeat;
}

.modern-saas-theme .auth-card {
    background: var(--rd-panel);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border: 1px solid var(--rd-line);
    border-radius: 14px;
    box-shadow: 0 1px 2px rgba(16,24,40,.04), 0 12px 32px rgba(16,24,40,.08);
}

/* The brand pane beside the form: a quiet tinted plate, not a red wash. Uses
   --rd-line-soft rather than --rd-bg so it reads as part of the card instead of
   looking like the page showing through a hole in it. */
.modern-saas-theme .login-visual {
    background: var(--rd-line-soft);
    border-right: 1px solid var(--rd-line);
}
@media (max-width: 991.98px) {
    .modern-saas-theme .login-visual {
        border-right: 0;
        border-bottom: 1px solid var(--rd-line);
    }
}

.modern-saas-theme .login-title {
    color: var(--rd-ink);
    font-weight: 750;
    letter-spacing: -.02em;
}

/* Pill inputs become the same 9px fields used everywhere else in the app. */
.modern-saas-theme .form-control-user {
    border-radius: 9px !important;
    height: 44px;
    border: 1px solid var(--rd-line);
    font-size: 13.5px;
    color: var(--rd-ink);
}
.modern-saas-theme .form-control-user:focus {
    border-color: var(--rd-brand);
    box-shadow: 0 0 0 3px var(--rd-brand-soft) !important;
}
.modern-saas-theme .form-control-user::placeholder { color: var(--rd-ink-3); }

/* Solid brand button, no gradient and no hover lift. */
.modern-saas-theme .btn-gradient {
    background: var(--rd-brand);
    background-image: none;
    border-radius: 9px;
    height: 44px;
    font-weight: 650;
    font-size: 13.5px;
    box-shadow: none;
    transition: background .12s ease;
}
.modern-saas-theme .btn-gradient:hover {
    background: #CF2925;
    transform: none;
    box-shadow: none;
}
.modern-saas-theme .btn-gradient:active { transform: none; }

.modern-saas-theme .pw-toggle { color: var(--rd-ink-3); }
.modern-saas-theme .pw-toggle:hover { color: var(--rd-brand); }

/* The whitelabel no-logo fallback is white for the old red pane; on the light
   plate that was invisible. */
.modern-saas-theme .brand-fallback-name { color: var(--rd-ink); }

/* auth.css sizes the logo for a dark pane; on the light plate it can breathe. */
.modern-saas-theme .login-visual img { max-width: 240px; }


/* =========================================================================
   Sidebar counts + credits card (demo parity)
   ========================================================================= */
/* The active-item rule (.nav-item.active > .nav-link span) also matches this
   span and would paint it brand-ink on brand red, i.e. invisible. Out-specify it. */
.modern-saas-theme .sidebar .nav-item .nav-link span.nav-count,
.modern-saas-theme .sidebar .nav-item.active > .nav-link span.nav-count {
    color: #fff !important;
    font-weight: 700 !important;
}
.modern-saas-theme .sidebar .nav-link .nav-count {
    position: absolute;
    top: 50%;
    right: 12px;
    transform: translateY(-50%);
    background: var(--rd-brand);
    color: #fff;
    font-size: 10.5px;
    font-weight: 700;
    line-height: 1;
    padding: 3px 7px;
    border-radius: 9px;
}

.modern-saas-theme .sidebar .nav-credits-wrap { margin-top: 14px; }
.modern-saas-theme .sidebar .nav-credits {
    display: block;
    margin: 0 12px;
    padding: 12px 14px;
    background: var(--rd-bg);
    border: 1px solid var(--rd-line);
    border-radius: 11px;
    text-decoration: none;
}
.modern-saas-theme .sidebar .nav-credits:hover { border-color: #D4D8E0; text-decoration: none; }
.modern-saas-theme .sidebar .nav-credits .k {
    font-size: 10.5px; font-weight: 700; letter-spacing: .08em;
    text-transform: uppercase; color: var(--rd-ink-3);
}
.modern-saas-theme .sidebar .nav-credits .v {
    font-size: 22px; font-weight: 750; letter-spacing: -.02em; color: var(--rd-ink); line-height: 1.2;
}
.modern-saas-theme .sidebar .nav-credits .d { font-size: 11px; color: var(--rd-ink-3); }


/* ---- auth: rules that must out-specify modern-saas.css --------------------
   Each of these loses on SPECIFICITY rather than source order, so loading this
   file later is not enough - they are restated here at matching weight. */

/* modern-saas.css paints .small with the old gradient-start red (#FF4B2B), and
   every auth link is an <a class="small">. */
.modern-saas-theme .auth-body a,
.modern-saas-theme .auth-body a.small,
.modern-saas-theme .auth-body .small a { color: var(--rd-brand-ink); }
.modern-saas-theme .auth-body a:hover { color: var(--rd-brand); }

/* .modern-saas-theme .card:hover is (0,3,0) - :hover counts as a class - and beat
   .modern-saas-theme .auth-card (0,2,0), bringing the old red glow back on hover. */
.modern-saas-theme .auth-card:hover {
    box-shadow: 0 1px 2px rgba(16,24,40,.04), 0 12px 32px rgba(16,24,40,.08);
    transform: none;
}

/* modern-saas.css forces overflow:visible !important on .card, defeating
   auth.css's overflow:hidden, so the square corners of the logo plate poked out
   of the rounded card. */
.modern-saas-theme .auth-card { overflow: hidden !important; }

/* modern-saas.css pins every .form-control to height:auto !important, so the
   44px set on .form-control-user never applied. */
.modern-saas-theme .form-control-user {
    min-height: 44px !important;
    height: auto !important;
    padding: 10px 14px !important;
}

/* Alerts kept a blurred pastel-gradient look from the old identity. */
.modern-saas-theme.login-page .alert {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-radius: 9px;
    border: 0;
}
.modern-saas-theme.login-page .alert-danger  { background: #FDECEC; color: #9E1F1B; }
.modern-saas-theme.login-page .alert-success { background: var(--rd-green-soft); color: #0C6B53; }

/* sb-admin-2's .text-danger is #e74a3b, a different red from the brand. It is used
   for every page-heading icon and now for the Delete All Leads label, so align it. */
.modern-saas-theme .text-danger { color: var(--rd-brand) !important; }