/*
 * parlour_responsive.css — Phase 2 §18 mobile responsiveness
 * for the EXTERNAL_PARTNER parlour portal.
 *
 * Brief: "Mobile is the PRIMARY surface for parlour reps. Don't ship
 * the desktop version first and 'make it work on mobile later'."
 *
 * Why a single dedicated file instead of @media blocks scattered across
 * each component .js:
 *
 *   1. The 6 parlour components (parlour_portal_shell, parlour_dashboard,
 *      parlour_claim_list, parlour_claim_detail, parlour_documents,
 *      parlour_notify_form) build their DOM in vanilla JS with INLINE
 *      styles (Object.assign(node.style, ...)). Inline styles win the
 *      cascade vs a stylesheet — so the desktop inline values would
 *      always defeat a plain `.pp-sidebar { ... }` rule.
 *
 *      Two options to override:
 *        (a) refactor every component to drop inline styles in favour
 *            of classnames — multi-thousand-line refactor across 6
 *            files, breaks the inline-style contract every existing
 *            test asserts against, and ships the largest possible diff
 *            for UAT.
 *        (b) use !important inside @media blocks to override the inline
 *            desktop defaults at the breakpoint. CSS specificity:
 *            inline = 1000, !important beats inline regardless of
 *            specificity. This is the standard responsive-override
 *            pattern when retro-fitting mobile onto an existing
 *            inline-styled component.
 *
 *      We use (b). It keeps the diff minimal (this single CSS file)
 *      and leaves the component .js files almost untouched, which
 *      minimises merge conflicts with the 4 in-flight agent streams
 *      also touching dashboard_ui (notification-templates admin,
 *      time-log UI, partner-org wizard, bulk-intake UI).
 *
 *   2. Single discoverable file — anyone wanting to know "what does
 *      the parlour look like on a phone" reads this one file rather
 *      than greppping across six component .js files for @media.
 *
 *   3. Easy to bump the cache version in index.html (one href, not six).
 *
 * Breakpoints (per Phase 2 §18 + DEV_BRIEF §4):
 *
 *   max-width: 920px   — "mobile" arrangement. Sidebar collapses to
 *                        bottom-nav. KPIs vertical-stacked. Recent
 *                        claims become a card list (not a <table>).
 *                        Filters that don't fit become a bottom-sheet
 *                        (the components ALREADY have this pattern at
 *                        their internal 480px threshold; we widen the
 *                        trigger to 920px here via class force).
 *
 *   max-width: 480px   — "small phone" — tighter padding, hide the
 *                        org-name text alongside the logo, smaller
 *                        headings, single-column KPIs.
 *
 *   320px              — must not horizontally scroll at this width
 *                        (iPhone SE / smallest viewport we support).
 *                        No explicit @media rule needed if we ensure
 *                        every fixed-width container uses max-width:
 *                        100% under 480px.
 *
 * Accessibility (WCAG 2.1 AA):
 *
 *   * Tap targets ≥ 44 x 44 CSS px (Apple HIG + Material). Enforced
 *     here at the breakpoint via min-height + min-width on every
 *     interactive selector.
 *   * Bottom-stuck elements (submit bar, bottom nav) use
 *     padding-bottom: env(safe-area-inset-bottom) so they don't get
 *     hidden behind the iOS home indicator.
 *   * Horizontal chip scrollers preserve keyboard focus order — the
 *     scroll snap is overflow:auto, not a JS-managed carousel.
 *   * prefers-reduced-motion respected — sticky positioning has no
 *     transition.
 *
 * Insurer-side admin surfaces (the 10-tab PlatformA shell rendered
 * under body:not(.parlour-shell)) are explicitly DESKTOP-ONLY by
 * design and intentionally NOT styled here.
 */

/* ── 920px mobile breakpoint ──────────────────────────────────────── */

