/* ============================================
   Filament Admin Dashboard — Premium Cool Platinum & Royal Navy Theme
   Microsoft Silverlight Institute
   ============================================ */

/* Targets the page when HTML does NOT have the .dark class (Active Light Mode) */
html:not(.dark) body,
html:not(.dark) .fi-layout,
html:not(.dark) .fi-app-body {
    background-color: #f0f4f8 !important; /* Premium cool Platinum/Slate-blue background */
}

/* Soften the main content background */
html:not(.dark) main {
    background-color: #f0f4f8 !important;
}

/* Sidebar background - Gorgeous deep Royal Navy Blue */
html:not(.dark) .fi-sidebar,
html:not(.dark) .fi-sidebar-header {
    background-color: #0b172a !important; /* Deep Royal Navy */
    border-right: 1px solid #1e293b !important;
}

/* Make logo header bottom border clean and dark */
html:not(.dark) .fi-sidebar-header {
    border-bottom: 1px solid #1e293b !important;
}

/* Force logo header brand text and elements to be white */
html:not(.dark) .fi-sidebar-header span,
html:not(.dark) .fi-sidebar-header a,
html:not(.dark) .fi-sidebar-header h2 {
    color: #f8fafc !important;
}

/* Header/Topnav background - Deep Royal Navy Blue */
html:not(.dark) .fi-topbar,
html:not(.dark) .fi-topbar nav,
html:not(.dark) .fi-topbar header {
    background-color: #0b172a !important;
    border-bottom: 1px solid #1e293b !important;
}

/* Force header text, brand names, and buttons to be bright platinum white */
html:not(.dark) .fi-topbar .fi-brand-name,
html:not(.dark) .fi-topbar [class*="brand-name"],
html:not(.dark) .fi-topbar a,
html:not(.dark) .fi-topbar button,
html:not(.dark) .fi-topbar span:not(.fi-icon-btn-badge),
html:not(.dark) .fi-topbar .fi-user-menu {
    color: #f8fafc !important; /* Premium platinum white text */
}

/* Force header icons to be soft silver */
html:not(.dark) .fi-topbar svg,
html:not(.dark) .fi-topbar .fi-icon-btn svg {
    color: #94a3b8 !important; /* Cool Silver/Slate-400 */
}

/* Fix User Menu Avatar white corners */
html:not(.dark) .fi-topbar .fi-user-menu,
html:not(.dark) .fi-topbar .fi-user-menu button,
html:not(.dark) .fi-topbar .fi-user-menu-btn,
html:not(.dark) .fi-topbar .fi-avatar,
html:not(.dark) .fi-topbar .fi-user-avatar {
    background-color: transparent !important;
    border-radius: 9999px !important;
}

/* Hover effects for topbar items */
html:not(.dark) .fi-topbar button:hover svg,
html:not(.dark) .fi-topbar a:hover {
    color: #ffffff !important;
}

/* Sidebar item hover state - elegant cool dark navy hover background and bright white text */
html:not(.dark) .fi-sidebar-item:hover,
html:not(.dark) .fi-sidebar-item:hover a,
html:not(.dark) .fi-sidebar-item:hover button,
html:not(.dark) .fi-sidebar-item a:hover,
html:not(.dark) .fi-sidebar-item button:hover,
html:not(.dark) .fi-sidebar-item:hover .fi-sidebar-item-button,
html:not(.dark) .fi-sidebar-item-button:hover {
    background-color: #1e293b !important; /* Soft premium dark slate-gray hover */
    color: #ffffff !important; /* Crisp white text on hover */
}

/* Cards & Sections - Pure white cards with cool platinum borders */
html:not(.dark) .fi-section,
html:not(.dark) .fi-card,
html:not(.dark) .fi-ta-ctn,
html:not(.dark) .fi-section-header {
    background-color: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    box-shadow: 0 4px 6px -1px rgba(15, 23, 42, 0.03), 0 2px 4px -2px rgba(15, 23, 42, 0.03) !important;
}

