/* ==========================================================================
   Mobile Action Center — phone-native rebuild of the Action Center.
   Loaded ONLY by action-center.html. Master-detail like Inventory: the real
   KPI cockpit (#ac-kpi-slot) + priority queue (#ac-queue) become the root
   screen, and the real detail pane (#ac-detail) becomes a pushed full-screen
   view. The page renders into fixed slots and renderShell() runs once, so the
   inline JS relocates these elements after the first renderAll() and they stay
   put (later renders only update their inner content by id).

   Namespace: .acm-*  (Action Center Mobile)  · palette = warm-paper (light only)
   ========================================================================== */

.acm-shell { display: none; }

@media (max-width: 600px) {
  body > header,
  body > nav.main-nav,
  body > main { display: none !important; }

  /* The off-screen pushed detail (translateX 100%) must not spawn a horizontal
     scrollbar. */
  html, body { overflow-x: hidden; }

  .acm-shell {
    display: flex; flex-direction: column; position: fixed; inset: 0; z-index: 30;
    background: #F5F2EC; color: #1A1A18;
    font-family: system-ui, -apple-system, 'Segoe UI', sans-serif;
    overscroll-behavior: none;
    /* iOS motion tokens: nav = decelerating push curve; tap = quick press. */
    --ios-nav: 340ms cubic-bezier(.32, .72, 0, 1);
    --ios-tap: 130ms ease;
  }

  /* ── iOS-style navigation ─────────────────────────────────────────────────
     The list stays in flow and recedes (parallax slide + dim) while the detail
     is a fixed overlay that pushes in from the right. Driven entirely by the
     .acm-detail-open class the JS already toggles — no JS change needed. */
  .acm-screen { flex-direction: column; }

  #acm-screen-list {
    display: flex; flex: 1; min-height: 0; position: relative;
    transition: transform var(--ios-nav); will-change: transform;
  }
  .acm-shell.acm-detail-open #acm-screen-list { transform: translateX(-22%); }
  /* iOS dims the outgoing screen ~10% as it slides back. */
  #acm-screen-list::after {
    content: ''; position: absolute; inset: 0; z-index: 5;
    background: #000; opacity: 0; pointer-events: none;
    transition: opacity var(--ios-nav);
  }
  .acm-shell.acm-detail-open #acm-screen-list::after { opacity: .09; }

  #acm-screen-detail {
    display: flex; flex-direction: column;
    position: fixed; inset: 0; z-index: 40; background: #F5F2EC;
    transform: translateX(100%);
    transition: transform var(--ios-nav); will-change: transform;
  }
  .acm-shell.acm-detail-open #acm-screen-detail { transform: translateX(0); }

  /* Root header (Action Center) + pushed detail header (back + title). */
  .acm-head {
    flex-shrink: 0; padding: calc(8px + env(safe-area-inset-top)) 16px 12px;
    border-bottom: 1px solid #E6E0D4;
  }
  .acm-title { font: 800 23px system-ui; letter-spacing: -.5px; }
  .acm-sub { font: 500 12px system-ui; color: #888; margin-top: 2px; }
  .acm-head--push { display: flex; align-items: center; gap: 12px; }
  .acm-back {
    width: 34px; height: 34px; border-radius: 50%; background: #FFFFFF; border: 1px solid #DDD8CE;
    color: #6B6B64; font-size: 20px; line-height: 1; display: flex; align-items: center;
    justify-content: center; flex-shrink: 0; cursor: pointer;
    transition: transform var(--ios-tap); -webkit-tap-highlight-color: transparent;
  }
  .acm-back:active { transform: scale(.9); }
  .acm-title-sm { font: 800 15px system-ui; letter-spacing: -.2px; }

  .acm-body { flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 14px 16px 16px; }

  /* Relocated containers fill the column. */
  #acm-list-mount, #acm-detail-mount { display: flex; flex-direction: column; gap: 12px; }
  #acm-list-mount > *, #acm-detail-mount > * { margin: 0 !important; width: 100%; max-width: 100%; }

  /* ── Cockpit — 2x2 KPI grid ───────────────────────────────────────────── */
  /* minmax(0,1fr) + min-width:0 defeats the desktop .ac-kpi min-width:200px,
     which otherwise forces the 2 columns past the 390px viewport. */
  #acm-list-mount .ac-kpis {
    display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 9px;
  }
  #acm-list-mount .ac-kpi {
    flex: none; min-width: 0;
    background: #fff; border: 1px solid #E6E0D4; border-radius: 12px; padding: 12px 13px; margin: 0;
  }
  #acm-list-mount .ac-kpi--clickable { border: 1.5px solid rgba(192,57,43,.45); }
  #acm-list-mount .ac-kpi-label { font: 700 9px system-ui; letter-spacing: .06em; text-transform: uppercase; color: #9a937f; }
  #acm-list-mount .ac-kpi-value { font: 800 23px system-ui; letter-spacing: -.5px; margin-top: 4px; }
  #acm-list-mount .ac-kpi-sub { font: 500 10px system-ui; color: #888; margin-top: 1px; }
  #acm-list-mount .ac-kpi-sub.is-bad { font-weight: 600; color: #C0392B; }

  /* ── Priority queue ───────────────────────────────────────────────────── */
  /* The queue has a JS-synced fixed height + internal scroll on desktop; on the
     phone let it grow with the page (override the inline style.height). */
  #acm-list-mount .ac-queue { background: transparent; border: none; padding: 0; height: auto !important; width: 100%; }
  #acm-list-mount .ac-queue > .ac-card { min-height: 0; }
  #acm-list-mount .ac-qlist { overflow: visible; flex: none; min-height: 0; margin: 0; padding: 0; }
  #acm-list-mount .ac-card { background: transparent; border: none; border-radius: 0; padding: 0; box-shadow: none; }
  #acm-list-mount .ac-card-head { padding: 4px 0 10px; }
  #acm-list-mount .ac-card-title { font: 800 15px system-ui; letter-spacing: -.2px; }
  #acm-list-mount .ac-card-count { font: 500 11px system-ui; color: #9a937f; }
  #acm-list-mount .ac-chips { display: flex; flex-wrap: wrap; gap: 7px; padding-bottom: 11px; }
  #acm-list-mount .ac-chip {
    font: 600 11px system-ui; border-radius: 14px; padding: 5px 12px;
    background: #fff; border: 1px solid #E6E0D4; color: #6B6B64;
  }
  #acm-list-mount .ac-chip.active { background: #1A1A18; border-color: #1A1A18; color: #fff; }
  #acm-list-mount .ac-chip { transition: transform var(--ios-tap); -webkit-tap-highlight-color: transparent; }
  #acm-list-mount .ac-chip:active { transform: scale(.94); }
  #acm-list-mount .ac-chip-n { margin-left: 4px; }
  #acm-list-mount .ac-qlist { display: flex; flex-direction: column; gap: 9px; }
  #acm-list-mount .ac-qrow {
    display: flex; align-items: center; gap: 11px; width: 100%; text-align: left;
    background: #fff; border: 1px solid #E6E0D4; border-radius: 12px; padding: 10px 11px; cursor: pointer;
  }
  #acm-list-mount .ac-qrow.selected { background: #FBF6EC; border-color: #D9BE86; }
  #acm-list-mount .ac-qrow { transition: transform var(--ios-tap), background var(--ios-tap); -webkit-tap-highlight-color: transparent; }
  #acm-list-mount .ac-qrow:active { transform: scale(.985); }
  #acm-list-mount .ac-pill { font: 600 10px system-ui; border-radius: 5px; padding: 2px 7px; }
  #acm-list-mount .ac-pill--over { color: #C0392B; background: rgba(192,57,43,.1); }
  #acm-list-mount .ac-pill--good { color: #2A7A4F; background: rgba(42,122,79,.12); }

  /* ── Detail pane ──────────────────────────────────────────────────────── */
  #acm-detail-mount .ac-detail { background: transparent; border: none; padding: 0; }
  #acm-detail-mount .ac-card { background: #fff; border: 1px solid #E6E0D4; border-radius: 13px; padding: 13px; }

  /* Vehicle header: thumb + title/price on top, action buttons full-width below
     (display:contents lifts dtoprow + dbtns into the dhead grid). */
  #acm-detail-mount .ac-dhead {
    display: grid; grid-template-columns: 104px minmax(0,1fr);
    grid-template-areas: "thumb top" "btns btns"; column-gap: 12px; row-gap: 12px;
  }
  #acm-detail-mount .ac-dthumb { grid-area: thumb; width: 104px; height: 78px; min-height: 0; }
  #acm-detail-mount .ac-dinfo { display: contents; }
  #acm-detail-mount .ac-dtoprow { grid-area: top; flex-direction: column; align-items: flex-start; gap: 5px; }
  #acm-detail-mount .ac-dtitle { font: 800 16px system-ui; }
  #acm-detail-mount .ac-dsub { font: 500 11.5px system-ui; color: #888; }
  #acm-detail-mount .ac-dstatus { display: flex; align-items: center; gap: 9px; }
  #acm-detail-mount .ac-dprice { font: 800 18px system-ui; }
  #acm-detail-mount .ac-dbtns { grid-area: btns; display: flex; gap: 9px; margin-top: 0; }
  #acm-detail-mount .ac-dbtns .btn { flex: 1 1 0; justify-content: center; min-width: 0; }
  #acm-detail-mount .ac-dbtns .btn,
  #acm-detail-mount .ac-apply { transition: transform var(--ios-tap); }
  #acm-detail-mount .ac-dbtns .btn:active,
  #acm-detail-mount .ac-apply:active { transform: scale(.96); }

  /* Reason cards stack one per row (red/amber tints come from .ac-signal--*). */
  #acm-detail-mount .ac-signals { grid-template-columns: 1fr; }

  /* Recommended actions: one column; each card = icon + body on top, the
     "Open in composer" cta full-width below (desktop crams them in a row). */
  #acm-detail-mount .ac-actions-grid { grid-template-columns: 1fr; gap: 11px; }
  #acm-detail-mount .ac-action {
    display: grid; grid-template-columns: 40px minmax(0,1fr);
    grid-template-areas: "icon body" "cta cta"; column-gap: 11px; row-gap: 10px; align-items: start;
  }
  #acm-detail-mount .ac-action-icon { grid-area: icon; }
  #acm-detail-mount .ac-action-body { grid-area: body; }
  #acm-detail-mount .ac-apply { grid-area: cta; justify-content: center; }

  /* Market position: stack the meters + comp table full width. */
  #acm-detail-mount .ac-mc-body { flex-direction: column; }
  #acm-detail-mount .ac-mc-left,
  #acm-detail-mount .ac-mc-right { flex: 1 1 100%; width: 100%; }

  /* Card headers (title + count) wrap instead of overlapping when the title is long. */
  #acm-detail-mount .ac-card-head { flex-wrap: wrap; align-items: baseline; gap: 2px 8px; }
  #acm-detail-mount .ac-card-title { font: 800 15px system-ui; letter-spacing: -.2px; }

  /* Comp table → list rows: dealer + location on the left, price + days right. */
  #acm-detail-mount .ac-thead { display: none; }
  #acm-detail-mount .ac-trow {
    grid-template-columns: minmax(0,1fr) auto auto;
    grid-template-areas: "dealer price days" "loc price days";
    column-gap: 10px; row-gap: 1px; padding: 10px 8px; border-radius: 8px;
  }
  #acm-detail-mount .ac-trow.you { padding-left: 8px; padding-right: 8px; }
  #acm-detail-mount .ac-dealer { grid-area: dealer; font: 700 12px system-ui; }
  #acm-detail-mount .ac-trow > div:nth-child(2) { grid-area: loc; font: 500 10px system-ui; color: #9a937f; }
  #acm-detail-mount .ac-tprice { grid-area: price; align-self: center; font: 800 12.5px system-ui; white-space: nowrap; }
  #acm-detail-mount .ac-tdays { grid-area: days; align-self: center; font: 600 11px system-ui; white-space: nowrap; }

  /* ── Bottom tab bar ───────────────────────────────────────────────────── */
  .acm-tabbar {
    flex-shrink: 0; display: flex; align-items: center;
    height: calc(66px + env(safe-area-inset-bottom));
    padding: 0 6px env(safe-area-inset-bottom);
    border-top: 1px solid #DDD8CE; background: #FFFFFF;
    transition: transform var(--ios-nav), opacity var(--ios-nav);
  }
  .acm-tab {
    flex: 1; display: flex; flex-direction: column; align-items: center; gap: 5px;
    padding: 6px 0; background: none; border: none; cursor: pointer;
    text-decoration: none; position: relative; color: #AAAAAA; font: 600 10px system-ui;
    transition: transform var(--ios-tap); -webkit-tap-highlight-color: transparent;
  }
  .acm-tab svg { stroke: currentColor; }
  .acm-tab.is-active { color: #C9A96E; }
  .acm-tab:active { transform: scale(.9); }
  /* Detail screen is pushed — slide the tab bar down as the detail comes in. */
  .acm-shell.acm-detail-open .acm-tabbar { transform: translateY(100%); opacity: 0; pointer-events: none; }

  /* ── Respect the OS "reduce motion" setting: keep the final positions, drop
     the animation. ──────────────────────────────────────────────────────── */
  @media (prefers-reduced-motion: reduce) {
    #acm-screen-list, #acm-screen-list::after, #acm-screen-detail, .acm-tabbar,
    #acm-list-mount .ac-qrow, #acm-list-mount .ac-chip, .acm-back, .acm-tab,
    #acm-detail-mount .ac-dbtns .btn, #acm-detail-mount .ac-apply { transition: none !important; }
  }
}