/* ============================================================
 * THEME ENGINE  (v2 — cakupan menyeluruh)
 * ------------------------------------------------------------
 * File ini SELALU dimuat paling akhir (setelah style.css &
 * style_mobile.css). Tugasnya HANYA memetakan variabel CSS ke
 * seluruh permukaan situs — WARNA saja, bukan tata letak/fitur.
 *
 * Cara membuat theme baru:
 *   1. Buat folder  themes/<nama>/
 *   2. Isi  theme.css  yang mendefinisikan ulang PALET INTI di :root
 *      (lihat daftar di blok "CORE PALETTE" di bawah).
 *   3. (opsional) Isi  theme.json  { "name", "description", "author" }.
 *   4. Pilih theme dari Panel GM → Konfigurasi Situs → Tema.
 *
 * Theme cukup men-set ~18 variabel inti; sisanya (feed, tab, dropdown,
 * scrollbar, dsb.) DITURUNKAN otomatis via color-mix, namun tetap bisa
 * di-override manual bila diinginkan. Karena semua turunan mereferensi
 * palet inti, mengganti 1 warna aksen langsung merambat ke seluruh situs.
 *
 * PRINSIP AMAN: engine tidak pernah menyentuh display/position/flex/
 * grid/width/height → fungsi & tata letak situs tidak berubah. Warna
 * semantik (sukses=hijau, bahaya=merah, tombol emas, badge status)
 * sengaja TIDAK di-theme agar maknanya tetap jelas di semua tema.
 * ============================================================ */

