/* Astryx compatibility layer (2026-11-10, Bootstrap consistency pass).
   PURPOSE: one standard for every repeated element, without renaming
   ~3,700 legacy class usages across 454 views. The Astryx port (.ax-*)
   is the single source of truth for the look; this file maps every legacy
   button / card / input / link / empty-state class onto the Astryx
   rendering, so a page that still says `btn btn-primary` paints exactly
   like a page that says `ax-btn ax-btn--primary`.
   WHY ALIASES, NOT RENAMES: the usages are mostly literal class strings,
   but hundreds sit inside EJS interpolation and conditional class lists;
   a mechanical rename across 454 files is unreviewable churn with real
   breakage risk, and the rendered result is identical either way.
   New code MUST use .ax-* classes directly — this layer is a bridge for
   old markup, not a second standard.
   LOAD ORDER: this file loads LAST in head.ejs (after premium.css), on
   every page including slice pages, so it wins over the legacy layers
   (style.css / polish.css / premium.css) and over Bootstrap, which loads
   first. `!important` appears ONLY where a legacy rule uses `!important`
   itself (primary background/border/color, danger color/border, input
   resting background/border-color/color at style.css:2431, input focus)
   — `!important` beats specificity, so those need it; everything else
   wins by source order at equal-or-higher specificity. Element-qualified
   selectors (`button.btn`, `a.btn`, `input.btn`, `input.input`) are used
   wherever the legacy layer qualifies the same way (polish.css:52),
   because (0,1,1) beats a bare class (0,1,0) whatever the load order.
   All values come from Astryx tokens — never hardcoded colours/sizes. */

/* ---- Buttons: legacy .btn / .pm-btn render as .ax-btn + secondary ----
   Element-qualified selectors are deliberate: polish.css:52 uses
   `button.btn, a.btn, input[type="submit"].btn` (0,1,1), which beats a
   bare `.btn` (0,1,0) whatever the load order. Compat must match it. */
.btn, button.btn, a.btn, input.btn, input[type="submit"].btn,
.pm-btn, button.pm-btn, a.pm-btn, input.pm-btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--spacing-2); min-width: 0; max-width: 100%;
  height: max(var(--size-element-md), 1lh); min-height: 0;
  padding-block: var(--spacing-2); padding-inline: var(--spacing-3);
  border: 0; border-radius: var(--radius-element);
  background-color: var(--color-neutral); color: var(--color-text-primary);
  font-family: inherit; font-size: var(--text-label-size);
  line-height: var(--text-label-leading); font-weight: var(--font-weight-medium);
  white-space: nowrap; text-decoration: none; cursor: pointer;
  transition-property: background-color, color, opacity, transform;
  transition-duration: var(--duration-fast); transition-timing-function: var(--ease-standard);
}
.btn:hover, button.btn:hover, a.btn:hover, input.btn:hover,
.pm-btn:hover, button.pm-btn:hover, a.pm-btn:hover, input.pm-btn:hover { background-color: var(--color-overlay-hover); transform: none; box-shadow: none; }
.btn:active:not(:disabled), button.btn:active:not(:disabled), a.btn:active:not(:disabled), input.btn:active:not(:disabled),
.pm-btn:active:not(:disabled), button.pm-btn:active:not(:disabled), a.pm-btn:active:not(:disabled), input.pm-btn:active:not(:disabled) { transform: scale(0.98); box-shadow: none; }
.btn:disabled, button.btn:disabled, a.btn:disabled, input.btn:disabled, .btn.disabled,
.pm-btn:disabled, button.pm-btn:disabled, a.pm-btn:disabled, input.pm-btn:disabled, .pm-btn.disabled { opacity: .5; cursor: default; transform: none; box-shadow: none; }

/* Buttons inside legacy product cards keep the secondary look too
   (legacy .pm-card .btn painted them dark #404040). */
.pm-card .btn, .pm-card button.btn, .pm-card a.btn, .pm-card input.btn,
.pm-card .pm-btn, .pm-card button.pm-btn, .pm-card a.pm-btn, .pm-card input.pm-btn { background-color: var(--color-neutral); color: var(--color-text-primary); }
.pm-card .btn:hover, .pm-card button.btn:hover, .pm-card a.btn:hover, .pm-card input.btn:hover,
.pm-card .pm-btn:hover, .pm-card button.pm-btn:hover, .pm-card a.pm-btn:hover, .pm-card input.pm-btn:hover { background-color: var(--color-overlay-hover); transform: none; box-shadow: none; }

