/* ============================================================
   Crimson Theme - light, editorial-SaaS look for the membership
   system (white sidebar, crimson accent, lavender-grey canvas,
   navy hero surfaces, tracked uppercase labels).

   Layers OVER Bootstrap 5 + app.css + the layouts' inline CSS and
   overrides where needed. Loaded by partials/quorum_head.php when
   app_settings.active_theme = 'crimson'.

   Section 16 is the phone layer: on small screens the chrome follows
   iOS conventions (translucent 44pt nav bar with centred title, 49pt
   tab bar, inset grouped cards, bottom-sheet modals, system font).
   ============================================================ */

/* ── 1. Tokens ─────────────────────────────────────────────────────────── */
:root {
    --brand:        #c82637;
    --brand-dark:   #a81c2b;
    --brand-soft:   #fdf1f1;
    --brand-soft-2: #fff4f1;
    --navy:         #1f1629;
    --navy-2:       #2b2038;
    --ink:          #0f1317;
    --ink-2:        #2a2f36;
    --ink-3:        #444444;
    --muted:        #6a6780;
    --subtle:       #9ca2af;
    --canvas:       #f7f6fa;
    --canvas-2:     #f2f4f5;
    --card:         #ffffff;
    --hair:         #e6e9ef;
    --hair-2:       #f0f0f0;
    --green:        #12a05d;
    --green-soft:   #e6f6ee;
    --amber:        #d08600;
    --amber-soft:   #fff9e6;
    --amber-line:   #ffdf8a;
    --amber-fg:     #856404;
    --blue:         #2f6fed;
    --blue-soft:    #e9f0fe;

    /* Re-map app.css tokens so legacy code inherits the palette */
    --primary:        var(--brand);
    --primary-dark:   var(--brand-dark);
    --primary-light:  var(--brand-soft);
    --primary-2:      var(--brand-dark);
    --gradient:       linear-gradient(135deg, var(--brand), var(--brand-dark));
    --color-primary:  var(--brand) !important;
    --color-sidebar:  #ffffff !important;
    --color-accent:   var(--navy) !important;
    --sidebar-bg:     #ffffff;
    --sidebar-hover:  var(--canvas);
    --bg:             var(--canvas);
    --surface:        var(--card);
    --surface-2:      var(--canvas);
    --border:         var(--hair);
    --border-strong:  #d5d9e2;
    --text:           var(--ink);
    --text-muted:     var(--muted);
    --text-subtle:    var(--subtle);

    --success: var(--green); --success-bg: var(--green-soft); --success-fg: #0b6b3e;
    --danger:  var(--brand); --danger-bg:  var(--brand-soft); --danger-fg:  #8f1826;
    --warning: var(--amber); --warning-bg: var(--amber-soft); --warning-fg: var(--amber-fg);
    --info:    var(--blue);  --info-bg:    var(--blue-soft);  --info-fg:    #1d4ed8;

    --radius-sm: 8px;
    --radius:    14px;
    --radius-lg: 18px;

    --shadow-sm: 0 1px 2px rgba(15,19,23,.04);
    --shadow:    0 1px 2px rgba(15,19,23,.03), 0 8px 24px -16px rgba(15,19,23,.10);
    --shadow-md: 0 2px 4px rgba(15,19,23,.04), 0 14px 32px -16px rgba(15,19,23,.16);
    --shadow-lg: 0 4px 8px rgba(15,19,23,.05), 0 24px 56px -20px rgba(15,19,23,.22);
    --ring:      0 0 0 3px rgba(200,38,55,.18);

    --font-sans: "Manrope", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --font-mono: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;
    --tab-h:     49px;
}

