/* Kontrol bawaan peramban di Tour Travel 1 ikut warna temanya. (ARA-136)
 *
 * ## Sejauh mana CSS bisa menjangkau pemilih tanggal
 *
 * Kotak tanggal di bilah penyaring daftar tur adalah `<input type="date">`.
 * Panel kalender yang muncul saat diklik BUKAN elemen halaman -- ia digambar
 * peramban, di luar DOM, dan tidak bisa dipilih selektor CSS mana pun. Tata
 * letaknya, tombol "Clear"/"Today", panahnya, dan nama bulannya milik peramban;
 * bentuknya berbeda di Chrome, Firefox, dan Safari, dan tidak ada CSS yang
 * mengubahnya.
 *
 * Yang BISA dijangkau, dan yang dikerjakan berkas ini:
 *
 *   1. `accent-color`  -- warna sorotan tanggal terpilih di dalam panel itu.
 *      Inilah yang membuat lingkaran tanggal terpilih memakai biru situs
 *      (`--tp-theme-1`, terukur `#05bcfc`) alih-alih biru bawaan peramban.
 *   2. `color-scheme`  -- memastikan panelnya digambar terang. Tanpa ini,
 *      pengunjung yang sistemnya gelap mendapat panel gelap di atas halaman
 *      terang.
 *   3. Ikon kalender DI DALAM kotaknya (`::-webkit-calendar-picker-indicator`)
 *      dan teks `dd/mm/yyyy`-nya -- keduanya bagian dari input, bukan panel.
 *
 * Kalau panelnya sendiri harus bertema penuh (kepala sendiri, tombol sendiri),
 * jalannya bukan CSS melainkan mengganti input bawaan dengan pemilih tanggal
 * JavaScript. Tema ini sudah memuat `daterangepicker`, jadi bahannya ada --
 * tapi itu mengubah PERILAKU kotaknya, bukan hanya rupanya, jadi keputusannya
 * ada di pemilik repo.
 *
 * ## Kenapa `accent-color` dipasang di `:root`
 *
 * Ia MEWARIS. Satu aturan di akar menjangkau setiap kotak tanggal, kotak
 * centang, radio, penggeser, dan bilah kemajuan di seluruh tema -- termasuk
 * yang belum ada. Mendaftarkannya per halaman berarti halaman berikutnya
 * lahir dengan warna bawaan peramban dan tidak ada yang mengeluh.
 */

:root {
  accent-color: var(--tp-theme-1, #05bcfc);
  color-scheme: light;
}

/* Ikon kalender di ujung kanan kotak. Bawaannya abu kecil dan nyaris tidak
 * terlihat di atas latar putih bilah penyaring. */
.tt1-travexa-listing input[type="date"]::-webkit-calendar-picker-indicator,
.tt1-travexa-listing input[type="month"]::-webkit-calendar-picker-indicator {
  padding: 4px;
  border-radius: 6px;
  opacity: 0.55;
  cursor: pointer;
  transition: opacity 0.2s ease, background-color 0.2s ease;
}

.tt1-travexa-listing input[type="date"]::-webkit-calendar-picker-indicator:hover,
.tt1-travexa-listing input[type="date"]:focus::-webkit-calendar-picker-indicator {
  opacity: 1;
  background-color: color-mix(in srgb, var(--tp-theme-1, #05bcfc) 14%, transparent);
}

/* Seluruh kotak bisa diklik untuk membuka panelnya, bukan hanya ikonnya --
 * di bilah penyaring, ikon selebar 16px adalah sasaran yang terlalu kecil. */
.tt1-travexa-listing input[type="date"] {
  cursor: pointer;
}

/* `dd/mm/yyyy` yang belum diisi diwarnai sama dengan placeholder kotak lain di
 * bilah yang sama; bawaannya hitam penuh, jadi kotak kosong terbaca seolah
 * sudah terisi. */
.tt1-travexa-listing input[type="date"]:not(:focus)::-webkit-datetime-edit {
  color: color-mix(in srgb, var(--travexa-text, #4b5563) 68%, transparent);
}

.tt1-travexa-listing input[type="date"]:focus::-webkit-datetime-edit,
.tt1-travexa-listing input[type="date"]:valid::-webkit-datetime-edit {
  color: var(--travexa-text, #4b5563);
}

/* Firefox tidak mengenal pseudo-elemen di atas dan tidak membutuhkannya:
 * panelnya sudah mengikuti `accent-color` dan `color-scheme` di `:root`. */