/* Shared calendar picker — one date-entry experience everywhere (admin, desktop, mobile, lists,
   guest stay pages) instead of five different native OS widgets.

   Colours come from whichever surface it's on: every board surface defines --card/--text/--muted/
   --line/--accent, and admin defines the --surface/--ink/--hairline variants. Falling back through
   both means dark mode works for free — mobile/lists redefine those same vars when dark. */
.dp-pop {
  position: fixed; z-index: 3000; width: 250px; box-sizing: border-box;
  background: var(--card, var(--surface, #fff));
  color: var(--text, var(--ink, #2c2a24));
  border: 1px solid var(--line, var(--hairline, rgba(60,50,40,.16)));
  border-radius: 12px; box-shadow: 0 14px 38px rgba(0,0,0,.22); padding: 10px;
  font-family: inherit;
}
.dp-head { display:flex; justify-content:space-between; align-items:center; margin-bottom:8px;
  font-weight:600; font-size:13px; }
.dp-nav { border:none; background:none; cursor:pointer; font-size:18px; line-height:1; padding:0 8px;
  color: var(--muted, #7d756a); border-radius:6px; }
.dp-nav:hover { color: var(--accent, #8a6f55); background: rgba(138,111,85,.10); }
.dp-grid { display:grid; grid-template-columns:repeat(7,1fr); gap:1px; }
.dp-dow { text-align:center; font-size:9px; text-transform:uppercase; letter-spacing:.06em;
  color: var(--muted, #7d756a); padding-bottom:3px; }
.dp-day { border:1px solid transparent; background:none; cursor:pointer; font:inherit; font-size:12.5px;
  padding:6px 0; border-radius:6px; color: inherit; position:relative; }
.dp-day:hover { background: rgba(138,111,85,.12); color: var(--accent, #8a6f55); }
.dp-day.oom { opacity:.35; }

/* TODAY — a red box. The whole point is that it's findable at a glance without reading numbers,
   so it's an outline (not a fill): it survives on top of any of the busy shadings below. */
/* Shorthand, not border-color: the guest sheet sets `.dp-day { border:none }`, and a lone
   border-color can't draw a box with no border-style. */
.dp-day.dp-today { border:1.5px solid #c8443a; font-weight:700; }
.dp-day.dp-today::after { content:''; position:absolute; inset:-2px; border-radius:8px;
  border:1px solid rgba(200,68,58,.30); pointer-events:none; }

/* The date currently in the field. */
.dp-day.dp-sel { background: var(--accent, #8a6f55); color:#fff; font-weight:600; }
.dp-day.dp-sel:hover { background: var(--accent, #8a6f55); color:#fff; }

/* Existing stays, shown while picking any date: confirmed = sage, requested = taupe, blocked = amber.
   A visit never blocks the house, so it reads as an underline rather than a fill — the day still
   looks open while telling you someone's coming. */
.dp-day.dp-busy-confirmed { background: rgba(95,138,107,.24); }
.dp-day.dp-busy-pending   { background: rgba(169,159,143,.26); }
.dp-day.dp-busy-blockout  { background: rgba(200,164,90,.30); }
.dp-day.dp-busy-visit     { box-shadow: inset 0 -3px 0 rgba(122,138,168,.75); }

.dp-legend { display:flex; gap:11px; justify-content:center; margin-top:9px; font-size:9.5px;
  color: var(--muted, #7d756a); flex-wrap:wrap; }
.dp-legend span::before { content:''; display:inline-block; width:9px; height:9px; border-radius:2px;
  margin-right:4px; vertical-align:-1px; }
.dp-legend .c::before { background: rgba(95,138,107,.6); }
.dp-legend .p::before { background: rgba(169,159,143,.7); }
.dp-legend .b::before { background: rgba(200,164,90,.75); }
.dp-legend .v::before { background: rgba(122,138,168,.85); }

.dp-foot { display:flex; justify-content:space-between; gap:8px; margin-top:9px; padding-top:8px;
  border-top:1px solid var(--line, var(--hairline, rgba(60,50,40,.10))); }
.dp-foot button { border:none; background:none; cursor:pointer; font:inherit; font-size:12px;
  color: var(--accent, #8a6f55); padding:3px 6px; border-radius:6px; }
.dp-foot button:hover { background: rgba(138,111,85,.12); }
.dp-foot .dp-clear { color: var(--muted, #7d756a); }

/* An enhanced date field. On a fine pointer it's still <input type="date">, so hide the UA
   calendar glyph — opening the picker is our job now. On touch the element has been swapped to
   type=text (the only way to stop iOS presenting its own picker), so it must still look like an
   editable field rather than a disabled one: no caret, no selection, but full opacity. */
input.dp-live { cursor: pointer; opacity: 1; }
input.dp-live::-webkit-calendar-picker-indicator { display: none; -webkit-appearance: none; }
input.dp-live::-webkit-inner-spin-button { display: none; }
input.dp-astext { caret-color: transparent; -webkit-user-select: none; user-select: none; }

@media (prefers-reduced-motion: no-preference) {
  .dp-pop { animation: dp-in .11s ease-out; }
  @keyframes dp-in { from { opacity:0; transform:translateY(-3px); } to { opacity:1; transform:none; } }
}

/* ── Time picker (timepicker.js) — a clean dropdown replacing the native desktop time spinner ── */
input[type="time"].tp-live { cursor: pointer; }
input[type="time"].tp-live::-webkit-calendar-picker-indicator { display: none; }
.tp-pop {
  position: fixed; z-index: 3000; width: 220px; box-sizing: border-box;
  background: var(--card, var(--surface, #fff));
  color: var(--text, var(--ink, #2c2a24));
  border: 1px solid var(--line, var(--hairline, rgba(60,50,40,.16)));
  border-radius: 12px; box-shadow: 0 14px 38px rgba(0,0,0,.22); padding: 8px;
  display: flex; flex-direction: column; gap: 6px;
}
/* display:flex above would override the UA [hidden]{display:none}, so the popup never hid on
   choose/click-out — this beats it on specificity. (The classic hidden-vs-display trap.) */
.tp-pop[hidden] { display: none; }
.tp-pop .tp-filter {
  width: 100%; box-sizing: border-box; border: 1px solid var(--line, var(--hairline, rgba(60,50,40,.20)));
  border-radius: 8px; padding: 8px 10px; font: inherit; font-size: 14px;
  background: var(--bg, #faf9f5); color: inherit;
}
.tp-pop .tp-filter:focus { outline: none; border-color: var(--accent, #8a6f55);
  box-shadow: 0 0 0 3px rgba(138,111,85,.15); }
.tp-list { max-height: 232px; overflow-y: auto; display: flex; flex-direction: column; }
.tp-opt {
  text-align: left; border: none; background: none; cursor: pointer; font: inherit; font-size: 13.5px;
  padding: 8px 10px; border-radius: 7px; color: inherit; font-variant-numeric: tabular-nums;
}
.tp-opt:hover { background: rgba(138,111,85,.12); color: var(--accent, #8a6f55); }
.tp-opt.sel { background: var(--accent, #8a6f55); color: #fff; font-weight: 600; }
.tp-opt.sel:hover { background: var(--accent, #8a6f55); color: #fff; }
.tp-empty { padding: 10px; font-size: 12.5px; color: var(--muted, #7d756a); text-align: center; }
.tp-clear { border: none; background: none; cursor: pointer; font: inherit; font-size: 12.5px;
  color: var(--muted, #7d756a); padding: 6px; border-radius: 6px; }
.tp-clear:hover { color: var(--accent, #8a6f55); background: rgba(138,111,85,.08); }