/* Skala warna IPMan: color theme instalasi dan mode terang atau gelap per pengguna.
 *
 * Elemen <html> membawa dua atribut:
 * - data-theme: blue (bawaan), red, yellow, neutral. Diatur admin di Settings > Themes.
 * - data-mode: light atau dark. Pilihan pengguna di browser (System mengikuti OS).
 *
 * Setiap theme hanya mendefinisikan skala mentah --b-* (nilai mode terang). Token --p-*
 * yang dipakai CSS diturunkan dari --b-*; dark mode menurunkan tint dan nada teks
 * dengan color-mix terhadap permukaan gelap, sehingga semua theme otomatis punya
 * versi gelap tanpa definisi tambahan. Warna status (crit, warn, ok, vio) tidak ikut
 * theme agar arti merah, kuning, dan hijau tetap sama.
 */

/* ---------- theme bawaan: IPMan blue ---------- */
:root, [data-theme-preview="blue"] {
  --b-25: #F6F9FF; --b-50: #EEF4FF; --b-75: #E8F0FC; --b-100: #DCE8FF; --b-150: #CFE0F8; --b-200: #BFD3F2;
  --b-300: #8FB4E8; --b-400: #60A5FA; --b-500: #2563C9; --b-600: #1E4FA8; --b-700: #1E40AF;
  --b-800: #123E82; --b-850: #0B2E6B; --b-900: #0A2455; --b-950: #061B3D;
  /* Teks di atas warna primer, dan teks berwarna primer di atas permukaan. */
  --b-on: #FFFFFF;
  --b-text: var(--b-500);
  /* Titik awal gradien di belakang teks --on-p (logo app, ikon). */
  --b-grad: var(--b-850);
}

/* ---------- red ---------- */
:root[data-theme="red"], [data-theme-preview="red"] {
  --b-25: #FFF6F6; --b-50: #FFEFEF; --b-75: #FDE8E8; --b-100: #FBDADA; --b-150: #F7C9CB; --b-200: #F0B3B6;
  --b-300: #E77F86; --b-400: #F0525C; --b-500: #D71A2A; --b-600: #B3121F; --b-700: #9B111C;
  --b-800: #7A0E17; --b-850: #5C0A12; --b-900: #45070E; --b-950: #2B0409;
  --b-on: #FFFFFF;
  --b-text: var(--b-600);
  --b-grad: var(--b-850);
}

/* ---------- yellow: teks di atas kuning memakai warna gelap ---------- */
:root[data-theme="yellow"], [data-theme-preview="yellow"] {
  --b-25: #FFFBEE; --b-50: #FFF7DD; --b-75: #FFF2CC; --b-100: #FFEAA8; --b-150: #FFE08A; --b-200: #FBD467;
  --b-300: #F5C13A; --b-400: #FFCD1A; --b-500: #F2B705; --b-600: #C99400; --b-700: #7A5A00;
  --b-800: #3F3615; --b-850: #2E2810; --b-900: #221D0B; --b-950: #141107;
  --b-on: #1A1406;
  --b-text: var(--b-700);
  --b-grad: var(--b-600);
  /* Banner memakai pola cincin magenta ke kuning, bukan gradien gelap. */
  --b-magenta: #D6006F;
  --b-pink: #EE2A7B;
  --b-orange: #F7932A;
  --b-hero-ink: #A3004F;
}

/* ---------- neutral (graphite) ---------- */
:root[data-theme="neutral"], [data-theme-preview="neutral"] {
  --b-25: #F7F8FA; --b-50: #F1F3F6; --b-75: #ECEFF3; --b-100: #E2E6EC; --b-150: #D5DBE3; --b-200: #C3CBD6;
  --b-300: #98A3B3; --b-400: #6E7A8C; --b-500: #3F4B5C; --b-600: #343E4D; --b-700: #2B3440;
  --b-800: #222932; --b-850: #1A1F27; --b-900: #14181E; --b-950: #0C0F13;
  --b-on: #FFFFFF;
  --b-text: var(--b-500);
  --b-grad: var(--b-850);
}

/* ---------- mode terang (bawaan) ---------- */
:root {
  color-scheme: light;
  --p-25: var(--b-25); --p-50: var(--b-50); --p-75: var(--b-75); --p-100: var(--b-100); --p-150: var(--b-150);
  --p-200: var(--b-200); --p-300: var(--b-300); --p-400: var(--b-400); --p-500: var(--b-500); --p-600: var(--b-600);
  --p-700: var(--b-700); --p-800: var(--b-800); --p-850: var(--b-850); --p-900: var(--b-900); --p-950: var(--b-950);
  --on-p: var(--b-on);
  --p-text: var(--b-text);
  --p-grad: var(--b-grad);
  /* Teks gelap berwarna theme (judul, nama space, angka penting). */
  --p-strong: var(--b-850);

  --n-0: #FFFFFF; --n-25: #FAFBFD; --n-50: #F8FAFD; --n-75: #F3F5F9; --n-100: #EEF0F4; --n-150: #E5E8EE;
  --n-200: #DCE2EA; --n-300: #CBD3DE; --n-350: #B8C3D3; --n-400: #94A3B8; --n-500: #6B7280; --n-600: #4B5563;
  --n-700: #334155; --n-800: #1E293B; --n-900: #111827;
  /* Permukaan inverse (tooltip, label puncak): gelap di kedua mode. */
  --inv: #111827;

  --crit-500: #C62828; --crit-300: #F87171; --crit-700: #912018;
  --crit-50: #FEF3F2; --crit-100: #FDECEC; --crit-200: #F5C2BE;
  --warn-450: #E8820C; --warn-500: #D97706; --warn-300: #F4B860; --warn-700: #9A4A00;
  --warn-50: #FFF8EF; --warn-100: #FFF4E5; --warn-200: #F6DDBB;
  --ok-500: #16A34A; --ok-700: #15803D; --ok-300: #4ADE80;
  --ok-50: #F4FBF6; --ok-100: #E7F6EC; --ok-200: #BFE3CB;
  --vio-500: #6D28D9; --vio-700: #4C2A8A;
  --vio-50: #F5F3FF; --vio-100: #F0EAFE; --vio-200: #DDD6FE;
}

