.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;
}

/* ── Buttons — isometric blade seat, same motion as apps/web ─────────── */

.ag-btn,
.btn,
button.btn,
input[type="submit"].btn,
input[type="button"].btn,
a.btn,
.ag-plan__cta.is-primary,
#order-standard_cart .is-featured .btn-order-now,
#order-standard_cart .product.featured .btn-order-now {
  --btn-filament: -2.5px;
  --btn-filament-color: transparent;
  --btn-filament-hover: var(--ag-accent-400);
  --btn-sheen: transparent;
  --btn-sheen-hover: rgb(255 255 255 / 0.22);
  --btn-iso-1: var(--ag-brand-800);
  --btn-iso-2: var(--ag-brand-900);
  --btn-iso-3: var(--ag-brand-950);
  --btn-step-1: transparent;
  --btn-step-2: transparent;
  --btn-step-3: transparent;
  --btn-glow: 0 10px 22px -10px rgb(34 113 198 / 0.62);
  --btn-glow-hover: 12px 14px 26px -12px rgb(34 113 198 / 0.36);
  --btn-lift-x: -6px;
  --btn-lift-y: -3px;
  --btn-press-x: -2px;
  --btn-press-y: -1px;
  --btn-face: linear-gradient(to bottom, var(--ag-brand-500), var(--ag-brand-700));

  position: relative;
  z-index: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 2.75rem;
  padding: 0.5rem 1.25rem;
  border: 0;
  border-radius: var(--ag-radius-md);
  background: var(--btn-face);
  color: #fff;
  font: inherit;
  font-size: 0.875rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  opacity: 1;
  filter: none;
  box-shadow:
    inset var(--btn-filament) 0 0 0 var(--btn-filament-color),
    inset 0 1px 0 0 var(--btn-sheen),
    2px 1px 0 0 var(--btn-step-1),
    4px 2px 0 0 var(--btn-step-2),
    6px 3px 0 0 var(--btn-step-3),
    var(--btn-glow);
  transition:
    transform 320ms var(--ag-ease-button),
    box-shadow 360ms var(--ag-ease-out),
    border-color 200ms var(--ag-ease-out);
}

html[dir="ltr"] .ag-btn,
html[dir="ltr"] .btn,
html[dir="ltr"] .ag-plan__cta.is-primary,
html[dir="ltr"] #order-standard_cart .is-featured .btn-order-now,
html[dir="ltr"] #order-standard_cart .product.featured .btn-order-now {
  --btn-filament: 2.5px;
}

html body .ag-btn:hover,
html body .btn:hover,
html body .ag-plan__cta.is-primary:hover,
html body #order-standard_cart .is-featured .btn-order-now:hover,
html body #order-standard_cart .product.featured .btn-order-now:hover,
html body .ag-btn:focus-visible,
html body .btn:focus-visible,
html body .ag-plan__cta.is-primary:focus-visible,
html body #order-standard_cart .is-featured .btn-order-now:focus-visible,
html body #order-standard_cart .product.featured .btn-order-now:focus-visible {
  text-decoration: none;
  opacity: 1 !important;
  filter: none;
  background: var(--btn-face);
  background-image: var(--btn-face);
  color: #fff;
}

html body .ag-btn:hover,
html body .btn:hover,
html body .ag-plan__cta.is-primary:hover,
html body #order-standard_cart .is-featured .btn-order-now:hover,
html body #order-standard_cart .product.featured .btn-order-now:hover,
html body .ag-btn:focus-visible,
html body .btn:focus-visible,
html body .ag-plan__cta.is-primary:focus-visible,
html body #order-standard_cart .is-featured .btn-order-now:focus-visible,
html body #order-standard_cart .product.featured .btn-order-now:focus-visible {
  z-index: 2;
  transform: translate3d(var(--btn-lift-x), var(--btn-lift-y), 0);
  box-shadow:
    inset var(--btn-filament) 0 0 0 var(--btn-filament-hover),
    inset 0 1px 0 0 var(--btn-sheen-hover),
    2px 1px 0 0 var(--btn-iso-1),
    4px 2px 0 0 var(--btn-iso-2),
    6px 3px 0 0 var(--btn-iso-3),
    var(--btn-glow-hover);
}

