/*
 * global-tokens.css — Single source of truth for the entire app
 * ----------------------------------------------------------------
 *  4-color palette: Gold, White, Black, Red
 *  Dark theme only.
 *
 *  Sections:
 *    1. Design tokens (CSS custom properties)
 *    2. Button system (.bz-btn)
 *    3. Card system (.bz-card)
 *    4. Form system (.bz-form-section)
 *    5. Tabs & action bars
 *    6. Table action column
 *    7. Utilities
 *
 *  Loaded globally via global-header.php (admin + partner).
 */

/* =================================================================
   1. DESIGN TOKENS
   ================================================================= */
:root {
    /* ── Brand ── */
    --bz-gold:         #F9C127;
    --bz-gold-hover:   #F9C127;
    --bz-gold-dim:     rgba(249,193,39,0.10);

    /* ── Neutrals ── */
    --bz-black:        #0A0E14;
    --bz-white:        #FFFFFF;
    --bz-ink:          #1A1F28;
    --bz-text:         #E7E9EE;
    --bz-text-muted:   #9AA2AE;

    /* ── Surfaces (dark theme) ── */
    --bz-bg-page:      #0A0E14;
    --bz-bg-surface:   #161B22;
    --bz-bg-card:      #1F2630;
    --bz-bg-card-2:    #262E39;
    --bz-border:       rgba(255,255,255,0.08);
    --bz-navbar-h:     64px;   /* fixed top navbar height — single source: .main-header height + .content-wrapper clearance */
    --bz-border-light: rgba(255,255,255,0.06);

    /* ── Danger (red — delete/destructive only) ── */
    --bz-danger:       #ef6b6b;
    --bz-danger-hover: #d85555;

    /* ── Functional (status badges, keep minimal) ── */
    --bz-success:      #34D399;
    --bz-warning:      #F9C127;

    /* ── Controls ── */
    --bz-pill-off:     #3A4250;

    /* ── Shortcuts ── */
    --bz-card:         var(--bz-bg-card);
    --bz-card-border:  var(--bz-border-light);
    --bz-row:          var(--bz-bg-card-2);
    --bz-row-border:   rgba(255,255,255,0.05);
}


/* =================================================================
   2. BUTTON SYSTEM
   Usage:
     <button class="bz-btn bz-btn-primary">Save</button>
     <a class="bz-btn bz-btn-outline">Cancel</a>
     <button class="bz-btn bz-btn-danger">Delete</button>
     <a class="bz-btn bz-btn-ghost">Compare</a>
   ================================================================= */
.bz-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 8px 16px;
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.2px;
    line-height: 1.2;
    border-radius: 6px;
    border: 1px solid transparent;
    cursor: pointer;
    text-decoration: none !important;
    white-space: nowrap;
    user-select: none;
    transition: background 0.15s, color 0.15s, border-color 0.15s, box-shadow 0.15s;
}
.bz-btn i { font-size: 14px; line-height: 1; color: inherit !important; }
.bz-btn:focus { outline: none; }
.bz-btn:active { transform: translateY(1px); }

/* Primary — Gold bg, black text */
a.bz-btn-primary, button.bz-btn-primary, .bz-btn-primary {
    background: var(--bz-gold) !important;
    color: var(--bz-ink) !important;
    border-color: var(--bz-gold) !important;
}
a.bz-btn-primary i, button.bz-btn-primary i, .bz-btn-primary i {
    color: var(--bz-ink) !important;
}
a.bz-btn-primary:hover, a.bz-btn-primary:focus,
button.bz-btn-primary:hover, button.bz-btn-primary:focus,
.bz-btn-primary:hover, .bz-btn-primary:focus {
    background: var(--bz-gold-hover) !important;
    color: var(--bz-ink) !important;
    border-color: var(--bz-gold-hover) !important;
    box-shadow: 0 2px 6px rgba(249,193,39,0.25);
}

/* Outline — Transparent, white border, white text */
a.bz-btn-outline, button.bz-btn-outline, .bz-btn-outline {
    background: transparent !important;
    color: var(--bz-text) !important;
    border-color: rgba(255,255,255,0.18) !important;
}
a.bz-btn-outline i, button.bz-btn-outline i, .bz-btn-outline i {
    color: var(--bz-text) !important;
}
a.bz-btn-outline:hover, a.bz-btn-outline:focus,
button.bz-btn-outline:hover, button.bz-btn-outline:focus,
.bz-btn-outline:hover, .bz-btn-outline:focus {
    background: rgba(255,255,255,0.04) !important;
    color: var(--bz-gold) !important;
    border-color: var(--bz-gold) !important;
}
a.bz-btn-outline:hover i, a.bz-btn-outline:focus i,
button.bz-btn-outline:hover i, button.bz-btn-outline:focus i,
.bz-btn-outline:hover i, .bz-btn-outline:focus i {
    color: var(--bz-gold) !important;
}

/* Gold outline — transparent bg, GOLD border + text; fills gold on hover.
   Brand-accented secondary action (e.g. Copy) without the loud solid fill. */
a.bz-btn-gold, button.bz-btn-gold, .bz-btn-gold {
    background: transparent !important;
    color: var(--bz-gold) !important;
    border-color: var(--bz-gold) !important;
}
a.bz-btn-gold i, button.bz-btn-gold i, .bz-btn-gold i { color: var(--bz-gold) !important; }
a.bz-btn-gold:hover, a.bz-btn-gold:focus,
button.bz-btn-gold:hover, button.bz-btn-gold:focus,
.bz-btn-gold:hover, .bz-btn-gold:focus {
    background: var(--bz-gold) !important;
    color: var(--bz-ink) !important;
    border-color: var(--bz-gold) !important;
}
a.bz-btn-gold:hover i, button.bz-btn-gold:hover i, .bz-btn-gold:hover i { color: var(--bz-ink) !important; }

/* Danger — Red, for delete/destructive actions only */
a.bz-btn-danger, button.bz-btn-danger, .bz-btn-danger {
    background: transparent !important;
    color: var(--bz-danger) !important;
    border-color: rgba(239,107,107,0.4) !important;
}
a.bz-btn-danger:hover, a.bz-btn-danger:focus,
button.bz-btn-danger:hover, button.bz-btn-danger:focus,
.bz-btn-danger:hover, .bz-btn-danger:focus {
    background: rgba(239,107,107,0.12) !important;
    color: #ff8a8a !important;
    border-color: var(--bz-danger) !important;
}

/* Ghost — No border, gold text */
a.bz-btn-ghost, button.bz-btn-ghost, .bz-btn-ghost {
    background: transparent !important;
    color: var(--bz-gold) !important;
    border-color: var(--bz-gold) !important;
}
a.bz-btn-ghost:hover, a.bz-btn-ghost:focus,
button.bz-btn-ghost:hover, button.bz-btn-ghost:focus,
.bz-btn-ghost:hover, .bz-btn-ghost:focus {
    background: var(--bz-gold-dim) !important;
    color: var(--bz-gold-hover) !important;
    border-color: var(--bz-gold-hover) !important;
}

/* Size modifier */
.bz-btn-sm {
    padding: 5px 10px;
    font-size: 11.5px;
    border-radius: 5px;
}
.bz-btn-sm i { font-size: 12px; }

