/* =============================================================================
   biz platform.css — shared dashboard chrome
   -----------------------------------------------------------------------------
   Hoisted from each brand's inline <style> on 16 May 2026.

   What lives here (Bucket A from CSS diff audit):
     - Resets, body, .theme-toggle
     - .header + .user-pill + .role-badge + .btn-sm + .live-dot
     - .range-bar + range buttons + .refresh-btn + .range-select
     - .tabs-bar + .tab + .tab.active
     - .content + .tab-panel + .loading-overlay + .spinner
     - .alert variants
     - .kpi-grid + .kpi-card + .kpi-label + .kpi-value + .kpi-badge variants
     - .section-header + .section-title + .section-meta
     - .chart-grid + .chart-card + .chart-title + .chart-subtitle
     - .data-table base
     - .mono, .right, .center, .pill variants, .status-* variants
     - .pager-btn, .mtd-* helpers
     - .channel-compare + .channel-card + .channel-stat
     - .biz-table-wrap (unified card chrome — replaces .lm-c-table-wrap and .hr-c-table-wrap)

   What stays inline in each dashboard.php (Bucket C + D):
     - :root CSS custom property definitions (HR differs on --accent;
       FoodSquare adds --swiggy/--zomato)
     - body.light-mode value overrides
     - Brand-specific module CSS:
         Le Mill — .lm-c-* contacts module, .attr-*, .rfm-*
         FoodSquare   — .order-filter-* (alert/mum/blr/swiggy/zomato)
         other brands — .store-tag-*, .shipment-*, .delivery-*, .fy-*
         other brands — .dsr-*, .retail-* DSR tables
         HR — .filter-bar, .role-superadmin, .role-management, .hr-c-table-wrap
              navy-header inner-th rules (still scoped, see below)
     - Brand-specific .header-logo treatment

   Required custom properties (must be defined in each dashboard's :root):
     --bg, --surface, --card, --border, --border-bright, --text, --muted,
     --dim, --accent, --gold, --danger, --warning, --success
============================================================================= */

/* --- fonts (FoodSquare brand system) ----------------------------------- *
   PRIMARY TYPE  : Moret   — headlines (Regular, kerning -20)
   BODY COPY     : Geist   — body + CTAs (Regular..Bold)
   DATA / NUMERIC: Geist Mono
   Loaded here so EVERY page that includes platform.css inherits the fonts.
   ----------------------------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Geist:wght@300;400;500;600;700;800&family=Geist+Mono:wght@400;500;600&family=DM+Serif+Display:ital@0;1&display=swap');

/* Moret (commercial typeface, not on Google Fonts) — self-hosted. Supplied as a
   single "Book" weight OTF; the font-weight range maps every headline weight
   request (300..700) onto this one file so there are no faux-bold 404s. If the
   file is ever missing, headlines fall back to DM Serif Display. */
@font-face{font-family:'Moret';src:url('/biz/assets/fonts/Moret.otf') format('opentype');font-weight:300 700;font-style:normal;font-display:swap;}

/* Brand font stacks — referenced by BOTH platform.css and platform-signal.css */
:root{
  --font-head:'Moret','DM Serif Display',Georgia,'Times New Roman',serif;
  --font-body:'Geist','Inter',system-ui,-apple-system,sans-serif;
  --font-mono:'Geist Mono','DM Mono',ui-monospace,SFMono-Regular,monospace;
}

/* --- reset + body ------------------------------------------------------- */
*{margin:0;padding:0;box-sizing:border-box;}
body{background:var(--bg);color:var(--text);font-family:var(--font-body);font-size:14px;line-height:1.6;letter-spacing:-.01em;}
h1,h2,h3,h4{font-family:var(--font-head);letter-spacing:-.02em;}

/* --- theme toggle ------------------------------------------------------- */
.theme-toggle{width:34px;height:34px;border-radius:7px;border:1px solid var(--border);background:transparent;color:var(--muted);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:16px;transition:all .2s;flex-shrink:0;}
.theme-toggle:hover{border-color:var(--accent);color:var(--text);}

/* --- header / nav ------------------------------------------------------- */
.header{position:sticky;top:0;z-index:100;background:rgba(10,11,13,.96);backdrop-filter:blur(20px);border-bottom:1px solid var(--border);padding:0 24px;display:flex;align-items:center;justify-content:space-between;height:56px;gap:16px;}
.logo-name{font-family:var(--font-head);font-size:20px;letter-spacing:.05em;}
.logo-badge{font-family:var(--font-mono);font-size:10px;color:var(--muted);border:1px solid var(--border-bright);padding:2px 8px;border-radius:3px;margin-left:10px;}
.header-right{display:flex;align-items:center;gap:12px;}
.user-pill{font-family:var(--font-mono);font-size:11px;color:var(--muted);display:flex;align-items:center;gap:8px;}
.role-badge{padding:2px 8px;border-radius:4px;font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;}
.role-admin{background:rgba(212,169,68,.15);color:var(--gold);}
.role-ho_team{background:rgba(95,196,155,.15);color:var(--success);}
.role-user{background:rgba(124,158,248,.12);color:var(--accent);}
.btn-sm{padding:6px 13px;border-radius:6px;font-size:11px;font-weight:700;letter-spacing:.06em;cursor:pointer;border:none;transition:opacity .2s;text-decoration:none;display:inline-flex;align-items:center;gap:5px;}
.btn-admin{background:rgba(212,169,68,.15);color:var(--gold);}
.btn-logout{background:rgba(224,95,95,.12);color:var(--danger);}
.btn-sm:hover{opacity:.7;}
.live-dot{width:6px;height:6px;background:var(--success);border-radius:50%;animation:pulse 2s infinite;display:inline-block;}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.3}}

