/* 
  ==================================================================================
  Themed Responsive Floating Navbar with Dark Mode Support and Custom Toggle Switch
  ==================================================================================
  This stylesheet enables a dynamic UI theme switcher (light/dark), a floating navbar, 
  and responsive styles with smooth transitions.

  Key Features:
  - :root and [data-theme="dark"] define CSS variables for theme-based colors.
  - body uses the theme variables and applies smooth transitions.
  - .floating-navbar is a fixed, rounded navigation bar with a glowing animation effect.
  - .nav-link, .navbar-brand, .icon-button, .text-muted are styled based on theme text color.
  - .theme-switch is a custom-built toggle switch to switch between light and dark themes.
  - The glow animation (pulseGlow & pulseGlowDark) changes color based on theme.
  - A styled footer also adapts based on the current theme.

  All theme transitions are smooth (0.3s), and the switch control is fully custom without default checkboxes.
*/

:root {
  --bg-color: #ffffff;
  --text-color: #212529;
  --nav-bg: #ffffff;
}

[data-theme="dark"] {
  --bg-color: #1e1e1e;
  --text-color: #f8f9fa;
  --nav-bg: #2c2c2c;
}

body {
  background-color: var(--bg-color);
  color: var(--text-color);
  padding-top: 100px;
  transition: background-color 0.3s, color 0.3s;
}

.floating-navbar {
  position: fixed;
  top: 20px;
  left: 20px;
  right: 20px;
  background-color: var(--nav-bg);
  border-radius: 12px;
  padding: 10px 20px;
  z-index: 1050;
  display: flex;
  justify-content: space-between;
  align-items: center;
  animation: pulseGlow 3s ease-in-out infinite;
  transition: background-color 0.3s;
}


.floating-navbar-second {
  position: fixed;
  top: 85px;
  left: 20px;
  right: 20px;
  background-color: var(--nav-bg);
  border-radius: 12px;
  padding: 10px 20px;
  z-index: 1049;
  display: flex;
  justify-content: space-between;
  align-items: center;
  animation: pulseGlow 3s ease-in-out infinite;
  transition: background-color 0.3s;
}

.nav-link,
.navbar-brand,
.icon-button,
.text-muted {
  color: var(--text-color) !important;
}

.nav-link:hover {
  text-decoration: underline;
}

.badge-notify {
  position: absolute;
  top: 0;
  right: -5px;
  font-size: 0.65rem;
}

.icon-button {
  position: relative;
  text-decoration: none;
}

.theme-switch {
  display: flex;
  align-items: center;
}

.theme-switch input {
  height: 0;
  width: 0;
  visibility: hidden;
}

.switch-label {
  cursor: pointer;
  width: 44px;
  height: 22px;
  background: #c6c6c6;
  display: block;
  border-radius: 50px;
  position: relative;
}

.switch-label::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 18px;
  height: 18px;
  background: #fff;
  border-radius: 18px;
  transition: 0.3s;
}

.theme-switch input:checked + .switch-label {
  background: #4f4f4f;
}

.theme-switch input:checked + .switch-label::after {
  left: calc(100% - 2px - 18px);
}

footer {
  text-align: center;
  margin-top: 100px;
  padding: 20px;
  background-color: var(--nav-bg);
  color: var(--text-color);
  transition: background-color 0.3s, color 0.3s;
}

@keyframes pulseGlow {
  0% {
    box-shadow: 0 0 20px rgba(0, 140, 255, 0.35);
  }
  50% {
    box-shadow: 0 0 40px rgba(0, 140, 255, 0.6);
  }
  100% {
    box-shadow: 0 0 20px rgba(0, 140, 255, 0.35);
  }
}

[data-theme="dark"] .floating-navbar {
  animation: pulseGlowDark 3s ease-in-out infinite;
}

@keyframes pulseGlowDark {
  0% {
    box-shadow: 0 0 20px rgba(0, 255, 170, 0.3);
  }
  50% {
    box-shadow: 0 0 40px rgba(0, 255, 170, 0.6);
  }
  100% {
    box-shadow: 0 0 20px rgba(0, 255, 170, 0.3);
  }
}

@media (max-width: 576px) {
  /* Shrink brand text instead of hiding */
  .floating-navbar .navbar-brand strong {
    font-size: 0.85rem; /* or adjust as needed */
  }

  /* Shrink the logo image */
  .floating-navbar .navbar-brand .assemblee-logo {
    height: 10px;
    width: auto;
    margin-right: 10px;
  }

  /* Hide nav item text, show icons only */
  .floating-navbar .nav-link,
  .floating-navbar .icon-button,
  .floating-navbar span,
  .floating-navbar .badge-notify {
    font-size: 0;
  }

  .floating-navbar .nav-link i,
  .floating-navbar .icon-button i {
    font-size: 1.25rem; /* Adjust icon size */
  }

  .floating-navbar .theme-switch {
    transform: scale(0.9);
  }

  .floating-navbar .d-flex.gap-4 {
    gap: 0.75rem !important;
  }
}

/* ===============================
   MOBILE FIRST (≤576px)
================================ */
@media (max-width: 576px) {
  body {
    padding-top: 90px;
  }

  .floating-navbar {
    padding: 8px 12px;
    border-radius: 10px;
  }

  /* Brand */
  .brand-text {
    font-size: 0.9rem;
  }

  /* Hide only text labels */
  .nav-text {
    display: none;
  }

  /* Icons sizing */
  .floating-navbar i {
    font-size: 1.3rem;
  }

  /* Compact spacing */
  .nav-actions {
    gap: 0.9rem !important;
  }

  /* Theme switch smaller */
  .theme-switch {
    transform: scale(0.85);
  }

  /* Notification dropdown width */
  #notifDropdownMenu {
    min-width: 85vw;
    max-height: 60vh;
    overflow-y: auto;
  }

  .current-date{
    display: none;
  }



  /* Badge readable */
  #notifCount {
    font-size: 0.65rem;
  }

  /* User widget safe tap area */
}


@media (max-width: 768px) {
  .brand-text {
    font-size: 1rem;
  }

    .current-date{
    display: none;
  }
  .nav-actions {
    gap: 1.1rem;
  }
}
/* ===============================
   MOBILE NAV CLEAN MODE
================================ */
@media (max-width: 768px){

  body{
    padding-top: 0 !important;
  }

    .current-date{
    display: none;
  }
  .floating-navbar,
  .floating-navbar-second{
    position: relative !important;
    top: 0 !important;
    left: 0;
    right: 0;
    margin: 0;
    border-radius: 0;
    animation: none !important;
    box-shadow: none !important;
  }

  .floating-navbar-second{
    border-top: 1px solid #ddd;
  }
}