/* Valcon Premium Dark SaaS Theme for Filament Admin Panel */

@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700&family=Cairo:wght@300;400;600;700&display=swap');

:root {
    --valcon-navy-bg: #0B1220;
    --valcon-blue-card: rgba(10, 31, 68, 0.45);
    --valcon-gold-primary: #D4AF37;
    --valcon-gold-border: rgba(212, 175, 55, 0.15);
    --valcon-gold-hover: rgba(212, 175, 55, 0.4);
    --valcon-text-light: #F3F4F6;
    --valcon-text-muted: #9CA3AF;
}

/* Global Styles */
.fi-admin, body, .fi-layout {
    background-color: var(--valcon-navy-bg) !important;
    color: var(--valcon-text-light) !important;
    font-family: 'Outfit', 'Cairo', sans-serif !important;
}

.fi-admin * {
    font-family: 'Outfit', 'Cairo', sans-serif !important;
}

/* Glassmorphism Sidebar */
.fi-sidebar {
    background: rgba(10, 31, 68, 0.65) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border-right: 1px solid var(--valcon-gold-border) !important;
}

.fi-sidebar-header {
    border-bottom: 1px solid var(--valcon-gold-border) !important;
}

.fi-sidebar-item-active {
    border-left: 3px solid var(--valcon-gold-primary) !important;
    background: rgba(212, 175, 55, 0.08) !important;
    border-radius: 0 8px 8px 0 !important;
}

.fi-sidebar-item-active * {
    color: var(--valcon-gold-primary) !important;
}

/* Glassmorphism Topbar Header */
.fi-topbar {
    background: rgba(11, 18, 32, 0.85) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    border-bottom: 1px solid var(--valcon-gold-border) !important;
}

/* Glassmorphism Cards (Stats Widgets, Section panels, Tables container) */
.fi-wi-stats-overview-stat, 
.fi-section, 
.fi-ta-container, 
.fi-modal-window, 
.fi-ta-content,
.fi-ta-empty-state {
    background: var(--valcon-blue-card) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    border: 1px solid var(--valcon-gold-border) !important;
    border-radius: 16px !important;
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.4) !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.fi-wi-stats-overview-stat:hover, 
.fi-section:hover,
.fi-ta-container:hover {
    border-color: var(--valcon-gold-hover) !important;
    box-shadow: 0 12px 40px 0 rgba(212, 175, 55, 0.15) !important;
    transform: translateY(-2px);
}

/* Tables Custom Styling inside Filament Grid */
.fi-ta-record-checkboxInput {
    border-color: var(--valcon-gold-border) !important;
}

.fi-ta-record-checkboxInput:checked {
    background-color: var(--valcon-gold-primary) !important;
}

/* Customize Badge Status colors for modern feel */
.fi-badge {
    border-radius: 9999px !important;
    font-weight: 600 !important;
}

.fi-color-amber {
    background-color: rgba(212, 175, 55, 0.15) !important;
    color: var(--valcon-gold-primary) !important;
    border: 1px solid var(--valcon-gold-border) !important;
}

/* Custom glow on gold indicators */
.valcon-gold-glow {
    box-shadow: 0 0 12px var(--valcon-gold-primary);
}

/* Live status pulse animations */
.status-pulse {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-right: 6px;
    animation: status-pulsate 1.8s infinite ease-in-out;
}

.status-pulse.green {
    background-color: #10B981;
    box-shadow: 0 0 8px #10B981;
}

.status-pulse.amber {
    background-color: #F59E0B;
    box-shadow: 0 0 8px #F59E0B;
}

.status-pulse.blue {
    background-color: #3B82F6;
    box-shadow: 0 0 8px #3B82F6;
}

.status-pulse.red {
    background-color: #EF4444;
    box-shadow: 0 0 8px #EF4444;
}

