/*
 * Shared SaaS theme contract.
 *
 * Each visual preset in this directory only defines tokens. This file turns
 * those tokens into Bootstrap 5.3 overrides plus a handful of SaaS-oriented
 * components used by the showcase page and future product integration.
 *
 * Theme preset files must be loaded AFTER:
 *   1) /luxar/luxar.min.css
 *   2) /themes/saas-theme-base.css
 */

html[data-saas-theme] {
  color-scheme: var(--st-color-scheme, light);

  --bs-primary: var(--st-primary);
  --bs-primary-rgb: var(--st-primary-rgb);
  --bs-secondary: var(--st-secondary);
  --bs-secondary-rgb: var(--st-secondary-rgb);
  --bs-success: var(--st-success);
  --bs-success-rgb: var(--st-success-rgb);
  --bs-warning: var(--st-warning);
  --bs-warning-rgb: var(--st-warning-rgb);
  --bs-danger: var(--st-danger);
  --bs-danger-rgb: var(--st-danger-rgb);
  --bs-info: var(--st-info);
  --bs-info-rgb: var(--st-info-rgb);

  --bs-body-bg: var(--st-bg);
  --bs-body-bg-rgb: var(--st-bg-rgb);
  --bs-body-color: var(--st-ink);
  --bs-body-color-rgb: var(--st-ink-rgb);
  --bs-body-secondary-color: var(--st-muted);
  --bs-body-secondary-color-rgb: var(--st-muted-rgb);
  --bs-body-tertiary-color: var(--st-muted);
  --bs-body-tertiary-color-rgb: var(--st-muted-rgb);
  --bs-secondary-color: var(--st-muted);
  --bs-secondary-color-rgb: var(--st-muted-rgb);
  --bs-secondary-bg: var(--st-surface-2);
  --bs-tertiary-bg: var(--st-surface-3);
  --bs-heading-color: var(--st-ink);
  --bs-emphasis-color: var(--st-ink);
  --bs-border-color: var(--st-line);
  --bs-border-color-translucent: var(--st-line-soft);
  --bs-link-color: var(--st-primary);
  --bs-link-color-rgb: var(--st-primary-rgb);
  --bs-link-hover-color: var(--st-accent);
  --bs-link-hover-color-rgb: var(--st-accent-rgb);
  --bs-focus-ring-color: rgba(var(--st-primary-rgb), 0.22);
  --bs-primary-text-emphasis: var(--st-primary);
  --bs-primary-bg-subtle: rgba(var(--st-primary-rgb), 0.12);
  --bs-primary-border-subtle: rgba(var(--st-primary-rgb), 0.24);
  --bs-secondary-text-emphasis: var(--st-secondary);
  --bs-secondary-bg-subtle: rgba(var(--st-secondary-rgb), 0.12);
  --bs-secondary-border-subtle: rgba(var(--st-secondary-rgb), 0.24);
  --bs-success-text-emphasis: var(--st-success);
  --bs-success-bg-subtle: rgba(var(--st-success-rgb), 0.12);
  --bs-success-border-subtle: rgba(var(--st-success-rgb), 0.24);
  --bs-info-text-emphasis: var(--st-info);
  --bs-info-bg-subtle: rgba(var(--st-info-rgb), 0.12);
  --bs-info-border-subtle: rgba(var(--st-info-rgb), 0.24);
  --bs-warning-text-emphasis: var(--st-warning);
  --bs-warning-bg-subtle: rgba(var(--st-warning-rgb), 0.14);
  --bs-warning-border-subtle: rgba(var(--st-warning-rgb), 0.28);
  --bs-danger-text-emphasis: var(--st-danger);
  --bs-danger-bg-subtle: rgba(var(--st-danger-rgb), 0.12);
  --bs-danger-border-subtle: rgba(var(--st-danger-rgb), 0.24);
  --bs-form-valid-color: var(--st-success);
  --bs-form-valid-border-color: var(--st-success);
  --bs-form-invalid-color: var(--st-danger);
  --bs-form-invalid-border-color: var(--st-danger);

  --bs-border-radius-sm: var(--st-radius-sm);
  --bs-border-radius: var(--st-radius-md);
  --bs-border-radius-lg: var(--st-radius-lg);
  --bs-border-radius-xl: var(--st-radius-xl);
  --bs-box-shadow-sm: var(--st-shadow-sm);
  --bs-box-shadow: var(--st-shadow-md);
  --bs-box-shadow-lg: var(--st-shadow-lg);
}

html[data-saas-theme],
html[data-saas-theme] body {
  min-height: 100%;
  background: var(--st-body-background);
  background-attachment: fixed;
  color: var(--st-ink);
}

html[data-saas-theme] body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: var(--st-grid-opacity, 0);
  background-image:
    linear-gradient(var(--st-grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--st-grid-line) 1px, transparent 1px);
  background-size: 28px 28px;
  mask-image: radial-gradient(circle at 50% 12%, #000 0, transparent 72%);
  z-index: 0;
}

html[data-saas-theme] body > :not(.modal):not(.modal-backdrop):not(.offcanvas) {
  position: relative;
  z-index: 1;
}

html[data-saas-theme] .bg-white {
  background-color: var(--st-surface) !important;
}

html[data-saas-theme] .bg-light {
  background-color: var(--st-surface-2) !important;
}

html[data-saas-theme] .text-secondary {
  color: var(--st-muted) !important;
}

html[data-saas-theme] .border,
html[data-saas-theme] .border-top,
html[data-saas-theme] .border-end,
html[data-saas-theme] .border-bottom,
html[data-saas-theme] .border-start {
  border-color: var(--st-line) !important;
}

