:root {
    --portal-blue: #174a7e;
    --portal-blue-dark: #10395f;
    --portal-blue-soft: #eaf2f8;
    --portal-green: #2f7d4a;
    --portal-green-dark: #25643b;
    --portal-bg: #f5f7fa;
    --portal-text: #1f2937;
}

body {
    background: var(--portal-bg);
    color: var(--portal-text);
}

.btn-success {
    --bs-btn-bg: var(--portal-green);
    --bs-btn-border-color: var(--portal-green);
    --bs-btn-hover-bg: var(--portal-green-dark);
    --bs-btn-hover-border-color: var(--portal-green-dark);
}

.bg-primary { background-color: var(--portal-blue) !important; }

.brand-mark {
    align-items: center;
    background: var(--portal-green);
    border-radius: .8rem;
    color: #fff;
    display: inline-flex;
    font-size: .9rem;
    font-weight: 800;
    height: 2.75rem;
    justify-content: center;
    letter-spacing: .03em;
    width: 2.75rem;
}

.brand-mark-sm { border-radius: .55rem; height: 2rem; width: 2rem; }

.auth-body {
    background: linear-gradient(145deg, var(--portal-blue) 0 42%, #f5f7fa 42% 100%);
    min-height: 100vh;
}

.auth-shell { max-width: 31rem; }

.auth-brand {
    align-items: center;
    color: #fff;
    display: flex;
    font-size: 1.1rem;
    font-weight: 700;
    gap: .75rem;
    margin: 1rem 0 2rem;
}

.auth-card, .content-card, .stat-card {
    background: #fff;
    border: 1px solid #e6ebf0;
    border-radius: 1rem;
    box-shadow: 0 10px 30px rgb(16 57 95 / 8%);
}

.auth-card { padding: 1.5rem; }

.eyebrow {
    color: var(--portal-green);
    font-size: .75rem;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.otp-input { font-size: 1.5rem; letter-spacing: .35em; text-align: center; }

.mobile-header {
    align-items: center;
    background: var(--portal-blue);
    color: #fff;
    display: flex;
    gap: .7rem;
    justify-content: space-between;
    min-height: 4rem;
    padding: .65rem 1rem;
}

.app-shell { min-height: 100vh; }

.sidebar {
    background: var(--portal-blue);
    color: #fff;
    flex-direction: column;
    inset: 0 auto 0 0;
    padding: 1.5rem 1rem;
    position: fixed;
    width: 16rem;
}

.sidebar-brand {
    align-items: center;
    color: #fff;
    display: flex;
    font-size: 1.1rem;
    font-weight: 700;
    gap: .75rem;
    margin-bottom: 2rem;
    padding: 0 .5rem;
    text-decoration: none;
}

.sidebar-nav { display: grid; gap: .35rem; }
.district-switcher { border-bottom: 1px solid rgb(255 255 255 / 16%); margin-bottom: 1rem; padding: 0 .5rem 1rem; }
.district-switcher label { color: rgb(255 255 255 / 70%); display: block; font-size: .7rem; font-weight: 700; letter-spacing: .08em; margin-bottom: .35rem; text-transform: uppercase; }
.district-context { border-bottom: 1px solid rgb(255 255 255 / 16%); margin-bottom: 1rem; padding: 0 .5rem 1rem; }
.district-context span { color: rgb(255 255 255 / 65%); display: block; font-size: .68rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.district-context strong { display: block; margin-top: .25rem; }
.social-links { display: flex; flex-wrap: wrap; gap: .35rem .75rem; }
.social-links a { font-size: .8rem; font-weight: 600; }
.directory-search { max-width: 46rem; }
.directory-search .input-group-text { background: #fff; color: #667085; }
.directory-search .form-control { border-left: 0; }
.directory-search .btn-primary { --bs-btn-bg: var(--portal-blue); --bs-btn-border-color: var(--portal-blue); }
.search-clear { display: inline-block; font-size: .9rem; margin-top: .55rem; }
.result-count { color: #667085; font-size: .85rem; font-weight: 700; }
.directory-grid { display: grid; gap: 1rem; }
.directory-card { background: #fff; border: 1px solid #e6ebf0; border-radius: 1rem; box-shadow: 0 10px 30px rgb(16 57 95 / 8%); min-width: 0; padding: 1.25rem; }
.directory-card-heading { align-items: flex-start; display: flex; gap: .75rem; justify-content: space-between; }
.directory-card-heading h2 { color: var(--portal-text); font-size: 1.25rem; margin: 0; overflow-wrap: anywhere; }
.icon-button { align-items: center; background: var(--portal-blue-soft); border-radius: .65rem; color: var(--portal-blue); display: inline-flex; flex: 0 0 auto; height: 2.5rem; justify-content: center; text-decoration: none; width: 2.5rem; }
.icon-button:hover, .icon-button:focus { background: var(--portal-blue); color: #fff; }
.directory-details { border-top: 1px solid #e6ebf0; display: grid; gap: 1.15rem; margin: 1rem 0 0; padding-top: 1rem; }
.directory-details div { min-width: 0; }
.directory-details dt { color: #667085; font-size: .68rem; letter-spacing: .08em; margin-bottom: .25rem; text-transform: uppercase; }
.directory-details dd { margin: 0; overflow-wrap: anywhere; }
.detail-row { align-items: flex-start; display: grid; gap: .8rem; grid-template-columns: 1.7rem minmax(0, 1fr); }
.detail-icon { color: #718096; padding-top: .1rem; }
.status-badge { background: #eaf6ee; border-radius: 999px; color: var(--portal-green-dark); display: inline-block; font-size: .78rem; font-weight: 700; padding: .3rem .65rem; }
.directory-links { border-top: 1px solid #e6ebf0; display: flex; flex-wrap: wrap; gap: .5rem 1rem; margin-top: 1rem; padding-top: 1rem; }
.directory-links a { font-size: .85rem; font-weight: 600; }
.directory-actions { border-top: 1px solid #e6ebf0; margin-top: 1rem; padding-top: 1rem; }
.person-card-heading { align-items: center; display: flex; gap: .85rem; }
.person-card-heading h2 { font-size: 1.15rem; margin: 0 0 .35rem; }
.person-avatar { align-items: center; background: var(--portal-blue-soft); border-radius: 50%; color: var(--portal-blue); display: inline-flex; flex: 0 0 auto; font-size: .9rem; font-weight: 800; height: 3rem; justify-content: center; width: 3rem; }
.relationship-badge { color: var(--portal-green-dark); font-size: .78rem; font-weight: 700; text-transform: uppercase; }
.position-list { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: 1rem; }
.position-list span { background: #eef2f6; border-radius: 999px; color: #475467; font-size: .78rem; padding: .3rem .65rem; }
.person-contact { display: grid; gap: .3rem; margin-top: 1rem; overflow-wrap: anywhere; }
.person-contact a { font-size: .9rem; }
.profile-state { border-top: 1px solid #e6ebf0; color: #667085; font-size: .78rem; margin-top: 1rem; padding-top: .8rem; }
.position-options { display: grid; gap: .6rem; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); }
.position-option { align-items: center; border: 1px solid #d9e0e7; border-radius: .7rem; cursor: pointer; display: flex; gap: .65rem; min-height: 3rem; padding: .7rem .8rem; }
.position-option small { color: #667085; display: block; font-size: .7rem; }
.position-option:has(input:checked) { background: var(--portal-blue-soft); border-color: var(--portal-blue); color: var(--portal-blue-dark); }
.assignment-editor { border: 1px solid #e6ebf0; border-radius: .85rem; margin-top: 1rem; padding: 1rem; }
.assignment-editor-heading strong, .assignment-editor-heading small { display: block; }
.assignment-editor-heading small { color: #667085; font-size: .78rem; margin-top: .15rem; }
.assignment-add { background: #f8fafc; border-radius: .8rem; padding: 1rem; }
.match-panel { background: #fff8e6; border: 1px solid #f0d58a; border-radius: .85rem; padding: 1rem; }
.match-card { align-items: center; background: #fff; border-radius: .7rem; display: flex; gap: 1rem; justify-content: space-between; margin-top: .65rem; padding: .8rem; }
.match-card small { color: #667085; display: block; margin-top: .2rem; }
.login-methods { display: grid; gap: .65rem; }
.login-methods > div { align-items: center; border: 1px solid #e6ebf0; border-radius: .7rem; display: flex; gap: 1rem; justify-content: space-between; padding: .8rem; }
.login-methods small { color: #667085; display: block; overflow-wrap: anywhere; }
.conference-picker { display: grid; gap: .5rem; max-width: 42rem; }
.delegate-grid { display: grid; gap: 1rem; }
.delegate-card-heading { align-items: center; display: flex; gap: 1rem; justify-content: space-between; }
.delegate-count { align-items: center; background: var(--portal-blue-soft); border-radius: 999px; color: var(--portal-blue); display: inline-flex; font-size: 1.1rem; font-weight: 800; height: 2.7rem; justify-content: center; min-width: 2.7rem; padding: 0 .65rem; }
.delegate-requirements { display: grid; gap: .65rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.delegate-requirements > div { background: #f8fafc; border-radius: .75rem; padding: .8rem; }
.delegate-requirements span, .delegate-requirements small { color: #667085; display: block; font-size: .72rem; }
.delegate-requirements strong { color: var(--portal-blue); display: block; font-size: 1.35rem; margin: .2rem 0; }
.allocation-form { border-bottom: 1px solid #e6ebf0; margin-bottom: 1rem; padding-bottom: 1rem; }
.delegate-list { border-top: 1px solid #e6ebf0; padding-top: 1rem; }
.delegate-person { align-items: center; display: flex; gap: 1rem; justify-content: space-between; padding: .65rem 0; }
.delegate-person + .delegate-person { border-top: 1px solid #eef2f6; }
.delegate-person small { color: #667085; display: block; margin-top: .15rem; }
.delegate-add { background: #f8fafc; border-radius: .8rem; padding: 1rem; }
.district-card form { margin-top: 1.25rem; }

.sidebar-nav a {
    border-radius: .65rem;
    color: rgb(255 255 255 / 78%);
    font-weight: 600;
    padding: .75rem .9rem;
    text-decoration: none;
}

.sidebar-nav a:hover, .sidebar-nav a.active {
    background: rgb(255 255 255 / 12%);
    color: #fff;
}

.sidebar-footer { margin-top: auto; }
.platform-return { margin-top: 1.5rem; }
.sidebar-mobile { background: var(--portal-blue); display: flex; flex-direction: column; }
.sidebar-mobile .sidebar-footer { margin-top: 2rem; }

.main-content { padding: 1.25rem; }

.page-header {
    align-items: flex-start;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    justify-content: space-between;
}

.page-header h1 { font-size: clamp(1.8rem, 4vw, 2.5rem); }

.stat-card { height: 100%; padding: 1.25rem; }
.dashboard-link-card { display: block; text-decoration: none; }
.dashboard-link-card small { color: var(--portal-green-dark); display: block; font-weight: 700; margin-top: .8rem; }
.dashboard-actions { display: grid; gap: .65rem; margin-top: 1rem; }
.dashboard-actions a { background: var(--portal-blue-soft); border-radius: .7rem; color: var(--portal-blue); font-weight: 700; padding: .8rem 1rem; text-decoration: none; }
.platform-district-stats { display: flex; gap: 1.5rem; margin: 1.25rem 0; }
.platform-district-stats span { color: #667085; font-size: .85rem; }
.platform-district-stats strong { color: var(--portal-blue); display: block; font-size: 1.5rem; }
.stat-card span { color: #667085; display: block; font-size: .9rem; }
.stat-card strong { color: var(--portal-blue); display: block; font-size: 2rem; margin-top: .35rem; }
.accent-card { border-top: .25rem solid var(--portal-green); }
.content-card { padding: 1.25rem; }
.invitation-actions { display: flex; flex-wrap: wrap; gap: .75rem; }
.invitation-actions form { margin: 0; }
.empty-state { padding: 3rem 1.25rem; text-align: center; }
.table > :not(caption) > * > * { padding: 1rem 1.25rem; }
.table thead th { background: #f8fafc; color: #667085; font-size: .75rem; letter-spacing: .06em; text-transform: uppercase; }
.form-section h2 { color: var(--portal-blue); margin-bottom: 1rem; }

@media (min-width: 576px) {
    .auth-card { padding: 2rem; }
    .page-header { align-items: center; flex-direction: row; }
}

@media (min-width: 992px) {
    .main-content { margin-left: 16rem; padding: 2.5rem; }
    .directory-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .directory-details { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .delegate-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}