/* ================================================================
   NUANSA WEDDING — GLOBAL THEME (Light / Dark Mode)
   Default: LIGHT MODE  |  Palette: Warm Linen & Champagne Gold
   ================================================================ */

/* ── LIGHT MODE (default) ─── Warm, lembut, elegan ── */
:root {
  /* Backgrounds — warm linen tones, bukan putih polos */
  --bg-outer:     #ede8e1;        /* warm greige outer */
  --bg-site:      #f7f4f0;        /* linen site bg */
  --bg-card:      #faf7f4;        /* warm white card */
  --bg-card2:     #f2ede7;        /* slightly deeper card/section */
  --bg-card-alt:  #efe9e2;        /* untuk card yang lebih dalam */
  --bg-input:     #fdfbf9;        /* input field */
  --bg-elevated:  #fff8f2;        /* elevated / highlight sections */

  /* Borders — subtle, tidak mencolok */
  --border-base:  rgba(139,115,85,0.12);   /* warm brown subtle */
  --border-mid:   rgba(139,115,85,0.18);
  --border-input: rgba(139,115,85,0.20);
  --border-focus: #C4955A;

  /* Text — charcoal hangat, bukan hitam/abu keras */
  --text-primary:  #2d2318;       /* warm dark brown — bukan pure black */
  --text-secondary:#6b5c4a;       /* warm medium brown */
  --text-muted:    #a8957e;       /* warm tan muted */
  --text-label:    #4a3c2e;       /* label, slightly lighter than primary */
  --text-caption:  #8a7563;       /* captions, hints */

  /* Navbar / Header */
  --nav-bg:       rgba(247,244,240,0.92);
  --nav-border:   rgba(139,115,85,0.10);

  /* Bottom nav */
  --bnav-bg:      rgba(250,247,244,0.94);
  --bnav-border:  rgba(139,115,85,0.10);
  --bnav-shadow:  0 -2px 20px rgba(100,70,30,0.07);

  /* More-menu drawer */
  --drawer-bg-from: #faf7f4;
  --drawer-bg-to:   #f2ede7;
  --drawer-border:  rgba(139,115,85,0.10);
  --drawer-handle:  rgba(139,115,85,0.18);
  --drawer-item-bg: rgba(139,115,85,0.07);
  --drawer-item-hover: rgba(139,115,85,0.13);
  --drawer-btn-bg:  rgba(139,115,85,0.08);
  --drawer-btn-hover: rgba(139,115,85,0.14);
  --drawer-btn-text: #4a3c2e;

  /* Table cards */
  --table-row-bg:   #faf7f4;
  --table-row-border: rgba(139,115,85,0.10);
  --table-separator: rgba(139,115,85,0.07);
  --table-label-color: #a8957e;

  /* Flash messages */
  --flash-success-bg:    #f0faf3;
  --flash-success-border: rgba(52,168,83,0.25);
  --flash-success-text:  #1e593a;
  --flash-error-bg:      #fdf2f2;
  --flash-error-border:  rgba(200,60,60,0.22);
  --flash-error-text:    #7f2020;

  /* Buttons/interactive els */
  --logout-bg:    rgba(139,115,85,0.08);
  --logout-hover: rgba(139,115,85,0.15);

  /* Scrollbar */
  --scroll-thumb: rgba(139,115,85,0.20);
  --scroll-track: transparent;

  /* Shadows — sangat halus, hangat */
  --shadow-card:  0 1px 2px rgba(100,70,30,0.06), 0 3px 10px rgba(100,70,30,0.05);
  --shadow-card-hover: 0 2px 8px rgba(100,70,30,0.10), 0 6px 20px rgba(100,70,30,0.07);
  --shadow-site:  0 0 60px rgba(100,70,30,0.12);
  --shadow-elevated: 0 8px 30px rgba(100,70,30,0.10);

  /* Accent gold — lebih hangat untuk light mode */
  --gold-300: #f0dfc6;
  --gold-400: #e0c49a;
  --gold-500: #c4955a;       /* lebih tua untuk kontras di bg terang */
  --gold-600: #a87840;
  --gold-700: #8a5f2a;
  --gold-glow: rgba(196,149,90,0.20);
  --gold-bg:   rgba(196,149,90,0.08);  /* background tint gold */
}

