/*
 * shared.css — PES Hydrotest Tool
 * Shared design tokens and component classes used across all templates.
 * Two intentional themes:
 *   Light (lt-*): setup-flow pages (welcome, settings, mapping, project_setup, login)
 *   Dark  (dk-*): engineering-view pages (test_exec, rupture, pv, results, equipment)
 */

/* ── 1. CSS Variables ─────────────────────────────────────────────────────── */
:root {
  /* Palette tokens */
  --color-green-700:  #11806d;
  --color-green-600:  #1c8549;
  --color-green-500:  #27ae60;
  --color-green-400:  #2ecc71;
  --color-blue-700:   #1a6fb5;
  --color-teal-500:   #1abc9c;
  --color-yellow-400: #f1c40f;
  --color-purple-600: #8e44ad;
  --color-purple-500: #9b59b6;
  --color-orange-500: #e67e22;
  --color-coral-500:  #e17055;
  --color-red-600:    #e74c3c;
  --color-red-700:    #c0392b;
  --color-slate-800:  #2c3e50;
  --color-slate-700:  #34495e;
  --color-slate-600:  #455a64;
  --color-slate-500:  #7f8c8d;
  --color-slate-450:  #95a5a6;
  --color-slate-400:  #a0b0b2;
  --color-slate-300:  #bdc3c7;
  --color-slate-200:  #dee2e6;
  --color-slate-100:  #f8f9fa;
  --color-slate-50:   #f4f7f6;

  /* Precision Engineering Solutions brand (asset guide v1.2, p.16) */
  --brand-gray:       #75787B;  /* Pantone Cool Gray 9C */
  --brand-black:      #101820;  /* Pantone Black 6C */

  /* Light theme */
  --lt-page-bg:      var(--color-slate-50);
  --lt-card-bg:      #ffffff;
  --lt-card-radius:  10px;
  --lt-card-shadow:  0 2px 10px rgba(0,0,0,0.08);
  --lt-card-accent:  var(--color-green-600);
  --lt-text-primary: #111111;
  --lt-text-muted:   #333333;
  --lt-text-secondary:#555555;
  --lt-text-dim:     #444444;
  --lt-border:       #c8cdd3;
  --lt-border-subtle:#dde0e4;
  --lt-border-light: #eeeeee;
  --lt-cell-bg:      #f0f0f0;
  --lt-input-pad:    8px 11px;
  --lt-focus-ring:   var(--color-green-600);
  --lt-drop-border:  #b2bec3;
  --lt-drop-bg:      #f8fafb;
  --lt-drop-hover:   #f0faf4;

  /* Dark theme */
  --dk-page-bg:       #1a1a2e;
  --dk-sidebar-bg:    var(--color-slate-800);
  --dk-sidebar-width: 320px;  /* override per-page with local :root */
  --dk-panel-bg:      #16213e;
  --dk-input-bg:      var(--color-slate-700);
  --dk-input-deep:    #0d1b2a;
  --dk-border:        var(--color-slate-600);
  --dk-border-subtle: #1e2d45;
  --dk-table-header:  #1a252f;
  --dk-text-primary:  #ecf0f1;
  --dk-text-muted:    var(--color-slate-400);
  --dk-text-dim:      var(--color-slate-300);
  --dk-accent:        var(--color-green-600);  /* #1c8549 — WCAG AA 4.61:1 on white */
  --dk-input-pad:     7px 9px;
  --dk-highlight:     #6edcc0;

  /* Semantic status colors */
  --color-success:    #1c8549;
  --color-success-dk: #0d6e4a;   /* WCAG AA on light-blue/slate backgrounds */
  --color-danger:     #cf4435;
  --color-danger-dk:  #c0392b;
  --color-warning:    #f39c12;
  --color-warning-dk: #e67e22;
  --color-info:       #2a7ab0;

  /* Typography — Precision Engineering Solutions brand uses Arial as substitute
   * for proprietary RB N°3.1 (asset guide v1.2, p.12). */
  --font-family:  Arial, 'Helvetica Neue', Helvetica, sans-serif;
  --font-display: var(--font-family);  /* alias for masthead headings */
  --font-mono:    'Courier New', Courier, monospace;
  --label-size:   0.82em;
  --label-spacing:0.5px;

  /* Radius scale */
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-xl: 10px;

  /* Button padding scale */
  --btn-pad-sm: 5px 12px;
  --btn-pad-md: 9px 20px;
  --btn-pad-lg: 11px 24px;

  /* Z-index ladder */
  --z-user-chip: 2000;
  --z-backdrop:  4500;
  --z-sidebar:   5000;
  --z-toggle:    6000;
}

/* ── 2. Reset & Base ──────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
body { font-family: var(--font-family); }
/* Form controls do not inherit font-family by default (browser UA stylesheet
 * resets them to system). Force every unclassed input/button/select/textarea
 * onto the app font so bare controls don't render in Chrome's default. */
input, button, select, textarea, optgroup { font-family: var(--font-family); }
a { text-decoration: none; }

