/* css/mobile.css — mobile-only layer for the Concrete QC Dashboard.
   Everything here is gated to phone widths; the desktop layout (>600px) is
   untouched. Loaded after css/styles.css; pairs with js/mobile.js + the
   .mtabbar markup in the HTML shell. iPhone 14 Pro Max ≈ 430px CSS px. */

/* The bottom tab bar is mobile-only: hidden everywhere unless the phone
   media query below turns it on. */
.mtabbar{display:none}
/* The "rotate for a wider chart" hint is portrait-mobile-only (see below). */
.rotate-hint{display:none}
/* The per-plant mix-design flip panel is mobile-only: hidden everywhere unless
   the phone media query below reveals it when its card is .flipped. */
.pc-mix{display:none}
/* The Failed-page compact list (4-col table + plant/mix filter) and the
   Prediction At-Risk mobile list are mobile-only: hidden on desktop, revealed
   by the phone media query below. */
.fail-filter,.fail-mtable,.arp-mobile{display:none}
/* The mobile At-Risk badge (count predicted to fail) is hidden on desktop, which
   keeps its own "at risk" badge. The phone media query swaps them. */
.arp-badge-m{display:none}

/* Phone layout fires for portrait phones (narrow width) AND landscape phones
   (short height + coarse/touch pointer) — so rotating an iPhone never falls back
   to the desktop top-nav with its engineer-only pages. Desktops (fine pointer)
   and iPads (landscape height > 600px) are excluded, so both stay untouched. */
