@tailwind base;
@tailwind components;
@tailwind utilities;

/* Sidebar Styles */
.sidebar-transition {
    transition: width 0.3s ease-in-out, transform 0.3s ease-in-out;
}

.sidebar-collapsed {
    width: 70px !important;
}

.sidebar-expanded {
    width: 260px !important;
}

/* Hide text elements when sidebar is collapsed */
.sidebar-collapsed .sidebar-text {
    opacity: 0;
    width: 0;
    overflow: hidden;
    white-space: nowrap;
}

/* Hide toggle button text when collapsed */
.sidebar-collapsed .sidebar-toggle-btn {
    margin-left: auto;
    margin-right: auto;
}

/* Center logo when collapsed */
.sidebar-collapsed .sidebar-logo {
    justify-content: center;
}

/* Adjust user info in collapsed mode */
.sidebar-collapsed .sidebar-user-info {
    justify-content: center;
}

.sidebar-collapsed .sidebar-user-info .sidebar-text {
    display: none;
}

/* Tooltips for collapsed sidebar */
.sidebar-tooltip {
    position: absolute;
    left: 100%;
    top: 50%;
    transform: translateY(-50%);
    background: #1f2937;
    color: white;
    padding: 0.5rem 0.75rem;
    border-radius: 0.375rem;
    margin-left: 0.75rem;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s;
    z-index: 50;
    font-size: 0.875rem;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

/* Show tooltip on hover when sidebar is collapsed */
.sidebar-collapsed .group:hover .sidebar-tooltip {
    opacity: 1;
}

/* Hide tooltips when sidebar is expanded */
.sidebar-expanded .sidebar-tooltip {
    display: none;
}

/* Smooth transition for icons rotation */
.sidebar-toggle-btn i {
    transition: transform 0.3s ease-in-out;
}

/* ========================================
   Manager Layout Specific Styles
   ======================================== */

/* Badge Pulse Animation for Notifications */
@keyframes pulse-badge {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.5;
    }
}