/* ── 3a. Dark page scaffold ──────────────────────────────────────────────── */
body.page-dark {
  /* overflow-x: hidden enforces the "no horizontal document scrollbar"
     invariant from issue #22 — wide tables / analysis grids inside .dk-main
     are wrapped in .scroll-x and scroll within their own column. Catches
     any stray descendant whose intrinsic width contributes to the document
     scroll extent (e.g., screen-reader spans or absolutely-positioned items
     whose containing block is the initial container). Vertical scrollbar
     unaffected. */
  margin: 0; display: flex; overflow-x: hidden;
  background: var(--lt-page-bg);
  color: var(--color-slate-800);
  min-height: 100vh;
}
/* Labels in main content get dark text; sidebar labels stay light via dk-sidebar scope */
body.page-dark .dk-main label,
body.page-dark .content label {
  display: block; font-size: 0.82em; color: var(--lt-text-muted);
  margin-bottom: 3px; margin-top: 10px;
}
body.page-dark .dk-main label:first-child,
body.page-dark .content label:first-child { margin-top: 0; }

/* Dark main content base */
.dk-main {
  margin-left: var(--dk-sidebar-width);
  /* Hard-cap the column width so a wide grandchild (component table,
     analysis grid) can't push past the viewport. ``min-width: 0`` is
     belt-and-suspenders for browsers that honour the cap without it.
     Wide tables inside should be wrapped in ``.scroll-x`` so they
     scroll within the column. Fixed in #22. */
  flex: 1; min-width: 0;
  max-width: calc(100vw - var(--dk-sidebar-width));
  padding: 28px 32px;
  box-sizing: border-box;
  font-family: var(--font-family);
}
/* Long page titles wrap rather than push the layout wide. Keeps narrow
   viewports (1280, mobile) from horizontal-scrolling. */
.dk-main h1, .dk-main .subtitle, .dk-main h2 { overflow-wrap: anywhere; }

/* Reusable horizontal-scroll wrapper for wide tables. ``max-width: 100%``
   forces the wrapper to honour its parent's width even when the inner
   table is intrinsically wider; the table scrolls within rather than
   pushing the layout wide. */
.scroll-x { max-width: 100%; overflow-x: auto; }
.dk-main h1 { font-size: 1.25em; margin: 0 0 6px; font-weight: 700; font-family: var(--font-family); }
.dk-main .subtitle { color: var(--dk-text-muted); font-size: 0.85em; margin: 0 0 20px; font-family: var(--font-family); }

/* Light overrides for main content area (sidebar keeps dark palette) */
body.page-dark .dk-main,
body.page-dark .content {
  --dk-panel-bg:      #ffffff;
  --dk-input-bg:      #ffffff;
  --dk-input-deep:    #f0f2f4;
  --dk-border:        #c8cdd3;
  --dk-border-subtle: #dde0e4;
  --dk-table-header:  #eef0f2;
  --dk-text-primary:  #111111;
  --dk-text-muted:    #333333;
  --dk-text-dim:      #444444;
  color: var(--lt-text-primary);
}

/* ── 3b. Light page scaffold ──────────────────────────────────────────────── */
body.page-light {
  background: var(--lt-page-bg);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px 20px;
}
.page-logo     { max-width: 180px; margin-bottom: 28px; }
.page-title    { color: var(--lt-text-primary); margin-bottom: 6px; font-size: 1.5em; font-family: var(--font-display); font-weight: 900; font-style: italic; text-transform: uppercase; letter-spacing: 0.02em; }
.page-subtitle { color: var(--lt-text-muted); margin-bottom: 36px; font-size: 0.95em; font-family: var(--font-family); }

/* Asset-guide masthead style (Arial Black Italic ALL CAPS per asset guide v1.2,
 * p.12). Apply ONLY to mastheads — never tables, labels, banners, or numeric
 * data, where italic+uppercase hurts readability. */
