/* ============================================================================
   RT Digital — Sistem Token Tampilan  (v5 "Midnight Premium")

   Satu-satunya tempat warna, jarak, sudut, dan bayangan didefinisikan.
   assets/css/style.css (pengurus) dan assets/css/warga.css (warga/security)
   hanya MEMAKAI token di sini — jangan menulis nilai hex langsung di sana.

   Mode gelap mengikuti pengaturan perangkat secara otomatis
   (prefers-color-scheme). Token ditulis dua kali: sekali di dalam media query
   untuk setelan sistem, sekali di [data-bs-theme="dark"] supaya tetap benar
   bila suatu saat ditambahkan tombol pilih tema.
   ========================================================================== */

@import url('https://cdnjs.cloudflare.com/ajax/libs/inter-ui/3.19.3/inter.min.css');

/* ---------------------------------------------------------------- TERANG */
:root {
  color-scheme: light;

  /* Lapisan permukaan */
  --rt-bg:            #eef2f1;
  --rt-bg-tint:       radial-gradient(1200px 600px at 12% -10%, rgba(13,150,104,.10), transparent 60%),
                      radial-gradient(900px 500px at 100% 0%, rgba(217,180,95,.10), transparent 55%);
  --rt-surface:       #ffffff;
  --rt-surface-2:     #f7faf9;
  --rt-surface-3:     #eef3f1;
  --rt-surface-inset: #f2f6f5;

  /* Garis & pemisah */
  --rt-line:          rgba(11, 40, 32, .09);
  --rt-line-soft:     rgba(11, 40, 32, .06);
  --rt-line-strong:   rgba(11, 40, 32, .16);

  /* Teks */
  --rt-ink:           #0d1b17;
  --rt-ink-2:         #4a5c56;
  --rt-ink-3:         #7b8d87;
  --rt-ink-invert:    #ffffff;

  /* Merek */
  --rt-brand:         #0d9668;
  --rt-brand-2:       #34d399;
  --rt-brand-deep:    #07603f;
  --rt-brand-ink:     #ffffff;
  --rt-brand-soft:    rgba(13, 150, 104, .10);
  --rt-brand-line:    rgba(13, 150, 104, .28);

  /* Aksen emas — dipakai hemat, hanya untuk penanda & merek */
  --rt-gold:          #b8912f;
  --rt-gold-2:        #d9b45f;
  --rt-gold-soft:     rgba(184, 145, 47, .12);

  /* Status */
  --rt-ok:            #0f9d6e;
  --rt-ok-soft:       rgba(15, 157, 110, .12);
  --rt-warn:          #b45309;
  --rt-warn-soft:     rgba(180, 83, 9, .12);
  --rt-danger:        #c62828;
  --rt-danger-2:      #ef4444;
  --rt-danger-soft:   rgba(198, 40, 40, .10);
  --rt-info:          #2a78d6;
  --rt-info-soft:     rgba(42, 120, 214, .12);

  /* Warna seri grafik (tervalidasi untuk permukaan #ffffff) */
  --rt-seri-1:        #1baf7a;
  --rt-seri-2:        #2a78d6;
  --rt-seri-3:        #eb6834;
  --rt-grid:          rgba(11, 40, 32, .08);

  /* Panel sisi (sidebar) — tetap gelap di mode terang, sebagai jangkar visual */
  --rt-nav-bg:        linear-gradient(195deg, #0a5741 0%, #073527 55%, #05261c 100%);
  --rt-nav-ink:       rgba(255, 255, 255, .74);
  --rt-nav-ink-aktif: #ffffff;
  --rt-nav-hover:     rgba(255, 255, 255, .08);
  --rt-nav-aktif:     rgba(255, 255, 255, .13);
  --rt-nav-line:      rgba(255, 255, 255, .09);

  /* Kaca */
  --rt-glass:         rgba(255, 255, 255, .72);
  --rt-glass-line:    rgba(255, 255, 255, .6);

  /* Bayangan berlapis */
  --rt-shadow-1: 0 1px 2px rgba(9, 30, 24, .05), 0 1px 3px rgba(9, 30, 24, .04);
  --rt-shadow-2: 0 2px 4px rgba(9, 30, 24, .05), 0 8px 20px rgba(9, 30, 24, .07);
  --rt-shadow-3: 0 12px 34px rgba(9, 30, 24, .12), 0 2px 8px rgba(9, 30, 24, .06);
  --rt-shadow-brand: 0 10px 26px rgba(13, 150, 104, .26);
  --rt-shadow-danger: 0 10px 26px rgba(198, 40, 40, .24);
  --rt-inner-top: inset 0 1px 0 rgba(255, 255, 255, .7);
}

/* ------------------------------------------------- GELAP (Midnight Premium) */
@media (prefers-color-scheme: dark) {
  :root:where(:not([data-bs-theme="light"])) {
    color-scheme: dark;

    --rt-bg:            #060b11;
    --rt-bg-tint:       radial-gradient(1100px 620px at 10% -12%, rgba(16, 185, 129, .14), transparent 58%),
                        radial-gradient(900px 520px at 100% -6%, rgba(217, 180, 95, .09), transparent 55%);
    --rt-surface:       #101a24;
    --rt-surface-2:     #16222e;
    --rt-surface-3:     #1c2a38;
    --rt-surface-inset: #0c141c;

    --rt-line:          rgba(255, 255, 255, .09);
    --rt-line-soft:     rgba(255, 255, 255, .06);
    --rt-line-strong:   rgba(255, 255, 255, .18);

    --rt-ink:           #e9f1f7;
    --rt-ink-2:         #a3b6c4;
    --rt-ink-3:         #728695;
    --rt-ink-invert:    #06121b;

    --rt-brand:         #10b981;
    --rt-brand-2:       #34d399;
    --rt-brand-deep:    #059669;
    --rt-brand-ink:     #04201a;
    --rt-brand-soft:    rgba(16, 185, 129, .14);
    --rt-brand-line:    rgba(16, 185, 129, .38);

    --rt-gold:          #d9b45f;
    --rt-gold-2:        #f0d597;
    --rt-gold-soft:     rgba(217, 180, 95, .14);

    --rt-ok:            #34d399;
    --rt-ok-soft:       rgba(52, 211, 153, .14);
    --rt-warn:          #fbbf24;
    --rt-warn-soft:     rgba(251, 191, 36, .14);
    --rt-danger:        #f87171;
    --rt-danger-2:      #ef4444;
    --rt-danger-soft:   rgba(248, 113, 113, .14);
    --rt-info:          #60a5fa;
    --rt-info-soft:     rgba(96, 165, 250, .14);

    /* Warna seri grafik (tervalidasi untuk permukaan #101a24) */
    --rt-seri-1:        #199e70;
    --rt-seri-2:        #3987e5;
    --rt-seri-3:        #d95926;
    --rt-grid:          rgba(255, 255, 255, .08);

    --rt-nav-bg:        linear-gradient(195deg, #0c1720 0%, #070f16 60%, #050a0f 100%);
    --rt-nav-ink:       rgba(233, 241, 247, .66);
    --rt-nav-ink-aktif: #ffffff;
    --rt-nav-hover:     rgba(255, 255, 255, .06);
    --rt-nav-aktif:     rgba(16, 185, 129, .14);
    --rt-nav-line:      rgba(255, 255, 255, .07);

    --rt-glass:         rgba(22, 34, 46, .72);
    --rt-glass-line:    rgba(255, 255, 255, .08);

    --rt-shadow-1: 0 1px 2px rgba(0, 0, 0, .45);
    --rt-shadow-2: 0 2px 6px rgba(0, 0, 0, .45), 0 14px 32px rgba(0, 0, 0, .40);
    --rt-shadow-3: 0 20px 48px rgba(0, 0, 0, .60), 0 2px 10px rgba(0, 0, 0, .45);
    --rt-shadow-brand: 0 12px 30px rgba(16, 185, 129, .28);
    --rt-shadow-danger: 0 12px 30px rgba(239, 68, 68, .32);
    --rt-inner-top: inset 0 1px 0 rgba(255, 255, 255, .06);
  }
}

/* Salinan identik untuk pilihan tema eksplisit (mis. bila nanti ada tombol). */
:root[data-bs-theme="dark"] {
  color-scheme: dark;

  --rt-bg:            #060b11;
  --rt-bg-tint:       radial-gradient(1100px 620px at 10% -12%, rgba(16, 185, 129, .14), transparent 58%),
                      radial-gradient(900px 520px at 100% -6%, rgba(217, 180, 95, .09), transparent 55%);
  --rt-surface:       #101a24;
  --rt-surface-2:     #16222e;
  --rt-surface-3:     #1c2a38;
  --rt-surface-inset: #0c141c;

  --rt-line:          rgba(255, 255, 255, .09);
  --rt-line-soft:     rgba(255, 255, 255, .06);
  --rt-line-strong:   rgba(255, 255, 255, .18);

  --rt-ink:           #e9f1f7;
  --rt-ink-2:         #a3b6c4;
  --rt-ink-3:         #728695;
  --rt-ink-invert:    #06121b;

  --rt-brand:         #10b981;
  --rt-brand-2:       #34d399;
  --rt-brand-deep:    #059669;
  --rt-brand-ink:     #04201a;
  --rt-brand-soft:    rgba(16, 185, 129, .14);
  --rt-brand-line:    rgba(16, 185, 129, .38);

  --rt-gold:          #d9b45f;
  --rt-gold-2:        #f0d597;
  --rt-gold-soft:     rgba(217, 180, 95, .14);

  --rt-ok:            #34d399;
  --rt-ok-soft:       rgba(52, 211, 153, .14);
  --rt-warn:          #fbbf24;
  --rt-warn-soft:     rgba(251, 191, 36, .14);
  --rt-danger:        #f87171;
  --rt-danger-2:      #ef4444;
  --rt-danger-soft:   rgba(248, 113, 113, .14);
  --rt-info:          #60a5fa;
  --rt-info-soft:     rgba(96, 165, 250, .14);

  --rt-seri-1:        #199e70;
  --rt-seri-2:        #3987e5;
  --rt-seri-3:        #d95926;
  --rt-grid:          rgba(255, 255, 255, .08);

  --rt-nav-bg:        linear-gradient(195deg, #0c1720 0%, #070f16 60%, #050a0f 100%);
  --rt-nav-ink:       rgba(233, 241, 247, .66);
  --rt-nav-ink-aktif: #ffffff;
  --rt-nav-hover:     rgba(255, 255, 255, .06);
  --rt-nav-aktif:     rgba(16, 185, 129, .14);
  --rt-nav-line:      rgba(255, 255, 255, .07);

  --rt-glass:         rgba(22, 34, 46, .72);
  --rt-glass-line:    rgba(255, 255, 255, .08);

  --rt-shadow-1: 0 1px 2px rgba(0, 0, 0, .45);
  --rt-shadow-2: 0 2px 6px rgba(0, 0, 0, .45), 0 14px 32px rgba(0, 0, 0, .40);
  --rt-shadow-3: 0 20px 48px rgba(0, 0, 0, .60), 0 2px 10px rgba(0, 0, 0, .45);
  --rt-shadow-brand: 0 12px 30px rgba(16, 185, 129, .28);
  --rt-shadow-danger: 0 12px 30px rgba(239, 68, 68, .32);
  --rt-inner-top: inset 0 1px 0 rgba(255, 255, 255, .06);
}

/* --------------------------------------------------------------- ALIAS
   Nama variabel dari versi sebelumnya. Beberapa halaman masih memakainya
   pada atribut style inline, jadi dipetakan ke token baru supaya tetap
   ikut berganti warna di mode gelap.
   ------------------------------------------------------------------- */
:root {
  --w-primary:      var(--rt-brand);
  --w-primary-dark: var(--rt-brand-deep);
  --w-accent:       var(--rt-gold);
  --w-bg:           var(--rt-bg);
  --w-card:         var(--rt-surface);
  --w-radius:       var(--rt-r-lg);

  --app-primary:      var(--rt-brand);
  --app-primary-dark: var(--rt-brand-deep);
  --app-primary-light:var(--rt-brand-2);
  --app-accent:       var(--rt-gold);
  --app-bg:           var(--rt-bg);
  --app-ink:          var(--rt-ink);
  --card-radius:      var(--rt-r-lg);
}

/* -------------------------------------------------------------- GEOMETRI */
:root {
  --rt-r-sm: .5rem;
  --rt-r-md: .75rem;
  --rt-r-lg: 1.05rem;
  --rt-r-xl: 1.35rem;
  --rt-r-pill: 999px;

  --rt-font: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --rt-transisi: 160ms cubic-bezier(.2, .7, .3, 1);
}

/* ------------------------------------------------------------- DASAR */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--rt-font);
  background-color: var(--rt-bg);
  background-image: var(--rt-bg-tint);
  background-attachment: fixed;
  color: var(--rt-ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
  font-weight: 700;
  letter-spacing: -.014em;
  color: var(--rt-ink);
}

a { text-decoration: none; }

/* Angka uang & statistik sejajar rapi antar baris */
.rt-angka,
.card-stat .fs-4,
.w-stat-value,
td .badge,
.table td.text-end {
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
}

/* Cincin fokus yang konsisten & terlihat di kedua mode */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--rt-brand);
  outline-offset: 2px;
  border-radius: var(--rt-r-sm);
}

