/* ═══ 42-MOBILE-PHASE2 ════════════════════════════════════════════
 * Phase 2 of the Mobile UI/UX overhaul: highest-traffic user flows.
 *
 * EVERY rule in this file is scoped — no global selectors, no global
 * touch-action / pointer-events / tap-highlight / min-height-on-all-
 * inputs rules. Every block is wrapped in a media query and targets
 * specific surfaces only. Loaded LAST in the CSS chain so it wins
 * the cascade for the few overrides we need.
 *
 * Surfaces covered:
 *   1. Auth landing (#auth-landing) — 360 px tightening
 *   2. Tenant dashboard (.mb-dash, .mb-kpi-row) — KPI minmax
 *   3. Customers (.cust-search, .cgrid, .cstats, .ccard) — list/grid
 *   4. Calendar V1 (.cal-grid, .cwv-*) — horizontal-scroll fallback
 *      so the legacy month/week views never break the page layout.
 *      V2 (.cal2-*) needs no touch — it already stacks at 960 px.
 *   5. Booking wizard (.bk-nav, .bw-treat-grid, .bw-slot, .bw-day,
 *      .bw-daypick) — tap targets and grid collapse
 *   6. Profile / booking-page editor (.profil-wrap, .profil-editor)
 *      — stack on phone instead of overflowing horizontally
 *   7. Inbox (.inbox-layout) — 100vh → 100dvh fallback
 *   8. Onboarding (.onb-*) — 360 px tightening
 *
 * NOT in this phase (deferred to Phase 3+):
 *   - Settings sidebar nav, team/users, finance, shop, reports
 *   - Super Admin tables → cards
 *   - Marketing module
 * ═══════════════════════════════════════════════════════════════ */

/* ──────────────────────────────────────────────────────────────────
 * 1. AUTH LANDING (#auth-landing)
 *    Already collapses .al-left at 900 px and tightens form padding
 *    at 420 px (12-landing.css). Add 360 px tightening only.
 * ────────────────────────────────────────────────────────────────── */
@media (max-width: 360px) {
  #auth-landing .al-form-wrap { padding: 16px 14px; }
  #auth-landing .al-headline { font-size: 24px; }
  #auth-landing .al-sub { font-size: 13.5px; }
}

/* ──────────────────────────────────────────────────────────────────
 * 2. TENANT DASHBOARD (Modern + Klassik)
 *    33-mb-dashboard.css already collapses to 1 column at 768 px.
 *    Tighten KPI grid for 360 px (auto-fit minmax 165 px → 130 px).
 * ────────────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
  /* Klassik dashboard (#page-dashboard with v1) — KPI grid */
  .kgrid {
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)) !important;
    gap: 8px;
  }
  /* MB dashboard KPI row — already padded by 33-mb-dashboard.css */
  .mb-kpi-row { gap: 8px; padding-left: 14px; padding-right: 14px; }
  .mb-kpi { padding: 11px 12px; }
  .mb-kpi__value { font-size: 18px; }
  /* Dashboard CTA buttons should never crush the label below 360 px */
  .mb-dash__new-btn { min-height: 38px; }
}
@media (max-width: 360px) {
  .kgrid {
    grid-template-columns: 1fr 1fr !important;
    gap: 6px;
  }
}

