/* ==========================================================================
   KILAT — EMPAT TEMA
   --------------------------------------------------------------------------
   File ini satu-satunya sumber aturan tema. Dimuat setelah public.css /
   admin_dashboard.css (lihat middleware ShareTheme) sehingga menimpa blok
   :root yang menjadi warna dasar claymorphism.

   Cara kerja:
     <html data-theme="tembaga">   -> aktif
     <html> (tanpa atribut)        -> warna dasar clay dari :root

   Daftar tema (harus sama persis dengan config/kilat.php):
     1. tembaga  — Tembaga / copper  (ports resources/css/Tembaga.html)
     2. neural   — Neural Glass      (ports templatemo_597_neural_glass)
     3. topic    — Topic Listing     (ports templatemo_590_topic_listing)
     4. glass    — Glass Admin       (ports templatemo_607_glass_admin)

   Catatan soal nama variabel:
     clay-app memakai --text-dark untuk warna teks UTAMA. Pada tema gelap
     nilainya menjadi terang, bukan gelap. Karena itu komponen yang
     memasangkan `background: var(--clay-*)` dengan `color: var(--text-dark)`
     perlu koreksi warna teks eksplisit di blok "Penyesuaian komponen"
     pada tiap tema gelap.

   Selector memakai `html[data-theme="..."]` (0,1,1) agar selalu menang
   terhadap blok `:root` (0,1,0)-mediapun urutan file.
   ========================================================================== */

/* ==========================================================================
   1. TEMBAGA (COPPER)
   --------------------------------------------------------------------------
   Slate gelap + aksen tembaga. Panel memakai gradasi #383c47 -> #2c3039.
   ========================================================================== */
html[data-theme="tembaga"] {
    /* latar */
    --bg-main: #2c3039;
    --bg-body: #24272e;
    --bg-color-1: #24272e;
    --bg-color-2: #383c47;

    /* aksen */
    --sidebar-bg: #8c6a5d;
    --primary-color: #d8a899;
    --primary-hover: #e8c4b7;
    --gold: #d8a899;

    /* teks */
    --text-dark: #e2e8f0;
    --text-gray: #a4abb5;

    /* warna clay */
    --clay-purple: #383c47;
    --clay-pink: #d8a899;
    --clay-yellow: #e8c4b7;
    --clay-blue: #8fa3b8;
    --clay-green: #9db98f;
    --clay-orange: #c98f6d;

    /* bayangan gelap */
    --clay-shadow-card:
        12px 12px 22px rgba(0, 0, 0, 0.55),
        -4px -4px 12px rgba(255, 255, 255, 0.03),
        inset 0 0 0 1px rgba(216, 168, 153, 0.18);
    --clay-shadow-btn:
        5px 5px 11px rgba(0, 0, 0, 0.5),
        inset 2px 2px 4px rgba(255, 255, 255, 0.06),
        inset -2px -2px 4px rgba(0, 0, 0, 0.4);
    --clay-shadow-inset:
        inset 5px 5px 11px rgba(0, 0, 0, 0.55),
        inset -5px -5px 11px rgba(255, 255, 255, 0.04);
    --clay-sidebar-shadow:
        -12px 12px 26px rgba(0, 0, 0, 0.55),
        inset 3px 3px 7px rgba(255, 255, 255, 0.07),
        inset -3px -3px 7px rgba(0, 0, 0, 0.4);

    --text-timbul-dark: 1px 1px 0px rgba(255, 255, 255, 0.05), 2px 2px 5px rgba(0, 0, 0, 0.85);
    --text-timbul-light: 1px 1px 2px rgba(0, 0, 0, 0.75);
    --border-color: rgba(216, 168, 153, 0.28);
}

/* ==========================================================================
   2. NEURAL
   --------------------------------------------------------------------------
   Hitam pekat + neon ungu/pink/cyan, gaya "neural glass".
   ========================================================================== */