/* A button's inner label/icon must always take the BUTTON's own colour so the
   text contrasts the fill (button policy). The dark-theme blanket rule
   (.content-wrapper span/i/... { color:#fff !important }) would otherwise repaint
   a wrapped label white-on-gold. inherit keeps base + hover colours correct.
   !important here only neutralises that blanket !important; the .content-wrapper
   prefix gives it higher specificity than the blanket's `.content-wrapper span`. */
.content-wrapper .bz-btn > * { color: inherit !important; }

/* Disabled state */
.bz-btn[disabled], .bz-btn.disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}


/* =================================================================
   3. CARD SYSTEM
   Usage:
     <div class="bz-card">
       <div class="bz-card-header"><h6>Title</h6></div>
       <div class="bz-card-body">Content</div>
     </div>
   ================================================================= */
.bz-card {
    background: var(--bz-bg-card);
    border: 1px solid var(--bz-border-light);
    border-radius: 10px;
    margin-bottom: 16px;
}
.bz-card-header {
    padding: 14px 20px;
    border-bottom: 1px solid var(--bz-border);
}
.bz-card-header h6 {
    margin: 0;
    color: var(--bz-gold);
    font-size: 14px;
    font-weight: 600;
}
.bz-card-header h6 i {
    margin-right: 8px;
    color: var(--bz-gold);
}
.bz-card-body {
    padding: 20px;
}
.bz-card-footer {
    padding: 14px 20px;
    border-top: 1px solid var(--bz-border);
}


/* =================================================================
   4. FORM SYSTEM
   Usage:
     <div class="bz-form-section">
       <div class="row">
         <div class="col-md-4 bz-form-section-head">
           <h3>Section Title</h3>
           <p>Description text</p>
         </div>
         <div class="col-md-8">
           <div class="form-group">
             <label class="bz-label">Field</label>
             <input class="form-control">
           </div>
         </div>
       </div>
     </div>
   ================================================================= */
.bz-form-section {
    background: var(--bz-bg-card);
    border: 1px solid var(--bz-border-light);
    border-radius: 10px;
    padding: 22px 24px;
    margin: 0 0 16px;
}
.bz-form-section-head h3 {
    color: var(--bz-gold);
    font-size: 15px;
    font-weight: 500;
    margin: 0 0 6px;
}
.bz-form-section-head p {
    color: var(--bz-text-muted);
    font-size: 12.5px;
    margin: 0 0 16px;
    line-height: 1.5;
}
.bz-form-section .form-group label,
.bz-form-section .bz-label {
    color: var(--bz-text);
    font-size: 12.5px;
    font-weight: 500;
    letter-spacing: .2px;
    margin-bottom: 6px;
}
.bz-form-section .form-control {
    background: rgba(0,0,0,0.22);
    color: var(--bz-text);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 6px;
    font-size: 13px;
    padding: 9px 12px;
}
.bz-form-section .form-control:focus {
    border-color: var(--bz-gold);
    background: rgba(0,0,0,0.3);
    box-shadow: 0 0 0 2px rgba(249,193,39,0.15);
    outline: none;
}
.bz-form-section .text-muted,
.bz-form-section small.text-muted {
    color: var(--bz-text-muted) !important;
    font-size: 11.5px;
}

.bz-form-footer {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 10px;
    background: var(--bz-bg-card);
    border: 1px solid var(--bz-border-light);
    border-radius: 10px;
    padding: 14px 20px;
    margin: 0;
}


/* =================================================================
   5. TABS & ACTION BARS
   ================================================================= */
.bz-tabs {
    display: flex;
    gap: 0;
    border-bottom: 2px solid var(--bz-border);
    margin: 0 0 14px;
    padding: 0;
}
.bz-tabs a {
    padding: 10px 22px;
    color: var(--bz-text-muted);
    text-decoration: none;
    font-weight: 500;
    font-size: 13px;
    letter-spacing: .3px;
    border-bottom: 3px solid transparent;
    margin-bottom: -2px;
    transition: color .15s, border-color .15s;
}
.bz-tabs a:hover { color: var(--bz-gold); }
.bz-tabs a.active {
    color: var(--bz-gold);
    border-bottom-color: var(--bz-gold);
}

.bz-actionbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin: 0 0 14px;
    flex-wrap: wrap;
}
.bz-actionbar .bz-lead {
    color: var(--bz-text);
    font-size: 13px;
    line-height: 1.45;
    flex: 1 1 320px;
}
.bz-actionbar .bz-lead small {
    color: var(--bz-text-muted);
    display: block;
    font-size: 11.5px;
    margin-top: 2px;
}
.bz-actionbar .bz-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

/* page-header styles → see line ~604 */


/* =================================================================
   6. TABLE ACTION COLUMN
   ================================================================= */
.actions, td.actions,
.row-actions, td.row-actions {
    width: 1%;
    white-space: nowrap;
    vertical-align: middle;
}
.actions .bz-btn, td.actions .bz-btn,
.row-actions .bz-btn, td.row-actions .bz-btn {
    display: flex;
    width: 100%;
    margin-bottom: 6px;
}
.actions .bz-btn:last-child, td.actions .bz-btn:last-child,
.row-actions .bz-btn:last-child, td.row-actions .bz-btn:last-child {
    margin-bottom: 0;
}


/* =================================================================
   7. UTILITIES
   ================================================================= */
.bz-text-danger { color: var(--bz-danger) !important; }
.bz-bg-gold-dim { background: var(--bz-gold-dim) !important; }
.d-hide { display: none !important; }
.bz-helper {
    color: var(--bz-text-muted);
    font-size: 11.5px;
    margin: 8px 0 16px;
}


/* =================================================================
   8. FEATURE TOGGLE ROWS (used by package + partner plan forms)
   ================================================================= */
.bz-feat-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 14px;
    border-bottom: 1px solid var(--bz-border-light);
}
.bz-feat-row:last-child { border-bottom: none; }
.bz-feat-toggle { flex: 1; }
.bz-feat-desc {
    display: block;
    color: var(--bz-text-muted);
    font-size: 11.5px;
    margin-top: 2px;
}
/* bz-feat-icon → see line ~598 */
.bz-feat-limit {
    display: flex;
    align-items: center;
    gap: 8px;
}
.bz-feat-limit input[type="number"] {
    width: 80px;
    background: rgba(0,0,0,0.22);
    color: var(--bz-text);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 5px;
    padding: 5px 8px;
    font-size: 12px;
    text-align: center;
}
.bz-feat-limit-hint {
    color: var(--bz-text-muted);
    font-size: 11px;
}

.bz-feat-group-header {
    margin: 18px 0 10px;
    padding: 10px 14px;
    background: var(--bz-gold-dim);
    border-left: 3px solid var(--bz-gold);
    border-radius: 4px;
}
.bz-feat-group-header i {
    font-size: 1.1rem;
    color: var(--bz-gold) !important;
    margin-right: 8px;
    vertical-align: middle;
}
.bz-feat-group-header span {
    font-weight: 600;
    font-size: .9rem;
    color: var(--bz-gold) !important;
    text-transform: uppercase;
    letter-spacing: .5px;
}


