/**
 * Booking Board Display Styles
 *
 * Responsive layout for all screen sizes:
 * - Desktop wide (1400px+): Two-column grid
 * - Desktop narrow (768-1399px): Single-column scrollable
 * - Mobile portrait (<768px portrait): Card-based day view
 * - Mobile landscape (<768px landscape): Compact grid
 *
 * TV Mode (?mode=tv): Fixed two-column layout optimized for 55" screen at 2m viewing
 */

/* ===== CSS Variables (Interactive Mode Defaults) ===== */
:root {
  /* Colors */
  --bg-primary: #FFFFFF;
  --text-primary: #1e293b;
  --text-secondary: #64748b;
  --text-light: #94a3b8;

  --status-available: #10b981;
  --status-booked: #dc2626;

  --border-light: #e2e8f0;
  --border-medium: #cbd5e1;
  --border-dark: #1e293b;

  --accent-blue: #0ea5e9;
  --accent-navy: #1e40af;

  /* Boat Type Background Colors */
  --boat-type-1x-bg: #fffbeb;      /* Singles - very subtle yellow */
  --boat-type-2x-bg: #eff6ff;      /* Doubles - very subtle blue */
  --boat-type-4x-bg: #f0fdf4;      /* Quads - very subtle green */
  --boat-type-tinnies-bg: #e5e5e5; /* Tinnies - light grey */
  --boat-type-other-bg: #fafafa;   /* Other boats - very subtle gray */

  /* Damaged Boat Colors */
  --damaged-row-bg: #fee2e2;       /* Light red background for damaged boats */
  --damaged-icon-color: #dc2626;   /* Red color for warning icon */
  --damaged-text-color: #991b1b;   /* Dark red for "DAMAGED" overlay text */

  /* Boat Type Group Separator */
  --boat-type-separator-color: #64748b;
  --boat-type-separator-width: 2px;

  /* Typography - Desktop Wide defaults (interactive mode) */
  --font-header: 48px;
  --font-time: 40px;
  --font-column-title: 24px;
  --font-boat-name: 18px;
  --font-booking: 16px;
  --font-footer: 16px;

  /* Spacing */
  --gap-large: 20px;
  --gap-medium: 14px;
  --gap-small: 8px;
  --gap-tiny: 4px;

  --margin-screen: 20px;
  --padding-row: 6px;

  /* Layout */
  --boat-row-height: 50px;
  --boat-name-width: 280px;
  --session-row-height: 25px;

  /* Multi-Day Display Configuration */
  --days-to-display: 7;
  --refresh-interval: 300000; /* 5 minutes */
}

/* ===== Reset & Base ===== */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
  background: var(--bg-primary);
  color: var(--text-primary);
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ===== TV Display Container ===== */
.tv-display {
  width: 100vw;
  height: 100vh;
  background: var(--bg-primary);
  display: flex;
  flex-direction: column;
  padding: var(--margin-screen);
}

/* Header removed - now using footer for club branding */

/* ===== Loading/Error Screens ===== */
.loading-screen,
.error-screen {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: var(--gap-large);
}

.loading-spinner {
  width: 80px;
  height: 80px;
  border: 8px solid var(--border-light);
  border-top: 8px solid var(--accent-blue);
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.loading-screen p,
.error-screen p {
  font-size: 32px;
  color: var(--text-secondary);
}

.error-screen {
  color: var(--status-booked);
}

.error-icon {
  font-size: 80px;
}

.error-screen h2 {
  font-size: 48px;
  font-weight: 700;
}

/* ===== Main View Container ===== */
.view-container {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* ===== Two Column Grid ===== */
.two-column-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gap-large);
  flex: 1;
  overflow: hidden;
}

.boat-column {
  display: flex;
  flex-direction: column;
  border: 3px solid var(--border-dark);
  border-radius: 8px;
  overflow: hidden;
}

.column-title {
  font-size: var(--font-column-title);
  font-weight: 700;
  text-align: center;
  padding: var(--gap-medium);
  background: var(--column-header-bg, var(--accent-navy));
  color: white;
  letter-spacing: 1px;
}

.boats-list {
  flex: 1;
  overflow-y: auto;
  scrollbar-width: none; /* Firefox */
}

.boats-list::-webkit-scrollbar {
  display: none; /* Chrome/Safari */
}

/* ===== Tinnies Section ===== */
.tinnies-section {
  border-top: 3px solid var(--border-dark);
  margin-top: auto; /* Push to bottom of column */
}

.tinnies-section .column-title {
  font-size: calc(var(--font-column-title) * 0.85); /* Slightly smaller than main column titles */
  padding: var(--gap-small) var(--gap-medium);
}

.tinnies-section .boats-list {
  flex: none; /* Don't grow to fill space */
}

/* ===== Day Headers ===== */
.day-headers {
  display: grid;
  grid-template-columns: var(--boat-name-width) repeat(var(--days-to-display), 1fr);
  border-bottom: 3px solid var(--border-dark);
  background: #f8fafc;
  position: sticky;
  top: 0;
  z-index: 10;
}

.day-header-spacer {
  padding: var(--gap-small);
  border-right: 2px solid var(--border-light);
}

.day-header {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--gap-small);
  font-size: 18px;
  font-weight: 700;
  color: var(--accent-navy);
  text-align: center;
  border-right: 1px solid var(--border-light);
}

.day-header:last-child {
  border-right: none;
}

/* Highlight day header when hovering a bookable cell in that column */
.day-header.highlighted {
  background: rgba(14, 165, 233, 0.06);
}

/* ===== Boat Entry (Boat info left, sessions stacked right) ===== */
.boat-entry {
  height: var(--boat-row-height);
  border-bottom: 1px solid var(--border-light);
  display: flex;
  align-items: stretch;
  padding: 0;
  transition: background-color 0.2s ease;
}

