/* ============================================
   NTL THEME BRIDGE — Bootstrap 5 ← NTL tokens
   Loaded after Bootstrap CSS and tokens.css on
   Bootstrap layouts only. Maps --bs-* variables
   onto the NTL design tokens; Bootstrap-structure
   component skins live here, generic component
   styles live in ntl.css.
   ============================================ */

:root,
[data-bs-theme=dark],
[data-bs-theme=light] {
  /* Backgrounds */
  --bs-body-bg:             var(--ntl-bg);
  --bs-secondary-bg:        var(--ntl-bg-subtle);
  --bs-tertiary-bg:         var(--ntl-surface);

  /* Cards & surfaces */
  --bs-card-bg:             var(--ntl-surface);
  --bs-card-border-color:   var(--ntl-border);
  --bs-card-cap-bg:         var(--ntl-surface-2);

  /* Text */
  --bs-body-color:          var(--ntl-text);
  --bs-secondary-color:     var(--ntl-text-2);
  --bs-tertiary-color:      var(--ntl-text-3);
  --bs-emphasis-color:      var(--ntl-text);

  /* Links */
  --bs-link-color:          var(--ntl-blue);
  --bs-link-hover-color:    var(--ntl-blue-strong);
  --bs-link-color-rgb:      var(--ntl-blue-rgb);

  /* Primary accent */
  --bs-primary:             var(--ntl-blue);
  --bs-primary-rgb:         var(--ntl-blue-rgb);

  /* Semantic */
  --bs-success:             var(--ntl-success);
  --bs-danger:              var(--ntl-danger);
  --bs-warning:             var(--ntl-warning);
  --bs-info:                var(--ntl-info);

  /* Borders */
  --bs-border-color:        var(--ntl-border);
  --bs-border-color-translucent: var(--ntl-border);
  --bs-border-radius:       var(--ntl-radius-sm);
  --bs-border-radius-lg:    var(--ntl-radius);

  /* Modals & dropdowns */
  --bs-modal-bg:            var(--ntl-surface);
  --bs-modal-border-color:  var(--ntl-border);
  --bs-dropdown-bg:         var(--ntl-surface);
  --bs-dropdown-border-color: var(--ntl-border);
  --bs-dropdown-link-hover-bg: var(--ntl-blue-dim);

  /* Fonts */
  --bs-body-font-family:    var(--ntl-font-sans);
}

[data-bs-theme=dark] {
  --bs-dropdown-bg:         rgba(12, 18, 32, 0.96);
}

/* ============================================
   TYPOGRAPHY
   ============================================ */
body {
  font-family: var(--ntl-font-sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  line-height: 1.7;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: var(--ntl-font-sans);
  font-weight: 600;
  letter-spacing: -0.02em;
}

code, pre, samp, kbd {
  font-family: var(--ntl-font-mono);
}

/* ============================================
   BODY BACKGROUND
   ============================================ */
body {
  background: var(--ntl-bg);
  background-image: var(--ntl-bg-gradient);
  background-attachment: fixed;
}

/* ============================================
   SELECTION
   ============================================ */
::selection {
  background: rgba(99, 102, 241, 0.3);
  color: #fff;
}

/* ============================================
   NAVBAR (legacy .navbar; the shared site nav
   is styled in navbar.css)
   ============================================ */
.navbar {
  background: color-mix(in srgb, var(--ntl-bg) 85%, transparent) !important;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--ntl-border);
  transition: all var(--ntl-transition);
}

.navbar .nav-link {
  font-size: var(--ntl-fs-sm);
  font-weight: 400;
  letter-spacing: 0.03em;
  transition: color var(--ntl-transition);
}

/* ============================================
   CARDS
   ============================================ */
.card {
  border-radius: var(--ntl-radius);
  border: 1px solid var(--ntl-border);
  background-color: var(--ntl-surface);
  box-shadow: var(--ntl-shadow-sm);
  transition: border-color var(--ntl-transition), box-shadow var(--ntl-transition);
}

.card-header {
  border-bottom: 1px solid var(--ntl-border);
  background-color: var(--ntl-surface-2);
}

.card-header:first-child {
  border-radius: var(--ntl-radius) var(--ntl-radius) 0 0;
}

.card-footer {
  border-top: 1px solid var(--ntl-border);
  background-color: var(--ntl-surface-2);
}

/* ============================================
   BUTTONS
   ============================================ */
.btn {
  border-radius: var(--ntl-radius-sm);
  font-weight: 500;
  letter-spacing: 0.02em;
  transition: all var(--ntl-transition);
}

.btn-primary {
  background: var(--ntl-gradient);
  border: none;
  box-shadow: var(--ntl-shadow-sm);
}

.btn-primary:hover,
.btn-primary:focus {
  background: var(--ntl-gradient);
  transform: translateY(-1px);
  box-shadow: var(--ntl-shadow-md);
}

.btn-primary:active {
  background: var(--ntl-gradient);
  transform: translateY(0);
  box-shadow: var(--ntl-shadow-sm);
}

.btn-secondary,
.btn-outline-secondary {
  border-color: var(--ntl-border);
  border-radius: var(--ntl-radius-sm);
}

.btn-outline-secondary {
  color: var(--ntl-text-2);
}

.btn-outline-secondary:hover {
  background: var(--ntl-surface-hover);
  border-color: var(--ntl-border-hover);
  color: var(--ntl-text);
}

/* ============================================
   FORMS
   ============================================ */
.form-control,
.form-select {
  border-radius: var(--ntl-radius-sm);
  border-color: var(--ntl-border);
  transition: border-color var(--ntl-transition), box-shadow var(--ntl-transition);
}

.form-control:focus,
.form-select:focus {
  border-color: var(--ntl-blue);
  box-shadow: var(--ntl-focus-ring);
}

.form-floating > label {
  font-size: 0.875rem;
}

/* ============================================
   BADGES
   ============================================ */
.badge.rounded-pill {
  border-radius: 6px;
  font-weight: 500;
  letter-spacing: 0.04em;
  font-size: 0.7rem;
  padding: 0.35em 0.65em;
}

/* ============================================
   PAGINATION
   ============================================ */
.page-link {
  border-radius: var(--ntl-radius-sm);
  border-color: var(--ntl-border);
  transition: all var(--ntl-transition);
}

.page-item.active .page-link {
  background: var(--ntl-gradient);
  border-color: transparent;
}

/* ============================================
   DROPDOWNS
   ============================================ */
.dropdown-menu {
  border-radius: var(--ntl-radius-sm);
  border: 1px solid var(--ntl-border);
  background-color: var(--bs-dropdown-bg);
  box-shadow: var(--ntl-shadow-md);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

.dropdown-item {
  font-size: var(--ntl-fs-sm);
  transition: background-color var(--ntl-transition);
}

.dropdown-item:hover,
.dropdown-item:focus {
  background-color: var(--ntl-blue-dim);
}

/* ============================================
   UTILITIES
   ============================================ */
.backdrop-blur {
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}