/* =================================================================
   9. CUSTOM FIELDS (plan card extras)
   ================================================================= */
.bz-cf-list .input-group {
    margin-bottom: 8px;
}
.bz-cf-del {
    background: transparent;
    border: 1px solid rgba(239,107,107,0.3);
    color: var(--bz-danger);
    padding: 6px 12px;
    border-radius: 0 6px 6px 0;
    cursor: pointer;
    transition: background 0.15s;
}
.bz-cf-del:hover {
    background: rgba(239,107,107,0.12);
}


/* =================================================================
   10. BADGE SYSTEM
   ================================================================= */
.bz-badge {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.3px;
}
.bz-badge-gold {
    background: var(--bz-gold-dim);
    color: var(--bz-gold);
}
.bz-badge-danger {
    background: rgba(239,107,107,0.12);
    color: var(--bz-danger);
}
.bz-badge-success {
    background: rgba(52,211,153,0.12);
    color: var(--bz-success);
}
.bz-badge-muted {
    background: rgba(255,255,255,0.06);
    color: var(--bz-text-muted);
}


/* Backward compat: .bz-pkg-page aliases removed — package.php uses global classes directly */

/* ── Global Dashboard ─────────────────────────────────────────── */
.bz-dash { padding: 5px 28px 24px; max-width: 100%; }   /* top padding = the gap below the hero */
.bz-dash-topbar { display:flex; justify-content:space-between; align-items:center; margin-bottom: 22px; gap:16px; flex-wrap:wrap; }
.bz-dash-title { font-size: 24px; font-weight:700; color: var(--bz-gold) !important; letter-spacing:-0.01em; margin:0; }

/* Dashboard hero — one integrated, flow-based flex band (no overlay, no absolute layering).
   Left→right: greeting (order 1) · page title (order 2, flexes to fill the middle & stay
   centred) · status (order 3). They are real flex items, so they can never overlap — a long
   greeting just pushes the title across; no JS fitting needed. The greeting is nudged down
   (margin-top:40px) so it STARTS at the half-height of the "Dashboard" title and cascades
   below it; its swoosh (`::after`, the only positioned element, scoped inside the greeting and
   sized in em) tracks the 30px text. Spacing — top gap: hero padding-top (14px); side insets:
   28px; gap to the section below: owned by `.bz-dash` padding-top (5px, see above), not here.
   Mobile (≤1100) stacks this same band into a centred column. */
