/* ════════════════════════════════════════════════════════════
 * GBI Slawi — light-mode.css (frontend)
 * Palet warna diselaraskan 1:1 dengan light mode BACKEND
 * (lihat: css/backend/variables.css → html[data-theme="light"])
 * ════════════════════════════════════════════════════════════ */

/* ════════════════════════════════════════════════════════════
   1) VARIABEL DASAR — ini yang sebelumnya hilang.
   Banyak file CSS module frontend (events.css, notifikasi.css,
   pagination.css, ulang-tahun.css, complete-profile.css, dst)
   SUDAH punya aturan html[data-theme="light"] sendiri, tapi semuanya
   bergantung pada variabel --bg/--bg2/--bg3/--bg4/--text/--border
   di bawah ini. Tanpa blok ini, semua override itu tidak
   berpengaruh sama sekali.
   ════════════════════════════════════════════════════════════ */
html[data-theme="light"] {
    /* Gold & border — sama seperti backend admin */
    --gold: #A07828;
    --gold-light: #C9A84C;
    --gold-dim: rgba(160, 120, 40, 0.09);
    --gold-border: rgba(160, 120, 40, 0.22);

    /* Alias nama variabel backend, dipakai fallback di beberapa
       file (mis. events.css: var(--panel, #fff)) */
    --deep: #F5F3EE;
    --panel: #FFFFFF;

    /* 4 tingkat background frontend, diturunkan dari --deep/--panel backend */
    --bg: #F5F3EE;
    /* = --deep backend: latar halaman */
    --bg2: #EFEAE0;
    /* section sekunder (footer, mobile menu, stats) */
    --bg3: #FFFFFF;
    /* = --panel backend: card, modal, dropdown */
    --bg4: #F5F1E6;
    /* elemen bersarang (org-node, gedung-box, video card) */

    /* Teks — sama seperti backend admin */
    --text: #1A1610;
    --text2: rgba(26, 22, 16, 0.55);
    --text3: rgba(26, 22, 16, 0.32);
    --muted: rgba(26, 22, 16, 0.52);
    --muted2: rgba(26, 22, 16, 0.28);

    --border: rgba(160, 120, 40, 0.18);
    --border2: rgba(160, 120, 40, 0.08);

    --loader-bg: #F5F3EE;

    --success: #2D9160;
    --warning: #C07820;
    --danger: #C03A3A;
    --info: #2A6EB0;
}

/* Navbar solid background per tema — sebelumnya cuma ada versi dark
   ( [data-theme="dark"] nav { background: rgba(8,8,8,.75) } ),
   jadi di light mode navbar tembus pandang tanpa ini. */
html[data-theme="light"] nav {
    background: rgba(245, 243, 238, 0.82);
}

/* ════════════════════════════════════════════════════════════
   2) OVERRIDE TAMBAHAN — untuk elemen yang warnanya hardcoded
   (bukan lewat variabel), jadi tidak otomatis ikut berubah
   hanya dari blok variabel di atas.
   ════════════════════════════════════════════════════════════ */

/* ── Loader ── */
html[data-theme="light"] #loader .loader-text {
    color: #A07828;
    text-shadow: 0 0 20px rgba(160, 120, 40, 0.25);
}

html[data-theme="light"] #loader .loader-tagline {
    color: rgba(160, 120, 40, 0.6);
}

html[data-theme="light"] #loader .bar {
    background: rgba(160, 120, 40, 0.15);
}

html[data-theme="light"] #loader .bar-fill {
    background: linear-gradient(to right, transparent, #A07828, transparent);
    box-shadow: 0 0 8px rgba(160, 120, 40, 0.5);
}

html[data-theme="light"] #loader .cross::before,
html[data-theme="light"] #loader .cross::after {
    background: linear-gradient(to bottom, rgba(160, 120, 40, 0.4), #A07828, rgba(160, 120, 40, 0.4));
    box-shadow: 0 0 12px rgba(160, 120, 40, 0.5), 0 0 28px rgba(160, 120, 40, 0.2);
}

html[data-theme="light"] #loader .loader-halo::before,
html[data-theme="light"] #loader .loader-halo::after {
    border-color: rgba(160, 120, 40, 0.25);
}

html[data-theme="light"] #loader::before {
    background: radial-gradient(circle, rgba(160, 120, 40, 0.08) 0%, transparent 70%);
}

html[data-theme="light"] #loader .loader-particles span {
    background: #A07828;
}

/* ── Shadow card lebih terlihat di latar terang ── */
html[data-theme="light"] .card {
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
}

html[data-theme="light"] .card:hover {
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.10);
}