@keyframes status-pulsate {
    0% {
        transform: scale(0.9);
        opacity: 0.6;
    }
    50% {
        transform: scale(1.25);
        opacity: 1;
    }
    100% {
        transform: scale(0.9);
        opacity: 0.6;
    }
}

/* Custom Valcon Telemetry Grid Cards styling */
.valcon-card {
    background: linear-gradient(135deg, rgba(10, 31, 68, 0.55) 0%, rgba(6, 20, 44, 0.75) 100%) !important;
    border: 1px solid var(--valcon-gold-border) !important;
    border-radius: 16px !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35) !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.valcon-card:hover {
    border-color: var(--valcon-gold-hover) !important;
    box-shadow: 0 15px 45px rgba(212, 175, 55, 0.12) !important;
    transform: translateY(-4px);
}

/* Custom Scrollbar for premium dark style */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: var(--valcon-navy-bg);
}

::-webkit-scrollbar-thumb {
    background: rgba(212, 175, 55, 0.2);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--valcon-gold-primary);
}

/* Filament Form Labels and Inputs styling for unified Dark mode */
.fi-fo-field-wrp-label,
.fi-fo-field-wrp-label *,
label[for],
.fi-fo-placeholder * {
    color: #F3F4F6 !important;
    font-weight: 600 !important;
}

.fi-input-wrp {
    background-color: rgba(6, 20, 44, 0.8) !important;
    border: 1px solid var(--valcon-gold-border) !important;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2) !important;
    color: #F3F4F6 !important;
    border-radius: 10px !important;
}

.fi-input-wrp:focus-within {
    border-color: var(--valcon-gold-primary) !important;
    box-shadow: 0 0 10px rgba(212, 175, 55, 0.25) !important;
}

.fi-input-wrp input, 
.fi-input-wrp select, 
.fi-input-wrp textarea {
    color: #F3F4F6 !important;
    background-color: transparent !important;
    font-weight: 500 !important;
}

.fi-input-wrp input::placeholder {
    color: #9CA3AF !important;
}

/* Fix datepicker calendar icon color */
.fi-input-wrp button,
.fi-input-wrp svg {
    color: var(--valcon-gold-primary) !important;
}

/* Kill all light mode / white backgrounds and force premium dark */
.fi-admin .bg-white,
.fi-admin .bg-gray-50 {
    background-color: var(--valcon-navy-bg) !important;
}

.fi-admin .bg-gray-100 {
    background-color: rgba(10, 31, 68, 0.45) !important;
}

.fi-admin .bg-gray-200 {
    background-color: rgba(10, 31, 68, 0.65) !important;
}

/* Override opacity white overlays in map dashboard to be dark */
.fi-admin .bg-white\/90 {
    background-color: rgba(11, 18, 32, 0.9) !important;
}

.fi-admin .bg-blue-100 {
    background-color: rgba(59, 130, 246, 0.15) !important;
}

.fi-admin .bg-amber-100 {
    background-color: rgba(245, 158, 11, 0.15) !important;
}

/* Ensure text visibility */
.fi-admin .text-gray-950,
.fi-admin .text-gray-900,
.fi-admin .text-gray-800,
.fi-admin .text-gray-700,
.fi-admin .text-gray-600 {
    color: var(--valcon-text-light) !important;
}

.fi-admin .text-gray-500,
.fi-admin .text-gray-400 {
    color: var(--valcon-text-muted) !important;
}

/* OpenStreetMap zoom button contrast correction */
.leaflet-control-zoom a {
    background: rgba(10, 31, 68, 0.85) !important;
    color: var(--valcon-text-light) !important;
    border: 1px solid var(--valcon-gold-border) !important;
}

.leaflet-control-zoom a:hover {
    background: var(--valcon-gold-hover) !important;
    color: var(--valcon-gold-primary) !important;
}

/* Table header text visibility */
.fi-ta-header-cell * {
    color: var(--valcon-text-light) !important;
    font-weight: 700 !important;
}