/* ── DARK MODE ─── Tidak berubah dari sebelumnya ── */
[data-theme="dark"] {
  --bg-outer:     #0a0a0a;
  --bg-site:      #121212;
  --bg-card:      #1A1A1A;
  --bg-card2:     #222222;
  --bg-card-alt:  #1f1f1f;
  --bg-input:     #121212;
  --bg-elevated:  #1e1e1e;

  --border-base:  rgba(255,255,255,0.05);
  --border-mid:   rgba(255,255,255,0.08);
  --border-input: rgba(255,255,255,0.10);
  --border-focus: #E6C094;

  --text-primary:  #f9fafb;
  --text-secondary:#d1d5db;
  --text-muted:    #6b7280;
  --text-label:    #d1d5db;
  --text-caption:  #9ca3af;

  --nav-bg:       rgba(26,26,26,0.92);
  --nav-border:   rgba(255,255,255,0.05);

  --bnav-bg:      rgba(10,10,10,0.88);
  --bnav-border:  rgba(255,255,255,0.05);
  --bnav-shadow:  0 -4px 24px rgba(0,0,0,0.4);

  --drawer-bg-from: #1A1A1A;
  --drawer-bg-to:   #121212;
  --drawer-border:  rgba(255,255,255,0.05);
  --drawer-handle:  rgba(255,255,255,0.10);
  --drawer-item-bg: rgba(255,255,255,0.04);
  --drawer-item-hover: rgba(255,255,255,0.08);
  --drawer-btn-bg:  rgba(255,255,255,0.05);
  --drawer-btn-hover: rgba(255,255,255,0.10);
  --drawer-btn-text: #d1d5db;

  --table-row-bg:   #1A1A1A;
  --table-row-border: rgba(255,255,255,0.05);
  --table-separator: rgba(255,255,255,0.03);
  --table-label-color: #9ca3af;

  --flash-success-bg:    #1A1A1A;
  --flash-success-border: rgba(255,255,255,0.07);
  --flash-success-text:  #d1d5db;
  --flash-error-bg:      #3d1a1a;
  --flash-error-border:  rgba(248,113,113,0.2);
  --flash-error-text:    #f87171;

  --logout-bg:    rgba(255,255,255,0.06);
  --logout-hover: rgba(255,255,255,0.12);

  --scroll-thumb: rgba(255,255,255,0.12);

  --shadow-card:  0 4px 6px rgba(0,0,0,0.2);
  --shadow-card-hover: 0 8px 20px rgba(0,0,0,0.35);
  --shadow-site:  0 0 50px rgba(0,0,0,0.5);
  --shadow-elevated: 0 10px 40px rgba(0,0,0,0.4);

  --gold-300: #F5E1C8;
  --gold-400: #EBD2B2;
  --gold-500: #E6C094;
  --gold-600: #D5A874;
  --gold-700: #B88852;
  --gold-glow: rgba(230,192,148,0.20);
  --gold-bg:   rgba(230,192,148,0.07);
}

/* ================================================================
   BASE STYLES
   ================================================================ */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  background-color: var(--bg-outer);
  color: var(--text-primary);
  transition: background-color 0.35s ease, color 0.35s ease;
}

/* ── Scrollbar ── */
::-webkit-scrollbar { width: 4px; height: 4px; }
::-webkit-scrollbar-track { background: var(--scroll-track); }
::-webkit-scrollbar-thumb {
  background: var(--scroll-thumb);
  border-radius: 2px;
}

/* ── Site container ── */
#master-container {
  max-width: 480px;
  margin: 0 auto;
  min-height: 100vh;
  background-color: var(--bg-site);
  position: relative;
  box-shadow: var(--shadow-site);
  transition: background-color 0.35s ease, box-shadow 0.35s ease;
}

/* ── Top header bar ── */
header.site-header {
  background-color: var(--nav-bg) !important;
  border-color: var(--nav-border) !important;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  transition: background-color 0.35s ease, border-color 0.35s ease;
}

/* ── Bottom nav ── */
nav.bottom-nav {
  background-color: var(--bnav-bg) !important;
  border-color: var(--bnav-border) !important;
  box-shadow: var(--bnav-shadow) !important;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  transition: background-color 0.35s ease;
}
:root:not([data-theme="dark"]) nav.bottom-nav span,
:root:not([data-theme="dark"]) nav.bottom-nav font {
  background-color: transparent !important;
  text-shadow: none !important;
}

