/* Colours pulled straight from the Loftman logo (static/logo.svg):
   navy #1D2D4D / #1E4A86 (gradient), blue #1D4A87, light blue #94B1D6.
   Navy = structural chrome (header, dark text). Blue = interactive/brand
   accent (buttons, active states, links). Light blue = subtle tints
   (badges, hover backgrounds, focus rings). Gavin (2026-07-22): "add a bit
   more colour... using our branding colours from our logo". */
:root {
  --navy: #1d2d4d;
  --navy-2: #1e4a86;
  --blue: #1d4a87;
  --blue-light: #94b1d6;
  --blue-tint: #eaf1fb;
  --bg: #f4f6f9;
  --card: #ffffff;
  --border: #e1e7ee;
  --text: #1c2b33;
  --muted: #64748b;
  --danger: #c0392b;
  --success: #1e8449;
  --amber: #b45309;
}

* { box-sizing: border-box; }

/* Quiet corner link for internal/developer tools (2026-07-23, Gavin: "i
   dont really want to see it at the top") — kept out of the main nav, small
   and muted so it doesn't compete for attention with the real workflow. */
.footer-tools {
  text-align: center;
  padding: 28px 0 18px;
}
.footer-tools a {
  font-size: 11px;
  color: var(--muted);
  text-decoration: none;
  opacity: .7;
}
.footer-tools a:hover {
  text-decoration: underline;
  opacity: 1;
}

/* Browsers don't inherit the body font into form controls by default —
   buttons/inputs/selects would otherwise render in the OS UI font instead
   of matching the rest of the page. Gavin: "can we have all fonts the
   same". The Query Tester's query box and result panel stay monospace on
   purpose (they hold raw GraphQL code), so they're deliberately excluded. */
button, input, select, textarea {
  font-family: inherit;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
  margin: 0;
}

header.topbar {
  background: linear-gradient(135deg, var(--navy), var(--navy-2));
  color: white;
  padding: 16px 28px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 16px;
  box-shadow: 0 2px 8px rgba(29, 45, 77, .18);
}

header.topbar .brand { display: flex; align-items: center; gap: 14px; justify-self: start; }
header.topbar .home-link {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--blue-light);
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
  padding: 6px 12px;
  border-radius: 6px;
  border: 1px solid rgba(255,255,255,.18);
  transition: color .15s, border-color .15s;
  justify-self: center;
}
header.topbar .home-link:hover { color: white; border-color: rgba(255,255,255,.4); }
header.topbar nav { justify-self: end; }
header.topbar .logo-badge {
  display: flex;
  align-items: center;
  background: #ffffff;
  border-radius: 8px;
  padding: 6px 10px;
  line-height: 0;
}
header.topbar .logo-badge img { height: 30px; width: auto; display: block; }
header.topbar h1 { font-size: 16px; margin: 0; font-weight: 600; color: var(--blue-light); }
header.topbar nav a {
  color: var(--blue-light);
  text-decoration: none;
  margin-left: 20px;
  font-size: 14px;
  transition: color .15s;
}
header.topbar nav a:hover { color: white; }
header.topbar nav .admin-name {
  margin-left: 20px;
  font-size: 13px;
  color: rgba(255,255,255,.6);
}
header.topbar nav .nav-logout-btn {
  margin-left: 8px;
  background: none;
  border: 1px solid rgba(255,255,255,.25);
  color: var(--blue-light);
  font-size: 12px;
  padding: 4px 10px;
  border-radius: 6px;
  cursor: pointer;
  transition: color .15s, border-color .15s;
}
header.topbar nav .nav-logout-btn:hover { color: white; border-color: rgba(255,255,255,.5); }

/* Gavin (2026-08-06): "make it all Wide screen the framing - so its full
   view not just in the one area" — main wraps every page's content
   (sitewide, via base.html), and was capped at a fairly narrow 980px
   regardless of how wide the actual browser window was. Now scales with
   the window (96% of it) up to a much more generous cap, so wide tables
   (the stock ledger, picking grids, etc.) actually get to use a big
   monitor instead of being squeezed into a narrow centred column. Still
   capped rather than truly edge-to-edge, so text-heavy pages don't end
   up with uncomfortably long line lengths on an ultra-wide screen. */
main { max-width: 1800px; width: 96%; margin: 0 auto; padding: 28px; }

/* Gavin (2026-07-24): "the back button move it so its out the way" — Back
   is now its own row, always above the toolbar block (tabs etc.), instead
   of absolutely-positioned/vertically-centered inside the same box —
   that only worked while every page's toolbar was a single row; once a
   page grew 2-3 stacked rows (branch.html, forward_planning.html,
   picking_list.html) Back ended up overlapping somewhere in the middle. */
.page-back-row { margin-bottom: 10px; }

.page-toolbar {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
}

.back-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: none;
  border: none;
  color: var(--blue);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  padding: 0;
}
.back-btn:hover { text-decoration: underline; }

.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 22px 26px;
  margin-bottom: 20px;
  box-shadow: 0 1px 3px rgba(29, 45, 77, .06);
}

h2 { margin-top: 0; font-size: 17px; color: var(--navy); }
h3 { font-size: 15px; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }

table { width: 100%; border-collapse: collapse; font-size: 14px; }
th, td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--border); }
th { color: var(--muted); font-weight: 600; font-size: 12px; text-transform: uppercase; }
tr:last-child td { border-bottom: none; }

