/* ─────────────────────────────────────────────────────────────────────────────
   TradeConnex — the NEW LOOK (15 Oct 2026).
   The brief: keep every feature of the team dashboard, give it the look of the Selr
   workshop dashboard. This file is a skin over the existing pages, nothing more:
   it changes no page logic, no data and no navigation rules (model.js still
   decides who sees which link; newlook.js only moves those links into a sidebar).

   Everything is scoped under html.nl, which newlook.js sets. ?look=old on any
   address turns the skin off for that browser; ?look=new turns it back on.
   Loaded LAST in <head> so it wins over each page's own <style>.
   ───────────────────────────────────────────────────────────────────────────── */

@font-face { font-family: Manrope; src: url('/fonts/Manrope-var.woff2') format('woff2'); font-weight: 200 800; font-display: swap; }

html.nl {
  /* the workshop system, in TradeConnex blue */
  --nl-ground: #EEF2F7;
  --nl-surface: #FFFFFF;
  --nl-side: #F6F8FB;
  --nl-ink: #24272C;
  --nl-ink-soft: #5A5D61;
  --nl-ink-mute: #6B6D71;
  --nl-ink-faint: #A4A6A9;
  --nl-hair: rgba(36, 39, 44, .10);
  --nl-hair-soft: rgba(36, 39, 44, .06);
  --nl-accent: #0065E4;
  --nl-accent-100: #E8F1FF;
  --nl-accent-700: #0050BA;
  --nl-dark: #112967;          /* TradeConnex Navy */
  --nl-dark-2: #0A1830;        /* the dashboard's header gradient stop */
  --nl-r: 24px;
  --nl-r-card: 20px;
  --nl-r-ctl: 14px;
  --nl-side-w: 232px;
  --nl-gap: 20px;
  --nl-font: Manrope, ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  /* re-point the dashboard's own tokens (styles.css + page :root blocks) so every page follows */
  --bg: var(--nl-ground);
  --ink: var(--nl-ink);
  --muted: var(--nl-ink-mute);
  --line: var(--nl-hair);
  --card: var(--nl-surface);
}

html.nl body {
  font-family: var(--nl-font);
  background: var(--nl-ground);
  color: var(--nl-ink);
  -webkit-font-smoothing: antialiased;
  letter-spacing: -.005em;
}
html.nl button, html.nl input, html.nl select, html.nl textarea { font-family: inherit; }
html.nl h1, html.nl h2, html.nl h3 { letter-spacing: -.02em; }