/* --- range / date picker bar ------------------------------------------- */
.range-bar{background:var(--surface);border-bottom:1px solid var(--border);padding:10px 24px;display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
.range-label{font-family:var(--font-mono);font-size:10px;color:var(--muted);letter-spacing:.1em;text-transform:uppercase;}
.range-btns{display:flex;gap:4px;}
.range-btn{padding:5px 13px;border-radius:5px;font-size:11px;font-weight:700;cursor:pointer;border:1px solid var(--border);background:transparent;color:var(--muted);transition:all .18s;font-family:var(--font-body);}
.range-btn:hover{color:var(--text);border-color:var(--border-bright);}
.range-btn.active{background:var(--accent);color:#0a0b0d;border-color:var(--accent);}
.range-info{font-family:var(--font-mono);font-size:10px;color:var(--dim);margin-left:4px;}
.refresh-btn{margin-left:auto;padding:5px 13px;border-radius:5px;font-size:11px;font-weight:700;border:1px solid var(--border);background:transparent;color:var(--muted);cursor:pointer;font-family:var(--font-body);transition:all .18s;}
.custom-apply-btn{margin-left:0;}
.refresh-btn:hover{color:var(--text);border-color:var(--accent);}
.range-select{padding:5px 10px;border-radius:5px;font-size:11px;font-weight:700;border:1px solid var(--border);background:var(--surface);color:var(--text);cursor:pointer;font-family:var(--font-body);transition:all .18s;outline:none;}
.range-select:hover,.range-select:focus{border-color:var(--accent);}

/* --- tabs --------------------------------------------------------------- */
.tabs-bar{background:var(--surface);border-bottom:1px solid var(--border);padding:0 24px;display:flex;gap:2px;overflow-x:auto;}
.tab{padding:12px 16px;cursor:pointer;color:var(--muted);font-size:12px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;border-bottom:2px solid transparent;transition:all .18s;white-space:nowrap;}
.tab:hover{color:var(--text);}
.tab.active{color:var(--text);border-bottom-color:var(--accent);}

/* --- content + tab panels ---------------------------------------------- */
.content{padding:24px;max-width:1380px;margin:0 auto;}
.tab-panel{display:none;}
.tab-panel.active{display:block;}

/* --- loading overlay --------------------------------------------------- */
.loading-overlay{position:fixed;inset:0;z-index:200;background:rgba(10,11,13,.75);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;flex-direction:column;gap:16px;}
.loading-overlay.hidden{display:none;}
.spinner{width:34px;height:34px;border:3px solid var(--border-bright);border-top-color:var(--accent);border-radius:50%;animation:spin .7s linear infinite;}
@keyframes spin{to{transform:rotate(360deg)}}
.loading-text{font-family:var(--font-mono);font-size:12px;color:var(--muted);letter-spacing:.1em;}

/* --- alerts ------------------------------------------------------------- */
.alert{display:flex;align-items:flex-start;gap:14px;padding:14px 18px;border-radius:10px;margin-bottom:20px;border:1px solid;}
.alert-crisis{background:rgba(224,95,95,.08);border-color:rgba(224,95,95,.3);}
.alert-warning{background:rgba(224,164,95,.08);border-color:rgba(224,164,95,.3);}
.alert-icon{font-size:18px;flex-shrink:0;margin-top:1px;}
.alert-title{font-weight:700;font-size:13px;margin-bottom:2px;}
.alert-crisis .alert-title{color:var(--danger);}
.alert-warning .alert-title{color:var(--warning);}
.alert-body{font-size:12px;color:var(--muted);line-height:1.55;}

/* --- KPI cards --------------------------------------------------------- */
.kpi-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:12px;margin-bottom:22px;}
.kpi-card{background:var(--card);border:1px solid var(--border);border-radius:12px;padding:16px;position:relative;overflow:visible;}
.kpi-card::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:var(--kpi-color,var(--accent));}
.kpi-label{font-family:var(--font-mono);font-size:10px;color:var(--muted);letter-spacing:.1em;text-transform:uppercase;margin-bottom:6px;display:flex;align-items:center;gap:5px;}
.kpi-dot{width:5px;height:5px;border-radius:50%;flex-shrink:0;}
.kpi-value{font-family:var(--font-mono);font-size:24px;font-weight:500;line-height:1;margin-bottom:4px;white-space:nowrap;overflow:visible;}
.kpi-sub{font-size:11px;color:var(--muted);}
.kpi-badge{display:inline-block;font-size:10px;font-weight:600;padding:2px 7px;border-radius:4px;margin-top:6px;}
.badge-up{background:rgba(95,196,155,.15);color:var(--success);}
.badge-down{background:rgba(224,95,95,.15);color:var(--danger);}
.badge-warn{background:rgba(224,164,95,.15);color:var(--warning);}
.badge-info{background:rgba(124,158,248,.15);color:var(--accent);}
.badge-crisis{background:rgba(224,95,95,.2);color:var(--danger);}

/* --- section header + chart cards -------------------------------------- */
.section-header{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:14px;padding-bottom:10px;border-bottom:1px solid var(--border);}
.section-title{font-family:var(--font-head);font-size:20px;font-style:normal;font-weight:500;letter-spacing:-.02em;}
.section-meta{font-family:var(--font-mono);font-size:10px;color:var(--muted);}
.chart-grid{display:grid;gap:12px;margin-bottom:22px;}
.chart-2col{grid-template-columns:1fr 1fr;}
.chart-3col{grid-template-columns:2fr 1fr;}
.chart-card{background:var(--card);border:1px solid var(--border);border-radius:12px;padding:20px;}
.chart-card>div[style*="height"]{position:relative;width:100%;}
.chart-title{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:2px;}
.chart-subtitle{font-size:10px;color:var(--dim);margin-bottom:16px;font-family:var(--font-mono);}

