/* =============================================================================
   AlchemOS Positive — Application CSS
   Global styles, layout helpers, scope badges, page utilities
   Depends on: joy-tokens.css (must load first)
   ============================================================================= */

/* ═══════════════════════════════════════════════════════════════════════════════
   Browser autofill — MudBlazor label fix
   Browsers suppress the `input` DOM event on password autofill for security
   reasons, so Blazor's binding never fires and MudBlazor leaves the label
   un-floated, overlapping the autofilled text. We use a 1ms CSS animation
   on :-webkit-autofill to get a reliable JS hook and toggle mud-shrink
   directly. See helpers.js `onAutoFillStart` handler.
   ═══════════════════════════════════════════════════════════════════════════════ */
@keyframes onAutoFillStart { from {} to {} }
@keyframes onAutoFillStop  { from {} to {} }

input:-webkit-autofill {
  animation-name: onAutoFillStart;
  animation-duration: 1ms;
  animation-fill-mode: both;
}
input:not(:-webkit-autofill) {
  animation-name: onAutoFillStop;
  animation-duration: 1ms;
  animation-fill-mode: both;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   Global font application
   ═══════════════════════════════════════════════════════════════════════════════ */
body {
  font-family: var(--font-sans);
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  line-height: var(--leading-body);
  color: var(--color-text-primary);
  background-color: var(--color-bg-app);
}

/* Typography resets — background must NOT be set here;
   MudBlazor adds .mud-typography to every MudText element, so a
   background-color on this selector creates visible fill boxes inside
   any gradient hero / tinted surface. */
.mud-typography {
  font-family: var(--font-sans);
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  line-height: var(--leading-body);
  color: var(--color-text-primary);
}

/* ═══════════════════════════════════════════════════════════════════════════════
   Scope / ESG Badge Colors — semantic token mapping
   Scope 1 = Direct (combustion)  → success green
   Scope 2 = Indirect (energy)    → info sky-blue
   Scope 3 = Value chain          → warning amber
   ═══════════════════════════════════════════════════════════════════════════════ */
:root {
  --scope-1-color: var(--color-success-solid);
  --scope-2-color: var(--color-info-solid);
  --scope-3-color: var(--color-warning-solid);
}

.scope-badge-1 { background-color: var(--color-success-bg) !important; color: var(--color-success-text) !important; }
.scope-badge-2 { background-color: var(--color-info-bg) !important;    color: var(--color-info-text) !important; }
.scope-badge-3 { background-color: var(--color-warning-bg) !important; color: var(--color-warning-text) !important; }

/* ═══════════════════════════════════════════════════════════════════════════════
   Status Indicators
   ═══════════════════════════════════════════════════════════════════════════════ */
.status-pending  { color: var(--color-warning-text); }
.status-approved { color: var(--color-success-text); }
.status-rejected { color: var(--color-error-text); }
.status-draft    { color: var(--color-text-secondary); }

/* ESG metric trend (down = good for emissions = green, up = bad = red) */
.trend-up      { color: var(--color-error-text); }
.trend-down    { color: var(--color-success-text); }
.trend-neutral { color: var(--color-text-secondary); }

/* ═══════════════════════════════════════════════════════════════════════════════
   KPI Card
   ═══════════════════════════════════════════════════════════════════════════════ */
.kpi-card:hover {
  transform: translateY(-2px);
  transition: transform var(--transition-interactive);
}

/* ═══════════════════════════════════════════════════════════════════════════════
   Chart Container
   ═══════════════════════════════════════════════════════════════════════════════ */
.chart-container {
  position: relative;
  width: 100%;
  min-height: 300px;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   Welcome / Hero Banner — Spring Morning
   ═══════════════════════════════════════════════════════════════════════════════ */
.welcome-banner {
  background: linear-gradient(
    135deg,
    #E8F5F2 0%,   /* morning mist — teal-1 lightened */
    #EFF7EE 35%,  /* fresh leaves — spring moss tint */
    #F5F0FA 70%,  /* lavender haze — soft blossom */
    #FBF7F0 100%  /* sunrise warmth — warm cream */
  );
  border-radius: var(--radius-xl);
  padding: var(--space-content);
  border: 1px solid var(--color-border-subtle);
  color: var(--color-text-primary);
}

/* Spring hero banner — larger variant with min-height for page headers */
.spring-hero {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-xl);
  padding: var(--space-8) var(--space-content);
  background: linear-gradient(
    135deg,
    #E8F5F2 0%,
    #EFF7EE 35%,
    #F5F0FA 70%,
    #FBF7F0 100%
  );
  border: 1px solid var(--color-border-subtle);
  min-height: 100px;
  display: flex;
  align-items: center;
  animation: fadeIn var(--transition-reveal) ease-out both;
}

/* Dark mode: replace hardcoded light gradient with dark surface tones */
[data-theme="dark"] .spring-hero {
  background: linear-gradient(
    135deg,
    #0D1F1D 0%,
    #111E2B 35%,
    var(--color-bg-subtle)  70%,
    var(--color-bg-component) 100%
  );
}

/* Spring hero typography helpers — used on all pages (scoped per §7 style contract) */
/* Typo.overline drives font-shape; this class adds only color + spacing */
.dash-hero__eyebrow {
  color: var(--color-accent-text);
  margin: 0 0 var(--space-2) 0;
}

/* Typo.h5 drives font-shape; this class adds only color + spacing */
.dash-hero__title {
  color: var(--color-text-primary);
  margin: 0 0 var(--space-2) 0;
}

/* Typo.subtitle1 drives font-shape; this class adds only color + max-width */
.dash-hero__sub {
  color: var(--color-text-secondary);
  margin: 0;
  max-width: 560px;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   Spring Hero Inner Layout (§14.2 — both portals)
   Flex row: left text block + right actions/icon
   ═══════════════════════════════════════════════════════════════════════════════ */
.spring-hero__body  { display: flex; align-items: center; justify-content: space-between; gap: var(--space-6); width: 100%; }
.spring-hero__left  { flex: 1; min-width: 0; }
.spring-hero__right { display: flex; align-items: center; gap: var(--space-3); flex-shrink: 0; flex-wrap: wrap; }
@media (max-width: 599px) {
  .spring-hero__body  { flex-direction: column; align-items: flex-start; }
  .spring-hero__right { width: 100%; flex-direction: column; align-items: stretch; gap: 8px; }
  .spring-hero__right .mud-tooltip-root { display: block; width: 100%; }
  .spring-hero__right .mud-tooltip-activator { display: block; width: 100%; }
  .spring-hero__right .mud-button-root { width: 100% !important; justify-content: center !important; }
}

/* ═══════════════════════════════════════════════════════════════════════════════
   Page-level KPI card (§14.3)
   Used inside MudItem xs=12 sm=6 md=6 lg=3
   ═══════════════════════════════════════════════════════════════════════════════ */
.page-kpi-card {
  height: 100%;
  box-sizing: border-box;
  transition: transform var(--transition-interactive);
}
.page-kpi-card:hover { transform: translateY(-2px); }

/* ═══════════════════════════════════════════════════════════════════════════════
   Page-level loading and empty state (§14.5)
   ═══════════════════════════════════════════════════════════════════════════════ */
.page-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-8);
}
.page-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 48px var(--space-content);
  color: var(--color-text-secondary);
}

