/* Layout: header gelap + tab menu horizontal, konten satu kolom lebar 1180px; gaya company profile GMC (charcoal + oranye). Satu tema terang yang disengaja. */
:root{
  --char:#221D18; --char-2:#2B251E; --ink:#231F1A; --muted:#6B6258; --line:#E5DFD6; --line-2:#EFEAE3;
  --bg:#F6F3EE; --card:#FFFFFF; --orange:#F18B00; --orange-d:#B86400; --orange-soft:#FFF1DC;
  --ok:#2E7D4F; --ok-soft:#E3F2E8; --warn:#9A6400; --warn-soft:#FCF0CF; --bad:#B42318; --bad-soft:#FBE4E1;
  --info:#1F4E8C; --info-soft:#E4ECF7; --on-dark:#F4EFE8; --on-dark-2:#B9AFA3;
  --f-head:"Poppins",system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-body:"Source Sans 3",system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-mono:"IBM Plex Mono",ui-monospace,Consolas,monospace;
  color-scheme:light;
}
*{box-sizing:border-box}
html,body{background:var(--bg)}
body{margin:0;color:var(--ink);font:16px/1.55 var(--f-body)}
button,input,select,textarea{font:inherit;color:inherit}
h1,h2,h3{font-family:var(--f-head);line-height:1.2;margin:0;text-wrap:balance;color:var(--ink)}
h1{font-size:1.75rem}h2{font-size:1.2rem}h3{font-size:1rem}
.mono{font-family:var(--f-mono);font-variant-numeric:tabular-nums}
.muted{color:var(--muted)} .small{font-size:.875rem}
:focus-visible{outline:3px solid var(--orange);outline-offset:2px}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* ---------- Header ---------- */
.top{background:var(--char);color:var(--on-dark);border-bottom:3px solid var(--orange);position:sticky;top:env(safe-area-inset-top,0px);z-index:20}
.top-in{max-width:1180px;margin:0 auto;padding:10px 16px;display:flex;align-items:center;gap:12px}
.logo{width:44px;height:44px;background:#fff;border-radius:6px;display:grid;place-items:center;flex:none}
.logo img{width:38px}
.brand b{display:block;font-family:var(--f-head);font-size:.95rem;letter-spacing:.06em}
.brand small{color:var(--on-dark-2);font-size:.78rem}
.spacer{flex:1}
.who{display:flex;align-items:center;gap:10px;background:var(--char-2);border:1px solid #3B342C;border-radius:999px;padding:4px 6px 4px 4px}
.avatar{width:32px;height:32px;border-radius:50%;background:var(--orange);color:var(--char);display:grid;place-items:center;font:700 .8rem var(--f-head)}
.who b{display:block;font-size:.88rem;line-height:1.1}.who small{color:var(--on-dark-2);font-size:.74rem}
.who button{background:none;border:1px solid #4A4239;color:var(--on-dark);border-radius:999px;padding:4px 10px;font-size:.8rem;cursor:pointer}
.who button:hover{border-color:var(--orange)}
.nav{background:var(--card);border-bottom:1px solid var(--line);position:sticky;top:calc(env(safe-area-inset-top,0px) + 67px);z-index:19}
.nav-in{max-width:1180px;margin:0 auto;padding:0 16px;display:flex;gap:4px;overflow-x:auto;scrollbar-width:none}
.nav-in::-webkit-scrollbar{display:none}
.nav button{background:none;border:0;border-bottom:3px solid transparent;padding:14px 12px 11px;font:600 .92rem var(--f-head);color:var(--muted);white-space:nowrap;cursor:pointer;display:flex;align-items:center;gap:7px}
.nav button:hover{color:var(--ink)}
.nav button[aria-current="page"]{color:var(--ink);border-bottom-color:var(--orange)}
.badge{min-width:20px;height:20px;border-radius:999px;background:var(--bad);color:#fff;font:700 .72rem/20px var(--f-body);text-align:center;padding:0 6px}
.badge.o{background:var(--orange);color:var(--char)}
.pv{background:var(--orange-soft);border-bottom:1px solid #F1D3A6;color:#6A3F00;font-size:.85rem}
.pv div{max-width:1180px;margin:0 auto;padding:7px 16px}

/* ---------- Page ---------- */
main{max-width:1180px;margin:0 auto;padding-block:26px 60px;padding-inline:16px;display:grid;gap:22px}
.head{display:flex;flex-wrap:wrap;align-items:flex-end;gap:12px 20px;justify-content:space-between}
.eyebrow{font:600 .74rem var(--f-head);letter-spacing:.14em;text-transform:uppercase;color:var(--orange-d);display:flex;align-items:center;gap:8px;margin-bottom:6px}
.eyebrow::before{content:"";width:22px;height:2px;background:var(--orange)}
.head p{margin:6px 0 0;color:var(--muted);max-width:68ch}
.panel{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:18px}
.panel>h2{margin-bottom:12px}
.panel-h{display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center;justify-content:space-between;margin-bottom:12px}
.grid-2{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr));gap:18px}
.row{display:flex;flex-wrap:wrap;gap:10px;align-items:center}

/* Stat tiles */
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,170px),1fr));gap:12px}
.tile{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:14px 16px;border-top:4px solid var(--line);text-align:left;cursor:pointer}
.tile:hover{border-color:var(--orange)}
.tile .k{font:600 .72rem var(--f-head);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.tile .v{font:700 2rem/1.1 var(--f-head);margin-top:6px;font-variant-numeric:tabular-nums}
.tile .s{font-size:.82rem;color:var(--muted)}
.tile.red{border-top-color:var(--bad)}.tile.red .v{color:var(--bad)}
.tile.yel{border-top-color:#E0A21B}.tile.yel .v{color:var(--warn)}
.tile.grn{border-top-color:var(--ok)}.tile.grn .v{color:var(--ok)}
.tile.org{border-top-color:var(--orange)}
.tile.blu{border-top-color:var(--info)}

/* Admin cards */
.admins{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr));gap:12px}
.adm{border:1px solid var(--line);border-radius:10px;padding:14px;background:var(--card);display:grid;gap:10px}
.adm-h{display:flex;gap:10px;align-items:center}
.adm-h .avatar{width:36px;height:36px}
.adm-h b{display:block;font-family:var(--f-head);font-size:.95rem}
.adm-n{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;text-align:center}
.adm-n div{background:var(--bg);border-radius:8px;padding:8px 4px}
.adm-n b{display:block;font:700 1.35rem/1.1 var(--f-head);font-variant-numeric:tabular-nums}
.adm-n span{font-size:.72rem;color:var(--muted);text-transform:uppercase;letter-spacing:.06em}
.split{display:flex;height:8px;border-radius:99px;overflow:hidden;background:var(--line-2)}
.split i{display:block}.split .a{background:var(--orange)}.split .b{background:var(--info)}
.legend{display:flex;gap:14px;font-size:.8rem;color:var(--muted)}
.legend i{display:inline-block;width:10px;height:10px;border-radius:2px;margin-right:5px;vertical-align:-1px}

