/* ================================================================
   WEB WIZARD SYSTEM — White sidebar + desktop content layout
   ================================================================
   The gold standard for ALL prototype web browser frames.
   Reference: disputes-change-orders.html (approved 2026-03-17)
   Pattern: contractor-intake-wizard.html (white wizard sidebar)

   Include AFTER atlas-shared.css:
     <link rel="stylesheet" href="shared/web-wizard.css">

   Every mobile screen → one browser frame with wizard sidebar.
   ================================================================ */

/* ─── WIZARD LAYOUT ─── */
.wizard-layout {
  display: flex;
  min-height: 560px;
}

/* ─── WIZARD SIDEBAR (white, numbered nav) ─── */
.wizard-sidebar {
  width: 200px;
  background: var(--white);
  border-right: var(--borderThin) solid var(--lightGray);
  padding: var(--sp-lg) 0;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
}
.wizard-sidebar-logo {
  padding: var(--sp-sm) var(--sp-lg) var(--sp-lg);
  border-bottom: var(--borderThin) solid var(--lightGray);
  margin-bottom: var(--sp-md);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-xs);
  text-align: center;
}
.wizard-sidebar-logo img { height: 36px; }
.wizard-sidebar-logo span {
  font-size: var(--text-micro);
  font-weight: 600;
  color: var(--midGray);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* ─── WIZARD NAV ITEMS ─── */
.wizard-nav {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--sp-xxs);
  padding: 0 var(--sp-xs);
}
.wizard-nav-item {
  display: flex;
  align-items: center;
  gap: var(--sp-md);
  padding: var(--sp-sm) var(--sp-md);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  color: var(--midGray);
  cursor: pointer;
  transition: all .15s;
}
.wizard-nav-item:hover { background: var(--lightPrimary); }
.wizard-nav-item.active {
  background: rgba(184,80,66,0.08);
  color: var(--terracotta);
  font-weight: 600;
}
.wizard-nav-item.complete { color: var(--charcoal); }
.wizard-nav-item.locked { opacity: 0.4; }

/* ─── NAV ICONS (numbered circles) ─── */
.nav-icon {
  width: 24px;
  height: 24px;
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-xs);
  flex-shrink: 0;
}
.nav-icon i { font-size: 11px; }
.nav-icon.done { background: var(--success); color: var(--white); }
.nav-icon.current { background: var(--terracotta); color: var(--white); }
.nav-icon.pending { background: var(--lightGray); color: var(--midGray); }
.nav-icon.locked-icon { background: var(--slate); color: var(--coolGray); }

/* ─── WIZARD PROGRESS BAR ─── */
.wizard-progress {
  padding: var(--sp-md) var(--sp-lg);
  border-top: var(--borderThin) solid var(--lightGray);
  margin-top: auto;
}
.wizard-progress .progress-label {
  font-size: var(--text-xs);
  color: var(--midGray);
}
.progress-bar {
  height: 6px;
  background: var(--lightGray);
  border-radius: var(--radius-full);
  overflow: hidden;
  margin-top: var(--sp-sm);
}
.progress-fill {
  height: 100%;
  background: var(--terracotta);
  border-radius: var(--radius-full);
  transition: width .3s;
}

/* ─── WIZARD CONTENT AREA ─── */
.wizard-content {
  flex: 1;
  padding: var(--sp-xxxl);
  overflow-y: auto;
  background: var(--lightPrimary);
}
.wizard-content-header {
  margin-bottom: var(--sp-xxl);
}
.wizard-content-header h2 {
  font-size: var(--text-xxl);
  font-weight: 700;
  color: var(--charcoal);
  margin-bottom: var(--sp-xs);
}
.wizard-content-header p {
  font-size: var(--text-sm);
  color: var(--midGray);
  line-height: 1.6;
}
.step-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-xs);
  font-size: var(--text-micro);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--terracotta);
  margin-bottom: var(--sp-sm);
}

/* ─── PANEL CARDS (content containers) ─── */
.panel-card {
  background: var(--white);
  border: var(--borderThin) solid var(--slate);
  border-radius: var(--radius-lg);
  padding: var(--sp-lg);
}
.panel-card + .panel-card { margin-top: var(--sp-lg); }
.panel-card.tipped-info { border-left: var(--borderAccent) solid var(--info); }
.panel-card.tipped-warning { border-left: var(--borderAccent) solid var(--warning); }
.panel-card.tipped-success { border-left: var(--borderAccent) solid var(--success); }
.panel-card.tipped-terra { border-left: var(--borderAccent) solid var(--terracotta); }

