/* =========================================================
   SIAP — skin "Terang & bersih" (default)
   Semua aturan di-scope ke tema terang; mode gelap (tombol bulan)
   tetap memakai tampilan gelap bawaan.
   ========================================================= */
html:not([data-theme="dark"]) {
  --bg: #f5f6fa;
  --surface-2: #f8f9fc;
  --line: #e6e9f0;
  --shadow: 0 1px 2px rgba(15,27,45,.04), 0 8px 24px rgba(15,27,45,.06);
  --shadow-lg: 0 18px 44px rgba(15,27,45,.12);
  --hero-grad: radial-gradient(520px 320px at 92% -8%, rgba(227,6,19,.13), transparent 70%),
               radial-gradient(460px 300px at 70% 120%, rgba(255,140,60,.12), transparent 70%),
               radial-gradient(420px 300px at -6% 100%, rgba(42,120,214,.10), transparent 70%),
               linear-gradient(160deg, #fff7f5 0%, #ffffff 48%, #f3f7ff 100%);
}

/* ---------- Topbar putih ---------- */
html:not([data-theme="dark"]) .topbar { background: rgba(255,255,255,.9); color: var(--text); border-bottom: 1px solid var(--line); box-shadow: 0 2px 14px rgba(15,27,45,.05); }
html:not([data-theme="dark"]) .brand__logos { box-shadow: 0 0 0 1px var(--line), 0 2px 8px rgba(15,27,45,.06); }
html:not([data-theme="dark"]) .brand__text strong { color: var(--text); }
html:not([data-theme="dark"]) .brand__text small { color: var(--muted); }
html:not([data-theme="dark"]) .icon-btn { border-color: var(--line); background: #fff; color: var(--text-2); }
html:not([data-theme="dark"]) .icon-btn:hover { background: var(--surface-2); color: var(--text); border-color: #d6dbe5; }
html:not([data-theme="dark"]) .icon-btn.is-on { background: rgba(227,6,19,.08); color: var(--accent); }
html:not([data-theme="dark"]) .umenu__btn { border-color: var(--line); }
html:not([data-theme="dark"]) .mainnav__link { color: var(--text-2); }
html:not([data-theme="dark"]) .mainnav__link:hover { color: var(--text); background: var(--surface-2); }
html:not([data-theme="dark"]) .mainnav__link.is-on { color: var(--accent); background: rgba(227,6,19,.08); box-shadow: inset 0 0 0 1px rgba(227,6,19,.15); }
@media (max-width: 859px) {
  html:not([data-theme="dark"]) .topbar { background: #fff; }
  html:not([data-theme="dark"]) .mainnav__link.is-on { background: transparent; box-shadow: none; }
}

/* ---------- Hero terang ---------- */
html:not([data-theme="dark"]) .hero { color: var(--text); background: #fff; border-bottom: 1px solid var(--line); }
html:not([data-theme="dark"]) .hero__bg { background: var(--hero-grad); }
html:not([data-theme="dark"]) .hero__bg::after { opacity: .5; background-image: radial-gradient(rgba(15,27,45,.09) 1px, transparent 1.2px); background-size: 18px 18px;
  mask-image: linear-gradient(180deg, #000 0%, transparent 75%); -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 75%); }
html:not([data-theme="dark"]) .hero h1 { color: #111a2c; letter-spacing: -.02em; }
html:not([data-theme="dark"]) .hero h1 .accent { background: linear-gradient(90deg, #e30613, #ff6a3d); -webkit-background-clip: text; background-clip: text; }
html:not([data-theme="dark"]) .hero__lead { color: var(--text-2); }
html:not([data-theme="dark"]) .hero__meta { color: var(--muted); }
html:not([data-theme="dark"]) .eyebrow { color: var(--accent); background: rgba(227,6,19,.07); border-color: rgba(227,6,19,.16); }

/* pencarian */
html:not([data-theme="dark"]) .search__box { border: 1px solid var(--line); box-shadow: 0 12px 32px rgba(15,27,45,.09); }
html:not([data-theme="dark"]) .search__box:focus-within { border-color: rgba(227,6,19,.45); box-shadow: 0 0 0 4px rgba(227,6,19,.12), 0 12px 32px rgba(15,27,45,.09); }
html:not([data-theme="dark"]) .btn-check { box-shadow: 0 6px 16px rgba(227,6,19,.28); }

/* chip & filter */
html:not([data-theme="dark"]) .chip { background: #fff; border-color: var(--line); color: var(--text-2); box-shadow: 0 1px 2px rgba(15,27,45,.04); }
html:not([data-theme="dark"]) .chip:hover:not(:disabled) { border-color: #cfd5e0; color: var(--text); }
html:not([data-theme="dark"]) .chip.active { background: #111a2c; border-color: #111a2c; color: #fff; }
html:not([data-theme="dark"]) .chips__lbl { color: var(--muted); }
html:not([data-theme="dark"]) .fsel { background: #fff; border-color: var(--line); box-shadow: 0 1px 2px rgba(15,27,45,.04); }
html:not([data-theme="dark"]) .fsel span { color: var(--muted); }
html:not([data-theme="dark"]) .fsel select { color: var(--text); }
html:not([data-theme="dark"]) .fsel:focus-within { border-color: rgba(227,6,19,.45); }

/* ---------- KPI dashboard ---------- */
html:not([data-theme="dark"]) .kpi { background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow); position: relative; overflow: hidden; }
html:not([data-theme="dark"]) .kpi__label { color: var(--muted); }
html:not([data-theme="dark"]) .kpi__val { color: var(--text); }
html:not([data-theme="dark"]) .kpi__val small { color: var(--muted); }
html:not([data-theme="dark"]) .kpi__sub { color: var(--muted); }
html:not([data-theme="dark"]) .kpis > .kpi:first-child { background: linear-gradient(135deg, #e30613, #ff5a3d); border-color: transparent; box-shadow: 0 12px 28px rgba(227,6,19,.25); }
html:not([data-theme="dark"]) .kpis > .kpi:first-child .kpi__label,
html:not([data-theme="dark"]) .kpis > .kpi:first-child .kpi__sub { color: rgba(255,255,255,.85); }
html:not([data-theme="dark"]) .kpis > .kpi:first-child .kpi__val { color: #fff; }
.kpi--cat::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; }
.kpi--SOP::before { background: var(--c-SOP); } .kpi--IK::before { background: var(--c-IK); }
.kpi--SP::before { background: var(--c-SP); } .kpi--IBPR::before { background: var(--c-IBPR); }
html:not([data-theme="dark"]) .kpi--SOP { background: linear-gradient(180deg, var(--c-SOP-bg), #fff 70%); }
html:not([data-theme="dark"]) .kpi--IK { background: linear-gradient(180deg, var(--c-IK-bg), #fff 70%); }
html:not([data-theme="dark"]) .kpi--SP { background: linear-gradient(180deg, var(--c-SP-bg), #fff 70%); }
html:not([data-theme="dark"]) .kpi--IBPR { background: linear-gradient(180deg, var(--c-IBPR-bg), #fff 70%); }
.kpi--cat { position: relative; overflow: hidden; }

/* kartu grafik: sudut & bayangan lebih lembut */
html:not([data-theme="dark"]) .card { border-color: var(--line); box-shadow: var(--shadow); }
html:not([data-theme="dark"]) .chart__head h2 { color: #111a2c; }
html:not([data-theme="dark"]) .dash__hint { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 10px 14px; box-shadow: 0 1px 2px rgba(15,27,45,.04); }

/* kartu kategori (Cek Aturan & modal rincian) dengan tint warna */
html:not([data-theme="dark"]) .catgrid .catcard--SOP { background: linear-gradient(180deg, var(--c-SOP-bg), #fff 65%); }
html:not([data-theme="dark"]) .catgrid .catcard--IK { background: linear-gradient(180deg, var(--c-IK-bg), #fff 65%); }
html:not([data-theme="dark"]) .catgrid .catcard--SP { background: linear-gradient(180deg, var(--c-SP-bg), #fff 65%); }
html:not([data-theme="dark"]) .catgrid .catcard--IBPR { background: linear-gradient(180deg, var(--c-IBPR-bg), #fff 65%); }
.catgrid .catcard { border-top-width: 0; border-radius: 18px; padding: 18px; }
.catgrid .catcard__ico { width: 42px; height: 42px; border-radius: 12px; font-size: 20px; box-shadow: 0 6px 14px color-mix(in srgb, var(--c) 35%, transparent); }
.catgrid .catcard b { font-size: 30px; }
.catgrid .catcard:hover { border-color: var(--c); }
html:not([data-theme="dark"]) .catcards .catcard { background: linear-gradient(180deg, color-mix(in srgb, var(--c) 9%, #fff), #fff 70%); }

/* ikon kartu jelajah & nomor tahapan → aksen merah lembut */
html:not([data-theme="dark"]) .bcard__ico { background: rgba(227,6,19,.08); color: var(--accent); }
html:not([data-theme="dark"]) .dcard__go { background: rgba(227,6,19,.08); }
html:not([data-theme="dark"]) .tstep__num { background: linear-gradient(135deg, #e30613, #ff5a3d); }
html:not([data-theme="dark"]) .dbrow__ico { background: rgba(227,6,19,.08); color: var(--accent); }

/* hasil pencarian: toggle lebih menonjol */
html:not([data-theme="dark"]) .acc { border-left-width: 0; border-top: 3px solid var(--c); border-radius: 16px; }
html:not([data-theme="dark"]) .acc.is-open { box-shadow: 0 12px 30px rgba(15,27,45,.09); }
html:not([data-theme="dark"]) .acc.is-open .acc__head { background: linear-gradient(180deg, color-mix(in srgb, var(--c) 7%, #fff), #fff); }
html:not([data-theme="dark"]) .hit { background: #fff; }
html:not([data-theme="dark"]) .doc__head { background: linear-gradient(180deg, color-mix(in srgb, var(--c) 6%, #fff), #fff 60%); }

/* ---------- Admin ---------- */
html:not([data-theme="dark"]) .adm-hero { color: var(--text); background: var(--hero-grad); border-bottom: 1px solid var(--line); }
html:not([data-theme="dark"]) .adm-stat { background: #fff; border-color: var(--line); box-shadow: 0 1px 2px rgba(15,27,45,.04); }
html:not([data-theme="dark"]) .adm-stat small { color: var(--muted); }
html:not([data-theme="dark"]) .tab { color: var(--text-2); }
html:not([data-theme="dark"]) .tab:hover { color: var(--text); }
html:not([data-theme="dark"]) .tab.is-on { background: var(--bg); color: var(--accent); box-shadow: 0 -1px 0 var(--line), 1px 0 0 var(--line), -1px 0 0 var(--line); }

/* ---------- Login ---------- */
html:not([data-theme="dark"]) body.auth { background: #fff; color: var(--text); }
html:not([data-theme="dark"]) .auth__bg { background: var(--hero-grad); }
html:not([data-theme="dark"]) .auth__bg::after { opacity: .5; background-image: radial-gradient(rgba(15,27,45,.09) 1px, transparent 1.2px); background-size: 18px 18px; }
html:not([data-theme="dark"]) .auth__intro > p { color: var(--text-2); }
html:not([data-theme="dark"]) .auth__slogan { color: var(--text) !important; }
html:not([data-theme="dark"]) .auth__back { color: var(--text); border-color: var(--line); background: #fff; }
html:not([data-theme="dark"]) .auth__back:hover { background: var(--surface-2); }
html:not([data-theme="dark"]) .auth__logos { box-shadow: 0 0 0 1px var(--line), 0 10px 30px rgba(15,27,45,.08); }
html:not([data-theme="dark"]) .auth__card { border: 1px solid var(--line); }