:root{
  --green-900:#0A3D2E; --green-800:#0E4E39; --green-700:#12694A; --green-600:#1B7A57;
  --green-100:#E3F0EA; --green-50:#F1F7F4; --gold:#C29A2E; --gold-soft:#F4EAC9;
  --bg:#F4F7F5; --surface:#FFFFFF; --ink:#132A22; --muted:#63776E; --line:#E4EBE7;
  --danger:#C0392B; --amber:#B8860B; --info:#2E6DA4;
}
*{box-sizing:border-box}
body{font-family:'Plus Jakarta Sans',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  background:var(--bg); color:var(--ink); margin:0; min-height:100vh; -webkit-font-smoothing:antialiased;}
.arb{font-family:'Amiri',serif; color:var(--gold)}
.text-muted-2{color:var(--muted)!important}
a{text-decoration:none}

/* ---------- LOGIN ---------- */
.login-wrap{min-height:100vh; display:flex; align-items:center; justify-content:center; padding:24px;
  background:radial-gradient(1200px 600px at 100% -10%, rgba(27,122,87,.12), transparent 60%),
             radial-gradient(900px 500px at -10% 110%, rgba(194,154,46,.10), transparent 55%), var(--bg);}
.login-card{width:100%; max-width:900px; background:var(--surface); border:1px solid var(--line);
  border-radius:22px; overflow:hidden; box-shadow:0 24px 60px -30px rgba(10,61,46,.35);
  display:grid; grid-template-columns:1fr 1.15fr;}
.login-hero{background:linear-gradient(160deg,var(--green-800),var(--green-900)); color:#fff;
  padding:44px 40px; position:relative; overflow:hidden;}
