/* ============================================
   Responsive Media Queries
   Single source of truth for all breakpoints
   ============================================
   
   Breakpoints:
   - 768px  : Tablets and below (primary mobile breakpoint)
   - 640px  : Small tablets / large phones
   - 480px  : Small phones
   
   ============================================ */

/* ===============================
   Tablet & Below (max-width: 768px)
   =============================== */
@media (max-width: 768px) {
   /* --- Global Hamburger Nav Toggle --- */
   .hamburger {
      display: flex;
   }

   .header {
      position: relative;
      overflow: visible;
      z-index: 200;
   }

   .header .header-inner {
      flex-direction: row !important;
      align-items: center;
   }

   .header .nav {
      display: none;
      flex-direction: column;
      position: fixed;
      top: auto;
      left: 0;
      right: 0;
      background: var(--color-secondary);
      box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
      padding: 0.5rem 0;
      gap: 0;
      z-index: 300;
   }

   .header .nav.active {
      display: flex;
   }

   .header .nav a,
   .header .nav button {
      padding: 0.875rem 1.25rem;
      border-bottom: 1px solid rgba(255, 255, 255, 0.1);
      font-size: 1rem;
      width: 100%;
      text-align: left;
      color: var(--color-nav-text, var(--color-text-white)) !important;
      white-space: normal;
   }

   .header .nav a:last-child,
   .header .nav button:last-child {
      border-bottom: none;
   }

   .header .nav a:hover,
   .header .nav button:hover {
      background: rgba(255, 255, 255, 0.1);
   }

   .header .nav a.active {
      background: rgba(255, 255, 255, 0.15);
      font-weight: 600;
   }

   /* Reset button styles inside mobile nav */
   .header .nav .btn,
   .header .nav .btn.btn-primary,
   .header .nav .btn.btn-outline {
      background: none;
      border: none;
      border-bottom: 1px solid rgba(255, 255, 255, 0.1);
      border-radius: 0;
      color: var(--color-nav-text, var(--color-text-white)) !important;
      font-weight: 500;
      margin: 0;
      padding: 0.875rem 1.25rem;
      min-height: auto;
      box-shadow: none;
      text-align: left;
   }

   .header .nav .btn:last-child {
      border-bottom: none;
   }

   .header .nav .btn:hover {
      background: rgba(255, 255, 255, 0.1);
   }

   /* --- Landing Page Header (booking-header) --- */
   .booking-header {
      position: relative;
      overflow: visible;
      z-index: 200;
   }

   .booking-header .hamburger {
      display: flex;
   }

   .booking-header .nav {
      display: none;
      flex-direction: column;
      position: fixed;
      top: auto;
      left: 0;
      right: 0;
      background: var(--color-secondary);
      box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
      padding: 0.5rem 0;
      gap: 0;
      z-index: 300;
   }

   .booking-header .nav.active {
      display: flex;
   }

   .booking-header .nav a,
   .booking-header .nav button {
      padding: 0.875rem 1.25rem;
      border-bottom: 1px solid rgba(255, 255, 255, 0.1);
      font-size: 1rem;
      width: 100%;
      text-align: left;
      color: white !important;
      white-space: normal;
   }

   .booking-header .nav a:last-child,
   .booking-header .nav button:last-child {
      border-bottom: none;
   }

   .booking-header .nav a:hover,
   .booking-header .nav button:hover {
      background: rgba(255, 255, 255, 0.1);
   }

   .booking-header .nav .btn,
   .booking-header .nav .btn.btn-primary,
   .booking-header .nav .btn.btn-outline {
      background: none;
      border: none;
      border-bottom: 1px solid rgba(255, 255, 255, 0.1);
      border-radius: 0;
      color: white !important;
      font-weight: 500;
      margin: 0;
      padding: 0.875rem 1.25rem;
      min-height: auto;
      box-shadow: none;
      text-align: left;
   }

   .booking-header .nav .btn:last-child {
      border-bottom: none;
   }

   .booking-header .nav .btn:hover {
      background: rgba(255, 255, 255, 0.1);
   }

   /* --- Global Typography --- */
   h1 {
      font-size: 2rem;
   }

   h2 {
      font-size: 1.5rem;
   }

   .hero h1 {
      font-size: 2rem;
   }

   .hero p {
      font-size: 1rem;
   }

   /* --- Landing Page Hero --- */
   .landing-hero {
      padding: 2.5rem 0 2rem;
   }

   .landing-hero h1 {
      font-size: 2rem;
   }

   .landing-hero .subtitle {
      font-size: 1.05rem;
      padding: 0 var(--space-md);
   }

   .hero-cta-group .btn-hero {
      padding: 0.875rem 2rem;
      font-size: 1rem;
      width: 100%;
   }

   /* --- Coaching / Pricing Cards --- */
   .coaching-section {
      padding: 2.5rem 0;
   }

   .coaching-grid {
      grid-template-columns: 1fr;
      gap: 1.5rem;
      max-width: 500px;
   }

   .coaching-card:hover {
      transform: none;
   }

   .coaching-card-price .amount {
      font-size: 2.25rem;
   }

   /* --- Steps Section --- */
   .steps-section {
      padding: 2.5rem 0;
   }

   .steps-grid {
      grid-template-columns: 1fr;
      gap: 2rem;
   }

   .steps-grid::before {
      display: none;
   }

   .step-number {
      width: 4rem;
      height: 4rem;
      font-size: 1.5rem;
   }

   /* --- FAQ Section --- */
   .faq-section {
      padding: 2.5rem 0;
   }

   .faq-question {
      padding: 1rem 1.25rem;
      font-size: 0.95rem;
   }

   .faq-answer-inner {
      padding: 0 1.25rem 1rem;
   }

   /* --- Final CTA --- */
   .final-cta {
      padding: 2.5rem 0;
   }

   .final-cta h2 {
      font-size: 1.5rem;
   }

   .final-cta p {
      font-size: 1rem;
   }

   .final-cta .btn {
      padding: 0.875rem 2rem;
      font-size: 1rem;
      width: 100%;
      max-width: 320px;
   }

   /* --- Travel Note --- */
   .travel-note {
      flex-direction: column;
      padding: 1rem;
      margin-left: var(--space-md);
      margin-right: var(--space-md);
   }

   /* --- Tables --- */
   .table-scroll {
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
   }

   .data-table {
      min-width: 600px;
      font-size: 0.85rem;
   }

   .data-table th,
   .data-table td {
      padding: var(--space-sm) var(--space-md);
      white-space: nowrap;
   }

   .data-table th {
      font-size: 0.75rem;
   }

   /* --- Admin Bookings: Card layout on mobile --- */
   #bookingsTableWrap .data-table {
      min-width: 0;
      background: transparent;
   }

   #bookingsTableWrap .data-table thead {
      display: none;
   }

   #bookingsTableWrap .data-table,
   #bookingsTableWrap .data-table tbody {
      display: flex;
      flex-direction: column;
      gap: var(--space-md);
   }

   #bookingsTableWrap .data-table tr {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: var(--space-sm) var(--space-md);
      padding: var(--space-lg);
      border: 1px solid var(--color-border);
      border-radius: var(--radius-md);
      background: var(--color-bg-card);
      box-shadow: var(--shadow-sm);
      position: relative;
   }

   #bookingsTableWrap .data-table tr:hover {
      box-shadow: var(--shadow-md);
   }

   #bookingsTableWrap .data-table td {
      display: block;
      padding: 0;
      border-bottom: none;
      white-space: normal;
      min-width: 0;
   }

   /* Date column - full width */
   #bookingsTableWrap .data-table td:nth-child(1) {
      grid-column: 1 / -1;
      font-size: 0.95rem;
      padding-bottom: var(--space-xs);
   }

   /* Customer column */
   #bookingsTableWrap .data-table td:nth-child(2) {
      grid-column: 1 / -1;
      min-width: 0;
      padding-bottom: var(--space-xs);
   }

   /* Club column */
   #bookingsTableWrap .data-table td:nth-child(3) {
      font-size: 0.85rem;
      color: var(--color-text-light);
   }

   /* Type column */
   #bookingsTableWrap .data-table td:nth-child(4) {
      font-size: 0.85rem;
      text-align: right;
   }

   /* Status column */
   #bookingsTableWrap .data-table td:nth-child(5) {
      grid-column: 1 / -1;
   }

   /* Actions column */
   #bookingsTableWrap .data-table td:nth-child(6) {
      grid-column: 1 / -1;
   }

   /* Mobile data labels */
   #bookingsTableWrap .data-table td::before {
      display: none;
   }

   /* Action buttons in card layout */
   #bookingsTableWrap .booking-actions-grid {
      grid-template-columns: repeat(4, 1fr);
      gap: var(--space-sm);
   }

   /* --- Admin Invoices: Card layout on mobile --- */
   #invoicesTableWrap .data-table {
      min-width: 0;
      background: transparent;
   }

   #invoicesTableWrap .data-table thead {
      display: none;
   }

   #invoicesTableWrap .data-table,
   #invoicesTableWrap .data-table tbody {
      display: flex;
      flex-direction: column;
      gap: var(--space-md);
   }

   #invoicesTableWrap .data-table tr {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: var(--space-sm) var(--space-md);
      padding: var(--space-lg);
      border: 1px solid var(--color-border);
      border-radius: var(--radius-md);
      background: var(--color-bg-card);
      box-shadow: var(--shadow-sm);
   }

   #invoicesTableWrap .data-table tr:hover {
      box-shadow: var(--shadow-md);
   }

   #invoicesTableWrap .data-table td {
      display: block;
      padding: 0;
      border-bottom: none;
      white-space: normal;
      min-width: 0;
   }

   /* Invoice # - full width, acts as card header */
   #invoicesTableWrap .data-table td:nth-child(1) {
      grid-column: 1 / -1;
      font-size: 0.95rem;
      padding-bottom: var(--space-xs);
   }

   /* Customer - full width */
   #invoicesTableWrap .data-table td:nth-child(2) {
      grid-column: 1 / -1;
      min-width: 0;
      padding-bottom: var(--space-xs);
   }

   /* Amount */
   #invoicesTableWrap .data-table td:nth-child(3) {
      font-size: 0.85rem;
      text-align: right;
   }

   /* Paid */
   #invoicesTableWrap .data-table td:nth-child(4) {
      font-size: 0.85rem;
   }

   /* Balance */
   #invoicesTableWrap .data-table td:nth-child(5) {
      font-size: 0.85rem;
      text-align: right;
   }

   /* Status - full width */
   #invoicesTableWrap .data-table td:nth-child(6) {
      grid-column: 1 / -1;
   }

   /* Due date */
   #invoicesTableWrap .data-table td:nth-child(7) {
      font-size: 0.85rem;
      color: var(--color-text-light);
   }

   /* Actions - full width */
   #invoicesTableWrap .data-table td:nth-child(8) {
      grid-column: 1 / -1;
   }

   #invoicesTableWrap .table-actions {
      flex-wrap: wrap;
   }

   .invoice-action-row {
      width: 100%;
   }

   /* --- Admin Users: Card layout on mobile --- */
   #usersTableWrap .data-table {
      min-width: 0;
      background: transparent;
   }

   #usersTableWrap .data-table thead {
      display: none;
   }

   #usersTableWrap .data-table,
   #usersTableWrap .data-table tbody {
      display: flex;
      flex-direction: column;
      gap: var(--space-md);
   }

   #usersTableWrap .data-table tr {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: var(--space-sm) var(--space-md);
      padding: var(--space-lg);
      border: 1px solid var(--color-border);
      border-radius: var(--radius-md);
      background: var(--color-bg-card);
      box-shadow: var(--shadow-sm);
   }

   #usersTableWrap .data-table tr:hover {
      box-shadow: var(--shadow-md);
   }

   #usersTableWrap .data-table td {
      display: block;
      padding: 0;
      border-bottom: none;
      white-space: normal;
      min-width: 0;
   }

   /* User name - full width card header */
   #usersTableWrap .data-table td:nth-child(1) {
      grid-column: 1 / -1;
      font-size: 0.95rem;
      padding-bottom: var(--space-xs);
   }

   /* Contact - full width */
   #usersTableWrap .data-table td:nth-child(2) {
      grid-column: 1 / -1;
      padding-bottom: var(--space-xs);
   }

   /* Bookings */
   #usersTableWrap .data-table td:nth-child(3) {
      font-size: 0.85rem;
   }

   #usersTableWrap .data-table td:nth-child(3)::before {
      content: "Bookings: ";
      font-weight: 600;
      color: var(--color-text-muted);
      font-size: 0.75rem;
   }

   /* Total Paid */
   #usersTableWrap .data-table td:nth-child(4) {
      font-size: 0.85rem;
      text-align: right;
   }

   #usersTableWrap .data-table td:nth-child(4)::before {
      content: "Paid: ";
      font-weight: 600;
      color: var(--color-text-muted);
      font-size: 0.75rem;
   }

   /* Outstanding */
   #usersTableWrap .data-table td:nth-child(5) {
      grid-column: 1 / -1;
   }

   /* Last Booking */
   #usersTableWrap .data-table td:nth-child(6) {
      font-size: 0.85rem;
      color: var(--color-text-light);
   }

   #usersTableWrap .data-table td:nth-child(6)::before {
      content: "Last: ";
      font-weight: 600;
      color: var(--color-text-muted);
      font-size: 0.75rem;
   }

   /* Joined */
   #usersTableWrap .data-table td:nth-child(7) {
      font-size: 0.85rem;
      color: var(--color-text-light);
      text-align: right;
   }

   #usersTableWrap .data-table td:nth-child(7)::before {
      content: "Joined: ";
      font-weight: 600;
      color: var(--color-text-muted);
      font-size: 0.75rem;
   }

   /* --- Admin Facility Requests: Card layout on mobile --- */
   #facilityRequestsTableWrap .data-table {
      min-width: 0;
      background: transparent;
   }

   #facilityRequestsTableWrap .data-table thead {
      display: none;
   }

   #facilityRequestsTableWrap .data-table,
   #facilityRequestsTableWrap .data-table tbody {
      display: flex;
      flex-direction: column;
      gap: var(--space-md);
   }

   #facilityRequestsTableWrap .data-table tr {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: var(--space-sm) var(--space-md);
      padding: var(--space-lg);
      border: 1px solid var(--color-border);
      border-radius: var(--radius-md);
      background: var(--color-bg-card);
      box-shadow: var(--shadow-sm);
   }

   #facilityRequestsTableWrap .data-table tr:hover {
      box-shadow: var(--shadow-md);
   }

   #facilityRequestsTableWrap .data-table td {
      display: block;
      padding: 0;
      border-bottom: none;
      white-space: normal;
      min-width: 0;
   }

   /* Date */
   #facilityRequestsTableWrap .data-table td:nth-child(1) {
      font-size: 0.85rem;
      color: var(--color-text-light);
   }

   /* Customer - full width */
   #facilityRequestsTableWrap .data-table td:nth-child(2) {
      grid-column: 1 / -1;
      padding-bottom: var(--space-xs);
   }

   /* Facility */
   #facilityRequestsTableWrap .data-table td:nth-child(3) {
      font-size: 0.95rem;
   }

   /* Location */
   #facilityRequestsTableWrap .data-table td:nth-child(4) {
      font-size: 0.85rem;
      color: var(--color-text-light);
      text-align: right;
   }

   /* Status */
   #facilityRequestsTableWrap .data-table td:nth-child(5) {
      text-align: right;
   }

   /* Actions - full width */
   #facilityRequestsTableWrap .data-table td:nth-child(6) {
      grid-column: 1 / -1;
   }

   /* Summary dashboard responsive */
   .summary-dashboard {
      grid-template-columns: repeat(2, 1fr);
   }

   /* Settings page responsive */
   .form-grid-2col {
      grid-template-columns: 1fr;
   }

   .color-picker-grid {
      grid-template-columns: repeat(2, 1fr);
   }

   .policy-preview__header {
      flex-direction: column;
      gap: 0.25rem;
   }

   .policy-preview__subtitle {
      margin-left: 0;
   }

   .settings-field-card__input {
      margin-left: 0;
      width: 100%;
   }

   .settings-field-card__hint {
      margin-left: 0;
   }

   /* Form row stacking */
   .form-row-flex {
      flex-direction: column;
      gap: var(--space-sm);
   }

   .form-group--flex-sm {
      flex: 1;
   }

   /* Pending trip cards */
   .pending-trip-header {
      flex-direction: column;
      gap: var(--space-sm);
   }

   .pending-trip-total {
      text-align: left;
   }

   /* Trip detail tables */
   .trip-detail-table {
      font-size: 0.8rem;
   }

   .trip-detail-table th,
   .trip-detail-table td {
      padding: 0.25rem 0.25rem;
   }

   /* Reschedule grid: stack on mobile */
   .reschedule-grid {
      grid-template-columns: 1fr;
      gap: var(--space-sm);
   }

   .reschedule-grid .arrow {
      text-align: center;
      font-size: 1.25rem;
      transform: rotate(90deg);
   }

   /* Filter bar stacking */
   .filter-bar {
      flex-direction: column;
   }

   .filter-bar .form-group {
      width: 100%;
   }

   /* --- Forms --- */
   .flex.gap-md {
      flex-direction: column;
      gap: var(--space-md);
   }

   .form-group {
      width: 100%;
   }

   /* --- Buttons --- */
   .btn {
      padding: var(--space-md) var(--space-lg);
      font-size: 1rem;
      min-height: 44px;
   }

   .btn-sm {
      padding: var(--space-sm) var(--space-md);
      min-height: 36px;
   }

   /* --- Cards --- */
   .card {
      padding: var(--space-lg);
      margin-bottom: var(--space-lg);
   }

   .card-header {
      flex-direction: column;
      align-items: flex-start;
      gap: var(--space-md);
   }

   .card-header .flex {
      flex-direction: column;
      gap: var(--space-sm);
      align-items: stretch !important;
   }

   .card-header .btn {
      width: 100%;
   }

   /* --- Quick Actions --- */
   .flex.justify-between {
      flex-direction: column;
      gap: var(--space-md);
   }

   .flex.justify-between .btn {
      width: 100%;
   }

   /* --- Calendar (keep 7 columns) --- */
   .calendar-grid {
      grid-template-columns: repeat(7, 1fr) !important;
   }

   .calendar-day {
      min-height: 56px;
      padding: 2px;
      font-size: 0.85rem;
   }

   .calendar-day-number {
      font-size: 0.8rem;
   }

   .calendar-event {
      font-size: 0.65rem;
      padding: 1px 3px;
   }

   .calendar-header,
   .calendar-day-header {
      padding: var(--space-xs);
      font-size: 0.7rem;
      letter-spacing: 0;
   }

   /* --- Booking Items --- */
   .booking-item {
      flex-direction: column;
      text-align: center;
      gap: var(--space-md);
   }

   .booking-date-badge {
      width: 100%;
      padding: var(--space-sm);
   }

   .booking-details {
      width: 100%;
   }

   /* --- Grids --- */
   .stats-grid,
   [style*="grid-template-columns: 1fr 1fr"] {
      grid-template-columns: 1fr !important;
      gap: var(--space-md);
   }

   .stat-card {
      margin: 0;
   }

   .packages-grid,
   [class*="grid"]:not(.calendar-grid):not(.reschedule-calendar-grid):not(.coaching-grid):not(.steps-grid) {
      grid-template-columns: 1fr;
   }

   .invoice-meta {
      grid-template-columns: 1fr;
   }

   .schedule-grid {
      grid-template-columns: 1fr;
   }

   /* --- Modals --- */
   .modal {
      max-width: 100% !important;
      margin: 0;
      padding: var(--space-lg);
      max-height: 100vh;
      overflow-y: auto;
      border-radius: 0;
   }

   .modal-overlay {
      padding: 0;
   }

   .modal-header {
      margin-bottom: var(--space-md);
      padding-bottom: var(--space-md);
   }

   .form-row--two-col {
      grid-template-columns: 1fr;
   }

   /* --- Modal data-table: card layout --- */
   .modal .data-table {
      min-width: 0;
      background: transparent;
      box-shadow: none;
   }

   .modal .data-table thead {
      display: none;
   }

   .modal .data-table,
   .modal .data-table tbody {
      display: flex;
      flex-direction: column;
      gap: var(--space-sm);
   }

   .modal .data-table tr {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      gap: 0.25rem var(--space-md);
      padding: var(--space-md);
      border: 1px solid var(--color-border);
      border-radius: var(--radius-md);
      background: var(--color-bg-card);
   }

   .modal .data-table tr:hover {
      background: var(--color-bg-card);
   }

   .modal .data-table td {
      padding: 0.125rem 0;
      border-bottom: none;
      white-space: normal;
   }

   .modal .data-table td:first-child {
      grid-column: 1 / -1;
      font-weight: 600;
      font-size: 0.9rem;
   }

   .modal .data-table td:nth-child(2) {
      min-width: 0;
   }

   .modal .data-table td::before {
      content: attr(data-label);
      font-size: 0.7rem;
      color: var(--color-text-muted);
      text-transform: uppercase;
      letter-spacing: 0.5px;
      display: block;
   }

   .modal .data-table td:first-child::before {
      display: none;
   }

   /* --- Invoice Edit Line Items: card layout --- */
   .line-item-row {
      grid-template-columns: 1fr;
      gap: 0.5rem;
      padding: var(--space-md);
      margin-bottom: var(--space-md);
      border: 1px solid var(--color-border);
      border-radius: var(--radius-md);
   }

   /* Delete button becomes full-width at bottom */
   .line-item-row > div:last-child {
      grid-column: 1 / -1;
   }

   .line-item-row > div:last-child label {
      display: none;
   }

   .line-item-row .remove-btn {
      width: 100%;
      height: auto;
      padding: 0.5rem;
      font-size: 0.85rem;
      border-radius: var(--radius-md);
      background: transparent;
      color: var(--color-error);
      border: 1px solid var(--color-error);
   }

   .line-item-row .remove-btn::after {
      content: " Remove Item";
   }

   /* Modal date inputs: constrain width */
   .modal input[type="date"] {
      max-width: 220px;
   }

   /* Modal close button: larger touch target */
   .modal-close {
      font-size: 2rem;
      width: 44px;
      height: 44px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: var(--radius-md);
   }

   .modal-close:hover {
      background: var(--color-bg);
   }

   /* --- Containers --- */
   .container {
      padding: var(--space-md);
   }

   /* --- Empty State --- */
   .empty-state {
      padding: var(--space-xl);
   }

   .empty-state-icon {
      font-size: 2.5rem;
   }

   .empty-state p {
      font-size: 0.95rem;
   }

   /* --- Badges --- */
   .badge {
      font-size: 0.7rem;
      padding: var(--space-xs) var(--space-sm);
   }

   /* --- Flex Wrapping --- */
   .flex.gap-sm,
   .flex.gap-md {
      flex-wrap: wrap;
   }

   .flex[style*="flex-wrap: wrap"] {
      flex-direction: column;
   }

   .flex[style*="align-items: flex-end"] > * {
      align-items: stretch !important;
   }

   /* Card action buttons */
   .card .flex.gap-sm .btn,
   .card .flex.gap-md .btn {
      flex: 1;
      min-width: 0;
   }

   /* --- Form Inputs --- */
   .form-input,
   .form-select,
   .form-textarea {
      min-height: 44px;
      font-size: 16px; /* Prevents zoom on iOS */
   }

   /* --- Page Headers --- */
   .mb-xl.flex.justify-between {
      margin-bottom: var(--space-lg);
   }

   .mb-xl.flex.justify-between > div h1 {
      font-size: 1.75rem;
      margin-bottom: var(--space-xs);
   }

   .mb-xl.flex.justify-between > div p {
      font-size: 0.9rem;
   }

   /* --- Settings --- */
   [style*="grid-template-columns: 1fr 1fr"] {
      grid-template-columns: 1fr !important;
   }

   [style*="margin-left: 1.5rem"] {
      margin-left: 0 !important;
      width: 100% !important;
      margin-top: 0.5rem;
   }
}

