/* Tema terang / gelap (QHSES). Dimuat setelah style.css dan mobile.css.
 * Terang = tampilan bawaan di style.css. Gelap = blok di bawah, hanya untuk layar (cetak tetap terang).
 * Warna gelap diturunkan dari warna terang di style.css / mobile.css / gate_hp.css; bila menambah warna baru
 * di berkas itu, tambahkan juga padanannya di sini. Pemilihan tema: includes/theme.php. */
:root{--teal-t:var(--teal);--field:#fff;--raised:#fff}
:root[data-theme="light"]{color-scheme:light}

/* tombol ganti tema */
.theme-btn{display:inline-grid;place-items:center;flex:none;width:40px;height:40px;padding:0;border:1px solid var(--line);border-radius:10px;background:var(--raised);color:var(--ink);cursor:pointer}
.theme-btn:hover{border-color:var(--teal-t)}
.theme-btn:focus-visible{outline:2px solid var(--teal-t);outline-offset:2px}
.theme-btn span{display:grid}.theme-btn .i-sun{display:none}
html[data-theme="dark"] .theme-btn .i-moon{display:none}html[data-theme="dark"] .theme-btn .i-sun{display:grid}
.top-r .theme-btn{margin-right:-6px}
.theme-btn.m{width:44px;height:44px;border:0;border-radius:50%;background:rgba(255,255,255,.16);color:#fff;margin-right:-6px}
.theme-btn.float{position:fixed;top:calc(12px + env(safe-area-inset-top,0px));right:12px;z-index:50;width:44px;height:44px}
@media print{.theme-btn{display:none!important}}

@media screen{
html[data-theme="dark"]{color-scheme:dark;--bg:#0d1413;--card:#151e1d;--raised:#1c2726;--field:#101918;--ink:#e6efed;--mut:#98aaa6;--line:#2a3633;--teal-l:#15332f;--teal-t:#5fd6c6;--red:#f06a62;--green:#4cc97f;--amber:#e0a23f;--blue:#46b0d6}
html[data-theme="dark"] input:focus,html[data-theme="dark"] select:focus,html[data-theme="dark"] textarea:focus{border-color:var(--teal-t);box-shadow:0 0 0 3px rgba(95,214,198,.18)}
html[data-theme="dark"] .m-field input:focus,html[data-theme="dark"] .m-field select:focus,html[data-theme="dark"] .m-field textarea:focus{border-color:var(--teal-t);box-shadow:0 0 0 3px rgba(95,214,198,.22)}
html[data-theme="dark"] .alert code{background:rgba(255,255,255,.1)}
html[data-theme="dark"] .m-field select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2398aaa6' stroke-width='2.5'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E")}
html[data-theme="dark"] .qr-box{background:#fff}
html[data-theme="dark"] .eyebrow{color:var(--teal-t)}
html[data-theme="dark"] .eyebrow.dark{color:var(--teal-t)}
html[data-theme="dark"] .sidebar{background-color:var(--card)}
html[data-theme="dark"] .brand small{color:var(--teal-t)}
html[data-theme="dark"] .avatar{color:var(--teal-t)}
html[data-theme="dark"] .sidebar nav a,html[data-theme="dark"] .side-foot a{color:#b5c7c4}
html[data-theme="dark"] .sidebar nav a svg,html[data-theme="dark"] .side-foot svg{color:#a5b4b1}
html[data-theme="dark"] .sidebar nav a i{color:var(--teal-t)}
html[data-theme="dark"] .sidebar nav a:hover{background-color:#242e2c}
html[data-theme="dark"] .sidebar nav a.on{color:var(--teal-t)}
html[data-theme="dark"] .sidebar nav a.on svg{color:var(--teal-t)}
html[data-theme="dark"] .side-foot .out{color:#d9867f}
html[data-theme="dark"] .side-foot .out svg{color:#d9867f}
html[data-theme="dark"] .top{background-color:var(--card)}
html[data-theme="dark"] .bell{color:#b5c7c4}
html[data-theme="dark"] .bell em{border:2px solid var(--card)}
html[data-theme="dark"] .lnk{color:var(--teal-t)}
html[data-theme="dark"] .btn{background-color:var(--raised)}
html[data-theme="dark"] .btn:hover{border-color:#4b5653}
html[data-theme="dark"] input,html[data-theme="dark"] select,html[data-theme="dark"] textarea{background-color:var(--field)}
html[data-theme="dark"] .kpi{background-color:var(--card)}
html[data-theme="dark"] .kpi:hover{border-color:#50635f}
html[data-theme="dark"] .kpi small{color:var(--teal-t)}
html[data-theme="dark"] .ki.teal{color:var(--teal-t)}
html[data-theme="dark"] .ki.amber{background-color:#46361c}
html[data-theme="dark"] .ki.blue{background-color:#233841}
html[data-theme="dark"] .ki.red{background-color:#401b17}
html[data-theme="dark"] .chart .grid{stroke:#2d3533}
html[data-theme="dark"] .hb>div{background-color:#28312f}
html[data-theme="dark"] .b-green{background-color:#274533;color:#a5efc6}
html[data-theme="dark"] .b-amber{background-color:#52441e;color:#f9d190}
html[data-theme="dark"] .b-red{background-color:#471d18;color:#e88c85}
html[data-theme="dark"] .b-blue{background-color:#253945;color:#99d5ef}
html[data-theme="dark"] .b-gray{background-color:#2b3130;color:#b3c2bc}
html[data-theme="dark"] .tbl th{background-color:#1d2622}
html[data-theme="dark"] .tbl td{border-bottom:1px solid #272e2c}
html[data-theme="dark"] .tbl tr:hover td{background-color:#1d2622}
html[data-theme="dark"] .code{color:var(--teal-t)}
html[data-theme="dark"] .acts a,html[data-theme="dark"] .acts button{color:#adbdba}
html[data-theme="dark"] .acts a:hover{color:var(--teal-t)}
html[data-theme="dark"] .acts .danger:hover{background-color:#401b17}
html[data-theme="dark"] .alert.green{background-color:#274533;color:#a5efc6}
html[data-theme="dark"] .alert.red{background-color:#471d18;color:#e88c85}
html[data-theme="dark"] body.login{background-color:var(--bg)}
html[data-theme="dark"] .demo-row{background-color:var(--raised);color:var(--teal-t)}
html[data-theme="dark"] .ptw-state.green{background-color:#273a37;color:#a9f7f1;border-color:#394e4a}
html[data-theme="dark"] .ptw-state.amber{background-color:#46361c;color:#f9d190;border-color:#615231}
html[data-theme="dark"] .ptw-state.red{background-color:#401b17;color:#e88c85;border-color:#522b27}
html[data-theme="dark"] .ptw-state.gray{background-color:#2b3130;color:#b3c2bc;border-color:#38403e}
html[data-theme="dark"] .chk svg{color:var(--teal-t)}
html[data-theme="dark"] body.vf{background:linear-gradient(160deg,#1b2620 0%,#2b3b37 100%)}
html[data-theme="dark"] .vf-card{--tone:var(--teal-t);background-color:var(--card)}
html[data-theme="dark"] .vf-card.amber{--tone:#ecbd79;--tone-l:#46361c}
html[data-theme="dark"] .vf-card.red{--tone:#ea6363;--tone-l:#401b17}
html[data-theme="dark"] .vf-card.gray{--tone:#adbdba;--tone-l:#2b3130}
html[data-theme="dark"] .vf-brand b{color:var(--teal-t)}
html[data-theme="dark"] .vf-rows{background-color:#202926}
html[data-theme="dark"] .alert.amber-note{background-color:#46361c;color:#f9d190}
html[data-theme="dark"] .pfig{background-color:var(--card)}
html[data-theme="dark"] .pfig .pk{color:var(--teal-t)}
html[data-theme="dark"] .month-form input[type=month]{background-color:var(--field)}
html[data-theme="dark"] .ck-row{background-color:var(--card)}
html[data-theme="dark"] .ck-row.pass{border-color:#3f5e56;background-color:#1a2c25}
html[data-theme="dark"] .ck-row.fail{border-color:#572c2c;background-color:#330f0f}
html[data-theme="dark"] .ck-no{color:var(--teal-t)}
html[data-theme="dark"] .ck-opt span{color:#b5cbc7;background-color:var(--card)}
html[data-theme="dark"] .vf-photo-badge{border:3px solid var(--card)}
html[data-theme="dark"] .emp-mini .ph b{color:var(--teal-t)}
html[data-theme="dark"] .mode-opt{background-color:var(--card)}
html[data-theme="dark"] .mode-opt .mo-ico{color:var(--teal-t)}
html[data-theme="dark"] .mode-opt:hover{border-color:#4b5653}
html[data-theme="dark"] .ico-opt span{background-color:var(--card)}
html[data-theme="dark"] .ico-opt:hover span{border-color:#4b5653}
html[data-theme="dark"] .ico-opt input:checked+span{color:var(--teal-t)}
html[data-theme="dark"] .img-cur{border:1px dashed #4b5653;background:conic-gradient(#282d2b 25%,var(--card) 0 50%,#282d2b 0 75%,var(--card) 0) 0 0/16px 16px}
html[data-theme="dark"] input[type=file]{background-color:var(--field)}
html[data-theme="dark"] .sw{border:2px solid var(--card)}
html[data-theme="dark"] .pv-side{background-color:var(--card)}
html[data-theme="dark"] .login .forgot a,html[data-theme="dark"] .linklike{color:var(--teal-t)}
html[data-theme="dark"] .sec-key{background-color:#232c2a}
html[data-theme="dark"] .sec-codes code{background-color:#232c2a}
html[data-theme="dark"] .aud-old{color:#e88c85}
html[data-theme="dark"] .aud-new{color:#a5efc6}
html[data-theme="dark"] .appr-step{background-color:var(--card)}
html[data-theme="dark"] .appr-step>b{color:var(--teal-t)}
html[data-theme="dark"] .appr-step.cur{border-color:#9c804b;background-color:#3a2c11}
html[data-theme="dark"] .appr-step.done{border-color:#597e78}
html[data-theme="dark"] .appr-step.rej{border-color:#6c3a35;background-color:#311a17}
html[data-theme="dark"] .stamp{background-color:#1d2c29}
html[data-theme="dark"] .stamp.rej{background-color:#311a17}
html[data-theme="dark"] .stamp .st-h{color:#98f1b9}
html[data-theme="dark"] .stamp.rej .st-h{color:#ee7777}
html[data-theme="dark"] .stamp .st-t{border-top:1px solid #3c4e4b}
html[data-theme="dark"] .stamp .st-c b{color:var(--teal-t)}
html[data-theme="dark"] .btn.danger-o{border-color:#6c3a35;color:#e88c85}
html[data-theme="dark"] .btn.danger-o:hover{background-color:#401b17;border-color:#91504a}
html[data-theme="dark"] .appr-hist summary{color:var(--teal-t)}
html[data-theme="dark"] .pub-card{background-color:var(--card);--tone:var(--teal-t)}
html[data-theme="dark"] .pub-lang a{color:var(--teal-t)}
html[data-theme="dark"] .pub-form input[type=text],html[data-theme="dark"] .pub-form input[type=tel],html[data-theme="dark"] .pub-form select{background-color:var(--field);border:1px solid #434f4c}
html[data-theme="dark"] .pub-topic{background-color:#202926}
html[data-theme="dark"] .pub-topic h2{color:var(--teal-t)}
html[data-theme="dark"] .pub-opt:hover{background-color:#242e2c}
html[data-theme="dark"] .pub-review{background-color:#401b17}
html[data-theme="dark"] .pub-review b{color:#e88c85}
html[data-theme="dark"] .pub-review small{color:#e5a49f}
html[data-theme="dark"] .sc-tbl tr.sc-cat td{background-color:#1f2a28;color:var(--teal-t)}
html[data-theme="dark"] .sc-bar{background-color:#28312f}
html[data-theme="dark"] .rp-sec{background-color:var(--card)}
html[data-theme="dark"] .rp-sec h2 .mono{color:var(--teal-t)}
html[data-theme="dark"] .rp-kpi{background-color:var(--card)}
html[data-theme="dark"] .rp-att li{background-color:#3a2e16}
html[data-theme="dark"] .rp-att li.red{background-color:#371916}
html[data-theme="dark"] .rp-narr h4{color:var(--teal-t)}
html[data-theme="dark"] .rp-stamp{background-color:#1b302b}
html[data-theme="dark"] .rp-stamp b{color:var(--teal-t)}
html[data-theme="dark"] .rp-signbox{border:1px solid #474f4d}
html[data-theme="dark"] .rp-signbox b{color:var(--teal-t)}
html[data-theme="dark"] .tm-step i{background-color:#28312f}
html[data-theme="dark"] .tm-step.done{color:#a5efc6;border-color:#3f5e4e}
html[data-theme="dark"] .tm-step.now{color:var(--teal-t)}
html[data-theme="dark"] .tm-check li.ok i{background-color:#274533;color:#a5efc6}
html[data-theme="dark"] .tm-check li.no i{background-color:#52441e;color:#f9d190}
html[data-theme="dark"] body.pres{background-color:var(--card)}
html[data-theme="dark"] .grp-item{background-color:#1d2622}
html[data-theme="dark"] .grp-bar b{color:var(--teal-t)}
html[data-theme="dark"] .grp-acts button{background-color:var(--card)}
html[data-theme="dark"] .grp-acts button:hover{border-color:#4b5653}
html[data-theme="dark"] .grp-acts .grp-del:hover{border-color:#6c3a35}
html[data-theme="dark"] .p2-m{background-color:var(--card)}
html[data-theme="dark"] .p2-m.ok{background-color:#274533;border-color:#3f5e4b;color:#a5efc6}
html[data-theme="dark"] .p2-m.miss{background-color:#371916;border-color:#572c2c;color:#e68686}
html[data-theme="dark"] .p2-m.planned{background-color:#1b293c;border-color:#2d3d57;color:#89afeb}
html[data-theme="dark"] .p2-m.pending{background-color:#46361c;border-color:#6c5c35;color:#f9d190}
html[data-theme="dark"] .p2-legend .ok{background-color:#274533}
html[data-theme="dark"] .p2-legend .miss{background-color:#371916}
html[data-theme="dark"] .p2-legend .planned{background-color:#1b293c}
html[data-theme="dark"] .p2-legend .pending{background-color:#46361c}
html[data-theme="dark"] .ck-opt input:checked+span.nil{background-color:var(--field);color:#b5cbc7}
html[data-theme="dark"] .grp-ctl-h{color:var(--teal-t)}
html[data-theme="dark"] .grp-legacy{background-color:#423513;border:1px solid #796638}
html[data-theme="dark"] .grp-tier b{color:var(--teal-t)}
html[data-theme="dark"] .hira-res-out{color:var(--teal-t);background-color:#24322f}
html[data-theme="dark"] .fld-lock{background-color:#25272c}
html[data-theme="dark"] .pre-box{background-color:#232a27}
html[data-theme="dark"] .txt-red{color:#e88c85}
html[data-theme="dark"] .txt-amber{color:#f9d190}
html[data-theme="dark"] .txt-orange{color:#fcb077}
html[data-theme="dark"] .vf-ico.green{--tone-l:#273a37;--tone:#9cf5ee}
html[data-theme="dark"] .vf-ico.amber{--tone-l:#46361c;--tone:#ecbd79}
html[data-theme="dark"] .vf-ico.red{--tone-l:#401b17;--tone:#ea6363}
html[data-theme="dark"] .m-pill[data-state=offline]{background-color:#46361c;color:#f9d190}
html[data-theme="dark"] .m-bar{background-color:#273a37;color:var(--teal-t)}
html[data-theme="dark"] .m-bar[data-tone=amber]{background-color:#46361c;color:#f9d190}
html[data-theme="dark"] .m-nav{background-color:var(--card)}
html[data-theme="dark"] .m-nav a{color:#adbdba}
html[data-theme="dark"] .m-nav a.on{color:var(--teal-t)}
html[data-theme="dark"] .m-nav a.hero.on{color:var(--teal-t)}
html[data-theme="dark"] .m-field input[type=text],html[data-theme="dark"] .m-field input[type=date],html[data-theme="dark"] .m-field input[type=time],html[data-theme="dark"] .m-field select,html[data-theme="dark"] .m-field textarea{background-color:var(--field);border:1.5px solid #434f4c}
html[data-theme="dark"] .m-err{color:#f0827a}
html[data-theme="dark"] .m-seg span{border:1.5px solid #434f4c;background-color:var(--card);color:#b5c7c4}
html[data-theme="dark"] .m-btn-cam,html[data-theme="dark"] .m-btn-gal{border:1.5px dashed #6a817d;background-color:var(--card);color:var(--teal-t)}
html[data-theme="dark"] .m-thumb{background-color:#34403d}
html[data-theme="dark"] .m-asset{color:var(--teal-t)}
html[data-theme="dark"] .m-done-ic{background-color:#274533}
html[data-theme="dark"] .m-done[data-kind=wait] .m-done-ic{background-color:#46361c}
html[data-theme="dark"] .m-tile{background-color:var(--card)}
html[data-theme="dark"] .m-tile svg{color:var(--teal-t)}
html[data-theme="dark"] .m-item{background-color:var(--card)}
html[data-theme="dark"] .m-item.bad{border-color:#6c3a35;background-color:#311a17}
html[data-theme="dark"] .m-item.bad small{color:#e88c85}
html[data-theme="dark"] .m-item .m-mini{background-color:var(--card)}
html[data-theme="dark"] .m-empty{background-color:var(--card)}
html[data-theme="dark"] .m-assetcard{background-color:var(--card)}
html[data-theme="dark"] .m-geo-status{background-color:var(--card)}
html[data-theme="dark"] .m-geo-status[data-state=ok]{border-color:#394e4a;background-color:#273a37;color:#a9f7f1}
html[data-theme="dark"] .m-geo-status[data-state=weak]{border-color:#615231;background-color:#46361c;color:#f9d190}
html[data-theme="dark"] .m-geo-status[data-state=err]{border-color:#522b27;background-color:#401b17;color:#e88c85}
html[data-theme="dark"] .m-geo-map{background-color:#28312f}
html[data-theme="dark"] .gh-mini{color:var(--teal-t)}
html[data-theme="dark"] .gh-banner{background-color:#423313;color:#fdd397}
html[data-theme="dark"] .gh-banner.ok{background-color:#203928;color:#b3eecb}
html[data-theme="dark"] .gh-banner.err{background-color:#3a1616;color:#ea9a9a}
html[data-theme="dark"] .gh-link{color:var(--teal-t)}
html[data-theme="dark"] .gh-tag{color:var(--teal-t)}
/* Dashboard Terpadu (dashboard_terpadu.php) */
html[data-theme="dark"] .ipd-sum a{background-color:var(--card);color:var(--ink)}
html[data-theme="dark"] .ipd-sum a b{color:var(--ink)}
html[data-theme="dark"] .ipd-i{background-color:var(--raised);color:var(--ink)}
html[data-theme="dark"] .ipd-i:hover{background-color:#232f2d}
html[data-theme="dark"] .ipd-i b{color:var(--ink)}
html[data-theme="dark"] .ipd-i.t-red small{color:#e88c85}
html[data-theme="dark"] .ipd-i.t-amber small{color:#f9d190}
}