/* =====================================================================
   BCS kit tokens and classes, shared by the UI showcase and the templates.
   Every value lives here as a --bcs-* custom property; Tailwind utilities
   (bg-primary, text-on-frame …) read them through the @theme inline block
   injected by bcs-kit.js. Showcase only: not yet ported to resources/css/app.css.
   ===================================================================== */

/* Layer order, declared before any @layer block below. This file loads before Tailwind, so without this line
   the first "@layer components" here would rank components below Tailwind's base (preflight), and preflight's
   padding:0 / border:0 would beat every kit component rule. */
@layer theme, base, components, utilities;

/* ---------- Scheme tokens: Navy is the default ---------- */
:root,
[data-scheme="navy"] {
    --bcs-frame: #1a2a3e;
    --bcs-frame-deep: #142236;
    --bcs-on-frame: #ffffff;
    --bcs-on-frame-muted: rgb(255 255 255 / 0.64);
    --bcs-frame-hover: rgb(255 255 255 / 0.08);
    --bcs-frame-active: rgb(255 255 255 / 0.14);
    --bcs-frame-indicator: #60a5fa;
    --bcs-primary: #2563eb;
    --bcs-primary-hover: #1d4ed8;
    --bcs-primary-soft: #dbeafe;
    --bcs-primary-strong: #1e40af;
    --bcs-on-primary: #ffffff;
    --bcs-focus: rgb(37 99 235 / 0.4);
}
[data-scheme="ocean"] {
    --bcs-frame: #0c3b4c;
    --bcs-frame-deep: #082c39;
    --bcs-frame-indicator: #22d3ee;
    --bcs-primary: #0e7490;
    --bcs-primary-hover: #155e75;
    --bcs-primary-soft: #cffafe;
    --bcs-primary-strong: #164e63;
    --bcs-focus: rgb(14 116 144 / 0.4);
}
[data-scheme="indigo"] {
    --bcs-frame: #1e1b4b;
    --bcs-frame-deep: #17153a;
    --bcs-frame-indicator: #818cf8;
    --bcs-primary: #4f46e5;
    --bcs-primary-hover: #4338ca;
    --bcs-primary-soft: #e0e7ff;
    --bcs-primary-strong: #3730a3;
    --bcs-focus: rgb(79 70 229 / 0.4);
}
[data-scheme="graphite"] {
    --bcs-frame: #22272e;
    --bcs-frame-deep: #1a1e24;
    --bcs-frame-indicator: #60a5fa;
    --bcs-primary: #2563eb;
    --bcs-primary-hover: #1d4ed8;
    --bcs-primary-soft: #dbeafe;
    --bcs-primary-strong: #1e40af;
    --bcs-focus: rgb(37 99 235 / 0.4);
}

/* ---------- Fixed tokens (same in every scheme) ---------- */
:root {
    --bcs-page: #f4f6f9;
    --bcs-surface: #ffffff;
    --bcs-surface-muted: #f8fafc;
    --bcs-edge: #e5e7eb;
    --bcs-ink: #0f172a;
    --bcs-ink-muted: #475569;
    --bcs-ink-subtle: #64748b;
    --bcs-success: #15803d;
    --bcs-success-soft: #dcfce7;
    --bcs-success-strong: #166534;
    --bcs-warning: #f59e0b;
    --bcs-warning-soft: #fef3c7;
    --bcs-warning-strong: #92400e;
    --bcs-danger: #dc2626;
    --bcs-danger-soft: #fee2e2;
    --bcs-danger-strong: #991b1b;
    --bcs-info: #0369a1;
    --bcs-info-soft: #e0f2fe;
    --bcs-info-strong: #075985;
    --bcs-accent: #7c3aed;
    --bcs-accent-soft: #ede9fe;
    --bcs-accent-strong: #5b21b6;
    --bcs-rail: 56px;
    --bcs-rail-open: 192px;
}

/* ---------- Kit classes (resources/css/app.css, colours tokenised) ---------- */
* { font-family: 'Inter', sans-serif; }
[x-cloak] { display: none !important; }

::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: #f1f5f9; }
::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #94a3b8; }

.bcs-sidebar { background: linear-gradient(180deg, var(--bcs-frame) 0%, var(--bcs-frame-deep) 100%); transition: width 300ms ease-in-out; width: var(--bcs-rail); flex-shrink: 0; }
.bcs-sidebar:hover, .bcs-sidebar:focus-within { width: var(--bcs-rail-open); }
.bcs-sidebar .menu-label { opacity: 0; transition: opacity 200ms 100ms; }
.bcs-sidebar:hover .menu-label, .bcs-sidebar:focus-within .menu-label { opacity: 1; }
.bcs-sidebar .sub-menu-item { display: none; opacity: 0; transition: opacity 200ms 100ms; }
.bcs-sidebar:hover .sub-menu-item, .bcs-sidebar:focus-within .sub-menu-item { display: flex; opacity: 1; }
.bcs-sidebar .bcs-sidebar-footer button { visibility: hidden; }
.bcs-sidebar:hover .bcs-sidebar-footer button, .bcs-sidebar:focus-within .bcs-sidebar-footer button { visibility: visible; }

