:root {
  /* Drukas Nams palette: logo orange (#E74C0A) with warm neutral surfaces. */
  --app-bg: #fdf8f5;
  --app-surface: #ffffff;
  --app-surface-soft: #fdf3ee;
  --app-border: #ecdcd3;
  --app-border-soft: #f4e9e3;
  --app-text: #28160f;
  --app-muted: #75635b;
  --app-brand: #e74c0a;
  --app-primary: #c84309;
  --app-primary-dark: #a93506;
  --app-primary-soft: #fce3d6;
  --app-ink: #28160f;
  --app-success: #16a34a;
  --app-warning: #f59e0b;
  --app-danger: #dc2626;
  --app-info: #0891b2;
  --app-shadow: 0 18px 45px rgba(15, 23, 42, 0.08);
  --app-shadow-sm: 0 8px 24px rgba(15, 23, 42, 0.06);
}

html {
  min-height: 100%;
}

body {
  min-height: 100vh;
  padding-top: 50px;
  background: var(--app-bg);
  color: var(--app-text);
  font-size: 0.94rem;
}

.app-navbar {
  min-height: 50px;
  padding-block: 0;
  background: linear-gradient(90deg, #24120c 0%, #3a1b10 55%, #21100a 100%);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 8px 24px rgba(2, 8, 23, 0.16);
}

.app-navbar .container-fluid {
  padding-inline: 1.25rem;
}

.navbar-brand {
  font-weight: 700;
  letter-spacing: 0;
  font-size: 1.12rem;
  margin-right: 1.45rem;
  padding-block: 0.6rem;
}

.navbar-brand .bi {
  color: var(--app-brand);
  font-size: 1.15rem;
}

.navbar-dark .navbar-nav .nav-link {
  border-radius: 0;
  color: rgba(255, 255, 255, 0.72);
  padding: 0.83rem 1rem;
}

.navbar-dark .navbar-nav .nav-link:hover,
.navbar-dark .navbar-nav .nav-link:focus {
  background: rgba(255, 255, 255, 0.07);
  color: #ffffff;
}

.navbar-dark .navbar-nav .nav-link.active {
  background: var(--app-primary);
  color: #ffffff;
  box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.12);
}

main.container-fluid {
  max-width: none;
  padding-inline: 1.75rem;
}

.card,
.dropdown-menu,
.modal-content,
.offcanvas {
  border-color: var(--app-border);
  box-shadow: var(--app-shadow-sm);
}

.modal-content {
  border-radius: 8px;
}

.modal-header,
.modal-footer,
.card-header,
.card-footer {
  background: #ffffff;
  border-color: var(--app-border);
}

.card {
  border-radius: 8px;
}

.btn {
  border-radius: 6px;
  font-weight: 600;
}

.btn-primary {
  background: var(--app-primary);
  border-color: var(--app-primary);
}

.btn-primary:hover,
.btn-primary:focus {
  background: var(--app-primary-dark);
  border-color: var(--app-primary-dark);
}

.btn-primary.active,
.btn-primary:active,
.show > .btn-primary.dropdown-toggle {
  background: var(--app-primary);
  border-color: var(--app-primary);
}

.form-control,
.form-select {
  border-color: var(--app-border);
  border-radius: 6px;
}

.form-control:focus,
.form-select:focus {
  border-color: rgba(200, 67, 9, 0.62);
  box-shadow: 0 0 0 0.2rem rgba(200, 67, 9, 0.14);
}

.btn-outline-primary {
  --bs-btn-color: var(--app-primary);
  --bs-btn-border-color: var(--app-primary);
  --bs-btn-hover-bg: var(--app-primary);
  --bs-btn-hover-border-color: var(--app-primary);
  --bs-btn-active-bg: var(--app-primary-dark);
  --bs-btn-active-border-color: var(--app-primary-dark);
  --bs-btn-focus-shadow-rgb: 200, 67, 9;
}

.bg-primary,
.text-bg-primary {
  background-color: var(--app-primary) !important;
}

.table {
  --bs-table-hover-bg: #fff8f3;
}

.pagination {
  gap: 0.2rem;
}

.pagination .page-link {
  border-color: var(--app-border);
  border-radius: 6px;
  color: var(--app-primary);
  min-width: 2rem;
  text-align: center;
}

.pagination .page-item.active .page-link {
  background: var(--app-primary);
  border-color: var(--app-primary);
  color: #ffffff;
}

.alert {
  border-radius: 8px;
  border-width: 1px;
}

#wooSyncStatus,
#syncToWooStatus,
#createProgress,
#selectedCountBadge {
  display: none;
}

#refreshStatsStatus,
#vendorSyncStatusArea,
#syncStatus,
#markingStatus,
#mappingStatus,
#mappingProgress,
#mappingArea,
#multiplierStatus,
#multiplierArea,
#pageAlert,
#markingPreviewAlert,
#markingImportProgress,
#imageRefreshAlert,
#imageRefreshProgress {
  display: none;
}

