@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@300;400;500;600&family=DM+Mono:wght@400;500&display=swap');
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ── DARK THEME (Advaitha Deep Teal) ── */
:root, [data-theme="dark"] {
  --bg:#071c24; --bg2:#0d2b36; --bg3:#0f3340;
  --border:rgba(255,255,255,0.07); --border2:rgba(255,255,255,0.12);
  --text:#e8f0f2; --text2:#8aacb4; --text3:#3d6470;
  --accent:#c9a84c; --accent2:#a8872e;
  --accent-light:#e1c378;
  --teal:#1a9090; --teal2:#0f7878; --teal-light:#4dbdbd;
  --green:#3daa62; --red:#e05c5c; --blue:#4a9fd4; --purple:#8b6dbf;
  --shadow:rgba(0,0,0,0.5);
  --chart-grid:rgba(255,255,255,0.05);
  --logo-invert:0;
}

/* ── LIGHT THEME ── */
[data-theme="light"] {
  --bg:#f0f6f7; --bg2:#ffffff; --bg3:#e4eff1;
  --border:rgba(0,75,75,0.1); --border2:rgba(0,75,75,0.18);
  --text:#001e2d; --text2:#2d6070; --text3:#7aaab5;
  --accent:#9a6e1e; --accent2:#7d5610;
  --accent-light:#b4872d;
  --teal:#006969; --teal2:#005a5a; --teal-light:#0f8080;
  --green:#1e7a42; --red:#c93030; --blue:#1a6fa0; --purple:#6444a0;
  --shadow:rgba(0,30,45,0.12);
  --chart-grid:rgba(0,75,75,0.07);
  --logo-invert:0;
}

:root { --radius:10px; --font:'DM Sans',sans-serif; --mono:'DM Mono',monospace; }

body { font-family:var(--font); background:var(--bg); color:var(--text); min-height:100vh; font-size:14px; line-height:1.6; transition:background 0.2s,color 0.2s; }

/* ── SHELL ── */
.shell { display:flex; min-height:100vh; }
.sidebar { width:230px; background:var(--bg2); border-right:1px solid var(--border); padding:0; position:fixed; top:0; left:0; bottom:0; display:flex; flex-direction:column; z-index:100; transition:background 0.2s; overflow-y:auto; }

/* ── LOGO AREA ── */
.logo-area { padding:20px 20px 16px; border-bottom:1px solid var(--border); display:flex; align-items:center; gap:12px; background:linear-gradient(135deg, var(--bg3) 0%, var(--bg2) 100%); }
.logo-img { width:40px; height:40px; object-fit:contain; flex-shrink:0; }
.logo-text .logo-name { font-size:17px; font-weight:600; color:var(--accent-light); letter-spacing:0.03em; }
.logo-text .logo-sub { font-size:10px; color:var(--text3); letter-spacing:0.1em; text-transform:uppercase; margin-top:1px; }

