/* ============================================================
   BrainFusion V2 Web Awesome Theme Overrides
   ============================================================
   Shared component styles for all V2 pages. Loaded globally
   in _LayoutV2.cshtml -- no need to load per-page.

   Contains: buttons (v2-cta-*), inputs (v2-input),
   dialogs (v2-dialog), feedback messages (v2-error/v2-success),
   and dividers (v2-divider).
   ============================================================ */

/* ============================================================
   wa-input
   ============================================================
   Apply class="v2-input" to any wa-input for V2 styling.
   Works in both light and dark mode.
   ============================================================ */
.v2-input {
  --border-radius: 0.5rem;
  --border-color: var(--v2-border-strong);
  --focus-ring-color: var(--v2-brand-primary);
  --wa-input-color: var(--v2-text-primary);
  --wa-input-placeholder-color: var(--v2-text-muted);
}

.v2-input::part(base) {
  background: transparent;
  transition: border-color 0.2s ease;
}

/* ============================================================
   wa-textarea (V2 pages)
   ============================================================
   Ensures textarea adapts to dark mode via V2 tokens.
   ============================================================ */
wa-textarea {
  --border-radius: 0.5rem;
  --border-color: var(--v2-border-strong);
  --focus-ring-color: var(--v2-brand-primary);
  --wa-input-color: var(--v2-text-primary);
  --wa-input-placeholder-color: var(--v2-text-muted);
}

wa-textarea::part(base) {
  background: var(--v2-surface-card);
  transition: border-color 0.2s ease;
}

wa-textarea::part(textarea) {
  color: var(--v2-text-primary);
}

.v2-input::part(input) {
  color: var(--v2-text-primary);
  -webkit-text-fill-color: var(--v2-text-primary);
  caret-color: var(--v2-text-primary);
}

.v2-input::part(password-toggle-button) {
  color: var(--v2-text-muted);
}

/* Hide required asterisk when using v2-input */
.v2-input::part(form-control-label-required) {
  display: none;
}

/* ============================================================
   wa-select
   ============================================================
   Apply class="v2-select" to any wa-select for V2 styling.
   Works in both light and dark mode.
   ============================================================ */
.v2-select {
  --border-radius: 0.5rem;
  --border-color: var(--v2-border-strong);
  --focus-ring-color: var(--v2-brand-primary);
}

.v2-select::part(combobox) {
  background: transparent;
  color: var(--v2-text-primary);
  font-family: var(--v2-font-body);
  transition: border-color 0.2s ease;
}

.v2-select::part(display-input) {
  color: var(--v2-text-primary);
  -webkit-text-fill-color: var(--v2-text-primary);
}

.v2-select::part(expand-icon) {
  color: var(--v2-text-muted);
}

.v2-select::part(listbox) {
  background: var(--v2-surface-card);
  border: 1px solid var(--v2-border-default);
  border-radius: 0.5rem;
  font-family: var(--v2-font-body);
}

/* Override Web Awesome color tokens for option styling */
.v2-select {
  --wa-color-surface-raised: var(--v2-surface-card);
  --wa-color-surface-overlay: var(--v2-surface-card);
  --wa-color-text-normal: var(--v2-text-primary);
  --wa-color-text-quiet: var(--v2-text-muted);
  --wa-color-surface-selected: color-mix(in srgb, var(--v2-brand-primary) 12%, var(--v2-surface-card));
  --wa-color-surface-hover: color-mix(in srgb, var(--v2-brand-primary) 8%, var(--v2-surface-card));
  --wa-color-brand-fill-loud: var(--v2-brand-primary);
}

/* Direct wa-option styling (slotted into select) */
.v2-select wa-option::part(base) {
  color: var(--v2-text-primary);
  font-family: var(--v2-font-body);
  font-size: 0.875rem;
}

.v2-select wa-option::part(checked-icon) {
  color: var(--v2-brand-primary);
}

/* ============================================================
   wa-tooltip  (V2 pages)
   ============================================================
   Dark background with light text in both themes. In dark mode
   the default WA tooltip is light-on-light, so we invert it.
   ============================================================ */