.badge-pulse {
    animation: pulse-badge 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

/* Notification Badge Styles */
.notification-badge {
    position: absolute;
    top: 0.25rem;
    right: 0.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 1rem;
    min-width: 1rem;
    padding: 0 0.25rem;
    border-radius: 9999px;
    background-color: #9333EA; /* purple-600 */
    color: white;
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1;
}

/* Dropdown Menu Animations */
@keyframes dropdown-slide-down {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes dropdown-slide-up {
    from {
        opacity: 1;
        transform: translateY(0);
    }
    to {
        opacity: 0;
        transform: translateY(-10px);
    }
}

.dropdown-enter {
    animation: dropdown-slide-down 0.2s ease-out forwards;
}

.dropdown-leave {
    animation: dropdown-slide-up 0.2s ease-in forwards;
}

/* Sidebar Mobile Drawer Animation */
@keyframes drawer-slide-in {
    from {
        transform: translateX(-100%);
    }
    to {
        transform: translateX(0);
    }
}

@keyframes drawer-slide-out {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(-100%);
    }
}

.drawer-enter {
    animation: drawer-slide-in 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.drawer-leave {
    animation: drawer-slide-out 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

/* Mobile Overlay Fade */
@keyframes overlay-fade-in {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes overlay-fade-out {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}

.overlay-enter {
    animation: overlay-fade-in 0.3s ease-out forwards;
}

.overlay-leave {
    animation: overlay-fade-out 0.3s ease-in forwards;
}

/* Responsive Utilities */
@media (min-width: 1024px) {
    /* Main content offset for desktop */
    .main-content-offset {
        transition: margin-left 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .main-content-offset.sidebar-expanded {
        margin-left: 260px;
    }

    .main-content-offset.sidebar-collapsed {
        margin-left: 70px;
    }
}

/* Scrollbar Styles */
.custom-scrollbar::-webkit-scrollbar {
    width: 6px;
}

.custom-scrollbar::-webkit-scrollbar-track {
    background: #f7fafc;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
    background: #cbd5e0;
    border-radius: 3px;
}

.custom-scrollbar::-webkit-scrollbar-thumb:hover {
    background: #a0aec0;
}

/* Active Navigation Item Indicator */
.nav-item-active {
    position: relative;
}

.nav-item-active::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 70%;
    background-color: #9333EA; /* purple-600 */
    border-radius: 0 3px 3px 0;
}

.sidebar-collapsed .nav-item-active::before {
    display: none;
}

/* Manager Role Color Theme Variables */
:root {
    --manager-primary: #9333EA; /* purple-600 */
    --manager-primary-light: #F3E8FF; /* purple-50 */
    --manager-primary-dark: #7E22CE; /* purple-700 */
    --manager-hover: #F3E8FF; /* purple-50 */
    --manager-active: #EDE9FE; /* purple-100 */

    /* ========================================
       Semantic Design Tokens (Light Mode)
       ======================================== */

    /* Neutral backgrounds */
    --neutral-primary-soft: 255 255 255;       /* #FFFFFF */
    --neutral-primary-medium: 249 250 251;     /* #F9FAFB */
    --neutral-secondary-soft: 243 244 246;     /* #F3F4F6 */
    --neutral-secondary-medium: 229 231 235;   /* #E5E7EB */
    --neutral-tertiary: 209 213 219;           /* #D1D5DB */
    --neutral-tertiary-medium: 229 231 235;    /* #E5E7EB */

    /* Text colors */
    --color-heading: 17 24 39;                 /* #111827 */
    --color-body: 107 114 128;                 /* #6B7280 */
    --color-body-light: 156 163 175;           /* #9CA3AF */

    /* Foreground */
    --fg-brand: 59 130 246;                    /* #3B82F6 */
    --fg-brand-strong: 37 99 235;             /* #2563EB */
    --fg-danger-strong: 220 38 38;             /* #DC2626 */
    --fg-disabled: 156 163 175;                /* #9CA3AF */

    /* Backgrounds */
    --bg-danger-soft: 254 226 226;             /* #FEE2E2 */

    /* Borders */
    --border-default: 229 231 235;             /* #E5E7EB */
    --border-default-medium: 209 213 219;      /* #D1D5DB */
    --border-danger-subtle: 252 165 165;       /* #FCA5A5 */
}

/* Dark mode token overrides */
html.dark {
    --neutral-primary-soft: 31 41 55;          /* #1F2937 (gray-800) */
    --neutral-primary-medium: 17 24 39;        /* #111827 (gray-900) */
    --neutral-secondary-soft: 55 65 81;        /* #374151 (gray-700) */
    --neutral-secondary-medium: 75 85 99;      /* #4B5563 (gray-600) */
    --neutral-tertiary: 107 114 128;           /* #6B7280 (gray-500) */
    --neutral-tertiary-medium: 55 65 81;       /* #374151 (gray-700) */

    /* Text colors */
    --color-heading: 243 244 246;              /* #F3F4F6 (gray-100) */
    --color-body: 156 163 175;                 /* #9CA3AF (gray-400) */
    --color-body-light: 107 114 128;           /* #6B7280 (gray-500) */

    /* Foreground */
    --fg-brand: 96 165 250;                    /* #60A5FA (blue-400) */
    --fg-brand-strong: 96 165 250;            /* #60A5FA (blue-400) */
    --fg-danger-strong: 248 113 113;           /* #F87171 (red-400) */
    --fg-disabled: 75 85 99;                   /* #4B5563 (gray-600) */

    /* Backgrounds */
    --bg-danger-soft: 127 29 29;               /* #7F1D1D (red-900) with opacity */

    /* Borders */
    --border-default: 55 65 81;                /* #374151 (gray-700) */
    --border-default-medium: 75 85 99;         /* #4B5563 (gray-600) */
    --border-danger-subtle: 185 28 28;         /* #B91C1C (red-700) */
}

/* Focus States for Accessibility */
.focus-ring:focus {
    outline: 2px solid var(--manager-primary);
    outline-offset: 2px;
}

/* Loading Spinner for Async Actions */
@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

.spinner {
    animation: spin 1s linear infinite;
}

/* Toast/Flash Message Slide In */
@keyframes toast-slide-in {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

.toast-enter {
    animation: toast-slide-in 0.3s ease-out forwards;
}

/* Card Hover Effect */
.card-hover {
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}

.card-hover:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

/* ========================================
   Dark Mode Transitions
   ======================================== */

/* Smooth color transitions when toggling dark mode */
html.theme-transitioning,
html.theme-transitioning *,
html.theme-transitioning *::before,
html.theme-transitioning *::after {
    transition: background-color 0.3s ease-in-out,
                border-color 0.3s ease-in-out,
                color 0.3s ease-in-out,
                fill 0.3s ease-in-out,
                stroke 0.3s ease-in-out !important;
}

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

/* Dark mode background and text colors */
html.dark {
    color-scheme: dark;
}

/* Override default browser dark mode behavior */
@media (prefers-color-scheme: dark) {
    html:not(.dark) {
        color-scheme: light;
    }
}

/* ========================================
   Modal Animations
   ======================================== */

/* Modal entrance animation */
@keyframes modal-enter {
    from {
        opacity: 0;
        transform: scale(0.95) translateY(-10px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

/* Modal exit animation */
@keyframes modal-exit {
    from {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
    to {
        opacity: 0;
        transform: scale(0.95) translateY(-10px);
    }
}

.animate-modal-enter {
    animation: modal-enter 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.animate-modal-exit {
    animation: modal-exit 0.2s cubic-bezier(0.4, 0, 1, 1) forwards;
}

/* Backdrop blur effect */
.backdrop-blur-sm {
    backdrop-filter: blur(4px);
}

/* Modal shadow enhancement */
.shadow-2xl {
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

/* ==================================================
   Car Media Gallery & Tabs Styles
   ================================================== */

/* Tab Button Styles */
.tab-button {
    border-color: transparent;
    color: #6B7280; /* gray-500 */
    transition: all 0.2s ease-in-out;
}

.tab-button:hover {
    color: #4F46E5; /* indigo-600 */
    border-color: #C7D2FE; /* indigo-200 */
}

.tab-button.active {
    color: #4F46E5; /* indigo-600 */
    border-color: #4F46E5; /* indigo-600 */
    font-weight: 600;
}

/* Tab Content */
.tab-content {
    animation: tab-fade-in 0.3s ease-in-out;
}

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

/* Media Gallery Grid Enhancements */
.media-item {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.media-item:hover {
    transform: translateY(-4px);
}

/* Drag & Drop Zone Styles */
[data-controller="car-media-upload"] .dropzone {
    transition: all 0.2s ease-in-out;
}

[data-controller="car-media-upload"] .dropzone.dragging {
    border-color: #4F46E5; /* indigo-600 */
    background-color: #EEF2FF; /* indigo-50 */
}

/* Filter Tag Active State */
.filter-tag {
    transition: all 0.2s ease-in-out;
    cursor: pointer;
}

.filter-tag:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.filter-tag.active {
    box-shadow: 0 2px 8px rgba(79, 70, 229, 0.3);
}

/* Lightbox Styles */
#car-lightbox-modal,
#car-video-modal {
    z-index: 9999;
    backdrop-filter: blur(8px);
}

#car-lightbox-image {
    animation: lightbox-zoom-in 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes lightbox-zoom-in {
    from {
        opacity: 0;
        transform: scale(0.9);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* Video Player Styles */
#car-video-player {
    max-height: 85vh;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.3);
}

/* Progress Bar Animation */
[data-car-media-upload-target="progressBar"] {
    transition: width 0.3s ease-in-out;
}

/* Media Thumbnail Hover Effects */
.media-item img {
    transition: transform 0.3s ease-in-out;
}

.media-item:hover img {
    transform: scale(1.05);
}

/* Badge Styles */
.media-item .badge {
    backdrop-filter: blur(4px);
    background-color: rgba(255, 255, 255, 0.9);
}

/* Aspect Ratio for Media Items */
.aspect-w-16 {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 */
}

.aspect-w-16 > * {
    position: absolute;
    height: 100%;
    width: 100%;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

/* Upload Zone Pulse Animation */
@keyframes upload-pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.5;
    }
}

[data-car-media-upload-target="progressContainer"] .uploading {
    animation: upload-pulse 1.5s ease-in-out infinite;
}

/* Media Action Buttons */
.media-item button,
.media-item a {
    transition: all 0.2s ease-in-out;
}

.media-item button:hover,
.media-item a:hover {
    transform: scale(1.1);
}

/* Thumbnail Loading State */
.media-item img[loading="lazy"] {
    background: linear-gradient(90deg, #f3f4f6 25%, #e5e7eb 50%, #f3f4f6 75%);
    background-size: 200% 100%;
    animation: loading-shimmer 1.5s infinite;
}

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

/* Main Photo Badge Glow */
.media-item .badge.main-photo {
    animation: badge-glow 2s ease-in-out infinite;
}

@keyframes badge-glow {
    0%, 100% {
        box-shadow: 0 0 10px rgba(234, 179, 8, 0.5);
    }
    50% {
        box-shadow: 0 0 20px rgba(234, 179, 8, 0.8);
    }
}

/* Responsive Adjustments */
@media (max-width: 640px) {
    .tab-button {
        padding: 0.75rem 1rem;
        font-size: 0.875rem;
    }

    #car-lightbox-image,
    #car-video-player {
        max-height: 70vh;
    }
}