/* ============================================================
   CuestVanguard
   ============================================================
   Design intent: this is an instrument, not a consumer app.
   Flat surfaces, hairline rules instead of drop shadows, small
   corner radii, muted status colours, and dense type. Decoration
   is deliberately absent - the data is the interface.
   ============================================================ */

:root {
  /* Cuest Corp's actual navy, off the logo. Full strength in the chrome:
     the header, sidebar selection and primary buttons are where brand
     colour belongs. Status pills stay muted - see below. */
  --primary: #003467;
  --primary-hover: #00264d;
  --accent: #00539e;

  --bg: #fafaf9;
  --surface: #ffffff;
  --surface-alt: #fbfbfa;

  --text: #1c1c1a;
  --text-secondary: #44443f;
  --muted: #8a8a85;

  --border: #e4e4e2;
  --border-strong: #d4d4d0;

  --radius: 4px;

  /* Status tones. Desaturated on purpose - a traffic-light green
     shouts, and everything shouting means nothing reads as urgent. */
  --ok-bg: #eef4ed;      --ok-text: #2f5d3a;
  --warn-bg: #f6f1e6;    --warn-text: #6b5320;
  --danger-bg: #f6ecec;  --danger-text: #7a3030;
  --info-bg: #eef2f6;    --info-text: #26415c;
  --neutral-bg: #f1f1ef; --neutral-text: #55554f;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 13px;
  line-height: 1.5;
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}

/* ---------- header ---------- */
.app-header {
  background: var(--primary);
  color: #fff;
  padding: 0 16px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: sticky;
  top: 0;
  z-index: 20;
}

.app-header .brand { display: flex; align-items: center; gap: 9px; min-width: 0; }

/* The CuestVanguard mark. Slightly taller than the wordmark's cap height so
   the chevrons read as a mark rather than as a letter. */
.app-header .brand-mark { height: 24px; width: 24px; display: block; flex: none; }

/* Franklin Gothic ships with Microsoft Office, so it is present on every
   machine here. Arial Narrow then Arial hold the same proportions elsewhere
   (iPhones fall through to Helvetica, which is close enough). */
.app-header h1 {
  font-family: 'Franklin Gothic Medium', 'Franklin Gothic', Arial, Helvetica, sans-serif;
  font-size: 16px;
  margin: 0;
  font-weight: 500;
  letter-spacing: -0.005em;
  white-space: nowrap;
}

/* Hairline divider, then the parent company. The product is the headline;
   the company signs it.

   This is set as text rather than the full Cuest Corp logo on purpose: that
   logo carries the 8(a) certification badge, whose fine print is illegible
   at any size a 48px header allows and just reads as noise. The logo itself
   is untouched and still goes out on email (see mailer.js) and print. */
.app-header .brand-rule {
  width: 1px;
  height: 18px;
  background: rgba(255, 255, 255, 0.24);
  flex: none;
}
.app-header .brand-parent {
  font-family: 'Franklin Gothic Medium', 'Franklin Gothic', Arial, Helvetica, sans-serif;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #b7c5d4;
  white-space: nowrap;
  flex: none;
}

/* Below ~560px the user controls need the room more than the parent mark does. */
@media (max-width: 560px) {
  .app-header .brand-rule,
  .app-header .brand-parent { display: none; }
}

.app-header .user-info {
  font-size: 12px;
  display: flex;
  align-items: center;
  gap: 14px;
  color: #c8d2dc;
}

