/*----------------------------------
  🌟 Universal Theme: Glass + Gradient Cards
-----------------------------------*/
/* 🧊 Glass Navbar */
.glass-nav {
  backdrop-filter: blur(14px) saturate(180%);
  -webkit-backdrop-filter: blur(14px) saturate(180%);
  background: linear-gradient(135deg, rgba(25, 25, 35, 0.7), rgba(40, 40, 60, 0.7));
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
  border-radius: 0 0 12px 12px;
}

.glass-nav .nav-link {
  color: #ffffff !important;
  font-weight: 500;
}
.glass-nav .nav-link:hover {
  color: #d1d1ff !important;
}

.glass-navbar-brand {
    text-decoration: none;
    white-space: nowrap;
    font-size: 18px;
}

/* 🌫️ Glass Base Card */
.glass-card {
  border-radius: 14px;
  backdrop-filter: blur(10px) saturate(140%);
  -webkit-backdrop-filter: blur(10px) saturate(140%);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
  color: white;
  transition: all 0.3s ease;
}

/* 🎨 Gradient Tints */
.dashboard-card.glass-blue {
  background: linear-gradient(135deg, rgba(30, 144, 255, 0.4), rgba(0, 191, 255, 0.4));
}

.dashboard-card.glass-green {
  background: linear-gradient(135deg, rgba(46, 204, 113, 0.4), rgba(39, 174, 96, 0.4));
}

.dashboard-card.glass-purple {
  background: linear-gradient(135deg, rgba(155, 89, 182, 0.4), rgba(142, 68, 173, 0.4));
}

.dashboard-card.glass-yellow {
  background: linear-gradient(135deg, rgba(241, 196, 15, 0.4), rgba(243, 156, 18, 0.4));
}


.glass-blue {
  background: linear-gradient(135deg, rgba(30, 144, 255, 0.15), rgba(0, 191, 255, 0.15));
}

.glass-green {
  background: linear-gradient(135deg, rgba(46, 204, 113, 0.15), rgba(39, 174, 96, 0.15));
}

.glass-purple {
  background: linear-gradient(135deg, rgba(155, 89, 182, 0.15), rgba(142, 68, 173, 0.15));
}

.glass-yellow {
  background: linear-gradient(135deg, rgba(241, 196, 15, 0.15), rgba(243, 156, 18, 0.15));
}

.glass-orange {
  background: linear-gradient(135deg, rgba(243, 156, 18, 0.15), rgba(230, 126, 34, 0.15));
}

/* 🔵 Indigo */
.glass-indigo {
  background: linear-gradient(135deg, rgba(75, 0, 130, 0.15), rgba(138, 43, 226, 0.15));
}

/* 🔴 Pink */
.glass-pink {
  background: linear-gradient(135deg, rgba(255, 105, 180, 0.15), rgba(255, 20, 147, 0.15));
}

/* ⚫ Grey */
.glass-grey {
  background: linear-gradient(135deg, rgba(128, 128, 128, 0.15), rgba(169, 169, 169, 0.15));
}

/* 🔮 Teal */
.glass-teal {
  background: linear-gradient(135deg, rgba(0, 128, 128, 0.15), rgba(72, 209, 204, 0.15));
}

/* 🟠 Coral */
.glass-coral {
  background: linear-gradient(135deg, rgba(255, 127, 80, 0.15), rgba(250, 128, 114, 0.15));
}

/* 🟢 Mint */
.glass-mint {
  background: linear-gradient(135deg, rgba(152, 251, 152, 0.15), rgba(60, 179, 113, 0.15));
}

/* 🔵 Sky */
.glass-sky {
  background: linear-gradient(135deg, rgba(135, 206, 235, 0.15), rgba(0, 191, 255, 0.15));
}

/* 🟣 Rose */
.glass-rose {
  background: linear-gradient(135deg, rgba(255, 102, 204, 0.15), rgba(255, 153, 204, 0.15));
}

/* 🟡 Lemon */
.glass-lemon {
  background: linear-gradient(135deg, rgba(255, 250, 205, 0.15), rgba(255, 255, 102, 0.15));
}

/* ⚡ Electric Blue */
.glass-electric {
  background: linear-gradient(135deg, rgba(0, 255, 255, 0.15), rgba(0, 191, 255, 0.15));
}


/* 📊 Info Card Style */
.info-card {
  border-radius: 12px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
  transition: all 0.3s ease-in-out;
}

/* ✨ Card Animations */
.animated-card {
  animation: fadeUp 0.6s ease-out forwards;
  opacity: 0;
}

@keyframes fadeUp {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 🧊 Filter/Search Card */
.filter-card {
  background: rgba(255, 255, 255, 0.07);
  backdrop-filter: blur(10px) saturate(160%);
  -webkit-backdrop-filter: blur(10px) saturate(160%);
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3);
  color: #ffffffcc;
}

