/* Minimal custom calendar + time picker replacing the native browser popup for
   every <input type="date"> / <input type="time"> in the app — that native
   popup is a separate OS-level surface with zero CSS access, so it can only
   be replaced, not restyled. See shared/ui/datetime-enhancer.js. Visual
   language matches ui-select.css (same trigger box, panel, animation). */
.ui-dt-wrap{position:relative;width:100%}
.ui-dt-native{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;pointer-events:none;z-index:-1}
.ui-dt-trigger{
  width:100%;min-height:44px;border:1px solid #ccc;border-radius:12px;background:#fff;
  padding:11px 12px;display:flex;align-items:center;justify-content:space-between;gap:10px;
  text-align:left;font:inherit;color:inherit;cursor:pointer;
  transition:border-color var(--motion-fast) var(--ease-standard),box-shadow var(--motion-fast) var(--ease-standard);
}
.ui-dt-trigger:hover{border-color:#999}
.ui-dt-trigger[aria-expanded="true"]{border-color:#000;box-shadow:0 0 0 3px rgba(0,0,0,.06)}
.ui-dt-trigger:focus-visible{outline:2px solid #000;outline-offset:2px}
.ui-dt-trigger:disabled{cursor:not-allowed;opacity:.45}
.ui-dt-value{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ui-dt-value.is-placeholder{color:#8a8a8a}
.ui-dt-icon{flex:none;display:flex;color:#666}
.ui-dt-icon svg{width:17px;height:17px}

.ui-dt-panel{
  position:absolute;left:0;top:calc(100% + 4px);z-index:30;
  background:#fff;color:#111;border:1px solid #e4e4e4;border-radius:16px;box-shadow:0 12px 30px rgba(0,0,0,.12);
  animation:ui-dt-panel-in .14s cubic-bezier(.16,1,.3,1) both;
}
.ui-dt-panel.is-flipped{top:auto;bottom:calc(100% + 4px)}
.ui-dt-panel[hidden]{display:none}
/* Top-layer popover: drop the UA popover box (inset:0 + margin:auto centering).
   Padding stays with .ui-date-panel / .ui-time-panel. */
.ui-dt-panel[popover]{inset:auto;margin:0}
@keyframes ui-dt-panel-in{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}
@media(prefers-reduced-motion:reduce){.ui-dt-panel{animation:none}}

/* Calendar */
.ui-date-panel{width:280px;padding:14px}
.ui-date-nav{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.ui-date-nav-label{font-weight:var(--fw-black);font-size:var(--fs-base)}
.ui-date-nav-btn{width:30px;height:30px;border:1px solid #e4e4e4;border-radius:9px;background:#fff;display:grid;place-items:center;cursor:pointer;color:#333}
.ui-date-nav-btn:hover{background:#f2f2f2}
.ui-date-nav-btn:disabled{opacity:.35;cursor:not-allowed}
.ui-date-nav-btn svg{width:14px;height:14px}
.ui-date-weekdays{display:grid;grid-template-columns:repeat(7,1fr);text-align:center;margin-bottom:2px}
.ui-date-weekdays span{font-size:var(--fs-sm);font-weight:var(--fw-bold);color:#999;padding:4px 0}
.ui-date-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}
.ui-date-day{
  height:32px;border:0;border-radius:9px;background:transparent;color:#111;font-size:var(--fs-base);
  display:grid;place-items:center;cursor:pointer;transition:background-color .12s ease;
}
.ui-date-day:hover:not(:disabled){background:#f2f2f2}
.ui-date-day.is-outside{color:#c4c4c4}
.ui-date-day.is-today{box-shadow:inset 0 0 0 1px #000}
.ui-date-day.is-active{box-shadow:inset 0 0 0 2px #000}
.ui-date-day[aria-selected="true"]{background:#000;color:#fff}
.ui-date-day:disabled{color:#ddd;cursor:not-allowed}
/* Month picker (type="month"): same cells as the day grid, 3 x 4 */
.ui-month-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-top:4px}
.ui-month-grid .ui-date-day{height:40px}
/* Date + time picker, time step: keeps the date label centred like the calendar */
.ui-date-nav-spacer{width:30px;height:30px}
.ui-date-panel .ui-time-columns{margin-top:4px}
.ui-date-link:disabled{color:#bbb;cursor:not-allowed;background:transparent}
.ui-date-footer{display:flex;justify-content:space-between;margin-top:8px;padding-top:8px;border-top:1px solid #eee}
.ui-date-link{border:0;border-radius:9px;background:transparent;color:#000;font-weight:var(--fw-bold);font-size:var(--fs-base);cursor:pointer;padding:6px 10px}
.ui-date-link:hover{background:#f2f2f2}

/* Time */
.ui-time-panel{width:184px;padding:10px}
.ui-time-columns{display:grid;grid-template-columns:1fr 1fr;gap:8px;max-height:216px}
.ui-time-col{overflow:auto;max-height:216px;display:grid;gap:2px;align-content:start;scrollbar-width:none}
.ui-time-col::-webkit-scrollbar{display:none}
.ui-time-cell{
  height:32px;border:0;border-radius:9px;background:transparent;color:#111;font-size:var(--fs-base);
  display:grid;place-items:center;cursor:pointer;font-variant-numeric:tabular-nums;transition:background-color .12s ease;
}
.ui-time-cell:hover{background:#f2f2f2}
.ui-time-cell[aria-selected="true"]{background:#000;color:#fff}
.ui-time-footer{margin-top:6px;padding-top:6px;border-top:1px solid #eee;display:flex;justify-content:flex-end}
.ui-time-footer .btn{min-height:32px;padding:0 14px;font-size:var(--fs-sm)}