/* ==========================================================================
   BASMATI UI — Design System
   A minimal, premium SaaS layer sitting on top of the app's Tailwind v2 build.
   Namespaced with `bs-` so it never collides with existing page styles.
   Safe to reuse across the rest of the application.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
:root {
    /* Brand */
    --bs-primary: #2563eb;
    --bs-primary-600: #2563eb;
    --bs-primary-700: #1d4ed8;
    --bs-primary-soft: #eff6ff;

    /* Neutrals */
    --bs-bg: #fafafb;
    --bs-surface: #ffffff;
    --bs-surface-2: #f7f8fa;
    --bs-border: #ecedf1;
    --bs-border-strong: #e2e4ea;

    /* Text */
    --bs-text: #0d1117;
    --bs-text-secondary: #4b5563;
    --bs-text-muted: #8b93a1;

    /* Radii — 8px grid derived */
    --bs-r-sm: 10px;
    --bs-r-md: 14px;
    --bs-r-lg: 20px;
    --bs-r-xl: 24px;
    --bs-r-full: 999px;

    /* Elevation — layered, low-opacity, no hard edges */
    --bs-shadow-xs: 0 1px 2px rgba(16, 24, 40, 0.04);
    --bs-shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.04), 0 1px 3px rgba(16, 24, 40, 0.04);
    --bs-shadow-md: 0 2px 4px rgba(16, 24, 40, 0.03), 0 8px 20px -6px rgba(16, 24, 40, 0.08);
    --bs-shadow-lg: 0 4px 8px rgba(16, 24, 40, 0.04), 0 18px 40px -12px rgba(16, 24, 40, 0.14);
    --bs-shadow-primary: 0 8px 24px -8px rgba(37, 99, 235, 0.45);

    /* Motion */
    --bs-ease: cubic-bezier(0.22, 1, 0.36, 1);
    --bs-fast: 140ms;
    --bs-base: 240ms;
    --bs-slow: 420ms;

    /* Chrome metrics */
    --bs-rail: 76px;
    --bs-rail-open: 268px;
    --bs-topbar: 68px;
}

/* Tone palette — set on a wrapper, consumed by children via var(--bs-tone) */
.bs-tone-blue    { --bs-tone: #2563eb; --bs-tone-soft: #eff6ff; --bs-tone-ring: rgba(37, 99, 235, 0.14); }
.bs-tone-emerald { --bs-tone: #059669; --bs-tone-soft: #ecfdf5; --bs-tone-ring: rgba(5, 150, 105, 0.14); }
.bs-tone-violet  { --bs-tone: #7c3aed; --bs-tone-soft: #f5f3ff; --bs-tone-ring: rgba(124, 58, 237, 0.14); }
.bs-tone-amber   { --bs-tone: #d97706; --bs-tone-soft: #fffbeb; --bs-tone-ring: rgba(217, 119, 6, 0.14); }
.bs-tone-rose    { --bs-tone: #e11d48; --bs-tone-soft: #fff1f2; --bs-tone-ring: rgba(225, 29, 72, 0.14); }
.bs-tone-slate   { --bs-tone: #475569; --bs-tone-soft: #f8fafc; --bs-tone-ring: rgba(71, 85, 105, 0.14); }

/* --------------------------------------------------------------------------
   2. Base
   -------------------------------------------------------------------------- */
.bs-shell {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background-color: var(--bs-bg);
    color: var(--bs-text);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-feature-settings: 'cv11', 'ss01';
}

.bs-num {
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
}

.bs-title {
    font-weight: 700;
    letter-spacing: -0.025em;
    color: var(--bs-text);
}

.bs-label {
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.01em;
    color: var(--bs-text-muted);
}

.bs-eyebrow {
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--bs-text-muted);
}

.bs-focus:focus-visible {
    outline: 2px solid var(--bs-primary);
    outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   3. Application chrome — sidebar
   -------------------------------------------------------------------------- */
.bs-sidebar {
    position: relative;
    z-index: 30;
    flex-shrink: 0;
    width: var(--bs-rail);
}

.bs-sidebar-panel {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    width: var(--bs-rail);
    padding: 14px 12px;
    background-color: var(--bs-surface);
    border-right: 1px solid var(--bs-border);
    overflow: hidden;
    transition: width var(--bs-base) var(--bs-ease), box-shadow var(--bs-base) var(--bs-ease);
}

.bs-sidebar:hover .bs-sidebar-panel,
.bs-sidebar:focus-within .bs-sidebar-panel {
    width: var(--bs-rail-open);
    box-shadow: var(--bs-shadow-lg);
}

.bs-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 6px 8px 18px;
    min-height: 56px;
}

.bs-brand-mark {
    flex-shrink: 0;
    width: 38px;
    height: 38px;
    border-radius: 11px;
    object-fit: contain;
    background-color: var(--bs-surface-2);
}

.bs-brand-text {
    display: flex;
    flex-direction: column;
    line-height: 1.15;
    white-space: nowrap;
}

.bs-brand-name {
    font-size: 0.9375rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--bs-text);
}

.bs-brand-sub {
    font-size: 0.6875rem;
    font-weight: 500;
    color: var(--bs-text-muted);
}

/* Everything that only exists when the rail is expanded */
.bs-rail-reveal {
    opacity: 0;
    transform: translateX(-6px);
    transition: opacity var(--bs-fast) var(--bs-ease), transform var(--bs-base) var(--bs-ease);
    pointer-events: none;
}

.bs-sidebar:hover .bs-rail-reveal,
.bs-sidebar:focus-within .bs-rail-reveal {
    opacity: 1;
    transform: translateX(0);
    transition-delay: 60ms;
    pointer-events: auto;
}

.bs-nav {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1 1 auto;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: none;
}

.bs-nav::-webkit-scrollbar { display: none; }

.bs-nav-section {
    padding: 16px 10px 6px;
    white-space: nowrap;
}

.bs-nav-link {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    height: 44px;
    padding: 0 10px;
    border-radius: var(--bs-r-md);
    color: var(--bs-text-secondary);
    font-size: 0.875rem;
    font-weight: 500;
    white-space: nowrap;
    text-decoration: none;
    transition: background-color var(--bs-fast) var(--bs-ease), color var(--bs-fast) var(--bs-ease);
}

.bs-nav-link:hover {
    background-color: var(--bs-surface-2);
    color: var(--bs-text);
}

.bs-nav-icon {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    color: inherit;
}

.bs-nav-link.is-active {
    background-color: var(--bs-primary-soft);
    color: var(--bs-primary-700);
    font-weight: 600;
}

.bs-nav-link.is-active::before {
    content: '';
    position: absolute;
    left: -12px;
    top: 50%;
    width: 3px;
    height: 20px;
    border-radius: 0 3px 3px 0;
    background-color: var(--bs-primary);
    transform: translateY(-50%);
}

.bs-sidebar-foot {
    padding: 12px 10px 4px;
    border-top: 1px solid var(--bs-border);
    white-space: nowrap;
}

/* --------------------------------------------------------------------------
   4. Application chrome — topbar
   -------------------------------------------------------------------------- */
.bs-topbar {
    display: flex;
    align-items: center;
    gap: 16px;
    height: var(--bs-topbar);
    padding: 0 24px;
    background-color: rgba(255, 255, 255, 0.82);
    backdrop-filter: saturate(180%) blur(16px);
    -webkit-backdrop-filter: saturate(180%) blur(16px);
    border-bottom: 1px solid var(--bs-border);
    flex-shrink: 0;

    /* Why this is positioned:
       `backdrop-filter` makes this element a stacking context, so the z-index
       on .bs-menu only ever competed with siblings *inside* the bar. The bar
       itself was static and painted before <main>, and every .bs-card in there
       is position:relative — so cards drew on top and the dropdowns vanished
       behind the page. Lifting the whole bar fixes every menu it contains. */
    position: relative;
    z-index: 60;
}

.bs-page-title {
    font-size: 0.9375rem;
    font-weight: 600;
    letter-spacing: -0.015em;
    color: var(--bs-text);
    white-space: nowrap;
}

.bs-search {
    position: relative;
    flex: 1 1 auto;
    max-width: 420px;
}

.bs-search-input {
    width: 100%;
    height: 38px;
    padding: 0 40px 0 38px;
    font-size: 0.875rem;
    color: var(--bs-text);
    background-color: var(--bs-surface-2);
    border: 1px solid transparent;
    border-radius: var(--bs-r-md);
    transition: background-color var(--bs-fast) var(--bs-ease), border-color var(--bs-fast) var(--bs-ease), box-shadow var(--bs-fast) var(--bs-ease);
}

.bs-search-input::placeholder { color: var(--bs-text-muted); }

.bs-search-input:focus {
    outline: none;
    background-color: var(--bs-surface);
    border-color: var(--bs-primary);
    box-shadow: 0 0 0 4px var(--bs-primary-soft);
}

.bs-search-icon {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--bs-text-muted);
    pointer-events: none;
}

.bs-kbd {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    padding: 2px 6px;
    font-size: 0.6875rem;
    font-weight: 500;
    color: var(--bs-text-muted);
    background-color: var(--bs-surface);
    border: 1px solid var(--bs-border-strong);
    border-radius: 6px;
    pointer-events: none;
}

.bs-topbar-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
}

.bs-divider-v {
    width: 1px;
    height: 24px;
    background-color: var(--bs-border-strong);
    flex-shrink: 0;
}

.bs-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: var(--bs-r-md);
    color: var(--bs-text-secondary);
    background-color: transparent;
    border: none;
    cursor: pointer;
    transition: background-color var(--bs-fast) var(--bs-ease), color var(--bs-fast) var(--bs-ease);
}

.bs-icon-btn:hover {
    background-color: var(--bs-surface-2);
    color: var(--bs-text);
}

.bs-ghost-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 36px;
    padding: 0 10px;
    border-radius: var(--bs-r-md);
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--bs-text-secondary);
    background-color: transparent;
    border: none;
    cursor: pointer;
    white-space: nowrap;
    transition: background-color var(--bs-fast) var(--bs-ease), color var(--bs-fast) var(--bs-ease);
}

.bs-ghost-btn:hover {
    background-color: var(--bs-surface-2);
    color: var(--bs-text);
}

.bs-clock-date {
    font-size: 0.6875rem;
    font-weight: 500;
    color: var(--bs-text-muted);
    line-height: 1.3;
}

.bs-clock-time {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--bs-text);
    font-variant-numeric: tabular-nums;
    line-height: 1.3;
}

.bs-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 28px;
    padding: 0 10px;
    border-radius: var(--bs-r-full);
    font-size: 0.75rem;
    font-weight: 600;
    white-space: nowrap;
    color: var(--bs-tone, var(--bs-text-secondary));
    background-color: var(--bs-tone-soft, var(--bs-surface-2));
}

.bs-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 34px;
    height: 34px;
    border-radius: var(--bs-r-full);
    font-size: 0.75rem;
    font-weight: 600;
    color: #fff;
    background-image: linear-gradient(135deg, #3b82f6, #2563eb);
    letter-spacing: 0.01em;
}

.bs-avatar-lg { width: 40px; height: 40px; font-size: 0.8125rem; }

.bs-menu {
    position: absolute;
    right: 0;
    top: calc(100% + 8px);
    min-width: 240px;
    padding: 6px;
    background-color: var(--bs-surface);
    border: 1px solid var(--bs-border);
    border-radius: var(--bs-r-md);
    box-shadow: var(--bs-shadow-lg);
    z-index: 60;
}

.bs-menu-head {
    padding: 8px 10px;
    margin-bottom: 4px;
    border-bottom: 1px solid var(--bs-border);
}

.bs-menu-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 8px 10px;
    border-radius: var(--bs-r-sm);
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--bs-text-secondary);
    text-align: left;
    background: none;
    border: none;
    cursor: pointer;
    text-decoration: none;
    transition: background-color var(--bs-fast) var(--bs-ease), color var(--bs-fast) var(--bs-ease);
}

.bs-menu-item:hover {
    background-color: var(--bs-surface-2);
    color: var(--bs-text);
}

.bs-menu-item.is-danger { color: #e11d48; }
.bs-menu-item.is-danger:hover { background-color: #fff1f2; }

.bs-main {
    flex: 1 1 auto;
    overflow-y: auto;
    background-color: var(--bs-bg);
}

/* --------------------------------------------------------------------------
   5. Surfaces
   -------------------------------------------------------------------------- */
.bs-card {
    position: relative;
    background-color: var(--bs-surface);
    border: 1px solid var(--bs-border);
    border-radius: var(--bs-r-lg);
    box-shadow: var(--bs-shadow-sm);
}

.bs-card-pad { padding: 24px; }
.bs-card-pad-sm { padding: 16px; }

.bs-card-interactive {
    transition: transform var(--bs-base) var(--bs-ease), box-shadow var(--bs-base) var(--bs-ease), border-color var(--bs-base) var(--bs-ease);
}

.bs-card-interactive:hover {
    transform: translateY(-2px);
    box-shadow: var(--bs-shadow-lg);
    border-color: var(--bs-border-strong);
}

.bs-card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 20px;
}

.bs-card-title {
    font-size: 0.9375rem;
    font-weight: 600;
    letter-spacing: -0.015em;
    color: var(--bs-text);
}

.bs-card-sub {
    margin-top: 2px;
    font-size: 0.8125rem;
    color: var(--bs-text-muted);
}

.bs-card-action { flex-shrink: 0; }

.bs-section-title {
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--bs-text-secondary);
}

/* --------------------------------------------------------------------------
   6. Hero
   -------------------------------------------------------------------------- */
.bs-hero {
    position: relative;
    overflow: hidden;
    padding: 28px;
    border-radius: var(--bs-r-xl);
    background-color: #0f172a;
    background-image:
        radial-gradient(120% 140% at 0% 0%, #1e3a8a 0%, rgba(30, 58, 138, 0) 55%),
        radial-gradient(100% 120% at 100% 0%, #1d4ed8 0%, rgba(29, 78, 216, 0) 50%),
        linear-gradient(135deg, #0b1220 0%, #111c34 100%);
    box-shadow: var(--bs-shadow-lg);
}

.bs-hero::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image: radial-gradient(60% 100% at 85% 120%, rgba(37, 99, 235, 0.35) 0%, rgba(37, 99, 235, 0) 70%);
    pointer-events: none;
}

.bs-hero-inner {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
    flex-wrap: wrap;
}

.bs-hero-date {
    font-size: 0.75rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.6);
    letter-spacing: 0.01em;
}

.bs-hero-title {
    margin-top: 6px;
    font-size: 1.75rem;
    font-weight: 700;
    letter-spacing: -0.03em;
    color: #fff;
    line-height: 1.15;
}

.bs-hero-sub {
    margin-top: 6px;
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.62);
    max-width: 46ch;
}

