/**
 * Glassmorphism Styles - Professional Glass Effect
 * Maintains original colors while adding modern glass effect
 */

/* Glassmorphism Base Variables */
:root {
  --glass-bg-dark: rgba(0, 0, 16, 0.7);
  --glass-bg-light: rgba(255, 255, 255, 0.7);
  --glass-border-dark: rgba(255, 255, 255, 0.1);
  --glass-border-light: rgba(0, 0, 0, 0.1);
  --glass-shadow-dark: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
  --glass-shadow-light: 0 8px 32px 0 rgba(0, 0, 0, 0.1);
  --glass-blur: blur(10px);
  --glass-blur-strong: blur(20px);
}

/* Sidebar Glass Effect */
.dark-mode .sidebar {
  background: var(--glass-bg-dark) !important;
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border-right: 1px solid var(--glass-border-dark);
  box-shadow: var(--glass-shadow-dark) !important;
}

.light-mode .sidebar {
  background: var(--glass-bg-light) !important;
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border-right: 1px solid var(--glass-border-light);
  box-shadow: var(--glass-shadow-light) !important;
}

/* Login Box Glass Effect */
.dark-mode .login-box {
  background: var(--glass-bg-dark) !important;
  backdrop-filter: var(--glass-blur-strong);
  -webkit-backdrop-filter: var(--glass-blur-strong);
  border: 1px solid var(--glass-border-dark);
  box-shadow: var(--glass-shadow-dark) !important;
}

.light-mode .login-box {
  background: var(--glass-bg-light) !important;
  backdrop-filter: var(--glass-blur-strong);
  -webkit-backdrop-filter: var(--glass-blur-strong);
  border: 1px solid var(--glass-border-light);
  box-shadow: var(--glass-shadow-light) !important;
}

.dark-mode .login-box .notif-head {
  background: rgba(10, 17, 29, 0.8) !important;
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border-bottom: 1px solid var(--glass-border-dark);
}

.light-mode .login-box .notif-head {
  background: rgba(238, 238, 238, 0.8) !important;
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border-bottom: 1px solid var(--glass-border-light);
}

/* Card Body Glass Effect */
.dark-mode .carda__body {
  background: rgba(0, 0, 16, 0.6) !important;
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border-dark);
}

.light-mode .carda__body {
  background: rgba(255, 255, 255, 0.6) !important;
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border-light);
}

/* Search Group Glass Effect */
.dark-mode .search-group {
  background: rgba(0, 0, 0, 0.6) !important;
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid rgba(10, 183, 226, 0.3) !important;
}

.light-mode .search-group {
  background: rgba(255, 255, 255, 0.6) !important;
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid rgba(10, 183, 226, 0.3) !important;
}

/* Top Navigation Glass Effect */
.dark-mode .top-nav {
  background: rgba(0, 0, 16, 0.5) !important;
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border-bottom: 1px solid var(--glass-border-dark);
}

.light-mode .top-nav {
  background: rgba(255, 255, 255, 0.5) !important;
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border-bottom: 1px solid var(--glass-border-light);
}

/* Content Section Glass Effect */
.dark-mode .content-section {
  background: rgba(0, 0, 16, 0.3) !important;
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
}

.light-mode .content-section {
  background: rgba(255, 255, 255, 0.3) !important;
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
}

/* Bottom Navbar Glass Effect */
.dark-mode .bottom-navbar {
  background: rgba(0, 0, 16, 0.7) !important;
  backdrop-filter: var(--glass-blur-strong);
  -webkit-backdrop-filter: var(--glass-blur-strong);
  border-top: 1px solid var(--glass-border-dark) !important;
}

.light-mode .bottom-navbar {
  background: rgba(255, 255, 255, 0.7) !important;
  backdrop-filter: var(--glass-blur-strong);
  -webkit-backdrop-filter: var(--glass-blur-strong);
  border-top: 1px solid var(--glass-border-light) !important;
}

/* Nav Bar Container Glass Effect */
.dark-mode .nav-bar-container {
  background: rgba(0, 0, 16, 0.4) !important;
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border-top: 1px solid var(--glass-border-dark) !important;
}

.light-mode .nav-bar-container {
  background: rgba(255, 255, 255, 0.4) !important;
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border-top: 1px solid var(--glass-border-light) !important;
}

/* Form Inputs Glass Effect */
.dark-mode .carda__body input.form-control[type="text"],
.dark-mode .carda__body input.form-control[type="password"],
.dark-mode .carda__body input.form-control[type="email"] {
  background: rgba(0, 0, 0, 0.4) !important;
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border-dark) !important;
}

