/* ==========================================================================
   LogistiFactor — Brand Refresh Overlay
   ==========================================================================
   Purpose: bring app.html, po_tracker.html, and portal.html onto the same
   visual language as the redesigned index.html — WITHOUT touching any
   class names, element structure, or JavaScript. Each of the three pages
   already drives its entire UI off CSS custom properties declared in its
   own :root block; this file re-declares those same variable names with
   new values, loaded after each page's own <style> block so it wins the
   cascade. No selectors, no layout, no JS hooks are touched.

   Load order: add this ONE line right before </head> on each page:
   <link rel="stylesheet" href="/brand-refresh.css">
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;700&family=Space+Grotesk:wght@500;600;700&display=swap');

/* NOTE: every override below uses !important on the custom property itself.
   This guarantees it wins the cascade regardless of where in <head> this
   file's <link> tag ends up relative to the page's own <style> block —
   so the link can be inserted right after <head> without needing to find
   the exact end of a multi-megabyte inline stylesheet. */

/* ---------- app.html (was: gold #e8b84b accent, Bebas Neue) ---------- */
:root {
  --accent: #3b82f6 !important;      /* was #e8b84b (gold) → unified blue */
  --accent2: #22d3b5 !important;     /* was #4b8fe8 (blue) → unified teal, keeps 2-tone accent system */
  --accent3: #8b5cf6 !important;     /* was #9b6ee8 (purple) → unified AI purple */
  --purple: #8b5cf6 !important;      /* was #9b6ee8 */
  --danger: #ef4444 !important;      /* was #e84b4b */
  --warn: #f59e0b !important;        /* was #e88a4b */
  --display: 'Space Grotesk', sans-serif !important;   /* was 'Bebas Neue' */
  --sans: 'DM Sans', sans-serif !important;            /* was 'DM Sans' — unchanged, kept for clarity */
}

/* ---------- po_tracker.html (was: neon green #00E5A0 accent) ----------
   NOT deployed yet — pending separate confirmation. Kept here for when
   it's approved so the file stays a complete record of the plan. */
:root {
  --green: #22d3b5 !important;       /* was #00E5A0 → unified teal (keeps "active/go" meaning) */
  --green-d: #1cb89f !important;     /* was #00C48A */
  --green-bg: rgba(34,211,181,.07) !important;
  /* --blue is already #3B82F6 on this page — matches the unified palette as-is, no change needed */
  --purple: #8b5cf6 !important;      /* was #A78BFA */
  --red: #ef4444 !important;         /* was #F43F5E */
}

/* ---------- portal.html (was: blue #4a9eff + neon green #00ff94) ---------- */
:root {
  --accent: #3b82f6 !important;      /* was #4a9eff — near-identical, aligns exactly */
  --accent2: #22d3b5 !important;     /* was #00ff94 (neon green) → unified teal */
  --accent3: #8b5cf6 !important;     /* was #9b6ee8 → unified purple */
  --display: 'Space Grotesk', sans-serif !important;   /* was 'Rajdhani' */
}

/* ---------- shared polish (safe, additive only) ---------- */
:root {
  --shadow: rgba(0,0,0,.4) !important;
}

/* ==========================================================================
   Hardcoded-color patch — app.html
   ==========================================================================
   These selectors in style.css bake the OLD accent hex directly into an
   rgba() tint (background/border/box-shadow) instead of referencing the
   CSS variable, while the element's TEXT color does use var(--accent...).
   Result: after the :root override above, the text recolors but the tint
   stays the old gold/blue/green — a visible mismatch. Fixing each one to
   the matching new-accent tint at the same alpha the original author used.
   Left untouched on purpose: country-code badges (.cc-uae/.cc-ksa/.cc-mea,
   .cb-uae/.cb-ksa/.cb-mea) — those key off separate --uae/--ksa/--mea/--eg
   tokens that were never part of the brand accent and should stay distinct.
   ========================================================================== */
.nav-tab.active { background: rgba(59,130,246,.12) !important; border-color: rgba(59,130,246,.25) !important; }
.action-menu-item:hover { background: rgba(59,130,246,.08) !important; }
.sc.active { background: rgba(59,130,246,.08) !important; }
.role-admin, .role-badge.admin { background: rgba(59,130,246,.15) !important; border-color: rgba(59,130,246,.3) !important; }
.role-team, .role-badge.team { background: rgba(34,211,181,.15) !important; border-color: rgba(34,211,181,.3) !important; }
.btn-hdr.green { border-color: rgba(139,92,246,.3) !important; }
.btn-hdr.gold:hover { background: rgb(96,165,250) !important; }
.st-pending { background: rgba(59,130,246,.12) !important; border-color: rgba(59,130,246,.25) !important; }
.st-transit { background: rgba(34,211,181,.12) !important; border-color: rgba(34,211,181,.25) !important; }
.st-delivered { background: rgba(139,92,246,.12) !important; border-color: rgba(139,92,246,.25) !important; }
.tl-done .tl-icon { background: rgba(139,92,246,.1) !important; }
.tl-active .tl-icon { background: rgba(34,211,181,.1) !important; box-shadow: 0 0 8px rgba(34,211,181,.4) !important; }
.phase-block { background: rgba(139,92,246,.06) !important; border-top-color: rgba(139,92,246,.2) !important; border-right-color: rgba(139,92,246,.2) !important; border-bottom-color: rgba(139,92,246,.2) !important; }
.phase-edit-panel { border-color: rgba(139,92,246,.35) !important; }
.phase-edit-panel textarea { border-color: rgba(139,92,246,.3) !important; }
.phase-btn { border-color: rgba(139,92,246,.3) !important; }
.phase-btn:hover { background: rgba(139,92,246,.1) !important; }
#mobileNewShipBtn { box-shadow: 0 4px 20px rgba(59,130,246,.4) !important; }
.login-box { border-color: rgba(59,130,246,.18) !important; box-shadow: rgba(0,0,0,.8) 0 32px 100px, rgba(59,130,246,.08) 0 0 0 1px, rgba(255,255,255,.05) 0 1px 0 inset !important; }
#loginScreen .login-btn { background: linear-gradient(135deg, #3b82f6 0%, #22d3b5 100%) !important; box-shadow: 0 4px 20px rgba(59,130,246,.35) !important; }
#loginScreen .login-btn:hover { background: rgb(59,130,246) !important; }

/* ==========================================================================
   Hardcoded-color patch — portal.html
   ==========================================================================
   Same pattern: gradients and rgba() tints baked in as literal old hex
   (blue #4a9eff, neon green #00ff94, purple #9b6ee8) rather than variables.
   ========================================================================== */
#login-screen { background: radial-gradient(at 30% 50%, rgba(59,130,246,.06) 0%, transparent 70%) !important; }
.login-logo, .brand { background: linear-gradient(90deg, #3b82f6, #22d3b5) text !important; -webkit-text-fill-color: transparent !important; }
#login-screen .login-btn, .btn-primary { background: linear-gradient(135deg, #3b82f6, #8b5cf6) !important; }
.portal-badge { background: rgba(139,92,246,.15) !important; border-color: rgba(139,92,246,.3) !important; }
.nav-item:hover { background: rgba(59,130,246,.05) !important; }
.nav-item.active { background: rgba(59,130,246,.08) !important; }
.rfq-card:hover { border-color: rgba(59,130,246,.35) !important; }
.btn-success { background: rgba(34,211,181,.15) !important; border-color: rgba(34,211,181,.3) !important; }
