/* ==========================================================================
   COMPONENTS — §7 of docs/ui_theme_implementation_plan.md
   Restyles Sneat/Bootstrap classes in place + adds the .rz-* extras that the
   <x-rz.*> Blade components emit.
   ========================================================================== */

/* ---------- 7.4 Cards ---------- */
.card {
  --bs-card-border-radius: var(--rz-radius);
  --bs-card-inner-border-radius: calc(var(--rz-radius) - 1px);
  --bs-card-spacer-x: 1.25rem;
  --bs-card-spacer-y: 1.25rem;
  --bs-card-cap-padding-x: 1.25rem;
  --bs-card-cap-padding-y: 1rem;
  background: var(--rz-surface-raised);
  border: 1px solid var(--rz-border-subtle) !important;
  border-radius: var(--rz-radius);
  box-shadow: var(--rz-shadow-sm) !important;
}
.card-header {
  background: transparent;
  border-bottom: 0;
  padding: 1rem 1.25rem 0;
}
.card-header + .card-body,
.card-header + .card-datatable,
.card-header + .table-responsive { padding-top: 1rem; }
.card-title,
.card-header .card-title,
.card-header h5,
.card-header .h5 {
  font-size: 0.90625rem;
  font-weight: 600;
  color: var(--rz-text-primary);
  margin-bottom: 0;
}
.card-subtitle { font-size: 0.75rem; color: var(--rz-text-tertiary) !important; margin-top: 2px; }
.card-footer {
  background: var(--rz-surface-sunken);
  border-top: 1px solid var(--rz-border-subtle);
  padding: 0.875rem 1.25rem;
}

/* Header / footer "strips" (§7.4) */
.card-header.rz-strip,
.rz-card-strip .card-header {
  background: var(--rz-surface-sunken);
  border-bottom: 1px solid var(--rz-border-subtle);
  padding: 1rem 1.25rem;
}
.rz-card-strip .card-header + .card-body { padding-top: 1.25rem; }

