/*
 * Zimmer Architekten — admin brand styling.
 * Gray (#737373) sidebar + white logo/nav (mirrors the site header) and a gray
 * login backdrop. Charcoal (#262626) accent comes from the panel's primary color.
 * Loaded AFTER Filament's stylesheet via renderHook('panels::head.end'), so the
 * few !important rules here win over Filament's utility classes.
 * The main content area is intentionally left white (CMS content needs light bg).
 */

/* ---- Sidebar: gray canvas ---- */
.fi-sidebar,
.fi-sidebar-header,
.fi-sidebar-nav {
    background-color: #737373 !important;
    border-color: rgba(255, 255, 255, 0.14) !important;
}

.fi-sidebar-header {
    box-shadow: none !important;
}

/* Group headings (Übersicht, Architektur, …) */
.fi-sidebar-group-label {
    color: rgba(255, 255, 255, 0.72) !important;
}

/* Nav item text — idle */
.fi-sidebar-item-button {
    color: rgba(255, 255, 255, 0.9) !important;
}

.fi-sidebar-item-label {
    color: inherit !important;
}

/* Icons: heroicon SVGs + legacy FontAwesome <i> glyphs + group chevrons → white */
.fi-sidebar .fi-sidebar-item-icon,
.fi-sidebar .fi-icon,
.fi-sidebar svg,
.fi-sidebar i.fa,
.fi-sidebar .fa {
    color: #ffffff !important;
}

/* Hover */
.fi-sidebar-item-button:hover {
    background-color: rgba(255, 255, 255, 0.14) !important;
    color: #ffffff !important;
}

/* Active item (Filament marks the <li> with .fi-active) */
.fi-sidebar-item.fi-active .fi-sidebar-item-button,
.fi-sidebar-item-button[aria-current="page"] {
    background-color: rgba(255, 255, 255, 0.2) !important;
    color: #ffffff !important;
}

/* Subtle sidebar scrollbar on the gray */
.fi-sidebar-nav::-webkit-scrollbar-thumb {
    background-color: rgba(255, 255, 255, 0.28);
}

/* ---- Login page: gray backdrop so the white logo reads ---- */
.fi-simple-layout {
    background-color: #737373 !important;
}

/* The panel uses the WHITE logo (for the gray sidebar). Filament renders that same
   logo inside the white login card, where it would be invisible — so for the login
   card only, swap to the dark-on-white logo. */
.fi-simple-header .fi-logo {
    content: url('/brand/logo-colored.svg');
    height: 4.5rem !important;
    width: auto;
}

/* ---- Mobile topbar (sidebar hidden below lg): match the gray brand ---- */
@media (max-width: 1023px) {
    .fi-topbar {
        background-color: #737373 !important;
    }

    .fi-topbar svg,
    .fi-topbar .fi-icon-btn-icon {
        color: #ffffff !important;
    }
}