/* ============================================================
   Design Tokens & Shell Layout
   Framework: Bootstrap 5.3 (CDN)
   ============================================================ */

/* ── Token Overrides ── */
:root {
    /* Primary — Indigo */
    --bs-primary: #4F46E5;
    --bs-primary-rgb: 79, 70, 229;
    /* Secondary — Violet */
    --bs-secondary: #7C3AED;
    --bs-secondary-rgb: 124, 58, 237;
    /* Typography */
    --bs-font-sans-serif: 'Inter', system-ui, sans-serif;
    --bs-font-monospace: 'JetBrains Mono', monospace;
    /* Palette */
    --enr-slate-900: #0f172a;
    --enr-slate-700: #334155;
    --enr-slate-500: #64748b;
    --enr-slate-400: #94a3b8;
    --enr-slate-200: #e2e8f0;
    --enr-slate-100: #f1f5f9;
    --enr-page-bg: #f8f9fa;
    --enr-card-bg: #ffffff;
    --enr-indigo-tint: #EEF2FF;
    --enr-violet-tint: #F5F3FF;
}

/* ── Button ── */
.btn-primary {
    --bs-btn-bg: #4F46E5;
    --bs-btn-border-color: #4F46E5;
    --bs-btn-hover-bg: #4338ca;
    --bs-btn-hover-border-color: #4338ca;
    --bs-btn-active-bg: #3730a3;
    --bs-btn-active-border-color: #3730a3;
}

/* ── Form Focus Ring ── */
.form-control:focus,
.form-select:focus {
    border-color: #4F46E5;
    box-shadow: 0 0 0 0.2rem rgba(79, 70, 229, 0.18);
}

.form-check-input:checked {
    background-color: #4F46E5;
    border-color: #4F46E5;
}

/* ============================================================
   Shell Layout
   ============================================================ */
html, body {
    height: 100%;
    margin: 0;
    padding: 0;
}

body {
    background-color: var(--enr-page-bg);
    font-family: var(--bs-font-sans-serif);
}

/* ── Sidebar ── */
#enr-sidebar {
    width: 240px;
    min-height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 100;
    background: var(--enr-card-bg);
    border-right: 1px solid var(--enr-slate-200);
    display: flex;
    flex-direction: column;
}

/* ── Push main content right on desktop ── */
@media (min-width: 992px) {
    #enr-main {
        margin-left: 240px;
    }
}

/* ── Mobile offcanvas sidebar: matches desktop sidebar dimensions ── */
.enr-sidebar-offcanvas {
    width: 240px;
    border-right: 1px solid var(--enr-slate-200);
}

/* ── Sidebar and topbar header row: 64px height matches design spec ── */
.enr-sidebar-header {
    height: 64px;
}

/* ── Brand ── */
.enr-brand-name {
    font-size: 1.0625rem;
    font-weight: 700;
    color: var(--enr-slate-900);
    letter-spacing: -0.01em;
    line-height: 1.2;
}

.enr-school-name {
    font-size: 0.6875rem;
    color: var(--enr-slate-500);
    margin-top: 1px;
}

/* ── Nav Items ── */
.enr-nav-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    border-radius: 6px;
    color: var(--enr-slate-700);
    text-decoration: none;
    font-size: 0.875rem;
    font-weight: 500;
    transition: background-color 0.12s ease, color 0.12s ease;
    line-height: 1.4;
}

    .enr-nav-link:hover {
        background-color: var(--enr-indigo-tint);
        color: #4F46E5;
        text-decoration: none;
    }

    .enr-nav-link.active {
        background-color: var(--enr-indigo-tint);
        color: #4F46E5;
        font-weight: 600;
    }

    .enr-nav-link .enr-nav-icon {
        flex-shrink: 0;
        opacity: 0.65;
    }

    .enr-nav-link:hover .enr-nav-icon,
    .enr-nav-link.active .enr-nav-icon {
        opacity: 1;
    }

/* ── User Menu ── */
.enr-user-menu {
    border-top: 1px solid var(--enr-slate-200);
    padding: 12px 16px;
}

.enr-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background-color: #4F46E5;
    color: #ffffff;
    font-size: 0.6875rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    cursor: pointer;
    border: none;
    padding: 0;
}

.enr-user-name {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--enr-slate-900);
    line-height: 1.25;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.enr-user-email {
    font-size: 0.6875rem;
    color: var(--enr-slate-500);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ── Mobile Topbar ── */
.enr-topbar {
    height: 56px;
    background: var(--enr-card-bg);
    border-bottom: 1px solid var(--enr-slate-200);
    display: flex;
    align-items: center;
    padding: 0 16px;
    gap: 12px;
    flex-shrink: 0;
}

.enr-topbar-toggle {
    background: none;
    border: none;
    padding: 6px;
    border-radius: 6px;
    color: var(--enr-slate-700);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .enr-topbar-toggle:hover {
        background-color: var(--enr-slate-100);
    }

/* ── Page Content ── */
#enr-main {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.enr-page-content {
    flex-grow: 1;
    padding: 24px;
}

/* ── Typography Utilities ── */
.enr-family-number {
    font-family: var(--bs-font-monospace);
    font-weight: 500;
    font-size: 0.8125rem;
}

.enr-cohort-tag {
    font-family: var(--bs-font-monospace);
    font-weight: 500;
}

/* ── Status Badge Palette ── */
.badge-status-unacknowledged {
    background-color: #f1f5f9;
    color: #64748b;
}

.badge-status-contacted {
    background-color: #EEF2FF;
    color: #4F46E5;
}

.badge-status-replied {
    background-color: #F5F3FF;
    color: #7C3AED;
}

.badge-status-applied {
    background-color: #FFFBEB;
    color: #B45309;
}

.badge-status-accepted {
    background-color: #F0FDF4;
    color: #15803D;
}

.badge-status-enrolled {
    background-color: #0f172a;
    color: #f8fafc;
}

/* ── Tag Type Badge Palette ── */
.badge-tag-cohort {
    background-color: #F5F3FF;
    color: #7C3AED;
}

.badge-tag-engagement {
    background-color: #FFFBEB;
    color: #B45309;
}

.badge-tag-interest {
    background-color: #EEF2FF;
    color: #4F46E5;
}

.badge-tag-recruitment {
    background-color: #f1f5f9;
    color: #64748b;
}