/* =====================================================================
   Penapis pil berwarna (penapis.js) — "Label: Nilai" untuk SEMUA penapis.
   <select>/<input type=date> asal kekal & berfungsi: ditindih lutsinar
   (opacity:0) di atas pil, jadi senarai pilihan native telefon digunakan.
   Warna ikut jenis penapis melalui token tona sedia ada (.x-t-* menetapkan
   --tb / --tf / --ts dalam ui.css). Tiada hex baharu.
   ===================================================================== */

/* Tema Asal tidak mentakrifkan --tona-*: sandaran daripada token penegas (--ts) & --teks */
.pn-pil,.pn-semua,.julat-tarikh>.pn-x{--pb:var(--tb,color-mix(in srgb,var(--ts) 14%,var(--panel)));--pf:var(--tf,var(--teks))}
.pn-pil{
  position:relative;display:inline-flex;align-items:center;gap:7px;box-sizing:border-box;
  min-height:44px;min-width:0;max-width:100%;padding:0 12px 0 12px;
  border-radius:999px;border:1.5px solid color-mix(in srgb,var(--ts) 42%,transparent);
  background:color-mix(in srgb,var(--pb) 62%,var(--panel));color:var(--pf);
  font-size:13px;line-height:1.2;cursor:pointer;vertical-align:middle;
  -webkit-tap-highlight-color:transparent;
}
.pn-pil .pn-ik{flex:none;font-size:12px;color:var(--ts);width:14px;text-align:center}
.pn-pil .pn-label{flex:none;max-width:60%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:11.5px;font-weight:700;opacity:.82}
.pn-pil .pn-nilai{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:800;font-size:13px}
.pn-pil .pn-cv{flex:none;margin-left:auto;font-size:10px;opacity:.7}

/* neutral (susun/papar/lain-lain): kekal senyap, ikut token panel */
.pn-pil.x-t-neutral{--tb:var(--panel2);--tf:var(--teks);--ts:var(--teks3)}
.julat-papar.pn-pil{text-align:left}

/* aktif = nilai bukan "Semua": latar lebih pekat + butang x */
.pn-pil.pn-aktif{
  background:color-mix(in srgb,var(--ts) 30%,var(--pb));border-color:var(--ts);
  box-shadow:0 2px 8px color-mix(in srgb,var(--ts) 28%,transparent);
}
.pn-pil .pn-x{
  position:relative;z-index:2;flex:none;display:none;place-items:center;width:26px;height:26px;margin:0 -4px 0 auto;padding:0;
  border:0;border-radius:50%;background:color-mix(in srgb,var(--pf) 16%,transparent);color:var(--pf);
  font-size:12px;cursor:pointer;
}
.pn-pil .pn-x::after{content:"";position:absolute;inset:-9px}
.pn-pil.pn-aktif .pn-x{display:grid}
.pn-pil.pn-aktif .pn-cv{display:none}
.pn-pil .pn-x:hover{background:color-mix(in srgb,var(--pf) 28%,transparent)}

/* kawalan asal ditindih lutsinar — kekal boleh difokus & ditekan */
.pn-pil>.pn-sel{
  position:absolute!important;inset:0;width:100%!important;height:100%!important;
  min-width:0!important;max-width:none!important;min-height:0!important;margin:0!important;padding:0!important;
  border:0!important;background:none!important;box-shadow:none!important;
  opacity:0;cursor:pointer;font-size:16px!important;z-index:1;
}
.pn-pil:has(>.pn-sel:focus-visible){outline:2px solid var(--ts);outline-offset:2px}
.pn-pil.pn-lumpuh{opacity:.55;pointer-events:none}
.pn-sorok{display:none!important}

/* susunan: pil boleh berbalut; telefon 2 pil sebaris */
.filter-bar>.pn-pil,.filter-bar>.julat-tarikh,.filter-bar>label:has(>.pn-pil){flex:0 1 auto}
.x-lanjut>.filter-bar>.pn-pil,.x-lanjut>.filter-bar>.julat-tarikh,.ip-tapis-baris>.pn-pil,.mk-toolbar>.pn-pil,.mk-kumpulan-cip>.pn-pil{width:100%}
.mk-toolbar>.pn-pil{width:100%}
@media(max-width:440px){.pn-pil{padding:0 10px;gap:6px}.pn-pil .pn-ik{display:none}}
@media(max-width:600px){
  .filter-bar{gap:8px}
  .filter-bar>.pn-pil,.filter-bar>label:has(>.pn-pil){flex:1 1 auto}
  .x-lanjut>.filter-bar{display:flex;flex-wrap:wrap}
  .x-lanjut>.filter-bar>.pn-pil,.x-lanjut>.filter-bar>label:has(>.pn-pil){width:auto;flex:1 1 auto}
  .x-lanjut>.filter-bar>.span-semua,.x-lanjut>.filter-bar>.x-lanjut-aksi{flex:1 1 100%}
  .ip-tapis-baris{grid-template-columns:minmax(0,1fr)}
  .filter-bar>.julat-tarikh{flex:1 1 100%}
  .filter-bar>label:has(>.pn-pil)>.pn-pil{width:100%}
}
@media(min-width:601px){
  .mk-toolbar>.pn-pil,.mk-kumpulan-cip>.pn-pil{width:auto;min-width:200px}
  .ip-tapis-baris>.pn-pil{width:100%}
}

