/* HRIS Mitra Dewata. Rail kiri + konten di desktop, tab horizontal di HP. Pita angka (ledger), tabel polos, chip status. */
:root{
  --bg:#EDF2F3; --surface:#FAFCFC; --surface2:#F2F6F7; --ink:#243438; --muted:#586E73; --line:#D9E4E6;
  --accent:#3A7684; --accent-ink:#FFFFFF; --accent-soft:#DCEBEE;
  --good:#2E7656; --good-soft:#DDEFE6; --warn:#85580F; --warn-soft:#F7EACB; --bad:#A63E37; --bad-soft:#F6DEDA; --orange:#97501F; --orange-soft:#F5E0D0;
  --c1:#3A7684; --c2:#D6A24E; --c3:#6F82B5; --c4:#8DBFC9; --shadow:0 10px 30px rgba(36,52,56,.14);
  --sans:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif; --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  color-scheme:light;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --bg:#121C1F; --surface:#1A2629; --surface2:#203033; --ink:#E3ECEE; --muted:#97ACB0; --line:#2E4044;
  --accent:#7DBFCC; --accent-ink:#0C2A30; --accent-soft:#1D3C42;
  --good:#7CCFA4; --good-soft:#173A2B; --warn:#E8BE6A; --warn-soft:#3A2E10; --bad:#F29A91; --bad-soft:#46211E; --orange:#F0A874; --orange-soft:#432913;
  --c1:#7DBFCC; --c2:#E3B565; --c3:#97A9D6; --c4:#3A7280; --shadow:0 10px 30px rgba(0,0,0,.45); color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#121C1F; --surface:#1A2629; --surface2:#203033; --ink:#E3ECEE; --muted:#97ACB0; --line:#2E4044;
  --accent:#7DBFCC; --accent-ink:#0C2A30; --accent-soft:#1D3C42;
  --good:#7CCFA4; --good-soft:#173A2B; --warn:#E8BE6A; --warn-soft:#3A2E10; --bad:#F29A91; --bad-soft:#46211E; --orange:#F0A874; --orange-soft:#432913;
  --c1:#7DBFCC; --c2:#E3B565; --c3:#97A9D6; --c4:#3A7280; --shadow:0 10px 30px rgba(0,0,0,.45); color-scheme:dark}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:14px;line-height:1.5;
  padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));padding-block:20px 48px;min-height:100vh}
