/* ── 1. DESIGN TOKENS ─────────────────────────────────────── */
:root {
    /* Brand Core */
    --bsd-brand-100: #dbeafe;
    --bsd-brand-200: #bfdbfe;
    --bsd-brand-300: #93c5fd;
    --bsd-brand-400: #60a5fa;
    --bsd-brand-500: #3b82f6;
    --bsd-brand-600: #2563eb;
    --bsd-brand-700: #1d4ed8;
    --bsd-brand-800: #1e40af;
    --bsd-brand-900: #1e3a8a;

    /* Accent: Amber */
    --bsd-amber-100: #fef3c7;
    --bsd-amber-400: #fbbf24;
    --bsd-amber-500: #f59e0b;
    --bsd-amber-600: #d97706;

    /* Accent: Emerald */
    --bsd-emerald-100: #d1fae5;
    --bsd-emerald-400: #34d399;
    --bsd-emerald-500: #10b981;
    --bsd-emerald-600: #059669;

    /* Accent: Rose */
    --bsd-rose-100: #ffe4e6;
    --bsd-rose-400: #fb7185;
    --bsd-rose-500: #f43f5e;
    --bsd-rose-600: #e11d48;

    /* Accent: Violet */
    --bsd-violet-100: #ede9fe;
    --bsd-violet-400: #a78bfa;
    --bsd-violet-500: #8b5cf6;
    --bsd-violet-600: #7c3aed;

    /* Accent: Cyan */
    --bsd-cyan-100: #cffafe;
    --bsd-cyan-400: #22d3ee;
    --bsd-cyan-500: #06b6d4;
    --bsd-cyan-600: #0891b2;

    /* Neutrals – Slate scale */
    --bsd-n-0:   #ffffff;
    --bsd-n-50:  #f8fafc;
    --bsd-n-100: #f1f5f9;
    --bsd-n-150: #eaf0f6;
    --bsd-n-200: #e2e8f0;
    --bsd-n-300: #cbd5e1;
    --bsd-n-400: #94a3b8;
    --bsd-n-500: #64748b;
    --bsd-n-600: #475569;
    --bsd-n-700: #334155;
    --bsd-n-800: #1e293b;
    --bsd-n-900: #0f172a;
    --bsd-n-950: #070e1c;

    /* Semantic surfaces (light mode) */
    --bsd-bg:           #f8fafc;
    --bsd-bg-subtle:    #f1f5f9;
    --bsd-surface:      #ffffff;
    --bsd-surface-2:    #f8fafc;
    --bsd-surface-3:    #f1f5f9;
    --bsd-border:       #e2e8f0;
    --bsd-border-2:     #cbd5e1;
    --bsd-text:         #0f172a;
    --bsd-text-2:       #334155;
    --bsd-text-muted:   #64748b;
    --bsd-text-faint:   #94a3b8;

    /* Semantic status */
    --bsd-success:        var(--bsd-emerald-500);
    --bsd-success-bg:     var(--bsd-emerald-100);
    --bsd-warning:        var(--bsd-amber-500);
    --bsd-warning-bg:     var(--bsd-amber-100);
    --bsd-danger:         var(--bsd-rose-500);
    --bsd-danger-bg:      var(--bsd-rose-100);
    --bsd-info:           var(--bsd-cyan-500);
    --bsd-info-bg:        var(--bsd-cyan-100);
    --bsd-primary:        var(--bsd-brand-500);
    --bsd-primary-bg:     var(--bsd-brand-100);
    --bsd-primary-hover:  var(--bsd-brand-600);

    /* Layout */
    --bsd-sidebar-w:      256px;
    --bsd-sidebar-min:    80px;
    --bsd-topbar-h:       62px;
    --bsd-gap:            20px;
    --bsd-gap-lg:         28px;
    --bsd-gap-sm:         12px;

    /* Shape */
    --bsd-r-xs:    2px;
    --bsd-r-sm:    4px;
    --bsd-r:       6px;
    --bsd-r-md:    8px;
    --bsd-r-lg:    12px;
    --bsd-r-xl:    16px;
    --bsd-r-full:  9999px;

    /* Typography */
    --bsd-font:         'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --bsd-font-display: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --bsd-font-mono:    'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;

    --bsd-text-2xs: 10px;
    --bsd-text-xs:  12px;
    --bsd-text-sm:  14px;
    --bsd-text-base:14px;
    --bsd-text-md:  16px;
    --bsd-text-lg:  18px;
    --bsd-text-xl:  20px;
    --bsd-text-2xl: 24px;
    --bsd-text-3xl: 30px;
    --bsd-text-4xl: 36px;
    --bsd-text-5xl: 48px;

    /* Shadows */
    --bsd-shadow-xs:  0 1px 2px 0 rgb(0 0 0 / 0.05);
    --bsd-shadow-sm:  0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
    --bsd-shadow:     0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    --bsd-shadow-md:  0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
    --bsd-shadow-lg:  0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
    --bsd-shadow-xl:  0 25px 50px -12px rgb(0 0 0 / 0.25);
    --bsd-shadow-focus: 0 0 0 3px rgb(59 130 246 / 0.3);
    --bsd-shadow-focus-danger: 0 0 0 3px rgb(244 63 94 / 0.3);
    --bsd-shadow-inset: inset 0 2px 4px 0 rgb(0 0 0 / 0.05);

    /* Transitions */
    --bsd-ease:      cubic-bezier(0.4, 0, 0.2, 1);
    --bsd-ease-out:  cubic-bezier(0, 0, 0.2, 1);
    --bsd-ease-in:   cubic-bezier(0.4, 0, 1, 1);
    --bsd-dur-fast:  100ms;
    --bsd-dur:       150ms;
    --bsd-dur-slow:  300ms;
    --bsd-t:         all var(--bsd-dur) var(--bsd-ease);
    --bsd-t-fast:    all var(--bsd-dur-fast) var(--bsd-ease);
    --bsd-t-slow:    all var(--bsd-dur-slow) var(--bsd-ease);

    /* Z-index layers */
    --bsd-z-base:     1;
    --bsd-z-raised:   10;
    --bsd-z-sidebar:  100;
    --bsd-z-topbar:   200;
    --bsd-z-dropdown: 300;
    --bsd-z-overlay:  350;
    --bsd-z-modal:    400;
    --bsd-z-toast:    500;
    --bsd-z-tooltip:  600;

    --bsd-footer-h: 38px;
}

/* Dark theme override */
[data-bsd-theme="dark"] {
    --bsd-bg:           #0f172a;
    --bsd-bg-subtle:    #0f172a;
    --bsd-surface:      #1e293b;
    --bsd-surface-2:    #1e293b;
    --bsd-surface-3:    #334155;
    --bsd-border:       #334155;
    --bsd-border-2:     #475569;
    --bsd-text:         #f1f5f9;
    --bsd-text-2:       #e2e8f0;
    --bsd-text-muted:   #94a3b8;
    --bsd-text-faint:   #64748b;
    --bsd-shadow-xs:  0 1px 2px 0 rgb(0 0 0 / 0.3);
    --bsd-shadow-sm:  0 1px 3px 0 rgb(0 0 0 / 0.4);
    --bsd-shadow:     0 4px 6px -1px rgb(0 0 0 / 0.4);
    --bsd-shadow-md:  0 10px 15px -3px rgb(0 0 0 / 0.45);
    --bsd-shadow-lg:  0 20px 25px -5px rgb(0 0 0 / 0.5);
}


/* ── 2. BASE ──────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html { font-size: 16px; scroll-behavior: smooth; }

body.bsd-body {
    font-family: var(--bsd-font);
    font-size: var(--bsd-text-base);
    line-height: 1.6;
    color: var(--bsd-text);
    background: #f0f4fb;
    margin: 0;
    padding: 0;
    min-height: 100vh;
    height: 100%;
    -webkit-font-smoothing: antialiased;
}

a.bsd-link {
    color: var(--bsd-primary);
    text-decoration: none;
    transition: var(--bsd-t-fast);
}
a.bsd-link:hover { text-decoration: underline; opacity: 0.85; }


/* ── 3. LAYOUT ────────────────────────────────────────────── */

.bsd-body-bg {
    background: #f0f4fb;
}

.bsd-wrapper {
    display: flex;
    min-height: 100vh;
}

.bsd-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
    margin-left: var(--bsd-sidebar-w);
    transition: margin-left var(--bsd-t-slow);
}

.bsd-main--collapsed { margin-left: var(--bsd-sidebar-min); }
.bsd-main--full      { margin-left: 0; }

.bsd-content {
    flex: 1;
    padding: var(--bsd-gap-lg);
    margin-top: var(--bsd-topbar-h);
}

.bsd-content--boxed {
    max-width: 1440px;
    margin-inline: auto;
}


/* ── 4. SIDEBAR ───────────────────────────────────────────── */
.bsd-sidebar {
    width: var(--bsd-sidebar-w);
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    z-index: var(--bsd-z-sidebar);
    background: var(--bsd-surface);
    border-right: 1px solid var(--bsd-border);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition: width var(--bsd-t-slow);
    box-shadow: var(--bsd-shadow-sm);
}

.bsd-sidebar--collapsed { width: var(--bsd-sidebar-min); }

/* Brand area */
.bsd-sidebar__brand {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 18px;
    height: var(--bsd-topbar-h);
    border-bottom: 1px solid var(--bsd-border);
    flex-shrink: 0;
    overflow: hidden;
}

.bsd-sidebar__logo {
    width: 34px;
    height: 34px;
    border-radius: var(--bsd-r-sm);
    background: linear-gradient(135deg, var(--bsd-brand-500), var(--bsd-brand-700));
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--bsd-n-0, #fff);
    font-size: 15px;
    font-weight: 700;
    flex-shrink: 0;
    font-family: var(--bsd-font-display);
    box-shadow: 0 2px 8px rgba(41,82,227,0.35);
}

.bsd-sidebar__brand-name {
    font-size: var(--bsd-text-lg);
    font-weight: 700;
    color: var(--bsd-text);
    white-space: nowrap;
    font-family: var(--bsd-font-display);
    letter-spacing: -0.02em;
}

.bsd-sidebar__brand-badge {
    font-size: var(--bsd-text-2xs);
    font-weight: 600;
    background: var(--bsd-primary-bg);
    color: var(--bsd-primary);
    border-radius: var(--bsd-r-xs);
    padding: 1px 5px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    flex-shrink: 0;
}

.bsd-sidebar--drop {
    margin: 5px 8px 10px;
}

/* Nav scroll area */
.bsd-sidebar__nav {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 14px 10px;
    scrollbar-width: thin;
    scrollbar-color: var(--bsd-border) transparent;
}

.bsd-sidebar__nav::-webkit-scrollbar { width: 3px; }
.bsd-sidebar__nav::-webkit-scrollbar-thumb { background: var(--bsd-border-2); border-radius: 2px; }

/* Section label */
.bsd-nav-section { margin-bottom: 6px; }

.bsd-nav-section__label {
    font-size: var(--bsd-text-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--bsd-text-faint);
    padding: 12px 12px 4px;
    white-space: nowrap;
    overflow: hidden;
    transition: var(--bsd-t-slow);
    font-family: var(--bsd-font-display);
}

.bsd-sidebar--collapsed .bsd-nav-section__label {
    opacity: 0;
    height: 0;
    padding: 0;
    margin: 0;
}

/* Nav item */
.bsd-nav-item {
    display: flex;
    align-items: center;
    gap: 11px;
    min-height: 46px;
    padding: 10px 12px;
    margin-bottom: 4px;
    border-radius: 10px;
    color: rgba(255, 255, 255, 0.8);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: 0.2s ease;
    white-space: nowrap;
    overflow: hidden;
    text-decoration: none;
    position: relative;
    user-select: none;
}

.bsd-nav-item:hover {
    color: var(--bsd-n-0, #ffffff);
    background: rgba(255, 255, 255, 0.1);
    transform: translateX(2px);
    text-decoration: none;
}

.bsd-nav-item.active {
    background: linear-gradient(135deg, #0878f9, #0759c9);
    color: var(--bsd-n-0, #ffffff);
    font-weight: 600;
    border-radius: 12px;
    box-shadow: 0 5px 14px rgba(0, 98, 220, 0.25);
}

.bsd-nav-item.active::before {
    display: none;
}

.bsd-nav-item.active svg,
.bsd-nav-item.active i {
    color: var(--bsd-n-0, #ffffff) !important;
    opacity: 1;
}

.bsd-nav-item__icon {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    opacity: 0.7;
}

.sidebar-dark .nav-item.active .nav-link,
.sidebar-dark .nav-item .nav-link.active {
    background: linear-gradient(135deg, #0878f9, #0759c9);
    color: var(--bsd-n-0, #ffffff) !important;
    font-weight: 600;
    border-radius: 12px;
    box-shadow: 0 5px 14px rgba(0, 98, 220, 0.25);
}

.bsd-nav-item.active .bsd-nav-item__icon { opacity: 1; }

.bsd-nav-item__label {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: opacity var(--bsd-t-slow), width var(--bsd-t-slow);
}

.bsd-sidebar--collapsed .bsd-nav-item__label,
.bsd-sidebar--collapsed .bsd-nav-item__badge {
    opacity: 0;
    width: 0;
    overflow: hidden;
}

.bsd-nav-item__badge {
    font-size: var(--bsd-text-2xs);
    font-weight: 700;
    background: var(--bsd-primary);
    color: var(--bsd-n-0, #fff);
    border-radius: var(--bsd-r-full);
    padding: 1px 6px;
    min-width: 18px;
    text-align: center;
    flex-shrink: 0;
    line-height: 16px;
}

.bsd-nav-item__badge--danger { background: var(--bsd-danger); }
.bsd-nav-item__badge--warning { background: var(--bsd-warning); }

/* Sidebar footer */
.bsd-sidebar__footer {
    border-top: 1px solid var(--bsd-border);
    padding: 12px 10px;
    flex-shrink: 0;
}

.bsd-sidebar__user {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: var(--bsd-r-sm);
    cursor: pointer;
    transition: var(--bsd-t);
    overflow: hidden;
}

.bsd-sidebar__user:hover { background: var(--bsd-surface-3); }

.bsd-avatar {
    width: 32px;
    height: 32px;
    border-radius: var(--bsd-r-full);
    object-fit: cover;
    flex-shrink: 0;
    background: var(--bsd-primary-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--bsd-primary);
    font-size: var(--bsd-text-xs);
    font-weight: 700;
    font-family: var(--bsd-font-display);
}

.bsd-avatar--sm  { width: 28px; height: 28px; font-size: 11px; }
.bsd-avatar--md  { width: 36px; height: 36px; font-size: 13px; }
.bsd-avatar--lg  { width: 44px; height: 44px; font-size: 16px; }
.bsd-avatar--xl  { width: 56px; height: 56px; font-size: 20px; }
.bsd-avatar--xxl { width: 72px; height: 72px; font-size: 26px; }

.bsd-avatar--primary  { background: var(--bsd-primary-bg);  color: var(--bsd-primary); }
.bsd-avatar--success  { background: var(--bsd-success-bg);  color: var(--bsd-success); }
.bsd-avatar--danger   { background: var(--bsd-danger-bg);   color: var(--bsd-danger);  }
.bsd-avatar--warning  { background: var(--bsd-warning-bg);  color: var(--bsd-warning); }
.bsd-avatar--violet   { background: var(--bsd-violet-100);  color: var(--bsd-violet-600); }

.bsd-sidebar__user-info {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    transition: opacity var(--bsd-t-slow);
}

.bsd-sidebar--collapsed .bsd-sidebar__user-info { opacity: 0; width: 0; }

.bsd-sidebar__user-name {
    font-size: var(--bsd-text-sm);
    font-weight: 600;
    color: var(--bsd-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.bsd-sidebar__user-role {
    font-size: var(--bsd-text-xs);
    color: var(--bsd-text-faint);
    white-space: nowrap;
}

.sidebar-brand {
    height: 65px;
}

.sidebar-dark {
    width: 250px;
    min-height: 100vh;
    padding: 16px 14px;
    padding-bottom: 84px;
    background: linear-gradient(
        180deg,
        #07336d 0%,
        #002b64 55%,
        #001f49 100%
    );
    overflow-x: hidden;
    overflow-y: auto;
    box-shadow: 5px 0 20px rgba(0, 31, 73, 0.14);
}

.bsd-sidebar__user-sticky {
    position: fixed;
    bottom: 0;
    left: 0;
    width: inherit;
    z-index: 5;
    padding: 10px 14px;
    background: #001f49;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    list-style: none;
}

.sidebar.toggled .bsd-sidebar__user-sticky {
    width: 0;
    padding: 0;
    overflow: hidden;
    border-top: none;
}


/* ── 5. TOPBAR ────────────────────────────────────────────── */

.navbar-light {
    border-bottom: 1px solid var(--bsd-border);
}

.bsd-topbar {
    height: var(--bsd-topbar-h);
    background: var(--bsd-surface);
    border-bottom: 1px solid var(--bsd-border);
    align-items: center;
    gap: 12px;
    padding: 0 var(--bsd-gap-lg);
    z-index: var(--bsd-z-topbar);
    transition: left var(--bsd-t-slow);
    box-shadow: var(--bsd-shadow-xs);
}

.bsd-main--collapsed .bsd-topbar,
.bsd-topbar--collapsed { left: var(--bsd-sidebar-min); }
.bsd-topbar--full      { left: 0; }

.bsd-topbar__toggle {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--bsd-r-sm);
    border: none;
    background: transparent;
    color: var(--bsd-text-muted);
    cursor: pointer;
    transition: var(--bsd-t-fast);
    flex-shrink: 0;
}

.bsd-topbar__toggle:hover { background: var(--bsd-surface-3); color: var(--bsd-text); }

.bsd-topbar__breadcrumb {
    align-items: center;
    gap: 6px;
    font-size: var(--bsd-text-sm);
    color: var(--bsd-text-muted);
}

.bsd-topbar__breadcrumb a {
    color: var(--bsd-text-muted);
    text-decoration: none;
    transition: var(--bsd-t-fast);
    cursor: pointer;
}

.bsd-topbar__breadcrumb a:hover { color: var(--bsd-primary); }
.bsd-topbar__breadcrumb-current { color: var(--bsd-text); font-weight: 500; cursor: auto}
.bsd-topbar__breadcrumb-sep { color: var(--bsd-text-faint); }

.bsd-topbar__spacer { flex: 1; }

/* Topbar search */
.bsd-topbar__search {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--bsd-surface-2);
    border: 1px solid var(--bsd-border);
    border-radius: var(--bsd-r-md);
    padding: 6px 12px;
    cursor: text;
    min-width: 220px;
    transition: var(--bsd-t-fast);
}

.bsd-topbar__search:focus-within {
    border-color: var(--bsd-primary);
    box-shadow: var(--bsd-shadow-focus);
}

.bsd-topbar__search-icon { color: var(--bsd-text-faint); font-size: 14px; }

.bsd-topbar__search-input {
    border: none;
    background: transparent;
    outline: none;
    font-size: var(--bsd-text-sm);
    color: var(--bsd-text);
    width: 100%;
    font-family: var(--bsd-font);
}

.bsd-topbar__search-input::placeholder { color: var(--bsd-text-faint); }

.bsd-topbar__search-kbd {
    font-size: var(--bsd-text-xs);
    color: var(--bsd-text-faint);
    font-family: var(--bsd-font-mono);
    background: var(--bsd-surface-3);
    border: 1px solid var(--bsd-border);
    border-radius: var(--bsd-r-xs);
    padding: 0 5px;
    line-height: 18px;
    flex-shrink: 0;
}

/* Topbar actions */
.bsd-topbar__actions {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}

.bsd-topbar__action-btn {
    width: 36px;
    height: 36px;
    border-radius: var(--bsd-r-sm);
    border: none;
    background: transparent;
    color: var(--bsd-text-muted);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--bsd-t-fast);
    position: relative;
    font-size: 16px;
}

.bsd-topbar__action-btn:hover { background: var(--bsd-surface-3); color: var(--bsd-text); }

.bsd-topbar__notif-dot {
    position: absolute;
    top: 7px;
    right: 7px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--bsd-danger);
    border: 1.5px solid var(--bsd-surface);
}

/* Theme toggle */
.bsd-theme-toggle {
    width: 36px;
    height: 36px;
    border-radius: var(--bsd-r-sm);
    border: 1px solid var(--bsd-border);
    background: var(--bsd-surface-2);
    color: var(--bsd-text-muted);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--bsd-t-fast);
    font-size: 15px;
}

.bsd-theme-toggle:hover { background: var(--bsd-surface-3); color: var(--bsd-text); }


/* ── 6. PAGE HEADER ───────────────────────────────────────── */
.bsd-page-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--bsd-gap-sm);
    margin-bottom: var(--bsd-gap-lg);
    flex-wrap: wrap;
}

.bsd-page-header__left { flex: 1; min-width: 0; }

.bsd-page-title {
    font-size: 30px;
    font-weight: 700;
    color: #0f2b52;
    font-family: var(--bsd-font);
    letter-spacing: -0.03em;
    margin: 0 0 6px;
    line-height: 1.2;
}

.bsd-page-subtitle {
    font-size: var(--bsd-text-sm);
    color: var(--bsd-text-muted);
    margin: 0;
}

.bsd-page-header__actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}


/* ── 7. CARDS ─────────────────────────────────────────────── */
.bsd-modal-form {
    position: fixed;
    top: 0;
}

.bsd-card {
    background: var(--bsd-n-0, #ffffff);
    border: 1px solid #dbe5f1;
    border-radius: 14px;
    box-shadow: 0 6px 20px rgba(15, 43, 82, 0.08);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    overflow: hidden;
}

.bsd-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 28px rgba(15, 43, 82, 0.14);
}

.bsd-card--elevated { box-shadow: var(--bsd-shadow); }

.bsd-card--hoverable:hover {
    box-shadow: var(--bsd-shadow-md);
    border-color: var(--bsd-border-2);
    transform: translateY(-1px);
}

.bsd-card__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 18px 20px;
    background: #f8fbff;
    border-bottom: 1px solid #e2eaf3;
}

