/*
 * ProvideLabour — Responsive Layer
 * Mobile-first fixes across all 13 pages.
 *
 * Breakpoints (matching Tailwind defaults already used inline):
 *   Base       = 0px+     → phones (priority)
 *   sm         = 640px+
 *   md         = 768px+
 *   lg         = 1024px+
 *
 * Strategy: every fix here solves a CROSS-PAGE structural issue.
 * Page-specific overrides are at the bottom in clearly-labelled sections.
 */

/* ─── 1. SAFE AREA & SCROLL FOUNDATION ──────────────────────────────────────
   Prevents content hiding under the iOS home indicator or Android nav bar.
   Pages that already have pb-24 get a safe-area bonus on top of it.       */
:root {
  --sat: env(safe-area-inset-top, 0px);
  --sab: env(safe-area-inset-bottom, 0px);
  --sal: env(safe-area-inset-left, 0px);
  --sar: env(safe-area-inset-right, 0px);
}
body {
  /* Prevent ANY horizontal scroll — catches rogue overflowing elements
     site-wide without touching individual pages. */
  overflow-x: clip;
  /* iOS momentum scroll */
  -webkit-overflow-scrolling: touch;
}

/* ─── 2. TOUCH TARGET FLOOR ─────────────────────────────────────────────────
   Every tappable thing ≥44px tall on phones. Desktop untouched.            */
@media (max-width: 639px) {
  .btn-primary,
  .btn-outline,
  .btn-danger {
    min-height: 48px;
    padding: 13px 20px;
    font-size: .9375rem;
  }
  .btn-ghost {
    min-height: 44px;
    padding: 10px 14px;
  }
  .btn-sm {
    min-height: 40px !important;
    padding: 9px 16px !important;
    font-size: .8rem !important;
  }
  .form-input,
  .form-select {
    min-height: 50px;
    padding: 13px 15px;
    font-size: 1rem; /* prevents iOS zoom-on-focus */
  }
  textarea.form-input {
    min-height: 80px;
  }
  .pl-menu-trigger {
    width: 44px;
    height: 44px;
  }
  .toggle {
    width: 56px;
    height: 30px;
  }
  .toggle-slider::before {
    height: 24px;
    width: 24px;
  }
  .toggle input:checked + .toggle-slider::before {
    transform: translateX(26px);
  }
}

/* ─── 3. NAVIGATION ──────────────────────────────────────────────────────────
   Sticky nav: tighter horizontal padding on phones so logo + back button
   don't crowd. Already uses h-16 (64px) which is comfortable.              */
@media (max-width: 639px) {
  .sticky-nav .max-w-6xl,
  .sticky-nav .max-w-5xl,
  .sticky-nav .max-w-4xl,
  .sticky-nav .max-w-3xl,
  .sticky-nav .max-w-2xl {
    padding-left: 12px;
    padding-right: 12px;
  }
}

/* ─── 4. MODAL ───────────────────────────────────────────────────────────────
   Full-width sheet on phones; centered card on ≥640px.                      */
.modal-overlay {
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.modal-content {
  border-radius: 20px 20px 0 0;
  width: 100%;
  max-width: 100%;
  padding: 24px 16px calc(24px + var(--sab));
  max-height: 92vh;
  overflow-y: auto;
}
@media (min-width: 640px) {
  .modal-overlay {
    align-items: center;
    padding: 20px;
  }
  .modal-content {
    border-radius: 20px;
    max-width: 520px;
    padding: 28px 26px;
  }
}

/* ─── 5. CARDS ───────────────────────────────────────────────────────────────
   Stat cards: two-up grid on phones already works; ensure text doesn't clip */
.stat-card {
  word-break: break-word;
}
@media (max-width: 479px) {
  .stat-card {
    padding: 14px 14px;
  }
}

/* ─── 6. BOTTOM NAV ─────────────────────────────────────────────────────────
   Push above the home indicator; ensure tap targets ≥44px.                 */
.bottom-nav {
  padding-bottom: calc(8px + var(--sab));
}
.bottom-nav-item {
  min-height: 44px;
  padding: 6px 10px;
}

/* ─── 7. TAG / FILTER PILLS ─────────────────────────────────────────────────
   On phones the filter row must wrap or scroll — never overflow.            */
.filter-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
/* Scrollable pill rows (booking.html, worker.html filters) */
.filter-scroll {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding-bottom: 2px; /* prevent shadow clipping */
}
.filter-scroll::-webkit-scrollbar { display: none; }
.filter-scroll .tag { scroll-snap-align: start; flex-shrink: 0; }

@media (max-width: 639px) {
  .tag {
    font-size: .75rem;
    padding: 6px 12px;
    white-space: nowrap;
  }
}

/* ─── 8. ACTION BUTTONS (3-up grid on tracking.html) ────────────────────────
   3 columns is too cramped on phones < 360px; collapse to a 2+1 wrap.      */
.action-grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
@media (max-width: 359px) {
  .action-grid-3 {
    grid-template-columns: repeat(2, 1fr);
  }
  .action-grid-3 > :only-child,
  .action-grid-3 > :last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }
}

