/* ===== DEALER APPLICATION STYLES ===== */

/* ===== SIDEBAR CUSTOM PROPERTIES ===== */
:root {
  --sidebar-width: 240px;
  --sidebar-bg: rgba(152, 193, 217, 0.25);
  --sidebar-hover: rgba(31, 58, 77, 0.08);
  --sidebar-active-bg: rgba(31, 58, 77, 0.05);
}

/* ===== LAYOUT ===== */
.dealer-layout {
  display: block;
  min-height: 100vh;
}

/* ===== SIDEBAR: FIXED, LABELS ALWAYS VISIBLE ===== */
.sidebar {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: var(--sidebar-width);
  background-color: var(--sidebar-bg);
  color: var(--mb-primary);
  display: flex;
  flex-direction: column;
  z-index: 200;
  overflow-y: auto;
}

/* ===== SIDEBAR HEADER ===== */
.sidebar-header {
  padding: var(--space-4);
  border-bottom: 1px solid rgba(31, 58, 77, 0.15);
  min-height: 56px;
}

.sidebar-header .sidebar-logo img {
  height: 48px;
  margin: 0 auto;
  width: auto;
  object-fit: contain;
}

.sidebar-header .sidebar-user-info {
  margin-top: var(--space-8);
}

.sidebar-header .user-name {
  font-weight: 600;
  font-size: var(--font-size-sm);
}

.sidebar-header .user-role {
  font-size: var(--font-size-xs);
  color: var(--mb-primary);
  opacity: 0.7;
  text-transform: capitalize;
}

.sidebar-header .user-org {
  font-size: var(--font-size-xs);
  color: var(--mb-primary);
  opacity: 0.6;
}

.sidebar-header .user-sub {
  font-size: 10px;
  color: var(--mb-primary);
  opacity: 0.5;
  font-style: italic;
}

/* ===== CONTEXT SWITCHER (CHANGE-014) ===== */
.sidebar-context-switcher {
  margin-top: var(--space-2);
  padding: var(--space-1) 0;
  border-top: 1px solid rgba(31, 58, 77, 0.12);
}

.context-item {
  padding: 6px 10px;
  cursor: pointer;
  border-radius: 4px;
  border-left: 3px solid transparent;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.context-item:hover {
  background: rgba(31, 58, 77, 0.08);
}

.context-item.context-active {
  background: rgba(31, 58, 77, 0.05);
  border-left-color: var(--mb-action, #ee6c4d);
  cursor: default;
}

.context-org {
  font-size: 12px;
  font-weight: 600;
  color: var(--mb-primary);
}

.context-sub {
  font-size: 10px;
  color: var(--mb-primary);
  opacity: 0.6;
}

/* ===== MANUFACTURER VISIBILITY ICON (CHANGE-014) ===== */
.mfr-vis-icon {
  display: inline-flex;
  align-items: center;
  margin-left: 6px;
  vertical-align: middle;
  cursor: help;
  opacity: 0.7;
}

.mfr-vis-icon:hover {
  opacity: 1;
}

/* ===== DISCLOSURE BLOCK (CHANGE-014) ===== */
.disclosure-block {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  background: rgba(152, 193, 217, 0.15);
  border-left: 3px solid #98c1d9;
  padding: 12px 16px;
  margin-top: var(--space-4);
  margin-bottom: var(--space-4);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-sm);
  line-height: 1.5;
  color: var(--mb-primary);
}

.disclosure-icon {
  font-size: 18px;
  flex-shrink: 0;
}

/* ===== SIDEBAR MENU ===== */
.sidebar-menu {
  list-style: none;
  padding: var(--space-2) 0;
  flex: 1;
  overflow-y: auto;
}

/* ===== SECTION DIVIDERS ===== */
.menu-section + .menu-section {
  border-top: 1px solid rgba(31, 58, 77, 0.1);
}

/* ===== TOP-LEVEL MENU TOGGLE ===== */
.menu-toggle {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: 0 var(--space-4);
  height: 44px;
  color: var(--mb-primary);
  opacity: 0.75;
  text-decoration: none;
  cursor: pointer;
  transition: color 0.15s ease, background-color 0.15s ease, opacity 0.15s ease;
  white-space: nowrap;
  border-left: 3px solid transparent;
}

.menu-toggle:hover {
  color: var(--mb-primary);
  opacity: 1;
  background-color: var(--sidebar-hover);
  text-decoration: none;
}

.menu-toggle .menu-icon {
  width: 20px;
  min-width: 20px;
  text-align: center;
  font-size: var(--font-size-base);
  font-style: normal;
}

.menu-toggle .menu-label {
  font-size: var(--font-size-sm);
  font-weight: 500;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
}

.menu-toggle .menu-chevron {
  margin-left: auto;
  transition: transform 0.2s ease;
  font-size: var(--font-size-xs);
}

/* CHEVRON ROTATES WHEN SECTION IS OPEN */
.menu-section.open .menu-toggle .menu-chevron {
  transform: rotate(90deg);
}

/* ===== ACTIVE SECTION INDICATOR ===== */
.menu-section.section-active > .menu-toggle {
  color: var(--mb-primary);
  opacity: 1;
  border-left-color: var(--mb-primary);
  font-weight: 600;
}

/* ===== SUB-ITEMS (ACCORDION CHILDREN) ===== */
.menu-children {
  list-style: none;
  max-height: 0;
  overflow: hidden;
  transition: max-height 250ms ease;
  background-color: rgba(31, 58, 77, 0.06);
}

.menu-section.open .menu-children {
  max-height: 300px;
}

.menu-children li a {
  display: flex;
  align-items: center;
  padding: 0 var(--space-4) 0 40px;
  min-height: 36px;
  color: var(--mb-primary);
  opacity: 0.7;
  font-size: var(--font-size-sm);
  font-weight: 400;
  text-decoration: none;
  transition: color 0.15s ease, background-color 0.15s ease, opacity 0.15s ease;
  border-left: 3px solid transparent;
}

.menu-children li a:hover {
  color: var(--mb-primary);
  opacity: 1;
  background-color: var(--sidebar-hover);
  text-decoration: none;
}

.menu-children li a.active {
  color: var(--mb-primary);
  opacity: 1;
  font-weight: 600;
  background-color: var(--sidebar-active-bg);
  border-left-color: var(--mb-primary);
}

/* ===== SIDEBAR PIN CONTROL =====
   Sits just above the footer with 2rem of breathing room above the footer's
   top border. When the sidebar is pinned (default) this row is brighter to
   indicate the active state; clicking toggles the persisted pin and the
   .sidebar-unpinned body class. */
.sidebar-pin {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: 0 var(--space-4);
  height: 40px;
  margin-top: auto;
  margin-bottom: 2rem;
  cursor: pointer;
  color: var(--mb-primary);
  opacity: 0.75;
  font-size: var(--font-size-sm);
  font-weight: 500;
  transition: opacity 0.15s ease, background-color 0.15s ease;
  border-left: 3px solid transparent;
}
.sidebar-pin:hover { opacity: 1; background-color: var(--sidebar-hover); }
.sidebar-pin__icon {
  width: 20px;
  min-width: 20px;
  text-align: center;
  font-size: var(--font-size-base);
}
/* Pinned (default) is the "active" visual state. */
body:not(.sidebar-unpinned) .sidebar-pin {
  opacity: 1;
  border-left-color: var(--mb-primary);
  font-weight: 600;
}

/* ===== SIDEBAR FOOTER ===== */
.sidebar-footer {
  padding: var(--space-3) var(--space-4);
  border-top: 1px solid rgba(31, 58, 77, 0.15);
}

.sidebar-footer .sidebar-signout {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) 0;
  color: var(--mb-primary);
  opacity: 0.7;
  background: none;
  border: none;
  cursor: pointer;
  font-size: var(--font-size-sm);
  font-weight: 700;
  font-family: var(--font-family);
  transition: color 0.15s ease, opacity 0.15s ease;
}

.sidebar-footer .sidebar-signout:hover {
  color: var(--mb-primary);
  opacity: 1;
}

.sidebar-footer .sidebar-powered {
  font-size: var(--font-size-xs);
  font-weight: 700;
  color: var(--mb-primary);
  opacity: 0.5;
  padding-top: var(--space-1);
  text-align: center;
  margin: 0 auto;
}

.sidebar-footer .sidebar-powered a {
  color: inherit;
  text-decoration: underline;
}

.sidebar-footer .sidebar-powered a:hover {
  opacity: 1;
}

/* ===== COLLAPSED SIDEBAR (unpinned) =====
   The sidebar narrows just enough to drop top-level menu labels (icons only).
   The user-info and context-switcher blocks keep their current content/sizing.
   The logo shrinks. Accordion children are hidden in collapsed mode — clicking
   a menu icon expands the sidebar (handled in sidebar.js) and reveals them. */
body.sidebar-unpinned .sidebar { width: 200px; }
body.sidebar-unpinned .dealer-main { margin-left: 200px; }
body.sidebar-unpinned .sidebar-header .sidebar-logo img { height: 32px; }
body.sidebar-unpinned .menu-toggle .menu-label,
body.sidebar-unpinned .menu-toggle .menu-chevron {
  display: none;
}
body.sidebar-unpinned .menu-children { display: none; }
body.sidebar-unpinned .sidebar-pin__label { display: none; }

/* ===== MAIN CONTENT AREA ===== */
.dealer-main {
  margin-left: var(--sidebar-width);
  padding: var(--space-6) var(--space-8);
  background-color: var(--gray-50);
  min-height: 100vh;
}

/* ===== TOP BAR ===== */
.dealer-topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-6);
  padding: var(--space-3) var(--space-5);
  background-color: var(--mb-primary);
  color: var(--neutral-white);
  border-radius: var(--radius-md);
  border-bottom: none;
}

.dealer-topbar h1 {
  margin-bottom: 0;
  font-size: var(--font-size-xl);
  color: var(--neutral-white);
}

.dealer-topbar .text-muted {
  color: rgba(255, 255, 255, 0.7);
}

/* ===== LOGIN SCREEN (NO SIDEBAR) ===== */
.login-container {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--mb-primary-dark) 0%, var(--mb-primary) 100%);
}

.login-card {
  background: #fff;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: var(--space-10);
  width: 100%;
  max-width: 627px;
  text-align: center;
}

.login-card .login-logo {
  height: 60px;
  margin: 0 auto var(--space-6);
}

.login-card h2 {
  font-size: var(--font-size-xl);
  margin-bottom: var(--space-6);
  color: var(--mb-primary);
}

.login-card .form-group {
  text-align: left;
}

.login-error {
  background-color: var(--mb-alert-light);
  border: 1px solid var(--mb-alert);
  color: var(--mb-alert);
  padding: var(--space-3);
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
  margin-bottom: var(--space-4);
  display: none;
}

.login-error.visible {
  display: block;
}

.demo-credentials {
  margin-top: var(--space-6);
  padding-top: var(--space-4);
  border-top: 1px solid var(--gray-200);
  text-align: left;
  font-size: var(--font-size-xs);
  color: var(--gray-500);
}

.demo-credentials h4 {
  font-size: var(--font-size-xs);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--gray-400);
  margin-bottom: var(--space-2);
}

.demo-credentials table {
  width: 100%;
  font-size: var(--font-size-xs);
}

.demo-credentials td {
  padding: 2px 4px;
}

.demo-credentials .demo-user {
  font-family: monospace;
  color: var(--gray-700);
}

/* ===== QUOTE EDITOR LAYOUT ===== */
.quote-editor-layout {
  display: grid;
  grid-template-columns: 260px 1fr 320px;
  gap: var(--space-4);
  min-height: calc(100vh - 200px);
}

.quote-line-items-panel {
  background: #fff;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-md);
  overflow-y: auto;
  max-height: calc(100vh - 180px);
}

.quote-line-items-panel .panel-header {
  padding: var(--space-4);
  border-bottom: 1px solid var(--gray-200);
  font-weight: 600;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: sticky;
  top: 0;
  background: #fff;
  z-index: 1;
}

.line-item-card {
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--gray-100);
  cursor: pointer;
  transition: background-color 0.15s ease;
  font-size: var(--font-size-sm);
}

.line-item-card:hover {
  background-color: var(--gray-50);
}

.line-item-card.active {
  background-color: var(--brand-primary-light);
  border-left: 3px solid var(--brand-primary);
}

.line-item-card .li-product {
  font-weight: 600;
  margin-bottom: 2px;
}

.line-item-card .li-room {
  color: var(--gray-500);
  font-size: var(--font-size-xs);
}

.line-item-card .li-price {
  font-weight: 600;
  color: var(--brand-primary);
}

/* QUOTE EDITOR MAIN AREA */
.quote-editor-main {
  background: #fff;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-md);
  padding: var(--space-6);
  overflow-y: auto;
  max-height: calc(100vh - 180px);
}

/* VERTICAL LABEL-PRICE LAYOUT (PER MICHAEL FUSS UX) */
.config-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--gray-100);
}

.config-row .config-label {
  font-weight: 500;
  font-size: var(--font-size-sm);
  color: var(--gray-700);
  min-width: 120px;
}

.config-row .config-control {
  flex: 1;
  margin: 0 var(--space-4);
}

.config-row .config-price {
  font-weight: 600;
  font-size: var(--font-size-sm);
  color: var(--gray-900);
  text-align: right;
  min-width: 80px;
}

/* QUOTE SUMMARY PANEL */
.quote-summary-panel {
  background: #fff;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-md);
  padding: var(--space-5);
  position: sticky;
  top: var(--space-6);
  max-height: calc(100vh - 180px);
  overflow-y: auto;
}

.quote-summary-panel h3 {
  margin-bottom: var(--space-4);
  font-size: var(--font-size-lg);
}

.summary-line {
  display: flex;
  justify-content: space-between;
  padding: var(--space-2) 0;
  font-size: var(--font-size-sm);
}

.summary-line.subtotal {
  border-top: 1px solid var(--gray-200);
  padding-top: var(--space-3);
  margin-top: var(--space-2);
}

.summary-line.total {
  border-top: 2px solid var(--gray-800);
  padding-top: var(--space-3);
  margin-top: var(--space-2);
  font-size: var(--font-size-xl);
  font-weight: 700;
}

.summary-line.dealer-info {
  color: var(--gray-500);
  font-size: var(--font-size-xs);
}

.summary-line .editable-field {
  width: 100px;
  padding: var(--space-1) var(--space-2);
  text-align: right;
  font-size: var(--font-size-sm);
}

/* QUOTE PROTECTION TOGGLES */
.quote-protection {
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid var(--gray-200);
}

.quote-protection .form-check {
  margin-bottom: var(--space-2);
  font-size: var(--font-size-sm);
}

/* ===== QUOTE REVIEW (READ-ONLY) ===== */
.review-section {
  background: #fff;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-md);
  padding: var(--space-6);
  margin-bottom: var(--space-4);
}

.review-section h3 {
  margin-bottom: var(--space-4);
  padding-bottom: var(--space-2);
  border-bottom: 2px solid var(--brand-primary);
}

.review-grid {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: var(--space-2) var(--space-4);
  font-size: var(--font-size-sm);
}

.review-grid .label {
  color: var(--gray-500);
  font-weight: 500;
}

.review-actions {
  display: flex;
  gap: var(--space-4);
  padding: var(--space-6);
  background: #fff;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-md);
  position: sticky;
  bottom: 0;
}

/* ===== PDF PREVIEW ===== */
.pdf-preview-container {
  max-width: 800px;
  margin: 0 auto;
  background: #fff;
  box-shadow: var(--shadow-lg);
  border-radius: var(--radius-md);
}

.pdf-banner {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: var(--space-4);
  padding: var(--space-5);
  background: var(--gray-100);
  border-bottom: 3px solid var(--brand-primary);
  align-items: center;
}

.pdf-banner img {
  height: 50px;
}

.pdf-body {
  padding: var(--space-6);
}

.pdf-line-item {
  padding: var(--space-4);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-sm);
  margin-bottom: var(--space-3);
}

.pdf-terms {
  padding: var(--space-5);
  background: var(--gray-50);
  border-top: 1px solid var(--gray-200);
  font-size: var(--font-size-sm);
  color: var(--gray-600);
}

/* ===== ORDER SUBMISSION ===== */
.order-banner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-5);
  background: linear-gradient(135deg, var(--success), #1B5E20);
  color: #fff;
  border-radius: var(--radius-lg);
  margin-bottom: var(--space-6);
}

.order-banner h2 {
  color: #fff;
  margin-bottom: 0;
}

/* ===== DASHBOARD CHARTS (CSS-ONLY) ===== */
.chart-container {
  background: #fff;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-md);
  padding: var(--space-5);
}

.chart-container h4 {
  margin-bottom: var(--space-4);
  font-size: var(--font-size-base);
}

/* HORIZONTAL BAR CHART */
.bar-chart {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.bar-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.bar-label {
  width: 120px;
  font-size: var(--font-size-sm);
  text-align: right;
  flex-shrink: 0;
}

.bar-track {
  flex: 1;
  height: 28px;
  background-color: var(--gray-100);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.bar-fill {
  height: 100%;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  padding-left: var(--space-2);
  font-size: var(--font-size-xs);
  font-weight: 600;
  color: #fff;
  transition: width 0.6s ease;
}

.bar-value {
  width: 60px;
  font-size: var(--font-size-sm);
  font-weight: 600;
  text-align: right;
  flex-shrink: 0;
}

/* DONUT CHART (CSS CONIC-GRADIENT) */
.donut-chart {
  width: 160px;
  height: 160px;
  border-radius: 50%;
  position: relative;
  margin: 0 auto;
}

.donut-chart::after {
  content: '';
  position: absolute;
  top: 30px;
  left: 30px;
  right: 30px;
  bottom: 30px;
  background: #fff;
  border-radius: 50%;
}

.donut-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
  text-align: center;
}

.donut-center .donut-value {
  font-size: var(--font-size-2xl);
  font-weight: 700;
  line-height: 1;
}

.donut-center .donut-label {
  font-size: var(--font-size-xs);
  color: var(--gray-500);
}

.chart-legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-4);
  justify-content: center;
}

.legend-item {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--font-size-xs);
}

.legend-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}

/* FUNNEL CHART */
.funnel-chart {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
}

.funnel-stage {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-3);
  border-radius: var(--radius-md);
  color: #fff;
  font-weight: 600;
  text-align: center;
  transition: width 0.6s ease;
}

.funnel-arrow {
  color: var(--gray-400);
  font-size: var(--font-size-xl);
}

/* ===== ACTIVITY FEED ===== */
.activity-feed {
  list-style: none;
}

.activity-item {
  display: flex;
  gap: var(--space-3);
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--gray-100);
  font-size: var(--font-size-sm);
}

.activity-time {
  color: var(--gray-500);
  font-size: var(--font-size-xs);
  min-width: 80px;
}

/* ===== QUOTE WIZARD: STEP NAVIGATION BAR ===== */
.wizard-step-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  padding: var(--space-3) var(--space-6);
  background: var(--neutral-white, #fff);
  border-bottom: 1px solid var(--neutral-300, var(--gray-300));
  margin-bottom: var(--space-6);
  position: sticky;
  top: 0;
  z-index: 10;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  min-height: 72px;
}

.wizard-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1);
  cursor: default;
  padding: var(--space-1) var(--space-3);
  user-select: none;
  min-width: 100px;
  position: relative;
}

.wizard-step-circle {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: var(--font-size-sm);
  border: 2px solid var(--neutral-400, var(--gray-400));
  color: var(--neutral-600, var(--gray-600));
  background: #fff;
  transition: all var(--transition-fast, 150ms ease);
  flex-shrink: 0;
}

.wizard-step-label {
  font-size: var(--font-size-xs);
  font-weight: 500;
  color: var(--neutral-500, var(--gray-500));
  white-space: nowrap;
  text-align: center;
  transition: color var(--transition-fast, 150ms ease);
}

/* COMPLETED STEP */
.wizard-step--completed .wizard-step-circle {
  border-color: var(--mb-primary, #1f3a4d);
  background-color: var(--mb-primary, #1f3a4d);
  color: #fff;
}

.wizard-step--completed .wizard-step-label {
  color: var(--mb-primary, #1f3a4d);
  font-weight: 600;
}

.wizard-step--completed {
  cursor: pointer;
}

.wizard-step--completed:hover .wizard-step-circle {
  transform: scale(1.08);
}

.wizard-step--completed:hover .wizard-step-label {
  text-decoration: underline;
}

/* ACTIVE STEP */
.wizard-step--active .wizard-step-circle {
  border-color: var(--mb-action, #e8a430);
  background-color: var(--mb-action, #e8a430);
  color: var(--mb-black, #293241);
  box-shadow: 0 0 0 4px rgba(232, 164, 48, 0.25);
}

.wizard-step--active .wizard-step-label {
  color: var(--mb-black, #293241);
  font-weight: 700;
}

/* AVAILABLE STEP (UNLOCKED, NOT YET VISITED) */
.wizard-step--available .wizard-step-circle {
  border-color: var(--neutral-400, var(--gray-400));
  color: var(--neutral-600, var(--gray-600));
  background: transparent;
}

.wizard-step--available .wizard-step-label {
  color: var(--neutral-600, var(--gray-600));
}

.wizard-step--available {
  cursor: pointer;
}

.wizard-step--available:hover .wizard-step-circle {
  transform: scale(1.08);
}

.wizard-step--available:hover .wizard-step-label {
  text-decoration: underline;
}

/* LOCKED STEP */
.wizard-step--locked {
  cursor: not-allowed;
  opacity: 0.6;
}

.wizard-step--locked .wizard-step-circle {
  background: var(--neutral-200, var(--gray-200));
  border-color: var(--neutral-300, var(--gray-300));
  color: var(--neutral-500, var(--gray-500));
}

.wizard-step--locked .wizard-step-label {
  color: var(--neutral-500, var(--gray-500));
}

/* CONNECTOR LINES BETWEEN STEPS */
.wizard-step-connector {
  flex: 1 1 auto;
  max-width: 80px;
  height: 3px;
  margin: 0 var(--space-1);
  margin-bottom: 20px;
  transition: background-color var(--transition-fast, 150ms ease);
}

.wizard-step-connector.completed {
  background-color: var(--mb-primary, #1f3a4d);
}

.wizard-step-connector.upcoming {
  background: transparent;
  height: 0;
  border-top: 2px dashed var(--neutral-400, var(--gray-400));
}

/* ===== WIZARD CONTENT AREA ===== */
.wizard-content {
  background: #fff;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-md);
  padding: var(--space-8);
  min-height: 400px;
  margin-bottom: var(--space-6);
}

/* ===== WIZARD FOOTER (STICKY) ===== */
.wizard-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-4) var(--space-6);
  background: #fff;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-md);
  position: sticky;
  bottom: 0;
  z-index: 10;
  box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.05);
}

.wizard-footer-left,
.wizard-footer-right {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.wizard-footer .save-indicator {
  font-size: var(--font-size-xs);
  color: var(--gray-400);
  margin-left: var(--space-3);
}

/* ===== WIZARD SECTION HEADINGS ===== */
.wizard-section {
  margin-bottom: var(--space-5);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--gray-100);
}

.wizard-section:last-child {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}

.wizard-section-title {
  font-size: var(--font-size-lg);
  margin-bottom: var(--space-4);
  padding-bottom: var(--space-2);
  border-bottom: 2px solid var(--brand-primary);
}

.wizard-section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-4);
}

.wizard-section-header .wizard-section-title {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}

/* ===== CUSTOMER DRAWER (SLIDE-DOWN ANIMATION) ===== */
.customer-drawer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 300ms ease, padding 300ms ease, border-color 300ms ease;
  background: var(--gray-50);
  border-radius: var(--radius-md);
  margin-top: var(--space-4);
  border: 1px solid transparent;
}

.customer-drawer--open {
  max-height: 2000px;
  padding: var(--space-6);
  border-color: var(--gray-200);
}

.customer-drawer-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-4);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--gray-200);
}

.customer-drawer-title {
  font-weight: 600;
  font-size: var(--font-size-base);
}