.heading-display {
  font-family: var(--font-display);
  font-weight: 900;
  font-style: italic;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

/* ── 4. Light card ────────────────────────────────────────────────────────── */
.lt-card {
  background: var(--lt-card-bg);
  border-radius: var(--lt-card-radius);
  padding: 28px 32px;
  box-shadow: var(--lt-card-shadow);
  border-top: 4px solid var(--lt-card-accent);
  width: 100%;
  margin-bottom: 28px;
}
.lt-card h2 {
  color: var(--lt-text-primary);
  font-size: 1em;
  text-transform: uppercase;
  letter-spacing: var(--label-spacing);
  margin-bottom: 18px;
}
.lt-card--blue   { border-top-color: var(--color-blue-700); }
.lt-card--dark   { border-top-color: var(--color-slate-800); }
.lt-card--purple { border-top-color: var(--color-purple-600); }
.lt-card--red    { border-top-color: var(--color-red-600); }
.lt-card--teal   { border-top-color: var(--color-green-700); }
.lt-card--orange { border-top-color: var(--color-orange-500); }

/* ── 5. User chip ─────────────────────────────────────────────────────────── */
.user-chip {
  position: absolute; top: 0; right: 0;
  font-size: 0.78em; color: var(--color-slate-600);
  padding: 8px 16px;
  text-align: right;
  white-space: nowrap;
}
.user-chip a { color: var(--color-slate-600); padding: 4px 2px; min-height: 44px; min-width: 44px; display: inline-flex; align-items: center; }
.user-chip a.link-signout { color: var(--color-danger-dk); }
.user-chip a:hover { text-decoration: underline; }
.user-chip a:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
/* Sign out is a POST form (no state change on GET); its button looks like the links around it. */
.signout-form { display: inline; margin: 0; }
button.link-signout { background: none; border: 0; font: inherit; cursor: pointer; }
.user-chip button.link-signout { color: var(--color-danger-dk); padding: 4px 2px; min-height: 44px; min-width: 44px; display: inline-flex; align-items: center; }
.user-chip button.link-signout:hover { text-decoration: underline; }
.user-chip button.link-signout:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
.presence-indicator {
  display: none;
  font-size: 0.9em; color: var(--dk-highlight);
  white-space: nowrap;
}
.presence-indicator:not(:empty) { display: inline; }
.presence-indicator:not(:empty)::after { content: ' · '; color: var(--color-slate-450); }

/* ── 6. Button system ─────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: var(--btn-pad-md);
  border: none; border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: 0.9em; font-weight: 600; font-family: var(--font-family);
  text-decoration: none; line-height: 1.4;
  transition: opacity 0.15s;
  min-height: 44px;
}
.btn:hover { opacity: 0.88; }
.btn:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
.btn--sm   { padding: var(--btn-pad-sm); font-size: 0.8em; }
.btn--lg   { padding: var(--btn-pad-lg); font-size: 0.95em; }
.btn--full { display: flex; width: 100%; }
.btn--green  { background: var(--color-success);    color: white; }
.btn--dark   { background: var(--color-slate-800);  color: white; }
.btn--blue   { background: var(--color-info);       color: white; }
.btn--red    { background: var(--color-danger);     color: white; }
.btn--danger { background: var(--color-danger-dk);  color: white; }
.btn--teal   { background: var(--color-green-700);  color: white; }
.btn--purple { background: var(--color-purple-600); color: white; }
.btn--muted  { background: var(--color-slate-600);  color: white; }
.btn--navy   { background: #1a2a40; color: white; border: 1px solid #2a3a5a; }

/* Bare icon-style buttons (e.g. filter-clear "×", inline close) — no .btn chrome */
.btn-icon {
  background: none; border: none; cursor: pointer;
  color: var(--lt-text-muted);
  font-family: var(--font-family); font-size: 1.1em; line-height: 1;
  padding: 2px 4px;
}
.btn-icon:hover { color: var(--lt-text-primary); }

/* ── 7. Light-theme form controls ─────────────────────────────────────────── */
.lt-label {
  display: block;
  font-size: var(--label-size); color: var(--lt-text-muted);
  text-transform: uppercase; letter-spacing: var(--label-spacing);
  margin-bottom: 5px; font-weight: 600;
}
.lt-label .req { color: var(--color-red-600); }
.lt-input,
.lt-select {
  width: 100%; padding: var(--lt-input-pad);
  border: 1px solid var(--lt-border); border-radius: var(--radius-sm);
  font-size: 0.9em; font-family: var(--font-family);
  background: white; color: var(--lt-text-primary);
}
.lt-input:focus,
.lt-select:focus {
  outline: 2px solid var(--lt-focus-ring);
  outline-offset: 1px;
  border-color: var(--lt-focus-ring);
}

/* ── 8. Dark sidebar chrome ───────────────────────────────────────────────── */
.dk-sidebar {
  width: var(--dk-sidebar-width);
  background: var(--dk-sidebar-bg);
  height: 100vh; position: fixed; left: 0; top: 0;
  overflow-y: auto; display: flex; flex-direction: column;
  font-family: var(--font-family);
}
.dk-sidebar-header {
  padding: 16px 20px;
  border-bottom: 1px solid var(--dk-border);
  flex-shrink: 0;
  font-family: var(--font-family);
}
.dk-sidebar-header .logo-link { display: block; margin-bottom: 10px; }
.dk-sidebar-header .logo-link img { max-width: 110px; display: block; }
.dk-sidebar-header a { color: var(--dk-text-muted); font-size: 0.8em; font-family: var(--font-family); }
.dk-sidebar-header a:hover { color: white; }
.dk-sidebar-header h2 { margin: 6px 0 2px; font-size: 1em; color: var(--dk-text-primary); font-family: var(--font-display); font-weight: 900; font-style: italic; text-transform: uppercase; letter-spacing: 0.02em; }
.dk-sidebar-header p  { margin: 0; font-size: 0.78em; color: var(--dk-text-muted); font-family: var(--font-family); }
.dk-sidebar-section {
  padding: 16px 20px;
  border-bottom: 1px solid var(--dk-border);
  font-family: var(--font-family);
}
.dk-sidebar-section h3 {
  margin: 0 0 12px;
  font-size: 0.78em; text-transform: uppercase;
  letter-spacing: 0.8px; color: var(--dk-text-muted);
  font-family: var(--font-family);
}
/* Sidebar labels and inputs stay light-on-dark regardless of page theme */
.dk-sidebar label {
  display: block; font-size: 0.82em; color: var(--dk-text-dim);
  margin-bottom: 3px; margin-top: 10px;
  font-family: var(--font-family);
}
.dk-sidebar label:first-child { margin-top: 0; }
.dk-sidebar input[type="text"],
.dk-sidebar input[type="number"],
.dk-sidebar select,
.dk-sidebar textarea {
  width: 100%; padding: var(--dk-input-pad);
  background: var(--dk-input-bg); border: 1px solid var(--dk-border);
  color: white; border-radius: var(--radius-sm);
  font-size: 0.88em; font-family: var(--font-family);
}
.dk-sidebar input:focus,
.dk-sidebar select:focus { outline: 2px solid var(--dk-accent); outline-offset: -1px; border-color: var(--dk-accent); }
.dk-sidebar-footer {
  padding: 20px; margin-top: auto;
  border-top: 1px solid var(--dk-border);
  font-family: var(--font-family);
}
/* ── Analysis cards (shared across mainline and facility) ─────────────────── */
.analysis-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 15px; margin-bottom: 24px;
}
.analysis-card {
  background: var(--dk-panel-bg); padding: 14px 16px; border-radius: var(--radius-lg);
  box-shadow: 0 2px 5px rgba(0,0,0,0.08); border-top: 4px solid var(--color-green-600);
  font-family: var(--font-family);
}
.analysis-card-title {
  margin: 0 0 6px; font-size: 0.72em; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.5px; color: var(--dk-text-muted);
  font-family: var(--font-family);
}
.analysis-card-value {
  margin: 0; font-size: 1.2em; font-weight: 700; color: var(--dk-text-primary);
  font-family: var(--font-family);
}
.analysis-card-value span {
  font-size: 0.55em; font-weight: 400; color: var(--dk-text-muted);
  font-family: var(--font-family);
}
.analysis-card-sub {
  font-size: 0.72em; color: var(--dk-text-muted); margin-top: 4px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  font-family: var(--font-family);
}
.analysis-card-sub--wrap { white-space: normal; }
.analysis-card--pass  { border-top-color: var(--color-success); }
.analysis-card--pass .analysis-card-value { color: var(--color-success); }
.analysis-card--fail  { border-top-color: var(--color-danger); }
.analysis-card--fail .analysis-card-value { color: var(--color-danger); }
.analysis-card--warn  { border-top-color: var(--color-warning); }
.analysis-grid-label {
  grid-column: 1 / -1; font-size: 0.7em; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.8px; color: var(--dk-text-muted); border-bottom: 1px solid var(--dk-border-subtle);
  padding-bottom: 4px; margin-bottom: 2px;
  font-family: var(--font-family);
}
@media (max-width: 1100px) { .analysis-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px)  { .analysis-grid { grid-template-columns: 1fr; } }

