/* Custom CSS for Tailwind Design */


/* Mobile specific sidebar classes - to avoid conflicts with desktop sidebar */
.mobile-sidebar {
    display: block !important;
}

@media (min-width: 1024px) {
    .mobile-sidebar {
        display: none !important;
    }
}

/* Specific rule for mobile sidebars only (not overlays) */
nav.mobile-sidebar {
    display: block !important;
}

@media (min-width: 1024px) {
    nav.mobile-sidebar {
        display: none !important;
    }
}

/* Transform utilities for mobile sidebar */
.translate-x-0 {
    transform: translateX(0) !important;
}

.-translate-x-full {
    transform: translateX(-100%) !important;
}

.transition-transform {
    transition-property: transform !important;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1) !important;
    transition-duration: 300ms !important;
}

/* Fixed positioning utilities */
.fixed {
    position: fixed !important;
}

.inset-y-0 {
    top: 0 !important;
    bottom: 0 !important;
}

.inset-x-0 {
    left: 0 !important;
    right: 0 !important;
}

.left-0 {
    left: 0 !important;
}

.z-40 {
    z-index: 40 !important;
}

.z-50 {
    z-index: 50 !important;
}

.w-64 {
    width: 16rem !important;
}

.bg-opacity-50 {
    background-color: rgba(0, 0, 0, 0.5) !important;
}

/* Button styles */
.btn-ghost {
    @apply p-2 text-neutral-600 hover:text-neutral-900 hover:bg-neutral-100 rounded-lg transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2;
}

.btn {
    @apply inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-lg transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2;
}

.btn-primary {
    @apply bg-primary-600 border-primary-600 text-white hover:bg-primary-700 focus:ring-primary-500;
}

.btn-secondary {
    @apply bg-neutral-600 border-neutral-600 text-white hover:bg-neutral-700 focus:ring-neutral-500;
}

.btn-outline {
    @apply border-neutral-300 text-neutral-700 bg-white hover:bg-neutral-50 focus:ring-primary-500;
}

/* Dropdown styles */
.dropdown-menu {
    @apply absolute z-50 bg-white border border-neutral-200 rounded-lg shadow-lg py-1 mt-1 min-w-[8rem];
}

.dropdown-item {
    @apply block w-full px-4 py-2 text-sm text-neutral-700 hover:bg-neutral-50 hover:text-neutral-900 transition-colors duration-200;
}

/* Navigation link styles */
.nav-link {
    @apply text-neutral-600 hover:text-primary-600 hover:bg-neutral-50 transition-colors duration-200;
}

.nav-link-active {
    @apply text-primary-600 bg-primary-50;
}

/* Custom scrollbar */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: #a1a1a1;
}

/* Glass morphism effect */
.glass {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

/* Hover effects */
.hover-lift {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.hover-lift:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}

/* Loading animation */
@keyframes pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.5;
    }
}