.customer-drawer-toggle {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.customer-drawer-toggle label {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  cursor: pointer;
  font-size: var(--font-size-sm);
  font-weight: 500;
}

/* ===== WIZARD FIELD GROUPS (DETAIL MODE SUBSECTIONS) ===== */
.wizard-field-group {
  margin-top: var(--space-6);
  padding-top: var(--space-4);
  border-top: 1px solid var(--gray-200);
}

.wizard-field-group h4 {
  font-size: var(--font-size-xs);
  color: var(--gray-500);
  margin-bottom: var(--space-4);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-weight: 600;
}

/* ===== WIZARD DETAIL FIELDS ANIMATION ===== */
.customer-detail-fields {
  transition: max-height 300ms ease, opacity 200ms ease;
  max-height: 2000px;
  opacity: 1;
}

.customer-detail-fields.hidden {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
}

/* ===== CONDITIONAL FIELD ANIMATION ===== */
.conditional-field {
  transition: max-height 250ms ease, opacity 200ms ease, margin 250ms ease;
  max-height: 200px;
  opacity: 1;
  overflow: hidden;
}

.conditional-field.hidden {
  max-height: 0;
  opacity: 0;
  margin: 0;
}

/* ===== BUDGET RANGE INPUTS ===== */
.budget-range {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.budget-range .form-input {
  width: 140px;
  flex: none;
}

.budget-range .budget-separator {
  color: var(--gray-400);
  font-weight: 600;
}

/* ===== WIZARD PLACEHOLDER (STEPS 2-5) ===== */
.wizard-placeholder {
  min-height: 300px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.wizard-placeholder .empty-state {
  text-align: center;
}

.wizard-placeholder .empty-icon {
  font-size: 3rem;
  margin-bottom: var(--space-4);
}

/* ===== WIZARD VALIDATION ERRORS ===== */
.wizard-error {
  color: var(--error);
  font-size: var(--font-size-sm);
  margin-top: var(--space-1);
}

.form-input.input-error,
.form-select.input-error {
  border-color: var(--error);
}

/* ===== SELECTED CUSTOMER CARD ===== */
.selected-customer-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-4);
  background: var(--brand-primary-light);
  border: 1px solid var(--brand-primary);
  border-radius: var(--radius-md);
  margin-top: var(--space-3);
}

.selected-customer-card .customer-info {
  font-size: var(--font-size-sm);
}

.selected-customer-card .customer-name {
  font-weight: 600;
  font-size: var(--font-size-base);
}

.selected-customer-card .customer-detail {
  color: var(--gray-600);
  margin-top: var(--space-1);
}

/* ===================================================================
   CHANGE-003: ITEMS GRID, ITEM EDITOR, SUB-CONFIGURATORS
   =================================================================== */

/* ===== CHANGE-023: CONFIGURATOR SECTION (replaces Quote Settings bar) ===== */
.configurator-section {
  background: var(--gray-50);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-md);
  padding: var(--space-4) var(--space-5);
  margin-bottom: var(--space-6);
}

.configurator-section__title {
  margin: 0 0 var(--space-3) 0;
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--gray-700);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.configurator-section__grid {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: var(--space-5, 20px);
  align-items: start;
}

.configurator-section__grid .form-group {
  margin-bottom: 0;
}

.configurator-section__description {
  padding: 8px 10px;
  background: #fff;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-sm, 4px);
  color: var(--gray-700);
  font-size: var(--font-size-sm);
  min-height: 38px;
  line-height: 1.4;
}

@media (max-width: 700px) {
  .configurator-section__grid {
    grid-template-columns: 1fr;
  }
}

/* ===== ITEMS GRID (TABLE VIEW) ===== */
.items-grid {
  margin-top: var(--space-4);
}

.items-grid-header {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

.items-grid-header h3 {
  font-size: var(--font-size-lg);
  font-weight: 600;
  flex: none;
  margin: 0;
  line-height: 1;
}

/* ===== SHOW ALL SELECTIONS TOGGLE (CHANGE-009) ===== */
.show-all-toggle {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--font-size-xs);
  white-space: nowrap;
  margin-left: var(--space-3);
  background-color: var(--mb-secondary, #98c1d9);
  color: #fff;
  border: none;
  border-radius: var(--border-radius-md);
  padding: var(--space-1) var(--space-3);
  cursor: pointer;
}

.show-all-toggle .toggle-icon {
  font-size: var(--font-size-sm);
}

.items-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--font-size-sm);
}

.items-table thead th {
  text-align: left;
  font-size: var(--font-size-xs);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--gray-500);
  font-weight: 600;
  padding: var(--space-2) var(--space-3);
  border-bottom: 2px solid var(--gray-200);
  white-space: nowrap;
}

.items-table tbody tr {
  border-bottom: 1px solid var(--gray-100);
  transition: background 0.15s ease;
}

.items-table tbody tr:hover {
  background: var(--gray-50);
}

.items-table tbody td {
  padding: var(--space-3);
  vertical-align: middle;
  max-width: 160px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* CHANGE-009: 12-COLUMN LAYOUT */
.items-table .col-check { width: 40px; text-align: center; }
.items-table .col-line { width: 50px; font-weight: 600; color: var(--gray-600); }
.items-table .col-label { width: 120px; }
.items-table .col-location { width: 90px; color: var(--gray-600); }
.items-table .col-type { width: 160px; }
.items-table tbody td.col-type { max-width: 160px; }
.items-table .col-size { width: 70px; }
.items-table .col-frame-color { width: 75px; }
.items-table .col-ext-color { width: 75px; }
.items-table .col-glass { width: 80px; }
.items-table .col-grid { width: 70px; }
.items-table .col-qty { width: 45px; text-align: center; }
/* CHANGE-261 (C): widen actions so the 6 text buttons fit on ONE row; width
   reclaimed from col-type (220 -> 160) to keep total table width in check. */
.items-table .col-actions { width: 1%; min-width: 440px; text-align: left; }

/* CHANGE-254: line-item reorder — drag column, drag indicators, Line # input. */
.items-table .col-drag { width: 28px; text-align: center; padding-left: 4px; padding-right: 0; }
.items-table .item-drag-handle { display: inline-block; }
.items-table tbody tr.item-data-row.dragging { opacity: 0.5; }
.items-table tbody tr.item-data-row.drop-above { box-shadow: inset 0 2px 0 0 var(--mb-primary, #1f3a4d); }
.items-table tbody tr.item-data-row.drop-below { box-shadow: inset 0 -2px 0 0 var(--mb-primary, #1f3a4d); }
.items-table .line-number-input {
  width: 56px;
  padding: 2px 4px;
  font-size: var(--font-size-sm, .875rem);
  border: 1px solid var(--gray-300, #E0E0E0);
  border-radius: var(--radius-sm, 4px);
}
.items-table .line-number-input.input--error { border-color: var(--mb-alert, #c1121f); }

/* ===== ITEM DETAIL ROW — EXPAND/COLLAPSE (CHANGE-009) ===== */
.items-table tbody tr.item-detail-row {
  border-bottom: none;
}

.items-table tbody tr.item-detail-row:hover {
  background: transparent;
}

.items-table tbody tr.item-detail-row > td {
  padding: 0;
  max-width: none;
  overflow: hidden;
}

/* Detail panel collapse — use display so the rich new content (24+ field
   rows in the Configuration Options group, plus Calculated + Pricing) can
   exceed any max-height cap when expanded, and so the collapse is
   unambiguous (no clipped-content edge cases during max-height transitions). */
.item-detail-panel {
  display: none;
}

.item-detail-row.expanded .item-detail-panel {
  display: block;
}

/* DETAIL PANEL LAYOUT */
.detail-panel-layout {
  display: flex;
  gap: var(--space-5);
  padding: var(--space-4) var(--space-5);
  background: #f8f9fa;
  border-top: 1px solid var(--gray-200);
  border-bottom: 1px solid var(--gray-200);
}

.detail-panel-config {
  flex: 3;
}

.detail-panel-title {
  font-size: var(--font-size-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--gray-500);
  margin-bottom: var(--space-1);
}

.detail-panel-summary {
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--gray-700);
  margin-bottom: var(--space-3);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--gray-200);
}

/* KEY-VALUE GROUPS */
.detail-panel-groups {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
}

.detail-group {
  min-width: 220px;
  flex: 1 1 220px;
  overflow: hidden;
}

.detail-kv {
  font-size: var(--font-size-xs);
  line-height: 1.8;
  color: var(--gray-700);
  overflow-wrap: break-word;
  word-break: break-word;
}

.detail-kv-label {
  font-weight: 600;
  color: var(--gray-500);
}

.detail-kv-label::after {
  content: ' =';
}

.detail-kv-value {
  color: var(--gray-800);
}

/* SVG THUMBNAIL */
.detail-panel-thumbnail {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  min-width: 160px;
}

.detail-thumb-placeholder {
  width: 160px;
  height: 200px;
  background: var(--gray-100);
  border-radius: var(--border-radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gray-400);
  font-size: var(--font-size-xs);
}

.detail-panel-thumbnail svg {
  max-width: 160px;
  max-height: 200px;
}

.detail-view-full {
  font-size: var(--font-size-xs);
  color: var(--mb-secondary, #1f3a4d);
  text-decoration: none;
  cursor: pointer;
}

.detail-view-full:hover {
  text-decoration: underline;
}

/* DETAIL TOGGLE BUTTON STATE */
.item-detail-toggle-btn.active {
  color: var(--mb-secondary, #1f3a4d);
  font-weight: 700;
}

/* ===== INCLUDE-ALL TOGGLE ===== */
.bulk-include-toggle {
  padding: 8px 16px;
  background: var(--gray-50);
  border: 1px solid var(--gray-200);
  border-radius: var(--border-radius-sm);
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--font-size-sm);
  margin-bottom: 4px;
}

.include-all-row td {
  padding: 8px 16px;
  background: var(--gray-50);
  font-size: var(--font-size-sm);
  display: flex;
  align-items: center;
  gap: 8px;
}

/* CUSTOM INCLUDE-ALL CHECKBOX — BLUE ONLY WHEN FULLY CHECKED */
.include-all-check {
  -webkit-appearance: none;
  appearance: none;
  width: 16px;
  height: 16px;
  border: 2px solid var(--gray-400);
  border-radius: 3px;
  background: #fff;
  cursor: pointer;
  position: relative;
  flex-shrink: 0;
}
.include-all-check:checked {
  background: var(--mb-secondary);
  border-color: var(--mb-secondary);
}
.include-all-check:checked::after {
  content: '';
  position: absolute;
  left: 3px;
  top: 0px;
  width: 5px;
  height: 9px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.include-all-check:indeterminate {
  background: #fff;
  border-color: var(--gray-400);
}
.include-all-check:indeterminate::after {
  content: '';
  position: absolute;
  left: 2px;
  top: 5px;
  width: 8px;
  height: 2px;
  background: var(--gray-500);
}

/* ===== BULK ACTION BAR ===== */
.bulk-action-bar {
  padding: 8px 16px;
  background: #e8f4fd;
  border: 1px solid var(--mb-secondary);
  border-radius: var(--border-radius-md);
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
}
.bulk-action-bar .bulk-count {
  font-weight: 600;
  font-size: var(--font-size-sm);
  margin-right: auto;
}

/* ===== BULK MODALS ===== */
.bulk-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
}
.bulk-modal {
  background: white;
  border-radius: var(--border-radius-lg);
  max-height: 80vh;
  overflow-y: auto;
  box-shadow: var(--shadow-xl);
}
.bulk-modal-change { width: 700px; max-width: 90vw; }
.bulk-modal-price { width: 500px; max-width: 90vw; }
.bulk-modal-header {
  padding: 16px 24px;
  border-bottom: 1px solid var(--gray-200);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.bulk-modal-header h3 {
  font-size: var(--font-size-lg);
  font-weight: 600;
  margin: 0;
}
.bulk-modal-body {
  padding: 24px;
}
.bulk-modal-footer {
  padding: 16px 24px;
  border-top: 1px solid var(--gray-200);
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

/* BULK STYLE GRID (REUSES OPERATING STYLE CARD STYLES) */
.bulk-style-grid {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

/* BULK INTERIOR FINISH TOGGLE BUTTONS */
.bulk-interior-swatches {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

/* ===== PRICE PREVIEW TABLE ===== */
.bulk-preview-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 16px;
  font-size: var(--font-size-sm);
}
.bulk-preview-table th {
  text-align: left;
  padding: 8px;
  border-bottom: 2px solid var(--gray-200);
  font-weight: 600;
}
.bulk-preview-table td {
  padding: 8px;
  border-bottom: 1px solid var(--gray-100);
}
.bulk-preview-positive { color: var(--mb-alert); }
.bulk-preview-negative { color: var(--success); }

/* ===== BULK MODAL — SUBTITLE ===== */
.bulk-modal-subtitle {
  font-size: var(--font-size-sm);
  color: var(--gray-500);
  padding: 0 24px 8px;
}

/* ===== BULK MODAL — TOUCHED FIELD INDICATOR ===== */
.bulk-modal .form-group.touched {
  border-left: 3px solid #ee6c4d;
  padding-left: 8px;
  transition: border-left 0.2s ease, padding-left 0.2s ease;
}

/* ===== BULK MODAL — APPLY BUTTON DISABLED ===== */
.bulk-modal-footer .btn-primary:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

/* ===== BULK MODAL — DETAIL TOGGLE BUTTON ===== */
.bulk-detail-toggle {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  background: none;
  border: 1px solid var(--gray-300);
  border-radius: var(--border-radius-md);
  padding: var(--space-3) var(--space-4);
  cursor: pointer;
  font-size: var(--font-size-sm);
  color: var(--gray-600);
  width: 100%;
  justify-content: center;
  margin-top: var(--space-4);
}
.bulk-detail-toggle:hover {
  background: var(--gray-50);
  border-color: var(--gray-400);
}
.bulk-detail-toggle .chevron {
  transition: transform 0.3s ease;
}

/* ===== BULK MODAL — DETAIL SECTIONS CONTAINER ===== */
.bulk-detail-sections {
  max-height: 0;
  overflow: hidden;
  transition: max-height 400ms ease;
}
.bulk-detail-sections.open {
  max-height: 2000px;
}

/* ===== BULK MODAL — ACCORDION SECTIONS (REUSE DETAIL-SECTION PATTERN) ===== */
.bulk-modal .detail-section {
  border: 1px solid var(--gray-200);
  border-radius: var(--border-radius-md);
  margin-top: var(--space-3);
}
.bulk-modal .detail-section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-3) var(--space-4);
  cursor: pointer;
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--gray-700);
  background: var(--gray-50);
  border-radius: var(--border-radius-md);
}
.bulk-modal .detail-section-header:hover {
  background: var(--gray-100);
}
.bulk-modal .detail-section-header .chevron {
  transition: transform 0.3s ease;
  font-size: 10px;
}
.bulk-modal .detail-section--open .detail-section-header .chevron {
  transform: rotate(180deg);
}
.bulk-modal .detail-section-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 300ms ease;
}
.bulk-modal .detail-section--open .detail-section-content {
  max-height: 600px;
  padding: var(--space-3) var(--space-4) var(--space-4);
}

/* ===== BULK MODAL — EXTERIOR COLOR SWATCHES ===== */
.ext-color-swatches {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

/* ===== BULK TOAST ===== */
.bulk-toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--success);
  color: white;
  padding: 12px 24px;
  border-radius: var(--border-radius-md);
  font-weight: 500;
  z-index: 1100;
  opacity: 0;
  transition: opacity 0.3s;
}
.bulk-toast--visible { opacity: 1; }

.line-type-cell {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.line-type-icon {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
}

.line-type-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* CHANGE-255: text Quick Actions (Option A) — buttons wrap to a 2nd line. */
.items-grid-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  align-items: center;
  justify-content: flex-start;
}

.items-grid-actions button {
  background: #fff;
  border: 1px solid var(--gray-300);
  border-radius: var(--radius-sm);
  padding: var(--space-1) var(--space-2);
  font-family: var(--font-family);
  font-size: var(--font-size-xs);
  font-weight: 600;
  line-height: 1.4;
  color: var(--gray-700);
  white-space: nowrap;
  cursor: pointer;
  transition: all 0.15s ease;
}

.items-grid-actions button:hover {
  background: var(--mb-primary-light);
  color: var(--mb-primary);
  border-color: var(--mb-primary);
}

/* Details toggle — "on" (expanded) state. */
.items-grid-actions .item-detail-toggle-btn.active {
  background: var(--mb-primary);
  border-color: var(--mb-primary);
  color: #fff;
}

/* Delete — destructive emphasis. CHANGE-255: bind to .item-remove-btn (the real
   class); the old rule targeted .btn-remove, which never matched. */
.items-grid-actions .item-remove-btn {
  color: var(--mb-alert);
  border-color: #f0c5ca;
}
.items-grid-actions .item-remove-btn:hover {
  background: var(--mb-alert-light);
  border-color: var(--mb-alert);
  color: var(--mb-alert-dark);
}

.items-grid-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-4) var(--space-3);
  border-top: 2px solid var(--gray-200);
  margin-top: var(--space-2);
  font-size: var(--font-size-sm);
}

.items-grid-footer .item-count {
  color: var(--gray-500);
}

.items-grid-footer .subtotal {
  font-weight: 600;
  font-size: var(--font-size-base);
}

.items-grid-footer .pricing-note {
  color: var(--gray-400);
  font-size: var(--font-size-xs);
  font-style: italic;
}

/* EMPTY STATE FOR ITEMS */
.items-empty-state {
  text-align: center;
  padding: var(--space-12) var(--space-6);
  color: var(--gray-400);
}

.items-empty-state .empty-icon {
  font-size: 3rem;
  margin-bottom: var(--space-4);
}

.items-empty-state p {
  margin-bottom: var(--space-6);
  font-size: var(--font-size-base);
}

/* ===== ITEM EDITOR ===== */
.item-editor {
  position: relative;
}

.item-editor-back {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--brand-primary);
  cursor: pointer;
  font-size: var(--font-size-sm);
  font-weight: 500;
  margin-bottom: var(--space-4);
  text-decoration: none;
}

.item-editor-back:hover {
  text-decoration: underline;
}

.item-editor-layout {
  display: grid;
  grid-template-columns: 55% 45%;
  gap: var(--space-6);
  align-items: start;
}

.item-editor-visual {
  position: sticky;
  top: 80px;
  background: var(--gray-50);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 300px;
}

.item-editor-visual svg {
  max-width: 100%;
  max-height: 440px;
}

.item-editor-controls {
  min-width: 0;
}

/* ITEM SETUP FIELDS (TOP ROW) */
.item-setup-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
  margin-bottom: var(--space-4);
}

.item-setup-fields .form-group {
  margin-bottom: 0;
}

.item-setup-fields .item-setup-full-width {
  grid-column: 1 / -1;
}

/* ===== PRODUCT SELECTION ===== */
.product-selection {
  margin-bottom: var(--space-6);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--gray-200);
}

.product-selection .form-group {
  margin-bottom: var(--space-4);
}

.operating-style-grid {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.operating-style-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-2) var(--space-3);
  border: none;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all 0.15s ease;
  min-width: 72px;
  text-align: center;
  background: #fff;
}

.operating-style-card:hover {
  background: var(--gray-50);
}

.operating-style-card.selected {
  background: var(--brand-primary-light);
}

.operating-style-card.disabled {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}

.operating-style-icon {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.operating-style-icon img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.operating-style-card .style-label {
  font-size: 10px;
  font-weight: 600;
  color: var(--gray-600);
  text-transform: uppercase;
  letter-spacing: 0.3px;
  line-height: 1.2;
}

.operating-style-card.selected .style-label {
  color: var(--brand-primary);
}

/* ===== FRAME COLOR SWATCHES — SQUARE WITH LABELS (CHANGE-007 §5.3) ===== */
.frame-color-swatches {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.frame-color-swatch {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  padding: var(--space-1);
  border-radius: var(--radius-sm);
  transition: all 0.15s ease;
  min-width: 52px;
}

.frame-color-swatch:hover {
  background: var(--gray-100);
}

.frame-color-swatch .swatch-square {
  width: 48px;
  height: 48px;
  border-radius: 4px;
  border: 1px solid #000;
  position: relative;
  transition: box-shadow 0.15s ease;
}

.frame-color-swatch.selected .swatch-square {
  box-shadow: 0 0 0 3px var(--mb-primary, #1f3a4d);
}

.frame-color-swatch .swatch-square .swatch-check {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #fff;
  font-size: 18px;
  font-weight: 700;
  text-shadow: 0 1px 3px rgba(0,0,0,0.5);
}

.frame-color-swatch-label {
  font-size: 11px;
  text-align: center;
  margin-top: 2px;
  line-height: 1.2;
  word-wrap: break-word;
  max-width: 56px;
  color: var(--text-secondary);
}

.frame-color-swatch.selected .frame-color-swatch-label {
  color: var(--mb-primary, #1f3a4d);
  font-weight: 600;
}

/* ===== SHAPE SELECTOR RADIOS (CHANGE-007 §4.2) ===== */
.shape-radio-group,
.size-type-group {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.shape-radio-option,
.size-type-option {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border: none;
  border-radius: var(--radius);
  cursor: pointer;
  font-size: var(--font-size-sm);
  transition: background 0.15s;
}

.shape-radio-option:hover,
.size-type-option:hover {
  background: var(--gray-50);
}

.shape-radio-option:has(input:checked),
.size-type-option:has(input:checked) {
  background: rgba(31, 58, 77, 0.05);
}

/* CONDITIONAL SHAPE DROPDOWN */
.shape-conditional {
  margin-top: var(--space-3);
}

/* ===== DIMENSION INPUTS (EDITOR) ===== */
.dimension-row {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
}

.dimension-row .form-group {
  flex: 1;
}

.dimension-row .times {
  padding-top: 28px;
  font-size: var(--font-size-lg);
  color: var(--gray-400);
}

.dimension-range-label {
  font-size: var(--font-size-xs);
  color: var(--gray-400);
  margin-top: var(--space-1);
}

.auto-calc-values {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  margin-top: var(--space-3);
  padding: var(--space-3);
  background: var(--gray-50);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-xs);
  color: var(--gray-600);
}

.auto-calc-values .calc-item {
  display: flex;
  gap: var(--space-1);
}

.auto-calc-values .calc-label {
  font-weight: 600;
  color: var(--gray-500);
}

.guardrail-message {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  padding: var(--space-3);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-sm);
  margin-top: var(--space-2);
}

.guardrail-message.warning {
  background: #fef3cd;
  color: #856404;
  border: 1px solid #ffc107;
}

.guardrail-icon {
  flex-shrink: 0;
}

/* ===== QUANTITY STEPPER (EDITOR) ===== */
.qty-stepper {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--gray-300);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.qty-stepper button {
  width: 32px;
  height: 32px;
  border: none;
  background: var(--gray-50);
  cursor: pointer;
  font-size: var(--font-size-base);
  color: var(--gray-600);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s ease;
}

.qty-stepper button:hover {
  background: var(--gray-200);
}

.qty-stepper input {
  width: 40px;
  height: 32px;
  border: none;
  border-left: 1px solid var(--gray-300);
  border-right: 1px solid var(--gray-300);
  text-align: center;
  font-size: var(--font-size-sm);
  font-weight: 600;
  -moz-appearance: textfield;
}

.qty-stepper input::-webkit-inner-spin-button,
.qty-stepper input::-webkit-outer-spin-button {
  -webkit-appearance: none;
}

/* ===== DETAIL VIEW TOGGLE ===== */
.detail-toggle-btn {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  background: none;
  border: 1px solid var(--gray-300);
  border-radius: var(--radius-sm);
  padding: var(--space-2) var(--space-4);
  cursor: pointer;
  font-size: var(--font-size-sm);
  font-weight: 500;
  color: var(--gray-600);
  margin-top: var(--space-4);
  margin-bottom: var(--space-4);
  transition: all 0.15s ease;
  width: 100%;
  justify-content: center;
}

.detail-toggle-btn:hover {
  background: var(--gray-50);
  border-color: var(--gray-400);
}

.detail-toggle-btn .chevron {
  transition: transform 0.25s ease;
  font-size: 10px;
}

.detail-toggle-btn.expanded .chevron {
  transform: rotate(180deg);
}

/* ===== DETAIL ACCORDION SECTIONS ===== */
.detail-sections {
  max-height: 0;
  overflow: hidden;
  transition: max-height 400ms ease;
}

.detail-sections.open {
  max-height: 5000px;
}

.detail-section {
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-sm);
  margin-bottom: var(--space-3);
  overflow: hidden;
}

.detail-section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-3) var(--space-4);
  cursor: pointer;
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--gray-700);
  background: var(--gray-50);
  user-select: none;
  transition: background 0.15s ease;
}

