/* ==========================================================================
   Material (Android-style) date & clock-time picker.
   Self-contained, themed off Metronic's --bs-primary. Drives native
   date / datetime-local / time inputs so server-side value formats are
   unchanged. See datetime-picker.js for behaviour.
   ========================================================================== */

:root {
    --mdtp-accent: var(--bs-primary, #3E97FF);
    --mdtp-accent-contrast: #ffffff;
    --mdtp-surface: #ffffff;
    --mdtp-on-surface: #1a1a1a;
    --mdtp-muted: #9aa0ac;
    --mdtp-track: #eef1f6;
}

/* Hide the browser's own picker indicator on enhanced inputs so only ours opens. */
.dtp-enhanced::-webkit-calendar-picker-indicator { display: none; -webkit-appearance: none; }
.dtp-enhanced { cursor: pointer; }

.mdtp-overlay {
    position: fixed;
    inset: 0;
    background: rgba(20, 23, 31, .45);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10800;
    opacity: 0;
    transition: opacity .15s ease;
    padding: 16px;
}
.mdtp-overlay.mdtp-open { opacity: 1; }

.mdtp-dialog {
    background: var(--mdtp-surface);
    color: var(--mdtp-on-surface);
    border-radius: 16px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, .28);
    width: 328px;
    max-width: 100%;
    overflow: hidden;
    transform: translateY(8px) scale(.98);
    transition: transform .15s ease;
    font-family: inherit;
    user-select: none;
}
.mdtp-overlay.mdtp-open .mdtp-dialog { transform: none; }

.mdtp-view { display: none; flex-direction: column; }
.mdtp-view.mdtp-active { display: flex; }

.mdtp-caption {
    font-size: 11px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--mdtp-muted);
    padding: 18px 24px 0;
}

/* ---- Date header ---- */
.mdtp-date-head { padding: 4px 24px 16px; border-bottom: 1px solid var(--mdtp-track); }
.mdtp-date-head .mdtp-year { font-size: 13px; color: var(--mdtp-muted); cursor: pointer; }
.mdtp-date-head .mdtp-year.mdtp-on { color: var(--mdtp-accent); font-weight: 600; }
.mdtp-date-head .mdtp-headline { font-size: 22px; font-weight: 700; margin-top: 2px; cursor: pointer; }

/* ---- Calendar ---- */
.mdtp-cal { padding: 10px 14px 4px; }
.mdtp-cal-nav { display: flex; align-items: center; justify-content: space-between; padding: 2px 8px 8px; }
.mdtp-cal-nav .mdtp-month-label { font-weight: 600; font-size: 14px; }
.mdtp-nav-btn {
    border: 0; background: transparent; width: 34px; height: 34px; border-radius: 50%;
    cursor: pointer; color: var(--mdtp-on-surface); font-size: 18px; line-height: 1;
    display: flex; align-items: center; justify-content: center;
}
.mdtp-nav-btn:hover { background: var(--mdtp-track); }
.mdtp-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.mdtp-dow { text-align: center; font-size: 11px; color: var(--mdtp-muted); padding: 4px 0; font-weight: 600; }
.mdtp-day {
    aspect-ratio: 1 / 1; display: flex; align-items: center; justify-content: center;
    font-size: 13px; border-radius: 50%; cursor: pointer; border: 0; background: transparent;
    color: var(--mdtp-on-surface);
}
.mdtp-day:hover:not(.mdtp-empty):not([disabled]) { background: var(--mdtp-track); }
.mdtp-day.mdtp-today { box-shadow: inset 0 0 0 1px var(--mdtp-accent); }
.mdtp-day.mdtp-selected { background: var(--mdtp-accent); color: var(--mdtp-accent-contrast); }
.mdtp-day.mdtp-empty { visibility: hidden; cursor: default; }
.mdtp-day[disabled] { color: var(--mdtp-muted); opacity: .4; cursor: default; }

/* ---- Year list ---- */
.mdtp-years { max-height: 260px; overflow-y: auto; padding: 6px 0; display: none; }
.mdtp-years.mdtp-active { display: block; }
.mdtp-cal.mdtp-hidden { display: none; }
.mdtp-year-item {
    text-align: center; padding: 10px 0; font-size: 15px; cursor: pointer; border-radius: 999px;
    margin: 2px 40px;
}
.mdtp-year-item:hover { background: var(--mdtp-track); }
.mdtp-year-item.mdtp-selected { background: var(--mdtp-accent); color: var(--mdtp-accent-contrast); font-weight: 700; }

/* ---- Time header ---- */
.mdtp-time-head { display: flex; align-items: center; gap: 10px; padding: 6px 24px 14px; }
.mdtp-time-digits { display: flex; align-items: center; gap: 4px; }
.mdtp-digit {
    font-size: 40px; font-weight: 300; line-height: 1; padding: 4px 8px; border-radius: 10px;
    cursor: pointer; color: var(--mdtp-on-surface); background: var(--mdtp-track); min-width: 64px; text-align: center;
}
.mdtp-digit.mdtp-on { background: color-mix(in srgb, var(--mdtp-accent) 18%, #fff); color: var(--mdtp-accent); }
.mdtp-colon { font-size: 36px; font-weight: 300; }
.mdtp-ampm { display: flex; flex-direction: column; border: 1px solid var(--mdtp-track); border-radius: 8px; overflow: hidden; margin-left: 6px; }
.mdtp-ampm button {
    border: 0; background: transparent; padding: 7px 12px; font-size: 13px; font-weight: 600;
    cursor: pointer; color: var(--mdtp-muted);
}
.mdtp-ampm button.mdtp-on { background: color-mix(in srgb, var(--mdtp-accent) 18%, #fff); color: var(--mdtp-accent); }

/* ---- Clock ---- */
.mdtp-clock-wrap { padding: 6px 24px 8px; display: flex; justify-content: center; }
.mdtp-clock {
    position: relative; width: 240px; height: 240px; border-radius: 50%;
    background: var(--mdtp-track); touch-action: none;
}
.mdtp-clock-center { position: absolute; width: 8px; height: 8px; border-radius: 50%; background: var(--mdtp-accent); left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 3; }
.mdtp-hand { position: absolute; left: 50%; top: 50%; height: 2px; background: var(--mdtp-accent); transform-origin: left center; z-index: 1; }
.mdtp-knob {
    position: absolute; width: 34px; height: 34px; border-radius: 50%; background: var(--mdtp-accent);
    transform: translate(-50%, -50%); z-index: 2; display: flex; align-items: center; justify-content: center;
    color: var(--mdtp-accent-contrast); font-size: 13px;
}
.mdtp-tick {
    position: absolute; width: 30px; height: 30px; transform: translate(-50%, -50%); z-index: 2;
    display: flex; align-items: center; justify-content: center; font-size: 14px; color: var(--mdtp-on-surface);
    border-radius: 50%;
}
.mdtp-tick.mdtp-tick-sel { color: var(--mdtp-accent-contrast); }

/* ---- Actions ---- */
.mdtp-actions { display: flex; justify-content: flex-end; gap: 8px; padding: 8px 16px 16px; }
.mdtp-btn {
    border: 0; background: transparent; color: var(--mdtp-accent); font-weight: 700; font-size: 13px;
    letter-spacing: .04em; text-transform: uppercase; padding: 9px 14px; border-radius: 8px; cursor: pointer;
}
.mdtp-btn:hover { background: color-mix(in srgb, var(--mdtp-accent) 10%, #fff); }

@media (max-width: 360px) {
    .mdtp-dialog { width: 300px; }
    .mdtp-clock { width: 210px; height: 210px; }
}