/* ============================================================
   SQP — Kalender tanggal kunjungan (pickadate, tema classic)
   ------------------------------------------------------------
   Dimuat SETELAH themes/classic.css & themes/classic.date.css
   (lihat application/views/form.html) supaya override menang
   tanpa perlu !important di mana-mana.
   ============================================================ */

/* Jangkar dropdown: field jadi acuan posisi kalender (menempel di bawah input) */
.sqp-field { position: relative; }

.picker {
    font-family: var(--sqp-font-body);
    font-size: 15px;
    line-height: 1.2;
    width: 100%;
    color: var(--sqp-text);
}
.picker__input.picker__input--active {
    border-color: var(--sqp-green-600) !important;
    box-shadow: 0 0 0 3px rgba(16,148,49,.14);
}

/* Kotak dropdown */
.picker__holder {
    position: absolute;
    top: 6px;
    left: 0;
    right: auto;
    width: 100%;
    min-width: 280px;
    max-width: 360px;
    box-sizing: border-box;
    background: var(--sqp-white);
    border: 1px solid var(--sqp-border);
    border-radius: var(--sqp-r-md) !important;
    box-shadow: var(--sqp-sh-lg);
    overflow: hidden;
    pointer-events: none;   /* saat tertutup jangan menghalangi klik */
}
.picker--opened .picker__holder {
    max-height: none;
    border-width: 1px;
    box-shadow: var(--sqp-sh-lg);
    pointer-events: auto;
}
.picker__frame {
    padding: 0 !important;
    margin: 0 !important;
    min-width: 0 !important;
    max-width: none !important;
    width: 100%;
}
.picker__wrap { margin: 0 !important; display: block; width: auto; height: auto; }
.picker__box {
    display: block;
    padding: 12px 14px 8px !important;
    font-size: 1em;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

/* Header bulan/tahun + navigasi */
.picker__header {
    position: relative;
    text-align: center;
    margin: 0 0 4px;
    padding: 4px 40px 8px;
    min-height: 32px;
    line-height: 32px;
    border-bottom: 1px solid var(--sqp-n-100);
}
.picker__month, .picker__year {
    font-family: var(--sqp-font-display);
    font-weight: 700;
    font-size: 16px !important;
    line-height: 32px;
    color: var(--sqp-green-900);
    font-style: normal !important;
    display: inline-block;
    margin: 0 3px;
}
.picker__year { color: var(--sqp-text-muted); font-weight: 600; }

.picker__nav--prev, .picker__nav--next {
    position: absolute;
    top: 4px;
    width: 32px;
    height: 32px;
    padding: 0 !important;
    margin: 0;
    box-sizing: border-box !important;
    border-radius: var(--sqp-r-full);
    color: var(--sqp-green-800);
    cursor: pointer;
    transition: background .15s ease;
}
.picker__nav--prev { left: 0; right: auto; }
.picker__nav--next { right: 0; left: auto; }
.picker__nav--prev:before, .picker__nav--next:before {
    content: "";
    display: block;
    width: 0;
    height: 0;
    margin: 11px auto;
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
}
.picker__nav--prev:before { border-right: 7px solid currentColor; border-left: 0; }
.picker__nav--next:before { border-left: 7px solid currentColor; border-right: 0; }
.picker__nav--prev:hover, .picker__nav--next:hover {
    background: var(--sqp-green-200) !important;
    color: var(--sqp-green-900);
}
.picker__nav--disabled,
.picker__nav--disabled:hover {
    color: var(--sqp-n-400);
    background: none !important;
    cursor: default;
}

/* Tabel tanggal */
.picker__table {
    width: 100%;
    table-layout: fixed;
    border-collapse: separate;
    border-spacing: 2px;
    margin: 2px 0 4px;
    font-size: inherit;
}
.picker__table td { padding: 0; margin: 0; }
.picker__weekday {
    width: 14.285714%;
    padding: 2px 0 6px;
    font-size: 12px;
    font-weight: 700;
    color: var(--sqp-green-800);
}
.picker__day {
    display: block;
    padding: 0 !important;
    height: 36px;
    line-height: 34px;
    font-size: 14px;
    font-weight: 500;
    border: 1px solid transparent;
    border-radius: var(--sqp-r-sm);
    transition: background .12s ease, color .12s ease;
}
.picker__day--outfocus { color: var(--sqp-n-400); }
.picker__day--infocus:hover, .picker__day--outfocus:hover {
    background: var(--sqp-green-200);
    color: var(--sqp-green-900);
    cursor: pointer;
}
.picker__day--today { position: relative; }
.picker__day--today:before {
    content: "";
    position: absolute;
    top: 3px;
    right: 3px;
    width: 0;
    height: 0;
    border-top: 6px solid var(--sqp-green-600) !important;
    border-left: 6px solid transparent;
}
.picker__day--highlighted { border-color: var(--sqp-green-500) !important; }
.picker__day--highlighted:hover,
.picker--focused .picker__day--highlighted {
    background: var(--sqp-green-200);
    color: var(--sqp-green-900);
}
.picker__day--selected,
.picker__day--selected:hover,
.picker--focused .picker__day--selected {
    background: var(--sqp-green-800) !important;
    color: var(--sqp-white) !important;
    border-color: var(--sqp-green-800) !important;
    font-weight: 700;
}
.picker__day--disabled,
.picker__day--disabled:hover,
.picker--focused .picker__day--disabled {
    background: transparent !important;
    border-color: transparent !important;
    color: var(--sqp-n-400) !important;
    cursor: default;
}
.picker__day--disabled:before { border-top-color: var(--sqp-n-400) !important; }

/* Footer */
.picker__footer {
    text-align: center;
    padding: 6px 0 4px;
    border-top: 1px solid var(--sqp-n-100);
}
.picker__button--today, .picker__button--clear, .picker__button--close {
    width: auto;
    min-width: 96px;
    padding: 8px 18px;
    border: none;
    background: var(--sqp-green-200);
    color: var(--sqp-green-900);
    border-radius: var(--sqp-r-full);
    font-family: var(--sqp-font-body);
    font-size: 13px;
    font-weight: 600;
}
.picker__button--today:hover, .picker__button--clear:hover, .picker__button--close:hover,
.picker__button--today:focus, .picker__button--clear:focus, .picker__button--close:focus {
    background: var(--sqp-green-800);
    border-color: var(--sqp-green-800);
    color: var(--sqp-white);
    outline: none;
}
.picker__button--close:before { display: none; }

@media (max-width: 480px) {
    .picker__holder { max-width: none; min-width: 0; }
    .picker__day { height: 40px; line-height: 38px; }
}