/* ============================================================
   BEACON MVP — Bazaar at Night Design System
   ============================================================ */
:root {
    --b-bg: #181614;
    --b-surface: #211f1c;
    --b-surface-raised: #282522;
    --b-border: #302d29;
    --b-border-subtle: #2a2724;
    --b-amber: #C8956C;
    --b-amber-dim: #a07a58;
    --b-amber-glow: rgba(200, 149, 108, 0.15);
    --b-amber-glow-strong: rgba(200, 149, 108, 0.25);
    --b-copper: #A0522D;
    --b-copper-dim: #7a3e22;
    --b-sage: #7C9A72;
    --b-sage-dim: rgba(124, 154, 114, 0.15);
    --b-rust: #D1684E;
    --b-rust-dim: rgba(209, 104, 78, 0.15);
    --b-blue: #6B97BF;
    --b-blue-dim: rgba(107, 151, 191, 0.15);
    --b-purple: #9B7EB8;
    --b-purple-dim: rgba(155, 126, 184, 0.15);
    --b-text: #E8E4E0;
    --b-text-mid: #ADA79F;
    --b-text-dim: #99938A;
    --font-display: 'Sora', system-ui, -apple-system, sans-serif;
    --font-body: 'Inter', system-ui, -apple-system, sans-serif;
    --font-mono: 'JetBrains Mono', 'SF Mono', 'Cascadia Code', monospace;
    --radius: 10px;
    --radius-lg: 14px;
    --radius-sm: 6px;
    --shadow: 0 1px 3px rgba(0,0,0,0.3), 0 1px 2px rgba(0,0,0,0.2);
    --shadow-lg: 0 8px 24px rgba(0,0,0,0.4);
    --shadow-glow: 0 0 20px rgba(200, 149, 108, 0.08);
    --sidebar-width: 250px;
}

