/* Card 485 (mockup v5, approved 22 Oct 2026 12:57 — .claude/mockups/485-date-time-picker.html) — the compact date / time
   panel of every staff date, time, date + time and date-range field on a mouse device (resources/js/harf-dt-panel.js).
   ≈ 410 × 280: the calendar (30 px cells) beside the time; one column when the form is narrower. Every colour is a
   --harf-* token (token guard: Card485PhoneDateTimeZoneTest). Digits stay LTR under Arabic (the time block is dir=ltr). */

.harf-dtp {
    position: fixed;
    z-index: 1000;
    display: grid;
    grid-template-columns: minmax(0, 236px) minmax(0, 1fr);
    max-width: calc(100vw - 16px);
    border: 1px solid var(--harf-border-input);
    border-radius: 12px;
    background: var(--harf-surface-2);
    color: var(--harf-text);
    box-shadow: 0 12px 30px color-mix(in srgb, var(--harf-text-strong) 28%, transparent);
    overflow: hidden;
    font-size: 13px;
}
.harf-dtp:not(.harf-dtp--both) { grid-template-columns: minmax(0, 1fr); }
.harf-dtp.is-narrow { grid-template-columns: minmax(0, 1fr); }

/* ── the calendar ── */
.harf-dtp__cal { padding: 10px 10px 8px; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.harf-dtp--both .harf-dtp__cal { border-inline-end: 1px solid var(--harf-border); }
.harf-dtp--both.is-narrow .harf-dtp__cal { border-inline-end: 0; border-bottom: 1px solid var(--harf-border); }
.harf-dtp__calh { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.harf-dtp__month { color: var(--harf-text-strong); font-size: 13px; font-weight: 700; }
.harf-dtp__nav {
    width: 26px; height: 26px; border-radius: 7px; border: 1px solid var(--harf-border-input);
    background: var(--harf-input); color: var(--harf-text); font-size: 13px; line-height: 1; cursor: pointer;
}
.harf-dtp__nav:hover { background: var(--harf-hover); }
[dir="rtl"] .harf-dtp__nav { transform: scaleX(-1); }
.harf-dtp__grid { display: grid; grid-template-columns: repeat(7, 30px); gap: 2px; justify-content: center; }
.harf-dtp__dow { font-size: 10.5px; color: var(--harf-placeholder); text-align: center; padding: 2px 0; }
.harf-dtp__d {
    height: 28px; border: 0; border-radius: 7px; background: none; color: var(--harf-text);
    font-size: 12.5px; cursor: pointer; font-variant-numeric: tabular-nums;
}
.harf-dtp__d:hover { background: var(--harf-hover); }
.harf-dtp__d.is-out { color: var(--harf-placeholder); }
.harf-dtp__d.is-past { opacity: .55; }
.harf-dtp__d.is-today { outline: 1px solid var(--harf-primary-solid); outline-offset: -1px; }
.harf-dtp__d.is-in { background: color-mix(in srgb, var(--harf-primary-solid) 18%, transparent); border-radius: 0; }
.harf-dtp__d.is-sel { background: var(--harf-primary-solid); color: var(--harf-btn-primary-ink); font-weight: 700; opacity: 1; }
.harf-dtp__d.is-off { opacity: .3; cursor: not-allowed; }
.harf-dtp__quick { display: flex; gap: 4px; flex-wrap: wrap; }
.harf-dtp__chip {
    border: 1px solid var(--harf-border-input); background: var(--harf-input); color: var(--harf-text);
    border-radius: 999px; padding: 2px 9px; font-size: 11.5px; cursor: pointer;
}
.harf-dtp__chip:hover { background: var(--harf-hover); }
.harf-dtp__rangeh { font-size: 11px; color: var(--harf-muted); text-align: center; }

/* ── the time ── */
.harf-dtp__tm { padding: 10px 12px; display: flex; flex-direction: column; gap: 8px; min-width: 0; align-items: stretch; }
.harf-dtp__lbl { font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--harf-muted); }
.harf-dtp__big { display: flex; align-items: center; justify-content: center; gap: 6px; }
.harf-dtp__col { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.harf-dtp__st {
    width: 46px; height: 24px; border: 1px solid var(--harf-border); background: var(--harf-input);
    color: var(--harf-muted); border-radius: 7px; cursor: pointer; font-size: 11px;
}
.harf-dtp__st:hover { color: var(--harf-text-strong); background: var(--harf-hover); border-color: var(--harf-border-input); }
.harf-dtp__num {
    width: 46px; height: 42px; text-align: center; font-size: 22px; font-weight: 700; color: var(--harf-text-strong);
    background: var(--harf-input); border: 1px solid var(--harf-border-input); border-radius: 9px;
    font-variant-numeric: tabular-nums; font-family: inherit; padding: 0;
}
.harf-dtp__num:focus { outline: none; border-color: var(--harf-primary-solid); box-shadow: 0 0 0 3px color-mix(in srgb, var(--harf-primary-solid) 25%, transparent); }
.harf-dtp__num.is-act { border-color: var(--harf-primary-solid); }
.harf-dtp__colon { font-size: 22px; color: var(--harf-text-strong); }
.harf-dtp__ap { align-self: center; display: inline-flex; border: 1px solid var(--harf-border-input); border-radius: 7px; overflow: hidden; }
.harf-dtp__ap button {
    border: 0; background: var(--harf-input); color: var(--harf-text); padding: 5px 16px;
    font-size: 12.5px; font-weight: 700; cursor: pointer;
}
.harf-dtp__ap button.is-on { background: var(--harf-primary-solid); color: var(--harf-btn-primary-ink); }
.harf-dtp__hint { font-size: 11px; color: var(--harf-placeholder); text-align: center; line-height: 1.5; }
.harf-dtp__hint.is-bad { color: var(--harf-danger); font-weight: 600; }
.harf-dt-field__input[aria-invalid="true"] { border-color: var(--harf-danger-border); }

/* Clear + Done UNDER the clock (owner: no footer row). */
.harf-dtp__acts { display: flex; gap: 6px; justify-content: center; }
.harf-dtp__acts--cal { justify-content: flex-end; }
.harf-dtp__btn {
    border: 1px solid var(--harf-border-input); background: var(--harf-surface); border-radius: 8px;
    min-height: 28px; padding: 3px 12px; font-size: 12.5px; font-weight: 600; color: var(--harf-text); cursor: pointer;
}
.harf-dtp__btn:hover { background: var(--harf-hover); }
.harf-dtp__btn.is-pri { background: var(--harf-primary-solid); border-color: var(--harf-primary-solid); color: var(--harf-btn-primary-ink); }

/* ── a phone / tablet (Q-485a = 1): the phone's own date / time / date-time picker ──
   Card 485 (owner 23 Oct 2026, iPhone): iOS Safari lays the text of a native date / time input out at the TOP of a tall box
   and prints "10:21AM" with no space — no CSS reaches that internal layout. So the native input is INVISIBLE (opacity 0) and
   covers the box (a tap still opens the phone's picker), and the box draws OUR text: a flex row (align-items:center) of one
   line, with the same "h:mm AM" / Arabic form as the mouse field and a placeholder when empty. The box is 2.5rem high; a compact form (the class
   calendar's search, 34px) overrides the height on its own selector. */
.harf-native-wrap {
    position: relative; display: flex; align-items: center; box-sizing: border-box; min-width: 0;
    height: 2.5rem; padding-inline: 12px;
    border: 1px solid var(--harf-border-input); border-radius: 9px; background: var(--harf-input); color: var(--harf-text-strong);
}
.harf-native-wrap__text {
    display: block; flex: 1 1 auto; min-width: 0; margin: 0; padding: 0; line-height: 1.25; text-align: start;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    font-weight: 600; font-size: 14px; font-variant-numeric: tabular-nums;
}
.harf-native-wrap__text.is-empty { color: var(--harf-placeholder); font-weight: 400; }
.harf-native-wrap .harf-native-dt {
    position: absolute !important; inset: -1px !important; width: calc(100% + 2px) !important; height: calc(100% + 2px) !important; margin: 0 !important;
    padding: 0 !important; border: 0 !important; opacity: 0 !important; background: transparent !important;
    -webkit-appearance: none; appearance: none; font-size: 16px; /* 16px: iOS never zooms the page on focus */
    min-width: 0; cursor: pointer;
}
.harf-native-wrap:focus-within { border-color: var(--harf-primary-solid); box-shadow: 0 0 0 3px color-mix(in srgb, var(--harf-primary-solid) 22%, transparent); }
.dark .harf-native-wrap .harf-native-dt { color-scheme: dark; }

/* ── the field (closed): typed text, the tip in the placeholder / title ── */
.harf-dt-field { position: relative; display: flex; align-items: center; min-width: 0; }
.harf-dt-field > .harf-native-wrap, .harf-dt-field > .harf-dt-range { flex: 1 1 auto; width: 100%; }
.harf-dt-field__icon { position: absolute; inset-inline-start: 10px; width: 16px; height: 16px; color: var(--harf-muted); pointer-events: none; }
.harf-dt-field__input { width: 100%; padding-inline-start: 2.25rem !important; font-variant-numeric: tabular-nums; }
.harf-dt-field__input[aria-expanded="true"] { box-shadow: 0 0 0 2px color-mix(in srgb, var(--harf-primary-solid) 30%, transparent); border-radius: 8px; }
/* From and To: ONE row, two equal halves (never stacked), each keeping the box height. */
.harf-dt-range { display: flex; flex-wrap: nowrap; gap: 6px; width: 100%; min-width: 0; }
.harf-dt-range .harf-native-wrap { flex: 1 1 0; width: auto; }

/* ── the month panel (card 485, Q-485e = 2): ‹ year › over a 12-month grid, one click picks and closes ── */
.harf-dtp--month { max-width: calc(100vw - 16px); }
.harf-dtp__months { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; }
.harf-dtp__mo {
    height: 34px; border: 0; border-radius: 8px; background: none; color: var(--harf-text);
    font-size: 12.5px; cursor: pointer; font-variant-numeric: tabular-nums;
}
.harf-dtp__mo:hover { background: var(--harf-hover); }
.harf-dtp__mo.is-today { outline: 1px solid var(--harf-primary-solid); outline-offset: -1px; }
.harf-dtp__mo.is-sel { background: var(--harf-primary-solid); color: var(--harf-btn-primary-ink); font-weight: 700; }
.harf-dtp__mo.is-off { opacity: .3; cursor: not-allowed; }