/* ── Panel kiri auth/profile/reset modal ── */
html[data-theme="light"] .auth-panel-left,
html[data-theme="light"] .profile-panel-left,
html[data-theme="light"] .reset-panel-left {
    background: linear-gradient(165deg, #EFEAE0 0%, #E3DACB 100%);
}

/* ── Input fields ── */
html[data-theme="light"] .auth-input,
html[data-theme="light"] .kom-input,
html[data-theme="light"] .kom-textarea,
html[data-theme="light"] .comment-input,
html[data-theme="light"] .comment-textarea,
html[data-theme="light"] .news-search {
    background: #FFFFFF;
    color: #1A1610;
    border-color: rgba(160, 120, 40, 0.22);
}

html[data-theme="light"] .auth-input::placeholder,
html[data-theme="light"] .kom-input::placeholder,
html[data-theme="light"] .kom-textarea::placeholder {
    color: rgba(26, 22, 16, 0.4);
}

/* ── Mobile menu ── */
html[data-theme="light"] #mobile-menu {
    background: #EFEAE0;
    border-top: 1px solid rgba(160, 120, 40, 0.15);
}

/* ── Toast ── */
html[data-theme="light"] #toast {
    background: #FFFFFF;
    color: #1A1610;
    border-color: rgba(160, 120, 40, 0.18);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
}

/* ── Scroll-to-top ── */
html[data-theme="light"] #scroll-top {
    background: #A07828;
    box-shadow: 0 4px 20px rgba(160, 120, 40, 0.3);
}

/* ── Tab button aktif ── */
html[data-theme="light"] .tab-btn.active,
html[data-theme="light"] .tab-btn:hover {
    background: #A07828;
    border-color: #A07828;
    color: #fff;
}

/* ── Pill badge ── */
html[data-theme="light"] .pill {
    color: #A07828;
    background: rgba(160, 120, 40, 0.09);
    border-color: rgba(160, 120, 40, 0.22);
}

/* ── Gold gradient text ── */
html[data-theme="light"] .gold-text {
    background: linear-gradient(135deg, #A07828 0%, #7A5A1E 50%, #A07828 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* ── Teks sekunder pada hero & section header ── */
html[data-theme="light"] .hero-desc,
html[data-theme="light"] .section-header p,
html[data-theme="light"] .section-head p,
html[data-theme="light"] .section-subtitle {
    color: rgba(26, 22, 16, 0.6);
}

/* ── Footer ── */
html[data-theme="light"] .footer {
    background: #EFEAE0;
    border-top-color: rgba(160, 120, 40, 0.15);
}

/* ── Nav login/join button ── */
html[data-theme="light"] .nav-login-btn {
    border-color: rgba(160, 120, 40, 0.22);
    color: #1A1610;
}

html[data-theme="light"] .nav-login-btn:hover {
    border-color: #A07828;
    color: #A07828;
}

html[data-theme="light"] .join-btn {
    background: #A07828;
    color: #fff;
}

/* ── Theme toggle button ── */
html[data-theme="light"] .theme-btn {
    background: #FFFFFF;
    border-color: rgba(160, 120, 40, 0.22);
}

/* ── Btn primary / outline ── */
html[data-theme="light"] .btn-primary {
    background: #A07828;
    color: #fff;
    box-shadow: 0 4px 20px rgba(160, 120, 40, 0.25);
}

html[data-theme="light"] .btn-outline {
    color: #1A1610;
    border-color: rgba(160, 120, 40, 0.2);
}

html[data-theme="light"] .btn-outline:hover {
    color: #A07828;
    border-color: #A07828;
}

/* ── Schedule card ── */
html[data-theme="light"] .sched-time {
    color: #A07828;
}

html[data-theme="light"] .sched-badge-gold {
    background: #A07828;
    color: #fff;
}

/* ── Org chart ── */
html[data-theme="light"] .org-senior .role {
    color: #A07828;
}

/* ── Auth submit ── */
html[data-theme="light"] .auth-submit-btn {
    background: #A07828;
    color: #fff;
}

/* ── Divider gold ── */
html[data-theme="light"] .divider-gold {
    background: linear-gradient(90deg, transparent, #A07828, transparent);
}

/* ── Play button (video card) ── */
html[data-theme="light"] .play-button {
    background: rgba(160, 120, 40, 0.15);
    border-color: rgba(160, 120, 40, 0.35);
}

html[data-theme="light"] .play-icon {
    border-left-color: #A07828;
}

/* ── Scrollbar ── */
html[data-theme="light"] ::-webkit-scrollbar-track {
    background: #F5F3EE;
}

html[data-theme="light"] ::-webkit-scrollbar-thumb {
    background: #D8CDB8;
}

/* ════════════════════════════════════════════════════════════
   NAVBAR — mode interaktif di atas auth modal wajib
   ════════════════════════════════════════════════════════════ */
html[data-theme="light"] .navbar[style*="99999"] {
    box-shadow: 0 2px 24px rgba(160, 120, 40, 0.18);
    border-bottom-color: rgba(160, 120, 40, 0.22);
}