.param-row {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 3px 0; font-size: 0.84em;
}
.param-label { color: var(--dk-text-muted); }
.param-val   { color: var(--dk-text-primary); font-weight: 600; }

/* ── 9. Mobile sidebar toggle (dark pages) ────────────────────────────────── */
.menu-toggle {
  display: none; position: fixed; top: 12px; left: 12px;
  z-index: var(--z-toggle);
  background: var(--dk-sidebar-bg); border: 1px solid var(--dk-border);
  border-radius: var(--radius-md); padding: 8px 12px;
  cursor: pointer; color: var(--dk-text-primary);
  font-size: 1.2em; line-height: 1;
  box-shadow: 0 2px 6px rgba(0,0,0,0.4);
}
.menu-toggle:focus-visible { outline: 2px solid var(--dk-accent); outline-offset: 2px; }
.sidebar-backdrop {
  display: none; position: fixed; inset: 0;
  background: rgba(0,0,0,0.55); z-index: var(--z-backdrop);
}
.sidebar-backdrop.active { display: block; }

@media (max-width: 1024px), (pointer: coarse) {
  .menu-toggle { display: block; }
  .dk-sidebar {
    transform: translateX(-100%);
    transition: transform 0.25s ease;
    z-index: var(--z-sidebar);
  }
  .dk-sidebar.open { transform: translateX(0); }
  .dk-main { margin-left: 0 !important; padding: 16px; padding-top: 58px; }
}
@media (max-width: 600px) {
  .dk-main { padding: 10px; padding-top: 54px; }
}

/* ── 10. Dark-theme form controls ─────────────────────────────────────────── */
.dk-label {
  display: block; font-size: 0.82em; color: var(--dk-text-dim);
  margin-bottom: 3px; margin-top: 10px;
}
.dk-label:first-child { margin-top: 0; }
.dk-input,
.dk-select {
  width: 100%; padding: var(--dk-input-pad);
  background: var(--dk-input-bg); border: 1px solid var(--dk-border);
  color: var(--dk-text-primary); border-radius: var(--radius-sm);
  font-size: 0.88em; font-family: var(--font-family);
}
.dk-input:focus,
.dk-select:focus {
  outline: 2px solid var(--dk-accent);
  outline-offset: 1px;
  border-color: var(--dk-accent);
}

/* ── 10b. Dark-page common components ────────────────────────────────────── */
/* Chart / table boxes */
.dk-box {
  background: var(--dk-panel-bg); border-radius: var(--radius-lg);
  padding: 18px 20px;
}
.dk-box h3, .dk-box h4 {
  margin: 0 0 12px; font-size: 0.95em; color: var(--dk-text-dim);
}
/* Dark-page buttons (inline context) */
.btn-accent { background: var(--dk-accent); color: white; }
.btn-primary { background: var(--dk-accent); color: white; }
.btn-save { background: var(--color-success); color: white; }
.save-status { font-size: 0.78em; text-align: center; margin-top: 6px; height: 16px; transition: opacity 0.3s; }
.save-status.ok  { color: var(--color-success); }
.save-status.err { color: var(--color-danger); }
.hint { font-size: 0.75em; color: var(--dk-text-dim); margin-top: 4px; }
.hint--light { color: var(--lt-text-secondary); }  /* hint on a white/light page, not inside .dk-main */

