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

/* Alpine.js x-cloak directive - be specific, don't hide body */
[x-cloak]:not(body) {
    display: none !important;
}

/* Specific x-cloak rules for Alpine.js components */
[x-show][x-cloak] {
    display: none !important;
}

/* Never hide the body element with x-cloak */
body[x-cloak] {
    display: block !important;
}

/* Ensure main content is always visible */
main.content {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/* Mobile menu enhancements */
@media (max-width: 767px) {

    /* Mobile menu for non-authenticated users */
    [data-mobile-menu] {
        position: fixed !important;
        top: 80px !important;
        /* Header height */
        left: 0 !important;
        right: 0 !important;
        z-index: 200 !important;
        max-height: calc(100vh - 80px) !important;
        overflow-y: auto !important;
        transform: translateY(0) !important;
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
    }

    /* Ensure mobile menu shadow is visible */
    [data-mobile-menu] {
        box-shadow: 0 10px 25px -3px rgba(0, 0, 0, 0.1),
            0 4px 6px -2px rgba(0, 0, 0, 0.05) !important;
    }

    .dark [data-mobile-menu] {
        box-shadow: 0 10px 25px -3px rgba(0, 0, 0, 0.3),
            0 4px 6px -2px rgba(0, 0, 0, 0.1) !important;
    }

    /* Prevent body scroll when mobile menu is open */
    body:has([data-mobile-menu][x-show="true"]) {
        overflow: hidden !important;
    }

    /* Authenticated user sidebar on mobile */
    #application-sidebar {
        z-index: 60 !important;
    }
}

/* Enhanced focus states for accessibility */
.focus-visible:focus,
[tabindex]:focus-visible {
    outline: 2px solid #f97316 !important;
    outline-offset: 2px !important;
    border-radius: 0.375rem !important;
}

/* Button focus states */
button:focus-visible,
[role="button"]:focus-visible {
    outline: 2px solid #f97316 !important;
    outline-offset: 2px !important;
    transform: scale(1.02) !important;
    transition: all 0.15s ease !important;
}

/* Link focus states */
a:focus-visible {
    outline: 2px solid #f97316 !important;
    outline-offset: 2px !important;
    border-radius: 0.375rem !important;
}

/* Mobile menu toggle button enhancements */
.mobile-menu-button {
    min-height: 44px !important;
    min-width: 44px !important;
    touch-action: manipulation !important;
    -webkit-tap-highlight-color: transparent !important;
}

/* Improved mobile menu item interactions */
@media (max-width: 767px) {
    [data-mobile-menu] [role="menuitem"] {
        min-height: 48px !important;
        touch-action: manipulation !important;
        -webkit-tap-highlight-color: transparent !important;
    }

    [data-mobile-menu] [role="menuitem"]:active {
        transform: scale(0.98) !important;
        transition: transform 0.1s ease !important;
    }
}

/* Flash message improvements */
#flash-messages {
    z-index: 9999 !important;
    pointer-events: none !important;
}

#flash-messages>div {
    pointer-events: auto !important;
}

/* Ensure flash messages are visible above all content */
.toast-top-right {
    top: 1rem !important;
    right: 1rem !important;
    z-index: 9999 !important;
}

/* Production fallback - ensure page is always visible after 2 seconds */
@keyframes fadeInFallback {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

html {
    animation: fadeInFallback 0.3s ease-in-out;
}

/* Improve Alpine.js transition smoothness */
[x-transition] {
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* Better mobile menu backdrop */
@media (max-width: 767px) {
    body:has([data-mobile-menu][x-show]) {
        position: relative;
    }

    body:has([data-mobile-menu][x-show])::before {
        content: '';
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.5);
        z-index: 150;
        pointer-events: none;
    }
}

/* Ensure sidebar positioning on desktop - let Alpine.js control visibility */
@media (min-width: 1024px) {
    #application-sidebar {

        position: fixed !important;
    }
}

/* Force sidebar behavior on mobile - ensure it starts hidden */
@media (max-width: 1023px) {
    #application-sidebar {
        transform: translateX(-100%) !important;
        transition: transform 0.2s ease-in-out !important;
    }

    /* When sidebar is open on mobile */
    #application-sidebar[x-show="true"] {

    }

    /* Ensure main content is accessible when sidebar is closed */
    .lg\:pl-64 {
        padding-left: 0 !important;
    }

    /* Prevent body scroll when sidebar is open */
    body:has(#application-sidebar[x-show="true"]) {
        overflow: hidden !important;
    }

    /* Ensure overlay covers everything */
    [role="button"][aria-label="Close sidebar"] {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        z-index: 40 !important;
        background: rgba(0, 0, 0, 0.5) !important;
    }
}

