/* ═══ 43-MOBILE-PHASE3 ════════════════════════════════════════════
 * Phase 3 of the Mobile UI/UX overhaul: settings & business
 * operations.
 *
 * 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 page or component selectors. Loaded after 42-mobile-phase2
 * so it can win the cascade for the few overrides we add.
 *
 * Surfaces covered
 *   1. Settings sidebar nav — wrap-friendly chips on phones
 *   2. Settings save bar — stretch buttons on phones
 *   3. Booking rules / Kalender+ (.team-subnav, .card.cb forms)
 *   4. Team / Benutzer (.team-tbl, .team-shift-tbl, sub-nav)
 *   5. Services / treatments — already covered by Phase 1/2 modals
 *   6. Finance / calculator pages — 360 px tightening
 *   7. Analyse / Berichte — gcol2 stack, KPI grid, action bars
 *   8. Forms (.form-field-row, share-link, builder controls)
 *   9. Shop / Retail (.pshop-grid 360 px fallback, cat bar)
 *
 * Not in this phase:
 *   - Super Admin tables → cards (Phase 4)
 *   - Marketing module redesign (Phase 5)
 *   - Final polish & smoke test (Phase 6)
 * ═══════════════════════════════════════════════════════════════ */

/* ──────────────────────────────────────────────────────────────────
 * 1. SETTINGS SIDEBAR NAV
 *    04-layout.css turns the sidebar into a horizontal scroll strip
 *    at ≤900 px. On phones the user has to scroll the strip
 *    horizontally to find sections — clumsy. Replace the scroll with
 *    wrap-friendly chips at ≤640 px so every section title is
 *    visible without horizontal gestures. Keep the tablet (641–900)
 *    horizontal-scroll behaviour, which works well there.
 * ────────────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
  .set-sidebar {
    flex-wrap: wrap;
    overflow-x: visible;
    gap: 6px;
    padding: 8px;
  }
  .set-sidebar::-webkit-scrollbar { display: none; }
  .set-nav-item {
    flex: 0 1 auto;
    min-width: 0;
    padding: 8px 12px;
    font-size: 12px;
    min-height: 38px;
    border-radius: 8px;
  }
  .set-nav-item svg { width: 13px; height: 13px; }
}

/* ──────────────────────────────────────────────────────────────────
 * 2. SETTINGS SAVE BAR
 *    .set-save-bar is already mobile-padded by 04-layout.css. Make
 *    the buttons stretch to fill the bar on phones and let the save
 *    status line wrap above the buttons rather than cramming both
 *    into one row.
 * ────────────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
  .set-save-bar {
    flex-wrap: wrap;
    justify-content: stretch;
    gap: 8px;
  }
  .set-save-status {
    flex: 1 1 100%;
    margin-right: 0;
    margin-bottom: 4px;
    justify-content: center;
    text-align: center;
  }
  .set-save-bar .btn,
  .set-save-bar > button {
    flex: 1 1 0;
    min-width: 0;
    min-height: 44px;
  }
}

/* ──────────────────────────────────────────────────────────────────
 * 3. BOOKING RULES / KALENDER+ (settings-calplus-host)
 *    Cards are .card with .ch/.cb. Form rows use .g2 (collapses at
 *    ≤540 in 04-layout.css). The "Regeln speichern" button is in a
 *    flex row with justify-content: flex-end. Make the row stretch
 *    on phones and stick the button to full width so it never gets
 *    pushed off-screen by the safe-area inset.
 * ────────────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
  /* Sub-nav (Buchungsregeln · Ressourcen · Warteliste) — keep its
     horizontal-scroll behaviour from 20-team.css; just tighten paddings. */
  #settings-calplus-host .team-subnav,
  #page-kalenderplus .team-subnav {
    gap: 6px;
    padding: 4px 0 6px;
  }
  #settings-calplus-host .team-subbtn,
  #page-kalenderplus .team-subbtn {
    padding: 8px 12px;
    font-size: 12.5px;
    min-height: 38px;
  }
  /* Last action row (button on its own line) — make it full width */
  #settings-calplus-host > #calplus-pane > div[style*="justify-content:flex-end"],
  #page-kalenderplus > #calplus-pane > div[style*="justify-content:flex-end"] {
    justify-content: stretch !important;
  }
  #settings-calplus-host > #calplus-pane > div[style*="justify-content:flex-end"] .btn,
  #page-kalenderplus > #calplus-pane > div[style*="justify-content:flex-end"] .btn {
    width: 100%;
    min-height: 46px;
  }
  /* HomeBase warning + Sofortbuchung label readability */
  #s-homebase-warning .ibox { padding: 11px 12px; font-size: 12.5px; }
  #page-einstellungen label[onchange],
  #page-einstellungen label > input[type="checkbox"] + span {
    font-size: 13px;
    line-height: 1.5;
  }
}

