/**
 * DateTimePicker Stylesheet
 *
 */
:root {
    /* Primary Colors */
    --dtp-primary: #000000;           /* Selected day, buttons */
    --dtp-primary-hover: #000000;     /* Button hover */
    --dtp-primary-text: #ffffff;      /* Text on primary color */

    /* Background Colors */
    --dtp-bg: #ffffff;                /* Main background */
    --dtp-header-bg: #000000;         /* Days of week header background */
    --dtp-hover-bg: #e8e8e8;          /* Day cell hover */

    /* Border Colors */
    --dtp-border: #cccccc;            /* Main border */
    --dtp-border-light: #dddddd;      /* Inner borders */

    /* Text Colors */
    --dtp-text: #333333;              /* Main text */
    --dtp-text-muted: #666666;        /* Secondary text */
    --dtp-header-text: #ffffff;       /* Days of week header text */

    /* Today Indicator */
    --dtp-today-border: #000000;      /* Border around today */

    /* Slider Colors */
    --dtp-slider-track: #dddddd;      /* Slider track */
    --dtp-slider-thumb: #000000;      /* Slider handle */

    /* Sizing */
    --dtp-width: 260px;               /* Picker width */
    --dtp-cell-size: 32px;            /* Day cell size */
}

/* ==================== MAIN CONTAINER ==================== */
.datetime-picker-container {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
    font-size: 14px;
    color: var(--dtp-text);
}

.datetime-picker {
    background: var(--dtp-bg);
    border: 1px solid var(--dtp-border);
    border-radius: 4px;
    padding: 10px;
    width: var(--dtp-width);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    box-sizing: border-box;
}

/* ==================== DATETIME DISPLAY ==================== */
.datetime-picker .d-flex.flex-row.justify-content-between.mb-1 {
    margin-bottom: 10px !important;
}

.datetime-picker label[for="selected-datetime"] {
    display: none; /* Hide "Day and Time" label to match old style */
}

.datetime-picker #selected-datetime {
    width: 100%;
    padding: 6px 8px;
    border: 1px solid var(--dtp-border);
    border-radius: 3px;
    font-family: monospace;
    font-size: 13px;
    text-align: left;
    background: var(--dtp-bg);
    color: var(--dtp-text);
    box-sizing: border-box;
}

.datetime-picker #selected-datetime:focus {
    outline: none;
    border-color: var(--dtp-primary);
}

/* ==================== MONTH/YEAR NAVIGATION ==================== */
.datetime-picker .d-flex.justify-content-between.mb-2 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px !important;
    gap: 4px;
}

.datetime-picker #prev-month,
.datetime-picker #next-month {
    background: var(--dtp-bg);
    border: 1px solid var(--dtp-border);
    border-radius: 3px;
    width: 28px;
    height: 28px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    color: var(--dtp-text);
    padding: 0;
}

.datetime-picker #prev-month:hover,
.datetime-picker #next-month:hover {
    background: var(--dtp-hover-bg);
}

.datetime-picker #monthSelect,
.datetime-picker #yearSelect {
    padding: 4px 6px;
    border: 1px solid var(--dtp-border);
    border-radius: 3px;
    font-size: 13px;
    background: var(--dtp-bg);
    color: var(--dtp-text);
    cursor: pointer;
}

.datetime-picker #monthSelect {
    flex: 1;
    min-width: 70px;
    margin-right: 5px;
}

.datetime-picker #yearSelect {
    width: 75px;
}

.datetime-picker #monthSelect:focus,
.datetime-picker #yearSelect:focus {
    outline: none;
    border-color: var(--dtp-primary);
}

/* ==================== DAYS OF WEEK HEADER ==================== */
.datetime-picker #days-of-week {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    background: var(--dtp-header-bg);
    border-top: 1px solid var(--dtp-border-light);
    border-bottom: 1px solid var(--dtp-border-light);
    padding: 6px 0;
    margin-bottom: 4px;
}

.datetime-picker .day-name {
    text-align: center;
    font-weight: 600;
    font-size: 12px;
    color: var(--dtp-header-text);
}

/* ==================== CALENDAR GRID ==================== */
.datetime-picker #calendar {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
    margin-bottom: 10px;
}

.datetime-picker .day-cell {
    height: var(--dtp-cell-size);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border-radius: 3px;
    font-size: 13px;
    color: var(--dtp-text);
    transition: background-color 0.15s;
}

.datetime-picker .day-cell:hover {
    background: var(--dtp-hover-bg);
}

.datetime-picker .day-cell.selected {
    background: var(--dtp-primary);
    color: var(--dtp-primary-text);
    font-weight: 600;
}

.datetime-picker .day-cell.selected:hover {
    background: var(--dtp-primary-hover);
}

.datetime-picker .day-cell.today {
    border: 2px solid var(--dtp-today-border);
}

.datetime-picker .day-cell.today.selected {
    border-color: var(--dtp-primary-text);
}

/* ==================== TIME SECTION ==================== */
.datetime-picker .sliders-container {
    border-top: 1px solid var(--dtp-border-light);
    padding-top: 10px;
}

/* Time label - add before sliders */
/*
.datetime-picker .sliders-container::before {
    content: "Time";
    display: block;
    font-weight: 600;
    margin-bottom: 8px;
    color: var(--dtp-text);
}
 */

/* Slider rows */
.datetime-picker .d-flex.align-items-center.mb-1 {
    display: grid;
    grid-template-columns: 70px 1fr 35px;
    align-items: center;
    margin-bottom: 6px !important;
    gap: 8px;
}

