/* Compact Mode Styles */

body.compact-mode,
html.compact-mode {
  height: 100%;
  overflow: hidden;
}
body.compact-mode {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
}

/* Hide non-essential sections in compact mode */
body.compact-mode .hero,
body.compact-mode .footer {
  display: none !important;
}

/* Tabs container */
#compactTabs {
  display: none;
  position: sticky;
  top: 0;
  z-index: 1000;
  background: #fff;
  border-bottom: 1px solid #e5e7eb;
  padding: 8px 12px;
  gap: 8px;
}
.compact-tab {
  appearance: none;
  border: 1px solid #e5e7eb;
  background: #f9fafb;
  color: #111827;
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 14px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}
.compact-tab.active {
  background: #111827;
  color: #ffffff;
  border-color: #111827;
}
.compact-tab:focus {
  outline: 2px solid #2563eb;
  outline-offset: 2px;
}

/* Panels */
.compact-panels {
  
  height: calc(100vh - 48px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.compact-panel {
  display: none;
  height: 100%;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.compact-panel.active {
  display: block;
}

/* Compact Selection Bar */
.compact-selection-bar {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  padding: 6px 12px;
  background: #f9fafb;
  border-bottom: 1px solid #e5e7eb;
  font-size: 14px;
  flex-wrap: wrap;
}

.compact-selection-bar .sel-item {
  flex: 0 0 auto;
}

.compact-credits-section {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}

/* Compact credits styling */
.credits-badge.compact {
  font-size: 12px;
  padding: 4px 8px;
  background: #fef3c7;
  border-radius: 6px;
  color: #92400e;
  font-weight: 500;
}

.credits-badge.compact i {
  color: #f59e0b;
  font-size: 11px;
}

.credits-buy-btn.compact {
  font-size: 11px;
  padding: 4px 8px;
  min-height: 28px;
  min-width: auto;
  border-radius: 6px;
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
  color: white;
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 4px;
  font-weight: 500;
  transition: all 0.2s ease;
  border: none;
}

.credits-buy-btn.compact:hover {
  background: linear-gradient(135deg, #d97706 0%, #b45309 100%);
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(245, 158, 11, 0.3);
}

.credits-buy-btn.compact:active {
  transform: translateY(0);
}

.credits-buy-btn.compact i {
  font-size: 10px;
}

body.compact-mode #compactSelectionBar { display: flex !important; }

/* Active selection visual feedback */
.compact-selection-bar.active {
  background: #eef2ff; /* indigo-50 */
  border-bottom-color: #c7d2fe; /* indigo-200 */
  transition: background 150ms ease, border-color 150ms ease;
}

/* Prominent date styling */
#compactSelectedDate.prominent-date {
  font-weight: 600;
  font-size: 16px;
  color: #111827; /* gray-900 */
}

/* Avoid scroll inside inner content */
body.compact-mode .week-view,
body.compact-mode .calendar-view,
body.compact-mode .court-grid,
body.compact-mode .time-slots-container,
body.compact-mode .booking-summary {
  max-height: calc(100vh - 180px);
  overflow: auto; /* allow internal scroll when needed */
}