/* ===================================================================
   USA Container Pros - visual system
   -------------------------------------------------------------------
   Palette: deep navy chrome, one confident blue for action, red for
   emphasis and alarm, cool silver neutrals for everything else.

   IMPORTANT FOR ANYONE EDITING THIS FILE
   This stylesheet was restyled without moving anything. Every selector,
   width, padding, gap and grid definition is unchanged from the version
   before it - only colour, typography, corner radius and shadow differ.
   Layout faults in this app are invisible to the test suite (jsdom has
   no layout engine), so geometry changes need a person looking at a
   screen. Keep that split: recolour freely here, move things
   deliberately.

   The legacy variable names (--navy, --green, --gold) are kept because
   the page JavaScript references them inline in 120-odd places. They
   now point at the new palette rather than their original colours, so
   --green is no longer green. New work should use the semantic names.
   =================================================================== */

:root {
  /* Brand */
  --navy: #0b2545;
  --navy-dark: #061a30;
  --blue: #1f5fd6;
  --blue-hover: #1a4fb4;
  --blue-light: #eaf1fd;
  --red: #c8102e;
  --red-dark: #8e0b20;
  --red-light: #fdecef;

  /* Silver neutrals */
  --grey-bg: #f2f5f9;
  --surface: #ffffff;
  --silver: #edf1f6;
  --silver-deep: #e2e8f1;
  --border: #dce3ec;
  --border-strong: #c3cddb;

  /* Text */
  --text: #0e1726;
  --ink: #0e1726;
  --text-muted: #5b6b80;
  --text-subtle: #7c8a9c;

  /* Status - these carry meaning and stay distinguishable */
  --success: #1b6b48;
  --success-light: #e9f4ee;
  --warning: #8a5a00;
  --warning-light: #fdf3e3;

  /* Legacy aliases referenced inline by the page JS */
  --green: #1f5fd6;
  --green-light: #edf1f6;
  --gold: #1f5fd6;
  --gold-light: #fdf3e3;

  /* Elevation */
  --shadow-sm: 0 1px 2px rgba(11, 37, 69, 0.06);
  --shadow: 0 1px 3px rgba(11, 37, 69, 0.08), 0 1px 2px rgba(11, 37, 69, 0.04);
  --shadow-lg: 0 10px 30px rgba(11, 37, 69, 0.12), 0 2px 8px rgba(11, 37, 69, 0.06);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  background: var(--grey-bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

#app { min-height: 100vh; display: flex; flex-direction: column; }

/* ---------- Top bar ---------- */
.topbar {
  background: var(--surface);
  /* The hairline is an inset shadow rather than a border so the bar
     stays exactly 56px - a real border would push the nav down 1px. */
  box-shadow: inset 0 -1px 0 var(--border), 0 1px 3px rgba(11, 37, 69, 0.07);
  position: relative;
  z-index: 3;
  color: var(--navy);
  padding: 0 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 56px;
  flex-shrink: 0;
}
.topbar .brand { font-size: 18px; font-weight: 700; display: flex; align-items: center; letter-spacing: -0.01em; color: var(--navy); }
/* The logo sits inside .brand, so it must NOT be a <span> - the rule
   below colours every span in here, and wrapping the text in one to make
   room for the logo recoloured the whole brand and broke the topbar's
   fixed-height flex row. */
.topbar .brand-logo { height: 30px; width: auto; margin-right: 9px; flex: none; }
/* The brand is a flex row, so the whitespace between the "USA Container
   Pros" text node and this span is discarded - flex containers strip
   whitespace between items. That rendered as "USA Container
   ProsOperations". The gap has to come from a margin rather than a
   space in the markup, and it cannot come from gap: on .brand, because
   that would also push the logo away from the text. */
.topbar .brand span { color: var(--blue); margin-left: 7px; font-weight: 600; }
.topbar .user-info { display: flex; align-items: center; gap: 14px; font-size: 14px; color: var(--text-muted); }
.topbar button.logout {
  background: transparent; border: 1px solid var(--border-strong); color: var(--navy);
  padding: 6px 14px; border-radius: 6px; cursor: pointer; font-size: 13px; font-weight: 600;
  transition: background 120ms ease, border-color 120ms ease;
}
.topbar button.logout:hover { background: var(--silver); border-color: var(--blue); color: var(--blue); }

/* ---------- Nav ---------- */
.nav {
  background: var(--navy-dark);
  display: flex;
  justify-content: center;
  gap: 2px;
  padding: 0 20px;
  overflow-x: auto;
  flex-shrink: 0;
}
.nav a {
  color: #b8c8e4;
  text-decoration: none;
  padding: 10px 16px;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  border-bottom: 3px solid transparent;
}
.nav a:hover { background: rgba(255,255,255,0.06); color: #fff; }
.nav a.active { color: white; border-bottom-color: var(--red); }

/* ---------- App body (sidebar + main content side by side) ---------- */
.app-body { flex: 1; display: flex; min-height: 0; }

/* ---------- Sidebar ---------- */
.sidebar {
  background: var(--navy-dark);
  width: 240px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  padding: 8px 0;
  overflow-y: auto;
}
.sidebar-group-label {
  color: #7f95ba;
  text-transform: uppercase;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 16px 20px 6px;
}
.sidebar-group-label:first-child { padding-top: 10px; }
.sidebar a {
  color: #c6d4ea;
  text-decoration: none;
  padding: 10px 20px;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  border-left: 3px solid transparent;
}
.sidebar a:hover { background: rgba(255,255,255,0.08); }
.sidebar a.active { color: white; background: rgba(255,255,255,0.08); border-left-color: var(--blue); }

/* ---------- Main content ---------- */
main { flex: 1; padding: 24px; width: 100%; margin: 0 auto; min-width: 0; overflow-x: auto; }

h1 { font-size: 22px; color: var(--navy); margin: 0 0 4px; font-weight: 700; letter-spacing: -0.015em; }
h2 { font-size: 16px; color: var(--navy); margin: 24px 0 10px; font-weight: 700; letter-spacing: -0.01em; }
.subtitle { color: var(--text-muted); font-size: 13px; margin-bottom: 20px; }

/* ---------- Login ---------- */
.login-wrap {
  display: flex; align-items: center; justify-content: center; flex: 1;
}
.login-card {
  background: white; border-radius: 12px; padding: 36px 40px; width: 360px;
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--border);
}
.login-card h1 { text-align: center; margin-bottom: 4px; }
.login-card .subtitle { text-align: center; margin-bottom: 24px; }
.login-card label { display: block; font-size: 13px; font-weight: 600; margin: 14px 0 4px; color: var(--navy); }
.login-card input {
  width: 100%; padding: 10px 12px; border: 1px solid var(--border-strong); border-radius: 8px; font-size: 14px;
  background: var(--surface); color: var(--text);
  transition: border-color 120ms ease, box-shadow 120ms ease;
}
.login-card input:focus {
  outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(31, 95, 214, 0.16);
}
.login-card button {
  width: 100%; margin-top: 20px; padding: 11px; background: var(--blue); color: white;
  border: none; border-radius: 8px; font-size: 14px; font-weight: 600; cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: background 120ms ease;
}
.login-card button:hover { background: var(--blue-hover); }
.login-error { color: var(--red); font-size: 13px; margin-top: 10px; text-align: center; }
.login-hint { font-size: 12px; color: var(--text-muted); text-align: center; margin-top: 16px; }

/* ---------- KPI cards ---------- */
.kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; margin-bottom: 20px; }
.kpi-card {
  background: white; border: 1px solid var(--border); border-radius: 10px; padding: 16px 18px;
  border-left: 4px solid var(--blue);
  box-shadow: var(--shadow-sm);
}
.kpi-card .label { font-size: 12px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.03em; font-weight: 600; }
.kpi-card .value { font-size: 24px; font-weight: 700; color: var(--navy); margin-top: 4px; letter-spacing: -0.02em; }
.kpi-card.alert { border-left-color: var(--red); }
.kpi-card.warn { border-left-color: var(--warning); }
.kpi-card.good { border-left-color: var(--success); }

/* ---------- Panels / cards ---------- */
.panel {
  background: white; border: 1px solid var(--border); border-radius: 10px; padding: 18px; margin-bottom: 20px;
  box-shadow: var(--shadow-sm);
}
.chart-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.chart-grid .panel canvas { max-height: 280px; }
@media (max-width: 900px) { .chart-grid { grid-template-columns: 1fr; } }

/* ---------- Toolbar ---------- */
.toolbar { display: flex; gap: 10px; align-items: center; margin-bottom: 14px; flex-wrap: wrap; }
.toolbar input, .toolbar select {
  padding: 8px 10px; border: 1px solid var(--border-strong); border-radius: 8px; font-size: 13px;
  background: var(--surface); color: var(--text);
  transition: border-color 120ms ease, box-shadow 120ms ease;
}
.toolbar input:focus, .toolbar select:focus {
  outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(31, 95, 214, 0.16);
}
.toolbar .spacer { flex: 1; }
.btn {
  padding: 9px 16px; border-radius: 8px; border: none; font-size: 13px; font-weight: 600; cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease, box-shadow 120ms ease;
}
.btn-primary { background: var(--blue); color: white; box-shadow: var(--shadow-sm); }
.btn-primary:hover { background: var(--blue-hover); }
.btn-secondary { background: white; color: var(--navy); border: 1px solid var(--border-strong); box-shadow: var(--shadow-sm); }
.btn-secondary:hover { background: var(--silver); border-color: var(--blue); color: var(--blue); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* ---------- Table ---------- */
.table-wrap { overflow-x: auto; background: white; border: 1px solid var(--border); border-radius: 10px; box-shadow: var(--shadow-sm); }
table { border-collapse: collapse; width: 100%; font-size: 13px; }
thead th {
  background: var(--navy); color: white; text-align: left; padding: 10px 12px;
  position: sticky; top: 0; white-space: nowrap;
  font-weight: 600; letter-spacing: 0.01em;
}
tbody td { padding: 8px 12px; border-bottom: 1px solid var(--border); white-space: nowrap; }
tbody tr:nth-child(even) { background: #f8fafc; }
tbody tr:hover { background: var(--blue-light); cursor: pointer; }
.pill {
  display: inline-block; padding: 2px 9px; border-radius: 10px; font-size: 11px; font-weight: 700;
}
.pill.current, .pill.instock, .pill.complete { background: var(--success-light); color: var(--success); }
.pill.pastdue, .pill.needsreview { background: var(--warning-light); color: var(--warning); }
.pill.overdue, .pill.closed { background: var(--red-light); color: var(--red); }
.pill.inprogress, .pill.unassigned { background: var(--blue-light); color: var(--blue); }

.pagination { display: flex; justify-content: space-between; align-items: center; padding: 10px 12px; font-size: 12px; color: var(--text-muted); }
/* The assistant launcher is pinned bottom-right and was sitting on top
   of the Next button. Reserve room below the last thing on the page so
   nothing ends up underneath it. Applied to main rather than to the
   pager alone, because anything at the foot of a page has the same
   problem. */
main { padding-bottom: 84px; }
/* On a narrow screen the launcher is wider relative to the page, so the
   pager wraps above it instead of sitting alongside. */
@media (max-width: 720px) {
  .pagination { flex-wrap: wrap; gap: 8px; padding-bottom: 16px; }
  main { padding-bottom: 96px; }
}

/* ---------- Forms / modal ---------- */
.modal-backdrop {
  position: fixed; inset: 0; background: rgba(6, 26, 48, 0.55); display: flex; align-items: center;
  justify-content: center; z-index: 100; padding: 20px;
}
.modal {
  background: white; border-radius: 12px; width: 560px; max-width: 100%; max-height: 90vh; overflow-y: auto;
  box-shadow: var(--shadow-lg);
}
/* Work orders and other record views carry two columns of fields, fee
   tables, and a sidebar - 560px squeezed all of that into a narrow
   column. These get most of the screen instead. */
.modal.modal-wide { width: 1100px; }
.modal.modal-xwide { width: 1400px; max-height: 94vh; }
@media (max-width: 1200px) {
  .modal.modal-wide, .modal.modal-xwide { width: 100%; }
}
.modal-header {
  background: linear-gradient(180deg, #123157 0%, var(--navy) 100%); color: white; padding: 14px 20px; border-radius: 12px 12px 0 0;
  display: flex; justify-content: space-between; align-items: center;
}
.modal-header h3 { margin: 0; font-size: 16px; font-weight: 700; letter-spacing: -0.01em; }
.modal-header button { background: none; border: none; color: white; font-size: 20px; cursor: pointer; }
.modal-body { padding: 20px; }
.form-row { margin-bottom: 14px; }
.form-row label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 5px; color: var(--navy); }
.form-row .req { color: var(--red); }
.form-row input, .form-row select, .form-row textarea {
  width: 100%; padding: 9px 10px; border: 1px solid var(--border-strong); border-radius: 8px; font-size: 13px;
  /* White on a grey page, with a border strong enough to read as an
     input. A silver fill here sat too close to the page background and
     the fields disappeared. */
  background: var(--surface);
  color: var(--text);
  transition: border-color 120ms ease, box-shadow 120ms ease, background 120ms ease;
}
.form-row input:focus, .form-row select:focus, .form-row textarea:focus {
  outline: none; border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(31, 95, 214, 0.16);
}
.form-row textarea { resize: vertical; min-height: 60px; }
.form-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 18px; }
.form-error { background: var(--red-light); color: var(--red); padding: 10px 12px; border-radius: 8px; font-size: 13px; margin-bottom: 14px; }
.form-warning { background: var(--warning-light); color: var(--warning); padding: 10px 12px; border-radius: 8px; font-size: 13px; margin-bottom: 14px; }

/* ---------- Detail drawer ---------- */
.detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 20px; }
.detail-grid .field label { font-size: 11px; text-transform: uppercase; color: var(--text-muted); display: block; font-weight: 600; letter-spacing: 0.03em; }
.detail-grid .field div.val { font-size: 14px; margin-top: 2px; }

/* ---------- Misc ---------- */
.loading { text-align: center; padding: 40px; color: var(--text-muted); }
.empty { text-align: center; padding: 30px; color: var(--text-muted); font-style: italic; }
.section-header {
  background: linear-gradient(180deg, #16386a 0%, var(--navy) 100%);
  color: #fff;
  padding: 10px 14px;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .02em;
  border-radius: 8px;
  margin: 20px 0 12px;
  box-shadow: var(--shadow-sm);
}
/* The first heading in a panel or tab should not push the whole block
   down - it has the panel's own padding above it already. */
.section-header:first-child { margin-top: 0; }
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
@media (max-width: 900px) { .two-col { grid-template-columns: 1fr; } }
.badge-role {
  /* Only used in the topbar, which is now white - this needs a light
     background rather than the translucent white it carried on navy. */
  background: var(--blue-light); color: var(--blue); padding: 2px 8px; border-radius: 10px; font-size: 11px; font-weight: 600;
}

/* ---------- Work Orders ---------- */
.wo-tabs { display: flex; gap: 2px; margin: 14px 0 0; border-bottom: 2px solid var(--border); flex-wrap: wrap; }
.wo-tab {
  flex: 1 1 140px; padding: 10px 12px; background: var(--silver); border: 1px solid var(--border);
  border-bottom: none; border-radius: 8px 8px 0 0; cursor: pointer; font-size: 13px;
  font-weight: 600; color: var(--text-muted);
}
.wo-tab.active { background: white; border-bottom: 2px solid white; margin-bottom: -2px; color: var(--blue); }
.wo-tab:hover { background: var(--silver-deep); }
.wo-layout { display: grid; grid-template-columns: 1fr 300px; gap: 16px; margin-top: 16px; align-items: start; }
@media (max-width: 900px) { .wo-layout { grid-template-columns: 1fr; } }
.wo-main { min-width: 0; }
.wo-totals { background: linear-gradient(180deg, #123157 0%, var(--navy-dark) 100%); border-radius: 10px; overflow: hidden; box-shadow: var(--shadow); }
.wo-total-row {
  display: flex; justify-content: space-between; padding: 10px 14px; color: white;
  font-size: 13px; border-bottom: 1px solid rgba(255,255,255,0.10);
}
.wo-total-row:last-child { border-bottom: none; }
.wo-total-row.grand { color: #8fb4f5; font-weight: 700; font-size: 14px; }
.wo-field { margin-bottom: 10px; font-size: 13px; }
.wo-field label { display: block; font-weight: 600; color: var(--text); margin-bottom: 2px; }
.wo-field div { color: var(--text-muted); }
.wo-toggles { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 8px; margin-bottom: 8px; }
.wo-toggle { display: flex; align-items: center; gap: 8px; font-size: 13px; padding: 6px 0; }
.wo-toggle input { width: 18px; height: 18px; flex: 0 0 18px; accent-color: var(--blue); }
.wo-photos { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
.wo-photo img { width: 100%; height: 110px; object-fit: cover; border-radius: 8px; border: 1px solid var(--border); }
.wo-photo .cap { font-size: 11px; margin-top: 2px; }

/* ---------- Admin top nav ---------- */
.admin-nav {
  background: var(--navy-dark);
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 0 20px;
  overflow-x: auto;
  flex-shrink: 0;
  border-bottom: 2px solid var(--red);
}
.admin-nav-label {
  color: #8fb4f5;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-right: 14px;
  white-space: nowrap;
}
.admin-nav a {
  color: #c6d4ea;
  text-decoration: none;
  padding: 9px 14px;
  font-size: 13px;
  white-space: nowrap;
  border-bottom: 3px solid transparent;
}
.admin-nav a:hover { background: rgba(255,255,255,0.06); color: #fff; }
.admin-nav a.active { color: #fff; border-bottom-color: var(--red); font-weight: 600; }



/* Sidebar links: dense enough to show every page without scrolling on a
   normal screen, with clear group headings to scan by. */
.sidebar-group-label {
  padding: 13px 16px 5px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: #7f95ba;
  opacity: 1;
}
.sidebar-group-label:first-child { padding-top: 8px; }
.sidebar a {
  display: block;
  padding: 7px 16px 7px 20px;
  color: rgba(214, 226, 245, .88);
  text-decoration: none;
  font-size: 13px;
  line-height: 1.35;
  border-left: 3px solid transparent;
  transition: background 120ms ease, color 120ms ease;
}
.sidebar a:hover { background: rgba(255, 255, 255, .07); color: #fff; }
.sidebar a.active {
  background: var(--blue);
  color: #fff;
  font-weight: 600;
  border-left-color: #fff;
}

/* Payment Details toggles: a six-up grid so the switches read as one
   block rather than a column of unrelated checkboxes. */
.wo-toggle-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 8px 20px;
}
.section-header.collapsible {
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  user-select: none;
}
.section-header.collapsible:hover { color: #8fb4f5; }
@media (max-width: 640px) {
  .wo-toggle-grid { grid-template-columns: 1fr; }
}

/* Quote form: collapsible sections and a three-up row for short fields.
   The heading keeps the green bar's own padding - an earlier override
   set padding to 12px 0, which stripped the horizontal padding and left
   the text flush against the left edge of the bar. */
/* Collapsible sections deliberately do NOT override padding or margin -
   an earlier version set padding to 12px 0, which stripped the
   horizontal padding and left the heading text flush against the left
   edge of the green bar. */
.wo-section { margin-bottom: 20px; }
.wo-section:first-of-type > .section-header { margin-top: 0; }
.wo-section .chev {
  font-size: 16px;
  line-height: 1;
  opacity: .8;
  padding-left: 12px;
  font-weight: 400;
}
/* Fields sit slightly inset from the bar above them. */
.wo-section > div:not(.section-header) { padding: 0 2px; }
.three-col { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 14px; }
@media (max-width: 640px) { .three-col { grid-template-columns: 1fr; } }


/* The assistant launcher hides while a modal is open - it sits above the
   page, and floating over a dialog blocks whatever is underneath. */
body:has(.modal-backdrop) .asst-launcher { display: none !important; }