/* BGV Platform UI: Bootstrap 5.3 theme layer.
   Copy of components/bundle.css with its three @import lines removed.
   Load after bootstrap.min.css, bootstrap-icons.min.css, the Google Fonts link and tokens.css. */

/* ---------- Product accents ---------- */
[data-product="bgv"]        { --accent: var(--product-bgv);        --accent-subtle: var(--product-bgv-subtle); }
[data-product="captive"]    { --accent: var(--product-captive);    --accent-subtle: var(--product-captive-subtle); }
[data-product="school"]     { --accent: var(--product-school);     --accent-subtle: var(--product-school-subtle); }
[data-product="eduplanner"] { --accent: var(--product-eduplanner); --accent-subtle: var(--product-eduplanner-subtle); }
[data-product="research"]   { --accent: var(--product-research);   --accent-subtle: var(--product-research-subtle); }
[data-product="results"]    { --accent: var(--product-results);    --accent-subtle: var(--product-results-subtle); }

/* ---------- Bootstrap globals mapped to tokens ---------- */
:root, [data-theme] {
  --bs-body-font-family: var(--font-sans);
  --bs-font-monospace: var(--font-mono);
  --bs-body-font-size: 1rem;
  --bs-body-line-height: 1.5;
  --bs-body-color: var(--ink);
  --bs-body-bg: var(--surface-page);
  --bs-emphasis-color: var(--ink);
  --bs-secondary-color: var(--ink-muted);
  --bs-tertiary-color: var(--ink-muted);
  --bs-secondary-bg: var(--surface-sunken);
  --bs-tertiary-bg: var(--surface-sunken);
  --bs-heading-color: var(--ink);
  --bs-link-color: var(--accent);
  --bs-link-hover-color: var(--accent);
  --bs-border-color: var(--border);
  --bs-border-radius: var(--radius-md);
  --bs-border-radius-sm: var(--radius-sm);
  --bs-border-radius-lg: var(--radius-lg);
  --bs-box-shadow: var(--shadow-overlay);
  --bs-focus-ring-color: var(--focus);
  --bs-success-text-emphasis: var(--success);
  --bs-danger-text-emphasis: var(--danger);
  --bs-warning-text-emphasis: var(--warning);
  --bs-info-text-emphasis: var(--info);
  --bs-form-valid-color: var(--success);
  --bs-form-valid-border-color: var(--success);
  --bs-form-invalid-color: var(--danger);
  --bs-form-invalid-border-color: var(--danger);
  color-scheme: light;
}
[data-theme="dark"] { color-scheme: dark; }

body {
  font-family: var(--font-sans);
  color: var(--ink);
  background: var(--surface-page);
  font-feature-settings: "tnum" 0;
  -webkit-font-smoothing: antialiased;
}
h1, .h1 { font-size: 24px; line-height: 32px; font-weight: 600; }
h2, .h2 { font-size: 20px; line-height: 28px; font-weight: 600; }
h3, .h3 { font-size: 16px; line-height: 24px; font-weight: 600; }
h1, h2, h3, .h1, .h2, .h3 { color: var(--ink); margin-bottom: var(--space-2); }
a { color: var(--accent); text-underline-offset: 2px; }
a:hover { text-decoration-thickness: 2px; }
.text-muted, .text-body-secondary { color: var(--ink-muted) !important; }
.num, td.num, th.num { font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
code, .code { font-family: var(--font-mono); font-size: 14px; color: var(--ink); background: var(--surface-sunken); padding: 1px 6px; border-radius: var(--radius-sm); }

/* One focus style everywhere */
:focus-visible,
.btn:focus-visible, .form-control:focus, .form-select:focus, .form-check-input:focus, .page-link:focus, .nav-link:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
  box-shadow: none;
}

/* ---------- Buttons ---------- */
.btn {
  --bs-btn-font-family: var(--font-sans);
  --bs-btn-font-size: 14px;
  --bs-btn-font-weight: 600;
  --bs-btn-line-height: 20px;
  --bs-btn-padding-x: var(--space-4);
  --bs-btn-padding-y: 9px;
  --bs-btn-border-radius: var(--radius-md);
  --bs-btn-focus-box-shadow: none;
  min-height: var(--control-md);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
}
.btn-sm { --bs-btn-padding-y: 5px; --bs-btn-padding-x: var(--space-3); --bs-btn-font-size: 14px; min-height: var(--control-sm); }
.btn-lg { --bs-btn-padding-y: 13px; --bs-btn-padding-x: var(--space-5); --bs-btn-font-size: 16px; --bs-btn-line-height: 20px; min-height: var(--control-lg); }
.btn-primary {
  --bs-btn-color: var(--on-accent);
  --bs-btn-bg: var(--accent);
  --bs-btn-border-color: var(--accent);
  --bs-btn-hover-color: var(--on-accent);
  --bs-btn-hover-bg: color-mix(in oklab, var(--accent) 86%, var(--ink));
  --bs-btn-hover-border-color: color-mix(in oklab, var(--accent) 86%, var(--ink));
  --bs-btn-active-color: var(--on-accent);
  --bs-btn-active-bg: color-mix(in oklab, var(--accent) 76%, var(--ink));
  --bs-btn-active-border-color: color-mix(in oklab, var(--accent) 76%, var(--ink));
  --bs-btn-disabled-color: var(--ink-muted);
  --bs-btn-disabled-bg: var(--surface-sunken);
  --bs-btn-disabled-border-color: var(--border);
}
.btn-secondary, .btn-outline-secondary {
  --bs-btn-color: var(--ink);
  --bs-btn-bg: var(--surface);
  --bs-btn-border-color: var(--border-strong);
  --bs-btn-hover-color: var(--ink);
  --bs-btn-hover-bg: var(--surface-sunken);
  --bs-btn-hover-border-color: var(--border-strong);
  --bs-btn-active-color: var(--ink);
  --bs-btn-active-bg: var(--surface-sunken);
  --bs-btn-active-border-color: var(--ink-muted);
  --bs-btn-disabled-color: var(--ink-muted);
  --bs-btn-disabled-bg: var(--surface);
  --bs-btn-disabled-border-color: var(--border);
}
.btn-danger {
  --bs-btn-color: var(--on-accent);
  --bs-btn-bg: var(--danger);
  --bs-btn-border-color: var(--danger);
  --bs-btn-hover-color: var(--on-accent);
  --bs-btn-hover-bg: color-mix(in oklab, var(--danger) 86%, var(--ink));
  --bs-btn-hover-border-color: color-mix(in oklab, var(--danger) 86%, var(--ink));
  --bs-btn-active-color: var(--on-accent);
  --bs-btn-active-bg: color-mix(in oklab, var(--danger) 76%, var(--ink));
  --bs-btn-active-border-color: color-mix(in oklab, var(--danger) 76%, var(--ink));
  --bs-btn-disabled-color: var(--ink-muted);
  --bs-btn-disabled-bg: var(--surface-sunken);
  --bs-btn-disabled-border-color: var(--border);
}
.btn-link {
  --bs-btn-color: var(--accent);
  --bs-btn-hover-color: var(--accent);
  --bs-btn-active-color: var(--accent);
  --bs-btn-padding-x: var(--space-2);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.btn .spinner-border { width: 16px; height: 16px; border-width: 2px; }

/* ---------- Forms ---------- */
.form-label { font-size: 14px; line-height: 20px; font-weight: 500; color: var(--ink); margin-bottom: var(--space-1); }
.form-text { font-size: 14px; line-height: 20px; color: var(--ink-muted); margin-top: var(--space-1); }
.form-control, .form-select {
  min-height: var(--control-md);
  font-size: 16px;
  line-height: 22px;
  padding: 8px var(--space-3);
  color: var(--ink);
  background-color: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
}
.form-select { padding-right: 36px; background-position: right 12px center; }
.form-control::placeholder { color: var(--ink-muted); opacity: 1; }
.form-control:focus, .form-select:focus { border-color: var(--focus); background-color: var(--surface); color: var(--ink); }
.form-control:disabled, .form-control[readonly], .form-select:disabled { background-color: var(--surface-sunken); color: var(--ink-muted); }
.form-control.is-invalid, .form-select.is-invalid { border-color: var(--danger); border-width: 2px; background-image: none; padding-right: var(--space-3); }
.invalid-feedback { display: flex; gap: var(--space-1); align-items: flex-start; font-size: 14px; line-height: 20px; font-weight: 500; color: var(--danger); margin-top: var(--space-1); }
.form-control-lg, .form-select-lg { min-height: var(--control-lg); font-size: 18px; }
.form-check-input { width: 20px; height: 20px; margin-top: 2px; border: 1px solid var(--border-strong); background-color: var(--surface); }
.form-check-input:checked { background-color: var(--accent); border-color: var(--accent); }
.form-check-label { font-size: 16px; line-height: 24px; }
.form-check { padding-left: 28px; min-height: 24px; }
.form-check .form-check-input { margin-left: -28px; }
.field { margin-bottom: var(--space-4); max-width: var(--form-max); }
.required-mark { color: var(--ink-muted); font-weight: 400; }

/* ---------- Cards ---------- */
.card {
  --bs-card-bg: var(--surface);
  --bs-card-border-color: var(--border);
  --bs-card-border-radius: var(--radius-md);
  --bs-card-inner-border-radius: calc(var(--radius-md) - 1px);
  --bs-card-spacer-x: var(--space-5);
  --bs-card-spacer-y: var(--space-5);
  --bs-card-cap-bg: var(--surface);
  --bs-card-cap-padding-y: var(--space-4);
  --bs-card-cap-padding-x: var(--space-5);
  box-shadow: none;
}
.card-header { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.card-title { font-size: 20px; line-height: 28px; font-weight: 600; margin: 0; }

/* ---------- Tables ---------- */
.table-wrap { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); overflow: hidden; }
.table-wrap .table-responsive { margin: 0; }
.table {
  --bs-table-bg: var(--surface);
  --bs-table-color: var(--ink);
  --bs-table-border-color: var(--border);
  --bs-table-hover-bg: var(--surface-sunken);
  --bs-table-hover-color: var(--ink);
  --bs-table-active-bg: var(--accent-subtle);
  --bs-table-active-color: var(--ink);
  margin-bottom: 0;
  font-size: 14px;
  line-height: 20px;
}
.table > :not(caption) > * > * { padding: var(--space-3); vertical-align: middle; }
.table > thead th {
  background: var(--surface-sunken);
  color: var(--ink-muted);
  font-weight: 500;
  white-space: nowrap;
  border-bottom: 1px solid var(--border);
}
.table > tbody > tr:last-child > * { border-bottom: 0; }
.table tr.is-selected > * { --bs-table-bg-state: var(--accent-subtle); }
.table-toolbar { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; padding: var(--space-3); border-bottom: 1px solid var(--border); background: var(--surface); }
.table-toolbar .search { flex: 1 1 240px; max-width: 360px; position: relative; }
.table-toolbar .search .bi { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--ink-muted); pointer-events: none; }
.table-toolbar .search .form-control { padding-left: 36px; }
.table-footer { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; justify-content: space-between; padding: var(--space-3); border-top: 1px solid var(--border); font-size: 14px; color: var(--ink-muted); }

/* ---------- Pagination ---------- */
.pagination {
  --bs-pagination-color: var(--ink);
  --bs-pagination-bg: var(--surface);
  --bs-pagination-border-color: var(--border-strong);
  --bs-pagination-hover-color: var(--ink);
  --bs-pagination-hover-bg: var(--surface-sunken);
  --bs-pagination-hover-border-color: var(--border-strong);
  --bs-pagination-active-color: var(--ink);
  --bs-pagination-active-bg: var(--accent-subtle);
  --bs-pagination-active-border-color: var(--accent);
  --bs-pagination-disabled-color: var(--ink-muted);
  --bs-pagination-disabled-bg: var(--surface);
  --bs-pagination-disabled-border-color: var(--border);
  --bs-pagination-focus-box-shadow: none;
  --bs-pagination-font-size: 14px;
  margin: 0;
}
.page-link { min-width: var(--control-sm); min-height: var(--control-sm); display: inline-flex; align-items: center; justify-content: center; font-weight: 500; }

/* ---------- Status badges ---------- */
.status {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 2px var(--space-2);
  border-radius: var(--radius-sm);
  font-size: 12px;
  line-height: 16px;
  font-weight: 500;
  white-space: nowrap;
  color: var(--ink);
  background: var(--surface-sunken);
}
.status .bi { font-size: 12px; }
.status-success { background: var(--success-subtle); }
.status-success .bi { color: var(--success); }
.status-warning { background: var(--warning-subtle); }
.status-warning .bi { color: var(--warning); }
.status-danger  { background: var(--danger-subtle); }
.status-danger .bi { color: var(--danger); }
.status-info    { background: var(--info-subtle); }
.status-info .bi { color: var(--info); }
.status-neutral .bi { color: var(--ink-muted); }

/* ---------- Alerts ---------- */
.alert {
  --bs-alert-padding-x: var(--space-4);
  --bs-alert-padding-y: var(--space-3);
  --bs-alert-border-radius: var(--radius-md);
  --bs-alert-color: var(--ink);
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
  font-size: 14px;
  line-height: 20px;
}
.alert > .bi { font-size: 18px; line-height: 20px; flex: none; }
.alert-title { font-weight: 600; display: block; margin-bottom: 2px; }
.alert-body { flex: 1; }
.alert-body p:last-child { margin-bottom: 0; }
.alert-success { --bs-alert-bg: var(--success-subtle); --bs-alert-border-color: var(--success); --bs-alert-color: var(--ink); }
.alert-success > .bi { color: var(--success); }
.alert-warning { --bs-alert-bg: var(--warning-subtle); --bs-alert-border-color: var(--warning); --bs-alert-color: var(--ink); }
.alert-warning > .bi { color: var(--warning); }
.alert-danger  { --bs-alert-bg: var(--danger-subtle);  --bs-alert-border-color: var(--danger);  --bs-alert-color: var(--ink); }
.alert-danger > .bi { color: var(--danger); }
.alert-info    { --bs-alert-bg: var(--info-subtle);    --bs-alert-border-color: var(--info);    --bs-alert-color: var(--ink); }
.alert-info > .bi { color: var(--info); }
.alert .alert-link { color: var(--ink); text-decoration: underline; font-weight: 600; }

/* ---------- Stat tile ---------- */
.stat { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); padding: var(--space-4) var(--space-5); display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; }
.stat-label { font-size: 14px; line-height: 20px; font-weight: 500; color: var(--ink-muted); }
.stat-value { font-size: 28px; line-height: 36px; font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stat-meta { font-size: 12px; line-height: 16px; font-weight: 500; color: var(--ink-muted); display: flex; gap: var(--space-1); align-items: center; }
.stat-meta .up { color: var(--success); }
.stat-meta .down { color: var(--danger); }

/* ---------- App shell ---------- */
.app { display: grid; grid-template-columns: var(--sidebar-width) minmax(0, 1fr); min-height: 100vh; background: var(--surface-page); }
.app-sidebar { background: var(--surface); border-right: 1px solid var(--border); display: flex; flex-direction: column; padding: var(--space-4) var(--space-3); gap: var(--space-1); }
.app-brand { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-1) var(--space-2) var(--space-4); font-weight: 700; font-size: 16px; color: var(--ink); text-decoration: none; }
.app-brand-mark { width: 28px; height: 28px; border-radius: var(--radius-sm); background: var(--accent); color: var(--on-accent); display: grid; place-items: center; font-size: 14px; font-weight: 700; }
.app-nav-heading { font-size: 12px; line-height: 16px; font-weight: 500; color: var(--ink-muted); padding: var(--space-4) var(--space-3) var(--space-1); }
.app-nav-link { display: flex; align-items: center; gap: var(--space-3); min-height: var(--control-md); padding: 0 var(--space-3); border-radius: var(--radius-md); color: var(--ink); text-decoration: none; font-size: 14px; font-weight: 500; }
.app-nav-link .bi { font-size: 16px; color: var(--ink-muted); }
.app-nav-link:hover { background: var(--surface-sunken); color: var(--ink); text-decoration: none; }
.app-nav-link[aria-current="page"] { background: var(--accent-subtle); color: var(--accent); font-weight: 600; }
.app-nav-link[aria-current="page"] .bi { color: var(--accent); }
.app-nav-count { margin-left: auto; font-size: 12px; color: var(--ink-muted); font-variant-numeric: tabular-nums; }
.app-main { display: flex; flex-direction: column; min-width: 0; }
.app-topbar { height: 56px; display: flex; align-items: center; gap: var(--space-3); padding: 0 var(--space-5); background: var(--surface); border-bottom: 1px solid var(--border); }
.app-topbar .org-switch { display: inline-flex; align-items: center; gap: var(--space-2); font-size: 14px; font-weight: 600; }
.app-topbar .spacer { flex: 1; }
.app-content { padding: var(--space-5); width: 100%; max-width: var(--content-max); }
.page-header { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-5); }
.page-header h1 { margin: 0; }
.page-header .page-sub { margin: var(--space-1) 0 0; color: var(--ink-muted); font-size: 14px; }
.page-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.breadcrumb { --bs-breadcrumb-font-size: 14px; --bs-breadcrumb-divider-color: var(--ink-muted); --bs-breadcrumb-item-active-color: var(--ink-muted); margin-bottom: var(--space-1); }
.avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--surface-sunken); color: var(--ink); display: grid; place-items: center; font-size: 12px; font-weight: 600; border: 1px solid var(--border); }
@media (max-width: 991.98px) {
  .app { grid-template-columns: minmax(0, 1fr); }
  .app-sidebar { display: none; }
  .app-content { padding: var(--space-4); }
}

/* ---------- Empty state ---------- */
.empty-state { text-align: center; padding: var(--space-7) var(--space-5); max-width: 440px; margin: 0 auto; }
.empty-state .empty-icon { width: 48px; height: 48px; margin: 0 auto var(--space-4); border-radius: 50%; background: var(--surface-sunken); display: grid; place-items: center; font-size: 22px; color: var(--ink-muted); }
.empty-state h2 { font-size: 16px; line-height: 24px; margin-bottom: var(--space-1); }
.empty-state p { color: var(--ink-muted); font-size: 14px; margin-bottom: var(--space-4); }

/* ---------- Dialog ---------- */
.modal {
  --bs-modal-bg: var(--surface);
  --bs-modal-color: var(--ink);
  --bs-modal-border-color: var(--border);
  --bs-modal-border-radius: var(--radius-lg);
  --bs-modal-box-shadow: var(--shadow-overlay);
  --bs-modal-header-padding: var(--space-4) var(--space-5);
  --bs-modal-padding: var(--space-5);
  --bs-modal-footer-gap: var(--space-2);
  --bs-modal-header-border-color: var(--border);
  --bs-modal-footer-border-color: var(--border);
}
.modal-backdrop { --bs-backdrop-bg: var(--scrim); --bs-backdrop-opacity: 1; }
.modal-title { font-size: 16px; line-height: 24px; font-weight: 600; }
.modal-footer { padding: var(--space-3) var(--space-5); }

/* ---------- Dropdown ---------- */
.dropdown-menu {
  --bs-dropdown-bg: var(--surface);
  --bs-dropdown-color: var(--ink);
  --bs-dropdown-border-color: var(--border);
  --bs-dropdown-border-radius: var(--radius-lg);
  --bs-dropdown-box-shadow: var(--shadow-overlay);
  --bs-dropdown-link-color: var(--ink);
  --bs-dropdown-link-hover-bg: var(--surface-sunken);
  --bs-dropdown-link-active-bg: var(--accent-subtle);
  --bs-dropdown-link-active-color: var(--ink);
  --bs-dropdown-font-size: 14px;
  box-shadow: var(--shadow-overlay);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}