html[data-theme="neural"] {
    /* latar */
    --bg-main: #14102a;
    --bg-body: #0a0a0a;
    --bg-color-1: #0a0a0a;
    --bg-color-2: #2d1b3d;

    /* aksen */
    --sidebar-bg: #241545;
    --primary-color: #e0a3ff;
    --primary-hover: #00ffff;
    --gold: #00ffff;

    /* teks */
    --text-dark: #d8c9ff;
    --text-gray: #9f92c6;

    /* warna clay */
    --clay-purple: #2d1b3d;
    --clay-pink: #ff69b4;
    --clay-yellow: #7de8ff;
    --clay-blue: #1c2c42;
    --clay-green: #1d3323;
    --clay-orange: #f1c7ff;

    /* bayangan gelap + glow */
    --clay-shadow-card:
        10px 10px 24px rgba(0, 0, 0, 0.65),
        inset 0 0 0 1px rgba(224, 163, 255, 0.22),
        inset 0 1px 0 rgba(255, 255, 255, 0.06);
    --clay-shadow-btn:
        4px 4px 12px rgba(111, 66, 193, 0.5),
        inset 0 0 12px rgba(224, 163, 255, 0.14);
    --clay-shadow-inset:
        inset 5px 5px 12px rgba(0, 0, 0, 0.6),
        inset -5px -5px 12px rgba(224, 163, 255, 0.06);
    --clay-sidebar-shadow:
        -10px 10px 24px rgba(0, 0, 0, 0.6),
        inset 0 0 0 1px rgba(224, 163, 255, 0.2);

    --text-timbul-dark: 1px 1px 0px rgba(255, 255, 255, 0.05), 2px 2px 6px rgba(0, 0, 0, 0.9);
    --text-timbul-light: 1px 1px 2px rgba(0, 0, 0, 0.8);
    --border-color: rgba(224, 163, 255, 0.28);
}