#healthCheckError,
#healthCheckResults,
#hcOrphanedMetaActions,
#hcTransientsActions,
#hcSchedulerActions,
#hcOrphanedVarsActions,
#analyzeStatus,
#analyzeResults,
#cleanupControls,
#progressCard,
#summaryCard,
#runActualBtn {
  display: none;
}

footer.bg-dark {
  background: var(--app-ink) !important;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

/* Login */
.login-body {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 2rem;
  background: var(--app-bg);
}
.login-shell {
  width: min(100%, 410px);
}
.login-brand-mark {
  width: 3rem;
  height: 3rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  background: var(--app-primary);
  border-radius: 8px;
  font-size: 1.25rem;
  box-shadow: 0 14px 32px rgba(200, 67, 9, 0.25);
  margin: 0 auto 1.25rem;
}
.login-card {
  background: #ffffff;
  border: 1px solid var(--app-border);
  border-radius: 8px;
  box-shadow: var(--app-shadow);
  padding: 2rem;
}
.login-card-header {
  text-align: center;
  margin-bottom: 1.35rem;
}
.login-eyebrow {
  color: var(--app-primary);
  font-size: 0.76rem;
  font-weight: 850;
  text-transform: uppercase;
  margin-bottom: 0.35rem;
}
.login-card h1 {
  color: var(--app-text);
  font-size: 1.65rem;
  line-height: 1.1;
  font-weight: 850;
  margin: 0;
}
.login-alert {
  font-size: 0.86rem;
  padding: 0.75rem 1rem;
}
.login-form {
  display: flex;
  flex-direction: column;
  gap: 0.95rem;
}
.login-input-wrap {
  position: relative;
}
.login-input-wrap .bi {
  position: absolute;
  left: 0.78rem;
  top: 50%;
  transform: translateY(-50%);
  color: #94a3b8;
  pointer-events: none;
}
.login-input-wrap .form-control {
  min-height: 2.75rem;
  padding-left: 2.35rem;
}
.login-submit {
  min-height: 2.75rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  margin-top: 0.25rem;
}
.login-footer {
  color: var(--app-muted);
  font-size: 0.76rem;
  text-align: center;
  margin-top: 1rem;
}

/* Product page components */
.products-page { color: var(--app-text); padding-top: 1.35rem !important; }
.products-shell {
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
.products-page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0 0 1.25rem;
  background: transparent;
}
.products-title-wrap { display: flex; align-items: center; gap: 0.9rem; min-width: 0; }
.min-w-0 { min-width: 0; }
.products-title-icon {
  width: 3rem;
  height: 3rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  border-radius: 0;
  background: transparent;
  color: var(--app-primary);
  border: 0;
  font-size: 2.35rem;
}
.products-page h1 { font-size: 1.72rem; line-height: 1.12; letter-spacing: 0; font-weight: 800; }
.products-active-filter { color: var(--app-muted); font-size: 0.86rem; }
.products-top-totals { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0.5rem; }

.filter-section {
  background: #ffffff;
  border: 1px solid var(--app-border);
  border-radius: 4px;
  padding: 1rem 1.25rem 0.85rem;
}
.products-filter-top {
  align-items: end;
}
.products-search-form {
  display: contents;
}
.products-stock-filter {
  display: flex;
  min-height: 2.25rem;
  align-items: center;
  gap: 0.45rem;
  padding-top: 0;
  margin-bottom: 0;
}
.filter-label {
  color: #475569;
  font-size: 0.76rem;
  font-weight: 700;
  margin-bottom: 0.25rem;
}
.filter-section .form-select,
.filter-section .form-control,
.filter-section .btn {
  min-height: 2.25rem;
}
.stat-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.78rem;
  padding: 0.33rem 0.65rem;
  border-radius: 4px;
  background: #fbf1eb;
  border: 1px solid var(--app-border);
  color: #0f172a;
  white-space: nowrap;
}
.stat-pill .bi { color: var(--app-primary); }
.products-filter-tabs {
  display: flex;
  gap: 0;
  padding-bottom: 0;
  max-width: 100%;
  overflow-x: auto;
}
.products-filter-tabs .nav-link {
  border: 1px solid var(--app-border);
  border-right: 0;
  border-radius: 0;
  color: var(--app-primary);
  font-size: 0.84rem;
  font-weight: 700;
  white-space: nowrap;
  padding: 0.56rem 1rem;
}
.products-filter-tabs .nav-item:first-child .nav-link { border-radius: 4px 0 0 4px; }
.products-filter-tabs .nav-item:last-child .nav-link { border-radius: 0 4px 4px 0; border-right: 1px solid var(--app-border); }
.products-filter-tabs .nav-link:hover { background: #fff8f3; border-color: var(--app-border); }
.products-filter-tabs .nav-link.active {
  background: var(--app-primary);
  border-color: var(--app-primary);
  color: #ffffff;
  box-shadow: 0 8px 16px rgba(200, 67, 9, 0.16);
}
.products-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: flex-end; }
.products-actions .btn-group { flex-wrap: wrap; gap: 0.8rem; }
.products-actions .btn-group > .btn { border-radius: 4px !important; padding-inline: 1.05rem; }
.products-actions-stack {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.35rem;
}
.products-action-note {
  color: var(--app-muted);
  font-size: 0.78rem;
  line-height: 1.2;
  text-align: right;
  padding-right: 0.1rem;
}
.products-type-group .btn {
  border-color: var(--app-border);
  font-weight: 700;
  padding-inline: 0.95rem;
}
.products-table-card { overflow: hidden; }
.products-table-card .card-header { border-bottom-color: var(--app-border); }
.products-table-scroll { overflow: auto; }
.products-marking-filter { min-width: 170px; }
.products-columns-menu { min-width: 200px; }

