/*
 * LEMONTEC Grunddesign fuer Filament: angeglichen an das Kunden-Dashboard (shadcn Sidebar "inset").
 * Nur Farben/Abstaende/Typo, keine Logik. Basis fuer das spaetere Design-Paket (tools, cockpit).
 */
:root {
    --lt-bg: hsl(0 0% 98%);
    --lt-surface: hsl(0 0% 100%);
    --lt-fg: hsl(248 8% 20%);
    --lt-sidebar-fg: hsl(248 8% 26%);
    --lt-muted-fg: hsl(0 0% 45.1%);
    --lt-accent: hsl(0 0% 94%);
    --lt-border: hsl(0 0% 91%);
    --lt-brand: #d8df21;
}
.dark {
    --lt-bg: hsl(248 8% 9%);
    --lt-surface: hsl(248 8% 11%);
    --lt-fg: hsl(0 0% 98%);
    --lt-sidebar-fg: hsl(0 0% 95.9%);
    --lt-muted-fg: hsl(0 0% 63.9%);
    --lt-accent: hsl(248 6% 18%);
    --lt-border: hsl(248 6% 18%);
}

body.fi-body { background: var(--lt-bg); color: var(--lt-fg); }

/* Inhalt als eingerueckte Karte wie im Dashboard */
@media (min-width: 1024px) {
    .fi-main-ctn {
        background: var(--lt-surface);
        margin: .5rem .5rem .5rem 0;
        border-radius: .75rem;
        box-shadow: 0 1px 3px 0 rgb(0 0 0 / .08), 0 1px 2px -1px rgb(0 0 0 / .08);
        min-height: calc(100vh - 1rem);
        min-width: 0;
    }
    .dark .fi-main-ctn { box-shadow: 0 0 0 1px var(--lt-border); }
}
@media (max-width: 1023px) {
    .fi-main-ctn { background: var(--lt-surface); }
}

/* Sidebar */
.fi-sidebar { background: var(--lt-bg); }
.fi-sidebar-header { background: transparent !important; box-shadow: none !important; border: 0 !important; }
.fi-sidebar-nav { padding-inline: .5rem; row-gap: 1rem; }
.fi-sidebar-nav-groups { row-gap: 1rem; margin-inline: 0; }

.fi-sidebar-group-btn { padding: 0 .5rem; min-height: 2rem; }
.fi-sidebar-group-label {
    font-size: .75rem;
    font-weight: 500;
    color: var(--lt-muted-fg);
    text-transform: none;
    letter-spacing: 0;
}

.fi-sidebar-item-btn {
    gap: .5rem;
    padding: .375rem .5rem;
    min-height: 2rem;
    border-radius: .375rem;
    transition: background-color .15s, color .15s;
}
.fi-sidebar-item-btn:hover,
.fi-sidebar-item-btn:focus-visible { background: var(--lt-accent); }
.fi-sidebar-item-label {
    font-size: .875rem;
    font-weight: 400;
    color: var(--lt-sidebar-fg);
}
.fi-sidebar-item-icon {
    width: 1rem;
    height: 1rem;
    color: var(--lt-sidebar-fg);
    opacity: .85;
}
.fi-sidebar-item.fi-active > .fi-sidebar-item-btn { background: var(--lt-accent); }
.fi-sidebar-item.fi-active > .fi-sidebar-item-btn .fi-sidebar-item-label { font-weight: 500; color: var(--lt-fg); }
.fi-sidebar-item.fi-active > .fi-sidebar-item-btn .fi-sidebar-item-icon { color: var(--lt-fg); opacity: 1; }

/* Sidebar Fuss (Benutzer) wie im Dashboard */
.fi-sidebar-footer { padding: .5rem; border-top: 0; }

/* Seitenkopf wie im Dashboard */
.fi-header-heading { font-size: 1.5rem; line-height: 2rem; font-weight: 600; letter-spacing: -.015em; }
.fi-header-subheading { font-size: .875rem; color: var(--lt-muted-fg); }

/* Karten, Sections, Tabellen */
.fi-section, .fi-ta-ctn, .fi-wi-stats-overview-stat {
    border-radius: .75rem;
    box-shadow: 0 1px 2px 0 rgb(0 0 0 / .04);
    --tw-ring-color: var(--lt-border);
}

/* Unterseiten-Leiste (z. B. trbo → Einstellungen) links ausrichten wie die Kunden-Labels darunter */
.fi-page-sub-navigation-tabs { margin-inline: 0 !important; }