.bs-hero-stats {
    display: flex;
    align-items: stretch;
    gap: 8px;
    flex-wrap: wrap;
}

.bs-hero-stat {
    min-width: 132px;
    padding: 12px 16px;
    border-radius: var(--bs-r-md);
    background-color: rgba(255, 255, 255, 0.07);
    border: 1px solid rgba(255, 255, 255, 0.09);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    transition: background-color var(--bs-base) var(--bs-ease), transform var(--bs-base) var(--bs-ease);
}

.bs-hero-stat:hover {
    background-color: rgba(255, 255, 255, 0.11);
    transform: translateY(-2px);
}

.bs-hero-stat-label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.6875rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.58);
    white-space: nowrap;
}

.bs-hero-stat-value {
    margin-top: 4px;
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: -0.025em;
    color: #fff;
    font-variant-numeric: tabular-nums;
}

.bs-hero-stat-value small {
    font-size: 0.75rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.5);
    margin-left: 3px;
}

/* --------------------------------------------------------------------------
   7. KPI card
   -------------------------------------------------------------------------- */
.bs-kpi {
    position: relative;
    overflow: hidden;
    padding: 20px;
    background-color: var(--bs-surface);
    border: 1px solid var(--bs-border);
    border-radius: var(--bs-r-lg);
    box-shadow: var(--bs-shadow-sm);
    transition: transform var(--bs-base) var(--bs-ease), box-shadow var(--bs-base) var(--bs-ease), border-color var(--bs-base) var(--bs-ease);
}

.bs-kpi::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background-color: var(--bs-tone);
    opacity: 0;
    transition: opacity var(--bs-base) var(--bs-ease);
}

.bs-kpi:hover {
    transform: translateY(-3px);
    box-shadow: var(--bs-shadow-lg);
    border-color: var(--bs-border-strong);
}

.bs-kpi:hover::before { opacity: 1; }

.bs-kpi-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.bs-kpi-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 12px;
    color: var(--bs-tone);
    background-color: var(--bs-tone-soft);
    transition: transform var(--bs-base) var(--bs-ease);
}

.bs-kpi:hover .bs-kpi-icon { transform: scale(1.06); }

.bs-kpi-label {
    margin-top: 16px;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--bs-text-muted);
}

.bs-kpi-value {
    margin-top: 4px;
    display: flex;
    align-items: baseline;
    gap: 5px;
    font-size: 1.75rem;
    font-weight: 700;
    letter-spacing: -0.035em;
    color: var(--bs-text);
    font-variant-numeric: tabular-nums;
    line-height: 1.1;
}

.bs-kpi-unit {
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--bs-text-muted);
    letter-spacing: 0;
}

.bs-kpi-spark {
    margin-top: 14px;
    height: 34px;
    color: var(--bs-tone);
}

/* Trend pill */
.bs-trend {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 3px 8px;
    border-radius: var(--bs-r-full);
    font-size: 0.6875rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.bs-trend-up { color: #047857; background-color: #ecfdf5; }
.bs-trend-down { color: #be123c; background-color: #fff1f2; }
.bs-trend-flat { color: #64748b; background-color: #f1f5f9; }

/* --------------------------------------------------------------------------
   8. Sparkline / charts
   -------------------------------------------------------------------------- */
.bs-spark { display: block; width: 100%; height: 100%; overflow: visible; }
.bs-spark-line { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.bs-spark-dot { fill: currentColor; }

.bs-chart-wrap {
    position: relative;
    height: 300px;
}

@media (min-width: 1024px) {
    .bs-chart-wrap { height: 340px; }
}

/* Segmented control (Linear / Raycast style) */
.bs-seg {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 3px;
    background-color: var(--bs-surface-2);
    border-radius: var(--bs-r-md);
}

.bs-seg-btn {
    padding: 6px 12px;
    border: none;
    border-radius: 10px;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--bs-text-muted);
    background-color: transparent;
    cursor: pointer;
    white-space: nowrap;
    transition: color var(--bs-fast) var(--bs-ease), background-color var(--bs-fast) var(--bs-ease), box-shadow var(--bs-fast) var(--bs-ease);
}

.bs-seg-btn:hover { color: var(--bs-text); }

.bs-seg-btn.is-active {
    color: var(--bs-text);
    font-weight: 600;
    background-color: var(--bs-surface);
    box-shadow: var(--bs-shadow-xs);
}

.bs-legend {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

.bs-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--bs-text-muted);
}

.bs-legend-swatch {
    width: 9px;
    height: 9px;
    border-radius: 3px;
    background-color: var(--bs-tone);
    flex-shrink: 0;
    /* Outline keeps a white swatch visible on a white card. */
    box-shadow: inset 0 0 0 1px rgba(9, 12, 20, 0.16);
}

/* --------------------------------------------------------------------------
   9. Timeline (today's schedule)
   -------------------------------------------------------------------------- */
.bs-timeline {
    position: relative;
    padding-left: 4px;
}

.bs-tl-item {
    position: relative;
    display: flex;
    gap: 16px;
    padding: 10px 12px 10px 0;
    border-radius: var(--bs-r-md);
    transition: background-color var(--bs-fast) var(--bs-ease);
}

.bs-tl-item:hover { background-color: var(--bs-surface-2); }

.bs-tl-time {
    flex-shrink: 0;
    width: 52px;
    padding-top: 2px;
    text-align: right;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--bs-text);
    font-variant-numeric: tabular-nums;
}

.bs-tl-duration {
    margin-top: 2px;
    font-size: 0.6875rem;
    font-weight: 500;
    color: var(--bs-text-muted);
}

.bs-tl-rail {
    position: relative;
    flex-shrink: 0;
    width: 10px;
    display: flex;
    justify-content: center;
}

.bs-tl-dot {
    position: relative;
    z-index: 1;
    width: 10px;
    height: 10px;
    margin-top: 6px;
    border-radius: 50%;
    background-color: var(--bs-surface);
    border: 2px solid var(--bs-tone);
    flex-shrink: 0;
}

.bs-tl-item.is-next .bs-tl-dot {
    background-color: var(--bs-tone);
    box-shadow: 0 0 0 4px var(--bs-tone-ring);
}

.bs-tl-line {
    position: absolute;
    top: 20px;
    bottom: -14px;
    left: 50%;
    width: 1.5px;
    margin-left: -0.75px;
    background-color: var(--bs-border);
}

.bs-tl-item:last-child .bs-tl-line { display: none; }

.bs-tl-body {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.bs-tl-name {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--bs-text);
    letter-spacing: -0.01em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.bs-tl-meta {
    margin-top: 1px;
    font-size: 0.75rem;
    color: var(--bs-text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.bs-tl-item.is-next {
    background-color: var(--bs-primary-soft);
}

.bs-tl-item.is-next:hover { background-color: #e5efff; }

/* --------------------------------------------------------------------------
   10. Status + badges
   -------------------------------------------------------------------------- */
.bs-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 9px;
    border-radius: var(--bs-r-full);
    font-size: 0.6875rem;
    font-weight: 600;
    white-space: nowrap;
    color: var(--bs-tone);
    background-color: var(--bs-tone-soft);
}

.bs-badge-dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background-color: currentColor;
    flex-shrink: 0;
}

.bs-badge-solid {
    color: #fff;
    background-color: var(--bs-tone);
}

/* --------------------------------------------------------------------------
   11. Activity feed
   -------------------------------------------------------------------------- */
.bs-activity {
    display: flex;
    gap: 12px;
    padding: 10px;
    border-radius: var(--bs-r-md);
    transition: background-color var(--bs-fast) var(--bs-ease);
}

.bs-activity:hover { background-color: var(--bs-surface-2); }

.bs-activity-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border-radius: 10px;
    color: var(--bs-tone);
    background-color: var(--bs-tone-soft);
}

.bs-activity-text {
    font-size: 0.8125rem;
    color: var(--bs-text-secondary);
    line-height: 1.45;
}

.bs-activity-text strong {
    font-weight: 600;
    color: var(--bs-text);
}

.bs-activity-time {
    margin-top: 2px;
    font-size: 0.6875rem;
    color: var(--bs-text-muted);
}

/* --------------------------------------------------------------------------
   12. Progress + financial
   -------------------------------------------------------------------------- */
.bs-progress {
    position: relative;
    height: 6px;
    border-radius: var(--bs-r-full);
    background-color: var(--bs-surface-2);
    overflow: hidden;
}

.bs-progress-bar {
    height: 100%;
    width: var(--bs-pct, 0%);
    border-radius: var(--bs-r-full);
    background-color: var(--bs-tone);
    transform-origin: left center;
    animation: bs-grow var(--bs-slow) var(--bs-ease) both;
}

@keyframes bs-grow {
    from { transform: scaleX(0); }
    to   { transform: scaleX(1); }
}

.bs-stat-block {
    padding: 16px;
    border-radius: var(--bs-r-md);
    background-color: var(--bs-surface-2);
}

.bs-stat-block-label {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--bs-text-muted);
}

.bs-stat-block-value {
    margin-top: 8px;
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: -0.03em;
    color: var(--bs-text);
    font-variant-numeric: tabular-nums;
}

.bs-stat-block-value small {
    font-size: 0.6875rem;
    font-weight: 500;
    color: var(--bs-text-muted);
    margin-left: 2px;
}

.bs-meter-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    font-size: 0.8125rem;
    margin-bottom: 8px;
}

.bs-meter-name { color: var(--bs-text-secondary); font-weight: 500; }
.bs-meter-value { color: var(--bs-text); font-weight: 600; font-variant-numeric: tabular-nums; }

/* Donut */
.bs-donut { transform: rotate(-90deg); }
.bs-donut-seg {
    fill: none;
    stroke-width: 14;
    stroke-linecap: butt;
    transition: stroke-width var(--bs-base) var(--bs-ease), opacity var(--bs-base) var(--bs-ease);
}
.bs-donut:hover .bs-donut-seg { opacity: 0.55; }
.bs-donut .bs-donut-seg:hover { opacity: 1; stroke-width: 17; }

.bs-donut-center {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

/* --------------------------------------------------------------------------
   13. Quick actions
   -------------------------------------------------------------------------- */
.bs-action {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 16px;
    border-radius: var(--bs-r-md);
    background-color: var(--bs-surface);
    border: 1px solid var(--bs-border);
    text-decoration: none;
    overflow: hidden;
    transition: transform var(--bs-base) var(--bs-ease), box-shadow var(--bs-base) var(--bs-ease), border-color var(--bs-base) var(--bs-ease);
}

.bs-action::after {
    content: '';
    position: absolute;
    inset: 0;
    background-color: var(--bs-tone-soft);
    opacity: 0;
    transition: opacity var(--bs-base) var(--bs-ease);
    pointer-events: none;
}

.bs-action:hover {
    transform: translateY(-3px);
    box-shadow: var(--bs-shadow-md);
    border-color: var(--bs-tone-ring);
}

.bs-action:hover::after { opacity: 0.6; }

.bs-action-icon {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 11px;
    color: var(--bs-tone);
    background-color: var(--bs-tone-soft);
    transition: transform var(--bs-base) var(--bs-ease);
}

.bs-action:hover .bs-action-icon { transform: scale(1.08); }

.bs-action-label {
    position: relative;
    z-index: 1;
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--bs-text);
}

.bs-action-desc {
    position: relative;
    z-index: 1;
    margin-top: 2px;
    font-size: 0.6875rem;
    color: var(--bs-text-muted);
}

/* --------------------------------------------------------------------------
   14. Needs attention
   -------------------------------------------------------------------------- */
.bs-attention {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    border-radius: var(--bs-r-md);
    background-color: var(--bs-tone-soft);
    text-decoration: none;
    transition: transform var(--bs-fast) var(--bs-ease);
}

.bs-attention:hover { transform: translateX(3px); }

.bs-attention-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border-radius: 10px;
    color: #fff;
    background-color: var(--bs-tone);
}

.bs-attention-title {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--bs-text);
}

.bs-attention-desc {
    margin-top: 1px;
    font-size: 0.6875rem;
    color: var(--bs-text-secondary);
}

.bs-attention-count {
    margin-left: auto;
    flex-shrink: 0;
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--bs-tone);
    font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------------------------
   15. Empty states
   -------------------------------------------------------------------------- */
.bs-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 24px;
    text-align: center;
}

.bs-empty-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    margin-bottom: 14px;
    border-radius: 14px;
    color: var(--bs-text-muted);
    background-color: var(--bs-surface-2);
}

.bs-empty-title {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--bs-text);
}

.bs-empty-desc {
    margin-top: 4px;
    font-size: 0.8125rem;
    color: var(--bs-text-muted);
    max-width: 34ch;
}

/* --------------------------------------------------------------------------
   16. Entrance animation
   -------------------------------------------------------------------------- */
@keyframes bs-fade-up {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}

.bs-reveal {
    animation: bs-fade-up var(--bs-slow) var(--bs-ease) both;
}

.bs-d-1 { animation-delay: 40ms; }
.bs-d-2 { animation-delay: 80ms; }
.bs-d-3 { animation-delay: 120ms; }
.bs-d-4 { animation-delay: 160ms; }
.bs-d-5 { animation-delay: 200ms; }
.bs-d-6 { animation-delay: 240ms; }
.bs-d-7 { animation-delay: 280ms; }

/* Livewire loading feedback */
@keyframes bs-spin {
    to { transform: rotate(360deg); }
}