.bsd-card__title {
    font-size: 17px;
    font-weight: 700;
    color: #0f2b52;
    font-family: var(--bsd-font-display);
    margin: 0;
    letter-spacing: -0.01em;
}

.bsd-card__subtitle {
    font-size: var(--bsd-text-xs);
    color: var(--bsd-text-muted);
    margin: 2px 0 0;
}

.bsd-card__actions { display: flex; align-items: center; gap: 6px; }

.bsd-card__body { padding: 20px; }
.bsd-card__body--compact { padding: 12px 16px; }
.bsd-card__body--flush   { padding: 0; }

.bsd-card__footer {
    padding: 14px 20px;
    border-top: 1px solid var(--bsd-border);
    background: var(--bsd-surface-2);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

/* Card accent bars */
.bsd-card--accent-primary { border-top: 3px solid var(--bsd-primary); }
.bsd-card--accent-success  { border-top: 3px solid var(--bsd-success); }
.bsd-card--accent-warning  { border-top: 3px solid var(--bsd-warning); }
.bsd-card--accent-danger   { border-top: 3px solid var(--bsd-danger);  }
.bsd-card--accent-violet   { border-top: 3px solid var(--bsd-violet-500); }
.bsd-card--accent-cyan     { border-top: 3px solid var(--bsd-cyan-500);   }

/* Glass card variant */
.bsd-card--glass {
    background: rgba(255,255,255,0.6);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-color: rgba(255,255,255,0.8);
}


/* ── 8. STAT / KPI CARDS ──────────────────────────────────── */

/* Full-width Stat Card column */
.row > .col-xl-3:has(> .bsd-kpi) {
    flex: 0 0 100%;
    max-width: 100%;
}

.bsd-kpi {
    background: linear-gradient(135deg, var(--bsd-n-0, #ffffff) 0%, #eef6ff 100%);
    border: 1px solid #cfe3ff;
    border-left: 4px solid var(--bsd-primary, #3b82f6);
    border-radius: 14px;
    padding: 24px 28px;
    min-height: 125px;

    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 30px;

    box-shadow: 0 6px 20px rgba(15, 43, 82, 0.08);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    position: relative;
    overflow: hidden;
}

.bsd-kpi:hover {
    box-shadow: 0 12px 28px rgba(15, 43, 82, 0.16);
    transform: translateY(-4px);
}

.bsd-kpi__header {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 14px;
}

.bsd-kpi__icon {
    order: 1;
}

.bsd-kpi__label {
    order: 2;
}

.bsd-kpi__label {
    font-size: var(--bsd-text-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--bsd-text-muted);
    font-family: var(--bsd-font-display);
}

.bsd-kpi__icon {
    width: 40px;
    height: 40px;
    border-radius: var(--bsd-r-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
}

.bsd-kpi__icon--primary {
    background: var(--bsd-primary, #3b82f6);
    color: var(--bsd-n-0, #ffffff);
    box-shadow: 0 6px 14px rgba(59, 130, 246, 0.25);
}


.bsd-kpi__icon--success  { background: var(--bsd-success-bg); color: var(--bsd-success); }
.bsd-kpi__icon--warning  { background: var(--bsd-warning-bg); color: var(--bsd-warning); }
.bsd-kpi__icon--danger   { background: var(--bsd-danger-bg);  color: var(--bsd-danger);  }
.bsd-kpi__icon--violet   { background: var(--bsd-violet-100); color: var(--bsd-violet-600); }
.bsd-kpi__icon--cyan     { background: var(--bsd-cyan-100);   color: var(--bsd-cyan-600);   }

.bsd-kpi__value {
    font-size: var(--bsd-text-4xl);
    font-weight: 700;
    color: var(--bsd-text);
    font-family: var(--bsd-font-display);
    letter-spacing: -0.04em;
    line-height: 1;
}

.bsd-kpi__delta {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: var(--bsd-text-xs);
    font-weight: 600;
    padding: 2px 7px;
    border-radius: var(--bsd-r-full);
}

.bsd-kpi__delta--up   { background: var(--bsd-success-bg); color: var(--bsd-success); }
.bsd-kpi__delta--down { background: var(--bsd-danger-bg);  color: var(--bsd-danger);  }
.bsd-kpi__delta--flat { background: var(--bsd-surface-3);  color: var(--bsd-text-muted); }

.bsd-kpi__footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
}

.bsd-kpi__compare {
    font-size: var(--bsd-text-xs);
    color: var(--bsd-text-muted);
}

@media (max-width: 768px) {
    .bsd-kpi {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .bsd-kpi__footer {
        justify-content: flex-start;
    }
}

/* Sparkline area (background decoration) */
.bsd-kpi__sparkline {
    position: absolute;
    bottom: 0;
    right: 0;
    opacity: 0.12;
    pointer-events: none;
}

/* Mini progress within KPI */
.bsd-kpi__bar {
    height: 3px;
    border-radius: 2px;
    background: var(--bsd-border);
    overflow: hidden;
}

.bsd-kpi__bar-fill {
    height: 100%;
    border-radius: 2px;
    background: var(--bsd-primary);
    transition: width 0.6s var(--bsd-ease-out);
}


/* ── 9. GRIDS ─────────────────────────────────────────────── */
.bsd-grid {
    display: grid;
    gap: var(--bsd-gap);
}

.bsd-grid-1 { grid-template-columns: 1fr; }
.bsd-grid-2 { grid-template-columns: repeat(2, 1fr); }
.bsd-grid-3 { grid-template-columns: repeat(3, 1fr); }
.bsd-grid-4 { grid-template-columns: repeat(4, 1fr); }
.bsd-grid-5 { grid-template-columns: repeat(5, 1fr); }
.bsd-grid-6 { grid-template-columns: repeat(6, 1fr); }

.bsd-grid-2-1 { grid-template-columns: 2fr 1fr; }
.bsd-grid-1-2 { grid-template-columns: 1fr 2fr; }
.bsd-grid-3-1 { grid-template-columns: 3fr 1fr; }
.bsd-grid-1-3 { grid-template-columns: 1fr 3fr; }

.bsd-col-span-2 { grid-column: span 2; }
.bsd-col-span-3 { grid-column: span 3; }
.bsd-col-full   { grid-column: 1 / -1; }

.bsd-stack { display: flex; flex-direction: column; gap: var(--bsd-gap); }
.bsd-stack--sm { gap: var(--bsd-gap-sm); }
.bsd-stack--lg { gap: var(--bsd-gap-lg); }

.bsd-cluster { display: flex; flex-wrap: wrap; gap: var(--bsd-gap-sm); align-items: center; }


/* ── 10. BUTTONS ──────────────────────────────────────────── */
.bsd-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: var(--bsd-text-sm);
    font-weight: 600;
    font-family: var(--bsd-font);
    padding: 8px 16px;
    border-radius: var(--bsd-r);
    border: 1px solid transparent;
    cursor: pointer;
    text-decoration: none;
    transition: var(--bsd-t-fast);
    white-space: nowrap;
    user-select: none;
    line-height: 1.4;
    letter-spacing: 0.01em;
}

.bsd-btn:focus-visible { outline: none; box-shadow: var(--bsd-shadow-focus); }
.bsd-btn:disabled { opacity: 0.45; cursor: not-allowed; pointer-events: none; }

/* Sizes */
.bsd-btn--xs   { padding: 4px 8px;   font-size: var(--bsd-text-xs);  border-radius: var(--bsd-r-xs); gap: 4px; }
.bsd-btn--sm   { padding: 6px 12px;  font-size: var(--bsd-text-xs);  }
.bsd-btn--lg   { padding: 11px 22px; font-size: var(--bsd-text-md);  gap: 8px; }
.bsd-btn--xl   { padding: 14px 28px; font-size: var(--bsd-text-lg);  gap: 10px; border-radius: var(--bsd-r); }

/* Variants */
.bsd-btn--primary {
    background: var(--bsd-primary);
    color: var(--bsd-n-0, #fff);
    border-color: var(--bsd-primary);
    box-shadow: 0 1px 4px rgba(41,82,227,0.25);
}
.bsd-btn--primary:hover {
    background: var(--bsd-primary-hover);
    border-color: var(--bsd-primary-hover);
    box-shadow: 0 2px 8px rgba(41,82,227,0.35);
}

.bsd-btn--secondary {
    background: var(--bsd-surface);
    color: var(--bsd-text-2);
    border-color: var(--bsd-border-2);
    box-shadow: var(--bsd-shadow-xs);
}
.bsd-btn--secondary:hover { background: var(--bsd-surface-3); color: var(--bsd-text); }

.bsd-btn--ghost {
    background: transparent;
    color: var(--bsd-text-muted);
    border-color: transparent;
}
.bsd-btn--ghost:hover { background: var(--bsd-surface-3); color: var(--bsd-text); }

.bsd-btn--danger {
    background: var(--bsd-danger);
    color: var(--bsd-n-0, #fff);
    border-color: var(--bsd-danger);
}
.bsd-btn--danger:hover { background: var(--bsd-rose-600); border-color: var(--bsd-rose-600); }
.bsd-btn--danger:focus-visible { box-shadow: var(--bsd-shadow-focus-danger); }

.bsd-btn--success {
    background: var(--bsd-success);
    color: var(--bsd-n-0, #fff);
    border-color: var(--bsd-success);
}
.bsd-btn--success:hover { background: var(--bsd-emerald-600); }

.bsd-btn--warning {
    background: var(--bsd-warning);
    color: var(--bsd-n-0, #fff);
    border-color: var(--bsd-warning);
}
.bsd-btn--warning:hover { background: var(--bsd-amber-600); }

.bsd-btn--soft-primary { background: var(--bsd-primary-bg); color: var(--bsd-primary); border-color: transparent; }
.bsd-btn--soft-primary:hover { background: var(--bsd-brand-200); }

.bsd-btn--soft-danger  { background: var(--bsd-danger-bg);  color: var(--bsd-danger);  border-color: transparent; }
.bsd-btn--soft-success { background: var(--bsd-success-bg); color: var(--bsd-success); border-color: transparent; }
.bsd-btn--soft-warning { background: var(--bsd-warning-bg); color: var(--bsd-warning); border-color: transparent; }

/* Icon only */
.bsd-btn--icon { padding: 8px; border-radius: var(--bsd-r-sm); }
.bsd-btn--icon.bsd-btn--sm { padding: 6px; }

/* Pill shape */
.bsd-btn--pill { border-radius: var(--bsd-r-full); }

/* Loading state */
.bsd-btn--loading { position: relative; color: transparent !important; }
.bsd-btn--loading::after {
    content: '';
    position: absolute;
    width: 14px;
    height: 14px;
    border: 2px solid currentColor;
    border-top-color: transparent;
    border-radius: 50%;
    animation: bsd-spin 0.7s linear infinite;
    color: var(--bsd-n-0, #fff);
}


/* ── 11. BADGES ───────────────────────────────────────────── */
.bsd-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: var(--bsd-text-xs);
    font-weight: 600;
    padding: 2px 8px;
    border-radius: var(--bsd-r-full);
    white-space: nowrap;
    letter-spacing: 0.02em;
}

.bsd-badge--primary { background: var(--bsd-primary-bg); color: var(--bsd-primary); }
.bsd-badge--success { background: var(--bsd-success-bg); color: var(--bsd-success); }
.bsd-badge--warning { background: var(--bsd-warning-bg); color: var(--bsd-warning); }
.bsd-badge--danger  { background: var(--bsd-danger-bg);  color: var(--bsd-danger);  }
.bsd-badge--info    { background: var(--bsd-info-bg);    color: var(--bsd-info);    }
.bsd-badge--neutral { background: var(--bsd-surface-3);  color: var(--bsd-text-muted); }
.bsd-badge--violet  { background: var(--bsd-violet-100); color: var(--bsd-violet-600); }
.bsd-badge--cyan    { background: var(--bsd-cyan-100);   color: var(--bsd-cyan-600);   }

.bsd-badge--outline-primary { background: transparent; color: var(--bsd-primary); border: 1px solid var(--bsd-primary); }
.bsd-badge--outline-danger  { background: transparent; color: var(--bsd-danger);  border: 1px solid var(--bsd-danger);  }

.bsd-badge--dot::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    display: inline-block;
    flex-shrink: 0;
}

.bsd-badge--sm { font-size: var(--bsd-text-2xs); padding: 1px 6px; }
.bsd-badge--lg { font-size: var(--bsd-text-sm);  padding: 4px 10px; }

/* Numeric bubble */
.bsd-bubble {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    border-radius: var(--bsd-r-full);
    font-size: var(--bsd-text-xs);
    font-weight: 700;
    background: var(--bsd-danger);
    color: var(--bsd-n-0, #fff);
    padding: 0 5px;
}


/* ── 12. FORMS ────────────────────────────────────────────── */
.bsd-form-group { display: flex; flex-direction: column; gap: 6px; }

.bsd-label {
    font-size: var(--bsd-text-md);
    font-weight: 500;
    color: var(--bsd-text-2);
}

.bsd-label--required::after {
    content: ' *';
    color: var(--bsd-danger);
}

.bsd-hint {
    font-size: var(--bsd-text-xs);
    color: var(--bsd-text-muted);
    margin-top: 2px;
}

.bsd-input,
.bsd-select,
.bsd-textarea {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid var(--bsd-border-2);
    border-radius: var(--bsd-r-md);
    font-size: var(--bsd-text-sm);
    font-family: var(--bsd-font);
    color: var(--bsd-text);
    background: var(--bsd-surface);
    transition: var(--bsd-t-fast);
    outline: none;
    box-shadow: var(--bsd-shadow-inset);
    line-height: 15px;
}

.bsd-input::placeholder,
.bsd-textarea::placeholder { color: var(--bsd-text-faint); }

.bsd-input:focus,
.bsd-select:focus,
.bsd-textarea:focus {
    border-color: var(--bsd-primary);
    box-shadow: var(--bsd-shadow-focus);
}

.bsd-input:disabled,
.bsd-select:disabled,
.bsd-textarea:disabled {
    background: var(--bsd-surface-3);
    color: var(--bsd-text-faint);
    cursor: not-allowed;
}

/* Sizes */
.bsd-input--sm   { padding: 5px 10px;  font-size: var(--bsd-text-xs);  }
.bsd-input--lg   { padding: 11px 16px; font-size: var(--bsd-text-md);  }

/* States */
.bsd-input--error { border-color: var(--bsd-danger); }
.bsd-input--error:focus { box-shadow: var(--bsd-shadow-focus-danger); }
.bsd-input--success { border-color: var(--bsd-success); }

.bsd-error-msg {
    font-size: var(--bsd-text-xs);
    color: var(--bsd-danger);
    margin-top: 2px;
}

/* Input with icon */
.bsd-input-wrap {
    position: relative;
    display: flex;
    align-items: center;
}

.bsd-input-wrap .bsd-input {
    padding-left: 36px;
}

.bsd-input-wrap--icon-right .bsd-input {
    padding-right: 36px;
    padding-left: 12px;
}

.bsd-input-icon {
    position: absolute;
    left: 10px;
    color: var(--bsd-text-faint);
    font-size: 14px;
    pointer-events: none;
    z-index: 1;
}

.bsd-input-icon--right {
    left: auto;
    right: 10px;
}

/* Select */
.bsd-select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2.5'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    padding-right: 30px;
    cursor: pointer;
}

/* Textarea */
.bsd-textarea { resize: vertical; min-height: 90px; }

/* Checkbox & Radio */
.bsd-check {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    cursor: pointer;
    user-select: none;
}

.bsd-check__input {
    width: 16px;
    height: 16px;
    border: 1.5px solid var(--bsd-border-2);
    border-radius: 4px;
    background: var(--bsd-surface);
    appearance: none;
    flex-shrink: 0;
    cursor: pointer;
    transition: var(--bsd-t-fast);
    margin-top: 1px;
    position: relative;
}

.bsd-check__input:checked {
    background: var(--bsd-primary);
    border-color: var(--bsd-primary);
}

.bsd-check__input:checked::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 5px;
    width: 4px;
    height: 7px;
    border: 2px solid var(--bsd-n-0, #fff);
    border-top: none;
    border-left: none;
    transform: rotate(45deg);
}

.bsd-check__input[type="radio"] { border-radius: 50%; }
.bsd-check__input[type="radio"]:checked::after {
    width: 6px;
    height: 6px;
    background: var(--bsd-n-0, #fff);
    border: none;
    border-radius: 50%;
    top: 3px;
    left: 3px;
}

.bsd-check__label {
    font-size: var(--bsd-text-sm);
    color: var(--bsd-text-2);
}

/* Toggle switch */
.bsd-toggle {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    user-select: none;
}

.bsd-toggle__track {
    position: relative;
    width: 40px;
    height: 22px;
    border-radius: 11px;
    background: var(--bsd-border-2);
    transition: background var(--bsd-dur) var(--bsd-ease);
    flex-shrink: 0;
}

.bsd-toggle__input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.bsd-toggle__input:checked ~ .bsd-toggle__track { background: var(--bsd-primary); }

.bsd-toggle__thumb {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--bsd-n-0, #fff);
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
    transition: transform var(--bsd-dur) var(--bsd-ease);
    pointer-events: none;
}

.bsd-toggle__input:checked ~ .bsd-toggle__track .bsd-toggle__thumb { transform: translateX(18px); }

.bsd-toggle__label { font-size: var(--bsd-text-sm); color: var(--bsd-text-2); }

/* Range */
.bsd-range {
    -webkit-appearance: none;
    width: 100%;
    height: 4px;
    border-radius: 2px;
    background: var(--bsd-border);
    outline: none;
    cursor: pointer;
}

.bsd-range::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--bsd-primary);
    box-shadow: 0 1px 4px rgba(41,82,227,0.3);
    transition: box-shadow var(--bsd-dur-fast) var(--bsd-ease);
}

.bsd-range:focus::-webkit-slider-thumb { box-shadow: var(--bsd-shadow-focus); }

/* Search bar standalone */
.bsd-search {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--bsd-surface);
    border: 1px solid var(--bsd-border-2);
    border-radius: var(--bsd-r-md);
    padding: 8px 14px;
    max-width: 360px;
    transition: var(--bsd-t-fast);
}

.bsd-search:focus-within {
    border-color: var(--bsd-primary);
    box-shadow: var(--bsd-shadow-focus);
}

.bsd-search input {
    border: none;
    background: transparent;
    outline: none;
    font-size: var(--bsd-text-sm);
    font-family: var(--bsd-font);
    color: var(--bsd-text);
    flex: 1;
}

.bsd-search input::placeholder { color: var(--bsd-text-faint); }


/* ── 13. TABLE ────────────────────────────────────────────── */
.bsd-table-wrap {
    overflow-x: auto;
    border-radius: var(--bsd-r-md);
    border: 1px solid var(--bsd-border);
    box-shadow: var(--bsd-shadow-xs);
}

.bsd-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--bsd-text-sm);
}

.bsd-table thead {
    background: var(--bsd-surface-2);
    border-bottom: 1px solid var(--bsd-border);
}

.bsd-table th {
    padding: 11px 16px;
    font-size: var(--bsd-text-xs);
    font-weight: 700;
    font-family: var(--bsd-font-display);
    color: var(--bsd-text-muted);
    text-align: left;
    white-space: nowrap;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.bsd-table td {
    padding: 13px 16px;
    color: var(--bsd-text-2);
    border-bottom: 1px solid var(--bsd-border);
    vertical-align: middle;
}

.bsd-table tbody tr:last-child td { border-bottom: none; }

.bsd-table tbody tr:hover { background: var(--bsd-surface-2); }

.bsd-table--compact th,
.bsd-table--compact td { padding: 8px 12px; }

/* Sortable header */
.bsd-table th.sortable { cursor: pointer; user-select: none; }
.bsd-table th.sortable:hover { color: var(--bsd-text); }
.bsd-table th.sort-asc::after  { content: ' ↑'; opacity: 0.7; }
.bsd-table th.sort-desc::after { content: ' ↓'; opacity: 0.7; }

/* Table cell variants */
.bsd-table__cell--mono { font-family: var(--bsd-font-mono); font-size: var(--bsd-text-xs); }
.bsd-table__cell--bold { font-weight: 600; color: var(--bsd-text); }
.bsd-table__cell--muted { color: var(--bsd-text-faint); }
.bsd-table__cell--number { text-align: right; font-family: var(--bsd-font-mono); }

/* Table pagination */
.bsd-table-pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 16px;
    border-top: 1px solid var(--bsd-border);
    background: var(--bsd-surface-2);
    font-size: var(--bsd-text-xs);
    color: var(--bsd-text-muted);
}

.bsd-pagination {
    display: flex;
    align-items: center;
    gap: 4px;
}

.bsd-page-btn {
    min-width: 30px;
    height: 30px;
    border-radius: var(--bsd-r-xs);
    border: 1px solid var(--bsd-border);
    background: var(--bsd-surface);
    color: var(--bsd-text-2);
    font-size: var(--bsd-text-xs);
    font-weight: 500;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: var(--bsd-t-fast);
    padding: 0 6px;
}

.bsd-page-btn:hover { background: var(--bsd-surface-3); color: var(--bsd-text); }
.bsd-page-btn.active { background: var(--bsd-primary); color: var(--bsd-n-0, #fff); border-color: var(--bsd-primary); }
.bsd-page-btn:disabled { opacity: 0.4; cursor: not-allowed; }


/* ── 14. PROGRESS ─────────────────────────────────────────── */
.bsd-progress {
    height: var(--bsd-r);
    border-radius: var(--bsd-r-full);
    background: var(--bsd-surface-3);
    overflow: hidden;
}

.bsd-progress--sm { height: 4px; }
.bsd-progress--lg { height: 12px; }
.bsd-progress--xl { height: 18px; border-radius: var(--bsd-r-sm); }

.bsd-progress__bar {
    height: 120%;
    border-radius: var(--bsd-r-full);
    background: var(--bsd-primary);
    transition: width 0.6s var(--bsd-ease-out);
}

.bsd-progress__bar--success { background: var(--bsd-success); }
.bsd-progress__bar--warning { background: var(--bsd-warning); }
.bsd-progress__bar--danger  { background: var(--bsd-danger);  }
.bsd-progress__bar--violet  { background: var(--bsd-violet-500); }
.bsd-progress__bar--cyan    { background: var(--bsd-cyan-500); }

.bsd-progress__bar--striped {
    background-image: repeating-linear-gradient(
            45deg,
            rgba(255,255,255,0.15) 0,
            rgba(255,255,255,0.15) 6px,
            transparent 6px,
            transparent 12px
    );
}

/* Labeled progress */
.bsd-progress-labeled {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.bsd-progress-labeled__header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
}

.bsd-progress-labeled__label {
    font-size: var(--bsd-text-md);
    color: var(--bsd-text-2);
    font-weight: 500;
}

.bsd-progress-labeled__value {
    font-size: var(--bsd-text-md);
    color: var(--bsd-text-muted);
    font-family: var(--bsd-font-mono);
}


/* ── 15. ALERTS & NOTICES ─────────────────────────────────── */
.bsd-alert {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
    border-radius: var(--bsd-r-sm);
    border: 1px solid transparent;
    font-size: var(--bsd-text-sm);
}

.bsd-alert__icon { font-size: 16px; flex-shrink: 0; margin-top: 1px; }
.bsd-alert__body { flex: 1; min-width: 0; }
.bsd-alert__title { font-weight: 600; margin: 0 0 2px; font-size: var(--bsd-text-md); }
.bsd-alert__msg   { margin: 0; line-height: 1.5; }
.bsd-alert__close { background: none; border: none; cursor: pointer; color: inherit; opacity: 0.6; font-size: 18px; padding: 0; flex-shrink: 0; transition: opacity var(--bsd-dur-fast) var(--bsd-ease); }
.bsd-alert__close:hover { opacity: 1; }

.bsd-alert--info    { background: var(--bsd-info-bg);    color: var(--bsd-info);    border-color: var(--bsd-cyan-400); }
.bsd-alert--success { background: var(--bsd-success-bg); color: var(--bsd-success); border-color: var(--bsd-emerald-400); }
.bsd-alert--warning { background: var(--bsd-warning-bg); color: var(--bsd-warning); border-color: var(--bsd-amber-400); }
.bsd-alert--danger  { background: var(--bsd-danger-bg);  color: var(--bsd-danger);  border-color: var(--bsd-rose-400); }
.bsd-alert--neutral { background: var(--bsd-surface-3);  color: var(--bsd-text-2);  border-color: var(--bsd-border-2); }


/* ── 16. TOAST ────────────────────────────────────────────── */
.bsd-toast-region {
    position: fixed;
    bottom: 24px;
    right: 24px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    z-index: var(--bsd-z-toast);
    pointer-events: none;
}

.bsd-toast {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    background: var(--bsd-surface);
    border: 1px solid var(--bsd-border);
    border-radius: var(--bsd-r-md);
    padding: 14px 18px;
    box-shadow: var(--bsd-shadow-lg);
    min-width: 300px;
    max-width: 400px;
    pointer-events: all;
    animation: bsd-toast-in 0.25s var(--bsd-ease-out);
    font-size: var(--bsd-text-sm);
}

.bsd-toast__icon { font-size: 16px; flex-shrink: 0; margin-top: 1px; }
.bsd-toast__body { flex: 1; min-width: 0; }
.bsd-toast__title { font-weight: 600; color: var(--bsd-text); margin: 0 0 2px; }
.bsd-toast__msg   { color: var(--bsd-text-muted); margin: 0; }

.bsd-toast--success .bsd-toast__icon { color: var(--bsd-success); }
.bsd-toast--danger  .bsd-toast__icon { color: var(--bsd-danger); }
.bsd-toast--warning .bsd-toast__icon { color: var(--bsd-warning); }
.bsd-toast--info    .bsd-toast__icon { color: var(--bsd-info); }


/* ── 17. MODAL ────────────────────────────────────────────── */
.bsd-modal--close {
    position: fixed;
    top: 0;
    right: 0;
    z-index: 9999;
}

.bsd-modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgb(0 0 0 / 0.45);
    backdrop-filter: blur(3px);
    z-index: var(--bsd-z-overlay);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    animation: bsd-fade-in 0.2s var(--bsd-ease-out);
    overflow: scroll;
}

.bsd-modal {
    background: var(--bsd-surface);
    border-radius: var(--bsd-r-lg);
    box-shadow: var(--bsd-shadow-xl);
    width: 100%;
    max-width: 560px;
    max-height: calc(100vh - 40px);
    overflow-y: auto;
    animation: bsd-modal-in 0.22s var(--bsd-ease-out);
    border: 1px solid var(--bsd-border);
}

.bsd-modal--sm { max-width: 400px; }
.bsd-modal--lg { max-width: 760px; }
.bsd-modal--xl { max-width: 1000px; }

.bsd-modal__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px;
    border-bottom: 1px solid var(--bsd-border);
}

.bsd-modal__title {
    font-size: var(--bsd-text-lg);
    font-weight: 700;
    color: var(--bsd-text);
    font-family: var(--bsd-font-display);
    letter-spacing: -0.02em;
    margin: 0;
}

.bsd-modal__close {
    width: 32px;
    height: 32px;
    border-radius: var(--bsd-r-xs);
    border: none;
    background: transparent;
    color: var(--bsd-text-muted);
    cursor: pointer;
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--bsd-t-fast);
}

.bsd-modal__close:hover { background: var(--bsd-surface-3); color: var(--bsd-text); }

.bsd-modal__body { padding: 24px; }
.bsd-modal__footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    padding: 18px 24px;
    border-top: 1px solid var(--bsd-border);
    background: var(--bsd-surface-2);
}

.bsd-modal--error {
    border-top: 3px solid var(--bsd-danger);
}

.bsd-modal--error .bsd-modal__body {
    padding: 20px 24px 24px;
}

.bsd-error-modal__heading {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.bsd-modal--error .bsd-modal__title {
    font-family: var(--bsd-font-mono);
    font-size: var(--bsd-text-lg);
    font-weight: 700;
}


/* ── Severity pill ────────────────────────────────────────── */
.bsd-error-modal__severity {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    align-self: flex-start;
    font-family: var(--bsd-font);
    font-size: var(--bsd-text-2xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 3px 9px;
    border-radius: var(--bsd-r-full);
}

.bsd-error-modal__severity::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
}

.bsd-error-modal__severity--fatal      { background: var(--bsd-danger-bg); color: var(--bsd-danger); }
.bsd-error-modal__severity--parse      { background: var(--bsd-danger-bg); color: var(--bsd-danger); }
.bsd-error-modal__severity--warning    { background: var(--bsd-warning-bg); color: var(--bsd-warning); }
.bsd-error-modal__severity--notice     { background: var(--bsd-info-bg); color: var(--bsd-info); }
.bsd-error-modal__severity--deprecated { background: var(--bsd-violet-100); color: var(--bsd-violet-600); }

/* Recolor the top accent + message box border to match whichever
   severity pill is present — scope by adding the same modifier
   to .bsd-modal--error itself, e.g.
   class="bsd-modal bsd-modal--error bsd-modal--error-warning" */
.bsd-modal--error-warning    { border-top-color: var(--bsd-warning); }
.bsd-modal--error-notice     { border-top-color: var(--bsd-info); }
.bsd-modal--error-deprecated { border-top-color: var(--bsd-violet-500); }

.bsd-modal--error-warning    .bsd-error-modal__message { border-color: var(--bsd-amber-400); background: var(--bsd-warning-bg); color: var(--bsd-text); }
.bsd-modal--error-notice     .bsd-error-modal__message { border-color: var(--bsd-cyan-400); background: var(--bsd-info-bg); color: var(--bsd-text); }
.bsd-modal--error-deprecated .bsd-error-modal__message { border-color: var(--bsd-violet-400); background: var(--bsd-violet-100); color: var(--bsd-text); }


/* ── Error message ────────────────────────────────────────── */
.bsd-error-modal__message {
    font-family: var(--bsd-font-mono);
    font-size: var(--bsd-text-sm);
    line-height: 1.6;
    color: var(--bsd-text);
    background: var(--bsd-danger-bg);
    border: 1px solid var(--bsd-rose-400);
    border-radius: var(--bsd-r-sm);
    padding: 12px 14px;
    margin: 14px 0;
    word-break: break-word;
    white-space: pre-wrap;
}


/* ── Meta grid (file / line / type / PHP version) ─────────── */
.bsd-error-modal__meta {
    display: grid;
    grid-template-columns: minmax(160px, 1fr) 100px 200px;
    gap: 1px;
    background: var(--bsd-border);
    border: 1px solid var(--bsd-border);
    border-radius: var(--bsd-r-sm);
    overflow: hidden;
    margin-bottom: 18px;
}

.bsd-error-modal__meta-item {
    background: var(--bsd-surface-2);
    padding: 8px 12px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.bsd-error-modal__meta-label {
    font-size: var(--bsd-text-2xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--bsd-text-faint);
}

.bsd-error-modal__meta-value {
    font-family: var(--bsd-font-mono);
    font-size: var(--bsd-text-xs);
    color: var(--bsd-text-2);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}


/* ── Code snippet, offending line highlighted ─────────────── */
.bsd-error-modal__snippet {
    font-family: var(--bsd-font-mono);
    font-size: var(--bsd-text-xs);
    background: var(--bsd-n-950);
    border-radius: var(--bsd-r-sm);
    overflow: hidden;
    margin-bottom: 18px;
}

.bsd-error-modal__snippet-line {
    display: flex;
    padding: 2px 0;
}

.bsd-error-modal__snippet-line--active {
    background: rgb(244 63 94 / 0.18);
    box-shadow: inset 3px 0 0 var(--bsd-danger);
}

.bsd-error-modal__snippet-num {
    flex-shrink: 0;
    width: 42px;
    text-align: right;
    padding-right: 12px;
    color: var(--bsd-n-500);
    user-select: none;
}

.bsd-error-modal__snippet-line--active .bsd-error-modal__snippet-num {
    color: var(--bsd-rose-300);
    font-weight: 700;
}

.bsd-error-modal__snippet-code {
    color: var(--bsd-n-100);
    white-space: pre;
    padding-right: 14px;
}


/* ── Stack trace ──────────────────────────────────────────── */
.bsd-error-modal__section-label {
    font-family: var(--bsd-font-display);
    font-size: var(--bsd-text-2xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--bsd-text-faint);
    margin: 0 0 8px;
}

.bsd-error-modal__trace {
    list-style: none;
    margin: 0;
    padding: 0;
    max-height: 220px;
    overflow-y: auto;
    border: 1px solid var(--bsd-border);
    border-radius: var(--bsd-r-sm);
}

.bsd-error-modal__trace-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 9px 12px;
    border-bottom: 1px solid var(--bsd-border);
}

.bsd-error-modal__trace-item:last-child {
    border-bottom: none;
}

.bsd-error-modal__trace-item:nth-child(odd) {
    background: var(--bsd-surface-2);
}

.bsd-error-modal__trace-index {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--bsd-surface-3);
    color: var(--bsd-text-faint);
    font-family: var(--bsd-font-mono);
    font-size: 10px;
    font-weight: 700;
    margin-top: 1px;
}

.bsd-error-modal__trace-location {
    font-family: var(--bsd-font-mono);
    font-size: var(--bsd-text-xs);
    color: var(--bsd-text);
    margin: 0;
    word-break: break-all;
}

.bsd-error-modal__trace-function {
    font-family: var(--bsd-font-mono);
    font-size: var(--bsd-text-xs);
    color: var(--bsd-text-muted);
    margin: 2px 0 0;
    word-break: break-all;
}

.bsd-error-modal__trace::-webkit-scrollbar { width: 8px; }
.bsd-error-modal__trace::-webkit-scrollbar-thumb {
    background: var(--bsd-border-2);
    border-radius: var(--bsd-r-full);
}


/* ── Footer copy-confirmation state ───────────────────────── */
.bsd-btn--copied {
    background: var(--bsd-success-bg) !important;
    color: var(--bsd-success) !important;
    border-color: transparent !important;
}


/* ── Responsive ───────────────────────────────────────────── */
@media (max-width: 640px) {
    .bsd-error-modal__meta {
        grid-template-columns: 1fr 1fr;
    }
    .bsd-error-modal__snippet {
        font-size: 11px;
    }
}


/* ── Dark theme ───────────────────────────────────────────── */
[data-bsd-theme="dark"] .bsd-error-modal__snippet {
    background: #000;
}



/* ── 18. DROPDOWN ─────────────────────────────────────────── */
.bsd-dropdown {
    position: relative;
    display: inline-block;
}

.bsd-dropdown__menu {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    min-width: 200px;
    background: var(--bsd-surface);
    border: 1px solid var(--bsd-border);
    border-radius: var(--bsd-r-md);
    box-shadow: var(--bsd-shadow-lg);
    z-index: var(--bsd-z-dropdown);
    padding: 6px;
    animation: bsd-dropdown-in 0.15s var(--bsd-ease-out);
}

.bsd-dropdown__menu--left { right: auto; left: 0; }

.bsd-dropdown__item {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 6px;
    border-radius: var(--bsd-r-xs);
    font-size: var(--bsd-text-sm);
    color: var(--bsd-text-2);
    cursor: pointer;
    transition: var(--bsd-t-fast);
    text-decoration: none;
}

.bsd-dropdown__item:hover { background: var(--bsd-surface-3); color: var(--bsd-text); text-decoration: none; }
.bsd-dropdown__item--danger { color: var(--bsd-danger); }
.bsd-dropdown__item--danger:hover { background: var(--bsd-danger-bg); }

.bsd-dropdown__divider {
    height: 1px;
    background: var(--bsd-border);
    margin: 4px 0;
}

.bsd-dropdown__label {
    font-size: var(--bsd-text-xs);
    font-weight: 700;
    color: var(--bsd-text);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 6px 10px 2px;
}


/* ── 19. TABS ─────────────────────────────────────────────── */
.bsd-tabs {
    display: flex;
    gap: 2px;
    border-bottom: 1px solid var(--bsd-border);
    overflow-x: auto;
    scrollbar-width: none;
}

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

.bsd-tab {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 16px;
    font-size: var(--bsd-text-sm);
    font-weight: 500;
    color: var(--bsd-text-muted);
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    white-space: nowrap;
    transition: var(--bsd-t-fast);
    text-decoration: none;
    user-select: none;
}

.bsd-tab:hover { color: var(--bsd-text); text-decoration: none; }
.bsd-tab.active {
    color: var(--bsd-primary);
    border-bottom-color: var(--bsd-primary);
    font-weight: 600;
}

/* Pill tabs */
.bsd-tabs--pills {
    border-bottom: none;
    background: var(--bsd-surface-2);
    padding: 4px;
    border-radius: var(--bsd-r-md);
    gap: 3px;
}

.bsd-tabs--pills .bsd-tab {
    border-bottom: none;
    border-radius: var(--bsd-r-sm);
    padding: 7px 14px;
    margin: 0;
}

.bsd-tabs--pills .bsd-tab.active {
    background: var(--bsd-surface);
    color: var(--bsd-text);
    box-shadow: var(--bsd-shadow-xs);
}

.bsd-tab-panel { display: none; }
.bsd-tab-panel.active { display: block; }

.bsd-tab-panel__inner {
    position: relative;
}

.bsd-tab__count {
    font-size: var(--bsd-text-2xs);
    font-weight: 700;
    background: var(--bsd-surface-3);
    color: var(--bsd-text-muted);
    border-radius: var(--bsd-r-full);
    padding: 0 5px;
    min-width: 18px;
    text-align: center;
    line-height: 16px;
}

.bsd-tab.active .bsd-tab__count {
    background: var(--bsd-primary-bg);
    color: var(--bsd-primary);
}


/* ── 20. ACCORDIONS ───────────────────────────────────────── */
.bsd-accordion { display: flex; flex-direction: column; gap: 4px; }

.bsd-accordion-item {
    border: 1px solid var(--bsd-border);
    border-radius: var(--bsd-r-sm);
    overflow: hidden;
}

.bsd-accordion-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px;
    background: var(--bsd-surface);
    cursor: pointer;
    font-size: var(--bsd-text-md);
    font-weight: 500;
    color: var(--bsd-text);
    transition: var(--bsd-t-fast);
    border: none;
    width: 100%;
    text-align: left;
    user-select: none;
}

.bsd-accordion-trigger:hover { background: var(--bsd-surface-2); }

.bsd-accordion-trigger__chevron {
    font-size: 14px;
    color: var(--bsd-text-faint);
    transition: transform var(--bsd-dur) var(--bsd-ease);
    flex-shrink: 0;
}

.bsd-accordion-item.open .bsd-accordion-trigger__chevron { transform: rotate(180deg); }

.bsd-accordion-body {
    display: none;
    padding: 14px 18px;
    border-top: 1px solid var(--bsd-border);
    background: var(--bsd-surface-2);
    font-size: var(--bsd-text-sm);
    color: var(--bsd-text-muted);
    line-height: 1.7;
}

.bsd-accordion-item.open .bsd-accordion-body { display: block; }


/* ── 21. TOOLTIP ──────────────────────────────────────────── */
[data-bsd-tip] { position: relative; }

[data-bsd-tip]::after {
    content: attr(data-bsd-tip);
    position: absolute;
    bottom: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%);
    background: var(--bsd-n-800);
    color: var(--bsd-n-0, #fff);
    font-size: var(--bsd-text-xs);
    padding: 4px 8px;
    border-radius: var(--bsd-r-xs);
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transition: opacity var(--bsd-dur-fast) var(--bsd-ease);
    z-index: var(--bsd-z-tooltip);
}

[data-bsd-tip]:hover::after { opacity: 1; }


/* ── 22. ACTIVITY FEED ────────────────────────────────────── */
.bsd-feed { display: flex; flex-direction: column; }

.bsd-feed__item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 0;
    border-bottom: 1px solid var(--bsd-border);
    position: relative;
}

.bsd-feed__item:last-child { border-bottom: none; }

.bsd-feed__line {
    position: absolute;
    left: 15px;
    top: 44px;
    bottom: 0;
    width: 1px;
    background: var(--bsd-border);
}

.bsd-feed__item:last-child .bsd-feed__line { display: none; }

.bsd-feed__dot {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--bsd-primary-bg);
    color: var(--bsd-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    flex-shrink: 0;
}

.bsd-feed__dot--success { background: var(--bsd-success-bg); color: var(--bsd-success); }
.bsd-feed__dot--warning { background: var(--bsd-warning-bg); color: var(--bsd-warning); }
.bsd-feed__dot--danger  { background: var(--bsd-danger-bg);  color: var(--bsd-danger);  }

.bsd-feed__content { flex: 1; min-width: 0; }
.bsd-feed__msg  { font-size: var(--bsd-text-sm); color: var(--bsd-text-2); margin: 0 0 2px; }
.bsd-feed__time { font-size: var(--bsd-text-xs); color: var(--bsd-text-faint); }


/* ── 23. STAT ROW ─────────────────────────────────────────── */
.bsd-stat-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 11px 0;
    border-bottom: 1px solid var(--bsd-border);
    gap: 8px;
}