.queue-item { transition: all 0.2s ease; border-left: 3px solid transparent; cursor: pointer; }
.queue-item:hover { background-color: #f8fafc; border-left-color: var(--bcs-primary); }
.queue-item.active { background-color: var(--bcs-primary-soft); border-left-color: var(--bcs-primary); }
.queue-item.priority-high { border-left-color: var(--bcs-danger) !important; }
.queue-item.priority-medium { border-left-color: var(--bcs-warning) !important; }
.queue-item.priority-low { border-left-color: var(--bcs-success) !important; }

.channel-icon { width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: white; font-size: 0.75rem; flex-shrink: 0; }
.channel-icon.call { background: var(--bcs-success); }
.channel-icon.chat { background: var(--bcs-primary); }
.channel-icon.email { background: var(--bcs-accent); }
.channel-icon.ticket { background: var(--bcs-warning); }

.collapsible-content { max-height: 0; overflow: hidden; transition: max-height 0.3s ease; }
.collapsible-content.expanded { max-height: 2000px; }
.section-header { cursor: pointer; user-select: none; }
.section-header:hover { background-color: #f3f4f6; }
.rotate-180 { transform: rotate(180deg); }

.tab-active { border-bottom: 2px solid var(--bcs-primary); color: var(--bcs-primary); }

.data-row { transition: all 0.2s ease; }
.data-row:hover { background-color: #f8fafc; transform: translateY(-1px); box-shadow: 0 2px 8px rgba(0,0,0,0.1); }

.stats-card { transition: all 0.2s ease; }
.stats-card:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,0.1); }

.filter-chip { transition: all 0.2s ease; }
.filter-chip:hover { transform: translateY(-1px); }
.filter-chip.active { background-color: var(--bcs-primary); color: var(--bcs-on-primary); border-color: var(--bcs-primary); }

/* Same geometry as the toggle tokens (36 x 20, knob 16, 2px inset); the fallbacks cover pages without the Tailwind theme. */
.online-toggle { position: relative; flex-shrink: 0; width: var(--spacing-toggle-w, 36px); height: var(--spacing-toggle-h, 20px); border-radius: 9999px; cursor: pointer; transition: background-color 0.2s; }
.online-toggle .toggle-dot { position: absolute; top: 2px; left: 2px; width: var(--spacing-toggle-knob, 16px); height: var(--spacing-toggle-knob, 16px); border-radius: 50%; background: white; box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1); transition: transform 0.2s; }
.online-toggle.on { background-color: var(--bcs-success); }
.online-toggle.off { background-color: #d1d5db; }
.online-toggle.on .toggle-dot { transform: translateX(calc(var(--spacing-toggle-w, 36px) - var(--spacing-toggle-knob, 16px) - 4px)); }
.online-toggle[data-variant="setting"].on { background-color: var(--bcs-primary); }

@keyframes pulse-dot { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }
.animate-pulse-dot { animation: pulse-dot 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; }

.spinner-overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.5); display: flex; align-items: center; justify-content: center; z-index: 9999; }
.spinner-overlay .spinner { width: 48px; height: 48px; border: 4px solid rgba(255, 255, 255, 0.3); border-top-color: var(--bcs-primary); border-radius: 50%; animation: spin 0.8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.channel-control-btn { display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem 1rem; border-radius: 0.5rem; border: 1px solid #d1d5db; font-size: 0.875rem; transition: all 0.2s; cursor: pointer; background: transparent; color: #374151; }
.channel-control-btn:hover { background: #f3f4f6; }
.channel-control-btn.active-state { background: var(--bcs-warning-soft); color: var(--bcs-warning-strong); border-color: var(--bcs-warning); }
.channel-control-btn.end { background: var(--bcs-danger); color: white; border-color: var(--bcs-danger); }
.channel-control-btn.end:hover { background: var(--bcs-danger-strong); }

.channel-queue-card { border: 1px solid #e5e7eb; border-radius: 0.75rem; padding: 1rem; background: #fff; transition: all 0.2s ease; }
.channel-queue-card:hover { box-shadow: 0 4px 12px rgba(0,0,0,0.08); }

.context-pane { width: 280px; min-width: 240px; flex-shrink: 0; border-left: 1px solid #e5e7eb; background: #fff; display: flex; flex-direction: column; overflow: hidden; order: 99; }

.chat-bubble { max-width: 75%; padding: 0.75rem; border-radius: 0.75rem; font-size: 0.875rem; margin-bottom: 0.5rem; }
.chat-bubble.agent { background: #fff; border: 1px solid #e5e7eb; margin-right: auto; }
.chat-bubble.customer { background: var(--bcs-primary); color: var(--bcs-on-primary); margin-left: auto; }

.email-field { display: flex; align-items: center; padding: 0.5rem 1rem; border-bottom: 1px solid #e5e7eb; font-size: 0.875rem; }
.email-field label { width: 60px; font-weight: 500; color: #6b7280; flex-shrink: 0; }
.email-field input, .email-field span { flex: 1; border: none; outline: none; font-size: 0.875rem; color: #111827; }


/* =====================================================================
   2026-09-29 refresh (res1.txt). One block per work stream: keep your
   rules inside your own block so parallel edits never touch each other.
   ===================================================================== */

/* --- refresh: controls (size scale, banners, buttons, progress, data table) --- */
/* Data table rows: selectable and keyboard-focusable, in the same language as .queue-item.active
   (primary-soft fill + 3px primary bar on the left). Put .bcs-table-row on <tr tabindex="0"> and set
   aria-selected. The bar is an inset shadow on the first cell, since <tr> shadows are unreliable.
   Never use .data-row in tables: its translateY hover lift makes rows jitter.
   In @layer components so a utility on the row can still override the fill. */
@layer components {
    .bcs-table-row { cursor: pointer; transition: background-color 0.15s ease; }
    .bcs-table-row > :first-child { box-shadow: inset 3px 0 0 transparent; transition: box-shadow 0.15s ease; }
    .bcs-table-row:hover { background-color: var(--bcs-surface-muted); }
    .bcs-table-row[aria-selected="true"],
    .bcs-table-row:focus-visible { background-color: var(--bcs-primary-soft); }
    .bcs-table-row[aria-selected="true"] > :first-child,
    .bcs-table-row:focus-visible > :first-child { box-shadow: inset 3px 0 0 var(--bcs-primary); }
    .bcs-table-row:focus { outline: none; }
    .bcs-table-row:focus-visible { outline: 2px solid var(--bcs-primary); outline-offset: -2px; }
}
@media (prefers-reduced-motion: reduce) {
    .bcs-table-row, .bcs-table-row > :first-child { transition: none; }
}
/* Primary-soft chips (Active badge, Edit icon button) would vanish into a highlighted row: lift them to white.
   Unlayered on purpose, so it beats the bg-primary-soft utility. */
.bcs-table-row[aria-selected="true"] .bg-primary-soft,
.bcs-table-row:focus-visible .bg-primary-soft { background-color: var(--bcs-surface); }
/* --- end refresh: controls --- */

/* --- refresh: toggles & sidebar (toggle geometry, sidebar footer) --- */
/* Toggles: one geometry for every switch (tokens --spacing-toggle-w/-h/-knob in bcs-kit.js: 36 x 20, knob 16). */
.online-toggle:focus-visible { outline: none; box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--bcs-primary); }
@media (prefers-reduced-motion: reduce) {
    .online-toggle, .online-toggle .toggle-dot { transition: none; }
}

/* Sidebar: one continuous rail. The nav scrolls on its own and the footer is transparent under one
   inset hairline (drawn in markup), so there is no fade band between menu and footer.
   The 4px scrollbar lives in a stable gutter inside the right inset (4px padding + 4px gutter = 8px),
   so items keep the same 8px margins whether or not the menu overflows. */
.bcs-sidebar-nav { padding: 8px 4px 12px 8px; overscroll-behavior: contain; scrollbar-gutter: stable; }
.bcs-sidebar-nav::-webkit-scrollbar { width: 4px; height: 0; }
.bcs-sidebar-nav::-webkit-scrollbar-track { background: transparent; }
.bcs-sidebar-nav::-webkit-scrollbar-thumb { background: transparent; border-radius: 2px; }
.bcs-sidebar:hover .bcs-sidebar-nav::-webkit-scrollbar-thumb,
.bcs-sidebar:focus-within .bcs-sidebar-nav::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--bcs-on-frame) 22%, transparent); }
@supports not selector(::-webkit-scrollbar) {
    .bcs-sidebar-nav { padding-right: 0; scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--bcs-on-frame) 22%, transparent) transparent; }
}
.bcs-sidebar-footer { background: transparent; }
/* Keyboard focus inside the rail: inset so the rail's overflow never clips it. */
.bcs-sidebar a:focus-visible, .bcs-sidebar button:focus-visible { outline: 2px solid var(--bcs-frame-indicator); outline-offset: -2px; }
/* --- end refresh: toggles & sidebar --- */

/* --- refresh: dropdowns & menus (.bcs-select, .bcs-menu, .bcs-menu-item) --- */
/* Contract (brief §2), used by every page:
     .bcs-select          native single <select>: field look + chevron. Size it with h-control-* and text-*.
     .bcs-menu-trigger    <button> that looks like .bcs-select; chevron turns over when aria-expanded="true".
       .is-active         an applied, clearable filter: primary tint, chevron replaced by a .bcs-menu-clear button.
     .bcs-menu-clear      small × button that sits inside the right end of an .is-active trigger (wrap both in .relative).
     .bcs-menu            floating panel: surface, 1px edge, 10px radius, layered soft shadow, 4px padding.
                          Opens under its trigger (absolute, left 0); data-align="end" right-aligns, data-side="top" opens upward.
     .bcs-popover         same surface for small forms (no inner padding, 12px radius).
     .bcs-menu-item       row: optional leading <i> (or .bcs-menu-dot / avatar), text, optional .bcs-menu-desc line, trailing .bcs-menu-meta or <kbd>.
                          .is-selected / [aria-selected|aria-checked="true"] shows a check; .is-danger is destructive;
                          :disabled / [aria-disabled="true"] greys it out.
     .bcs-menu-label      group heading (sentence case).    .bcs-menu-sep   1px divider.
     .bcs-menu-header     signed-in user block at the top.  .bcs-menu-search  search field inside a menu.
     .bcs-menu-list       scrolling group of items (max 240px).
     .bcs-menu-dot        8px status dot in the 16px leading slot, so dot rows line up with icon rows. Colour it with
                          bg-success / bg-warning / …; .is-hollow is a ring for "All" / "Any" rows.
   Sizes, padding-left and colours sit in @layer components so utilities can override them; only what must beat
   utilities (the chevron padding, states) is unlayered. Behaviour: Alpine.data('bcsMenu' | 'bcsListbox') in showcase.js. */
:root {
    --bcs-field-border: #d1d5db;
    --bcs-field-border-hover: #9ca3af;
    --bcs-menu-hover: rgb(15 23 42 / 0.05);
    --bcs-menu-shadow: 0 1px 2px rgb(15 23 42 / 0.04), 0 4px 8px -2px rgb(15 23 42 / 0.06), 0 16px 32px -8px rgb(15 23 42 / 0.16);
    --bcs-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M4.5 6.25 8 9.75l3.5-3.5' stroke='%2364748b' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    --bcs-chevron-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M4.5 6.25 8 9.75l3.5-3.5' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    --bcs-check-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='m3.5 8.5 3 3 6-7' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* Every native single select in the kit gets the chevron, with no markup change. :where() keeps specificity 0,
   so any page or showcase rule still wins; being unlayered, the padding-right beats Tailwind's px-* (padding-inline). */
:where(select:not([multiple]):not([size])) {
    -webkit-appearance: none;
    appearance: none;
    background-image: var(--bcs-chevron);
    background-repeat: no-repeat;
    background-position: right 8px center;
    background-size: 16px 16px;
    padding-right: 32px;
    cursor: pointer;
}

@layer components {
    .bcs-select,
    .bcs-menu-trigger {
        height: 36px;
        padding-left: 12px;
        font-size: 13px;
        line-height: 18px;
        color: var(--bcs-ink);
        background-color: var(--bcs-surface);
        border: 1px solid var(--bcs-field-border);
        border-radius: 8px;
        box-shadow: 0 1px 2px rgb(15 23 42 / 0.04);
        cursor: pointer;
        transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
    }
    .bcs-select:hover,
    .bcs-menu-trigger:hover { border-color: var(--bcs-field-border-hover); }
    .bcs-select:focus-visible,
    .bcs-menu-trigger:focus-visible { outline: none; border-color: var(--bcs-primary); box-shadow: 0 0 0 3px var(--bcs-focus); }
    .bcs-select:focus { outline: none; }
    /* Placeholder option chosen: read as a hint, not a value */
    .bcs-select:has(> option[value=""]:checked) { color: var(--bcs-ink-subtle); }
    .bcs-select option { color: var(--bcs-ink); }

    .bcs-menu-trigger {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding-right: 10px;
        text-align: left;
        white-space: nowrap;
    }
    .bcs-menu-trigger > i:first-child { flex: none; width: 16px; text-align: center; color: var(--bcs-ink-subtle); }
    .bcs-menu-trigger::after {
        content: "";
        flex: none;
        width: 16px;
        height: 16px;
        margin-left: auto;
        background-color: var(--bcs-ink-subtle);
        -webkit-mask: var(--bcs-chevron-mask) center / 16px 16px no-repeat;
        mask: var(--bcs-chevron-mask) center / 16px 16px no-repeat;
        transition: transform 0.15s ease;
    }
    .bcs-menu-trigger[aria-expanded="true"] { border-color: var(--bcs-primary); }
    .bcs-menu-trigger[aria-expanded="true"]::after { transform: rotate(180deg); }

    .bcs-menu,
    .bcs-popover {
        position: absolute;
        z-index: 50;
        top: calc(100% + 6px);
        left: 0;
        max-width: calc(100vw - 32px);
        color: var(--bcs-ink);
        font-size: 13px;
        line-height: 18px;
        text-align: left;
        background-color: var(--bcs-surface);
        border: 1px solid var(--bcs-edge);
        box-shadow: var(--bcs-menu-shadow);
        transform-origin: top left;
        transition: opacity 0.12s ease-out, transform 0.12s ease-out;
    }
    .bcs-menu { min-width: max(100%, 184px); padding: 4px; border-radius: 10px; }
    .bcs-popover { width: 288px; border-radius: 12px; }
    .bcs-menu:focus { outline: none; }
    .bcs-menu[data-align="end"], .bcs-popover[data-align="end"],
    .bcs-menu[data-flip="end"], .bcs-popover[data-flip="end"] { left: auto; right: 0; transform-origin: top right; }
    .bcs-menu[data-flip="start"], .bcs-popover[data-flip="start"] { left: 0; right: auto; transform-origin: top left; }
    .bcs-menu[data-side="top"], .bcs-popover[data-side="top"] { top: auto; bottom: calc(100% + 6px); transform-origin: bottom left; }
    /* Opening motion: x-show only flips display, @starting-style animates it in. Closing is instant. */
    @starting-style {
        .bcs-menu, .bcs-popover { opacity: 0; transform: translateY(-4px) scale(0.98); }
    }

    .bcs-menu-item {
        display: flex;
        align-items: center;
        gap: 10px;
        width: 100%;
        min-height: 32px;
        padding: 6px 10px;
        border: 0;
        border-radius: 6px;
        background: transparent;
        color: var(--bcs-ink);
        font: inherit;
        font-size: 13px;
        line-height: 18px;
        text-align: left;
        text-decoration: none;
        cursor: pointer;
        user-select: none;
        scroll-margin: 4px;
    }
    .bcs-menu-item > i:first-child { flex: none; width: 16px; font-size: 13px; text-align: center; color: var(--bcs-ink-subtle); }
    .bcs-menu-item:hover,
    .bcs-menu-item:focus-visible { background-color: var(--bcs-menu-hover); outline: none; }
    .bcs-menu-item:focus-visible { box-shadow: inset 0 0 0 1px var(--bcs-field-border); }
    .bcs-menu-item:has(.bcs-menu-desc) { align-items: flex-start; }
    .bcs-menu-item:has(.bcs-menu-desc) > i:first-child { margin-top: 1px; }
    .bcs-menu-text { flex: 1 1 auto; min-width: 0; }
    .bcs-menu-desc { display: block; margin-top: 1px; font-size: 12px; line-height: 16px; color: var(--bcs-ink-subtle); }
    .bcs-menu-meta,
    .bcs-menu-item kbd {
        flex: none;
        margin-left: auto;
        padding-left: 12px;
        font: 400 12px/16px 'Inter', sans-serif;
        font-variant-numeric: tabular-nums;
        color: var(--bcs-ink-subtle);
    }
    .bcs-menu-label {
        display: block;
        padding: 8px 10px 4px;
        font-size: 12px;
        line-height: 16px;
        font-weight: 500;
        color: var(--bcs-ink-subtle);
    }
    .bcs-menu-sep { display: block; height: 1px; margin: 4px -4px; border: 0; background-color: var(--bcs-edge); }
    .bcs-menu-header { display: flex; align-items: center; gap: 10px; padding: 8px 10px 10px; }
    .bcs-menu-list { max-height: 240px; overflow-y: auto; overscroll-behavior: contain; }
    .bcs-menu-empty { padding: 12px 10px; font-size: 12px; line-height: 16px; color: var(--bcs-ink-subtle); text-align: center; }
    .bcs-menu-dot { flex: none; box-sizing: border-box; width: 8px; height: 8px; margin: 0 4px; border-radius: 9999px; background-color: var(--bcs-ink-subtle); }
    .bcs-menu-dot.is-hollow { background-color: transparent; box-shadow: inset 0 0 0 1.5px var(--bcs-field-border-hover); }
    .bcs-menu-item:has(.bcs-menu-desc) > .bcs-menu-dot:first-child { margin-top: 5px; }
    .bcs-menu-search { position: relative; display: block; margin-bottom: 4px; }
    .bcs-menu-search > i { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); font-size: 12px; color: var(--bcs-ink-subtle); pointer-events: none; }
    .bcs-menu-search > input {
        display: block;
        width: 100%;
        height: 32px;
        padding: 0 10px 0 30px;
        font-size: 13px;
        color: var(--bcs-ink);
        background-color: var(--bcs-surface-muted);
        border: 1px solid var(--bcs-edge);
        border-radius: 6px;
    }
    .bcs-menu-search > input::placeholder { color: var(--bcs-ink-subtle); }
    .bcs-menu-search > input:focus { outline: none; background-color: var(--bcs-surface); border-color: var(--bcs-primary); box-shadow: 0 0 0 3px var(--bcs-focus); }

    .bcs-menu-clear {
        position: absolute;
        top: 50%;
        right: 5px;
        transform: translateY(-50%);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 24px;
        height: 24px;
        border: 0;
        border-radius: 6px;
        background: transparent;
        color: var(--bcs-primary-strong);
        font-size: 11px;
        cursor: pointer;
    }
    .bcs-menu-clear:hover { background-color: color-mix(in srgb, var(--bcs-primary) 14%, transparent); }
    .bcs-menu-clear:focus-visible { outline: 2px solid var(--bcs-primary); outline-offset: -2px; }
}

/* States: unlayered so they beat colour utilities and the showcase's white stage fields */
.bcs-select:disabled,
.bcs-menu-trigger:disabled { color: var(--bcs-ink-subtle); background-color: #f3f4f6; border-color: var(--bcs-edge); box-shadow: none; cursor: not-allowed; }
.bcs-select[aria-invalid="true"],
.bcs-menu-trigger[aria-invalid="true"] { border-color: var(--bcs-danger); }
.bcs-select[aria-invalid="true"]:focus-visible,
.bcs-menu-trigger[aria-invalid="true"]:focus-visible { box-shadow: 0 0 0 3px rgb(220 38 38 / 0.2); }
.bcs-menu-trigger.is-active { padding-right: 32px; color: var(--bcs-primary-strong); background-color: var(--bcs-primary-soft); border-color: color-mix(in srgb, var(--bcs-primary) 40%, transparent); box-shadow: none; }
.bcs-menu-trigger.is-active::after { display: none; }
.bcs-menu-trigger.is-active:focus-visible { box-shadow: 0 0 0 3px var(--bcs-focus); }

.bcs-menu-item.is-selected,
.bcs-menu-item[aria-selected="true"],
.bcs-menu-item[aria-checked="true"] { font-weight: 500; }
.bcs-menu-item.is-selected::after,
.bcs-menu-item[aria-selected="true"]::after,
.bcs-menu-item[aria-checked="true"]::after {
    content: "";
    flex: none;
    align-self: center;
    width: 16px;
    height: 16px;
    margin-left: auto;
    background-color: var(--bcs-primary);
    -webkit-mask: var(--bcs-check-mask) center / 16px 16px no-repeat;
    mask: var(--bcs-check-mask) center / 16px 16px no-repeat;
}
.bcs-menu-item:has(.bcs-menu-meta, kbd)::after { margin-left: 8px; }
.bcs-menu-item.is-danger { color: var(--bcs-danger); }
.bcs-menu-item.is-danger > i:first-child { color: inherit; }
.bcs-menu-item.is-danger:hover,
.bcs-menu-item.is-danger:focus-visible { color: var(--bcs-danger-strong); background-color: var(--bcs-danger-soft); }
.bcs-menu-item:disabled,
.bcs-menu-item[aria-disabled="true"] { opacity: 0.45; cursor: not-allowed; background-color: transparent; }

/* Showcase only: stages scroll sideways (overflow-x:auto), which would clip an open menu. Let it spill while open. */
.sc-stage:has([aria-haspopup][aria-expanded="true"]) { overflow: visible; }

@media (prefers-reduced-motion: reduce) {
    .bcs-menu, .bcs-popover, .bcs-menu-trigger, .bcs-menu-trigger::after, .bcs-select { transition: none; }
}
/* --- end refresh: dropdowns & menus --- */

/* --- refresh: auth (OTP input, sign-in, onboarding wizard) --- */
/* OTP code input: six separate digit cells.
   <div class="bcs-otp" role="group">            add .is-error / .is-success / .is-disabled to the group
     <span class="bcs-otp-slot">                   .is-active shows the caret on a static example
       <input class="bcs-otp-cell" placeholder=" " inputmode="numeric" …>
       <span class="bcs-otp-caret" aria-hidden="true"></span>
     </span> ×6   (a <span class="bcs-otp-sep"> between slots 3 and 4 groups them 3 + 3)
   </div>
   placeholder=" " lets :placeholder-shown tell empty cells from filled ones, so no JS class is needed.
   Cells shrink below 52px when the row is narrower than 352px. In @layer components so utilities still win. */
@layer components {
    .bcs-otp { display: flex; align-items: center; gap: 8px; }
    .bcs-otp-slot { position: relative; display: block; flex: 0 1 52px; min-width: 0; aspect-ratio: 1 / 1; }
    .bcs-otp-cell {
        position: absolute; inset: 0; box-sizing: border-box; width: 100%; height: 100%; margin: 0; padding: 0;
        border: 1px solid #d1d5db; border-radius: 10px; background-color: var(--bcs-surface);
        color: var(--bcs-ink); font-size: 24px; line-height: 1; font-weight: 600; text-align: center;
        font-variant-numeric: tabular-nums; caret-color: transparent; outline: none;
        transition: border-color .15s ease, box-shadow .15s ease;
    }
    span.bcs-otp-cell { display: flex; align-items: center; justify-content: center; }
    .bcs-otp-cell::placeholder { color: transparent; }
    .bcs-otp-cell::selection { background: transparent; }
    .bcs-otp-cell:placeholder-shown:hover { border-color: #94a3b8; }
    input.bcs-otp-cell:not(:placeholder-shown), .bcs-otp-cell.is-filled { border-color: var(--bcs-ink); }
    .bcs-otp .bcs-otp-cell:focus, .bcs-otp-slot.is-active .bcs-otp-cell { border-color: var(--bcs-primary); box-shadow: 0 0 0 3px var(--bcs-focus); }
    .bcs-otp-caret {
        display: none; position: absolute; left: 50%; top: 27%; width: 2px; height: 46%; margin-left: -1px;
        border-radius: 1px; background: var(--bcs-primary); pointer-events: none;
        animation: bcs-otp-blink 1.1s step-end infinite;
    }
    .bcs-otp-cell:focus:placeholder-shown + .bcs-otp-caret, .bcs-otp-slot.is-active .bcs-otp-caret { display: block; }
    .bcs-otp-slot.is-active .bcs-otp-caret { animation: none; }
    .bcs-otp.is-error .bcs-otp-cell { border-color: var(--bcs-danger); }
    .bcs-otp.is-error .bcs-otp-cell:focus { box-shadow: 0 0 0 3px color-mix(in srgb, var(--bcs-danger) 20%, transparent); }
    .bcs-otp.is-error .bcs-otp-caret { background: var(--bcs-danger); }
    .bcs-otp.is-success .bcs-otp-cell { border-color: var(--bcs-success); color: var(--bcs-success-strong); }
    .bcs-otp.is-success .bcs-otp-cell:focus { box-shadow: 0 0 0 3px color-mix(in srgb, var(--bcs-success) 20%, transparent); }
    .bcs-otp .bcs-otp-cell:disabled, .bcs-otp.is-disabled .bcs-otp-cell {
        border-color: var(--bcs-edge); color: var(--bcs-ink-subtle); cursor: not-allowed;
        background-color: #f1f5f9;
    }
    .bcs-otp-sep { flex: 0 0 auto; width: 10px; height: 2px; margin: 0 2px; border-radius: 1px; background: #94a3b8; }
}
@keyframes bcs-otp-blink { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .bcs-otp-caret { animation: none; } }
/* --- end refresh: auth --- */

/* --- refresh: profile (profile header, channel cards, engagement rows, audio player) --- */
/* Used by pages/profile.html and pages/list-page.html. In @layer components so utilities still win. */
@layer components {
    /* Segmented control: a pill track of toggle buttons.
       <div class="bcs-seg" role="group" aria-label="…"><button type="button" class="bcs-seg-item" aria-pressed="true">Agent</button>…</div> */
    .bcs-seg { display: inline-flex; align-items: center; gap: 2px; padding: 3px; border: 1px solid var(--bcs-edge); border-radius: 9999px; background: var(--bcs-surface); }
    .bcs-seg-item {
        display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 14px; border-radius: 9999px;
        font-size: 13px; line-height: 18px; font-weight: 500; color: var(--bcs-ink-muted); white-space: nowrap; cursor: pointer;
        transition: background-color .15s ease, color .15s ease;
    }
    .bcs-seg-item:hover { color: var(--bcs-ink); background: var(--bcs-surface-muted); }
    .bcs-seg-item[aria-pressed="true"] { background: var(--bcs-primary); color: var(--bcs-on-primary); }
    .bcs-seg-item:focus-visible { outline: 2px solid var(--bcs-primary); outline-offset: 2px; }

    /* Profile meta row: icon + text items, hairline dividers from 640px (on phones they wrap without them). */
    .bcs-profile-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; }
    .bcs-profile-meta > li { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
    .bcs-profile-meta > li > i { width: 14px; text-align: center; font-size: 12px; }

    /* KPI strip: value over label, hairline dividers. 2 x 2 box on phones, one row from 640px, open row beside the header from 1024px.
       Items are <div>s (the strip may also hold an Alpine <template>). */
    .bcs-kpi-strip { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border: 1px solid var(--bcs-edge); border-radius: 12px; }
    .bcs-kpi-strip > div { padding: 12px 8px; text-align: center; min-width: 0; }
    .bcs-kpi-strip > div:nth-of-type(even) { border-left: 1px solid var(--bcs-edge); }
    .bcs-kpi-strip > div:nth-of-type(n+3) { border-top: 1px solid var(--bcs-edge); }

    /* Audio mini player: 28px play/pause, elapsed, seek track, total. Alpine data: audioMini(seconds, who).
       <div class="bcs-audio" x-data="audioMini(372, 'Joseph Otieno')">…</div> (markup in pages/profile.html) */
    .bcs-audio { display: flex; align-items: center; gap: 8px; width: 100%; max-width: 280px; min-width: 0; }
    .bcs-audio-btn {
        flex: none; display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 9999px;
        background: var(--bcs-primary); color: var(--bcs-on-primary); font-size: 10px; cursor: pointer; transition: background-color .15s ease;
    }
    .bcs-audio-btn:hover { background: var(--bcs-primary-hover); }
    .bcs-audio-btn:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--bcs-surface), 0 0 0 4px var(--bcs-primary); }
    .bcs-audio-btn .fa-play { margin-left: 2px; }
    .bcs-audio-time { flex: none; font-size: 11px; line-height: 16px; color: var(--bcs-ink-subtle); font-variant-numeric: tabular-nums; }
    .bcs-audio.is-playing .bcs-audio-time:first-of-type { color: var(--bcs-ink); }
    .bcs-audio-seek { --p: 0%; flex: 1 1 auto; min-width: 48px; height: 16px; margin: 0; padding: 0; background: transparent; cursor: pointer; -webkit-appearance: none; appearance: none; }
    .bcs-audio-seek:focus { outline: none; }
    .bcs-audio-seek::-webkit-slider-runnable-track { height: 4px; border-radius: 9999px; background: linear-gradient(to right, var(--bcs-primary) var(--p), var(--bcs-edge) var(--p)); }
    .bcs-audio-seek::-webkit-slider-thumb {
        -webkit-appearance: none; appearance: none; width: 12px; height: 12px; margin-top: -4px; border: 2px solid var(--bcs-surface); border-radius: 50%;
        background: var(--bcs-primary); box-shadow: 0 1px 2px rgb(15 23 42 / .25); opacity: 0; transition: opacity .15s ease;
    }
    .bcs-audio-seek::-moz-range-track { height: 4px; border-radius: 9999px; background: var(--bcs-edge); }
    .bcs-audio-seek::-moz-range-progress { height: 4px; border-radius: 9999px; background: var(--bcs-primary); }
    .bcs-audio-seek::-moz-range-thumb { width: 8px; height: 8px; border: 2px solid var(--bcs-surface); border-radius: 50%; background: var(--bcs-primary); opacity: 0; }
    .bcs-audio:hover .bcs-audio-seek::-webkit-slider-thumb, .bcs-audio.is-playing .bcs-audio-seek::-webkit-slider-thumb, .bcs-audio.is-started .bcs-audio-seek::-webkit-slider-thumb,
    .bcs-audio-seek:focus-visible::-webkit-slider-thumb { opacity: 1; }
    .bcs-audio:hover .bcs-audio-seek::-moz-range-thumb, .bcs-audio.is-playing .bcs-audio-seek::-moz-range-thumb, .bcs-audio.is-started .bcs-audio-seek::-moz-range-thumb,
    .bcs-audio-seek:focus-visible::-moz-range-thumb { opacity: 1; }
    .bcs-audio-seek:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 3px var(--bcs-focus); }
    .bcs-audio-seek:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 3px var(--bcs-focus); }

    /* Responsive list: one <table> per list. Rows are cards while the list is narrower than 860px and a table from there.
       <div class="bcs-list bcs-list--eng"><table class="bcs-list-table"><thead>…</thead><tbody><tr><td data-col="when"><span class="bcs-list-label">When</span>…
       Types: --eng (engagement history), --jobs (job post history; add --no-biz to drop the Business column), --users.
       Add --select when rows start with a checkbox cell (td/th data-col="sel") and carry .bcs-table-row (controls block):
       selected rows get the kit's primary tint and 3px bar, on the first cell in a table and on the whole card on a phone.
       .bcs-list-label shows in card rows only (screen readers always get it); .bcs-list-wide shows in table rows only.
       tr.bcs-list-detail is a full-width expansion (transcript preview); tr.bcs-list-empty holds the empty state.
       Rows filtered out with x-show (display: none) are skipped when deciding which card is first. */
    .bcs-list { container-type: inline-size; }
    .bcs-list-table { display: block; width: 100%; border-collapse: collapse; }
    .bcs-list-table thead { display: none; }
    .bcs-list-table tbody { display: block; }
    .bcs-list-table tbody tr { display: grid; column-gap: 12px; row-gap: 10px; align-items: start; padding: 14px 16px; border-top: 1px solid var(--bcs-edge); }
    .bcs-list-table tbody tr:first-child,
    .bcs-list-table tbody tr:nth-child(1 of :not([style*="display: none"])) { border-top: 0; }
    .bcs-list-table td { display: block; min-width: 0; padding: 0; }
    .bcs-list-label { display: block; margin-bottom: 2px; font-size: 11px; line-height: 16px; font-weight: 500; color: var(--bcs-ink-subtle); }
    .bcs-list-wide { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
    .bcs-list-table tbody tr.bcs-list-detail { display: block; padding: 0 16px 14px; border-top: 0; }
    .bcs-list-table tbody tr.bcs-list-empty { display: block; padding: 0; border-top: 0; }

    .bcs-list--eng tbody tr { grid-template-columns: 32px minmax(0, 1fr) auto; grid-template-areas: "chan cust out" ". when dur" ". conv conv"; }
    .bcs-list--eng.bcs-list--select tbody tr { grid-template-columns: 16px 32px minmax(0, 1fr) auto; grid-template-areas: "sel chan cust out" ". . when dur" ". . conv conv"; }
    .bcs-list--eng td[data-col="channel"] { grid-area: chan; align-self: start; }
    .bcs-list--eng td[data-col="customer"] { grid-area: cust; }
    .bcs-list--eng td[data-col="when"] { grid-area: when; }
    .bcs-list--eng td[data-col="conv"] { grid-area: conv; }
    .bcs-list--eng td[data-col="dur"] { grid-area: dur; }
    .bcs-list--eng td[data-col="outcome"] { grid-area: out; justify-self: end; align-self: start; }

    .bcs-list--jobs tbody tr { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "title title status" "biz biz biz" "chan rate date"; }
    .bcs-list--jobs.bcs-list--select tbody tr { grid-template-columns: 16px auto minmax(0, 1fr) auto; grid-template-areas: "sel title title status" ". biz biz biz" ". chan rate date"; }
    .bcs-list--jobs.bcs-list--no-biz tbody tr { grid-template-areas: "title title status" "chan rate date"; }
    .bcs-list--jobs.bcs-list--no-biz [data-col="biz"] { display: none; }
    .bcs-list--jobs td[data-col="title"] { grid-area: title; }
    .bcs-list--jobs td[data-col="biz"] { grid-area: biz; }
    .bcs-list--jobs td[data-col="chan"] { grid-area: chan; }
    .bcs-list--jobs td[data-col="rate"] { grid-area: rate; }
    .bcs-list--jobs td[data-col="status"] { grid-area: status; justify-self: end; align-self: start; }
    .bcs-list--jobs td[data-col="date"] { grid-area: date; }

    .bcs-list--users tbody tr { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "user user status" "role active joined"; }
    .bcs-list--users.bcs-list--select tbody tr { grid-template-columns: 16px auto minmax(0, 1fr) auto; grid-template-areas: "sel user user status" ". role active joined"; }
    .bcs-list--users td[data-col="user"] { grid-area: user; }
    .bcs-list--users td[data-col="role"] { grid-area: role; }
    .bcs-list--users td[data-col="status"] { grid-area: status; justify-self: end; align-self: start; }
    .bcs-list--users td[data-col="active"] { grid-area: active; }
    .bcs-list--users td[data-col="joined"] { grid-area: joined; }

    /* Selectable rows: checkbox cell, lined up with the row's first line (channel icon or avatar is 32px tall). */
    .bcs-list--select td[data-col="sel"] { grid-area: sel; align-self: start; margin-top: 2px; line-height: 0; }
    .bcs-list--select.bcs-list--eng td[data-col="sel"], .bcs-list--select.bcs-list--users td[data-col="sel"] { margin-top: 8px; }
    .bcs-list-table tbody tr.bcs-table-row > :first-child { box-shadow: none; }
    .bcs-list-table tbody tr.bcs-table-row[aria-selected="true"],
    .bcs-list-table tbody tr.bcs-table-row:focus-visible { box-shadow: inset 3px 0 0 var(--bcs-primary); }

    @container (min-width: 860px) {
        .bcs-list-table { display: table; }
        .bcs-list-table thead { display: table-header-group; }
        .bcs-list-table tbody { display: table-row-group; }
        .bcs-list-table tr, .bcs-list-table tbody tr { display: table-row; padding: 0; }
        .bcs-list-table th, .bcs-list-table td { display: table-cell; padding: 12px 16px; vertical-align: middle; text-align: left; }
        .bcs-list-table th:first-child, .bcs-list-table td:first-child { padding-left: 20px; }
        .bcs-list-table th:last-child, .bcs-list-table td:last-child { padding-right: 20px; }
        .bcs-list-table th {
            height: 40px; padding-top: 0; padding-bottom: 0; background: var(--bcs-surface-muted); border-bottom: 1px solid var(--bcs-edge);
            font-size: 11px; line-height: 16px; font-weight: 500; letter-spacing: .05em; text-transform: uppercase; color: var(--bcs-ink-subtle); white-space: nowrap;
        }
        .bcs-list-table tbody tr:not(.bcs-list-detail):not(.bcs-list-empty):not([aria-selected="true"]):not(:focus-visible):hover { background: var(--bcs-surface-muted); }
        .bcs-list-table tbody tr.bcs-table-row[aria-selected="true"],
        .bcs-list-table tbody tr.bcs-table-row:focus-visible { box-shadow: none; }
        .bcs-list-table tbody tr.bcs-table-row[aria-selected="true"] > :first-child,
        .bcs-list-table tbody tr.bcs-table-row:focus-visible > :first-child { box-shadow: inset 3px 0 0 var(--bcs-primary); }
        .bcs-list-table [data-col="sel"] { width: 1px; padding-right: 0; line-height: 0; }
        .bcs-list-table tbody tr.bcs-list-detail, .bcs-list-table tbody tr.bcs-list-empty { display: table-row; }
        .bcs-list-table tbody tr.bcs-list-detail td { padding: 0 20px 16px; }
        .bcs-list-table tbody tr.bcs-list-empty td { padding: 0; }
        .bcs-list-label { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
        .bcs-list-wide { position: static; width: auto; height: auto; margin: 0; overflow: visible; clip: auto; white-space: normal; }
        .bcs-list--eng td[data-col="conv"] { width: 260px; }
        .bcs-list--jobs.bcs-list--no-biz [data-col="biz"] { display: none; }
    }
}
/* Logo tile: a kit avatar (data-avatar) with card corners, for businesses. Unlayered on purpose: it has to beat
   the avatar's rounded-full utility. <span class="bcs-logo-tile"><span data-avatar="Savanna Dental Care" data-size="sm"></span></span> */
.bcs-logo-tile { display: inline-flex; flex-shrink: 0; }
.bcs-logo-tile .rounded-full { border-radius: 8px; }
.bcs-logo-tile .size-avatar-xs.rounded-full { border-radius: 6px; }
.bcs-logo-tile .size-avatar-lg.rounded-full, .bcs-logo-tile .size-avatar-xl.rounded-full { border-radius: 12px; }
/* Small channel icon (24px) for dense rows: <span class="channel-icon is-sm call">. Unlayered, like .channel-icon itself. */
.channel-icon.is-sm { width: 24px; height: 24px; font-size: 10px; }

/* Meta row and KPI strip follow the width of their card (the nearest @container), not the viewport. */
@container (min-width: 560px) {
    @layer components {
        /* Every item carries a left hairline; the row is pulled 13px left and clipped, so the item that starts
           each line never shows one, even after wrapping. */
        .bcs-profile-meta { gap: 6px 0; margin-left: -13px; clip-path: inset(0 0 0 13px); }
        .bcs-profile-meta > li { padding: 0 12px; border-left: 1px solid var(--bcs-edge); }
        .bcs-kpi-strip { grid-template-columns: repeat(4, minmax(0, 1fr)); }
        .bcs-kpi-strip > div:nth-of-type(n+2) { border-left: 1px solid var(--bcs-edge); }
        .bcs-kpi-strip > div:nth-of-type(n+3) { border-top: 0; }
    }
}
@container (min-width: 900px) {
    @layer components {
        .bcs-kpi-strip.is-open { grid-template-columns: repeat(4, auto); border: 0; border-radius: 0; }
        .bcs-kpi-strip.is-open > div { padding: 2px 16px; }
        .bcs-kpi-strip.is-open > div:last-of-type { padding-right: 0; }
    }
}
@media (prefers-reduced-motion: reduce) {
    .bcs-seg-item, .bcs-audio-btn, .bcs-audio-seek::-webkit-slider-thumb { transition: none; }
}
/* --- end refresh: profile --- */

/* --- refresh: calendar (appointments calendar, FullCalendar overrides) --- */
/* Appointments calendar (pages/schedule.html). .bcs-cal sits on the calendar card and scopes every rule.
   The page's script toggles .is-stacked (card < 800px: toolbar wraps into two rows) and .is-compact
   (card < 760px: month grid shows dots plus a day agenda, week switches to a list).
   A status class (.st-scheduled | .st-completed | .st-pending | .st-cancelled) sets three colours that
   chips, dots, legend swatches and badges read: --st-soft (tint), --st-strong (text) and --st-dot. */
.bcs-cal {
    --fc-border-color: var(--bcs-edge);
    --fc-page-bg-color: var(--bcs-surface);
    --fc-neutral-bg-color: var(--bcs-surface-muted);
    --fc-neutral-text-color: var(--bcs-ink-subtle);
    --fc-today-bg-color: transparent;
    --fc-now-indicator-color: var(--bcs-primary);
    --fc-event-bg-color: transparent;
    --fc-event-border-color: transparent;
    --fc-event-text-color: inherit;
    --fc-event-selected-overlay-color: transparent;
    --fc-more-link-bg-color: transparent;
    --fc-more-link-text-color: var(--bcs-ink-muted);
    --fc-highlight-color: color-mix(in srgb, var(--bcs-primary-soft) 45%, transparent);
    --fc-non-business-color: rgb(248 250 252 / 0.7);
    --fc-list-event-hover-bg-color: var(--bcs-surface-muted);
    --fc-small-font-size: 12px;
    color: var(--bcs-ink);
}
.bcs-cal .st-scheduled { --st-soft: var(--bcs-primary-soft); --st-strong: var(--bcs-primary-strong); --st-dot: var(--bcs-primary); }
.bcs-cal .st-completed { --st-soft: var(--bcs-success-soft); --st-strong: var(--bcs-success-strong); --st-dot: var(--bcs-success); }
.bcs-cal .st-pending   { --st-soft: var(--bcs-warning-soft); --st-strong: var(--bcs-warning-strong); --st-dot: var(--bcs-warning); }
.bcs-cal .st-cancelled { --st-soft: var(--bcs-danger-soft);  --st-strong: var(--bcs-danger-strong);  --st-dot: var(--bcs-danger); }
.bcs-cal .st-all       { --st-soft: var(--bcs-surface-muted); --st-strong: var(--bcs-ink-muted);    --st-dot: var(--bcs-ink-subtle); }
.bcs-cal .bcs-cal-dot { display: inline-block; flex: none; width: 8px; height: 8px; border-radius: 9999px; background: var(--st-dot); }
.bcs-cal .bcs-cal-badge { display: inline-flex; align-items: center; flex: none; height: 20px; padding: 0 8px; border-radius: 9999px; font-size: 11px; line-height: 16px; font-weight: 500; background: var(--st-soft); color: var(--st-strong); }

/* Toolbar: views | prev, title, next | Today + status filter. Stacked: [prev title next · Today] / [views · filter] */
.bcs-cal-toolbar { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); grid-template-areas: "views nav actions"; align-items: center; gap: 12px 16px; margin-bottom: 16px; }
.bcs-cal-views { grid-area: views; justify-self: start; }
.bcs-cal-nav { grid-area: nav; display: flex; align-items: center; gap: 12px; min-width: 0; }
.bcs-cal-actions { grid-area: actions; justify-self: end; display: flex; align-items: center; gap: 8px; }
.bcs-cal-title { min-width: 13rem; margin: 0; font-size: 20px; line-height: 28px; font-weight: 600; letter-spacing: -0.01em; text-align: center; white-space: nowrap; font-variant-numeric: tabular-nums; }
/* Three columns so Today (row 1) and the filter (row 2) size independently: the title keeps its room */
.bcs-cal.is-stacked .bcs-cal-toolbar { grid-template-columns: minmax(0, 1fr) auto auto; grid-template-areas: "nav nav today" "views filter filter"; gap: 12px 8px; }
.bcs-cal.is-stacked .bcs-cal-actions { display: contents; }
.bcs-cal.is-stacked .bcs-cal-today { grid-area: today; justify-self: end; padding: 0 12px; }
.bcs-cal.is-stacked .bcs-cal-filter { grid-area: filter; justify-self: end; }
.bcs-cal.is-stacked .bcs-cal-nav { gap: 6px; }
.bcs-cal.is-stacked .bcs-cal-title { min-width: 0; padding: 0 2px; font-size: 16px; line-height: 24px; overflow: hidden; text-overflow: ellipsis; }
.bcs-cal.is-compact .bcs-cal-views { justify-self: stretch; }
.bcs-cal.is-compact .bcs-cal-seg { display: flex; }
.bcs-cal.is-compact .bcs-cal-seg > button { flex: 1 1 0; padding: 0 8px; }

/* Segmented view switcher: joined 8px group, the active item fills with the action colour */
.bcs-cal-seg { display: inline-flex; background: var(--bcs-surface); border: 1px solid var(--bcs-edge); border-radius: 8px; box-shadow: 0 1px 2px rgb(15 23 42 / 0.04); }
.bcs-cal-seg > button { position: relative; height: 34px; padding: 0 18px; font-size: 13px; line-height: 18px; font-weight: 500; color: var(--bcs-ink-muted); background: transparent; border: 0; cursor: pointer; transition: background-color 0.15s ease, color 0.15s ease; }
.bcs-cal-seg > button + button { box-shadow: -1px 0 0 var(--bcs-edge); }
.bcs-cal-seg > button:first-child { border-radius: 7px 0 0 7px; }
.bcs-cal-seg > button:last-child { border-radius: 0 7px 7px 0; }
.bcs-cal-seg > button:hover { color: var(--bcs-ink); background: var(--bcs-surface-muted); }
.bcs-cal-seg > button[aria-pressed="true"] { z-index: 1; color: var(--bcs-on-primary); background: var(--bcs-primary); box-shadow: 0 0 0 1px var(--bcs-primary); }
.bcs-cal-seg > button:focus-visible { z-index: 2; outline: none; box-shadow: 0 0 0 3px var(--bcs-focus); }
.bcs-cal-seg > button[aria-pressed="true"]:focus-visible { box-shadow: 0 0 0 1px var(--bcs-primary), 0 0 0 4px var(--bcs-focus); }

/* ---- FullCalendar: shared grid ---- */
.bcs-cal .fc { font-size: 13px; }
.bcs-cal .fc a { color: inherit; }
.bcs-cal .fc .fc-scrollgrid { border-radius: 10px; overflow: hidden; }
.bcs-cal .fc .fc-col-header-cell { background: var(--bcs-surface-muted); }
.bcs-cal .fc .fc-col-header-cell-cushion { display: block; padding: 11px 4px; font-size: 13px; line-height: 18px; font-weight: 500; color: var(--bcs-ink-muted); text-decoration: none; }
.bcs-cal .fc a[data-navlink]:hover { text-decoration: none; }
.bcs-cal .fc a[data-navlink]:focus-visible { outline: 2px solid var(--bcs-primary); outline-offset: 1px; border-radius: 6px; }

/* Event chips: soft status tint, strong text, time then title */
.bcs-cal .fc .fc-h-event.bcs-cal-ev,
.bcs-cal .fc .fc-v-event.bcs-cal-ev { background: var(--st-soft); color: var(--st-strong); border: 0; border-radius: 6px; }
.bcs-cal .fc .bcs-cal-ev .fc-event-main { color: inherit; }
.bcs-cal .fc .bcs-cal-ev:hover { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--st-strong) 28%, transparent); }
.bcs-cal .fc .bcs-cal-ev:focus { box-shadow: none; }
.bcs-cal .fc .bcs-cal-ev:focus::before,
.bcs-cal .fc .bcs-cal-ev:focus::after { display: none; }
.bcs-cal .fc .bcs-cal-ev:focus-visible { outline: 2px solid var(--bcs-primary); outline-offset: 1px; }
.bcs-cal-ev-line { display: flex; align-items: baseline; gap: 5px; min-width: 0; overflow: hidden; }
.bcs-cal-ev-time { flex: none; font-variant-numeric: tabular-nums; opacity: 0.9; }
.bcs-cal-ev-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
.bcs-cal-ev-sub { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; opacity: 0.85; }
.bcs-cal .st-cancelled .bcs-cal-ev-title { text-decoration: line-through; text-decoration-thickness: 1px; opacity: 0.75; }

/* ---- Month (dayGrid) ---- */
.bcs-cal .fc .fc-daygrid-day-frame { min-height: 112px; }
.bcs-cal .fc .fc-daygrid-day-top { flex-direction: row; }
.bcs-cal .fc .fc-daygrid-day-number { display: inline-flex; align-items: center; justify-content: center; min-width: 26px; height: 26px; margin: 6px 0 4px 6px; padding: 0 5px; border-radius: 9999px; font-size: 13px; line-height: 1; font-weight: 600; color: var(--bcs-ink); text-decoration: none; font-variant-numeric: tabular-nums; }
.bcs-cal .fc .fc-daygrid-day-number[data-navlink]:hover { background: var(--bcs-surface-muted); }
.bcs-cal .fc .fc-day-today .fc-daygrid-day-number { background: var(--bcs-primary-soft); color: var(--bcs-primary-strong); }
.bcs-cal .fc .fc-daygrid-day.fc-day-other { background: var(--bcs-surface-muted); }
.bcs-cal .fc .fc-day-other .fc-daygrid-day-top { opacity: 1; }
.bcs-cal .fc .fc-day-other .fc-daygrid-day-number { font-weight: 500; color: var(--bcs-ink-subtle); }
/* Closed days keep a plain cell in the month: the shading only covered the frame, not a stretched row */
.bcs-cal .fc .fc-daygrid-day .fc-non-business { display: none; }
.bcs-cal .fc .fc-daygrid-day-events { margin-top: 0; }
.bcs-cal .fc .fc-daygrid-body-natural .fc-daygrid-day-events { margin-bottom: 4px; }
.bcs-cal .fc .fc-daygrid-event.bcs-cal-ev { margin: 0 4px 4px; padding: 4px 6px; font-size: 12px; line-height: 16px; white-space: nowrap; }
.bcs-cal .fc .fc-daygrid-event .bcs-cal-ev-title { font-weight: 400; }
.bcs-cal .fc .fc-daygrid-day-bottom { margin: 0 6px 6px; font-size: 12px; }
.bcs-cal .fc .fc-daygrid-more-link { padding: 2px; font-size: 12px; line-height: 16px; font-weight: 500; color: var(--bcs-ink-muted); border-radius: 4px; }
.bcs-cal .fc .fc-daygrid-more-link:hover { background: none; color: var(--bcs-primary); text-decoration: underline; text-underline-offset: 2px; }
.bcs-cal .fc .fc-daygrid-more-link:focus-visible { outline: 2px solid var(--bcs-primary); outline-offset: 1px; }
/* "+N more" popover */
.bcs-cal .fc .fc-popover { min-width: 232px; border: 1px solid var(--bcs-edge); border-radius: 10px; box-shadow: 0 1px 2px rgb(15 23 42 / 0.04), 0 4px 8px -2px rgb(15 23 42 / 0.06), 0 16px 32px -8px rgb(15 23 42 / 0.16); overflow: hidden; }
.bcs-cal .fc .fc-popover-header { padding: 10px 10px 6px 12px; background: var(--bcs-surface); font-size: 13px; font-weight: 600; color: var(--bcs-ink); }
.bcs-cal .fc .fc-popover-close { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 6px; color: var(--bcs-ink-subtle); opacity: 1; }
.bcs-cal .fc .fc-popover-close:hover { background: var(--bcs-surface-muted); color: var(--bcs-ink); }
.bcs-cal .fc .fc-more-popover .fc-popover-body { min-width: 0; padding: 2px 6px 6px; }
.bcs-cal .fc .fc-popover .fc-daygrid-event.bcs-cal-ev { margin: 0 0 4px; }

/* ---- Week and day (timeGrid) ---- */
.bcs-cal .fc .fc-timegrid-axis { background: var(--bcs-surface-muted); }
.bcs-cal .fc .fc-timegrid-slot { height: 28px; }
.bcs-cal .fc .fc-timegrid-slot-minor { border-top-style: dashed; border-top-color: rgb(229 231 235 / 0.7); }
.bcs-cal .fc .fc-timegrid-slot-label { vertical-align: top; border-top-color: transparent; }
.bcs-cal .fc .fc-timegrid-slot-label-cushion { padding: 3px 10px 0 8px; font-size: 11px; line-height: 14px; color: var(--bcs-ink-subtle); font-variant-numeric: tabular-nums; }
.bcs-cal .fc .fc-timegrid-col.fc-day-today { background: color-mix(in srgb, var(--bcs-primary-soft) 22%, transparent); }
.bcs-cal .fc .fc-timegrid-col-events { margin: 0 6px 0 3px; }
.bcs-cal .fc .fc-timegrid-event.bcs-cal-ev { box-shadow: 0 0 0 1px var(--bcs-surface); }
.bcs-cal .fc .fc-timegrid-event.bcs-cal-ev:hover { box-shadow: 0 0 0 1px var(--bcs-surface), inset 0 0 0 1px color-mix(in srgb, var(--st-strong) 28%, transparent); }
.bcs-cal .fc .fc-timegrid-event .fc-event-main { padding: 4px 7px; font-size: 12px; line-height: 15px; overflow: hidden; }
.bcs-cal-ev-stack { display: flex; flex-direction: column; gap: 1px; height: 100%; min-width: 0; overflow: hidden; }
.bcs-cal .fc .fc-timegrid-now-indicator-line { border-width: 2px 0 0; }
.bcs-cal .fc .fc-timegrid-now-indicator-line::before { content: ""; position: absolute; left: -5px; top: -6px; width: 10px; height: 10px; border-radius: 9999px; background: var(--bcs-primary); }
.bcs-cal .fc .fc-timegrid-now-indicator-arrow { display: none; }
.bcs-cal-dh { display: inline-flex; align-items: center; gap: 6px; }
.bcs-cal-dh-num { display: inline-flex; align-items: center; justify-content: center; min-width: 26px; height: 26px; padding: 0 4px; border-radius: 9999px; font-weight: 600; color: var(--bcs-ink); font-variant-numeric: tabular-nums; }
.bcs-cal .fc .fc-day-today .bcs-cal-dh-num { background: var(--bcs-primary-soft); color: var(--bcs-primary-strong); }
.bcs-cal .fc .fc-timegrid .fc-col-header-cell-cushion { padding: 8px 4px; }

/* ---- List (week view when compact) ---- */
.bcs-cal .fc-theme-standard .fc-list { border-radius: 10px; overflow: hidden; }
.bcs-cal .fc .fc-list-day-cushion { padding: 8px 12px; background: var(--bcs-surface-muted); font-size: 13px; line-height: 18px; text-align: left; }
.bcs-cal .fc .fc-list-event-title { width: 100%; max-width: 0; }
.bcs-cal .fc .fc-list-day-text { font-weight: 600; color: var(--bcs-ink); text-decoration: none; }
.bcs-cal .fc .fc-list-table td { padding: 10px 10px; font-size: 13px; line-height: 18px; vertical-align: middle; }
.bcs-cal .fc .fc-list-table td:first-child { padding-left: 12px; }
.bcs-cal .fc .fc-list-table td:last-child { padding-right: 12px; }
.bcs-cal .fc .fc-list-event-time { color: var(--bcs-ink-muted); font-variant-numeric: tabular-nums; }
.bcs-cal .fc .fc-list-event-graphic { padding-right: 0; }
.bcs-cal .fc .fc-list-event-dot { border-color: var(--st-dot); border-width: 4px; border-radius: 4px; }
.bcs-cal .fc .fc-list-event.bcs-cal-ev:focus-visible { outline: 2px solid var(--bcs-primary); outline-offset: -2px; }
.bcs-cal .fc .fc-list-empty { background: var(--bcs-surface-muted); }
.bcs-cal .fc .fc-list-empty-cushion { margin: 40px 0; font-size: 13px; color: var(--bcs-ink-muted); }
.bcs-cal-list-row { display: flex; align-items: center; gap: 8px; min-width: 0; }
.bcs-cal-list-row > span:first-child { flex: 1 1 auto; min-width: 0; }
.bcs-cal-list-row .bcs-cal-ev-title,
.bcs-cal-list-row .bcs-cal-ev-sub { display: block; }
.bcs-cal-list-row .bcs-cal-ev-title { color: var(--bcs-ink); }
.bcs-cal-list-row .bcs-cal-ev-sub { font-size: 12px; line-height: 16px; color: var(--bcs-ink-muted); opacity: 1; }

/* ---- Compact month: dots under the day number, tap a day to list it below ---- */
.bcs-cal.is-compact .fc .fc-dayGridMonth-view .fc-col-header-cell-cushion { padding: 8px 0; font-size: 12px; }
.bcs-cal.is-compact .fc .fc-dayGridMonth-view .fc-daygrid-day-frame { min-height: 54px; cursor: pointer; }
.bcs-cal.is-compact .fc .fc-dayGridMonth-view .fc-daygrid-day-top { justify-content: center; }
.bcs-cal.is-compact .fc .fc-dayGridMonth-view .fc-daygrid-day-number { width: 30px; height: 30px; min-width: 0; margin: 5px auto 2px; padding: 0; }
.bcs-cal.is-compact .fc .fc-dayGridMonth-view .fc-daygrid-day.is-selected .fc-daygrid-day-number { background: var(--bcs-primary); color: var(--bcs-on-primary); }
.bcs-cal.is-compact .fc .fc-dayGridMonth-view .fc-daygrid-day-events { display: flex; flex-wrap: wrap; justify-content: center; gap: 3px; min-height: 6px; margin: 0 4px 8px; pointer-events: none; }
.bcs-cal.is-compact .fc .fc-dayGridMonth-view .fc-daygrid-event-harness { margin-top: 0 !important; }
.bcs-cal.is-compact .fc .fc-dayGridMonth-view .fc-daygrid-event.bcs-cal-ev { width: 6px; height: 6px; margin: 0; padding: 0; border-radius: 9999px; background: var(--st-dot); box-shadow: none; }
.bcs-cal.is-compact .fc .fc-dayGridMonth-view .fc-daygrid-day-bottom { display: none; }

/* Legend: four swatches with label and one-line meaning */
.bcs-cal-legend { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px 24px; margin: 16px 0 0; padding: 16px 20px; list-style: none; border: 1px solid var(--bcs-edge); border-radius: 10px; }
.bcs-cal-legend > li { display: flex; align-items: center; gap: 12px; min-width: 0; }
.bcs-cal-swatch { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 36px; height: 36px; border-radius: 8px; background: var(--st-soft); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--st-strong) 10%, transparent); }
.bcs-cal-swatch > .bcs-cal-dot { display: none; }
.bcs-cal.is-compact .bcs-cal-legend { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 12px; padding: 14px; }
.bcs-cal.is-compact .bcs-cal-swatch { width: 32px; height: 32px; }
.bcs-cal.is-compact .bcs-cal-swatch > .bcs-cal-dot { display: inline-block; }