/* Alternating row colors for booking data columns */
.boat-entry:nth-child(even) {
  background: var(--row-color-even, #fafafa);
}

.boat-entry:nth-child(odd) {
  background: var(--row-color-odd, #ffffff);
}

/* Type group separator - darker line at top when boat type changes */
.boat-entry.type-separator {
  border-top: var(--boat-type-separator-width) solid var(--type-separator-color, var(--boat-type-separator-color));
  padding-top: var(--gap-tiny);
  margin-top: var(--gap-tiny);
}

.boat-entry:hover {
  filter: brightness(0.95);
}

.boat-entry:last-child {
  border-bottom: none;
}

/* Boat info section (left side - fixed width) */
.boat-info {
  display: flex;
  align-items: center;
  gap: var(--gap-small);
  width: var(--boat-name-width);
  min-width: var(--boat-name-width);
  max-width: var(--boat-name-width);
  padding: 0 var(--gap-small);
  flex-shrink: 0;
  border-right: 2px solid var(--border-light);
}

/* Boat type background colors - CONFIGURABLE (only in boat info column) */
.boat-entry.type-1x .boat-info {
  background: var(--boat-type-1x-bg);
}

.boat-entry.type-2x .boat-info {
  background: var(--boat-type-2x-bg);
}

.boat-entry.type-4x .boat-info {
  background: var(--boat-type-4x-bg);
}

.boat-entry.type-other .boat-info {
  background: var(--boat-type-other-bg);
}

.boat-entry.type-tinnie .boat-info {
  background: var(--boat-type-tinnies-bg);
}

.boat-type-badge {
  background: var(--boat-type-badge-bg, var(--accent-blue));
  color: white;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 14px;
  font-weight: 600;
  flex-shrink: 0;
}

.boat-name-text {
  font-size: var(--font-boat-name);
  font-weight: 700;
  line-height: 1.3;
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
}

/* Clickable boat names in interactive mode (not TV mode) */
.boat-name-text.clickable,
.mobile-boat-name.clickable {
  cursor: pointer;
}

.boat-name-text.clickable:hover,
.mobile-boat-name.clickable:hover {
  color: var(--accent-blue);
}

.boat-name-text.clickable:active,
.mobile-boat-name.clickable:active {
  opacity: 0.7;
}

/* Bookable empty session cells in interactive mode (not TV mode) */
.session-item.bookable {
  cursor: pointer;
}

.session-item.bookable:hover {
  background: rgba(14, 165, 233, 0.1);
}

/* Vertical container for weight and sweep badges */
.boat-badges-vertical {
  display: flex;
  flex-direction: column;
  gap: 3px;
  align-items: flex-end;
  flex-shrink: 0;
}

.boat-weight {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-secondary);
  padding: 2px 6px;
  background: #e2e8f0;
  border-radius: 4px;
  white-space: nowrap;
}

.boat-sweep-badge {
  font-size: 11px; /* Smaller font as requested */
  font-weight: 600;
  color: white;
  padding: 2px 5px;
  background: #f59e0b; /* Amber/orange to indicate dual capability */
  border-radius: 3px;
  white-space: nowrap;
  text-transform: uppercase;
}

/* Multi-day grid section (right side - horizontal day columns) */
.boat-days-grid {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(var(--days-to-display), 1fr);
}

.day-column {
  position: relative;
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--border-light);
  min-width: 0; /* Allow column to shrink below content width */
  overflow: hidden; /* Prevent content from expanding grid cell */
}

.day-column:last-child {
  border-right: none;
}

.session-item {
  height: var(--session-row-height);
  display: flex;
  align-items: center;
  gap: var(--gap-small);
  padding: 0 var(--gap-small);
  font-size: var(--font-booking);
  border-bottom: 1px solid var(--border-light);
  min-width: 0; /* Allow text truncation to work in flex children */
  overflow: hidden; /* Contain long content within cell bounds */
}

.session-item:last-child {
  border-bottom: none;
}

.booking-time {
  font-weight: 400;
  color: var(--booking-time-color, var(--status-booked));
  font-variant-numeric: tabular-nums;
  flex-shrink: 0; /* Prevent time from shrinking */
  font-size: calc(var(--font-booking) * 0.9); /* Slightly smaller than member name */
}

.booking-member {
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1; /* Allow to grow and shrink */
  min-width: 0; /* Critical for ellipsis to work in flexbox */
}

/* ===== Desktop Hover Tooltips ===== */
/* JavaScript-based tooltip (appended to body to avoid overflow clipping) */
@media (hover: hover) and (pointer: fine) {
  .session-item.has-booking {
    cursor: pointer;
  }
}

