/* ══════════════════════════════════════════════════════
   GLOBAL STYLES — Variables, Reset, Typography, Shared
   (Dashboard v2 — same design system as customer_view)
   ══════════════════════════════════════════════════════ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --red: #d62828;
  --red-dark: #b71c1c;
  --red-light: #fdeaea;
  --black: #000;
  --gray-900: #000;
  --gray-700: #000;
  --gray-500: #000;
  --gray-300: #ccc;
  --gray-200: #e5e5e5;
  --gray-100: #f4f4f4;
  --gray-50: #fafafa;
  --white: #fff;
  --yellow-light: #fef8e1;
  --yellow-border: #f3ca3e;
  --sidebar-w: 270px;
  --header-h: 60px;
  --shadow-sm: 0 1px 3px rgba(0,0,0,.08);
  --transition: .2s ease;
}

html { font-size: 14px; }
body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  color: var(--black); background: var(--gray-100); line-height: 1.5;
}
a { color: inherit; text-decoration: none; }
button { cursor: pointer; font-family: inherit; border: none; }
input[type="number"] { font-family: inherit; }

/* ── Main Content Area ─────────────────────────────── */
.main {
  margin-left: var(--sidebar-w); margin-top: var(--header-h);
  padding: 0 32px 80px;
  min-height: calc(100vh - var(--header-h));
  transition: margin-left .25s ease;
}
.main--full { margin-left: 0; }

/* ── Breadcrumbs ──────────────────────────────────── */
.breadcrumbs {
  display: flex; align-items: center; gap: 8px;
  padding: 14px 0; margin-bottom: 4px;
  font-size: .82rem; font-weight: 600;
}
.breadcrumbs__link {
  color: var(--gray-500); cursor: pointer;
  transition: color var(--transition);
}
.breadcrumbs__link:hover { color: var(--red); }
.breadcrumbs__sep { color: var(--gray-300); }
.breadcrumbs__current { color: var(--black); }

/* ── Page Head ────────────────────────────────────── */
.page-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  margin-bottom: 20px; flex-wrap: wrap; gap: 12px;
}
.page-head h1 { font-size: 1.5rem; font-weight: 800; }
.page-head p { color: var(--gray-500); font-size: .88rem; margin-top: 2px; }
.page-head__actions { display: flex; gap: 8px; }

/* ── Shared Data Tables ────────────────────────────── */
.data-table {
  width: 100%; border-collapse: collapse; background: var(--white);
  border: 1px solid var(--gray-200);
}
.data-table thead th {
  text-align: left; font-size: .72rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .05em; color: var(--black);
  padding: 10px 14px; border-bottom: 2px solid #000;
  background: var(--gray-50); white-space: nowrap;
  position: sticky; top: 0; z-index: 2;
}
.data-table tbody td {
  padding: 12px 14px; font-size: .88rem; border-bottom: 1px solid var(--gray-200);
  vertical-align: middle;
}
.data-table tbody tr:hover { background: var(--gray-50); }

.mono { font-family: 'Roboto Mono', monospace; font-weight: 300; }
.bold { font-weight: 700; }

