.sidebar{ width:220px; min-height:100vh; }
.sidebar .nav-link{ color:#333 }
.sidebar .nav-link:hover{ background:#f8f9fa }
#page-root{ min-height:100vh }

html, body{ overflow-x:hidden; max-width:100%; }

/* Enterprise layout styles */
.app-shell{ min-height:100vh; max-width:100vw; overflow-x:hidden; }
.app-sidebar{ width:260px; flex-shrink:0; transition:width .2s ease; height:100vh; position:sticky; top:0; overflow:hidden; }
.app-sidebar #sidebarMenu{ flex:1 1 auto; min-height:0; overflow-y:auto; overflow-x:hidden; }
.app-sidebar.collapsed{ width:72px; }
.app-sidebar.collapsed .sidebar-brand{ justify-content:center; }
.app-sidebar.collapsed .sidebar-brand-text,
.app-sidebar.collapsed .sidebar-user,
.app-sidebar.collapsed .sidebar-footer,
.app-sidebar.collapsed .sidebar-brand small {
    display:none !important;
}
.app-sidebar.collapsed .sidebar-brand button{
    margin-left:0;
}
.app-sidebar.collapsed .nav-link{
    justify-content:center;
    padding-left:0.75rem !important;
}
.app-sidebar .sidebar-brand h5, .app-sidebar .sidebar-user{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.app-sidebar .sidebar-logo{
    width: 48px;
    height: 38px;
    object-fit: cover;
    border-radius: 6px;
    background: #fff;
    display:block;
}
.app-sidebar .sidebar-brand-text h5,
.app-sidebar .sidebar-brand-text small{
    color:#ffffff;
}
.app-sidebar .menu-group-header{ gap:0.5rem; cursor: pointer; }
.app-sidebar .menu-group-header:hover .nav-link{
    background: rgba(255,255,255,0.08);
}
.app-sidebar .menu-group-header .nav-link{ margin:0; }
.app-sidebar .btn-toggle{
    border: none;
    background: transparent;
    color: #ffffff;
    min-width: 32px;
    padding: 0.25rem;
}
.app-sidebar .btn-toggle:hover{
    color: #0d6efd;
}
.app-sidebar .toggle-icon{
    display: inline-block;
    transition: transform 0.2s ease;
}
.app-sidebar .menu-group.expanded > .menu-group-header .toggle-icon{
    transform: rotate(90deg);
}
.app-sidebar .submenu{
    display: none;
}
.app-sidebar .menu-group.expanded .submenu{
    display: block;
}
.app-sidebar .submenu .nav-link{
    padding-left: 2.5rem !important;
}
.app-sidebar .nav-link{ 
    color: #ffffff !important; 
    padding: 0 0.75rem !important;
    display: flex !important;
    align-items: center;
    gap: 0.5rem;
    height: 44px;
    border-left: 3px solid transparent;
    transition: background .12s ease, border-color .12s ease;
    font-size: 14px;
    font-weight: 400;
    white-space: nowrap;
}
.app-sidebar .nav-link span{
    color: #ffffff !important;
    display: inline;
    white-space: normal;
}
.app-sidebar .nav-link:hover{ 
    background: rgba(255,255,255,0.1) !important;
    border-left-color: #fff;
}
.app-sidebar .nav-link.active{
    background: rgba(255,255,255,0.15) !important;
    border-left-color: #0d6efd;
    font-weight: 500;
}
.app-sidebar .nav-link i{
    color: #ffffff;
}
.menu-icon{
    width: 20px;
    height: 20px;
    object-fit: contain;
    filter: invert(1) brightness(2);
}
.menu-title{ display: inline-block; }
.app-sidebar.collapsed .menu-title{ display: none !important; }

/* Keep search visible when collapsed and small */
.app-sidebar .sidebar-search{ padding: .5rem 1rem; }
.app-sidebar.collapsed .sidebar-search{ padding: .25rem 0.5rem; }
.app-sidebar.collapsed .sidebar-search input{ width: 36px; padding: 6px; }

/* Position sidebar toggle so it's always visible */
.app-sidebar .sidebar-brand{ position: relative; }
.app-sidebar .sidebar-brand #sidebarToggle{ position: absolute; right: 8px; top: 8px; z-index: 20; }
.app-sidebar.collapsed .sidebar-brand #sidebarToggle{ right: 6px; }
.app-content{ background:#f6f7fb; min-height:100vh; min-width:0; }
.app-header{ z-index:10 }

/* Prevent wide tables (e.g. report results) from stretching the page layout;
   the .table-responsive wrapper scrolls horizontally instead. */
.app-main{ min-width:0; max-width:100%; overflow-x:hidden; }
.app-main .table-responsive{ max-width:100%; overflow-x:auto; }

/* Report results can have a dynamic, unbounded number of columns — let the
   table size to its natural content width and scroll within the card
   instead of stretching/compressing to the page width. Other index-page
   tables keep their normal full-width layout. */
.app-main .report-results-table{ width:max-content; max-width:none; }

/* Login page styles */
.login-layout{ background: linear-gradient(135deg, #0f172a 0%, #1d2939 100%); color:#fff; }
.login-page{ width:100%; max-width:640px; padding:1.5rem; }
.login-card{ width:100%; max-width:520px; }
.login-form-wrapper{ width:100%; max-width:480px; margin:0 auto; }
.login-logo{ max-width: 120px; }
.login-brand h1, .login-brand p{ color:#f8fafc; }
.login-card .card-body{ padding: 1.5rem; }
.login-card .form-control{ min-width: 0; }

@media (max-width: 575.98px) {
    .login-page {
        padding: 1rem;
        min-height: 100vh;
    }
    .login-card {
        max-width: 100%;
        margin: 0;
        box-shadow: none;
    }
    .login-form-wrapper {
        max-width: 100%;
        padding: 0 0.5rem;
    }
    .login-card .card-body {
        padding: 1.25rem;
    }
    .login-brand {
        margin-bottom: 1.5rem;
    }
    .login-logo {
        max-width: 100px;
    }
}

/* Mobile behaviour */
@media (max-width: 767.98px){
    .app-sidebar{ position:fixed; left:-300px; top:0; bottom:0; z-index:1050; }
    .app-sidebar.show-mobile{ left:0; }
    .app-content{ margin-left:0; }
}

/* Color picker tweaks */
.form-control-color{ padding:.125rem .25rem; }

/* Menu tree / user rights tree */
.menu-tree-row{ padding:.25rem .25rem; border-radius:.25rem; cursor:default; }
.menu-tree-row:hover{ background-color:var(--bs-tertiary-bg, #f1f3f5); }
.menu-tree-row.selected{ background-color:var(--bs-primary-bg-subtle, #cfe2ff); }
.menu-tree-label{ cursor:pointer; }
.menu-tree-toggle{ cursor:pointer; width:1.25rem; text-align:center; user-select:none; }
.menu-tree-toggle-placeholder{ display:inline-block; width:1.25rem; }
.rights-tree-row{ padding:.25rem 0; border-bottom:1px solid var(--bs-border-color, #dee2e6); }

/* Mobile behaviour */
@media (max-width: 767.98px){
    .app-sidebar{ position:fixed; left:-300px; top:0; bottom:0; z-index:1050; }
    .app-sidebar.show-mobile{ left:0; }
    .app-content{ margin-left:0; }
}