.btn {
  display: inline-block;
  background: var(--blue);
  color: white;
  border: none;
  padding: 10px 18px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  transition: filter .15s, background .15s;
}
.btn:hover { filter: brightness(0.92); }
.btn.secondary { background: var(--blue-tint); color: var(--blue); border: 1px solid var(--blue-light); }
.btn.secondary:hover { background: var(--blue-light); color: white; filter: none; }
.btn.muted { background: var(--muted); }
.btn.danger { background: var(--danger); }

input[type=text], input[type=number], input[type=date], select, textarea {
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 14px;
  width: 100%;
  transition: border-color .15s, box-shadow .15s;
}
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--blue);
  box-shadow: 0 0 0 3px var(--blue-tint);
}

label { display: block; font-size: 13px; color: var(--muted); margin-bottom: 4px; margin-top: 10px; }

.flash { padding: 12px 16px; border-radius: 8px; margin-bottom: 16px; font-size: 14px; }
.flash.error { background: #fceae8; color: var(--danger); border: 1px solid #f0c4bd; }
.flash.success { background: #e9f7ee; color: var(--success); border: 1px solid #bfe3cb; }

.badge { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 12px; font-weight: 600; }
.badge.warn { background: #fdf0dd; color: #9c5c0c; }
.badge.ok { background: #e9f7ee; color: var(--success); }
.badge.draft { background: var(--blue-tint); color: var(--blue); }
.badge.picked { background: #e9f7ee; color: var(--success); }
.badge.danger { background: #fceae8; color: var(--danger); }
.flag-text { color: var(--danger); font-weight: 700; }

.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.muted { color: var(--muted); }
.right { text-align: right; }

pre.result {
  background: var(--navy);
  color: var(--blue-light);
  padding: 16px;
  border-radius: 8px;
  overflow-x: auto;
  font-size: 13px;
}

/* Gavin (2026-07-24): "what about making these have some colour" — the
   depot switcher tabs (top of each branch page / Inventory) were all the
   same blue-tint chip. Each depot now gets its own colour so they're
   distinguishable at a glance, same idea as the coloured hub-tiles on the
   home page; Combined gets the navy/blue gradient used in the header,
   since it's the "all of them" option rather than a depot in its own
   right. Two-class selectors here (.branch-tab.tab-x) so they win over the
   plain .branch-tab rule each template already defines locally, whichever
   order the <style> blocks land in. */
.branch-tab.tab-solihull { background: var(--blue-tint); color: var(--blue); }
.branch-tab.tab-solihull:hover { background: var(--blue-light); color: #fff; }
.branch-tab.tab-solihull.active { background: var(--blue); color: #fff; }

.branch-tab.tab-telford { background: #e9f7ee; color: var(--success); }
.branch-tab.tab-telford:hover { background: #bfe3cb; color: #fff; }
.branch-tab.tab-telford.active { background: var(--success); color: #fff; }

.branch-tab.tab-manchester { background: #fdf0dd; color: #9c5c0c; }
.branch-tab.tab-manchester:hover { background: #f3d9ad; color: #fff; }
.branch-tab.tab-manchester.active { background: var(--amber); color: #fff; }

.branch-tab.tab-slough { background: #e7e9f1; color: var(--navy); }
.branch-tab.tab-slough:hover { background: #c7cce3; color: #fff; }
.branch-tab.tab-slough.active { background: var(--navy); color: #fff; }

.branch-tab.tab-combined {
  background: linear-gradient(135deg, var(--navy), var(--navy-2));
  color: #fff;
}
.branch-tab.tab-combined:hover { filter: brightness(1.12); color: #fff; }
.branch-tab.tab-combined.active { filter: brightness(1.12); }

/* Gavin (2026-07-24): "now to make it look more pleasing... lets say
   everywhere... can we add some graphics in these places too" — a single
   reusable "page hero" header (coloured accent border + icon badge +
   title + description), generalised from the depot-hero/step-card pattern
   already proven out on branch.html and forward_planning.html, now
   available globally so every secondary page picks it up too instead of
   a plain black-and-white <h2>. Local per-template .depot-hero rules
   still work exactly as before (more specific selector wins) — this
   doesn't touch pages that already built their own version. */
.page-hero {
  display: flex;
  align-items: center;
  gap: 16px;
  border-top: 4px solid var(--blue);
}
.page-hero-icon {
  display: flex; align-items: center; justify-content: center; flex: none;
  width: 44px; height: 44px; border-radius: 10px;
  background: var(--blue-tint); color: var(--blue);
}
.page-hero-icon svg { width: 24px; height: 24px; }
.page-hero h2 { margin: 0; }
.page-hero p.muted { margin: 6px 0 0; }

.page-hero.accent-amber { border-top-color: var(--amber); }
.page-hero.accent-amber .page-hero-icon { background: #fdf0dd; color: var(--amber); }
.page-hero.accent-success { border-top-color: var(--success); }
.page-hero.accent-success .page-hero-icon { background: #e9f7ee; color: var(--success); }
.page-hero.accent-danger { border-top-color: var(--danger); }
.page-hero.accent-danger .page-hero-icon { background: #fceae8; color: var(--danger); }
.page-hero.accent-navy { border-top-color: var(--navy-2); }
.page-hero.accent-navy .page-hero-icon { background: var(--blue-tint); color: var(--navy-2); }