html[data-saas-theme] .navbar {
  background: var(--st-nav-bg);
  border-bottom: 1px solid var(--st-line-soft);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

html[data-saas-theme] .navbar-brand,
html[data-saas-theme] .navbar .nav-link {
  color: var(--st-ink);
}

html[data-saas-theme] .card,
html[data-saas-theme] .modal-content,
html[data-saas-theme] .offcanvas,
html[data-saas-theme] .dropdown-menu,
html[data-saas-theme] .list-group-item,
html[data-saas-theme] .accordion-item {
  background: var(--st-surface);
  border: 1px solid var(--st-line);
  color: var(--st-ink);
  box-shadow: var(--st-shadow-sm);
}

html[data-saas-theme] .card {
  border-radius: var(--st-radius-lg);
}

html[data-saas-theme] .card-body {
  color: var(--st-ink);
}

html[data-saas-theme] .card-header,
html[data-saas-theme] .card-footer {
  background: transparent;
  border-color: var(--st-line-soft);
}

html[data-saas-theme] .btn {
  border-radius: var(--st-radius-md);
  font-weight: 700;
}

html[data-saas-theme] .btn::before {
  display: none;
}

html[data-saas-theme] .btn-primary {
  --bs-btn-bg: var(--st-primary);
  --bs-btn-border-color: var(--st-primary);
  --bs-btn-hover-bg: var(--st-primary-strong);
  --bs-btn-hover-border-color: var(--st-primary-strong);
  --bs-btn-active-bg: var(--st-primary-strong);
  --bs-btn-active-border-color: var(--st-primary-strong);
  --bs-btn-color: var(--st-on-primary);
  --bs-btn-hover-color: var(--st-on-primary);
  --bs-btn-active-color: var(--st-on-primary);
  background: var(--st-button-primary-bg);
  border-color: var(--st-button-primary-border);
  color: var(--st-on-primary);
  box-shadow: var(--st-button-primary-shadow);
}

html[data-saas-theme] .btn-primary:hover,
html[data-saas-theme] .btn-primary:focus,
html[data-saas-theme] .btn-primary:active {
  background: var(--st-button-primary-hover-bg);
  border-color: var(--st-button-primary-hover-border);
  color: var(--st-on-primary);
  box-shadow: var(--st-button-primary-hover-shadow);
}

html[data-saas-theme] .btn-outline-primary {
  --bs-btn-color: var(--st-primary);
  --bs-btn-border-color: rgba(var(--st-primary-rgb), 0.42);
  --bs-btn-hover-bg: var(--st-primary);
  --bs-btn-hover-border-color: var(--st-primary);
  background: var(--st-button-outline-bg);
  border-color: var(--st-button-outline-border);
  color: var(--st-primary);
  box-shadow: var(--st-button-outline-shadow);
}

html[data-saas-theme] .btn-outline-primary:hover,
html[data-saas-theme] .btn-outline-primary:focus,
html[data-saas-theme] .btn-outline-primary:active {
  background: var(--st-button-outline-hover-bg);
  border-color: var(--st-button-outline-hover-border);
  color: var(--st-primary);
  box-shadow: var(--st-button-outline-hover-shadow);
}

html[data-saas-theme] .btn-light,
html[data-saas-theme] .btn-secondary,
html[data-saas-theme] .btn-outline-secondary {
  --bs-btn-bg: var(--st-surface-2);
  --bs-btn-border-color: var(--st-line);
  --bs-btn-color: var(--st-ink);
  --bs-btn-hover-bg: var(--st-surface-3);
  --bs-btn-hover-border-color: var(--st-line);
  --bs-btn-hover-color: var(--st-ink);
  background: var(--st-button-light-bg);
  border-color: var(--st-button-light-border);
  color: var(--st-ink);
  box-shadow: var(--st-button-light-shadow);
}

html[data-saas-theme] .btn-light:hover,
html[data-saas-theme] .btn-light:focus,
html[data-saas-theme] .btn-light:active,
html[data-saas-theme] .btn-secondary:hover,
html[data-saas-theme] .btn-secondary:focus,
html[data-saas-theme] .btn-secondary:active,
html[data-saas-theme] .btn-outline-secondary:hover,
html[data-saas-theme] .btn-outline-secondary:focus,
html[data-saas-theme] .btn-outline-secondary:active {
  background: var(--st-button-light-hover-bg);
  border-color: var(--st-button-light-hover-border);
  color: var(--st-ink);
  box-shadow: var(--st-button-light-hover-shadow);
}

html[data-saas-theme] .btn-dark {
  background: var(--st-sidebar-bg);
  border-color: var(--st-sidebar-bg);
  color: var(--st-sidebar-ink);
  box-shadow: var(--st-shadow-sm);
}

html[data-saas-theme] .btn-dark:hover,
html[data-saas-theme] .btn-dark:focus,
html[data-saas-theme] .btn-dark:active {
  background: var(--st-primary-strong);
  border-color: var(--st-primary-strong);
  color: var(--st-sidebar-ink);
}

html[data-saas-theme] .btn-group,
html[data-saas-theme] .btn-group-vertical {
  background: transparent;
  border: 0;
  box-shadow: none;
}

html[data-saas-theme] .btn-success,
html[data-saas-theme] .btn-info,
html[data-saas-theme] .btn-warning,
html[data-saas-theme] .btn-danger {
  border-color: transparent;
  box-shadow: var(--st-shadow-sm);
}

html[data-saas-theme] .btn-success {
  background: var(--st-success);
  color: var(--st-on-success);
}

html[data-saas-theme] .btn-info {
  background: var(--st-info);
  color: var(--st-on-info);
}

html[data-saas-theme] .btn-warning {
  background: var(--st-warning);
  color: var(--st-on-warning);
}

html[data-saas-theme] .btn-danger {
  background: var(--st-danger);
  color: var(--st-on-danger);
}

html[data-saas-theme] .btn-success:hover,
html[data-saas-theme] .btn-success:focus,
html[data-saas-theme] .btn-success:active {
  background: var(--st-success);
  color: var(--st-on-success);
}

html[data-saas-theme] .btn-info:hover,
html[data-saas-theme] .btn-info:focus,
html[data-saas-theme] .btn-info:active {
  background: var(--st-info);
  color: var(--st-on-info);
}

html[data-saas-theme] .btn-warning:hover,
html[data-saas-theme] .btn-warning:focus,
html[data-saas-theme] .btn-warning:active {
  background: var(--st-warning);
  color: var(--st-on-warning);
}

html[data-saas-theme] .btn-danger:hover,
html[data-saas-theme] .btn-danger:focus,
html[data-saas-theme] .btn-danger:active {
  background: var(--st-danger);
  color: var(--st-on-danger);
}

html[data-saas-theme] .btn-success:hover,
html[data-saas-theme] .btn-success:focus,
html[data-saas-theme] .btn-success:active,
html[data-saas-theme] .btn-info:hover,
html[data-saas-theme] .btn-info:focus,
html[data-saas-theme] .btn-info:active,
html[data-saas-theme] .btn-warning:hover,
html[data-saas-theme] .btn-warning:focus,
html[data-saas-theme] .btn-warning:active,
html[data-saas-theme] .btn-danger:hover,
html[data-saas-theme] .btn-danger:focus,
html[data-saas-theme] .btn-danger:active {
  filter: brightness(0.95);
  box-shadow: var(--st-shadow-md);
}

html[data-saas-theme] .btn-outline-success,
html[data-saas-theme] .btn-outline-info,
html[data-saas-theme] .btn-outline-warning,
html[data-saas-theme] .btn-outline-danger {
  background: transparent;
  box-shadow: none;
}

html[data-saas-theme] .btn-outline-success {
  color: var(--st-success);
  border-color: rgba(var(--st-success-rgb), 0.4);
}

html[data-saas-theme] .btn-outline-info {
  color: var(--st-info);
  border-color: rgba(var(--st-info-rgb), 0.4);
}

html[data-saas-theme] .btn-outline-warning {
  color: var(--st-warning);
  border-color: rgba(var(--st-warning-rgb), 0.42);
}

html[data-saas-theme] .btn-outline-danger {
  color: var(--st-danger);
  border-color: rgba(var(--st-danger-rgb), 0.4);
}

html[data-saas-theme] .btn-outline-success:hover,
html[data-saas-theme] .btn-outline-success:focus,
html[data-saas-theme] .btn-outline-success:active {
  background: rgba(var(--st-success-rgb), 0.12);
  border-color: rgba(var(--st-success-rgb), 0.6);
  color: var(--st-success);
}

html[data-saas-theme] .btn-outline-info:hover,
html[data-saas-theme] .btn-outline-info:focus,
html[data-saas-theme] .btn-outline-info:active {
  background: rgba(var(--st-info-rgb), 0.12);
  border-color: rgba(var(--st-info-rgb), 0.6);
  color: var(--st-info);
}

html[data-saas-theme] .btn-outline-warning:hover,
html[data-saas-theme] .btn-outline-warning:focus,
html[data-saas-theme] .btn-outline-warning:active {
  background: rgba(var(--st-warning-rgb), 0.14);
  border-color: rgba(var(--st-warning-rgb), 0.64);
  color: var(--st-warning);
}

html[data-saas-theme] .btn-outline-danger:hover,
html[data-saas-theme] .btn-outline-danger:focus,
html[data-saas-theme] .btn-outline-danger:active {
  background: rgba(var(--st-danger-rgb), 0.12);
  border-color: rgba(var(--st-danger-rgb), 0.6);
  color: var(--st-danger);
}

html[data-saas-theme] .badge {
  border-radius: 999px;
  letter-spacing: 0.01em;
}

html[data-saas-theme] .badge.text-bg-primary,
html[data-saas-theme] .badge.text-bg-secondary,
html[data-saas-theme] .badge.text-bg-success,
html[data-saas-theme] .badge.text-bg-info,
html[data-saas-theme] .badge.text-bg-warning,
html[data-saas-theme] .badge.text-bg-danger {
  border: 1px solid transparent;
  font-weight: 800;
}

html[data-saas-theme] .badge.text-bg-primary {
  background: rgba(var(--st-primary-rgb), 0.12) !important;
  border-color: rgba(var(--st-primary-rgb), 0.18);
  color: var(--st-primary) !important;
}

html[data-saas-theme] .badge.text-bg-secondary {
  background: rgba(var(--st-secondary-rgb), 0.12) !important;
  border-color: rgba(var(--st-secondary-rgb), 0.18);
  color: var(--st-secondary) !important;
}

html[data-saas-theme] .badge.text-bg-success {
  background: rgba(var(--st-success-rgb), 0.14) !important;
  border-color: rgba(var(--st-success-rgb), 0.18);
  color: var(--st-success) !important;
}

html[data-saas-theme] .badge.text-bg-info {
  background: rgba(var(--st-info-rgb), 0.14) !important;
  border-color: rgba(var(--st-info-rgb), 0.18);
  color: var(--st-info) !important;
}

html[data-saas-theme] .badge.text-bg-warning {
  background: rgba(var(--st-warning-rgb), 0.16) !important;
  border-color: rgba(var(--st-warning-rgb), 0.2);
  color: var(--st-warning) !important;
}

html[data-saas-theme] .badge.text-bg-danger {
  background: rgba(var(--st-danger-rgb), 0.14) !important;
  border-color: rgba(var(--st-danger-rgb), 0.18);
  color: var(--st-danger) !important;
}

html[data-saas-theme] .form-control,
html[data-saas-theme] .form-select,
html[data-saas-theme] .input-group-text {
  background: var(--st-input-bg);
  color: var(--st-ink);
  border-color: var(--st-line);
  border-radius: var(--st-radius-md);
}

html[data-saas-theme] .form-control::placeholder {
  color: var(--st-muted);
}

html[data-saas-theme] .form-label,
html[data-saas-theme] .form-check-label {
  color: var(--st-ink);
}

html[data-saas-theme] .form-control:focus,
html[data-saas-theme] .form-select:focus {
  background: var(--st-input-bg-focus);
  border-color: rgba(var(--st-primary-rgb), 0.64);
  box-shadow: 0 0 0 0.25rem rgba(var(--st-primary-rgb), 0.16);
}

html[data-saas-theme] .input-group {
  box-shadow: none;
}

html[data-saas-theme] .form-check-input {
  background-color: var(--st-input-bg);
  border-color: rgba(var(--st-primary-rgb), 0.34);
}

html[data-saas-theme] .form-check-input:checked {
  background-color: var(--st-primary);
  border-color: var(--st-primary);
  box-shadow: 0 4px 14px rgba(var(--st-primary-rgb), 0.18);
}

html[data-saas-theme] .form-check-input:checked[type='checkbox'],
html[data-saas-theme] .form-check-input:checked[type='radio'] {
  background-image: var(--bs-form-check-bg-image);
}

html[data-saas-theme] .form-switch .form-check-input {
  background-color: rgba(var(--st-primary-rgb), 0.28);
  background-image: radial-gradient(circle at 0.7em 50%, #fff 0 0.43em, transparent 0.45em);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  border-color: rgba(var(--st-primary-rgb), 0.22);
  box-shadow: inset 0 0 0 1px rgba(var(--st-primary-rgb), 0.08);
}

html[data-saas-theme] .form-switch .form-check-input:not(:checked) {
  background-color: rgba(var(--st-primary-rgb), 0.28);
  background-image: radial-gradient(circle at 0.7em 50%, #fff 0 0.43em, transparent 0.45em);
  background-repeat: no-repeat;
  border-color: rgba(var(--st-primary-rgb), 0.22);
  background-position: left center;
}

html[data-saas-theme] .form-switch .form-check-input:not(:checked):not(:focus) {
  background-image: radial-gradient(circle at 0.7em 50%, #fff 0 0.43em, transparent 0.45em);
}

html[data-saas-theme] .form-switch .form-check-input:focus {
  background-image: radial-gradient(circle at 0.7em 50%, #fff 0 0.43em, transparent 0.45em);
}

html[data-saas-theme] .form-switch .form-check-input:checked {
  background-color: var(--st-primary);
  background-image: radial-gradient(
    circle at calc(100% - 0.7em) 50%,
    #fff 0 0.43em,
    transparent 0.45em
  );
  background-repeat: no-repeat;
  background-position: right center;
  border-color: var(--st-primary);
  box-shadow: 0 4px 14px rgba(var(--st-primary-rgb), 0.18);
}

html[data-saas-theme] .form-range {
  --st-range-progress: 50%;
  height: 1.5rem;
  background: transparent;
  accent-color: var(--st-primary);
}

html[data-saas-theme] .form-range::-webkit-slider-thumb {
  width: 1.25rem;
  height: 1.25rem;
  margin-top: -0.375rem;
  background: var(--st-button-primary-bg);
  border: 2px solid var(--st-surface);
  border-radius: 999px;
  box-shadow: 0 6px 16px rgba(var(--st-primary-rgb), 0.28);
}

html[data-saas-theme] .form-range:focus::-webkit-slider-thumb {
  box-shadow:
    0 0 0 0.18rem var(--st-surface),
    0 0 0 0.34rem rgba(var(--st-primary-rgb), 0.18),
    0 8px 18px rgba(var(--st-primary-rgb), 0.26);
}

html[data-saas-theme] .form-range::-webkit-slider-runnable-track {
  height: 0.5rem;
  cursor: pointer;
  background:
    linear-gradient(
      90deg,
      var(--st-primary) 0 var(--st-range-progress),
      rgba(var(--st-primary-rgb), 0.16) var(--st-range-progress) 100%
    );
  border-radius: 999px;
}

html[data-saas-theme] .form-range::-moz-range-thumb {
  width: 1.25rem;
  height: 1.25rem;
  background: var(--st-button-primary-bg);
  border: 2px solid var(--st-surface);
  border-radius: 999px;
  box-shadow: 0 6px 16px rgba(var(--st-primary-rgb), 0.28);
}

html[data-saas-theme] .form-range::-moz-range-track {
  height: 0.5rem;
  cursor: pointer;
  background: rgba(var(--st-primary-rgb), 0.16);
  border-radius: 999px;
}

html[data-saas-theme] .form-range::-moz-range-progress {
  height: 0.5rem;
  background: var(--st-primary);
  border-radius: 999px;
}

html[data-saas-theme] .nav-tabs,
html[data-saas-theme] .nav-pills {
  gap: 0.35rem;
  width: 100%;
}

html[data-saas-theme] .nav-tabs {
  padding: 0.35rem;
  background: var(--st-surface);
  border: 1px solid var(--st-line);
  border-radius: var(--st-radius-lg);
  box-shadow: var(--st-shadow-sm);
}

html[data-saas-theme] .nav-pills {
  padding: 0.35rem;
  background: var(--st-surface);
  border: 1px solid var(--st-line);
  border-radius: var(--st-radius-lg);
  box-shadow: var(--st-shadow-sm);
}

html[data-saas-theme] .nav-tabs .nav-link,
html[data-saas-theme] .nav-pills .nav-link {
  border-radius: var(--st-radius-md);
  color: var(--st-muted);
}

html[data-saas-theme] .nav-tabs .nav-link.active,
html[data-saas-theme] .nav-pills .nav-link.active {
  background: var(--st-primary);
  color: var(--st-on-primary);
  border-color: var(--st-primary);
  box-shadow: 0 12px 24px rgba(var(--st-primary-rgb), 0.16);
}

html[data-saas-theme] .dropdown-menu {
  --bs-dropdown-bg: var(--st-surface);
  --bs-dropdown-border-color: var(--st-line);
  --bs-dropdown-box-shadow: var(--st-shadow-md);
  --bs-dropdown-link-color: var(--st-ink);
  --bs-dropdown-link-hover-color: var(--st-ink);
  --bs-dropdown-link-hover-bg: rgba(var(--st-primary-rgb), 0.08);
  --bs-dropdown-link-active-bg: var(--st-primary);
  --bs-dropdown-link-active-color: var(--st-on-primary);
  --bs-dropdown-divider-bg: var(--st-line-soft);
  --bs-dropdown-header-color: var(--st-muted);
  border-radius: var(--st-radius-lg);
}

html[data-saas-theme] .dropdown-item.active,
html[data-saas-theme] .dropdown-item:active {
  background: var(--st-primary);
  color: var(--st-on-primary);
}

html[data-saas-theme] .dropdown-divider {
  border-top-color: var(--st-line-soft);
}

html[data-saas-theme] .breadcrumb {
  --bs-breadcrumb-divider-color: var(--st-muted);
  --bs-breadcrumb-item-active-color: var(--st-primary);
  padding: 0.6rem 0.8rem;
  background: var(--st-surface);
  border: 1px solid var(--st-line);
  border-radius: var(--st-radius-md);
  box-shadow: var(--st-shadow-sm);
}

html[data-saas-theme] .pagination {
  --bs-pagination-color: var(--st-ink);
  --bs-pagination-bg: var(--st-surface);
  --bs-pagination-border-color: var(--st-line);
  --bs-pagination-hover-color: var(--st-primary);
  --bs-pagination-hover-bg: rgba(var(--st-primary-rgb), 0.08);
  --bs-pagination-hover-border-color: rgba(var(--st-primary-rgb), 0.2);
  --bs-pagination-active-color: var(--st-on-primary);
  --bs-pagination-active-bg: var(--st-primary);
  --bs-pagination-active-border-color: var(--st-primary);
  --bs-pagination-disabled-bg: var(--st-surface-2);
  --bs-pagination-disabled-border-color: var(--st-line-soft);
}

html[data-saas-theme] .pagination .page-link {
  background: var(--st-surface);
  border-color: var(--st-line);
  color: var(--st-ink);
  box-shadow: var(--st-shadow-sm);
}

html[data-saas-theme] .pagination .page-item.disabled .page-link {
  background: var(--st-surface-2);
  border-color: var(--st-line-soft);
  color: var(--st-muted);
  box-shadow: none;
}

html[data-saas-theme] .page-item.active .page-link {
  background: var(--st-primary);
  border-color: var(--st-primary);
  color: var(--st-on-primary);
  box-shadow: 0 12px 24px rgba(var(--st-primary-rgb), 0.18);
}

html[data-saas-theme] .table {
  --bs-table-color: var(--st-ink);
  --bs-table-bg: transparent;
  --bs-table-border-color: var(--st-line-soft);
}

html[data-saas-theme] .table > :not(caption) > * > * {
  border-bottom-color: var(--st-line-soft);
}

html[data-saas-theme] .table thead th {
  color: var(--st-muted);
  background: var(--st-surface-2);
  border-bottom-color: var(--st-line);
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

html[data-saas-theme] .table tbody tr:hover > * {
  background: rgba(var(--st-primary-rgb), 0.055);
}

html[data-saas-theme] .table tbody td {
  color: var(--st-ink);
}

html[data-saas-theme] .progress {
  background: var(--st-surface-3);
  border-radius: 999px;
  box-shadow: inset 0 1px 2px rgba(var(--st-ink-rgb), 0.08);
}

html[data-saas-theme] .progress-bar {
  background: linear-gradient(90deg, var(--st-primary), var(--st-accent));
  box-shadow: 0 4px 12px rgba(var(--st-primary-rgb), 0.18);
}

html[data-saas-theme] .alert {
  border-radius: var(--st-radius-lg);
  border-width: 1px;
  box-shadow: var(--st-shadow-sm);
}

html[data-saas-theme] .alert-primary {
  background: rgba(var(--st-primary-rgb), 0.12);
  border-color: rgba(var(--st-primary-rgb), 0.24);
  color: var(--st-ink);
}

html[data-saas-theme] .alert-success {
  background: rgba(var(--st-success-rgb), 0.12);
  border-color: rgba(var(--st-success-rgb), 0.24);
  color: var(--st-ink);
}

html[data-saas-theme] .alert-warning {
  background: rgba(var(--st-warning-rgb), 0.14);
  border-color: rgba(var(--st-warning-rgb), 0.28);
  color: var(--st-ink);
}

html[data-saas-theme] .alert-danger {
  background: rgba(var(--st-danger-rgb), 0.12);
  border-color: rgba(var(--st-danger-rgb), 0.24);
  color: var(--st-ink);
}

html[data-saas-theme] .alert-info {
  background: rgba(var(--st-info-rgb), 0.12);
  border-color: rgba(var(--st-info-rgb), 0.24);
  color: var(--st-ink);
}

html[data-saas-theme] .accordion {
  --bs-accordion-bg: var(--st-surface);
  --bs-accordion-color: var(--st-ink);
  --bs-accordion-border-color: var(--st-line);
  --bs-accordion-btn-color: var(--st-ink);
  --bs-accordion-btn-bg: var(--st-surface);
  --bs-accordion-active-color: var(--st-primary);
  --bs-accordion-active-bg: rgba(var(--st-primary-rgb), 0.08);
}

html[data-saas-theme] .accordion-button:not(.collapsed) {
  background: rgba(var(--st-primary-rgb), 0.08);
  color: var(--st-primary);
  box-shadow: inset 0 -1px 0 rgba(var(--st-primary-rgb), 0.18);
}

html[data-saas-theme] .list-group {
  --bs-list-group-color: var(--st-ink);
  --bs-list-group-bg: var(--st-surface);
  --bs-list-group-border-color: var(--st-line);
  --bs-list-group-action-hover-color: var(--st-primary);
  --bs-list-group-action-hover-bg: rgba(var(--st-primary-rgb), 0.08);
}

html[data-saas-theme] .list-group-item.active {
  background: var(--st-primary);
  border-color: var(--st-primary);
  color: var(--st-on-primary);
}

html[data-saas-theme] .toast {
  --bs-toast-bg: var(--st-surface);
  --bs-toast-border-color: var(--st-line);
  --bs-toast-box-shadow: var(--st-shadow-md);
  --bs-toast-header-bg: var(--st-surface-2);
  --bs-toast-header-color: var(--st-muted);
  --bs-toast-header-border-color: var(--st-line-soft);
  background: var(--st-surface);
  border-color: var(--st-line);
  box-shadow: var(--st-shadow-md);
  color: var(--st-ink);
}

html[data-saas-theme] .toast-header {
  background: var(--st-surface-2);
  border-color: var(--st-line-soft);
  color: var(--st-muted);
}

html[data-saas-theme] .toast-header strong {
  color: var(--st-ink);
}

html[data-saas-theme] .toast-header small {
  color: var(--st-muted);
}

html[data-saas-theme] .popover {
  --bs-popover-bg: var(--st-surface);
  --bs-popover-border-color: var(--st-line);
  --bs-popover-box-shadow: var(--st-shadow-md);
  --bs-popover-header-color: var(--st-ink);
  --bs-popover-header-bg: var(--st-surface-2);
  --bs-popover-body-color: var(--st-muted);
  background: var(--st-surface);
  border-color: var(--st-line);
  box-shadow: var(--st-shadow-md);
  color: var(--st-ink);
}

html[data-saas-theme] .tooltip {
  --bs-tooltip-bg: var(--st-tooltip-bg);
  --bs-tooltip-color: var(--st-tooltip-ink);
}

html[data-saas-theme] .tooltip-inner {
  box-shadow: var(--st-shadow-md);
}

html[data-saas-theme] .modal-content,
html[data-saas-theme] .offcanvas {
  border-radius: var(--st-radius-xl);
}

html[data-saas-theme] .placeholder {
  background-color: rgba(var(--st-primary-rgb), 0.16);
}

html[data-saas-theme] .spinner-border.text-primary,
html[data-saas-theme] .spinner-grow.text-primary {
  color: var(--st-primary) !important;
}

html[data-saas-theme] .link-primary {
  color: var(--st-primary) !important;
  text-decoration-color: rgba(var(--st-primary-rgb), 0.42) !important;
}

html[data-saas-theme] .link-primary:hover,
html[data-saas-theme] .link-primary:focus {
  color: var(--st-accent) !important;
  text-decoration-color: rgba(var(--st-accent-rgb), 0.56) !important;
}

/* ─── SaaS showcase / future reusable patterns ───────────────────── */

.saas-theme-shell {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  min-height: 560px;
  overflow: hidden;
  border: 1px solid var(--st-line);
  border-radius: var(--st-radius-xl);
  box-shadow: var(--st-shadow-lg);
  background: var(--st-surface);
}

.saas-theme-sidebar {
  background: var(--st-sidebar-bg);
  color: var(--st-sidebar-ink);
  border-right: 1px solid var(--st-sidebar-line);
  padding: 1.25rem;
}

.saas-theme-sidebar .eyebrow {
  color: var(--st-sidebar-muted);
}

.saas-theme-eyebrow {
  color: var(--st-muted);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.saas-theme-sidebar .brand {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 0.45rem 0 1.4rem;
  font-weight: 800;
}

.saas-theme-sidebar .brand-mark {
  width: 2rem;
  height: 2rem;
  border-radius: 0.8rem;
  background: linear-gradient(135deg, var(--st-primary), var(--st-accent));
  box-shadow: 0 14px 30px rgba(var(--st-primary-rgb), 0.28);
}

.saas-theme-sidebar .nav-link {
  color: var(--st-sidebar-muted);
  border-radius: var(--st-radius-md);
  padding: 0.72rem 0.82rem;
  font-weight: 700;
}

.saas-theme-sidebar .nav-link:hover,
.saas-theme-sidebar .nav-link.active {
  color: var(--st-sidebar-ink);
  background: var(--st-sidebar-active);
}

.saas-theme-main {
  background: var(--st-main-bg);
  padding: 1.35rem;
}

.saas-theme-kpi {
  min-height: 122px;
  padding: 1.15rem;
  border-radius: var(--st-radius-lg);
  border: 1px solid var(--st-line);
  background: var(--st-surface);
  box-shadow: var(--st-shadow-sm);
}

.saas-theme-kpi .value {
  font-size: clamp(1.4rem, 3vw, 2.2rem);
  line-height: 1;
  font-weight: 800;
  letter-spacing: -0.04em;
}

.saas-theme-kpi .delta {
  color: var(--st-success);
  font-weight: 700;
}

.saas-theme-chart {
  min-height: 170px;
  border-radius: var(--st-radius-lg);
  border: 1px solid var(--st-line);
  background:
    linear-gradient(180deg, transparent, rgba(var(--st-primary-rgb), 0.04)),
    var(--st-surface);
  position: relative;
  overflow: hidden;
}

.saas-theme-chart::before {
  content: "";
  position: absolute;
  inset: 18px 18px 24px;
  background:
    linear-gradient(to top, var(--st-line-soft) 1px, transparent 1px),
    linear-gradient(to right, var(--st-line-soft) 1px, transparent 1px);
  background-size: 100% 25%, 20% 100%;
}

.saas-theme-chart::after {
  content: "";
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 24px;
  height: 74%;
  background:
    linear-gradient(
      130deg,
      transparent 0 5%,
      var(--st-primary) 5% 7%,
      transparent 7% 23%,
      var(--st-primary) 23% 25%,
      transparent 25% 42%,
      var(--st-accent) 42% 44%,
      transparent 44% 61%,
      var(--st-primary) 61% 63%,
      transparent 63% 80%,
      var(--st-accent) 80% 82%,
      transparent 82% 100%
    );
  clip-path: polygon(0 88%, 18% 70%, 34% 78%, 49% 44%, 64% 57%, 79% 28%, 100% 10%, 100% 100%, 0 100%);
  opacity: 0.95;
}

.saas-theme-pipeline {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.8rem;
}

.saas-theme-stage {
  min-height: 138px;
  padding: 0.9rem;
  border-radius: var(--st-radius-lg);
  background: var(--st-surface);
  border: 1px solid var(--st-line);
}

.saas-theme-stage-card {
  margin-top: 0.75rem;
  padding: 0.72rem;
  border-radius: var(--st-radius-md);
  background: var(--st-surface-2);
  border: 1px solid var(--st-line-soft);
}

.saas-theme-client {
  min-height: 250px;
  padding: 1.1rem;
  border-radius: var(--st-radius-xl);
  background:
    linear-gradient(145deg, rgba(var(--st-primary-rgb), 0.08), transparent 55%),
    var(--st-surface);
  border: 1px solid var(--st-line);
}

.saas-theme-client-photo {
  height: 110px;
  border-radius: var(--st-radius-lg);
  background:
    linear-gradient(135deg, rgba(var(--st-primary-rgb), 0.14), rgba(var(--st-accent-rgb), 0.2)),
    var(--st-surface-2);
}

.saas-theme-swatch {
  width: 100%;
  height: 58px;
  border-radius: var(--st-radius-md);
  border: 1px solid var(--st-line);
}

.theme-doc-hero {
  padding: clamp(1.25rem, 4vw, 2.25rem);
  border-radius: var(--st-radius-xl);
  background:
    linear-gradient(135deg, rgba(var(--st-primary-rgb), 0.1), transparent 55%),
    var(--st-surface);
  border: 1px solid var(--st-line);
  box-shadow: var(--st-shadow-md);
}

.theme-doc-card {
  height: 100%;
  cursor: pointer;
  transition: transform 140ms ease, box-shadow 140ms ease, border-color 140ms ease;
}

.theme-doc-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--st-shadow-md);
}

.theme-doc-card.active {
  border-color: rgba(var(--st-primary-rgb), 0.6);
  box-shadow: 0 0 0 3px rgba(var(--st-primary-rgb), 0.14), var(--st-shadow-md);
}

.theme-doc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1rem;
}

.component-block {
  padding: 1rem;
  border-radius: var(--st-radius-lg);
  background: var(--st-surface);
  border: 1px solid var(--st-line);
  box-shadow: var(--st-shadow-sm);
}

.theme-doc-table-wrap {
  overflow: hidden;
  border-radius: var(--st-radius-lg);
  border: 1px solid var(--st-line);
}

@media (max-width: 991px) {
  .saas-theme-shell {
    grid-template-columns: 1fr;
  }

  .saas-theme-sidebar {
    display: none;
  }
}

@media (max-width: 767px) {
  .saas-theme-pipeline {
    grid-template-columns: 1fr;
  }
}

/* ════════════════════════════════════════════════════════════════════
 * Wave 58 — admin layout overrides (apps/admin)
 * Сайдбар, topbar, nav-item'ы в admin'е имеют hardcoded цвета в
 * globals.css. Чтобы themes реально меняли их вид — overрайдим тут
 * с !important.
 * ════════════════════════════════════════════════════════════════════ */

html[data-saas-theme] .sidebar,
html[data-saas-theme] .lx-sidebar {
  background: var(--st-sidebar-bg) !important;
  border-right-color: var(--st-sidebar-line, var(--st-line)) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

html[data-saas-theme] .sidebar-logo {
  border-bottom-color: var(--st-sidebar-line, var(--st-line)) !important;
}

html[data-saas-theme] .sidebar-logo .logo-title {
  color: var(--st-sidebar-ink, var(--st-ink)) !important;
}

html[data-saas-theme] .sidebar-logo .logo-sub {
  color: var(--st-sidebar-muted, var(--st-muted)) !important;
}

html[data-saas-theme] .nav-section-label,
html[data-saas-theme] .lx-sidebar-section {
  color: var(--st-sidebar-muted, var(--st-muted)) !important;
}

html[data-saas-theme] .nav-item,
html[data-saas-theme] .lx-sidebar-link {
  color: var(--st-sidebar-ink, var(--st-ink)) !important;
  background: transparent !important;
  border-color: transparent !important;
}

html[data-saas-theme] .nav-item:hover,
html[data-saas-theme] .lx-sidebar-link:hover {
  background: var(--st-sidebar-active, rgba(var(--st-primary-rgb), 0.08)) !important;
  color: var(--st-sidebar-ink, var(--st-ink)) !important;
}

html[data-saas-theme] .nav-item.active,
html[data-saas-theme] .lx-sidebar-link.active {
  background: var(--st-primary) !important;
  color: var(--st-on-primary, #fff) !important;
  border-color: transparent !important;
  box-shadow: 0 8px 24px rgba(var(--st-primary-rgb), 0.32) !important;
}

html[data-saas-theme] .sidebar-footer {
  border-top-color: var(--st-sidebar-line, var(--st-line)) !important;
  color: var(--st-sidebar-muted, var(--st-muted)) !important;
}

/* Topbar (header в admin'е поверх контента) */
html[data-saas-theme] .topbar {
  background: var(--st-nav-bg, var(--st-surface)) !important;
  border-bottom-color: var(--st-line) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

html[data-saas-theme] .topbar-title {
  color: var(--st-ink) !important;
}

html[data-saas-theme] .topbar-meta {
  color: var(--st-muted) !important;
}

/* Main content area background */
html[data-saas-theme] .main {
  background: var(--st-main-bg, var(--st-bg)) !important;
}

html[data-saas-theme] body,
html[data-saas-theme] .layout {
  background: var(--st-bg) !important;
}

/* Page-level headings внутри content */
html[data-saas-theme] .content h1 {
  color: var(--st-ink) !important;
}

/* ════════════════════════════════════════════════════════════════════
 * Wave 58 (round 2) — комплексный admin override
 * Admin globals.css имеет hardcoded body background (gradient) и
 * `color: var(--gray-900)` — почти чёрный текст. При тёмной теме
 * результат был: тёмный текст на тёмном фоне.
 *
 * Сейчас фундаментально перекрываем body + общие text-colors через
 * --st-* токены.
 * ════════════════════════════════════════════════════════════════════ */

html[data-saas-theme] body {
  background: var(--st-body-background, var(--st-bg)) !important;
  background-attachment: fixed;
  color: var(--st-ink) !important;
}

html[data-saas-theme] {
  color-scheme: var(--st-color-scheme, light);
}

/* Headings — admin ставит `color: var(--gray-900)` на h1/h2/h3 */
html[data-saas-theme] .content h1,
html[data-saas-theme] .content h2,
html[data-saas-theme] .content h3,
html[data-saas-theme] h1,
html[data-saas-theme] h2,
html[data-saas-theme] h3,
html[data-saas-theme] h4,
html[data-saas-theme] h5,
html[data-saas-theme] h6 {
  color: var(--st-ink) !important;
}

/* Параграфы и body-текст */
html[data-saas-theme] p,
html[data-saas-theme] li {
  color: inherit;
}

/* Form inputs — admin: bg=white, color=gray-900, border=gray-300.
   При тёмной теме — белые input'ы на тёмном фоне читаются плохо.
   Важно: чекбоксы, radio, switch и range не должны попадать под этот
   общий override — у них собственная геометрия и собственная заливка. */
html[data-saas-theme] input:not([type='checkbox']):not([type='radio']):not([type='range']),
html[data-saas-theme] textarea,
html[data-saas-theme] select {
  background: var(--st-surface) !important;
  color: var(--st-ink) !important;
  border-color: var(--st-line) !important;
}

html[data-saas-theme] input::placeholder,
html[data-saas-theme] textarea::placeholder {
  color: var(--st-muted) !important;
  opacity: 0.7;
}

/* .lx-mono / .text-mono / .muted — admin использует для метаданных */
html[data-saas-theme] .lx-mono,
html[data-saas-theme] .text-mono {
  color: var(--st-muted) !important;
}

html[data-saas-theme] .muted {
  color: var(--st-muted) !important;
}

/* Breadcrumb (.breadcrumb-link / nav.breadcrumb) — admin styling */
html[data-saas-theme] .breadcrumb,
html[data-saas-theme] .breadcrumb a,
html[data-saas-theme] .breadcrumb-link {
  color: var(--st-muted) !important;
}

html[data-saas-theme] .breadcrumb .active,
html[data-saas-theme] .breadcrumb-item.active {
  color: var(--st-ink) !important;
}

/* Cards — admin часто `bg-white shadow`. */
html[data-saas-theme] .card {
  background: var(--st-surface) !important;
  color: var(--st-ink) !important;
  border-color: var(--st-line) !important;
}

html[data-saas-theme] .card-body,
html[data-saas-theme] .card-header,
html[data-saas-theme] .card-footer {
  background: transparent !important;
  color: inherit !important;
  border-color: var(--st-line) !important;
}

/* Tables — admin Bootstrap tables */
html[data-saas-theme] .table {
  --bs-table-bg: var(--st-surface);
  --bs-table-color: var(--st-ink);
  --bs-table-border-color: var(--st-line);
  --bs-table-striped-bg: var(--st-surface-2);
  --bs-table-striped-color: var(--st-ink);
  --bs-table-hover-bg: var(--st-surface-2);
  --bs-table-hover-color: var(--st-ink);
}

html[data-saas-theme] .table thead {
  background: var(--st-surface-2);
  color: var(--st-muted);
}

/* Кнопки .btn-secondary / .btn-outline-secondary — themed */
html[data-saas-theme] .btn-secondary {
  --bs-btn-bg: var(--st-surface-2);
  --bs-btn-border-color: var(--st-line);
  --bs-btn-color: var(--st-ink);
  --bs-btn-hover-bg: var(--st-surface-3);
  --bs-btn-hover-border-color: var(--st-line);
  --bs-btn-hover-color: var(--st-ink);
}

html[data-saas-theme] .btn-outline-secondary {
  --bs-btn-color: var(--st-ink);
  --bs-btn-border-color: var(--st-line);
  --bs-btn-hover-bg: var(--st-surface-2);
  --bs-btn-hover-color: var(--st-ink);
  --bs-btn-hover-border-color: var(--st-line);
}

html[data-saas-theme] .btn-light {
  --bs-btn-bg: var(--st-surface-2);
  --bs-btn-color: var(--st-ink);
  --bs-btn-border-color: var(--st-line);
  --bs-btn-hover-bg: var(--st-surface-3);
  --bs-btn-hover-color: var(--st-ink);
}

/* Search input в sidebar (Cmd+K) */
html[data-saas-theme] .sidebar input[type="search"],
html[data-saas-theme] .sidebar input[type="text"] {
  background: var(--st-surface-2, var(--st-surface)) !important;
  border-color: var(--st-line) !important;
}

/* Дополнительный sidebar items (mobile-bar, dropdowns) */
html[data-saas-theme] .dropdown-menu {
  background: var(--st-surface) !important;
  border-color: var(--st-line) !important;
  color: var(--st-ink) !important;
}

html[data-saas-theme] .dropdown-item {
  color: var(--st-ink) !important;
}

html[data-saas-theme] .dropdown-item:hover {
  background: var(--st-surface-2) !important;
  color: var(--st-ink) !important;
}

html[data-saas-theme] .dropdown-item.active,
html[data-saas-theme] .dropdown-item:active {
  background: var(--st-primary) !important;
  color: var(--st-on-primary) !important;
}

/* Глобальная отмена backdrop-filter — он сильно искажает темы */
html[data-saas-theme] .sidebar,
html[data-saas-theme] .topbar,
html[data-saas-theme] .lx-card {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}