/* ============================================================
   Talk to me — Portal Branding Override
   Applied on top of FastBootstrap to match talktome.studio 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);
}

/* ---- Talk to me Brand Colors ---- */
:root,
[data-bs-theme=light] {
  /* Primary = Cyan accent */
  --bs-primary: #06b6d4;
  --bs-primary-rgb: 6, 182, 212;
  --bs-link-color: #06b6d4;
  --bs-link-color-rgb: 6, 182, 212;
  --bs-link-hover-color: #22d3ee;
  --bs-link-hover-color-rgb: 34, 211, 238;

  /* Design System Brand tokens */
  --ds-text-brand: #06b6d4;
  --ds-text-selected: #06b6d4;
  --ds-link: #06b6d4;
  --ds-link-pressed: #0891b2;
  --ds-background-brand-bold: #06b6d4;
  --ds-background-brand-bold-hovered: #0891b2;
  --ds-background-brand-bold-pressed: #0e7490;
  --ds-border-brand: #06b6d4;
  --ds-icon-brand: #06b6d4;

  /* Info = same as primary (cyan) */
  --bs-info: #06b6d4;
  --bs-info-rgb: 6, 182, 212;
}

/* ---- Dark Mode (our primary theme) ---- */
[data-bs-theme=dark] {
  /* Body backgrounds — NicheRevealer dark navy */
  --bs-body-bg: #0e213b;
  --bs-body-color: #e9f2ff;
  --bs-dark: #0a1628;
  --bs-dark-rgb: 10, 22, 40;

  /* Primary = Cyan */
  --bs-primary: #06b6d4;
  --bs-primary-rgb: 6, 182, 212;
  --bs-link-color: #22d3ee;
  --bs-link-color-rgb: 34, 211, 238;
  --bs-link-hover-color: #67e8f9;
  --bs-link-hover-color-rgb: 103, 232, 249;

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

  --ds-background-brand-bold: #06b6d4;
  --ds-background-brand-bold-hovered: #0891b2;
  --ds-background-brand-bold-pressed: #0e7490;
  --ds-border-brand: #06b6d4;
  --ds-icon-brand: #22d3ee;

  /* Accent teal overrides to match our cyan */
  --ds-text-accent-teal: #22d3ee;
  --ds-text-accent-teal-bolder: #67e8f9;
  --ds-background-accent-teal-subtlest: rgba(6, 182, 212, 0.08);
  --ds-background-accent-teal-subtler: rgba(6, 182, 212, 0.12);
  --ds-background-accent-teal-subtle: rgba(6, 182, 212, 0.18);
  --ds-background-accent-teal-bolder: #06b6d4;

  /* Surface colors */
  --ds-surface: #122744;
  --ds-surface-hovered: #16304e;
  --ds-surface-pressed: #1a3a5c;
  --ds-surface-raised: #16304e;
  --ds-surface-raised-hovered: #1a3a5c;
  --ds-surface-overlay: #16304e;

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

  /* Card and secondary backgrounds */
  --bs-secondary-bg: #122744;
  --bs-tertiary-bg: #16304e;
}

/* ---- Navbar Branding ---- */
[data-bs-theme="dark"] .navbar {
  background-color: #0a1628 !important;
  border-bottom: 1px solid rgba(6, 182, 212, 0.12);
}

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

[data-bs-theme="dark"] .navbar .dropdown-menu {
  background-color: #122744;
  border: 1px solid rgba(6, 182, 212, 0.12);
}

[data-bs-theme="dark"] .navbar .dropdown-item:hover {
  background-color: rgba(6, 182, 212, 0.08);
  color: #22d3ee;
}

/* ---- Footer Branding ---- */
[data-bs-theme="dark"] .footer {
  background-color: #0a1628 !important;
  border-top: 1px solid rgba(6, 182, 212, 0.12);
}

/* ---- Card Styling ---- */
[data-bs-theme="dark"] .card {
  background-color: #122744;
  border: 1px solid rgba(6, 182, 212, 0.08);
}

[data-bs-theme="dark"] .card-header {
  background-color: #16304e;
  border-bottom: 1px solid rgba(6, 182, 212, 0.08);
}

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

/* ---- Button Primary Override ---- */
.btn-primary {
  --bs-btn-bg: #06b6d4;
  --bs-btn-border-color: #06b6d4;
  --bs-btn-hover-bg: #0891b2;
  --bs-btn-hover-border-color: #0891b2;
  --bs-btn-active-bg: #0e7490;
  --bs-btn-active-border-color: #0e7490;
  --bs-btn-disabled-bg: #06b6d4;
  --bs-btn-disabled-border-color: #06b6d4;
}

.btn-outline-primary {
  --bs-btn-color: #06b6d4;
  --bs-btn-border-color: #06b6d4;
  --bs-btn-hover-bg: #06b6d4;
  --bs-btn-hover-border-color: #06b6d4;
  --bs-btn-active-bg: #0891b2;
  --bs-btn-active-border-color: #0891b2;
}

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

/* ---- Form Focus States ---- */
.form-control:focus,
.form-select:focus {
  border-color: #06b6d4;
  box-shadow: 0 0 0 0.25rem rgba(6, 182, 212, 0.25);
}

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

/* ---- Selection checkbox override ---- */
.user-select-checkbox:checked {
  background-color: #06b6d4 !important;
  border-color: #06b6d4 !important;
}
tr.selected {
  background-color: rgba(6, 182, 212, 0.1) !important;
}

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

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

/* 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: #122744 !important;
  border: 1px solid rgba(6, 182, 212, 0.12) !important;
  color: #e9f2ff !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(6, 182, 212, 0.06) !important;
}

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

.login-card .form-control {
  background-color: #0e213b !important;
  border-color: rgba(6, 182, 212, 0.15) !important;
  color: #e9f2ff !important;
}

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

.login-card .form-control:focus {
  background-color: #0a1628 !important;
  border-color: #06b6d4 !important;
  color: #e9f2ff !important;
  box-shadow: 0 0 0 0.25rem rgba(6, 182, 212, 0.2) !important;
}

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

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

.login-card .register_links {
  border-top: 1px solid rgba(6, 182, 212, 0.08);
  margin-top: 1rem;
  padding-top: 1rem;
}

.login-card .dropdown-toggle {
  color: #a9bdd6 !important;
  border-color: rgba(6, 182, 212, 0.15) !important;
}

.login-card .dropdown-menu {
  background-color: #0e213b !important;
  border: 1px solid rgba(6, 182, 212, 0.12) !important;
}

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

.login-card .dropdown-item:hover {
  background-color: rgba(6, 182, 212, 0.08) !important;
  color: #22d3ee !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(6, 182, 212, 0.1) !important;
  border-color: rgba(6, 182, 212, 0.2) !important;
  color: #67e8f9 !important;
}

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

[data-bs-theme="dark"] .card:hover {
  border-color: rgba(6, 182, 212, 0.15);
}

/* ---- Toast Overrides ---- */
[data-bs-theme="dark"] .toast {
  background-color: #122744;
  border: 1px solid rgba(6, 182, 212, 0.12);
}

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

/* ---- Offcanvas (Mobile) ---- */
[data-bs-theme="dark"] .offcanvas {
  background-color: #0e213b;
  border-right: 1px solid rgba(6, 182, 212, 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 ---- */
.ttm-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;
}
.ttm-brand-logo:hover {
  color: #22d3ee;
}
.ttm-brand-logo svg {
  width: 24px;
  height: 24px;
  color: #06b6d4;
}