/* ============================================================
   styles.css — extracted verbatim from index.html (mechanical
   file separation, no CSS was reorganized/renamed/merged).
   Section 1: originally the <head> <style> block (lines 23-2774).
   ============================================================ */
*{box-sizing:border-box;margin:0;padding:0}

/* ============================================================
   DESIGN SYSTEM — structural tokens (theme-independent)
   Type scale, spacing, radii, motion, elevation. Colors live in
   the two theme blocks below (body.theme-noir / body.theme-pladis).
============================================================ */
:root{
  --fs-2xs:.68rem; --fs-xs:.74rem; --fs-sm:.82rem; --fs-base:.92rem;
  --fs-md:1.05rem; --fs-lg:1.25rem; --fs-xl:1.6rem; --fs-2xl:2rem;
  --radius-sm:8px; --radius-md:12px; --radius-lg:18px; --radius-pill:999px;
  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:24px; --space-6:32px;
  --tap:44px; /* minimum touch target */
  --ease:cubic-bezier(.2,.7,.2,1);
  --dur:.18s;
}

/* ============================================================
   THEME 1 — "Violet Noir" (default) — purple + black, professional gradient
============================================================ */
body.theme-noir{
  --primary:#7C3AED; --primary-dark:#5B21B6; --primary-light:#A78BFA;
  --navy:#D8CCFB; --accent:#7C3AED; --accent-2:#38BDF8;
  --green:#34D399; --red:#F87171; --amber:#FBBF24;
  --bg:#0B0712;
  --bg-grad:radial-gradient(circle at 15% 0%, rgba(124,58,237,.16), transparent 42%),
             radial-gradient(circle at 100% 30%, rgba(56,189,248,.06), transparent 40%),
             linear-gradient(165deg,#0B0712 0%,#170F27 48%,#0B0712 100%);
  --white:#170F24; --surface-2:#1D1330; --border:#31234A;
  --text:#F4EFFB; --muted:#B4A5CE;
  --card-shadow:0 10px 32px rgba(0,0,0,.55), 0 2px 10px rgba(0,0,0,.35);
  --header-bg:linear-gradient(120deg,#1D1130 0%,#120A1F 100%);
  --grad:linear-gradient(135deg,#8B5CF6 0%,#2A1150 55%,#100819 100%);
  --form-radius:12px; --form-radius-sm:9px;
  --form-shadow:0 6px 22px rgba(0,0,0,.4);
  --form-shadow-lg:0 16px 44px rgba(0,0,0,.55);
  --form-border:rgba(139,92,246,.35);
  --form-focus:0 0 0 3px rgba(139,92,246,.38);
  --form-surface:#170F24; --form-soft:#130B1F; --form-ink:#F4EFFB;
  --scrollbar-track:#170F24; --scrollbar-thumb:#4C2E85;
  color-scheme:dark;
}

/* ============================================================
   THEME 2 — "pladis" — brand palette (red / near-black / gold)
   Sampled from pladisglobal.com — primary #EA0029, ink #231F20
============================================================ */
body.theme-pladis{
  /* "Pladis Corporate" — v91 color-only polish. --primary/--primary-dark/
     --primary-light/--red/--accent and every portal identity hue (Safety/
     Maintenance/Production/Visitor Management, set elsewhere) are
     UNCHANGED — same brand red, same semantic danger red, same portal
     colors. What changed is the neutral "canvas" tokens that were
     carrying a red tint into places that should read as clean corporate
     neutral (page background, card/secondary surfaces, borders, shadows,
     every form input's resting border, the scrollbar) plus --header-bg,
     which was a solid burgundy->ink panel behind every page's header —
     now a neutral ink gradient (both stops are lighter/darker shades of
     the same existing --navy/--text ink #231F20, not a new invented
     color). --grad is intentionally left red (it drives .btn-primary —
     the brief explicitly wants primary buttons to stay red) but its
     handful of large-panel, non-button consumers (footer strip, portal
     sidebar default, ambient home glow) get a pladis-scoped neutral
     override further down instead of inheriting the red gradient. */
  --primary:#EA0029; --primary-dark:#A8001E; --primary-light:#FF6B7A;
  --navy:#231F20; --accent:#EA0029; --accent-2:#231F20;
  --green:#16A34A; --red:#EA0029; --amber:#B45309; --gold:#FFDD00;
  --bg:#F7F7F6;
  --bg-grad:radial-gradient(circle at 12% 0%, rgba(234,0,41,.035), transparent 42%),
             linear-gradient(165deg,var(--form-surface) 0%,#F6F5F4 55%,var(--form-surface) 100%);
  --white:var(--form-surface); --surface-2:#F6F5F4; --border:#E7E4E2;
  --text:#231F20; --muted:#716864;
  --card-shadow:0 2px 10px rgba(35,31,32,.07), 0 14px 30px rgba(35,31,32,.06);
  --header-bg:linear-gradient(120deg,#3C3637 0%,#0E0C0D 100%);
  --grad:linear-gradient(135deg,#EA0029 0%,#5C0011 55%,#231F20 100%);
  --form-radius:12px; --form-radius-sm:9px;
  --form-shadow:0 4px 20px rgba(35,31,32,.07);
  --form-shadow-lg:0 14px 36px rgba(35,31,32,.1);
  --form-border:rgba(35,31,32,.16);
  --form-focus:0 0 0 3px rgba(234,0,41,.14);
  --form-surface:#FFFFFF; --form-soft:#F6F5F4; --form-ink:#231F20;
  --scrollbar-track:#F7F7F6; --scrollbar-thumb:#B9B3AE;
  color-scheme:light;
}

/* pladis theme: header chrome stays dark (brand burgundy→black) even though
   the page surface is light — mirrors pladisglobal.com's hero treatment */
body.theme-pladis .header,
body.theme-pladis .sys-title,
body.theme-pladis .sys-sub,
body.theme-pladis .header-nav{ color:#fff; }
body.theme-pladis .sys-sub{ color:rgba(255,255,255,.72); }
body.theme-pladis .header .logo-area *{ color:#fff; }

body{
  font-family:system-ui,-apple-system,BlinkMacSystemFont,sans-serif;
  background:var(--bg-grad),var(--bg);
  background-repeat:no-repeat;
  background-size:100% 100%;
  color:var(--text);
  min-height:100vh;
  transition:background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
::selection{ background:var(--primary); color:#fff; }
:focus-visible{ outline:2px solid var(--accent-2); outline-offset:2px; border-radius:4px; }
body.theme-switching{ animation:themeFlash .4s ease }
@keyframes themeFlash{ 0%{filter:brightness(1.16) saturate(1.1)} 100%{filter:none} }
@media (prefers-reduced-motion:reduce){
  *{ animation-duration:.001ms !important; transition-duration:.001ms !important; }
}
::-webkit-scrollbar{ width:10px; height:10px; }
::-webkit-scrollbar-track{ background:var(--scrollbar-track); }
::-webkit-scrollbar-thumb{ background:var(--scrollbar-thumb); border-radius:99px; }
* { scrollbar-color:var(--scrollbar-thumb) var(--scrollbar-track); }

/* ============================================================
   THEME-NOIR SAFETY NET — thousands of one-off chip/badge colors
   across this file are hand-written as inline style="" strings
   (not CSS vars), from months of incremental feature work. Rather
   than rewrite every call site, catch the common literal colors
   here and remap them for the dark theme. Scoped to screen only —
   printed output always forces light paper regardless of theme.
============================================================ */
@media screen{
  body.theme-noir [style*="background:#fff"],
  body.theme-noir [style*="background: #fff"],
  body.theme-noir [style*="background:#ffffff"],
  body.theme-noir [style*="background-color:#fff"],
  body.theme-noir [style*="background-color: #fff"]{ background:var(--form-surface) !important; }

  body.theme-noir [style*="background:#f8fafc"],
  body.theme-noir [style*="background:#f9fafb"],
  body.theme-noir [style*="background:#fafafa"],
  body.theme-noir [style*="background:#f1f5f9"],
  body.theme-noir [style*="background:#f3f4f6"],
  body.theme-noir [style*="background:#e5e7eb"]{ background:var(--surface-2) !important; }

  body.theme-noir [style*="background:#fef2f2"],
  body.theme-noir [style*="background:#fee2e2"]{ background:color-mix(in srgb, var(--red) 20%, var(--form-surface)) !important; }
  /* Production BI heat-scale cells (prodBiHeat()) — keep the escalating
     intensity read but stay dark-surface-based instead of pale/white. */
  body.theme-noir [style*="background:#fecaca"]{ background:color-mix(in srgb, var(--red) 30%, var(--form-surface)) !important; }
  body.theme-noir [style*="background:#fca5a5"]{ background:color-mix(in srgb, var(--red) 42%, var(--form-surface)) !important; color:#1a0508 !important; }
  body.theme-noir [style*="background:#f87171"]{ background:color-mix(in srgb, var(--red) 58%, var(--form-surface)) !important; color:#1a0508 !important; }
  body.theme-noir [style*="background:#f0fdf4"],
  body.theme-noir [style*="background:#dcfce7"],
  body.theme-noir [style*="background:#d1fae5"],
  body.theme-noir [style*="background:#ecfdf5"]{ background:color-mix(in srgb, var(--green) 18%, var(--form-surface)) !important; }
  body.theme-noir [style*="background:#fffbeb"],
  body.theme-noir [style*="background:#fef3c7"],
  body.theme-noir [style*="background:#fefce8"],
  body.theme-noir [style*="background:#fff7ed"]{ background:color-mix(in srgb, var(--amber) 18%, var(--form-surface)) !important; }
  body.theme-noir [style*="background:#eff6ff"],
  body.theme-noir [style*="background:#eef2ff"]{ background:color-mix(in srgb, var(--accent-2) 18%, var(--form-surface)) !important; }
  body.theme-noir [style*="background:#f5f3ff"],
  body.theme-noir [style*="background:#faf5ff"],
  body.theme-noir [style*="background:#faf8ff"],
  body.theme-noir [style*="background:#ede9fe"]{ background:color-mix(in srgb, var(--primary) 20%, var(--form-surface)) !important; }

  body.theme-noir [style*="color:#1e3a5f"],
  body.theme-noir [style*="color:#1e293b"],
  body.theme-noir [style*="color:#0f172a"],
  body.theme-noir [style*="color:#111827"],
  body.theme-noir [style*="color:#1f2937"],
  body.theme-noir [style*="color:#374151"],
  body.theme-noir [style*="color:#4b5563"],
  body.theme-noir [style*="color:#334155"],
  body.theme-noir [style*="color:#111"],
  body.theme-noir [style*="color:#333"]{ color:var(--text) !important; }

  body.theme-noir [style*="color:#6b7280"],
  body.theme-noir [style*="color:#9ca3af"],
  body.theme-noir [style*="color:#64748b"],
  body.theme-noir [style*="color:#94a3b8"],
  body.theme-noir [style*="color:#475569"]{ color:var(--muted) !important; }

  /* Dark amber/brown notice text (paired with #fef3c7/#fffbeb/#fff7ed-style
     warning boxes above) — same root-cause class as the Linked Records bug:
     the box's #fef3c7 background gets safety-netted dark, but these text
     tones were never in this remap list, so they stayed dark-on-dark. */
  body.theme-noir [style*="color:#92400e"],
  body.theme-noir [style*="color:#78350f"],
  body.theme-noir [style*="color:#d97706"],
  body.theme-noir [style*="color:#b45309"]{ color:var(--amber) !important; }

  /* Production BI's pladis-brand navy/red palette (inline KPI values) */
  body.theme-noir [style*="color:#c8102e"]{ color:var(--red) !important; }

  /* sfChartBars() value text (e.g. "NCRs by Line/Area", "Re-Work by Day") —
     the teal accent used for Maintenance-flavored charts, same mapping
     already established for .pbi-live-tag's identical color. */
  body.theme-noir [style*="color:#0f766e"]{ color:var(--green) !important; }

  body.theme-noir [style*="color:#4C1D95"],
  body.theme-noir [style*="color:#4c1d95"],
  body.theme-noir [style*="color:#5b21b6"],
  body.theme-noir [style*="color:#6d28d9"],
  body.theme-noir [style*="color:#1e1b4b"]{ color:var(--primary-light) !important; }

  body.theme-noir [style*="color:#dc2626"],
  body.theme-noir [style*="color:#b91c1c"],
  body.theme-noir [style*="color:#991b1b"],
  body.theme-noir [style*="color:#7f1d1d"]{ color:var(--red) !important; }
  body.theme-noir [style*="color:#16a34a"],
  body.theme-noir [style*="color:#15803d"],
  body.theme-noir [style*="color:#065f46"],
  body.theme-noir [style*="color:#14532d"]{ color:var(--green) !important; }
  body.theme-noir [style*="color:#92400e"],
  body.theme-noir [style*="color:#d97706"],
  body.theme-noir [style*="color:#b45309"]{ color:var(--amber) !important; }
  body.theme-noir [style*="color:#2563eb"],
  body.theme-noir [style*="color:#1d4ed8"],
  body.theme-noir [style*="color:#0e7490"]{ color:var(--accent-2) !important; }

  /* Chart/dashboard SVGs set text color via the "fill" presentation
     attribute rather than style="color:...", so the color-remap rules
     above never reach them — same dark-hardcoded-on-dark-surface problem,
     just a different attribute. Mirror the mappings for fill=. */
  body.theme-noir [fill="#0f172a"],
  body.theme-noir [fill="#1e1b4b"],
  body.theme-noir [fill="#334155"],
  body.theme-noir [fill="#374151"]{ fill:var(--text) !important; }
  body.theme-noir [fill="#64748b"],
  body.theme-noir [fill="#94a3b8"]{ fill:var(--muted) !important; }
  body.theme-noir [fill="#4C1D95"],
  body.theme-noir [fill="#4c1d95"]{ fill:var(--primary-light) !important; }

  body.theme-noir [style*="border:1px solid #e5e7eb"],
  body.theme-noir [style*="border:1px solid #eee"],
  body.theme-noir [style*="border:1px solid #e2e8f0"],
  body.theme-noir [style*="border-color:#e5e7eb"],
  body.theme-noir [style*="border-color:#e2e8f0"]{ border-color:var(--border) !important; }

  /* Printable document sheets (permits, NCR forms, QR labels) always render on
     white paper even while browsing in dark theme, so they preview accurately */
  body.theme-noir #fac-permit-sheet,
  body.theme-noir #fac-permit-sheet *{ background:#fff !important; color:#111 !important; }
}

/* ---- HEADER ---- */
.header{background:var(--white);border-bottom:3px solid var(--primary);padding:10px 20px;position:sticky;top:0;z-index:200;box-shadow:0 2px 8px rgba(0,0,0,.1)}
.header-inner{display:flex;align-items:center;gap:16px;justify-content:space-between;flex-wrap:wrap}
.logo-area{display:flex;align-items:center;gap:14px}
.logo-img{height:48px;object-fit:contain}
.logo-divider{width:1px;height:40px;background:var(--border)}
.sys-title{font-weight:800;font-size:1.15rem;color:var(--navy)}
.sys-sub{font-size:.72rem;color:var(--muted)}
body.portal-quality{--bg:linear-gradient(180deg,var(--form-surface) 0%,var(--surface-2) 60%,#fef2f2 100%)}
body.portal-safety{--bg:linear-gradient(165deg,#fef2f2 0%,var(--surface-2) 45%,#fff7ed 100%)}
body.portal-maintenance{--bg:linear-gradient(165deg,#f0fdfa 0%,var(--surface-2) 45%,#ecfdf5 100%)}
body.portal-production{--bg:linear-gradient(165deg,#fffbeb 0%,var(--surface-2) 45%,#fef3c7 100%)}
body.portal-factory{
  --bg:linear-gradient(165deg,#faf5ff 0%,#f5f3ff 45%,#ede9fe 100%);
  --primary:#7C3AED;--primary-dark:#5B21B6;
}
body.portal-factory .btn-primary{background:linear-gradient(135deg,#7C3AED,#2563EB)!important}
body.portal-factory .page-title{color:var(--primary-light)}
body.portal-factory .view.active{
  background-image:
    radial-gradient(circle at 12% 18%, rgba(124,58,237,.06), transparent 40%),
    radial-gradient(circle at 88% 70%, rgba(37,99,235,.05), transparent 42%),
    repeating-linear-gradient(0deg, transparent, transparent 31px, rgba(124,58,237,.03) 32px),
    repeating-linear-gradient(90deg, transparent, transparent 31px, rgba(124,58,237,.03) 32px);
}
.vm-glass{background:rgba(255,255,255,.82);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid rgba(124,58,237,.14);border-radius:14px;box-shadow:0 8px 28px rgba(76,29,149,.08)}
body.theme-noir .vm-glass{background:color-mix(in srgb, var(--form-surface) 88%, transparent);border-color:var(--border)}
.vm-kpi{background:var(--form-surface);border:1px solid var(--border);border-radius:14px;padding:16px;text-align:center;box-shadow:0 2px 10px rgba(76,29,149,.06);transition:transform .15s,box-shadow .15s}
.vm-kpi:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(76,29,149,.12)}
.vm-side-nav{display:flex;flex-direction:column;gap:4px;min-width:210px}
.vm-side-nav .nav-btn{justify-content:flex-start;text-align:left}
.vm-table{width:100%;border-collapse:collapse;font-size:.8rem;background:var(--form-surface);border-radius:12px;overflow:hidden}
.vm-table th{background:#4C1D95;color:#fff;padding:10px 12px;text-align:left;font-size:.72rem}
.vm-table td{padding:9px 12px;border-bottom:1px solid var(--surface-2)}
.vm-badge{display:inline-block;padding:2px 10px;border-radius:99px;font-size:.7rem;font-weight:800}
.vm-badge.expired{background:var(--surface-2);color:var(--muted)}
.vm-badge.active{background:#dcfce7;color:#15803d}
.fac-gate-shell{max-width:720px}
.fac-gate-scanbox{display:flex;gap:10px;flex-wrap:wrap;align-items:stretch}
.fac-gate-scanbox input{flex:1;min-width:220px;font-size:1.15rem;font-weight:700;letter-spacing:.02em;padding:14px 16px;border:2px solid #7c3aed;border-radius:12px;outline:none;background:#faf5ff;color:#1e1b4b}
body.theme-noir .fac-gate-scanbox input{background:var(--form-surface);color:var(--form-ink)}
.fac-gate-scanbox input:focus{box-shadow:0 0 0 4px rgba(124,58,237,.18)}
.fac-gate-result{margin-top:18px;border-radius:16px;overflow:hidden;border:1px solid var(--border);min-height:160px}
.fac-gate-result .gate-banner{padding:28px 22px;text-align:center;color:#fff}
.fac-gate-result .gate-banner .gate-code{font-size:2.4rem;font-weight:900;letter-spacing:.08em;line-height:1.1}
.fac-gate-result .gate-banner .gate-sub{margin-top:8px;font-size:.95rem;opacity:.95;font-weight:600}
.fac-gate-result.valid .gate-banner{background:linear-gradient(135deg,#15803d,#16a34a)}
.fac-gate-result.expired .gate-banner{background:linear-gradient(135deg,#b45309,#dc2626)}
.fac-gate-result.revoked .gate-banner{background:linear-gradient(135deg,#7f1d1d,#dc2626)}
.fac-gate-result.notfound .gate-banner{background:linear-gradient(135deg,#4b5563,#6b7280)}
.fac-gate-result .gate-body{padding:16px 18px;background:var(--form-surface);font-size:.88rem;line-height:1.7;color:var(--text)}
.fac-gate-log{margin-top:16px}
.fac-gate-log-item{display:flex;justify-content:space-between;gap:10px;padding:10px 12px;border-bottom:1px solid var(--surface-2);font-size:.78rem}
.fac-gate-hint{font-size:.78rem;color:var(--muted);margin-top:8px;line-height:1.5}
.vm-badge.revoked{background:#fee2e2;color:#dc2626}
.vm-badge.inside{background:#ede9fe;color:#5B21B6}
body.theme-noir .vm-badge.inside{background:color-mix(in srgb, var(--primary) 24%, var(--form-surface));color:var(--primary-light)}
.vm-section-title{font-weight:800;color:var(--primary-light);font-size:.92rem;margin:18px 0 10px;padding-bottom:6px;border-bottom:2px solid var(--border)}
.fac-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.fac-areas-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.fac-permit-form .form-row{min-width:0}
.fac-permit-form .form-row input,
.fac-permit-form .form-row select,
.fac-permit-form .form-row textarea{width:100%;max-width:100%;box-sizing:border-box}
@media (max-width:700px){
  .fac-form-grid,.fac-areas-grid{grid-template-columns:1fr !important}
  .fac-permit-form{padding:14px !important;max-width:100% !important}
  .fac-permit-form .form-row[style*="grid-column"]{grid-column:auto !important}
  #view-factoryaccess .vm-main{padding:8px}
  #fac-subtabs{display:flex;flex-wrap:wrap;gap:6px}
}
/* ========================================
   SHOP FLOOR OPERATIONS — SPLASH SCREEN (v92 rebuild)
   Background: two photographic factory backgrounds (desktop 4K wide /
   mobile portrait), swapped via <picture> media query — BACKGROUND
   ARTWORK ONLY, always full-bleed edge-to-edge via object-fit:cover on
   both breakpoints (a little edge cropping is expected/accepted so the
   frame is always fully covered, per the brief). Every other element —
   pladis logo, title, tagline, department badges, the conveyor loading
   animation, status text — is real HTML/CSS/SVG layered on top, so it
   stays crisp at any resolution instead of being baked into the photo.
   Structure:
     #splash-screen
       .splash-media          (<picture>/<img> — background photo only)
       .splash-scrim-top/-bottom (soft gradients so text stays legible
                                   over the photo without editing it)
       .splash-fg               (all real UI, in 3 timed stages)
         .splash-brand             logo + title            (1–2s)
         .splash-intro              tagline + dept badges    (2–3s)
         .splash-conveyor-wrap      belt animation + status  (3s → 7s)
   Full 7s timeline is driven from startIntro() in the script below:
   0–1s background fade, 1–2s brand, 2–3s intro row, 3s+ conveyor runs
   continuously, ~6.5s status swaps to "System Ready", 7s fade to Home.
   ======================================== */
#splash-screen{
  position:fixed; inset:0; z-index:9500; overflow:hidden;
  background:#05030A;
  transition:opacity .8s ease, visibility .8s ease;
}
#splash-screen.splash-hidden{ opacity:0; visibility:hidden; pointer-events:none; }
#splash-screen.splash-leaving .splash-img{ transform:scale(1.04); transition:transform 1s cubic-bezier(.22,1,.36,1); }

.splash-media{ position:absolute; inset:0; }
.splash-img{
  width:100%; height:100%; object-fit:cover; object-position:center center; display:block;
  opacity:0; animation:splashBgIn 1s ease-out forwards;
}
@keyframes splashBgIn{ to{ opacity:1; } }

/* Scrims keep the logo/title readable against a bright ceiling and the
   conveyor/status readable against the reflective floor — CSS overlays
   only, the photo itself is never edited. */
.splash-scrim-top{
  position:absolute; inset:0 0 auto 0; height:36%; z-index:1; pointer-events:none;
  background:linear-gradient(to bottom, rgba(5,3,10,.8) 0%, rgba(5,3,10,.32) 62%, transparent 100%);
}
.splash-scrim-bottom{
  position:absolute; inset:auto 0 0 0; height:32%; z-index:1; pointer-events:none;
  background:linear-gradient(to top, rgba(5,3,10,.88) 0%, rgba(5,3,10,.4) 55%, transparent 100%);
}

.splash-fg{
  position:relative; z-index:2; height:100%; width:100%; box-sizing:border-box;
  display:flex; flex-direction:column; align-items:center;
  padding:clamp(22px,4.5vh,52px) 16px clamp(18px,4vh,40px);
}

/* Stage 1 (1–2s): pladis logo + title */
.splash-brand{
  text-align:center; opacity:0; transform:translateY(-10px);
  animation:splashFadeUp .8s cubic-bezier(.22,1,.36,1) 1s forwards;
}
.splash-logo{
  height:clamp(28px,4vh,44px); width:auto; display:block; margin:0 auto 12px;
  filter:drop-shadow(0 2px 12px rgba(0,0,0,.55));
}
.splash-title{
  font-size:clamp(1.05rem,2.9vw,1.85rem); font-weight:900; letter-spacing:.16em; text-transform:uppercase;
  color:#f6f3ff; text-shadow:0 2px 18px rgba(0,0,0,.6), 0 0 30px rgba(167,139,250,.35);
}

/* Stage 2 (2–3s): tagline + department indicators */
.splash-intro{
  margin-top:clamp(10px,2.2vh,18px); text-align:center;
  opacity:0; transform:translateY(-8px);
  animation:splashFadeUp .8s cubic-bezier(.22,1,.36,1) 2s forwards;
}
.splash-tagline{
  font-size:clamp(.72rem,1.5vw,.95rem); font-weight:600; color:#e9e3ff;
  text-shadow:0 2px 10px rgba(0,0,0,.55); margin:0 0 clamp(12px,2.4vh,20px);
}
.splash-depts{ display:flex; justify-content:center; gap:clamp(8px,1.8vw,18px); flex-wrap:wrap; max-width:820px; }
.splash-dept{
  display:flex; align-items:center; gap:6px;
  padding:6px 12px 6px 6px; border-radius:999px;
  background:rgba(10,6,20,.52);
  border:1px solid color-mix(in srgb, var(--dc,#a78bfa) 45%, rgba(255,255,255,.16));
  box-shadow:0 4px 14px rgba(0,0,0,.32);
}
.splash-dept-icon{
  width:22px; height:22px; border-radius:7px; flex:0 0 auto;
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg,var(--dc,#7C3AED),var(--dcd,#4C1D95));
}
.splash-dept-icon svg{ width:13px; height:13px; stroke:#fff; }
.splash-dept-name{ font-size:.66rem; font-weight:800; letter-spacing:.02em; color:#fff; white-space:nowrap; }

@keyframes splashFadeUp{ to{ opacity:1; transform:translateY(0); } }

/* Stage 3 (3s onward): miniature production conveyor + status line —
   fades in once, then runs continuously (no fake percentage). */
.splash-conveyor-wrap{
  margin-top:auto; width:min(300px,70vw); text-align:center;
  opacity:0; animation:splashFadeUp .8s cubic-bezier(.22,1,.36,1) 3s forwards;
}
.splash-conveyor{ width:100%; height:auto; display:block; overflow:visible; }
.conveyor-roller{ transform-box:fill-box; transform-origin:center; animation:conveyorSpin 1.6s linear infinite; }
@keyframes conveyorSpin{ to{ transform:rotate(360deg); } }
.conveyor-item{ animation:conveyorMove 4.8s linear infinite; }
@keyframes conveyorMove{ from{ transform:translate(18px,34px); } to{ transform:translate(282px,34px); } }
/* Subtle belt-fabric motion (in addition to the rollers spinning and the
   items travelling) — a faint marching dash along the belt surface. */
.conveyor-belt{ stroke-dasharray:3 5; animation:conveyorBeltFlow 1.1s linear infinite; }
@keyframes conveyorBeltFlow{ to{ stroke-dashoffset:-8; } }

.splash-status{
  margin-top:10px; font-size:clamp(.56rem,1.4vw,.66rem); font-weight:700; letter-spacing:.14em;
  color:#c4b5fd; text-transform:uppercase; text-shadow:0 0 12px rgba(167,139,250,.4);
  transition:color .4s ease, text-shadow .4s ease;
}
.splash-status.is-ready{ color:#6ee7a8; text-shadow:0 0 14px rgba(74,222,128,.55); }

@media (max-width:900px){
  .splash-title{ font-size:1.2rem; letter-spacing:.12em; }
  /* pladis wordmark is brand red everywhere else in the app (incl. the
     desktop splash, left untouched) — mobile splash only, force it to
     read white against the dark factory photo. brightness(0) collapses
     the opaque glyph to black while keeping its alpha shape, invert(1)
     flips that to white — no separate white logo asset needed. */
  .splash-logo{ filter:brightness(0) invert(1) drop-shadow(0 2px 10px rgba(0,0,0,.5)); }
  .splash-depts{ gap:11px; max-width:300px; }
  .splash-dept{ padding:7px; border-radius:50%; }
  .splash-dept-name{ display:none; } /* icon-only badges keep the row compact on phones */
  .splash-dept-icon{ width:28px; height:28px; }
  .splash-dept-icon svg{ width:16px; height:16px; }
  /* Conveyor ~19% wider (260px -> 310px) and lifted further off the true
     bottom edge / home-indicator safe area for easier reading on phones. */
  .splash-conveyor-wrap{ width:min(310px,82vw); }
  .splash-fg{ padding-bottom:calc(env(safe-area-inset-bottom,0px) + clamp(30px,7vh,56px)); }
}
@media (prefers-reduced-motion: reduce){
  #splash-screen *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; }
}

/* Animated geometric brand marks (Home welcome page) — enlarged per the
   "Our Brands" redesign below (was 72px); still exclusive to the Home
   page, so this does not affect any other screen. */
.brand-shapes-row{display:flex;gap:22px;justify-content:center;flex-wrap:wrap;margin-top:8px}
.brand-shape-card{background:var(--form-surface);border:1px solid var(--border);border-radius:16px;padding:22px 20px;text-align:center;min-width:140px;box-shadow:var(--card-shadow);animation:brandFloat 4s ease-in-out infinite}
.brand-shape{width:96px;height:96px;margin:0 auto 14px;position:relative;background:#fff;border:1px solid var(--border);overflow:hidden} /* brand logo backing always white — logos assume a white plate */
.brand-shape-circle{border-radius:50%;animation:brandPulse 2.4s ease-in-out infinite}
.brand-shape-hex{clip-path:polygon(25% 0%,75% 0%,100% 50%,75% 100%,25% 100%,0% 50%);animation:brandSpin 8s linear infinite}
.brand-shape-diamond{border-radius:8px;transform:rotate(45deg);animation:brandRock 3s ease-in-out infinite}
.brand-logo-img{width:100%;height:100%;object-fit:contain;padding:10px;box-sizing:border-box}
.brand-shape-diamond .brand-logo-img{transform:rotate(-45deg);padding:16px}
.brand-shape-name{font-weight:800;font-size:.82rem;color:var(--navy);letter-spacing:.5px}
@keyframes brandFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@keyframes brandPulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.1);opacity:.85}}
@keyframes brandSpin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}
@keyframes brandRock{0%,100%{transform:rotate(45deg)}50%{transform:rotate(35deg)}}

/* ── pladis-style Home page: News hero, cards, footer ── */
.pladis-news-hero{position:relative;border-radius:24px;overflow:hidden;min-height:280px;margin-bottom:32px;
  background:
    radial-gradient(circle at 85% 20%, color-mix(in srgb, var(--primary-light) 45%, transparent), transparent 40%),
    var(--grad);
  display:flex;align-items:center;box-shadow:0 18px 46px color-mix(in srgb, var(--primary) 32%, transparent)}
.pladis-news-hero::before{content:'';position:absolute;inset:0;opacity:.18;background:
  repeating-linear-gradient(90deg,transparent,transparent 28px,rgba(255,255,255,.08) 29px),
  repeating-linear-gradient(0deg,transparent,transparent 28px,rgba(255,255,255,.08) 29px)}
.pladis-news-hero-circuit{position:absolute;inset:0;width:100%;height:100%;z-index:1;opacity:.5;pointer-events:none}
.pladis-news-hero-circuit path{stroke:#fff;stroke-width:1.4;fill:none;opacity:.4;stroke-dasharray:220;stroke-dashoffset:220;animation:heroCircuitDraw 1.6s ease-out forwards}
.pladis-news-hero-circuit path:nth-child(2){animation-delay:.15s}
.pladis-news-hero-circuit path:nth-child(3){animation-delay:.3s}
.pladis-news-hero-circuit circle{fill:#fff;opacity:0;animation:heroNodeIn .5s ease-out forwards}
@keyframes heroCircuitDraw{to{stroke-dashoffset:0}}
@keyframes heroNodeIn{to{opacity:.85}}
.pladis-news-hero-badge{
  position:relative;z-index:2;margin-bottom:14px;
  display:inline-flex;align-items:center;gap:7px;
  background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.28);
  border-radius:999px;padding:6px 13px;color:#fff;font-size:.68rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  opacity:0;animation:splashTitleIn .6s ease-out .5s forwards;
}
.pladis-news-hero-badge .dot{width:7px;height:7px;border-radius:50%;background:#4ade80;box-shadow:0 0 0 3px rgba(74,222,128,.28);animation:heroDotPulse 2s ease-in-out infinite}
@keyframes heroDotPulse{0%,100%{opacity:1}50%{opacity:.4}}
.pladis-news-hero-content{position:relative;z-index:2;padding:40px 44px;max-width:680px;
  opacity:0;transform:translateY(14px);animation:splashTitleIn .7s cubic-bezier(.22,1,.36,1) .15s forwards}
.pladis-news-hero-title{color:#fff;font-size:clamp(1.8rem,3vw,2.35rem);font-weight:900;line-height:1.2;margin-bottom:12px;text-shadow:0 2px 16px rgba(0,0,0,.2);letter-spacing:-.01em}
.pladis-news-hero-sub{color:rgba(255,255,255,.92);font-size:.94rem;line-height:1.65;font-weight:600;max-width:52ch}
.pladis-doodle-swirl{position:absolute;top:14px;right:60px;width:80px;height:80px;opacity:.55;z-index:1;animation:brandSpin 12s linear infinite}
.pladis-doodle-smiley{position:absolute;bottom:10px;right:150px;width:70px;height:70px;opacity:.45;z-index:1;animation:brandFloat 3.5s ease-in-out infinite}
@media (max-width:700px){.pladis-doodle-swirl,.pladis-doodle-smiley,.pladis-news-hero-circuit{display:none}.pladis-news-hero-content{padding:26px 22px}}

.pladis-news-section-title{font-size:1.15rem;font-weight:900;color:var(--navy);margin:18px 0 14px}
.pladis-news-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px;margin-bottom:28px}
.pladis-news-card{background:var(--form-surface);border:1px solid var(--border);border-radius:14px;overflow:hidden;box-shadow:var(--card-shadow);transition:transform .15s,box-shadow .15s}
.pladis-news-card:hover{transform:translateY(-3px);box-shadow:0 10px 28px color-mix(in srgb, var(--primary) 20%, transparent)}
.pladis-news-card-top{height:110px;position:relative;overflow:hidden}
.pladis-news-top-a{background:var(--grad)}
.pladis-news-top-b{background:linear-gradient(120deg,var(--primary-dark),var(--primary))}
.pladis-news-top-c{background:linear-gradient(120deg,var(--accent-2),var(--primary-dark))}
.pladis-news-top-d{background:linear-gradient(120deg,var(--primary-dark),var(--primary-light))}
.pladis-card-doodle{position:absolute;inset:0;width:100%;height:100%}
.pladis-news-card-body{padding:16px 18px 20px}
.pladis-news-card-title{font-weight:800;color:var(--navy);font-size:.95rem;margin-bottom:8px}
.pladis-news-card-desc{font-size:.8rem;color:var(--muted);line-height:1.6}
.pladis-news-card-meta{font-size:.68rem;color:var(--primary);font-weight:700;margin-top:10px}

.pladis-footer-strip{background:var(--grad);border-radius:14px;padding:18px 26px;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px}
/* Pladis theme only: this is a full-width panel, so it gets the same
   neutral ink treatment as --header-bg instead of the red --grad used
   here in Violet Noir (where that gradient is violet, not red, and
   stays as-is). Noir is untouched. */
body.theme-pladis .pladis-footer-strip{background:linear-gradient(120deg,#3C3637 0%,#0E0C0D 100%)}
.pladis-footer-brand{color:#fff;font-weight:900;font-size:1.1rem;font-style:italic}
.pladis-footer-links{display:flex;gap:14px;align-items:center}
.pladis-footer-links a{color:#fff;text-decoration:none;opacity:.9;transition:opacity .15s;display:flex}
.pladis-footer-links a:hover{opacity:1}
.pladis-footer-copy{color:rgba(255,255,255,.85);font-size:.74rem}
.welcome-brand-chip{display:inline-flex;align-items:center;gap:6px;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.22);border-radius:999px;padding:5px 12px;font-size:.72rem;font-weight:700;color:#fff;margin:3px}

/* ========================================
   WELCOME SCREEN — ambient tech background
   Fixed, theme-aware circuit/grid/orb layer behind the whole page so wide
   monitors don't read as empty on either side of the content column.
   ======================================== */
.welcome-fx{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.welcome-fx-grid{
  position:absolute;inset:-10%;
  background-image:
    linear-gradient(color-mix(in srgb, var(--primary) 12%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--primary) 12%, transparent) 1px, transparent 1px);
  background-size:56px 56px;
  -webkit-mask-image:radial-gradient(ellipse 75% 55% at 50% 12%, #000 0%, transparent 78%);
  mask-image:radial-gradient(ellipse 75% 55% at 50% 12%, #000 0%, transparent 78%);
  animation:welcomeFxDrift 44s linear infinite;
}
@keyframes welcomeFxDrift{ from{transform:translate(0,0)} to{transform:translate(-56px,-56px)} }
.welcome-fx-circuit{position:absolute;inset:0;width:100%;height:100%;opacity:.4}
.welcome-fx-circuit path{stroke:var(--primary);stroke-width:1.3;fill:none;opacity:.55;stroke-dasharray:16 12;animation:welcomeFxFlow 7s linear infinite}
.welcome-fx-circuit path:nth-child(2){animation-duration:9s;animation-delay:-2.4s;opacity:.4}
.welcome-fx-circuit path:nth-child(3){animation-duration:8s;animation-delay:-4.8s;opacity:.35}
.welcome-fx-circuit path:nth-child(4){animation-duration:10s;animation-delay:-1.2s;opacity:.3}
.welcome-fx-circuit circle{fill:var(--primary);opacity:.55}
@keyframes welcomeFxFlow{ to{stroke-dashoffset:-280} }
.welcome-fx-orb{position:absolute;border-radius:50%;filter:blur(64px);opacity:.32;background:var(--grad)}
/* Pladis theme only: these ambient blurred orbs sit behind the entire
   Home page — three of them tinting the whole canvas red would work
   against the "clean corporate neutral" background goal even at low
   opacity/heavy blur. Muted neutral instead; Noir (violet) unchanged. */
body.theme-pladis .welcome-fx-orb{background:linear-gradient(135deg,#3C3637,#0E0C0D)}
.welcome-fx-orb.a{width:420px;height:420px;top:-140px;left:-120px;animation:welcomeFxOrb 15s ease-in-out infinite}
.welcome-fx-orb.b{width:480px;height:480px;top:18%;right:-180px;animation:welcomeFxOrb 19s ease-in-out infinite reverse}
.welcome-fx-orb.c{width:340px;height:340px;bottom:-150px;left:32%;animation:welcomeFxOrb 17s ease-in-out infinite 2s}
@keyframes welcomeFxOrb{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(30px,-22px) scale(1.12)}}
@media (max-width:640px){.welcome-fx-grid{background-size:40px 40px}.welcome-fx-orb{filter:blur(38px);opacity:.24}}
@media (prefers-reduced-motion:reduce){.welcome-fx *{animation:none!important}}

/* ========================================
   HOME / PORTAL SELECTION — atmospheric factory background
   Reuses the exact same splash-screen photo assets as background artwork
   only, blurred and scaled behind the whole page. This is a separate,
   fixed, non-interactive layer — it never sits behind (or is confused
   with) any Splash-specific UI (logo/title/departments/conveyor), none
   of which exists here. Actual Home content (cards, header, text, stats,
   news) is untouched by the blur — only this pseudo-element layer is
   filtered.
   ======================================== */
.welcome-photo-bg{position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none}
.welcome-photo-bg::before{
  content:'';position:absolute;inset:0;
  background-image:url('./splash-bg-desktop.webp');
  background-size:cover;background-position:center center;background-repeat:no-repeat;
  filter:blur(18px);
  transform:scale(1.05);
  transform-origin:center;
  opacity:var(--wpb-img-opacity,.16);
}
.welcome-photo-bg::after{
  content:'';position:absolute;inset:0;
  background:var(--wpb-overlay);
}
/* Light "pladis" theme: keep the factory as a very faint atmospheric hint
   only — a soft near-white overlay so it never competes with, or reduces
   contrast for, the opaque card surfaces that sit on top of it. */
body.theme-pladis .welcome-photo-bg{
  --wpb-img-opacity:.10;
  --wpb-overlay:linear-gradient(180deg, rgba(247,247,246,.90) 0%, rgba(247,247,246,.95) 60%, rgba(247,247,246,.97) 100%);
}
/* Violet Noir: same blur, a touch more visible, deep black/violet tint so
   bright factory highlights never fight with foreground content. */
body.theme-noir .welcome-photo-bg{
  --wpb-img-opacity:.24;
  --wpb-overlay:linear-gradient(180deg, rgba(11,7,18,.72) 0%, rgba(11,7,18,.82) 55%, rgba(11,7,18,.88) 100%);
}
@media (max-width:900px){
  .welcome-photo-bg::before{background-image:url('./splash-bg-mobile.webp')}
}
@media (prefers-reduced-motion:reduce){
  .welcome-photo-bg::before{transition:none}
}

/* ============================================================
   HOME / PORTAL SELECTION — redesign (v90)
   Single centered column: compact hero -> "Choose Your Workspace" card
   grid (the main focus) -> a compact selected-portal detail panel ->
   a wider, larger-logo "Our Brands" strip -> Factory News -> footer.
   Replaces the previous 330px sticky red sidebar + narrow left column.
   All surfaces use theme tokens (var(--form-surface)/--border/--navy/
   --muted/--primary/--surface-2)) so light "pladis" and dark "Violet
   Noir" both render correctly with no separate dark-mode overrides
   needed. Portal identity colors still come from WELCOME_PORTALS'
   per-portal --wp-c/--wp-cd, unchanged.
   ============================================================ */
.welcome-shell{position:relative;z-index:1;max-width:1180px;margin:0 auto;padding:26px clamp(16px,3.2vw,40px) 56px}
@media (min-width:1500px){.welcome-shell{max-width:1320px}}

/* ---- Compact hero ---- */
.wh-hero{
  position:relative;overflow:hidden;text-align:center;
  background:var(--form-surface);border:1px solid var(--border);border-radius:20px;
  padding:22px clamp(18px,4vw,40px) 20px;box-shadow:var(--card-shadow);
  opacity:0;transform:translateY(-12px);animation:whHeroIn .6s cubic-bezier(.22,1,.36,1) forwards;
}
@keyframes whHeroIn{to{opacity:1;transform:translateY(0)}}
.wh-hero::before{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(circle at 12% 0%, color-mix(in srgb, var(--primary) 12%, transparent), transparent 55%),
             radial-gradient(circle at 100% 100%, color-mix(in srgb, #7C3AED 10%, transparent), transparent 50%);
}
.wh-hero > *{position:relative;z-index:1}
.wh-hero-top{display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap;margin-bottom:10px}
.wh-badge{display:inline-flex;align-items:center;gap:7px;padding:5px 12px;border-radius:999px;background:color-mix(in srgb, #16a34a 14%, transparent);border:1px solid color-mix(in srgb, #16a34a 30%, transparent);font-size:.66rem;font-weight:800;letter-spacing:.02em;color:var(--text)}
.wh-badge .dot{width:7px;height:7px;border-radius:50%;background:#4ade80;box-shadow:0 0 0 3px rgba(74,222,128,.25);animation:heroDotPulse 2s ease-in-out infinite}
.wh-company{font-size:.66rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.wh-title{margin:0 0 6px;font-size:clamp(1.4rem,3vw,2rem);font-weight:900;letter-spacing:.03em;color:var(--navy);text-transform:uppercase}
.wh-tagline{margin:0 0 16px;font-size:clamp(.82rem,1.4vw,.96rem);font-weight:600;color:var(--muted)}
.wh-stats{display:flex;justify-content:center;gap:clamp(18px,4vw,44px);flex-wrap:wrap;padding-top:14px;border-top:1px solid var(--border)}
.wh-stat{text-align:center}
.wh-stat b{display:block;font-size:1.15rem;font-weight:900;color:var(--primary)}
.wh-stat span{display:block;font-size:.62rem;font-weight:700;color:var(--muted);letter-spacing:.02em;margin-top:2px}

/* ---- Theme switch row (kept, recentred under the hero) ---- */
.theme-switch-wrap{display:flex;align-items:center;justify-content:center;gap:10px;margin:16px 0}

/* ---- "Choose Your Workspace" — the main focus of the page ---- */
.welcome-side{
  position:relative;margin-top:20px;
  background:var(--form-surface);border:1px solid var(--border);border-radius:20px;
  padding:24px clamp(16px,3vw,30px) 26px;box-shadow:var(--card-shadow);color:var(--text);
  opacity:0;transform:translateY(16px);
}
.welcome-side.is-animated{animation:wsIn .6s cubic-bezier(.22,1,.36,1) forwards}
@keyframes wsIn{to{opacity:1;transform:translateY(0)}}
@keyframes welcomePortalIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}
@keyframes welcomeDetailIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
@keyframes welcomeNewsIn{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}
.welcome-side-kicker{text-align:center;font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;font-weight:800;color:var(--primary);margin-bottom:6px}
.welcome-side-title{text-align:center;font-size:clamp(1.1rem,2vw,1.4rem);font-weight:900;color:var(--navy);margin-bottom:6px}
.welcome-side-sub{text-align:center;font-size:.8rem;line-height:1.55;color:var(--muted);max-width:56ch;margin:0 auto 20px}

.welcome-portal-nav{display:grid;grid-template-columns:repeat(5,1fr);gap:12px}
@media (max-width:1080px){.welcome-portal-nav{grid-template-columns:repeat(3,1fr)}}
@media (max-width:640px){.welcome-portal-nav{grid-template-columns:repeat(2,1fr)}}
.welcome-portal-item{
  display:flex;flex-direction:column;align-items:center;text-align:center;gap:2px;
  width:100%;border:1.5px solid var(--border);background:var(--surface-2);color:var(--text);
  border-radius:16px;padding:18px 10px 15px;cursor:pointer;font-family:inherit;
  opacity:0;transform:translateY(14px);
  transition:background .2s,border-color .2s,transform .2s,box-shadow .2s;
}
.welcome-portal-item.in{animation:welcomePortalIn .5s cubic-bezier(.22,1,.36,1) forwards}
.welcome-portal-item:hover{transform:translateY(-3px);border-color:color-mix(in srgb, var(--wp-c,var(--primary)) 55%, var(--border));box-shadow:0 10px 24px color-mix(in srgb, var(--wp-c,var(--primary)) 18%, transparent)}
.welcome-portal-item.active{
  border-color:var(--wp-c,var(--primary));
  background:color-mix(in srgb, var(--wp-c,var(--primary)) 12%, var(--surface-2));
  box-shadow:0 10px 26px color-mix(in srgb, var(--wp-c,var(--primary)) 22%, transparent);
}
.welcome-portal-item .wp-icon{
  flex:0 0 auto;width:44px;height:44px;border-radius:13px;margin-bottom:8px;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg, var(--wp-c,var(--primary)), var(--wp-cd,var(--primary-dark)));
  box-shadow:0 4px 12px color-mix(in srgb, var(--wp-c,var(--primary)) 35%, transparent);
  transition:transform .25s;
}
.welcome-portal-item .wp-icon svg{width:21px;height:21px;stroke:#fff}
.welcome-portal-item:hover .wp-icon{transform:scale(1.08) rotate(-4deg)}
.welcome-portal-item .wp-text{min-width:0;width:100%}
.welcome-portal-item .wp-name{font-weight:800;font-size:.86rem;display:block;color:var(--navy)}
.welcome-portal-item .wp-tag{font-size:.64rem;color:var(--muted);margin-top:2px;display:block}
.welcome-portal-item .wp-chevron{display:none} /* row-style chevron not needed on a card */
.welcome-portal-detail{
  display:flex;gap:14px;margin-top:18px;padding:18px;border-radius:16px;
  background:var(--surface-2);border:1px solid var(--border);align-items:flex-start;
}
.welcome-portal-detail.is-swapping{animation:welcomeDetailIn .38s cubic-bezier(.22,1,.36,1)}
.welcome-portal-detail .wpd-icon{
  flex:0 0 auto;width:40px;height:40px;border-radius:12px;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg, var(--wp-c,var(--primary)), var(--wp-cd,var(--primary-dark)));
  box-shadow:0 4px 12px color-mix(in srgb, var(--wp-c,var(--primary)) 30%, transparent);
}
.welcome-portal-detail .wpd-icon svg{width:20px;height:20px;stroke:#fff}
.welcome-portal-detail .wpd-body{min-width:0;flex:1}
.welcome-portal-detail h4{margin:0 0 6px;font-size:.95rem;font-weight:800;color:var(--navy)}
.welcome-portal-detail p{margin:0;font-size:.78rem;line-height:1.65;color:var(--muted)}
.welcome-portal-detail ul{margin:8px 0 0;padding-left:18px;font-size:.75rem;line-height:1.7;color:var(--muted)}
[dir="rtl"] .welcome-portal-detail ul{padding-left:0;padding-right:18px}
/* Old 3-column stat block — stats now live compactly in the hero
   (.wh-stats). Element kept (not deleted) only so nothing breaks if
   anything else still queries it; it's simply not part of the new flow. */
.welcome-side-stats{display:none}
.wss-item{text-align:center}
.wss-item b{display:block;font-size:1.05rem;font-weight:900}
.wss-item span{display:block;font-size:.6rem;font-weight:700;margin-top:2px;line-height:1.3}
.ws-cta{text-align:center;margin-top:20px}

.welcome-main{min-width:0;width:100%}
.pladis-news-grid,.brand-shapes-row{min-width:0}
/* Company line moved into the hero's top row (.wh-company) — kept here
   only as a harmless fallback style for the class itself. */
.welcome-company-line{font-size:.72rem;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:var(--muted);margin-bottom:8px}

/* ---- "Our Brands" — clear horizontal strip, larger logos ---- */
.wb-section{margin-top:34px}
.brand-company-note{font-size:.82rem;color:var(--muted);line-height:1.6;margin:-6px auto 18px;max-width:640px;text-align:center}
.brand-shapes-row{display:flex;gap:22px;justify-content:center;flex-wrap:wrap;margin-top:8px}
.brand-shape-card{min-width:130px;flex:0 1 150px}
.brand-mark-text{width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-weight:900;font-size:.78rem;color:var(--primary-light);letter-spacing:.3px;padding:8px;text-align:center;line-height:1.2}
.welcome-news-source{font-size:.72rem;color:#7C3AED;font-weight:700;margin:-4px 0 12px}
.welcome-news-source a{color:inherit;text-decoration:none;border-bottom:1px solid rgba(124,58,237,.35)}
.welcome-news-source a:hover{border-bottom-color:#7C3AED}
.pladis-news-card{opacity:0;transform:translateY(18px)}
.pladis-news-card.news-in{animation:welcomeNewsIn .55s cubic-bezier(.22,1,.36,1) forwards}
.pladis-news-card a.news-link{color:inherit;text-decoration:none;display:block}
.pladis-news-card a.news-link:hover .pladis-news-card-title{color:#7C3AED}
.pladis-news-card-top{height:148px;position:relative;overflow:hidden;background:var(--border)}
.pladis-news-card-top img{
  width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .45s ease;
}
.pladis-news-card:hover .pladis-news-card-top img{transform:scale(1.05)}
.pladis-news-card-top::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 55%,rgba(15,23,42,.28));
  pointer-events:none;
}

/* Professional language selector */
.lang-select-wrap{position:relative}
.lang-select-btn{
  display:inline-flex;align-items:center;gap:8px;
  background:var(--form-surface);border:1px solid #ddd6fe;border-radius:10px;
  padding:7px 11px;cursor:pointer;font-family:inherit;
  box-shadow:0 1px 3px rgba(76,29,149,.06);transition:border-color .15s,box-shadow .15s;
}
.lang-select-btn:hover{border-color:#a78bfa;box-shadow:0 2px 8px rgba(124,58,237,.12)}
.lang-select-code{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:28px;height:22px;padding:0 6px;border-radius:6px;
  background:linear-gradient(135deg,#7C3AED,#2563EB);color:#fff;
  font-size:.65rem;font-weight:800;letter-spacing:.6px;
}
.lang-select-name{font-size:.78rem;font-weight:700;color:var(--primary-light)}
.lang-select-caret{width:12px;height:12px;opacity:.55}
.lang-select-menu{
  position:absolute;top:calc(100% + 6px);right:0;min-width:180px;z-index:200;
  background:var(--form-surface);border:1px solid var(--border);border-radius:12px;
  box-shadow:0 14px 34px rgba(76,29,149,.16);padding:6px;display:none;
}
[dir="rtl"] .lang-select-menu{right:auto;left:0}
.lang-select-menu.open{display:block}
.lang-select-option{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  width:100%;border:none;background:transparent;border-radius:8px;
  padding:9px 10px;cursor:pointer;font-family:inherit;text-align:left;
}
.lang-select-option:hover{background:var(--surface-2)}
.lang-select-option.active{background:var(--border)}
.lang-select-option .lo-name{font-size:.8rem;font-weight:700;color:var(--text)}
.lang-select-option .lo-meta{font-size:.65rem;font-weight:700;color:#7C3AED;letter-spacing:.4px}
.lang-select-option.soon{opacity:.55;cursor:not-allowed}
.lang-select-option.soon .lo-meta{color:var(--muted)}

/* ══ Home professional navbar ══ */
.home-topnav{position:sticky;top:0;z-index:40;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:0 22px;height:72px;background:color-mix(in srgb, var(--form-surface) 92%, transparent);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--border)}
.home-topnav .hn-brand{display:flex;flex-direction:column;gap:1px;min-width:120px}
.home-topnav .hn-brand strong{font-style:italic;font-size:1.15rem;font-weight:900;color:var(--navy);letter-spacing:.2px}
.home-topnav .hn-brand span{font-size:.58rem;font-weight:800;letter-spacing:1px;text-transform:uppercase;color:var(--primary)}
.home-menu{margin:0;padding:0;list-style:none;display:flex;align-items:stretch;height:72px;gap:2px}
.home-menu > li{position:relative;display:flex;align-items:stretch}
.home-menu > li > a{display:flex;align-items:center;justify-content:center;padding:0 14px;height:100%;text-decoration:none;color:var(--navy);font-weight:700;font-size:.84rem;position:relative;transition:.25s;cursor:pointer;opacity:.85}
.home-menu > li > a::before{content:"";position:absolute;left:10px;right:10px;bottom:8px;height:3px;border-radius:3px;background:var(--grad);transform:scaleX(0);transition:.2s ease-in-out}
.home-menu > li:hover > a,.home-menu > li > a:hover{opacity:1}
.home-menu > li:hover > a::before{transform:scaleX(1)}
.home-submenu{overflow:hidden;position:absolute;top:100%;left:50%;transform:translateX(-50%);min-width:200px;height:0;display:flex;flex-direction:column;background:rgba(76,29,149,.92);backdrop-filter:blur(12px);border-radius:0 0 14px 14px;box-shadow:0 16px 40px rgba(76,29,149,.28);transition:height .3s ease-in-out;z-index:30;list-style:none;margin:0;padding:0}
.home-menu > li:hover .home-submenu{height:220px}
.home-submenu a{color:#fff;opacity:0;font-size:.82rem;font-weight:600;text-decoration:none;padding:11px 18px;transition:opacity .25s,background .2s;cursor:pointer;display:block}
.home-menu > li:hover .home-submenu a{opacity:.85}
.home-submenu a:hover{opacity:1;background:rgba(0,0,0,.2)}
.home-nav-actions{display:flex;align-items:center;gap:10px}
.home-burger{display:none;border:none;background:#f5f3ff;color:var(--primary-light);border-radius:10px;padding:8px 10px;cursor:pointer}
@media(max-width:860px){
  .home-menu{display:none;position:absolute;top:72px;left:0;right:0;height:auto;flex-direction:column;background:var(--form-surface);border-bottom:1px solid var(--border);padding:8px 0;box-shadow:0 12px 30px rgba(76,29,149,.12)}
  .home-topnav.menu-open .home-menu{display:flex}
  .home-menu > li{flex-direction:column}
  .home-menu > li > a{height:44px;justify-content:flex-start;padding:0 20px}
  .home-submenu{position:static;transform:none;height:auto!important;background:#f5f3ff;border-radius:0;box-shadow:none}
  .home-submenu a{color:var(--primary-light);opacity:1;padding-left:32px}
  .home-burger{display:inline-flex}
}
/* ══ Portal glass sidebar ══ */
.portal-sidebar{position:fixed;top:16px;left:16px;bottom:16px;width:268px;z-index:250;display:none;flex-direction:column;gap:6px;padding:0 12px 12px;border-radius:28px;border:1px solid rgba(255,255,255,.12);background:var(--grad);backdrop-filter:blur(28px);-webkit-backdrop-filter:blur(28px);box-shadow:0 24px 60px rgba(0,0,0,.35);color:rgba(255,255,255,.95);overflow:hidden}
/* Safety/Maintenance/Production/Visitor Management each already override
   this with their own portal-identity color further below (unaffected
   here). Quality has no such override, so in pladis theme it was
   falling through to the same solid red --grad as every button — a
   268px-wide, full-height panel on every single Quality-portal page.
   Compound selector (theme+portal, 3 classes) so this always wins over
   the single-class body.portal-safety/etc. rules regardless of source
   order, and never matches those other portals. Noir is untouched. */
body.theme-pladis.portal-quality .portal-sidebar{background:linear-gradient(165deg,#3C3637 0%,#1a1717 55%,#0E0C0D 100%)}
body.has-portal-sidebar .portal-sidebar{display:flex}
body.has-portal-sidebar .header{margin-left:292px}
body.has-portal-sidebar .view{margin-left:292px}
body.has-portal-sidebar .header-nav,body.has-portal-sidebar #menu-toggle-btn{display:none!important}
.ps-head{display:flex;align-items:center;gap:12px;height:70px;padding:12px 10px 4px;flex-shrink:0}
.ps-head .ps-logo{font-style:italic;font-weight:900;font-size:1.15rem;letter-spacing:.3px}
.ps-head .ps-meta{flex:1;min-width:0}
.ps-head .ps-portal{font-size:.72rem;font-weight:800;opacity:.75;text-transform:uppercase;letter-spacing:.6px}
.ps-toggle{margin-left:auto;border:none;background:rgba(255,255,255,.08);color:#fff;border-radius:10px;width:34px;height:34px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center}
.ps-nav{flex:1;overflow:auto;list-style:none;margin:0;padding:6px 0 0;display:flex;flex-direction:column;gap:2px;scrollbar-width:thin}
.ps-nav button.ps-item{position:relative;display:flex;gap:12px;align-items:center;width:100%;height:46px;border:none;border-radius:12px;padding:0 12px;background:transparent;color:rgba(255,255,255,.92);font:inherit;font-size:.86rem;font-weight:600;cursor:pointer;transition:.25s;text-align:left}
.ps-nav button.ps-item:hover{background:rgba(255,255,255,.06)}
.ps-nav button.ps-item[aria-current="page"],.ps-nav button.ps-item[aria-expanded="true"]{background:rgba(255,255,255,.12)}
.ps-nav button.ps-item .ps-label{flex:1}
.ps-nav button.ps-item .ps-chevron{transition:.3s;opacity:.7}
.ps-nav button.ps-item[aria-expanded="true"] .ps-chevron{transform:rotate(-180deg)}
.ps-sub{overflow:hidden;height:0;transition:height .45s ease}
.ps-sub ul{list-style:none;margin:0;padding:0}
.ps-sub button{position:relative;display:flex;align-items:center;width:100%;height:40px;border:none;border-radius:10px;padding:0 12px 0 44px;background:transparent;color:rgba(255,255,255,.82);font:inherit;font-size:.8rem;font-weight:600;cursor:pointer;transition:.25s;text-align:left}
.ps-sub button:hover{background:rgba(255,255,255,.06);color:#fff}
.ps-sub button[aria-current="page"]{background:rgba(255,255,255,.1);color:#fff}
.ps-sub button::before{content:"";position:absolute;left:22px;top:50%;transform:translateY(-50%);width:5px;height:5px;border-radius:50%;background:rgba(255,255,255,.35)}
.ps-foot{margin-top:auto;padding-top:8px;border-top:1px solid rgba(255,255,255,.1);display:flex;flex-direction:column;gap:4px;flex-shrink:0}
.ps-foot button.ps-tool{display:flex;align-items:center;gap:10px;width:100%;height:40px;border:none;border-radius:10px;padding:0 12px;background:transparent;color:rgba(255,255,255,.88);font:inherit;font-size:.8rem;font-weight:600;cursor:pointer;transition:.2s;text-align:left}
.ps-foot button.ps-tool:hover{background:rgba(255,255,255,.08)}
.ps-ico{width:18px;height:18px;flex-shrink:0;display:inline-flex}
.ps-ico svg{width:100%;height:100%;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ps-mobile-bar{display:none}
@media(max-width:900px){
  .portal-sidebar{top:0;left:0;bottom:0;border-radius:0;width:min(300px,86vw);transform:translateX(-105%);transition:transform .3s}
  body.has-portal-sidebar.ps-open .portal-sidebar{transform:translateX(0)}
  body.has-portal-sidebar .header,body.has-portal-sidebar .view{margin-left:0}
  .ps-mobile-bar{display:flex;position:fixed;bottom:18px;left:18px;z-index:260}
  .ps-mobile-bar button{border:none;border-radius:14px;padding:12px 14px;background:linear-gradient(135deg,#7C3AED,#2563EB);color:#fff;box-shadow:0 10px 28px rgba(124,58,237,.4);cursor:pointer;display:inline-flex;align-items:center;gap:8px;font-weight:800;font-size:.8rem}
  .ps-backdrop{display:none;position:fixed;inset:0;background:rgba(15,23,42,.45);z-index:240}
  body.has-portal-sidebar.ps-open .ps-backdrop{display:block}
}
body.portal-safety .portal-sidebar{background:linear-gradient(165deg,rgba(127,29,29,.95),rgba(69,10,10,.96) 55%,rgba(185,28,28,.88))}
body.portal-maintenance .portal-sidebar{background:linear-gradient(165deg,rgba(6,78,59,.95),rgba(2,44,34,.96) 55%,rgba(13,148,136,.88))}
body.portal-production .portal-sidebar{background:linear-gradient(165deg,rgba(120,53,15,.95),rgba(69,26,3,.96) 55%,rgba(217,119,6,.88))}
body.portal-factory .portal-sidebar{background:linear-gradient(165deg,rgba(46,16,101,.95),rgba(30,27,75,.96) 55%,rgba(124,58,237,.88))}

.login-back-home{display:inline-flex;align-items:center;gap:6px;color:#a78bfa;font-size:.78rem;font-weight:700;text-decoration:none;margin-bottom:14px}
.login-back-home:hover{color:#c4b5fd}
#fac-permit-modal{position:fixed;inset:0;background:rgba(15,23,42,.55);z-index:3000;display:none;align-items:flex-start;justify-content:center;overflow:auto;padding:18px}
#fac-permit-modal.open{display:flex}
.fac-permit-wrap{width:min(900px,100%);margin:10px auto 40px}
.fac-permit-toolbar{position:sticky;top:0;z-index:5;display:flex;gap:8px;flex-wrap:wrap;justify-content:center;padding:12px;background:rgba(255,255,255,.92);backdrop-filter:blur(10px);border:1px solid var(--border);border-radius:14px;margin-bottom:12px;box-shadow:0 8px 24px rgba(76,29,149,.12)}
.fac-permit-toolbar button{border:none;border-radius:10px;padding:10px 14px;font-weight:800;cursor:pointer;font-family:inherit;font-size:.82rem}
.fac-permit-toolbar .primary{color:#fff;background:linear-gradient(135deg,#7C3AED,#2563EB)}
.fac-permit-toolbar .ghost{background:var(--form-surface);color:var(--primary-light);border:1px solid #c4b5fd}
#fac-permit-sheet{background:var(--form-surface);border:1px solid var(--border);border-radius:16px;overflow:hidden;box-shadow:0 12px 40px rgba(76,29,149,.14)}
/* Screen preview while preparing print */
body.printing-permit .fac-permit-toolbar{display:none!important}
@media print{
  *{-webkit-print-color-adjust:exact!important;print-color-adjust:exact!important}
  /* Isolate Visitor Permit print — hide everything except the sheet */
  body.printing-permit > *:not(#fac-permit-modal){display:none!important;visibility:hidden!important}
  body.printing-permit .portal-sidebar,
  body.printing-permit .ps-mobile-bar,
  body.printing-permit .ps-backdrop,
  body.printing-permit .header,
  body.printing-permit .header-nav,
  body.printing-permit .view,
  body.printing-permit #login-screen,
  body.printing-permit #splash-screen,
  body.printing-permit #app-welcome-screen,
  body.printing-permit #notif-panel,
  body.printing-permit #search-panel,
  body.printing-permit #notif-live-banner,
  body.printing-permit #offline-chip,
  body.printing-permit .kiosk-exit,
  body.printing-permit .fac-permit-toolbar,
  body.printing-permit .no-print{display:none!important;visibility:hidden!important}
  body.printing-permit #fac-permit-modal{
    display:block!important;visibility:visible!important;position:static!important;
    inset:auto!important;background:var(--form-surface)!important;padding:0!important;margin:0!important;
    overflow:visible!important;z-index:auto!important;box-shadow:none!important
  }
  body.printing-permit .fac-permit-wrap{width:auto!important;margin:0!important;box-shadow:none!important;overflow:visible!important}
  body.printing-permit #fac-permit-sheet{
    display:block!important;visibility:visible!important;box-shadow:none!important;
    border:none!important;border-radius:0!important;overflow:visible!important;background:var(--form-surface)!important
  }
  body.printing-permit #fac-permit-sheet *{visibility:visible!important}
  body.printing-permit #fac-permit-sheet .grid{grid-template-columns:1fr 1fr!important;gap:4px 10px}
  body.printing-permit #fac-permit-sheet .cols{grid-template-columns:1fr 1fr 1fr!important;gap:6px}
  body.printing-permit #fac-permit-sheet .sig{grid-template-columns:1fr 1fr 1fr!important}
  body.printing-permit #fac-permit-sheet .cols ul{font-size:.58rem;line-height:1.35}
  @page{size:A4;margin:8mm}
}
/* Near Miss / Incident modals — mobile responsive + scroll */
.modal.nm-responsive-modal{
  max-width:min(600px,calc(100vw - 24px));width:100%;margin:12px auto;padding:16px 14px;
  max-height:calc(100vh - 24px);overflow:hidden;-webkit-overflow-scrolling:touch;
  display:flex;flex-direction:column;
}
.modal.nm-responsive-modal .nm-form-scroll{flex:1;overflow-y:auto;min-height:0;padding-right:4px;-webkit-overflow-scrolling:touch}
.modal.nm-responsive-modal .nm-form-actions{
  flex-shrink:0;display:flex;gap:10px;justify-content:flex-end;margin-top:14px;padding-top:12px;
  border-top:1px solid var(--border);background:inherit;position:sticky;bottom:0;z-index:2;
}
.nm-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.nm-cat-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:6px}
/* Category checkbox + label row — checkbox stays its normal compact
   size (never inflated by generic form-field sizing rules) and always
   sits immediately beside its label, left-aligned, with a comfortable
   touch-friendly row height via padding rather than by resizing the
   checkbox itself. */
.nm-cat-grid .nm-cat-row{
  /* Higher-specificity compound selector — beats the generic
     `.form-row label{display:block;text-transform:uppercase;...}`
     field-label styling that these rows would otherwise inherit
     from their ancestor .form-row, which was also detaching the
     checkbox from its label. */
  display:flex;align-items:center;gap:8px;
  min-height:44px;padding:4px 6px;border-radius:8px;
  font-size:.85rem;font-weight:400;text-transform:none;letter-spacing:normal;
  color:var(--text);
  cursor:pointer;transition:background-color .12s;
}
.nm-cat-grid .nm-cat-row:hover{background:var(--surface-2)}
.nm-cat-grid .nm-cat-row input[type="checkbox"],
.nm-cat-grid .nm-cat-row input[type="radio"]{
  flex:0 0 auto;width:17px;height:17px;min-height:0;
  accent-color:var(--primary);cursor:pointer;
}
.nm-cat-grid .nm-cat-row span{min-width:0;line-height:1.35;color:var(--text)}
.ii-type-tabs{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 12px}
.ii-type-tabs button{flex:1;min-width:140px;border:1.5px solid var(--border);background:var(--form-surface);color:#991b1b;border-radius:10px;padding:10px 12px;font-weight:800;font-size:.82rem;cursor:pointer;font-family:inherit}
.ii-type-tabs button.active{background:linear-gradient(135deg,#dc2626,#b91c1c);color:#fff;border-color:#b91c1c}
.ii-section{background:var(--surface-2);border:1px solid var(--border);border-radius:10px;padding:12px 14px;margin:0 0 12px}
.ii-section-title{font-size:.78rem;font-weight:850;color:#991b1b;margin:0 0 10px;letter-spacing:.02em;text-transform:uppercase}
.ii-chip-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px 10px}
.ii-chip-grid.cols3{grid-template-columns:1fr 1fr 1fr}
.ii-chip{display:flex;align-items:flex-start;gap:7px;font-size:.78rem;font-weight:500;color:var(--text);background:var(--form-surface);border:1px solid var(--border);border-radius:8px;padding:7px 8px;cursor:pointer}
.ii-chip input{margin-top:2px;accent-color:#dc2626;flex-shrink:0}
.ii-meta{font-size:.68rem;color:var(--muted);font-weight:700;margin-top:2px}
@media(max-width:640px){.ii-chip-grid,.ii-chip-grid.cols3{grid-template-columns:1fr!important}}

@media(max-width:640px){
  .nm-form-grid,.nm-cat-grid{grid-template-columns:1fr!important}
  .modal.nm-responsive-modal .form-row input,
  .modal.nm-responsive-modal .form-row select,
  .modal.nm-responsive-modal .form-row textarea{font-size:16px!important;padding:10px 12px!important}
  .modal.nm-responsive-modal .btn-primary,
  .modal.nm-responsive-modal .btn-ghost{min-height:44px;font-size:.9rem}
}
/* Welcome home theme switcher — removed with dark mode (v78) */
.home-theme-switch{display:none!important}
.home-theme-btn{display:none!important}
@keyframes themeFlash{
  0%{filter:brightness(1.2)}
  100%{filter:brightness(1)}
}
body.theme-switching{animation:themeFlash .45s ease}

/* استثناء الطباعة ١ — النماذج الرسمية دائماً بيضاء حتى في الوضع الداكن */
@media print{
  body.theme-noir *{
    background:#fff !important;
    color:#000 !important;
    border-color:#999 !important;
  }
}
/* Product Scoring — compact group tabs + card grid */
.sc-group-tabs{display:flex;gap:8px;margin-bottom:14px;flex-wrap:wrap}
.sc-group-tab{border:2px solid var(--border);background:var(--form-surface);border-radius:10px;padding:10px 16px;font-weight:800;font-size:.78rem;cursor:pointer;color:var(--muted);transition:all .15s}
.sc-group-tab.active{border-color:#cc0000;background:#fef2f2;color:#cc0000;box-shadow:0 4px 12px rgba(204,0,0,.12)}
.sc-group-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;padding:10px 14px;background:#fef2f2;border-radius:10px;border-left:4px solid #cc0000}
.sc-group-head b{color:#cc0000;font-size:.88rem}
/* Fixed light background regardless of theme — var(--muted) goes too pale
   against it in the Noir theme. Same root cause as the Re-Work/.ncr-block
   contrast bug: a themed color paired with a non-themed background. */
.sc-group-head span{font-size:.72rem;color:#4b5563;font-weight:700}
.sc-section-title{font-weight:800;color:var(--navy);font-size:.78rem;margin:14px 0 8px;padding-bottom:4px;border-bottom:1px solid var(--border)}
.sc-criteria-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:10px}
.sc-crit-card{background:var(--form-surface);border:1px solid var(--border);border-radius:12px;padding:12px 14px;transition:box-shadow .15s}
.sc-crit-card:focus-within{box-shadow:0 4px 16px rgba(30,58,95,.1);border-color:var(--navy)}
.sc-crit-name{font-weight:700;font-size:.78rem;color:var(--text);margin-bottom:8px;line-height:1.35;min-height:2.4em}
.sc-crit-meta{display:flex;gap:8px;font-size:.68rem;color:var(--muted);margin-bottom:8px}
.sc-crit-score{display:flex;align-items:center;gap:8px}
.sc-crit-score input[type=number]{width:56px;border:2px solid var(--navy);border-radius:8px;padding:6px;text-align:center;font-weight:800;font-size:.9rem}
.sc-crit-extra{margin-top:8px;display:grid;grid-template-columns:1fr 1fr;gap:6px}
.sc-crit-extra input,.sc-crit-extra textarea{border:1px solid var(--border);border-radius:6px;padding:5px 8px;font-size:.72rem;width:100%;font-family:inherit}
@media(max-width:700px){.sc-criteria-grid{grid-template-columns:1fr}.sc-crit-extra{grid-template-columns:1fr}}
/* Dashboard KPI trends */
.dash-kpi{position:relative;overflow:hidden}
.dk-spark{position:absolute;top:10px;right:10px;opacity:.85}
.dk-trend{font-size:.72rem;font-weight:800;margin-top:6px;display:flex;align-items:center;gap:4px}
.dash-charts-row{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:16px}
@media(max-width:900px){.dash-charts-row{grid-template-columns:1fr}}
/* Factory Access layout polish */
.vm-layout{display:grid;grid-template-columns:240px 1fr;gap:20px;align-items:start}
.vm-side-nav{position:sticky;top:16px;background:rgba(255,255,255,.9);border:1px solid rgba(124,58,237,.12);border-radius:16px;padding:10px;box-shadow:0 8px 24px rgba(76,29,149,.08)}
body.theme-noir .vm-side-nav{background:color-mix(in srgb, var(--form-surface) 90%, transparent);border-color:var(--border)}
.vm-main .vm-glass{max-width:none!important}
@media(max-width:900px){.vm-layout{grid-template-columns:1fr}.vm-side-nav{position:static;flex-direction:row;flex-wrap:wrap;display:flex;gap:6px;padding:8px;min-width:0}}
.vm-main{flex:1;min-width:0}
.header-nav{display:none;flex-direction:column;gap:3px;position:absolute;top:100%;left:20px;right:20px;background:var(--form-surface);padding:10px;box-shadow:0 12px 32px rgba(0,0,0,.18);border-radius:0 0 14px 14px;max-height:75vh;overflow-y:auto;z-index:400;border:1px solid var(--border);border-top:none}
.header-nav.menu-open{display:flex}
.header-nav .nav-btn{width:100%;text-align:left;justify-content:flex-start;padding:11px 14px;border-radius:8px}
.header-nav .nav-btn.active{box-shadow:inset 3px 0 0 var(--primary)}
#menu-toggle-btn{background:var(--primary-dark);color:#fff;border:none;border-radius:8px;padding:9px 16px;font-weight:700;font-size:.85rem;cursor:pointer;display:flex;align-items:center;gap:6px;white-space:nowrap}
#menu-toggle-btn:hover{background:#152a45}
@media (min-width:1100px){
  .header-nav{position:static;display:flex!important;flex-direction:row;flex-wrap:wrap;gap:6px;box-shadow:none;border:none;padding:0;max-height:none;overflow:visible;background:transparent;border-radius:0}
  .header-nav .nav-btn{width:auto;padding:7px 14px}
  .header-nav .nav-btn.active{box-shadow:none}
  #menu-toggle-btn{display:none}
}
.nav-btn{border:none;border-radius:8px;padding:7px 14px;cursor:pointer;font-weight:700;font-size:.82rem;transition:all .15s}
.nav-btn.active{background:var(--primary-dark);color:#fff}
.nav-btn:not(.active){background:var(--surface-2);color:var(--navy)}
/* ---- VIEWS ---- */
.view{display:none;padding:20px}
.view.active{display:block}
/* ---- HOME DASHBOARD ---- */
.page-title{font-size:1.2rem;font-weight:800;color:var(--navy);margin-bottom:4px}
.page-sub{font-size:.82rem;color:var(--muted);margin-bottom:20px}
.cards-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px;margin-bottom:24px}
.line-card{background:var(--white);border-radius:12px;padding:18px;box-shadow:0 2px 8px rgba(0,0,0,.06);cursor:pointer;transition:transform .15s,box-shadow .15s}
.line-card:hover{transform:translateY(-2px);box-shadow:0 4px 16px rgba(0,0,0,.1)}
.lc-name{font-weight:800;font-size:1rem;margin-bottom:4px}
.lc-md{font-size:.75rem;color:var(--muted);background:var(--surface-2);border-radius:6px;padding:3px 8px;margin-bottom:12px;display:inline-block}
.lc-prog-bar{height:6px;background:var(--border);border-radius:99px;margin-bottom:6px;overflow:hidden}
.lc-prog-fill{height:100%;border-radius:99px;transition:width .4s}
.lc-prog-text{font-size:.75rem;color:var(--muted)}
.lc-btns{display:flex;gap:8px;margin-top:12px}
.lc-start{flex:1;color:#fff;border:none;border-radius:8px;padding:9px 0;cursor:pointer;font-weight:700;font-size:.88rem}
.lc-reset{background:var(--surface-2);border:none;border-radius:8px;padding:9px 12px;cursor:pointer;font-size:.82rem;color:var(--muted)}
.home-quick{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px;margin-bottom:24px}
.quick-card{background:var(--white);border-radius:10px;padding:16px;box-shadow:0 1px 4px rgba(0,0,0,.06);cursor:pointer;display:flex;align-items:center;gap:12px;transition:box-shadow .15s}
.quick-card:hover{box-shadow:0 3px 12px rgba(0,0,0,.1)}
.quick-icon{font-size:1.8rem}
.quick-title{font-weight:700;font-size:.9rem}
.quick-sub{font-size:.72rem;color:var(--muted)}
/* ---- CHECKLIST ---- */
.cl-header{background:var(--white);border-radius:12px;padding:16px 20px;margin-bottom:16px;box-shadow:0 1px 4px rgba(0,0,0,.06)}
.cl-title{font-size:1.1rem;font-weight:800;margin-bottom:4px}
.cl-prog-bar{height:8px;background:var(--border);border-radius:99px;overflow:hidden;margin:8px 0 4px}
.cl-prog-fill{height:100%;border-radius:99px;transition:width .4s}
.cl-prog-info{font-size:.8rem;color:var(--muted);display:flex;align-items:center;gap:8px}
.session-bar{display:flex;align-items:center;gap:14px;flex-wrap:wrap;background:var(--white);border-radius:10px;padding:12px 16px;margin-bottom:16px;box-shadow:0 1px 4px rgba(0,0,0,.06)}
.fg{display:flex;flex-direction:column;gap:2px}
.fl{font-size:.68rem;color:var(--muted);font-weight:700;text-transform:uppercase}
.fi{border:1px solid var(--border);border-radius:6px;padding:5px 9px;font-size:.82rem;outline:none;font-family:inherit;background:var(--form-surface);color:var(--form-ink)}
.md-info-tag{background:var(--primary-dark);color:#fff;border-radius:6px;padding:6px 12px;font-size:.76rem;margin-left:auto}
.section-wrap{background:var(--white);border-radius:10px;overflow:hidden;box-shadow:0 1px 4px rgba(0,0,0,.06);margin-bottom:14px}
.sec-hdr{display:flex;justify-content:space-between;align-items:center;padding:10px 16px;color:#fff;cursor:pointer;user-select:none;font-weight:700}
.sec-count{background:rgba(255,255,255,.25);border-radius:99px;padding:2px 10px;font-size:.78rem;font-weight:700}
.tbl-wrap{overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:.81rem}
th{background:var(--surface-2);padding:8px 10px;text-align:left;font-weight:700;font-size:.73rem;color:var(--text);border-bottom:2px solid var(--border);white-space:nowrap}
td{padding:7px 10px;border-bottom:1px solid var(--surface-2);vertical-align:middle}
.td-c{text-align:center;vertical-align:middle}
.p-name{font-weight:600}
.td-std{font-weight:600;color:#1e40af}
.td-rng{color:#065f46}
.crit-y{background:#fef2f2;color:var(--red);border-radius:4px;padding:2px 6px;font-size:.68rem;font-weight:700}
.crit-n{background:var(--surface-2);color:var(--muted);border-radius:4px;padding:2px 6px;font-size:.68rem}
.yn-grp{display:flex;gap:3px;justify-content:center}
.yn{border:1.5px solid var(--border);border-radius:6px;padding:4px 9px;cursor:pointer;font-weight:700;font-size:.82rem;background:var(--surface-2);color:var(--text);transition:all .12s}
.yn.y-on{background:var(--green);color:#fff;border-color:var(--green)}
.yn.n-on{background:var(--red);color:#fff;border-color:var(--red)}
.row-y{background:#f0fdf4!important}
.row-n{background:#fef2f2!important}
.fail-box{background:var(--white);border:2px solid #fca5a5;border-radius:10px;padding:16px;margin-bottom:14px}
.fail-ttl{font-weight:800;color:var(--red);margin-bottom:10px}
.fail-row{display:flex;align-items:center;gap:8px;padding:5px 0;border-bottom:1px solid #fee2e2;flex-wrap:wrap}
.fail-num{background:var(--red);color:#fff;border-radius:99px;width:20px;height:20px;display:flex;align-items:center;justify-content:center;font-size:.7rem;font-weight:700;flex-shrink:0}
.fail-rem{flex:1;border:1px solid #fca5a5;border-radius:6px;padding:3px 8px;font-size:.78rem;outline:none;min-width:140px}
.sig-row{display:flex;gap:20px;margin-top:20px;padding-top:16px;border-top:1px solid var(--border)}
.sig-item{flex:1;text-align:center}
.sig-line{height:1px;background:var(--muted);margin-bottom:5px}
.sig-lbl{font-weight:700;font-size:.78rem}
.sig-sub{font-size:.7rem;color:var(--muted)}
/* ---- BADGE ---- */
.badge-fail{background:#fef2f2;color:var(--red);border-radius:99px;padding:2px 8px;font-weight:700;font-size:.72rem}
.badge-ok{background:#f0fdf4;color:var(--green);border-radius:99px;padding:2px 8px;font-weight:700;font-size:.72rem}
/* ---- HANDOVER ---- */
.ho-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:16px}
@media(max-width:700px){.ho-grid{grid-template-columns:1fr}}
.ho-card{background:var(--white);border-radius:12px;padding:18px;box-shadow:0 1px 4px rgba(0,0,0,.06)}
.ho-title{font-weight:800;color:var(--navy);margin-bottom:14px;font-size:.95rem;border-bottom:2px solid var(--primary);padding-bottom:6px}
.ho-row{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.ho-lbl{font-size:.8rem;font-weight:600;min-width:130px;color:var(--text)}
.ho-input{flex:1;border:1px solid var(--border);border-radius:6px;padding:6px 10px;font-size:.82rem;outline:none}
.ho-textarea{width:100%;border:1px solid var(--border);border-radius:6px;padding:8px 10px;font-size:.82rem;outline:none;resize:vertical;min-height:80px;font-family:inherit}
.ho-status{display:flex;gap:6px}
.ho-st-btn{border:1.5px solid var(--border);border-radius:6px;padding:4px 10px;cursor:pointer;font-size:.78rem;font-weight:700;background:var(--surface-2)}
.ho-st-btn.ok{background:#16a34a;color:#fff;border-color:#16a34a}
.ho-st-btn.issue{background:#dc2626;color:#fff;border-color:#dc2626}
.ho-checklist{display:flex;flex-direction:column;gap:6px;margin-top:8px}
.ho-check-item{display:flex;align-items:center;gap:8px;padding:6px 10px;background:var(--surface-2);border-radius:6px;font-size:.82rem}
.ho-check-item input[type=checkbox]{width:16px;height:16px;cursor:pointer;accent-color:var(--navy)}
.ho-save-btn{background:var(--primary-dark);color:#fff;border:none;border-radius:8px;padding:10px 24px;cursor:pointer;font-weight:700;font-size:.9rem;margin-top:12px}
/* ---- CHECK WEIGHER ---- */
.cw-toolbar{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-bottom:16px}
.cw-sel{border:1px solid var(--border);border-radius:8px;padding:8px 12px;font-size:.85rem;outline:none;min-width:220px}
.cw-card{background:var(--white);border-radius:12px;padding:20px;box-shadow:0 1px 4px rgba(0,0,0,.06);margin-bottom:16px}
.cw-product-title{font-weight:800;color:var(--navy);font-size:1rem;margin-bottom:4px}
.cw-item-no{font-size:.75rem;color:var(--muted);margin-bottom:16px}
.cw-ranges{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:16px}
.cw-range-box{border-radius:8px;padding:12px;text-align:center}
.cw-range-box.over{background:#fef2f2;border:1.5px solid #fca5a5}
.cw-range-box.good{background:#f0fdf4;border:1.5px solid #86efac}
.cw-range-box.under{background:#fefce8;border:1.5px solid #fde047}
.cw-range-lbl{font-size:.7rem;font-weight:700;margin-bottom:4px}
.cw-range-val{font-size:.82rem;color:var(--text);margin-bottom:10px}
.cw-inp{width:100%;border:1.5px solid var(--border);border-radius:6px;padding:6px;font-size:.9rem;text-align:center;outline:none;font-weight:700}
.cw-inp:focus{border-color:var(--navy)}
.cw-total-row{display:flex;align-items:center;justify-content:space-between;background:var(--surface-2);border-radius:8px;padding:12px 16px;margin-bottom:12px}
.cw-pct-bar-wrap{margin-top:16px}
.cw-pct-lbl{font-size:.75rem;color:var(--muted);margin-bottom:4px;font-weight:600}
.cw-stacked{height:24px;border-radius:8px;overflow:hidden;display:flex;margin-bottom:4px}
.cw-seg{height:100%;transition:width .4s;display:flex;align-items:center;justify-content:center;font-size:.68rem;font-weight:700;color:#fff}
/* ---- DASHBOARD ISSUES ---- */
.db-toolbar{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-bottom:16px}
.db-week-sel{border:1px solid var(--border);border-radius:8px;padding:8px 12px;font-size:.85rem;outline:none}
.db-add-btn{background:var(--primary-dark);color:#fff;border:none;border-radius:8px;padding:8px 16px;cursor:pointer;font-weight:700;font-size:.85rem}
.db-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:14px;margin-bottom:20px}
.issue-card{background:var(--white);border-radius:10px;padding:14px;box-shadow:0 1px 4px rgba(0,0,0,.06);border-left:4px solid var(--red)}
.issue-card.closed{border-left-color:var(--green)}
.issue-hdr{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:8px}
.issue-line{font-weight:700;font-size:.88rem}
.issue-date{font-size:.72rem;color:var(--muted)}
.issue-param{font-size:.82rem;color:var(--text);margin-bottom:6px}
.issue-action{font-size:.78rem;color:var(--muted);background:var(--surface-2);border-radius:6px;padding:6px 8px}
.issue-status{border:none;border-radius:99px;padding:3px 10px;font-size:.7rem;font-weight:700;cursor:pointer}
.issue-status.open{background:#fef2f2;color:var(--red)}
.issue-status.closed{background:#f0fdf4;color:var(--green)}
.db-summary{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:12px;margin-bottom:20px}
.db-stat{background:var(--white);border-radius:10px;padding:14px;box-shadow:0 1px 4px rgba(0,0,0,.06);text-align:center}
.db-stat-num{font-size:2rem;font-weight:800}
.db-stat-lbl{font-size:.75rem;color:var(--muted);margin-top:2px}
/* ---- CW DASHBOARD ---- */
.cwd-table-wrap{overflow-x:auto;background:var(--white);border-radius:12px;box-shadow:0 1px 4px rgba(0,0,0,.06);margin-bottom:20px}
.cwd-table{width:100%;border-collapse:collapse;font-size:.8rem}
.cwd-th{background:var(--primary-dark);color:#fff;padding:9px 12px;text-align:center;font-size:.75rem;font-weight:700;white-space:nowrap}
.cwd-td{padding:8px 12px;border-bottom:1px solid var(--border);text-align:center;vertical-align:middle}
.cwd-td.prod{text-align:left;font-weight:600}
.pct-good{color:var(--green);font-weight:700}
.pct-bad{color:var(--red);font-weight:700}
.pct-warn{color:var(--amber);font-weight:700}
.mini-bar{height:8px;border-radius:99px;overflow:hidden;display:flex;margin-top:3px}
/* ---- MD LOG ---- */
.md-note{background:#eff6ff;border-radius:6px;padding:8px 12px;font-size:.8rem;color:var(--navy);margin-bottom:14px}
.md-table-wrap{overflow-x:auto;background:var(--white);border-radius:12px;box-shadow:0 1px 4px rgba(0,0,0,.06)}
.md-th{background:var(--primary-dark);color:#fff;padding:9px 12px;text-align:center;font-size:.75rem;font-weight:700;border-right:1px solid rgba(255,255,255,.1)}
.md-td{padding:8px 12px;border-bottom:1px solid var(--border);vertical-align:middle}
.md-tdc{padding:8px 12px;border-bottom:1px solid var(--border);text-align:center;vertical-align:middle}
/* ---- UTILS ---- */
.btn-primary{background:var(--primary-dark);color:#fff;border:none;border-radius:8px;padding:8px 18px;cursor:pointer;font-weight:700;font-size:.85rem}
.btn-ghost{background:var(--surface-2);color:var(--text);border:none;border-radius:8px;padding:8px 14px;cursor:pointer;font-weight:600;font-size:.82rem}
.modal-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:500;align-items:center;justify-content:center}
.modal-overlay.open{display:flex}
.modal{background:var(--white);border-radius:14px;padding:24px;width:90%;max-width:500px;box-shadow:0 8px 32px rgba(0,0,0,.18)}
.modal-title{font-weight:800;font-size:1rem;color:var(--navy);margin-bottom:16px}
.form-row{margin-bottom:12px}
.form-row label:not(.nm-cat-row){display:block;font-size:.75rem;font-weight:700;color:var(--muted);text-transform:uppercase;margin-bottom:4px}
.form-row input:not([type="checkbox"]):not([type="radio"]),.form-row select,.form-row textarea{width:100%;border:1px solid var(--border);border-radius:7px;padding:8px 10px;min-height:40px;font-size:.85rem;outline:none;font-family:inherit;background:var(--form-surface);color:var(--form-ink)}
/* Checkboxes/radios inside .form-row (e.g. category lists) must never
   inherit the text-field sizing above — that was stretching them into
   large, distorted squares. Keep them their normal compact native size. */
.form-row input[type="checkbox"],.form-row input[type="radio"]{width:16px;height:16px;min-height:0;flex:0 0 auto;accent-color:var(--primary)}
.form-row textarea{min-height:70px;resize:vertical}
/* Touch targets — standalone controls (not dense in-table inputs) get a
   comfortable minimum height for tablet/gloved use on the factory floor */
button, .btn-primary, .btn-ghost, .nav-btn, select, input[type="text"], input[type="password"],
input[type="email"], input[type="tel"], input[type="number"], input[type="date"]{ min-height:40px; }
table button, table select, table input, .fi{ min-height:0; } /* dense grids opt out */
/* Baseline theme for any plain <input>/<select>/<textarea> that never got its
   own explicit colors — browsers default these to a white field regardless of
   page theme, which is what left stray white boxes across the dark theme.
   Low specificity on purpose: any more specific rule above still wins. */
input, select, textarea{ background:var(--form-surface); color:var(--form-ink); border-color:var(--border); }
/* Baseline for every long-text field: allow vertical resize only (never
   horizontal, which can break page layout) and never let a resized box
   overflow its container. More specific rules above still win. */
textarea{ resize:vertical; max-width:100%; }
input::placeholder, textarea::placeholder{ color:var(--muted); opacity:1; }
.edit-pencil{display:none;cursor:pointer;color:var(--navy);font-size:.85rem;margin-left:6px;opacity:.6}
.edit-pencil:hover{opacity:1}
body.admin-active .edit-pencil{display:inline-flex}
body.admin-active .p-name,body.admin-active .cw-product-title{display:inline-flex;align-items:center;gap:4px}

@media print{
  .header,.header-nav,.btn-primary,.btn-ghost,.lc-btns,.yn,.session-bar .md-info-tag,.db-toolbar,.cw-toolbar,#login-screen,#account-display,.modal-overlay{display:none!important}
  /* Printed pages are always white paper, regardless of the active theme —
     intentionally literal colors here, not design tokens. */
  body{background:#fff!important;color:#000!important}
  .view{display:none!important}
  .view.active{display:block!important;padding:10px;background:#fff!important;color:#000!important}
  body.theme-noir, body.theme-noir .view.active, body.theme-noir .view.active *{
    background:#fff!important;color:#000!important;border-color:#999!important;
  }
}

.quality-nav-btn { display: inline-flex; }
.safety-nav-btn  { display: none !important; }
.maint-nav-btn   { display: none !important; }
.prod-nav-btn    { display: none !important; }
.factory-nav-btn { display: none !important; }
.portal-safety .quality-nav-btn { display: none !important; }
.portal-safety .safety-nav-btn  { display: inline-flex !important; }
.portal-maintenance .quality-nav-btn { display: none !important; }
.portal-maintenance .maint-nav-btn   { display: inline-flex !important; }
.portal-production .quality-nav-btn  { display: none !important; }
.portal-production .prod-nav-btn     { display: inline-flex !important; }
.portal-factory .quality-nav-btn     { display: none !important; }
.portal-factory .factory-nav-btn     { display: inline-flex !important; }

/* Role options visibility */
.quality-role { display: block; }
.safety-role  { display: none; }
.portal-safety-login .quality-role { display: none; }
.portal-safety-login .safety-role  { display: block; }

/* ===== FORM DESIGN SYSTEM v16 — professional portal forms ===== */
:root{
  --form-radius:12px;
  --form-radius-sm:9px;
  --form-shadow:0 4px 20px rgba(76,29,149,.07);
  --form-shadow-lg:0 10px 36px rgba(76,29,149,.12);
  --form-border:rgba(124,58,237,.14);
  --form-focus:0 0 0 3px rgba(124,58,237,.18);
  --form-surface:#FFFFFF;
  --form-soft:#f8f5ff;
  --form-ink:#1e1b4b;
}

/* Page chrome */
.page-title{
  font-size:1.35rem!important;
  font-weight:800!important;
  letter-spacing:-.02em;
  color:var(--navy)!important;
  margin-bottom:4px!important;
  line-height:1.25;
}
.page-sub{
  font-size:.84rem!important;
  color:var(--muted)!important;
  margin-bottom:22px!important;
  max-width:720px;
  line-height:1.45;
}
.view-toolbar{
  display:flex;
  gap:12px;
  align-items:flex-end;
  flex-wrap:wrap;
  margin-bottom:18px;
  padding:14px 16px;
  background:linear-gradient(180deg,var(--form-surface),var(--surface-2));
  border:1px solid var(--form-border);
  border-radius:var(--form-radius);
  box-shadow:var(--form-shadow);
}
.view-toolbar .fg{min-width:140px}
.view-head{
  display:flex;
  gap:12px;
  align-items:center;
  flex-wrap:wrap;
  margin-bottom:16px;
}
.view-head .page-title{margin:0!important;flex:1;min-width:200px}
.view-head-actions{display:flex;gap:8px;flex-wrap:wrap;margin-left:auto}

/* Compact sticky action bar for long, full-page forms (e.g. Risk
   Assessment) — keeps Save/Cancel reachable without hunting to the very
   bottom of a form with many repeatable rows. Reusable utility class;
   only applied where a form is genuinely long. Not used inside modals,
   which already have their own scroll+sticky pattern (.nm-responsive-modal). */
.view-sticky-actions{
  display:flex;gap:10px;flex-wrap:wrap;
  position:sticky;bottom:0;z-index:5;
  margin:14px -4px 0;padding:12px 4px calc(env(safe-area-inset-bottom,0px) + 12px);
  background:linear-gradient(0deg, var(--bg) 62%, transparent);
}

/* Unified fields */
.fg{display:flex;flex-direction:column;gap:5px!important}
.fl,.form-row label:not(.nm-cat-row){
  font-size:.68rem!important;
  letter-spacing:.06em;
  color:#6d28d9!important;
  font-weight:750!important;
  text-transform:uppercase!important;
  margin-bottom:0!important;
}
/* Noir: the hardcoded dark purple above reads fine on pladis's light form
   surface but is too dark against Noir's near-black surface — swap to a
   light violet that stays readable without touching the pladis value. */
body.theme-noir .fl,body.theme-noir .form-row label{
  color:var(--primary-light)!important;
}
.fi,.cw-sel,.ho-input,.ho-textarea,.fail-rem,
.form-row input:not([type="checkbox"]):not([type="radio"]),.form-row select,.form-row textarea,
.db-week-sel{
  border:1.5px solid var(--border)!important;
  border-radius:var(--form-radius-sm)!important;
  padding:9px 12px!important;
  font-size:.86rem!important;
  background-color:var(--form-surface)!important;
  color:var(--form-ink)!important;
  transition:border-color .15s, box-shadow .15s, background-color .15s;
  box-shadow:inset 0 1px 2px rgba(76,29,149,.03);
}
select.fi,select.cw-sel,.form-row select,#cw-product{
  min-height:42px;
  min-width:200px;
  color:var(--form-ink)!important;
  -webkit-text-fill-color:var(--form-ink);
}
.fi:hover,.cw-sel:hover,.ho-input:hover,.form-row input:hover,.form-row select:hover{
  border-color:#c4b5fd!important;
}
.fi:focus,.cw-sel:focus,.ho-input:focus,.ho-textarea:focus,.fail-rem:focus,
.form-row input:focus,.form-row select:focus,.form-row textarea:focus,
.cw-inp:focus,.db-week-sel:focus{
  outline:none!important;
  border-color:var(--primary)!important;
  box-shadow:var(--form-focus)!important;
  background-color:var(--form-surface)!important;
}
textarea.fi,.ho-textarea,.form-row textarea{
  min-height:88px;
  resize:vertical;
  line-height:1.45;
}
select.fi,select.cw-sel,.form-row select{
  cursor:pointer;
  appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%237C3AED' d='M1 1l5 5 5-5'/%3E%3C/svg%3E")!important;
  background-repeat:no-repeat!important;
  background-position:right 12px center!important;
  padding-right:34px!important;
}

/* Buttons */
.btn-primary{
  background:var(--grad)!important;
  color:#fff!important;
  border:none!important;
  border-radius:10px!important;
  padding:10px 18px!important;
  min-height:var(--tap);
  font-weight:750!important;
  font-size:.85rem!important;
  letter-spacing:.01em;
  box-shadow:0 6px 16px color-mix(in srgb, var(--primary) 38%, transparent);
  transition:transform .12s, box-shadow .12s, filter .12s;
}
.btn-primary:hover{filter:brightness(1.08);transform:translateY(-1px);box-shadow:0 8px 22px color-mix(in srgb, var(--primary) 45%, transparent)}
.btn-primary:active{transform:translateY(0)}
.btn-primary:disabled{filter:grayscale(.4);opacity:.6;cursor:not-allowed;transform:none}
.btn-ghost{
  background:var(--form-surface)!important;
  color:var(--navy)!important;
  border:1.5px solid var(--border)!important;
  border-radius:10px!important;
  padding:9px 14px!important;
  min-height:var(--tap);
  font-weight:700!important;
  transition:background .12s, border-color .12s;
}
.btn-ghost:hover{background:var(--surface-2)!important;border-color:var(--primary-light)!important}

/* Modal polish */
.modal-overlay{backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);background:rgba(8,6,14,.55)!important}
.modal{
  border:1px solid rgba(124,58,237,.16)!important;
  border-radius:18px!important;
  box-shadow:var(--form-shadow-lg)!important;
  padding:26px!important;
}
.modal-title{
  font-size:1.15rem!important;
  font-weight:800!important;
  color:var(--navy)!important;
  letter-spacing:-.02em;
  margin-bottom:16px!important;
  padding-bottom:12px;
  border-bottom:1px solid var(--border);
}
.form-row{margin-bottom:14px!important}
.form-row label{color:#6d28d9!important}

/* Checklist */
.cl-shell{display:flex;flex-direction:column;gap:14px}
.cl-header{
  background:linear-gradient(135deg,var(--form-surface) 0%,var(--surface-2) 100%)!important;
  border:1px solid var(--form-border)!important;
  border-radius:var(--form-radius)!important;
  padding:16px 18px!important;
  box-shadow:var(--form-shadow)!important;
  margin-bottom:0!important;
}
.cl-title-row{
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:16px;
}
.cl-title-row #cl-title{
  font-size:1.2rem!important;font-weight:800;letter-spacing:-.02em;flex:1;min-width:180px;
}
.cl-prog-bar{
  height:10px!important;
  background:linear-gradient(90deg,var(--border),var(--border))!important;
  border-radius:99px!important;
  overflow:hidden;
  margin:10px 0 8px!important;
}
.cl-prog-fill{border-radius:99px;box-shadow:0 0 12px rgba(124,58,237,.35)}
.cl-prog-info{font-size:.84rem!important;font-weight:600;color:#5b21b6!important;gap:10px!important}
.session-bar{
  background:var(--form-surface)!important;
  border:1px solid var(--form-border)!important;
  border-radius:var(--form-radius)!important;
  padding:14px 16px!important;
  gap:14px!important;
  box-shadow:var(--form-shadow)!important;
  margin-bottom:4px!important;
}
.md-info-tag{
  background:linear-gradient(135deg,#4C1D95,#7C3AED)!important;
  border-radius:10px!important;
  padding:10px 14px!important;
  font-size:.78rem!important;
  font-weight:650;
  box-shadow:0 4px 14px rgba(76,29,149,.25);
  line-height:1.35;
}
.section-wrap{
  background:var(--form-surface)!important;
  border:1px solid var(--form-border)!important;
  border-radius:14px!important;
  overflow:hidden;
  box-shadow:var(--form-shadow)!important;
  margin-bottom:14px!important;
}
.sec-hdr{
  padding:13px 18px!important;
  font-weight:750!important;
  font-size:.92rem;
  letter-spacing:.01em;
  background:linear-gradient(135deg,var(--navy),#6d28d9)!important;
}
.sec-hdr .jde-chip,.sec-hdr a.jde-chip{
  background:rgba(255,255,255,.22)!important;
  border:1px solid rgba(255,255,255,.28);
  border-radius:99px;
  padding:3px 10px;
  font-size:.68rem;
  font-weight:750;
  margin-left:8px;
  color:#fff!important;
  text-decoration:none;
  vertical-align:middle;
  display:inline-block;
}
.sec-count{
  background:rgba(255,255,255,.22)!important;
  border:1px solid rgba(255,255,255,.25);
  border-radius:99px!important;
  padding:3px 11px!important;
  font-size:.76rem!important;
  backdrop-filter:blur(4px);
}
.sec-chevron{opacity:.85;font-size:.75rem}
.tbl-wrap{overflow-x:auto;background:var(--form-surface)}
table{width:100%;border-collapse:separate;border-spacing:0;font-size:.82rem}
th{
  background:var(--surface-2)!important;
  padding:11px 12px!important;
  font-weight:750!important;
  font-size:.7rem!important;
  letter-spacing:.04em;
  text-transform:uppercase;
  color:var(--primary-dark)!important;
  border-bottom:1.5px solid var(--border)!important;
  white-space:nowrap;
}
/* This blanket th{} rule's !important wins over EVERY per-table th color
   (including tables that set an inline background like .pbi-table/
   .pbih-table's th cells — .theme-quality .pbih-table th{background:#4c1d95}
   and friends never actually apply; this rule always did). --primary-dark
   (#5B21B6) reads fine against --surface-2 in the light theme (contrast is
   high there), but in Noir both tokens are mid/dark tones — measured
   1.97-2.62:1, failing WCAG AA — affecting every plain <th> app-wide.
   --primary-light gives 6.5:1 against --surface-2 in Noir. */
body.theme-noir th{ color:var(--primary-light)!important; }
td{
  padding:10px 12px!important;
  border-bottom:1px solid var(--border)!important;
  vertical-align:middle;
  color:var(--form-ink);
}
tr:last-child td{border-bottom:none!important}
tr:hover td{background:color-mix(in srgb, var(--primary) 8%, transparent)}
.p-name{font-weight:700;color:var(--form-ink)}
.td-std{font-weight:700!important;color:var(--primary-dark)!important}
.td-rng{color:#047857!important;font-weight:600}
body.theme-noir .td-std{color:var(--primary-light)!important}
body.theme-noir .td-rng{color:var(--green)!important}
.crit-y{
  background:linear-gradient(135deg,#fef2f2,#fee2e2)!important;
  color:#b91c1c!important;
  border:1px solid var(--border);
  border-radius:6px!important;
  padding:3px 8px!important;
  font-size:.68rem!important;
  font-weight:800!important;
}
.crit-n{
  background:#f5f3ff!important;
  color:#7c3aed!important;
  border:1px solid var(--border);
  border-radius:6px!important;
  padding:3px 8px!important;
  font-size:.68rem!important;
  font-weight:700!important;
}
.yn-grp{display:flex;gap:6px;justify-content:center}
.yn{
  min-width:52px;
  border:1.5px solid #ddd6fe!important;
  border-radius:8px!important;
  padding:6px 10px!important;
  cursor:pointer;
  font-weight:800!important;
  font-size:.72rem!important;
  letter-spacing:.04em;
  background:#faf8ff!important;
  color:#5b21b6!important;
  transition:all .14s;
}
.yn:hover{border-color:#a78bfa!important;background:#f5f3ff!important}
body.theme-noir .yn:not(.y-on):not(.n-on){border-color:var(--border)!important;background:var(--surface-2)!important;color:var(--primary-light)!important}
body.theme-noir .yn:not(.y-on):not(.n-on):hover{border-color:var(--primary-light)!important;background:color-mix(in srgb, var(--primary) 18%, var(--form-surface))!important}
.yn.y-on{
  background:linear-gradient(135deg,#16a34a,#15803d)!important;
  color:#fff!important;
  border-color:#16a34a!important;
  box-shadow:0 3px 10px rgba(22,163,74,.28);
}
.yn.n-on{
  background:linear-gradient(135deg,#dc2626,#b91c1c)!important;
  color:#fff!important;
  border-color:#dc2626!important;
  box-shadow:0 3px 10px rgba(220,38,38,.28);
}
.row-y{background:linear-gradient(90deg,#f0fdf4,#f7fef9)!important}
.row-n{background:linear-gradient(90deg,#fef2f2,var(--surface-2))!important}
body.theme-noir .row-y{background:linear-gradient(90deg,color-mix(in srgb, var(--green) 20%, var(--form-surface)),color-mix(in srgb, var(--green) 10%, var(--form-surface)))!important}
body.theme-noir .row-n{background:linear-gradient(90deg,color-mix(in srgb, var(--red) 20%, var(--form-surface)),var(--surface-2))!important}
.fail-box{
  background:linear-gradient(180deg,var(--form-surface),#fef2f2)!important;
  border:1.5px solid var(--border)!important;
  border-radius:14px!important;
  padding:18px!important;
  margin:16px 0!important;
  box-shadow:0 4px 18px rgba(220,38,38,.08);
}
body.theme-noir .fail-box{background:linear-gradient(180deg,var(--form-surface),color-mix(in srgb, var(--red) 14%, var(--form-surface)))!important}
.fail-ttl{
  font-weight:800!important;
  color:#b91c1c!important;
  margin-bottom:12px!important;
  font-size:.95rem;
  display:flex;align-items:center;gap:8px;
}
body.theme-noir .fail-ttl{color:var(--red)!important}
.fail-row{
  display:flex;align-items:center;gap:10px;
  padding:10px 0!important;
  border-bottom:1px solid #fee2e2!important;
  flex-wrap:wrap;
}
.fail-num{
  background:linear-gradient(135deg,#dc2626,#b91c1c)!important;
  width:24px!important;height:24px!important;
  font-size:.72rem!important;
}
.sig-row{
  display:grid!important;
  grid-template-columns:repeat(3,1fr);
  gap:16px!important;
  margin-top:22px!important;
  padding:18px!important;
  border:1px solid var(--form-border)!important;
  border-radius:14px;
  background:linear-gradient(180deg,var(--form-surface),var(--surface-2));
  box-shadow:var(--form-shadow);
}
@media(max-width:700px){.sig-row{grid-template-columns:1fr}}
.sig-item{text-align:center;padding:8px}
.sig-line{height:2px!important;background:linear-gradient(90deg,transparent,#c4b5fd,transparent)!important;margin-bottom:8px!important}
.sig-lbl{font-weight:750!important;font-size:.8rem!important;color:var(--navy)}
.sig-sub{font-size:.72rem!important;color:var(--muted)}
.badge-fail,.badge-ok{
  border-radius:99px!important;
  padding:3px 10px!important;
  font-weight:750!important;
  font-size:.72rem!important;
  border:1px solid transparent;
}
.badge-fail{background:#fef2f2!important;color:#b91c1c!important;border-color:var(--border)}
.badge-ok{background:#f0fdf4!important;color:#15803d!important;border-color:#bbf7d0}
.edit-pencil{
  display:none!important;align-items:center;justify-content:center;
  width:22px;height:22px;border-radius:6px;
  background:#f5f3ff;color:#7C3AED!important;
  font-size:.75rem!important;margin-left:6px;
  opacity:.85!important;border:1px solid var(--border);
  cursor:pointer;
}
body.admin-active .edit-pencil{display:inline-flex!important}
body.admin-active .edit-pencil:hover{opacity:1!important;background:var(--border)}

/* Check Weigher */
.cw-toolbar{display:flex;gap:12px;align-items:flex-end;flex-wrap:wrap;margin-bottom:18px;
  padding:14px 16px;background:linear-gradient(180deg,var(--form-surface),var(--surface-2));
  border:1px solid var(--form-border);border-radius:var(--form-radius);box-shadow:var(--form-shadow)}
.cw-card{
  background:var(--form-surface)!important;
  border:1px solid var(--form-border)!important;
  border-radius:16px!important;
  padding:22px!important;
  box-shadow:var(--form-shadow)!important;
}
.cw-product-title{font-size:1.15rem!important;font-weight:800!important;color:var(--navy)!important;letter-spacing:-.02em}
.cw-item-no{
  display:inline-flex;gap:8px;align-items:center;flex-wrap:wrap;
  font-size:.78rem!important;color:var(--primary-light)!important;font-weight:650;
  background:var(--surface-2);border:1px solid var(--border);border-radius:99px;
  padding:5px 12px;margin:8px 0 18px!important;
}
.cw-ranges{display:grid;grid-template-columns:repeat(3,1fr);gap:12px!important;margin-bottom:18px!important}
@media(max-width:700px){.cw-ranges{grid-template-columns:1fr}}
.cw-range-box{
  border-radius:14px!important;padding:16px 14px!important;text-align:center;
  position:relative;overflow:hidden;
}
.cw-range-box::before{
  content:"";position:absolute;inset:0 0 auto 0;height:3px;
}
.cw-range-box.over{background:linear-gradient(180deg,color-mix(in srgb, var(--red) 16%, var(--form-surface)),var(--form-surface))!important;border:1.5px solid var(--border)!important}
.cw-range-box.over::before{background:linear-gradient(90deg,#ef4444,#dc2626)}
.cw-range-box.good{background:linear-gradient(180deg,color-mix(in srgb, var(--green) 16%, var(--form-surface)),var(--form-surface))!important;border:1.5px solid color-mix(in srgb, var(--green) 40%, var(--border))!important}
.cw-range-box.good::before{background:linear-gradient(90deg,#22c55e,#16a34a)}
.cw-range-box.under{background:linear-gradient(180deg,color-mix(in srgb, var(--amber) 16%, var(--form-surface)),var(--form-surface))!important;border:1.5px solid color-mix(in srgb, var(--amber) 40%, var(--border))!important}
.cw-range-box.under::before{background:linear-gradient(90deg,#f59e0b,#d97706)}
.cw-range-lbl{font-size:.68rem!important;font-weight:800!important;letter-spacing:.06em;text-transform:uppercase;margin-bottom:6px!important}
.cw-range-val{font-size:.88rem!important;color:var(--text)!important;font-weight:650;margin-bottom:12px!important}
.cw-inp{
  width:100%;border:1.5px solid var(--border)!important;border-radius:10px!important;
  padding:10px!important;font-size:1.05rem!important;text-align:center;font-weight:800!important;
  background:var(--form-surface)!important;color:var(--navy)!important;
}
.cw-total-row{
  display:flex;align-items:center;justify-content:space-between;
  background:linear-gradient(135deg,color-mix(in srgb, var(--primary) 14%, var(--form-surface)),var(--surface-2))!important;
  border:1px solid var(--border)!important;
  border-radius:12px!important;padding:14px 18px!important;margin-bottom:14px!important;
  color:var(--text);
}
.cw-stacked{height:28px!important;border-radius:10px!important;overflow:hidden}
.cw-seg{font-size:.7rem!important}

/* Handover */
.ho-grid{gap:18px!important}
.ho-card{
  background:var(--form-surface)!important;
  border:1px solid var(--form-border)!important;
  border-radius:16px!important;
  padding:20px!important;
  box-shadow:var(--form-shadow)!important;
}
.ho-title{
  font-weight:800!important;color:var(--navy)!important;font-size:1rem!important;
  border-bottom:2px solid transparent!important;
  border-image:linear-gradient(90deg,#7C3AED,#2563EB) 1;
  padding-bottom:10px!important;margin-bottom:16px!important;
  letter-spacing:-.01em;
}
.ho-row{margin-bottom:12px!important;gap:12px!important}
.ho-lbl{font-size:.72rem!important;font-weight:750!important;color:var(--primary-light)!important;text-transform:uppercase;letter-spacing:.04em;min-width:110px}
.ho-st-btn{
  border:1.5px solid var(--border)!important;border-radius:10px!important;
  padding:8px 12px!important;background:var(--surface-2)!important;font-weight:700!important;
  color:var(--primary-light)!important;transition:all .14s;
}
.ho-st-btn:hover,.ho-st-btn.active,.ho-st-btn.on{
  background:linear-gradient(135deg,#7C3AED,#5B21B6)!important;
  color:#fff!important;border-color:#7C3AED!important;
}
.ho-st-btn.ok{
  background:#16a34a!important;color:#fff!important;border-color:#16a34a!important;
}
.ho-st-btn.issue{
  background:#dc2626!important;color:#fff!important;border-color:#dc2626!important;
}
.ho-st-btn.ok:hover,.ho-st-btn.issue:hover{filter:brightness(1.05)}
.ho-check-item{
  background:var(--surface-2)!important;border:1px solid var(--border)!important;
  border-radius:10px!important;padding:10px 12px!important;margin-bottom:6px;
  color:var(--text);
}
.ho-textarea{border:1.5px solid var(--border)!important;border-radius:10px!important;padding:10px 12px!important}

/* NCR */
.ncr-summary{
  display:grid!important;
  grid-template-columns:repeat(auto-fill,minmax(160px,1fr))!important;
  gap:12px!important;margin-bottom:20px!important;
}
.db-stat,.ncr-kpi{
  background:linear-gradient(180deg,var(--form-surface),var(--surface-2))!important;
  border:1px solid var(--form-border)!important;
  border-radius:14px!important;
  padding:16px!important;
  box-shadow:var(--form-shadow)!important;
  text-align:center;
  transition:transform .14s, box-shadow .14s;
}
.db-stat:hover,.ncr-kpi:hover{transform:translateY(-2px);box-shadow:var(--form-shadow-lg)}
.db-stat-num,.ncr-kpi-num{font-size:1.65rem;font-weight:850;letter-spacing:-.03em;line-height:1.1;margin-bottom:4px}
.db-stat-lbl,.ncr-kpi-lbl{font-size:.72rem;font-weight:700;color:#6d28d9;text-transform:uppercase;letter-spacing:.05em}
/* KPI tile labels (Total NCRs, Open, Closed, ...) — CSS-class color, same
   inline-only-safety-net blind spot; the tile's own background correctly
   darkens in Noir already (measured 2.62:1, failing). */
body.theme-noir .db-stat-lbl,body.theme-noir .ncr-kpi-lbl{color:var(--primary-light)}
.ncr-card{
  background:var(--form-surface);
  border:1px solid var(--form-border);
  border-radius:14px;
  padding:18px;
  margin-bottom:14px;
  box-shadow:var(--form-shadow);
  border-left:4px solid var(--navy);
  position:relative;
  transition:transform .14s, box-shadow .14s;
}
.ncr-card:hover{transform:translateY(-1px);box-shadow:var(--form-shadow-lg)}
.ncr-card-head{display:flex;justify-content:space-between;align-items:flex-start;flex-wrap:wrap;gap:10px;margin-bottom:12px}
.ncr-card-title{font-weight:850;font-size:1rem;color:var(--navy);letter-spacing:-.02em}
.ncr-card-meta{font-size:.76rem;color:var(--muted);margin-top:3px;font-weight:550}
.ncr-chip{
  display:inline-flex;align-items:center;border-radius:99px;
  padding:4px 12px;font-size:.72rem;font-weight:750;color:#fff;
}
.ncr-status-btn{
  border:none;border-radius:99px;padding:5px 14px;font-size:.72rem;font-weight:750;cursor:pointer;
}
.ncr-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px 14px;font-size:.82rem;margin-bottom:12px}
@media(max-width:600px){.ncr-grid{grid-template-columns:1fr}}
.ncr-grid b{color:#5b21b6;font-weight:750}
/* Field labels (Product, MRR #, Batch/Lot, Raised By, ...) on NCR cards and
   the Hold Details modal — CSS-class color, never touched by the inline-
   only safety net, while its container's background does correctly darken
   in Noir (measured 2.07:1, failing). */
body.theme-noir .ncr-grid b{color:var(--primary-light)}
.ncr-block{
  /* Fixed light background regardless of theme (Light or Violet Noir) —
     must be paired with a fixed dark text color, never an inherited/themed
     one, or the text goes near-invisible in the Noir theme where ambient
     text is light. This was the root cause of the Re-Work case card /
     NCR Linked Records / CAPA block contrast bug (text only readable when
     selected). */
  background:#faf8ff;border:1px solid var(--border);border-radius:10px;
  padding:12px 14px;font-size:.82rem;margin-bottom:8px;line-height:1.45;
  color:#1f2937;
}
/* Direct-child only (not a plain descendant selector) — a nested sub-box
   further inside (e.g. the amber HOLD STATUS notice inside the Linked
   Records block) carries its own explicit color paired with its own
   background, and must not be pulled back to this block's own dark-on-light
   pairing by a blanket "any <b> anywhere inside" rule. */
.ncr-block > b{color:#1f2937}
.ncr-block.ok{background:#f0fdf4;border-color:#bbf7d0;color:#14532d}
.ncr-block.ok > b{color:#14532d}
/* Linked Records / Hold-Linked block — was previously set via an INLINE
   style="background:#f8fafc;..." attribute, which the theme-noir safety
   net below (its own [style*="background:#f8fafc"] rule) intercepts and
   redarkens the BACKGROUND only, since that net only remaps colors that
   are themselves written inline — the paired text color here came from
   this class (not inline), so it never got remapped, leaving dark
   #1f2937 text on a safety-net-darkened dark surface in Noir (invisible
   until selected). Defining the pairing as a class instead of inline
   style makes it invisible to the substring-matching safety net, so
   background and text color always stay paired correctly in both themes. */
.ncr-block.linked{background:#f8fafc;border:1px dashed #cbd5e1;color:#1f2937}
/* Same root cause reproduced inside .ncr-block.linked itself: its "view
   Hold Pallets" / "view" links use inline style="color:#2563eb", which the
   safety net DOES catch (color:#2563eb is in its general remap list,
   correctly, for links elsewhere that sit on now-dark backgrounds) — but
   this card's own background is the deliberately theme-independent light
   one above, so remapping only the link text creates the exact same
   mismatch a second time. Pin it back to the original blue, scoped to
   inside this always-light card only. */
body.theme-noir .ncr-block.linked a{color:#2563eb!important}
.ncr-empty{
  text-align:center;padding:48px 24px;color:var(--muted);
  background:linear-gradient(180deg,var(--form-surface),var(--surface-2));
  border:1.5px dashed #ddd6fe;border-radius:16px;
}
body.theme-noir .ncr-empty{border-color:var(--border)}
.ncr-empty-title{font-weight:800;color:var(--navy);font-size:1rem;margin-bottom:6px}
.cls-pick{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:6px}
.cls-pick .ho-st-btn{
  font-size:.78rem;width:100%;white-space:normal;text-align:center;
  min-height:46px;line-height:1.25;padding:10px 8px!important;
}
.choice-chip-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:6px}
.choice-chip{
  display:flex;align-items:flex-start;gap:10px;min-width:0;
  padding:11px 12px;border:1.5px solid var(--border);border-radius:12px;
  background:#faf8ff;font-size:.84rem;font-weight:650;color:#1e1b4b;
  line-height:1.35;min-height:48px;cursor:pointer;box-sizing:border-box;
}
.choice-chip span{min-width:0;overflow-wrap:anywhere;word-break:break-word}
.choice-chip input{
  flex-shrink:0;width:18px;height:18px;margin-top:2px;accent-color:#7C3AED;
}
.choice-chip:has(input:checked){
  border-color:#7C3AED;background:var(--border);box-shadow:0 0 0 2px rgba(124,58,237,.12);
}
.form-2col{display:grid;grid-template-columns:1fr 1fr;gap:12px;min-width:0}
.form-2col > *{min-width:0}
.capa-head,.capa-row{
  display:grid;grid-template-columns:44px minmax(0,1fr) 130px 140px 36px;
  gap:8px;align-items:center;padding:6px 8px;
}
.capa-row{border-bottom:1px solid var(--border)}
.capa-row input{width:100%;min-width:0;box-sizing:border-box;margin:0!important}
.ra-meta-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.ra-pair-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:8px}
.ra-pair-grid > div{min-width:0}
.ra-pair-grid select{max-width:100%}
.ra-risk-cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.ra-risk-cols > div{min-width:0}
.ra-ls-row{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.ra-suggest-note{display:none;font-size:.68rem;color:var(--muted);margin-top:6px;font-style:italic;line-height:1.4}
.ra-suggest-note.show{display:block}
/* Reference panels (Risk Matrix / Hierarchy of Controls) */
.ra-ref-details{border:1px solid var(--border);border-radius:10px;margin-bottom:14px;background:var(--form-surface);overflow:hidden}
.ra-ref-details summary{cursor:pointer;padding:12px 14px;font-weight:800;font-size:.85rem;color:var(--navy);list-style:none;display:flex;align-items:center;gap:8px;user-select:none}
.ra-ref-details summary::-webkit-details-marker{display:none}
.ra-ref-details summary::before{content:"▸";font-size:.75rem;color:var(--primary);transition:transform .15s}
.ra-ref-details[open] summary::before{transform:rotate(90deg)}
.ra-ref-body{padding:0 14px 16px;display:flex;flex-direction:column;gap:4px}
.ra-ref-title{font-size:.78rem;font-weight:800;color:var(--navy);margin:4px 0 8px;text-transform:uppercase;letter-spacing:.03em}
/* Nested reference sub-sections (Matrix / Likelihood / Severity / Risk Rating Guidance / Hierarchy) */
.ra-subref{border:1px solid var(--border);border-radius:8px;margin-bottom:8px;overflow:hidden}
.ra-subref summary{cursor:pointer;padding:9px 12px;font-weight:750;font-size:.78rem;color:var(--navy);list-style:none;display:flex;align-items:center;gap:7px;user-select:none;background:var(--surface-2)}
.ra-subref summary::-webkit-details-marker{display:none}
.ra-subref summary::before{content:"▸";font-size:.68rem;color:var(--primary);transition:transform .15s}
.ra-subref[open] summary::before{transform:rotate(90deg)}
.ra-subref-body{padding:12px}
.ra-guide-table{width:100%;border-collapse:collapse;font-size:.72rem}
.ra-guide-table th,.ra-guide-table td{border:1px solid var(--border);padding:7px 8px;text-align:left;vertical-align:top}
.ra-guide-table th{background:var(--surface-2);color:var(--text);font-weight:800;white-space:nowrap}
.ra-guide-table td:first-child{white-space:nowrap;font-weight:800;text-align:center}
.ra-guide-wrap{overflow-x:auto}
.ra-guidance-card{border-radius:8px;padding:10px 12px;margin-bottom:8px}
.ra-guidance-card b{display:block;font-size:.78rem;margin-bottom:3px}
.ra-guidance-card span{font-size:.72rem;line-height:1.45;opacity:.96}
.ra-matrix-wrap{overflow-x:auto}
.ra-matrix{border-collapse:collapse;font-size:.72rem;min-width:340px}
.ra-matrix th,.ra-matrix td{border:1px solid var(--border);text-align:center;padding:6px 4px;min-width:38px}
.ra-matrix thead th{background:var(--surface-2);color:var(--text);font-weight:800}
.ra-matrix tbody th{background:var(--surface-2);color:var(--text);font-weight:800}
.ra-matrix td{font-weight:800}
.ra-matrix-axis{font-size:.66rem;color:var(--muted);font-weight:700;text-align:center;margin-top:4px}
.ra-matrix-legend{display:flex;flex-wrap:wrap;gap:6px 10px;margin-top:10px}
.ra-matrix-legend span{display:inline-flex;align-items:center;gap:5px;font-size:.68rem;color:var(--muted);font-weight:650}
.ra-matrix-legend i{width:10px;height:10px;border-radius:3px;display:inline-block}
.ra-hier{display:flex;flex-direction:column;align-items:center;gap:4px;margin-top:4px}
.ra-hier-tier{color:#fff;text-align:center;padding:9px 12px;border-radius:7px;font-size:.72rem;font-weight:650;box-sizing:border-box;line-height:1.35}
.ra-hier-tier b{display:block;font-size:.8rem;margin-bottom:1px}
.ra-hier-tier:nth-child(1){width:100%;background:var(--primary-dark)}
.ra-hier-tier:nth-child(2){width:84%;background:color-mix(in srgb, var(--primary-dark) 55%, var(--primary))}
.ra-hier-tier:nth-child(3){width:68%;background:var(--primary)}
.ra-hier-tier:nth-child(4){width:52%;background:color-mix(in srgb, var(--primary) 55%, var(--primary-light))}
.ra-hier-tier:nth-child(5){width:36%;background:var(--primary-light);color:#1e1b4b}
/* Who-May-Be-Harmed multi-select reuses the existing .choice-chip component
   (already used by NCR Product Type / Action Taken) — adding the noir
   override here benefits both; neither had one before. */
body.theme-noir .choice-chip{background:var(--form-surface);color:var(--form-ink)}
body.theme-noir .choice-chip:has(input:checked){background:color-mix(in srgb, var(--primary) 22%, var(--form-surface));border-color:var(--primary-light);box-shadow:0 0 0 2px rgba(167,139,250,.18)}
.ra-who-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
@media(max-width:900px){ .ra-who-grid{grid-template-columns:1fr 1fr!important} }
@media(max-width:520px){ .ra-who-grid{grid-template-columns:1fr!important} }
/* Chemical / Exposure Details */
.ra-exposure{border:1px dashed var(--border);border-radius:8px;margin:10px 0;overflow:hidden}
.ra-exposure summary{cursor:pointer;padding:9px 12px;font-weight:750;font-size:.76rem;color:var(--navy);list-style:none;display:flex;align-items:center;gap:7px;user-select:none}
.ra-exposure summary::-webkit-details-marker{display:none}
.ra-exposure summary::before{content:"▸";font-size:.68rem;color:var(--primary);transition:transform .15s}
.ra-exposure[open] summary::before{transform:rotate(90deg)}
.ra-exposure-body{padding:0 12px 12px;display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px}
@media(max-width:700px){ .ra-exposure-body{grid-template-columns:1fr 1fr} }
@media(max-width:460px){ .ra-exposure-body{grid-template-columns:1fr} }
.ra-exposure-body > div{min-width:0}
.ra-exposure-body select,.ra-exposure-body input:not([type="checkbox"]){width:100%;box-sizing:border-box}
.ra-exp-route-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;grid-column:1/-1}
@media(max-width:520px){ .ra-exp-route-grid{grid-template-columns:1fr 1fr} }
/* Risk Assessment Team */
.ra-team-row{display:grid;grid-template-columns:1.4fr 1fr 1.2fr 1fr auto;gap:8px;margin-bottom:8px;align-items:end}
@media(max-width:760px){ .ra-team-row{grid-template-columns:1fr 1fr} }
.ra-team-row > div{min-width:0}
.ra-team-row label{font-size:.68rem;font-weight:700;color:#6b7280;display:block;margin-bottom:2px}
/* Non-blocking validation warnings + risk reduction visual + high/extreme card */
.ra-warn{display:none;background:color-mix(in srgb, var(--amber) 16%, var(--form-surface));border:1px solid var(--amber);border-radius:8px;padding:8px 10px;margin-top:8px;font-size:.72rem;color:var(--text);font-weight:650}
.ra-warn.show{display:block}
.ra-highrisk-card{display:none;background:color-mix(in srgb, var(--red) 16%, var(--form-surface));border:1.5px solid var(--red);border-radius:8px;padding:10px 12px;margin-top:8px;font-size:.74rem;color:var(--text);line-height:1.5}
.ra-highrisk-card.show{display:block}
.ra-highrisk-card b{color:var(--red)}
.ra-reduction{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:10px;padding:10px;border-radius:8px;background:var(--surface-2)}
.ra-reduction-step{display:flex;flex-direction:column;align-items:center;gap:2px;font-size:.68rem;color:var(--muted);font-weight:700;min-width:76px}
.ra-reduction-step b{font-size:.7rem;font-weight:800;padding:3px 9px;border-radius:6px}
.ra-reduction-arrow{font-size:.85rem;color:var(--muted);display:flex;flex-direction:column;align-items:center;font-weight:700;text-align:center;line-height:1.2}
.pmt-doc{border:2px solid #7C3AED;border-radius:12px;margin-bottom:0;overflow:visible;box-shadow:0 4px 20px rgba(76,29,149,.08)}
.pmt-doc-head{display:grid;grid-template-columns:auto minmax(0,1fr) auto;border-bottom:1px solid var(--border);background:linear-gradient(180deg,var(--form-surface),var(--surface-2))}
.pmt-field-row,.pmt-text-row{display:grid;grid-template-columns:minmax(110px,160px) minmax(0,1fr);border-bottom:1px solid var(--border);min-height:36px}
.pmt-field-label{padding:8px 10px;background:#f5f3ff;font-size:.75rem;font-weight:700;color:#5b21b6;border-right:1px solid var(--border);display:flex;align-items:center;line-height:1.3}
.pmt-field-input{padding:4px 8px;display:flex;align-items:center;min-width:0}
.pmt-field-input input,.pmt-text-row textarea{border:none;outline:none;width:100%;max-width:100%;font-size:.82rem;font-family:inherit;background:transparent;box-sizing:border-box}
.pmt-duration-row{display:grid;grid-template-columns:minmax(110px,160px) repeat(3,minmax(0,1fr));border-bottom:1px solid var(--border);min-height:36px}
.pmt-duration-cell{padding:8px;display:flex;align-items:center;gap:6px;border-right:1px solid var(--border);min-width:0;flex-wrap:wrap}
.pmt-check-row,.pmt-check-head{display:grid;grid-template-columns:minmax(0,1fr) 68px 68px;border-bottom:1px solid var(--border);min-height:34px;align-items:center}
.pmt-check-label{padding:8px 10px;font-size:.78rem;color:#111827;line-height:1.35;overflow-wrap:anywhere}
.pmt-check-yes,.pmt-check-no{text-align:center;border-left:1px solid var(--border);padding:6px 4px}
.pmt-sig-row{display:grid;grid-template-columns:1fr 1fr 1fr;border-top:2px solid var(--navy)}
.pmt-day-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:6px;padding:8px;border-bottom:1px solid var(--border)}
/* .pmt-day-cell's own background is a fixed light lavender (never darkens
   in Noir — it's a plain CSS-class background, not an inline style, so
   the safety net's [style*="background:..."] matching never reaches it).
   Pairing it with var(--muted) (which DOES flip light in Noir) produced
   near-invisible light-on-light text. Pin the text fixed too, to match
   its permanently-light container. */
.pmt-day-cell{padding:8px;font-size:.72rem;text-align:center;color:#6b7280;background:#faf8ff;border:1px solid var(--border);border-radius:8px;min-width:0}
/* Item description text (.pmt-check-label) is a CSS-class color, the same
   safety-net blind spot found repeatedly elsewhere (inline-only matching):
   #111827 on the modal's own dark Noir background reads at ~1:1. */
body.theme-noir .pmt-check-label{color:var(--text)!important}
/* The "Item" COLUMN HEADER cell (pCheckHeader()) reuses the same class but
   sits inside .pmt-check-head, whose own background is a fixed light
   lavender gradient (inline, but a gradient — the substring
   "background:#f5f3ff" never literally appears, so the background safety
   net doesn't touch it either). Its own #4C1D95 already reads perfectly
   there in both themes; the general Noir remap above (meant for the dark
   modal surface) would otherwise repaint it var(--primary-light), which
   mismatches this permanently-light header. Scoped tighter than the rule
   above so it wins regardless of source order. */
body.theme-noir .pmt-check-head .pmt-check-label{color:#4C1D95!important}
/* Same story for the header's YES/NO labels — pCheckHeader() already uses
   #15803d/#b91c1c (dark enough for the pinned-light header in Light
   theme); pin them back from the general green/red Noir remap for the
   same reason as .pmt-check-head .pmt-check-label above. */
body.theme-noir .pmt-check-head .pmt-check-yes{color:#15803d!important}
body.theme-noir .pmt-check-head .pmt-check-no{color:#b91c1c!important}
/* fmc13's Energy Isolation confirmation box (<div class="pmt-iso-note"
   style="background:#e0f2fe">) is a permanently light-blue inline
   background (not in the background safety net), but its own text and
   its fi2() field labels (color:#6b7280, itself remapped to var(--muted)
   in Noir) are not — producing near-white-on-light-blue in Noir and a
   narrow, already-marginal gray-on-light-blue failure in Light. Pin both
   to a fixed dark navy that reads correctly against this fixed light box
   in every theme. */
.pmt-iso-note{color:#0c4a6e}
.pmt-iso-note label{color:#0c4a6e!important}
/* fi2()'s label carries its own inline color:#6b7280, which the Noir
   safety net remaps to var(--muted) at (0,2,1) specificity — higher than
   the plain ".pmt-iso-note label" rule above (0,1,1), so it was still
   winning. Match/beat it explicitly. */
body.theme-noir .pmt-iso-note label{color:#0c4a6e!important}
/* fi2()'s label color (#6b7280) is designed for the many light/white
   field boxes it's normally used inside. The two Permit Serial No./WO
   Notification # fields are the one place fi2() is reused inside the
   permanently-dark navy document header (background:#1e3a5f, inline
   solid — also outside the background safety net's literal-match list) —
   in Light theme #6b7280 stays unmapped there (2.38:1); Noir already
   remaps it to var(--muted), which happens to read fine against that same
   dark header, so only Light theme needs the fix. */
body.theme-pladis .pmt-header-field label{color:rgba(255,255,255,.82)!important}

/* Product Master lookup — searchable autocomplete dropdown (bindProductLookup).
   In-flow block below the field (same convention as .ra-suggest-picker),
   not an absolutely-positioned overlay — no z-index/overflow juggling
   needed, and it naturally pushes surrounding content down like every
   other "picker" panel in the app. Uses theme tokens throughout so it
   never needs a separate Noir remap entry. */
.pml-suggest{
  background:var(--form-surface);
  border:1px solid var(--form-border);
  border-radius:10px;
  margin-top:4px;
  padding:4px;
  max-height:260px;
  overflow-y:auto;
  box-shadow:var(--form-shadow-lg);
  position:relative;
  z-index:20;
}
.pml-option{
  padding:7px 10px;
  border-radius:7px;
  cursor:pointer;
  line-height:1.3;
}
.pml-option:hover,.pml-option.active{
  background:color-mix(in srgb, var(--primary) 14%, var(--form-surface));
}
.pml-option-desc{font-size:.82rem;font-weight:700;color:var(--text)}
.pml-option-item{font-size:.72rem;color:var(--muted);margin-top:2px}
.pml-match{background:color-mix(in srgb, var(--primary) 30%, transparent);color:inherit;border-radius:3px;padding:0 1px}
.pml-empty{padding:10px;font-size:.78rem;color:var(--muted);text-align:center}

@media(max-width:900px){
  .cls-pick{grid-template-columns:1fr!important}
  .choice-chip-grid{grid-template-columns:1fr!important}
  .form-2col,.ra-pair-grid{grid-template-columns:1fr!important}
  .ra-meta-grid{grid-template-columns:1fr 1fr!important}
  .ra-risk-cols{grid-template-columns:1fr!important}
  .capa-head{display:none!important}
  .capa-row{grid-template-columns:1fr!important;gap:8px;padding:10px 8px}
  .pmt-doc-head{grid-template-columns:1fr!important}
  .pmt-doc-head > div{border:none!important;border-bottom:1px solid var(--border)!important}
  .pmt-field-row,.pmt-text-row,.pmt-duration-row{grid-template-columns:1fr!important}
  .pmt-field-label{border-right:none!important;border-bottom:1px solid var(--border)}
  .pmt-duration-cell{border-right:none!important;border-bottom:1px solid var(--surface-2)}
  .pmt-check-row,.pmt-check-head{grid-template-columns:minmax(0,1fr) 72px 72px!important}
  .pmt-sig-row{grid-template-columns:1fr!important}
  .pmt-day-grid{grid-template-columns:1fr 1fr!important}
  .pmt-sig-row > div{border-left:none!important;border-top:1px solid var(--border)}
  #permit-modal .modal > div:first-child{flex-wrap:wrap!important;gap:10px!important}
  #permit-type-label{white-space:normal!important}
  #view-riskassess,#view-permits,#view-fullptw,#view-ncr{overflow-x:visible}
  .ii-chip,.choice-chip,.pmt-check-label{overflow-wrap:anywhere;word-break:break-word}
}
@media(max-width:600px){
  .ra-meta-grid{grid-template-columns:1fr!important}
  .pmt-day-grid{grid-template-columns:1fr!important}
}

/* Clearance / generic panels */
.pro-panel{
  background:var(--form-surface);
  border:1px solid var(--form-border);
  border-radius:16px;
  padding:20px;
  box-shadow:var(--form-shadow);
  margin-bottom:16px;
}
.pro-panel-title{font-weight:800;font-size:1.05rem;color:var(--navy);letter-spacing:-.02em}
.pro-panel-sub{font-size:.76rem;color:var(--muted);margin-top:2px}
.history-chip{
  border:1px solid var(--border);border-radius:8px;padding:4px 10px;margin:0 3px;
  background:var(--form-surface);color:var(--text);cursor:pointer;font-size:.74rem;font-weight:650;
  transition:all .12s;
}
.history-chip.active,.history-chip:hover{background:var(--primary-dark);color:#fff;border-color:var(--navy)}

/* Legend pills */
.legend-row{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:14px}
.legend-pill{
  font-size:.74rem;font-weight:700;padding:5px 12px;border-radius:99px;
  background:#f5f3ff;border:1px solid var(--border);color:#5b21b6;
}
body.theme-noir .legend-pill{background:color-mix(in srgb, var(--primary) 20%, var(--form-surface));color:var(--primary-light)}

/* ============================================================
   EMPTY STATES — one shared, theme-aware component for every list/
   table/card that can legitimately contain zero records. Replaces a
   dead rule that matched no real element (emptyState() never applied
   its own class, so `content:none` on `.empty-state` never suppressed
   anything in practice) with an actual visual style used by the
   emptyState() helper and the BI dashboard card helpers below.
   ============================================================ */
.empty-state{
  text-align:center;padding:36px 20px;border-radius:12px;
  background:var(--form-surface);border:1px dashed var(--border);
  color:var(--muted);
}
.empty-state .empty-state-icon{font-size:2.2rem;margin-bottom:10px;opacity:.75}
.empty-state .empty-state-title{font-weight:700;color:var(--text);margin-bottom:5px}
.empty-state .empty-state-hint{font-size:.82rem;color:var(--muted)}
/* Compact variant for smaller inline cards (BI dashboard widgets) */
.empty-state.empty-state-sm{padding:16px;border-style:solid;font-size:.8rem}

/* Metal detector screen polish (keeps print structure) */
#view-md > div:first-child{
  border-color:#7C3AED!important;
  border-radius:14px!important;
  box-shadow:var(--form-shadow);
  overflow:hidden;
}
@media print{
  #view-md > div:first-child{border-color:var(--navy)!important;box-shadow:none}
}

/* Lines frequency note */
#view-lines > div:last-child{
  border-radius:12px!important;
  border-color:var(--border)!important;
  background:linear-gradient(180deg,var(--form-surface),var(--surface-2))!important;
  box-shadow:var(--form-shadow);
}

/* Cards grid for lines */
.line-card,.quick-card{
  border:1px solid var(--form-border)!important;
  border-radius:14px!important;
  box-shadow:var(--form-shadow)!important;
  transition:transform .14s, box-shadow .14s;
}
.line-card:hover,.quick-card:hover{transform:translateY(-2px);box-shadow:var(--form-shadow-lg)}

/* Scoring / misc toolbars */
.db-toolbar{
  padding:14px 16px;background:linear-gradient(180deg,var(--form-surface),var(--surface-2));
  border:1px solid var(--form-border);border-radius:var(--form-radius);
  box-shadow:var(--form-shadow);margin-bottom:18px!important;
}
.db-add-btn{
  background:linear-gradient(135deg,#7C3AED,#5B21B6)!important;
  border-radius:10px!important;padding:10px 16px!important;
  box-shadow:0 6px 16px rgba(124,58,237,.28);
}

/* Near-miss / CAPA section banners inside modals */
.modal [style*="background:#fef3c7"],
.modal [style*="background:#fef3c7"]{
  border:1px solid #fde68a!important;
  border-radius:10px!important;
}

/* Mobile */
@media(max-width:640px){
  .view-toolbar,.cw-toolbar,.session-bar{padding:12px}
  .page-title{font-size:1.15rem!important}
  .cw-ranges{grid-template-columns:1fr!important}
  .ncr-grid{grid-template-columns:1fr!important}
  th,td{padding:8px 9px!important;font-size:.76rem}
  .yn{min-width:46px;padding:5px 8px!important}
}

/* Portal list cards — shared professional chrome */
.pro-list-card{
  background:var(--form-surface);border:1px solid rgba(124,58,237,.14);border-radius:14px;
  padding:16px 18px;margin-bottom:12px;box-shadow:0 4px 20px rgba(76,29,149,.07);
  border-left:4px solid #7C3AED;transition:transform .14s,box-shadow .14s;
}
.pro-list-card:hover{transform:translateY(-1px);box-shadow:0 10px 36px rgba(76,29,149,.12)}
.pro-list-card.danger{border-left-color:#dc2626}
.pro-list-card.warn{border-left-color:#d97706}
.pro-list-card.ok{border-left-color:#16a34a}
.pro-list-card.info{border-left-color:#2563eb}
.pro-empty{
  background:linear-gradient(180deg,var(--form-surface),var(--surface-2));border:1.5px dashed #ddd6fe;
  border-radius:16px;padding:48px 24px;text-align:center;color:var(--muted);font-weight:600;
}
body.theme-noir .pro-empty{border-color:var(--border)}
.view-head-bar{
  display:flex;align-items:center;gap:10px;margin-bottom:16px;flex-wrap:wrap;
}
.view-head-bar .page-title{margin:0!important;flex:1}




/* ===== WAVE 2 — Workflow · Escalation · Smart Handover · Evidence ===== */
.wf-bar{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin:8px 0}
.wf-chip{font-size:.68rem;font-weight:800;padding:3px 9px;border-radius:99px;border:1px solid var(--border);background:var(--surface-2);color:var(--muted)}
.wf-chip.on{background:var(--primary-dark);color:#fff;border-color:var(--navy)}
.wf-chip.done{background:#dcfce7;color:#166534;border-color:#bbf7d0}
.wf-actions{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.esc-banner{background:linear-gradient(135deg,#7f1d1d,#b91c1c);color:#fff;border-radius:12px;padding:14px 16px;margin-bottom:14px}
.esc-banner h3{margin:0 0 8px;font-size:.95rem;font-weight:900}
.esc-item{background:rgba(255,255,255,.12);border-radius:8px;padding:8px 10px;margin-top:6px;font-size:.78rem}
.smart-ho-box{background:color-mix(in srgb, var(--accent-2) 12%, var(--form-surface));border:1px solid var(--border);border-radius:12px;padding:14px;margin-bottom:14px}
.smart-ho-box h3{margin:0 0 8px;color:var(--navy);font-size:.9rem;font-weight:900}
.ev-btn{background:#0f172a!important;color:#fff!important;border-color:#0f172a!important}

/* ===== WAVE 1 — Daily Hub + Audit Mode ===== */
.daily-hub{margin-bottom:22px}
.daily-hub-head{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:12px}
.daily-hub-head h2{margin:0;font-size:1.15rem;font-weight:900;color:var(--navy);letter-spacing:-.02em}
.daily-hub-head p{margin:4px 0 0;font-size:.78rem;color:var(--muted);font-weight:600}
.daily-hub-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(132px,1fr));gap:10px;margin-bottom:12px}
.dh-kpi{background:var(--form-surface);border:1px solid var(--border);border-radius:12px;padding:12px 12px 10px;position:relative;overflow:hidden}
.dh-kpi::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--dh-c,var(--navy))}
.dh-kpi b{display:block;font-size:1.45rem;font-weight:900;color:var(--dh-c,var(--navy));line-height:1.1}
.dh-kpi span{display:block;margin-top:4px;font-size:.7rem;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.03em}
.dh-kpi.alert{background:#fef2f2;border-color:var(--border)}
.daily-hub-alerts{display:grid;gap:8px;margin-bottom:8px}
.dh-alert{display:flex;align-items:flex-start;gap:10px;background:var(--form-surface);border:1px solid var(--border);border-left:4px solid var(--dh-c,#d97706);border-radius:10px;padding:10px 12px}
.dh-alert strong{display:block;font-size:.82rem;color:var(--text)}
.dh-alert em{display:block;font-style:normal;font-size:.72rem;color:var(--muted);margin-top:2px}
.dh-alert button{margin-left:auto;flex-shrink:0}
.audit-shell{max-width:1100px;margin:0 auto}
.audit-banner{background:linear-gradient(135deg,#0f172a,var(--navy));color:#fff;border-radius:14px;padding:18px 20px;margin-bottom:16px}
.audit-banner h2{margin:0 0 4px;font-size:1.2rem;font-weight:900}
.audit-banner p{margin:0;opacity:.85;font-size:.82rem}
.audit-readonly{display:inline-block;background:#fbbf24;color:#78350f;font-size:.68rem;font-weight:800;padding:3px 8px;border-radius:6px;margin-top:8px;letter-spacing:.04em}
.fs-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:10px}
.fs-card{background:var(--form-surface);border:1px solid var(--border);border-radius:10px;padding:12px}
.fs-card .fs-name{font-weight:800;color:var(--navy);font-size:.82rem;margin-bottom:8px}
.fs-pill{display:inline-block;font-size:.65rem;font-weight:800;padding:2px 7px;border-radius:99px;margin:2px 3px 0 0}
.fs-pill.ok{background:#dcfce7;color:#166534}
.fs-pill.miss{background:#fee2e2;color:#991b1b}

/* Soft-upgrade remaining legacy white cards inside portal views */
.view [style*="box-shadow:0 1px 4px"]{
  border:1px solid rgba(124,58,237,.12)!important;
  box-shadow:0 4px 20px rgba(76,29,149,.07)!important;
}
.view [style*="border-radius:10px"][style*="background:#fff"],
.view [style*="border-radius:12px"][style*="background:#fff"]{
  border:1px solid rgba(124,58,237,.12);
}


/* ===== ANIMATED PORTAL CHROME v17 ===== */
@keyframes hdrShine{
  0%{background-position:0% 50%}
  50%{background-position:100% 50%}
  100%{background-position:0% 50%}
}
@keyframes hdrBarPulse{
  0%,100%{opacity:.85;filter:brightness(1)}
  50%{opacity:1;filter:brightness(1.15)}
}
@keyframes lcIn{
  from{opacity:0;transform:translateY(22px) scale(.96)}
  to{opacity:1;transform:translateY(0) scale(1)}
}
@keyframes lcGlow{
  0%,100%{opacity:.3;transform:scale(1)}
  50%{opacity:.75;transform:scale(1.08)}
}
@keyframes lcBtnShine{
  0%{transform:translateX(-130%)}
  60%,100%{transform:translateX(230%)}
}
@keyframes lcDot{
  0%,100%{transform:scale(1);opacity:.65}
  50%{transform:scale(1.4);opacity:1}
}
@keyframes clRowIn{
  from{opacity:0;transform:translateX(-10px)}
  to{opacity:1;transform:translateX(0)}
}
@keyframes clProgGlow{
  0%,100%{box-shadow:0 0 0 0 rgba(124,58,237,0)}
  50%{box-shadow:0 0 12px 2px rgba(124,58,237,.4)}
}
@keyframes softFloat{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-3px)}
}

.header{
  position:sticky;top:0;z-index:200;
  background:var(--header-bg)!important;
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border-bottom:none!important;
  box-shadow:var(--card-shadow)!important;
  padding:12px 20px!important;
  overflow:visible;
}
.header::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:3px;
  background:linear-gradient(90deg,var(--primary),var(--accent-2),var(--primary-light),var(--primary),var(--accent-2));
  background-size:220% 100%;
  animation:hdrShine 4s linear infinite, hdrBarPulse 2.8s ease-in-out infinite;
}
/* Header chrome is always a dark surface (see --header-bg in both themes),
   so its text stays light regardless of the active theme.
   ROOT-CAUSE FIX: the gradient used to include --form-surface and --accent-2
   as color stops. Both are theme-dependent and, in at least one theme each
   (Light/pladis's --accent-2 is near-black; Noir's --form-surface is near-
   black), land almost exactly on --header-bg's own dark color — so whichever
   portion of the animated shimmer sat on that stop became text the same
   color as its background, i.e. invisible without selecting it. #fff and
   --primary-light are confirmed light in every theme, so the shimmer now
   only ever animates between colors that read clearly on the dark header. */
.sys-title{
  background:linear-gradient(110deg,#fff 0%,var(--primary-light) 35%,#fff 65%,var(--primary-light) 100%);
  background-size:220% auto;
  -webkit-background-clip:text;background-clip:text;
  color:transparent!important;
  -webkit-text-fill-color:transparent;
  animation:hdrShine 5s ease infinite;
  letter-spacing:-.02em;
}
.sys-sub{color:rgba(255,255,255,.72)!important;font-weight:650}
/* Per-portal header identity — dark chrome tint per module, always legible */
body.portal-safety .header{background:linear-gradient(120deg,#5c1410,#2b0906)!important}
body.portal-safety .header-nav{background:linear-gradient(90deg,#5c1410,#2b0906)!important}
body.portal-maintenance .header{background:linear-gradient(120deg,#063d30,#04211a)!important}
body.portal-maintenance .header-nav{background:linear-gradient(90deg,#063d30,#04211a)!important}
body.portal-production .header{background:linear-gradient(120deg,#5c3209,#2b1704)!important}
body.portal-production .header-nav{background:linear-gradient(90deg,#5c3209,#2b1704)!important}
body.portal-factory .header{background:linear-gradient(120deg,#2f0b57,#160529)!important}
body.portal-factory .header-nav{background:linear-gradient(90deg,#2f0b57,#160529)!important}
#account-display{
  background:rgba(255,255,255,.14)!important;
  color:#fff!important;
  border:1px solid rgba(255,255,255,.22)!important;
  box-shadow:0 4px 16px rgba(0,0,0,.18);
  transition:transform .18s, box-shadow .18s;
}
#account-display:hover{transform:translateY(-1px);box-shadow:0 8px 22px rgba(76,29,149,.12)}
#account-avatar{
  background:var(--grad)!important;
  box-shadow:0 0 0 2px color-mix(in srgb, var(--primary) 20%, transparent);
  transition:box-shadow .18s;
}
#account-display:hover #account-avatar{box-shadow:0 0 0 3px color-mix(in srgb, var(--primary) 45%, transparent)}
/* Compact icon-based Sign Out control — replaces the previous large red
   "Logout" pill button. Logic unchanged: still calls doLogout(). */
.account-signout-btn{
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
  width:30px;height:30px;border-radius:50%;
  background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.24);
  color:#fff;cursor:pointer;padding:0;
  transition:background .18s,border-color .18s,transform .18s;
}
.account-signout-btn:hover{background:var(--red);border-color:var(--red);transform:scale(1.06)}
.account-signout-btn .account-signout-arrow{transition:transform .18s}
.account-signout-btn:hover .account-signout-arrow{transform:translateX(1.5px)}
@media(prefers-reduced-motion:reduce){
  .account-signout-btn,.account-signout-btn .account-signout-arrow,#account-avatar,#account-display{transition:none!important}
  .account-signout-btn:hover{transform:none}
}

/* Theme switcher — lives only on each portal's Home page (not the persistent
   header), as two labeled swatch buttons. */
.theme-switch-wrap{display:flex;align-items:center;justify-content:center;gap:10px;margin:22px 0 4px;flex-wrap:wrap}
.theme-switch-label{font-size:.68rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.theme-switch-btn{
  width:34px;height:34px;min-width:34px;border-radius:50%;cursor:pointer;
  border:2px solid rgba(255,255,255,.28);
  font-size:.85rem;line-height:1;display:flex;align-items:center;justify-content:center;
  transition:transform .15s, border-color .15s, box-shadow .15s;
  color:rgba(255,255,255,.55);
}
.theme-switch-btn[data-theme-choice="noir"]{ background:linear-gradient(135deg,#8B5CF6,#170F24); }
.theme-switch-btn[data-theme-choice="pladis"]{ background:linear-gradient(135deg,#EA0029,#231F20); }
.theme-switch-btn:hover{ transform:translateY(-1px) scale(1.05); }
.theme-switch-btn.active{ border-color:#fff; color:#fff; box-shadow:0 0 0 3px rgba(255,255,255,.18); }

/* ============================================================
   PORTAL HOME — hero banner + quick-links grid
   Replaces the old plain "Welcome back / Open Menu" block with an
   animated, theme-aware hero (icon + glow, matching the splash art
   language) and a real quick-links grid per portal.
============================================================ */
.ph-hero{
  position:relative;overflow:hidden;border-radius:22px;padding:30px 28px;
  margin:6px 0 22px;display:flex;align-items:center;gap:22px;flex-wrap:wrap;
  color:#fff;box-shadow:0 18px 44px color-mix(in srgb, var(--ph-c,var(--primary)) 30%, transparent);
  background:linear-gradient(150deg, var(--ph-c,var(--primary)) 0%, var(--ph-c-dark,#170F24) 78%);
  animation:phHeroIn .6s cubic-bezier(.22,1,.36,1) both;
}
@keyframes phHeroIn{ from{opacity:0;transform:translateY(10px)} to{opacity:1;transform:translateY(0)} }
.ph-hero::before{
  content:'';position:absolute;inset:-30% -10% auto auto;width:260px;height:260px;border-radius:50%;
  background:radial-gradient(circle, color-mix(in srgb, #fff 30%, transparent), transparent 70%);
  animation:phGlow 5s ease-in-out infinite;
}
@keyframes phGlow{ 0%,100%{opacity:.55;transform:scale(1)} 50%{opacity:.9;transform:scale(1.12)} }
.ph-hero-icon{
  position:relative;z-index:1;flex-shrink:0;width:76px;height:76px;border-radius:20px;
  display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.22);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.06);
  animation:phIconPulse 3.2s ease-in-out infinite;
}
.ph-hero-icon svg{width:38px;height:38px}
@keyframes phIconPulse{ 0%,100%{box-shadow:0 0 0 0 rgba(255,255,255,.18), inset 0 0 0 1px rgba(255,255,255,.06)} 50%{box-shadow:0 0 0 10px rgba(255,255,255,0), inset 0 0 0 1px rgba(255,255,255,.06)} }
.ph-hero-text{position:relative;z-index:1;min-width:0;flex:1}
.ph-hero-kicker{font-size:.68rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;opacity:.78;margin-bottom:6px}
.ph-hero-title{font-size:1.4rem;font-weight:900;letter-spacing:-.01em;margin-bottom:6px;text-shadow:0 2px 12px rgba(0,0,0,.18)}
.ph-hero-sub{font-size:.84rem;opacity:.88;max-width:460px;line-height:1.55}
.ph-hero-actions{position:relative;z-index:1;display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}
.ph-hero-btn{
  background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.3);color:#fff;
  border-radius:10px;padding:9px 16px;min-height:40px;font-weight:800;font-size:.8rem;cursor:pointer;
  transition:background .15s, transform .15s;
}
.ph-hero-btn:hover{background:rgba(255,255,255,.26);transform:translateY(-1px)}
.ph-hero-date{position:relative;z-index:1;text-align:right;font-size:.72rem;opacity:.75;min-width:140px}
.ph-hero-date b{display:block;font-size:.92rem;font-weight:800;opacity:1}

.ph-quicklinks{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px;margin:0 0 40px}
.ph-qc{
  position:relative;overflow:hidden;text-align:left;cursor:pointer;font-family:inherit;
  background:var(--form-surface);border:1px solid var(--border);border-radius:16px;padding:16px;
  box-shadow:var(--card-shadow);transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  opacity:0;transform:translateY(12px);animation:phQcIn .5s cubic-bezier(.22,1,.36,1) forwards;
  display:flex;gap:12px;align-items:flex-start;
}
@keyframes phQcIn{ to{opacity:1;transform:translateY(0)} }
.ph-qc:hover{transform:translateY(-3px);box-shadow:0 14px 32px color-mix(in srgb, var(--qc-c,var(--primary)) 22%, transparent);border-color:var(--qc-c,var(--primary))}
.ph-qc-icon{
  flex-shrink:0;width:38px;height:38px;border-radius:11px;display:flex;align-items:center;justify-content:center;
  background:color-mix(in srgb, var(--qc-c,var(--primary)) 16%, transparent);color:var(--qc-c,var(--primary));
}
.ph-qc-icon svg{width:20px;height:20px}
.ph-qc-label{display:block;font-weight:800;color:var(--qc-c,var(--primary));font-size:.86rem;margin-bottom:3px}
.ph-qc-desc{display:block;font-size:.74rem;color:var(--muted);line-height:1.5}
.ph-section-label{font-size:.72rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin:0 0 12px}

#admin-btn.edit-portal-on{
  background:linear-gradient(135deg,#16a34a,#15803d)!important;
  border-color:#16a34a!important;
  color:#fff!important;
}

.cards-grid{gap:18px!important}
.line-card{
  position:relative;overflow:hidden;
  background:linear-gradient(165deg,var(--form-surface) 0%,var(--surface-2) 100%)!important;
  border:1px solid var(--form-border)!important;
  border-radius:18px!important;
  padding:20px!important;
  box-shadow:var(--card-shadow)!important;
  border-top:none!important;
  animation:lcIn .6s cubic-bezier(.22,.9,.3,1) both;
  transition:transform .22s ease, box-shadow .22s ease;
  cursor:default!important;
}
.line-card::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:5px;
  background:var(--lc-accent,#7C3AED);
  border-radius:18px 0 0 18px;
}
.line-card .lc-glow{
  position:absolute;right:-36px;top:-36px;width:130px;height:130px;pointer-events:none;
  background:radial-gradient(circle, var(--lc-accent-soft, rgba(124,58,237,.28)), transparent 70%);
  animation:lcGlow 3s ease-in-out infinite;
}
.line-card:hover{
  transform:translateY(-6px) scale(1.012);
  box-shadow:0 18px 42px rgba(76,29,149,.15)!important;
}
.lc-top{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;margin-bottom:8px}
.lc-name{
  font-weight:850!important;font-size:1.08rem!important;letter-spacing:-.02em;
  line-height:1.25;margin-bottom:0!important;
}
.lc-pulse-dot{
  width:10px;height:10px;border-radius:50%;flex-shrink:0;margin-top:6px;
  background:var(--lc-accent,#7C3AED);
  box-shadow:0 0 0 4px var(--lc-accent-soft, rgba(124,58,237,.22));
  animation:lcDot 1.7s ease-in-out infinite;
}
.lc-md{
  font-size:.72rem!important;font-weight:700!important;color:#5b21b6!important;
  background:linear-gradient(90deg,#f5f3ff,var(--border))!important;
  border:1px solid var(--border);border-radius:99px!important;
  padding:5px 12px!important;margin-bottom:14px!important;display:inline-block;
}
.lc-prog-bar{
  height:8px!important;background:linear-gradient(90deg,var(--border),var(--border))!important;
  border-radius:99px!important;margin-bottom:8px!important;overflow:hidden;
}
.lc-prog-fill{animation:clProgGlow 2s ease-in-out infinite}
.lc-btns{display:flex;gap:10px;margin-top:14px!important}
.lc-start{
  position:relative;overflow:hidden;flex:1;color:#fff;border:none;
  border-radius:12px!important;padding:12px 0!important;cursor:pointer;
  font-weight:800!important;font-size:.9rem!important;letter-spacing:.02em;
  box-shadow:0 8px 18px var(--lc-accent-soft, rgba(124,58,237,.3));
  transition:transform .15s, filter .15s;
}
.lc-start::after{
  content:"";position:absolute;inset:0 auto 0 0;width:42%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.38),transparent);
  animation:lcBtnShine 2.6s ease-in-out infinite;
}
.lc-start:hover{filter:brightness(1.07);transform:translateY(-1px)}
.lc-start:active{transform:scale(.98)}
.lc-play{
  display:inline-flex;align-items:center;justify-content:center;
  width:22px;height:22px;border-radius:50%;background:rgba(255,255,255,.22);
  margin-right:8px;font-size:.68rem;vertical-align:middle;line-height:1;
}
.lc-reset{
  border:1.5px solid var(--border);background:var(--form-surface);border-radius:12px;width:46px;
  font-weight:800;color:#7C3AED;cursor:pointer;transition:background .15s;
}
.lc-reset:hover{background:#f5f3ff}

.cl-shell .section-wrap{animation:lcIn .48s cubic-bezier(.22,.9,.3,1) both}
.cl-shell .section-wrap:nth-child(1){animation-delay:.03s}
.cl-shell .section-wrap:nth-child(2){animation-delay:.08s}
.cl-shell .section-wrap:nth-child(3){animation-delay:.13s}
.cl-shell .section-wrap:nth-child(4){animation-delay:.18s}
.cl-shell .section-wrap:nth-child(5){animation-delay:.23s}
.cl-shell .section-wrap:nth-child(6){animation-delay:.28s}
.cl-shell .section-wrap:nth-child(7){animation-delay:.33s}
.cl-shell .section-wrap:nth-child(8){animation-delay:.38s}
.cl-shell tbody tr{animation:clRowIn .32s ease both}
.cl-shell .cl-prog-fill,.cl-header .cl-prog-fill{animation:clProgGlow 2.2s ease-in-out infinite}
.cl-shell .yn{transition:transform .12s, background .14s, box-shadow .14s}
.cl-shell .yn:active{transform:scale(.92)}
.cl-title-row #cl-title{animation:softFloat 3.6s ease-in-out infinite}

.view.active > .page-title:first-child::after{
  content:"";display:block;width:52px;height:3px;margin-top:8px;border-radius:99px;
  background:linear-gradient(90deg,#7C3AED,#2563EB,#a78bfa);
  background-size:200% 100%;animation:hdrShine 3s linear infinite;
}

/* Sidebar collapse — works on desktop + mobile */
body.has-portal-sidebar .portal-sidebar{
  transition:transform .32s cubic-bezier(.22,.9,.3,1), opacity .25s;
}
body.has-portal-sidebar.ps-collapsed .portal-sidebar{
  transform:translateX(calc(-100% - 24px))!important;
  opacity:0;pointer-events:none;
}
body.has-portal-sidebar.ps-collapsed .header,
body.has-portal-sidebar.ps-collapsed .view{
  margin-left:0!important;
}
body.has-portal-sidebar.ps-collapsed .ps-backdrop{display:none!important}
/* Reopen FAB when collapsed (all viewports) */
body.has-portal-sidebar.ps-collapsed .ps-mobile-bar{display:flex!important}
.ps-toggle{z-index:2;position:relative}
.ps-toggle:hover{background:rgba(255,255,255,.18)!important}


/* Portal Open Menu — professional landing */
.portal-landing{
  max-width:1120px;margin:0 auto;padding:8px 4px 40px;
}
.portal-landing-hero{
  position:relative;overflow:hidden;
  background:linear-gradient(135deg,#4C1D95 0%,#7C3AED 48%,#2563EB 100%);
  border-radius:22px;padding:28px 28px 26px;color:#fff;
  box-shadow:0 16px 40px rgba(76,29,149,.22);margin-bottom:22px;
}
.portal-landing-hero::before{
  content:"";position:absolute;right:-40px;top:-40px;width:180px;height:180px;border-radius:50%;
  background:radial-gradient(circle,rgba(255,255,255,.18),transparent 70%);
  animation:lcGlow 3.5s ease-in-out infinite;
}
.portal-landing-hero::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:3px;
  background:linear-gradient(90deg,#a78bfa,var(--form-surface),#a78bfa);background-size:200% 100%;
  animation:hdrShine 3.5s linear infinite;
}
.portal-landing-kicker{
  font-size:.72rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;
  opacity:.85;margin-bottom:8px;
}
.portal-landing-title{font-size:1.55rem;font-weight:900;letter-spacing:-.03em;margin:0 0 6px;position:relative;z-index:1}
.portal-landing-sub{font-size:.9rem;opacity:.9;max-width:560px;line-height:1.45;position:relative;z-index:1}
.portal-landing-groups{display:flex;flex-direction:column;gap:22px}
.portal-landing-group-title{
  font-size:.72rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  color:#6d28d9;margin-bottom:10px;display:flex;align-items:center;gap:8px;
}
.portal-landing-group-title::after{
  content:"";flex:1;height:1px;background:linear-gradient(90deg,var(--border),transparent);
}
.portal-landing-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:14px;
}
.pl-card{
  position:relative;overflow:hidden;cursor:pointer;
  background:linear-gradient(165deg,var(--form-surface) 0%,var(--surface-2) 100%);
  border:1px solid rgba(124,58,237,.14);border-radius:16px;padding:18px 16px;
  box-shadow:0 6px 22px rgba(76,29,149,.07);
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s;
  animation:lcIn .5s cubic-bezier(.22,.9,.3,1) both;
  text-align:left;min-height:118px;display:flex;flex-direction:column;gap:8px;
}
.pl-card:hover{
  transform:translateY(-4px);border-color:rgba(124,58,237,.35);
  box-shadow:0 14px 34px rgba(76,29,149,.14);
}
.pl-card::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:4px;
  background:var(--pl-accent,#7C3AED);
}
.pl-card-ico{
  width:48px;height:48px;border-radius:14px;display:inline-flex;align-items:center;justify-content:center;
  background:linear-gradient(145deg,rgba(124,58,237,.16),rgba(37,99,235,.12));
  color:var(--pl-accent,#7C3AED);flex-shrink:0;
  border:1px solid rgba(124,58,237,.18);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.65);
}
.pl-card-ico .ps-ico{width:24px;height:24px;display:inline-flex}
.pl-card-ico .ps-ico svg, .pl-card-ico svg{width:24px;height:24px;stroke:currentColor}
.pl-card-label{font-size:.92rem;font-weight:800;color:var(--navy);letter-spacing:-.02em;line-height:1.25}
.pl-card-desc{font-size:.75rem;color:var(--muted);line-height:1.4;flex:1}
.pl-card-go{
  font-size:.7rem;font-weight:800;color:#7C3AED;letter-spacing:.04em;text-transform:uppercase;
  display:inline-flex;align-items:center;gap:4px;margin-top:2px;
}
.pl-card:hover .pl-card-go{gap:8px}
@media(max-width:640px){
  .portal-landing-hero{padding:22px 18px;border-radius:18px}
  .portal-landing-title{font-size:1.25rem}
  .portal-landing-grid{grid-template-columns:1fr 1fr;gap:10px}
  .pl-card{min-height:100px;padding:14px 12px}
}


/* ===== FEATURE PACK v21 ===== */
@keyframes notifSlideIn{from{opacity:0;transform:translateX(28px) scale(.96)}to{opacity:1;transform:translateX(0) scale(1)}}
@keyframes notifPulse{0%,100%{box-shadow:0 0 0 0 rgba(124,58,237,.45)}50%{box-shadow:0 0 0 10px rgba(124,58,237,0)}}
#notif-live-banner{position:fixed;top:76px;right:18px;z-index:10050;display:flex;flex-direction:column;gap:10px;min-width:300px;max-width:400px;pointer-events:none}

body.intro-active button[onclick="openNotifPanel()"]{display:none!important}
body.intro-active #notif-live-banner,body.intro-active #notif-panel{display:none!important}

#notif-live-banner .nlb-card{pointer-events:auto;animation:notifSlideIn .38s cubic-bezier(.22,.9,.3,1);border-radius:16px;overflow:hidden;border:1px solid rgba(255,255,255,.2);box-shadow:0 18px 40px rgba(30,27,75,.28)}
#notif-live-banner .nlb-top{display:flex;gap:12px;padding:14px 16px;color:#fff;background:linear-gradient(135deg,#4C1D95,#7C3AED 55%,#2563EB)}
#notif-live-banner .nlb-top.pm{background:linear-gradient(135deg,#065f46,#0d9488,#14b8a6)}
#notif-live-banner .nlb-top.clearance{background:linear-gradient(135deg,#4C1D95,#7C3AED)}
#notif-live-banner .nlb-top.workorder{background:linear-gradient(135deg,#92400e,#d97706)}
#notif-live-banner .nlb-top.warning{background:linear-gradient(135deg,#b91c1c,#dc2626)}
#notif-live-banner .nlb-ico{width:40px;height:40px;border-radius:12px;background:rgba(255,255,255,.18);display:flex;align-items:center;justify-content:center;font-size:1.1rem;flex-shrink:0;animation:notifPulse 2s infinite}
#notif-live-banner .nlb-title{font-weight:850;font-size:.88rem;letter-spacing:-.01em}
#notif-live-banner .nlb-from{font-size:.7rem;opacity:.88;margin-top:2px;font-weight:650}
/* Same root-cause bug class as .ncr-block: background:var(--form-surface)
   goes dark in the Noir theme, but the text color here was a fixed dark
   navy — near-invisible until selected. This shared notification banner is
   used from every portal, so the fix applies everywhere at once. */
#notif-live-banner .nlb-body{background:var(--form-surface);padding:12px 14px;color:var(--text);font-size:.78rem;line-height:1.45;max-height:160px;overflow:auto;white-space:pre-wrap}
#notif-live-banner .nlb-checks{margin:8px 0 0;padding:0;list-style:none}
#notif-live-banner .nlb-checks li{display:flex;gap:8px;align-items:flex-start;padding:5px 0;border-top:1px solid #f3e8ff;font-size:.74rem;color:var(--primary-light);font-weight:650}
#notif-live-banner .nlb-checks li::before{content:"✓";color:#7C3AED;font-weight:900}
#notif-live-banner .nlb-actions{display:flex;gap:8px;padding:10px 14px;background:#faf8ff;border-top:1px solid var(--border)}
#notif-live-banner .nlb-actions button{flex:1;border:none;border-radius:10px;padding:8px 10px;font-weight:800;font-size:.75rem;cursor:pointer}
#notif-live-banner .nlb-go{background:linear-gradient(135deg,#7C3AED,#5B21B6);color:#fff}
#notif-live-banner .nlb-dismiss{background:#faf8ff;color:#6d28d9;border:1px solid var(--border)!important}
#notif-panel{display:none;position:fixed;top:68px;right:14px;width:min(420px,94vw);max-height:82vh;overflow:hidden;background:linear-gradient(180deg,var(--form-surface),var(--surface-2));border-radius:18px;z-index:10040;border:1px solid rgba(124,58,237,.18);box-shadow:0 20px 50px rgba(76,29,149,.2);padding:0;flex-direction:column}
#notif-panel.open{display:flex!important;animation:notifSlideIn .3s ease}
.np-head{display:flex;align-items:center;gap:10px;padding:16px 18px;background:linear-gradient(135deg,#4C1D95,#7C3AED);color:#fff}
.np-head h3{margin:0;font-size:1rem;font-weight:850;flex:1;letter-spacing:-.02em}
.np-head button{border:none;background:rgba(255,255,255,.15);color:#fff;border-radius:8px;padding:6px 10px;cursor:pointer;font-weight:700;font-size:.72rem}
.np-body{overflow-y:auto;padding:12px;flex:1}
.np-empty{text-align:center;padding:48px 20px;color:var(--muted)}
.np-card{background:var(--form-surface);border:1px solid var(--border);border-radius:14px;padding:14px;margin-bottom:10px;border-left:4px solid #7C3AED;box-shadow:0 4px 14px rgba(76,29,149,.06);cursor:pointer;transition:transform .15s}
.np-card:hover{transform:translateY(-2px)}
.np-card.pm{border-left-color:#0d9488}
.np-card.clearance{border-left-color:#7C3AED}
.np-card.workorder{border-left-color:#d97706}
.np-card.warning{border-left-color:#dc2626}
.np-card-title{font-weight:800;color:#1e1b4b;font-size:.86rem}
.np-card-meta{font-size:.7rem;color:#7c3aed;font-weight:700;margin:3px 0 6px}
.np-card-details{font-size:.76rem;color:var(--muted);white-space:pre-wrap;line-height:1.4}
/* .np-card's background is var(--form-surface) (theme-aware, near-black in
   Noir) but the title/meta text colors above are hardcoded CSS-class values
   never covered by the global inline-style safety net — same recurring
   safety-net-blind-spot bug class as .ncr-grid b / .db-stat-lbl. */
body.theme-noir .np-card-title{color:var(--primary-light)}
body.theme-noir .np-card-meta{color:var(--primary-light)}
.np-checks{margin-top:8px;padding:8px 10px;background:#f5f3ff;border-radius:10px;border:1px solid var(--border)}
.np-checks div{font-size:.72rem;color:#5b21b6;font-weight:650;padding:3px 0}
.np-checks div::before{content:"☐ ";color:#7C3AED}
.home-notif-wrap{max-width:980px;margin:14px auto 0;padding:0 14px;--hn-glow:rgba(124,58,237,.28);animation:hnWrapIn .65s cubic-bezier(.22,.9,.3,1) both}
.home-notif-wrap.portal-quality{--hn-accent:#7C3AED;--hn-accent2:#2563EB;--hn-accent-soft:#f5f3ff;--hn-border:var(--border);--hn-glow:rgba(124,58,237,.32)}
.home-notif-wrap.portal-safety{--hn-accent:#991B1B;--hn-accent2:#B42318;--hn-accent-soft:#fef2f2;--hn-border:var(--border);--hn-glow:rgba(153,27,27,.34)}
.home-notif-wrap.portal-maintenance{--hn-accent:#0d9488;--hn-accent2:#065f46;--hn-accent-soft:#f0fdfa;--hn-border:#99f6e4;--hn-glow:rgba(13,148,136,.32)}
.home-notif-wrap.portal-production{--hn-accent:#B45309;--hn-accent2:#92400e;--hn-accent-soft:#fffbeb;--hn-border:#fde68a;--hn-glow:rgba(180,83,9,.34)}
.home-notif-panel{position:relative;overflow:hidden;background:linear-gradient(145deg,var(--form-surface) 0%,var(--hn-accent-soft) 120%);border:1px solid var(--hn-border);border-radius:18px;padding:16px 18px;box-shadow:0 14px 36px rgba(15,23,42,.07),inset 0 1px 0 rgba(255,255,255,.85)}
.home-notif-panel::before{content:'';position:absolute;inset:0;background:linear-gradient(105deg,transparent 0%,rgba(255,255,255,.45) 45%,transparent 70%);background-size:220% 100%;animation:hnShimmer 7s ease-in-out infinite;pointer-events:none;opacity:.55}
.home-notif-panel::after{content:'';position:absolute;left:0;top:0;bottom:0;width:4px;background:linear-gradient(180deg,var(--hn-accent),var(--hn-accent2));border-radius:18px 0 0 18px}
.hn-ambient{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:0}
.hn-fx-orb{position:absolute;border-radius:50%;filter:blur(28px);opacity:.28;animation:hnOrbFloat 9s ease-in-out infinite}
.portal-quality .hn-fx-orb.a{width:140px;height:140px;background:#7C3AED;top:-40px;right:-20px}
.portal-quality .hn-fx-orb.b{width:100px;height:100px;background:#2563EB;bottom:-30px;left:12%;animation-delay:-3s}
.portal-quality .hn-fx-scan{position:absolute;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent,var(--hn-accent),transparent);box-shadow:0 0 16px var(--hn-accent);animation:hnQualityScan 4.2s ease-in-out infinite;opacity:.75}
.portal-safety .hn-fx-orb.a{width:130px;height:130px;background:#991B1B;top:-35px;left:-25px}
.portal-safety .hn-fx-orb.b{width:90px;height:90px;background:#B42318;bottom:-20px;right:8%;animation-delay:-2.5s}
.portal-safety .hn-fx-ripple{position:absolute;top:18px;right:18px;width:56px;height:56px;border:2px solid rgba(220,38,38,.35);border-radius:50%;animation:hnSafetyRipple 2.8s ease-out infinite}
.portal-safety .hn-fx-ripple::after{content:'';position:absolute;inset:8px;border:2px solid rgba(220,38,38,.25);border-radius:50%;animation:hnSafetyRipple 2.8s ease-out infinite .9s}
.portal-maintenance .hn-fx-orb.a{width:120px;height:120px;background:#0d9488;top:-30px;right:10%}
.portal-maintenance .hn-fx-orb.b{width:80px;height:80px;background:#065f46;bottom:-25px;left:-15px;animation-delay:-4s}
.portal-maintenance .hn-fx-gear{position:absolute;top:14px;right:16px;width:42px;height:42px;border:3px dashed rgba(13,148,136,.28);border-radius:50%;animation:hnMaintSpin 14s linear infinite}
.portal-maintenance .hn-fx-gear::before{content:'';position:absolute;inset:10px;border:2px solid rgba(13,148,136,.35);border-radius:50%;border-top-color:transparent;border-right-color:transparent}
.portal-production .hn-fx-orb.a{width:130px;height:130px;background:#B45309;top:-35px;right:-15px}
.portal-production .hn-fx-orb.b{width:95px;height:95px;background:#92400e;bottom:-28px;left:10%;animation-delay:-3.5s}
.portal-production .hn-fx-belt{position:absolute;left:0;right:0;bottom:0;height:3px;background:repeating-linear-gradient(90deg,var(--hn-accent) 0 12px,transparent 12px 22px);animation:hnProdConveyor 1.4s linear infinite;opacity:.65}
.home-notif-head,.home-notif-section,.home-notif-actions{position:relative;z-index:1}
.home-notif-head{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:14px;padding-bottom:12px;border-bottom:1px solid rgba(255,255,255,.65)}
.home-notif-head-brand{display:flex;align-items:center;gap:10px;min-width:0}
.home-notif-head-mark{width:38px;height:38px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:.95rem;font-weight:900;color:#fff;background:linear-gradient(135deg,var(--hn-accent),var(--hn-accent2));box-shadow:0 8px 20px var(--hn-glow);animation:hnIconPulse 3s ease-in-out infinite}
.home-notif-head-title{font-weight:900;font-size:.9rem;letter-spacing:-.02em;color:var(--hn-accent);line-height:1.2}
.home-notif-head-sub{font-size:.64rem;font-weight:700;color:var(--muted);letter-spacing:.06em;text-transform:uppercase;margin-top:2px}
.home-notif-actions{display:flex;gap:8px;flex-wrap:wrap}
.home-notif-section{margin-top:12px;position:relative;z-index:1}
.home-notif-section:first-of-type{margin-top:0}
.home-notif-section-label{display:inline-flex;align-items:center;gap:6px;font-size:.67rem;font-weight:900;letter-spacing:.09em;text-transform:uppercase;margin-bottom:9px;padding:5px 11px;border-radius:999px}
.home-notif-section-label.critical{background:color-mix(in srgb, var(--red) 16%, var(--form-surface));color:var(--red);border:1px solid var(--border);box-shadow:0 4px 14px rgba(220,38,38,.08)}
.home-notif-section-label.normal{background:color-mix(in srgb, var(--accent-2) 16%, var(--form-surface));color:var(--accent-2);border:1px solid var(--border);box-shadow:0 4px 14px color-mix(in srgb, var(--accent-2) 12%, transparent)}
.home-notif-section-label::before{content:'';width:7px;height:7px;border-radius:50%;background:currentColor;animation:hnIconPulse 2s ease-in-out infinite}
.home-notif-card{position:relative;display:flex;gap:12px;padding:12px 14px;border-radius:14px;border:1px solid var(--border);margin-bottom:9px;background:color-mix(in srgb, var(--form-surface) 88%, transparent);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);transition:transform .22s cubic-bezier(.22,.9,.3,1),box-shadow .22s ease,border-color .22s ease;animation:hnCardIn .55s cubic-bezier(.22,.9,.3,1) both;overflow:hidden}
.home-notif-card:last-child{margin-bottom:0}
.home-notif-card::before{content:'';position:absolute;inset:0;background:linear-gradient(120deg,transparent,rgba(255,255,255,.55),transparent);transform:translateX(-120%);transition:transform .65s ease;pointer-events:none}
.home-notif-card:hover{transform:translateY(-2px) scale(1.005);box-shadow:0 14px 28px rgba(15,23,42,.08)}
.home-notif-card:hover::before{transform:translateX(120%)}
.home-notif-card.unread{border-color:var(--hn-border);box-shadow:0 8px 22px var(--hn-glow);animation:hnCardIn .55s cubic-bezier(.22,.9,.3,1) both,hnUnreadGlow 2.4s ease-in-out infinite}
.home-notif-card.critical{border-left:4px solid #dc2626}
.home-notif-card.critical.unread{animation:hnCardIn .55s cubic-bezier(.22,.9,.3,1) both,hnCriticalBeat 2s ease-in-out infinite}
.home-notif-card.normal{border-left:4px solid var(--hn-accent2)}
.hn-card-glow{position:absolute;top:-20px;right:-20px;width:80px;height:80px;border-radius:50%;background:radial-gradient(circle,var(--hn-glow),transparent 70%);opacity:.45;pointer-events:none;animation:hnOrbFloat 6s ease-in-out infinite}
.home-notif-card-ico{position:relative;width:40px;height:40px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:.72rem;font-weight:900;flex-shrink:0;color:#fff;z-index:1}
.home-notif-card-ico.critical{background:linear-gradient(135deg,#b91c1c,#dc2626);box-shadow:0 8px 18px rgba(220,38,38,.28)}
.home-notif-card-ico.normal{background:linear-gradient(135deg,var(--hn-accent),var(--hn-accent2));box-shadow:0 8px 18px var(--hn-glow)}
.hn-ico-ring{position:absolute;inset:-4px;border-radius:14px;border:2px solid rgba(255,255,255,.45);animation:hnIconPulse 2.2s ease-in-out infinite}
.home-notif-card-ico.critical .hn-ico-ring{border-color:rgba(254,202,202,.85);animation:hnSafetyRipple 2.4s ease-out infinite}
.hn-ico-txt{position:relative;z-index:1}
.home-notif-card-body{flex:1;min-width:0;position:relative;z-index:1}
.home-notif-card-top{display:flex;justify-content:space-between;align-items:flex-start;gap:8px;flex-wrap:wrap}
.home-notif-card-msg{font-size:.81rem;font-weight:850;color:var(--text);line-height:1.38;letter-spacing:-.01em}
.home-notif-pbadge{font-size:.6rem;font-weight:900;letter-spacing:.07em;text-transform:uppercase;padding:3px 9px;border-radius:999px;white-space:nowrap}
.home-notif-pbadge.critical{background:#fee2e2;color:#b91c1c;animation:hnIconPulse 2.5s ease-in-out infinite}
.home-notif-pbadge.normal{background:var(--hn-accent-soft);color:var(--hn-accent);border:1px solid var(--hn-border)}
.home-notif-card-det{font-size:.73rem;color:var(--muted);margin-top:4px;line-height:1.45;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;white-space:pre-wrap}
.home-notif-card-meta{font-size:.66rem;color:var(--muted);margin-top:6px;display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.home-notif-card-meta b{color:var(--muted);font-weight:700}
.hn-unread-dot{display:inline-flex;align-items:center;gap:5px;color:var(--hn-accent);font-weight:900}
.hn-unread-dot i{width:7px;height:7px;border-radius:50%;background:var(--hn-accent);box-shadow:0 0 0 0 var(--hn-glow);animation:hnUnreadGlow 1.8s ease-in-out infinite}
@keyframes hnWrapIn{from{opacity:0;transform:translateY(18px) scale(.985)}to{opacity:1;transform:none}}
@keyframes hnCardIn{from{opacity:0;transform:translateX(-16px) scale(.97)}to{opacity:1;transform:none}}
@keyframes hnShimmer{0%,100%{background-position:220% 0}50%{background-position:-20% 0}}
@keyframes hnQualityScan{0%{top:10%;opacity:0}12%,88%{opacity:.8}100%{top:88%;opacity:0}}
@keyframes hnSafetyRipple{0%{transform:scale(.55);opacity:.75}100%{transform:scale(2.15);opacity:0}}
@keyframes hnMaintSpin{to{transform:rotate(360deg)}}
@keyframes hnProdConveyor{from{background-position:0 0}to{background-position:44px 0}}
@keyframes hnOrbFloat{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(8px,-6px) scale(1.06)}}
@keyframes hnIconPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.07)}}
@keyframes hnUnreadGlow{0%,100%{box-shadow:0 0 0 0 var(--hn-glow)}50%{box-shadow:0 0 0 7px transparent}}
@keyframes hnCriticalBeat{0%,100%{box-shadow:0 8px 22px rgba(220,38,38,.12)}50%{box-shadow:0 10px 26px rgba(220,38,38,.22)}}
@media (prefers-reduced-motion:reduce){
  .home-notif-wrap,.home-notif-card,.home-notif-head-mark,.home-notif-pbadge.critical,.hn-unread-dot i,.home-notif-card.unread,.home-notif-card.critical.unread,.hn-fx-scan,.hn-fx-ripple,.hn-fx-gear,.hn-fx-belt,.hn-fx-orb,.hn-card-glow{animation:none!important}
  .home-notif-card::before{display:none}
}
.feat-shell{max-width:1100px;margin:0 auto}
.feat-hero{background:linear-gradient(135deg,#4C1D95,#7C3AED 50%,#2563EB);color:#fff;border-radius:18px;padding:22px 24px;margin-bottom:18px;box-shadow:0 12px 32px rgba(76,29,149,.2)}
.feat-hero h2{margin:0 0 6px;font-size:1.25rem;font-weight:900;letter-spacing:-.02em}
.feat-hero p{margin:0;opacity:.9;font-size:.85rem}
.feat-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px;margin-bottom:18px}
.feat-kpi{background:var(--form-surface);border:1px solid var(--border);border-radius:14px;padding:16px;text-align:center;box-shadow:0 4px 16px rgba(76,29,149,.06)}
.feat-kpi b{display:block;font-size:1.6rem;font-weight:900;color:var(--primary-light);letter-spacing:-.03em}
.feat-kpi span{font-size:.72rem;font-weight:750;color:#6d28d9;text-transform:uppercase;letter-spacing:.05em}
.kiosk-mode .header,.kiosk-mode .portal-sidebar,.kiosk-mode .ps-mobile-bar,.kiosk-mode .ps-backdrop{display:none!important}
.kiosk-mode .view{margin-left:0!important;padding:12px!important}
.kiosk-exit{position:fixed;top:12px;right:12px;z-index:10060;display:none}
.kiosk-mode .kiosk-exit{display:block}
.photo-attach{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.photo-attach img{width:72px;height:72px;object-fit:cover;border-radius:10px;border:1px solid var(--border)}
.form-photo-box{margin:12px 0;padding:12px 14px;border:1.5px dashed var(--primary-light);border-radius:14px;background:linear-gradient(180deg,var(--surface-2),var(--form-surface))}
.form-photo-box .fp-title{font-size:.78rem;font-weight:900;color:var(--primary-light);margin-bottom:4px}
.form-photo-box .fp-sub{font-size:.72rem;color:var(--muted);margin-bottom:8px}
.form-photo-box .fp-actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.form-photo-box .fp-preview{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.form-photo-box .fp-preview .fp-item{position:relative;width:86px}
.form-photo-box .fp-preview img{width:86px;height:86px;object-fit:cover;border-radius:12px;border:1px solid var(--border);display:block;background:var(--surface-2)}
.form-photo-box .fp-preview button{position:absolute;top:-6px;right:-6px;width:22px;height:22px;border:none;border-radius:99px;background:#dc2626;color:#fff;font-size:.7rem;cursor:pointer;font-weight:900}
.form-prev-bar{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin:10px 0 14px;padding:10px 12px;border:1px solid var(--border);border-radius:12px;background:#faf8ff}
.form-prev-bar b{color:var(--primary-light);font-size:.8rem}
.form-prev-panel{margin:10px 0 16px;max-height:260px;overflow:auto}
.form-prev-card{display:flex;justify-content:space-between;gap:10px;align-items:center;padding:10px 12px;border:1px solid var(--border);border-radius:12px;background:var(--form-surface);margin-bottom:8px}
.form-prev-card img{width:48px;height:48px;object-fit:cover;border-radius:8px;border:1px solid var(--border)}

.qr-box{display:inline-flex;flex-direction:column;align-items:center;gap:6px;padding:10px;background:var(--surface-2);border:1px solid var(--border);border-radius:12px}
.qr-box img{background:#fff;border-radius:6px;padding:4px} /* QR quiet-zone must stay white to stay scannable */
.offline-chip{position:fixed;bottom:18px;right:18px;z-index:10030;display:none;background:#b91c1c;color:#fff;padding:8px 14px;border-radius:99px;font-weight:800;font-size:.75rem;box-shadow:0 8px 20px rgba(185,28,28,.35)}

/* ============================================================
   TOAST NOTIFICATIONS — one consistent system-wide component.
   Semantic colors stay correct (success=green, warning=amber,
   error=red, info=blue) regardless of theme; position, spacing,
   typography and animation are identical across every portal.
   ============================================================ */
.qms-toast{
  position:fixed;left:50%;bottom:26px;z-index:99999;
  display:flex;align-items:center;gap:10px;
  max-width:min(420px,88vw);
  background:var(--form-surface);color:var(--text);
  border:1px solid var(--border);border-left:4px solid var(--muted);
  border-radius:12px;padding:11px 12px 11px 14px;
  font-size:.83rem;font-weight:700;line-height:1.4;
  box-shadow:0 14px 34px rgba(0,0,0,.24);
  opacity:0;transform:translate(-50%,10px);pointer-events:none;
  transition:opacity .22s ease, transform .22s ease;
}
.qms-toast.show{opacity:1;transform:translate(-50%,0);pointer-events:auto}
.qms-toast-icon{
  flex:0 0 auto;width:21px;height:21px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:.68rem;font-weight:900;color:#fff;background:var(--muted);
}
.qms-toast-msg{flex:1;min-width:0}
.qms-toast-close{
  flex:0 0 auto;background:none;border:none;min-height:0;
  color:var(--muted);font-size:1.05rem;line-height:1;cursor:pointer;padding:2px 4px;
}
.qms-toast-success{border-left-color:var(--green)}
.qms-toast-success .qms-toast-icon{background:var(--green)}
.qms-toast-error{border-left-color:var(--red)}
.qms-toast-error .qms-toast-icon{background:var(--red)}
.qms-toast-warning{border-left-color:var(--amber)}
.qms-toast-warning .qms-toast-icon{background:var(--amber)}
.qms-toast-info{border-left-color:var(--accent-2)}
.qms-toast-info .qms-toast-icon{background:var(--accent-2)}
@media (max-width:640px){
  .qms-toast{bottom:calc(env(safe-area-inset-bottom,0px) + 16px)}
}
@media (prefers-reduced-motion:reduce){
  .qms-toast{transition:opacity .05s linear}
}

/* ============================================================
   BACK TO TOP — appears only after real scroll depth on long
   pages/forms; never shown on short pages since they never reach
   the threshold. Kept clear of Save buttons (left free), the
   mobile portal-sidebar toggle (bottom-left) and the offline chip
   (stacked above it, same right edge) and mobile safe areas.
   ============================================================ */
.back-to-top{
  position:fixed;right:18px;bottom:70px;z-index:9000;
  width:42px;height:42px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:var(--form-surface);color:var(--primary);
  border:1px solid var(--border);box-shadow:0 8px 22px rgba(0,0,0,.18);
  opacity:0;transform:translateY(8px) scale(.9);pointer-events:none;
  transition:opacity .2s ease, transform .2s ease;
  cursor:pointer;
}
.back-to-top.show{opacity:1;transform:translateY(0) scale(1);pointer-events:auto}
.back-to-top:hover{transform:translateY(-2px) scale(1.05);box-shadow:0 10px 26px rgba(0,0,0,.22)}
@media (max-width:640px){
  .back-to-top{right:14px;bottom:calc(env(safe-area-inset-bottom,0px) + 78px);width:40px;height:40px}
}
@media print{ .back-to-top{display:none!important} }
@media (prefers-reduced-motion:reduce){ .back-to-top{transition:opacity .05s linear} }

/* ============================================================
   MODAL ENTRANCE — short fade + very small scale-in, standardized
   across every .modal-overlay in the app (no per-modal markup
   changes needed).
   ============================================================ */
.modal-overlay.open .modal{animation:qmsModalIn .16s cubic-bezier(.22,1,.36,1) both}
@keyframes qmsModalIn{from{opacity:0;transform:scale(.97) translateY(6px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){ .modal-overlay.open .modal{animation:none} }

/* Logout confirmation — small inline spinner shown during the brief
   "Signing you out…" state before the existing logout logic runs. */
.logout-spinner{display:inline-block;width:16px;height:16px;border:2px solid var(--border);border-top-color:var(--red);border-radius:50%;animation:logoutSpin .7s linear infinite}
@keyframes logoutSpin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){ .logout-spinner{animation:none} }

/* ============================================================
   HOLD PALLETS — animated industrial pallet visual (replaces the old
   text-only KPI boxes at the top of the On-Hold Pallets Tracker).
   Deliberately a FIXED dark card with fixed light/yellow accents
   (not theme variables) so it stays high-contrast in both Light and
   Violet Noir without depending on which theme is active — same fix
   philosophy as the .ncr-block / notification-banner contrast fix.
   ============================================================ */
.hpv-wrap{margin-bottom:18px;display:flex;gap:14px;flex-wrap:wrap;align-items:stretch}
.hpv-card{
  position:relative;overflow:hidden;flex:0 0 auto;
  width:200px;min-height:188px;border-radius:16px;border:none;cursor:pointer;
  padding:18px 16px 16px;display:flex;flex-direction:column;align-items:center;
  background:linear-gradient(160deg,#1f2937,#0b1220);
  box-shadow:0 1px 0 rgba(255,255,255,.06) inset,0 12px 32px rgba(0,0,0,.34);
  animation:hpvEnter .45s cubic-bezier(.22,.9,.3,1) both;
  transition:transform .18s,box-shadow .18s;
}
.hpv-card::before{
  /* restrained warning edge — a thin top accent line, not a full glow */
  content:"";position:absolute;top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,transparent,#facc15,transparent);opacity:.55;
}
.hpv-card[data-state="empty"]::before{background:linear-gradient(90deg,transparent,#64748b,transparent)}
.hpv-card:hover,.hpv-card:focus-visible{transform:translateY(-2px);box-shadow:0 1px 0 rgba(255,255,255,.08) inset,0 18px 40px rgba(0,0,0,.4)}
.hpv-card:focus-visible{outline:2px solid #facc15;outline-offset:2px}
@keyframes hpvEnter{from{opacity:0;transform:translateY(8px) scale(.97)}to{opacity:1;transform:translateY(0) scale(1)}}
.hpv-status-dot{
  position:absolute;top:10px;right:10px;width:8px;height:8px;border-radius:50%;
  background:#94a3b8;box-shadow:0 0 0 3px rgba(148,163,184,.18);
}
.hpv-card[data-state="hold"] .hpv-status-dot{background:#facc15;box-shadow:0 0 0 3px rgba(250,204,21,.22)}
.hpv-card[data-state="aging"] .hpv-status-dot{background:#f59e0b;box-shadow:0 0 0 3px rgba(245,158,11,.25);animation:hpvDotPulse 2.2s ease-in-out infinite}
@keyframes hpvDotPulse{0%,100%{box-shadow:0 0 0 3px rgba(245,158,11,.25)}50%{box-shadow:0 0 0 6px rgba(245,158,11,0)}}
.hpv-pallet{width:100%;height:64px;position:relative;margin-bottom:10px;filter:drop-shadow(0 6px 6px rgba(0,0,0,.28))}
.hpv-pallet-svg{width:100%;height:100%;display:block}
.hpv-load{fill:rgba(217,119,6,.16);stroke:rgba(217,119,6,.4);stroke-width:1}
.hpv-load-edge{fill:none;stroke:rgba(255,255,255,.08);stroke-width:1}
.hpv-slat{fill:#a16207}
.hpv-block{fill:#78350f}
.hpv-card[data-state="empty"] .hpv-load{fill:rgba(100,116,139,.12);stroke:rgba(100,116,139,.3)}
.hpv-card[data-state="empty"] .hpv-slat{fill:#475569}
.hpv-card[data-state="empty"] .hpv-block{fill:#334155}
.hpv-scan{stroke:rgba(250,204,21,.85);stroke-width:1.5;transform:translateY(0);animation:hpvScan 2.6s ease-in-out infinite}
.hpv-card[data-state="empty"] .hpv-scan{display:none}
@keyframes hpvScan{0%{transform:translateY(2px);opacity:.15}50%{transform:translateY(60px);opacity:.85}100%{transform:translateY(2px);opacity:.15}}
.hpv-label{
  display:inline-block;background:#facc15;color:#111827;font-weight:900;font-size:.72rem;
  letter-spacing:.08em;padding:4px 14px 4px;border-radius:4px 4px 0 0;text-transform:uppercase;
  position:relative;box-shadow:0 2px 6px rgba(0,0,0,.25);
  clip-path:polygon(6% 0,94% 0,100% 100%,0 100%);
}
.hpv-card[data-state="aging"] .hpv-label{background:#f59e0b;color:#111827;animation:hpvPulse 2.2s ease-in-out infinite}
.hpv-card[data-state="empty"] .hpv-label{background:#94a3b8;color:#111827}
@keyframes hpvPulse{0%,100%{box-shadow:0 0 0 0 rgba(245,158,11,.45)}50%{box-shadow:0 0 0 7px rgba(245,158,11,0)}}
.hpv-count{font-size:2.6rem;font-weight:900;color:#fff;line-height:1.05;margin-top:8px;letter-spacing:-.02em}
.hpv-card[data-state="empty"] .hpv-count{color:#cbd5e1}
.hpv-caption{font-size:.66rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:rgba(255,255,255,.5);margin-top:2px}
.hpv-sub{font-size:.72rem;color:rgba(255,255,255,.68);margin-top:6px;text-align:center;line-height:1.35}
.hpv-aging-chip{
  align-self:center;margin-top:8px;font-size:.68rem;font-weight:800;color:#fff;
  background:rgba(245,158,11,.22);border:1px solid rgba(245,158,11,.55);
  padding:3px 10px;border-radius:99px;
}
@media(max-width:480px){ .hpv-card{width:100%} }
@media(prefers-reduced-motion:reduce){
  .hpv-card{animation:none}
  .hpv-scan{animation:none;opacity:.5}
  .hpv-card[data-state="aging"] .hpv-label{animation:none}
  .hpv-card[data-state="aging"] .hpv-status-dot{animation:none}
}

/* ============================================================
   THEME TRANSITION — Light ↔ Violet Noir switches smoothly on the
   surfaces users look at most, using the existing --dur/--ease
   tokens (fast, no layout-dimension animation, so nothing shifts
   or reflows during the switch).
   ============================================================ */
.modal, .header, .portal-sidebar, .view-toolbar, .cards-grid > *,
.ph-quicklinks > *, .welcome-portal-item, .wh-hero, .welcome-side,
input, select, textarea{
  transition:background-color var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}

/* ============================================================
   ACCESSIBILITY POLISH — consistent disabled-state readability
   for any control that doesn't already define its own (more
   specific rules above, e.g. .btn-primary:disabled, still win).
   ============================================================ */
button:disabled, .btn-ghost:disabled, input:disabled, select:disabled, textarea:disabled{
  opacity:.55;cursor:not-allowed;
}

/* Global safety-net wrapper for any <table> not already inside a
   dedicated wrapper — see the wrapOverflowTables() script. Contains
   horizontal scroll to the table itself; never the whole page. */
.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%}
.offline-chip.on{display:flex;align-items:center;gap:8px}

.app-version-badge,.app-version-panel,.home-theme-switch{display:none!important}

body.auditor-readonly{padding-top:28px}
body.auditor-readonly .btn-primary:disabled{opacity:.45;cursor:not-allowed}

/* Credits / rights — small, non-fixed, specific spots only */
.credits-modal .cm-brand{font-style:italic;font-weight:900;font-size:1.2rem;color:#cc0000;letter-spacing:.5px}
.credits-modal .cm-title{font-size:.95rem;font-weight:800;color:var(--primary-light);margin:6px 0 4px}
.credits-modal .cm-block{background:#faf8ff;border:1px solid var(--border);border-radius:10px;padding:10px 12px;margin:8px 0;font-size:.78rem;line-height:1.45;color:#1e1b4b}
.credits-modal .cm-block b{color:#5b21b6}
.credit-mini{font-size:.62rem;color:var(--muted);line-height:1.35;letter-spacing:.02em}
.credit-mini b{color:var(--muted);font-weight:700}
.credit-mini a{color:#7C3AED;font-weight:700;text-decoration:none}
.landing-credits{text-align:center;margin:18px auto 6px;padding:0;border:none;background:none;box-shadow:none;max-width:none}
.ps-credit-mini{font-size:.6rem;color:var(--muted);padding:4px 2px 8px;cursor:pointer}
.ps-credit-mini:hover{color:#7C3AED}

/* ===== END FEATURE PACK CSS ===== */

/* ===== END ANIMATED PORTAL CHROME ===== */

/* ===== END FORM DESIGN SYSTEM ===== */

/* ============================================================
   Section 2: originally the login-screen <style> block that sat
   in <body>, after the splash markup (lines 2902-3668).
   ============================================================ */
/* ============================================================
   LOGIN SCREEN — premium enterprise glassmorphism theme
   ============================================================ */
/* Login is a deliberate "always-dark" brand moment regardless of the chosen
   in-app theme (operational screens follow theme-noir/theme-pladis instead) —
   its accent glow still follows the active primary color. */
#login-screen{
  background:
    radial-gradient(circle at 18% 20%, color-mix(in srgb, var(--primary) 30%, transparent), transparent 42%),
    radial-gradient(circle at 85% 75%, color-mix(in srgb, var(--accent-2) 26%, transparent), transparent 45%),
    radial-gradient(circle at 50% 100%, color-mix(in srgb, var(--primary) 16%, transparent), transparent 55%),
    #0B0710;
}
.login-float-icon{
  position:absolute;
  pointer-events:none;
  user-select:none;
  filter:grayscale(35%);
  animation-name:loginFloat;
  animation-timing-function:ease-in-out;
  animation-iteration-count:infinite;
  will-change:transform;
}
@keyframes loginFloat{
  0%   { transform:translate(0,0) rotate(0deg); }
  25%  { transform:translate(14px,-22px) rotate(6deg); }
  50%  { transform:translate(-8px,-40px) rotate(-4deg); }
  75%  { transform:translate(-18px,-14px) rotate(3deg); }
  100% { transform:translate(0,0) rotate(0deg); }
}
.login-card-glass{
  background:rgba(255,255,255,.055);
  backdrop-filter:blur(24px);
  -webkit-backdrop-filter:blur(24px);
  border:1px solid color-mix(in srgb, var(--primary) 35%, transparent);
  border-radius:24px;
  box-shadow:0 24px 70px rgba(0,0,0,.55), 0 0 60px color-mix(in srgb, var(--primary) 15%, transparent);
  min-height:44px;
}
.login-label-dark{
  font-size:.7rem;font-weight:700;color:rgba(255,255,255,.5);
  text-transform:uppercase;display:block;margin-bottom:6px;letter-spacing:.6px;
}
.login-input-dark, .login-select-dark{
  width:100%;box-sizing:border-box;font-family:inherit;font-size:.88rem;
  background:rgba(255,255,255,.05);
  border:1.5px solid rgba(255,255,255,.14);
  border-radius:10px;padding:11px 13px;min-height:var(--tap);color:#fff;outline:none;
  transition:border-color .15s, background .15s;
}
.login-input-dark::placeholder{ color:rgba(255,255,255,.32); }
.login-input-dark:focus, .login-select-dark:focus{
  border-color:var(--primary); background:color-mix(in srgb, var(--primary) 10%, transparent);
}
.login-select-dark{ cursor:pointer; }
.login-select-dark option{ background:#170F24; color:#fff; }
.login-btn-gradient{
  width:100%;border:none;border-radius:12px;padding:14px;cursor:pointer;
  font-family:inherit;font-weight:800;font-size:.95rem;color:#fff;letter-spacing:.3px;
  min-height:var(--tap);
  background:linear-gradient(135deg, var(--primary), var(--accent-2));
  box-shadow:0 10px 28px color-mix(in srgb, var(--primary) 35%, transparent);
  transition:transform .15s, box-shadow .15s, filter .15s;
}
.login-btn-gradient:hover{ filter:brightness(1.08); transform:translateY(-1px); box-shadow:0 14px 34px color-mix(in srgb, var(--primary) 45%, transparent); }
.login-btn-gradient:active{ transform:translateY(0); }

/* Login pladis star */
.login-brand-wrap{position:relative;display:inline-flex;flex-direction:column;align-items:center}
.login-star{
  width:28px;height:28px;margin-bottom:6px;
  filter:drop-shadow(0 0 8px rgba(250,204,21,.75));
  animation:loginStarSpin 8s linear infinite, loginStarPulse 2.2s ease-in-out infinite;
  transform-origin:50% 55%;
}
.login-star svg{width:100%;height:100%;display:block}
@keyframes loginStarSpin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
@keyframes loginStarPulse{
  0%,100%{opacity:.85;filter:drop-shadow(0 0 6px rgba(250,204,21,.55)) scale(1)}
  50%{opacity:1;filter:drop-shadow(0 0 14px rgba(250,204,21,.95)) scale(1.12)}
}

/* Access request modal */
.ar-overlay{display:none;position:fixed;inset:0;z-index:1500;align-items:center;justify-content:center;
  background:rgba(11,17,32,.62);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);padding:16px}
.ar-card{width:100%;max-width:460px;max-height:92vh;overflow:auto;border-radius:20px;
  background:linear-gradient(180deg,#ffffff 0%,#faf5ff 100%);
  box-shadow:0 28px 80px rgba(76,29,149,.28);border:1px solid #e9d5ff}
.ar-head{padding:22px 24px 18px;background:linear-gradient(135deg,#4C1D95,#7C3AED 55%,#2563EB);
  color:#fff;position:relative;overflow:hidden}
.ar-head::after{content:'';position:absolute;right:-20px;top:-30px;width:120px;height:120px;border-radius:50%;
  background:rgba(255,255,255,.08)}
.ar-head h3{margin:0;font-size:1.1rem;font-weight:900;letter-spacing:.2px;position:relative}
.ar-head p{margin:6px 0 0;font-size:.78rem;opacity:.88;position:relative;line-height:1.45}
.ar-body{padding:20px 22px 18px}
.ar-label{font-size:.68rem;font-weight:800;color:#6b7280;text-transform:uppercase;letter-spacing:.55px;display:block;margin-bottom:6px}
.ar-input,.ar-select,.ar-textarea{
  width:100%;box-sizing:border-box;font-family:inherit;font-size:.88rem;
  border:1.5px solid #e9d5ff;border-radius:11px;padding:11px 12px;outline:none;background:#fff;color:#1e1b4b;
  transition:border-color .15s, box-shadow .15s}
.ar-input:focus,.ar-select:focus,.ar-textarea:focus{border-color:#7C3AED;box-shadow:0 0 0 3px rgba(124,58,237,.12)}
.ar-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media(max-width:520px){.ar-row{grid-template-columns:1fr}}
.ar-contact-toggle{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:12px}
.ar-contact-btn{border:1.5px solid #e9d5ff;background:#fff;border-radius:11px;padding:10px;cursor:pointer;
  font-family:inherit;font-weight:800;font-size:.78rem;color:#7C3AED;transition:all .15s}
.ar-contact-btn.active{background:linear-gradient(135deg,#7C3AED,#2563EB);color:#fff;border-color:transparent;
  box-shadow:0 8px 18px rgba(124,58,237,.28)}
.ar-submit{width:100%;border:none;border-radius:12px;padding:13px;cursor:pointer;font-family:inherit;
  font-weight:800;font-size:.92rem;color:#fff;background:linear-gradient(135deg,#7C3AED,#2563EB);
  box-shadow:0 10px 24px rgba(124,58,237,.3)}
.ar-cancel{width:100%;border:none;background:transparent;color:#6b7280;font-weight:700;font-size:.8rem;
  padding:10px;cursor:pointer;font-family:inherit;margin-top:4px}
.ar-field{margin-bottom:12px}

/* Modern dashboard */
.dash-pro-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(148px,1fr));gap:12px;margin-bottom:18px}
.dash-kpi{
  position:relative;overflow:hidden;border-radius:16px;padding:16px 14px;
  background:var(--form-surface);border:1px solid var(--border);box-shadow:var(--card-shadow);
}
.dash-kpi::before{content:'';position:absolute;inset:0 0 auto 0;height:3px;background:var(--kpi-accent,var(--primary))}
.dash-kpi .dk-val{font-size:1.85rem;font-weight:900;color:var(--text);letter-spacing:-.5px;line-height:1}
.dash-kpi .dk-lbl{font-size:.72rem;font-weight:800;color:var(--muted);margin-top:7px;text-transform:uppercase;letter-spacing:.4px}
.dash-kpi .dk-sub{font-size:.7rem;color:var(--muted);margin-top:3px;font-weight:600}
.dash-panel{
  background:var(--form-surface);border:1px solid #ede9fe;border-radius:18px;padding:18px;
  box-shadow:0 10px 28px rgba(76,29,149,.06);margin-bottom:16px}
.dash-panel-title{font-weight:900;color:var(--navy);font-size:.92rem;margin-bottom:14px;display:flex;align-items:center;gap:8px}
.dash-panel-title .dot{width:8px;height:8px;border-radius:50%;background:linear-gradient(135deg,#7C3AED,#2563EB);display:inline-block}
.dash-charts-row{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:16px}
@media(max-width:800px){.dash-charts-row{grid-template-columns:1fr}}


/* ===== Portal BI Hubs (Quality / Safety / Maintenance) ===== */
.pbih-shell{border-radius:18px;padding:14px;border:1px solid #e2e8f0;box-shadow:0 12px 36px rgba(15,23,42,.06);margin-bottom:8px}
.pbih-shell.theme-quality{background:linear-gradient(145deg,#f8fafc,#eef2ff 55%,#fff)}
.pbih-shell.theme-safety{background:linear-gradient(145deg,#fff,#fef2f2 40%,#ecfdf5)}
.pbih-shell.theme-maint{background:linear-gradient(145deg,#f0fdfa,#fff 50%,#ecfeff)}
body.theme-noir .pbih-shell{border-color:var(--border)}
body.theme-noir .pbih-shell.theme-quality{background:linear-gradient(145deg,var(--form-surface),color-mix(in srgb, var(--primary) 16%, var(--form-surface)) 55%,var(--form-surface))}
body.theme-noir .pbih-shell.theme-safety{background:linear-gradient(145deg,var(--form-surface),color-mix(in srgb, #dc2626 16%, var(--form-surface)) 40%,var(--form-surface))}
body.theme-noir .pbih-shell.theme-maint{background:linear-gradient(145deg,var(--form-surface),color-mix(in srgb, #0d9488 16%, var(--form-surface)) 50%,var(--form-surface))}
.pbih-top{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;align-items:flex-start;margin-bottom:12px}
.pbih-logo{font-weight:900;font-size:1.2rem;letter-spacing:-.4px}
.theme-quality .pbih-logo{color:var(--primary-light)}
.theme-safety .pbih-logo{color:#c8102e}
.theme-maint .pbih-logo{color:#0f766e}
body.theme-noir .theme-safety .pbih-logo{color:var(--red)}
body.theme-noir .theme-maint .pbih-logo{color:#2dd4bf}
.pbih-title{font-weight:900;font-size:1.15rem;margin-top:2px}
.theme-quality .pbih-title{color:var(--navy)}
.theme-safety .pbih-title{color:#7f1d1d}
.theme-maint .pbih-title{color:#115e59}
body.theme-noir .theme-safety .pbih-title{color:var(--red)}
body.theme-noir .theme-maint .pbih-title{color:#2dd4bf}
.pbih-sub{font-size:.78rem;color:var(--muted);font-weight:700;margin-top:4px}
.pbih-filters{display:flex;gap:6px;flex-wrap:wrap}
.pbih-chip{border:1px solid #cbd5e1;background:var(--form-surface);border-radius:999px;padding:6px 12px;font-size:.72rem;font-weight:800;cursor:pointer;font-family:inherit;color:var(--text)}
.pbih-chip.active{color:#fff}
.theme-quality .pbih-chip.active{background:#4c1d95;border-color:var(--primary-light)}
.theme-safety .pbih-chip.active{background:#c8102e;border-color:#c8102e}
.theme-maint .pbih-chip.active{background:#0f766e;border-color:#0f766e}
.pbih-modules{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:8px;margin-bottom:12px}
.pbih-mod{border:1px solid #e2e8f0;background:var(--form-surface);border-radius:12px;padding:10px;text-align:left;cursor:pointer;font-family:inherit;box-shadow:0 4px 14px rgba(15,23,42,.04)}
.pbih-mod b{display:block;font-size:.8rem;color:var(--text)}
.pbih-mod span{display:block;font-size:.68rem;color:var(--muted);margin-top:2px}
.pbih-mod em{display:block;font-style:normal;font-size:.72rem;font-weight:900;margin-top:6px}
.theme-quality .pbih-mod em{color:var(--primary-light)}
.theme-safety .pbih-mod em{color:#c8102e}
.theme-maint .pbih-mod em{color:#0f766e}
body.theme-noir .theme-safety .pbih-mod em{color:var(--red)}
body.theme-noir .theme-maint .pbih-mod em{color:#2dd4bf}
.pbih-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:8px;margin-bottom:12px}
.pbih-kpi{background:var(--form-surface);border:1px solid #e2e8f0;border-radius:12px;padding:12px;border-top:3px solid var(--acc,#334155)}
.pbih-kpi-v{font-size:1.45rem;font-weight:900;color:var(--text);line-height:1}
.pbih-kpi-l{font-size:.68rem;font-weight:800;color:var(--muted);text-transform:uppercase;letter-spacing:.3px;margin-top:6px}
.pbih-kpi-s{font-size:.7rem;color:var(--muted);font-weight:700;margin-top:3px}
.pbih-grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:12px}
@media(max-width:900px){.pbih-grid2{grid-template-columns:1fr}}
.pbih-card{background:var(--form-surface);border:1px solid #e2e8f0;border-radius:14px;padding:12px;margin-bottom:12px;box-shadow:0 4px 14px rgba(15,23,42,.03)}
.pbih-card-t{font-weight:900;font-size:.86rem;margin-bottom:10px;color:var(--text)}
.pbih-empty{color:var(--muted);font-size:.8rem;padding:18px;text-align:center;font-weight:700}
.pbih-row{display:flex;justify-content:space-between;gap:10px;padding:8px 0;border-bottom:1px solid #f1f5f9}
.pbih-row b{font-size:.8rem;color:var(--text)}
.pbih-muted{font-size:.7rem;color:var(--muted);margin-top:2px}
.pbih-row-r{display:flex;align-items:center;gap:8px;font-size:.68rem;color:var(--muted);font-weight:700}
.pbih-row-r i{width:8px;height:8px;border-radius:50%;display:inline-block}
.pbih-table{width:100%;border-collapse:collapse;font-size:.72rem}
.pbih-table th{padding:8px 6px;color:#fff;font-weight:800;white-space:nowrap}
.theme-quality .pbih-table th{background:#4c1d95}
.theme-safety .pbih-table th{background:#991b1b}
.theme-maint .pbih-table th{background:#0f766e}
.pbih-table td{padding:7px 6px;text-align:center;border-bottom:1px solid #f1f5f9;font-weight:700;color:var(--text)}
.pbih-foot{font-size:.7rem;color:var(--muted);font-weight:700;margin-top:4px}

/* ===== Production BI (Power BI style) ===== */
.pbi-shell{background:linear-gradient(145deg,#f8fafc 0%,#fff 45%,#fef2f2 100%);border:1px solid #e2e8f0;border-radius:18px;padding:14px;box-shadow:0 12px 40px rgba(15,23,42,.06)}
body.theme-noir .pbi-shell{background:linear-gradient(145deg,var(--form-surface) 0%,var(--surface-2) 55%,var(--form-surface) 100%);border-color:var(--border)}
.pbi-topbar{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;align-items:center;margin-bottom:12px}
.pbi-brand{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.pbi-logo{font-weight:900;color:#c8102e;font-size:1.35rem;letter-spacing:-.5px}
.pbi-title{font-weight:900;font-size:1.05rem;padding:10px 18px;border-radius:12px;border:1px solid #bfdbfe}
/* Per-theme background+color+border pairings — kept together in ONE rule per
   theme (light and Noir alike) so the pairing can never drift apart the way
   it did when this was an inline style split from the safety net's remap
   (see portalBiShell() comment). */
.pbi-title-quality{background:linear-gradient(90deg,#dbeafe,#eff6ff);color:#1e3a5f;border-color:#bfdbfe}
.pbi-title-safety{background:linear-gradient(90deg,#fee2e2,#fff1f2);color:#7f1d1d;border-color:#fecaca}
.pbi-title-maint{background:linear-gradient(90deg,#ccfbf1,#ecfeff);color:#115e59;border-color:#99f6e4}
.pbi-title-prod{background:linear-gradient(90deg,#fef3c7,#fffbeb);color:#78350f;border-color:#fde68a}
body.theme-noir .pbi-title-quality{background:linear-gradient(90deg,color-mix(in srgb, var(--accent-2) 22%, var(--form-surface)),var(--form-surface));color:var(--text);border-color:var(--border)}
body.theme-noir .pbi-title-safety{background:linear-gradient(90deg,color-mix(in srgb, var(--red) 22%, var(--form-surface)),var(--form-surface));color:var(--text);border-color:var(--border)}
body.theme-noir .pbi-title-maint{background:linear-gradient(90deg,color-mix(in srgb, #0f766e 22%, var(--form-surface)),var(--form-surface));color:var(--text);border-color:var(--border)}
body.theme-noir .pbi-title-prod{background:linear-gradient(90deg,color-mix(in srgb, var(--amber) 22%, var(--form-surface)),var(--form-surface));color:var(--text);border-color:var(--border)}
.pbi-tabs{display:flex;gap:8px;flex-wrap:wrap}
.pbi-tab{border:1px solid #cbd5e1;background:var(--form-surface);color:var(--text);border-radius:999px;padding:8px 14px;font-weight:800;font-size:.78rem;cursor:pointer;font-family:inherit}
.pbi-tab.active{background:#1e3a5f;color:#fff;border-color:var(--navy)}
.pbi-layout{display:grid;grid-template-columns:210px 1fr;gap:12px}
@media(max-width:900px){.pbi-layout{grid-template-columns:1fr}}
.pbi-side{background:var(--form-surface);border:1px solid #e2e8f0;border-radius:14px;padding:12px;max-height:78vh;overflow:auto}
.pbi-side-title{font-weight:900;color:var(--navy);font-size:.8rem;margin-bottom:8px;text-transform:uppercase;letter-spacing:.4px}
.pbi-check{display:flex;align-items:center;gap:8px;font-size:.78rem;font-weight:700;color:var(--text);margin:4px 0;cursor:pointer}
.pbi-main{min-width:0}
.pbi-kpi-row{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;margin-bottom:12px}
@media(max-width:1100px){.pbi-kpi-row{grid-template-columns:repeat(2,1fr)}}
.pbi-kpi{background:var(--form-surface);border:1px solid #e2e8f0;border-radius:14px;padding:14px;box-shadow:0 6px 18px rgba(15,23,42,.04)}
.pbi-kpi-wide{grid-column:span 1}
.pbi-kpi-val{font-size:1.7rem;font-weight:900;line-height:1.1}
.pbi-kpi-lbl{font-size:.68rem;font-weight:800;color:var(--muted);text-transform:uppercase;letter-spacing:.35px;margin-top:6px}
.pbi-grid-2{display:grid;grid-template-columns:0.9fr 1.4fr;gap:12px;margin-bottom:12px}
.pbi-grid-2b{display:grid;grid-template-columns:0.7fr 1.6fr;gap:12px;margin-bottom:12px}
@media(max-width:1000px){.pbi-grid-2,.pbi-grid-2b{grid-template-columns:1fr}}
.pbi-card{min-width:0;background:var(--form-surface);border:1px solid #e2e8f0;border-radius:14px;padding:14px;box-shadow:0 6px 18px rgba(15,23,42,.04)}
.pbi-card-title{font-weight:900;color:var(--navy);font-size:.88rem;margin-bottom:10px}
.pbi-table{width:100%;border-collapse:collapse;font-size:.72rem}
.pbi-table th{background:#1e3a5f;color:#fff;padding:8px 6px;font-weight:800;white-space:nowrap}
.pbi-table td{padding:7px 6px;text-align:center;border-bottom:1px solid #f1f5f9;color:var(--text);font-weight:700}
.pbi-table tr.pbi-total td{background:color-mix(in srgb, var(--accent-2) 16%, var(--form-surface));font-weight:900;color:var(--navy)}
.pbi-foot{margin-top:8px;font-size:.72rem;color:var(--muted);font-weight:700}
.pbi-live-tag{margin-top:8px;font-size:.7rem;font-weight:800;color:#0f766e;background:color-mix(in srgb, var(--green) 16%, var(--form-surface));display:inline-block;padding:3px 8px;border-radius:99px}
body.theme-noir .pbi-live-tag{color:var(--green)}
.pbi-budget-filters{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-bottom:12px}
.pbi-pill{background:var(--form-surface);border:1px solid #cbd5e1;border-radius:999px;padding:6px 12px;font-size:.74rem;font-weight:800;color:var(--navy)}
.pbi-budget-top{display:grid;grid-template-columns:0.9fr 1fr 1fr 1fr;gap:12px;margin-bottom:12px}
@media(max-width:1100px){.pbi-budget-top{grid-template-columns:1fr 1fr}}
@media(max-width:700px){.pbi-budget-top{grid-template-columns:1fr}}
.pbi-mini{border:1px solid #cbd5e1;background:var(--form-surface);border-radius:999px;padding:6px 12px;font-size:.72rem;font-weight:800;cursor:pointer;font-family:inherit;color:var(--text)}
.pbi-mini.active{background:#c8102e;border-color:#c8102e;color:#fff}
.pbi-tree{font-size:.8rem}
.pbi-tree-root{background:#1e3a5f;color:#fff;border-radius:10px;padding:10px 12px;display:flex;justify-content:space-between;font-weight:800;margin-bottom:8px}
.pbi-tree-btn{width:100%;text-align:left;border:1px solid #e2e8f0;background:var(--surface-2);border-radius:10px;padding:8px 10px;margin:4px 0;cursor:pointer;font-family:inherit;font-weight:800;color:var(--navy);display:flex;justify-content:space-between}
.pbi-tree-child{margin-left:16px}
.pbi-tree-sku{margin-left:28px;padding:6px 10px;background:var(--form-surface);border-left:3px solid #c8102e;margin-top:4px;display:flex;justify-content:space-between;font-weight:700;color:var(--text);font-size:.76rem}

.chart-anim path.chart-line{stroke-dasharray:800;stroke-dashoffset:800;animation:chartDraw 1.2s ease forwards}
.chart-anim .chart-area{opacity:0;animation:chartFade .8s ease .2s forwards}
@keyframes chartDraw{to{stroke-dashoffset:0}}
@keyframes chartFade{to{opacity:1}}

/* buildDonutChart()'s center "TOTAL" number/label sit on a deliberately
   theme-independent WHITE circle (the ring's "hole", by design — same fixed-
   light-card idea as .ncr-block). The generic THEME-NOIR SAFETY NET's SVG
   fill=/color: remaps (further up this file) don't know that — they lighten
   fill="#1e1b4b"/"#94a3b8" for readability against DARK surfaces elsewhere,
   which instead makes this text nearly invisible against its own still-white
   circle in Noir. Pin these two text elements to their own class so a
   higher-specificity override can keep them dark-on-white in both themes,
   matching the circle they actually sit on.
   Contrast: #1e1b4b vs #fff = 16:1. #475569 vs #fff = 7.6:1 (both far above
   the 4.5:1 AA minimum; #475569 replaces the original #94a3b8, which only
   reached 2.6:1 on white). */
body.theme-noir svg.chart-anim .donut-total-num{ fill:#1e1b4b !important; }
body.theme-noir svg.chart-anim .donut-total-lbl{ fill:#475569 !important; }

/* buildBarChart()'s row labels (Near Miss Categories, Work Orders by
   Status, Visitors by Department, Downtime by Line, ...) sit on the
   .pbi-card / dashPanel's own background, which DOES correctly go dark in
   Noir via its CSS class. Their label text used the same #475569 hex as the
   donut's (correctly, unrelatedly, theme-independent) TOTAL label, but here
   the pairing is the opposite: this text needs to go LIGHT to match its
   now-dark card, not stay fixed. Contrast was 2.45:1 (fail) — var(--muted)
   restores a proper muted-but-legible label in both themes. */
body.theme-noir svg .chart-bar-label{ fill:var(--muted) !important; }

/* ============================================================
   MOBILE APP SHELL v81 — clear phone / PWA experience
   ============================================================ */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{overflow-x:hidden}
.mobile-app-dock{display:none}
@media (max-width:900px){
  :root{--m-pad:14px;--m-dock:72px;--m-radius:18px}
  body{
    padding-bottom:calc(var(--m-dock) + env(safe-area-inset-bottom,0px));
  }
  body.intro-active,
  body:has(#login-screen[style*="flex"]),
  body:has(#app-welcome-screen[style*="block"]),
  body:not(.has-portal-sidebar){
    padding-bottom:0;
  }

  /* Compact sticky app header */
  .header{
    padding:8px 12px calc(8px + env(safe-area-inset-top,0px));
    padding-top:max(8px, env(safe-area-inset-top,0px));
    border-bottom-width:2px;
  }
  .header-inner{gap:8px;align-items:center}
  .logo-area{gap:8px;min-width:0;flex:1}
  .logo-img{height:32px!important;width:auto}
  .logo-divider{display:none}
  .sys-title{font-size:.92rem;line-height:1.15;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:46vw}
  .sys-sub{display:none!important}
  #account-display{
    padding:4px!important;gap:0!important;border-radius:14px!important;
    background:transparent!important;border:none!important;box-shadow:none!important;
  }
  #account-display > div{display:none!important}
  #account-display button{display:none!important}
  #account-avatar{width:36px!important;height:36px!important;font-size:.8rem!important}
  #menu-toggle-btn{
    min-height:40px;padding:8px 12px;border-radius:12px;font-size:.78rem;
  }

  /* Content breathing room */
  .view{padding:14px var(--m-pad) 28px;max-width:100vw}
  .view.active{animation:mViewIn .28s ease both}
  @keyframes mViewIn{from{opacity:.55;transform:translateY(8px)}to{opacity:1;transform:none}}
  .page-title{font-size:1.2rem!important;letter-spacing:-.02em;margin-bottom:6px!important}
  .page-sub{font-size:.8rem;margin-bottom:14px;line-height:1.45}
  .view-head-bar{gap:8px;margin-bottom:12px}
  .view-head-bar .btn-primary,
  .view-head-bar .btn-ghost,
  .view-toolbar .btn-primary,
  .view-toolbar .btn-ghost{
    min-height:42px;border-radius:12px;padding:10px 14px;font-size:.82rem;
  }

  /* Touch-friendly controls */
  .btn-primary,.btn-ghost,.nav-btn,.lc-start,.lc-reset,
  .ps-nav button.ps-item,.ps-sub button,.ps-foot button.ps-tool{
    min-height:44px;
  }
  input:not([type="checkbox"]):not([type="radio"]),select,textarea,.fi,.ho-input,.ho-textarea,.cw-inp,.fail-rem,
  .login-input-dark,.login-select-dark{
    font-size:16px!important; /* prevent iOS zoom */
    min-height:44px;
    border-radius:12px!important;
  }
  /* Checkboxes/radios must stay their normal compact size on mobile too —
     this text-field sizing (large min-height + heavy border-radius) was
     the root cause of category checkboxes rendering as big empty rounded
     squares instead of a normal checkbox glyph. */
  input[type="checkbox"],input[type="radio"]{width:18px;height:18px;min-height:0;flex:0 0 auto}
  textarea{min-height:96px}
  .form-row{margin-bottom:12px}
  .form-row label,.fl,.login-label-dark{font-size:.72rem!important;margin-bottom:5px}

  /* Cards / grids → phone stack */
  .cards-grid,.home-quick,.daily-hub-kpis,.ncr-grid,.dash-charts-row,
  .fac-form-grid,.portal-landing-grid,.pladis-news-grid,
  .cw-ranges,.ho-grid,.sc-criteria-grid,.feat-grid{
    grid-template-columns:1fr 1fr!important;gap:10px!important;
  }
  .daily-hub-kpis{grid-template-columns:1fr 1fr!important}
  .dh-kpi{border-radius:14px;padding:14px 12px}
  .dh-kpi b{font-size:1.55rem}
  .pro-list-card,.quick-card,.line-card,.section-wrap,.ho-card,.cw-card,
  .ncr-card,.dash-panel,.pro-panel,.modal{
    border-radius:16px!important;
  }
  .line-card,.quick-card{padding:14px}
  .portal-landing-grid{grid-template-columns:1fr 1fr!important}
  .pl-card{min-height:108px;border-radius:16px;padding:14px}
  .portal-landing-hero{border-radius:18px;padding:20px 16px;margin-bottom:16px}
  .portal-landing-title{font-size:1.2rem}

  /* Tables: swipe, not page-break */
  .view table,.pro-panel table,.dash-panel table{
    display:block;width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;
    border-radius:12px;
  }

  /* Hide decorative clutter on phones (keep brands as scroll strip) */
  .login-float-icon,.pladis-doodle-swirl,.pladis-doodle-smiley,.hn-fx-orb{display:none!important}
  .login-card-glass{width:min(100%, calc(100vw - 28px))!important;margin:0 auto;border-radius:22px!important;padding:22px 18px!important}
  .welcome-shell{padding:12px 14px 48px!important;gap:14px!important}
  .home-topnav{
    height:auto;min-height:56px;padding:8px 12px;
    padding-top:max(8px, env(safe-area-inset-top,0px));
    gap:8px;z-index:80;
  }
  .home-burger{
    display:inline-flex!important;align-items:center;justify-content:center;
    min-width:44px;min-height:44px;touch-action:manipulation;
  }

  /* Sidebar as full-height app drawer */
  .portal-sidebar{
    width:min(320px, 88vw)!important;
    padding-top:env(safe-area-inset-top,0px);
    box-shadow:12px 0 40px rgba(15,23,42,.35);
  }
  .ps-nav button.ps-item{height:50px;border-radius:14px;font-size:.9rem}
  .ps-sub button{height:44px;font-size:.84rem}

  /* Replace floating Menu FAB with bottom dock */
  .ps-mobile-bar,
  body.has-portal-sidebar.ps-collapsed .ps-mobile-bar{display:none!important}
  body.has-portal-sidebar .mobile-app-dock{
    display:flex;position:fixed;left:12px;right:12px;
    bottom:calc(10px + env(safe-area-inset-bottom,0px));
    z-index:270;height:64px;padding:6px;
    background:rgba(255,255,255,.92);
    backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
    border:1px solid rgba(124,58,237,.16);
    border-radius:22px;
    box-shadow:0 14px 40px rgba(30,27,75,.18);
    align-items:stretch;justify-content:space-between;gap:4px;
  }
  body.has-portal-sidebar.ps-open .mobile-app-dock,
  body.kiosk-mode .mobile-app-dock,
  body.printing-permit .mobile-app-dock,
  body.intro-active .mobile-app-dock{display:none!important}
  .mobile-app-dock button{
    flex:1;border:none;background:transparent;border-radius:16px;
    display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
    color:var(--muted);font:inherit;font-size:.62rem;font-weight:800;letter-spacing:.02em;
    cursor:pointer;min-width:0;padding:4px 2px;
    transition:background .18s, color .18s, transform .15s;
  }
  .mobile-app-dock button svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
  .mobile-app-dock button.active,
  .mobile-app-dock button:active{
    color:var(--primary-light);background:linear-gradient(180deg,#f5f3ff,#ede9fe);transform:translateY(-1px);
  }
  .mobile-app-dock button.mad-primary{
    color:#fff;background:linear-gradient(135deg,#7C3AED,#2563EB);
    box-shadow:0 8px 18px rgba(124,58,237,.35);
  }
  .mobile-app-dock button.mad-primary span{color:#fff}

  /* Chips / overlays clear of dock */
  .offline-chip{bottom:calc(88px + env(safe-area-inset-bottom,0px))!important;right:14px;left:auto;max-width:calc(100vw - 28px)}
  #notif-live-banner{
    top:auto!important;bottom:calc(88px + env(safe-area-inset-bottom,0px))!important;
    right:12px;left:12px;min-width:0;max-width:none;
  }
  #notif-panel,#search-panel{
    top:auto!important;bottom:calc(84px + env(safe-area-inset-bottom,0px))!important;
    left:12px!important;right:12px!important;width:auto!important;max-height:62vh;
    border-radius:18px!important;
  }

  /* Modals fill phone comfortably */
  .modal-overlay{padding:12px;align-items:flex-end}
  .modal{width:100%!important;max-width:100%!important;max-height:88vh;overflow:auto;border-radius:20px 20px 16px 16px!important;margin:0}
  .modal-title{font-size:1.05rem}

  /* Session / toolbars wrap cleanly */
  .session-bar,.cw-toolbar,.db-toolbar,.view-toolbar{
    gap:8px;padding:12px;border-radius:14px;
  }
  .session-bar .md-info-tag{margin-left:0;width:100%}

  /* Daily hub less noisy */
  .daily-hub-head{align-items:flex-start;margin-bottom:10px}
  .daily-hub-head h2{font-size:1.05rem}
  .daily-hub-alerts .dh-alert{flex-wrap:wrap}
  .daily-hub-alerts .dh-alert button{margin-left:0;width:100%}

  /* Toolbars / action rows stack like a real app */
  .cl-title-row,.view-head-bar,.view-toolbar{
    flex-direction:column;align-items:stretch!important;gap:10px;
  }
  .view-head-actions{margin-left:0!important;width:100%;display:grid;grid-template-columns:1fr 1fr;gap:8px}
  .view-head-actions .btn-primary{grid-column:1/-1}
  .session-bar{flex-direction:column;align-items:stretch}
  .session-bar > *{width:100%;box-sizing:border-box}

  /* Welcome home — phone layout (desktop/iPad wide unchanged above 900px) */
  #app-welcome-screen{padding-bottom:env(safe-area-inset-bottom,0px)}
  #app-welcome-screen .home-topnav{
    position:sticky;top:0;z-index:90;
    display:flex;align-items:center;justify-content:space-between;
    gap:8px;flex-wrap:nowrap;
    background:rgba(255,255,255,.96)!important;
  }
  #app-welcome-screen .hn-brand{min-width:0;flex:1 1 auto}
  #app-welcome-screen .hn-brand strong{font-size:1.05rem}
  #app-welcome-screen .hn-brand span{display:none}
  #app-welcome-screen .home-nav-actions{
    position:relative;z-index:95;flex:0 0 auto;
    display:flex;align-items:center;gap:6px;
  }
  #app-welcome-screen .lang-select-wrap{position:relative;z-index:96}
  #app-welcome-screen .lang-select-btn{
    min-height:44px;padding:8px 10px;touch-action:manipulation;
  }
  #app-welcome-screen .lang-select-name{display:none}
  #app-welcome-screen .lang-select-menu{
    z-index:120;min-width:200px;right:0;
  }
  #app-welcome-screen .home-nav-actions .btn-primary{
    min-height:44px;padding:10px 12px!important;font-size:.76rem!important;
    white-space:nowrap;border-radius:12px;touch-action:manipulation;
  }
  /* Burger menu must open — never permanently hide with !important */
  #app-welcome-screen .home-menu{
    display:none;
    position:absolute;top:100%;left:0;right:0;
    height:auto!important;flex-direction:column;
    background:var(--form-surface);border-bottom:1px solid #e9d5ff;
    padding:8px 0 12px;margin:0;
    box-shadow:0 16px 36px rgba(76,29,149,.16);
    z-index:100;max-height:70vh;overflow:auto;-webkit-overflow-scrolling:touch;
  }
  #app-welcome-screen .home-topnav.menu-open .home-menu{
    display:flex!important;
  }
  #app-welcome-screen .home-menu > li{flex-direction:column;width:100%}
  #app-welcome-screen .home-menu > li > a{
    height:48px;justify-content:flex-start;padding:0 18px;
    font-size:.92rem;opacity:1;
  }
  #app-welcome-screen .home-submenu{
    position:static!important;transform:none!important;height:auto!important;
    background:color-mix(in srgb, var(--primary) 14%, var(--form-surface))!important;border-radius:0;box-shadow:none;min-width:0;
  }
  #app-welcome-screen .home-submenu a{
    color:var(--primary-light)!important;opacity:1!important;padding:12px 18px 12px 28px;
  }
  #app-welcome-screen .welcome-shell{
    display:flex;flex-direction:column;gap:14px;
  }
  #app-welcome-screen .wh-hero{border-radius:18px;padding:20px 16px 18px}
  #app-welcome-screen .welcome-side{border-radius:20px;padding:18px 16px}
  #app-welcome-screen .welcome-side-title{font-size:1.15rem}
  #app-welcome-screen .welcome-portal-item{
    border-radius:14px;padding:14px 10px 12px;
  }
  #app-welcome-screen .brand-shapes-row{
    display:flex!important;flex-wrap:nowrap;gap:12px;
    overflow-x:auto;-webkit-overflow-scrolling:touch;
    padding-bottom:6px;scroll-snap-type:x mandatory;
  }
  #app-welcome-screen .brand-shape-card{
    flex:0 0 128px;max-width:128px;scroll-snap-align:start;
  }
  #app-welcome-screen .pladis-news-grid{grid-template-columns:1fr!important;gap:12px!important}
  #login-screen{padding:16px 12px!important;align-items:center!important}
  #login-screen .login-btn-gradient{min-height:48px;border-radius:14px;font-size:.95rem;width:100%}

  /* Prevent page-wide sideways scroll WITHOUT clipping form content */
  body{overflow-x:hidden}
  .view,.portal-landing,.header-inner,.modal,.ra-row,#permit-form-body,#ncr-modal .modal{
    max-width:100%;min-width:0;box-sizing:border-box;
  }
  .view{overflow-x:visible}
  img,svg,canvas{max-width:100%}
  /* Headers stay nowrap (short column titles) — but NOT body cells: forcing every td to
     nowrap clipped/compressed long free-text columns (Remarks, Description, Corrective
     Action, Training Name, Area, Comments...) into unreadable horizontal-scroll strips on
     mobile. Short structured values (ID/Date/Time/Status/short codes) don't wrap anyway at
     normal column widths, so removing this for td is safe and needs no per-table changes. */
  .view table th{white-space:nowrap}
  .pmt-check-label,.choice-chip span,.cls-pick .ho-st-btn,.page-title{white-space:normal!important}
  #ncr-modal .modal,#permit-modal .modal{
    width:100%!important;max-width:100%!important;max-height:92vh;overflow:auto;-webkit-overflow-scrolling:touch;
  }
  #permit-form-body{padding:12px!important}
  #view-riskassess .fi, #permit-form-body input, #permit-form-body textarea, #permit-form-body select{
    max-width:100%;box-sizing:border-box;
  }
  #ra-form-wrap .ra-meta-grid .fi{width:100%}

  /* Stronger mobile text contrast (checklist / HSE forms) */
  .cl-header{
    background:var(--form-surface)!important;
    border:1.5px solid #c4b5fd!important;
  }
  .cl-title-row #cl-title,
  .page-title,.pro-panel-title{
    color:var(--primary-light)!important;
  }
  .cl-prog-info,.page-sub,.pro-panel-sub{
    color:var(--primary-light)!important;
    opacity:1!important;
    font-weight:700!important;
  }
  .session-bar{
    background:var(--form-surface)!important;
    border:1.5px solid #c4b5fd!important;
  }
  .session-bar label,.session-bar > span{
    color:var(--primary-light)!important;
    font-weight:700!important;
  }
  .session-bar .md-info-tag,
  .session-bar .md-info-tag *{
    color:#fff!important;
  }
  .session-bar input,.session-bar select{
    color:var(--text)!important;
    font-weight:700!important;
  }
  #view-firepump > div:first-child > div:first-child,
  #view-lpgcooling > div:first-child > div:first-child{
    grid-template-columns:1fr!important;
  }
  #view-firepump > div:first-child > div:first-child > div,
  #view-lpgcooling > div:first-child > div:first-child > div{
    border:none!important;
    text-align:left!important;
  }
  #view-firepump > div:first-child > div:first-child > div:nth-child(2),
  #view-lpgcooling > div:first-child > div:first-child > div:nth-child(2){
    text-align:center!important;
  }
  #view-firepump > div:first-child > div:nth-child(2),
  #view-lpgcooling > div:first-child > div:nth-child(2){
    grid-template-columns:1fr 1fr!important;
  }
  #view-firepump > div:first-child > div:nth-child(2) > div,
  #view-lpgcooling > div:first-child > div:nth-child(2) > div{
    border-right:none!important;
    border-bottom:1px solid #e2e8f0;
  }
  #view-firepump input,#view-firepump select,#view-firepump textarea,
  #view-lpgcooling input,#view-lpgcooling select,#view-lpgcooling textarea{
    color:var(--text)!important;
    font-weight:700!important;
  }
  #view-firepump [style*="color:var(--muted)"],
  #view-lpgcooling [style*="color:var(--muted)"]{
    color:var(--text)!important;
    font-weight:800!important;
  }
  #firepump-body td,#lpgcooling-body td,#di-checklist-body{
    color:var(--text)!important;
  }
  .header .sys-title{color:#fff!important;font-weight:800!important}
  .header .sys-sub{color:var(--primary-light)!important;opacity:1!important}
}

/* In-app print preview (mobile-safe close/back) */
#print-preview-overlay{
  display:none;position:fixed;inset:0;z-index:5000;background:#0f172a;
}
#print-preview-overlay.open{display:flex;flex-direction:column}
#print-preview-overlay .pp-toolbar{
  flex-shrink:0;display:flex;align-items:center;gap:8px;padding:10px 12px;
  padding-top:max(10px, env(safe-area-inset-top,0px));
  background:#1e1b4b;color:#fff;border-bottom:1px solid rgba(255,255,255,.12);
}
#print-preview-overlay .pp-toolbar button{
  border:none;border-radius:12px;padding:11px 14px;font-weight:800;font-size:.84rem;
  cursor:pointer;min-height:44px;font-family:inherit;
}
#print-preview-overlay .pp-close{background:var(--form-surface);color:var(--primary-light)}
#print-preview-overlay .pp-print{background:linear-gradient(135deg,#7C3AED,#2563EB);color:#fff;margin-left:auto}
#print-preview-overlay .pp-title{
  flex:1;min-width:0;font-size:.78rem;font-weight:700;opacity:.92;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:0 4px;
}
#print-preview-overlay iframe{
  flex:1;width:100%;border:0;background:var(--form-surface);
}
body.print-preview-open{overflow:hidden}
body.print-preview-open .mobile-app-dock{display:none!important}
@media print{
  body.print-preview-open > *:not(#print-preview-overlay){display:none!important}
  #print-preview-overlay{position:static;display:block!important;background:var(--form-surface)}
  #print-preview-overlay .pp-toolbar{display:none!important}
  #print-preview-overlay iframe{height:auto!important;min-height:100vh}
}
@media (max-width:420px){
  .cards-grid,.home-quick,.portal-landing-grid,.pladis-news-grid,
  .daily-hub-kpis,.ncr-grid,.fac-form-grid,.ho-grid{grid-template-columns:1fr!important}
  .sys-title{max-width:40vw;font-size:.86rem}
  .view-head-actions{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  .view.active{animation:none!important}
}

/* PWA install */
.pwa-install-btn{
  display:none;width:100%;margin-top:10px;min-height:46px;border:1px solid rgba(167,139,250,.45);
  border-radius:14px;background:rgba(124,58,237,.18);color:#ede9fe;font:inherit;font-weight:800;
  font-size:.9rem;cursor:pointer;align-items:center;justify-content:center;gap:8px;
}
.pwa-install-btn:hover{background:rgba(124,58,237,.28)}
.pwa-ios-tip{
  margin-top:12px;padding:12px 14px;border-radius:14px;background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.12);color:rgba(255,255,255,.78);font-size:.78rem;line-height:1.55;text-align:right;
  direction:rtl;
}
.pwa-ios-tip b{color:#fff}
body.is-pwa-standalone .pwa-install-btn,
body.is-pwa-standalone .pwa-ios-tip{display:none!important}

/* ══ v86: hard-isolate welcome + login from app chrome ══ */
body.welcome-active .header,
body.welcome-active #portal-sidebar,
body.welcome-active .ps-backdrop,
body.welcome-active .ps-mobile-bar,
body.welcome-active .mobile-app-dock,
body.welcome-active #notif-panel,
body.welcome-active #search-panel,
body.welcome-active #notif-live-banner,
body.welcome-active #offline-chip,
body.welcome-active .offline-chip,
body.login-active .header,
body.login-active #portal-sidebar,
body.login-active .ps-backdrop,
body.login-active .ps-mobile-bar,
body.login-active .mobile-app-dock,
body.login-active #notif-panel,
body.login-active #search-panel,
body.login-active #notif-live-banner,
body.login-active #offline-chip,
body.login-active .offline-chip{
  display:none!important;
  visibility:hidden!important;
  pointer-events:none!important;
}
body.welcome-active,
body.login-active{
  overflow:hidden!important;
  padding-bottom:0!important;
}
body.welcome-active #app-welcome-screen{
  position:fixed!important;
  inset:0!important;
  z-index:12000!important;
  isolation:isolate;
  background:var(--bg-grad),var(--bg)!important;
  overflow-y:auto!important;
  -webkit-overflow-scrolling:touch;
}
body.login-active #login-screen{
  z-index:12100!important;
}
/* Explicit hidden state for the login screen: it starts life with inline
   display:flex (see the element's base style attribute) and is normally
   kept off-screen only by sitting under the splash/welcome screens'
   higher z-index — never truly hidden until JS flips its inline display.
   This safety net guarantees it stays hidden whenever body isn't in the
   login step, regardless of any timing/animation edge case, without
   touching any of the existing JS that shows/hides it. */
body:not(.login-active) #login-screen{
  display:none!important;
}
.welcome-mobile-cta{
  display:none;
}
@media (max-width:900px){
  #app-welcome-screen .home-topnav{
    position:sticky;top:0;z-index:50;
    background:var(--form-surface)!important;
    backdrop-filter:none!important;-webkit-backdrop-filter:none!important;
    border-bottom:1px solid #e9d5ff;
    box-shadow:0 8px 24px rgba(76,29,149,.08);
    padding-top:max(10px, env(safe-area-inset-top,0px));
    min-height:56px;height:auto;
  }
  #app-welcome-screen .hn-brand span{display:none!important}
  #app-welcome-screen .hn-brand strong{font-size:1.2rem}
  #app-welcome-screen .home-nav-signin{display:none!important}
  #app-welcome-screen .home-nav-actions{gap:8px}
  #app-welcome-screen .welcome-shell{
    display:flex!important;flex-direction:column!important;
    gap:14px!important;padding:12px 14px calc(96px + env(safe-area-inset-bottom,0px))!important;
  }
  #app-welcome-screen .welcome-side{position:relative!important;top:auto!important}
  #app-welcome-screen .welcome-side-sub{display:none}
  #app-welcome-screen .welcome-portal-detail ul{display:none}
  #app-welcome-screen .welcome-portal-detail p{
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
    font-size:.78rem;line-height:1.4;margin:0;
  }
  #app-welcome-screen .welcome-portal-detail h4{font-size:.95rem;margin:0 0 6px}
  /* The floating .welcome-mobile-cta below already covers "Continue to
     Sign In" on phones, so the in-card CTA under the portal cards is
     hidden here to avoid a duplicate button — same intent as before,
     just re-targeted at its new wrapper (.ws-cta) since the button is
     no longer a direct child of .welcome-side. */
  #app-welcome-screen .welcome-side .ws-cta{display:none!important}
  #app-welcome-screen .wh-hero{padding:18px 14px 16px}
  #app-welcome-screen .wh-title{font-size:1.3rem}
  #app-welcome-screen .wh-tagline{font-size:.82rem}
  #app-welcome-screen .wh-company{font-size:.6rem}
  .welcome-mobile-cta{
    display:flex!important;position:fixed;left:12px;right:12px;
    bottom:calc(12px + env(safe-area-inset-bottom,0px));
    z-index:12050;min-height:52px;align-items:center;justify-content:center;
    border:none;border-radius:16px;cursor:pointer;font:inherit;font-weight:800;font-size:.95rem;
    color:#fff;background:linear-gradient(135deg,#7C3AED,#2563EB);
    box-shadow:0 14px 34px rgba(76,29,149,.35);
    touch-action:manipulation;
  }
}

/* ============================================================
   Section 3: originally a small <style> block later in <body>,
   next to the search panel (lines 22949-22956).
   ============================================================ */
@keyframes slideInRight {
  from { transform: translateX(120%); opacity: 0; }
  to   { transform: translateX(0);    opacity: 1; }
}
#notif-panel.open { display:block !important; }
#search-panel.open { display:block !important; }

/* ============================================================
   Training & TBT Management (Safety Portal)
   ============================================================ */
.trn-tabs{ display:flex; gap:6px; flex-wrap:wrap; margin-bottom:14px; }
.trn-pane{ min-width:0; }
.trn-toolbar{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:10px; }
.trn-toolbar-actions{ margin-left:auto; display:flex; gap:8px; flex-wrap:wrap; }
.trn-filters{ display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin-bottom:12px; }
.trn-filters input[type="text"],
.trn-filters select{ border:1.5px solid var(--border); border-radius:8px; padding:7px 10px; font-size:.82rem; font-family:inherit; background:var(--form-surface); color:var(--text); }
.trn-inline-check{ display:flex; align-items:center; gap:6px; font-size:.78rem; font-weight:700; color:var(--muted); cursor:pointer; }
.trn-legend{ display:flex; gap:14px; flex-wrap:wrap; margin-bottom:10px; }
.trn-legend-item{ display:flex; align-items:center; gap:6px; font-size:.74rem; font-weight:700; color:var(--muted); }
.trn-dot{ width:12px; height:12px; border-radius:99px; display:inline-block; box-shadow:0 0 0 2px rgba(0,0,0,.05); }

/* Matrix grid — sticky header + sticky identity columns, scrolls both axes */
.trn-matrix-wrap{ max-height:70vh; overflow:auto; border:1px solid var(--border); border-radius:12px; background:var(--form-surface); }
/* table-layout:fixed makes every column's CSS width authoritative instead of a hint the browser
   can override based on content — required so the sticky identity columns' actual rendered
   widths always match the "left" pixel offsets below (see .trn-sticky-col comment); without it,
   a table with only auto-sized columns silently drifts out of sync with hardcoded sticky offsets. */
.trn-matrix-table{ border-collapse:collapse; font-size:.72rem; white-space:nowrap; table-layout:fixed; }
.trn-matrix-table th, .trn-matrix-table td{ padding:7px 9px; border-bottom:1px solid var(--border); text-align:center; }
.trn-matrix-table thead th{ position:sticky; top:0; background:#1e3a5f; color:#fff; font-weight:800; z-index:3; }
.trn-course-th, .trn-cell{ width:92px; max-width:92px; }
.trn-course-th{ cursor:pointer; white-space:normal; overflow:hidden; text-overflow:ellipsis; }
.trn-course-th:hover{ text-decoration:underline; }
/* Fixed (not min-) widths are required here: position:sticky's left offset is a pixel
   contract between these three columns — if the browser were free to size them to content,
   a long name/department/job-title would push the next sticky column wider than its "left"
   offset expects, and at some scroll distance the columns would slide over one another. */
.trn-sticky-col{ position:sticky; background:var(--form-surface); text-align:left !important; font-weight:700; z-index:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.trn-matrix-table thead th.trn-sticky-col{ z-index:4; white-space:normal; }
.trn-sticky-name{ left:0; width:170px; max-width:170px; white-space:normal; }
.trn-sticky-dept{ left:170px; width:130px; max-width:130px; }
.trn-sticky-jt{ left:300px; width:170px; max-width:170px; box-shadow:3px 0 4px -2px rgba(0,0,0,.12); }
.trn-sticky-name a{ color:var(--primary); text-decoration:none; font-weight:800; }
.trn-sticky-name a:hover{ text-decoration:underline; }
.trn-sub{ font-size:.66rem; color:var(--muted); font-weight:600; }
.trn-inactive-badge{ display:inline-block; background:#fee2e2; color:#b91c1c; font-size:.7rem; font-weight:800; border-radius:99px; padding:1px 7px; margin-left:4px; }
.trn-cell{ text-align:center; }
.trn-pager{ display:flex; align-items:center; gap:12px; justify-content:center; margin-top:10px; font-size:.78rem; color:var(--muted); font-weight:700; }

/* Attendee editor table (Attendance / TBT forms) */
.trn-att-table-wrap{ overflow-x:auto; border:1px solid var(--border); border-radius:10px; }
.trn-att-table{ width:100%; border-collapse:collapse; font-size:.76rem; }
.trn-att-table th{ background:var(--surface-2); color:var(--text); font-weight:800; padding:6px 8px; white-space:nowrap; text-align:left; }
.trn-att-table td{ padding:4px 6px; border-top:1px solid var(--border); }
.trn-att-table td input{ width:100%; box-sizing:border-box; border:1px solid var(--border); border-radius:6px; padding:5px 7px; font-size:.78rem; font-family:inherit; background:var(--form-surface); color:var(--text); }
.trn-att-table td input[readonly]{ background:var(--surface-2); color:var(--muted); }

/* Topics grid (Toolbox Talk — 10 fixed lines matching the source form) */
.trn-topics-grid{ display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:6px; }
.trn-topics-grid input{ border:1.5px solid var(--border); border-radius:8px; padding:7px 10px; font-size:.82rem; font-family:inherit; background:var(--form-surface); color:var(--text); }

/* Employee picker */
.trn-pick-list{ max-height:340px; overflow-y:auto; border:1px solid var(--border); border-radius:10px; }
.trn-pick-row{ display:flex; align-items:center; gap:8px; padding:8px 10px; border-bottom:1px solid var(--border); font-size:.8rem; cursor:pointer; }
.trn-pick-row:last-child{ border-bottom:none; }
.trn-pick-row:hover{ background:var(--surface-2); }
.trn-pick-row .trn-sub{ margin-left:auto; text-align:right; }
.trn-pick-added{ opacity:.55; cursor:default; }

@media (max-width:900px){
  .trn-matrix-wrap{ max-height:60vh; }
  .trn-topics-grid{ grid-template-columns:1fr; }
  .trn-toolbar-actions{ margin-left:0; width:100%; }
}
@media (max-width:600px){
  .trn-filters{ flex-direction:column; align-items:stretch; }
  .trn-filters input[type="text"], .trn-filters select{ width:100%; }
}

/* ============================================================
   PPE Management (Safety Portal)
   ============================================================ */
.ppe-status-pill{ display:inline-block; font-size:.7rem; font-weight:800; border-radius:99px; padding:3px 10px; white-space:nowrap; }
.ppe-inv-card .empty-state-hint b{ color:var(--text); }
.ppe-stock-warning{ background:#fef2f2; border:1px solid #fecaca; color:#b91c1c; border-radius:8px; padding:8px 12px; font-size:.78rem; font-weight:700; margin:8px 0; }

/* Requirement marks — used both in the desktop matrix cells and mobile card lists */
.ppe-mark{ display:inline-flex; align-items:center; justify-content:center; min-width:22px; height:22px; padding:0 6px; border-radius:6px; font-size:.72rem; font-weight:900; }
.ppe-mark-m{ background:#dbeafe; color:#1d4ed8; }
.ppe-mark-r{ background:#dcfce7; color:#15803d; }
.ppe-mark-n{ background:transparent; color:#cbd5e1; font-weight:700; }

/* Desktop matrix table */
.ppe-matrix-wrap{ max-height:70vh; }
.ppe-matrix-table{ font-size:.74rem; }
/* Two-row header: group row stays at top:0, item-name row stacks directly beneath it (a fixed
   height keeps this offset reliable rather than measuring the rendered row at runtime). The
   sticky Task/Area cell spans both rows (rowspan=2) so it only ever needs top:0. */
.ppe-group-row th{ height:32px; box-sizing:border-box; }
.ppe-item-row th{ top:32px !important; }
.ppe-group-th{ background:#7f1d1d; color:#fff; text-align:center; font-weight:800; padding:6px 8px; border-bottom:1px solid rgba(255,255,255,.25); }
.ppe-item-th{ padding:7px 6px; font-size:.68rem; font-weight:700; white-space:normal; line-height:1.25; }
.ppe-sticky-task{ left:0; width:210px; max-width:210px; }
.ppe-mark-cell{ text-align:center; padding:5px 4px !important; }
.ppe-matrix-table.trn-matrix-table{ table-layout:fixed; }
.ppe-matrix-table .ppe-item-th{ width:88px; max-width:88px; }

/* Mobile Task/Area requirement cards */
.ppe-matrix-mobile-only{ display:none; }
.ppe-req-card{ border:1px solid var(--border); border-radius:12px; padding:14px; margin-top:12px; background:var(--form-surface); }
.ppe-req-card-title{ font-weight:800; margin-bottom:8px; font-size:.85rem; }
.ppe-req-mandatory .ppe-req-card-title{ color:#1d4ed8; }
.ppe-req-recommended .ppe-req-card-title{ color:#15803d; }
.ppe-req-item{ display:flex; align-items:center; gap:8px; padding:7px 4px; border-bottom:1px solid var(--border); font-size:.82rem; }
.ppe-req-item:last-child{ border-bottom:none; }

@media (max-width:900px){
  .ppe-matrix-desktop-only{ display:none; }
  .ppe-matrix-mobile-only{ display:block; }
  .ppe-matrix-filters-desktop{ display:none; }
}
