/*!
 * venio-tanggal.css — gaya pemilih tanggal & jam
 *
 * Warna diambil dari peubah CSS supaya menempel pada tema Venio yang sudah
 * ada. Nilai cadangan dipakai bila peubahnya belum didefinisikan, jadi berkas
 * ini tetap tampil benar walau dipasang lebih dulu daripada temanya.
 */

.vt-kolom {
  /* Token Venio dipakai lebih dulu; nilai cadangan hanya untuk halaman coba
     yang berdiri sendiri. */
  --vt-latar:   var(--paper, #fff);
  --vt-teks:    var(--ink, #16202c);
  --vt-samar:   var(--ink-soft, #6b7785);
  --vt-garis:   var(--line, #d9dee5);
  --vt-utama:   var(--red-600, #1f6f5c);
  --vt-utama-tipis: var(--blush, #e6f1ee);
  --vt-radius:  var(--radius, 8px);

  position: relative;
  display: inline-flex;
  align-items: center;
  max-width: 100%;
}

.vt-kolom.vt-blok { display: flex; width: 100%; }

.vt-tampil {
  font: inherit;
  color: var(--vt-teks);
  background: var(--vt-latar);
  border: 1px solid var(--vt-garis);
  border-radius: var(--vt-radius);
  padding: 9px 40px 9px 12px;
  width: 100%;
  min-width: 0;
  font-variant-numeric: tabular-nums;
  letter-spacing: .01em;
}

.vt-tampil::placeholder { color: var(--vt-samar); opacity: .75; letter-spacing: 0; }
.vt-tampil:focus { outline: 2px solid var(--vt-utama); outline-offset: 1px; border-color: var(--vt-utama); }
.vt-tampil:disabled { background: var(--mist, #f4f5f7); color: var(--vt-samar); cursor: not-allowed; }

.vt-tombol {
  position: absolute;
  right: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--vt-samar);
  cursor: pointer;
}
.vt-tombol:hover:not(:disabled) { color: var(--vt-utama); background: var(--vt-utama-tipis); }
.vt-tombol:focus-visible { outline: 2px solid var(--vt-utama); outline-offset: 1px; }
.vt-tombol:disabled { cursor: not-allowed; opacity: .5; }
.vt-tombol svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- panel ---------- */

.vt-panel {
  position: absolute;
  z-index: 60;
  top: calc(100% + 6px);
  left: 0;
  min-width: 292px;
  padding: 12px;
  background: var(--vt-latar);
  border: 1px solid var(--vt-garis);
  border-radius: calc(var(--vt-radius) + 4px);
  box-shadow: 0 12px 32px -12px rgba(16, 24, 40, .28), 0 2px 6px -2px rgba(16, 24, 40, .12);
  animation: vt-muncul .12s ease-out;
}
.vt-panel.vt-ke-atas { top: auto; bottom: calc(100% + 6px); }

@keyframes vt-muncul { from { opacity: 0; transform: translateY(-3px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .vt-panel { animation: none; } }

.vt-kepala { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }

.vt-nav {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  color: var(--vt-teks);
  cursor: pointer;
}
.vt-nav:hover { background: var(--vt-utama-tipis); color: var(--vt-utama); }
.vt-nav:focus-visible { outline: 2px solid var(--vt-utama); outline-offset: 1px; }
.vt-nav svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

.vt-pilihan { display: flex; gap: 6px; }
.vt-pilihan select {
  font: inherit;
  font-size: .94em;
  color: var(--vt-teks);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 6px;
  padding: 3px 4px;
  cursor: pointer;
  max-width: 8.5em;
}
.vt-pilihan select:hover { border-color: var(--vt-garis); }
.vt-pilihan select:focus-visible { outline: 2px solid var(--vt-utama); outline-offset: 1px; }

.vt-nama-hari, .vt-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
}
.vt-nama-hari {
  margin-bottom: 4px;
  font-size: .74em;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--vt-samar);
  text-align: center;
}
.vt-nama-hari span { padding: 4px 0; }
.vt-nama-hari .vt-akhir-pekan { color: var(--red-700, #b4543f); }

.vt-hari {
  font: inherit;
  font-size: .94em;
  font-variant-numeric: tabular-nums;
  color: var(--vt-teks);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 6px;
  height: 34px;
  padding: 0;
  cursor: pointer;
}
.vt-hari:hover:not(:disabled) { background: var(--vt-utama-tipis); }
.vt-hari:focus-visible { outline: 2px solid var(--vt-utama); outline-offset: -1px; }
.vt-hari.vt-akhir-pekan { color: var(--red-700, #b4543f); }
.vt-hari.vt-ini { border-color: var(--vt-garis); font-weight: 600; }
.vt-hari.vt-terpilih,
.vt-hari.vt-terpilih.vt-akhir-pekan {
  background: var(--vt-utama);
  border-color: var(--vt-utama);
  color: #fff;
  font-weight: 600;
}
.vt-hari.vt-terlarang { color: var(--vt-samar); opacity: .4; cursor: not-allowed; text-decoration: line-through; }
.vt-kosong { height: 34px; }

/* ---------- jam ---------- */

.vt-jam { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--vt-garis); }
.vt-label-jam { font-size: .74em; letter-spacing: .06em; text-transform: uppercase; color: var(--vt-samar); margin-bottom: 6px; }
.vt-baris-jam { display: flex; align-items: center; gap: 6px; }
.vt-baris-jam select {
  font: inherit;
  font-variant-numeric: tabular-nums;
  color: var(--vt-teks);
  background: var(--vt-latar);
  border: 1px solid var(--vt-garis);
  border-radius: 6px;
  padding: 6px 8px;
  cursor: pointer;
  flex: 1;
}
.vt-baris-jam select:focus-visible { outline: 2px solid var(--vt-utama); outline-offset: 1px; }
.vt-titik-dua { color: var(--vt-samar); }

/* ---------- kaki ---------- */

.vt-kaki { display: flex; gap: 6px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--vt-garis); }
.vt-aksi {
  font: inherit;
  font-size: .88em;
  color: var(--vt-teks);
  background: transparent;
  border: 1px solid var(--vt-garis);
  border-radius: 6px;
  padding: 6px 10px;
  cursor: pointer;
}
.vt-aksi:hover { border-color: var(--vt-utama); color: var(--vt-utama); }
.vt-aksi:focus-visible { outline: 2px solid var(--vt-utama); outline-offset: 1px; }
.vt-hapus { color: var(--vt-samar); }
.vt-selesai { margin-left: auto; background: var(--vt-utama); border-color: var(--vt-utama); color: #fff; }
.vt-selesai:hover { color: #fff; opacity: .92; }

/* ---------- layar sempit ---------- */

@media (max-width: 480px) {
  .vt-panel {
    position: fixed;
    inset: auto 0 0 0;
    top: auto;
    bottom: 0;
    left: 0 !important;
    min-width: 0;
    border-radius: 16px 16px 0 0;
    padding: 16px 16px calc(16px + env(safe-area-inset-bottom, 0px));
    box-shadow: 0 -8px 40px -12px rgba(16, 24, 40, .4);
    animation: vt-naik .16s ease-out;
  }
  .vt-panel.vt-ke-atas { bottom: 0; }
  .vt-hari, .vt-kosong { height: 42px; }
  @keyframes vt-naik { from { transform: translateY(14px); opacity: .6; } to { transform: none; opacity: 1; } }
}