:root{
    --itv-orange:#F26522;
    --itv-orange-dark:#d9541a;
    --itv-black:#111111;
    /* v2.10.3: default 0 sebelum JS (itvUpdateStickyHeaderOffset, lihat
       table-view.js) menghitung ulang sesuai tinggi header sticky tema
       (kalau ada) -- lihat komentar panjang di JS. */
    --itv-sticky-top:0px;
}

/* Tombol toggle "Table View" di atas daftar produk */
.itv-standalone-toggle{ display:flex; flex-wrap:wrap; justify-content:flex-end; align-items:center; gap:8px; margin:0 0 12px; }
.itv-toggle-link{
    display:inline-flex; align-items:center; gap:6px;
    padding:7px 14px; background:#fff; color:var(--itv-orange) !important;
    border:1.5px solid var(--itv-orange); border-radius:4px; font-size:12px; font-weight:700;
    letter-spacing:.3px; text-decoration:none !important; white-space:nowrap;
}
.itv-toggle-link:hover{ background:var(--itv-orange); color:#fff !important; }
.itv-toggle-link.itv-active{ background:#111; color:#fff !important; border-color:#111; }
.itv-toggle-icon{ font-size:14px; line-height:1; }

/* v2.16.0: Tombol "EXPORT EXCEL" -- ukuran/padding/radius SAMA PERSIS dengan
   .itv-toggle-link supaya sejajar rapi sebagai sepasang tombol, warna hijau
   khas Excel (bukan oranye) supaya beda fungsi tetap terlihat jelas sekilas.
   Bukan link biasa: klik memicu download file (header Content-Disposition
   dari includes/export-excel.php), jadi SENGAJA class-nya beda dari
   "itv-toggle-link"/"itv-back-btn" supaya TIDAK ikut "ditangkap" listener
   swap-tanpa-reload di table-view.js (kalau ikut ketangkap, browser akan
   fetch() lalu coba parse hasil biner .xlsx-nya sebagai HTML -- unduhan
   jadi gagal total). Klik tombol ini SELALU navigasi biasa oleh browser. */
.itv-export-btn{
    display:inline-flex; align-items:center; gap:6px;
    padding:7px 14px; background:#fff; color:#1D6F42 !important;
    border:1.5px solid #1D6F42; border-radius:4px; font-size:12px; font-weight:700;
    letter-spacing:.3px; text-decoration:none !important; white-space:nowrap;
}
.itv-export-btn:hover{ background:#1D6F42; color:#fff !important; }

/* Tombol "GRID VIEW" (di halaman Table View) -- background orange, teks putih,
   override khusus (bukan hitam seperti .itv-toggle-link.itv-active umum). */
.itv-toggle-link.itv-back-btn.itv-active{ background:var(--itv-orange); color:#fff !important; border-color:var(--itv-orange); }
.itv-toggle-link.itv-back-btn.itv-active:hover{ background:var(--itv-orange-dark); color:#fff !important; border-color:var(--itv-orange-dark); }

/* Halaman Table View */
.itv-wrap{ max-width:100%; margin:24px auto; padding:0 20px; }
.itv-toolbar{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px; margin-bottom:14px; }
.itv-heading{ font-size:20px; margin:0; flex:1 1 auto; }
.itv-count{ font-size:12.5px; color:#777; white-space:nowrap; }

.itv-active-filters{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin:-2px 0 12px; }
.itv-active-filters-label{ font-size:12px; color:#777; }
.itv-filter-chip{
    display:inline-flex; align-items:center; gap:6px;
    padding:4px 10px; background:#fff3ea; color:var(--itv-orange-dark) !important;
    border:1px solid #f3c8a8; border-radius:20px; font-size:12px; font-weight:600;
    text-decoration:none !important; white-space:nowrap;
}
.itv-filter-chip:hover{ background:var(--itv-orange); color:#fff !important; border-color:var(--itv-orange); }
.itv-filter-chip-x{ font-size:14px; line-height:1; }

.itv-th-filter{ position:relative; }
.itv-th-filter-inner{
    position:relative;
    display:inline-flex;
    align-items:center;
    gap:5px;
    padding:3px 6px;
    margin:-3px -6px;
    border-radius:3px;
    cursor:pointer;
}
.itv-th-filter-inner:hover{ background:rgba(255,255,255,.08); }
.itv-th-label{ display:inline-block; }
.itv-th-arrow{ font-size:9px; color:#999; line-height:1; transition:color .15s; }
.itv-th-filter-inner:hover .itv-th-arrow{ color:#fff; }
.itv-th-filter-active .itv-th-label,
.itv-th-filter-active .itv-th-arrow{ color:#fff; }

/* <select> asli tetap ada & berfungsi penuh, cuma ditumpuk transparan di
   atas label+panah supaya tap/klik membuka dropdown native browser. */
.itv-col-filter-invisible{
    position:absolute;
    top:0; left:0;
    width:100%; height:100%;
    min-width:100%;
    opacity:0;
    margin:0; padding:0; border:none;
    cursor:pointer;
    -webkit-appearance:none;
    appearance:none;
}
.itv-col-filter-invisible option{ color:#111; font-weight:400; }

.itv-table-scroll{
    /* TIDAK ADA tinggi tetap lagi -> kotak ini tumbuh mengikuti isi tabel,
       dan yang scroll vertikal adalah HALAMAN itu sendiri (seperti
       Grid/List biasa / infinite scroll bawaan Kapee), bukan kotak kecil
       internal. overflow-x tetap "auto" supaya tabel lebar (banyak kolom)
       masih bisa digeser ke samping tanpa merusak layout, dan sticky thead
       tetap nempel ke atas VIEWPORT halaman selama kotak ini sendiri tidak
       ikut men-scroll secara internal (tingginya = tinggi isi). */
    overflow-x:auto !important;
    overflow-y:visible;
    border:1px solid #d5d5d5;
    border-radius:4px;
    direction:ltr !important;
    -webkit-overflow-scrolling:touch !important;
    touch-action:pan-x !important;
    max-width:100%;
}
.itv-table-scroll::-webkit-scrollbar{ height:8px; }
.itv-table-scroll::-webkit-scrollbar-thumb{ background:var(--itv-orange); border-radius:4px; }

.itv-scroll-hint{ display:none; align-items:center; justify-content:space-between; gap:8px; margin-bottom:8px; }
.itv-arrow-btn{
    flex:0 0 auto; width:36px; height:36px; border-radius:50%;
    border:1.5px solid var(--itv-orange); background:#fff; color:var(--itv-orange); font-size:18px;
    line-height:1; cursor:pointer;
}
.itv-arrow-btn:active{ background:var(--itv-orange); color:#fff; }
.itv-scroll-hint-text{ font-size:11.5px; color:#888; text-align:center; flex:1 1 auto; }
@media (max-width:782px){ .itv-scroll-hint{ display:flex; } }

/* v2.10.1 FIX: border-collapse diganti dari "collapse" ke "separate" (+
   border-spacing:0, yang secara visual membuatnya tetap terlihat sama
   seperti collapse). "collapse" dikombinasikan dengan position:sticky pada
   kolom beku (freeze) TERBUKTI tidak konsisten antar browser -- terkadang
   sel beku jadi sedikit lebih kecil dari lebar yang di-set (karena border
   yang "digabung" ikut memengaruhi perhitungan lebar kolom pada
   table-layout:auto), yang berkontribusi pada bug celah/gap di kolom beku.
   "separate" membuat setiap sel menghitung border-nya sendiri secara
   independen, jadi lebar kolom beku (dikunci lewat <colgroup>, lihat
   table-view.php) tidak lagi bisa "tergeser" oleh cara browser menggabung
   border antar sel. */
.itv-table{ width:100%; border-collapse:separate; border-spacing:0; font-size:12.5px; font-family:Arial,Helvetica,sans-serif; min-width:1150px; background:#fff; direction:ltr; }
.itv-table thead th{ position:sticky; top:var(--itv-sticky-top, 0px); z-index:2; background:var(--itv-orange); color:#fff; border:1px solid var(--itv-orange-dark); padding:7px 9px; text-align:left; font-weight:700; white-space:nowrap; }
.itv-table tbody td{ border:1px solid #e6e6e6; padding:5px 9px; white-space:nowrap; vertical-align:middle; }
.itv-table tbody tr:nth-child(even){ background:#fafafa; }
.itv-table tbody tr:hover{ background:#fff3ea; }
/* v2.7.0: width diubah dari 46px (content-box) jadi 64px + box-sizing:
   border-box. Ini SENGAJA supaya AREA KONTEN tetap identik (64 - padding
   9px kiri - 9px kanan bawaan .itv-table th/td = 46px, sama seperti
   sebelumnya, cukup untuk gambar 34x34px) -- tampilan TIDAK berubah sama
   sekali. Tujuannya cuma supaya lebar TOTAL kolom ini jadi angka pasti
   (64px), dipakai sebagai nilai "left" freeze kolom SKU di sebelahnya
   (lihat blok "FREEZE KOLOM" di bawah). */
.itv-col-img{ width:64px; box-sizing:border-box; }
.itv-col-img img{ width:34px; height:34px; object-fit:contain; display:block; }
.itv-col-title{ white-space:normal !important; overflow-wrap:break-word; word-break:break-word; min-width:260px; max-width:320px; }
.itv-col-title a{ display:block; white-space:normal !important; overflow-wrap:break-word; word-break:break-word; color:#111; text-decoration:none; font-weight:500; line-height:1.35; }
.itv-col-title a:hover{ color:var(--itv-orange); text-decoration:underline; }
.itv-col-size{ white-space:nowrap; max-width:110px; overflow:hidden; text-overflow:ellipsis; }
.itv-num{ text-align:right; }
.itv-badge{ display:inline-block; padding:2px 9px; border-radius:20px; font-size:11px; font-weight:700; }
.itv-badge-ok{ background:#e6f4ea; color:#2e7d32; }
.itv-badge-warn{ background:#fef3c7; color:#b45309; }
/* v2.14.0: box-sizing:border-box ditambahkan supaya width:90px di sini jadi
   lebar TOTAL kolom (termasuk padding & border) -- dipakai juga sebagai
   acuan presisi saat kolom ini ikut dibekukan (freeze), lihat blok "FREEZE
   KOLOM" di bawah untuk penjelasan lengkap kenapa box-sizing:border-box
   wajib untuk kolom yang di-position:sticky. */
.itv-col-action{ width:90px; box-sizing:border-box; text-align:center; }
.itv-btn{ display:inline-block; padding:5px 12px; background:var(--itv-orange); color:#fff !important; border-radius:4px; font-size:11.5px; text-decoration:none !important; white-space:nowrap; }
.itv-btn:hover{ background:var(--itv-orange-dark); }
.itv-btn-outline{ background:#fff; color:var(--itv-black) !important; border:1px solid var(--itv-black); }
.itv-btn-outline:hover{ background:var(--itv-black); color:#fff !important; }

/* v2.13.0: tombol "+ Cart" diganti jadi tombol IKON keranjang saja, atas
   permintaan user. SENGAJA hanya menyasar tombol "Tambah ke Keranjang" WC
   asli (class .add_to_cart_button, dari woocommerce_template_loop_add_to_cart
   di table-view.php) -- BUKAN tombol "Lihat" (.itv-btn-outline, buat produk
   yang tidak bisa dibeli/stok habis) yang tetap berupa tombol teks biasa.
   Teks "+ Cart" itu sendiri TIDAK dihapus dari markup PHP (lihat
   itv_short_add_to_cart_text di includes/render-table-view.php) -- cuma
   disembunyikan SECARA VISUAL di sini (font-size:0) supaya kalau file CSS
   ini gagal ter-load karena suatu hal, tombolnya otomatis balik jadi tombol
   teks biasa yang tetap berfungsi (fallback aman), bukan tombol kosong tanpa
   label sama sekali. Nama produk untuk pembaca layar/aksesibilitas TETAP ada
   lewat atribut aria-label bawaan WooCommerce (add_to_cart_description()),
   yang independen dari teks tombol ini. Ikon keranjang digambar lewat SVG
   inline (data URI) supaya tidak perlu file gambar/font ikon tambahan. */
.itv-col-action .add_to_cart_button.itv-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:34px;
    height:30px;
    padding:0;
    font-size:0;
    line-height:0;
    color:transparent;
    overflow:hidden;
    background-color:var(--itv-orange);
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='21' r='1'%3E%3C/circle%3E%3Ccircle cx='20' cy='21' r='1'%3E%3C/circle%3E%3Cpath d='M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6'%3E%3C/path%3E%3C/svg%3E");
    background-repeat:no-repeat;
    background-position:center;
    background-size:16px 16px;
}
.itv-col-action .add_to_cart_button.itv-btn:hover{ background-color:var(--itv-orange-dark); }
.itv-empty{ text-align:center; padding:30px !important; color:#888; }

/* =============================================================================
 *  FREEZE KOLOM AKSI, GAMBAR & SKU (kiri) saat tabel digeser horizontal
 *  — v2.7.0, diperluas ke kolom Aksi (tombol keranjang) di v2.14.0 atas
 *  permintaan user (sebelumnya di v2.13.0 kolom Aksi SENGAJA dibiarkan
 *  tidak dibekukan -- lihat riwayat di readme.txt).
 *  Kolom Aksi (.itv-col-action), gambar (.itv-col-img) & SKU (.itv-col-sku)
 *  "nempel" di kiri layar baik pas digeser di DESKTOP maupun HP -- termasuk
 *  versi HP yang tabelnya dibungkus iframe (lihat table-view.js bagian
 *  mobile), karena file CSS ini yang sama juga di-load di dalam iframe tsb
 *  lewat <link>, jadi aturan di bawah ini otomatis ikut berlaku di sana
 *  tanpa perlu kode tambahan (persis seperti gambar/SKU sebelumnya).
 *
 *  Sel <thead th> kolom ini SUDAH sticky top (freeze vertikal, aturan lain
 *  di atas) -- ditambah left di sini artinya 3 sel pojok kiri-atas (Aksi,
 *  gambar & SKU) otomatis freeze DUA ARAH sekaligus (atas & kiri
 *  berbarengan).
 *
 *  left:90px pada kolom gambar HARUS SAMA PERSIS dengan lebar total kolom
 *  Aksi (lihat width:90px + box-sizing:border-box di atas), dan left:154px
 *  pada kolom SKU HARUS SAMA PERSIS dengan (lebar Aksi + lebar gambar =
 *  90px + 64px) -- supaya ketiga kolom beku ini nempel berurutan tanpa
 *  celah/tumpang tindih. Semua kolom beku WAJIB box-sizing:border-box
 *  (bukan box-sizing default/content-box) supaya angka width/left di atas
 *  benar-benar jadi lebar TOTAL yang dirender browser, bukan cuma lebar
 *  kontennya saja -- kalau tidak, akan muncul lagi bug gap/tumpang tindih
 *  yang sama seperti yang pernah diperbaiki di v2.10.1/v2.10.2 untuk
 *  gambar/SKU. */
.itv-col-action,
.itv-col-img,
.itv-col-sku{
    position:sticky;
    z-index:1;
    background:#fff;
    /* v2.10.2 FIX: colgroup (lihat table-view.php) sudah membuat LEBAR
       kolom ini presisi (SKU sudah mulai pas di 64px), tapi ternyata ada
       bug render TERPISAH: background hitam (di header) & konten (gambar
       produk di body) kolom gambar cuma "digambar ulang" oleh browser utk
       sebagian lebarnya saja saat dipadukan dengan kolom sticky LAIN yang
       nempel tepat di sebelahnya (SKU) -- sisanya tampak putih & menutupi
       gambar produk (BUKAN gambarnya yg hilang, tapi ketutup). Ini masalah
       umum 2 sel position:sticky yang bersebelahan tidak di-komposit
       dengan benar oleh sebagian browser. will-change:transform di sini
       memaksa browser memberi kolom ini LAYER GPU sendiri yang utuh,
       bukan cuma "menggambar ulang" background/konten sebagian -- ini
       adalah solusi standar utk kelas bug sticky seperti ini. */
    will-change:transform;
}
.itv-col-action{ left:0; min-width:90px; }
.itv-col-img{ left:90px; min-width:64px; }
/* v2.10.1 FIX: width:90px + box-sizing:border-box ditambahkan di sini
   (dulu kolom SKU cuma punya "left:64px" tanpa lebar pasti sendiri).
   Nilai 90px ini HARUS SAMA dengan lebar <col class="itv-col-sku"> di
   table-view.php -- supaya kolom SKU juga tidak ikut "dihitung ulang"
   lebarnya oleh browser (lihat penjelasan panjang di colgroup,
   table-view.php), konsisten baik saat login (19 kolom) maupun tidak
   (8 kolom). */
.itv-col-sku{ left:154px; width:90px; min-width:90px; box-sizing:border-box; }

/* v2.10.2 FIX: kolom gambar HARUS tampil di atas (menang) kalau sampai
   bersinggungan dgn kolom SKU di sebelahnya -- sebelumnya dua-duanya
   z-index:1 (seri), jadi browser bebas memutuskan siapa "menang" kalau
   ada tumpang tindih sedikit saat repaint, dan yang menang selama ini
   SKU (menutupi kolom gambar dgn background putihnya, itu sebabnya
   gambar produk sempat tidak kelihatan). Sekarang urutannya dipastikan:
   gambar SELALU di depan (paint order pasti), SKU di belakangnya. */
.itv-col-action{ z-index:3; }
.itv-col-img{ z-index:2; }
.itv-col-sku{ z-index:1; }

/* Header (thead) kolom beku butuh z-index LEBIH TINGGI dari thead th biasa
   (z-index:2, lihat aturan ".itv-table thead th" di atas) supaya pojok
   kiri-atas tidak "ketiban"/keputus header kolom lain saat digeser
   horizontal -- kolom beku harus selalu tampil PALING ATAS. Urutan
   kiri->kanan dipertahankan: Aksi (5) > gambar (4) > SKU (3). */
.itv-table thead th.itv-col-action,
.itv-table thead th.itv-col-img,
.itv-table thead th.itv-col-sku{
    z-index:3;
}
.itv-table thead th.itv-col-img{ z-index:4; }
.itv-table thead th.itv-col-action{ z-index:5; }

/* Samakan warna latar sel beku dengan warna baris aslinya (genap/hover),
   supaya sel yang di-freeze tidak terlihat "beda warna sendiri" dibanding
   sel lain di baris yang sama saat tabel digeser. Urutan aturan ini
   (genap dulu, baru hover) SENGAJA disamakan dengan urutan aturan warna
   baris aslinya di atas, supaya saat hover baris genap warnanya tetap
   konsisten (hover menang, sama seperti perilaku baris yang tidak dibekukan). */
.itv-table tbody tr:nth-child(even) td.itv-col-action,
.itv-table tbody tr:nth-child(even) td.itv-col-img,
.itv-table tbody tr:nth-child(even) td.itv-col-sku{
    background:#fafafa;
}
.itv-table tbody tr:hover td.itv-col-action,
.itv-table tbody tr:hover td.itv-col-img,
.itv-table tbody tr:hover td.itv-col-sku{
    background:#fff3ea;
}

/* Spinner loading "Memuat produk berikutnya…" saat infinite scroll (desktop
   maupun HP, pakai mesin yang sama) — abu-abu, muter, di tengah baris.
   v2.6.2 FIX: display:flex TIDAK LAGI dipasang langsung di <td> ini --
   itu bikin browser berhenti menghitungnya sebagai sel tabel biasa,
   sehingga colspan="13" tidak lagi dihitung & baris ini mengecil jadi
   selebar kolom pertama saja (bug "loading muncul di kolom pertama").
   <td> dibiarkan sel tabel normal (colspan tetap dihitung, melebar penuh),
   flex dipindah ke wrapper <span class="itv-infinite-status-inner"> di
   DALAM sel ini saja -- lihat markup PHP itv_render_table_view(). */
.itv-infinite-status-cell{
    text-align:center;
}
.itv-infinite-status-inner{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:10px;
}
.itv-spinner{
    display:none; /* default sembunyi -> hanya dimunculkan lewat class
                      .itv-is-loading saat benar-benar sedang fetch (bukan
                      saat teks "selesai"/"gagal") */
    width:18px; height:18px;
    flex:0 0 auto;
    border:3px solid #ddd;
    border-top-color:#999;
    border-radius:50%;
    animation:itv-spin .7s linear infinite;
}
.itv-infinite-status-cell.itv-is-loading .itv-spinner{ display:inline-block; }
@keyframes itv-spin{ to{ transform:rotate(360deg); } }

/* =============================================================================
 *  HEADER MENGAMBANG (FLOATING) — v2.11.0
 *  Elemen ini SALINAN <thead> yang di-generate & dikelola sepenuhnya lewat
 *  JS (lihat itvInitFloatingHeader, table-view.js) -- position:fixed ke
 *  JENDELA BROWSER (ditempel ke <body>, bukan ke .itv-table-scroll), otomatis
 *  muncul menggantikan header asli begitu header asli mulai keluar layar,
 *  karena position:sticky murni TIDAK BISA dipakai di sini (kombinasi scroll
 *  horizontal + freeze mengikuti scroll HALAMAN -- lihat komentar panjang di
 *  table-view.js kenapa). Default display:none -- HANYA dimunculkan JS lewat
 *  wrap.style.display='block' saat memang perlu, jadi kalau JS ini mati/gagal
 *  elemen ini tidak pernah tampil sama sekali (aman, tabel & header asli
 *  tetap berfungsi normal seperti sebelum fitur ini ada). Hanya dipakai versi
 *  desktop (window.innerWidth > 782) -- versi HP sudah punya scroll internal
 *  sendiri (lihat media query di bawah) di mana position:sticky biasa memang
 *  sudah bekerja dengan benar, jadi tidak butuh elemen ini sama sekali.
 * ========================================================================== */
#itv-floating-thead{
    display:none;
    position:fixed;
    top:0; left:0; width:0;
    overflow-x:hidden;
    overflow-y:hidden;
    z-index:500; /* di atas isi tabel (thead asli z-index:2-4) & konten halaman biasa; kalau suatu saat bentrok dgn elemen tema lain yg juga fixed/z-index tinggi, tinggal naikkan angka ini */
    pointer-events:auto;
    box-shadow:0 2px 6px rgba(0,0,0,.15);
}
#itv-floating-thead table{
    border-collapse:separate;
    border-spacing:0;
    margin:0;
}
#itv-floating-thead thead th{
    /* Salinan ini TIDAK butuh position:sticky;top lagi utk freeze vertikal
       (wrapper-nya sendiri sudah position:fixed sungguhan, lihat di atas) --
       top dipaksa balik ke 0 supaya tidak dobel-offset dgn --itv-sticky-top
       yang sudah diterapkan ke WRAPPER (bukan ke th lagi di sini). Aturan
       position:sticky bawaan (".itv-table thead th", table-view.css) TETAP
       dipertahankan apa adanya -- itu yang membuat kolom beku Aksi/gambar/
       SKU (position:sticky;left) di salinan ini tetap freeze horizontal
       dengan benar mengikuti wrap.scrollLeft. */
    top:0 !important;
    /* v2.14.0 FIX: "headernya gak sejajar saat scroll ke bawah" -- akar
       masalahnya box-sizing. resyncWidths() di table-view.js mengukur lebar
       TOTAL tiap kolom asli lewat getBoundingClientRect() (itu sudah
       termasuk padding & border th, sama seperti box-sizing:border-box),
       lalu memasang angka itu langsung ke style.width sel salinan ini. TAPI
       sel <th> di sini defaultnya box-sizing:content-box (bawaan browser) --
       artinya angka yang di-set jadi lebar KONTEN SAJA, lalu padding
       (7px 9px) & border (1px) th di atasnya DITAMBAHKAN LAGI di atas itu,
       membuat tiap kolom salinan ~20px lebih LEBAR dari kolom aslinya.
       Selisih 20px ini menumpuk (kolom 1 meleset 20px, kolom 2 meleset
       40px, dst) -- itu sebabnya makin ke kanan header salinan makin jauh
       tidak sejajar dgn kolom tabel asli di bawahnya. box-sizing:border-box
       di sini membuat angka width yang di-set JS jadi lebar TOTAL (padding
       & border dihitung DI DALAM angka itu, bukan ditambah lagi) -- persis
       sama seperti cara getBoundingClientRect() mengukur kolom aslinya,
       jadi header salinan selalu presisi sejajar. */
    box-sizing:border-box;
}

.itv-pagination{ margin-top:16px; text-align:center; }
.itv-pagination .page-numbers{ display:inline-block; padding:6px 12px; margin:0 2px; border:1px solid #ddd; border-radius:4px; text-decoration:none; color:#333; font-size:12.5px; }
.itv-pagination .page-numbers:hover{ border-color:var(--itv-orange); color:var(--itv-orange); }
.itv-pagination .page-numbers.current{ background:var(--itv-orange); color:#fff; border-color:var(--itv-orange); }

@media (max-width:782px){
    html, body{ overflow-x:hidden !important; max-width:100vw; }
    .itv-wrap{ padding:0 12px; overflow-x:hidden; max-width:100vw; }
    .itv-table{ font-size:11.5px; }
    /* v2.5.2 FIX: header freeze & scroll di HP balik pakai pendekatan versi
       lama — kotak tabel diberi TINGGI TETAP + overflow-y:auto lagi, supaya
       ada konteks scroll INTERNAL yang jadi acuan `position:sticky` di
       thead (tanpa ini sticky tidak nempel ke apa-apa dan header ikut
       ke-scroll hilang). Nilai 70vh HARUS SAMA PERSIS dengan
       ITV_MOBILE_SCROLL_HEIGHT di table-view.js (dipakai utk tinggi iframe
       pembungkus tabel di HP). Ini TIDAK mengubah perilaku desktop (blok
       .itv-table-scroll di luar media query ini tetap overflow-y:visible /
       tumbuh mengikuti isi, dipakai infinite scroll versi HALAMAN yang
       sudah jalan & tidak disentuh). */
    .itv-table-scroll{
        width:100%;
        display:block;
        --itv-table-height: 70vh;
        max-height: var(--itv-table-height);
        overflow-y:auto !important;
        /* PENTING: aturan dasar .itv-table-scroll (di luar media query ini)
           sengaja cuma kasih touch-action:pan-x (geser sentuh HORIZONTAL
           saja), karena desain desktop/awalnya scroll vertikal terjadi di
           HALAMAN, bukan di dalam kotak ini. Sekarang kotak ini scroll
           sendiri secara vertikal (overflow-y:auto di atas), jadi gesture
           sentuh vertikal HARUS diizinkan juga di sini, kalau tidak jari
           tidak bisa menggeser tabel ke bawah sama sekali walau CSS
           overflow-nya sudah benar. */
        touch-action:pan-x pan-y !important;
        overscroll-behavior-y:contain;
    }
    .itv-table thead th{ position:sticky; top:0; }
}

/* =============================================================================
 *  FULL WIDTH + SEMBUNYIKAN SIDEBAR khusus di halaman Table View — v2.6.0
 *  Body diberi class "itv-tableview-page" (lihat itv_add_tableview_body_class
 *  di PHP, dan sinkronisasi class-nya di table-view.js pas ganti tampilan
 *  tanpa reload). Semua selector di bawah SENGAJA dibuat "menembak beberapa
 *  kemungkinan" nama class/ID tema Kapee sekaligus (kolom Bootstrap
 *  col-lg-9/col-lg-3, #primary/#secondary, .content-area/.widget-area, dst)
 *  supaya tetap kena walau markup persisnya berbeda dari dugaan -- kalau ada
 *  nama sidebar lain yang lolos, tinggal tambahkan selector-nya di sini,
 *  tidak perlu ubah bagian lain dari plugin ini.
 * ============================================================================ */
body.itv-tableview-page #secondary,
body.itv-tableview-page .widget-area,
body.itv-tableview-page aside.sidebar,
body.itv-tableview-page .sidebar,
body.itv-tableview-page .shop-sidebar,
body.itv-tableview-page .woocommerce-sidebar,
body.itv-tableview-page .col-widget-area{
    display:none !important;
}
body.itv-tableview-page #primary,
body.itv-tableview-page .content-area,
body.itv-tableview-page .site-main,
body.itv-tableview-page #main-content,
body.itv-tableview-page .col-lg-9,
body.itv-tableview-page .col-lg-8,
body.itv-tableview-page .col-md-9,
body.itv-tableview-page .col-md-8{
    width:100% !important;
    max-width:100% !important;
    flex:0 0 100% !important;
}

/* Indikator ringan saat konten sedang ditukar (Grid <-> Table View) lewat
   AJAX tanpa reload browser — v2.5.0. Dipasang/dilepas otomatis oleh
   itvSwapNavigate() di table-view.js pada elemen ITV_SWAP_SELECTOR
   (default #main-content) selama fetch() halaman tujuan masih berjalan. */
.itv-swap-loading{
    opacity:.45;
    pointer-events:none;
    transition:opacity .15s ease;
}