wa-tooltip {
  --wa-tooltip-background-color: var(--v2-text-primary);
  --wa-tooltip-content-color: var(--v2-text-inverse);
  --wa-tooltip-border-radius: 0.375rem;
  --wa-tooltip-font-size: 0.8rem;
  --arrow-color: var(--v2-text-primary);
}

/* ============================================================
   wa-checkbox  (V2 pages)
   ============================================================
   Bridges WA neutral tokens so the unchecked border, label text,
   and checked background all follow the V2 theme in dark mode.
   Uses WA token overrides (preferred over ::part for compatibility).
   ============================================================ */
wa-checkbox {
  --wa-form-control-border-color: var(--v2-border-strong);
  --wa-form-control-background-color: transparent;
  --wa-form-control-activated-color: var(--v2-brand-primary);
  --wa-color-brand-on-loud: var(--v2-text-inverse);
  --wa-color-text-normal: var(--v2-text-primary);
}

wa-checkbox::part(label) {
  color: var(--v2-text-primary);
  font-family: var(--v2-font-body);
}

/* ============================================================
   wa-radio-group / wa-radio  (V2 pages)
   ============================================================
   Same token bridge pattern for radio buttons.
   ============================================================ */
wa-radio {
  --wa-form-control-border-color: var(--v2-border-strong);
  --wa-form-control-background-color: transparent;
  --wa-form-control-activated-color: var(--v2-brand-primary);
  --wa-color-brand-fill-quiet: color-mix(in srgb, var(--v2-brand-primary) 15%, transparent);
  --wa-color-text-normal: var(--v2-text-primary);
}

wa-radio::part(label) {
  color: var(--v2-text-primary);
  font-family: var(--v2-font-body);
}

/* ============================================================
   wa-dialog
   ============================================================
   Apply class="v2-dialog" to any wa-dialog for V2 styling.
   Includes frosted overlay, themed panel, and close button.
   ============================================================ */
.v2-dialog {
  /* Override WA internal tokens so child components (close button) theme correctly */
  --wa-color-surface-raised: var(--v2-surface-card);
  --wa-color-surface-overlay: var(--v2-surface-card);
  --wa-color-overlay-modal: var(--v2-surface-overlay);
  --wa-color-text-normal: var(--v2-text-primary);
  --wa-color-text-quiet: var(--v2-text-muted);
  --wa-color-surface-hover: color-mix(in srgb, var(--v2-text-muted) 12%, var(--v2-surface-card));
  --wa-panel-border-radius: 1rem;
}

.v2-dialog::part(panel) {
  max-width: 600px;
  width: 90vw;
  background: var(--v2-surface-card);
  border: 1px solid var(--v2-border-default);
  font-family: var(--v2-font-body);
  color: var(--v2-text-primary);
}

.v2-dialog::part(overlay) {
  background: var(--v2-surface-overlay);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.v2-dialog::part(header) {
  background: var(--v2-surface-card);
  color: var(--v2-text-primary);
}

.v2-dialog::part(close-button) {
  color: var(--v2-text-muted);
}

.v2-dialog::part(close-button__base) {
  color: var(--v2-text-muted);
  transition: color var(--v2-transition-fast), background-color var(--v2-transition-fast);
}

.v2-dialog::part(close-button__base):hover {
  color: var(--v2-text-secondary);
  background-color: color-mix(in srgb, var(--v2-text-muted) 8%, transparent);
}

/* Body content inside v2-dialog */
.v2-dialog::part(body) {
  color: var(--v2-text-secondary);
}

/* Inputs inside v2-dialog inherit v2-input styles */
.v2-dialog wa-input {
  --border-radius: 0.5rem;
  --border-color: var(--v2-border-strong);
  --focus-ring-color: var(--v2-brand-primary);
  --wa-input-color: var(--v2-text-primary);
  --wa-input-placeholder-color: var(--v2-text-muted);
}

.v2-dialog wa-input::part(base) {
  background: transparent;
}

.v2-dialog wa-input::part(input) {
  color: var(--v2-text-primary);
  -webkit-text-fill-color: var(--v2-text-primary);
  caret-color: var(--v2-text-primary);
}

/* ============================================================
   Feedback messages
   ============================================================
   Reusable error and success message styles.
   Use class="v2-error" or class="v2-success".
   Toggle visibility with class="is-visible".
   ============================================================ */
.v2-error {
  background: color-mix(in srgb, var(--v2-danger) 10%, var(--v2-surface-card));
  color: var(--v2-danger-text);
  border: 1px solid color-mix(in srgb, var(--v2-danger) 20%, var(--v2-border-default));
  border-radius: 0.5rem;
  padding: 0.75rem 1rem;
  font-size: 0.875rem;
  line-height: 1.4;
  display: none;
}

.v2-error.is-visible {
  display: block;
}

.v2-success {
  background: color-mix(in srgb, var(--v2-brand-primary) 10%, var(--v2-surface-card));
  color: var(--v2-brand-primary);
  border: 1px solid color-mix(in srgb, var(--v2-brand-primary) 20%, var(--v2-border-default));
  border-radius: 0.5rem;
  padding: 0.75rem 1rem;
  font-size: 0.875rem;
  line-height: 1.4;
  display: none;
}

.v2-success.is-visible {
  display: block;
}

/* ============================================================
   Divider
   ============================================================
   Horizontal line with centered text (e.g., "or").
   Use class="v2-divider".
   ============================================================ */
.v2-divider {
  display: flex;
  align-items: center;
  gap: 1rem;
  color: var(--v2-text-muted);
  font-size: 0.8rem;
}

.v2-divider::before,
.v2-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--v2-border-default);
}