/* Chips */
.chip{display:inline-flex;align-items:center;gap:6px;border-radius:999px;padding:2px 10px;font-size:.8rem;font-weight:700;white-space:nowrap;border:1px solid transparent}
.chip::before{content:"";width:8px;height:8px;border-radius:50%;background:currentColor}
.c-red{background:var(--bad-soft);color:var(--bad)}
.c-yel{background:var(--warn-soft);color:var(--warn)}
.c-grn{background:var(--ok-soft);color:var(--ok)}
.c-done{background:var(--line-2);color:var(--muted)}
.c-plan{background:var(--info-soft);color:var(--info)}
.c-wait{background:var(--orange-soft);color:var(--orange-d)}
.tag{display:inline-block;border-radius:4px;padding:1px 7px;font:600 .72rem var(--f-head);letter-spacing:.06em}
.t-skk{background:var(--orange-soft);color:var(--orange-d)}
.t-nor{background:var(--info-soft);color:var(--info)}

/* Tables */
.tbl-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:10px;background:var(--card)}
table{width:100%;border-collapse:collapse;font-size:.92rem}
th{font:600 .72rem var(--f-head);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);text-align:left;background:#FBF9F6;padding:10px 12px;border-bottom:1px solid var(--line);white-space:nowrap}
td{padding:10px 12px;border-bottom:1px solid var(--line-2);vertical-align:top}
tr:last-child td{border-bottom:0}
tr.late td:first-child{box-shadow:inset 4px 0 0 var(--bad)}
td .sub,.sub{display:block;font-size:.82rem;color:var(--muted)}
.num{text-align:right;font-variant-numeric:tabular-nums}

