/* ==============================================================
   EMIS — Economic Mapping Information System
   Shared stylesheet. Same brand palette as the Femi & Times
   landing page (warm paper + forest green + amber), refined
   for a denser, data-heavy admin interface.
   ============================================================== */

:root{
  --paper:#FAF9F6;
  --paper-alt:#F1EFE9;
  --line:#E4E1D8;
  --ink:#16241D;
  --ink-soft:#4A544C;
  --ink-faint:#828A82;
  --forest:#1F4A3A;
  --forest-deep:#153228;
  --amber:#C68A3D;
  --amber-soft:#F6ECDA;
  --sage:#EEF3EE;
  --red:#B3432F;
  --red-soft:#F8E9E5;
  --sidebar-w:248px;
}

*{ box-sizing:border-box; }

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:'Inter',-apple-system,BlinkMacSystemFont,sans-serif;
  font-size:14px;
}

.serif{ font-family:'Fraunces',serif; }
.mono{ font-family:'JetBrains Mono',monospace; }

a{ color:inherit; text-decoration:none; }

/* ---------------- Layout shell ---------------- */

.app-shell{ display:flex; min-height:100vh; }

.sidebar{
  width:var(--sidebar-w);
  background:var(--forest-deep);
  color:#EDEEE9;
  flex-shrink:0;
  position:fixed;
  top:0; bottom:0; left:0;
  overflow-y:auto;
  z-index:40;
}

.main-area{
  margin-left:var(--sidebar-w);
  flex:1;
  min-width:0;
  display:flex;
  flex-direction:column;
}

.topbar{
  background:#fff;
  border-bottom:1px solid var(--line);
  padding:14px 28px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  position:sticky;
  top:0;
  z-index:30;
}

.page-content{ padding:28px; flex:1; }

@media (max-width: 900px){
  .sidebar{ transform: translateX(-100%); transition: transform .2s ease; }
  .sidebar.open{ transform: translateX(0); }
  .main-area{ margin-left:0; }
}

/* ---------------- Sidebar ---------------- */

.sidebar-brand{
  display:flex;
  align-items:center;
  gap:10px;
  padding:20px 20px 18px;
  border-bottom:1px solid rgba(255,255,255,0.08);
}
.sidebar-brand .mark{
  width:32px; height:32px;
  border-radius:8px;
  background:var(--amber);
  display:flex; align-items:center; justify-content:center;
  color:#16241D;
  font-size:13px;
}

.sidebar-section-label{
  font-family:'JetBrains Mono',monospace;
  font-size:10.5px;
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:rgba(237,238,233,0.4);
  padding:18px 20px 6px;
}

.sidebar-link{
  display:flex;
  align-items:center;
  gap:11px;
  padding:9px 20px;
  font-size:13.5px;
  color:rgba(237,238,233,0.75);
  border-left:2px solid transparent;
  transition: background .15s ease, color .15s ease;
}
.sidebar-link i{ width:16px; text-align:center; font-size:13px; }
.sidebar-link:hover{ background:rgba(255,255,255,0.05); color:#fff; }
.sidebar-link.active{
  background:rgba(255,255,255,0.07);
  color:#fff;
  border-left-color:var(--amber);
  font-weight:500;
}

/* ---------------- Topbar ---------------- */

.topbar-title{ font-family:'Fraunces',serif; font-size:19px; }
.topbar-user{ display:flex; align-items:center; gap:10px; font-size:13px; color:var(--ink-soft); }
.topbar-user .avatar{
  width:30px; height:30px;
  border-radius:50%;
  background:var(--sage);
  color:var(--forest);
  display:flex; align-items:center; justify-content:center;
  font-weight:600;
  font-size:12px;
}

/* ---------------- Buttons ---------------- */

.btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:9px 16px;
  border-radius:8px;
  font-size:13.5px;
  font-weight:600;
  border:1px solid transparent;
  cursor:pointer;
  transition: background .15s ease, border-color .15s ease, transform .1s ease;
}
.btn i{ font-size:12px; }
.btn-primary{ background:var(--forest); color:#fff; }
.btn-primary:hover{ background:var(--forest-deep); }
.btn-secondary{ background:#fff; border-color:var(--line); color:var(--ink); }
.btn-secondary:hover{ border-color:var(--forest); background:var(--sage); }
.btn-danger{ background:#fff; border-color:var(--red); color:var(--red); }
.btn-danger:hover{ background:var(--red-soft); }
.btn-sm{ padding:6px 11px; font-size:12.5px; border-radius:6px; }
.btn:active{ transform: translateY(1px); }

/* ---------------- Cards / panels ---------------- */

.panel{ background:#fff; border:1px solid var(--line); border-radius:12px; }
.panel-header{
  padding:16px 20px;
  border-bottom:1px solid var(--line);
  display:flex;
  align-items:center;
  justify-content:space-between;
}
.panel-header h2{ font-family:'Fraunces',serif; font-size:17px; margin:0; font-weight:500; }
.panel-body{ padding:20px; }

.stat-card{ background:#fff; border:1px solid var(--line); border-radius:12px; padding:18px 20px; }
.stat-card .stat-value{ font-family:'Fraunces',serif; font-size:28px; color:var(--forest); }
.stat-card .stat-label{
  font-size:12px; color:var(--ink-faint);
  text-transform:uppercase; letter-spacing:0.06em; margin-top:4px;
}
.stat-card .stat-icon{
  width:38px; height:38px;
  border-radius:9px;
  background:var(--sage);
  color:var(--forest);
  display:flex; align-items:center; justify-content:center;
  margin-bottom:12px;
  font-size:15px;
}

/* ---------------- Tables ---------------- */

.data-table{ width:100%; border-collapse:collapse; font-size:13.5px; }
.data-table th{
  text-align:left;
  padding:11px 16px;
  background:var(--paper-alt);
  color:var(--ink-soft);
  font-weight:600;
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:0.04em;
  border-bottom:1px solid var(--line);
}
.data-table td{ padding:12px 16px; border-bottom:1px solid var(--line); vertical-align:middle; }
.data-table tr:hover td{ background:var(--paper-alt); }
.data-table .row-actions{ display:flex; gap:6px; justify-content:flex-end; }

/* ---------------- Badges ---------------- */

.badge{
  display:inline-flex; align-items:center; gap:5px;
  padding:3px 10px; border-radius:99px;
  font-size:11.5px; font-weight:600;
}
.badge-active{ background:var(--sage); color:var(--forest); }
.badge-inactive{ background:#F1EFE9; color:var(--ink-faint); }
.badge-proposed{ background:var(--amber-soft); color:var(--amber); }
.badge-verified{ background:var(--sage); color:var(--forest); }
.badge-unverified{ background:var(--red-soft); color:var(--red); }

/* ---------------- Forms ---------------- */

.form-group{ margin-bottom:16px; }
.form-label{ display:block; font-size:13px; font-weight:600; margin-bottom:6px; color:var(--ink); }
.form-hint{ font-size:12px; color:var(--ink-faint); margin-top:4px; }
.form-control{
  width:100%;
  padding:9px 12px;
  border:1px solid var(--line);
  border-radius:8px;
  font-size:13.5px;
  font-family:inherit;
  background:#fff;
  color:var(--ink);
}
.form-control:focus{ outline:none; border-color:var(--forest); }
textarea.form-control{ resize:vertical; min-height:90px; }
.form-row{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
@media (max-width:700px){ .form-row{ grid-template-columns:1fr; } }

/* ---------------- Alerts / flash messages ---------------- */

.alert{
  padding:12px 16px; border-radius:8px; font-size:13.5px;
  margin-bottom:18px; display:flex; align-items:center; gap:10px;
}
.alert-success{ background:var(--sage); color:var(--forest); }
.alert-error{ background:var(--red-soft); color:var(--red); }

/* ---------------- Breadcrumb hierarchy trail ---------------- */

.hierarchy-trail{
  display:flex; align-items:center; flex-wrap:wrap; gap:6px;
  font-size:12.5px; color:var(--ink-faint); margin-bottom:16px;
}
.hierarchy-trail .seg{
  background:var(--paper-alt); border:1px solid var(--line);
  padding:4px 10px; border-radius:99px;
}
.hierarchy-trail i{ font-size:9px; }

/* ---------------- Search / filter bar ---------------- */

.filter-bar{ display:flex; flex-wrap:wrap; gap:10px; margin-bottom:18px; }
.filter-bar .form-control{ width:auto; min-width:160px; }
.filter-bar .search-input{ flex:1; min-width:220px; }

/* ---------------- Empty state ---------------- */

.empty-state{ text-align:center; padding:50px 20px; color:var(--ink-faint); }
.empty-state i{ font-size:28px; margin-bottom:12px; color:var(--line); }

/* ---------------- Login page ---------------- */

.login-shell{
  min-height:100vh; display:flex; align-items:center; justify-content:center;
  background:var(--paper); padding:20px;
}
.login-card{
  background:#fff; border:1px solid var(--line); border-radius:16px;
  padding:38px 34px; width:100%; max-width:380px;
}

/* ---------------- Map page specific ---------------- */

.map-shell{ display:grid; grid-template-columns:300px 1fr; height:calc(100vh - 65px); }
#emis-map{ width:100%; height:100%; }
.map-sidebar{ border-right:1px solid var(--line); background:#fff; overflow-y:auto; padding:18px; }
.map-info-panel{ position:absolute; bottom:20px; right:20px; width:300px; z-index:1000; }
@media (max-width:900px){
  .map-shell{ grid-template-columns:1fr; grid-template-rows:auto 1fr; }
}

.leaflet-popup-content-wrapper{ border-radius:10px; font-family:'Inter',sans-serif; }
.leaflet-popup-content{ margin:14px 16px; font-size:13px; }