/* KillPest custom dd.mm.yyyy date picker.
 *
 * Replaces flatpickr in date-only contexts so we get a usable
 * year + month selector (flatpickr v4's stock year input is unstyled
 * and we couldn't make it look right in a reasonable time).
 *
 * Wrapper is injected by `static/js/kp-date-picker.js` around every
 * input that matches the configured selectors (currently
 * `.kp-dp-input, .kp-date-input` — anything Django widgets give the
 * `dd.mm.yyyy` placeholder class).
 *
 * Date+time fields (`.kp-datetime-input`) still use flatpickr because
 * we need a time-of-day selector that this picker does not provide.
 */
.kp-dp-wrapper { position: relative; display: block; }
.kp-dp-popup {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    z-index: 50;
    width: 280px;
    background: #fff;
    border: 1px solid #cbd5e1;
    border-radius: 0.5rem;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.12);
    padding: 0.75rem;
    font-size: 0.875rem;
}
.kp-dp-header {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    margin-bottom: 0.5rem;
}
/* `!important` because per-form CSS (route_form, visit_form,
   location_form) defines a `form .kp-form-field select:not([multiple])`
   rule with specificity (0,2,2) that beats `.kp-dp-header select`
   (0,1,1) — it injects 0.5rem padding + width:100% + font-size that
   collapse our picker controls. The picker is a self-contained widget;
   forcing its inner appearance is correct here. */
.kp-dp-header select.kp-dp-month,
.kp-dp-header select.kp-dp-year {
    border: 1px solid #cbd5e1 !important;
    border-radius: 0.25rem !important;
    padding: 0.125rem 1.4rem 0.125rem 0.4rem !important;
    background: #fff !important;
    font-size: 0.875rem !important;
    color: #1e293b !important;
    box-shadow: none !important;
    height: auto !important;
    line-height: 1.4 !important;
    /* Show the native dropdown chevron at the right edge. */
    -webkit-appearance: menulist !important;
            appearance: menulist !important;
}
.kp-dp-header .kp-dp-month { flex: 1 1 0 !important; min-width: 0 !important; width: auto !important; }
.kp-dp-header .kp-dp-year { flex: 0 0 5.5em !important; width: 5.5em !important; min-width: 0 !important; }
.kp-dp-nav {
    background: transparent;
    border: 1px solid transparent;
    border-radius: 0.25rem;
    padding: 0 0.4rem;
    cursor: pointer;
    font-size: 0.875rem;
    color: #475569;
}
.kp-dp-nav:hover { background: #f1f5f9; }
.kp-dp-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
    text-align: center;
}
.kp-dp-grid .kp-dp-wd {
    font-size: 0.7rem;
    color: #94a3b8;
    padding: 0.25rem 0;
}
.kp-dp-grid button.kp-dp-day {
    background: transparent;
    border: 0;
    border-radius: 0.25rem;
    padding: 0.35rem 0;
    cursor: pointer;
    color: #1e293b;
}
.kp-dp-grid button.kp-dp-day:hover { background: #e2e8f0; }
.kp-dp-grid button.kp-dp-day.kp-dp-other { color: #cbd5e1; }
.kp-dp-grid button.kp-dp-day.kp-dp-today {
    outline: 1px solid #1c685e;
}
.kp-dp-grid button.kp-dp-day.kp-dp-selected {
    background: #1c685e;
    color: #fff;
}
.kp-dp-footer {
    margin-top: 0.5rem;
    display: flex;
    justify-content: space-between;
    font-size: 0.75rem;
}
.kp-dp-footer button {
    background: transparent;
    border: 0;
    cursor: pointer;
    color: #475569;
}
.kp-dp-footer button:hover { text-decoration: underline; }