:root{--sidebar-width:270px;--sidebar-collapsed-width:76px;--topbar-height:60px}
html,body{max-width:100%;overflow-x:hidden}body{background:#f4f7fb;color:#24324a}.app-topbar{position:fixed;inset:0 0 auto;height:var(--topbar-height);z-index:1045;box-shadow:0 2px 10px rgba(15,23,42,.12)}.app-topbar>.container-fluid{height:100%}.topbar-toggle{width:44px;height:44px;display:inline-grid;place-items:center;text-decoration:none}.navbar-brand{font-weight:700}.user-menu-toggle{max-width:min(55vw,420px);white-space:nowrap}.user-name{display:inline-block;max-width:220px;overflow:hidden;text-overflow:ellipsis;vertical-align:bottom}
.desktop-sidebar{position:fixed;top:var(--topbar-height);left:0;bottom:0;width:var(--sidebar-width);z-index:1030;padding:.75rem;background:#fff;border-right:1px solid #e5e9f0;box-shadow:2px 0 8px rgba(15,23,42,.03);overflow-x:hidden;overflow-y:auto;transition:width .2s ease}.mobile-sidebar{--bs-offcanvas-width:min(300px,88vw);z-index:1050}.mobile-sidebar .offcanvas-body{padding:.75rem;overflow-x:hidden;overflow-y:auto}
.sidebar-nav{gap:.2rem}.sidebar-nav .nav-link,.sidebar-nav .nav-group-toggle{display:flex;align-items:center;gap:.75rem;width:100%;min-height:44px;padding:.6rem .75rem;border:0!important;border-radius:.5rem!important;background-color:transparent;color:#475569;text-align:left;text-decoration:none;white-space:nowrap;box-shadow:none!important}.sidebar-nav .nav-link i,.sidebar-nav .nav-group-toggle>i:first-child{width:1.25rem;min-width:1.25rem;text-align:center;font-size:1.05rem}.sidebar-nav .nav-link:hover,.sidebar-nav .nav-group-toggle:hover{background-color:#eef4ff;color:#0d6efd}.sidebar-nav .nav-link.active{background-color:#0d6efd;color:#fff}.sidebar-nav .nav-group-toggle.active{background-color:#e7f0ff;color:#0b5ed7;font-weight:600}.nav-chevron{margin-left:auto;font-size:.75rem;transition:transform .2s}.nav-group-toggle[aria-expanded=true] .nav-chevron{transform:rotate(180deg)}.nav-children{display:flex;flex-direction:column;gap:.15rem;padding:.2rem 0 .4rem 1rem}.nav-children .nav-link{font-size:.92rem}
.app-main{display:block;min-width:0;width:calc(100% - var(--sidebar-width));min-height:calc(100vh - var(--topbar-height));margin-top:var(--topbar-height);margin-left:var(--sidebar-width);padding-top:0;transition:margin-left .2s ease,width .2s ease}.app-content{min-width:0;max-width:100%}.auth-main{min-height:100vh;background:linear-gradient(135deg,#eef4ff,#f8fafc)}
body.sidebar-collapsed .desktop-sidebar{width:var(--sidebar-collapsed-width)}body.sidebar-collapsed .app-main{margin-left:var(--sidebar-collapsed-width);width:calc(100% - var(--sidebar-collapsed-width))}body.sidebar-collapsed .desktop-sidebar .nav-label,body.sidebar-collapsed .desktop-sidebar .nav-chevron{display:none}body.sidebar-collapsed .desktop-sidebar .nav-link,body.sidebar-collapsed .desktop-sidebar .nav-group-toggle{justify-content:center;padding-inline:.5rem}body.sidebar-collapsed .desktop-sidebar .nav-children{padding-left:0}
.brand-icon{width:58px;height:58px;margin:auto;display:grid;place-items:center;border-radius:1rem;background:#0d6efd;color:#fff;font-size:1.6rem}.card{max-width:100%;border-radius:.75rem}.metric-card,.admin-card{border:0;box-shadow:0 3px 16px rgba(31,41,55,.06)}.metric-card{min-height:120px}.btn,.form-control,.form-select{border-radius:.5rem}.table-responsive{max-width:100%;margin-bottom:1rem}.table-responsive>.table{margin-bottom:0}.table td{vertical-align:middle}.status-ACTIVE{background:#dcfce7;color:#166534}.status-INACTIVE{background:#e2e8f0;color:#475569}.status-BLOCKED{background:#fee2e2;color:#991b1b}.dt-container{max-width:100%;overflow:hidden}.dt-layout-row{max-width:100%;gap:.5rem}.btn{white-space:normal}
@media(max-width:991.98px){.app-main{width:100%;margin-left:0}.app-content{padding-left:.75rem;padding-right:.75rem}.nav-children{padding-left:.75rem}.user-name{max-width:34vw}}
@media(max-width:575.98px){h1.h3{font-size:1.35rem}.display-6{font-size:1.75rem}.card-body{padding:1rem}.row>[class*=col-]{min-width:0}.d-flex.justify-content-between{gap:.75rem;flex-wrap:wrap}.d-flex.justify-content-between>.btn,.d-flex.justify-content-between>a.btn{width:100%}.dt-layout-row{display:flex!important;flex-direction:column;align-items:stretch!important}.dt-search,.dt-length{width:100%;text-align:left!important}.dt-search input,.dt-length select{max-width:100%}.input-group{flex-wrap:wrap}.user-menu-toggle{padding-inline:.4rem}.user-menu-toggle small{display:none!important}}
@media(prefers-reduced-motion:reduce){.desktop-sidebar,.app-main,.nav-chevron{transition:none}}