/* ════════════════════════════════════════════════════════════════════════════
   GESIT V6.6 — CSS 3/4: HALAMAN & FITUR
   Isi   : Antrian panel DIGITAMU, halaman login glassmorphism, layar loading, placeholder modul, komponen Fase 2 (tab, progress, budget, list, approval)
   Urutan: file ke-3 dari 4 (urutan wajib dijaga — CSS bersifat cascade)
   ════════════════════════════════════════════════════════════════════════════ */

/* ── 13. ANTRIAN PANEL (DIGITAMU) ─────────────────────────────────────────── */
.antrian-panel { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.antrian-list { display: flex; flex-direction: column; gap: 10px; max-height: 420px; overflow-y: auto; padding-right: 4px; }
.antrian-item {
  display: flex; align-items: center; gap: 13px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg-surface);
  transition: box-shadow var(--dur) var(--ease);
}
.antrian-item:hover { box-shadow: var(--shadow-sm); }
.antrian-item .antrian-no {
  width: 56px; height: 44px; flex: none;
  border-radius: var(--radius-control);
  display: grid; place-items: center;
  font-weight: 800; font-size: 15px;
  font-variant-numeric: tabular-nums;
  background: var(--brand-50); color: var(--brand-700);
  border: 1.5px solid var(--brand-200);
}
.antrian-item.is-serving .antrian-no {
  background: var(--info-bg); color: var(--info); border-color: var(--info-bd);
  animation: pulseServe 1.6s infinite;
}
@keyframes pulseServe {
  0%, 100% { box-shadow: 0 0 0 0 rgba(37,99,235,.28); }
  50%      { box-shadow: 0 0 0 6px rgba(37,99,235,0); }
}
.antrian-item .antrian-info { flex: 1; min-width: 0; }
.antrian-item .antrian-nama { font-weight: 600; font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.antrian-item .antrian-tujuan { font-size: 11.5px; color: var(--text-secondary); }

/* ── 14. HALAMAN LOGIN — GLASSMORPHISM RINGAN (perbaikan kedip/blank HP) ───
   Tiga penyebab "TV rusak → layar putih" di HP dihilangkan:
   1. Animasi background-position pada gradient 400% (repaint layar penuh
      16× luas viewport tiap frame)          → gradient berlapis STATIS.
   2. filter: blur(46px) pada orb ±560px yang terus bergerak (rasterisasi
      ulang blur setiap frame)               → radial-gradient murni, sudah
      lembut tanpa filter; animasi translate hanya di desktop.
   3. backdrop-filter: blur(18px) di atas latar yang beranimasi (pemicu
      crash compositor GPU WebView Android)  → kartu semi-solid di HP;
      efek kaca penuh tetap hidup KHUSUS desktop via media query di bawah. */
.login-page {
  position: fixed; inset: 0; z-index: 70;
  display: flex; align-items: flex-start; justify-content: center;
  padding: 20px;
  padding-top: calc(20px + var(--safe-top));
  padding-bottom: calc(20px + var(--safe-bottom));
  background:
    radial-gradient(920px 640px at 88% -12%, rgba(13,148,136,.30), transparent 62%),
    radial-gradient(780px 560px at -10% 112%, rgba(6,182,212,.22), transparent 58%),
    linear-gradient(135deg, #0a1628 0%, #0c2a3a 32%, #0d3b3b 54%, #0a2e1f 78%, #0a1628 100%);
  /* Audit V7.2: dulu overflow:hidden + align-items:center — kartu registrasi
     yang lebih tinggi dari layar terpotong atas-bawah TANPA bisa digulir
     (tombol Daftar tak terjangkau). Kini halaman dapat digulir; pemusatan
     vertikal dipindah ke margin:auto pada kartu (tetap di tengah saat muat,
     tergulir penuh saat lebih tinggi dari layar). */
  overflow-y: auto; overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
}
.login-page.is-hidden { display: none; }

/* Orb dekoratif: gradasi radial sudah menghasilkan tepi lembut sendiri —
   tanpa filter:blur, biaya render turun drastis dengan tampilan setara.
   position:fixed (Audit V7.2): dekorasi tidak ikut memperluas area gulir. */
.login-page::before, .login-page::after {
  content: ''; position: fixed; border-radius: 50%;
  pointer-events: none;
}
.login-page::before {
  width: 560px; height: 560px; top: -140px; right: -140px;
  background: radial-gradient(circle, rgba(20,184,166,.30) 0%, rgba(20,184,166,.10) 45%, transparent 70%);
}
.login-page::after {
  width: 480px; height: 480px; bottom: -110px; left: -110px;
  background: radial-gradient(circle, rgba(34,211,238,.22) 0%, rgba(34,211,238,.07) 45%, transparent 70%);
}

.login-card {
  position: relative; z-index: 2;
  width: 100%; max-width: 400px;
  margin: auto; /* Audit V7.2: pusat vertikal yang tetap tergulir penuh */
  background: rgba(13,24,41,.88); /* semi-solid: stabil di semua HP */
  border: 1px solid rgba(255,255,255,.14);
  border-radius: var(--radius-2xl);
  box-shadow: 0 24px 60px rgba(2,8,23,.55);
  padding: 34px 30px 30px;
  color: #e2e8f0;
  animation: loginCardIn .5s var(--ease);
}
@keyframes loginCardIn {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: none; }
}

/* Efek penuh (kaca transparan + orb melayang) HANYA untuk perangkat
   desktop bertenaga — HP/tablet memakai versi ringan di atas. */
@media (hover: hover) and (pointer: fine) {
  @supports ((backdrop-filter: blur(18px)) or (-webkit-backdrop-filter: blur(18px))) {
    .login-card {
      background: rgba(255,255,255,.08);
      border-color: rgba(255,255,255,.16);
      backdrop-filter: blur(18px);
      -webkit-backdrop-filter: blur(18px);
    }
  }
  /* AUDIT V7.6: animasi orb (orbA/orbB) DIHAPUS. Orb yang terus bergerak
     berada TEPAT DI BAWAH kartu backdrop-filter: blur(18px) — setiap frame
     latarnya berubah, blur wajib dirender ulang → tersendat di laptop +
     proyektor/resolusi tinggi (persis lingkungan presentasi). Orb statis
     nyaris tak terbedakan (drift lama hanya ±30px per 12–14 dtk), sementara
     biaya blur berubah dari per-frame menjadi sekali saja. Efek kaca utuh. */
}
.login-logo {
  width: 66px; height: 66px; margin: 0 auto 16px;
  border-radius: var(--radius-xl);
  background: linear-gradient(135deg, var(--brand-400), var(--brand-700));
  display: grid; place-items: center;
  font-weight: 800; font-size: 24px; color: #fff;
  box-shadow: 0 10px 26px rgba(20,184,166,.4);
}
.login-title { text-align: center; font-size: 21px; font-weight: 800; letter-spacing: .4px; color: #fff; }
.login-sub { text-align: center; font-size: 12.5px; color: rgba(226,232,240,.72); margin: 5px 0 24px; }

.login-card .form-label { color: rgba(226,232,240,.85); }
.login-card .form-control {
  background: rgba(255,255,255,.09);
  border-color: rgba(255,255,255,.2);
  color: #f1f5f9;
}
.login-card .form-control::placeholder { color: rgba(226,232,240,.45); }
/* Audit V7.2: daftar pilihan (popup <option>) dirender OS dengan latar PUTIH —
   warna teks putih yang diwarisi dari .form-control membuat isinya tak terbaca
   (mis. nama Bagian di form registrasi). Warna option dipaksa eksplisit. */
.login-card select.form-control option {
  color: var(--slate-800);
  background: #ffffff;
}
.login-card .form-control:focus {
  border-color: var(--brand-400);
  box-shadow: 0 0 0 3px rgba(45,212,191,.22);
  background: rgba(255,255,255,.13);
}
.login-card .input-icon > svg { color: rgba(226,232,240,.55); }
.login-card .form-group { margin-bottom: 15px; }

.login-error {
  display: none;
  background: rgba(220,38,38,.16);
  border: 1px solid rgba(248,113,113,.4);
  color: #fecaca;
  border-radius: var(--radius-control);
  padding: 10px 13px;
  font-size: 12.5px; font-weight: 500;
  margin-bottom: 15px;
}
.login-error.is-visible { display: block; animation: shake .4s var(--ease); }
@keyframes shake {
  0%,100% { transform: translateX(0); }
  25% { transform: translateX(-5px); }
  75% { transform: translateX(5px); }
}
.login-footer { margin-top: 20px; text-align: center; font-size: 11px; color: rgba(226,232,240,.5); }

/* Toggle lihat password */
.pass-toggle {
  position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
  width: 30px; height: 30px; border-radius: var(--radius-sm);
  display: grid; place-items: center;
  color: rgba(226,232,240,.55);
}
.pass-toggle:hover { color: #fff; background: rgba(255,255,255,.1); }
.pass-toggle svg { width: 16px; height: 16px; }

/* ── 15. LAYAR LOADING APLIKASI ───────────────────────────────────────────── */
.app-loading {
  position: fixed; inset: 0; z-index: 90;
  background: linear-gradient(135deg, #0a1628, #0d3b3b);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 18px;
  color: #e2e8f0;
  /* AUDIT V7.6: visibility ikut ditransisikan (tertunda .35s agar fade tetap
     terlihat). Dulu hanya opacity:0 — lapisan fixed selayar penuh ini tetap
     hidup dengan DUA animasi infinite (logo loadPulse + spinner) yang terus
     berputar tak terlihat SEPANJANG SESI, termasuk saat di halaman login.
     Beban kompositor konstan inilah salah satu sumber rasa "patah-patah". */
  transition: opacity .35s var(--ease), visibility 0s linear .35s;
}
.app-loading.is-hidden { opacity: 0; visibility: hidden; pointer-events: none; }
.app-loading.is-hidden .load-logo,
.app-loading.is-hidden .spinner { animation: none; }
.app-loading .load-logo {
  width: 72px; height: 72px; border-radius: var(--radius-2xl);
  background: linear-gradient(135deg, var(--brand-400), var(--brand-700));
  display: grid; place-items: center;
  font-weight: 800; font-size: 26px; color: #fff;
  box-shadow: 0 12px 30px rgba(20,184,166,.4);
  animation: loadPulse 1.6s ease-in-out infinite;
}
@keyframes loadPulse {
  0%,100% { transform: scale(1); }
  50%     { transform: scale(1.06); }
}
.app-loading .load-text { font-size: 13px; color: rgba(226,232,240,.7); letter-spacing: .5px; }
.app-loading .spinner { width: 26px; height: 26px; border-width: 3px; border-color: rgba(255,255,255,.2); border-top-color: var(--brand-400); }

/* ── 16. PLACEHOLDER MODUL FASE BERIKUTNYA ────────────────────────────────── */
.coming-soon {
  border: 1.5px dashed var(--slate-300);
  border-radius: var(--radius-xl);
  background: var(--bg-surface);
  padding: 56px 24px;
  text-align: center;
}
.coming-soon .cs-icon {
  width: 62px; height: 62px; margin: 0 auto 18px;
  border-radius: var(--radius-xl);
  background: var(--brand-50); color: var(--brand-600);
  display: grid; place-items: center;
}
.coming-soon .cs-icon svg { width: 28px; height: 28px; }
.coming-soon .cs-title { font-size: 17px; font-weight: 800; }
.coming-soon .cs-text { font-size: 13px; color: var(--text-secondary); margin-top: 6px; max-width: 420px; margin-inline: auto; }
.coming-soon .cs-fase {
  display: inline-flex; margin-top: 16px;
  padding: 5px 14px; border-radius: var(--radius-full);
  background: var(--brand-50); color: var(--brand-700);
  border: 1px solid var(--brand-200);
  font-size: 12px; font-weight: 700;
}

/* ── 16b. KOMPONEN FASE 2 (tab, progress, budget, list, approval) ─────────── */
/* Tabs */
.tabs {
  display: flex; gap: 4px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 18px;
  overflow-x: auto;
}
.tab {
  padding: 10px 16px;
  font-size: 13.5px; font-weight: 600;
  color: var(--text-secondary);
  border-bottom: 2px solid transparent;
  white-space: nowrap;
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.tab:hover { color: var(--text-primary); }
.tab.is-active { color: var(--brand-700); border-bottom-color: var(--brand-500); }
.tab-panel { display: none; }
.tab-panel.is-active { display: block; animation: fadeIn var(--dur) var(--ease); }
@keyframes fadeIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

/* Progress bar */
.progress {
  height: 9px; border-radius: var(--radius-full);
  background: var(--slate-200); overflow: hidden;
}
.progress-bar {
  height: 100%; border-radius: var(--radius-full);
  background: var(--brand-500);
  transition: width .5s var(--ease);
}
.progress-bar.is-warning { background: var(--warning); }
.progress-bar.is-danger  { background: var(--danger); }

/* Kartu statistik beraksen (mis. anggaran BBM) */
.stat-accent-card {
  border-left: 4px solid var(--brand-500);
  background: linear-gradient(180deg, var(--brand-50), var(--bg-surface) 60%);
}
.stat-accent-card.is-over { border-left-color: var(--danger); background: linear-gradient(180deg, var(--danger-bg), var(--bg-surface) 60%); }
.budget-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }

/* Grid 3 kolom */
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }

/* Daftar ringkas (efisiensi BBM, ruangan tersedia, jadwal) */
.mini-list { display: flex; flex-direction: column; }
.mini-item {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 11px 16px;
  border-bottom: 1px solid var(--slate-100);
}
.mini-item:last-child { border-bottom: none; }
.mini-item .mini-main { font-weight: 600; font-size: 13px; }
.mini-item .mini-sub { font-size: 11.5px; color: var(--text-secondary); margin-top: 1px; }
.mini-item .mini-val { font-variant-numeric: tabular-nums; font-weight: 700; font-size: 13px; color: var(--brand-700); white-space: nowrap; }

/* Jadwal ruangan — baris waktu */
.jadwal-item {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 10px 0; border-bottom: 1px dashed var(--slate-200);
}
.jadwal-item:last-child { border-bottom: none; }
.jadwal-time {
  font-variant-numeric: tabular-nums; font-weight: 800; font-size: 12.5px;
  color: var(--brand-700); background: var(--brand-50);
  border: 1px solid var(--brand-100); border-radius: var(--radius-sm);
  padding: 4px 8px; white-space: nowrap;
}
.jadwal-body { flex: 1; min-width: 0; }
.jadwal-body .j-title { font-weight: 600; font-size: 13px; }
.jadwal-body .j-sub { font-size: 11.5px; color: var(--text-secondary); margin-top: 1px; }

/* Kartu approval center */
.approval-item {
  display: flex; gap: 14px; align-items: center;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 14px 16px;
  margin-bottom: 12px;
  box-shadow: var(--shadow-sm);
}
.approval-item .apv-icon {
  width: 42px; height: 42px; flex-shrink: 0; border-radius: var(--radius-md);
  display: grid; place-items: center;
  background: var(--brand-50); /* fallback WebView lama (tanpa color-mix) */
  background: color-mix(in srgb, var(--apv-accent, var(--brand-500)) 13%, white);
  color: var(--apv-accent, var(--brand-600));
}
.approval-item .apv-icon svg { width: 20px; height: 20px; }
.approval-item .apv-body { flex: 1; min-width: 0; }
.approval-item .apv-title { font-weight: 700; font-size: 13.5px; }
.approval-item .apv-meta { font-size: 11.5px; color: var(--text-secondary); margin-top: 2px; }
.approval-item .apv-detail { font-size: 12px; color: var(--text-primary); margin-top: 5px; line-height: 1.45; }
.approval-item .apv-actions { display: flex; gap: 7px; flex-shrink: 0; }
.apv-kendaraan { --apv-accent: #3b82f6; }
.apv-ruangan   { --apv-accent: #8b5cf6; }
.apv-atk       { --apv-accent: #f59e0b; }

/* ── Panel Notifikasi Keputusan (modal Setujui/Tolak) ─────────────────────
   Satu blok yang membuat notifikasi TERLIHAT: penerima, kanal, saklar kirim,
   pesan tambahan, dan pratinjau isi — tidak ada yang berangkat diam-diam. */
.notif-panel {
  margin-top: 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: linear-gradient(180deg, var(--brand-50), var(--bg-surface) 55%);
  padding: 11px 12px 10px;
}
.notif-panel .np-head {
  display: flex; align-items: center; gap: 7px;
  font-weight: 700; font-size: 12.5px; color: var(--brand-800);
  margin-bottom: 8px;
}
.notif-panel .np-head svg { width: 15px; height: 15px; color: var(--brand-600); }
.notif-panel .np-count {
  margin-left: auto; font-weight: 600; font-size: 11px;
  color: var(--brand-700); background: var(--brand-100);
  border-radius: var(--radius-full); padding: 2px 9px;
}
.notif-panel .np-row {
  display: flex; align-items: flex-start; gap: 9px;
  padding: 7px 8px; border-radius: var(--radius-control); cursor: pointer;
}
.notif-panel .np-row:hover { background: rgba(20, 184, 166, .06); }
.notif-panel .np-row.is-off { opacity: .62; cursor: default; }
.notif-panel .np-chk {
  width: 16px; height: 16px; margin-top: 1px; flex-shrink: 0;
  accent-color: var(--brand-600); cursor: pointer;
}
.notif-panel .np-main {
  display: flex; flex-wrap: wrap; align-items: center; gap: 5px 7px;
  font-size: 12.5px; min-width: 0;
}
.notif-panel .np-who { color: var(--text-primary); }
.notif-panel .np-chip {
  font-size: 10.5px; font-weight: 600; line-height: 1;
  padding: 3px 8px; border-radius: var(--radius-full); white-space: nowrap;
  background: var(--slate-100); color: var(--slate-600); border: 1px solid var(--slate-200);
}
.notif-panel .np-chip.ok   { background: var(--success-bg); color: var(--success); border-color: var(--success-bd); }
.notif-panel .np-chip.warn { background: var(--warning-bg); color: var(--warning); border-color: var(--warning-bd); }
.notif-panel .np-chip.em   { background: var(--info-bg);    color: var(--info);    border-color: var(--info-bd); }
.notif-panel .np-chip.mut  { font-weight: 500; }
.notif-panel .np-field { margin: 8px 2px 2px; }
.notif-panel .np-pesan {
  width: 100%; resize: vertical; min-height: 44px;
  border: 1px solid var(--border); border-radius: var(--radius-control);
  padding: 8px 10px; font: inherit; font-size: 12.5px; color: var(--text-primary);
  background: var(--bg-surface);
}
.notif-panel .np-pesan:focus {
  outline: none; border-color: var(--brand-400);
  box-shadow: 0 0 0 3px rgba(20, 184, 166, .14);
}
.notif-panel .np-preview { margin: 8px 2px 0; }
.notif-panel .np-preview summary {
  display: flex; align-items: center; gap: 6px;
  font-size: 11.5px; font-weight: 600; color: var(--brand-700);
  cursor: pointer; list-style: none; user-select: none; padding: 3px 2px;
}
.notif-panel .np-preview summary::-webkit-details-marker { display: none; }
.notif-panel .np-preview summary svg { width: 13px; height: 13px; }
.notif-panel .np-preview[open] summary { color: var(--brand-800); }
.notif-panel .np-prev-text {
  margin: 6px 0 2px; padding: 10px 12px;
  background: var(--slate-50); border: 1px dashed var(--slate-300);
  border-radius: var(--radius-control); font-family: var(--font);
  font-size: 12px; line-height: 1.55; color: var(--slate-700);
  white-space: pre-wrap; word-break: break-word; max-height: 200px; overflow: auto;
}

/* Baris item pada builder permintaan ATK */
.atk-item-row {
  display: flex; gap: 8px; align-items: center;
  padding: 8px; border: 1px solid var(--border); border-radius: var(--radius-control);
  margin-bottom: 8px; background: var(--slate-50);
}
.atk-item-row .ai-name { flex: 1; font-size: 12.5px; font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.atk-item-row .ai-qty { width: 74px; }

/* ── Katalog permintaan ATK (V6.9) — gaya belanja daring ─────────────────── */
.atk-shop-cats {
  display: flex; gap: 7px; overflow-x: auto;
  padding-bottom: 8px; margin-bottom: 10px;
  -webkit-overflow-scrolling: touch;
}
.atk-shop-cats::-webkit-scrollbar { height: 5px; }
.atk-cat-chip {
  flex: none;
  padding: 5px 13px; border-radius: var(--radius-full);
  border: 1px solid var(--border); background: var(--bg-surface);
  font-size: 12px; font-weight: 600; color: var(--slate-600);
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease),
              border-color var(--dur) var(--ease);
}
.atk-cat-chip:hover { border-color: var(--brand-300); color: var(--brand-700); }
.atk-cat-chip.is-active {
  background: var(--brand-600); border-color: var(--brand-600);
  color: #fff;
}

.atk-shop-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 10px;
}
.atk-card {
  display: flex; flex-direction: column;
  border: 1px solid var(--border); border-radius: var(--radius-md);
  background: var(--bg-surface); overflow: hidden;
  transition: box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.atk-card:hover { box-shadow: var(--shadow-md); border-color: var(--brand-200); }
.atk-card.is-habis { opacity: .62; }
.atk-card.is-habis .atk-card-img img { filter: grayscale(1); }
.atk-card-img {
  min-height: 116px; /* fallback WebView lama tanpa aspect-ratio */
  background: var(--slate-100);
  display: grid; place-items: center;
  color: var(--slate-300);
  /* Audit V7.2: gambar dari terowongan foto (data-URI berukuran asli) sempat
     meluber keluar kotak dan menimpa nama barang — kini kotak meng-clip
     isinya dan <img> diposisikan absolut memenuhi kotak (tak bisa meluber). */
  position: relative;
  overflow: hidden;
}
@supports (aspect-ratio: 1 / 1) {
  .atk-card-img { aspect-ratio: 1 / 1; min-height: 0; }
}
.atk-card-img img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
.atk-card-img svg { width: 34px; height: 34px; }
.atk-card-body { display: flex; flex-direction: column; gap: 3px; padding: 9px 10px 10px; flex: 1; }
.atk-card-name {
  font-size: 12.5px; font-weight: 700; line-height: 1.35;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; max-height: 2.7em; /* fallback tanpa line-clamp */
}
.atk-card-meta { font-size: 10.5px; color: var(--text-muted); }
.atk-card-desc {
  font-size: 11px; color: var(--text-secondary);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.atk-card-stok { font-size: 11px; font-weight: 600; color: var(--success); margin: 2px 0 7px; margin-top: auto; }
.atk-card-stok.is-low { color: var(--danger); }

/* Stepper jumlah (dipakai di kartu katalog & baris keranjang) */
.atk-qty {
  display: flex; align-items: center; justify-content: space-between; gap: 6px;
  border: 1px solid var(--brand-300); border-radius: var(--radius-control);
  padding: 2px;
  background: var(--brand-50);
}
.atk-qty-btn {
  width: 28px; height: 28px; flex: none;
  border-radius: var(--radius-sm);
  display: grid; place-items: center;
  color: var(--brand-700); background: var(--bg-surface);
  border: 1px solid var(--brand-200);
  transition: background var(--dur) var(--ease);
}
.atk-qty-btn:hover { background: var(--brand-100); }
.atk-qty-btn:disabled { opacity: .4; cursor: default; }
.atk-qty-btn svg { width: 14px; height: 14px; }
.atk-qty-num { font-size: 13px; font-weight: 800; font-variant-numeric: tabular-nums; min-width: 22px; text-align: center; }
.atk-item-row .atk-qty { flex: none; width: 108px; background: var(--bg-surface); }

/* Bar info keranjang di footer modal */
.modal-footer.atk-foot { justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px; }
.atk-cart-info {
  display: flex; align-items: center; gap: 8px;
  font-size: 12.5px; font-weight: 700; color: var(--brand-700);
}
.atk-cart-info svg { flex: none; }

/* ── Kartu "Belum Presensi" magang (V6.9) ─────────────────────────────────── */
.belum-list { display: flex; flex-wrap: wrap; gap: 8px; }
.belum-chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 6px 12px; border-radius: var(--radius-full);
  border: 1px solid var(--warning-bd); background: var(--warning-bg);
  font-size: 12px; font-weight: 600; color: var(--slate-700);
  transition: box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.belum-chip .bl-sub { font-weight: 500; color: var(--text-secondary); font-size: 11px; }
button.belum-chip:hover { border-color: var(--warning); box-shadow: var(--shadow-sm); }
.belum-chip.is-static { cursor: default; }

/* ── Panel info ringkas Portal Magang (V7.1) ──────────────────────────────
   Audit V7.2: kelas-kelas ini dipakai Index.html (view magang-self) sejak
   V7.1 namun definisinya tertinggal — panel tampil polos tanpa tata letak.
   Strip identitas (avatar + nama + chip status) di atas, grid fakta kunci
   (periode, bagian, pembimbing, kampus) di bawahnya. */
.info-strip { display: flex; align-items: center; gap: 14px; }
.info-avatar {
  width: 48px; height: 48px;
  font-size: 18px; flex: none;
  box-shadow: var(--shadow-sm);
}
.info-ident { flex: 1; min-width: 0; }
.info-nama {
  font-size: 15.5px; font-weight: 700; letter-spacing: -.1px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.info-meta { font-size: 12px; color: var(--text-secondary); margin-top: 2px; }
.info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 10px 16px;
  margin-top: 14px; padding-top: 14px;
  border-top: 1px solid var(--border);
}
@media (max-width: 480px) {
  .info-grid { grid-template-columns: 1fr 1fr; }
}
.info-item { min-width: 0; }
.info-item-label {
  font-size: 10.5px; font-weight: 700; letter-spacing: .6px;
  text-transform: uppercase; color: var(--text-muted);
}
.info-item-val {
  font-size: 13px; font-weight: 600; color: var(--text-primary);
  margin-top: 2px; overflow-wrap: anywhere;
}

/* Chip kecil */
.chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 2px 9px; border-radius: var(--radius-full);
  background: var(--slate-100); color: var(--slate-600);
  font-size: 11px; font-weight: 700; border: 1px solid var(--slate-200);
}
.chip.is-danger { background: var(--danger-bg); color: var(--danger); border-color: var(--danger-bd); }

/* Badge tambahan Fase 2 (persetujuan) */
.badge-approved { background: var(--info-bg);    color: var(--info);    border-color: var(--info-bd); }
.badge-selesai  { background: var(--success-bg); color: var(--success); border-color: var(--success-bd); }
.badge-diambil  { background: var(--success-bg); color: var(--success); border-color: var(--success-bd); }
.badge-rejected { background: var(--danger-bg);  color: var(--danger);  border-color: var(--danger-bd); }

/* Preview foto/bukti pada modal */
.file-preview {
  margin-top: 8px; border-radius: var(--radius-control); overflow: hidden;
  border: 1px solid var(--border); display: none;
}
.file-preview.is-visible { display: block; }
.file-preview img { width: 100%; max-height: 190px; object-fit: contain; background: var(--slate-50); }

/* ════════════════════════════════════════════════════════════════════════════
   V6.10 — AGENDA PIMPINAN, KETERSEDIAAN & BRIEFING PAGI
   1) Timeline "Hari Ini & Besok" halaman Agenda (pengganti daftar polos)
   2) Papan ketersediaan pimpinan (dashboard = pengumuman; agenda = + kontrol)
   3) Kartu Briefing Pagi di dashboard (data lengkap untuk semua user)
   4) Baris foto pimpinan di modal Kelola Pimpinan (kamera/galeri)
   ════════════════════════════════════════════════════════════════════════════ */

/* Footer kartu generik (dipakai papan ketersediaan; aman dipakai kartu lain) */
.card-footer {
  padding: 10px 18px;
  border-top: 1px solid var(--border);
  background: var(--slate-50);
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}

/* ── 1. TIMELINE AGENDA (Hari Ini & Besok) ─────────────────────────────── */
.agd-tl { display: flex; flex-direction: column; }
.agd-tl-item {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 4px 0;
}
.agd-tl-time {
  flex: none; width: 92px; text-align: right;
  font-size: 13px; font-weight: 800; color: var(--brand-700);
  font-variant-numeric: tabular-nums; line-height: 1.3; padding-top: 3px;
}
.agd-tl-time span { display: block; font-size: 11px; font-weight: 600; color: var(--text-muted); }
.agd-tl-rail {
  flex: none; width: 14px; align-self: stretch;
  display: flex; justify-content: center; position: relative;
}
.agd-tl-rail::before {
  content: ''; position: absolute; top: 0; bottom: 0; left: 50%;
  width: 2px; margin-left: -1px; background: var(--slate-200);
}
.agd-tl-item:first-child .agd-tl-rail::before { top: 9px; }
.agd-tl-item:last-child  .agd-tl-rail::before { bottom: calc(100% - 15px); }
.agd-tl-dot {
  position: relative; z-index: 1;
  width: 11px; height: 11px; margin-top: 6px; border-radius: 50%;
  background: var(--brand-500);
  box-shadow: 0 0 0 3px var(--brand-100);
}
.agd-tl-item.is-eks    .agd-tl-dot { background: var(--warning); box-shadow: 0 0 0 3px var(--warning-bg); }
.agd-tl-item.is-daring .agd-tl-dot { background: var(--info);    box-shadow: 0 0 0 3px var(--info-bg); }
.agd-tl-body {
  flex: 1; min-width: 0;
  padding: 8px 12px; margin-bottom: 8px;
  background: var(--slate-50);
  border: 1px solid var(--slate-100);
  border-radius: var(--radius-md);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.agd-tl-item:hover .agd-tl-body { border-color: var(--brand-300); box-shadow: var(--shadow-sm); }
.agd-tl-title { font-size: 13.5px; font-weight: 700; color: var(--text-primary); }
.agd-tl-meta {
  display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 4px;
  font-size: 11.5px; color: var(--text-secondary);
}
.agd-tl-meta span { display: inline-flex; align-items: center; gap: 5px; min-width: 0; }
.agd-tl-meta svg { width: 12px; height: 12px; flex: none; opacity: .75; }
.agd-jenis {
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px;
  padding: 2px 8px; border-radius: var(--radius-full);
  background: var(--brand-50); color: var(--brand-700);
  border: 1px solid var(--brand-200);
}
.agd-tl-item.is-eks    .agd-jenis { background: var(--warning-bg); color: var(--warning); border-color: var(--warning-bd); }
.agd-tl-item.is-daring .agd-jenis { background: var(--info-bg);    color: var(--info);    border-color: var(--info-bd); }
.agd-tl-sep {
  font-size: 11.5px; font-weight: 800; color: var(--text-secondary);
  text-transform: uppercase; letter-spacing: .5px;
  margin: 12px 0 8px; padding-top: 10px;
  border-top: 1px dashed var(--slate-200);
}
.agd-tl.is-besok .agd-tl-dot { background: var(--slate-300); box-shadow: 0 0 0 3px var(--slate-100); }
@media (max-width: 560px) {
  .agd-tl-time { width: 46px; font-size: 12px; }
  .agd-tl-time span { display: none; } /* jam selesai tampil di badan pada layar sempit */
}

/* ── 2. PAPAN KETERSEDIAAN PIMPINAN ────────────────────────────────────── */
.ket-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(235px, 1fr));
  gap: 10px;
}
.ket-card {
  display: flex; gap: 11px; align-items: flex-start;
  padding: 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.ket-card:hover { border-color: var(--brand-300); box-shadow: var(--shadow-sm); }
.ket-info { flex: 1; min-width: 0; }
.ket-nama {
  font-size: 13px; font-weight: 700; color: var(--text-primary);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ket-jab {
  font-size: 11px; color: var(--text-secondary); margin-top: 1px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ket-status {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: 6px; padding: 3px 10px;
  font-size: 11px; font-weight: 700;
  border-radius: var(--radius-full);
  border: 1px solid transparent;
  white-space: nowrap;
}
.ket-status .dot { width: 7px; height: 7px; border-radius: 50%; flex: none; background: currentColor; }
.ket-status i { font-style: normal; opacity: .8; }
.ket-status.st-kantor   { background: var(--success-bg); color: var(--success); border-color: var(--success-bd); }
.ket-status.st-kegiatan { background: var(--info-bg);    color: var(--info);    border-color: var(--info-bd); }
.ket-status.st-luar     { background: var(--warning-bg); color: var(--warning); border-color: var(--warning-bd); }
.ket-status.st-cuti     { background: var(--slate-100);  color: var(--slate-600); border-color: var(--slate-200); }
.ket-status.st-absen    { background: var(--danger-bg);  color: var(--danger);  border-color: var(--danger-bd); }
.ket-sub {
  font-size: 11px; color: var(--text-secondary); margin-top: 5px; line-height: 1.45;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.ket-kontrol { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.ket-kontrol .ket-set,
.ket-kontrol .ket-note-input {
  width: 100%;
  font-size: 11.5px;
  padding: 6px 9px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text-primary);
}
.ket-kontrol .ket-set:focus,
.ket-kontrol .ket-note-input:focus {
  outline: none; border-color: var(--brand-500);
  box-shadow: 0 0 0 3px rgba(20,184,166,.14);
}
.ket-kontrol .ket-set:disabled,
.ket-kontrol .ket-note-input:disabled { opacity: .55; }

/* ── 3. KARTU BRIEFING PAGI (dashboard) ────────────────────────────────── */
.brief-body { max-height: 420px; overflow-y: auto; }
.brief-sec { margin-bottom: 14px; }
.brief-sec:last-child { margin-bottom: 0; }
.brief-sec-title {
  display: flex; align-items: center; gap: 7px;
  font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .6px;
  color: var(--text-secondary);
  margin-bottom: 6px;
}
.brief-sec-title svg { width: 13px; height: 13px; flex: none; color: var(--brand-600); }
.brief-item {
  display: flex; gap: 10px; align-items: baseline;
  padding: 6px 0;
  font-size: 12.5px; line-height: 1.5;
  border-bottom: 1px dashed var(--slate-100);
}
.brief-item:last-child { border-bottom: none; }
.brief-item.is-done { opacity: .55; }
.brief-item.is-done .brief-text b { text-decoration: line-through; }
.brief-time {
  flex: none; min-width: 84px;
  font-weight: 800; font-size: 12px; color: var(--brand-700);
  font-variant-numeric: tabular-nums;
}
.brief-text { flex: 1; min-width: 0; color: var(--text-primary); overflow-wrap: anywhere; }
.brief-mut { color: var(--text-secondary); }
.brief-tag {
  display: inline-block;
  font-size: 9.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .5px;
  padding: 1px 7px; border-radius: var(--radius-full);
  background: var(--warning-bg); color: var(--warning); border: 1px solid var(--warning-bd);
  vertical-align: 1px;
}
.brief-warn {
  display: flex; align-items: flex-start; gap: 8px;
  font-size: 12.5px; line-height: 1.5; color: var(--text-primary);
  background: var(--warning-bg);
  border: 1px solid var(--warning-bd);
  border-radius: var(--radius-sm);
  padding: 8px 11px; margin: 6px 0;
}
.brief-warn svg { width: 14px; height: 14px; flex: none; margin-top: 2px; color: var(--warning); }
.brief-warn.is-danger { background: var(--danger-bg); border-color: var(--danger-bd); }
.brief-warn.is-danger svg { color: var(--danger); }
.brief-kosong {
  display: flex; align-items: center; gap: 12px;
  padding: 18px 6px;
  font-size: 13px; color: var(--text-primary);
}
.brief-kosong svg {
  width: 30px; height: 30px; flex: none; padding: 7px;
  border-radius: var(--radius-control);
  background: var(--success-bg); color: var(--success);
}
.brief-kosong .brief-mut { font-size: 12px; margin-top: 2px; }

/* ── 4. FOTO PIMPINAN (modal Kelola Pimpinan) ──────────────────────────── */
.pmp-foto-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.pmp-foto-preview {
  width: 58px !important; height: 58px !important;
  font-size: 17px;
  box-shadow: var(--shadow-sm);
}
.pmp-foto-btns { display: flex; gap: 8px; flex-wrap: wrap; }

/* check-item dengan avatar (kotak pilih pimpinan di form agenda) */
.check-item .avatar-foto { margin-right: -2px; }