/* ============================================================
   Bootstrap Theme Bridge — memetakan token AppSchool ke variabel
   Bootstrap 5.3, supaya komponen bawaan Bootstrap (modal, dropdown,
   offcanvas, dsb.) otomatis mengikuti tema kita.
   Urutan muat: bootstrap.min.css → tokens.css → FILE INI → base/layout/components.
   ============================================================ */
:root,
[data-bs-theme="light"],
[data-bs-theme="dark"] {
  --bs-body-font-family: var(--font);
  --bs-body-bg: var(--page-bg);
  --bs-body-color: var(--text);
  --bs-secondary-color: var(--text-2);
  --bs-tertiary-color: var(--muted);
  --bs-border-color: var(--border);
  --bs-border-radius: var(--radius-sm);
  --bs-border-radius-lg: var(--radius);

  --bs-primary: var(--primary);
  --bs-primary-rgb: var(--primary-rgb);
  --bs-link-color: var(--primary);
  --bs-link-hover-color: var(--primary-strong);

  --bs-success: var(--success-fg);
  --bs-warning: var(--warning-fg);
  --bs-danger: var(--danger-fg);
  --bs-info: var(--info-fg);
}

/* Komponen JS Bootstrap yang dipakai app shell */
.offcanvas, .offcanvas-lg {
  --bs-offcanvas-bg: var(--sidebar-bg-solid);
  --bs-offcanvas-color: var(--text);
  --bs-offcanvas-width: 248px;
}

.modal {
  --bs-modal-bg: var(--card-bg);
  --bs-modal-border-color: var(--border);
  --bs-modal-border-radius: var(--radius);
  --bs-modal-header-border-color: var(--border);
  --bs-modal-footer-border-color: var(--border);
}

.dropdown-menu {
  --bs-dropdown-bg: var(--card-bg);
  --bs-dropdown-color: var(--text);
  --bs-dropdown-border-color: var(--border);
  --bs-dropdown-border-radius: var(--radius-sm);
  --bs-dropdown-link-color: var(--text-2);
  --bs-dropdown-link-hover-bg: var(--hover);
  --bs-dropdown-link-hover-color: var(--text);
  --bs-dropdown-link-active-bg: var(--primary-tint);
  --bs-dropdown-link-active-color: var(--primary);
  box-shadow: var(--shadow-pop);
}

.toast {
  --bs-toast-bg: var(--card-bg);
  --bs-toast-color: var(--text);
  --bs-toast-border-color: var(--border);
  --bs-toast-header-bg: var(--card-bg);
  --bs-toast-header-color: var(--text-2);
}

.nav-tabs {
  --bs-nav-tabs-link-active-color: var(--primary);
  --bs-nav-tabs-border-color: var(--border);
  --bs-nav-link-color: var(--text-2);
}

.pagination {
  --bs-pagination-color: var(--text-2);
  --bs-pagination-bg: var(--card-bg);
  --bs-pagination-border-color: var(--border-strong);
  --bs-pagination-hover-bg: var(--hover);
  --bs-pagination-hover-color: var(--text);
  --bs-pagination-active-bg: var(--primary);
  --bs-pagination-active-border-color: var(--primary);
  --bs-pagination-focus-color: var(--primary);
  --bs-pagination-focus-bg: var(--hover);
  --bs-pagination-focus-box-shadow: 0 0 0 3px var(--primary-soft);
}