.nav-section { padding:12px 20px 4px; font-size:10px; color:var(--text3); text-transform:uppercase; letter-spacing:0.1em; }
.nav-item { display:flex; align-items:center; gap:10px; padding:9px 20px; cursor:pointer; color:var(--text2); font-size:13px; transition:all 0.15s; border-left:2px solid transparent; text-decoration:none; }
.nav-item:hover { background:var(--bg3); color:var(--text); }
.nav-item.active { color:var(--accent-light); border-left-color:var(--accent); background:rgba(201,168,76,0.08); }
.nav-icon { width:16px; height:16px; flex-shrink:0; }
.nav-badge { margin-left:auto; background:var(--accent); color:#071c24; font-size:10px; font-weight:600; padding:1px 6px; border-radius:10px; min-width:18px; text-align:center; }
.sidebar-footer { margin-top:auto; padding:16px 20px; border-top:1px solid var(--border); }
.user-email { font-size:11px; color:var(--text3); word-break:break-all; margin-bottom:8px; }

.main { margin-left:230px; flex:1; padding:32px; max-width:1400px; }
.page-header { display:flex; align-items:flex-start; justify-content:space-between; margin-bottom:28px; gap:16px; }
.page-title { font-size:22px; font-weight:600; }
.page-sub { font-size:13px; color:var(--text2); margin-top:2px; }
.header-actions { display:flex; align-items:center; gap:10px; flex-shrink:0; }

/* ── THEME TOGGLE ── */
.theme-toggle { display:flex; align-items:center; gap:8px; padding:6px 10px; border-radius:20px; background:var(--bg3); border:1px solid var(--border2); cursor:pointer; transition:all 0.15s; }
.theme-toggle:hover { border-color:var(--accent); }
.toggle-track { width:32px; height:18px; border-radius:9px; background:var(--bg3); border:1px solid var(--border2); position:relative; transition:background 0.2s; }
[data-theme="light"] .toggle-track { background:var(--teal); }
.toggle-thumb { width:12px; height:12px; border-radius:50%; background:var(--text3); position:absolute; top:2px; left:2px; transition:all 0.2s; }
[data-theme="light"] .toggle-thumb { left:16px; background:#fff; }
.toggle-label { font-size:12px; color:var(--text2); }

/* ── KPI CARDS ── */
.kpi-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:14px; margin-bottom:24px; }
.kpi-card { background:var(--bg2); border:1px solid var(--border); border-radius:var(--radius); padding:18px 20px; position:relative; overflow:hidden; transition:border-color 0.15s,transform 0.15s; }
.kpi-card:hover { border-color:var(--border2); transform:translateY(-1px); }
.kpi-accent { position:absolute; top:0; left:0; width:3px; height:100%; }
.kpi-icon { position:absolute; top:16px; right:16px; width:30px; height:30px; border-radius:8px; display:flex; align-items:center; justify-content:center; }
.kpi-label { font-size:11px; color:var(--text3); text-transform:uppercase; letter-spacing:0.07em; margin-bottom:6px; }
.kpi-value { font-size:24px; font-weight:600; font-family:var(--mono); margin-bottom:3px; }
.kpi-sub { font-size:11px; color:var(--text3); }

/* ── STATS ── */
.stats-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:12px; margin-bottom:20px; }
.stat-card { background:var(--bg2); border:1px solid var(--border); border-radius:var(--radius); padding:14px 16px; }
.stat-label { font-size:11px; color:var(--text3); text-transform:uppercase; letter-spacing:0.06em; margin-bottom:5px; }
.stat-value { font-size:22px; font-weight:600; font-family:var(--mono); }
.stat-value.gold { color:var(--accent-light); } .stat-value.green { color:var(--green); }
.stat-value.red { color:var(--red); } .stat-value.blue { color:var(--teal-light); }
.stat-value.purple { color:var(--purple); }