:root {
    /* ===================== CORE PALETTE =====================
       Nilai fallback di bawah = tampilan "default" (identik style.css lama),
       sehingga situs tetap normal walau sebuah theme lupa men-set variabel. */
    --body-bg-image: url('../images/background_back.webp');
    --page-overlay:  rgba(0, 0, 0, 0.4);

    --card-bg:     rgba(255, 255, 255, 0.95);
    --card-text:   #333333;
    --card-border: rgba(0, 0, 0, 0.05);
    --muted-text:  #666666;
    --heading-color: #333333;

    --accent:          #007bff;
    --accent-dark:     #0056b3;
    --accent-contrast: #ffffff;

    --header-bg:   rgba(255, 255, 255, 0.95);
    --header-text: #333333;

    --table-head-bg:   #f1f1f1;
    --table-head-text: #555555;
    --table-border:    #eeeeee;

    --input-bg:     #ffffff;
    --input-border: #dddddd;
    --input-text:   #333333;

    --link-color: var(--accent);

    /* ================== DERIVED (otomatis) ==================
       Dihitung dari palet inti — theme boleh menimpanya bila perlu. */

    /* Aksen sekunder & lembut */
    --accent-2:    color-mix(in srgb, var(--accent) 45%, #00e0ff);
    --accent-soft: color-mix(in srgb, var(--accent) 12%, var(--card-bg));
    --link-hover:  var(--accent-dark);

    /* Permukaan inset di dalam kartu (captcha, acc-val, ikon, dll.) */
    --surface-2-bg:     color-mix(in srgb, var(--card-text) 6%, var(--card-bg));
    --surface-2-text:   var(--card-text);
    --surface-2-border: var(--card-border);

    /* Garis pemisah halus (hr, separator, border item) */
    --divider: color-mix(in srgb, var(--card-text) 14%, transparent);

    /* Kartu */
    --card-shadow: 0 15px 35px rgba(0, 0, 0, 0.3);

    /* Header lanjutan + dropdown */
    --header-border:     var(--card-border);
    --dropdown-bg:       var(--card-bg);
    --dropdown-text:     var(--card-text);
    --dropdown-hover-bg: var(--surface-2-bg);
    --dropdown-border:   var(--divider);

    /* Feed status (balon komentar) */
    --feed-item-bg:       color-mix(in srgb, var(--accent) 8%,  var(--card-bg));
    --feed-item-border:   color-mix(in srgb, var(--accent) 26%, var(--card-bg));
    --feed-item-hover-bg: color-mix(in srgb, var(--accent) 15%, var(--card-bg));

    /* Tab gaming */
    --tab-bg:          var(--surface-2-bg);
    --tab-text:        var(--muted-text);
    --tab-border:      var(--surface-2-border);
    --tab-hover-bg:    color-mix(in srgb, var(--card-text) 10%, var(--card-bg));
    --tab-active-bg:   var(--accent);
    --tab-active-dark: var(--accent-dark);
    --tab-active-text: var(--accent-contrast);

    /* Scrollbar */
    --scrollbar-thumb: color-mix(in srgb, var(--accent) 55%, transparent);

    /* Footer (dipakai HANYA saat mode "footer ikut theme" aktif).
       Default = navy klasik agar theme terang pun punya footer gelap yang
       terbaca. Theme boleh menimpa untuk footer senada. */
    --footer-bg:       linear-gradient(135deg, #1e293b, #0f172a);
    --footer-headline: #f8fafc;
    --footer-text:     #cbd5e1;
    --footer-muted:    #94a3b8;
    --footer-accent:   var(--accent);
}

/* =====================================================================
 *  1. LATAR & OVERLAY
 * ===================================================================== */
body {
    background-image: var(--body-bg-image);
}
body::before {
    background: var(--page-overlay) !important;
}

/* =====================================================================
 *  2. KARTU / KOTAK KONTEN UTAMA
 *  (widget PVP/Castle .vertical-card sengaja DIKECUALIKAN — warnanya
 *   diatur terpisah lewat setting widget_bg/widget_text di Panel GM.)
 * ===================================================================== */
/* CATATAN: .dashboard-container (pembungkus seluruh dashboard main.php)
   sengaja TIDAK diberi latar — dibiarkan transparan seperti wrapper di
   index.php agar background halaman terlihat di antara widget. */
.container, .box, .main-box, .login-box, .container-large, .container-small,
.account-info-box, .status-feed-box, .news-section,
.calendar-box, .patcher-news-card, .char-card {
    background: var(--card-bg) !important;
    color: var(--card-text) !important;
    border-color: var(--card-border);
}
.container, .box, .main-box, .login-box, .news-section, .status-feed-box {
    box-shadow: var(--card-shadow);
}

/* Judul & teks umum */
h1, h2, h3, h4, h5, h6 { color: var(--heading-color) !important; }
label { color: var(--muted-text); }
small { color: var(--muted-text) !important; }

/* Pemisah */
hr { border-top-color: var(--divider) !important; }
.separator { border-top-color: var(--divider) !important; }
.separator span {
    background: var(--card-bg) !important;
    color: var(--muted-text) !important;
}

/* Panel inset di dalam kartu */
.captcha-area {
    background: var(--surface-2-bg) !important;
    border-color: var(--divider) !important;
}

/* =====================================================================
 *  3. FORM
 * ===================================================================== */
input[type="text"], input[type="password"], input[type="email"],
input[type="number"], input[type="search"], input[type="date"],
input[type="url"], input[type="tel"], textarea, select {
    background: var(--input-bg) !important;
    border-color: var(--input-border) !important;
    color: var(--input-text) !important;
}
input::placeholder, textarea::placeholder { color: var(--muted-text); opacity: 0.7; }
input:focus, select:focus, textarea:focus {
    border-color: var(--accent) !important;
    box-shadow: 0 0 8px color-mix(in srgb, var(--accent) 30%, transparent) !important;
}

/* =====================================================================
 *  4. TOMBOL
 *  Hanya tombol aksen utama & netral yang di-theme. Tombol semantik
 *  (success/danger/info/warning), .btn-gold, dan .btn-modern-* DIBIARKAN
 *  agar maknanya konsisten di semua tema.
 * ===================================================================== */
.btn-primary, .btn-login {
    background: linear-gradient(180deg, var(--accent) 0%, var(--accent-dark) 100%) !important;
    color: var(--accent-contrast) !important;
}
/* CATATAN: tombol netral (abu-abu) sengaja TIDAK di-theme — gradasi abu dari
   style.css sudah netral di semua theme. Jangan tambahkan aturan button generik
   di sini; specificity-nya bisa membajak tombol tab/slider milik halaman. */

/* =====================================================================
 *  5. HEADER + DROPDOWN
 * ===================================================================== */
.main-header {
    background: var(--header-bg) !important;
    border-bottom-color: var(--header-border) !important;
}
.main-header .left-links > a,
.main-header .left-links .dropdown > a,
.left-menu a, .right-menu a,
.user-info,
.mobile-menu-btn,
.mobile-menu-close {
    color: var(--header-text) !important;
}
.left-menu a:hover, .left-menu a.active,
.right-menu a:hover { color: var(--accent) !important; }

/* Tombol LOGOUT: identitas merah-bahaya ditegaskan ulang di sini karena aturan
   .right-menu a di atas menimpanya (specificity lebih tinggi) — tanpa ini teks
   logout memakai warna teks header dan bisa tak terbaca. */
.main-header .btn-logout {
    color: #dc3545 !important;
    border-color: #dc3545 !important;
    background: transparent !important;
}
.main-header .btn-logout:hover {
    background: #dc3545 !important;
    color: #ffffff !important;
}

/* Teks kecil "ID: ..." di bawah nama user */
.main-header .user-info small { color: var(--muted-text) !important; }

/* Badge "WEB ONLINE" (GM) mengikuti aksen theme */
#online-web-btn {
    background: linear-gradient(135deg, var(--accent), var(--accent-dark)) !important;
    border-color: var(--accent-dark) !important;
    color: var(--accent-contrast) !important;
}
/* Panel dropdown daftar akun online */
#online-web-panel {
    background: var(--card-bg) !important;
    border-color: var(--divider) !important;
}
#online-web-panel > div:first-child { background: var(--surface-2-bg) !important; }
#online-web-panel strong { color: var(--card-text) !important; }

.dropdown-content, .dropdown-submenu-content {
    background-color: var(--dropdown-bg) !important;
    border: 1px solid var(--dropdown-border);
}
.dropdown-content a, .dropdown-submenu-content a {
    color: var(--dropdown-text) !important;
    border-bottom-color: var(--dropdown-border) !important;
}
.dropdown-content a:hover, .dropdown-submenu-content a:hover {
    background-color: var(--dropdown-hover-bg) !important;
    color: var(--accent) !important;
}

/* =====================================================================
 *  6. TABEL
 * ===================================================================== */
.char-table th {
    background: var(--table-head-bg) !important;
    color: var(--table-head-text) !important;
}
.char-table td {
    border-bottom-color: var(--table-border) !important;
    color: var(--card-text);
}
/* Tabel akun (myaccount) */
.acc-label { color: var(--muted-text) !important; }
.acc-val {
    background: var(--surface-2-bg) !important;
    color: var(--card-text) !important;
}
.acc-row:hover .acc-val {
    background: var(--accent-soft) !important;
    color: var(--accent) !important;
    border-color: color-mix(in srgb, var(--accent) 40%, transparent) !important;
}
.acc-icon {
    background: var(--surface-2-bg) !important;
    color: var(--muted-text) !important;
}

/* =====================================================================
 *  7. TAUTAN DALAM KONTEN
 * ===================================================================== */
.main-box a:not(.btn):not([class*="btn-"]):not(.gaming-tab),
.container a:not(.btn):not([class*="btn-"]),
.news-section a:not(.btn):not([class*="btn-"]) {
    color: var(--link-color);
}
.main-box a:not(.btn):not([class*="btn-"]):hover,
.container a:not(.btn):not([class*="btn-"]):hover { color: var(--link-hover); }

/* =====================================================================
 *  8. NEWS / BERITA
 * ===================================================================== */
.news-item { border-bottom-color: var(--divider) !important; }
.news-title { color: var(--accent) !important; }
.news-date { color: var(--muted-text) !important; }
.news-content { color: var(--card-text) !important; }

/* =====================================================================
 *  9. STATUS FEED (balon komentar pemain)
 * ===================================================================== */
.status-feed-box h3 {
    /* Pakai background-image (bukan shorthand 'background') agar background-clip:text
       tidak ter-reset ke border-box — kalau ter-reset, gradient menutupi teks. */
    background-image: linear-gradient(90deg, var(--accent), var(--accent-2)) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    border-bottom-color: var(--divider) !important;
}
.status-feed-item {
    background: var(--feed-item-bg) !important;
    border-color: var(--feed-item-border) !important;
    color: var(--card-text);
}
.status-feed-item:hover { background: var(--feed-item-hover-bg) !important; }
.status-user { color: var(--accent) !important; }
.status-text { color: var(--card-text) !important; }
.status-time { color: var(--muted-text) !important; }

/* Loader balloon */
.loader-caption-balloon {
    background: var(--card-bg) !important;
    color: var(--card-text) !important;
    border-color: var(--accent) !important;
}

/* =====================================================================
 * 10. TAB GAMING
 * ===================================================================== */