h1,h2,h3{margin:0;text-wrap:balance;line-height:1.2}
button,input,select,textarea{font:inherit;color:inherit}
.num{font-variant-numeric:tabular-nums}
.mono{font-family:var(--mono);font-size:12.5px}
.center-note{padding:60px 0;text-align:center;color:var(--muted)}
.app{max-width:1280px;margin:0 auto;display:grid;grid-template-columns:210px minmax(0,1fr);gap:28px}
.rail{position:sticky;top:20px;align-self:start;display:flex;flex-direction:column;gap:18px}
.brand b{font-size:17px;letter-spacing:-.01em;display:block}
.brand span{font-size:12px;color:var(--muted)}
.me{font-size:12.5px;color:var(--muted);border-top:1px solid var(--line);padding-top:12px;display:flex;flex-direction:column;gap:6px}
.me b{color:var(--ink);font-size:13px}
.nav{display:flex;flex-direction:column;gap:2px}
.nav button{display:flex;justify-content:space-between;align-items:center;gap:8px;text-align:left;background:none;border:0;border-radius:8px;padding:9px 12px;cursor:pointer;color:var(--muted);font-weight:500}
.nav button:hover{background:var(--surface);color:var(--ink)}
.nav button[aria-current="page"]{background:var(--accent);color:var(--accent-ink);font-weight:600}
.badge{background:var(--bad);color:#fff;border-radius:999px;font-size:11px;font-weight:700;padding:1px 7px;min-width:20px;text-align:center}
.nav button[aria-current="page"] .badge{background:var(--accent-ink);color:var(--accent)}
.main{min-width:0;display:flex;flex-direction:column;gap:22px}
.pagehead{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:12px}
.pagehead h1{font-size:26px;letter-spacing:-.02em}
.pagehead p{margin:4px 0 0;color:var(--muted)}
.tools{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.btn{background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:8px 14px;cursor:pointer;font-weight:600;white-space:nowrap}
.btn:hover{border-color:var(--accent)}
.btn.primary{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.btn.primary:hover{filter:brightness(1.08)}
.btn.small{padding:4px 10px;font-size:12.5px}
.btn.danger{color:var(--bad);border-color:var(--bad)}
.btn.good{color:var(--good);border-color:var(--good)}
.btn:disabled{opacity:.5;cursor:not-allowed}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
input,select,textarea{background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:8px 10px;min-width:0;max-width:100%}
textarea{width:100%;resize:vertical}
input:focus,select:focus,textarea:focus{border-color:var(--accent)}
.panel{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:18px;min-width:0}
.panel h2{font-size:15px;margin-bottom:12px}
.panel h2 small{font-weight:500;color:var(--muted);margin-left:6px}
.ledger{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:12px;overflow:hidden}
.ledger>div,.ledger>button{background:var(--surface);padding:14px 16px;display:flex;flex-direction:column;gap:2px;border:0;text-align:left;min-width:0}
.ledger>button{cursor:pointer}
.ledger>button:hover{background:var(--surface2)}
.ledger .k{font-size:11.5px;color:var(--muted);text-transform:uppercase;letter-spacing:.05em;font-weight:600}
.ledger .v{font-size:30px;font-weight:700;letter-spacing:-.02em;font-variant-numeric:tabular-nums;line-height:1.15}
.ledger .n{font-size:12px;color:var(--muted)}
.ledger .v.bad{color:var(--bad)} .ledger .v.warn{color:var(--orange)} .ledger .v.good{color:var(--good)}
.grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,360px),1fr));gap:18px}
.bars{display:flex;flex-direction:column;gap:7px}
.bar{display:grid;grid-template-columns:minmax(90px,150px) 1fr 34px;align-items:center;gap:10px}
.bar .l{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:13px}
.bar .t{height:12px;background:var(--surface2);border-radius:6px;overflow:hidden;border:1px solid var(--line)}
.bar .t i{display:block;height:100%;background:var(--accent);border-radius:6px}
.bar .v{text-align:right;font-weight:600;font-variant-numeric:tabular-nums}
.donutwrap{display:flex;flex-wrap:wrap;align-items:center;gap:20px}
.donutwrap svg{width:150px;height:150px;flex:none}
.legend{display:flex;flex-direction:column;gap:6px;font-size:13px}
.legend i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:8px}
.tablewrap{overflow-x:auto;border:1px solid var(--line);border-radius:12px;background:var(--surface)}
table{border-collapse:collapse;width:100%;min-width:760px}
th{font-size:11.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);text-align:left;padding:10px 12px;border-bottom:1px solid var(--line);background:var(--surface2);white-space:nowrap}
td{padding:9px 12px;border-bottom:1px solid var(--line);vertical-align:middle}
tr:last-child td{border-bottom:0}
tbody tr.click{cursor:pointer}
tbody tr.click:hover{background:var(--surface2)}
tr.resigned td{color:var(--muted);font-style:italic}
td.r,th.r{text-align:right}
.chip{display:inline-block;border-radius:999px;padding:2px 10px;font-size:12px;font-weight:600;white-space:nowrap}
.chip.lewat{background:var(--bad-soft);color:var(--bad)} .chip.segera{background:var(--orange-soft);color:var(--orange)}
.chip.perhatian{background:var(--warn-soft);color:var(--warn)} .chip.aman,.chip.good{background:var(--good-soft);color:var(--good)}
.chip.muted{background:var(--surface2);color:var(--muted);border:1px solid var(--line)}
.chip.info{background:var(--accent-soft);color:var(--accent)}
.empty{padding:36px 20px;text-align:center;color:var(--muted)}
.empty b{display:block;color:var(--ink);font-size:15px;margin-bottom:4px}
.filters{display:flex;flex-wrap:wrap;gap:8px}
.filters input[type=search]{flex:1 1 220px}
.tabs{display:flex;gap:6px;flex-wrap:wrap}
.tabs button{background:none;border:0;border-bottom:2px solid transparent;padding:8px 4px;margin-right:14px;font-weight:600;color:var(--muted);cursor:pointer}
.tabs button[aria-selected="true"]{color:var(--accent);border-bottom-color:var(--accent)}
.note{font-size:12.5px;color:var(--muted)}
.banner{border-radius:10px;padding:10px 14px;background:var(--warn-soft);color:var(--warn);font-weight:500}
.banner.bad{background:var(--bad-soft);color:var(--bad)}
.banner.good{background:var(--good-soft);color:var(--good)}
#modal{position:fixed;inset:0;z-index:50;display:none;align-items:flex-start;justify-content:center;background:rgba(24,38,42,.45);padding:max(16px,env(safe-area-inset-top,0px)) 16px 16px;overflow:auto}
#modal.open{display:flex}
.dialog{background:var(--surface);border-radius:14px;box-shadow:var(--shadow);width:min(780px,100%);margin:auto;padding:22px;display:flex;flex-direction:column;gap:16px;border:1px solid var(--line)}
.dialog h2{font-size:19px}
.dhead{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.x{background:none;border:0;font-size:22px;line-height:1;cursor:pointer;color:var(--muted);padding:2px 8px}
.formgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px}
.formgrid .full{grid-column:1/-1}
.field{display:flex;flex-direction:column;gap:4px;min-width:0}
.field label{font-size:12px;font-weight:600;color:var(--muted)}
.field .hint{font-size:11.5px;color:var(--muted)}
.fsec{font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:var(--accent);font-weight:700;margin-top:4px}
.actions{display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-end}
.dl{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:10px;overflow:hidden;margin:0}
.dl div{background:var(--surface);padding:9px 12px;min-width:0}
.dl dt{font-size:11.5px;color:var(--muted);font-weight:600}
.dl dd{margin:0;overflow-wrap:anywhere}
.dl .wide{grid-column:1/-1}
#toast{position:fixed;left:50%;transform:translateX(-50%);bottom:max(20px,env(safe-area-inset-bottom,0px));background:var(--ink);color:var(--bg);padding:10px 18px;border-radius:10px;font-weight:600;z-index:80;display:none;max-width:90vw}
details{border:1px solid var(--line);border-radius:10px;background:var(--surface)}
details+details{margin-top:8px}
summary{cursor:pointer;padding:12px 16px;font-weight:700;list-style:none;display:flex;justify-content:space-between;gap:10px}
summary::after{content:"+";color:var(--accent);font-size:18px;line-height:1}
details[open] summary::after{content:"–"}
details .body{padding:0 16px 14px}
details ol{margin:6px 0 0;padding-left:20px;display:flex;flex-direction:column;gap:6px}
.guide p{margin:6px 0}
.progress{height:8px;border-radius:5px;background:var(--surface2);border:1px solid var(--line);overflow:hidden}
.progress i{display:block;height:100%}
.kv{display:grid;grid-template-columns:minmax(120px,170px) 1fr 52px;gap:10px;align-items:center;font-size:13px}
/* login */
.login{max-width:400px;margin:8vh auto 0;display:flex;flex-direction:column;gap:18px}
.login .brand b{font-size:24px}
.login form{display:flex;flex-direction:column;gap:14px}
.login .pw{display:flex;gap:6px}
.login .pw input{flex:1}
.login .err{color:var(--bad);font-weight:600;min-height:1.3em;margin:0}
/* portal karyawan */
.hero{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:10px}
.hero h1{font-size:26px;letter-spacing:-.02em}
.sp{border:1px solid var(--line);border-radius:12px;background:var(--surface);padding:16px;display:flex;flex-direction:column;gap:8px}
.sp.aktif{border-color:var(--orange)}
.sp .top{display:flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:space-between}
.sp p{margin:0;overflow-wrap:anywhere}
.stack{display:flex;flex-direction:column;gap:12px}
.dropzone{border:1px dashed var(--line);border-radius:10px;padding:14px;background:var(--surface2)}
@media (max-width:860px){
  .app{grid-template-columns:minmax(0,1fr);gap:16px}
  .rail{position:static;gap:10px}
  .nav{flex-direction:row;overflow-x:auto;gap:4px;padding-bottom:4px}
  .nav button{white-space:nowrap}
  .me{flex-direction:row;justify-content:space-between;align-items:center;flex-wrap:wrap}
  .pagehead h1,.hero h1{font-size:22px}
  .ledger .v{font-size:25px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}