:root{
  --sand-50:#F8F4EC;
  --sand-100:#F1E9D8;
  --sand-200:#E4D6BC;
  --deep-blue:#1C3A5E;
  --deep-blue-2:#2C5282;
  --orange:#F0A15E;
  --ink:#1B2430;
  --ink-soft:#4C5A6B;
  --glass-bg:rgba(255,255,255,0.55);
  --glass-bg-strong:rgba(255,255,255,0.72);
  --glass-border:rgba(255,255,255,0.6);
  --shadow:0 8px 32px rgba(28,58,94,0.12);
  --radius:24px;
  --radius-sm:16px;
  --bg-gradient: radial-gradient(circle at 15% 0%, #FBF7EF 0%, #F1E7D3 45%, #E7DAC0 100%);
  --success:#3E8E6B;
  --danger:#D9694F;
  --warning:#F0A15E;
  --text-max:#12202F;
}
[data-theme="dark"]{
  --sand-50:#0B1420;
  --sand-100:#101C2B;
  --sand-200:#16263A;
  --deep-blue:#8FB6E8;
  --deep-blue-2:#5B8DEF;
  --orange:#F0A15E;
  --ink:#E7EEF6;
  --ink-soft:#9FB1C4;
  --glass-bg:rgba(20,32,48,0.55);
  --glass-bg-strong:rgba(22,36,54,0.75);
  --glass-border:rgba(255,255,255,0.08);
  --shadow:0 8px 32px rgba(0,0,0,0.4);
  --bg-gradient: radial-gradient(circle at 15% 0%, #16263A 0%, #0E1926 45%, #080F18 100%);
  --text-max:#F3F7FC;
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  font-family:'Roboto',system-ui,sans-serif;
  font-weight:700;
  background:var(--bg-gradient);
  color:var(--ink);
  min-height:100vh;
  -webkit-font-smoothing:antialiased;
}
.hidden{display:none !important;}
h1,h2,h3{font-weight:900; margin:0; color:var(--text-max);}
p{color:var(--ink-soft); font-weight:500;}

.glass{
  background:var(--glass-bg);
  backdrop-filter:blur(24px) saturate(160%);
  -webkit-backdrop-filter:blur(24px) saturate(160%);
  border:1px solid var(--glass-border);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
}

/* ---------- Empty state ---------- */
.empty-state{
  min-height:100vh;
  display:flex; align-items:center; justify-content:center;
  padding:24px;
}
.empty-glass{
  background:var(--glass-bg-strong);
  backdrop-filter:blur(30px) saturate(160%);
  border:1px solid var(--glass-border);
  border-radius:32px;
  box-shadow:var(--shadow);
  padding:56px 48px;
  max-width:480px;
  text-align:center;
  display:flex; flex-direction:column; align-items:center; gap:14px;
}
.empty-logo{display:flex; align-items:center; gap:12px; margin-bottom:8px;}
.logo-mark{
  width:44px;height:44px;border-radius:14px;
  background:linear-gradient(145deg, var(--deep-blue-2), var(--deep-blue));
  color:#fff; display:flex; align-items:center; justify-content:center;
  font-weight:900; font-size:15px; letter-spacing:0.5px;
  box-shadow:0 4px 14px rgba(28,58,94,0.35);
}
.logo-mark.small{width:36px;height:36px;font-size:13px;border-radius:11px;}
.logo-text{display:flex; flex-direction:column; align-items:flex-start;}
.logo-text strong{font-size:15px; color:var(--text-max);}
.logo-text small{font-size:11px; color:var(--ink-soft); font-weight:600;}
.empty-glass h1{font-size:26px; margin-top:6px;}
.empty-glass p{font-size:14px; max-width:360px;}
.btn-upload{
  margin-top:18px;
  display:flex; align-items:center; gap:10px;
  background:linear-gradient(145deg, var(--deep-blue-2), var(--deep-blue));
  color:#fff; padding:16px 30px; border-radius:18px;
  font-weight:700; font-size:15px; cursor:pointer;
  box-shadow:0 10px 24px rgba(28,58,94,0.3);
  transition:transform .15s ease, box-shadow .15s ease;
}
.btn-upload:hover{transform:translateY(-2px); box-shadow:0 14px 30px rgba(28,58,94,0.4);}
.btn-upload.dragover{outline:2px dashed var(--orange);}
.empty-hint{font-size:11px; color:var(--ink-soft); font-weight:600; letter-spacing:1px;}
.progress-wrap{width:100%; margin-top:10px; display:flex; flex-direction:column; gap:6px;}

.progress-bar{width:100%; height:8px; border-radius:20px; background:var(--sand-200); overflow:hidden;}
.progress-fill{height:100%; width:0%; background:linear-gradient(90deg, var(--deep-blue-2), var(--orange)); transition:width .2s ease;}
#empty-progress-label{font-size:12px; color:var(--ink-soft);}

/* ---------- Shell ---------- */
.app-shell{min-height:100vh;}
.topbar{
  position:sticky; top:0; z-index:40;
  margin:14px 16px 0 16px;
  padding:10px 18px;
  display:flex; align-items:center; gap:18px;
  border-radius:20px;
}
.topbar-left{display:flex; align-items:center; gap:10px;}
.topbar-search{
  flex:1; max-width:460px;
  display:flex; align-items:center; gap:8px;
  background:var(--sand-50); border-radius:14px; padding:9px 14px;
  color:var(--ink-soft);
}
.topbar-search input{
  border:none; background:transparent; outline:none; width:100%;
  font-family:inherit; font-weight:500; font-size:13px; color:var(--ink);
}
.topbar-right{display:flex; align-items:center; gap:8px; margin-left:auto;}
.avatar{
  width:34px;height:34px;border-radius:50%;
  background:linear-gradient(145deg, var(--orange), #E8895A);
  color:#fff; display:flex; align-items:center; justify-content:center; font-weight:900; font-size:13px;
}

.chip-btn{
  display:flex; align-items:center; gap:6px;
  background:var(--sand-50); color:var(--ink); border:1px solid var(--glass-border);
  padding:9px 14px; border-radius:12px; font-weight:700; font-size:12.5px;
  cursor:pointer; transition:transform .12s ease;
  font-family:inherit;
}
.chip-btn:hover{transform:translateY(-1px);}
.chip-btn.danger{color:var(--danger);}
.chip-btn.small{padding:7px 10px; font-size:11.5px;}
.icon-btn{
  width:36px;height:36px;border-radius:12px; border:1px solid var(--glass-border);
  background:var(--sand-50); color:var(--ink); display:flex; align-items:center; justify-content:center;
  cursor:pointer;
}

.body-layout{display:flex; gap:16px; padding:16px; align-items:flex-start;}
.sidebar{
  width:220px; flex-shrink:0; padding:16px 12px; display:flex; flex-direction:column; gap:4px;
  position:sticky; top:96px;
}
.nav-item{
  display:flex; align-items:center; gap:10px;
  background:transparent; border:none; color:var(--ink-soft);
  padding:11px 14px; border-radius:14px; font-weight:700; font-size:13.5px;
  cursor:pointer; text-align:left; font-family:inherit; position:relative;
}
.nav-item:hover{background:var(--sand-50); color:var(--ink);}
.nav-item.active{background:linear-gradient(145deg, var(--deep-blue-2), var(--deep-blue)); color:#fff; box-shadow:0 6px 16px rgba(28,58,94,0.25);}
.nav-badge{
  margin-left:auto; background:var(--danger); color:#fff; font-size:10px; padding:2px 7px; border-radius:20px;
}
.sidebar-footer{margin-top:16px; padding-top:14px; border-top:1px solid var(--glass-border);}
.db-status{display:flex; align-items:center; gap:8px; font-size:11px; color:var(--ink-soft); font-weight:600;}
.db-status .dot{width:8px;height:8px;border-radius:50%; background:var(--danger); display:inline-block;}

.content{flex:1; min-width:0; display:flex; flex-direction:column; gap:18px;}
.tab-panel{display:flex; flex-direction:column; gap:18px;}
.panel-header{display:flex; align-items:center; justify-content:space-between;}
.link-btn{background:none;border:none;color:var(--deep-blue-2); font-weight:700; font-size:12.5px; cursor:pointer; font-family:inherit;}

/* KPI grid */
.kpi-grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(190px,1fr)); gap:14px;}
.kpi-card{
  background:var(--glass-bg); border:1px solid var(--glass-border); border-radius:var(--radius-sm);
  padding:16px; box-shadow:var(--shadow); cursor:pointer; transition:transform .15s ease;
  display:flex; flex-direction:column; gap:6px; backdrop-filter:blur(20px);
}
.kpi-card:hover{transform:translateY(-3px);}
.kpi-card .kpi-label{font-size:11px; color:var(--ink-soft); text-transform:uppercase; letter-spacing:.4px; font-weight:700;}
.kpi-card .kpi-value{font-size:26px; font-weight:900; color:var(--text-max);}
.kpi-card .kpi-sub{font-size:11px; font-weight:600;}
.kpi-card.alert{border-color:rgba(240,161,94,0.6);}
.kpi-card .kpi-sub.up{color:var(--success);}
.kpi-card .kpi-sub.down{color:var(--danger);}

.grid-2{display:grid; grid-template-columns:1fr 1fr; gap:14px;}
.grid-3{display:grid; grid-template-columns:repeat(3,1fr); gap:14px;}
.grid-4{display:grid; grid-template-columns:repeat(4,1fr); gap:14px;}
@media (max-width:1100px){.grid-2,.grid-3,.grid-4{grid-template-columns:1fr;}}

.card{padding:18px; display:flex; flex-direction:column; gap:12px;}
.card h3{font-size:14px;}

.top-list{display:flex; flex-direction:column; gap:8px; max-height:280px; overflow:auto;}
.top-row{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:9px 12px; border-radius:12px; background:var(--sand-50); cursor:pointer;
  font-size:12.5px; font-weight:700;
}
.top-row:hover{background:var(--sand-100);}
.top-row .tag{background:var(--danger); color:#fff; font-size:11px; padding:2px 8px; border-radius:20px;}
.top-row .tag.muted{background:var(--sand-200); color:var(--ink);}

/* Table */
.table-wrap{padding:0; overflow:auto; max-height:70vh;}
table{border-collapse:collapse; width:100%; font-size:12px;}
thead th{
  position:sticky; top:0; background:var(--glass-bg-strong); backdrop-filter:blur(20px);
  padding:10px 12px; text-align:left; font-size:11px; text-transform:uppercase; letter-spacing:.3px;
  color:var(--ink-soft); border-bottom:1px solid var(--glass-border); white-space:nowrap;
}
th .th-inner{display:flex; align-items:center; gap:6px;}
th .filter-btn{cursor:pointer; opacity:.7; font-size:11px;}
th .filter-btn.active{opacity:1; color:var(--deep-blue-2);}
tbody td{padding:9px 12px; border-bottom:1px solid var(--glass-border); white-space:nowrap; max-width:220px; overflow:hidden; text-overflow:ellipsis;}
tbody tr{cursor:pointer;}
tbody tr:hover{background:var(--sand-50);}
.status-pill{padding:3px 9px; border-radius:20px; font-size:10.5px; font-weight:800;}
.status-approved{background:rgba(62,142,107,0.18); color:var(--success);}
.status-rejected{background:rgba(217,105,79,0.18); color:var(--danger);}
.status-partial{background:rgba(240,161,94,0.22); color:#B5703A;}
.status-other{background:var(--sand-200); color:var(--ink-soft);}

.col-filter-popover{
  position:absolute; z-index:60; background:var(--glass-bg-strong); backdrop-filter:blur(24px);
  border:1px solid var(--glass-border); border-radius:14px; padding:10px; width:220px; box-shadow:var(--shadow);
  display:flex; flex-direction:column; gap:8px;
}
.col-filter-popover input[type=text]{
  width:100%; padding:7px 9px; border-radius:8px; border:1px solid var(--glass-border); font-family:inherit; font-size:11.5px;
  background:var(--sand-50); color:var(--ink);
}
.col-filter-popover .cf-values{max-height:160px; overflow:auto; display:flex; flex-direction:column; gap:4px;}
.col-filter-popover label{display:flex; align-items:center; gap:6px; font-size:11.5px; font-weight:600; color:var(--ink);}
.col-filter-popover .cf-actions{display:flex; justify-content:space-between; gap:6px; margin-top:4px;}
.col-filter-popover button{
  font-family:inherit; font-size:11px; font-weight:700; padding:6px 8px; border-radius:8px; border:none; cursor:pointer;
  background:var(--deep-blue-2); color:#fff;
}
.col-filter-popover button.ghost{background:transparent; color:var(--ink-soft);}

.export-row{display:flex; gap:8px;}

/* Map */
.map-layout{display:grid; grid-template-columns:2fr 1fr; gap:16px;}
@media (max-width:1000px){.map-layout{grid-template-columns:1fr;}}
.map-card{padding:12px;}
.map-container{position:relative; width:100%; border-radius:16px; overflow:hidden;}
.map-container img{width:100%; display:block; border-radius:16px;}
#map-markers{position:absolute; inset:0;}
.map-marker{
  position:absolute; transform:translate(-50%,-50%);
  width:26px;height:26px;border-radius:50%;
  background:radial-gradient(circle, var(--orange), #D9694F);
  color:#fff; font-size:10px; font-weight:900; display:flex; align-items:center; justify-content:center;
  box-shadow:0 0 0 3px rgba(255,255,255,0.6), 0 4px 10px rgba(0,0,0,0.3); cursor:pointer;
  border:1px solid rgba(255,255,255,0.8);
}
.map-marker:hover{filter:brightness(1.1); transform:translate(-50%,-50%) scale(1.12);}

/* Risk bars */
.risk-bars{display:flex; flex-direction:column; gap:12px;}
.risk-row{display:flex; flex-direction:column; gap:5px;}
.risk-row .risk-label{display:flex; justify-content:space-between; font-size:12px; font-weight:700;}
.risk-track{height:9px; border-radius:20px; background:var(--sand-200); overflow:hidden;}
.risk-fill{height:100%; border-radius:20px; background:linear-gradient(90deg, var(--deep-blue-2), var(--orange));}

/* Modal */
.modal-backdrop{
  position:fixed; inset:0; background:rgba(10,18,28,0.45); backdrop-filter:blur(4px);
  display:flex; align-items:center; justify-content:center; z-index:100; padding:20px;
}
.modal{
  width:min(720px, 100%); max-height:85vh; overflow:auto; padding:0; border-radius:26px;
}
.modal-header{
  display:flex; align-items:center; justify-content:space-between; padding:18px 22px;
  border-bottom:1px solid var(--glass-border); position:sticky; top:0; background:var(--glass-bg-strong); backdrop-filter:blur(20px);
}
.modal-body{padding:20px 22px; display:flex; flex-direction:column; gap:14px;}
.detail-grid{display:grid; grid-template-columns:1fr 1fr; gap:10px 18px;}
.detail-field{display:flex; flex-direction:column; gap:2px;}
.detail-field .df-label{font-size:10px; text-transform:uppercase; letter-spacing:.4px; color:var(--ink-soft); font-weight:700;}
.detail-field .df-value{font-size:13px; font-weight:700; color:var(--text-max); word-break:break-word;}
.detail-row-mini{
  padding:10px 12px; border-radius:12px; background:var(--sand-50); font-size:12px; font-weight:700;
  display:flex; justify-content:space-between; gap:10px; cursor:pointer;
}
.detail-row-mini:hover{background:var(--sand-100);}
.share-row{display:flex; gap:8px; flex-wrap:wrap;}

.toast{
  position:fixed; bottom:24px; left:50%; transform:translateX(-50%);
  background:var(--ink); color:#fff; padding:12px 20px; border-radius:14px; font-size:13px; font-weight:700;
  box-shadow:var(--shadow); z-index:200;
}
[data-theme="dark"] .toast{background:#EAF1F9; color:#0B1420;}

::-webkit-scrollbar{width:8px; height:8px;}
::-webkit-scrollbar-thumb{background:var(--sand-200); border-radius:20px;}