/* ── 2. Base ───────────────────────────────────────────────────────────── */
body {
    font-family: var(--font-sans) !important;
    background: var(--canvas) !important;
    color: var(--ink);
    font-size: 14px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
a { color: var(--brand); }
a:hover { color: var(--brand-dark); }

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
    color: var(--ink);
    font-weight: 700;
    letter-spacing: -0.015em;
}
.fw-bold     { font-weight: 800 !important; }
.fw-semibold { font-weight: 700 !important; }
.text-muted  { color: var(--muted) !important; }
.text-secondary { color: var(--muted) !important; }
.text-dark   { color: var(--ink) !important; }
.text-primary{ color: var(--brand) !important; }
.text-success{ color: var(--green) !important; }
.text-danger { color: var(--brand) !important; }
.text-warning{ color: var(--amber) !important; }
.text-info   { color: var(--blue) !important; }
code, pre, .font-monospace, .q-mono { font-family: var(--font-mono) !important; }
::selection { background: var(--brand); color: #fff; }

/* Tracked uppercase label - the design's signature */
.eyebrow, .q-eyebrow, .aw-stat-l, .lp-panel-hdr, .cp-nav-section, .plat-nav-section,
.sidebar-section-label, .mob-drawer-title, .cp-card-header, .gs-section__hdr {
    font-family: var(--font-sans);
    font-size: .64rem !important;
    font-weight: 700 !important;
    letter-spacing: .12em !important;
    text-transform: uppercase !important;
    color: var(--muted) !important;
}

/* ── 3. Sidebar - white, red active pill ───────────────────────────────── */
.sidebar {
    background: #fff !important;
    border-right: 1px solid var(--hair);
    scrollbar-color: #d9dde5 transparent !important;
}
.sidebar::-webkit-scrollbar-thumb { background: #d9dde5 !important; }
.sidebar-brand {
    border-bottom: 1px solid var(--hair) !important;
    padding: 16px 18px !important;
    gap: 10px;
}
.sidebar-brand .brand-icon {
    width: 34px !important; height: 34px !important;
    border-radius: 9px !important;
    background: var(--brand) !important;
    color: #fff !important;
    font-size: .95rem;
    box-shadow: 0 6px 14px -6px rgba(200,38,55,.55);
}
.sidebar-brand .brand-name {
    color: var(--ink) !important;
    font-size: 1.08rem !important;
    font-weight: 800 !important;
    letter-spacing: -0.02em !important;
    line-height: 1.15;
}
.sidebar-brand .brand-subtitle {
    color: var(--muted) !important;
    font-size: .66rem !important;
    font-weight: 600;
    margin-top: 1px !important;
}
.sidebar-nav { padding: 8px 0 12px !important; }
.sidebar-section-label {
    padding: 16px 22px 6px !important;
}
.sidebar .sidebar-section-label:hover { color: var(--ink) !important; }
.sidebar .nav-link {
    color: var(--ink-3) !important;
    font-size: .845rem !important;
    font-weight: 600 !important;
    padding: 9px 12px !important;
    margin: 1px 12px !important;
    border-radius: 10px !important;
    border-left: none !important;
    transition: background .12s, color .12s;
    transform: none !important;
}
.sidebar .nav-link i {
    color: var(--muted) !important;
    width: 20px;
    font-size: .86rem !important;
    margin-right: 10px;
}
.sidebar .nav-link:hover {
    background: var(--canvas) !important;
    color: var(--ink) !important;
    transform: none !important;
}
.sidebar .nav-link:hover i { color: var(--ink) !important; }
.sidebar .nav-link.active {
    background: var(--brand-soft) !important;
    color: var(--brand) !important;
    border-left: none !important;
    padding-left: 12px !important;
    font-weight: 700 !important;
}
.sidebar .nav-link.active i { color: var(--brand) !important; }
.sidebar .nav-link.active::before { display: none !important; }
.sidebar .nav-link[style*="color:"] { color: var(--ink-3) !important; }
.sidebar .nav-link .badge {
    margin-left: auto;
    background: var(--brand) !important;
    color: #fff !important;
    font-size: .6rem !important;
    font-weight: 700 !important;
    padding: 2px 7px !important;
    border-radius: 999px !important;
}
.sidebar-user {
    border-top: 1px solid var(--hair) !important;
    padding: 14px 18px !important;
    background: #fff;
}
.sidebar-user .user-avatar {
    background: var(--navy) !important;
    color: #fff !important;
    font-weight: 700 !important;
    border-radius: 50% !important;
    border: 2px solid var(--hair);
}
.sidebar-user .user-name { color: var(--ink) !important; font-size: .82rem !important; font-weight: 700 !important; }
.sidebar-user .user-role { color: var(--muted) !important; font-size: .66rem !important; }
.sidebar-user .logout-btn { color: var(--subtle) !important; }
.sidebar-user .logout-btn:hover { color: var(--brand) !important; }
.sidebar-credit, .sidebar-credit a { color: var(--muted) !important; }
.sidebar-overlay { background: rgba(15,19,23,.35) !important; }

/* ── 4. Main content + top bar ─────────────────────────────────────────── */
.main-content { background: var(--canvas) !important; }
.top-navbar {
    background: rgba(255,255,255,.92) !important;
    border-bottom: 1px solid var(--hair) !important;
    box-shadow: none !important;
    height: 64px;
}
.top-navbar.is-stuck {
    background: rgba(255,255,255,.97) !important;
    border-bottom-color: var(--hair) !important;
    box-shadow: 0 8px 24px -18px rgba(15,19,23,.25) !important;
}
/* Page title becomes the tracked uppercase heading the design shows top-left */
@media (min-width: 992px) {
    .top-navbar .page-title {
        position: static !important;
        width: auto; height: auto; margin: 0; padding: 0;
        overflow: hidden; clip: auto; white-space: nowrap;
        text-overflow: ellipsis; max-width: 240px;
        font-size: .74rem !important;
        font-weight: 800 !important;
        letter-spacing: .14em;
        text-transform: uppercase;
        color: var(--ink) !important;
    }
    .global-search { width: min(440px, calc(100% - 600px)); }
}
.global-search__input {
    background: var(--canvas) !important;
    border: 1px solid var(--hair) !important;
    color: var(--ink) !important;
    border-radius: 999px !important;
}
.global-search__input:hover { background: #fff !important; border-color: var(--border-strong) !important; }
.global-search__input:focus {
    background: #fff !important;
    border-color: var(--brand) !important;
    box-shadow: var(--ring) !important;
}
.global-search__kbd { border-color: var(--hair) !important; color: var(--muted) !important; }
.global-search__dropdown { border-color: var(--hair) !important; border-radius: var(--radius) !important; box-shadow: var(--shadow-lg) !important; }
.gs-item:hover, .gs-item.is-active { background: var(--brand-soft) !important; color: var(--brand) !important; border-left-color: var(--brand) !important; }
.gs-footer { color: var(--brand) !important; background: var(--canvas) !important; }
.gs-footer:hover { background: var(--brand-soft) !important; color: var(--brand-dark) !important; }

.notification-bell {
    background: #fff !important;
    border: 1px solid var(--hair) !important;
    color: var(--ink-3) !important;
    width: 38px; height: 38px;
}
.notification-bell:hover, .notification-bell.has-unread { color: var(--brand) !important; background: var(--brand-soft) !important; border-color: transparent !important; }
.notification-bell .badge { background: var(--brand) !important; color: #fff !important; }
.user-dropdown-btn {
    background: #fff !important;
    border: 1px solid var(--hair) !important;
    color: var(--ink) !important;
}
.user-dropdown-btn:hover { background: var(--canvas) !important; border-color: var(--border-strong) !important; }
.user-dropdown-btn .avatar-circle { background: var(--navy) !important; color: #fff !important; box-shadow: none !important; }
.user-dropdown-btn .user-name { color: var(--ink) !important; font-weight: 600 !important; }
#sidebarToggle {
    border: 1px solid var(--hair) !important;
    border-radius: 10px !important;
    background: #fff !important;
    color: var(--ink) !important;
}
#global-back-btn {
    background: #fff !important;
    border: 1px solid var(--hair) !important;
    color: var(--ink-3) !important;
    border-radius: 999px !important;
    font-weight: 600;
}
#global-back-btn:hover { background: var(--canvas) !important; border-color: var(--border-strong) !important; }

/* Layout banners */
#suspensionBanner { background: var(--navy) !important; box-shadow: none !important; }
#suspensionBanner a { background: var(--brand) !important; color: #fff !important; border-radius: 8px !important; }
#expiredBanner { background: var(--navy) !important; box-shadow: none !important; }
#expiredBanner a { background: var(--brand) !important; color: #fff !important; border-radius: 8px !important; }
#avatarNudge { background: var(--brand-soft-2) !important; border-bottom-color: #f7d9d6 !important; color: var(--ink-2) !important; }
#avatarNudge img { border-color: #f0b8b8 !important; }
/* Inline indigo accent borders left over from the original palette */
[style*="border-left:4px solid #4f46e5"], [style*="border-left: 4px solid #4f46e5"],
[style*="border-left:3px solid #4f46e5"], [style*="border-left: 3px solid #4f46e5"] { border-left-color: var(--brand) !important; }
[style*="border-top:3px solid #4f46e5"], [style*="border-top: 3px solid #4f46e5"],
[style*="border-top:4px solid #4f46e5"], [style*="border-top: 4px solid #4f46e5"] { border-top-color: var(--brand) !important; }
[style*="border:1px solid #c7d2fe"], [style*="border: 1px solid #c7d2fe"] { border-color: #f2c6ca !important; }
[style*="background:#f0f4ff"], [style*="background: #f0f4ff"] { background: var(--brand-soft) !important; }

/* ── 5. Cards ──────────────────────────────────────────────────────────── */
.card {
    background: var(--card) !important;
    border: 1px solid var(--hair) !important;
    border-radius: var(--radius) !important;
    box-shadow: var(--shadow) !important;
}
.card.border-0 { border: 1px solid var(--hair) !important; }
.card-header {
    background: #fff !important;
    border-bottom: 1px solid var(--hair-2) !important;
    padding: 14px 20px !important;
    border-radius: var(--radius) var(--radius) 0 0 !important;
}
.card-header h5, .card-header h6, .card-header .h5, .card-header .h6 {
    font-size: .76rem !important;
    font-weight: 800 !important;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--ink) !important;
    margin: 0;
}
.card-header h6 i, .card-header .h6 i, .card-header h5 i { color: var(--brand) !important; }
.card-footer { background: var(--canvas) !important; border-top: 1px solid var(--hair-2) !important; }
.card-body { color: var(--ink-2); }
.card-hover:hover, .card.is-clickable:hover, a:hover > .card {
    box-shadow: var(--shadow-md) !important;
    border-color: #d5d9e2 !important;
}
.lp-panel {
    background: #fff !important;
    border: 1px solid var(--hair) !important;
    box-shadow: var(--shadow) !important;
    border-radius: var(--radius) !important;
}
.lp-panel-hdr { border-bottom: 1px solid var(--hair-2) !important; }
.lp-stat-n { color: var(--ink) !important; font-weight: 800; }
.lp-stat-item { background: var(--canvas) !important; border-radius: 10px !important; }
.lp-stat-item:hover { background: var(--brand-soft) !important; }
.lp-nav-link:hover { color: var(--brand) !important; background: var(--canvas) !important; }
.lp-nav-link i { color: var(--subtle) !important; }
.lp-follow-btn { border-color: var(--brand) !important; color: var(--brand) !important; }
.lp-follow-btn:hover, .lp-follow-btn.following { background: var(--brand) !important; color: #fff !important; }
.lp-ad-slot { background: var(--navy) !important; box-shadow: none !important; }
.aw-card {
    background: #fff !important;
    border: 1px solid var(--hair);
    border-radius: var(--radius) !important;
    box-shadow: var(--shadow) !important;
}
.aw-title { font-size: .76rem !important; font-weight: 800 !important; letter-spacing: .1em; text-transform: uppercase; color: var(--ink) !important; }
.aw-title i { color: var(--brand) !important; }
.aw-stat { background: var(--canvas) !important; border: 1px solid var(--hair); border-radius: 12px !important; padding: 16px 18px !important; }
.aw-stat-n { font-weight: 800 !important; letter-spacing: -0.02em; color: var(--ink) !important; }
.aw-stat-n[style*="4f46e5"] { color: var(--ink) !important; }
.aw-stat-n[style*="16a34a"] { color: var(--green) !important; }
.aw-stat-n[style*="d97706"] { color: var(--amber) !important; }
.aw-stat-sub { color: var(--muted) !important; }
.aw-bar-track { background: linear-gradient(180deg, #e04a5a, var(--brand)) !important; border-radius: 6px 6px 0 0 !important; }
.aw-plan-bar { background: var(--hair-2) !important; }
.aw-plan-bar > span { background: var(--brand) !important; }
.aw-plan-n { color: var(--brand) !important; }
[style*="linear-gradient(90deg,#6366f1"], [style*="linear-gradient(90deg, #6366f1"],
[style*="linear-gradient(180deg,#6366f1"], [style*="linear-gradient(180deg, #6366f1"] { background: var(--brand) !important; }

/* Dark hero surfaces (membership card, balance card, ad slot) */
.q-member-card,
.card[style*="linear-gradient(135deg,#1a1a2e"],
.card[style*="linear-gradient(135deg, #1a1a2e"],
.card[style*="linear-gradient(135deg,#1e293b"],
.card[style*="linear-gradient(135deg, #1e293b"] {
    background: radial-gradient(120% 140% at 100% 0%, rgba(200,38,55,.32) 0%, rgba(200,38,55,0) 45%), var(--navy) !important;
    border: 1px solid var(--navy) !important;
    color: #fff;
    border-radius: var(--radius-lg) !important;
}
.q-member-card .card-body { color: #fff; }
.q-member-card .badge { background: var(--brand) !important; color: #fff !important; }
.hero-dark {
    background: radial-gradient(120% 140% at 100% 0%, rgba(200,38,55,.32) 0%, rgba(200,38,55,0) 45%), var(--navy);
    color: #fff; border-radius: var(--radius-lg);
}
/* Membership card (member dashboard): everything on the dark surface must
   stay white - the generic .card-body / .mono-id colours would otherwise
   paint the labels and the ID in ink-on-navy. */
/* Any card painted with an inline brand gradient + white text (My Membership,
   member card, hero tiles) becomes the navy hero surface - the generic white
   .card background must not win over it. */
.card[style*="linear-gradient"][style*="color:#fff"], .card[style*="linear-gradient"][style*="color: #fff"] {
    background: radial-gradient(120% 140% at 100% 0%, rgba(200,38,55,.32) 0%, rgba(200,38,55,0) 45%), var(--navy) !important;
    border-color: var(--navy) !important; color: #fff !important; border-radius: var(--radius-lg) !important;
}
.card[style*="linear-gradient"][style*="color:#fff"] .card-body, .card[style*="linear-gradient"][style*="color: #fff"] .card-body,
.card[style*="linear-gradient"][style*="color:#fff"] h1, .card[style*="linear-gradient"][style*="color:#fff"] h2, .card[style*="linear-gradient"][style*="color:#fff"] h3,
.card[style*="linear-gradient"][style*="color:#fff"] h4, .card[style*="linear-gradient"][style*="color:#fff"] h5, .card[style*="linear-gradient"][style*="color:#fff"] h6,
.card[style*="linear-gradient"][style*="color: #fff"] h4, .card[style*="linear-gradient"][style*="color: #fff"] h6,
.card[style*="linear-gradient"][style*="color:#fff"] .text-muted, .card[style*="linear-gradient"][style*="color:#fff"] .font-monospace,
.card[style*="linear-gradient"][style*="color:#fff"] .small, .card[style*="linear-gradient"][style*="color:#fff"] .fw-bold { color: #fff !important; }
.card[style*="linear-gradient"][style*="color:#fff"] .badge, .card[style*="linear-gradient"][style*="color: #fff"] .badge {
    background: rgba(255,255,255,.16) !important; color: #fff !important; padding: 4px 10px !important; border: 1px solid rgba(255,255,255,.14);
}
.card[style*="linear-gradient"][style*="color:#fff"] .badge::before { display: none !important; }
.card[style*="linear-gradient"][style*="color:#fff"] hr { border-color: rgba(255,255,255,.18) !important; }
.card[style*="linear-gradient"][style*="color:#fff"] .btn-outline-light { background: rgba(255,255,255,.12) !important; border-color: rgba(255,255,255,.3) !important; color: #fff !important; }
/* Buttons that follow such a card were styled for a dark page - make them normal */
.card[style*="linear-gradient"][style*="color:#fff"] + .d-flex .btn-outline-light { background: #fff !important; border: 1px solid var(--hair) !important; color: var(--ink) !important; }
.q-member-card, .card[style*="#1a1a2e"], .card[style*="#1e293b"] { position: relative; overflow: hidden; box-shadow: 0 18px 40px -20px rgba(31,22,41,.55) !important; }
.q-member-card::after, .card[style*="#1a1a2e"]::after, .card[style*="#1e293b"]::after {
    content: ""; position: absolute; right: -70px; top: -70px; width: 220px; height: 220px; border-radius: 50%;
    border: 34px solid rgba(255,255,255,.045); pointer-events: none;
}
.q-member-card .card-body, .card[style*="#1a1a2e"] .card-body, .card[style*="#1e293b"] .card-body { color: #fff !important; position: relative; z-index: 1; padding: 22px 24px !important; }
.q-member-card .card-body [style*="opacity:0.55"], .q-member-card .card-body [style*="opacity:0.65"],
.card[style*="#1a1a2e"] .card-body [style*="opacity:0.55"], .card[style*="#1a1a2e"] .card-body [style*="opacity:0.65"],
.card[style*="#1e293b"] .card-body [style*="opacity:0.55"], .card[style*="#1e293b"] .card-body [style*="opacity:0.65"] {
    opacity: 1 !important; color: rgba(255,255,255,.58) !important; font-weight: 700;
}
.q-member-card .card-body div[style*="text-transform:uppercase"], .card[style*="#1a1a2e"] .card-body div[style*="text-transform:uppercase"],
.card[style*="#1e293b"] .card-body div[style*="text-transform:uppercase"] { font-size: .62rem !important; letter-spacing: .14em !important; }
.q-member-card .mono-id, .card[style*="#1a1a2e"] .mono-id, .card[style*="#1e293b"] .mono-id {
    color: #fff !important; font-size: clamp(1.1rem, 2.6vw + .4rem, 1.5rem); letter-spacing: .14em; font-weight: 700;
    text-shadow: 0 1px 0 rgba(0,0,0,.25);
}
.q-member-card .fw-bold, .card[style*="#1a1a2e"] .fw-bold, .card[style*="#1e293b"] .fw-bold,
.q-member-card .fw-medium, .card[style*="#1a1a2e"] .fw-medium, .card[style*="#1e293b"] .fw-medium { color: #fff !important; }
.q-member-card .card-body .badge.bg-success, .card[style*="#1a1a2e"] .card-body .badge.bg-success,
.card[style*="#1e293b"] .card-body .badge.bg-success { color: #5ee0a0 !important; background: rgba(18,160,93,.18) !important; padding: 4px 10px !important; }
.q-member-card .card-body .badge.bg-warning, .card[style*="#1a1a2e"] .card-body .badge.bg-warning,
.q-member-card .card-body .badge.bg-danger, .card[style*="#1a1a2e"] .card-body .badge.bg-danger,
.q-member-card .card-body .badge.bg-secondary, .card[style*="#1a1a2e"] .card-body .badge.bg-secondary { background: rgba(255,255,255,.14) !important; color: #fff !important; padding: 4px 10px !important; }
.card[style*="#1a1a2e"] .card-body [style*="rgba(255,255,255,0.12)"] { background: rgba(255,255,255,.14) !important; border: 1px solid rgba(255,255,255,.12); font-weight: 600; }
.card[style*="#1a1a2e"] .card-body [style*="border-top:1px solid rgba(255,255,255,0.12)"] { border-top-color: rgba(255,255,255,.14) !important; }

/* ── 6. KPI / stat tiles ───────────────────────────────────────────────── */
.stat-card { background: #fff !important; }
.stat-card .card-body { padding: 18px 20px !important; }
.stat-card .icon {
    width: 40px !important; height: 40px !important;
    border-radius: 10px !important;
    font-size: .95rem !important;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.stat-card .icon[style*="ede9fe"] { background: var(--brand-soft) !important; color: var(--brand) !important; }
.stat-card .fw-bold, .stat-card .fs-5, .stat-card .fs-4, .stat-card .stat-value {
    font-weight: 800 !important;
    color: var(--ink) !important;
    letter-spacing: -0.02em;
    font-size: 1.35rem;
}
.stat-card .text-muted, .stat-card .stat-label {
    font-size: .64rem !important;
    color: var(--muted) !important;
    text-transform: uppercase;
    letter-spacing: .1em;
    font-weight: 700;
}
.cp-stat, .plat-wrapper .stat-card { border: 1px solid var(--hair) !important; border-radius: 12px !important; box-shadow: var(--shadow) !important; }
.cp-stat-n, .plat-wrapper .stat-card .val { color: var(--ink) !important; font-weight: 800 !important; letter-spacing: -0.02em; }
.cp-stat-l, .plat-wrapper .stat-card .lbl { font-size: .64rem !important; text-transform: uppercase; letter-spacing: .1em; font-weight: 700; color: var(--muted) !important; }
.cp-stat-icon { color: var(--brand) !important; }

/* ── 7. Buttons ────────────────────────────────────────────────────────── */
.btn {
    border-radius: 10px !important;
    font-weight: 700 !important;
    font-size: .82rem !important;
    letter-spacing: .01em;
    padding: 8px 16px !important;
    box-shadow: none !important;
    transition: background .12s, border-color .12s, color .12s, transform .12s;
}
.btn-sm { padding: 6px 12px !important; font-size: .76rem !important; border-radius: 9px !important; }
.btn-xs { padding: 3px 9px !important; font-size: .7rem !important; border-radius: 7px !important; }
.btn-lg { padding: 12px 22px !important; font-size: .9rem !important; letter-spacing: .06em; text-transform: uppercase; border-radius: 12px !important; }
.btn:hover { transform: none; }
.btn:active { transform: scale(.985); }

.btn-primary, .btn-brand,
[style*="background:#4f46e5"].btn, [style*="background: #4f46e5"].btn {
    background: var(--brand) !important;
    border: 1px solid var(--brand) !important;
    color: #fff !important;
}
.btn-primary:hover, .btn-brand:hover,
[style*="background:#4f46e5"].btn:hover {
    background: var(--brand-dark) !important;
    border-color: var(--brand-dark) !important;
    box-shadow: 0 8px 18px -8px rgba(200,38,55,.55) !important;
}
.btn-dark { background: var(--navy) !important; border-color: var(--navy) !important; color: #fff !important; }
.btn-dark:hover { background: #120c19 !important; }
.btn-outline-primary, .btn-outline-brand {
    background: #fff !important;
    border: 1px solid var(--hair) !important;
    color: var(--ink) !important;
}
.btn-outline-primary:hover, .btn-outline-brand:hover {
    background: var(--brand-soft) !important;
    border-color: #f2c6ca !important;
    color: var(--brand) !important;
}
.btn-outline-secondary, .btn-outline-dark, .btn-outline-info, .btn-outline-light {
    background: #fff !important;
    border: 1px solid var(--hair) !important;
    color: var(--ink-2) !important;
}
.btn-outline-secondary:hover, .btn-outline-dark:hover, .btn-outline-info:hover, .btn-outline-light:hover {
    background: var(--canvas) !important;
    border-color: var(--border-strong) !important;
    color: var(--ink) !important;
}
.btn-outline-success { background: #fff !important; border: 1px solid var(--hair) !important; color: var(--green) !important; }
.btn-outline-success:hover { background: var(--green-soft) !important; border-color: #b9e6cf !important; }
.btn-outline-danger { background: #fff !important; border: 1px solid var(--hair) !important; color: var(--brand) !important; }
.btn-outline-danger:hover { background: var(--brand-soft) !important; border-color: #f2c6ca !important; }
.btn-outline-warning { background: #fff !important; border: 1px solid var(--hair) !important; color: var(--amber) !important; }
.btn-outline-warning:hover { background: var(--amber-soft) !important; border-color: var(--amber-line) !important; }
.btn-secondary, .btn-light, .btn-info {
    background: var(--canvas) !important;
    border: 1px solid var(--hair) !important;
    color: var(--ink) !important;
}
.btn-secondary:hover, .btn-light:hover, .btn-info:hover { background: #ebedf2 !important; }
.btn-success { background: var(--green) !important; border-color: var(--green) !important; color: #fff !important; }
.btn-success:hover { background: #0e8a4f !important; }
.btn-danger  { background: var(--brand) !important; border-color: var(--brand) !important; color: #fff !important; }
.btn-danger:hover { background: var(--brand-dark) !important; }
.btn-warning { background: var(--amber) !important; border-color: var(--amber) !important; color: #fff !important; }
.btn-warning:hover { background: #b87600 !important; color: #fff !important; }
.btn-link { color: var(--brand) !important; font-weight: 600 !important; }
.btn-primary::after, .btn-success::after, .btn-danger::after, .btn-warning::after { display: none; }
.btn-check:checked + .btn-outline-primary, .btn-check:checked + .btn-outline-secondary {
    background: var(--navy) !important; border-color: var(--navy) !important; color: #fff !important;
}
.btn-close { filter: none; opacity: .5; }

/* ── 8. Badges + status pills ──────────────────────────────────────────── */
.badge {
    font-weight: 700 !important;
    border-radius: 999px !important;
    padding: 3px 9px !important;
    font-size: .64rem !important;
    letter-spacing: .04em;
    text-transform: uppercase;
}
.badge.bg-primary,  .bg-primary  { background: var(--brand) !important; color: #fff !important; }
.badge.bg-dark,     .bg-dark     { background: var(--navy) !important; color: #fff !important; }
.badge.bg-secondary { background: var(--canvas-2) !important; color: var(--ink-3) !important; }
.badge.bg-light     { background: var(--canvas) !important; color: var(--ink-3) !important; border: 1px solid var(--hair); }
.bg-primary-subtle, .badge.bg-primary-subtle { background: var(--brand-soft) !important; color: var(--brand) !important; }
.bg-secondary-subtle { background: var(--canvas-2) !important; color: var(--ink-3) !important; }
.bg-info-subtle,    .badge.bg-info    { background: var(--blue-soft) !important;  color: var(--info-fg) !important; }
.bg-light, .table-light, thead.bg-light, thead.table-light { background: var(--canvas) !important; color: var(--ink) !important; }

/* Status badges → dot + coloured uppercase text (the design's "● ACTIVE") */
.badge.bg-success, .badge.bg-success-subtle, .badge-active,
.badge.bg-danger,  .badge.bg-danger-subtle,  .badge-expired,
.badge.bg-warning, .badge.bg-warning-subtle, .badge-pending {
    background: transparent !important;
    padding: 2px 4px !important;
    display: inline-flex; align-items: center; gap: 6px;
    font-size: .64rem !important;
    letter-spacing: .08em;
}
.badge.bg-success::before, .badge.bg-success-subtle::before, .badge-active::before,
.badge.bg-danger::before,  .badge.bg-danger-subtle::before,  .badge-expired::before,
.badge.bg-warning::before, .badge.bg-warning-subtle::before, .badge-pending::before {
    content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex-shrink: 0;
}
.badge.bg-success, .badge.bg-success-subtle, .badge-active { color: var(--green) !important; }
.badge.bg-danger,  .badge.bg-danger-subtle,  .badge-expired { color: var(--brand) !important; }
.badge.bg-warning, .badge.bg-warning-subtle, .badge-pending { color: var(--amber) !important; }
.bg-success-subtle:not(.badge) { background: var(--green-soft) !important; }
.bg-danger-subtle:not(.badge)  { background: var(--brand-soft) !important; }
.bg-warning-subtle:not(.badge) { background: var(--amber-soft) !important; }

/* Count badges must stay filled */
.notification-bell .badge, .sidebar .nav-link .badge, .mob-tab-badge, .wa-unread-badge,
#mobDrawer .badge, .badge.rounded-pill.bg-danger[id*="badge"], .badge[id$="-badge"] {
    background: var(--brand) !important; color: #fff !important; padding: 2px 6px !important;
}
.notification-bell .badge::before, .sidebar .nav-link .badge::before, #mobDrawer .badge::before,
.badge[id$="-badge"]::before { display: none !important; }

.q-pill { background: var(--canvas-2); color: var(--ink-3); border: 1px solid var(--hair); font-weight: 700; }
.q-pill-accent { background: var(--brand-soft); color: var(--brand); border-color: transparent; }
.q-pill-sage   { background: var(--green-soft); color: var(--success-fg); border-color: transparent; }
.q-pill-gold   { background: var(--amber-soft); color: var(--amber-fg); border-color: transparent; }
.q-pill-ink    { background: var(--navy); color: #fff; border-color: transparent; }
.q-statusdot.accent { background: var(--brand); }
.q-statusdot.sage   { background: var(--green); }
.q-statusdot.gold   { background: var(--amber); }
.q-brief { background: linear-gradient(135deg, var(--brand-soft), #fff 70%); border: 1px solid #f3d6d8; }
.q-brief .q-brief-eyebrow, .q-brief .q-brief-body em { color: var(--brand); }
.q-display { color: var(--ink); font-weight: 800; }

/* ── 9. Tables ─────────────────────────────────────────────────────────── */
.table {
    color: var(--ink-2) !important;
    font-size: .84rem;
    --bs-table-bg: transparent;
    --bs-table-hover-bg: var(--canvas);
    --bs-table-striped-bg: var(--canvas);
    --bs-table-border-color: var(--hair-2);
}
.table thead th {
    background: var(--canvas) !important;
    border-bottom: 1px solid var(--hair) !important;
    border-top: none !important;
    color: var(--muted) !important;
    font-size: .62rem !important;
    font-weight: 700 !important;
    text-transform: uppercase;
    letter-spacing: .12em;
    padding: 12px 16px !important;
}
.table tbody td {
    border-bottom: 1px solid var(--hair-2) !important;
    border-top: none !important;
    padding: 14px 16px !important;
    vertical-align: middle;
}
.table tbody tr:last-child td { border-bottom: 0 !important; }
.table-hover tbody tr:hover td { background: var(--canvas) !important; }
.table-active, .table-active > th, .table-active > td { background: var(--brand-soft) !important; }
.table code { background: var(--canvas-2); color: var(--ink); padding: 2px 6px; border-radius: 5px; font-size: .78rem; }
.table .fw-semibold, .table .fw-bold, .table strong { color: var(--ink); }
.card > .table-responsive, .card-body > .table-responsive { border-radius: 0 0 var(--radius) var(--radius); }

/* ── 10. Forms ─────────────────────────────────────────────────────────── */
.form-control, .form-select {
    background: #fff !important;
    border: 1px solid var(--hair) !important;
    border-radius: 10px !important;
    color: var(--ink) !important;
    padding: 9px 13px !important;
    min-height: 42px;
    font-size: .9rem !important;
    transition: border-color .12s, box-shadow .12s;
}
.form-control-sm, .form-select-sm { min-height: 36px; padding: 6px 11px !important; font-size: .82rem !important; }
textarea.form-control { min-height: 96px; }
.form-control:focus, .form-select:focus {
    border-color: var(--brand) !important;
    box-shadow: var(--ring) !important;
    outline: none !important;
}
.form-control::placeholder { color: var(--subtle); }
.form-control.is-invalid, .was-validated .form-control:invalid { border-color: var(--brand) !important; }
.form-label {
    font-size: .64rem !important;
    font-weight: 700 !important;
    color: var(--ink-2) !important;
    text-transform: uppercase;
    letter-spacing: .12em;
    margin-bottom: 6px !important;
}
.form-label a { text-transform: none; letter-spacing: 0; }
.form-text { color: var(--muted) !important; font-size: .74rem !important; }
.input-group-text {
    background: #fff !important;
    border: 1px solid var(--hair) !important;
    color: var(--subtle) !important;
    border-radius: 10px !important;
}
.input-group > .form-control:not(:first-child), .input-group > .form-select:not(:first-child) { border-top-left-radius: 0 !important; border-bottom-left-radius: 0 !important; }
.input-group > .form-control:not(:last-child), .input-group > .form-select:not(:last-child) { border-top-right-radius: 0 !important; border-bottom-right-radius: 0 !important; }
.input-group > .input-group-text:first-child { border-top-right-radius: 0 !important; border-bottom-right-radius: 0 !important; }
.input-group > .input-group-text:last-child, .input-group > .btn:last-child { border-top-left-radius: 0 !important; border-bottom-left-radius: 0 !important; }
.form-check-input { border-color: #cfd4dd; width: 1.05em; height: 1.05em; border-radius: 5px; }
.form-check-input:checked { background-color: var(--brand); border-color: var(--brand); }
.form-check-input:focus { box-shadow: var(--ring); border-color: var(--brand); }
.form-switch .form-check-input { width: 2.2em; height: 1.25em; border-radius: 999px; }
.form-switch .form-check-input:checked { background-color: var(--green); border-color: var(--green); }
.form-range::-webkit-slider-thumb { background: var(--brand); }

/* ── 11. Tabs / nav pills → segmented control ──────────────────────────── */
.nav-pills { gap: 4px; }
.nav-pills .nav-link {
    color: var(--ink-3) !important;
    font-weight: 700;
    font-size: .8rem;
    border-radius: 999px !important;
    padding: 7px 16px;
}
.nav-pills .nav-link:hover { background: var(--canvas) !important; color: var(--ink) !important; }
.nav-pills .nav-link.active { background: var(--navy) !important; color: #fff !important; }
.nav-tabs { border-bottom: 1px solid var(--hair) !important; gap: 4px; }
.nav-tabs .nav-link {
    color: var(--muted) !important;
    font-weight: 700;
    font-size: .8rem;
    border: none !important;
    border-bottom: 2px solid transparent !important;
    padding: 10px 14px;
    background: transparent !important;
}
.nav-tabs .nav-link:hover { color: var(--ink) !important; }
.nav-tabs .nav-link.active { color: var(--brand) !important; border-bottom-color: var(--brand) !important; }
.list-group-item { border-color: var(--hair-2) !important; color: var(--ink-2); padding: 12px 16px; }
.list-group-item.active { background: var(--brand-soft) !important; color: var(--brand) !important; border-color: var(--hair-2) !important; }
.list-group-item-action:hover { background: var(--canvas) !important; }
.progress { background: var(--hair-2) !important; border-radius: 999px; }
.progress-bar { background: var(--brand); }
.progress-bar.bg-success { background: var(--green) !important; }
.progress-bar.bg-warning { background: var(--amber) !important; }
.accordion-button:not(.collapsed) { background: var(--brand-soft) !important; color: var(--brand) !important; box-shadow: none !important; }
.accordion-button:focus { box-shadow: var(--ring) !important; border-color: var(--brand) !important; }
.accordion-item { border-color: var(--hair) !important; }
.breadcrumb-item a { color: var(--muted); font-weight: 600; }
.breadcrumb-item.active { color: var(--ink); font-weight: 700; }

/* ── 12. Alerts + toasts ───────────────────────────────────────────────── */
.alert {
    border-radius: 12px !important;
    border: 1px solid var(--hair) !important;
    background: #fff !important;
    color: var(--ink-2) !important;
    box-shadow: none !important;
}
.alert-primary, .alert-info { background: var(--blue-soft) !important; color: var(--info-fg) !important; border-color: #cfdcfb !important; }
.alert-success { background: var(--green-soft) !important; color: var(--success-fg) !important; border-color: #bfe6d1 !important; }
.alert-warning { background: var(--amber-soft) !important; color: var(--amber-fg) !important; border-color: var(--amber-line) !important; }
.alert-danger  { background: var(--brand-soft) !important; color: var(--danger-fg) !important; border-color: #f3c9cd !important; }
.alert-secondary, .alert-light { background: var(--canvas) !important; color: var(--ink-2) !important; }
.alert .alert-link { color: inherit; font-weight: 700; }
/* Cron watchdog + other orange inline cards → crimson-soft */
.alert[style*="fff7ed"] { background: var(--brand-soft) !important; color: #7a1a24 !important; border-left-color: var(--brand) !important; }
.alert[style*="fff7ed"] i[style*="ea580c"] { color: var(--brand) !important; }
.alert[style*="fff7ed"] .btn[style*="ea580c"] { background: var(--brand) !important; font-size: .66rem !important; letter-spacing: .1em; text-transform: uppercase; }
.app-toast { border-color: var(--hair) !important; border-radius: 12px !important; box-shadow: var(--shadow-lg) !important; }
.app-toast.t-success { border-left-color: var(--green) !important; }
.app-toast.t-success .at-ic { color: var(--green) !important; }
.app-toast.t-danger  { border-left-color: var(--brand) !important; }
.app-toast.t-danger  .at-ic { color: var(--brand) !important; }
.app-toast.t-warning { border-left-color: var(--amber) !important; }
.app-toast.t-warning .at-ic { color: var(--amber) !important; }
.app-toast.t-info    { border-left-color: var(--blue) !important; }
.app-toast.t-info    .at-ic { color: var(--blue) !important; }

/* ── 13. Modals + dropdowns + pagination ───────────────────────────────── */
.modal-content {
    background: #fff !important;
    border: 1px solid var(--hair) !important;
    border-radius: var(--radius-lg) !important;
    box-shadow: var(--shadow-lg) !important;
}
.modal-header { border-bottom: 1px solid var(--hair-2) !important; padding: 18px 22px !important; }
.modal-footer { border-top: 1px solid var(--hair-2) !important; padding: 14px 22px !important; background: var(--canvas); border-radius: 0 0 var(--radius-lg) var(--radius-lg); }
.modal-title { font-weight: 800; font-size: 1rem; letter-spacing: -0.01em; }
.modal-backdrop { background: var(--navy) !important; }
.modal-backdrop.show { opacity: .55 !important; }
.dropdown-menu {
    background: #fff !important;
    border: 1px solid var(--hair) !important;
    border-radius: 12px !important;
    box-shadow: var(--shadow-lg) !important;
    padding: 6px !important;
}
.dropdown-item {
    border-radius: 8px !important;
    color: var(--ink-2) !important;
    font-size: .84rem !important;
    font-weight: 600;
    padding: 8px 10px !important;
}
.dropdown-item:hover, .dropdown-item:focus { background: var(--canvas) !important; color: var(--ink) !important; }
.dropdown-item.active { background: var(--brand-soft) !important; color: var(--brand) !important; }
.dropdown-divider { border-color: var(--hair-2) !important; }
.dropdown-item.text-danger { color: var(--brand) !important; }
.dropdown-item.text-danger:hover { background: var(--brand-soft) !important; }
.dropdown-header { font-size: .62rem !important; letter-spacing: .12em; text-transform: uppercase; font-weight: 700; color: var(--muted) !important; }
.page-link {
    border-color: var(--hair) !important;
    color: var(--ink-2) !important;
    border-radius: 8px !important;
    margin: 0 2px;
    font-size: .78rem;
    font-weight: 700;
    min-width: 32px; text-align: center;
}
.page-link:hover { background: var(--canvas) !important; color: var(--ink) !important; }
.page-item.active .page-link { background: var(--navy) !important; border-color: var(--navy) !important; color: #fff !important; }
.page-item.disabled .page-link { color: var(--subtle) !important; background: #fff !important; }
.tooltip-inner { background: var(--navy); border-radius: 8px; font-weight: 600; }
.popover { border-color: var(--hair); border-radius: 12px; box-shadow: var(--shadow-lg); }

/* ── 14. Page chrome, headers, misc ────────────────────────────────────── */
.page-content { padding: 28px 32px !important; }
.page-header h4, .page-wrap > .d-flex h4, .page-wrap > .d-flex .h4, .dashboard-title {
    font-size: 1.45rem !important;
    font-weight: 800 !important;
    letter-spacing: -0.025em !important;
    line-height: 1.15;
    color: var(--ink) !important;
}
.page-header h4 i, .page-wrap > .d-flex h4 i { color: var(--brand) !important; font-size: .9em; }
.page-header p, .page-wrap > .d-flex p { color: var(--muted) !important; }
.section-head__title { font-weight: 800; }
.section-head__icon-chip { background: var(--brand-soft) !important; color: var(--brand) !important; }
.ui-empty .ui-empty-icon, .ui-empty-icon { background: var(--canvas) !important; color: var(--subtle) !important; }
.ui-empty h6 { color: var(--ink) !important; }
.qa-tile { background: var(--canvas) !important; border: 1px solid var(--hair); border-radius: 12px !important; }
.qa-tile:hover { background: var(--brand-soft) !important; border-color: #f2c6ca; box-shadow: none !important; }
.qa-tile i { color: var(--brand) !important; }
.tile-hover:hover { background: var(--canvas) !important; border-color: var(--border-strong) !important; }
.mono-id { color: var(--ink); }
[style*="background:#eef2ff"], [style*="background: #eef2ff"],
[style*="background:#ede9fe"], [style*="background: #ede9fe"],
[style*="background:#f5f3ff"], [style*="background: #f5f3ff"] { background: var(--brand-soft) !important; }
[style*="color:#7c3aed"], [style*="color: #7c3aed"] { color: var(--brand) !important; }
[style*="background:linear-gradient(135deg,#4f46e5"], [style*="background:linear-gradient(135deg, #4f46e5"],
[style*="background:linear-gradient(135deg,#818cf8"], [style*="background:linear-gradient(135deg, #818cf8"] {
    background: var(--navy) !important;
}
.avatar.av-initials, .avatar-circle .avatar-initials { font-weight: 700; }
hr { border-color: var(--hair); opacity: 1; }
::-webkit-scrollbar-thumb { background: #d5d9e2 !important; border-radius: 999px; }
::-webkit-scrollbar-thumb:hover { background: var(--subtle) !important; }
.fc .fc-button-primary { background: var(--navy) !important; border-color: var(--navy) !important; border-radius: 8px !important; font-weight: 700; }
.fc .fc-button-active { background: var(--brand) !important; border-color: var(--brand) !important; }
.fc .fc-daygrid-event { background: var(--brand); border-color: var(--brand); border-radius: 6px !important; }
.fc .fc-day-today { background: var(--brand-soft) !important; }
.skeleton, .ui-skel { background: linear-gradient(90deg, var(--hair-2) 0%, #e7e9ee 40%, var(--hair-2) 80%); }

/* ── 15. Messages (chat) ───────────────────────────────────────────────── */
.wa-shell { border: 1px solid var(--hair); border-radius: var(--radius); box-shadow: var(--shadow); background: #fff; }
.wa-left { border-right: 1px solid var(--hair) !important; background: #fff; }
.wa-left-hdr { border-bottom: 1px solid var(--hair-2) !important; }
.wa-left-hdr h6 { font-size: .72rem !important; letter-spacing: .12em; text-transform: uppercase; font-weight: 800; color: var(--ink) !important; }
.wa-new-btn { background: var(--brand) !important; color: #fff !important; border-color: var(--brand) !important; border-radius: 10px !important; }
.wa-new-btn:hover { background: var(--brand-dark) !important; }
.wa-search-wrap { border-bottom: 1px solid var(--hair-2) !important; }
#waSearch { background-color: var(--canvas) !important; border: 1px solid var(--hair) !important; border-radius: 10px !important; color: var(--ink) !important; }
#waSearch:focus { border-color: var(--brand) !important; background-color: #fff !important; box-shadow: var(--ring); }
.wa-conv-item { border-bottom: 1px solid var(--hair-2) !important; border-left: 3px solid transparent; }
.wa-conv-item:hover { background: var(--canvas) !important; }
.wa-conv-item.active { background: var(--brand-soft) !important; border-left-color: var(--brand); }
.wa-conv-item.unread { background: #fff !important; }
.wa-conv-item.unread:hover { background: var(--canvas) !important; }
.wa-conv-item.unread .wa-conv-name, .wa-conv-item.active .wa-conv-name { color: var(--ink) !important; font-weight: 800; }
.wa-conv-item.unread .wa-conv-prev { color: var(--brand) !important; font-weight: 700; }
.wa-conv-item.unread .wa-conv-time, .wa-conv-item.active .wa-conv-time { color: var(--brand) !important; font-weight: 700; }
.wa-conv-avatar, .t-avatar, .av-mini { background: var(--navy) !important; }
.wa-online-dot, .t-pring { background: #cfd4dd; }
.wa-online-dot.online, .t-pring.online, .wa-online-dot[style*="22c55e"], .t-pring[style*="22c55e"] { background: var(--green) !important; }
.wa-conv-name { color: var(--ink) !important; font-weight: 700; }
.wa-conv-prev, .wa-conv-time { color: var(--muted) !important; }
.wa-unread-badge { background: var(--green) !important; }
.wa-thread-hdr { border-bottom: 1px solid var(--hair-2) !important; }
.t-name { color: var(--ink) !important; font-weight: 800; }
.t-status { color: var(--green) !important; font-size: .62rem !important; text-transform: uppercase; letter-spacing: .1em; font-weight: 700; }
.t-hbtn { background: #fff !important; border-color: var(--hair) !important; color: var(--ink-3) !important; }
.t-hbtn:hover { background: var(--brand-soft) !important; color: var(--brand) !important; border-color: transparent !important; }
.wa-msgs { background: var(--canvas) !important; padding: 16px 14px !important; gap: 6px !important; }
.bubble { box-shadow: none !important; border-radius: 16px; }
.bubble.mine { background: var(--brand) !important; color: #fff !important; border-bottom-right-radius: 4px; }
.bubble.theirs { background: var(--canvas-2) !important; color: var(--ink) !important; border: none !important; border-bottom-left-radius: 4px; }
.bubble.theirs .bmeta { color: var(--subtle) !important; }
.bubble.mine .bmeta { color: rgba(255,255,255,.75) !important; }
.tick.read { color: #fff !important; }
.date-sep span {
    background: #fff !important; border: 1px solid var(--hair) !important; box-shadow: none !important;
    font-size: .6rem !important; letter-spacing: .12em; text-transform: uppercase; font-weight: 700; color: var(--muted) !important;
}
.typing-dots { background: var(--canvas-2) !important; border: none !important; }
.wa-input { background: #fff !important; border-top: 1px solid var(--hair-2) !important; padding: 10px 12px !important; }
.input-wrap { background: var(--canvas) !important; border: 1px solid var(--hair) !important; border-radius: 14px !important; }
.input-wrap:focus-within { border-color: var(--brand) !important; box-shadow: var(--ring) !important; background: #fff !important; }
.wa-attach { background: #fff !important; border: 1px solid var(--hair) !important; color: var(--ink) !important; border-radius: 12px !important; }
.wa-attach:hover, .wa-cam:hover, .wa-mic:hover, .wa-emoji:hover { background: var(--brand-soft) !important; color: var(--brand) !important; }
.wa-send-btn, .wa-send-btn:disabled, .wa-send-btn:hover { background: var(--brand) !important; color: #fff !important; border-radius: 12px !important; }
.wa-send-btn:hover { background: var(--brand-dark) !important; }
.wa-empty-icon { background: var(--brand-soft) !important; color: var(--brand) !important; }
.blocked-bar { border-top: 1px solid var(--hair-2) !important; color: var(--muted) !important; }

/* ── 16. Corporate portal + platform admin layouts ─────────────────────── */
:root { --cp-primary: var(--brand); --cp-accent: var(--brand); --cp-sidebar: #ffffff; --plat-primary: var(--brand); --plat-sidebar: #ffffff; }
.cp-sidebar, .plat-sidebar { background: #fff !important; border-right: 1px solid var(--hair); }
.cp-brand, .plat-brand { border-bottom: 1px solid var(--hair) !important; }
.cp-brand-name, .plat-brand .title { color: var(--ink) !important; font-weight: 800 !important; letter-spacing: -0.02em; }
.cp-brand-sub, .plat-brand .sub { color: var(--muted) !important; font-size: .64rem !important; text-transform: uppercase; letter-spacing: .12em; font-weight: 700; }
.cp-nav-section, .plat-nav-section { color: var(--muted) !important; padding: 16px 20px 6px !important; }
.cp-nav-link, .plat-nav a {
    color: var(--ink-3) !important; font-weight: 600 !important;
    border-radius: 10px !important; margin: 1px 12px !important; padding: 9px 12px !important;
    border-left: none !important;
}
.cp-nav-link i, .plat-nav a i { color: var(--muted) !important; }
.cp-nav-link:hover, .plat-nav a:hover { background: var(--canvas) !important; color: var(--ink) !important; }
.cp-nav-link.active, .plat-nav a.active { background: var(--brand-soft) !important; color: var(--brand) !important; padding-left: 12px !important; }
.cp-nav-link.active i, .plat-nav a.active i { color: var(--brand) !important; }
.cp-nav-link[style*="f87171"] { color: var(--brand) !important; }
.cp-user-footer, .plat-footer { border-top: 1px solid var(--hair) !important; }
.cp-user-av, .plat-footer .avatar { background: var(--navy) !important; }
.cp-user-name, .plat-footer .name { color: var(--ink) !important; font-weight: 700; }
.cp-user-role, .plat-footer .role { color: var(--muted) !important; }
.cp-logout, .plat-footer .logout { color: var(--subtle) !important; }
.cp-main, .plat-main { background: var(--canvas); }
.cp-topbar, .plat-topbar { background: rgba(255,255,255,.92) !important; border-bottom: 1px solid var(--hair) !important; box-shadow: none !important; }
.cp-topbar .page-title, .plat-topbar h5 { font-size: .74rem !important; font-weight: 800 !important; letter-spacing: .14em; text-transform: uppercase; color: var(--ink) !important; }
.cp-badge-portal, .plat-badge { background: var(--brand-soft) !important; color: var(--brand) !important; font-size: .62rem !important; letter-spacing: .1em; text-transform: uppercase; font-weight: 800; }
.cp-hamburger { background: #fff !important; border: 1px solid var(--hair) !important; border-radius: 10px !important; }
.cp-card { border: 1px solid var(--hair); box-shadow: var(--shadow) !important; border-radius: var(--radius) !important; }
.cp-card-header { border-bottom: 1px solid var(--hair-2) !important; color: var(--ink) !important; }
.plat-table thead th { background: var(--canvas) !important; color: var(--muted) !important; font-size: .62rem !important; letter-spacing: .12em; text-transform: uppercase; border-bottom: 1px solid var(--hair) !important; }
.plat-brand i[style*="a78bfa"] { color: var(--brand) !important; }
.plat-nav a .badge[style*="f59e0b"] { background: var(--brand) !important; color: #fff !important; font-size: .6rem !important; }
.plat-topbar { padding: 0 24px !important; height: 64px; }
.plat-body { padding: 28px 32px; }
.plat-wrapper .card, .plat-wrapper .stat-card { border-radius: var(--radius) !important; }
.plat-wrapper .stat-card { padding: 18px 20px !important; background: #fff !important; }
.plat-wrapper .stat-card .val { font-size: 1.5rem !important; }
.plat-wrapper .table thead th, .plat-table thead th { border-bottom: 1px solid var(--hair) !important; }
.plat-wrapper .badge-trial, .plat-wrapper .badge-active, .plat-wrapper .badge-suspended, .plat-wrapper .badge-cancelled { border-radius: 999px; padding: 3px 9px !important; font-size: .64rem !important; text-transform: uppercase; letter-spacing: .06em; }
.badge-trial { background: var(--amber-soft) !important; color: var(--amber-fg) !important; }
.badge-suspended { background: var(--brand-soft) !important; color: var(--brand) !important; }
.badge-cancelled { background: var(--canvas-2) !important; color: var(--ink-3) !important; }

/* ── 17. Public layout + auth layout ───────────────────────────────────── */
body > nav.navbar { background: #fff !important; border-bottom: 1px solid var(--hair); }
body > nav.navbar .navbar-brand { color: var(--ink) !important; font-weight: 800; letter-spacing: -0.02em; }
body > nav.navbar .navbar-brand i { color: var(--brand) !important; }
body > nav.navbar .nav-link { color: var(--ink-3) !important; font-weight: 600; }
body > nav.navbar .nav-link:hover { color: var(--brand) !important; }
body > nav.navbar .btn-outline-light { border-color: var(--hair) !important; color: var(--ink) !important; background: #fff !important; }
body > nav.navbar .navbar-toggler { border-color: var(--hair); }
body > nav.navbar .navbar-toggler-icon { filter: invert(.4); }
body > footer { background: var(--navy) !important; color: rgba(255,255,255,.6) !important; }
body > footer a { color: rgba(255,255,255,.75) !important; }

.auth-body { background: var(--canvas) !important; }
.auth-logo .logo-circle { background: var(--brand) !important; border-radius: 12px !important; width: 44px !important; height: 44px !important; font-size: 20px !important; box-shadow: 0 10px 22px -10px rgba(200,38,55,.6); }
.auth-logo h1 { color: var(--ink) !important; font-size: 1.15rem !important; font-weight: 800 !important; letter-spacing: -0.02em; }
.auth-logo p { color: var(--muted) !important; }
.auth-back-home a { background: #fff !important; border: 1px solid var(--hair); color: var(--ink-3) !important; }
.auth-card { background: transparent !important; box-shadow: none !important; overflow: visible !important; }
.auth-card-header { background: transparent !important; color: var(--ink) !important; text-align: center; padding: 6px 0 22px !important; }
.auth-card-header h2 { font-size: 1.6rem !important; font-weight: 800 !important; letter-spacing: -0.03em; color: var(--ink) !important; }
.auth-card-header h2 i { display: none; }
.auth-card-header p { color: var(--muted) !important; opacity: 1 !important; font-size: .88rem !important; margin-top: 6px !important; }
.auth-card-body { background: #fff !important; border: 1px solid var(--hair); border-radius: var(--radius-lg) !important; box-shadow: var(--shadow-md) !important; padding: 32px !important; }
.auth-card > .alert { margin: 0 0 14px !important; }
.auth-card .btn-primary { text-transform: uppercase; letter-spacing: .12em; padding: 13px 20px !important; font-size: .8rem !important; border-radius: 12px !important; }
.auth-card .input-group-text.bg-light { background: #fff !important; }
.auth-footer { background: transparent !important; border: none !important; color: var(--muted) !important; padding: 20px 0 0 !important; }
.auth-footer a { color: var(--brand) !important; font-weight: 700 !important; }
.auth-footer > div { border-top-color: var(--hair) !important; }
.page-footer { color: var(--subtle) !important; font-size: .62rem !important; letter-spacing: .12em; text-transform: uppercase; font-weight: 700; }
.page-footer a { color: var(--muted) !important; }

/* ── 18. Mobile tab bar + drawers (all sizes < 992px) ──────────────────── */
.mob-tab-bar {
    background: rgba(249,249,251,.92) !important;
    -webkit-backdrop-filter: blur(20px) saturate(180%);
            backdrop-filter: blur(20px) saturate(180%);
    border-top: 0.5px solid rgba(0,0,0,.14) !important;
    box-shadow: none !important;
}
.mob-tab-item { color: var(--subtle) !important; font-weight: 500 !important; }
.mob-tab-item.active { color: var(--brand) !important; }
.mob-tab-item.active::before { display: none !important; }
.mob-tab-badge { background: var(--brand) !important; }
.mob-drawer { background: var(--canvas) !important; }
.mob-drawer-handle { background: rgba(60,60,67,.3) !important; width: 36px; height: 5px; border-radius: 3px; }
#mobDrawer .mob-drawer-item, #mobDrawer a.nav-link, #mobDrawer .mob-drawer-item[style*="color:"] { color: var(--ink) !important; font-weight: 600 !important; }
#mobDrawer .mob-drawer-item:hover, #mobDrawer .mob-drawer-item:active,
#mobDrawer a.nav-link:hover, #mobDrawer a.nav-link:active { background: #fff !important; color: var(--brand) !important; }
#mobDrawer .mob-drawer-item.active, #mobDrawer a.nav-link.active,
#mobDrawer .mob-drawer-item[style*="color:"].active { background: var(--brand-soft) !important; color: var(--brand) !important; }
#mobDrawer .mob-drawer-item i, #mobDrawer a.nav-link i {
    background: #fff !important; color: var(--ink-3) !important;
    border: 1px solid var(--hair); border-radius: 8px !important; width: 30px !important; height: 30px !important;
}
#mobDrawer .mob-drawer-item.active i, #mobDrawer .mob-drawer-item:hover i,
#mobDrawer a.nav-link.active i, #mobDrawer a.nav-link:hover i { background: var(--brand) !important; color: #fff !important; border-color: var(--brand); }
#mobDrawer .mob-drawer-item .badge, #mobDrawer a.nav-link .badge { background: var(--brand) !important; }
#mobDrawer .mob-drawer-title { color: var(--muted) !important; }
#mobDrawer .mob-drawer-item[style*="dc2626"] { color: var(--brand) !important; }
#mobDrawer .mob-drawer-item[style*="dc2626"] i { background: var(--brand-soft) !important; color: var(--brand) !important; border-color: transparent; }
.mob-drawer-backdrop { background: rgba(31,22,41,.45) !important; }

/* ── 19. iPhone layer - phones and small tablets ───────────────────────── */
@media (max-width: 767.98px) {
    :root { --radius: 12px; --radius-lg: 16px; }
    body, .btn, .form-control, .form-select, .modal, .dropdown-menu, input, textarea, select, button {
        font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", "Manrope", "Inter", Roboto, sans-serif !important;
    }
    * { -webkit-tap-highlight-color: transparent; }
    body { font-size: 15px !important; background: var(--canvas) !important; }
    h1, h2, h3, h4, h5, h6 { letter-spacing: -0.02em; }
    .text-muted { color: rgba(60,60,67,.6) !important; }

    /* Navigation bar: 44pt, translucent, centred title, no borders on controls */
    .top-navbar {
        background: rgba(255,255,255,.82) !important;
        -webkit-backdrop-filter: blur(20px) saturate(180%);
                backdrop-filter: blur(20px) saturate(180%);
        border-bottom: 0.5px solid rgba(0,0,0,.14) !important;
        min-height: calc(44px + env(safe-area-inset-top, 0px));
        height: auto !important;
        padding: env(safe-area-inset-top, 0px) 8px 6px !important;
        row-gap: 0;
    }
    .top-navbar .page-title {
        position: absolute !important;
        left: 50%; top: calc(env(safe-area-inset-top, 0px) + 22px);
        transform: translate(-50%, -50%);
        width: 50%; height: auto; margin: 0; padding: 0;
        overflow: hidden; clip: auto; white-space: nowrap; text-overflow: ellipsis;
        text-align: center;
        font-size: 17px !important; font-weight: 600 !important; letter-spacing: -0.01em;
        color: var(--ink) !important; pointer-events: none;
    }
    #sidebarToggle {
        border: none !important; background: transparent !important;
        width: 40px; height: 44px; padding: 0 !important; margin: 0 !important;
        display: inline-flex; align-items: center; justify-content: center;
        color: var(--brand) !important; font-size: 1.15rem;
    }
    #sidebarToggle i { color: var(--brand) !important; }
    #global-back-btn {
        background: transparent !important; border: none !important;
        color: var(--brand) !important; font-size: 17px !important; font-weight: 500;
        padding: 0 6px !important; margin: 0 !important; height: 44px;
    }
    #global-back-btn i { color: var(--brand) !important; opacity: 1 !important; font-size: 1rem !important; margin-right: 4px !important; }
    #global-back-btn + #sidebarToggle, .top-navbar #global-back-btn[style*="display: inline"] ~ #sidebarToggle { display: none !important; }
    .top-navbar .navbar-actions { height: 44px; gap: 4px; }
    .notification-bell { width: 40px; height: 40px; border: none !important; background: transparent !important; color: var(--brand) !important; font-size: 1.15rem; }
    .notification-bell i { font-size: 1.15rem; }
    .notification-bell .badge { top: 4px !important; right: 4px !important; }
    .user-dropdown-btn { border: none !important; background: transparent !important; padding: 0 !important; height: 40px; width: 40px; justify-content: center; }
    .user-dropdown-btn .avatar-circle { width: 32px !important; height: 32px !important; }
    .global-search { margin-top: 2px !important; padding: 0 8px !important; }
    .global-search__field, .global-search__input, .top-navbar.is-stuck .global-search__field, .top-navbar.is-stuck .global-search__input { height: 36px !important; }
    .global-search__input {
        background: rgba(118,118,128,.12) !important; border: none !important;
        border-radius: 10px !important; font-size: 16px !important; padding-left: 34px !important;
        color: var(--ink) !important; box-shadow: none !important;
    }
    .global-search__input:focus { background: rgba(118,118,128,.12) !important; box-shadow: none !important; }
    .global-search__icon { left: 12px !important; color: rgba(60,60,67,.6) !important; }
    .global-search__dropdown { border-radius: 14px !important; }
    .main-content { padding-top: calc(44px + 44px + env(safe-area-inset-top, 0px)) !important; }
    .page-content { padding: 14px 16px calc(var(--tab-h) + env(safe-area-inset-bottom, 0px) + 20px) !important; }
    #suspensionBanner, #expiredBanner, [style*="position:sticky;top:64px"] { top: calc(88px + env(safe-area-inset-top, 0px)) !important; }

    /* Large-title page headers */
    .page-header, .page-wrap > .d-flex:first-child { margin-bottom: 14px !important; }
    .page-header h4, .page-wrap > .d-flex h4, .page-wrap > .d-flex .h4, .dashboard-title {
        font-size: 1.75rem !important; font-weight: 800 !important; letter-spacing: -0.03em !important;
    }
    .page-header h4 i, .page-wrap > .d-flex h4 i { display: none; }
    .page-header-actions .btn, .page-wrap > .d-flex .btn { border-radius: 999px !important; }

    /* Inset grouped surfaces */
    .card, .lp-panel, .aw-card, .cp-card {
        border-radius: 12px !important;
        border: none !important;
        box-shadow: 0 1px 0 rgba(0,0,0,.02) !important;
    }
    .card-header { padding: 12px 16px !important; }
    .card-header h5, .card-header h6 { font-size: .68rem !important; }
    .card-body { padding: 16px !important; }
    .aw-stat, .qa-tile { border: none !important; }
    .list-group-item { padding: 12px 16px; min-height: 44px; }
    .list-group-flush .list-group-item { border-left: 0; border-right: 0; }
    .table thead th { padding: 10px 14px !important; }
    .table tbody td { padding: 12px 14px !important; }

    /* Controls: 44pt touch targets, 12pt radius, prominent full-width primaries */
    .btn { min-height: 40px; border-radius: 10px !important; font-size: 15px !important; font-weight: 600 !important; padding: 8px 16px !important; }
    .btn-sm { min-height: 34px; font-size: 14px !important; padding: 5px 12px !important; }
    .btn-xs { min-height: 28px; font-size: 12px !important; }
    .btn-lg, .d-grid > .btn, .btn.w-100, .auth-card .btn-primary {
        min-height: 50px; border-radius: 12px !important; font-size: 17px !important; font-weight: 600 !important;
        text-transform: none; letter-spacing: 0;
    }
    .form-control, .form-select { min-height: 44px; border-radius: 10px !important; font-size: 16px !important; padding: 10px 14px !important; }
    .form-control-sm, .form-select-sm { min-height: 38px; }
    .form-label { font-size: .62rem !important; }
    .form-check-input { width: 1.2em; height: 1.2em; }
    .form-switch .form-check-input { width: 51px; height: 31px; border-radius: 999px; margin-top: 0; background-color: #e9e9eb; border-color: #e9e9eb; }
    .form-switch .form-check-input:checked { background-color: #34c759; border-color: #34c759; }
    .input-group-text { min-height: 44px; }
    .nav-pills { background: rgba(118,118,128,.12); border-radius: 10px; padding: 2px; gap: 0; }
    .nav-pills .nav-item { flex: 1; }
    .nav-pills .nav-link { border-radius: 8px !important; padding: 6px 10px; text-align: center; font-size: 13px; }
    .nav-pills .nav-link.active { background: #fff !important; color: var(--ink) !important; box-shadow: 0 2px 6px rgba(0,0,0,.10); }
    .dropdown-menu { border-radius: 14px !important; padding: 6px !important; }
    .dropdown-item { min-height: 40px; display: flex; align-items: center; font-size: 15px !important; }
    .badge { font-size: .62rem !important; }
    .alert { border-radius: 12px !important; }

    /* Bottom-sheet modals */
    .modal:not(.modal-fullscreen-host) .modal-dialog:not(.modal-fullscreen) {
        position: fixed; left: 0; right: 0; bottom: 0;
        margin: 0 !important; max-width: none !important; width: 100%;
        transform: translateY(100%) !important; transition: transform .32s cubic-bezier(.32,.72,0,1) !important;
    }
    .modal.show .modal-dialog:not(.modal-fullscreen) { transform: translateY(0) !important; }
    .modal .modal-dialog:not(.modal-fullscreen) .modal-content {
        border-radius: 16px 16px 0 0 !important; border: none !important;
        max-height: calc(100dvh - 40px - env(safe-area-inset-top, 0px));
        overflow: auto;
        padding-bottom: env(safe-area-inset-bottom, 0px);
    }
    .modal .modal-dialog:not(.modal-fullscreen) .modal-content::before {
        content: ""; display: block; width: 36px; height: 5px; border-radius: 3px;
        background: rgba(60,60,67,.3); margin: 8px auto 0;
    }
    .modal-header { padding: 12px 18px !important; border-bottom: none !important; }
    .modal-title { font-size: 17px; }
    .modal-body { padding: 4px 18px 16px !important; }
    .modal-footer { padding: 12px 18px !important; background: transparent; border-top: none !important; flex-direction: column-reverse; gap: 8px; }
    .modal-footer > * { margin: 0 !important; width: 100%; }
    .modal-footer .btn { min-height: 50px; border-radius: 12px !important; font-size: 17px !important; }

    /* Left navigation drawer (hamburger) as an iOS side sheet */
    .sidebar { width: min(84vw, 320px) !important; border-radius: 0 18px 18px 0; border-right: none; box-shadow: none; }
    .sidebar.show { box-shadow: 0 0 60px rgba(31,22,41,.35) !important; }
    .sidebar-brand { padding: calc(env(safe-area-inset-top, 0px) + 18px) 18px 14px !important; }
    .sidebar .nav-link { min-height: 44px; font-size: 15px !important; }
    .sidebar-user { padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 14px) !important; }

    /* Tab bar: 49pt + home-indicator inset, SF-style labels */
    .mob-tab-bar { min-height: calc(var(--tab-h) + env(safe-area-inset-bottom, 0px)); }
    .mob-tab-item { padding: 7px 2px 3px !important; gap: 2px !important; font-size: 10px !important; font-weight: 500 !important; }
    .mob-tab-item i { font-size: 22px !important; }
    .mob-tab-item:active { opacity: .5; }
    .mob-tab-badge { top: 4px; }
    .mob-drawer { border-radius: 16px 16px 0 0 !important; max-height: 82vh; z-index: 1071 !important; }
    .mob-drawer-backdrop { z-index: 1070 !important; }
    #mobDrawer .mob-drawer-item, #mobDrawer a.nav-link { min-height: 44px; font-size: 16px !important; background: #fff !important; margin: 0 16px !important; border-radius: 0 !important; border-bottom: 0.5px solid rgba(60,60,67,.18) !important; }
    #mobDrawer .mob-drawer-item::after, #mobDrawer a.nav-link::after {
        content: "\f054"; font-family: "Font Awesome 6 Free"; font-weight: 900;
        margin-left: auto; font-size: .7rem; color: #c7c7cc;
    }
    #mobDrawer .mob-drawer-item .badge { margin-left: auto !important; }
    #mobDrawer .mob-drawer-item .badge + *, #mobDrawer .mob-drawer-item .badge::after { margin-left: 8px; }
    #mobDrawer .mob-drawer-title + .sidebar-group, #mobDrawer .mob-drawer-title + div { background: #fff; margin: 0 16px 8px; border-radius: 12px; overflow: hidden; }
    #mobDrawer .mob-drawer-title + .sidebar-group .mob-drawer-item, #mobDrawer .mob-drawer-title + div .mob-drawer-item { margin: 0 !important; padding-left: 14px !important; }
    #mobDrawer .mob-drawer-title + .sidebar-group .mob-drawer-item:last-child { border-bottom: none !important; }
    #mobDrawer .mob-drawer-item.active, #mobDrawer a.nav-link.active { background: var(--brand-soft) !important; }
    #mobDrawer .mob-drawer-item i, #mobDrawer a.nav-link i { border: none; background: var(--canvas-2) !important; width: 29px !important; height: 29px !important; border-radius: 7px !important; }
    #mobDrawer .mob-drawer-item[style*="dc2626"] { margin: 8px 16px 0 !important; border-radius: 12px !important; border-bottom: none !important; }
    #mobDrawer .mob-drawer-item[style*="dc2626"]::after { display: none; }

    /* Chat: iMessage geometry */
    .wa-shell { border: none; border-radius: 0; box-shadow: none; }
    .bubble { border-radius: 18px !important; padding: 8px 13px 6px !important; }
    .bubble.mine { border-bottom-right-radius: 4px !important; }
    .bubble.theirs { border-bottom-left-radius: 4px !important; }
    .wa-msgs { background: #fff !important; }
    .wa-input { padding: 8px 10px calc(8px + env(safe-area-inset-bottom, 0px) * 0) !important; }
    .input-wrap { border-radius: 20px !important; min-height: 38px; }
    .wa-send-btn, .wa-attach { border-radius: 50% !important; width: 36px !important; height: 36px !important; }

    /* Toasts sit under the nav bar */
    .toast-stack { top: calc(env(safe-area-inset-top, 0px) + 96px) !important; }

    /* Layout banners (2FA nudge, grace period, avatar nudge): stack the
       actions under the text instead of squeezing them beside it */
    #avatarNudge, .main-content > .alert.d-flex { flex-wrap: wrap !important; margin: 12px 16px 0 !important; }
    .main-content > .alert.d-flex > .flex-fill { flex: 1 1 calc(100% - 44px) !important; }
    .main-content > .alert.d-flex .btn { margin-left: 44px; min-height: 36px; }

    /* ── Two-up GALLERY grids ────────────────────────────────────────────
       Only columns that carry a tablet/desktop gallery span (sm-6, md-6,
       lg-4, xl-4, xl-3, md-3, bare md-4) and directly hold a card go two
       per row: directory, events, courses, communities, resources, plans,
       invitations… Phone-first layout columns (col-12 + one breakpoint),
       side columns next to a wide column, and cards holding tables, charts,
       forms or lists stay full width. */
    .row > :is(
        [class*="col-sm-6"],
        [class*="col-md-6"]:not(.col-12),
        .col-12[class*="col-md-6"][class*="col-lg-"],
        .col-12[class*="col-md-6"][class*="col-xl-"],
        [class*="col-lg-4"]:not(.col-12),
        [class*="col-xl-4"]:not(.col-12),
        [class*="col-xl-3"],
        .col-md-4:not(.col-12),
        .col-md-3
    ):is(:has(> .card), :has(> a > .card)) {
        flex: 0 0 50% !important;
        max-width: 50% !important;
        width: 50% !important;
    }
    .row > .col-12.col-md-4,
    .row > .col-12.col-lg-4:not([class*="col-md-6"]),
    .row > .col-12.col-md-6:not([class*="col-lg-"]):not([class*="col-xl-"]),
    .row:has(> .col-lg-8) > .col-lg-4, .row:has(> .col-lg-7) > .col-lg-5, .row:has(> .col-lg-9) > .col-lg-3,
    .row:has(> .col-md-8) > .col-md-4, .row:has(> .col-xl-8) > .col-xl-4, .row:has(> .col-xl-9) > .col-xl-3,
    .row > [class*="col-"]:has(> .card table),
    .row > [class*="col-"]:has(> .card .table-responsive),
    .row > [class*="col-"]:has(> .card .table-mobile-cards),
    .row > [class*="col-"]:has(> .card canvas),
    .row > [class*="col-"]:has(> .card .chart-wrap),
    .row > [class*="col-"]:has(> .card form),
    .row > [class*="col-"]:has(> .card .list-group),
    .row > .col-lg-7, .row > .col-lg-8, .row > .col-lg-5, .row > .col-md-8, .row > .col-xl-8 {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        width: 100% !important;
    }
    .row.g-3, .row.g-4 { --bs-gutter-x: .6rem; --bs-gutter-y: .6rem; }

    /* Action rows under a hero card (My Membership): buttons two-up */
    .page-wrap > .card[style*="linear-gradient"] + .d-flex.flex-wrap.gap-2 { display: grid !important; grid-template-columns: 1fr 1fr; gap: 8px !important; }
    .page-wrap > .card[style*="linear-gradient"] + .d-flex.flex-wrap.gap-2 > .btn { width: 100%; justify-content: center; display: inline-flex; align-items: center; white-space: normal; }
    .page-wrap > .card[style*="linear-gradient"] .card-body { padding: 18px !important; }
    .page-wrap > .card[style*="linear-gradient"] .card-body > .d-flex.justify-content-between { flex-direction: column; gap: 12px !important; }
    .page-wrap > .card[style*="linear-gradient"] .card-body > .d-flex.justify-content-between > .text-end { text-align: left !important; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; }
    .page-wrap > .card[style*="linear-gradient"] .card-body > .d-flex.justify-content-between > .text-end > .small { width: auto; margin: 0 !important; }

    /* KPI / stat tiles two-up, compact */
    .row > [class*="col-"] > .stat-card .card-body, .row > [class*="col-"] > .card.stat-card .card-body { padding: 12px !important; }
    .row > [class*="col-"] > .stat-card .card-body > .d-flex { flex-direction: column; align-items: flex-start !important; gap: 8px !important; }
    .row > [class*="col-"] > .stat-card .icon { width: 34px !important; height: 34px !important; font-size: .85rem !important; }
    .row > [class*="col-"] > .stat-card .fw-bold, .row > [class*="col-"] > .stat-card .fs-5 { font-size: 1.15rem !important; -webkit-line-clamp: unset; display: block; }
    .row > [class*="col-"] > .stat-card .text-muted { font-size: .58rem !important; }

    /* ── Compact card anatomy ONLY when the column is actually narrow ──
       Every numbered column is a size container; the compact styles kick
       in below 250px, i.e. two-up columns (and native col-6 tiles), and
       never on a full-width card. */
    .row > [class*="col-"]:not([class*="-auto"]) { container-type: inline-size; }
    @container (max-width: 250px) {
        .card .card-body { padding: 12px !important; }
        .card .card-body h5, .card .card-body h6, .card .card-body .fs-5 {
            font-size: .84rem !important; line-height: 1.3;
            display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
        }
        .card .card-body .small, .card .card-body small { font-size: .7rem !important; }
        .card .card-body .badge { font-size: .56rem !important; padding: 2px 6px !important; }
        .card .card-body .btn { padding: 5px 8px !important; font-size: .7rem !important; min-height: 30px; border-radius: 8px !important; }
        .card .card-body .mt-auto.d-flex.gap-2 { flex-direction: column; gap: 6px !important; }
        .card .card-body .mt-auto.d-flex.gap-2 > .btn { width: 100%; }
        /* Course / generic picture cards */
        .card > .card-img-top, .card > img, .card > a > img,
        .card > div[style*="height:1"][style*="background"],
        .card > a > div[style*="height:1"],
        .card > div[style*="height:2"][style*="background"] { height: 96px !important; object-fit: cover; }
        .card .card-body p.text-muted,
        .card .card-body .text-muted:not(.small):not(small) { font-size: .7rem !important; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
        .card .card-body .d-flex.flex-wrap.gap-1 .badge,
        .card .card-body .d-flex.gap-2.flex-wrap .badge { font-size: .54rem !important; }
    }

    /* Member directory cards: avatar on top, everything centred */
    .member-card .card-body { padding: 12px 10px !important; }
    .member-card .card-body > .d-flex.align-items-center.gap-3 { flex-direction: column; text-align: center; gap: 6px !important; margin-bottom: 8px !important; }
    .member-card .card-body > .d-flex.align-items-center.gap-3 > .min-width-0 { width: 100%; }
    .member-card .card-body > .d-flex.align-items-center.gap-3 .d-flex.align-items-center.gap-1 { justify-content: center; }
    .member-card .avatar, .member-card img.avatar, .member-card [class*="avatar"] > img { width: 48px !important; height: 48px !important; }
    .member-card .fw-semibold.text-dark { font-size: .84rem !important; white-space: normal !important; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.25; }
    .member-card code { font-size: .62rem !important; white-space: nowrap; }
    .member-card .text-muted.small { font-size: .7rem !important; text-align: center; }
    .member-card .mt-auto.pt-2 { flex-direction: column; gap: 6px !important; align-items: center !important; }
    .member-card .mt-auto.pt-2 .ms-auto { margin-left: 0 !important; }
    .member-card .mt-auto .btn, .member-card .btn-sm { padding: 3px 9px !important; font-size: .72rem !important; min-height: 28px; }

    /* Event cards */
    .event-card .card-img-top { height: 90px !important; }
    .event-card > div[style*="height:100px"] { height: 64px !important; }
    .event-card .card-body > .d-flex.justify-content-between { margin-bottom: 6px !important; }
    .event-card .card-body .text-muted.small { margin-bottom: 4px !important; }
    .event-card .card-body .text-muted.small:has(.fa-map-marker-alt),
    .event-card .card-body .text-muted.small:has(.fa-users) { display: none; }
    #gridViewBtn, #listViewBtn { display: none !important; }

    /* Opt-in: data tables become a two-up card grid (users, memberships,
       corporate accounts, payments). Each row is a card; headers are hidden. */
    .table-mobile-cards { display: block !important; }
    .table-mobile-cards thead { display: none !important; }
    .table-mobile-cards tbody { display: grid !important; grid-template-columns: 1fr 1fr; gap: 10px; }
    .table-mobile-cards tbody tr {
        display: flex; flex-direction: column; gap: 4px; position: relative;
        background: #fff; border-radius: 12px; padding: 12px; border: 1px solid var(--hair);
        min-width: 0;
    }
    .table-mobile-cards tbody td {
        display: block; border: none !important; padding: 0 !important;
        font-size: .8rem; min-width: 0; overflow-wrap: anywhere;
    }
    .table-mobile-cards tbody td:empty { display: none; }
    /* Nothing inside a card may refuse to wrap - the card is ~165px wide */
    .table-mobile-cards tbody td, .table-mobile-cards tbody td * { white-space: normal !important; overflow-wrap: anywhere; word-break: break-word; min-width: 0; max-width: 100%; }
    .table-mobile-cards tbody td .text-truncate { overflow: visible !important; }
    /* Only the identity cell (avatar + name + email) stacks vertically; other
       cells keep their inline controls (e.g. the edit-ID pencil) on one line */
    .table-mobile-cards tbody td:nth-child(-n+2) > .d-flex.align-items-center,
    .table-mobile-cards tbody td:nth-child(-n+2) > .d-flex.align-items-center.gap-2,
    .table-mobile-cards tbody td:nth-child(-n+2) > .d-flex.align-items-center.gap-3 { flex-direction: column; align-items: flex-start !important; gap: 6px !important; }
    .table-mobile-cards tbody td:nth-child(n+3) > .d-flex { flex-wrap: wrap; gap: 4px 6px !important; align-items: center; }
    .table-mobile-cards tbody td .btn-xs, .table-mobile-cards tbody td:not(:last-child) .btn-sm { padding: 2px 6px !important; font-size: .66rem !important; min-height: 24px !important; display: inline-flex; align-items: center; }
    /* Column labels for the data cells (start, expiry, role, status…) - the
       header text is copied into data-label by main.php */
    .table-mobile-cards tbody td[data-label]:nth-child(n+3):not(:last-child)::before {
        content: attr(data-label); display: block; font-size: .56rem; letter-spacing: .12em; text-transform: uppercase;
        font-weight: 700; color: var(--muted); margin: 6px 0 1px;
    }
    .table-mobile-cards tbody td:last-child .btn { font-size: .72rem !important; min-height: 32px !important; padding: 4px 10px !important; }
    .table-mobile-cards tbody td:last-child form { display: inline; }
    .table-mobile-cards tbody td [style*="width:32px"], .table-mobile-cards tbody td [style*="width: 32px"],
    .table-mobile-cards tbody td [style*="width:36px"], .table-mobile-cards tbody td [style*="width:40px"],
    .table-mobile-cards tbody td .avatar, .table-mobile-cards tbody td img.rounded-circle { width: 38px !important; height: 38px !important; font-size: .85rem !important; }
    .table-mobile-cards tbody td .fw-semibold, .table-mobile-cards tbody td .fw-bold { font-size: .84rem; line-height: 1.25; }
    .table-mobile-cards tbody td .text-muted, .table-mobile-cards tbody td small, .table-mobile-cards tbody td .small { font-size: .66rem !important; line-height: 1.3; }
    .table-mobile-cards tbody td .badge { font-size: .56rem !important; padding: 2px 6px !important; }
    .table-mobile-cards tbody td code, .table-mobile-cards tbody td .font-monospace { font-size: .64rem !important; }
    .table-mobile-cards tbody tr:has(> td > .form-check-input:only-child) > td:nth-child(2),
    .table-mobile-cards tbody tr:has(> td > input[type="checkbox"]:only-child) > td:nth-child(2) { padding-right: 26px !important; }
    .table-mobile-cards tbody td:has(> .form-check-input:only-child) .form-check-input,
    .table-mobile-cards tbody td:has(> input[type="checkbox"]:only-child) input { width: 20px; height: 20px; }
    .table-mobile-cards tbody td:has(> .form-check-input:only-child),
    .table-mobile-cards tbody td:has(> input[type="checkbox"]:only-child) { position: absolute; top: 10px; right: 10px; }
    .table-mobile-cards tbody td:first-child:has(.fw-semibold), .table-mobile-cards tbody td:has(.fw-bold) { font-size: .86rem; }
    .table-mobile-cards tbody td:last-child { margin-top: auto; padding-top: 6px !important; display: flex; flex-wrap: wrap; gap: 4px; }
    .table-mobile-cards tbody td:last-child .btn { min-height: 30px; padding: 3px 9px !important; font-size: .74rem !important; }
    .table-mobile-cards tbody td .text-truncate { white-space: normal; }
    .table-mobile-cards tbody td [style*="width:32px"] { width: 36px !important; height: 36px !important; }
    .table-responsive:has(> .table-mobile-cards) { overflow: visible !important; }
    .card > .table-responsive:has(> .table-mobile-cards), .card-body:has(> .table-responsive > .table-mobile-cards) { background: transparent !important; }
    .card:has(> .table-responsive > .table-mobile-cards) { background: transparent !important; box-shadow: none !important; border: none !important; }
    .card:has(> .table-responsive > .table-mobile-cards) > .card-header,
    .card:has(> .table-responsive > .table-mobile-cards) > .card-footer { background: #fff !important; border-radius: 12px !important; margin-bottom: 10px; border: 1px solid var(--hair) !important; }

    /* Tab strips scroll sideways instead of wrapping into a grid */
    .nav-tabs, .nav-pills { flex-wrap: nowrap !important; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
    .nav-tabs::-webkit-scrollbar, .nav-pills::-webkit-scrollbar { display: none; }
    .nav-tabs .nav-link, .nav-pills .nav-link { white-space: nowrap; }
    .nav-pills .nav-item { flex: 0 0 auto; }
    #avatarNudge > .flex-grow-1 { flex: 1 1 calc(100% - 48px) !important; }
}
@media (max-width: 767.98px) and (prefers-reduced-motion: reduce) {
    .modal .modal-dialog { transition: none !important; }
}

/* ── 20. Dark mode compatibility (html[data-theme="dark"]) ─────────────── */
html[data-theme="dark"] {
    --canvas: #0f0c14; --canvas-2: #1a1522; --card: #171220; --hair: #2a2334; --hair-2: #221c2c;
    --ink: #f3f1f6; --ink-2: #d9d5e0; --ink-3: #c4bfcd; --muted: #9a94a8; --subtle: #6f6a7c;
    --brand-soft: rgba(200,38,55,.16); --brand-soft-2: rgba(200,38,55,.12);
    --green-soft: rgba(18,160,93,.16); --amber-soft: rgba(208,134,0,.16); --amber-line: rgba(208,134,0,.4); --amber-fg: #f2c15c;
    --blue-soft: rgba(47,111,237,.16); --info-fg: #9cbcff; --success-fg: #6fdca6; --danger-fg: #ff9aa5;
    --border-strong: #3a3247;
    --surface: var(--card); --surface-2: var(--canvas-2); --bg: var(--canvas); --border: var(--hair);
    --text: var(--ink); --text-muted: var(--muted); --text-subtle: var(--subtle);
    --success-bg: var(--green-soft); --danger-bg: var(--brand-soft); --warning-bg: var(--amber-soft); --info-bg: var(--blue-soft);
}
html[data-theme="dark"] body, html[data-theme="dark"] .main-content, html[data-theme="dark"] .cp-main, html[data-theme="dark"] .plat-main { background: var(--canvas) !important; color: var(--ink); }
html[data-theme="dark"] .sidebar, html[data-theme="dark"] .cp-sidebar, html[data-theme="dark"] .plat-sidebar,
html[data-theme="dark"] .sidebar-user, html[data-theme="dark"] .card, html[data-theme="dark"] .card-header,
html[data-theme="dark"] .lp-panel, html[data-theme="dark"] .aw-card, html[data-theme="dark"] .cp-card,
html[data-theme="dark"] .modal-content, html[data-theme="dark"] .dropdown-menu, html[data-theme="dark"] .wa-shell,
html[data-theme="dark"] .wa-left, html[data-theme="dark"] .wa-thread-hdr, html[data-theme="dark"] .wa-input,
html[data-theme="dark"] .auth-card-body, html[data-theme="dark"] .top-navbar, html[data-theme="dark"] .cp-topbar,
html[data-theme="dark"] .plat-topbar, html[data-theme="dark"] .mob-tab-bar, html[data-theme="dark"] .mob-drawer,
html[data-theme="dark"] .notification-bell, html[data-theme="dark"] .user-dropdown-btn, html[data-theme="dark"] #sidebarToggle,
html[data-theme="dark"] #global-back-btn, html[data-theme="dark"] .alert, html[data-theme="dark"] .app-toast,
html[data-theme="dark"] .page-link, html[data-theme="dark"] .form-control, html[data-theme="dark"] .form-select,
html[data-theme="dark"] .input-group-text, html[data-theme="dark"] .btn-outline-primary, html[data-theme="dark"] .btn-outline-secondary,
html[data-theme="dark"] .btn-secondary, html[data-theme="dark"] .btn-light, html[data-theme="dark"] .wa-attach, html[data-theme="dark"] .t-hbtn,
html[data-theme="dark"] .date-sep span, html[data-theme="dark"] .global-search__input, html[data-theme="dark"] .global-search__dropdown,
html[data-theme="dark"] .qa-tile, html[data-theme="dark"] .aw-stat, html[data-theme="dark"] .stat-card,
html[data-theme="dark"] #mobDrawer .mob-drawer-item, html[data-theme="dark"] #mobDrawer .mob-drawer-item i,
html[data-theme="dark"] body > nav.navbar {
    background-color: var(--card) !important; background-image: none; color: var(--ink) !important; border-color: var(--hair) !important;
}
html[data-theme="dark"] .top-navbar, html[data-theme="dark"] .mob-tab-bar { background-color: rgba(23,18,32,.9) !important; }
html[data-theme="dark"] .table thead th, html[data-theme="dark"] .wa-msgs, html[data-theme="dark"] .modal-footer,
html[data-theme="dark"] .input-wrap, html[data-theme="dark"] #waSearch, html[data-theme="dark"] .bubble.theirs,
html[data-theme="dark"] .card-footer, html[data-theme="dark"] .lp-stat-item { background: var(--canvas-2) !important; color: var(--ink) !important; border-color: var(--hair) !important; }
html[data-theme="dark"] .table { color: var(--ink-2) !important; }
html[data-theme="dark"] .table tbody td { border-color: var(--hair-2) !important; }
html[data-theme="dark"] .table-hover tbody tr:hover td { background: var(--canvas-2) !important; }
html[data-theme="dark"] .sidebar .nav-link, html[data-theme="dark"] .cp-nav-link, html[data-theme="dark"] .plat-nav a,
html[data-theme="dark"] .sidebar .nav-link i { color: var(--ink-3) !important; }
html[data-theme="dark"] .sidebar .nav-link:hover, html[data-theme="dark"] .cp-nav-link:hover { background: var(--canvas-2) !important; }
html[data-theme="dark"] .sidebar .nav-link.active, html[data-theme="dark"] .cp-nav-link.active, html[data-theme="dark"] .plat-nav a.active,
html[data-theme="dark"] .sidebar .nav-link.active i { color: #ff8e9b !important; background: var(--brand-soft) !important; }
html[data-theme="dark"] .sidebar-brand .brand-name, html[data-theme="dark"] .sidebar-user .user-name, html[data-theme="dark"] .top-navbar .page-title,
html[data-theme="dark"] .card-header h6, html[data-theme="dark"] .card-header h5, html[data-theme="dark"] .page-header h4,
html[data-theme="dark"] h1, html[data-theme="dark"] h2, html[data-theme="dark"] h3, html[data-theme="dark"] h4, html[data-theme="dark"] h5, html[data-theme="dark"] h6,
html[data-theme="dark"] .auth-logo h1, html[data-theme="dark"] .auth-card-header h2 { color: var(--ink) !important; }
html[data-theme="dark"] .form-control::placeholder { color: var(--subtle); }
html[data-theme="dark"] .dropdown-item { color: var(--ink-2) !important; }
html[data-theme="dark"] .dropdown-item:hover { background: var(--canvas-2) !important; }
html[data-theme="dark"] .modal-backdrop { background: #000 !important; }
html[data-theme="dark"] .text-dark, html[data-theme="dark"] .table strong, html[data-theme="dark"] .wa-conv-name, html[data-theme="dark"] .t-name { color: var(--ink) !important; }
html[data-theme="dark"] a:not(.btn):not(.nav-link):not(.dropdown-item):not(.mob-tab-item):not(.mob-drawer-item) { color: #ff8e9b; }
html[data-theme="dark"] .q-member-card, html[data-theme="dark"] .hero-dark { border-color: var(--hair) !important; }