/* Tooltip element (created by JavaScript) */
.booking-tooltip {
  position: fixed;
  background: var(--bg-dark, #1a1a2e);
  color: var(--text-on-dark, #ffffff);
  padding: 10px 14px;
  border-radius: 6px;
  font-size: 13px;
  line-height: 1.6;
  min-width: 160px;
  max-width: 280px;
  text-align: left;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  z-index: 10000;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s ease;
}

.booking-tooltip.visible {
  opacity: 1;
}

.booking-tooltip .tooltip-boat {
  font-weight: 700;
  color: var(--accent-gold, #f4c430);
  margin-bottom: 4px;
}

.booking-tooltip .tooltip-member {
  font-weight: 600;
}

.booking-tooltip .tooltip-time {
  color: rgba(255, 255, 255, 0.7);
  font-size: 12px;
  margin-top: 2px;
}

/* Other bookings tooltip lines */
.booking-tooltip .tooltip-other-line {
  display: flex;
  gap: 8px;
  margin-top: 2px;
}

.booking-tooltip .tooltip-other-time {
  color: rgba(255, 255, 255, 0.7);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.booking-tooltip .tooltip-other-member {
  font-weight: 600;
  font-size: 12px;
}

.booking-tooltip .tooltip-cta {
  color: var(--accent-green, #4caf50);
  font-size: 11px;
  font-weight: 600;
  margin-top: 5px;
  letter-spacing: 0.03em;
}

/* ===== Off-Session Booking Indicator ===== */
.other-bookings-indicator {
  position: absolute;
  bottom: 1px;
  right: 1px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--accent-gold, #f4c430);
  color: var(--bg-dark, #1a1a2e);
  font-family: Georgia, 'Times New Roman', serif;
  font-style: italic;
  font-size: 10px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 1;
  line-height: 1;
}

/* Hide indicator in TV mode */
body.tv-mode .other-bookings-indicator {
  display: none;
}

/* ===== Favourite Boats ===== */

.favourite-star {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0 2px;
  font-size: 13px;
  line-height: 1;
  color: var(--text-secondary);
  opacity: 0.35;
  flex-shrink: 0;
  transition: opacity 0.15s, color 0.15s;
}

.favourite-star:hover,
.favourite-star:focus-visible {
  opacity: 1;
  color: var(--accent-gold, #f4c430);
  outline: none;
}

.favourite-star.is-favourite {
  color: var(--accent-gold, #f4c430);
  opacity: 1;
}

/* TV mode: never show stars (belt and braces — JS also skips adding them) */
body.tv-mode .favourite-star {
  display: none;
}

/* My Boats section label (desktop columns) */
.my-boats-header {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--accent-navy);
  padding: 5px 8px 3px;
}

/* Separator between My Boats and remaining boats — matches .boat-entry.type-separator */
.my-boats-separator {
  height: var(--boat-type-separator-width, 2px);
  background: var(--type-separator-color, var(--boat-type-separator-color, #64748b));
  margin: var(--gap-tiny) 0;
}

.status-available-text {
  color: var(--text-light);
  font-style: italic;
}

/* ===== Footer ===== */
.display-footer {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  margin-top: var(--gap-large);
  padding-top: var(--gap-medium);
  border-top: 3px solid var(--border-medium);
  gap: var(--gap-large);
}

.footer-left {
  display: flex;
  flex-direction: column;
  gap: var(--gap-tiny);
}

.footer-center {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--gap-medium);
}

.footer-logo {
  height: 40px;
  width: auto;
  object-fit: contain;
}

.club-name {
  font-size: var(--font-footer);
  font-weight: 700;
  color: var(--accent-navy);
  white-space: nowrap;
}

.footer-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--gap-tiny);
  font-size: 18px;
  color: var(--text-secondary);
}

.view-label {
  font-size: var(--font-footer);
  font-weight: 600;
  color: var(--accent-navy);
}

.auto-refresh {
  opacity: 0.7;
}

/* ===== Damaged Boat Styles ===== */
.boat-entry.damaged-boat {
  position: relative; /* For absolute positioning of overlay */
}

.boat-entry.damaged-boat .boat-info {
  background: var(--damaged-row-bg) !important; /* Override type colors */
}

.damaged-overlay {
  position: absolute;
  left: var(--boat-name-width);
  right: 0;
  top: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 48px;
  font-weight: 900;
  color: var(--damaged-text-color);
  opacity: 0.25;
  pointer-events: none; /* Don't block interaction with bookings */
  z-index: 1; /* Below bookings */
  letter-spacing: 8px;
}

/* Ensure bookings remain visible over damaged overlay */
.boat-entry.damaged-boat .boat-days-grid {
  position: relative;
  z-index: 2; /* Above overlay */
}

/* ===== Utility Classes ===== */
.hidden {
  display: none !important;
}

/* ===== Animations ===== */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.view-container {
  animation: fadeIn 0.5s ease-in-out;
}

/* Time pulse on minute change */
@keyframes timePulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.7; }
}

.time-changed {
  animation: timePulse 0.5s ease-in-out;
}

/* Cell update flash */
@keyframes flash {
  0% { background: #fef3c7; }
  100% { background: inherit; }
}

.cell-updated {
  animation: flash 1s ease-out;
}

/* Last updated timestamp pulse after a successful refresh */
@keyframes updatedPulse {
  0%   { color: inherit; font-weight: normal; }
  30%  { color: #15803d; font-weight: 600; }
  100% { color: inherit; font-weight: normal; }
}

#lastUpdated.updated {
  animation: updatedPulse 1.5s ease-out forwards;
}

/* ===== RESPONSIVE LAYOUTS (Interactive Mode) ===== */
/* These breakpoints only apply in interactive mode. TV mode uses fixed layout. */

/* Desktop Wide (1400px+): Two-column layout with fixed footer */
@media screen and (min-width: 1400px) {
  :root {
    --font-column-title: 22px;
    --font-boat-name: 16px;
    --font-booking: 14px;
    --font-footer: 14px;
    --boat-row-height: 44px;
    --session-row-height: 22px;
    --boat-name-width: 220px;
    --margin-screen: 16px;
    --gap-large: 16px;
  }

  body {
    overflow: hidden; /* Content scrolls, not page */
  }

  .tv-display {
    width: 100%;
    height: 100vh;
    height: 100dvh;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    overflow: hidden;
  }

  .view-container {
    flex: 1;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    min-height: 0;
  }

  /* Two-column layout */
  .two-column-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--gap-large);
    width: 100%;
    box-sizing: border-box;
    flex: 1;
    overflow: hidden;
    min-height: 0;
  }

  /* Each column scrolls independently */
  .boat-column {
    display: flex;
    flex-direction: column;
    overflow-y: auto; /* Column is the scroll container */
    overflow-x: hidden;
    max-width: 100%;
    min-height: 0; /* Critical: allows flex child to shrink and enable scrolling */
  }

  /* Column title sticky at top of each column */
  .column-title {
    position: sticky;
    top: 0;
    z-index: 20;
    flex-shrink: 0;
  }

  /* Day headers sticky below column title */
  .day-headers {
    position: sticky;
    top: 50px; /* Below column title */
    z-index: 19;
    max-width: 100%;
    overflow: hidden;
    flex-shrink: 0;
    background: #f8fafc;
  }

  /* Boats list flows naturally within scrollable column */
  .boats-list {
    overflow: visible; /* Don't double-scroll, column handles it */
  }

  /* Tinnies section title also sticky within scroll */
  .tinnies-section .column-title {
    top: 0; /* Reset to top when it reaches scroll position */
  }

  .tinnies-section .day-headers {
    display: none; /* Hide redundant day headers in tinnies */
  }

  .boat-entry {
    max-width: 100%;
  }

  .boat-days-grid {
    min-width: 0;
  }

  .day-header {
    font-size: 12px;
  }

  .boat-type-badge {
    font-size: 11px;
    padding: 1px 4px;
  }

  .boat-weight {
    font-size: 11px;
    padding: 1px 4px;
  }

  .display-footer {
    grid-template-columns: 1fr auto 1fr;
    text-align: left;
    flex-shrink: 0;
  }

  .footer-left {
    flex-direction: row;
    align-items: center;
    gap: 0;
  }

  .footer-right {
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
  }
}

/* Desktop Narrow / Tablet (768px - 1399px): Single column with compact fixed footer */
@media screen and (min-width: 768px) and (max-width: 1399px) {
  :root {
    --font-column-title: 16px;
    --font-boat-name: 15px;
    --font-booking: 13px;
    --font-footer: 12px;
    --boat-row-height: 42px;
    --session-row-height: 21px;
    --boat-name-width: 320px; /* Wide enough for full boat names */
    --margin-screen: 10px;
    --gap-large: 8px;
    --gap-medium: 6px;
  }

  body {
    overflow: hidden;
  }

  .tv-display {
    width: 100%;
    height: 100vh;
    height: 100dvh;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    overflow: hidden;
  }

  .view-container {
    flex: 1;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    min-height: 0;
  }

  /* Single scrollable column containing all sections */
  .two-column-grid {
    display: flex;
    flex-direction: column;
    gap: 0;
    width: 100%;
    box-sizing: border-box;
    flex: 1;
    overflow-y: scroll; /* Always show scrollbar */
    min-height: 0;
  }

  .boat-column {
    max-height: none;
    max-width: 100%;
    border: none;
    border-radius: 0;
    overflow: visible; /* Override base hidden - allow content to flow into scrollable parent */
  }

  /* Section titles as inline separators */
  .column-title {
    position: sticky;
    top: 0;
    z-index: 20;
    padding: 8px var(--margin-screen);
    margin: 0;
    font-size: var(--font-column-title);
    background: var(--accent-navy);
  }

  /* Add spacing before 2nd and subsequent section headers */
  .boat-column:not(:first-child) {
    margin-top: 16px;
    border-top: 3px solid var(--border-medium);
  }

  .tinnies-section {
    margin-top: 16px;
    border-top: 3px solid var(--border-medium);
  }

  /* Only show day headers in first boat column (Club Boats) */
  .boat-column:first-child .day-headers {
    position: sticky;
    top: 36px; /* Below column title */
    z-index: 19;
    background: var(--bg-primary);
    border-bottom: 1px solid var(--border-medium);
  }

  /* Hide redundant day headers in Race Boats section */
  .boat-column:nth-child(2) .day-headers {
    display: none;
  }

  /* Tinnies section - also hide its day headers */
  .tinnies-section .day-headers {
    display: none;
  }

  /* Tinnies title styling */
  .tinnies-section .column-title {
    top: 0;
  }

  .boats-list {
    overflow: visible;
  }

  .boat-entry {
    max-width: 100%;
  }

  .boat-days-grid {
    min-width: 0;
  }

  .day-header {
    font-size: 11px;
    padding: 4px 2px;
  }

  /* Compact badges to fit within row height */
  .boat-type-badge {
    font-size: 10px;
    padding: 1px 4px;
  }

  .boat-weight {
    font-size: 10px;
    padding: 1px 4px;
  }

  .boat-sweep-badge {
    font-size: 9px;
    padding: 1px 3px;
  }

  .boat-badges-vertical {
    gap: 1px;
  }

  /* ===== Compact Footer for Narrow View ===== */
  .display-footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    position: relative;
    gap: 6px 12px;
    padding: 6px var(--margin-screen);
    flex-shrink: 0;
    border-top: 2px solid var(--border-medium);
    margin-top: 0;
  }

  /* Centre logo on the footer, not between left and right content */
  .footer-center {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
  }

  /* Show logo but hide club name on narrow - saves horizontal space */
  .footer-center .club-name {
    display: none;
  }

  .footer-left {
    flex-direction: row;
    align-items: center;
    gap: 0;
  }

  .footer-right {
    flex-direction: row;
    align-items: center;
    gap: 10px;
    font-size: var(--font-footer);
  }

  .view-label {
    font-size: var(--font-footer);
    font-weight: 600;
  }

  #lastUpdated,
  #autoRefreshDisplay {
    font-size: 11px;
  }

  /* Keep font controls inline and compact */
  .font-size-controls {
    display: flex !important;
    gap: 2px;
  }

  .font-size-btn-inline {
    padding: 3px 6px;
    font-size: 11px;
    min-width: auto;
  }

  .font-size-btn-inline.font-size-current {
    padding: 3px 4px;
  }

  #fontSizePercent {
    font-size: 10px;
  }

  .refresh-btn-inline {
    width: 28px;
    height: 24px;
    font-size: 15px;
    margin-right: 6px;
  }

  .manage-bookings-inline {
    width: 28px;
    height: 24px;
    font-size: 14px;
  }
}