/* ── More drawer ── */
#moreMenuDrawer {
  background: linear-gradient(to bottom, var(--drawer-bg-from), var(--drawer-bg-to)) !important;
  border-color: var(--drawer-border) !important;
  transition: background 0.35s ease;
}
#moreMenuDrawer .drawer-handle {
  background-color: var(--drawer-handle) !important;
}
.more-item-icon {
  background-color: var(--drawer-item-bg) !important;
  color: var(--text-secondary) !important;
  transition: background-color 0.2s ease;
}
.more-item-icon:hover {
  background-color: var(--drawer-item-hover) !important;
}
.drawer-close-btn {
  background-color: var(--drawer-btn-bg) !important;
  color: var(--drawer-btn-text) !important;
  transition: background-color 0.2s ease;
}
.drawer-close-btn:hover {
  background-color: var(--drawer-btn-hover) !important;
}

/* ── Responsive table cards ── */
.responsive-table tr {
  background-color: var(--table-row-bg) !important;
  border: 1px solid var(--table-row-border) !important;
  box-shadow: var(--shadow-card) !important;
  transition: background-color 0.35s ease, box-shadow 0.2s ease;
}
.responsive-table tr:hover {
  box-shadow: var(--shadow-card-hover) !important;
}
.responsive-table td {
  border-bottom: 1px solid var(--table-separator) !important;
  color: var(--text-primary);
}
.responsive-table td:first-child::before {
  color: var(--gold-500) !important;
}
.responsive-table td::before {
  color: var(--table-label-color) !important;
}

/* ── Forms ── */
input[type="text"],
input[type="number"],
input[type="email"],
input[type="tel"],
input[type="password"],
input[type="date"],
input[type="time"],
input[type="search"],
input[type="url"],
select,
textarea {
  background-color: var(--bg-input) !important;
  color: var(--text-primary) !important;
  border-color: var(--border-input) !important;
  transition: background-color 0.35s ease, border-color 0.2s ease, color 0.35s ease;
}

input:focus,
select:focus,
textarea:focus {
  border-color: var(--border-focus) !important;
  box-shadow: 0 0 0 3px var(--gold-glow) !important;
  outline: none !important;
}

::placeholder { color: var(--text-muted) !important; opacity: 1; }
::-ms-input-placeholder { color: var(--text-muted) !important; }

label {
  font-weight: 500;
  color: var(--text-label);
}

/* ── Date/time picker icon ── */
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator {
  opacity: 0.5;
  filter: none;
}
[data-theme="dark"] input[type="date"]::-webkit-calendar-picker-indicator,
[data-theme="dark"] input[type="time"]::-webkit-calendar-picker-indicator {
  filter: invert(1);
  opacity: 0.7;
}

/* ── Flash ── */
.flash-success {
  background-color: var(--flash-success-bg) !important;
  border-color: var(--flash-success-border) !important;
  color: var(--flash-success-text) !important;
}
.flash-error {
  background-color: var(--flash-error-bg) !important;
  border-color: var(--flash-error-border) !important;
  color: var(--flash-error-text) !important;
}

/* ── Generic cards ── */
.theme-card {
  background-color: var(--bg-card);
  border: 1px solid var(--border-base);
  box-shadow: var(--shadow-card);
  transition: background-color 0.35s ease, box-shadow 0.2s ease;
}
.theme-card:hover {
  box-shadow: var(--shadow-card-hover);
}
.theme-card-2 { background-color: var(--bg-card2); }

/* ── Text helpers ── */
.theme-text          { color: var(--text-primary) !important; }
.theme-text-muted    { color: var(--text-secondary) !important; }
.theme-text-caption  { color: var(--text-caption) !important; }
.theme-text-gold     { color: var(--gold-500) !important; }

/* ── Theme Toggle Button ── */
#themeToggleBtn {
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--logout-bg);
  border: 1px solid var(--border-base);
  cursor: pointer;
  transition: background-color 0.2s ease, transform 0.35s ease, box-shadow 0.2s ease;
  font-size: 14px;
  line-height: 1;
}
#themeToggleBtn:hover {
  background-color: var(--logout-hover);
  transform: scale(1.12) rotate(20deg);
  box-shadow: 0 2px 8px rgba(100,70,30,0.15);
}