/* Card variants */
.card.rz-card-accent-start { border-inline-start: 3px solid var(--rz-tone, var(--rz-primary)) !important; }
.card.rz-card-accent-end { border-inline-end: 3px solid var(--rz-tone, var(--rz-primary)) !important; }
.card.rz-card-accent-top { border-top: 3px solid var(--rz-tone, var(--rz-primary)) !important; }
.card.rz-card-accent-bottom { border-bottom: 3px solid var(--rz-tone, var(--rz-primary)) !important; }
.card.rz-card-dashed { border: 1px dashed var(--rz-border-strong) !important; box-shadow: none !important; }
.card.rz-card-outline { border-color: var(--rz-tone, var(--rz-primary)) !important; }
.card.rz-card-fill-primary { background: var(--rz-primary); border-color: transparent !important; color: rgba(255, 255, 255, 0.82); }
.card.rz-card-fill-primary .card-title,
.card.rz-card-fill-primary h5,
.card.rz-card-fill-dark .card-title,
.card.rz-card-fill-dark h5 { color: #fff; }
.card.rz-card-fill-light { background: var(--rz-surface-sunken); box-shadow: none !important; }
.card.rz-card-fill-dark { background: var(--rz-neutral-900); border-color: transparent !important; color: rgba(255, 255, 255, 0.75); }
.card.rz-card-hero {
  position: relative;
  overflow: hidden;
  background: linear-gradient(150deg, var(--rz-primary-700) 0%, #0f3a30 100%);
  border: 0 !important;
  color: rgba(255, 255, 255, 0.78);
}
.card.rz-card-hero::after {
  content: "";
  position: absolute;
  inset-inline-end: -60px;
  top: -60px;
  width: 220px;
  height: 220px;
  border-radius: 50%;
  border: 36px solid rgba(255, 255, 255, 0.05);
  pointer-events: none;
}
.card.rz-card-hero .card-title,
.card.rz-card-hero h5,
.card.rz-card-hero h4 { color: #fff; }
.card.rz-card-hero .card-subtitle { color: rgba(255, 255, 255, 0.7) !important; }
.rz-glass {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--rz-radius);
  backdrop-filter: blur(12px);
}

[class*="rz-tone-"] { --rz-tone: var(--rz-primary); }
.rz-tone-success { --rz-tone: var(--rz-success-600); }
.rz-tone-warning { --rz-tone: var(--rz-warning-600); }
.rz-tone-danger { --rz-tone: var(--rz-danger-600); }
.rz-tone-info { --rz-tone: var(--rz-info-600); }
.rz-tone-accent { --rz-tone: var(--rz-accent-500); }
.rz-tone-neutral { --rz-tone: var(--rz-neutral-500); }

/* ---------- 7.1 Buttons ---------- */
.btn {
  --bs-btn-padding-y: 0.55rem;
  --bs-btn-padding-x: 1rem;
  --bs-btn-font-size: 0.8125rem;
  --bs-btn-font-weight: 600;
  --bs-btn-border-radius: var(--rz-radius);
  --bs-btn-line-height: 1.25;
  gap: 0.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--rz-radius);
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  box-shadow: none;
  transition: background-color 0.15s, box-shadow 0.15s, transform 0.1s, border-color 0.15s, color 0.15s;
}
.btn:active:not(:disabled):not(.disabled) { transform: scale(0.97); }
.btn i.mdi,
.btn .tf-icons { font-size: 1rem; }
.btn-sm, .btn-group-sm > .btn {
  --bs-btn-padding-y: 0.35rem;
  --bs-btn-padding-x: 0.75rem;
  --bs-btn-font-size: 0.75rem;
  border-radius: var(--rz-radius);
}
.btn-lg, .btn-group-lg > .btn {
  --bs-btn-padding-y: 0.75rem;
  --bs-btn-padding-x: 1.5rem;
  --bs-btn-font-size: 0.875rem;
  border-radius: var(--rz-radius);
}
.btn.rounded-pill { border-radius: var(--rz-radius-pill); }

/* Compact buttons after login (product decision 2026-10-12): every button on signed-in portal
   pages (html.rz-app) renders at btn-sm size — default and btn-lg buttons alike, including
   buttons injected by JS (DataTables, AJAX modals). Guest screens keep the regular size. */
html.rz-app .btn,
html.rz-app .btn-lg,
html.rz-app .btn-group-lg > .btn {
  --bs-btn-padding-y: 0.35rem;
  --bs-btn-padding-x: 0.75rem;
  --bs-btn-font-size: 0.75rem;
}
html.rz-app .btn i.mdi,
html.rz-app .btn .tf-icons { font-size: 0.9375rem; line-height: 1; } /* icon never makes a button taller than its label */
html.rz-app .btn i.mdi::before { font-size: inherit; line-height: 1; } /* Sneat sizes the glyph itself at 18px */

/* Icon buttons: 30 / 35 / 44 */
.btn-icon { width: 35px; height: 35px; padding: 0; }
.btn-icon.btn-sm { width: 30px; height: 30px; }
.btn-icon.btn-lg { width: 44px; height: 44px; }
html.rz-app .btn-icon,
html.rz-app .btn-icon.btn-lg { width: 30px; height: 30px; }

/* Signature solid primary / danger: vertical gradient + glow */
.btn-primary {
  background: linear-gradient(180deg, var(--rz-primary-500), var(--rz-primary-700)) !important;
  border-color: var(--rz-primary-600) !important;
  color: #fff !important;
  box-shadow: var(--rz-glow-primary) !important;
}
.btn-primary:hover,
.btn-primary:focus-visible {
  background: linear-gradient(180deg, var(--rz-primary-400), var(--rz-primary-600)) !important;
  border-color: var(--rz-primary-600) !important;
}
.btn-danger {
  background: linear-gradient(180deg, var(--rz-danger-500), var(--rz-danger-700)) !important;
  border-color: var(--rz-danger-600) !important;
  color: #fff !important;
}
.btn-danger:hover,
.btn-danger:focus-visible { background: linear-gradient(180deg, var(--rz-danger-400), var(--rz-danger-600)) !important; border-color: var(--rz-danger-600) !important; }
/* Materio greys every disabled solid button via
   .btn[class*=btn-]:not(...)×5:disabled — match that specificity so loading / disabled
   primary and danger buttons keep their tone at 50% opacity instead. */
.btn[class*=btn-]:not([class*=btn-label-]):not([class*=btn-outline-]):not([class*=btn-text-]):not(.btn-icon).btn-primary:disabled,
.btn[class*=btn-]:not([class*=btn-label-]):not([class*=btn-outline-]):not([class*=btn-text-]):not(.btn-icon).btn-primary.disabled,
.btn.btn-primary:disabled, .btn.btn-primary.disabled {
  background: var(--rz-primary-600) !important;
  border-color: var(--rz-primary-600) !important;
  color: #fff !important;
  box-shadow: none !important;
}
.btn[class*=btn-]:not([class*=btn-label-]):not([class*=btn-outline-]):not([class*=btn-text-]):not(.btn-icon).btn-danger:disabled,
.btn[class*=btn-]:not([class*=btn-label-]):not([class*=btn-outline-]):not([class*=btn-text-]):not(.btn-icon).btn-danger.disabled,
.btn.btn-danger:disabled, .btn.btn-danger.disabled {
  background: var(--rz-danger-600) !important;
  border-color: var(--rz-danger-600) !important;
  color: #fff !important;
  box-shadow: none !important;
}
.btn:disabled, .btn.disabled { opacity: 0.5; }

/* Neutral outline (the theme's default secondary action) */
.btn-outline-secondary {
  background: var(--rz-surface-raised) !important;
  border-color: var(--rz-border-default) !important;
  color: var(--rz-text-primary) !important;
}
.btn-outline-secondary:hover,
.btn-outline-secondary:focus-visible {
  background: var(--rz-surface-sunken) !important;
  border-color: var(--rz-border-strong) !important;
}

/* Ghost = Sneat's btn-label-*: tone-100 bg, tone border, tone text */
.btn-label-primary { background: var(--rz-primary-50) !important; border-color: var(--rz-primary-200) !important; color: var(--rz-primary-700) !important; }
.btn-label-primary:hover { background: var(--rz-primary-100) !important; }
.btn-label-success { background: var(--rz-success-50) !important; border-color: var(--rz-success-100) !important; color: var(--rz-success-700) !important; }
.btn-label-success:hover { background: var(--rz-success-100) !important; }
.btn-label-warning { background: var(--rz-warning-50) !important; border-color: var(--rz-warning-100) !important; color: var(--rz-warning-700) !important; }
.btn-label-warning:hover { background: var(--rz-warning-100) !important; }
.btn-label-danger { background: var(--rz-danger-50) !important; border-color: var(--rz-danger-100) !important; color: var(--rz-danger-700) !important; }
.btn-label-danger:hover { background: var(--rz-danger-100) !important; }
.btn-label-info { background: var(--rz-info-50) !important; border-color: var(--rz-info-100) !important; color: var(--rz-info-700) !important; }
.btn-label-info:hover { background: var(--rz-info-100) !important; }
.btn-label-secondary { background: var(--rz-surface-sunken) !important; border-color: var(--rz-border-subtle) !important; color: var(--rz-text-secondary) !important; }
.btn-label-secondary:hover { background: var(--rz-neutral-150) !important; color: var(--rz-text-primary) !important; }

/* Plain ghost (toolbar / row actions) */
.btn-text-secondary,
.btn-rz-ghost {
  background: transparent !important;
  border-color: transparent !important;
  color: var(--rz-text-secondary) !important;
  box-shadow: none !important;
}
.btn-outline-secondary,
[class*="btn-outline-"],
[class*="btn-label-"] { box-shadow: none !important; }
.btn-text-secondary:hover,
.btn-rz-ghost:hover {
  background: var(--rz-surface-sunken) !important;
  color: var(--rz-text-primary) !important;
}

/* Glass — only on brand / dark surfaces */
.btn-glass {
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.22);
  color: #fff;
}
.btn-glass:hover { background: rgba(255, 255, 255, 0.22); color: #fff; }

.btn .spinner-border { width: 0.875rem; height: 0.875rem; border-width: 0.15em; }

/* Pressed / toggled / open states. The recipes above use !important, which would otherwise
   flatten Bootstrap's .active, .show (open dropdown) and .btn-check:checked states. */
.btn-outline-secondary.active,
.btn-outline-secondary.show,
.btn-check:checked + .btn-outline-secondary,
.btn-text-secondary.active,
.btn-text-secondary.show,
.btn-rz-ghost.active,
.btn-rz-ghost.show,
.btn-check:checked + .btn-text-secondary { background: var(--rz-surface-sunken) !important; border-color: var(--rz-border-strong) !important; color: var(--rz-text-primary) !important; }
.btn-label-primary.active,
.btn-label-primary.show,
.btn-check:checked + .btn-label-primary { background: var(--rz-primary-100) !important; border-color: var(--rz-primary-400) !important; }
.btn-label-secondary.active,
.btn-label-secondary.show,
.btn-check:checked + .btn-label-secondary { background: var(--rz-neutral-150) !important; color: var(--rz-text-primary) !important; }

/* ---------- Keyboard focus ----------
   Bootstrap draws focus with box-shadow, which the button recipes above replace (glow / none),
   so every interactive element gets a visible outline ring for keyboard users instead.
   :focus-visible keeps mouse clicks ring-free. */
.btn:focus-visible,
.page-link:focus-visible,
.nav-link:focus-visible,
.list-group-item-action:focus-visible,
.accordion-button:focus-visible,
.btn-close:focus-visible,
a:focus-visible,
summary:focus-visible,
[role="button"]:focus-visible,
[tabindex]:not([tabindex="-1"]):focus-visible {
  outline: var(--rz-focus-outline) !important;
  outline-offset: 2px;
}
.dropdown-item:focus-visible,
.rz-palette__list [role="option"]:focus-visible { outline: var(--rz-focus-outline) !important; outline-offset: -2px; }
.bg-menu-theme .menu-link:focus-visible,
.rz-sidebar-user:focus-visible { outline: 2px solid var(--rz-primary-300) !important; outline-offset: -2px; }
.form-check-input:focus-visible { outline: var(--rz-focus-outline); outline-offset: 2px; }

/* ---------- 7.2 Badges ---------- */
.badge {
  --bs-badge-padding-x: 0.55rem;
  --bs-badge-padding-y: 0.2rem;
  --bs-badge-font-size: 0.6875rem;
  --bs-badge-font-weight: 700;
  --bs-badge-border-radius: var(--rz-radius);
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  border-radius: var(--rz-radius);
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.45;
  text-transform: none;
}
.badge.rounded-pill { border-radius: var(--rz-radius-pill); }
.badge.rz-badge-sm { --bs-badge-padding-x: 0.375rem; --bs-badge-padding-y: 0.0625rem; font-size: 0.65625rem; }

/* Soft (Sneat bg-label-*): tone-50 bg, tone-700 text */
.bg-label-primary { background-color: var(--rz-primary-50) !important; color: var(--rz-primary-700) !important; }
.bg-label-success { background-color: var(--rz-success-50) !important; color: var(--rz-success-700) !important; }
.bg-label-warning { background-color: var(--rz-warning-50) !important; color: var(--rz-warning-700) !important; }
.bg-label-danger { background-color: var(--rz-danger-50) !important; color: var(--rz-danger-700) !important; }
.bg-label-info { background-color: var(--rz-info-50) !important; color: var(--rz-info-700) !important; }
.bg-label-secondary,
.bg-label-dark { background-color: var(--rz-surface-sunken) !important; color: var(--rz-text-secondary) !important; }
.bg-label-accent { background-color: var(--rz-accent-50) !important; color: var(--rz-accent-700) !important; }

/* Solid emphasis (badge-solid-*) */
.rz-badge-solid-primary { background: linear-gradient(155deg, var(--rz-primary-500), var(--rz-primary-700)); color: #fff; box-shadow: var(--rz-glow-primary); }
.rz-badge-solid-success { background: linear-gradient(155deg, var(--rz-success-500), var(--rz-success-700)); color: #fff; }
.rz-badge-solid-warning { background: linear-gradient(155deg, var(--rz-warning-500), var(--rz-warning-700)); color: #fff; }
.rz-badge-solid-danger { background: linear-gradient(155deg, var(--rz-danger-500), var(--rz-danger-700)); color: #fff; box-shadow: var(--rz-glow-danger); }
.rz-badge-solid-info { background: linear-gradient(155deg, var(--rz-info-500), var(--rz-info-700)); color: #fff; }
.rz-badge-solid-accent { background: linear-gradient(155deg, var(--rz-accent-400), var(--rz-accent-600)); color: #fff; box-shadow: var(--rz-glow-accent); }
.rz-badge-solid-neutral { background: linear-gradient(155deg, var(--rz-neutral-500), var(--rz-neutral-700)); color: #fff; }

/* Ghost: soft bg + 1px tone border */
.rz-badge-ghost-primary { background: var(--rz-primary-50); color: var(--rz-primary-700); border: 1px solid var(--rz-primary-300); }
.rz-badge-ghost-success { background: var(--rz-success-50); color: var(--rz-success-700); border: 1px solid var(--rz-success-300); }
.rz-badge-ghost-warning { background: var(--rz-warning-50); color: var(--rz-warning-700); border: 1px solid var(--rz-warning-300); }
.rz-badge-ghost-danger { background: var(--rz-danger-50); color: var(--rz-danger-700); border: 1px solid var(--rz-danger-300); }
.rz-badge-ghost-info { background: var(--rz-info-50); color: var(--rz-info-700); border: 1px solid var(--rz-info-300); }
.rz-badge-ghost-accent { background: var(--rz-accent-50); color: var(--rz-accent-700); border: 1px solid var(--rz-accent-300); }
.rz-badge-ghost-neutral { background: var(--rz-surface-raised); color: var(--rz-text-secondary); border: 1px solid var(--rz-border-default); }

/* Solid badges with white text: warning-600 and accent-500 are too light for small white text (AA) */
.badge.bg-warning { background-color: var(--rz-warning-700) !important; }
.badge.bg-accent,
.bg-accent { background-color: var(--rz-accent-600) !important; color: #fff !important; }

/* Dot / image slots */
.rz-badge-dot::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  flex: none;
}
.badge > img { width: 12px; height: 12px; border-radius: 2px; object-fit: cover; }
.badge > i.mdi { font-size: 0.8125rem; line-height: 1; }

/* ---------- 7.3 Forms ---------- */
.form-label,
.col-form-label {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--rz-text-primary);
  margin-bottom: 0.5rem;
  text-transform: none;
  letter-spacing: 0;
}
.form-label .text-danger,
.form-label .required { color: var(--rz-danger-600) !important; }

/* Plain (non-floating) controls: 37.6px, 14px, 5px radius */
.form-control,
.form-select {
  font-family: var(--rz-font-sans);
  font-size: 0.875rem;
  color: var(--rz-text-primary);
  background-color: var(--rz-surface-raised);
  border: 1px solid var(--rz-border-default);
  border-radius: var(--rz-radius);
  box-shadow: none;
}
:not(.form-floating) > .form-control:not(textarea):not([type="file"]):not(.form-control-sm):not(.form-control-lg),
:not(.form-floating) > .form-select:not([multiple]):not(.form-select-sm):not(.form-select-lg) {
  min-height: var(--rz-control-height);
  padding-block: 0.4375rem;
  padding-inline: 0.625rem;
}
:not(.form-floating) > .form-select:not([multiple]) { padding-inline-end: 2.25rem; }
.form-control::placeholder,
.select2-search__field::placeholder { color: var(--rz-text-placeholder); opacity: 1; }
.form-control:hover:not(:disabled):not([readonly]),
.form-select:hover:not(:disabled) { border-color: var(--rz-border-strong); }
.form-control:focus,
.form-select:focus,
.form-floating-outline .form-control:focus,
.form-floating-outline .form-select:focus {
  border-color: var(--rz-primary-500) !important;
  box-shadow: var(--rz-focus-ring) !important;
  outline: 0;
}
.form-control:disabled,
.form-select:disabled { opacity: 0.5; background-color: var(--rz-surface-raised); }
.form-control[readonly] { background-color: var(--rz-surface-sunken); }
textarea.form-control { min-height: 96px; }
/* iOS Safari zooms the page into any input under 16px on focus */
@media (max-width: 575.98px) {
  .form-control, .form-select, .select2-search__field { font-size: 1rem; }
}

.form-control.is-valid, .was-validated .form-control:valid,
.form-select.is-valid, .was-validated .form-select:valid { border-color: var(--rz-success-600) !important; }
.form-control.is-invalid, .was-validated .form-control:invalid,
.form-select.is-invalid, .was-validated .form-select:invalid { border-color: var(--rz-danger-600) !important; }
.valid-feedback { color: var(--rz-success-600); font-size: 0.75rem; }
.invalid-feedback { color: var(--rz-danger-600); font-size: 0.75rem; }
.form-text { color: var(--rz-text-tertiary); font-size: 0.75rem; }

/* Floating-outline (Materio) keeps its geometry; just align radius/colour */
.form-floating-outline .form-control,
.form-floating-outline .form-select { border-radius: var(--rz-radius); }
.form-floating-outline label { color: var(--rz-text-tertiary); font-family: var(--rz-font-sans); }
.form-floating-outline .form-control:focus ~ label,
.form-floating-outline .form-select:focus ~ label { color: var(--rz-primary-600) !important; }

/* Input groups */
.input-group-text {
  background: var(--rz-surface-sunken);
  color: var(--rz-text-secondary);
  border-color: var(--rz-border-default);
  font-size: 0.875rem;
  border-radius: var(--rz-radius);
}
.input-group:focus-within .input-group-text { border-color: var(--rz-primary-500); }
.input-group:focus-within .form-control:focus { box-shadow: none !important; }
.input-group:focus-within { border-radius: var(--rz-radius); box-shadow: var(--rz-focus-ring); }
.input-group-merge .input-group-text { background: var(--rz-surface-raised); }

/* Leading icon input */
.rz-input-icon { position: relative; }
.rz-input-icon > i {
  position: absolute;
  inset-inline-start: 0.625rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--rz-text-tertiary);
  font-size: 1.0625rem;
  pointer-events: none;
}
.rz-input-icon > .form-control { padding-inline-start: 2rem !important; }

/* Checkbox / radio / switch */
.form-check-input {
  width: 1rem;
  height: 1rem;
  border: 1px solid var(--rz-border-strong);
  background-color: var(--rz-surface-raised);
}
.form-check-input[type="checkbox"] { border-radius: 0.3125rem; }
.form-check-input:checked,
.form-check-input[type="checkbox"]:indeterminate {
  background-color: var(--rz-primary-600) !important;
  border-color: var(--rz-primary-600) !important;
  box-shadow: none;
}
.form-check-input:focus { border-color: var(--rz-primary-500); box-shadow: var(--rz-focus-ring); }
.form-check-label { font-size: 0.8125rem; color: var(--rz-text-primary); }
.form-switch { padding-inline-start: 2.75rem; }
.form-switch .form-check-input {
  margin-inline-start: -2.75rem;
  width: 2rem;
  height: 1.125rem;
  border-radius: var(--rz-radius-pill);
  background-color: var(--rz-neutral-300);
  border-color: var(--rz-neutral-300);
  --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e");
  background-image: var(--bs-form-switch-bg) !important;
  transition: background-color 0.2s ease, background-position 0.2s ease;
}
.form-switch .form-check-input:checked { background-color: var(--rz-primary-600) !important; }
.form-check-success .form-check-input:checked { background-color: var(--rz-success-600) !important; border-color: var(--rz-success-600) !important; }
.form-check-warning .form-check-input:checked { background-color: var(--rz-warning-600) !important; border-color: var(--rz-warning-600) !important; }
.form-check-danger .form-check-input:checked { background-color: var(--rz-danger-600) !important; border-color: var(--rz-danger-600) !important; }
.form-check-info .form-check-input:checked { background-color: var(--rz-info-600) !important; border-color: var(--rz-info-600) !important; }

.form-range { accent-color: var(--rz-primary-600); }
.form-range::-webkit-slider-thumb { background: var(--rz-primary-600); }
.form-range::-moz-range-thumb { background: var(--rz-primary-600); }
.form-control[type="file"]::file-selector-button {
  background: var(--rz-surface-sunken);
  color: var(--rz-text-primary);
  border-inline-end: 1px solid var(--rz-border-default);
  font-weight: 600;
}
.form-control-color { width: var(--rz-control-height); height: var(--rz-control-height); padding: 0.25rem; }

/* ---------- Tables ---------- */
.table {
  --bs-table-color: var(--rz-text-primary);
  --bs-table-border-color: var(--rz-border-subtle);
  --bs-table-hover-bg: var(--rz-surface-overlay);
  --bs-table-striped-bg: var(--rz-surface-overlay);
  font-size: 0.8125rem;
  color: var(--rz-text-primary);
}
.table > :not(caption) > * > * {
  padding: 0.625rem 0.875rem;
  border-bottom-color: var(--rz-border-subtle);
  vertical-align: middle;
}
.table > thead > tr > th,
.table > thead th,
.table th {
  background: var(--rz-surface-sunken) !important;
  color: var(--rz-text-tertiary) !important;
  font-size: 0.6875rem !important;
  font-weight: 600 !important;
  text-transform: uppercase;
  letter-spacing: 0.04em !important;
  padding-block: 0.5625rem !important;
  border-top: 1px solid var(--rz-border-subtle) !important;
  border-bottom: 1px solid var(--rz-border-subtle) !important;
  white-space: nowrap;
}
.table-hover > tbody > tr:hover > *,
.table > tbody > tr:hover > * { background-color: var(--rz-surface-overlay); }
.table > tbody > tr:last-child > * { border-bottom: 0; }
.card .table { margin-bottom: 0; }

/* ---------- Tabs ---------- */
.nav-tabs {
  border-bottom: 1px solid var(--rz-border-subtle);
  gap: 0.25rem;
}
.nav-tabs .nav-link,
.nav-tabs .nav-link:hover {
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  background: transparent;
  color: var(--rz-text-tertiary);
  font-size: 0.8125rem;
  font-weight: 600;
  padding: 0.625rem 0.875rem;
  text-transform: none;
  letter-spacing: 0;
  box-shadow: none !important;
}
.nav-tabs .nav-link:hover { color: var(--rz-text-primary); }
.nav-tabs .nav-link.active,
.nav-tabs .nav-item.show .nav-link {
  color: var(--rz-primary-600) !important;
  border-bottom-color: var(--rz-primary-600) !important;
  background: transparent !important;
}
.nav-pills .nav-link {
  border-radius: var(--rz-radius);
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--rz-text-secondary);
  padding: 0.5rem 0.875rem;
}
.nav-pills .nav-link:not(.active):hover { background: var(--rz-surface-sunken); color: var(--rz-text-primary); }
.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
  background: var(--rz-primary-50) !important;
  color: var(--rz-primary-700) !important;
  box-shadow: none !important;
}
.nav-align-top > .tab-content,
.nav-align-left > .tab-content { box-shadow: none; border: 1px solid var(--rz-border-subtle); border-radius: var(--rz-radius); }

/* Segmented control (.rz-seg) */
.rz-seg {
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  border-radius: var(--rz-radius);
  background: var(--rz-surface-sunken);
}
.rz-seg > .btn,
.rz-seg > a,
.rz-seg > button {
  border: 0 !important;
  background: transparent !important;
  color: var(--rz-text-tertiary) !important;
  font-size: 0.71875rem;
  font-weight: 600;
  padding: 0.25rem 0.625rem;
  border-radius: 4px;
  box-shadow: none !important;
  text-decoration: none;
}
.rz-seg > .active {
  background: var(--rz-surface-raised) !important;
  color: var(--rz-text-primary) !important;
  box-shadow: var(--rz-shadow-sm) !important;
}

/* ---------- Dropdowns / modals / popovers ---------- */
.dropdown-menu {
  --bs-dropdown-border-radius: var(--rz-radius);
  border: 1px solid var(--rz-border-subtle);
  border-radius: var(--rz-radius);
  box-shadow: var(--rz-shadow-lg);
  padding: 0.375rem;
  font-size: 0.8125rem;
}
.dropdown-item {
  border-radius: 4px;
  padding: 0.4375rem 0.625rem;
  color: var(--rz-text-primary);
}
.dropdown-item:hover,
.dropdown-item:focus { background: var(--rz-surface-sunken); color: var(--rz-text-primary); }
.dropdown-item.active,
.dropdown-item:active { background: var(--rz-primary-50) !important; color: var(--rz-primary-700) !important; }
.dropdown-header { font-size: 0.6875rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--rz-text-tertiary); }
.dropdown-divider { border-color: var(--rz-border-subtle); }

.modal-content {
  border: 1px solid var(--rz-border-subtle);
  border-radius: var(--rz-radius);
  box-shadow: var(--rz-shadow-xl);
}
.modal-header {
  background: var(--rz-surface-sunken);
  border-bottom: 1px solid var(--rz-border-subtle);
  padding: 1rem 1.25rem;
  border-start-start-radius: var(--rz-radius);
  border-start-end-radius: var(--rz-radius);
}
.modal-title { font-size: 1rem; font-weight: 700; color: var(--rz-text-primary); }
/* Brand header (white text on dark green) for modals that open a workflow — e.g. routes "Append parcels".
   Views mark it .modal-header-premium; it had no definition after the glass skin was retired,
   which left its white title and close button invisible on a light header. */
.modal-header-premium {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 1rem 1.25rem;
  background: linear-gradient(150deg, var(--rz-primary-700) 0%, var(--rz-primary-900) 100%);
  color: #fff;
  border-start-start-radius: var(--rz-radius);
  border-start-end-radius: var(--rz-radius);
}
.modal-header-premium .modal-title { color: #fff; }
.modal-body { padding: 1.25rem; }
.modal-footer {
  background: var(--rz-surface-sunken);
  border-top: 1px solid var(--rz-border-subtle);
  padding: 0.875rem 1.25rem;
  border-end-start-radius: var(--rz-radius);
  border-end-end-radius: var(--rz-radius);
}
.modal-backdrop.show { opacity: 0.45; }
.offcanvas { border-color: var(--rz-border-subtle) !important; box-shadow: var(--rz-shadow-xl); }

.tooltip-inner { background: var(--rz-neutral-900); font-size: 0.75rem; border-radius: var(--rz-radius); }
.popover { border-color: var(--rz-border-subtle); border-radius: var(--rz-radius); box-shadow: var(--rz-shadow-lg); }

/* ---------- Alerts, progress, pagination, list-group, avatars ---------- */
.alert { border-radius: var(--rz-radius); font-size: 0.8125rem; border: 1px solid transparent; }
.alert-primary { background: var(--rz-primary-50); color: var(--rz-primary-700); border-color: var(--rz-primary-100); }
.alert-success { background: var(--rz-success-50); color: var(--rz-success-700); border-color: var(--rz-success-100); }
.alert-warning { background: var(--rz-warning-50); color: var(--rz-warning-700); border-color: var(--rz-warning-100); }
.alert-danger { background: var(--rz-danger-50); color: var(--rz-danger-700); border-color: var(--rz-danger-100); }
.alert-info { background: var(--rz-info-50); color: var(--rz-info-700); border-color: var(--rz-info-100); }
.alert.rz-alert-accent { border-inline-start: 3px solid currentColor; }

.progress {
  --bs-progress-height: 6px;
  --bs-progress-border-radius: var(--rz-radius-pill);
  background: var(--rz-surface-sunken);
  box-shadow: none;
}
.progress-bar { border-radius: var(--rz-radius-pill); box-shadow: none !important; }

.pagination { --bs-pagination-border-radius: var(--rz-radius); gap: 4px; }
.page-link,
.page-item .page-link {
  min-width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 0.5rem;
  border: 1px solid var(--rz-border-default) !important;
  border-radius: var(--rz-radius) !important;
  background: var(--rz-surface-raised);
  color: var(--rz-text-secondary);
  font-size: 0.75rem;
  font-weight: 600;
}
.page-link:hover { background: var(--rz-surface-sunken); color: var(--rz-text-primary); }
.page-item.active .page-link,
.page-item.active .page-link:hover {
  background: var(--rz-primary-600) !important;
  border-color: var(--rz-primary-600) !important;
  color: #fff !important;
  box-shadow: none !important;
}
.page-item.disabled .page-link { opacity: 0.5; }

.list-group { --bs-list-group-border-color: var(--rz-border-subtle); --bs-list-group-border-radius: var(--rz-radius); }
.list-group-item.active { background: var(--rz-primary-50); color: var(--rz-primary-700); border-color: var(--rz-primary-100); }

.avatar .avatar-initial { font-weight: 700; font-size: 0.75rem; }
.avatar .avatar-initial.rounded { border-radius: var(--rz-radius) !important; }

.breadcrumb { font-size: 0.78125rem; font-weight: 500; }
.breadcrumb-item a { color: var(--rz-text-tertiary); }
.breadcrumb-item.active { color: var(--rz-text-primary); font-weight: 600; }

hr { border-color: var(--rz-border-subtle); opacity: 1; }