/* ============ COLORFUL THEME ============ */
[data-theme="colorful"] {
    --b-bg: #f0f2f5;
    --b-surface: #ffffff;
    --b-surface-raised: #f8f9fa;
    --b-border: #e2e8f0;
    --b-border-subtle: #edf2f7;
    --b-amber: #f59e0b;
    --b-amber-dim: #d97706;
    --b-amber-glow: rgba(245, 158, 11, 0.1);
    --b-amber-glow-strong: rgba(245, 158, 11, 0.2);
    --b-copper: #ea580c;
    --b-copper-dim: rgba(234, 88, 12, 0.1);
    --b-sage: #10b981;
    --b-sage-dim: rgba(16, 185, 129, 0.1);
    --b-rust: #ef4444;
    --b-rust-dim: rgba(239, 68, 68, 0.1);
    --b-blue: #3b82f6;
    --b-blue-dim: rgba(59, 130, 246, 0.1);
    --b-purple: #8b5cf6;
    --b-purple-dim: rgba(139, 92, 246, 0.1);
    --b-text: #1e293b;
    --b-text-mid: #64748b;
    --b-text-dim: #94a3b8;
    --shadow: 0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.06);
    --shadow-lg: 0 10px 25px rgba(0,0,0,0.1);
    --shadow-glow: 0 0 20px rgba(245, 158, 11, 0.08);
}
[data-theme="colorful"] .beacon-nav-item:hover { background: rgba(0,0,0,0.04); }
[data-theme="colorful"] .beacon-nav-item.active { background: var(--b-amber-glow); color: var(--b-amber); }
[data-theme="colorful"] .beacon-table tbody tr:hover { background: rgba(0,0,0,0.02); }
[data-theme="colorful"] .beacon-logo-dot { animation-name: beaconPulseColorful; }
@keyframes beaconPulseColorful {
    0%, 100% { opacity: 1; transform: scale(1); box-shadow: 0 0 8px currentColor; }
    50% { opacity: 0.6; transform: scale(0.85); box-shadow: 0 0 16px currentColor; }
}
[data-theme="colorful"] .beacon-stat-card { border-left-width: 4px; }
[data-theme="colorful"] .beacon-hero-card { border-left-width: 4px; }
[data-theme="colorful"] .beacon-panel { box-shadow: var(--shadow); }
[data-theme="colorful"] .beacon-filter-bar { box-shadow: var(--shadow); }
[data-theme="colorful"] .beacon-section-tabs { box-shadow: var(--shadow); }
[data-theme="colorful"] .beacon-table-container { box-shadow: var(--shadow); }
[data-theme="colorful"] .beacon-topbar { box-shadow: 0 1px 3px rgba(0,0,0,0.05); }
[data-theme="colorful"] .beacon-badge { font-weight: 700; }
[data-theme="colorful"] .beacon-alert-danger { border-left: 3px solid var(--b-rust); }
[data-theme="colorful"] .beacon-alert-warning { border-left: 3px solid var(--b-amber); }
[data-theme="colorful"] .beacon-alert-info { border-left: 3px solid var(--b-blue); }
[data-theme="colorful"] .beacon-btn-primary { box-shadow: 0 2px 8px rgba(245, 158, 11, 0.3); }
[data-theme="colorful"] .beacon-btn-primary:hover { box-shadow: 0 4px 16px rgba(245, 158, 11, 0.4); }
[data-theme="colorful"] ::-webkit-scrollbar-thumb { background: #cbd5e1; }
[data-theme="colorful"] ::-webkit-scrollbar-thumb:hover { background: #94a3b8; }

*, *::before, *::after { box-sizing: border-box; }
body.beacon-dashboard-body {
    margin: 0; background: var(--b-bg); color: var(--b-text);
    font-family: var(--font-body);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ============ LOGIN ============ */
.beacon-login-body {
    background: var(--b-bg); min-height: 100vh;
    display: flex; align-items: center; justify-content: center;
    margin: 0; font-family: var(--font-body);
}
.beacon-login-wrapper { width: 100%; max-width: 400px; padding: 20px; }
.beacon-login-card {
    background: var(--b-surface); border: 1px solid var(--b-border);
    border-radius: var(--radius-lg); padding: 40px 36px;
    box-shadow: var(--shadow-lg);
}
.beacon-login-logo { text-align: center; margin-bottom: 36px; }
.beacon-logo-icon { display: inline-flex; gap: 6px; margin-bottom: 16px; }
.beacon-logo-dot {
    width: 14px; height: 14px; border-radius: 50%;
    background: var(--b-amber); display: inline-block;
    animation: beaconPulse 2s ease-in-out infinite;
}
.beacon-logo-dot:nth-child(2) { background: var(--b-sage); animation-delay: 0.3s; }
.beacon-logo-dot:nth-child(3) { background: var(--b-copper); animation-delay: 0.6s; }
@keyframes beaconPulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.5; transform: scale(0.85); }
}
.beacon-login-logo h1 {
    font-family: var(--font-display); font-size: 22px; font-weight: 600;
    color: var(--b-text); margin: 0; letter-spacing: -0.3px;
}
.beacon-login-logo p { color: var(--b-text-mid); font-size: 13px; margin: 8px 0 0; }
.beacon-form-group { margin-bottom: 20px; }
.beacon-form-group label {
    display: block; font-size: 12px; font-weight: 600;
    color: var(--b-text-mid); margin-bottom: 8px;
    text-transform: uppercase; letter-spacing: 0.5px;
}
.beacon-form-group input[type="password"],
.beacon-form-group input[type="text"] {
    width: 100%; padding: 12px 16px; border: 1px solid var(--b-border);
    border-radius: var(--radius-sm); font-size: 18px; text-align: center;
    letter-spacing: 8px; outline: none; transition: all 0.2s;
    box-sizing: border-box; background: var(--b-bg); color: var(--b-text);
    font-family: var(--font-mono);
}
.beacon-form-group input::placeholder { color: var(--b-text-dim); }
.beacon-form-group input:focus {
    border-color: var(--b-amber);
    box-shadow: 0 0 0 3px var(--b-amber-glow);
}
.beacon-login-error {
    background: var(--b-rust-dim); color: var(--b-rust);
    padding: 10px 14px; border-radius: var(--radius-sm);
    font-size: 13px; margin-bottom: 16px;
}
/* ============ BUTTONS ============ */
.beacon-btn {
    display: inline-flex; align-items: center; justify-content: center;
    gap: 8px; padding: 10px 20px; border-radius: var(--radius-sm);
    font-size: 13px; font-weight: 600; font-family: var(--font-body);
    border: none; cursor: pointer; transition: all 0.2s; letter-spacing: 0.1px;
}
.beacon-btn-primary { background: var(--b-amber); color: var(--b-bg); }
.beacon-btn-primary:hover { background: #d4a27a; box-shadow: 0 4px 16px rgba(200,149,108,0.3); }
.beacon-btn-outline { background: transparent; border: 1px solid var(--b-border); color: var(--b-text-mid); }
.beacon-btn-outline:hover { background: var(--b-surface-raised); border-color: var(--b-text-dim); color: var(--b-text); }
.beacon-btn-block { width: 100%; padding: 14px; font-size: 14px; }
.beacon-btn-sm { padding: 6px 12px; font-size: 12px; }
.beacon-btn-danger { border-color: var(--b-rust); color: var(--b-rust); }
.beacon-btn-danger:hover { background: var(--b-rust); color: var(--b-text); }
.beacon-login-footer { text-align: center; margin-top: 24px; }
.beacon-login-footer p { font-size: 12px; color: var(--b-text-dim); }

/* ============ DASHBOARD LAYOUT ============ */
.beacon-dashboard { display: flex; min-height: 100vh; background: var(--b-bg); font-family: var(--font-body); }
.beacon-sidebar {
    position: fixed; top: 0; bottom: 0; left: 0; width: var(--sidebar-width);
    background: var(--b-surface); border-right: 1px solid var(--b-border);
    color: var(--b-text-mid); display: flex; flex-direction: column;
    z-index: 100; transition: transform 0.3s ease;
}
.beacon-sidebar-header { padding: 20px 16px; border-bottom: 1px solid var(--b-border-subtle); }
.beacon-sidebar-logo { display: flex; align-items: center; gap: 10px; }
.beacon-sidebar-brand { font-family: var(--font-display); font-size: 17px; font-weight: 600; color: var(--b-text); letter-spacing: -0.3px; }
.beacon-sidebar-brand em {
    color: var(--b-amber); font-style: normal; background: var(--b-amber-glow);
    padding: 2px 8px; border-radius: 4px; font-size: 10px; font-weight: 700;
    letter-spacing: 0.5px; text-transform: uppercase; margin-left: 4px;
}
.beacon-sidebar-nav { flex: 1; padding: 12px 8px; overflow-y: auto; }
.beacon-nav-item {
    display: flex; align-items: center; gap: 10px; padding: 10px 12px;
    border-radius: var(--radius-sm); color: var(--b-text-mid);
    text-decoration: none; font-size: 13px; font-weight: 500;
    transition: all 0.15s; margin-bottom: 2px;
}
.beacon-nav-item:hover { background: rgba(255,255,255,0.04); color: var(--b-text); text-decoration: none; }
.beacon-nav-item.active { background: var(--b-amber-glow); color: var(--b-amber); font-weight: 600; }
.beacon-nav-icon { width: 18px; height: 18px; flex-shrink: 0; background-size: contain; background-repeat: no-repeat; background-position: center; opacity: 0.6; }
.beacon-nav-item:hover .beacon-nav-icon { opacity: 0.85; }
.beacon-nav-item.active .beacon-nav-icon { opacity: 1; }
.beacon-nav-label { white-space: nowrap; }

/* Sidebar Icons */
.beacon-icon-dashboard { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239A9590' stroke-width='2'%3E%3Crect x='3' y='3' width='7' height='9' rx='1'/%3E%3Crect x='14' y='3' width='7' height='5' rx='1'/%3E%3Crect x='14' y='12' width='7' height='9' rx='1'/%3E%3Crect x='3' y='16' width='7' height='5' rx='1'/%3E%3C/svg%3E"); }
.beacon-icon-inventory { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239A9590' stroke-width='2'%3E%3Cpath d='M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z'/%3E%3Cpolyline points='3.27 6.96 12 12.01 20.73 6.96'/%3E%3Cline x1='12' y1='22.08' x2='12' y2='12'/%3E%3C/svg%3E"); }
.beacon-icon-sales { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239A9590' stroke-width='2'%3E%3Cline x1='18' y1='20' x2='18' y2='10'/%3E%3Cline x1='12' y1='20' x2='12' y2='4'/%3E%3Cline x1='6' y1='20' x2='6' y2='14'/%3E%3C/svg%3E"); }
.beacon-icon-ads { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239A9590' stroke-width='2'%3E%3Cpath d='M12 2v4M12 18v4M4.93 4.93l2.83 2.83M16.24 16.24l2.83 2.83M2 12h4M18 12h4M4.93 19.07l2.83-2.83M16.24 7.76l2.83-2.83'/%3E%3C/svg%3E"); }
.beacon-icon-finance { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239A9590' stroke-width='2'%3E%3Crect x='2' y='5' width='20' height='14' rx='2'/%3E%3Cline x1='2' y1='10' x2='22' y2='10'/%3E%3C/svg%3E"); }
.beacon-icon-upload { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239A9590' stroke-width='2'%3E%3Cpath d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4'/%3E%3Cpolyline points='17 8 12 3 7 8'/%3E%3Cline x1='12' y1='3' x2='12' y2='15'/%3E%3C/svg%3E"); }
.beacon-icon-ai { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239A9590' stroke-width='2'%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath d='M12 1v4M12 19v4M4.22 4.22l2.83 2.83M16.95 16.95l2.83 2.83M1 12h4M19 12h4M4.22 19.78l2.83-2.83M16.95 7.05l2.83-2.83'/%3E%3C/svg%3E"); }
.beacon-icon-admin { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239A9590' stroke-width='2'%3E%3Cpath d='M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cpath d='M23 21v-2a4 4 0 0 0-3-3.87M16 3.13a4 4 0 0 1 0 7.75'/%3E%3C/svg%3E"); }
.beacon-icon-target { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239A9590' stroke-width='2'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Ccircle cx='12' cy='12' r='6'/%3E%3Ccircle cx='12' cy='12' r='2'/%3E%3C/svg%3E"); }

/* Sidebar Footer */
.beacon-sidebar-footer { padding: 12px; border-top: 1px solid var(--b-border-subtle); }
.beacon-user-info { display: flex; align-items: center; gap: 10px; }
.beacon-user-avatar {
    width: 34px; height: 34px; border-radius: 50%;
    background: var(--b-amber-glow); color: var(--b-amber);
    display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 13px; flex-shrink: 0;
}
.beacon-user-details { flex: 1; min-width: 0; }
.beacon-user-name { display: block; color: var(--b-text); font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.beacon-user-role { display: block; font-size: 11px; color: var(--b-text-dim); text-transform: uppercase; letter-spacing: 0.5px; margin-top: 1px; }
.beacon-logout-btn { background: transparent; border: none; color: var(--b-text-dim); cursor: pointer; padding: 6px; border-radius: var(--radius-sm); display: flex; transition: all 0.2s; }
.beacon-logout-btn:hover { background: var(--b-rust-dim); color: var(--b-rust); }
.beacon-main { flex: 1; min-width: 0; margin-left: var(--sidebar-width); overflow: hidden; }
.beacon-topbar { display: flex; align-items: center; padding: 14px 28px; background: var(--b-surface); border-bottom: 1px solid var(--b-border); position: sticky; top: 0; z-index: 50; gap: 16px; }
.beacon-mobile-toggle { display: none; }
.beacon-topbar-search { flex: 1; }
.beacon-seller-selector { min-width: 220px; max-width: 320px; }
.beacon-select { width: 100%; padding: 8px 12px; border: 1px solid var(--b-border); border-radius: var(--radius-sm); background: var(--b-bg); font-size: 13px; font-family: var(--font-body); color: var(--b-text); outline: none; transition: border-color 0.2s; appearance: auto; }
.beacon-select:focus { border-color: var(--b-amber); box-shadow: 0 0 0 2px var(--b-amber-glow); }
.beacon-topbar-actions { margin-left: auto; }
.beacon-topbar-date { font-size: 12px; color: var(--b-text-dim); font-weight: 500; font-family: var(--font-mono); letter-spacing: 0.2px; }
.beacon-content { padding: 28px; max-width: 1600px; margin: 0 auto; }
/* ============ PAGE HEADER ============ */
.beacon-page-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px; }
.beacon-page-title { font-family: var(--font-display); font-size: 24px; font-weight: 600; color: var(--b-text); margin: 0; letter-spacing: -0.3px; }
.beacon-page-subtitle { color: var(--b-text-dim); margin: 4px 0 0; font-size: 13px; }
.beacon-page-actions { display: flex; gap: 8px; }

/* ============ FILTER BAR ============ */
.beacon-filter-bar { display: flex; flex-wrap: wrap; gap: 16px; background: var(--b-surface); padding: 14px 18px; border-radius: var(--radius); border: 1px solid var(--b-border); margin-bottom: 24px; }
.beacon-filter-group { min-width: 140px; }
.beacon-filter-group label { display: block; font-size: 11px; font-weight: 600; color: var(--b-text-dim); margin-bottom: 6px; text-transform: uppercase; letter-spacing: 0.5px; }
.beacon-filter-group .beacon-select, .beacon-filter-group .beacon-input { min-width: 160px; }
.beacon-input { padding: 8px 12px; border: 1px solid var(--b-border); border-radius: var(--radius-sm); font-size: 13px; font-family: var(--font-body); outline: none; transition: border-color 0.2s; background: var(--b-bg); color: var(--b-text); }
.beacon-input::placeholder { color: var(--b-text-dim); }
.beacon-input:focus { border-color: var(--b-amber); box-shadow: 0 0 0 2px var(--b-amber-glow); }

/* ============ TABS ============ */
.beacon-section-tabs { display: flex; gap: 2px; background: var(--b-surface); padding: 4px; border-radius: var(--radius); border: 1px solid var(--b-border); margin-bottom: 24px; width: fit-content; }
.beacon-tab-btn { padding: 9px 18px; border: none; background: transparent; border-radius: var(--radius-sm); font-size: 13px; font-weight: 600; font-family: var(--font-body); color: var(--b-text-dim); cursor: pointer; transition: all 0.15s; }
.beacon-tab-btn:hover { color: var(--b-text-mid); }
.beacon-tab-btn.active { background: var(--b-surface-raised); color: var(--b-amber); box-shadow: var(--shadow); }
.beacon-tab-content { display: none; }
.beacon-tab-content.beacon-tab-active { display: block; }

/* ============ STAT CARDS ============ */
.beacon-stat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; margin-bottom: 24px; }
.beacon-stat-card { background: var(--b-surface); border: 1px solid var(--b-border); border-radius: var(--radius); padding: 18px; display: flex; align-items: center; gap: 14px; transition: all 0.2s; border-left: 3px solid var(--b-border); }
.beacon-stat-card:hover { border-color: var(--b-amber-dim); box-shadow: var(--shadow-glow); }
.beacon-stat-green { border-left-color: var(--b-sage); }
.beacon-stat-red { border-left-color: var(--b-rust); }
.beacon-stat-blue { border-left-color: var(--b-blue); }
.beacon-stat-purple { border-left-color: var(--b-purple); }
.beacon-stat-orange { border-left-color: var(--b-amber); }
.beacon-stat-icon { width: 42px; height: 42px; border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; flex-shrink: 0; background: var(--b-bg); border: 1px solid var(--b-border-subtle); }
.beacon-stat-green .beacon-stat-icon { background: var(--b-sage-dim); border-color: transparent; }
.beacon-stat-red .beacon-stat-icon { background: var(--b-rust-dim); border-color: transparent; }
.beacon-stat-blue .beacon-stat-icon { background: var(--b-blue-dim); border-color: transparent; }
.beacon-stat-purple .beacon-stat-icon { background: var(--b-purple-dim); border-color: transparent; }
.beacon-stat-orange .beacon-stat-icon { background: var(--b-amber-glow); border-color: transparent; }
.beacon-stat-icon span { width: 20px; height: 20px; display: block; background-size: contain; background-repeat: no-repeat; background-position: center; }
.beacon-stat-info { min-width: 0; }
.beacon-stat-value { font-family: var(--font-display); font-size: 20px; font-weight: 600; color: var(--b-text); letter-spacing: -0.3px; }
.beacon-stat-label { font-size: 11px; color: var(--b-text-dim); margin-top: 2px; text-transform: uppercase; letter-spacing: 0.4px; font-weight: 500; }
.beacon-stat-sub { font-size: 11px; color: var(--b-text-dim); margin-top: 2px; }
.beacon-stat-stock { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237C9A72' stroke-width='2'%3E%3Cpath d='M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z'/%3E%3Cpolyline points='3.27 6.96 12 12.01 20.73 6.96'/%3E%3Cline x1='12' y1='22.08' x2='12' y2='12'/%3E%3C/svg%3E"); }
.beacon-stat-no-stock { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23B54A32' stroke-width='2'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='15' y1='9' x2='9' y2='15'/%3E%3Cline x1='9' y1='9' x2='15' y2='15'/%3E%3C/svg%3E"); }
.beacon-stat-avg-stock, .beacon-stat-sku-avg, .beacon-stat-avg-price { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235B8DB8' stroke-width='2'%3E%3Cpath d='M3 3v18h18'/%3E%3Cpath d='M18 17V9M13 17V5M8 17v-3'/%3E%3C/svg%3E"); }
.beacon-stat-total-stock { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237C9A72' stroke-width='2'%3E%3Crect x='2' y='7' width='20' height='14' rx='2'/%3E%3Cpath d='M16 21V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16'/%3E%3C/svg%3E"); }
.beacon-stat-price { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C8956C' stroke-width='2'%3E%3Cline x1='12' y1='1' x2='12' y2='23'/%3E%3Cpath d='M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6'/%3E%3C/svg%3E"); }
.beacon-stat-edging, .beacon-stat-edging-pct { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C8956C' stroke-width='2'%3E%3Cpath d='M4 15s1-1 4-1 5 2 8 2 4-1 4-1V3s-1 1-4 1-5-2-8-2-4 1-4 1z'/%3E%3Cline x1='4' y1='22' x2='4' y2='15'/%3E%3C/svg%3E"); }
.beacon-stat-action { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23B54A32' stroke-width='2'%3E%3Cpolyline points='22 12 18 12 15 21 9 3 6 12 2 12'/%3E%3C/svg%3E"); }
.beacon-stat-sales, .beacon-stat-ov, .beacon-stat-uval { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237C9A72' stroke-width='2'%3E%3Cellipse cx='12' cy='5' rx='9' ry='3'/%3E%3Cpath d='M21 12c0 1.66-4 3-9 3s-9-1.34-9-3'/%3E%3Cpath d='M3 5v14c0 1.66 4 3 9 3s9-1.34 9-3V5'/%3E%3C/svg%3E"); }
.beacon-stat-orders { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235B8DB8' stroke-width='2'%3E%3Cpath d='M6 2 3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4z'/%3E%3Cline x1='3' y1='6' x2='21' y2='6'/%3E%3Cpath d='M16 10a4 4 0 0 1-8 0'/%3E%3C/svg%3E"); }
.beacon-stat-units, .beacon-stat-sold, .beacon-stat-nonsold { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239B7EB8' stroke-width='2'%3E%3Cpath d='M16 11V7a4 4 0 0 0-8 0v4'/%3E%3Crect x='3' y='11' width='18' height='11' rx='2'/%3E%3C/svg%3E"); }
.beacon-stat-sessions, .beacon-stat-views, .beacon-stat-pvrate { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235B8DB8' stroke-width='2'%3E%3Cpath d='M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E"); }
.beacon-stat-conv { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237C9A72' stroke-width='2'%3E%3Cpolyline points='22 7 13.5 15.5 8.5 10.5 2 17'/%3E%3Cpolyline points='16 7 22 7 22 13'/%3E%3C/svg%3E"); }
.beacon-stat-target-icon { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C8956C' stroke-width='2'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Ccircle cx='12' cy='12' r='6'/%3E%3Ccircle cx='12' cy='12' r='2'/%3E%3C/svg%3E"); background-size: contain; background-repeat: no-repeat; background-position: center; }
.beacon-stat-amazon { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235B8DB8' stroke-width='2'%3E%3Cpath d='M3 3h18v18H3z'/%3E%3Cpath d='M3 9h18M9 21V9'/%3E%3C/svg%3E"); }
.beacon-stat-noon { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C8956C' stroke-width='2'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpolyline points='12 6 12 12 16 14'/%3E%3C/svg%3E"); }
.beacon-export-only { display: none; }
.beacon-chart-body-wide { height: 300px; }
@media (max-width: 900px) {
    .beacon-chart-body-wide { height: 260px; }
}
.beacon-sales-charts-grid .beacon-chart-panel-wide { grid-column: 1 / -1; }
@media (max-width: 640px) {
    .beacon-charts-grid { grid-template-columns: 1fr; }
}
/* ============ TABLES ============ */
.beacon-table-container { 
    background: var(--b-surface); 
    border: 1px solid var(--b-border); 
    border-radius: var(--radius); 
    overflow-x: auto; 
    max-width: 100%; 
}
.beacon-table { 
    width: 100%; 
    min-width: 100%; 
    table-layout: fixed; 
    border-collapse: collapse; 
}
.beacon-table thead { background: var(--b-surface-raised); }
.beacon-table th {
    padding: 11px 14px; font-size: 11px; font-weight: 600;
    color: var(--b-text-dim); text-transform: uppercase; letter-spacing: 0.5px;
    text-align: left; border-bottom: 1px solid var(--b-border);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.beacon-table td {
    padding: 11px 14px; font-size: 13px; color: var(--b-text-mid);
    border-bottom: 1px solid var(--b-border-subtle); vertical-align: middle;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.beacon-table tbody tr { transition: background 0.1s; }
.beacon-table tbody tr:hover { background: rgba(255,255,255,0.02); }
.beacon-table tbody tr:last-child td { border-bottom: none; }
.beacon-table-seller { font-weight: 500; color: var(--b-amber); }
.beacon-table-sku { font-family: var(--font-mono); font-size: 12px; color: var(--b-text-mid); }
.beacon-table-actions { text-align: right; }
.beacon-table-actions button { background: transparent; border: 1px solid var(--b-border); color: var(--b-text-dim); padding: 4px 10px; border-radius: var(--radius-sm); font-size: 11px; cursor: pointer; transition: all 0.15s; font-family: var(--font-body); font-weight: 500; }
.beacon-table-actions button:hover { background: var(--b-surface-raised); color: var(--b-text); border-color: var(--b-text-dim); }

/* ============ BADGES ============ */
.beacon-badge { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 4px; font-size: 11px; font-weight: 600; letter-spacing: 0.2px; text-transform: uppercase; white-space: nowrap; }
.beacon-badge-amazon { background: var(--b-amber-glow); color: var(--b-amber); border: 1px solid rgba(200,149,108,0.2); }
.beacon-badge-noon { background: rgba(255,200,50,0.1); color: #F5C842; border: 1px solid rgba(255,200,50,0.2); }
.beacon-badge-morning { background: var(--b-sage-dim); color: var(--b-sage); border: 1px solid rgba(124,154,114,0.2); }
.beacon-badge-booth { background: var(--b-purple-dim); color: var(--b-purple); border: 1px solid rgba(155,126,184,0.2); }
.beacon-badge-healthy { background: var(--b-sage-dim); color: var(--b-sage); }
.beacon-badge-out { background: var(--b-rust-dim); color: var(--b-rust); }
.beacon-badge-critical { background: rgba(255,200,50,0.1); color: #F5C842; }
.beacon-badge-admin { background: var(--b-blue-dim); color: var(--b-blue); }
.beacon-badge-manager { background: var(--b-amber-glow); color: var(--b-amber); }
.beacon-badge-member { background: var(--b-sage-dim); color: var(--b-sage); }
.beacon-badge-active { background: var(--b-sage-dim); color: var(--b-sage); }
.beacon-badge-inactive { background: rgba(255,255,255,0.05); color: var(--b-text-dim); }
.beacon-badge-green { background: var(--b-sage-dim); color: var(--b-sage); }
.beacon-badge-orange { background: var(--b-amber-glow); color: var(--b-amber); }
.beacon-badge-red { background: var(--b-rust-dim); color: var(--b-rust); }
.beacon-badge-blue { background: var(--b-blue-dim); color: var(--b-blue); }

/* ============ MODAL OVERLAY (upload warning) ============ */
#beacon-modal-overlay.beacon-modal-overlay {
    position: fixed; inset: 0; background: rgba(0,0,0,0.6);
    display: none; align-items: center; justify-content: center;
    z-index: 1000; padding: 20px; backdrop-filter: blur(4px);
}
#beacon-modal-overlay.beacon-modal-overlay[style*="display: block"] { display: flex; }
#beacon-modal-overlay.beacon-modal-overlay .beacon-modal { background: var(--b-surface); border: 1px solid var(--b-border); border-radius: var(--radius-lg); width: 100%; max-width: 460px; box-shadow: var(--shadow-lg); }
#beacon-modal-overlay.beacon-modal-overlay .beacon-modal-body p { margin: 0 0 10px; font-size: 13px; }

/* ============ MODAL ============ */
.beacon-modal-backdrop {
    position: fixed; inset: 0; background: rgba(0,0,0,0.6);
    display: none; align-items: center; justify-content: center;
    z-index: 1000; padding: 20px; backdrop-filter: blur(4px);
}
.beacon-modal-backdrop.active { display: flex; }
.beacon-modal {
    background: var(--b-surface); border: 1px solid var(--b-border);
    border-radius: var(--radius-lg); width: 100%; max-width: 420px;
    box-shadow: var(--shadow-lg);
}
.beacon-modal-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 16px 20px; border-bottom: 1px solid var(--b-border-subtle);
}
.beacon-modal-title {
    font-family: var(--font-display); font-size: 16px; font-weight: 600;
    color: var(--b-text);
}
.beacon-modal-close {
    background: transparent; border: none; color: var(--b-text-dim);
    font-size: 18px; cursor: pointer; padding: 4px; line-height: 1;
    transition: color 0.15s;
}
.beacon-modal-close:hover { color: var(--b-text); }
.beacon-modal-body { padding: 20px; }
.beacon-form-group input[type="text"],
.beacon-form-group select { width: 100%; padding: 10px 12px; border: 1px solid var(--b-border); border-radius: var(--radius-sm); font-size: 13px; outline: none; transition: border-color 0.2s; box-sizing: border-box; background: var(--b-bg); color: var(--b-text); font-family: var(--font-body); }
.beacon-form-group input:focus,
.beacon-form-group select:focus { border-color: var(--b-amber); box-shadow: 0 0 0 2px var(--b-amber-glow); }
.beacon-form-group select[multiple] {
    min-height: 90px;
    background-image: none;
}
.beacon-modal-footer {
    display: flex; gap: 8px; justify-content: flex-end;
    padding: 16px 20px; border-top: 1px solid var(--b-border-subtle);
}
.beacon-modal-footer .beacon-btn-outline { padding: 8px 16px; font-size: 12px; }
.beacon-modal-footer .beacon-btn-primary { padding: 8px 16px; font-size: 12px; }

/* ============ SEARCH/ADD INPUT ============ */
.beacon-search-add {
    display: flex; gap: 8px; margin-bottom: 16px; align-items: center;
}
.beacon-search-add .beacon-input { flex: 1; max-width: 220px; }

/* ============ SPAN FULL WIDTH ============ */
.beacon-span-full { grid-column: 1 / -1; }

/* ============ DATA TABLE FULL WIDTH ============ */
.beacon-data-table-full { width: 100%; }

/* ============ QUICK STATS ============ */
.beacon-quick-stats { margin-bottom: 24px; }

/* ============ EMPTY STATE ============ */
.beacon-empty-state {
    text-align: center; padding: 60px 20px; color: var(--b-text-dim);
}
.beacon-empty-state p { margin-top: 8px; font-size: 14px; }
.beacon-empty-state a { color: var(--b-amber); text-decoration: none; font-weight: 500; }
.beacon-empty-state a:hover { text-decoration: underline; }

/* ============ CHARTS ============ */
.beacon-chart-container { width: 100%; max-height: 220px; }
.beacon-chart-container canvas { max-height: 220px; }
.beacon-chart-card { width: 100%; max-height: 220px; }
.beacon-chart-card canvas { max-height: 220px; width: 100% !important; }
.beacon-chart-section { margin-top: 16px; }
.beacon-chart-section h3 { font-size: 13px; font-weight: 600; color: var(--b-text-mid); margin: 0 0 8px; }
.beacon-chart-4 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 800px) { .beacon-chart-4 { grid-template-columns: 1fr; } }

/* ============ DATE RANGE PICKER ============ */
.beacon-date-range { display: flex; gap: 8px; align-items: center; }
.beacon-date-range input[type="date"] {
    padding: 8px 12px; border: 1px solid var(--b-border); border-radius: var(--radius-sm);
    font-size: 13px; outline: none; background: var(--b-bg); color: var(--b-text);
    font-family: var(--font-body);
}
.beacon-date-range input[type="date"]:focus { border-color: var(--b-amber); }
.beacon-date-range-sep { color: var(--b-text-dim); font-size: 12px; }

/* ============ UPLOAD ============ */
.beacon-upload-card {
    background: var(--b-surface); border: 2px dashed var(--b-border);
    border-radius: var(--radius); padding: 40px 24px; text-align: center;
    cursor: pointer; transition: all 0.2s;
}
.beacon-upload-card:hover { border-color: var(--b-amber-dim); background: var(--b-surface-raised); }
.beacon-upload-card p { margin: 0; color: var(--b-text-dim); font-size: 13px; }
.beacon-upload-card strong { color: var(--b-amber); }

/* ============ LOADING STATE ============ */
.beacon-loading {
    text-align: center; padding: 80px 20px; color: var(--b-text-dim);
    font-size: 13px; font-family: var(--font-body);
}
.beacon-loading::before {
    content: ''; display: block; width: 20px; height: 20px;
    border: 2px solid var(--b-border); border-top-color: var(--b-amber);
    border-radius: 50%; margin: 0 auto 12px; animation: beaconSpin 0.8s linear infinite;
}
@keyframes beaconSpin { to { transform: rotate(360deg); } }

/* ============ MOBILE NAV OVERLAY ============ */
.beacon-nav-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 99; }
.beacon-nav-overlay.active { display: block; }

/* ============ SCROLLBAR ============ */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--b-border); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--b-text-dim); }

/* ============ SELLER MANAGEMENT CARDS ============ */
.beacon-card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; margin-bottom: 24px; }
.beacon-card {
    background: var(--b-surface); border: 1px solid var(--b-border);
    border-radius: var(--radius); padding: 18px;
}
.beacon-card-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.beacon-card-title { font-family: var(--font-display); font-size: 15px; font-weight: 600; color: var(--b-text); }
.beacon-card-detail { font-size: 12px; color: var(--b-text-dim); margin: 4px 0; }
.beacon-card-detail strong { color: var(--b-text-mid); }
.beacon-card-actions { display: flex; gap: 8px; margin-top: 14px; }
.beacon-card-actions .beacon-btn-sm { font-size: 11px; padding: 5px 10px; }

/* ============ PROVIDER MULTI SELECT HELPER ============ */
.beacon-form-group .beacon-help { font-size: 11px; color: var(--b-text-dim); margin-top: 4px; }

/* ============ DASHBOARD HERO CARDS ============ */
.beacon-dashboard-hero {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 14px;
    margin-bottom: 20px;
}
.beacon-hero-card {
    background: var(--b-surface);
    border: 1px solid var(--b-border);
    border-radius: var(--radius);
    padding: 18px;
    display: flex;
    align-items: flex-start;
    gap: 14px;
    transition: all 0.2s;
    border-left: 3px solid var(--b-border);
}
.beacon-hero-card:hover {
    box-shadow: var(--shadow-glow);
}
.beacon-hero-green { border-left-color: var(--b-sage); }
.beacon-hero-blue { border-left-color: var(--b-blue); }
.beacon-hero-amber { border-left-color: var(--b-amber); }
.beacon-hero-sage { border-left-color: var(--b-sage); }
.beacon-hero-rust { border-left-color: var(--b-rust); }
.beacon-hero-card-icon {
    width: 38px;
    height: 38px;
    border-radius: var(--radius-sm);
    flex-shrink: 0;
    background-size: 20px;
    background-repeat: no-repeat;
    background-position: center;
}
.beacon-hero-green .beacon-hero-card-icon { background-color: var(--b-sage-dim); }
.beacon-hero-blue .beacon-hero-card-icon { background-color: var(--b-blue-dim); }
.beacon-hero-amber .beacon-hero-card-icon { background-color: var(--b-amber-glow); }
.beacon-hero-sage .beacon-hero-card-icon { background-color: var(--b-sage-dim); }
.beacon-hero-rust .beacon-hero-card-icon { background-color: var(--b-rust-dim); }
.beacon-hero-icon-revenue { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237C9A72' stroke-width='2'%3E%3Cellipse cx='12' cy='5' rx='9' ry='3'/%3E%3Cpath d='M21 12c0 1.66-4 3-9 3s-9-1.34-9-3'/%3E%3Cpath d='M3 5v14c0 1.66 4 3 9 3s9-1.34 9-3V5'/%3E%3C/svg%3E"); }
.beacon-hero-icon-orders { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235B8DB8' stroke-width='2'%3E%3Cpath d='M6 2 3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4z'/%3E%3Cline x1='3' y1='6' x2='21' y2='6'/%3E%3Cpath d='M16 10a4 4 0 0 1-8 0'/%3E%3C/svg%3E"); }
.beacon-hero-icon-stock { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C8956C' stroke-width='2'%3E%3Crect x='2' y='7' width='20' height='14' rx='2'/%3E%3Cpath d='M16 21V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16'/%3E%3C/svg%3E"); }
.beacon-hero-icon-conversion { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237C9A72' stroke-width='2'%3E%3Cpolyline points='22 7 13.5 15.5 8.5 10.5 2 17'/%3E%3Cpolyline points='16 7 22 7 22 13'/%3E%3C/svg%3E"); }
.beacon-hero-icon-on-track { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237C9A72' stroke-width='2'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpolyline points='9 12 11.5 14.5 15.5 10'/%3E%3C/svg%3E"); }
.beacon-hero-icon-caution { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C8956C' stroke-width='2'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='12' y1='8' x2='12' y2='12'/%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'/%3E%3C/svg%3E"); }
.beacon-hero-icon-off-track { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23B54A32' stroke-width='2'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='15' y1='9' x2='9' y2='15'/%3E%3Cline x1='9' y1='9' x2='15' y2='15'/%3E%3C/svg%3E"); }
.beacon-hero-card-body { min-width: 0; }
.beacon-hero-label {
    display: block;
    font-size: 11px;
    color: var(--b-text-dim);
    text-transform: uppercase;
    letter-spacing: 0.4px;
    font-weight: 500;
    margin-bottom: 4px;
}
.beacon-hero-value {
    font-family: var(--font-display);
    font-size: 22px;
    font-weight: 600;
    color: var(--b-text);
    letter-spacing: -0.3px;
    display: block;
}
.beacon-hero-change {
    display: block;
    font-size: 11px;
    margin-top: 4px;
    font-weight: 500;
}
.beacon-change-up { color: var(--b-sage); }
.beacon-change-down { color: var(--b-rust); }
.beacon-hero-status {
    display: inline-block;
    font-size: 11px;
    margin-top: 4px;
    padding: 2px 8px;
    border-radius: 4px;
    font-weight: 600;
}
.beacon-status-good { background: var(--b-sage-dim); color: var(--b-sage); }
.beacon-status-caution { background: rgba(200, 149, 108, 0.15); color: var(--b-amber); }
.beacon-status-bad { background: var(--b-rust-dim); color: var(--b-rust); }
.beacon-status-neutral { background: rgba(120, 130, 140, 0.12); color: var(--b-text-dim); }
.beacon-text-rust { color: var(--b-rust) !important; }

/* ============ DATA FOOTER ============ */
.beacon-data-footer {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 28px;
    padding-top: 14px;
    border-top: 1px solid var(--b-border);
    font-size: 12px;
    color: var(--b-text-dim);
}
.beacon-data-footer-sep { opacity: 0.5; }

/* ============ ALERTS BAR ============ */
.beacon-alerts-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 20px;
}
.beacon-alert {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border-radius: var(--radius-sm);
    font-size: 12px;
    font-weight: 500;
    border: 1px solid transparent;
}
.beacon-alert-danger {
    background: var(--b-rust-dim);
    color: var(--b-rust);
    border-color: rgba(181, 74, 50, 0.2);
}
.beacon-alert-warning {
    background: rgba(200, 149, 108, 0.12);
    color: var(--b-amber);
    border-color: rgba(200, 149, 108, 0.2);
}
.beacon-alert-info {
    background: var(--b-blue-dim);
    color: var(--b-blue);
    border-color: rgba(91, 141, 184, 0.2);
}
.beacon-alert-icon {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}
.beacon-alert-icon-out-of-stock { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23B54A32' stroke-width='2'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='15' y1='9' x2='9' y2='15'/%3E%3Cline x1='9' y1='9' x2='15' y2='15'/%3E%3C/svg%3E"); }
.beacon-alert-icon-risky { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C8956C' stroke-width='2'%3E%3Cpath d='M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z'/%3E%3Cline x1='12' y1='9' x2='12' y2='13'/%3E%3Cline x1='12' y1='17' x2='12.01' y2='17'/%3E%3C/svg%3E"); }
.beacon-alert-icon-no-data { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235B8DB8' stroke-width='2'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='12' y1='16' x2='12' y2='12'/%3E%3Cline x1='12' y1='8' x2='12.01' y2='8'/%3E%3C/svg%3E"); }

/* ============ CHARTS ROW LAYOUT ============ */
.beacon-dash-charts-row {
    display: grid;
    grid-template-columns: 1.8fr 1fr;
    gap: 14px;
    margin-bottom: 14px;
}
.beacon-dash-charts-row:nth-child(even) {
    grid-template-columns: 1fr 1fr;
}
.beacon-dash-chart-main .beacon-panel,
.beacon-dash-chart-side .beacon-panel,
.beacon-dash-chart-half .beacon-panel {
    height: 100%;
}
.beacon-panel-title-insight {
    color: var(--b-text) !important;
    font-size: 14px !important;
    font-weight: 500 !important;
}

/* ============ CHART CONTAINERS ============ */
.beacon-chart-tall { height: 240px; }
.beacon-chart-square { height: 220px; }
.beacon-chart-tall canvas,
.beacon-chart-square canvas { width: 100% !important; height: 100% !important; }

/* ============ SNAPSHOT ROW ============ */
.beacon-dash-snapshot-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin-bottom: 14px;
}
.beacon-dash-snapshot-col .beacon-mini-stats {
    margin-bottom: 0;
}

/* ============ PANEL TWEAKS ============ */
.beacon-panel {
    background: var(--b-surface);
    border: 1px solid var(--b-border);
    border-radius: var(--radius);
    padding: 18px;
}
.beacon-panel-title {
    font-family: var(--font-display);
    font-size: 13px;
    font-weight: 600;
    color: var(--b-text-mid);
    margin: 0 0 14px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}
.beacon-mini-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}
.beacon-mini-stats div {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.beacon-mini-stats span {
    font-size: 11px;
    color: var(--b-text-dim);
    text-transform: uppercase;
    letter-spacing: 0.3px;
    font-weight: 500;
}
.beacon-mini-stats strong {
    font-family: var(--font-display);
    font-size: 17px;
    font-weight: 600;
    color: var(--b-text);
    letter-spacing: -0.2px;
}

/* ============ RESPONSIVE ============ */
@media (max-width: 900px) {
    .beacon-sidebar { transform: translateX(-100%); }
    .beacon-sidebar.open { transform: translateX(0); }
    .beacon-main { margin-left: 0; }
    .beacon-topbar { padding: 12px 16px; }
    .beacon-content { padding: 16px; }
    .beacon-page-header { flex-direction: column; align-items: flex-start; gap: 12px; }
    .beacon-page-actions { width: 100%; }
    .beacon-page-actions .beacon-btn-outline { flex: 1; }
    .beacon-mobile-toggle { display: flex; }
    .beacon-stat-grid { grid-template-columns: repeat(2, 1fr); }
    .beacon-dashboard-hero { grid-template-columns: repeat(2, 1fr); }
    .beacon-dash-charts-row { grid-template-columns: 1fr; }
    .beacon-dash-charts-row:nth-child(even) { grid-template-columns: 1fr; }
    .beacon-dash-snapshot-row { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
    .beacon-stat-grid { grid-template-columns: 1fr; }
    .beacon-stat-card { flex-direction: column; align-items: flex-start; text-align: left; }
    .beacon-dashboard-hero { grid-template-columns: 1fr; }
    .beacon-hero-card { flex-direction: column; gap: 10px; }
    .beacon-alerts-bar { flex-direction: column; }
}

/* ============ THEME PICKER ============ */
.beacon-theme-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 16px;
}
.beacon-theme-card {
    border: 2px solid var(--b-border);
    border-radius: var(--radius);
    overflow: hidden;
    cursor: pointer;
    transition: all 0.2s;
    background: var(--b-surface);
}
.beacon-theme-card:hover {
    border-color: var(--b-text-dim);
    box-shadow: var(--shadow-lg);
    transform: translateY(-2px);
}
.beacon-theme-card.beacon-theme-active {
    border-color: var(--b-amber);
    box-shadow: 0 0 0 3px var(--b-amber-glow), var(--shadow-lg);
}
.beacon-theme-preview {
    height: 140px;
    display: flex;
    overflow: hidden;
}
.beacon-tp-sidebar {
    width: 50px;
    flex-shrink: 0;
}
.beacon-tp-content {
    flex: 1;
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.beacon-tp-bar {
    height: 14px;
    border-radius: 3px;
    width: 100%;
}
.beacon-tp-cards {
    display: flex;
    gap: 6px;
    flex: 1;
}
.beacon-tp-card {
    flex: 1;
    border-radius: 4px;
}

/* Dark Theme Preview */
.beacon-theme-preview-dark { background: #181614; }
.beacon-theme-preview-dark .beacon-tp-sidebar { background: #211f1c; border-right: 1px solid #302d29; }
.beacon-theme-preview-dark .beacon-tp-bar { background: #282522; border: 1px solid #302d29; }
.beacon-theme-preview-dark .beacon-tp-card { background: #211f1c; border: 1px solid #302d29; }
.beacon-theme-preview-dark .beacon-tp-card:nth-child(1) { border-left: 3px solid #7C9A72; }
.beacon-theme-preview-dark .beacon-tp-card:nth-child(2) { border-left: 3px solid #5B8DB8; }
.beacon-theme-preview-dark .beacon-tp-card:nth-child(3) { border-left: 3px solid #C8956C; }

/* Colorful Theme Preview */
.beacon-theme-preview-colorful { background: #f0f2f5; }
.beacon-theme-preview-colorful .beacon-tp-sidebar { background: #ffffff; border-right: 1px solid #e2e8f0; }
.beacon-theme-preview-colorful .beacon-tp-bar { background: #ffffff; border: 1px solid #e2e8f0; }
.beacon-theme-preview-colorful .beacon-tp-card { background: #ffffff; border: 1px solid #e2e8f0; }
.beacon-theme-preview-colorful .beacon-tp-card:nth-child(1) { border-left: 4px solid #10b981; }
.beacon-theme-preview-colorful .beacon-tp-card:nth-child(2) { border-left: 4px solid #3b82f6; }
.beacon-theme-preview-colorful .beacon-tp-card:nth-child(3) { border-left: 4px solid #f59e0b; }

.beacon-theme-info {
    padding: 14px 16px;
}
.beacon-theme-info h3 {
    margin: 0 0 4px;
    font-family: var(--font-display);
    font-size: 14px;
    font-weight: 600;
    color: var(--b-text);
}
.beacon-theme-info p {
    margin: 0;
    font-size: 12px;
    color: var(--b-text-dim);
}
.beacon-theme-active .beacon-theme-info h3 {
    color: var(--b-amber);
}

/* ============ FORM FIELDS ============ */
.beacon-form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 12px;
}
.beacon-form-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.beacon-form-field > label {
    font-size: 12px;
    font-weight: 600;
    color: var(--b-text-mid);
    letter-spacing: 0.2px;
}
.beacon-period-fields {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 8px;
    align-items: center;
}
.beacon-period-sep {
    font-size: 12px;
    color: var(--b-text-mid);
}
.beacon-period-fields .beacon-input {
    width: 100%;
}

/* ============ DATA UPLOAD CENTER ============ */
.beacon-upload-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
    gap: 16px;
    align-items: start;
}
.beacon-upload-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}
.beacon-upload-step {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.4px;
    color: var(--b-text-dim);
    text-transform: uppercase;
    background: var(--b-surface-raised);
    border: 1px solid var(--b-border);
    padding: 3px 9px;
    border-radius: 999px;
}
.beacon-upload-count {
    font-size: 11px;
    font-weight: 600;
    color: var(--b-text-dim);
    background: var(--b-surface-raised);
    border: 1px solid var(--b-border);
    padding: 3px 9px;
    border-radius: 999px;
}
.beacon-upload-dropzone {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 34px 20px;
    border: 2px dashed var(--b-border);
    border-radius: var(--radius);
    background: var(--b-surface-raised);
    cursor: pointer;
    text-align: center;
    transition: border-color 0.2s, background 0.2s, box-shadow 0.2s;
    -webkit-tap-highlight-color: transparent;
}
.beacon-upload-dropzone:hover {
    border-color: var(--b-amber-dim);
}
.beacon-upload-dropzone.dragover {
    border-color: var(--b-amber);
    background: var(--b-amber-glow);
    box-shadow: inset 0 0 0 3px var(--b-amber-glow);
}
.beacon-upload-dropzone.has-file {
    border-style: solid;
    border-color: var(--b-sage);
    background: var(--b-sage-dim);
}
.beacon-dropzone-icon {
    font-size: 34px;
    line-height: 1;
    opacity: 0.9;
}
.beacon-dropzone-title {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    color: var(--b-text);
}
.beacon-dropzone-sub {
    margin: 0;
    font-size: 12px;
    color: var(--b-text-dim);
}
.beacon-dropzone-browse {
    color: var(--b-amber);
    font-weight: 600;
}
.beacon-upload-dropzone.has-file .beacon-dropzone-icon,
.beacon-upload-dropzone.has-file .beacon-dropzone-title,
.beacon-upload-dropzone.has-file .beacon-dropzone-sub {
    display: none;
}
.beacon-file-input {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
    z-index: 1;
}
.beacon-file-info {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: 4px;
    flex-wrap: wrap;
    position: relative;
    z-index: 2;
    pointer-events: auto;
}
.beacon-file-info-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--b-sage);
    word-break: break-all;
    max-width: 100%;
}
.beacon-file-info .beacon-btn-sm {
    padding: 3px 10px;
    font-size: 11px;
    border-color: var(--b-border);
    color: var(--b-text-mid);
    background: var(--b-surface);
}
.beacon-upload-mapping-hint {
    margin-top: 12px;
    padding: 10px 12px;
    border-radius: var(--radius-sm);
    background: var(--b-blue-dim);
    border-left: 3px solid var(--b-blue);
    font-size: 12px;
    color: var(--b-text-mid);
    line-height: 1.5;
}
.beacon-upload-result {
    margin-top: 12px;
}
.beacon-upload-status {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    border-radius: var(--radius-sm);
    font-size: 13px;
    font-weight: 500;
    animation: beaconFadeIn 0.25s ease;
}
.beacon-upload-status .beacon-spinner {
    width: 16px;
    height: 16px;
    border-width: 2px;
    margin: 0;
}
.beacon-spinner {
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 2px solid var(--b-border);
    border-top-color: var(--b-amber);
    border-radius: 50%;
    animation: beaconSpin 0.8s linear infinite;
    flex: 0 0 auto;
}
.beacon-upload-success {
    background: var(--b-sage-dim);
    color: var(--b-sage);
}
.beacon-upload-error {
    background: var(--b-rust-dim);
    color: var(--b-rust);
}
.beacon-upload-side {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.beacon-uploads-scroll {
    max-height: 460px;
    overflow-y: auto;
    margin: 0 -18px -18px;
}
.beacon-uploads-scroll .beacon-table { min-width: 480px; }
.beacon-upload-file {
    font-weight: 500;
    color: var(--b-text);
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.beacon-upload-rows { text-align: right; font-variant-numeric: tabular-nums; }
.beacon-upload-date { white-space: nowrap; font-size: 12px; color: var(--b-text-dim); }
.beacon-uploads-empty { padding: 40px 16px; }
.beacon-uploads-empty-hint { font-size: 12px; color: var(--b-text-dim); margin-top: 4px; }
@keyframes beaconFadeIn {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 960px) {
    .beacon-upload-layout { grid-template-columns: 1fr; }
    .beacon-form-row { grid-template-columns: 1fr; }
}

/* ============ INVENTORY / SALES DASHBOARD ============ */
.beacon-inventory-sections,
.beacon-sales-sections { display: flex; flex-direction: column; gap: 24px; }

/* Filter chips */
.beacon-filter-group-wide { flex: 1 1 320px; }
.beacon-chip-group { display: flex; flex-wrap: wrap; gap: 6px; }
.beacon-chip {
    display: inline-flex;
    align-items: center;
    padding: 5px 12px;
    font-size: 12px;
    font-weight: 600;
    color: var(--b-text-mid);
    background: var(--b-surface-raised);
    border: 1px solid var(--b-border);
    border-radius: 20px;
    cursor: pointer;
    transition: all 0.15s;
    user-select: none;
}
.beacon-chip:hover { border-color: var(--b-amber); color: var(--b-text); }
.beacon-chip.active { background: var(--b-amber-glow); border-color: var(--b-amber); color: var(--b-amber); }
.beacon-filter-range { display: flex; align-items: center; gap: 8px; }
.beacon-filter-range .beacon-input { width: 100px; min-width: 0 !important; }
.beacon-filter-range .beacon-date-range-sep { color: var(--b-text-dim); }
.beacon-filter-actions .beacon-filter-btn-group { display: flex; gap: 8px; }

/* Charts grid */
.beacon-charts-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin-bottom: 24px; }
.beacon-chart-panel {
    background: var(--b-surface);
    border: 1px solid var(--b-border);
    border-radius: var(--radius);
    padding: 16px;
    min-width: 0;
}
.beacon-chart-panel-wide { grid-column: 1 / -1; }
.beacon-chart-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 14px; }
.beacon-chart-head h3 { font-family: var(--font-display); font-size: 15px; margin: 0; }
.beacon-chart-head p { margin: 3px 0 0; font-size: 12px; color: var(--b-text-dim); }
.beacon-chart-body { height: 240px; position: relative; }
.beacon-chart-body-tall { height: 320px; }
.beacon-chart-body canvas { max-height: 100%; }

/* Chart metric toggle */
.chart-toggle {
    display: inline-flex;
    background: var(--b-surface-raised);
    border: 1px solid var(--b-border);
    border-radius: 6px;
    overflow: hidden;
    flex-shrink: 0;
}
.chart-toggle button {
    padding: 5px 12px;
    font-size: 11px;
    font-weight: 700;
    color: var(--b-text-dim);
    background: transparent;
    border: none;
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}
.chart-toggle button + button { border-left: 1px solid var(--b-border); }
.chart-toggle button.active { background: var(--b-amber-glow); color: var(--b-amber); }

/* Sortable table headers */
.beacon-table th.beacon-table-sort { cursor: pointer; white-space: nowrap; }
.beacon-table th.beacon-table-sort:hover { color: var(--b-amber); }
.sort-indicator { display: inline-block; margin-left: 4px; font-size: 10px; color: var(--b-text-dim); }
.sort-indicator::after { content: '\2195'; }
th.sort-asc .sort-indicator::after { content: '\25B2'; color: var(--b-amber); }
th.sort-desc .sort-indicator::after { content: '\25BC'; color: var(--b-amber); }

/* Title cell truncation + expand toggle */
.beacon-cell-title { max-width: 280px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; }
.beacon-cell-title:hover { color: var(--b-amber); }
.beacon-cell-title.beacon-cell-title-expanded { white-space: normal; overflow: visible; word-break: break-word; }

/* Keep inventory and sales tables single-line and uniform so they stay the same size */
.beacon-inventory-sections .beacon-table th,
.beacon-inventory-sections .beacon-table td,
.beacon-sales-sections .beacon-table th,
.beacon-sales-sections .beacon-table td { white-space: nowrap; }
.beacon-inventory-sections .beacon-table td.beacon-cell-title.beacon-cell-title-expanded,
.beacon-sales-sections .beacon-table td.beacon-cell-title.beacon-cell-title-expanded { white-space: normal; overflow: visible; word-break: break-word; }

/* Table row pagination (show 10, expand/collapse) */
.beacon-table tbody tr.beacon-table-extra-row { display: none; }
.beacon-table.beacon-table-expanded tbody tr.beacon-table-extra-row { display: table-row; }
.beacon-table-toggle-bar { padding: 10px 12px; border-top: 1px solid var(--b-border); text-align: center; }
.beacon-table-toggle-bar .beacon-btn { font-size: 12px; }

/* Period comparison toggle + panel */
.beacon-compare-group { align-items: center; }
.beacon-switch { position: relative; display: inline-block; width: 40px; height: 22px; flex: 0 0 auto; cursor: pointer; }
.beacon-switch input { opacity: 0; width: 0; height: 0; position: absolute; }
.beacon-switch-slider { position: absolute; inset: 0; background: #3a362f; border: 1px solid var(--b-border); border-radius: 22px; transition: background 0.2s; }
.beacon-switch-slider::before { content: ""; position: absolute; height: 14px; width: 14px; left: 3px; top: 3px; background: var(--b-text-dim); border-radius: 50%; transition: transform 0.2s, background 0.2s; }
.beacon-switch input:checked + .beacon-switch-slider { background: var(--b-sage); border-color: var(--b-sage); }
.beacon-switch input:checked + .beacon-switch-slider::before { transform: translateX(18px); background: #fff; }
.beacon-switch input:disabled + .beacon-switch-slider { opacity: 0.5; cursor: not-allowed; }
.beacon-compare-from { width: 170px; margin-left: 8px; }
.beacon-compare-from:disabled { opacity: 0.45; cursor: not-allowed; }
.beacon-compare-panel { margin-top: 16px; }
.beacon-compare-caption { color: var(--b-text-dim); font-size: 12px; margin: 0 0 12px; }
.beacon-compare-caption b { color: var(--b-text-mid); font-weight: 600; }
.beacon-change-flat { color: var(--b-text-dim); }

@media (max-width: 900px) {
    .beacon-charts-grid { grid-template-columns: 1fr; }
    .beacon-chart-panel-wide { grid-column: auto; }
    .beacon-filter-actions { width: 100%; }
}