/* High-contrast Royal Blue active state for sidebar links */
html:not(.dark) .fi-sidebar-item-active,
html:not(.dark) .fi-sidebar-item-active a,
html:not(.dark) .fi-sidebar-item-active span,
html:not(.dark) .fi-sidebar-item-active label,
html:not(.dark) .fi-sidebar-item-active svg,
html:not(.dark) .fi-sidebar-group-item-active a {
    background-color: #2563eb !important; /* Vibrant Royal Blue active background */
    color: #ffffff !important; /* Crisp White text */
}

/* Ensure active text stays bright white */
html:not(.dark) .fi-sidebar-item-active label,
html:not(.dark) .fi-sidebar-item-active span,
html:not(.dark) .fi-sidebar-item-active svg {
    color: #ffffff !important;
}

/* Inactive sidebar items - Cool Silver/Slate text for premium contrast */
html:not(.dark) .fi-sidebar-item label,
html:not(.dark) .fi-sidebar-item span,
html:not(.dark) .fi-sidebar-item svg {
    color: #94a3b8 !important; /* Cool Silver/Slate-400 */
}

/* Hover state for sidebar items */
html:not(.dark) .fi-sidebar-item:hover label,
html:not(.dark) .fi-sidebar-item:hover span,
html:not(.dark) .fi-sidebar-item:hover svg {
    color: #f8fafc !important; /* Bright platinum on hover */
}

/* Soften table headers with cool platinum tint */
html:not(.dark) .fi-ta-header-cell {
    background-color: #f8fafc !important;
    color: #1e293b !important;
    font-weight: 600 !important;
}

/* Soften forms and inputs globally in Light Theme */
html:not(.dark) input,
html:not(.dark) select,
html:not(.dark) textarea,
html:not(.dark) .fi-input,
html:not(.dark) .fi-fo-field-wrp input,
html:not(.dark) .fi-fo-field-wrp select,
html:not(.dark) .fi-fo-field-wrp textarea {
    background-color: #ffffff !important;
    border-color: #cbd5e1 !important;
    color: #0f172a !important; /* Deep corporate slate text for maximum readability */
    -webkit-text-fill-color: #0f172a !important; /* Force deep slate typed text and override any white autofills */
}

/* Ensure placeholder text is softly visible but distinct */
html:not(.dark) input::placeholder,
html:not(.dark) textarea::placeholder {
    color: #64748b !important; /* Soft Slate-500 placeholder */
    opacity: 0.6 !important;
}

/* Input focus ring - Royal Blue glow */
html:not(.dark) input:focus,
html:not(.dark) select:focus,
html:not(.dark) textarea:focus,
html:not(.dark) .fi-fo-field-wrp input:focus,
html:not(.dark) .fi-fo-field-wrp select:focus,
html:not(.dark) .fi-fo-field-wrp textarea:focus {
    border-color: #2563eb !important;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15) !important;
}

/* Warm text labels in Light Theme - Deep corporate slate */
html:not(.dark) .fi-fo-field-wrp label {
    color: #1e293b !important; /* Deep Slate-800 labels for elegant premium feel */
    font-weight: 600 !important;
}

/* ============================================
   BADGES & COUNTS — Visibility Upgrades
   ============================================ */