.kpi-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 1.15rem; }
.kpi-card {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  min-height: 5.9rem;
  padding: 1rem 1.1rem;
  background: #ffffff;
  border: 1px solid var(--app-border);
  border-radius: 8px;
  box-shadow: 0 8px 22px rgba(15, 23, 42, 0.04);
  color: var(--app-text);
  transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}
a.kpi-card { text-decoration: none; }
a.kpi-card:hover { transform: translateY(-1px); border-color: #efc8b6; box-shadow: var(--app-shadow); }
.kpi-card.is-active { border-color: currentColor; box-shadow: 0 0 0 2px rgba(200, 67, 9, 0.12), var(--app-shadow-sm); }
.kpi-icon {
  width: 3.2rem;
  height: 3.2rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  border-radius: 8px;
  font-size: 1.35rem;
  background: var(--kpi-bg, var(--app-primary-soft));
  color: var(--kpi-color, var(--app-primary));
}
.kpi-label { color: var(--app-muted); font-size: 0.82rem; font-weight: 700; }
.kpi-value { color: var(--app-text); font-size: 1.55rem; line-height: 1.1; font-weight: 800; }
.kpi-note { color: var(--app-muted); font-size: 0.76rem; }
.kpi-blue { --kpi-bg: var(--app-primary-soft); --kpi-color: var(--app-primary); }
.kpi-green { --kpi-bg: #eaf8ef; --kpi-color: #16a34a; }
.kpi-amber { --kpi-bg: #fff4df; --kpi-color: #d97706; }
.kpi-violet { --kpi-bg: #f3eefe; --kpi-color: #7c3aed; }
.kpi-red { --kpi-bg: #fdecec; --kpi-color: #dc2626; }
.kpi-cyan { --kpi-bg: #f7e8df; --kpi-color: #a64217; }

.products-table th, .products-table td { vertical-align: middle; font-size: 0.79rem; padding: 0.58rem 0.72rem; white-space: nowrap; }
.products-table thead th {
  background: var(--app-surface-soft);
  color: #4d3930;
  border-bottom: 1px solid var(--app-border);
  font-size: 0.74rem;
  font-weight: 800;
  position: sticky;
  top: 0;
  z-index: 10;
}
.products-table { table-layout: auto; border-collapse: separate; border-spacing: 0; }
.products-table th,
.products-table tbody td { border-color: var(--app-border-soft); border-right: 1px solid var(--app-border-soft); }
.products-table th:last-child,
.products-table tbody td:last-child { border-right: 0; }
.products-table tbody tr { background: #ffffff; }
.td-name { white-space: normal; max-width: 280px; color: #1e293b; }
.td-attributes { white-space: normal; }

.th-checkbox, .td-checkbox { width: 35px; text-align: center; }
.th-thumb { width: 50px; text-align: center; }
.th-vendor { min-width: 80px; }
.th-sku { min-width: 110px; }
.th-parent-sku { min-width: 90px; }
.th-name { min-width: 180px; }
.th-type { width: 70px; text-align: center; }
.th-color { min-width: 90px; }
.th-attributes { min-width: 100px; }
.th-price { min-width: 85px; text-align: end; }
.th-stock { min-width: 60px; text-align: center; }
.th-status { width: 70px; text-align: center; }
.th-marking { min-width: 120px; }
.th-sync { min-width: 100px; }
.th-actions { min-width: 90px; text-align: center; }

.price-diff { color: #dc3545; font-weight: 600; }
.stock-diff { color: #dc3545; font-weight: 600; }

.product-thumb { width: 38px; height: 38px; object-fit: cover; border-radius: 6px; border: 1px solid var(--app-border-soft); }
.thumb-clickable { cursor: pointer; transition: opacity 0.15s; }
.thumb-clickable:hover { opacity: 0.7; }
#imgLightbox .modal-body { text-align: center; }
#imgLightbox .modal-body img { max-width: 100%; max-height: 75vh; border-radius: 6px; }
.product-thumb-placeholder { width: 38px; height: 38px; display: flex; align-items: center; justify-content: center; background: #fbf1eb; border: 1px solid var(--app-border-soft); border-radius: 6px; color: #a89085; font-size: 1rem; }

.row-status-active { border-left: 3px solid #198754 !important; }
.row-status-needs-update { border-left: 3px solid #ffc107 !important; }
.row-status-discontinued { border-left: 3px solid #dc3545 !important; }
.row-status-not-in-woo { border-left: 3px solid #6c757d !important; }

.group-header-row { background-color: #fff5ef !important; }
.group-header-row td { font-weight: 600; }
.variation-row .td-name { padding-left: 1.5rem; }
.group-toggle { cursor: pointer; user-select: none; }
.group-toggle .bi { transition: transform 0.2s; }
.group-toggle.collapsed .bi { transform: rotate(-90deg); }

.color-swatch { width: 0.9rem; height: 0.9rem; border-radius: 50%; display: inline-block; border: 1px solid #94a3b8; vertical-align: middle; margin-right: 0.35rem; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.5); }
.action-buttons .btn { padding: 0.18rem 0.38rem; font-size: 0.72rem; margin: 1px; white-space: nowrap; }

.sortable-header { cursor: pointer; user-select: none; }
.sortable-header:hover { background-color: var(--app-primary-soft) !important; }
.sort-icon { font-size: 0.65rem; margin-left: 3px; opacity: 0.4; }
.sort-active .sort-icon { opacity: 1; }

.sticky-action-bar {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 1050;
  background: #fff; border-top: 1px solid var(--app-border); box-shadow: 0 -12px 30px rgba(15,23,42,.12);
  padding: 0.5rem 1rem; transform: translateY(100%); transition: transform 0.25s ease;
}
.sticky-action-bar.visible { transform: translateY(0); }

.hide-col-parentsku .td-parent-sku, .hide-col-parentsku .th-parent-sku { display: none; }
.hide-col-attributes .td-attributes, .hide-col-attributes .th-attributes { display: none; }
.hide-col-baseprice .td-baseprice, .hide-col-baseprice .th-baseprice { display: none; }
.hide-col-wooprice .td-wooprice, .hide-col-wooprice .th-wooprice { display: none; }
.hide-col-woostock .td-woostock, .hide-col-woostock .th-woostock { display: none; }
.hide-col-sync .td-sync, .hide-col-sync .th-sync { display: none; }

.product-drawer { width: 420px !important; }
.product-drawer .drawer-images { display: flex; gap: 6px; flex-wrap: wrap; }
.product-drawer .drawer-images img { width: 80px; height: 80px; object-fit: cover; border-radius: 6px; border: 1px solid #dee2e6; }
.drawer-field { padding: 0.3rem 0; border-bottom: 1px solid #f0f0f0; }
.drawer-field-label { font-weight: 600; font-size: 0.75rem; color: #6c757d; text-transform: uppercase; }
.drawer-field-value { font-size: 0.85rem; }
.drawer-description { white-space: pre-wrap; font-size: 0.8rem; }
.create-progress-bar { width: 0%; }
.create-log-list { max-height: 220px; overflow: auto; padding: 6px; font-size: 0.85rem; }

/* Dashboard */
.dashboard-page {
  color: var(--app-text);
  padding-top: 1.35rem !important;
}
.dashboard-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: 1.25rem;
}
.dashboard-header h1 {
  font-size: 1.72rem;
  line-height: 1.12;
  font-weight: 800;
  letter-spacing: 0;
}
.dashboard-header-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.dashboard-command {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  gap: 1.25rem;
  background: #ffffff;
  border: 1px solid var(--app-border);
  border-radius: 8px;
  box-shadow: var(--app-shadow-sm);
  padding: 1.25rem;
}
.dashboard-command-label {
  color: var(--app-muted);
  font-size: 0.8rem;
  font-weight: 800;
  text-transform: uppercase;
}
.dashboard-command-value {
  color: var(--app-ink);
  font-size: 2.45rem;
  line-height: 1;
  font-weight: 850;
  margin-top: 0.25rem;
}
.dashboard-command-note {
  color: var(--app-muted);
  font-size: 0.86rem;
  margin-top: 0.45rem;
}
.dashboard-command-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(100px, 1fr));
  gap: 0.75rem;
  min-width: min(100%, 470px);
}
.dashboard-command-metrics > div {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 5rem;
  padding: 0.85rem 1rem;
  background: var(--app-surface-soft);
  border: 1px solid var(--app-border-soft);
  border-radius: 8px;
  color: var(--app-muted);
  font-size: 0.78rem;
  font-weight: 700;
}
.dashboard-command-metrics span {
  display: block;
  color: var(--app-text);
  font-size: 1.25rem;
  line-height: 1.2;
  font-weight: 800;
}
.dashboard-kpis .kpi-card {
  min-height: 6.15rem;
}
.dashboard-panel {
  overflow: hidden;
}
.dashboard-panel-title {
  color: var(--app-text);
  font-size: 1rem;
  font-weight: 800;
}
.dashboard-panel-subtitle {
  color: var(--app-muted);
  font-size: 0.78rem;
  margin-top: 0.12rem;
}
.dashboard-table-scroll {
  max-height: 530px;
}
.dashboard-table th,
.dashboard-table td {
  vertical-align: middle;
  font-size: 0.84rem;
  padding: 0.72rem 0.85rem;
  border-color: var(--app-border-soft);
}
.dashboard-table thead th {
  background: var(--app-surface-soft);
  color: #4d3930;
  font-size: 0.74rem;
  font-weight: 800;
  position: sticky;
  top: 0;
  z-index: 2;
}
.dashboard-table a {
  color: var(--app-primary);
  font-weight: 700;
  text-decoration: none;
}
.dashboard-table a:hover {
  color: var(--app-primary-dark);
  text-decoration: underline;
}
.dashboard-vendor-link {
  color: var(--app-text) !important;
  font-weight: 800 !important;
}
.dashboard-timeline {
  display: flex;
  flex-direction: column;
}
.dashboard-timeline-item {
  position: relative;
  display: grid;
  grid-template-columns: 14px minmax(0, 1fr);
  gap: 0.8rem;
  padding: 0.9rem 1rem;
  border-bottom: 1px solid var(--app-border-soft);
}
.dashboard-timeline-item:last-child {
  border-bottom: 0;
}
.dashboard-timeline-dot {
  width: 0.58rem;
  height: 0.58rem;
  border-radius: 50%;
  margin-top: 0.42rem;
  box-shadow: 0 0 0 4px #fbf1eb;
}
.dashboard-log-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-top: 0.45rem;
}
.dashboard-log-stats span {
  display: inline-flex;
  padding: 0.22rem 0.42rem;
  border: 1px solid var(--app-border-soft);
  border-radius: 4px;
  background: #f8fafc;
  color: #475569;
  font-size: 0.72rem;
  font-weight: 700;
}
.dashboard-log-error {
  margin-top: 0.45rem;
  color: var(--app-danger);
  font-size: 0.75rem;
  font-weight: 700;
}

/* Vendors */
.vendors-page {
  color: var(--app-text);
  padding-top: 1.35rem !important;
}
.vendors-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: 1.25rem;
}
.vendors-header h1 {
  font-size: 1.72rem;
  line-height: 1.12;
  font-weight: 800;
  letter-spacing: 0;
}
.vendors-header-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.vendors-kpis {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.vendors-toolbar {
  padding-bottom: 1rem;
}
.vendors-result-count {
  color: var(--app-muted);
  font-size: 0.82rem;
  font-weight: 700;
  min-height: 2.25rem;
  display: inline-flex;
  align-items: center;
}
.vendors-table-card {
  overflow: hidden;
}
.vendors-table-scroll {
  max-height: 62vh;
}
.vendors-table {
  border-collapse: separate;
  border-spacing: 0;
}
.vendors-table th,
.vendors-table td {
  vertical-align: middle;
  font-size: 0.84rem;
  padding: 0.72rem 0.85rem;
  border-color: var(--app-border-soft);
  border-right: 1px solid var(--app-border-soft);
}
.vendors-table th:last-child,
.vendors-table td:last-child {
  border-right: 0;
}
.vendors-table thead th {
  background: #f8fafc;
  color: #334155;
  font-size: 0.74rem;
  font-weight: 800;
  position: sticky;
  top: 0;
  z-index: 2;
  white-space: nowrap;
}
.vendors-table tbody tr {
  background: #ffffff;
  border-left: 3px solid transparent;
}
.vendors-table tbody tr:hover {
  background: #f8fbff;
}
.vendor-row-success td:first-child { border-left: 3px solid var(--app-success); }
.vendor-row-failure td:first-child { border-left: 3px solid var(--app-danger); }
.vendor-row-partial td:first-child,
.vendor-row-running td:first-child { border-left: 3px solid var(--app-warning); }
.vendor-row-none td:first-child { border-left: 3px solid #94a3b8; }
.vendors-feed-badge {
  border: 1px solid var(--app-border);
  color: #334155 !important;
}
.vendors-products-main {
  color: var(--app-text);
  font-weight: 700;
}
.vendors-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.35rem;
}
.vendors-actions .btn {
  display: inline-flex;
  align-items: center;
  gap: 0.32rem;
  min-height: 2rem;
  border-radius: 4px;
}
.sortable-th {
  cursor: pointer;
  user-select: none;
}
.sortable-th:hover {
  background-color: #eef4ff !important;
}
.sortable-th.active .sort-icon {
  opacity: 1;
}
.modal-json-output {
  min-height: 240px;
  white-space: pre-wrap;
  font-size: 0.8rem;
}

/* Settings */
.settings-page {
  color: var(--app-text);
  padding-top: 1.35rem !important;
}
.settings-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: 1.25rem;
}
.settings-header h1 {
  font-size: 1.72rem;
  line-height: 1.12;
  font-weight: 800;
  letter-spacing: 0;
}
.settings-header-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.settings-kpis {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.settings-panel {
  overflow: hidden;
}
.settings-panel .card-body {
  padding: 1.15rem;
}
.settings-schedule-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}
.settings-schedule-item,
.settings-section {
  background: #f8fafc;
  border: 1px solid var(--app-border-soft);
  border-radius: 8px;
  padding: 1rem;
}
.settings-switch {
  min-height: 1.6rem;
}
.settings-switch .form-check-input {
  width: 2.55em;
  height: 1.28em;
  margin-top: 0.12em;
}
.settings-switch .form-check-label {
  color: var(--app-text);
  font-weight: 800;
}
.settings-help-text {
  color: var(--app-muted);
  font-size: 0.76rem;
  margin-top: 0.25rem;
}
.settings-form-footer {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  flex-wrap: wrap;
  justify-content: flex-end;
  margin-top: 1rem;
}
.settings-warning {
  margin-right: auto;
  color: #92400e;
  background: #fff7ed;
  border: 1px solid #fed7aa;
  border-radius: 6px;
  padding: 0.45rem 0.65rem;
  font-size: 0.78rem;
  font-weight: 700;
}
.settings-feedback {
  min-width: 220px;
  max-width: 360px;
  padding: 0.45rem 0.65rem;
  margin: 0;
  font-size: 0.78rem;
}
.settings-azure-row {
  display: flex;
  gap: 0.5rem;
}
.settings-azure-row .btn {
  flex: 0 0 auto;
}
.settings-diagnostic,
.settings-sample-output {
  display: none;
  margin-top: 0.75rem;
}
.settings-sample-output {
  padding: 0.75rem;
  background: #f8fafc;
  border: 1px solid var(--app-border-soft);
  border-radius: 8px;
}
.settings-toolbar {
  padding-bottom: 1rem;
}
.settings-vendor-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.15rem;
}
.settings-vendor-card {
  overflow: hidden;
}
.settings-vendor-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}
.settings-vendor-title {
  color: var(--app-text);
  font-size: 1rem;
  font-weight: 800;
  line-height: 1.2;
  margin: 0;
}
.settings-vendor-meta {
  color: var(--app-muted);
  font-size: 0.76rem;
  margin-top: 0.2rem;
}
.settings-vendor-badges {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 0.4rem;
}
.settings-vendor-body {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}
.settings-section-title {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  color: #334155;
  font-size: 0.78rem;
  font-weight: 850;
  text-transform: uppercase;
  margin-bottom: 0.8rem;
}
.settings-section-title .bi {
  color: var(--app-primary);
}
.settings-section-accent {
  background: #fbf8ff;
  border-color: #e9d5ff;
}
.settings-switch-column {
  display: flex;
  align-items: flex-end;
  padding-bottom: 0.42rem;
}
.settings-vendor-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  flex-wrap: wrap;
}
.settings-vendor-lastsync {
  color: var(--app-muted);
  font-size: 0.78rem;
}
.settings-vendor-save {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.55rem;
  flex-wrap: wrap;
  margin-left: auto;
}

/* Mapping pages */
.mapping-page {
  color: var(--app-text);
  padding-top: 1.35rem !important;
}
.mapping-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: 1.25rem;
}
.mapping-header h1 {
  font-size: 1.72rem;
  line-height: 1.12;
  font-weight: 800;
  letter-spacing: 0;
}
.mapping-header-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.6rem;
  flex-wrap: wrap;
}
.mapping-vendor-select {
  min-width: 240px;
}
.mapping-toolbar {
  padding-bottom: 1rem;
}
.mapping-progress {
  align-items: center;
  gap: 1rem;
}
.mapping-progress-track {
  height: 8px;
}
.mapping-progress-bar {
  width: 0%;
}
.mapping-card,
.mapping-subcard {
  overflow: hidden;
}
.mapping-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}
.mapping-actions,
.mapping-tier-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.mapping-bulk-select {
  min-width: 220px;
}
.mapping-table-scroll {
  max-height: 62vh;
}
.mapping-table th,
.mapping-table td,
.color-mapping-table th,
.color-mapping-table td,
.size-mapping-table th,
.size-mapping-table td,
.marking-map-table th,
.marking-map-table td,
.tier-mult-table th,
.tier-mult-table td {
  vertical-align: middle;
  font-size: 0.84rem;
  padding: 0.64rem 0.75rem;
  border-color: var(--app-border-soft);
}
.mapping-table thead th,
.color-mapping-table thead th,
.size-mapping-table thead th,
.marking-map-table thead th,
.tier-mult-table thead th,
.sticky-header th {
  position: sticky;
  top: 0;
  z-index: 5;
  background: #f8fafc;
  color: #334155;
  font-size: 0.74rem;
  font-weight: 800;
}
.mapping-table select,
.color-mapping-table select,
.size-mapping-table select,
.marking-map-table select {
  min-width: 240px;
}
.mapping-key,
.color-key,
.size-key,
.marking-key,
.marking-hint {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mapping-key,
.size-key {
  max-width: 420px;
}
.color-key {
  max-width: 380px;
}
.marking-key {
  max-width: 240px;
}
.marking-hint {
  max-width: 480px;
}
.mapping-count-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.mapping-split-grid,
.mapping-tier-grid {
  display: grid;
  gap: 1rem;
}
.mapping-split-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.mapping-tier-grid {
  grid-template-columns: minmax(0, 2fr) minmax(320px, 1fr);
}
.mapping-rule-groups {
  max-height: 62vh;
  overflow: auto;
}
#ruleRows {
  display: none;
}
.tier-mult-table input {
  min-width: 90px;
}
.type-group-card.collapsed .type-group-body {
  display: none;
}
.type-group-toggle {
  min-width: 92px;
}
.mapping-col-22 { width: 22%; }
.mapping-col-25 { width: 25%; }
.mapping-col-35 { width: 35%; }
.mapping-col-38 { width: 38%; }
.mapping-col-45 { width: 45%; }
.mapping-col-48 { width: 48%; }

/* Preview workflow pages */
.preview-page { color: var(--app-text); }
.preview-sticky,
.marking-preview-sticky,
.image-refresh-preview-sticky {
  position: sticky;
  top: 50px;
  z-index: 20;
  background: #f8fafc;
  border-bottom: 1px solid var(--app-border);
}
.preview-table th,
.preview-table td,
.marking-preview-table th,
.marking-preview-table td,
.image-refresh-preview-table th,
.image-refresh-preview-table td {
  vertical-align: middle;
  font-size: 0.85rem;
}
.preview-table thead th,
.marking-preview-table thead th,
.image-refresh-preview-table thead th {
  position: sticky;
  top: 0;
  z-index: 10;
  background: #f8fafc;
}
.preview-table .cell-wrap,
.marking-preview-table .cell-wrap,
.image-refresh-preview-table .cell-wrap {
  white-space: normal;
}
.preview-thumb {
  height: 48px;
  width: auto;
  object-fit: contain;
  border: 1px solid var(--app-border);
  padding: 2px;
  background: #fff;
  border-radius: 4px;
  cursor: pointer;
}
.preview-modal-list {
  max-height: 50vh;
  overflow: auto;
}
.preview-modal-thumb {
  height: 48px;
  width: auto;
  object-fit: contain;
  border: 1px solid var(--app-border);
  padding: 2px;
  background: #fff;
  border-radius: 4px;
}
.swatch-chip {
  display: inline-block;
  width: 14px;
  height: 14px;
  border-radius: 3px;
  border: 1px solid var(--app-border);
  background: #fff;
  margin-right: 8px;
  vertical-align: middle;
}
.color-map-table th,
.color-map-table td,
.size-map-table th,
.size-map-table td {
  vertical-align: middle;
}
.color-map-table select,
.size-map-table select {
  min-width: 240px;
}
.mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}
.collapse-chevron { transition: transform 0.2s; }
.collapsed .collapse-chevron { transform: rotate(-90deg); }
.marking-preview-detail-row { display: none; background: #fafbfc; }
.marking-preview-detail-card { min-width: 220px; }
.marking-preview-detail-card.is-api { border-color: #f0ad4e !important; background: #fff9e9; }
.preview-table-scroll { max-height: 70vh; overflow: auto; }
.preview-map-scroll { max-height: 35vh; overflow: auto; }
.modal-preview-image { max-width: 100%; max-height: 75vh; height: auto; }
.progress-complete { width: 100%; }
.w-4 { width: 4%; }
.w-9 { width: 9%; }
.w-10 { width: 10%; }
.w-11 { width: 11%; }
.w-12 { width: 12%; }
.w-13 { width: 13%; }
.w-14 { width: 14%; }
.w-16 { width: 16%; }
.w-18 { width: 18%; }
.w-35 { width: 35%; }
.w-40 { width: 40%; }
.w-44 { width: 44%; }
.w-45 { width: 45%; }
.w-55 { width: 55%; }

/* Maintenance */
.maintenance-page {
  color: var(--app-text);
  padding-top: 1.35rem !important;
}
.maintenance-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: 1.25rem;
}
.maintenance-header h1 {
  font-size: 1.72rem;
  line-height: 1.12;
  font-weight: 800;
  letter-spacing: 0;
}
.maintenance-header-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.maintenance-kpis {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.maintenance-panel {
  overflow: hidden;
}
.maintenance-panel .card-body {
  padding: 1.15rem;
}
.maintenance-note {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  color: #475569;
  background: #f8fafc;
  border: 1px solid var(--app-border-soft);
  border-radius: 8px;
  padding: 0.75rem 0.85rem;
  font-size: 0.86rem;
}
.maintenance-note .bi {
  color: var(--app-primary);
  margin-top: 0.1rem;
}
.maintenance-health-card {
  border-radius: 8px;
  box-shadow: none;
}
.maintenance-health-card .card-title {
  color: var(--app-text);
  font-weight: 800;
  font-size: 0.9rem;
}
.maintenance-health-card .card-title .bi {
  color: var(--app-primary);
}
.maintenance-health-card .card-body {
  padding: 1rem;
}

/* WooCommerce native variation gallery migration */
.variation-gallery-migration-page { color: var(--app-text); }
.vg-environment-item {
  height: 100%;
  border: 1px solid var(--app-border-soft);
  border-left: 4px solid #dc3545;
  border-radius: 8px;
  background: #fff;
  padding: 0.75rem 0.85rem;
}
.vg-environment-item.is-good { border-left-color: #198754; }
.variation-gallery-table-scroll { max-height: 58vh; overflow: auto; }
.variation-gallery-table th,
.variation-gallery-table td { vertical-align: middle; font-size: 0.84rem; }
.variation-gallery-table thead th {
  position: sticky;
  top: 0;
  z-index: 5;
  background: #f8fafc;
}
.gallery-id-cell { min-width: 220px; max-width: 420px; white-space: normal; }
.vg-total {
  border: 1px solid var(--app-border-soft);
  border-radius: 8px;
  padding: 0.55rem 0.7rem;
  background: #f8fafc;
  text-transform: capitalize;
}
.vg-total strong { display: block; font-size: 1.15rem; }
.maintenance-health-card .btn {
  margin-right: 0.25rem;
  margin-bottom: 0.25rem;
}
.maintenance-panel .card-footer {
  flex-wrap: wrap;
}
#cleanupLog {
  max-height: 350px;
  overflow-y: auto;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 0.82rem;
  background: #111827;
  color: #e5e7eb;
  padding: 0.75rem;
  border-radius: 6px;
}
#cleanupLog .log-entry { margin-bottom: 2px; }
#cleanupLog .log-success { color: #4ade80; }
#cleanupLog .log-error { color: #f87171; }
#cleanupLog .log-info { color: #60a5fa; }
#cleanupLog .log-warn { color: #fbbf24; }
#analyzeTable th { position: sticky; top: 0; background: #fff; z-index: 1; }
.hc-card { transition: opacity 0.2s; }
.hc-card.loading { opacity: 0.6; }
.hc-badge-ok { background-color: #198754; }
.hc-badge-warn { background-color: #fd7e14; }
.hc-badge-danger { background-color: #dc3545; }
.hc-result { font-size: 0.9rem; }
.hc-cleanup-status { font-size: 0.85rem; margin-top: 0.5rem; }
.maintenance-table-scroll { max-height: 400px; overflow-y: auto; }
.maintenance-table-scroll-sm { max-height: 300px; overflow-y: auto; }
.maintenance-progress { height: 20px; }
.maintenance-progress-bar { width: 0%; }
.maintenance-mini-table { font-size: 0.8rem; }
.status-dot {
  width: 8px;
  height: 8px;
  vertical-align: middle;
}

@media (max-width: 1199.98px) {
  .kpi-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .products-page-header { align-items: flex-start; flex-direction: column; }
  .products-top-totals { justify-content: flex-start; }
  .dashboard-command { flex-direction: column; }
  .dashboard-command-metrics { min-width: 0; }
  .vendors-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .settings-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .settings-vendor-grid { grid-template-columns: 1fr; }
  .mapping-split-grid,
  .mapping-tier-grid { grid-template-columns: 1fr; }
  .maintenance-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 767.98px) {
  .login-body { padding: 1rem; }
  .login-card { padding: 1.35rem; }
  .products-shell { margin-inline: 0; }
  .filter-section { padding-inline: 0.85rem; }
  .products-page-header { padding-inline: 0.85rem; }
  .kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; }
  .kpi-card { padding: 0.8rem; gap: 0.7rem; }
  .kpi-icon { width: 2.65rem; height: 2.65rem; }
  .products-actions { justify-content: flex-start; }
  .products-actions-stack { align-items: flex-start; }
  .products-action-note { text-align: left; }
  .dashboard-header { align-items: flex-start; flex-direction: column; padding-inline: 0.85rem; }
  .dashboard-header-actions { justify-content: flex-start; }
  .dashboard-command { padding: 0.95rem; }
  .dashboard-command-value { font-size: 2rem; }
  .dashboard-command-metrics { grid-template-columns: 1fr; }
  .vendors-header { align-items: flex-start; flex-direction: column; padding-inline: 0.85rem; }
  .vendors-header-actions { justify-content: flex-start; }
  .vendors-kpis { grid-template-columns: 1fr; }
  .vendors-actions { justify-content: flex-start; }
  .vendors-actions .btn span { display: none; }
  .settings-header { align-items: flex-start; flex-direction: column; padding-inline: 0.85rem; }
  .settings-header-actions { justify-content: flex-start; }
  .settings-kpis { grid-template-columns: 1fr; }
  .settings-schedule-grid { grid-template-columns: 1fr; }
  .settings-form-footer { justify-content: flex-start; }
  .settings-warning { margin-right: 0; }
  .settings-azure-row { flex-direction: column; }
  .settings-vendor-card-header { flex-direction: column; }
  .settings-vendor-badges { justify-content: flex-start; }
  .settings-vendor-save { justify-content: flex-start; margin-left: 0; width: 100%; }
  .settings-feedback { max-width: none; width: 100%; }
  .mapping-header { align-items: flex-start; flex-direction: column; padding-inline: 0.85rem; }
  .mapping-header-actions { justify-content: flex-start; width: 100%; }
  .mapping-vendor-select { min-width: 0; width: 100%; }
  .mapping-actions,
  .mapping-tier-actions { justify-content: flex-start; }
  .mapping-bulk-select { min-width: 0; width: 100%; }
  .maintenance-header { align-items: flex-start; flex-direction: column; padding-inline: 0.85rem; }
  .maintenance-header-actions { justify-content: flex-start; }
  .maintenance-kpis { grid-template-columns: 1fr; }
}