.bsd-stat-row:last-child { border-bottom: none; }

.bsd-stat-row__label {
    font-size: var(--bsd-text-sm);
    color: var(--bsd-text);
    display: flex;
    align-items: center;
    gap: 6px;
}

.bsd-stat-row__value {
    font-size: var(--bsd-text-sm);
    font-weight: 600;
    color: var(--bsd-text);
    font-family: var(--bsd-font);
}


/* ── 24. REPORT COMPONENTS ────────────────────────────────── */
.bsd-report-header {
    background: linear-gradient(145deg, var(--bsd-brand-600) 0%, var(--bsd-brand-800) 60%, var(--bsd-brand-900) 100%);
    color: var(--bsd-n-0, #fff);
    padding: 36px 40px;
    border-radius: var(--bsd-r-lg);
    margin-bottom: var(--bsd-gap-lg);
    position: relative;
    overflow: hidden;
    box-shadow: var(--bsd-shadow-lg);
}

.bsd-report-header::before {
    content: '';
    position: absolute;
    top: -60px;
    right: -60px;
    width: 300px;
    height: 300px;
    border-radius: 50%;
    background: rgba(255,255,255,0.04);
    pointer-events: none;
}

.bsd-report-header::after {
    content: '';
    position: absolute;
    bottom: -80px;
    left: 100px;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    background: rgba(255,255,255,0.03);
    pointer-events: none;
}

.bsd-report-header__eyebrow {
    font-size: var(--bsd-text-xs);
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    opacity: 0.6;
    margin: 0 0 10px;
    font-family: var(--bsd-font-display);
}

.bsd-report-header__title {
    font-size: var(--bsd-text-4xl);
    font-weight: 800;
    font-family: var(--bsd-font);
    letter-spacing: -0.04em;
    margin: 0 0 8px;
    line-height: 1.1;
}

.bsd-report-header__sub {
    opacity: 0.7;
    font-size: var(--bsd-text-md);
    margin: 0;
}

.bsd-report-header__meta {
    display: flex;
    gap: 28px;
    margin-top: 24px;
    flex-wrap: wrap;
    padding-top: 20px;
    border-top: 1px solid rgba(255,255,255,0.15);
}

.bsd-report-header__meta-item { display: flex; flex-direction: column; gap: 2px; }
.bsd-report-header__meta-label { font-size: var(--bsd-text-xs); opacity: 0.55; letter-spacing: 0.06em; text-transform: uppercase; }
.bsd-report-header__meta-value { font-size: var(--bsd-text-md); font-weight: 600; }

/* Section break */
.bsd-section-divider {
    display: flex;
    align-items: center;
    gap: 16px;
    margin: 28px 0;
}

.bsd-section-divider__line { flex: 1; height: 1px; background: var(--bsd-border); }
.bsd-section-divider__label {
    font-size: var(--bsd-text-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--bsd-text-faint);
    font-family: var(--bsd-font-display);
    white-space: nowrap;
}


/* ── 25. ADMIN SETTINGS ───────────────────────────────────── */
.bsd-settings-layout {
    display: flex;
    gap: 32px;
    align-items: flex-start;
}

.bsd-settings-nav {
    width: 220px;
    flex-shrink: 0;
    position: sticky;
    top: calc(var(--bsd-topbar-h) + 20px);
}

.bsd-settings-nav__item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-radius: var(--bsd-r-sm);
    font-size: var(--bsd-text-sm);
    font-weight: 500;
    color: var(--bsd-text-muted);
    cursor: pointer;
    transition: var(--bsd-t-fast);
    text-decoration: none;
}