/* ===============================
   Mid-range screens (769px - 1100px)
   =============================== */
@media (max-width: 1100px) and (min-width: 769px) {
   #invoicesTableWrap .data-table {
      font-size: 0.85rem;
   }
   #invoicesTableWrap .data-table td,
   #invoicesTableWrap .data-table th {
      padding: 8px 6px;
   }
   #invoicesTableWrap .btn {
      font-size: 0.75rem;
      padding: 4px 8px;
   }
}

/* ===============================
   Small Tablets / Large Phones (max-width: 640px)
   =============================== */
@media (max-width: 640px) {
   /* --- All Modals (small tablets / large phones) --- */
   .modal {
      padding: var(--space-md);
   }

   .modal-header h3 {
      font-size: 1.1rem;
   }

   /* --- Reschedule Modal --- */
   #rescheduleModal .modal-header {
      padding: 1rem 1.25rem;
   }

   #rescheduleModal #rescheduleModalContent {
      padding: 1.25rem;
   }

   .reschedule-actions {
      flex-direction: column;
   }

   #rescheduleDateHint {
      flex-wrap: wrap;
      gap: 0.5rem;
   }

   /* --- Payment Modal --- */
   #recordPaymentModal .modal-content {
      padding: 1.25rem;
   }

   .payment-invoice-info .invoice-details {
      grid-template-columns: 1fr;
   }

   #recordPaymentForm .payment-actions {
      flex-direction: column;
   }

   .payment-history-item {
      flex-direction: column;
      align-items: flex-start;
      gap: 0.5rem;
   }
}

