/* NEO mobile presentation layer.
   ADDITIVE ONLY: every rule lives inside a max-width media query, so desktop
   and tablet (>768px) are completely unaffected. No markup/logic changes.
   Loaded after each page's inline <style> so equal-specificity mobile rules win.
   Targets iOS Safari + Android Chrome. Breakpoints: 768 (tablet boundary),
   430 (standard phones), 360 (small phones). */

/* ── Tablet boundary and down ─────────────────────────────────────────────── */
@media (max-width: 768px) {

  /* R2: never scroll the whole page sideways. */
  html, body { max-width: 100%; overflow-x: hidden; }

  /* R5: 16px form fields so iOS Safari doesn't auto-zoom on focus. */
  input, select, textarea, .in, .search-input, #big-search, #cmdk-input { font-size: 16px !important; }

  /* R12: media scales fluidly, never overflows. */
  img, svg, video, canvas { max-width: 100%; }

  /* R13: momentum scrolling on every scroll surface. */
  body, .modal-box, .pv-wrap, .sidebar-body, .cmdk-results, .table-wrap,
  .panel, .container { -webkit-overflow-scrolling: touch; }

  /* R4: comfortable tap targets + spacing for interactive controls. */
  .btn, button, .back, .hnav, .hlogout, .side-nav-btn, .recon-btn,
  .tab, .cc-add, .cc-x, .switch { min-height: 44px; }

  /* The client-header "Call" button is a FIXED CIRCLE. The blanket
     button{min-height:44px} above stretched its 38px height to 44px while the
     width stayed 38px, deforming the circle into a vertical oval. Restore a
     perfect round tap target (a clean WhatsApp-style green bubble). */
  .call-ic { width: 44px; height: 44px; min-width: 44px; }
  .call-ic svg { width: 19px; height: 19px; }

  /* R14: grouped section-header actions (BEMO + Add activity) harmonize into a
     tidy equal-width row under the section title instead of a ragged wrap. */
  .panel-head { flex-wrap: wrap; }
  .sec-actions { flex-basis: 100%; order: 5; display: grid !important;
                 grid-template-columns: 1fr 1fr; gap: 8px; margin: 10px 0 2px; }
  .sec-actions .sec-add { width: 100%; justify-content: center; margin: 0;
                          padding: 10px 8px; font-size: 12px; }

  /* R15: modals are GROUNDED — the sheet itself never pans sideways. Side-by-side
     field rows (Priority|Owner, Status|Follow-up) wrap instead of overflowing,
     and no control can force the box wider than the screen. */
  .wb-box { overflow-x: hidden; }
  .wb-box select, .wb-box input, .wb-box textarea { max-width: 100%; min-width: 0; }
  .wb-box [style*="display:flex"] { flex-wrap: wrap; }
  .wb-box [style*="display:flex"] > div { min-width: 0; }
  .btn.sm { min-height: 38px; }                 /* dense in-row actions: still tappable */
  .acts, .right, .modal-foot { gap: 10px; flex-wrap: wrap; }

  /* R7: wide data tables scroll horizontally instead of overflowing the screen,
     keeping every column. The table becomes its own horizontal scroll box.
     touch-action MUST allow BOTH directions (pan-x pan-y): the table fills its
     section, so every touch starts on it. A vertical swipe has no vertical overflow
     inside the table itself, so it passes up to the section's 460px scroll box and
     scrolls the list; a horizontal swipe slides the table sideways. Restricting this
     to pan-x alone blocks vertical scrolling of the parent box too, freezing the
     list even though its scrollbar shows (the "scrollbar shows but it's stuck" bug).
     Same pattern as .pol-scroll below. */
  table { display: block; width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch;
          touch-action: pan-x pan-y; }
  table thead, table tbody, table tr { white-space: nowrap; }
  .pv-wrap, .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }

  /* R9: modals/overlays fit the viewport, scroll if tall, clear the keyboard. */
  .modal { align-items: flex-start; padding: 12px 10px;
           padding-top: max(12px, env(safe-area-inset-top)); }
  .modal-box { width: 100% !important; max-width: 100%; max-height: 90vh; padding: 18px 16px; }
  .cmdk { padding-top: max(8vh, env(safe-area-inset-top)); }
  .cmdk-box { width: 94vw; max-width: 94vw; }
  .grid2, .deliver { grid-template-columns: 1fr; }   /* stack form columns */

  /* R8 + R3: header wraps gracefully and clears the notch. */
  .header { flex-wrap: wrap; row-gap: 8px; position: relative;
            padding-left: max(14px, env(safe-area-inset-left));
            padding-right: max(14px, env(safe-area-inset-right)); }
  /* Pin the Applied "Sync" + refresh buttons to the top-right corner — out of the
     wrapping flow — so they sit on the brand row instead of dropping to a 2nd line. */
  .header-right { position: absolute; top: 12px; right: max(14px, env(safe-area-inset-right));
                  gap: 8px; flex-wrap: nowrap; }

  /* R3: fixed sidebar drawer respects the notch / home indicator. */
  .sidebar-head { padding-top: max(16px, env(safe-area-inset-top)); }
  .sidebar-body { padding-bottom: max(16px, env(safe-area-inset-bottom)); }

  /* R10: comfortable one-hand reading; avoid cramped condition rows. */
  .cond { grid-template-columns: 1fr; gap: 6px; }
  .cond .op { padding-top: 0; }
  .container { padding-left: 16px; padding-right: 16px; }

  /* ── Worklist header (#activities): organize for phones ──────────────────── */
  /* The hero's radial glow sits behind the worklist; soften it so the header reads clean. */
  .hero::before { opacity: .4; }
  /* Tighter vertical footprint so the header takes less of the phone screen. */
  .act-head { margin-bottom: 10px; }
  /* Title row: just the title + the Filters button (controls live in the sheet). */
  .act-headrow { flex-direction: row; align-items: center; gap: 10px; margin-bottom: 8px; }
  .act-tools { margin-left: 0; width: 100%; gap: 8px; }
  .act-tools .act-pick { flex: 1; }
  .act-owner, .act-colbtn { width: 100%; justify-content: center; min-height: 40px; padding: 8px 12px; }
  /* Health chips: even 2-up grid, smaller height, and flex-centered text — the zero
     chips are <span> (inline by default), so without flex centering "0 stale" sat
     left while the <button> chips looked centered. */
  .act-summary { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 4px 0 0; }
  .act-summary .act-sumchip { width: 100%; min-height: 36px; padding: 6px 10px;
    display: flex; align-items: center; justify-content: center; text-align: center; }
  /* Filter bar: stack the groups; the Open/Closed/All control spans the row. */
  .act-filterbar { flex-direction: column; align-items: stretch; gap: 10px; padding: 10px 12px; }
  .act-fgroup { width: 100%; justify-content: space-between; flex-wrap: wrap; gap: 8px; }
  .act-segwrap { flex: 1; }
  .act-seg { flex: 1; text-align: center; min-height: 40px; }

  /* The worklist's desktop full-bleed centering trick (margin-left:50% +
     transform:translateX(-50%)) makes #activities a CONTAINING BLOCK for any
     position:fixed descendant. On phones the list already fits the container, so
     center it the normal way and drop the transform. */
  .activities { width: 100%; margin: 22px 0 80px; transform: none; }

  /* Filters on phones: render as an INLINE in-flow card directly under the Filters
     button — NOT a fixed overlay. A fixed bottom-sheet kept getting trapped by
     ancestor transforms or mis-layered by iOS (dark screen stuck open, hero search
     bar bleeding through it). An in-flow panel can't be trapped or overlapped: it
     simply expands the page and pushes the list down, which always renders right. */
  .act-filterbtn { padding: 9px 14px; min-height: 40px; white-space: nowrap; }
  /* Phones: the Applied sync button (left of Filters) goes icon-only to keep the row airy. */
  .act-applied .aff-lbl { display: none; }
  .act-applied { padding: 9px 12px; }
  .act-sheetwrap { position: static; inset: auto; z-index: auto; display: none;
    padding: 0; background: none; }
  .act-head.filters-open .act-sheetwrap { display: block; }
  .act-sheet { width: 100%; max-width: none; max-height: none; overflow: visible;
    margin-top: 12px; border: 1px solid var(--border); border-radius: 16px;
    box-shadow: var(--shadow-md); padding: 2px 16px 18px; }
  .act-sheethead { position: static; }
  .act-sheetx { min-height: 40px; padding: 8px 16px; }
  .act-sheet .act-tools { flex-direction: column; align-items: stretch; }
  .act-sheet .act-pickscroll { max-height: 240px; }

  /* ── Worklist as cards (phones) ───────────────────────────────────────────
     The desktop renders an Epic-style table; on a phone that meant a sideways
     scroll with a frozen actions column that clipped the Close button. Instead
     the JS renders one calm card per activity here — every field reads top-down,
     Assign/Close are always fully visible, nothing is pinned or scrolls sideways.
     See feedback_aesthetic_ux / feedback_stable_ux. */
  .act-cards { display: flex; flex-direction: column; gap: 11px; margin-top: 2px; }
  .acard { position: relative; display: block; text-align: left; background: var(--surface);
    border: 1px solid var(--border); border-radius: 16px; padding: 13px 15px;
    box-shadow: 0 1px 2px rgba(20,22,40,.04), 0 4px 14px rgba(20,22,40,.05);
    cursor: pointer; -webkit-tap-highlight-color: transparent;
    transition: transform .12s ease, box-shadow .15s ease, border-color .15s ease; }
  .acard:active { transform: scale(.99); box-shadow: 0 1px 2px rgba(20,22,40,.05); }
  /* Stale items get a soft red left edge (inset, so it adds no width). */
  .acard.act-row-stale { box-shadow: inset 3px 0 0 var(--red), 0 1px 2px rgba(20,22,40,.04), 0 4px 14px rgba(20,22,40,.05); }
  .acard-top { display: flex; align-items: center; gap: 9px; margin-bottom: 6px; }
  .acard-code { font-weight: 800; font-size: 12.5px; letter-spacing: .3px; flex: 0 0 auto; }
  .acard-cat { font-size: 11px; font-weight: 600; color: var(--text3);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
  .acard-top .act-due-tag { margin-left: auto; flex: 0 0 auto; }
  .acard-desc { font-size: 14px; line-height: 1.42; font-weight: 500; color: var(--text);
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .acard-client { margin-top: 7px; font-size: 13px; font-weight: 600; color: var(--accent2);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .acard-meta { margin-top: 3px; font-size: 12px; color: var(--text3);
    display: flex; align-items: center; flex-wrap: wrap; }
  .acard-sep { margin: 0 7px; color: var(--border); }
  .acard-foot { margin-top: 12px; display: flex; gap: 9px; }
  .acard-foot .act-assign, .acard-foot .act-close { flex: 1; margin: 0; min-height: 40px;
    display: inline-flex; align-items: center; justify-content: center; font-size: 13px;
    border-radius: 10px; }
  .acard-foot .act-closedtag { flex: 1; text-align: center; padding: 10px; }
  /* Skeleton variant while the first page loads. */
  .acard.sk-card { pointer-events: none; }
  .acard.sk-card .sk-code { width: 46px; } .acard.sk-card .sk-sm { width: 64px; }
  .acard.sk-card .sk-cardbtn { flex: 1; height: 40px; border-radius: 10px; }
  /* Column picker has no effect on cards (they're not column-driven) — hide it. */
  .act-colpick { display: none; }

  /* ── Client-file task / note rows: keep the in-row actions reachable ──────────
     Each open task row ends with ⇄ Assign / ✓ Complete buttons, but the desktop
     row is a single non-wrapping flex line with .act-meta pushed right
     (margin-left:auto) — on a narrow phone that shoved those buttons off the right
     edge, out of sight. Let the row wrap so the buttons fall onto their own line,
     fully visible and comfortably tappable. See feedback_aesthetic_ux. */
  .act-row { flex-wrap: wrap; align-items: center; row-gap: 8px; }
  .act-row .act-meta { white-space: normal; }
  .task-done-btn { min-height: 38px; padding: 6px 12px; margin-left: 0; }

  /* ── Calm, premium sizing (mobile only) ──────────────────────────────────────
     The empty landing breathes, but the worklist loaded at desktop scale (17px
     title, 13px cells, tall rows) and felt heavy on a phone. Re-tune to a modular
     type scale (~1.2 minor third) on a 4pt spacing rhythm so it reads light and
     balanced — lighter type and rows = "premium/calm", not shouty. Desktop is
     untouched. See feedback_aesthetic_ux. */
  .act-headtitle { gap: 8px; }
  .act-head svg { width: 16px; height: 16px; }
  .act-title { font-size: 15px; letter-spacing: -.1px; }
  .act-count { font-size: 11px; padding: 2px 9px; }
  .act-filterbtn { font-size: 12.5px; }

  /* ── Landing hero: fit the phone viewport for a calm, comfortable first view ──
     Desktop centers the hero ~13vh down the page (wastes a third of a phone screen)
     with a big heading and large margins. On phones: lift the search high, keep the
     heading tidy, drop the desktop-only hint, sit the worklist right under the search,
     and make the bottom waves a gentle accent instead of a quarter of the screen. */
  .hero { margin-top: 28px; margin-bottom: 18px; }
  /* Warm, soft halo behind the search — bigger and a touch richer than before so the
     landing feels welcoming, not flat. */
  .hero::before { height: 280px; opacity: 1; top: 34%;
    background: radial-gradient(closest-side,
      rgba(212,160,23,.20), rgba(212,160,23,.05) 56%, transparent 76%); }
  /* Elegant gradient headline: mostly deep charcoal, warming into the brand gold at
     the tail — eye-catching but calm. Fallback color for browsers without text-clip. */
  .hero h1 { font-size: 26px; line-height: 1.15; margin-bottom: 9px; letter-spacing: -.5px;
    color: var(--text);
    background: linear-gradient(118deg, var(--text) 38%, var(--accent2) 112%);
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
  .hero p { font-size: 13.5px; line-height: 1.45; margin-bottom: 17px; color: var(--text2); }
  /* Premium search field: softer radius, a layered shadow with a subtle gold glow. */
  .big-search-wrap { padding: 15px 17px; border-radius: 17px;
    box-shadow: 0 1px 2px rgba(20,22,40,.05), 0 12px 30px rgba(184,134,11,.11); }
  .big-search-wrap svg { width: 20px; height: 20px; }
  .hero-hint { display: none; }                            /* "Ctrl K" tip is desktop-only */
  .activities { margin-top: 18px; margin-bottom: 24px; }   /* worklist close to the search */
  .page-graphic { height: 12vh; max-height: 130px; }       /* subtle bottom accent */

  /* ── Policies table: ONE compact line per row (no tall stacked cards) ─────────
     A phone shows the same flat Epic grid, kept short — only the columns a broker
     glances at on mobile (product, status, code, dates, policy #, premium) so the
     row stays a single tight line; the rest (Bill/ICO/Branch/Producer/Renewals)
     are desktop-only. The wrapper is the sole horizontal scroller, with momentum
     and a pan-x pan-y gesture so sideways swipes scroll the table while up/down
     swipes still scroll the page. */
  .pol-table { display: table; overflow-x: visible; font-size: 11.5px; table-layout: auto; min-width: 0 !important; }
  .pol-table > colgroup > col { width: auto !important; }   /* drop the desktop drag-widths */
  .pol-grip { display: none; }                              /* resize is desktop-only */
  .pol-scroll { touch-action: pan-x pan-y; -webkit-overflow-scrolling: touch; }
  .pol-table th[data-mhide], .pol-table td[data-mhide] { display: none; }
  .pol-table tfoot { display: none; }                            /* total row is desktop-only */
  /* "Actions" button + its menu: comfortable tap targets on a phone. */
  .pl-menu-btn { font-size: 12.5px; padding: 8px 15px; margin-top: 9px; }
  .pl-mi { padding: 12px 13px; font-size: 14px; }
  /* Sections keep their own internal scroll box on phones, exactly like desktop:
     a panel capped at max-height:460px (overflow-y:auto from the base styles) —
     short sections shrink to their content, long lists scroll — that you scroll
     with a touch swipe. -webkit-overflow-scrolling gives it momentum;
     the table inside declares touch-action:pan-x (see R7) so a vertical swipe isn't
     eaten by the table's horizontal scroller but bubbles up and scrolls this box.
     The section header stays sticky at the top of the box (desktop behaviour). */
  .sec-scroll { -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
  /* Timeline is a horizontal scroller; let it grow and the page scroll instead. */
  .tl { max-height: none; overflow-y: visible; }

  /* Activities: the aligned column grid is desktop-only; on a phone the column header is
     hidden and each activity head stacks. Since there's no header row on a phone, the
     field name is shown inline before each value (the mobile form of the columns). */
  .act-list-hdr { display: none; }
  #act-wrap { overflow-x: visible; }                          /* no sideways scroll on a phone */
  .act-head.act-cols { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; min-width: 0 !important; }
  .act-head .act-code { order: 1; }
  .act-head .act-actions-cell { order: 2; margin-left: auto; }
  .act-head .act-desc { order: 3; white-space: normal; flex: 1 1 100%; font-size: 13.5px; font-weight: 500; }
  .act-head .act-owner, .act-head .act-date, .act-head .act-status-cell { order: 4; font-size: 11.5px; }
  /* Inline labels: "Owner SYSTEM", "Entered On Jun 21", "Status [pill]", … (the new
     Last Updated / Closed On columns get labelled too). Empty values are hidden. */
  .act-head .act-owner::before, .act-head .act-date::before, .act-head .act-status-cell::before {
    content: attr(data-label) " "; margin-right: 4px; color: var(--text3);
    font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; }

  /* ── Admin · Users & access: tables become calm cards on phones ──────────────
     Desktop renders dense Users and Compliance tables. The global table→sideways-
     scroll rule above made them swipe awkwardly with the actions column clipped off
     the right edge. Here each row becomes a self-contained card: the name on top,
     label/value rows beneath, and full-width tap-friendly actions at the foot —
     nothing pinned, nothing scrolls sideways. data-label attrs (added in admin.py,
     inert on desktop) supply each row's field labels. See feedback_aesthetic_ux. */
  .panel { padding: 16px 15px; }
  /* Panel headers stack so the +Add button gets its own full-width row. */
  .panel-head { flex-wrap: wrap; row-gap: 12px; }
  .panel-head .btn.primary { width: 100%; margin-left: 0 !important; justify-content: center; }

  #users table, #comp-items table { display: block; overflow: visible; }
  #users thead, #comp-items thead { display: none; }          /* labels move into each card */
  #users tbody, #comp-items tbody { display: block; }
  #users tr, #comp-items tr { display: block; background: var(--surface);
    border: 1px solid var(--border); border-radius: 16px; padding: 13px 15px 14px;
    margin-bottom: 11px; white-space: normal;
    box-shadow: 0 1px 2px rgba(20,22,40,.04), 0 4px 14px rgba(20,22,40,.05); }
  #users tr:hover td, #comp-items tr:hover td { background: transparent; }  /* no desktop hover tint */

  /* Label/value rows: field name (muted, small caps) left, value right. */
  #users td, #comp-items td { display: flex; align-items: baseline;
    justify-content: space-between; gap: 14px; padding: 5px 0; border: none;
    white-space: normal; font-size: 13.5px; }
  #users td::before, #comp-items td::before { content: attr(data-label); flex: 0 0 auto;
    color: var(--text3); font-size: 11px; font-weight: 700; text-transform: uppercase;
    letter-spacing: .4px; }
  #users td:not([data-label])::before, #comp-items td:not([data-label])::before { content: none; }
  #users td.codes, #comp-items td.codes { text-align: right; font-size: 12.5px; }

  /* Title row: the user / item name — full width, no label, a touch larger. */
  #users td.c-title, #comp-items td.c-title { display: block; padding: 0 0 9px; }
  #users td.c-title b, #comp-items td.c-title b { font-size: 15px; }
  #users td.c-title .hint { margin-top: 2px; }

  /* Actions row: divider, then full-width buttons split evenly across the foot. */
  #users td.c-acts, #comp-items td.c-acts { display: flex; gap: 8px; margin-top: 10px;
    padding-top: 12px; border-top: 1px solid var(--surface2);
    text-align: left !important; white-space: normal !important; }
  #users td.c-acts .btn, #comp-items td.c-acts .btn { flex: 1; justify-content: center; margin: 0; }
}

/* ── Standard phones (~390–430px) ─────────────────────────────────────────── */
@media (max-width: 430px) {
  /* Trim header chrome so the essentials fit one row comfortably. */
  .huser { display: none; }                      /* username hidden; Sign out stays */
  .pv-stats { gap: 12px; }
  .stats { grid-template-columns: 1fr 1fr; gap: 10px; }
  .modal-box { padding: 16px 14px; }
}

/* ── Small phones (~360px) ────────────────────────────────────────────────── */
@media (max-width: 360px) {
  .hnav { display: none; }                        /* nav lives in the drawer; keep Sign out */
  .stats { grid-template-columns: 1fr; }
  .hero h1 { font-size: 20px; }
}