.modal {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1055;
  display: none;
  width: 100%;
  height: 23%;
  overflow: hidden;
  outline: 0;
}

.modal-content {
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 10px;
  color: white;
}

.modal-content {
  max-height: 100%;
  overflow-y: auto;
}

.modal-dialog {
  margin-top: auto;
  margin-bottom: auto;
}

.glass-tabs .nav-link {
  background-color: rgba(255, 255, 255, 0.05);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.15);
  margin-right: 5px;
  border-radius: 20px;
  padding: 6px 14px;
  font-size: 0.8rem;
}

.glass-tabs .nav-link.active {
  background-color: rgba(255, 255, 255, 0.4);
  font-weight: 700;
      color: #fff;
}


/* 🧊 Base Pill Glass Button */
.btn-glass-pill {
  border: none;
  padding: 6px 18px;
  font-size: 0.8rem;
  border-radius: 5px;
  backdrop-filter: blur(10px) saturate(160%);
  -webkit-backdrop-filter: blur(10px) saturate(160%);
  color: #fff;
  transition: all 0.3s ease-in-out;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  background-color: rgba(255, 255, 255, 0.06);
  text-decoration: none;
}

.header-glass-pill {
  border: none;
  padding: 6px 18px;
  font-size: 1rem;
  backdrop-filter: blur(10px) saturate(160%);
  -webkit-backdrop-filter: blur(10px) saturate(160%);
  color: #fff;
  background-color: rgba(255, 255, 255, 0.06);
  text-decoration: none;
}

/* 🟦 Blue */
.btn-glass-pill.glass-blue {
  background: linear-gradient(135deg, rgba(30, 144, 255, 0.25), rgba(0, 191, 255, 0.25));
}

/* 🟩 Green */
.btn-glass-pill.glass-green {
  background: linear-gradient(135deg, rgba(46, 204, 113, 0.25), rgba(39, 174, 96, 0.25));
}

/* 🟪 Purple */
.btn-glass-pill.glass-purple {
  background: linear-gradient(135deg, rgba(155, 89, 182, 0.25), rgba(142, 68, 173, 0.25));
}

/* 🟨 Yellow */
.btn-glass-pill.glass-yellow {
  background: linear-gradient(135deg, rgba(241, 196, 15, 0.25), rgba(243, 156, 18, 0.25));
}

/* 🟧 Orange */
.btn-glass-pill.glass-orange {
  background: linear-gradient(135deg, rgba(243, 156, 18, 0.25), rgba(230, 126, 34, 0.25));
}

/* 🟦 Teal */
.btn-glass-pill.glass-teal {
  background: linear-gradient(135deg, rgba(0, 128, 128, 0.25), rgba(72, 209, 204, 0.25));
}

input.form-control.rounded-pill {
  background-color: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: white;
}

input.form-control.rounded-pill::placeholder {
  color: rgba(255, 255, 255, 0.6);
}


/* 📑 Pagination Styling */
.glass-pagination .page-link {
  background: rgba(255, 255, 255, 0.07);
  color: #ffffffcc;
  border: 1px solid rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(8px) saturate(160%);
  -webkit-backdrop-filter: blur(8px) saturate(160%);
  border-radius: 8px;
  margin: 0 4px;
  padding: 6px 12px;
  transition: all 0.3s ease;
}

.glass-pagination .page-link:hover {
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
  text-decoration: none;
}

.glass-pagination .page-item.active .page-link {
  background: rgba(255, 255, 255, 0.2);
  color: #fff;
  font-weight: bold;
  border: 1px solid rgba(255, 255, 255, 0.3);
}

.glass-pagination .page-item.disabled .page-link {
  opacity: 0.4;
  cursor: not-allowed;
}

/* 🧾 Card Text */
.card-title {
  font-size: 0.8rem;
  font-weight: 800;
  margin-bottom: 1rem;
}

/* 🧱 Ensure Cards Stack Gracefully */
.card-body {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

/* 🖋 Monospace Font Theme (Optional) */
body {
  background: url('/static/images/body_bg.png') no-repeat center center fixed;
  background-size: cover;
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(8px);
  color: #fff;
  font-family: monospace;
  min-height: 100vh;
  margin: 0;
  padding: 0;
  overflow-x: hidden;
}

body::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  backdrop-filter: blur(8px);
  background-color: rgba(0, 0, 0, 0.5); /* darkness tint */
  z-index: -1;
}
/* Scrollbar styling */
::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.05);
}

::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.2);
  border-radius: 8px;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.3);
}

html {
  scroll-behavior: smooth;
}