/* Per-room accent colours. Drives room chips + calendar events.
 * The colours themselves now live in the DB (rooms.color) and are emitted at
 * runtime as `[data-room-id="X"]{--room:…}` by App.applyRoomColors() in app.js
 * (see the injected <style id="room-color-vars">). Rooms without a stored
 * colour fall back to --room-default below. */

[data-room-id] { --room-default: #6a8f6e; }

/* ---- Room filter chips ---- */
.room-chip[data-room-id] .room-chip-dot {
  background: var(--room, var(--room-default));
}
.room-chip[data-room-id].is-active {
  border-color: var(--room, var(--room-default));
  box-shadow: inset 0 0 0 1px var(--room, var(--room-default));
}

/* ---- Day view events (bold solid room colour) ---- */
.cal-event[data-room-id] {
  background: var(--room, var(--room-default));
  color: #ffffff;
  font-weight: 600;
  border: none;
  border-left: 4px solid rgba(0, 0, 0, 0.18);
  box-shadow: 0 1px 3px rgba(30, 40, 34, 0.18);
}
.cal-event[data-room-id].is-completed { opacity: 0.6; }

/* ---- Month / week chips (bold solid room colour) ---- */
.cal-month-event[data-room-id] {
  background: var(--room, var(--room-default));
  color: #ffffff;
  font-weight: 600;
  border: none;
  border-radius: 4px;
  padding-left: 6px;
}
.cal-month-event[data-room-id].is-completed { opacity: 0.55; }

/* ---- Timeline blocks ---- */
.timeline-block[data-room-id] {
  background: var(--room, var(--room-default));
  color: #fff;
  border: none;
}
.timeline-block[data-room-id].is-completed { opacity: 0.6; }

/* ---- Single "today's bookings" card ---- */
.hub-today-row { margin-bottom: var(--space-2, 16px); }
.hub-today-card {
  display: inline-flex;
  flex-direction: column;
  gap: 2px;
  min-width: 160px;
  padding: 14px 20px;
  background: var(--card, #fff);
  border: 1px solid var(--border, #e3e6dc);
  border-left: 4px solid var(--teal, #6a8f6e);
  border-radius: var(--radius, 8px);
  box-shadow: var(--shadow-sm, 0 1px 2px rgba(47,71,56,.06));
}
.hub-today-label { font-size: var(--text-sm, 13px); color: var(--text-muted, #5e6b62); }
.hub-today-value { font-size: 28px; font-weight: 700; color: var(--navy, #2f4738); line-height: 1.1; }