/*
  ============================================================
  CONFIDENTIAL AND PROPRIETARY
  ============================================================
  Author & Creator:  Vanessa Tezanos
  AI-Assisted By:    Claude (Anthropic) — AI-generated code
                     based on information and prompts provided
                     by Vanessa Tezanos as the original author.
  Version:           v1.0
  Created:           2026-06-18
  Updated:           2026-06-18
  Purpose:           SWX Ops Console — shared ALIGNMENT layer. The
                     shell-mode tools (Regional Orders, Open Jobs,
                     NetSuite Joblog, Logistics, Cross-Pool) predate the
                     Console component layer: each ships its own sticky
                     navy nav bar, navy hero, and bespoke card/metric/
                     badge styles. When the Console chrome reparents them
                     into .main, those layers duplicate the Console's own
                     sidebar + top bar and read as "an app inside the app."
                     This stylesheet reconciles them to the Console look —
                     WITHOUT touching tool markup or logic. Linked AFTER
                     each tool's inline <style> so these rules win, exactly
                     like the shared tokens layer.

                     SCOPE: every rule is scoped under #swx-console-content
                     (the wrapper the chrome reparents tool content into),
                     so the Console chrome itself is never affected, and a
                     tool opened standalone (no chrome) is left untouched.
  ============================================================
  This document and its contents are confidential and
  proprietary. Unauthorized reproduction, distribution, or
  disclosure is strictly prohibited.
  ============================================================
*/

/* ============================================================
   1 · NAV BAR  →  in-content tab strip on bone
   The navy .swx-nav duplicates the Console top bar. Strip its
   navy shell, sticky behavior, and full-bleed; keep only the
   in-tool view tabs + action buttons, restyled for bone paper.
   ============================================================ */
#swx-console-content .swx-nav {
  position: static;
  height: auto;
  background: transparent;
  border-bottom: 1px solid var(--line);
  box-shadow: none;
  padding: 14px 0 0;
  margin: 0 0 4px;
}
#swx-console-content .swx-nav-inner {
  max-width: none;
  margin: 0;
  padding: 0;
  gap: 16px;
  flex-wrap: wrap;
}

/* brand + user identity are already in the Console chrome → hide here */
#swx-console-content .swx-nav-brand,
#swx-console-content .swx-nav-divider,
#swx-console-content .swx-nav-sub,
#swx-console-content .swx-nav-user,
#swx-console-content .swx-nav-user-avatar { display: none !important; }

/* view tabs: white-on-navy uppercase pills → Console ink tabs */
#swx-console-content .swx-nav-tabs { gap: 2px; flex-wrap: wrap; }
#swx-console-content .swx-nav-tab {
  padding: 8px 13px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-muted);
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--r-2);
  transition: color var(--d-1) var(--ease-out), background var(--d-1) var(--ease-out);
}
#swx-console-content .swx-nav-tab:hover {
  color: var(--fg);
  background: var(--bg-sunken);
}
#swx-console-content .swx-nav-tab.active {
  color: var(--tool-accent, var(--signal-500));
  background: color-mix(in srgb, var(--tool-accent, var(--signal-500)) 12%, transparent);
  border-color: transparent;
}

/* right-side action buttons (Help / Load Demo) → quiet outline on bone */
#swx-console-content .swx-nav-right { gap: 8px; margin-left: auto; }
#swx-console-content .swx-nav-right .btn,
#swx-console-content .swx-nav-right button {
  color: var(--fg-muted) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--r-2) !important;
  background: var(--bg-elevated) !important;
}
#swx-console-content .swx-nav-right .btn:hover,
#swx-console-content .swx-nav-right button:hover {
  color: var(--fg) !important;
  border-color: var(--line-strong) !important;
}

/* ============================================================
   2 · HERO  →  Console page-head on bone
   The navy gradient hero duplicates a page header. Flatten to
   bone, ink the title, drop the gold/italic + glow.
   ============================================================ */