.bsd-settings-nav__item:hover { background: var(--bsd-surface-3); color: var(--bsd-text); text-decoration: none; }
.bsd-settings-nav__item.active { background: var(--bsd-primary-bg); color: var(--bsd-primary); font-weight: 600; }

.bsd-settings-body { flex: 1; min-width: 0; }

.bsd-settings-section {
    margin-bottom: 32px;
}

.bsd-settings-section__title {
    font-size: var(--bsd-text-lg);
    font-weight: 700;
    color: var(--bsd-text);
    font-family: var(--bsd-font);
    letter-spacing: -0.02em;
    margin: 0 0 4px;
}

.bsd-settings-section__desc {
    font-size: var(--bsd-text-sm);
    color: var(--bsd-text-muted);
    margin: 0 0 20px;
}

.bsd-perm-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 0;
    border-bottom: 1px solid var(--bsd-border);
    gap: 16px;
}

.bsd-perm-row:last-child { border-bottom: none; }

.bsd-perm-row__info { flex: 1; }
.bsd-perm-row__label { font-size: var(--bsd-text-sm); font-weight: 500; color: var(--bsd-text-2); }
.bsd-perm-row__hint  { font-size: var(--bsd-text-xs); color: var(--bsd-text-faint); }


/* ── 26. COMMAND PALETTE ──────────────────────────────────── */
.bsd-command-backdrop {
    position: fixed;
    inset: 0;
    background: rgb(0 0 0 / 0.5);
    backdrop-filter: blur(4px);
    z-index: var(--bsd-z-overlay);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: 120px;
}

.bsd-command {
    width: 580px;
    max-width: calc(100vw - 32px);
    background: var(--bsd-surface);
    border: 1px solid var(--bsd-border);
    border-radius: var(--bsd-r-lg);
    box-shadow: var(--bsd-shadow-xl);
    overflow: hidden;
    animation: bsd-modal-in 0.2s var(--bsd-ease-out);
}

.bsd-command__input {
    width: 100%;
    padding: 18px 22px;
    font-size: var(--bsd-text-lg);
    border: none;
    border-bottom: 1px solid var(--bsd-border);
    outline: none;
    font-family: var(--bsd-font);
    color: var(--bsd-text);
    background: transparent;
}

.bsd-command__results { max-height: 380px; overflow-y: auto; padding: 8px; }

.bsd-command__group-label {
    font-size: var(--bsd-text-xs);
    font-weight: 700;
    color: var(--bsd-text-faint);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    padding: 8px 12px 4px;
    font-family: var(--bsd-font-display);
}

.bsd-command__item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: var(--bsd-r-sm);
    cursor: pointer;
    font-size: var(--bsd-text-sm);
    color: var(--bsd-text-2);
    transition: var(--bsd-t-fast);
}

.bsd-command__item:hover,
.bsd-command__item.selected { background: var(--bsd-primary-bg); color: var(--bsd-primary); }

.bsd-command__item-icon {
    width: 28px;
    height: 28px;
    border-radius: var(--bsd-r-xs);
    background: var(--bsd-surface-3);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    flex-shrink: 0;
}

.bsd-command__item-label { flex: 1; }
.bsd-command__item-sub { font-size: var(--bsd-text-xs); color: var(--bsd-text-faint); }

.bsd-command__kbd {
    font-size: var(--bsd-text-xs);
    font-family: var(--bsd-font-mono);
    background: var(--bsd-surface-3);
    border: 1px solid var(--bsd-border);
    border-radius: var(--bsd-r-xs);
    padding: 1px 6px;
    color: var(--bsd-text-faint);
    flex-shrink: 0;
}

.bsd-command__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 16px;
    border-top: 1px solid var(--bsd-border);
    background: var(--bsd-surface-2);
    font-size: var(--bsd-text-xs);
    color: var(--bsd-text-faint);
}


/* ── 27. USER & ROLE TABLE ────────────────────────────────── */
.bsd-user-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid var(--bsd-border);
}

.bsd-user-row:last-child { border-bottom: none; }
.bsd-user-row__info { flex: 1; min-width: 0; }
.bsd-user-row__name { font-size: var(--bsd-text-sm); font-weight: 600; color: var(--bsd-text); }
.bsd-user-row__email { font-size: var(--bsd-text-xs); color: var(--bsd-text-faint); }
.bsd-user-row__actions { display: flex; gap: 4px; align-items: center; }


/* ── 28. EMPTY STATE ──────────────────────────────────────── */
.bsd-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 48px 24px;
    text-align: center;
    gap: 12px;
}

.bsd-empty__icon {
    width: 56px;
    height: 56px;
    border-radius: var(--bsd-r-md);
    background: var(--bsd-surface-3);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    color: var(--bsd-text-faint);
    margin-bottom: 4px;
}

.bsd-empty__title {
    font-size: var(--bsd-text-lg);
    font-weight: 600;
    color: var(--bsd-text);
    font-family: var(--bsd-font-display);
    margin: 0;
}

.bsd-empty__desc {
    font-size: var(--bsd-text-sm);
    color: var(--bsd-text-muted);
    margin: 0;
    max-width: 320px;
}


/* ── 29. SKELETON LOADER ──────────────────────────────────── */
.bsd-skeleton {
    background: linear-gradient(90deg, var(--bsd-surface-2) 25%, var(--bsd-surface-3) 50%, var(--bsd-surface-2) 75%);
    background-size: 200% 100%;
    animation: bsd-shimmer 1.5s infinite;
    border-radius: var(--bsd-r-xs);
}

.bsd-skeleton--text  { height: 14px; border-radius: var(--bsd-r-full); }
.bsd-skeleton--title { height: 20px; border-radius: var(--bsd-r-full); }
.bsd-skeleton--circle { border-radius: 50%; }
.bsd-skeleton--card { height: 180px; border-radius: var(--bsd-r-md); }


/* ── 30. CHART PLACEHOLDER ────────────────────────────────── */
.bsd-chart-wrap {
    position: relative;
    overflow: hidden;
    border-radius: var(--bsd-r-sm);
}

.bsd-chart-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 14px;
}

.bsd-chart-legend__item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: var(--bsd-text-xs);
    color: var(--bsd-text-muted);
}

.bsd-chart-legend__dot {
    width: 8px;
    height: 8px;
    border-radius: 2px;
    flex-shrink: 0;
}


/* ── 31. BREADCRUMB ───────────────────────────────────────── */
.bsd-breadcrumb {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: var(--bsd-text-sm);
    color: var(--bsd-text-muted);
    margin-bottom: 12px;
    flex-wrap: wrap;
}

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

.bsd-breadcrumb a:hover { color: var(--bsd-primary); }
.bsd-breadcrumb__sep { color: var(--bsd-text-faint); }
.bsd-breadcrumb__current { color: var(--bsd-text-2); font-weight: 500; }


/* ── 32. LIST GROUP ───────────────────────────────────────── */
.bsd-list-group {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--bsd-border);
    border-radius: var(--bsd-r-md);
    overflow: hidden;
}

.bsd-list-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 13px 16px;
    background: var(--bsd-surface);
    border-bottom: 1px solid var(--bsd-border);
    transition: var(--bsd-t-fast);
    font-size: var(--bsd-text-sm);
    color: var(--bsd-text-2);
}

.bsd-list-item:last-child { border-bottom: none; }
.bsd-list-item--hoverable:hover { background: var(--bsd-surface-2); }
.bsd-list-item--active { background: var(--bsd-primary-bg); color: var(--bsd-primary); }

.bsd-nav-active {
    background: rgba(255, 255, 255, 0.25);
    color: var(--bsd-text);
}


/* ── 33. UTILITY CLASSES ──────────────────────────────────── */

/* Flex */
.bsd-flex       { display: flex; }
.bsd-flex-col   { display: flex; flex-direction: column; }
.bsd-flex-wrap  { flex-wrap: wrap; }
.bsd-items-center { align-items: center; }
.bsd-items-start  { align-items: flex-start; }
.bsd-items-end    { align-items: flex-end; }
.bsd-justify-between { justify-content: space-between; }
.bsd-justify-center  { justify-content: center; }
.bsd-justify-end     { justify-content: flex-end; }
.bsd-flex-1     { flex: 1; }
.bsd-flex-auto  { flex: 0 0 auto; }
.bsd-flex-shrink-0 { flex-shrink: 0; }

/* Gap */
.bsd-gap-xs { gap: 6px;  }
.bsd-gap-sm { gap: 10px; }
.bsd-gap-md { gap: 16px; }
.bsd-gap-lg { gap: 24px; }
.bsd-gap-xl { gap: 32px; }

/* Text */
.bsd-text-xs    { font-size: var(--bsd-text-xs);  }
.bsd-text-sm    { font-size: var(--bsd-text-sm);  }
.bsd-text-base  { font-size: var(--bsd-text-base);}
.bsd-text-md    { font-size: var(--bsd-text-md);  }
.bsd-text-lg    { font-size: var(--bsd-text-lg);  }
.bsd-text-xl    { font-size: var(--bsd-text-xl);  }
.bsd-text-2xl   { font-size: var(--bsd-text-2xl); }
.bsd-text-3xl   { font-size: var(--bsd-text-3xl); }

.bsd-fw-400  { font-weight: 400; }
.bsd-fw-500  { font-weight: 500; }
.bsd-fw-600  { font-weight: 600; }
.bsd-fw-700  { font-weight: 700; }
.bsd-fw-800  { font-weight: 800; }

.bsd-font-display { font-family: var(--bsd-font-display); }
.bsd-font-mono    { font-family: var(--bsd-font-mono); }

