/* MwDateTimePickerPopover (mw-dtp-*) — standalone, no scoped CSS.
   A wall-clock date+time picker popover in the mitware-theme surface language
   (docs/plans/mitware-theme/edge-glow-and-tail-corner.md): tail corner top-left pointing at the
   trigger, violet edge glow anchored bottom-left, hairline borders, Geist body + JetBrains Mono
   numerics. The Std/Min columns are MwWheel instances (mw-wheel-*); only their sizing and the
   highlight/mask recolor live here.
   NOTE: MudPopover portals the markup to the app-level provider, so the design tokens are
   declared on .mw-dtp-pop itself — nothing here relies on an ancestor scope. */

.mw-dtp-pop {
    /* surfaces */
    --mw-dtp-surface: hsl(240 12% 9%);
    --mw-dtp-surface-elev: hsl(240 11% 11.5%);
    --mw-dtp-surface-hover: hsla(0 0% 100% / 0.05);

    /* borders */
    --mw-dtp-border: hsla(0 0% 100% / 0.06);
    --mw-dtp-border-light: hsla(0 0% 100% / 0.10);

    /* text */
    --mw-dtp-text: hsl(0 0% 96%);
    --mw-dtp-text-dim: hsl(240 5% 60%);
    --mw-dtp-text-faint: hsl(240 5% 40%);

    /* accent — MitWare violet */
    --mw-dtp-accent: hsl(263 90% 67%);
    --mw-dtp-accent-soft: hsl(263 70% 79%);
    --mw-dtp-accent-tint: hsla(263 90% 67% / 0.10);
    --mw-dtp-accent-line: hsla(263 90% 67% / 0.30);

    --mw-dtp-red: hsl(351 75% 64%);

    --mw-dtp-font-body: 'Geist', -apple-system, BlinkMacSystemFont, sans-serif;
    --mw-dtp-font-mono: 'JetBrains Mono', ui-monospace, monospace;

    position: relative;
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 416px;
    max-height: min(80vh, 640px);
    overflow-y: auto;
    padding: 12px;
    color: var(--mw-dtp-text);
    font-family: var(--mw-dtp-font-body);
    font-size: 12.5px;
    -webkit-font-smoothing: antialiased;
    /* mitware-theme surface: tail corner points at the trigger above-left; the violet edge glow
       anchors at the diagonal (bottom-left) corner and fades before reaching the top edge. */
    border-radius: 14px;
    border-top-left-radius: 4px;
    border: 1.5px solid transparent;
    background:
        linear-gradient(var(--mw-dtp-surface-elev), var(--mw-dtp-surface-elev)) padding-box,
        radial-gradient(135% 125% at 0% 100%,
            color-mix(in srgb, var(--mw-dtp-accent) 80%, transparent) 0%,
            color-mix(in srgb, var(--mw-dtp-accent) 45%, transparent) 40%,
            transparent 72%) border-box,
        linear-gradient(var(--mw-dtp-border-light), var(--mw-dtp-border-light)) border-box;
    box-shadow:
        -3px 2px 9px -8px color-mix(in srgb, var(--mw-dtp-accent) 65%, transparent),
        0 18px 40px -24px hsla(0 0% 0% / 0.8);
}

.mw-dtp-pop *,
.mw-dtp-pop *::before,
.mw-dtp-pop *::after { box-sizing: border-box; }

.mw-dtp-mi {
    font-family: 'Material Symbols Rounded';
    font-weight: normal;
    font-style: normal;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    direction: ltr;
    -webkit-font-smoothing: antialiased;
}

.mw-dtp-scrim { position: fixed; inset: 0; z-index: 1199; background: transparent; }

.mw-dtp-main { display: grid; grid-template-columns: 1fr auto; gap: 14px; }

/* ── Calendar ── */
.mw-dtp-cal { display: flex; flex-direction: column; gap: 6px; }

.mw-dtp-cal-head { display: flex; align-items: center; gap: 2px; padding: 2px 2px 0; }

.mw-dtp-cal-month { flex: 1; font-size: 12.5px; font-weight: 600; letter-spacing: 0.01em; }

.mw-dtp-cal-month b { color: var(--mw-dtp-accent-soft); font-weight: 600; }

