/* ============================================================
   TrackID Builder — Portal Branding Override
   Applied on top of FastBootstrap to match trackidbuilder.com CI
   ============================================================ */

/* ---- Google Fonts (loaded via <link> in layout) ---- */

/* ---- Global Font Override ---- */
:root,
[data-bs-theme=light],
[data-bs-theme=dark] {
  --bs-font-sans-serif: 'Exo 2', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --bs-font-monospace: 'JetBrains Mono', 'SFMono-Medium', 'SF Mono', 'Segoe UI Mono', 'Roboto Mono', Consolas, monospace;
  --bs-body-font-family: var(--bs-font-sans-serif);
}

/* ---- TrackID Builder Brand Colors ---- */
:root,
[data-bs-theme=light] {
  /* Primary = Magenta accent */
  --bs-primary: #e11d8f;
  --bs-primary-rgb: 225, 29, 143;
  --bs-link-color: #e11d8f;
  --bs-link-color-rgb: 225, 29, 143;
  --bs-link-hover-color: #f472b6;
  --bs-link-hover-color-rgb: 244, 114, 182;

  /* Design System Brand tokens */
  --ds-text-brand: #e11d8f;
  --ds-text-selected: #e11d8f;
  --ds-link: #e11d8f;
  --ds-link-pressed: #be185d;
  --ds-background-brand-bold: #e11d8f;
  --ds-background-brand-bold-hovered: #be185d;
  --ds-background-brand-bold-pressed: #9d174d;
  --ds-border-brand: #e11d8f;
  --ds-icon-brand: #e11d8f;

  /* Info = Cyan (secondary) */
  --bs-info: #06b6d4;
  --bs-info-rgb: 6, 182, 212;
}

/* ---- Dark Mode (our primary theme) ---- */
[data-bs-theme=dark] {
  /* Body backgrounds — TrackID Builder dark navy */
  --bs-body-bg: #0a0f1a;
  --bs-body-color: #e9f2ff;
  --bs-dark: #060a12;
  --bs-dark-rgb: 6, 10, 18;

  /* Primary = Magenta */
  --bs-primary: #e11d8f;
  --bs-primary-rgb: 225, 29, 143;
  --bs-link-color: #f472b6;
  --bs-link-color-rgb: 244, 114, 182;
  --bs-link-hover-color: #f9a8d4;
  --bs-link-hover-color-rgb: 249, 168, 212;

  /* Design System Brand tokens (dark) */
  --ds-text: #e9f2ff;
  --ds-text-brand: #f472b6;
  --ds-text-selected: #f472b6;
  --ds-text-subtlest: #94a3b8;
  --ds-text-subtle: #a9bdd6;
  --ds-link: #f472b6;
  --ds-link-pressed: #f9a8d4;

  --ds-background-brand-bold: #e11d8f;
  --ds-background-brand-bold-hovered: #be185d;
  --ds-background-brand-bold-pressed: #9d174d;
  --ds-border-brand: #e11d8f;
  --ds-icon-brand: #f472b6;

  /* Accent magenta overrides */
  --ds-text-accent-teal: #f472b6;
  --ds-text-accent-teal-bolder: #f9a8d4;
  --ds-background-accent-teal-subtlest: rgba(225, 29, 143, 0.08);
  --ds-background-accent-teal-subtler: rgba(225, 29, 143, 0.12);
  --ds-background-accent-teal-subtle: rgba(225, 29, 143, 0.18);
  --ds-background-accent-teal-bolder: #e11d8f;

  /* Surface colors */
  --ds-surface: #0f1729;
  --ds-surface-hovered: #141e33;
  --ds-surface-pressed: #192640;
  --ds-surface-raised: #141e33;
  --ds-surface-raised-hovered: #192640;
  --ds-surface-overlay: #141e33;

  /* Info = Cyan (secondary) */
  --bs-info: #06b6d4;
  --bs-info-rgb: 6, 182, 212;

  /* Card and secondary backgrounds */
  --bs-secondary-bg: #0f1729;
  --bs-tertiary-bg: #141e33;
}

/* ---- Navbar Branding ---- */
[data-bs-theme="dark"] .navbar {
  background-color: #060a12 !important;
  border-bottom: 1px solid rgba(225, 29, 143, 0.12);
}

[data-bs-theme="dark"] .navbar .nav-link:hover,
[data-bs-theme="dark"] .navbar .nav-link:focus {
  color: #f472b6 !important;
}

[data-bs-theme="dark"] .navbar .dropdown-menu {
  background-color: #0f1729;
  border: 1px solid rgba(225, 29, 143, 0.12);
}

[data-bs-theme="dark"] .navbar .dropdown-item:hover {
  background-color: rgba(225, 29, 143, 0.08);
  color: #f472b6;
}

/* ---- Footer Branding ---- */
[data-bs-theme="dark"] .footer {
  background-color: #060a12 !important;
  border-top: 1px solid rgba(225, 29, 143, 0.12);
}

/* ---- Card Styling ---- */
[data-bs-theme="dark"] .card {
  background-color: #0f1729;
  border: 1px solid rgba(225, 29, 143, 0.08);
}

[data-bs-theme="dark"] .card-header {
  background-color: #141e33;
  border-bottom: 1px solid rgba(225, 29, 143, 0.08);
}

/* ---- Table Styling ---- */
[data-bs-theme="dark"] .table {
  --bs-table-bg: transparent;
  --bs-table-striped-bg: rgba(225, 29, 143, 0.04);
  --bs-table-hover-bg: rgba(225, 29, 143, 0.08);
}

/* ---- Button Primary Override ---- */
.btn-primary {
  --bs-btn-bg: #e11d8f;
  --bs-btn-border-color: #e11d8f;
  --bs-btn-hover-bg: #be185d;
  --bs-btn-hover-border-color: #be185d;
  --bs-btn-active-bg: #9d174d;
  --bs-btn-active-border-color: #9d174d;
  --bs-btn-disabled-bg: #e11d8f;
  --bs-btn-disabled-border-color: #e11d8f;
}

.btn-outline-primary {
  --bs-btn-color: #e11d8f;
  --bs-btn-border-color: #e11d8f;
  --bs-btn-hover-bg: #e11d8f;
  --bs-btn-hover-border-color: #e11d8f;
  --bs-btn-active-bg: #be185d;
  --bs-btn-active-border-color: #be185d;
}

/* ---- Badge Primary ---- */
.badge.bg-primary,
.badge.text-bg-primary {
  background-color: #e11d8f !important;
}

/* ---- Form Focus States ---- */
.form-control:focus,
.form-select:focus {
  border-color: #e11d8f;
  box-shadow: 0 0 0 0.25rem rgba(225, 29, 143, 0.25);
}

/* ---- Pagination ---- */
.page-link {
  color: #e11d8f;
}
.page-item.active .page-link {
  background-color: #e11d8f;
  border-color: #e11d8f;
}

/* ---- Selection checkbox override ---- */
.user-select-checkbox:checked {
  background-color: #e11d8f !important;
  border-color: #e11d8f !important;
}
tr.selected {
  background-color: rgba(225, 29, 143, 0.1) !important;
}

/* ---- Scrollbar (dark mode) ---- */
[data-bs-theme="dark"] ::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
[data-bs-theme="dark"] ::-webkit-scrollbar-track {
  background: #0a0f1a;
}
[data-bs-theme="dark"] ::-webkit-scrollbar-thumb {
  background: rgba(225, 29, 143, 0.2);
  border-radius: 4px;
}
[data-bs-theme="dark"] ::-webkit-scrollbar-thumb:hover {
  background: rgba(225, 29, 143, 0.35);
}

/* ---- Auth Layout (Login, Register) Branding ---- */
[data-bs-theme="dark"] .block_container {
  background: radial-gradient(ellipse at 30% 0%, #141e33, #0a0f1a);
}

/* Login/Auth Card — always dark to match portal interior */
.login-card,
[data-bs-theme="dark"] .login-card,
[data-bs-theme="light"] .login-card {
  background-color: #0f1729 !important;
  border: 1px solid rgba(225, 29, 143, 0.12) !important;
  color: #e9f2ff !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(225, 29, 143, 0.06) !important;
}

.login-card h3,
.login-card .text-primary {
  color: #e11d8f !important;
}

.login-card .form-control {
  background-color: #0a0f1a !important;
  border-color: rgba(225, 29, 143, 0.15) !important;
  color: #e9f2ff !important;
}

.login-card .form-control::placeholder {
  color: #64748b !important;
}

.login-card .form-control:focus {
  background-color: #060a12 !important;
  border-color: #e11d8f !important;
  color: #e9f2ff !important;
  box-shadow: 0 0 0 0.25rem rgba(225, 29, 143, 0.2) !important;
}

.login-card a {
  color: #f472b6 !important;
}

.login-card a:hover {
  color: #f9a8d4 !important;
}

.login-card .register_links {
  border-top: 1px solid rgba(225, 29, 143, 0.08);
  margin-top: 1rem;
  padding-top: 1rem;
}

.login-card .dropdown-toggle {
  color: #a9bdd6 !important;
  border-color: rgba(225, 29, 143, 0.15) !important;
}

.login-card .dropdown-menu {
  background-color: #0a0f1a !important;
  border: 1px solid rgba(225, 29, 143, 0.12) !important;
}

.login-card .dropdown-item {
  color: #e9f2ff !important;
}

.login-card .dropdown-item:hover {
  background-color: rgba(225, 29, 143, 0.08) !important;
  color: #f472b6 !important;
}

.login-card .alert-danger {
  background-color: rgba(239, 68, 68, 0.1) !important;
  border-color: rgba(239, 68, 68, 0.2) !important;
  color: #fca5a5 !important;
}

.login-card .alert-primary {
  background-color: rgba(225, 29, 143, 0.1) !important;
  border-color: rgba(225, 29, 143, 0.2) !important;
  color: #f9a8d4 !important;
}

/* ---- Subtle Glow on Interactive Elements ---- */
[data-bs-theme="dark"] .btn-primary:hover {
  box-shadow: 0 0 15px rgba(225, 29, 143, 0.25);
}

[data-bs-theme="dark"] .card:hover {
  border-color: rgba(225, 29, 143, 0.15);
}

/* ---- Toast Overrides ---- */
[data-bs-theme="dark"] .toast {
  background-color: #0f1729;
  border: 1px solid rgba(225, 29, 143, 0.12);
}

/* ---- Progress Bar ---- */
.progress-bar {
  background-color: #e11d8f;
}

/* ---- Offcanvas (Mobile) ---- */
[data-bs-theme="dark"] .offcanvas {
  background-color: #0a0f1a;
  border-right: 1px solid rgba(225, 29, 143, 0.12);
}

/* ---- Typography Refinements ---- */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-weight: 600;
  letter-spacing: -0.01em;
}

/* ---- Logo / Brand Area ---- */
.tib-brand-logo {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  text-decoration: none;
  color: #e9f2ff;
  font-family: 'Exo 2', sans-serif;
  font-weight: 700;
  font-size: 1.15rem;
  letter-spacing: 0.02em;
}
.tib-brand-logo:hover {
  color: #f472b6;
}
.tib-brand-logo svg {
  width: 24px;
  height: 24px;
  color: #e11d8f;
}