.bsd-text-primary { color: var(--bsd-primary); }
.bsd-text-success { color: var(--bsd-success); }
.bsd-text-warning { color: var(--bsd-warning); }
.bsd-text-danger  { color: var(--bsd-danger);  }
.bsd-text-muted   { color: var(--bsd-text-muted); }
.bsd-text-faint   { color: var(--bsd-text-faint); }
.bsd-text-base-c  { color: var(--bsd-text); }
.bsd-text-center  { text-align: center; }
.bsd-text-right   { text-align: right; }

.bsd-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Spacing */
.bsd-mt-0   { margin-top: 0; }
.bsd-mt-sm  { margin-top: 8px; }
.bsd-mt-md  { margin-top: 16px; }
.bsd-mt-lg  { margin-top: 24px; }
.bsd-mb-0   { margin-bottom: 0; }
.bsd-mb-sm  { margin-bottom: 8px; }
.bsd-mb-md  { margin-bottom: 16px; }
.bsd-mb-lg  { margin-bottom: 24px; }

.bsd-p-sm  { padding: 8px; }
.bsd-p-md  { padding: 16px; }
.bsd-p-lg  { padding: 24px; }
.bsd-px-sm { padding-left: 8px; padding-right: 8px; }
.bsd-px-md { padding-left: 16px; padding-right: 16px; }

/* Divider */
.bsd-divider { height: 1px; background: var(--bsd-border); margin: 16px 0; }
.bsd-divider--vertical { width: 1px; height: 20px; background: var(--bsd-border); display: inline-block; }

/* Overflow */
.bsd-overflow-hidden { overflow: hidden; }
.bsd-overflow-auto   { overflow: auto; }

/* Radius */
.bsd-rounded-sm { border-radius: var(--bsd-r-sm); }
.bsd-rounded    { border-radius: var(--bsd-r); }
.bsd-rounded-md { border-radius: var(--bsd-r-md); }
.bsd-rounded-lg { border-radius: var(--bsd-r-lg); }
.bsd-rounded-full { border-radius: var(--bsd-r-full); }

/* Visibility */
.bsd-hidden { display: none !important; }
.bsd-invisible { visibility: hidden; }
.bsd-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
}

/* Shadows */
.bsd-shadow-xs { box-shadow: var(--bsd-shadow-xs); }
.bsd-shadow-sm { box-shadow: var(--bsd-shadow-sm); }
.bsd-shadow    { box-shadow: var(--bsd-shadow); }
.bsd-shadow-md { box-shadow: var(--bsd-shadow-md); }

/* Background */
.bsd-bg-surface  { background: var(--bsd-surface); }
.bsd-bg-surface2 { background: var(--bsd-surface-2); }
.bsd-bg-primary  { background: var(--bsd-primary-bg); }
.bsd-bg-success  { background: var(--bsd-success-bg); }
.bsd-bg-warning  { background: var(--bsd-warning-bg); }
.bsd-bg-danger   { background: var(--bsd-danger-bg); }

/* Width helpers */
.bsd-w-full { width: 100%; }
.bsd-w-auto { width: auto; }
.bsd-min-w-0 { min-width: 0; }


/* ── 34. ANIMATIONS ───────────────────────────────────────── */
@keyframes bsd-spin     { to { transform: rotate(360deg); } }
@keyframes bsd-fade-in  { from { opacity: 0; } to { opacity: 1; } }
@keyframes bsd-fade-up  { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
@keyframes bsd-scale-in { from { opacity: 0; transform: scale(0.95); } to { opacity: 1; transform: scale(1); } }

@keyframes bsd-modal-in {
    from { opacity: 0; transform: scale(0.95) translateY(8px); }
    to   { opacity: 1; transform: scale(1)    translateY(0);   }
}

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

@keyframes bsd-dropdown-in {
    from { opacity: 0; transform: translateY(-6px) scale(0.97); }
    to   { opacity: 1; transform: translateY(0)    scale(1);    }
}

@keyframes bsd-shimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

@keyframes bsd-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.45; } }

.bsd-spin      { animation: bsd-spin 0.8s linear infinite; }
.bsd-pulse     { animation: bsd-pulse 1.8s ease infinite; }
.bsd-fade-in   { animation: bsd-fade-in  0.25s var(--bsd-ease-out); }
.bsd-fade-up   { animation: bsd-fade-up  0.3s  var(--bsd-ease-out); }
.bsd-scale-in  { animation: bsd-scale-in 0.2s  var(--bsd-ease-out); }


/* ── 35. RESPONSIVE ───────────────────────────────────────── */
@media (max-width: 1280px) {
    .bsd-grid-4 { grid-template-columns: repeat(2, 1fr); }
    .bsd-grid-6 { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 1024px) {
    .bsd-grid-3 { grid-template-columns: repeat(2, 1fr); }
    .bsd-grid-2-1,
    .bsd-grid-3-1,
    .bsd-grid-1-3 { grid-template-columns: 1fr; }
}

@media (max-width: 900px) {
    .bsd-sidebar { transform: translateX(-100%); box-shadow: none; }
    .bsd-sidebar.bsd-sidebar--open { transform: translateX(0); box-shadow: var(--bsd-shadow-xl); }
    .bsd-main { margin-left: 0 !important; }
    .bsd-topbar { left: 0 !important; }
    .bsd-settings-layout { flex-direction: column; }
    .bsd-settings-nav { width: 100%; position: static; }
}

@media (max-width: 640px) {
    :root { --bsd-gap: 14px; --bsd-gap-lg: 18px; }
    .bsd-grid-2,
    .bsd-grid-3,
    .bsd-grid-4,
    .bsd-grid-5,
    .bsd-grid-6 { grid-template-columns: 1fr; }
    .bsd-grid-2-1 { grid-template-columns: 1fr; }
    .bsd-page-header { flex-direction: column; }
    .bsd-modal { margin: 0; max-height: 100%; border-radius: var(--bsd-r-lg) var(--bsd-r-lg) 0 0; }
    .bsd-modal-backdrop { align-items: flex-end; padding: 0; }
    .bsd-report-header { padding: 24px 20px; }
    .bsd-report-header__title { font-size: var(--bsd-text-2xl); }
    .bsd-topbar__search { display: none; }
}


/* ── 36. PRINT ────────────────────────────────────────────── */
@media print {
    .bsd-sidebar,
    .bsd-topbar,
    .bsd-topbar__actions,
    .bsd-btn { display: none !important; }

    .bsd-main { margin-left: 0; }
    .bsd-content { margin-top: 0; padding: 0; }
    .bsd-card { box-shadow: none; border: 1px solid #ccc; }
    .bsd-report-header { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}


/* ── BSD CALENDAR MODULE ──────────────────────────────────── */

/* Wrapper: drop this anywhere in your layout */
.bsd-cal {
    font-family: var(--bsd-font);
    color: var(--bsd-text);
    display: flex;
    flex-direction: column;
    gap: var(--bsd-gap);
}

/* ── Header bar ── */
.bsd-cal__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.bsd-cal__nav {
    display: flex;
    align-items: center;
    gap: 8px;
}

.bsd-cal__month-label {
    font-family: var(--bsd-font-display);
    font-size: var(--bsd-text-xl);
    font-weight: 700;
    color: var(--bsd-text);
    letter-spacing: -0.02em;
    min-width: 200px;
    text-align: center;
}

.bsd-cal__nav-btn {
    width: 34px;
    height: 34px;
    border-radius: var(--bsd-r-sm);
    border: 1px solid var(--bsd-border-2);
    background: var(--bsd-surface);
    color: var(--bsd-text-muted);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--bsd-t-fast);
    box-shadow: var(--bsd-shadow-xs);
    font-size: 15px;
}
.bsd-cal__nav-btn:hover {
    background: var(--bsd-surface-3);
    color: var(--bsd-text);
    border-color: var(--bsd-border-2);
}

.bsd-cal__header-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* ── Weekday row ── */
.bsd-cal__weekdays {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
    margin-bottom: 4px;
}

.bsd-cal__weekday {
    text-align: center;
    font-size: var(--bsd-text-xs);
    font-weight: 700;
    font-family: var(--bsd-font-display);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--bsd-text-faint);
    padding: 6px 0;
}

/* ── Day grid ── */
.bsd-cal__grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 4px;
}

.bsd-cal__day {
    min-height: 96px;
    border-radius: var(--bsd-r);
    border: 1px solid var(--bsd-border);
    background: var(--bsd-surface);
    padding: 6px 7px;
    cursor: pointer;
    transition: var(--bsd-t-fast);
    display: flex;
    flex-direction: column;
    gap: 3px;
    position: relative;
    overflow: hidden;
}

.bsd-cal__day:hover {
    border-color: var(--bsd-primary);
    box-shadow: var(--bsd-shadow-sm);
    z-index: 1;
}

.bsd-cal__day--outside {
    background: var(--bsd-surface-2);
    opacity: 0.5;
}

.bsd-cal__day--today {
    border-color: var(--bsd-primary);
    background: var(--bsd-primary-bg);
}

.bsd-cal__day--today .bsd-cal__day-num {
    background: var(--bsd-primary);
    color: var(--bsd-n-0, #fff);
}

.bsd-cal__day-num {
    font-size: var(--bsd-text-xs);
    font-weight: 700;
    font-family: var(--bsd-font-display);
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--bsd-r-full);
    color: var(--bsd-text-2);
    flex-shrink: 0;
    transition: var(--bsd-t-fast);
}

.bsd-cal__day-tasks {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    overflow: hidden;
}

/* ── Task pills inside day cells ── */
.bsd-cal__task-pill {
    font-size: 10px;
    font-weight: 500;
    padding: 2px 6px;
    border-radius: var(--bsd-r-xs);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: flex;
    align-items: center;
    gap: 4px;
    cursor: pointer;
    transition: var(--bsd-t-fast);
    line-height: 1.4;
}

.bsd-cal__task-pill:hover { opacity: 0.82; }

.bsd-cal__task-pill--primary  { background: var(--bsd-primary-bg);  color: var(--bsd-primary); }
.bsd-cal__task-pill--success  { background: var(--bsd-success-bg);  color: var(--bsd-success); }
.bsd-cal__task-pill--warning  { background: var(--bsd-warning-bg);  color: var(--bsd-warning); }
.bsd-cal__task-pill--danger   { background: var(--bsd-danger-bg);   color: var(--bsd-danger);  }
.bsd-cal__task-pill--violet   { background: var(--bsd-violet-100);  color: var(--bsd-violet-600); }
.bsd-cal__task-pill--cyan     { background: var(--bsd-cyan-100);    color: var(--bsd-cyan-600); }

.bsd-cal__task-pill--recurring::before {
    content: '↻';
    font-size: 9px;
    opacity: 0.8;
}

.bsd-cal__task-pill--done {
    opacity: 0.45;
    text-decoration: line-through;
}

.bsd-cal__overflow {
    font-size: 10px;
    color: var(--bsd-text-faint);
    font-weight: 600;
    padding: 1px 4px;
    cursor: pointer;
}

.bsd-cal__overflow:hover { color: var(--bsd-primary); }

/* ── Day detail panel (slide-in) ── */
.bsd-cal__panel {
    background: var(--bsd-surface);
    border: 1px solid var(--bsd-border);
    border-radius: var(--bsd-r-lg);
    box-shadow: var(--bsd-shadow-md);
    overflow: hidden;
    animation: bsd-fade-up 0.2s var(--bsd-ease-out);
}

.bsd-cal__panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid var(--bsd-border);
    background: var(--bsd-surface-2);
}

.bsd-cal__panel-date {
    font-family: var(--bsd-font-display);
    font-size: var(--bsd-text-md);
    font-weight: 700;
    color: var(--bsd-text);
    letter-spacing: -0.01em;
}

.bsd-cal__panel-body {
    padding: 16px 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-height: 360px;
    overflow-y: auto;
}

/* ── Task list items in panel ── */
.bsd-cal__task-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 12px;
    border-radius: var(--bsd-r-sm);
    border: 1px solid var(--bsd-border);
    background: var(--bsd-surface);
    transition: var(--bsd-t-fast);
}

.bsd-cal__task-item:hover { background: var(--bsd-surface-2); }

.bsd-cal__task-check {
    width: 16px;
    height: 16px;
    border: 1.5px solid var(--bsd-border-2);
    border-radius: 4px;
    background: var(--bsd-surface);
    appearance: none;
    flex-shrink: 0;
    cursor: pointer;
    transition: var(--bsd-t-fast);
    margin-top: 2px;
    position: relative;
}

.bsd-cal__task-check:checked {
    background: var(--bsd-primary);
    border-color: var(--bsd-primary);
}

.bsd-cal__task-check:checked::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 5px;
    width: 4px;
    height: 7px;
    border: 2px solid var(--bsd-n-0, #fff);
    border-top: none;
    border-left: none;
    transform: rotate(45deg);
}

.bsd-cal__task-info { flex: 1; min-width: 0; }

.bsd-cal__task-title {
    font-size: var(--bsd-text-sm);
    font-weight: 500;
    color: var(--bsd-text);
    margin-bottom: 2px;
    transition: var(--bsd-t-fast);
}

.bsd-cal__task-item.bsd-cal__task-item--done .bsd-cal__task-title {
    text-decoration: line-through;
    color: var(--bsd-text-faint);
}

.bsd-cal__task-meta {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.bsd-cal__task-actions {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}

.bsd-cal__task-action-btn {
    width: 26px;
    height: 26px;
    border: none;
    background: transparent;
    color: var(--bsd-text-faint);
    border-radius: var(--bsd-r-xs);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    transition: var(--bsd-t-fast);
    padding: 0;
}

.bsd-cal__task-action-btn:hover {
    background: var(--bsd-surface-3);
    color: var(--bsd-text);
}

.bsd-cal__task-action-btn--danger:hover {
    background: var(--bsd-danger-bg);
    color: var(--bsd-danger);
}

/* ── Add task inline form ── */
.bsd-cal__quick-add {
    display: flex;
    gap: 8px;
    align-items: center;
    padding: 12px 20px;
    border-top: 1px solid var(--bsd-border);
}

/* ── Recurring Tasks Sidebar list ── */
.bsd-cal__recur-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border-radius: var(--bsd-r-sm);
    border: 1px solid var(--bsd-border);
    background: var(--bsd-surface);
    transition: var(--bsd-t-fast);
}

.bsd-cal__recur-item:hover { background: var(--bsd-surface-2); }

