/* ARSHINET - tema tambahan agar isi tema sama di semua aplikasi (dibuat otomatis dari tema Report). (c) ARSHINET - Risman Jafar, S.Kom. */
:root{--logo-bg:#111214;--logo-fg:#ffffff;--logo-dot:#ff5a1f;--orange:#ff5a1f;--orange-d:#e8480f;--rowbg:#f6f7f8;--rowhover:#f0f1f3}
:root{--side-bg:#1c2433;--side-ink:#e8ecf3;--side-muted:#9aa5b8;--side-ic:var(--accent2);--side-line:rgba(255,255,255,.08);--side-ring:var(--accent2)}
:root[data-mode="dark"]{--side-bg:#16203a}
/* Kapsul */
:root[data-accent="kapsul"]{--bg:#e9ebee;--card:#ffffff;--ink:#111214;--ink2:#2b2f36;--nav:#2b2f36;--muted:#6b7280;--line:#e3e6ea;--soft:#f3f4f6;
  --blue:#111214;--blue-d:#000000;--blue-l:#f1f2f4;--ring:#cfd4db;--hover:#f7f8f9;--sub:#f3f4f6;--glow:#ececec;--accent2:#ff5a1f;--info-ink:#111214;
  --on-accent:#ffffff;--group:#111214;--shadow:0 1px 2px rgba(0,0,0,.04)}
:root[data-mode="dark"][data-accent="kapsul"]{--bg:#0b0c0e;--card:#15171b;--ink:#f1f2f4;--ink2:#d3d6dc;--nav:#d3d6dc;--muted:#8d939d;--line:#2a2e35;--soft:#1d2025;
  --blue:#f4f5f7;--blue-d:#ffffff;--blue-l:#24272d;--ring:#3a3f48;--hover:#1a1d22;--sub:#1d2025;--glow:#202329;--info-ink:#e5e7eb;
  --on-accent:#111214;--group:#000000;--rowbg:#1b1e23;--rowhover:#21252b;--shadow:0 1px 2px rgba(0,0,0,.4)}
:root[data-accent="kapsul"] .tbrand b,:root[data-accent="kapsul"] .brand b,:root[data-accent="kapsul"] .brand em,
:root[data-accent="kapsul"] .topbar b{color:var(--orange)}
:root[data-accent="kapsul"] a{color:var(--orange-d)}
:root[data-accent="kapsul"] .btn,:root[data-accent="kapsul"] .pills a,:root[data-accent="kapsul"] nav a,:root[data-accent="kapsul"] .acctmenu a,
:root[data-accent="kapsul"] .tbrand{color:var(--ink)}
:root[data-accent="kapsul"] .pills a{color:var(--ink2)}
:root[data-accent="kapsul"] .pills a.on,:root[data-accent="kapsul"] nav a.on{color:var(--on-accent)}
:root[data-accent="kapsul"] .btn{border-radius:99px}
:root[data-accent="kapsul"] .btn.primary{background:var(--orange);border-color:var(--orange);color:#fff}
:root[data-accent="kapsul"] .btn.primary:hover{background:var(--orange-d);border-color:var(--orange-d)}
:root[data-accent="kapsul"] .panel{border:0;border-radius:28px;box-shadow:var(--shadow)}
:root[data-accent="kapsul"] .card{border-color:var(--line);border-radius:20px;box-shadow:none}
:root[data-accent="kapsul"] input,:root[data-accent="kapsul"] select,:root[data-accent="kapsul"] textarea{border-radius:12px}
:root[data-accent="kapsul"] .ph h1{font-weight:300;font-size:38px;letter-spacing:-.035em;line-height:1.1}
:root[data-accent="kapsul"] .val{letter-spacing:-.02em}
:root[data-accent="kapsul"] .seg button.on{background:var(--blue);color:var(--on-accent)}
:root[data-accent="kapsul"] .rkbar i{background:linear-gradient(90deg,var(--orange),#ff9a6b)}
:root[data-accent="kapsul"] .tw,:root[data-accent="kapsul"] .jualtw{border:0;border-radius:0;background:transparent}
:root[data-accent="kapsul"] .tw table,:root[data-accent="kapsul"] .jualtw table{border-collapse:separate;border-spacing:0 6px}
:where(:root[data-accent="kapsul"] .tw, :root[data-accent="kapsul"] .jualtw) th{background:var(--card);color:var(--muted);font-weight:600;font-size:12.5px;padding-top:6px;padding-bottom:6px}
:where(:root[data-accent="kapsul"] .tw, :root[data-accent="kapsul"] .jualtw) :is(tbody,tfoot) td{border-top:0;background:var(--rowbg)}
:where(:root[data-accent="kapsul"] .tw, :root[data-accent="kapsul"] .jualtw) tbody tr:hover td{background:var(--rowhover)}
:where(:root[data-accent="kapsul"] .tw, :root[data-accent="kapsul"] .jualtw) :is(tbody,tfoot) td:first-child{border-radius:14px 0 0 14px}
:where(:root[data-accent="kapsul"] .tw, :root[data-accent="kapsul"] .jualtw) :is(tbody,tfoot) td:last-child{border-radius:0 14px 14px 0}
:where(:root[data-accent="kapsul"] .tw, :root[data-accent="kapsul"] .jualtw) :is(tbody,tfoot) td:only-child{border-radius:14px}
:root[data-accent="kapsul"] tr.detrow>td{border-radius:14px!important}
@media (max-width:820px){:root[data-accent="kapsul"] .ph h1{font-size:30px}}
@media (max-width:820px){:root[data-accent="kapsul"] .jualtbl tr.jrow,:root[data-accent="kapsul"] .jualtbl tfoot tr{border-color:transparent;background:var(--rowbg)}}
:root[data-accent="kapsul"]{--side-bg:#111214;--side-ic:#ff5a1f;--side-ring:#ff5a1f;--side-muted:#9a9ea6}
:root[data-mode="dark"][data-accent="kapsul"]{--side-bg:#1a1c21}
/* Hutan */
:root[data-accent="hutan"]{--bg:#dfe9e7;--card:#ffffff;--ink:#22302e;--ink2:#3a4a47;--nav:#3a4a47;--muted:#6b7d79;--line:#d3e0dd;--soft:#edf3f2;
  --blue:#3d5753;--blue-d:#2f4542;--blue-l:#e2ecea;--ring:#b9cdc9;--hover:#f4f8f7;--sub:#edf3f2;--glow:#d5e3e0;--accent2:#d4a72c;--info-ink:#2f4542;
  --on-accent:#ffffff;--group:#3d5753;--orange:#d4a72c;--orange-d:#b98f1d;--rowbg:#f2f6f5;--rowhover:#e9f0ef;
  --side-bg:#3d5753;--side-ic:#d9ab35;--side-ring:#d9ab35;--side-muted:#b5c6c2;--logo-dot:#d4a72c}
:root[data-mode="dark"][data-accent="hutan"]{--bg:#121a19;--card:#1a2523;--ink:#e6eeec;--ink2:#c5d3d0;--muted:#8fa29e;--line:#2a3936;--soft:#203029;
  --blue:#7fa8a1;--blue-l:#22322f;--ring:#3b524e;--rowbg:#1f2c2a;--rowhover:#253533;--side-bg:#24332f}
:root[data-accent="hutan"] .btn{border-radius:99px}
:root[data-accent="hutan"] .btn.primary{background:var(--orange);border-color:var(--orange);color:#fff}
:root[data-accent="hutan"] .btn.primary:hover{background:var(--orange-d);border-color:var(--orange-d)}
:root[data-accent="hutan"] .panel{border:0;border-radius:28px}
:root[data-accent="hutan"] .tbrand b,:root[data-accent="hutan"] .brand b,:root[data-accent="hutan"] .brand em{color:var(--orange)}
/* Flux */
:root[data-accent="flux"]{--bg:#e9ebee;--card:#ffffff;--ink:#111214;--ink2:#2b2f36;--nav:#2b2f36;--muted:#6b7280;--line:#e3e6ea;--soft:#f3f4f6;
  --blue:#111214;--blue-d:#000000;--blue-l:#f1f2f4;--ring:#cfd4db;--hover:#f7f8f9;--sub:#f3f4f6;--glow:#ececec;--accent2:#ff5a1f;--info-ink:#111214;
  --on-accent:#ffffff;--group:#111214;--shadow:0 1px 2px rgba(0,0,0,.04)}
:root[data-accent="flux"] .tbrand b,:root[data-accent="flux"] .brand b,:root[data-accent="flux"] .brand em,
:root[data-accent="flux"] .topbar b{color:var(--orange)}
:root[data-accent="flux"] a{color:var(--orange-d)}
:root[data-accent="flux"] .btn,:root[data-accent="flux"] .pills a,:root[data-accent="flux"] nav a,:root[data-accent="flux"] .acctmenu a,
:root[data-accent="flux"] .tbrand{color:var(--ink)}
:root[data-accent="flux"] .pills a{color:var(--ink2)}
:root[data-accent="flux"] .pills a.on,:root[data-accent="flux"] nav a.on{color:var(--on-accent)}
:root[data-accent="flux"] .btn{border-radius:99px}
:root[data-accent="flux"] .btn.primary{background:var(--orange);border-color:var(--orange);color:#fff}
:root[data-accent="flux"] .btn.primary:hover{background:var(--orange-d);border-color:var(--orange-d)}
:root[data-accent="flux"] .panel{border:0;border-radius:28px;box-shadow:var(--shadow)}
:root[data-accent="flux"] .card{border-color:var(--line);border-radius:20px;box-shadow:none}
:root[data-accent="flux"] input,:root[data-accent="flux"] select,:root[data-accent="flux"] textarea{border-radius:12px}
:root[data-accent="flux"] .ph h1{font-weight:300;font-size:38px;letter-spacing:-.035em;line-height:1.1}
:root[data-accent="flux"] .val{letter-spacing:-.02em}
:root[data-accent="flux"] .seg button.on{background:var(--blue);color:var(--on-accent)}
:root[data-accent="flux"] .rkbar i{background:linear-gradient(90deg,var(--orange),#ff9a6b)}
:root[data-accent="flux"] .tw,:root[data-accent="flux"] .jualtw{border:0;border-radius:0;background:transparent}
:root[data-accent="flux"] .tw table,:root[data-accent="flux"] .jualtw table{border-collapse:separate;border-spacing:0 6px}
:where(:root[data-accent="flux"] .tw, :root[data-accent="flux"] .jualtw) th{background:var(--card);color:var(--muted);font-weight:600;font-size:12.5px;padding-top:6px;padding-bottom:6px}
:where(:root[data-accent="flux"] .tw, :root[data-accent="flux"] .jualtw) :is(tbody,tfoot) td{border-top:0;background:var(--rowbg)}
:where(:root[data-accent="flux"] .tw, :root[data-accent="flux"] .jualtw) tbody tr:hover td{background:var(--rowhover)}
:where(:root[data-accent="flux"] .tw, :root[data-accent="flux"] .jualtw) :is(tbody,tfoot) td:first-child{border-radius:14px 0 0 14px}
:where(:root[data-accent="flux"] .tw, :root[data-accent="flux"] .jualtw) :is(tbody,tfoot) td:last-child{border-radius:0 14px 14px 0}
:where(:root[data-accent="flux"] .tw, :root[data-accent="flux"] .jualtw) :is(tbody,tfoot) td:only-child{border-radius:14px}
:root[data-accent="flux"] tr.detrow>td{border-radius:14px!important}
@media (max-width:820px){:root[data-accent="flux"] .ph h1{font-size:30px}}
@media (max-width:820px){:root[data-accent="flux"] .jualtbl tr.jrow,:root[data-accent="flux"] .jualtbl tfoot tr{border-color:transparent;background:var(--rowbg)}}
:root[data-accent="flux"]{--side-bg:#111214;--side-ic:#ff5a1f;--side-ring:#ff5a1f;--side-muted:#9a9ea6}
:root[data-accent="flux"]{--bg:#e4e4e2;--orange:#8fb31d;--orange-d:#6f8f12;--accent2:#c2e04a;--logo-dot:#d4f06a;
  --side-bg:#1d1d1f;--side-ic:#d4f06a;--side-ring:#d4f06a;--side-muted:#a3a3a0;--rowbg:#efefec;--rowhover:#e8e8e4}
:root[data-accent="flux"] .btn.primary{background:#d4f06a;border-color:#c2e04a;color:#141414}
:root[data-accent="flux"] .btn.primary:hover{background:#c2e04a;border-color:#b3d43a;color:#141414}
:root[data-accent="flux"] .rkbar i{background:linear-gradient(90deg,#b3d43a,#d4f06a)}
/* tombol utama: warna aksen tema (sama dengan Mikhmon/VPN), teks selalu terbaca */
:root[data-accent="flux"] .btn.primary{background:linear-gradient(135deg,#d4f06a,#a8d43a)!important;color:#141414!important;box-shadow:0 8px 18px -10px #8aa81a!important}
:root[data-accent="kapsul"] .btn.primary{background:linear-gradient(135deg,#ff5a1f,#ff8a57)!important;color:#fff!important;box-shadow:0 8px 18px -10px #ff5a1f!important}
:root[data-accent="hutan"] .btn.primary{background:linear-gradient(135deg,#d4a72c,#e6c25e)!important;color:#1f2b29!important;box-shadow:0 8px 18px -10px #b98f1d!important}
/* Menu samping gelap seperti Report */
@media (min-width:821px) and (max-width:1500px){body.layout-samping .jualtbl .acts{flex-wrap:wrap;justify-content:flex-start;max-width:190px}}
@media (min-width:821px) and (max-width:1500px){body.layout-samping .jualtbl td.aksi{white-space:normal;min-width:200px}}
:root{--side-bg:#1c2433;--side-ink:#e8ecf3;--side-muted:#9aa5b8;--side-ic:var(--accent2);--side-line:rgba(255,255,255,.08);--side-ring:var(--accent2)}
:root[data-mode="dark"]{--side-bg:#16203a}
:root[data-accent="neon"]{--side-bg:#140d26;--side-ic:#22d3ee;--side-ring:#c026d3}
:root[data-accent="ungu"]{--side-bg:#2e1f5e}
:root[data-accent="hijau"]{--side-bg:#14392a}
:root[data-accent="oranye"]{--side-bg:#3a1f10}
:root[data-accent="terang"]{--side-bg:#1e293b}
@media (min-width:821px){body.layout-samping .side{background:var(--side-bg);border:0;color:var(--side-ink);margin:16px 0 16px 16px;height:calc(100vh - 32px);top:16px;
    border-radius:28px;padding:22px 0 18px 16px;width:256px;box-shadow:0 20px 40px -24px rgba(0,0,0,.45);overflow-x:hidden}}
@media (min-width:821px){body.layout-samping .main{padding-left:24px}}
body.layout-samping .side{--logo-bg:#ffffff;--logo-fg:#111214}
body.layout-samping .side .brand{color:var(--side-ink);padding:0 16px 14px 4px}
body.layout-samping .side .brand b,body.layout-samping .side .brand em{color:var(--side-ic)}
.sideprof{display:none}
body.layout-samping .sideprof{display:flex;flex-direction:column;align-items:center;text-align:center;gap:3px;padding:10px 16px 18px 0;margin-bottom:10px;
  border-bottom:1px solid var(--side-line)}
.sideprof .pav{width:74px;height:74px;border-radius:50%;display:grid;place-items:center;margin-bottom:10px;
  background:conic-gradient(var(--side-ring) 0 72%,transparent 72% 100%);padding:3px}
.sideprof .pav span{width:100%;height:100%;border-radius:50%;display:grid;place-items:center;font-size:28px;font-weight:800;
  background:var(--side-bg);color:var(--side-ink);border:4px solid var(--side-bg);box-shadow:inset 0 0 0 1px var(--side-line);
  background-image:linear-gradient(145deg,rgba(255,255,255,.14),rgba(255,255,255,.03))}
.sideprof b{font-size:15px;letter-spacing:.05em;text-transform:uppercase;color:var(--side-ink)}
.sideprof small{font-size:12px;color:var(--side-muted)}
body.layout-samping .scope{padding:0 16px 12px 0}
body.layout-samping .scope label{color:var(--side-muted)}
body.layout-samping .scope select{background:rgba(255,255,255,.07);border-color:var(--side-line);color:var(--side-ink)}
body.layout-samping .scope select option{color:#111}
body.layout-samping .side nav{gap:4px}
body.layout-samping .side nav a{position:relative;color:var(--side-ink);font-weight:600;letter-spacing:.02em;padding:11px 14px;margin-right:16px;border-radius:14px;
  background:transparent;box-shadow:none;transition:background .15s}
body.layout-samping .side nav a .ic{color:var(--side-ic)}
body.layout-samping .side nav a:hover{background:rgba(255,255,255,.07)}
body.layout-samping .side nav a.on{background:var(--bg);color:var(--ink);margin-right:0;border-radius:24px 0 0 24px;padding-right:30px;font-weight:700}
body.layout-samping .side nav a.on .ic{color:var(--side-ic)}
@media (min-width:821px){body.layout-samping .side nav a.on::before,body.layout-samping .side nav a.on::after{content:"";position:absolute;right:0;width:24px;height:24px;pointer-events:none}}
@media (min-width:821px){body.layout-samping .side nav a.on::before{top:-24px;border-bottom-right-radius:24px;box-shadow:8px 8px 0 8px var(--bg)}}
@media (min-width:821px){body.layout-samping .side nav a.on::after{bottom:-24px;border-top-right-radius:24px;box-shadow:8px -8px 0 8px var(--bg)}}
body.layout-samping .navgroup>summary{color:var(--side-muted);margin-right:16px}
body.layout-samping .navgroup>summary:hover{background:rgba(255,255,255,.07);color:var(--side-ink)}
body.layout-samping .side-foot{border-top:1px solid var(--side-line);margin-right:16px}
body.layout-samping .side-foot .btn{background:transparent;border-color:rgba(255,255,255,.18);color:#ffb4a8}
body.layout-samping .side-foot .btn:hover{background:rgba(255,255,255,.07)}
body.layout-samping .side-foot .muted{color:var(--side-muted)}
@media (max-width:820px){body.layout-samping .side{background:var(--side-bg);border-radius:0 24px 24px 0;padding:22px 0 22px 14px}}
@media (max-width:820px){body.layout-samping .side nav a.on{border-radius:14px;margin-right:14px;padding-right:14px}}
.sideprof .pav{width:62px;height:62px;margin-bottom:8px}
.sideprof .pav span{font-size:23px}
body.layout-samping .sideprof{padding:4px 16px 14px 0;margin-bottom:8px}
@media (min-width:821px){body.layout-samping .side nav a{padding:10px 14px}}
.sideprof .pav{display:grid;padding:3px}
.sideprof .pav>.avimg,.sideprof .pav>.avtxt{border:4px solid var(--side-bg);box-shadow:inset 0 0 0 1px var(--side-line)}
.sideprof .pav>.avtxt{font-size:23px;font-weight:800;color:var(--side-ink);background:var(--side-bg);
  background-image:linear-gradient(145deg,rgba(255,255,255,.14),rgba(255,255,255,.03))}
.sideprof .pav:hover{filter:brightness(1.08)}
body.layout-samping .side{scrollbar-width:none;-ms-overflow-style:none}
body.layout-samping .side::-webkit-scrollbar{display:none}
@media (min-width:821px) and (max-height:1120px){body.layout-samping .side{padding-top:16px;padding-bottom:14px}}
@media (min-width:821px) and (max-height:1120px){body.layout-samping .side .brand{padding-bottom:10px}}
@media (min-width:821px) and (max-height:1120px){body.layout-samping .sideprof{flex-direction:row;align-items:center;text-align:left;gap:12px;padding:2px 16px 12px 2px;margin-bottom:8px}}
@media (min-width:821px) and (max-height:1120px){body.layout-samping .sideprof .pav{width:48px;height:48px;margin:0;flex:none;padding:2px}}
@media (min-width:821px) and (max-height:1120px){body.layout-samping .sideprof .pav>.avimg,body.layout-samping .sideprof .pav>.avtxt{border-width:3px}}
@media (min-width:821px) and (max-height:1120px){body.layout-samping .sideprof .pav>.avtxt,body.layout-samping .sideprof .pav span{font-size:18px}}
@media (min-width:821px) and (max-height:1120px){body.layout-samping .sideprof b{font-size:13px;letter-spacing:.03em;line-height:1.25;display:block}}
@media (min-width:821px) and (max-height:1120px){body.layout-samping .sideprof small{font-size:11.5px;display:block}}
@media (min-width:821px) and (max-height:1120px){body.layout-samping .sideprof>b,body.layout-samping .sideprof>small{min-width:0}}
@media (min-width:821px) and (max-height:1120px){body.layout-samping .scope{padding-bottom:8px}}
@media (min-width:821px) and (max-height:1120px){body.layout-samping .scope select{padding-top:7px;padding-bottom:7px}}
@media (min-width:821px) and (max-height:1120px){body.layout-samping .side nav{gap:2px}}
@media (min-width:821px) and (max-height:1120px){body.layout-samping .side nav a{padding:8px 14px}}
@media (min-width:821px) and (max-height:1120px){body.layout-samping .navsep{padding-top:10px;padding-bottom:6px}}
@media (min-width:821px) and (max-height:1120px){body.layout-samping .side-foot{padding-top:10px;gap:6px}}
@media (min-width:821px) and (max-height:1120px){body.layout-samping .side-foot .btn{padding:7px 12px}}
@media (min-width:821px) and (max-height:920px){body.layout-samping .side nav a{padding:6px 14px;font-size:13.5px}}
@media (min-width:821px) and (max-height:920px){body.layout-samping .scope label{font-size:0;line-height:0}}
@media (min-width:821px) and (max-height:920px){body.layout-samping .scope select{margin-top:0}}
@media (min-width:821px) and (max-height:920px){body.layout-samping .side-foot .muted{display:none}}
@media (min-width:821px) and (max-height:1120px){body.layout-samping .sptxt{gap:1px}}
@media (min-width:821px) and (max-height:1120px){body.layout-samping .sptxt b{white-space:nowrap}}
@media (min-width:821px) and (max-height:800px){body.layout-samping .side{padding-top:12px;padding-bottom:10px}}
@media (min-width:821px) and (max-height:800px){body.layout-samping .side .brand{padding-bottom:6px}}
@media (min-width:821px) and (max-height:800px){body.layout-samping .sideprof{padding-bottom:8px;margin-bottom:6px}}
@media (min-width:821px) and (max-height:800px){body.layout-samping .sideprof .pav{width:40px;height:40px}}
@media (min-width:821px) and (max-height:800px){body.layout-samping .side nav a{padding:5px 14px;font-size:13px;gap:10px}}
@media (min-width:821px) and (max-height:800px){body.layout-samping .side nav a .ic{width:16px;height:16px}}
@media (min-width:821px) and (max-height:800px){body.layout-samping .navsep{padding-top:6px;padding-bottom:4px}}
@media (min-width:821px) and (max-height:800px){body.layout-samping .side-foot{padding-top:6px}}
@media (min-width:821px){body.layout-samping .side{box-shadow:none}}
@media (min-width:821px) and (max-height:920px){body.layout-samping .side nav a{font-size:15.5px}}
@media (min-width:821px) and (max-height:800px){body.layout-samping .side nav a{font-size:15px}}
body.layout-samping .navsep{color:var(--side-muted)}
body.layout-samping .side-foot .who{color:var(--side-ink)}
body.layout-samping .side-foot .who small{background:rgba(255,255,255,.1);color:var(--side-ink)}