/* ---- Button variants: primary / secondary / danger / ghost ---- */
/* Primary = Astryx accent blue. !important is required: the legacy
   .btn-primary sets background/border-color/color with !important
   (style.css 2461/2524/2650 — three competing black gradients). */
.btn-primary, .btn.btn-primary, a.btn-primary, button.btn-primary, input.btn-primary, input[type="submit"].btn-primary,
.btn--primary, .btn.btn--primary, a.btn--primary, button.btn--primary, input.btn--primary,
.pm-btn-dark, a.pm-btn-dark, button.pm-btn-dark, input.pm-btn-dark {
  background-color: var(--color-accent) !important;
  border-color: transparent !important;
  color: var(--color-on-accent) !important;
  box-shadow: none;
}
.btn-primary:hover, .btn.btn-primary:hover, a.btn-primary:hover, button.btn-primary:hover, input.btn-primary:hover, input[type="submit"].btn-primary:hover,
.btn--primary:hover, .btn.btn--primary:hover, a.btn--primary:hover, button.btn--primary:hover, input.btn--primary:hover,
.pm-btn-dark:hover, a.pm-btn-dark:hover, button.pm-btn-dark:hover, input.pm-btn-dark:hover {
  background-color: var(--ax-accent-deep) !important;
  border-color: transparent !important;
  color: var(--color-on-accent) !important;
  box-shadow: none; transform: none;
}
.pm-card .btn.btn-primary, .pm-card a.btn.btn-primary, .pm-card button.btn.btn-primary, .pm-card input.btn.btn-primary,
.pm-card .btn--primary, .pm-card a.btn--primary, .pm-card button.btn--primary, .pm-card input.btn--primary,
.pm-card .pm-btn-dark, .pm-card a.pm-btn-dark, .pm-card button.pm-btn-dark, .pm-card input.pm-btn-dark {
  background-color: var(--color-accent) !important;
  border-color: transparent !important;
  color: var(--color-on-accent) !important;
}
.pm-card .btn.btn-primary:hover, .pm-card a.btn.btn-primary:hover, .pm-card button.btn.btn-primary:hover, .pm-card input.btn.btn-primary:hover,
.pm-card .btn--primary:hover, .pm-card a.btn--primary:hover, .pm-card button.btn--primary:hover, .pm-card input.btn--primary:hover,
.pm-card .pm-btn-dark:hover, .pm-card a.pm-btn-dark:hover, .pm-card button.pm-btn-dark:hover, .pm-card input.pm-btn-dark:hover {
  background-color: var(--ax-accent-deep) !important;
  border-color: transparent !important;
  color: var(--color-on-accent) !important;
}

/* Secondary = Astryx neutral. No !important anywhere in the legacy
   secondary rules, so plain source order wins. */
.btn-secondary, .btn.btn-secondary, a.btn-secondary, button.btn-secondary, input.btn-secondary,
.btn-light, a.btn-light, button.btn-light, input.btn-light,
.pm-btn-light, a.pm-btn-light, button.pm-btn-light, input.pm-btn-light {
  background-color: var(--color-neutral); color: var(--color-text-primary);
  border-color: transparent; box-shadow: none;
}
.btn-secondary:hover, .btn.btn-secondary:hover, a.btn-secondary:hover, button.btn-secondary:hover, input.btn-secondary:hover,
.btn-light:hover, a.btn-light:hover, button.btn-light:hover, input.btn-light:hover,
.pm-btn-light:hover, a.pm-btn-light:hover, button.pm-btn-light:hover, input.pm-btn-light:hover {
  background-color: var(--color-overlay-hover); transform: none; box-shadow: none;
}

/* Danger = Astryx error. !important is required: legacy .btn-danger sets
   color/border-color (and hover background/border/color) with !important
   (style.css 2644-2645). */
.btn-danger, .btn.btn-danger, a.btn-danger, button.btn-danger, input.btn-danger,
.btn--danger, a.btn--danger, button.btn--danger, input.btn--danger {
  background-color: var(--color-error) !important;
  border-color: transparent !important;
  color: var(--color-on-error) !important;
  box-shadow: none;
}
.btn-danger:hover, .btn.btn-danger:hover, a.btn-danger:hover, button.btn-danger:hover, input.btn-danger:hover,
.btn--danger:hover, a.btn--danger:hover, button.btn--danger:hover, input.btn--danger:hover {
  background-color: var(--color-error) !important;
  border-color: transparent !important;
  color: var(--color-on-error) !important;
  box-shadow: none; transform: none;
}