/* Forms */
.form{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:14px}
.field{display:grid;gap:5px}
.field label{font-weight:600;font-size:.88rem}
.field .req{color:var(--bad)}
input[type=text],input[type=date],input[type=search],select,textarea{width:100%;border:1px solid #D3CBC0;border-radius:8px;padding:9px 11px;background:#fff}
textarea{min-height:80px;resize:vertical}
input:focus,select:focus,textarea:focus{border-color:var(--orange);outline:none;box-shadow:0 0 0 3px var(--orange-soft)}
.hint{font-size:.8rem;color:var(--muted)}
.btn{border:1px solid #D3CBC0;background:#fff;border-radius:8px;padding:8px 14px;font:600 .9rem var(--f-head);cursor:pointer;display:inline-flex;align-items:center;gap:6px;justify-content:center}
.btn:hover{border-color:var(--ink)}
.btn-p{background:var(--orange);border-color:var(--orange);color:var(--char)}
.btn-p:hover{background:#FF9A12;border-color:#FF9A12}
.btn-d{background:var(--char);border-color:var(--char);color:var(--on-dark)}
.btn-ok{background:var(--ok);border-color:var(--ok);color:#fff}
.btn-bad{background:#fff;border-color:var(--bad);color:var(--bad)}
.btn-sm{padding:5px 10px;font-size:.8rem}
.btn[disabled]{opacity:.5;cursor:not-allowed}
.subtabs{display:flex;gap:6px;flex-wrap:wrap}
.subtabs button{border:1px solid var(--line);background:var(--card);border-radius:999px;padding:6px 14px;font:600 .85rem var(--f-head);cursor:pointer;color:var(--muted)}
.subtabs button[aria-pressed="true"]{background:var(--char);border-color:var(--char);color:var(--on-dark)}
.filters{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.filters select,.filters input{width:auto;min-width:150px}

/* Documents */
.docs{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,190px),1fr));gap:12px}
.doc{border:1px solid var(--line);border-radius:10px;overflow:hidden;background:var(--card);display:flex;flex-direction:column}
.doc .pic{aspect-ratio:4/3;max-width:100%;background:var(--bg) center/cover no-repeat;border-bottom:1px solid var(--line);display:grid;place-items:center;color:var(--muted);font:600 .85rem var(--f-head)}
.doc .meta{padding:9px 10px;display:grid;gap:4px;flex:1;align-content:start}
.doc .meta b{font-size:.88rem}
.doc .acts{display:flex;gap:6px;padding:0 10px 10px;flex-wrap:wrap}
.doc.miss .pic{background:repeating-linear-gradient(45deg,#FBF9F6,#FBF9F6 8px,#F3EEE7 8px,#F3EEE7 16px)}
.slot{border:1px dashed #CFC6BA;border-radius:10px;padding:12px;display:grid;gap:8px;background:#FDFCFA}
.slot-h{display:flex;justify-content:space-between;gap:8px;align-items:flex-start}
.slot img{max-width:100%;max-height:140px;border-radius:6px;border:1px solid var(--line);object-fit:contain;background:#fff}
.note{border-radius:8px;padding:10px 12px;font-size:.9rem}
.note-warn{background:var(--warn-soft);color:#5C3D00}
.note-bad{background:var(--bad-soft);color:#7A1810}
.note-ok{background:var(--ok-soft);color:#1D5235}
.note-info{background:var(--info-soft);color:#173A69}
.kv{display:grid;grid-template-columns:150px 1fr;gap:6px 14px;font-size:.93rem}
.kv dt{color:var(--muted)}.kv dd{margin:0;min-width:0;overflow-wrap:anywhere}
@media (max-width:560px){.kv{grid-template-columns:1fr}.kv dt{margin-top:6px}}
.list-plain{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.list-plain li{display:flex;gap:10px;justify-content:space-between;align-items:flex-start;border-bottom:1px solid var(--line-2);padding-bottom:8px}
.list-plain li:last-child{border-bottom:0;padding-bottom:0}
.bar{height:12px;border-radius:99px;background:var(--line-2);overflow:hidden}
.bar i{display:block;height:100%;background:var(--orange)}
details.lsp{border:1px solid var(--line);border-radius:10px;background:var(--card)}
details.lsp summary{list-style:none;cursor:pointer;padding:12px 14px;display:flex;justify-content:space-between;gap:10px;align-items:center}
details.lsp summary::-webkit-details-marker{display:none}
details.lsp summary b{font-family:var(--f-head)}
details.lsp[open] summary{border-bottom:1px solid var(--line-2)}
details.lsp .in{padding:10px 14px 14px}
.empty{padding:26px;text-align:center;color:var(--muted)}


/* Kualifikasi (matrix SKK) */
.kb{display:grid;grid-template-columns:minmax(0,390px) minmax(0,1fr);gap:16px;align-items:start}
.kb .klist{max-height:72vh;overflow-y:auto;padding:0}
.klist-h{display:flex;justify-content:space-between;padding:10px 14px;border-bottom:1px solid var(--line);font-size:.85rem;color:var(--muted);position:sticky;top:0;background:var(--card);z-index:1}
.kitem{display:flex;gap:12px;align-items:flex-start;width:100%;text-align:left;background:none;border:0;border-bottom:1px solid var(--line-2);padding:10px 14px;cursor:pointer}
.kitem:hover{background:#FBF9F6}
.kitem[aria-selected="true"]{background:var(--orange-soft);box-shadow:inset 4px 0 0 var(--orange)}
.kitem .t{font-weight:700;line-height:1.3}
.kitem .s{font-size:.8rem;color:var(--muted)}
.jen{flex:none;width:42px;height:46px;border-radius:6px;display:grid;place-items:center;align-content:center;background:var(--char);color:var(--on-dark);line-height:1}
.jen b{font:700 1.2rem var(--f-head)}.jen small{font-size:.58rem;letter-spacing:.08em;margin-top:2px}
.jen.Teknisi{background:var(--info)}.jen.Operator{background:#5B4636}.jen.Ahli{background:var(--orange-d)}
.kdet{display:grid;gap:18px}
.kdet h3{font:600 .78rem var(--f-head);letter-spacing:.1em;text-transform:uppercase;color:var(--orange-d);margin-bottom:8px}
.kback{display:none}
.res{border-radius:8px;padding:10px 12px;font-size:.92rem}.res b{display:block}
.res.ok{background:var(--ok-soft);color:#1D5235}.res.warn{background:var(--warn-soft);color:#5C3D00}.res.bad{background:var(--bad-soft);color:#7A1810}.res.info{background:var(--line-2);color:var(--muted)}
.skema-info{border:1px solid var(--line);border-radius:10px;padding:12px;background:#FBF9F6;display:flex;gap:12px;align-items:flex-start;grid-column:1/-1}
.kdet>*,.kdet-wrap,.klist-wrap,#k-detail{min-width:0}
main>*{min-width:0}
@media (max-width:560px){.brand small{display:none}.who>span:nth-child(2){display:none}.who .avatar{display:none}.who{padding:4px}.top-in{padding-block:8px}}
@media (max-width:900px){.kb{grid-template-columns:1fr}.kb.show .klist-wrap{display:none}.kb:not(.show) .kdet-wrap{display:none}.kback{display:inline-flex}}

.sec{display:grid;gap:12px;padding-top:18px;margin-top:18px;border-top:1px solid var(--line-2)}
.sec:first-of-type{border-top:0;margin-top:0;padding-top:0}
.sec-h{display:flex;gap:10px;align-items:baseline}
.sec-h .no{font:700 .8rem var(--f-head);background:var(--char);color:var(--on-dark);border-radius:4px;padding:2px 7px}
.pw{display:flex;gap:6px}.pw input{flex:1;min-width:0}
.gate{display:grid;gap:8px}
.syarat-mini{width:100%;font-size:.86rem}
.syarat-mini td,.syarat-mini th{padding:6px 8px}
.verif{font-size:.85rem}.verif b{display:block}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.linkbtn{background:none;border:0;padding:0;font:inherit;color:var(--orange-d);text-decoration:underline;cursor:pointer}
.mlist li{align-items:center}
.mlist .acts{display:flex;gap:6px;flex-shrink:0}
.madd{display:flex;gap:8px;margin:4px 0 14px}.madd input{flex:1;min-width:0}
.mren{display:flex;gap:6px;flex:1;flex-wrap:wrap}.mren input{flex:1;min-width:160px}
.tag.t-skk2{background:var(--char);color:var(--on-dark)}
.tmp-pw{font:500 1.6rem var(--f-mono);letter-spacing:.04em;background:var(--orange-soft);border:1px dashed var(--orange);border-radius:8px;padding:14px;text-align:center;user-select:all}
.acts-u{display:flex;gap:6px;flex-wrap:wrap}
.c-own{background:var(--char);color:var(--on-dark)}
.pick button:disabled{opacity:.55;cursor:not-allowed;background:#F4F1EC}
.pick button:disabled:hover{border-color:var(--line)}
.rules{margin:0;padding-left:18px;font-size:.88rem;color:var(--muted)}
.ntab td,.ntab th{text-align:center}.ntab td:first-child,.ntab th:first-child{text-align:left}
.ntab input{width:18px;height:18px;accent-color:var(--orange)}
.kan{display:inline-block;font:600 .7rem var(--f-head);border-radius:4px;padding:2px 6px;margin-right:4px}
.kan.e{background:var(--info-soft);color:var(--info)}.kan.w{background:#DDF3E4;color:#1B6B3A}
.mail{border:1px solid var(--line);border-radius:8px;background:#FDFCFA;font-size:.92rem;overflow:hidden}
.mail-h{padding:10px 14px;border-bottom:1px solid var(--line-2);display:grid;gap:2px}
.mail-b{padding:14px;display:grid;gap:8px}.mail-b p{margin:0}
.wa-bg{background:#ECE5DD;border-radius:8px;padding:14px;display:flex}
.wa-bub{background:#fff;border-radius:0 8px 8px 8px;padding:8px 10px 6px;max-width:320px;font-size:.9rem;box-shadow:0 1px 1px rgba(0,0,0,.12);white-space:pre-line}
.wa-bub small{display:block;text-align:right;color:#8A8A8A;font-size:.7rem;margin-top:4px}
/* Modal + toast */
.ov{position:fixed;inset:0;background:rgba(20,16,12,.55);z-index:50;display:grid;place-items:start center;overflow-y:auto;padding:30px 16px}
.modal{background:var(--card);border-radius:12px;width:min(860px,100%);padding:20px;display:grid;gap:16px;border-top:5px solid var(--orange)}
.modal-h{display:flex;justify-content:space-between;gap:10px;align-items:flex-start}
.x{border:0;background:var(--bg);border-radius:8px;width:34px;height:34px;cursor:pointer;font-size:1.1rem}
.toast{position:fixed;left:50%;bottom:calc(20px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);background:var(--char);color:var(--on-dark);padding:10px 16px;border-radius:8px;z-index:60;border-left:4px solid var(--orange);max-width:calc(100% - 32px)}
.spin{width:18px;height:18px;border:3px solid var(--line);border-top-color:var(--orange);border-radius:50%;animation:sp .8s linear infinite;display:inline-block;vertical-align:-4px}
@keyframes sp{to{transform:rotate(360deg)}}
.lightbox{position:fixed;inset:0;background:rgba(10,8,6,.85);z-index:70;display:grid;place-items:center;padding:20px}
.lightbox img{max-width:100%;max-height:85vh;border-radius:6px;background:#fff}
.lightbox button{position:absolute;top:14px;right:14px}

/* Login */
.login{min-height:100%;display:grid;place-items:center;padding-block:40px;padding-inline:16px;background:var(--char)}
.login-card{background:var(--card);border-radius:12px;width:min(460px,100%);padding:26px;display:grid;gap:16px;border-top:5px solid var(--orange)}
.login-card .logo{width:56px;height:56px}.login-card .logo img{width:48px}
.pick{display:grid;gap:10px}
.pick button{text-align:left;border:1px solid var(--line);background:#fff;border-radius:10px;padding:12px 14px;cursor:pointer;display:flex;gap:12px;align-items:center}
.pick button:hover{border-color:var(--orange);background:var(--orange-soft)}
.pick b{display:block;font-family:var(--f-head)}