.mw-dtp-cal-nav {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 7px;
    border: 1px solid transparent;
    background: transparent;
    color: var(--mw-dtp-text-faint);
    cursor: pointer;
    transition: 120ms ease;
}

.mw-dtp-cal-nav:hover {
    color: var(--mw-dtp-text);
    background: var(--mw-dtp-surface-hover);
    border-color: var(--mw-dtp-border);
}

.mw-dtp-cal-nav .mw-dtp-mi { font-size: 16px; }

.mw-dtp-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 1px; }

.mw-dtp-cal-dow {
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--mw-dtp-font-mono);
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 0.08em;
    color: var(--mw-dtp-text-faint);
    text-transform: uppercase;
}

.mw-dtp-day {
    height: 28px;
    border-radius: 8px;
    border: 1px solid transparent;
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--mw-dtp-font-mono);
    font-size: 11.5px;
    font-variant-numeric: tabular-nums;
    color: var(--mw-dtp-text-dim);
    cursor: pointer;
    transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
    position: relative;
}

.mw-dtp-day:hover { background: var(--mw-dtp-surface-hover); color: var(--mw-dtp-text); }

.mw-dtp-day--out { color: var(--mw-dtp-text-faint); opacity: 0.55; }

/* today: a quiet accent tick under the number — recognisable, not loud */
.mw-dtp-day--today::after {
    content: "";
    position: absolute;
    bottom: 3px;
    width: 8px;
    height: 2px;
    border-radius: 2px;
    background: var(--mw-dtp-accent-line);
}

.mw-dtp-day--sel {
    background: color-mix(in srgb, var(--mw-dtp-accent) 16%, transparent);
    border-color: var(--mw-dtp-accent-line);
    color: var(--mw-dtp-accent-soft);
    font-weight: 600;
}

.mw-dtp-day--sel.mw-dtp-day--today::after { background: var(--mw-dtp-accent); }

/* ── Time — two MwWheel pickers ── */
.mw-dtp-time { display: grid; grid-template-columns: 52px 52px; gap: 4px; align-content: start; }

.mw-dtp-rail-cap {
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--mw-dtp-font-mono);
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 0.08em;
    color: var(--mw-dtp-text-faint);
    text-transform: uppercase;
}

.mw-dtp-wheel { width: 52px; }

.mw-dtp-wheel .mw-wheel-item {
    font-family: var(--mw-dtp-font-mono);
    font-size: 12.5px;
    font-variant-numeric: tabular-nums;
    color: var(--mw-dtp-text);
}

/* NOTE: !important — MwWheel sets the highlight border-color inline (mud palette); the picker
   pins it to the theme accent regardless of the app's Mud palette. */
.mw-dtp-wheel .mw-wheel-highlight { border-color: var(--mw-dtp-accent) !important; }

/* ── Footer — Löschen | Jetzt · Fertig ── */
.mw-dtp-foot {
    display: flex;
    align-items: center;
    gap: 8px;
    border-top: 1px solid var(--mw-dtp-border);
    padding-top: 10px;
}

.mw-dtp-foot-spacer { flex: 1; }

.mw-dtp-ghost {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 5px 11px;
    border-radius: 999px;
    border: 1px solid var(--mw-dtp-border);
    background: transparent;
    color: var(--mw-dtp-text-dim);
    font-family: var(--mw-dtp-font-body);
    font-size: 11px;
    font-weight: 500;
    cursor: pointer;
    transition: 120ms ease;
}

.mw-dtp-ghost:hover { border-color: var(--mw-dtp-border-light); color: var(--mw-dtp-text); }

.mw-dtp-ghost--danger:hover {
    color: var(--mw-dtp-red);
    border-color: color-mix(in srgb, var(--mw-dtp-red) 40%, var(--mw-dtp-border));
}

.mw-dtp-done {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--mw-dtp-accent-tint);
    border: 1px solid var(--mw-dtp-accent-line);
    border-radius: 8px;
    padding: 6px 16px;
    color: var(--mw-dtp-accent-soft);
    font-family: var(--mw-dtp-font-body);
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: 150ms ease;
}

.mw-dtp-done:hover {
    background: hsla(263 90% 67% / 0.18);
    border-color: var(--mw-dtp-accent);
}