/* Lavender 2027 | UI-04 | Existing pages visual migration, wave 1
   Loaded AFTER UI-02 + UI-03. No JS, navigation, data, auth or business logic.
   Only four opted-in layout roots are targeted. CSS-first, reversible migration.
   Preserve action semantics: do not recolor destructive, approve/reject or pay actions.
*/

/* Shared reading comfort for actual pages, without changing the layout components. */
.lvds-portal-host[data-lvds-portal="admin"] .lavender-admin-main,
.lvds-portal-host[data-lvds-portal="b2b"] > main,
.lvds-portal-host[data-lvds-portal="b2c"] .business-content {
  color: var(--lvds-ink);
  font-family: var(--lvds-font);
  line-height: 1.65;
}
.lvds-portal-host[data-lvds-portal="admin"] .lavender-admin-main :where(h1, h2),
.lvds-portal-host[data-lvds-portal="b2b"] > main :where(h1, h2),
.lvds-portal-host[data-lvds-portal="b2c"] .business-content :where(h1, h2) {
  color: var(--lvds-ink);
  line-height: 1.4;
  text-wrap: balance;
}

/* Admin page headers and dashboard cards already exist in the source. */
.lvds-portal-host[data-lvds-portal="admin"] .lv-admin-page {
  max-width: 1600px;
  min-width: 0;
  margin-inline: auto;
}
.lvds-portal-host[data-lvds-portal="admin"] .lv-admin-page-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px 24px;
  margin-block-end: 22px;
}
.lvds-portal-host[data-lvds-portal="admin"] .lv-admin-page-header h1 {
  font-size: clamp(22px, 2.1vw, 30px);
  font-weight: 800;
  letter-spacing: -.035em;
  margin-block: 0 5px;
}
.lvds-portal-host[data-lvds-portal="admin"] .lv-admin-page-header p,
.lvds-portal-host[data-lvds-portal="admin"] .lv-admin-eyebrow {
  color: var(--lvds-muted);
}
.lvds-portal-host[data-lvds-portal="admin"] :where(.lv-admin-card, .lv-admin-stat) {
  min-width: 0;
  border: 1px solid var(--lvds-line);
  border-radius: var(--lvds-radius);
  background: var(--lvds-surface);
  box-shadow: var(--lvds-shadow-sm);
}
.lvds-portal-host[data-lvds-portal="admin"] .lv-admin-card {
  transition: border-color 160ms ease, box-shadow 160ms ease;
}
.lvds-portal-host[data-lvds-portal="admin"] .lv-admin-card:hover {
  border-color: var(--lvds-primary-border);
  box-shadow: var(--lvds-shadow);
}
.lvds-portal-host[data-lvds-portal="admin"] .lv-admin-stat > span,
.lvds-portal-host[data-lvds-portal="admin"] .lv-admin-stat > small {
  color: var(--lvds-muted);
}
.lvds-portal-host[data-lvds-portal="admin"] .lv-admin-stat > strong {
  color: var(--lvds-ink);
  font-variant-numeric: tabular-nums;
}
.lvds-portal-host[data-lvds-portal="admin"] .lv-admin-toolbar {
  gap: 10px;
  flex-wrap: wrap;
}
.lvds-portal-host[data-lvds-portal="admin"] .lv-admin-empty,
.lvds-portal-host[data-lvds-portal="admin"] .lv-admin-feedback {
  border-radius: var(--lvds-radius-sm);
}

/* Existing internal tables: update surfaces only; do not change display:table
   or add overflow to elements that contain popovers and dropdowns. */
.lvds-portal-host[data-lvds-portal="admin"] .lavender-admin-main table,
.lvds-portal-host[data-lvds-portal="b2b"] > main table,
.lvds-portal-host[data-lvds-portal="b2c"] .business-content table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 13px;
  color: var(--lvds-ink);
}
.lvds-portal-host[data-lvds-portal="admin"] .lavender-admin-main th,
.lvds-portal-host[data-lvds-portal="b2b"] > main th,
.lvds-portal-host[data-lvds-portal="b2c"] .business-content th {
  background: var(--lvds-primary-soft);
  color: var(--lvds-ink);
  font-weight: 800;
  text-align: start;
  border-block-end: 1px solid var(--lvds-line);
  padding: 12px 14px;
}
.lvds-portal-host[data-lvds-portal="admin"] .lavender-admin-main td,
.lvds-portal-host[data-lvds-portal="b2b"] > main td,
.lvds-portal-host[data-lvds-portal="b2c"] .business-content td {
  border-block-end: 1px solid var(--lvds-line);
  padding: 11px 14px;
  vertical-align: middle;
}
.lvds-portal-host[data-lvds-portal="admin"] .lavender-admin-main tbody tr:hover,
.lvds-portal-host[data-lvds-portal="b2b"] > main tbody tr:hover,
.lvds-portal-host[data-lvds-portal="b2c"] .business-content tbody tr:hover {
  background: var(--lvds-primary-soft);
}

