/* ========== Theme ==========  Clean + modern */
:root{
  --bg: #0b1220;
  --bg-soft: #0f172a;
  --panel: #ffffff;
  --panel-border: #e5e7eb;
  --text: #0f172a;
  --muted: #6b7280;
  --accent: #ef4444; /* red */
  --accent-dk: #b91c1c;
  --ok: #10b981;
  --warn: #f59e0b;
  --chip: #f8fafc;
  --table-stripe: #fbfbfd;

  /* Sidebar v2 */
  --side-w: 240px;
  --side-w-min: 72px;
  --side-bg: #0f172a;
  --side-bg-2: #0b1325;
  --side-fg: #e5e7eb;
  --side-fg-2: #94a3b8;
}

/* ========== Base ========== */
*{ box-sizing:border-box }
html,body{
  margin:0; padding:0;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  overflow-x:hidden;
}
body{
  min-height:100vh;
  background:
    radial-gradient(1100px 700px at 25% 10%, #334155 0%, #0f172a 55%, #0b1220 100%);
  color: var(--text);
}

/* ===== App shell ===== */
.layout{ display:grid; grid-template-columns: var(--side-w) 1fr; min-height:100vh; }
.layout main{ min-width:0 }
.layout .content{ display:flex; flex-direction:column }

/* ===== Header ===== */
.layout header{
  padding:14px 18px;
  border-bottom:1px solid rgba(255,255,255,.08);
  display:flex; gap:16px; align-items:center; justify-content:space-between;
}
.layout header .left, .layout header .right{ display:flex; gap:8px; align-items:center }
.badge{
  background:rgba(255,255,255,.08); color:#e5e7eb; border:1px solid rgba(255,255,255,.15);
  font-size:12px; padding:2px 10px; border-radius:999px;
}
.muted{ color:#cbd5e1 }

/* ===== Containers / cards ===== */
.container{ padding:16px 18px }
.tablewrap{ padding:16px; overflow-x:auto }
.cards{ display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:10px; margin:12px 0 }
.card{
  background:var(--panel);
  border:1px solid var(--panel-border);
  border-radius:14px;
  padding:12px;
  box-shadow:0 6px 20px rgba(0,0,0,.08);
}
.card .k{ font-size:12px; color:var(--muted) }
.card .v{ font-weight:700; font-size:18px }

/* Chips */
.deptchips{ display:flex; gap:6px; flex-wrap:wrap; margin:8px 0 }
.chip{
  padding:6px 10px; border:1px solid #eef2f7; border-radius:999px; background:var(--chip);
  font-size:12px; color:#0f172a;
}
.chip b{ font-weight:600 }

/* ===== Forms / inputs / buttons ===== */
.filters{ display:flex; gap:6px; flex-wrap:wrap; }
input[type="text"], input[type="number"], input[type="date"], input[type="month"], input[type="password"], select, textarea{
  padding:9px 10px; border:1px solid #e5e7eb; border-radius:10px; background:#fff; color:#0f172a; font-size:14px; min-height:38px;
}
select{ color:#0f172a !important }
a.btn, button.btn{
  padding:9px 12px; border-radius:10px; border:1px solid #e5e7eb; background:#fff; color:#0f172a;
  text-decoration:none; cursor:pointer; transition:transform .04s ease, box-shadow .12s ease;
}
a.btn:hover, button.btn:hover{ transform: translateY(-1px); box-shadow:0 4px 10px rgba(0,0,0,.08) }
a.btn.accent, button.btn.accent{
  background:linear-gradient(135deg,var(--accent),var(--accent-dk)); color:#fff; border:0;
}
a.btn.ghost, button.btn.ghost{
  background:transparent; color:#e5e7eb; border:1px solid rgba(255,255,255,.15)
}

/* Inline help “?” dot */
.info{
  display:inline-flex; align-items:center; justify-content:center;
  width:18px; height:18px; font-size:12px; border-radius:50%;
  background:#0f172a; color:#e5e7eb; border:1px solid rgba(255,255,255,.2);
}

/* ===== Panels ===== */
.panel{
  background:var(--panel); border:1px solid var(--panel-border);
  border-radius:14px; overflow:hidden; margin:12px auto; max-width:1100px;
  box-shadow:0 6px 20px rgba(0,0,0,.1);
}
.panel summary{
  padding:14px 16px; font-weight:600; cursor:pointer; display:flex; align-items:center; justify-content:space-between;
  list-style:none;
}
.panel .inner{ padding:12px 16px; border-top:1px solid #f0f0f0 }

/* ===== Banner (alerts) ===== */
.banner{
  background:#eaf7ea; border:1px solid #b7e0b7; color:#205c20;
  padding:8px 12px; border-radius:6px; margin:10px 16px;
}
.banner.warn{ background:#fff7ed; border-color:#fde68a; color:#92400e }
.banner.err{ background:#fef2f2; border-color:#fecaca; color:#991b1b }

/* ===== Table ===== */
table{
  width:100%;
  border-collapse:separate; border-spacing:0;
  background:#fff; font-size:14px;
  border:1px solid #eef2f7; border-radius:12px; overflow:hidden;
  table-layout:auto;
}
thead th{
  position:sticky; top:0; z-index:2;
  background:#f8fafc; color:#0f172a; font-weight:600;
  border-bottom:1px solid #e5e7eb;
  border-right:1px solid #eef2f7;
  padding:10px;
  white-space:normal;
  word-break:break-word;
  line-height:1.25;
  min-width:120px;
}
thead th.sticky{ left:0 }
thead th:last-child{ border-right:none }

tbody td{
  padding:10px; text-align:left; white-space:nowrap; border-right:1px solid #f1f5f9;
}
tbody td:last-child{ border-right:none }
tbody tr{ border-bottom:1px solid #f1f5f9 }
tbody tr:nth-child(even){ background:var(--table-stripe) }
tbody tr:hover{ background:#f6f8ff }

td .tag{
  font-size:12px; padding:2px 8px; border-radius:999px; border:1px solid #e5e7eb; color:#334155; background:#f8fafc;
}

/* Sticky first column */
th.sticky, td.sticky,
th:first-child, td:first-child{
  position:sticky; left:0; background:#f8fafc; z-index:3;
  box-shadow: 4px 0 0 #f8fafc;
  border-right:1px solid #e5e7eb;
}

/* Row highlights */
.hi{ background:#fff7ed !important }
.has-advance td{ background:#fff3f3 }

/* Small cell style */
.achv{ font-size:12px; color:#475569 }

/* Column show/hide helper */
.col-hidden{ display:none !important }

/* Editable */
td[contenteditable="true"], .editable{ outline:0; border-radius:6px; }
td[contenteditable="true"]:focus, .editable:focus-within{
  box-shadow: inset 0 0 0 2px rgba(79,70,229,.25);
  background:#fafaff;
}

/* Tags */
.tag{ font-size:12px; padding:2px 8px; border-radius:999px; border:1px solid #e5e7eb; color:#334155; background:#f8fafc; }
.tag.warn{ border-color:#fde68a; color:#92400e; background:#fffbeb }
.tag.ok{ border-color:#a7f3d0; color:#065f46; background:#ecfdf5 }
.tag.danger{ border-color:#fecaca; color:#991b1b; background:#fef2f2 }

/* Pagination links inside muted text */
.layout .muted a{ color:#e5e7eb; text-decoration:none; border-bottom:1px dashed rgba(255,255,255,.3) }
.layout .muted a:hover{ border-bottom-color:transparent }

/* Width helpers */
.w60{ width:60px } .w80{ width:80px } .w90{ width:90px }
.edit-input{ width:130px }

/* ========== Sidebar v2 (simple & fast) ========== */
.sidenav{
  position:sticky; top:0; height:100vh;
  background:linear-gradient(180deg,var(--side-bg),var(--side-bg-2));
  color:var(--side-fg); border-right:1px solid rgba(255,255,255,.08);
  display:flex; flex-direction:column; gap:8px; overflow:auto;
}
.sidenav-header{ padding:14px 14px 8px 14px; display:flex; align-items:center; }
.sidenav .brand{ color:#fff; text-decoration:none; font-weight:700; letter-spacing:.2px; }
.sidenav-nav{ display:flex; flex-direction:column; padding:6px; }

.snav{
  display:flex; align-items:center; gap:10px;
  padding:10px 10px; border-radius:10px; color:var(--side-fg-2); text-decoration:none;
}
.snav:hover{ background:rgba(255,255,255,.06); color:var(--side-fg); }
.snav.active{ background:rgba(239,68,68,.12); color:#fff; }
.snav svg{ width:20px; height:20px; fill:currentColor; flex:0 0 20px; }

/* Collapsed (desktop) */
.sidenav.collapsed{ width: var(--side-w-min); }
.sidenav.collapsed .snav span,
.sidenav.collapsed .brand{ display:none; }

/* Header burger (single) */
.burger{
  border:0; background:transparent; cursor:pointer;
  width:40px; height:40px; border-radius:10px;
  display:inline-flex; align-items:center; justify-content:center;
  margin-right:6px;
}
.burger span{ display:block; width:18px; height:2px; background:#e5e7eb; border-radius:99px; position:relative; }
.burger span + span{ margin-top:4px }

/* ===== Responsive ===== */
@media (max-width: 980px){
  .layout{ grid-template-columns: 1fr }

  .filters{ width:100% }
  .cards{ grid-template-columns:repeat(auto-fit,minmax(140px,1fr)) }

  thead th{ font-size:13px; min-width:100px; padding:8px }
  tbody td{ font-size:13px; padding:8px; white-space:normal }

  th:first-child, td:first-child{
    position:sticky; left:0; background:#f8fafc; box-shadow: 4px 0 0 #f8fafc; z-index:3;
  }

  /* Sidebar off-canvas */
  .sidenav{
    position:fixed; left:0; top:0; bottom:0; transform:translateX(-100%);
    width:var(--side-w); z-index:1000; transition:transform .2s ease;
  }
  body.nav-open .sidenav{ transform:translateX(0) }

  /* Dimmer layer */
  body.nav-open::after{
    content:""; position:fixed; inset:0; background:rgba(0,0,0,.4); z-index:999;
  }
}