/* Spring page header — subtle tinted section heading */
.spring-page-header {
  padding: var(--space-6) 0 var(--space-4);
  border-bottom: 1px solid var(--color-border-subtle);
  margin-bottom: var(--space-6);
}

/* Accent card — white card with teal accent border-top */
.spring-card {
  background: var(--color-surface-1);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-lg);
  border-top: 3px solid var(--color-accent);
  padding: var(--space-content);
  transition: transform var(--transition-interactive);
}
.spring-card:hover {
  transform: translateY(-2px);
}

/* Spring stat chip — small pill badges */
.spring-chip-moss   { background: var(--color-accent-subtle); color: var(--color-accent);     border: 1px solid var(--teal-6);              border-radius: 999px; padding: 3px 10px; font-size: var(--text-xs); font-weight: 500; }
.spring-chip-sky    { background: var(--color-info-bg);       color: var(--color-info-text);  border: 1px solid var(--color-info-border);    border-radius: 999px; padding: 3px 10px; font-size: var(--text-xs); font-weight: 500; }
.spring-chip-rose   { background: var(--color-error-bg);      color: var(--color-error-text); border: 1px solid var(--color-error-border);   border-radius: 999px; padding: 3px 10px; font-size: var(--text-xs); font-weight: 500; }
.spring-chip-violet { background: var(--violet-3);            color: var(--violet-11);        border: 1px solid var(--violet-6);             border-radius: 999px; padding: 3px 10px; font-size: var(--text-xs); font-weight: 500; }
.spring-chip-amber  { background: var(--color-warning-bg);    color: var(--color-warning-text); border: 1px solid var(--color-warning-border); border-radius: 999px; padding: 3px 10px; font-size: var(--text-xs); font-weight: 500; }

