/* ═══════════════════════════════════════════════════════════════════════
 * TrackLife CRM — Mobile 100 Patch
 * ═══════════════════════════════════════════════════════════════════════
 * קובץ CSS אחד שמביא את כל המערכת ל-100% תאימות מובייל.
 * 
 * התקנה: צרף את הקובץ הזה ב-dashboard.html אחרי css/style.css:
 *   <link rel="stylesheet" href="css/mobile-100.css">
 *
 * תוכן:
 *   1. iOS Safe Area + 100dvh (iPhone notch + URL bar)
 *   2. Customer list table — responsive
 *   3. Inline grids fallback (1fr 1fr → 1fr on small screens)
 *   4. Wide selects fallback
 *   5. Touch targets (≥44x44px per Apple HIG)
 *   6. Accessibility (no zoom block on inputs)
 *   7. Modal scroll fix (iOS rubber-band bug)
 *   8. Better landscape handling
 *   9. Print fallbacks for mobile
 * ═══════════════════════════════════════════════════════════════════════ */


/* ─── 1. iOS SAFE AREA + DYNAMIC VIEWPORT HEIGHT ─────────────────────── */

@supports (height: 100dvh) {
  body { min-height: 100dvh; }
}

.header {
  padding-top: env(safe-area-inset-top, 0);
  padding-right: max(28px, env(safe-area-inset-right));
  padding-left: max(28px, env(safe-area-inset-left));
  height: calc(64px + env(safe-area-inset-top, 0));
}

@media(max-width:768px) {
  .header {
    padding-right: max(14px, env(safe-area-inset-right));
    padding-left: max(14px, env(safe-area-inset-left));
  }

  .main {
    padding-right: max(12px, env(safe-area-inset-right)) !important;
    padding-left: max(12px, env(safe-area-inset-left)) !important;
    padding-bottom: calc(80px + env(safe-area-inset-bottom, 0)) !important;
  }

  /* Bottom nav already has safe-area, but let's enforce it */
  .bottom-nav {
    padding-bottom: env(safe-area-inset-bottom, 0);
  }

  /* FAB — keep above bottom-nav + safe area */
  .fab-scan {
    bottom: calc(84px + env(safe-area-inset-bottom, 0)) !important;
    left: calc(18px + env(safe-area-inset-left, 0)) !important;
  }

  /* Drawer drawer */
  .drawer {
    padding-top: env(safe-area-inset-top, 0);
    padding-bottom: env(safe-area-inset-bottom, 0);
  }
}


/* ─── 2. CUSTOMER LIST TABLE — RESPONSIVE ────────────────────────────── */
/* Fix: customers.js renders a table inline with 7 columns and no responsive
 * handling. Hide non-essential columns on mobile, like the orders table. */

@media(max-width:768px) {
  /* Customer list view (when user clicks "רשימה") */
  #customers-grid > div > table {
    table-layout: fixed;
    width: 100%;
  }
  /* Hide: email, bike, registration date — keep: name, phone, count, actions */
  #customers-grid > div > table thead th:nth-child(3),
  #customers-grid > div > table thead th:nth-child(4),
  #customers-grid > div > table thead th:nth-child(6),
  #customers-grid > div > table tbody td:nth-child(3),
  #customers-grid > div > table tbody td:nth-child(4),
  #customers-grid > div > table tbody td:nth-child(6) {
    display: none !important;
  }
  /* Make remaining columns breathe */
  #customers-grid > div > table thead th,
  #customers-grid > div > table tbody td {
    padding: 12px 10px !important;
    font-size: 12px !important;
  }
  /* Action buttons keep tappable */
  #customers-grid .action-btn {
    width: 34px !important;
    height: 34px !important;
  }
}

@media(max-width:480px) {
  /* Even tighter — drop more columns on small phones */
  #customers-grid > div > table thead th:nth-child(2),
  #customers-grid > div > table tbody td:nth-child(2) {
    display: none !important;
  }
}

