/* ==========================================================================
   Glassmorphism Bootstrap 5 Theme
   Frosted glass hints, backdrop blurs, and translucent panels.
   Include AFTER bootstrap.min.css.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700&display=swap');

/* --------------------------------------------------------------------------
   1. CSS Custom Properties (Bootstrap variable overrides)
   -------------------------------------------------------------------------- */
:root {
  /* Glassmorphism Palette Tokens */
  --glass-primary: #4f46e5;
  --glass-primary-rgb: 79, 70, 229;
  --glass-secondary: #0284c7;
  --glass-surface-light: rgba(255, 255, 255, 0.65);
  --glass-border-light: rgba(255, 255, 255, 0.5);
  --glass-text-light: #0f172a;

  /* Bootstrap Primary Overrides (Light Mode) */
  --bs-primary: var(--glass-primary);
  --bs-primary-rgb: 79, 70, 229;
  --bs-secondary: var(--glass-secondary);
  --bs-secondary-rgb: 2, 132, 199;
  --bs-success: #10b981;
  --bs-success-rgb: 16, 185, 129;
  --bs-info: #06b6d4;
  --bs-info-rgb: 6, 182, 212;
  --bs-warning: #f59e0b;
  --bs-warning-rgb: 245, 158, 11;
  --bs-danger: #ef4444;
  --bs-danger-rgb: 239, 68, 68;
  --bs-light: rgba(255, 255, 255, 0.7);
  --bs-light-rgb: 255, 255, 255;
  --bs-dark: #0f172a;
  --bs-dark-rgb: 15, 23, 42;

  /* Body & Surface */
  --bs-body-bg: transparent;
  --bs-body-color: var(--glass-text-light);
  --bs-tertiary-bg: var(--glass-surface-light);
  --bs-border-color: var(--glass-border-light);

  /* Typography */
  --bs-font-sans-serif: 'Outfit', sans-serif;
  --bs-body-font-size: 1rem;
  --bs-body-line-height: 1.5;

  /* Components Globals */
  --bs-border-radius: 14px;
  --bs-border-radius-sm: 8px;
  --bs-border-radius-lg: 18px;

  /* Focus Ring */
  --bs-focus-ring-width: 3px;
  --bs-focus-ring-color: rgba(79, 70, 229, 0.3);

  /* Navbar */
  --bs-navbar-bg: rgba(255, 255, 255, 0.55);
}

body {
  background: linear-gradient(135deg, #e0c3fc 0%, #8ec5fc 100%) fixed;
  min-height: 100vh;
}

[data-bs-theme="dark"] {
  --glass-surface-dark: rgba(15, 23, 42, 0.65);
  --glass-border-dark: rgba(255, 255, 255, 0.15);

  --bs-primary: #818cf8;
  --bs-primary-rgb: 129, 140, 248;
  --bs-secondary: #38bdf8;
  --bs-secondary-rgb: 56, 189, 248;

  --bs-body-color: #f8fafc;
  --bs-tertiary-bg: var(--glass-surface-dark);
  --bs-border-color: var(--glass-border-dark);

  --bs-light: rgba(30, 41, 59, 0.7);
  --bs-dark: #090d16;

  --bs-navbar-bg: rgba(15, 23, 42, 0.6);
  --bs-focus-ring-color: rgba(129, 140, 248, 0.4);
}

[data-bs-theme="dark"] body {
  background: radial-gradient(circle at 20% 20%, #1e1b4b 0%, #0f172a 100%) fixed;
}

/* --------------------------------------------------------------------------
   2. Base & Typography
   -------------------------------------------------------------------------- */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-weight: 600;
  color: var(--bs-body-color);
}

a {
  color: var(--bs-primary);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

/* --------------------------------------------------------------------------
   3. Glassmorphic Components
   -------------------------------------------------------------------------- */
.card, .navbar, .alert, .modal-content, .dropdown-menu, .offcanvas, .list-group-item, .toast {
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  background-color: var(--bs-tertiary-bg);
  border: 1px solid var(--bs-border-color);
  box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.15);
}

.btn {
  border-radius: var(--bs-border-radius);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  font-weight: 600;
}

.btn-primary {
  --bs-btn-bg: rgba(var(--bs-primary-rgb), 0.85);
  --bs-btn-border-color: rgba(var(--bs-primary-rgb), 0.9);
  --bs-btn-hover-bg: var(--bs-primary);
  --bs-btn-hover-border-color: var(--bs-primary);
}

.form-control, .form-select {
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  background-color: var(--bs-tertiary-bg);
  border: 1px solid var(--bs-border-color);
  border-radius: var(--bs-border-radius-sm);
  color: var(--bs-body-color);
}

.form-control:focus, .form-select:focus {
  border-color: var(--bs-primary);
  box-shadow: 0 0 0 3px var(--bs-focus-ring-color);
}

.card-header {
  background-color: rgba(255, 255, 255, 0.1);
  border-bottom: 1px solid var(--bs-border-color);
  font-weight: 600;
}