/* ==========================================================================
   mug-theme.css - MUG chrome unification layer for the DFW Logistics app
   --------------------------------------------------------------------------
   WHAT THIS IS
   A thin, additive stylesheet that repaints the vendored DFW Logistics app
   (MB016) in the M.U.G. dashboard's dark Loenbro palette so the two apps read
   as one product. It remaps the logistics design tokens and restyles only the
   shell chrome (top bar, brand, group nav, sub nav, footer, back link).

   WHY IT EXISTS
   The logistics app ships light-primary with a blueprint-navy brand. The MUG
   dashboard (../index.html, css/dash.css) is dark with an orange accent.
   Rather than fork app.css, this file loads AFTER it and wins on source order.

   ADDITIVE BY DESIGN
   Nothing in css/app.css or js/ is modified. When Matias ships a new upstream
   package, drop it in wholesale and re-add ONE line to index.html:

       <link rel="stylesheet" href="mug-theme.css">

   (plus the two other index.html edits recorded in
   ..\..\..\Logistics Code\INTEGRATION-DELTAS.md). This file itself survives an
   upstream sync untouched.

   NOTES
   - app.css redefines the same tokens inside @media (prefers-color-scheme:
     dark). Source order already settles that in our favour, but the :root
     block below is duplicated inside the same media query so the override
     holds in both schemes even if rule order ever changes.
   - app.css also hardcodes a few colours on selectors INSIDE dark media
     queries (lines ~178 topbar/groupnav, ~305 .btn-primary, ~995 .btn-danger).
     Matching later-loaded overrides for those are further down.
   - PRINT SAFETY: label and QR sheets must print dark-on-light. The label
     markup itself uses literal #fff/#000, but panels, tables and body copy on
     a printed daily report are token-driven. The @media print block at the
     bottom restores the original light token values so paper output is
     unchanged from upstream.
   - ASCII only, on purpose.
   ========================================================================== */

:root {
  /* Surfaces: page / recessed / raised.
     --concrete (page) -> MUG --bg
     --concrete-2 (recessed chip, meter track) -> MUG --panel-2
     --slab (panel, input, table surface) -> MUG --panel */
  --concrete:   #0a0b0d;
  --concrete-2: #191b1f;
  --slab:       #121316;

  /* Text: primary / secondary / tertiary.
     --ink -> MUG --text, --ink-2 -> --muted, --ink-3 -> --faint */
  --ink:        #f3f4f6;
  --ink-2:      #a7abb3;
  --ink-3:      #71757d;

  /* Rules: --rule is the structural border (panels, inputs, table head),
     --rule-soft is the internal divider.
     --rule -> MUG --line-strong, --rule-soft -> MUG --line */
  --rule:       #34373f;
  --rule-soft:  #26282e;

  /* Brand: blueprint navy -> Loenbro orange.
     --blueprint -> MUG --accent, --blueprint-2 (hover) -> --accent-press,
     --blueprint-w (wash behind brand-coloured text) -> --accent-soft */
  --blueprint:  #ff7a1a;
  --blueprint-2:#e0670f;
  --blueprint-w:#2a1808;

  /* Signals keep their meaning; only the hue is aligned to MUG's signal
     tokens and the washes are re-cut dark so a chip stays legible on
     #121316 instead of becoming a light rectangle.
     --hazard -> MUG --danger, --amber -> --warn, --go -> --ok.
     --flag has no MUG twin (it means "stored value disagrees with derived"),
     so it stays a distinct light orange, brighter than --accent. */
  --hazard:     #fb7185;
  --hazard-w:   #35171c;
  --amber:      #f5a623;
  --amber-w:    #33260f;
  --amber-ink:  #f5a623;   /* text on --amber-w, so it tracks --amber on dark */
  --go:         #41b869;
  --go-w:       #10281a;
  --flag:       #ff9448;
  --flag-w:     #33200f;

  /* Dispatch flow ramp: six stops, still a journey, still a separate axis
     from severity. Inks are the bright end of the ramp, washes are dark.
     PULLING is the brand step, so it takes the orange family. */
  --f-queued:   #a7abb3;   --f-queued-w:   #202329;
  --f-pulling:  #ffa04d;   --f-pulling-w:  #2a1808;
  --f-transit:  #4fc3e0;   --f-transit-w:  #10262e;
  --f-staging:  #f5a623;   --f-staging-w:  #33260f;
  --f-delivered:#41b869;   --f-delivered-w:#10281a;
  --f-cancelled:#8b939c;   --f-cancelled-w:#1e2126;

  /* Depth: MUG's shadow pair, which is tuned for a near-black page. */
  --shadow: 0 1px 3px rgba(0,0,0,.4), 0 10px 26px -14px rgba(0,0,0,.6);
}