html body .ag-btn:active,
html body .btn:active,
html body .ag-plan__cta.is-primary:active,
html body #order-standard_cart .is-featured .btn-order-now:active,
html body #order-standard_cart .product.featured .btn-order-now:active {
  opacity: 1 !important;
  filter: none;
  background: var(--btn-face);
  transform: translate3d(var(--btn-press-x), var(--btn-press-y), 0);
  box-shadow:
    inset var(--btn-filament) 0 0 0 var(--btn-filament-hover),
    inset 0 1px 0 0 var(--btn-sheen-hover),
    2px 1px 0 0 var(--btn-iso-2),
    4px 2px 0 0 var(--btn-iso-3),
    6px 3px 0 0 transparent,
    var(--btn-glow);
  transition-duration: 80ms;
  transition-timing-function: cubic-bezier(0.2, 0, 0, 1);
}

@media (prefers-reduced-motion: reduce) {
  html body .ag-btn:hover,
  html body .btn:hover,
  html body .ag-plan__cta.is-primary:hover,
  html body #order-standard_cart .is-featured .btn-order-now:hover,
  html body .ag-btn:focus-visible,
  html body .btn:focus-visible,
  html body .ag-btn:active,
  html body .btn:active {
    transform: none;
  }
}

.ag-btn:disabled,
.btn:disabled,
.ag-btn.is-loading {
  opacity: 0.55;
  pointer-events: none;
}

.ag-btn--secondary,
.btn-default,
.btn-secondary,
.btn-outline,
.btn-outline-primary,
.btn-light,
.ag-plan__cta:not(.is-primary),
#order-standard_cart .btn-order-now:not(.is-primary) {
  --btn-face: var(--ag-surface);
  --btn-glow: 0 1px 2px 0 rgb(13 39 69 / 0.06);
  --btn-glow-hover: 8px 10px 18px -10px rgb(13 39 69 / 0.22);
  --btn-sheen-hover: rgb(255 255 255 / 0.35);
  --btn-lift-x: -6px;
  --btn-lift-y: -3px;
  --btn-iso-1: var(--ag-brand-700);
  --btn-iso-2: var(--ag-brand-800);
  --btn-iso-3: var(--ag-brand-950);
  background: var(--ag-surface);
  color: var(--ag-content);
  border: 1px solid var(--ag-hairline-strong);
}

html body .ag-btn--secondary:hover,
html body .ag-btn--secondary:focus-visible,
html body .ag-btn--secondary:active,
html body .btn-default:hover,
html body .btn-default:focus-visible,
html body .btn-secondary:hover,
html body .btn-secondary:focus-visible,
html body .btn-outline:hover,
html body .btn-outline-primary:hover,
html body .btn-light:hover,
html body .ag-plan__cta:not(.is-primary):hover,
html body .ag-plan__cta:not(.is-primary):focus-visible,
html body #order-standard_cart .btn-order-now:not(.is-primary):hover,
html body #order-standard_cart .btn-order-now:not(.is-primary):focus-visible {
  color: var(--ag-content) !important;
  background: var(--ag-surface) !important;
  background-image: none !important;
  border-color: var(--ag-brand-500);
  opacity: 1 !important;
  filter: none;
}

.ag-btn--ghost,
.btn-link {
  --btn-face: transparent;
  --btn-lift-x: 0px;
  --btn-lift-y: 0px;
  --btn-press-x: 0px;
  --btn-press-y: 0px;
  --btn-iso-1: transparent;
  --btn-iso-2: transparent;
  --btn-iso-3: transparent;
  --btn-glow: 0 0 0 0 transparent;
  --btn-glow-hover: 0 0 0 0 transparent;
  --btn-sheen-hover: transparent;
  background: transparent;
  color: var(--ag-content-muted);
  border: 0;
}

html body .ag-btn--ghost:hover,
html body .btn-link:hover {
  color: var(--ag-content) !important;
  background: transparent !important;
  background-image: none !important;
  opacity: 1 !important;
}

