/* App shell layout + sidebar collapse (Bootstrap theme-variable friendly) */

:root {
    --sidebar-w: 260px;
    --sidebar-w-collapsed: 72px;
    --app-header-h: 84px;
}

.app-header {
    background: var(--bs-body-bg);
}

/* Layout wrapper you add in _Layout.cshtml */
.app-shell {
    display: grid;
    grid-template-columns: var(--sidebar-w) minmax(0, 1fr);
    min-height: calc(100vh - var(--app-header-h));
    width: 100%;
}

.app-sidebar {
    width: var(--sidebar-w);
    border-right: 1px solid var(--bs-border-color);
    background: var(--bs-body-bg);
    position: sticky;
    top: 0;
    height: calc(100vh - var(--app-header-h));
    overflow-y: auto;
    transition: width 180ms ease;
}

.app-main {
    padding: 12px;
    background: var(--bs-tertiary-bg);
    min-width: 0; /* KEY: allows main to expand/contract with grid */
    width: 100%;
}

.app-logo {
    height: 42px;
    width: auto;
    object-fit: contain;
    display: block;
}

/* show light-theme logo by default */
.logo-dark {
    display: none;
}

/* when dark theme -> show dark-theme logo */
html[data-bs-theme="dark"] .logo-light {
    display: none;
}

html[data-bs-theme="dark"] .logo-dark {
    display: block;
}

    /* Kill common extra spacing patterns inside main */
    .app-main .container,
    .app-main .container-fluid {
        margin-top: 0 !important;
    }

/* Dark theme: give logo a subtle backing so it pops */
/*html[data-bs-theme="dark"] .app-logo {
    padding: 6px 8px;
    border-radius: 10px;
    background: rgba(255,255,255,0.10);*/
    /* optional: slight boost without distorting colors too much */
    /*filter: brightness(1.08) contrast(1.05);
}*/

/* Collapsed mode */
body.sidebar-collapsed .app-shell {
    grid-template-columns: var(--sidebar-w-collapsed) minmax(0, 1fr);
}

body.sidebar-collapsed .app-sidebar {
    width: var(--sidebar-w-collapsed);
}

    body.sidebar-collapsed .app-sidebar .nav-text {
        display: none;
    }