/* Status semantic classes */
.text-success { color: var(--color-success); }
.text-danger  { color: var(--color-danger); }
.text-warning { color: var(--color-warning); }
.text-info    { color: var(--color-info); }

/* ── 11. Misc shared ──────────────────────────────────────────────────────── */
.back-link { color: var(--lt-text-muted); font-size: 0.85em; display: inline-block; }
.back-link:hover { color: var(--lt-text-primary); }

.item-list { list-style: none; margin-bottom: 18px; }
.item-list li {
  display: flex; align-items: center; justify-content: space-between;
  padding: 9px 0; border-bottom: 1px solid var(--lt-border-subtle);
  font-size: 0.92em; color: var(--lt-text-primary);
}
.item-list li:last-child { border-bottom: none; }

.form-group-header {
  font-size: 0.7em; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.8px; color: var(--dk-text-muted);
  border-bottom: 1px solid var(--dk-border);
  padding-bottom: 4px; margin-top: 8px; margin-bottom: 2px;
}

/* ── 12. UX components ────────────────────────────────────────────────────── */

/* Settings section-jump nav */
.section-nav {
  position: sticky; top: 0; z-index: 100;
  background: var(--lt-page-bg);
  border-bottom: 1px solid var(--color-slate-200);
  display: flex; width: 100%; max-width: 700px;
  margin-bottom: 24px; overflow: hidden;
  box-shadow: 0 2px 6px rgba(0,0,0,0.06);
}
.section-nav a {
  flex: 1; padding: 10px 8px; text-align: center;
  font-size: 0.75em; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.5px;
  color: var(--lt-text-muted); background: white;
  border-bottom: 3px solid transparent;
  transition: all 0.15s;
}
.section-nav a:hover { color: var(--lt-text-primary); border-bottom-color: var(--color-slate-300); }
.section-nav a.active { color: var(--lt-text-primary); border-bottom-color: var(--color-green-600); }

/* Unsaved-changes banner (results.html) */
.unsaved-indicator {
  display: none; position: sticky; top: 0; z-index: 50;
  padding: 6px 16px;
  background: rgba(230,126,34,0.12);
  border-bottom: 2px solid var(--color-orange-500);
  color: var(--color-orange-500);
  font-size: 0.82em; font-weight: 600; text-align: center;
}
.unsaved-indicator.visible { display: block; }

/* Session-expired banner (shared.js showSessionExpired; auto-save pages) */
.session-expired-banner {
  /* fixed: out of the page's flex/grid flow, across the full width */
  display: none; position: fixed; top: 0; left: 0; right: 0; z-index: var(--z-toggle);
  padding: 8px 16px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
  background: var(--lt-card-bg);
  border-bottom: 3px solid var(--color-red-600);
  color: var(--color-red-700);
  font-size: 0.9em; font-weight: 600; text-align: center;
}
.session-expired-banner.visible { display: block; }

/* ── 13. Light-theme hamburger nav drawer ─────────────────────────────────── */
.lt-menu-toggle {
  display: none;
  position: fixed; top: 10px; left: 10px;
  z-index: var(--z-toggle);
  background: var(--lt-card-bg); border: 1px solid var(--lt-border);
  border-radius: var(--radius-sm); padding: 7px 10px;
  cursor: pointer; font-size: 1.1em; line-height: 1;
  box-shadow: 0 1px 4px rgba(0,0,0,0.1);
  color: var(--lt-text-primary);
}
.lt-menu-toggle:focus-visible { outline: 2px solid var(--lt-focus-ring); outline-offset: 2px; }
.lt-nav-backdrop {
  display: none; position: fixed; inset: 0;
  background: rgba(0,0,0,0.35); z-index: var(--z-backdrop);
}
.lt-nav-backdrop.active { display: block; }
.lt-nav-drawer {
  position: fixed; top: 0; left: 0;
  width: 240px; height: 100vh;
  background: white; z-index: var(--z-sidebar);
  box-shadow: 2px 0 12px rgba(0,0,0,0.12);
  display: flex; flex-direction: column;
  transform: translateX(-100%);
  transition: transform 0.25s ease;
}
.lt-nav-drawer.open { transform: translateX(0); }
.lt-nav-drawer-header {
  padding: 20px 20px 14px;
  border-bottom: 1px solid var(--lt-border-subtle);
}
.lt-nav-drawer-header img { max-width: 120px; display: block; margin-bottom: 10px; }
.lt-nav-drawer-header .nav-user { font-size: 0.82em; color: var(--lt-text-muted); }
.lt-nav-drawer-links a {
  display: block; padding: 11px 20px;
  font-size: 0.9em; color: var(--lt-text-primary);
  border-bottom: 1px solid var(--lt-border-subtle);
  font-weight: 500;
}
.lt-nav-drawer-links a:hover { background: var(--lt-page-bg); }
.lt-nav-drawer-links a.link-signout  { color: var(--color-red-600); }
.lt-nav-drawer-links .signout-form { display: block; }
.lt-nav-drawer-links button.link-signout {
  display: block; width: 100%; text-align: left; padding: 11px 20px;
  font-size: 0.9em; font-weight: 500; color: var(--color-red-600);
  border-bottom: 1px solid var(--lt-border-subtle);
}
.lt-nav-drawer-links button.link-signout:hover { background: var(--lt-page-bg); }
.lt-nav-drawer-links a.link-settings { color: var(--color-purple-600); }

