/**
 * Theme Transition Styles
 * Smooth animations when switching between light and dark themes
 */

/* ===== Smooth Theme Transitions ===== */

/* Apply transitions only when theme is actively changing */
html.theme-transitioning,
html.theme-transitioning *,
html.theme-transitioning *::before,
html.theme-transitioning *::after {
  transition: background-color 0.3s ease,
              color 0.3s ease,
              border-color 0.3s ease,
              box-shadow 0.3s ease !important;
}

/* Prevent jarring transitions on initial page load */
html:not(.theme-transitioning) * {
  transition: none !important;
}

/* Re-enable specific component transitions after theme change completes */
html:not(.theme-transitioning) .menu-link,
html:not(.theme-transitioning) .nav-link,
html:not(.theme-transitioning) .btn,
html:not(.theme-transitioning) .card,
html:not(.theme-transitioning) .dropdown-item,
html:not(.theme-transitioning) .form-control,
html:not(.theme-transitioning) .model-dropdown-item {
  transition: all 0.2s ease !important;
}

/* ===== Theme Toggle Button Styles ===== */

/* Icons for theme toggle */
.theme-icon-dark,
.theme-icon-light {
  transition: opacity 0.3s ease, transform 0.3s ease;
  display: inline-block;
}

/* Light mode: show moon icon (to switch to dark) */
html.light-style .theme-icon-light {
  display: none;
}

html.light-style .theme-icon-dark {
  display: inline-block;
}

/* Dark mode: show sun icon (to switch to light) */
html.dark-style .theme-icon-dark {
  display: none;
}

html.dark-style .theme-icon-light {
  display: inline-block;
}

/* Hover effect on toggle button */
.nav-link:hover .theme-icon-dark,
.nav-link:hover .theme-icon-light {
  transform: rotate(15deg);
}

/* Style for the theme toggle link */
.style-switcher-toggle {
  cursor: pointer;
  user-select: none;
}

.style-switcher-toggle:active .theme-icon-dark,
.style-switcher-toggle:active .theme-icon-light {
  transform: scale(0.95);
}

/* ===== Print Styles ===== */

/* Always use light theme for printing */
@media print {
  html.dark-style {
    background: white !important;
    color: black !important;
  }

  html.dark-style * {
    background: white !important;
    color: black !important;
    border-color: #dee2e6 !important;
  }

  html.dark-style .card,
  html.dark-style .bg-menu-theme,
  html.dark-style .bg-navbar-theme {
    background: white !important;
    color: black !important;
  }
}