/* ===========================================================================
   hlc-picker.css - the date strip, month sheet and minute chips that replace
   native <input type="date"> / <input type="time">.

   Loaded by index.html and admin/index.html, which have DIFFERENT token sets:
   index.html declares --bg-3/--line/--text inline, admin/tokens.css declares
   --border/--ink/--sage. Every colour below therefore chains
   var(--own, var(--theirs, literal)) so one stylesheet works in both without a
   second copy to keep in step.

   Motion sits behind prefers-reduced-motion at the bottom of this file, matching
   assets/css/motion.css:127.
   =========================================================================== */

.hlcp {
  --hlcp-surface: var(--bg-3, #102419);
  --hlcp-deep:    var(--bg, #07110c);
  --hlcp-line:    var(--line, var(--border, #1c3526));
  --hlcp-text:    var(--text, var(--ink, #eaf3e6));
  --hlcp-muted:   var(--muted, #8ba288);
  --hlcp-accent:  var(--leaf, #6ee85b);
  --hlcp-danger:  var(--danger, #e0574f);
}

/* The native input stays in the DOM as the value holder - it is what
   dateEl.value and the existing change listeners read - so it is hidden
   accessibly rather than removed.

   EVERY box-model property here needs !important, not just position. Both host
   pages style inputs with a MORE SPECIFIC selector than this one:
     admin/index.html  .field input,.field select,.field textarea { width:100%; padding:11px 12px }
     index.html        .field input,.field select                 { width:100%; padding:12px 14px }
   `.field input` is (0,1,1) and `.hlcp-native` is (0,1,0), so the host wins and
   the "hidden" input becomes full-width with padding. Absolutely positioned, a
   width:100% box resolves against the initial containing block, so it started at
   the form's x offset and ran a whole viewport further right - which made BOTH the
   public booking form and the admin Opening & closures page scroll sideways
   (measured: 619px and 609px at 1920, 19px and 1214px at 390). Nothing looked
   wrong because the box is 1px tall and clipped; only the page's own scrollbar
   showed it. */
.hlcp-native {
  position: absolute !important;
  width: 1px !important; height: 1px !important;
  min-width: 0 !important; min-height: 0 !important;
  padding: 0 !important; margin: -1px !important; border: 0 !important;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap;
}

/* ---- date strip ---------------------------------------------------------- */
.hlcp-strip {
  display: flex; gap: 8px;
  overflow-x: auto; overflow-y: hidden;
  padding: 2px 2px 8px;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: var(--hlcp-line) transparent;
}
.hlcp-strip::-webkit-scrollbar { height: 6px }
.hlcp-strip::-webkit-scrollbar-track { background: transparent }
.hlcp-strip::-webkit-scrollbar-thumb { background: var(--hlcp-line); border-radius: 99px }

.hlcp-day {
  flex: 0 0 auto;
  scroll-snap-align: start;
  min-width: 60px;
  display: flex; flex-direction: column; align-items: center; gap: 1px;
  background: var(--hlcp-surface);
  border: 1px solid var(--hlcp-line);
  border-radius: 12px;
  padding: 8px 10px 7px;
  cursor: pointer;
  color: var(--hlcp-text);
  font-family: var(--font-label, 'Rajdhani','Rajdhani Fallback', sans-serif);
  transition: border-color .16s, background .16s, transform .16s, color .16s;
  position: relative;
}
.hlcp-day .hlcp-dow {
  font-size: .6rem; letter-spacing: .09em; text-transform: uppercase;
  color: var(--hlcp-muted); font-weight: 700;
}
.hlcp-day .hlcp-num { font-size: 1.15rem; font-weight: 700; line-height: 1.05 }
.hlcp-day .hlcp-mon {
  font-size: .58rem; letter-spacing: .08em; text-transform: uppercase;
  color: var(--hlcp-muted); font-weight: 600;
}
.hlcp-day:hover:not([disabled]) { border-color: var(--hlcp-accent) }

.hlcp-day.is-sel {
  background: var(--hlcp-accent);
  border-color: var(--hlcp-accent);
  color: var(--hlcp-deep);
}
.hlcp-day.is-sel .hlcp-dow,
.hlcp-day.is-sel .hlcp-mon { color: var(--hlcp-deep); opacity: .75 }

/* Closed: struck through and inert. The label replaces the month line so the
   reason for it being unpickable is on the chip itself, not in a tooltip. */
.hlcp-day.is-closed {
  cursor: not-allowed;
  border-style: dashed;
  border-color: var(--hlcp-line);
  color: var(--hlcp-muted);
  background: transparent;
}
.hlcp-day.is-closed .hlcp-num { text-decoration: line-through; text-decoration-thickness: 2px }
.hlcp-day.is-closed .hlcp-mon { color: var(--hlcp-danger); font-weight: 700 }
.hlcp-day[disabled] { opacity: .34; cursor: not-allowed }
.hlcp-day.is-closed[disabled] { opacity: .62 }

.hlcp-more {
  flex: 0 0 auto;
  min-width: 60px;
  background: transparent;
  border: 1px dashed var(--hlcp-line);
  border-radius: 12px;
  color: var(--hlcp-muted);
  font-family: var(--font-label, 'Rajdhani','Rajdhani Fallback', sans-serif);
  font-size: .62rem; letter-spacing: .08em; text-transform: uppercase; font-weight: 700;
  padding: 8px 12px; cursor: pointer;
  transition: border-color .16s, color .16s;
}
.hlcp-more:hover { border-color: var(--hlcp-accent); color: var(--hlcp-accent) }

/* ---- month sheet -------------------------------------------------------- */
.hlcp-sheet {
  position: fixed; inset: 0; z-index: 9000;
  display: flex; align-items: center; justify-content: center;
  padding: 18px;
  background: rgba(3, 8, 5, .72);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.hlcp-cal {
  width: 100%; max-width: 360px;
  background: var(--hlcp-surface);
  border: 1px solid var(--hlcp-line);
  border-radius: 16px;
  padding: 16px 14px 14px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .55);
}
.hlcp-cal-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 12px; gap: 8px;
}
.hlcp-cal-title {
  font-family: var(--font-display, 'Anton','Anton Fallback', sans-serif);
  text-transform: uppercase; letter-spacing: .02em;
  font-size: 1.1rem; color: var(--hlcp-text);
}
.hlcp-nav {
  background: var(--hlcp-deep); border: 1px solid var(--hlcp-line);
  color: var(--hlcp-text); border-radius: 9px;
  width: 34px; height: 34px; cursor: pointer; line-height: 1;
  font-size: 1rem; transition: border-color .16s, color .16s;
}
.hlcp-nav:hover:not([disabled]) { border-color: var(--hlcp-accent); color: var(--hlcp-accent) }
.hlcp-nav[disabled] { opacity: .3; cursor: not-allowed }

.hlcp-dows, .hlcp-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px }
.hlcp-dows { margin-bottom: 4px }
.hlcp-dows span {
  text-align: center; font-size: .58rem; letter-spacing: .06em;
  text-transform: uppercase; color: var(--hlcp-muted); font-weight: 700;
  font-family: var(--font-label, 'Rajdhani','Rajdhani Fallback', sans-serif);
}
.hlcp-cell {
  position: relative; overflow: hidden;
  aspect-ratio: 1 / 1;
  display: flex; align-items: center; justify-content: center;
  background: var(--hlcp-deep);
  border: 1px solid var(--hlcp-line);
  border-radius: 9px;
  color: var(--hlcp-text);
  font-family: var(--font-label, 'Rajdhani','Rajdhani Fallback', sans-serif);
  font-weight: 700; font-size: .92rem;
  cursor: pointer;
  transition: border-color .16s, background .16s, color .16s;
}
.hlcp-cell.is-blank { background: transparent; border-color: transparent; cursor: default }
.hlcp-cell:hover:not([disabled]):not(.is-blank) { border-color: var(--hlcp-accent) }
.hlcp-cell.is-sel { background: var(--hlcp-accent); border-color: var(--hlcp-accent); color: var(--hlcp-deep) }
.hlcp-cell.is-today::after {
  content: ''; position: absolute; bottom: 4px; left: 50%; transform: translateX(-50%);
  width: 4px; height: 4px; border-radius: 50%; background: var(--hlcp-accent);
}
.hlcp-cell.is-sel.is-today::after { background: var(--hlcp-deep) }
.hlcp-cell[disabled] { opacity: .3; cursor: not-allowed }
.hlcp-cell.is-closed {
  color: var(--hlcp-muted); border-style: dashed; cursor: not-allowed;
  text-decoration: line-through; text-decoration-thickness: 2px;
}
/* booking marker, admin only */
.hlcp-cell .hlcp-dot {
  position: absolute; top: 3px; right: 4px;
  font-size: .5rem; line-height: 1; font-weight: 700;
  color: var(--hlcp-accent);
}
.hlcp-cell.is-sel .hlcp-dot { color: var(--hlcp-deep) }

/* The shutter panels HLCAdminFx.shutterClose animates. Two halves so they meet
   in the middle rather than wiping one way. */
.hlcp-shutter {
  position: absolute; left: 0; right: 0; height: 50%;
  background: repeating-linear-gradient(
    180deg, var(--hlcp-line) 0 2px, var(--hlcp-deep) 2px 5px);
  pointer-events: none;
}
.hlcp-shutter.top { top: 0 }
.hlcp-shutter.bot { bottom: 0 }

.hlcp-cal-foot { display: flex; gap: 8px; margin-top: 12px }
.hlcp-cal-foot button { flex: 1 }

/* ---- minute chips ------------------------------------------------------- */
.hlcp-mins { display: flex; gap: 8px; flex-wrap: wrap }
.hlcp-min {
  flex: 1 1 0; min-width: 62px;
  background: var(--hlcp-surface);
  border: 1px solid var(--hlcp-line);
  border-radius: 10px;
  padding: 10px 8px;
  color: var(--hlcp-text);
  font-family: var(--font-label, 'Rajdhani','Rajdhani Fallback', sans-serif);
  font-weight: 700; font-size: .92rem; letter-spacing: .02em;
  cursor: pointer; text-align: center;
  transition: border-color .16s, background .16s, color .16s, transform .16s;
}
.hlcp-min:hover:not([disabled]) { border-color: var(--hlcp-accent) }
.hlcp-min.is-sel { background: var(--hlcp-accent); border-color: var(--hlcp-accent); color: var(--hlcp-deep) }
.hlcp-min[disabled] { opacity: .34; cursor: not-allowed }

/* ---- motion ------------------------------------------------------------- */
@keyframes hlcpRise { from { opacity: 0; transform: translateY(7px) } to { opacity: 1; transform: none } }
@keyframes hlcpSheetIn { from { opacity: 0 } to { opacity: 1 } }
@keyframes hlcpCalIn { from { opacity: 0; transform: translateY(12px) scale(.97) } to { opacity: 1; transform: none } }
@keyframes hlcpMonthL { from { opacity: 0; transform: translateX(-10px) } to { opacity: 1; transform: none } }
@keyframes hlcpMonthR { from { opacity: 0; transform: translateX(10px) } to { opacity: 1; transform: none } }

.hlcp-day, .hlcp-more { animation: hlcpRise .3s cubic-bezier(.2, .9, .2, 1) both }
.hlcp-sheet { animation: hlcpSheetIn .18s ease both }
.hlcp-cal { animation: hlcpCalIn .28s cubic-bezier(.2, .9, .2, 1) both }
.hlcp-grid.dir-prev .hlcp-cell { animation: hlcpMonthL .26s cubic-bezier(.2, .9, .2, 1) both }
.hlcp-grid.dir-next .hlcp-cell { animation: hlcpMonthR .26s cubic-bezier(.2, .9, .2, 1) both }
/* selected chip gets a small spring so a tap feels answered */
.hlcp-day.is-sel, .hlcp-min.is-sel, .hlcp-cell.is-sel { transform: scale(1.03) }

@media (prefers-reduced-motion: reduce) {
  .hlcp-day, .hlcp-more, .hlcp-sheet, .hlcp-cal,
  .hlcp-grid.dir-prev .hlcp-cell, .hlcp-grid.dir-next .hlcp-cell {
    animation: none !important;
  }
  .hlcp-day, .hlcp-min, .hlcp-cell, .hlcp-nav, .hlcp-more { transition: none !important }
  .hlcp-day.is-sel, .hlcp-min.is-sel, .hlcp-cell.is-sel { transform: none }
}