/* ================================================================
   BMS Client CSS — Theme System (different design from admin)
   ================================================================ */

/* ── CSS Variables: Dark Theme ───────────────────────────────── */
:root,
body.theme-dark {
    --bms-bg:              #0f1117;
    --bms-surface:         #1a1f2e;
    --bms-surface-2:       #222736;
    --bms-surface-3:       #2a3047;
    --bms-border:          #2e3650;
    --bms-border-light:    #3a4460;

    --bms-sidebar-bg:      #1a1f2e;
    --bms-sidebar-border:  #2e3650;
    --bms-sidebar-text:    #a8b3cf;
    --bms-sidebar-heading: #5a6a8a;
    --bms-sidebar-active-bg:   rgba(79,110,247,0.15);
    --bms-sidebar-active-text: #ffffff;
    --bms-sidebar-hover-bg:    rgba(255,255,255,0.05);
    --bms-sidebar-icon:    #6b7ca8;

    --bms-topbar-bg:       #1a1f2e;
    --bms-topbar-border:   #2e3650;

    --bms-text:            #e2e8f4;
    --bms-text-muted:      #7a8aaa;   /* Core 1.88.0 — was #6e7681: too dim on the dark surfaces */
    --bms-text-soft:       #a8b3cf;
    --bms-heading:         #ffffff;

    --bms-input-bg:        #222736;
    --bms-input-border:    #3a4460;
    --bms-input-text:      #e2e8f4;
    --bms-input-placeholder: #7a8aaa;
    --bms-input-focus-border: var(--bms-accent);

    --bms-table-head-bg:   #222736;
    --bms-table-row-hover: rgba(79,110,247,0.06);
    --bms-table-border:    #2e3650;

    --bms-card-bg:         #1a1f2e;
    --bms-card-border:     #2e3650;
    --bms-card-shadow:     0 6px 20px rgba(0,0,0,0.45), 0 2px 6px rgba(0,0,0,0.35);

    /* Core 1.88.0 — the accent is NOT set per theme (see the :root block below): a theme block is more
       specific than :root, so it overrode the person's own accent and drew white text on light blue. */

    --bms-success:         #22c55e;
    --bms-success-soft:    rgba(34,197,94,0.12);
    --bms-danger:          #ef4444;
    --bms-danger-soft:     rgba(239,68,68,0.12);
    --bms-warning:         #f59e0b;
    --bms-warning-soft:    rgba(245,158,11,0.12);
    --bms-info:            #06b6d4;
    --bms-info-soft:       rgba(6,182,212,0.12);

    --bms-sidebar-width:   260px;
    --bms-topbar-height:   60px;
    --bms-transition:      0.2s ease;
    --bms-radius:          8px;
    --bms-radius-sm:       4px;

    --bms-impersonation-bar: #b45309;

    --bms-scrollbar-track: #1a1f2e;
    --bms-scrollbar-thumb: #2e3650;
}

/* Core 1.88.1 (Stephen, 16 Oct 2026: "maintain the brand color blue") — the client area's blue, per theme.
   Core 1.93.1 — the blue of mockups/client-area-a.html (the BMS palette in admin.css), so the built client
   area matches the mockup Stephen picked. A client who picked their own accent gets it from the layout. */
:root,
body.theme-dark {
    --bms-accent:          #4f6ef7;
    --bms-accent-hover:    #3d5ce6;
    --bms-accent-soft:     rgba(79,110,247,0.15);
    --bms-on-accent:       #ffffff;
}
body.theme-light {
    --bms-accent:          #4f6ef7;
    --bms-accent-hover:    #3d5ce6;
    --bms-accent-soft:     rgba(79,110,247,0.12);
    --bms-on-accent:       #ffffff;
}

/* ── CSS Variables: Light Theme ──────────────────────────────── */
body.theme-light {
    --bms-bg:              #e4e9f0;
    --bms-surface:         #ffffff;
    --bms-surface-2:       #f8fafc;
    --bms-surface-3:       #f1f5f9;
    --bms-border:          #e2e8f0;
    --bms-border-light:    #cbd5e1;

    --bms-sidebar-bg:      #1a1f2e;
    --bms-sidebar-border:  #2e3650;
    --bms-sidebar-text:    #a8b3cf;
    --bms-sidebar-heading: #5a6a8a;
    --bms-sidebar-active-bg:   rgba(79,110,247,0.18);
    --bms-sidebar-active-text: #ffffff;
    --bms-sidebar-hover-bg:    rgba(255,255,255,0.08);
    --bms-sidebar-icon:    #6b7ca8;

    --bms-topbar-bg:       #ffffff;
    --bms-topbar-border:   #e2e8f0;

    --bms-text:            #334155;
    --bms-text-muted:      #64748b;
    --bms-text-soft:       #475569;
    --bms-heading:         #0f172a;

    --bms-input-bg:        #ffffff;
    --bms-input-border:    #cbd5e1;
    --bms-input-text:      #334155;
    --bms-input-placeholder: #94a3b8;
    --bms-input-focus-border: var(--bms-accent);

    --bms-table-head-bg:   #f8fafc;
    --bms-table-row-hover: rgba(79,110,247,0.04);
    --bms-table-border:    #e2e8f0;

    --bms-card-bg:         #ffffff;
    --bms-card-border:     #e2e8f0;
    --bms-card-shadow:     0 4px 16px rgba(15,23,42,0.10), 0 1px 4px rgba(15,23,42,0.06);


    --bms-success:         #16a34a;
    --bms-success-soft:    rgba(22,163,74,0.10);
    --bms-danger:          #dc2626;
    --bms-danger-soft:     rgba(220,38,38,0.10);
    --bms-warning:         #d97706;
    --bms-warning-soft:    rgba(217,119,6,0.10);
    --bms-info:            #0891b2;
    --bms-info-soft:       rgba(8,145,178,0.10);
}

