/* iter34.170 — Field Flow PRO design tokens + light-theme overrides.
 * Carved out of app-main.css (Phase 3b-bis refactor).
 * MUST be loaded BEFORE app-main.css so variables exist when component
 * selectors reference them. Future redesigns / theme swaps live here.
 */
/* iter34.169 — Field Flow PRO main stylesheet.
 * Extracted from inline <style> in index.html (Phase 3b refactor).
 * Linked via <link rel="stylesheet" href="/css/app-main.css"> in
 * index.html <head> so the cascade and first-paint order are identical
 * to the prior inline-style behaviour.
 */
:root{--accent-blue:#4facfe;--accent-cyan:#00f2fe;--accent-gradient:linear-gradient(135deg,var(--accent-blue) 0%,var(--accent-cyan) 100%);--status-green:#00e676;--status-green-bg:rgba(0,230,118,0.15);--status-yellow:#ffab00;--status-yellow-bg:rgba(255,171,0,0.15);--status-red:#ff5252;--status-red-bg:rgba(255,82,82,0.15);--bg-dark:#0a0a0f;--bg-card:#12121a;--bg-elevated:#1a1a24;--bg-input:#0d0d12;--border-color:rgba(255,255,255,0.08);--border-accent:rgba(79,172,254,0.3);--text-primary:#fff;--text-secondary:rgba(255,255,255,0.7);--text-muted:rgba(255,255,255,0.45);--spacing-xs:4px;--spacing-sm:8px;--spacing-md:16px;--spacing-lg:24px;--spacing-xl:32px;--radius-sm:8px;--radius-md:10px;--radius-lg:16px;--radius-xl:24px;--shadow-sm:0 2px 8px rgba(0,0,0,0.3);--shadow-lg:0 8px 32px rgba(0,0,0,0.5);--shadow-glow:0 0 20px rgba(79,172,254,0.3);--font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;--transition-fast:0.15s ease;--transition-normal:0.25s ease;--tap-target-min:44px;--border-light:rgba(255,255,255,0.12);--border-focus:var(--accent-cyan);--safe-top:env(safe-area-inset-top, 0px);--safe-bottom:env(safe-area-inset-bottom, 0px);--safe-left:env(safe-area-inset-left, 0px);--safe-right:env(safe-area-inset-right, 0px)}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{font-size:16px;-webkit-tap-highlight-color:transparent}
/* iter34.36: user preference — app looks best at 85% zoom on both computer
   and phone, per user feedback. Applied to <html> so it behaves exactly
   like native browser zoom. Can be toggled off via `html.no-app-zoom` class
   (set via Admin → Preferences if we ever surface a UI control). */
html:not(.no-app-zoom){zoom:0.85}
/* Firefox fallback — doesn't fully honor `zoom` in older versions; use a
   matching transform only if zoom didn't apply. Modern Firefox (126+)
   supports zoom natively so this is a safety net. */
@supports not (zoom: 1) {
  html:not(.no-app-zoom) body{transform:scale(0.85);transform-origin:top left;width:117.65%;}
}
body{font-family:var(--font-family);background:var(--bg-dark);color:var(--text-primary);line-height:1.5;min-height:100vh;overflow-x:hidden;-webkit-font-smoothing:antialiased;padding-left:var(--safe-left);padding-right:var(--safe-right)}

/* iter34.167 — Light theme. Applied when html[data-ff-theme="light"] is set
   (per-user, saved in localStorage). Overrides only the surface colors —
   accent gradient / status colors / spacing stay identical so brand identity
   doesn't change.
   iter34.232 — palette darkened. Previous values (page #f5f7fb, cards #fff)
   only differed by ~4% brightness, which the user described as "washed out".
   New palette gives the page bg proper depth so cards actually feel
   elevated. */
:root[data-ff-theme="light"]{
  --bg-dark: #dfe3ec;
  --bg-card: #e8ebf2;
  --bg-elevated: #f0f3f8;
  --bg-input: #f0f3f8;
  --border-color: rgba(15,23,42,0.12);
  --border-light: rgba(15,23,42,0.18);
  --border-accent: rgba(79,172,254,0.45);
  --text-primary: #0f172a;
  --text-secondary: rgba(15,23,42,0.72);
  --text-muted: rgba(15,23,42,0.52);
  --shadow-sm: 0 1px 3px rgba(15,23,42,0.08);
  --shadow-lg: 0 12px 32px rgba(15,23,42,0.14);
  --shadow-glow: 0 0 18px rgba(79,172,254,0.18);
}
:root[data-ff-theme="light"] body{background:var(--bg-dark);}
/* Inputs / search fields use a near-white tint rather than dark translucent. */
:root[data-ff-theme="light"] input,
:root[data-ff-theme="light"] select,
:root[data-ff-theme="light"] textarea{
  background:var(--bg-input)!important;border:1px solid var(--border-light)!important;color:var(--text-primary)!important;
}
:root[data-ff-theme="light"] input::placeholder,
:root[data-ff-theme="light"] textarea::placeholder{color:rgba(15,23,42,0.40)!important;}
/* Sticky headers used a near-black backdrop blur — flip to white in light mode. */
:root[data-ff-theme="light"] .app-header,
:root[data-ff-theme="light"] .report-header{background:rgba(240,243,248,0.95)!important;}
/* Generic translucent panel backgrounds (rgba(255,255,255,0.03/0.04/0.05/0.06)) make
   for invisible "cards" on a white background. Force them onto the bg-card token. */
:root[data-ff-theme="light"] *[style*="background:rgba(255,255,255,0.0"]{background:var(--bg-card)!important;}
:root[data-ff-theme="light"] *[style*="background-color:rgba(255,255,255,0.0"]{background-color:var(--bg-card)!important;}
/* Dashboard customizer outline kept visible on white. */
:root[data-ff-theme="light"] .ff-dash-widget-bar{background:var(--bg-elevated);border-color:rgba(167,139,250,0.45);box-shadow:0 6px 18px rgba(15,23,42,0.10);}
:root[data-ff-theme="light"] .ff-dash-widget-bar .ff-dwb-chip{color:rgba(15,23,42,0.65);}
:root[data-ff-theme="light"] .ff-dash-widget-bar .ff-dwb-chip.is-active{color:#a78bfa;}

/* iter34.168 — sweep override for inline white text/borders that don't flip with
   the CSS variable system. Catches the most common opacity stops used across
   modules (inventory dashboard, FFShopAddItem, FFVanAddItem, etc). */
:root[data-ff-theme="light"] [style*="color:rgba(255,255,255,0.55)"],
:root[data-ff-theme="light"] [style*="color:rgba(255,255,255,0.6)"],
:root[data-ff-theme="light"] [style*="color:rgba(255,255,255,0.65)"],
:root[data-ff-theme="light"] [style*="color:rgba(255,255,255,0.7)"],
:root[data-ff-theme="light"] [style*="color:rgba(255,255,255,0.72)"],
:root[data-ff-theme="light"] [style*="color:rgba(255,255,255,0.75)"]{color:var(--text-secondary)!important;}
:root[data-ff-theme="light"] [style*="color:rgba(255,255,255,0.40)"],
:root[data-ff-theme="light"] [style*="color:rgba(255,255,255,0.45)"],
:root[data-ff-theme="light"] [style*="color:rgba(255,255,255,0.50)"],
:root[data-ff-theme="light"] [style*="color:rgba(255,255,255,0.5)"],
:root[data-ff-theme="light"] [style*="color:rgba(255,255,255,0.30)"]{color:var(--text-muted)!important;}
:root[data-ff-theme="light"] [style*="color:rgba(255,255,255,0.85)"],
:root[data-ff-theme="light"] [style*="color:rgba(255,255,255,0.9)"],
:root[data-ff-theme="light"] [style*="color:rgba(255,255,255,0.95)"],
:root[data-ff-theme="light"] [style*="color:#fff"],
:root[data-ff-theme="light"] [style*="color: #fff"],
:root[data-ff-theme="light"] [style*="color:#ffffff"]{color:var(--text-primary)!important;}
/* Inline backgrounds that use translucent black/dark mode panel tints. */
:root[data-ff-theme="light"] [style*="background:rgba(0,0,0,0.20)"],
:root[data-ff-theme="light"] [style*="background:rgba(0,0,0,0.2)"],
:root[data-ff-theme="light"] [style*="background:#0d0d12"],
:root[data-ff-theme="light"] [style*="background:#0e0f17"],
:root[data-ff-theme="light"] [style*="background:#13141d"]{background:var(--bg-card)!important;color:var(--text-primary)!important;}
/* Borders that hard-code `rgba(255,255,255, 0.10/0.12/0.14)`. */
:root[data-ff-theme="light"] [style*="border:1px solid rgba(255,255,255,0.10)"],
:root[data-ff-theme="light"] [style*="border:1px solid rgba(255,255,255,0.12)"],
:root[data-ff-theme="light"] [style*="border:1px solid rgba(255,255,255,0.14)"],
:root[data-ff-theme="light"] [style*="border:1px solid rgba(255,255,255,0.18)"]{border-color:var(--border-color)!important;}
:root[data-ff-theme="light"] [style*="border-color:rgba(255,255,255,0.10)"],
:root[data-ff-theme="light"] [style*="border-color:rgba(255,255,255,0.12)"]{border-color:var(--border-color)!important;}
/* The "Out of stock" status pill etc. use rgba(245,87,108,0.X) bg + white-ish
   text; on light bg pin the text to the brand red so it stays legible. */
:root[data-ff-theme="light"] [style*="background:rgba(245,87,108,0"][style*="color:#f5576c"]{color:#dc2626!important;}
/* sub-purple chip ("ALL" badge etc) */
:root[data-ff-theme="light"] [style*="rgba(167,139,250,0"][style*="color:#a78bfa"]{color:#7c3aed!important;}

/* iter34.169 — Critical light-mode contrast fixes (from test report iteration_85). */

/* (A) ROOT CAUSE: Several CTAs paint text using color:var(--bg-dark) so they sit
   dark on the accent gradient in dark mode. In light mode --bg-dark becomes a
   near-white tint, so those CTAs go from dark-on-blue → light-on-blue (faint).
   Pin those specific elements to the literal dark ink color in light mode. */
:root[data-ff-theme="light"] .workflow-btn.primary,
:root[data-ff-theme="light"] #admin-menu-toggle,
:root[data-ff-theme="light"] button[style*="background:var(--accent-gradient)"][style*="color:var(--bg-dark)"],
:root[data-ff-theme="light"] [style*="color:var(--bg-dark)"]{color:#0a0e1a!important;}

/* (B) Tech mobile bottom nav — bar bg was hardcoded dark but labels follow
   --text-muted (now dark) → dark-on-dark. Flip the bar surface to white in
   light mode and make labels dark so they read. */
:root[data-ff-theme="light"] #tech-bottom-tab-bar{
  background:rgba(255,255,255,0.96)!important;
  border-top:1px solid var(--border-color)!important;
  box-shadow:0 -4px 16px rgba(15,23,42,0.06);
}
:root[data-ff-theme="light"] #tech-bottom-tab-bar button{color:var(--text-secondary)!important;}
:root[data-ff-theme="light"] #tech-bottom-tab-bar button.active{color:#0066cc!important;}

/* (C) Spaced-rgba sweep — CSS attribute selectors are whitespace-sensitive.
   Many JS modules (inventory-dashboard.js, inventory-export.js, transfers, etc)
   emit `color: rgba(255, 255, 255, 0.55)` with spaces, bypassing the iter34.168
   sweep. Match the spaced variants too. */
:root[data-ff-theme="light"] [style*="color: rgba(255, 255, 255, 0.55)"],
:root[data-ff-theme="light"] [style*="color: rgba(255, 255, 255, 0.6)"],
:root[data-ff-theme="light"] [style*="color: rgba(255, 255, 255, 0.65)"],
:root[data-ff-theme="light"] [style*="color: rgba(255, 255, 255, 0.7)"],
:root[data-ff-theme="light"] [style*="color: rgba(255, 255, 255, 0.72)"],
:root[data-ff-theme="light"] [style*="color: rgba(255, 255, 255, 0.75)"],
:root[data-ff-theme="light"] [style*="color:rgba(255, 255, 255, 0.55)"],
:root[data-ff-theme="light"] [style*="color:rgba(255, 255, 255, 0.6)"],
:root[data-ff-theme="light"] [style*="color:rgba(255, 255, 255, 0.7)"]{color:var(--text-secondary)!important;}
:root[data-ff-theme="light"] [style*="color: rgba(255, 255, 255, 0.40)"],
:root[data-ff-theme="light"] [style*="color: rgba(255, 255, 255, 0.4)"],
:root[data-ff-theme="light"] [style*="color: rgba(255, 255, 255, 0.45)"],
:root[data-ff-theme="light"] [style*="color: rgba(255, 255, 255, 0.5)"],
:root[data-ff-theme="light"] [style*="color: rgba(255, 255, 255, 0.50)"],
:root[data-ff-theme="light"] [style*="color: rgba(255, 255, 255, 0.30)"],
:root[data-ff-theme="light"] [style*="color: rgba(255, 255, 255, 0.3)"]{color:var(--text-muted)!important;}
:root[data-ff-theme="light"] [style*="color: rgba(255, 255, 255, 0.85)"],
:root[data-ff-theme="light"] [style*="color: rgba(255, 255, 255, 0.9)"],
:root[data-ff-theme="light"] [style*="color: rgba(255, 255, 255, 0.95)"],
:root[data-ff-theme="light"] [style*="color: rgba(255, 255, 255, 1)"],
:root[data-ff-theme="light"] [style*="color: #fff"],
:root[data-ff-theme="light"] [style*="color: #ffffff"],
:root[data-ff-theme="light"] [style*="color: white"]{color:var(--text-primary)!important;}

/* (D) MASTER catch-all: any inline rgba(255,255,255,...) text color regardless
   of opacity or spacing — remap to text-secondary (won't break anything that
   isn't already "white-ish text on dark"). */
:root[data-ff-theme="light"] [style*="color:rgba(255,255,255"],
:root[data-ff-theme="light"] [style*="color: rgba(255,255,255"],
:root[data-ff-theme="light"] [style*="color:rgba(255, 255, 255"],
:root[data-ff-theme="light"] [style*="color: rgba(255, 255, 255"]{color:var(--text-secondary)!important;}

/* (E) Border sweep, spaced variants. */
:root[data-ff-theme="light"] [style*="border: 1px solid rgba(255,255,255"],
:root[data-ff-theme="light"] [style*="border:1px solid rgba(255, 255, 255"],
:root[data-ff-theme="light"] [style*="border: 1px solid rgba(255, 255, 255"],
:root[data-ff-theme="light"] [style*="border-color:rgba(255, 255, 255"],
:root[data-ff-theme="light"] [style*="border-color: rgba(255,255,255"],
:root[data-ff-theme="light"] [style*="border-color: rgba(255, 255, 255"]{border-color:var(--border-color)!important;}

/* (F) Background sweep, spaced variants — translucent white panels need bg-card. */
:root[data-ff-theme="light"] [style*="background:rgba(255, 255, 255, 0.0"],
:root[data-ff-theme="light"] [style*="background: rgba(255,255,255,0.0"],
:root[data-ff-theme="light"] [style*="background: rgba(255, 255, 255, 0.0"],
:root[data-ff-theme="light"] [style*="background-color: rgba(255, 255, 255, 0.0"]{background:var(--bg-card)!important;}

/* (G) Brand colors used as TEXT (not bg) — darken in light mode for AA contrast.
   Only matches when the literal hex appears as a foreground color: */
:root[data-ff-theme="light"] [style*="color:#4facfe"],
:root[data-ff-theme="light"] [style*="color: #4facfe"]{color:#0066cc!important;}
:root[data-ff-theme="light"] [style*="color:#a78bfa"],
:root[data-ff-theme="light"] [style*="color: #a78bfa"]{color:#6d28d9!important;}
:root[data-ff-theme="light"] [style*="color:#43e97b"],
:root[data-ff-theme="light"] [style*="color: #43e97b"]{color:#15803d!important;}
:root[data-ff-theme="light"] [style*="color:#22c55e"],
:root[data-ff-theme="light"] [style*="color: #22c55e"]{color:#15803d!important;}
:root[data-ff-theme="light"] [style*="color:#ffa500"],
:root[data-ff-theme="light"] [style*="color: #ffa500"],
:root[data-ff-theme="light"] [style*="color:#ffa502"]{color:#b45309!important;}
:root[data-ff-theme="light"] [style*="color:#f5576c"],
:root[data-ff-theme="light"] [style*="color: #f5576c"]{color:#b91c1c!important;}
:root[data-ff-theme="light"] [style*="color:#2ed573"],
:root[data-ff-theme="light"] [style*="color: #2ed573"]{color:#15803d!important;}
:root[data-ff-theme="light"] [style*="color:#22d3ee"],
:root[data-ff-theme="light"] [style*="color: #22d3ee"]{color:#0e7490!important;}

/* (H) Variable-based accent-blue text used in headings + chips. Map
   var(--accent-blue) text → a deeper blue in light mode (the variable itself
   can't be re-bound globally because backgrounds still need the bright shade). */
:root[data-ff-theme="light"] [style*="color:var(--accent-blue)"]{color:#0066cc!important;}
:root[data-ff-theme="light"] [style*="color: var(--accent-blue)"]{color:#0066cc!important;}
:root[data-ff-theme="light"] [style*="color:var(--text-muted)"][style*="background:rgba(10"],
:root[data-ff-theme="light"] [style*="color: var(--text-muted)"][style*="background:rgba(10"]{color:var(--text-secondary)!important;}

