:root{
  --bg:#0b1220;
  --surface:#0f1a2f;
  --surface-2:#0c1629;
  --border:#1c2b4a;
  --text:#e7eefc;
  --muted:#9bb0d3;
  --primary:#2560ec;
  --primary-2:#3b5bdb;
  --accent:#f36600;
  --success:#16a34a;
  --danger:#ef4444;
  --radius:18px;
  --shadow:0 18px 50px rgba(0,0,0,.35);
  --ff: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Noto Sans", "Liberation Sans", sans-serif;
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-family:var(--ff);
  background: radial-gradient(1200px 800px at 15% 0%, rgba(37,96,236,.25), transparent 55%),
              radial-gradient(1000px 700px at 85% 10%, rgba(243,102,0,.18), transparent 60%),
              var(--bg);
  color:var(--text);
}

a{ color:inherit; text-decoration:none; }
code{ color:#cfe0ff; }

.app{
  min-height:100vh;
  display:grid;
  grid-template-columns: 290px 1fr;
}

.sidebar{
  padding:18px;
  border-right:1px solid var(--border);
  background: linear-gradient(180deg, rgba(15,26,47,.92), rgba(12,22,41,.96));
}

.brand{ padding:14px 14px 18px; border:1px solid var(--border); border-radius:var(--radius); background: rgba(255,255,255,.02); box-shadow: inset 0 1px 0 rgba(255,255,255,.04); }
.logo{ font-weight:800; letter-spacing:.2px; font-size:1.2rem; }
.tag{ margin-top:6px; color:var(--muted); font-size:.9rem; }

.nav{ margin-top:14px; display:flex; flex-direction:column; gap:8px; }
.nav-item{
  padding:10px 12px;
  border:1px solid transparent;
  border-radius:14px;
  color:var(--text);
  background: transparent;
}
.nav-item:hover{ border-color:var(--border); background: rgba(255,255,255,.03); }
.nav-sep{ height:1px; background: var(--border); margin:8px 0; opacity:.8; }

.logout{ margin-top:14px; }
.userbox{ margin-top:18px; padding:12px; border:1px solid var(--border); border-radius:var(--radius); background: rgba(255,255,255,.02); }
.user-name{ font-weight:700; }
.user-sub{ color:var(--muted); font-size:.85rem; margin-top:4px; }

.main{ padding:18px 18px 28px; }
.topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:14px 16px;
  border:1px solid var(--border);
  border-radius:var(--radius);
  background: rgba(255,255,255,.02);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
}
.page-title{ margin:0; font-size:1.15rem; letter-spacing:.2px; }
.topbar-actions{ display:flex; gap:10px; align-items:center; }

.content{ margin-top:14px; }

.card{
  border:1px solid var(--border);
  border-radius:var(--radius);
  background: rgba(255,255,255,.02);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
  overflow:hidden;
}
.card-head{ padding:14px 16px; border-bottom:1px solid var(--border); }
.card-head h2, .card-head h3{ margin:0; }
.card-head p{ margin:8px 0 0; }

.table-wrap{ overflow:auto; }
.table{ width:100%; border-collapse:collapse; }
.table th, .table td{ padding:12px 14px; border-bottom:1px solid rgba(28,43,74,.7); text-align:left; }
.table th{ font-size:.85rem; color:var(--muted); font-weight:700; }
.table td{ font-size:.95rem; }
.table tr:hover td{ background: rgba(255,255,255,.02); }
.right{ text-align:right; }

.kpi{ display:grid; grid-template-columns: repeat(3,1fr); gap:12px; }
.kpi-card{ padding:16px; }
.kpi-label{ color:var(--muted); font-weight:700; }
.kpi-value{ font-size:1.9rem; font-weight:900; margin-top:6px; }
.kpi-sub{ margin-top:8px; }

.grid{ display:grid; gap:12px; }
.grid.cols-2{ grid-template-columns: repeat(2,1fr); }
.grid.cols-3{ grid-template-columns: repeat(3,1fr); }
.grid.cols-4{ grid-template-columns: repeat(4,1fr); }

.hstack{ display:flex; align-items:center; }
.hstack.gap{ gap:10px; }
.hstack.between{ justify-content:space-between; }
.mt{ margin-top:12px; }
.mb{ margin-bottom:12px; }
.pad{ padding:14px; }