/* Actual form controls: consistent geometry and focus; avoid changing submit
   buttons' colors, states or any domain-specific payment/destructive actions. */
.lvds-portal-host[data-lvds-portal="admin"] .lavender-admin-main :where(input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), select, textarea),
.lvds-portal-host[data-lvds-portal="b2b"] > main :where(input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), select, textarea),
.lvds-portal-host[data-lvds-portal="b2c"] .business-content :where(input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), select, textarea) {
  max-width: 100%;
  font: inherit;
  color: var(--lvds-ink);
  background: var(--lvds-surface);
  border: 1px solid var(--lvds-line);
  border-radius: var(--lvds-radius-sm);
  min-height: 40px;
  padding: 9px 12px;
  transition: border-color 160ms ease, box-shadow 160ms ease;
}
.lvds-portal-host[data-lvds-portal="admin"] .lavender-admin-main :where(input, select, textarea):focus-visible,
.lvds-portal-host[data-lvds-portal="b2b"] > main :where(input, select, textarea):focus-visible,
.lvds-portal-host[data-lvds-portal="b2c"] .business-content :where(input, select, textarea):focus-visible {
  outline: 2px solid transparent;
  border-color: var(--lvds-primary);
  box-shadow: var(--lvds-focus);
}
.lvds-portal-host[data-lvds-portal="admin"] .lavender-admin-main :where(button, [role="button"]),
.lvds-portal-host[data-lvds-portal="b2b"] > main :where(button, [role="button"]),
.lvds-portal-host[data-lvds-portal="b2c"] .business-content :where(button, [role="button"]) {
  border-radius: var(--lvds-radius-sm);
  font-family: var(--lvds-font);
}
.lvds-portal-host :where(button, a, input, select, textarea):focus-visible {
  outline-offset: 2px;
}
/* Explicit future opt-in only; do not disable resize on all textarea fields. */
.lvds-portal-host textarea.lvds-fixed-description { resize: none; }

/* Merchant workspace: maintain existing actions and account-scoping. */
.lvds-portal-host[data-lvds-portal="b2c"] .business-content :where(.section-card, .dashboard-card, .metric-card) {
  background: var(--lvds-surface);
  border: 1px solid var(--lvds-line);
  border-radius: var(--lvds-radius);
  box-shadow: var(--lvds-shadow-sm);
}
.lvds-portal-host[data-lvds-portal="b2c"] .business-topbar {
  min-height: 70px;
}

/* Customer remains a storefront, not a dashboard. Keep cart, checkout and
   notification mechanics exactly as they are; styling only known classes. */
.lvds-portal-host[data-lvds-portal="customer"] :where(.product-card, .hero-product-card, .order-card, .checkout-card, .payment-card, .payment-summary) {
  border-radius: var(--lvds-radius-lg);
  border-color: var(--lvds-line);
  box-shadow: var(--lvds-shadow-sm);
}
.lvds-portal-host[data-lvds-portal="customer"] .product-card {
  transition: box-shadow 180ms ease, transform 180ms ease;
}
.lvds-portal-host[data-lvds-portal="customer"] .product-card:hover {
  box-shadow: var(--lvds-shadow);
  transform: translateY(-2px);
}
.lvds-portal-host[data-lvds-portal="customer"] :where(.catalog-heading, .orders-heading, .order-details-header) h1,
.lvds-portal-host[data-lvds-portal="customer"] .catalog-heading h2 {
  color: var(--lvds-ink);
  line-height: 1.4;
}
.lvds-portal-host[data-lvds-portal="customer"] .customer-footer {
  border-block-start: 1px solid var(--lvds-line);
}

@media (max-width: 760px) {
  .lvds-portal-host[data-lvds-portal="admin"] .lv-admin-page-header {
    align-items: stretch;
    flex-direction: column;
  }
  .lvds-portal-host[data-lvds-portal="admin"] .lv-admin-toolbar {
    align-items: stretch;
  }
  .lvds-portal-host[data-lvds-portal="admin"] .lv-admin-toolbar :where(.lv-admin-search,.lv-admin-filter) {
    min-width: 0;
    max-width: 100%;
  }
}
@media (prefers-reduced-motion: reduce) {
  .lvds-portal-host .lv-admin-card,
  .lvds-portal-host .product-card,
  .lvds-portal-host :where(input,select,textarea) { transition: none; }
  .lvds-portal-host .product-card:hover { transform: none; }
}