/*
 * date-field.css — the portal's look for flatpickr (see /js/date-field.js).
 *
 * Loaded after flatpickr.min.css, so plain selectors win over its defaults.
 * Colours come from the theme tokens in v2-template.css, so dark and light
 * follow the theme toggle without a rule per theme.
 */

/* ── The field: a calendar icon where the native picker had one ─────────── */
html[data-theme] input[data-date-field] {
    padding-right: 30px;
    background-image: var(--date-field-icon);
    background-repeat: no-repeat;
    background-position: right 9px center;
    background-size: 14px 14px;
    cursor: pointer;
}
html[data-theme] input[data-date-field]:disabled { cursor: not-allowed; }

html[data-theme="dark"] {
    --date-field-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14' fill='none' stroke='%23b0b0b0' stroke-width='1.3'%3E%3Crect x='1.5' y='2.5' width='11' height='10' rx='1.5'/%3E%3Cpath d='M1.5 5.5h11M4.5 1v3M9.5 1v3'/%3E%3C/svg%3E");
}
html[data-theme="light"] {
    --date-field-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14' fill='none' stroke='%235d5d5d' stroke-width='1.3'%3E%3Crect x='1.5' y='2.5' width='11' height='10' rx='1.5'/%3E%3Cpath d='M1.5 5.5h11M4.5 1v3M9.5 1v3'/%3E%3C/svg%3E");
}

/* ── The calendar ──────────────────────────────────────────────────────── */
.flatpickr-calendar {
    font-family: var(--font-body);
    background: var(--modal-bg);
    color: var(--text-main);
    border: 1px solid var(--frame-border);
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
}
.flatpickr-calendar.arrowTop::before,
.flatpickr-calendar.arrowTop::after { border-bottom-color: var(--modal-bg); }
.flatpickr-calendar.arrowBottom::before,
.flatpickr-calendar.arrowBottom::after { border-top-color: var(--modal-bg); }
.flatpickr-calendar.arrowTop::before { border-bottom-color: var(--frame-border); }
.flatpickr-calendar.arrowBottom::before { border-top-color: var(--frame-border); }

.flatpickr-months .flatpickr-month,
.flatpickr-months .flatpickr-prev-month,
.flatpickr-months .flatpickr-next-month,
.flatpickr-current-month input.cur-year,
.flatpickr-current-month .flatpickr-monthDropdown-months {
    color: var(--text-main);
    fill: var(--text-main);
}
/* Disabled when min and max share a year — flatpickr's own grey is black at 50%. */
.flatpickr-current-month input.cur-year[disabled],
.flatpickr-current-month input.cur-year[disabled]:hover { color: var(--text-soft); }
.flatpickr-current-month .flatpickr-monthDropdown-months { background: var(--modal-bg); }
.flatpickr-current-month .flatpickr-monthDropdown-months .flatpickr-monthDropdown-month {
    background: var(--modal-bg);
    color: var(--text-main);
}
.flatpickr-months .flatpickr-prev-month:hover svg,
.flatpickr-months .flatpickr-next-month:hover svg { fill: var(--accent); }
.numInputWrapper span.arrowUp::after { border-bottom-color: var(--text-soft); }
.numInputWrapper span.arrowDown::after { border-top-color: var(--text-soft); }
.numInputWrapper:hover,
.flatpickr-current-month .flatpickr-monthDropdown-months:hover { background: var(--line-soft); }

span.flatpickr-weekday {
    color: var(--text-soft);
    font-weight: 600;
}

.flatpickr-day {
    color: var(--text-main);
    border-radius: 6px;
}
.flatpickr-day:hover,
.flatpickr-day:focus,
.flatpickr-day.prevMonthDay:hover,
.flatpickr-day.nextMonthDay:hover {
    background: var(--line-soft);
    border-color: transparent;
}
.flatpickr-day.today { border-color: var(--accent); }
.flatpickr-day.today:hover,
.flatpickr-day.today:focus {
    background: var(--line-soft);
    border-color: var(--accent);
    color: var(--text-main);
}
.flatpickr-day.selected,
.flatpickr-day.selected:hover,
.flatpickr-day.selected:focus,
.flatpickr-day.selected.prevMonthDay,
.flatpickr-day.selected.nextMonthDay {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
}
.flatpickr-day.prevMonthDay,
.flatpickr-day.nextMonthDay { color: var(--text-soft); opacity: 0.45; }
.flatpickr-day.flatpickr-disabled,
.flatpickr-day.flatpickr-disabled:hover {
    color: var(--text-soft);
    opacity: 0.3;
    background: transparent;
    border-color: transparent;
}

/* Time row (datetime fields) */
.flatpickr-calendar.hasTime .flatpickr-time { border-top: 1px solid var(--line-soft); }
.flatpickr-time input,
.flatpickr-time .flatpickr-time-separator,
.flatpickr-time .flatpickr-am-pm { color: var(--text-main); }
.flatpickr-time input:hover,
.flatpickr-time input:focus { background: var(--line-soft); }

/* Today / Clear */
.date-field-footer {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    padding: 6px 10px 8px;
    border-top: 1px solid var(--line-soft);
}
.date-field-btn {
    border: 0;
    background: transparent;
    color: var(--accent);
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    padding: 4px 6px;
    border-radius: 6px;
    cursor: pointer;
}
.date-field-btn:hover,
.date-field-btn:focus-visible { background: var(--line-soft); }
.date-field-btn:disabled { color: var(--text-soft); opacity: 0.5; cursor: not-allowed; }