/* ============================================================
   STYLE-PATCH.CSS
   Muat TERAKHIR, setelah style.css dan style-mobile.css:
     <link rel="stylesheet" href="css/style.css">
     <link rel="stylesheet" href="css/style-mobile.css">
     <link rel="stylesheet" href="css/style-patch.css">
   ============================================================ */


/* ============================================================
   1. DESKTOP — SCROLL FIX
   Pastikan body & #appWrap tidak memblokir scroll vertikal
   ============================================================ */

html, body {
  overflow-x: hidden;
  overflow-y: auto;   /* paksa selalu bisa scroll vertikal */
  height: auto;
}

#appWrap {
  display: block;     /* hapus potensi flex/grid yang collapse height */
  min-height: 100vh;
}


/* ============================================================
   2. MOBILE — SCROLL FIX
   Hapus semua overflow yang mengunci halaman di mobile
   ============================================================ */

@media (max-width: 768px) {

  html, body {
    height: auto !important;
    min-height: 100%;
    overflow-x: hidden !important;
    overflow-y: auto !important;       /* KUNCI: jangan pernah hidden/clip */
    overscroll-behavior-y: auto;       /* cabut contain agar native scroll jalan */
  }

  /* appWrap harus mengalir secara normal, bukan fixed/absolute */
  #appWrap {
    display: block !important;
    position: static !important;
    height: auto !important;
    min-height: 100dvh;
    overflow: visible !important;
  }

  /* mainContent: buang height & overflow yang mengunci */
  #mainContent {
    height: auto !important;
    min-height: calc(100dvh - 56px);
    overflow-x: hidden !important;
    overflow-y: visible !important;   /* konten mengalir ke body, bukan terkunci di sini */
    -webkit-overflow-scrolling: touch;
  }

  /* Saat sidebar terbuka, body.overflow:hidden dari JS harus
     tetap memblokir scroll BODY tapi mainContent tetap normal.
     Ini ditangani oleh JS toggleSidebar() yang sudah ada —
     tidak perlu CSS tambahan. */
}


/* ============================================================
   3. CHART / CANVAS — RESPONSIVE FIX
   Chart.js butuh container dengan height eksplisit.
   Saat grid stack jadi 1 kolom, chart-wrap jangan collapse.
   ============================================================ */

/* Desktop — ukuran standar */
.chart-wrap {
  position: relative;
  height: 300px;
  width: 100%;
  min-height: 220px;
}

.chart-wrap canvas {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
}

/* Mobile — tinggi lebih kecil agar tidak terlalu tinggi */
@media (max-width: 768px) {
  .chart-wrap {
    height: 220px !important;
    min-height: 180px !important;
  }
}

@media (max-width: 480px) {
  .chart-wrap {
    height: 180px !important;
    min-height: 140px !important;
  }
}


/* ============================================================
   4. GRID ADMIN DASHBOARD — Top 10 + Kalibrasi
   Grid "1fr 1.6fr" di-stack jadi 1 kolom di mobile;
   pastikan kedua card mendapat height yang benar.
   ============================================================ */

@media (max-width: 768px) {

  /* Container grid 1fr 1.6fr → sudah ditangani style-mobile.css
     tapi kita pastikan card di dalamnya punya sizing yang benar */

  /* Card kalibrasi & Top 10 (anak dari grid 1fr 1.6fr) */
  [style*="grid-template-columns:1fr 1.6fr"] > .card,
  [style*="grid-template-columns: 1fr 1.6fr"] > .card {
    margin-bottom: 12px !important;
    width: 100% !important;
  }

  /* Tab nav chart jangan overflow */
  #cp-bahan,
  #cp-alat {
    width: 100% !important;
    overflow: hidden !important;
  }
}


/* ============================================================
   5. CHART.JS — pastikan resize trigger saat grid berubah
   Ini CSS saja tidak cukup; tambahkan juga JS di bawah.
   Petunjuk: tambahkan snippet JS ini ke nav.js atau misc.js
   setelah fungsi goTo():

   window.addEventListener('resize', function() {
     if (window._chartBahan) window._chartBahan.resize();
     if (window._chartAlat)  window._chartAlat.resize();
   });

   Dan saat switchChart() dipanggil:
   setTimeout(function() {
     if (t === 'bahan' && window._chartBahan) window._chartBahan.resize();
     if (t === 'alat'  && window._chartAlat)  window._chartAlat.resize();
   }, 50);
   ============================================================ */


/* ============================================================
   6. SIDEBAR BACKDROP — z-index safety
   ============================================================ */

#sidebarBackdrop {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 1199;
  background: rgba(0, 0, 0, 0.5);
}

#sidebarBackdrop.show {
  display: block;
}
/* ============================================================
   7. MOBILE TOPBAR — fixed di atas, tidak ikut scroll
   ============================================================ */

@media (max-width: 768px) {
  #mobileTopbar {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 1100 !important;
  }

  /* mainContent mulai di bawah topbar */
  #mainContent {
    padding-top: 68px !important;
  }
}
/* ============================================================
   8. SAFE AREA — iPhone notch / home bar
   ============================================================ */