/* ── TABS ── */
.tabs { display:flex; margin-bottom:20px; background:var(--bg2); border-radius:8px; padding:3px; width:fit-content; border:1px solid var(--border); flex-wrap:wrap; }
.tab { padding:7px 14px; font-size:13px; font-weight:500; color:var(--text2); cursor:pointer; border-radius:6px; transition:all 0.15s; white-space:nowrap; }
.tab.active { background:var(--teal2); color:#e8f0f2; }
.tab:hover:not(.active) { color:var(--text); background:var(--bg3); }

/* ── FILTERS ── */
.filters { display:flex; gap:10px; margin-bottom:18px; align-items:center; flex-wrap:wrap; }
.filter-input { background:var(--bg2); border:1px solid var(--border2); border-radius:8px; color:var(--text); font-family:var(--font); font-size:13px; padding:8px 12px; outline:none; transition:border-color 0.15s; }
.filter-input:focus { border-color:var(--teal); }
.filter-input::placeholder { color:var(--text3); }
select.filter-input option { background:var(--bg2); color:var(--text); }

/* ── TABLE ── */
.table-wrap { background:var(--bg2); border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; }
.table-header { display:flex; align-items:center; justify-content:space-between; padding:14px 18px; border-bottom:1px solid var(--border); gap:12px; flex-wrap:wrap; }
.table-title { font-size:13px; font-weight:500; color:var(--text2); }
table { width:100%; border-collapse:collapse; }
thead th { padding:10px 14px; text-align:left; font-size:11px; font-weight:500; color:var(--text3); text-transform:uppercase; letter-spacing:0.06em; border-bottom:1px solid var(--border); white-space:nowrap; background:rgba(0,75,75,0.05); }
tbody tr { border-bottom:1px solid var(--border); transition:background 0.1s; }
tbody tr:last-child { border-bottom:none; }
tbody tr:hover { background:rgba(26,144,144,0.05); }
tbody td { padding:11px 14px; font-size:13px; color:var(--text); vertical-align:middle; }
.amount-cell { font-family:var(--mono); font-weight:500; }

/* ── BADGES ── */
.badge { display:inline-flex; align-items:center; gap:5px; padding:3px 9px; border-radius:20px; font-size:11px; font-weight:500; white-space:nowrap; }
.badge-dot { width:5px; height:5px; border-radius:50%; background:currentColor; flex-shrink:0; }
.badge-pending  { background:rgba(201,168,76,0.15);  color:var(--accent-light); border:1px solid rgba(201,168,76,0.35); }
.badge-approved { background:rgba(61,170,98,0.12);   color:var(--green);        border:1px solid rgba(61,170,98,0.35); }
.badge-rejected { background:rgba(224,92,92,0.12);   color:var(--red);          border:1px solid rgba(224,92,92,0.35); }
.badge-new      { background:rgba(26,144,144,0.12);  color:var(--teal-light);   border:1px solid rgba(26,144,144,0.35); }
.badge-interest { background:rgba(139,109,191,0.12); color:var(--purple);       border:1px solid rgba(139,109,191,0.35); }

/* ── BUTTONS ── */
.btn { padding:6px 14px; border-radius:7px; font-size:12px; font-family:var(--font); font-weight:500; cursor:pointer; border:1px solid transparent; transition:all 0.15s; white-space:nowrap; }
.btn-sm { padding:4px 10px; font-size:11px; border-radius:6px; }
.btn-approve { background:rgba(61,170,98,0.12); color:var(--green); border-color:rgba(61,170,98,0.35); }
.btn-approve:hover { background:rgba(61,170,98,0.25); }
.btn-reject { background:rgba(224,92,92,0.1); color:var(--red); border-color:rgba(224,92,92,0.35); }
.btn-reject:hover { background:rgba(224,92,92,0.22); }
.btn-primary { background:var(--teal2); color:#e8f0f2; font-weight:600; border-color:var(--teal2); }
.btn-primary:hover { background:var(--teal); border-color:var(--teal); }
.btn-ghost { background:transparent; color:var(--text2); border-color:var(--border2); }
.btn-ghost:hover { background:var(--bg3); color:var(--text); }
.btn-edit { background:rgba(26,144,144,0.1); color:var(--teal-light); border-color:rgba(26,144,144,0.3); }
.btn-edit:hover { background:rgba(26,144,144,0.22); }
.actions { display:flex; gap:6px; flex-wrap:wrap; }

/* ── PAGINATION ── */
.pagination { display:flex; align-items:center; justify-content:space-between; padding:12px 18px; border-top:1px solid var(--border); flex-wrap:wrap; gap:10px; }
.pagination-info { font-size:12px; color:var(--text3); }
.pagination-controls { display:flex; align-items:center; gap:6px; }
.page-btn { padding:4px 10px; border-radius:6px; font-size:12px; font-family:var(--font); cursor:pointer; border:1px solid var(--border2); background:transparent; color:var(--text2); transition:all 0.15s; }
.page-btn:hover:not(:disabled) { background:var(--bg3); color:var(--text); }
.page-btn:disabled { opacity:0.35; cursor:not-allowed; }
.page-btn.active { background:var(--teal2); color:#e8f0f2; border-color:var(--teal2); font-weight:600; }
.page-size-select { background:var(--bg3); border:1px solid var(--border2); border-radius:6px; color:var(--text); font-family:var(--font); font-size:12px; padding:4px 8px; outline:none; }

/* ── MODAL ── */
.modal-overlay { position:fixed; inset:0; background:rgba(0,10,15,0.7); display:flex; align-items:center; justify-content:center; z-index:200; opacity:0; pointer-events:none; transition:opacity 0.2s; }
.modal-overlay.show { opacity:1; pointer-events:all; }
.modal { background:var(--bg2); border:1px solid var(--border2); border-radius:14px; padding:28px; width:560px; max-width:95vw; max-height:92vh; overflow-y:auto; box-shadow:0 20px 60px var(--shadow); }
.modal-lg { width:700px; }
.modal-title { font-size:16px; font-weight:600; margin-bottom:6px; color:var(--accent-light); }
.modal-sub { font-size:13px; color:var(--text2); margin-bottom:20px; }
.modal-footer { display:flex; gap:10px; justify-content:flex-end; margin-top:22px; padding-top:16px; border-top:1px solid var(--border); }
.form-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.form-grid .span-2 { grid-column:span 2; }
.form-row { display:flex; flex-direction:column; gap:5px; }
.form-label { font-size:11px; color:var(--text3); text-transform:uppercase; letter-spacing:0.07em; }
.form-control { background:var(--bg3); border:1px solid var(--border2); border-radius:8px; color:var(--text); font-family:var(--font); font-size:13px; padding:9px 12px; outline:none; transition:border-color 0.15s; width:100%; }
.form-control:focus { border-color:var(--teal); }
.form-control::placeholder { color:var(--text3); }
select.form-control option { background:var(--bg2); }
textarea.form-control { resize:vertical; min-height:80px; }

/* ── CHART CARDS ── */
.charts-row   { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-bottom:16px; }
.charts-row-3 { display:grid; grid-template-columns:2fr 1fr; gap:16px; margin-bottom:16px; }
.chart-card { background:var(--bg2); border:1px solid var(--border); border-radius:var(--radius); padding:20px; }
.chart-title { font-size:13px; font-weight:500; color:var(--text2); margin-bottom:3px; }
.chart-sub   { font-size:11px; color:var(--text3); margin-bottom:16px; }
.chart-wrap    { position:relative; height:200px; }
.chart-wrap-sm { position:relative; height:160px; }

/* ── LOGIN ── */
#login-screen { min-height:100vh; display:flex; align-items:center; justify-content:center;
  background:
    radial-gradient(ellipse at 20% 20%, rgba(0,105,105,0.55) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 10%, rgba(0,75,75,0.45) 0%, transparent 45%),
    radial-gradient(ellipse at 70% 80%, rgba(0,60,60,0.5) 0%, transparent 50%),
    radial-gradient(ellipse at 10% 80%, rgba(201,168,76,0.18) 0%, transparent 40%),
    linear-gradient(135deg, #071c24 0%, #0a2a35 40%, #0d3040 70%, #071c24 100%); }
[data-theme="light"] #login-screen {
  background:
    radial-gradient(ellipse at 20% 20%, rgba(0,105,105,0.28) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 10%, rgba(0,90,90,0.22) 0%, transparent 45%),
    radial-gradient(ellipse at 70% 80%, rgba(0,75,75,0.25) 0%, transparent 50%),
    radial-gradient(ellipse at 10% 80%, rgba(180,135,45,0.14) 0%, transparent 40%),
    linear-gradient(135deg, #c8dfe0 0%, #d4e8e8 40%, #bfd8d8 70%, #c8dfe0 100%); }
.login-card { background:var(--bg2); border:1px solid var(--border2); border-radius:18px; padding:40px 40px 36px; width:400px; animation:fadeUp 0.4s ease; box-shadow:0 24px 80px var(--shadow); }
.login-logo-wrap { display:flex; flex-direction:column; align-items:center; margin-bottom:28px; gap:10px; }
.login-logo-img { width:140px; height:140px; object-fit:contain; }
.login-brand { font-size:26px; font-weight:600; color:var(--accent-light); letter-spacing:0.04em; }
.login-tagline { font-size:12px; color:var(--text3); letter-spacing:0.08em; text-transform:uppercase; }
.login-divider { border:none; border-top:1px solid var(--border); margin:0 0 24px; }
.login-error { background:rgba(224,92,92,0.1); border:1px solid rgba(224,92,92,0.3); border-radius:8px; color:var(--red); font-size:13px; padding:10px 14px; margin-bottom:16px; display:none; }
.form-label { display:block; font-size:11px; color:var(--text3); text-transform:uppercase; letter-spacing:0.07em; margin-bottom:6px; }
.form-input { width:100%; background:var(--bg3); border:1px solid var(--border2); border-radius:8px; color:var(--text); font-family:var(--font); font-size:14px; padding:10px 14px; outline:none; transition:border-color 0.15s; margin-bottom:16px; }
.form-input:focus { border-color:var(--teal); box-shadow:0 0 0 3px rgba(26,144,144,0.12); }
.form-input::placeholder { color:var(--text3); }
.btn-login { width:100%; background:linear-gradient(135deg, var(--teal2) 0%, var(--teal) 100%); color:#e8f0f2; border:none; border-radius:8px; padding:12px; font-size:14px; font-weight:600; font-family:var(--font); cursor:pointer; transition:all 0.15s; letter-spacing:0.03em; }
.btn-login:hover { background:linear-gradient(135deg, var(--teal) 0%, var(--teal-light) 100%); transform:translateY(-1px); box-shadow:0 4px 16px rgba(26,144,144,0.3); }
.btn-login:disabled { opacity:0.5; cursor:not-allowed; transform:none; }
.login-theme-row { display:flex; justify-content:flex-end; margin-bottom:20px; }

/* ── MISC ── */
.state-msg { text-align:center; padding:48px 20px; color:var(--text3); font-size:13px; }
.spinner { display:inline-block; width:20px; height:20px; border:2px solid var(--border2); border-top-color:var(--teal); border-radius:50%; animation:spin 0.7s linear infinite; margin-bottom:10px; }
#toast { position:fixed; bottom:24px; right:24px; background:var(--bg2); border:1px solid var(--border2); border-radius:10px; padding:12px 18px; font-size:13px; color:var(--text); opacity:0; transform:translateY(8px); transition:all 0.25s; z-index:999; pointer-events:none; box-shadow:0 4px 20px var(--shadow); }
#toast.show { opacity:1; transform:translateY(0); }
#toast.success { border-color:rgba(61,170,98,0.5); color:var(--green); }
#toast.error { border-color:rgba(224,92,92,0.5); color:var(--red); }
.btn-signout { width:100%; background:transparent; border:1px solid var(--border2); border-radius:6px; color:var(--text2); font-size:12px; font-family:var(--font); padding:7px; cursor:pointer; transition:all 0.15s; }
.btn-signout:hover { background:rgba(224,92,92,0.1); color:var(--red); border-color:rgba(224,92,92,0.3); }
.text-muted { color:var(--text3); }
.text-mono { font-family:var(--mono); }
.url-link { color:var(--teal-light); text-decoration:none; font-size:12px; }
.url-link:hover { text-decoration:underline; }
.detail-grid { display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--border); border-radius:8px; overflow:hidden; margin-bottom:16px; }
.detail-cell { background:var(--bg2); padding:12px 16px; }
.detail-cell.span-2 { grid-column:span 2; }
.detail-key { font-size:11px; color:var(--text3); text-transform:uppercase; letter-spacing:0.06em; margin-bottom:3px; }
.detail-val { font-size:13px; color:var(--text); word-break:break-word; }

@keyframes fadeUp { from{opacity:0;transform:translateY(20px)} to{opacity:1;transform:translateY(0)} }
@keyframes spin { to{transform:rotate(360deg)} }
::-webkit-scrollbar { width:5px; height:5px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:var(--teal2); border-radius:3px; opacity:0.5; }