/* Force Table Widget wrapper containers to use the premium blue-card dark theme */
.fi-wi-table,
.fi-wi-table-widget,
.fi-ta-ctn,
.fi-ta-content,
.fi-section,
.fi-section-content,
.fi-wi-table-widget > div,
.fi-wi-table > div,
.fi-ta-container {
    background: var(--valcon-blue-card) !important;
    background-color: var(--valcon-blue-card) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    border: 1px solid var(--valcon-gold-border) !important;
    border-radius: 16px !important;
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.4) !important;
}

/* Make actual table content and headers transparent to inherit card backgrounds */
.fi-ta-table,
.fi-ta-table *,
.fi-ta-header,
.fi-ta-header *,
.fi-ta-header-toolbar,
.fi-ta-header-toolbar *,
.fi-ta-footer,
.fi-ta-footer *,
.fi-ta-pagination,
.fi-ta-pagination *,
.fi-ta-record-checkbox,
.fi-ta-empty-state,
.fi-ta-empty-state * {
    background-color: transparent !important;
    background: transparent !important;
    border-color: rgba(212, 175, 55, 0.08) !important;
}

/* Style table search input to look premium */
.fi-ta-header-toolbar input {
    background-color: rgba(6, 20, 44, 0.6) !important;
    border: 1px solid var(--valcon-gold-border) !important;
    color: #F3F4F6 !important;
    border-radius: 8px !important;
}

.fi-ta-header-toolbar input::placeholder {
    color: #9CA3AF !important;
}

/* Pagination button style override */
.fi-ta-pagination button {
    background-color: rgba(10, 31, 68, 0.8) !important;
    border: 1px solid var(--valcon-gold-border) !important;
    color: var(--valcon-text-light) !important;
}

.fi-ta-pagination button:hover {
    background-color: var(--valcon-gold-hover) !important;
    color: var(--valcon-gold-primary) !important;
}

/* Fix text colors inside the table cards, cells, and headers */
.fi-ta-table td,
.fi-ta-table td *,
.fi-ta-text,
.fi-ta-text *,
.fi-ta-cell,
.fi-ta-cell *,
.fi-ta-col-wrp,
.fi-ta-col-wrp *,
.fi-ta-pagination button,
.fi-ta-pagination button *,
.fi-ta-pagination button span,
.fi-ta-pagination span {
    color: var(--valcon-text-light) !important;
}

/* Maintain soft gray for muted text and secondary metrics in tables */
.fi-ta-table td .text-gray-400,
.fi-ta-table td .text-gray-500,
.fi-ta-table td .text-xs,
.fi-ta-table td span.text-gray-500,
.fi-ta-table td span.text-gray-400 {
    color: var(--valcon-text-muted) !important;
}

/* Simple Layout / Auth Pages Custom Dark Theme (Login) */
.fi-simple-layout,
.fi-simple-layout body,
.fi-simple-main-ctn,
.fi-simple-main {
    background-color: var(--valcon-navy-bg) !important;
    color: var(--valcon-text-light) !important;
}

.fi-simple-main {
    background: var(--valcon-blue-card) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    border: 1px solid var(--valcon-gold-border) !important;
    border-radius: 16px !important;
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.4) !important;
}

/* Force transparent background for cards or elements on simple layout */
.fi-simple-layout .bg-white,
.fi-simple-layout .bg-gray-50,
.fi-simple-layout .fi-simple-card,
.fi-simple-card {
    background-color: transparent !important;
    background: transparent !important;
}

.fi-simple-layout .text-gray-950,
.fi-simple-layout .text-gray-900,
.fi-simple-layout .text-gray-800,
.fi-simple-layout .text-gray-700,
.fi-simple-layout .text-gray-600 {
    color: var(--valcon-text-light) !important;
}

.fi-simple-layout .text-gray-500,
.fi-simple-layout .text-gray-400 {
    color: var(--valcon-text-muted) !important;
}

.fi-simple-header-title {
    color: var(--valcon-text-light) !important;
    font-weight: 700 !important;
}