/* ==========================================================================
   IGNAN — Tampilan datepicker halaman publik

   Menimpa `assets/css/vendor/daterangepicker.css` (bundel yang sama dengan
   /admin) supaya kalendernya memakai bahasa visual halaman `page.css`: sudut
   membulat, bayangan lembut, aksen biru IGNAN, dan **hari Minggu berwarna
   merah** (diminta user, DOCS/sgt_20260804.md).

   Pewarnaan akhir pekan bergantung pada `firstDay: 0` di ignan-datepicker.js —
   Minggu selalu kolom pertama, Sabtu kolom terakhir. Kalau nanti firstDay
   diubah, selektor di bawah ikut salah.
   ========================================================================== */

:root {
    --dp-blue: #109aec;
    --dp-navy: #042c54;
    --dp-red: #d9342b;
    --dp-line: #e3eaf2;
}

.daterangepicker {
    border: 1px solid var(--dp-line);
    border-radius: 16px;
    box-shadow: 0 22px 48px rgba(4, 44, 84, 0.16);
    font-family: inherit;
    font-size: 0.86rem;
    padding: 10px;
}

/* Panah kecil di atas kalender ikut dibulatkan warnanya. */
.daterangepicker:after {
    border-bottom-color: #ffffff;
}

.daterangepicker .drp-calendar {
    max-width: 100%;
    padding: 6px 10px 10px;
}

.daterangepicker .calendar-table {
    border: 0;
    border-radius: 12px;
}

.daterangepicker .calendar-table th {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #7c8b9a;
}

.daterangepicker .calendar-table th.month {
    font-size: 0.9rem;
    letter-spacing: 0.01em;
    text-transform: none;
    color: var(--dp-navy);
}

.daterangepicker .calendar-table td {
    border-radius: 9px;
    height: 34px;
    width: 34px;
    font-weight: 600;
    color: #33475b;
}

/* HARI MINGGU (kolom pertama) — teks merah.

   HANYA Minggu, tidak termasuk Sabtu: yang diminta user memang "beri warna
   merah pada hari minggu" (DOCS/sgt_20260804.md), dan itu juga kebiasaan
   kalender Indonesia — tanggal merah = hari libur, sedangkan Sabtu hari kerja
   bagi banyak vendor acara (jam buka IGNAN sendiri Senin–Sabtu).
   ⚠️ Berbeda dengan /admin yang memerahkan kedua kolom akhir pekan; perbedaan
   ini sengaja, jangan "diseragamkan" tanpa menanyakan dulu. */
.daterangepicker .calendar-table thead tr:last-child th:first-child {
    color: var(--dp-red);
}

.daterangepicker .calendar-table tbody td:first-child:not(.active):not(.off) {
    color: var(--dp-red);
}

/* Tanggal di luar bulan yang tampil tetap redup, termasuk kolom Minggu —
   kalau tidak, angka merah di baris pertama/terakhir terbaca seolah bisa
   dipilih pada bulan yang sedang dilihat. */
.daterangepicker .calendar-table td.off,
.daterangepicker .calendar-table td.off:first-child {
    color: #c2ccd6;
}

.daterangepicker td.available:hover {
    background-color: rgba(16, 154, 236, 0.1);
    color: var(--dp-navy);
}

.daterangepicker td.active,
.daterangepicker td.active:hover,
.daterangepicker td.active:first-child,
.daterangepicker td.active:last-child {
    background-color: var(--dp-blue);
    color: #ffffff;
}

.daterangepicker td.today:not(.active) {
    box-shadow: inset 0 0 0 1.5px rgba(16, 154, 236, 0.55);
}

.daterangepicker td.disabled {
    color: #ccd5de;
    text-decoration: none;   /* bawaan vendor mencoretnya — terbaca seperti harga */
}

.daterangepicker select.monthselect,
.daterangepicker select.yearselect {
    border: 1px solid var(--dp-line);
    border-radius: 8px;
    padding: 4px 6px;
    font-size: 0.82rem;
    color: var(--dp-navy);
}

/* Kolom tanggal: beri ikon kalender supaya jelas bahwa ia dibuka, bukan
   diketik (kolomnya readonly). */
.pg-field .js-date {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237c8b9a' stroke-width='2' stroke-linecap='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M8 3v4M16 3v4M3 11h18'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 18px 18px;
    padding-right: 40px;
    cursor: pointer;
}