@supports (padding-bottom: env(safe-area-inset-bottom)) {
  @media (max-width: 768px) {
    #mainContent {
      padding-bottom: calc(20px + env(safe-area-inset-bottom)) !important;
    }
  }
}
/* ============================================================
   9. SWEETALERT2 — pastikan selalu di atas modal-overlay (z:9000)
   ============================================================ */
.swal2-container {
  z-index: 10000 !important;
}

/* ============================================================
   10. FORMULIR TAGIHAN BAHAN KIMIA
   Layout meniru "Formulir Penggunaan Bahan Kimia Untuk Penelitian"
   (Departemen TPHP UGM) — dipakai di ringkasan mahasiswa, modal
   detail admin, dan export laporan.
   ============================================================ */
.tagihan-form {
  background: #fff;
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 10px;
  overflow: hidden;
  font-size: 13px;
}
 
.tagihan-form-header {
  padding: 14px 16px 10px;
  border-bottom: 1px solid var(--border, #e2e8f0);
}
 
.tagihan-form-header-row {
  display: flex;
  gap: 6px;
  padding: 2px 0;
  line-height: 1.4;
}
 
.tagihan-form-header-label {
  flex: 0 0 150px;
  color: var(--muted, #64748b);
}
 
.tagihan-form-header-sep { flex: 0 0 10px; }
 
.tagihan-form-header-value {
  flex: 1;
  font-weight: 600;
  border-bottom: 1px dotted var(--border, #cbd5e1);
  min-height: 18px;
}
.tagihan-form-header-value.is-blank {
  color: transparent; /* garis titik-titik kosong, siap ditulis tangan */
}
 
.tagihan-form-table {
  width: 100%;
  border-collapse: collapse;
}
 
.tagihan-form-table th,
.tagihan-form-table td {
  border: 1px solid var(--border, #e2e8f0);
  padding: 6px 8px;
  font-size: 12.5px;
}
 
.tagihan-form-table thead th {
  background: #f8fafc;
  font-weight: 700;
  text-align: center;
  color: #334155;
}
 
.tagihan-form-table td.col-no { text-align: center; width: 36px; color: var(--muted, #64748b); }
.tagihan-form-table td.col-jumlah { text-align: center; white-space: nowrap; }
.tagihan-form-table td.col-harga,
.tagihan-form-table td.col-total { text-align: right; white-space: nowrap; }
 
.tagihan-form-table tfoot td {
  font-weight: 700;
  background: #f8fafc;
}
.tagihan-form-table tfoot td.label { text-align: right; }
.tagihan-form-table tfoot td.value { text-align: right; color: var(--warning, #c2410c); }
.tagihan-form-table tfoot tr.total-row td { font-size: 14px; }
 
.tagihan-form-terbilang {
  padding: 10px 16px;
  border-top: 1px solid var(--border, #e2e8f0);
  font-size: 12.5px;
}
.tagihan-form-terbilang .label { color: var(--muted, #64748b); margin-right: 6px; }
.tagihan-form-terbilang .value { font-style: italic; font-weight: 600; }
 
/* Versi cetak/PDF (export laporan) — sedikit lebih ringkas margin/border */
.tagihan-form.print-mode {
  font-size: 12px;
  border-color: #000;
}
.tagihan-form.print-mode .tagihan-form-table th,
.tagihan-form.print-mode .tagihan-form-table td {
  border-color: #000;
}

/* ============================================================
   11. CARD ACCENT GRADIENT (biru→oranye) di atas setiap .card, .stat-card
   ============================================================ */
.card,
.stat-card,
.db-card,
.db-stat-card,
.db-tracker-card {
  position: relative;
  overflow: hidden;
}
.card::before,
.stat-card::before,
.db-card::before,
.db-stat-card::before,
.db-tracker-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, #004A74 0%, #1c7ba3 50%, #C9A227 100%);
  border-radius: 20px 20px 0 0;
  opacity: 0.72;
  pointer-events: none;
  z-index: 1;
}
.db-stat-card::before { border-radius: 14px 14px 0 0; }
.db-card::before       { border-radius: 14px 14px 0 0; }
.db-tracker-card::before { border-radius: 14px 14px 0 0; }

/* ============================================================
   12. COUNT-UP ANIMATION STAT CARDS
   ============================================================ */
.stat-val, .stat-value, .db-stat-value {
  transition: opacity 0.3s;
}

/* ============================================================
   13. OCR — SCAN KARTU BON (modal mdlOcr, js/ocr.js)
   ============================================================ */

/* -- Step indicator -- */
.ocr-steps {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 18px;
}
.ocr-step-dot {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--muted);
  white-space: nowrap;
}
.ocr-step-num {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11.5px;
  background: #f1f5f9;
  color: var(--muted);
  flex-shrink: 0;
}
.ocr-step-dot.ocr-step-active { color: var(--primary); }
.ocr-step-dot.ocr-step-active .ocr-step-num { background: var(--primary); color: #fff; }
.ocr-step-dot.ocr-step-done { color: var(--success); }
.ocr-step-dot.ocr-step-done .ocr-step-num { background: var(--success); color: #fff; }
.ocr-step-dot.ocr-step-idle { color: var(--muted); }
.ocr-step-line {
  flex: 1;
  height: 2px;
  background: var(--border);
  min-width: 16px;
}

/* -- Drop zone -- */
.ocr-drop-zone {
  border: 2px dashed var(--border);
  border-radius: 16px;
  padding: 36px 20px;
  text-align: center;
  cursor: pointer;
  transition: all 0.15s;
  background: #f8fafc;
}
.ocr-drop-zone:hover { border-color: var(--primary); background: var(--primary-light); }
.ocr-drop-zone.ocr-drag-over { border-color: var(--primary); background: var(--primary-light); }

/* -- Preview foto -- */
.ocr-preview-img {
  width: 100%;
  max-height: 320px;
  object-fit: contain;
  border-radius: 14px;
  border: 1.5px solid var(--border);
  background: #f1f5f9;
}

/* -- Badge tingkat keyakinan OCR per baris -- */
.ocr-conf-high, .ocr-conf-med, .ocr-conf-low {
  display: inline-flex;
  align-items: center;
  font-size: 11px;
  font-weight: 700;
  padding: 3px 7px;
  border-radius: 999px;
  white-space: nowrap;
}
.ocr-conf-high { background: #dcfce7; color: #166534; }
.ocr-conf-med  { background: #fef3c7; color: #92400e; }
.ocr-conf-low  { background: #fee2e2; color: #991b1b; }

/* ============================================================
   14. HERO-CARD — FIX KONTRAS TEKS
   Dipakai di header section Denah Loker, Denah Meja Kerja, dan
   Pencarian Dokumen ISO (lihat index.html). Class ini dipakai
   dengan teks putih di dalamnya (color:#fff / rgba(255,255,255,.65))
   tapi belum pernah punya definisi background di file CSS manapun,
   jadi teks putihnya nyaris tidak terlihat di atas background
   halaman yang terang. Fix: beri background gradasi gelap yang
   sama dengan .dash-hero supaya teks putih di dalamnya kontras.
   ============================================================ */
.hero-card {
  position: relative;
  overflow: hidden;
  border-radius: 18px;
  padding: 18px 22px;
  background: linear-gradient(120deg, #0a0f1e 0%, #003654 58%, #004A74 100%);
  box-shadow: 0 10px 26px rgba(29,78,216,0.25);
}
.hero-card::after {
  content: '';
  position: absolute; right: -50px; top: -50px;
  width: 160px; height: 160px; border-radius: 50%;
  background: radial-gradient(circle, rgba(201,162,39,0.3), transparent 70%);
  pointer-events: none;
}
.hero-card > * { position: relative; z-index: 1; }

/* ============================================================
   15. CHECKLIST SIMPEL — Perawatan Alat, K3, Pemeriksaan Ruang
   Kotak centang besar & mudah disentuh, meniru cara mengisi
   formulir kertas: cukup tap, tanpa mengetik tanggal/nama.
   ============================================================ */
.cp-chk-label {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  user-select: none;
}
.cp-chk-label input[type="checkbox"] {
  width: 20px;
  height: 20px;
  cursor: pointer;
  accent-color: var(--success, #059669);
}
.k3-opt {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 10px;
  border-radius: 999px;
  margin-right: 8px;
  font-size: 12.5px;
  cursor: pointer;
  border: 1.5px solid var(--border);
}
.k3-opt input[type="radio"] { width: 16px; height: 16px; cursor: pointer; }
.k3-yes:has(input:checked) { background: #dcfce7; border-color: #059669; color: #166534; }
.k3-no:has(input:checked)  { background: #fee2e2; border-color: #dc2626; color: #991b1b; }
.rg-kunjungan-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  margin-bottom: 6px;
  font-size: 13px;
}

/* >>> CLOUD: daftar link folder penyimpanan cloud (js/penyimpananCloud.js) */
.cld-cardlist {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 14px;
}
.cld-card { padding: 16px; margin-bottom: 0; }
.cld-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
}
.cld-card-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 6px;
}
.cld-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}
.cld-badge-drive    { background: #e8f1f5; color: var(--primary); }
.cld-badge-onedrive { background: #eef2ff; color: #3730a3; }
.cld-badge-other    { background: #f1f5f9; color: var(--muted); }
.cld-card-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.cld-card-actions .btn { flex: 1 1 150px; justify-content: center; }
/* Panel tree "Lihat Isi Folder" -- isinya (toolbar/tree/file row) pakai
   ulang class dok-* dari css/dokumen.css, di sini cukup wrapper +
   pesan peringatan batas item saja. */
.cld-tree-wrap {
  margin-top: 12px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--bg);
}
.cld-tree-warn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  font-size: 11.5px;
  color: #92400e;
  background: #fffbeb;
  border-bottom: 1px solid var(--border);
}