#swx-console-content .swx-hero {
  background: none !important;
  color: var(--fg);
  padding: 18px 0 0;
  overflow: visible;
}
#swx-console-content .swx-hero::after { display: none !important; }
#swx-console-content .swx-hero-inner { max-width: none; margin: 0; }
#swx-console-content .swx-hero h1 {
  font-family: var(--font-display);
  font-size: clamp(24px, 3vw, 34px);
  font-weight: 600;
  letter-spacing: -0.03em;
  color: var(--fg);
  margin-bottom: 6px;
}
#swx-console-content .swx-hero h1 em {
  font-style: normal;
  color: var(--fg);
  font-weight: 600;
}
#swx-console-content .swx-hero-desc,
#swx-console-content .swx-hero p {
  font-size: 14px;
  color: var(--fg-muted);
  max-width: 680px;
  line-height: 1.55;
}
#swx-console-content .swx-hero .eyebrow {
  color: var(--fg-muted);
}

/* ============================================================
   3 · MAIN CONTAINER  →  fill the Console content area
   Drop the tool's own max-width + heavy side padding so content
   uses the Console's content width and padding rhythm.
   ============================================================ */
#swx-console-content .swx-main {
  max-width: none;
  margin: 0;
  padding: 18px 0 48px;
}

/* ============================================================
   4 · CARDS / PANELS  →  Console framed plate
   Tools use .metric-card / .chart-card (Cross-Pool) and
   .panel / .panel-head / .panel-body (Logistics). Map all to the
   Console card: hairline border, soft wash, no accent left-bar.
   ============================================================ */
#swx-console-content .metric-card,
#swx-console-content .chart-card,
#swx-console-content .panel {
  background: var(--bg-elevated);
  border: 1px solid var(--line);
  border-radius: var(--r-3);
  box-shadow: none;
}
/* kill the colored accent top/left bars — Console uses lines, not fills */
#swx-console-content .metric-card::before,
#swx-console-content .panel::before,
#swx-console-content .kpi::before { display: none !important; }

#swx-console-content .chart-card { padding: 16px; }
#swx-console-content .chart-card h3 {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 600;
  color: var(--fg);
  border-bottom: 1px solid var(--line);
  padding-bottom: 12px;
  margin-bottom: 16px;
}
#swx-console-content .panel-head {
  background: var(--bg-sunken);
  border-bottom: 1px solid var(--line);
  padding: 13px 16px;
}
#swx-console-content .panel-head h2 {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 600;
  color: var(--fg);
}
#swx-console-content .panel-body { padding: 16px; }

/* ============================================================
   5 · METRIC / KPI BLOCKS  →  Console .kpi rhythm
   Cross-Pool: .metric-card > .metric-value/.metric-label/.metric-desc
   Logistics:  .kpi (own class) > .kpi-val/.kpi-lbl/.kpi-sub
   ============================================================ */
#swx-console-content .metric-card { padding: 16px 18px; gap: 0; }
#swx-console-content .metric-label,
#swx-console-content .kpi-lbl {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fg-muted);
  font-weight: 500;
}
#swx-console-content .metric-value,
#swx-console-content .kpi-val {
  font-family: var(--font-mono);
  font-size: 30px;
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1;
  margin-top: 12px;
  color: var(--fg);
  font-variant-numeric: tabular-nums;
}
/* preserve semantic value colors the tools set intentionally */
#swx-console-content .kpi-val.danger { color: var(--crit); }
#swx-console-content .kpi-val.good { color: var(--ok); }
/* a value may carry a shared status class (e.g. "alert") that elsewhere styles
   a full banner — never let that box styling (border/padding/background) land on
   the number itself; it reads as a stray bracket beside the digit. */
#swx-console-content .kpi-val,
#swx-console-content .metric-value { border: 0; padding: 0; background: none; }
#swx-console-content .metric-desc,
#swx-console-content .kpi-sub {
  font-size: 12px;
  color: var(--fg-muted);
  margin-top: 8px;
}
/* Logistics' own .kpi box → Console plate (its ::before already killed above) */
#swx-console-content .kpi {
  background: var(--bg-elevated);
  border: 1px solid var(--line);
  border-radius: var(--r-3);
  box-shadow: none;
  padding: 16px 18px;
}

/* ============================================================
   6 · BADGES  →  Console .pill tones
   ============================================================ */