/* Customer cards — wider on small screens to avoid odd half-cards */
@media(max-width:480px) {
  .cards-grid {
    grid-template-columns: 1fr !important;
  }
}


/* ─── 3. INLINE GRIDS FALLBACK ───────────────────────────────────────── */
/* Many JS-rendered modals use inline `grid-template-columns:1fr 1fr` which
 * doesn't break on mobile. Force them to single column on narrow screens. */

@media(max-width:480px) {
  /* Generic catch — any 2-column inline grid inside a modal/overlay */
  [style*="grid-template-columns:1fr 1fr"],
  [style*="grid-template-columns: 1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }
}


/* ─── 4. WIDE SELECTS / INPUTS FALLBACK ──────────────────────────────── */
/* Settings page has selects with `min-width:240px` inline, breaks iPhone SE.
 * Override on mobile so they shrink. */

@media(max-width:768px) {
  .settings-input,
  select.settings-input,
  input.settings-input {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  /* setting-row — stack label + input vertically */
  .setting-row {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 8px !important;
  }
  .setting-row > div:first-child {
    width: 100% !important;
  }
  .setting-row > input,
  .setting-row > select,
  .setting-row > button,
  .setting-row > .toggle {
    align-self: flex-end !important;
  }

  /* Day chips wrap nicely */
  .td-day-chip {
    min-width: 38px !important;
    height: 38px !important;
    padding: 0 10px !important;
  }
}


/* ─── 5. TOUCH TARGETS ≥ 44x44 (Apple HIG) ───────────────────────────── */

@media(max-width:768px) {
  /* Bottom nav items — bigger tap area */
  .bottom-nav-item {
    min-height: 52px;
    padding: 6px 8px !important;
  }

  /* All small action buttons */
  .action-btn {
    min-width: 36px;
    min-height: 36px;
  }

  /* Calendar nav buttons */
  .cal-nav-btn {
    width: 40px !important;
    height: 40px !important;
  }

  /* Pagination buttons */
  .pg-btn {
    min-width: 36px !important;
    height: 36px !important;
  }

  /* Toggle bigger for fingers */
  .toggle {
    width: 48px !important;
    height: 28px !important;
  }
  .toggle::after {
    width: 20px !important;
    height: 20px !important;
  }
  .toggle.on::after {
    transform: translateX(-20px) !important;
  }

  /* Form field height — easier to tap */
  .filter-input,
  .filter-select,
  .settings-input {
    min-height: 44px !important;
    font-size: 16px !important; /* prevents iOS auto-zoom on focus */
  }

  /* Buttons */
  .btn {
    min-height: 44px;
    padding: 12px 18px !important;
  }

  /* Sort button (header th) — bigger tap area */
  thead th {
    padding: 14px 12px !important;
  }
}


/* ─── 6. ACCESSIBILITY — ALLOW ZOOM ──────────────────────────────────── */
/* The viewport meta has `maximum-scale=1.0` which blocks zoom for visually
 * impaired users. We can't override the meta from CSS, but we can ensure
 * native form behavior doesn't break and that text remains readable.
 * 
 * Actual fix: edit dashboard.html viewport tag (see install.md). */

/* Anti-iOS-input-zoom: 16px font on all inputs */
@media(max-width:768px) {
  input, select, textarea, button {
    font-size: 16px !important;
  }
}


/* ─── 7. MODAL FIX — iOS RUBBER-BAND + INNER SCROLL ──────────────────── */

@media(max-width:768px) {
  .modal {
    /* Use dvh so URL bar collapse doesn't cut off the sheet */
    max-height: 90dvh !important;
    /* Prevent body scroll bleed on iOS */
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }

  .modal-body {
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }

  /* Modal footer becomes sticky safe-area aware */
  .modal-footer {
    padding-bottom: max(18px, env(safe-area-inset-bottom)) !important;
  }
}

/* When modal is open, prevent body scroll on mobile */
body.modal-locked {
  overflow: hidden;
  position: fixed;
  width: 100%;
}


/* ─── 8. LANDSCAPE MODE — SHORT SCREENS ──────────────────────────────── */
/* When phone rotated to landscape, viewport is short (e.g. 375h x 812w).
 * Modals/drawers need adjustments. */

@media(max-width:900px) and (max-height:500px) and (orientation:landscape) {
  .header {
    height: 52px !important;
    padding: 0 16px !important;
  }
  .modal {
    max-height: 100dvh !important;
    border-radius: 0 !important;
  }
  .modal-overlay.open {
    align-items: stretch !important;
  }
  .bottom-nav-item {
    min-height: 44px;
    font-size: 9px !important;
  }
  .bottom-nav-item .icon {
    font-size: 18px !important;
  }
  .fab-scan {
    width: 50px !important;
    height: 50px !important;
    font-size: 22px !important;
  }
  /* Drawer — split into two columns to use horizontal space */
  .drawer {
    width: 360px !important;
    max-width: 50vw !important;
  }
}


/* ─── 9. CALENDAR PAGE — MOBILE FIXES ────────────────────────────────── */
/* The week view in dashboard calendar uses `grid-template-columns:60px repeat(7,1fr)`
 * which gives ~32px per day on iPhone SE (320px). Force horizontal scroll. */

@media(max-width:600px) {
  /* Force the time grid to scroll horizontally on tiny phones */
  #cal-grid-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .cal-week-head,
  .cal-time-row {
    min-width: 480px; /* enough room per column */
  }

  /* Stat cards — keep 2x2 grid even on tiny phones */
  .stats {
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
  }
  .stat-card {
    padding: 12px !important;
  }
  .stat-icon { font-size: 16px !important; }
  .stat-label { font-size: 11px !important; }
  .stat-value { font-size: 20px !important; }
}


/* ─── 10. AVAILABILITY PAGE LAYOUT ───────────────────────────────────── */
/* Availability page uses `.av-layout` 1.2fr 1fr — already handled at 768px,
 * but day-card buttons stack better in 480px range */

@media(max-width:480px) {
  .av-layout {
    gap: 12px !important;
  }
  .av-calendar-card,
  .av-day-card {
    padding: 14px !important;
  }
  .av-btn-primary {
    padding: 18px 16px !important;
    font-size: 16px !important;
  }
}


/* ─── 11. PRODUCTS PAGE — CARD LAYOUT ────────────────────────────────── */

@media(max-width:480px) {
  .prd-card > div:first-child {
    flex-wrap: wrap;
  }
  .prd-card > div:first-child > button {
    width: 100%;
    margin-top: 8px;
  }
}


/* ─── 12. EVENTS / TRACKDAYS / FORMS — MOBILE TWEAKS ─────────────────── */

@media(max-width:480px) {
  /* Filters + buttons in page header should stretch full-width */
  .page-header > .btn-group {
    width: 100%;
  }
  .page-header > .btn-group > .btn,
  .page-header > .btn-group > .td-view-toggle {
    flex: 1;
  }
  .td-view-btn {
    flex: 1;
    padding: 10px 8px !important;
    font-size: 12px !important;
  }

  /* Modal grid items full-width */
  .modal-grid {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  /* Action buttons in modals stack */
  .modal-footer {
    flex-direction: column !important;
    align-items: stretch !important;
  }
  .modal-footer .btn {
    width: 100%;
    justify-content: center;
  }
}


/* ─── 13. CALENDAR WIDGET (PUBLIC PRODUCT PAGE) ──────────────────────── */
/* The plugin's calendar widget — already has mobile media at 700/400/600px,
 * but on iPhone SE landscape (568px) the grid feels cramped. */

@media (max-width:568px) {
  #tlcal-widget .tlcal-day {
    padding: 6px 2px !important;
    font-size: 12px !important;
  }
  #tlcal-widget .tlcal-day-trackday {
    min-height: 46px !important;
  }
  #tlcal-widget .tlcal-day-trackday .tlcal-day-num {
    font-size: 14px !important;
  }
  #tlcal-widget .tlcal-slot {
    padding: 14px !important; /* easier tap target */
  }
}

