/* AH Ride & Shop - Blue Gradient Theme (matching mobile app) */

/* Light mode - Blue gradient background like the mobile app */
.fi-body {
    background: linear-gradient(180deg, #1154A5 0%, #3B82F6 20%, #60A5FA 50%, #93C5FD 80%, #BFDBFE 100%) !important;
}

.fi-topbar {
    background: rgba(255, 255, 255, 0.95) !important;
    backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(17, 84, 165, 0.1) !important;
    box-shadow: 0 2px 8px rgba(17, 84, 165, 0.1) !important;
}

.fi-sidebar {
    background: rgba(255, 255, 255, 0.95) !important;
    backdrop-filter: blur(10px);
    border-right: 1px solid rgba(17, 84, 165, 0.1) !important;
}

/* Dark mode - Night sky */
.dark .fi-body {
    background: linear-gradient(180deg, #0c4a6e 0%, #082f49 50%, #020617 100%) !important;
}

.dark .fi-topbar {
    background: rgba(15, 23, 42, 0.95) !important;
    backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(56, 189, 248, 0.2) !important;
}

.dark .fi-sidebar {
    background: rgba(15, 23, 42, 0.98) !important;
    backdrop-filter: blur(10px);
    border-right: 1px solid rgba(56, 189, 248, 0.2) !important;
}

/* Cards with cloud-like subtle shadows */
.fi-section,
.fi-card,
.fi-ta-content {
    box-shadow: 0 4px 6px -1px rgba(14, 165, 233, 0.1), 
                0 2px 4px -1px rgba(14, 165, 233, 0.06) !important;
}

.dark .fi-section,
.dark .fi-card,
.dark .fi-ta-content {
    box-shadow: 0 4px 6px -1px rgba(56, 189, 248, 0.2), 
                0 2px 4px -1px rgba(56, 189, 248, 0.1) !important;
}

/* Navigation items - cloud accent */
.fi-sidebar-item-button:hover {
    background: rgba(14, 165, 233, 0.1) !important;
}

.dark .fi-sidebar-item-button:hover {
    background: rgba(56, 189, 248, 0.15) !important;
}

.fi-sidebar-item-button.fi-active {
    background: linear-gradient(90deg, rgba(14, 165, 233, 0.15), rgba(14, 165, 233, 0.05)) !important;
}

.dark .fi-sidebar-item-button.fi-active {
    background: linear-gradient(90deg, rgba(56, 189, 248, 0.2), rgba(56, 189, 248, 0.1)) !important;
}

/* Buttons - Sky theme */
.fi-btn-primary {
    background: linear-gradient(135deg, #0ea5e9 0%, #0284c7 100%) !important;
    box-shadow: 0 4px 12px rgba(14, 165, 233, 0.3) !important;
}

.fi-btn-primary:hover {
    background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%) !important;
    box-shadow: 0 6px 16px rgba(14, 165, 233, 0.4) !important;
}

/* Stats cards - bright cloud theme */
.fi-wi-stats-overview-stat-card {
    background: linear-gradient(135deg, rgba(186, 230, 253, 0.9), rgba(224, 242, 254, 0.95)) !important;
    border: 1px solid rgba(14, 165, 233, 0.15) !important;
}

.dark .fi-wi-stats-overview-stat-card {
    background: linear-gradient(135deg, rgba(12, 74, 110, 0.5), rgba(8, 47, 73, 0.6)) !important;
}

/* Form inputs */
.fi-input,
.fi-select,
.fi-textarea {
    border-color: rgba(14, 165, 233, 0.2) !important;
}

.fi-input:focus,
.fi-select:focus,
.fi-textarea:focus {
    border-color: rgba(14, 165, 233, 0.5) !important;
    box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.1) !important;
}

.dark .fi-input,
.dark .fi-select,
.dark .fi-textarea {
    border-color: rgba(56, 189, 248, 0.3) !important;
}

.dark .fi-input:focus,
.dark .fi-select:focus,
.dark .fi-textarea:focus {
    border-color: rgba(56, 189, 248, 0.5) !important;
    box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.15) !important;
}

/* Override Filament table header styles */
.fi-ta-header-cell-label {
    font-weight: 400 !important;
    text-transform: none !important;
    font-size: 0.875rem !important;
    letter-spacing: normal !important;
}

/* Tables */
.fi-ta-table {
    table-layout: auto !important;
    border-radius: 12px !important;
    overflow: hidden;
}

.fi-ta-header-heading {
    color: #0369a1 !important;
}

.dark .fi-ta-header-heading {
    color: #7dd3fc !important;
}

thead th {
    font-weight: 400 !important;
    text-transform: none !important;
}

/* Badges */
.fi-badge {
    border-radius: 9999px !important;
}

/* Subtle bright cloud pattern */
.fi-body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 400px;
    background: 
        radial-gradient(ellipse 1000px 500px at 0% 0%, rgba(125, 211, 252, 0.6), transparent),
        radial-gradient(ellipse 800px 400px at 100% 0%, rgba(186, 230, 253, 0.5), transparent),
        radial-gradient(ellipse 600px 300px at 50% 0%, rgba(224, 242, 254, 0.4), transparent);
    pointer-events: none;
    z-index: 0;
}

.dark .fi-body::before {
    background: 
        radial-gradient(ellipse 800px 400px at 0% 0%, rgba(12, 74, 110, 0.3), transparent),
        radial-gradient(ellipse 600px 300px at 100% 0%, rgba(8, 47, 73, 0.2), transparent);
}

/* Smooth transitions */
* {
    transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease !important;
}