/* ── Reset ───────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

body {
    margin: 0;
    padding: 0;
    background-color: var(--bms-bg);
    color: var(--bms-text);
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Inter', sans-serif;
    font-size: 0.9rem;
    line-height: 1.6;
}

/* ── Layout ──────────────────────────────────────────────────── */
.bms-client-shell {
    display: flex;
    min-height: 100vh;
}

/* Impersonation bar */
.bms-impersonation-bar {
    background-color: var(--bms-impersonation-bar);
    color: #fff;
    text-align: center;
    padding: 7px 16px;
    font-size: 0.82rem;
    font-weight: 500;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    position: sticky;
    top: 0;
    z-index: 9999;
}

.bms-impersonation-bar a {
    color: #ffe0b2;
    font-weight: 700;
    text-decoration: none;
}

/* ── Client Sidebar ──────────────────────────────────────────── */
.bms-client-sidebar {
    width: var(--bms-sidebar-width);
    min-height: 100vh;
    background-color: var(--bms-sidebar-bg);
    border-right: 1px solid var(--bms-sidebar-border);
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 1040;
    transition: transform var(--bms-transition);
    overflow: hidden;
}

.bms-client-sidebar-logo {
    padding: 16px 20px;
    border-bottom: 1px solid var(--bms-sidebar-border);
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: var(--bms-topbar-height);
}

.bms-client-sidebar-logo img {
    width: 30px;
    height: 30px;
    object-fit: contain;
}

.bms-client-sidebar-logo-text {
    font-size: 1rem;
    font-weight: 700;
    color: #fff;
}

.bms-client-nav {
    flex: 1;
    overflow-y: auto;
    padding: 12px 0;
    scrollbar-width: thin;
    scrollbar-color: var(--bms-scrollbar-thumb) transparent;
}

.bms-client-nav::-webkit-scrollbar { width: 3px; }
.bms-client-nav::-webkit-scrollbar-thumb { background: var(--bms-scrollbar-thumb); }

.bms-client-nav-label {
    padding: 10px 18px 4px;
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--bms-sidebar-heading);
}

.bms-client-nav-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 18px;
    color: var(--bms-sidebar-text);
    text-decoration: none;
    font-size: 0.875rem;
    transition: background-color var(--bms-transition), color var(--bms-transition);
    border-left: 3px solid transparent;
}

.bms-client-nav-link:hover {
    background-color: var(--bms-sidebar-hover-bg);
    color: #cdd9e5;
    text-decoration: none;
}

.bms-client-nav-link.active {
    background-color: var(--bms-sidebar-active-bg);
    color: var(--bms-sidebar-active-text);
    border-left-color: var(--bms-accent);
    font-weight: 500;
}

.bms-client-nav-link i {
    font-size: 0.95rem;
    color: var(--bms-sidebar-icon);
    width: 18px;
    text-align: center;
    flex-shrink: 0;
}

.bms-client-nav-link:hover i,
.bms-client-nav-link.active i {
    color: var(--bms-accent);
}

/* Sidebar user section */
.bms-client-sidebar-user {
    padding: 12px 16px;
    border-top: 1px solid var(--bms-sidebar-border);
    display: flex;
    align-items: center;
    gap: 10px;
}

.bms-client-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background-color: var(--bms-accent);
    color: #fff;
    font-size: 0.78rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.bms-client-user-name {
    font-size: 0.84rem;
    font-weight: 500;
    color: #cdd9e5;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.bms-client-user-email {
    font-size: 0.72rem;
    color: var(--bms-sidebar-icon);
}

/* ── Client Main ─────────────────────────────────────────────── */
.bms-client-main {
    margin-left: var(--bms-sidebar-width);
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

/* Topbar */
.bms-client-topbar {
    height: var(--bms-topbar-height);
    background-color: var(--bms-topbar-bg);
    border-bottom: 1px solid var(--bms-topbar-border);
    display: flex;
    align-items: center;
    padding: 0 24px;
    gap: 14px;
    position: sticky;
    top: 0;
    z-index: 1030;
}

.bms-client-topbar-title {
    flex: 1;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--bms-heading);
}

.bms-client-topbar-btn {
    background: none;
    border: none;
    color: var(--bms-text-muted);
    font-size: 1.05rem;
    cursor: pointer;
    padding: 6px;
    border-radius: var(--bms-radius-sm);
    transition: all var(--bms-transition);
}

.bms-client-topbar-btn:hover {
    background-color: var(--bms-surface-3);
    color: var(--bms-accent);
}

.bms-client-content {
    flex: 1;
    padding: 24px;
}

/* Re-use shared components from admin.css (cards, tables, badges, btns, etc.) */
/* Import admin.css or duplicate needed parts below */

.bms-card {
    background-color: var(--bms-card-bg);
    border: 1px solid var(--bms-card-border);
    border-radius: var(--bms-radius);
    box-shadow: var(--bms-card-shadow);
    overflow: hidden;
}

.bms-card-header {
    padding: 14px 18px;
    border-bottom: 1px solid var(--bms-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.bms-card-title {
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--bms-heading);
    margin: 0;
}

.bms-card-body { padding: 18px; }

.bms-card-footer {
    padding: 14px 18px;
    border-top: 1px solid var(--bms-border);
    background-color: var(--bms-surface-2);
}

.bms-table-wrap {
    overflow-x: auto;
    border-radius: var(--bms-radius);
    border: 1px solid var(--bms-table-border);
}

.bms-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
}

.bms-table thead th {
    background-color: var(--bms-table-head-bg);
    color: var(--bms-text-muted);
    font-weight: 600;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 10px 14px;
    border-bottom: 1px solid var(--bms-table-border);
    text-align: left;
}

.bms-table tbody td {
    padding: 11px 14px;
    border-bottom: 1px solid var(--bms-table-border);
    color: var(--bms-text);
    vertical-align: middle;
}