@media (max-width: 1024px), (pointer: coarse) {
  .lt-menu-toggle { display: block; }
  /* Nav drawer replaces user chip on mobile */
  .user-chip { display: none; }
}

/* Mobile padding reduction */
@media (max-width: 600px) {
  body.page-light { padding: 20px 12px; }
}

/* ── 14. Light-theme drop zone (file upload) ────────────────────────────── */
.drop-zone {
  border: 2px dashed var(--lt-drop-border); border-radius: var(--radius-lg);
  padding: 32px 20px; text-align: center; cursor: pointer;
  transition: border-color 0.2s, background 0.2s; background: var(--lt-drop-bg);
}
.drop-zone:hover, .drop-zone.dragover { border-color: var(--color-green-600); background: var(--lt-drop-hover); }
.drop-zone svg { width: 36px; height: 36px; color: var(--lt-drop-border); margin-bottom: 10px; display: block; margin: 0 auto 10px; }
.drop-zone p { margin: 0 0 4px; color: var(--lt-text-secondary); font-size: 0.95em; }
.drop-zone .drop-hint { font-size: 0.82em; color: var(--color-slate-600); }
.drop-zone .drop-filename { font-size: 0.88em; color: var(--color-green-600); font-weight: 600; margin-top: 8px; }
.drop-zone input[type="file"] { display: none; }

/* ── 15. Light-theme preview table ──────────────────────────────────────── */
.preview-wrap { overflow-x: auto; max-height: 260px; border: 1px solid var(--lt-border-light); border-radius: var(--radius-md); }
.preview-wrap table { width: 100%; border-collapse: collapse; font-size: 0.78em; }
.preview-wrap th { background: var(--color-slate-100); padding: 6px 10px; border-bottom: 2px solid var(--color-slate-200); text-align: left; color: var(--lt-text-muted); text-transform: uppercase; letter-spacing: 0.4px; white-space: nowrap; position: sticky; top: 0; }
.preview-wrap td { padding: 5px 10px; border-bottom: 1px solid var(--lt-cell-bg); color: var(--lt-text-dim); white-space: nowrap; }

/* ── 16. Dark-theme data tables ──────────────────────────────────────────── */
/* Add .dk-data-table to any dark-theme editable table for shared styling */
.dk-data-table { width: 100%; border-collapse: collapse; }
.dk-data-table th {
  background: var(--dk-table-header); color: var(--dk-text-muted); font-size: 0.72em;
  text-transform: uppercase; letter-spacing: 0.6px; padding: 8px 8px; text-align: left;
  border-bottom: 2px solid var(--dk-border); white-space: nowrap;
}
.dk-data-table td {
  padding: 5px 6px; border-bottom: 1px solid var(--dk-border-subtle);
  vertical-align: middle; white-space: nowrap;
}
.dk-data-table tbody tr { background: var(--dk-panel-bg); }
.dk-data-table tbody tr:nth-child(even) { background: var(--dk-input-deep); }

.dk-data-table input[type="text"],
.dk-data-table input[type="number"],
.dk-data-table input[type="date"],
.dk-data-table input[type="time"] {
  padding: 5px 8px; background: var(--dk-input-bg);
  border: 1px solid var(--dk-border); color: var(--dk-text-primary);
  border-radius: var(--radius-sm); font-size: 0.84em; font-family: var(--font-family);
  box-sizing: border-box;
}
.dk-data-table input:focus { outline: 2px solid var(--dk-accent); outline-offset: -1px; border-color: var(--dk-accent); }
.dk-data-table select {
  padding: 5px 6px; background: var(--dk-input-bg); border: 1px solid var(--dk-border);
  color: var(--dk-text-primary); border-radius: var(--radius-sm); font-size: 0.84em;
  font-family: var(--font-family); cursor: pointer;
}
.dk-data-table select:focus { outline: 2px solid var(--dk-accent); outline-offset: -1px; border-color: var(--dk-accent); }
.dk-data-table input[type="checkbox"] { width: 16px; height: 16px; cursor: pointer; accent-color: var(--dk-accent); }

/* Shared table accessories */
.del-btn {
  background: none; border: none; color: var(--dk-text-muted); cursor: pointer;
  font-size: 1.1em; padding: 4px 8px; border-radius: var(--radius-sm);
}
.del-btn:hover { color: var(--color-danger); }
.dk-add-btn {
  margin-top: 12px; padding: 8px 18px; background: var(--dk-input-deep);
  color: var(--dk-text-muted); border: 1px dashed var(--dk-border);
  border-radius: var(--radius-sm); cursor: pointer; font-size: 0.88em;
  width: 100%; font-family: var(--font-family);
}
.dk-add-btn:hover { background: var(--dk-border); color: var(--dk-text-primary); }
.empty-hint { text-align: center; padding: 24px 16px; color: var(--dk-text-muted); font-size: 0.85em; font-style: italic; }

