/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

/* DaisyUI Theme Customization */
[data-theme="light"] {
  --p: 247 85% 60%; /* #3C50F5 in HSL */
  --pf: 247 85% 50%;
  --pc: 0 0% 100%;
}

/* Brand Card Custom Styles */
.brand-card-footer {
  background-color: rgba(60, 80, 245, 0.8); /* #3C50F5 with 80% opacity */
}

/* Global Font Settings */
* {
  font-family: 'Inter', 'Noto Sans TC', 'Microsoft JhengHei', 'PingFang TC',
               -apple-system, BlinkMacSystemFont, 'Segoe UI',
               'Helvetica Neue', Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
               'Segoe UI Symbol';
}

/* Ensure body and html also use the font stack */
html,
body {
  font-family: 'Inter', 'Noto Sans TC', 'Microsoft JhengHei', 'PingFang TC',
               -apple-system, BlinkMacSystemFont, 'Segoe UI',
               'Helvetica Neue', Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
               'Segoe UI Symbol';
}

/* Admin Layout Enhancements */
@media (max-width: 1024px) {
  .drawer-side {
    z-index: 999;
  }

  .drawer-overlay {
    backdrop-filter: blur(2px);
    background-color: rgba(0, 0, 0, 0.5);
  }
}

/* Smooth transitions for drawer */
.drawer-side {
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Enhanced sidebar animations */
.drawer:not(.lg\\:drawer-open) .drawer-side {
  transform: translateX(-100%);
}

.drawer:not(.lg\\:drawer-open) .drawer-toggle:checked ~ .drawer-side {
  transform: translateX(0);
}

/* Content area animations */
.drawer-content {
  transition: margin-left 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Navigation item hover animations */
.menu li > a {
  transition: all 0.2s ease-in-out;
}

.menu li > a:hover {
  transform: translateX(4px);
}

/* Header shadow on scroll */
.navbar {
  transition: box-shadow 0.2s ease-in-out;
}

.navbar.scrolled {
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

/* Dropdown animations */
.dropdown-content {
  animation: dropdown-fade-in 0.2s ease-out;
}

@keyframes dropdown-fade-in {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Responsive text sizing */
@media (max-width: 768px) {
  .navbar h1 {
    font-size: 1.125rem;
  }

  .breadcrumbs {
    font-size: 0.75rem;
  }
}

/* Loading state styles */
.loading-skeleton {
  background: linear-gradient(90deg,
    oklch(var(--b2)) 0%,
    oklch(var(--b3)) 50%,
    oklch(var(--b2)) 100%);
  background-size: 200% 100%;
  animation: loading-shimmer 2s ease-in-out infinite;
}

@keyframes loading-shimmer {
  0% {
    background-position: -200% 0;
  }
  100% {
    background-position: 200% 0;
  }
}