::selection { background: var(--rt-brand-soft); color: var(--rt-ink); }

/* Batang gulir */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--rt-line-strong);
  border-radius: var(--rt-r-pill);
  border: 2px solid transparent;
  background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover { background: var(--rt-ink-3); background-clip: content-box; }

/* Hormati pengguna yang mematikan animasi */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}


/* ============================================================ BOOTSTRAP
   Bootstrap 5.3 mewarnai komponennya lewat variabel --bs-*. Di sini
   variabel itu diarahkan ke token kita, sehingga komponen bawaan Bootstrap
   (kartu, tabel, formulir, dropdown, modal) otomatis ikut tema tanpa perlu
   ditimpa satu per satu.

   Berkas ini WAJIB dimuat SETELAH bootstrap.min.css.
   ==================================================================== */
:root,
:root[data-bs-theme="light"],
:root[data-bs-theme="dark"] {
  --bs-body-bg:            var(--rt-bg);
  --bs-body-color:         var(--rt-ink);
  --bs-emphasis-color:     var(--rt-ink);
  --bs-secondary-color:    var(--rt-ink-2);
  --bs-tertiary-color:     var(--rt-ink-3);
  --bs-secondary-bg:       var(--rt-surface-2);
  --bs-tertiary-bg:        var(--rt-surface-3);
  --bs-border-color:       var(--rt-line);
  --bs-heading-color:      var(--rt-ink);
  --bs-link-color:         var(--rt-brand);
  --bs-link-hover-color:   var(--rt-brand-2);
  --bs-code-color:         var(--rt-brand);
  --bs-highlight-bg:       var(--rt-warn-soft);

  --bs-card-bg:            var(--rt-surface);
  --bs-card-border-color:  var(--rt-line);
  --bs-card-cap-bg:        transparent;

  --bs-modal-bg:           var(--rt-surface);
  --bs-modal-border-color: var(--rt-line);
  --bs-modal-header-border-color: var(--rt-line);
  --bs-modal-footer-border-color: var(--rt-line);

  --bs-dropdown-bg:        var(--rt-surface);
  --bs-dropdown-border-color: var(--rt-line);
  --bs-dropdown-link-color: var(--rt-ink);
  --bs-dropdown-link-hover-bg: var(--rt-surface-3);

  --bs-list-group-bg:      transparent;
  --bs-list-group-color:   var(--rt-ink);
  --bs-list-group-border-color: var(--rt-line-soft);

  --bs-table-bg:           transparent;
  --bs-table-color:        var(--rt-ink);
  --bs-table-border-color: var(--rt-line);

  --bs-form-control-bg:    var(--rt-surface-inset);
  --bs-form-control-color: var(--rt-ink);

  --bs-primary:            var(--rt-brand);
  --bs-success:            var(--rt-ok);
  --bs-danger:             var(--rt-danger);
  --bs-warning:            var(--rt-warn);
  --bs-info:               var(--rt-info);
}

/* Latar dasar halaman ditetapkan ulang setelah Bootstrap. */
body {
  background-color: var(--rt-bg) !important;
  background-image: var(--rt-bg-tint);
  background-attachment: fixed;
  color: var(--rt-ink);
}