/* custom-theme.css
   Khusus mengatur palet untuk:
   - Dark mode  : coklat teh + emas hangat
   - Light mode : pakai bawaan (apuh-light), tidak kita coklatkan
*/

/* =============== DARK MODE: COKLAT + EMAS =============== */

html[data-theme="apuh-dark"] {
  --bg: #18110b;          /* latar belakang utama */
  --bg-soft: #24140f;     /* panel lunak */
  --card: #6b4425;        /* kartu (timeline, dll) */
  --ink: #fff7e5;         /* teks utama */
  --muted: #facc6b;       /* teks kecil/meta */
  --ring: #f4b41a;        /* garis / border aksen */
  --accent: #8c5b2c;      /* elemen aksen */
  --shadow: 0 18px 50px rgba(0, 0, 0, 0.8);
}

html[data-theme="apuh-dark"] body {
  background: radial-gradient(circle at top, #3b2412, #18110b);
  color: var(--ink);
}

/* Header / topbar di dark mode */
html[data-theme="apuh-dark"] .topbar {
  background: linear-gradient(135deg, #2a1b10, #3b2412);
  border-bottom: 2px solid #f4b41a;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.7);
}

/* Footer & bottom nav di dark mode */
html[data-theme="apuh-dark"] .app-footer,
html[data-theme="apuh-dark"] .bottom-nav {
  background: #24140f;
  border-color: rgba(244, 180, 26, 0.4);
  box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.7);
}

/* Kartu umum di dark mode mengikuti warna card coklat */
html[data-theme="apuh-dark"] .card,
html[data-theme="apuh-dark"] .feed-card,
html[data-theme="apuh-dark"] .post-card,
html[data-theme="apuh-dark"] .social-card,
html[data-theme="apuh-dark"] .muthawwif-card,
html[data-theme="apuh-dark"] .profile-card,
html[data-theme="apuh-dark"] .booking-card {
  background: var(--card) !important;
  color: var(--ink) !important;
  border-radius: 18px !important;
  border: 1px solid var(--ring) !important;
  box-shadow: var(--shadow) !important;
}

/* Teks kecil / meta (tanggal, subjudul) di dark mode */
html[data-theme="apuh-dark"] .post-meta,
html[data-theme="apuh-dark"] .social-meta,
html[data-theme="apuh-dark"] .card small {
  color: var(--muted) !important;
}

/* Tombol Suka / komentar ala kapsul coklat-emas di dark mode */
html[data-theme="apuh-dark"] .post-footer button,
html[data-theme="apuh-dark"] .social-footer button {
  background: #3b2a1a !important;
  border-radius: 999px !important;
  border: 1px solid #f4b41a !important;
  color: #fff7e5 !important;
}

/* Avatar diberi glow hangat di dark mode */
html[data-theme="apuh-dark"] .post-avatar {
  background: radial-gradient(circle at top, #facc15, #b45309) !important;
}

/* Modal login di dark mode */
html[data-theme="apuh-dark"] .apuh-modal-backdrop {
  background: rgba(0, 0, 0, 0.65);
}

html[data-theme="apuh-dark"] .apuh-modal {
  background: linear-gradient(145deg, #2a1b10, #3b2412);
  border-color: rgba(244, 180, 26, 0.6);
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.9);
}

html[data-theme="apuh-dark"] .apuh-modal .auth-header h2 {
  color: #fff7e5;
}

html[data-theme="apuh-dark"] .apuh-modal .auth-header .sub {
  color: #facc6b;
}

html[data-theme="apuh-dark"] .auth-input {
  background: #1f1309;
  border-color: rgba(244, 180, 26, 0.7);
  color: #fff7e5;
}

html[data-theme="apuh-dark"] .auth-tab {
  background: #3b2412;
  border-color: rgba(244, 180, 26, 0.7);
  color: #facc6b;
}

html[data-theme="apuh-dark"] .auth-tab.active,
html[data-theme="apuh-dark"] .auth-btn {
  background: linear-gradient(135deg, #f4b41a, #facc15);
  color: #3b2412;
}

/* Ikon user di dark mode */
html[data-theme="apuh-dark"] .icon-user-circle,
html[data-theme="apuh-dark"] .icon-user-circle::before,
html[data-theme="apuh-dark"] .icon-user-circle::after {
  border-color: #f4e5bf;
}

/* =============== LIGHT MODE: BIARKAN PUTIH, TANPA COKLAT KUAT =============== */
/* Tidak kita coklatkan; hanya sedikit lembutkan header supaya beda dari default */

html[data-theme="apuh-light"] .topbar {
  background: linear-gradient(
    135deg,
    rgba(249, 250, 251, 0.98),
    rgba(243, 244, 246, 0.96)
  );
}

/* ============ KARTU DIREKTORI / MEMBER DI DARK MODE ============ */
/* Ini untuk halaman: Direktori Pelayan Tamu Allah, dsb */

html[data-theme="apuh-dark"] .user-card,
html[data-theme="apuh-dark"] .user-card *,
html[data-theme="apuh-dark"] .directory-card,
html[data-theme="apuh-dark"] .directory-card *,
html[data-theme="apuh-dark"] .member-card,
html[data-theme="apuh-dark"] .member-card *,
html[data-theme="apuh-dark"] .profile-list-item,
html[data-theme="apuh-dark"] .profile-list-item * {
  background: #1f2937 !important;           /* lapisan dasar sedikit gelap */
  color: #fefce8 !important;                /* teks krem terang */
}

/* wrapper kartu utamanya */
html[data-theme="apuh-dark"] .user-card,
html[data-theme="apuh-dark"] .directory-card,
html[data-theme="apuh-dark"] .member-card,
html[data-theme="apuh-dark"] .profile-list-item {
  background: #6b4425 !important;           /* coklat teh */
  border-radius: 18px !important;
  border: 1px solid #f4b41a !important;     /* emas lembut */
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.7) !important;
}

/* tombol dalam kartu direktori */
html[data-theme="apuh-dark"] .user-card button,
html[data-theme="apuh-dark"] .directory-card button,
html[data-theme="apuh-dark"] .member-card button,
html[data-theme="apuh-dark"] .profile-list-item button {
  background: #3b2a1a !important;
  border-radius: 999px !important;
  border: 1px solid #f4b41a !important;
  color: #fefce8 !important;
}

/* badge MEMBER */
html[data-theme="apuh-dark"] .user-card .badge,
html[data-theme="apuh-dark"] .directory-card .badge,
html[data-theme="apuh-dark"] .member-card .badge,
html[data-theme="apuh-dark"] .profile-list-item .badge {
  background: #f4b41a !important;
  color: #3b2412 !important;
}

/* ============================================================
   FIX UTAMA: KARTU DIREKTORI / CARD-USER
   ============================================================ */

/* ========== LIGHT MODE (apuh-light) — kartu harus PUTIH ========== */

html[data-theme="apuh-light"] .card-user,
html[data-theme="apuh-light"] .card-user-body {
  background: #ffffff !important;
  border-radius: 18px !important;
  border: 1px solid #e5e7eb !important;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.06) !important;
  color: #111827 !important;
}

/* teks dalam kartu */
html[data-theme="apuh-light"] .card-user *,
html[data-theme="apuh-light"] .card-user-body * {
  color: #111827 !important;
}

/* badge MEMBER */
html[data-theme="apuh-light"] .card-user .badge,
html[data-theme="apuh-light"] .card-user-body .badge {
  background: #fde68a !important;
  color: #92400e !important;
}

/* tombol dalam light mode */
html[data-theme="apuh-light"] .card-user button,
html[data-theme="apuh-light"] .card-user-body button {
  background: #f9fafb !important;
  border-radius: 999px !important;
  border: 1px solid #d1d5db !important;
  color: #374151 !important;
}



/* ========== DARK MODE (apuh-dark) — kartu coklat emas ========== */

html[data-theme="apuh-dark"] .card-user,
html[data-theme="apuh-dark"] .card-user-body {
  background: #6b4425 !important;  /* coklat teh */
  border-radius: 18px !important;
  border: 1px solid #f4b41a !important;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.6) !important;
  color: #fefce8 !important;
}

/* teks dalam kartu dark */
html[data-theme="apuh-dark"] .card-user *,
html[data-theme="apuh-dark"] .card-user-body * {
  color: #fefce8 !important;
}

/* badge MEMBER */
html[data-theme="apuh-dark"] .card-user .badge,
html[data-theme="apuh-dark"] .card-user-body .badge {
  background: #f4b41a !important;
  color: #3b2412 !important;
}

/* tombol dalam dark mode */
html[data-theme="apuh-dark"] .card-user button,
html[data-theme="apuh-dark"] .card-user-body button {
  background: #3b2a1a !important;
  border-radius: 999px !important;
  border: 1px solid #f4b41a !important;
  color: #fefce8 !important;
}