/* ============================================================
   wa-button CTAs
   ============================================================
   Shared button styles: v2-cta-primary, v2-cta-secondary,
   v2-cta-on-dark. Apply as class on <wa-button>.
   ============================================================ */

/* ---- Primary CTA (teal, solid) ---- */
wa-button.v2-cta-primary::part(base) {
  font-family: var(--v2-font-body);
  font-weight: 600;
  font-size: 1.05rem;
  padding: 0.875rem 2rem;
  border-radius: 0.625rem;
  background: var(--v2-brand-primary);
  border-color: var(--v2-brand-primary);
  color: var(--v2-text-inverse);
  transition: all 0.25s cubic-bezier(0.22, 1, 0.36, 1);
  box-shadow: var(--v2-shadow-brand-md);
}

wa-button.v2-cta-primary::part(base):hover {
  background: var(--v2-brand-primary-light);
  border-color: var(--v2-brand-primary-light);
  color: var(--v2-text-on-brand-light);
  box-shadow: var(--v2-shadow-brand-lg);
  transform: translateY(-1px);
}

/* ---- Secondary CTA (outline) ---- */
wa-button.v2-cta-secondary::part(base) {
  font-family: var(--v2-font-body);
  font-weight: 600;
  font-size: 1.05rem;
  padding: 0.875rem 2rem;
  border-radius: 0.625rem;
  background: transparent;
  border: 2px solid var(--v2-border-strong);
  color: var(--v2-text-primary);
  transition: all 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}

wa-button.v2-cta-secondary::part(base):hover {
  border-color: var(--v2-brand-primary);
  color: var(--v2-brand-primary);
  background: color-mix(in srgb, var(--v2-brand-primary) 8%, transparent);
  transform: translateY(-1px);
}

wa-button.v2-cta-secondary::part(base):focus-visible {
  box-shadow: var(--v2-focus-ring);
}

/* ---- CTA on dark backgrounds ---- */
wa-button.v2-cta-on-dark::part(base) {
  font-family: var(--v2-font-body);
  font-weight: 600;
  font-size: 1.05rem;
  padding: 0.875rem 2rem;
  border-radius: 0.625rem;
  background: #ffffff;
  border-color: #ffffff;
  color: #134e4a;
  transition: all 0.25s cubic-bezier(0.22, 1, 0.36, 1);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2);
}

wa-button.v2-cta-on-dark::part(base):hover {
  background: #f0fdfb;
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
}

/* ---- Danger CTA (solid red) ---- */
wa-button.v2-cta-danger::part(base) {
  font-family: var(--v2-font-body);
  font-weight: 600;
  border-radius: 0.625rem;
  background: var(--v2-danger);
  border-color: var(--v2-danger);
  color: #ffffff;
  transition: all 0.25s cubic-bezier(0.22, 1, 0.36, 1);
  box-shadow: 0 4px 14px color-mix(in srgb, var(--v2-danger) 30%, transparent);
}