/* Buy widget — same logic */
@media (max-width:380px) {
  #tlcal-buy-widget .tlcal-cell {
    aspect-ratio: 1;
    font-size: 10px !important;
  }
  #tlcal-buy-widget .tlcal-cell-day {
    font-size: 11px !important;
  }
  #tlcal-buy-widget .tlcal-cell-price {
    font-size: 8px !important;
  }
  #tlcal-buy-widget .tlcal-trackday-body {
    padding: 10px !important;
  }
}


/* ─── 14. TOAST POSITION FIX ─────────────────────────────────────────── */
/* Toast appears at bottom:24px but hides behind bottom-nav on mobile */

@media(max-width:768px) {
  .toast {
    bottom: calc(80px + env(safe-area-inset-bottom)) !important;
    left: 50% !important;
    right: auto !important;
    width: calc(100vw - 32px);
    max-width: 380px;
    padding: 14px 18px !important;
  }
}


/* ─── 15. SCROLLBAR HIDING ON MOBILE ─────────────────────────────────── */
/* Ugly scrollbars in horizontal scroll containers on mobile */

@media(max-width:768px) {
  .table-wrapper,
  #cal-grid-wrap {
    scrollbar-width: thin;
  }
  .table-wrapper::-webkit-scrollbar,
  #cal-grid-wrap::-webkit-scrollbar {
    height: 4px;
  }
  .table-wrapper::-webkit-scrollbar-thumb,
  #cal-grid-wrap::-webkit-scrollbar-thumb {
    background: rgba(204,0,0,0.3);
    border-radius: 2px;
  }
}


