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

:root{
  --navy-900:#0b1526;
  --navy-800:#11213b;
  --navy-700:#16304f;
  --navy-600:#1d3f67;
  --navy-500:#2b5586;
  --gold-400:#e0b84d;
  --gold-500:#c99a2e;
  --gold-600:#a97f1f;
}

*{ font-family:'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif; }

#map{height:520px;border-radius:14px}
.leaflet-popup-content{font-size:13px}

.icon{
  width:1.15em; height:1.15em;
  display:inline-block;
  flex-shrink:0;
  vertical-align:-0.2em;
  fill:none;
  stroke:currentColor;
}
.icon use{ fill:inherit; stroke:inherit; }

@media print{
  .no-print{display:none!important}
  .print-area{display:block!important}
}

/* ---------- Login ---------- */
.login-page{
  min-height:100vh;
  display:flex;
}

.login-brand{
  flex:1 1 50%;
  position:relative;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:64px;
  color:#fff;
  background:
    radial-gradient(900px 500px at 85% -10%, rgba(224,184,77,.14), transparent),
    linear-gradient(160deg, var(--navy-900) 0%, var(--navy-800) 55%, var(--navy-700) 100%);
}
.login-brand::after{
  content:'';
  position:absolute; inset:0;
  background:
    linear-gradient(90deg, transparent, transparent 99.6%, var(--gold-500) 99.6%);
  pointer-events:none;
}
.login-brand-inner{ max-width:440px; position:relative; z-index:1; }
.login-brand-logo{ height:52px; width:auto; margin-bottom:28px; }
.login-brand-title{ font-size:28px; font-weight:800; line-height:1.3; letter-spacing:-.01em; }
.login-brand-desc{ margin-top:12px; font-size:14px; color:#aebcd4; line-height:1.6; }

.login-unit-grid{
  display:grid; grid-template-columns:1fr 1fr; gap:10px;
  margin-top:28px;
}
.login-unit{
  display:flex; align-items:center; gap:8px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.1);
  border-radius:10px;
  padding:10px 12px;
  font-size:12.5px;
  color:#dbe4f1;
}
.login-unit .icon{ color:var(--gold-400); }

.login-brand-org{
  margin-top:28px;
  padding-top:20px;
  border-top:1px solid rgba(255,255,255,.1);
  font-size:12px;
  color:#8fa0bc;
  line-height:1.6;
}
.login-brand-org b{ color:#dbe4f1; }
.login-brand-footer{ position:absolute; bottom:24px; left:64px; font-size:11px; color:#5f7295; z-index:1; }

.login-form-panel{
  flex:1 1 50%;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  background:#f8fafc;
  padding:24px;
}
.login-mobile-logo{ display:none; height:40px; width:auto; margin-bottom:28px; }
.login-form-box{ width:100%; max-width:360px; }
.login-form-title{ font-size:22px; font-weight:800; color:#101c30; }
.login-form-sub{ margin-top:4px; font-size:13px; color:#64748b; }

#login input{
  border-color:#dbe3ef;
  background:#fff;
  transition:border-color .15s, box-shadow .15s;
}
#login input:focus{
  outline:none;
  border-color:var(--navy-500);
  box-shadow:0 0 0 3px rgba(43,85,134,.12);
}
#login button[onclick="login()"]{
  background:linear-gradient(135deg, var(--navy-700), var(--navy-600));
  letter-spacing:.02em;
  transition:filter .15s, transform .05s;
}
#login button[onclick="login()"]:hover{ filter:brightness(1.08); }
#login button[onclick="login()"]:active{ transform:translateY(1px); }
.login-form-footer{ margin-top:24px; font-size:11px; color:#94a3b8; text-align:center; }

@media (max-width: 860px){
  .login-brand{ display:none; }
  .login-form-panel{ flex:1 1 100%; }
  .login-mobile-logo{ display:block; }
}

/* ---------- App shell ---------- */
#app:not(.hidden){ min-height:100vh; display:flex; flex-direction:column; }

.topbar{
  height:64px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 20px;
  background:#fff;
  border-bottom:1px solid #e6eaf0;
  position:sticky; top:0; z-index:30;
}
.topbar .brand-mark{
  width:36px;height:36px;border-radius:10px;
  background:linear-gradient(135deg, var(--navy-700), var(--navy-500));
  display:flex;align-items:center;justify-content:center;
  font-size:18px; color:#fff;
  box-shadow:0 2px 6px rgba(17,33,59,.25);
}
.topbar .org-line{ color:#64748b; font-size:12px; }
.topbar #badge{
  background:var(--gold-500); color:#1a1304; font-weight:700;
  letter-spacing:.03em;
}
.hamburger{
  display:none;
  width:36px;height:36px;border-radius:8px;
  align-items:center;justify-content:center;
  border:1px solid #e2e8f0; background:#fff;
}

.app-shell{ flex:1; display:flex; min-height:0; }

.sidebar{
  width:248px;
  background:linear-gradient(195deg, var(--navy-900), var(--navy-800));
  color:#cbd5e6;
  flex-shrink:0;
  padding:18px 12px;
  display:flex;
  flex-direction:column;
  gap:4px;
  position:sticky;
  top:64px;
  align-self:flex-start;
  height:calc(100vh - 64px);
  overflow-y:auto;
}
.sidebar-section-label{
  font-size:11px; text-transform:uppercase; letter-spacing:.08em;
  color:#5f7295; padding:10px 12px 6px;
}
.sidebar-link{
  display:flex; align-items:center; gap:10px;
  padding:10px 12px; border-radius:10px;
  color:#c7d2e3; background:transparent; border:none;
  text-align:left; width:100%; font-size:14px; font-weight:500;
  cursor:pointer; transition:background .15s, color .15s;
  white-space:nowrap;
}
.sidebar-link:hover{ background:rgba(255,255,255,.06); color:#fff; }
.sidebar-link.active{
  background:var(--navy-600);
  color:#fff;
  box-shadow:inset 3px 0 0 0 var(--gold-500);
}
.sidebar-link .ico{ font-size:16px; width:20px; text-align:center; }
.sidebar-footer{
  margin-top:auto; padding:12px; font-size:11px; color:#5f7295; line-height:1.5;
  border-top:1px solid rgba(255,255,255,.08); padding-top:14px;
}

.content{
  flex:1; min-width:0;
  padding:22px 24px 64px;
  max-width:1200px;
}

/* ---------- Card polish ---------- */
.content .bg-white{
  border:1px solid #e9edf3;
  box-shadow:0 1px 2px rgba(16,24,40,.04), 0 1px 3px rgba(16,24,40,.03);
}

button{ transition:filter .15s, transform .05s; }
button:active{ transform:translateY(1px); }

.content h2.font-bold{ color:#101c30; letter-spacing:-.01em; }

/* ---------- Dashboard ---------- */
.kpi-banner{
  display:grid;
  grid-template-columns:repeat(5, 1fr);
  gap:0;
  border-radius:14px;
  overflow:hidden;
  background:linear-gradient(120deg, var(--navy-800), var(--navy-600));
  box-shadow:0 4px 14px rgba(11,21,38,.18);
}
.kpi{ padding:18px 20px; border-right:1px solid rgba(255,255,255,.12); }
.kpi:last-child{ border-right:none; }
.kpi-label{ font-size:11px; text-transform:uppercase; letter-spacing:.06em; color:#aebcd4; }
.kpi-value{ font-size:22px; font-weight:800; color:#fff; margin-top:4px; }

.stat-card{
  background:#fff; border-radius:12px; padding:14px 16px;
  border:1px solid #e9edf3; border-left:3px solid var(--accent, #2b5586);
  box-shadow:0 1px 2px rgba(16,24,40,.04);
}
.stat-top{ display:flex; align-items:center; justify-content:space-between; }
.stat-label{ font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:#64748b; }
.stat-ico{ width:28px; height:28px; border-radius:8px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.stat-ico .icon{ width:16px; height:16px; }
.stat-value{ font-size:24px; font-weight:800; color:#101c30; margin-top:8px; }
.stat-sub{ font-size:12px; color:#94a3b8; margin-top:2px; }

@media (max-width: 860px){
  .kpi-banner{ grid-template-columns:repeat(2, 1fr); }
  .kpi:nth-child(2){ border-right:none; }
}

/* ---------- Mobile ---------- */
@media (max-width: 860px){
  .hamburger{ display:flex; }
  .sidebar{
    position:fixed; left:0; top:64px; bottom:0; z-index:40;
    transform:translateX(-100%);
    transition:transform .2s ease;
    box-shadow:4px 0 16px rgba(0,0,0,.25);
  }
  .sidebar.sidebar-open{ transform:translateX(0); }
  .content{ padding:16px 14px 56px; }
}