/* Integrale Extension - Calendar + Slot UI styles */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

/* Flatpickr above booking panels / extension scroll */
.flatpickr-calendar {
  z-index: 999999 !important;
}
input.slot-weekday-flatpickr {
  cursor: pointer;
  min-width: 7.5rem;
}
/* Booking expand: shorter date field, wider time select (Flatpickr uses .flatpickr-alt-input for display) */
.slot-reassign input.slot-weekday-flatpickr,
.slot-reassign .flatpickr-alt-input {
  min-width: 0 !important;
  flex: 0 0 6rem;
  width: 6rem;
  max-width: 6rem;
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 16px;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
  box-sizing: border-box;
  background: #111531;
  width: 616px;
  height: 880px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

body > header {
  flex-shrink: 0;
  width: 100%;
  max-width: 600px;
  margin: 0 auto 12px auto;
}

.logo-container {
  text-align: center;
  padding: 16px;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(20px);
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.logo-container img {
  max-width: 100%;
  height: auto;
  width: auto;
  display: block;
  margin: 0 auto;
}

body > #calendar-container:not(.hidden),
body > #legacy-container:not(.hidden),
body.staff-invoices-body > #staff-invoice-container {
  flex: 1;
  min-height: 0;
}

#app { width: 100%; display: flex; flex-direction: column; align-items: center; position: relative; }

#calendar-container.hidden,
#legacy-container.hidden,
.slot-picker.hidden,
.booking-form-wrap.hidden,
#add-form-section.hidden,
#add-cancel-wrap.hidden {
  display: none !important;
}

/* Add-booking: extra space above Cancel vs booking-type radios / vs SELECT SLOTS */
#add-cancel-wrap.add-cancel-after-booking-type {
  margin-top: 22px !important;
}
#add-cancel-wrap.add-cancel-after-slot-form {
  margin-top: 10px !important;
}

/* SELECT SLOTS row: keep flush with Cancel block (spacing comes from add-cancel margin-top) */
.booking-info.add-mode .slot-show-slots-actions {
  margin-bottom: 0;
}

/* Vehicle transfer — partner garage picker + add form */
.transfer-address-block .transfer-direction-label {
  font-weight: 600;
  font-size: 13px;
  color: #1e3a5f;
}
.transfer-garage-select {
  width: 100%;
  box-sizing: border-box;
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid #d1d5db;
  font-size: 13px;
  font-family: inherit;
  background: #fff;
}
select.transfer-garage-select option.transfer-garage-add-option {
  background: #e0f2fe;
  color: #0369a1;
  font-weight: 600;
}
.transfer-new-garage-panel {
  margin-top: 12px;
  padding: 12px;
  border-radius: 10px;
  border: 1px solid rgba(59, 130, 246, 0.35);
  background: rgba(59, 130, 246, 0.06);
}
.transfer-new-garage-panel.hidden {
  display: none !important;
}
.transfer-new-garage-disclaimer {
  font-size: 12px;
  color: #4b5563;
  margin: 0 0 10px 0;
  line-height: 1.4;
}
.transfer-new-garage-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}
.transfer-new-garage-actions .action-button {
  width: auto;
  min-width: 120px;
  flex: 1;
}
.transfer-new-garage-name-input,
.transfer-new-garage-postcode-input {
  padding: 8px 12px;
  border-radius: 6px;
  border: 1px solid #d1d5db;
  font-size: 14px;
  width: 100%;
  box-sizing: border-box;
  font-family: inherit;
}

#legacy-container:not(.hidden) {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}

.calendar-container {
  width: 100%;
  max-width: 600px;
  display: flex !important;
  flex-direction: row !important;
  gap: 4px;
  align-items: stretch;
  margin: 0 auto;
  flex: 1;
  min-height: 0;
}

.calendar-side {
  flex: 0 0 40% !important;
  min-width: 220px;
  max-width: 40% !important;
  background: rgba(255, 255, 255, 1);
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
  display: flex !important;
  flex-direction: column !important;
  padding: 16px;
  box-sizing: border-box;
  overflow: hidden !important;
  min-height: 0;
}