.btn-link {
  background: none;
  border: none;
  color: #c8d2dc;
  cursor: pointer;
  font-size: 12px;
  padding: 0;
  font-family: inherit;
}
.btn-link:hover { color: #fff; }

/* ---------- shell ---------- */
.app-shell { display: flex; align-items: flex-start; }

.sidebar {
  width: 178px;
  flex: 0 0 178px;
  background: var(--surface-alt);
  border-right: 1px solid var(--border);
  min-height: calc(100vh - 48px);
  padding: 12px 0 24px;
  position: sticky;
  top: 48px;
}

.sidebar .nav-group {
  font-size: 10px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 14px 16px 4px;
}
.sidebar .nav-group:first-child { padding-top: 2px; }

.sidebar .nav-item {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  border-left: 2px solid transparent;
  padding: 6px 16px;
  font-size: 12.5px;
  font-family: inherit;
  color: var(--text-secondary);
  cursor: pointer;
}
.sidebar .nav-item:hover { background: #f2f2f0; color: var(--text); }
.sidebar .nav-item.active {
  background: var(--info-bg);
  border-left-color: var(--primary);
  color: var(--primary);
  font-weight: 500;
}

.container {
  flex: 1 1 auto;
  min-width: 0;
  max-width: 1180px;
  padding: 18px 22px 48px;
}
.container.wide { max-width: 1180px; }

/* ---------- attention rail ----------
   Lives to the right of the content on wide screens. It is deliberately the
   first thing to go when space is tight: the tables it sits beside already
   run to nine columns, and a rail that squeezes them is worse than no rail.
   See the media query near the bottom of this file. */
.rail {
  width: 236px;
  flex: 0 0 236px;
  padding: 18px 18px 48px 0;
  position: sticky;
  top: 48px;
  align-self: flex-start;
  max-height: calc(100vh - 48px);
  overflow-y: auto;
}

.rail-title {
  font-size: 10px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 8px;
  font-weight: 500;
}

.rail-item {
  display: block;
  width: 100%;
  text-align: left;
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 2px solid var(--border);
  border-radius: var(--radius);
  padding: 9px 11px;
  margin-bottom: 6px;
  font-family: inherit;
  cursor: pointer;
}
.rail-item:hover { background: var(--surface-alt); }

/* The left edge carries the urgency, so the rail reads as a list at a glance
   rather than as a wall of coloured boxes. */
.rail-item.tone-danger { border-left-color: var(--danger-text); }
.rail-item.tone-warn { border-left-color: var(--warn-text); }
.rail-item.tone-info { border-left-color: var(--info-text); }
.rail-item.tone-neutral { border-left-color: var(--border); }

.rail-count {
  font-size: 17px;
  font-weight: 500;
  color: var(--text);
  line-height: 1.1;
}
.rail-label {
  font-size: 11.5px;
  color: var(--text-secondary);
  line-height: 1.3;
  margin-top: 1px;
}
.rail-hint {
  font-size: 10.5px;
  color: var(--muted);
  margin-top: 3px;
}

.rail-clear {
  font-size: 11.5px;
  color: var(--muted);
  border: 1px dashed var(--border);
  border-radius: var(--radius);
  padding: 12px 11px;
  text-align: center;
  line-height: 1.4;
}

/* The old tab row stays in the DOM as the single source of truth for
   labels and admin-only visibility - the sidebar and the mobile
   dropdown are both built from it - but is never itself displayed. */
.dashboard-tabs { display: none !important; }

/* ---------- cards ---------- */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px 18px;
  margin-bottom: 14px;
}

h2 {
  margin: 0 0 12px;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--text);
}

/* ---------- forms ---------- */
label {
  display: block;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 12px 0 4px;
}

input, select, textarea {
  width: 100%;
  padding: 6px 9px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  font-size: 13px;
  font-family: inherit;
  color: var(--text);
  background: var(--surface);
}
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(47, 93, 138, 0.12);
}
textarea { resize: vertical; min-height: 56px; }

/* Buttons size to their content. A full-width button reads as a
   mobile call-to-action, not a tool control. */
button.primary {
  width: auto;
  padding: 6px 14px;
  background: var(--primary);
  color: #fff;
  border: 1px solid var(--primary);
  border-radius: var(--radius);
  font-size: 12px;
  font-family: inherit;
  font-weight: 500;
  cursor: pointer;
  margin-top: 14px;
}
button.primary:hover { background: var(--primary-hover); }
button.secondary {
  width: auto;
  padding: 6px 14px;
  background: var(--surface);
  color: var(--text-secondary);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  font-size: 12px;
  font-family: inherit;
  cursor: pointer;
  margin-top: 8px;
}

.error {
  color: var(--danger-text);
  background: var(--danger-bg);
  border: 1px solid #e8d5d5;
  border-radius: var(--radius);
  padding: 7px 10px;
  font-size: 12px;
  margin-top: 10px;
  display: none;
}

/* ---------- auth ----------
   Signed out there is no sidebar, so the shell stops behaving like an
   app frame and simply centres the card in the viewport. Without this
   the container sits hard against the left edge and the card centres
   inside it rather than on screen. */
.app-shell:not(.authed) { justify-content: center; }
.app-shell:not(.authed) .container {
  flex: 0 1 400px;
  padding-top: 0;
}

#authView {
  max-width: 380px;
  margin: 12vh auto 0;
}

.auth-intro {
  text-align: center;
  margin-bottom: 18px;
}
/* The sign-in screen is the only place the full lockup appears on screen,
   so it gets room to breathe. */
.auth-intro .auth-logo {
  height: 40px;
  width: auto;
  display: block;
  margin: 0 auto 6px;
}
.auth-intro .auth-sub {
  font-size: 12px;
  color: var(--muted);
  margin: 0;
}

/* A request number, shown before a PO number exists. Muted so it can't be
   mistaken for the real thing and typed onto an order. */
.ref-pending { color: var(--muted); font-style: italic; }

.tabs { display: flex; gap: 0; margin-bottom: 4px; }
.tabs button {
  flex: 1;
  padding: 7px;
  border: 1px solid var(--border-strong);
  background: var(--surface);
  cursor: pointer;
  font-size: 12px;
  font-family: inherit;
  color: var(--text-secondary);
}
.tabs button:first-child { border-radius: var(--radius) 0 0 var(--radius); }
.tabs button:last-child { border-radius: 0 var(--radius) var(--radius) 0; border-left: none; }
.tabs button.active { background: var(--primary); color: #fff; border-color: var(--primary); }

#authView button.primary { width: 100%; }

/* ---------- tables ---------- */
table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}

th {
  text-align: left;
  padding: 6px 8px;
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--muted);
  border-bottom: 1px solid var(--border-strong);
  white-space: nowrap;
}

td {
  text-align: left;
  padding: 7px 8px;
  border-bottom: 1px solid #f0f0ee;
  color: var(--text);
  vertical-align: top;
}

tbody tr:last-child td { border-bottom: none; }
tbody tr:hover td { background: #fbfbfa; }

.entry-row .hours, .hours {
  font-variant-numeric: tabular-nums;
  text-align: right;
}
th.hours { text-align: right; }

/* Also applied to <a> for actions that are really links - opening the PO PDF,
   for instance, where the browser's own viewer should handle it. */
.small-btn {
  background: none;
  border: none;
  color: var(--accent);
  cursor: pointer;
  font-size: 11.5px;
  font-family: inherit;
  padding: 1px 6px 1px 0;
  text-decoration: none;
  display: inline-block;
}
.small-btn:hover { text-decoration: underline; }

.table-wrap { overflow-x: auto; }

/* ---------- filters ---------- */
.filters {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 10px;
}
.filters > div { flex: 1; min-width: 140px; }
.filters label { margin-top: 0; }

/* ---------- metric strip ----------
   One bordered strip rather than floating cards. Grouping the
   numbers makes them comparable; separate shadowed tiles make
   each one look like its own announcement. */
.summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  margin-bottom: 12px;
}

.summary .stat {
  background: var(--surface);
  padding: 9px 12px;
  text-align: left;
}

.summary .stat .num {
  font-size: 16px;
  font-weight: 500;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  line-height: 1.3;
}

.summary .stat .lbl {
  font-size: 10px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ---------- badges ---------- */
.badge {
  display: inline-block;
  padding: 1px 7px;
  border-radius: 3px;
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.01em;
  white-space: nowrap;
}
.badge-ok { background: var(--ok-bg); color: var(--ok-text); }
.badge-warn { background: var(--warn-bg); color: var(--warn-text); }
.badge-danger { background: var(--danger-bg); color: var(--danger-text); }
.badge-info { background: var(--info-bg); color: var(--info-text); }
.badge-neutral { background: var(--neutral-bg); color: var(--neutral-text); }

.export-btn {
  display: inline-block;
  padding: 5px 12px;
  background: var(--surface);
  color: var(--text-secondary);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  text-decoration: none;
  font-size: 12px;
  cursor: pointer;
  font-family: inherit;
}
.export-btn:hover { background: #f5f5f3; }

.hidden { display: none !important; }

/* ---------- toast ---------- */
.toast {
  position: fixed;
  bottom: 18px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--text);
  color: #fff;
  padding: 8px 16px;
  border-radius: var(--radius);
  font-size: 12px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s;
  z-index: 50;
}
.toast.show { opacity: 1; }

/* ---------- mobile ---------- */
.nav-select-wrap { margin: 0 0 14px; }
.nav-select-wrap select {
  width: 100%;
  padding: 9px 10px;
  font-size: 14px;
  font-weight: 500;
  color: #fff;
  background: var(--primary);
  border: 1px solid var(--primary);
  border-radius: var(--radius);
}

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

@media (max-width: 899px) {
  .sidebar { display: none !important; }
  .nav-select-wrap:not(.hidden) { display: block; }
  .container { padding: 14px; }

  table { min-width: 520px; }
  .table-wrap { -webkit-overflow-scrolling: touch; }
  .filters > div { min-width: 100%; }
  .summary { grid-template-columns: repeat(auto-fit, minmax(45%, 1fr)); }

  /* Comfortable tap targets on a phone, where 16px also stops iOS
     zooming the page when a field is focused. */
  input, select, textarea { font-size: 16px; min-height: 42px; }
  button.primary { min-height: 42px; padding: 10px 18px; }
  .small-btn { padding: 7px 8px 7px 0; }
  #authView { margin: 24px auto; }
}

@media (min-width: 900px) {
  .nav-select-wrap { display: none !important; }
}

/* The rail only appears when there is genuinely room for it. Below this the
   content column still wants every pixel, so the rail is dropped rather than
   squeezed - the information is all still on its own tab. */
@media (max-width: 1279px) {
  .rail { display: none !important; }
}

/* ---------- empty and loading states ---------- */
.state-cell {
  color: var(--muted);
  padding: 18px 8px;
  text-align: center;
  font-size: 12px;
}
.state-cell .state-title { color: var(--text-secondary); margin-bottom: 2px; }
.state-cell .state-hint { font-size: 11.5px; color: var(--muted); }

/* ---------- session expiry ---------- */
#sessionLost {
  position: fixed;
  inset: 0;
  background: rgba(28, 28, 26, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
}
#sessionLost .panel {
  background: var(--surface);
  border-radius: var(--radius);
  padding: 20px 22px;
  max-width: 340px;
  text-align: center;
}
#sessionLost h2 { margin-bottom: 6px; }
#sessionLost p { font-size: 12.5px; color: var(--text-secondary); margin: 0 0 14px; }