/* ──────────────────────────────────────────────────────────────────
 * 3. CUSTOMERS (#page-kunden — Klassik .ccard / .cgrid)
 *    Existing 07-customers.css uses minmax(300px, 1fr) which clips
 *    on narrow phones, and the search has min-width:200 px which
 *    eats horizontal space inside the toolbar. Stats footer keeps
 *    3 columns on phone — squish the values.
 * ────────────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
  .cust-search { min-width: 0; flex: 1 1 100%; }
  .cust-toolbar { gap: 6px; padding: 8px 8px; }
  .cust-toolbar .cust-filter,
  .cust-toolbar .cust-sort { flex: 1 1 auto; }
  .cgrid {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  /* Card padding tighter on phone */
  .ccard .chead { padding: 12px 12px 8px; }
  .ccard .cmeta,
  .ccard .cacts { padding-left: 12px; padding-right: 12px; }
  /* 3-column stats footer becomes 2-column on phone, 3rd cell wraps */
  .cstats {
    grid-template-columns: 1fr 1fr;
    gap: 6px 0;
    padding: 9px 6px 11px;
  }
  .cstat-cell { padding: 4px 0; }
  .cstat-cell:nth-child(3) { grid-column: 1 / -1; border-top: 1px dashed var(--b1); padding-top: 6px; margin-top: 2px; }
  .cstat-cell:nth-child(3)::before { display: none; }
  /* Stats summary cards above the grid */
  .cust-stats { grid-template-columns: 1fr 1fr; gap: 8px; }
  .cust-stat { padding: 10px 11px; }
  .cust-stat-val { font-size: 15.5px; }
}
@media (max-width: 360px) {
  .cust-stats { grid-template-columns: 1fr; }
  .ccard .cacts { gap: 4px; }
}

/* ──────────────────────────────────────────────────────────────────
 * 4. CALENDAR V1 (.cal-grid / .cwv-*) — fallback wrap
 *    The legacy 7-column month grid and 50px+7×col week view break
 *    on mobile. We can't trivially force the v1 calendar JS to
 *    open day-view by default, so we wrap the grid in a horizontal
 *    scroll container at the CSS level: the grid renders at its
 *    natural width (~500 px minimum), the parent .page scrolls
 *    horizontally only inside this region, and the rest of the
 *    page keeps overflow:hidden. Day view (.cdv-*) is already
 *    vertical and unaffected.
 *
 *    Calendar V2 (.cal2-*) is fine — it stacks at 960 px in
 *    06-calendar.css and doesn't need help here.
 * ────────────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
  /* Toolbar should wrap and views should be reachable */
  .cal-toolbar {
    gap: 6px;
    flex-wrap: wrap;
  }
  .cal-views {
    flex: 1 1 100%;
    margin-top: 2px;
  }
  .cvbtn { padding: 8px 10px; min-height: 38px; }
  .cal-title { font-size: 14px; min-width: 0; flex: 1 1 auto; text-align: left; }

  /* Scroll container: the 7-col grid keeps its min width but doesn't
     break the page layout. Width 100vw - page-padding so it can be
     scrolled horizontally. */
  .cal-grid,
  .cwv-header,
  .cwv-body {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
  }
  /* The grid inside needs an explicit min-width so columns render */
  .cal-grid > .cal-dow-row,
  .cal-grid > .cal-week {
    min-width: 560px;
  }
  .cwv-header,
  .cwv-body {
    min-width: 540px;
  }
  /* Day cells slightly tighter to fit min-width */
  .cal-day { min-height: 76px; padding: 4px 4px; }
  .cday-num { font-size: 11.5px; }
  .apt-pill { font-size: 9.5px; padding: 2px 5px; }
}