.bms-table tbody tr:last-child td { border-bottom: none; }
.bms-table tbody tr:hover td { background-color: var(--bms-table-row-hover); }

.bms-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 20px;
    font-size: 0.71rem;
    font-weight: 600;
}

.bms-badge-success  { background-color: var(--bms-success-soft); color: var(--bms-success); }
.bms-badge-danger   { background-color: var(--bms-danger-soft);  color: var(--bms-danger); }
.bms-badge-warning  { background-color: var(--bms-warning-soft); color: var(--bms-warning); }
.bms-badge-info     { background-color: var(--bms-info-soft);    color: var(--bms-info); }
.bms-badge-accent   { background-color: var(--bms-accent-soft);  color: var(--bms-accent); }

.bms-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 15px;
    border-radius: var(--bms-radius-sm);
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    border: 1px solid transparent;
    transition: all var(--bms-transition);
    text-decoration: none;
}

.bms-btn-primary { background-color: var(--bms-accent); color: #fff; border-color: var(--bms-accent); }
.bms-btn-primary:hover { background-color: var(--bms-accent-hover); color: #fff; text-decoration: none; }
/* shared views (Post Studio) use the admin name for the same button */
.bms-btn-accent { background-color: var(--bms-accent); color: #fff; border-color: var(--bms-accent); }
.bms-btn-accent:hover { background-color: var(--bms-accent-hover); color: #fff; text-decoration: none; }
.bms-btn-outline { background: transparent; color: var(--bms-text); border-color: var(--bms-border); }
.bms-btn-outline:hover { border-color: var(--bms-accent); color: var(--bms-accent); text-decoration: none; }
.bms-btn-sm { padding: 4px 10px; font-size: 0.8rem; }

.bms-input, .bms-select, .bms-textarea {
    display: block;
    width: 100%;
    padding: 8px 12px;
    background-color: var(--bms-input-bg);
    border: 1px solid var(--bms-input-border);
    border-radius: var(--bms-radius-sm);
    color: var(--bms-input-text);
    font-size: 0.875rem;
    outline: none;
    transition: border-color var(--bms-transition), box-shadow var(--bms-transition);
}

.bms-input:focus, .bms-select:focus, .bms-textarea:focus {
    border-color: var(--bms-accent);
    box-shadow: 0 0 0 3px var(--bms-accent-soft);
}

.bms-label {
    display: block;
    margin-bottom: 5px;
    font-size: 0.83rem;
    font-weight: 500;
    color: var(--bms-text-soft);
}

.bms-form-group { margin-bottom: 16px; }
.bms-help-text { font-size: 0.77rem; color: var(--bms-text-muted); margin-top: 3px; }
.bms-error-text { font-size: 0.77rem; color: var(--bms-danger); margin-top: 3px; }

.bms-alert {
    padding: 11px 14px;
    border-radius: var(--bms-radius-sm);
    font-size: 0.875rem;
    margin-bottom: 14px;
    border-left: 3px solid;
}

.bms-alert-success { background: var(--bms-success-soft); color: var(--bms-success); border-color: var(--bms-success); }
.bms-alert-danger  { background: var(--bms-danger-soft);  color: var(--bms-danger);  border-color: var(--bms-danger); }
.bms-alert-warning { background: var(--bms-warning-soft); color: var(--bms-warning); border-color: var(--bms-warning); }
.bms-alert-info    { background: var(--bms-info-soft);    color: var(--bms-info);    border-color: var(--bms-info); }

.bms-tabs {
    display: flex;
    border-bottom: 1px solid var(--bms-border);
    margin-bottom: 20px;
    gap: 0;
    overflow-x: auto;
    scrollbar-width: none;
}

.bms-tab-link {
    padding: 9px 16px;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--bms-text-muted);
    cursor: pointer;
    border-bottom: 2px solid transparent;
    white-space: nowrap;
    transition: color var(--bms-transition), border-color var(--bms-transition);
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 6px;
}

.bms-tab-link:hover { color: var(--bms-text); text-decoration: none; }
.bms-tab-link.active { color: var(--bms-accent); border-bottom-color: var(--bms-accent); }

.bms-tab-pane { display: none; }
.bms-tab-pane.active { display: block; }

/* Page header */
.bms-page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
    gap: 12px;
    flex-wrap: wrap;
}

.bms-page-title {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--bms-heading);
    margin: 0;
}

.bms-divider { border: none; border-top: 1px solid var(--bms-border); margin: 14px 0; }

/* Responsive */
@media (max-width: 767px) {
    .bms-client-sidebar {
        transform: translateX(calc(-1 * var(--bms-sidebar-width)));
    }
    .bms-client-sidebar.mobile-open {
        transform: translateX(0);
    }
    .bms-client-main {
        margin-left: 0;
    }
}

/* Stat tiles (Core 1.72.0) — the same info card as the admin area
   (admin.css): icon chip, soft tinted corner, ONE colour — the primary. */
.bms-stat-card {
    position: relative;
    overflow: hidden;
    background-color: var(--bms-card-bg);
    border: 1px solid var(--bms-card-border);
    border-radius: 16px;
    padding: 16px 18px;
    display: flex;
    align-items: center;
    gap: 14px;
    box-shadow: var(--bms-card-shadow);
    transition: box-shadow var(--bms-transition), transform var(--bms-transition);
}
.bms-stat-card::after {
    content: "";
    position: absolute;
    right: -30px;
    top: -30px;
    width: 110px;
    height: 110px;
    border-radius: 50%;
    background-color: color-mix(in srgb, var(--bms-accent) 9%, transparent);
    pointer-events: none;
}
.bms-stat-card > * { position: relative; z-index: 1; }
.bms-stat-card:hover { transform: translateY(-2px); }
.bms-stat-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
    flex-shrink: 0;
    background-color: color-mix(in srgb, var(--bms-accent) 14%, transparent);
    color: var(--bms-accent);
}
.bms-stat-value { font-size: 1.3rem; font-weight: 800; color: var(--bms-heading); line-height: 1.1; letter-spacing: -0.01em; }
.bms-stat-label { font-size: 0.78rem; color: var(--bms-text-muted); margin-top: 3px; }