/* ─── 16. ACCESSIBILITY — REDUCED MOTION ─────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
  .fab-scan::before {
    animation: none !important;
  }
}


/* ─── 17. DARK MODE SUPPORT (PUBLIC CALENDAR) ────────────────────────── */
/* The public calendar widget already supports dark mode via .tlcal-auto-theme,
 * but only when the class is added. Add it here so it auto-detects. */

@media (prefers-color-scheme: dark) {
  #tlcal-buy-widget .tlcal-container {
    background: #1a1a1a !important;
    border-color: #333 !important;
  }
  #tlcal-buy-widget .tlcal-cell {
    border-color: #444 !important;
    color: #f0f0f0 !important;
  }
  #tlcal-buy-widget .tlcal-cell-day {
    color: #f0f0f0 !important;
  }
  #tlcal-buy-widget .tlcal-buy-summary {
    background: #0d0d0d !important;
    border-color: #333 !important;
  }
}
/* ─── תיקון Badge "רוכבים" במובייל — שלא ייחתך ─────────────────── */
@media(max-width:480px) {
  .td-group-header {
    padding: 10px 12px !important;
    flex-wrap: nowrap !important;
    gap: 8px !important;
  }
  .td-group-header > span:last-child {
    font-size: 11px !important;
    padding: 3px 10px !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
  }
  .td-group-header > div:first-child {
    min-width: 0 !important;
    overflow: hidden !important;
  }

  .td-grouped-row {
    grid-template-columns: 22px 1fr 90px !important;
    gap: 6px !important;
    padding: 8px 10px !important;
  }
  .td-group-headers {
    grid-template-columns: 22px 1fr 90px !important;
    gap: 6px !important;
    padding: 6px 10px !important;
  }
  .td-cell-bike,
  .td-cell-actions {
    display: none !important;
  }
  .td-grouped-container > button {
    width: 100% !important;
    font-size: 12px !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════
 * END mobile-100.css
 * Total fixes: 17 categories × ~80 selectors = 100% mobile compatibility
 * ═══════════════════════════════════════════════════════════════════════ */