/* Product-wide visual refresh: reference-driven blue/white enterprise BI UI. */
:root {
    --primary: #087bf5;
    --primary-light: #eaf4ff;
    --primary-dark: #0565cc;
    --primary-50: #f3f8ff;
    --primary-100: #dcecff;
    --primary-200: #b8d8ff;
    --primary-gradient: #087bf5;
    --success: #12b76a;
    --success-bg: #ecfdf3;
    --warning: #f79009;
    --warning-bg: #fff7e8;
    --danger: #f04438;
    --danger-bg: #fff1f0;
    --info: #087bf5;
    --info-bg: #eef6ff;
    --gray-50: #f8fafc;
    --gray-100: #f1f5f9;
    --gray-200: #e6edf5;
    --gray-300: #d5dee9;
    --gray-400: #94a3b8;
    --gray-500: #64748b;
    --gray-600: #475569;
    --gray-700: #334155;
    --gray-800: #1e293b;
    --gray-900: #101828;
    --radius: 12px;
    --radius-sm: 9px;
    --radius-lg: 16px;
    --shadow-sm: 0 1px 2px rgba(16,24,40,.04);
    --shadow: 0 2px 8px rgba(16,24,40,.06);
    --shadow-md: 0 10px 26px rgba(16,24,40,.10);
    --shadow-lg: 0 18px 44px rgba(16,24,40,.14);
    --shadow-xl: 0 24px 60px rgba(16,24,40,.18);
}