.bs-spin-host {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.bs-spin-host.is-spinning {
    animation: bs-spin 900ms linear infinite;
}

@media (prefers-reduced-motion: reduce) {
    .bs-reveal,
    .bs-progress-bar { animation: none !important; }
    .bs-card-interactive:hover,
    .bs-kpi:hover,
    .bs-action:hover,
    .bs-hero-stat:hover,
    .bs-attention:hover { transform: none; }
    * { transition-duration: 0.01ms !important; }
}

/* --------------------------------------------------------------------------
   17. Dashboard layout grid (8px rhythm)
   -------------------------------------------------------------------------- */
.bs-page {
    max-width: 1440px;
    margin: 0 auto;
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

@media (min-width: 1024px) {
    .bs-page { padding: 32px; gap: 32px; }
}

.bs-grid { display: grid; gap: 20px; }

.bs-grid-kpi { grid-template-columns: repeat(1, minmax(0, 1fr)); }
.bs-grid-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.bs-grid-main { grid-template-columns: minmax(0, 1fr); }
.bs-grid-split { grid-template-columns: minmax(0, 1fr); }

@media (min-width: 640px) {
    .bs-grid-kpi { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .bs-grid-actions { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
    .bs-grid { gap: 24px; }
    .bs-grid-kpi { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .bs-grid-actions { grid-template-columns: repeat(5, minmax(0, 1fr)); }
    .bs-grid-main { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
    .bs-grid-split { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1280px) {
    .bs-grid-main { grid-template-columns: minmax(0, 2.2fr) minmax(0, 1fr); }
}

.bs-stack { display: flex; flex-direction: column; gap: 20px; }
.bs-stack-sm { display: flex; flex-direction: column; gap: 8px; }
.bs-stack-xs { display: flex; flex-direction: column; gap: 4px; }

.bs-scroll-y {
    overflow-y: auto;
    max-height: 372px;
    scrollbar-width: thin;
}

.bs-scroll-y::-webkit-scrollbar { width: 6px !important; }
.bs-scroll-y::-webkit-scrollbar-track { background: transparent !important; }
.bs-scroll-y::-webkit-scrollbar-thumb { background: var(--bs-border-strong) !important; border-radius: 3px !important; }

.bs-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--bs-primary);
    text-decoration: none;
    transition: gap var(--bs-fast) var(--bs-ease), color var(--bs-fast) var(--bs-ease);
}

.bs-link:hover { gap: 7px; color: var(--bs-primary-700); }

.bs-hide-sm { display: none; }
@media (min-width: 768px)  { .bs-hide-sm { display: block; } }
.bs-hide-md { display: none; }
@media (min-width: 1024px) { .bs-hide-md { display: flex; } }
.bs-hide-lg { display: none; }
@media (min-width: 1280px) { .bs-hide-lg { display: block; } }

/* --------------------------------------------------------------------------
   18. Dark mode — the app toggles `.dark` on <html>
   -------------------------------------------------------------------------- */
.dark .bs-shell {
    --bs-bg: #0b0d12;
    --bs-surface: #14171f;
    --bs-surface-2: #1b1f29;
    --bs-border: #232833;
    --bs-border-strong: #2d3340;
    --bs-text: #f3f4f6;
    --bs-text-secondary: #b6bdc9;
    --bs-text-muted: #78808f;
    --bs-primary-soft: #16233d;
    --bs-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
    --bs-shadow-md: 0 8px 20px -6px rgba(0, 0, 0, 0.55);
    --bs-shadow-lg: 0 18px 40px -12px rgba(0, 0, 0, 0.7);
}

.dark .bs-topbar { background-color: rgba(20, 23, 31, 0.82); }
.dark .bs-tone-blue    { --bs-tone: #60a5fa; --bs-tone-soft: #16233d; }
.dark .bs-tone-emerald { --bs-tone: #34d399; --bs-tone-soft: #10241d; }
.dark .bs-tone-violet  { --bs-tone: #a78bfa; --bs-tone-soft: #1e1a34; }
.dark .bs-tone-amber   { --bs-tone: #fbbf24; --bs-tone-soft: #2a2011; }
.dark .bs-tone-rose    { --bs-tone: #fb7185; --bs-tone-soft: #2b141b; }
.dark .bs-tone-slate   { --bs-tone: #94a3b8; --bs-tone-soft: #1b1f29; }
.dark .bs-trend-up   { color: #34d399; background-color: #10241d; }
.dark .bs-trend-down { color: #fb7185; background-color: #2b141b; }
.dark .bs-trend-flat { color: #94a3b8; background-color: #1b1f29; }
.dark .bs-tl-item.is-next:hover { background-color: #1a2947; }
.dark .bs-menu-item.is-danger:hover { background-color: #2b141b; }
.dark .bs-kbd { background-color: var(--bs-surface-2); }

/* The layout ships blanket `.dark .bg-white` style overrides for legacy pages;
   the design-system surfaces manage their own colours and must opt out. */
.dark .bs-card,
.dark .bs-kpi,
.dark .bs-action,
.dark .bs-menu,
.dark .bs-sidebar-panel {
    background-color: var(--bs-surface) !important;
}

/* --------------------------------------------------------------------------
   19. Composition helpers used by the dashboard sections
   -------------------------------------------------------------------------- */
.bs-min0 { min-width: 0; }
.bs-icon { flex-shrink: 0; }

/* Hero refresh control — a button that reads as one of the stat tiles */
.bs-hero-refresh {
    display: block;
    text-align: left;
    cursor: pointer;
    font: inherit;
    color: inherit;
}

.bs-hero-refresh:disabled { cursor: progress; }

.bs-hero-refresh-state {
    display: block;
    margin-top: 4px;
    font-size: 0.8125rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.72);
}

/* Revenue analytics header */
.bs-chart-head {
    flex-wrap: wrap;
    align-items: flex-start;
    margin-bottom: 4px;
}

.bs-chart-total {
    display: flex;
    align-items: baseline;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 10px;
}

.bs-chart-amount {
    font-size: 1.875rem;
    font-weight: 700;
    letter-spacing: -0.035em;
    color: var(--bs-text);
    line-height: 1.1;
}

.bs-chart-amount .bs-kpi-unit { margin-left: 5px; }

.bs-legend-row { margin-bottom: 16px; }

.bs-chart-canvas {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

.bs-chart-wrap.is-busy {
    opacity: 0.45;
    transition: opacity var(--bs-fast) var(--bs-ease);
}

/* Chart tooltip */
.bs-chart-tooltip {
    position: absolute;
    z-index: 5;
    min-width: 150px;
    padding: 10px 12px;
    background-color: var(--bs-surface);
    border: 1px solid var(--bs-border);
    border-radius: var(--bs-r-md);
    box-shadow: var(--bs-shadow-lg);
    pointer-events: none;
    opacity: 0;
    transform: translate(-50%, -100%) scale(0.97);
    transition: opacity var(--bs-fast) var(--bs-ease), transform var(--bs-fast) var(--bs-ease);
}

.bs-chart-tooltip.is-visible {
    opacity: 1;
    transform: translate(-50%, -100%) scale(1);
}

.bs-tt-title {
    margin-bottom: 8px;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--bs-text-muted);
}

.bs-tt-row {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.75rem;
    line-height: 1.9;
}

.bs-tt-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex-shrink: 0;
}

.bs-tt-label { color: var(--bs-text-muted); }

.bs-tt-value {
    margin-left: auto;
    font-weight: 600;
    color: var(--bs-text);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* Timeline extras */
.bs-tl-grow { flex: 1 1 auto; }

.bs-tl-name .bs-badge {
    margin-left: 8px;
    vertical-align: middle;
}

.bs-tl-side {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
    flex-shrink: 0;
    text-align: right;
}

.bs-tl-due {
    font-size: 0.6875rem;
    font-weight: 600;
    color: var(--bs-text-muted);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* Attention rows stack their two lines */
.bs-attention-title,
.bs-attention-desc { display: block; }

/* Quick-action cards stack their two lines */
.bs-action-label,
.bs-action-desc { display: block; }

/* Financial overview */
.bs-fin-grid {
    display: grid;
    grid-template-columns: repeat(1, minmax(0, 1fr));
    gap: 12px;
}

@media (min-width: 480px) {
    .bs-fin-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.bs-meter-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-top: 24px;
}

.bs-net-row {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid var(--bs-border);
}

.bs-net-value {
    margin-top: 4px;
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: -0.03em;
    color: var(--bs-text);
}

.bs-net-value .bs-kpi-unit { margin-left: 4px; }

.bs-net-margin { text-align: right; }

.bs-cat-list {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid var(--bs-border);
}

.bs-cat-list .bs-eyebrow { margin-bottom: 12px; }
.bs-cat-pct { margin-left: 6px; }

/* Treatment statistics */
.bs-donut-layout {
    display: flex;
    align-items: center;
    gap: 24px;
    flex-wrap: wrap;
}

.bs-donut-wrap {
    position: relative;
    flex-shrink: 0;
    width: 148px;
    height: 148px;
    margin: 0 auto;
}

.bs-donut-total {
    font-size: 1.375rem;
    font-weight: 700;
    letter-spacing: -0.03em;
    color: var(--bs-text);
    line-height: 1.1;
}

.bs-treat-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1 1 200px;
    min-width: 0;
}

.bs-treat-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 8px;
    border-radius: var(--bs-r-sm);
    font-size: 0.8125rem;
    transition: background-color var(--bs-fast) var(--bs-ease);
}

.bs-treat-row:hover { background-color: var(--bs-surface-2); }

.bs-treat-name {
    flex: 1 1 auto;
    min-width: 0;
    color: var(--bs-text-secondary);
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.bs-treat-count {
    flex-shrink: 0;
    font-size: 0.75rem;
    color: var(--bs-text-muted);
    font-variant-numeric: tabular-nums;
}

.bs-treat-pct {
    flex-shrink: 0;
    width: 52px;
    text-align: right;
    font-weight: 600;
    color: var(--bs-text);
}

/* Quick actions header sits outside a card */
.bs-actions-head { margin-bottom: 16px; }

/* Small screens: give the segmented control its own line */
@media (max-width: 639px) {
    .bs-chart-head .bs-seg { margin-top: 16px; }
    .bs-card-head { flex-wrap: wrap; }
    .bs-tl-side { display: none; }
}

/* --------------------------------------------------------------------------
   20. Chrome details
   -------------------------------------------------------------------------- */
.bs-avatar-btn {
    display: inline-flex;
    align-items: center;
    padding: 0;
    border: none;
    background: none;
    cursor: pointer;
    border-radius: var(--bs-r-full);
    transition: box-shadow var(--bs-fast) var(--bs-ease);
}

.bs-avatar-btn:hover { box-shadow: 0 0 0 3px var(--bs-primary-soft); }

.bs-menu-name {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--bs-text);
}

.bs-menu-check { margin-left: auto; color: #059669; }

.bs-flag { font-size: 1rem; line-height: 1; }
.bs-menu-item.is-current { color: var(--bs-text); font-weight: 600; }

.bs-menu-sep {
    height: 1px;
    margin: 4px 0;
    background-color: var(--bs-border);
}

/* Theme toggle swaps its glyph with the `.dark` class on <html> */
.bs-theme-dark { display: none; }
.dark .bs-theme-dark { display: block; }
.dark .bs-theme-light { display: none; }

/* Flash messages keep the page gutter when <main> is flush */
.bs-main-flush { padding: 0; }
.bs-main-flush .bs-flash { padding: 24px 24px 0; }

@media (min-width: 1024px) {
    .bs-main-flush .bs-flash { padding: 32px 32px 0; }
}

.bs-main-flush .bs-flash + .bs-page { padding-top: 8px; }

/* Language switcher sits in the action cluster — match the ghost buttons */
.bs-topbar-actions > .relative > button {
    font-size: 0.8125rem;
    font-weight: 500;
}

.bs-topbar-actions .text-lg { font-size: 1rem; }

/* ==========================================================================
   21. Buttons
   ========================================================================== */
.bs-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    height: 38px;
    padding: 0 14px;
    border: 1px solid transparent;
    border-radius: var(--bs-r-md);
    font-family: inherit;
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    white-space: nowrap;
    text-decoration: none;
    cursor: pointer;
    transition: background-color var(--bs-fast) var(--bs-ease),
                border-color var(--bs-fast) var(--bs-ease),
                color var(--bs-fast) var(--bs-ease),
                box-shadow var(--bs-fast) var(--bs-ease),
                transform var(--bs-fast) var(--bs-ease);
}

.bs-btn:active { transform: translateY(1px); }

.bs-btn:disabled,
.bs-btn[disabled] {
    opacity: 0.55;
    cursor: not-allowed;
    transform: none;
}

.bs-btn-primary {
    color: #fff;
    background-color: var(--bs-primary);
    box-shadow: var(--bs-shadow-primary);
}

.bs-btn-primary:hover { background-color: var(--bs-primary-700); }

.bs-btn-secondary {
    color: var(--bs-text);
    background-color: var(--bs-surface);
    border-color: var(--bs-border-strong);
    box-shadow: var(--bs-shadow-xs);
}

.bs-btn-secondary:hover {
    background-color: var(--bs-surface-2);
    border-color: #d5d8e0;
}

.bs-btn-ghost {
    color: var(--bs-text-secondary);
    background-color: transparent;
}

.bs-btn-ghost:hover {
    background-color: var(--bs-surface-2);
    color: var(--bs-text);
}

.bs-btn-danger {
    color: #fff;
    background-color: #e11d48;
}

.bs-btn-danger:hover { background-color: #be123c; }

.bs-btn-sm { height: 32px; padding: 0 10px; font-size: 0.75rem; }
.bs-btn-lg { height: 44px; padding: 0 20px; font-size: 0.875rem; }
.bs-btn-icon { width: 38px; padding: 0; }
.bs-btn-icon.bs-btn-sm { width: 32px; }
.bs-btn-block { width: 100%; }

/* ==========================================================================
   22. Page header
   ========================================================================== */
.bs-page-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
}

.bs-page-heading {
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: -0.03em;
    color: var(--bs-text);
    line-height: 1.2;
}

.bs-page-desc {
    margin-top: 4px;
    font-size: 0.875rem;
    color: var(--bs-text-muted);
}

.bs-page-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    flex-wrap: wrap;
}

.bs-breadcrumb {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 8px;
    font-size: 0.75rem;
    color: var(--bs-text-muted);
}

.bs-breadcrumb a {
    color: var(--bs-text-muted);
    text-decoration: none;
    transition: color var(--bs-fast) var(--bs-ease);
}

.bs-breadcrumb a:hover { color: var(--bs-primary); }

/* ==========================================================================
   23. Form controls
   ========================================================================== */
/* `min-width: 0` because a grid/flex item defaults to `min-width: auto` and so
   refuses to shrink below its content's intrinsic width. Date, time and select
   controls report a wide min-content, which pushed fields past the edge of
   their column and over their neighbours in narrow two-column forms. */
.bs-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }

.bs-field-label {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--bs-text-secondary);
    letter-spacing: -0.005em;
}

.bs-field-req { color: #e11d48; margin-left: 2px; }

.bs-input,
.bs-select,
.bs-textarea {
    width: 100%;
    min-height: 38px;
    padding: 8px 12px;
    font-family: inherit;
    font-size: 0.8125rem;
    color: var(--bs-text);
    background-color: var(--bs-surface);
    border: 1px solid var(--bs-border-strong);
    border-radius: var(--bs-r-md);
    transition: border-color var(--bs-fast) var(--bs-ease), box-shadow var(--bs-fast) var(--bs-ease);
}

.bs-input::placeholder,
.bs-textarea::placeholder { color: var(--bs-text-muted); }

.bs-input:focus,
.bs-select:focus,
.bs-textarea:focus {
    outline: none;
    border-color: var(--bs-primary);
    box-shadow: 0 0 0 4px var(--bs-primary-soft);
}

.bs-input:disabled,
.bs-select:disabled,
.bs-textarea:disabled {
    background-color: var(--bs-surface-2);
    color: var(--bs-text-muted);
    cursor: not-allowed;
}

.bs-textarea { min-height: 88px; resize: vertical; line-height: 1.55; }

.bs-select {
    appearance: none;
    -webkit-appearance: none;
    padding-right: 34px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%238b93a1' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 11px center;
    cursor: pointer;
}

.bs-field-help { font-size: 0.6875rem; color: var(--bs-text-muted); }
.bs-field-error { font-size: 0.6875rem; color: #e11d48; font-weight: 500; }

.bs-input.is-invalid,
.bs-select.is-invalid,
.bs-textarea.is-invalid { border-color: #e11d48; }

.bs-input.is-invalid:focus { box-shadow: 0 0 0 4px #fff1f2; }

/* Input with a leading icon */
.bs-input-wrap { position: relative; }

.bs-input-wrap .bs-input-icon {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--bs-text-muted);
    pointer-events: none;
}

.bs-input-wrap.has-icon .bs-input { padding-left: 36px; }

/* Checkbox */
.bs-check {
    appearance: none;
    -webkit-appearance: none;
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    border: 1.5px solid var(--bs-border-strong);
    border-radius: 5px;
    background-color: var(--bs-surface);
    cursor: pointer;
    position: relative;
    transition: background-color var(--bs-fast) var(--bs-ease), border-color var(--bs-fast) var(--bs-ease);
}

.bs-check:hover { border-color: var(--bs-primary); }

.bs-check:checked,
.bs-check:indeterminate {
    background-color: var(--bs-primary);
    border-color: var(--bs-primary);
}

.bs-check:checked::after {
    content: '';
    position: absolute;
    left: 4.5px;
    top: 1px;
    width: 4px;
    height: 8px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.bs-check:indeterminate::after {
    content: '';
    position: absolute;
    left: 3px;
    top: 6px;
    width: 8px;
    height: 2px;
    background-color: #fff;
    border-radius: 1px;
}

.bs-check:focus-visible {
    outline: 2px solid var(--bs-primary);
    outline-offset: 2px;
}

/* ==========================================================================
   24. Toolbar / filter bar
   ========================================================================== */
.bs-toolbar {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.bs-toolbar-grow { flex: 1 1 240px; min-width: 200px; }
.bs-toolbar-end { margin-left: auto; display: flex; align-items: center; gap: 8px; }

.bs-filter-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    margin-left: 2px;
    border-radius: var(--bs-r-full);
    font-size: 0.625rem;
    font-weight: 700;
    color: #fff;
    background-color: var(--bs-primary);
}

/* ==========================================================================
   25. Data table
   ========================================================================== */
.bs-table-wrap {
    position: relative;
    overflow-x: auto;
    border-radius: var(--bs-r-lg);
    border: 1px solid var(--bs-border);
    background-color: var(--bs-surface);
    box-shadow: var(--bs-shadow-sm);
}

.bs-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 0.8125rem;
}

.bs-table thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    padding: 11px 16px;
    text-align: left;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--bs-text-muted);
    background-color: var(--bs-surface-2);
    border-bottom: 1px solid var(--bs-border);
    white-space: nowrap;
}

[dir="rtl"] .bs-table thead th,
[dir="rtl"] .bs-table tbody td { text-align: right; }

.bs-table thead th.is-sortable { cursor: pointer; user-select: none; }
.bs-table thead th.is-sortable:hover { color: var(--bs-text); }

.bs-th-inner { display: inline-flex; align-items: center; gap: 5px; }

.bs-sort-icon { opacity: 0.35; transition: opacity var(--bs-fast) var(--bs-ease); }
.bs-table thead th.is-active .bs-sort-icon { opacity: 1; color: var(--bs-primary); }
.bs-table thead th.is-active { color: var(--bs-text); }

.bs-table tbody td {
    padding: 12px 16px;
    border-bottom: 1px solid var(--bs-border);
    color: var(--bs-text-secondary);
    vertical-align: middle;
}

.bs-table tbody tr { transition: background-color var(--bs-fast) var(--bs-ease); }
.bs-table tbody tr:hover { background-color: var(--bs-surface-2); }
.bs-table tbody tr.is-selected { background-color: var(--bs-primary-soft); }
.bs-table tbody tr:last-child td { border-bottom: none; }

.bs-td-tight { width: 1%; white-space: nowrap; }
.bs-td-num { font-variant-numeric: tabular-nums; text-align: right; }
.bs-td-strong { color: var(--bs-text); font-weight: 600; }

.bs-cell-user {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    text-decoration: none;
}

.bs-cell-name {
    font-weight: 600;
    color: var(--bs-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.bs-cell-sub {
    font-size: 0.6875rem;
    color: var(--bs-text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.bs-cell-muted { color: var(--bs-text-muted); }

/* Row action cluster, revealed on hover */
.bs-row-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 2px;
    opacity: 0;
    transition: opacity var(--bs-fast) var(--bs-ease);
}

.bs-table tbody tr:hover .bs-row-actions,
.bs-row-actions:focus-within { opacity: 1; }

@media (hover: none) {
    .bs-row-actions { opacity: 1; }
}

/* Bulk selection bar */
.bs-bulkbar {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    background-color: var(--bs-primary-soft);
    border-bottom: 1px solid var(--bs-border);
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--bs-primary-700);
    flex-wrap: wrap;
}

.bs-bulkbar-actions { margin-left: auto; display: flex; align-items: center; gap: 6px; }

/* ==========================================================================
   26. Pagination
   ========================================================================== */
.bs-pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 16px;
    border-top: 1px solid var(--bs-border);
    flex-wrap: wrap;
}

.bs-pagination-info { font-size: 0.75rem; color: var(--bs-text-muted); }
.bs-pagination-nav { display: flex; align-items: center; gap: 4px; }

.bs-page-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    height: 32px;
    padding: 0 8px;
    border: 1px solid transparent;
    border-radius: var(--bs-r-sm);
    background: none;
    font-family: inherit;
    font-size: 0.75rem;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    color: var(--bs-text-secondary);
    text-decoration: none;
    cursor: pointer;
    transition: background-color var(--bs-fast) var(--bs-ease), color var(--bs-fast) var(--bs-ease);
}

.bs-page-btn:hover { background-color: var(--bs-surface-2); color: var(--bs-text); }

.bs-page-btn.is-active {
    background-color: var(--bs-primary);
    color: #fff;
    font-weight: 600;
}

.bs-page-btn:disabled { opacity: 0.4; cursor: not-allowed; background: none; }
.bs-page-dots { padding: 0 4px; color: var(--bs-text-muted); font-size: 0.75rem; }

/* ==========================================================================
   27. Modal / drawer / confirm
   ========================================================================== */
.bs-backdrop {
    position: fixed;
    inset: 0;
    z-index: 90;
    background-color: rgba(9, 12, 20, 0.42);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
}

.bs-modal-host {
    position: fixed;
    inset: 0;
    z-index: 95;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    overflow-y: auto;
}

.bs-modal {
    position: relative;
    width: 100%;
    max-width: 520px;
    max-height: calc(100vh - 48px);
    display: flex;
    flex-direction: column;
    background-color: var(--bs-surface);
    border: 1px solid var(--bs-border);
    border-radius: var(--bs-r-xl);
    box-shadow: 0 24px 64px -12px rgba(9, 12, 20, 0.4);
}

.bs-modal-sm { max-width: 420px; }
.bs-modal-lg { max-width: 760px; }
.bs-modal-xl { max-width: 1000px; }

.bs-modal-head,
.bs-drawer-head {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 20px 24px 16px;
    border-bottom: 1px solid var(--bs-border);
    flex-shrink: 0;
}

.bs-modal-title,
.bs-drawer-title {
    font-size: 0.9375rem;
    font-weight: 600;
    letter-spacing: -0.015em;
    color: var(--bs-text);
}

.bs-modal-sub,
.bs-drawer-sub {
    margin-top: 2px;
    font-size: 0.8125rem;
    color: var(--bs-text-muted);
}

.bs-modal-close,
.bs-drawer-close { margin-left: auto; flex-shrink: 0; }

.bs-modal-body,
.bs-drawer-body {
    padding: 24px;
    overflow-y: auto;
    flex: 1 1 auto;
}

.bs-modal-foot,
.bs-drawer-foot {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    padding: 16px 24px;
    border-top: 1px solid var(--bs-border);
    background-color: var(--bs-surface-2);
    border-radius: 0 0 var(--bs-r-xl) var(--bs-r-xl);
    flex-shrink: 0;
    flex-wrap: wrap;
}

/* Side drawer */
.bs-drawer-host {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 95;
    display: flex;
    max-width: 100%;
}

.bs-drawer {
    display: flex;
    flex-direction: column;
    width: 480px;
    max-width: 100vw;
    background-color: var(--bs-surface);
    border-left: 1px solid var(--bs-border);
    box-shadow: -16px 0 48px -12px rgba(9, 12, 20, 0.28);
}

.bs-drawer-sm { width: 380px; }
.bs-drawer-lg { width: 640px; }
.bs-drawer-foot { border-radius: 0; }

/* Confirmation dialog icon */
.bs-confirm-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    color: var(--bs-tone);
    background-color: var(--bs-tone-soft);
}

/* ==========================================================================
   28. Toasts
   ========================================================================== */
.bs-toast-host {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 120;
    display: flex;
    flex-direction: column;
    gap: 8px;
    pointer-events: none;
    max-width: calc(100vw - 40px);
}

.bs-toast {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    width: 340px;
    max-width: 100%;
    padding: 12px 14px;
    background-color: var(--bs-surface);
    border: 1px solid var(--bs-border);
    border-radius: var(--bs-r-md);
    box-shadow: var(--bs-shadow-lg);
    pointer-events: auto;
    animation: bs-toast-in var(--bs-base) var(--bs-ease) both;
}

@keyframes bs-toast-in {
    from { opacity: 0; transform: translateX(16px) scale(0.98); }
    to   { opacity: 1; transform: translateX(0) scale(1); }
}

.bs-toast-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 26px;
    height: 26px;
    border-radius: 8px;
    color: var(--bs-tone);
    background-color: var(--bs-tone-soft);
}

.bs-toast-title { font-size: 0.8125rem; font-weight: 600; color: var(--bs-text); }
.bs-toast-text { margin-top: 1px; font-size: 0.75rem; color: var(--bs-text-muted); }

/* ==========================================================================
   29. Skeletons
   ========================================================================== */
@keyframes bs-shimmer {
    from { background-position: -400px 0; }
    to   { background-position: 400px 0; }
}

.bs-skeleton {
    display: block;
    height: 12px;
    border-radius: 6px;
    background-color: var(--bs-surface-2);
    background-image: linear-gradient(
        90deg,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 0.65) 50%,
        rgba(255, 255, 255, 0) 100%
    );
    background-size: 400px 100%;
    background-repeat: no-repeat;
    animation: bs-shimmer 1.4s linear infinite;
}

.dark .bs-skeleton {
    background-image: linear-gradient(
        90deg,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 0.06) 50%,
        rgba(255, 255, 255, 0) 100%
    );
}

.bs-skeleton-circle { border-radius: 50%; }
.bs-skeleton-text { height: 10px; }

/* ==========================================================================
   30. Tabs
   ========================================================================== */
.bs-tabs {
    display: flex;
    align-items: center;
    gap: 2px;
    border-bottom: 1px solid var(--bs-border);
    overflow-x: auto;
    scrollbar-width: none;
}

.bs-tabs::-webkit-scrollbar { display: none; }

.bs-tab {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 10px 12px;
    border: none;
    background: none;
    font-family: inherit;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--bs-text-muted);
    white-space: nowrap;
    cursor: pointer;
    text-decoration: none;
    transition: color var(--bs-fast) var(--bs-ease);
}

.bs-tab:hover { color: var(--bs-text); }

.bs-tab.is-active { color: var(--bs-primary); font-weight: 600; }

.bs-tab.is-active::after {
    content: '';
    position: absolute;
    left: 8px;
    right: 8px;
    bottom: -1px;
    height: 2px;
    border-radius: 2px 2px 0 0;
    background-color: var(--bs-primary);
}

.bs-tab-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: var(--bs-r-full);
    font-size: 0.625rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--bs-text-muted);
    background-color: var(--bs-surface-2);
}

.bs-tab.is-active .bs-tab-count {
    color: var(--bs-primary);
    background-color: var(--bs-primary-soft);
}

/* ==========================================================================
   31. Floating action button
   ========================================================================== */
.bs-fab {
    position: fixed;
    right: 24px;
    bottom: 24px;
    z-index: 80;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 52px;
    min-width: 52px;
    padding: 0 18px;
    border: none;
    border-radius: var(--bs-r-full);
    color: #fff;
    background-color: var(--bs-primary);
    font-family: inherit;
    font-size: 0.875rem;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    box-shadow: 0 12px 28px -8px rgba(37, 99, 235, 0.6);
    transition: transform var(--bs-base) var(--bs-ease), background-color var(--bs-fast) var(--bs-ease);
}

.bs-fab:hover { transform: translateY(-2px) scale(1.02); background-color: var(--bs-primary-700); }

/* ==========================================================================
   32. Upload dropzone
   ========================================================================== */
.bs-dropzone {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 32px 24px;
    text-align: center;
    border: 1.5px dashed var(--bs-border-strong);
    border-radius: var(--bs-r-lg);
    background-color: var(--bs-surface-2);
    cursor: pointer;
    transition: border-color var(--bs-fast) var(--bs-ease), background-color var(--bs-fast) var(--bs-ease);
}

.bs-dropzone:hover,
.bs-dropzone.is-dragging {
    border-color: var(--bs-primary);
    background-color: var(--bs-primary-soft);
}

.bs-dropzone-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    color: var(--bs-primary);
    background-color: var(--bs-surface);
    box-shadow: var(--bs-shadow-xs);
}

.bs-dropzone-title { font-size: 0.8125rem; font-weight: 600; color: var(--bs-text); }
.bs-dropzone-hint { font-size: 0.6875rem; color: var(--bs-text-muted); }

/* ==========================================================================
   33. Dark-mode surfaces for the new primitives
   ========================================================================== */
.dark .bs-table-wrap,
.dark .bs-modal,
.dark .bs-drawer,
.dark .bs-toast,
.dark .bs-input,
.dark .bs-select,
.dark .bs-textarea,
.dark .bs-btn-secondary,
.dark .bs-check {
    background-color: var(--bs-surface) !important;
}

.dark .bs-table thead th,
.dark .bs-modal-foot,
.dark .bs-drawer-foot,
.dark .bs-dropzone { background-color: var(--bs-surface-2) !important; }

.dark .bs-check:checked,
.dark .bs-check:indeterminate { background-color: var(--bs-primary) !important; }

.dark .bs-backdrop { background-color: rgba(0, 0, 0, 0.62); }

.dark .bs-select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2378808f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}

/* ==========================================================================
   34. Overlay transitions + misc utilities
   ========================================================================== */

/* Alpine hides these until it boots; the CDN build has no stylesheet of its own. */
[x-cloak] { display: none !important; }

@keyframes bs-pop-in {
    from { opacity: 0; transform: translateY(8px) scale(0.97); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes bs-pop-out {
    from { opacity: 1; transform: translateY(0) scale(1); }
    to   { opacity: 0; transform: translateY(6px) scale(0.98); }
}

@keyframes bs-slide-from-end {
    from { transform: translateX(100%); }
    to   { transform: translateX(0); }
}

@keyframes bs-slide-to-end {
    from { transform: translateX(0); }
    to   { transform: translateX(100%); }
}

.bs-anim-in  { animation: bs-pop-in var(--bs-base) var(--bs-ease) both; }
.bs-anim-out { animation: bs-pop-out 160ms var(--bs-ease) both; }
.bs-slide-in  { animation: bs-slide-from-end var(--bs-base) var(--bs-ease) both; }
.bs-slide-out { animation: bs-slide-to-end 180ms var(--bs-ease) both; }

/* Mirror an icon (e.g. a chevron used as a "previous" arrow) */
.bs-flip { transform: scaleX(-1); }

.bs-page-btn.is-disabled { opacity: 0.4; pointer-events: none; }

/* Section rhythm for list pages */
.bs-list-page {
    max-width: 1440px;
    margin: 0 auto;
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

@media (min-width: 1024px) {
    .bs-list-page { padding: 32px; gap: 24px; }
}

.bs-muted { color: var(--bs-text-muted); }
.bs-nowrap { white-space: nowrap; }
.bs-amount-due { color: #e11d48; }
.dark .bs-amount-due { color: #fb7185; }

/* ==========================================================================
   35. Odontogram
   ========================================================================== */
.bs-arch { padding: 8px 0; }
.bs-arch .bs-eyebrow { text-align: center; margin-bottom: 12px; }
.bs-arch-lower .bs-eyebrow { margin-top: 12px; margin-bottom: 0; }

.bs-teeth-row {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 9px;
    overflow-x: auto;
    padding: 6px 4px;
    scrollbar-width: thin;
}

.bs-arch-lower .bs-teeth-row { align-items: flex-start; }

.bs-teeth-split {
    width: 2px;
    align-self: stretch;
    margin: 0 16px;
    border-radius: 1px;
    background-color: var(--bs-border);
    flex-shrink: 0;
}

.bs-tooth {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    flex-shrink: 0;
    padding: 4px 1px;
    border: none;
    border-radius: var(--bs-r-sm);
    background: none;
    cursor: pointer;
    transition: transform var(--bs-base) var(--bs-ease), background-color var(--bs-fast) var(--bs-ease);
}

.bs-tooth:hover { transform: translateY(-4px); background-color: var(--bs-surface-2); }
.bs-arch-lower .bs-tooth:hover { transform: translateY(4px); }

/* --- Anatomical tooth SVG ------------------------------------------------ */
.bs-tooth-svg {
    display: block;
    height: 52px;
    width: auto;
    overflow: visible;
    filter: drop-shadow(0 1px 1px rgba(9, 12, 20, 0.14));
    transition: filter var(--bs-fast) var(--bs-ease), transform var(--bs-fast) var(--bs-ease);
}

/* Molars are the widest, incisors the narrowest — keeps the arch believable. */
.bs-tooth-molar    { height: 54px; }
.bs-tooth-premolar { height: 52px; }
.bs-tooth-canine   { height: 56px; }
.bs-tooth-incisor  { height: 50px; }

/* Fills and strokes are emitted by the <x-ui.tooth> component itself so the
   same markup renders correctly under the mobile stylesheet too. Only
   transitions and state styling belong here. */
.bs-tooth-root,
.bs-tooth-crown {
    transition: fill var(--bs-base) var(--bs-ease);
}

/* A missing tooth is drawn as a dashed ghost of its own morphology. */
.bs-tooth-svg.is-missing {
    filter: none;
    opacity: 0.55;
    color: var(--bs-text-muted);
}

.bs-tooth:hover .bs-tooth-svg {
    filter: drop-shadow(0 3px 5px rgba(9, 12, 20, 0.22));
}

.bs-tooth.is-active .bs-tooth-svg {
    transform: scale(1.08);
    filter: drop-shadow(0 0 0 2px var(--bs-primary)) drop-shadow(0 4px 8px rgba(37, 99, 235, 0.4));
}

.bs-tooth.is-active .bs-tooth-crown { stroke: var(--bs-primary); stroke-width: 2; }
.bs-tooth.is-charted .bs-tooth-crown { stroke: rgba(9, 12, 20, 0.3); }

.bs-tooth-num {
    font-size: 0.625rem;
    font-weight: 600;
    color: var(--bs-text-muted);
    font-variant-numeric: tabular-nums;
    line-height: 1;
}

/* Badge counting the acts performed on a tooth during appointments. */
.bs-tooth-mark {
    position: absolute;
    top: -2px;
    right: -2px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 15px;
    height: 15px;
    padding: 0 3px;
    border-radius: var(--bs-r-full);
    border: 1.5px solid var(--bs-surface);
    background-color: #0284c7;
    color: #fff;
    font-size: 0.5625rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    line-height: 1;
    pointer-events: none;
}

.bs-tooth-mark.is-lower { top: auto; bottom: -2px; }

.dark .bs-tooth-mark { border-color: var(--bs-surface); }

/* ==========================================================================
   40. Treatment catalogue — colour picking
   ========================================================================== */
.bs-treat-swatch {
    flex-shrink: 0;
    width: 14px;
    height: 14px;
    border-radius: 5px;
    border: 1px solid rgba(9, 12, 20, 0.14);
}

.bs-hex {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.6875rem;
    text-transform: uppercase;
    color: var(--bs-text-muted);
}

.bs-swatch-grid {
    display: grid;
    grid-template-columns: repeat(8, minmax(0, 1fr));
    gap: 6px;
}

.bs-swatch {
    aspect-ratio: 1 / 1;
    min-height: 26px;
    border: 2px solid transparent;
    border-radius: 8px;
    cursor: pointer;
    padding: 0;
    box-shadow: inset 0 0 0 1px rgba(9, 12, 20, 0.1);
    transition: transform var(--bs-fast) var(--bs-ease), border-color var(--bs-fast) var(--bs-ease);
}

.bs-swatch:hover { transform: scale(1.12); }

.bs-swatch.is-active {
    border-color: var(--bs-text);
    transform: scale(1.08);
}

.bs-color-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
}

.bs-color-input {
    flex-shrink: 0;
    width: 38px;
    height: 38px;
    padding: 2px;
    border: 1px solid var(--bs-border-strong);
    border-radius: var(--bs-r-md);
    background-color: var(--bs-surface);
    cursor: pointer;
}

.bs-color-preview {
    flex-shrink: 0;
    width: 38px;
    height: 38px;
    border-radius: var(--bs-r-md);
    border: 1px solid var(--bs-border-strong);
}

.bs-check-row {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px;
    border-radius: var(--bs-r-md);
    background-color: var(--bs-surface-2);
    cursor: pointer;
}

.bs-check-row .bs-check { margin-top: 2px; }

.bs-empty-inline {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px;
    border: 1px dashed var(--bs-border-strong);
    border-radius: var(--bs-r-md);
    flex-wrap: wrap;
}

/* Treatment options in the tooth editor can be numerous — keep it scrollable. */
.bs-status-grid { max-height: 232px; overflow-y: auto; }

.dark .bs-check-row { background-color: var(--bs-surface-2) !important; }
.dark .bs-color-input { background-color: var(--bs-surface) !important; }
.dark .bs-treat-swatch,
.dark .bs-swatch { border-color: rgba(255, 255, 255, 0.16); }

/* ==========================================================================
   41. Exports
   ========================================================================== */
.bs-export-head {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 14px;
}

.bs-export-count {
    margin-bottom: 16px;
    font-size: 0.8125rem;
    color: var(--bs-text-muted);
}

.bs-export-count strong {
    font-size: 1.125rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--bs-text);
    font-variant-numeric: tabular-nums;
}

/* ==========================================================================
   42. Subscription
   ========================================================================== */
.bs-sub-banner {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px 24px;
    border-radius: var(--bs-r-lg);
    background-color: var(--bs-tone-soft);
    border: 1px solid var(--bs-tone-ring);
    flex-wrap: wrap;
}

.bs-sub-banner-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    border-radius: 14px;
    color: #fff;
    background-color: var(--bs-tone);
}

.bs-sub-banner-title {
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--bs-text);
}

.bs-sub-banner-text {
    margin-top: 2px;
    font-size: 0.8125rem;
    color: var(--bs-text-secondary);
}

.bs-sub-countdown {
    margin-left: auto;
    text-align: right;
    flex-shrink: 0;
}

.bs-sub-days {
    display: block;
    font-size: 1.75rem;
    font-weight: 700;
    letter-spacing: -0.035em;
    color: var(--bs-tone);
    font-variant-numeric: tabular-nums;
    line-height: 1;
}

.bs-sub-days-label {
    font-size: 0.6875rem;
    color: var(--bs-text-muted);
}

/* Plan cards */
.bs-plan {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 24px;
    background-color: var(--bs-surface);
    border: 1px solid var(--bs-border);
    border-radius: var(--bs-r-lg);
    box-shadow: var(--bs-shadow-sm);
    transition: transform var(--bs-base) var(--bs-ease),
                box-shadow var(--bs-base) var(--bs-ease),
                border-color var(--bs-base) var(--bs-ease);
}

.bs-plan:hover {
    transform: translateY(-3px);
    box-shadow: var(--bs-shadow-lg);
    border-color: var(--bs-border-strong);
}

.bs-plan.is-current {
    border-color: var(--bs-primary);
    box-shadow: 0 0 0 3px var(--bs-primary-soft), var(--bs-shadow-md);
}

.bs-plan-flag {
    position: absolute;
    top: -9px;
    right: 20px;
    padding: 3px 10px;
    border-radius: var(--bs-r-full);
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: #fff;
    background-color: var(--bs-primary);
}

.bs-plan-name {
    font-size: 1.0625rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--bs-text);
}

.bs-plan-desc {
    font-size: 0.8125rem;
    color: var(--bs-text-muted);
}

.bs-plan-price {
    display: flex;
    align-items: baseline;
    gap: 4px;
    flex-wrap: wrap;
    margin: 6px 0;
    font-size: 1.875rem;
    font-weight: 700;
    letter-spacing: -0.035em;
    color: var(--bs-text);
    font-variant-numeric: tabular-nums;
    line-height: 1.1;
}

.bs-plan-currency {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--bs-text-secondary);
}

.bs-plan-interval {
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--bs-text-muted);
    letter-spacing: 0;
}

.bs-plan-features {
    display: flex;
    flex-direction: column;
    gap: 7px;
    margin: 10px 0 18px;
    padding: 0;
    list-style: none;
    flex: 1 1 auto;
}

.bs-plan-features li {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 0.8125rem;
    color: var(--bs-text-secondary);
}

.bs-plan-features svg {
    flex-shrink: 0;
    margin-top: 2px;
    color: #059669;
}

/* Payment method chooser */
.bs-pay-option {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 14px;
    border: 1px solid var(--bs-border-strong);
    border-radius: var(--bs-r-md);
    background-color: var(--bs-surface);
    font-family: inherit;
    text-align: left;
    cursor: pointer;
    transition: border-color var(--bs-fast) var(--bs-ease),
                background-color var(--bs-fast) var(--bs-ease),
                transform var(--bs-fast) var(--bs-ease);
}

.bs-pay-option:hover {
    transform: translateX(3px);
    border-color: var(--bs-tone);
    background-color: var(--bs-tone-soft);
}

.bs-pay-option svg:last-child { margin-left: auto; color: var(--bs-text-muted); flex-shrink: 0; }

.bs-pay-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 38px;
    height: 38px;
    border-radius: 12px;
    color: var(--bs-tone);
    background-color: var(--bs-tone-soft);
}