.ag-btn--danger,
.btn-danger {
  --btn-face: var(--ag-danger-500);
  --btn-filament-hover: var(--ag-danger-400);
  --btn-iso-1: #991b1b;
  --btn-iso-2: #7f1d1d;
  --btn-iso-3: #450a0a;
  --btn-glow: 0 8px 18px -10px rgb(220 38 38 / 0.4);
  --btn-glow-hover: 12px 14px 24px -12px rgb(220 38 38 / 0.28);
  background: var(--ag-danger-500);
}

html.dark .ag-btn--secondary,
html[data-theme="dark"] .ag-btn--secondary,
html.dark .btn-default,
html[data-theme="dark"] .btn-default,
html.dark .btn-secondary,
html[data-theme="dark"] .btn-secondary,
html.dark .btn-outline,
html[data-theme="dark"] .btn-outline,
html.dark .btn-outline-primary,
html[data-theme="dark"] .btn-outline-primary,
html.dark .btn-light,
html[data-theme="dark"] .btn-light {
  --btn-face: var(--ag-surface);
  --btn-sheen-hover: rgb(255 255 255 / 0.08);
  --btn-glow: 0 1px 2px 0 rgb(0 0 0 / 0.24);
  --btn-glow-hover: 0 6px 14px -6px rgb(0 0 0 / 0.4);
  --btn-iso-1: #5aa3ea;
  --btn-iso-2: #2a83dc;
  --btn-iso-3: #163f6c;
}

.ag-btn--sm,
.btn-sm { min-height: 2.25rem; padding: 0.3rem 0.85rem; font-size: 0.8125rem; }
.ag-btn--block,
.btn-block { width: 100%; }

.ag-btn svg,
.btn svg { width: 1.15em; height: 1.15em; flex-shrink: 0; }

/* ── Cards / badges / alerts ──────────────────────────────────────────── */

.ag-card,
.card,
.panel,
.panel-default,
.panel-sidebar {
  background: var(--ag-surface);
  border: 1px solid var(--ag-hairline-strong);
  border-radius: var(--ag-radius-xl);
  box-shadow: var(--ag-shadow-sm);
}

.ag-card { padding: 1.25rem; }

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .ag-card.is-interactive:hover {
    transform: translateY(-5px);
    box-shadow: var(--ag-shadow-lg);
  }
}

.ag-card__title,
.panel-title,
.card-title {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 700;
}

.ag-card__meta {
  margin-top: 0.35rem;
  color: var(--ag-content-muted);
  font-size: 0.8125rem;
}

.ag-stat {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: 1.1rem 1.15rem;
}

.ag-stat__label {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--ag-content-subtle);
}

.ag-stat__value {
  font-size: 1.35rem;
  font-weight: 800;
  color: var(--ag-content);
}

.ag-badge,
.label,
.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  min-height: 1.55rem;
  padding: 0.1rem 0.7rem;
  border-radius: 999px;
  font-size: 0.6875rem;
  font-weight: 700;
  background: color-mix(in oklab, var(--ag-brand-500) 12%, transparent);
  color: var(--ag-brand-700);
  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--ag-brand-500) 22%, transparent);
}

html.dark .ag-badge,
html.dark .label,
html.dark .badge { color: var(--ag-brand-200); }

.ag-badge--ok,
.label-success,
.badge-success {
  background: color-mix(in oklab, var(--ag-success-500) 12%, transparent);
  color: var(--ag-success-600);
  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--ag-success-500) 25%, transparent);
}

.ag-badge--warn,
.label-warning,
.badge-warning {
  background: color-mix(in oklab, var(--ag-warning-500) 14%, transparent);
  color: #b45309;
}

.ag-badge--bad,
.label-danger,
.badge-danger {
  background: color-mix(in oklab, var(--ag-danger-500) 12%, transparent);
  color: var(--ag-danger-600);
}

.ag-badge--muted,
.label-default {
  background: var(--ag-canvas-subtle);
  color: var(--ag-content-muted);
  box-shadow: inset 0 0 0 1px var(--ag-hairline);
}

.ag-alert,
.alert {
  padding: 0.9rem 1rem;
  border-radius: var(--ag-radius-md);
  border: 1px solid var(--ag-hairline);
  background: var(--ag-surface);
  color: var(--ag-content);
}

