/* ══════════════════════════════════════════════════════
   TySync Professional — E-Commerce Integration Panel
   ══════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap');

:root {
  --sidebar-bg: #1a1f36;
  --sidebar-hover: rgba(255,255,255,0.06);
  --sidebar-active-bg: rgba(255,255,255,0.1);
  --sidebar-text: rgba(255,255,255,0.55);
  --sidebar-text-active: #ffffff;
  --sidebar-w: 220px;
  --bg: #f0f2f5;
  --bg-white: #ffffff;
  --text-primary: #1a1f36;
  --text-secondary: #5a607f;
  --text-muted: #8b90a0;
  --text-light: #b0b5c3;
  --border: #e3e6ef;
  --border-light: #eef0f5;
  --border-focus: #6366f1;
  --primary: #6366f1;
  --primary-light: #eef2ff;
  --primary-dark: #4f46e5;
  --success: #10b981;
  --success-light: #ecfdf5;
  --success-dark: #059669;
  --warning: #f59e0b;
  --warning-light: #fffbeb;
  --warning-dark: #d97706;
  --danger: #ef4444;
  --danger-light: #fef2f2;
  --danger-dark: #dc2626;
  --info: #3b82f6;
  --info-light: #eff6ff;
  --info-dark: #2563eb;
  --orange: #f97316;
  --orange-light: #fff7ed;
  --teal: #14b8a6;
  --teal-light: #f0fdfa;
  --radius: 10px;
  --radius-sm: 6px;
  --radius-lg: 14px;
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
  --shadow: 0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.04);
  --shadow-md: 0 4px 6px rgba(0,0,0,0.05), 0 2px 4px rgba(0,0,0,0.03);
  --shadow-lg: 0 10px 25px rgba(0,0,0,0.08);
  --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --transition: all 0.15s ease;
}

/* ── DARK MODE ──────────── */
/* Bootstrap 5.3 dark mode + custom overrides */
[data-theme="dark"],
[data-bs-theme="dark"] {
  --sidebar-bg: #0f1119;
  --sidebar-hover: rgba(255,255,255,0.08);
  --sidebar-active-bg: rgba(99,102,241,0.2);
  --bg: #111318;
  --bg-white: #1a1d27;
  --text-primary: #e2e4ea;
  --text-secondary: #9ca0b0;
  --text-muted: #6b7084;
  --text-light: #4a4f64;
  --border: #2a2d3a;
  --border-light: #232636;
  --border-focus: #818cf8;
  --primary-light: rgba(99,102,241,0.15);
  --success-light: rgba(16,185,129,0.12);
  --warning-light: rgba(245,158,11,0.12);
  --danger-light: rgba(239,68,68,0.12);
  --info-light: rgba(59,130,246,0.12);
  --orange-light: rgba(249,115,22,0.12);
  --teal-light: rgba(20,184,166,0.12);
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.3);
  --shadow: 0 1px 3px rgba(0,0,0,0.4), 0 1px 2px rgba(0,0,0,0.2);
  --shadow-md: 0 4px 6px rgba(0,0,0,0.3);
  --shadow-lg: 0 10px 25px rgba(0,0,0,0.4);
  /* Bootstrap variable overrides */
  --bs-body-bg: #111318;
  --bs-body-color: #e2e4ea;
  --bs-card-bg: #1a1d27;
  --bs-border-color: #2a2d3a;
  --bs-tertiary-bg: #1e2030;
  --bs-secondary-bg: #232636;
  color-scheme: dark;
}
[data-theme="dark"] body { background: #111318 !important; color: #e2e4ea !important; }

/* Dark: forms */
[data-theme="dark"] .form-control,
[data-theme="dark"] .form-select {
  background: #1e2030 !important;
  color: #e2e4ea !important;
  border-color: #2a2d3a !important;
}
[data-theme="dark"] .form-control:disabled,
[data-theme="dark"] .form-select:disabled {
  background: #151722 !important;
  opacity: 0.8;
}
[data-theme="dark"] .form-control::placeholder { color: #4a4f64 !important; }

/* Dark: tables */
[data-theme="dark"] .data-table thead th,
[data-theme="dark"] .table thead th,
[data-theme="dark"] .table-footer {
  background: #151722 !important;
  color: #6b7084;
  border-color: #2a2d3a !important;
}
[data-theme="dark"] .data-table tbody tr:hover,
[data-theme="dark"] .table tbody tr:hover {
  background: #1e2030 !important;
}
[data-theme="dark"] .data-table tbody td,
[data-theme="dark"] .table td,
[data-theme="dark"] .table th {
  border-color: #2a2d3a !important;
}

/* Dark: cards — force override Bootstrap */
[data-theme="dark"] .card {
  background: #1a1d27 !important;
  border-color: #2a2d3a !important;
}
[data-theme="dark"] .card-header {
  border-color: #232636 !important;
}
[data-theme="dark"] .stat-card {
  background: #1a1d27 !important;
  border-color: #2a2d3a !important;
}

/* Dark: alerts */
[data-theme="dark"] .alert-info { background: rgba(59,130,246,0.1) !important; border-color: rgba(59,130,246,0.25) !important; }
[data-theme="dark"] .alert-success { background: rgba(16,185,129,0.1) !important; border-color: rgba(16,185,129,0.25) !important; }
[data-theme="dark"] .alert-warning { background: rgba(245,158,11,0.1) !important; border-color: rgba(245,158,11,0.25) !important; }
[data-theme="dark"] .alert-danger { background: rgba(239,68,68,0.1) !important; border-color: rgba(239,68,68,0.25) !important; }

/* Dark: badges with hardcoded colors */
[data-theme="dark"] .badge-shipped { background: rgba(16,185,129,0.12); }
[data-theme="dark"] .badge-primary { background: rgba(99,102,241,0.15); }
[data-theme="dark"] .badge-secondary { background: rgba(100,116,139,0.15); color: #94a3b8; }
[data-theme="dark"] .badge-default { background: rgba(100,116,139,0.1); }

/* Dark: buttons */
[data-theme="dark"] .btn-outline {
  background: #1a1d27 !important;
  border-color: #2a2d3a !important;
  color: #e2e4ea !important;
}
[data-theme="dark"] .btn-outline:hover { background: #232636 !important; }

/* Dark: filter bar, chip, modal, login */
[data-theme="dark"] .filter-bar { background: #1a1d27 !important; border-color: #2a2d3a !important; }
[data-theme="dark"] .chip { background: #1e2030; border-color: #2a2d3a; }
[data-theme="dark"] .modal-content { background: #1a1d27 !important; border-color: #2a2d3a !important; }
[data-theme="dark"] .modal-header { border-color: #232636 !important; }
[data-theme="dark"] .login-card { background: #1a1d27 !important; }
[data-theme="dark"] code { background: rgba(99,102,241,0.15); color: #a5b4fc; }
[data-theme="dark"] ::-webkit-scrollbar-thumb { background: #3a3f52; }
[data-theme="dark"] hr, [data-theme="dark"] hr.divider { border-color: #2a2d3a !important; }

*, *::before, *::after { box-sizing: border-box; }
body { margin:0; font-family:var(--font); background:var(--bg); color:var(--text-primary); font-size:14px; line-height:1.5; -webkit-font-smoothing:antialiased; }
a { color:var(--primary); text-decoration:none; }
a:hover { color:var(--primary-dark); }

/* ── SIDEBAR ──────────── */
.sidebar { position:fixed; top:0; left:0; width:var(--sidebar-w); height:100vh; background:var(--sidebar-bg); display:flex; flex-direction:column; z-index:1000; transition:transform .3s ease; overflow-y:auto; }
.sidebar-brand { display:flex; align-items:center; gap:12px; padding:20px 16px; border-bottom:1px solid rgba(255,255,255,.06); }
.brand-icon { width:38px; height:38px; border-radius:10px; background:linear-gradient(135deg,#6366f1,#8b5cf6,#a78bfa); display:flex; align-items:center; justify-content:center; font-size:16px; color:#fff; flex-shrink:0; box-shadow:0 4px 12px rgba(99,102,241,.4); }
.brand-name { font-weight:800; font-size:16px; color:#fff; letter-spacing:-.3px; }
.brand-sub { font-size:11px; color:rgba(255,255,255,.4); margin-top:1px; }
.sidebar-section-label { padding:18px 16px 6px; font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:1.2px; color:rgba(255,255,255,.25); }
.sidebar-nav { flex:1; padding:8px; display:flex; flex-direction:column; gap:1px; }
.nav-item { display:flex; align-items:center; gap:10px; padding:9px 12px; border-radius:8px; color:var(--sidebar-text); font-size:13px; font-weight:500; transition:var(--transition); text-decoration:none; position:relative; }
.nav-item:hover { background:var(--sidebar-hover); color:rgba(255,255,255,.85); }
.nav-item.active { background:var(--sidebar-active-bg); color:var(--sidebar-text-active); font-weight:600; }
.nav-item.active::before { content:''; position:absolute; left:-8px; top:50%; transform:translateY(-50%); width:3px; height:20px; background:var(--primary); border-radius:0 3px 3px 0; }
.nav-item i { font-size:18px; width:22px; text-align:center; flex-shrink:0; }
.nav-badge { margin-left:auto; background:var(--primary); color:#fff; font-size:10px; font-weight:700; padding:2px 7px; border-radius:10px; }
.sidebar-footer { padding:8px 8px 12px; border-top:1px solid rgba(255,255,255,.06); }

/* ── MAIN ──────────── */
.main-content { margin-left:var(--sidebar-w); min-height:100vh; }
.topbar-mobile { display:none; background:var(--bg-white); border-bottom:1px solid var(--border); padding:10px 16px; align-items:center; gap:12px; }
.btn-toggle { background:transparent; border:1px solid var(--border); color:var(--text-secondary); width:36px; height:36px; border-radius:var(--radius-sm); font-size:18px; display:flex; align-items:center; justify-content:center; cursor:pointer; }
.page-container { padding:24px 28px; }
.page-header { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; margin-bottom:24px; flex-wrap:wrap; }
.page-title { font-size:22px; font-weight:800; color:var(--text-primary); letter-spacing:-.5px; line-height:1.2; }
.page-subtitle { color:var(--text-muted); font-size:13px; margin-top:4px; }

/* ── CARDS ──────────── */
.card { background:var(--bg-white); border:1px solid var(--border); border-radius:var(--radius-lg); box-shadow:var(--shadow-sm); overflow:hidden; }
.card-header { padding:14px 20px; border-bottom:1px solid var(--border-light); display:flex; align-items:center; justify-content:space-between; gap:12px; }
.card-header .title { font-weight:700; font-size:14px; color:var(--text-primary); display:flex; align-items:center; gap:8px; }
.card-header .title i { color:var(--text-muted); font-size:15px; }
.card-body { padding:20px; }
.card-body.compact { padding:0; }

/* ── STAT CARDS ──────────── */
.stat-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:16px; margin-bottom:24px; }
.stat-card { background:var(--bg-white); border:1px solid var(--border); border-radius:var(--radius-lg); padding:18px 20px; box-shadow:var(--shadow-sm); display:flex; align-items:flex-start; gap:14px; transition:var(--transition); }
.stat-card:hover { box-shadow:var(--shadow-md); transform:translateY(-1px); }
.stat-icon { width:44px; height:44px; border-radius:10px; display:flex; align-items:center; justify-content:center; font-size:18px; flex-shrink:0; }
.stat-icon.purple { background:var(--primary-light); color:var(--primary); }
.stat-icon.green { background:var(--success-light); color:var(--success); }
.stat-icon.orange { background:var(--orange-light); color:var(--orange); }
.stat-icon.red { background:var(--danger-light); color:var(--danger); }
.stat-icon.blue { background:var(--info-light); color:var(--info); }
.stat-icon.teal { background:var(--teal-light); color:var(--teal); }
.stat-icon.pink { background:rgba(236,72,153,.1); color:#ec4899; }
.stat-info { flex:1; }
.stat-label { font-size:12px; color:var(--text-muted); font-weight:500; margin-bottom:4px; }
.stat-value { font-size:24px; font-weight:800; color:var(--text-primary); letter-spacing:-.5px; line-height:1; }

/* ── TABLE ──────────── */
.data-table { width:100%; border-collapse:collapse; }
.data-table thead th { padding:10px 16px; font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:.5px; color:var(--text-muted); background:#fafbfc; border-bottom:1px solid var(--border); white-space:nowrap; text-align:left; }
.data-table tbody td { padding:12px 16px; border-bottom:1px solid var(--border-light); font-size:13px; vertical-align:middle; }
.data-table tbody tr { transition:background .1s; }
.data-table tbody tr:hover { background:#f8f9fc; }
.data-table tbody tr:last-child td { border-bottom:none; }
.table-link { color:var(--text-primary); font-weight:600; transition:var(--transition); }
.table-link:hover { color:var(--primary); }
.cell-mono { font-family:var(--mono); font-size:12px; color:var(--text-secondary); }
.cell-muted { color:var(--text-muted); font-size:12px; }
.cell-bold { font-weight:700; }
.table-footer { padding:10px 16px; font-size:12px; color:var(--text-muted); border-top:1px solid var(--border-light); background:#fafbfc; }
.empty-state { text-align:center; padding:48px 20px; color:var(--text-muted); }
.empty-state i { font-size:32px; color:var(--text-light); display:block; margin-bottom:12px; }

/* ── BADGES ──────────── */
.badge { display:inline-flex; align-items:center; gap:5px; padding:3px 10px; border-radius:999px; font-size:11px; font-weight:600; white-space:nowrap; }
.badge::before { content:''; width:6px; height:6px; border-radius:50%; flex-shrink:0; }
.badge-created { background:var(--info-light); color:var(--info); }
.badge-created::before { background:var(--info); }
.badge-picking { background:var(--warning-light); color:var(--warning-dark); }
.badge-picking::before { background:var(--warning); }
.badge-shipped { background:#f0fdf4; color:var(--success-dark); }
.badge-shipped::before { background:var(--success); }
.badge-delivered { background:var(--success-light); color:#047857; }
.badge-delivered::before { background:#047857; }
.badge-cancelled { background:var(--danger-light); color:var(--danger); }
.badge-cancelled::before { background:var(--danger); }
.badge-primary { background:#eef2ff; color:var(--primary); }
.badge-primary::before { background:var(--primary); }
.badge-success { background:var(--success-light); color:var(--success-dark); }
.badge-success::before { background:var(--success); }
.badge-danger { background:var(--danger-light); color:var(--danger); }
.badge-danger::before { background:var(--danger); }
.badge-secondary { background:#f1f5f9; color:#64748b; }
.badge-secondary::before { background:#94a3b8; }
.badge-default { background:#f4f5f7; color:var(--text-muted); }
.badge-default::before { background:var(--text-light); }
.badge-ok { background:var(--success-light); color:var(--success-dark); }
.badge-ok::before { background:var(--success); }
.badge-running { background:var(--warning-light); color:var(--warning-dark); }
.badge-running::before { background:var(--warning); }
.badge-failed { background:var(--danger-light); color:var(--danger); }
.badge-failed::before { background:var(--danger); }

/* ── BUTTONS ──────────── */
.btn-primary { display:inline-flex; align-items:center; gap:6px; background:var(--primary); color:#fff; border:none; padding:8px 16px; border-radius:var(--radius-sm); font-family:var(--font); font-weight:600; font-size:13px; cursor:pointer; transition:var(--transition); box-shadow:0 1px 2px rgba(99,102,241,.2); text-decoration:none; white-space:nowrap; }
.btn-primary:hover { background:var(--primary-dark); color:#fff; }
.btn-success { display:inline-flex; align-items:center; gap:6px; background:var(--success); color:#fff; border:none; padding:8px 16px; border-radius:var(--radius-sm); font-family:var(--font); font-weight:600; font-size:13px; cursor:pointer; transition:var(--transition); text-decoration:none; white-space:nowrap; }
.btn-success:hover { background:var(--success-dark); color:#fff; }
.btn-warning { display:inline-flex; align-items:center; gap:6px; background:var(--warning); color:#fff; border:none; padding:8px 16px; border-radius:var(--radius-sm); font-family:var(--font); font-weight:600; font-size:13px; cursor:pointer; transition:var(--transition); text-decoration:none; white-space:nowrap; }
.btn-warning:hover { background:var(--warning-dark); color:#fff; }
.btn-outline { display:inline-flex; align-items:center; gap:6px; background:var(--bg-white); color:var(--text-secondary); border:1px solid var(--border); padding:7px 14px; border-radius:var(--radius-sm); font-family:var(--font); font-weight:500; font-size:13px; cursor:pointer; transition:var(--transition); text-decoration:none; white-space:nowrap; }
.btn-outline:hover { background:var(--bg); color:var(--text-primary); }
.btn-sm { padding:5px 10px; font-size:12px; }

/* ── FORMS ──────────── */
.form-label { display:block; font-size:12px; font-weight:600; color:var(--text-secondary); margin-bottom:5px; }
.form-control, .form-select { width:100%; padding:8px 12px; font-family:var(--font); font-size:13px; color:var(--text-primary); background:var(--bg-white); border:1px solid var(--border); border-radius:var(--radius-sm); transition:var(--transition); outline:none; }
.form-control:focus, .form-select:focus { border-color:var(--border-focus); box-shadow:0 0 0 3px rgba(99,102,241,.12); }
.form-control::placeholder { color:var(--text-light); }
.form-check-input { width:16px; height:16px; border:1.5px solid var(--border); border-radius:4px; cursor:pointer; accent-color:var(--primary); }

/* ── FILTER BAR ──────────── */
.filter-bar { background:var(--bg-white); border:1px solid var(--border); border-radius:var(--radius-lg); padding:16px 20px; margin-bottom:20px; box-shadow:var(--shadow-sm); }
.filter-row { display:flex; gap:12px; align-items:flex-end; flex-wrap:wrap; }
.filter-group { flex:1; min-width:150px; }
.filter-group.narrow { flex:0 0 auto; min-width:100px; }

/* ── LOG ──────────── */
.log-console { font-family:var(--mono); font-size:11.5px; line-height:1.65; background:#1e2235; color:#a4afc8; border-radius:var(--radius); padding:16px; max-height:400px; overflow-y:auto; white-space:pre-wrap; word-break:break-all; }

/* ── PRODUCT IMG ──────────── */
.product-img { width:42px; height:42px; border-radius:8px; object-fit:cover; background:var(--bg); border:1px solid var(--border-light); }
.product-placeholder { width:42px; height:42px; border-radius:8px; background:var(--bg); border:1px solid var(--border-light); display:flex; align-items:center; justify-content:center; color:var(--text-light); font-size:16px; }

/* ── CHIP ──────────── */
.chip { display:inline-flex; align-items:center; gap:5px; padding:3px 10px; border-radius:999px; background:var(--bg); border:1px solid var(--border); font-size:11px; font-weight:500; color:var(--text-muted); }

/* ── ALERTS ──────────── */
.alert { padding:10px 14px; border-radius:var(--radius-sm); font-size:13px; font-weight:500; display:flex; align-items:center; gap:8px; margin-bottom:12px; border:1px solid transparent; }
.alert-success { background:var(--success-light); color:var(--success-dark); border-color:#bbf7d0; }
.alert-danger { background:var(--danger-light); color:var(--danger-dark); border-color:#fecaca; }
.alert-info { background:var(--info-light); color:var(--info-dark); border-color:#bfdbfe; }
.alert-warning { background:var(--warning-light); color:var(--warning-dark); border-color:#fde68a; }
.flash-container { margin-bottom:16px; }
.btn-close { background:none; border:none; font-size:18px; cursor:pointer; margin-left:auto; opacity:.5; color:inherit; padding:0; line-height:1; }
.btn-close:hover { opacity:.8; }
.btn-close::after { content:'×'; }

/* ── LOGIN ──────────── */
.login-page { min-height:100vh; display:flex; align-items:center; justify-content:center; background:linear-gradient(135deg,#667eea 0%,#764ba2 100%); padding:20px; }
.login-card { background:var(--bg-white); border-radius:20px; padding:44px 36px; width:100%; max-width:400px; box-shadow:0 25px 60px rgba(0,0,0,.15); }
.login-logo { width:56px; height:56px; border-radius:14px; background:linear-gradient(135deg,#6366f1,#8b5cf6); display:flex; align-items:center; justify-content:center; font-size:24px; color:#fff; margin:0 auto 20px; box-shadow:0 8px 20px rgba(99,102,241,.35); }
.login-title { font-size:22px; font-weight:800; text-align:center; margin:0 0 4px; }
.login-subtitle { text-align:center; color:var(--text-muted); font-size:13px; margin-bottom:28px; }

/* ── DETAIL TABLE ──────────── */
.detail-table { width:100%; }
.detail-table td { padding:10px 0; border-bottom:1px solid var(--border-light); font-size:13px; }
.detail-table td:first-child { color:var(--text-muted); font-weight:500; width:140px; }
.detail-table td:last-child { font-weight:600; }
.detail-table tr:last-child td { border-bottom:none; }

/* ── GRID ──────────── */
.grid-5-7 { display:grid; grid-template-columns:5fr 7fr; gap:20px; }

/* ── MODAL ──────────── */
.modal-content { border:1px solid var(--border); border-radius:var(--radius-lg); box-shadow:var(--shadow-lg); }
.modal-header { padding:16px 20px; border-bottom:1px solid var(--border-light); }
.modal-body { padding:20px; }
.modal-title { font-size:15px; font-weight:700; }

/* ── SCROLLBAR ──────────── */
::-webkit-scrollbar { width:6px; height:6px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:#d0d4e0; border-radius:3px; }

/* ── RESPONSIVE ──────────── */
@media(max-width:991px) {
  .sidebar { transform:translateX(-100%); }
  .sidebar.open { transform:translateX(0); box-shadow:0 0 40px rgba(0,0,0,.2); }
  .main-content { margin-left:0; }
  .topbar-mobile { display:flex; }
  .page-container { padding:16px; }
  .grid-5-7 { grid-template-columns:1fr; }
}

/* ── HELPERS ──────────── */
.text-end { text-align:right; }
.text-center { text-align:center; }
.d-flex { display:flex; }
.d-none { display:none; }
.flex-wrap { flex-wrap:wrap; }
.gap-8 { gap:8px; }
.w-100 { width:100%; }
hr.divider { border:none; border-top:1px solid var(--border); margin:16px 0; }

/* ── ONBOARDING ──────────── */
.onboard-page { min-height:100vh; display:flex; align-items:center; justify-content:center; background:linear-gradient(135deg,#667eea 0%,#764ba2 100%); padding:20px; }
.onboard-card { background:var(--bg-white); border-radius:20px; padding:40px 36px; width:100%; max-width:520px; box-shadow:0 25px 60px rgba(0,0,0,.15); }
[data-theme="dark"] .onboard-card { background:#1a1d27; }

/* ── AUTH WRAPPER ──────────── */
.auth-wrapper { min-height:100vh; }

/* ── PAGINATION ──────────── */
.pagination { display:flex; align-items:center; gap:6px; }
.page-btn { display:inline-flex; align-items:center; justify-content:center; width:42px; height:42px; border-radius:10px; font-size:15px; font-weight:700; color:#6b7280; background:#f0f1f3; border:none; text-decoration:none; transition:all .15s; cursor:pointer; }
.page-btn:hover { background:#e2e4ea; color:var(--primary); }
.page-btn.active { background:var(--primary); color:#fff; box-shadow:0 2px 8px rgba(var(--primary-rgb,.2)); }
.page-btn.disabled { opacity:.35; cursor:default; pointer-events:none; }
.page-dots { display:inline-flex; align-items:center; justify-content:center; width:32px; height:42px; font-size:16px; font-weight:700; color:#aaa; letter-spacing:2px; }
[data-theme="dark"] .page-btn { background:#2a2d3a; color:#8b8fa3; }
[data-theme="dark"] .page-btn:hover { background:#353848; color:var(--primary); }
[data-theme="dark"] .page-btn.active { background:var(--primary); color:#fff; }

/* ── NOTIFICATION BADGE (sidebar) ── */
.notif-badge { display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;padding:0 6px;border-radius:10px;font-size:11px;font-weight:700;background:var(--danger,#ef4444);color:#fff;margin-left:auto; }

/* ── NOTIFICATION BANNER (dashboard) ── */
.notif-banner { background:linear-gradient(135deg,#fef3c7,#fde68a);border:1px solid #f59e0b;border-radius:12px;padding:14px 20px;margin-bottom:20px; }
[data-theme="dark"] .notif-banner { background:linear-gradient(135deg,#422006,#78350f);border-color:#b45309; }
.notif-banner-content { display:flex;align-items:center;gap:12px;flex-wrap:wrap; }
.notif-banner-content i { font-size:20px;color:#d97706; }
.notif-banner-content span { font-size:14px; }

/* ── NOTIFICATION LIST ── */
.notif-list { display:flex;flex-direction:column; }
.notif-item { display:flex;align-items:flex-start;gap:14px;padding:14px 16px;border-bottom:1px solid var(--border); transition:background .15s; }
.notif-item:last-child { border-bottom:none; }
.notif-item:hover { background:var(--bg-light); }
.notif-unread { background:rgba(59,130,246,0.04); }
[data-theme="dark"] .notif-unread { background:rgba(59,130,246,0.08); }
.notif-icon { font-size:20px;margin-top:2px;flex-shrink:0; }
.notif-body { flex:1;min-width:0; }
.notif-text { font-size:14px;line-height:1.5; }
.notif-time { font-size:12px;color:var(--text-muted);margin-top:4px; }

/* ── TABS ── */
.tab-bar { display:flex;gap:0;overflow-x:auto; }
.tab-btn { padding:12px 20px;font-size:13px;font-weight:600;border:none;background:none;color:var(--text-muted);cursor:pointer;border-bottom:2px solid transparent;transition:all .15s;white-space:nowrap; }
.tab-btn:hover { color:var(--text-primary);background:var(--bg-light); }
.tab-btn.active { color:var(--primary);border-bottom-color:var(--primary); }

/* ── ALERT ── */
.alert { padding:14px 20px;border-radius:10px;margin-bottom:20px;display:flex;align-items:center;gap:10px;font-size:14px; }
.alert-warning { background:#fef3c7;border:1px solid #f59e0b;color:#92400e; }
.alert-danger { background:#fef2f2;border:1px solid #ef4444;color:#991b1b; }
[data-theme="dark"] .alert-warning { background:#422006;border-color:#b45309;color:#fde68a; }
[data-theme="dark"] .alert-danger { background:#450a0a;border-color:#dc2626;color:#fca5a5; }

/* ── STAT CARD COLORS ── */
.stat-icon.red { background:rgba(239,68,68,.1);color:#ef4444; }
[data-theme="dark"] .stat-icon.red { background:rgba(239,68,68,.15); }

/* ── EXPENSE BARS ── */
.expense-bars { display:flex;flex-direction:column;gap:10px; }
.expense-row { display:flex;align-items:center;gap:12px; }
.expense-label { font-size:13px;font-weight:600;min-width:140px;color:var(--text-secondary); }
.expense-bar-track { flex:1;height:20px;background:var(--bg-light);border-radius:6px;overflow:hidden; }
.expense-bar { height:100%;border-radius:6px;min-width:2px;transition:width .4s ease; }
.expense-amount { font-size:13px;font-weight:700;min-width:100px;text-align:right; }

/* ── SETTING GROUP ── */
.setting-group { margin-bottom:12px; }
.input-suffix { display:flex;align-items:stretch;flex-wrap:nowrap; }
.input-suffix input { border-radius:8px 0 0 8px;flex:1;min-width:0; }
.input-suffix span { display:flex;align-items:center;justify-content:center;padding:0 14px;background:var(--bg-light);border:1px solid var(--border);border-left:none;border-radius:0 8px 8px 0;font-size:14px;font-weight:600;color:var(--text-muted);white-space:nowrap; }
[data-theme="dark"] .input-suffix span { background:#2a2d3a; }

/* ── SPINNER ── */
.spinner-sm { width:18px;height:18px;border:2.5px solid var(--border);border-top-color:var(--primary);border-radius:50%;animation:spin .7s linear infinite;flex-shrink:0; }
@keyframes spin { to { transform:rotate(360deg); } }
.btn-sm { padding:4px 12px;font-size:12px;border-radius:6px;border:1px solid var(--border);background:var(--bg);color:var(--text-secondary);cursor:pointer;font-weight:600; }
.btn-sm:hover { background:var(--bg-light); }
.btn-sm.btn-primary { background:var(--primary);color:#fff;border-color:var(--primary); }