/* butang "Set semula semua" */
.pn-semua{
  display:inline-flex;align-items:center;gap:7px;min-height:44px;padding:0 14px;border-radius:999px;
  border:1.5px dashed var(--ts);background:color-mix(in srgb,var(--pb) 70%,var(--panel));color:var(--pf);
  font:inherit;font-size:12.5px;font-weight:800;cursor:pointer;-webkit-tap-highlight-color:transparent;flex:none;
}
.pn-semua:focus-visible{outline:2px solid var(--ts);outline-offset:2px}
.ip-tapis>.pn-semua,.mk-toolbar>.pn-semua,.mk-kumpulan-cip>.pn-semua{align-self:flex-start}
.x-lanjut>.filter-bar>.pn-semua{grid-column:1/-1;justify-content:center}
.filter-bar>button[id^="btnReset"]{border-radius:999px;min-height:44px;min-width:44px}

/* pemilih julat tarikh sedia ada (.julat-papar) jadi pil oren */
.julat-tarikh{position:relative}
.julat-papar.pn-pil{
  gap:7px;min-width:0;width:100%;padding:0 12px;font-size:13px;overflow:hidden;
  border:1.5px solid color-mix(in srgb,var(--ts) 42%,transparent);border-radius:999px;
  background:color-mix(in srgb,var(--pb) 62%,var(--panel));color:var(--pf);font-family:inherit;
}
.julat-papar.pn-pil:hover{border-color:var(--ts)}
.julat-papar.pn-pil.pn-aktif{background:color-mix(in srgb,var(--ts) 30%,var(--pb));border-color:var(--ts);box-shadow:0 2px 8px color-mix(in srgb,var(--ts) 28%,transparent);padding-right:44px}
.julat-papar.pn-pil.julat-aktif{outline:2px solid var(--ts);outline-offset:2px}
.julat-papar.pn-pil:focus-visible{outline:2px solid var(--ts);outline-offset:2px}
.julat-papar.pn-pil .julat-teks{display:none}
.julat-tarikh>.pn-x{
  position:absolute;right:8px;top:50%;translate:0 -50%;z-index:2;display:none;place-items:center;width:26px;height:26px;padding:0;
  border:0;border-radius:50%;background:color-mix(in srgb,var(--pf) 16%,transparent);color:var(--pf);font-size:12px;cursor:pointer;
}
.julat-tarikh>.pn-x::after{content:"";position:absolute;inset:-9px}
.julat-tarikh.pn-aktif>.pn-x{display:grid}

/* kotak carian: ikon, sudut bulat, butang x */
.filter-cari.pn-cari{min-width:0}
.filter-cari.pn-cari input{border-radius:999px;min-height:44px;padding-left:40px;padding-right:42px;border-color:color-mix(in srgb,var(--cyan) 38%,var(--garis-kad))}
.filter-cari.pn-cari input:focus{border-color:var(--cyan)}
.filter-cari.pn-cari>i:first-child{left:15px;color:var(--cyan);pointer-events:none}
.filter-cari.pn-cari input::-webkit-search-cancel-button{-webkit-appearance:none;display:none}
.filter-bar>.filter-cari.pn-cari{flex:1 1 220px}
.ip-tapis-baris>.filter-cari.pn-cari{width:100%}
.pn-cari-x{
  position:absolute;right:8px;top:50%;transform:translateY(-50%);display:none;place-items:center;width:28px;height:28px;padding:0;
  border:0;border-radius:50%;background:var(--panel2);color:var(--teks2);font-size:12px;cursor:pointer;z-index:2;
}
.pn-cari-x::after{content:"";position:absolute;inset:-8px}
.filter-cari.pn-ada .pn-cari-x{display:grid}
.filter-cari .pn-cari-x i{position:static;transform:none;color:inherit}
.pn-cari-x:focus-visible{outline:2px solid var(--cyan);outline-offset:1px}

@media(prefers-reduced-motion:no-preference){
  .pn-pil,.julat-papar.pn-pil{transition:background-color .18s ease-out,border-color .18s ease-out,box-shadow .18s ease-out,scale .15s ease-out}
  .pn-pil:active,.julat-papar.pn-pil:active,.pn-semua:active{scale:.97}
  .pn-pil.pn-aktif .pn-x{animation:pn-masuk .18s ease-out}
  @keyframes pn-masuk{from{opacity:0;scale:.6}to{opacity:1;scale:1}}
}