/* 1. Design Tokens */
:root{
    --bb-navy:#071B3A;
    --bb-navy-2:#0D2A52;
    --bb-primary:#1769AA;
    --bb-primary-hover:#12588F;
    --bb-primary-light:#6CB7E6;
    --bb-cyan:#35B9D1;
    --bb-bg:#F4F7FB;
    --bb-surface:#FFFFFF;
    --bb-surface-soft:#F8FAFC;
    --bb-border:#DEE5EE;
    --bb-border-strong:#C7D3E3;
    --bb-text:#172033;
    --bb-text-muted:#667085;
    --bb-success:#4F9E44;
    --bb-warning:#C88922;
    --bb-danger:#B42318;
    --bb-danger-hover:#941B13;
    --bb-focus:rgba(53,185,209,.32);
    --bb-sidebar-hover:rgba(255,255,255,.08);
    --bb-sidebar-active:rgba(53,185,209,.14);
    --bb-shadow-sm:0 1px 2px rgba(16,24,40,.06);
    --bb-shadow-md:0 10px 24px rgba(16,24,40,.08);
    --bb-space-1:4px;
    --bb-space-2:8px;
    --bb-space-3:12px;
    --bb-space-4:16px;
    --bb-space-5:20px;
    --bb-space-6:24px;
    --bb-space-8:32px;
    --bb-space-10:40px;
    --bb-space-12:48px;
    --bb-radius-sm:6px;
    --bb-radius:8px;
    --bb-radius-lg:12px;
    --bb-sidebar-width:264px;
    --bb-sidebar-collapsed-width:72px;
    --bb-topbar-height:68px;
    --bb-viewer-header-height:64px;
    --bb-font:Inter,"Segoe UI",Roboto,Arial,sans-serif;
}

/* 2. Reset / Base */
*{
    box-sizing:border-box;
}

html{
    min-height:100%;
}

body{
    margin:0;
    min-height:100vh;
    background:var(--bb-bg);
    color:var(--bb-text);
    font-family:var(--bb-font);
    font-size:15px;
    line-height:1.5;
}

img,
svg{
    display:block;
}

a{
    color:inherit;
}

button,
input,
select,
textarea{
    font:inherit;
}

button{
    border:0;
}

/* 3. Typography */
h1,
h2,
h3,
p{
    margin:0;
}

.page-title{
    font-size:24px;
    line-height:1.25;
    font-weight:700;
    color:var(--bb-text);
}

.page-description{
    margin-top:var(--bb-space-1);
    color:var(--bb-text-muted);
    font-size:14px;
}

/* 4. App Shell */
.app-shell{
    min-height:100vh;
    min-height:100dvh;
    display:flex;
    background:var(--bb-bg);
    overflow:hidden;
}

.app-content{
    flex:1;
    min-width:0;
    min-height:100vh;
    min-height:100dvh;
    display:flex;
    flex-direction:column;
}

.app-main{
    flex:1;
    min-height:0;
    min-width:0;
    overflow:auto;
}

.page-container{
    width:100%;
    max-width:1400px;
    margin:0 auto;
    padding:var(--bb-space-8);
}

.page-container-narrow{
    max-width:920px;
}

.page-heading{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:var(--bb-space-4);
    margin-bottom:var(--bb-space-6);
}

/* 5. Sidebar */
.app-sidebar{
    width:var(--bb-sidebar-width);
    flex:0 0 var(--bb-sidebar-width);
    min-height:100vh;
    min-height:100dvh;
    background:linear-gradient(180deg,var(--bb-navy),var(--bb-navy-2));
    color:#E7EFFA;
    display:flex;
    flex-direction:column;
    border-right:1px solid rgba(255,255,255,.08);
    z-index:40;
    transition:flex-basis .18s ease,width .18s ease,transform .18s ease;
}

.sidebar-brand{
    min-height:86px;
    display:flex;
    align-items:center;
    justify-content:flex-start;
    gap:var(--bb-space-3);
    padding:var(--bb-space-5);
    border-bottom:1px solid rgba(255,255,255,.08);
}

.sidebar-brand-link{
    display:flex;
    align-items:center;
    justify-content:flex-start;
    gap:var(--bb-space-3);
    width:190px;
    height:50px;
    min-width:0;
    overflow:hidden;
    border-radius:var(--bb-radius);
    background:transparent;
    color:#F8FAFC;
    text-decoration:none;
}

.sidebar-brand-mark{
    display:block;
    width:38px;
    height:38px;
    flex:0 0 38px;
    object-fit:contain;
    object-position:center;
    background:transparent;
    border:0;
    box-shadow:none;
}