.alert-success { border-color: color-mix(in oklab, var(--ag-success-500) 35%, transparent); }
.alert-danger, .alert-error { border-color: color-mix(in oklab, var(--ag-danger-500) 35%, transparent); }
.alert-warning { border-color: color-mix(in oklab, var(--ag-warning-500) 35%, transparent); }
.alert-info { border-color: color-mix(in oklab, var(--ag-brand-500) 35%, transparent); }

/* ── Forms ────────────────────────────────────────────────────────────── */

label,
.control-label {
  display: block;
  margin-bottom: 0.35rem;
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--ag-content);
}

.form-control,
.form-select,
select.form-control,
textarea.form-control,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="tel"],
input[type="number"],
input[type="url"],
select,
textarea {
  width: 100%;
  min-height: 2.75rem;
  padding: 0.5rem 0.85rem;
  border: 1px solid var(--ag-hairline-strong);
  border-radius: var(--ag-radius-md);
  background: var(--ag-surface);
  color: var(--ag-content);
  font: inherit;
  font-size: 0.9375rem;
}

textarea { min-height: 7rem; resize: vertical; }

.form-control:focus,
select:focus,
textarea:focus,
input:focus {
  outline: 2px solid var(--ag-ring);
  outline-offset: 1px;
  border-color: var(--ag-brand-400);
}

.form-group,
.field,
.mb-3 { margin-bottom: 1rem; }

/* ── Tables ───────────────────────────────────────────────────────────── */

.ag-table-wrap,
.table-container,
.table-responsive {
  overflow-x: auto;
  border: 1px solid var(--ag-hairline);
  border-radius: var(--ag-radius-lg);
  background: var(--ag-surface);
}

table.ag-table,
table.table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
}

table.table th,
table.ag-table th,
table.table td,
table.ag-table td {
  padding: 0.8rem 1rem;
  text-align: start;
  border-block-end: 1px solid var(--ag-hairline);
  vertical-align: middle;
}

table.table th,
table.ag-table th {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--ag-content-subtle);
  background: var(--ag-canvas-subtle);
}

@media (width < 48rem) {
  .ag-table--cards thead { display: none; }
  .ag-table--cards,
  .ag-table--cards tbody,
  .ag-table--cards tr,
  .ag-table--cards td { display: block; width: 100%; }
  .ag-table--cards tr {
    padding: 0.85rem 1rem;
    border-block-end: 1px solid var(--ag-hairline);
  }
  .ag-table--cards td {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    border: 0;
    padding: 0.25rem 0;
  }
  .ag-table--cards td::before {
    content: attr(data-label);
    font-weight: 700;
    color: var(--ag-content-subtle);
  }
}

/* ── Empty / loading / skeleton ───────────────────────────────────────── */

.ag-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.65rem;
  padding: 2.5rem 1.25rem;
}

.ag-empty__icon {
  display: grid;
  place-items: center;
  width: 3.25rem;
  height: 3.25rem;
  border-radius: var(--ag-radius-lg);
  background: var(--ag-canvas-subtle);
  color: var(--ag-brand-600);
}

.ag-empty h2 { margin: 0; font-size: 1.05rem; }
.ag-empty p { margin: 0; color: var(--ag-content-muted); max-width: 28rem; }

.ag-skel {
  display: block;
  border-radius: var(--ag-radius-sm);
  background: linear-gradient(
    90deg,
    var(--ag-canvas-subtle) 0%,
    var(--ag-surface) 50%,
    var(--ag-canvas-subtle) 100%
  );
  background-size: 200% 100%;
  animation: ag-shimmer 2.4s ease-in-out infinite;
  min-height: 0.85rem;
}

@keyframes ag-shimmer {
  0%, 100% { background-position: 100% 0; }
  50% { background-position: 0 0; }
}

/* ── Modal / toast / tabs / pagination ────────────────────────────────── */

.modal-content,
.ag-modal {
  background: var(--ag-surface);
  border: 1px solid var(--ag-hairline-strong);
  border-radius: var(--ag-radius-xl);
  box-shadow: var(--ag-shadow-lg);
  color: var(--ag-content);
}