/* ── Logout / icon buttons (header) ── */
.logout-btn {
  background-color: var(--logout-bg) !important;
  color: var(--text-secondary) !important;
  transition: background-color 0.2s ease;
}
.logout-btn:hover {
  background-color: var(--logout-hover) !important;
}


/* ── Smooth global transitions ── */
#master-container, header, nav, aside, #moreMenuDrawer,
.theme-card, .login-card, .responsive-table tr {
  transition: background-color 0.35s ease, border-color 0.35s ease, color 0.35s ease, box-shadow 0.2s ease;
}

/* ================================================================
   LIGHT MODE — Override semua Tailwind dark hardcode
   ================================================================ */

/* ── 1. Reset global border color agar tidak hitam polos ── */
:root:not([data-theme="dark"]) * { border-color: var(--border-base); }
:root:not([data-theme="dark"]) .border-transparent,
:root:not([data-theme="dark"]) .border-transparent * { border-color: transparent !important; }

/* ── 2. Background Dark (Menangkap semua statur: hover, focus, checked, dll) ── */
:root:not([data-theme="dark"]) [class*="bg-army-"],
:root:not([data-theme="dark"]) [class*="bg-dark-950"],
:root:not([data-theme="dark"]) [class*="bg-dark-900"],
:root:not([data-theme="dark"]) [class*="bg-dark-800"],
:root:not([data-theme="dark"]) [class*="bg-dark-700"],
:root:not([data-theme="dark"]) [class*="bg-dark-600"],
:root:not([data-theme="dark"]) [class*="bg-[#1A1A1A]"],
:root:not([data-theme="dark"]) [class*="bg-[#121212]"],
:root:not([data-theme="dark"]) [class*="bg-[#0a0a0a]"],
:root:not([data-theme="dark"]) [class*="bg-[#0C0C0C]"],
:root:not([data-theme="dark"]) [class*="bg-[#222222]"],
:root:not([data-theme="dark"]) [class*="bg-[#1c1c1c]"],
:root:not([data-theme="dark"]) [class*="bg-[#111]"],
:root:not([data-theme="dark"]) [class*="bg-[#12100E]"],
:root:not([data-theme="dark"]) [class*="bg-[#2A2621]"],
:root:not([data-theme="dark"]) [class*="bg-[#3d1a1a]"],
:root:not([data-theme="dark"]) [class*="bg-[#16273e]"],
:root:not([data-theme="dark"]) [class*="bg-black"] {
  background-color: var(--bg-card) !important;
}

/* ── 3. Background Semi-transparent (Overlays, dsb) ── */
:root:not([data-theme="dark"]) [class*="bg-dark-900/"],
:root:not([data-theme="dark"]) [class*="bg-dark-800/"],
:root:not([data-theme="dark"]) [class*="bg-dark-700/"] {
  background-color: rgba(139,115,85,0.07) !important;
}
:root:not([data-theme="dark"]) [class*="bg-white/5"],
:root:not([data-theme="dark"]) [class*="bg-white/10"] {
  background-color: rgba(139,115,85,0.05) !important;
}

/* ── 4. Gradient Overrides ── */
:root:not([data-theme="dark"]) [class*="from-army-"],
:root:not([data-theme="dark"]) [class*="from-dark-"],
:root:not([data-theme="dark"]) [class*="from-[#2A2621]"],
:root:not([data-theme="dark"]) [class*="from-[#1A1A1A]"],
:root:not([data-theme="dark"]) [class*="from-[#121212]"],
:root:not([data-theme="dark"]) [class*="from-[#12100E]"],
:root:not([data-theme="dark"]) [class*="from-[#0C0C0C]"],
:root:not([data-theme="dark"]) [class*="from-[#0a0a0a]"] {
  --tw-gradient-from: var(--bg-card) !important;
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important;
}
:root:not([data-theme="dark"]) [class*="to-army-"],
:root:not([data-theme="dark"]) [class*="to-dark-"],
:root:not([data-theme="dark"]) [class*="to-[#12100E]"],
:root:not([data-theme="dark"]) [class*="to-[#121212]"],
:root:not([data-theme="dark"]) [class*="to-[#0a0a0a]"],
:root:not([data-theme="dark"]) [class*="to-[#2A2621]"] {
  --tw-gradient-to: var(--bg-card2) !important;
}

