/* ════════════════════════════════════════════════════════════════
   SANAPATI — Palet Platform Layanan Publik BSSN (expo-layanan.bssn.go.id)
   Dimuat paling akhir: menimpa token di sanapati-theme.css dan
   sanapati-design-system.css, plus chrome navbar/footer.

     Navy header/footer  #263053
     Navy gelap (judul)  #1E2743
     Latar halaman       #F8FAFC
     Abu tombol          #CFD6DD  (teks #2C3340)
     Teks header redup   #D3DAEF · teks footer #8693AD
     Emas lambang        #FBC143 (sorot, tetap dari DWS)

   Warna status (hijau/kuning/merah, Predikat PKO) sengaja tidak diubah
   karena membawa makna. Untuk kembali ke tampilan lama, cukup lepas
   <link> file ini di layouts/app.blade.php.
   ════════════════════════════════════════════════════════════════ */

:root {
  --pal-navy:        #263053;
  --pal-navy-dark:   #1E2743;
  --pal-navy-2:      #34406A;
  --pal-bg:          #F8FAFC;
  --pal-gray:        #CFD6DD;
  --pal-gray-hover:  #BFC8D1;
  --pal-gray-text:   #2C3340;
  --pal-on-navy:     #FFFFFF;
  --pal-on-navy-2:   #D3DAEF;
  --pal-on-navy-3:   #8693AD;

  /* design-system tokens */
  --bg:           var(--pal-bg);
  --text-1:       var(--pal-navy-dark);
  --border-2:     var(--pal-gray);
  --accent:       var(--pal-navy);
  --accent-dark:  var(--pal-navy-dark);

  /* sanapati-theme tokens */
  --sn-bg-primary:          var(--pal-bg);
  --sn-bg-elevated:         var(--pal-bg);
  --sn-text-primary:        var(--pal-navy-dark);
  --sn-text-accent:         var(--pal-navy);
  --sn-table-header-bg:     var(--pal-navy);
  --sn-table-header-sub-bg: var(--pal-navy-2);
  --sn-node-uo-bg:          var(--pal-navy);
  --sn-node-output-text:    var(--pal-navy);

  /* resources/css/app.css ("Soft Cloud" stone hangat → netral sejuk) */
  --bg-surface-1:      var(--pal-bg);
  --bg-surface-2:      #F1F4F9;
  --bg-surface-3:      #E5EAF2;
  --text-primary:      var(--pal-navy-dark);
  --text-secondary:    #667085;
  --border-subtle:     #E3E8EF;
  --border-interactive: var(--pal-gray);
  --grid-color:        rgba(38, 48, 83, 0.03);
}

/* ── Navbar: bilah navy seperti header expo ── */
:root:not(.dark) .sn-navbar {
  background: var(--pal-navy);
  border-bottom-color: rgba(255, 255, 255, 0.08);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  /* token lokal: semua yang berada di bilah memakai versi "di atas navy" */
  --sn-accent:           #FBC143;
  --sn-accent-subtle:    rgba(251, 193, 67, 0.12);
  --sn-accent-border:    rgba(251, 193, 67, 0.35);
  --sn-text-primary:     var(--pal-on-navy);
  --sn-text-secondary:   var(--pal-on-navy-2);
  --sn-text-muted:       var(--pal-on-navy-3);
  --sn-chrome-link:      var(--pal-on-navy);
  --sn-chrome-link-bg:   rgba(255, 255, 255, 0.08);
  --sn-chrome-border:    rgba(255, 255, 255, 0.10);
  --sn-chrome-brand-sub: var(--pal-on-navy-3);
  --sn-chrome-bg-solid:  var(--pal-navy);
  --sn-border-subtle:    rgba(255, 255, 255, 0.08);
  --sn-border-normal:    rgba(255, 255, 255, 0.14);
}
:root:not(.dark) .sn-navbar .brand-name { color: var(--pal-on-navy); }

/* Panel dropdown tetap putih: kembalikan token terang di dalamnya */
:root:not(.dark) .sn-navbar .nav-drop-panel {
  --sn-chrome-bg-solid: #FFFFFF;
  --sn-chrome-border:   rgba(38, 48, 83, 0.12);
  --sn-accent:         var(--pal-navy);
  --sn-accent-subtle:  rgba(38, 48, 83, 0.06);
  --sn-accent-border:  rgba(38, 48, 83, 0.2);
  --sn-text-primary:   var(--pal-navy-dark);
  --sn-text-secondary: #4A5468;
  --sn-text-muted:     #667085;
  --sn-chrome-link:    var(--pal-navy-dark);
  --sn-chrome-link-bg: rgba(38, 48, 83, 0.05);
  --sn-border-subtle:  rgba(0, 0, 0, 0.06);
  --sn-border-normal:  rgba(0, 0, 0, 0.12);
}

