/*
 * theme.css — Memberarea Theme System
 * 5 tema warna × 2 mode (dark/light)
 * Selector: body.theme-WARNA.theme-dark / body.theme-WARNA-light
 *
 * Variabel yang tersedia:
 *   --mlm-theme-color        warna aksen utama
 *   --mlm-theme-color-2      warna aksen sekunder / gelap
 *   --mlm-theme-color-rgb    rgb value aksen utama (untuk rgba())
 *   --mlm-theme-color-grad-1 gradient terang
 *   --mlm-theme-color-grad-2 gradient gelap
 *   --mlm-theme-bordercolor  warna border dengan opacity
 *   --mlm-theme-text         teks di atas aksen (biasanya #000 atau #fff)
 *   --mlm-page-bg            background halaman
 *   --mlm-page-bg-2          background card / surface
 *   --mlm-page-text          teks utama halaman
 *   --mlm-page-text-muted    teks sekunder / abu
 *   --mlm-card-bg            background card komponen
 *   --mlm-card-border        border card
 *   --mlm-input-bg           background input
 *   --mlm-input-border       border input
 *   --mlm-input-text         teks input
 *   --mlm-footer-bg          background nav bawah
 *   --mlm-footer-text        teks nav bawah (inactive)
 *   --mlm-footer-text-active teks nav bawah (active)
 *   --mlm-rounded            border-radius komponen
 *   --mlm-padding            padding layout
 */

/* ================================================================
   BASE — nilai default & konstanta
   ================================================================ */
:root {
  --mlm-rounded:  15px;
  --mlm-padding:  15px;
  --mlm-input-rounded: 10px;
  --mlm-green:    #22c55e;
  --mlm-red:      #ef4444;
  --mlm-yellow:   #f59e0b;
  --mlm-blue-fix: #3b82f6;
}

:root .row > *,
:root .container,
:root .container-fluid {
  padding-left: var(--mlm-padding);
  padding-right: var(--mlm-padding);
}

/* ================================================================
   GOLD — #c9a227
   ================================================================ */
body.theme-gold-dark {
  --mlm-theme-color:       #c9a227;
  --mlm-theme-color-2:     #8a6c00;
  --mlm-theme-color-rgb:   201, 162, 39;
  --mlm-theme-color-grad-1:#e2b93b;
  --mlm-theme-color-grad-2:#8a6c00;
  --mlm-theme-bordercolor: rgba(201,162,39,.25);
  --mlm-theme-text:        #000000;
  --mlm-sidebar-bg:        #181400;
  --mlm-sidebar-bg-2:      #3b3304;

  --mlm-page-bg:           #0d0b00;
  --mlm-page-bg-2:         #1c1800;
  --mlm-page-text:         #e8d8a0;
  --mlm-page-text-muted:   #8a7a40;

  --mlm-card-bg:           #1c1800;
  --mlm-card-border:       rgba(201,162,39,.2);

  --mlm-input-bg:          #151200;
  --mlm-input-border:      rgba(201,162,39,.3);
  --mlm-input-text:        #e8d8a0;

  --mlm-footer-bg:         #0e0d00;
  --mlm-footer-text:       rgba(201,162,39,.45);
  --mlm-footer-text-active:#c9a227;
}

body.theme-gold-light {
  --mlm-theme-color:       #b8860b;
  --mlm-theme-color-2:     #8a6400;
  --mlm-theme-color-rgb:   184, 134, 11;
  --mlm-theme-color-grad-1:#c9a227;
  --mlm-theme-color-grad-2:#8a6400;
  --mlm-theme-bordercolor: rgba(184,134,11,.2);
  --mlm-theme-text:        #ffffff;
  --mlm-sidebar-bg:        #181400;
  --mlm-sidebar-bg-2:      #3b3304;

  --mlm-page-bg:           #fdf8ec;
  --mlm-page-bg-2:         #f5edcc;
  --mlm-page-text:         #1a1200;
  --mlm-page-text-muted:   #6b5e2a;

  --mlm-card-bg:           #fef9e7;
  --mlm-card-border:       rgba(184,134,11,.2);

  --mlm-input-bg:          #fffdf5;
  --mlm-input-border:      rgba(184,134,11,.25);
  --mlm-input-text:        #1a1200;

  --mlm-footer-bg:         #ffffff;
  --mlm-footer-text:       rgba(0,0,0,.38);
  --mlm-footer-text-active:#b8860b;
}