/* ---------- mode gelap ---------- */
:root[data-mode="dark"] {
  color-scheme: dark;
  --n-0: #141A24; --n-25: #171E29; --n-50: #1A212D; --n-75: #0D1219; --n-100: #222A37; --n-150: #2A3341;
  --n-200: #333D4D; --n-300: #445063; --n-350: #536077; --n-400: #6E7B90; --n-500: #97A2B3; --n-600: #B7C0CC;
  --n-700: #CDD4DE; --n-800: #DFE4EA; --n-900: #EEF1F5;
  --inv: #05080D;

  /* Tint primer: campuran warna theme dengan permukaan gelap. */
  --p-25: color-mix(in srgb, var(--b-500) 7%, var(--n-0));
  --p-50: color-mix(in srgb, var(--b-500) 11%, var(--n-0));
  --p-75: color-mix(in srgb, var(--b-500) 15%, var(--n-0));
  --p-100: color-mix(in srgb, var(--b-500) 20%, var(--n-0));
  --p-150: color-mix(in srgb, var(--b-500) 28%, var(--n-0));
  --p-200: color-mix(in srgb, var(--b-500) 38%, var(--n-0));
  --p-300: color-mix(in srgb, var(--b-400) 60%, var(--n-0));
  /* Nada teks primer dibuat terang agar terbaca di permukaan gelap. */
  --p-600: color-mix(in srgb, var(--b-400) 80%, #FFFFFF);
  --p-700: color-mix(in srgb, var(--b-400) 55%, #FFFFFF);
  --p-text: color-mix(in srgb, var(--b-400) 75%, #FFFFFF);
  --p-strong: color-mix(in srgb, var(--b-400) 35%, #FFFFFF);

  --crit-50: color-mix(in srgb, var(--crit-500) 12%, var(--n-0));
  --crit-100: color-mix(in srgb, var(--crit-500) 18%, var(--n-0));
  --crit-200: color-mix(in srgb, var(--crit-500) 40%, var(--n-0));
  --crit-700: #FCA5A5;
  --warn-50: color-mix(in srgb, var(--warn-500) 10%, var(--n-0));
  --warn-100: color-mix(in srgb, var(--warn-500) 16%, var(--n-0));
  --warn-200: color-mix(in srgb, var(--warn-500) 36%, var(--n-0));
  --warn-700: #FCD34D;
  --ok-50: color-mix(in srgb, var(--ok-500) 10%, var(--n-0));
  --ok-100: color-mix(in srgb, var(--ok-500) 16%, var(--n-0));
  --ok-200: color-mix(in srgb, var(--ok-500) 36%, var(--n-0));
  --ok-700: #4ADE80;
  --vio-50: color-mix(in srgb, var(--vio-500) 12%, var(--n-0));
  --vio-100: color-mix(in srgb, var(--vio-500) 18%, var(--n-0));
  --vio-200: color-mix(in srgb, var(--vio-500) 40%, var(--n-0));
  --vio-700: #C4B5FD;

  --sh: 0 1px 2px rgba(0, 0, 0, .35), 0 6px 16px -12px rgba(0, 0, 0, .6);
  --sh2: 0 2px 6px rgba(0, 0, 0, .4), 0 18px 40px -22px rgba(0, 0, 0, .7);
}

/* Logo pelanggan: tampilkan yang sesuai mode bila keduanya ada. */
/* Tinggi tetap: SVG tanpa atribut ukuran tidak punya ukuran bawaan dan akan menjadi 0 px. */
.brand-logo { display: block; height: 30px; width: auto; max-width: 168px; object-fit: contain; object-position: left center; }
.brand-logo[data-logo-mode="dark"] { display: none; }
:root[data-mode="dark"] .brand-logo[data-logo-mode="dark"] { display: block; }
:root[data-mode="dark"] .brand-logo[data-logo-mode="light"].has-dark { display: none; }

/* Logo pelanggan di appbar: logo, garis pemisah, lalu nama produk. */
.brand-custom { display: flex; align-items: center; padding-right: 12px; margin-right: 2px; border-right: 1px solid var(--bd); }
.brand-custom[hidden] { display: none; }
.brand.has-custom-logo .brand-mark { display: none; }
.login-brand .brand-custom { padding-right: 10px; }
.login-brand.has-custom-logo .login-logo { display: none; }
.login-brand .brand-logo { height: 38px; max-width: 200px; }

/* Settings > Themes: kartu color theme dengan pratinjau mini. */
.theme-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 1100px) { .theme-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .theme-grid { grid-template-columns: minmax(0, 1fr); } }
.theme-card {
  display: flex; flex-direction: column; gap: 6px; padding: 10px; text-align: left; font: inherit; color: var(--tx);
  border: 1px solid var(--bd); border-radius: var(--r2); background: var(--sf); cursor: pointer;
  transition: border-color .12s, box-shadow .12s;
}
.theme-card:hover:not([disabled]) { border-color: var(--p-200); }
.theme-card.active { border-color: var(--p-500); box-shadow: 0 0 0 3px color-mix(in srgb, var(--p-500) 18%, transparent); }
.theme-card[disabled] { cursor: default; }
.theme-name { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 12.5px; }
.theme-card small { font-size: 11px; color: var(--t3); }
.theme-preview { display: flex; flex-direction: column; height: 92px; border-radius: 8px; overflow: hidden; border: 1px solid var(--bd); background: var(--sf2); }
.tp-bar { display: flex; align-items: center; gap: 5px; height: 16px; padding: 0 7px; background: var(--sf); border-bottom: 1px solid var(--bd); }
.tp-bar i { width: 9px; height: 9px; border-radius: 3px; background: linear-gradient(160deg, var(--b-grad), var(--b-500)); }
.tp-bar b { width: 30px; height: 4px; border-radius: 2px; background: var(--n-300); }
.tp-bar em { margin-left: auto; width: 18px; height: 7px; border-radius: 4px; background: var(--b-100); }
.tp-hero { display: flex; flex-direction: column; justify-content: center; gap: 4px; height: 30px; padding: 0 8px; background: linear-gradient(135deg, var(--b-850), var(--b-800) 60%, var(--b-500)); }
.tp-hero i { width: 22px; height: 3px; border-radius: 2px; background: var(--warn-300); }
.tp-hero b { width: 54px; height: 5px; border-radius: 2px; background: #FFFFFF; }
.tp-body { display: flex; align-items: center; gap: 6px; flex: 1; padding: 0 8px; }
.tp-btn { width: 34px; height: 13px; border-radius: 4px; background: var(--b-500); box-shadow: inset 0 0 0 20px transparent; position: relative; }
.tp-btn::after { content: ""; position: absolute; left: 8px; right: 8px; top: 5px; height: 3px; border-radius: 2px; background: var(--b-on); }
.tp-chip { width: 26px; height: 10px; border-radius: 5px; background: var(--b-75); border: 1px solid var(--b-150); }
.tp-line { flex: 1; height: 4px; border-radius: 2px; background: var(--n-200); }

/* Settings > Themes: logo terang dan gelap. */
.logo-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 760px) { .logo-grid { grid-template-columns: minmax(0, 1fr); } }
.logo-card { display: flex; flex-direction: column; gap: 8px; padding: 12px; border: 1px solid var(--bd); border-radius: var(--r2); background: var(--sf); }
.logo-card-head { display: flex; flex-direction: column; gap: 1px; font-size: 12.5px; }
.logo-card-head .muted { font-size: 11px; }
.logo-stage { display: grid; place-items: center; height: 96px; border-radius: 8px; border: 1px dashed var(--bd); padding: 12px; }
.logo-stage.light { background: #FFFFFF; border-color: #E5E8EE; }
.logo-stage.dark { background: #141A24; border-color: #2A3341; }
.logo-stage img { height: 56px; width: auto; max-width: 100%; object-fit: contain; }
.logo-fallback { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; color: #94A3B8; }
.logo-meta { font-size: 11px; }
.logo-actions { display: flex; gap: 6px; }
.logo-actions label.btn { cursor: pointer; }
.logo-actions label.btn:focus-within { outline: 2px solid var(--state-selected); outline-offset: 2px; }
.mode-switch button .i { width: 13px; height: 13px; }

/* Layar sempit: tombol mode pindah ke dialog akun (Appearance), logo pelanggan tanpa nama IPMan. */
@media (max-width: 640px) {
  .brand.has-custom-logo .brand-text { display: none; }
  .brand.has-custom-logo .brand-custom { padding-right: 0; border-right: 0; }
  .brand-logo { max-width: 120px; }
}
@media (max-width: 480px) {
  .appbar .mode-toggle { display: none; }
}

/* Theme yellow: banner (hero halaman, Visualized, dialog, login) memakai pola cincin
   konsentris magenta, pink, oranye, lalu kuning di kanan atas. Cincin dibuat dari
   pita putih transparan berulang sehingga tetap tajam di semua lebar. */
:root[data-theme="yellow"] .brand-hero,
:root[data-theme="yellow"] .viz-hero,
:root[data-theme="yellow"] .hero,
:root[data-theme="yellow"] .drawer-hero,
:root[data-theme="yellow"] .login-gate,
[data-theme-preview="yellow"] .tp-hero {
  background:
    repeating-radial-gradient(circle at 12% 92%, rgba(255, 255, 255, .055) 0 30px, rgba(255, 255, 255, 0) 30px 60px),
    radial-gradient(circle at 104% -20%, var(--b-400) 0%, var(--b-500) 22%, transparent 52%),
    radial-gradient(circle at 12% 92%, var(--b-magenta) 0%, var(--b-pink) 38%, transparent 70%),
    linear-gradient(105deg, var(--b-magenta) 0%, var(--b-pink) 46%, var(--b-orange) 82%, var(--b-400) 100%);
}
:root[data-theme="yellow"] .login-gate {
  background:
    repeating-radial-gradient(circle at 14% 78%, rgba(255, 255, 255, .05) 0 44px, rgba(255, 255, 255, 0) 44px 88px),
    radial-gradient(circle at 96% 4%, var(--b-400) 0%, var(--b-500) 18%, transparent 46%),
    radial-gradient(circle at 14% 78%, var(--b-magenta) 0%, var(--b-pink) 36%, transparent 68%),
    linear-gradient(115deg, var(--b-magenta) 0%, var(--b-pink) 48%, var(--b-orange) 80%, var(--b-400) 100%);
}
/* Cahaya blur bawaan login (navy dan ungu) tidak cocok dengan pola ini. */
:root[data-theme="yellow"] .login-gate::before,
:root[data-theme="yellow"] .login-gate::after { display: none; }
/* Elemen di dalam banner: teks putih, tombol transparan diberi dasar gelap tipis agar
   tetap terbaca di bagian oranye dan kuning, tombol putih memakai tinta magenta. */
:root[data-theme="yellow"] :is(.brand-hero, .viz-hero, .hero, .drawer-hero) :is(p, .eyebrow .mono, .viz-hero-eyebrow) { color: rgba(255, 255, 255, .9); }
:root[data-theme="yellow"] :is(.brand-hero, .viz-hero, .hero) .eyebrow,
:root[data-theme="yellow"] .drawer-hero .eyebrow { color: #FFF3B0; }
:root[data-theme="yellow"] :is(.brand-hero, .viz-hero, .hero, .drawer-hero) :is(.btn:not(.primary):not(.on-dark), .icon-btn, .brand-hero-icon, .viz-hero-icon, .hero-icon, .badge, .chip) {
  background: rgba(90, 0, 45, .26); border-color: rgba(255, 255, 255, .5); color: #FFFFFF;
}
:root[data-theme="yellow"] :is(.brand-hero, .viz-hero, .hero, .drawer-hero) :is(.btn:not(.primary):not(.on-dark), .icon-btn):hover { background: rgba(90, 0, 45, .4); }
:root[data-theme="yellow"] :is(.brand-hero, .viz-hero, .hero, .obs-bulk-fixed) :is(.btn.primary, .btn.on-dark) { color: var(--b-hero-ink); }

/* Settings > License. */
.lic-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
@media (max-width: 900px) { .lic-grid { grid-template-columns: minmax(0, 1fr); } }
.lic-side { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.lic-term { padding: 12px 14px; border: 1px solid var(--bd2); border-radius: var(--r3); background: var(--sf2); }
.lic-term-head { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; color: var(--t2); }
.lic-term-head b { font-size: 24px; color: var(--tx); }
.lic-term-used { margin-left: auto; font-size: 11px; }
.lic-usage { display: inline-flex; align-items: center; gap: 8px; min-width: 160px; }
.lic-usage-track { flex: 1; height: 6px; border-radius: 999px; background: var(--n-100); overflow: hidden; min-width: 60px; }
.lic-usage-track.wide { margin-top: 8px; }
.lic-usage-track i { display: block; height: 100%; background: var(--p-500); }
.lic-usage .mono { font-size: 11px; }
.lic-ids .drow { grid-template-columns: 150px minmax(0, 1fr); font-size: 11.5px; }
.lic-ids .drow dd { overflow-wrap: anywhere; }
.lic-notice { display: flex; align-items: flex-start; gap: 8px; margin-top: 12px; padding: 10px 12px; border-radius: var(--r3); font-size: 11.5px; border: 1px solid; }
.lic-notice .i { width: 16px; height: 16px; flex: none; margin-top: 1px; }
.lic-notice.warn { background: var(--warn-100); border-color: var(--warn-200); color: var(--warn-700); }
.lic-notice.crit { background: var(--crit-100); border-color: var(--crit-200); color: var(--crit-700); }
.lic-notice.info { background: var(--p-50); border-color: var(--p-150); color: var(--p-700); }
.lic-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 900px) { .lic-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.lic-tile { display: flex; flex-direction: column; gap: 3px; padding: 12px 14px; border: 1px solid var(--bd2); border-radius: var(--r3); background: var(--sf); min-width: 0; }
.lic-tile.strong { border-color: var(--p-150); background: var(--p-50); }
.lic-tile-label { font-size: 9.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--t3); }
.lic-tile.strong .lic-tile-label { color: var(--p-700); }
.lic-tile b { font-family: var(--mono); font-size: 22px; color: var(--tx); }
.lic-tile.strong b { font-size: 26px; color: var(--p-strong); }
.lic-tile small { font-size: 11px; color: var(--t3); }
.lic-server { margin: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; font-size: 12px; }
@media (max-width: 900px) { .lic-server { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.lic-server dt { font-size: 11px; color: var(--t3); }
.lic-server dd { margin: 3px 0 0; overflow-wrap: anywhere; }
th.num, td.num { text-align: right; }

/* Global search: status pencarian di atas hasil. */
.palette-status { margin: 6px 8px 2px; padding: 7px 10px; border-radius: var(--r3); font-size: 11.5px; color: var(--t2); background: var(--sf2); border: 1px solid var(--bd2); }
.palette-status.warn { color: var(--warn-700); background: var(--warn-100); border-color: var(--warn-200); }
.palette-status.crit { color: var(--crit-700); background: var(--crit-100); border-color: var(--crit-200); }