/* ──────────────────────────────────────────────────────────────────
 * 5. BOOKING WIZARD (.bk-nav, .bw-*)
 *    Sticky public-booking nav has 28 px horizontal padding which
 *    leaves only 264 px of content space on a 320 px phone. Tap
 *    targets on slot pills and day-picker cells are below 44 px.
 *    Treatment grid auto-fills at 175 px and never explicitly
 *    becomes 1 column between 640 and 400 px.
 * ────────────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
  /* Sticky public-booking nav on phone */
  .bk-nav {
    padding: 10px 14px;
    padding-left: max(14px, env(safe-area-inset-left));
    padding-right: max(14px, env(safe-area-inset-right));
  }
  .bk-brand-icon { width: 32px; height: 32px; }
  .bk-brand-text { font-size: 15px; }
  .bk-login-btn { padding: 8px 12px; font-size: 12.5px; min-height: 38px; }

  /* Wizard hero — already uses clamp(), just trim padding */
  .bk-hero { padding: 36px 16px 22px; }
  .bk-hero-icon { width: 60px; height: 60px; margin-bottom: 14px; }
  .bk-hero-btn { padding: 13px 24px; font-size: 14px; min-height: 44px; }
  .bk-wizard-section { padding: 0 14px 60px; }

  /* Treatment grid: explicit 1 column on phones (no more squashed
     auto-fill cards). */
  .bw-treat-grid {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  /* Slot grid: ensure tap target ≥ 44 px on phone */
  .bw-slot {
    min-height: 44px;
    padding: 8px 6px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
  .bw-slot-t { font-size: 13.5px; }
  /* Day picker: enlarge tap area */
  .bw-day {
    padding: 10px 4px;
    min-height: 48px;
  }
  .bw-day-num { font-size: 13.5px; }
  /* Wizard card padding tighter */
  .bw-card { padding: 16px; }
  .bw-title { font-size: 16px; }
  /* Step bar can grow taller; ensure horizontal scroll if narrow */
  .bw-steps { gap: 0; padding: 4px 0 8px; }
  .bw-step-num { width: 26px; height: 26px; }
}
@media (max-width: 400px) {
  /* Slot grid ~ 3 columns at 360 px (80 px min) */
  .bw-slot-grid { grid-template-columns: repeat(3, 1fr); }
  /* Hero btn can wrap label */
  .bk-hero-btn { padding: 12px 18px; font-size: 13.5px; }
}

/* Public booking rejection / pending / error panels */
@media (max-width: 640px) {
  .bw-reject { padding: 28px 18px; }
  .bw-reject-ico { width: 64px; height: 64px; margin-bottom: 14px; }
  .bw-reject-title { font-size: 19px; }
  .bw-reject-sub { font-size: 13px; }
  .bw-reject-actions { flex-direction: column; }
  .bw-reject-actions .btn { width: 100%; }
}

/* ──────────────────────────────────────────────────────────────────
 * 6. PROFILE / BOOKING-PAGE EDITOR (.profil-wrap, .profil-editor)
 *    13-profil.css hard-codes the editor at 460 px wide with
 *    flex-shrink: 0, forcing horizontal overflow on a 320 px phone.
 *    Stack the editor + preview vertically below 900 px.
 * ────────────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .profil-wrap {
    flex-direction: column;
    height: auto;
    min-height: 0;
  }
  .profil-editor {
    width: 100% !important;
    flex-shrink: 1 !important;
    min-width: 0;
    max-height: none;
    border-right: none;
    border-bottom: 1px solid var(--b1);
  }
  .profil-editor + .bkp-wrapper,
  .profil-editor + * {
    width: 100%;
  }
}

/* ──────────────────────────────────────────────────────────────────
 * 7. INBOX (.inbox-layout) — 100vh → 100dvh
 *    26-inbox.css uses calc(100vh − N) which breaks under Safari's
 *    URL-bar collapse. Provide a 100dvh fallback inside @supports.
 * ────────────────────────────────────────────────────────────────── */
@supports (height: 100dvh) {
  .inbox-layout { height: calc(100dvh - 180px); }
  @media (max-width: 820px) {
    .inbox-layout { height: calc(100dvh - 160px); }
  }
  @media (max-width: 480px) {
    .inbox-layout { height: calc(100dvh - 140px); }
  }
}

/* ──────────────────────────────────────────────────────────────────
 * 8. ONBOARDING FUNNEL (.onb-*)
 *    40-onboarding-funnel.css already tightens at 540 px. Add a
 *    360 px squeeze and ensure CTA buttons reach 44 px on phone.
 * ────────────────────────────────────────────────────────────────── */
@media (max-width: 360px) {
  .onb-shell { padding: 14px 10px 32px; }
}
@media (max-width: 640px) {
  /* Generic onboarding step buttons — class names vary, scope by
     ancestor only. Avoid touching every <button> globally. */
  .onb-shell .btn,
  .onb-shell .btn-p,
  .onb-shell button[type="submit"],
  .onb-shell button[type="button"] {
    min-height: 44px;
  }
}

/* End 42-mobile-phase2.css */