/* ===================================================================
   The Golf Lounge — Daily Schedule (staff calendar) stylesheet
   Extends booking.css's dark theme (the default, [data-theme="dark"])
   with a second, deliberately different light theme — bright and
   colorful rather than just "dark theme with colors inverted", since
   this page may be visible on a screen customers can see too.
   =================================================================== */

:root {
  /* Bay accent colors — used consistently in both themes so each
     bay's bookings are visually distinct at a glance. Bay IDs get
     mapped to these in order via calendar.js. */
  --bay-1: #3b82f6; --bay-2: #f97316; --bay-3: #8b5cf6; --bay-4: #06b6d4;
  --bay-5: #ec4899; --bay-6: #eab308; --bay-7: #22c55e; --bay-8: #f43f5e;
}

/* ---------- Light theme overrides ---------- */
/* Deliberately brighter and more colorful than a simple inversion of
   the dark theme — meant to feel welcoming on a screen customers
   might glance at, not like a backend tool. */
[data-theme="light"] {
  --color-bg: #f5f7fb;
  --color-card: #ffffff;
  --color-accent: #16a34a;
  --color-text: #16213a;
  --color-text-soft: #6b7685;
  --color-line: #e3e8f0;
}
[data-theme="light"] body { color-scheme: light; }
[data-theme="light"] .custom-calendar { box-shadow: 0 12px 30px rgba(20,30,60,.15); }

/* ---------- Header ---------- */
.cal-sticky-top { position: sticky; top: 0; z-index: 40; background: var(--color-bg); }
.cal-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 28px; border-bottom: 1px solid var(--color-line);
}
.cal-header-right { display: flex; align-items: center; gap: 12px; }
.cal-title { font-family: var(--font-display); font-size: 20px; font-weight: 600; margin: 0; }
.header-logo { height: 26px; width: auto; display: block; }
/* Two logo files (white for dark theme, black for light theme) with
   CSS swapping which is visible, rather than one asset with a
   background patch behind it — this keeps the logo's own colors
   exactly as designed in both themes instead of forcing one theme's
   version onto a mismatched background. */
.header-logo-light { display: none; }
[data-theme="light"] .header-logo-dark { display: none; }
[data-theme="light"] .header-logo-light { display: block; }

/* ---------- Admin/staff login screen — same card styling as admin.html ---------- */
.admin-login { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 24px; }
.admin-login-card { background: var(--color-card); border: 1px solid var(--color-line); border-radius: 14px; padding: 40px 36px; width: 100%; max-width: 380px; text-align: center; box-shadow: 0 20px 60px rgba(0,0,0,.35); }
.admin-login-card .header-logo { height: 30px; margin: 0 auto 24px; }
.admin-login input { width: 100%; margin-bottom: 14px; background: var(--color-bg); border: 1px solid var(--color-line); border-radius: 8px; padding: 13px 14px; color: var(--color-text); font-size: 15px; font-family: var(--font-body); }
.admin-login input:focus { outline: none; border-color: var(--color-accent); }
.admin-login .btn { width: 100%; justify-content: center; }

/* ---------- Day navigation bar ---------- */
.cal-daybar {
  display: flex; align-items: center; gap: 12px; padding: 18px 28px;
  border-bottom: 1px solid var(--color-line); flex-wrap: wrap;
  background: var(--color-bg);
}
.cal-date-picker { margin-bottom: 0; }
.cal-date-btn { min-width: 180px; justify-content: center; font-weight: 600; }

/* ---------- The day-planner grid ---------- */
/* Rows: one per 15-minute slot, 10:00-24:00 = 56 rows, plus a header
   row for bay names. Columns: one for time labels, one per bay.
   Booking blocks span rows via grid-row, matching their actual time
   range — this is what makes them visually line up with the correct
   time without any manual pixel math. */
.cal-grid-wrap { padding: 20px 28px 60px; overflow-x: auto; }

/* The bay-name header is now a completely separate element from the
   time-slot grid below it — not row 1 of the same grid. Using the
   same grid-template-columns keeps them visually aligned, but
   structurally independent, which is what actually guarantees the
   header can never overlap the first time row: there's no shared
   grid/sticky-positioning interaction left to go wrong. */
