/* =============================================================================
 * NIPAH — styles.css
 * Networked Inventory Processing Asset Hub
 * Desain: modern light glassmorphism (Teal / Emerald / Slate)
 * Berisi komponen kustom yang melengkapi utility Tailwind.
 * ========================================================================== */

:root {
  --brand-500: #14a89a;
  --brand-600: #0c877e;
  --brand-700: #0d6b66;
  --ring: rgba(20, 168, 154, 0.28);

  /* Skala efek kaca: transparansi selalu dibaca sebagai buram, bukan tembus
     pandang. Setiap permukaan yang semi-transparan memakai salah satu token
     ini agar hasilnya seragam di seluruh aplikasi. */
  --frost-scrim: blur(22px) saturate(140%);
  --frost-float: blur(22px) saturate(165%);
  --frost-panel: blur(18px) saturate(155%);
  --frost-control: blur(12px) saturate(145%);
  --frost-inline: blur(8px) saturate(140%);
  /* Kaca tempat (tanpa saturasi) untuk elemen kecil di atas kaca lain */
  --frost-quiet: blur(10px);
}

/* ─────────────────────────────── DASAR ─────────────────────────────────── */

html { -webkit-tap-highlight-color: transparent; }

body {
  background-color: #f6f9f9;
  background-image:
    radial-gradient(1100px 520px at 8% -8%, rgba(45, 212, 191, 0.20), transparent 62%),
    radial-gradient(900px 480px at 100% 0%, rgba(16, 185, 129, 0.14), transparent 58%),
    radial-gradient(800px 620px at 50% 110%, rgba(56, 189, 248, 0.12), transparent 60%);
  background-attachment: fixed;
}

::selection { background: rgba(20, 168, 154, 0.22); }

