/* ================================================
   CHROME DATETIME PICKER POPUP ADVANCED STYLING 🎮
   Aggressive styling for Chrome's calendar popup
   (Uses experimental CSS and Shadow DOM selectors)
================================================ */

/* -------------------------------------------
   CHROME CALENDAR POPUP - AGGRESSIVE THEMING
------------------------------------------- */

/* Target the calendar popup container (Chrome/Edge) */
input[type="datetime-local"]::-webkit-calendar-picker-indicator {
    filter: invert(1) brightness(1.5) sepia(1) hue-rotate(160deg) saturate(3) !important;
    cursor: pointer !important;
}

/* These selectors target Chrome's Shadow DOM elements */
/* Note: Support is experimental and may break in future Chrome versions */

/* Calendar navigation bar */
::-webkit-datetime-edit-month-field:focus,
::-webkit-datetime-edit-day-field:focus,
::-webkit-datetime-edit-year-field:focus {
    background: rgba(0, 217, 255, 0.3) !important;
    color: #00ffff !important;
    outline: none !important;
}

/* -------------------------------------------
   FORCED DARK MODE FOR DATETIME PICKER
   Uses color-scheme to force dark appearance
------------------------------------------- */

input[type="datetime-local"] {
    color-scheme: dark !important;
}

input[type="date"] {
    color-scheme: dark !important;
}

input[type="time"] {
    color-scheme: dark !important;
}

/* -------------------------------------------
   FILTER-BASED DARK MODE (Fallback)
   Inverts the popup to make it dark
------------------------------------------- */

/* This is a hack but it works! */
@supports (color-scheme: dark) {
    input[type="datetime-local"],
    input[type="date"],
    input[type="time"] {
        color-scheme: dark !important;
    }
}

/* -------------------------------------------
   ADDITIONAL CHROME-SPECIFIC OVERRIDES
------------------------------------------- */

/* Try to force dark colors on popup elements */
input[type="datetime-local"]::-webkit-calendar-picker-indicator,
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator {
    background-color: rgba(0, 217, 255, 0.1) !important;
    border-radius: 4px !important;
    padding: 4px !important;
    cursor: pointer !important;
    transition: all 150ms ease !important;
}

input[type="datetime-local"]::-webkit-calendar-picker-indicator:hover,
input[type="date"]::-webkit-calendar-picker-indicator:hover,
input[type="time"]::-webkit-calendar-picker-indicator:hover {
    background-color: rgba(0, 217, 255, 0.2) !important;
    box-shadow: 0 0 10px rgba(0, 217, 255, 0.5) !important;
    transform: scale(1.1) !important;
}

/* -------------------------------------------
   EXPERIMENTAL: Try to style popup internals
   These may or may not work depending on browser
------------------------------------------- */

/* Attempt to darken popup background */
::-webkit-datetime-edit-fields-wrapper {
    background-color: transparent !important;
}

::-webkit-datetime-edit {
    padding: 0 !important;
}

/* Make field values cyan */
::-webkit-datetime-edit-month-field,
::-webkit-datetime-edit-day-field,
::-webkit-datetime-edit-year-field,
::-webkit-datetime-edit-hour-field,
::-webkit-datetime-edit-minute-field,
::-webkit-datetime-edit-ampm-field {
    color: var(--cp-brand, #00d9ff) !important;
    font-weight: 700 !important;
    background: transparent !important;
}

/* Divider text (slashes, colons) */
::-webkit-datetime-edit-text {
    color: rgba(255, 255, 255, 0.5) !important;
}

/* -------------------------------------------
   IMPORTANT NOTE ABOUT THIS CSS
------------------------------------------- */

/*
REALITY CHECK: Chrome's datetime picker popup calendar is VERY hard to style.

What this CSS does:
✅ Forces dark mode on the popup (color-scheme: dark)
✅ Styles the calendar icon button
✅ Styles the date/time input fields
✅ Makes selected segments cyan

What this CSS CANNOT do:
❌ Change individual calendar day cells
❌ Style the navigation arrows
❌ Change the "Today"/"Clear" buttons
❌ Modify the popup's box shadow
❌ Change the popup position

The color-scheme: dark property is our best weapon here.
It tells the browser to use its built-in dark theme for the popup.

The popup will be DARKER but won't have our exact cyan colors.
This is a browser limitation, not a CSS problem.
*/

/* -------------------------------------------
   FIREFOX FALLBACK (Minimal Support)
------------------------------------------- */

@-moz-document url-prefix() {
    /* Firefox has zero styling support for its datetime picker */
    /* The best we can do is style the input itself */
    input[type="datetime-local"],
    input[type="date"],
    input[type="time"] {
        color-scheme: dark;
    }
}

/* -------------------------------------------
   SAFARI FALLBACK (Minimal Support)
------------------------------------------- */

@supports (-webkit-appearance: none) and (not (-moz-appearance: none)) {
    /* Safari also has limited support */
    input[type="datetime-local"],
    input[type="date"],
    input[type="time"] {
        color-scheme: dark;
    }
}

/* -------------------------------------------
   MOBILE DEVICES
------------------------------------------- */

@media (max-width: 768px) {
    /* On mobile, the datetime picker is usually the OS native picker */
    /* We have zero control over it, but color-scheme helps */
    input[type="datetime-local"],
    input[type="date"],
    input[type="time"] {
        color-scheme: dark;
        -webkit-text-fill-color: var(--cp-brand, #00d9ff);
    }
}

/* -------------------------------------------
   ENHANCED CALENDAR ICON
------------------------------------------- */

/* Make the calendar icon more visible and cyan */
input[type="datetime-local"]::-webkit-calendar-picker-indicator {
    /* SVG icon color filter to make it cyan */
    filter: 
        invert(70%) 
        sepia(100%) 
        saturate(500%) 
        hue-rotate(160deg) 
        brightness(110%) 
        contrast(101%) !important;
}

input[type="date"]::-webkit-calendar-picker-indicator {
    filter: 
        invert(70%) 
        sepia(100%) 
        saturate(500%) 
        hue-rotate(160deg) 
        brightness(110%) 
        contrast(101%) !important;
}

input[type="time"]::-webkit-calendar-picker-indicator {
    filter: 
        invert(70%) 
        sepia(100%) 
        saturate(500%) 
        hue-rotate(160deg) 
        brightness(110%) 
        contrast(101%) !important;
}

/* -------------------------------------------
   SUMMARY OF WHAT THIS ACHIEVES
------------------------------------------- */

/*
With this CSS applied:

IN CHROME/EDGE:
✅ Popup will use dark mode (dark background, light text)
✅ Calendar icon will be cyan with glow effect
✅ Input field segments will be cyan
✅ Selected date segments will have cyan background
⚠️ Calendar grid stays mostly browser-styled (with dark theme)
⚠️ Today/Clear buttons stay browser-styled (with dark theme)

IN FIREFOX:
✅ Popup will use dark mode
❌ No other styling possible

IN SAFARI:
✅ Popup will use dark mode
❌ No other styling possible

This is the MAXIMUM styling possible without JavaScript.
The popup calendar is browser-native UI that resists CSS.
*/