/* Date and time field pickers.
 *
 * The browser draws its own calendar button inside a date field, and it draws
 * it as a dark glyph. Every date field in this app sits on a near-black or
 * dark-gray field, so the glyph was invisible - the crew had been clicking a
 * black-on-black button from memory. color-scheme tells the browser the field
 * is dark, so it draws the glyph and the whole drop-down panel light, and the
 * rules below turn that glyph into a gold chip that reads as a button.
 *
 * Clicking anywhere in the field opens the picker too - see js/date-picker.js.
 *
 * Pulled in by templates/partials/date_picker_assets.html, which is the only
 * thing that should reference this file. Same treatment the Toromont portal
 * got in e8e8bdf; that template now loads this file rather than keeping its
 * own copy.
 *
 * Deliberately NOT loaded by reports/edit_session.html or
 * projects/edit_session.html: those two style .form-control to #C0C0C0 silver,
 * where the native dark glyph is already easy to see and flipping it light
 * would hide it again.
 */
input[type="date"],
input[type="datetime-local"],
input[type="month"],
input[type="time"],
input[type="week"] {
    color-scheme: dark;
    cursor: pointer;
}

input[type="date"]::-webkit-calendar-picker-indicator,
input[type="datetime-local"]::-webkit-calendar-picker-indicator,
input[type="month"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator,
input[type="week"]::-webkit-calendar-picker-indicator {
    opacity: 1;
    cursor: pointer;
    padding: 3px 4px;
    margin-right: -2px;
    border-radius: 4px;
    border: 1px solid #D4AF37;
    background-color: rgba(212, 175, 55, 0.35);
}

input[type="date"]:hover::-webkit-calendar-picker-indicator,
input[type="datetime-local"]:hover::-webkit-calendar-picker-indicator,
input[type="month"]:hover::-webkit-calendar-picker-indicator,
input[type="time"]:hover::-webkit-calendar-picker-indicator,
input[type="week"]:hover::-webkit-calendar-picker-indicator {
    background-color: #D4AF37;
}

/* A disabled field should not advertise a button it will not open. */
input[type="date"]:disabled,
input[type="datetime-local"]:disabled,
input[type="month"]:disabled,
input[type="time"]:disabled,
input[type="week"]:disabled {
    cursor: default;
}

input[type="date"]:disabled::-webkit-calendar-picker-indicator,
input[type="datetime-local"]:disabled::-webkit-calendar-picker-indicator,
input[type="month"]:disabled::-webkit-calendar-picker-indicator,
input[type="time"]:disabled::-webkit-calendar-picker-indicator,
input[type="week"]:disabled::-webkit-calendar-picker-indicator {
    opacity: 0.35;
    cursor: default;
    border-color: #6c757d;
    background-color: transparent;
}

/* Mobile-first: bigger tap targets in the yard. */
@media (max-width: 768px) {
    input[type="date"]::-webkit-calendar-picker-indicator,
    input[type="datetime-local"]::-webkit-calendar-picker-indicator,
    input[type="month"]::-webkit-calendar-picker-indicator,
    input[type="time"]::-webkit-calendar-picker-indicator,
    input[type="week"]::-webkit-calendar-picker-indicator {
        padding: 6px 7px;
    }
}