wa-button.v2-cta-danger::part(base):hover {
  background: color-mix(in srgb, var(--v2-danger) 85%, #000);
  border-color: color-mix(in srgb, var(--v2-danger) 85%, #000);
  box-shadow: 0 6px 20px color-mix(in srgb, var(--v2-danger) 40%, transparent);
  transform: translateY(-1px);
}

wa-button.v2-cta-danger::part(base):focus-visible {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--v2-danger) 30%, transparent);
}

/* ---- Danger CTA outlined (red border + text) ---- */
wa-button.v2-cta-danger-outline::part(base) {
  font-family: var(--v2-font-body);
  font-weight: 600;
  border-radius: 0.625rem;
  background: transparent;
  border: 1px solid color-mix(in srgb, var(--v2-danger) 50%, transparent);
  color: var(--v2-danger-text);
  transition: all 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}

wa-button.v2-cta-danger-outline::part(base):hover {
  background: color-mix(in srgb, var(--v2-danger) 8%, var(--v2-surface-card));
  border-color: var(--v2-danger);
  color: var(--v2-danger-text);
  transform: translateY(-1px);
}

wa-button.v2-cta-danger-outline::part(base):focus-visible {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--v2-danger) 25%, transparent);
}

/* ---- Reduced Motion (buttons) ---- */
@media (prefers-reduced-motion: reduce) {
  wa-button.v2-cta-primary::part(base):hover,
  wa-button.v2-cta-secondary::part(base):hover,
  wa-button.v2-cta-on-dark::part(base):hover,
  wa-button.v2-cta-danger::part(base):hover,
  wa-button.v2-cta-danger-outline::part(base):hover {
    transform: none;
  }
}

/* ============================================================
   wa-button neutral variant (V2 pages)
   ============================================================
   Overrides neutral button styles so they adapt to dark mode.
   Uses ::part(base) for reliable styling (same pattern as CTAs).
   ============================================================ */
wa-button[variant="neutral"][appearance="plain"]::part(base) {
  background: transparent;
  border-color: transparent;
  color: var(--v2-text-muted);
  transition: color var(--v2-transition-fast), background var(--v2-transition-fast);
}

wa-button[variant="neutral"][appearance="plain"]::part(base):hover {
  background: color-mix(in srgb, var(--v2-text-muted) 10%, transparent);
  color: var(--v2-brand-primary);
}

wa-button[variant="neutral"][appearance="outlined"]::part(base) {
  background: transparent;
  border-color: var(--v2-border-strong);
  color: var(--v2-text-secondary);
  transition: color var(--v2-transition-fast), border-color var(--v2-transition-fast), background var(--v2-transition-fast);
}

wa-button[variant="neutral"][appearance="outlined"]::part(base):hover {
  border-color: var(--v2-brand-primary);
  color: var(--v2-brand-primary);
  background: color-mix(in srgb, var(--v2-brand-primary) 6%, transparent);
}

/* ============================================================
   Dark-mode scrollbar
   ============================================================
   Global scrollbar theming for V2 pages in dark mode.
   Applies to all elements with overflow scroll/auto.
   ============================================================ */
[data-theme="dark"] * {
  scrollbar-color: var(--v2-border-strong) transparent;
}

[data-theme="dark"] *::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

[data-theme="dark"] *::-webkit-scrollbar-track {
  background: transparent;
}

[data-theme="dark"] *::-webkit-scrollbar-thumb {
  background: var(--v2-border-strong);
  border-radius: 4px;
}

[data-theme="dark"] *::-webkit-scrollbar-thumb:hover {
  background: var(--v2-text-muted);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) * {
    scrollbar-color: var(--v2-border-strong) transparent;
  }

  :root:not([data-theme="light"]) *::-webkit-scrollbar {
    width: 8px;
    height: 8px;
  }

  :root:not([data-theme="light"]) *::-webkit-scrollbar-track {
    background: transparent;
  }

  :root:not([data-theme="light"]) *::-webkit-scrollbar-thumb {
    background: var(--v2-border-strong);
    border-radius: 4px;
  }

  :root:not([data-theme="light"]) *::-webkit-scrollbar-thumb:hover {
    background: var(--v2-text-muted);
  }
}

