/* ============================================================
   FILE: core.css
   ============================================================ */

/* ============================================================
   RESET
   ============================================================ */
html {
    box-sizing: border-box;
}
*, *::before, *::after {
    box-sizing: inherit;
    margin: 0;
    padding: 0;
}

/* ============================================================
   CSS VARIABLES - DEFAULT (LIGHT THEME) via :root
   ============================================================ */
:root {
    --primary-color: #0066b3;
    --primary-dark: #004d8c;
    --primary-light: #e8f4fd;
    --secondary-color: #00a3e0;
    --secondary-dark: #0082b3;
    --success-color: #27ae60;
    --warning-color: #f39c12;
    --error-color: #e74c3c;
    --bg-color: #e0f0ff;
    --bg-gradient: linear-gradient(135deg, #e0f0ff 0%, #ffffff 100%);
    --card-bg: #ffffff;
    --input-bg: #ffffff;
    --tab-bg: #eef2f7;
    --white: #ffffff;
    --text-dark: #1a2a3a;
    --text-light: #5a6a7a;
    --border-color: #d0e2f0;
    --shadow: 0 2px 12px rgba(0, 102, 179, 0.12);
    --radius: 12px;
    --particle-color-1: rgba(255, 255, 255, 0.85);
    --particle-color-2: rgba(200, 225, 245, 0.6);
}

/* PERBAIKAN: selector dark/light-mode di seluruh file css/ sekarang juga
   menyasar `html.theme-dark`/`html.theme-light` (bukan hanya `body.theme-*`),
   supaya selaras dengan script anti-flicker inline di <head> yang menaruh
   class ini di elemen <html> sebelum <body> ada - mencegah kilatan tema
   light sesaat sebelum theme-manager.js selesai memasang class di <body>. */
/* ============================================================
   TEMA LIGHT
   ============================================================ */
html.theme-light body, body.theme-light{
    /* Inherits from :root */
}

/* ============================================================
   TEMA DARK
   ============================================================ */
html.theme-dark body, body.theme-dark{
    --primary-color: #4ea8de;
    --primary-dark: #2b7bb5;
    --primary-light: #13294b;
    --secondary-color: #38bdf8;
    --secondary-dark: #0ea5e9;
    --success-color: #34d399;
    --warning-color: #fbbf24;
    --error-color: #f87171;
    --bg-color: #0b0f1c;
    --bg-gradient: linear-gradient(135deg, #0b0f1c 0%, #1a1a2e 100%);
    --card-bg: #111a2e;
    --input-bg: #0f172a;
    --tab-bg: #172036;
    --white: #ffffff;
    --text-dark: #eef2f7;
    --text-light: #c6d0dc;
    --border-color: #2d3b55;
    --shadow: 0 2px 12px rgba(0, 0, 0, 0.6);
    --radius: 12px;
    --particle-color-1: rgba(200, 220, 255, 0.9);
    --particle-color-2: rgba(120, 160, 255, 0.5);
}

/* ============================================================
   GLASSMORPHISM (BARU) - LAPISAN TERPISAH, BISA DIGABUNG DENGAN
   LIGHT ATAUPUN DARK
   ============================================================
   PERBAIKAN DESAIN: sebelumnya glass adalah tema ke-3 yang berdiri
   sendiri (body.glass-on), terpisah total dari light/dark - artinya
   auto-mode (yang cuma tahu light/dark) tidak bisa "menuju" glass sama
   sekali, dan memilih glass berarti keluar dari siklus light/dark.

   Sekarang glass adalah TOGGLE INDEPENDEN (class .glass-on di body),
   dipasang DI ATAS tema dasar yang sedang aktif (theme-light ATAU
   theme-dark). Auto-mode tetap sepenuhnya mengatur light/dark seperti
   biasa (waktu/preferensi sistem) TANPA PEDULI status glass; glass-on
   murni pilihan estetika independen yang tetap menyala/mati sendiri
   walau tema dasarnya auto-berganti di belakang layar.

   Efeknya: body.theme-light.glass-on = kaca terang di atas gradient
   pastel; body.theme-dark.glass-on = kaca gelap di atas gradient
   ungu-pink (persis versi awal yang sudah dicoba sebelumnya).
   ============================================================ */
html.theme-light.glass-on body, body.theme-light.glass-on{
    --primary-color: #7c3aed;
    --primary-dark: #6d28d9;
    --secondary-color: #db2777;
    --secondary-dark: #be185d;
    --bg-color: #eef0ff;
    --bg-gradient: linear-gradient(135deg, #fdf2ff 0%, #eef0ff 40%, #e0f0ff 70%, #dcefff 100%);
    --text-dark: #241b40;
    --text-light: #5b5077;
    --border-color: rgba(124, 58, 237, 0.18);
    --particle-color-2: rgba(219, 39, 119, 0.35);

    --glass-bg: rgba(255, 255, 255, 0.45);
    --glass-bg-strong: rgba(255, 255, 255, 0.65);
    --glass-border: rgba(255, 255, 255, 0.6);
    --glass-shadow: 0 8px 32px rgba(124, 58, 237, 0.12);
    --glass-blur: blur(16px);
    --glass-radius: 20px;
}

html.theme-dark.glass-on body, body.theme-dark.glass-on{
    --primary-color: #8b5cf6;
    --primary-dark: #6d28d9;
    --secondary-color: #ec4899;
    --secondary-dark: #db2777;
    --bg-color: #1a1035;
    --bg-gradient: linear-gradient(135deg, #2b1055 0%, #1a1035 35%, #4a2472 70%, #7b2ff7 100%);
    --text-dark: #f5f3ff;
    --text-light: #cbb8f0;
    --border-color: rgba(255, 255, 255, 0.18);
    --particle-color-2: rgba(236, 168, 255, 0.6);

    --glass-bg: rgba(255, 255, 255, 0.12);
    --glass-bg-strong: rgba(255, 255, 255, 0.18);
    --glass-border: rgba(255, 255, 255, 0.25);
    --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.25);
    --glass-blur: blur(16px);
    --glass-radius: 20px;
}

/* Radius sudut membulat besar (ciri khas glassmorphism) berlaku untuk
   kedua kombinasi, tidak perlu diulang di masing-masing blok di atas. */
body.glass-on {
    --radius: 20px;
}
body.glass-on .glass-surface {
    background: var(--glass-bg);
    -webkit-backdrop-filter: var(--glass-blur);
    backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-border);
    box-shadow: var(--glass-shadow);
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    /* PERBAIKAN: fallback eksplisit untuk browser lama yang tidak
       mendukung backdrop-filter sama sekali (mis. Firefox versi lama) -
       tanpa ini, kartu jadi nyaris tak terlihat (terlalu transparan
       tanpa efek blur untuk memisahkannya dari background). */
    body.glass-on .glass-surface {
        background: var(--glass-bg-strong);
    }
}

/* ============================================================
   BODY & CONTAINER
   ============================================================ */
body {
    font-family: 'Inter', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    line-height: 1.6;
    color: var(--text-dark);
    background: var(--bg-gradient);
    background-color: var(--bg-color);
    min-height: 100vh;
    overflow-x: hidden;
    position: relative;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 15px;
    position: relative;
    z-index: 1;
}

/* ============================================================
   PARTIKEL CANVAS
   ============================================================ */
#particle-canvas {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    z-index: 0;
    pointer-events: none;
    display: block !important;
}

/* Pastikan canvas berada di belakang konten */
body > canvas#particle-canvas {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 0;
    pointer-events: none;
}