@media (prefers-reduced-motion: reduce) {
    .bcs-cal-seg > button { transition: none; }
}
/* --- end refresh: calendar --- */

/* --- refresh: email templates (preview chrome only; emails themselves use inline styles) --- */
/* Preview for pages/emails.html. The emails keep every style inline; these rules only frame them.
   The canvas takes data-width="600|375" from the width toggle. The frame is a size container, so the
   container query below replays base.blade.php's @media (max-width: 620px) block: at 375px, or on a
   phone-width page, the preview shows the same layout a phone mail app would. */
.bcs-email-canvas { background: var(--bcs-page); }
.bcs-email-canvas.is-plain[data-width="600"] { background: #ffffff; } /* a plain-text email has no layout card: the message fills the reading pane */
.bcs-email-canvas[data-width="375"] { padding: 24px 16px 32px; }
.bcs-email-frame { container-type: inline-size; width: 100%; margin: 0 auto; }
.bcs-email-canvas[data-width="375"] .bcs-email-frame {
    max-width: 375px; overflow: hidden; background: #f1f5f9;
    border: 1px solid var(--bcs-edge); border-radius: 20px; box-shadow: 0 1px 2px rgb(15 23 42 / 0.06);
}
/* Mail clients keep the UA table default; Tailwind's preflight collapses borders, which drops rounded corners. */
.bcs-email-frame table { border-collapse: separate; }
@container (max-width: 620px) {
    .bcs-email-frame .em-outer { padding: 0 !important; }
    .bcs-email-frame .em-card { border-radius: 0 !important; border-width: 0 !important; }
    .bcs-email-frame .em-pad { padding-left: 24px !important; padding-right: 24px !important; }
    .bcs-email-frame .em-col { display: block !important; width: 100% !important; padding-left: 0 !important; padding-right: 0 !important; }
    .bcs-email-frame .em-col-gap { padding-top: 24px !important; border-left: 0 !important; }
    .bcs-email-frame .em-col-gap-sm { padding-top: 12px !important; }
    .bcs-email-frame .em-right { text-align: left !important; white-space: normal !important; }
    .bcs-email-frame .em-nav { padding-top: 14px !important; }
    .bcs-email-frame .em-h1 { font-size: 24px !important; line-height: 30px !important; }
    .bcs-email-frame .em-hero-copy { padding: 36px 24px 0 !important; }
    .bcs-email-frame .em-hero-h1 { font-size: 28px !important; line-height: 34px !important; }
    .bcs-email-frame .em-hero-art { padding: 24px 24px 32px !important; text-align: left !important; }
    .bcs-email-frame .em-img { width: 100% !important; height: auto !important; }
}
/* "Show variables": each sample value is swapped for its Blade expression and marked. */
.bcs-email-frame.is-vars [data-em-var]:not([data-em-html]),
.bcs-email-frame .bcs-email-var {
    background: var(--bcs-warning-soft); color: var(--bcs-warning-strong); border-radius: 4px; padding: 0 3px;
    box-shadow: inset 0 0 0 1px rgb(245 158 11 / 0.45); letter-spacing: 0; word-break: break-word;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12px; line-height: 1.6; font-weight: 500;
}
/* Inter's contextual alternates draw "->" as an arrow; Blade expressions need it literal. */
.bcs-email-nolig { font-feature-settings: 'calt' 0; font-variant-ligatures: none; }
/* View and variable names in the preview toolbar */
.bcs-email-code {
    display: inline-block; padding: 1px 6px; border: 1px solid var(--bcs-edge); border-radius: 6px;
    background: var(--bcs-surface-muted); color: var(--bcs-ink);
    font: 500 11.5px/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
/* --- end refresh: email templates --- */