/* assets/css/village_db.css */

/* ANIMASI SCROLL & LOAD */
.reveal {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal.active {
  opacity: 1;
  transform: translateY(0);
}

@keyframes fadeUpLoad {
  to { opacity: 1; transform: translateY(0); }
}

.vdb-icon { opacity: 0; transform: translateY(20px); animation: fadeUpLoad 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.1s forwards; }
.vdb-title-wrap h1 { opacity: 0; transform: translateY(20px); animation: fadeUpLoad 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.2s forwards; }
.vdb-title-wrap p { opacity: 0; transform: translateY(20px); animation: fadeUpLoad 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.3s forwards; }
.vdb-tabs { opacity: 0; transform: translateY(20px); animation: fadeUpLoad 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.4s forwards; }
.vdb-main-box { opacity: 0; transform: translateY(20px); animation: fadeUpLoad 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.5s forwards; }

html, body{ width:100%; max-width:100%; overflow-x:hidden; }
*, *::before, *::after{ box-sizing:border-box; }
img, svg, video, canvas{ max-width:100%; height:auto; }

:root{
  --surface:#fff;
  --surface-2:#f8fafc;
  --border:#e6eaf0;
  --border-2:#eef2f7;
  --text:#0f172a;
  --muted:#64748b;
  --brand:#003249;
  --brand-2:#0b3d2a;
  --warn:#fff7ed;
  --shadow-sm:0 1px 2px rgba(16,24,40,.06);
  --shadow-md:0 10px 30px rgba(16,24,40,.08);
  --radius:14px;
  --ring:0 0 0 4px rgba(0,50,73,.12);
  --font-base:15px;
}

.vdb-page{ padding-top:44px; padding-bottom:70px; font-size:var(--font-base); color:var(--text); }
.container.vdb-page{ max-width:1240px; width:100%; padding-left:16px; padding-right:16px; margin:0 auto; }

.vdb-header{ display:flex; align-items:center; gap:18px; margin-bottom:22px; min-width:0; }
.vdb-icon{ width:76px;height:76px; display:flex;align-items:center;justify-content:center; background:transparent !important; border:0 !important; box-shadow:none !important; border-radius:0 !important; padding:0 !important; flex:0 0 auto; }
.vdb-icon-img{ width:100%; height:100%; object-fit:contain; display:block; }
.vdb-title-wrap{ min-width:0; }
.vdb-title-wrap h1{ font-size:36px; margin:0 0 6px; line-height:1.12; letter-spacing:-0.02em; }
.vdb-title-wrap p{ margin:0; font-size:15px; line-height:1.7; max-width:760px; color:var(--muted); }

/* KUNCI: Mencegah Grid Layout melebihi batas layar HP */
.vdb-layout{ display:grid; grid-template-columns:minmax(0,3fr) minmax(260px,1.1fr); gap:34px; margin-top:18px; min-width:0; }
.vdb-layout > div { min-width: 0; max-width: 100%; }

@media (max-width:980px){ .vdb-layout{ grid-template-columns:1fr; gap:22px; } }

/* TABS */
.vdb-tabs{ display:flex; gap:10px; margin-bottom:12px; padding:8px; background:rgba(255,255,255,.6); border:1px solid var(--border); border-radius:var(--radius); backdrop-filter:blur(6px); box-shadow:var(--shadow-sm); min-width:0; }
.vdb-tab-btn{ border:1px solid transparent; padding:11px 16px; background:transparent; font-size:14px; cursor:pointer; border-radius:999px; color:var(--brand); transition:all .18s ease; line-height:1.15; user-select:none; min-width:0; white-space:nowrap; }
.vdb-tab-btn:hover{ background:rgba(0,50,73,.06); }
.vdb-tab-btn.active{ background:var(--surface); border-color:rgba(0,50,73,.12); box-shadow:var(--shadow-sm); font-weight:700; }

.vdb-main-box{ border:1px solid var(--border); border-radius:var(--radius); background:var(--surface); box-shadow:var(--shadow-md); overflow:hidden; min-width:0; max-width: 100%; }
.vdb-tab-pane{ display:none; padding:26px 28px 30px; min-width:0; max-width: 100%; }
.vdb-tab-pane.active{ display:block; }
.vdb-desc-text{ font-size:15px; line-height:1.8; margin-top:8px; }

/* Search */
.village-search{ margin-bottom:14px; }
.village-search form{ display:flex; gap:10px; min-width:0; }
.village-search select { appearance: none; -webkit-appearance: none; width: 160px; min-width: 130px; padding: 12px 36px 12px 16px; border-radius: 12px; border: 1px solid var(--border); font-size: 14.5px; font-weight: 500; background-color: var(--surface); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; background-size: 16px; outline: none; color: var(--text); cursor: pointer; transition: all 0.2s ease; box-shadow: var(--shadow-sm); }
.village-search select:hover { border-color: rgba(0, 50, 73, 0.25); }
.village-search select:focus { border-color: var(--brand); box-shadow: var(--ring); }
.village-search input[type="text"]{ flex:1; min-width:0; padding:12px 14px; border-radius:12px; border:1px solid var(--border); font-size:15px; background:var(--surface); outline:none; transition:box-shadow .18s ease,border-color .18s ease; }
.village-search input[type="text"]:focus{ border-color:rgba(0,50,73,.35); box-shadow:var(--ring); }
.village-search button{ padding:12px 16px; border-radius:12px; border:1px solid rgba(0,50,73,.18); background:linear-gradient(180deg,#0a3b54,var(--brand)); color:#e5f4ef; font-size:14px; font-weight:700; cursor:pointer; transition:transform .12s ease, box-shadow .18s ease, opacity .18s ease; box-shadow:var(--shadow-sm); }
.village-search button:hover{ opacity:.95; box-shadow:var(--shadow-md); }
.village-search button:active{ transform:translateY(1px); }

.village-list-container{ margin-top:14px; }

/* Cards */
.village-card{ border:1px solid var(--border); border-radius:var(--radius); padding:16px 18px; margin-bottom:14px; background:var(--surface); box-shadow:var(--shadow-sm); transition:transform .15s ease, box-shadow .2s ease, border-color .2s ease; display:flex; gap:14px; align-items:stretch; min-width:0; }
.village-card:hover{ transform:translateY(-2px); box-shadow:var(--shadow-md); border-color:rgba(0,50,73,.18); }
.village-card h2{ margin:0 0 6px; font-size:18px; letter-spacing:-0.01em; }
.village-meta{ font-size:13px; color:var(--muted); margin-bottom:10px; }
.village-desc{ font-size:14px; line-height:1.7; color:#334155; margin-bottom:12px; }
.village-card .village-info{ flex:1; min-width:0; }
.village-card .village-cover{ width:230px; max-width:42%; min-height:130px; border-radius:12px; border:1px solid rgba(0,0,0,.06); background:#f3f4f6; background-size:cover; background-position:center; box-shadow:var(--shadow-sm); min-width:0; }

/* Buttons */
.btn-view, .btn-locked, .trace-btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; font-size:13px; padding:9px 12px; border-radius:999px; text-decoration:none; border:1px solid transparent; transition:all .18s ease; white-space:nowrap; }
.btn-view{ background:linear-gradient(180deg,#0e4a34,var(--brand-2)); color:#e5f4ef; box-shadow:var(--shadow-sm); }
.btn-view:hover{ opacity:.95; box-shadow:var(--shadow-md); }
.btn-locked{ background:#f1f5f9; color:#64748b; border-color:#e2e8f0; }
.btn-locked:hover{ background:#eaf0f6; }
.trace-btn{ margin-top:8px; background:linear-gradient(180deg,#0a3b54,var(--brand)); color:#e5f4ef; font-size:13.5px; font-weight:800; box-shadow:var(--shadow-sm); }
.trace-btn:hover{ opacity:.95; box-shadow:var(--shadow-md); }

/* Subtabs */
.subtabs{ display:flex; gap:10px; padding:10px; margin-bottom:14px; background:var(--surface-2); border:1px solid var(--border); border-radius:var(--radius); min-width:0; }
.subtab-btn{ border:1px solid transparent; background:transparent; border-radius:999px; padding:9px 14px; font-size:13px; cursor:pointer; color:var(--brand); transition:all .18s ease; min-width:0; white-space:nowrap; }
.subtab-btn:hover{ background:rgba(0,50,73,.06); }
.subtab-btn.active{ background:var(--surface); border-color:rgba(0,50,73,.14); font-weight:800; box-shadow:var(--shadow-sm); }
.subtab-pane{ display:none; min-width:0; }
.subtab-pane.active{ display:block; }

/* Tables Wrapper */
.vdb-table-wrap{ width:100%; max-width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch; border:1px solid var(--border); border-radius:var(--radius); margin-top:12px; background:var(--surface); box-shadow:var(--shadow-sm); }
table.vdb-table{ width:100%; border-collapse:separate; border-spacing:0; font-size:14px; min-width:720px; }
.vdb-table thead th{ background:linear-gradient(180deg,#f8fafc,#f3f6fb); text-align:left; padding:12px 14px; border-bottom:1px solid var(--border); color:#0f172a; font-size:13px; vertical-align:middle; white-space:nowrap; }
.vdb-table tbody td{ padding:12px 14px; border-bottom:1px solid var(--border-2); vertical-align:top; color:#334155; line-height:1.6; word-break:break-word; }
.vdb-table tbody tr:nth-child(even) td{ background:#fbfdff; }

.restricted-box{ background:var(--warn); border:1px solid #fed7aa; border-radius:var(--radius); padding:14px 16px; margin-top:12px; box-shadow:var(--shadow-sm); }

/* Story & Sidebar */
.story-card{ border:1px solid var(--border); border-radius:var(--radius); padding:16px 16px; margin-bottom:14px; background:var(--surface); display:grid; grid-template-columns:110px 1fr; gap:14px; box-shadow:var(--shadow-sm); transition:transform .15s ease, box-shadow .2s ease, border-color .2s ease; min-width:0; }
.story-card:hover{ transform:translateY(-2px); box-shadow:var(--shadow-md); border-color:rgba(0,50,73,.18); }
.story-thumb{ width:110px;height:82px; border-radius:12px; background:#f3f4f6; background-size:cover; background-position:center; border:1px solid rgba(0,0,0,.04); }
.story-card h4{ margin:0 0 8px; font-size:15px; }
.story-card p{ margin:0; font-size:14px; color:#334155; line-height:1.65; }
.story-meta{ font-size:12px; color:var(--muted); margin-top:10px; }

.vdb-sidebar{ font-size:14px; min-width:0; }
.vdb-sidebar-section{ border-top:3px solid var(--brand); padding-top:12px; margin-bottom:22px; }
.vdb-sidebar h3{ font-size:12px; margin:0 0 12px; text-transform:uppercase; letter-spacing:.10em; }
.vdb-cat-list a{ display:block; padding:12px 12px; border:1px solid var(--border); border-radius:12px; text-decoration:none; color:var(--text); background:var(--surface); margin-bottom:10px; transition:all .18s ease; box-shadow:var(--shadow-sm); }
.vdb-cat-list a:hover{ border-color:rgba(0,50,73,.18); box-shadow:var(--shadow-md); transform:translateY(-1px); }

/* Most Visited Thumb */
.vdb-download-item{ display:flex; gap:12px; padding:12px 0; border-bottom:1px solid var(--border); min-width:0; }
.vdb-download-thumb { width: 44px; height: 44px; border-radius: 10px; background-color: var(--surface-2); border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; padding: 8px; box-shadow: var(--shadow-sm); flex-shrink: 0; }
.vdb-download-thumb img { width: 100%; height: 100%; object-fit: contain; opacity: 0.8; transition: opacity 0.2s ease; }
.vdb-download-item:hover .vdb-download-thumb img { opacity: 1; }
.vdb-download-item a{ font-size:14px; text-decoration:none; color:var(--text); }
.vdb-download-item a:hover{ text-decoration:underline; }
.vdb-download-item small{ display:block; font-size:12px; color:var(--muted); margin-top:4px; }

/* Trace commodity grid */
.vdb-commodity-grid{ display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:14px; }
.vdb-commodity-card{ border:1px solid var(--border); border-radius:var(--radius); background:var(--surface); box-shadow:var(--shadow-sm); padding:12px; transition:transform .15s ease, box-shadow .2s ease, border-color .2s ease; min-width:0; }
.vdb-commodity-card:hover{ transform:translateY(-2px); box-shadow:var(--shadow-md); border-color:rgba(0,50,73,.18); }
.vdb-commodity-thumb{ width:100%; height:120px; border-radius:12px; background:#f3f4f6; background-size:cover; background-position:center; border:1px solid rgba(0,0,0,.04); margin-bottom:10px; }
.vdb-commodity-name{ font-size:14px; font-weight:800; margin-bottom:8px; }

/* Modal */
.vdb-modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(15, 23, 42, 0.65); backdrop-filter: blur(4px); z-index: 99999; display: flex; align-items: center; justify-content: center; opacity: 0; visibility: hidden; transition: all 0.3s ease; }
.vdb-modal-overlay.active { opacity: 1; visibility: visible; }
.vdb-modal-content { background: var(--surface); width: 90%; max-width: 650px; max-height: 85vh; border-radius: var(--radius); box-shadow: 0 20px 40px rgba(0,0,0,0.15); transform: translateY(30px) scale(0.95); transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1); display: flex; flex-direction: column; overflow: hidden; }
.vdb-modal-overlay.active .vdb-modal-content { transform: translateY(0) scale(1); }
.vdb-modal-header { padding: 18px 22px; border-bottom: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center; background: linear-gradient(180deg,#f8fafc,#f3f6fb); }
.vdb-modal-header h3 { margin: 0; font-size: 18px; color: var(--text); font-weight: 700; }
.vdb-modal-close { background: none; border: none; font-size: 26px; cursor: pointer; color: var(--muted); line-height: 1; }
.vdb-modal-close:hover { color: #e11d48; }
.vdb-modal-body { padding: 22px; overflow-y: auto; }
.vdb-modal-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.vdb-modal-table th, .vdb-modal-table td { padding: 12px 14px; border-bottom: 1px solid var(--border-2); text-align: left; vertical-align: top; }
.vdb-modal-table th { width: 40%; color: var(--muted); font-weight: 600; background: #fbfdff; }
.vdb-modal-table td { color: var(--text); font-weight: 500; word-break: break-word; }
.vdb-modal-table tr:hover th, .vdb-modal-table tr:hover td { background: #f1f5f9; }

/* Mobile View Cards Container */
.forest-cards, .ntfp-cards{ display:none; }

/* =================================================================
   🔥 MOBILE RESPONSIVE (TAMPILAN RAPI SEPERTI APLIKASI)
   ================================================================= */
@media (max-width:560px){
  .vdb-title-wrap h1{ font-size:24px; }
  .vdb-icon{ width:52px; height:52px; }
  
  /* Pastikan padding tidak menghilangkan ruang elemen */
  .vdb-tab-pane{ padding:16px 14px 18px; }

  /* 1. TABS UTAMA: Geser / Scroll menyamping, hemat tempat */
  .vdb-tabs { 
      display: flex; 
      flex-direction: row; 
      flex-wrap: nowrap; 
      overflow-x: auto; 
      -webkit-overflow-scrolling: touch;
      scrollbar-width: none; /* Firefox */
      padding: 6px; 
      gap: 6px;
      margin-bottom: 14px;
  }
  .vdb-tabs::-webkit-scrollbar { display: none; } /* Chrome/Safari */
  .vdb-tab-btn { 
      flex: 0 0 auto; 
      width: auto; 
      padding: 8px 14px; 
      font-size: 13px; 
  }

  /* 2. SUBTABS (NTFP dll): Geser / Scroll menyamping juga */
  .subtabs { 
      display: flex; 
      flex-direction: row; 
      flex-wrap: nowrap; 
      overflow-x: auto; 
      -webkit-overflow-scrolling: touch;
      scrollbar-width: none;
      padding: 6px; 
      gap: 6px;
  }
  .subtabs::-webkit-scrollbar { display: none; }
  .subtab-btn { 
      flex: 0 0 auto; 
      width: auto; 
      padding: 8px 14px; 
      font-size: 12.5px; 
  }

  /* Tampilan Form dan Card Desa */
  .village-search form { flex-direction: column; }
  .village-search select, .village-search button { width: 100%; }
  
  .village-card { flex-direction: column; padding: 14px; }
  .village-card .village-cover { width: 100%; max-width: 100%; min-height: 180px; }
  
  .story-card { grid-template-columns: 1fr; }
  .story-thumb { width: 100%; height: 160px; }
  
  /* Grid 2 Kolom untuk trace komoditas agar lebih compact */
  .vdb-commodity-grid { grid-template-columns: 1fr 1fr; }

  /* 3. TABEL: Mencegah overflow, izinkan scroll ke kanan */
  .vdb-table-wrap {
      display: block;
      width: 100%;
      max-width: 100%;
      overflow-x: auto !important;
      -webkit-overflow-scrolling: touch;
      margin-top: 10px;
  }
  
  /* Anti-bug kotak kosong saat ganti tab */
  .vdb-tab-pane.active .reveal,
  .subtab-pane.active .reveal {
      opacity: 1 !important;
      transform: translateY(0) !important;
  }

  /* Sembunyikan card mobile bawaan karena HTML tidak ada di PHP */
  .forest-cards, .ntfp-cards{ display:none !important; }
}

@media (max-width:980px){
  .vdb-commodity-grid{ grid-template-columns:repeat(2, minmax(0,1fr)); }
}

/* =================================================================
   🔥 PERBAIKAN KOLOM TABEL NTFP (AGAR RAPI & BISA DISCROLL KANAN)
   ================================================================= */
table.vdb-table-ntfp { 
  border-collapse: collapse !important; 
  width: 100% !important; 
  min-width: 1000px !important; /* Standar lebar aman */
  font-size: 13px; 
  line-height: 1.4; 
}
.vdb-table-ntfp th, .vdb-table-ntfp td { 
  border: 1px solid #d0d7de !important; 
  padding: 8px 12px !important; 
  vertical-align: middle !important; 
}
.vdb-table-ntfp thead th { 
  background: #f3f4f6 !important; 
  font-weight: 800; 
  text-align: center !important; 
  white-space: nowrap; 
}
.vdb-table-ntfp tbody td { 
  background: #fff !important; 
  word-break: break-word; 
}
.vdb-table-ntfp tbody tr:nth-child(even) td { background: #fafafa !important; }

/* KUNCI: Kolom "Aksi" dan "No." dipaksa kecil */
.vdb-table-ntfp th:nth-child(1), .vdb-table-ntfp td:nth-child(1),
.vdb-table-ntfp th:nth-child(2), .vdb-table-ntfp td:nth-child(2) {
  width: 50px !important;
  min-width: 50px !important;
  max-width: 50px !important;
  text-align: center !important;
  padding: 6px !important;
  white-space: nowrap !important;
}

/* Kolom Teks Diberi Ruang Lebar */
.vdb-table-ntfp th:nth-child(n+3), 
.vdb-table-ntfp td:nth-child(n+3) {
  min-width: 130px;
}

/* Potong teks panjang menjadi 2 Baris saja agar tinggi tabel tetap konsisten */
.truncate-text {
  display: -webkit-box;
  -webkit-line-clamp: 2; 
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal;
  line-height: 1.4;
  color: #334155;
}

/* Desain Tombol Titik Tiga (Action) */
.btn-dots {
  background: transparent;
  border: none;
  font-size: 20px;
  font-weight: bold;
  line-height: 1;
  color: var(--brand);
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 6px;
  transition: all 0.2s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.btn-dots:hover {
  background: rgba(0, 50, 73, 0.1);
  transform: scale(1.1);
}

/* Tabel Forest Umum */
table.vdb-table-forest th, table.vdb-table-forest td { white-space: nowrap !important; }
.btn-detail-forest { background: linear-gradient(180deg,#0a3b54,var(--brand)); color: #fff; border: none; padding: 8px 14px; border-radius: 6px; cursor: pointer; font-size: 13px; font-weight: bold; transition: all 0.2s; box-shadow: var(--shadow-sm); white-space: nowrap; }
.btn-detail-forest:hover { opacity: 0.9; transform: translateY(-1px); box-shadow: var(--shadow-md); }
/* =================================================================
   🔥 TAMBAHAN UNTUK TOMBOL LOAD MORE (LIHAT SELENGKAPNYA)
   ================================================================= */
.load-more-wrapper {
  text-align: center;
  width: 100%;
  margin: 18px 0 24px 0;
}

.btn-load-more {
  display: none; /* Disembunyikan secara default, JS akan menampilkannya jika data > 5 */
  padding: 12px 28px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--brand);
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: var(--shadow-sm);
  letter-spacing: 0.01em;
}

.btn-load-more:hover {
  background: var(--surface);
  border-color: var(--brand);
  color: var(--brand-2);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.btn-load-more:active {
  transform: translateY(0);
}