/* Scrollbar halus */
.slim-scroll { scrollbar-width: thin; scrollbar-color: #c7d5d3 transparent; }
.slim-scroll::-webkit-scrollbar { width: 8px; height: 8px; }
.slim-scroll::-webkit-scrollbar-track { background: transparent; }
.slim-scroll::-webkit-scrollbar-thumb { background: #cbd9d7; border-radius: 99px; border: 2px solid transparent; background-clip: content-box; }
.slim-scroll::-webkit-scrollbar-thumb:hover { background: #a9c1be; background-clip: content-box; }

/* ─────────────────────── KARTU & PANEL (GLASS) ────────────────────────── */

.glass-panel {
  border-radius: 1.25rem;
  background: rgba(255, 255, 255, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.8);
  box-shadow: 0 1px 2px rgba(16, 71, 69, .04), 0 10px 30px -12px rgba(16, 71, 69, .18);
  backdrop-filter: var(--frost-panel);
  -webkit-backdrop-filter: var(--frost-panel);
}

.glass-card {
  border-radius: 1rem;
  background: rgba(255, 255, 255, 0.52);
  border: 1px solid rgba(255, 255, 255, 0.85);
  box-shadow: 0 1px 2px rgba(16, 71, 69, .04), 0 6px 18px -10px rgba(16, 71, 69, .16);
  backdrop-filter: var(--frost-control);
  -webkit-backdrop-filter: var(--frost-control);
  transition: transform .25s cubic-bezier(.22,1,.36,1), box-shadow .25s ease, background .25s ease;
}
.glass-card:hover { transform: translateY(-2px); background: rgba(255, 255, 255, 0.72); box-shadow: 0 12px 30px -14px rgba(16, 71, 69, .28); }

/* Panel melayang yang di-anchor ke pemicunya (mis. menu profil), memakai skala
   kaca "--frost-float" seperti .modal-panel dan .toast.

   position: fixed bukan sekadar soal penempatan — ini syarat agar blur-nya
   hidup. Elemen ber-backdrop-filter hanya menyampel konten di dalam
   *backdrop root*-nya; bila ia berada di dalam elemen ber-backdrop-filter lain
   (header memakai backdrop-blur), yang tersampel hanyalah latar elemen induk
   itu, sehingga panel tampak tembus pandang dan tulisan di belakangnya
   terbaca saat halaman digulir. Dengan fixed di luar header, panel menyampel
   konten halaman seperti mestinya. Posisinya dihitung placeProfileMenu(). */
.glass-float {
  position: fixed;
  z-index: 45;   /* di atas sidebar (40) & header (20), di bawah modal (50) */
  border-radius: 1.25rem;
  background: rgba(255, 255, 255, 0.84);
  border: 1px solid rgba(255, 255, 255, 0.85);
  box-shadow: 0 24px 60px -20px rgba(16, 71, 69, .35), 0 2px 6px rgba(16, 71, 69, .06);
  backdrop-filter: var(--frost-float);
  -webkit-backdrop-filter: var(--frost-float);
}

/* Bento stat card */
.bento-card {
  position: relative;
  overflow: hidden;
  border-radius: 1.25rem;
  padding: 1.25rem 1.35rem;
  background: rgba(255, 255, 255, 0.62);
  border: 1px solid rgba(255, 255, 255, 0.85);
  box-shadow: 0 1px 2px rgba(16, 71, 69, .04), 0 10px 28px -14px rgba(16, 71, 69, .20);
  backdrop-filter: var(--frost-panel);
  -webkit-backdrop-filter: var(--frost-panel);
  transition: transform .3s cubic-bezier(.22,1,.36,1), box-shadow .3s ease;
}
.bento-card::after {
  content: '';
  position: absolute;
  inset: auto -30% -60% auto;
  width: 12rem; height: 12rem;
  border-radius: 9999px;
  background: radial-gradient(circle, rgba(20, 168, 154, .16), transparent 68%);
  pointer-events: none;
}
.bento-card:hover { transform: translateY(-3px); box-shadow: 0 18px 40px -18px rgba(16, 71, 69, .32); }

.stat-label { font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #7d9a97; }
.stat-value { margin-top: .35rem; font-size: 2rem; font-weight: 800; line-height: 1.1; color: #104745; font-variant-numeric: tabular-nums; }
.stat-hint { margin-top: .25rem; font-size: .72rem; font-weight: 500; color: #94a3a1; }
.stat-icon { display: grid; place-items: center; height: 2.75rem; width: 2.75rem; border-radius: .9rem; font-size: 1.05rem; }

.section-title { display: flex; align-items: center; gap: .5rem; font-size: .98rem; font-weight: 700; color: #1e3a38; }
.section-sub { margin-top: .15rem; font-size: .75rem; color: #94a3a1; }

/* ──────────────────────────── FORM KONTROL ───────────────────────────── */

.field-label { display: block; margin-bottom: .4rem; font-size: .8rem; font-weight: 600; color: #4a6b68; }
.field-hint { margin-top: .35rem; font-size: .7rem; color: #94a3a1; }

.input-field,
.select-field {
  width: 100%;
  border-radius: .9rem;
  border: 1px solid #d9e5e3;
  background: rgba(255, 255, 255, 0.72);
  padding: .7rem .9rem;
  font-size: .875rem;
  line-height: 1.5;
  color: #1e3a38;
  caret-color: var(--brand-500);
  backdrop-filter: var(--frost-control);
  -webkit-backdrop-filter: var(--frost-control);
  transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}
.input-field::placeholder { color: #a7bcb9; opacity: 1; }
.input-field:hover, .select-field:hover { border-color: #c1d8d5; background: rgba(255, 255, 255, 0.86); }
.input-field:focus, .select-field:focus {
  outline: none;
  border-color: var(--brand-500);
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 0 0 4px var(--ring);
}

/* Kolom nonaktif & hanya-baca */
.input-field:disabled, .select-field:disabled {
  background: rgba(242, 247, 246, 0.78); border-color: #e4edeb; color: #9ab2af; cursor: not-allowed;
}
.input-field[readonly] { background: rgba(246, 250, 250, 0.66); cursor: default; }

/* Latar autofill Chrome/Safari agar tidak kuning dan tetap sesuai tema */
.input-field:-webkit-autofill {
  -webkit-text-fill-color: #1e3a38;
  -webkit-box-shadow: 0 0 0 1000px #fff inset;
  caret-color: #1e3a38;
}

/* Varian kolom isian */
.input-field.field-compact { width: 5.5rem; flex: none; }

/* Varian ringkas untuk kolom di dalam tabel (mis. alasan selisih opname).
   <select> di tabel tidak ditingkatkan oleh modul Dropdown, jadi tingginya
   disamakan dengan kolom isian di sebelahnya. */
.select-field.select-mini {
  width: 100%;
  min-width: 9rem;
  padding: 0.5rem 1.9rem 0.5rem 0.7rem;
  font-size: 0.75rem;
  line-height: 1.25rem;
  border-radius: 0.7rem;
}

/* Kolom pencarian: buang gaya bawaan browser, pakai tombol hapus sendiri */
.input-field[type="search"] { -webkit-appearance: none; appearance: none; }
.input-field[type="search"]::-webkit-search-decoration,
.input-field[type="search"]::-webkit-search-results-button,
.input-field[type="search"]::-webkit-search-results-decoration { display: none; }

/* Tombol hapus di dalam kolom pencarian (dirender oleh app.js) */
.input-field.field-clearable { padding-right: 2.6rem; }
.input-field.field-clearable::-webkit-search-cancel-button { display: none; }
.field-clear {
  position: absolute; right: .55rem; top: 50%; transform: translateY(-50%);
  display: grid; place-items: center;
  height: 1.65rem; width: 1.65rem; border-radius: .55rem;
  color: #8fa8a5; font-size: .7rem;
  backdrop-filter: var(--frost-quiet); -webkit-backdrop-filter: var(--frost-quiet);
  transition: color .15s ease, background .15s ease;
}
.field-clear:hover { color: #be123c; background: rgba(190, 18, 60, .09); }
.field-clear.is-off { display: none; }

/* Ikon di dalam kolom ikut menyala saat kolomnya aktif */
.field-wrap:focus-within .input-icon { color: var(--brand-500); }

/* Kolom tanggal: ikon kalender dibuat lebih jelas & reaktif */
.input-field[type="date"], .input-field[type="datetime-local"], .input-field[type="month"] { cursor: pointer; }
.input-field::-webkit-calendar-picker-indicator {
  padding: .1rem; border-radius: .35rem; cursor: pointer; opacity: .5;
  transition: opacity .15s ease, background .15s ease;
}
.input-field::-webkit-calendar-picker-indicator:hover { opacity: 1; background: rgba(20, 168, 154, .14); }
/* Chrome menambahkan padding bawaan pada lapisan dalam date input → ratakan tinggi */
.input-field::-webkit-datetime-edit-fields-wrapper { padding: 0; }

/* Kolom angka: stepper bawaan dibuat halus, menegas saat dipakai */
.input-field[type="number"]::-webkit-inner-spin-button,
.input-field[type="number"]::-webkit-outer-spin-button {
  height: 1.7rem; margin-right: -.4rem; opacity: .3;
  transition: opacity .15s ease;
}
.input-field[type="number"]:hover::-webkit-inner-spin-button,
.input-field[type="number"]:focus::-webkit-inner-spin-button { opacity: .9; }

.select-field {
  appearance: none;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237d9a97' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .7rem center;
  background-size: 1.05rem;
  padding-right: 2.2rem;
  cursor: pointer;
}

.input-wrap { position: relative; }
.input-icon {
  position: absolute; left: .95rem; top: 50%; transform: translateY(-50%);
  font-size: .85rem; color: #9db4b1; pointer-events: none;
}
.input-suffix {
  position: absolute; right: .7rem; top: 50%; transform: translateY(-50%);
  padding: .3rem; border-radius: .5rem; color: #9db4b1;
  backdrop-filter: var(--frost-quiet); -webkit-backdrop-filter: var(--frost-quiet);
  transition: color .18s ease, background .18s ease;
}
.input-suffix:hover { color: var(--brand-600); background: rgba(20,168,154,.08); }

/* ─────────────────────────── DROPDOWN KUSTOM ──────────────────────────── */

.dd { position: relative; display: block; width: 100%; }
.dd-auto { display: inline-block; width: auto; }

/* <select> asli tetap ada untuk validasi & .value, namun tak terlihat. */
.dd > select {
  position: absolute; top: 0; left: 0;
  width: 1px; height: 1px;
  margin: 0; padding: 0; border: 0;
  opacity: 0;
  pointer-events: none;
  clip-path: inset(50%);
}

.dd-trigger {
  background-image: none;
  display: flex; align-items: center; justify-content: space-between; gap: .5rem;
  width: 100%; text-align: left;
}
.dd-trigger[aria-expanded="true"] {
  border-color: var(--brand-500);
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 0 0 4px var(--ring);
}
.dd-trigger:disabled { opacity: .6; cursor: not-allowed; background: rgba(244, 248, 247, .8); }
.dd-trigger.dd-invalid { border-color: #fda4af; background: rgba(255,255,255,.85); box-shadow: 0 0 0 4px rgba(244, 63, 94, .12); }
.dd-label { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dd-trigger.dd-empty .dd-label { color: #a7bcb9; }
.dd-caret { flex: none; font-size: .7rem; color: #7d9a97; transition: transform .2s ease, color .2s ease; }
.dd-trigger[aria-expanded="true"] .dd-caret { transform: rotate(180deg); color: var(--brand-600); }

.dd-panel {
  position: fixed;
  z-index: 80;
  overflow: auto;
  overscroll-behavior: contain;
  padding: .35rem;
  border-radius: 1rem;
  border: 1px solid rgba(223, 232, 230, .8);
  background: rgba(255, 255, 255, .82);
  box-shadow: 0 24px 60px -20px rgba(16, 71, 69, .35), 0 2px 6px rgba(16, 71, 69, .06);
  backdrop-filter: var(--frost-float);
  -webkit-backdrop-filter: var(--frost-float);
  animation: scale-in .16s cubic-bezier(.22,1,.36,1) both;
}
.dd-panel[hidden] { display: none; }

.dd-option {
  display: flex; align-items: center; gap: .5rem;
  width: 100%;
  padding: .55rem .7rem;
  border-radius: .7rem;
  font-size: .85rem; line-height: 1.25;
  color: #1e3a38; text-align: left;
  transition: background .14s ease, color .14s ease;
}
.dd-option:hover, .dd-option.is-active { background: #effcf9; }
.dd-option.is-selected { background: rgba(20, 168, 154, .12); color: var(--brand-700); font-weight: 600; backdrop-filter: var(--frost-inline); -webkit-backdrop-filter: var(--frost-inline); }
.dd-option.is-new { color: var(--brand-700); font-weight: 600; background: rgba(20, 168, 154, .08); backdrop-filter: var(--frost-inline); -webkit-backdrop-filter: var(--frost-inline); }
.dd-option.is-new .dd-check { opacity: 1; }
.dd-option:disabled { opacity: .45; cursor: not-allowed; background: none; }
.dd-option-text { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dd-check { flex: none; font-size: .7rem; color: var(--brand-500); opacity: 0; transition: opacity .14s ease; }
.dd-option.is-selected .dd-check { opacity: 1; }
.dd-empty-note { padding: .7rem; font-size: .8rem; color: #94a3a1; text-align: center; }
.dd-empty-note b { color: var(--brand-700); }

/* Padanan satuan kecil di belakang angka satuan utama, mis. "2 Box (24 Pcs)" */
.qty-alt { font-size: .78em; font-weight: 400; color: #94a3a1; white-space: nowrap; }

/* ──────────────── KOLOM ISIAN DENGAN SARAN (pengganti datalist) ────────── */

.input-combo { position: relative; display: block; width: 100%; }
.input-combo > .input-field { padding-right: 2.5rem; }
.combo-caret {
  position: absolute; right: .35rem; top: 50%; transform: translateY(-50%);
  display: grid; place-items: center;
  height: 1.9rem; width: 1.9rem;
  border-radius: .6rem;
  color: #7d9a97; font-size: .68rem;
  backdrop-filter: var(--frost-quiet); -webkit-backdrop-filter: var(--frost-quiet);
  transition: color .18s ease, background .18s ease, transform .18s ease;
}
.combo-caret:hover { color: var(--brand-600); background: rgba(20, 168, 154, .1); }
.input-combo.is-open > .input-field {
  border-color: var(--brand-500);
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 0 0 4px var(--ring);
}
.input-combo.is-open .combo-caret { transform: translateY(-50%) rotate(180deg); color: var(--brand-600); }

/* Kolom tidak valid setelah validasi form gagal */
.input-field.field-invalid {
  border-color: #fda4af; background: rgba(255, 255, 255, 0.85);
  box-shadow: 0 0 0 4px rgba(244, 63, 94, .12);
}

/* ─────────────────────────────── TOMBOL ───────────────────────────────── */

.btn-primary, .btn-ghost, .btn-danger {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  border-radius: .9rem; padding: .7rem 1.05rem;
  border: 1px solid transparent;
  font-size: .875rem; font-weight: 600; white-space: nowrap;
  transition: transform .18s cubic-bezier(.22,1,.36,1), box-shadow .2s ease, background .2s ease, color .2s ease;
}
.btn-primary {
  color: #fff;
  background-image: linear-gradient(135deg, #16a99b 0%, #0f8a7f 55%, #0b7a70 100%);
  box-shadow: 0 10px 22px -12px rgba(13, 107, 102, .85), inset 0 1px 0 rgba(255,255,255,.22);
}
.btn-primary:hover:not(:disabled) { transform: translateY(-1.5px); box-shadow: 0 16px 30px -14px rgba(13, 107, 102, .85); }
.btn-primary:active:not(:disabled) { transform: translateY(0); }
.btn-primary:disabled { opacity: .5; cursor: not-allowed; box-shadow: none; }

.btn-ghost {
  color: #0d6b66; background: rgba(255,255,255,.68);
  border: 1px solid rgba(20,168,154,.22);
  backdrop-filter: var(--frost-control);
  -webkit-backdrop-filter: var(--frost-control);
}
.btn-ghost:hover { background: rgba(255,255,255,.9); border-color: rgba(20,168,154,.4); transform: translateY(-1px); }

.btn-danger {
  color: #fff; background-image: linear-gradient(135deg, #f43f5e, #be123c);
  box-shadow: 0 10px 22px -12px rgba(190, 18, 60, .8);
}
.btn-danger:hover { transform: translateY(-1.5px); }

.btn-ghost.btn-ghost-danger { color: #be123c; border-color: rgba(244,63,94,.25); }
.btn-ghost.btn-ghost-danger:hover { background: rgba(255,241,242,.9); border-color: rgba(244,63,94,.45); }

.icon-btn {
  display: grid; place-items: center;
  height: 2.5rem; width: 2.5rem; border-radius: .85rem;
  color: #5d7a77; background: rgba(255,255,255,.55);
  border: 1px solid rgba(226, 234, 233, .85);
  backdrop-filter: var(--frost-control);
  -webkit-backdrop-filter: var(--frost-control);
  transition: color .18s ease, background .18s ease, transform .18s ease;
}
.icon-btn:hover { color: var(--brand-600); background: rgba(255,255,255,.9); transform: translateY(-1px); }
/* Tombol keranjang di header: menonjol saat ada isinya */
.icon-btn.has-cart { color: #fff; background-image: linear-gradient(135deg, #16a99b 0%, #0f8a7f 60%, #0b7a70 100%); border-color: transparent; }
.icon-btn.has-cart:hover { color: #fff; }

.cart-badge {
  position: absolute; top: -.3rem; right: -.3rem;
  display: grid; place-items: center;
  min-width: 1.25rem; height: 1.25rem; padding: 0 .28rem;
  border-radius: 99px;
  font-size: .65rem; font-weight: 800; line-height: 1;
  color: #fff; font-variant-numeric: tabular-nums;
  background-image: linear-gradient(135deg, #16a99b, #0b7a70);
  box-shadow: 0 0 0 2px #fff;
}
.cart-badge.is-zero { color: #7d9a97; background-image: none; background-color: #eaf1f0; }

.chip-btn {
  border-radius: 99px; padding: .35rem .85rem;
  font-size: .72rem; font-weight: 600; color: #5d7a77;
  background: rgba(255,255,255,.58); border: 1px solid #e2eae9;
  backdrop-filter: var(--frost-control);
  -webkit-backdrop-filter: var(--frost-control);
  transition: all .18s ease;
}
.chip-btn:hover { color: var(--brand-700); border-color: rgba(20,168,154,.45); background: rgba(255,255,255,.9); }
.chip-btn.chip-active { color: #fff; background-image: linear-gradient(135deg,#16a99b,#0b7a70); border-color: transparent; }

/* Spinner state pada tombol */
.btn-spinner { display: inline-flex; align-items: center; gap: .5rem; }

/* ─────────────────────────────── BADGE ───────────────────────────────── */

.badge {
  display: inline-flex; align-items: center; gap: .35rem;
  border-radius: 99px; padding: .22rem .65rem;
  font-size: .7rem; font-weight: 700; letter-spacing: .01em; white-space: nowrap;
}
.badge i { font-size: .68rem; }
.badge-soft    { background: rgba(20,168,154,.10); color: #0d6b66; border: 1px solid rgba(20,168,154,.22); backdrop-filter: var(--frost-inline); -webkit-backdrop-filter: var(--frost-inline); }
.badge-brand   { background: rgba(20,168,154,.12); color: #0c6f68; backdrop-filter: var(--frost-inline); -webkit-backdrop-filter: var(--frost-inline); }
.badge-slate   { background: #eef2f2; color: #526966; }
.badge-rose    { background: #fff1f2; color: #be123c; }
.badge-emerald { background: #ecfdf5; color: #047857; }
.badge-amber   { background: #fffbeb; color: #b45309; }
.badge-cyan    { background: #ecfeff; color: #0e7490; }
.badge-violet  { background: #f5f3ff; color: #6d28d9; }
.badge-anim { animation: pop-badge .35s ease-out both; }

@keyframes pop-badge {
  0% { transform: scale(.72); opacity: .4; }
  60% { transform: scale(1.1); }
  100% { transform: scale(1); opacity: 1; }
}

/* ────────────────────────── TABEL DATA ───────────────────────────────── */

.data-table { min-width: 100%; border-collapse: separate; border-spacing: 0; font-size: .82rem; }
.data-table thead th {
  position: sticky; top: 0; z-index: 1;
  background: rgba(247, 250, 250, .76);
  backdrop-filter: var(--frost-control);
  -webkit-backdrop-filter: var(--frost-control);
  padding: .7rem 1.1rem;
  text-align: left; font-size: .68rem; font-weight: 800;
  letter-spacing: .07em; text-transform: uppercase; color: #7d9a97;
  border-bottom: 1px solid #e8efee;
  white-space: nowrap;
}
.data-table tbody td { padding: .8rem 1.1rem; border-bottom: 1px solid #f1f6f5; color: #3f5b58; vertical-align: middle; }
.data-table tbody tr { transition: background .16s ease; }
.data-table tbody tr:hover { background: rgba(20,168,154,.045); }
.data-table tbody tr:last-child td { border-bottom: none; }
.data-table tfoot td {
  padding: .8rem 1.1rem; font-weight: 700; color: #104745;
  background: rgba(20,168,154,.05); border-top: 1px solid #e2eae9;
  backdrop-filter: var(--frost-inline); -webkit-backdrop-filter: var(--frost-inline);
}
.num { font-variant-numeric: tabular-nums; font-weight: 600; }

/* ──────────────────────────── NAVIGASI ───────────────────────────────── */

/* Overlay pemuat hanya boleh menghalangi klik saat memang memblokir
   (mis. menyimpan data). Untuk pemuatan tampilan/laporan, overlay bersifat
   visual saja sehingga klik menu tetap terlayani. */
#loadingOverlay { pointer-events: none; }
#loadingOverlay.is-blocking { pointer-events: auto; }

.nav-item {
  position: relative;
  display: flex; align-items: center; gap: .75rem;
  width: 100%; padding: .68rem .85rem;
  border-radius: .9rem;
  font-size: .875rem; font-weight: 600; color: #55716e;
  transition: color .18s ease, background .18s ease, transform .18s ease;
}
.nav-item i { width: 1.15rem; text-align: center; font-size: .95rem; color: #8fa8a5; transition: color .18s ease; }
.nav-item:hover { color: var(--brand-700); background: rgba(20,168,154,.08); backdrop-filter: var(--frost-inline); -webkit-backdrop-filter: var(--frost-inline); }
.nav-item:hover i { color: var(--brand-500); }
.nav-item.nav-active {
  color: #fff;
  background-image: linear-gradient(135deg, #16a99b 0%, #0c877e 60%, #0b7a70 100%);
  box-shadow: 0 10px 24px -14px rgba(13,107,102,.9);
}
.nav-item.nav-active i { color: rgba(255,255,255,.92); }
.nav-item.nav-active .nav-badge { background: rgba(255,255,255,.26); color: #fff; backdrop-filter: var(--frost-inline); -webkit-backdrop-filter: var(--frost-inline); }

.nav-badge {
  margin-left: auto; border-radius: 99px; padding: .1rem .5rem;
  font-size: .68rem; font-weight: 800;
  background: #fff1f2; color: #be123c;
}
.nav-section {
  padding: 1rem .85rem .4rem;
  font-size: .65rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: #a7bcb9;
}

/* Tab status */
.tab-btn {
  display: inline-flex; align-items: center; gap: .45rem;
  border-radius: 99px; padding: .45rem .95rem;
  font-size: .78rem; font-weight: 600; color: #5d7a77;
  background: rgba(255,255,255,.58); border: 1px solid #e4eceb;
  backdrop-filter: var(--frost-control);
  -webkit-backdrop-filter: var(--frost-control);
  transition: all .18s ease;
}
.tab-btn:hover { color: var(--brand-700); border-color: rgba(20,168,154,.4); background: rgba(255,255,255,.9); }
.tab-btn.tab-active {
  color: #fff; border-color: transparent;
  background-image: linear-gradient(135deg,#16a99b,#0b7a70);
  box-shadow: 0 8px 18px -12px rgba(13,107,102,.9);
}
.tab-count {
  border-radius: 99px; padding: 0 .4rem;
  font-size: .68rem; font-weight: 800;
  background: rgba(13,107,102,.10); color: #0d6b66;
}
.tab-btn.tab-active .tab-count { background: rgba(255,255,255,.24); color: #fff; }

/* ────────────────────────────── CHART ───────────────────────────────── */

.chart-box { position: relative; height: 19rem; }
@media (max-width: 640px) { .chart-box { height: 15rem; } }

/* Distribusi kategori: cincin + daftar keterangan yang bisa digulir.
   Keterangan sengaja bukan legend bawaan Chart.js — dengan banyak kategori,
   legend bawaan memakan tinggi kanvas lalu meluber keluar kartu. Daftar HTML
   dibatasi pada sisa ruang dan digulir, serta memuat nilai + persentase. */
.cat-chart { display: flex; flex-direction: column; height: 100%; }
.cat-chart-canvas { position: relative; flex: 0 0 58%; min-height: 7rem; }
.cat-legend {
  flex: 1 1 auto; min-height: 0; overflow-y: auto;
  margin: .4rem 0 0; padding: 0 .15rem 0 0; list-style: none;
}
.cat-legend-item {
  display: flex; align-items: center; gap: .5rem;
  width: 100%; padding: .3rem .4rem;
  border-radius: .55rem; text-align: left;
  font-size: .74rem; color: #55716e;
  transition: background .14s ease, opacity .14s ease;
}
.cat-legend-item:hover { background: rgba(20, 168, 154, .08); }
.cat-legend-item.is-hidden { opacity: .45; }
.cat-legend-item.is-hidden .cat-label { text-decoration: line-through; }
.cat-dot { flex: none; width: .5rem; height: .5rem; border-radius: 9999px; }
.cat-label { flex: 1 1 auto; min-width: 0; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cat-value { flex: none; font-weight: 700; color: #104745; font-variant-numeric: tabular-nums; }
.cat-pct { flex: none; width: 2.7rem; text-align: right; color: #8fa8a5; font-variant-numeric: tabular-nums; }

/* ─────────────────────────────── MODAL ──────────────────────────────── */

.modal-backdrop {
  position: fixed; inset: 0; z-index: 50;
  display: grid; place-items: center;
  padding: 1rem;
  background: rgba(15, 42, 41, .22);
  backdrop-filter: var(--frost-scrim);
  -webkit-backdrop-filter: var(--frost-scrim);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.modal-panel {
  position: relative;
  width: 100%;
  margin: auto;
  max-height: calc(100dvh - 2rem);
  display: flex; flex-direction: column;
  overflow: hidden;
  border-radius: 1.5rem;
  background: rgba(255, 255, 255, 0.84);
  border: 1px solid rgba(255,255,255,.85);
  box-shadow: 0 30px 70px -22px rgba(16, 71, 69, .5);
  backdrop-filter: var(--frost-float);
  -webkit-backdrop-filter: var(--frost-float);
  animation: scale-in .28s cubic-bezier(.22,1,.36,1) both;
}

/* Ukuran panel: konsisten, tidak lagi bergantung utility Tailwind */
.modal-sm { max-width: 25rem; }
.modal-md { max-width: 29rem; }
.modal-lg { max-width: 42rem; }
.modal-xl { max-width: 54rem; }
@media (max-width: 640px) {
  .modal-sm, .modal-md, .modal-lg, .modal-xl { max-width: none; }
}

.modal-header {
  flex: none;
  display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem;
  padding: 1.15rem 1.5rem;
  border-bottom: 1px solid #eef4f3;
  background: rgba(255,255,255,.55);
  backdrop-filter: var(--frost-control);
  -webkit-backdrop-filter: var(--frost-control);
}
.modal-header > div { min-width: 0; }
.modal-header h3 { line-height: 1.35; }
.modal-header p { margin-top: .2rem; line-height: 1.4; }

/* Pembungkus <form> agar body menggulir dan footer tetap menempel */
.modal-form { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }

.modal-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 1.35rem 1.5rem; }

.modal-footer {
  flex: none;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: .6rem;
  padding: 1rem 1.5rem;
  border-top: 1px solid #eef4f3;
  background: rgba(247,250,250,.6);
  backdrop-filter: var(--frost-control);
  -webkit-backdrop-filter: var(--frost-control);
}
.modal-footer > * { flex: 0 0 auto; }
/* Bila ada dua tombol, yang utama di kanan dengan lebar seragam */
.modal-footer .btn-primary, .modal-footer .btn-danger, .modal-footer .btn-ghost { min-width: 7.5rem; }
/* Footer bertumpuk: untuk modal dengan aksi majemuk (mis. keranjang) */
.modal-footer.is-stacked {
  flex-direction: column; align-items: stretch; justify-content: flex-start; gap: .55rem;
}
.modal-footer.is-stacked > * { width: 100%; min-width: 0; }

.modal-close {
  flex: none;
  display: grid; place-items: center;
  height: 2.25rem; width: 2.25rem; border-radius: .75rem;
  color: #8fa8a5;
  backdrop-filter: var(--frost-quiet); -webkit-backdrop-filter: var(--frost-quiet);
  transition: color .18s ease, background .18s ease;
}
.modal-close:hover { color: #be123c; background: rgba(255,241,242,.85); }

@media (max-width: 640px) {
  .modal-backdrop { padding: .7rem; }
  .modal-panel { max-height: calc(100dvh - 1.4rem); border-radius: 1.25rem; }
  .modal-header { padding: 1rem 1.15rem; }
  .modal-body { padding: 1.1rem 1.15rem; }
  /* Tombol menumpuk: aksi utama di atas agar mudah dijangkau jempol
     (footer bertumpuk sudah tersusun sendiri, jangan dibalik) */
  .modal-footer:not(.is-stacked) { flex-direction: column-reverse; align-items: stretch; padding: .9rem 1.15rem 1.05rem; }
  .modal-footer:not(.is-stacked) > * { width: 100%; min-width: 0; }
}

/* ──────────────────────── MODAL KONFIRMASI ───────────────────────────── */

.confirm-body { display: flex; flex-direction: column; align-items: center; text-align: center; gap: .3rem; padding: 1.7rem 1.5rem 1.35rem; }
.confirm-icon {
  display: grid; place-items: center;
  height: 3.4rem; width: 3.4rem; border-radius: 1.1rem;
  margin-bottom: .55rem;
  font-size: 1.3rem;
}
.confirm-icon.tone-danger { color: #be123c; background: #fff1f2; box-shadow: inset 0 0 0 1px rgba(244,63,94,.18); }
.confirm-icon.tone-warn { color: #b45309; background: #fffbeb; box-shadow: inset 0 0 0 1px rgba(245,158,11,.2); }
.confirm-icon.tone-primary { color: var(--brand-600); background: #effcf9; box-shadow: inset 0 0 0 1px rgba(20,168,154,.2); }
.confirm-title { font-size: 1.02rem; font-weight: 700; color: #1e3a38; line-height: 1.4; }
.confirm-message { font-size: .84rem; line-height: 1.55; color: #56736f; }
.confirm-detail {
  margin-top: .7rem; width: 100%;
  padding: .6rem .8rem; border-radius: .85rem;
  font-size: .78rem; font-weight: 600; color: #4a6b68;
  background: rgba(246, 250, 250, .7); box-shadow: inset 0 0 0 1px #eaf1f0;
  backdrop-filter: var(--frost-inline); -webkit-backdrop-filter: var(--frost-inline);
  overflow-wrap: anywhere;
}
.confirm-detail:empty { display: none; }

@keyframes scale-in {
  0% { opacity: 0; transform: scale(.95) translateY(10px); }
  100% { opacity: 1; transform: none; }
}

/* ────────────────────────────── TOAST ───────────────────────────────── */

.toast {
  pointer-events: auto;
  display: flex; align-items: flex-start; gap: .75rem;
  border-radius: 1rem; padding: .85rem 1rem;
  background: rgba(255,255,255,.84);
  border: 1px solid rgba(232, 239, 238, .9);
  box-shadow: 0 18px 40px -18px rgba(16,71,69,.42);
  backdrop-filter: var(--frost-float);
  -webkit-backdrop-filter: var(--frost-float);
  animation: toast-in .32s cubic-bezier(.22,1,.36,1) both;
}
.toast.leaving { animation: toast-out .28s ease-in both; }
@keyframes toast-in { from { opacity: 0; transform: translateX(24px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes toast-out { to { opacity: 0; transform: translateX(24px) scale(.96); } }

/* ───────────────────────────── CHART / VIEW ─────────────────────────── */

/* Perpindahan halaman: hanya memudar, tanpa geser. Sebelumnya view ikut
   bergeser translateY(10px) setiap navigasi sehingga terasa seperti lompatan
   (apalagi karena posisi gulir dipertahankan). */
.view { animation: view-in .26s cubic-bezier(.22,1,.36,1) both; }
@keyframes view-in { from { opacity: 0; } to { opacity: 1; } }
/* Hormati preferensi pengguna yang menonaktifkan animasi */
@media (prefers-reduced-motion: reduce) {
  .view, .dd-panel, .modal-panel, .toast, .badge-anim, .bento-card, .glass-card { animation: none !important; }
}

/* ────────────────────────── KARTU PERMINTAAN ────────────────────────── */

.req-card { transition: box-shadow .25s ease, transform .25s ease; }
.req-card:hover { transform: translateY(-2px); box-shadow: 0 18px 40px -20px rgba(16,71,69,.35); }
.req-item-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .5rem 0; border-bottom: 1px dashed #eef4f3; font-size: .8rem; }
.req-item-row:last-child { border-bottom: none; }

/* Kartu produk (katalog klien) */
.product-card { display: flex; flex-direction: column; height: 100%; }
.product-thumb {
  display: grid; place-items: center;
  height: 3.25rem; width: 3.25rem; border-radius: 1rem;
  font-size: 1.2rem; color: #0d6b66;
  background-image: linear-gradient(135deg, rgba(45,212,191,.22), rgba(16,185,129,.16));
  border: 1px solid rgba(20,168,154,.18);
  backdrop-filter: var(--frost-quiet); -webkit-backdrop-filter: var(--frost-quiet);
}

/* Feed aktivitas */
.feed-item { display: flex; gap: .75rem; border-radius: .9rem; padding: .65rem .75rem; transition: background .18s ease; }
.feed-item:hover { background: rgba(20,168,154,.06); backdrop-filter: var(--frost-inline); -webkit-backdrop-filter: var(--frost-inline); }
.feed-dot { display: grid; place-items: center; height: 2.1rem; width: 2.1rem; flex: none; border-radius: .75rem; font-size: .8rem; }

/* ─────────────────────────────── CETAK ──────────────────────────────── */

#printArea { display: none; }

@media print {
  /* Efek kaca tidak bermakna di kertas: matikan blur agar pratinjau cetak bersih. */
  *, *::before, *::after {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    animation: none !important;
  }
  body { background: #fff !important; }
  #appScreen, #loginScreen, #toastStack, #sidebarOverlay { display: none !important; }
  #printArea { display: block !important; padding: 0; }

  .print-doc { font-family: "Plus Jakarta Sans", Arial, sans-serif; color: #111; padding: 8mm; }
  .print-head { display: flex; align-items: center; gap: 14px; border-bottom: 3px double #0d6b66; padding-bottom: 10px; margin-bottom: 14px; }
  .print-head h1 { font-size: 17pt; font-weight: 800; margin: 0; color: #0d6b66; }
  .print-head p { margin: 2px 0 0; font-size: 9pt; color: #555; }
  .print-meta { display: flex; flex-wrap: wrap; gap: 6px 26px; font-size: 9.5pt; margin-bottom: 12px; }
  .print-meta b { color: #0d6b66; }
  .print-doc table { width: 100%; border-collapse: collapse; font-size: 9.5pt; }
  .print-doc th, .print-doc td { border: 1px solid #b9c9c7; padding: 6px 8px; text-align: left; }
  .print-doc th { background: #e8f4f2; font-weight: 700; }
  .print-doc td.num, .print-doc th.num { text-align: right; font-variant-numeric: tabular-nums; }
  .print-doc tfoot td { font-weight: 700; background: #f4f8f7; }
  .print-sign { display: flex; justify-content: space-between; margin-top: 34px; font-size: 9.5pt; }
  .print-sign > div { width: 32%; text-align: center; }
  .print-sign .line { margin-top: 58px; border-top: 1px solid #333; padding-top: 4px; }
  .print-badge { display: inline-block; border: 1px solid #0d6b66; border-radius: 4px; padding: 1px 8px; font-size: 8.5pt; font-weight: 700; color: #0d6b66; }
  .print-note { margin-top: 12px; font-size: 8.5pt; color: #555; border-left: 3px solid #14a89a; padding-left: 8px; }
  @page { size: A4; margin: 10mm; }
}

/* ──────────────────────────── PREFERS MOTION ─────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}