.gaming-tab {
    background: var(--tab-bg) !important;
    color: var(--tab-text) !important;
    border-color: var(--tab-border) !important;
}
.gaming-tab:hover {
    background: var(--tab-hover-bg) !important;
    color: var(--card-text) !important;
}
.gaming-tab.active {
    background: linear-gradient(180deg, var(--tab-active-bg) 0%, var(--tab-active-dark) 100%) !important;
    color: var(--tab-active-text) !important;
    border-color: var(--tab-active-dark) !important;
}

/* =====================================================================
 * 11. PAGINATION
 * ===================================================================== */
.pagination a {
    background: var(--surface-2-bg) !important;
    color: var(--card-text) !important;
    border-color: var(--divider) !important;
}
.pagination a:hover { background: var(--accent-soft) !important; }
.pagination a.active {
    background: var(--accent) !important;
    color: var(--accent-contrast) !important;
    border-color: var(--accent-dark) !important;
}

/* =====================================================================
 * 12. AKSEN DEKORATIF (bar gradient di kartu akun, dll.)
 * ===================================================================== */
.account-info-box::before {
    background: linear-gradient(90deg, var(--accent), var(--accent-2)) !important;
}

/* =====================================================================
 * 13. TAB (DISAMAKAN untuk semua jenis tab)
 *  Tab berita/pengumuman (.news-tab-btn) & tab widget PVP/Castle (.hw-tab-btn)
 *  memakai gaya seragam: nonaktif = permukaan lembut + teks redup,
 *  aktif = gradient aksen theme. Aturan inline di index/main tidak memakai
 *  !important pada warna, sehingga aturan !important ini menang.
 * ===================================================================== */
.news-tab-btn,
.hw-tab-btn,
.media-tab-btn,
.gs-tab-btn,
.auction-tab-btn {
    background: var(--surface-2-bg) !important;
    color: var(--muted-text) !important;
    border-color: var(--divider) !important;
}
.news-tab-btn:hover,
.hw-tab-btn:hover,
.media-tab-btn:hover,
.gs-tab-btn:hover,
.auction-tab-btn:hover {
    background: var(--accent-soft) !important;
    color: var(--accent) !important;
    border-color: color-mix(in srgb, var(--accent) 40%, transparent) !important;
}
.news-tab-btn.active,
.hw-tab-btn.active,
.media-tab-btn.active,
.gs-tab-btn.active,
.auction-tab-btn.active {
    background: linear-gradient(135deg, var(--accent) 0%, var(--accent-dark) 100%) !important;
    color: var(--accent-contrast) !important;
    border-color: var(--accent-dark) !important;
}
/* Garis bawah bar tab mengikuti aksen theme */
.news-tabs-horizontal,
.media-tabs-horizontal {
    border-bottom-color: var(--accent) !important;
}
.gs-tabs,
.auction-tabs-horizontal {
    border-bottom-color: var(--divider) !important;
}

/* =====================================================================
 * 14. MY PLAYER PROFILE
 * ===================================================================== */
.profile-header {
    background: var(--surface-2-bg) !important;
    border-color: var(--divider) !important;
}
.status-input-area {
    background: var(--card-bg) !important;
    border-color: var(--divider) !important;
}
.profile-img { border-color: var(--card-bg) !important; }
.profile-info, .profile-header { color: var(--card-text); }

/* =====================================================================
 * 14b. KALENDER EVENT
 *  Tanggal biasa memakai permukaan theme; penanda semantik dipertahankan:
 *  hari-ini tetap kuning, tanggal ber-event tetap aksen agar mudah dikenali.
 * ===================================================================== */
.calendar-header {
    color: var(--accent) !important;
    border-bottom-color: var(--divider) !important;
}
.cal-nav { color: var(--accent) !important; }
.cal-nav:hover { background-color: var(--surface-2-bg) !important; }
.cal-archive-link { color: var(--muted-text) !important; }
.calendar-day-name { color: var(--muted-text) !important; }
.calendar-date {
    background: var(--surface-2-bg) !important;
    color: var(--card-text) !important;
}
.calendar-date.past-date {
    background: color-mix(in srgb, var(--card-text) 4%, var(--card-bg)) !important;
    color: var(--muted-text) !important;
    opacity: 0.7;
}
.calendar-date.has-event {
    background: var(--accent) !important;
    color: var(--accent-contrast) !important;
    box-shadow: 0 2px 5px color-mix(in srgb, var(--accent) 30%, transparent) !important;
}
.calendar-date.past-date.has-event {
    background: color-mix(in srgb, var(--accent) 45%, var(--card-bg)) !important;
    color: var(--accent-contrast) !important;
    opacity: 0.85;
}
/* Hari ini tetap kuning (penanda semantik) — ditegaskan ulang karena aturan
   .calendar-date di atas memakai !important */