.modal-header, .modal-footer { border-color: var(--ag-hairline); }

.ag-toast {
  position: fixed;
  inset-inline-end: 1rem;
  bottom: 1rem;
  z-index: 80;
  max-width: 22rem;
  padding: 0.85rem 1rem;
  border-radius: var(--ag-radius-md);
  background: var(--ag-ink-900);
  color: #fff;
  box-shadow: var(--ag-shadow-lg);
}

.nav-tabs,
.ag-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  border: 0;
  margin-bottom: 1rem;
}

.nav-tabs .nav-link,
.ag-tabs a {
  padding: 0.5rem 0.85rem;
  border: 0;
  border-radius: var(--ag-radius-md);
  color: var(--ag-content-muted);
  font-weight: 600;
  text-decoration: none;
}

.nav-tabs .nav-link.active,
.ag-tabs a.is-active {
  background: color-mix(in oklab, var(--ag-brand-500) 12%, transparent);
  color: var(--ag-brand-700);
}

.pagination {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  list-style: none;
  padding: 0;
}

.pagination a,
.pagination span {
  display: grid;
  place-items: center;
  min-width: 2.25rem;
  height: 2.25rem;
  border-radius: var(--ag-radius-sm);
  border: 1px solid var(--ag-hairline);
  background: var(--ag-surface);
  color: var(--ag-content);
  text-decoration: none;
}

/* ── Status dots ──────────────────────────────────────────────────────── */

.ag-dot {
  display: inline-block;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 999px;
  background: var(--ag-success-500);
}

.ag-dot--warn { background: var(--ag-warning-500); }
.ag-dot--bad { background: var(--ag-danger-500); }
.ag-dot--mute { background: var(--ag-ink-400); }

/* ── Search modal ─────────────────────────────────────────────────────── */

.ag-search {
  position: fixed;
  inset: 0;
  z-index: 70;
  display: none;
  align-items: flex-start;
  justify-content: center;
  padding: 12vh 1rem 1rem;
  background: rgb(11 15 30 / 0.45);
}

.ag-search.is-open { display: flex; }

.ag-search__panel {
  width: min(40rem, 100%);
  background: var(--ag-surface);
  border: 1px solid var(--ag-hairline-strong);
  border-radius: var(--ag-radius-xl);
  box-shadow: var(--ag-shadow-lg);
  overflow: hidden;
}

.ag-search__panel input {
  border: 0;
  border-radius: 0;
  min-height: 3.25rem;
  font-size: 1rem;
}

.ag-search__results { max-height: 22rem; overflow-y: auto; }
.ag-search__hit {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding: 0.7rem 1rem;
  text-decoration: none;
  color: inherit;
  border-block-start: 1px solid var(--ag-hairline);
}

.ag-search__hit:hover { background: var(--ag-canvas-subtle); }
.ag-search__kicker { font-size: 0.7rem; font-weight: 700; color: var(--ag-content-subtle); }

.ag-list-search {
  display: block;
  margin: 0 0 1rem;
}
.ag-list-search input {
  width: min(100%, 22rem);
}

.ag-visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ── AI drawer ────────────────────────────────────────────────────────── */

.ag-ai {
  position: fixed;
  inset-block: 0;
  inset-inline-end: 0;
  z-index: 60;
  width: min(26rem, 100vw);
  display: flex;
  flex-direction: column;
  background: var(--ag-surface);
  border-inline-start: 1px solid var(--ag-hairline);
  box-shadow: var(--ag-shadow-lg);
  transform: translateX(-110%);
}

html[dir="ltr"] .ag-ai { transform: translateX(110%); }

.ag-ai.is-open { transform: none; }

.ag-ai__head,
.ag-ai__foot {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.85rem 1rem;
  border-color: var(--ag-hairline);
  border-style: solid;
  border-width: 0;
}

.ag-ai__head { border-block-end-width: 1px; }
.ag-ai__foot { border-block-start-width: 1px; }