/* Mobile mode (<768px) */
@media screen and (max-width: 767px) {
  :root {
    --font-column-title: 16px;
    --font-boat-name: 12px;
    --font-booking: 10px;
    --font-footer: 11px;
    --boat-row-height: auto;
    --session-row-height: 18px;
    --boat-name-width: 110px; /* Narrow boat name to fit days */
    --margin-screen: 4px;
    --gap-large: 4px;
    --gap-medium: 4px;
    --gap-small: 2px;
  }

  .tv-display {
    width: 100%;
    padding: var(--margin-screen);
  }

  /* Keep boat-info and days side by side, don't stack */
  .boat-entry {
    flex-direction: row;
    height: auto;
    min-height: 40px;
  }

  .boat-info {
    width: var(--boat-name-width);
    min-width: var(--boat-name-width);
    max-width: var(--boat-name-width);
    padding: 2px 4px;
    flex-direction: column; /* Stack badge, name, weight vertically */
    align-items: flex-start;
    gap: 1px;
  }

  /* Hide weight badge on mobile to save space */
  .boat-weight {
    display: none;
  }

  /* Smaller type badge */
  .boat-type-badge {
    font-size: 9px;
    padding: 1px 3px;
  }

  /* Truncate boat name */
  .boat-name-text {
    font-size: 11px;
    max-width: 100px;
  }

  /* Days grid fills remaining space */
  .boat-days-grid {
    flex: 1;
    min-width: 0;
  }

  /* Compact day columns */
  .day-column {
    min-width: 0;
  }

  .session-item {
    height: var(--session-row-height);
    padding: 0 2px;
    gap: 2px;
  }

  /* Hide booking time on mobile, just show member name */
  .booking-time {
    display: none;
  }

  .booking-member {
    font-size: 9px;
  }

  /* Compact day headers - uses --days-to-display from config */
  .day-headers {
    grid-template-columns: var(--boat-name-width) repeat(var(--days-to-display), 1fr);
  }

  .day-header-spacer {
    width: var(--boat-name-width);
    min-width: var(--boat-name-width);
  }

  .day-header {
    font-size: 9px;
    padding: 2px 1px;
    min-width: 0;
  }

  /* Compact column titles */
  .column-title {
    padding: var(--gap-small) var(--gap-medium);
  }

  /* Compact footer */
  .display-footer {
    margin-top: var(--gap-medium);
    padding-top: var(--gap-small);
    gap: var(--gap-small);
  }

  .footer-logo {
    height: 20px;
  }

  .club-name {
    font-size: 12px;
  }

  .footer-right {
    font-size: 10px;
  }

  /* Damaged overlay scales down */
  .damaged-overlay {
    font-size: 16px;
    letter-spacing: 2px;
  }

  /* Hide sweep badge on mobile */
  .boat-sweep-badge {
    display: none;
  }
}

