/*
 * Scope diff additions to the shared Complete Roofing stylesheet (brand.css, copied unchanged from the
 * prep app). Presentation only. Colors reuse brand.css tokens except the badge pairs below, each checked
 * to WCAG 4.5:1 (text) or 3:1 (non-text edge): light done 7.04, active 7.71, queued 7.82, count 11.41;
 * dark done 8.26, active 8.55, queued 8.10, count 10.30; flagged-row edge 3.92 (light) and 9.95 (dark);
 * text on the flagged-row tint 12.74 (light) and 11.26 (dark). Failed uses brand.css's caution-yellow
 * error pair (9.53).
 */
:root {
  --badge-done-bg: #E3F1E6;   --badge-done-text: #1E5A2E;
  --badge-active-bg: #DCEBF5; --badge-active-text: #1F4A68;
  --badge-queued-bg: #E8EAEF; --badge-queued-text: #3F4659;
  --badge-count-bg: #E8EAEF;  --badge-count-text: #272D3D;
  --flag-edge: #A6790A;       --flag-tint: #FFF6DD;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --badge-done-bg: #1F3A2A;   --badge-done-text: #A8E0B8;
    --badge-active-bg: #1E3A4F; --badge-active-text: #BFE0F2;
    --badge-queued-bg: #323A4E; --badge-queued-text: #D5DAE5;
    --badge-count-bg: #323A4E;  --badge-count-text: #F2F4F7;
    --flag-edge: #FFD166;       --flag-tint: #3A3420;
  }
}
:root[data-theme="dark"] {
  --badge-done-bg: #1F3A2A;   --badge-done-text: #A8E0B8;
  --badge-active-bg: #1E3A4F; --badge-active-text: #BFE0F2;
  --badge-queued-bg: #323A4E; --badge-queued-text: #D5DAE5;
  --badge-count-bg: #323A4E;  --badge-count-text: #F2F4F7;
  --flag-edge: #FFD166;       --flag-tint: #3A3420;
}

/* Header */
header.site-header { flex-wrap: wrap; }
header.site-header .logo-link { display: block; line-height: 0; }
.app-name {
  font-family: var(--font-heading); font-weight: 700; font-size: 1.15rem;
  text-transform: uppercase; letter-spacing: 0.04em;
}
.site-header__account { flex-wrap: wrap; }
.site-header__account .user-role { text-transform: capitalize; }
.logout-form { margin: 0; }
.logout-form .btn { padding: 0.35em 1em; font-size: 0.9rem; }

/* Pills */
.badge {
  display: inline-block; padding: 0.1em 0.65em; border-radius: 999px; line-height: 1.5;
  font-family: var(--font-heading); font-size: 0.8rem; font-weight: 600; letter-spacing: 0.03em;
  background: var(--badge-count-bg); color: var(--badge-count-text); vertical-align: middle;
}
.badge--done { background: var(--badge-done-bg); color: var(--badge-done-text); }
.badge--active { background: var(--badge-active-bg); color: var(--badge-active-text); }
.badge--queued { background: var(--badge-queued-bg); color: var(--badge-queued-text); }
.badge--failed { background: var(--danger-surface); color: var(--danger-text); }

/* Buttons that are links */
a.btn { text-decoration: none; }
a.btn:hover { text-decoration: none; }
a.btn--primary { color: var(--accent-contrast); }

/* Tables: never overflow the page; wide ones scroll inside their own box */
.table-wrap { overflow-x: auto; margin: var(--space-2) 0; }
.nowrap { white-space: nowrap; }
.jobs-table td, .jobs-table th { padding: var(--space-2); }
.row-actions { white-space: nowrap; }
.row-actions form { display: inline-block; margin: 0 var(--space-1) 0 0; }
.row-actions .btn { padding: 0.35em 0.9em; font-size: 0.9rem; }
#spend-line { color: var(--text-muted); margin: 0 0 var(--space-2); }

/* Job page */
.page-header .job-status { margin: 0; }
.job-meta, .version-meta { color: var(--text-muted); margin: var(--space-1) 0 var(--space-3); }
/* task 336: the report's job info in two columns, the address (the page heading) first, as the PDF */
.ws-jobinfo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-1) var(--space-4);
              flex: 1 1 auto; min-width: 0; }
.ws-jobcol p { margin: var(--space-1) 0 0; overflow-wrap: anywhere; }
.ws-jobcol h1 { margin: 0; }
.ws-label { font-weight: 600; }
@media (max-width: 640px) { .ws-jobinfo { grid-template-columns: 1fr; } }
.action-row { margin-bottom: var(--space-2); }

/* Report: item reference ("p2 #14") and quantity ("32.15 SQ") columns never wrap; quantities right-aligned */
.ws-table th, .ws-table td { vertical-align: top; }
.ws-ref-1 th:nth-child(1), .ws-ref-1 td:nth-child(1),
.ws-ref-3 th:nth-child(3), .ws-ref-3 td:nth-child(3),
.ws-table .ws-q { white-space: nowrap; }
.ws-table .ws-q { text-align: right; font-variant-numeric: tabular-nums; }
.ws-summary { max-width: 28rem; }
.ws-summary th:nth-child(2), .ws-summary td:nth-child(2) { text-align: right; font-variant-numeric: tabular-nums; }
.ws-section { margin-top: var(--space-5); }
/* Task 346: section 1's three parts (They carry less / Missing, settled by your rules / Not found by the rules) */
.ws-subsection { margin-top: var(--space-4); }
/* A line with a warning mark: the row is tinted and edged, the mark itself stays in the text */
.ws-flag td { background-color: var(--flag-tint); }
.ws-flag td:first-child { box-shadow: inset 4px 0 0 var(--flag-edge); }
.ws-banner {
  border-left: 4px solid var(--flag-edge); background: var(--flag-tint); color: var(--text);
  padding: var(--space-2) var(--space-3);
}
.ws-notice, .ws-note { color: var(--text-muted); }
.ws-note { margin: var(--space-1) 0; }
.ws-match > summary, .ws-run > summary { cursor: pointer; font-family: var(--font-heading); font-weight: 600; margin: var(--space-2) 0; }

/* Keyboard focus on the collapsed sections, same ring as brand.css's links and buttons */
summary:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }

/* Forms */
.upload-form { max-width: 36rem; }
.upload-form .field { display: block; }
.upload-form .field input[type="text"], .upload-form .field input[type="email"], .upload-form .field select {
  display: block; width: 100%; margin-top: var(--space-1); padding: 0.5rem 0.6rem;
  border: 1px solid var(--border); border-radius: var(--button-radius);
  background: var(--bg); color: var(--text); font: inherit;
}
.upload-form .field--check { display: flex; align-items: center; justify-content: flex-start; gap: var(--space-2); }
/* brand.css gives every ".field input" a block box, 14rem minimum and padding; a checkbox or radio keeps its natural size */
.field input[type="checkbox"], .field input[type="radio"] {
  display: inline-block; flex: none; width: auto; min-width: 0; max-width: none; margin: 0; padding: 0;
}
.upload-form .btn--primary { margin-top: var(--space-1); }
.alert--error { margin-bottom: var(--space-3); }
.auth-panel .btn { margin-top: var(--space-1); }

@media (max-width: 600px) {
  header.site-header { padding: var(--space-2); }
  .site-header__account { border-left: 0; padding-left: 0; }
  .page-header { flex-wrap: wrap; }
}