.form{ padding:14px 16px 16px; display:flex; flex-direction:column; gap:12px; }
.form-tight{ padding:14px 16px 16px; }
.field{ display:flex; flex-direction:column; gap:7px; }
.field > span{ font-size:.86rem; color:var(--muted); font-weight:700; }
input, select{
  background: rgba(255,255,255,.03);
  border:1px solid var(--border);
  border-radius:14px;
  padding:10px 12px;
  color:var(--text);
  outline:none;
}
input:focus, select:focus{ border-color: rgba(37,96,236,.6); box-shadow: 0 0 0 4px rgba(37,96,236,.18); }

.btn{
  border:1px solid var(--border);
  background: rgba(255,255,255,.02);
  color:var(--text);
  border-radius:14px;
  padding:10px 12px;
  font-weight:800;
  cursor:pointer;
}
.btn:hover{ background: rgba(255,255,255,.04); }
.btn-primary{
  border-color: rgba(37,96,236,.7);
  background: linear-gradient(180deg, rgba(37,96,236,.95), rgba(59,91,219,.85));
}
.btn-primary:hover{ filter: brightness(1.03); }
.btn-ghost{ background: transparent; }
.btn-sm{ padding:7px 10px; font-size:.9rem; }

.badge{
  display:inline-flex;
  align-items:center;
  padding:4px 10px;
  border-radius:999px;
  border:1px solid rgba(28,43,74,.9);
  background: rgba(255,255,255,.02);
  font-size:.82rem;
  color:var(--muted);
}
.badge-active{ color:#b8f7c6; border-color: rgba(22,163,74,.35); }
.badge-inactive{ color:#ffd6a5; border-color: rgba(243,102,0,.35); }
.badge-terminated{ color:#ffb4b4; border-color: rgba(239,68,68,.35); }
.badge-pending{ color:#ffe9a8; border-color: rgba(245,158,11,.35); }
.badge-approved{ color:#b8f7c6; border-color: rgba(22,163,74,.35); }
.badge-rejected{ color:#ffb4b4; border-color: rgba(239,68,68,.35); }
.badge-cancelled{ color:#d5d7ff; border-color: rgba(99,102,241,.35); }

.alert{
  margin-top:12px;
  padding:12px 14px;
  border-radius:16px;
  border:1px solid var(--border);
  background: rgba(255,255,255,.02);
}
.alert-error{ border-color: rgba(239,68,68,.35); color:#ffd3d3; }
.alert-success{ border-color: rgba(22,163,74,.35); color:#c9ffd8; }

.chip{
  display:inline-flex;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(28,43,74,.9);
  color:#dbe7ff;
  background: rgba(37,96,236,.12);
  font-weight:800;
  font-size:.82rem;
}
.chip-soft{
  color: var(--muted);
  background: rgba(255,255,255,.02);
}

.note{
  padding:12px 14px;
  border-radius:16px;
  border:1px dashed rgba(28,43,74,.9);
  color:var(--muted);
  background: rgba(255,255,255,.01);
}

.mini{ padding:14px 16px; border:1px solid rgba(28,43,74,.8); border-radius:16px; background: rgba(255,255,255,.015); }
.mini-title{ font-weight:900; }
.mini-sub{ margin-top:6px; }

.auth{
  min-height: calc(100vh - 40px);
  display:grid;
  place-items:center;
}
.auth-card{ width: min(460px, 92vw); }
.hint{ color:var(--muted); font-size:.85rem; margin-top:6px; }

.input{ min-width: 260px; }

@media (max-width: 980px){
  .app{ grid-template-columns: 1fr; }
  .sidebar{ position: sticky; top:0; z-index:10; border-right:none; border-bottom:1px solid var(--border); }
  .nav{ flex-direction:row; flex-wrap:wrap; }
  .logout{ margin-top:10px; }
  .kpi{ grid-template-columns: 1fr; }
  .grid.cols-2, .grid.cols-3, .grid.cols-4{ grid-template-columns: 1fr; }
  .input{ min-width: 160px; }
}


/* v0.2 */
.branch-switch select{padding:.45rem .6rem;border:1px solid var(--border);border-radius:10px;background:var(--surface);color:var(--text);}
.pill{display:inline-block;padding:.18rem .5rem;border-radius:999px;font-size:.85rem;border:1px solid var(--border);}
.pill-ok{background:#e9fbef;}
.pill-warn{background:#fff4e6;}
.text-right{text-align:right;}
.small{font-size:.85rem;}