.dark .bs-plan,
.dark .bs-pay-option { background-color: var(--bs-surface) !important; }

/* ==========================================================================
   43. Prescriptions
   ========================================================================== */
.bs-rx-card { border-inline-start: 3px solid var(--bs-tone); }

.bs-rx-head {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 14px;
}

.bs-rx-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 38px;
    height: 38px;
    border-radius: 12px;
    color: var(--bs-tone);
    background-color: var(--bs-tone-soft);
}

.bs-rx-diag {
    padding: 12px 14px;
    margin-bottom: 14px;
    border-radius: var(--bs-r-md);
    background-color: var(--bs-surface-2);
}

.bs-rx-meds {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.bs-rx-med {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 0;
    border-bottom: 1px solid var(--bs-border);
}

.bs-rx-med:last-child { border-bottom: none; }

.bs-rx-med-dot {
    flex-shrink: 0;
    width: 7px;
    height: 7px;
    margin-top: 7px;
    border-radius: 50%;
    background-color: var(--bs-tone);
}

.bs-rx-med-name {
    display: block;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--bs-text);
}

.bs-rx-med-meta {
    display: block;
    margin-top: 1px;
    font-size: 0.75rem;
    color: var(--bs-text-muted);
}

.bs-rx-med-note {
    display: block;
    margin-top: 3px;
    font-size: 0.75rem;
    font-style: italic;
    color: var(--bs-text-secondary);
}