/* --- data table base --------------------------------------------------- */
.data-table{width:100%;border-collapse:collapse;font-size:12.5px;}
.data-table th{font-family:var(--font-mono);font-size:10px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);padding:9px 12px;text-align:left;border-bottom:1px solid var(--border);white-space:nowrap;}
.data-table td{padding:9px 12px;border-bottom:1px solid rgba(31,36,48,.5);vertical-align:middle;}
.data-table tr:last-child td{border-bottom:none;}
.data-table tr:hover td{background:rgba(255,255,255,.015);}

/* --- action buttons — FoodSquare palette (SINGLE SOURCE) ---------------
   Canonical .biz-btn-* definitions. Do NOT redefine these inline in any
   dashboard/partial — edit them here only. Colours are the food palette:
     Primary  Cool Blue #3F73B7   Edit     Cheddar  #E1A50F (dark text)
     Danger   Mulled Wine #62192C Ghost    token border/muted (Cancel/View)
     Export   Leaf Mid #6F9662    Reload   Blue Mid #B4DBE2 (dark text)
     Template Cheddar Gold #FFCF56 (dark)  Upload   Loaf Brown #714E1E
   ----------------------------------------------------------------------- */
.biz-btn-primary,.biz-btn-edit,.biz-btn-danger,.biz-btn-ghost,.biz-export-btn,.biz-reload-btn,.btn-download-template,.biz-upload-btn{
  padding:7px 14px;border-radius:6px;font-size:12px;font-weight:600;font-family:inherit;cursor:pointer;
  display:inline-flex;align-items:center;gap:6px;line-height:1;white-space:nowrap;border:1px solid transparent;
  transition:background-color .12s,border-color .12s,color .12s;}