.sidebar-brand-name{
    min-width:0;
    overflow:hidden;
    color:#F8FAFC;
    font-size:18px;
    line-height:1;
    font-weight:700;
    letter-spacing:.01em;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.sidebar-nav{
    flex:1;
    min-height:0;
    overflow:auto;
    padding:var(--bb-space-5) var(--bb-space-4);
}

.nav-section + .nav-section{
    margin-top:var(--bb-space-6);
}

.nav-section-label{
    margin:0 0 var(--bb-space-2) var(--bb-space-2);
    color:#9FB2CC;
    font-size:11px;
    line-height:1;
    font-weight:700;
    letter-spacing:.08em;
    text-transform:uppercase;
}

.nav-link{
    position:relative;
    display:flex;
    align-items:center;
    gap:var(--bb-space-3);
    min-height:40px;
    padding:var(--bb-space-2) var(--bb-space-3);
    color:#D8E6F7;
    text-decoration:none;
    border-radius:var(--bb-radius-sm);
    font-size:14px;
    font-weight:500;
    transition:background-color .16s ease,color .16s ease;
}

.nav-link:hover{
    background:var(--bb-sidebar-hover);
    color:#FFFFFF;
}

.nav-link.is-active{
    background:var(--bb-sidebar-active);
    color:#FFFFFF;
}

.nav-link.is-active::before{
    content:"";
    position:absolute;
    left:0;
    top:8px;
    bottom:8px;
    width:3px;
    border-radius:999px;
    background:var(--bb-cyan);
}

.nav-icon{
    width:20px;
    height:20px;
    flex:0 0 20px;
    color:currentColor;
}

.nav-icon svg,
.btn-icon svg,
.account-icon svg,
.report-empty-icon svg,
.btn-icon-inline svg,
.stat-icon svg,
.permission-item-icon svg,
.modal-danger-icon svg,
.alert-icon svg,
.search-icon svg{
    width:100%;
    height:100%;
    fill:none;
    stroke:currentColor;
    stroke-width:1.8;
    stroke-linecap:round;
    stroke-linejoin:round;
}

.nav-text{
    min-width:0;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.sidebar-footer{
    padding:var(--bb-space-4);
    border-top:1px solid rgba(255,255,255,.08);
}

.account-card{
    display:flex;
    align-items:center;
    gap:var(--bb-space-3);
    padding:var(--bb-space-3);
    margin-bottom:var(--bb-space-3);
    border:1px solid rgba(255,255,255,.10);
    border-radius:var(--bb-radius);
    background:rgba(255,255,255,.06);
}

.account-icon{
    width:20px;
    height:20px;
    flex:0 0 20px;
    color:#B9DDF3;
}

.account-details{
    min-width:0;
    display:block;
}

.account-name,
.account-role{
    display:block;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.account-name{
    color:#FFFFFF;
    font-size:13px;
    font-weight:700;
}

.account-role{
    color:#AFC1D9;
    font-size:12px;
}

.nav-link-logout{
    color:#F9D4D0;
}

.nav-link-logout:hover{
    background:rgba(180,35,24,.18);
    color:#FFFFFF;
}

.sidebar-backdrop{
    display:none;
}

/* 6. Top Bar */
.app-topbar{
    height:var(--bb-topbar-height);
    min-height:var(--bb-topbar-height);
    display:flex;
    align-items:center;
    gap:var(--bb-space-4);
    padding:0 var(--bb-space-6);
    background:rgba(255,255,255,.96);
    border-bottom:1px solid var(--bb-border);
    box-shadow:var(--bb-shadow-sm);
    z-index:20;
}

.topbar-title-block{
    min-width:0;
    flex:1;
}

.topbar-context{
    margin-bottom:2px;
    color:var(--bb-text-muted);
    font-size:12px;
    font-weight:700;
    letter-spacing:.06em;
    text-transform:uppercase;
}

.topbar-title{
    min-width:0;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    color:var(--bb-text);
    font-size:21px;
    line-height:1.2;
    font-weight:700;
}

.topbar-user{
    display:flex;
    align-items:center;
    gap:var(--bb-space-2);
    min-width:0;
}

.topbar-user-name{
    max-width:180px;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    color:var(--bb-text-muted);
    font-size:13px;
    font-weight:600;
}

.menu-toggle,
.btn.sidebar-close{
    display:none;
}

.sidebar-collapse-toggle{
    display:inline-flex;
}

html.sidebar-collapsed .app-sidebar,
body.sidebar-collapsed .app-sidebar{
    width:var(--bb-sidebar-collapsed-width);
    flex-basis:var(--bb-sidebar-collapsed-width);
}

html.sidebar-collapsed .sidebar-brand,
body.sidebar-collapsed .sidebar-brand{
    justify-content:center;
    padding:var(--bb-space-4) var(--bb-space-2);
}

html.sidebar-collapsed .sidebar-brand-link,
body.sidebar-collapsed .sidebar-brand-link{
    width:44px;
    height:44px;
    justify-content:center;
    gap:0;
    overflow:visible;
    border-radius:var(--bb-radius);
    background:transparent;
}

html.sidebar-collapsed .sidebar-brand-mark,
body.sidebar-collapsed .sidebar-brand-mark{
    width:34px;
    height:34px;
    flex-basis:34px;
}

html.sidebar-collapsed .sidebar-nav,
body.sidebar-collapsed .sidebar-nav{
    padding:var(--bb-space-4) var(--bb-space-2);
}

html.sidebar-collapsed .sidebar-brand-name,
body.sidebar-collapsed .sidebar-brand-name{
    display:none;
}

html.sidebar-collapsed .nav-section-label,
html.sidebar-collapsed .nav-text,
html.sidebar-collapsed .account-details,
body.sidebar-collapsed .nav-section-label,
body.sidebar-collapsed .nav-text,
body.sidebar-collapsed .account-details{
    position:absolute;
    width:1px;
    height:1px;
    padding:0;
    margin:-1px;
    overflow:hidden;
    clip:rect(0,0,0,0);
    white-space:nowrap;
    border:0;
}

html.sidebar-collapsed .nav-link,
body.sidebar-collapsed .nav-link{
    justify-content:center;
    padding:var(--bb-space-2);
}

html.sidebar-collapsed .nav-link.is-active::before,
body.sidebar-collapsed .nav-link.is-active::before{
    top:7px;
    bottom:7px;
}

html.sidebar-collapsed .sidebar-footer,
body.sidebar-collapsed .sidebar-footer{
    padding:var(--bb-space-3) var(--bb-space-2);
}

html.sidebar-collapsed .account-card,
body.sidebar-collapsed .account-card{
    justify-content:center;
    padding:var(--bb-space-2);
}

/* 7. Buttons */
.btn{
    min-height:38px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:var(--bb-space-2);
    padding:0 var(--bb-space-4);
    border:1px solid transparent;
    border-radius:var(--bb-radius);
    background:transparent;
    color:var(--bb-text);
    text-decoration:none;
    font-size:14px;
    font-weight:700;
    line-height:1;
    cursor:pointer;
    transition:background-color .16s ease,border-color .16s ease,color .16s ease,box-shadow .16s ease;
}

.btn:hover{
    text-decoration:none;
}

.btn:focus-visible,
.nav-link:focus-visible,
.sidebar-brand-link:focus-visible,
.form-control:focus-visible,
.form-select:focus-visible,
.checkbox input:focus-visible{
    outline:3px solid var(--bb-focus);
    outline-offset:2px;
}

.btn-primary{
    background:var(--bb-primary);
    border-color:var(--bb-primary);
    color:#FFFFFF;
}

.btn-primary:hover{
    background:var(--bb-primary-hover);
    border-color:var(--bb-primary-hover);
}

.btn-secondary{
    background:var(--bb-surface);
    border-color:var(--bb-border-strong);
    color:var(--bb-text);
}

.btn-secondary:hover{
    background:var(--bb-surface-soft);
    border-color:var(--bb-primary-light);
}

.btn-ghost{
    color:var(--bb-text-muted);
}

.btn-ghost:hover{
    background:var(--bb-surface-soft);
    color:var(--bb-text);
}

.btn-danger{
    background:var(--bb-danger);
    border-color:var(--bb-danger);
    color:#FFFFFF;
}

.btn-danger:hover{
    background:var(--bb-danger-hover);
    border-color:var(--bb-danger-hover);
}

.btn-icon{
    width:40px;
    min-width:40px;
    height:40px;
    padding:0;
}

.btn-sm{
    min-height:32px;
    padding:0 var(--bb-space-3);
    font-size:13px;
}

.btn-icon-inline{
    width:16px;
    height:16px;
    flex:0 0 16px;
    color:currentColor;
}

.btn:disabled,
.btn[aria-disabled="true"]{
    cursor:not-allowed;
    opacity:.55;
}

/* 8. Forms */
.form-panel{
    overflow:hidden;
}

.form-group{
    margin-bottom:var(--bb-space-5);
}

.form-group:last-child{
    margin-bottom:0;
}

.form-label{
    display:block;
    margin-bottom:var(--bb-space-2);
    color:var(--bb-text);
    font-size:14px;
    font-weight:700;
}

.form-control,
.form-select{
    width:100%;
    min-height:42px;
    padding:0 var(--bb-space-3);
    border:1px solid var(--bb-border-strong);
    border-radius:var(--bb-radius);
    background:var(--bb-surface);
    color:var(--bb-text);
    font-size:15px;
    transition:border-color .16s ease,box-shadow .16s ease;
}

.form-control::placeholder{
    color:#98A2B3;
}

.form-control:focus,
.form-select:focus{
    border-color:var(--bb-primary);
    box-shadow:0 0 0 3px var(--bb-focus);
    outline:0;
}

.form-control:disabled,
.form-select:disabled{
    background:#EEF2F7;
    color:var(--bb-text-muted);
    cursor:not-allowed;
}

.form-help,
.form-error{
    margin-top:var(--bb-space-2);
    font-size:13px;
}

.form-help{
    color:var(--bb-text-muted);
}

.form-error{
    color:var(--bb-danger);
}

.form-actions{
    display:flex;
    align-items:center;
    gap:var(--bb-space-3);
    flex-wrap:wrap;
    padding:var(--bb-space-5) var(--bb-space-6);
    border-top:1px solid var(--bb-border);
    background:var(--bb-surface-soft);
}

.form-section-title{
    margin-bottom:var(--bb-space-3);
    font-size:15px;
    font-weight:700;
}

.checkbox-group{
    display:grid;
    gap:var(--bb-space-2);
}

.checkbox{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:var(--bb-space-3);
    min-height:40px;
    padding:var(--bb-space-2) var(--bb-space-3);
    border:1px solid var(--bb-border);
    border-radius:var(--bb-radius);
    background:var(--bb-surface);
    color:var(--bb-text);
    cursor:pointer;
}

.checkbox:hover{
    border-color:var(--bb-primary-light);
    background:var(--bb-surface-soft);
}

.checkbox input{
    width:16px;
    height:16px;
    flex:0 0 16px;
    accent-color:var(--bb-primary);
}

/* 9. Cards / Panels */
.panel,
.stat-card{
    background:var(--bb-surface);
    border:1px solid var(--bb-border);
    border-radius:var(--bb-radius-lg);
    box-shadow:var(--bb-shadow-sm);
}

.panel-header{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:var(--bb-space-4);
    padding:var(--bb-space-5) var(--bb-space-6);
    border-bottom:1px solid var(--bb-border);
}

.panel-title{
    color:var(--bb-text);
    font-size:17px;
    line-height:1.3;
    font-weight:700;
}

.panel-description{
    margin-top:var(--bb-space-1);
    color:var(--bb-text-muted);
    font-size:13px;
}

.panel-body{
    padding:var(--bb-space-6);
}

.stats-grid{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:var(--bb-space-4);
    margin-bottom:var(--bb-space-6);
}

.stat-card{
    padding:var(--bb-space-5);
}

.stat-label{
    color:var(--bb-text-muted);
    font-size:13px;
    font-weight:700;
}

.stat-value{
    margin-top:var(--bb-space-2);
    color:var(--bb-text);
    font-size:30px;
    line-height:1;
    font-weight:800;
}

/* 10. Tables */
.table-shell{
    width:100%;
    overflow-x:auto;
}

.data-table{
    width:100%;
    min-width:760px;
    border-collapse:collapse;
    background:var(--bb-surface);
    font-size:14px;
}

.data-table th,
.data-table td{
    padding:13px var(--bb-space-4);
    border-bottom:1px solid var(--bb-border);
    text-align:left;
    vertical-align:middle;
}

.data-table th{
    background:var(--bb-surface-soft);
    color:var(--bb-text-muted);
    font-size:12px;
    font-weight:800;
    letter-spacing:.04em;
    text-transform:uppercase;
}

.data-table tbody tr:hover{
    background:#FBFCFE;
}

.data-table tbody tr:last-child td{
    border-bottom:0;
}

.is-numeric{
    text-align:right !important;
}

.action-column{
    width:190px;
}

.table-actions{
    display:flex;
    align-items:center;
    gap:var(--bb-space-2);
    flex-wrap:wrap;
}

.table-actions form{
    margin:0;
}

/* 11. Badges */
.badge{
    display:inline-flex;
    align-items:center;
    min-height:22px;
    padding:0 var(--bb-space-2);
    border-radius:999px;
    border:1px solid transparent;
    font-size:12px;
    font-weight:800;
    line-height:1;
    white-space:nowrap;
}

.badge-admin{
    background:rgba(23,105,170,.10);
    border-color:rgba(23,105,170,.18);
    color:var(--bb-primary);
}

.badge-manager,
.badge-muted{
    background:#EEF2F7;
    border-color:#E3E9F2;
    color:#475467;
}

.badge-success{
    background:rgba(79,158,68,.10);
    border-color:rgba(79,158,68,.18);
    color:var(--bb-success);
}

/* 12. Alerts / Feedback */
.alert{
    display:flex;
    align-items:flex-start;
    gap:var(--bb-space-2);
    margin-bottom:var(--bb-space-4);
    padding:var(--bb-space-3) var(--bb-space-4);
    border:1px solid transparent;
    border-radius:var(--bb-radius);
    font-size:14px;
    font-weight:600;
}

.alert-icon{
    width:18px;
    height:18px;
    flex:0 0 18px;
    margin-top:1px;
}

.alert-success{
    background:rgba(79,158,68,.10);
    border-color:rgba(79,158,68,.25);
    color:#2F6E29;
}

.alert-error{
    background:rgba(180,35,24,.08);
    border-color:rgba(180,35,24,.22);
    color:var(--bb-danger);
}

.alert-warning{
    background:rgba(200,137,34,.10);
    border-color:rgba(200,137,34,.24);
    color:#875B17;
}

.alert-info{
    background:rgba(23,105,170,.09);
    border-color:rgba(23,105,170,.22);
    color:var(--bb-primary);
}

/* 13. Dashboard Viewer Foundations */
.dashboard-page .app-main{
    overflow:hidden;
}

.dashboard-viewer{
    height:100vh;
    height:100dvh;
    min-height:0;
    display:flex;
    flex-direction:column;
    background:var(--bb-surface);
}

.viewer-header{
    height:var(--bb-viewer-header-height);
    min-height:var(--bb-viewer-header-height);
    display:flex;
    align-items:center;
    gap:var(--bb-space-3);
    padding:0 var(--bb-space-5);
    background:var(--bb-surface);
    border-bottom:1px solid var(--bb-border);
}

.viewer-title-block{
    flex:1;
    min-width:0;
}

.viewer-context{
    margin-bottom:2px;
    color:var(--bb-text-muted);
    font-size:11px;
    font-weight:800;
    letter-spacing:.07em;
    line-height:1;
    text-transform:uppercase;
}

.viewer-title{
    min-width:0;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    color:var(--bb-text);
    font-size:20px;
    line-height:1.2;
    font-weight:700;
}

.viewer-actions{
    display:flex;
    align-items:center;
    gap:var(--bb-space-2);
    flex:0 0 auto;
}

.viewer-action{
    color:var(--bb-text-muted);
    background:var(--bb-surface);
    border-color:var(--bb-border);
}

.viewer-action:hover{
    color:var(--bb-primary);
    border-color:var(--bb-primary-light);
    background:var(--bb-surface-soft);
}

.report-workspace{
    position:relative;
    flex:1;
    min-height:0;
    overflow:hidden;
    background:#E9EEF5;
}

.report-frame-shell{
    position:relative;
    width:100%;
    height:100%;
    overflow:hidden;
    background:#101828;
}

.report-frame-shell:fullscreen{
    width:100vw;
    height:100vh;
    background:#101828;
}

.powerbi-frame{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    border:0;
    display:block;
    background:var(--bb-surface);
    touch-action:auto;
}

.powerbi-frame[hidden]{
    display:none;
}

.report-loading{
    position:absolute;
    inset:0;
    display:none;
    align-items:center;
    justify-content:center;
    flex-direction:column;
    gap:var(--bb-space-3);
    padding:var(--bb-space-6);
    background:rgba(248,250,252,.92);
    color:var(--bb-text-muted);
    text-align:center;
    z-index:3;
}

.report-loading.is-visible{
    display:flex;
}

.report-loading p{
    color:var(--bb-text-muted);
    font-size:14px;
    font-weight:700;
}

.report-loading.is-long-loading p{
    color:var(--bb-text);
}

.loading-spinner{
    width:30px;
    height:30px;
    border:3px solid rgba(23,105,170,.18);
    border-top-color:var(--bb-primary);
    border-radius:50%;
    animation:bb-spin .8s linear infinite;
}

.loading-reload{
    margin-top:var(--bb-space-1);
}

.report-empty{
    flex:1;
    min-height:0;
    display:flex;
    align-items:center;
    justify-content:center;
    flex-direction:column;
    padding:var(--bb-space-8);
    background:var(--bb-bg);
    text-align:center;
}

.report-empty-icon{
    width:44px;
    height:44px;
    margin-bottom:var(--bb-space-4);
    color:var(--bb-primary);
}

.report-empty h2{
    margin-bottom:var(--bb-space-2);
    color:var(--bb-text);
    font-size:22px;
    font-weight:700;
}

.report-empty p{
    max-width:440px;
    color:var(--bb-text-muted);
    font-size:15px;
}

@keyframes bb-spin{
    to{
        transform:rotate(360deg);
    }
}

/* 14. Admin Foundations */
.admin-page .app-main{
    background:var(--bb-bg);
}

.admin-console{
    display:grid;
    gap:var(--bb-space-6);
}

.admin-page-header{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:var(--bb-space-5);
}

.eyebrow{
    margin-bottom:var(--bb-space-1);
    color:var(--bb-primary);
    font-size:12px;
    font-weight:800;
    letter-spacing:.08em;
    text-transform:uppercase;
}

.admin-stats{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:var(--bb-space-4);
}

.stat-card-compact{
    display:grid;
    grid-template-columns:auto 1fr;
    grid-template-areas:
        "icon label"
        "icon value";
    column-gap:var(--bb-space-3);
    align-items:center;
    padding:var(--bb-space-4);
}

.stat-icon{
    grid-area:icon;
    width:36px;
    height:36px;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:var(--bb-space-2);
    border:1px solid rgba(23,105,170,.14);
    border-radius:var(--bb-radius);
    background:rgba(23,105,170,.08);
    color:var(--bb-primary);
}

.stat-card-compact .stat-label{
    grid-area:label;
}

.stat-card-compact .stat-value{
    grid-area:value;
    margin-top:var(--bb-space-1);
    font-size:26px;
}

.user-management{
    overflow:hidden;
}

.user-toolbar{
    display:flex;
    align-items:center;
    gap:var(--bb-space-3);
    flex-wrap:wrap;
    padding:var(--bb-space-4) var(--bb-space-6);
    border-bottom:1px solid var(--bb-border);
    background:var(--bb-surface-soft);
}

.search-field{
    position:relative;
    flex:1 1 280px;
    min-width:220px;
}

.search-field .form-control{
    padding-left:38px;
}

.search-icon{
    position:absolute;
    left:var(--bb-space-3);
    top:50%;
    width:17px;
    height:17px;
    color:var(--bb-text-muted);
    transform:translateY(-50%);
    pointer-events:none;
}

.toolbar-filter{
    flex:0 0 180px;
}

.filter-select{
    min-height:38px;
}

.toolbar-count,
.permission-count{
    color:var(--bb-text-muted);
    font-size:13px;
    font-weight:700;
    white-space:nowrap;
}

.users-table td{
    height:64px;
}

.user-cell{
    display:flex;
    align-items:center;
    gap:var(--bb-space-3);
    min-width:240px;
}

.user-avatar{
    width:34px;
    height:34px;
    flex:0 0 34px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border:1px solid rgba(23,105,170,.18);
    border-radius:50%;
    background:rgba(23,105,170,.09);
    color:var(--bb-primary);
    font-size:12px;
    font-weight:800;
    letter-spacing:.03em;
}

.user-identity{
    min-width:0;
    display:grid;
    gap:2px;
}

.user-identity strong,
.user-identity span{
    min-width:0;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.user-identity strong{
    color:var(--bb-text);
    font-size:14px;
    font-weight:700;
}

.user-identity span,
.muted-text{
    color:var(--bb-text-muted);
    font-size:13px;
}

.access-status{
    display:inline-flex;
    align-items:center;
    min-height:26px;
    padding:0 var(--bb-space-2);
    border:1px solid var(--bb-border);
    border-radius:999px;
    background:var(--bb-surface-soft);
    color:var(--bb-text);
    font-size:13px;
    font-weight:700;
    white-space:nowrap;
}

.access-all{
    border-color:rgba(23,105,170,.20);
    background:rgba(23,105,170,.08);
    color:var(--bb-primary);
}

.access-empty{
    border-color:rgba(200,137,34,.25);
    background:rgba(200,137,34,.10);
    color:#875B17;
}

.table-empty-state,
.filter-empty-state{
    padding:var(--bb-space-8);
    color:var(--bb-text-muted);
    text-align:center;
}

.table-empty-state strong,
.filter-empty-state strong{
    display:block;
    margin-bottom:var(--bb-space-1);
    color:var(--bb-text);
    font-size:16px;
}

.filter-empty-state{
    border-bottom:1px solid var(--bb-border);
    background:var(--bb-surface);
}

.filter-empty-state .btn{
    margin-top:var(--bb-space-3);
}

.admin-form-page{
    display:grid;
    gap:var(--bb-space-5);
}

.back-link{
    width:max-content;
    color:var(--bb-primary);
    text-decoration:none;
    font-size:14px;
    font-weight:700;
}

.back-link:hover{
    text-decoration:underline;
}

.management-form .panel-body{
    display:grid;
    gap:var(--bb-space-8);
}

.form-section{
    display:grid;
    gap:var(--bb-space-4);
}

.form-section + .form-section{
    padding-top:var(--bb-space-6);
    border-top:1px solid var(--bb-border);
}

.form-section-heading{
    display:grid;
    gap:var(--bb-space-1);
}

.form-section-description{
    color:var(--bb-text-muted);
    font-size:13px;
}

.form-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:var(--bb-space-5);
}

.form-actions-split{
    justify-content:flex-end;
}

.form-actions-split .btn-secondary{
    margin-right:auto;
}

.permission-picker{
    border:1px solid var(--bb-border);
    border-radius:var(--bb-radius-lg);
    background:var(--bb-surface);
    overflow:hidden;
}

.permission-picker.is-admin-role{
    border-color:rgba(23,105,170,.20);
}

.permission-picker.is-admin-role .permission-list{
    background:linear-gradient(0deg,rgba(23,105,170,.03),rgba(23,105,170,.03)),var(--bb-surface);
}

.permission-picker.is-admin-role .permission-item{
    opacity:.72;
}

.permission-admin-note{
    padding:var(--bb-space-3) var(--bb-space-4);
    border-bottom:1px solid rgba(23,105,170,.16);
    background:rgba(23,105,170,.08);
    color:var(--bb-primary);
    font-size:13px;
    font-weight:700;
}

.permission-toolbar{
    display:flex;
    align-items:center;
    gap:var(--bb-space-3);
    flex-wrap:wrap;
    padding:var(--bb-space-4);
    border-bottom:1px solid var(--bb-border);
    background:var(--bb-surface-soft);
}

.permission-search{
    flex-basis:300px;
}

.permission-list{
    max-height:360px;
    overflow:auto;
    display:grid;
}

.permission-item{
    display:grid;
    grid-template-columns:auto minmax(0,1fr) auto;
    align-items:center;
    gap:var(--bb-space-3);
    min-height:48px;
    padding:var(--bb-space-3) var(--bb-space-4);
    border-bottom:1px solid var(--bb-border);
    cursor:pointer;
}

.permission-item:last-child{
    border-bottom:0;
}

.permission-item:hover{
    background:var(--bb-surface-soft);
}

.permission-item-icon{
    width:18px;
    height:18px;
    color:var(--bb-primary);
}

.permission-item-name{
    min-width:0;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    color:var(--bb-text);
    font-size:14px;
    font-weight:600;
}

.permission-item input{
    width:17px;
    height:17px;
    accent-color:var(--bb-primary);
}

.permission-empty{
    padding:var(--bb-space-5);
    color:var(--bb-text-muted);
    text-align:center;
}

.modal-open{
    overflow:hidden;
}

.modal-backdrop{
    position:fixed;
    inset:0;
    z-index:80;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:var(--bb-space-5);
    background:rgba(7,27,58,.56);
}

.modal-backdrop[hidden]{
    display:none;
}

.modal{
    width:min(100%,460px);
    max-height:calc(100vh - 48px);
    overflow:auto;
    border:1px solid var(--bb-border);
    border-radius:var(--bb-radius-lg);
    background:var(--bb-surface);
    box-shadow:var(--bb-shadow-md);
}

.modal-header{
    display:flex;
    align-items:flex-start;
    gap:var(--bb-space-3);
    padding:var(--bb-space-5);
    border-bottom:1px solid var(--bb-border);
}

.modal-header h3{
    color:var(--bb-text);
    font-size:18px;
    font-weight:700;
}

.modal-header p{
    margin-top:var(--bb-space-1);
    color:var(--bb-text-muted);
    font-size:13px;
}

.modal-danger-icon{
    width:36px;
    height:36px;
    flex:0 0 36px;
    padding:var(--bb-space-2);
    border-radius:var(--bb-radius);
    background:rgba(180,35,24,.10);
    color:var(--bb-danger);
}

.modal-body{
    padding:var(--bb-space-5);
    color:var(--bb-text-muted);
}

.modal-body strong{
    color:var(--bb-text);
}

.modal-actions{
    display:flex;
    justify-content:flex-end;
    gap:var(--bb-space-3);
    padding:var(--bb-space-4) var(--bb-space-5);
    border-top:1px solid var(--bb-border);
    background:var(--bb-surface-soft);
}

/* 15. Authentication / Login */
.auth-page{
    min-height:100vh;
    min-height:100dvh;
    display:grid;
    grid-template-columns:minmax(380px,42%) minmax(0,1fr);
    overflow:hidden;
    background:var(--bb-surface);
}

.auth-brand-panel{
    position:relative;
    min-height:100vh;
    min-height:100dvh;
    overflow:hidden;
    background:
        radial-gradient(circle at 18% 18%,rgba(53,185,209,.18),transparent 28%),
        radial-gradient(circle at 90% 12%,rgba(108,183,230,.12),transparent 26%),
        linear-gradient(155deg,var(--bb-navy),var(--bb-navy-2));
    color:#FFFFFF;
}

.auth-brand-panel::before{
    content:"";
    position:absolute;
    inset:0;
    background-image:
        linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),
        linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);
    background-size:44px 44px;
    mask-image:linear-gradient(180deg,rgba(0,0,0,.75),rgba(0,0,0,.18));
    pointer-events:none;
}

.auth-brand-panel::after{
    content:"";
    position:absolute;
    width:420px;
    height:420px;
    right:-180px;
    bottom:12%;
    border:1px solid rgba(108,183,230,.18);
    border-radius:50%;
    box-shadow:0 0 0 52px rgba(53,185,209,.035),0 0 0 104px rgba(108,183,230,.025);
    pointer-events:none;
}

.auth-brand-content{
    position:relative;
    z-index:1;
    min-height:100%;
    display:flex;
    flex-direction:column;
    padding:var(--bb-space-10);
}

.auth-brand-logo,
.auth-mobile-logo{
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:hidden;
    border-radius:var(--bb-radius);
    background:transparent;
    text-decoration:none;
}

.auth-brand-logo{
    width:86px;
    height:92px;
}

.auth-brand-logo img,
.auth-mobile-logo img{
    width:100%;
    height:100%;
    object-position:center;
    background:transparent;
    border:0;
    box-shadow:none;
}

.auth-brand-logo img{
    object-fit:contain;
}

.auth-mobile-logo img{
    object-fit:cover;
}

.auth-brand-copy{
    max-width:520px;
    margin-top:auto;
    padding:var(--bb-space-10) 0;
}

.auth-kicker{
    margin-bottom:var(--bb-space-3);
    color:#A8DFF0;
    font-size:12px;
    font-weight:800;
    letter-spacing:.11em;
    text-transform:uppercase;
}

.auth-brand-copy h1{
    max-width:520px;
    color:#FFFFFF;
    font-size:40px;
    line-height:1.12;
    font-weight:700;
}

.auth-brand-copy p:not(.auth-kicker){
    max-width:460px;
    margin-top:var(--bb-space-4);
    color:#C8D8EA;
    font-size:16px;
}

.auth-visual{
    position:absolute;
    inset:auto var(--bb-space-10) 145px auto;
    width:230px;
    height:150px;
    opacity:.72;
    pointer-events:none;
}

.auth-visual::before{
    content:"";
    position:absolute;
    left:18px;
    right:18px;
    top:50%;
    height:1px;
    background:linear-gradient(90deg,transparent,rgba(108,183,230,.42),transparent);
    transform:rotate(-18deg);
}

.auth-bar{
    position:absolute;
    bottom:0;
    width:24px;
    border-radius:var(--bb-radius-sm) var(--bb-radius-sm) 0 0;
    background:linear-gradient(180deg,rgba(53,185,209,.55),rgba(23,105,170,.22));
}

.auth-bar-1{
    left:20px;
    height:46px;
}

.auth-bar-2{
    left:64px;
    height:78px;
}

.auth-bar-3{
    left:108px;
    height:112px;
}

.auth-node{
    position:absolute;
    width:8px;
    height:8px;
    border-radius:50%;
    background:var(--bb-cyan);
    box-shadow:0 0 0 5px rgba(53,185,209,.12);
}

.auth-node-1{
    left:22px;
    top:78px;
}

.auth-node-2{
    left:112px;
    top:42px;
}

.auth-node-3{
    right:32px;
    top:22px;
}

.auth-contact{
    display:grid;
    gap:var(--bb-space-3);
    margin-top:auto;
}

.auth-contact-item{
    display:flex;
    align-items:center;
    gap:var(--bb-space-3);
    width:max-content;
    max-width:100%;
    color:#DCE9F7;
    text-decoration:none;
    font-size:14px;
    font-weight:600;
}

a.auth-contact-item:hover{
    color:#FFFFFF;
}

.auth-contact-icon{
    width:28px;
    height:28px;
    flex:0 0 28px;
    display:flex;
    align-items:center;
    justify-content:center;
    border:1px solid rgba(255,255,255,.13);
    border-radius:var(--bb-radius-sm);
    background:rgba(255,255,255,.08);
}

.auth-contact-icon img{
    width:18px;
    height:18px;
    object-fit:contain;
}

.auth-form-panel{
    min-height:100vh;
    min-height:100dvh;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:var(--bb-space-10);
    background:
        linear-gradient(180deg,rgba(248,250,252,.88),rgba(255,255,255,1)),
        var(--bb-surface);
}

.auth-form-wrap{
    width:min(100%,440px);
}

.auth-mobile-logo{
    display:none;
    width:210px;
    height:78px;
    margin-bottom:var(--bb-space-8);
}

.auth-heading{
    margin-bottom:var(--bb-space-6);
}

.auth-heading h2{
    color:var(--bb-text);
    font-size:30px;
    line-height:1.2;
    font-weight:700;
}

.auth-heading p:not(.auth-kicker){
    margin-top:var(--bb-space-2);
    color:var(--bb-text-muted);
    font-size:15px;
}

.auth-alert{
    margin-bottom:var(--bb-space-5);
}

.auth-form{
    display:grid;
    gap:var(--bb-space-4);
}

.auth-form .form-group{
    margin-bottom:0;
}

.auth-form .form-control{
    min-height:44px;
    background:#FFFFFF;
}

.auth-password-field{
    position:relative;
}

.auth-password-field .form-control{
    padding-right:50px;
}

.auth-password-toggle{
    position:absolute;
    right:8px;
    top:50%;
    width:36px;
    height:36px;
    display:grid;
    align-items:center;
    justify-content:center;
    place-items:center;
    padding:0;
    border:0;
    border-radius:var(--bb-radius-sm);
    background:transparent;
    color:var(--bb-text-muted);
    cursor:pointer;
    line-height:1;
    transform:translateY(-50%);
}

.auth-password-toggle:hover{
    background:var(--bb-surface-soft);
    color:var(--bb-primary);
}

.auth-password-toggle:focus-visible{
    outline:3px solid var(--bb-focus);
    outline-offset:2px;
}

.auth-password-toggle svg{
    width:19px;
    height:19px;
    fill:none;
    stroke:currentColor;
    stroke-width:1.8;
    stroke-linecap:round;
    stroke-linejoin:round;
}

.auth-password-toggle .icon-eye-off,
.auth-password-toggle.is-visible .icon-eye{
    display:none;
}

.auth-password-toggle.is-visible .icon-eye-off{
    display:block;
}

.auth-submit{
    width:100%;
    min-height:44px;
    margin-top:var(--bb-space-2);
}

.auth-submit:disabled{
    opacity:.72;
}

.auth-footer{
    margin-top:var(--bb-space-8);
    color:var(--bb-text-muted);
    font-size:13px;
    text-align:center;
}

/* 16. Utilities */
.sr-only{
    position:absolute;
    width:1px;
    height:1px;
    padding:0;
    margin:-1px;
    overflow:hidden;
    clip:rect(0,0,0,0);
    white-space:nowrap;
    border:0;
}

/* 17. Responsive */
@media (max-width: 1099px){
    .app-shell{
        display:block;
    }

    .app-sidebar{
        position:fixed;
        inset:0 auto 0 0;
        width:min(86vw,320px);
        flex-basis:auto;
        transform:translateX(-100%);
        transition:transform .18s ease;
        box-shadow:var(--bb-shadow-md);
    }

    html.sidebar-collapsed .app-sidebar,
    body.sidebar-collapsed .app-sidebar{
        width:min(86vw,320px);
        flex-basis:auto;
    }

    html.sidebar-collapsed .sidebar-brand-link,
    body.sidebar-collapsed .sidebar-brand-link{
        width:190px;
        height:50px;
        justify-content:flex-start;
        gap:var(--bb-space-3);
        overflow:visible;
    }

    html.sidebar-collapsed .sidebar-brand-mark,
    body.sidebar-collapsed .sidebar-brand-mark{
        width:38px;
        height:38px;
        flex-basis:38px;
    }

    html.sidebar-collapsed .sidebar-brand-name,
    body.sidebar-collapsed .sidebar-brand-name{
        display:inline;
    }

    html.sidebar-collapsed .nav-section-label,
    html.sidebar-collapsed .nav-text,
    html.sidebar-collapsed .account-details,
    body.sidebar-collapsed .nav-section-label,
    body.sidebar-collapsed .nav-text,
    body.sidebar-collapsed .account-details{
        position:static;
        width:auto;
        height:auto;
        padding:0;
        margin:0;
        overflow:hidden;
        clip:auto;
        white-space:nowrap;
        border:0;
    }

    html.sidebar-collapsed .nav-link,
    body.sidebar-collapsed .nav-link{
        justify-content:flex-start;
        padding:var(--bb-space-2) var(--bb-space-3);
    }

    html.sidebar-collapsed .account-card,
    body.sidebar-collapsed .account-card{
        justify-content:flex-start;
        padding:var(--bb-space-3);
    }

    body.sidebar-open .app-sidebar{
        transform:translateX(0);
    }

    body.sidebar-open .sidebar-backdrop{
        display:block;
        position:fixed;
        inset:0;
        z-index:30;
        background:rgba(7,27,58,.52);
    }

    .menu-toggle,
    .btn.sidebar-close{
        display:inline-flex;
    }

    .sidebar-collapse-toggle{
        display:none;
    }

    .sidebar-close{
        color:#FFFFFF;
        background:rgba(255,255,255,.10);
        border-color:rgba(255,255,255,.14);
    }

    .app-topbar{
        padding:0 var(--bb-space-4);
    }

    .viewer-header{
        padding:0 var(--bb-space-4);
    }

    .auth-page{
        grid-template-columns:minmax(320px,38%) minmax(0,1fr);
    }

    .auth-brand-content,
    .auth-form-panel{
        padding:var(--bb-space-8);
    }

    .auth-brand-logo{
        width:78px;
        height:82px;
    }

    .auth-brand-copy h1{
        font-size:34px;
    }

    .auth-visual{
        display:none;
    }

    .page-container{
        padding:var(--bb-space-6);
    }

    .stats-grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }

    .admin-stats{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }

    .user-toolbar{
        padding:var(--bb-space-4);
    }

    .form-grid{
        grid-template-columns:1fr;
        gap:var(--bb-space-4);
    }

    .permission-toolbar{
        align-items:stretch;
    }

    .permission-search{
        flex-basis:100%;
    }
}

