/* ==========================================
   LAYOUT
========================================== */

.container{

    width:min(1400px,92%);

    margin:auto;

}

.portal-shell{

    display:flex;

    flex-direction:column;

    min-height:100vh;

}

.portal-layout{

    display:grid;

    grid-template-columns:260px 1fr;

    flex:1;

}

.main-content{

    padding:18px 28px;

    display:flex;

    flex-direction:column;

    gap:14px;

}

/* ---------- Sidebar ---------- */

.sidebar{

    display:flex;

    flex-direction:column;

    padding:28px 20px;

}

.sidebar-nav{

    display:flex;

    flex-direction:column;

    gap:2px;

    flex:1;

}

.sidebar-help{

    margin-top:auto;

}

/* ---------- Topbar ---------- */

.topbar{

    display:flex;

    align-items:center;

    justify-content:flex-end;

    gap:24px;

    flex-wrap:nowrap;

}

.topbar-right{

    display:flex;

    align-items:center;

    gap:14px;

    flex-shrink:0;

}

/* ---------- Hero ---------- */

.hero{

    display:flex;

    align-items:flex-end;

    justify-content:space-between;

    gap:24px;

    flex-wrap:wrap;

}

.hero-meta{

    display:flex;

    flex-direction:column;

    align-items:flex-end;

    gap:8px;

}

.hero-meta-item{

    display:flex;

    align-items:center;

    gap:8px;

}

/* ---------- Stats grid ---------- */

.stats-grid{

    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:20px;

}

.stat-card{

    display:flex;

    align-items:center;

    gap:14px;

    padding:16px;

}

.stat-body{

    display:flex;

    flex-direction:column;

}

/* ---------- Dashboard section ---------- */

.section-header{

    display:flex;

    align-items:center;

    justify-content:space-between;

    margin-bottom:16px;

}

.dashboard-grid{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:20px;

}

.dashboard-card{

    display:flex;

    flex-direction:column;

    padding:16px;

}

.dashboard-footer{

    display:flex;

    align-items:center;

    justify-content:space-between;

    margin:10px 0;

}

/* ---------- Info panels ---------- */

.info-panels{

    display:grid;

    grid-template-columns:1.3fr 1fr;

    gap:14px;

}

.panel{

    padding:16px 20px;

}

.panel-header{

    display:flex;

    align-items:center;

    justify-content:space-between;

    margin-bottom:10px;

}

.update-list{

    list-style:none;

    display:flex;

    flex-direction:column;

}

.update-list li{

    display:flex;

    align-items:center;

    gap:10px;

    flex-wrap:wrap;

    padding:8px 0;

    border-bottom:1px solid var(--border);

}

.update-list li:last-child{

    border-bottom:none;

    padding-bottom:0;

}

.update-list li:first-child{

    padding-top:0;

}

.quick-links-grid{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:0;

    border-top:1px solid var(--border);

    margin-top:4px;

}

.quick-link{

    padding:10px 10px;

    border-bottom:1px solid var(--border);

}

.quick-link:nth-child(odd){

    border-right:1px solid var(--border);

    padding-right:16px;

}

.quick-link:nth-child(even){

    padding-left:16px;

}

.quick-link:nth-last-child(-n+2){

    border-bottom:none;

}

.quick-link{

    display:flex;

    align-items:center;

    gap:12px;

}

/* ---------- Footer ---------- */

.footer-bar{

    display:flex;

    align-items:center;

    justify-content:space-between;

    padding:8px 28px;

    flex-wrap:wrap;

    gap:8px;

}

@media(max-width:1300px){

.stats-grid{

grid-template-columns:repeat(2,1fr);

}

.main-content{

padding:18px 20px;

}

}

@media(max-width:1100px){

.portal-layout{

grid-template-columns:1fr;

}

.main-content{

padding:24px;

}

.stats-grid{

grid-template-columns:repeat(2,1fr);

}

.dashboard-grid{

grid-template-columns:1fr;

}

.info-panels{

grid-template-columns:1fr;

}

.quick-links-grid{

grid-template-columns:1fr;

}

}