/* Panel card without padding (for flush list items) */
.panel-card-flush {
  background: var(--white);
  border: var(--borderThin) solid var(--slate);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.panel-card-flush + .panel-card-flush { margin-top: var(--sp-lg); }

/* Panel header (icon + title inside panel cards) */
.panel-header {
  display: flex;
  align-items: center;
  gap: var(--sp-sm);
  margin-bottom: var(--sp-md);
}
.panel-header.flush {
  padding: var(--sp-lg);
  border-bottom: var(--borderThin) solid var(--lightGray);
  margin-bottom: 0;
}
.panel-header-title {
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--charcoal);
}

/* ─── COMPACT LIST ITEMS ─── */
.compact-item {
  display: flex;
  align-items: center;
  gap: var(--sp-md);
  padding: var(--sp-md) var(--sp-lg);
  border-bottom: var(--borderThin) solid var(--lightGray);
}
.compact-item:last-child { border-bottom: none; }
.compact-item.selected { background: rgba(184,80,66,0.04); }
.compact-item-content,
.compact-item-body { flex: 1; min-width: 0; }
.compact-item-title {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--charcoal);
}
.compact-item-sub {
  font-size: var(--text-xs);
  color: var(--midGray);
}

/* ─── KPI STAT CARDS ─── */
.kpi-stat {
  background: var(--white);
  border: var(--borderThin) solid var(--slate);
  border-radius: var(--radius-lg);
  padding: var(--sp-xl);
  text-align: center;
}
.kpi-stat-value,
.kpi-value {
  font-size: var(--text-xxl);
  font-weight: 800;
  color: var(--charcoal);
}
.kpi-stat-label,
.kpi-label {
  font-size: var(--text-micro);
  font-weight: 600;
  color: var(--midGray);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-top: var(--sp-xs);
}

/* Color variants for KPI values */
.kpi-value.success, .kpi-stat-value.success { color: var(--success); }
.kpi-value.error, .kpi-stat-value.error { color: var(--error); }
.kpi-value.warning, .kpi-stat-value.warning { color: var(--warning); }
.kpi-value.terracotta, .kpi-stat-value.terracotta { color: var(--terracotta); }

/* ─── INLINE BADGES ─── */
.inline-badge {
  padding: var(--sp-xxs) var(--sp-sm);
  border-radius: var(--radius-sm);
  font-size: var(--text-micro);
  font-weight: 700;
  white-space: nowrap;
  flex-shrink: 0;
}
.inline-badge.success { background: var(--lightSuccess); color: var(--success); }
.inline-badge.error { background: var(--lightError); color: var(--error); }
.inline-badge.warning { background: var(--lightWarning); color: var(--warning); }
.inline-badge.info { background: var(--lightInfo); color: var(--info); }
.inline-badge.neutral { background: var(--cream); color: var(--midGray); }

/* ─── CARD HEADER (icon + title) ─── */
.card-header {
  display: flex;
  align-items: center;
  gap: var(--sp-sm);
  margin-bottom: var(--sp-md);
}
.card-header-title {
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--charcoal);
}

/* ─── CHART PLACEHOLDER ─── */
.chart-placeholder {
  background: var(--cream);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--coolGray);
  min-height: 160px;
}

/* ─── NOTIFICATION BANNERS (tipped) ─── */
.notif {
  display: flex;
  align-items: center;
  gap: var(--sp-md);
  padding: var(--sp-md) var(--sp-lg);
  border-radius: var(--radius-md);
  margin-bottom: var(--sp-md);
  font-size: var(--text-sm);
  border-left: var(--borderAccent) solid transparent;
}
.notif.info { background: var(--lightInfo); color: var(--info); border-left-color: var(--info); }
.notif.warn { background: var(--lightWarning); color: var(--warning); border-left-color: var(--warning); }
.notif.err { background: var(--lightError); color: var(--error); border-left-color: var(--error); }
.notif.ok { background: var(--lightSuccess); color: var(--success); border-left-color: var(--success); }

/* ─── PULSATING GLOW RING ─── */
@keyframes glowPulse {
  0% { box-shadow: 0 0 0 0 rgba(0,45,77,0.25); }
  70% { box-shadow: 0 0 0 18px rgba(0,45,77,0); }
  100% { box-shadow: 0 0 0 0 rgba(0,45,77,0); }
}
@keyframes glowPulseWarning {
  0% { box-shadow: 0 0 0 0 rgba(237,137,54,0.25); }
  70% { box-shadow: 0 0 0 18px rgba(237,137,54,0); }
  100% { box-shadow: 0 0 0 0 rgba(237,137,54,0); }
}
@keyframes glowPulseSuccess {
  0% { box-shadow: 0 0 0 0 rgba(72,187,120,0.25); }
  70% { box-shadow: 0 0 0 18px rgba(72,187,120,0); }
  100% { box-shadow: 0 0 0 0 rgba(72,187,120,0); }
}
.ic.hero.glow { animation: glowPulse 2s ease-in-out infinite; }
.ic.hero.glow-warning { animation: glowPulseWarning 2s ease-in-out infinite; }
.ic.hero.glow-success { animation: glowPulseSuccess 2s ease-in-out infinite; }