/*

@layer components {
  .btn-primary {
    @apply py-2 px-4 bg-blue-200;
  }
}

*/

/* Force dark mode styles to ensure they always apply */
@layer base {

    /* Enhanced dark mode detection and application */
    html.dark,
    .dark,
    [class*="dark"] {
        color-scheme: dark !important;
    }

    html.dark body,
    .dark body {
        background-color: #0f172a !important;
        color: #f8fafc !important;
    }
}

/* Custom Dark Mode Colors to match the design */
@layer base {
    :root {
        --color-slate-950: #0f172a;
        --color-slate-925: #111827;
    }
}

@layer utilities {

    /* Enhanced dark mode backgrounds */
    .dark\:bg-slate-950 {
        background-color: var(--color-slate-950);
    }

    .dark\:bg-slate-925 {
        background-color: var(--color-slate-925);
    }

    /* Force dark mode form field styling */
    html.dark input[type="text"],
    html.dark input[type="number"],
    html.dark input[type="email"],
    html.dark input[type="password"],
    html.dark input[type="date"],
    html.dark input[type="time"],
    html.dark input[type="file"],
    html.dark textarea,
    html.dark select,
    .dark input[type="text"],
    .dark input[type="number"],
    .dark input[type="email"],
    .dark input[type="password"],
    .dark input[type="date"],
    .dark input[type="time"],
    .dark input[type="file"],
    .dark textarea,
    .dark select {
        background-color: #374151 !important;
        border-color: #4b5563 !important;
        color: #f9fafb !important;
    }

    html.dark input[type="text"]::placeholder,
    html.dark input[type="number"]::placeholder,
    html.dark input[type="email"]::placeholder,
    html.dark input[type="password"]::placeholder,
    html.dark textarea::placeholder,
    .dark input[type="text"]::placeholder,
    .dark input[type="number"]::placeholder,
    .dark input[type="email"]::placeholder,
    .dark input[type="password"]::placeholder,
    .dark textarea::placeholder {
        color: #9ca3af !important;
    }

    /* Force dark mode background colors */
    html.dark .bg-gray-50,
    .dark .bg-gray-50 {
        background-color: #111827 !important;
    }

    html.dark .bg-white,
    .dark .bg-white {
        background-color: #1f2937 !important;
    }

    html.dark .bg-gray-100,
    .dark .bg-gray-100 {
        background-color: #374151 !important;
    }

    /* Force dark mode text colors */
    html.dark .text-gray-900,
    .dark .text-gray-900 {
        color: #f9fafb !important;
    }

    html.dark .text-gray-700,
    .dark .text-gray-700 {
        color: #d1d5db !important;
    }

    html.dark .text-gray-600,
    .dark .text-gray-600 {
        color: #9ca3af !important;
    }

    html.dark .text-gray-500,
    .dark .text-gray-500 {
        color: #6b7280 !important;
    }

    /* Force dark mode border colors */
    html.dark .border-gray-200,
    .dark .border-gray-200 {
        border-color: #374151 !important;
    }

    html.dark .border-gray-300,
    .dark .border-gray-300 {
        border-color: #4b5563 !important;
    }

    /* Card shadows in dark mode */
    .dark .shadow-2xs {
        box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.4);
    }

    /* Enhanced border colors for dark mode */
    .dark\:border-slate-750 {
        border-color: #334155;
    }

    /* Enhanced visibility for light mode elements */
    .light-theme-border {
        border-color: #e5e7eb;
    }

    /* Light theme text contrast improvements */
    .light-theme-text-muted {
        color: #6b7280;
    }

    .light-theme-text-primary {
        color: #374151;
    }

    /* Enhanced hover states for light theme */
    .light-hover-bg {
        background-color: #f9fafb;
    }

    /* Better shadow visibility in light mode */
    .light-card-shadow {
        box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
    }

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

    /* Dashboard specific improvements */
    .dashboard-card {
        @apply bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg shadow-sm;
        transition: all 0.2s ease-in-out;
    }

    .dashboard-card:hover {
        @apply shadow-md;
        transform: translateY(-1px);
    }

    .dashboard-metric-icon {
        @apply p-3 rounded-full border;
    }

    .dashboard-metric-icon.blue {
        @apply bg-blue-50 border-blue-100 dark:bg-blue-900/20 dark:border-blue-800;
    }

    .dashboard-metric-icon.green {
        @apply bg-green-50 border-green-100 dark:bg-green-900/20 dark:border-green-800;
    }

    .dashboard-metric-icon.orange {
        @apply bg-orange-50 border-orange-100 dark:bg-orange-900/20 dark:border-orange-800;
    }

    .dashboard-metric-icon.purple {
        @apply bg-purple-50 border-purple-100 dark:bg-purple-900/20 dark:border-purple-800;
    }

    /* Status badge improvements */
    .status-badge {
        @apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium;
    }

    .status-badge.published {
        @apply bg-green-100 text-green-800 dark:bg-green-900/20 dark:text-green-300;
    }

    .status-badge.draft {
        @apply bg-gray-100 text-gray-800 dark:bg-gray-900/20 dark:text-gray-300;
    }

    .status-badge.upcoming {
        @apply bg-blue-100 text-blue-800 dark:bg-blue-900/20 dark:text-blue-300;
    }

    .status-badge.past {
        @apply bg-orange-100 text-orange-800 dark:bg-orange-900/20 dark:text-orange-300;
    }

    /* Table improvements for better visibility */
    .data-table {
        @apply bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg overflow-hidden;
    }

    .data-table th {
        @apply bg-gray-50 dark:bg-gray-700 px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider border-b border-gray-200 dark:border-gray-600;
    }

    .data-table td {
        @apply px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-gray-100 border-b border-gray-200 dark:border-gray-700;
    }

    .data-table tr:hover {
        @apply bg-gray-50 dark:bg-gray-700/50;
    }

    /* Button improvements */
    .btn-primary {
        @apply bg-orange-500 hover:bg-orange-600 dark:bg-orange-600 dark:hover:bg-orange-700 text-white px-4 py-2 rounded-lg font-medium transition-colors shadow-sm hover:shadow-md;
    }

    .btn-secondary {
        @apply bg-gray-100 hover:bg-gray-200 dark:bg-gray-700 dark:hover:bg-gray-600 text-gray-700 dark:text-gray-300 px-4 py-2 rounded-lg font-medium transition-colors border border-gray-300 dark:border-gray-600;
    }

    .btn-danger {
        @apply bg-red-500 hover:bg-red-600 dark:bg-red-600 dark:hover:bg-red-700 text-white px-4 py-2 rounded-lg font-medium transition-colors shadow-sm hover:shadow-md;
    }

    /* Form field enhancements for better visibility */
    .form-input {
        @apply py-3 px-4 block w-full border border-gray-300 dark:border-gray-600 rounded-lg text-sm bg-white dark:bg-gray-700 text-gray-900 dark:text-white placeholder-gray-500 dark:placeholder-gray-400 focus:border-orange-500 focus:ring-orange-500 dark:focus:border-orange-400 dark:focus:ring-orange-400 transition-colors;
    }

    .form-label {
        @apply block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2;
    }

    .form-error {
        @apply border-red-400 focus:outline-red-600 dark:border-red-500 dark:focus:border-red-500;
    }

    /* Enhanced card styling */
    .enhanced-card {
        @apply bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-xl p-6 shadow-sm hover:shadow-md transition-all;
    }

    /* Page wrapper improvements */
    .page-wrapper {
        @apply min-h-screen bg-gray-50 dark:bg-gray-900;
    }

    .content-wrapper {
        @apply max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6;
    }
}