/* Force all inactive sidebar counts/pill badges to be highly visible dark blue pills with white text */
html:not(.dark) .fi-sidebar-item:not(.fi-sidebar-item-active) .fi-sidebar-item-badge,
html:not(.dark) .fi-sidebar-item:not(.fi-sidebar-item-active) .fi-badge,
html:not(.dark) .fi-sidebar-item:not(.fi-sidebar-item-active) .fi-sidebar-item-badge span,
html:not(.dark) .fi-sidebar-item:not(.fi-sidebar-item-active) .fi-badge span {
    background-color: #1e293b !important; /* Soft premium dark slate */
    color: #f8fafc !important; /* Crisp platinum white text */
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

/* Force active sidebar counts/pill badges to have a beautiful white background with Royal Blue text */
html:not(.dark) .fi-sidebar-item-active .fi-sidebar-item-badge,
html:not(.dark) .fi-sidebar-item-active .fi-badge,
html:not(.dark) .fi-sidebar-item-active .fi-sidebar-item-badge span,
html:not(.dark) .fi-sidebar-item-active .fi-badge span {
    background-color: #ffffff !important; /* White pill background */
    color: #2563eb !important; /* Royal Blue text */
}

/* Force the Topbar Notification Bell red badge count to be highly readable */
html:not(.dark) .fi-topbar .fi-icon-btn-badge-ctn {
    background-color: transparent !important;
    border: none !important;
}
html:not(.dark) .fi-topbar .fi-icon-btn-badge-ctn .fi-badge {
    background-color: #ef4444 !important; /* Premium vibrant red badge background */
    border-radius: 9999px !important; /* Ensure perfectly round pill shape */
    border: none !important; /* Remove nested double borders */
    padding: 0.125rem 0.375rem !important;
}
html:not(.dark) .fi-topbar .fi-icon-btn-badge-ctn .fi-badge span,
html:not(.dark) .fi-topbar .fi-icon-btn-badge-ctn .fi-badge {
    color: #ffffff !important; /* Crisp white number text */
    font-weight: 700 !important;
}

/* ============================================
   USER DROPDOWN MENU — Contrast Reset
   ============================================ */

/* Reset User Dropdown Menu and Modal text colors back to dark gray in Light Theme */
html:not(.dark) .fi-topbar .fi-dropdown-list a,
html:not(.dark) .fi-topbar .fi-dropdown-list span,
html:not(.dark) .fi-topbar .fi-dropdown-list button,
html:not(.dark) .fi-topbar .fi-dropdown-list svg,
html:not(.dark) .fi-topbar [class*="dropdown"] a,
html:not(.dark) .fi-topbar [class*="dropdown"] span:not(.fi-badge span),
html:not(.dark) .fi-topbar [class*="dropdown"] button,
html:not(.dark) .fi-topbar [class*="dropdown"] h1,
html:not(.dark) .fi-topbar [class*="dropdown"] h2,
html:not(.dark) .fi-topbar [class*="dropdown"] h3,
html:not(.dark) .fi-topbar [class*="dropdown"] svg,
html:not(.dark) .fi-dropdown-list a,
html:not(.dark) .fi-dropdown-list span:not(.fi-badge span),
html:not(.dark) .fi-dropdown-list button,
html:not(.dark) .fi-dropdown-list svg,
html:not(.dark) .fi-modal-window a,
html:not(.dark) .fi-modal-window span:not(.fi-badge span):not(.fi-badge),
html:not(.dark) .fi-modal-window button,
html:not(.dark) .fi-modal-window h1,
html:not(.dark) .fi-modal-window h2,
html:not(.dark) .fi-modal-window h3,
html:not(.dark) .fi-modal-window h4,
html:not(.dark) .fi-modal-window svg {
    color: #1e293b !important; /* Rich slate-800 text for excellent visibility on white card background */
}

/* Ensure any badge inside a modal or dropdown gets the red treatment */
html:not(.dark) .fi-modal-window .fi-badge,
html:not(.dark) .fi-modal-window .fi-badge span,
html:not(.dark) .fi-dropdown-panel .fi-badge,
html:not(.dark) .fi-dropdown-panel .fi-badge span,
html:not(.dark) [class*="dropdown"] .fi-badge,
html:not(.dark) [class*="dropdown"] .fi-badge span {
    background-color: #ef4444 !important;
    color: #ffffff !important;
    border-radius: 9999px !important;
    border: none !important;
    font-weight: 700 !important;
}

/* Hover state for dropdown items - beautiful cool slate-100 hover */
html:not(.dark) .fi-dropdown-list a:hover,
html:not(.dark) .fi-dropdown-list button:hover,
html:not(.dark) [class*="dropdown"] a:hover,
html:not(.dark) [class*="dropdown"] button:hover {
    background-color: #f1f5f9 !important; /* Soft slate hover background */
    color: #0f172a !important; /* Pure dark text on hover */
}