/* Ghost = Astryx tertiary (transparent, accent text, no border). The old
   ghost was dark text on a hairline border; the standard is accent text. */
.btn-ghost, a.btn-ghost, button.btn-ghost, input.btn-ghost,
.pm-btn-ghost, a.pm-btn-ghost, button.pm-btn-ghost, input.pm-btn-ghost,
.btn-outline, a.btn-outline, button.btn-outline, input.btn-outline {
  background-color: transparent; border-color: transparent;
  color: var(--color-text-accent); box-shadow: none;
}
.btn-ghost:hover, a.btn-ghost:hover, button.btn-ghost:hover, input.btn-ghost:hover,
.pm-btn-ghost:hover, a.pm-btn-ghost:hover, button.pm-btn-ghost:hover, input.pm-btn-ghost:hover,
.btn-outline:hover, a.btn-outline:hover, button.btn-outline:hover, input.btn-outline:hover {
  background-color: var(--color-overlay-hover); color: var(--color-text-accent);
  transform: none; box-shadow: none;
}

/* ---- Button sizes: sm / lg / block (mirror .ax-btn--sm/lg/block) ---- */
.btn-sm, a.btn-sm, button.btn-sm, input.btn-sm,
.pm-btn-sm, a.pm-btn-sm, button.pm-btn-sm, input.pm-btn-sm,
.btn.btn--sm, a.btn.btn--sm, button.btn.btn--sm, input.btn.btn--sm {
  height: max(var(--size-element-sm), 1lh); min-height: 0;
  padding-inline: var(--spacing-2); font-size: var(--text-label-size);
}
.btn-lg, a.btn-lg, button.btn-lg, input.btn-lg,
.pm-btn-lg, a.pm-btn-lg, button.pm-btn-lg, input.pm-btn-lg,
.btn.btn--lg, a.btn.btn--lg, button.btn.btn--lg, input.btn.btn--lg {
  height: max(var(--size-element-lg), 1lh); min-height: 0;
  padding-inline: var(--spacing-4); font-size: var(--text-label-size);
}
.btn-block, a.btn-block, button.btn-block, input.btn-block,
.btn--block, a.btn--block, button.btn--block, input.btn--block,
.pm-btn-block, a.pm-btn-block, button.pm-btn-block, input.pm-btn-block { display: flex; width: 100%; }

/* ---- Cards: legacy .pm-card renders as .ax-card ---- */
.pm-card {
  background: var(--color-background-card);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-container);
  box-shadow: var(--shadow-low);
  padding: 0;
}
.pm-card:hover, a.pm-card:hover { box-shadow: var(--shadow-med); transform: none; border-color: var(--color-border); }

/* ---- Inputs: legacy .input renders as .ax-input ----
   Element-qualified: the legacy element rules are `input[type=...]`
   (0,1,1). `!important` on background/border-color/color is required:
   the legacy rule at style.css:2431 sets all three with !important. */
input.input, select.input, textarea.input {
  width: 100%; min-width: 0; min-height: var(--size-element-md);
  padding: var(--spacing-2) var(--spacing-3);
  background: var(--color-background-surface) !important;
  border: var(--border-width) solid var(--color-border-emphasized) !important;
  border-radius: var(--radius-element);
  font: inherit; font-size: var(--text-body-size); line-height: var(--text-body-leading);
  color: var(--color-text-primary) !important;
}
input.input:hover, select.input:hover, textarea.input:hover { box-shadow: var(--shadow-inset-hover); }
/* !important is required: legacy input:focus sets border-color/box-shadow
   with !important (style.css 2435). */
input.input:focus, select.input:focus, textarea.input:focus {
  outline: none; box-shadow: var(--shadow-inset-selected) !important;
  border-color: var(--color-accent) !important;
}
input.input::placeholder, textarea.input::placeholder { color: var(--color-text-secondary); }

/* ---- Links: legacy .pm-link (back-links) renders as .ax-back ---- */
.pm-link {
  display: inline-flex; align-items: center; gap: var(--spacing-1-5);
  font-size: var(--text-body-size); font-weight: var(--font-weight-medium);
  color: var(--color-text-secondary); text-decoration: none;
  border-bottom: 0; padding-bottom: 0;
  padding: var(--spacing-2) 0; margin-bottom: var(--spacing-2); white-space: nowrap;
}
.pm-link:hover { color: var(--color-text-accent); gap: var(--spacing-1-5); }