.cal-header-row {
  display: grid;
  grid-template-columns: 64px repeat(var(--bay-count, 7), minmax(72px, 1fr));
  min-width: calc(64px + var(--bay-count, 7) * 72px);
  border: 1px solid var(--color-line); border-bottom: 2px solid var(--color-line);
  border-radius: 10px 10px 0 0; overflow: hidden;
  margin-bottom: 8px;
  /* .cal-grid-wrap sets overflow-x:auto for horizontal scrolling when
     there are many bays. Per spec, an `auto` on one axis forces the
     other axis to `auto` too, which makes the wrapper a scroll
     container — so sticky here resolves against THAT wrapper, not the
     viewport. A non-zero top (e.g. the page-header height) therefore
     doesn't pin the row below the page header; it shoves the row that
     many pixels down INTO the grid, landing it around the 11am slot.
     0 is the only correct value in this context. */
  position: sticky; top: 0; z-index: 30;
}
.cal-bay-header {
  background: var(--color-card); border-right: 1px solid var(--color-line);
  padding: 20px 6px; box-sizing: border-box;
  display: flex; align-items: center; justify-content: center;
  font-weight: 600; font-size: 14px; text-align: center;
}
.cal-bay-header .bay-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-inline-end: 6px; flex-shrink: 0; }
.cal-bay-header.unavailable { opacity: .5; }
.cal-time-corner { background: var(--color-card); border-right: 1px solid var(--color-line); }

.cal-grid {
  display: grid;
  grid-template-columns: 64px repeat(var(--bay-count, 7), minmax(72px, 1fr));
  grid-auto-rows: 24px;
  min-width: calc(64px + var(--bay-count, 7) * 72px);
  border-top: 1px solid var(--color-line);
  border-left: 1px solid var(--color-line);
}

.cal-time-label {
  border-right: 1px solid var(--color-line); border-bottom: 1px solid var(--color-line);
  font-size: 11px; color: var(--color-text-soft); text-align: right; padding: 0 8px 0 0;
  display: flex; align-items: center; justify-content: flex-end;
}
.cal-hour-line { border-bottom: 1px solid var(--color-line); }
/* Fixed-width hh/mm segments so every row's colon lines up in exactly
   the same spot, whether it's a full hour label ("10:00 AM") or a
   quarter-hour marker (just ":15") — the empty hh slot on quarter
   rows still reserves the same width as a real hour number would. */
.cal-time-hh { display: inline-block; width: 18px; text-align: right; }
.cal-time-colon { display: inline-block; width: 6px; text-align: center; }
.cal-time-mm { display: inline-block; width: 20px; text-align: left; }
.cal-time-ampm { display: inline-block; width: 20px; text-align: left; margin-left: 2px; font-size: 10px; opacity: .75; }
.cal-hour-line .cal-time-hh, .cal-hour-line .cal-time-mm { font-weight: 600; color: var(--color-text); }
.cal-time-quarter { opacity: .55; }
.cal-time-quarter .cal-time-mm { color: var(--color-text-soft); }
.cal-bay-column-bg {
  border-right: 1px solid var(--color-line); border-bottom: 1px solid var(--color-line);
  cursor: pointer; transition: box-shadow .1s ease;
}
.cal-bay-column-bg:hover {
  box-shadow: inset 0 0 0 1px var(--color-accent);
  background: color-mix(in srgb, var(--color-accent) 8%, transparent);
}
.cal-bay-column-bg.cell-loading {
  background: color-mix(in srgb, var(--color-accent) 22%, transparent);
  animation: cell-pulse .7s ease-in-out infinite;
}
@keyframes cell-pulse {
  0%, 100% { background: color-mix(in srgb, var(--color-accent) 14%, transparent); }
  50% { background: color-mix(in srgb, var(--color-accent) 32%, transparent); }
}

