:root{
  --brand:#1a7456; --brand-dark:#155040; --ink:#1b1f24; --muted:#6b7280;
  --bg:#ffffff; --card:#ffffff; --line:#e5e7eb; --radius:1rem;
  --sidebar-w:260px; --sidebar-w-sm:80px; --transition:.18s ease;
}
html, body { height:100%; }
body { background:var(--bg); color:var(--ink); overflow:hidden; }

/* Grid */
.app{ display:grid; grid-template-columns:var(--sidebar-w) 1fr; height:100vh; transition:grid-template-columns var(--transition); }

/* Sidebar */
.sidebar{ background:var(--brand); color:#fff; width:var(--sidebar-w); transition:width var(--transition); overflow-y:auto; -webkit-overflow-scrolling:touch; }
.sidebar.shrink{ width:var(--sidebar-w-sm); }
.sidebar .brand{ display:flex; align-items:center; gap:.6rem; padding:1rem 1rem; font-weight:700; letter-spacing:.2px; }
.sidebar .brand .text{ white-space:nowrap; }
.sidebar .nav-link{ color:#e8fff6; border-radius:.6rem; display:flex; align-items:center; gap:.6rem; }
.sidebar .nav-link:hover, .sidebar .nav-link.active{ background:rgba(255,255,255,.16); color:#fff; }
.sidebar .nav-label{ white-space:nowrap; }

/* Main column */
main{ display:flex; flex-direction:column; min-width:0; min-height:0; overflow:auto; -webkit-overflow-scrolling:touch; background:var(--bg); }
.topbar{ position:sticky; top:0; z-index:1020; background:var(--brand-dark); color:#fff; }
.btn-ghost{ border:1px solid rgba(255,255,255,.6); color:#fff; background:transparent; }
.btn-ghost:hover{ background:rgba(255,255,255,.12); }
.card{ border:1px solid var(--line); background:var(--card); border-radius:var(--radius); }

/* KPI */
.kpi{ display:flex; gap:.75rem; align-items:flex-start; }
.kpi .icon{ width:44px; height:44px; border-radius:12px; display:grid; place-items:center; background:rgba(30,106,86,.12); color:var(--brand); font-size:1.2rem; }
.kpi .title{ font-size:.78rem; color:var(--muted); text-transform:uppercase; letter-spacing:.08em; }
.kpi .value{ font-size:1.55rem; font-weight:700; color:var(--brand); }
.table> :not(caption)>*>*{ background:transparent !important; }

/* Collapsed (>=lg) */
@media (min-width:992px){
  .sidebar.shrink .nav-label{ display:none; }
  .sidebar.shrink .brand .text{ display:none; }
  .app.shrink{ grid-template-columns:var(--sidebar-w-sm) 1fr; }
}

/* Mobile drawer */
@media (max-width:991.98px){
  .app{ grid-template-columns:1fr; }
  .sidebar{ position:fixed; inset:0 auto 0 0; width:min(82vw,320px); transform:translateX(-100%); transition:transform var(--transition); }
  .sidebar.show{ transform:none; }
  .sidebar-backdrop{ display:none; position:fixed; inset:0; background:rgba(0,0,0,.35); z-index:1025; }
  .sidebar-backdrop.show{ display:block; }
}


/* Toast container */
#toasts {
  position: fixed;
  z-index: 1080;
  top: 16px;            /* change to bottom:16px for bottom position */
  right: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  pointer-events: none; /* clicks pass through, except the toast itself */
}