/* PERBAIKAN (BUG KRITIS - penyebab layout "hancur berantakan" setelah
   style.css dihapus): style.css lama ternyata satu-satunya tempat yang
   men-style elemen #particles-canvas (JAMAK, beda dari #particle-canvas
   TUNGGAL yang di atas). Elemen ini TIDAK dibuat oleh kode manapun di
   proyek saat ini (particles.js hanya membuat/mencari "particle-canvas"
   tunggal) - kemungkinan besar sisa dari versi script yang lebih lama
   yang masih ter-cache di browser, atau elemen sisa yang entah bagaimana
   masih muncul. TANPA aturan ini, kalau elemen itu muncul (mis. karena
   file JS lama ter-cache), dia dirender sebagai elemen block BIASA
   (bukan position:fixed) yang ikut memakan ruang vertikal di document
   flow - inilah yang membuat body jadi setinggi ribuan pixel dan
   layout berantakan total. Dikembalikan di sini sebagai proteksi,
   TERLEPAS dari apakah browser cache sudah dibersihkan atau belum. */
#particles-canvas {
    position: fixed !important;
    inset: 0;
    width: 100vw;
    height: 100vh;
    z-index: 0;
    pointer-events: none;
    display: none;
}

/* Konten di atas partikel */
.container,
.lp-wrap,
.auth-wrap,
.cbn-wrap,
.face-container,
.dsh-wrap,
.adm-wrap,
.ah-wrap {
    position: relative;
    z-index: 1;
}

