/* Reduce base font size on tablet+ so the UI feels less oversized. */
@media (min-width: 768px) {
    html {
        font-size: 12px;
    }
}

/**
 * Keep the Filament admin sidebar visually dark when the panel is in light mode
 * (html:not(.dark)). When the user enables global dark mode, Filament’s own styles apply.
 */
html:not(.dark) aside.fi-main-sidebar.fi-sidebar {
    background-color: rgb(17 24 39) !important; /* gray-900 */
    color: rgb(243 244 246) !important; /* gray-100 */
    --tw-ring-color: rgba(255, 255, 255, 0.1) !important;
}

@media (min-width: 1024px) {
    html:not(.dark) aside.fi-main-sidebar.fi-sidebar {
        background-color: rgb(17 24 39) !important;
    }
}

html:not(.dark) .fi-main-sidebar .fi-sidebar-header {
    background-color: rgb(17 24 39) !important;
    box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    --tw-ring-color: rgba(255, 255, 255, 0.1) !important;
}

/* Dark mode: make sidebar slightly lighter than main dark background */
html.dark aside.fi-main-sidebar.fi-sidebar {
    background-color: rgb(15 23 42) !important; /* slate-900 (slightly darker than widget surface) */
    --tw-ring-color: rgba(255, 255, 255, 0.1) !important;
}

@media (min-width: 1024px) {
    html.dark aside.fi-main-sidebar.fi-sidebar {
        background-color: rgb(15 23 42) !important;
    }
}

html.dark .fi-main-sidebar .fi-sidebar-header {
    background-color: rgb(15 23 42) !important;
    --tw-ring-color: rgba(255, 255, 255, 0.1) !important;
}

html:not(.dark) .fi-main-sidebar .fi-sidebar-nav {
    color: inherit;
}

/* Nav links & groups */
html:not(.dark) .fi-main-sidebar .fi-sidebar-item-button:hover,
html:not(.dark) .fi-main-sidebar .fi-sidebar-item-button:focus-visible {
    background-color: rgba(255, 255, 255, 0.05) !important;
}

html:not(.dark) .fi-main-sidebar .fi-sidebar-item.fi-active .fi-sidebar-item-button {
    background-color: rgba(255, 255, 255, 0.05) !important;
}

html:not(.dark) .fi-main-sidebar .fi-sidebar-item:not(.fi-active) .fi-sidebar-item-label {
    color: rgb(229 231 235) !important; /* gray-200 */
}

html:not(.dark) .fi-main-sidebar .fi-sidebar-item.fi-active .fi-sidebar-item-label {
    color: rgb(96 165 250) !important; /* primary-400 (blue) */
}

html:not(.dark) .fi-main-sidebar .fi-sidebar-item-icon {
    color: rgb(107 114 128) !important; /* gray-500 */
}

html:not(.dark) .fi-main-sidebar .fi-sidebar-item.fi-active .fi-sidebar-item-icon {
    color: rgb(96 165 250) !important;
}

html:not(.dark) .fi-main-sidebar .fi-sidebar-group-label {
    color: rgb(156 163 175) !important; /* gray-400 */
}

html:not(.dark) .fi-main-sidebar .fi-sidebar-group-icon {
    color: rgb(107 114 128) !important;
}

html:not(.dark) .fi-main-sidebar .fi-sidebar-group-button:hover .fi-sidebar-group-label {
    color: rgb(209 213 219) !important;
}

/* Sub-navigation tree lines & dots */
html:not(.dark) .fi-main-sidebar .fi-sidebar-item-grouped-border .bg-gray-300 {
    background-color: rgb(75 85 99) !important; /* gray-600 */
}

html:not(.dark) .fi-main-sidebar .rounded-full.bg-gray-400 {
    background-color: rgb(107 114 128) !important;
}

html:not(.dark) .fi-main-sidebar .rounded-full.bg-primary-600 {
    background-color: rgb(96 165 250) !important;
}

/* Collapsed dropdown trigger (narrow sidebar) */
html:not(.dark) .fi-main-sidebar button.hover\:bg-gray-100:hover {
    background-color: rgba(255, 255, 255, 0.05) !important;
}

html:not(.dark) .fi-main-sidebar .fi-icon-btn.fi-color-gray {
    color: rgb(107 114 128) !important; /* gray-500, like dark mode */
}

html:not(.dark) .fi-main-sidebar .fi-icon-btn.fi-color-gray:hover {
    color: rgb(209 213 219) !important; /* gray-300 */
}

/* Slim scrollbar — visible on sidebar hover, fades out on leave */
.fi-main-sidebar .fi-sidebar-nav {
    scrollbar-width: thin;
    scrollbar-color: transparent transparent;
    transition: scrollbar-color 0.3s ease;
}

.fi-main-sidebar:hover .fi-sidebar-nav {
    scrollbar-color: rgba(255, 255, 255, 0.25) transparent;
}

.fi-main-sidebar .fi-sidebar-nav::-webkit-scrollbar {
    width: 4px;
}

.fi-main-sidebar .fi-sidebar-nav::-webkit-scrollbar-track {
    background: transparent;
}

.fi-main-sidebar .fi-sidebar-nav::-webkit-scrollbar-thumb {
    background: transparent;
    border-radius: 4px;
    transition: background 0.3s ease;
}

.fi-main-sidebar:hover .fi-sidebar-nav::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.25);
}

.fi-main-sidebar:hover .fi-sidebar-nav::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.45);
}