/* ═══════════════════════════════════════════════════════════════════════════════
   Quick Action Buttons
   ═══════════════════════════════════════════════════════════════════════════════ */
.quick-action-btn {
  height: 80px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   Activity Feed
   ═══════════════════════════════════════════════════════════════════════════════ */
.activity-item {
  padding: 12px 0;
  border-bottom: 1px solid var(--color-border-subtle);
}
.activity-item:last-child {
  border-bottom: none;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   Empty State
   ═══════════════════════════════════════════════════════════════════════════════ */
.empty-state {
  text-align: center;
  padding: 48px 24px;
  color: var(--color-text-secondary);
}
.empty-state-icon {
  font-size: 64px;
  color: var(--color-border-default);
  margin-bottom: var(--space-4);
}

/* ═══════════════════════════════════════════════════════════════════════════════
   Loading Overlay
   ═══════════════════════════════════════════════════════════════════════════════ */
.loading-overlay {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(255, 255, 255, 0.90);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}
[data-theme="dark"] .loading-overlay {
  background: rgba(13, 17, 23, 0.90);
}

/* ═══════════════════════════════════════════════════════════════════════════════
   Breadcrumb
   ═══════════════════════════════════════════════════════════════════════════════ */
.breadcrumb-container {
  padding: 12px 0;
  margin-bottom: var(--space-4);
}

/* ═══════════════════════════════════════════════════════════════════════════════
   Sticky Action Bar (wizard footer, detail pane footer)
   ═══════════════════════════════════════════════════════════════════════════════ */
.action-bar-sticky {
  position: sticky;
  bottom: 0;
  z-index: 10;
  background-color: var(--color-surface-1);
  border-top: 1px solid var(--color-border-subtle);
  padding: var(--space-4) var(--space-content);
}

/* ═══════════════════════════════════════════════════════════════════════════════
   Layout Base Styles (mobile-first)
   Section 10.12 media queries layer on top of these base values
   ═══════════════════════════════════════════════════════════════════════════════ */

.layout-shell {
  display: flex;
  min-height: 100vh;
  background-color: var(--color-bg-app);
}

/* Sidebar: fixed position, hidden on mobile */
.layout-sidebar {
  width: var(--layout-sidebar-width);
  min-height: 100vh;
  background-color: var(--color-bg-subtle);
  border-right: 1px solid var(--color-border-subtle);
  position: fixed;
  left: 0;
  top: 0;
  overflow-y: auto;
  overflow-x: hidden;
  transition: width var(--transition-reveal);
  z-index: 200;
  display: none; /* mobile-first: hidden */
}

/* Main content area */
.layout-content {
  flex: 1;
  min-height: 100vh;
  overflow-y: auto;
  transition: margin-left var(--transition-reveal);
}

/* Content width cap + centering */
.layout-content-inner {
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
}

/* Page padding */
.page-content {
  padding: 16px; /* xs default; breakpoints increase */
}

/* List/master pane (archetypes 4, 6) */
.layout-list-pane {
  width: 100%;
  background-color: var(--color-bg-subtle);
  border-right: 1px solid var(--color-border-subtle);
  overflow-y: auto;
  flex-shrink: 0;
}

/* Detail pane */
.layout-detail-pane {
  flex: 1;
  background-color: var(--color-surface-1);
  overflow-y: auto;
  position: relative;
  transition: transform var(--transition-reveal);
}

/* Supporting / contextual pane (archetype 5) */
.layout-supporting {
  background-color: var(--color-surface-3);
  border-left: 1px solid var(--color-border-subtle);
  overflow-y: auto;
  position: sticky;
  top: 0;
  display: none; /* mobile: hidden */
}

/* Grid helpers */
.kpi-grid    { display: grid; gap: 16px; grid-template-columns: 1fr; }
.widget-grid { display: grid; gap: 16px; grid-template-columns: 1fr; }
.form-grid   { display: grid; gap: 16px; grid-template-columns: 1fr; }

/* Settings layout */
.settings-nav    { display: none; flex-direction: column; width: 200px; flex-shrink: 0; }
.settings-select { display: block; }
.settings-content { width: 100%; }

/* Wizard layout */
.wizard-content    { width: 100%; max-width: 100%; margin: 0 auto; }
.wizard-step-label { display: inline; }

/* Table column visibility (controlled by media query below) */
.table-col-hide-xs { }
.table-col-hide-sm { }

/* Form input control spacing */
.mud-input-control { margin-bottom: 16px; }

/* ═══════════════════════════════════════════════════════════════════════════════
   Responsive Breakpoints
   ═══════════════════════════════════════════════════════════════════════════════ */

/* sm: 600px+ */
@media (min-width: 600px) {
  .page-content { padding: var(--space-content); }
  .kpi-grid    { grid-template-columns: repeat(2, 1fr); }
  .widget-grid { grid-template-columns: repeat(2, 1fr); }
  /* form-grid stays 1fr at sm */
  /* detail pane hidden off-screen on xs/sm — slide in when active */
  .layout-detail-pane         { transform: translateX(100%); }
  .layout-detail-pane.active  { transform: translateX(0); }
}
/* xs: < 600px — detail pane starts off-screen */
@media (max-width: 599px) {
  .layout-detail-pane         { transform: translateX(100%); }
  .layout-detail-pane.active  { transform: translateX(0); }
  .layout-supporting          { display: none; }
  .settings-nav               { display: none; }
  .settings-select            { display: block; }
  .wizard-content             { padding: 16px; }
}

/* md: 960px+ — sidebar collapses to icon rail */
@media (min-width: 960px) {
  .layout-sidebar   { display: flex; flex-direction: column; width: var(--layout-sidebar-collapsed); }
  .layout-content   { margin-left: var(--layout-sidebar-collapsed); }
  .page-content     { padding: var(--space-8); }
  .kpi-grid         { grid-template-columns: repeat(2, 1fr); }
  .widget-grid      { grid-template-columns: repeat(3, 1fr); }
  .form-grid        { grid-template-columns: repeat(2, 1fr); }
  .settings-nav     { display: flex; }
  .settings-select  { display: none; }
  .settings-content { width: calc(100% - 232px); }
  /* Archetypes 4 & 6: list pane collapses to modal trigger at md */
  .layout-list-pane   { display: none; }
  .layout-detail-pane { width: 100%; }
  .layout-supporting  { display: none; }
}

/* lg: 1280px+ — sidebar expands to full width */
@media (min-width: 1280px) {
  .layout-sidebar       { width: var(--layout-sidebar-width); }
  .layout-content       { margin-left: var(--layout-sidebar-width); }
  /* Cap content width at lg so pages don't stretch edge-to-edge on 1440px monitors */
  .layout-content-inner { max-width: var(--layout-content-max); margin: 0 auto; }
  .page-content         { padding: var(--space-page); }
  .kpi-grid             { grid-template-columns: repeat(4, 1fr); }
  .widget-grid          { grid-template-columns: repeat(3, 1fr); }
  .form-grid            { grid-template-columns: repeat(2, 1fr); }
  /* Archetypes 4 & 6: side-by-side panes at lg */
  .layout-list-pane     { display: flex; width: var(--layout-list-pane-lg); }
  .layout-detail-pane   { flex: 1; transform: none; }        /* reset xs/sm translateX */
  .layout-supporting    { display: flex; width: var(--layout-supporting-pane-lg); }
  .settings-nav         { width: var(--layout-sidebar-width); }
  .settings-content     { max-width: var(--layout-settings-max); }
  .wizard-content       { max-width: var(--layout-wizard-max); }
}

/* xl: 1600px+ */
@media (min-width: 1600px) {
  .layout-list-pane     { width: var(--layout-list-pane-xl); }
  .layout-supporting    { width: var(--layout-supporting-pane-xl); }
  .wizard-content       { max-width: var(--layout-wizard-max); }
  .settings-content     { max-width: var(--layout-settings-max); }
  .kpi-grid             { grid-template-columns: repeat(4, 1fr); }
  .widget-grid          { grid-template-columns: repeat(4, 1fr); }  /* 4-across at xl */
}

/* Responsive table column hiding */
@media (max-width: 599px) {
  .table-col-hide-xs { display: none !important; }
  .table-col-hide-sm { display: none !important; }
  .wizard-step-label { display: none; }
  /* Import table: visible row separation on mobile stacked view */
  .import-table .mud-table-row { border-bottom: 6px solid var(--mud-palette-background-grey, #f4f4f6) !important; }
  /* Action buttons: even gap on mobile */
  .import-actions { gap: 8px !important; }
}
@media (min-width: 600px) and (max-width: 959px) {
  .table-col-hide-sm { display: none !important; }
}

/* ═══════════════════════════════════════════════════════════════════════════════
   Print Styles
   ═══════════════════════════════════════════════════════════════════════════════ */
@media print {
  .mud-appbar,
  .mud-drawer,
  .no-print { display: none !important; }
  .mud-main-content { margin-left: 0 !important; }
}

/* ═══════════════════════════════════════════════════════════════════════════════
   Focus ring (Section 7.8)
   ═══════════════════════════════════════════════════════════════════════════════ */
:focus-visible {
  outline: 2px solid var(--color-focus-ring);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}
:focus:not(:focus-visible) { outline: none; }

/* ═══════════════════════════════════════════════════════════════════════════════
   Animation helpers
   ═══════════════════════════════════════════════════════════════════════════════ */
.fade-in {
  animation: fadeIn var(--transition-reveal) ease-in-out;
}
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

.slide-in {
  animation: slideIn var(--transition-reveal) ease-out;
}
@keyframes slideIn {
  from { transform: translateX(-16px); opacity: 0; }
  to   { transform: translateX(0);     opacity: 1; }
}

/* ═══════════════════════════════════════════════════════════════════════════════
   Accessibility
   ═══════════════════════════════════════════════════════════════════════════════ */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   Auth Layout — structural classes
   auth-right-panel: the flex column that fills the right 50% of the auth split.
   auth-card-wrapper: inner width-capped container (440px desktop, 400px sm, 100% xs).
   Responsive padding extracted here so the card can go edge-to-edge on xs.
   ═══════════════════════════════════════════════════════════════════════════════ */
.auth-right-panel {
  flex: 1;
  min-height: 100vh;
  background: var(--color-surface-1);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 2rem;
  overflow-y: auto;
}
.auth-card-wrapper {
  width: 100%;
  max-width: 440px;
}
/* xs: remove outer panel padding so card is edge-to-edge */
@media (max-width: 599px) {
  .auth-right-panel {
    padding: 0;
    align-items: stretch;
    justify-content: flex-start;
  }
  .auth-card-wrapper {
    max-width: 100%;
  }
}
/* sm: lighter padding, narrower card */
@media (min-width: 600px) and (max-width: 959px) {
  .auth-right-panel {
    padding: 1.5rem;
  }
  .auth-card-wrapper {
    max-width: 400px;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════════
   Auth form card
   Used by Login, Register, ForgotPassword, ResetPassword inside AuthLayout.
   AuthLayout provides the full-height flex shell; this card provides the visual
   paper surface with the contract shadow value (Section 10.1).
   MudPaper adds border + shadow via joy-mud-overrides — override both here.
   ═══════════════════════════════════════════════════════════════════════════════ */
.auth-form-card {
  width: 100%;
  padding: calc(var(--space-content) * 2);  /* 3rem / 48px per contract §10.1 */
  background-color: var(--color-surface-1);
  border-radius: var(--radius-lg);
  border: none !important;
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.08) !important;
  position: relative;
  overflow: hidden;
}
/* Spring moss green accent bar at top of auth card */
.auth-form-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--teal-9), var(--violet-9));
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}
/* ── Sidebar: scrollable drawer content ─────────────────────────────────── */
/* Must live in app.css (global) — ::deep in scoped .razor.css does not
   penetrate MudBlazor component-rendered elements like mud-drawer-content. */
.mud-drawer-content {
  height: 100% !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  scrollbar-width: thin;
  scrollbar-color: var(--slate-5) transparent;
}
.mud-drawer-content::-webkit-scrollbar {
  width: 4px;
}
.mud-drawer-content::-webkit-scrollbar-thumb {
  background-color: var(--slate-5);
  border-radius: 4px;
}

/* ── Mini (collapsed) sidebar: hide children, labels, dividers ─────────── */
/* When the mini drawer is NOT hovered/open, collapse all nav group children.
   display:none beats MudBlazor's inline height/max-height collapse animation. */
.mud-drawer-mini:not(.mud-drawer--open) .mud-collapse-container {
  display: none !important;
}
.mud-drawer-mini:not(.mud-drawer--open) .nav-section-header {
  display: none !important;
}
.mud-drawer-mini:not(.mud-drawer--open) .mud-divider {
  display: none !important;
}
/* 3px gap between the expand arrow and the drawer's right border.
   Shrink the nav-link button's max-width so its overflow:hidden clips the arrow
   3px before the drawer border — no margin hacks, no overlap with the main icon. */
.mud-drawer-mini:not(.mud-drawer--open) .mud-nav-group > .mud-nav-link {
  max-width: calc(100% - 3px);
}

/* xs: no card chrome — flush to panel edge, full-screen */
@media (max-width: 599px) {
  .auth-form-card {
    border-radius: 0;
    box-shadow: none !important;
    padding: var(--space-content);
    min-height: 100svh;
  }
  .auth-form-card::before {
    border-radius: 0;
  }
}
/* sm: softer shadow, keep radius */
@media (min-width: 600px) and (max-width: 959px) {
  .auth-form-card {
    border-radius: var(--radius-lg);
    box-shadow: 0 4px 16px rgba(15, 23, 42, 0.08) !important;
    padding: 2rem;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   HOME PAGE
═══════════════════════════════════════════════════════════════════════════ */
.home-hero {
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.home-hero__gradient {
  background: linear-gradient(135deg, var(--teal-9) 0%, #065f46 100%);
  padding: 2.5rem 2rem;
}

.home-hero__inner {
  max-width: 100%;
}

.home-hero__badge {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  flex-shrink: 0;
}

.home-feature-card {
  border-radius: var(--radius-lg) !important;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.home-feature-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.1) !important;
}

.hover-lift {
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.hover-lift:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.1) !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   APPBAR CART BADGE
═══════════════════════════════════════════════════════════════════════════ */
/* Cart badge — match notification bell badge size and position */
.cart-badge-wrapper .mud-badge {
  font-size: 12px;
  min-width: 20px;
  height: 20px;
  padding: 0 4px;
  line-height: 20px;
  top: 4px !important;
  right: 4px !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   TABLE ACTION BAR — vertical divider between utility actions and primary
   ═══════════════════════════════════════════════════════════════════════════ */
.action-divider {
  display: inline-block;
  width: 1px;
  height: 18px;
  background-color: var(--mud-palette-divider, rgba(0,0,0,0.12));
  vertical-align: middle;
  margin: 0 4px;
  border-radius: 1px;
}