@media (max-width:600px), (orientation:landscape) and (max-height:600px) and (pointer:coarse){

  /* ===== Shell: header + page + segmented control ===== */

  /* Drop the top segmented control — navigation moves to the bottom bar. */
  .seg-wrap{display:none}

  /* Slim, sticky, frosted iOS-style title bar. */
  .header{
    position:sticky;top:0;z-index:50;
    padding:calc(env(safe-area-inset-top) + 12px) 16px 10px;
    margin:0;max-width:none;
    background:rgba(245,245,247,.82);
    backdrop-filter:saturate(180%) blur(20px);
    -webkit-backdrop-filter:saturate(180%) blur(20px);
    border-bottom:1px solid var(--border);
  }
  .header-top{align-items:center;gap:8px}
  .header h1{font-size:19px;letter-spacing:-.3px;display:flex;align-items:center;gap:8px;flex-wrap:nowrap;width:100%}
  .header h1 small{display:none}              /* subtitle is dead weight on a phone */
  .title-logo{width:27px;height:27px}
  /* Pin the gear to the right corner and shrink the circle so the button reads smaller. */
  .settings-btn{margin-left:auto;width:30px;height:30px;font-size:17px}
  /* All status pills on ONE row (Latest/Samples/Plants/28d-tested). nowrap + a scroll
     fallback so a very narrow phone scrolls horizontally instead of wrapping a pill down. */
  .meta-row{gap:4px 10px;margin-top:8px;flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .meta-row::-webkit-scrollbar{display:none}
  .meta-pill{white-space:nowrap;font-size:10.5px;flex:0 0 auto}

  /* Page content fills the width; bottom padding clears the fixed tab bar. */
  .page{padding:16px 16px calc(78px + env(safe-area-inset-bottom));max-width:none;margin:0}

  /* Cards a touch tighter on small screens. */
  .card{padding:16px;border-radius:14px;margin-bottom:14px}
  .card-title{font-size:15px}
  .card-subtle,.explain-panel{font-size:12px}

  /* ===== Bottom tab bar (native-app navigation) ===== */
  .mtabbar{
    display:flex;position:fixed;left:0;right:0;bottom:0;z-index:100;
    background:rgba(255,255,255,.86);
    backdrop-filter:saturate(180%) blur(20px);
    -webkit-backdrop-filter:saturate(180%) blur(20px);
    border-top:1px solid var(--border);
    padding:6px 4px calc(6px + env(safe-area-inset-bottom));
  }
  .mtab{
    flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;
    background:none;border:none;cursor:pointer;
    color:var(--text-tert);font-family:var(--font);
    font-size:10px;font-weight:600;letter-spacing:.1px;
    padding:5px 2px;min-height:44px;
    -webkit-tap-highlight-color:transparent;
    transition:color .2s var(--ease),transform .08s var(--ease);
  }
  .mtab svg{width:23px;height:23px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
  .mtab span{line-height:1}
  .mtab.active{color:var(--blue)}
  .mtab:active{transform:scale(.9)}

  /* ===== Filters: full-width stacked controls ===== */
  .filters{flex-direction:column;align-items:stretch;gap:10px;margin-bottom:14px}
  .filters label{font-size:11px;text-transform:uppercase;letter-spacing:.4px;color:var(--text-tert);margin-bottom:-4px}
  .date-range{margin-left:0;flex-wrap:wrap;gap:8px}
  .date-range input[type=date]{flex:1;min-width:0}
  /* 16px font size on inputs prevents iOS Safari's zoom-on-focus. */
  select,.search-box,.pfb-input,input[type=date],input[type=text]{width:100%;min-width:0;font-size:16px;padding:11px 14px}
  .btn-reset{width:100%;padding:11px}

  /* ===== Trends filters (#page1): compact two-row layout (plant | mix, then dates + reset).
     Scoped to #page1 so the page2 Failed search box keeps its full-width stacked layout.
     font-size stays 16px (inherited from the shared input rule above) to avoid iOS zoom-on-focus. ===== */
  #page1 .filters{flex-direction:row;flex-wrap:wrap;align-items:center;gap:6px 8px}
  #page1 .filters > label{margin-bottom:0;flex:0 0 auto}
  #page1 .filters > select{flex:1 1 0;min-width:0;width:auto}
  #page1 .date-range{flex-basis:100%;flex-wrap:nowrap;gap:6px;align-items:center;margin-left:0}
  #page1 .date-range label{margin-bottom:0;flex:0 0 auto;font-size:11px}
  #page1 .date-range input[type=date]{flex:1 1 0;min-width:0;width:auto;padding:9px 8px}
  #page1 .btn-reset{width:auto;flex:0 0 auto;padding:9px 14px;white-space:nowrap}

  /* ===== Tables → stacked cards (no horizontal scroll) ===== */
  .scroll-table{max-height:none;overflow:visible;border-radius:0}
  /* Hide header rows whether they use <thead> or a leading <tr><th>.
     Split into two rules so an engine without :has() still drops <thead>. */
  .scroll-table thead{display:none}
  .scroll-table tr:has(th){display:none}
  .scroll-table table{font-size:13px}
  .scroll-table tr{
    display:block;background:var(--card);
    border:1px solid var(--border);border-radius:12px;
    padding:6px 14px;margin-bottom:10px;box-shadow:var(--shadow);
  }
  .scroll-table tr:hover{background:var(--card)}
  .scroll-table tr.fail-row{border-left:3px solid var(--red)}
  .scroll-table td{
    display:flex;justify-content:space-between;align-items:baseline;gap:14px;
    padding:7px 0;border:none;border-bottom:1px solid var(--border);
    text-align:right;font-size:13px;
  }
  .scroll-table tr td:last-child{border-bottom:none}
  /* The field name comes from each cell's data-label (added in the render JS). */
  .scroll-table td::before{
    content:attr(data-label);
    flex:0 0 40%;text-align:left;white-space:nowrap;
    font-size:11px;font-weight:600;color:var(--text-tert);
    text-transform:uppercase;letter-spacing:.3px;
  }
  /* Cells without a label (or labelled empty) render full-width, no prefix. */
  .scroll-table td:not([data-label])::before,.scroll-table td[data-label=""]::before{content:none}
  .fail-badge{padding:3px 10px;font-size:11px}

  /* ===== Failed page: subtitle off, desktop table off, compact 4-col list on =====
     Placed AFTER the .scroll-table reflow rules above so equal-specificity ties
     resolve in our favour (the mobile table must keep real table semantics). */
  #page2 .card-subtle{display:none}                 /* drop the "28-Day mean below fck…" sentence */
  #page2 .filters{display:none}                       /* drop the search box (replaced by the filters) */
  .fail-dtable{display:none}                          /* hide the 17-col desktop table (no card reflow) */

  /* Two dependent dropdowns side by side: Plant -> Mix. */
  .fail-filter{display:flex;gap:8px;margin:2px 0 12px}
  .fail-filter select{flex:1 1 0;min-width:0;width:auto;font-size:16px;padding:10px 12px}  /* 16px → no iOS zoom-on-focus */
  .fail-filter select:disabled{opacity:.55}

  .fail-mtable{display:table;width:100%;border-collapse:collapse;font-size:13px;table-layout:auto}
  .fail-mtable thead{display:table-header-group}
  /* The generic reflow hides any tr containing a th (.scroll-table tr:has(th));
     re-show the mobile header row at equal specificity (this rule comes later). */
  .fail-mtable thead tr{display:table-row}
  .fail-mtable tr{display:table-row;background:none;border:0;border-radius:0;padding:0;margin:0;box-shadow:none}
  .fail-mtable th,.fail-mtable td{display:table-cell;border:0;border-bottom:1px solid var(--border);text-align:left;padding:11px 7px;font-size:13px;vertical-align:middle}
  /* Beat .scroll-table tr td:last-child{border-bottom:none} so the row separator
     runs full width under every column (not just the first three). */
  .fail-mtable tr td:last-child{border-bottom:1px solid var(--border)}
  .fail-mtable td::before{content:none}
  .fail-mtable th{font-size:10px;text-transform:uppercase;letter-spacing:.3px;color:var(--text-tert);font-weight:600;white-space:nowrap}
  .fail-mtable .fmrow{cursor:pointer}
  .fail-mtable .fmrow:active{background:rgba(0,0,0,.04)}
  .fail-mtable .fm-date{white-space:nowrap}          /* keep DD/MM/YYYY on one line */
  .fail-mtable .fm-obj{word-break:break-word}
  .fail-mtable .fm-28{color:var(--red-text);font-weight:700;white-space:nowrap}
  .fail-mtable .fm-pred{font-weight:700;white-space:nowrap}

  /* Section headers inside the (phone-only) enriched details modal. */
  .details-sect{font-size:11px;text-transform:uppercase;letter-spacing:.4px;color:var(--text-tert);font-weight:700;margin:14px 0 8px}
  .details-sect:first-child{margin-top:0}

  /* ===== Prediction page (#page3): declutter for phones ===== */
  /* Hide desktop-only/dense parts. */
  #page3 .explain-panel{display:none}                 /* "Prediction Model v3" methodology explainer */
  #page3 .arp-sub{display:none}                          /* "Per-cube f28 forecast…" sentence */
  #page3 .arp-models{display:none}                       /* "Model comparison (MAE · F1)" row */
  #page3 .pred-filter-bar{display:none}                  /* Mix Design filter/sort bar */
  #page3 .arp-counts,#page3 .arp-searchrow,#page3 .arp-scroll{display:none}  /* desktop At-Risk table bits */

  /* At-Risk: show the mobile HIGH-only list (inner .fail-mtable inherits table
     semantics + header-row fix + tap styling from the Failed-page rules above). */
  .arp-mobile{display:block}

  /* KPI row -> a single summary card (Critical). */
  #page3 .kpi-row{grid-template-columns:1fr}
  #page3 .kpi-row .kpi:not(:first-child){display:none}

  /* Swap the At-Risk badge: hide desktop "at risk" count, show mobile "predicted
     to fail" count. */
  #page3 .arp-badge-d{display:none}
  #page3 .arp-badge-m{display:inline-flex}

  /* Quick Index chips: navigation, recoloured to the soft Overview mix-button
     tints (verdict -> assessment colour), laid out as an even 4-column grid. */
  #page3 .qi-chips{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
  #page3 .qi-chip{padding:7px 8px;font-size:13px;border-radius:9px;border:1px solid transparent;color:var(--text);background:rgba(120,120,128,.10);text-align:center;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  #page3 .qi-chip.v-critical{background:var(--red-bg);border-color:rgba(255,59,48,.28);color:var(--red-text)}
  #page3 .qi-chip.v-caution{background:var(--amber-bg);border-color:rgba(255,159,10,.30);color:var(--amber-text)}
  #page3 .qi-chip.v-investigate{background:var(--blue-bg);border-color:rgba(0,122,255,.28);color:var(--blue-text)}
  #page3 .qi-chip.v-stable{background:var(--green-bg);border-color:rgba(52,199,89,.30);color:var(--green-text)}
  #page3 .qi-chip.v-monitor,
  #page3 .qi-chip.v-dormant{background:rgba(120,120,128,.10);border-color:rgba(120,120,128,.22);color:var(--text-sec)}
  #page3 .qi-chip.qi-active{box-shadow:0 0 0 2px var(--card),0 0 0 3px currentColor}
  #page3 .qi-chip:active{transform:scale(.96)}

  /* Cards hidden by default; a tapped quick-index chip reveals exactly one. */
  #page3 #predCardGrid .pred-card{display:none}
  #page3 #predCardGrid .pred-card.mshow{display:block;animation:mixFade .22s var(--ease)}

  /* ===== Charts + KPI / stat grids ===== */
  .chart-container{height:300px}
  .toggle-row{gap:10px 14px}
  .kpi-row{grid-template-columns:repeat(2,1fr);gap:10px}
  .stat-row{grid-template-columns:repeat(2,1fr)}
  .kpi .value{font-size:21px}

  /* ===== Overview hero stats: 2-up, no spilling dividers ===== */
  .hero{padding:14px 0 4px;gap:6px 0}
  .hero-stat{flex:1 1 42%;padding:8px 10px}
  .hero-stat::after{display:none}          /* vertical dividers look broken once wrapped */
  .hero-stat .hl{font-size:10px}
  .hero-stat .hv{font-size:27px;letter-spacing:-1px}
  .hero-stat .hs{font-size:11px}

  /* ===== Overview plant cards: single column, fitted stat row ===== */
  .plant-grid{grid-template-columns:1fr;gap:12px}
  .plant-card{padding:16px 16px}
  .pc-stats{gap:2px}
  .pc-stat{padding:0 1px}
  .pc-stat .pv{font-size:15px}
  .pc-stat .pl{font-size:9px}

  /* ===== Overview: combine summary + mix performance into flip cards ===== */
  /* The standalone performance table is replaced by per-plant mix buttons. */
  .mix-perf-card{display:none}

  /* Tapping a plant card flips it: stats fade out, mix buttons fade in. */
  .plant-card{cursor:pointer}
  .plant-card.flipped .pc-accent,
  .plant-card.flipped .pc-head,
  .plant-card.flipped .pc-stats,
  .plant-card.flipped .pc-foot{display:none}
  .plant-card.flipped .pc-mix{display:block;animation:mixFade .22s var(--ease)}
  @keyframes mixFade{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}

  /* Flip header: back control + caption. */
  .pc-mix-head{display:flex;align-items:center;gap:10px;margin-bottom:12px}
  .pc-mix-back{
    background:none;border:none;cursor:pointer;font-family:var(--font);
    font-size:15px;font-weight:600;color:var(--blue);padding:2px 0;
    -webkit-tap-highlight-color:transparent;
  }
  .pc-mix-cap{font-size:11px;font-weight:600;letter-spacing:.4px;text-transform:uppercase;color:var(--text-tert)}

  /* Mix-design buttons: soft, muted assessment tints (never full-saturation),
     laid out as an even 4-column grid (matches the Prediction quick index). */
  .pc-mix-btns{display:grid;grid-template-columns:repeat(4,1fr);gap:7px}
  .mix-chip{
    display:inline-flex;align-items:center;justify-content:center;gap:5px;min-width:0;
    background:var(--card);border:1px solid var(--border-strong);
    border-radius:10px;padding:8px 6px;
    font-family:var(--font);font-size:13px;font-weight:600;color:var(--text);
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
    cursor:pointer;-webkit-tap-highlight-color:transparent;
    transition:border-color .15s var(--ease),box-shadow .15s var(--ease);
  }
  .mix-chip::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--text-tert);flex:0 0 auto}
  .mix-chip.assess-critical{background:var(--red-bg);border-color:rgba(255,59,48,.28);color:var(--red-text)}
  .mix-chip.assess-critical::before{background:var(--red)}
  .mix-chip.assess-warning{background:var(--amber-bg);border-color:rgba(255,159,10,.30);color:var(--amber-text)}
  .mix-chip.assess-warning::before{background:var(--amber)}
  .mix-chip.assess-monitor{background:var(--blue-bg);border-color:rgba(0,122,255,.28);color:var(--blue-text)}
  .mix-chip.assess-monitor::before{background:var(--blue)}
  .mix-chip.assess-good,
  .mix-chip.assess-excellent{background:var(--green-bg);border-color:rgba(52,199,89,.30);color:var(--green-text)}
  .mix-chip.assess-good::before,
  .mix-chip.assess-excellent::before{background:var(--green)}
  .mix-chip.active{box-shadow:0 0 0 2px var(--card),0 0 0 3px currentColor}
  .mix-chip:active{transform:scale(.96)}

  /* Per-mix detail card: revealed under the buttons when its chip is active. */
  .pc-mix-panels{margin-top:6px}
  .mix-detail{display:none;animation:mixFade .2s var(--ease)}
  .mix-detail.open{
    display:block;margin-top:12px;padding:12px 14px;
    background:var(--bg);border:1px solid var(--border);border-radius:12px;
  }
  .md-row{display:flex;justify-content:space-between;align-items:baseline;gap:14px;padding:7px 0;border-bottom:1px solid var(--border)}
  .md-row:last-child{border-bottom:none}
  .md-l{flex:0 0 42%;text-align:left;white-space:nowrap;font-size:11px;font-weight:600;color:var(--text-tert);text-transform:uppercase;letter-spacing:.3px}
  /* No base color: lets the .red/.orange/.green coding classes show through. */
  .md-v{text-align:right;font-size:13px;font-weight:600}
  .md-foot{margin-top:12px;text-align:right}

  /* Login card fits a phone. */
  .login-card{width:calc(100vw - 40px);max-width:360px;padding:32px 24px}

  /* Keep tooltips within the viewport. */
  .kpi .tooltip,.apple-tip-host .apple-tip,.apple-tip-inline .apple-tip,.stat-box .stat-tip{max-width:calc(100vw - 32px)}
}

/* Portrait phones on the Strength Trends page: nudge the user to rotate for a
   full-width chart (in landscape the wider desktop layout kicks in naturally). */
@media (max-width:600px) and (orientation:portrait){
  .rotate-hint{
    display:flex;align-items:center;gap:9px;
    background:var(--blue-bg);color:var(--blue-text);
    border:1px solid rgba(0,122,255,.18);border-radius:10px;
    padding:10px 14px;margin-bottom:12px;
    font-size:12px;font-weight:500;line-height:1.4;
  }
  .rotate-hint svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;flex:0 0 auto}
}