/* Dark mode enhancements for better visual hierarchy */
.dark {

    /* Deeper background for main content */
    .content {
        background-color: var(--color-slate-950);
    }

    /* Softer text colors for better readability */
    .text-slate-200 {
        color: #e2e8f0;
    }

    .text-slate-300 {
        color: #cbd5e1;
    }

    .text-slate-400 {
        color: #94a3b8;
    }

    /* Enhanced card styling */
    .bg-slate-800 {
        background-color: #1e293b;
        border: 1px solid #334155;
    }

    /* Better contrast for interactive elements */
    .hover\:bg-slate-700:hover {
        background-color: #374151;
    }

    .hover\:bg-slate-800:hover {
        background-color: #1f2937;
    }
}

/* Enhanced visibility improvements for both themes */
html {
    /* Light theme optimizations */
    --light-bg-primary: #ffffff;
    --light-bg-secondary: #f9fafb;
    --light-border: #e5e7eb;
    --light-text-primary: #111827;
    --light-text-secondary: #6b7280;
    --light-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);

    /* Dark theme optimizations */
    --dark-bg-primary: #1f2937;
    --dark-bg-secondary: #374151;
    --dark-border: #4b5563;
    --dark-text-primary: #f9fafb;
    --dark-text-secondary: #d1d5db;
    --dark-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.3), 0 1px 2px 0 rgba(0, 0, 0, 0.2);
}

