/* SpawnWeaver dashboard shell: fixed sidebar + content column. */

.app-shell {
    display: grid;
    grid-template-columns: 240px minmax(0, 1fr);
    min-height: 100vh;
}

/* --- Sidebar --- */

.sidebar {
    background: var(--surface);
    border-right: 1px solid var(--border);
    padding: var(--space-5) var(--space-4);
    display: flex; flex-direction: column; gap: var(--space-5);
    position: sticky; top: 0; height: 100vh; overflow-y: auto;
}

.sidebar .logo {
    display: flex; align-items: center; gap: 10px;
    font-weight: 750; font-size: 16px; letter-spacing: -0.01em;
    color: var(--text); text-decoration: none !important;
    padding: 0 var(--space-2);
}
.sidebar .logo img { width: 24px; height: 24px; border-radius: 6px; }

.sidenav { display: flex; flex-direction: column; gap: var(--space-5); flex: 1; }
.sidenav-group { display: flex; flex-direction: column; gap: 1px; }
.sidenav-title {
    font-size: var(--text-xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em;
    color: var(--text-faint); padding: 0 var(--space-2); margin-bottom: var(--space-1);
}
.sidenav a {
    display: flex; align-items: center; gap: var(--space-2);
    padding: 7px var(--space-2); border-radius: var(--radius-sm);
    color: var(--text-secondary); font-weight: 500; font-size: var(--text-base);
    text-decoration: none !important;
}
.sidenav a:hover { color: var(--text); background: var(--surface-subtle); }
.sidenav a.active { color: var(--accent-text); background: var(--accent-soft); font-weight: 600; }

.sidebar-footer { display: flex; flex-direction: column; gap: var(--space-2); border-top: 1px solid var(--border); padding-top: var(--space-4); }
.sidebar-footer .account-link { display: flex; align-items: center; gap: var(--space-2); padding: 4px var(--space-2); color: var(--text); font-weight: 600; text-decoration: none !important; }
.sidebar-footer .row { display: flex; gap: var(--space-2); align-items: center; padding: 0 var(--space-2); }

.theme-toggle {
    margin-left: auto;
    border: 1px solid var(--border-strong); background: var(--surface); color: var(--text-secondary);
    border-radius: var(--radius-sm); padding: 3px 9px; font: inherit; font-size: var(--text-xs); cursor: pointer;
}
.theme-toggle:hover { color: var(--text); }

/* --- Content --- */

.content { padding: var(--space-8) var(--space-8) var(--space-12); min-width: 0; }
.content-inner { max-width: 1080px; margin: 0 auto; }

/* --- Signed-out top bar (getting started / auth pages) --- */

.public-shell { min-height: 100vh; display: flex; flex-direction: column; }
.public-topbar {
    display: flex; align-items: center; gap: var(--space-5);
    padding: 0 var(--space-6); height: 58px;
    background: var(--surface); border-bottom: 1px solid var(--border);
}
.public-topbar .logo {
    display: flex; align-items: center; gap: 10px;
    font-weight: 750; font-size: 16px; color: var(--text); text-decoration: none !important;
}
.public-topbar .logo img { width: 24px; height: 24px; border-radius: 6px; }
.public-topbar nav { display: flex; gap: var(--space-4); font-size: var(--text-base); }
.public-topbar nav a { color: var(--text-secondary); font-weight: 500; text-decoration: none; }
.public-topbar nav a:hover, .public-topbar nav a.active { color: var(--text); }
.public-topbar .nav-account { margin-left: auto; display: flex; align-items: center; gap: var(--space-3); }
.public-content { flex: 1; padding: var(--space-8) var(--space-6) var(--space-12); }
.public-content .content-inner { max-width: 1080px; margin: 0 auto; }

.auth-card { max-width: 420px; margin: var(--space-10) auto; }
.auth-divider { display: flex; align-items: center; gap: var(--space-3); color: var(--text-faint); font-size: var(--text-sm); margin: var(--space-4) 0; }
.auth-divider::before, .auth-divider::after { content: ""; flex: 1; height: 1px; background: var(--border); }

/* --- Responsive --- */

@media (max-width: 900px) {
    .app-shell { grid-template-columns: 1fr; }
    .sidebar {
        position: static; height: auto; flex-direction: row; flex-wrap: wrap; align-items: center;
        border-right: none; border-bottom: 1px solid var(--border);
        padding: var(--space-3) var(--space-4);
    }
    .sidenav { flex-direction: row; flex-wrap: wrap; gap: var(--space-1); }
    .sidenav-group { flex-direction: row; gap: 1px; }
    .sidenav-title { display: none; }
    .sidebar-footer { border-top: none; padding-top: 0; margin-left: auto; flex-direction: row; align-items: center; }
    .content { padding: var(--space-5) var(--space-4) var(--space-10); }
}