/* Lightstone brand layer — CSS-variable overrides on top of Bootstrap defaults */
/* Values per DESIGN.md (colors / rounded / typography), mirrored from
   mockups/key-01-brand-and-load.html's <style> block. */
:root {
  --bs-primary: #002D72;
  --bs-primary-rgb: 0, 45, 114;
  --bs-link-color: #0033A0;
  --bs-link-hover-color: #002050;
  --bs-success: #658D1B;
  --bs-success-rgb: 101, 141, 27;
  --bs-warning: #F2CD00;
  --bs-warning-rgb: 242, 205, 0;
  --bs-danger: #DA291C;
  --bs-danger-rgb: 218, 41, 28;
  --bs-info: #00AECC;
  --bs-border-radius-sm: 4px;
  --bs-border-radius: 8px;
  --bs-border-radius-lg: 12px;
  --bs-body-font-family: Arial, Helvetica, sans-serif;
}

/* Hand-built helper classes carried over from the mockup composition reference
   (key-01-brand-and-load.html) — everything else uses stock Bootstrap classes. */
.app-shell { background: #F4F5F6; min-height: 640px; }
.step-circle { width: 30px; height: 30px; font-size: .8rem; font-weight: 700; }
.step-label { font-size: .75rem; font-weight: 700; letter-spacing: .03em; }
.step-connector { height: 2px; background: var(--bs-border-color); flex: 1; margin-top: 15px; }
/* Fixed to the viewport bottom so the primary wizard actions stay reachable regardless of
   page scroll position; each page's <main> already reserves padding-bottom clearance for it. */
.action-bar { box-shadow: 0 -2px 8px rgba(16,24,32,0.06); position: fixed; bottom: 0; left: 0; right: 0; z-index: 1030; }

/* Ported from mockups/key-01-brand-and-load.html — first used by Story 1.3's disabled dropzone
   scaffold; file-drop/parsing behavior itself is Story 1.4's scope. The dropzone is now always
   enabled from page load (files can be staged before a brand is chosen), so there is no more
   .disabled state to style. */
.dropzone { border: 2px dashed #B9C6D9; border-radius: var(--bs-border-radius); background: #FAFBFC; cursor: pointer; }
.dropzone .fa-cloud-arrow-up { color: var(--bs-link-color); }
.dropzone.drag-hover { border-color: var(--bs-link-color); background: #EAF0FA; }
.file-icon-wrap { width: 34px; height: 34px; background: #EAF0FA; color: var(--bs-link-color); border-radius: var(--bs-border-radius-sm); }

/* Ported from mockups/key-02-map-columns.html — first used by Story 2.1's Back button.
   Bootstrap has no stock equivalent for this secondary-button treatment (DESIGN.md Button —
   secondary): brand-dark-blue text with a 3px brand-blue bottom border instead of a full outline. */
.btn-brand-secondary { background: #fff; color: var(--bs-primary); font-weight: 700; border: none; border-bottom: 3px solid var(--bs-link-color); border-radius: 4px; padding: .5rem 1.1rem .35rem; }
.btn-brand-secondary:hover { background: #f4f5f6; }

/* Ported from mockups/key-02-map-columns.html — first used by Story 2.2's distinct
   status-value assignment table. */
.assign-toggle .btn { font-size: .75rem; font-weight: 700; padding: .3rem .75rem; }
.assign-toggle .btn-check:checked + .btn-outline-success { background: var(--bs-success); color: #fff; border-color: var(--bs-success); }
.assign-toggle .btn-check:checked + .btn-outline-warning { background: var(--bs-warning); color: #1A1A1A; border-color: var(--bs-warning); }
.raw-value { font-family: Consolas, monospace; font-weight: 700; background: #F4F5F6; padding: .1rem .5rem; border-radius: 4px; }

/* Story 2.2's own design choice (not specified in DESIGN.md) — a subtle left-edge accent for
   an unassigned status-value row (EXPERIENCE.md's "no popup nagging" state pattern). */
tr.status-row-unassigned td:first-child { box-shadow: inset 3px 0 0 var(--bs-warning); }

/* Ported from mockups/key-03-preview-and-confirm.html's #state-complete block — first used by
   Story 3.3's Import Complete screen. */
.complete-icon { width: 64px; height: 64px; }

/* Story 3.3 (AC #3): global brand-blue 2px-offset focus ring, closing the gap left by Bootstrap's
   stock :focus-visible outline (which uses --bs-primary, brand-dark-blue, not brand-blue).
   Applies to every page since brand.css is shared by all of them. */
:focus-visible { outline: 2px solid var(--bs-link-color); outline-offset: 2px; }

/* Full-page busy overlay shown by js/brand-load.js while a file upload is in flight (larger
   CSV/XLSX files can take a moment to parse). z-index is above the rest of the page's content
   but below Bootstrap's modal backdrop (1050+) since a modal never opens while this is showing.
   js/brand-load.js also marks the rest of the page `inert` while this is visible, so it blocks
   keyboard and assistive-tech interaction, not just mouse clicks. */
.file-load-overlay { position: fixed; inset: 0; z-index: 1040; display: flex; align-items: center; justify-content: center; background: rgba(var(--bs-dark-rgb), .55); }