@media (max-width: 920px) {

  /* ── ParlourPortalShell — bottom-nav layout ────────────────────── */

  /* Top bar: keep, but shrink padding so the logo + org name + user
     menu fit on a 320px viewport. */
  body.parlour-shell .pp-topbar {
    padding: 8px 12px !important;
    /* Sticky top so it's always visible when scrolling a long claim
       detail. Same idea as the iOS app pattern. */
    position: sticky !important;
    top: 0 !important;
    z-index: 50;
    /* Defend against iOS notch on landscape — the topbar may butt
       against the status bar. */
    padding-top: max(8px, env(safe-area-inset-top, 0px)) !important;
  }
  body.parlour-shell .pp-org-logo {
    height: 24px !important;
    max-width: 120px !important;
  }
  body.parlour-shell .pp-user-menu-btn {
    /* WCAG 2.1 AA — tap target ≥ 44px. */
    min-height: 44px !important;
    min-width: 44px !important;
  }

  /* The body row goes column-down so the sidebar drops below the
     main panel and we render it as a bottom-nav strip. */
  body.parlour-shell .pp-body {
    display: flex !important;
    flex-direction: column !important;
    /* Subtract the topbar (49px) AND the eventual bottom nav (60px)
       from the min-height calc so internal scrollables size correctly.
       We do this with CSS calc rather than JS-measured because the
       topbar height is fixed by the inline padding above. */
    min-height: calc(100vh - 49px) !important;
  }

  /* Sidebar becomes a fixed bottom-nav strip, NOT a drawer/hamburger.
     Brief §18: "Tab bar at bottom, not hamburger nav. Parlour staff
     don't have time to navigate a tree." */
  body.parlour-shell .pp-sidebar {
    /* Position sticky over the main scroll area instead of taking
       layout space. */
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    height: auto !important;
    border-right: none !important;
    border-top: 1px solid var(--silver-strong, #7A7A7A) !important;
    background: white !important;
    z-index: 40;
    /* Safe-area-inset for iOS home indicator — the nav strip would
       sit behind the indicator otherwise. */
    padding-bottom: env(safe-area-inset-bottom, 0px) !important;
  }
  body.parlour-shell .pp-nav {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    justify-content: space-around !important;
    align-items: stretch !important;
    padding: 4px 0 !important;
    flex: 0 0 auto !important;
  }
  body.parlour-shell .pp-nav-item {
    flex: 1 1 0 !important;
    text-align: center !important;
    /* WCAG tap target. */
    min-height: 56px !important;
    padding: 8px 4px !important;
    font-size: 12px !important;
    margin: 0 !important;
    border-radius: 0 !important;
    /* Wrap long labels — "My policies" fits 2 lines on narrow
       phones. */
    white-space: normal !important;
    line-height: 1.2 !important;
  }
  /* Hide the "Powered by PlatformA" attribution on phone — the
     bottom-nav reclaims that space. Brief shows attribution as
     compact "powered by" line in the top bar instead; we drop it
     entirely on phone to avoid clutter. */
  body.parlour-shell .pp-attribution {
    display: none !important;
  }

  /* Main panel needs bottom-padding so the bottom-nav doesn't
     overlap the last row of content. 60px nav + safe-area inset.
     Topbar sticky already accounted for by the natural document
     flow. */
  body.parlour-shell #pp-main-panel {
    padding: 16px !important;
    /* 60px = approx bottom-nav height (56px tap target + 4px padding). */
    padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px)) !important;
    overflow-x: hidden !important;
  }

  /* ── ParlourDashboard — vertical KPI stack + card-list claims ── */

  body.parlour-shell .pp-kpi-strip {
    flex-direction: column !important;
    gap: 8px !important;
  }
  body.parlour-shell .pp-kpi-card {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    width: 100% !important;
    padding: 14px 16px !important;
  }
  /* Notify-claim CTA — full-width primary button on phone instead of
     right-aligned float. The button itself remains the existing
     <button class="btn btn-primary">; we just stretch its container. */
  body.parlour-shell .pp-notify-cta {
    justify-content: stretch !important;
    width: 100% !important;
  }
  body.parlour-shell .pp-notify-cta button {
    width: 100% !important;
    min-height: 48px !important;
  }

  /* Recent claims: the <table> stays semantically a table for
     screen readers (accessibility — preserves the column header
     announcements), but we re-flow it visually as a card list.
     Strategy: `display:block` on the table parts. */
  body.parlour-shell .pp-recent-claims table,
  body.parlour-shell .pp-recent-claims thead,
  body.parlour-shell .pp-recent-claims tbody,
  body.parlour-shell .pp-recent-claims tr,
  body.parlour-shell .pp-recent-claims td {
    display: block !important;
    width: 100% !important;
  }
  /* Visually hide the thead while keeping it for screen readers
     (sr-only pattern). */
  body.parlour-shell .pp-recent-claims thead {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
  }
  body.parlour-shell .pp-recent-claims tbody tr {
    background: white !important;
    border: 1px solid var(--silver-strong, #7A7A7A) !important;
    border-radius: var(--radius-card, 12px) !important;
    padding: 12px 14px !important;
    margin-bottom: 8px !important;
    min-height: 56px !important;
  }
  body.parlour-shell .pp-recent-claims tbody td {
    padding: 4px 0 !important;
    border-top: none !important;
    text-align: left !important;
  }

  /* ── ParlourClaimList — chip row scrollable, filters bottom-sheet ── */

  /* Force the chip group into a horizontally scrollable strip when
     there are more chips than fit. Components were authored with the
     480px threshold; we extend the wider-than-fit pattern to 920px so
     iPad-portrait and small-tablet widths also benefit. */
  body.parlour-shell .pcl-chip-group {
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: visible !important;
    -webkit-overflow-scrolling: touch !important;
    /* Prevent the row's content from forcing the page to scroll
       horizontally — only THIS strip scrolls. */
    max-width: 100% !important;
    /* Hide scrollbar visually but keep keyboard scroll. */
    scrollbar-width: thin;
  }
  body.parlour-shell .pcl-chip {
    flex-shrink: 0 !important;
  }
  /* Header (title + count) reflows to two lines on narrow screens. */
  body.parlour-shell .pcl-header {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 4px !important;
  }
  /* Claim row grid: drop the third "date" column on phone — date
     moves under the customer name for a denser stack. */
  body.parlour-shell .pcl-row {
    grid-template-columns: minmax(0, 1fr) auto !important;
    grid-template-areas:
      "num  status"
      "name status"
      "date status" !important;
    column-gap: 8px !important;
    row-gap: 2px !important;
    padding: 12px 14px !important;
    min-height: 64px !important;
  }
  body.parlour-shell .pcl-row > :nth-child(1) { grid-area: num; }
  body.parlour-shell .pcl-row > :nth-child(2) { grid-area: name; }
  body.parlour-shell .pcl-row > :nth-child(3) { grid-area: date; }
  body.parlour-shell .pcl-row > :nth-child(4) {
    grid-area: status;
    align-self: center !important;
  }

  /* ── ParlourClaimDetail — tab strip horizontally scrollable ────── */

  body.parlour-shell .pcd-tab-bar {
    overflow-x: auto !important;
    overflow-y: visible !important;
    -webkit-overflow-scrolling: touch !important;
    flex-wrap: nowrap !important;
    max-width: 100% !important;
    border-bottom: none !important;
  }
  body.parlour-shell .pcd-tab {
    flex-shrink: 0 !important;
    min-height: 44px !important;
    margin: 0 4px 0 0 !important;
  }
  /* Two-column key-value pairs collapse to one column on phone. */
  body.parlour-shell .pcd-kv-row {
    grid-template-columns: 1fr !important;
    gap: 4px !important;
  }
  body.parlour-shell .pcd-overview {
    padding: 0 !important;
  }
  /* Back button: ensure 44px tap height. */
  body.parlour-shell .pcd-back-btn {
    min-height: 44px !important;
    min-width: 44px !important;
  }
  /* Title row stays readable on narrow widths — shrink title type. */
  body.parlour-shell .pcd-title-row h1,
  body.parlour-shell .pcd-title-row h2 {
    font-size: 20px !important;
    line-height: 1.2 !important;
  }
  /* Document rows in the docs panel — card-list style like the main
     list. */
  body.parlour-shell .pcd-doc-row {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 8px !important;
    padding: 12px 14px !important;
  }
  body.parlour-shell .pcd-doc-row button,
  body.parlour-shell .pcd-doc-row a {
    min-height: 44px !important;
  }

  /* ── ParlourDocuments — chip row + filters bottom-sheet ────────── */

  body.parlour-shell .pd-chip-group,
  body.parlour-shell .pd-doctype-chip-group {
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: visible !important;
    -webkit-overflow-scrolling: touch !important;
    max-width: 100% !important;
  }
  body.parlour-shell .pd-chip,
  body.parlour-shell .pd-doctype-chip {
    flex-shrink: 0 !important;
    min-height: 44px !important;
  }
  body.parlour-shell .pd-header {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 4px !important;
  }
  body.parlour-shell .pd-row {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 8px !important;
    padding: 12px 14px !important;
    min-height: 64px !important;
  }
  body.parlour-shell .pd-upload-trigger {
    width: 100% !important;
    min-height: 48px !important;
  }

  /* ── ParlourNotifyForm — sticky bottom-action bar + tap targets ── */

  /* Sticky bottom-action bar at the viewport's bottom edge. The
     component already conditionally sets position:sticky when its
     own getBreakpoint() returns 'phone' (at the 480px threshold).
     We extend that behaviour to 920px so iPads in portrait also get
     the sticky bar (which is the standard mobile pattern). The
     !important here loses to inline only when the JS sets it; since
     the JS sets `static` for desktop and `sticky` for phone, we
     force sticky at our wider breakpoint regardless of JS opinion. */
  body.parlour-shell .pnf-submit-bar {
    position: sticky !important;
    bottom: 0 !important;
    /* Account for iOS home indicator. */
    padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px)) !important;
    /* The shell's bottom-nav will sit beneath — add extra clearance
       so the submit button isn't hidden behind it. The submit bar's
       sticky positioning happens INSIDE the scrollable form area,
       not at the viewport edge, so the bottom-nav (which is fixed)
       still sits below the form on the z-axis. The actual visual
       order, top-to-bottom: form content → submit bar → bottom-nav.
       To avoid overlap, push the submit bar up by the bottom-nav
       height (60px) when on phone. */
    margin-bottom: calc(60px + env(safe-area-inset-bottom, 0px)) !important;
    z-index: 30;
  }
  body.parlour-shell .pnf-submit-bar button {
    min-height: 56px !important;
    font-size: 16px !important;
  }
  /* Cancel button in the form header — give it a real tap target. */
  body.parlour-shell .pnf-cancel-btn {
    min-height: 44px !important;
    min-width: 44px !important;
  }
  /* Form section accordions — full width, no horizontal scroll. */
  body.parlour-shell .pnf-sections {
    padding: 0 !important;
  }
  body.parlour-shell .pnf-input-row {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 8px !important;
  }
  body.parlour-shell .pnf-input-row input,
  body.parlour-shell .pnf-input-row select,
  body.parlour-shell .pnf-input-row textarea {
    width: 100% !important;
    min-height: 44px !important;
  }
  /* Document slot — full width photo-capture target. */
  body.parlour-shell .pnf-doc-slot {
    width: 100% !important;
    min-height: 80px !important;
  }
  /* Progress strip — make it more touch-friendly. */
  body.parlour-shell .pnf-progress {
    padding: 8px 12px !important;
    font-size: 12px !important;
  }
  /* Form header — sticky on phone so the Cancel button is always
     reachable when scrolling a long form. */
  body.parlour-shell .pnf-header {
    position: sticky !important;
    top: 49px !important; /* below the topbar */
    z-index: 20;
    background: white !important;
    padding: 10px 14px !important;
  }
}