/* ── Bootstrap follows the BMS theme (Core 1.73.0 — same block as admin.css) ────────────────
   Older module pages use Bootstrap classes (.form-control, .dropdown-menu,
   .modal-content, .list-group, .alert, .bg-white, .text-dark …). Bootstrap
   draws those from its own light palette, so in the dark theme they came out
   as white boxes and black text. Here Bootstrap's variables are pointed at
   the BMS tokens, so every Bootstrap part follows the theme — dark and light. */
body.theme-dark { color-scheme: dark; }
body.theme-light { color-scheme: light; }
body.theme-dark,
body.theme-light {
    --bs-body-bg: var(--bms-card-bg);
    --bs-body-color: var(--bms-text);
    --bs-emphasis-color: var(--bms-heading);
    --bs-heading-color: var(--bms-heading);
    --bs-secondary-color: var(--bms-text-muted);
    --bs-tertiary-color: var(--bms-text-muted);
    --bs-secondary-bg: var(--bms-surface-2);
    --bs-tertiary-bg: var(--bms-surface-2);
    --bs-border-color: var(--bms-border);
    --bs-border-color-translucent: var(--bms-border);
    --bs-link-color: var(--bms-accent);
    --bs-link-hover-color: var(--bms-accent-hover);
    --bs-primary-text-emphasis: var(--bms-accent);
    --bs-primary-bg-subtle: var(--bms-accent-soft);
    --bs-primary-border-subtle: color-mix(in srgb, var(--bms-accent) 35%, transparent);
    --bs-success-text-emphasis: var(--bms-success);
    --bs-success-bg-subtle: var(--bms-success-soft);
    --bs-success-border-subtle: color-mix(in srgb, var(--bms-success) 35%, transparent);
    --bs-danger-text-emphasis: var(--bms-danger);
    --bs-danger-bg-subtle: var(--bms-danger-soft);
    --bs-danger-border-subtle: color-mix(in srgb, var(--bms-danger) 35%, transparent);
    --bs-warning-text-emphasis: var(--bms-warning);
    --bs-warning-bg-subtle: var(--bms-warning-soft);
    --bs-warning-border-subtle: color-mix(in srgb, var(--bms-warning) 35%, transparent);
    --bs-info-text-emphasis: var(--bms-info);
    --bs-info-bg-subtle: var(--bms-info-soft);
    --bs-info-border-subtle: color-mix(in srgb, var(--bms-info) 35%, transparent);
    --bs-secondary-text-emphasis: var(--bms-text-soft);
    --bs-secondary-bg-subtle: var(--bms-surface-2);
    --bs-secondary-border-subtle: var(--bms-border);
    --bs-light-text-emphasis: var(--bms-text);
    --bs-light-bg-subtle: var(--bms-surface-2);
    --bs-light-border-subtle: var(--bms-border);
    --bs-dark-text-emphasis: var(--bms-text);
    --bs-dark-bg-subtle: var(--bms-surface-3);
    --bs-dark-border-subtle: var(--bms-border);
}

/* Form fields: always the BMS input colours. */
body.theme-dark .form-control, body.theme-dark .form-select,
body.theme-light .form-control, body.theme-light .form-select,
body.theme-dark .input-group-text, body.theme-light .input-group-text {
    background-color: var(--bms-input-bg);
    border-color: var(--bms-input-border);
    color: var(--bms-input-text);
}
body.theme-dark .form-control:focus, body.theme-dark .form-select:focus,
body.theme-light .form-control:focus, body.theme-light .form-select:focus {
    background-color: var(--bms-input-bg);
    color: var(--bms-input-text);
    border-color: var(--bms-input-focus-border);
}
body.theme-dark .form-control::placeholder, body.theme-light .form-control::placeholder { color: var(--bms-input-placeholder); }
body.theme-dark .form-control:disabled, body.theme-dark .form-select:disabled,
body.theme-dark .form-control[readonly] { background-color: var(--bms-surface-2); color: var(--bms-text-soft); }
body.theme-dark .input-group-text { background-color: var(--bms-surface-2); color: var(--bms-text-soft); }
body.theme-dark .form-select {
    --bs-form-select-bg-img: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23a8b3cf' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
}
body.theme-dark .form-check-input:not(:checked) { background-color: var(--bms-input-bg); border-color: var(--bms-input-border); }
body.theme-dark .btn-close { filter: invert(1) grayscale(100%) brightness(200%); }

/* Plain inputs with no class (hand-made markup) follow the theme too. */
body.theme-dark input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):not([type=file]):not([type=submit]):not([type=button]):not([class]),
body.theme-dark select:not([class]),
body.theme-dark textarea:not([class]) {
    background-color: var(--bms-input-bg);
    border: 1px solid var(--bms-input-border);
    color: var(--bms-input-text);
}

/* Bootstrap colour utilities that assume a white page. In the dark theme
   they follow the BMS surfaces and text instead. */