/* ================================================================
   BLUE — #3b82f6
   ================================================================ */
body.theme-blue-dark {
  --mlm-theme-color:       #3b82f6;
  --mlm-theme-color-2:     #1d4ed8;
  --mlm-theme-color-rgb:   59, 130, 246;
  --mlm-theme-color-grad-1:#60a5fa;
  --mlm-theme-color-grad-2:#1d4ed8;
  --mlm-theme-bordercolor: rgba(59,130,246,.25);
  --mlm-theme-text:        #ffffff;
  --mlm-sidebar-bg:        #050d1f;
  --mlm-sidebar-bg-2:      #13315f;

  --mlm-page-bg:           #050d1a;
  --mlm-page-bg-2:         #0a1628;
  --mlm-page-text:         #bfdbfe;
  --mlm-page-text-muted:   #4b7ab5;

  --mlm-card-bg:           #0d1f3c;
  --mlm-card-border:       rgba(59,130,246,.2);

  --mlm-input-bg:          #071226;
  --mlm-input-border:      rgba(59,130,246,.3);
  --mlm-input-text:        #bfdbfe;

  --mlm-footer-bg:         #050d1a;
  --mlm-footer-text:       rgba(59,130,246,.45);
  --mlm-footer-text-active:#3b82f6;
}

body.theme-blue-light {
  --mlm-theme-color:       #2563eb;
  --mlm-theme-color-2:     #1d4ed8;
  --mlm-theme-color-rgb:   37, 99, 235;
  --mlm-theme-color-grad-1:#3b82f6;
  --mlm-theme-color-grad-2:#1d4ed8;
  --mlm-theme-bordercolor: rgba(37,99,235,.18);
  --mlm-theme-text:        #ffffff;
  --mlm-sidebar-bg:        #050d1f;
  --mlm-sidebar-bg-2:      #13315f;

  --mlm-page-bg:           #fdfeff;
  --mlm-page-bg-2:         #dbeafe;
  --mlm-page-text:         #1e3a5f;
  --mlm-page-text-muted:   #4b7ab5;

  --mlm-card-bg:           #fdfeff;
  --mlm-card-border:       rgba(37,99,235,.12);

  --mlm-input-bg:          #f8faff;
  --mlm-input-border:      rgba(37,99,235,.22);
  --mlm-input-text:        #1e3a5f;

  --mlm-footer-bg:         #ffffff;
  --mlm-footer-text:       rgba(0,0,0,.38);
  --mlm-footer-text-active:#2563eb;
}

/* ================================================================
   GREEN — #16a34a
   ================================================================ */
body.theme-green-dark {
  --mlm-theme-color:       #22c55e;
  --mlm-theme-color-2:     #15803d;
  --mlm-theme-color-rgb:   34, 197, 94;
  --mlm-theme-color-grad-1:#4ade80;
  --mlm-theme-color-grad-2:#15803d;
  --mlm-theme-bordercolor: rgba(34,197,94,.25);
  --mlm-theme-text:        #000000;
  --mlm-sidebar-bg:        #021a08;
  --mlm-sidebar-bg-2:      #051a0e;
  --mlm-page-bg:           #021007;
  --mlm-page-bg-2:         #051a0e;
  --mlm-page-text:         #bbf7d0;
  --mlm-page-text-muted:   #3d8a5a;

  --mlm-card-bg:           #072912;
  --mlm-card-border:       rgba(34,197,94,.2);

  --mlm-input-bg:          #040f08;
  --mlm-input-border:      rgba(34,197,94,.3);
  --mlm-input-text:        #bbf7d0;

  --mlm-footer-bg:         #021007;
  --mlm-footer-text:       rgba(34,197,94,.45);
  --mlm-footer-text-active:#22c55e;
}