/* ── 480px small-phone breakpoint ─────────────────────────────────── */

@media (max-width: 480px) {

  body.parlour-shell .pp-topbar {
    padding: 6px 10px !important;
  }
  /* Hide the org name text on small phones — the logo alone
     identifies the parlour. Saves horizontal space for the user-
     menu button. */
  body.parlour-shell .pp-org-name {
    display: none !important;
  }
  body.parlour-shell .pp-nav-item {
    font-size: 11px !important;
    padding: 6px 2px !important;
  }
  body.parlour-shell #pp-main-panel {
    padding: 12px !important;
    padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px)) !important;
  }
  body.parlour-shell .pp-kpi-card {
    padding: 12px 14px !important;
  }
  body.parlour-shell .pp-recent-claims {
    padding: 14px !important;
  }
  /* Section title smaller on very narrow widths. */
  body.parlour-shell #pp-main-panel h1 {
    font-size: 20px !important;
  }
  body.parlour-shell .pcd-title-row h1,
  body.parlour-shell .pcd-title-row h2 {
    font-size: 18px !important;
  }
}

/* ── prefers-reduced-motion — respect user setting ────────────────── */

@media (max-width: 920px) and (prefers-reduced-motion: reduce) {
  body.parlour-shell .pp-topbar,
  body.parlour-shell .pp-sidebar,
  body.parlour-shell .pnf-submit-bar,
  body.parlour-shell .pnf-header {
    transition: none !important;
  }
}