.bs-rx-qty {
    margin-inline-start: auto;
    flex-shrink: 0;
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--bs-text-secondary);
}

.bs-rx-foot {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid var(--bs-border);
    flex-wrap: wrap;
}

/* --- Medication repeater on the create form ------------------------------ */
.bs-rx-row {
    padding: 14px;
    border: 1px solid var(--bs-border);
    border-radius: var(--bs-r-md);
    background-color: var(--bs-surface-2);
}

.bs-rx-row-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}

.bs-rx-row-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: var(--bs-r-full);
    background-color: var(--bs-primary);
    color: #fff;
    font-size: 0.6875rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.bs-rx-remove:disabled { opacity: 0.3; cursor: not-allowed; }

.bs-rx-row-grid {
    display: grid;
    grid-template-columns: repeat(1, minmax(0, 1fr));
    gap: 12px;
}

@media (min-width: 640px) {
    .bs-rx-row-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .bs-rx-wide { grid-column: 1 / -1; }
}

@media (min-width: 1024px) {
    .bs-rx-row-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.dark .bs-rx-row,
.dark .bs-rx-diag { background-color: var(--bs-surface-2) !important; }

/* ==========================================================================
   44. Result pages (payment success / failure)
   ========================================================================== */
.bs-result {
    max-width: 520px;
    margin: 40px auto;
    padding: 40px 32px;
    text-align: center;
    background-color: var(--bs-surface);
    border: 1px solid var(--bs-border);
    border-radius: var(--bs-r-xl);
    box-shadow: var(--bs-shadow-md);
}

.bs-result-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 76px;
    height: 76px;
    margin-bottom: 20px;
    border-radius: 24px;
    color: var(--bs-tone);
    background-color: var(--bs-tone-soft);
}

