/* ============================================================
   MEMBER DASHBOARD — side panel + content layout
   Writers Hub (HR Developers) — loaded after nav-enhancements.css
   Desktop: sticky left side panel + content column (hub-bar hidden).
   Mobile/tablet: hub-bar pill nav stays; side panel hidden.
   ============================================================ */

.hub-layout{
    display:grid;
    grid-template-columns:270px minmax(0,1fr);
    gap:28px;
    align-items:start;
    padding:28px 0 56px;
    background:linear-gradient(180deg,var(--bg-soft,#f8fafc) 0%,var(--bg,#ffffff) 100%);
    min-height:72vh;
    width:100%;
}
@media(min-width:1280px){
    .hub-layout{
        grid-template-columns:280px minmax(0,1fr);
        max-width:1320px;
        margin:0 auto;
    }
}

/* Left panel */
.dash-panel{position:sticky;top:86px;min-width:0}
.dash-panel-card{
    display:flex;flex-direction:column;gap:16px;
    background:rgba(255,255,255,.85);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
    border:1px solid var(--hairline);border-radius:20px;
    padding:18px;box-shadow:0 15px 45px rgba(30,27,75,.07);
}

/* Profile card */
.dash-profile{display:flex;align-items:center;gap:12px;padding-bottom:14px;border-bottom:1px solid var(--hairline)}
.dash-profile-avatar{
    width:52px;height:52px;border-radius:16px;flex-shrink:0;overflow:hidden;
    display:flex;align-items:center;justify-content:center;
    background:linear-gradient(135deg,var(--color-primary,#6366f1),#ec4899);
    color:#fff;font-family:'Space Grotesk',sans-serif;font-size:20px;font-weight:700;
    box-shadow:0 8px 20px -8px rgba(99,102,241,.55);
}
.dash-profile-avatar img{width:100%;height:100%;object-fit:cover}
.dash-profile-text{min-width:0}
.dash-profile-role{display:inline-block;font-size:.64rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--color-primary,#6366f1);background:rgba(99,102,241,.09);padding:2px 8px;border-radius:999px;margin-bottom:4px}
.dash-profile-text strong{display:block;font-size:.95rem;font-weight:700;color:var(--ink,#1e1b4b);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dash-profile-text small{display:block;font-size:.76rem;color:var(--ink-soft,#64748b);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* Membership card */
.dash-membership{
    padding:14px;border-radius:16px;
    background:linear-gradient(135deg,rgba(99,102,241,.08),rgba(236,72,153,.05));
    border:1px solid rgba(99,102,241,.16);
}
.dash-membership-head{display:flex;align-items:center;gap:10px}
.dash-membership-ic{
    width:34px;height:34px;border-radius:11px;flex-shrink:0;
    display:flex;align-items:center;justify-content:center;color:#fff;
    background:linear-gradient(135deg,var(--color-primary,#6366f1),#8b5cf6);
}
.dash-membership-ic svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.dash-membership-head small{display:block;font-size:.66rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft,#64748b)}
.dash-membership-plan{font-size:.95rem;font-weight:800;color:var(--ink,#1e1b4b)}
.dash-membership-plan.is-premium{color:#b45309}
.dash-membership-note{font-size:.78rem;line-height:1.5;color:var(--ink-soft,#64748b);margin:8px 0 10px}
.dash-membership-btn{
    display:block;text-align:center;text-decoration:none;
    padding:9px 14px;border-radius:11px;font-size:.8rem;font-weight:700;
    color:#fff;background:linear-gradient(135deg,var(--color-primary,#6366f1),#8b5cf6);
    transition:box-shadow .2s,transform .2s;
}
.dash-membership-btn:hover{box-shadow:0 8px 20px -8px rgba(99,102,241,.6);transform:translateY(-1px)}

/* Main nav */
.dash-panel-nav{display:flex;flex-direction:column;gap:3px}
.dash-panel-group{
    font-size:.64rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
    color:var(--faint,#94a3b8);padding:8px 8px 2px;
}
.dash-panel-link{
    display:flex;align-items:center;gap:10px;text-decoration:none;
    padding:9px 10px;border-radius:11px;font-size:.86rem;font-weight:600;color:var(--ink-soft,#64748b);
    transition:background .2s,color .2s,transform .2s;
}
.dash-panel-link:hover{background:rgba(99,102,241,.09);color:var(--color-primary,#6366f1);transform:translateX(2px)}
.dash-panel-link .hub-ic{width:16px;height:16px}
.dash-panel-link .hub-count{margin-left:auto}
.dash-panel-link.active{
    background:linear-gradient(135deg,rgba(99,102,241,.14),rgba(236,72,153,.08));
    color:var(--color-primary,#6366f1);
}
.dash-panel-signout{margin-top:6px;color:#e11d48}
.dash-panel-signout:hover{background:rgba(225,29,72,.08);color:#e11d48}

/* Content column */
.hub-content{min-width:0}
.hub-content > .container{max-width:100%}

/* Responsive: hub-bar pills on mobile/tablet, side panel on desktop */
@media(min-width:1025px){
    /* The side panel replaces the full-width hub-bar on desktop */
    .hub-bar{display:none}
}
@media(max-width:1024px){
    .hub-layout{display:block;padding:20px 0 48px}
    .dash-panel{display:none}
    .dash-panel-card{padding:14px}
}