/*------------------------------------------------------------------
[Template Layout 11 CSS]

Template:       DashQ - Multipurpose Bootstrap 5 HTML Admin & Dashboard Template
Version:        1.0.0
Last change:    03 April, 2026
-------------------------------------------------------------------*/
[data-bs-theme="light"] {
    .layout-11,
    .layout-11 header {
        background-color: var(--bs-gray-100);
    }
}

/*=============== Main layout css */
.layout-11 {
    background-color: var(--bs-body-bg);
    height: 100%;
}

.layout-11.bg-image header,
.layout-11.bg-image .page-header {
    background: rgba(var(--bs-card-bg-rgb), .3);
    backdrop-filter: blur(20px) saturate(100%);
}

/* =============== grid layout css */
.layout-11 .app-wrapper {
    display: grid;
    grid-template-columns: auto;
    grid-template-rows: 60px auto 1fr auto;
    min-height: 100vh;
    padding: 0;
    gap: 0;
    grid-template-areas:
        "header"
        "page-header"
        "main"
        "footer";
}

.layout-11 header {
    grid-area: header;
}

.layout-11 .page-header {
    grid-area: page-header;
}

.layout-11 main {
    grid-area: main;
}

.layout-11 footer {
    grid-area: footer;
}

.icon-button {
    height: 34px;
    width: 34px;
    padding: 0;
}

.icon-button:hover {
    background: rgba(var(--bs-primary-rgb), .2);
    color: var(--bs-primary);
}

.chevron {
    transition: transform 0.15s ease-in-out;
}

.collapse-toggle[aria-expanded="true"] .chevron {
    transform: rotate(90deg);
}

.glass-effect .page-breadcrumb {
    background: rgba(var(--bs-card-bg-rgb), .3);
    backdrop-filter: blur(20px) saturate(100%);
}

.tab-menu a {
    text-decoration: none;
    color: inherit;
    position: relative;
}

.tab-menu a::before {
    content: '';
    width: 3px;
    height: 24px;
    left: -10px;
    top: 8px;
    position: absolute;
}

.tab-menu a.active::before,
.tab-menu li:hover a::before {
    background: var(--bs-primary);
}

.tab-menu a.active,
.tab-menu li:hover a {
    color: var(--bs-primary);
}

@media (max-width: 991.98px) { 
    .body-layout .body-sidebar{
        border: 0 !important;
    }
}