/* ── the sidebar (desktop) ─────────────────────────────────────────────────── */
html.nl.nl-hasnav body { padding-left: calc(var(--nl-side-w) + var(--nl-gap) * 2); }
.nl-side {
  position: fixed; left: var(--nl-gap); top: var(--nl-gap); bottom: var(--nl-gap); width: var(--nl-side-w); z-index: 40;
  display: flex; flex-direction: column; gap: 2px; padding: 14px 10px;
  background: var(--nl-side); border: 1px solid var(--nl-hair); border-radius: var(--nl-r);
  overflow-y: auto; scrollbar-width: none; font-family: var(--nl-font);
}
.nl-side::-webkit-scrollbar { display: none; }
.nl-side .nl-brand { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 4px 6px 10px; text-decoration: none; }
.nl-side .nl-plate { display: inline-flex; align-items: center; padding: 6px 6px; }
.nl-side .nl-plate img { height: 22px; width: auto; display: block; }
.nl-side .nl-tag { margin-left: 4px; border: 1px solid var(--nl-hair); background: var(--nl-surface); border-radius: 999px; padding: 2px 8px; font-size: 11.5px; font-weight: 600; color: var(--nl-ink-mute); white-space: nowrap; }
.nl-side .nl-group { padding: 14px 12px 4px; font-size: 12px; font-weight: 600; color: var(--nl-ink-faint); }
/* 🧭 the menu in groups (19 Oct 2026): My day stays open; every other group is a 44px header button that folds it */
.nl-side .nl-sec, .nl-side .nl-links { display: flex; flex-direction: column; gap: 2px; }
.nl-side .nl-links[hidden] { display: none; }
.nl-side button.nl-group {
  display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; min-height: 44px; margin: 4px 0 0; padding: 0 12px;
  border: 0; border-radius: var(--nl-r-ctl); background: none; font: inherit; font-size: 12px; font-weight: 700; color: var(--nl-ink-mute);
  text-align: left; cursor: pointer; letter-spacing: 0;
}
.nl-side button.nl-group:hover { background: rgba(36, 39, 44, .05); color: var(--nl-ink); }
.nl-side button.nl-group:focus-visible { outline: 2px solid var(--nl-accent); outline-offset: 1px; }
.nl-side button.nl-group .nl-chev { font-size: 14px; line-height: 1; color: var(--nl-ink-faint); }
.nl-side button.nl-group[aria-expanded="true"] { color: var(--nl-ink); }
.nl-side a.nl-item {
  display: flex; align-items: center; gap: 9px; border-radius: var(--nl-r-ctl); padding: 7px 12px; min-height: 34px;
  font-size: 13.5px; font-weight: 600; color: var(--nl-ink-soft); text-decoration: none; letter-spacing: -.005em;
}
.nl-side a.nl-item .nl-ic { width: 18px; text-align: center; flex: 0 0 18px; font-size: 14px; line-height: 1; filter: saturate(.85); }
.nl-side a.nl-item:hover { background: rgba(36, 39, 44, .05); color: var(--nl-ink); }
.nl-side a.nl-item.active { background: var(--nl-accent-100); color: var(--nl-accent); font-weight: 700; box-shadow: inset 0 0 0 1px rgba(0, 101, 228, .28); }
.nl-side a.nl-item:focus-visible { outline: 2px solid var(--nl-accent); outline-offset: 1px; }
.nl-side .nl-foot { margin-top: auto; padding: 14px 4px 2px; display: flex; flex-direction: column; gap: 8px; }
.nl-side .nl-foot label { font-size: 12px; font-weight: 600; color: var(--nl-ink-faint); padding: 0 8px; }
.nl-side .nl-foot select { width: 100%; border-radius: var(--nl-r-ctl); border: 1px solid var(--nl-hair); background: var(--nl-surface); padding: 8px 10px; font: inherit; font-size: 13px; font-weight: 600; color: var(--nl-ink); }
.nl-side .nl-by { font-size: 11.5px; color: var(--nl-ink-faint); padding: 0 8px; }

/* the old dark bar and its Tools pop-up are drawn by model.js; on desktop the sidebar carries their links */
html.nl.nl-hasnav #q1nav, html.nl.nl-hasnav #navtoolsmenu { display: none !important; }

/* ── the page header: the dark card from the workshop's front page ─────────── */
html.nl .hero {
  background: linear-gradient(135deg, var(--nl-dark) 0%, var(--nl-dark-2) 100%) !important;
  border-radius: var(--nl-r);
  margin: var(--nl-gap) var(--nl-gap) 0;
  padding: 22px 26px !important;
  box-shadow: none;
}
html.nl.nl-hasnav .hero { margin-left: 0; }
html.nl .hero h1 { font-size: clamp(24px, 2.6vw, 34px); font-weight: 600; letter-spacing: -.025em; }
html.nl .hero .brand img { height: 22px; width: auto; }

/* ── content column ────────────────────────────────────────────────────────── */
html.nl.nl-hasnav .wrap { padding-left: 0; padding-right: var(--nl-gap); }
html.nl.nl-hasnav .savebar { left: calc(var(--nl-side-w) + var(--nl-gap) * 2 + (100vw - var(--nl-side-w) - var(--nl-gap) * 3) / 2); }

