/* map.sji.my.id — pusat Direktur (Fer 24/10/2026). Gaya A hijau = keluarga lapor/admin.sji. Komputer & tablet rebah (1317x658). */
:root{--bg:#EDF1EE;--sf:#fff;--ink:#13201A;--mut:#5A6A62;--line:#D5DED8;--acc:#1D6648;--acc2:#DBEBE2;--ok:#1C7448;--ok2:#DCF0E3;--warn:#9A5F0C;--warn2:#F7E9CF;--bad:#AE341E;--bad2:#F6DED7;--info:#2B5886;--info2:#DEE7F2;--gray:#7B827E;--gray2:#E7EAE8;--num:ui-monospace,"SF Mono",Menlo,Consolas,"Roboto Mono",monospace}
*{box-sizing:border-box}html,body{margin:0;height:100%;background:var(--bg);color:var(--ink);font:13.5px/1.4 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
button,input{font:inherit}
.atas{height:46px;background:var(--sf);border-bottom:1px solid var(--line);display:flex;align-items:center;gap:14px;padding:0 14px 0 16px}
.atas .merek{display:flex;align-items:center;gap:8px;width:226px;flex:none}
.atas .merek .logo{width:26px;height:26px;border-radius:8px;background:var(--acc);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:13px}
.atas .merek b{color:var(--acc)}.atas .merek span{color:var(--mut);font-size:12.5px}
.atas .judul{display:flex;align-items:center;gap:10px;min-width:0;flex:1}
.atas .judul h1{font-size:15px;margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.atas .judul .cip{flex:none}
.atas .kanan{margin-left:auto;display:flex;gap:10px;align-items:center;color:var(--mut);white-space:nowrap}.atas .kanan b{color:var(--ink)}
.rangka{display:flex;height:calc(100vh - 46px)}
.sisi{width:240px;flex:none;background:var(--sf);border-right:1px solid var(--line);overflow-y:auto;padding:8px 8px 20px}
.sisi .grup{padding:12px 10px 4px;font-size:10.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--mut);font-weight:700;display:flex;justify-content:space-between}
.sisi .grup small{font-weight:400;text-transform:none;letter-spacing:0}
.sisi button{display:flex;width:100%;align-items:center;gap:9px;border:0;background:none;padding:7px 10px;border-radius:9px;color:var(--ink);text-align:left;cursor:pointer;margin-bottom:1px}
.sisi button:hover{background:var(--gray2)}.sisi button.on{background:var(--acc2);color:var(--acc)}
.sisi button .t{flex:1;min-width:0}.sisi button .t b{display:block;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.sisi button.on .t b{color:var(--acc)}
.sisi button .t small{display:block;color:var(--mut);font-size:11.5px}
.sisi .lampu{width:8px;height:8px;border-radius:50%;background:var(--gray2);flex:none;border:1px solid var(--line)}
.sisi .lampu.hidup{background:var(--ok);border-color:var(--ok)}.sisi .lampu.hangat{background:#E0B64A;border-color:#E0B64A}
.sisi .kosong{padding:4px 10px 8px;color:var(--mut);font-size:12px}
.isi{flex:1;min-width:0;display:flex;flex-direction:column;position:relative}
.isi.teks{padding:18px 24px;overflow:auto;display:block}
.isi iframe{border:0;width:100%;height:100%;background:var(--bg)}
.pita{height:30px;flex:none;display:flex;align-items:center;gap:10px;padding:0 14px;background:var(--acc);color:#fff;font-size:12.5px}
.pita b{font-weight:600}.pita .r{margin-left:auto;display:flex;gap:8px}
.pita button{border:1px solid rgba(255,255,255,.55);background:none;color:#fff;border-radius:999px;padding:1px 10px;cursor:pointer;font-size:12px}
.pita button:hover{background:rgba(255,255,255,.15)}
h1.h{font-size:19px;margin:0 0 2px}.sub{color:var(--mut);margin:0 0 14px}
.kartu{background:var(--sf);border:1px solid var(--line);border-radius:12px;padding:12px 16px;margin-bottom:14px;max-width:1000px}
.kartu h2{font-size:14px;margin:0 0 8px}
.kisi{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:10px}
.orang{border:1px solid var(--line);border-radius:10px;padding:10px 12px;background:#fff;cursor:pointer;display:flex;gap:10px;align-items:center}
.orang:hover{border-color:var(--acc);background:#F3F8F5}.orang .t{flex:1;min-width:0}.orang .t b{display:block}.orang .t small{display:block;color:var(--mut)}
.cip{display:inline-block;padding:1px 8px;border-radius:999px;font-size:11.5px;font-weight:600;background:var(--gray2);color:var(--gray)}
.cip.ok{background:var(--ok2);color:var(--ok)}.cip.info{background:var(--info2);color:var(--info)}.cip.warn{background:var(--warn2);color:var(--warn)}
.tbl{padding:5px 11px;border-radius:8px;border:1px solid var(--line);background:#fff;cursor:pointer;font-size:12.5px}
.tbl.utama{background:var(--acc);border-color:var(--acc);color:#fff}.tbl:disabled{opacity:.5;cursor:default}
.cat{font-size:12px;color:var(--mut)}
.masuk{max-width:400px;margin:70px auto;background:var(--sf);border:1px solid var(--line);border-radius:14px;padding:22px 26px}
.masuk h1{font-size:19px;margin:0 0 6px}.masuk label{display:block;margin:12px 0 4px;color:var(--mut);font-size:12.5px}
.masuk input{width:100%;padding:8px 10px;border:1px solid var(--line);border-radius:8px;font-size:15px}.masuk input.kode{font-family:var(--num);letter-spacing:.3em;text-align:center;font-size:20px}
.masuk .tbl{width:100%;margin-top:14px;padding:9px}.masuk .tbl.garis{background:none;color:var(--acc);border-color:transparent;margin-top:6px}
.toast{position:fixed;bottom:22px;left:50%;transform:translateX(-50%);background:var(--ink);color:#fff;padding:9px 16px;border-radius:999px;font-size:13px;z-index:60;max-width:70vw}
.toast[hidden],.sisi[hidden]{display:none}