/*
 * Tema Swalayan: putih + biru. Satu-satunya tempat warna didefinisikan; semua halaman memuat file ini
 * sebelum gaya lainnya. Mengganti tema cukup di sini.
 * Latar halaman abu-kebiruan sangat muda, kartu putih, aksen & tombol utama biru (#2563eb).
 */
:root {
  color-scheme: light;

  /* Permukaan */
  --page-bg: #f4f7fc;          /* latar halaman */
  --card: #ffffff;             /* kartu / panel */
  --card-shadow: 0 1px 2px rgb(15 23 42 / .04), 0 2px 8px -2px rgb(30 64 175 / .08);
  --surface-0: #ffffff;        /* input, dialog, menu */
  --surface-1: #f6f9ff;        /* bidang muda di dalam kartu (gambar, footer dialog) */
  --border: #dde5f1;
  --grid: #eef2f9;

  /* Latar gambar barang: abu-kebiruan muda dengan ornamen silang (×) tipis (gaya C5) */
  --item-bg: #edf1f7;
  --item-pattern: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='26'%3E%3Cpath d='M10.5 10.5l5 5M15.5 10.5l-5 5' stroke='%2394a3b8' stroke-opacity='.55' stroke-width='1.2' stroke-linecap='round'/%3E%3C/svg%3E") 0 0 / 26px 26px repeat;

  /* Teks */
  --text-primary: #0f172a;
  --text-secondary: #475569;
  --text-muted: #64748b;

  /* Biru utama */
  --accent: #2563eb;
  --accent-strong: #1d4ed8;
  --accent-soft: #eff6ff;
  --accent-border: #bfdbfe;
  --focus-ring: 0 0 0 3px rgb(37 99 235 / .22);
  --series-1: #2563eb;

  /* Status */
  --critical: #dc2626;
  --critical-bg: #fee2e2;
  --good: #16a34a;
  --good-strong: #15803d;
  --good-bg: #dcfce7;
  --warning: #b45309;
  --warning-bg: #fef3c7;
  --info: #2563eb;
  --info-bg: #eff6ff;

  /* Tombol */
  --btn-primary-bg: #2563eb;
  --btn-primary-text: #ffffff;
  --btn-primary-hover: #1d4ed8;
  --btn-primary-weight: 600;
  --btn-primary-shadow: 0 1px 2px rgb(37 99 235 / .25);
  --btn-primary-shadow-hover: 0 6px 14px -4px rgb(37 99 235 / .45);
  --btn-primary-lift: -1px;
  --btn-secondary-bg: #ffffff;
  --btn-secondary-border: #d5dfee;
  --btn-secondary-text: #1e3a8a;
  --btn-secondary-hover-bg: #eff6ff;
  --btn-secondary-hover-border: #93c5fd;

  /* Sidebar: putih, menu aktif biru penuh */
  --sb-bg: #ffffff;
  --sb-border: #dde5f1;
  --sb-group: #94a3b8;
  --sb-text: #334155;
  --sb-icon: #64748b;
  --sb-hover-bg: #eff6ff;
  --sb-active-bg: #2563eb;
  --sb-active-text: #ffffff;
  --sb-active-border: #2563eb;
  --sb-overlay: rgb(15 23 42 / .45);
}

/* Fokus keyboard selalu terlihat (aksesibilitas) */
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: none; border-color: var(--accent); box-shadow: var(--focus-ring); }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* Panel filter berlapis (ala C5): biru tua bermotif belah ketupat, tab kecil di kiri atas, berisi bar kategori + filter.
   Dipakai Database item CS2 dan Skin Valorant agar bagian atas tidak terlalu putih. */
.filter-panel {
  --fp-bg: #0f2350;
  --fp-text: #dbe6ff;
  --fp-muted: #8fa6d6;
  position: relative;
  margin: 22px 0 16px;
  padding: 14px 12px 16px;
  border-radius: 0 12px 12px 12px;
  color: var(--fp-text);
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Cpath d='M12 0L24 12L12 24L0 12Z' fill='none' stroke='%23ffffff' stroke-opacity='.07' stroke-width='1'/%3E%3C/svg%3E") 0 0 / 24px 24px repeat,
    linear-gradient(160deg, #1e3a8a 0%, var(--fp-bg) 55%, #0b1a3d 100%);
  box-shadow: 0 10px 24px -12px rgb(15 35 80 / .55), inset 0 1px 0 rgb(255 255 255 / .06);
}
.filter-panel::before {
  content: ""; position: absolute; left: 0; bottom: 100%; width: 128px; height: 12px;
  background: #1e3a8a; clip-path: polygon(0 0, 82% 0, 100% 100%, 0 100%); border-radius: 8px 0 0 0;
}
.filter-panel > :last-child, .filter-panel form.filters { margin-bottom: 0; }
.filter-panel label { color: var(--fp-muted); }
.filter-panel .cat > button { color: var(--fp-text); }
.filter-panel .cat > button img { filter: drop-shadow(0 2px 4px rgb(0 0 0 / .45)); opacity: .9; }
.filter-panel .cat .count { color: var(--fp-muted); }
.filter-panel .cat > button:hover, .filter-panel .cat:focus-within > button, .filter-panel .cat.open > button { background: rgb(255 255 255 / .08); color: #fff; }
.filter-panel .cat > button[aria-pressed="true"] { background: rgb(96 165 250 / .16); border-color: #60a5fa; color: #fff; }
.filter-panel .cat > button[aria-pressed="true"] img { opacity: 1; }
.filter-panel .chip { border-color: #60a5fa; color: #bfdbfe; background: rgb(96 165 250 / .12); }
.filter-panel input, .filter-panel select { border-color: transparent; }
.filter-panel :focus-visible { outline-color: #93c5fd; }

/* Kolom angka tanpa panah naik/turun (semua halaman) */
input[type="number"] { -moz-appearance: textfield; appearance: textfield; }
input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }