/* ═══════════════════════════════════════════════════════════════
   Bootstrap 5.3 — Ultragaz Theme Overrides
   Scoped to .ai-bs-scope to prevent global bleed
   ═══════════════════════════════════════════════════════════════ */

.ai-bs-scope {
  --bs-body-bg: var(--ai-bg-primary, #0a0e1a);
  --bs-body-color: var(--ai-text-primary, #f1f5f9);
  --bs-border-color: var(--ai-border, rgba(255, 255, 255, 0.08));
  --bs-primary: var(--ultra-green, #00a86b);
  --bs-primary-rgb: 0, 168, 107;
  --bs-secondary: var(--ultra-purple, #6c5ce7);
  --bs-success: #22c55e;
  --bs-info: var(--ultra-cyan, #00d4aa);
  --bs-warning: var(--ultra-gold, #f5a623);
  --bs-danger: #ef4444;
  --bs-link-color: var(--ai-accent, #00d4aa);
  --bs-link-hover-color: var(--ai-accent-hover, #00a86b);
  --bs-font-sans-serif: var(--font-sans);
  --bs-border-radius: var(--radius-md, 12px);
  --bs-border-radius-sm: var(--radius-sm, 8px);
  --bs-border-radius-lg: var(--radius-lg, 16px);
}

/* ── Offcanvas sidebar ── */
.ai-bs-scope .offcanvas.ai-sidebar-offcanvas {
  background: var(--ai-bg-secondary, rgba(15, 23, 42, 0.95));
  border-right: 1px solid var(--glass-border);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  width: 280px;
  color: var(--ai-text-primary);
}

.ai-bs-scope .offcanvas.ai-sidebar-offcanvas .offcanvas-header {
  border-bottom: 1px solid var(--glass-border);
  padding: 16px 20px;
}

.ai-bs-scope .offcanvas.ai-sidebar-offcanvas .btn-close {
  filter: invert(1) grayscale(100%) brightness(200%);
  opacity: 0.6;
}

.ai-bs-scope .offcanvas.ai-sidebar-offcanvas .btn-close:hover {
  opacity: 1;
}

/* ── Form controls (dark glass) ── */
.ai-bs-scope .form-control,
.ai-bs-scope .form-select {
  background-color: rgba(0, 0, 0, 0.35);
  border: 1px solid var(--glass-border);
  color: var(--ai-text-primary);
  border-radius: var(--radius-sm);
  font-size: 0.9rem;
  transition: border-color var(--transition), box-shadow var(--transition);
}

.ai-bs-scope .form-control:focus,
.ai-bs-scope .form-select:focus {
  background-color: rgba(0, 0, 0, 0.45);
  border-color: var(--ultra-cyan);
  box-shadow: 0 0 0 3px rgba(0, 212, 170, 0.15);
  color: var(--ai-text-primary);
}

.ai-bs-scope .form-control::placeholder {
  color: var(--ai-text-secondary);
  opacity: 0.6;
}

.ai-bs-scope .form-label {
  color: var(--ai-text-secondary);
  font-size: 0.85rem;
  font-weight: 500;
  margin-bottom: 6px;
}

.ai-bs-scope .form-check-input {
  background-color: rgba(0, 0, 0, 0.3);
  border-color: var(--glass-border);
}

.ai-bs-scope .form-check-input:checked {
  background-color: var(--ultra-green);
  border-color: var(--ultra-green);
}

.ai-bs-scope .form-range::-webkit-slider-thumb {
  background: var(--ultra-cyan);
}

.ai-bs-scope .form-range::-moz-range-thumb {
  background: var(--ultra-cyan);
}

/* ── Buttons ── */
.ai-bs-scope .btn-primary {
  background: linear-gradient(135deg, var(--ultra-green), var(--ultra-cyan));
  border: none;
  font-weight: 600;
  box-shadow: 0 4px 16px rgba(0, 168, 107, 0.3);
}

.ai-bs-scope .btn-primary:hover,
.ai-bs-scope .btn-primary:focus {
  background: linear-gradient(135deg, var(--ai-accent-hover), var(--ultra-cyan));
  box-shadow: 0 6px 24px rgba(0, 168, 107, 0.4);
}

.ai-bs-scope .btn-outline-light {
  border-color: var(--glass-border);
  color: var(--ai-text-primary);
}

.ai-bs-scope .btn-outline-light:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.15);
  color: var(--ai-text-primary);
}

/* ── Nav tabs / pills ── */
.ai-bs-scope .nav-pills .nav-link {
  color: var(--ai-text-secondary);
  border-radius: var(--radius-sm);
  font-size: 0.88rem;
  padding: 8px 16px;
  transition: all var(--transition);
}

.ai-bs-scope .nav-pills .nav-link.active {
  background: rgba(0, 212, 170, 0.12);
  color: var(--ai-accent);
  border: 1px solid rgba(0, 212, 170, 0.25);
}

.ai-bs-scope .nav-pills .nav-link:hover:not(.active) {
  background: rgba(255, 255, 255, 0.04);
  color: var(--ai-text-primary);
}

/* ── Cards ── */
.ai-bs-scope .card {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  backdrop-filter: var(--glass-blur);
  color: var(--ai-text-primary);
}

/* ── Badges ── */
.ai-bs-scope .badge {
  font-weight: 600;
  letter-spacing: 0.02em;
}

/* ── Modals ── */
.ai-bs-scope .modal-content {
  background: rgba(15, 23, 42, 0.97);
  border: 1px solid var(--glass-border);
  backdrop-filter: blur(24px);
  color: var(--ai-text-primary);
}

.ai-bs-scope .modal-header {
  border-bottom-color: var(--glass-border);
}

.ai-bs-scope .modal-footer {
  border-top-color: var(--glass-border);
}

/* ── Toasts (Bootstrap fallback) ── */
.ai-bs-scope .toast {
  background: rgba(15, 23, 42, 0.95);
  border: 1px solid var(--glass-border);
  backdrop-filter: blur(12px);
  color: var(--ai-text-primary);
}

/* ── Progress ── */
.ai-bs-scope .progress {
  background: rgba(255, 255, 255, 0.06);
  height: 6px;
  border-radius: 6px;
}

.ai-bs-scope .progress-bar {
  background: linear-gradient(90deg, var(--ultra-green), var(--ultra-cyan));
}

/* ── Tables ── */
.ai-bs-scope .table {
  --bs-table-bg: transparent;
  --bs-table-color: var(--ai-text-primary);
  --bs-table-border-color: var(--glass-border);
  --bs-table-striped-bg: rgba(255, 255, 255, 0.02);
  --bs-table-hover-bg: rgba(0, 212, 170, 0.06);
}

/* ── Dropdown ── */
.ai-bs-scope .dropdown-menu {
  background: rgba(15, 23, 42, 0.97);
  border: 1px solid var(--glass-border);
  backdrop-filter: blur(16px);
}

.ai-bs-scope .dropdown-item {
  color: var(--ai-text-primary);
}

.ai-bs-scope .dropdown-item:hover,
.ai-bs-scope .dropdown-item:focus {
  background: rgba(0, 212, 170, 0.1);
  color: var(--ai-accent);
}