.bz-dash-hero { display:flex; align-items:flex-start; gap:28px; padding:14px 28px 0; }
.bz-dash-greet { order:1; position:relative; flex:0 0 auto; margin-top:40px; font-size:30px; font-weight:700; letter-spacing:-0.01em; line-height:1; color:var(--bz-white, #fff); white-space:nowrap; padding-bottom:2.1em; }
.bz-dash-greet::after { content:""; position:absolute; left:0; right:0; bottom:0; height:1.85em; background:url(../img/gold-ribbon.svg) no-repeat center / 100% 100%; pointer-events:none; animation:bz-swoosh-wipe 0.7s ease-out 0.05s both; }
/* Swoosh enters by wiping in from left→right, so it never just "pops" after the page paints. */
@keyframes bz-swoosh-wipe { from { clip-path:inset(0 100% 0 0); } to { clip-path:inset(0 0 0 0); } }
@media (prefers-reduced-motion: reduce) { .bz-dash-greet::after { animation:none; } }
.bz-dash-hero .bz-page-header { order:2; flex:1 1 auto; }
.bz-dash-hero-status { order:3; flex:0 0 auto; display:flex; gap:10px; align-items:center; flex-wrap:wrap; }

/* Settings view-mode: fields shown but locked until "Edit" is clicked */
.bz-fieldlock { pointer-events:none; opacity:0.9; user-select:none; }
.bz-edit-bar { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; margin:0 0 16px; padding:12px 16px; background:var(--bz-gold-dim, rgba(249,193,39,0.10)); border:1px solid rgba(249,193,39,0.35); border-radius:10px; }
.bz-edit-hint { font-size:13px; color:var(--bz-text,#cfd5e3); }
.bz-edit-hint i { color:var(--bz-gold,#f9c127); margin-right:6px; }
.bz-edit-bar .bz-edit-toggle { white-space:nowrap; }
.bz-dash-badge { font-size:12px; padding:5px 12px; border-radius:999px; background:var(--bz-gold-dim, rgba(249,193,39,0.10)); color:var(--bz-gold) !important; font-weight:500; display:inline-flex; align-items:center; gap:6px; }
.bz-dash-badge i { font-size:13px; color:var(--bz-gold) !important; }
.bz-dash-period { font-size:12.5px; color:var(--bz-white, #fff) !important; }

/* Section header — groups dashboard metric rows / cards under a labeled band */
.bz-dash-section { display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin:24px 0 12px; }
.bz-dash > .bz-dash-section:first-child, .bz-dash > .bz-dash-toprow:first-child { margin-top:0; }   /* first block hugs the hero; gap is owned by .bz-dash padding-top */
.bz-dash-section-title { font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:0.08em; margin:0; display:flex; align-items:center; gap:8px; }
.bz-dash-section-title i { font-size:14px; color:var(--bz-gold) !important; display:inline-flex; align-items:center; }
.bz-dash-section-link { font-size:12px; font-weight:500; text-decoration:none; white-space:nowrap; color:var(--bz-gold) !important; display:inline-flex; align-items:center; gap:4px; }
.bz-dash-section-link:hover { text-decoration:underline; }

.bz-dash-metrics { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-bottom:18px; }
.bz-dash-metric { background:var(--bz-bg-surface) !important; border:1px solid var(--bz-border) !important; border-radius:10px !important; padding:12px 14px !important; }
.bz-dash-metric-label { font-size:12px !important; color:var(--bz-white, #fff) !important; font-weight:500 !important; margin-bottom:6px !important; display:flex !important; align-items:center !important; gap:6px !important; }
.bz-dash-metric-label i { font-size:14px !important; color:var(--bz-gold) !important; display:inline-flex !important; align-items:center; }
.bz-dash-metric-value { font-size:22px !important; font-weight:700 !important; color:var(--bz-white, #fff) !important; letter-spacing:-0.02em !important; line-height:1.1 !important; }
.bz-dash-metric-delta { font-size:11.5px !important; margin-top:5px !important; font-weight:500 !important; display:flex !important; align-items:center !important; gap:4px !important; color:var(--bz-gold) !important; }
.bz-dash-metric-delta i { font-size:12px !important; display:inline-flex !important; color:var(--bz-gold) !important; }

/* Compact top row — Overview (2 cols × 2 rows) sits beside Appointments (3 cols).
   2fr:3fr keeps every card ~equal width across both groups; headings hug the top. */
.bz-dash-toprow { display:grid; grid-template-columns:2fr 3fr; gap:24px; align-items:start; margin-bottom:18px; }
.bz-dash-toprow .bz-dash-section { margin-top:0; }
.bz-dash-toprow .bz-dash-metrics { margin-bottom:0; }
.bz-dash-col--overview .bz-dash-metrics { grid-template-columns:repeat(2,1fr); }
.bz-dash-col--appts .bz-dash-metrics { grid-template-columns:repeat(3,1fr); }

/* Global timeline bar (Today / Week / Month / Year) — pill segmented control, drives the whole dashboard. */
.bz-dash-periodbar { display:flex; align-items:center; justify-content:flex-end; gap:10px; margin:0 0 14px; }
.bz-dash-periodbar-label { font-size:12px; font-weight:600; color:rgba(255,255,255,0.55); display:inline-flex; align-items:center; gap:6px; }
.bz-dash-periods { display:inline-flex; gap:2px; padding:3px; border-radius:999px; background:var(--bz-bg-surface); border:1px solid var(--bz-border); }
.bz-dash-periods a { font-size:12px; font-weight:600; color:rgba(255,255,255,0.6); text-decoration:none; padding:5px 14px; border-radius:999px; white-space:nowrap; line-height:1; }
.bz-dash-periods a:hover { color:var(--bz-white, #fff); }
.bz-dash-periods a.active { background:var(--bz-gold); color:#1a1a1a; }
/* Timeline dropdown — matches the standard datatable date-filter look. */
.bz-timeline-select { height:36px; box-sizing:border-box; padding:0 10px; background:var(--bz-bg-surface); color:var(--bz-text, #e5e7eb); border:1px solid var(--bz-border, rgba(255,255,255,0.12)); border-radius:6px; font-size:12.5px; font-weight:600; cursor:pointer; }
.bz-timeline-select:focus { outline:none; border-color:var(--bz-gold); }
/* Marked for toolbar adoption — hidden until the datatable engine relocates it. */
.bz-timeline-select[data-bbp-toolbar] { display:none; }

/* Revenue row — the 5 breakdown boxes (2 cols) sit beside the income chart.
   Both sides share one fixed height (no circular stretch); boxes centre their content. */
.bz-dash-revrow { display:grid; grid-template-columns:2fr 3fr; gap:24px; align-items:start; margin-bottom:18px; }
.bz-dash-revrow-stats { display:grid; grid-template-columns:repeat(2,1fr); grid-auto-rows:1fr; gap:12px; height:248px; }
.bz-dash-revrow-stats .bz-dash-metric { display:flex; flex-direction:column; justify-content:center; }
.bz-dash-revrow-stats .bz-dash-metric:nth-child(5) { grid-column:1 / -1; }   /* Average fills the bottom row */
.bz-dash-revrow .bz-dash-card { margin-bottom:0; height:248px; }

.bz-dash-grid-2 { display:grid; grid-template-columns:1.4fr 1fr; gap:16px; margin-bottom:16px; }
.bz-dash-card { background:var(--bz-bg-surface) !important; border:1px solid var(--bz-border) !important; border-radius:10px !important; padding:18px 20px !important; }
.bz-dash-card-title { font-size:14px !important; font-weight:600 !important; color:var(--bz-gold) !important; margin:0 0 14px !important; display:flex !important; justify-content:space-between !important; align-items:center !important; }
.bz-dash-card-title span { font-size:11.5px !important; font-weight:400 !important; color:var(--bz-white, #fff) !important; }

.bz-dash-plan-row { display:flex; align-items:center; justify-content:space-between; padding:10px 0; border-bottom:1px solid var(--bz-border); font-size:13px; gap:10px; }
.bz-dash-plan-row:last-child { border-bottom:none; }
.bz-dash-plan-name { color:var(--bz-white, #fff) !important; font-weight:600; min-width:120px; }
.bz-dash-plan-bar-wrap { flex:1; max-width:140px; height:6px; background:var(--bz-border); border-radius:999px; }
.bz-dash-plan-bar-fill { height:100%; border-radius:999px; background:var(--bz-gold); }
.bz-dash-plan-count { color:var(--bz-white, #fff) !important; min-width:40px; text-align:right; font-variant-numeric: tabular-nums; }
.bz-dash-plan-pill { padding:3px 10px; border-radius:999px; font-size:10.5px !important; font-weight:600 !important; min-width:44px; text-align:center; background:var(--bz-gold-dim, rgba(249,193,39,0.10)); color:var(--bz-gold); }
.bz-dash-plan-pill--done { background:var(--bz-gold); color:var(--bz-bg-page); }   /* completed step */

/* Inline call-to-action banner (gold) — a standalone box so it needs no !important override of the dark card. */
.bz-dash-cta { background:var(--bz-gold); color:var(--bz-bg-page); border-radius:10px; padding:14px 18px; margin-bottom:16px; font-weight:600; }
.bz-dash-cta .bz-btn { margin-left:14px; }

.bz-dash-activity-row { display:flex; align-items:flex-start; gap:11px; padding:11px 0; border-bottom:1px solid var(--bz-border); font-size:13px; }
.bz-dash-activity-row:last-child { border-bottom:none; }
.bz-dash-activity-icon { width:32px; height:32px; border-radius:50%; display:flex !important; align-items:center; justify-content:center; flex-shrink:0; font-size:14px; background:var(--bz-gold-dim, rgba(249,193,39,0.10)); color:var(--bz-gold) !important; }
.bz-dash-activity-icon i { display:inline-flex !important; align-items:center; color:var(--bz-gold) !important; }
.bz-dash-activity-text { color:var(--bz-white, #fff) !important; line-height:1.45; font-weight:500; }
.bz-dash-activity-time { font-size:11px !important; color:var(--bz-white, #fff) !important; margin-top:2px; font-weight:400 !important; }

.bz-dash-grid-3 { display:grid; grid-template-columns:1fr 1fr 1fr; gap:16px; }
.bz-dash-stat-row { display:flex; justify-content:space-between; align-items:center; padding:9px 0; border-bottom:1px solid var(--bz-border); font-size:13px; }
.bz-dash-stat-row:last-child { border-bottom:none; }
.bz-dash-stat-label { color:var(--bz-white, #fff) !important; }
.bz-dash-stat-val { color:var(--bz-white, #fff) !important; font-weight:700 !important; font-variant-numeric: tabular-nums; }
.bz-dash-stat-val.gold { color:var(--bz-gold) !important; }
.bz-dash-stat-val.danger { color:var(--bz-danger) !important; }

.bz-dash-empty { padding:20px 0; text-align:center; color:var(--bz-white, #fff); font-size:12.5px; }

/* Employee Performance leaderboard — name · relative-load bar · stats, sorted by workload. */
.bz-staff-rank { display:flex; flex-direction:column; gap:12px; }
.bz-staff-row { display:grid; grid-template-columns:200px 1fr auto; align-items:center; gap:16px; }
.bz-staff-id { display:flex; align-items:center; gap:10px; min-width:0; }
.bz-staff-id img, .bz-staff-ph { width:32px; height:32px; border-radius:50%; object-fit:cover; flex:0 0 auto; }
.bz-staff-ph { display:inline-flex; align-items:center; justify-content:center; background:var(--bz-bg-page); border:1px solid var(--bz-border); color:var(--bz-gold); }
.bz-staff-name { font-size:13px; font-weight:600; color:var(--bz-white, #fff); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.bz-staff-bar { height:8px; border-radius:999px; background:var(--bz-bg-page); overflow:hidden; }
.bz-staff-bar span { display:block; height:100%; border-radius:999px; background:var(--bz-gold); }
.bz-staff-stats { display:flex; align-items:center; gap:14px; font-size:12px; white-space:nowrap; }
.bz-staff-appts { color:var(--bz-white, #fff); font-weight:600; }
.bz-staff-done { color:rgba(255,255,255,0.6); }
.bz-staff-rev { color:var(--bz-gold); font-weight:600; }

@media (max-width: 1100px) {
  .bz-dash-metrics { grid-template-columns:repeat(2,1fr); }
  .bz-dash-grid-2, .bz-dash-grid-3 { grid-template-columns:1fr; }
  /* Narrow: stack the top row; both groups fall back to 2 columns. */
  .bz-dash-toprow { grid-template-columns:1fr; gap:16px; }
  .bz-dash-col--overview .bz-dash-metrics, .bz-dash-col--appts .bz-dash-metrics { grid-template-columns:repeat(2,1fr); }
  /* Leaderboard: drop the relative-load bar, keep name + stats. */
  .bz-staff-row { grid-template-columns:1fr auto; gap:12px; }
  .bz-staff-bar { display:none; }
  /* Revenue row stacks: boxes above (still 2 cols), chart below; heights go natural. */
  .bz-dash-revrow { grid-template-columns:1fr; }
  .bz-dash-revrow-stats, .bz-dash-revrow .bz-dash-card { height:auto; }
  .bz-dash-periodbar { justify-content:center; }
  /* Narrow screens: the same flex band stacks into a centred column — title, then
     greeting+swoosh (slightly smaller at 28px), then status. Still flow-based, no overlap. */
  .bz-dash-hero { flex-direction:column; align-items:center; gap:14px; padding:20px; }
  .bz-dash-hero .bz-page-header { order:1; }
  .bz-dash-greet { order:2; font-size:28px; margin-top:0; }
  .bz-dash-hero-status { order:3; justify-content:center; }
}

/* ── Global Profile ───────────────────────────────────────────── */
.bz-profile-tabs { display:flex; gap:0; list-style:none; padding:0; margin:0 0 20px; border-bottom:2px solid var(--bz-border); }
.bz-profile-tabs li { padding:10px 20px; font-size:13px; font-weight:600; color:var(--bz-white, #fff); cursor:pointer; border-bottom:2px solid transparent; margin-bottom:-2px; display:flex; align-items:center; gap:6px; }
.bz-profile-tabs li:hover { color:var(--bz-gold); }
.bz-profile-tabs li.active { color:var(--bz-gold); border-bottom-color:var(--bz-gold); }
.bz-profile-tabs li i { font-size:14px; }
.bz-tab-pane { display:none; }
.bz-tab-pane.active { display:block; }

.bz-profile-avatar { width:80px; border-radius:50%; border:3px solid var(--bz-gold); }
.bz-profile-avatar-wrap { margin-bottom:20px; }
.bz-profile-avatar-btn { margin-top:10px; }
.bz-profile-upload { display:none; }
.bz-profile-upload-label { cursor:pointer; font-size:12px !important; padding:6px 14px !important; }
.bz-profile-label { color:var(--bz-white, #fff) !important; }
.bz-profile-verify { color:var(--bz-gold) !important; font-size:12px; margin-left:8px; }
.bz-profile-verified { color:var(--bz-gold) !important; font-size:11px; margin-left:8px; }
.bz-profile-submit { margin-top:10px; }
.bz-profile-info-box { margin-top:16px; padding:12px 16px; background:var(--bz-gold-dim); border-radius:8px; color:var(--bz-white, #fff); }
.bz-profile-info-box i { color:var(--bz-gold) !important; }
.bz-profile-info-box a { color:var(--bz-gold) !important; font-weight:600; }
.bz-profile-lang-row { align-items:flex-end; }
.bz-profile-lang-group { margin-bottom:0 !important; }
.bz-profile-lang-btn { margin-bottom:4px; }
.bz-profile-lang-check { color:var(--bz-white, #fff); display:flex; align-items:center; gap:8px; cursor:pointer; margin-bottom:4px; }
.bz-profile-invoice-btn { font-size:11px !important; padding:4px 10px !important; }
.bz-profile-status-paid { background:var(--bz-gold); color:var(--bz-bg-page); }
.bz-profile-status-fail { background:rgba(239,107,107,0.15); color:var(--bz-danger); }
.bz-dash-card + .bz-dash-card { margin-top:16px; }

.bz-profile-edit-hidden { display:none !important; }
.bz-profile-edit-toggle { font-size:12px !important; padding:5px 14px !important; }
.bz-profile-edit-actions { display:flex; gap:10px; margin-top:16px; }

.bz-profile-view-grid { display:flex; flex-direction:column; gap:0; }
.bz-profile-view-row { display:flex; align-items:center; padding:12px 0; border-bottom:1px solid var(--bz-border); gap:16px; }
.bz-profile-view-row:last-child { border-bottom:none; }
.bz-profile-view-label { font-size:13px; font-weight:600; color:var(--bz-gold) !important; min-width:140px; flex-shrink:0; }
.bz-profile-view-value { font-size:13px; color:var(--bz-white, #fff) !important; }
.bz-profile-unverified { color:var(--bz-danger) !important; font-size:11px; margin-left:8px; }

/* ── Icon utilities ────────────────────────────────────────────── */
.bi-spin { display:inline-block; animation:bz-spin 1s linear infinite; }
@keyframes bz-spin { to { transform:rotate(360deg); } }

/* Feature/addon icon — gold everywhere (sidebar, package page, features page, public pricing) */
.bz-feat-icon { color:var(--bz-gold) !important; font-size:1.05rem; display:inline-block; vertical-align:middle; }
.bz-group-icon { color:var(--bz-gold) !important; font-size:1.1rem; vertical-align:middle; margin-right:8px; }

/* ── Page header — every page uses this ───────────────────────── */
.bz-page-header { margin:0; padding:18px 15px 8px; text-align:center; }
.bz-page-title { margin:0; padding:0 0 8px; font-size:1.5rem; font-weight:700;
                  color:var(--bz-gold) !important; line-height:1.3;
                  border-bottom:2px solid var(--bz-gold); display:inline-block; }
.bz-page-desc { margin:10px 0 0; font-size:0.875rem; color:rgba(255,255,255,0.6) !important; line-height:1.5; }
.bz-page-desc strong { color:var(--bz-gold) !important; font-weight:600; }

/* Header with page actions: description on the left, actions pinned right, on
   the same level. The actions box is position:relative so a dropdown/filter
   popup it holds anchors to it. */
/* padding:0 20px insets the row so the right-aligned actions line up exactly
   with the table card's right edge (the card sits ~20px further in than the
   header's own 15px padding: .content 28px + .container-fluid 7.5px). */
.bz-page-subrow { display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:12px; margin-top:10px; padding:0 20px; }
.bz-page-subrow .bz-page-desc { margin:0; text-align:center; }
.bz-page-actions { position:relative; display:flex; align-items:center; gap:8px; justify-self:end; }
@media (max-width: 575.98px) {
    .bz-page-subrow { grid-template-columns:1fr; }
    .bz-page-subrow-spacer { display:none; }
    .bz-page-actions { justify-self:stretch; justify-content:flex-end; }
}

/* ── Utility classes (replace inline styles) ──────────────────── */

/* Text colors */
.bz-text-gold   { color:var(--bz-gold) !important; }
.bz-text-white   { color:var(--bz-white) !important; }
.bz-text-main    { color:var(--bz-text) !important; }
.bz-text-muted   { color:var(--bz-text-muted) !important; }
.bz-text-dim     { color:rgba(255,255,255,0.55) !important; }
.bz-text-faint   { color:rgba(255,255,255,0.4) !important; }
.bz-text-success { color:var(--bz-success) !important; }

/* Background surfaces */
.bz-bg-page      { background:var(--bz-bg-page) !important; }
.bz-bg-surface   { background:var(--bz-bg-surface) !important; }
.bz-bg-card      { background:var(--bz-bg-card) !important; }
.bz-bg-card-2    { background:var(--bz-bg-card-2) !important; }
.bz-bg-gold      { background:var(--bz-gold) !important; color:#000 !important; }
.bz-bg-gold-soft { background:rgba(249,193,39,0.08) !important; }
.bz-bg-danger-soft { background:rgba(239,107,107,0.12) !important; }
.bz-bg-success-soft { background:rgba(52,211,153,0.12) !important; }
.bz-bg-transparent { background:transparent !important; }

/* Borders */
.bz-border       { border:1px solid var(--bz-border) !important; }
.bz-border-gold  { border:1px solid var(--bz-gold) !important; }
.bz-border-b     { border-bottom:1px solid var(--bz-border) !important; }
.bz-border-0     { border:0 !important; }
.bz-rounded      { border-radius:8px !important; }
.bz-rounded-lg   { border-radius:12px !important; }

/* Font sizes */
.bz-fs-xs        { font-size:11px !important; }
.bz-fs-sm        { font-size:13px !important; }
.bz-fs-md        { font-size:14px !important; }
.bz-fs-lg        { font-size:18px !important; }
.bz-fs-xl        { font-size:24px !important; }
.bz-fs-2xl       { font-size:28px !important; }
.bz-fs-3xl       { font-size:36px !important; }

/* Font weights */
.bz-fw-normal    { font-weight:400 !important; }
.bz-fw-medium,
.bz-fw-500       { font-weight:500 !important; }
.bz-fw-semibold  { font-weight:600 !important; }
.bz-fw-bold      { font-weight:700 !important; }

/* Spacing */
.bz-p-0          { padding:0 !important; }
.bz-p-sm         { padding:12px !important; }
.bz-p-md         { padding:16px !important; }
.bz-p-lg         { padding:24px !important; }
.bz-mb-0         { margin-bottom:0 !important; }
.bz-mb-sm        { margin-bottom:8px !important; }
.bz-mb-md        { margin-bottom:16px !important; }
.bz-mb-lg        { margin-bottom:24px !important; }
.bz-mt-md        { margin-top:16px !important; }
.bz-mt-lg        { margin-top:24px !important; }

/* Layout */
.bz-flex         { display:flex !important; }
.bz-flex-between { display:flex !important; justify-content:space-between !important; align-items:center !important; }
.bz-flex-center  { display:flex !important; justify-content:center !important; align-items:center !important; }
.bz-flex-col     { display:flex !important; flex-direction:column !important; }
.bz-gap-sm       { gap:8px !important; }
.bz-gap-md       { gap:16px !important; }
.bz-w-full       { width:100% !important; }
.bz-text-center  { text-align:center !important; }
.bz-text-upper   { text-transform:uppercase !important; letter-spacing:0.5px !important; }
.bz-hidden       { display:none !important; }
.bz-mono         { font-family:'Menlo','Consolas','Monaco',monospace !important; }

/* Component: stat card (dashboard/report pages) */
.bz-stat-card    { background:var(--bz-bg-card); border:1px solid var(--bz-border); border-radius:10px; padding:16px; }
.bz-stat-label   { font-size:11px; color:var(--bz-text-muted); text-transform:uppercase; letter-spacing:0.5px; margin:0 0 4px; }
.bz-stat-value   { font-size:28px; font-weight:700; color:var(--bz-gold); margin:0; }
.bz-stat-sub     { font-size:13px; color:var(--bz-text-muted); margin:4px 0 0; }

/* Component: panel (replaces page-specific da-card, cj-card, etc.) */
.bz-panel        { background:var(--bz-bg-card); border:1px solid var(--bz-border); border-radius:12px; padding:22px; margin-bottom:20px; }
.bz-panel-title  { margin:0 0 16px; color:var(--bz-gold); font-size:16px; font-weight:600; }

/* Component: data table wrapper */
.bz-table-dark   { width:100%; border-collapse:collapse; }
.bz-table-dark th { text-align:left; padding:12px 10px; color:var(--bz-gold); font-weight:600; border-bottom:1px solid var(--bz-border); font-size:12px; letter-spacing:0.5px; text-transform:uppercase; }
.bz-table-dark td { padding:14px 10px; border-bottom:1px solid var(--bz-row-border); color:var(--bz-text); vertical-align:middle; }

/* Component: status pill */
.bz-pill         { display:inline-block; padding:3px 10px; border-radius:999px; font-size:11px; font-weight:700; letter-spacing:0.5px; text-transform:uppercase; }
.bz-pill-ok      { background:rgba(52,211,153,0.16); color:#69d575; }
.bz-pill-warn    { background:rgba(249,193,39,0.16); color:var(--bz-gold); }
.bz-pill-fail    { background:rgba(239,107,107,0.16); color:#ff7e75; }
.bz-pill-neutral { background:rgba(255,255,255,0.08); color:rgba(255,255,255,0.7); }

/* Component: info banner */
.bz-banner       { padding:14px 18px; border-radius:8px; margin-bottom:20px; font-size:14px; }
.bz-banner-info  { background:rgba(249,193,39,0.08); border:1px solid rgba(249,193,39,0.3); color:var(--bz-gold); }
.bz-banner-ok    { background:rgba(52,211,153,0.12); border:1px solid rgba(52,211,153,0.4); color:#8be095; }
.bz-banner-err   { background:rgba(239,107,107,0.12); border:1px solid rgba(239,107,107,0.4); color:#ff8b85; }
.bz-banner-warn  { background:rgba(240,173,78,0.12); border:1px solid rgba(240,173,78,0.4); color:#f0ad4e; }

/* Component: meta text (secondary info line) */
.bz-meta         { font-size:11px; color:var(--bz-text-muted); margin-top:4px; }

/* Component: section divider */
.bz-section-label { font-size:11px; color:var(--bz-text-muted); text-transform:uppercase; letter-spacing:0.5px; margin:0 0 12px; font-weight:600; }

/* Component: tab strip — see Section 5 (line ~295) for .bz-tabs */
.bz-tab          { padding:10px 18px; cursor:pointer; color:var(--bz-text-muted); font-weight:600; font-size:14px; border:0; border-bottom:2px solid transparent; margin-bottom:-2px; background:transparent; transition:color 0.15s, border-color 0.15s; }
.bz-tab:hover    { color:var(--bz-text); }
.bz-tab.active   { color:var(--bz-gold); border-bottom-color:var(--bz-gold); }

/* Component: empty state */
.bz-empty        { color:var(--bz-text-muted); padding:30px; text-align:center; font-style:italic; }

/* Component: help/hint text */
.bz-help         { color:var(--bz-text-muted); font-size:12px; margin-top:4px; }

/* Component: dark form elements (for branding, settings, etc.) */
.bz-form-label   { color:#cbd5e1; display:block; margin-bottom:6px; }
.bz-form-input   { width:100%; background:var(--bz-bg-page); color:var(--bz-text); border:1px solid var(--bz-border); border-radius:6px; padding:10px 12px; }
.bz-form-input:focus { border-color:var(--bz-gold); outline:none; }
.bz-form-hint    { color:var(--bz-text-muted); margin:4px 0 0; font-size:11px; }
.bz-form-grid    { display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.bz-form-color   { width:100%; height:42px; background:var(--bz-bg-page); border:1px solid var(--bz-border); border-radius:6px; }
.bz-form-textarea { width:100%; background:var(--bz-bg-page); color:var(--bz-text); border:1px solid var(--bz-border); border-radius:6px; padding:10px 12px; font-family:monospace; font-size:13px; }
.bz-form-file    { width:100%; color:#cbd5e1; font-size:13px; }

/* Component: feature group header row */
.bz-fg-header    { background:rgba(249,193,39,0.08); border-top:2px solid var(--bz-gold); }
.bz-fg-header td { padding:14px 18px; vertical-align:middle; }
.bz-fg-icon      { font-size:1.25rem; color:var(--bz-gold); margin-right:10px; vertical-align:middle; }
.bz-fg-label     { font-weight:600; font-size:0.95rem; color:#fff; text-transform:uppercase; letter-spacing:0.5px; }

/* Component: icon cell (features table) */
.bz-icon-cell    { font-size:1.1rem; }

/* Alignment helper */
.bz-valign-mid   { vertical-align:middle !important; }

/* Component: KPI grid (dashboard pages) */
.bz-kpi-grid     { display:grid; grid-template-columns:repeat(5,1fr); gap:12px; }
@media (max-width:991px) { .bz-kpi-grid { grid-template-columns:repeat(3,1fr); } }
@media (max-width:575px) { .bz-kpi-grid { grid-template-columns:1fr 1fr; } }

/* Component: dashboard split (2fr 1fr) */
.bz-dash-split   { display:grid; grid-template-columns:2fr 1fr; gap:16px; }
@media (max-width:767px) { .bz-dash-split { grid-template-columns:1fr; } }

/* Component: invoice/summary row */
.bz-invoice-row  { display:flex; justify-content:space-between; padding:8px 0; }

/* Component: keyword pill */
.bz-kw-pill      { display:inline-block; border-radius:20px; padding:4px 12px; margin:3px 2px; font-size:0.83rem; }
.bz-kw-high      { background:rgba(52,211,153,0.16); color:#69d575; }
.bz-kw-medium    { background:rgba(249,193,39,0.16); color:var(--bz-gold); }

/* =================================================================
   Inline booking datepicker (appointment add/edit form)
   Scoped under .appointment_datepicker so it tunes the inline jQuery-UI
   calendar (arrow position / title) WITHOUT !important — the descendant
   selector outranks the global .ui-datepicker base in admin_default.css.
   (Relocated here from a per-page <style> block in appointments.php.)
   ================================================================= */
.appointment_datepicker .ui-datepicker-header { position: relative; }
.appointment_datepicker .ui-datepicker-prev:after,
.appointment_datepicker .ui-datepicker-next:after { top: 25px; }
.appointment_datepicker .ui-datepicker-prev:hover,
.appointment_datepicker .ui-datepicker-next:hover,
.appointment_datepicker .ui-datepicker-prev:hover:after,
.appointment_datepicker .ui-datepicker-next:hover:after { border-color: #000000; }
.appointment_datepicker .ui-datepicker-title { text-align: center; padding-top: 6px; font-size: 15px; }

/* jQuery-UI datepicker popup. The app doesn't load jquery-ui's base CSS, so the
   #ui-datepicker-div that jQuery-UI appends to <body> defaults to display:block
   and renders an empty ~22px box in normal flow at the page bottom — which makes
   datatable list pages scroll and unpins the fixed header. Restore the intended
   default (hidden + absolutely positioned). jQuery sets display:block + top/left
   inline when the picker opens, which overrides this. One global rule, no !important. */
#ui-datepicker-div { display: none; position: absolute; }

/* FullCalendar dark-theme fix: the scrollgrid header section's wrapper <td>
   inherits a white background from the global table styling, which hid the
   white day-name labels (Sun–Sat). Make the header cells transparent so the
   dark card shows through and the labels are legible. */
#calendar .fc-scrollgrid-section-header > td { background: transparent; }
#calendar .fc-col-header-cell { background: rgba(255,255,255,0.04); }

/* Replace FullCalendar's harsh default grid lines (#ddd) with a soft dark-theme
   border, and tint "today" with a subtle gold instead of the default yellow.
   These are FullCalendar v5's own theme variables — one source for every line. */
#calendar {
    --fc-border-color: rgba(255,255,255,0.08);
    --fc-today-bg-color: rgba(249,193,39,0.10);
    --fc-page-bg-color: transparent;
    --fc-neutral-bg-color: transparent;
}

/* Calendar header = the canonical list_area card-header (frame, padding, no
   divider, nav-tabs reset all inherited from .card.list_area in
   global-datatable.css). cal-cardhead adds ONLY the 3-column grid so the month
   title sits dead-centre between the tabs (left) and the view controls (right). */
.cal-cardhead { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; column-gap: 10px; }
.cal-cardhead > .nav-tabs { justify-self: start; }
.cal-cardhead > [role="group"] { justify-self: end; }
/* #id + !important beats the blanket `.content-wrapper span{color:#fff}` so the
   month title renders brand gold, not white. */
.cal-cardhead #cal-title { text-align: center; color: var(--bz-gold) !important; font-size: 1.05rem; }
.cal-cardbody { padding: 6px 10px !important; }
/* Mobile/tablet: the 3-col grid can't fit tabs + title + 6 controls, so the
   tabs split across two lines and the controls overflow the right edge. Stack
   into one centered column — tabs (List|Calendar together) on row 1, month
   title on row 2, the nav/view controls wrapping centered on row 3. */
@media (max-width: 767.98px) {
  .cal-cardhead { grid-template-columns: 1fr; row-gap: 8px; justify-items: center; }
  .cal-cardhead > .nav-tabs,
  .cal-cardhead > [role="group"] { justify-self: center; }
  .cal-cardhead > [role="group"] { flex-wrap: wrap; justify-content: center; }
}

/* ── Report-page section helpers (analytics pages marked .bz-report) ── */
.bz-report-section-title { color: var(--bz-gold); }
.bz-report-section-badge { font-size: 0.9rem; }
.bz-report-divider { border-top: 2px solid var(--bz-gold); margin-top: 8px; }

.bz-report-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(220px, 1fr)); gap:16px; }

.bz-row-unowned{background-color:#ffff0024;}

/* Client Notes — de-inlined utilities */
.bz-grab{cursor:grab;}
.bz-fs-2xs{font-size:10px;}
.bz-mw-280{max-width:280px;}
.bz-note-thumb{width:80px;height:80px;object-fit:cover;border-radius:6px;border:1px solid var(--bz-border);}
.bz-note-thumb-del{top:2px;right:2px;padding:1px 5px;}

/* Loyalty + general dashboard bits */
.bz-stat-num{font-size:28px;margin-top:6px;line-height:1.1;}
.bz-level-dot{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:4px;vertical-align:middle;}
.bz-perks{list-style:none;padding-left:0;margin:0;}
.bz-perks li{font-size:13px;margin-bottom:5px;color:var(--bz-text);}
.bz-color-input{height:38px;padding:4px;cursor:pointer;}

/* ── Bootstrap 4 custom-file-label — dark-theme override ──────────────────
   The default white background + forced white text creates 1:1 contrast.
   Override to match the admin's dark input style.                          */
.custom-file-label {
  background: var(--bz-input-bg, #2a3142) !important;
  color: var(--bz-text, #cfd5e3) !important;
  border-color: var(--bz-input-border, #3a4250) !important;
}
.custom-file-label::after {
  background: var(--bz-card-3, #313a4e) !important;
  color: var(--bz-text, #cfd5e3) !important;
  border-color: var(--bz-input-border, #3a4250) !important;
}

/* ── Tier/loyalty level badges ─────────────────────────────────────────────
   The blanket `.content-wrapper span { color:#fff !important }` rule in
   global-sidebar.css overrides inline colour attributes.  These tier badges
   carry dynamic bg colours chosen by the tenant but always need dark text
   so the badge name is readable on bright (gold / silver / bronze) fills.
   Using !important with higher specificity beats the blanket rule.         */
.content-wrapper .bz-tier-badge {
  color: #1a1a1a !important;
}

/* ── Mock browser URL bar in Embedded Code page ────────────────────────────
   The .mUrlText span inherits the mock-browser white background → white
   text on white = 1:1.  Give it a real dark colour.
   Specificity 0,2,0 beats blanket .content-wrapper span at 0,1,1.          */
.content-wrapper .mUrlText {
  color: #1a1a2e !important;
}

/* ── Giftcard "Manual" badge ────────────────────────────────────────────────
   .badge-light has near-white background (#f8f9fa).  Blanket rule forces
   white text on it = 1.05:1.  Override to use dark text.                   */
.content-wrapper .badge-light {
  color: #1a1a2e !important;
}

/* ── .bg-light islands — dark text reset ────────────────────────────────────
   Bootstrap .bg-light (#f8f9fa) is used for light-background sections
   (event ticket blocks, addon plan rows, etc.).  The blanket rule in
   global-sidebar.css forces all spans/labels/small to white, making text
   invisible on the light background.  Override to dark for text inside
   .bg-light.
   IMPORTANT: .card.bg-light is DARK in the admin theme (rgb(22,27,34)) — those
   cards already get white text from the blanket rule which is correct.  Using
   :not(.card) excludes them so we only reset on genuinely light containers
   (ticket divs, plan-row divs, etc.) where the background actually is #f8f9fa.
   Specificity: selector has 2 or 3 class components — beats blanket 0,1,1 rule.   */
.content-wrapper .bg-light:not(.card) label,
.content-wrapper .bg-light:not(.card) p,
.content-wrapper .bg-light:not(.card) small,
.content-wrapper .bg-light:not(.card) span:not(.badge),
.content-wrapper .bg-light:not(.card) div,
.content-wrapper .bg-light:not(.card) .text-muted,
.content-wrapper .bg-light:not(.card) strong,
.content-wrapper .bg-light:not(.card) em {
  color: #1a1a2e !important;
}

/* ── Danger buttons on light island backgrounds ──────────────────────────────
   --bz-danger (#ef6b6b) is calibrated for the dark admin surface but reads
   at only ~2.7:1 on Bootstrap .bg-light (#f8f9fa).  Use a WCAG-AA dark red
   (#b71c1c = 6.1:1 on white) when the danger button sits inside a light card.
   Specificity 0,3,0 beats a.bz-btn-danger at 0,1,1 even with !important.  */
.content-wrapper .bg-light:not(.card) .bz-btn-danger,
.content-wrapper .bg-white:not(.card) .bz-btn-danger {
  color: #b71c1c !important;
  border-color: rgba(183, 28, 28, 0.45) !important;
}

/* ── badge-success on light-bg islands ──────────────────────────────────────
   In the add-on store, badge-success can inherit a gold-tinted transparent
   background (rgba(249,193,39,0.15)) that renders as a cream over bg-light.
   White text on cream = ~1.1:1.  Use a real dark-green badge on light islands. */
.content-wrapper .bg-light:not(.card) .badge-success,
.content-wrapper .bg-white:not(.card) .badge-success {
  background-color: #1a7c34 !important;  /* 4.8:1 vs white */
  color: #fff !important;
}

/* ── Select2 multi-select pills ─────────────────────────────────────────────
   admin_default.css has .select2-container--default .select2-selection--multiple
   .select2-selection__choice { background:#007bff !important } = specificity (0,3,0).
   White on #007bff = 3.74:1 — fails 4.5:1.  Darker blue gives 6.4:1.
   Selector uses 4 classes (0,4,0) to beat admin_default's (0,3,0) !important.  */
.content-wrapper .select2-container--default
  .select2-selection--multiple .select2-selection__choice {
  background-color: #0056b3 !important;
  color: #fff !important;
  border-color: #004898 !important;
}
.content-wrapper .select2-container--default
  .select2-selection--multiple .select2-selection__choice__remove {
  color: rgba(255,255,255,0.75) !important;
  border-right: 1px solid rgba(255,255,255,0.3) !important;
}

/* ── Font-preview panel (company logo page) ─────────────────────────────────
   .font-preview label has background:#f1f1f1 (inline style in the view).
   Blanket white rule makes the business name (font-sample span) invisible.  */
/* .font-preview label: 0,1,1 — matches blanket; wins via later source order.
   .font-sample span: needs 0,2,0 to beat .content-wrapper span at 0,1,1.   */
.font-preview label {
  color: #1a1a2e !important;
}
.font-preview .font-sample {
  color: #1a1a2e !important;
}

/* ── .badge-secondary dark-theme override ───────────────────────────────────
   Default .badge-secondary bg is rgba(108,117,125,0.15) ≈ near-transparent
   on dark admin.  White text on the near-transparent overlay reads at ~1:1.
   Use the solid muted bg token and ensure readable text.                    */
.content-wrapper .badge-secondary {
  background-color: var(--bz-card-3, #313a4e) !important;
  color: var(--bz-text, #cfd5e3) !important;
}

/* ── jQuery UI datepicker header ────────────────────────────────────────────
   Bootstrap primary blue #007bff gives white text 4.01:1 (below 4.5:1 AA).
   Darken the header background to clear the threshold.                      */
.ui-datepicker .ui-datepicker-header {
  background: #0056b3 !important;
}

/* ── <code> / <pre> colour in inbox ────────────────────────────────────────
   Bootstrap inline code uses Bootstrap pink #e83e8c on the dark admin
   background #1f2630 → ~3.99:1 (just under 4.5:1 AA).  Lighten slightly.  */
.content-wrapper code {
  color: #f08db2 !important;
}