/* Slider labels */
.datetime-picker .d-flex.align-items-center.mb-1 > label {
    font-size: 13px;
    color: var(--dtp-text-muted);
    text-align: left;
}

/* Slider value display */
.datetime-picker .slider-value {
    font-size: 12px;
    color: var(--dtp-text-muted);
    text-align: right;
    font-family: monospace;
}

/* Slider styling */
.datetime-picker input[type="range"] {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 6px;
    background: var(--dtp-slider-track);
    border-radius: 3px;
    outline: none;
    cursor: pointer;
}

.datetime-picker input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 16px;
    height: 16px;
    background: var(--dtp-slider-thumb);
    border-radius: 50%;
    cursor: pointer;
    border: 2px solid var(--dtp-bg);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.datetime-picker input[type="range"]::-moz-range-thumb {
    width: 16px;
    height: 16px;
    background: var(--dtp-slider-thumb);
    border-radius: 50%;
    cursor: pointer;
    border: 2px solid var(--dtp-bg);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.datetime-picker input[type="range"]:hover::-webkit-slider-thumb {
    transform: scale(1.1);
}

/* Nanoseconds input */
.datetime-picker input[type="number"] {
    width: 100%;
    padding: 4px 6px;
    border: 1px solid var(--dtp-border);
    border-radius: 3px;
    font-size: 12px;
    font-family: monospace;
}

/* ==================== UTC TOGGLE ==================== */
.datetime-picker .form-check {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 8px;
    padding-left: 0;
}

.datetime-picker .form-check-input {
    width: 16px;
    height: 16px;
    margin: 0;
    cursor: pointer;
    accent-color: var(--dtp-primary);
}

.datetime-picker .form-check-label {
    font-size: 13px;
    color: var(--dtp-text-muted);
    cursor: pointer;
}

/* DOY Toggle */
.datetime-picker #doy-toggle-container {
    margin-bottom: 8px;
}

/* ==================== FOOTER BUTTONS ==================== */
.datetime-picker footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid var(--dtp-border-light);
    padding-top: 10px;
    margin-top: 10px;
}

.datetime-picker #now-button,
.datetime-picker #close-button {
    padding: 6px 16px;
    border: 1px solid var(--dtp-border);
    border-radius: 3px;
    font-size: 13px;
    cursor: pointer;
    transition: background-color 0.15s;
}

.datetime-picker #now-button {
    background: var(--dtp-bg);
    color: var(--dtp-text);
}

.datetime-picker #now-button:hover {
    background: var(--dtp-hover-bg);
}

.datetime-picker #close-button {
    background: var(--dtp-bg);
    color: var(--dtp-text);
}

.datetime-picker #close-button:hover {
    background: var(--dtp-hover-bg);
}

/* ==================== POSITIONING FOR INPUT/BUTTON MODE ==================== */
.datetime-picker-container {
    position: relative;
}

.datetime-picker-container .datetime-picker {
    position: absolute;
    z-index: 1000;
    margin-top: 4px;
}

/* Inline mode - static positioning */
.datetime-picker-container .datetime-picker[style*="position: static"] {
    position: static;
    box-shadow: none;
}

/* ==================== DARK MODE (optional) ==================== */
/*
@media (prefers-color-scheme: dark) {
    :root {
        --dtp-bg: #2d2d2d;
        --dtp-header-bg: #383838;
        --dtp-hover-bg: #404040;
        --dtp-border: #555555;
        --dtp-border-light: #444444;
        --dtp-text: #e0e0e0;
        --dtp-text-muted: #aaaaaa;
        --dtp-header-text: #e0e0e0;
        --dtp-slider-track: #555555;
    }
}
*/

/* ==================== THEME PRESETS ==================== */
/*
   Copy and paste one of these into your own stylesheet to change themes.
   Or modify the :root variables at the top of this file.
*/

/* BLUE THEME (default) - already set above */

/* BLACK HEADER (use with any theme)
:root {
    --dtp-header-bg: #333333;
    --dtp-header-text: #ffffff;
}
*/

/* GREEN THEME
:root {
    --dtp-primary: #28a745;
    --dtp-primary-hover: #218838;
    --dtp-today-border: #28a745;
    --dtp-slider-thumb: #28a745;
}
*/

/* RED THEME
:root {
    --dtp-primary: #dc3545;
    --dtp-primary-hover: #c82333;
    --dtp-today-border: #dc3545;
    --dtp-slider-thumb: #dc3545;
}
*/

/* PURPLE THEME
:root {
    --dtp-primary: #6f42c1;
    --dtp-primary-hover: #5a32a3;
    --dtp-today-border: #6f42c1;
    --dtp-slider-thumb: #6f42c1;
}
*/

/* ORANGE THEME
:root {
    --dtp-primary: #fd7e14;
    --dtp-primary-hover: #e96b02;
    --dtp-today-border: #fd7e14;
    --dtp-slider-thumb: #fd7e14;
}
*/

/* DARK MODE THEME
:root {
    --dtp-bg: #2d2d2d;
    --dtp-header-bg: #1a1a1a;
    --dtp-header-text: #ffffff;
    --dtp-hover-bg: #404040;
    --dtp-border: #555555;
    --dtp-border-light: #444444;
    --dtp-text: #e0e0e0;
    --dtp-text-muted: #aaaaaa;
    --dtp-slider-track: #555555;
}
*/