/* Precast Panel Tracker — Tria Products look.
   Corporate colours: Tria blue #3a4f81 (primary) and Tria purple #3b245d (secondary),
   with white, greys and near-black. Loaded after the app's own styles, so it only changes colours,
   type and the logo — the layout stays the same. */
:root {
  --tria-blue: #3a4f81; --tria-purple: #3b245d;
  --bg: #f4f5f8; --surface: #ffffff; --surface-2: #eceef3; --line: #d6dae3;
  --fg: #181b26; --muted: #5d6478; --accent: #3a4f81; --accent-soft: #e6eaf4; --accent-fg: #ffffff; --accent-2: #3b245d;
  --stage: #e3e6ed;
  --f-display: "Segoe UI Variable Display", "Segoe UI", -apple-system, BlinkMacSystemFont, "Helvetica Neue", system-ui, sans-serif;
  --f-body: "Segoe UI Variable Text", "Segoe UI", -apple-system, BlinkMacSystemFont, "Helvetica Neue", system-ui, sans-serif;
}
@media (prefers-color-scheme: dark) { :root {
  --bg: #0f1117; --surface: #171a23; --surface-2: #20242f; --line: #2f3443;
  --fg: #e8eaf0; --muted: #9aa1b4; --accent: #8fa5dc; --accent-soft: #222b44; --accent-fg: #0c1222; --accent-2: #a58bd0;
  --stage: #0b0d12; } }

/* headings: clean sans, a touch tighter */
h1 { font-weight: 650; letter-spacing: -0.01em; }
h2 { font-weight: 600; letter-spacing: .07em; }

/* header: white, with a thin Tria blue → purple band along the top */
.bar { position: relative; }
.bar::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: linear-gradient(90deg, var(--tria-blue), var(--tria-purple)); }
.brand { width: auto; height: 40px; border-radius: 7px; }
.brand.sm { width: auto; height: 32px; border-radius: 6px; }
/* load slips and QR tags (print rules are what the slip PDF copies) */
@media print {
  .s-logo { width: auto; height: 34pt; border-radius: 5pt; }
  .tag-top img { width: auto !important; height: 16pt !important; border-radius: 3pt; }
}

/* buttons: Tria blue, purple on hover */
.btn.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-fg); }
.btn.primary:hover { background: var(--accent-2); border-color: var(--accent-2); }
@media (prefers-color-scheme: dark) { .btn.primary:hover { background: #b3c2ea; border-color: #b3c2ea; } }
.btn:hover { border-color: var(--accent); }
a { color: var(--accent); }
:focus-visible { outline-color: var(--accent); }
::selection { background: var(--accent-soft); }