/* Improved contrast for light theme */
.light-mode-enhanced {
    background-color: var(--light-bg-primary);
    border-color: var(--light-border);
    color: var(--light-text-primary);
    box-shadow: var(--light-shadow);
}

.light-mode-enhanced-secondary {
    background-color: var(--light-bg-secondary);
    border-color: var(--light-border);
    color: var(--light-text-secondary);
}

/* Improved contrast for dark theme */
.dark .dark-mode-enhanced {
    background-color: var(--dark-bg-primary);
    border-color: var(--dark-border);
    color: var(--dark-text-primary);
    box-shadow: var(--dark-shadow);
}

.dark .dark-mode-enhanced-secondary {
    background-color: var(--dark-bg-secondary);
    border-color: var(--dark-border);
    color: var(--dark-text-secondary);
}

/* Smooth transitions for dark mode */
* {
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

/* Override for specific elements that shouldn't have transitions */
.no-transition,
.no-transition * {
    transition: none !important;
}

/* Enhanced visibility for interactive elements */
.interactive-element {
    transition: all 0.2s ease-in-out;
}

.interactive-element:hover {
    transform: translateY(-1px);
}

.interactive-element:active {
    transform: translateY(0);
}

/* Ensure proper contrast for all text elements in light mode */
body:not(.dark) {
    color: #111827;
}

body:not(.dark) .text-gray-500 {
    color: #6b7280 !important;
}

body:not(.dark) .text-gray-600 {
    color: #4b5563 !important;
}

body:not(.dark) .text-gray-700 {
    color: #374151 !important;
}

/* Ensure proper border visibility in light mode */
body:not(.dark) .border-gray-200 {
    border-color: #e5e7eb !important;
}

body:not(.dark) .border-gray-300 {
    border-color: #d1d5db !important;
}

/* Calendar Widget Enhancements */
.line-clamp-2 {
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

/* Calendar Event Hover Effects */
.calendar-event {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.calendar-event:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

.dark .calendar-event:hover {
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.25), 0 4px 6px -2px rgba(0, 0, 0, 0.1);
}

/* Calendar Date Badge */
.calendar-date-badge {
    background: linear-gradient(135deg, #fed7aa 0%, #fdba74 100%);
    box-shadow: 0 2px 4px rgba(251, 146, 60, 0.1);
}

.dark .calendar-date-badge {
    background: linear-gradient(135deg, rgba(251, 146, 60, 0.3) 0%, rgba(253, 186, 116, 0.3) 100%);
}

/* Ensure dark mode works with Alpine.js state */
[x-data] {
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

/* Force dark mode on venue pages specifically */
body.dark .venue-page,
html.dark .venue-page {
    background-color: #111827 !important;
    color: #f9fafb !important;
}

/* Debug styles to ensure dark mode is working */
.debug-dark-mode.dark {
    background-color: #dc2626 !important;
    color: #ffffff !important;
    border: 2px solid #ffffff !important;
}

/* Enhanced dark mode card styling */
html.dark .enhanced-card,
.dark .enhanced-card {
    background-color: #1f2937 !important;
    border-color: #374151 !important;
    color: #f9fafb !important;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06) !important;
}

/* Sidebar visibility fix - ensure sidebar is visible on desktop by default */
@media (min-width: 1024px) {

    /* Improve sidebar text visibility in dark mode */
    .dark [role="dialog"][aria-label="Sidebar"] .text-gray-700,
    .dark [role="dialog"][aria-label="Sidebar"] .dark\:text-slate-300 {
        color: #e2e8f0 !important;
    }

    .dark [role="dialog"][aria-label="Sidebar"] .text-gray-500,
    .dark [role="dialog"][aria-label="Sidebar"] .dark\:text-slate-400 {
        color: #cbd5e1 !important;
    }
}