/*
  global-responsive.css — CarServicesLTD
  Loaded on every page via header_blue.ejs.
  Closes the responsive gaps not covered by Bootstrap 4 or existing CSS.
  Breakpoints: 1200 → 992 → 768 → 576 → 480 → 375px
*/

/* ==========================================================
   1. BASE RESETS
   ========================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { overflow-x: hidden; -webkit-text-size-adjust: 100%; }
body { overflow-x: hidden; max-width: 100vw; }
img, video, iframe, embed, object, svg { max-width: 100%; }

/* ==========================================================
   2. iOS ZOOM PREVENTION
   Safari zooms in when an input's font-size < 16px.
   Force 16px on all form fields at mobile widths.
   ========================================================== */
@media (max-width: 768px) {
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="number"],
  input[type="tel"],
  input[type="search"],
  input[type="date"],
  input[type="time"],
  input[type="url"],
  textarea,
  select {
    font-size: 16px !important;
    /* keep line-height legible */
    line-height: 1.4;
  }
}

/* ==========================================================
   3. TOUCH TARGETS
   Apple HIG / Google Material minimum: 44 × 44 px.
   ========================================================== */
@media (max-width: 768px) {
  .btn,
  a.btn,
  button,
  [role="button"],
  .nav-link,
  .dropdown-item {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  /* Exception: icon-only buttons keep their natural size */
  .btn-icon,
  .pw-toggle,
  .search-close-btn,
  .search-clear-btn {
    min-height: unset;
    display: inline-flex;
  }
}

/* ==========================================================
   4. HEADER NAV
   Bootstrap 4's navbar-expand-md handles the collapse at 768px.
   We fix the remaining edge-cases below.
   ========================================================== */

/* Prevent horizontal scroll caused by the header.
   Never put overflow on .header-blue or .navbar — it would create a clipping context
   that hides absolutely-positioned dropdown menus extending below the header.
   Instead clip only the brand bar (no dropdowns live there). */
.top-brand-bar { overflow: hidden; }
.header-blue .navbar-brand,
.header-blue .navbar-nav { overflow: visible; }
.header-blue { overflow: visible; }

/* User-dropdown: slide up as a bottom sheet on small phones */
@media (max-width: 576px) {
  .header-blue .navbar .dropdown-menu.dropdown-menu-right {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    top: auto !important;
    bottom: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    border-radius: 16px 16px 0 0 !important;
    z-index: 99999 !important;
    max-height: 60vh;
    overflow-y: auto;
    border: none;
    box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.18);
    padding-bottom: env(safe-area-inset-bottom, 16px);
  }
  .header-blue .navbar .dropdown-item {
    padding: 0.9rem 1.25rem;
    font-size: 0.95rem;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
  }
}

/* Language dropdown: show icon only on very small screens to save space */
@media (max-width: 480px) {
  .lang-dropdown-btn .lang-text { display: none; }
  .lang-dropdown-btn { padding: 0.375rem 0.6rem; min-width: unset; }
  .lang-dropdown-wrapper { margin-right: 0.25rem; }
}

/* Top brand bar: slim on mobile */
@media (max-width: 576px) {
  .top-brand-bar {
    font-size: 0.8rem;
    padding: 4px 12px;
    letter-spacing: 0.5px;
  }
}

/* ==========================================================
   5. AUTH / LOGIN MODAL
   The modern-auth.css already handles mobile breakpoints for
   .modern-auth-modal and #loginModal. No overrides needed here.
   ========================================================== */

/* ==========================================================
   6. TABLES — ENFORCE HORIZONTAL SCROLL
   ========================================================== */
@media (max-width: 768px) {
  /* Any direct table inside a plain div gets wrapped scroll */
  .table-responsive { -webkit-overflow-scrolling: touch; }

  /* Kill fixed minimum widths that cause horizontal overflow */
  .table-responsive table,
  table.table,
  .data-table {
    min-width: 0;
  }
}