.biz-btn-primary{background:#3F73B7;border-color:#3F73B7;color:#fff;}
.biz-btn-primary:hover{background:#345F97;border-color:#345F97;}
.biz-btn-edit{background:#E1A50F;border-color:#E1A50F;color:#1C0D04;}
.biz-btn-edit:hover{background:#C28D0C;border-color:#C28D0C;}
.biz-btn-danger{background:#62192C;border-color:#62192C;color:#fff;}
.biz-btn-danger:hover{background:#4E1322;border-color:#4E1322;}
.biz-btn-ghost{background:transparent;border-color:var(--border);color:var(--muted);}
.biz-btn-ghost:hover{background:var(--surface);border-color:var(--border-bright);color:var(--text);}
.biz-export-btn{background:#6F9662;border-color:#6F9662;color:#143312;}
.biz-export-btn:hover{background:#5C8052;border-color:#5C8052;}
.biz-reload-btn{background:#B4DBE2;border-color:#B4DBE2;color:#16384B;}
.biz-reload-btn:hover{background:#9CC9D3;border-color:#9CC9D3;}
.btn-download-template{background:#FFCF56;border-color:#FFCF56;color:#1C0D04;}
.btn-download-template:hover{background:#F0BE3E;border-color:#F0BE3E;}
.biz-upload-btn{background:#714E1E;border-color:#714E1E;color:#fff;}
.biz-upload-btn:hover{background:#5A3E18;border-color:#5A3E18;}
.biz-btn-primary:disabled,.biz-btn-edit:disabled,.biz-btn-danger:disabled,.biz-btn-ghost:disabled,.biz-export-btn:disabled,.biz-reload-btn:disabled,.btn-download-template:disabled,.biz-upload-btn:disabled{opacity:.5;cursor:not-allowed;}
@media(max-width:768px){.biz-btn-primary,.biz-btn-edit,.biz-btn-danger,.biz-btn-ghost,.biz-export-btn,.biz-reload-btn,.btn-download-template,.biz-upload-btn{padding:7px 10px;font-size:11px;}}

/* --- helpers + pills + statuses ---------------------------------------- */
.mono{font-family:var(--font-mono);}
.right{text-align:right;}
.center{text-align:center;}
.pill{display:inline-block;padding:3px 9px;border-radius:20px;font-size:10px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;}
.pill-scale{background:rgba(95,196,155,.15);color:var(--success);}
.pill-pause{background:rgba(224,95,95,.15);color:var(--danger);}
.pill-monitor{background:rgba(224,164,95,.15);color:var(--warning);}
.pill-refresh{background:rgba(200,125,232,.15);color:#c87de8;}
.status-paid{background:rgba(95,196,155,.15);color:var(--success);padding:3px 8px;border-radius:4px;font-size:10px;font-weight:700;}
.status-fulfilled{background:rgba(95,196,155,.15);color:var(--success);padding:3px 8px;border-radius:4px;font-size:10px;font-weight:700;}
.status-unfulfilled{background:rgba(212,169,68,.15);color:var(--warning);padding:3px 8px;border-radius:4px;font-size:10px;font-weight:700;}
.status-in-progress{background:rgba(124,158,248,.15);color:var(--accent);padding:3px 8px;border-radius:4px;font-size:10px;font-weight:700;}
.status-return{background:rgba(224,95,95,.15);color:var(--danger);padding:3px 8px;border-radius:4px;font-size:10px;font-weight:700;}
.status-refunded{background:rgba(107,114,128,.15);color:var(--muted);padding:3px 8px;border-radius:4px;font-size:10px;font-weight:700;}

/* --- pager + mtd helpers ---------------------------------------------- */
.pager-btn{background:var(--surface);border:1px solid var(--border);color:var(--muted);padding:5px 10px;border-radius:4px;font-size:11px;cursor:pointer;transition:all .2s;}
.pager-btn:hover{border-color:var(--accent);color:var(--text);}
.pager-btn.active{background:var(--accent);color:#0a0b0d;border-color:var(--accent);font-weight:700;}
.mtd-section{font-weight:700;background:var(--surface);color:var(--text);font-size:10px;letter-spacing:.06em;text-transform:uppercase;}
.mtd-growth-pos{color:var(--success);}
.mtd-growth-neg{color:var(--danger);}
.mtd-highlight{background:rgba(124,158,248,.06);font-weight:600;}

/* --- channel cards ----------------------------------------------------- */
.channel-compare{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px;margin-bottom:22px;}
.channel-card{background:var(--card);border:1px solid var(--border);border-radius:12px;padding:18px;}
.channel-header{display:flex;align-items:center;gap:10px;margin-bottom:14px;padding-bottom:12px;border-bottom:1px solid var(--border);}
.channel-icon{width:28px;height:28px;border-radius:6px;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;}
.channel-stat{display:flex;justify-content:space-between;align-items:baseline;padding:6px 0;border-bottom:1px solid rgba(31,36,48,.4);}
.channel-stat:last-child{border-bottom:none;}
.channel-stat-label{font-family:var(--font-mono);font-size:10px;color:var(--muted);}
.channel-stat-value{font-family:var(--font-mono);font-size:12px;font-weight:500;}

/* --- biz-table-wrap (unified card chrome) -----------------------------
   Replaces .lm-c-table-wrap (Le Mill) and .hr-c-table-wrap (HR).
   Provides white-card chrome around any inner table (.data-table,
   .lm-c-table, or any per-tab variant). Inner-table styling lives with
   that table's own selector — this wrap is chrome only.

   Brand-specific inner-th overrides (e.g. HR navy headers) stay scoped
   in their own dashboard.php via `.biz-table-wrap[data-style="hr-navy"]`
   or a body class — do not bake brand colours into this base rule.
----------------------------------------------------------------------- */
.biz-table-wrap{background:var(--card);border:1px solid var(--border);border-radius:10px;overflow:hidden;}
.biz-table-wrap .data-table{margin:0;}
.biz-table-wrap .data-table tbody tr:last-child td{border-bottom:none;}

/* =============================================================================
   Mobile responsive layer — Phase 5 (PWA.md), added 2026-05-30
   --------------------------------------------------------------------------
   Width-conditional only. Every rule below sits inside @media (max-width: X)
   so viewports ≥769px are byte-identical to the desktop layout above.
   Brand-specific module CSS (.dsr-*, .rfm-*, .olabi-*, .lm-c-*, etc.) carries
   its own @media block at the bottom of each brand's dashboard.php inline
   <style>. This file owns the shared chrome only.
   --------------------------------------------------------------------------
   Tested viewports: 390px (iPhone 14), 412px (Pixel 7), 375px (iPhone SE),
   768px (iPad mini portrait — last px BEFORE this breakpoint kicks in).
============================================================================= */

@media (max-width: 768px) {
  /* ── header: compress, drop noise ─────────────────────────────────── */
  .header{padding:0 12px !important;height:52px !important;gap:8px !important;}
  .header img{max-height:28px !important;}        /* brand logos render at 36px desktop — shrink for mobile */
  .logo-name{font-size:17px !important;letter-spacing:.03em !important;}
  .logo-badge{display:none !important;}
  .header-right{gap:6px !important;}
  .user-pill{display:none !important;}            /* name+role pill — defeats both inline styles AND brand-level cascade overrides */
  .btn-sm{padding:5px 9px !important;font-size:10px !important;letter-spacing:.04em !important;}
  .theme-toggle{width:30px !important;height:30px !important;font-size:14px !important;}

  /* ── range bar: tighter wrap, drop the "RANGE" label ──────────────── */
  .range-bar{padding:8px 12px !important;gap:8px !important;}
  .range-label{display:none !important;}
  .range-btns{flex-wrap:wrap !important;gap:3px !important;}
  .range-btn{padding:5px 9px !important;font-size:10px !important;}
  .range-info{display:none !important;}           /* (date span tucked away; preset select tells the story) */
  .refresh-btn{margin-left:0 !important;padding:5px 10px !important;font-size:10px !important;}
  .range-select{padding:5px 9px !important;font-size:10px !important;}

  /* ── tabs: keep horizontal scroll, add snap for touch ─────────────── */
  .tabs-bar{padding:0 12px !important;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;scrollbar-width:none;}
  .tabs-bar::-webkit-scrollbar{display:none;}
  .tab{scroll-snap-align:start;padding:11px 13px !important;font-size:11px !important;letter-spacing:.05em !important;}

  /* ── content: shrink padding, reserve room for floating ⇆ Brands button ──*/
  .content{padding:14px 12px calc(80px + env(safe-area-inset-bottom, 0px)) !important;overflow-x:hidden;}

  /* ── KPI grid: ALWAYS 2-col on mobile.
     `!important` defeats both inline style="grid-template-columns:repeat(N,1fr)"
     AND brand-level @media (max-width: 900px) rules that re-set to N columns.
     This was the root cause of the FoodSquare overflow on May 30 2026. ───── */
  .kpi-grid{grid-template-columns:repeat(2,minmax(0,1fr)) !important;gap:8px !important;margin-bottom:16px !important;}
  .kpi-card{padding:12px !important;border-radius:10px !important;}
  .kpi-value{font-size:18px !important;}
  .kpi-label{font-size:9px !important;letter-spacing:.08em !important;}
  .kpi-sub,.kpi-badge{font-size:9px !important;}

  /* ── section header + chart cards ─────────────────────────────────── */
  .section-header{flex-wrap:wrap !important;gap:6px !important;margin-bottom:10px !important;padding-bottom:8px !important;}
  .section-title{font-size:16px !important;}
  .section-meta{font-size:9px !important;}
  .chart-grid{gap:10px !important;margin-bottom:16px !important;}
  /* Charts ALWAYS 1-per-row on mobile (defeats brand @media 900px → 2-col rules) */
  .chart-2col,.chart-3col{grid-template-columns:1fr !important;}
  .chart-card{padding:14px !important;border-radius:10px !important;}
  .chart-card>div[style*="height"]{min-height:220px;max-width:100%;}    /* keep charts legible on small screens; prevent bleed */
  .chart-card canvas{max-width:100% !important;height:auto !important;}

  /* ── catch-all: any inline 2-col / 3-col grid inside .content collapses to 1fr
       Targets the common FoodSquare pattern of anonymous <div style="display:grid;grid-template-columns:1fr 1fr">
       wrappers used for side-by-side cards. Stops bleed past viewport. ──*/
  .content div[style*="grid-template-columns:1fr 1fr"],
  .content div[style*="grid-template-columns: 1fr 1fr"],
  .content div[style*="grid-template-columns:1fr 2fr"],
  .content div[style*="grid-template-columns:2fr 1fr"],
  .content div[style*="grid-template-columns:1fr 1fr 1fr"]{
    grid-template-columns:1fr !important;
  }
  /* Repeat(N,1fr) — used in FoodSquare Overview Channel Summary (7-col),
     Channel Breakdown (5-col) etc. Collapse to 2-col on mobile (KPI scan unit). */
  .content div[style*="grid-template-columns:repeat"]{
    grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
    gap:8px !important;
  }
  /* When the columns collapse, any cell content with overflow becomes a horizontal-scroll source —
     force min-width:0 + word-break so labels wrap inside their cells instead of pushing the column wider. */
  .content .kpi-card,.content .kpi-card *{min-width:0;}
  .content .kpi-value{word-break:break-word;}

  /* ── data tables: scroll horizontally inside their card wrap ──────── */
  .biz-table-wrap{overflow-x:auto !important;-webkit-overflow-scrolling:touch;}
  .data-table{font-size:11.5px;}
  .data-table th,.data-table td{padding:7px 10px;}

  /* ── channel cards: stack ─────────────────────────────────────────── */
  .channel-compare{grid-template-columns:1fr !important;gap:10px !important;margin-bottom:16px !important;}
  .channel-card{padding:14px !important;border-radius:10px !important;}

  /* ── alerts ───────────────────────────────────────────────────────── */
  .alert{padding:10px 12px !important;gap:10px !important;margin-bottom:14px !important;}
  .alert-title{font-size:12px !important;}
  .alert-body{font-size:11px !important;}

  /* ── pager + pills: tighter, AND must wrap to second line on mobile ── */
  .pager-btn{padding:5px 9px !important;font-size:10px !important;}
  .pill{padding:2px 7px !important;font-size:9px !important;}
  /* Force any flex/inline-flex container with a .pager-btn child to wrap onto multiple lines.
     :has() is supported in all modern PWA-capable browsers (Chrome 105+, Safari 15.4+, Firefox 121+). */
  *:has(> .pager-btn){flex-wrap:wrap !important;row-gap:6px !important;}
  /* Explicit fallback for inline-styled pager divs across brands (id ends with "Pager" or "pager").
     Many dashboards use <div style="display:flex;gap:6px" id="orderPager"> etc. — :has() may not
     fire on older WebView; this attribute selector is a bullet-proof safety net. */
  div[id$="Pager"][style*="display:flex"],
  div[id$="pager"][style*="display:flex"]{
    flex-wrap:wrap !important;
    row-gap:6px !important;
  }
  /* Broad fallback for named pager classes used across brands. */
  .olabi-pager,.orders-pager,.lm-rq-pager,.lm-ro-pager,.lm-ret-pager,.lm-inv-pager,.lm-soh-pager,
  .lr-ro-pager,.lr-rq-pager,.lr-co-pager,.lr-c-pagination,.emp-pager,.rp-pager,.ref-pager,.oc-pager,
  .soh-pager,.kpi-pager,.ss-pager,.pp-pager,.iv-pager{flex-wrap:wrap !important;row-gap:6px !important;}

  /* ── global page guard: stop any element bleeding past the viewport ─ */
  body{overflow-x:hidden;}

  /* ── RFM tab — compact across all brands (FoodSquare) ─────
     Desktop RFM has wide tables (min-width:760px) and a 5-row "visual board"
     with axis bands. On mobile those overflow / waste vertical room. ── */
  .rfm-report-table{min-width:0 !important;}
  .rfm-points-table{min-width:0 !important;}
  .rfm-report-table-wrap,.rfm-points-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;}
  /* Hide the recency-band band-only row on mobile (the per-card recency label is shown inside each card) */
  .rfm-axis-recency-title,.rfm-axis-recency-band{display:none !important;}
  /* Stat-grid inside RFM cards: keep 2-col (icons + values stay readable) */
  .rfm-stat-grid{grid-template-columns:1fr 1fr !important;}
  .rfm-stat-cell{font-size:12px;padding:8px 10px;}
  .rfm-group-stat-title{font-size:15px !important;padding:10px 12px !important;}
  /* Tile dropzone: 2-col on mobile (was 4-col desktop, 2-col at 980px from brand rules) */
  .rfm-tiles-dropzone{grid-template-columns:repeat(2,minmax(0,1fr)) !important;gap:8px !important;}
  /* Score tiles in dropzone need to shrink */
  .rfm-score-tile{min-width:0;}
  .rfm-score-body{grid-template-columns:1fr 1fr;}
  .rfm-score-cell{font-size:11px;padding:6px 8px;min-height:36px;}
  .rfm-score-head{font-size:18px;padding:5px 9px;}
}

/* Phones in portrait below ~400px — squeeze the chrome a touch more. */
@media (max-width: 400px) {
  .header{padding:0 10px !important;gap:5px !important;}
  .header-right .btn-admin{display:none !important;}    /* Admin tab still reachable from the tab bar */
  .content{padding:12px 10px calc(80px + env(safe-area-inset-bottom, 0px)) !important;}
  .logo-name{font-size:16px !important;}
  .tab{padding:11px 11px !important;}
}

/* ── Toast notifications (window.toast) — Jun 7 2026 ──────────────────────
   Companion CSS for /biz/assets/platform-utils.js's toast() helper. Three
   variants: info (grey, default), success (green), error (red, lingers 5s).
   Multiple toasts stack top-right with a small gap.
*/
.biz-toast-root {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 99999;
    display: flex;
    flex-direction: column;
    gap: 8px;
    pointer-events: none;
}
.biz-toast {
    min-width: 240px;
    max-width: 360px;
    padding: 12px 16px;
    border-radius: 6px;
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 600;
    color: #ffffff;
    background: #374151;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    opacity: 0;
    transform: translateX(20px);
    transition: opacity .25s ease, transform .25s ease;
    pointer-events: auto;
}
.biz-toast-show {
    opacity: 1;
    transform: translateX(0);
}
.biz-toast-info    { background: #374151; }
.biz-toast-success { background: #047857; }
.biz-toast-error   { background: #b91c1c; }
@media (max-width: 600px) {
    .biz-toast-root { top: 12px; right: 12px; left: 12px; }
    .biz-toast { min-width: 0; max-width: 100%; }
}

/* Category-scope honesty badges ------------------------------------------ */
.cat-scope-note {
    font-size: 11px;
    color: var(--muted, #8891a5);
    background: rgba(124, 158, 248, .07);
    border: 1px solid rgba(124, 158, 248, .18);
    border-radius: 5px;
    padding: 5px 10px;
    margin-bottom: 10px;
    display: inline-block;
}
.cat-badge {
    display: inline-block;
    font-size: 9px;
    font-weight: 600;
    color: var(--muted, #8891a5);
    background: rgba(124, 158, 248, .10);
    border: 1px solid rgba(124, 158, 248, .20);
    border-radius: 3px;
    padding: 1px 4px;
    margin-left: 3px;
    vertical-align: middle;
    letter-spacing: .01em;
    cursor: default;
}