/* Same override inside the dark media query, so it wins there too regardless
   of how app.css's own dark block is ordered relative to this file. */
@media (prefers-color-scheme: dark) {
  :root {
    --concrete:   #0a0b0d;
    --concrete-2: #191b1f;
    --slab:       #121316;
    --ink:        #f3f4f6;
    --ink-2:      #a7abb3;
    --ink-3:      #71757d;
    --rule:       #34373f;
    --rule-soft:  #26282e;
    --blueprint:  #ff7a1a;
    --blueprint-2:#e0670f;
    --blueprint-w:#2a1808;
    --hazard:     #fb7185;
    --hazard-w:   #35171c;
    --amber:      #f5a623;
    --amber-w:    #33260f;
    --amber-ink:  #f5a623;
    --go:         #41b869;
    --go-w:       #10281a;
    --flag:       #ff9448;
    --flag-w:     #33200f;

    --f-queued:   #a7abb3;   --f-queued-w:   #202329;
    --f-pulling:  #ffa04d;   --f-pulling-w:  #2a1808;
    --f-transit:  #4fc3e0;   --f-transit-w:  #10262e;
    --f-staging:  #f5a623;   --f-staging-w:  #33260f;
    --f-delivered:#41b869;   --f-delivered-w:#10281a;
    --f-cancelled:#8b939c;   --f-cancelled-w:#1e2126;

    --shadow: 0 1px 3px rgba(0,0,0,.4), 0 10px 26px -14px rgba(0,0,0,.6);
  }
}

/* ==========================================================================
   INK ON BRAND FILLS
   --blueprint used to be a dark navy that carried white text. It is now a
   light orange, so anything filled with it needs dark ink instead. These are
   the same three places app.css already flipped in its own dark block
   (lines ~126 .skip, ~305 .btn-primary, ~995 .btn-danger); they are restated
   here unconditionally so light and dark schemes agree.
   ========================================================================== */

