/* ── Layout ──────────────────────────────────────────────────────────────────── */
:root {
    --sidebar-width: 240px;
    --topbar-height: 56px;
    --sidebar-bg: #1a2340;
    --sidebar-link-color: #c8cfe0;
    --sidebar-link-hover: #ffffff;
    --sidebar-active-bg: rgba(255,255,255,.12);
}

body.portal-layout { display: flex; min-height: 100vh; background: #f4f6fb; }

/* Sidebar */
.sidebar {
    width: var(--sidebar-width);
    background: var(--sidebar-bg);
    position: fixed;
    top: 0; left: 0; bottom: 0;
    z-index: 1000;
    overflow-y: auto;
}

.sidebar-header { border-bottom: 1px solid rgba(255,255,255,.08); }
.sidebar-logo   { height: 48px; width: auto; object-fit: contain; border-radius: 4px; }
.sidebar-brand  { color: #fff; font-weight: 700; font-size: 1rem; margin-top: 4px; }

.sidebar-link {
    color: var(--sidebar-link-color) !important;
    border-radius: 6px;
    padding: .5rem .75rem;
    font-size: .875rem;
    transition: background .15s, color .15s;
}
.sidebar-link:hover  { background: rgba(255,255,255,.08); color: var(--sidebar-link-hover) !important; }
.sidebar-link.active { background: var(--sidebar-active-bg); color: #fff !important; font-weight: 600; }

.sidebar-footer { color: #8899bb; }

/* Main */
.main-wrapper {
    margin-left: var(--sidebar-width);
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.topbar {
    height: var(--topbar-height);
    background: #fff;
    border-bottom: 1px solid #e5e9f0;
    position: sticky;
    top: 0;
    z-index: 900;
}

.page-content { flex: 1; }

/* Auth layout */
.auth-card {
    background: #fff;
    border-radius: 12px;
    padding: 2rem;
    box-shadow: 0 4px 24px rgba(0,0,0,.08);
}

/* Responsive */
@media (max-width: 991px) {
    .sidebar     { transform: translateX(-100%); transition: transform .25s; }
    .sidebar.show { transform: translateX(0); }
    .main-wrapper { margin-left: 0; }
}