:root{--app-header-height:56px;--app-sidebar-width:280px}

html,body{min-height:100%}
body{overflow-x:hidden}
.app-sidebar,.app-sidebar *{box-sizing:border-box}

.app-sidebar{
    width:var(--app-sidebar-width);
    background:var(--bs-tertiary-bg);
    border-right:1px solid var(--bs-border-color);
    overflow-y:auto;
    overflow-x:hidden;
    box-shadow:2px 0 8px rgba(0,0,0,.06);
}

.app-sidebar-brand{display:flex;align-items:center;justify-content:center;width:100%;min-height:var(--app-header-height)}
.app-sidebar-brand img{display:block;max-width:100%;max-height:40px;width:auto;height:auto}

.app-sidebar .nav-link{
    color:var(--bs-body-color);
    border-radius:.75rem;
    margin-bottom:.15rem;
    transition:.2s;
}
.app-sidebar .nav-link:hover{background:rgba(var(--bs-primary-rgb),.08);color:var(--bs-primary)}
.app-sidebar .nav-link.active,
.app-sidebar .nav-link.nav-parent-active{
    background:rgba(var(--bs-primary-rgb),.12);
    color:var(--bs-primary);
    font-weight:600;
}

.nav-collapse-toggle .collapse-chevron{transition:transform .2s}
.nav-collapse-toggle[aria-expanded="true"] .collapse-chevron,
.rotate-90{transform:rotate(90deg)}

.app-header{
    position:fixed;
    top:0;
    left:var(--app-sidebar-width);
    right:0;
    height:var(--app-header-height);
    display:flex;
    align-items:center;
    background:var(--bs-body-bg);
    border-bottom:1px solid var(--bs-border-color);
    box-shadow:0 1px 4px rgba(0,0,0,.04);
    z-index:1030;
}

.app-header-brand{font-weight:700;letter-spacing:.2px;color:var(--bs-emphasis-color)}
.app-header-brand:hover{color:inherit}
.app-header-divider{width:1px;height:18px;margin:0 .75rem;background:var(--bs-border-color)}
.app-header-page-description{
    max-width:560px;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    font-size:.82rem;
    color:var(--bs-secondary-color);
}
.app-user-greeting{color:var(--bs-secondary-color)}

.app-theme-toggle{
    width:36px;
    height:36px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border:0;
    border-radius:50%;
    background:transparent;
    color:var(--bs-body-color);
}
.app-theme-toggle:hover{background:var(--bs-secondary-bg)}

.app-main{
    margin-left:var(--app-sidebar-width);
    padding-top:var(--app-header-height);
    min-height:100vh;
    background:var(--bs-secondary-bg);
}

.app-content-shell{min-width:0;padding:.75rem;background:var(--bs-secondary-bg)}

.app-page-surface{
    width:100%;
    min-width:0;
    overflow:hidden;
    max-width:calc(100vw - 320px);
    min-height:calc(100vh - var(--app-header-height) - 4.5rem);
    padding:1rem;
    background:var(--bs-body-bg);
    border:1px solid var(--bs-border-color);
    border-radius:1rem;
    box-shadow:var(--bs-box-shadow-sm);
}

[data-bs-theme="dark"] .app-sidebar{
    background:#1b1f24;
    border-right-color:#343a40;
    box-shadow:2px 0 12px rgba(0,0,0,.4);
}
[data-bs-theme="dark"] .app-main{background:#111418}
[data-bs-theme="dark"] .fl-table thead th{color:#fff}
[data-bs-theme="dark"] .table-wrapper::-webkit-scrollbar-thumb{background:#6c757d}

.fade-fast{transition:.2s}
.app-sidebar .nav-link:focus-visible,
.btn:focus-visible{
    outline:2px solid rgba(var(--bs-primary-rgb),.35);
    outline-offset:2px;
}

.app-footer{
    padding:.5rem;
    font-size:.875rem;
    color:var(--bs-secondary-color);
    background:var(--bs-body-bg);
}
.footer-content,.footer-links{
    display:flex;
    align-items:center;
    white-space:nowrap;
}
.footer-content{justify-content:center;gap:1rem}
.footer-links{gap:.5rem}
.footer-link{color:inherit;text-decoration:none}
.footer-link:hover{color:var(--bs-primary);text-decoration:underline}
.footer-separator{color:var(--bs-border-color)}
.footer-copyright{white-space:nowrap}

.offcanvas-lg.offcanvas-start{width:var(--app-sidebar-width);max-width:100%}
.offcanvas-body,.table-responsive{overflow-y:auto;overflow-x:auto}
.badge{font-weight:500}

.fl-table{
    width:100%;
    border-collapse:collapse;
    border:1px solid var(--bs-border-color);
    background:var(--bs-body-bg);
    color:var(--bs-body-color);
    font-size:.75rem;
    white-space:nowrap;
}
.fl-table th,.fl-table td{
    padding:.35rem .5rem;
    border:1px solid var(--bs-border-color);
    text-align:center;
    vertical-align:middle;
    white-space:nowrap;
}
.fl-table thead th{
    background:var(--bs-primary-bg-subtle);
    color:var(--bs-primary-text-emphasis);
    font-weight:600;
    border-bottom:1px solid var(--bs-border-color);
}
.fl-table tbody tr:hover{background:var(--bs-secondary-bg)}
.fl-table td{overflow:hidden;text-overflow:ellipsis}

.sidebar .nav-link svg{
    width:18px;
    height:18px;
    color:inherit;
    flex-shrink:0;
}

@media (min-width:992px){
    .app-sidebar{
        position:fixed!important;
        inset:0 auto 0 0;
        height:100vh;
        transform:none!important;
        visibility:visible!important;
        border:none;
        border-right:1px solid var(--bs-border-color);
        z-index:1035;
    }
    .app-main{margin-left:var(--app-sidebar-width)}
    .app-header{left:var(--app-sidebar-width)}
}

@media (max-width:991.98px){
    .app-main,.app-header{margin-left:0;left:0}
    .app-page-surface{max-width:calc(100vw - 40px);padding:.75rem;border-radius:.75rem}
    .app-header-divider,.app-header-page-description{display:none}
    .footer-content,.footer-links{justify-content:center;text-align:center}
}