.ag-ai__msgs {
  flex: 1;
  overflow-y: auto;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.ag-msg {
  max-width: 92%;
  padding: 0.7rem 0.85rem;
  border-radius: var(--ag-radius-lg);
  font-size: 0.9rem;
  line-height: var(--ag-leading-snug);
}

.ag-msg--user {
  align-self: flex-start;
  background: color-mix(in oklab, var(--ag-brand-500) 14%, transparent);
}

.ag-msg--assistant {
  align-self: stretch;
  background: var(--ag-canvas-subtle);
}

.ag-msg pre {
  direction: ltr;
  text-align: left;
  overflow-x: auto;
  padding: 0.75rem;
  border-radius: var(--ag-radius-sm);
  background: var(--ag-ink-950);
  color: #eceff6;
  font-family: var(--ag-font-mono);
  font-size: 0.8rem;
}

.ag-ai__composer {
  display: flex;
  gap: 0.4rem;
  width: 100%;
}

.ag-ai__composer textarea {
  min-height: 2.75rem;
  max-height: 8rem;
}

.ag-prompts {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  padding: 0 1rem 0.75rem;
}

.ag-prompts button {
  border: 1px solid var(--ag-hairline);
  background: var(--ag-canvas-subtle);
  color: var(--ag-content);
  border-radius: 999px;
  padding: 0.3rem 0.7rem;
  font-size: 0.75rem;
  font-weight: 600;
  cursor: pointer;
}

/* ── Charts ───────────────────────────────────────────────────────────── */

.ag-chart {
  width: 100%;
  height: 12rem;
  display: block;
}

.ag-meter {
  height: 0.45rem;
  border-radius: 999px;
  background: var(--ag-canvas-subtle);
  overflow: hidden;
}

.ag-meter > span {
  display: block;
  height: 100%;
  background: linear-gradient(to inline-end, var(--ag-brand-400), var(--ag-brand-700));
}

/* ── Code ─────────────────────────────────────────────────────────────── */

code {
  direction: ltr;
  unicode-bidi: isolate;
  font-family: var(--ag-font-mono);
  font-size: 0.875em;
  background: var(--ag-canvas-subtle);
  border: 1px solid var(--ag-hairline);
  border-radius: var(--ag-radius-xs);
  padding: 0.1em 0.35em;
}

pre {
  direction: ltr;
  text-align: left;
  background: var(--ag-ink-950);
  color: #eceff6;
  border-radius: var(--ag-radius-lg);
  padding: 1rem;
  overflow-x: auto;
  font-family: var(--ag-font-mono);
  font-size: 0.8125rem;
}

pre code { background: none; border: 0; padding: 0; color: inherit; }

/* Stock WHMCS forms that sit inside our chrome */
.form-group.row {
  display: flex;
  flex-wrap: wrap;
  align-items: start;
  gap: 0.65rem 0;
}

.form-group.row > [class*="col-"] {
  min-width: 0;
}

@media (width < 48rem) {
  .form-group.row { flex-direction: column; }
  .form-group.row > [class*="col-"] {
    width: 100% !important;
    max-width: 100%;
    flex: 1 1 auto;
  }
}

.generate-password {
  width: auto;
  max-width: 100%;
}

input[type="file"] {
  display: block;
  width: 100%;
  max-width: 100%;
  padding: 0.45rem 0;
  border: 0;
  background: transparent;
  font: inherit;
}

.iti,
.intl-tel-input {
  width: 100%;
  max-width: 100%;
}

.iti input,
.intl-tel-input input {
  width: 100% !important;
}

.dataTables_wrapper {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.dataTables_wrapper .dataTables_filter,
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_paginate {
  float: none !important;
  text-align: start !important;
  width: 100%;
}

.dataTables_wrapper .dataTables_filter input {
  width: min(100%, 18rem);
  margin-inline-start: 0.5rem;
}

.twofa-config-link + .twofa-config-link {
  margin-inline-start: 0.5rem;
}

@media (width < 40rem) {
  .twofa-config-link {
    display: inline-flex;
    width: 100%;
    margin: 0 0 0.5rem !important;
  }
}

#order-standard_cart .loader,
#order-standard_cart .hidden {
  /* keep stock loader; hidden handled globally */
}

.ag-page-title {
  margin: 0 0 1rem;
  font-size: clamp(1.25rem, 2.2vw, 1.7rem);
}