/* action-btn (tracking.html) — needs 44px minimum */
.action-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  padding: 12px 8px;
  min-height: 64px;
  background: #fff;
  border: 1.5px solid var(--border);
  border-radius: 14px;
  font-size: .75rem;
  font-weight: 700;
  color: var(--text-gray);
  cursor: pointer;
  text-decoration: none;
  transition: all .2s;
  font-family: 'Plus Jakarta Sans', sans-serif;
}
.action-btn i { font-size: 1.3rem; }
.action-btn:hover { background: var(--bg-light); border-color: var(--primary); }

/* ─── 9. STATUS PROGRESS BAR ────────────────────────────────────────────────
   tracking.html step dots + connecting lines; too small on phones.          */
.status-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.status-dot {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .8rem;
  border: 2.5px solid var(--border);
  background: #fff;
  transition: all .3s;
  flex-shrink: 0;
}
.status-dot.done  { background: var(--primary); border-color: var(--primary); color: #fff; }
.status-dot.active{ border-color: var(--primary); color: var(--primary); background: var(--primary-light); }
.status-dot.idle  { color: #94A3B8; }
.status-line {
  flex: 1;
  height: 2px;
  margin-bottom: 18px; /* align with dot centres */
  border-radius: 2px;
  transition: background .3s;
}
.status-line.done { background: var(--primary); }
.status-line.idle { background: var(--border); }

@media (max-width: 479px) {
  .status-dot { width: 30px; height: 30px; font-size: .7rem; }
}

/* ─── 10. MAP WRAP ───────────────────────────────────────────────────────────
   Less height on very short phones (iPhone SE = 667px viewport).            */
.map-wrap {
  width: 100%;
  height: 260px;
  position: relative;
  background: #e8eaed;
}
.map-wrap #map { width: 100%; height: 100%; }
.map-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f8fafc;
}
@media (min-width: 480px)  { .map-wrap { height: 300px; } }
@media (min-width: 640px)  { .map-wrap { height: 360px; } }
@media (min-width: 1024px) { .map-wrap { height: 420px; } }

/* ─── 11. ADMIN TABLE ────────────────────────────────────────────────────────
   Tables scroll horizontally inside their wrapper on phones. No data loss.  */
.table-scroll-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: 12px;
  border: 1px solid var(--border);
}
.admin-table {
  min-width: 600px; /* ensures columns don't collapse below readable width */
  font-size: .825rem;
}
@media (min-width: 1024px) {
  .admin-table { font-size: .875rem; min-width: unset; }
}

/* ─── 12. CHAT UI ───────────────────────────────────────────────────────────
   Input row can get very tight on narrow phones.                             */
@media (max-width: 479px) {
  .chat-input-wrap {
    font-size: .875rem;
  }
  .chat-bubble-me,
  .chat-bubble-other {
    font-size: .825rem;
    padding: 8px 11px;
    max-width: 88%;
  }
}

/* ─── 13. WORKER CARD (dashboard search results) ─────────────────────────────
   On very narrow phones the price + ETA row gets squeezed.                  */
@media (max-width: 479px) {
  .worker-card .price-row {
    flex-direction: column;
    gap: 4px;
  }
}

/* ─── 14. FORM LAYOUT GRID ───────────────────────────────────────────────────
   Two-column grids inside modals/forms collapse to single column on phones.  */
@media (max-width: 479px) {
  .form-grid-2 {
    grid-template-columns: 1fr !important;
  }
}

/* ─── 15. TYPOGRAPHY FLOOR ───────────────────────────────────────────────────
   Keeps text readable on small screens without bloating desktop sizes.       */
@media (max-width: 479px) {
  /* Hero heading on index.html */
  .hero-h1 { font-size: clamp(1.75rem, 6vw, 2.5rem) !important; }
  /* Section headings */
  .section-h2 { font-size: clamp(1.25rem, 5vw, 1.875rem) !important; }
}

/* ─── 16. LIVE PILL (tracking.html) ──────────────────────────────────────── */
.live-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: #FEF2F2;
  color: #DC2626;
  font-size: .65rem;
  font-weight: 800;
  padding: 3px 9px;
  border-radius: 20px;
  letter-spacing: .06em;
  font-family: 'Plus Jakarta Sans', sans-serif;
}
.live-dot {
  width: 6px;
  height: 6px;
  background: #EF4444;
  border-radius: 50%;
  animation: pulse-dot 1.4s infinite;
}