body.theme-green-light {
  --mlm-theme-color:       #16a34a;
  --mlm-theme-color-2:     #15803d;
  --mlm-theme-color-rgb:   22, 163, 74;
  --mlm-theme-color-grad-1:#22c55e;
  --mlm-theme-color-grad-2:#15803d;
  --mlm-theme-bordercolor: rgba(22,163,74,.18);
  --mlm-theme-text:        #ffffff;
  --mlm-sidebar-bg:        #021a08;
  --mlm-sidebar-bg-2:      #051a0e;
  --mlm-page-bg:           #f0fdf4;
  --mlm-page-bg-2:         #bbf7d0;
  --mlm-page-text:         #052e16;
  --mlm-page-text-muted:   #3d7a52;

  --mlm-card-bg:           #dcfce7;
  --mlm-card-border:       rgba(22,163,74,.12);

  --mlm-input-bg:          #f7fef9;
  --mlm-input-border:      rgba(22,163,74,.22);
  --mlm-input-text:        #052e16;

  --mlm-footer-bg:         #ffffff;
  --mlm-footer-text:       rgba(0,0,0,.38);
  --mlm-footer-text-active:#16a34a;
}

/* ================================================================
   PURPLE — #9333ea
   ================================================================ */
body.theme-purple-dark {
  --mlm-theme-color:       #a855f7;
  --mlm-theme-color-2:     #7e22ce;
  --mlm-theme-color-rgb:   168, 85, 247;
  --mlm-theme-color-grad-1:#c084fc;
  --mlm-theme-color-grad-2:#7e22ce;
  --mlm-theme-bordercolor: rgba(168,85,247,.25);
  --mlm-theme-text:        #ffffff;
  --mlm-sidebar-bg:        #0d0320;
  --mlm-sidebar-bg-2:      #120520;
  --mlm-page-bg:           #0a0314;
  --mlm-page-bg-2:         #120520;
  --mlm-page-text:         #e9d5ff;
  --mlm-page-text-muted:   #6b3fa0;

  --mlm-card-bg:           #180630;
  --mlm-card-border:       rgba(168,85,247,.2);

  --mlm-input-bg:          #0a0218;
  --mlm-input-border:      rgba(168,85,247,.3);
  --mlm-input-text:        #e9d5ff;

  --mlm-footer-bg:         #0a0314;
  --mlm-footer-text:       rgba(168,85,247,.45);
  --mlm-footer-text-active:#a855f7;
}

body.theme-purple-light {
  --mlm-theme-color:       #9333ea;
  --mlm-theme-color-2:     #7e22ce;
  --mlm-theme-color-rgb:   147, 51, 234;
  --mlm-theme-color-grad-1:#a855f7;
  --mlm-theme-color-grad-2:#7e22ce;
  --mlm-theme-bordercolor: rgba(147,51,234,.18);
  --mlm-theme-text:        #ffffff;
  --mlm-sidebar-bg:        #0d0320;
  --mlm-sidebar-bg-2:      #120520;
  --mlm-page-bg:           #faf5ff;
  --mlm-page-bg-2:         #e9d5ff;
  --mlm-page-text:         #2e1065;
  --mlm-page-text-muted:   #6b3fa0;

  --mlm-card-bg:           #f3e8ff;
  --mlm-card-border:       rgba(147,51,234,.12);

  --mlm-input-bg:          #fdf8ff;
  --mlm-input-border:      rgba(147,51,234,.22);
  --mlm-input-text:        #2e1065;

  --mlm-footer-bg:         #ffffff;
  --mlm-footer-text:       rgba(0,0,0,.38);
  --mlm-footer-text-active:#9333ea;
}

/* ================================================================
   RED — #ef4444
   ================================================================ */
body.theme-red-dark {
  --mlm-theme-color:       #ef4444;
  --mlm-theme-color-2:     #b91c1c;
  --mlm-theme-color-rgb:   239, 68, 68;
  --mlm-theme-color-grad-1:#f87171;
  --mlm-theme-color-grad-2:#b91c1c;
  --mlm-theme-bordercolor: rgba(239,68,68,.25);
  --mlm-theme-text:        #ffffff;
  --mlm-sidebar-bg:        #1a0404;
--mlm-sidebar-bg-2:      #3b3304;

  --mlm-page-bg:           #100303;
  --mlm-page-bg-2:         #1c0505;
  --mlm-page-text:         #fecaca;
  --mlm-page-text-muted:   #8a3a3a;

  --mlm-card-bg:           #200808;
  --mlm-card-border:       rgba(239,68,68,.2);

  --mlm-input-bg:          #120404;
  --mlm-input-border:      rgba(239,68,68,.3);
  --mlm-input-text:        #fecaca;

  --mlm-footer-bg:         #100303;
  --mlm-footer-text:       rgba(239,68,68,.45);
  --mlm-footer-text-active:#ef4444;
}