/* ===============================
   Small Phones (max-width: 480px)
   =============================== */
@media (max-width: 480px) {
   /* --- Header --- */
   .header {
      padding: var(--space-sm);
   }

   .nav {
      gap: var(--space-xs);
   }

   .nav a {
      padding: var(--space-xs) var(--space-sm);
      font-size: 0.75rem;
   }

   /* --- Tables --- */
   .data-table {
      font-size: 0.75rem;
   }

   .data-table th,
   .data-table td {
      padding: var(--space-xs) var(--space-sm);
   }

   /* Admin bookings card layout on small phones */
   #bookingsTableWrap .data-table tr {
      padding: var(--space-sm) var(--space-md);
   }

   #bookingsTableWrap .booking-actions-grid {
      grid-template-columns: 1fr 1fr;
   }

   /* Admin invoices card layout on small phones */
   #invoicesTableWrap .data-table tr {
      padding: var(--space-sm) var(--space-md);
   }

   /* Admin users card layout on small phones */
   #usersTableWrap .data-table tr {
      padding: var(--space-sm) var(--space-md);
   }

   /* Admin facility requests on small phones */
   #facilityRequestsTableWrap .data-table tr {
      padding: var(--space-sm) var(--space-md);
   }

   .summary-dashboard {
      grid-template-columns: 1fr;
   }

   /* Trip detail table compact */
   .trip-detail-table {
      font-size: 0.75rem;
   }

   .pending-trip-total .amount {
      font-size: 1.1rem;
   }

   /* --- Buttons --- */
   .btn {
      font-size: 0.9rem;
      padding: var(--space-sm) var(--space-md);
   }

   /* --- Cards --- */
   .card {
      padding: var(--space-md);
   }

   /* --- Typography --- */
   h1 {
      font-size: 1.75rem;
   }

   h2 {
      font-size: 1.25rem;
   }

   /* --- Containers --- */
   .container {
      padding: var(--space-sm);
   }

   /* --- Stacked Flex --- */
   .flex.gap-sm,
   .flex.gap-md {
      flex-direction: column;
      width: 100%;
   }

   .flex.gap-sm .btn,
   .flex.gap-md .btn {
      width: 100%;
   }

   /* --- Stat Cards --- */
   .stat-number {
      font-size: 2rem;
   }

   .stat-label {
      font-size: 0.8rem;
   }

   /* --- Landing Page --- */
   .landing-hero {
      padding: 2rem 0 1.5rem;
   }

   .landing-hero h1 {
      font-size: 1.75rem;
   }

   .landing-hero .subtitle {
      font-size: 0.95rem;
   }

   .coaching-card-header h3 {
      font-size: 1.25rem;
   }

   .coaching-card-price .amount {
      font-size: 2rem;
   }

   .coaching-card-body {
      padding: 1rem;
   }

   .coaching-card-footer {
      padding: 0 1rem 1rem;
   }

   .step-number {
      width: 3.5rem;
      height: 3.5rem;
      font-size: 1.25rem;
   }

   .faq-question {
      padding: 0.875rem 1rem;
      font-size: 0.9rem;
   }

   .faq-answer-inner {
      padding: 0 1rem 0.875rem;
      font-size: 0.9rem;
   }

   .final-cta {
      padding: 2rem 0;
   }

   .final-cta h2 {
      font-size: 1.35rem;
   }

   .final-cta p {
      font-size: 0.9rem;
   }

   .travel-note {
      font-size: 0.85rem;
   }

   .travel-note p {
      font-size: 0.85rem;
   }

   .section-header h2 {
      font-size: 1.5rem;
   }

   .section-header p {
      font-size: 0.9rem;
   }
}

/* ===============================
   Print Styles
   =============================== */
@media print {
   .header,
   .footer,
   .btn,
   .nav,
   .hamburger {
      display: none !important;
   }

   .printable-schedule {
      padding: 0;
   }

   .schedule-grid {
      page-break-inside: avoid;
   }
}