/* Theme toggle wrap juga di atas */
.theme-toggle-wrap {
    position: relative;
    z-index: 1;
}

/* ============================================================
   HEADER
   ============================================================ */
header {
    text-align: center;
    margin-bottom: 20px;
    padding: 18px 15px;
    background: var(--card-bg);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    border-bottom: 4px solid var(--primary-color);
    position: relative;
    overflow: hidden;
    transition: background 0.3s ease, border-color 0.3s ease, backdrop-filter 0.3s ease;
}

/* PERBAIKAN/BARU: header ikut jadi permukaan kaca saat tema glass aktif.
   Border-bottom tebal (aksen warna) sengaja tetap dipertahankan supaya
   header tidak kehilangan identitas visualnya sendiri di atas kaca. */
body.glass-on header {
    background: var(--glass-bg);
    -webkit-backdrop-filter: var(--glass-blur);
    backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-border);
    border-bottom: 4px solid var(--primary-color);
    box-shadow: var(--glass-shadow);
}

header h1 {
    color: var(--primary-color);
    margin-bottom: 8px;
    font-size: 1.4em;
    font-weight: 700;
}

header p {
    color: var(--text-light);
    font-size: 0.95em;
}

/* ============================================================
   UTILITY CLASSES
   ============================================================ */
.text-center { text-align: center; }
.text-right { text-align: right; }
.text-left { text-align: left; }
.mt-10 { margin-top: 10px; }
.mb-10 { margin-bottom: 10px; }
.mt-20 { margin-top: 20px; }
.mb-20 { margin-bottom: 20px; }
.hidden { display: none; }
.clearfix::after { content: ""; display: table; clear: both; }

/* ============================================================
   SCROLLBAR STYLING
   ============================================================ */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: var(--bg-color);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb {
    background: var(--primary-color);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--primary-dark);
}

/* ============================================================
   SELECTION
   ============================================================ */
::selection {
    background: var(--primary-color);
    color: var(--white);
}

::-moz-selection {
    background: var(--primary-color);
    color: var(--white);
}

/* ============================================================
   DARK THEME - SCROLLBAR
   ============================================================ */
html.theme-dark body ::-webkit-scrollbar-track, body.theme-dark ::-webkit-scrollbar-track{
    background: var(--bg-color);
}

html.theme-dark body ::-webkit-scrollbar-thumb, body.theme-dark ::-webkit-scrollbar-thumb{
    background: var(--primary-color);
}

html.theme-dark body ::-webkit-scrollbar-thumb:hover, body.theme-dark ::-webkit-scrollbar-thumb:hover{
    background: var(--primary-dark);
}

/* ============================================================
   TEMA GLASSMORPHISM - SCROLLBAR (BARU, konsisten dengan dark)
   ============================================================ */
body.glass-on ::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.05);
}

body.glass-on ::-webkit-scrollbar-thumb {
    background: var(--primary-color);
}

body.glass-on ::-webkit-scrollbar-thumb:hover {
    background: var(--primary-dark);
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (min-width: 481px) {
    .container { padding: 20px; }
    header { padding: 20px; }
    header h1 { font-size: 1.6em; }
}

@media (min-width: 769px) {
    .container { padding: 25px; }
    header h1 { font-size: 1.8em; }
}

@media (min-width: 993px) {
    .container { max-width: 1200px; padding: 30px; }
    header { padding: 30px; }
    header h1 { font-size: 2em; }
}

/* ============================================================
   RESPONSIVE - MOBILE
   ============================================================ */
@media (max-width: 480px) {
    body {
        font-size: 14px;
    }
    .container {
        padding: 10px;
    }
    header {
        padding: 12px 10px;
        margin-bottom: 12px;
    }
    header h1 {
        font-size: 1.2em;
    }
    header p {
        font-size: 0.85em;
    }
}

@media (max-width: 380px) {
    body {
        font-size: 13px;
    }
    .container {
        padding: 6px;
    }
    header h1 {
        font-size: 1em;
    }
}

/* ============================================================
   PRINT STYLES
   ============================================================ */
@media print {
    #particle-canvas {
        display: none !important;
    }
    body {
        background: #fff !important;
        color: #000 !important;
    }
    .container {
        max-width: 100% !important;
        padding: 0 !important;
    }
    header {
        box-shadow: none !important;
        border: 1px solid #ddd !important;
    }
}