@media (max-width: 767px){
    .app-topbar{
        height:64px;
        min-height:64px;
        gap:var(--bb-space-3);
    }

    .topbar-context,
    .topbar-user-name{
        display:none;
    }

    .topbar-title{
        font-size:18px;
    }

    .page-container{
        padding:var(--bb-space-4);
    }

    .page-heading{
        flex-direction:column;
        align-items:stretch;
    }

    .admin-page-header{
        flex-direction:column;
        align-items:stretch;
    }

    .admin-page-header .btn{
        width:100%;
    }

    .stats-grid{
        grid-template-columns:1fr;
        gap:var(--bb-space-3);
    }

    .admin-stats{
        grid-template-columns:1fr;
        gap:var(--bb-space-3);
    }

    .stat-card-compact{
        padding:var(--bb-space-3);
    }

    .user-toolbar{
        display:grid;
        grid-template-columns:1fr;
    }

    .search-field,
    .toolbar-filter{
        min-width:0;
        flex-basis:auto;
        width:100%;
    }

    .toolbar-count{
        white-space:normal;
    }

    .panel-header,
    .panel-body,
    .form-actions{
        padding:var(--bb-space-4);
    }

    .management-form .panel-body{
        gap:var(--bb-space-6);
    }

    .form-section + .form-section{
        padding-top:var(--bb-space-5);
    }

    .form-actions-split{
        display:grid;
        grid-template-columns:1fr;
    }

    .form-actions-split .btn,
    .form-actions-split .btn-secondary{
        width:100%;
        margin-right:0;
    }

    .permission-toolbar{
        display:grid;
        grid-template-columns:1fr;
    }

    .permission-list{
        max-height:320px;
    }

    .permission-item{
        grid-template-columns:auto minmax(0,1fr) auto;
        padding:var(--bb-space-3);
    }

    .modal-backdrop{
        align-items:flex-end;
        padding:var(--bb-space-3);
    }

    .modal{
        max-height:calc(100vh - 24px);
    }

    .modal-actions{
        display:grid;
        grid-template-columns:1fr;
    }

    .dashboard-viewer{
        height:100vh;
        height:100dvh;
    }

    .viewer-header{
        height:64px;
        min-height:64px;
    }

    .viewer-context{
        display:none;
    }

    .viewer-title{
        font-size:18px;
    }

    .viewer-actions{
        gap:var(--bb-space-1);
    }

    .viewer-action{
        width:36px;
        min-width:36px;
        height:36px;
    }

    .auth-page{
        min-height:100vh;
        min-height:100dvh;
        display:block;
        overflow:auto;
        background:
            radial-gradient(circle at 10% 0%,rgba(53,185,209,.12),transparent 30%),
            var(--bb-surface);
    }

    .auth-brand-panel{
        display:none;
    }

    .auth-form-panel{
        min-height:100vh;
        min-height:100dvh;
        align-items:flex-start;
        padding:var(--bb-space-6) var(--bb-space-4);
        background:transparent;
    }

    .auth-mobile-logo{
        display:flex;
    }

    .auth-heading h2{
        font-size:26px;
    }

    .auth-footer{
        margin-top:var(--bb-space-6);
    }
}

@media (prefers-reduced-motion: reduce){
    *,
    *::before,
    *::after{
        scroll-behavior:auto !important;
        transition-duration:.01ms !important;
        animation-duration:.01ms !important;
        animation-iteration-count:1 !important;
    }

    .loading-spinner{
        animation:none !important;
    }
}