/* ===== MOBILE LANDSCAPE VIEW ===== */
/* Improved grid readability for landscape phones/small tablets */
@media screen and (max-width: 767px) and (orientation: landscape) {
  :root {
    --font-column-title: 14px;
    --font-boat-name: 13px;
    --font-booking: 11px;
    --font-footer: 10px;
    --boat-row-height: 36px;
    --session-row-height: 18px;
    --boat-name-width: 130px;
    --margin-screen: 6px;
    --gap-large: 6px;
    --gap-medium: 4px;
  }

  /* Prevent viewport overflow during orientation change */
  .tv-display {
    max-width: 100vw;
    overflow-x: hidden;
  }

  /* Show grid view (already default), ensure mobile portrait view hidden */
  .mobile-portrait-view {
    display: none !important;
  }

  .two-column-grid {
    display: grid !important;
    grid-template-columns: 1fr; /* Single column in landscape */
    max-width: 100%;
  }

  /* Sticky section headers */
  .column-title {
    position: sticky;
    top: 0;
    z-index: 20;
    padding: 6px 10px;
  }

  /* Sticky day headers */
  .day-headers {
    position: sticky;
    top: 32px;
    z-index: 19;
  }

  .day-header {
    font-size: 10px;
    padding: 3px 2px;
  }

  /* More readable boat info */
  .boat-info {
    flex-direction: row; /* Keep horizontal layout */
    align-items: center;
    gap: 4px;
    padding: 2px 4px;
  }

  .boat-type-badge {
    font-size: 10px;
    padding: 1px 4px;
  }

  .boat-name-text {
    font-size: var(--font-boat-name);
  }

  /* Show booking times in landscape (more space than portrait) */
  .booking-time {
    display: inline;
    font-size: 10px;
  }

  .booking-member {
    font-size: var(--font-booking);
  }

  .session-item {
    gap: 3px;
    padding: 0 3px;
  }

  /* Compact footer for landscape */
  .display-footer {
    padding-top: 4px;
    margin-top: 4px;
    gap: 4px;
  }

  .footer-logo {
    height: 18px;
  }

  .club-name {
    font-size: 11px;
  }

  /* Smaller damaged overlay */
  .damaged-overlay {
    font-size: 14px;
    letter-spacing: 2px;
  }
}

/* ===== MOBILE PORTRAIT VIEW ===== */
/* Single-day card view for mobile in portrait orientation */

/* Hide mobile view by default */
.mobile-portrait-view {
  display: none;
}

/* Mobile Portrait Mode (<768px AND portrait orientation) */
@media screen and (max-width: 767px) and (orientation: portrait) {
  /* Make the whole display a flex column with fixed header/footer */
  .tv-display {
    display: flex;
    flex-direction: column;
    height: 100vh;
    height: 100dvh; /* Dynamic viewport height for mobile browsers */
    overflow: hidden;
  }

  /* Show mobile portrait view, hide grid view */
  .mobile-portrait-view {
    display: flex;
    flex-direction: column;
    flex: 1;
    overflow: hidden;
    min-height: 0; /* Important for flex child scrolling */
  }

  .two-column-grid {
    display: none !important;
  }

  /* Reset some mobile-landscape cramped styles */
  :root {
    --font-column-title: 16px;
    --font-boat-name: 15px;
    --font-booking: 14px;
    --margin-screen: 8px;
    --gap-small: 6px;
    --gap-medium: 10px;
  }

  /* ===== Day Navigation (Sticky Header) ===== */
  .day-nav {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 8px 0;
    border-bottom: 2px solid var(--border-medium);
    background: var(--bg-primary);
    flex-shrink: 0;
    position: sticky;
    top: 0;
    z-index: 100;
  }

  .day-nav-arrow {
    width: 36px;
    height: 36px;
    border: none;
    background: var(--accent-navy);
    color: white;
    font-size: 16px;
    border-radius: 6px;
    cursor: pointer;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .day-nav-arrow:disabled {
    opacity: 0.3;
    cursor: not-allowed;
  }

  .day-nav-arrow:active:not(:disabled) {
    transform: scale(0.95);
  }

  .day-nav-tabs {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    flex: 1;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    padding: 0 4px;
  }

  .day-nav-tabs::-webkit-scrollbar {
    display: none;
  }

  .day-tab {
    padding: 8px 14px;
    border: 2px solid var(--border-medium);
    border-radius: 8px;
    background: white;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary);
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
    scroll-snap-align: center;
    transition: all 0.2s ease;
  }

  .day-tab.active {
    background: var(--accent-navy);
    border-color: var(--accent-navy);
    color: white;
  }

  .day-tab:active {
    transform: scale(0.97);
  }

  /* ===== Mobile Cards Container (Scrollable Area) ===== */
  .mobile-cards-container {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: var(--gap-medium) var(--margin-screen);
    min-height: 0; /* Critical for flex child scrolling */
    -webkit-overflow-scrolling: touch;
  }

  /* ===== Section Headers ===== */
  .mobile-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px;
    background: var(--accent-navy);
    color: white;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.5px;
    margin-bottom: var(--gap-small);
    border-radius: 6px;
    cursor: pointer;
  }

  .mobile-section-header .section-toggle {
    font-size: 12px;
    opacity: 0.8;
  }

  .mobile-section-header.collapsed + .mobile-section-boats {
    display: none;
  }

  .mobile-section-boats {
    display: flex;
    flex-direction: column;
    gap: var(--gap-small);
    margin-bottom: var(--gap-medium);
  }

  /* ===== Boat Cards ===== */
  .mobile-boat-card {
    background: white;
    border: 1px solid var(--border-medium);
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
  }

  .mobile-boat-card.damaged {
    border-color: var(--damaged-icon-color);
    background: var(--damaged-row-bg);
  }

  .mobile-boat-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    border-bottom: 1px solid var(--border-light);
  }

  /* Boat type background colors for card headers */
  .mobile-boat-card.type-1x .mobile-boat-header {
    background: var(--boat-type-1x-bg);
  }

  .mobile-boat-card.type-2x .mobile-boat-header {
    background: var(--boat-type-2x-bg);
  }

  .mobile-boat-card.type-4x .mobile-boat-header {
    background: var(--boat-type-4x-bg);
  }

  .mobile-boat-card.type-tinnie .mobile-boat-header {
    background: var(--boat-type-tinnies-bg);
  }

  .mobile-boat-card.type-other .mobile-boat-header {
    background: var(--boat-type-other-bg);
  }

  .mobile-boat-badge {
    background: var(--boat-type-badge-bg, var(--accent-blue));
    color: white;
    padding: 3px 8px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 700;
    flex-shrink: 0;
  }

  .mobile-boat-name {
    font-size: var(--font-boat-name);
    font-weight: 700;
    color: var(--text-primary);
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .mobile-boat-weight {
    font-size: 12px;
    color: var(--text-secondary);
    background: #e2e8f0;
    padding: 2px 6px;
    border-radius: 4px;
    flex-shrink: 0;
  }

  .mobile-boat-sweep {
    font-size: 11px;
    font-weight: 600;
    color: white;
    background: #f59e0b;
    padding: 2px 6px;
    border-radius: 4px;
    flex-shrink: 0;
  }

  .mobile-damaged-badge {
    font-size: 11px;
    font-weight: 700;
    color: var(--damaged-icon-color);
    background: white;
    padding: 2px 6px;
    border-radius: 4px;
    border: 1px solid var(--damaged-icon-color);
  }

  /* ===== Session Rows ===== */
  .mobile-sessions {
    padding: 0;
  }

  .mobile-session-row {
    display: flex;
    align-items: center;
    padding: 10px 12px;
    border-bottom: 1px solid var(--border-light);
    min-height: 44px; /* Touch-friendly height */
  }

  .mobile-session-row:last-child {
    border-bottom: none;
  }

  .mobile-session-label {
    width: 36px;
    font-size: 11px;
    font-weight: 700;
    color: var(--text-secondary);
    flex-shrink: 0;
  }

  .mobile-session-time {
    width: 50px;
    font-size: 14px;
    font-weight: 700;
    color: var(--booking-time-color, var(--status-booked));
    flex-shrink: 0;
  }

  .mobile-session-member {
    flex: 1;
    font-size: var(--font-booking);
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .mobile-session-available {
    color: var(--text-light);
    font-style: italic;
  }

  .mobile-session-row.bookable {
    cursor: pointer;
  }

  .mobile-session-row.bookable:hover {
    background: rgba(14, 165, 233, 0.05);
  }

  /* Damaged boat sessions */
  .mobile-boat-card.damaged .mobile-sessions {
    position: relative;
  }

  .mobile-boat-card.damaged .mobile-session-row {
    opacity: 0.5;
  }

  .mobile-damaged-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    font-weight: 900;
    color: var(--damaged-text-color);
    opacity: 0.3;
    pointer-events: none;
    letter-spacing: 4px;
  }

  /* ===== Off-Session Bookings (Mobile) ===== */
  .mobile-other-bookings {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    font-size: 12px;
    color: var(--text-secondary);
    cursor: pointer;
    border-top: 1px solid var(--border-light);
  }

  .mobile-other-bookings .other-bookings-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--accent-gold, #f4c430);
    color: var(--bg-dark, #1a1a2e);
    font-family: Georgia, 'Times New Roman', serif;
    font-style: italic;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    flex-shrink: 0;
  }

  .mobile-other-details {
    display: none;
    padding: 0 12px 8px 12px;
  }

  .mobile-other-details.visible {
    display: block;
  }

  .mobile-other-detail-line {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 0 4px 20px;
    font-size: 12px;
  }

  .mobile-other-time {
    color: var(--text-secondary);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
  }

  .mobile-other-member {
    color: var(--text-primary);
    font-weight: 500;
  }

  /* Mobile star: push to the far right of the header flex row */
  .mobile-favourite-star {
    margin-left: auto;
    font-size: 16px;
    padding: 0 4px;
  }

  /* ===== Empty State ===== */
  .mobile-no-bookings {
    text-align: center;
    padding: 32px 16px;
    color: var(--text-secondary);
    font-size: 14px;
  }

  /* ===== Footer (Sticky Bottom) ===== */
  .display-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: var(--gap-small) var(--margin-screen);
    margin-top: 0;
    border-top: 2px solid var(--border-medium);
    background: var(--bg-primary);
    flex-shrink: 0;
    position: sticky;
    bottom: 0;
    z-index: 100;
  }

  /* Centre logo on the footer, not between left and right content */
  .footer-center {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }

  .footer-center .club-name {
    display: none;
  }

  .footer-logo {
    height: 24px;
  }

  .footer-left, .footer-right {
    font-size: 11px;
  }

  .auto-refresh {
    display: none; /* Hide countdown on mobile */
  }

  /* Ensure view container allows footer to be sticky */
  .view-container {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
  }
}

