/* ============================================================
   Admin Column Filter — filter kolom ala Google Sheets: ikon di
   tiap header tabel changelist (bukan filter bar terpisah), konsisten
   dengan filter kolom di Dashboard. Sage palette: #84A98C primary,
   #6B8C73 hover, #344E41 dark.
   ============================================================ */

th.acf-filterable { white-space: nowrap; }

.acf-filter-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  margin-left: 4px;
  padding: 0;
  border: 0;
  border-radius: 3px;
  background: transparent;
  color: #8B978B;
  font-size: 10px;
  line-height: 16px;
  cursor: pointer;
  vertical-align: middle;
}
.acf-filter-btn:hover { background: #E4E7E0; color: #4A6852; }
.acf-filter-btn.acf-filter-active { color: #FFFFFF; background: #84A98C; }
.acf-filter-btn.acf-filter-active:hover { background: #6B8C73; }
html.dark .acf-filter-btn { color: #9DA89E; }
html.dark .acf-filter-btn:hover { background: #2A322C; color: #DCE3D8; }
html.dark .acf-filter-btn.acf-filter-active { color: #1F2620; background: #84A98C; }
html.dark .acf-filter-btn.acf-filter-active:hover { background: #B5D1BB; }

.acf-filter-popover {
  position: fixed;
  z-index: 1100;
  width: 240px;
  max-width: calc(100vw - 16px);
  background: #FFFFFF;
  border: 1px solid #CDD3C7;
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(60, 83, 64, 0.18);
  font-size: 12px;
  font-weight: normal;
  color: #374E35;
}
html.dark .acf-filter-popover {
  background: #1F2620;
  border-color: #36403A;
  color: #DCE3D8;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
}

.acf-filter-search { padding: 6px; border-bottom: 1px solid #E4E7E0; }
.acf-filter-search input {
  width: 100%;
  box-sizing: border-box;
  padding: 4px 6px;
  border: 1px solid #CDD3C7;
  border-radius: 4px;
  font-size: 12px;
  background: #F8FBF6;
  color: #374E35;
}
.acf-filter-search input:focus { outline: none; background: #FFFFFF; }
html.dark .acf-filter-search { border-bottom-color: #36403A; }
html.dark .acf-filter-search input {
  background: #232A24; border-color: #4A5750; color: #DCE3D8;
}
html.dark .acf-filter-search input:focus { background: #1F2620; }

.acf-filter-actions {
  display: flex; gap: 10px; padding: 5px 8px; border-bottom: 1px solid #E4E7E0;
}
.acf-filter-actions button {
  background: none; border: 0; color: #4A6852; cursor: pointer; padding: 0; font-size: 11px;
  font-weight: 500;
}
.acf-filter-actions button:hover { color: #6B8C73; }
html.dark .acf-filter-actions { border-bottom-color: #36403A; }
html.dark .acf-filter-actions button { color: #B5D1BB; }
html.dark .acf-filter-actions button:hover { color: #DCE3D8; }

.acf-filter-list { max-height: 200px; overflow-y: auto; padding: 2px 8px; }
.acf-filter-list label {
  display: flex; align-items: center; gap: 6px; padding: 3px 2px; cursor: pointer;
  border-radius: 3px;
}
.acf-filter-list label:hover { background: #F1F5EE; }
html.dark .acf-filter-list label:hover { background: #2A322C; }
.acf-filter-list .acf-filter-empty { color: #8B978B; padding: 6px 2px; }

.acf-filter-footer {
  display: flex; justify-content: flex-end; gap: 6px; padding: 6px 8px;
  border-top: 1px solid #E4E7E0;
}
html.dark .acf-filter-footer { border-top-color: #36403A; }
.acf-filter-footer button { padding: 3px 10px; border-radius: 4px; font-size: 11px; cursor: pointer; }
.acf-filter-footer .acf-btn-ok { background: #84A98C; color: #FFFFFF; border: 0; font-weight: 500; }
.acf-filter-footer .acf-btn-ok:hover { background: #6B8C73; }
.acf-filter-footer .acf-btn-cancel { background: transparent; border: 1px solid #CDD3C7; color: #374E35; }
html.dark .acf-filter-footer .acf-btn-cancel { border-color: #4A5750; color: #DCE3D8; }

.acf-filter-status {
  font-size: 11px; color: #6B8C73; padding: 4px 2px 8px; margin: 0 0.5rem;
}
html.dark .acf-filter-status { color: #B5D1BB; }
.acf-filter-status button {
  background: none; border: 0; color: #4A6852; cursor: pointer; padding: 0;
  font-size: 11px; text-decoration: underline; margin-left: 4px;
}
html.dark .acf-filter-status button { color: #DCE3D8; }

/* Hide filtered row (unfold: tbody per-row → hide the whole tbody) */
tbody.acf-row-hidden,
tr.acf-row-hidden { display: none !important; }

/* ============================================================
   Bar chip filter utk HP/tablet (<1024px): header tabel changelist
   disembunyikan Unfold (hidden lg:table-cell) sehingga ikon ▾ di
   header tak bisa diakses. Bar ini satu baris scroll horizontal di
   atas tabel; di desktop (≥1024px) disembunyikan karena ikon header
   sudah tampil.
   ============================================================ */
.acf-mobile-bar { display: none; }
@media (max-width: 1023.98px) {
  .acf-mobile-bar {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding: 2px 2px 8px;
    margin: 0 0 4px;
  }
  .acf-filter-chip {
    flex: 0 0 auto;
    min-height: 40px;
    padding: 8px 12px;
    border: 1px solid #CDD3C7;
    border-radius: 999px;
    background: #F8FBF6;
    color: #374E35;
    font-size: 13px;
    font-weight: 500;
    white-space: nowrap;
    cursor: pointer;
  }
  .acf-filter-chip.acf-filter-active {
    background: #84A98C;
    border-color: #6B8C73;
    color: #FFFFFF;
  }
  html.dark .acf-filter-chip {
    background: #232A24;
    border-color: #4A5750;
    color: #DCE3D8;
  }
  html.dark .acf-filter-chip.acf-filter-active {
    background: #84A98C;
    border-color: #B5D1BB;
    color: #1F2620;
  }
}