/* ============================================================
   FILE: C:\xampp\htdocs\wmsb2\assets\css\theme.css
   WMSB — Base theme variables
   Shared by both admin and public stylesheets.
   ============================================================ */

/* ── Light mode (default) ────────────────────────────────── */
:root, [data-theme="light"] {
  --content-bg:  #F0F2F5;
  --card-bg:     #FFFFFF;
  --card-border: #E5E7EB;
  --text-primary:#121212;
  --text-muted:  #6B7280;
  --navy:        #002147;
  --navy-deep:   #001530;
  --navy-mid:    #003070;
  --navy-light:  #0a3a8a;
  --amber:       #FFB800;
  --amber-deep:  #D69500;
  --amber-pale:  #FFF3C4;
  --bone:        #F9F9F9;
  --charcoal:    #121212;
}

/* ── Dark mode ───────────────────────────────────────────── */
[data-theme="dark"] {
  --content-bg:  #001530;
  --card-bg:     #002147;
  --card-border: rgba(255,184,0,.12);
  --text-primary:#F9F9F9;
  --text-muted:  #94A3B8;
}

/* ── High-contrast yellow ────────────────────────────────── */
[data-theme="yellow"] {
  --content-bg:  #1A1A00;
  --card-bg:     #000000;
  --card-border: #FFE600;
  --text-primary:#FFE600;
  --text-muted:  #CCCC00;
  --amber:       #FFE600;
  --navy:        #000033;
}

/* ── Admin dark mode overrides ───────────────────────────── */
[data-theme="dark"] .admin-sidebar { background: #000e20 !important; }
[data-theme="dark"] .admin-main    { background: #001530; }
[data-theme="dark"] .g-card        { background: rgba(0,33,71,.6); border-color: rgba(255,184,0,.12); }
[data-theme="dark"] .g-card-head   { background: rgba(0,21,48,.4); }
[data-theme="dark"] .g-card-head-title { color: #fff; }
[data-theme="dark"] .g-input       { background: rgba(0,21,48,.5); border-color: rgba(255,184,0,.15); color: #F9F9F9; }
[data-theme="dark"] .g-stat        { background: rgba(0,33,71,.5); border-color: rgba(255,184,0,.12); }
[data-theme="dark"] .g-stat-val    { color: #FFB800; }
[data-theme="dark"] .g-stat-label  { color: rgba(255,255,255,.5); }
[data-theme="dark"] .g-table-wrap  { background: rgba(0,21,48,.5); border-color: rgba(255,184,0,.1); }
[data-theme="dark"] .g-table thead th { background: rgba(0,21,48,.6); color: rgba(255,255,255,.5); border-color: rgba(255,184,0,.1); }
[data-theme="dark"] .g-table tbody td { color: rgba(255,255,255,.8); border-color: rgba(255,255,255,.06); }
[data-theme="dark"] .g-table tbody tr:hover td { background: rgba(255,184,0,.04); }
[data-theme="dark"] .g-btn-ghost   { color: rgba(255,255,255,.75); border-color: rgba(255,255,255,.15); }
[data-theme="dark"] .g-btn-ghost:hover { background: rgba(255,255,255,.08); }
[data-theme="dark"] .form-input, [data-theme="dark"] .filter-select { background: rgba(0,21,48,.6); border-color: rgba(255,184,0,.15); color: #F9F9F9; }

/* ── Create post form dark mode fixes ────────────────────── */
[data-theme="dark"] .type-card {
  background: rgba(0,33,71,.5) !important;
  border-color: rgba(255,184,0,.2) !important;
  color: rgba(255,255,255,.85);
}
[data-theme="dark"] .type-card.active {
  background: rgba(0,33,71,.85) !important;
  border-color: var(--amber) !important;
}
[data-theme="dark"] .type-card-label { color: rgba(255,255,255,.8) !important; }
[data-theme="dark"] .type-card.active .type-card-label { color: var(--amber) !important; }
[data-theme="dark"] .pill {
  color: rgba(255,255,255,.75) !important;
  border-color: rgba(255,255,255,.2) !important;
}
[data-theme="dark"] .pill:hover { color: var(--amber) !important; border-color: var(--amber) !important; }
[data-theme="dark"] .pill.active { color: var(--amber) !important; border-color: var(--amber) !important; background: rgba(255,184,0,.12) !important; }
[data-theme="dark"] .drop-zone {
  background: rgba(0,21,48,.4) !important;
  border-color: rgba(255,184,0,.2) !important;
}
[data-theme="dark"] .drop-zone-text { color: rgba(255,255,255,.7) !important; }
[data-theme="dark"] .g-toggle-label { color: rgba(255,255,255,.8) !important; }

/* ── Dashboard stat card dark mode ───────────────────────── */
[data-theme="dark"] .g-stat-val { color: var(--amber) !important; }
[data-theme="dark"] .g-stat-label { color: rgba(255,255,255,.6) !important; }
[data-theme="dark"] .g-stat { background: rgba(0,33,71,.6) !important; border-color: rgba(255,184,0,.15) !important; }

/* ── About page sections dark mode ──────────────────────── */
[data-theme="dark"] .about-section-card {
  background: rgba(0,21,48,.7) !important;
  border-color: rgba(255,184,0,.15) !important;
  color: rgba(255,255,255,.88);
}
[data-theme="dark"] .about-section-head { background: rgba(0,21,48,.4) !important; }
[data-theme="dark"] .about-section-head span { color: #fff !important; }
[data-theme="dark"] .g-select { background-color: rgba(0,21,48,.5) !important; color: #fff !important; }
[data-theme="dark"] option { background: #002147; color: #fff; }

/* ── Activity log dark mode ──────────────────────────────── */
[data-theme="dark"] .topbar-title { color: #fff !important; }

/* ── About page body text ─────────────────────────────────── */
/* Cards are always solid white in light/dark themes (for contrast against
   the photo backdrop), so heading/body colors stay fixed there too.
   High-contrast yellow theme is the exception — it needs its own black/yellow card. */
[data-theme="yellow"] .about-section { background: #000 !important; border-color: #FFE600 !important; }
[data-theme="yellow"] .about-heading { color: #FFE600 !important; }
[data-theme="yellow"] .about-body { color: #FFE600 !important; }