/* App-specific overrides on top of Tailwind CDN. Keep tiny. */
[x-cloak] { display: none !important; }

.slot {
  min-height: 2.25rem;
  border: 1px solid rgb(226 232 240); /* slate-200 */
  font-size: 0.75rem;
  line-height: 1rem;
  padding: 0.25rem;
  text-align: left;
  transition: background-color 80ms ease-in-out;
}
.slot--empty  { background-color: #ffffff; cursor: pointer; }
.slot--empty:hover { background-color: rgb(224 242 254); /* sky-100 */ }
.slot--booked { background-color: rgb(254 249 195); /* yellow-100 */ cursor: pointer; font-weight: 500; }
.slot--booked:hover { background-color: rgb(253 224 71); /* yellow-300 */ }
.slot--active {
  outline: 2px solid rgb(2 132 199); /* sky-600 */
  outline-offset: -2px;
  position: relative;
  z-index: 15;
}
.slot--lunch  { background-color: rgb(254 226 226); /* red-100 */ color: rgb(127 29 29); cursor: default; }
.slot--off    { background-color: rgb(226 232 240); /* slate-200 */ cursor: not-allowed; }

/* Today column — subtle tint on top of the state color. */
.slot--today.slot--empty { background-color: rgb(240 249 255); /* sky-50 */ }
.slot--today.slot--empty:hover { background-color: rgb(224 242 254); /* sky-100 */ }

/* "Now" marker — thin accent on the current-time row of today's column. */
.slot--now {
  box-shadow: inset 2px 0 0 0 rgb(225 29 72); /* rose-600 left bar */
  position: relative;
}
.slot--now::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -1px;
  height: 2px;
  background: rgb(225 29 72); /* rose-600 */
  pointer-events: none;
}

/* HTMX loading indicator. Hidden by default; shown while a request is in flight. */
.htmx-indicator { opacity: 0; transition: opacity 120ms; }
.htmx-request .htmx-indicator { opacity: 1; }
.htmx-request.htmx-indicator { opacity: 1; }

/* Spinner */
.spinner {
  width: 1rem;
  height: 1rem;
  border: 2px solid rgb(203 213 225); /* slate-300 */
  border-top-color: rgb(2 132 199); /* sky-600 */
  border-radius: 9999px;
  animation: spin 700ms linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }