/* ═══════════════════════════════════════════════════════════════
   Sled Check-In — App-specific styles
   ═══════════════════════════════════════════════════════════════ */

/* Widen main for table layout */
.sled-main { max-width: 1400px; }

/* Override header-inner max-width */
.app-header .header-inner { max-width: 1400px; }

/* Date navigation bar */
.date-nav-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem;
}
.date-label {
  font-weight: 700;
  font-size: 1.5rem;
  color: var(--brand);
  margin-left: auto;
}

/* Table inputs */
.inp-small { width: 70px !important; display: inline-block !important; }

/* Note editing */
.note-cell { cursor: pointer; min-width: 120px; }
.note-cell:hover .note-display { background: var(--brand-light); border-radius: 4px; padding: 2px 4px; }
.add-note-hint { color: var(--text-muted); font-size: .8rem; font-style: italic; }
.note-edit textarea { min-height: 50px; font-size: .875rem; }
.note-actions { display: flex; gap: .4rem; margin-top: .3rem; }

/* Booking source badge for walk-ins */
.badge-walkin {
  display: inline-block;
  background: var(--warn-bg);
  color: var(--warn);
  border-radius: 4px;
  font-size: .7rem;
  font-weight: 700;
  padding: 1px 5px;
  vertical-align: middle;
}

/* State styling */
.state-returned td { color: var(--text-muted); }

/* Walk-in form layout */
#walkin-fields {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 1rem;
}
#walkin-fields .form-group {
  flex: 0 0 auto;
  min-width: 120px;
  margin-bottom: 0;
}
#walkin-fields .form-group.wide { min-width: 180px; }

/* No data message */
.no-data { text-align: center; color: var(--text-muted); padding: 2rem !important; font-style: italic; }

/* Tab button style (reuses shared .tab but tabs are <button> here) */
.tabs .tab {
  background: none;
  cursor: pointer;
}

/* Activity info copy */
.activity-info {
  background: var(--brand-light);
  color: var(--brand);
  padding: .5rem .75rem;
  border-radius: 4px;
  font-size: .875rem;
  margin-bottom: .75rem;
  display: none;
}

/* Booking ref link */
.ref-link, .booking-ref {
  text-transform: uppercase;
}
.ref-link {
  color: var(--brand);
  text-decoration: underline;
  font-weight: 600;
}
.ref-link:hover {
  color: var(--brand-dark, #004a6b);
}

/* Add Booking form actions */
.booking-actions {
  display: flex;
  gap: .75rem;
  margin-bottom: 1rem;
}

/* Price breakdown */
#booking-price-area {
  margin-top: .75rem;
}
.price-breakdown {
  background: var(--brand-light);
  border-radius: 6px;
  padding: .75rem 1rem;
  max-width: 400px;
}
.price-line {
  display: flex;
  justify-content: space-between;
  padding: .25rem 0;
  font-size: .9rem;
}
.price-line .price-amount {
  font-weight: 600;
  min-width: 80px;
  text-align: right;
}
.price-total {
  border-top: 2px solid var(--brand);
  margin-top: .25rem;
  padding-top: .5rem;
  font-weight: 700;
  font-size: 1rem;
}
.price-error {
  color: var(--danger);
  font-size: .9rem;
  padding: .5rem 0;
}
.form-control.field-error {
  border-color: var(--danger);
  box-shadow: 0 0 0 2px rgba(220, 53, 69, .18);
}

/* Edit booking modal */
.modal-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.45);
  z-index: 1000;
  display: flex; align-items: center; justify-content: center;
  padding: 1rem;
}
.modal-box {
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 8px 30px rgba(0,0,0,.2);
  width: 100%; max-width: 480px;
  max-height: 90vh;
  overflow-y: auto;
}
.modal-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--border);
}
.modal-title { margin: 0; font-size: 1.1rem; }
.modal-close {
  background: none; border: none; font-size: 1.5rem; cursor: pointer;
  color: var(--text-muted); line-height: 1; padding: 0;
}
.modal-close:hover { color: var(--text); }
.modal-body { padding: 1.25rem; }
.edit-fields {
  display: flex; flex-wrap: wrap; gap: .75rem;
}
.edit-fields .form-group { flex: 1 1 45%; min-width: 140px; margin-bottom: 0; }
#edit-ski-fields { flex: 1 1 100%; display: flex; flex-wrap: wrap; gap: .75rem; }
#edit-ski-fields .form-group { flex: 1 1 45%; min-width: 140px; margin-bottom: 0; }
.modal-actions { display: flex; gap: .75rem; }
.price-diff-note {
  font-size: .85rem;
  padding: .5rem .75rem;
  border-radius: 4px;
  margin-top: .5rem;
}
.price-diff-note--additional {
  background: var(--warn-bg); color: var(--warn);
  font-weight: 600;
}
.price-diff-note--none {
  background: var(--success-bg, #d1e7dd); color: var(--success, #0f5132);
}

/* Toboggan tab */
.tob-slot-header td {
  background: var(--brand-light);
  color: var(--brand);
  padding: .5rem .75rem !important;
  font-size: .9rem;
  border-bottom: 2px solid var(--brand);
}
.tob-status {
  display: inline-block;
  font-size: .75rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 4px;
}
.tob-arrived {
  background: var(--success-bg, #d1e7dd);
  color: var(--success, #0f5132);
}
.tob-not-arrived {
  background: var(--danger-bg, #f8d7da);
  color: var(--danger);
}

/* Expand/collapse toggle arrow */
.ev-toggle {
  display: inline-block;
  width: 1em;
  font-size: .85rem;
  color: var(--brand);
  margin-right: .25rem;
  transition: transform .15s;
}
.ev-row { user-select: none; }
.ev-row:hover { background: rgba(0,94,133,.04); }

/* Person detail rows */
.ev-person td {
  border-bottom: none !important;
}

/* Wide modal variant (move booking) */
.modal-box--wide { max-width: 720px; }

/* Day summary bar */
.day-summary {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  padding: .5rem .75rem;
  margin-bottom: .75rem;
  background: var(--brand-light);
  border-radius: 4px;
  font-size: .875rem;
  font-weight: 600;
}
.day-summary .summary-stat {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
}
.day-summary .summary-count {
  font-size: 1.1rem;
  font-weight: 700;
}
.day-summary .summary-label {
  color: var(--text-muted);
  font-weight: 500;
}
.day-summary .summary-arrived { color: var(--success, #0f5132); }
.day-summary .summary-outstanding { color: var(--danger); }

/* Late/overdue row highlighting */
tr.row-late > td {
  background: rgba(255, 193, 7, .12) !important;
}
tr.row-late > td:first-child {
  border-left: 3px solid #ffc107;
  padding-left: calc(2rem - 3px);
}

/* Bulk check-in checkbox */
.bulk-checkbox {
  width: 16px;
  height: 16px;
  cursor: pointer;
  accent-color: var(--brand);
  margin-right: .4rem;
}
/* Spacer to align refs when no checkbox is present */
.bulk-spacer {
  display: inline-block;
  width: calc(16px + .4rem);
}

/* Participant status badges (kit + course card) */
.ps-badge {
  display: inline-block;
  font-size: .65rem;
  font-weight: 700;
  padding: 1px 5px;
  border-radius: 3px;
  margin-left: .35rem;
  vertical-align: middle;
  text-transform: uppercase;
}
.ps-kit-issued   { background: var(--brand-light); color: var(--brand); }
.ps-kit-returned { background: var(--success-bg, #d1e7dd); color: var(--success, #0f5132); }
.ps-card-progress { background: var(--warn-bg); color: var(--warn); }
.ps-card-complete { background: var(--success-bg, #d1e7dd); color: var(--success, #0f5132); }

/* Bulk actions bar */
.bulk-actions {
  display: none;
  align-items: center;
  gap: .75rem;
  padding: .5rem .75rem;
  margin-bottom: .5rem;
  background: var(--warn-bg);
  border-radius: 4px;
  font-size: .875rem;
}
.bulk-actions.active { display: flex; }

/* Print button */
.btn-print {
  margin-left: auto;
  white-space: nowrap;
}

/* Search All panel */
.search-all-panel {
  position: absolute;
  right: 0;
  top: 100%;
  z-index: 500;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 6px;
  box-shadow: 0 4px 16px rgba(0,0,0,.15);
  width: 480px;
  max-height: 400px;
  overflow-y: auto;
  padding: .5rem 0;
}
.search-all-panel .sa-row {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .5rem 1rem;
  cursor: pointer;
  font-size: .875rem;
}
.search-all-panel .sa-row:hover {
  background: var(--brand-light);
}
.search-all-panel .sa-tab {
  font-size: .7rem;
  font-weight: 700;
  background: var(--brand-light);
  color: var(--brand);
  border-radius: 3px;
  padding: 1px 6px;
  white-space: nowrap;
}
.search-all-panel .sa-ref {
  font-weight: 600;
  text-transform: uppercase;
  color: var(--brand);
  min-width: 60px;
}
.search-all-panel .sa-name { flex: 1; }
.search-all-panel .sa-detail {
  color: var(--text-muted);
  font-size: .8rem;
}
.search-all-panel .sa-status {
  font-size: .7rem;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 3px;
}
.search-all-panel .sa-empty {
  text-align: center;
  color: var(--text-muted);
  padding: 1rem;
  font-style: italic;
}
.filter-bar { position: relative; }

/* Print header — hidden on screen, shown when printing */
.print-header {
  display: none;
  font-size: 1.1rem;
  margin-bottom: .75rem;
}

/* Print styles */
@media print {
  .app-header, .date-nav, .tabs, .filter-bar, .form-section,
  .modal-overlay, .btn-checkin, .btn-checkout, .btn-ev-checkin,
  .btn-ev-uncheck, .btn-ev-move, .btn-tob-checkin, .btn-tob-uncheck,
  .btn-tob-edit, .btn-edit-booking, .btn-move-select,
  .btn-show-empty, .btn-hide-empty, .bulk-checkbox,
  .bulk-actions, .btn-print, .search-all-panel, #activity-info {
    display: none !important;
  }
  .print-header {
    display: block !important;
  }
  .day-summary {
    background: none !important;
    border: 1px solid #ccc;
    print-color-adjust: exact;
    -webkit-print-color-adjust: exact;
  }
  .card {
    box-shadow: none !important;
    border: none !important;
  }
  .data-table th, .data-table td {
    border: 1px solid #ccc !important;
    padding: .3rem .5rem !important;
  }
  body { font-size: 11pt; }
  @page { margin: 1cm; }
}