/* Shared date and time surfaces, matching the overview calendar and time grid. */
.date-control { position:relative;display:grid;width:100%;min-width:0;gap:5px; }
.date-native,.tp-native {
  display:block !important;position:absolute !important;width:1px !important;height:1px !important;
  min-width:0 !important;min-height:0 !important;margin:0 !important;padding:0 !important;
  border:0 !important;clip-path:inset(50%) !important;opacity:0 !important;pointer-events:none !important;overflow:hidden !important;
}
.date-trigger,.tp-trigger {
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  width:100%;min-width:0;min-height:40px;padding:10px 12px;
  border:1px solid #e0e2ec;border-radius:10px;background:white;color:var(--ink);
  font:inherit;font-size:13px;font-weight:500;line-height:1.5;text-align:left;cursor:pointer;
  box-shadow:0 2px 5px #24233b03;
}
.date-trigger > span:first-child,.tp-trigger b { min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:500; }
.date-trigger svg,.tp-trigger svg { flex:0 0 18px;width:18px;height:18px;fill:none;stroke:var(--muted);stroke-width:1.7; }
.date-trigger:hover:not(:disabled),.tp-trigger:hover:not(:disabled) { border-color:var(--brand-border);background:#fdfcfe; }
.date-trigger:focus-visible,.tp-trigger:focus-visible,.date-trigger[aria-expanded=true],.tp-trigger[aria-expanded=true] { outline:none;border-color:var(--brand-text);box-shadow:0 0 0 3px var(--brand-soft); }
.date-trigger:disabled,.tp-trigger:disabled { background:#f3f4f7;color:#8b8f9c;border-color:#e4e6ec;cursor:not-allowed;box-shadow:none; }
.date-trigger[aria-invalid=true],.tp-trigger[aria-invalid=true] { border-color:#bf5862; }
.date-error,.time-error { display:block;color:#a53442;font-size:11px;line-height:1.6;font-weight:400; }.date-error:empty,.time-error:empty { display:none !important; }
.dt-pop { position:fixed;z-index:2000;box-sizing:border-box;overflow:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:var(--brand-border) transparent; }
.dt-pop .dt-heading { gap:3px; }.dt-pop .dt-heading strong { flex:1;text-align:center;white-space:nowrap; }
.dt-pop .dt-heading button { width:27px;flex:0 0 27px; }
.dt-pop .od-footnote { flex-wrap:wrap;gap:8px; }.dt-clear { margin-left:auto;padding:5px 8px;border:1px solid var(--line);border-radius:7px;background:#f4f5f8;color:#62677b;font-size:10px;cursor:pointer; }
.dt-clear:hover { background:#e9ecf2; }
.dt-pop .od-calendar button.od-adjacent:not(:disabled) { color:var(--ink); }
.tp-pop.tp-portal { position:fixed;z-index:2000;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:var(--brand-border) transparent; }
.tp-grid small { display:block;font-size:9px;line-height:1.5;margin-top:3px;font-weight:400; }
.tp-empty { margin:6px 0;padding:12px;color:var(--muted);font-size:12px;line-height:1.7; }
.ui-datetime { position:relative;display:grid;grid-template-columns:minmax(0,1.5fr) minmax(90px,1fr);gap:10px; }
.datetime-date,.datetime-time { min-width:0; }.ui-datetime > .date-error { grid-column:1/-1; }
.admin-filterbar > .date-control { flex:0 1 210px;width:210px; }
.recur-option > .date-control { width:100%; }
@media(max-width:760px) { .recur-option > .date-control { grid-column:2; } }
@media(max-width:700px) {
 .date-trigger,.tp-trigger { min-height:44px; }
 .dt-pop .od-calendar button { height:38px; }
 .admin-filterbar > .date-control { flex:1 1 180px;width:auto; }
 .ui-datetime { grid-template-columns:minmax(0,1fr); }
}