/* ============================================
   NTL THEME BRIDGE
   Aligns Bootstrap 5 with homepage design system.
   Loaded after Bootstrap CSS, before site.css.
   ============================================ */

/* ============================================
   DARK MODE TOKENS
   ============================================ */
[data-bs-theme=dark] {
  /* Backgrounds — matched to home.css */
  --bs-body-bg:             #0a0e1a;
  --bs-secondary-bg:        #121826;
  --bs-tertiary-bg:         #151c2d;

  /* Cards & surfaces */
  --bs-card-bg:             #151c2d;
  --bs-card-border-color:   rgba(255, 255, 255, 0.08);
  --bs-card-cap-bg:         #121826;

  /* Text */
  --bs-body-color:          #f0f4ff;
  --bs-secondary-color:     rgba(220, 230, 255, 0.6);
  --bs-tertiary-color:      rgba(200, 215, 255, 0.35);
  --bs-emphasis-color:      #f0f4ff;

  /* Links */
  --bs-link-color:          #60a5fa;
  --bs-link-hover-color:    #3b82f6;
  --bs-link-color-rgb:      96, 165, 250;

  /* Primary accent */
  --bs-primary:             #3b82f6;
  --bs-primary-rgb:         59, 130, 246;

  /* Borders */
  --bs-border-color:        rgba(255, 255, 255, 0.08);
  --bs-border-color-translucent: rgba(255, 255, 255, 0.06);

  /* Modals & dropdowns */
  --bs-modal-bg:            #151c2d;
  --bs-modal-border-color:  rgba(255, 255, 255, 0.08);
  --bs-dropdown-bg:         rgba(12, 18, 32, 0.96);
  --bs-dropdown-border-color: rgba(255, 255, 255, 0.08);
  --bs-dropdown-link-hover-bg: rgba(59, 130, 246, 0.08);

  /* Custom NTL tokens */
  --ntl-blue:               #3b82f6;
  --ntl-blue-light:         #60a5fa;
  --ntl-blue-dim:           rgba(59, 130, 246, 0.12);
  --ntl-purple:             #8b5cf6;
  --ntl-purple-dim:         rgba(139, 92, 246, 0.1);
  --ntl-indigo:             #6366f1;
  --ntl-radius:             12px;
  --ntl-radius-sm:          8px;
  --ntl-transition:         0.35s cubic-bezier(0.4, 0, 0.2, 1);
  --ntl-border-hover:       rgba(99, 179, 237, 0.25);
  --ntl-bg-card-hover:      #1c263b;
  --ntl-gradient:           linear-gradient(135deg, #3b82f6 0%, #6366f1 100%);
  --ntl-text-label:         rgba(99, 179, 237, 0.8);
}

/* ============================================
   LIGHT MODE TOKENS
   ============================================ */
[data-bs-theme=light] {
  /* Backgrounds */
  --bs-body-bg:             #f0f2f7;
  --bs-secondary-bg:        #e8ecf4;
  --bs-tertiary-bg:         #ffffff;

  /* Cards & surfaces */
  --bs-card-bg:             #ffffff;
  --bs-card-border-color:   rgba(0, 0, 0, 0.08);
  --bs-card-cap-bg:         #f7f8fc;

  /* Text */
  --bs-body-color:          #1a1f36;
  --bs-secondary-color:     #4a5568;
  --bs-tertiary-color:      #718096;
  --bs-emphasis-color:      #1a1f36;

  /* Links */
  --bs-link-color:          #3b82f6;
  --bs-link-hover-color:    #2563eb;
  --bs-link-color-rgb:      59, 130, 246;

  /* Primary accent */
  --bs-primary:             #3b82f6;
  --bs-primary-rgb:         59, 130, 246;

  /* Borders */
  --bs-border-color:        rgba(0, 0, 0, 0.08);
  --bs-border-color-translucent: rgba(0, 0, 0, 0.06);

  /* Modals & dropdowns */
  --bs-modal-bg:            #ffffff;
  --bs-modal-border-color:  rgba(0, 0, 0, 0.08);
  --bs-dropdown-bg:         #ffffff;
  --bs-dropdown-border-color: rgba(0, 0, 0, 0.08);
  --bs-dropdown-link-hover-bg: rgba(59, 130, 246, 0.06);

  /* Custom NTL tokens */
  --ntl-blue:               #3b82f6;
  --ntl-blue-light:         #2563eb;
  --ntl-blue-dim:           rgba(59, 130, 246, 0.08);
  --ntl-purple:             #7c3aed;
  --ntl-purple-dim:         rgba(124, 58, 237, 0.08);
  --ntl-indigo:             #4f46e5;
  --ntl-radius:             12px;
  --ntl-radius-sm:          8px;
  --ntl-transition:         0.35s cubic-bezier(0.4, 0, 0.2, 1);
  --ntl-border-hover:       rgba(59, 130, 246, 0.25);
  --ntl-bg-card-hover:      #f7f8fc;
  --ntl-gradient:           linear-gradient(135deg, #3b82f6 0%, #6366f1 100%);
  --ntl-text-label:         rgba(59, 130, 246, 0.8);
}

/* ============================================
   TYPOGRAPHY
   ============================================ */
body {
  font-family: 'Inter', 'Noto Sans JP', sans-serif;
  -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: 'Space Grotesk', 'Inter', sans-serif;
  letter-spacing: -0.02em;
}

code, pre, samp, kbd {
  font-family: 'JetBrains Mono', 'Roboto Mono', 'Consolas', monospace;
}

/* ============================================
   BODY BACKGROUND
   ============================================ */
[data-bs-theme=dark] body {
  background: var(--bs-body-bg);
  background-image:
    radial-gradient(ellipse 80% 50% at 50% -20%, rgba(59, 130, 246, 0.06) 0%, transparent 70%),
    radial-gradient(ellipse 50% 50% at 90% 50%, rgba(139, 92, 246, 0.04) 0%, transparent 70%);
  background-attachment: fixed;
}

[data-bs-theme=light] body {
  background: var(--bs-body-bg);
  background-image:
    radial-gradient(ellipse 80% 50% at 50% 0%, rgba(59, 130, 246, 0.04) 0%, transparent 70%);
  background-attachment: fixed;
}

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

/* ============================================
   NAVBAR
   ============================================ */
.navbar {
  background: rgba(10, 14, 26, 0.85) !important;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--bs-border-color);
  transition: all var(--ntl-transition);
}

[data-bs-theme=light] .navbar {
  background: rgba(240, 242, 247, 0.85) !important;
}

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

/* ============================================
   CARDS
   ============================================ */
.card {
  border-radius: var(--ntl-radius);
  border: 1px solid var(--bs-card-border-color);
  transition: all var(--ntl-transition);
  background-color: var(--bs-card-bg);
}

.card-header {
  border-bottom: 1px solid var(--bs-card-border-color);
  background-color: var(--bs-card-cap-bg);
}

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

.card-footer {
  border-top: 1px solid var(--bs-card-border-color);
  background-color: var(--bs-card-cap-bg);
}

/* ============================================
   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: 0 4px 16px rgba(59, 130, 246, 0.2);
}

.btn-primary:hover,
.btn-primary:focus {
  background: var(--ntl-gradient);
  transform: translateY(-1px);
  box-shadow: 0 6px 24px rgba(59, 130, 246, 0.35);
}

.btn-primary:active {
  background: var(--ntl-gradient);
  transform: translateY(0);
  box-shadow: 0 2px 8px rgba(59, 130, 246, 0.2);
}

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

.btn-outline-secondary:hover {
  background: rgba(255, 255, 255, 0.03);
  border-color: var(--ntl-border-hover);
}

[data-bs-theme=light] .btn-outline-secondary:hover {
  background: rgba(0, 0, 0, 0.03);
}

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

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

.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(--bs-border-color);
  transition: all var(--ntl-transition);
}

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

/* ============================================
   MODALS
   ============================================ */
.modal-content {
  border-radius: var(--ntl-radius);
  border: 1px solid var(--bs-border-color);
  background-color: var(--bs-modal-bg);
}

.modal-header {
  border-bottom: 1px solid var(--bs-border-color);
}

.modal-footer {
  border-top: 1px solid var(--bs-border-color);
}

/* ============================================
   ALERTS
   ============================================ */
.alert {
  border-radius: var(--ntl-radius);
}

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

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

.dropdown-item:hover,
.dropdown-item:focus {
  background-color: var(--bs-dropdown-link-hover-bg);
}

/* ============================================
   FOOTER
   ============================================ */
footer {
  border-top: 1px solid var(--bs-border-color);
}

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