body.theme-dark .bg-white,
body.theme-dark .bg-light,
body.theme-dark .bg-body,
body.theme-dark .bg-body-tertiary,
body.theme-dark .bg-body-secondary { background-color: var(--bms-surface-2) !important; }
body.theme-dark .text-dark,
body.theme-dark .text-black,
body.theme-dark .text-body,
body.theme-dark .link-dark { color: var(--bms-text) !important; }
body.theme-dark .text-body-emphasis { color: var(--bms-heading) !important; }
body.theme-dark .text-body-secondary { color: var(--bms-text-muted) !important; }
/* Dark text stays dark where it sits on a bright badge or button. */
body.theme-dark .bg-warning.text-dark, body.theme-dark .bg-info.text-dark,
body.theme-dark .text-bg-warning, body.theme-dark .text-bg-info,
body.theme-dark .badge.bg-warning.text-dark { color: var(--bms-bg) !important; }
body.theme-dark .border-light, body.theme-dark .border-white { border-color: var(--bms-border) !important; }
body.theme-dark .table-light, body.theme-dark .table-white {
    --bs-table-bg: var(--bms-table-head-bg);
    --bs-table-color: var(--bms-text);
    --bs-table-border-color: var(--bms-table-border);
    color: var(--bms-text);
}
body.theme-dark .btn-light, body.theme-dark .btn-white {
    --bs-btn-bg: var(--bms-surface-2); --bs-btn-border-color: var(--bms-border); --bs-btn-color: var(--bms-text);
    --bs-btn-hover-bg: var(--bms-surface-3); --bs-btn-hover-border-color: var(--bms-border-light); --bs-btn-hover-color: var(--bms-heading);
    --bs-btn-active-bg: var(--bms-surface-3); --bs-btn-active-color: var(--bms-heading);
}
body.theme-dark .btn-outline-dark, body.theme-dark .btn-outline-secondary {
    --bs-btn-color: var(--bms-text-soft); --bs-btn-border-color: var(--bms-border-light);
    --bs-btn-hover-bg: var(--bms-surface-3); --bs-btn-hover-color: var(--bms-heading); --bs-btn-hover-border-color: var(--bms-border-light);
}
body.theme-dark .list-group-item-light { background-color: var(--bms-surface-2); color: var(--bms-text); }
body.theme-dark .badge.bg-light, body.theme-dark .badge.text-bg-light { background-color: var(--bms-surface-2) !important; color: var(--bms-text-soft) !important; }
body.theme-dark .text-bg-light, body.theme-dark .text-bg-white { background-color: var(--bms-surface-2) !important; color: var(--bms-text) !important; }

/* The shared listing look in the client area too: filter bar (x-filter-bar), pill filters and status dots.
   Same rules as admin.css; client pages (AI Studio, Content calendar, ...) render them unstyled without these. */
.bms-pills { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.bms-pill {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 7px 14px; border-radius: 999px;
    font-size: 0.8rem; font-weight: 600; text-decoration: none;
    color: var(--bms-text-soft); background-color: var(--bms-card-bg); border: 1px solid var(--bms-border);
}
.bms-pill:hover { color: var(--bms-accent); border-color: var(--bms-accent); }
.bms-pill em { font-style: normal; font-size: 0.7rem; padding: 1px 7px; border-radius: 999px; background-color: var(--bms-surface-2); color: var(--bms-text-muted); }
.bms-pill.active { background-color: var(--bms-accent); border-color: var(--bms-accent); color: var(--bms-card-bg); }
.bms-pill.active em { background-color: color-mix(in srgb, var(--bms-card-bg) 25%, transparent); color: var(--bms-card-bg); }
.bms-dot { display: inline-flex; align-items: center; gap: 6px; font-size: 0.76rem; font-weight: 700; padding: 4px 10px; border-radius: 999px; white-space: nowrap;
    color: var(--bms-text-soft); background-color: var(--bms-badge-bg); }
.bms-dot::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background-color: currentColor; }
.bms-dot.success { color: var(--bms-success); background-color: var(--bms-success-soft); }
.bms-dot.danger  { color: var(--bms-danger);  background-color: var(--bms-danger-soft); }
.bms-dot.warning { color: var(--bms-warning); background-color: var(--bms-warning-soft); }
.bms-dot.info    { color: var(--bms-info);    background-color: var(--bms-info-soft); }
.bms-dot.accent  { color: var(--bms-accent);  background-color: var(--bms-accent-soft); }
.bms-fbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--bms-border); }
.bms-fbar-form { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; flex: 1 1 420px; min-width: 0; margin: 0; }
.bms-fbar-search { position: relative; display: flex; align-items: center; flex: 1 1 260px; min-width: 180px; max-width: 460px; margin: 0; }
.bms-fbar-search i { position: absolute; left: 12px; color: var(--bms-text-muted); font-size: 0.85rem; pointer-events: none; }
.bms-fbar-search input { width: 100%; height: 38px; padding: 0 12px 0 34px; border: 1px solid var(--bms-border); border-radius: 10px; background-color: var(--bms-input-bg, var(--bms-card-bg)); color: var(--bms-text); font-size: 0.86rem; }
.bms-fbar-search input:focus { outline: 0; border-color: var(--bms-accent); box-shadow: 0 0 0 3px var(--bms-accent-soft); }
.bms-fbar-select, .bms-fbar .bms-select { width: auto; min-width: 150px; height: 38px; font-size: 0.84rem; border-radius: 10px; }
.bms-fbar-go { height: 38px; }
.bms-fbar-clear { font-size: 0.8rem; font-weight: 600; color: var(--bms-text-muted); text-decoration: none; padding: 0 4px; }
.bms-fbar-clear:hover { color: var(--bms-accent); }
.bms-fbar-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-left: auto; }
.bms-fbar-tags { display: flex; flex-wrap: wrap; gap: 6px; padding: 10px 16px 0; }
.bms-fbar-tag { display: inline-flex; align-items: center; gap: 4px; padding: 3px 6px 3px 10px; border-radius: 999px; font-size: 0.74rem; font-weight: 600; text-decoration: none; color: var(--bms-accent); background-color: var(--bms-accent-soft); }
.bms-fbar-tag:hover { color: var(--bms-accent-hover, var(--bms-accent)); filter: brightness(0.97); }
.bms-card > .bms-fbar:first-child { border-top-left-radius: inherit; border-top-right-radius: inherit; }
@media (max-width: 640px) {
    .bms-fbar-form, .bms-fbar-search { flex-basis: 100%; max-width: none; }
    .bms-fbar-select, .bms-fbar .bms-select { flex: 1 1 auto; min-width: 0; }
    .bms-fbar-actions { margin-left: 0; width: 100%; }
}