/* ── surfaces ──────────────────────────────────────────────────────────────── */
html.nl .card { border-radius: var(--nl-r-card); border: 1px solid var(--nl-hair); box-shadow: none; }
html.nl .tile { border-radius: 16px; border-color: var(--nl-hair); }
html.nl .panel, html.nl .modalcard { border-radius: var(--nl-r-card); }
html.nl .modalcard { box-shadow: 0 24px 60px rgba(36, 39, 44, .14), 0 6px 20px rgba(36, 39, 44, .08); }
html.nl .muted { color: var(--nl-ink-mute); }

/* ── controls ──────────────────────────────────────────────────────────────── */
html.nl .btn, html.nl .savebtn, html.nl .addbtn, html.nl .mbtn, html.nl .tabbtn, html.nl .btnghost, html.nl .ghost { border-radius: 999px; font-weight: 700; letter-spacing: -.005em; }
html.nl .pill, html.nl .chip, html.nl .tag2 { border-radius: 999px; }
html.nl input[type="text"], html.nl input[type="number"], html.nl input[type="email"], html.nl input[type="search"], html.nl input[type="tel"], html.nl input[type="date"], html.nl input:not([type]), html.nl select, html.nl textarea {
  border-radius: var(--nl-r-ctl);
  border-color: rgba(36, 39, 44, .14);
}
html.nl input:focus-visible, html.nl select:focus-visible, html.nl textarea:focus-visible { outline: 2px solid var(--nl-accent); outline-offset: 1px; }
html.nl table { border-color: var(--nl-hair); }
html.nl th { color: var(--nl-ink-mute); font-weight: 600; }

/* ── phones and narrow windows: the sidebar steps aside, the existing bar returns, restyled light ── */
@media (max-width: 900px) {
  .nl-side { display: none; }
  html.nl.nl-hasnav body { padding-left: 0; }
  html.nl.nl-hasnav #q1nav { display: flex !important; }
  /* 🧰 the Tools menu on a phone: visible only while open — 'display: revert' alone beat the hidden attribute, so the menu
     stuck on screen after a tap outside, and showed on short pages nobody had opened it on (sweep, 19 Oct 2026) */
  html.nl.nl-hasnav #navtoolsmenu:not([hidden]) { display: revert !important; }
  html.nl.nl-hasnav #navtoolsmenu[hidden] { display: none !important; }
  html.nl.nl-hasnav .hero { margin: 12px 12px 0; padding: 18px 18px !important; }
  html.nl.nl-hasnav .wrap { padding-left: 12px; padding-right: 12px; }
  html.nl .q1nav { background: var(--nl-surface) !important; border: 1px solid var(--nl-hair); border-radius: 999px; margin: 10px 12px 0; padding: 4px 6px !important; }
  html.nl .q1nav a, html.nl .q1nav .toolsbtn { color: var(--nl-ink-soft) !important; min-height: 40px; padding: 9px 14px !important; }
  html.nl .q1nav a.active, html.nl .q1nav .toolsbtn.active { background: var(--nl-accent-100) !important; color: var(--nl-accent) !important; }
  html.nl .q1nav select { border-color: var(--nl-hair); }
}
/* 💾 the floating save bar (Week tab, TOPs): centred between 760 and 900px like the desktop rule expects; full width below 760px,
   where 'left: 50%' with no transform left it as a narrow column over the right half of a phone and on top of the leave
   "Save dates" button (sweep, 19 Oct 2026). From 760px up it is as wide as the cards: 'right: 0' used to stay on, squashing it to a
   half-width box over the number rows (594px at 1440, 410px at 820 — "looks stretched", 20 Oct 2026) */
@media (min-width: 901px) { html.nl.nl-hasnav .savebar { right: auto; width: min(calc(1120px - var(--nl-gap)), calc(100vw - var(--nl-side-w) - var(--nl-gap) * 3)); } }
@media (min-width: 760px) and (max-width: 900px) { html.nl.nl-hasnav .savebar { left: 50%; right: auto; width: calc(100vw - 24px); } }
@media (max-width: 759px) { html.nl.nl-hasnav .savebar { left: 0; right: 0; max-width: none; transform: none; border-radius: 0; } }

@media (prefers-reduced-motion: reduce) { html.nl * { transition: none !important; } }