/* ===========================================================================
   ui-interaction.css — selection feedback, shared structure, per-theme colour
   Added 2026-09-13. Loaded after ui-core.css and before the style sheets.

   WHY THIS EXISTS
   The baseline gave selectable things almost no feedback. `.pill:hover` was a
   1px lift and a 2% background change with no colour shift at all, and the
   selected state was one amber rule buried under !important. Hover and
   selected were easy to confuse, and on touch — where nothing ever hovers —
   selection was the only signal and it was rendered faintly.

   Every theme now gets the same five states in its own palette. A theme sets
   the --fx-* tokens; the rules here do the rest, so the states cannot drift
   apart between themes or be forgotten on one control.

       default      surface + duration tint
       hover        a visible COLOUR change, not just a lift
       selected     stronger fill + border + ring + a persistent mark
       sel + hover  keeps the selected identity, only deepens
       focus        2px outline, offset, always visible
       disabled     flat, struck through, not-allowed, no hover response

   The mark is a pseudo-element, so selection is visible with no pointer
   anywhere near the control. That is what makes it work on touch.

   DURATION TINT — an existing meaning, preserved.
   booking.css tints services by length: .durShort (<=60 min) green, .durLong
   (>60 min) blue. That is real information for someone choosing between a
   30-minute trim and a 4-hour treatment, so every theme keeps a two-way tint
   instead of flattening the list to one surface.
   =========================================================================== */