/* ─── FORM ELEMENTS (web) ─── */
.wiz-form-group { margin-bottom: var(--sp-lg); }
.wiz-form-label {
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--charcoal);
  margin-bottom: var(--sp-xs);
  display: block;
}
.wiz-form-input {
  width: 100%;
  padding: var(--sp-md);
  border: var(--borderThin) solid var(--slate);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  color: var(--charcoal);
  font-family: inherit;
  background: var(--white);
}
.wiz-form-input::placeholder { color: var(--coolGray); }
.wiz-form-input:focus { border-color: var(--terracotta); outline: none; }
.wiz-form-textarea {
  width: 100%;
  padding: var(--sp-md);
  border: var(--borderThin) solid var(--slate);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  color: var(--charcoal);
  font-family: inherit;
  background: var(--white);
  min-height: 80px;
  resize: vertical;
}

/* ─── TOGGLE (web settings) ─── */
.wiz-toggle {
  width: 44px;
  height: 26px;
  background: var(--lightGray);
  border-radius: var(--radius-full);
  position: relative;
  cursor: pointer;
  flex-shrink: 0;
}
.wiz-toggle.on { background: var(--terracotta); }
.wiz-toggle::after {
  content: '';
  position: absolute;
  width: 20px;
  height: 20px;
  border-radius: var(--radius-full);
  background: var(--white);
  top: 3px;
  left: 3px;
  transition: transform 0.2s;
  box-shadow: 0 1px 3px rgba(0,0,0,0.15);
}
.wiz-toggle.on::after { transform: translateX(18px); }

/* ─── SETTINGS ROW ─── */
.settings-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--sp-md) 0;
}
.settings-row:not(:last-child) {
  border-bottom: var(--borderThin) solid var(--lightGray);
}
.settings-label {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--charcoal);
}
.settings-sub {
  font-size: var(--text-xs);
  color: var(--midGray);
}

/* ─── CHIPS (web) ─── */
.wiz-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-sm);
}
.wiz-chip {
  padding: var(--sp-sm) var(--sp-lg);
  border-radius: var(--radius-pill);
  border: var(--borderThick) solid var(--slate);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--charcoal);
  cursor: pointer;
  background: var(--white);
}
.wiz-chip.active {
  border-color: var(--terracotta);
  background: var(--terracotta);
  color: var(--white);
}

/* ─── BUTTONS (web) ─── */
.wiz-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-sm);
  padding: var(--sp-md) var(--sp-xl);
  border-radius: var(--radius-pill);
  font-size: var(--text-sm);
  font-weight: 600;
  border: none;
  cursor: pointer;
  font-family: inherit;
}
.wiz-btn.primary { background: var(--terracotta); color: var(--white); }
.wiz-btn.outline { background: transparent; border: var(--borderThick) solid var(--slate); color: var(--charcoal); }
.wiz-btn.outline-error { background: transparent; border: var(--borderThick) solid var(--error); color: var(--error); }
.wiz-btn.success { background: var(--success); color: var(--white); }
.wiz-btn.ghost { background: transparent; color: var(--midGray); }

/* ─── UTILITY GRIDS ─── */
.wiz-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-lg); }
.wiz-grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: var(--sp-lg); }
.wiz-grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-lg); }
.wiz-grid-5 { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--sp-lg); }

/* ─── SPACING UTILITIES ─── */
.wiz-mb-sm { margin-bottom: var(--sp-sm); }
.wiz-mb-md { margin-bottom: var(--sp-md); }
.wiz-mb-lg { margin-bottom: var(--sp-lg); }
.wiz-mb-xl { margin-bottom: var(--sp-xl); }
.wiz-mb-xxl { margin-bottom: var(--sp-xxl); }
.wiz-mt-md { margin-top: var(--sp-md); }
.wiz-mt-lg { margin-top: var(--sp-lg); }

/* ─── DETAIL ROWS (key/value pairs) ─── */
.detail-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--sp-sm) 0;
  font-size: var(--text-sm);
}
.detail-row:not(:last-child) {
  border-bottom: var(--borderThin) solid var(--lightGray);
}
.detail-row .label { color: var(--midGray); }
.detail-row .value { font-weight: 600; color: var(--charcoal); }

/* ─── SECTION TITLE (uppercase label inside content) ─── */
.wiz-section-title {
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--midGray);
  margin-bottom: var(--sp-md);
}

/* ─── PAGE FOOTER ─── */
.page-footer {
  text-align: center;
  padding: var(--sp-xxxxl) var(--sp-xxl);
  font-size: var(--text-sm);
  color: var(--chromeMuted, #888);
}