/* ── 5. Border Overrides ── */
:root:not([data-theme="dark"]) [class*="border-army-"],
:root:not([data-theme="dark"]) [class*="border-white/5"],
:root:not([data-theme="dark"]) [class*="border-white/10"],
:root:not([data-theme="dark"]) [class*="border-dark-"],
:root:not([data-theme="dark"]) .border-t,
:root:not([data-theme="dark"]) .border-b {
  border-color: var(--border-base) !important;
}
:root:not([data-theme="dark"]) [class*="border-red-500/10"] { border-color: rgba(220,53,69,0.15) !important; }

/* ── 6. Text Overrides ── */
:root:not([data-theme="dark"]) [class*="text-white"] { color: var(--text-primary) !important; }
:root:not([data-theme="dark"]) [class*="text-gray-100"],
:root:not([data-theme="dark"]) [class*="text-gray-200"] { color: var(--text-primary) !important; }
:root:not([data-theme="dark"]) [class*="text-gray-300"] { color: var(--text-label) !important; }
:root:not([data-theme="dark"]) [class*="text-gray-400"] { color: var(--text-secondary) !important; }
:root:not([data-theme="dark"]) [class*="text-gray-500"],
:root:not([data-theme="dark"]) [class*="text-gray-600"] { color: var(--text-caption) !important; }
:root:not([data-theme="dark"]) [class*="text-army-"] { color: var(--text-primary) !important; }
:root:not([data-theme="dark"]) [class*="text-dark-"] { color: var(--text-primary) !important; }

/* ── 7. Gold Adjustments ── */
:root:not([data-theme="dark"]) [class*="text-gold-500"] { color: var(--gold-500) !important; }
:root:not([data-theme="dark"]) [class*="text-gold-400"] { color: var(--gold-600) !important; }
:root:not([data-theme="dark"]) [class*="bg-gold-500/10"],
:root:not([data-theme="dark"]) [class*="bg-gold-500/20"] { background-color: var(--gold-bg) !important; }
:root:not([data-theme="dark"]) [class*="border-gold-500/"] { border-color: rgba(196,149,90,0.3) !important; }

/* ── 8. Status Badge Colors ── */
:root:not([data-theme="dark"]) [class*="bg-[#1a2f1c]"]  { background-color: #e6f5ea !important; }
:root:not([data-theme="dark"]) [class*="text-[#4ade80]"] { color: #1a6b35 !important; }
:root:not([data-theme="dark"]) [class*="bg-[#3f2b10]"]  { background-color: #fdf3e3 !important; }
:root:not([data-theme="dark"]) [class*="text-[#fcd34d]"] { color: #92660a !important; }
:root:not([data-theme="dark"]) [class*="bg-green-500/20"] { background-color: #e6f5ea !important; }
:root:not([data-theme="dark"]) [class*="text-green-400"]   { color: #1a6b35 !important; }
:root:not([data-theme="dark"]) [class*="border-green-500/"] { border-color: rgba(52,168,83,0.3) !important; }

/* ── 9. Divide lines ── */
:root:not([data-theme="dark"]) [class*="divide-white/"] > * + * {
  border-color: var(--border-base) !important;
}

/* ── 10. Active nav ── */
:root:not([data-theme="dark"]) .bg-gold-500.text-dark-900 {
  background-color: var(--gold-500) !important;
  color: #faf7f4 !important;
}

/* ── 14. Login page ── */
.login-card {
  background-color: var(--bg-card);
  border: 1px solid var(--border-base);
  box-shadow: var(--shadow-elevated);
  transition: background-color 0.35s ease;
}
[data-theme="dark"] .login-card {
  box-shadow: 0 25px 60px rgba(0,0,0,0.5), 0 0 0 1px rgba(230,192,148,0.05);
}
.login-input {
  background-color: var(--bg-input) !important;
  color: var(--text-primary) !important;
  border-color: var(--border-input) !important;
}
.login-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  background-color: var(--bg-outer) !important;
  background: radial-gradient(ellipse at 50% 0%, rgba(196,149,90,0.10) 0%, var(--bg-outer) 65%) !important;
  transition: background 0.35s ease;
}
[data-theme="dark"] .login-page {
  background: radial-gradient(ellipse at 50% 0%, rgba(230,192,148,0.06) 0%, #0C0C0C 65%) !important;
}