/* =========================================================
   ARSHINET — 11 tema warna, sama dengan ARSHINET REPORT
   (data-accent + data-mode diatur oleh assets/js/tema.js)
   + penghalusan tampilan ala report. Dimuat paling akhir.
   ========================================================= */

/* ---------- Palet per tema (terang) ---------- */
html[data-accent] { --acc-2: #ff9a6b; }
html[data-accent="flux"] {
    --page: #dde8b5; --bg: #e4e4e2; --surface: #ffffff; --surface-2: #f1f1ef; --border: #e7e7e4;
    --text: #141414; --text-soft: #6f6f6c; --text-mute: #a3a39f;
    --acc: #1d1d1f; --acc-d: #000000; --acc-l: #f0f7d4; --acc-2: #d4f06a; --lav: #b8a6f6; --lav-l: #ece7fd;
    --side-bg: #1d1d1f; --side-ic: #d4f06a; --side-muted: #9c9c98; --side-ink: #f4f4f2; --side-line: rgba(255,255,255,.08);
    --brand: #141414; --accent: #1d1d1f; --ink-btn: #1d1d1f; --on-ink: #ffffff; --chart-tx: #d4f06a; --chart-rx: #b8a6f6;
}
html[data-accent="biru"] {
    --bg: #f3f6fc; --surface: #ffffff; --surface-2: #eef3fc; --border: #dbe4f3;
    --text: #0f172a; --text-soft: #64748b; --text-mute: #94a3b8;
    --acc: #1d5fd6; --acc-d: #164bb0; --acc-l: #e6efff; --acc-2: #60a5fa;
    --side-bg: #1c2433; --side-ic: #60a5fa; --side-muted: #9aa5b8;
}
html[data-accent="ungu"] {
    --bg: #f6f3fd; --surface: #ffffff; --surface-2: #f5f0ff; --border: #e4dcf5;
    --text: #0f172a; --text-soft: #64748b; --text-mute: #9a93b0;
    --acc: #7c3aed; --acc-d: #6d28d9; --acc-l: #f1e9ff; --acc-2: #a78bfa;
    --side-bg: #2e1f5e; --side-ic: #a78bfa; --side-muted: #b3a8d6;
}
html[data-accent="hijau"] {
    --bg: #f2f8f4; --surface: #ffffff; --surface-2: #ecfaf1; --border: #d6ebde;
    --text: #0f172a; --text-soft: #64748b; --text-mute: #93a69a;
    --acc: #15803d; --acc-d: #166534; --acc-l: #dcfce7; --acc-2: #4ade80;
    --side-bg: #14392a; --side-ic: #4ade80; --side-muted: #a3bfb0;
}
html[data-accent="oranye"] {
    --bg: #fbf6f1; --surface: #ffffff; --surface-2: #fff4ea; --border: #f0e0d2;
    --text: #0f172a; --text-soft: #64748b; --text-mute: #a8998c;
    --acc: #c2410c; --acc-d: #9a3412; --acc-l: #ffedd5; --acc-2: #fb923c;
    --side-bg: #3a1f10; --side-ic: #fb923c; --side-muted: #c7ab98;
}
html[data-accent="terang"] {
    --bg: #f8fafc; --surface: #ffffff; --surface-2: #f3f5f8; --border: #e2e8f0;
    --text: #0f172a; --text-soft: #64748b; --text-mute: #94a3b8;
    --acc: #334155; --acc-d: #1e293b; --acc-l: #eef2f6; --acc-2: #64748b;
    --side-bg: #1e293b; --side-ic: #94a3b8; --side-muted: #a3afc0;
}
html[data-accent="hutan"] {
    --bg: #dfe9e7; --surface: #ffffff; --surface-2: #edf3f2; --border: #d3e0dd;
    --text: #22302e; --text-soft: #6b7d79; --text-mute: #95a6a2;
    --acc: #d4a72c; --acc-d: #b98f1d; --acc-l: #f6efd9; --acc-2: #e8c76a;
    --side-bg: #3d5753; --side-ic: #d9ab35; --side-muted: #b5c6c2;
}
html[data-accent="biru"], html[data-accent="ungu"], html[data-accent="hijau"], html[data-accent="oranye"],
html[data-accent="terang"], html[data-accent="hutan"] {
    --brand: var(--text); --accent: var(--acc); --ink-btn: var(--side-bg); --on-ink: #ffffff;
    --chart-tx: var(--side-bg); --chart-rx: var(--acc);
    --side-ink: #f3f4f6; --side-line: rgba(255,255,255,.09);
}

/* ---------- Mode gelap ---------- */
html[data-mode="dark"][data-accent="biru"] {
    --bg: #0b1120; --surface: #111a2e; --surface-2: #17223a; --border: #22304a;
    --text: #e5ecf8; --text-soft: #8b9ab3; --text-mute: #64748b;
    --acc: #4f8bf5; --acc-d: #3b74de; --acc-l: #17284a; --acc-2: #60a5fa;
    --side-bg: #16203a; --side-ic: #60a5fa; --side-muted: #8b9ab3;
    --ink-btn: #e5ecf8; --on-ink: #0b1120; --chart-tx: #e5ecf8; --chart-rx: #4f8bf5; --brand: #e5ecf8;
}
html[data-mode="dark"][data-accent="neon"] {
    --bg: #07050f; --surface: #0f0b1d; --surface-2: #1a1330; --border: #2b2150;
    --text: #ede9fe; --text-soft: #a59bc9; --text-mute: #6e6496;
    --acc: #c026d3; --acc-d: #a21caf; --acc-l: #2a1238; --acc-2: #22d3ee;
    --side-bg: #140d26; --side-ic: #22d3ee; --side-muted: #9d93c4; --side-ink: #ede9fe; --side-line: rgba(255,255,255,.08);
    --ink-btn: #ede9fe; --on-ink: #07050f; --chart-tx: #22d3ee; --chart-rx: #c026d3; --brand: #ede9fe; --accent: #c026d3;
}
html[data-mode="dark"][data-accent="neon"] .btn--primary { background: linear-gradient(90deg, #c026d3, #22d3ee); border-color: transparent; }
html[data-mode="dark"][data-accent="neon"] .dx-stat__num, html[data-mode="dark"][data-accent="neon"] .inc-box:not(.inc-box--accent) .inc-val {
    background: linear-gradient(90deg, #f0abfc, #67e8f9); -webkit-background-clip: text; background-clip: text; color: transparent;
}
html[data-mode="dark"][data-accent="hutan"] {
    --bg: #121a19; --surface: #1a2523; --surface-2: #203029; --border: #2a3936;
    --text: #e6eeec; --text-soft: #8fa29e; --text-mute: #64766f; --side-bg: #24332f;
    --ink-btn: #e6eeec; --on-ink: #121a19; --chart-tx: #e6eeec;
}

/* =========================================================
   B15 — penghalusan ala ARSHINET REPORT
   ========================================================= */
/* judul halaman tebal + subjudul kecil */
.topbar h1 { font-weight: 800; font-size: 27px; letter-spacing: -.025em; }
.topbar .subtitle { font-size: 13px; }

/* titik judul kartu & kartu bergaris tipis warna tema */
.card__head h2::before { background: var(--acc); }
.card, .dx-panel, .dx-stat, .dx-stat--blue, .dx-stat--green, .dx-stat--amber, .dx-stat--red { border-color: var(--border); }
.dx-stat:hover { border-color: var(--acc-2); }

/* ikon dalam kotak berwarna lembut (seperti kartu Pendapatan/Bagian di report) */
.dx-ico, .dx-ico--blue, .dx-ico--purple, .dx-ico--cyan,
html[data-theme="dark"] .dx-ico { background: var(--acc-l); color: var(--acc); }
.dx-stat__art { background: var(--acc-l); color: var(--acc); }
.dx-stat__top svg { color: var(--acc); }
.inc-box .inc-ico { color: var(--acc); }
.dx-res__bar i { background: linear-gradient(90deg, var(--acc), var(--acc-2)); }
.dx-res__bar i.is-warm { background: linear-gradient(90deg, #f59e0b, #fbbf24); }
.dx-res__bar i.is-hot  { background: linear-gradient(90deg, #dc2626, #f87171); }
.dx-link, .card__head > a.fs-sm { color: var(--acc-d); background: var(--acc-l); }
html[data-mode="dark"] .dx-link, html[data-mode="dark"] .card__head > a.fs-sm { color: var(--acc-2); }
a { color: var(--acc-d); }
:where(html[data-mode="dark"]) a { color: var(--acc-2); }
.btn--primary { background: var(--acc); border-color: var(--acc); color: #fff; }
.btn--primary:hover { background: var(--acc-d); border-color: var(--acc-d); box-shadow: 0 6px 16px -6px var(--acc); }
input:focus, select:focus, textarea:focus { border-color: var(--acc); box-shadow: 0 0 0 3px var(--acc-l); }

/* kotak pesan bergaya report */
.alert { border-radius: 14px; }
.alert--success { background: #f0fdf4; border: 1px solid #bbf7d0; color: #166534; }
.alert--error   { background: #fef2f2; border: 1px solid #fecaca; color: #991b1b; }
.alert--info    { background: var(--acc-l); border: 1px solid var(--border); color: var(--text); }
html[data-mode="dark"] .alert--success { background: #0f2a1b; border-color: #1f5c3a; color: #86efac; }
html[data-mode="dark"] .alert--error   { background: #2c1212; border-color: #6b2222; color: #fca5a5; }

/* avatar bercincin seperti foto profil report */
.appbar__profile > summary { width: 42px; height: 42px; padding: 3px; border-radius: 50%;
    background: conic-gradient(var(--side-ic) 0 72%, rgba(255,255,255,.14) 72% 100%) !important; }
.appbar__avatar { width: 36px; height: 36px; background: var(--side-bg); color: var(--side-ink);
    box-shadow: inset 0 0 0 1px var(--side-line); background-image: linear-gradient(145deg, rgba(255,255,255,.16), rgba(255,255,255,.03)); }

/* menu tema berisi 11 pilihan */
.theme-switch__menu { min-width: 220px; max-height: 70vh; overflow: auto; }
.theme-switch__lbl { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-mute); padding: 6px 11px 4px; }
.theme-switch__lbl small { text-transform: none; letter-spacing: 0; font-weight: 500; }
.theme-opt.active { background: var(--acc-l); }
.theme-opt .chk { color: var(--acc); }

/* sidebar & appbar ikut warna tema */
.sidebar__link svg, .sidebar__sublink svg, .appbar__dd > summary svg { color: var(--side-ic); }
.appbar__title b, .login__brand b { color: var(--side-ic); }
.login__brand b { color: var(--acc); }
.appbar__avatar { color: var(--side-ink); }
html[data-accent="flux"] .login__brand b { color: #8aa81a; }