.skip { background: var(--blueprint); color: #160b03; }
.btn-primary { color: #160b03; }
.btn-primary:hover { color: #160b03; }
.btn-danger { color: #1a0d10; }

@media (prefers-color-scheme: dark) {
  .btn-primary { color: #160b03; }
  .btn-danger { color: #1a0d10; }
}

/* ==========================================================================
   SHELL CHROME
   Echoes the MUG dashboard header: a --panel bar on the near-black page,
   one hairline rule underneath, a small orange kicker over the title, and
   tab-style navigation that goes accent-on-accent-soft when current.
   ========================================================================== */

.topbar {
  background: #121316;
  color: #f3f4f6;
  border-bottom: 1px solid #26282e;
  box-shadow: 0 1px 3px rgba(0,0,0,.4);
}

.topbar-in {
  gap: 1.1rem;
  padding: .6rem 1rem;
}

/* Stencil bars keep their shape, and take the Loenbro orange. */
.brand-bar { background: #ff7a1a; }

.brand-text b {
  font-family: var(--f-body);
  font-size: 1.13rem;
  font-weight: 800;
  letter-spacing: -.02em;
  color: #f3f4f6;
}

/* The secondary word reads as MUG's header kicker: small, orange, tracked. */
.brand-text em {
  font-size: .64rem;
  font-weight: 800;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: #ff7a1a;
  margin-top: 3px;
}

.groupnav { gap: .25rem; }

.groupnav a {
  font-family: var(--f-body);
  font-size: .86rem;
  font-weight: 700;
  letter-spacing: .015em;
  color: #a7abb3;
  border: 1px solid transparent;
  border-radius: 8px;
  padding: .42rem .7rem;
}

.groupnav a:hover {
  background: #2a1808;
  border-color: #ff7a1a;
  color: #f3f4f6;
}

.groupnav a[aria-current="true"] {
  background: #2a1808;
  border-color: #ff7a1a;
  color: #ff7a1a;
  font-weight: 800;
}

/* Later-loaded twin of app.css line ~180, which repaints the current group
   nav item inside its own dark media query. */
@media (prefers-color-scheme: dark) {
  .topbar { background: #121316; }
  .groupnav a[aria-current="true"] {
    background: #2a1808;
    color: #ff7a1a;
  }
}

/* Back to the dashboard. Styled after MUG's .dash-button so the two headers
   share one button language. Lives outside #groupnav on purpose: app.js
   rebuilds that nav's innerHTML on every route change. */
.backlink {
  flex: 0 0 auto;
  border: 1px solid #34373f;
  border-radius: 8px;
  background: #191b1f;
  color: #f3f4f6;
  padding: .4rem .7rem;
  font-size: .8rem;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: 0 1px 3px rgba(0,0,0,.4);
}

.backlink:hover {
  border-color: #ff7a1a;
  background: #2a1808;
  color: #f3f4f6;
}

.navtoggle {
  background: #191b1f;
  border: 1px solid #34373f;
  border-radius: 8px;
  color: #f3f4f6;
}

.navtoggle:hover {
  border-color: #ff7a1a;
  background: #2a1808;
}

/* The sub nav drops to the page colour, the way MUG's .dash-tabs strip sits
   on the page rather than on the header panel. */
.subnav {
  background: #0a0b0d;
  border-bottom: 1px solid #26282e;
}

.subnav a { color: #a7abb3; }
.subnav a:hover { color: #f3f4f6; }

.subnav a[aria-current="true"] {
  color: #ff7a1a;
  border-bottom-color: #ff7a1a;
}

.foot {
  color: #71757d;
  border-top: 1px solid #26282e;
}

/* At the mobile breakpoint app.css collapses .groupnav behind .navtoggle.
   Ordering keeps the back link on the header's first line with the toggle,
   and lets the opened group nav wrap cleanly underneath. */
@media (max-width: 860px) {
  .backlink { order: 2; }
  .navtoggle { order: 3; }
  .groupnav { order: 4; }
}

/* ==========================================================================
   PRINT
   Label sheets, QR tags and delivery labels are the reason this app exists on
   paper, and they must stay dark-on-light. The label markup uses literal
   #fff/#000, but printed panels, tables and body copy read the tokens above,
   which would send light grey text to a white page. Restore the upstream
   light palette for print only. app.css's own @media print rules (body,
   table.data th, flagged rows) still apply on top of these.
   ========================================================================== */

@media print {
  :root {
    --concrete:   #E9EAEC;
    --concrete-2: #DFE1E4;
    --slab:       #FFFFFF;
    --ink:        #12151A;
    --ink-2:      #4A525E;
    --ink-3:      #79828F;
    --rule:       #CFD3D8;
    --rule-soft:  #E4E6E9;
    --blueprint:  #17416E;
    --blueprint-2:#255C96;
    --blueprint-w:#E8EEF5;
    --hazard:     #D6252B;
    --hazard-w:   #FCEBEB;
    --amber:      #F2B300;
    --amber-w:    #FDF4DC;
    --amber-ink:  #7A5A00;
    --go:         #1B7F4E;
    --go-w:       #E7F4ED;
    --flag:       #E2650C;
    --flag-w:     #FDF0E4;

    --f-queued:   #5A6470;   --f-queued-w:   #E6E8EB;
    --f-pulling:  #17416E;   --f-pulling-w:  #E4ECF5;
    --f-transit:  #0A6A8A;   --f-transit-w:  #DFF1F7;
    --f-staging:  #8F6207;   --f-staging-w:  #FBF0D5;
    --f-delivered:#166B41;   --f-delivered-w:#E4F3EB;
    --f-cancelled:#626A73;   --f-cancelled-w:#EDEEF0;

    --shadow: none;
  }

  /* Brand fills are dark navy again on paper, so their ink goes back to white. */
  .btn-primary, .btn-primary:hover { color: #fff; }
  .btn-danger { color: #fff; }
}