body.theme-red-light {
  --mlm-theme-color:       #dc2626;
  --mlm-theme-color-2:     #b91c1c;
  --mlm-theme-color-rgb:   220, 38, 38;
  --mlm-theme-color-grad-1:#ef4444;
  --mlm-theme-color-grad-2:#b91c1c;
  --mlm-theme-bordercolor: rgba(220,38,38,.18);
  --mlm-theme-text:        #ffffff;
  --mlm-sidebar-bg:        #1a0404;
  --mlm-sidebar-bg-2:      #3b3304;
  --mlm-page-bg:           #fff5f5;
  --mlm-page-bg-2:         #fecdd3;
  --mlm-page-text:         #450a0a;
  --mlm-page-text-muted:   #8a3a3a;

  --mlm-card-bg:           #fff1f2;
  --mlm-card-border:       rgba(220,38,38,.12);

  --mlm-input-bg:          #fffafa;
  --mlm-input-border:      rgba(220,38,38,.22);
  --mlm-input-text:        #450a0a;

  --mlm-footer-bg:         #ffffff;
  --mlm-footer-text:       rgba(0,0,0,.38);
  --mlm-footer-text-active:#dc2626;
}

/* ================================================================
   GLOBAL BASE STYLES
   Berlaku untuk semua tema — pakai variabel di atas
   ================================================================ */

/* Page background & base text */
body {
  background-color: var(--mlm-page-bg, #0d0b00);
  color: var(--mlm-page-text, #e8d8a0);
}
main {
    background: var(--mlm-page-bg);
    background: -moz-linear-gradient(45deg, var(--mlm-page-bg) 0%, var(--mlm-page-bg) 100%);
    background: -webkit-linear-gradient(45deg, var(--mlm-page-bg) 0%, var(--mlm-page-bg) 100%);
    background: linear-gradient(45deg, var(--mlm-page-bg) 0%, var(--mlm-page-bg) 100%);
    background-attachment: fixed;
}

.main-container {
  background-color: var(--mlm-page-bg, #0d0b00);
}

/* Global link color */
a {
  color: var(--mlm-theme-color);
}
a:hover {
  color: var(--mlm-theme-color-2);
  opacity: .85;
}

/* Input base */
input, textarea, select {
  background-color: var(--mlm-input-bg) !important;
  border-color: var(--mlm-input-border) !important;
  color: var(--mlm-input-text) !important;
}
input::placeholder, textarea::placeholder {
  color: var(--mlm-page-text-muted) !important;
  opacity: .6;
}

/* Nav bottom (nb-*) */
.nb {
  background: var(--mlm-footer-bg);
  border-top: 1px solid var(--mlm-card-border);
}
.nb-link i,
.nb-label,
.nb-fab-label {
  color: var(--mlm-footer-text);
}
.nb-link.active i,
.nb-link.active .nb-label {
  color: var(--mlm-footer-text-active);
}
.nb-link.active::before {
  background: var(--mlm-footer-text-active);
}

/* Scrollbar */
::-webkit-scrollbar { width: 4px; height: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--mlm-theme-bordercolor); border-radius: 4px; }

/* Button primary (reusable) */
.btn-theme {
  background: var(--mlm-theme-color);
  color: var(--mlm-theme-text) !important;
  border: none;
  border-radius: var(--mlm-input-rounded);
  font-weight: 700;
  transition: opacity .2s;
}
.btn-theme:hover { opacity: .85; color: var(--mlm-theme-text) !important; }

/* Bootstrap select2 & form overrides */
.select2-container--default .select2-selection--single {
  background-color: var(--mlm-input-bg) !important;
  border-color: var(--mlm-input-border) !important;
  color: var(--mlm-input-text) !important;
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
  color: var(--mlm-input-text) !important;
}
.select2-dropdown {
  background-color: var(--mlm-card-bg) !important;
  border-color: var(--mlm-card-border) !important;
}
.select2-container--default .select2-results__option {
  color: var(--mlm-page-text) !important;
}
.select2-container--default .select2-results__option--highlighted {
  background-color: var(--mlm-theme-color) !important;
  color: var(--mlm-theme-text) !important;
}