.detail-section-header:hover {
  background: var(--gray-100);
}

.detail-section-header .section-chevron {
  transition: transform 0.25s ease;
  font-size: 10px;
  color: var(--gray-400);
}

.detail-section--open .section-chevron {
  transform: rotate(90deg);
}

.detail-section-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 300ms ease, padding 300ms ease;
}

.detail-section--open .detail-section-content {
  max-height: 2000px;
  padding: var(--space-4);
  border-top: 1px solid var(--gray-200);
}

/* ===== SUB-CONFIGURATOR PANELS ===== */
.sub-configurator {
  background: var(--gray-50);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-md);
  padding: var(--space-4);
}

.sub-configurator-title {
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--gray-600);
  margin-bottom: var(--space-4);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.glass-surface-group {
  background: #fff;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-sm);
  padding: var(--space-3) var(--space-4);
  margin-bottom: var(--space-3);
}

.glass-surface-label {
  font-size: var(--font-size-xs);
  font-weight: 600;
  color: var(--gray-500);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: var(--space-3);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--gray-100);
}

.glass-surface-group .form-row {
  display: flex;
  gap: var(--space-4);
  flex-wrap: wrap;
  align-items: flex-end;
}

.glass-surface-group .form-group {
  margin-bottom: var(--space-2);
  flex: 1;
  min-width: 120px;
}

.glass-info-note {
  font-size: var(--font-size-xs);
  color: var(--gray-400);
  font-style: italic;
  margin-top: var(--space-2);
}

.glass-bottom-row {
  display: flex;
  gap: var(--space-6);
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid var(--gray-200);
}

/* ===== PERFORMANCE & PRICING BAR ===== */
.perf-pricing-bar {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-4);
  padding: var(--space-4);
  background: var(--gray-50);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-md);
  margin-top: var(--space-6);
  flex-wrap: wrap;
}

.perf-values {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.perf-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  background: #fff;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-sm);
  padding: 2px var(--space-2);
  font-size: 11px;
}

.perf-badge .perf-label {
  color: var(--gray-500);
  font-weight: 500;
}

.perf-badge .perf-value {
  font-weight: 700;
  color: var(--gray-700);
}

.perf-badge.energy-star {
  background: #dcfce7;
  border-color: #86efac;
  color: #166534;
}

.pricing-values {
  display: flex;
  gap: var(--space-4);
  flex-wrap: wrap;
}

.pricing-item {
  text-align: right;
}

.pricing-item .pricing-label {
  font-size: 10px;
  color: var(--gray-500);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.pricing-item .pricing-amount {
  font-size: var(--font-size-base);
  font-weight: 700;
  color: var(--gray-800);
}

.pricing-item .pricing-amount.editable {
  color: var(--brand-primary);
}

/* ===== ITEM EDITOR ACTION BUTTONS ===== */
.item-editor-actions {
  display: flex;
  justify-content: center;
  gap: var(--space-3);
  margin-top: var(--space-6);
  padding-top: var(--space-4);
  border-top: 1px solid var(--gray-200);
}

/* ===== SCREEN CHECKBOX ===== */
.screen-checkbox-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-3);
  font-size: var(--font-size-sm);
}

/* ===== HARDWARE CONDITIONAL FIELDS ===== */
.hardware-field-group .form-group {
  margin-bottom: var(--space-3);
}

.hardware-info {
  font-size: var(--font-size-xs);
  color: var(--gray-400);
  padding: var(--space-2) var(--space-3);
  background: var(--gray-50);
  border-radius: var(--radius-sm);
}

/* ===== INSTALLATION ACCESSORIES ===== */
.install-accessories .checkbox-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
  font-size: var(--font-size-sm);
}

/* ===================================================================
   PRICING LEDGER (CHANGE-004)
   =================================================================== */

/* PRICING LEDGER WRAPPER */
.pricing-ledger {
  max-width: 900px;
  margin: 0 auto;
}

/* PRESET SELECTOR BAR */
.pricing-preset-bar {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
  padding: var(--space-3);
  background: var(--gray-50);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-md);
}

.pricing-preset-bar label {
  font-weight: 600;
  font-size: var(--font-size-sm);
  white-space: nowrap;
}

.pricing-preset-bar select {
  flex: 1;
  max-width: 300px;
}

/* PRICING TABLE */
.pricing-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--font-size-sm);
  margin-bottom: var(--space-4);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.pricing-table th {
  text-transform: uppercase;
  font-size: var(--font-size-xs);
  font-weight: 600;
  color: var(--gray-600);
  padding: var(--space-2) var(--space-3);
  background: var(--gray-100);
  border-bottom: 2px solid var(--gray-300);
  text-align: left;
}

.pricing-table th:nth-child(3),
.pricing-table th:nth-child(4) {
  text-align: right;
}

/* SECTION HEADERS */
.pricing-section-header td {
  font-weight: 700;
  text-transform: uppercase;
  font-size: var(--font-size-xs);
  letter-spacing: 0.05em;
  color: var(--gray-700);
  background: var(--gray-100);
  padding: var(--space-2) var(--space-3);
  border-top: 2px solid var(--gray-300);
  border-bottom: 1px solid var(--gray-200);
}

/* DATA ROWS */
.pricing-row td {
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--gray-100);
  vertical-align: middle;
}

.pricing-row:hover td {
  background: var(--gray-50);
}

/* COLUMN WIDTHS */
.pricing-col-a {
  width: 45%;
}

.pricing-col-b {
  width: 20%;
}

.pricing-col-c {
  width: 15%;
  text-align: right;
}

.pricing-col-d {
  width: 20%;
  text-align: right;
  font-weight: 500;
}

/* SUBTOTAL ROW */
.pricing-row--subtotal td {
  font-weight: 700;
  border-top: 2px solid var(--gray-300);
  border-bottom: 2px solid var(--gray-300);
  padding: var(--space-3);
}

/* TOTAL ROW */
.pricing-row--total td {
  font-weight: 700;
  font-size: var(--font-size-md);
  border-top: 3px double var(--gray-400);
  padding: var(--space-3);
  background: var(--gray-50);
}

/* EDITABLE INPUTS */
.pricing-input {
  width: 70px;
  padding: var(--space-1) var(--space-2);
  text-align: right;
  border: none;
  border-bottom: 1px solid var(--gray-300);
  background: transparent;
  font-size: var(--font-size-sm);
  font-family: inherit;
  -moz-appearance: textfield;
}

.pricing-input::-webkit-outer-spin-button,
.pricing-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.pricing-input:focus {
  outline: none;
  border-bottom-color: var(--brand-primary);
  background: var(--white);
}

.pricing-input.is-invalid {
  border-bottom-color: var(--danger);
}

/* TEXT INPUT FOR LABELS */
.pricing-text-input {
  width: 150px;
  padding: var(--space-1) var(--space-2);
  border: none;
  border-bottom: 1px solid var(--gray-300);
  background: transparent;
  font-size: var(--font-size-sm);
  font-family: inherit;
}

.pricing-text-input:focus {
  outline: none;
  border-bottom-color: var(--brand-primary);
  background: var(--white);
}

.pricing-text-input::placeholder {
  color: var(--gray-400);
  font-style: italic;
}

/* SELECT DROPDOWN */
.pricing-select {
  padding: var(--space-1) var(--space-2);
  border: 1px solid var(--gray-300);
  border-radius: var(--radius-sm);
  background: var(--white);
  font-size: var(--font-size-sm);
  font-family: inherit;
  cursor: pointer;
}

.pricing-select:focus {
  outline: none;
  border-color: var(--brand-primary);
}

/* MATERIALS/LABOR CATEGORY SELECT */
.pricing-category-select {
  padding: var(--space-1) var(--space-2);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-sm);
  background: var(--gray-50);
  font-size: var(--font-size-xs);
  cursor: pointer;
  margin-left: var(--space-2);
}

/* % / $ TOGGLE BUTTON */
.pricing-pct-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 24px;
  padding: 0;
  border: 1px solid var(--gray-300);
  border-radius: var(--radius-sm);
  background: var(--white);
  font-size: var(--font-size-xs);
  font-weight: 600;
  cursor: pointer;
  color: var(--gray-600);
  margin-left: var(--space-1);
  transition: all 150ms ease;
}

.pricing-pct-toggle:hover {
  background: var(--gray-100);
}

.pricing-pct-toggle.active-pct {
  color: var(--brand-primary);
  border-color: var(--brand-primary);
  background: var(--brand-primary-light);
}

/* INLINE FIELD GROUP */
.pricing-inline-group {
  display: flex;
  align-items: center;
  gap: var(--space-1);
}

/* ADD MORE BUTTON */
.pricing-add-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-2);
  border: none;
  background: transparent;
  color: var(--brand-primary);
  font-size: var(--font-size-xs);
  font-weight: 500;
  cursor: pointer;
  font-family: inherit;
}

.pricing-add-btn:hover {
  text-decoration: underline;
}

/* REMOVE BUTTON */
.pricing-remove-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--gray-400);
  font-size: var(--font-size-sm);
  cursor: pointer;
  border-radius: var(--radius-sm);
  transition: all 150ms ease;
  margin-left: var(--space-2);
}

.pricing-remove-btn:hover {
  color: var(--danger);
  background: var(--gray-100);
}

/* DISCOUNT VALUE STYLING */
.pricing-discount-value {
  color: var(--danger);
}

/* VALIDATION ERROR MESSAGE */
.pricing-validation-error {
  color: var(--danger);
  font-size: var(--font-size-xs);
  padding: var(--space-2) var(--space-3);
  margin-bottom: var(--space-2);
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: var(--radius-sm);
}

/* DEALER COST SUMMARY */
.dealer-cost-summary {
  margin-top: var(--space-4);
  padding: var(--space-4);
  background: var(--gray-50);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-md);
}

.dealer-cost-summary h4 {
  margin: 0 0 var(--space-3) 0;
  font-size: var(--font-size-sm);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--gray-700);
}

.dealer-cost-summary-grid {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--space-2) var(--space-6);
  font-size: var(--font-size-sm);
}

.dealer-cost-label {
  color: var(--gray-600);
}

.dealer-cost-value {
  text-align: right;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* ADD ROW CONTAINER */
.pricing-add-row td {
  padding: var(--space-1) var(--space-3);
  border-bottom: 1px solid var(--gray-100);
}

/* ===== TERMS STEP STYLES (CHANGE-005) ===== */

/* GENERAL SECTION GRID */
.terms-general-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
}

.terms-general-grid .form-group--full {
  grid-column: 1 / -1;
}

/* DELIVERY TIMEFRAME INLINE */
.terms-inline-field {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.terms-inline-field .form-input {
  width: 100px;
  flex: none;
}

.terms-unit-label {
  color: var(--gray-600);
  font-size: var(--font-size-sm);
  white-space: nowrap;
}

/* VALIDITY TOGGLE GROUP */
.terms-validity-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.terms-validity-options {
  display: flex;
  gap: var(--space-6);
}

.terms-validity-option {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  cursor: pointer;
  font-size: var(--font-size-sm);
  font-weight: 500;
}

.terms-validity-option input[type="radio"] {
  accent-color: var(--brand-primary);
}

.terms-validity-option .form-input:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* REQUIREMENTS HEADER */
.terms-requirements-header {
  margin-bottom: var(--space-4);
}

.terms-preset-select {
  width: 320px;
}

/* REQUIREMENTS LIST */
.terms-requirements-list {
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-md);
  overflow: hidden;
}

/* REQUIREMENT ROW */
.terms-requirement-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--gray-100);
  transition: background-color 150ms ease;
}

.terms-requirement-row:last-child {
  border-bottom: none;
}

.terms-requirement-row:hover {
  background-color: var(--gray-50);
}

/* REQUIREMENT LABEL */
.terms-req-label {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex: 1;
  cursor: pointer;
  font-size: var(--font-size-sm);
  line-height: 1.4;
}

.terms-req-label input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: var(--brand-primary);
  cursor: pointer;
  flex-shrink: 0;
}

/* CUSTOM LABEL INPUT */
.terms-custom-label-input {
  flex: 1;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-sm);
  padding: var(--space-1) var(--space-2);
  font-size: var(--font-size-sm);
  font-family: var(--font-family);
  background: transparent;
  transition: border-color 200ms ease;
}

.terms-custom-label-input:focus {
  outline: none;
  border-color: var(--brand-primary);
}

.terms-custom-label-input::placeholder {
  color: var(--gray-400);
}

/* NOTE BUTTON */
.terms-note-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-1) var(--space-2);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--gray-400);
  font-size: var(--font-size-xs);
  cursor: pointer;
  white-space: nowrap;
  transition: color 150ms ease, border-color 150ms ease;
  flex-shrink: 0;
}

.terms-note-btn:hover {
  color: var(--brand-primary);
  border-color: var(--brand-primary);
}

.terms-note-btn--has-note {
  color: var(--brand-primary);
  border-color: var(--brand-primary);
  background: var(--brand-primary-light);
}

/* REMOVE BUTTON (VISIBLE ON HOVER) */
.terms-remove-btn {
  display: none;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--gray-400);
  font-size: var(--font-size-base);
  cursor: pointer;
  border-radius: var(--radius-sm);
  flex-shrink: 0;
}

.terms-requirement-row:hover .terms-remove-btn {
  display: inline-flex;
}

.terms-remove-btn:hover {
  color: var(--danger, #ef4444);
  background: rgba(239, 68, 68, 0.1);
}

/* SEPARATOR LINE */
.terms-separator {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-4);
  font-size: var(--font-size-xs);
  color: var(--gray-500);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-weight: 600;
  background: var(--gray-50);
  border-bottom: 1px solid var(--gray-100);
}

/* NOTE MODAL */
.terms-note-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  z-index: 500;
}

.terms-note-modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 480px;
  max-width: 90vw;
  background: #fff;
  border-radius: var(--radius-lg, 12px);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  z-index: 501;
}

.terms-note-modal-header {
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--gray-200);
}

.terms-note-modal-header h4 {
  font-size: var(--font-size-base);
  margin: 0;
  color: var(--gray-800);
  line-height: 1.4;
}

.terms-note-modal-body {
  padding: var(--space-4) var(--space-5);
}

.terms-note-modal-body .form-textarea {
  min-height: 80px;
}

.terms-note-char-count {
  text-align: right;
  font-size: var(--font-size-xs);
  color: var(--gray-400);
  margin-top: var(--space-1);
}

.terms-note-modal-footer {
  padding: var(--space-3) var(--space-5);
  border-top: 1px solid var(--gray-200);
  display: flex;
  justify-content: flex-end;
  gap: var(--space-2);
}

/* TERMS ERROR MESSAGE */
.terms-error-msg {
  color: var(--error, #ef4444);
  font-size: var(--font-size-xs);
  margin-top: var(--space-1);
}

/* INPUT ERROR HIGHLIGHT */
.input-error {
  border-color: var(--error, #ef4444) !important;
}

/* ===================================================================
   NOTES & DOCS STEP (CHANGE-006)
   =================================================================== */

/* ===== NOTE CARDS ===== */
.nd-note-card {
  background: var(--gray-50);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  margin-bottom: var(--space-4);
}

.nd-note-card:last-child {
  margin-bottom: 0;
}

.nd-note-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-3);
}

.nd-note-meta {
  font-size: var(--font-size-sm);
  color: var(--gray-600);
  font-weight: 500;
}

.nd-note-remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 1px solid var(--gray-300);
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--gray-500);
  font-size: var(--font-size-lg);
  cursor: pointer;
  transition: all 150ms ease;
}

.nd-note-remove:hover {
  color: var(--error);
  border-color: var(--error);
  background: #fef2f2;
}

.nd-note-textarea {
  min-height: auto;
}

/* ===== VIEW SCOPE CHECKBOXES ===== */
.nd-note-scope {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid var(--gray-200);
  flex-wrap: wrap;
}

.nd-scope-label {
  font-size: var(--font-size-xs);
  font-weight: 600;
  color: var(--gray-500);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  white-space: nowrap;
}

.nd-note-scope .form-check {
  font-size: var(--font-size-sm);
}

.nd-scope-error {
  flex-basis: 100%;
}

/* ===== DOCUMENTS PLACEHOLDER ===== */
.nd-documents-placeholder {
  padding: var(--space-8);
  background: var(--gray-50);
  border: 2px dashed var(--gray-300);
  border-radius: var(--radius-md);
  text-align: center;
  color: var(--gray-500);
  font-size: var(--font-size-sm);
}

/* ===================================================================
   DASHBOARD REDESIGN (DASHBOARD-v1.0)
   =================================================================== */

/* ===== ROW 1: ACTION BUTTONS ===== */
.dash-actions {
  display: flex;
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}

.dash-actions .btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  font-size: var(--font-size-sm);
  font-weight: 600;
}

.dash-actions .btn svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

/* ===== ROW 2: STAT BOXES ===== */
.dash-stats {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}

.dash-stat-box {
  border-radius: var(--radius-md);
  padding: var(--space-4);
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: 88px;
  transition: transform 150ms ease, box-shadow 150ms ease;
  /* CHANGE-024: stat boxes are now anchors */
  text-decoration: none;
  color: inherit;
}

.dash-stat-box:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  text-decoration: none;
}

/* CHANGE-024: linked table-card tiles */
.dash-table-card--linked {
  cursor: pointer;
  transition: transform 150ms ease, box-shadow 150ms ease;
}

.dash-table-card--linked:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.dash-table-card--linked:focus-visible {
  outline: 2px solid var(--mb-primary, #1f3a4d);
  outline-offset: 2px;
}

.dash-stat-icon {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.dash-stat-icon svg {
  width: 32px;
  height: 32px;
}

.dash-stat-info {
  flex: 1;
  min-width: 0;
}

.dash-stat-value {
  font-size: var(--font-size-2xl);
  font-weight: 700;
  line-height: 1.1;
}

.dash-stat-label {
  font-size: var(--font-size-xs);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-top: 2px;
  opacity: 0.85;
}

/* STAT BOX GRADIENT PROGRESSION (LIGHT → DARK) */
.dash-stat-box--1 {
  background-color: #d6e4f0;
  color: var(--mb-primary);
}

.dash-stat-box--2 {
  background-color: #afc5dc;
  color: #0f3560;
}

.dash-stat-box--3 {
  background-color: #7da0c4;
  color: #fff;
}

.dash-stat-box--4 {
  background-color: #4c73a0;
  color: #fff;
}

.dash-stat-box--5 {
  background-color: var(--mb-primary);
  color: #fff;
}

/* ===== ROWS 3-4: DATA TABLES ===== */
.dash-tables-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-6);
  margin-bottom: var(--space-6);
}

.dash-table-card {
  background: #fff;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.dash-table-header {
  background-color: var(--mb-primary);
  color: #fff;
  padding: var(--space-3) var(--space-4);
  font-size: var(--font-size-sm);
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.dash-table-header svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.dash-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--font-size-sm);
}

.dash-table thead th {
  text-align: left;
  font-size: var(--font-size-xs);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--gray-500);
  font-weight: 600;
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--gray-200);
  white-space: nowrap;
}

.dash-table thead th.text-right {
  text-align: right;
}

.dash-table tbody tr {
  border-bottom: 1px solid var(--gray-100);
  transition: background 0.15s ease;
}

.dash-table tbody tr:last-child {
  border-bottom: none;
}

.dash-table tbody tr:hover {
  background: var(--gray-50);
}

.dash-table tbody td {
  padding: var(--space-2) var(--space-3);
  vertical-align: middle;
}

.dash-table tbody td.text-right {
  text-align: right;
}

.dash-table tbody td.font-semibold {
  font-weight: 600;
}

.dash-table tbody td.text-muted {
  color: var(--gray-500);
  font-size: var(--font-size-xs);
}

.dash-table-empty {
  padding: var(--space-6);
  text-align: center;
  color: var(--gray-400);
  font-size: var(--font-size-sm);
}

/* DASHBOARD PERIOD SELECTOR BAR */
.dash-period-bar {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--neutral-100);
  border: 1px solid var(--neutral-300);
  border-radius: var(--radius-md);
  margin-top: var(--space-4);
  margin-bottom: var(--space-4);
  font-size: var(--font-size-sm);
  color: var(--neutral-700);
  flex-wrap: wrap;
}
.dash-period-label {
  white-space: nowrap;
  margin-right: var(--space-3);
}
.dash-period-select {
  padding: var(--space-1) var(--space-3);
  border: 1px solid var(--neutral-400);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-sm);
  background: var(--neutral-white);
  color: var(--neutral-800);
  cursor: pointer;
}
.dash-period-select:focus {
  outline: none;
  border-color: var(--mb-primary);
  box-shadow: 0 0 0 2px rgba(31, 58, 77, 0.15);
}
.dash-period-custom {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
.dash-period-custom label {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--font-size-sm);
  color: var(--neutral-600);
  white-space: nowrap;
}
.dash-period-date {
  padding: var(--space-1) var(--space-2);
  border: 1px solid var(--neutral-400);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-sm);
  background: var(--neutral-white);
  color: var(--neutral-800);
}
.dash-period-date:focus {
  outline: none;
  border-color: var(--mb-primary);
  box-shadow: 0 0 0 2px rgba(31, 58, 77, 0.15);
}
.dash-period-apply {
  padding: var(--space-1) var(--space-3) !important;
  font-size: var(--font-size-sm) !important;
  min-height: auto !important;
}

/* ===== DASHBOARD FILTER DROPDOWNS (CHANGE-011) ===== */
#dashFilterDropdowns {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-left: var(--space-4);
}
#dashFilterDropdowns label {
  font-size: var(--font-size-xs);
  color: var(--gray-500);
  white-space: nowrap;
}
#dashFilterDropdowns .form-select {
  font-size: var(--font-size-sm);
  min-width: 160px;
}

/* INLINE FILTER DROPDOWNS IN FILTER BAR (CHANGE-011) */
.filter-bar > span {
  display: contents;
}

/* FIELD HIGHLIGHT FOR #assignSalesperson HASH (CHANGE-011) */
.field-highlight {
  border: 2px solid #ee6c4d !important;
  box-shadow: 0 0 8px rgba(238, 108, 77, 0.3);
  transition: border-color 0.5s ease, box-shadow 0.5s ease;
}
.field-highlight-fade {
  border-color: var(--gray-300) !important;
  box-shadow: none;
}

/* ===== STEP 5: DOCUMENT SELECTION (ND-DOC-*) ===== */

.nd-doc-count {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  font-weight: 500;
}

.nd-doc-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--border-color);
  border-radius: var(--radius);
  margin-bottom: var(--space-2);
  background: var(--white);
  transition: background 0.15s;
}