/* ---- Empty states: legacy .empty / .empty-box / .empty-page render as .ax-empty ---- */
.empty, .empty-box, .empty-page {
  text-align: center; padding: var(--spacing-12) var(--spacing-6);
  color: var(--color-text-secondary); background: transparent;
  border: 0; box-shadow: none;
}
.empty h2, .empty h3, .empty-box h2, .empty-box h3, .empty-page h2, .empty-page h3 {
  color: var(--color-text-primary); margin: 0 0 var(--spacing-2);
}
.empty p, .empty-box p, .empty-page p {
  margin: 0 0 var(--spacing-4); max-width: 480px; margin-inline: auto;
}

/* ---- Bootstrap-native pass (2026-11-10): modals keep the Astryx look ---- */
/* Shared confirm modal + suggestions modal: Astryx surface, border, radius
   and shadow on Bootstrap's modal structure; footer without the top border. */
#cb-confirm-modal .modal-content, #cb-sug-modal .modal-content {
  background: var(--color-background-surface);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-container);
  box-shadow: var(--shadow-high);
}
#cb-confirm-modal .modal-body {
  padding: var(--spacing-5);
  font-size: var(--text-body-size); line-height: var(--text-body-leading);
  color: var(--color-text-primary);
}
#cb-confirm-modal .modal-footer {
  border-top: 0; padding: 0 var(--spacing-5) var(--spacing-5);
  gap: var(--spacing-2);
}
/* Both modals share the old suggestions backdrop (dark navy, 45%) instead of
   Bootstrap's default black backdrop. */
.modal-backdrop.show { background-color: rgb(15, 30, 60); opacity: .45; }

/* ---- Bootstrap-native pass (2026-11-10): shared list pagination ---- */
/* Bootstrap `.pagination` markup (.page-item / .page-link) rendered with the
   Astryx pill look, so the control looks exactly as before. Prev/Next at
   the boundaries render disabled (greyed, non-clickable) instead of
   vanishing; the middle "Page X of Y" item is borderless like before. */
ul.pagination.ax-pagination { list-style: none; padding-left: 0; margin: var(--spacing-6) 0; }
.ax-pagination .page-link {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: var(--size-element-md); height: var(--size-element-md);
  padding-inline: var(--spacing-2);
  border-radius: var(--radius-element);
  border: 1px solid var(--color-border);
  background: var(--color-background-surface);
  color: var(--color-text-primary);
  font-size: var(--text-body-size);
  font-weight: var(--font-weight-medium);
  text-decoration: none;
}
.ax-pagination .page-link:hover { border-color: var(--color-border-emphasized); color: var(--color-text-primary); }
.ax-pagination .page-item.disabled .page-link {
  color: var(--color-text-secondary);
  background: var(--color-background-surface);
  border-color: var(--color-border);
  pointer-events: none; opacity: .65;
}
.ax-pagination .page-item.disabled .page-link.dots {
  border-color: transparent; background: transparent; opacity: 1;
}
.ax-pagination .page-item.active .page-link {
  background: var(--color-accent); border-color: var(--color-accent);
  color: var(--color-on-accent);
}

/* Header glass (ported from the old pm-header "white glass" rule, style.css:2191):
   the header element lost the vestigial pm-header class in the Bootstrap-native
   pass, but that rule was the live winner (loaded after astryx-components, with
   !important) — without this port the header fell back to the Astryx spec's
   solid white. The LIVE look is the translucent warm glass, so it is kept here
   exactly; adopting the spec's solid white is a deliberate design decision for
   later, not a silent side effect of a class cleanup. */
header.ax-topnav {
  background: rgba(250, 249, 247, .82) !important;
  backdrop-filter: blur(22px) saturate(1.5);
  -webkit-backdrop-filter: blur(22px) saturate(1.5);
  border-bottom: 1px solid var(--hair);
}

/* Lucide icons must never be squeezed by the legacy global rule
   `img,video,svg{max-width:100%}` (style.css): inside a shrinkable flex item
   at narrow widths that rule collapses an icon SVG to 0px wide (proven on
   the supplier storefront checklist at 375px, emoji sweep 2026-11-11).
   Icons carry explicit width/height attributes, so max-width serves no
   purpose for them. Scoped to .lucide only — charts/maps keep the rule. */
svg.lucide{max-width:none;}