.light-mode .carda__body input.form-control[type="text"],
.light-mode .carda__body input.form-control[type="password"],
.light-mode .carda__body input.form-control[type="email"] {
  background: rgba(255, 255, 255, 0.4) !important;
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border-light) !important;
}

/* Dropdown Menu Glass Effect */
.dark-mode .dropdown-menu {
  background: rgba(0, 0, 16, 0.8) !important;
  backdrop-filter: var(--glass-blur-strong);
  -webkit-backdrop-filter: var(--glass-blur-strong);
  border: 1px solid var(--glass-border-dark) !important;
  box-shadow: var(--glass-shadow-dark) !important;
}

.light-mode .dropdown-menu {
  background: rgba(255, 255, 255, 0.8) !important;
  backdrop-filter: var(--glass-blur-strong);
  -webkit-backdrop-filter: var(--glass-blur-strong);
  border: 1px solid var(--glass-border-light) !important;
  box-shadow: var(--glass-shadow-light) !important;
}

/* Serie Dialog Glass Effect */
.dark-mode .serie-dialog > .login-box {
  background: var(--glass-bg-dark) !important;
  backdrop-filter: var(--glass-blur-strong);
  -webkit-backdrop-filter: var(--glass-blur-strong);
  border: 1px solid var(--glass-border-dark);
  box-shadow: var(--glass-shadow-dark) !important;
}

.light-mode .serie-dialog > .login-box {
  background: var(--glass-bg-light) !important;
  backdrop-filter: var(--glass-blur-strong);
  -webkit-backdrop-filter: var(--glass-blur-strong);
  border: 1px solid var(--glass-border-light);
  box-shadow: var(--glass-shadow-light) !important;
}

/* Alert Boxes Glass Effect */
.dark-mode .alert {
  background: rgba(0, 0, 16, 0.7) !important;
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border-dark) !important;
}

.light-mode .alert {
  background: rgba(255, 255, 255, 0.7) !important;
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border-light) !important;
}

/* Modal Glass Effect */
.dark-mode .modal-content {
  background: var(--glass-bg-dark) !important;
  backdrop-filter: var(--glass-blur-strong);
  -webkit-backdrop-filter: var(--glass-blur-strong);
  border: 1px solid var(--glass-border-dark) !important;
  box-shadow: var(--glass-shadow-dark) !important;
}

.light-mode .modal-content {
  background: var(--glass-bg-light) !important;
  backdrop-filter: var(--glass-blur-strong);
  -webkit-backdrop-filter: var(--glass-blur-strong);
  border: 1px solid var(--glass-border-light) !important;
  box-shadow: var(--glass-shadow-light) !important;
}

/* Smooth Transitions */
.sidebar,
.login-box,
.carda__body,
.search-group,
.top-nav,
.content-section,
.bottom-navbar,
.nav-bar-container,
.dropdown-menu,
.modal-content,
.alert {
  transition: all 0.3s ease;
}

/* Enhanced Hover Effects */
.dark-mode .left-navbar > ul > li:hover {
  background: rgba(20, 20, 33, 0.6) !important;
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
}

.light-mode .left-navbar > ul > li:hover {
  background: rgba(241, 241, 241, 0.6) !important;
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
}

/* Carousel Glass Effect */
.dark-mode .carousel {
  background: rgba(0, 0, 16, 0.3) !important;
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
}

.light-mode .carousel {
  background: rgba(255, 255, 255, 0.3) !important;
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
}

/* Card Items Glass Effect */
.dark-mode .card,
.dark-mode .carda {
  background: rgba(0, 0, 16, 0.5) !important;
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border-dark) !important;
  box-shadow: var(--glass-shadow-dark) !important;
}

.light-mode .card,
.light-mode .carda {
  background: rgba(255, 255, 255, 0.5) !important;
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border-light) !important;
  box-shadow: var(--glass-shadow-light) !important;
}

/* Support for older browsers */
@supports not (backdrop-filter: blur(10px)) {
  .dark-mode .sidebar,
  .dark-mode .login-box,
  .dark-mode .carda__body {
    background: rgba(0, 0, 16, 0.95) !important;
  }
  
  .light-mode .sidebar,
  .light-mode .login-box,
  .light-mode .carda__body {
    background: rgba(255, 255, 255, 0.95) !important;
  }
}