/*
 * Brand override for the flatpickr time-only popup (core/time_field.js,
 * vendored core/vendor/flatpickr/flatpickr.min.css). Loaded after
 * flatpickr.min.css so these rules win the cascade without !important.
 *
 * The calendar-container rules in core/date_field.css (.flatpickr-calendar
 * border-radius/box-shadow/font-family) already apply here too — flatpickr
 * reuses that same container class for the time-only popup — so this file
 * only adds what's specific to the time widgets themselves.
 */

.flatpickr-time {
    height: 40px;
}

.flatpickr-time input {
    color: var(--color-text, #1a1a1a);
    font-size: 14px;
}

.flatpickr-time .flatpickr-time-separator,
.flatpickr-time .flatpickr-am-pm {
    color: var(--color-text-2, #666);
}

.numInputWrapper span.arrowUp:after {
    border-bottom-color: var(--color-text-2, #666);
}

.numInputWrapper span.arrowDown:after {
    border-top-color: var(--color-text-2, #666);
}

.numInputWrapper:hover {
    background: var(--color-bg-3, #f0efea);
}

/* Visible field: clock icon on the right, matching date_input's calendar
 * icon affordance. The whole field opens the picker on focus, so the icon
 * is purely visual.
 */
.time-input {
    padding-right: 30px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23666666' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpolyline points='12 7 12 12 16 14'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 9px center;
    background-size: 15px 15px;
    cursor: pointer;
}