/* Material-style date and time pickers — the same calendar dialog and clock dial the Android
   calendar app shows, in its colours, for every date and time field on the web pages
   (owner request 2026-09-08). See mpick.js. */
:root {
    --mp-bg: #071221;
    --mp-surface: #0d1b2e;
    --mp-raised: #13253c;
    --mp-primary: #F841A4;
    --mp-on-primary: #ffffff;
    --mp-on: #ffffff;
    --mp-muted: #8aa0b8;
    --mp-border: #16324B;
    --mp-scrim: rgba(1, 10, 24, 0.7);
    --mp-font: 'Montserrat', 'Poppins', system-ui, sans-serif;
}

/* ── the field that stands in for a native input ─────────────────────────────────────────── */
.mp-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    opacity: 0 !important;
    pointer-events: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
}

.mp-field {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
    min-height: 44px;
    padding: 10px 14px;
    background: var(--mp-bg);
    color: var(--mp-on);
    border: 1px solid var(--mp-border);
    border-radius: 12px;
    font: 500 15px/1.3 var(--mp-font);
    text-align: left;
    cursor: pointer;
    box-sizing: border-box;
}

.mp-field:hover, .mp-field:focus { border-color: var(--mp-primary); outline: none; }
.mp-field.mp-empty { color: var(--mp-muted); font-weight: 400; }
.mp-field .mp-ic { color: #FFE24D; flex: 0 0 auto; }

/* ── the dialog ──────────────────────────────────────────────────────────────────────────── */
.mp-scrim {
    position: fixed;
    inset: 0;
    background: var(--mp-scrim);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 200000;
    padding: 16px;
    font-family: var(--mp-font);
    color: var(--mp-on);
}

.mp-dialog {
    width: 328px;
    max-width: 100%;
    max-height: calc(100vh - 32px);
    overflow: auto;
    background: var(--mp-surface);
    border: 1px solid var(--mp-border);
    border-radius: 28px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55);
    animation: mp-in 0.16s ease-out;
}

@keyframes mp-in { from { opacity: 0; transform: translateY(8px) scale(0.98); } to { opacity: 1; transform: none; } }

.mp-head { padding: 20px 24px 12px; border-bottom: 1px solid var(--mp-border); }
.mp-over { font: 500 11px/1 var(--mp-font); letter-spacing: 1.2px; text-transform: uppercase; color: var(--mp-muted); }
.mp-title { margin-top: 14px; font: 500 30px/1.15 var(--mp-font); }

.mp-foot { display: flex; justify-content: flex-end; gap: 8px; padding: 8px 12px 12px; }
.mp-btn {
    background: none;
    border: 0;
    color: var(--mp-primary);
    font: 600 14px/1 var(--mp-font);
    letter-spacing: 0.5px;
    padding: 10px 14px;
    border-radius: 20px;
    cursor: pointer;
}
.mp-btn:hover { background: rgba(248, 65, 164, 0.12); }

/* ── calendar ────────────────────────────────────────────────────────────────────────────── */
.mp-cal { padding: 8px 12px 0; }
.mp-nav { display: flex; align-items: center; justify-content: space-between; padding: 4px 4px 8px; }
.mp-nav-label { font: 600 14px/1 var(--mp-font); }
.mp-nav button {
    background: none;
    border: 0;
    color: var(--mp-on);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 20px;
    line-height: 1;
}
.mp-nav button:hover { background: var(--mp-raised); }
.mp-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px 0; }
.mp-dow { text-align: center; font: 500 12px/36px var(--mp-font); color: var(--mp-muted); }
.mp-day {
    width: 40px;
    height: 40px;
    margin: 0 auto;
    border: 0;
    border-radius: 50%;
    background: none;
    color: var(--mp-on);
    font: 500 14px/1 var(--mp-font);
    cursor: pointer;
}
.mp-day:hover { background: var(--mp-raised); }
.mp-day.mp-today { box-shadow: inset 0 0 0 1px var(--mp-primary); }
.mp-day.mp-sel { background: var(--mp-primary); color: var(--mp-on-primary); }
.mp-day.mp-off { visibility: hidden; }
.mp-day:disabled { color: rgba(138, 160, 184, 0.45); cursor: default; }
.mp-day:disabled:hover { background: none; }

/* ── clock ───────────────────────────────────────────────────────────────────────────────── */
.mp-time { padding: 20px 24px 8px; display: flex; flex-direction: column; align-items: center; gap: 22px; }
.mp-time-row { display: flex; align-items: center; gap: 10px; }
.mp-seg {
    width: 88px;
    height: 72px;
    border: 0;
    border-radius: 12px;
    background: var(--mp-raised);
    color: var(--mp-on);
    font: 500 44px/72px var(--mp-font);
    text-align: center;
    cursor: pointer;
}
.mp-seg.mp-on { background: rgba(248, 65, 164, 0.22); color: var(--mp-primary); box-shadow: inset 0 0 0 2px var(--mp-primary); }
.mp-colon { font: 500 44px/1 var(--mp-font); }
.mp-ampm { display: flex; flex-direction: column; border: 1px solid var(--mp-border); border-radius: 12px; overflow: hidden; margin-left: 6px; }
.mp-ampm button {
    width: 52px;
    height: 36px;
    border: 0;
    background: none;
    color: var(--mp-muted);
    font: 600 13px/1 var(--mp-font);
    cursor: pointer;
}
.mp-ampm button.mp-on { background: rgba(248, 65, 164, 0.22); color: var(--mp-primary); }
.mp-dial {
    position: relative;
    width: 256px;
    height: 256px;
    border-radius: 50%;
    background: var(--mp-raised);
    touch-action: none;
    user-select: none;
}
.mp-dial .mp-hand {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 2px;
    height: 100px;
    margin-left: -1px;
    background: var(--mp-primary);
    transform-origin: 50% 0;
}
.mp-dial .mp-pin { position: absolute; left: 50%; top: 50%; width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 50%; background: var(--mp-primary); }
.mp-dial .mp-num {
    position: absolute;
    width: 40px;
    height: 40px;
    margin: -20px 0 0 -20px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font: 500 15px/1 var(--mp-font);
    color: var(--mp-on);
    cursor: pointer;
}
.mp-dial .mp-num.mp-sel { background: var(--mp-primary); color: var(--mp-on-primary); }
.mp-dial .mp-num.mp-sel::before { content: ''; }

@media (max-width: 380px) {
    .mp-dialog { border-radius: 20px; }
    .mp-seg { width: 74px; height: 64px; font-size: 38px; line-height: 64px; }
    .mp-dial { width: 232px; height: 232px; }
    .mp-dial .mp-hand { height: 88px; }
}