:root {
  --fx-hover-border: var(--ui-accent, #2563eb);
  --fx-hover-bg: var(--ui-accent-soft, rgba(37, 99, 235, .10));
  --fx-sel-border: var(--ui-accent, #2563eb);
  --fx-sel-bg: var(--ui-accent-soft, rgba(37, 99, 235, .16));
  --fx-sel-ink: var(--ui-ink, #0f172a);
  --fx-sel-ring: 0 0 0 3px rgba(37, 99, 235, .22);
  --fx-sel-mark: var(--ui-accent, #2563eb);
  --fx-sel-mark-ink: #ffffff;
  --fx-focus-color: var(--ui-accent, #2563eb);
  --fx-disabled-bg: rgba(15, 23, 42, .05);
  --fx-disabled-ink: rgba(15, 23, 42, .42);
  --fx-short-bg: rgba(80, 200, 120, .10);
  --fx-short-border: rgba(80, 200, 120, .34);
  --fx-long-bg: rgba(96, 165, 250, .10);
  --fx-long-border: rgba(96, 165, 250, .34);
  --fx-speed: 140ms;
  --fx-mark: 1.15rem;
}

/* --- services ------------------------------------------------------------ */
html[data-ui] .svcPill {
  position: relative;
  transition: background var(--fx-speed) ease, border-color var(--fx-speed) ease,
              box-shadow var(--fx-speed) ease, color var(--fx-speed) ease;
}

/* Duration tint, at the weight booking.css uses so it actually lands. */
html[data-ui] .svcGrid .svcPill.durShort,
html[data-ui] .svcPill.durShort {
  background: var(--fx-short-bg) !important;
  border-color: var(--fx-short-border) !important;
}
html[data-ui] .svcGrid .svcPill.durLong,
html[data-ui] .svcPill.durLong {
  background: var(--fx-long-bg) !important;
  border-color: var(--fx-long-border) !important;
}

/* Hover — a real colour change, and never on a selected row so the two states
   can never be mistaken for one another. */
html[data-ui] .svcPill:hover:not([aria-pressed="true"]),
html[data-ui] .svcGrid .svcPill.durShort:hover:not([aria-pressed="true"]),
html[data-ui] .svcGrid .svcPill.durLong:hover:not([aria-pressed="true"]) {
  background: var(--fx-hover-bg) !important;
  border-color: var(--fx-hover-border) !important;
}

/* Selected. Beats booking.css:553, which forces amber with !important. */
html[data-ui] .svcGrid .pill.svcPill.on,
html[data-ui] .pill.svcPill.on,
html[data-ui] .svcPill[aria-pressed="true"],
html[data-ui] .svcGrid .svcPill.durShort[aria-pressed="true"],
html[data-ui] .svcGrid .svcPill.durLong[aria-pressed="true"] {
  background: var(--fx-sel-bg) !important;
  border-color: var(--fx-sel-border) !important;
  box-shadow: var(--fx-sel-ring) !important;
  color: var(--fx-sel-ink) !important;
  transform: none !important;
}

/* Hovering something already chosen keeps its identity and only deepens. */
html[data-ui] .svcGrid .pill.svcPill.on:hover,
html[data-ui] .svcPill[aria-pressed="true"]:hover {
  background: var(--fx-sel-bg) !important;
  border-color: var(--fx-sel-border) !important;
  filter: brightness(.97);
  transform: none !important;
}

/* The persistent mark. */
html[data-ui] .svcPill[aria-pressed="true"]::after,
html[data-ui] #employeeList .empCard.on::after,
html[data-ui] #employeeList button.on::after,
html[data-ui] #employeeList button[aria-pressed="true"]::after {
  content: "";
  position: absolute;
  top: .5rem;
  right: .5rem;
  width: var(--fx-mark);
  height: var(--fx-mark);
  border-radius: 50%;
  background-color: var(--fx-sel-mark);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 68%;
  pointer-events: none;
  z-index: 2;
}

/* --- staff --------------------------------------------------------------- */
html[data-ui] #employeeList .empCard,
html[data-ui] #employeeList button {
  position: relative;
  transition: background var(--fx-speed) ease, border-color var(--fx-speed) ease,
              box-shadow var(--fx-speed) ease;
}
html[data-ui] #employeeList .empCard:hover:not(.on),
html[data-ui] #employeeList button:hover:not(.on):not([aria-pressed="true"]) {
  background: var(--fx-hover-bg) !important;
  border-color: var(--fx-hover-border) !important;
}
html[data-ui] #employeeList .empCard.on,
html[data-ui] #employeeList button.on,
html[data-ui] #employeeList button[aria-pressed="true"] {
  background: var(--fx-sel-bg) !important;
  border-color: var(--fx-sel-border) !important;
  box-shadow: var(--fx-sel-ring) !important;
  outline: none !important;
}

/* --- time slots ---------------------------------------------------------- */
html[data-ui] .slotgrid button {
  position: relative;
  transition: background var(--fx-speed) ease, border-color var(--fx-speed) ease,
              color var(--fx-speed) ease, box-shadow var(--fx-speed) ease;
}
html[data-ui] .slotgrid button:hover:not(:disabled):not(.on):not([aria-pressed="true"]) {
  background: var(--fx-hover-bg) !important;
  border-color: var(--fx-hover-border) !important;
}

/* A chosen time is the single most important thing on the step, so unlike a
   service row it fills solid rather than tinting. */
html[data-ui] .slotgrid button.on,
html[data-ui] .slotgrid button[aria-pressed="true"] {
  background: var(--fx-sel-mark) !important;
  border-color: var(--fx-sel-mark) !important;
  color: var(--fx-sel-mark-ink) !important;
  box-shadow: var(--fx-sel-ring) !important;
  font-weight: 700 !important;
  text-decoration: none !important;
}
html[data-ui] .slotgrid button.on::before,
html[data-ui] .slotgrid button[aria-pressed="true"]::before {
  content: "\2713";
  margin-right: .375rem;
  font-weight: 800;
}
html[data-ui] .slotgrid button.on:hover,
html[data-ui] .slotgrid button[aria-pressed="true"]:hover { filter: brightness(1.08); }

/* Unavailable. Must not look pickable: no hover response, no pointer, struck
   through, and the cursor says so. */
html[data-ui] .slotgrid button:disabled,
html[data-ui] .slotgrid button[aria-disabled="true"] {
  background: var(--fx-disabled-bg) !important;
  border-color: transparent !important;
  color: var(--fx-disabled-ink) !important;
  text-decoration: line-through !important;
  cursor: not-allowed !important;
  box-shadow: none !important;
  transform: none !important;
  opacity: 1 !important;
  font-weight: 500 !important;
}
html[data-ui] .slotgrid button:disabled:hover {
  background: var(--fx-disabled-bg) !important;
  border-color: transparent !important;
  filter: none !important;
}

/* --- keyboard focus, everywhere ------------------------------------------ */
html[data-ui] .svcPill:focus-visible,
html[data-ui] .slotgrid button:focus-visible,
html[data-ui] #employeeList button:focus-visible,
html[data-ui] .svcGroup > summary:focus-visible,
html[data-ui] .uiStyleBtn:focus-visible,
html[data-ui] .btn:focus-visible,
html[data-ui] input:focus-visible {
  outline: 2px solid var(--fx-focus-color) !important;
  outline-offset: 2px !important;
  z-index: 3;
}

/* --- touch ---------------------------------------------------------------
   On a touch screen a tapped element can keep :hover until something else is
   tapped, which makes hover and selected look identical. Where the pointer
   cannot hover, hover feedback is dropped and selection carries the meaning
   on its own. */
@media (hover: none) {
  html[data-ui] .svcPill:hover:not([aria-pressed="true"]),
  html[data-ui] .slotgrid button:hover:not(:disabled):not(.on):not([aria-pressed="true"]),
  html[data-ui] #employeeList button:hover:not(.on):not([aria-pressed="true"]) {
    background: revert-layer !important;
    border-color: revert-layer !important;
  }
  html[data-ui] .svcPill[aria-pressed="true"]::after,
  html[data-ui] #employeeList button.on::after { width: 1.35rem; height: 1.35rem; }
}

@media (prefers-reduced-motion: reduce) {
  html[data-ui] .svcPill,
  html[data-ui] .slotgrid button,
  html[data-ui] #employeeList button { transition: none !important; }
}