.bsd-cal__recur-icon {
    width: 32px;
    height: 32px;
    border-radius: var(--bsd-r-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    flex-shrink: 0;
}

.bsd-cal__recur-info { flex: 1; min-width: 0; }

.bsd-cal__recur-name {
    font-size: var(--bsd-text-sm);
    font-weight: 600;
    color: var(--bsd-text);
}

.bsd-cal__recur-pattern {
    font-size: var(--bsd-text-xs);
    color: var(--bsd-text-muted);
    margin-top: 1px;
}

/* ── Colour dot ── */
.bsd-cal__color-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

/* ── Layout: two-column with sidebar ── */
.bsd-cal__layout {
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: var(--bsd-gap);
    align-items: start;
}

@media (max-width: 900px) {
    .bsd-cal__layout {
        grid-template-columns: 1fr;
    }
    .bsd-cal__day { min-height: 72px; }
}

@media (max-width: 640px) {
    .bsd-cal__day { min-height: 52px; }
    .bsd-cal__task-pill { display: none; }
    .bsd-cal__overflow { display: block !important; }
}

/* ── Modal overrides for calendar specifics ── */
.bsd-cal-modal .bsd-modal { max-width: 500px; }

/* ── Day selected highlight ── */
.bsd-cal__day--selected {
    border-color: var(--bsd-brand-400);
    box-shadow: 0 0 0 2px var(--bsd-brand-200);
}

/* ── Empty state ── */
.bsd-cal__empty {
    text-align: center;
    padding: 24px 16px;
    color: var(--bsd-text-faint);
    font-size: var(--bsd-text-sm);
}

.bsd-cal__empty-icon {
    font-size: 28px;
    margin-bottom: 8px;
    opacity: 0.5;
}

/* ── Recur pattern tags ── */
.bsd-cal__pattern-tag {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: var(--bsd-text-xs);
    font-weight: 600;
    padding: 2px 7px;
    border-radius: var(--bsd-r-full);
    background: var(--bsd-surface-3);
    color: var(--bsd-text-muted);
}

/* ── Color picker row ── */
.bsd-cal__color-row {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.bsd-cal__color-swatch {
    width: 26px;
    height: 26px;
    border-radius: var(--bsd-r-full);
    border: 2px solid transparent;
    cursor: pointer;
    transition: var(--bsd-t-fast);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
}

.bsd-cal__color-swatch:hover { transform: scale(1.15); }
.bsd-cal__color-swatch.selected {
    border-color: var(--bsd-text);
    box-shadow: 0 0 0 2px var(--bsd-surface);
}


.bsd-section__title {
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--bsd-text-muted, #64748b);
    font-family: var(--bsd-font-display);
    margin: 0 0 24px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(15, 43, 82, 0.08);
    display: flex;
    align-items: center;
    gap: 12px;
}

.bsd-section__title::before {
    content: '';
    width: 4px;
    height: 18px;
    background: var(--bsd-primary, #3b82f6);
    border-radius: 4px;
    display: inline-block;
}


/* ── Search popup ───────────────────────────────────────── */
.bsd-search-popup {
    position: relative;
    top: calc(100% + 8px);
    background: var(--bsd-surface);
    border: 1px solid var(--bsd-border);
    border-radius: var(--bsd-r-lg);
    box-shadow: var(--bsd-shadow-xl);
    overflow: hidden;
    z-index: 300;
    opacity: 0;
    transform: translateY(-6px) scale(0.99);
    transition:
            opacity   var(--bsd-dur-slow) var(--bsd-ease),
            transform var(--bsd-dur-slow) var(--bsd-ease);
    pointer-events: none;
}

.bd-topbar__container {
    position: relative;
    overflow: visible;
    display: flex;
    justify-content: center; /* Centers horizontally */
    align-items: center;
}

.bsd-search-popup.open {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
    z-index: var(--bsd-z-raised);
    position: absolute;
    width: 300%;
}

/* Popup header */
.bsd-search-popup__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 16px 8px;
    border-bottom: 1px solid var(--bsd-border);
}

.bsd-search-popup__label {
    font-size: var(--bsd-text-xs);
    font-weight: 600;
    color: var(--bsd-text-faint);
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.bsd-search-popup__count {
    font-size: var(--bsd-text-xs);
    color: var(--bsd-text-faint);
}

/* Popup scrollable list */
.bsd-search-popup__list {
    overflow-y: auto;
    padding: 6px 8px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.bsd-search-popup__list::-webkit-scrollbar         { width: 4px; }
.bsd-search-popup__list::-webkit-scrollbar-track   { background: transparent; }
.bsd-search-popup__list::-webkit-scrollbar-thumb   { background: var(--bsd-border-2); border-radius: 4px; }


/* Popup footer */
.bsd-search-popup__footer {
    border-top: 1px solid var(--bsd-border);
    padding: 8px 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.bsd-search-popup__footer-hint {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: var(--bsd-text-xs);
    color: var(--bsd-text-faint);
}

.bsd-search-popup__footer-hint span {
    display: flex;
    align-items: center;
    gap: 4px;
}

.bsd-search-popup__footer-tip {
    font-size: var(--bsd-text-xs);
    color: var(--bsd-text-faint);
}

/* Empty state */
.bsd-search-popup__empty {
    padding: 28px 16px;
    text-align: center;
}

.bsd-search-popup__empty-icon {
    font-size: 28px;
    color: var(--bsd-text-faint);
    margin-bottom: 8px;
}

.bsd-search-popup__empty-text {
    font-size: var(--bsd-text-sm);
    color: var(--bsd-text-muted);
    font-weight: 500;
}

.bsd-search-popup__empty-sub {
    font-size: var(--bsd-text-xs);
    color: var(--bsd-text-faint);
    margin-top: 4px;
}

/* Individual result row */
.bsd-search-result {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 9px 10px;
    border-radius: var(--bsd-r-sm);
    cursor: pointer;
    border: 1px solid transparent;
    transition: background var(--bsd-dur) var(--bsd-ease);
    animation: bsd-result-in 0.14s var(--bsd-ease) both;
}

.bsd-search-result:hover {
    background: var(--bsd-surface-2);
    border-color: var(--bsd-border);
}

.bsd-search-result.active {
    background: var(--bsd-primary-bg);
    border-color: var(--bsd-brand-200);
}

/* Avatar circle */
.bsd-search-result__avatar {
    width: 38px;
    height: 38px;
    border-radius: var(--bsd-r-full);
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--bsd-font-display);
    font-size: 13px;
    font-weight: 700;
    color: var(--bsd-n-0, #fff);
    letter-spacing: 0.02em;
}

/* Text content */
.bsd-search-result__body {
    flex: 1;
    min-width: 0;
}

.bsd-search-result__name {
    font-size: var(--bsd-text-md);
    font-weight: 500;
    color: var(--bsd-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Highlighted match */
.bsd-search-result__name mark {
    background: var(--bsd-brand-100);
    color: var(--bsd-primary);
    border-radius: 2px;
    padding: 0 1px;
    font-weight: 600;
}

.bsd-search-result__meta {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 2px;
}

.bsd-search-result__role {
    font-size: var(--bsd-text-sm);
    color: var(--bsd-text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Chevron action icon */
.bsd-search-result__action {
    flex-shrink: 0;
    opacity: 0;
    color: var(--bsd-text-faint);
    font-size: 15px;
    transition: opacity var(--bsd-dur) var(--bsd-ease);
}

.bsd-search-result:hover .bsd-search-result__action,
.bsd-search-result.active .bsd-search-result__action {
    opacity: 1;
}


.bsd-footer {
    position: fixed;
    bottom: 0;
    height: var(--bsd-footer-h);
    width: 100%;
    background: var(--bsd-surface);
    border-top: 1px solid var(--bsd-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 0 var(--bsd-gap-lg);
    z-index: var(--bsd-z-raised);
    box-shadow: 0 -1px 8px rgb(0 0 0 / 0.04);
    font-size: var(--bsd-text-xs);
}

.bsd-footer__left {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.bsd-footer__right {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 1;
    justify-content: center;
}

.bsd-footer__center {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 1;
    justify-content: center;
}

.bsd-footer__logo {
    width: 18px;
    height: 18px;
    border-radius: 4px;
    background: linear-gradient(135deg, var(--bsd-brand-500), var(--bsd-brand-700));
    color: var(--bsd-n-0, #fff);
    font-size: 9px;
    font-weight: 800;
    font-family: var(--bsd-font-display);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.bsd-footer__brand {
    font-weight: 700;
    font-family: var(--bsd-font-display);
    color: var(--bsd-text);
    font-size: var(--bsd-text-xs);
    letter-spacing: -0.01em;
}

.bsd-footer__copy { color: var(--bsd-text-faint); }

.bsd-footer__divider {
    width: 1px;
    height: 12px;
    background: var(--bsd-border);
    display: inline-block;
    flex-shrink: 0;
}

.bsd-footer__status-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--bsd-success);
    flex-shrink: 0;
    box-shadow: 0 0 0 2px var(--bsd-success-bg);
    animation: bsd-pulse 2.4s ease infinite;
}

.bsd-footer__status-text { color: var(--bsd-text-muted); }

.bsd-footer__link {
    color: var(--bsd-text-faint);
    text-decoration: none;
    transition: color var(--bsd-dur-fast) var(--bsd-ease);
}
.bsd-footer__link:hover { color: var(--bsd-primary); text-decoration: none; }

.bsd-footer__version {
    font-family: var(--bsd-font-mono);
    color: var(--bsd-text-faint);
    font-size: var(--bsd-text-2xs);
    background: var(--bsd-surface-3);
    border: 1px solid var(--bsd-border);
    border-radius: var(--bsd-r-xs);
    padding: 1px 6px;
}

/* Push content clear of footer */
.bsd-content { padding-bottom: calc(var(--bsd-gap-lg) + var(--bsd-footer-h)); }

/* Collapse with sidebar */
.bsd-footer.bsd-footer--collapsed { left: var(--bsd-sidebar-min); }

@media (max-width: 900px) {
    .bsd-footer { left: 0 !important; }
    .bsd-footer__copy,
    .bsd-footer__center { display: none; }
}

/* ── Section labels ── */
.rf-section-label {
    font-family: var(--bsd-font);
    font-size: var(--bsd-text-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--bsd-text-faint);
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 2px;
}

.rf-section-label::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--bsd-border);
}

.sb-link {
    display:flex;
    align-items:center;
    gap:8px;
    padding:6px 16px;
    font-size:11px;
    color:var(--color-text-tertiary);
    text-decoration:none;
}
.sb-link:hover {
    color:var(--color-text-primary);
}



/* ══════════════════════════════════
   BSD TAB COMPONENT
══════════════════════════════════ */

/* Tab bar wrapper — sits flush below page header, above page content */
.bs-top-tab-bar {
    margin-top: 8px;
    margin-bottom: 20px;
    border-bottom: 1px solid var(--bsd-border);
    position: relative;
}

/* Scrollable track — handles overflow on narrow screens */
.bs-top-tab__track {
    display: flex;
    align-items: flex-end;
    gap: 2px;
    overflow-x: visible;
    overflow-y: visible;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}

.bs-top-tab__track::-webkit-scrollbar { display: none; }

/* Individual tab button */
.bs-top-tab {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 10px 16px 11px;
    font-size: var(--bsd-text-sm);
    font-weight: 500;
    font-family: var(--bsd-font);
    color: var(--bsd-text-muted);
    background: transparent;
    border: none;
    cursor: pointer;
    border-radius: var(--bsd-r-sm) var(--bsd-r-sm) 0 0;
    white-space: nowrap;
    flex-shrink: 0;
    position: relative;
    outline: none;
    transition: color var(--bsd-dur) var(--bsd-ease),
    background var(--bsd-dur) var(--bsd-ease);
}

.bs-top-tab:hover {
    color: var(--bsd-text-2);
    background: var(--bsd-surface-3);
}

/* Active underline indicator */
.bs-top-tab::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    right: 0;
    height: 2px;
    background: transparent;
    border-radius: 2px 2px 0 0;
    transition: background var(--bsd-dur) var(--bsd-ease);
}

.bs-top-tab.active {
    color: var(--bsd-primary);
    font-weight: 600;
    background: transparent;
}

.bs-top-tab.active::after {
    background: var(--bsd-primary);
}

.bs-top-tab:focus-visible {
    box-shadow: var(--bsd-shadow-focus);
    z-index: 1;
}

/* Tab icon */
.bs-top-tab__icon {
    font-size: 15px;
    flex-shrink: 0;
    opacity: 0.7;
    transition: opacity var(--bsd-dur) var(--bsd-ease);
}

.bs-top-tab.active .bs-top-tab__icon { opacity: 1; }

/* Tab badge */
.bs-top-tab__badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
    min-width: 17px;
    height: 17px;
    padding: 0 5px;
    border-radius: var(--bsd-r-full);
    background: var(--bsd-n-200);
    color: var(--bsd-text-muted);
    transition: background var(--bsd-dur) var(--bsd-ease),
    color var(--bsd-dur) var(--bsd-ease);
}

.bs-top-tab.active .bs-top-tab__badge {
    background: var(--bsd-primary-bg);
    color: var(--bsd-primary);
}

.bs-top-tab__badge--danger {
    background: var(--bsd-danger-bg) !important;
    color: var(--bsd-danger) !important;
}

.bs-top-tab__badge--warning {
    background: var(--bsd-warning-bg) !important;
    color: var(--bsd-warning) !important;
}

/* Right-side tab bar action buttons */
.bs-top-tab__actions {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-left: auto;
    padding: 0 2px 2px;
    flex-shrink: 0;
}

.bs-top-tab__action-btn {
    width: 28px;
    height: 28px;
    border-radius: var(--bsd-r-sm);
    border: none;
    background: transparent;
    color: var(--bsd-text-faint);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    transition: all var(--bsd-dur-fast) var(--bsd-ease);
}

.bs-top-tab__action-btn:hover {
    background: var(--bsd-surface-3);
    color: var(--bsd-text-muted);
}

/* Tab panels */
.bs-top-tab-panel {
    display: none;
    animation: bsd-panel-in 0.18s var(--bsd-ease) both;
}

.bs-top-tab-panel.active { display: block; }

@keyframes bsd-panel-in {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: translateY(0); }
}


.bsd-cal__week-grid{display:flex;flex-direction:column;border:1px solid var(--bsd-border);border-radius:var(--bsd-r-md);overflow:hidden;background:var(--bsd-surface);box-shadow:var(--bsd-shadow-xs)}
.bsd-cal__week-header{display:grid;grid-template-columns:56px repeat(7,1fr);border-bottom:1px solid var(--bsd-border);background:var(--bsd-surface-2)}
.bsd-cal__week-header-gutter{border-right:1px solid var(--bsd-border);padding:10px 0}
.bsd-cal__week-header-day{padding:10px 8px;text-align:center;border-right:1px solid var(--bsd-border);cursor:pointer}
.bsd-cal__week-header-day:last-child{border-right:none}
.bsd-cal__week-dayname{font-size:var(--bsd-text-xs);font-weight:700;text-transform:uppercase;letter-spacing:0.08em;color:var(--bsd-text-faint);font-family:var(--bsd-font-display)}
.bsd-cal__week-daynum{font-size:var(--bsd-text-xl);font-weight:700;line-height:1;color:var(--bsd-text-2);margin-top:2px;font-family:var(--bsd-font-display)}
.bsd-cal__week-header-day.bsd-cal__week-day--today .bsd-cal__week-daynum{background:var(--bsd-primary);color:var(--bsd-n-0, #fff);width:32px;height:32px;border-radius:var(--bsd-r-full);display:inline-flex;align-items:center;justify-content:center}
.bsd-cal__week-body{display:grid;grid-template-columns:56px repeat(7,1fr);overflow-y:auto;max-height:560px;position:relative}
.bsd-cal__week-time-col{border-right:1px solid var(--bsd-border);position:sticky;left:0;background:var(--bsd-surface-2);z-index:2}
.bsd-cal__week-time-slot{height:48px;border-bottom:1px solid var(--bsd-border);display:flex;align-items:flex-start;padding:4px 6px 0;font-size:10px;font-weight:500;color:var(--bsd-text-faint);font-family:var(--bsd-font-mono);justify-content:flex-end}
.bsd-cal__week-day-col{border-right:1px solid var(--bsd-border);position:relative}
.bsd-cal__week-day-col:last-child{border-right:none}
.bsd-cal__week-day-col.bsd-cal__week-day--today{background:rgba(41,82,227,0.02)}
.bsd-cal__week-hour-cell{height:48px;border-bottom:1px solid var(--bsd-border);position:relative;cursor:pointer;transition:background var(--bsd-dur-fast) var(--bsd-ease)}
.bsd-cal__week-hour-cell:hover{background:var(--bsd-surface-3)}
.bsd-cal__week-event{position:absolute;left:3px;right:3px;border-radius:var(--bsd-r-xs);padding:2px 6px;font-size:10px;font-weight:600;line-height:1.4;overflow:hidden;cursor:pointer;z-index:1;transition:var(--bsd-t-fast);white-space:nowrap;text-overflow:ellipsis}
.bsd-cal__week-event:hover{filter:brightness(0.93);box-shadow:var(--bsd-shadow-sm)}

/* Day view */
.bsd-cal__day-view{display:flex;flex-direction:column;border:1px solid var(--bsd-border);border-radius:var(--bsd-r-md);overflow:hidden;background:var(--bsd-surface);box-shadow:var(--bsd-shadow-xs)}
.bsd-cal__day-header{display:flex;align-items:center;gap:16px;padding:16px 20px;border-bottom:1px solid var(--bsd-border);background:var(--bsd-surface-2);flex-wrap:wrap}
.bsd-cal__day-header-date{font-size:var(--bsd-text-3xl);font-weight:800;color:var(--bsd-primary);font-family:var(--bsd-font-display);letter-spacing:-0.04em;line-height:1}
.bsd-cal__day-header-info{display:flex;flex-direction:column;gap:2px}
.bsd-cal__day-header-name{font-size:var(--bsd-text-lg);font-weight:700;color:var(--bsd-text);font-family:var(--bsd-font-display);letter-spacing:-0.02em}
.bsd-cal__day-header-sub{font-size:var(--bsd-text-xs);color:var(--bsd-text-faint)}
.bsd-cal__day-body{display:grid;grid-template-columns:56px 1fr;overflow-y:auto;max-height:580px}
.bsd-cal__day-time-col{border-right:1px solid var(--bsd-border);background:var(--bsd-surface-2)}
.bsd-cal__day-time-slot{height:60px;border-bottom:1px solid var(--bsd-border);display:flex;align-items:flex-start;padding:4px 8px 0;font-size:10px;font-weight:500;color:var(--bsd-text-faint);font-family:var(--bsd-font-mono);justify-content:flex-end}
.bsd-cal__day-events-col{position:relative}
.bsd-cal__day-hour-cell{height:60px;border-bottom:1px solid var(--bsd-border);cursor:pointer;transition:background var(--bsd-dur-fast) var(--bsd-ease)}
.bsd-cal__day-hour-cell:hover{background:var(--bsd-surface-3)}
.bsd-cal__day-event{position:absolute;left:8px;right:8px;border-radius:var(--bsd-r-sm);padding:6px 10px;font-size:var(--bsd-text-xs);overflow:hidden;cursor:pointer;z-index:1;transition:var(--bsd-t-fast);border-left:3px solid currentColor}
.bsd-cal__day-event:hover{filter:brightness(0.93);box-shadow:var(--bsd-shadow-md);z-index:2}
.bsd-cal__day-event-title{font-weight:700;margin-bottom:1px}
.bsd-cal__day-event-time{font-size:10px;opacity:0.8;font-family:var(--bsd-font-mono)}
.bsd-cal__day-event-desc{font-size:10px;opacity:0.75;margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bsd-cal__now-line{position:absolute;left:0;right:0;height:2px;background:var(--bsd-danger);z-index:3;pointer-events:none}
.bsd-cal__now-line::before{content:'';position:absolute;left:-4px;top:-4px;width:10px;height:10px;border-radius:50%;background:var(--bsd-danger)}


.bsd-upload-trigger {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 5px 5px 5px;
    border: 1.5px dashed var(--bsd-border-2);
    border-radius: var(--bsd-r-lg);
    background: var(--bsd-surface);
    cursor: pointer;
    transition: var(--bsd-t);
}

.bsd-upload-trigger:hover {
    border-color: var(--bsd-primary);
    background: var(--bsd-primary-bg);
}

.bsd-upload-trigger:hover .bsd-upload-trigger__icon {
    background: var(--bsd-primary);
    color: var(--bsd-n-0, #fff);
    transform: translateY(-2px);
}

.bsd-upload-trigger__icon {
    width: 52px;
    height: 52px;
    border-radius: var(--bsd-r-full);
    background: var(--bsd-primary-bg);
    color: var(--bsd-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    transition: var(--bsd-t);
}

.bsd-upload-trigger__title {
    font-size: var(--bsd-text-md);
    font-weight: 600;
    color: var(--bsd-text);
    font-family: var(--bsd-font-display);
}

.bsd-upload-trigger__desc {
    font-size: var(--bsd-text-sm);
    color: var(--bsd-text-muted);
    max-width: 320px;
}

.bsd-upload-trigger__meta {
    font-size: var(--bsd-text-xs);
    color: var(--bsd-text-faint);
    margin-top: 4px;
}

/* ── Modal dropzone (inside the popup) ── */
.bsd-upload-zone {
    border: 1.5px dashed var(--bsd-border-2);
    border-radius: var(--bsd-r-md);
    background: var(--bsd-surface-2);
    padding: 36px 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    text-align: center;
    cursor: pointer;
    transition: var(--bsd-t);
    position: relative;
    aspect-ratio: 1 / 1;
}

.bsd-upload-zone:hover,
.bsd-upload-zone.bsd-upload-zone--drag {
    border-color: var(--bsd-primary);
    background: var(--bsd-primary-bg);
    aspect-ratio: 1 / 1;
}

.bsd-upload-zone__icon {
    width: 44px;
    height: 44px;
    border-radius: var(--bsd-r-full);
    background: var(--bsd-surface);
    border: 1px solid var(--bsd-border);
    color: var(--bsd-text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    margin-bottom: 4px;
    transition: var(--bsd-t);
}

.bsd-upload-zone:hover .bsd-upload-zone__icon,
.bsd-upload-zone.bsd-upload-zone--drag .bsd-upload-zone__icon {
    background: var(--bsd-primary);
    border-color: var(--bsd-primary);
    color: var(--bsd-n-0, #fff);
}

.bsd-upload-zone--frame {
    position: absolute;
    width: 100%;
    height: 100%;
    display: block;
    border: none;
    background: var(--bsd-surface-3);
    pointer-events: none; /* clicks pass through to .bsd-gallery__item */
    transition: transform var(--bsd-dur-slow) var(--bsd-ease);
    object-fit: contain;
}

.bsd-upload-zone__title {
    font-size: var(--bsd-text-sm);
    font-weight: 600;
    color: var(--bsd-text);
}

.bsd-upload-zone__title span {
    color: var(--bsd-primary);
    text-decoration: underline;
}

.bsd-upload-zone__hint {
    font-size: var(--bsd-text-xs);
    color: var(--bsd-text-faint);
}

.bsd-upload-zone input[type="file"] {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
}

/* ── File list (staged uploads inside modal) ── */
.bsd-upload-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 16px;
}

.bsd-upload-file {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border: 1px solid var(--bsd-border);
    border-radius: var(--bsd-r-sm);
    background: var(--bsd-surface);
    animation: bsd-fade-up 0.2s var(--bsd-ease-out);
}

.bsd-upload-file__icon {
    width: 36px;
    height: 36px;
    border-radius: var(--bsd-r-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    flex-shrink: 0;
    background: var(--bsd-primary-bg);
    color: var(--bsd-primary);
}

.bsd-upload-file__icon--image { background: var(--bsd-violet-100); color: var(--bsd-violet-600); }
.bsd-upload-file__icon--pdf   { background: var(--bsd-danger-bg); color: var(--bsd-danger); }
.bsd-upload-file__icon--doc   { background: var(--bsd-info-bg); color: var(--bsd-info); }

.bsd-upload-file__info { flex: 1; min-width: 0; }

.bsd-upload-file__name {
    font-size: var(--bsd-text-sm);
    font-weight: 500;
    color: var(--bsd-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.bsd-upload-file__size {
    font-size: var(--bsd-text-xs);
    color: var(--bsd-text-faint);
}

.bsd-upload-file__progress {
    height: 4px;
    border-radius: 2px;
    background: var(--bsd-border);
    overflow: hidden;
    margin-top: 5px;
}

.bsd-upload-file__progress-bar {
    height: 100%;
    background: var(--bsd-primary);
    border-radius: 2px;
    transition: width 0.4s var(--bsd-ease-out);
}

.bsd-upload-file__remove {
    width: 26px;
    height: 26px;
    border: none;
    background: transparent;
    color: var(--bsd-text-faint);
    border-radius: var(--bsd-r-xs);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    flex-shrink: 0;
    transition: var(--bsd-t-fast);
}

.bsd-upload-file__remove:hover {
    background: var(--bsd-danger-bg);
    color: var(--bsd-danger);
}

/* Accepted file type row in modal footer note */
.bsd-upload-types {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 12px;
}

.padding-bot {
    padding-bottom: 10px;
}


.bsd-gallery { display: flex; flex-direction: column; gap: 14px; }

.bsd-gallery__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.bsd-gallery__count {
    font-size: var(--bsd-text-xs);
    color: var(--bsd-text-faint);
    font-family: var(--bsd-font-mono);
}

/* Responsive thumbnail grid */
.bsd-gallery__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 10px;
}

.bsd-gallery__item {
    position: relative;
    aspect-ratio: 1 / 1;
    border-radius: var(--bsd-r-md);
    overflow: hidden;
    cursor: pointer;
    background: var(--bsd-surface-3);
    border: 1px solid var(--bsd-border);
    box-shadow: var(--bsd-shadow-xs);
    transition: var(--bsd-t);
}

.bsd-gallery__item:hover {
    box-shadow: var(--bsd-shadow-md);
    transform: translateY(-2px);
    border-color: var(--bsd-border-2);
}

.bsd-gallery__img {
    position: absolute;
    width: 100%;
    height: 100%;
    display: block;
    border: none;
    background: var(--bsd-surface-3);
    pointer-events: none; /* clicks pass through to .bsd-gallery__item */
    transition: transform var(--bsd-dur-slow) var(--bsd-ease);
    object-fit: contain;
}

.bsd-gallery__item:hover .bsd-gallery__img { transform: scale(1.05); }

/* Hover scrim + zoom affordance */
.bsd-gallery__scrim {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgb(0 0 0 / 0) 45%, rgb(0 0 0 / 0.55) 100%);
    opacity: 0;
    transition: opacity var(--bsd-dur) var(--bsd-ease);
    display: flex;
    align-items: flex-end;
    padding: 8px 10px;
}

.bsd-gallery__item:hover .bsd-gallery__scrim { opacity: 1; }

.bsd-gallery__caption {
    color: var(--bsd-n-0, #fff);
    font-size: var(--bsd-text-xs);
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.bsd-gallery__zoom-icon {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 26px;
    height: 26px;
    border-radius: var(--bsd-r-full);
    background: rgb(0 0 0 / 0.55);
    color: var(--bsd-n-0, #fff);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    opacity: 0;
    transition: opacity var(--bsd-dur) var(--bsd-ease);
    backdrop-filter: blur(2px);
}

.bsd-gallery__item:hover .bsd-gallery__zoom-icon { opacity: 1; }

/* Primary/featured tile (spans 2x2 in grid) */
.bsd-gallery__item--featured { grid-column: span 2; grid-row: span 2; }

/* Cover badge, e.g. "Cover" or file type */
.bsd-gallery__badge {
    position: absolute;
    top: 8px;
    left: 8px;
    font-size: var(--bsd-text-2xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 2px 7px;
    border-radius: var(--bsd-r-full);
    background: rgb(0 0 0 / 0.55);
    color: var(--bsd-n-0, #fff);
    backdrop-filter: blur(2px);
}

/* "+N more" overlay on the last visible tile */
.bsd-gallery__more {
    position: absolute;
    inset: 0;
    background: rgb(0 0 0 / 0.6);
    color: var(--bsd-n-0, #fff);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--bsd-text-lg);
    font-weight: 700;
    font-family: var(--bsd-font-display);
    backdrop-filter: blur(1px);
}

/* Empty state reuses .bsd-empty from core sheet */

/* ── Lightbox (built on core .bsd-modal-backdrop) ── */
.bsd-gallery-lightbox .bsd-modal {
    max-width: 860px;
    background: var(--bsd-n-950);
    border-color: rgba(255,255,255,0.08);
}

.bsd-gallery-lightbox .bsd-modal__header {
    border-bottom-color: rgba(255,255,255,0.08);
}

.bsd-gallery-lightbox .bsd-modal__title {
    color: var(--bsd-n-0, #fff);
}

.bsd-gallery-lightbox .bsd-modal__title-sub {
    font-size: var(--bsd-text-xs);
    color: var(--bsd-text-faint);
    font-weight: 500;
    margin-left: 8px;
}

.bsd-gallery-lightbox .bsd-modal__close { color: var(--bsd-text-faint); }
.bsd-gallery-lightbox .bsd-modal__close:hover { background: rgba(255,255,255,0.08); color: var(--bsd-n-0, #fff); }

.bsd-gallery-lightbox .bsd-modal__body {
    padding: 0;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bsd-n-950);
    min-height: 360px;
}

.bsd-gallery-lightbox__stage-img {
    width: 100%;
    height: 62vh;
    border: none;
    display: block;
    background: var(--bsd-n-0, #fff); /* PDFs render on a white page background */
    object-fit: contain;
}

.bsd-gallery-lightbox__nav-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    border-radius: var(--bsd-r-full);
    border: none;
    background: rgba(255,255,255,0.1);
    color: var(--bsd-n-0, #fff);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 16px;
    transition: var(--bsd-t-fast);
    backdrop-filter: blur(4px);
}

.bsd-gallery-lightbox__nav-btn:hover { background: rgba(255,255,255,0.2); }
.bsd-gallery-lightbox__nav-btn--prev { left: 14px; }
.bsd-gallery-lightbox__nav-btn--next { right: 14px; }

.bsd-gallery-lightbox__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 20px;
    border-top: 1px solid rgba(255,255,255,0.08);
    background: var(--bsd-n-950);
}

.bsd-gallery-lightbox__counter {
    font-size: var(--bsd-text-xs);
    color: var(--bsd-text-faint);
    font-family: var(--bsd-font-mono);
}

/* Filmstrip thumbnails inside lightbox footer */
.bsd-gallery-lightbox__strip {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    padding: 10px 20px 16px;
    scrollbar-width: none;
}

.bsd-gallery-lightbox__strip::-webkit-scrollbar { display: none; }

.bsd-gallery-lightbox__thumb {
    width: 52px;
    height: 52px;
    border-radius: var(--bsd-r-sm);
    overflow: hidden;
    flex-shrink: 0;
    cursor: pointer;
    opacity: 0.45;
    border: 2px solid transparent;
    transition: var(--bsd-t-fast);
}

.bsd-gallery-lightbox__thumb:hover { opacity: 0.8; }
.bsd-gallery-lightbox__thumb.active {
    opacity: 1;
    border-color: var(--bsd-primary);
}

/* Inner iframe fills the clickable wrapper; pointer-events disabled so the
click always reaches the wrapper, never the embedded document/PDF. */
.bsd-gallery-lightbox__thumb-frame {
    width: 100%;
    height: 100%;
    border: none;
    display: block;
    background: var(--bsd-n-0, #fff);
    pointer-events: none;
}

@media (max-width: 640px) {
    .bsd-gallery__item--featured { grid-column: span 2; grid-row: span 1; }
    .bsd-gallery-lightbox__nav-btn { width: 34px; height: 34px; font-size: 13px; }
}


.bsd-info-block {
    position: relative;
    min-height: 110px;
    padding: 22px 24px;

    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 7px;

    background: var(--bsd-n-0, #ffffff);
    border: 1px solid #e5eaf2;
    border-radius: 14px;

    box-shadow: 0 6px 18px rgba(15, 42, 77, 0.07) !important;
    overflow: hidden;

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease,
        border-color 0.2s ease;
}

.bsd-info-block:hover {
    border-color: #cbd8ea;
    box-shadow: 0 10px 28px rgba(15, 42, 77, 0.12) !important;
    transform: translateY(-3px);
    cursor: pointer;
}

.bsd-info-block__icon {
    width: 36px;
    height: 36px;
    border-radius: var(--bsd-r-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    flex-shrink: 0;
}

.bsd-info-block__icon--primary { background: var(--bsd-primary-bg); color: var(--bsd-primary); }
.bsd-info-block__icon--success { background: var(--bsd-success-bg); color: var(--bsd-success); }
.bsd-info-block__icon--warning { background: var(--bsd-warning-bg); color: var(--bsd-warning); }
.bsd-info-block__icon--danger  { background: var(--bsd-danger-bg);  color: var(--bsd-danger);  }
.bsd-info-block__icon--violet  { background: var(--bsd-violet-100); color: var(--bsd-violet-600); }
.bsd-info-block__icon--cyan    { background: var(--bsd-cyan-100);   color: var(--bsd-cyan-600);   }

.bsd-info-block__label {
    margin: 0;
    color: #53657d;
    font-family: var(--bsd-font-display);
    font-size: 12px;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.bsd-info-block__value {
    margin: 0;
    color: #081a35;
    font-family: var(--bsd-font-display);
    font-size: 28px;
    font-weight: 750;
    line-height: 1.1;
    letter-spacing: -0.03em;
}

.bsd-info-block__desc {
    font-size: var(--bsd-text-xs);
    color: var(--bsd-text-muted);
    line-height: 1.5;
}

/* Left accent-bar variant, for when the icon is dropped entirely */
.bsd-info-block--bar {
    border-left: 4px solid var(--bsd-border);
    padding-left: 24px;
}
.bsd-info-block--bar.bsd-info-block--primary { border-left-color: var(--bsd-primary); }
.bsd-info-block--bar.bsd-info-block--success { border-left-color: var(--bsd-success); }
.bsd-info-block--bar.bsd-info-block--warning { border-left-color: var(--bsd-warning); }
.bsd-info-block--bar.bsd-info-block--danger  { border-left-color: var(--bsd-danger);  }


.bsd-footer-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    height: 44px;
    display: flex;
    align-items: stretch;
    background: var(--bsd-surface);
    border-top: 1px solid var(--bsd-border);
    box-shadow: var(--bsd-shadow-sm);
    z-index: var(--bsd-z-topbar);
    font-family: var(--bsd-font);
}

/* If your shell has a sidebar, offset the bar the same way the
   topbar does — override --bsd-sidebar-w-value or set left directly. */
.bsd-footer-bar--offset {
    left: var(--bsd-sidebar-w, 0px);
}

/* Ready-made spacer to reserve room at the bottom of a page/scroll
   container so content isn't hidden behind the fixed bar. */
.bsd-footer-bar-spacer {
    height: 44px;
    flex-shrink: 0;
}

/* Blue accent for the Tasks Pending card */
.bsd-info-block:has(#TasksPending) {
    border-left: 4px solid var(--bsd-primary, #3b82f6);
}

/* Dashboard card polish */
.bsd-info-block {
    border-radius: 12px;
    box-shadow: 0 4px 16px rgba(15, 43, 82, 0.06);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.bsd-info-block:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 24px rgba(15, 43, 82, 0.12);
}


/* ── Ticker ───────────────────────────────────────────────── */
.bsd-ticker {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    position: relative;
    display: flex;
    align-items: center;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 32px, #000 calc(100% - 32px), transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 32px, #000 calc(100% - 32px), transparent 100%);
}

/* The track holds two back-to-back copies of the same items so the
   loop is seamless: animate exactly -50% and it wraps invisibly. */
.bsd-ticker__track {
    display: flex;
    align-items: center;
    gap: 40px;
    white-space: nowrap;
    padding-left: 16px;
    animation: bsd-ticker-scroll 22s linear infinite;
}

.bsd-ticker:hover .bsd-ticker__track {
    animation-play-state: paused;
}

.bsd-ticker__item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: var(--bsd-text-xs);
    font-weight: 500;
    color: var(--bsd-text-2);
}

.bsd-ticker__item::before {
    content: '';
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--bsd-primary);
    flex-shrink: 0;
}

.bsd-ticker__item--success::before { background: var(--bsd-success); }
.bsd-ticker__item--warning::before { background: var(--bsd-warning); }
.bsd-ticker__item--danger::before  { background: var(--bsd-danger); }

.bsd-ticker__item strong {
    color: var(--bsd-text);
    font-weight: 700;
}

@keyframes bsd-ticker-scroll {
    from { transform: translateX(50%); }
    to   { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
    .bsd-ticker__track {
        animation: none;
        overflow-x: auto;
    }
}


/* ── Footer actions (icon buttons, right-aligned) ────────── */
.bsd-footer-bar__actions {
    display: flex;
    align-items: center;
    gap: 2px;
    padding: 0 6px;
    border-left: 1px solid var(--bsd-border);
    flex-shrink: 0;
}

.bsd-footer-bar__icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: var(--bsd-r-sm);
    border: none;
    background: transparent;
    color: var(--bsd-text-muted);
    cursor: pointer;
    position: relative;
    transition: var(--bsd-t-fast);
}

.bsd-footer-bar__icon-btn svg {
    width: 17px;
    height: 17px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.bsd-footer-bar__icon-btn:hover {
    background: var(--bsd-surface-3);
    color: var(--bsd-text);
}

.bsd-footer-bar__icon-btn:focus-visible {
    outline: none;
    box-shadow: var(--bsd-shadow-focus);
}

.bsd-footer-bar__icon-btn.active {
    background: var(--bsd-primary-bg);
    color: var(--bsd-primary);
}

/* Small dot to flag "today has events" etc. */
.bsd-footer-bar__icon-btn__dot {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--bsd-danger);
    border: 1.5px solid var(--bsd-surface);
}

.bsd-footer-bar__clock {
    display: flex;
    align-items: center;
    padding: 0 12px 0 4px;
    font-family: var(--bsd-font-mono);
    font-size: var(--bsd-text-xs);
    color: var(--bsd-text-muted);
    border-left: 1px solid var(--bsd-border);
    white-space: nowrap;
}


/* ── Calendar modal ───────────────────────────────────────── */
.bsd-modal--calendar {
    max-width: 620px;
}

.bsd-modal__body--calendar {
    padding: 12px;
}

/* Tuck FullCalendar's own toolbar/typography down a notch so it
   feels native inside a modal rather than a full page view. */
.bsd-modal--calendar .fc .fc-toolbar-title {
    font-size: var(--bsd-text-lg);
}

.bsd-modal--calendar .fc {
    border-radius: 0;
}


/* ── Dark theme ───────────────────────────────────────────── */
[data-bsd-theme="dark"] .bsd-ticker__item strong {
    color: var(--bsd-text);
}


/* ── Responsive ───────────────────────────────────────────── */
@media (max-width: 560px) {
    .bsd-footer-bar { height: 40px; }
    .bsd-footer-bar-spacer { height: 40px; }
    .bsd-footer-bar__clock { display: none; }
    .bsd-ticker__item { font-size: var(--bsd-text-2xs); }
}

.bsd-footer-panel {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 44px;
    height: 183px;
    background: var(--bsd-surface);
    border-top: 1px solid var(--bsd-border);
    box-shadow: var(--bsd-shadow-xl);
    z-index: var(--bsd-z-modal);
    display: flex;
    flex-direction: column;
    transform: translateY(100%);
    transition: transform var(--bsd-dur) var(--bsd-ease-out);
}

.bsd-footer-panel.open {
    transform: translateY(0);
}

.bsd-footer-panel__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 16px;
    border-bottom: 1px solid var(--bsd-text-2);
    flex-shrink: 0;
}

.bsd-footer-panel__title {
    font-family: var(--bsd-font-display);
    font-size: var(--bsd-text-sm);
    font-weight: 700;
    color: var(--bsd-text);
    margin: 0;
}

.bsd-footer-panel__close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: var(--bsd-r-sm);
    border: none;
    background: transparent;
    color: var(--bsd-text-muted);
    cursor: pointer;
    font-size: 18px;
    line-height: 1;
    transition: var(--bsd-t-fast);
}

.bsd-footer-panel__close:hover {
    background: var(--bsd-surface-3);
    color: var(--bsd-text);
}

.bsd-footer-panel__columns {
    flex: 1;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    overflow-y: auto;
}

.bsd-footer-panel__col {
    padding: 14px 16px;
    border-right: 1px solid var(--bsd-text-2);
    overflow: scroll;
}

.bsd-footer-panel__col:last-child {
    border-right: none;
}

.bsd-footer-panel__col-title {
    font-family: var(--bsd-font-display);
    font-size: var(--bsd-text-2xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--bsd-text);
    margin: 0 0 10px;
}

.bsd-footer-panel__col-body {
    display: flex;
    flex-direction: column;
    gap: 8px;
    overflow: scroll;
}

/* Generic row for stat/list-style content inside a column */
.bsd-footer-panel__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    font-size: var(--bsd-text-xs);
    color: var(--bsd-text-2);
    border-bottom: 1px solid var(--bsd-text-2);
}

.bsd-footer-panel__row-label {
    color: var(--bsd-text);
}

.bsd-footer-panel__row-value {
    font-weight: 600;
    color: var(--bsd-text);
}

/* Empty state for a column with nothing to show */
.bsd-footer-panel__col-empty {
    font-size: var(--bsd-text-xs);
    color: var(--bsd-text-faint);
    font-style: italic;
}


/* ── Dark theme ───────────────────────────────────────────── */
[data-bsd-theme="dark"] .bsd-ticker__item strong {
    color: var(--bsd-text);
}


/* ── Responsive ───────────────────────────────────────────── */


@media (max-width: 680px) {
    .bsd-footer-panel {
        bottom: 40px;
        max-height: 70vh;
    }
    .bsd-footer-panel__columns {
        grid-template-columns: 1fr;
    }
    .bsd-footer-panel__col {
        border-right: none;
        border-bottom: 1px solid var(--bsd-border);
    }
    .bsd-footer-panel__col:last-child {
        border-bottom: none;
    }
}

.bsd-modal--system {
    position: relative;
    text-align: center;
    padding: 36px 28px 28px;
}

.bsd-modal--system .bsd-modal__close {
    position: absolute;
    top: 12px;
    right: 12px;
}

/* Icon circle */
.bsd-system-modal__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    margin: 0 auto 18px;
    background: var(--bsd-surface-3);
    color: var(--bsd-text-muted);
}

.bsd-system-modal__icon svg {
    width: 26px;
    height: 26px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Status color variants — recolor both the icon circle and reuse
   the same class on .bsd-modal for the optional caution stripe */
.bsd-modal--success .bsd-system-modal__icon { background: var(--bsd-success-bg); color: var(--bsd-success); }
.bsd-modal--neutral .bsd-system-modal__icon { background: var(--bsd-surface-3); color: var(--bsd-text-muted); }
.bsd-modal--danger  .bsd-system-modal__icon { background: var(--bsd-danger-bg);  color: var(--bsd-danger); }
.bsd-modal--warning .bsd-system-modal__icon { background: var(--bsd-warning-bg); color: var(--bsd-warning); }
.bsd-modal--info    .bsd-system-modal__icon { background: var(--bsd-info-bg);    color: var(--bsd-info); }

/* Caution-tape header strip, reserved for the "under construction"
   status where the motif actually fits. */
.bsd-modal--system.bsd-modal--warning::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 6px;
    border-radius: var(--bsd-r-lg) var(--bsd-r-lg) 0 0;
    background: repeating-linear-gradient(
            45deg,
            var(--bsd-amber-400) 0 10px,
            var(--bsd-amber-100) 10px 20px
    );
}

/* Text */
.bsd-system-modal__title {
    font-family: var(--bsd-font-display);
    font-size: var(--bsd-text-xl);
    font-weight: 700;
    color: var(--bsd-text);
    margin: 0 0 8px;
}

.bsd-system-modal__message {
    font-size: var(--bsd-text-sm);
    color: var(--bsd-text-muted);
    line-height: 1.55;
    margin: 0 0 24px;
}

.bsd-system-modal__message:last-of-type {
    margin-bottom: 0;
}

/* Optional small meta line — error codes, timestamps, etc. */
.bsd-system-modal__meta {
    display: inline-block;
    font-family: var(--bsd-font-mono);
    font-size: var(--bsd-text-2xs);
    color: var(--bsd-text-faint);
    background: var(--bsd-danger-bg);
    border: 1px solid var(--bsd-border);
    border-radius: var(--bsd-r-xs);
    padding: 3px 8px;
    margin: -12px 0 20px;
}

/* Actions */
.bsd-system-modal__actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.bsd-system-modal__actions--stack {
    flex-direction: column;
}

.bsd-system-modal__actions--stack .bsd-btn {
    width: 100%;
}


/* ── Dark theme ───────────────────────────────────────────── */
[data-bsd-theme="dark"] .bsd-modal--warning.bsd-modal--system::before {
    background: repeating-linear-gradient(
            45deg,
            var(--bsd-amber-400) 0 10px,
            rgb(251 191 36 / 0.15) 10px 20px
    );
}

.icon_pointer {
    cursor: pointer;
}



.bsd-stat-card {
    background: var(--bsd-surface);
    border: 1px solid var(--bsd-border);
    border-radius: var(--bsd-r-md);
    box-shadow: var(--bsd-shadow-xs);
    overflow: hidden;
    transition: var(--bsd-t);
    display: flex;
    flex-direction: column;
}

.bsd-stat-card--hoverable:hover {
    box-shadow: var(--bsd-shadow-md);
    border-color: var(--bsd-border-2);
    transform: translateY(-1px);
}


/* ── Image ────────────────────────────────────────────────── */
.bsd-stat-card__image {
    width: 100%;
    height: 160px;
    object-fit: cover;
    display: block;
    flex-shrink: 0;
    background: var(--bsd-surface-2);
}

.bsd-stat-card__image--placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--bsd-text-faint);
    background: linear-gradient(135deg, var(--bsd-surface-2), var(--bsd-surface-3));
}

.bsd-stat-card__image--placeholder svg {
    width: 28px;
    height: 28px;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.5;
}

/* Height modifiers */
.bsd-stat-card__image--sm { height: 110px; }
.bsd-stat-card__image--lg { height: 210px; }

/* Image with a badge pinned over the corner (e.g. a status or category tag) */
.bsd-stat-card__image-wrap {
    position: relative;
    flex-shrink: 0;
}

.bsd-stat-card__image-badge {
    position: absolute;
    top: 10px;
    left: 10px;
}


/* ── Body ─────────────────────────────────────────────────── */
.bsd-stat-card__body {
    padding: 16px 18px 18px;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.bsd-stat-card__eyebrow {
    font-family: var(--bsd-font-display);
    font-size: var(--bsd-text-2xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--bsd-primary);
    margin: 0 0 6px;
}

.bsd-stat-card__title {
    font-family: var(--bsd-font-display);
    font-size: var(--bsd-text-md);
    font-weight: 700;
    color: var(--bsd-text);
    margin: 0 0 6px;
    line-height: 1.35;
}

.bsd-stat-card__info {
    font-size: var(--bsd-text-sm);
    color: var(--bsd-text-muted);
    line-height: 1.55;
    margin: 0;
    flex: 1;
}


/* ── Footer (optional stat + badge row) ───────────────────── */
.bsd-stat-card__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid var(--bsd-border);
}

.bsd-stat-card__stat {
    display: flex;
    align-items: baseline;
    gap: 6px;
}

.bsd-stat-card__stat-value {
    font-family: var(--bsd-font-display);
    font-size: var(--bsd-text-lg);
    font-weight: 700;
    color: var(--bsd-text);
}

.bsd-stat-card__stat-label {
    font-size: var(--bsd-text-xs);
    color: var(--bsd-text-faint);
}

/* Two stats side by side in the footer */
.bsd-stat-card__stat-group {
    display: flex;
    gap: 18px;
}


/* ── Horizontal variant ───────────────────────────────────── */
.bsd-stat-card--horizontal {
    flex-direction: row;
    align-items: stretch;
}

.bsd-stat-card--horizontal .bsd-stat-card__image {
    width: 120px;
    height: auto;
}

.bsd-stat-card--horizontal .bsd-stat-card__body {
    padding: 14px 16px;
}

.bsd-stat-card--horizontal .bsd-stat-card__footer {
    margin-top: auto;
}


/* ── Compact variant (smaller padding/type, dense lists) ──── */
.bsd-stat-card--compact .bsd-stat-card__image { height: 110px; }
.bsd-stat-card--compact .bsd-stat-card__body { padding: 12px 14px 14px; }
.bsd-stat-card--compact .bsd-stat-card__title { font-size: var(--bsd-text-sm); }
.bsd-stat-card--compact .bsd-stat-card__info { font-size: var(--bsd-text-xs); }


/* ── Grid helper for a row of stat cards ──────────────────── */
.bsd-stat-card-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

@media (max-width: 860px) {
    .bsd-stat-card-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 560px) {
    .bsd-stat-card-grid { grid-template-columns: 1fr; }
    .bsd-stat-card--horizontal {
        flex-direction: column;
    }
    .bsd-stat-card--horizontal .bsd-stat-card__image {
        width: 100%;
        height: 140px;
    }
}


.bsd-people-select {
    position: relative;
    width: 100%;
}


/* ── Field (search input OR selected-person chip) ─────────── */
.bsd-people-select__field {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 19px;
    border: 1px solid var(--bsd-border-2);
    border-radius: var(--bsd-r-sm);
    background: var(--bsd-surface);
    transition: var(--bsd-t-fast);
    border-radius: 8px;
}

.bsd-people-select__field:focus-within {
    border-color: var(--bsd-primary);
    box-shadow: var(--bsd-shadow-focus);
}

.bsd-people-select__search-icon {
    position: absolute;
    left: 10px;
    width: 15px;
    height: 15px;
    stroke: var(--bsd-text-faint);
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    pointer-events: none;
}

.bsd-people-select__input {
    width: 100%;
    border: none;
    background: transparent;
    padding: 8px 10px 8px 34px;
    font-family: var(--bsd-font);
    font-size: var(--bsd-text-sm);
    color: var(--bsd-text);
}

.bsd-people-select__input:focus {
    outline: none;
}

.bsd-people-select__input::placeholder {
    color: var(--bsd-text-faint);
}

/* Filled (a person is selected) — the chip replaces the input */
.bsd-people-select__field--filled {
    padding: 4px 6px;
}

.bsd-people-select__field--filled .bsd-people-select__input {
    display: none;
}


/* ── Selected-person chip ─────────────────────────────────── */
.bsd-people-select__chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    max-width: 100%;
}

.bsd-people-select__chip-name {
    font-size: var(--bsd-text-sm);
    font-weight: 600;
    color: var(--bsd-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.bsd-people-select__chip-role {
    font-size: var(--bsd-text-xs);
    color: var(--bsd-text-muted);
    margin-left: 2px;
}

.bsd-people-select__chip-clear {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    margin-left: auto;
    flex-shrink: 0;
    border: none;
    border-radius: 50%;
    background: var(--bsd-surface-3);
    color: var(--bsd-text-muted);
    font-size: 13px;
    line-height: 1;
    cursor: pointer;
    transition: var(--bsd-t-fast);
}

.bsd-people-select__chip-clear:hover {
    background: var(--bsd-danger-bg);
    color: var(--bsd-danger);
}


/* ── Multi-select chip row (optional, sits above the field) ─ */
.bsd-people-select__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 8px;
}

.bsd-people-select__chips .bsd-people-select__chip {
    background: var(--bsd-surface-2);
    border: 1px solid var(--bsd-border);
    border-radius: var(--bsd-r-full);
    padding: 3px 6px 3px 4px;
}

.bsd-people-select__chips .bsd-people-select__chip .bsd-avatar {
    width: 20px;
    height: 20px;
    font-size: 9px;
}


/* ── Dropdown menu ────────────────────────────────────────── */
.bsd-people-select__menu {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    max-height: 260px;
    overflow-y: auto;
    background: var(--bsd-surface);
    border: 1px solid var(--bsd-border);
    border-radius: var(--bsd-r-md);
    box-shadow: var(--bsd-shadow-lg);
    padding: 6px;
    z-index: var(--bsd-z-dropdown);
    animation: bsd-dropdown-in 0.15s var(--bsd-ease-out);
}

.bsd-people-select__menu[hidden] {
    display: none;
}

.bsd-people-select__group-label {
    font-family: var(--bsd-font-display);
    font-size: var(--bsd-text-2xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--bsd-text-faint);
    padding: 6px 8px 4px;
}


/* ── Option row ───────────────────────────────────────────── */
.bsd-people-select__option {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 8px;
    border-radius: var(--bsd-r-sm);
    cursor: pointer;
    transition: var(--bsd-t-fast);
    z-index: var(--bsd-z-topbar);
}

.bsd-people-select__option:hover,
.bsd-people-select__option--active {
    background: var(--bsd-surface-2);
}

.bsd-people-select__option--selected {
    background: var(--bsd-primary-bg);
}

.bsd-people-select__option--selected .bsd-people-select__option-name {
    color: var(--bsd-primary);
}

.bsd-people-select__option-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.bsd-people-select__option-name {
    font-size: var(--bsd-text-sm);
    font-weight: 600;
    color: var(--bsd-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.bsd-people-select__option-name mark {
    background: var(--bsd-amber-100);
    color: inherit;
    border-radius: 2px;
    padding: 0 1px;
}

.bsd-people-select__option-meta {
    font-size: var(--bsd-text-xs);
    color: var(--bsd-text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.bsd-people-select__option-check {
    flex-shrink: 0;
    width: 15px;
    height: 15px;
    stroke: var(--bsd-primary);
    fill: none;
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}


/* ── Empty / loading states ───────────────────────────────── */
.bsd-people-select__empty,
.bsd-people-select__loading {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 16px 10px;
    font-size: var(--bsd-text-sm);
    color: var(--bsd-text-faint);
    text-align: center;
    justify-content: center;
}

.bsd-people-select__loading svg {
    width: 14px;
    height: 14px;
    animation: bsd-spin 0.6s linear infinite;
}


/* ── Scrollbar ────────────────────────────────────────────── */
.bsd-people-select__menu {
    scrollbar-width: thin;
    scrollbar-color: var(--bsd-border-2) transparent;
}

.bsd-people-select__menu::-webkit-scrollbar { width: 8px; }
.bsd-people-select__menu::-webkit-scrollbar-thumb {
    background: var(--bsd-border-2);
    border-radius: var(--bsd-r-full);
}


/* ── Sizes ────────────────────────────────────────────────── */
.bsd-people-select--sm .bsd-people-select__field { min-height: 32px; }
.bsd-people-select--sm .bsd-people-select__input { padding: 5px 8px 5px 30px; font-size: var(--bsd-text-xs); }
.bsd-people-select--sm .bsd-people-select__search-icon { width: 13px; height: 13px; left: 9px; }



/* ── Dark theme ───────────────────────────────────────────── */
[data-bsd-theme="dark"] .bsd-people-select__option-name mark {
    background: rgb(251 191 36 / 0.25);
}

/* ==========================================================
   PIXIE TOP-BAR LOGO
   ========================================================== */

.topbar > a.w3-hide-small {
    width: 240px;
    margin-left: 20px;
}

.topbar > a.w3-hide-small > div {
    width: 220px !important;
    height: 64px !important;
}

.topbar > a.w3-hide-small img.object-fit {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain;
    object-position: left center;
    transform: scale(1.35);
    transform-origin: left center;
}

.bd-page-header__sub {
    color: var(--bsd-text-muted, #64748b);
    font-size: 15px;
    line-height: 1.5;
    margin: 0;
}

/* Reference Section — equal 50/50 columns */
.row:has(> .bsd-section__title) > [class*="col-xl-"]:has(> .bsd-card) {
    flex: 0 0 50%;
    max-width: 50%;
}

@media (max-width: 768px) {
    .row:has(> .bsd-section__title) > [class*="col-xl-"]:has(> .bsd-card) {
        flex: 0 0 100%;
        max-width: 100%;
    }
}

/* ── PWA Install Banner ───────────────────────────────────── */
.bsd-pwa-banner {
    position: fixed;
    left: 16px;
    right: 16px;
    max-width: 480px;
    margin-left: auto;
    margin-right: auto;
    bottom: calc(env(safe-area-inset-bottom, 0px) + var(--pwa-vvb, 0px) + 24px);
    transform: translateY(16px);
    z-index: 1200;
    display: flex;
    align-items: center;
    gap: 14px;
    box-sizing: border-box;
    padding: 14px 16px;
    background: var(--bsd-surface, #fff);
    border: 1px solid var(--bsd-border, #e2e8f0);
    border-radius: var(--bsd-r-lg, 12px);
    box-shadow: var(--bsd-shadow-lg, 0 20px 25px -5px rgb(0 0 0 / 0.1));
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease, transform 0.25s ease, bottom 0.15s ease;
}

.bsd-pwa-banner--visible {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.bsd-pwa-banner__icon {
    flex-shrink: 0;
}

.bsd-pwa-banner__icon img {
    display: block;
    border-radius: var(--bsd-r-md, 8px);
}

.bsd-pwa-banner__body {
    flex: 1 1 auto;
    min-width: 0;
}

.bsd-pwa-banner__text {
    margin: 0;
    font-size: 13.5px;
    line-height: 1.4;
    color: var(--bsd-text, #0f172a);
}

.bsd-pwa-banner__actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.bsd-pwa-banner__btn {
    border: none;
    border-radius: var(--bsd-r, 6px);
    padding: 8px 14px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s ease, color 0.15s ease;
}

.bsd-pwa-banner__btn--primary {
    background: var(--bsd-primary, #3b82f6);
    color: var(--bsd-n-0, #fff);
}

.bsd-pwa-banner__btn--primary:hover {
    background: var(--bsd-primary-hover, #2563eb);
}

.bsd-pwa-banner__btn--ghost {
    background: transparent;
    color: var(--bsd-text-muted, #64748b);
}

.bsd-pwa-banner__btn--ghost:hover {
    color: var(--bsd-text, #0f172a);
}

@media (max-width: 480px) {
    .bsd-pwa-banner {
        flex-wrap: wrap;
        row-gap: 10px;
        gap: 10px;
        padding: 12px 14px;
        bottom: calc(env(safe-area-inset-bottom, 0px) + var(--pwa-vvb, 0px) + 12px);
    }

    .bsd-pwa-banner__icon img {
        width: 28px;
        height: 28px;
    }

    /* Force the icon + text onto their own line so the actions never have
    to compete with them for horizontal space and spill off narrow screens. */
    .bsd-pwa-banner__body {
        flex: 1 1 100%;
    }

    .bsd-pwa-banner__text {
        font-size: 12.5px;
    }

    .bsd-pwa-banner__actions {
        flex: 0 0 auto;
        margin-left: auto;
        gap: 6px;
    }

    .bsd-pwa-banner__btn {
        padding: 7px 11px;
        font-size: 12.5px;
    }
}

@media (max-width: 340px) {
    .bsd-pwa-banner__icon {
        display: none;
    }
}

/* ── WhatsApp Inbox ───────────────────────────────────────── */
.bsd-wa {
    display: flex;
    height: 72vh;
    min-height: 480px;
    background: var(--bsd-n-0, #ffffff);
    border: 1px solid #dbe5f1;
    border-radius: 14px;
    box-shadow: 0 6px 20px rgba(15, 43, 82, 0.08);
    overflow: hidden;
}

.bsd-wa__list {
    width: 300px;
    flex: 0 0 300px;
    border-right: 1px solid var(--bsd-n-200);
    overflow-y: auto;
}

.bsd-wa__contact {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 12px 16px;
    cursor: pointer;
    border-bottom: 1px solid var(--bsd-n-100);
}

.bsd-wa__contact:hover { background: var(--bsd-n-50); }
.bsd-wa__contact.active { background: var(--bsd-brand-100); }

.bsd-wa__contact-name { font-weight: 600; color: var(--bsd-n-800); }
.bsd-wa__contact-preview {
    font-size: 12.5px;
    color: var(--bsd-n-500);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.bsd-wa__thread {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.bsd-wa__messages {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    background: var(--bsd-n-50);
}

.bsd-wa__bubble {
    max-width: 65%;
    padding: 8px 12px;
    border-radius: 12px;
    font-size: 13.5px;
    line-height: 1.4;
    box-shadow: var(--bsd-shadow-xs);
}

.bsd-wa__bubble--out {
    align-self: flex-end;
    background: var(--bsd-brand-500);
    color: var(--bsd-n-0, #ffffff);
    border-bottom-right-radius: 2px;
}

.bsd-wa__bubble--in {
    align-self: flex-start;
    background: var(--bsd-n-0, #ffffff);
    color: var(--bsd-n-800);
    border-bottom-left-radius: 2px;
}

.bsd-wa__bubble-meta {
    display: block;
    margin-top: 4px;
    font-size: 10.5px;
    opacity: 0.7;
}

.bsd-wa__composer {
    display: flex;
    gap: 8px;
    padding: 12px;
    border-top: 1px solid var(--bsd-n-200);
}

.bsd-wa__composer textarea {
    flex: 1 1 auto;
    resize: none;
    border: 1px solid var(--bsd-n-300);
    border-radius: 8px;
    padding: 8px 10px;
    font-size: 13.5px;
}

.bsd-wa__empty {
    margin: auto;
    color: var(--bsd-n-400);
    font-size: 13.5px;
}