/* Labelled row buttons stay on one line in the client area too (same as admin.css). */
.bms-row-actions { display: inline-flex; flex-wrap: nowrap; justify-content: flex-end; gap: 6px; white-space: nowrap; }
.bms-row-actions form { display: inline-flex; margin: 0; }
.bms-row-actions .bms-btn-sm { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; }
.bms-table td.bms-actions-col, .bms-table th.bms-actions-col { text-align: right; width: 1%; white-space: nowrap; }

/* Empty state: a button inside it is a normal button (its icon is not the big empty-state picture). */
.bms-empty-state .bms-btn { display: inline-flex; align-items: center; gap: 6px; width: auto; margin-top: 4px; }
.bms-empty-state .bms-btn i { font-size: inherit; display: inline; margin: 0; opacity: 1; color: inherit; }

/* Same header section switcher as admin.css (the BMS menu pattern), for client pages. */
/* ── Header section switcher ─────────────────────────────────────
   The section links for a page group (Jobs / Applicants / Interviews
   and friends) sit on the page-header line rather than in a bordered
   strip under the title. .bms-header-actions IS the track: one
   continuous near-white, thinly outlined group holding the section
   segments and, last in the row, the page's primary action — no gap
   between the track and the button. Exactly one accent block per
   group: the action is the filled one, so the selected section reads
   as selected by a light filled segment, not a second accent block. */
.bms-header-actions {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 2px;
    max-width: 100%;
    padding: 3px;
    background-color: var(--bms-surface-2);
    border: 1px solid var(--bms-border);
    border-radius: 999px;
}

/* The nav inside the group carries no track of its own — the group is the
   track. Written with the .bms-header-actions ancestor so it outranks
   Bootstrap's .nav on the Config page on specificity alone, whichever
   stylesheet the browser loaded last. */
.bms-header-actions .bms-seg-pill {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 2px;
    max-width: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
    background-color: transparent;
    border: 0;
}

.bms-header-actions .bms-seg-pill .nav-item {
    list-style: none;
    margin: 0;
}

/* Three classes deep, so it beats Bootstrap's .nav-tabs .nav-link on the
   Config page, where the segments stay real Bootstrap tab buttons. */
.bms-header-actions .bms-seg-pill .bms-seg {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 30px;
    padding: 0 14px;
    border: 0;
    background-color: transparent;
    border-radius: 999px;
    font-size: 0.82rem;
    font-weight: 600;
    line-height: 1.2;
    color: var(--bms-text-muted);
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color var(--bms-transition), color var(--bms-transition);
}

.bms-header-actions .bms-seg-pill .bms-seg:hover {
    color: var(--bms-text);
    text-decoration: none;
}

/* Four classes deep — outranks .nav-tabs/.nav-pills .nav-link.active. */
.bms-header-actions .bms-seg-pill .bms-seg.active,
.bms-header-actions .bms-seg-pill .bms-seg.active:hover {
    background-color: var(--bms-surface);
    color: var(--bms-accent);
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.12), 0 0 0 1px var(--bms-border);
}

.bms-header-actions .bms-seg-pill .bms-seg:focus-visible {
    outline: 2px solid var(--bms-accent);
    outline-offset: 2px;
}

/* The primary action is the last segment of the same group: same height,
   same pill radius, flush inside the track with no shadow spilling out. */
.bms-header-actions > .bms-btn {
    min-height: 30px;
    padding: 0 16px;
    border-radius: 999px;
    font-size: 0.82rem;
    font-weight: 600;
    line-height: 1.2;
    box-shadow: none;
}

.bms-header-actions > .bms-btn:hover {
    box-shadow: none;
}

/* Narrow window: the whole group takes a line of its own under the title
   instead of competing with it. The group's flex-wrap is the fallback below
   that — segments stack inside the track, never clipped and never on top of
   the button. */
@media (max-width: 991.98px) {
    .bms-header-actions {
        width: 100%;
        justify-content: flex-start;
    }
}

/* ── Switches (Stephen, 5 Oct 2026: "make all checkbox in the BMS project to be switch … with primary default
   color"). Every checkbox in core and every module shows as a switch in the theme primary. The tick boxes that
   pick rows in a table or a grid stay ticks (listing standard: select-all + per-row tick box), and so does any
   checkbox given the .bms-tick class. Bootstrap toggle buttons (.btn-check) are left alone. ── */
input[type="checkbox"]:is(.form-check-input, :not([class])):not(table *):not(.bms-bulk-check):not(.bms-bulk-check-all):not(.row-check):not(.check-all):not(.fl-one):not(.fl-all):not(.bms-tick):not(.btn-check) {
    -webkit-appearance: none; appearance: none;
    flex-shrink: 0; width: 2.25em; height: 1.25em; margin-top: .15em; vertical-align: middle;
    border: 1px solid var(--bms-input-border, var(--bms-border)); border-radius: 2em;
    background-color: var(--bms-input-bg, var(--bms-card-bg));
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgba(128,128,128,.75)'/%3e%3c/svg%3e");
    background-position: left center; background-repeat: no-repeat; background-size: contain;
    transition: background-position .15s ease-in-out, background-color .15s, border-color .15s;
    cursor: pointer;
}
input[type="checkbox"]:is(.form-check-input, :not([class])):not(table *):not(.bms-bulk-check):not(.bms-bulk-check-all):not(.row-check):not(.check-all):not(.fl-one):not(.fl-all):not(.bms-tick):not(.btn-check):checked {
    background-color: var(--bms-accent); border-color: var(--bms-accent);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e");
    background-position: right center;
}
input[type="checkbox"]:is(.form-check-input, :not([class])):not(table *):not(.bms-bulk-check):not(.bms-bulk-check-all):not(.row-check):not(.check-all):not(.fl-one):not(.fl-all):not(.bms-tick):not(.btn-check):focus-visible {
    outline: 0; border-color: var(--bms-accent); box-shadow: 0 0 0 .2rem var(--bms-accent-soft, rgba(0,0,0,.08));
}
input[type="checkbox"]:is(.form-check-input, :not([class])):not(table *):not(.bms-bulk-check):not(.bms-bulk-check-all):not(.row-check):not(.check-all):not(.fl-one):not(.fl-all):not(.bms-tick):not(.btn-check):disabled { opacity: .5; cursor: not-allowed; }
/* the switch is wider than a tick: give it room inside Bootstrap's .form-check */
.form-check:not(.form-switch):has(> input[type="checkbox"].form-check-input:not(.bms-bulk-check):not(.bms-bulk-check-all):not(.row-check):not(.check-all):not(.fl-one):not(.fl-all):not(.bms-tick):not(.btn-check)):not(table *) { padding-left: 2.75em; }
.form-check:not(.form-switch) > input[type="checkbox"].form-check-input:not(.bms-bulk-check):not(.bms-bulk-check-all):not(.row-check):not(.check-all):not(.fl-one):not(.fl-all):not(.bms-tick):not(.btn-check):not(table *) { margin-left: -2.75em; }
.form-check-inline:not(.form-switch):has(> input[type="checkbox"]:not(.bms-tick)) { margin-right: 1.25rem; }