.nd-doc-row:hover {
  background: var(--gray-50, #f8f9fa);
}

/* CHANGE-262: document drag handle (left of the checkbox) + drag indicators. */
.nd-doc-drag-handle { flex: 0 0 auto; }
.nd-doc-row.dragging { opacity: 0.5; }
.nd-doc-row.drop-above { box-shadow: inset 0 2px 0 0 var(--brand-primary, #1f3a4d); }
.nd-doc-row.drop-below { box-shadow: inset 0 -2px 0 0 var(--brand-primary, #1f3a4d); }

.nd-doc-check-label {
  flex-shrink: 0;
  cursor: pointer;
}

.nd-doc-check {
  width: 18px;
  height: 18px;
  cursor: pointer;
}

.nd-doc-info {
  flex: 1;
  min-width: 0;
}

.nd-doc-name {
  font-weight: 600;
  font-size: var(--font-size-sm);
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.nd-doc-desc {
  font-size: var(--font-size-xs, 12px);
  color: var(--text-secondary);
  margin-top: 2px;
}

.nd-doc-badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 1px 6px;
  border-radius: 3px;
}

.nd-doc-badge-template {
  background: rgba(31, 58, 77, 0.1);
  color: var(--mb-primary);
}

.nd-doc-badge-static {
  background: var(--gray-100, #e9ecef);
  color: var(--text-secondary);
}

/* CHANGE-287: Product Line catalog document badge. */
.nd-doc-badge-catalog {
  background: var(--mb-secondary-light, #eaf2f8);
  color: var(--brand-primary, #1f3a4d);
  border: 1px solid var(--mb-secondary, #98c1d9);
}

.nd-doc-actions {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  flex-shrink: 0;
}

.nd-doc-preview-btn {
  background: none;
  border: 1px solid var(--mb-primary);
  color: var(--mb-primary);
  font-size: var(--font-size-xs, 12px);
  padding: 2px 8px;
  border-radius: var(--radius);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}

.nd-doc-preview-btn:hover {
  background: var(--mb-primary);
  color: var(--white);
}

.nd-doc-move-btn {
  background: none;
  border: 1px solid var(--border-color);
  color: var(--text-secondary);
  font-size: 14px;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius);
  cursor: pointer;
  padding: 0;
  line-height: 1;
  transition: background 0.15s, color 0.15s;
}

.nd-doc-move-btn:hover {
  background: var(--gray-100, #e9ecef);
  color: var(--text-primary);
}

.nd-doc-preview-panel {
  margin: -2px 0 var(--space-2) 0;
  padding: var(--space-4);
  background: var(--gray-50, #f8f9fa);
  border: 1px solid var(--border-color);
  border-top: none;
  border-radius: 0 0 var(--radius) var(--radius);
  font-size: var(--font-size-sm);
  line-height: 1.6;
  color: var(--text-primary);
  font-family: 'Georgia', serif;
}

/* ===== STEP 6: PRESENTATION (PRES-*) ===== */

.pres-format-group {
  display: flex;
  gap: var(--space-4);
  flex-wrap: wrap;
}

.pres-format-option {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--font-size-sm);
  cursor: pointer;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--border-color);
  border-radius: var(--radius);
  transition: border-color 0.15s, background 0.15s;
}

.pres-format-option:hover {
  border-color: var(--mb-primary);
}

.pres-format-option:has(input:checked) {
  border-color: var(--mb-primary);
  background: rgba(31, 58, 77, 0.05);
}

.pres-generate-row {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin-top: var(--space-4);
}

.pres-generated-status {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--font-size-sm);
  color: var(--success, #28a745);
}

.pres-status-icon {
  font-size: 16px;
}

.pres-guardrail {
  padding: var(--space-4);
  background: #fff8e1;
  border: 1px solid #ffe082;
  border-radius: var(--radius);
  font-size: var(--font-size-sm);
  color: #6d4c00;
}

.pres-guardrail-icon {
  font-size: 16px;
}

.pres-preview-buttons {
  display: flex;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

.pres-iframe-wrap {
  border: 1px solid var(--border-color);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--white);
}

.pres-iframe {
  width: 100%;
  height: 480px;
  border: none;
  display: block;
}

.pres-attach-group {
  display: flex;
  gap: var(--space-4);
}

.pres-attach-option {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--font-size-sm);
  cursor: pointer;
}

.pres-tracking-options {
  display: flex;
  gap: var(--space-4);
}

.pres-send-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-4);
}

.pres-sent-badge {
  font-size: var(--font-size-sm);
  color: var(--success, #28a745);
  font-weight: 600;
}

.pres-tracking-panel {
  margin-top: var(--space-5);
  border: 1px solid var(--border-color);
  border-radius: var(--radius);
  overflow: hidden;
}

.pres-tracking-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-3) var(--space-4);
  background: var(--gray-50, #f8f9fa);
  border-bottom: 1px solid var(--border-color);
  font-size: var(--font-size-sm);
}

.pres-tracking-id {
  font-family: monospace;
  font-size: var(--font-size-xs, 12px);
  color: var(--text-secondary);
}

.pres-tracking-timeline {
  padding: var(--space-3) var(--space-4);
}

.pres-tracking-event {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) 0;
  font-size: var(--font-size-sm);
  border-bottom: 1px solid var(--gray-100, #e9ecef);
}

.pres-tracking-event:last-child {
  border-bottom: none;
}

.pres-tracking-event-icon {
  font-size: 16px;
  width: 24px;
  text-align: center;
}

.pres-tracking-event-label {
  font-weight: 600;
  min-width: 60px;
}

.pres-tracking-event-time {
  color: var(--text-secondary);
}

/* TOAST NOTIFICATION */
.pres-toast {
  position: fixed;
  bottom: 24px;
  right: 24px;
  padding: var(--space-3) var(--space-5);
  background: var(--mb-primary);
  color: var(--white);
  border-radius: var(--radius);
  font-size: var(--font-size-sm);
  font-weight: 500;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.3s, transform 0.3s;
  pointer-events: none;
  z-index: 9999;
}

.pres-toast-show {
  opacity: 1;
  transform: translateY(0);
}

.pres-toast-error {
  background: var(--danger, #dc3545);
}

/* ===== CHANGE-012A: MANUFACTURER DASHBOARD STAT BOXES ===== */

.mfr-stat-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}

.mfr-stat-row-label {
  font-size: var(--font-size-sm);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--gray-500);
  margin-bottom: var(--space-2);
}

.mfr-stat-box {
  border-radius: var(--radius-md);
  padding: 20px 24px;
  color: #fff;
  display: flex;
  flex-direction: column;
  min-height: 100px;
  transition: transform 150ms ease, box-shadow 150ms ease;
}

.mfr-stat-box:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.mfr-stat-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.mfr-stat-icon {
  width: 40px;
  height: 40px;
  opacity: 0.85;
  flex-shrink: 0;
}

.mfr-stat-icon svg {
  width: 32px;
  height: 32px;
}

.mfr-stat-number {
  font-size: 32px;
  font-weight: 700;
  line-height: 1;
}

.mfr-stat-label {
  font-size: 14px;
  font-weight: 500;
  opacity: 0.9;
  letter-spacing: 0.5px;
}

/* QUOTES GRADIENT: LIGHTER → DARKER PRIMARY */
.mfr-stat-box.quotes-1 { background: #3a6aad; }
.mfr-stat-box.quotes-2 { background: #2a5590; }
.mfr-stat-box.quotes-3 { background: #1f3a4d; }

/* ORDERS GRADIENT: LIGHTER → DARKER PRIMARY */
.mfr-stat-box.orders-1 { background: #4a7ab8; }
.mfr-stat-box.orders-2 { background: #2a5590; }
.mfr-stat-box.orders-3 { background: #1a3d6e; }

/* CHANGE-012A: MANUFACTURER REP FILTER IN PERIOD BAR */
#mfrRepFilter {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-left: var(--space-4);
}

#mfrRepFilter label {
  font-size: var(--font-size-xs);
  color: var(--gray-500);
  white-space: nowrap;
}

#mfrRepFilter .form-select {
  font-size: var(--font-size-sm);
  min-width: 180px;
}

/* CHANGE-012A: SIDEBAR DIRECT LINK STYLE (FLAT NAV) */
.menu-direct-link {
  text-decoration: none;
  cursor: pointer;
}

.menu-direct-link.active,
.section-active > .menu-direct-link {
  background: rgba(255, 255, 255, 0.1);
  border-left: 3px solid var(--mb-action, #ee6c4d);
}

/* CHANGE-013: PRESENTATION PREVIEW ACTIONS BAR */
.pres-actions-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-2) 0;
  margin-bottom: var(--space-2);
  border-bottom: 1px solid var(--gray-200);
}

.pres-toggles {
  display: flex;
  gap: var(--space-4);
  align-items: center;
}

.pres-action-buttons {
  display: flex;
  gap: var(--space-2);
  align-items: center;
}

.pres-iframe-wrap {
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: #fff;
}

.pres-iframe {
  width: 100%;
  min-height: 800px;
  border: none;
  display: block;
}

/* CHANGE-014: IMPERSONATION BANNER */
.impersonation-banner {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 40px;
  background: #5b21b6;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  z-index: 10000;
  padding: 0 20px;
}

body.impersonating {
  padding-top: 40px;
}

body.impersonating .sidebar {
  top: 40px;
}

/* CHANGE-014: DEACTIVATION NOTIFICATION BANNER */
.deactivation-banner {
  background: #fff3cd;
  border-bottom: 1px solid #ffc107;
  color: #856404;
  padding: 10px 20px;
  font-size: 13px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.deactivation-banner .dismiss-btn {
  background: none;
  border: none;
  color: #856404;
  font-size: 18px;
  cursor: pointer;
  padding: 0 4px;
}

/* CHANGE-014: STAT BOX VARIANTS */
.stat-box.stat-blue { background: linear-gradient(135deg, #1f3a4d, #2563eb); }
.stat-box.stat-green { background: linear-gradient(135deg, #166534, #22c55e); }
.stat-box.stat-orange { background: linear-gradient(135deg, #9a3412, #f97316); }
.stat-box.stat-purple { background: linear-gradient(135deg, #5b21b6, #8b5cf6); }
.stat-box.stat-cyan { background: linear-gradient(135deg, #0e7490, #22d3ee); }

/* ===== CHANGE-015: MANUFACTURER PORTAL STYLES ===== */

/* CONTROLS BAR */
.mfr-controls-bar {
  display: flex;
  gap: var(--space-4);
  align-items: flex-end;
  background: #f8f9fa;
  padding: 12px 20px;
  border-radius: 6px;
  margin-bottom: 20px;
}

.mfr-control-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.mfr-control-group .form-label {
  font-size: 11px;
  margin-bottom: 0;
}

.mfr-control-group .form-select {
  min-width: 160px;
}

/* SORTABLE TABLE HEADERS */
th.sortable {
  cursor: pointer;
  user-select: none;
}

th.sortable:hover {
  background: rgba(31, 58, 77, 0.08);
}

th.active-sort {
  color: var(--mb-primary);
}

.table-link {
  color: var(--mb-primary);
  text-decoration: none;
  font-weight: 600;
}

.table-link:hover {
  text-decoration: underline;
}

.clickable-row {
  cursor: pointer;
}

.clickable-row:hover {
  background: rgba(152, 193, 217, 0.1) !important;
}

/* CSS HORIZONTAL BAR CHARTS */
.mfr-bar-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}

.mfr-bar-label {
  width: 180px;
  font-size: 12px;
  font-weight: 600;
  color: #333;
  text-align: right;
  flex-shrink: 0;
}

.mfr-bar-tracks {
  flex: 1;
}

.mfr-bar-track {
  height: 24px;
  background: #f0f0f0;
  border-radius: 3px;
  margin-bottom: 3px;
  overflow: hidden;
}

.mfr-bar {
  height: 100%;
  border-radius: 3px;
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  padding: 0 8px;
  display: flex;
  align-items: center;
  white-space: nowrap;
  min-width: 40px;
  transition: width 0.3s ease;
}

/* CSS VERTICAL BAR CHART */
.mfr-vbar-chart {
  display: flex;
  align-items: flex-end;
  gap: 12px;
  height: 200px;
  padding-top: 30px;
}

.mfr-vbar-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100%;
  justify-content: flex-end;
}

.mfr-vbar-value {
  font-size: 10px;
  font-weight: 600;
  color: #333;
  margin-bottom: 4px;
}

.mfr-vbar-bar {
  width: 100%;
  max-width: 60px;
  border-radius: 3px 3px 0 0;
  transition: height 0.3s ease;
}

.mfr-vbar-label {
  font-size: 10px;
  color: #666;
  margin-top: 6px;
  text-align: center;
}

/* PROFILE TABS */
.profile-tabs {
  display: flex;
  gap: 0;
  border-bottom: 2px solid #e9ecef;
  margin-bottom: var(--space-4);
}

.profile-tab {
  padding: 8px 16px;
  border: none;
  background: none;
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: #666;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  transition: color 0.15s, border-color 0.15s;
}

.profile-tab:hover {
  color: var(--mb-primary);
}

.profile-tab--active {
  color: var(--mb-primary);
  border-bottom-color: var(--mb-primary);
}

/* PROFILE HEADER */
.profile-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: var(--space-4);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--gray-200);
}

.profile-header h2 {
  margin-bottom: 4px;
}

.profile-header-actions {
  display: flex;
  gap: var(--space-2);
}

/* PROFILE OVERVIEW LAYOUT */
.profile-overview {
  display: flex;
  gap: var(--space-6);
}

.profile-overview-left {
  flex: 0 0 60%;
}

.profile-overview-right {
  flex: 0 0 38%;
}

.profile-section {
  margin-bottom: var(--space-4);
}

.profile-section h4 {
  color: var(--mb-primary);
  font-size: var(--font-size-sm);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: var(--space-2);
  padding-bottom: var(--space-1);
  border-bottom: 1px solid #eee;
}

.profile-section p {
  font-size: var(--font-size-sm);
  line-height: 1.6;
  margin: 0;
}

/* METRIC CARDS */
.metric-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
}

.metric-card {
  background: #fff;
  border: 1px solid #e9ecef;
  border-radius: 8px;
  padding: 16px;
  text-align: center;
}

.metric-value {
  font-size: 28px;
  font-weight: 700;
}

.metric-label {
  font-size: 12px;
  color: #888;
  margin-top: 4px;
}

/* ACTIVITY TIMELINE */
.activity-timeline {
  max-width: 700px;
}

.activity-event {
  border-left: 3px solid #ddd;
  padding: 8px 0 8px 16px;
  margin-bottom: 4px;
}

.activity-date {
  font-size: 11px;
  color: #999;
  margin-bottom: 2px;
}

.activity-text {
  font-size: 13px;
  line-height: 1.5;
}

/* LOCATION CARDS */
.location-card {
  border: 1px solid #e9ecef;
  border-radius: var(--radius-md);
  margin-bottom: var(--space-3);
  overflow: hidden;
}

.location-header {
  background: #f8f9fa;
  padding: 8px 12px;
  font-size: var(--font-size-sm);
  font-weight: 600;
  border-bottom: 1px solid #e9ecef;
}

.location-body {
  padding: 10px 12px;
  font-size: var(--font-size-sm);
}

.location-body p {
  margin: 0;
  line-height: 1.5;
}

/* NOTE CARDS */
.note-card {
  background: #fafbfc;
  border: 1px solid #e9ecef;
  border-radius: var(--radius-md);
  padding: 12px 16px;
  margin-bottom: var(--space-3);
}

.note-meta {
  font-size: 11px;
  color: #999;
  margin-bottom: 4px;
}

.note-text {
  font-size: var(--font-size-sm);
  line-height: 1.5;
}

/* PILLS */
.pill {
  display: inline-block;
  background: rgba(31, 58, 77, 0.1);
  border: 1px solid rgba(31, 58, 77, 0.3);
  border-radius: 16px;
  padding: 2px 10px;
  font-size: 12px;
  color: var(--mb-primary);
  margin-right: 4px;
}

/* PROFILE FORM */
.profile-form {
  max-width: 600px;
}

.profile-form .form-group {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid #f0f0f0;
}

.profile-form .form-label {
  font-weight: 600;
  color: #555;
  min-width: 200px;
}

/* REPORT CARD GRID */
.report-card-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
}

.report-card {
  background: #fff;
  border: 1px solid #e9ecef;
  border-radius: var(--radius-md);
  padding: var(--space-4);
  transition: box-shadow 0.15s;
}

.report-card--active {
  cursor: pointer;
}

.report-card--active:hover {
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  border-color: var(--mb-primary);
}

.report-card h4 {
  margin: 0;
  font-size: var(--font-size-base);
}

/* BACK LINK */
.back-link {
  text-decoration: none;
}

.back-link:hover {
  text-decoration: underline;
}

/* ===== CHANGE-016: FILTER CHIPS ===== */
.filter-chips {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: var(--space-2);
}

.filter-chip {
  display: inline-block;
  padding: 4px 14px;
  border: none;
  border-radius: 16px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  background: #f0f0f0;
  color: #333;
  transition: background 0.15s, color 0.15s;
}

.filter-chip:hover {
  background: #e0e0e0;
}

.filter-chip--active {
  background: var(--mb-primary, #1f3a4d);
  color: #fff;
}

/* ===== CHANGE-016: VERSION PANEL ===== */
.version-panel {
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-3);
  overflow: hidden;
}

.version-panel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 14px;
  background: #f8f9fa;
  cursor: pointer;
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--mb-primary);
  user-select: none;
}

.version-current {
  font-weight: 400;
  color: #666;
  font-size: 12px;
}

.version-chevron {
  color: #999;
}

.version-panel-body {
  padding: 8px 14px;
  border-top: 1px solid var(--gray-200);
}

.version-entry {
  padding: 4px 0;
  font-size: 12px;
  color: #666;
}

.version-entry--current {
  font-weight: 600;
  color: var(--mb-primary);
}

/* ===== CHANGE-016: ALERT MESSAGE INDICATOR ===== */
.alert-msg-btn {
  position: relative;
  padding: 4px;
  margin-left: 8px;
  vertical-align: middle;
}

.alert-msg-btn .alert-dot {
  position: absolute;
  top: 2px;
  right: 2px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--mb-primary, #1f3a4d);
}

/* ===== CHANGE-016: BULK ACTION BAR ===== */
.bulk-action-bar {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: 8px 14px;
  background: rgba(31, 58, 77, 0.05);
  border: 1px solid rgba(31, 58, 77, 0.15);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-3);
  font-size: var(--font-size-sm);
  font-weight: 600;
}

/* ===== CHANGE-016: EXPIRATION INDICATORS ===== */
.expiration-warning {
  color: #ee6c4d;
  font-size: 12px;
  font-weight: 600;
}

.expiration-expired {
  color: #c1121f;
  font-size: 12px;
  font-weight: 600;
}

/* ===== CHANGE-016: DASHBOARD ACTION BUTTONS ===== */
.dash-action-btns {
  display: flex;
  gap: var(--space-3);
  margin-bottom: var(--space-6);
}

/* ===== CHANGE-017: COUNTDOWN TIMER ===== */
.countdown-normal { color: #888; font-size: 12px; }
.countdown-warning { color: #ee6c4d; font-weight: 600; font-size: 12px; }
.countdown-urgent { color: #c1121f; font-weight: 700; font-size: 12px; animation: pulse 2s ease-in-out infinite; }
.countdown-reverted { color: #c1121f; font-weight: 700; font-size: 11px; text-transform: uppercase; }
.row-reverted { opacity: 0.5; }

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.6; }
}

/* ===== CHANGE-017: SOURCE BADGES ===== */
.source-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 3px;
  font-size: 11px;
  font-weight: 600;
  color: #fff;
}
.source-manager { background: #1f3a4d; }
.source-mfr { background: #ee6c4d; }
.source-dtc { background: #98c1d9; }

/* ===== CHANGE-017: AT-RISK ALERT CARD ===== */
.at-risk-card {
  background: #fff3cd;
  border: 1px solid #ffc107;
  border-left: 4px solid #ee6c4d;
  padding: 12px 16px;
  border-radius: var(--radius-md);
  margin-bottom: var(--space-4);
  font-size: var(--font-size-sm);
  color: #856404;
}

/* ===== CHANGE-017: THREAD MESSAGES ===== */
.thread-msg {
  border-radius: var(--radius-md);
  padding: 12px 16px;
  margin-bottom: var(--space-3);
}
.thread-msg-dealer {
  background: rgba(31, 58, 77, 0.05);
  border-left: 3px solid #1f3a4d;
}
.thread-msg-mfr {
  background: rgba(238, 108, 77, 0.05);
  border-left: 3px solid #ee6c4d;
}
.thread-msg-header {
  font-size: 12px;
  color: #666;
  margin-bottom: 6px;
}
.thread-msg-body {
  font-size: var(--font-size-sm);
  line-height: 1.6;
}
.thread-msg-attach {
  font-size: 11px;
  color: #999;
  margin-top: 6px;
  font-style: italic;
}

/* ===== CHANGE-017: PIPELINE KANBAN ===== */
.pipeline-kanban {
  display: flex;
  gap: var(--space-3);
  overflow-x: auto;
  padding-bottom: var(--space-4);
}
.pipeline-column {
  flex: 1;
  min-width: 180px;
  background: #f8f9fa;
  border-radius: var(--radius-md);
  overflow: hidden;
}
.pipeline-column-header {
  padding: 10px 12px;
  font-weight: 600;
  font-size: var(--font-size-sm);
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #fff;
  border-bottom: 1px solid #e9ecef;
}
.pipeline-count {
  background: var(--gray-200);
  border-radius: 50%;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
}
.pipeline-card {
  background: #fff;
  border: 1px solid #e9ecef;
  border-left: 3px solid #ccc;
  border-radius: var(--radius-sm);
  margin: 8px;
  padding: 10px 12px;
  font-size: 12px;
}
.pipeline-card--stalled { border-color: #ee6c4d !important; }
.pipeline-card--atrisk { border-color: #c1121f !important; }
.pipeline-card-id { font-weight: 700; font-size: 13px; color: var(--mb-primary); }
.pipeline-card-dealer { color: #666; }
.pipeline-card-amount { font-weight: 600; margin-top: 4px; }
.pipeline-card-days { font-size: 11px; color: #999; margin-top: 2px; }
.pipeline-empty { padding: 20px; text-align: center; color: #ccc; font-size: 12px; }

/* ===== CHANGE-017: DEALER SELECT CARDS ===== */
.dealer-select-list {
  max-height: 240px;
  overflow-y: auto;
}
.dealer-select-card {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid #e9ecef;
  border-radius: var(--radius-md);
  margin-bottom: 6px;
  cursor: pointer;
  transition: background 0.15s;
}
.dealer-select-card:hover { background: rgba(31, 58, 77, 0.03); }
.dealer-select-card--selected { background: rgba(31, 58, 77, 0.05); border-color: var(--mb-primary); }

/* ===== CHANGE-017: SIDEBAR BADGE ===== */
.sidebar-badge {
  background: #c1121f;
  color: #fff;
  border-radius: 50%;
  min-width: 20px;
  height: 20px;
  font-size: 11px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: 6px;
}

/* ===== CHANGE-018: CALENDAR STYLES ===== */
.cal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-4);
  padding: var(--space-3) 0;
}

.cal-nav {
  display: flex;
  align-items: center;
}

.cal-views {
  display: flex;
  align-items: center;
  gap: var(--space-1);
}

.cal-view-btn {
  background: var(--gray-100);
  border: 1px solid var(--gray-200);
  color: #333;
}

.cal-view-btn--active {
  background: var(--mb-primary);
  color: #fff;
  border-color: var(--mb-primary);
}

/* MONTHLY GRID */
.cal-month-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.cal-month-header {
  background: var(--mb-primary);
  color: #fff;
  padding: 8px;
  text-align: center;
  font-size: 12px;
  font-weight: 600;
}

.cal-day-cell {
  min-height: 100px;
  border: 1px solid var(--gray-100);
  padding: 4px 6px;
  font-size: 12px;
  cursor: pointer;
}

.cal-day-cell:hover {
  background: rgba(152, 193, 217, 0.05);
}

.cal-day-cell--today {
  background: rgba(238, 108, 77, 0.1);
}

.cal-day-cell--empty {
  background: #fafafa;
  cursor: default;
}

.cal-day-num {
  font-weight: 600;
  margin-bottom: 4px;
  color: var(--mb-primary);
}

.cal-entry-label {
  padding: 1px 4px;
  font-size: 10px;
  margin-bottom: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cal-entry-more {
  font-size: 10px;
  color: #999;
  font-style: italic;
}

/* WEEKLY GRID */
.cal-week-grid {
  display: flex;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.cal-week-time-col {
  flex: 0 0 60px;
  border-right: 1px solid var(--gray-200);
}

.cal-week-day-col {
  flex: 1;
  border-right: 1px solid var(--gray-100);
}

.cal-week-day-col:last-child {
  border-right: none;
}

.cal-week-header-cell {
  padding: 8px;
  text-align: center;
  font-size: 12px;
  font-weight: 600;
  background: #f8f9fa;
  border-bottom: 1px solid var(--gray-200);
  min-height: 40px;
}

.cal-week-time-slot {
  height: 40px;
  border-bottom: 1px solid var(--gray-100);
  padding: 2px 6px;
  font-size: 10px;
  color: #999;
}

.cal-week-slot {
  height: 40px;
  border-bottom: 1px solid var(--gray-100);
  font-size: 10px;
  padding: 2px 4px;
}

.cal-week-slot--filled {
  font-weight: 600;
  display: flex;
  align-items: center;
}

/* DAY VIEW */
.cal-day-layout {
  display: flex;
  gap: var(--space-4);
}

.cal-day-slots {
  flex: 0 0 60%;
}

.cal-day-agenda {
  flex: 0 0 38%;
}

.cal-day-slot {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  min-height: 44px;
  border-bottom: 1px solid var(--gray-100);
  padding: 4px 0;
}

.cal-day-slot-time {
  flex: 0 0 50px;
  font-size: 11px;
  color: #999;
  text-align: right;
  padding-top: 2px;
}

.cal-day-slot-entry {
  padding: 4px 8px;
  font-size: 12px;
  flex: 1;
}

.cal-agenda-item {
  padding: 8px 12px;
  margin-bottom: var(--space-2);
  border-radius: var(--radius-sm);
  background: #fafbfc;
}

/* ===== CHANGE-018: SETTINGS STYLES ===== */
.settings-toggle-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid #f0f0f0;
  font-size: var(--font-size-sm);
}

.toggle-switch {
  position: relative;
  display: inline-block;
  width: 44px;
  height: 24px;
}

.toggle-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.toggle-slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #ccc;
  border-radius: 24px;
  transition: background 0.2s;
}

.toggle-slider::before {
  content: '';
  position: absolute;
  height: 18px;
  width: 18px;
  left: 3px;
  bottom: 3px;
  background: white;
  border-radius: 50%;
  transition: transform 0.2s;
}

.toggle-switch input:checked + .toggle-slider {
  background: var(--mb-primary);
}

.toggle-switch input:checked + .toggle-slider::before {
  transform: translateX(20px);
}

/* ===== CHANGE-019: TOAST NOTIFICATIONS ===== */
#toast-container {
  position: fixed;
  top: 80px;
  right: 20px;
  z-index: 9500;
  display: flex;
  flex-direction: column;
  gap: 8px;
  pointer-events: none;
}

.toast-item {
  width: 360px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  overflow: hidden;
  transform: translateX(120%);
  opacity: 0;
  transition: transform 0.3s ease, opacity 0.3s ease;
  pointer-events: all;
}

.toast-item.toast-visible {
  transform: translateX(0);
  opacity: 1;
}

.toast-border {
  height: 4px;
}

.toast-content {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
}

.toast-icon {
  font-size: 20px;
  flex-shrink: 0;
}

.toast-text {
  flex: 1;
  min-width: 0;
}

.toast-title {
  font-weight: 600;
  font-size: 13px;
  margin-bottom: 2px;
}

.toast-body {
  font-size: 12px;
  color: #666;
  line-height: 1.4;
}

.toast-close {
  background: none;
  border: none;
  font-size: 18px;
  color: #ccc;
  cursor: pointer;
  padding: 0 4px;
  flex-shrink: 0;
}

.toast-close:hover {
  color: #666;
}

/* ===== CHANGE-019: NOTIFICATION BELL ===== */
.notif-bell {
  cursor: pointer;
  font-size: 16px;
  position: relative;
  color: #999;
  user-select: none;
}

.notif-bell--active {
  color: var(--mb-primary);
}

.notif-badge {
  position: absolute;
  top: -6px;
  right: -8px;
  background: #c1121f;
  color: #fff;
  border-radius: 50%;
  min-width: 16px;
  height: 16px;
  font-size: 9px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 3px;
}

/* ===== CHANGE-019: NOTIFICATION PANEL ===== */
.notif-panel {
  position: fixed;
  top: 60px;
  right: 20px;
  width: 400px;
  max-height: 480px;
  background: #fff;
  box-shadow: 0 8px 24px rgba(0,0,0,0.15);
  border-radius: 8px;
  z-index: 9000;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.notif-panel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  border-bottom: 1px solid #eee;
}

.notif-panel-list {
  flex: 1;
  overflow-y: auto;
  max-height: 380px;
}

.notif-item {
  display: flex;
  gap: 10px;
  padding: 10px 16px;
  border-bottom: 1px solid #f0f0f0;
  border-left: 3px solid transparent;
  cursor: pointer;
  transition: background 0.15s;
}

.notif-item:hover {
  background: #fafafa;
}

.notif-item:not(.notif-item--read) {
  border-left-color: var(--mb-primary);
  font-weight: 600;
}

.notif-item--read {
  background: #fafafa;
}

.notif-item-icon {
  font-size: 16px;
  flex-shrink: 0;
}

.notif-item-title {
  font-size: 13px;
}

.notif-item-body {
  font-size: 11px;
  color: #888;
  font-weight: 400;
  line-height: 1.4;
}

.notif-item-time {
  font-size: 10px;
  color: #bbb;
  margin-top: 2px;
  font-weight: 400;
}

.notif-panel-footer {
  padding: 10px 16px;
  text-align: center;
  border-top: 1px solid #eee;
  font-size: 12px;
}

.notif-panel-empty {
  padding: 40px;
  text-align: center;
  color: #ccc;
}

/* FULL PAGE NOTIFICATIONS */
.notif-full-item {
  padding: 12px 16px;
  border-bottom: 1px solid #f0f0f0;
  border-left: 3px solid var(--mb-primary);
}

.notif-full-item--read {
  border-left-color: transparent;
  background: #fafafa;
}

/* ===== CHANGE-019: HELP GUIDE LAYOUT ===== */
.help-guide-layout {
  display: flex;
  gap: var(--space-6);
  min-height: 500px;
}

.help-sidebar {
  flex: 0 0 28%;
  max-width: 280px;
}

.help-content {
  flex: 1;
  background: #fff;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-md);
  padding: var(--space-4);
}

.help-category {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: var(--font-size-sm);
  margin-bottom: 2px;
  transition: background 0.15s;
}

.help-category:hover {
  background: rgba(31, 58, 77, 0.05);
}

.help-category--active {
  background: rgba(31, 58, 77, 0.08);
  font-weight: 600;
  color: var(--mb-primary);
}

.help-category-count {
  font-size: 11px;
  color: #999;
  background: #f0f0f0;
  border-radius: 50%;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.help-article {
  padding: var(--space-4) 0;
  border-bottom: 1px solid #f0f0f0;
}

.help-article:last-child {
  border-bottom: none;
}

.help-article h3 {
  font-size: var(--font-size-base);
  color: var(--mb-primary);
  margin-bottom: var(--space-2);
}

.help-article p {
  font-size: var(--font-size-sm);
  line-height: 1.6;
  color: #555;
}

/* ===== CHANGE-019: SUPPORT LAYOUT ===== */
.support-layout {
  display: flex;
  gap: var(--space-6);
}

.support-form-col {
  flex: 0 0 55%;
}

.support-info-col {
  flex: 0 0 40%;
}

.support-info-col .card {
  background: #fff;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-md);
}

.support-info-col h4 {
  color: var(--mb-primary);
  font-size: var(--font-size-sm);
}

.support-info-col p {
  font-size: var(--font-size-sm);
  line-height: 1.6;
  margin: 0;
}

/* ===== CHANGE-019: DTC DEMO BAR ===== */
.dtc-demo-bar {
  background: #f5f5f5;
  border-bottom: 1px solid #e0e0e0;
  padding: 8px 20px;
  text-align: center;
  font-size: 12px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
}

.dtc-demo-bar .ep-link {
  color: #555;
  text-decoration: none;
  cursor: pointer;
  padding: 2px 8px;
  border-radius: 3px;
}

.dtc-demo-bar .ep-link:hover {
  background: #eee;
}

/* ===== CHANGE-020: PROJECT HEADER BAR ===== */
.project-header-bar {
  position: sticky;
  top: var(--wizard-step-nav-height, 72px);
  z-index: 9;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: 8px 16px;
  background: #fff;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-2);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
  font-size: var(--font-size-sm);
}

.project-header-bar__cell {
  display: flex;
  align-items: center;
  min-width: 0;
}

.project-header-bar__cell--version {
  flex: 0 0 auto;
}

.project-header-bar__cell--project {
  flex: 0 1 auto;
  min-width: 0;
  cursor: default;
}

/* CHANGE-251: LEFT GROUP — Quote number + Copy button sit right of Project. */
.project-header-bar__cell--quote {
  flex: 0 0 auto;
  cursor: default;
}

.project-header-bar__cell--copy {
  flex: 0 0 auto;
}

/* CHANGE-251: RIGHT GROUP — pushed to the far edge. The first right-group cell
   absorbs the slack so Project/Quote/Copy stay left and Validity/Status/Version
   anchor right. */
.project-header-bar__cell--validity {
  flex: 0 0 auto;
  margin-left: auto;
  cursor: default;
}

.project-header-bar__cell--status {
  flex: 0 0 auto;
}

.project-header-bar__validity-link {
  color: var(--mb-primary, #1f3a4d);
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
}

.project-header-bar__validity-link:hover { text-decoration: underline; }

/* Compact header status select. */
.project-header-bar .form-select-sm {
  padding: 2px 24px 2px 8px;
  font-size: 12px;
  height: auto;
  line-height: 1.4;
}

.project-header-bar__cell--ref {
  flex: 0 0 auto;
  width: 260px;
  justify-content: flex-end;
  cursor: default;
}

.project-header-bar__label {
  color: #6b7280;
  font-weight: 500;
  margin-right: 6px;
  white-space: nowrap;
}

.project-header-bar__value {
  color: var(--mb-primary, #1f3a4d);
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

.project-header-bar__empty {
  color: #9ca3af;
  font-weight: 400;
}

.version-control {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  background: #f8f9fa;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-sm, 4px);
  color: var(--mb-primary, #1f3a4d);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  line-height: 1.4;
}

.version-control:hover {
  background: #eef2f7;
  border-color: #c7d2e0;
}

.version-control__chevron {
  color: #6b7280;
  font-size: 10px;
}

/* ===== CHANGE-259: shared header chip (Copy / Validity / Status / Version) ===== */
.header-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  background: #f8f9fa;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-sm, 4px);
  color: var(--brand-primary, #1f3a4d);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  line-height: 1.4;
  white-space: nowrap;
}
.header-chip:hover { background: #eef2f7; border-color: #c7d2e0; }
.header-chip:disabled { opacity: 0.6; cursor: not-allowed; }
.header-chip__chevron { color: #6b7280; font-size: 10px; }

/* CHANGE-259 (2e): more breathing room between Validity / Status / Version. */
.project-header-bar__cell--validity,
.project-header-bar__cell--status,
.project-header-bar__cell--version { margin-left: var(--space-4, 16px); }
.project-header-bar__cell--validity { margin-left: auto; }  /* still anchors the right group */

/* CHANGE-259 (1b): Back-to-Quotes hover keeps its resting background. */
#backToQuotesBtn:hover {
  background-color: var(--brand-primary, #1f3a4d);
  border-color: var(--brand-primary, #1f3a4d);
}

@media (max-width: 900px) {
  .project-header-bar__cell--ref { width: 180px; }
}

@media (max-width: 700px) {
  .project-header-bar { flex-wrap: wrap; }
  .project-header-bar__cell--ref { width: auto; flex: 1 1 100%; justify-content: flex-start; }
  /* CHANGE-251: when wrapped, drop the auto-margin so the right group flows
     onto the next line instead of being shoved to the far edge. */
  .project-header-bar__cell--validity { margin-left: 0; }
}

/* VERSION HISTORY MODAL */
.version-history-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
}

.version-history-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(17, 24, 39, 0.45);
}

.version-history-modal__panel {
  position: relative;
  background: #fff;
  border-radius: var(--radius-md);
  width: min(560px, 92vw);
  max-height: 80vh;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
  display: flex;
  flex-direction: column;
}

.version-history-modal__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  border-bottom: 1px solid var(--gray-200);
  background: #f8f9fa;
}

.version-history-modal__header h3 {
  margin: 0;
  font-size: var(--font-size-md, 14px);
  color: var(--mb-primary, #1f3a4d);
}

.version-history-modal__close {
  background: none;
  border: none;
  font-size: 22px;
  line-height: 1;
  color: #6b7280;
  cursor: pointer;
  padding: 0 4px;
}

.version-history-modal__close:hover { color: #111827; }

.version-history-modal__body {
  padding: 8px 16px 16px;
  overflow: auto;
}

.version-history-modal__table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--font-size-sm);
}

.version-history-modal__table th,
.version-history-modal__table td {
  text-align: left;
  padding: 8px 10px;
  border-bottom: 1px solid var(--gray-200);
}

.version-history-modal__table th {
  font-weight: 600;
  color: #6b7280;
  background: #fafbfc;
}

.version-history-modal__row--current td {
  font-weight: 600;
  color: var(--mb-primary, #1f3a4d);
}

/* ===== CHANGE-021: STEP 1 "PROJECT" RESTRUCTURE ===== */

/* Project Header 3-column grid */
.project-header-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: var(--space-4, 16px) var(--space-6, 24px);
}

.project-header-grid .form-group {
  margin-bottom: 0;
}

.project-header-grid .form-group--blank {
  /* Reserve the grid cell without rendering a label/input */
}

@media (max-width: 1024px) {
  .project-header-grid {
    grid-template-columns: 1fr 1fr;
  }
  .project-header-grid .form-group--blank {
    display: none;
  }
}

@media (max-width: 700px) {
  .project-header-grid {
    grid-template-columns: 1fr;
  }
}

/* Warning banner (e.g., no locations configured) */
.form-warning-banner {
  margin-top: 6px;
  padding: 8px 10px;
  background: #fff8e1;
  border: 1px solid #f0c74a;
  border-radius: var(--radius-sm, 4px);
  color: #7a5800;
  font-size: var(--font-size-xs, 12px);
  line-height: 1.4;
}

/* Same-as checkbox rows */
.address-same-group .checkbox-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 0;
  font-size: var(--font-size-sm);
  cursor: pointer;
}

.address-same-group .checkbox-row input[type="checkbox"] {
  margin: 0;
}

/* Slide-down billing / ship-to address blocks */
.address-block {
  overflow: hidden;
  transition: max-height 0.25s ease, opacity 0.25s ease,
              margin 0.25s ease, padding 0.25s ease, border-width 0.25s ease;
}

.address-block--collapsed {
  max-height: 0;
  opacity: 0;
  margin: 0;
  padding-top: 0;
  padding-bottom: 0;
  border: 0 none;
  pointer-events: none;
}

.address-block--expanded {
  max-height: 800px;
  opacity: 1;
}

/* ===== CHANGE-021 rev: SALESPERSON ROW + CUSTOMER MATCHES ===== */

/* Salesperson field: select + alert button side-by-side */
.salesperson-input-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.salesperson-input-row > select,
.salesperson-input-row > .form-select {
  flex: 1 1 auto;
  min-width: 0;
}

.salesperson-input-row > .alert-msg-btn {
  flex: 0 0 auto;
  margin-left: 0;
}

/* Customer live-search matches */
.customer-matches {
  margin-top: var(--space-2, 8px);
}

.customer-matches__header {
  font-size: var(--font-size-xs, 12px);
  font-weight: 600;
  color: #6b7280;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 6px;
}

.customer-matches__table {
  width: 100%;
  border-collapse: collapse;
  background: #fff;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-md, 6px);
  overflow: hidden;
  font-size: var(--font-size-sm, 13px);
}

.customer-matches__table th,
.customer-matches__table td {
  text-align: left;
  padding: 8px 12px;
  border-bottom: 1px solid var(--gray-200);
}

.customer-matches__table thead th {
  background: #f8f9fa;
  font-weight: 600;
  color: #6b7280;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.customer-matches__table tbody tr:last-child td {
  border-bottom: none;
}

.customer-matches__table tbody tr:hover {
  background: #f9fafb;
}

.customer-matches__action {
  width: 1%;
  white-space: nowrap;
  text-align: right;
}

.customer-match-select {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.customer-match-select__icon {
  font-size: 13px;
  line-height: 1;
}

.customer-matches__footer {
  margin-top: 10px;
  text-align: center;
}

.customer-matches__empty {
  padding: 14px 12px;
  text-align: center;
  color: #6b7280;
  background: #f8f9fa;
  border: 1px dashed var(--gray-300, #d1d5db);
  border-radius: var(--radius-md, 6px);
  font-size: var(--font-size-sm, 13px);
}

.customer-add-new-link {
  color: var(--mb-primary, #1f3a4d);
  font-weight: 600;
  text-decoration: none;
}

.customer-add-new-link:hover {
  text-decoration: underline;
}

/* ===== INPUT WITH ADJACENT ACTION BUTTON =====
   Pattern: a form input/select joined visually with an action button so the
   two read as one unit. Modifier --leading puts the button on the LEFT (e.g.
   Customer Name + Add New); --trailing puts the button on the RIGHT (e.g.
   Product Line + Compare). The base class only sets flex layout; the
   modifiers handle the seam (zeroed radii + suppressed shared border). */

.input-with-action {
  display: flex;
  align-items: stretch;
  width: 100%;
}

.input-with-action > .form-input,
.input-with-action > .form-select {
  flex: 1 1 auto;
  min-width: 0;
}

.input-action-btn {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 14px;
  background: var(--mb-secondary, #98c1d9);
  color: #fff;
  border: 1px solid var(--mb-secondary, #98c1d9);
  border-radius: var(--radius-sm, 4px);
  font-size: var(--font-size-sm, 13px);
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  line-height: 1;
  transition: background 0.15s;
}

.input-action-btn:hover {
  background: #5aafd0;
  border-color: #5aafd0;
}

/* --leading : button on the LEFT, input on the right */
.input-with-action--leading > .form-input,
.input-with-action--leading > .form-select {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  border-left: none;
}
.input-with-action--leading > .input-action-btn {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

/* --trailing : input on the LEFT, button on the right. Unlike --leading, the
   pair is NOT visually joined — a small flex gap keeps the select's down
   arrow from blending into the button's left edge. Both controls keep full
   border and radii. */
.input-with-action--trailing {
  gap: 6px;
}

.input-action-btn__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
}

/* Matches list → drawer spacing (more breathing room when drawer is shown) */
.customer-drawer.customer-drawer--open {
  margin-top: var(--space-6, 24px);
}

/* Hide matches area when drawer is open (attribute-driven) */
.customer-matches[hidden] {
  display: none;
}

/* ===== CHANGE-021 rev3: DRAWER HEADER LAYOUT (title + Quick/Detail left, Cancel right) ===== */
.customer-drawer-header__left {
  display: flex;
  align-items: center;
  gap: 2rem;
}

/* ===== CHANGE-022: USER LOCATIONS CELL + EDIT LOCATIONS MODAL ===== */

.user-locations-cell {
  font-size: var(--font-size-sm, 13px);
  max-width: 320px;
  line-height: 1.4;
}

.user-locations-more {
  display: inline-block;
  padding: 1px 6px;
  background: var(--gray-100, #f3f4f6);
  border-radius: 10px;
  font-size: 11px;
  color: #6b7280;
  font-weight: 600;
  margin-left: 4px;
  cursor: help;
}

.edit-locations-btn[disabled] {
  opacity: 0.55;
  cursor: not-allowed;
}

.edit-locations-modal .edit-locations-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-md, 6px);
  padding: 8px 10px;
  max-height: 320px;
  overflow-y: auto;
}

.edit-locations-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 4px;
  cursor: pointer;
  font-size: var(--font-size-sm, 13px);
  border-radius: 4px;
}

.edit-locations-row:hover {
  background: #f9fafb;
}

.edit-locations-row input[type="checkbox"] {
  margin: 0;
}

/* ===== CHANGE-023: ITEM EDITOR MODAL ===== */
.item-editor-modal {
  position: fixed;
  inset: 0;
  z-index: 1100;
  display: none;
  align-items: center;
  justify-content: center;
}

body.item-editor-modal-open {
  overflow: hidden;
}

.item-editor-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(17, 24, 39, 0.5);
}

.item-editor-modal__dialog {
  position: relative;
  background: #fff;
  border-radius: var(--radius-md, 6px);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.25);
  width: min(1200px, 96vw);
  max-height: 90vh;
  overflow-y: auto;
  padding: var(--space-5, 20px) var(--space-6, 24px) var(--space-4, 16px);
}

.item-editor-modal__close {
  position: absolute;
  top: 8px;
  right: 10px;
  background: transparent;
  border: none;
  font-size: 26px;
  line-height: 1;
  color: #6b7280;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 4px;
}

.item-editor-modal__close:hover {
  background: #f3f4f6;
  color: #111827;
}

.item-editor-modal__body {
  /* item-editor renders its own .item-editor wrapper inside */
}

/* When the item editor is rendered inside the modal, hide the "Back to Items"
   affordance (obsolete — the modal close X replaces it) and tune spacing. */
.item-editor--in-modal .item-editor-back {
  display: none;
}

/* ===== CHANGE-026: ITEM EDITOR MODAL — FORM-DRIVEN BODY ===== */

.item-editor-modal__host-chrome {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 24px;
  border-bottom: 1px solid #e8eaed;
  background: #fafbfc;
  flex-wrap: wrap;
}
.item-editor-modal__host-chrome .form-group { margin: 0; min-width: 200px; }
.item-editor-modal__host-chrome .compare-btn { margin-left: auto; }

.item-editor-modal__host-labels {
  display: flex;
  gap: 16px;
  padding: 16px 24px 0;
}
.item-editor-modal__host-labels .form-group { flex: 1; margin: 0; }
.item-editor-modal__host-labels .item-label-error input {
  border-color: #c1121f;
  box-shadow: 0 0 0 2px rgba(193, 18, 31, 0.1);
}

.item-editor-modal__split {
  display: flex;
  gap: 16px;
  padding: 16px 24px;
}
.item-editor-modal__svg-pane {
  flex: 0 0 380px;
  min-height: 440px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fafbfc;
  border-radius: 4px;
  padding: 16px;
}
.item-editor-modal__form-pane {
  flex: 1 1 auto;
  min-width: 0;
}
.item-editor-modal__form-pane .iqx-form-form { padding: 0; }
.item-editor-modal__form-pane .iqx-form-submit { display: none; }

.item-editor-modal__empty-state {
  color: #6b7280;
  font-size: 14px;
  text-align: center;
  padding: 32px;
}

@media (max-width: 900px) {
  .item-editor-modal__split { flex-direction: column; }
  .item-editor-modal__svg-pane { flex: 0 0 auto; min-height: 280px; }
}

/* ===== CHANGE-027: PRESET DROPDOWN + APPLIED-HINT PILL ===== */

.item-editor-modal__host-chrome #modalHostApplyPreset:not(:disabled) {
  background-color: #ffffff;
  cursor: pointer;
}
.item-editor-modal__host-chrome #modalHostApplyPreset optgroup {
  font-style: normal;
  font-weight: 600;
  color: #4a5568;
}
.item-editor-modal__host-chrome #modalHostApplyPreset option {
  font-weight: normal;
  color: #1a202c;
}

.preset-applied-hint {
  margin: -12px 24px 0;
  padding: 8px 12px;
  background: #e8f1fa;
  color: #1f3a4d;
  font-size: 13px;
  border-radius: 4px;
  border-left: 3px solid #1f3a4d;
  animation: preset-hint-fade 3s ease-out forwards;
}
@keyframes preset-hint-fade {
  0%        { opacity: 0; transform: translateY(-4px); }
  10%, 80%  { opacity: 1; transform: translateY(0); }
  100%      { opacity: 0; transform: translateY(-4px); }
}

/* ===== CHANGE-029: SAVE AS PRESET BUTTON ===== */

.item-editor-modal__host-chrome #modalHostSaveAsPreset {
  margin-left: 8px;
  align-self: flex-end;
}
.item-editor-modal__host-chrome #modalHostSaveAsPreset:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.item-editor-modal__host-chrome #modalHostSaveAsPreset.saved {
  background: #098078;
  color: #ffffff;
  border-color: #098078;
}

/* ===== CHANGE-028a: FORM BUILDER AUTHORING PAGE (read-only shell) ===== */

.form-builder-page {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: var(--space-4, 16px);
  padding: var(--space-4, 16px);
  height: calc(100vh - 60px);
}

.form-builder-page__rail {
  background: #fafbfc;
  border-radius: 4px;
  padding: var(--space-4, 16px);
  overflow-y: auto;
}
.form-builder-page__rail .btn { width: 100%; margin-bottom: var(--space-4, 16px); }

.form-builder-page__rail-section { margin-bottom: var(--space-6, 24px); }
.form-builder-page__rail-heading {
  font-size: 12px;
  text-transform: uppercase;
  color: #6b7280;
  letter-spacing: 0.5px;
  margin: 0 0 var(--space-2, 8px);
}

.form-builder-page__forms-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.form-builder-page__forms-list .form-list-item {
  padding: 8px 12px;
  border-radius: 4px;
  cursor: pointer;
  margin-bottom: 4px;
  display: flex;
  flex-direction: column;
}
.form-builder-page__forms-list .form-list-item:hover { background: #e8f1fa; }
.form-builder-page__forms-list .form-list-item.selected {
  background: #1f3a4d;
  color: #fff;
}
.form-builder-page__forms-list .form-list-meta {
  font-size: 11px;
  opacity: 0.7;
}
.form-builder-page__forms-list .empty-state {
  padding: 8px 12px;
  color: #6b7280;
  font-style: italic;
}

.form-builder-page__pane {
  background: #fff;
  border-radius: 4px;
  padding: var(--space-4, 16px);
  overflow: auto;
  position: relative;
}
.form-builder-page__pane--readonly .iqx-form-builder-canvas,
.form-builder-page__pane--readonly .iqx-form-builder-sidebar {
  pointer-events: none;
  opacity: 0.85;
}
.form-builder-page__pane--readonly .iqx-form-builder-canvas::after {
  content: 'Read-only — editing in CHANGE-028b';
  position: absolute;
  top: 8px;
  right: 8px;
  font-size: 11px;
  color: #6b7280;
  background: #f3f4f6;
  padding: 2px 6px;
  border-radius: 3px;
}

/* CHANGE-028b: .form-builder-readonly-banner retired (banner removed from
   forms.html). The .form-builder-page__pane--readonly overlay is still in
   use — applied conditionally by forms-builder-page.js when an active form
   is loaded in display mode. */

.form-builder-saved-at {
  margin-left: auto;
  padding: 4px 10px;
  font-size: 12px;
  color: #6b7280;
  align-self: center;
}
.form-builder-saved-at.recent {
  color: #098078; /* success green */
}
.form-builder-saved-at.failed {
  color: #c1121f;
}

/* Danger button — used by Discard Draft on the Form Builder authoring page */
.btn-danger {
  background: #c1121f;
  border: 1px solid #c1121f;
  color: #fff;
}
.btn-danger:hover { background: #a8182a; border-color: #a8182a; }

/* ===== CHANGE-030: SORTABLE COLUMN HEADERS ===== */

.sortable-header {
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
  position: relative;
}
.sortable-header:hover { background: #f4f5f7; }
.sortable-header .sort-indicator {
  display: inline-block;
  width: 10px;
  margin-left: 4px;
  font-size: 11px;
  color: #6b7280;
  vertical-align: middle;
}
.sortable-header.sort-active .sort-indicator { color: #1f3a4d; }
.sortable-header.sort-asc  .sort-indicator::before { content: '\25B2'; }
.sortable-header.sort-desc .sort-indicator::before { content: '\25BC'; }
.sortable-header:not(.sort-asc):not(.sort-desc) .sort-indicator::before {
  content: '\2195';
  opacity: 0.3;
}

/* ===== CHANGE-031b: TRACK 1 STATUS BADGES ===== */
/*
 * Tied specificity (2 classes) with global.css's `.status-badge[data-status="..."]`
 * rules; dealer.css loads after global.css so these win the cascade. Softer
 * pastel palette per spec — readable in tables, not visually overwhelming.
 * `--unknown` fallback handles any future status not yet styled.
 */
.status-badge.status-badge--draft {
  background: #e8eaed;
  color: #5f6368;
  text-transform: none;
  font-weight: 600;
  letter-spacing: 0;
}
.status-badge.status-badge--assigned {
  background: #fef7e0;
  color: #b8650a;
  text-transform: none;
  font-weight: 600;
  letter-spacing: 0;
}
.status-badge.status-badge--pending-review {
  background: #fff3cd;
  color: #856404;
  text-transform: none;
  font-weight: 600;
  letter-spacing: 0;
}
.status-badge.status-badge--approved {
  background: #d4edda;
  color: #155724;
  text-transform: none;
  font-weight: 600;
  letter-spacing: 0;
}
.status-badge.status-badge--sent {
  background: #cce5ff;
  color: #004085;
  text-transform: none;
  font-weight: 600;
  letter-spacing: 0;
}
.status-badge.status-badge--order {
  background: #d1ecf1;
  color: #0c5460;
  text-transform: none;
  font-weight: 600;
  letter-spacing: 0;
}
.status-badge.status-badge--shipped {
  background: #c3e9d3;
  color: #14532d;
  text-transform: none;
  font-weight: 600;
  letter-spacing: 0;
}
.status-badge.status-badge--reassigned-lead {
  background: #f8d7da;
  color: #721c24;
  text-transform: none;
  font-weight: 600;
  letter-spacing: 0;
}
.status-badge.status-badge--archived {
  background: #e2e3e5;
  color: #383d41;
  text-transform: none;
  font-weight: 600;
  letter-spacing: 0;
}
.status-badge.status-badge--warranty-claim {
  background: #fde2c7;
  color: #92400e;
  text-transform: none;
  font-weight: 600;
  letter-spacing: 0;
}
.status-badge.status-badge--unknown {
  background: #f3f4f6;
  color: #6b7280;
  text-transform: none;
  font-weight: 600;
  letter-spacing: 0;
}

/* ===== CHANGE-031b: TRANSITION BUTTON ROW ===== */

.quote-transition-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 12px 0;
  padding: 10px 12px;
  background: #f9fafb;
  border-radius: 6px;
  border: 1px solid #e5e7eb;
}
.quote-transition-row .quote-transition-current {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: #4b5563;
  margin-right: auto;
}
.quote-transition-row .quote-transition-current strong {
  color: #1f2937;
}
.quote-transition-row .btn[data-transition-target] {
  white-space: nowrap;
}

/* ===== CHANGE-031b: SETTINGS-WORKFLOW PAGE ===== */

.settings-workflow-page {
  padding: var(--space-4, 16px);
  max-width: 720px;
}
.settings-workflow-page h2 {
  margin: 0 0 var(--space-2, 8px);
}
.settings-workflow-page__section {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  padding: var(--space-4, 16px);
  margin-bottom: var(--space-4, 16px);
}
.settings-workflow-page__section h3 {
  margin: 0 0 var(--space-3, 12px);
  font-size: 16px;
  font-weight: 600;
  color: #1f2937;
}
.settings-workflow-page__toggle {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: var(--space-3, 12px);
}
.settings-workflow-page__toggle input[type="checkbox"] {
  margin-top: 4px;
}
.settings-workflow-page__toggle-text {
  font-size: 14px;
}
.settings-workflow-page__toggle-text strong {
  display: block;
  margin-bottom: 4px;
  color: #1f2937;
}
.settings-workflow-page__toggle-text span {
  color: #6b7280;
  font-size: 13px;
  line-height: 1.4;
}
.settings-workflow-page__threshold {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: var(--space-3, 12px);
  font-size: 14px;
}
.settings-workflow-page__threshold input[type="number"] {
  width: 80px;
  padding: 4px 8px;
  border: 1px solid #d1d5db;
  border-radius: 4px;
  text-align: center;
}
.settings-workflow-page__actions {
  display: flex;
  gap: 8px;
  margin-top: var(--space-4, 16px);
}
.settings-workflow-page__saved-pill {
  font-size: 12px;
  color: #155724;
  background: #d4edda;
  padding: 4px 10px;
  border-radius: 12px;
  margin-left: 12px;
  opacity: 0;
  transition: opacity 0.2s;
}
.settings-workflow-page__saved-pill.visible {
  opacity: 1;
}

/* ===== CHANGE-031c: ASSIGNMENT MODAL + ASSIGNMENT CONTEXT ===== */

.assignment-modal {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 9000;
  display: flex;
  align-items: center;
  justify-content: center;
}
.assignment-modal[hidden] { display: none; }
.assignment-modal .modal-shell {
  background: #ffffff;
  border-radius: 6px;
  width: 480px;
  max-width: 90vw;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
  overflow: hidden;
}
.assignment-modal .modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 24px;
  border-bottom: 1px solid #e8eaed;
}
.assignment-modal .modal-header h2 {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
}
.assignment-modal .modal-header .modal-close {
  background: none;
  border: none;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  color: #6b7280;
  padding: 0 4px;
}
.assignment-modal .modal-header .modal-close:hover { color: #1f2937; }
.assignment-modal .modal-body {
  padding: 16px 24px;
}
.assignment-modal .modal-body .form-group {
  margin-bottom: 16px;
}
.assignment-modal .modal-body .form-group:last-child { margin-bottom: 0; }
.assignment-modal .modal-body label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: #1f2937;
  margin-bottom: 4px;
}
.assignment-modal .modal-body .form-input,
.assignment-modal .modal-body .form-select {
  width: 100%;
  padding: 6px 10px;
  border: 1px solid #d1d5db;
  border-radius: 4px;
  font-size: 14px;
  box-sizing: border-box;
}
.assignment-modal .modal-body textarea.form-input {
  resize: vertical;
  font-family: inherit;
}
.assignment-modal .modal-body .form-hint {
  display: block;
  margin-top: 4px;
  font-size: 12px;
  color: #6b7280;
}
.assignment-modal .modal-footer {
  padding: 12px 24px;
  border-top: 1px solid #e8eaed;
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

/* Assignment context block — sits above the transition row when status is Assigned */
.assignment-context {
  background: #fef7e0;
  border: 1px solid #fcd34d;
  border-radius: 4px;
  padding: 8px 12px;
  font-size: 12px;
  margin: 8px 0;
  color: #4b5563;
}
.assignment-context strong {
  color: #92400e;
}

/* ===== CHANGE-031d: WARRANTY CLAIM LOCK UX ===== */

/* Tint the original (locked) line item rows in Warranty Claim mode so
 * they're visually distinct from claim-added items. Subtle so the table
 * still reads cleanly. */
.item-data-row.line-item-original > td {
  background: #f9f9fa;
}

/* Lock icon next to the item label on locked rows. The Unicode 🔒 (U+1F512)
 * inherits font-size from the cell; bumped up slightly for legibility at
 * the small label font weight. */
.col-label .lock-icon {
  display: inline-block;
  margin-right: 4px;
  font-size: 12px;
  vertical-align: middle;
  filter: grayscale(0.4);
}

/* Original badge — neutral gray treatment, indicates the item came from
 * the pre-archive lifecycle and is now read-only. */
.badge-original {
  display: inline-block;
  margin-left: 6px;
  padding: 2px 8px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  background: #e5e7eb;
  color: #4b5563;
  border-radius: 10px;
  vertical-align: middle;
}

/* Warranty badge — IQX action orange treatment for claim-added items. */
.badge-warranty {
  display: inline-block;
  margin-left: 6px;
  padding: 2px 8px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  background: #fde2c7;
  color: #92400e;
  border-radius: 10px;
  vertical-align: middle;
}

/* CHANGE-031e: cross-link banner on the lead inbox pointing salespeople
   to their assigned-quotes worktray (incoming.html → quotes.html?filter=assigned). */
.inbox-cross-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 16px;
  margin: 8px 0 16px;
  background: #f0f7ff;
  border: 1px solid #cfe1ff;
  border-radius: 6px;
}
.inbox-cross-link .cross-link-label {
  color: #1f3a4d;
  font-weight: 500;
}
.inbox-cross-link .cross-link-btn {
  display: inline-block;
  padding: 6px 12px;
  background: #1f3a4d;
  color: #fff;
  font-size: 13px;
  font-weight: 500;
  border-radius: 4px;
  text-decoration: none;
}
.inbox-cross-link .cross-link-btn:hover {
  background: #143560;
}

/* ===== CHANGE-101a: SETTINGS ADMIN PAGES (Catalog, Markets) =====
   Generic styling for the two new manufacturer-admin pages. Sections reuse
   .configurator-section as the frame; .settings-admin-page__* adds the
   collapsible header, row table, and modal scaffolding. */

.settings-admin-page {
  padding: var(--space-4) var(--space-5);
  max-width: 1100px;
}

.settings-admin-page__section {
  margin-bottom: var(--space-5);
}

.settings-admin-page__section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  user-select: none;
  padding-bottom: 6px;
  margin: 0 0 var(--space-3) 0;
  border-bottom: 1px solid var(--gray-200);
}

.settings-admin-page__section-header .configurator-section__title {
  margin: 0;
}

.settings-admin-page__caret {
  font-size: 14px;
  color: var(--gray-600);
  line-height: 1;
  padding-left: var(--space-2);
}

.settings-admin-page__section-body {
  padding-top: var(--space-2);
}

.settings-admin-page__table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--font-size-sm);
  margin-bottom: var(--space-3);
}

.settings-admin-page__table thead th {
  text-align: left;
  font-weight: 600;
  color: var(--gray-700);
  padding: 8px 10px;
  border-bottom: 1px solid var(--gray-200);
  background: var(--gray-50);
}

.settings-admin-page__table tbody td {
  padding: 8px 10px;
  border-bottom: 1px solid var(--gray-100);
  vertical-align: top;
}

.settings-admin-page__table tbody tr:last-child td {
  border-bottom: none;
}

.settings-admin-page__table code {
  background: #f3f4f6;
  padding: 1px 4px;
  border-radius: 3px;
  font-size: 12px;
}

.settings-admin-page__row-actions {
  text-align: right;
  white-space: nowrap;
}

.settings-admin-page__row-actions .btn {
  margin-left: 6px;
}

.settings-admin-page__add-btn {
  margin-top: var(--space-2);
}

.settings-admin-page__empty {
  text-align: center;
  color: var(--gray-500);
  font-style: italic;
  padding: var(--space-3) !important;
}

.settings-admin-page__placeholder {
  padding: var(--space-4);
  text-align: center;
  color: var(--gray-500);
  font-style: italic;
  background: var(--gray-50);
  border: 1px dashed var(--gray-300);
  border-radius: var(--radius-sm);
}

/* Settings admin modal */
.settings-admin-page__modal-overlay {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(15, 23, 42, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.settings-admin-page__modal {
  background: #fff;
  border-radius: var(--radius-md);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18);
  width: 520px;
  max-width: calc(100% - 32px);
  max-height: 90vh;
  overflow-y: auto;
}

.settings-admin-page__modal-header {
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--gray-200);
}

.settings-admin-page__modal-header h2 {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  color: var(--gray-900);
}

.settings-admin-page__modal-body {
  padding: var(--space-4) var(--space-5);
}

.settings-admin-page__modal-footer {
  padding: var(--space-3) var(--space-5);
  border-top: 1px solid var(--gray-200);
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  background: var(--gray-50);
  border-bottom-left-radius: var(--radius-md);
  border-bottom-right-radius: var(--radius-md);
}

.settings-admin-page__form-group {
  margin-bottom: var(--space-3);
}

.settings-admin-page__form-group label {
  display: block;
  font-weight: 500;
  color: var(--gray-700);
  font-size: var(--font-size-sm);
  margin-bottom: 4px;
}

.settings-admin-page__form-group input[type="text"],
.settings-admin-page__form-group select,
.settings-admin-page__form-group textarea {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--gray-300);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-sm);
  background: #fff;
}

.settings-admin-page__form-group textarea {
  resize: vertical;
  min-height: 64px;
}

.settings-admin-page__checkbox {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 400;
}

.settings-admin-page__required {
  color: var(--error, #dc2626);
}

.settings-admin-page__form-group .field-error {
  margin-top: 4px;
}

.settings-admin-page__form-group .form-hint {
  display: block;
  margin-top: 4px;
  color: var(--gray-500);
  font-size: 12px;
}

/* Inline Geographic Markets multi-select on mfr-dealers location cards */
.location-card__markets-control {
  padding: 8px 12px;
  border-top: 1px solid #e9ecef;
  background: #fafbfc;
  font-size: var(--font-size-sm);
}

.location-card__markets-control label {
  display: block;
  font-weight: 500;
  color: var(--gray-700);
  margin-bottom: 4px;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.location-card__markets-control select {
  width: 100%;
  padding: 6px 8px;
  border: 1px solid var(--gray-300);
  border-radius: var(--radius-sm);
  background: #fff;
  font-size: var(--font-size-sm);
  min-height: 90px;
}

.location-card__markets-control small {
  display: block;
  margin-top: 4px;
  color: var(--gray-500);
  font-size: 11px;
}

/* ===== CHANGE-101c: shared settings-admin-modal field types =====
   Styles for radio-group, dependency-list-builder, option-list-builder,
   inline label rows used inside the shared modal. The base modal styling
   (.settings-admin-page__modal*) was added in CHANGE-101a. */

.settings-admin-page__radio-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.settings-admin-page__radio-option {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  font-weight: 400;
  font-size: var(--font-size-sm);
  color: var(--gray-700);
}

.settings-admin-page__dep-list {
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-sm);
  padding: 8px;
  background: var(--gray-50);
}
.settings-admin-page__dep-list-empty {
  font-size: 12px;
  color: var(--gray-500);
  font-style: italic;
  padding: 4px 0;
}
.settings-admin-page__dep-list-row {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1.4fr auto;
  gap: 6px;
  align-items: end;
  padding: 6px;
  background: #fff;
  border: 1px solid var(--gray-200);
  border-radius: 3px;
  margin-bottom: 6px;
}
.settings-admin-page__dep-list-row:last-child { margin-bottom: 0; }
.settings-admin-page__dep-list-add { margin-top: 6px; }

.settings-admin-page__inline-label {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 11px;
  color: var(--gray-600);
}
.settings-admin-page__inline-label span { font-weight: 500; }
.settings-admin-page__inline-label input,
.settings-admin-page__inline-label select {
  font-size: 13px;
  padding: 4px 6px;
}

.settings-admin-page__option-list {
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-sm);
  padding: 8px;
  background: var(--gray-50);
}
.settings-admin-page__option-list-empty {
  font-size: 12px;
  color: var(--gray-500);
  font-style: italic;
  padding: 6px 0;
}
.settings-admin-page__option-list-row {
  background: #fff;
  border: 1px solid var(--gray-200);
  border-radius: 3px;
  padding: 8px;
  margin-bottom: 6px;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1.2fr 1fr auto;
  gap: 6px;
  align-items: end;
}
.settings-admin-page__option-list-row:last-child { margin-bottom: 0; }
.settings-admin-page__option-list-sub {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.settings-admin-page__option-list-sub label {
  font-size: 11px;
  font-weight: 500;
  color: var(--gray-600);
}
.settings-admin-page__option-list-sub input {
  font-size: 13px;
  padding: 4px 6px;
}
.settings-admin-page__option-list-controls {
  display: flex;
  gap: 2px;
  align-self: center;
}
.settings-admin-page__option-list-controls .btn {
  padding: 2px 6px;
  font-size: 11px;
}
.settings-admin-page__option-list-add { margin-top: 6px; }

.settings-admin-page__top-error {
  background: #fef2f2;
  border: 1px solid var(--error, #dc2626);
  border-radius: var(--radius-sm);
  padding: 8px 12px;
  color: var(--error, #dc2626);
}

/* ===== CHANGE-101d: QUOTE WIZARD STEP 2 "OUTER" RESHAPE ===== */

.step2-outer { margin-bottom: var(--space-5, 20px); }

.step2-outer__section {
  background: var(--gray-50, #f9fafb);
  border: 1px solid var(--gray-200, #e5e7eb);
  border-radius: var(--radius-md, 6px);
  padding: var(--space-4, 16px) var(--space-5, 20px);
  margin-bottom: var(--space-4, 16px);
}

.step2-outer__section--disabled {
  opacity: 0.65;
  background: var(--gray-100, #f3f4f6);
}

.step2-outer__title {
  margin: 0 0 var(--space-3, 12px) 0;
  font-size: 20px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--primary);
}

.step2-outer__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-3, 12px) var(--space-4, 16px);
}

.step2-outer__field { margin-bottom: 0; }

.step2-outer__gate-msg,
.step2-outer__notice {
  margin: var(--space-2, 8px) 0 0 0;
  font-size: var(--font-size-sm, 14px);
  color: var(--gray-600, #4b5563);
}
.step2-outer__notice {
  padding: 8px 12px;
  background: #fff8e6;
  border: 1px solid #f5d98a;
  border-radius: var(--radius-sm, 4px);
}

.step2-outer__radio-row {
  display: flex;
  align-items: center;
  gap: 18px;
  margin: var(--space-3, 12px) 0;
}
.step2-outer__radio-label { font-weight: 600; color: var(--gray-700, #374151); }
.step2-outer__radio-row label {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  cursor: pointer;
}

.step2-outer__preset-row { margin-bottom: var(--space-3, 12px); width: 100%; }
.step2-outer__preset-heading { margin-bottom: 1rem; }

.step2-outer__form-host { margin-top: var(--space-3, 12px); }

#step2OuterHost .iqx-form-form { max-width: none; }
#step2OuterHost .iqx-form-submit { display: none; }

.step2-outer__pricing {
  margin-top: var(--space-3, 12px);
  font-weight: 600;
  color: var(--primary, #1f3a4d);
  font-size: var(--font-size-sm, 14px);
}

.step2-outer__writein { margin-top: var(--space-3, 12px); }
.step2-outer__writein-title {
  margin: 0 0 var(--space-3, 12px) 0;
  font-size: var(--font-size-sm, 14px);
  font-weight: 600;
  color: var(--gray-700, #374151);
}

.step2-outer__actions {
  display: flex;
  align-items: center;
  gap: var(--space-3, 12px);
  margin-top: 2rem;
  margin-bottom: var(--space-3, 12px);
}
/* Step 2 OUTER action buttons — light-blue secondary (matches
   #showAllSelectionsBtn). global.css's .btn-secondary actually uses the
   dark-navy --mb-primary, so we override here with the higher-specificity
   .btn.step2-outer__action and the #outerClearBtn id-selector. */
/* CHANGE-261: action buttons (Add item / component Add) were washed-out light
   blue (--mb-secondary). Use the brand primary (matches #icAddLoc). */
.btn.step2-outer__action {
  background-color: var(--brand-primary, #1f3a4d);
  border-color: var(--brand-primary, #1f3a4d);
  color: #fff;
}
.btn.step2-outer__action:hover {
  background-color: var(--brand-primary-dark, #16293a);
  border-color: var(--brand-primary-dark, #16293a);
}
.step2-outer__action:disabled { opacity: 0.5; cursor: not-allowed; }
/* CHANGE-253 B.5: gray Clear button at full opacity (was light-blue @0.5). */
#outerClearBtn {
  background-color: var(--gray-500, #9E9E9E);
  border-color: var(--gray-500, #9E9E9E);
  color: #fff;
  opacity: 1;
}
#outerClearBtn:hover {
  background-color: var(--gray-600, #757575);
  border-color: var(--gray-600, #757575);
  opacity: 1;
}

/* CHANGE-253 B.1: Compare deferred to a future version — hidden, markup kept. */
#outerCompareBtn { display: none; }

.step2-outer__banner {
  margin-bottom: var(--space-4, 16px);
  padding: 10px 14px;
  background: #fef2f2;
  border: 1px solid #f5b5b5;
  border-radius: var(--radius-sm, 4px);
}
.step2-outer__banner-line {
  color: #a8182a;
  font-size: var(--font-size-sm, 14px);
  line-height: 1.5;
}

.step2-outer__modal-context {
  background: var(--gray-50, #f9fafb);
  border: 1px solid var(--gray-200, #e5e7eb);
  border-radius: var(--radius-sm, 4px);
  padding: 10px 12px;
  margin-bottom: var(--space-3, 12px);
  font-size: var(--font-size-sm, 14px);
  line-height: 1.6;
}
.step2-outer__modal-dims {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-3, 12px);
}

@media (max-width: 800px) {
  .step2-outer__grid { grid-template-columns: 1fr 1fr; }
  .step2-outer__modal-dims { grid-template-columns: 1fr; }
}

/* ===== CHANGE-101e: ITEM CONFIGURATOR MODAL ===== */

body.item-configurator-modal-open { overflow: hidden; }

.item-configurator-modal {
  position: fixed; inset: 0; z-index: 1000;
  display: flex; align-items: center; justify-content: center;
}
.item-configurator-modal__backdrop {
  position: absolute; inset: 0;
  background: rgba(15, 23, 42, 0.55);
}
.item-configurator-modal__dialog {
  position: relative;
  background: #fff;
  border-radius: var(--radius-md, 6px);
  width: 1040px; max-width: calc(100vw - 48px);
  max-height: calc(100vh - 48px);
  display: flex; flex-direction: column;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.28);
}

.item-configurator-modal__header {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--space-4, 16px) var(--space-5, 20px);
  border-bottom: 1px solid var(--gray-200, #e5e7eb);
}
.item-configurator-modal__header h2 { margin: 0; font-size: 17px; font-weight: 600; }
.item-configurator-modal__close {
  background: none; border: none; font-size: 24px; line-height: 1;
  cursor: pointer; color: var(--gray-500, #6b7280);
}

.item-configurator-modal__body {
  padding: var(--space-4, 16px) var(--space-5, 20px);
  overflow-y: auto; flex: 1;
}
.item-configurator-modal__section {
  border: 1px solid var(--gray-200, #e5e7eb);
  border-radius: var(--radius-md, 6px);
  margin-bottom: var(--space-4, 16px);
  padding: var(--space-3, 12px) var(--space-4, 16px);
}
.item-configurator-modal__section--tight { padding: 8px var(--space-4, 16px); }

.item-configurator-modal__sec-head {
  display: flex; align-items: center; gap: 8px; cursor: pointer; user-select: none;
}
.item-configurator-modal__sec-head h3 {
  margin: 0; font-size: 20px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.5px; color: var(--primary);
}
.item-configurator-modal__caret { font-size: 12px; color: var(--gray-600, #4b5563); }
.item-configurator-modal__sec-body { padding-top: var(--space-3, 12px); }
.item-configurator-modal__collapsed-summary {
  font-size: var(--font-size-sm, 14px); color: var(--gray-600, #4b5563);
}

.item-configurator-modal__count-row {
  display: flex; align-items: center; gap: 16px; margin-bottom: var(--space-3, 12px);
}
.item-configurator-modal__count-row input[type="number"] { width: 64px; }

.item-configurator-modal__loc-table {
  width: 100%; border-collapse: collapse; font-size: var(--font-size-sm, 14px);
}
.item-configurator-modal__loc-table th,
.item-configurator-modal__loc-table td {
  padding: 5px 8px; border-bottom: 1px solid var(--gray-100, #f3f4f6); text-align: left;
}
.item-configurator-modal__loc-table th {
  background: var(--gray-50, #f9fafb); font-weight: 600; color: var(--gray-700, #374151);
}
.item-configurator-modal__loc-table input[type="text"] { width: 100%; }
.item-configurator-modal__loc-table input[type="number"] { width: 64px; }
.item-configurator-modal__loc-table tr { cursor: pointer; }
.item-configurator-modal__loc-row--focus { background: #f0f7ff; }
.item-configurator-modal__loc-del {
  background: none; border: none; font-size: 18px; cursor: pointer;
  color: var(--error, #dc2626);
}
.item-configurator-modal__loc-del:disabled { opacity: 0.35; cursor: not-allowed; }
.item-configurator-modal__loc-errors { margin-top: 8px; }

.item-configurator-modal__preview-head {
  font-size: var(--font-size-sm, 14px); font-weight: 600; color: var(--gray-700, #374151);
}

.item-configurator-modal__preset-row { display: flex; align-items: center; gap: 12px; }
.item-configurator-modal__preset-row label { font-weight: 600; font-size: 13px; }

.item-configurator-modal__gate-msg {
  margin: 0; color: var(--gray-600, #4b5563); font-style: italic;
  font-size: var(--font-size-sm, 14px);
}

.item-configurator-modal__banner {
  padding: 10px 14px; margin-bottom: var(--space-3, 12px);
  background: #fef2f2; border: 1px solid #f5b5b5; border-radius: var(--radius-sm, 4px);
}
.item-configurator-modal__banner-line {
  color: #a8182a; font-size: var(--font-size-sm, 14px); line-height: 1.5;
}

.item-configurator-modal__split {
  display: grid; grid-template-columns: 1fr 340px; gap: var(--space-4, 16px);
  align-items: start;
}
.item-configurator-modal__form-pane { min-width: 0; }
.item-configurator-modal__svg-pane {
  background: var(--gray-50, #f9fafb); border: 1px solid var(--gray-200, #e5e7eb);
  border-radius: var(--radius-sm, 4px); padding: 12px;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; min-height: 380px;
}
.item-configurator-modal__svg-fallback { color: var(--gray-500, #6b7280); font-size: 13px; }
/* CHANGE-700: non-blocking "intent-honored" caption beneath the preview. */
.item-configurator-modal__svg-note {
  flex: 0 0 100%; margin-top: 8px; text-align: center;
  color: var(--gray-500, #6b7280); font-size: 12px; font-style: italic;
}

.item-configurator-modal__pricing {
  margin-top: var(--space-3, 12px); font-weight: 600;
  color: var(--primary, #1f3a4d); font-size: var(--font-size-sm, 14px);
}

.item-configurator-modal__legacy-notice {
  padding: 10px 14px; background: #fff8e6; border: 1px solid #f5d98a;
  border-radius: var(--radius-sm, 4px); font-size: var(--font-size-sm, 14px);
}
.item-configurator-modal__legacy-summary {
  margin: var(--space-3, 12px) 0; font-size: 13px; line-height: 1.7;
}
.item-configurator-modal__legacy-summary span { color: var(--gray-500, #6b7280); }

.item-configurator-modal__footer {
  display: flex; align-items: center; justify-content: flex-end; gap: 10px;
  padding: var(--space-3, 12px) var(--space-5, 20px);
  border-top: 1px solid var(--gray-200, #e5e7eb);
  background: var(--gray-50, #f9fafb);
}
.item-configurator-modal__footer-msg {
  margin-right: auto; font-size: 13px; color: var(--gray-600, #4b5563);
}
.item-configurator-modal__footer-msg--err { color: var(--error, #dc2626); }
.item-configurator-modal__footer .btn:disabled { opacity: 0.5; cursor: not-allowed; }

.item-configurator-modal__guard { padding: 32px; text-align: center; }
.item-configurator-modal__guard h3 { margin: 0 0 8px 0; }
.item-configurator-modal__guard p { color: var(--gray-600, #4b5563); margin-bottom: 16px; }

/* ===== CHANGE-263: ITEM CONFIGURATOR REDESIGN ===== */

/* Notes: blue Location-definition + amber Config-Options disclosure. */
.item-configurator-modal__def-note {
  padding: 10px 14px; margin-bottom: var(--space-3, 12px);
  background: #eaf2f8; border: 1px solid #bcd6f5;
  border-radius: var(--radius-sm, 4px); font-size: 13px; line-height: 1.55;
  color: var(--gray-700, #374151);
}
.item-configurator-modal__disclosure {
  padding: 10px 14px; margin-bottom: var(--space-3, 12px);
  background: #fff8e6; border: 1px solid #f5d98a;
  border-radius: var(--radius-sm, 4px); font-size: 13px; line-height: 1.55;
  color: #6b5a14;
}

/* Toolbar: helper text + Table|Cards row-style toggle. */
.item-configurator-modal__loc-toolbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-bottom: var(--space-3, 12px);
}
.item-configurator-modal__loc-help { font-size: 13px; color: var(--gray-600, #4b5563); }
.item-configurator-modal__rowstyle { display: inline-flex; border: 1px solid var(--gray-300, #d1d5db); border-radius: var(--radius-sm, 4px); overflow: hidden; }
.item-configurator-modal__rowstyle-btn {
  background: #fff; border: none; padding: 5px 14px; cursor: pointer;
  font-size: 13px; color: var(--gray-600, #4b5563);
}
.item-configurator-modal__rowstyle-btn + .item-configurator-modal__rowstyle-btn { border-left: 1px solid var(--gray-300, #d1d5db); }
.item-configurator-modal__rowstyle-btn.is-active {
  background: var(--brand-primary, #1f3a4d); color: #fff; font-weight: 600;
}

/* Drag column + handle + drop indicators (reuse the line-items convention). */
.item-configurator-modal__col-drag { width: 24px; text-align: center; padding-left: 4px !important; padding-right: 0 !important; }
.item-configurator-modal .item-drag-handle { display: inline-block; cursor: grab; color: var(--gray-400, #9ca3af); letter-spacing: -2px; }
.item-configurator-modal .item-drag-handle:active { cursor: grabbing; }
.item-configurator-modal__loc-table tr.is-dragging,
.item-configurator-modal__loc-card.is-dragging { opacity: 0.5; }
.item-configurator-modal__loc-table tr.drop-above { box-shadow: inset 0 2px 0 0 var(--brand-primary, #1f3a4d); }
.item-configurator-modal__loc-table tr.drop-below { box-shadow: inset 0 -2px 0 0 var(--brand-primary, #1f3a4d); }
.item-configurator-modal__loc-card.drop-above { box-shadow: inset 0 3px 0 0 var(--brand-primary, #1f3a4d); }
.item-configurator-modal__loc-card.drop-below { box-shadow: inset 0 -3px 0 0 var(--brand-primary, #1f3a4d); }
.item-configurator-modal__loc-num { color: var(--gray-500, #6b7280); }

/* Dimension widget: whole input + eighth-fraction select + range hint. */
.item-configurator-modal__dim { display: inline-block; }
.item-configurator-modal__dim-inputs { display: flex; align-items: center; gap: 4px; }
.item-configurator-modal__loc-table .item-configurator-modal__dim-whole { width: 56px; }
.item-configurator-modal__dim-whole { width: 56px; }
.item-configurator-modal__dim-frac { width: 60px; }
.item-configurator-modal__dim-unit { font-size: 11px; color: var(--gray-500, #6b7280); }
.item-configurator-modal__dim-hint { font-size: 11px; color: var(--gray-500, #6b7280); margin-top: 2px; white-space: nowrap; }
.item-configurator-modal__dim-hint--ok { color: #1a7d3c; }
.item-configurator-modal__dim-hint--bad { color: var(--error, #c1121f); font-weight: 600; }
.item-configurator-modal .inp--err { border-color: var(--error, #c1121f) !important; background: #fdecec; }
.item-configurator-modal__qty { width: 56px; }

/* CHANGE-285: size the location-table row controls to match the Configuration
   Options preset dropdowns (.iqx-form-input) so the modal reads consistently.
   Column widths are preserved above; only padding/border/radius/font normalize. */
#icLocBody input[type="text"],
#icLocBody input[type="number"],
#icLocBody select {
  box-sizing: border-box;
  padding: 0.6rem 0.75rem;
  border: 1px solid var(--border-color, #d1d5db);
  border-radius: var(--radius-md, 8px);
  font-family: inherit;
  font-size: 0.78rem;
  background: #fff;
  color: var(--gray-900, #111827);
}

/* + Add Location. */
.item-configurator-modal__addloc-row { margin-top: 10px; }

/* Cards layout + side preview. */
.item-configurator-modal__cards-layout { display: grid; grid-template-columns: 1fr 300px; gap: var(--space-4, 16px); align-items: start; }
.item-configurator-modal__cards { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.item-configurator-modal__loc-card { border: 1px solid var(--gray-200, #e5e7eb); border-radius: var(--radius-md, 6px); padding: 10px 12px; background: #fff; }
.item-configurator-modal__loc-card--focus { border-color: var(--brand-primary, #1f3a4d); background: #f0f7ff; }
.item-configurator-modal__loc-card-head { display: flex; align-items: center; gap: 8px; }
.item-configurator-modal__loc-card-badge {
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; border-radius: 50%; font-size: 11px; font-weight: 700;
  background: var(--brand-primary, #1f3a4d); color: #fff;
}
.item-configurator-modal__loc-card-title { font-weight: 600; font-size: 13px; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.item-configurator-modal__loc-card-grid { display: grid; grid-template-columns: 1fr auto; gap: 8px 12px; margin-top: 8px; }
.item-configurator-modal__loc-card-grid .item-configurator-modal__field:nth-child(3),
.item-configurator-modal__loc-card-grid .item-configurator-modal__field:nth-child(4) { grid-column: span 1; }
.item-configurator-modal__field { display: flex; flex-direction: column; gap: 3px; }
.item-configurator-modal__field-label { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; color: var(--gray-500, #6b7280); }
.item-configurator-modal__field input[type="text"] { width: 100%; }

/* Live preview (strip below for Table; aside for Cards). */
.item-configurator-modal__preview {
  border: 1px solid var(--gray-200, #e5e7eb); border-radius: var(--radius-md, 6px);
  background: var(--gray-50, #f9fafb); padding: 12px; text-align: center;
}
.item-configurator-modal__preview--strip {
  display: grid; grid-template-columns: 1fr; gap: 6px; margin-top: var(--space-3, 12px); text-align: center;
}
.item-configurator-modal__preview-label { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--gray-500, #6b7280); }
.item-configurator-modal__preview-name { font-weight: 600; font-size: 13px; color: var(--gray-800, #1f2937); }
.item-configurator-modal__preview-dims { font-size: 13px; color: var(--gray-600, #4b5563); }
.item-configurator-modal__preview .item-configurator-modal__svg-pane { background: #fff; min-height: 300px; margin-top: 8px; }
.item-configurator-modal__preview--strip .item-configurator-modal__svg-pane { min-height: 200px; }
.item-configurator-modal__pager { display: flex; gap: 6px; justify-content: center; margin-top: 8px; }
.item-configurator-modal__pager-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--gray-300, #d1d5db); cursor: pointer; }
.item-configurator-modal__pager-dot.is-on { background: var(--brand-primary, #1f3a4d); }

/* ===== CHANGE-101f: ITEM CONFIG PRESETS ===== */

.item-config-presets__row {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: var(--space-3, 12px);
}
.item-config-presets__select { width: 30em; max-width: 100%; }
.item-config-presets__applied {
  display: inline-flex; align-items: center; gap: 8px;
  background: #f0f7ff; border: 1px solid #bcd6f5;
  border-radius: var(--radius-sm, 4px); padding: 4px 10px;
  font-size: var(--font-size-sm, 14px); font-weight: 600;
  color: var(--primary, #1f3a4d);
}
.item-config-presets__clear {
  background: none; border: none; cursor: pointer;
  color: var(--gray-500, #6b7280); font-size: 12px;
}
.item-config-presets__clear:hover { color: var(--error, #dc2626); }

.item-config-presets__diff {
  border: 1px solid var(--gray-200, #e5e7eb);
  border-radius: var(--radius-md, 6px);
  margin-bottom: var(--space-3, 12px);
  overflow: hidden;
}
.item-config-presets__diff-head {
  display: flex; align-items: baseline; gap: 12px;
  padding: 8px 12px; background: var(--gray-50, #f9fafb);
  border-bottom: 1px solid var(--gray-200, #e5e7eb);
}
.item-config-presets__diff-head span { color: var(--gray-500, #6b7280); font-size: 12px; }
.item-config-presets__diff-flags {
  padding: 8px 12px; background: #fff8e6;
  border-bottom: 1px solid #f5d98a;
}
.item-config-presets__diff-flags div {
  color: #8a6d1a; font-size: 13px; line-height: 1.5;
}
.item-config-presets__diff-rows { padding: 8px 12px; }
.item-config-presets__diff-rows table { width: 100%; border-collapse: collapse; font-size: 13px; }
.item-config-presets__diff-rows th {
  text-align: left; color: var(--gray-500, #6b7280);
  font-weight: 600; padding: 3px 6px;
}
.item-config-presets__diff-rows td { padding: 3px 6px; border-top: 1px solid var(--gray-100, #f3f4f6); }
.item-config-presets__diff-empty { color: var(--gray-500, #6b7280); font-style: italic; }
.item-config-presets__diff-foot {
  margin-top: 6px; color: var(--gray-500, #6b7280); font-size: 12px;
}
.item-config-presets__diff-actions {
  display: flex; justify-content: flex-end; gap: 8px;
  padding: 8px 12px; background: var(--gray-50, #f9fafb);
  border-top: 1px solid var(--gray-200, #e5e7eb);
}

.item-config-presets__filters {
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
  margin: 0 0 var(--space-3, 12px) 0;
  padding: 10px 12px; background: var(--gray-50, #f9fafb);
  border: 1px solid var(--gray-200, #e5e7eb); border-radius: var(--radius-md, 6px);
  font-size: var(--font-size-sm, 14px);
}
.item-config-presets__filters label { display: inline-flex; align-items: center; gap: 6px; }
.item-config-presets__active-only { font-weight: 500; }

.item-config-presets__status { font-weight: 600; font-size: 13px; }
.item-config-presets__status--valid { color: #1a7d3c; }
.item-config-presets__status--flagged { color: #a8182a; }
.item-config-presets__status--dormant { color: #8a6d1a; }

/* ===== CHANGE-101g: APPLY GLOBAL CHANGES MODAL ===== */
.agc-modal .modal {
  max-width: 620px;
  width: 100%;
  display: flex;
  flex-direction: column;
  max-height: 88vh;
}
.agc-modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.agc-modal__x {
  background: none;
  border: none;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  color: var(--gray-500, #6b7280);
  padding: 0 4px;
}
.agc-modal__x:hover { color: var(--gray-800, #1f2937); }

.agc-modal__selection-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 20px;
  border-bottom: 1px solid var(--gray-200, #e5e7eb);
  background: var(--gray-50, #f9fafb);
}
.agc-modal__count { font-weight: 600; font-size: 14px; }
.agc-modal__modify { padding: 0; font-size: 13px; }

.agc-modal__violations-banner {
  margin: 12px 20px 0;
  padding: 10px 12px;
  border: 1px solid #e3b9bf;
  background: #fcf0f1;
  border-radius: 6px;
  font-size: 13px;
}
.agc-modal__banner-head { font-weight: 600; color: #a8182a; margin-bottom: 4px; }
.agc-modal__violation-row { color: #7a1420; padding: 1px 0; }
.agc-modal__violation-row--notice { color: #8a6d1a; }

.agc-modal__body { overflow-y: auto; padding: 16px 20px; }
.agc-modal__form-host {
  border: 1px solid var(--gray-200, #e5e7eb);
  border-radius: var(--radius-md, 6px);
  padding: var(--space-3, 12px) var(--space-4, 16px);
  background: #fff;
}

/* AGC fields render with a leading apply-checkbox; lay out the row as a
   24px gutter + content column so the checkbox sits next to the label
   rather than floating above the field. */
.agc-modal__form-host .iqx-form-field {
  display: grid;
  grid-template-columns: 24px 1fr;
  column-gap: 10px;
  align-items: start;
}
.agc-modal__form-host .iqx-form-field > *:not(.agc-modal__apply-checkbox) {
  grid-column: 2;
}

.agc-modal__apply-checkbox {
  grid-column: 1;
  grid-row: 1;
  margin: 6px 0 0 0;
  cursor: pointer;
  transform: none;
}
.agc-modal__field-row--apply-disabled {
  opacity: 0.55;
}
.agc-modal__field-row--apply-disabled .iqx-form-field-label { cursor: default; }

.agc-modal__footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

/* ===== CHANGE-101h: QUICK EDIT INLINE PANEL ===== */
.quick-edit-panel-row > td {
  padding: 0;
  background: #f4f6f8;
  border-left: 3px solid var(--accent, #2563eb);
}
.quick-edit-panel {
  padding: 14px 18px;
}
.quick-edit-panel__violations-banner {
  margin-bottom: 12px;
  padding: 10px 12px;
  border: 1px solid #e3b9bf;
  background: #fcf0f1;
  border-radius: 6px;
  font-size: 13px;
}
.quick-edit-panel__banner-head { font-weight: 600; color: #a8182a; margin-bottom: 4px; }
.quick-edit-panel__violation-row { color: #7a1420; padding: 1px 0; }
.quick-edit-panel__violation-row--notice { color: #8a6d1a; }

.quick-edit-panel__form-host { /* renderer mounts here */ }

.quick-edit-panel__footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--gray-200, #e5e7eb);
}

/* Quick Edit modal — body-appended overlay. Mirrors .item-editor-modal shape
   but narrower. The inner .quick-edit-panel rules above still style content. */
.quick-edit-modal {
  position: fixed;
  inset: 0;
  z-index: 1100;
  display: none;
  align-items: center;
  justify-content: center;
}
.quick-edit-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(17, 24, 39, 0.5);
}
.quick-edit-modal__dialog {
  position: relative;
  background: #fff;
  border-radius: var(--radius-md, 6px);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.25);
  width: min(720px, 96vw);
  max-height: 90vh;
  overflow-y: auto;
  padding: var(--space-5, 20px) var(--space-6, 24px) var(--space-4, 16px);
}
.quick-edit-modal__close {
  position: absolute;
  top: 8px;
  right: 10px;
  background: transparent;
  border: none;
  font-size: 26px;
  line-height: 1;
  color: #6b7280;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 4px;
}
.quick-edit-modal__close:hover { background: #f3f4f6; color: #111827; }
.quick-edit-modal__title {
  margin: 0 0 var(--space-3, 12px) 0;
  font-size: var(--font-size-lg, 16px);
  font-weight: 600;
  color: var(--mb-primary);
}

/* ===== CHANGE-101i — Components SKU Picker + Admin ===== */
.component-sku-picker { font-size: 13px; }
.component-sku-picker__head { font-weight: 600; margin-bottom: 8px; }
.component-sku-picker__search {
  width: 100%;
  padding: 7px 10px;
  border: 1px solid var(--gray-300, #cbd5e1);
  border-radius: 6px;
  margin-bottom: 10px;
}
.component-sku-picker__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
@media (max-width: 720px) {
  .component-sku-picker__grid { grid-template-columns: 1fr; }
}
.component-sku-picker__tile {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  text-align: left;
  padding: 8px;
  border: 2px solid var(--gray-200, #e5e7eb);
  border-radius: 8px;
  background: #fff;
  cursor: pointer;
}
.component-sku-picker__tile:hover { border-color: var(--gray-400, #9ca3af); }
.component-sku-picker__tile--selected {
  border-color: var(--accent, #2563eb);
  background: #eef4ff;
}
.component-sku-picker__thumbnail,
.component-sku-picker__thumbnail-fallback {
  width: 100%;
  height: 80px;
  object-fit: cover;
  border-radius: 4px;
  margin-bottom: 6px;
}
.component-sku-picker__thumbnail-fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f1f3f5;
  color: #9ca3af;
  font-size: 28px;
}
.component-sku-picker__tile-sku { font-weight: 600; font-size: 12px; }
.component-sku-picker__tile-name { color: var(--gray-700, #374151); font-size: 12px; }
.component-sku-picker__tile-price { font-weight: 600; margin-top: 2px; }
.component-sku-picker__tile-lead { color: var(--gray-500, #6b7280); font-size: 11px; }
.component-sku-picker__empty { color: var(--gray-500, #6b7280); padding: 12px 0; }
.component-sku-picker__footer {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--gray-200, #e5e7eb);
}
.component-sku-picker__selected-line { margin-bottom: 8px; }
.component-sku-picker__qty-row {
  display: flex;
  align-items: center;
  gap: 18px;
}
.component-sku-picker__qty-input {
  width: 64px;
  padding: 4px 6px;
  border: 1px solid var(--gray-300, #cbd5e1);
  border-radius: 4px;
}
.component-sku-picker__subtotal { font-weight: 600; }

.components-admin__filter-bar { margin-bottom: 10px; }
.components-admin__filter-bar select {
  padding: 4px 8px;
  border: 1px solid var(--gray-300, #cbd5e1);
  border-radius: 4px;
}

/* ===== CHANGE-101k — Pricing Rollup + Override UI ===== */
.live-pricing-preview__base { color: var(--gray-700, #374151); }
.live-pricing-preview__delta { color: var(--gray-700, #374151); }
.live-pricing-preview__total { font-weight: 700; color: var(--gray-900, #111827); }
.live-pricing-preview--no-base { color: #8a6d1a; font-style: italic; }

.override-dialog__box { max-width: 440px; }
.override-dialog__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.override-dialog__x {
  background: none; border: none; font-size: 22px; line-height: 1;
  cursor: pointer; color: var(--gray-500, #6b7280); padding: 0 4px;
}
.override-dialog__body { padding: 16px 20px; }
.override-dialog__price-row { padding: 3px 0; font-size: 14px; }
.override-dialog__footer { display: flex; justify-content: flex-end; gap: 10px; }
.override-dialog__clear-btn { margin-right: auto; }
.items-grid__price-override-badge {
  display: inline-block;
  margin-left: 4px;
  padding: 0 5px;
  border-radius: 3px;
  background: #fef3c7;
  color: #5b4708;
  font-size: 10px;
  font-weight: 600;
}

/* ===== SUBSCRIPTION LIFECYCLE (CHANGE-044) ===== */
.iqx-grace-banner {
  background: #fff3cd; color: #7a5b00; border-bottom: 1px solid #ffe08a;
  padding: 8px 16px; font-size: 13px; display: flex; align-items: center;
  justify-content: center; gap: 10px; text-align: center;
}
.iqx-grace-banner .btn { background: #7a5b00; color: #fff; border: none; }
.iqx-guarded { opacity: 0.5 !important; cursor: not-allowed !important; pointer-events: auto; filter: grayscale(0.4); }

/* ============================================================================
   CHANGE-270A — STEP 4 REQUIREMENTS (Surface A). Folded from the design
   hand-off proto.css (Surface-A subset only; 270B/prototype-only blocks omitted).
   ========================================================================== */

/* collection bar (replaces the old "Preset" select header) */
.req-collection-bar { display: flex; align-items: flex-end; gap: 12px; margin-bottom: var(--space-3, 12px); }
.req-collection-bar .form-group { margin-bottom: 0; }
.req-collection-select { width: 340px; }
.req-collection-bar .btn { flex-shrink: 0; margin-left: auto; }
.req-collection-meta { font-size: 12px; color: var(--gray-500); margin-left: auto; align-self: center; text-align: right; line-height: 1.4; }
.req-collection-meta strong { color: var(--gray-700); font-weight: 600; }

/* CHANGE-286: applied-Collection chips (additive, removable as a group). */
.req-collection-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: var(--space-4); }
.req-collection-chips:empty { display: none; }
.req-collection-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 6px 4px 12px; border-radius: 999px;
  background: var(--mb-secondary-light, #eaf2f8);
  border: 1px solid var(--mb-secondary, #98c1d9);
  color: var(--brand-primary, #1f3a4d); font-size: 12px; font-weight: 600;
}
.req-collection-chip__name { line-height: 1.2; }
.req-collection-chip__x {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; border: none; border-radius: 50%;
  background: transparent; color: var(--brand-primary, #1f3a4d);
  font-size: 16px; line-height: 1; cursor: pointer; padding: 0;
}
.req-collection-chip__x:hover { background: var(--mb-secondary, #98c1d9); color: #fff; }

/* requirement row controls */
.req-controls { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.terms-due-btn {
  display: inline-flex; align-items: center; gap: 5px;
  padding: var(--space-1) var(--space-2); border: 1px solid var(--gray-200);
  border-radius: var(--radius-sm); background: transparent; color: var(--gray-400);
  font-size: var(--font-size-xs); cursor: pointer; white-space: nowrap;
  transition: color 150ms ease, border-color 150ms ease; flex-shrink: 0; font-family: var(--font-family);
}
.terms-due-btn:hover { color: var(--mb-primary); border-color: var(--mb-primary); }
.terms-due-btn--set { color: var(--mb-primary); border-color: var(--mb-secondary); background: var(--mb-secondary-light); font-weight: 600; }
.terms-due-btn .glyph { font-size: 12px; line-height: 1; }

.terms-del-btn {
  display: inline-flex; align-items: center; gap: 5px;
  padding: var(--space-1) var(--space-2); border: 1px solid var(--gray-200);
  border-radius: var(--radius-sm); background: transparent; color: var(--gray-400);
  font-size: var(--font-size-xs); cursor: pointer; white-space: nowrap;
  transition: color 150ms ease, border-color 150ms ease, background 150ms ease;
  flex-shrink: 0; font-family: var(--font-family);
}
.terms-del-btn:hover { color: var(--mb-alert); border-color: var(--mb-alert); background: var(--mb-alert-light); }
.terms-del-btn .glyph { font-size: 11px; line-height: 1; }

/* editable label on every row */
.terms-label-input {
  flex: 1; border: 1px solid transparent; border-radius: var(--radius-sm);
  padding: var(--space-1) var(--space-2); font-size: var(--font-size-sm);
  font-family: var(--font-family); background: transparent; color: var(--gray-900);
  transition: border-color 160ms ease, background 160ms ease; line-height: 1.4;
}
.terms-label-input:hover { border-color: var(--gray-200); }
.terms-label-input:focus { outline: none; border-color: var(--mb-primary); background: #fff; }

/* row wrapper + note preview */
.req-row-wrap { display: flex; flex-direction: column; gap: 2px; padding: var(--space-2) var(--space-4); border-bottom: 1px solid var(--gray-100); transition: background-color 150ms ease; }
.req-row-wrap:last-child { border-bottom: none; }
.req-row-wrap:hover { background: var(--gray-50); }
.req-row-top { display: flex; align-items: center; gap: var(--space-3); }
.req-note-preview { margin-left: 34px; font-size: 12px; color: var(--gray-500); font-style: italic; display: flex; gap: 6px; align-items: baseline; }
.req-note-preview .pen { font-style: normal; }

/* list card + separator + count + empty */
.req-list-card { border: 1px solid var(--gray-200); border-radius: var(--radius-md); overflow: hidden; }
.req-sep { display: flex; align-items: center; gap: var(--space-3); padding: 6px var(--space-4); font-size: 11px; color: var(--gray-500); text-transform: uppercase; letter-spacing: .5px; font-weight: 700; background: var(--gray-50); border-bottom: 1px solid var(--gray-100); }
.wizard-section-title .req-count { font-size: 12px; color: var(--gray-400); font-weight: 500; margin-left: 8px; }
.empty-hint { padding: 16px; text-align: center; color: var(--gray-500); font-size: 13px; }

/* per-section scope control */
.section-scope { display: flex; align-items: center; gap: 8px; }
.section-scope .lbl { font-size: 11px; color: var(--gray-500); text-transform: uppercase; letter-spacing: .5px; font-weight: 700; }
.section-scope .form-select { width: 150px; font-size: 12px; padding: 5px 8px; }

/* due-date modal body */
.due-mode-options { display: flex; flex-direction: column; gap: 10px; margin: 4px 0 8px; }
.due-mode-option { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--gray-200); border-radius: var(--radius-md); cursor: pointer; transition: border-color 150ms ease, background 150ms ease; }
.due-mode-option:hover { border-color: var(--mb-secondary); }
.due-mode-option.is-active { border-color: var(--mb-primary); background: var(--brand-primary-light); }
.due-mode-option input[type="radio"] { accent-color: var(--mb-primary); width: 18px; height: 18px; }
.due-mode-option .dmo-body { flex: 1; }
.due-mode-option .dmo-title { font-size: 13px; font-weight: 600; color: var(--gray-800); }
.due-mode-option .dmo-row { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.due-mode-option .dmo-row .form-input { width: 90px; }
.due-mode-option .dmo-row .form-input[type="date"] { width: 170px; }
.due-resolved { margin-top: 6px; font-size: 12px; color: var(--mb-primary); }
.field-note { font-size: 12px; color: var(--gray-500); margin-top: 4px; }
.modal-section-label { font-size: 11px; text-transform: uppercase; letter-spacing: .6px; font-weight: 700; color: var(--gray-500); margin: 18px 0 8px; }

/* ============================================================================
   CHANGE-270B — SURFACE B: Preset Manager Requirements authoring + sharing.
   Folded from the design hand-off proto.css (Surface-B subset).
   ========================================================================== */

/* audience segment filter */
.preset-sticky { position: sticky; z-index: 5; background: var(--gray-50); padding-top: 2px; }
.audience-seg { display: inline-flex; gap: 0; border: 1px solid var(--gray-300); border-radius: var(--radius-md); overflow: hidden; }
.audience-seg button { border: 0; background: #fff; font: inherit; font-size: 13px; font-weight: 600; color: var(--gray-600); padding: 7px 16px; cursor: pointer; border-right: 1px solid var(--gray-200); }
.audience-seg button:last-child { border-right: 0; }
.audience-seg button.is-active { background: var(--mb-primary); color: #fff; }
.audience-seg button .count { opacity: .65; font-weight: 500; margin-left: 6px; }

/* collection badges */
.col-badge { display: inline-block; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; padding: 2px 8px; border-radius: var(--radius-full); }
.col-badge--default { background: #e6f3ec; color: var(--status-ordered, #245f3c); border: 1px solid #b6dcc4; }
.col-badge--shared { background: var(--brand-primary-light); color: var(--mb-primary); border: 1px solid rgba(31, 58, 77,.25); }
.col-badge--mine { background: var(--mb-action-light); color: var(--mb-action-hover, #d9532f); border: 1px solid rgba(238,108,77,.3); }
.col-badge--readonly { background: var(--gray-100); color: var(--gray-500); border: 1px solid var(--gray-300); }

/* row actions */
.data-table td .row-actions { display: flex; gap: 4px; flex-wrap: wrap; }
.data-table td .row-actions .btn-sm { padding: 3px 9px; font-size: 12px; }
.data-table tr.is-readonly td:first-child { color: var(--gray-500); }

/* collection editor: requirement item rows */
.editor-items { border: 1px solid var(--gray-200); border-radius: var(--radius-md); overflow: hidden; margin-top: 6px; }
.editor-item { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-bottom: 1px solid var(--gray-100); }
.editor-item:last-child { border-bottom: none; }
.editor-item input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--mb-primary); flex-shrink: 0; }
.editor-item .ei-label { flex: 1; border: 1px solid var(--gray-200); border-radius: var(--radius-sm); padding: 6px 9px; font: inherit; font-size: 13px; }
.editor-item .ei-label:focus { outline: none; border-color: var(--mb-primary); }
.editor-item .ei-due { display: flex; align-items: center; gap: 5px; flex-shrink: 0; }
.editor-item .ei-due .form-input { width: 58px; padding: 5px 6px; text-align: center; }
.editor-item .ei-due .lbl { font-size: 11px; color: var(--gray-500); white-space: nowrap; }
.editor-item .ei-remove { border: 0; background: transparent; color: var(--gray-400); cursor: pointer; font-size: 16px; width: 26px; height: 26px; border-radius: var(--radius-sm); }
.editor-item .ei-remove:hover { color: var(--mb-alert); background: var(--mb-alert-light); }
.editor-add { padding: 9px 12px; }

.set-default-row { display: flex; align-items: center; gap: 10px; margin-top: 16px; padding: 12px; border: 1px solid var(--gray-200); border-radius: var(--radius-md); background: var(--gray-50); }
.set-default-row input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--mb-primary); }
.set-default-row .sd-text { font-size: 13px; color: var(--gray-700); }
.set-default-row .sd-text small { display: block; color: var(--gray-500); font-size: 11.5px; }
.editor-modal .modal { max-width: 680px; }
.field-readonly-pill { display: inline-block; font-size: 11px; color: var(--gray-500); background: var(--gray-100); border: 1px solid var(--gray-300); padding: 2px 8px; border-radius: var(--radius-full); margin-left: 8px; }

/* sharing roster */
.share-roster { border: 1px solid var(--gray-200); border-radius: var(--radius-md); overflow: hidden; }
.share-roster__group { border-bottom: 1px solid var(--gray-100); }
.share-roster__group:last-child { border-bottom: none; }
.share-roster__head { display: flex; align-items: center; justify-content: space-between; padding: 9px 12px; background: var(--gray-50); }
.share-roster__head .ttl { font-size: 12px; font-weight: 700; color: var(--gray-700); text-transform: uppercase; letter-spacing: .5px; }
.share-chip-row { display: flex; flex-wrap: wrap; gap: 8px; padding: 10px 12px; }
.share-chip { display: inline-flex; align-items: center; gap: 7px; padding: 5px 11px; border-radius: var(--radius-full); border: 1px solid var(--gray-300); background: #fff; font-size: 12.5px; color: var(--gray-700); cursor: pointer; transition: all 140ms ease; user-select: none; }
.share-chip:hover { border-color: var(--mb-secondary); }
.share-chip.is-on { border-color: var(--mb-primary); background: var(--brand-primary-light); color: var(--mb-primary); font-weight: 600; }
.share-chip .tick { width: 14px; height: 14px; border-radius: 50%; border: 1.5px solid var(--gray-400); display: inline-flex; align-items: center; justify-content: center; font-size: 9px; }
.share-chip.is-on .tick { background: var(--mb-primary); border-color: var(--mb-primary); color: #fff; }
.share-chip--all { font-weight: 700; }
.share-self { padding: 12px; font-size: 13px; color: var(--gray-600); display: flex; align-items: center; gap: 8px; }
.share-self .lock { color: var(--gray-400); }

/* ============================================================================
   CHANGE-280 — STEP 6 PRESENTATION REDESIGN + eSignature. Folded from the
   design hand-off (step6-* / esig-* / share-link). Reuses existing tokens.
   ========================================================================== */

/* numbered section header + subtitle */
.step6-sec-head { margin-bottom: var(--space-5); }
.step6-sec-head .wizard-section-title { display: flex; align-items: center; gap: var(--space-2); margin-bottom: 4px; padding-bottom: 0; border-bottom: none; }
.step6-sec-num { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; flex-shrink: 0; border-radius: var(--radius-full); background: var(--mb-primary); color: #fff; font-size: 13px; font-weight: 700; }
.step6-sec-sub { margin: 0; padding-left: calc(26px + var(--space-2)); font-size: var(--font-size-sm); color: var(--gray-500); }

/* §1 Generate input-group (button attached left of File name) */
.step6-input-group { display: flex; align-items: stretch; max-width: 760px; }
.step6-input-group .form-input { border-top-left-radius: 0; border-bottom-left-radius: 0; border-left: none; }
.step6-attach-btn { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; cursor: pointer; background: var(--mb-secondary); color: #fff; font-weight: 600; font-size: var(--font-size-sm); border: 1px solid var(--mb-secondary); border-radius: var(--radius-sm) 0 0 var(--radius-sm); padding: 0 16px; transition: background .15s ease, border-color .15s ease; }
.step6-attach-btn:hover { background: #86b3cd; border-color: #86b3cd; }
.step6-attach-ico { width: 20px; height: 20px; border-radius: 50%; background: rgba(255,255,255,.35); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; }
.step6-display-options { display: flex; gap: var(--space-5); flex-wrap: wrap; }

/* §2 eSignature */
.esig-toggle { display: flex; align-items: flex-start; gap: var(--space-3); padding: var(--space-4) var(--space-5); border: 1px solid var(--gray-300); border-radius: var(--radius-md); background: #fff; cursor: pointer; transition: border-color .15s ease, background .15s ease; }
.esig-toggle:hover { border-color: var(--mb-secondary); }
.esig-toggle.is-on { border-color: var(--mb-primary); background: var(--mb-primary-light); }
.esig-toggle input[type="checkbox"] { width: 20px; height: 20px; margin-top: 1px; accent-color: var(--mb-primary); cursor: pointer; flex-shrink: 0; }
.esig-toggle__text strong { display: block; font-size: var(--font-size-base); color: var(--mb-black); font-weight: 600; }
.esig-toggle__text span { display: block; font-size: var(--font-size-sm); color: var(--gray-600); margin-top: 2px; }
.esig-panel { overflow: hidden; max-height: 0; opacity: 0; transition: max-height .35s ease, opacity .25s ease, margin .35s ease; }
.esig-panel.is-open { max-height: 640px; opacity: 1; margin-top: var(--space-4); }
.esig-card { border: 1px solid var(--mb-secondary); background: var(--mb-secondary-light); border-radius: var(--radius-md); padding: var(--space-5) var(--space-6); }
.esig-legend { display: flex; align-items: center; gap: var(--space-2); font-size: var(--font-size-base); font-weight: 600; color: var(--mb-primary); margin: 0 0 var(--space-1); }
.esig-legend__hint { font-size: var(--font-size-sm); color: var(--gray-600); margin: 0 0 var(--space-4); }
.esig-fields { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: var(--space-4); align-items: end; }
@media (max-width: 720px) { .esig-fields { grid-template-columns: 1fr; } }
.esig-fields .form-group { margin-bottom: 0; }
.esig-prefill { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 600; color: var(--success, #2f7d4f); background: #e7f4ec; border-radius: var(--radius-full); padding: 1px 8px; margin-left: 6px; }
.esig-activate-btn { white-space: nowrap; }
.esig-steps { display: flex; gap: var(--space-4); flex-wrap: wrap; margin-top: var(--space-4); padding-top: var(--space-4); border-top: 1px dashed rgba(31, 58, 77,.25); }
.esig-step { display: flex; align-items: flex-start; gap: var(--space-2); font-size: var(--font-size-xs); color: var(--gray-600); max-width: 220px; }
.esig-step__n { flex-shrink: 0; width: 18px; height: 18px; border-radius: var(--radius-full); background: #fff; border: 1px solid var(--mb-secondary); color: var(--mb-primary); font-weight: 700; font-size: 10px; display: inline-flex; align-items: center; justify-content: center; }
.esig-confirm { display: none; align-items: flex-start; gap: var(--space-3); margin-top: var(--space-4); padding: var(--space-3) var(--space-4); background: #ECFDF5; border: 1px solid var(--success, #2f7d4f); border-radius: var(--radius-md); font-size: var(--font-size-sm); color: var(--status-ordered); }
.esig-confirm.is-on { display: flex; }
.esig-confirm strong { color: var(--status-ordered); }
.esig-confirm .esig-confirm__ico { font-size: 18px; line-height: 1.3; }

/* §3 Preview version line */
.pres-version-line { font-size: 12px; color: #888; margin-bottom: var(--space-3); }
.pres-version-line strong { color: var(--gray-700); }

/* §4 Share link */
.share-link-row { display: flex; align-items: center; gap: var(--space-2); margin-top: var(--space-3); padding: var(--space-3) var(--space-4); background: var(--gray-50); border: 1px dashed var(--gray-300); border-radius: var(--radius-md); }
.share-link-row code { flex: 1; font-size: 12px; color: var(--gray-600); font-family: monospace; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.step6-divider { border: none; border-top: 1px solid var(--gray-200); margin: 0 0 var(--space-6); }

/* success toast variant (base .pres-toast already exists) */
.pres-toast.pres-toast-success { background: var(--status-ordered); }

/* ============================================================================
   CHANGE-281 — Header Bar: View Copies list + Global Change picker.
   ========================================================================== */

/* View Copies modal list */
.vc-list { display: flex; flex-direction: column; gap: 6px; }
.vc-row {
  display: grid; grid-template-columns: 1fr auto auto; gap: 12px; align-items: center;
  width: 100%; text-align: left; padding: 10px 12px; cursor: pointer;
  border: 1px solid var(--gray-200, #e5e7eb); border-radius: var(--radius-md, 8px);
  background: #fff; font: inherit; transition: border-color .15s ease, background .15s ease;
}
.vc-row:hover:not(:disabled) { border-color: var(--mb-primary, #1f3a4d); background: var(--gray-50, #f9fafb); }
.vc-row--current { background: var(--brand-primary-light, #e9eef4); cursor: default; }
.vc-row:disabled { cursor: default; }
.vc-num { font-weight: 600; color: var(--gray-800, #1f2937); }
.vc-current { color: var(--mb-primary, #1f3a4d); font-weight: 600; font-size: 12px; }
.vc-status { font-size: 12px; color: var(--gray-600, #4b5563); }
.vc-date { font-size: 12px; color: var(--gray-500, #6b7280); white-space: nowrap; }

/* Global Change item picker (inside the AGC modal) */
.agc-modal__picker { border: 1px solid var(--gray-200, #e5e7eb); border-radius: var(--radius-md, 8px); margin-bottom: var(--space-4, 16px); overflow: hidden; }
.agc-picker-selall-row { padding: 8px 12px; background: var(--gray-50, #f9fafb); }
.agc-modal__picker-rows { max-height: 240px; overflow-y: auto; }
.agc-picker-row { display: flex; align-items: center; gap: 10px; padding: 7px 12px; border-top: 1px solid var(--gray-100, #f3f4f6); cursor: pointer; }
.agc-picker-row:hover { background: var(--gray-50, #f9fafb); }
.agc-picker-check { width: 16px; height: 16px; accent-color: var(--mb-primary, #1f3a4d); flex-shrink: 0; }
.agc-picker-num { font-weight: 600; color: var(--gray-500, #6b7280); font-size: 12px; min-width: 36px; }
.agc-picker-label { font-size: 13px; color: var(--gray-800, #1f2937); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ============================================================================
   CHANGE-282 — Quote refinements (Steps 2 & 4).
   ========================================================================== */

/* §2.2 Item Configurator: "View Options:" label + keep toggle grouped right */
.item-configurator-modal__rowstyle-wrap { display: flex; align-items: center; gap: 8px; }
.item-configurator-modal__rowstyle-label { font-size: 12px; font-weight: 600; color: var(--gray-600, #4b5563); white-space: nowrap; }

/* §2.3 Item Configurator: focused-row inputs get the system's rounded corners */
.item-configurator-modal__loc-row--focus input,
.item-configurator-modal__loc-row--focus select { border-radius: var(--radius-sm, 4px); }

/* §3.2 Warranty Includes (Materials / Labor) */
.terms-warranty-includes { display: flex; align-items: center; gap: 16px; margin-top: 8px; flex-wrap: wrap; }
.terms-warranty-includes__label { font-size: 13px; font-weight: 600; color: var(--gray-700, #374151); }

/* §3.4 Requirements: Mark as Done / completed / remove */
.terms-done-btn {
  display: inline-flex; align-items: center; gap: 4px;
  padding: var(--space-1, 4px) var(--space-2, 8px); border: 1px solid var(--gray-200, #e5e7eb);
  border-radius: var(--radius-sm, 4px); background: transparent; color: var(--gray-500, #6b7280);
  font-size: var(--font-size-xs, 12px); cursor: pointer; white-space: nowrap; flex-shrink: 0;
  font-family: var(--font-family); transition: color .15s ease, border-color .15s ease, background .15s ease;
}
.terms-done-btn:hover { color: var(--status-ordered, #2f7d4f); border-color: var(--status-ordered, #2f7d4f); background: #eef7f1; }
.terms-done-btn--done { color: var(--status-ordered, #2f7d4f); border-color: var(--status-ordered, #2f7d4f); background: #eef7f1; font-weight: 600; }
.terms-remove-x {
  border: none; background: transparent; color: var(--gray-400, #9ca3af); cursor: pointer;
  font-size: 18px; line-height: 1; width: 24px; height: 24px; border-radius: var(--radius-sm, 4px); flex-shrink: 0;
}
.terms-remove-x:hover { color: var(--mb-alert, #c1121f); background: var(--mb-alert-light, #f8d7da); }
.terms-completed-badge { font-size: 11px; font-weight: 700; color: var(--status-ordered, #2f7d4f); background: #e7f4ec; border: 1px solid #b6dcc4; border-radius: var(--radius-full, 9999px); padding: 1px 8px; white-space: nowrap; }
.req-row-wrap--completed .terms-label-input { text-decoration: line-through; color: var(--gray-500, #6b7280); }
.req-row-wrap--completed { background: var(--gray-50, #f9fafb); }