/* Tombol Masuk: putih dengan teks navy di atas bilah navy (terang & gelap) */
:root .sn-navbar .nav-login-btn {
  background: #FFFFFF;
  color: var(--pal-navy);
  border-color: #FFFFFF;
  box-shadow: none;
}
:root .sn-navbar .nav-login-btn:hover {
  background: #E8ECF5;
  border-color: #E8ECF5;
  color: var(--pal-navy);
}

/* ── Footer: navy seperti footer expo ── */
:root:not(.dark) .sn-footer {
  background: var(--pal-navy);
  border-top-color: transparent;
  color: var(--pal-on-navy);
  --sn-accent:         #FBC143;
  --sn-accent-subtle:  rgba(251, 193, 67, 0.12);
  --sn-accent-border:  rgba(251, 193, 67, 0.35);
  --sn-bg-card:        rgba(255, 255, 255, 0.05);
  --sn-text-primary:   var(--pal-on-navy);
  --sn-text-secondary: var(--pal-on-navy-2);
  --sn-text-muted:     var(--pal-on-navy-3);
  --sn-chrome-link-bg: rgba(255, 255, 255, 0.08);
  --sn-border-subtle:  rgba(255, 255, 255, 0.10);
  --sn-border-normal:  rgba(255, 255, 255, 0.14);
}
:root:not(.dark) .sn-footer .footer-brand-name { color: var(--pal-on-navy); }

/* ════════════════════════════════════════════════════════════════
   MODE GELAP — keluarga navy yang sama dengan mode terang (#263053,
   hue 227°), hanya lebih gelap. Navbar & footer memakai navy yang
   persis sama dengan mode terang; latar & kartu satu-dua tingkat di
   bawahnya. Emas tetap jadi aksen karena kontrasnya tinggi di atas navy.
   ════════════════════════════════════════════════════════════════ */
:root.dark {
  --pal-d-bg:       #171D30;
  --pal-d-surface:  #1C233B;
  --pal-d-surface2: #202846;
  --pal-d-surface3: #263053;
  --pal-d-hover:    #2D3962;
  --pal-d-blue:     #7E8FCB;

  /* design-system tokens */
  --bg:        var(--pal-d-bg);
  --surface:   var(--pal-d-surface);
  --surface-2: var(--pal-d-surface2);
  --surface-3: var(--pal-d-surface3);
  --border:    rgba(211, 218, 239, 0.10);
  --border-2:  rgba(211, 218, 239, 0.16);
  --text-1:    #F1F3FA;
  --text-2:    #C3CAE0;
  --text-3:    #8F9AC0;

  /* sanapati-theme tokens */
  --sn-bg-primary:   var(--pal-d-bg);
  --sn-bg-secondary: var(--pal-d-surface);
  --sn-bg-card:      var(--pal-d-surface);
  --sn-bg-elevated:  var(--pal-d-surface3);
  --sn-bg-hover:     var(--pal-d-hover);
  --sn-bg-input:     var(--pal-d-surface2);
  --sn-text-primary:   #F1F3FA;
  --sn-text-secondary: #C3CAE0;
  --sn-text-muted:     #8F9AC0;
  --sn-border-subtle:  rgba(211, 218, 239, 0.08);
  --sn-border-normal:  rgba(211, 218, 239, 0.14);
  --sn-table-header-bg:     var(--pal-d-surface3);
  --sn-table-header-sub-bg: var(--pal-d-hover);
  --sn-table-row-even:  rgba(211, 218, 239, 0.025);
  --sn-table-border:    rgba(211, 218, 239, 0.08);
  --sn-chrome-bg:        var(--pal-navy);
  --sn-chrome-bg-solid:  var(--pal-navy);
  --sn-chrome-border:    rgba(255, 255, 255, 0.10);
  --sn-chrome-link:      #FFFFFF;
  --sn-chrome-link-bg:   rgba(255, 255, 255, 0.08);
  --sn-chrome-brand-sub: var(--pal-on-navy-3);

  /* resources/css/app.css */
  --bg-surface-1:       var(--pal-d-bg);
  --bg-surface-2:       var(--pal-d-surface);
  --bg-surface-3:       var(--pal-d-surface2);
  --text-primary:       #F1F3FA;
  --text-secondary:     #C3CAE0;
  --border-subtle:      rgba(211, 218, 239, 0.10);
  --border-interactive: rgba(211, 218, 239, 0.18);
  --grid-color:         rgba(211, 218, 239, 0.025);
}

/* Navbar & footer gelap: navy yang sama dengan mode terang */
:root.dark .sn-navbar {
  background: var(--pal-navy);
  border-bottom-color: rgba(255, 255, 255, 0.08);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
:root.dark .sn-navbar .brand-name,
:root.dark .sn-footer .footer-brand-name { color: #FFFFFF; }
:root.dark .sn-navbar .nav-drop-panel {
  --sn-chrome-bg-solid: var(--pal-d-surface);
  --sn-chrome-border:   rgba(211, 218, 239, 0.14);
  --sn-chrome-link:     #E3E7F3;
}
:root.dark .sn-footer {
  background: var(--pal-navy);
  border-top-color: transparent;
  --sn-bg-card: rgba(255, 255, 255, 0.05);
}