/* ============================================================
   System banners (subscription alert, password update)
   ============================================================
   Full-width banners above the header for system notifications.
   Two severity levels: warning (amber) and danger (red).
   ============================================================ */
.v2-banner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.625rem 1rem;
  font-family: var(--v2-font-body);
  font-size: 0.85rem;
  line-height: 1.4;
  text-align: center;
  flex-wrap: wrap;
}

.v2-banner strong {
  font-weight: 700;
}

.v2-banner a {
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: opacity var(--v2-transition-fast);
}

.v2-banner a:hover {
  opacity: 0.8;
}

/* Warning (amber) */
.v2-banner--warning {
  background: color-mix(in srgb, var(--v2-brand-accent) 15%, var(--v2-surface-card));
  color: var(--v2-text-primary);
  border-bottom: 1px solid color-mix(in srgb, var(--v2-brand-accent) 25%, var(--v2-border-default));
}

.v2-banner--warning a {
  color: var(--v2-text-primary);
}

/* Danger (red) */
.v2-banner--danger {
  background: color-mix(in srgb, var(--v2-danger) 12%, var(--v2-surface-card));
  color: var(--v2-danger-text);
  border-bottom: 1px solid color-mix(in srgb, var(--v2-danger) 20%, var(--v2-border-default));
}

.v2-banner--danger a {
  color: var(--v2-danger-text);
}

.v2-banner i {
  flex-shrink: 0;
}

/* ============================================================
   User avatar dropdown
   ============================================================
   Avatar button + dropdown menu in the V2 header.
   Desktop only; mobile uses the mobile menu items.
   ============================================================ */

/* Avatar circle */
.v2-avatar-btn {
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--v2-font-display);
  font-weight: 700;
  font-size: 0.8rem;
  line-height: 1;
  background: color-mix(in srgb, var(--v2-brand-primary) 15%, var(--v2-surface-card));
  color: var(--v2-brand-primary);
  transition: box-shadow var(--v2-transition-fast), background var(--v2-transition-fast);
}

.v2-avatar-btn:hover {
  background: color-mix(in srgb, var(--v2-brand-primary) 22%, var(--v2-surface-card));
}

.v2-avatar-btn:focus-visible {
  outline: none;
  box-shadow: var(--v2-focus-ring);
}

/* Dropdown container */
.v2-avatar-wrap {
  position: relative;
}

.v2-avatar-dropdown {
  position: absolute;
  top: calc(100% + 0.5rem);
  right: 0;
  width: 15rem;
  background: var(--v2-surface-card);
  border: 1px solid var(--v2-border-default);
  border-radius: 0.75rem;
  box-shadow: var(--v2-shadow-neutral-lg);
  padding: 0.5rem 0;
  z-index: 100;
  opacity: 0;
  transform: translateY(-4px);
  pointer-events: none;
  transition: opacity var(--v2-transition-fast), transform var(--v2-transition-fast);
}