/* ===== MODE OVERRIDE CLASSES ===== */
/* Applied via JavaScript when ?mode= query param is present */

body.mode-tv {
  /* Force TV layout regardless of viewport */
  overflow: hidden !important;
}

body.mode-tv .tv-display {
  height: 100vh !important;
}

body.mode-tv .two-column-grid {
  grid-template-columns: 1fr 1fr !important;
}

/* TV mode: time is a small muted label; name is the dominant readable element */
body.mode-tv .booking-time {
  order: -1;
  font-weight: 400;
  font-size: calc(var(--font-booking) * 0.72);
  color: var(--booking-time-color, var(--text-secondary));
}

body.mode-tv .booking-member {
  font-weight: 700;
}

/* Desktop interactive: day columns are too narrow (~60-100px) for name + time
   to coexist. Give the name the full cell width; tooltip shows time on hover. */
@media (min-width: 768px) {
  body:not(.mode-tv) .booking-time {
    display: none;
  }
}

body.mode-desktop {
  overflow: auto !important;
}

body.mode-mobile .boat-entry {
  flex-direction: column !important;
  height: auto !important;
}

/* ===== USER FONT SIZE CONTROLS ===== */
/* Interactive mode only - hidden in TV mode */

:root {
  --user-font-scale: 1; /* Set by JavaScript from localStorage */
}

/* Apply user font scale to text and row heights (density control) */
.boat-name-text,
.booking-member,
.booking-time,
.mobile-boat-name,
.mobile-session-member,
.mobile-session-time {
  font-size: calc(var(--font-boat-name) * var(--user-font-scale));
}

.booking-member,
.mobile-session-member {
  font-size: calc(var(--font-booking) * var(--user-font-scale));
}

/* Scale row heights with font size so density actually changes */
.boat-entry {
  height: calc(var(--boat-row-height) * var(--user-font-scale));
}

.session-item {
  height: calc(var(--session-row-height) * var(--user-font-scale));
}

/* ===== Boat Sort Controls (in footer, interactive mode only) ===== */
.sort-controls {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-right: 16px;
  padding: 4px 8px;
  background: #f1f5f9;
  border-radius: 6px;
}

.sort-btn {
  height: 28px;
  padding: 0 8px;
  border: 1px solid #cbd5e1;
  background: white;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 500;
  color: #374151;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s ease;
  white-space: nowrap;
}

.sort-btn:hover {
  background: #e2e8f0;
  border-color: #94a3b8;
}