#swx-console-content .badge {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--bg-sunken);
  color: var(--fg-muted);
}
#swx-console-content .badge-success { background: rgba(46,125,82,0.12); color: var(--ok); border-color: transparent; }
#swx-console-content .badge-pending { background: var(--signal-50); color: var(--signal-500); border-color: transparent; }
#swx-console-content .badge-in { background: rgba(46,125,82,0.12); color: var(--ok); border-color: transparent; }
#swx-console-content .badge-out { background: var(--bg-sunken); color: var(--fg-muted); }

/* ============================================================
   7 · MODE-GUIDE CARD  →  Console card framing (it floats over content)
   ============================================================ */
#swx-console-content .mode-guide-card {
  background: var(--bg-elevated);
  border: 1px solid var(--line);
  border-radius: var(--r-3);
  box-shadow: var(--e-3);
}
#swx-console-content .mode-guide-header { border-bottom: 1px solid var(--line); }

/* ============================================================
   8 · HELP TOGGLE  →  quiet Console outline button
   The per-tool "Help" toggle ships as faint text in the tab row,
   so the affordance disappears. Promote it to a real bordered
   button (mono uppercase, signal-tinted on hover) so it reads as
   the clickable help control it is. One rule → every aligned tool.
   ============================================================ */
#swx-console-content #toggleHelpBtn,
#swx-console-content #dashHelpBtn,
#swx-console-content [id$="HelpBtn"],
#swx-console-content .btn-pill-help {
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
  padding: 7px 12px !important;
  font-family: var(--font-mono) !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: var(--fg-muted) !important;
  background: var(--bg-elevated) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--r-2) !important;
  box-shadow: none !important;
  white-space: nowrap;
  transition: color var(--d-1) var(--ease-out), background var(--d-1) var(--ease-out), border-color var(--d-1) var(--ease-out);
}
#swx-console-content #toggleHelpBtn::before,
#swx-console-content #dashHelpBtn::before,
#swx-console-content [id$="HelpBtn"]::before,
#swx-console-content .btn-pill-help::before {
  content: "?";
  font-family: var(--font-mono);
  font-weight: 600;
  color: var(--signal-500);
}
#swx-console-content #toggleHelpBtn:hover,
#swx-console-content #dashHelpBtn:hover,
#swx-console-content [id$="HelpBtn"]:hover,
#swx-console-content .btn-pill-help:hover {
  color: var(--fg) !important;
  background: var(--bg-sunken) !important;
  border-color: var(--line-strong) !important;
}

/* ============================================================
   9 · DASHBOARD ACTION "PILLS"  →  squared Console buttons
   The Regional dashboard ships color-tinted full-pill action
   buttons (green Import, navy Export, …). Reconcile them to the
   neutral squared button used on the All Jobs tab (the tool's
   own .btn-ghost) so action bars read consistently across views.
   The Help pill is handled separately (§8) and keeps its outline.
   ============================================================ */
#swx-console-content .btn-pill-refresh,
#swx-console-content .btn-pill-import,
#swx-console-content .btn-pill-draft,
#swx-console-content .btn-pill-export {
  background: var(--bg-sunken) !important;
  color: var(--fg) !important;
  border: 1px solid transparent !important;
  border-radius: var(--r-2) !important;
}
#swx-console-content .btn-pill-refresh:hover,
#swx-console-content .btn-pill-import:hover,
#swx-console-content .btn-pill-draft:hover,
#swx-console-content .btn-pill-export:hover {
  background: var(--ink-7) !important;
  color: var(--fg) !important;
}

/* ============================================================
   10 · LEGACY COUNTER "TILES"  →  flat Console stat tiles
   Open Jobs and the Regional dashboard render summary counters
   with the old .tile pattern: white card, drop-shadow, colored
   top-accent bar, hover-lift, --font-display numerals. Reconcile
   them to the flat bordered stat tile used by the NetSuite Joblog
   (.stat-tile) and Regional's own reports (.kpi-card): elevated
   surface, hairline border, mono label + numeral, no accent bar,
   no lift. These tiles double as click-to-filter controls, so the
   interactive affordance is preserved as a border/active state
   instead of the shadow lift. One block → every legacy tile.
   ============================================================ */