/* Cahaya radial khas neural di belakang halaman. */
html[data-theme="neural"] body::before {
    background-image:
        radial-gradient(circle at 15% 85%, rgba(75, 0, 130, 0.7) 0%, transparent 50%),
        radial-gradient(circle at 85% 15%, rgba(139, 37, 99, 0.8) 0%, transparent 50%),
        radial-gradient(circle at 45% 60%, rgba(128, 0, 128, 0.6) 0%, transparent 50%),
        radial-gradient(circle at 70% 40%, rgba(34, 139, 34, 0.4) 0%, transparent 50%),
        linear-gradient(135deg, #0a0a0a 0%, #2d1b3d 50%, #000000 100%) !important;
}

html[data-theme="neural"] h1,
html[data-theme="neural"] h2,
html[data-theme="neural"] h3,
html[data-theme="neural"] h4 {
    color: var(--primary-color);
    text-shadow: 0 0 24px rgba(224, 163, 255, 0.4);
}

html[data-theme="neural"] a:hover {
    color: #00ffff;
}

/* ==========================================================================
   3. TOPIC
   --------------------------------------------------------------------------
   Biru-hijau terang ala Topic Listing (TemplateMo 590). Tanpa Bootstrap.
   ========================================================================== */
html[data-theme="topic"] {
    /* latar */
    --bg-main: #eef7fd;
    --bg-body: #f0f8ff;
    --bg-color-1: #f0f8ff;
    --bg-color-2: #d6ecf7;

    /* aksen */
    --sidebar-bg: #13547a;
    --primary-color: #13547a;
    --primary-hover: #1f7fb6;
    --gold: #b8860b;

    /* teks */
    --text-dark: #1a1c23;
    --text-gray: #717275;

    /* warna clay */
    --clay-purple: #80d0c7;
    --clay-pink: #f7b7c4;
    --clay-yellow: #ffd88a;
    --clay-blue: #9fd0ea;
    --clay-green: #9ed8c4;
    --clay-orange: #f0b48a;

    /* bayangan terang */
    --clay-shadow-card:
        12px 12px 26px rgba(19, 84, 122, 0.14),
        -8px -8px 18px rgba(255, 255, 255, 0.9),
        inset 3px 3px 6px rgba(255, 255, 255, 0.9),
        inset -3px -3px 6px rgba(19, 84, 122, 0.06);
    --clay-shadow-btn:
        5px 5px 12px rgba(19, 84, 122, 0.16),
        inset 2px 2px 5px rgba(255, 255, 255, 0.9),
        inset -2px -2px 5px rgba(19, 84, 122, 0.08);
    --clay-shadow-inset:
        inset 5px 5px 11px rgba(19, 84, 122, 0.16),
        inset -5px -5px 11px rgba(255, 255, 255, 0.95);
    --clay-sidebar-shadow:
        -12px 12px 26px rgba(19, 84, 122, 0.22),
        -4px -4px 12px rgba(255, 255, 255, 0.6);

    --text-timbul-dark: 1px 1px 0px #ffffff, 2px 2px 4px rgba(19, 84, 122, 0.28);
    --text-timbul-light: 1px 1px 2px rgba(0, 0, 0, 0.18);
    --border-color: rgba(127, 255, 212, 0.4);
}

/* ==========================================================================
   4. GLASS ADMIN
   --------------------------------------------------------------------------
   Hutan pekat + emerald & emas, kaca tembus pandang (TemplateMo 607).
   ========================================================================== */
html[data-theme="glass"] {
    /* latar */
    --bg-main: #16241c;
    --bg-body: #0a0f0d;
    --bg-color-1: #0d1a14;
    --bg-color-2: #1a2e23;

    /* aksen */
    --sidebar-bg: #0f3d2e;
    --primary-color: #34d399;
    --primary-hover: #d4a574;
    --gold: #d4a574;

    /* teks */
    --text-dark: #f5f5f4;
    --text-gray: #a3ada7;

    /* warna clay */
    --clay-purple: #1a2e23;
    --clay-pink: #e07a5f;
    --clay-yellow: #d4a574;
    --clay-blue: #0ea5e9;
    --clay-green: #059669;
    --clay-orange: #b45309;

    /* bayangan kaca gelap */
    --clay-shadow-card:
        10px 10px 24px rgba(0, 0, 0, 0.55),
        inset 0 0 0 1px rgba(255, 255, 255, 0.08);
    --clay-shadow-btn:
        4px 4px 12px rgba(0, 0, 0, 0.5),
        inset 0 0 0 1px rgba(255, 255, 255, 0.1);
    --clay-shadow-inset:
        inset 5px 5px 12px rgba(0, 0, 0, 0.5),
        inset -5px -5px 12px rgba(255, 255, 255, 0.05);
    --clay-sidebar-shadow:
        -10px 10px 24px rgba(0, 0, 0, 0.5),
        inset 0 0 0 1px rgba(212, 165, 116, 0.18);

    --text-timbul-dark: 1px 1px 0px rgba(255, 255, 255, 0.05), 2px 2px 5px rgba(0, 0, 0, 0.85);
    --text-timbul-light: 1px 1px 2px rgba(0, 0, 0, 0.8);
    --border-color: rgba(212, 165, 116, 0.25);
}

/* Efek kaca sungguhan pada sidebar dan panel utama. */
html[data-theme="glass"] .sidebar {
    background: rgba(15, 61, 46, 0.82);
    backdrop-filter: blur(18px) saturate(140%);
    -webkit-backdrop-filter: blur(18px) saturate(140%);
}

html[data-theme="glass"] .sidebar .nav-menu li a.active,
html[data-theme="glass"] .sidebar .sidebar-appendix-box.active {
    background: rgba(52, 211, 153, 0.28) !important;
    box-shadow: inset 3px 3px 7px rgba(0, 0, 0, 0.35), inset -3px -3px 7px rgba(255, 255, 255, 0.12) !important;
}

html[data-theme="glass"] .sidebar-appendix-box {
    background: rgba(212, 165, 116, 0.9);
}

/* ==========================================================================
   PENYESUAIAN BERSAMA UNTUK TEMA GELAP
   --------------------------------------------------------------------------
   Tiga tema gelap (tembaga / neural / glass) memakai struktur yang sama,
   jadi koreksi berikut ditulis sekali lewat :is().
   ========================================================================== */
:is(html[data-theme="tembaga"], html[data-theme="neural"], html[data-theme="glass"]) {
    /* Warna status sedikit diterangkan agar tetap terbaca di atas latar gelap. */
    --income-color: #4ade80;
    --expense-color: #fb7185;
    --c-masuk: #4ade80;
    --c-tidak-masuk: #f87171;
    --status-paid: #4ade80;
    --status-unpaid: #fb7185;
    --mode-aktif: #60a5fa;
    --mode-arsip: #9aa3b2;

    scrollbar-color: var(--text-gray) transparent;
}

/* Kotak "Appendix" memakai `background: var(--clay-yellow)` + `color: var(--text-dark)`.
   Pada tema gelap --text-dark sudah terang, jadi teksnya dipaksa gelap. */
:is(html[data-theme="tembaga"], html[data-theme="neural"], html[data-theme="glass"]) .sidebar-appendix-box {
    color: #14161c;
}

:is(html[data-theme="tembaga"], html[data-theme="neural"], html[data-theme="glass"]) .sidebar-appendix-box i {
    color: rgba(20, 22, 28, 0.7);
}

/* Placeholder & border input agar tidak tenggelam di latar gelap. */
:is(html[data-theme="tembaga"], html[data-theme="neural"], html[data-theme="glass"]) input::placeholder,
:is(html[data-theme="tembaga"], html[data-theme="neural"], html[data-theme="glass"]) textarea::placeholder {
    color: var(--text-gray);
    opacity: 0.75;
}

/* Cincin fokus tema gelap memakai warna aksen, bukan biru bawaan. */
:is(html[data-theme="tembaga"], html[data-theme="neural"], html[data-theme="glass"]) :is(a, button, input, select, textarea):focus-visible {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
}

/* ==========================================================================
   WARNA PENYUSUN IKON MENU & TOGGLE SIDEBAR
   --------------------------------------------------------------------------
   .icon-menu memakai warna hardcode rgba(13,219,54,.205) yang tidak nyambung
   dengan tema mana pun. Diganti mengikuti --sidebar-bg tiap tema, dengan
   nilai lama dipertahankan sebagai fallback untuk peramban lama.
   ========================================================================== */
.icon-menu {
    background-color: rgba(13, 219, 54, 0.205); /* fallback */
    background-color: color-mix(in srgb, var(--sidebar-bg) 22%, transparent);
}

html[data-theme="tembaga"] .icon-circle { color: var(--primary-color); }
html[data-theme="neural"] .icon-circle { color: #00ffff; }
html[data-theme="topic"] .icon-circle { color: #13547a; }
html[data-theme="glass"] .icon-circle { color: #34d399; }

/* ==========================================================================
   PEMILIH TEMA
   --------------------------------------------------------------------------
   Dua tempat memakai gaya di blok ini:
     1. Kartu "Tema Tampilan" di /admin/setting  -> .kilat-theme-picker
     2. Tombol cepat di sidebar admin           -> .kilat-theme-dock

   Keduanya berbasis data yang dikirim middleware ShareTheme lewat
   window.KILAT_THEMES, jadi menambah tema di config/kilat.php otomatis
   memunculkan tombolnya tanpa perlu menyunting HTML.
   ========================================================================== */

.kilat-theme-picker {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 12px;
    margin: 14px 0 4px;
}

/* Satu tombol tema. <button> disamarkan jadi kotak pratinjau warna. */
.kilat-theme-opt {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 10px;
    border: 3px solid transparent;
    border-radius: 18px;
    background: var(--bg-main);
    box-shadow: var(--clay-shadow-btn);
    cursor: pointer;
    text-align: left;
    font-family: inherit;
    color: var(--text-dark);
    transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.kilat-theme-opt:hover {
    transform: translateY(-2px);
}

.kilat-theme-opt[aria-pressed="true"] {
    border-color: var(--primary-color);
    box-shadow: var(--clay-shadow-inset);
}

/* Pratinjau: separuh atas warna latar tema, separuh bawah warna aksen. */
.kilat-theme-swatch {
    height: 62px;
    border-radius: 12px;
    overflow: hidden;
    display: flex;
    box-shadow: var(--clay-shadow-inset);
}

.kilat-theme-swatch > span {
    flex: 1;
}

.kilat-theme-swatch > span + span {
    flex: 0 0 38%;
}

.kilat-theme-meta {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.kilat-theme-name {
    font-size: 0.85rem;
    font-weight: 800;
    color: var(--text-dark);
    display: flex;
    align-items: center;
    gap: 6px;
}

.kilat-theme-desc {
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--text-gray);
    line-height: 1.35;
}

.kilat-theme-check {
    font-size: 0.72rem;
    font-weight: 900;
    color: var(--primary-color);
    visibility: hidden;
}

.kilat-theme-opt[aria-pressed="true"] .kilat-theme-check {
    visibility: visible;
}

.kilat-theme-note {
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--text-gray);
    margin-top: 10px;
}

.kilat-theme-status {
    font-size: 0.8rem;
    font-weight: 800;
    margin-top: 10px;
    padding: 9px 12px;
    border-radius: 12px;
    box-shadow: var(--clay-shadow-inset);
    color: var(--text-dark);
    display: none;
}

.kilat-theme-status.is-visible { display: block; }

/* Tombol cepat di sidebar: satu ikon yang membuka daftar tema. */
.kilat-theme-dock {
    position: relative;
    margin-top: 10px;
}

.kilat-theme-dock-btn {
    width: 100%;
    border: none;
    cursor: pointer;
    font-family: inherit;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 10px 4px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.22);
    box-shadow: inset 2px 2px 5px rgba(0, 0, 0, 0.15), inset -2px -2px 5px rgba(255, 255, 255, 0.35);
    color: #fff;
    text-shadow: var(--text-timbul-light);
    transition: background 0.2s ease, transform 0.2s ease;
}

.kilat-theme-dock-btn:hover {
    background: rgba(255, 255, 255, 0.34);
    transform: translateY(-2px);
}

.kilat-theme-dock-btn i { font-size: 1rem; }
.kilat-theme-dock-btn span { font-size: 0.7rem; font-weight: 800; letter-spacing: 0.3px; }

/* Daftar tema yang muncul saat tombol sidebar diklik. */
.kilat-theme-menu {
    position: absolute;
    bottom: calc(100% + 8px);
    left: 0;
    right: 0;
    padding: 6px;
    border-radius: 16px;
    background: var(--bg-main);
    box-shadow: var(--clay-shadow-card);
    border: 1px solid var(--border-color);
    display: none;
    z-index: 60;
}

.kilat-theme-menu.is-open { display: block; }

.kilat-theme-menu-item {
    width: 100%;
    border: none;
    background: transparent;
    cursor: pointer;
    font-family: inherit;
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 7px 8px;
    border-radius: 10px;
    font-size: 0.72rem;
    font-weight: 800;
    color: var(--text-dark);
    text-align: left;
}

.kilat-theme-menu-item:hover { background: var(--clay-shadow-inset); }

.kilat-theme-menu-item[aria-pressed="true"] { color: var(--primary-color); }

.kilat-theme-dot {
    width: 16px;
    height: 16px;
    border-radius: 6px;
    flex: 0 0 auto;
    box-shadow: inset 1px 1px 3px rgba(0, 0, 0, 0.35);
}

/* Di layar sempit sidebar jadi lorong sempit; tombolnya tetap muat. */
@media screen and (max-width: 420px) {
    .kilat-theme-dock-btn span { display: none; }
}

/* ==========================================================================
   OVERRIDE UNTUK KARTU PENGATURAN
   --------------------------------------------------------------------------
   setting.css punya `.settings-card button { align-items: center;
   justify-content: center; width: 100% }` yang merusak .kilat-theme-opt.
   File ini dimuat SETELAH setting.css (via middleware), jadi override ini menang.
   ========================================================================== */
.settings-card .kilat-theme-opt {
    align-items: flex-start !important;
    justify-content: flex-start !important;
    width: auto !important;
}