:root {
        --dtp-radius: 8px;
        --dtp-radius-lg: 10px;
        --dtp-border: 0.5px solid #e0e0e0;
        --dtp-shadow: 0 6px 20px -4px rgba(0, 0, 0, .13), 0 2px 8px -2px rgba(0, 0, 0, .07);
        --dtp-bg: #ffffff;
        --dtp-bg2: #f9fafb;
        --dtp-bg3: #f3f4f6;
        --dtp-text: #111827;
        --dtp-text2: #6b7280;
        --dtp-accent: #111827;
        --dtp-accent-fg: #ffffff;
        --dtp-today-bdr: #9ca3af;
        --dtp-slot-bg: #f9fafb;
        --dtp-slot-sel: #e5e7eb;
    }

    /* ── Wrapper ──────────────────────────────────────────────────────── */
    .dtp-wrap {
        position: relative;
        width: 100%;
        box-sizing: border-box;
    }

    /* ── Trigger ──────────────────────────────────────────────────────── */
    .dtp-trig {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 6px;
        padding: 7px 10px;
        border: var(--dtp-border);
        border-radius: var(--dtp-radius);
        background: var(--dtp-bg);
        font-size: 13px;
        cursor: pointer;
        text-align: left;
        color: var(--dtp-text);
        box-sizing: border-box;
    }

    .dtp-trig:hover {
        background: var(--dtp-bg2);
    }

    .dtp-trig-text {
        flex: 1;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        color: var(--dtp-text2);
        font-size: 13px;
    }

    .dtp-trig-text.has-val {
        color: var(--dtp-text);
    }

    .dtp-trig svg {
        flex-shrink: 0;
        opacity: .45;
        color: var(--dtp-text);
    }

    .dtp-trig.is-editing {
        padding: 4px 8px;
    }

    .dtp-edit-label {
        font-size: 11px;
        font-weight: 500;
        color: #7c3aed;
    }

    .dtp-edit-icon {
        color: #7c3aed;
        opacity: 1;
    }

    /* ── Popover ──────────────────────────────────────────────────────── */
    .dtp-pop {
        display: none;
        position: fixed;
        z-index: 9999;
        background: var(--dtp-bg);
        border: var(--dtp-border);
        border-radius: var(--dtp-radius-lg);
        box-shadow: var(--dtp-shadow);
        /* FIX: constrain max-width on desktop so it doesn't feel too wide */
        max-width: calc(100vw - 16px);
        box-sizing: border-box;
    }

    .dtp-pop.dtp-open {
        display: block;
    }

    @media (max-width: 480px) {
        .dtp-pop {
            left: 50% !important;
            transform: translateX(-50%);
        }
    }

    /* ── Inner layout ─────────────────────────────────────────────────── */
    .dtp-inner {
        display: flex;
        flex-direction: column;
    }

    /* FIX: on desktop (≥480px) switch to row layout */
    @media (min-width: 480px) {
        .dtp-inner {
            flex-direction: row;
            align-items: stretch;
        }
    }

    /* ── Calendar section ─────────────────────────────────────────────── */
    /*
 * FIX desktop width: calendar grid is exactly 7×26px cols + 6×2px gaps = 194px.
 * Add padding 10px each side → cal section = 214px.
 * FIX mobile: on small screens the grid fills naturally; no fixed width set.
 */
    .dtp-cal {
        padding: .6rem .65rem .65rem;
        flex-shrink: 0;
    }

    @media (min-width: 480px) {

        /* Lock calendar column width on desktop so the popover isn't oversized */
        .dtp-cal {
            width: 214px;
        }
    }

    /* ── Calendar header (month + year dropdowns) ─────────────────────── */
    .dtp-cal-header {
        display: grid;
        grid-template-columns: 1fr 62px;
        /* FIX: tighter year column */
        gap: .3rem;
        margin-bottom: .5rem;
    }

    .dtp-csel {
        position: relative;
        min-width: 0;
    }

    .dtp-csel-btn {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 3px;
        padding: 4px 6px;
        border: var(--dtp-border);
        border-radius: 6px;
        background: var(--dtp-bg);
        font-size: 12px;
        cursor: pointer;
        color: var(--dtp-text);
        box-sizing: border-box;
    }

    .dtp-csel-btn:hover {
        background: var(--dtp-bg3);
    }

    .dtp-csel-btn span {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        flex: 1;
        min-width: 0;
    }

    .dtp-csel-icon {
        flex-shrink: 0;
    }

    .dtp-cdrop {
        display: none;
        position: absolute;
        left: 0;
        top: calc(100% + 3px);
        z-index: 10000;
        width: max-content;
        min-width: 100%;
        max-height: 11rem;
        overflow-y: auto;
        border: var(--dtp-border);
        border-radius: 6px;
        background: var(--dtp-bg);
        box-shadow: var(--dtp-shadow);
        scrollbar-width: thin;
        scrollbar-color: #d1d5db transparent;
    }

    .dtp-cdrop.open {
        display: block;
    }

    .dtp-copt {
        padding: 5px 12px 5px 22px;
        font-size: 12px;
        cursor: pointer;
        position: relative;
        color: var(--dtp-text);
        white-space: nowrap;
    }

    .dtp-copt:hover {
        background: var(--dtp-bg3);
    }

    .dtp-copt.sel {
        font-weight: 500;
    }

    .dtp-copt.sel::before {
        content: "✓";
        position: absolute;
        left: 6px;
        font-size: 11px;
    }

    /* ── Calendar grid ────────────────────────────────────────────────── */
    /*
 * FIX: 7 columns × 26px each = 182px total grid width.
 * Smaller cells than before (was 30px) → more compact on desktop.
 * On mobile the 26px cells still render comfortably.
 */
    .dtp-grid {
        display: grid;
        grid-template-columns: repeat(7, 26px);
        gap: 2px;
        margin-top: 2px;
    }

    .dtp-wday {
        height: 26px;
        width: 26px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 10px;
        font-weight: 500;
        color: var(--dtp-text2);
    }

    .dtp-day {
        height: 26px;
        width: 26px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 5px;
        font-size: 11px;
        cursor: pointer;
        border: none;
        background: none;
        padding: 0;
        color: var(--dtp-text);
    }

    .dtp-day:hover:not(.dis):not(.out):not(.sel) {
        background: var(--dtp-bg3);
    }

    .dtp-day.sel {
        background: var(--dtp-accent);
        color: var(--dtp-accent-fg);
    }

    .dtp-day.today {
        border: 1.5px dotted var(--dtp-today-bdr);
    }

    .dtp-day.today.sel {
        background: #374151;
        border-color: #4b5563;
        color: #fff;
    }

    .dtp-day.dis {
        opacity: .3;
        cursor: not-allowed;
    }

    .dtp-day.out {
        opacity: .38;
        color: var(--dtp-text2);
    }

    .dtp-day.out.dis {
        opacity: .2;
        cursor: not-allowed;
    }

    /* ── Time panel ───────────────────────────────────────────────────── */
    .dtp-time {
        display: flex;
        flex-direction: column;
        flex-shrink: 0;
        border-top: var(--dtp-border);
    }

    @media (min-width: 480px) {

        /* FIX: tighter time panel — 100px instead of 110px */
        .dtp-time {
            width: 100px;
            border-top: none;
            border-left: var(--dtp-border);
        }
    }

    .dtp-thdr-wrap {
        padding: .45rem .4rem .35rem;
    }

    .dtp-thdr {
        display: block;
        width: 100%;
        text-align: center;
        padding: .3rem .35rem;
        border-radius: 6px;
        border: none;
        background: var(--dtp-accent);
        color: var(--dtp-accent-fg);
        font-size: 12px;
        font-weight: 600;
    }

    .dtp-tscroll {
        overflow-y: auto;
        padding: 0 .4rem .4rem;
        scrollbar-width: thin;
        scrollbar-color: #d1d5db transparent;
        max-height: 9rem;
    }

    @media (min-width: 480px) {

        /*
     * FIX: match time panel height to the calendar.
     * Calendar: header ~26px + grid 6rows×28px + paddings ≈ 220px.
     * Keep time scroll at 188px to align nicely.
     */
        .dtp-tscroll {
            height: 188px;
            max-height: none;
        }
    }

    .dtp-tlist {
        display: flex;
        flex-direction: column;
        gap: .2rem;
    }

    .dtp-slot {
        display: block;
        width: 100%;
        text-align: left;
        padding: .25rem .35rem;
        font-size: 11px;
        border-radius: 4px;
        border: var(--dtp-border);
        background: var(--dtp-slot-bg);
        cursor: pointer;
        color: var(--dtp-text);
        white-space: nowrap;
    }

    .dtp-slot:hover:not(:disabled):not(.dis) {
        background: var(--dtp-bg3);
    }

    .dtp-slot.sel {
        background: var(--dtp-slot-sel);
        font-weight: 600;
    }

    .dtp-slot:disabled,
    .dtp-slot.dis {
        opacity: .3;
        cursor: not-allowed;
    }

    /* ── Time-only popover ────────────────────────────────────────────── */
    .dtp-pop.time-only {
        min-width: 120px;
    }

    .dtp-pop.time-only .dtp-inner {
        flex-direction: column;
    }

    .dtp-pop.time-only .dtp-time {
        width: 100%;
        border-left: none;
        border-top: none;
    }

    .dtp-pop.time-only .dtp-tscroll {
        height: 200px;
        max-height: none;
    }

    /* ── Date-only popover ────────────────────────────────────────────── */
    .dtp-pop.date-only .dtp-cal {
        width: auto;
    }

    /* ── Error ────────────────────────────────────────────────────────── */
    .dtp-err {
        font-size: 12px;
        color: #ef4444;
        margin-top: 3px;
    }