.bs-result-title {
    font-size: 1.375rem;
    font-weight: 700;
    letter-spacing: -0.03em;
    color: var(--bs-text);
}

.bs-result-text {
    margin: 8px auto 0;
    max-width: 42ch;
    font-size: 0.9375rem;
    line-height: 1.55;
    color: var(--bs-text-muted);
}

.bs-result-actions {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 26px;
    flex-wrap: wrap;
}

.dark .bs-result { background-color: var(--bs-surface) !important; }

/* ==========================================================================
   43. Right-to-left (Arabic)
   --------------------------------------------------------------------------
   The design system is authored left-to-right; this block mirrors the
   directional properties rather than duplicating every rule. Numbers, money
   and times stay left-to-right — Algeria writes them with Latin digits.
   ========================================================================== */
[dir="rtl"] .bs-shell,
[dir="rtl"] .bs-modal,
[dir="rtl"] .bs-drawer,
[dir="rtl"] .bs-toast {
    font-family: 'Noto Sans Arabic', 'Segoe UI', Tahoma, 'Inter', sans-serif;
}

/* Keep figures, money and clock times readable inside RTL text. */
[dir="rtl"] .bs-num,
[dir="rtl"] .bs-kpi-value,
[dir="rtl"] .bs-hero-stat-value,
[dir="rtl"] .bs-stat-block-value,
[dir="rtl"] .bs-profile-stat-value,
[dir="rtl"] .bs-tl-time,
[dir="rtl"] .bs-appt-time,
[dir="rtl"] .bs-slot,
[dir="rtl"] .bs-hour-label,
[dir="rtl"] .bs-week-num,
[dir="rtl"] .bs-month-num,
[dir="rtl"] .bs-tooth-num,
[dir="rtl"] .bs-hex,
[dir="rtl"] .bs-plan-price,
[dir="rtl"] .bs-sub-days,
[dir="rtl"] .bs-chart-amount,
[dir="rtl"] .bs-net-value {
    direction: ltr;
    unicode-bidi: isolate;
}

/* --- Sidebar ------------------------------------------------------------- */
[dir="rtl"] .bs-sidebar-panel {
    left: auto;
    right: 0;
    border-right: none;
    border-left: 1px solid var(--bs-border);
}

[dir="rtl"] .bs-nav-link.is-active::before {
    left: auto;
    right: -12px;
    border-radius: 3px 0 0 3px;
}

[dir="rtl"] .bs-rail-reveal { transform: translateX(6px); }
[dir="rtl"] .bs-sidebar:hover .bs-rail-reveal,
[dir="rtl"] .bs-sidebar:focus-within .bs-rail-reveal { transform: translateX(0); }

/* --- Topbar -------------------------------------------------------------- */
[dir="rtl"] .bs-search-icon { left: auto; right: 12px; }
[dir="rtl"] .bs-search-input { padding: 0 38px 0 40px; }
[dir="rtl"] .bs-kbd { right: auto; left: 10px; }

[dir="rtl"] .bs-topbar-actions,
[dir="rtl"] .bs-toolbar-end,
[dir="rtl"] .bs-attention-count,
[dir="rtl"] .bs-combo-meta,
[dir="rtl"] .bs-tt-value,
[dir="rtl"] .bs-sub-countdown,
[dir="rtl"] .bs-bulkbar-actions,
[dir="rtl"] .bs-menu-check,
[dir="rtl"] .bs-modal-close,
[dir="rtl"] .bs-drawer-close,
[dir="rtl"] .bs-combo-selected .bs-icon-btn,
[dir="rtl"] .bs-pay-option svg:last-child {
    margin-left: 0;
    margin-right: auto;
}

/* --- Menus, modals, drawers ---------------------------------------------- */
[dir="rtl"] .bs-menu { right: auto; left: 0; }

[dir="rtl"] .bs-drawer-host { right: auto; left: 0; }
[dir="rtl"] .bs-drawer {
    border-left: none;
    border-right: 1px solid var(--bs-border);
    box-shadow: 16px 0 48px -12px rgba(9, 12, 20, 0.28);
}

@keyframes bs-slide-from-start {
    from { transform: translateX(-100%); }
    to   { transform: translateX(0); }
}

@keyframes bs-slide-to-start {
    from { transform: translateX(0); }
    to   { transform: translateX(-100%); }
}

[dir="rtl"] .bs-slide-in  { animation-name: bs-slide-from-start; }
[dir="rtl"] .bs-slide-out { animation-name: bs-slide-to-start; }

[dir="rtl"] .bs-toast-host { right: auto; left: 20px; }
[dir="rtl"] .bs-fab { right: auto; left: 24px; }

@keyframes bs-toast-in-rtl {
    from { opacity: 0; transform: translateX(-16px) scale(0.98); }
    to   { opacity: 1; transform: translateX(0) scale(1); }
}

[dir="rtl"] .bs-toast { animation-name: bs-toast-in-rtl; }

/* --- Forms --------------------------------------------------------------- */
[dir="rtl"] .bs-input-wrap .bs-input-icon { left: auto; right: 12px; }
[dir="rtl"] .bs-input-wrap.has-icon .bs-input { padding-left: 12px; padding-right: 36px; }

[dir="rtl"] .bs-select {
    padding-right: 12px;
    padding-left: 34px;
    background-position: left 11px center;
}

[dir="rtl"] .bs-field-req { margin-left: 0; margin-right: 2px; }
[dir="rtl"] .bs-status-opt,
[dir="rtl"] .bs-menu-item,
[dir="rtl"] .bs-combo-option,
[dir="rtl"] .bs-pay-option,
[dir="rtl"] .bs-appt { text-align: right; }

/* --- Tables -------------------------------------------------------------- */
[dir="rtl"] .bs-td-num,
[dir="rtl"] .bs-treat-pct,
[dir="rtl"] .bs-net-margin,
[dir="rtl"] .bs-tl-time,
[dir="rtl"] .bs-tl-side,
[dir="rtl"] .bs-appt-when,
[dir="rtl"] .bs-hour-label { text-align: left; }

[dir="rtl"] .bs-row-actions { justify-content: flex-start; }

/* --- Timeline ------------------------------------------------------------ */
[dir="rtl"] .bs-timeline { padding-left: 0; padding-right: 4px; }
[dir="rtl"] .bs-tl-item { padding: 10px 0 10px 12px; }
[dir="rtl"] .bs-tl-name .bs-badge { margin-left: 0; margin-right: 8px; }

/* --- Progress, meters, charts -------------------------------------------- */
[dir="rtl"] .bs-progress-bar { transform-origin: right center; }
[dir="rtl"] .bs-cat-pct { margin-left: 0; margin-right: 6px; }
[dir="rtl"] .bs-chart-amount .bs-kpi-unit,
[dir="rtl"] .bs-net-value .bs-kpi-unit { margin-left: 0; margin-right: 5px; }

/* --- Scheduling ---------------------------------------------------------- */
[dir="rtl"] .bs-appt { padding: 10px 14px 10px 12px; }
[dir="rtl"] .bs-appt-bar { left: auto; right: 0; }
[dir="rtl"] .bs-appt.is-compact { padding: 4px 9px 4px 6px; }

[dir="rtl"] .bs-week-head,
[dir="rtl"] .bs-week-cell {
    border-left: none;
    border-right: 1px solid var(--bs-border);
}

[dir="rtl"] .bs-month-cell {
    border-left: none;
    border-right: 1px solid var(--bs-border);
}

[dir="rtl"] .bs-month-cell:nth-child(7n + 1) { border-right: none; }
[dir="rtl"] .bs-month-num { align-self: flex-end; }
[dir="rtl"] .bs-month-more { text-align: right; }

/* --- Hover nudges -------------------------------------------------------- */
[dir="rtl"] .bs-attention:hover,
[dir="rtl"] .bs-pay-option:hover { transform: translateX(-3px); }
[dir="rtl"] .bs-link:hover { gap: 7px; }

/* Chevrons and arrows point the other way. */
[dir="rtl"] .bs-link svg,
[dir="rtl"] .bs-breadcrumb svg,
[dir="rtl"] .bs-page-btn svg,
[dir="rtl"] .bs-combo-option svg,
[dir="rtl"] .bs-pay-option svg:last-child,
[dir="rtl"] .bs-doc-card svg:last-child,
[dir="rtl"] .bs-client-strip svg:last-child { transform: scaleX(-1); }

/* `.bs-flip` already mirrors an icon; in RTL that cancels out. */
[dir="rtl"] .bs-flip { transform: scaleX(1); }

/* --- Cards --------------------------------------------------------------- */
[dir="rtl"] .bs-plan-flag { right: auto; left: 20px; }
[dir="rtl"] .bs-tooth-mark { right: auto; left: -2px; }
[dir="rtl"] .bs-sub-banner-icon,
[dir="rtl"] .bs-export-head { flex-shrink: 0; }

/* --- Hero ---------------------------------------------------------------- */
[dir="rtl"] .bs-hero::after {
    background-image: radial-gradient(60% 100% at 15% 120%, rgba(37, 99, 235, 0.35) 0%, rgba(37, 99, 235, 0) 70%);
}

[dir="rtl"] .bs-hero-stat-value small { margin-left: 0; margin-right: 3px; }
[dir="rtl"] .bs-stat-block-value small { margin-left: 0; margin-right: 2px; }

/* --- Misc ---------------------------------------------------------------- */
[dir="rtl"] .bs-teeth-split { margin: 0 16px; }
[dir="rtl"] .bs-flag { font-size: 1rem; }
[dir="rtl"] .bs-empty-inline { text-align: right; }

.bs-tooth.is-charted .bs-tooth-num,
.bs-tooth.is-active .bs-tooth-num { color: var(--bs-text); }

.bs-tooth-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 16px;
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid var(--bs-border);
}

.bs-tooth-legend .bs-legend-item { opacity: 0.45; }
.bs-tooth-legend .bs-legend-item.is-used { opacity: 1; color: var(--bs-text-secondary); font-weight: 600; }

/* Status picker inside the tooth editor */
.bs-status-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
}

.bs-status-opt {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border: 1px solid var(--bs-border-strong);
    border-radius: var(--bs-r-sm);
    background-color: var(--bs-surface);
    font-family: inherit;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--bs-text-secondary);
    text-align: left;
    cursor: pointer;
    transition: border-color var(--bs-fast) var(--bs-ease), background-color var(--bs-fast) var(--bs-ease);
}

.bs-status-opt:hover { background-color: var(--bs-surface-2); }

.bs-status-opt.is-active {
    border-color: var(--bs-primary);
    background-color: var(--bs-primary-soft);
    color: var(--bs-text);
    font-weight: 600;
}

.bs-status-dot {
    width: 10px;
    height: 10px;
    border-radius: 3px;
    flex-shrink: 0;
    background-color: var(--bs-tooth, #ffffff);
    border: 1px solid rgba(9, 12, 20, 0.18);
}

/* Tooth colours come from the component; only the missing-state tint is themed. */
.dark .bs-status-opt { background-color: var(--bs-surface) !important; }

/* ==========================================================================
   36. Patient profile header
   ========================================================================== */
.bs-profile {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    flex-wrap: wrap;
}

.bs-profile-avatar {
    width: 72px;
    height: 72px;
    font-size: 1.375rem;
    border-radius: 20px;
    flex-shrink: 0;
}

.bs-profile-main { flex: 1 1 280px; min-width: 0; }

.bs-profile-name {
    font-size: 1.375rem;
    font-weight: 700;
    letter-spacing: -0.03em;
    color: var(--bs-text);
    line-height: 1.2;
}

.bs-profile-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 18px;
    margin-top: 10px;
}

.bs-profile-meta-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.8125rem;
    color: var(--bs-text-secondary);
}

.bs-profile-meta-item svg { color: var(--bs-text-muted); flex-shrink: 0; }

.bs-profile-side {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: flex-start;
}

.bs-profile-stat {
    min-width: 116px;
    padding: 12px 14px;
    border-radius: var(--bs-r-md);
    background-color: var(--bs-surface-2);
}

.bs-profile-stat-label {
    font-size: 0.6875rem;
    font-weight: 500;
    color: var(--bs-text-muted);
    white-space: nowrap;
}

.bs-profile-stat-value {
    margin-top: 4px;
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--bs-text);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.bs-alert-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 14px;
}

.bs-info-grid {
    display: grid;
    grid-template-columns: repeat(1, minmax(0, 1fr));
    gap: 14px 24px;
}

@media (min-width: 640px) { .bs-info-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .bs-info-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.bs-info-label {
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--bs-text-muted);
}

.bs-info-value {
    margin-top: 3px;
    font-size: 0.8125rem;
    color: var(--bs-text);
    word-break: break-word;
}

.dark .bs-profile-stat { background-color: var(--bs-surface-2) !important; }

/* Document / gallery grid */
.bs-doc-grid {
    display: grid;
    grid-template-columns: repeat(1, minmax(0, 1fr));
    gap: 8px;
}

@media (min-width: 640px)  { .bs-doc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1280px) { .bs-doc-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.bs-doc-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    border: 1px solid var(--bs-border);
    border-radius: var(--bs-r-md);
    text-decoration: none;
    transition: border-color var(--bs-fast) var(--bs-ease),
                background-color var(--bs-fast) var(--bs-ease),
                transform var(--bs-base) var(--bs-ease);
}

.bs-doc-card:hover {
    transform: translateY(-2px);
    border-color: var(--bs-border-strong);
    background-color: var(--bs-surface-2);
}

.bs-doc-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border-radius: 11px;
    color: var(--bs-primary);
    background-color: var(--bs-primary-soft);
}

/* Tab panel swap feedback */
.bs-busy-panel { opacity: 0.5; transition: opacity var(--bs-fast) var(--bs-ease); }