.login-hero::after{content:""; position:absolute; inset:0; opacity:.10;
  background-image:repeating-linear-gradient(45deg,#fff 0 2px,transparent 2px 14px),
                   repeating-linear-gradient(-45deg,#fff 0 2px,transparent 2px 14px); mix-blend-mode:overlay;}
.login-hero .in{position:relative}
.crest{width:56px;height:56px;border-radius:16px;display:grid;place-items:center;
  background:rgba(255,255,255,.10); border:1px solid rgba(255,255,255,.22); color:var(--gold-soft); font-size:26px; margin-bottom:22px;}
.login-side{padding:44px 40px}

/* ---------- SHELL ---------- */
.topbar{height:62px; background:var(--surface); border-bottom:1px solid var(--line);
  display:flex; align-items:center; gap:14px; padding:0 20px; position:sticky; top:0; z-index:40;}
.brand-mini{display:flex; align-items:center; gap:12px}
.brand-crest{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;
  background:linear-gradient(160deg,var(--green-700),var(--green-900)); color:var(--gold-soft); font-size:19px;}
.brand-mini .b-name{font-weight:800; line-height:1.05; font-size:.98rem}
.brand-mini .b-sub{font-size:.72rem; color:var(--muted)}
.role-chip{font-size:.82rem; font-weight:600; padding:5px 12px; border-radius:999px;
  background:var(--green-100); color:var(--green-800); display:inline-flex; align-items:center; gap:6px;}

.layout{display:flex; min-height:calc(100vh - 62px)}
.sidebar{width:250px; flex:none; background:var(--surface); border-right:1px solid var(--line);
  padding:18px 14px; transition:transform .22s ease; z-index:35;}
.side-user{background:var(--green-50); border:1px solid var(--line); border-radius:14px; padding:12px 14px; margin-bottom:16px;}
.side-user .su-name{font-weight:700; font-size:.92rem}
.side-user .su-role{font-size:.76rem; color:var(--muted)}
.side-label{font-size:.68rem; letter-spacing:.09em; text-transform:uppercase; color:var(--muted); font-weight:700; margin:8px 12px 6px}
.nav-item{display:flex; align-items:center; gap:12px; padding:11px 13px; border-radius:11px;
  color:var(--ink); font-weight:600; font-size:.92rem; cursor:pointer; margin-bottom:3px;}
.nav-item i{font-size:1.12rem; color:var(--muted); width:22px; text-align:center}
.nav-item:hover{background:var(--green-50)}
.nav-item.active{background:var(--green-700); color:#fff}
.nav-item.active i{color:var(--gold-soft)}
.nav-item .n-badge{margin-left:auto; font-size:.7rem; background:var(--gold); color:#3a2f0a; padding:2px 8px; border-radius:999px; font-weight:700}

.main{flex:1; padding:26px 30px; min-width:0}
.page-head{margin-bottom:22px}
.page-head h1{font-size:1.5rem; font-weight:800; margin:0}
.page-head p{color:var(--muted); margin:4px 0 0; font-size:.92rem}

.card2{background:var(--surface); border:1px solid var(--line); border-radius:16px}
.card2 .card2-head{padding:16px 20px; border-bottom:1px solid var(--line); display:flex; align-items:center; gap:10px}
.card2 .card2-head h6{margin:0; font-weight:700}
.card2 .card2-body{padding:20px}

.stat{background:var(--surface); border:1px solid var(--line); border-radius:16px; padding:18px}
.stat .s-ic{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;font-size:20px}
.stat .s-num{font-size:1.9rem; font-weight:800; line-height:1; margin-top:12px}
.stat .s-lbl{color:var(--muted); font-size:.85rem; margin-top:4px}

.form-label{font-weight:600; font-size:.88rem; margin-bottom:6px}
.form-control,.form-select{border-color:var(--line); padding:.6rem .8rem; font-size:.94rem}
.form-control:focus,.form-select:focus{border-color:var(--green-600); box-shadow:0 0 0 .2rem rgba(27,122,87,.15)}
.btn-dn{background:var(--green-700); border-color:var(--green-700); color:#fff; font-weight:600}
.btn-dn:hover{background:var(--green-800); border-color:var(--green-800); color:#fff}
.btn-outline-dn{border:1px solid var(--green-600); color:var(--green-700); font-weight:600; background:transparent}
.btn-outline-dn:hover{background:var(--green-700); color:#fff}

table{font-size:.9rem}
.table>thead th{background:var(--green-50); color:var(--green-800); font-weight:700; font-size:.78rem;
  letter-spacing:.03em; text-transform:uppercase; border-color:var(--line)}
.table>tbody td{vertical-align:middle; border-color:var(--line)}

.badge-status{font-size:.74rem; font-weight:600; padding:5px 11px; border-radius:999px; display:inline-block}
.st-hadir{background:#E3F3EA; color:#1B7A57}
.st-telat{background:#FBF0D8; color:var(--amber)}
.st-absen{background:#FBE4E1; color:var(--danger)}
.st-ganti{background:#E1ECF7; color:var(--info)}

.stars{display:inline-flex; gap:3px; font-size:1.35rem; color:#D8DEDB; cursor:pointer}
.stars i.on{color:var(--gold)}
.stars-sm{font-size:.95rem; color:#D8DEDB}
.stars-sm i.on{color:var(--gold)}

.empty{text-align:center; padding:46px 20px; color:var(--muted)}
.empty i{font-size:2.4rem; opacity:.4; display:block; margin-bottom:10px}

.flag-row{border:1px solid #F1C9C2; background:#FDF3F2; border-radius:12px; padding:12px 14px;
  display:flex; gap:12px; align-items:flex-start; margin-bottom:10px}
.flag-row.ok{border-color:#CDE6D6; background:#F1F9F4}

.hamb{display:none; background:none; border:none; font-size:1.4rem; color:var(--ink)}
.backdrop{display:none; position:fixed; inset:0; background:rgba(10,30,22,.4); z-index:34}

@media (max-width:860px){
  .login-card{grid-template-columns:1fr}
  .login-hero{display:none}
  .hamb{display:block}
  .sidebar{position:fixed; top:62px; bottom:0; left:0; transform:translateX(-100%)}
  body.nav-open .sidebar{transform:translateX(0)}
  body.nav-open .backdrop{display:block}
  .main{padding:20px 16px}
}