.v2-avatar-dropdown.is-open {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

@media (prefers-reduced-motion: reduce) {
  .v2-avatar-dropdown {
    transition: none;
  }
}

/* Header section (email + plan) */
.v2-avatar-dropdown-header {
  padding: 0.625rem 0.875rem;
  border-bottom: 1px solid var(--v2-border-default);
  margin-bottom: 0.25rem;
}

.v2-avatar-dropdown-email {
  font-size: 0.78rem;
  color: var(--v2-text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin: 0;
}

.v2-avatar-dropdown-plan {
  display: inline-block;
  margin-top: 0.375rem;
  padding: 0.125rem 0.5rem;
  border-radius: 1rem;
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  background: color-mix(in srgb, var(--v2-brand-primary) 12%, var(--v2-surface-card));
  color: var(--v2-brand-primary);
}

/* Menu items */
.v2-avatar-dropdown-item {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  width: 100%;
  padding: 0.5rem 0.875rem;
  font-size: 0.85rem;
  font-family: var(--v2-font-body);
  color: var(--v2-text-secondary);
  text-decoration: none;
  background: transparent;
  border: none;
  cursor: pointer;
  transition: background var(--v2-transition-fast), color var(--v2-transition-fast);
  text-align: left;
}

.v2-avatar-dropdown-item:hover {
  background: color-mix(in srgb, var(--v2-brand-primary) 6%, var(--v2-surface-card));
  color: var(--v2-text-primary);
}

.v2-avatar-dropdown-item:focus-visible {
  outline: none;
  box-shadow: inset var(--v2-focus-ring);
}

.v2-avatar-dropdown-item i {
  width: 1rem;
  text-align: center;
  font-size: 0.85rem;
  color: var(--v2-text-muted);
}

.v2-avatar-dropdown-item:hover i {
  color: var(--v2-brand-primary);
}

/* Separator */
.v2-avatar-dropdown-sep {
  height: 1px;
  background: var(--v2-border-default);
  margin: 0.25rem 0;
}

/* Theme row (special layout) */
.v2-avatar-dropdown-theme {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.5rem 0.875rem;
  font-size: 0.85rem;
  color: var(--v2-text-secondary);
}

.v2-avatar-dropdown-theme i {
  width: 1rem;
  text-align: center;
  font-size: 0.85rem;
  color: var(--v2-text-muted);
}

.v2-theme-switcher {
  display: flex;
  margin-left: auto;
  border: 1px solid var(--v2-border-default);
  border-radius: 0.375rem;
  overflow: hidden;
}

.v2-theme-switcher button {
  padding: 0.25rem 0.5rem;
  font-size: 0.7rem;
  background: transparent;
  color: var(--v2-text-muted);
  border: none;
  cursor: pointer;
  transition: background var(--v2-transition-fast), color var(--v2-transition-fast);
}

.v2-theme-switcher button:not(:last-child) {
  border-right: 1px solid var(--v2-border-default);
}

.v2-theme-switcher button.is-active {
  background: color-mix(in srgb, var(--v2-brand-primary) 12%, var(--v2-surface-card));
  color: var(--v2-brand-primary);
}

.v2-theme-switcher button:hover:not(.is-active) {
  background: color-mix(in srgb, var(--v2-text-muted) 6%, var(--v2-surface-card));
}

.v2-theme-switcher button:focus-visible {
  outline: none;
  box-shadow: inset var(--v2-focus-ring);
}

/* Admin label */
.v2-avatar-dropdown-label {
  padding: 0.375rem 0.875rem 0.125rem;
  font-size: 0.65rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--v2-text-muted);
}

/* ============================================================
   Shared table pagination (used by table-utils.js)
   ============================================================
   Shared styles for any page using table-utils.js pagination.
   Page-specific accent colors can override --v2-brand-secondary.
   ============================================================ */
.v2-table-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  padding: 0.75rem 0;
  flex-wrap: wrap;
}

.v2-table-page-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2rem;
  height: 2rem;
  padding: 0 0.5rem;
  border: 1px solid var(--v2-border-default);
  border-radius: 0.375rem;
  background: var(--v2-surface-card);
  color: var(--v2-text-secondary);
  font-family: var(--v2-font-body);
  font-size: 0.8125rem;
  font-weight: 500;
  cursor: pointer;
  transition: all var(--v2-transition-fast);
}

.v2-table-page-btn:hover:not([disabled]) {
  border-color: var(--v2-brand-secondary, var(--v2-brand-primary));
  color: var(--v2-brand-secondary, var(--v2-brand-primary));
  background: color-mix(in srgb, var(--v2-brand-secondary, var(--v2-brand-primary)) 5%, var(--v2-surface-card));
}

.v2-table-page-btn.is-active {
  background: var(--v2-brand-secondary, var(--v2-brand-primary));
  border-color: var(--v2-brand-secondary, var(--v2-brand-primary));
  color: #ffffff;
}

.v2-table-page-btn[disabled] {
  opacity: 0.35;
  cursor: not-allowed;
}

.v2-table-page-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--v2-brand-secondary, var(--v2-brand-primary)) 25%, transparent);
}

.v2-table-page-ellipsis {
  padding: 0 0.25rem;
  color: var(--v2-text-muted);
  font-size: 0.8125rem;
}

.v2-table-page-info {
  margin-left: 0.75rem;
  font-size: 0.75rem;
  color: var(--v2-text-muted);
  font-family: var(--v2-font-body);
}