/* ── Status Badges ─────────────────────────────────── */
.status-badge {
  font-size: .76rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .03em; padding: 4px 10px; white-space: nowrap;
}
.status-badge--pending { background: #fef8e1; color: #8a6d00; border: 1px solid #f3ca3e; }
.status-badge--shipped { background: #e8f4fd; color: #194070; border: 1px solid #a0c4e8; }
.status-badge--delivered { background: #e9f7ef; color: #1a6b37; border: 1px solid #8fd4a8; }
.status-badge--cancelled { background: #fdeaea; color: var(--red); border: 1px solid #e8a0a0; }
.status-badge--active { background: #e9f7ef; color: #1a6b37; border: 1px solid #8fd4a8; }
.status-badge--inactive { background: var(--gray-100); color: var(--gray-500); border: 1px solid var(--gray-200); }
.status-badge--draft { background: #fef8e1; color: #8a6d00; border: 1px solid #f3ca3e; }
.status-badge--archived { background: var(--gray-100); color: var(--gray-500); border: 1px solid var(--gray-200); }
.status-badge--test_order { background: #d63384; color: var(--white); border: 1px solid #d63384; }

/* ── Role Badges ───────────────────────────────────── */
.role-badge {
  font-size: .76rem; font-weight: 700; text-transform: uppercase;
  padding: 3px 10px; letter-spacing: .03em;
}
.role-badge--admin { background: #194070; color: var(--white); }
.role-badge--user { background: var(--gray-100); color: var(--black); border: 1px solid var(--gray-200); }

/* ── Fixed-width truncating badges ─────────────────── */
/* Opt-in modifier used in table cells where badge text varies in length
   (e.g. order status, user role). Locks every badge in the column to the
   same width and ellipsizes overflow so column widths stay stable. The
   full text is exposed via a `title` attribute on the element. */
.status-badge--fixed,
.role-badge--fixed {
  display: inline-block;
  vertical-align: middle;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: help;
  box-sizing: border-box;
}
.status-badge--fixed { width: 130px; }
.role-badge--fixed   { width: 110px; }

/* ── User Cells ────────────────────────────────────── */
.user-cell { display: flex; align-items: center; gap: 8px; white-space: nowrap; }
.user-cell .bi { font-size: 1.1rem; color: var(--gray-300); }

/* ── Action Buttons ────────────────────────────────── */
.action-cell { white-space: nowrap; }
.btn-action {
  padding: 6px 12px; font-size: .8rem; font-weight: 700; border-radius: 0;
  transition: background var(--transition); border: 1px solid var(--gray-200);
  background: var(--white); color: var(--black); margin-right: 4px;
}
.btn-action:hover { background: var(--gray-100); }
.btn-action--sm { padding: 4px 10px; font-size: .76rem; }
.btn-action--danger { color: var(--red); border-color: var(--red); }
.btn-action--danger:hover { background: var(--red-light); }
.btn-group { display: inline-flex; gap: 4px; }

/* ── Primary / Secondary Buttons ───────────────────── */
.btn-primary {
  padding: 10px 18px; font-size: .88rem; font-weight: 700; border-radius: 0;
  background: var(--red); color: var(--white); border: none;
  transition: background var(--transition); cursor: pointer;
}
.btn-primary:hover { background: var(--red-dark); }
.btn-secondary {
  padding: 10px 18px; font-size: .88rem; font-weight: 700; border-radius: 0;
  background: var(--white); color: var(--black); border: 1px solid var(--gray-200);
  transition: background var(--transition); cursor: pointer;
}
.btn-secondary:hover { background: var(--gray-100); }

.btn-back {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: .9rem; font-weight: 700; color: var(--black);
  padding: 8px 0; transition: color var(--transition);
}
.btn-back:hover { color: var(--red); }

/* ── Form Elements ─────────────────────────────────── */
.form-row { display: flex; gap: 14px; flex-wrap: wrap; align-items: flex-end; }
.form-group { display: flex; flex-direction: column; gap: 4px; min-width: 180px; }
.form-group label { font-size: .76rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.form-group input,
.form-group select {
  padding: 9px 12px; font-size: .88rem; border: 1px solid var(--gray-200);
  border-radius: 0; font-family: inherit;
}
.form-group input:focus,
.form-group select:focus { outline: none; border-color: var(--red); }
.form-group textarea {
  font-family: inherit; font-size: .88rem; padding: 8px 10px;
  border: 1px solid var(--gray-200); background: var(--white); color: var(--black);
  border-radius: 0; outline: none; transition: border-color var(--transition);
  resize: vertical; min-height: 60px;
}
.form-group textarea:focus { border-color: var(--black); }

/* ── Pagination ────────────────────────────────────── */
.pagination {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 0; border-top: 1px solid var(--gray-200); margin-top: 0;
}
.pagination__info { font-size: .84rem; color: var(--black); }
.pagination__controls { display: flex; gap: 4px; }
.pagination__btn {
  padding: 6px 12px; font-size: .82rem; font-weight: 700;
  background: var(--white); border: 1px solid var(--gray-200);
  color: var(--black); cursor: pointer; transition: background var(--transition);
}
.pagination__btn:hover:not(:disabled) { background: var(--gray-100); }
.pagination__btn:disabled { opacity: .4; cursor: default; }
.pagination__btn--active { background: var(--black); color: var(--white); border-color: var(--black); }

/* ── Cards / Stat Blocks ──────────────────────────── */
.stat-cards {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 16px; margin-bottom: 24px;
}
.stat-card {
  background: var(--white); border: 1px solid var(--gray-200);
  padding: 20px; display: flex; flex-direction: column; gap: 4px;
}
.stat-card__label {
  font-size: .72rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .04em; color: var(--gray-500);
}
.stat-card__value { font-size: 1.5rem; font-weight: 800; }

/* ── Empty State ───────────────────────────────────── */
.empty-state {
  text-align: center; padding: 60px 20px; color: var(--gray-500);
}
.empty-state .bi { font-size: 2.5rem; margin-bottom: 12px; display: block; }
.empty-state p { font-size: .95rem; }

/* ══════════════════════════════════════════════════════
   DashTable Engine
   ══════════════════════════════════════════════════════ */

/* ── Toolbar ──────────────────────────────────────── */
.dt-toolbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-bottom: 12px;
}
.dt-toolbar__right {
  display: flex; align-items: center; gap: 8px;
}
.dt-search {
  padding: 8px 12px; font-size: .88rem; border: 1px solid var(--gray-200);
  border-radius: 0; font-family: inherit; width: 260px;
  transition: border-color var(--transition);
}
.dt-search:focus { outline: none; border-color: var(--black); }
.dt-search::placeholder { color: var(--gray-300); }
.dt-per-page {
  padding: 8px 10px; font-size: .82rem; border: 1px solid var(--gray-200);
  border-radius: 0; font-family: inherit; background: var(--white);
}
.dt-per-page:focus { outline: none; border-color: var(--black); }

/* ── Table wrap ───────────────────────────────────── */
.dt-table-wrap { overflow-x: auto; }
.dt-table-wrap .data-table { border-bottom: none; }

/* ── Sortable headers ─────────────────────────────── */
.dt-sortable { cursor: pointer; user-select: none; }
.dt-sortable:hover { color: var(--red); }
.dt-sort-icon { font-size: .6rem; vertical-align: middle; margin-left: 2px; }

/* ── Empty / loading / error states ───────────────── */
.dt-empty {
  text-align: center; padding: 40px 20px; color: var(--gray-500);
  font-size: .95rem;
}
.dt-loading {
  text-align: center; padding: 40px 20px; color: var(--gray-500);
  font-size: .95rem;
}
.dt-error {
  text-align: center; padding: 40px 20px; color: var(--red);
  font-size: .95rem;
}

/* ── Fixed Pagination Bar ─────────────────────────── */
.dt-pagination {
  position: fixed; bottom: 0; right: 0;
  left: var(--sidebar-w);
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 32px;
  background: var(--white);
  border-top: 1px solid var(--gray-200);
  z-index: 80;
  transition: left .25s ease;
}
.dt-pagination__info { font-size: .84rem; color: var(--black); }
.dt-pagination__controls { display: flex; align-items: center; gap: 4px; }
.pagination__ellipsis {
  padding: 6px 4px; font-size: .82rem; color: var(--gray-500);
}

/* Boolean check icons in tables */
.data-table .bi-check-lg { color: #1a6b37; font-size: 1.1rem; }

/* ══════════════════════════════════════════════════════
   DashForm Engine
   ══════════════════════════════════════════════════════ */

/* ── Form grid ────────────────────────────────────── */
.df-form { margin-bottom: 16px; }
.df-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 0; border: 1px solid var(--gray-200); background: var(--white);
}
.df-field {
  display: flex; flex-direction: column; gap: 4px;
  padding: 14px 18px; border-bottom: 1px solid var(--gray-200);
  border-right: 1px solid var(--gray-200);
}
.df-field:nth-child(2n) { border-right: none; }
.df-field--full { grid-column: 1 / -1; border-right: none; }
.df-label {
  font-size: .76rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .04em; color: var(--black);
}
.df-input {
  padding: 9px 12px; font-size: .88rem; border: 1px solid var(--gray-200);
  border-radius: 0; font-family: inherit; width: 100%;
}
.df-input:focus { outline: none; border-color: var(--red); }
textarea.df-input { resize: vertical; min-height: 60px; }
.df-checkbox { width: 18px; height: 18px; margin: 4px 0; }
.df-help { font-size: .76rem; color: var(--gray-500); margin-top: 2px; }
.df-input-wrap { display: flex; flex-direction: column; gap: 4px; }

/* ── Buttons ──────────────────────────────────────── */
.df-buttons {
  display: flex; gap: 8px; margin-top: 20px; align-items: center;
}

/* ── Sections (uncapped spending, credit, etc.) ──── */
.df-sections { margin-top: 16px; }
.df-section-header {
  font-size: .76rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .06em; padding: 10px 18px;
  background: var(--gray-50); border: 1px solid var(--gray-200);
  border-bottom: 2px solid var(--black); margin-top: 16px;
}
.df-section-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 18px; border: 1px solid var(--gray-200); border-top: none;
  background: var(--white);
}
.df-section-row__label { font-size: .88rem; font-weight: 600; }
.df-section-row__value { font-size: .88rem; display: flex; align-items: center; gap: 8px; }

/* ── Searchable select ────────────────────────────── */
.df-select-container { width: 100%; }
.df-select-wrapper { position: relative; width: 100%; }
.df-select-display {
  padding: 9px 12px; font-size: .88rem; border: 1px solid var(--gray-200);
  background: var(--white); cursor: pointer; height: 38px;
  display: flex; align-items: center; width: 100%;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.df-select-display:hover { border-color: var(--gray-300); }
.df-select-search {
  width: 100%; height: 38px;
  padding: 9px 12px; font-size: .88rem; border: 1px solid var(--gray-200);
  background: var(--white); font-family: inherit; box-sizing: border-box;
}
.df-select-search:focus { outline: none; border-color: var(--red); }
.df-select-list {
  display: none; position: fixed;
  max-height: 220px; overflow-y: auto; background: var(--white);
  border: 1px solid var(--gray-200); border-top: none; z-index: 30000;
  box-shadow: 0 4px 12px rgba(0,0,0,.15);
}
.df-select-option {
  padding: 9px 12px; font-size: .88rem; cursor: pointer;
  transition: background var(--transition);
}
.df-select-option:hover { background: var(--gray-50); }
.df-select-option--active { background: var(--red-light); color: var(--red); font-weight: 700; }
.df-select-option--empty { color: var(--gray-500); cursor: default; }
.df-select-clear {
  position: absolute; right: 8px; top: 9px;
  background: none; border: none; font-size: 1.2rem; cursor: pointer;
  color: var(--gray-500); padding: 0; width: 20px; height: 20px; line-height: 1;
  z-index: 2;
}
.df-select-clear:hover { color: var(--red); }

/* ── Image preview ────────────────────────────────── */
.df-image-preview { margin-bottom: 8px; }
.df-image-preview img {
  max-width: 200px; max-height: 200px; object-fit: contain;
  border: 1px solid var(--gray-200);
}

/* ── Read-only info block (order info) ────────────── */
.df-info-block {
  background: var(--gray-50); border: 1px solid var(--gray-200);
  margin-bottom: 16px;
}
.df-info-block__title {
  font-size: .82rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .06em; padding: 12px 18px;
  border-bottom: 2px solid var(--black);
}
.df-info-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 0;
}
.df-info-cell {
  padding: 12px 18px; border-bottom: 1px solid var(--gray-200);
  border-right: 1px solid var(--gray-200);
}
.df-info-cell__label {
  font-size: .72rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .04em; color: var(--gray-500); margin-bottom: 2px;
}
.df-info-cell__value { font-size: .88rem; }

/* ── Additional photos dropzone ───────────────────── */
.df-dropzone {
  border: 2px dashed var(--gray-200); padding: 30px; text-align: center;
  background: var(--gray-50); cursor: pointer; transition: all var(--transition);
}
.df-dropzone:hover, .df-dropzone--active {
  border-color: var(--red); background: var(--red-light);
}
.df-dropzone__text { color: var(--gray-500); font-size: .88rem; }
.df-dropzone__text strong { color: var(--black); }

/* ══════════════════════════════════════════════════════
   Contract Products Matrix
   ══════════════════════════════════════════════════════ */

.cpm-toolbar {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 12px; flex-wrap: wrap;
}
.cpm-message {
  display: none; padding: 8px 14px; font-size: .84rem;
  margin-bottom: 12px; font-weight: 600;
}
.cpm-message--success { background: #e9f7ef; color: #1a6b37; border: 1px solid #8fd4a8; }
.cpm-message--error { background: var(--red-light); color: var(--red); border: 1px solid #e8a0a0; }

/* Parent rows */
.cpm-parent { cursor: pointer; }
.cpm-parent:hover { background: var(--gray-50); }
.cpm-expand-icon { transition: transform .15s; }

/* Detail expansion row */
.cpm-detail-row td { background: var(--gray-50); }
.cpm-detail {
  padding: 14px; display: flex; flex-wrap: wrap; align-items: flex-start; gap: 14px;
}
.cpm-detail__image img {
  width: 80px; height: auto; object-fit: cover; border: 1px solid var(--gray-200);
}
.cpm-detail__info { flex: 1; min-width: 200px; font-size: .88rem; }
.cpm-min-qty-note {
  margin-top: 6px; padding: 4px 8px; font-size: .82rem;
  background: var(--yellow-light); border: 1px solid var(--yellow-border); color: #8a6d00;
}
.cpm-detail .data-table { width: 100%; flex-basis: 100%; }

/* Inline price inputs */
.cpm-price-input {
  width: 80px; padding: 4px 8px; font-size: .84rem; font-family: inherit;
  border: 1px solid var(--gray-200); background: var(--gray-50); color: var(--gray-500);
  transition: all .15s;
}
.cpm-price-input:focus, .cpm-price-input--active {
  background: var(--white); color: var(--black); border-color: var(--red);
  outline: none;
}
.cpm-price-input--changed {
  background: var(--yellow-light); border-color: var(--yellow-border); color: var(--black);
}

/* Modals */
.cpm-modal-overlay {
  position: fixed; inset: 0; z-index: 20000;
  background: rgba(0,0,0,.5); display: flex;
  align-items: center; justify-content: center;
}
.cpm-modal {
  background: var(--white); border: 1px solid var(--gray-200);
  box-shadow: 0 8px 32px rgba(0,0,0,.15);
  max-width: 500px; width: 90%; display: flex; flex-direction: column;
  max-height: 70vh;
}
.cpm-modal--wide { max-width: 900px; width: 95%; }
.cpm-modal--tall { max-height: 85vh; }
.cpm-modal__header {
  display: flex; justify-content: space-between; align-items: center;
  padding: 10px 18px; border-bottom: 2px solid var(--black);
  background: var(--gray-50);
}
.cpm-modal__title { font-size: .82rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
.cpm-modal__close {
  background: none; border: none; font-size: 1.3rem; cursor: pointer;
  color: var(--gray-500); padding: 0; line-height: 1;
}
.cpm-modal__close:hover { color: var(--red); }
.cpm-modal__body { padding: 18px; flex: 1; overflow-y: auto; }
.cpm-modal__footer {
  display: flex; justify-content: flex-end; gap: 8px;
  padding: 10px 18px; border-top: 1px solid var(--gray-200);
  background: var(--gray-50);
}

/* Publish spinner */
.cpm-spinner {
  width: 40px; height: 40px; margin: 0 auto;
  border: 4px solid var(--gray-200); border-top-color: var(--black);
  border-radius: 50%; animation: spin 1s linear infinite;
}

/* ══════════════════════════════════════════════════════
   Add Products Wizard
   ══════════════════════════════════════════════════════ */

.cpm-wiz {
  display: flex; flex-direction: column; gap: 14px; height: 100%;
}

/* Step indicator at top of wizard */
.cpm-wiz__steps {
  display: flex; align-items: center; gap: 8px; font-size: .76rem;
  color: var(--gray-500); text-transform: uppercase; letter-spacing: .06em;
  font-weight: 700;
}
.cpm-wiz__step { padding: 4px 10px; border: 1px solid var(--gray-200); }
.cpm-wiz__step--active { background: var(--black); color: var(--white); border-color: var(--black); }
.cpm-wiz__step-sep { color: var(--gray-300); }

.cpm-wiz__help-link {
  margin-left: auto; font-size: .76rem; color: var(--red);
  text-decoration: underline; cursor: pointer; font-weight: 600;
}
.cpm-wiz__help-link:hover { color: var(--red-dark); }

/* Search + bulk toolbar */
.cpm-wiz__search-bar {
  display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
}
.cpm-wiz__search-bar input { flex: 1; min-width: 220px; }

/* Results scroll area */
.cpm-wiz__results {
  border: 1px solid var(--gray-200); overflow-y: auto; max-height: 360px;
}
.cpm-wiz__results .data-table { border: none; }

/* Parent row */
.cpm-wiz-row { cursor: pointer; }
.cpm-wiz-row--selected { background: var(--gray-50); }
.cpm-wiz-row:hover { background: var(--gray-50); }
.cpm-wiz-row__caret { cursor: pointer; padding: 0 6px; color: var(--gray-500); }
.cpm-wiz-row__caret:hover { color: var(--black); }
.cpm-wiz-row__add-all {
  font-size: .72rem; padding: 3px 8px; border: 1px solid var(--gray-200);
  background: var(--white); color: var(--black); cursor: pointer; font-weight: 700;
  text-transform: uppercase; letter-spacing: .04em;
}
.cpm-wiz-row__add-all:hover { background: var(--red-light); border-color: var(--red); color: var(--red); }
.cpm-wiz-row__add-all--deselect {
  background: var(--red); color: var(--white); border-color: var(--red);
}
.cpm-wiz-row__add-all--deselect:hover {
  background: var(--red-dark); color: var(--white); border-color: var(--red-dark);
}

/* Info banner at top of step 1 */
.cpm-wiz__info {
  padding: 8px 12px; font-size: .82rem; color: #194070;
  background: #e8f4fd; border: 1px solid #a0c4e8;
}
.cpm-wiz__info .bi { margin-right: 4px; }

/* Variant rows (nested under parent in results) */
.cpm-wiz-variant td { background: var(--gray-50); padding-left: 36px; }

/* Selected products summary (collapsible) */
.cpm-wiz__summary {
  border: 1px solid var(--gray-200); background: var(--gray-50);
}
.cpm-wiz__summary-header {
  padding: 10px 14px; display: flex; justify-content: space-between;
  align-items: center; cursor: pointer; font-size: .82rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .04em;
}
.cpm-wiz__summary-body {
  padding: 10px 14px; background: var(--white); border-top: 1px solid var(--gray-200);
  max-height: 200px; overflow-y: auto;
}
.cpm-wiz__summary-item { font-size: .82rem; padding: 4px 0; }
.cpm-wiz__summary-item--parent { font-weight: 700; }
.cpm-wiz__summary-item--variant { padding-left: 18px; color: var(--gray-700); }

/* Step 2 review */
.cpm-wiz__notice {
  background: var(--yellow-light); border: 1px solid var(--yellow-border);
  color: #8a6d00; padding: 10px 14px; font-size: .84rem; font-weight: 600;
}
.cpm-wiz__review-table { width: 100%; }
.cpm-wiz-review-parent td { background: var(--white); font-weight: 700; }
.cpm-wiz-review-variant td { padding-left: 36px; font-size: .82rem; }
.cpm-wiz-review-disabled td { opacity: .5; }
.cpm-wiz__badge {
  display: inline-block; font-size: .68rem; font-weight: 700;
  padding: 2px 7px; margin-left: 6px; text-transform: uppercase; letter-spacing: .04em;
}
.cpm-wiz__badge--auto { background: var(--yellow-light); color: #8a6d00; border: 1px solid var(--yellow-border); }
.cpm-wiz__badge--exists { background: var(--gray-100); color: var(--gray-500); border: 1px solid var(--gray-200); }

/* ══════════════════════════════════════════════════════
   Tooltips (hover)
   ══════════════════════════════════════════════════════ */

.tt-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 16px; height: 16px; margin-left: 6px;
  color: var(--gray-500); cursor: help; vertical-align: middle;
}
.tt-icon:hover, .tt-icon:focus { color: var(--red); outline: none; }
.tt-icon .bi { font-size: .9rem; }

.tt-tooltip {
  position: fixed; z-index: 50000;
  background: var(--black); color: var(--white);
  padding: 6px 10px; font-size: .76rem; line-height: 1.4;
  max-width: 260px; pointer-events: none;
  box-shadow: 0 2px 8px rgba(0,0,0,.2);
}

/* ══════════════════════════════════════════════════════
   Walkthroughs (guided tours)
   ══════════════════════════════════════════════════════ */

.wt-overlay {
  position: fixed; inset: 0; z-index: 40000;
  pointer-events: none;
}

.wt-spotlight {
  position: fixed; display: none;
  border: 2px solid var(--red);
  box-shadow: 0 0 0 9999px rgba(0,0,0,.65);
  pointer-events: none;
  transition: top .2s, left .2s, width .2s, height .2s;
}

.wt-popover {
  position: fixed; z-index: 40001; max-width: 360px;
  background: var(--white); border: 1px solid var(--black);
  box-shadow: 0 8px 24px rgba(0,0,0,.25);
  pointer-events: auto;
}
.wt-popover__step-indicator {
  background: var(--black); color: var(--white);
  padding: 4px 12px; font-size: .68rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .06em;
}
.wt-popover__title {
  padding: 12px 16px 4px;
  font-size: 1rem; font-weight: 800;
}
.wt-popover__body {
  padding: 0 16px 14px;
  font-size: .88rem; line-height: 1.5; color: var(--black);
}
.wt-popover__footer {
  display: flex; align-items: center; gap: 6px;
  padding: 10px 16px; border-top: 1px solid var(--gray-200);
  background: var(--gray-50);
}
.wt-btn {
  padding: 6px 12px; font-size: .82rem; font-weight: 700;
  border: 1px solid var(--gray-200); background: var(--white);
  color: var(--black); cursor: pointer; transition: background .15s;
}
.wt-btn:hover { background: var(--gray-100); }
.wt-btn--primary { background: var(--red); color: var(--white); border-color: var(--red); }
.wt-btn--primary:hover { background: var(--red-dark); border-color: var(--red-dark); }
.wt-btn--secondary { background: var(--white); }
.wt-btn--ghost {
  background: transparent; border-color: transparent; color: var(--gray-500);
  text-decoration: underline; padding: 6px 4px; font-weight: 600;
}
.wt-btn--ghost:hover { background: transparent; color: var(--black); }

/* ── Responsive ────────────────────────────────────── */
@media (max-width: 1024px) {
  .sidebar { width: 230px; }
  .main { margin-left: 230px; }
  .dt-pagination { left: 230px; }
}