/* Filter bar */
.filter-bar { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.filter-bar label { font-size: 0.78em; color: var(--dk-text-muted); font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; margin: 0; }
.filter-bar input {
  max-width: 200px; padding: 6px 10px; background: var(--dk-input-bg);
  border: 1px solid var(--dk-border); color: var(--dk-text-primary);
  border-radius: var(--radius-sm); font-size: 0.85em; font-family: var(--font-family);
}
.filter-bar input:focus { outline: 2px solid var(--dk-accent); outline-offset: -1px; border-color: var(--dk-accent); }

/* ── 17. Component type color strips ────────────────────────────────────── */
.type-pipe             { border-left: 3px solid var(--color-info); }
.type-elbow            { border-left: 3px solid var(--color-orange-500); }
.type-tee              { border-left: 3px solid var(--color-purple-500); }
.type-reducingtee      { border-left: 3px solid #7d4ea8; }
.type-reducer          { border-left: 3px solid var(--color-teal-500); }
.type-swagenipple      { border-left: 3px solid var(--color-green-700); }
.type-cap              { border-left: 3px solid var(--color-coral-500); }
.type-plug             { border-left: 3px solid var(--color-coral-500); }  /* closure family, same as cap */
.type-valve            { border-left: 3px solid var(--color-red-600); }
.type-flange           { border-left: 3px solid var(--color-yellow-400); }
.type-fitting          { border-left: 3px solid var(--color-green-400); }
.type-vessel           { border-left: 3px solid var(--color-purple-500); }
.type-pump             { border-left: 3px solid var(--color-orange-500); }
.type-meter            { border-left: 3px solid var(--color-teal-500); }
.type-launcherreceiver { border-left: 3px solid var(--color-info); }
.type-header           { border-left: 3px solid var(--color-slate-700); }
.type-barrel           { border-left: 3px solid var(--color-info); }
.type-nipple           { border-left: 3px solid var(--color-slate-450); }
.type-coupling         { border-left: 3px solid var(--color-slate-450); }
.type-bushing          { border-left: 3px solid var(--color-slate-300); }
.type-olet             { border-left: 3px solid var(--color-green-500); }
.type-union            { border-left: 3px solid var(--color-slate-600); }
.type-strainer         { border-left: 3px solid var(--color-blue-700); }
.type-other            { border-left: 3px solid var(--color-slate-500); }

/* ── 18. Shared dark-page components ─────────────────────────────────────── */

/* Summary bar (segments, facility) */
.summary-bar { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 16px; }
.summary-chip {
  background: var(--dk-panel-bg); border-radius: 16px; padding: 5px 14px;
  font-size: 0.8em; color: var(--dk-text-muted); border: 1px solid var(--dk-border);
}
.summary-chip strong { color: var(--dk-text-primary); }

/* Calibration badges (facility, facility_exec, equipment) */
.cal-valid   { color: var(--color-green-500); font-weight: 700; }
.cal-expired { color: var(--color-danger); font-weight: 700; }
.cal-unknown { color: var(--dk-text-muted); }

/* Sidebar sections (facility, facility_exec) */
.sb-section { padding: 14px 18px; border-bottom: 1px solid var(--dk-border); font-family: var(--font-family); }
.sb-section:last-child { border-bottom: none; }
.sb-label {
  font-size: 0.72em; text-transform: uppercase; letter-spacing: 0.7px;
  color: var(--dk-text-muted); font-weight: 700; margin-bottom: 8px;
  font-family: var(--font-family);
}
.sb-field { margin-bottom: 9px; font-family: var(--font-family); }
.sb-field label {
  display: block; font-size: 0.75em; color: var(--dk-text-muted);
  text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 3px;
  font-family: var(--font-family);
}
.sb-field input, .sb-field select {
  width: 100%; padding: var(--dk-input-pad); background: var(--dk-input-bg);
  border: 1px solid var(--dk-border); color: var(--dk-text-primary);
  border-radius: var(--radius-sm); font-size: 0.88em; font-family: var(--font-family);
  box-sizing: border-box;
}
.sb-field input:focus, .sb-field select:focus {
  outline: 2px solid var(--dk-accent); border-color: var(--dk-accent); outline-offset: -1px;
}
.sb-field textarea {
  width: 100%; padding: var(--dk-input-pad); background: var(--dk-input-bg);
  border: 1px solid var(--dk-border); color: var(--dk-text-primary);
  border-radius: var(--radius-sm); font-size: 0.85em; font-family: var(--font-family);
  resize: vertical; min-height: 52px; box-sizing: border-box;
}
.sb-row { display: flex; gap: 8px; margin-bottom: 6px; font-family: var(--font-family); }
.sb-row label { font-size: 0.72em; color: var(--dk-text-muted); margin-bottom: 2px; display: block; font-family: var(--font-family); }
.sb-row input, .sb-row select {
  width: 100%; padding: 5px 8px; background: var(--dk-input-bg);
  border: 1px solid var(--dk-border); color: var(--dk-text-primary);
  border-radius: var(--radius-sm); font-size: 0.84em; font-family: var(--font-family);
  box-sizing: border-box;
}
.sb-row .sb-field { flex: 1; }
.sb-kv {
  display: flex; justify-content: space-between; font-size: 0.82em;
  padding: 3px 0; border-bottom: 1px solid var(--dk-border-subtle);
  font-family: var(--font-family);
}
.sb-kv:last-child { border-bottom: none; }
.sb-kv .k { color: var(--dk-text-muted); }
.sb-kv .v { font-family: var(--font-mono); color: var(--dk-text-primary); font-weight: 600; }

/* Chart / plot boxes */
.chart-box {
  background: var(--dk-panel-bg); border-radius: var(--radius-lg); padding: 18px 20px;
}
.chart-box h3 {
  margin: 0 0 12px; font-size: 0.95em; color: var(--dk-text-dim);
  text-transform: uppercase; letter-spacing: 0.5px;
}

/* Pass / fail result badges */
.pass-badge {
  display: inline-block; background: #144a28; color: var(--dk-highlight);
  border-radius: var(--radius-sm); padding: 2px 7px; font-size: 0.78em; font-weight: 700;
}
.fail-badge {
  display: inline-block; background: #4a1414; color: #f87171;
  border-radius: var(--radius-sm); padding: 2px 7px; font-size: 0.78em; font-weight: 700;
}

/* ── 19. Utility classes ────────────────────────────────────────────────── */
.hidden          { display: none; }
.text-center     { text-align: center; }
.text-right      { text-align: right; }
.text-left       { text-align: left; }
.font-mono       { font-family: var(--font-mono); }
.mono            { font-family: var(--font-mono); }
.right           { text-align: right; }
.font-semibold   { font-weight: 600; }
.font-bold       { font-weight: 700; }
.nowrap          { white-space: nowrap; }
.truncate        { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.flex-center     { display: flex; align-items: center; }
.flex-between    { display: flex; justify-content: space-between; align-items: center; }
.flex-wrap       { flex-wrap: wrap; }
.gap-xs          { gap: 4px; }
.gap-sm          { gap: 8px; }
.gap-md          { gap: 12px; }
.gap-lg          { gap: 16px; }
.mt-xs           { margin-top: 4px; }
.mt-sm           { margin-top: 8px; }
.mt-md           { margin-top: 12px; }
.mt-lg           { margin-top: 16px; }
.mb-xs           { margin-bottom: 4px; }
.mb-sm           { margin-bottom: 8px; }
.mb-md           { margin-bottom: 12px; }
.mb-lg           { margin-bottom: 16px; }
.w-full          { width: 100%; }

/* ── 20. Accessibility ───────────────────────────────────────────────────── */

/* Visually hidden, still readable by assistive tech. Use for icon-only buttons,
   empty action-column table headers, and other places where screen-reader text
   is needed without visible UI. */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0);
  /* clip-path also crops the element's layout box to 0×0 so it doesn't
     contribute to documentElement.scrollWidth when nested inside a wide
     scroll-x container. The legacy ``clip`` property is paint-only on
     modern browsers and a screen-reader span at the far right of a
     2000-px-wide table would otherwise inflate the document scroll
     width past the viewport. Fixed in #22. */
  clip-path: inset(50%);
  white-space: nowrap; border: 0;
}

/* Skip-to-content link */
.skip-link {
  position: absolute; left: -9999px; top: auto;
  width: 1px; height: 1px; overflow: hidden;
  z-index: 10000;
  background: var(--color-green-600); color: white;
  padding: 12px 24px; font-size: 0.9em; font-weight: 600;
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  text-decoration: none;
}
.skip-link:focus {
  position: fixed; left: 50%; top: 0;
  transform: translateX(-50%);
  width: auto; height: auto;
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Ensure save-status is announced to screen readers */
.save-status[role="status"] { /* specificity bump for aria-live region */ }

/* Instrument device range + accuracy bands — Equipment and facility pages (static/instrument_editor.js). */
.range-wrap { display: flex; flex-direction: column; gap: 2px; }
.range-wrap input { width: 100%; font-size: 0.82em; padding: 3px 5px; font-family: var(--font-family); }
.acc-ranges { display: flex; flex-direction: column; gap: 4px; }
.acc-range-row { display: flex; gap: 4px; align-items: center; font-size: 0.85em; font-family: var(--font-family); }
.acc-range-row .acc-from,
.acc-range-row .acc-to { flex: 1; min-width: 0; font-size: 0.88em; padding: 5px 4px; text-align: center; font-family: var(--font-family); }
.acc-range-row .acc-pct-sep { color: var(--dk-text-muted); flex-shrink: 0; font-size: 0.82em; white-space: nowrap; font-family: var(--font-family); }
.acc-range-row .acc-value { flex: 1.2; min-width: 0; font-size: 0.88em; padding: 5px 4px; text-align: center; font-family: var(--font-family); }
.acc-range-row select { flex: 1.8; min-width: 0; font-size: 0.85em; padding: 4px 3px; font-family: var(--font-family); }
.acc-range-row .acc-del { background: transparent; border: none; color: var(--dk-text-muted); cursor: pointer; padding: 2px 5px; font-size: 0.95em; flex-shrink: 0; font-family: var(--font-family); }
.acc-range-row .acc-del:hover { color: var(--color-danger); }
.acc-add-btn { background: transparent; border: 1px dashed var(--dk-border); color: var(--dk-text-muted); padding: 4px 10px; font-size: 0.78em; cursor: pointer; border-radius: var(--radius-sm); font-family: var(--font-family); }
.acc-add-btn:hover { border-color: var(--dk-accent); color: var(--dk-accent); }