/* Direction: switchgear panel — cool grey-paper canvas, copper-amber action colour, deep slate band, condensed industrial display type */
/* Completed by the platform from the short form: both modes, every
   palette token, each text-on-ground pair at its floor. To restyle, write the
   short form again (the decisions in one :root) and it is completed again. */

:root {
  --canvas: #f2f3f0;
  --surface: #ffffff;
  --surface-2: #e7e9e4;
  --border: #d5d4cf;
  --border-strong: #b4b1a9;
  --ink: #14202b;
  --muted: #55616c;
  --accent: #f0a91c;
  --accent-hover: #cc9018;
  --accent-ink: #221804;
  --accent-text: #86550a;
  --accent-strong: #855e10;
  --accent-soft: #f2e9d2;
  --accent-border: #f1d291;
  --success: #15803d;
  --success-ink: #ffffff;
  --success-soft: #d7e5db;
  --success-strong: #116d34;
  --warning: #b45309;
  --warning-ink: #ffffff;
  --warning-soft: #ebe0d4;
  --warning-strong: #994607;
  --danger: #b91c1c;
  --danger-ink: #ffffff;
  --danger-soft: #ebd9d7;
  --danger-strong: #b91c1c;
  --chart-1: #ba8103;
  --chart-2: #5c9844;
  --chart-3: #008789;
  --chart-4: #558cdc;
  --chart-5: #9257a6;
  --chart-6: #d0676e;

  --font-display: "Barlow Condensed", "Arial Narrow", sans-serif;
  --font-body: "IBM Plex Sans", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, monospace;
  --display-weight: 700;
  --display-tracking: 0.01em;
  --radius-btn: 6px;
  --radius-input: 6px;
  --radius-card: 8px;
  --x-band: #14202b;
  --x-on-band: #eef1f3;
  --x-band-dim: #9fb0bd;
  --x-spark: #f5bd45;
  --x-grid: rgba(255, 255, 255, 0.05);
  --x-glow: rgba(240, 169, 28, 0.22);
  --x-paper: #ffffff;
  --x-paper-ink: #111111;
  --x-paper-line: #8a8f94;
  --x-paper-head: #ececec;
  --font-sans: "IBM Plex Sans", system-ui, sans-serif;
  --eyebrow-tracking: 0.08em;
}

html[data-theme="dark"] {
  --canvas: #120c03;
  --surface: #2a241c;
  --surface-2: #1e1810;
  --border: #332e26;
  --border-strong: #59554f;
  --ink: #f2f3f0;
  --muted: #989791;
  --accent: #f0a91c;
  --accent-hover: #f2b63e;
  --accent-ink: #221804;
  --accent-text: #f0a91c;
  --accent-strong: #f0a91c;
  --accent-soft: #432f09;
  --accent-border: #76530e;
  --success: #15803d;
  --success-ink: #ffffff;
  --success-soft: #132610;
  --success-strong: #499c68;
  --warning: #b45309;
  --warning-ink: #ffffff;
  --warning-soft: #361c04;
  --warning-strong: #c57a40;
  --danger: #b91c1c;
  --danger-ink: #ffffff;
  --danger-soft: #371009;
  --danger-strong: #d16969;
  --chart-1: #f0a91c;
  --chart-2: #8ad56b;
  --chart-3: #24b5b8;
  --chart-4: #96c0fb;
  --chart-5: #c37adc;
  --chart-6: #fe9fa3;
}

/* Electrical Pro ERP — login backdrop, repair tabs and the printable document sheets. */
.login-bg {
  background-color: var(--x-band);
  background-image:
    linear-gradient(var(--x-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--x-grid) 1px, transparent 1px),
    radial-gradient(circle at 85% 8%, var(--x-glow), transparent 45%);
  background-size: 32px 32px, 32px 32px, auto;
}
.login-bg main, .login-bg > div { animation: panel-in 0.5s ease-out both; }
@keyframes panel-in { from { transform: translateY(14px); } to { transform: translateY(0); } }
html.reduced-motion .login-bg > div { animation: none; }

summary::-webkit-details-marker { display: none; }
.tabs .tab { padding: 0.5rem 0.9rem; border-radius: var(--radius-btn); font-size: 0.875rem; font-weight: 500; color: var(--muted); }
.tabs .tab:hover { background: var(--surface-2); color: var(--ink); }
.tabs .tab.active { font-weight: 600; }

/* ---- printable documents ---- */
.print-stage { padding: 1rem; background: var(--surface-2); min-height: 60vh; overflow-x: auto; }
.doc .sheet { background: var(--x-paper); color: var(--x-paper-ink); margin: 0 auto 1rem; box-sizing: border-box; box-shadow: 0 6px 28px rgba(0, 0, 0, 0.2); font-family: var(--font-body); overflow: hidden; }
.doc table { width: 100%; border-collapse: collapse; }
.doc .grid-t th, .doc .grid-t td { border: 1px solid var(--x-paper-line); padding: 1px 4px; text-align: left; vertical-align: top; }
.doc .grid-t th { background: var(--x-paper-head); font-weight: 600; }
.doc .r { text-align: right; }
.doc .kv th { text-align: left; font-weight: 600; padding: 1px 8px 1px 0; white-space: nowrap; vertical-align: top; }
.doc .kv td { padding: 1px 0; }
.doc .totals { width: auto; min-width: 55%; }
.doc .big th, .doc .big td { font-weight: 700; border-top: 1px solid var(--x-paper-line); }
.doc .lines { background-image: repeating-linear-gradient(transparent, transparent 1.6em, var(--x-paper-line) 1.6em, var(--x-paper-line) calc(1.6em + 1px)); }
.doc .plabel { break-after: page; padding: 1mm; outline: 1px dashed var(--x-paper-line); overflow: hidden; margin-bottom: 2mm; }
.doc .plabel:last-child { break-after: auto; }
.doc svg.bc { height: auto; max-width: 100%; }
.doc .qr { display: inline-block; }
.doc .qr svg { width: 100%; height: 100%; display: block; }
@media print {
  html, body { background: none !important; }
  .no-print { display: none !important; }
  .print-stage { padding: 0; background: none; overflow: visible; }
  .doc .sheet { box-shadow: none; margin: 0; }
  .doc .copy-break { break-after: page; }
  .doc .plabel { outline: 0; margin: 0; }
}