.sort-btn.active {
  background: white;
  color: var(--accent-navy, #1e3a5f);
  border-color: var(--accent-navy, #1e3a5f);
  font-weight: 600;
}

.sort-btn.active:hover {
  background: #f8fafc;
}

/* Sort buttons inside the bottom sheet — larger touch targets, filled active */
.font-size-sheet-content .sort-btn {
  height: 48px;
  width: 72px;
  border-radius: 12px;
  font-size: 14px;
  border-width: 2px;
}

.font-size-sheet-content .sort-btn.active {
  background: var(--accent-navy, #1e3a5f);
  color: white;
  border-color: var(--accent-navy, #1e3a5f);
}

.font-size-sheet-content .sort-btn.active:hover {
  background: var(--accent-navy, #1e3a5f);
}

/* Section labels within the bottom sheet */
.font-size-sheet-section-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #9ca3af;
  text-align: center;
  margin-bottom: 12px;
}

.font-size-sheet-controls + .font-size-sheet-section-label {
  margin-top: 20px;
}

/* ===== Desktop Font Size Controls (in footer) ===== */
.font-size-controls {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-right: 16px;
  padding: 4px 8px;
  background: #f1f5f9;
  border-radius: 6px;
}

.font-size-btn-inline {
  width: 32px;
  height: 28px;
  border: 1px solid #cbd5e1;
  background: white;
  border-radius: 4px;
  font-size: 14px;
  font-weight: 600;
  color: #374151;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s ease;
}

.font-size-btn-inline:hover {
  background: #e2e8f0;
  border-color: #94a3b8;
}

.font-size-btn-inline:active {
  background: #cbd5e1;
  transform: scale(0.95);
}

.font-size-btn-inline.font-size-current {
  width: 48px;
  background: #f8fafc;
  cursor: pointer;
}

.font-size-btn-inline.font-size-current:hover {
  background: #e2e8f0;
}

#fontSizePercent {
  font-size: 11px;
  font-weight: 500;
}

/* ===== Manage My Bookings Button (Desktop, in footer) ===== */
.manage-bookings-inline {
  width: 32px;
  height: 28px;
  border: 1px solid #cbd5e1;
  background: white;
  border-radius: 4px;
  font-size: 16px;
  color: #374151;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s ease;
  text-decoration: none;
  line-height: 1;
}

.manage-bookings-inline:hover {
  background: #e2e8f0;
  border-color: #94a3b8;
}

.manage-bookings-inline:active {
  background: #cbd5e1;
  transform: scale(0.95);
}

/* ===== Manual Refresh Button (Desktop, in footer) ===== */
.refresh-btn-inline {
  width: 32px;
  height: 28px;
  border: 1px solid #cbd5e1;
  background: white;
  border-radius: 4px;
  font-size: 18px;
  color: #374151;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s ease;
  margin-right: 8px;
  line-height: 1;
}

.refresh-btn-inline:hover {
  background: #e2e8f0;
  border-color: #94a3b8;
}

.refresh-btn-inline:active {
  background: #cbd5e1;
  transform: scale(0.95);
}

.refresh-btn-inline.refreshing {
  animation: spin 1s linear infinite;
  pointer-events: none;
  opacity: 0.7;
}

.refresh-btn-inline.cooldown {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}

.refresh-btn-inline.success {
  background: #dcfce7;
  border-color: #16a34a;
  color: #15803d;
  pointer-events: none;
  animation: none;
}

/* ===== Mobile Font Size Floating Button ===== */
.font-size-fab {
  position: fixed;
  bottom: 70px; /* Above footer */
  right: 16px;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: #1e40af;
  color: white;
  border: none;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

.font-size-fab:hover {
  background: #1e3a8a;
  transform: scale(1.05);
}

.font-size-fab:active {
  transform: scale(0.95);
}

/* ===== Mobile Refresh Floating Button ===== */
.refresh-fab {
  position: fixed;
  bottom: 126px; /* Above font-size FAB */
  right: 16px;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: #059669;
  color: white;
  border: none;
  font-size: 22px;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  line-height: 1;
}

.refresh-fab:hover {
  background: #047857;
  transform: scale(1.05);
}

.refresh-fab:active {
  transform: scale(0.95);
}

.refresh-fab.refreshing {
  animation: spin 1s linear infinite;
  pointer-events: none;
  opacity: 0.7;
}

.refresh-fab.cooldown {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
  background: #6b7280;
}

.refresh-fab.success {
  background: #16a34a;
  pointer-events: none;
  animation: none;
  box-shadow: 0 4px 16px rgba(22, 163, 74, 0.45);
}

/* ===== Mobile My Bookings Floating Button ===== */
.manage-bookings-fab {
  position: fixed;
  bottom: 182px; /* Above refresh FAB */
  right: 16px;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: #1e40af;
  color: white;
  border: none;
  font-size: 22px;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  text-decoration: none;
  line-height: 1;
}

.manage-bookings-fab:hover {
  background: #1e3a8a;
  transform: scale(1.05);
}

.manage-bookings-fab:active {
  transform: scale(0.95);
}

/* ===== Mobile Font Size Bottom Sheet ===== */
.font-size-sheet {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.font-size-sheet-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
}

.font-size-sheet-content {
  position: relative;
  background: white;
  border-radius: 16px 16px 0 0;
  padding: 20px;
  padding-bottom: calc(20px + env(safe-area-inset-bottom, 0));
  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.15);
}

.font-size-sheet-header {
  text-align: center;
  font-size: 16px;
  font-weight: 600;
  color: #374151;
  margin-bottom: 20px;
}

.font-size-sheet-controls {
  display: flex;
  justify-content: center;
  gap: 12px;
}

.font-size-btn {
  width: 72px;
  height: 56px;
  border: 2px solid #cbd5e1;
  background: white;
  border-radius: 12px;
  font-size: 20px;
  font-weight: 600;
  color: #374151;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s ease;
}

.font-size-btn:hover {
  background: #f1f5f9;
  border-color: #94a3b8;
}

.font-size-btn:active {
  background: #e2e8f0;
  transform: scale(0.95);
}

.font-size-btn.font-size-reset {
  width: 80px;
  flex-direction: column;
  gap: 2px;
}

#fontSizePercentSheet {
  font-size: 14px;
  font-weight: 500;
  color: #6b7280;
}

/* ===== Hide Interactive Controls in TV Mode ===== */
body.tv-mode .font-size-controls,
body.tv-mode .font-size-fab,
body.tv-mode .font-size-sheet,
body.tv-mode .refresh-btn-inline,
body.tv-mode .refresh-fab,
body.tv-mode .manage-bookings-inline,
body.tv-mode .manage-bookings-fab {
  display: none !important;
}

/* ===== Show/Hide Based on Viewport ===== */
/* Desktop: show footer controls, hide FABs */
@media (min-width: 768px) {
  .font-size-fab,
  .refresh-fab,
  .manage-bookings-fab {
    display: none !important;
  }
}

/* Mobile portrait: show FABs, hide footer controls */
@media (max-width: 767px) and (orientation: portrait) {
  .font-size-controls,
  .sort-controls,
  .refresh-btn-inline,
  .manage-bookings-inline {
    display: none !important;
  }
}

/* Mobile landscape: show footer controls, hide FABs */
@media (max-width: 767px) and (orientation: landscape) {
  .font-size-fab,
  .refresh-fab,
  .manage-bookings-fab {
    display: none !important;
  }
}

/* =============================================================================
   TV MODE - Fixed Wide Layout (overrides all responsive breakpoints)
   Applied when ?mode=tv is in URL. Optimized for 55" screen at 2m viewing.
   ============================================================================= */

body.tv-mode {
  overflow: hidden; /* No scrolling on TV */
}

/* Force TV-optimized typography - larger fonts for 2m viewing distance */
body.tv-mode {
  --font-column-title: 32px;
  --font-boat-name: 26px;
  --font-booking: 22px;
  --font-footer: 20px;
  --font-badge: 16px;
  --font-day-header: 14px;
  --boat-row-height: 60px;
  --session-row-height: 30px;
  --boat-name-width: 360px;
  --margin-screen: 24px;
  --gap-large: 24px;
  --gap-medium: 16px;
  --gap-small: 8px;
}

body.tv-mode .boat-type-badge,
body.tv-mode .boat-weight {
  font-size: var(--font-badge);
}

body.tv-mode .boat-sweep-badge {
  font-size: calc(var(--font-badge) * 0.8);
}

/* Force fixed viewport height layout */
body.tv-mode .tv-display {
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* Force two-column grid layout regardless of screen size */
body.tv-mode .two-column-grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: var(--gap-large);
  flex: 1;
  overflow: hidden;
}

/* Ensure columns fill available space; reset narrow-desktop margin/border overrides */
body.tv-mode .boat-column {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  max-height: none;
  margin-top: 0;
  border-top: none;
}

body.tv-mode .boats-list {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
}

/* Hide mobile portrait view entirely in TV mode */
body.tv-mode .mobile-portrait-view {
  display: none !important;
}

/* Ensure footer stays at bottom */
body.tv-mode .display-footer {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  flex-shrink: 0;
  margin-top: auto;
}

/* Reset any narrow/mobile overrides */
body.tv-mode .column-title {
  position: static; /* Not sticky in TV mode */
  font-size: var(--font-column-title);
}

body.tv-mode .day-headers {
  position: static; /* Not sticky in TV mode */
  display: grid;    /* Override display:none from narrow-desktop media query */
}

body.tv-mode .boat-entry {
  flex-direction: row;
  height: var(--boat-row-height);
}

body.tv-mode .boat-info {
  width: var(--boat-name-width);
  min-width: var(--boat-name-width);
}

body.tv-mode .boat-name {
  font-size: var(--font-boat-name);
}

body.tv-mode .booking-text {
  font-size: var(--font-booking);
}

body.tv-mode .day-header {
  font-size: var(--font-day-header);
}

/* ─── TV Setup Overlay ────────────────────────────────────────────────────────
   Shown only in ?mode=tv-setup. The panel floats over the live board so the
   admin sees the board scaling in real time as they adjust settings.
   The overlay itself is counter-zoomed so the panel stays at normal size
   regardless of the scale value chosen.
──────────────────────────────────────────────────────────────────────────────── */

.tv-setup-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none; /* click-through to board for live preview */
  display: flex;
  align-items: stretch;
  justify-content: flex-end;
}

.tv-setup-overlay.hidden {
  display: none;
}

.tv-setup-panel {
  width: 360px;
  background: #ffffff;
  border-left: 4px solid var(--accent-blue, #0ea5e9);
  box-shadow: -6px 0 32px rgba(0, 0, 0, 0.25);
  padding: 32px 28px 28px;
  display: flex;
  flex-direction: column;
  gap: 28px;
  pointer-events: all;
  overflow-y: auto;
}

.tv-setup-title {
  font-size: 20px;
  font-weight: 700;
  color: var(--accent-navy, #1e40af);
  margin: 0 0 6px;
  font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, sans-serif;
}

.tv-setup-subtitle {
  font-size: 13px;
  color: #64748b;
  margin: 0;
  line-height: 1.5;
}

.tv-setup-section {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.tv-setup-label {
  font-size: 14px;
  font-weight: 600;
  color: #1e293b;
}

.tv-setup-hint {
  font-size: 12px;
  color: #64748b;
  margin: 0;
  line-height: 1.5;
}

.tv-setup-scale-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 4px;
}

.tv-setup-slider {
  flex: 1;
  accent-color: var(--accent-blue, #0ea5e9);
  height: 6px;
  cursor: pointer;
}

.tv-setup-scale-bound {
  font-size: 11px;
  color: #94a3b8;
  width: 30px;
  text-align: center;
  flex-shrink: 0;
}

.tv-setup-scale-display {
  text-align: center;
  margin-top: 2px;
}

#tvSetupScaleValue {
  font-size: 36px;
  font-weight: 700;
  color: var(--accent-navy, #1e40af);
  font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, sans-serif;
}

.tv-setup-days-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 4px;
}

.tv-setup-days-input {
  width: 90px;
  padding: 8px 12px;
  border: 1.5px solid #e2e8f0;
  border-radius: 6px;
  font-size: 18px;
  text-align: center;
  color: #1e293b;
}

.tv-setup-days-input:focus {
  outline: none;
  border-color: var(--accent-blue, #0ea5e9);
}

.tv-setup-link-btn {
  font-size: 12px;
  color: #64748b;
  background: none;
  border: none;
  cursor: pointer;
  text-decoration: underline;
  padding: 0;
}

.tv-setup-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: auto;
  padding-top: 8px;
}

.tv-setup-save-btn {
  padding: 14px;
  background: var(--accent-navy, #1e40af);
  color: #ffffff;
  border: none;
  border-radius: 8px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, sans-serif;
}

.tv-setup-save-btn:hover {
  background: #1d3a9a;
}

.tv-setup-view-btn {
  padding: 12px;
  background: #ffffff;
  color: var(--accent-navy, #1e40af);
  border: 2px solid var(--accent-navy, #1e40af);
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, sans-serif;
}

.tv-setup-view-btn:hover {
  background: #eff6ff;
}

.tv-setup-reset-btn {
  padding: 6px;
  background: none;
  color: #94a3b8;
  border: none;
  font-size: 12px;
  cursor: pointer;
  text-decoration: underline;
  text-align: center;
}