/* ─── 17. PAGE-SPECIFIC FIXES ────────────────────────────────────────────────

   17a. index.html
   The hero section ships two columns at md:. On phones the text can
   overflow the viewport if headings are too large or there's no horizontal
   padding. Clamp the font and guarantee padding.                            */
@media (max-width: 639px) {
  .hero-section {
    padding-left: 0;
    padding-right: 0;
  }
  /* The search input on the landing hero: prevent it from extending to the
     full browser width which clips the button on iOS. */
  .hero-search-row {
    flex-direction: column;
    gap: 10px;
  }
  .hero-search-row input { border-radius: 12px !important; }
  .hero-search-row button { border-radius: 12px !important; width: 100%; justify-content: center; }
}

/* 17b. Chat box — fixed height so the box stays the same size regardless
   of how many messages are loaded. Content scrolls inside; the box itself
   never grows or shrinks. Responsive breakpoints ensure it's comfortable
   on every device size without eating the full screen.

   IMPORTANT: do NOT use max-height here — that makes the box grow as
   messages load and then suddenly stop, which feels broken. A fixed
   height with overflow-y: auto is the correct WhatsApp/Telegram pattern.  */
.chat-box-wrap {
  height: 320px;          /* phones (≤479px) — comfortable, leaves room for input bar */
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
}
@media (min-width: 480px) {
  .chat-box-wrap { height: 380px; }   /* large phones / small tablets */
}
@media (min-width: 768px) {
  .chat-box-wrap { height: 420px; }   /* tablets — more room for the two-panel layout */
}
@media (min-width: 1024px) {
  .chat-box-wrap { height: 480px; }   /* desktop — generous, still leaves header + input bar visible */
}

/* 17c. worker.html — stat row + sidebar layout
   grid-cols-2 md:grid-cols-4 stat row: always fine (2 cols on phones).
   md:grid-cols-5 main layout: already single-column on phones via md: prefix.
   The commission warning banner can overflow on 320px phones; clamp it.     */
@media (max-width: 479px) {
  .wallet-warning {
    font-size: .8rem;
    flex-wrap: wrap;
  }
}

/* 17d. admin.html — sidebar collapses at md: already. Ensure the main
   content area (with margin-left for the sidebar) resets on mobile.         */
@media (max-width: 767px) {
  .admin-main {
    margin-left: 0 !important;
  }
}

/* 17e. tracking.html — action buttons (override the grid-cols-3 inline) */
@media (max-width: 639px) {
  .tracking-actions {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }
  /* If only 1 or 3 buttons, make lone button full-width */
  .tracking-actions > .action-btn:only-child {
    grid-column: 1 / -1;
  }
}

/* 17f. worker-booking-detail.html — call overlay full-screen on mobile   */
@media (max-width: 639px) {
  .call-overlay {
    padding: 20px 16px;
  }
  .call-btn {
    width: 72px;
    height: 72px;
    font-size: 1.7rem;
  }
}

/* 17g. payment.html — price breakdown row on very small phones            */
@media (max-width: 359px) {
  .price-breakdown-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }
}