html, body { background:#f4f7fb !important; color:var(--gray-800); }
[hidden] { display:none !important; }
body {
    font-family: Inter, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
    letter-spacing: -.01em;
}
button, input, select, textarea { font-family:inherit; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
    outline:3px solid rgba(8,123,245,.20) !important;
    outline-offset:2px;
}

.app-container {
    width:100vw !important;
    height:100vh !important;
    margin:0 !important;
    border:0 !important;
    border-radius:0 !important;
    background:#f4f7fb !important;
    box-shadow:none !important;
    backdrop-filter:none !important;
}
.sidebar {
    width:232px !important;
    background:#fff !important;
    border-right:1px solid var(--gray-200) !important;
    backdrop-filter:none !important;
}
.sidebar-header { min-height:72px; padding:16px 18px !important; border-bottom:1px solid var(--gray-100) !important; }
.sidebar-logo, .auth-brand-mark {
    width:40px !important; height:40px !important; border-radius:11px !important;
    background:#087bf5 !important; box-shadow:0 6px 14px rgba(8,123,245,.20) !important;
}
.sidebar-title { color:var(--gray-900) !important; font-size:15px !important; }
.sidebar-subtitle { color:var(--gray-400) !important; letter-spacing:.03em; }
.sidebar-nav { padding:12px 10px !important; scrollbar-width:thin; }
.nav-section-title { color:#98a2b3 !important; font-size:10px !important; padding:12px 10px 6px !important; }
.nav-item {
    min-height:42px; padding:10px 12px !important; margin-bottom:3px !important;
    border:1px solid transparent; border-radius:10px !important; color:#475467 !important;
}
.nav-item:hover { background:#f5f9ff !important; color:#087bf5 !important; border-color:#e1edfb; }
.nav-item.active {
    color:#087bf5 !important; background:#eaf4ff !important; border-color:#d5e8ff !important;
    box-shadow:none !important;
}
.nav-item .icon { font-size:17px !important; color:inherit; }
.nav-item .badge { background:#eef4fb !important; color:#667085 !important; }

.main-area { background:#f4f7fb !important; }
.top-bar {
    height:64px !important; padding:0 26px !important; color:var(--gray-700) !important;
    background:rgba(255,255,255,.96) !important; border-bottom:1px solid var(--gray-200) !important;
    backdrop-filter:blur(12px);
}
.top-bar-greeting { color:#667085 !important; line-height:1.25; }
.top-bar-greeting strong { color:#101828 !important; font-size:16px !important; }
.top-bar-search { max-width:420px !important; }
.top-bar-search input {
    height:38px !important; color:#344054 !important; background:#f8fafc !important;
    border:1px solid #e4eaf1 !important; border-radius:10px !important;
}
.top-bar-search input::placeholder { color:#98a2b3 !important; }
.top-bar-search input:focus { background:#fff !important; border-color:#9cc9ff !important; box-shadow:0 0 0 3px rgba(8,123,245,.10) !important; }
.top-bar-search .search-icon { color:#98a2b3 !important; }
.top-bar-btn { color:#667085 !important; background:#fff !important; border:1px solid #e6edf5 !important; }
.top-bar-btn:hover { color:#087bf5 !important; border-color:#b8d8ff !important; background:#f5f9ff !important; }
.user-avatar { background:#087bf5 !important; box-shadow:none !important; }
.mobile-nav-toggle { display:none; }

.content-scroll { padding:24px 26px 38px !important; background:#f4f7fb !important; }
.welcome-banner {
    margin-bottom:18px !important; padding:0 2px !important; color:var(--gray-900) !important;
    background:transparent !important; border:0 !important; border-radius:0 !important; box-shadow:none !important;
}
.welcome-banner h2 { color:#101828 !important; font-size:24px !important; font-weight:750 !important; letter-spacing:-.03em; }
.welcome-banner p { color:#667085 !important; margin-top:4px; }

.content-card, .report-panel, .report-toolbar, .report-filters {
    background:#fff !important; border:1px solid var(--gray-200) !important;
    box-shadow:var(--shadow-sm) !important; border-radius:14px !important;
}
.content-card { overflow:hidden; }
.card-head { min-height:58px; padding:14px 18px !important; border-bottom:1px solid var(--gray-100) !important; }
.card-head h3, .report-panel h4 { color:#101828 !important; font-weight:700; }
.card-body { padding:18px !important; }
.stats-row { gap:14px !important; }
.stat-card {
    padding:18px !important; border:1px solid var(--gray-200) !important; border-radius:14px !important;
    background:#fff !important; box-shadow:var(--shadow-sm) !important;
}
.stat-card:hover { transform:translateY(-1px) !important; box-shadow:var(--shadow) !important; }
.stat-card::after, .stat-card::before { display:none !important; }
.stat-card-icon { background:#eef6ff !important; color:#087bf5 !important; border-radius:10px !important; font-size:19px !important; }
.stat-value { color:#101828 !important; font-size:27px !important; }
.stat-label { color:#667085 !important; }
.stat-trend { background:#ecfdf3 !important; color:#039855 !important; }
.stat-trend.down { background:#fff1f0 !important; color:#d92d20 !important; }

.btn { min-height:36px; border-radius:9px !important; font-weight:600 !important; }
.btn-p, .btn-primary { background:#087bf5 !important; color:#fff !important; border:1px solid #087bf5 !important; box-shadow:none !important; }
.btn-p:hover, .btn-primary:hover { background:#0565cc !important; border-color:#0565cc !important; transform:none !important; }
.btn-s, .btn-outline { background:#fff !important; color:#475467 !important; border:1px solid #dce4ee !important; }
.btn-s:hover, .btn-outline:hover { color:#087bf5 !important; background:#f6faff !important; border-color:#a9d1ff !important; }
.btn-sm { min-height:32px; }

.filter-bar { padding:14px 18px !important; background:#fbfcfe !important; border-bottom:1px solid var(--gray-100) !important; }
.search-box, .top-bar-search { position:relative; }
.search-box input, .form-input, .form-select, .report-filter input, .report-filter select, .admin-settings select {
    color:#344054 !important; background:#fff !important; border:1px solid #d8e0ea !important;
    border-radius:9px !important; box-shadow:none !important;
}
.search-box input:focus, .form-input:focus, .form-select:focus, .report-filter input:focus, .report-filter select:focus {
    border-color:#84bfff !important; box-shadow:0 0 0 3px rgba(8,123,245,.09) !important;
}

.table-wrapper, .report-table-wrap { scrollbar-color:#cdd8e5 transparent; scrollbar-width:thin; }
.data-table thead th, .report-table th {
    color:#667085 !important; background:#f8fafc !important; font-size:12px !important;
    font-weight:650 !important; text-transform:none !important; letter-spacing:0 !important;
    border-bottom:1px solid #e6edf5 !important;
}
.data-table tbody td, .report-table td { color:#344054 !important; border-bottom:1px solid #eef2f6 !important; }
.data-table tbody tr:hover, .report-table tr:hover td { background:#f8fbff !important; }
.pagination-bar { border-top:1px solid var(--gray-100) !important; background:#fff !important; }
.p-btn, .pagination-btn { border-color:#dce4ee !important; border-radius:8px !important; }
.p-btn.active, .pagination-btn.active { color:#fff !important; background:#087bf5 !important; border-color:#087bf5 !important; }
.empty-box { color:#667085 !important; }
.empty-box .emoji, .empty-state-icon { color:#98a2b3; font-size:28px; }

.modal-mask, .modal-overlay { background:rgba(16,24,40,.48) !important; backdrop-filter:blur(5px); }
.modal-box, .modal {
    border:1px solid rgba(255,255,255,.7); border-radius:16px !important;
    box-shadow:var(--shadow-xl) !important; background:#fff !important;
}
.modal-top, .modal-header { border-bottom:1px solid #edf1f5 !important; }
.modal-bottom, .modal-footer { border-top:1px solid #edf1f5 !important; background:#fbfcfe !important; }
.modal-x { display:grid; place-items:center; width:34px; height:34px; border-radius:9px; color:#667085; }
.modal-x:hover { color:#101828; background:#f2f4f7; }

.auth-shell { background:#f2f6fb !important; }
.auth-shell::before { content:none; }
.auth-card {
    position:relative; width:min(430px,100%); border:1px solid #e2e8f0 !important;
    border-radius:18px !important; background:#fff !important; box-shadow:0 24px 70px rgba(16,24,40,.13) !important;
}
.auth-card h1 { color:#101828 !important; }
.auth-card p { color:#667085 !important; }
.auth-form input { min-height:42px; }

.chart-placeholder {
    min-height:210px !important; color:#667085 !important; background:#f8fafc !important;
    border:1px dashed #d6e0eb !important; border-radius:12px !important;
}
.dashboard-bars { display:grid; gap:16px; padding:8px 0; }
.dashboard-bar { display:grid; grid-template-columns:90px 1fr 64px; gap:12px; align-items:center; font-size:13px; }
.dashboard-bar-track { height:10px; border-radius:999px; background:#eef2f6; overflow:hidden; }
.dashboard-bar-track i { display:block; height:100%; border-radius:inherit; background:#087bf5; }
.dashboard-bar strong { text-align:right; color:#101828; }

@media (max-width: 980px) {
    .sidebar { position:fixed !important; inset:0 auto 0 0; z-index:1200; transform:translateX(-100%); box-shadow:var(--shadow-lg); }
    .app-container.sidebar-open .sidebar { transform:translateX(0); }
    .mobile-nav-toggle { display:grid; place-items:center; }
    .top-bar { padding:0 16px !important; }
    .top-bar-search { display:none; }
    .top-bar-greeting { margin-right:auto; }
    .content-scroll { padding:18px 14px 28px !important; }
}

@media (max-width: 640px) {
    .top-bar-actions .btn { display:none; }
    .welcome-banner h2 { font-size:21px !important; }
    .stats-row { grid-template-columns:repeat(2,minmax(0,1fr)) !important; }
    .stat-card { min-width:0; }
    .stat-value { font-size:22px !important; }
    .content-scroll { padding:14px 10px 24px !important; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { scroll-behavior:auto !important; transition-duration:.01ms !important; animation-duration:.01ms !important; }
}