/* ==========================================================================
   37. Scheduling — day / week / month grids
   ========================================================================== */
.bs-card-flush { padding: 0; overflow: hidden; }

.bs-filter-select { width: auto; min-width: 168px; flex: 0 1 auto; }

.bs-cal-nav {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.bs-cal-label {
    margin-left: 6px;
    font-size: 0.875rem;
    font-weight: 600;
    letter-spacing: -0.015em;
    color: var(--bs-text);
    white-space: nowrap;
}

/* --- Appointment card ---------------------------------------------------- */
.bs-appt {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
    padding: 10px 12px 10px 14px;
    border: 1px solid var(--bs-border);
    border-radius: var(--bs-r-md);
    background-color: var(--bs-surface);
    font-family: inherit;
    text-align: left;
    cursor: pointer;
    overflow: hidden;
    transition: transform var(--bs-fast) var(--bs-ease),
                box-shadow var(--bs-fast) var(--bs-ease),
                border-color var(--bs-fast) var(--bs-ease);
}

.bs-appt:hover {
    transform: translateY(-1px);
    box-shadow: var(--bs-shadow-md);
    border-color: var(--bs-tone-ring);
}

.bs-appt-bar {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background-color: var(--bs-tone);
}

.bs-appt.is-cancelled { opacity: 0.6; }
.bs-appt.is-cancelled .bs-appt-name { text-decoration: line-through; }

.bs-appt-head { display: flex; align-items: center; gap: 10px; }
.bs-appt-ident { flex: 1 1 auto; }

.bs-appt-name {
    display: block;
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--bs-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.bs-appt-treatment {
    display: block;
    margin-top: 1px;
    font-size: 0.6875rem;
    color: var(--bs-text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.bs-appt-when { flex-shrink: 0; text-align: right; }

.bs-appt-time {
    display: block;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--bs-text);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.bs-appt-duration {
    display: block;
    font-size: 0.625rem;
    color: var(--bs-text-muted);
    white-space: nowrap;
}

.bs-appt-foot {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.bs-appt-due {
    font-size: 0.6875rem;
    font-weight: 600;
    color: #e11d48;
    font-variant-numeric: tabular-nums;
}

.bs-appt-notes {
    font-size: 0.6875rem;
    color: var(--bs-text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1 1 auto;
    min-width: 0;
}

/* Compact variant for the week and month grids */
.bs-appt.is-compact {
    flex-direction: row;
    align-items: center;
    gap: 6px;
    padding: 4px 6px 4px 9px;
    border-radius: 8px;
    background-color: var(--bs-tone-soft);
    border-color: transparent;
}

.bs-appt.is-compact:hover { transform: none; box-shadow: var(--bs-shadow-sm); }
.bs-appt.is-compact .bs-appt-bar { width: 2.5px; }

.bs-appt.is-compact .bs-appt-time {
    font-size: 0.625rem;
    color: var(--bs-tone);
    flex-shrink: 0;
}

.bs-appt.is-compact .bs-appt-name { font-size: 0.6875rem; font-weight: 500; }

/* --- Day grid ------------------------------------------------------------ */
.bs-day-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 20px 24px;
    border-bottom: 1px solid var(--bs-border);
    flex-wrap: wrap;
}

.bs-day-date {
    margin-top: 2px;
    font-size: 1.125rem;
    font-weight: 700;
    letter-spacing: -0.025em;
    color: var(--bs-text);
}

.bs-daygrid {
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr);
    padding: 8px 16px 16px;
}

.bs-hour-label {
    padding: 12px 12px 0 0;
    text-align: right;
    font-size: 0.6875rem;
    font-weight: 600;
    color: var(--bs-text-muted);
    font-variant-numeric: tabular-nums;
    border-top: 1px solid var(--bs-border);
}

.bs-hour-slot {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-height: 52px;
    padding: 8px 0;
    border-top: 1px solid var(--bs-border);
}

.bs-slot-add {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 10px;
    border-radius: var(--bs-r-sm);
    font-size: 0.6875rem;
    font-weight: 500;
    color: var(--bs-text-muted);
    text-decoration: none;
    opacity: 0;
    transition: opacity var(--bs-fast) var(--bs-ease), background-color var(--bs-fast) var(--bs-ease);
}

.bs-hour-slot:hover .bs-slot-add { opacity: 1; background-color: var(--bs-surface-2); }

/* --- Week grid ----------------------------------------------------------- */
.bs-weekgrid {
    display: grid;
    grid-template-columns: 60px repeat(7, minmax(96px, 1fr));
    overflow-x: auto;
}

.bs-week-corner { border-bottom: 1px solid var(--bs-border); }

.bs-week-head {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 12px 6px;
    border-left: 1px solid var(--bs-border);
    border-bottom: 1px solid var(--bs-border);
    background: none;
    font-family: inherit;
    cursor: pointer;
    transition: background-color var(--bs-fast) var(--bs-ease);
}

.bs-week-head:hover { background-color: var(--bs-surface-2); }

.bs-week-dow {
    font-size: 0.625rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--bs-text-muted);
}

.bs-week-num {
    font-size: 1rem;
    font-weight: 700;
    color: var(--bs-text);
    font-variant-numeric: tabular-nums;
    line-height: 1.2;
}

.bs-week-head.is-today .bs-week-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    color: #fff;
    background-color: var(--bs-primary);
}

.bs-week-count {
    font-size: 0.5625rem;
    font-weight: 600;
    color: var(--bs-primary);
}

.bs-week-cell {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-height: 46px;
    padding: 4px;
    border-left: 1px solid var(--bs-border);
    border-top: 1px solid var(--bs-border);
}

.bs-week-cell.is-today { background-color: rgba(37, 99, 235, 0.035); }

.bs-weekgrid .bs-hour-label {
    padding: 6px 8px 0 0;
    border-top: 1px solid var(--bs-border);
}

.bs-cell-add {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1 1 auto;
    min-height: 34px;
    border-radius: 6px;
    color: var(--bs-text-muted);
    text-decoration: none;
    opacity: 0;
    transition: opacity var(--bs-fast) var(--bs-ease), background-color var(--bs-fast) var(--bs-ease);
}

.bs-week-cell:hover .bs-cell-add,
.bs-month-cell:hover .bs-cell-add { opacity: 1; background-color: var(--bs-surface-2); }

/* --- Month grid ---------------------------------------------------------- */
.bs-monthgrid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
}

.bs-month-dow {
    padding: 11px 8px;
    text-align: center;
    font-size: 0.625rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--bs-text-muted);
    background-color: var(--bs-surface-2);
    border-bottom: 1px solid var(--bs-border);
}

.bs-month-cell {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-height: 118px;
    padding: 6px;
    border-top: 1px solid var(--bs-border);
    border-left: 1px solid var(--bs-border);
}

.bs-month-cell:nth-child(7n + 1) { border-left: none; }
.bs-month-cell.is-outside { background-color: var(--bs-surface-2); }
.bs-month-cell.is-outside .bs-month-num { color: var(--bs-text-muted); }
.bs-month-cell.is-today { background-color: rgba(37, 99, 235, 0.04); }

.bs-month-num {
    align-self: flex-start;
    min-width: 24px;
    height: 24px;
    padding: 0 6px;
    border: none;
    border-radius: var(--bs-r-full);
    background: none;
    font-family: inherit;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--bs-text);
    font-variant-numeric: tabular-nums;
    cursor: pointer;
    transition: background-color var(--bs-fast) var(--bs-ease), color var(--bs-fast) var(--bs-ease);
}

.bs-month-num:hover { background-color: var(--bs-surface-2); }

.bs-month-cell.is-today .bs-month-num {
    color: #fff;
    background-color: var(--bs-primary);
}

.bs-month-items { display: flex; flex-direction: column; gap: 3px; min-width: 0; }

.bs-month-more {
    padding: 2px 6px;
    border: none;
    background: none;
    font-family: inherit;
    font-size: 0.625rem;
    font-weight: 600;
    color: var(--bs-primary);
    text-align: left;
    cursor: pointer;
}

.bs-action-row { display: flex; flex-wrap: wrap; gap: 6px; }

.dark .bs-appt { background-color: var(--bs-surface) !important; }
.dark .bs-appt.is-compact { background-color: var(--bs-tone-soft) !important; }
.dark .bs-month-dow,
.dark .bs-month-cell.is-outside { background-color: var(--bs-surface-2) !important; }
.dark .bs-week-cell.is-today,
.dark .bs-month-cell.is-today { background-color: rgba(96, 165, 250, 0.08); }

@media (max-width: 767px) {
    .bs-filter-select { width: 100%; min-width: 0; }
    .bs-month-cell { min-height: 84px; }
    .bs-daygrid { grid-template-columns: 52px minmax(0, 1fr); padding: 8px; }
}

/* ==========================================================================
   38. Appointment form + detail
   ========================================================================== */

/* Inline patient summary strip */
.bs-client-strip {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 16px;
    padding: 12px;
    border-radius: var(--bs-r-md);
    background-color: var(--bs-surface-2);
    text-decoration: none;
    transition: background-color var(--bs-fast) var(--bs-ease);
}

a.bs-client-strip:hover { background-color: var(--bs-primary-soft); }
.bs-client-strip svg { color: var(--bs-text-muted); flex-shrink: 0; }

/* Bookable slot grid */
.bs-slot-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(74px, 1fr));
    gap: 6px;
}

.bs-slot {
    padding: 9px 4px;
    border: 1px solid var(--bs-border-strong);
    border-radius: var(--bs-r-sm);
    background-color: var(--bs-surface);
    font-family: inherit;
    font-size: 0.75rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--bs-text-secondary);
    cursor: pointer;
    transition: border-color var(--bs-fast) var(--bs-ease),
                background-color var(--bs-fast) var(--bs-ease),
                color var(--bs-fast) var(--bs-ease);
}

.bs-slot:hover:not(:disabled) {
    border-color: var(--bs-primary);
    color: var(--bs-primary);
}

.bs-slot.is-active {
    border-color: var(--bs-primary);
    background-color: var(--bs-primary);
    color: #fff;
    box-shadow: var(--bs-shadow-primary);
}

.bs-slot.is-booked {
    background-color: var(--bs-surface-2);
    border-color: transparent;
    color: var(--bs-text-muted);
    cursor: not-allowed;
    text-decoration: line-through;
}

/* Tooth chips shown on recorded acts */
.bs-teeth-chips { display: inline-flex; flex-wrap: wrap; gap: 3px; }

.bs-tooth-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    height: 20px;
    padding: 0 5px;
    border-radius: 6px;
    font-size: 0.625rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--bs-primary-700);
    background-color: var(--bs-primary-soft);
}

/* Anatomical tooth picker used when recording an act */
.bs-teeth-picker {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 14px 12px;
    border: 1px solid var(--bs-border);
    border-radius: var(--bs-r-md);
    background-color: var(--bs-surface-2);
}

.bs-teeth-picker-row {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 8px;
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: thin;
    padding-bottom: 2px;
}

.bs-teeth-picker-row.is-lower { align-items: flex-start; }

/* Slightly smaller than the full odontogram — this sits inside a form. */
.bs-teeth-picker .bs-tooth { padding: 2px 0; gap: 2px; }
.bs-teeth-picker .bs-tooth-svg { height: 40px; }
.bs-teeth-picker .bs-tooth-molar { height: 42px; }
.bs-teeth-picker .bs-tooth-canine { height: 44px; }
.bs-teeth-picker .bs-tooth-incisor { height: 38px; }
.bs-teeth-picker .bs-tooth:hover { background-color: var(--bs-surface); }

/* A tooth already carrying an act on this appointment keeps its colour. */
.bs-tooth.is-treated .bs-tooth-crown {
    stroke: rgba(9, 12, 20, 0.32);
    stroke-width: 1.4;
}

.bs-tooth.is-treated .bs-tooth-num {
    color: var(--bs-text);
    font-weight: 700;
}

/* The tooth being added to the act in progress. */
.bs-tooth.is-selected .bs-tooth-crown {
    stroke: var(--bs-primary);
    stroke-width: 2.5;
}

.bs-tooth.is-selected .bs-tooth-svg {
    transform: scale(1.1);
    filter: drop-shadow(0 3px 6px rgba(37, 99, 235, 0.45));
}

.bs-tooth.is-selected .bs-tooth-num {
    color: var(--bs-primary);
    font-weight: 700;
}

.bs-teeth-picker .bs-teeth-split {
    align-self: stretch;
    margin: 0 14px;
}

/* ==========================================================================
   39. Searchable select (combobox)
   ========================================================================== */
.bs-combo { position: relative; }

.bs-combo-selected {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 38px;
    padding: 6px 8px 6px 10px;
    border: 1px solid var(--bs-border-strong);
    border-radius: var(--bs-r-md);
    background-color: var(--bs-surface);
}

.bs-combo-selected.is-invalid { border-color: #e11d48; }
.bs-combo-selected .bs-icon-btn { margin-left: auto; flex-shrink: 0; }

.bs-combo-list {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    z-index: 40;
    max-height: 288px;
    overflow-y: auto;
    padding: 4px;
    background-color: var(--bs-surface);
    border: 1px solid var(--bs-border);
    border-radius: var(--bs-r-md);
    box-shadow: var(--bs-shadow-lg);
}

.bs-combo-option {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 7px 8px;
    border: none;
    border-radius: var(--bs-r-sm);
    background: none;
    font-family: inherit;
    text-align: left;
    cursor: pointer;
    transition: background-color var(--bs-fast) var(--bs-ease);
}

.bs-combo-option:hover,
.bs-combo-option:focus-visible {
    background-color: var(--bs-primary-soft);
    outline: none;
}

.bs-combo-meta {
    margin-left: auto;
    flex-shrink: 0;
    font-size: 0.6875rem;
    font-weight: 600;
    color: var(--bs-text-muted);
    font-variant-numeric: tabular-nums;
}

.bs-combo-empty {
    padding: 18px 12px;
    text-align: center;
    font-size: 0.8125rem;
    color: var(--bs-text-muted);
}

.dark .bs-combo-selected,
.dark .bs-combo-list { background-color: var(--bs-surface) !important; }

.dark .bs-client-strip,
.dark .bs-teeth-picker { background-color: var(--bs-surface-2) !important; }
.dark .bs-slot { background-color: var(--bs-surface) !important; }
.dark .bs-slot.is-booked { background-color: var(--bs-surface-2) !important; }
.dark .bs-slot.is-active { background-color: var(--bs-primary) !important; }
.dark .bs-teeth-picker .bs-tooth:hover { background-color: var(--bs-surface) !important; }
.dark .bs-tooth.is-treated .bs-tooth-crown { stroke: rgba(0, 0, 0, 0.45); }

@media (prefers-reduced-motion: reduce) {
    .bs-anim-in, .bs-anim-out, .bs-slide-in, .bs-slide-out, .bs-skeleton, .bs-toast {
        animation: none !important;
    }
}


/* --------------------------------------------------------------------------
   45. Form layout & detail lists
   Shared by the onboarding wizard and the in-app team screens.
   -------------------------------------------------------------------------- */
.bs-page-narrow { max-width: 760px; }

.bs-form-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
}