.cal-booking-block {
  border-radius: 6px; padding: 4px 8px; margin: 1px 3px; cursor: pointer;
  font-size: 12px; line-height: 1.3; overflow: hidden;
  border-left: 3px solid var(--bay-color, var(--color-accent));
  background: color-mix(in srgb, var(--bay-color, var(--color-accent)) 16%, var(--color-card));
  transition: transform .12s ease, box-shadow .12s ease;
}
.cal-booking-block:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0,0,0,.15); }
.cal-booking-block.cancelled { opacity: .45; text-decoration: line-through; border-left-color: var(--color-text-soft); }
.cal-booking-block .cbb-name { font-weight: 700; color: var(--color-text); }
.cal-booking-block .cbb-time { color: var(--color-text-soft); }
.cal-booking-block .cbb-badge {
  display: inline-block; font-size: 9.5px; font-weight: 700; text-transform: uppercase;
  padding: 1px 5px; border-radius: 4px; margin-inline-start: 4px;
}
.cal-booking-block .cbb-badge.unpaid { background: rgba(255,180,60,.2); color: #d98c00; }
[data-theme="dark"] .cal-booking-block .cbb-badge.unpaid { color: #ffb84d; }
.cal-empty-note {
  grid-column: 1 / -1; text-align: center; color: var(--color-text-soft); padding: 40px 0;
  /* This note sits inside the same grid as the (still-present, still
     clickable) background cells behind it — grid-row:1 only reserves
     one 24px row, but the vertical padding above makes the rendered
     box taller than that and spill down over the next several rows.
     Without this, that overflow silently intercepted clicks on the
     first few time slots whenever a day had zero bookings. */
  pointer-events: none;
}

/* ---------- Booking detail modal ---------- */
.cal-modal-overlay {
  display: none; position: fixed; inset: 0; background: rgba(0,0,0,.55); z-index: 200;
  align-items: center; justify-content: center; padding: 20px;
}
.cal-modal-overlay.open { display: flex; }
.cal-modal {
  background: var(--color-card); border: 1px solid var(--color-line); border-radius: 14px;
  padding: 28px; max-width: 440px; width: 100%; position: relative;
  box-shadow: 0 20px 60px rgba(0,0,0,.35);
}
.cal-modal-wide { max-width: 560px; max-height: 85vh; overflow-y: auto; }
.cal-modal-close {
  position: absolute; top: 16px; right: 16px; background: none; border: none;
  color: var(--color-text-soft); font-size: 22px; cursor: pointer;
}
.cal-modal-close:hover { color: var(--color-text); }
.modal-row { display: flex; justify-content: space-between; padding: 7px 0; font-size: 14px; border-bottom: 1px solid var(--color-line); }
.modal-row:last-of-type { border-bottom: none; }
.modal-row .mr-label { color: var(--color-text-soft); }
.modal-row .mr-value { font-weight: 600; text-align: right; }
.modal-notes { background: var(--color-bg); border: 1px solid var(--color-line); border-radius: 8px; padding: 12px 14px; margin-top: 14px; font-size: 13.5px; white-space: pre-wrap; }
/* ---------- Edit form inside the booking modal ----------
   The edit form renders inside .cal-modal rather than as its own
   overlay, so its fields need theming here — this page loads only
   booking.css + calendar.css, neither of which styles bare
   input/select/textarea elements. Scoped to .cal-modal so nothing
   else on the calendar page is affected. */
.cal-modal .form-row { display: flex; gap: 10px; margin-bottom: 10px; }
.cal-modal .cal-field-label {
  display: block; font-size: 11.5px; text-transform: uppercase; letter-spacing: .04em;
  color: var(--color-text-soft); margin: 16px 0 6px;
}
.cal-modal input[type="text"],
.cal-modal input[type="tel"],
.cal-modal input[type="email"],
.cal-modal input[type="date"],
.cal-modal select,
.cal-modal textarea {
  background: var(--color-bg);
  border: 1px solid var(--color-line);
  color: var(--color-text);
  border-radius: 8px;
  padding: 11px 12px;
  font-family: inherit;
  font-size: 14px;
  width: 100%;
  min-width: 0;               /* lets flex children shrink instead of overflowing the modal */
  box-sizing: border-box;
  color-scheme: dark;         /* native date picker renders dark, not white */
}
.cal-modal textarea { min-height: 68px; resize: vertical; }
.cal-modal input:focus, .cal-modal select:focus, .cal-modal textarea:focus {
  outline: none; border-color: var(--color-accent);
}
.cal-modal input::placeholder, .cal-modal textarea::placeholder { color: var(--color-text-soft); }
.cal-modal select {
  appearance: none; -webkit-appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--color-text-soft) 50%),
                    linear-gradient(135deg, var(--color-text-soft) 50%, transparent 50%);
  background-position: calc(100% - 16px) 52%, calc(100% - 11px) 52%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 30px;
}

.modal-notes-label { font-size: 12px; text-transform: uppercase; letter-spacing: .03em; color: var(--color-text-soft); margin-top: 18px; margin-bottom: 6px; }

@media (max-width: 700px) {
  .cal-header, .cal-daybar, .cal-grid-wrap { padding-left: 16px; padding-right: 16px; }
  .cal-title { font-size: 17px; }
}