/* Core 1.88.0 (Stephen, 16 Oct 2026) — readable muted text and file pickers in both themes.
   Bootstrap's .text-muted / .form-text / .text-secondary and the native file button
   came out dark-on-dark in pop-ups. They follow the BMS tokens everywhere now. */
body.theme-dark .text-muted, body.theme-dark .form-text, body.theme-dark .text-secondary,
body.theme-light .text-muted, body.theme-light .form-text, body.theme-light .text-secondary { color: var(--bms-text-muted) !important; }
body.theme-dark input[type=file], body.theme-light input[type=file] { color: var(--bms-input-text); background-color: var(--bms-input-bg); }
body.theme-dark input[type=file]::file-selector-button, body.theme-light input[type=file]::file-selector-button {
    background-color: var(--bms-surface-2); color: var(--bms-text); border: 0; border-right: 1px solid var(--bms-input-border);
    padding: .45rem .9rem; margin: -.4rem .75rem -.4rem -.75rem; cursor: pointer;
}
body.theme-dark input[type=file]::file-selector-button:hover, body.theme-light input[type=file]::file-selector-button:hover { background-color: var(--bms-surface-3, var(--bms-surface-2)); }
body.theme-dark input[type=file].form-control::file-selector-button, body.theme-light input[type=file].form-control::file-selector-button { background-color: var(--bms-surface-2); color: var(--bms-text); }

/* Core 1.88.0 — text on the accent colour. The layout works out --bms-on-accent from the person's accent
   (white on a dark accent, near-black on a light one), so a button, avatar or active pill stays readable
   whatever accent is picked, in both themes. */
.bms-btn-accent, .bms-btn-accent:hover, .bms-btn-accent:focus, .bms-btn-primary, .bms-btn-primary:hover,
.bms-client-avatar, .bms-user-avatar, .bms-avatar, .bms-pill.active, .bms-pill.active em,
.bms-sx > .bms-sx-nav > li > a.active, .bms-sidebar-avatar, .btn.bms-btn-accent, a.bms-btn-accent { color: var(--bms-on-accent, #fff) !important; }
.bms-pill.active em { background-color: color-mix(in srgb, var(--bms-on-accent, #fff) 22%, transparent); }

/* Core 1.88.0 — status colours that stay readable (WCAG 3:1+) in both themes. Amber and cyan are light
   colours: as text on a white page, or under white text on a badge, they could not be read. */
body.theme-light .text-warning, body.theme-light .bms-text-warning, body.theme-light .text-warning-emphasis { color: #92400e !important; }
body.theme-light .text-info, body.theme-light .bms-text-info, body.theme-light .text-info-emphasis { color: #075985 !important; }
body.theme-light .bg-warning-subtle { background-color: #fef3c7 !important; }
body.theme-light .bg-info-subtle { background-color: #e0f2fe !important; }
body.theme-light .alert-warning { color: #78350f; background-color: #fef3c7; border-color: #fde68a; }
body.theme-light .alert-info { color: #0c4a6e; background-color: #e0f2fe; border-color: #bae6fd; }
body.theme-light .alert-warning *, body.theme-light .alert-info * { color: inherit; }
.badge.bg-warning, .badge.text-bg-warning, .text-bg-warning, .badge.bg-info, .badge.text-bg-info, .text-bg-info { color: #1f2937 !important; }
body.theme-dark .text-warning { color: #fbbf24 !important; }
body.theme-dark .text-info { color: #38bdf8 !important; }
body.theme-dark .bg-warning-subtle { background-color: rgba(251, 191, 36, .14) !important; }
body.theme-dark .bg-info-subtle { background-color: rgba(56, 189, 248, .14) !important; }
body.theme-light .bms-btn.bms-btn-outline.text-warning:not(:hover), body.theme-light .bms-btn.bms-btn-ghost.text-warning:not(:hover),
body.theme-light .bms-btn.bms-btn-outline.bms-text-warning:not(:hover), body.theme-light .bms-btn.bms-btn-ghost.bms-text-warning:not(:hover) { color: #92400e !important; border-color: #d97706; }

/* Products 5.6.0 (Round 3) — key / value tables straight inside a card ("Request", "License", "Details"):
   the card's inner gutter on both sides, quiet labels, values in full colour. */
.bms-table.bms-kv th:first-child, .bms-table.bms-kv td:first-child { padding-left: 20px; }
.bms-table.bms-kv th:last-child, .bms-table.bms-kv td:last-child { padding-right: 20px; }
.bms-table.bms-kv tbody th { width: 38%; font-weight: 500; color: var(--bms-text-muted); }
.bms-table.bms-kv tbody th, .bms-table.bms-kv tbody td { vertical-align: top; padding-top: 12px; padding-bottom: 12px; }
.bms-table.bms-kv tbody td { color: var(--bms-heading, var(--bms-text)); overflow-wrap: anywhere; }
.bms-table.bms-kv tbody tr:last-child th, .bms-table.bms-kv tbody tr:last-child td { border-bottom: 0; }

/* Products 5.6.0 (Round 3) — a progress stepper for a service's stages (request → quote → … → closed). */
.bms-steps { display: flex; margin: 0; padding: 0; counter-reset: bmsstep; }
.bms-steps li { flex: 1; list-style: none; position: relative; text-align: center; font-size: .78rem; font-weight: 600; color: var(--bms-text-muted); min-width: 0; }
.bms-steps li::before { content: counter(bmsstep); counter-increment: bmsstep; position: relative; z-index: 1; display: grid; place-items: center; width: 30px; height: 30px; margin: 0 auto 6px; border-radius: 50%; border: 2px solid var(--bms-border); background-color: var(--bms-card-bg); font-size: .8rem; }
.bms-steps li::after { content: ''; position: absolute; top: 14px; left: -50%; width: 100%; height: 2px; background-color: var(--bms-border); }
.bms-steps li:first-child::after { display: none; }
.bms-steps li.done::before { content: '\2713'; background-color: var(--bms-accent); border-color: var(--bms-accent); color: var(--bms-on-accent, #fff); }
.bms-steps li.done::after, .bms-steps li.on::after { background-color: var(--bms-accent); }
.bms-steps li.on::before { border-color: var(--bms-accent); color: var(--bms-accent); }
.bms-steps li.on { color: var(--bms-heading, var(--bms-text)); }
@media (max-width: 640px) { .bms-steps li { font-size: .68rem; } }

/* Products 5.8.0 — danger buttons in the client area (the confirm pop-up and BM-Panel deletes used them unstyled) */
.bms-btn-danger { background-color: var(--bms-danger); border-color: var(--bms-danger); color: #fff; }
.bms-btn-danger:hover { filter: brightness(.92); color: #fff; }
.bms-btn-danger-soft { color: var(--bms-danger) !important; border-color: color-mix(in srgb, var(--bms-danger) 35%, var(--bms-border)) !important; }
.bms-btn-danger-soft:hover { background-color: var(--bms-danger-soft) !important; }


/* Core 1.93.1 — components of mockups/client-area-a.html that only admin.css had (copied value for value,
   tokens only): empty states, the bulk bar, the head card, pop-ups, subtitles and text colours. */
.bms-page-subtitle {
    font-size: 0.84rem;
    color: var(--bms-text-muted);
    margin: 2px 0 0;
}
.bms-modal {
    background-color: var(--bms-surface);
    border: 1px solid var(--bms-border);
    border-radius: var(--bms-radius-lg);
    box-shadow: 0 20px 60px rgba(0,0,0,0.4);
    width: 100%;
    max-width: 560px;
    max-height: 90vh;
    overflow-y: auto;
    transform: scale(0.95);
    transition: transform var(--bms-transition);
}
.bms-modal-backdrop.open .bms-modal {
    transform: scale(1);
}
.bms-text-muted { color: var(--bms-text-muted); }
.bms-text-accent { color: var(--bms-accent); }
.bms-text-success { color: var(--bms-success); }
.bms-text-danger { color: var(--bms-danger); }
.bms-empty-state {
    text-align: center;
    padding: 48px 20px;
    color: var(--bms-text-muted);
}
.bms-empty-state i {
    font-size: 2.5rem;
    margin-bottom: 12px;
    opacity: 0.4;
}
.bms-empty-state p {
    font-size: 0.9rem;
}
.bms-bulk-bar { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 1060; display: flex; align-items: center; gap: 12px; padding: 10px 14px 10px 18px; border-radius: 16px; border: 1px solid var(--bms-border); background-color: var(--bms-card-bg); box-shadow: 0 14px 40px rgba(0, 0, 0, 0.18); }
.bms-bulk-bar[hidden] { display: none; }
.bms-bulk-n { font-size: 0.86rem; color: var(--bms-text); }
.bms-bulk-n b { color: var(--bms-accent); }
.bms-empty-state .bms-btn { display: inline-flex; align-items: center; gap: 6px; width: auto; margin-top: 4px; }
.bms-empty-state .bms-btn i { font-size: inherit; display: inline; margin: 0; opacity: 1; color: inherit; }
.bms-head-card { position: relative; margin-bottom: 24px; padding: 18px 22px 0; border: 1px solid var(--bms-border); border-radius: 18px; background-color: var(--bms-card-bg); box-shadow: 0 14px 28px -16px rgba(0, 0, 0, 0.55), 0 2px 4px -2px rgba(0, 0, 0, 0.18); }
.bms-head-card:not(:has(.bms-tabs)) { padding-bottom: 18px; }
.bms-head-card > .bms-page-header { margin-bottom: 0; }
.bms-head-card > .bms-tabs { margin: 14px -22px 0; padding: 0 12px; border-top: 1px solid var(--bms-border); border-bottom: 0; }
.bms-head-card > .bms-head-sub { margin: 12px 0 0; }

/* Core 31 Oct 2026 — a file placed in a message written in the shared writing box (partials/rich-editor): a chip with its name */
a.bms-att { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; margin: 2px 0; border: 1px solid var(--bms-border); border-radius: 999px; background: var(--bms-surface-2, rgba(0,0,0,.03)); color: var(--bms-heading, inherit); font-size: .85rem; font-weight: 600; text-decoration: none; }
a.bms-att::before { content: "\1F4CE"; }
a.bms-att:hover { border-color: var(--bms-accent); color: var(--bms-accent); }