@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,300..800;1,300..800&display=swap');

/* ABI Custom Theme Styling for Filament Admin & Member Panels */

body, button, input, select, textarea {
    font-family: 'Plus Jakarta Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
}

/* ABI Brand Logo Header Styling */
.abi-brand-wrapper {
    display: flex !important;
    align-items: center !important;
    gap: 22px !important;
    padding-left: 2px !important;
}

.abi-brand-logo {
    height: 40px !important;
    width: auto !important;
    object-fit: contain !important;
    flex-shrink: 0 !important;
}

.abi-brand-text {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    font-weight: 800 !important;
    font-size: 13px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    text-align: left !important;
}

html:not(.dark) .abi-brand-text .line-1 {
    color: #111827 !important;
}

html.dark .abi-brand-text .line-1 {
    color: #ffffff !important;
}

.abi-brand-text .line-1 {
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 0.95 !important;
}

.abi-brand-text .line-2 {
    display: block !important;
    color: #E84C23 !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 0.95 !important;
}

/* Active Sidebar Item Styling (Both Light & Dark) */
.fi-sidebar-item-active > a,
.fi-sidebar-item-active > div > a {
    background-color: #E84C23 !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    border-radius: 0.5rem !important;
}

.fi-sidebar-item-active > a svg,
.fi-sidebar-item-active > div > a svg {
    color: #ffffff !important;
}

/* Light Mode Sidebar Styling (Bright, Crisp & High-Contrast) */
html:not(.dark) .fi-sidebar {
    background-color: #ffffff !important;
    border-right: 1px solid #e5e7eb !important;
}

html:not(.dark) .fi-sidebar-header {
    background-color: #f9fafb !important;
    border-bottom: 1px solid #e5e7eb !important;
}

html:not(.dark) .fi-sidebar-item > a,
html:not(.dark) .fi-sidebar-item > div > a {
    color: #1f2937 !important; /* Very dark charcoal for maximum clarity */
    font-weight: 600 !important;
}

html:not(.dark) .fi-sidebar-item > a svg,
html:not(.dark) .fi-sidebar-item > div > a svg {
    color: #4b5563 !important;
}

html:not(.dark) .fi-sidebar-item > a:hover,
html:not(.dark) .fi-sidebar-item > div > a:hover {
    background-color: rgba(232, 76, 35, 0.1) !important;
    color: #E84C23 !important;
}

html:not(.dark) .fi-sidebar-item > a:hover svg,
html:not(.dark) .fi-sidebar-item > div > a:hover svg {
    color: #E84C23 !important;
}

html:not(.dark) .fi-sidebar-group-label {
    color: #374151 !important; /* Dark & sharp group headers */
    font-size: 0.7rem !important;
    font-weight: 800 !important;
    letter-spacing: 0.05em !important;
    text-transform: uppercase !important;
}

html:not(.dark) .fi-topbar {
    background-color: #ffffff !important;
    border-bottom: 1px solid #e5e7eb !important;
}

/* Dark Mode Sidebar & Topbar Styling */
html.dark .fi-sidebar {
    background-color: #09090b !important;
    border-right: 1px solid #27272a !important;
}

html.dark .fi-sidebar-header {
    background-color: #050507 !important;
    border-bottom: 1px solid #27272a !important;
}

html.dark .fi-topbar {
    background-color: #09090b !important;
    border-bottom: 1px solid #27272a !important;
}

html.dark .fi-sidebar-item > a,
html.dark .fi-sidebar-item > div > a {
    color: #e4e4e7 !important;
}

html.dark .fi-sidebar-group-label {
    color: #a1a1aa !important;
    font-size: 0.7rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.05em !important;
    text-transform: uppercase !important;
}

/* Custom Sleek Scrollbar Styling */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

html:not(.dark) ::-webkit-scrollbar-thumb {
    background-color: #cbd5e1;
    border-radius: 9999px;
}

html:not(.dark) ::-webkit-scrollbar-thumb:hover {
    background-color: #94a3b8;
}

html.dark ::-webkit-scrollbar-thumb {
    background-color: #3f3f46;
    border-radius: 9999px;
}

html.dark ::-webkit-scrollbar-thumb:hover {
    background-color: #52525b;
}

/* Firefox scrollbar support */
* {
    scrollbar-width: thin;
    scrollbar-color: #cbd5e1 transparent;
}

html.dark * {
    scrollbar-color: #3f3f46 transparent;
}