.custom-calendar { width: 100%; flex: 1; min-height: 0; display: flex; flex-direction: column; overflow-y: auto; }
.calendar-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
.month-year { font-size: 18px; font-weight: 700; color: #1a1a1a; }
.nav-buttons { display: flex; gap: 6px; }
.nav-btn {
  background: rgba(59, 130, 246, 0.1);
  color: #3b82f6;
  border: none;
  border-radius: 6px;
  padding: 4px 8px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
}
.nav-btn:hover { background: rgba(59, 130, 246, 0.2); transform: scale(1.05); }

.weekdays { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; margin-bottom: 8px; }
.weekday { text-align: center; font-weight: 600; color: #6b7280; font-size: 11px; text-transform: uppercase; padding: 6px 2px; }

.calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
  margin-bottom: 20px;
}

.calendar-day {
  position: relative;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  font-weight: 600;
  font-size: 12px;
  cursor: pointer;
  background: transparent;
  color: #1a1a1a;
  border: none;
}

.calendar-day.available { background: linear-gradient(135deg, #10b981 0%, #059669 100%); color: white; }
.calendar-day.fully-booked { background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%) !important; color: white; }
.calendar-day.has-bookings::after {
  content: "";
  position: absolute;
  bottom: 3px;
  left: 50%;
  transform: translateX(-50%);
  width: 12px;
  height: 2px;
  background: linear-gradient(90deg, #3b82f6, #1d4ed8);
  border-radius: 1px;
}
.calendar-day.selected { background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%); color: white; box-shadow: 0 2px 6px rgba(59, 130, 246, 0.4); }
.calendar-day.unavailable { color: #9ca3af; background: rgba(156, 163, 175, 0.1); }
.calendar-day.other-month { color: #d1d5db; background: transparent; cursor: default; }
.calendar-day.today { border: 2px solid #000 !important; box-shadow: 0 0 0 1px #000; }

.calendar-actions { margin-top: auto; display: flex; flex-direction: column; gap: 8px; padding-top: 20px; }

.garage-price-panel {
  margin-top: 8px;
  padding: 8px 10px;
  border-radius: 10px;
  background: rgba(59, 130, 246, 0.08);
  border: 1px solid rgba(59, 130, 246, 0.25);
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 11px;
}
.garage-price-title {
  margin: 0 0 4px;
  font-size: 12px;
  font-weight: 500;
  color: #1e3a5f;
  letter-spacing: normal;
  text-transform: none;
}
.garage-price-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #1e3a5f;
}
.garage-price-row strong {
  font-size: 12px;
  color: #1e40af;
}

.garage-map-drive-prices {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 8px 10px;
  border-radius: 8px;
  background: rgba(124, 58, 237, 0.08);
  border: 1px solid rgba(124, 58, 237, 0.25);
  font-size: 11px;
}
.garage-map-drive-price-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #4c1d95;
}
.garage-map-drive-price-row strong {
  font-size: 12px;
  color: #5b21b6;
}
.garage-map-drive-label {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  font-size: 12px;
  line-height: 1.4;
  color: #374151;
  cursor: pointer;
}
.garage-map-drive-label input {
  margin-top: 3px;
  flex-shrink: 0;
}

.garage-map-canvas {
  border: 1px solid #d1d5db;
  box-sizing: border-box;
  width: 100%;
  aspect-ratio: 1 / 1;
  margin-top: 10px;
  border-radius: 8px;
}
.garage-map-check-actions {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  margin-top: 8px;
}
.garage-map-check-actions .action-button {
  width: 100%;
}
.garage-map-footer-actions {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  margin-top: 10px;
}
.garage-map-footer-actions .action-button {
  width: 100%;
}
.garage-map-actions {
  display: flex;
}
.slot-phone-na-label {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
  font-size: 11px;
  font-weight: 400;
  color: #4b5563;
  cursor: pointer;
}
.slot-selected-date-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 4px 0 8px 0;
  font-size: 11px;
  color: #374151;
}
.slot-selected-date-row label {
  font-weight: 500;
  margin: 0;
}
.slot-selected-date-row input {
  font-size: 12px;
  padding: 4px 6px;
  max-width: 7rem;
}
.action-button {
  border: none;
  border-radius: 8px;
  padding: 10px 16px;
  cursor: pointer;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  width: 100%;
  font-family: 'Inter', sans-serif;
}
.action-button.primary { background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%); color: white; }

/* Rainbow glow border — Proceed (address step) and Save (booking editor).
   Full perimeter via animated gradient padding (shimmer, not spin). */
.cta-attention-wrap {
  position: relative;
  display: inline-flex;
  flex: 1;
  min-width: 0;
  border-radius: 10px;
  overflow: visible;
}
.cta-attention-wrap > .action-button {
  position: relative;
  z-index: 1;
  flex: 1;
  width: 100%;
  margin: 0;
  border: none;
}
.garage-address-footer .cta-attention-wrap {
  width: 100%;
}
.cta-attention-wrap.cta-attention-active {
  padding: 2px;
  background: linear-gradient(
    90deg,
    #facc15 0%,
    #a3e635 18%,
    #4ade80 34%,
    #22d3ee 52%,
    #60a5fa 70%,
    #c084fc 86%,
    #facc15 100%
  );
  background-size: 280% 100%;
  animation: cta-rainbow-shimmer 3.2s ease-in-out infinite;
  box-shadow:
    0 0 10px rgba(163, 230, 53, 0.4),
    0 0 18px rgba(34, 211, 238, 0.28),
    0 0 26px rgba(192, 132, 252, 0.22);
}
@keyframes cta-rainbow-shimmer {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}
@media (prefers-reduced-motion: reduce) {
  .cta-attention-wrap.cta-attention-active {
    animation: none;
    background-position: 50% 50%;
  }
}
.garage-address-footer,
.slot-reassign .slot-save-row {
  overflow: visible;
}

.action-button.secondary { background: linear-gradient(135deg, #6b7280 0%, #4b5563 100%); color: white; }
.action-button.contact { background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%); color: white; }
.action-button.tertiary { border: 2px solid rgba(17, 21, 49, 0.35); color: #111531; }
.action-button.logout { background: linear-gradient(135deg, #f87171 0%, #ef4444 100%); color: white; }
.customer-support-panel {
  width: 100%;
  box-sizing: border-box;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid rgba(59, 130, 246, 0.25);
  background: rgba(255, 255, 255, 0.95);
  font-size: 12px;
  color: #374151;
}
.customer-support-panel.hidden { display: none; }
.customer-support-inner { display: flex; flex-direction: column; gap: 10px; }
.customer-support-row {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.customer-support-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #6b7280;
}
.customer-support-value {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.customer-support-name { font-weight: 600; color: #111827; }
.customer-support-phone {
  color: #1d4ed8;
  font-weight: 500;
}
.customer-support-loading,
.customer-support-error {
  margin: 0;
  font-size: 12px;
  text-align: center;
}
.customer-support-error { color: #dc2626; }
.garage-invoices-bell {
  color: #dc2626;
  margin-left: 6px;
  font-size: 13px;
  line-height: 1;
  vertical-align: middle;
}
.garage-invoices-bell.hidden { display: none; }
#garageInvoicesButton.active {
  outline: 2px solid rgba(29, 78, 216, 0.35);
  outline-offset: 2px;
}
.garage-invoice-view {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.garage-invoice-view.hidden { display: none !important; }
.booking-info.invoice-mode {
  overflow: hidden !important;
  padding: 12px 8px 14px 8px;
}
.booking-info.invoice-mode .date-header,
.booking-info.invoice-mode .booking-count,
.booking-info.invoice-mode #slot-booking-list,
.booking-info.invoice-mode #add-form-section,
.booking-info.invoice-mode .enquiry-banner,
.booking-info.invoice-mode #slot-enquiry-banner,
.booking-info.invoice-mode #slot-voice-banner { display: none !important; }
.booking-info.invoice-mode .garage-invoice-view:not(.hidden) {
  display: flex;
}
#garage-invoice-detail:not(.has-selection),
#staff-invoice-detail:not(.has-selection) {
  display: none !important;
}

.invoice-pay-link, .invoice-pdf-link { color: #1d4ed8; font-weight: 600; text-decoration: none; }
.invoice-pay-link:hover, .invoice-pdf-link:hover { text-decoration: underline; }

/* customer_support invoice admin — split view */
body.staff-invoices-body > header {
  margin-bottom: 8px;
}
.staff-invoice-container {
  width: 100%;
  max-width: 600px;
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: row;
  gap: 4px;
  margin: 0 auto;
}
.staff-garage-side {
  flex: 0 0 38%;
  min-width: 200px;
  max-width: 38%;
  background: rgba(255, 255, 255, 1);
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
  padding: 12px;
  box-sizing: border-box;
  overflow: hidden;
  min-height: 0;
}
.staff-side-header h2 {
  margin: 0 0 4px;
  font-size: 14px;
  font-weight: 700;
  color: #111827;
}
.staff-user-label {
  margin: 0 0 8px;
  font-size: 11px;
  color: #6b7280;
}
.staff-garage-list {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.staff-garage-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  width: 100%;
  padding: 8px 10px;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  background: #fff;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  font-size: 12px;
  color: #111827;
}
.staff-garage-item:hover { background: #f9fafb; }
.staff-garage-item.selected {
  border-color: #3b82f6;
  background: rgba(59, 130, 246, 0.08);
}
.staff-garage-name { font-weight: 600; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.staff-garage-badge {
  flex-shrink: 0;
  background: #ef4444;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  border-radius: 999px;
  padding: 2px 6px;
  min-width: 18px;
  text-align: center;
}
.staff-side-actions { margin-top: 8px; padding-top: 8px; }
.staff-invoice-main {
  flex: 1;
  min-width: 0;
  min-height: 0;
  background: rgba(255, 255, 255, 1);
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.staff-invoice-panel {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  padding: 12px;
  box-sizing: border-box;
}
.staff-invoice-panel.hidden,
.staff-empty-state.hidden { display: none !important; }
.staff-empty-state {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #6b7280;
  font-size: 13px;
  padding: 16px;
}
.staff-panel-header {
  flex-shrink: 0;
  margin-bottom: 10px;
}
.staff-panel-header h2 {
  margin: 0 0 8px;
  font-size: 15px;
  font-weight: 700;
  color: #111827;
}
.staff-mode-toggle {
  display: flex;
  gap: 4px;
  background: #f3f4f6;
  border-radius: 8px;
  padding: 3px;
}
.staff-mode-btn {
  flex: 1;
  border: none;
  background: transparent;
  padding: 6px 4px;
  border-radius: 6px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  cursor: pointer;
  color: #6b7280;
  font-family: inherit;
}
.staff-mode-btn.active {
  background: #fff;
  color: #1d4ed8;
  box-shadow: 0 1px 2px rgba(0,0,0,0.06);
}
.staff-split-detail {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow: hidden;
}
.staff-invoice-list {
  flex: 0 0 auto;
  max-height: 120px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 4px;
  border-bottom: 1px solid #e5e7eb;
  padding-bottom: 8px;
}
.staff-invoice-item {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  padding: 8px 10px;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  background: #fff;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  font-size: 11px;
}
.staff-invoice-item.selected {
  border-color: #3b82f6;
  background: rgba(59, 130, 246, 0.06);
}
.staff-invoice-item-period { font-weight: 600; color: #111827; }
.staff-invoice-item-amount { color: #374151; white-space: nowrap; }
.staff-invoice-detail {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}
.staff-detail-inner { display: flex; flex-direction: column; gap: 10px; }
.staff-detail-meta p { margin: 0 0 4px; font-size: 12px; color: #374151; }
.staff-lines-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 11px;
}
.staff-lines-table th,
.staff-lines-table td {
  border: 1px solid #e5e7eb;
  padding: 6px 8px;
  text-align: left;
}
.staff-lines-table th { background: #f9fafb; font-weight: 700; color: #6b7280; }
.staff-detail-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: stretch;
}
.staff-detail-actions .action-button { width: 100%; }
.staff-detail-links { font-size: 11px; }
.staff-detail-links a { color: #1d4ed8; font-weight: 600; }
.staff-detail-msg { font-size: 12px; min-height: 16px; margin: 0; }
.staff-detail-msg--ok { color: #15803d; }
.staff-detail-msg--err { color: #dc2626; }
.staff-detail-placeholder,
.staff-loading,
.staff-empty { font-size: 12px; color: #9ca3af; margin: 0; text-align: center; padding: 8px; }
.staff-error { font-size: 12px; color: #dc2626; margin: 0; padding: 8px; }

.nnamo-dialog-form { display: none; margin-bottom: 12px; }
.nnamo-contact-field { display: flex; flex-direction: column; gap: 4px; margin-bottom: 10px; }
.nnamo-contact-field label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #6b7280;
}
.nnamo-contact-field input,
.nnamo-contact-field textarea {
  width: 100%;
  box-sizing: border-box;
  padding: 8px 10px;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  font-size: 14px;
  font-family: inherit;
  resize: vertical;
}
.nnamo-contact-error {
  margin: 0 0 4px;
  font-size: 12px;
  color: #dc2626;
}
.action-button:hover:not(:disabled) { transform: translateY(-1px); }
.action-button:disabled { opacity: 0.6; cursor: not-allowed; transform: none; }

.slot-create-row .action-button.primary.slot-create-btn-flex { flex: 1; width: auto; min-width: 0; }
.slot-garage-notes-input {
  width: 100%;
  box-sizing: border-box;
  font-family: inherit;
  font-size: 13px;
  padding: 8px;
  border-radius: 8px;
  border: 1px solid rgba(17, 21, 49, 0.2);
  resize: vertical;
  min-height: 64px;
}
.slot-create-spinner {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  flex-shrink: 0;
  background: conic-gradient(
    from 0deg,
    #ef4444,
    #f97316,
    #eab308,
    #22c55e,
    #3b82f6,
    #a855f7,
    #ef4444
  );
  animation: slot-create-spin 0.75s linear infinite;
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.85);
}
@keyframes slot-create-spin {
  to { transform: rotate(360deg); }
}

.booking-info {
  flex: 1;
  min-width: 250px;
  max-width: 60%;
  min-height: 0;
  background: rgba(255, 255, 255,1);
  border-radius: 20px;
  padding: 16px 8px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  overflow-y: auto;
  overflow-x: hidden;
}

/* Add-booking: scroll inside panel so scrollbar stays within rounded card */
.booking-info.add-mode {
  overflow: hidden !important;
  padding: 12px 8px 14px 8px;
}
.booking-info.add-mode #add-form-section:not(.hidden) {
  flex: 1 1 0;
  min-height: 0;
  max-height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  margin: 6px 2px 0 2px;
  padding: 4px 4px 12px 2px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  box-sizing: border-box;
  -webkit-overflow-scrolling: touch;
}

.date-header { display: flex; align-items: center; gap: 8px; margin-bottom: 16px; padding-bottom: 16px; border-bottom: 2px solid rgba(59, 130, 246, 0.1); }
.date-header h3 { margin: 0; color: #1a1a1a; font-weight: 600; font-size: 1.125rem; }
.settings-panel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 0.75rem;
}
.settings-panel-header h3,
.settings-logged-in {
  margin: 0;
  font-size: 1.17em;
  font-weight: bold;
  color: inherit;
}
.settings-logged-in { white-space: nowrap; }
.settings-btn { margin-left: auto; background: rgba(59, 130, 246, 0.15); border: 1px solid rgba(59, 130, 246, 0.3); border-radius: 8px; cursor: pointer; font-size: 1.1rem; padding: 6px 10px; color: #374151; }
.settings-btn:hover { background: rgba(59, 130, 246, 0.25); }
#selectedDate { color: #3b82f6; font-weight: 600; font-size: 0.75rem; }
#bookingCount { font-size: 0.75rem; color: #6b7280; margin: 0; }

.booking-list { margin: 0; padding: 0; width: 100%; max-width: 100%; flex-shrink: 0; overflow-x: hidden; }
.booking-info:not(.add-mode) .booking-list { flex: 1; min-height: 0; overflow-y: auto; }
.booking-info.add-mode .date-header,
.booking-info.add-mode .booking-count,
.booking-info.add-mode #slot-booking-list { display: none !important; }
/* Add booking: category title tight to Date row; field groups use same vertical rhythm as name/phone/vehicle */
.booking-info.add-mode .booking-form {
  margin-top: 0;
  gap: 10px;
}
.booking-info.add-mode .add-booking-category-title {
  margin-top: 0;
  margin-bottom: 2px;
  line-height: 1.25;
}
.booking-info.add-mode .booking-form > .form-row:first-of-type {
  margin-top: 0;
}
.booking-header {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 8px 0;
  border-bottom: 2px solid rgba(59, 130, 246, 0.1);
  font-weight: 700;
  color: #374151;
  font-size: 10px;
  text-transform: uppercase;
}
.booking-header-top {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 4px;
  align-items: center;
  min-width: 0;
}
.booking-header-time {
  text-align: center;
  font-size: 10px;
}
.booking-item {
  display: grid;
  grid-template-columns: 1fr;
  gap: 6px;
  padding: 8px 0;
  border-bottom: 1px solid rgba(15, 23, 42, 0.18);
  align-items: flex-start;
  cursor: pointer;
  min-height: 40px;
  min-width: 0;
  max-width: 100%;
}
.booking-item-top {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 4px;
  align-items: flex-start;
  min-width: 0;
}
/* Integrale slot list row 1: name (left) | reg + star (right, reg before star) */
.booking-item-row-primary {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-width: 0;
}
.booking-item-row-primary .booking-column.customer {
  grid-column: 1;
  justify-self: start;
  min-width: 0;
}
.booking-provide-vehicle-tag {
  grid-column: 2;
  justify-self: center;
  flex-shrink: 0;
  border: 1px solid #c4b5fd;
  background: #f5f3ff;
  color: #4c1d95;
  font-size: 10px;
  font-weight: 500;
  padding: 2px 8px;
  border-radius: 4px;
  line-height: 1.3;
}
.booking-item-row-primary-trailing {
  grid-column: 3;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  justify-self: end;
}
.booking-item-row-primary-trailing .booking-column.vehicle {
  text-align: right;
}
/* Row 2: narrow category (left) | slots use remaining width (right) */
.booking-item-meta-row {
  display: grid;
  grid-template-columns: minmax(0, 7.25rem) minmax(0, 1fr);
  column-gap: 4px;
  row-gap: 4px;
  align-items: center;
  width: 100%;
  min-width: 0;
}
.booking-category-sub {
  font-size: 11px;
  line-height: 1.25;
  color: #6b7280;
  font-weight: 400;
  min-width: 0;
  max-width: 7.25rem;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
/* TEST: star menu — remove .booking-test-star + .booking-test-menu when done */
.booking-time-row-wrap {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 2px;
  min-width: 0;
  width: 100%;
  justify-self: end;
}
/* Shrink-wrap times + align to end of cell — avoids full-width flex + flex-end “purple” gap */
.booking-item-meta-row .booking-time-row-wrap {
  width: max-content;
  max-width: 100%;
  min-width: 0;
  justify-self: end;
  justify-content: flex-start;
}
.booking-time-row-wrap .booking-time-row {
  flex: 0 1 auto;
  min-width: 0;
  width: auto;
  max-width: 100%;
}
/* Must follow generic rule: meta row needs wider slot strip + no wrap */
.booking-item-meta-row .booking-time-row-wrap .booking-time-row {
  flex: 0 0 auto;
  min-width: min(100%, max-content);
  max-width: 100%;
}
.booking-item-meta-row .booking-slot-col,
.booking-item-meta-row .booking-slot-sep {
  white-space: nowrap;
}
.booking-star-wrap {
  position: relative;
  flex-shrink: 0;
  line-height: 0;
}
button.booking-test-star {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 4px;
  background: rgba(234, 179, 8, 0.15);
  color: #ca8a04;
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
}
button.booking-test-star:hover {
  background: rgba(234, 179, 8, 0.28);
}
.booking-test-menu {
  position: absolute;
  right: 0;
  top: 100%;
  margin-top: 4px;
  min-width: 168px;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  z-index: 100;
  overflow: hidden;
}
.booking-test-menu-item {
  display: block;
  width: 100%;
  padding: 8px 12px;
  border: none;
  border-bottom: 1px solid #f3f4f6;
  background: #fff;
  text-align: left;
  font-size: 12px;
  color: #374151;
  cursor: pointer;
}
.booking-test-menu-item:last-child {
  border-bottom: none;
}
.booking-test-menu-item:hover {
  background: #f9fafb;
}
/* 1fr | auto | 1fr keeps "/" on the true horizontal centre; text hugs the sep via align */
.booking-time-row {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  column-gap: 4px;
  width: 100%;
  min-width: 0;
  color: #6b7280;
  font-size: 12px;
}
.booking-slot-col {
  min-width: 0;
}
.booking-slot-col--collection {
  text-align: right;
}
.booking-slot-col--return {
  text-align: left;
}
.booking-slot-sep {
  color: #9ca3af;
  font-weight: 500;
  flex-shrink: 0;
  text-align: center;
  justify-self: center;
  padding: 0 1px;
}
.add-booking-category-title {
  text-align: center;
  font-weight: 600;
  font-size: 15px;
  margin: 0 0 8px;
  color: #1e3a5f;
  line-height: 1.3;
}
.booking-type-heading {
  text-align: center;
  font-size: 16px;
  margin: 0 0 12px;
  color: #1e3a5f;
}
.booking-type-options {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.booking-type-option {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  font-size: 14px;
}
.booking-type-option input {
  width: 18px;
  height: 18px;
  accent-color: #2563eb;
}
.booking-item:hover { background: rgba(59, 130, 246, 0.05); }
.booking-column { overflow: visible; white-space: normal; color: #374151; font-size: 12px; }
.booking-column.customer { font-weight: 500; font-size: 13px; }
.booking-column.vehicle, .booking-column.time { color: #6b7280; }
.slot-time { font-weight: 600; }
.slot-date { font-size: 12px; color: #6b7280; }

.expandable-content { display: none; grid-column: 1 / -1; background: linear-gradient(135deg, rgba(59, 130, 246, 0.05) 0%, rgba(59, 130, 246, 0.02) 100%); padding: 6px; margin-top: 0; border-radius: 12px; width: 100%; max-width: 100%; min-width: 0; box-sizing: border-box; overflow-x: hidden; }
.expandable-content.expanded { display: flex; flex-direction: column; gap: 12px; }
.expandable-content, .expandable-content * { transition: none; }
.action-section, .job-status-section, .customer-phone-section { display: flex; align-items: center; gap: 8px; padding: 4px 0; }
.action-section label, .job-status-section label { min-width: 120px; font-weight: 500; color: #374151; }
.job-status-checkbox { cursor: pointer; width: 18px; height: 18px; accent-color: #3b82f6; }
.update-icon { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; background: rgba(59, 130, 246, 0.1); color: #3b82f6; border: none; cursor: pointer; }
.update-icon:hover { background: #3b82f6; color: white; transform: scale(1.1); }
.no-bookings { color: #9ca3af; font-style: italic; text-align: center; padding: 12px 16px; }

.enquiry-banner {
  background: #ff9800;
  color: #fff;
  padding: 12px 16px;
  border-radius: 12px;
  margin: 0 0 12px 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  box-shadow: 0 4px 12px rgba(255, 152, 0, 0.3);
  z-index: 1000;
  max-width: 100%;
  width: 100%;
  box-sizing: border-box;
}
.enquiry-banner.hidden { display: none !important; }
.enquiry-content {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1 1 220px;
  min-width: 0;
}
.enquiry-details {
  min-width: 0;
}
.enquiry-banner .enquiry-banner-btn {
  flex-shrink: 0;
  margin-left: auto;
}
.enquiry-title { font-weight: 700; font-size: 12px; text-transform: uppercase; }
.enquiry-info { font-size: 12px; opacity: 0.9; }
.fix-date-btn,
.enquiry-banner-btn { background: #fff; color: #e65100; border: none; padding: 6px 12px; border-radius: 6px; font-weight: 700; font-size: 12px; cursor: pointer; }
.fix-date-btn:hover,
.enquiry-banner-btn:hover { transform: translateY(-1px); }

.voice-banner {
  background: #1d4ed8;
  box-shadow: 0 4px 12px rgba(29, 78, 216, 0.35);
}
.voice-banner .voice-banner-title {
  text-transform: none;
  font-weight: 700;
  font-size: 13px;
}
.voice-banner-btn { color: #1d4ed8; }

.modal { position: fixed; inset: 0; background: rgba(0,0,0,0.45); display: flex; align-items: center; justify-content: center; z-index: 1000; }
.modal.hidden { display: none !important; }
.modal-content { background: #fff; padding: 16px; border-radius: 8px; max-width: 420px; box-shadow: 0 4px 12px rgba(0,0,0,0.2); }
.modal-content label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; margin-bottom: 8px; }
.modal-content input { padding: 8px; border: 1px solid #ccc; border-radius: 4px; }

.reward-container { margin-top: auto; padding: 12px 16px; background: rgba(255, 255, 255, 0.8); border-radius: 16px; border: 1px solid rgba(59, 130, 246, 0.1); display: flex; flex-direction: column; gap: 8px; }
.progress-bar-bg { height: 24px; background: #dbeafe; border-radius: 12px; overflow: hidden; }
.progress-bar-fill { height: 100%; background: linear-gradient(90deg, #3b82f6 0%, #2563eb 100%); width: 0%; transition: width 0.8s; }
.reward-labels { display: flex; justify-content: space-between; align-items: center; font-size: 12px; }
.reward-text { font-weight: 600; color: #1e3a8a; }
.reward-count { font-weight: 700; color: #374151; background: rgba(59, 130, 246, 0.1); padding: 2px 8px; border-radius: 10px; }

/* Slot picker (integrale:true) — add-booking flow; not inside .slot-reassign */
#slot-picker-wrap input.slot-weekday-flatpickr,
#slot-picker-wrap .flatpickr-alt-input,
#slot-picker-wrap .slot-selected-date-row input {
  flex: 0 0 6.75rem !important;
  width: 6.75rem !important;
  min-width: 6.75rem !important;
  max-width: 6.75rem !important;
  box-sizing: border-box;
}
#slot-picker-wrap .return-slot-row {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  min-width: 0;
}
#slot-picker-wrap .collection-slot-row {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  min-width: 0;
}
#slot-picker-wrap .collection-slot-row > h4,
#slot-picker-wrap .return-slot-row > h4 {
  margin: 0;
  text-transform: uppercase;
  font-size: 12px;
  color: #374151;
}
#slot-picker-wrap .slot-selected-date-row {
  margin: 0 0 4px 0;
  justify-content: flex-start;
  white-space: nowrap;
}
#slot-picker-wrap .slot-selected-date-row label {
  min-width: auto;
  text-align: left;
}
#slot-picker-wrap .slot-grid {
  width: 100%;
}
.booking-type-option.payment-option-disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.booking-type-option.payment-option-disabled input {
  pointer-events: none;
}

/* Addresses below slot rack (add booking) */
.slot-address-wrap {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
  margin-top: 8px;
}
.slot-address-wrap.hidden { display: none !important; }
.slot-address-wrap .booking-form { margin-top: 0; }

/* Slot picker (integrale:true) */
.slot-picker { margin-bottom: 8px; margin-top: 0; }
.slot-picker h4 { margin: 0 0 8px 0; font-size: 12px; color: #374151; text-transform: uppercase; }
.slot-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.slot-chip {
  padding: 8px 10px;
  border-radius: 14px;
  font-size: 11px;
  font-weight: 500;
  cursor: pointer;
  border: 1px solid #d1d5db;
  box-sizing: border-box;
  transition: background 0.15s, border-color 0.15s, color 0.15s, box-shadow 0.15s;
}
.slot-chip.available {
  background: #fff;
  color: #1d4ed8;
}
.slot-chip.available:hover:not(:disabled) {
  border-color: #94a3b8;
  background: #f8fafc;
}
.slot-chip.available.selected {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  color: #fff;
  border-color: #047857;
  box-shadow: none;
}
.slot-chip.available.selected:hover:not(:disabled) {
  background: linear-gradient(135deg, #0d9668 0%, #047857 100%);
  border-color: #065f46;
}
.slot-chip.full {
  background: #f3f4f6;
  color: #9ca3af;
  border-color: #e5e7eb;
  cursor: not-allowed;
}
.booking-form { display: flex; flex-direction: column; gap: 6px; margin-top: 16px; }
.booking-form label { font-weight: 500; font-size: 12px; color: #374151; }
.slot-enquiry-service-required-row .slot-service-required-display {
  margin: 0;
  font-size: 13px;
  color: #1e3a5f;
  line-height: 1.45;
  padding: 8px 10px;
  border-radius: 8px;
  background: rgba(59, 130, 246, 0.06);
  border: 1px solid rgba(59, 130, 246, 0.18);
}
.booking-form input, .booking-form select { padding: 8px 12px; border-radius: 6px; border: 1px solid #d1d5db; font-size: 14px; }
.booking-form .form-row { display: flex; flex-direction: column; gap: 2px; }
.booking-form .form-row.hidden { display: none; }
.slot-reassign { margin-top: 12px; padding-top: 12px; padding-bottom: 8px; border-top: 1px solid rgba(59, 130, 246, 0.15); width: 100%; max-width: 100%; min-width: 0; box-sizing: border-box; }
.slot-reassign .slot-reassign-grid { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 16px; row-gap: 10px; align-items: center; min-width: 0; }
.slot-reassign .slot-reassign-grid .label { text-align: left; font-weight: 500; color: #374151; }
.slot-reassign .slot-reassign-grid .value { text-align: right; display: flex; justify-content: flex-end; }
.slot-reassign .slot-section {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
/* Must override .slot-section { flex-direction: column } — same element has both classes */
.slot-reassign .slot-section.slot-actions-row {
  display: flex;
  flex-direction: row !important;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: nowrap;
  width: 100%;
  padding-left: 0;
  margin-left: 0;
  box-sizing: border-box;
}
.slot-reassign .vehicle-ready-label {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  padding: 0;
  flex: 1 1 auto;
  min-width: 0;
  font-size: 13px;
  cursor: pointer;
  justify-content: flex-start;
}
.slot-reassign .vehicle-ready-label input[type='checkbox'] {
  flex-shrink: 0;
  margin: 0;
}
.slot-reassign .vehicle-ready-text {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.slot-reassign .delete-booking-btn {
  flex: 0 0 auto;
  padding: 6px 8px;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-radius: 6px;
  border: 1px solid #fecaca;
  background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%);
  color: #b91c1c;
  cursor: pointer;
}
.slot-reassign .delete-booking-btn:hover:not(:disabled) {
  background: #fecaca;
  border-color: #f87171;
}
.slot-reassign .delete-booking-btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}
.slot-reassign .slot-label-row { font-weight: 500; color: #374151; font-size: 12px; }
.slot-reassign .slot-loading-hint { font-size: 12px; color: #6b7280; font-style: italic; }
.slot-reassign .slot-row {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  align-items: center;
  width: 100%;
  min-width: 0;
}
.slot-reassign .slot-date-input,
.slot-reassign .slot-time-select {
  padding: 6px 10px;
  font-size: 12px;
  border-radius: 4px;
  border: 1px solid #d1d5db;
  background: #fff;
  text-align: center;
}
.slot-reassign .slot-date-input:not(.slot-weekday-flatpickr) {
  flex: 0 0 5.75rem;
  max-width: 5.75rem;
  min-width: 5.75rem;
}
.slot-reassign select.slot-weekday-select {
  min-width: 200px;
  max-width: 100%;
  width: auto;
  text-align: left;
}
.slot-reassign .slot-time-select {
  flex: 1 1 auto;
  min-width: calc(110px + 1.5rem);
  max-width: 100%;
  cursor: pointer;
  text-align: left;
}
.slot-reassign .slot-date-input:hover,
.slot-reassign .slot-time-select:hover { border-color: #3b82f6; }
.slot-reassign .slot-save-row {
  display: none;
  align-items: center;
  gap: 10px;
  margin-top: 16px;
}
.slot-reassign .slot-save-row.visible { display: flex; }
.slot-reassign .slot-save-row .cta-attention-wrap { flex: 1; }
.slot-reassign .save-slots-btn { padding: 10px 20px; margin-top: 0; }
.slot-reassign .save-slots-btn.save-enabled:disabled { opacity: 0.5; cursor: not-allowed; }
.error { color: #ef4444; font-size: 12px; }
.slot-distance-check-heading {
  font-weight: 600;
  color: #1e3a5f;
  display: block;
  margin-bottom: 0;
}
.slot-distance-check-msg { font-size: 13px; }
.slot-distance-check-msg.success { color: #16a34a; }
.slot-distance-check-msg.error { color: #ef4444; }

/* ---------- Rider media panel (booking-media.js) ---------- */
.booking-media-section {
  margin-top: 10px;
  padding: 10px 12px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
}
.booking-media-header {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin: 0;
  padding: 0;
  background: none;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  text-align: left;
}
.booking-media-header:hover .booking-media-title { color: #1e293b; }
.booking-media-header:focus-visible {
  outline: 2px solid #3b82f6;
  outline-offset: 2px;
}
.booking-media-title {
  font-size: 12px;
  font-weight: 600;
  color: #334155;
  margin: 0;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.booking-media-chevron {
  flex-shrink: 0;
  font-size: 10px;
  color: #64748b;
  line-height: 1;
  transition: transform 0.15s ease;
}
.booking-media-section:not(.booking-media-section--collapsed) .booking-media-chevron {
  transform: rotate(180deg);
}
.booking-media-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 4px;
  margin-top: 8px;
  font-size: 13px;
  color: #334155;
}
/* [hidden] alone loses to display:grid above (same specificity); force hide when collapsed */
.booking-media-grid[hidden] {
  display: none !important;
}
.booking-media-grid .media-row {
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: space-between;
}
.booking-media-grid .media-label {
  font-weight: 500;
  color: #475569;
}
.booking-media-grid .media-value { display: inline-flex; align-items: center; gap: 8px; }
.booking-media-grid .media-yes { color: #047857; font-weight: 600; }
.booking-media-grid .media-no { color: #64748b; }
.booking-media-grid .media-error { color: #b91c1c; }
.booking-media-grid .media-download-btn {
  background: #1d4ed8;
  color: #fff;
  border: none;
  border-radius: 4px;
  padding: 3px 10px;
  font-size: 12px;
  cursor: pointer;
}
.booking-media-grid .media-download-btn:hover { background: #1e40af; }
.booking-media-grid .media-download-btn:disabled {
  opacity: 0.65;
  cursor: wait;
}

.slot-chip--transfer {
  border-style: dashed;
  font-size: 11px;
}