:root {
  --ink:#eef1ea; --muted:#9db2a3; --line:#22362a; --bg:#0a1710; --card:#102318;
  --brand:#d1a838; --brand-dark:#a9861f; --nav:#0c1f14; --blue:#4f8fd6;
  --amber:#e0a52b; --red:#e2685e; --green:#4fbf87; --shadow:0 16px 42px rgba(0,0,0,.45);
  font-family: Tahoma, Arial, sans-serif;
}
* { box-sizing: border-box; }
body { margin:0; background:var(--bg); color:var(--ink); }
button,input,select { font:inherit; }
.hidden { display:none !important; }
.login { min-height:100vh; display:grid; place-items:center; padding:20px; background:radial-gradient(circle at 20% 20%,#1a3322,#06110a 60%); }
.login-card { width:min(420px,100%); background:var(--card); border:1px solid var(--line); border-radius:14px; padding:28px; box-shadow:var(--shadow); display:grid; gap:10px; }
.logo { width:62px; height:62px; border-radius:14px; background:var(--brand); color:#1a1405; display:grid; place-items:center; font-weight:900; }
.login h1 { margin:4px 0 0; font-size:30px; color:var(--ink); } .login p { margin:0 0 10px; color:var(--muted); }
input,select { min-height:42px; border:1px solid var(--line); border-radius:9px; padding:0 11px; background:#0d1f15; color:var(--ink); }
button { min-height:40px; border:1px solid var(--line); border-radius:9px; background:#0d1f15; color:var(--ink); cursor:pointer; padding:0 13px; font-weight:700; }
button.primary,.login button { background:var(--brand); border-color:var(--brand); color:#1a1405; }
.login small { color:var(--red); min-height:18px; }
.app { min-height:100vh; display:grid; grid-template-columns:280px 1fr; }
.sidebar { background:var(--nav); color:#fff; padding:20px 16px; display:flex; flex-direction:column; gap:18px; border-left:1px solid var(--line); }
.brand { display:grid; grid-template-columns:48px 1fr; gap:12px; align-items:center; }
.brand span { width:48px; height:48px; border-radius:10px; background:var(--brand); color:#1a1405; display:grid; place-items:center; font-weight:900; }
.brand b { display:block; font-size:20px; color:var(--brand); }
.brand small { display:block; color:#9db2a3; line-height:1.5; }
nav { display:grid; gap:7px; }
nav button { color:#c9d6cd; background:transparent; border:0; text-align:right; display:flex; justify-content:space-between; align-items:center; }
nav button.active, nav button:hover { background:rgba(209,168,56,.14); color:var(--brand); }
.logout { margin-top:auto; color:#fff; background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.12); }
.logout:hover { background:rgba(255,255,255,.12); }
main { min-width:0; }
.topbar { min-height:76px; background:var(--card); border-bottom:1px solid var(--line); display:flex; justify-content:space-between; align-items:center; gap:14px; padding:14px 24px; position:sticky; top:0; z-index:4; }
.topbar h1 { margin:0; font-size:22px; } .topbar p { margin:4px 0 0; color:var(--muted); font-size:13px; }
.actions { display:flex; gap:9px; flex-wrap:wrap; }
.content { padding:22px 24px 34px; display:grid; gap:16px; }
.screen { display:none; gap:16px; } .screen.active { display:grid; }
.metrics { display:grid; grid-template-columns:repeat(4,minmax(150px,1fr)); gap:13px; }
.metric,.panel,.card { background:var(--card); border:1px solid var(--line); border-radius:10px; box-shadow:var(--shadow); }
.metric { padding:15px; min-height:110px; display:grid; align-content:space-between; grid-template-columns:1fr auto; }
.metric-icon { width:40px; height:40px; border-radius:10px; background:rgba(209,168,56,.15); color:var(--brand); display:grid; place-items:center; font-size:18px; grid-row:1/3; justify-self:start; }
.metric span,.card p { color:var(--muted); } .metric strong { font-size:28px; direction:ltr; text-align:right; color:var(--ink); } .metric small { color:var(--green); }
.grid { display:grid; grid-template-columns:minmax(0,1fr) 380px; gap:16px; }
.grid-3 { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }
.panel-head { min-height:58px; padding:13px 15px; border-bottom:1px solid var(--line); display:flex; justify-content:space-between; align-items:center; gap:12px; }
.panel-head h2 { margin:0; font-size:17px; }
.table-wrap { overflow-x:auto; }
table { width:100%; min-width:820px; border-collapse:collapse; }
th,td { padding:12px 13px; border-bottom:1px solid var(--line); text-align:right; white-space:nowrap; font-size:13px; }
th { background:#0d1f15; color:var(--muted); }
.list,.cards { padding:14px 15px; display:grid; gap:10px; }
.cards { grid-template-columns:repeat(2,minmax(0,1fr)); }
.card { padding:14px; box-shadow:none; }
.card b { display:block; margin-bottom:6px; }
.badge { display:inline-flex; border-radius:999px; padding:4px 10px; font-size:12px; font-weight:800; background:rgba(209,168,56,.16); color:var(--brand); }
.badge.warn { background:rgba(224,165,43,.16); color:var(--amber); } .badge.red { background:rgba(226,104,94,.16); color:var(--red); }
.request { border:1px solid var(--line); border-radius:10px; padding:12px; display:grid; grid-template-columns:1fr auto; gap:10px; align-items:center; }
.request b { display:block; margin-bottom:4px; } .request small { color:var(--muted); }
dialog { border:0; border-radius:14px; padding:0; width:min(760px,92vw); box-shadow:var(--shadow); background:var(--card); color:var(--ink); }
dialog::backdrop { background:rgba(0,0,0,.55); }
.modal { padding:20px; } .modal h2 { margin:0 0 14px; }
.form-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }
.form-grid.single { grid-template-columns:1fr; }
.modal small { color:var(--red); display:block; min-height:18px; margin-top:10px; }
menu { display:flex; justify-content:flex-start; gap:8px; padding:0; margin:16px 0 0; }
#toast { position:fixed; left:50%; bottom:22px; transform:translateX(-50%) translateY(20px); opacity:0; background:var(--brand); color:#1a1405; padding:12px 16px; border-radius:10px; transition:.18s; box-shadow:var(--shadow); font-weight:700; }
#toast.show { opacity:1; transform:translateX(-50%) translateY(0); }
@media (max-width:900px){ .app{grid-template-columns:1fr}.sidebar{position:static}.metrics{grid-template-columns:1fr 1fr}.grid,.grid-3{grid-template-columns:1fr}.topbar{align-items:flex-start;flex-direction:column} }
@media (max-width:560px){ .metrics{grid-template-columns:1fr}.content,.topbar{padding-left:14px;padding-right:14px}.request{grid-template-columns:1fr} }
.pager { display:flex; align-items:center; justify-content:center; gap:12px; padding:12px 15px; border-top:1px solid var(--line); font-size:13px; color:var(--muted); }
.pager button:disabled { opacity:.45; cursor:not-allowed; }
#employeeSearch { min-width:200px; }
.panel-head .actions { display:flex; gap:8px; flex-wrap:wrap; }
.lang-toggle { margin-top:8px; background:transparent; border:1px solid var(--line); font-size:12px; padding:4px 10px; min-height:30px; }
input[type="color"] { padding:2px; min-height:42px; }
.org-tree { display:flex; gap:24px; }
.org-node { display:flex; flex-direction:column; align-items:center; }
.org-card { display:flex; align-items:center; gap:10px; background:var(--card); border:1px solid var(--line); border-radius:10px; padding:10px 14px; box-shadow:var(--shadow); min-width:180px; }
.org-card small { color:var(--muted); display:block; }
.org-children { display:flex; gap:20px; margin-top:20px; padding-top:20px; border-top:2px solid var(--line); position:relative; }

/* Hero welcome banner (dashboard) */
.hero-banner { position:relative; border-radius:14px; overflow:hidden; min-height:170px; display:flex; align-items:center; box-shadow:var(--shadow); border:1px solid var(--line); }
.hero-banner-bg { position:absolute; inset:0; z-index:0; }
.hero-banner-bg svg { width:100%; height:100%; display:block; }
/* Readability fade is baked into the hero SVG itself (url(#heroFade)),
   so no separate CSS overlay is needed here - avoids double-darkening. */
.hero-content { position:relative; z-index:2; padding:26px 30px; max-width:520px; }
.hero-content h1 { margin:0 0 8px; font-size:26px; color:#fff; }
.hero-content p { margin:0; color:#dfe8e1; font-size:14px; }

/* Attendance gauge */
.gauge-wrap { display:flex; flex-direction:column; align-items:center; gap:10px; padding:18px 15px; }
.gauge-canvas-wrap { position:relative; width:180px; height:180px; }
.gauge-center { position:absolute; inset:0; display:grid; place-items:center; text-align:center; }
.gauge-center strong { font-size:30px; display:block; color:var(--brand); }
.gauge-center span { font-size:12px; color:var(--muted); }

/* Recent activity feed */
.activity-feed { padding:10px 15px; display:grid; gap:4px; }
.activity-row { display:flex; align-items:center; gap:10px; padding:9px 0; border-bottom:1px solid var(--line); }
.activity-row:last-child { border-bottom:0; }
.activity-time { min-width:44px; font-size:12px; color:var(--muted); direction:ltr; text-align:left; }
.activity-row b { display:block; font-size:13px; } .activity-row small { color:var(--muted); font-size:11px; }