.calendar-date.today {
    background: #fff3cd !important;
    color: #856404 !important;
}

/* =====================================================================
 * 15. NEWS / ANNOUNCEMENT (judul, isi berita, tombol baca selengkapnya)
 * ===================================================================== */
.news-title-text { color: var(--accent) !important; }
.news-header-row:hover { background-color: var(--accent-soft) !important; }
.news-header-row:hover .news-title-text,
.news-header-row:hover .arrow { color: var(--link-hover) !important; }
.read-more-btn { background: var(--accent) !important; color: var(--accent-contrast) !important; }
.news-item-wrapper { border-bottom-color: var(--divider) !important; }
/* Isi pesan berita (Latest Announcement / Forum Update / Patch Update) */
.news-content-body {
    background: var(--surface-2-bg) !important;
    color: var(--card-text) !important;
    border-left-color: var(--accent) !important;
}
.news-content-body a { color: var(--link-color) !important; }

/* =====================================================================
 * 15b. TAB GALLERY (widget foto/video di beranda + halaman gallery penuh)
 * ===================================================================== */
.pho-cat-btn, .vid-cat-btn,
.photo-page-cat-btn, .vid-page-cat-btn {
    background: var(--surface-2-bg) !important;
    color: var(--muted-text) !important;
    border-color: var(--divider) !important;
}
.pho-cat-btn:hover, .vid-cat-btn:hover,
.photo-page-cat-btn:hover, .vid-page-cat-btn:hover {
    background: var(--accent-soft) !important;
    color: var(--accent) !important;
    border-color: color-mix(in srgb, var(--accent) 40%, transparent) !important;
}
.pho-cat-btn.active, .vid-cat-btn.active {
    color: var(--accent) !important;
    background: var(--card-bg) !important;
    border-top-color: var(--accent) !important;
    border-bottom-color: var(--card-bg) !important;
}
.photo-page-cat-btn.active, .vid-page-cat-btn.active {
    background: var(--accent) !important;
    color: var(--accent-contrast) !important;
    border-color: var(--accent-dark) !important;
}
/* Badge jumlah item pada tombol kategori (non-aktif) */
.photo-page-cat-btn span:last-child, .vid-page-cat-btn span:last-child {
    background: var(--divider) !important;
    color: var(--muted-text) !important;
}

/* =====================================================================
 * 15c. IKON MENGAMBANG KIRI-ATAS (lonceng, inbox, speaker, musik)
 *  Elemen ini memakai style inline non-!important → aturan di sini menang.
 * ===================================================================== */
.floating-tools-box {
    background: var(--card-bg) !important;
    border-color: var(--divider) !important;
}
#notif-bell-btn, #inbox-btn, #gmToastMuteBtn, .bgm-icon, #bgm-slider-container {
    background: var(--surface-2-bg) !important;
    color: var(--card-text) !important;
    border-color: var(--divider) !important;
}

/* =====================================================================
 * 16. FOOTER (mengikuti theme bila diaktifkan di Panel GM)
 *  footer.php memasang class .footer-follow-theme pada .footer-wrapper saat
 *  mode "footer ikut theme" aktif. Bila tidak, footer memakai warna manualnya
 *  sendiri dan blok di bawah ini tidak berlaku.
 * ===================================================================== */
.footer-wrapper.footer-follow-theme {
    background: var(--footer-bg) !important;
    border-top-color: var(--footer-accent) !important;
    color: var(--footer-headline);
}
.footer-wrapper.footer-follow-theme .footer-headline {
    background-image: linear-gradient(90deg, var(--footer-headline), var(--footer-text)) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
}
.footer-wrapper.footer-follow-theme .footer-subtext { color: var(--footer-text) !important; }
.footer-wrapper.footer-follow-theme .footer-copyright { color: var(--footer-muted) !important; }
.footer-wrapper.footer-follow-theme .footer-links a { color: var(--footer-text) !important; }

/* =====================================================================
 * 17. SCROLLBAR (kosmetik saja — ukuran tetap default)
 * ===================================================================== */
::-webkit-scrollbar-thumb {
    background: var(--scrollbar-thumb);
    border-radius: 8px;
}