/* ==========================================================
   7. DASHBOARD PAGES
   Dashboard CSS already handles 768px collapse.
   These target the remaining gaps (480px and below).
   ========================================================== */

/* Sidebar: never wider than 88% of viewport when open on tiny phones */
@media (max-width: 480px) {
  .dashboard-page .sidebar {
    width: min(280px, 88vw) !important;
    max-width: 88vw !important;
  }
}

/* Stats grid: 2 columns on phones, 1 on very small phones */
@media (max-width: 576px) {
  .dashboard-page .stats-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 0.75rem !important;
  }
}
@media (max-width: 360px) {
  .dashboard-page .stats-grid {
    grid-template-columns: 1fr !important;
  }
}

/* Quick-action cards: reduce min-height on phones */
@media (max-width: 576px) {
  .dashboard-page .quick-action-card {
    min-height: 110px !important;
  }
}

/* Main content horizontal padding on very small phones */
@media (max-width: 400px) {
  .dashboard-page .main-content {
    padding-left: 0.625rem !important;
    padding-right: 0.625rem !important;
  }
}

/* ==========================================================
   8. BOOKING PAGE — ACCOUNT FOR SLIM SITE NAV (36px)
   The slim CARSERVICESLTD nav we added sits above the 70px
   booking-top-header. Content must clear both = 106px total.
   ========================================================== */
.booking-dashboard-body .booking-dashboard-layout,
.booking-dashboard-body .booking-primary-wrapper,
.booking-dashboard-body .booking-content {
  padding-top: 36px;
}

/* ==========================================================
   9. CARDS & GRIDS (content / listing pages)
   ========================================================== */

/* Responsive padding on card bodies */
@media (max-width: 576px) {
  .card-body { padding: 0.875rem 0.75rem; }
  .card { border-radius: 10px; }
}

/* Marketplace / vehicle hub grids: force 1-column on phones
   Targets inline-style grids using minmax(280px …) */
@media (max-width: 520px) {
  .posts-grid,
  .services-grid,
  .vehicles-grid,
  .listings-grid,
  .stores-grid {
    grid-template-columns: 1fr !important;
  }
}

/* Bootstrap row negative margins fix on mobile */
@media (max-width: 576px) {
  .row { margin-left: -8px; margin-right: -8px; }
  [class*="col-"] { padding-left: 8px; padding-right: 8px; }
}

/* ==========================================================
   10. TYPOGRAPHY SCALING
   ========================================================== */
@media (max-width: 576px) {
  h1:not([class*="display"]):not([style]) {
    font-size: clamp(1.3rem, 6vw, 1.8rem);
  }
  h2:not([class*="display"]):not([style]) {
    font-size: clamp(1.1rem, 5vw, 1.5rem);
  }
  h3:not([style]) {
    font-size: clamp(1rem, 4.5vw, 1.25rem);
  }
}

/* ==========================================================
   11. CONTAINER PADDING ON SMALL SCREENS
   ========================================================== */
@media (max-width: 480px) {
  .container,
  .container-fluid {
    padding-left: 12px;
    padding-right: 12px;
  }
}

/* ==========================================================
   12. FOOTER (if present) — ensure no overflow
   ========================================================== */
footer, .footer, .site-footer {
  max-width: 100vw;
  overflow-x: hidden;
}

/* ==========================================================
   13. ACCESSIBILITY
   ========================================================== */
/* Visible focus for keyboard / assistive tech users */
:focus-visible {
  outline: 2px solid #1a73e8;
  outline-offset: 3px;
  border-radius: 3px;
}

/* Respect reduced-motion preference */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Safe area insets for notched phones (iPhone X+) */
@supports (padding: env(safe-area-inset-left)) {
  body {
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
  }
  .dashboard-page .mobile-menu-toggle {
    bottom: calc(20px + env(safe-area-inset-bottom));
    left: calc(20px + env(safe-area-inset-left));
  }
}