/*
 * Lamarek branding on top of Filament's stock theme (linked by AppPanelProvider,
 * no build step). The sidebar and the logo corner of the topbar form
 * one navy column in the logo's colour, separated from the light content area.
 * Plain CSS outside Filament's @layer rules, so these win without !important.
 */

:root {
    --lm-navy: #060e21;
    --lm-navy-line: rgb(255 255 255 / 0.08);
    --lm-text: #cbd5e1;
    --lm-text-muted: #7c8aa5;
    --lm-hover: rgb(255 255 255 / 0.06);
    --lm-active: rgb(56 189 248 / 0.16);
    --lm-active-text: #7dd3fc;
    /* The colours of the ring around the logo mark. */
    --lm-ring: linear-gradient(90deg, #e8505b, #f6a21e, #f9e01b, #3cc35a, #1fb5e8, #3f51d8, #c23ad1);
}

.dark {
    --lm-navy: #0a1428;
}

/* ---- Sidebar column ---------------------------------------------------- */

.fi-main-sidebar {
    background-color: var(--lm-navy);
    border-inline-end: 1px solid var(--lm-navy-line);
}

@media (min-width: 64rem) {
    .fi-main-sidebar {
        box-shadow: 4px 0 16px -8px rgb(6 14 33 / 0.35);
    }
}

.fi-main-sidebar .fi-sidebar-header {
    background-color: var(--lm-navy);
    box-shadow: inset 0 -1px 0 var(--lm-navy-line);
}

.fi-main-sidebar .fi-sidebar-nav {
    scrollbar-color: rgb(255 255 255 / 0.18) transparent;
}

.fi-main-sidebar .fi-sidebar-group-label {
    color: var(--lm-text-muted);
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.fi-main-sidebar .fi-sidebar-group-btn .fi-icon,
.fi-main-sidebar .fi-sidebar-group-collapse-btn {
    color: var(--lm-text-muted);
}

.fi-main-sidebar .fi-sidebar-item-label {
    color: var(--lm-text);
}

.fi-main-sidebar .fi-sidebar-item-icon,
.fi-main-sidebar .fi-sidebar-group-dropdown-trigger-btn .fi-icon {
    color: var(--lm-text-muted);
}

.fi-main-sidebar .fi-sidebar-item-btn:hover,
.fi-main-sidebar .fi-sidebar-item-btn:focus-visible,
.fi-main-sidebar .fi-sidebar-group-dropdown-trigger-btn:hover,
.fi-main-sidebar .fi-sidebar-group-dropdown-trigger-btn:focus-visible {
    background-color: var(--lm-hover);
}

.fi-main-sidebar .fi-sidebar-item-btn:hover .fi-sidebar-item-label,
.fi-main-sidebar .fi-sidebar-item-btn:hover .fi-sidebar-item-icon {
    color: #fff;
}

.fi-main-sidebar .fi-sidebar-item.fi-active > .fi-sidebar-item-btn {
    background-color: var(--lm-active);
    box-shadow: inset 3px 0 0 var(--lm-active-text);
}

.fi-main-sidebar .fi-sidebar-item.fi-active > .fi-sidebar-item-btn .fi-sidebar-item-label,
.fi-main-sidebar .fi-sidebar-item.fi-active > .fi-sidebar-item-btn .fi-sidebar-item-icon,
.fi-main-sidebar .fi-sidebar-group-dropdown-trigger-btn.fi-active .fi-icon {
    color: var(--lm-active-text);
}

.fi-main-sidebar .fi-sidebar-item-grouped-border-part,
.fi-main-sidebar .fi-sidebar-item-grouped-border-part-not-first,
.fi-main-sidebar .fi-sidebar-item-grouped-border-part-not-last {
    background-color: var(--lm-navy-line);
}

.fi-main-sidebar .fi-sidebar-item.fi-active .fi-sidebar-item-grouped-border-part {
    background-color: var(--lm-active-text);
}

/* The sidebar is navy in both modes, so it always shows the white logo. */
.fi-main-sidebar .fi-logo-light {
    display: none;
}

.fi-main-sidebar .fi-logo-dark {
    display: flex;
}

/* ---- Topbar: the corner above the sidebar continues the navy column ---- */

/* A thin strip in the logo ring's colours across the top of the app. */
.fi-topbar::after {
    content: '';
    position: absolute;
    inset: 0 0 auto;
    height: 3px;
    background: var(--lm-ring);
}

@media (min-width: 64rem) {
    .fi-topbar::before {
        content: '';
        position: absolute;
        inset-block: 0;
        inset-inline-start: 0;
        width: var(--collapsed-sidebar-width);
        background-color: var(--lm-navy);
        border-inline-end: 1px solid var(--lm-navy-line);
    }

    .fi-body:has(.fi-main-sidebar.fi-sidebar-open) .fi-topbar::before {
        width: var(--sidebar-width);
    }

    .fi-topbar > * {
        position: relative;
    }

    .fi-topbar-start .fi-icon-btn {
        color: var(--lm-text);
    }

    .fi-topbar-start .fi-icon-btn:hover {
        color: #fff;
        background-color: var(--lm-hover);
    }

    .fi-body:has(.fi-main-sidebar.fi-sidebar-open) .fi-topbar-start .fi-logo-light {
        display: none;
    }

    .fi-body:has(.fi-main-sidebar.fi-sidebar-open) .fi-topbar-start .fi-logo-dark {
        display: flex;
    }

    /* Collapsed sidebar: the logo sits on the light topbar, right of the narrow navy strip. */
    .fi-body:not(:has(.fi-main-sidebar.fi-sidebar-open)) .fi-topbar-start > a {
        margin-inline-start: calc(var(--collapsed-sidebar-width) - 2.25rem);
    }
}