/* Smooth Transitions and Animations
   Centralized transition system for consistent, smooth interactions */

:root {
  /* Transition durations */
  --transition-fast: 150ms;
  --transition-base: 200ms;
  --transition-slow: 300ms;
  --transition-slower: 500ms;
  
  /* Transition timing functions */
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out: cubic-bezier(0, 0, 0.2, 1);
  --ease-in: cubic-bezier(0.4, 0, 1, 1);
  --ease-smooth: cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Global smooth transitions - NO transform to prevent jarring effects */
* {
  transition-property: background-color, border-color, color, fill, stroke, opacity;
  transition-duration: var(--transition-base);
  transition-timing-function: var(--ease-in-out);
}

/* Exclude elements that shouldn't transition */
svg, img, video, canvas, iframe, embed, object,
.collapse, .collapsing, .app-sidebar *, #appSidebarOffcanvas * {
  transition: none;
}

/* Sidebar menu - only opacity and background */
.app-sidebar .menu-link,
.app-sidebar .list-group-item,
#appSidebarOffcanvas .menu-link,
#appSidebarOffcanvas .list-group-item {
  transition: opacity 0.2s ease, background-color 0.2s ease !important;
}

/* Buttons - smooth hover and active states - NO transform */
button,
.btn,
input[type="button"],
input[type="submit"],
input[type="reset"],
a.btn {
  transition: background-color var(--transition-base) var(--ease-in-out),
              border-color var(--transition-base) var(--ease-in-out),
              color var(--transition-base) var(--ease-in-out),
              opacity var(--transition-base) var(--ease-in-out);
}

button:hover,
.btn:hover,
input[type="button"]:hover,
input[type="submit"]:hover,
input[type="reset"]:hover,
a.btn:hover {
  opacity: 0.9;
}

button:active,
.btn:active,
input[type="button"]:active,
input[type="submit"]:active,
input[type="reset"]:active,
a.btn:active {
  opacity: 0.8;
  transition-duration: var(--transition-fast);
}

/* Form inputs - smooth focus states */
input:not([type="checkbox"]):not([type="radio"]),
select,
textarea {
  transition: border-color var(--transition-base) var(--ease-in-out),
              box-shadow var(--transition-base) var(--ease-in-out),
              background-color var(--transition-base) var(--ease-in-out);
}

input:not([type="checkbox"]):not([type="radio"]):focus,
select:focus,
textarea:focus {
  transition-duration: var(--transition-fast);
}

/* Links - smooth hover */
a:not(.btn) {
  transition: color var(--transition-base) var(--ease-in-out),
              text-decoration-color var(--transition-base) var(--ease-in-out);
}

/* Cards and containers - smooth hover - NO transform */
.card,
.panel,
.container-elevated {
  transition: box-shadow var(--transition-slow) var(--ease-in-out),
              background-color var(--transition-base) var(--ease-in-out);
}

.card:hover,
.panel:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

/* Tables - smooth row hover */
table tbody tr {
  transition: background-color var(--transition-base) var(--ease-in-out);
}

table tbody tr:hover {
  transition-duration: var(--transition-fast);
}

/* Modals and dropdowns - smooth appearance - NO transform */
.modal,
.dropdown-menu,
.popover,
.tooltip {
  transition: opacity var(--transition-base) var(--ease-out),
              visibility var(--transition-base) var(--ease-out);
}

.modal.show,
.dropdown-menu.show {
  transition-timing-function: var(--ease-out);
}

/* Loading states - smooth spinner */
@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.spinner,
.loading {
  animation: spin 1s linear infinite;
  transition: opacity var(--transition-base) var(--ease-in-out);
}

/* Fade in/out animations */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes fadeOut {
  from { opacity: 1; }
  to { opacity: 0; }
}

@keyframes slideDown {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes slideUp {
  from { opacity: 1; }
  to { opacity: 0; }
}

.fade-in {
  animation: fadeIn var(--transition-slow) var(--ease-out);
}

.fade-out {
  animation: fadeOut var(--transition-slow) var(--ease-in);
}

.slide-down {
  animation: fadeIn var(--transition-slow) var(--ease-out);
}

.slide-up {
  animation: fadeOut var(--transition-slow) var(--ease-in);
}

/* Smooth scroll behavior */
html {
  scroll-behavior: smooth;
}

/* Reduce motion for users who prefer it */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Responsive transitions - faster on mobile */
@media (max-width: 768px) {
  :root {
    --transition-fast: 100ms;
    --transition-base: 150ms;
    --transition-slow: 200ms;
  }
}