/* ─── 18. REDUCED MOTION ──────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ─── 19. PRINT (for invoice PDF generation) ──────────────────────────────── */
@media print {
  .sticky-nav, .bottom-nav, .pl-menu-trigger,
  .btn-primary, .btn-outline, .btn-ghost,
  .call-overlay, .modal-overlay { display: none !important; }
  body { background: #fff !important; }
  .stat-card, .worker-card { box-shadow: none; border: 1px solid #ddd; }
}

/* ─── 20. SAFE AREA BOTTOM PADDING ──────────────────────────────────────────
   Every main content wrapper gets enough padding to clear the home
   indicator. Pages that don't have pb-24 get a fallback via this rule.
   The `: not()` avoids doubling up on pages that already have large bottom
   padding via Tailwind (pb-24 = 6rem = 96px, well above any indicator).    */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
  .max-w-2xl.py-8,
  .max-w-3xl.py-8,
  .max-w-3xl.py-5,
  .max-w-4xl.py-5,
  .max-w-6xl.py-8 {
    padding-bottom: calc(2rem + env(safe-area-inset-bottom, 0px));
  }
  .max-w-2xl.pb-10,
  .max-w-2xl.pb-12 {
    padding-bottom: calc(3rem + env(safe-area-inset-bottom, 0px));
  }
}

/* ─── 21. WORKER CARD — PHONE LAYOUT TIGHTENING ─────────────────────────── */
@media (max-width: 479px) {
  .worker-card .p-4 {
    padding: 14px;
  }
  /* Skill badge row wraps cleanly without overflowing */
  .worker-card .flex.flex-wrap {
    gap: 4px;
  }
  .badge-skill {
    font-size: .65rem;
    padding: 2px 7px;
  }
}

/* ─── 22. KYC STEPS PROGRESS BAR ─────────────────────────────────────────── */
@media (max-width: 479px) {
  /* The step label text is already hidden on phones via hidden sm:block.
     Shrink the connector lines so all steps fit on 375px. */
  .kyc-step-connector { width: 24px !important; }
}

/* ─── 23. LOGIN/REGISTER CARD ───────────────────────────────────────────── */
@media (max-width: 479px) {
  .auth-card { padding: 22px 18px !important; }
  .auth-card .space-y-4 > * + * { margin-top: 14px; }
}

/* ─── 24. BOOKING CARD ACTIONS ───────────────────────────────────────────── */
/* booking.html's per-booking action row — stacks on phones */
@media (max-width: 479px) {
  .booking-card-actions {
    flex-direction: column;
    align-items: stretch;
  }
  .booking-card-actions > * {
    justify-content: center;
    width: 100%;
  }
}

/* ─── 25. COMMISSION LOCK WARNING ────────────────────────────────────────── */
@media (max-width: 639px) {
  .commission-lock-strip {
    font-size: .8rem;
    padding: 10px 12px;
  }
}

/* ─── 20. SAFE AREA BOTTOM PADDING ────────────────────────────────────────── */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
  .max-w-2xl.pb-10,
  .max-w-2xl.pb-12,
  .max-w-3xl.pb-10 {
    padding-bottom: calc(3rem + env(safe-area-inset-bottom, 0px));
  }
}

/* ─── 21. WORKER CARD PHONE TIGHTENING ──────────────────────────────────── */
@media (max-width: 479px) {
  .badge-skill { font-size: .65rem; padding: 2px 7px; }
}

/* ─── 22. AUTH CARD ─────────────────────────────────────────────────────── */
@media (max-width: 479px) {
  .bg-white.rounded-2xl.p-7 { padding: 20px 16px; }
}

/* ─── 23. BOOKING CARD ACTION ROWS ──────────────────────────────────────── */
@media (max-width: 479px) {
  .booking-actions { flex-direction: column; }
  .booking-actions > * { width: 100%; justify-content: center; }
}

/* ─── ADMIN PANEL SPECIFIC ───────────────────────────────────────────────────

   26. Admin sidebar is hidden on phones (md:flex only). The main content
       must NOT have margin-left when the sidebar isn't showing.            */
@media (max-width: 767px) {
  .admin-main { margin-left: 0 !important; }
}

/* 27. Admin tables: min-width so columns don't collapse to unreadable.
       On md+ the column widths are self-regulating based on content.       */
.admin-table { width: 100%; border-collapse: collapse; min-width: 560px; }
@media (min-width: 768px) { .admin-table { min-width: unset; font-size: .875rem; } }

/* 28. Admin action button clusters inside table cells: shrink-to-fit and
       allow wrapping so long clusters don't force the row too wide.        */
.admin-table td .flex { flex-wrap: wrap; }
.admin-table .btn-sm { white-space: nowrap; }

/* 29. KYC document thumbnails: fixed height so all three thumbnails in the
       grid row stay the same height regardless of content.                 */
.kyc-doc-img {
  width: 100%;
  height: 96px;
  object-fit: cover;
  border-radius: 10px;
  border: 1px solid var(--border);
  transition: opacity .2s;
}
.kyc-doc-img:hover { opacity: .8; }
.kyc-doc-placeholder {
  width: 100%;
  height: 96px;
  background: var(--bg-light);
  border-radius: 10px;
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 30. Mobile drawer: slide in from the left, full tap target for nav items */
@media (max-width: 767px) {
  [x-data*="adminApp"] .sidebar-item {
    min-height: 44px;
  }
}

/* 31. Admin overview quick-action cards: on 320px phones the two columns
       in "KYC Pending" and "Recent Fraud" can crowd action buttons.
       Keep them as single column below 480px. */
@media (max-width: 479px) {
  .admin-overview-cards { grid-template-columns: 1fr !important; }
}

/* 32. Resolve Dispute modal outcome toggle buttons: equal width on phones */
@media (max-width: 479px) {
  .dispute-outcome-row { flex-direction: column; }
  .dispute-outcome-row .tag { width: 100%; justify-content: center; }
}