/* Internal app-shell styles. Shared tokens, reset, mesh background, .card,
   .btn, .badge and .error-msg live in theme.css (loaded before this file). */

body{
    overflow-x:hidden;
}

.app-shell{
    display:flex;
    min-height:100vh;
    position:relative;
}

/* Sidebar */

.sidebar{
    width:260px;
    flex-shrink:0;
    background:var(--sidebar-bg);
    border-right:1px solid var(--line);
    display:flex;
    flex-direction:column;
    position:sticky;
    top:0;
    height:100vh;
    z-index:20;
    transition:width .2s ease;
}

.sidebar.collapsed{
    width:84px;
}

.sidebar.collapsed .nav-label,
.sidebar.collapsed .nav-chevron,
.sidebar.collapsed .brand-name{
    display:none;
}

.sidebar-brand{
    display:flex;
    align-items:center;
    gap:10px;
    padding:26px 24px;
    border-bottom:1px solid var(--line);
}

.brand-name{
    font-family:Sora,sans-serif;
    font-weight:800;
    letter-spacing:.5px;
    font-size:18px;
}

.brand-mark{
    width:34px;
    height:34px;
    border-radius:9px;
    background:linear-gradient(135deg,var(--violet),var(--cyan));
    flex-shrink:0;
}

.sidebar-nav{
    flex:1;
    overflow-y:auto;
    padding:14px 12px;
}

.nav-item{
    display:flex;
    align-items:center;
    gap:12px;
    padding:11px 12px;
    border-radius:var(--radius-sm);
    color:var(--text-dim);
    text-decoration:none;
    font-size:14px;
    font-weight:600;
    margin-bottom:2px;
}

.nav-item i.fa-solid:not(.nav-chevron){
    flex-shrink:0;
    width:18px;
    text-align:center;
    font-size:15px;
}

.nav-item:hover{
    background:var(--glass-strong);
    color:var(--text);
}

.nav-item.active{
    background:rgba(139,92,246,.15);
    color:#fff;
    position:relative;
}

.nav-item.active::before{
    content:"";
    position:absolute;
    left:-12px;
    top:8px;
    bottom:8px;
    width:3px;
    border-radius:3px;
    background:linear-gradient(180deg,var(--violet),var(--cyan));
}

.nav-label{
    flex:1;
}

.nav-chevron{
    opacity:.5;
}

.sidebar-footer{
    padding:16px;
    border-top:1px solid var(--line);
    display:flex;
    justify-content:center;
}

.collapse-btn{
    width:34px;
    height:34px;
    border-radius:50%;
    border:1px solid var(--line-strong);
    background:var(--glass);
    color:var(--text-dim);
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
}

.collapse-btn:hover{
    color:var(--text);
}

.sidebar.collapsed .collapse-btn i{
    transform:rotate(180deg);
}

/* Main column */

.main{
    flex:1;
    min-width:0;
    position:relative;
    z-index:1;
}

.topbar{
    height:76px;
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:16px;
    padding:0 32px;
    border-bottom:1px solid var(--line);
    position:sticky;
    top:0;
    background:rgba(11,11,18,.7);
    backdrop-filter:blur(12px);
    z-index:15;
}

.user-chip{
    display:flex;
    align-items:center;
    gap:10px;
    font-size:14px;
    color:var(--text-dim);
}

.user-avatar{
    width:34px;
    height:34px;
    border-radius:50%;
    background:linear-gradient(135deg,var(--violet),var(--cyan));
    display:flex;
    align-items:center;
    justify-content:center;
    font-family:Sora,sans-serif;
    font-weight:700;
    color:#111;
    font-size:13px;
}

.content{
    padding:36px 32px 60px;
    max-width:1500px;
}

.page-title{
    font-size:26px;
    margin-bottom:24px;
    color:var(--text-dim);
    font-weight:600;
}

.section-card{
    margin-bottom:24px;
}

.section-card-header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin-bottom:20px;
}

.section-card-header h2{
    font-size:18px;
}

/* Tables */

.table-wrap{
    overflow-x:auto;
    border-radius:var(--radius-sm);
    border:1px solid var(--line);
}

table.data-table{
    width:100%;
    border-collapse:collapse;
    font-size:13.5px;
    white-space:nowrap;
}

table.data-table thead th{
    text-align:left;
    padding:12px 16px;
    color:var(--text-dim);
    font-size:12px;
    letter-spacing:.4px;
    text-transform:uppercase;
    border-bottom:1px solid var(--line);
    background:rgba(255,255,255,.02);
}

table.data-table tbody td{
    padding:14px 16px;
    border-bottom:1px solid var(--line);
    color:var(--text);
}

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

table.data-table tbody tr:hover{
    background:rgba(255,255,255,.02);
}

.empty-row td{
    text-align:center;
    color:var(--text-dim);
    padding:26px 16px;
    background:rgba(255,255,255,.015);
}

.page-footer-inline{
    text-align:center;
    color:var(--text-dim);
    font-size:13px;
    margin-top:40px;
}

@media (max-width:900px){
    .sidebar{
        position:fixed;
        left:0;
        transform:translateX(-100%);
    }
    .sidebar.mobile-open{
        transform:translateX(0);
    }
    .content{
        padding:24px 16px 40px;
    }
}