.animate-pulse-slow {
    animation: pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

/* Gradient text animation */
@keyframes gradient-shift {
    0%, 100% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
}

.animate-gradient {
    background-size: 200% 200%;
    animation: gradient-shift 3s ease infinite;
}

/* Custom focus styles */
.focus-ring {
    @apply focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2 focus:ring-offset-white;
}

/* Custom animations */
@keyframes float {
    0%, 100% {
        transform: translateY(0px);
    }
    50% {
        transform: translateY(-10px);
    }
}

.animate-float {
    animation: float 3s ease-in-out infinite;
}

@keyframes slide-in-left {
    from {
        opacity: 0;
        transform: translateX(-20px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.animate-slide-in-left {
    animation: slide-in-left 0.5s ease-out;
}

@keyframes slide-in-right {
    from {
        opacity: 0;
        transform: translateX(20px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.animate-slide-in-right {
    animation: slide-in-right 0.5s ease-out;
}

/* Custom button styles */
.btn-gradient {
    @apply bg-gradient-to-r from-primary-600 to-secondary-600 text-white hover:from-primary-700 hover:to-secondary-700;
}

.btn-shadow {
    @apply shadow-lg hover:shadow-xl transform hover:scale-105 transition-all duration-200;
}

/* Custom card styles */
.card-hover {
    @apply transition-all duration-300 hover:shadow-xl hover:scale-105;
}

.card-featured {
    @apply ring-2 ring-primary-500 ring-offset-2;
}

/* Custom input styles */
.input-focused {
    @apply focus:ring-2 focus:ring-primary-500 focus:border-transparent;
}

/* Custom badge styles */
.badge-glow {
    @apply shadow-lg shadow-current/50;
}

/* Custom table styles */
.table-striped tr:nth-child(even) {
    @apply bg-neutral-50;
}

.table-hover tbody tr:hover {
    @apply bg-primary-50;
}

/* Custom modal styles */
.modal-backdrop-blur {
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

/* Custom navigation styles */
.nav-item {
    @apply relative after:content-[''] after:absolute after:bottom-0 after:left-0 after:w-0 after:h-0.5 after:bg-primary-600 after:transition-all after:duration-300 hover:after:w-full;
}

.nav-item.active {
    @apply text-primary-600 after:w-full;
}

/* Custom form styles */
.form-floating {
    @apply relative;
}

.form-floating input:focus ~ label,
.form-floating input:not(:placeholder-shown) ~ label,
.form-floating textarea:focus ~ label,
.form-floating textarea:not(:placeholder-shown) ~ label {
    @apply transform -translate-y-6 scale-75 text-primary-600;
}

.form-floating label {
    @apply absolute left-3 top-3 text-neutral-500 transition-all duration-200 pointer-events-none;
}

/* Custom utility classes */
.text-shadow {
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.text-shadow-lg {
    text-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

.bg-pattern {
    background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ef4444' fill-opacity='0.05'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

.bg-pattern-dots {
    background-image: radial-gradient(circle, #ef4444 1px, transparent 1px);
    background-size: 20px 20px;
}

/* Responsive utilities */
@media (max-width: 640px) {
    .text-responsive {
        font-size: clamp(1rem, 4vw, 1.25rem);
    }

    .text-responsive-lg {
        font-size: clamp(1.5rem, 6vw, 2rem);
    }
}

/* Print styles */
@media print {
    .no-print {
        display: none !important;
    }

    .print-break-after {
        page-break-after: always;
    }
}

/* Accessibility improvements */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.focus-visible:focus {
    outline: 2px solid #ef4444;
    outline-offset: 2px;
}

/* Dark mode support */
@media (prefers-color-scheme: dark) {
    .dark\:bg-neutral-900 {
        background-color: #111827;
    }

    .dark\:text-neutral-100 {
        color: #f3f4f6;
    }
}

/* Custom animations for success states */
@keyframes checkmark {
    0% {
        stroke-dashoffset: 100;
    }
    100% {
        stroke-dashoffset: 0;
    }
}

.animate-checkmark {
    stroke-dasharray: 100;
    stroke-dashoffset: 100;
    animation: checkmark 0.5s ease-out forwards;
}

/* Loading skeleton */
.skeleton {
    @apply animate-pulse bg-neutral-200 rounded;
}

.skeleton-text {
    @apply skeleton h-4 w-full;
}

.skeleton-title {
    @apply skeleton h-6 w-3/4;
}

.skeleton-avatar {
    @apply skeleton h-12 w-12 rounded-full;
}

/* Custom tooltip styles */
[data-tooltip] {
    position: relative;
}

[data-tooltip]:hover::before {
    content: attr(data-tooltip);
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    background-color: #1f2937;
    color: white;
    padding: 0.25rem 0.5rem;
    border-radius: 0.375rem;
    font-size: 0.875rem;
    white-space: nowrap;
    z-index: 50;
    margin-bottom: 0.25rem;
}

[data-tooltip]:hover::after {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 4px solid transparent;
    border-top-color: #1f2937;
    margin-bottom: -4px;
    z-index: 50;
}