/* ============================================================
   Beyond Electrical — Shared styles
   ============================================================
   Included the same way auth.js is: <link rel="stylesheet" href="shared.css">
   in every page's <head>, before that page's own <style> block (so a
   page can still override something locally if it genuinely needs
   to — the cascade just falls through to these as the baseline).

   This file exists to stop the same patterns being reinvented
   slightly differently in every page. If you're about to write CSS
   for a button, a card, a modal, a toast, or a table, check here
   first — it's probably already defined, and adding a near-duplicate
   locally is exactly the drift this file is meant to prevent.

   Anything that's genuinely page-specific (a job docket's risk-matrix
   colors, a safety form's signature pad) does NOT belong here — only
   patterns that recur across multiple, unrelated pages.
   ============================================================ */

:root {
  /* Colors — confirmed identical across all 46 pages already; this
     is just the single place that should ever define them going
     forward, instead of 46 copies of the same six lines. */
  --bg: #f7f7f5;
  --surface: #ffffff;
  --border: #e4e2dc;
  --text: #1a1a18;
  --text-muted: #6b6b67;
  --text-hint: #9e9c96;
  --navy: #1a2f5e;
  --blue: #2d5fc4;
  --accent-light: #e8eef5;

  /* Spacing scale — use these instead of ad-hoc padding/margin
     values, so spacing reads as deliberate rather than incidental. */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;

  /* Corner radius — 12px is the standard everywhere except the
     pre-login pages (landing/login/pin), which use a slightly larger
     radius on purpose for a softer, more welcoming first impression.
     Everything past login should use --radius/--radius-lg. */
  --radius: 8px;
  --radius-lg: 12px;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* ── Typography scale ──────────────────────────────────────── */
.page-title { font-size: 20px; font-weight: 600; color: var(--text); }
.page-sub { font-size: 12.5px; color: var(--text-muted); margin-bottom: 1.25rem; max-width: 720px; line-height: 1.5; }
.section-title { font-size: 15px; font-weight: 600; color: var(--text); }
.hint-text { font-size: 11px; color: var(--text-hint); }

/* ── Cards & collapsible sections ──────────────────────────── */
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; margin-bottom: 1.5rem; }
.card-header { padding: 1rem 1.25rem; border-bottom: 1px solid var(--border); font-size: 13px; font-weight: 700; letter-spacing: 0.04em; color: var(--navy); text-transform: uppercase; }
.card-header.collapsible { display: flex; align-items: center; justify-content: space-between; cursor: pointer; user-select: none; }
.card-collapse-caret { width: 26px; height: 26px; border-radius: 50%; background: var(--accent-light); color: var(--navy); display: flex; align-items: center; justify-content: center; font-size: 12px; transition: transform 0.18s; flex-shrink: 0; }
.card-header.collapsible:hover .card-collapse-caret { background: #dde9f7; }
.card-collapse-caret.collapsed { transform: rotate(-90deg); }
.card-collapsible-body.collapsed { display: none; }

/* ── Buttons ────────────────────────────────────────────────
   .btn-primary / .btn-secondary are the standard pair going
   forward. .btn-add and .btn-danger exist because they're
   semantically distinct enough (a green "add" affordance, a
   destructive red action) to keep as their own named variants
   rather than force everything into just two classes. */
.btn-primary { background: var(--navy); border: none; border-radius: var(--radius); padding: 9px 18px; font-size: 13px; font-weight: 500; cursor: pointer; color: #fff; white-space: nowrap; }
.btn-primary:hover { opacity: 0.85; }
.btn-primary:disabled { opacity: 0.5; cursor: default; }
.btn-secondary { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 9px 18px; font-size: 13px; cursor: pointer; color: var(--text); white-space: nowrap; }
.btn-secondary:hover { background: var(--bg); }
.btn-danger { background: #fde8e8; border: 1px solid #f5c6c6; border-radius: var(--radius); padding: 9px 18px; font-size: 13px; cursor: pointer; color: #8b1a1a; white-space: nowrap; }
.btn-danger:hover { background: #fbd5d5; }
.btn-icon { background: none; border: none; cursor: pointer; color: var(--text-hint); font-size: 13px; padding: 4px 6px; border-radius: 4px; }
.btn-icon.danger:hover { background: #fde8e8; color: #8b1a1a; }

/* ── Forms ──────────────────────────────────────────────────── */
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.form-group { display: flex; flex-direction: column; gap: 5px; }
.form-group.full { grid-column: 1 / -1; }
.form-group label { font-size: 11px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.05em; }
.form-group input, .form-group select, .form-group textarea {
  font-size: 13px; padding: 8px 12px; border-radius: var(--radius);
  border: 1px solid var(--border); background: var(--surface); color: var(--text);
  outline: none; font-family: inherit;
}

/* ── Tables ─────────────────────────────────────────────────── */
table { border-collapse: collapse; font-size: 13px; width: 100%; }
th { font-size: 10.5px; font-weight: 600; color: var(--text-muted); text-align: center; padding: 10px 12px; border-bottom: 1px solid var(--border); text-transform: uppercase; letter-spacing: 0.04em; background: #fafaf8; white-space: nowrap; }
td { padding: 10px 12px; border-bottom: 1px solid var(--border); text-align: center; }
tr:last-child td { border-bottom: none; }
.table-scroll { overflow-x: auto; }
/* Sticky first column on any scrollable table — automatic for every
   table using .table-scroll, not just ones built with this in mind. */
.table-scroll th:first-child, .table-scroll td:first-child { position: sticky; left: 0; z-index: 2; }
.table-scroll th:first-child { background: #fafaf8; z-index: 3; }
.table-scroll td:first-child { background: var(--surface); text-align: left; font-weight: 500; }

/* For a TALL table that needs its OWN internal vertical scroll with
   the header staying visible — different from .table-scroll above
   (which is about wide tables scrolling horizontally). Wrap the
   <table> in <div class="table-scroll-y"> to get this. Caps at 70vh
   so the table scrolls internally instead of growing the whole page
   indefinitely. */
.table-scroll-y { overflow-x: auto; overflow-y: auto; max-height: 70vh; border-radius: var(--radius-lg); }
.table-scroll-y th { position: sticky; top: 0; z-index: 2; }

/* ── Banners (errors, reminders, info) ─────────────────────── */
.error-bar { background: #fde8e8; border: 1px solid #f5c6c6; border-radius: var(--radius); padding: 10px 14px; margin-bottom: 1rem; font-size: 13px; color: #8b1a1a; display: none; }
.error-bar.show { display: block; }
.reminder-bar { background: #fff3cd; border: 1px solid #fde4a3; border-radius: var(--radius); padding: 10px 14px; margin-bottom: 1rem; font-size: 13px; color: #7c5c00; display: none; }
.reminder-bar.show { display: block; }
.reminder-bar.info { background: #e8eef5; border-color: #c9d9ec; color: #1a2f5e; }

/* ── Toast ──────────────────────────────────────────────────── */
.toast { position: fixed; bottom: 1.5rem; right: 1.5rem; background: #1a1a18; color: #fff; padding: 10px 18px; border-radius: var(--radius); font-size: 13px; z-index: 300; opacity: 0; transform: translateY(8px); transition: all 0.2s; pointer-events: none; }
.toast.show { opacity: 1; transform: translateY(0); }

/* Error toast — created automatically by showError() in shared.js,
   no HTML needed on the page. Sits fixed at the top-center of the
   viewport rather than bottom-right like the success toast, and
   independently of the .error-bar (which stays in the page's normal
   flow) — an error-bar scrolled out of view is exactly the mobile
   problem this exists to solve, so this needs its own fixed position
   rather than reusing/extending the in-flow bar. */
.error-toast { position: fixed; top: 16px; left: 50%; transform: translateX(-50%) translateY(-10px); background: #c62828; color: #fff; padding: 12px 20px; border-radius: var(--radius); font-size: 13px; font-weight: 500; z-index: 500; opacity: 0; pointer-events: none; transition: opacity 0.2s, transform 0.2s; max-width: calc(100vw - 32px); box-shadow: 0 4px 16px rgba(0,0,0,0.2); text-align: center; }
.error-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ── Modals ─────────────────────────────────────────────────── */
.modal-bg { position: fixed; inset: 0; background: rgba(0,0,0,0.4); display: flex; align-items: center; justify-content: center; z-index: 400; opacity: 0; pointer-events: none; transition: opacity 0.15s; padding: 1.5rem; }
.modal-bg.open { opacity: 1; pointer-events: all; }
.modal-box { background: var(--surface); border-radius: var(--radius-lg); border: 1px solid var(--border); padding: 1.5rem; width: 400px; max-width: 100%; box-shadow: 0 20px 60px rgba(0,0,0,0.18); }
.modal-box h3 { font-size: 15px; font-weight: 600; margin-bottom: 4px; }
.modal-box-sub { font-size: 12.5px; color: var(--text-muted); margin-bottom: 1rem; }
.modal-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 1rem; }

/* ── Multi-select dropdown ─────────────────────────────────────
   A compact dropdown that opens a checkbox list, for "pick any
   number of X" filters. Built via createMultiSelect() in shared.js —
   don't hand-roll this per page, it's exactly the kind of control
   that's easy to reimplement slightly differently every time. */
.multiselect { position: relative; display: inline-block; min-width: 180px; }
.multiselect-btn { width: 100%; text-align: left; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 8px 12px; font-size: 13px; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 8px; color: var(--text); font-family: inherit; }
.multiselect-btn::after { content: '\25be'; color: var(--text-hint); font-size: 11px; }
.multiselect-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.multiselect-panel { position: absolute; top: 100%; left: 0; margin-top: 4px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: 0 8px 24px rgba(0,0,0,0.12); z-index: 60; min-width: 220px; max-height: 260px; overflow-y: auto; padding: 6px; display: none; }
.multiselect-panel.open { display: block; }
.multiselect-option { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 6px; cursor: pointer; font-size: 13px; white-space: nowrap; }
.multiselect-option:hover { background: var(--bg); }
.multiselect-option input { pointer-events: none; }
.multiselect-actions { display: flex; gap: 10px; padding: 6px 8px 2px; border-top: 1px solid var(--border); margin-top: 4px; }
.multiselect-actions button { font-size: 11px; background: none; border: none; color: var(--blue); cursor: pointer; padding: 2px 0; font-family: inherit; }

/* Offline data banner — shown when a page falls back to a
   locally-saved copy of data because a live fetch failed (no
   signal). See saveOfflineCache/loadOfflineCache/renderOfflineBanner
   in shared.js. */
.offline-data-banner { background: #fef3e7; color: #9a5b0c; font-size: 12.5px; font-weight: 500; padding: 8px 14px; border-radius: var(--radius); margin-bottom: 12px; }