@media (min-width: 640px) {
    .bs-form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .bs-col-span-2 { grid-column: span 2; }
}

.bs-form-foot {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid var(--bs-border);
}

.bs-grid-2 {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
    align-items: start;
}

@media (min-width: 1000px) {
    .bs-grid-2 { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
}

.bs-detail-list { display: flex; flex-direction: column; gap: 2px; }

.bs-detail-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    padding: 11px 0;
    border-bottom: 1px solid var(--bs-border);
}

.bs-detail-row:last-child { border-bottom: none; }

.bs-detail-row dt {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    font-size: 0.8125rem;
    color: var(--bs-text-muted);
}

.bs-detail-row dt svg { color: var(--bs-text-muted); }

.bs-detail-row dd {
    margin: 0;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--bs-text);
    text-align: end;
    word-break: break-word;
}

.bs-detail-row dd.is-empty { font-weight: 400; color: var(--bs-text-muted); }

.bs-table-end { text-align: end; }

.bs-select-sm {
    height: 32px;
    padding-block: 0;
    font-size: 0.75rem;
}

.bs-icon-btn-danger:hover {
    color: #e11d48;
    background-color: #fff1f2;
}

.dark .bs-icon-btn-danger:hover {
    color: #fb7185;
    background-color: #2b141b !important;
}


/* --------------------------------------------------------------------------
   46. Role permissions
   -------------------------------------------------------------------------- */
.bs-perm-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 18px;
    padding: 4px;
    border: 1px solid var(--bs-border);
    border-radius: var(--bs-r-md);
    background-color: var(--bs-surface-2);
    width: fit-content;
    max-width: 100%;
}

.bs-perm-tab {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 15px;
    border-radius: var(--bs-r-sm);
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--bs-text-secondary);
    text-decoration: none;
    white-space: nowrap;
    transition: background-color var(--bs-fast) var(--bs-ease);
}

.bs-perm-tab:hover { color: var(--bs-text); }

.bs-perm-tab.is-active {
    background-color: var(--bs-surface);
    color: var(--bs-text);
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
}

.bs-perm-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: var(--bs-primary);
}

.bs-perm-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    padding-bottom: 18px;
    margin-bottom: 4px;
    border-bottom: 1px solid var(--bs-border);
}

.bs-perm-head-actions { display: flex; gap: 6px; flex-shrink: 0; }

.bs-perm-groups {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 26px;
    padding-top: 20px;
}

@media (min-width: 760px) {
    .bs-perm-groups { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.bs-perm-group-title {
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--bs-text-muted);
    margin-bottom: 10px;
}

.bs-perm-row {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 9px 10px;
    border-radius: var(--bs-r-sm);
    cursor: pointer;
    transition: background-color var(--bs-fast) var(--bs-ease);
}

.bs-perm-row:hover { background-color: var(--bs-surface-2); }
.bs-perm-row .bs-check { margin-top: 1px; flex-shrink: 0; }

.bs-perm-label {
    font-size: 0.8125rem;
    line-height: 1.45;
    color: var(--bs-text);
}

.bs-perm-hint {
    display: inline-block;
    margin-inline-start: 6px;
    padding: 1px 7px;
    border-radius: var(--bs-r-full);
    background-color: var(--bs-tone-soft, var(--bs-surface-2));
    font-size: 0.625rem;
    font-weight: 600;
    color: var(--bs-text-muted);
    vertical-align: middle;
}

.dark .bs-perm-tab.is-active { background-color: var(--bs-surface) !important; }
.dark .bs-perm-row:hover { background-color: var(--bs-surface-2) !important; }

/* Dashboard main grid collapses to one column when the revenue card is hidden
   from a member without reports.view. */
.bs-grid-main-single { grid-template-columns: minmax(0, 1fr) !important; }


/* --------------------------------------------------------------------------
   47. Top bar — redesigned cluster
   -------------------------------------------------------------------------- */
.bs-topbar-icons {
    display: flex;
    align-items: center;
    gap: 2px;
    padding: 3px;
    border-radius: var(--bs-r-md);
    background-color: var(--bs-surface-2);
}

.bs-chip-link {
    text-decoration: none;
    transition: opacity var(--bs-fast) var(--bs-ease);
}

.bs-chip-link:hover { opacity: 0.82; }

.bs-team-btn {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    height: 38px;
    padding: 0 10px;
    border: 1px solid transparent;
    border-radius: var(--bs-r-md);
    background-color: transparent;
    font-family: inherit;
    color: var(--bs-text);
    cursor: pointer;
    transition: background-color var(--bs-fast) var(--bs-ease),
                border-color var(--bs-fast) var(--bs-ease);
}

.bs-team-btn:hover {
    background-color: var(--bs-surface-2);
    border-color: var(--bs-border);
}

.bs-team-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 26px;
    height: 26px;
    border-radius: var(--bs-r-sm);
    color: var(--bs-primary);
    background-color: var(--bs-primary-soft);
}

.bs-team-meta {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    line-height: 1.2;
    min-width: 0;
}

.bs-team-name {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--bs-text);
    max-width: 150px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bs-team-role {
    font-size: 0.625rem;
    font-weight: 500;
    color: var(--bs-text-muted);
}

.bs-menu-head-user {
    display: flex;
    align-items: center;
    gap: 11px;
}

.bs-menu-head-user .bs-label {
    max-width: 180px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dark .bs-topbar-icons { background-color: var(--bs-surface-2) !important; }
.dark .bs-team-btn:hover { background-color: var(--bs-surface-2) !important; }


/* --------------------------------------------------------------------------
   48. Invitations
   -------------------------------------------------------------------------- */
.bs-pending {
    padding: 16px 18px 6px;
    border-top: 1px solid var(--bs-border);
}

.bs-pending-row {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 10px 0;
    border-bottom: 1px solid var(--bs-border);
}

.bs-pending-row:last-child { border-bottom: none; }

.bs-pending-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border-radius: var(--bs-r-sm);
    color: var(--bs-text-muted);
    background-color: var(--bs-surface-2);
}

.bs-pending-meta {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    line-height: 1.35;
}

.bs-pending-meta strong {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--bs-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bs-pending-meta span { font-size: 0.6875rem; color: var(--bs-text-muted); }

/* Invitation landing card */
.bs-invite-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px;
    margin-bottom: 22px;
    border: 1px solid var(--bs-border);
    border-radius: var(--bs-r-md);
    background-color: var(--bs-surface-2);
}

.bs-invite-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    border-radius: var(--bs-r-md);
    color: var(--bs-primary);
    background-color: var(--bs-primary-soft);
}

.bs-invite-card strong {
    display: block;
    font-size: 0.9375rem;
    font-weight: 650;
    color: var(--bs-text);
}

.bs-invite-card span {
    display: block;
    margin-top: 2px;
    font-size: 0.8125rem;
    color: var(--bs-text-muted);
}


/* --------------------------------------------------------------------------
   49. Stock — table helpers
   -------------------------------------------------------------------------- */
.bs-cell-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 34px;
    height: 34px;
    border-radius: var(--bs-r-sm);
    color: var(--bs-tone, var(--bs-primary));
    background-color: var(--bs-tone-soft, var(--bs-primary-soft));
}

/* Figures read right-aligned so magnitudes line up down the column. */
.bs-num-col { text-align: end; white-space: nowrap; }

.bs-unit {
    margin-inline-start: 4px;
    font-size: 0.6875rem;
    font-weight: 500;
    color: var(--bs-text-muted);
}

.bs-mono {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.75rem;
    color: var(--bs-text-secondary);
}

/* Two-line detail rows inside a definition-style panel */
.bs-kv {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 2px;
}

@media (min-width: 640px) {
    .bs-kv { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px 24px; }
}

.bs-kv-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 14px;
    padding: 10px 0;
    border-bottom: 1px solid var(--bs-border);
}

.bs-kv-row dt { font-size: 0.75rem; color: var(--bs-text-muted); flex-shrink: 0; }

.bs-kv-row dd {
    margin: 0;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--bs-text);
    text-align: end;
    word-break: break-word;
}

.bs-stack-inline { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }

/* Footer strip inside a padless card — pagination, summary rows. */
.bs-card-foot {
    padding: 14px 18px;
    border-top: 1px solid var(--bs-border);
}


/* --------------------------------------------------------------------------
   50. Stock consumption confirmation
   -------------------------------------------------------------------------- */
/* Compact number input that sits inline in a table cell. */
.bs-input-inline {
    width: 84px;
    min-height: 32px;
    padding: 4px 8px;
    text-align: end;
    display: inline-block;
}

.bs-input-qty { width: 110px; flex: 0 0 auto; }

.bs-add-row {
    padding: 14px;
    margin-top: 16px;
    border: 1px dashed var(--bs-border-strong);
    border-radius: var(--bs-r-md);
    background-color: var(--bs-surface-2);
}

.bs-add-row .bs-eyebrow { margin-bottom: 8px; }

/* A badge that toggles state when clicked. */
.bs-badge-btn {
    padding: 0;
    border: none;
    background: none;
    cursor: pointer;
    font-family: inherit;
}

.dark .bs-add-row { background-color: var(--bs-surface-2) !important; }


/* --------------------------------------------------------------------------
   51. Calendar drawer — open the treatment screen
   Deliberately loud: this is the way back into the appointment once you have
   navigated away, and it was the one action the drawer did not offer.
   -------------------------------------------------------------------------- */
.bs-open-appt {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px;
    border-radius: var(--bs-r-md);
    background-image: linear-gradient(135deg, var(--bs-primary) 0%, var(--bs-primary-700) 100%);
    color: #fff;
    text-decoration: none;
    box-shadow: 0 8px 20px -8px rgba(37, 99, 235, 0.6);
    transition: transform var(--bs-fast) var(--bs-ease),
                box-shadow var(--bs-fast) var(--bs-ease);
}

.bs-open-appt:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 26px -8px rgba(37, 99, 235, 0.7);
    color: #fff;
}

.bs-open-appt-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 42px;
    height: 42px;
    border-radius: var(--bs-r-md);
    background-color: rgba(255, 255, 255, 0.18);
}

.bs-open-appt-text { flex: 1 1 auto; min-width: 0; line-height: 1.3; }

.bs-open-appt-text strong {
    display: block;
    font-size: 0.9375rem;
    font-weight: 650;
}

.bs-open-appt-text span {
    display: block;
    margin-top: 2px;
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.78);
}


/* --------------------------------------------------------------------------
   52. Onboarding tour
   -------------------------------------------------------------------------- */
.bs-tour { text-align: center; }

.bs-tour-rail {
    display: flex;
    justify-content: center;
    gap: 8px;
    list-style: none;
    margin: 0;
    padding: 20px 20px 0;
}

.bs-tour-dot {
    width: 30px;
    height: 5px;
    border: none;
    border-radius: var(--bs-r-full);
    background-color: var(--bs-border-strong);
    cursor: pointer;
    padding: 0;
    transition: background-color var(--bs-fast) var(--bs-ease);
}

.bs-tour-dot.is-done { background-color: var(--bs-primary-soft); }
.bs-tour-dot.is-current { background-color: var(--bs-primary); }

.bs-tour-body { padding: 28px 32px 8px; }

.bs-tour-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 62px;
    height: 62px;
    margin-bottom: 18px;
    border-radius: var(--bs-r-lg);
    color: var(--bs-primary);
    background-color: var(--bs-primary-soft);
}

.bs-tour-icon.is-done { color: #059669; background-color: #ecfdf5; }
.dark .bs-tour-icon.is-done { color: #34d399; background-color: #10241d; }

.bs-tour-title {
    font-size: 1.375rem;
    font-weight: 700;
    letter-spacing: -0.03em;
    color: var(--bs-text);
}

.bs-tour-text {
    margin: 10px auto 20px;
    max-width: 46ch;
    font-size: 0.9375rem;
    line-height: 1.65;
    color: var(--bs-text-muted);
}

.bs-tour-done {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 16px;
    font-size: 0.75rem;
    font-weight: 600;
    color: #059669;
}

.dark .bs-tour-done { color: #34d399; }

.bs-tour-progress {
    margin-top: 18px;
    font-size: 0.8125rem;
    color: var(--bs-text-muted);
}

.bs-tour-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 20px 24px;
    margin-top: 12px;
    border-top: 1px solid var(--bs-border);
}

.bs-tour-nav { display: flex; align-items: center; gap: 8px; }

/* --------------------------------------------------------------------------
   53. Help articles
   -------------------------------------------------------------------------- */
.bs-prose { font-size: 0.9375rem; line-height: 1.7; color: var(--bs-text-secondary); }

.bs-prose h3 {
    margin: 26px 0 8px;
    font-size: 1rem;
    font-weight: 650;
    letter-spacing: -0.02em;
    color: var(--bs-text);
}

.bs-prose h3:first-child { margin-top: 0; }
.bs-prose p { margin-bottom: 12px; }

.bs-prose ul {
    margin: 0 0 16px;
    padding-inline-start: 20px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.bs-prose strong { color: var(--bs-text); font-weight: 600; }

.bs-note {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 13px 15px;
    margin: 18px 0;
    border-radius: var(--bs-r-md);
    font-size: 0.8125rem;
    line-height: 1.55;
    color: var(--bs-tone);
    background-color: var(--bs-tone-soft);
}

.bs-note svg { flex-shrink: 0; margin-top: 2px; }

.bs-help-links { display: flex; flex-direction: column; }

.bs-help-link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 18px;
    border-bottom: 1px solid var(--bs-border);
    text-decoration: none;
    color: var(--bs-text);
    transition: background-color var(--bs-fast) var(--bs-ease);
}

.bs-help-link:last-child { border-bottom: none; }
.bs-help-link:hover { background-color: var(--bs-surface-2); }

.bs-help-link > span:nth-child(2) { flex: 1 1 auto; min-width: 0; }
.bs-help-link strong { display: block; font-size: 0.8125rem; font-weight: 600; }

.bs-help-link strong + span {
    display: block;
    margin-top: 2px;
    font-size: 0.75rem;
    color: var(--bs-text-muted);
}

.dark .bs-help-link:hover { background-color: var(--bs-surface-2) !important; }