/* ==========================================================================
   Berkenye 2621 — shared UI kit (ui.mjs)
   Loaded by both the guest page (assets/css/styles.css) and the admin panel
   (admin/admin.css). Those two files define overlapping but not identical
   token sets — see the plan's Global Constraints — so every color here reads
   through a shared token name with a literal fallback, never a bare var()
   and never a token that exists in only one of the two files.
   ========================================================================== */

/* ---------- instant tooltip (Task 2) -------------------------------------
   Replaces the native `title` attribute: title waits ~1s, cannot be styled,
   and never appears on keyboard focus. ui.mjs shows/hides this ONE shared
   element instantly; the CSS below only ever has to look right, never decide
   when to appear.

   position:fixed is deliberate, not just convenient: ui.mjs hides the tip on
   scroll rather than re-positioning it, so the element never needs to track
   an ancestor's scroll offset — viewport coordinates from
   getBoundingClientRect() can be used as-is, with no scrollX/scrollY math.
   -------------------------------------------------------------------------- */
.ui-tip {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
  box-sizing: border-box;
  max-width: min(280px, 90vw);
  padding: 6px 10px;
  border-radius: 6px;
  background: var(--forest, #2C3327);
  color: var(--cream, #F7F2E8);
  font-family: "Mulish", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 12.5px;
  font-weight: 500;
  line-height: 1.4;
  text-align: center;
  box-shadow: 0 6px 20px rgba(44, 51, 39, .28);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .12s ease;
}

.ui-tip--visible {
  opacity: 1;
  visibility: visible;
}

/* Pointer triangle: a same-color square, rotated 45deg and straddling the
   tooltip's own edge so half of it hides seamlessly under the box and half
   shows outside it — no border, no clip-path, no separate image. Points down
   by default (tip sits above the target); --below flips it to the top edge
   for the case where the tip had to render underneath instead. */
.ui-tip::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -4px;
  width: 8px;
  height: 8px;
  margin-left: -4px;
  background: var(--forest, #2C3327);
  transform: rotate(45deg);
}

.ui-tip--below::after {
  bottom: auto;
  top: -4px;
}

@media (prefers-reduced-motion: reduce) {
  /* Both host stylesheets already neutralize transitions globally, but ui.css
     does not depend on either of them to satisfy this on its own. */
  .ui-tip {
    transition: none;
  }
}

/* ---------- custom select (Task 3) ---------------------------------------
   Colors below follow the same rule the tooltip above does: only a token
   name shared by BOTH host stylesheets with the SAME value (forest, moss,
   cream — checked against admin.css and styles.css), always with a literal
   fallback, and a plain literal everywhere else. --berry (styles.css) and
   --rowan (admin.css) are the same color under two different names, which is
   exactly the trap this avoids: neither is used here. The (44,51,39) triple
   below is forest's own RGB — both stylesheets already spell translucent
   neutrals that way (--paper-line, shadows), so it is reused rather than
   invented. Sizing is deliberately px, not rem/em, so the control looks the
   same regardless of which page's base font size it inherits — the tooltip
   above makes the same choice for the same reason. Naming follows this
   file's own convention (block-element, block--modifier), not BEM's
   double-underscore, to match ui-tip/ui-tip--visible and pet-toggle-ic above
   and on the guest page.

   Deliberately NOT following either host page's `.field select` /
   `input,select` rules: this is not a <select>, so neither would ever match
   it, and copying one host's numbers verbatim would make it look "correct"
   on that page and slightly foreign on the other. Padding/radius/border
   below are a middle point between the two (guest page: 12px radius, 1.5px
   border; admin: 8px radius, 1px border); font-size is left to inherit from
   context, matching how neither host page's own form-field rules set one
   either — both rely on inheriting the page's body font, and so does this. */
.ui-select {
  position: relative;
  display: block;
  width: 100%;
}

.ui-select-button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  box-sizing: border-box;
  width: 100%;
  padding: 10px 14px;
  border: 1.5px solid rgba(44, 51, 39, .18);
  border-radius: 10px;
  background: var(--cream, #F7F2E8);
  color: var(--forest, #2C3327);
  text-align: left;
  cursor: pointer;
}

.ui-select-button:focus-visible {
  outline: none;
  border-color: var(--moss, #74835E);
  box-shadow: 0 0 0 3px rgba(116, 131, 94, .28);
}

.ui-select-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Same trick as .ui-tip::after above: a bordered square rotated 45deg, not an
   image or an SVG — one shape, reused, pointing a different way each time. */
.ui-select-chevron {
  flex-shrink: 0;
  width: 7px;
  height: 7px;
  margin-top: -4px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
  transition: transform .15s ease;
}

.ui-select--open .ui-select-chevron {
  margin-top: 2px;
  transform: rotate(-135deg);
}

.ui-select-listbox {
  display: none;
  position: absolute;
  z-index: 20;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  margin: 0;
  padding: 6px;
  max-height: 260px;
  overflow-y: auto;
  list-style: none;
  background: var(--cream, #F7F2E8);
  border: 1.5px solid rgba(44, 51, 39, .18);
  border-radius: 10px;
  box-shadow: 0 14px 34px rgba(44, 51, 39, .22);
}

.ui-select--open .ui-select-listbox {
  display: block;
}

.ui-select-option {
  padding: 8px 10px;
  border-radius: 7px;
  color: var(--forest, #2C3327);
  cursor: pointer;
}

.ui-select-option--active {
  background: rgba(116, 131, 94, .16);
}

.ui-select-option[aria-selected="true"] {
  font-weight: 700;
}

@media (prefers-reduced-motion: reduce) {
  .ui-select-chevron {
    transition: none;
  }
}

/* ---------- date field (Task 4) -------------------------------------------
   Same discipline as the tooltip and the select above: only tokens shared by
   BOTH host stylesheets with the same value (forest, moss, cream), always
   with a literal fallback, px sizing throughout. Deliberately NOT --berry —
   see ui.mjs's own note above select() on --berry/--rowan being the same
   color under two different host-only names; the "selected day" fill below
   reuses forest+cream instead, the same pairing admin.css's own
   `.navitem.is-active` already uses for "this is the current one".

   The popup is position:fixed (see the long comment above dateField() in
   ui.mjs for why — the short version: two of its eight call sites live
   inside a horizontally-scrolling table, whose overflow-x:auto would clip an
   absolutely-positioned popup), so top/left are set from script, not here;
   this file only supplies width/appearance. No SVG or image anywhere below,
   same as the tooltip's triangle and the select's chevron: the calendar
   glyph and the prev/next arrows are the same rotated-shape trick, reused. */
.ui-date {
  position: relative;
  display: block;
  width: 100%;
}

.ui-date-control {
  display: flex;
  align-items: stretch;
  box-sizing: border-box;
  width: 100%;
  border: 1.5px solid rgba(44, 51, 39, .18);
  border-radius: 10px;
  background: var(--cream, #F7F2E8);
  overflow: hidden;
}

.ui-date--open .ui-date-control,
.ui-date-control:focus-within {
  border-color: var(--moss, #74835E);
}

.ui-date-control:focus-within {
  box-shadow: 0 0 0 3px rgba(116, 131, 94, .28);
}

.ui-date-input {
  flex: 1;
  min-width: 0;
  border: none;
  background: transparent;
  color: var(--forest, #2C3327);
  padding: 10px 8px 10px 14px;
  cursor: pointer;
}

.ui-date-toggle,
.ui-date-clear {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  border: none;
  background: transparent;
  color: var(--forest, #2C3327);
  padding: 0 12px;
  cursor: pointer;
}

.ui-date-clear {
  font-size: 12px;
  font-weight: 700;
  color: var(--moss, #74835E);
  border-left: 1.5px solid rgba(44, 51, 39, .12);
}

.ui-date-input:focus-visible,
.ui-date-toggle:focus-visible,
.ui-date-clear:focus-visible {
  outline: none;
}

/* A small rounded box with a filled header band — the same "one geometric
   shape, no SVG" approach as the tooltip's pointer triangle and the select's
   chevron, just built from two flat pieces instead of one rotated square. */
.ui-date-toggle-icon {
  position: relative;
  width: 14px;
  height: 13px;
  margin-top: 2px;
  border: 1.5px solid currentColor;
  border-radius: 3px;
}

.ui-date-toggle-icon::before {
  content: "";
  position: absolute;
  left: -1.5px;
  right: -1.5px;
  top: -1.5px;
  height: 4px;
  background: currentColor;
  border-radius: 2px 2px 0 0;
}

.ui-date-popup {
  position: fixed;
  z-index: 30;
  box-sizing: border-box;
  padding: 12px;
  background: var(--cream, #F7F2E8);
  border: 1.5px solid rgba(44, 51, 39, .18);
  border-radius: 12px;
  box-shadow: 0 14px 34px rgba(44, 51, 39, .22);
}

.ui-date-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  margin-bottom: 8px;
}

/* "« ‹ month year › »": the conventional pattern, month on the single
   chevrons, year on the double ones either side — not a year-stepping label,
   which only ever advanced and left an owner correcting a rule from last
   winter clicking back month by month. Each group keeps its own pair snug;
   .ui-date-monthlabel's flex:1 pushes the two groups to the outer edges. */
.ui-date-nav-group {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 4px;
}

.ui-date-nav {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border: 1.5px solid rgba(44, 51, 39, .18);
  border-radius: 8px;
  background: var(--cream, #F7F2E8);
  color: var(--forest, #2C3327);
  cursor: pointer;
}

.ui-date-nav:hover {
  border-color: var(--moss, #74835E);
  color: var(--moss, #74835E);
}

.ui-date-nav-icons {
  display: flex;
  align-items: center;
}

/* Same corner-arrow trick as .ui-select-chevron above (a rotated square,
   only two of its borders drawn), just rotated to point sideways instead of
   up/down: -45deg draws a ›, +135deg (the same angle, 180deg around) a ‹.
   The year buttons render two of these, overlapped slightly by the negative
   margin below, for a "»"/"«" out of the same one shape — still no SVG. */
.ui-date-nav-icon {
  width: 7px;
  height: 7px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
}

.ui-date-nav-icons .ui-date-nav-icon + .ui-date-nav-icon {
  margin-left: -3px;
}

.ui-date-nav[data-nav="prev-year"] .ui-date-nav-icon,
.ui-date-nav[data-nav="prev-month"] .ui-date-nav-icon {
  transform: rotate(135deg);
}

.ui-date-nav[data-nav="next-year"] .ui-date-nav-icon,
.ui-date-nav[data-nav="next-month"] .ui-date-nav-icon {
  transform: rotate(-45deg);
}

/* Plain text, not a button — every navigation here happens on the four
   chevrons now, so the label is purely informational, exactly like
   calendar.js's own .cal-month-title. */
.ui-date-monthlabel {
  flex: 1;
  min-width: 0;
  text-align: center;
  text-transform: capitalize;
  color: var(--forest, #2C3327);
  font-weight: 700;
  font-size: 13px;
  padding: 6px 4px;
}

.ui-date-grid {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.ui-date-weekday-row,
.ui-date-week {
  display: grid;
  grid-template-columns: repeat(7, 34px);
  gap: 2px;
}

.ui-date-weekday {
  text-align: center;
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .03em;
  color: var(--moss, #74835E);
  padding: 4px 0;
}

.ui-date-cell {
  position: relative;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  font-size: 13px;
  font-weight: 600;
  color: var(--forest, #2C3327);
  background: transparent;
  border: none;
  border-radius: 8px;
  cursor: pointer;
}

.ui-date-cell--empty {
  visibility: hidden;
}

.ui-date-cell:not(.ui-date-cell--selected):hover {
  background: rgba(116, 131, 94, .12);
}

/* Today: outlined. Selected: filled. Both at once: the fill wins outright
   (no ring on top of it) — matching how calendar.js's own .is-checkin/
   .is-checkout already take precedence over .is-today there. */
.ui-date-cell--today {
  box-shadow: inset 0 0 0 1.5px var(--moss, #74835E);
}

.ui-date-cell--selected {
  background: var(--forest, #2C3327);
  color: var(--cream, #F7F2E8);
}

.ui-date-cell--today.ui-date-cell--selected {
  box-shadow: none;
}

.ui-date-cell:focus-visible {
  outline: 2px solid var(--moss, #74835E);
  outline-offset: -2px;
  z-index: 2;
}

/* No prefers-reduced-motion block here: unlike .ui-select-chevron above,
   nothing in this section (.ui-date-nav, .ui-date-nav-icon,
   .ui-date-monthlabel) declares a transition, so there is nothing to turn
   off. */