/* ──────────────────────────────────────────────────────────────────
 * 4. TEAM / BENUTZER
 *    The team table (.team-tbl) is rendered inside .tscroll wrappers
 *    so horizontal scroll already works. Tighten cell padding and
 *    ensure the sub-nav chips remain reachable. Keep the shift table
 *    (.team-shift-tbl) as-is — it intentionally needs a wide grid
 *    so we let it scroll horizontally.
 * ────────────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
  /* Team list table cells: tighter padding, smaller font */
  .team-tbl th,
  .team-tbl td {
    padding: 8px 9px;
    font-size: 12.5px;
  }
  .team-member-name { font-size: 13px; }
  .team-member-sub { font-size: 11px; }
  .team-pill { font-size: 10px; padding: 2px 8px; }
  /* Subnav chips wrap-friendly */
  .team-subnav { gap: 6px; }
  .team-subbtn { padding: 8px 12px; font-size: 12.5px; min-height: 38px; }
  /* Clock widget: fit small phones */
  .team-clock-box { padding: 5px 9px; font-size: 11.5px; }
  .team-clock-name { font-size: 11.5px; }
  /* Timestrip cells */
  .team-ts-cell { min-width: 44px; padding: 5px 6px; }
  .team-ts-day { font-size: 9.5px; }
  /* Pay-run pills wrap inside tight cells */
  .team-tbl td .team-pill { white-space: nowrap; }
  /* Ensure the table parent allows horizontal scroll if not yet wrapped */
  #page-team .tscroll,
  #page-benutzer .tscroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
  }
}

/* ──────────────────────────────────────────────────────────────────
 * 5. FINANCE / CALCULATORS
 *    08-finance.css already covers ≤640 and ≤480. Add 360 px
 *    tightening so labels/values don't crush on a 320 px phone.
 *    Bar charts: shrink the label column further and let bars take
 *    more horizontal room.
 * ────────────────────────────────────────────────────────────────── */
@media (max-width: 360px) {
  .ber-bar-lbl { width: 44px; font-size: 9.5px; }
  .ber-bar-val { width: 40px; font-size: 9.5px; }
  .ber-kpi-grid { grid-template-columns: 1fr; gap: 6px; }
  .tax-row { flex-wrap: wrap; gap: 6px; padding: 6px 8px; }
  .fuel-strip { padding: 8px 10px; }
}

/* Zielrechner: ensure the sticky sidebar input cards don't lock up
   the layout when content is tall. Cards already stack via .gcol at
   ≤960 px, but the sticky behaviour can leave the form visually
   detached above the results on phones. Disable sticky on phone. */
@media (max-width: 640px) {
  #page-rechner .sticky { position: static !important; top: auto !important; }
  #page-rechner .gcol { gap: 10px; }
  #page-rechner .ch { flex-wrap: wrap; gap: 6px; }
  /* Big rechner table inside .tscroll — ensure horizontal scroll */
  #page-rechner .tscroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
}

/* ──────────────────────────────────────────────────────────────────
 * 6. ANALYSE / BERICHTE
 *    .gcol2 stacks at ≤960. Tighten KPI grid at ≤640 and ensure the
 *    action bar (PDF / Archivieren / month-year selects) wraps
 *    cleanly so the buttons remain reachable.
 * ────────────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
  #page-analyse .gcol2,
  #page-berichte .gcol2 { grid-template-columns: 1fr; gap: 10px; }
  #page-analyse .kgrid,
  #page-berichte .kgrid { grid-template-columns: 1fr 1fr; gap: 8px; }
  #page-analyse .ch,
  #page-berichte .ch { flex-wrap: wrap; gap: 6px; }
  #page-analyse .fb,
  #page-berichte .fb { flex-direction: column; align-items: stretch; gap: 8px; }
  #page-analyse .fb > div,
  #page-berichte .fb > div { flex-wrap: wrap; gap: 6px; }
  /* Month/year selects wider on phone for tap comfort */
  #analyse-month, #analyse-year,
  #analyse-month-v2, #analyse-year-v2 {
    flex: 1 1 calc(50% - 4px);
    min-width: 0;
    min-height: 38px;
  }
}
@media (max-width: 360px) {
  #page-analyse .kgrid,
  #page-berichte .kgrid { grid-template-columns: 1fr; }
}

/* ──────────────────────────────────────────────────────────────────
 * 7. FORMS BUILDER
 *    25-forms.css uses 620 px breakpoint; align to 640 and tighten
 *    on smaller phones. Builder canvas rows + share-link input.
 * ────────────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
  .form-field-row { gap: 6px; }
  /* Form builder modal toolbar: allow wrap */
  .cf-toolbar,
  .cf-builder-toolbar { flex-wrap: wrap; gap: 6px; }
  /* Submission cards / list — tighter padding */
  .cf-submission-card,
  .cf-sub-card { padding: 12px; }
}
@media (max-width: 360px) {
  .form-field-row { grid-template-columns: 1fr; }
  .form-field-type { font-size: 11.5px; }
}

/* ──────────────────────────────────────────────────────────────────
 * 8. SHOP / RETAIL
 *    29-online-shop.css collapses to 2 cols at ≤480. Add a 360 px
 *    fallback to 1 col so very narrow phones don't crush the cards.
 *    Tighten the category bar so chips fit comfortably.
 * ────────────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
  .pshop-cat-bar { gap: 6px; padding: 6px 0; flex-wrap: wrap; }
  .pshop-cat-btn { font-size: 12px; padding: 6px 12px; min-height: 36px; }
  .pshop-card-name { font-size: 13px; }
  .pshop-card-desc { font-size: 11.5px; }
  .pshop-card-price { font-size: 14px; }
}
@media (max-width: 360px) {
  .pshop-grid { grid-template-columns: 1fr; gap: 8px; }
  .pshop-card-img { aspect-ratio: 16 / 9; }
}

/* End 43-mobile-phase3.css */