/* ---------- print ----------
   Construction runs on paper: timecards get signed, POs go to vendors,
   RFIs get attached to transmittals. Printing should produce the record,
   not a screenshot of the application. */
.print-only { display: none; }

@media print {
  @page { margin: 14mm; }

  body { background: #fff; color: #000; font-size: 10.5pt; }

  /* Everything that is application chrome rather than record. */
  .app-header, .sidebar, .nav-select-wrap, .dashboard-tabs,
  .toast, .filters, form, button, .export-btn, .small-btn,
  #sessionLost, .error, .rail { display: none !important; }

  .app-shell { display: block; }
  .container { max-width: none; padding: 0; }

  .print-only { display: block; }
  .print-header {
    border-bottom: 1.5pt solid #000;
    padding-bottom: 6pt;
    margin-bottom: 12pt;
  }
  /* On paper the lockup does the work a header bar does on screen. */
  .print-header .print-title {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12pt;
  }
  .print-header .print-logo { height: 26pt; width: auto; }
  .print-header .print-org {
    font-family: 'Franklin Gothic Medium', 'Franklin Gothic', Arial, Helvetica, sans-serif;
    font-size: 10pt;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #333;
  }
  .print-header .print-meta { font-size: 9pt; color: #333; margin-top: 2pt; }

  .card {
    border: none;
    padding: 0;
    margin: 0 0 16pt;
    break-inside: auto;
  }
  .card h2 {
    font-size: 11pt;
    border-bottom: 0.5pt solid #666;
    padding-bottom: 3pt;
    margin-bottom: 6pt;
  }

  /* Cards that only make sense on screen. */
  .card:has(form):not(:has(table)) { display: none; }

  .summary {
    border: 0.5pt solid #666;
    gap: 0;
    background: none;
  }
  .summary .stat { border-right: 0.5pt solid #999; padding: 4pt 6pt; }
  .summary .stat .num { font-size: 11pt; }
  .summary .stat .lbl { font-size: 7.5pt; }

  table { font-size: 9pt; width: 100%; min-width: 0; }
  thead { display: table-header-group; }
  tr { break-inside: avoid; }
  th {
    border-bottom: 1pt solid #000;
    color: #000;
    font-size: 7.5pt;
  }
  td { border-bottom: 0.25pt solid #bbb; }
  tbody tr:hover td { background: none; }

  /* Badges lose their fills on paper - the label carries the meaning. */
  .badge {
    background: none !important;
    color: #000 !important;
    border: 0.5pt solid #666;
    padding: 0 3pt;
  }

  .table-wrap { overflow: visible; }

  .print-signature {
    display: block;
    margin-top: 24pt;
    font-size: 9pt;
  }
  .print-signature .sig-line {
    border-bottom: 0.5pt solid #000;
    width: 220pt;
    margin-top: 22pt;
  }
  .print-signature .sig-label { font-size: 8pt; color: #333; margin-top: 3pt; }
}