/* Top Navigation - Dropdown Menu System */

/* Ensure the topbar allows overflow for dropdowns */
.fi-topbar {
    position: sticky !important;
    z-index: 60 !important;
}

.fi-topbar-ctn {
    overflow: visible !important;
}

/* Ensure profile and other interactive elements stay above dropdowns */
.fi-topbar .fi-account-widget,
.fi-topbar .fi-avatar,
.fi-topbar .fi-dropdown,
.fi-topbar .fi-topbar-actions,
.fi-topbar button:not(nav button),
.fi-topbar a:not(nav a) {
    position: relative !important;
    z-index: 20 !important;
    pointer-events: auto !important;
}

/* Ensure the logo area is clickable */
.fi-topbar .fi-topbar-start,
.fi-topbar .fi-topbar-start * {
    position: relative !important;
    z-index: 20 !important;
    pointer-events: auto !important;
}

/* Ensure modals appear below the navbar */
.fi-modal {
    padding-top: 4rem !important;
}

/* Service Settings Page Tab Styling - More Specific Selectors */
nav.flex.space-x-6,
.filament-page nav.flex.space-x-6,
[x-data] nav.flex.space-x-6,
div[x-data] nav.flex.space-x-6 {
    display: flex !important;
    gap: 2rem !important;
    border-bottom: 1px solid #e5e7eb !important;
    margin-bottom: 1.5rem !important;
    padding-bottom: 0 !important;
}

nav.flex.space-x-6 button,
.filament-page nav.flex.space-x-6 button,
[x-data] nav.flex.space-x-6 button,
div[x-data] nav.flex.space-x-6 button {
    display: flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
    padding: 0.75rem 0 !important;
    margin-bottom: -1px !important;
    border-bottom: 2px solid transparent !important;
    font-weight: 500 !important;
    font-size: 0.875rem !important;
    color: #6b7280 !important;
    background: transparent !important;
    transition: all 0.2s ease-in-out !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    position: relative !important;
    cursor: pointer !important;
}

nav.flex.space-x-6 button:hover,
.filament-page nav.flex.space-x-6 button:hover,
[x-data] nav.flex.space-x-6 button:hover,
div[x-data] nav.flex.space-x-6 button:hover {
    color: #374151 !important;
}

nav.flex.space-x-6 button.border-primary-500,
.filament-page nav.flex.space-x-6 button.border-primary-500,
[x-data] nav.flex.space-x-6 button.border-primary-500,
div[x-data] nav.flex.space-x-6 button.border-primary-500 {
    color: #1f2937 !important;
    border-bottom-color: #3b82f6 !important;
}

/* Dark mode support for service settings tabs */
.dark nav.flex.space-x-6,
.dark .filament-page nav.flex.space-x-6,
.dark [x-data] nav.flex.space-x-6,
.dark div[x-data] nav.flex.space-x-6 {
    border-bottom-color: #374151 !important;
}

.dark nav.flex.space-x-6 button,
.dark .filament-page nav.flex.space-x-6 button,
.dark [x-data] nav.flex.space-x-6 button,
.dark div[x-data] nav.flex.space-x-6 button {
    color: #9ca3af !important;
}

.dark nav.flex.space-x-6 button:hover,
.dark .filament-page nav.flex.space-x-6 button:hover,
.dark [x-data] nav.flex.space-x-6 button:hover,
.dark div[x-data] nav.flex.space-x-6 button:hover {
    color: #d1d5db !important;
}

.dark nav.flex.space-x-6 button.border-primary-500,
.dark .filament-page nav.flex.space-x-6 button.border-primary-500,
.dark [x-data] nav.flex.space-x-6 button.border-primary-500,
.dark div[x-data] nav.flex.space-x-6 button.border-primary-500 {
    color: #60a5fa !important;
    border-bottom-color: #3b82f6 !important;
}

/* Dashboard Table Styling - Consistent Row Heights */
.dashboard-table .fi-ta-table tbody tr {
    height: 3.5rem !important;
    min-height: 3.5rem !important;
}

.dashboard-table .fi-ta-table tbody td {
    vertical-align: middle !important;
    padding: 0.75rem 1rem !important;
}

.dashboard-table .fi-ta-table tbody td .fi-ta-cell {
    display: flex !important;
    align-items: center !important;
    height: 100% !important;
    min-height: 2rem !important;
}

/* Top Selling Products - Reduced Padding */
.top-products-table .fi-ta-table tbody td {
    padding: 0.25rem 0.5rem !important;
}

/* Loading Animation for Stats Cards */
.loading-stat {
    background: linear-gradient(90deg, #f3f4f6 25%, #e5e7eb 50%, #f3f4f6 75%) !important;
    background-size: 200% 100% !important;
    animation: shimmer 2s infinite !important;
    border-radius: 0.5rem !important;
    min-height: 4rem !important;
    position: relative !important;
    overflow: hidden !important;
}

.loading-stat::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
    animation: slide 2s infinite;
}

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

@keyframes slide {
    0% {
        left: -100%;
    }
    100% {
        left: 100%;
    }
}

/* General loading animation for all widgets */
.fi-wi-stats-overview-widget,
.fi-wi-chart-widget,
.fi-wi-table-widget {
    animation: fadeIn 0.8s ease-in-out;
    transition: all 0.3s ease;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Loading state for tables - REMOVED: was causing pulse effect on all table rows */
/* If you need loading animations, use Filament's built-in loading states instead */

/* Loading spinner overlay */
.fi-wi-chart-widget {
    position: relative;
}

.fi-wi-chart-widget::before {
    content: 'Loading Chart...';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(255, 255, 255, 0.9);
    padding: 1rem 2rem;
    border-radius: 0.5rem;
    font-weight: 500;
    color: #6b7280;
    z-index: 10;
    animation: fadeInOut 2s infinite;
}

@keyframes fadeInOut {
    0%, 100% {
        opacity: 0;
    }
    50% {
        opacity: 1;
    }
}

/* Stats Overview Chart Customization */
.fi-wi-stats-overview-stat-chart canvas {
    cursor: pointer !important;
}

/* Override Chart.js point radius to show bullet points */
.fi-wi-stats-overview-stat-chart canvas {
    position: relative;
}

/* Add hover effect for stats charts */
.fi-wi-stats-overview-stat-chart:hover {
    transform: scale(1.02);
    transition: transform 0.2s ease;
}

/* Custom tooltip for stats charts */
.fi-wi-stats-overview-stat-chart::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.8);
    color: white;
    padding: 0.5rem 0.75rem;
    border-radius: 0.375rem;
    font-size: 0.75rem;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
    z-index: 1000;
}

.fi-wi-stats-overview-stat-chart:hover::after {
    opacity: 1;
}