#swx-console-content .tile {
  background: var(--bg-elevated) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--r-3) !important;
  padding: 16px 18px !important;
  box-shadow: none !important;
  transition: border-color var(--d-1) var(--ease-out), background var(--d-1) var(--ease-out) !important;
}
/* kill the colored top-accent bar */
#swx-console-content .tile::before { display: none !important; }
/* flat interactive states (no translate lift) */
#swx-console-content .tile:hover {
  transform: none !important;
  box-shadow: none !important;
  border-color: var(--line-strong) !important;
}
#swx-console-content .tile.is-active {
  border-color: var(--signal-500) !important;
  background: var(--bg-sunken) !important;
}
#swx-console-content .tile.is-active::before { display: none !important; }
/* label → mono micro-caps */
#swx-console-content .tile-label {
  font-family: var(--font-mono) !important;
  font-size: 10px !important;
  font-weight: 500 !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
  color: var(--fg-muted) !important;
  margin-bottom: 12px !important;
}
/* numeral → mono tabular, neutral ink */
#swx-console-content .tile-count {
  font-family: var(--font-mono) !important;
  font-size: 30px !important;
  font-weight: 500 !important;
  color: var(--fg) !important;
  line-height: 1 !important;
  letter-spacing: -0.02em !important;
  font-variant-numeric: tabular-nums !important;
  margin-bottom: 8px !important;
}
/* caption → muted */
#swx-console-content .tile-desc {
  font-size: 11px !important;
  color: var(--fg-muted) !important;
  line-height: 1.45 !important;
}

/* ============================================================
   11 · REDUNDANT IN-TOOL "← HUB" LINKS  →  hidden
   Tools shipped their own back-to-hub link in the tab strip
   (.swx-nav-back) or iPad bar (.hub-ipad-back). The Console
   sidebar now owns suite navigation, so these are redundant —
   hide them wherever the shell is mounted.
   ============================================================ */
#swx-console-content .swx-nav-back,
#swx-console-content .hub-ipad-back { display: none !important; }

/* ============================================================
   12 · INTERACTIVE FILTER / SELECT CONTROLS  →  squared
   Tools ship filter chips and inline table selects as full pills
   (.chip, .req-chip, .inline-select). Square them to the
   architectural r-2 so interactive controls match the Console's
   button language. Status INDICATORS stay rounded — .badge and
   .stage are intentionally pill-shaped and are NOT touched here.
   ============================================================ */
#swx-console-content .chip,
#swx-console-content .req-chip,
#swx-console-content .inline-select { border-radius: var(--r-2) !important; }

/* ============================================================
   13 · TOOL IDENTITY — per-page brand accent + signature icon
   Carries the Overview's pool color-coding onto each tool page:
   the hero eyebrow shows the tool's Lucide mark and the
   emphasized word in the title takes the tool's brand color.
   Restrained — one small icon + one colored word per page.
   The accent is set on .swx-hero[data-tool] and cascades down.
   ============================================================ */
#swx-console-content .swx-hero .eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
#swx-console-content .swx-hero .eyebrow > svg,
#swx-console-content .swx-hero .eyebrow > [data-lucide] {
  width: 14px;
  height: 14px;
  flex: none;
  color: var(--tool-accent, var(--fg-muted));
}
#swx-console-content .swx-hero h1 em {
  color: var(--tool-accent, var(--fg)) !important;
}
/* per-tool accents — operations pools match the Overview palette;
   reporting tools take their own cool tones */
/* accent set on <body data-tool> so it reaches BOTH the hero and the
   in-tool tab strip (and any other content that opts in) */
body[data-tool="joblog"]    { --tool-accent: #163E5C; }
body[data-tool="openjobs"]  { --tool-accent: #163E5C; }
body[data-tool="regional"]  { --tool-accent: #2C7A7F; }
body[data-tool="exhibit"]   { --tool-accent: #A24A1F; }
body[data-tool="warehouse"] { --tool-accent: #2E7D52; }
body[data-tool="receiving"] { --tool-accent: #B5740B; }
body[data-tool="logistics"] { --tool-accent: #2C5F8A; }
body[data-tool="crosspool"] { --tool-accent: #6A4C93; }