/* ============================================================
   Reusable UI Components
   Used across multiple views
   ============================================================ */

/* ── Status Badges ── */
.enr-status-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 10px;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 500;
    white-space: nowrap;
}

.enr-status-unacknowledged {
    background-color: #f1f5f9;
    color: #64748b;
}

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

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

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

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

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

/* ── Tag Type Badges ── */
.enr-tag-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 9px;
    border-radius: 20px;
    font-size: 0.6875rem;
    font-weight: 500;
    white-space: nowrap;
}

.enr-tag-cohort {
    background-color: #F5F3FF;
    color: #7C3AED;
}

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

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

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

/* ── KPI Cards ── */
.enr-kpi-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 16px 20px;
    cursor: pointer;
    transition: border-color 0.15s, box-shadow 0.15s;
    text-decoration: none;
    display: block;
}

    .enr-kpi-card:hover {
        border-color: #4F46E5;
        box-shadow: 0 2px 8px rgba(79, 70, 229, 0.10);
        text-decoration: none;
    }

    .enr-kpi-card.active {
        border-color: #4F46E5;
        background-color: #EEF2FF;
    }

.enr-kpi-label {
    font-size: 0.75rem;
    font-weight: 500;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 4px;
}

.enr-kpi-value {
    font-size: 1.75rem;
    font-weight: 700;
    color: #0f172a;
    line-height: 1.1;
}

.enr-kpi-value-amber {
    color: #F59E0B;
}

.enr-kpi-value-red {
    color: #EF4444;
}

.enr-kpi-value-green {
    color: #22C55E;
}

/* ── Data Table ── */
.enr-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
}

    .enr-table thead th {
        background-color: #f8f9fa;
        border-bottom: 1px solid #e2e8f0;
        padding: 10px 14px;
        font-size: 0.75rem;
        font-weight: 600;
        color: #64748b;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        white-space: nowrap;
    }

    .enr-table tbody tr {
        border-bottom: 1px solid #f1f5f9;
        transition: background-color 0.1s;
        cursor: pointer;
    }

        .enr-table tbody tr:hover {
            background-color: #f8f9fa;
        }

    .enr-table tbody td {
        padding: 12px 14px;
        color: #334155;
        vertical-align: middle;
    }

        .enr-table tbody td.enr-td-primary {
            font-weight: 500;
            color: #0f172a;
        }

/* ── Clickable table row ── */
.enr-row-clickable {
    cursor: pointer;
}

/* ── Family number link ── */
.enr-family-number-link {
    text-decoration: none;
}

    .enr-family-number-link:hover .enr-family-number-chip {
        background: #e2e8f0;
    }

/* ── Family number mono chip ── */
.enr-family-number-chip {
    font-family: var(--bs-font-monospace);
    font-weight: 500;
    font-size: 0.75rem;
    color: #64748b;
    background: #f1f5f9;
    border-radius: 4px;
    padding: 1px 7px;
}

/* ── Cohort tag chip ── */
.enr-cohort-chip {
    font-family: var(--bs-font-monospace);
    font-weight: 500;
    font-size: 0.75rem;
    color: #4F46E5;
    background: #EEF2FF;
    border-radius: 4px;
    padding: 1px 7px;
    white-space: nowrap;
}

/* ── Toast notification ── */
.enr-toast-container {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 1100;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.enr-toast {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #0f172a;
    color: #f8fafc;
    padding: 12px 18px;
    border-radius: 8px;
    font-size: 0.875rem;
    font-weight: 500;
    box-shadow: 0 4px 16px rgba(15, 23, 42, 0.18);
    animation: enr-toast-in 0.25s ease;
    min-width: 280px;
    max-width: 400px;
}

.enr-toast-success {
    border-left: 3px solid #22C55E;
}

@keyframes enr-toast-in {
    from {
        opacity: 0;
        transform: translateY(12px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ── Empty state ── */
.enr-empty-state {
    text-align: center;
    padding: 56px 24px;
    color: #94a3b8;
}

.enr-empty-state-title {
    font-size: 0.9375rem;
    font-weight: 600;
    color: #64748b;
    margin-bottom: 6px;
}

.enr-empty-state-desc {
    font-size: 0.875rem;
    color: #94a3b8;
}

/* ── Page header bar ── */
.enr-page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 24px;
    flex-wrap: wrap;
    gap: 12px;
}

.enr-page-title {
    font-size: 1.125rem;
    font-weight: 700;
    color: #0f172a;
    margin: 0;
}

/* ── Search + filter bar ── */
.enr-hidden {
    display: none !important;
}

.enr-filter-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.enr-search-input {
    min-width: 220px;
}

/* ============================================================
   Family Profile (Detail) Page Components
   ============================================================ */

/* ── Detail page header ── */
.enr-detail-header {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 24px;
}

.enr-detail-family-number {
    font-family: var(--bs-font-monospace);
    font-size: 1rem;
    font-weight: 700;
    color: #0f172a;        /* dark — primary identifier */
    background: #f1f5f9;
    border-radius: 6px;
    padding: 4px 10px;
}

/* ── Vertical divider between primary and secondary header groups ── */
.enr-header-divider {
    display: inline-block;
    width: 1px;
    height: 16px;
    background-color: #e2e8f0;
    border-radius: 1px;
    flex-shrink: 0;
    align-self: center;
    margin: 0 2px;
}

/* ── Rating stars (read-only) ── */
.enr-rating-stars {
    display: inline-flex;
    gap: 2px;
    align-items: center;
}

.enr-star {
    font-size: 1rem;
    color: #e2e8f0;
    line-height: 1;
}

.enr-star-filled {
    color: #F59E0B;
}

/* ── Section header within detail cards ── */
.enr-detail-section-label {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    color: #64748b;
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid #f1f5f9;
}

/* ── Contact card (parent) ── */
.enr-contact-card {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 14px 16px;
}

.enr-contact-name {
    font-size: 0.9375rem;
    font-weight: 600;
    color: #0f172a;
    margin-bottom: 6px;
}

.enr-contact-role {
    font-size: 0.75rem;
    color: #94a3b8;
    font-weight: 400;
    margin-left: 6px;
}

.enr-contact-row {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.8125rem;
    color: #475569;
    margin-top: 4px;
}

    .enr-contact-row svg {
        flex-shrink: 0;
        color: #94a3b8;
    }

/* ── Student card ── */
.enr-student-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 16px 20px;
}

.enr-student-name {
    font-size: 1rem;
    font-weight: 600;
    color: #0f172a;
}

.enr-student-goesby {
    font-size: 0.8125rem;
    font-weight: 400;
    color: #7C3AED;
    font-style: italic;
}

.enr-student-meta {
    font-size: 0.8125rem;
    color: #64748b;
    margin-top: 2px;
}

/* ── NurtureStage pill ── */
.enr-nurture-pill {
    display: inline-flex;
    align-items: center;
    padding: 2px 9px;
    border-radius: 20px;
    font-size: 0.6875rem;
    font-weight: 500;
    white-space: nowrap;
}

.enr-nurture-longrange {
    background: #f1f5f9;
    color: #64748b;
}

.enr-nurture-midrange {
    background: #EEF2FF;
    color: #4F46E5;
}

.enr-nurture-nearterm {
    background: #FFFBEB;
    color: #B45309;
}

.enr-nurture-applicationyear {
    background: #FEF2F2;
    color: #DC2626;
}

/* ── EnrolmentStatus badge ── */
.enr-enrolment-prospect {
    background: #f1f5f9;
    color: #64748b;
}

.enr-enrolment-applicant {
    background: #EEF2FF;
    color: #4F46E5;
}

.enr-enrolment-accepted {
    background: #F0FDF4;
    color: #15803D;
}

.enr-enrolment-student {
    background: #0f172a;
    color: #f8fafc;
}

.enr-enrolment-alumni {
    background: #f8fafc;
    color: #94a3b8;
    border: 1px solid #e2e8f0;
}

/* ── Interest chip ── */
.enr-interest-chip {
    display: inline-flex;
    align-items: center;
    background: #F0FDF4;
    color: #15803D;
    border-radius: 20px;
    font-size: 0.6875rem;
    font-weight: 500;
    padding: 2px 9px;
    white-space: nowrap;
}

.enr-add-chip-stub {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    background: transparent;
    border: 1px dashed #cbd5e1;
    color: #94a3b8;
    border-radius: 20px;
    font-size: 0.6875rem;
    font-weight: 500;
    padding: 2px 9px;
    cursor: pointer;
    white-space: nowrap;
}

    .enr-add-chip-stub:hover {
        border-color: #7C3AED;
        color: #7C3AED;
    }

/* ── Quick Action bar ── */
.enr-action-bar {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 24px;
}

/* ── AI Next Action panel ── */
.enr-ai-panel {
    background: #F5F3FF;
    border: 1px solid #ddd6fe;
    border-radius: 10px;
    padding: 14px 16px;
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.enr-ai-panel-empty {
    background: #f8fafc;
    border: 1px dashed #cbd5e1;
    justify-content: center;  /* centre the empty-state stack horizontally */
}

.enr-ai-panel-text {
    font-size: 0.875rem;
    color: #4F46E5;
    font-weight: 500;
    flex: 1;
}

.enr-ai-panel-empty .enr-ai-panel-text {
    color: #94a3b8;
    font-style: italic;
    font-weight: 400;
}

.enr-ai-generated-at {
    font-size: 0.75rem;
    color: #94a3b8;
    margin-top: 3px;
}

/* ── AI Next Action — intentional empty state ── */
/* Centered stack: icon → message → generate CTA */
.enr-ai-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    width: 100%;
    padding: 8px 0 4px;
    gap: 8px;
}

/* Large bolt icon in the empty state — light lavender tint via currentColor */
.enr-ai-empty-icon {
    opacity: 0.7;
    color: #ddd6fe;
}

/* Small bolt icon in the "AI Next Action" section label */
.enr-ai-section-icon {
    color: #7C3AED;
}

/* ── SVG icon colour utilities ──────────────────────────────────────────────
   Apply to <svg> elements using stroke="currentColor"; the class sets `color`
   which SVG inherits as the stroke value. Avoids hardcoded hex in HTML. */
.enr-empty-state-icon {
    color: #cbd5e1;   /* slate-300 — large muted icons in empty states */
    opacity: 0.8;
}

.enr-icon-success {
    color: #22C55E;   /* green-500 — CASL consent tick, success toast icon */
}

.enr-icon-muted {
    color: #64748b;   /* slate-500 — neutral/secondary icon colour */
}

.enr-ai-empty-text {
    font-size: 0.8125rem;
    color: #94a3b8;
    margin: 0;
}

/* ── Next Task card ── */
.enr-task-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 12px 16px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.enr-task-card-overdue {
    border-color: #FECACA;
    background: #FEF2F2;
}

/* Task card calendar icon — color driven by parent state via CSS cascade */
.enr-task-icon {
    color: #64748b;
    flex-shrink: 0;
}

.enr-task-card-overdue .enr-task-icon {
    color: #DC2626;
}

.enr-task-due-label {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #64748b;
    margin-bottom: 2px;
}

.enr-task-card-overdue .enr-task-due-label {
    color: #DC2626;
}

.enr-task-due-date {
    font-size: 0.875rem;
    font-weight: 500;
    color: #0f172a;
}

.enr-task-card-overdue .enr-task-due-date {
    color: #DC2626;
}

/* ── Communication timeline ── */
.enr-comm-timeline {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.enr-comm-item {
    display: flex;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid #f1f5f9;
}

    .enr-comm-item:last-child {
        border-bottom: none;
    }

.enr-comm-icon {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #f1f5f9;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: #64748b;
}

.enr-comm-icon-outbound {
    background: #EEF2FF;
    color: #4F46E5;
}

.enr-comm-icon-inbound {
    background: #F0FDF4;
    color: #15803D;
}

.enr-comm-icon-note {
    background: #FFFBEB;
    color: #B45309;
}

.enr-comm-icon-ai {
    background: #F5F3FF;
    color: #7C3AED;
}

.enr-comm-body {
    font-size: 0.875rem;
    color: #334155;
    flex: 1;
    min-width: 0;
}

.enr-comm-body-text {
    white-space: pre-line;
    word-break: break-word;
}

.enr-comm-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 4px;
    flex-wrap: wrap;
}

.enr-comm-timestamp {
    font-size: 0.75rem;
    color: #94a3b8;
}

.enr-comm-channel {
    font-size: 0.6875rem;
    font-weight: 500;
    color: #64748b;
    background: #f1f5f9;
    border-radius: 4px;
    padding: 1px 6px;
}

.enr-ai-badge {
    font-size: 0.6875rem;
    font-weight: 500;
    color: #7C3AED;
    background: #F5F3FF;
    border-radius: 4px;
    padding: 1px 6px;
}

.enr-comm-by {
    font-size: 0.75rem;
    color: #94a3b8;
}

/* ============================================================
   Tag System — Library + Picker
   ============================================================ */

/* ── Tag type filter pills ── */
.enr-type-pill {
    border: 1px solid #e2e8f0;
    color: #64748b;
    background: #ffffff;
    border-radius: 20px;
    font-size: 0.8125rem;
    font-weight: 500;
    padding: 4px 14px;
    transition: border-color 0.12s, background 0.12s, color 0.12s;
}

    .enr-type-pill:hover {
        border-color: #4F46E5;
        color: #4F46E5;
    }

.enr-type-pill-active {
    background: #4F46E5;
    border-color: #4F46E5;
    color: #ffffff;
}

    .enr-type-pill-active:hover {
        background: #4338ca;
        border-color: #4338ca;
        color: #ffffff;
    }

/* ── Type section header label ── */
.enr-type-section-label {
    display: inline-flex;
    align-items: center;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 3px 10px;
    border-radius: 4px;
}

.enr-type-header-cohort {
    background: #F5F3FF;
    color: #7C3AED;
}

.enr-type-header-engagement {
    background: #FFFBEB;
    color: #B45309;
}

.enr-type-header-interest {
    background: #EEF2FF;
    color: #4F46E5;
}

.enr-type-header-recruitment {
    background: #f1f5f9;
    color: #64748b;
}

/* ── Tag library: section add button ── */
.enr-section-add-btn {
    font-size: 0.75rem;
    padding: 3px 10px;
    border-radius: 6px;
    color: #64748b;
}

/* ── Family count badge ── */
.enr-family-count-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #f1f5f9;
    color: #334155;
    font-size: 0.75rem;
    font-weight: 600;
    border-radius: 20px;
    min-width: 28px;
    padding: 1px 8px;
}

/* ── Expired / inactive rows ── */
.enr-row-expired {
    opacity: 0.5;
}

.enr-row-inactive {
    opacity: 0.5;
}

/* ── Empty state inline (inside section) ── */
.enr-empty-state-inline {
    font-size: 0.875rem;
    color: #cbd5e1;
    font-style: italic;
    padding: 12px 4px;
}

/* ── Color picker input ── */
.enr-color-picker {
    width: 48px;
    height: 36px;
    padding: 2px;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    cursor: pointer;
    background: none;
}

/* ── Tag badge with × remove button ── */
.enr-tag-badge-removable {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.enr-tag-remove-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    line-height: 1;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    color: inherit;
    opacity: 0.6;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    transition: opacity 0.12s, background 0.12s;
}

    .enr-tag-remove-btn:hover {
        opacity: 1;
        background: rgba(0,0,0,0.10);
    }

/* ── Compact student-card tag area ── */
.enr-student-tags-wrap {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin-top: 8px;
}

.enr-student-tags-row {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
}

.enr-student-tags-wrap .enr-tag-group {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-bottom: 0;
}

.enr-student-tags-wrap .enr-tag-group-label {
    display: none;
}

.enr-tags-empty-inline {
    font-size: 0.75rem;
    color: #94a3b8;
    font-style: italic;
}

/* Small "+ Tag" chip button */
.enr-add-chip-stub-sm {
    font-size: 0.6875rem;
    padding: 2px 7px;
}

/* Compact dropdown aligned to the left of the button */
.enr-tag-dropdown-sm {
    min-width: 180px;
    max-width: 220px;
}

/* ── Tag picker dropdown wrapper ── */
.enr-tag-picker-wrap {
    position: relative;
}

.enr-tag-dropdown {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    z-index: 200;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    box-shadow: 0 4px 16px rgba(15,23,42,0.10);
    min-width: 220px;
    max-width: 280px;
    overflow: hidden;
}

.enr-tag-dropdown-search {
    padding: 8px 10px;
    border-bottom: 1px solid #f1f5f9;
}

.enr-tag-dropdown-list {
    max-height: 200px;
    overflow-y: auto;
    padding: 4px 0;
}

.enr-tag-dropdown-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
    text-align: left;
    background: none;
    border: none;
    padding: 6px 12px;
    cursor: pointer;
    transition: background 0.1s;
}

    .enr-tag-dropdown-item:hover {
        background: #f8f9fa;
    }

.enr-tag-dropdown-empty {
    padding: 10px 12px;
    font-size: 0.8125rem;
    color: #94a3b8;
    font-style: italic;
}

/* ── Fade-in for newly assigned tags ── */
@keyframes enr-tag-fadein {
    from {
        opacity: 0;
        transform: scale(0.85);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

.enr-tag-fadein {
    animation: enr-tag-fadein 0.25s ease forwards;
}

/* ============================================================
   Bulk Selection Bar
   ============================================================ */

.enr-bulk-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    background: #EEF2FF;
    border: 1px solid #c7d2fe;
    border-radius: 8px;
    padding: 10px 16px;
    margin-bottom: 10px;
    font-size: 0.875rem;
}

.enr-bulk-bar-left {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
}

.enr-bulk-count {
    font-weight: 600;
    color: #4F46E5;
}

.enr-bulk-select-all-btn {
    font-size: 0.8125rem;
    color: #4F46E5;
    text-decoration: underline;
    padding: 0;
}

    .enr-bulk-select-all-btn:hover {
        color: #4338ca;
    }

.enr-bulk-clear-btn {
    font-size: 0.8125rem;
    color: #64748b;
    padding: 0;
}

.enr-bulk-bar-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

/* ── Table — checkbox column ── */

.enr-col-check {
    width: 40px;
    padding-left: 14px !important;
    padding-right: 8px !important;
}

.enr-table tbody tr.enr-row-selected {
    background-color: #EEF2FF;
}

    .enr-table tbody tr.enr-row-selected:hover {
        background-color: #e0e7ff;
    }

/* ── Advanced filter — active badge on button ── */

.enr-advanced-filter-btn {
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
}

.enr-filter-active-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #4F46E5;
    color: #ffffff;
    border-radius: 20px;
    font-size: 0.6875rem;
    font-weight: 700;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    margin-left: 6px;
    line-height: 1;
}

/* ── Filter select width constraint ── */

.enr-filter-select {
    max-width: 180px;
}

/* ── Table loading state ── */

.enr-loading {
    opacity: 0.55;
    pointer-events: none;
    transition: opacity 0.15s;
}

/* ── No-tags message in bulk assign dropdown ── */

.enr-no-tags-msg {
    font-size: 0.8125rem;
}

/* ── Toast error variant ── */

.enr-toast-error {
    border-left: 3px solid #EF4444;
}

/* ── DB offline banner ── */

.enr-db-offline-banner {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #FFFBEB;
    border: 1px solid #FDE68A;
    border-radius: 8px;
    padding: 10px 16px;
    font-size: 0.875rem;
    font-weight: 500;
    color: #92400E;
    margin-bottom: 20px;
}

/* ============================================================
   Badge / Pill System — Semantic Base Classes
   ============================================================
   There are four semantic pillars for inline labels in this app:

   1. enr-status-badge  — lead & enrolment status (coloured pill, rounded)
      Modifiers: enr-status-{leadStatus} | enr-enrolment-{enrolmentStatus}

   2. enr-tag-badge     — assigned tag chips, driven by per-tag ColorHex
      Modifiers: enr-tag-{cohort|engagement|interest|recruitment}
      Rendered exclusively via _TagChip.cshtml partial.

   3. enr-cohort-chip   — read-only cohort display outside the tag picker
      (monospace font, square corners — visually distinct from tag chip)

   4. enr-nurture-pill  — nurture stage pill on student cards
      Modifiers: enr-nurture-{longrange|midrange|nearterm|applicationyear}

   All other badge-like elements (family-role, structure, contact-priority,
   linked-child, family-number, sibling, eligibility) have dedicated classes
   below and must NOT reuse the four pillars above.
   ============================================================ */

/* ── detail-value modifier: preserve line breaks (e.g. Notes field) ── */
.enr-detail-value-pre {
    white-space: pre-line;
}

/* ── AI panel body flex container ── */
.enr-ai-panel-body {
    flex: 1;
    min-width: 0;
}

/* ── Communication timeline section header padding ── */
.enr-comm-timeline-header {
    padding: 16px 20px 0;
}

/* ── Tag library: section count text ── */
.enr-tag-section-count {
    font-size: 0.8125rem;
}

/* ── Tag library: description column ── */
.enr-tag-desc-cell {
    max-width: 280px;
}

.enr-tag-desc-text {
    font-size: 0.8125rem;
}

.enr-tag-desc-empty {
    font-size: 0.8125rem;
    color: #cbd5e1;
}

/* ── Tag library: date range column ── */
.enr-tag-date-cell {
    font-size: 0.8125rem;
    white-space: nowrap;
}

.enr-tag-no-dates {
    color: #cbd5e1;
}

/* ── Detail label/value pairs ── */
.enr-detail-label {
    font-size: 0.75rem;
    font-weight: 500;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 2px;
}

.enr-detail-value {
    font-size: 0.875rem;
    color: #334155;
}

.enr-detail-value-empty {
    font-size: 0.875rem;
    color: #cbd5e1;
    font-style: italic;
}

/* ── Spinner / Loading overlay ── */

@keyframes enr-spin {
    to {
        transform: rotate(360deg);
    }
}

.enr-spinner {
    width: 36px;
    height: 36px;
    border: 3px solid #e2e8f0;
    border-top-color: #4F46E5;
    border-radius: 50%;
    animation: enr-spin 0.7s linear infinite;
}

.enr-spinner-inline {
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 2px solid rgba(255,255,255,0.4);
    border-top-color: #ffffff;
    border-radius: 50%;
    animation: enr-spin 0.7s linear infinite;
    vertical-align: middle;
    margin-left: 6px;
}

.enr-spinner-overlay {
    position: fixed;
    inset: 0;
    background: rgba(255,255,255,0.6);
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ── Pagination bar ── */

.enr-pagination-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
    padding: 10px 16px;
    border-top: 1px solid #f1f5f9;
    font-size: 0.875rem;
}

.enr-pagination-info {
    font-size: 0.8125rem;
    color: #64748b;
}

.enr-pagination-controls {
    display: flex;
    align-items: center;
    gap: 4px;
}

.enr-pagination-ellipsis {
    font-size: 0.8125rem;
    color: #94a3b8;
    padding: 0 4px;
}

.enr-page-size-select {
    width: 70px;
}

/* ── Send Email button ── */

.enr-send-email-btn {
    background-color: #1D9E75;
    color: #ffffff;
    border: none;
}

    .enr-send-email-btn:hover {
        background-color: #178a64;
        color: #ffffff;
    }

    .enr-send-email-btn:focus {
        background-color: #178a64;
        color: #ffffff;
        box-shadow: 0 0 0 0.2rem rgba(29,158,117,0.3);
    }

/* ── Email composer — full-page layout wrapper (Composer/Index.cshtml) ── */
.enr-composer-body {
    display: flex;
    min-height: calc(100vh - 240px);
    border: 1px solid #e2e8f0;
    border-radius: 0.5rem;
    overflow: hidden;
}

/* ── Email composer modal ── */

.enr-email-modal-body {
    min-height: 520px;
}

.enr-email-compose-panel {
    width: 55%;
    min-width: 320px;
    flex-shrink: 0;
    overflow-y: auto;
    /* Clear separator matching the app's slate-200 divider token;
       replaces Bootstrap's generic border-end on the element */
    border-right: 1px solid #e2e8f0;
}

.enr-email-preview-panel {
    background: #f8fafc;
}

.enr-compose-label {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    color: #64748b;
}

.enr-preview-hint {
    font-size: 0.75rem;
    color: #94a3b8;
    font-style: italic;
}

/* ── Amber placeholder legend (preview panel header) ── */
/* Shows a live sample of the amber token style + label.
   Sized to be clearly legible without dominating the header row. */
.enr-preview-legend {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.875rem;
    color: #475569;
    background: #fffbeb;
    border: 1px solid #f59e0b;
    border-radius: 6px;
    padding: 5px 12px;
}

.enr-preview-legend-text {
    color: #78350f;
    font-size: 0.875rem;
    font-weight: 500;
}

.enr-preview-subject {
    font-size: 0.9375rem;
    font-weight: 600;
    color: #0f172a;
    padding-bottom: 12px;
    border-bottom: 1px solid #e2e8f0;
}

.enr-preview-content {
    font-size: 0.875rem;
    color: #334155;
    white-space: pre-wrap;
    word-break: break-word;
}

.enr-preview-body {
    flex: 1;
}

.enr-email-body-area {
    resize: vertical;
    min-height: 180px;
}

/* ── Placeholder chips ── */

.enr-placeholder-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.enr-placeholder-chip {
    display: inline-flex;
    align-items: center;
    padding: 2px 10px;
    border-radius: 20px;
    border: 1px solid #c7d2fe;
    background: #EEF2FF;
    color: #4F46E5;
    font-size: 0.75rem;
    font-weight: 500;
    cursor: pointer;
    font-family: var(--bs-font-monospace);
    transition: background 0.1s, border-color 0.1s;
}

    .enr-placeholder-chip:hover {
        background: #e0e7ff;
        border-color: #a5b4fc;
    }

/* ── AI generate button ── */

.enr-ai-generate-btn {
    display: inline-flex;
    align-items: center;
    background: #4F46E5;
    color: #fff;
    border: none;
    border-radius: 6px;
    padding: 5px 14px;
    font-size: 0.8125rem;
    font-weight: 500;
    transition: background 0.15s;
}

    .enr-ai-generate-btn:hover:not(:disabled) {
        background: #4338CA;
        color: #fff;
    }

    .enr-ai-generate-btn:disabled {
        opacity: 0.65;
        cursor: not-allowed;
    }

/* ── Preview unresolved placeholder highlight ── */

.enr-preview-unresolved {
    background: #FEF3C7;
    color: #92400E;
    border-radius: 3px;
    padding: 0 2px;
    font-size: inherit;  /* ensure it does not override parent hint font-size */
}

/* ── Composer send-bar hint text ── */
.enr-composer-send-hint {
    font-size: 0.8rem;
}

/* ── AI inline error ── */

.enr-ai-error {
    font-size: 0.8125rem;
    color: #DC2626;
}

/* ── AI generate button: loading state ── */

/* Hidden by default — shown only when .enr-btn-loading is on the button */
.enr-btn-generating-label {
    display: none;
}

.enr-ai-generate-btn .enr-spinner-inline {
    display: none;
    margin-left: 4px;
}

.enr-btn-loading .enr-btn-text,
.enr-btn-loading .enr-btn-icon {
    display: none;
}

.enr-btn-loading .enr-spinner-inline {
    display: inline-block;
}

.enr-btn-loading .enr-btn-generating-label {
    display: inline;
}

/* Fields dimmed while AI is generating */
.enr-field-loading {
    opacity: 0.5;
    pointer-events: none;
    transition: opacity 0.15s;
}

/* ── Tag groups on Family Profile Tags card ── */

.enr-tag-group {
    margin-bottom: 12px;
}

    .enr-tag-group:last-of-type {
        margin-bottom: 0;
    }

.enr-tag-group-label {
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #94a3b8;
    margin-bottom: 6px;
}

.enr-tag-count-badge {
    font-size: 0.75rem;
    color: #64748b;
    font-weight: 500;
}

/* TagType label shown to the right of each tag in the dropdown */
.enr-tag-type-label {
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #94a3b8;
    flex-shrink: 0;
}

/* ============================================================
   Family Detail — Parents & Siblings (new fields)
   ============================================================ */

/* ── Muted contact card (deceased / absent parent) ── */
.enr-contact-card-muted {
    opacity: 0.55;
    background: #f8fafc;
}

/* ── Badges row on contact card ── */
.enr-contact-badges {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
    margin-bottom: 6px;
}

/* ── Family role badge (Mother / Father / Guardian …) ── */
.enr-family-role-badge {
    display: inline-flex;
    align-items: center;
    padding: 1px 8px;
    border-radius: 20px;
    font-size: 0.6875rem;
    font-weight: 500;
    background: #f1f5f9;
    color: #64748b;
    white-space: nowrap;
}

/* ── Contact priority badges ── */
.enr-contact-priority-primary {
    display: inline-flex;
    align-items: center;
    padding: 1px 8px;
    border-radius: 20px;
    font-size: 0.6875rem;
    font-weight: 600;
    background: #EEF2FF;
    color: #4F46E5;
    white-space: nowrap;
}

.enr-contact-priority-secondary {
    display: inline-flex;
    align-items: center;
    padding: 1px 8px;
    border-radius: 20px;
    font-size: 0.6875rem;
    font-weight: 500;
    background: #f1f5f9;
    color: #94a3b8;
    white-space: nowrap;
}

/* ── Contact type badge (fallback for types other than Primary / Secondary) ── */
.enr-contact-type-badge {
    display: inline-flex;
    align-items: center;
    padding: 1px 8px;
    border-radius: 20px;
    font-size: 0.6875rem;
    font-weight: 500;
    background: #f1f5f9;
    color: #64748b;
    white-space: nowrap;
}

/* ── "Not receiving comms" badge ── */
.enr-not-receiving-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 0.6875rem;
    font-weight: 500;
    background: #f1f5f9;
    color: #94a3b8;
    margin-top: 4px;
}

/* ── Subdued text on contact card (relationship, custody notes) ── */
.enr-contact-subtext {
    font-size: 0.75rem;
    color: #94a3b8;
}

/* ── CASL consent text ── */
.enr-casl-text {
    font-size: 0.75rem;
    color: #15803D;
}

/* ── Linked child chip on parent card ── */
.enr-linked-child-chip {
    display: inline-flex;
    align-items: center;
    padding: 1px 8px;
    border-radius: 20px;
    font-size: 0.6875rem;
    font-weight: 500;
    background: #F5F3FF;
    color: #7C3AED;
    white-space: nowrap;
}

/* ── FamilyStructure badge in page header ── */
.enr-structure-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 10px;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 500;
    background: #f1f5f9;
    color: #64748b;
    white-space: nowrap;
}

/* ── HouseholdNotes block below page header ── */
.enr-household-notes {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-left: 3px solid #7C3AED;
    border-radius: 6px;
    padding: 8px 14px;
    font-size: 0.8125rem;
    color: #475569;
    margin-bottom: 16px;
    white-space: pre-line;
}

/* ── Lead source / date meta text in header ── */
.enr-lead-source-text {
    font-size: 0.8125rem;
    color: #64748b;
}

.enr-detail-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.75rem;
    color: #94a3b8;
}

/* ── Student detail row (entry grade / gender / sibling enrolled) ── */
.enr-student-detail-row {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    font-size: 0.8125rem;
    color: #64748b;
    margin-top: 6px;
}

/* ── Sibling enrolled indicator ── */
.enr-sibling-enrolled {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: #15803D;
}

/* ── Siblings subsection on student card ── */
.enr-student-siblings {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid #f1f5f9;
}

.enr-siblings-label {
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #94a3b8;
    margin-bottom: 6px;
}

/* ── Sibling chip (same family) ── */
.enr-sibling-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 9px;
    border-radius: 20px;
    font-size: 0.6875rem;
    font-weight: 500;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    color: #475569;
    white-space: nowrap;
}

/* ── Cross-family sibling chip (clickable) ── */
a.enr-sibling-chip-cross {
    background: #EEF2FF;
    border-color: #c7d2fe;
    color: #4F46E5;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.1s, border-color 0.1s;
}

    a.enr-sibling-chip-cross:hover {
        background: #e0e7ff;
        border-color: #a5b4fc;
        color: #4F46E5;
    }

/* ── Section header row with right-aligned action (e.g. Students header) ── */
.enr-section-header-with-action {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid #f1f5f9;
}

    .enr-section-header-with-action > .enr-detail-section-label {
        margin-bottom: 0;
        padding-bottom: 0;
        border-bottom: none;
    }

/* ── Modal shared ── */
.enr-modal-header {
    background: #f8fafc;
    border-bottom: 1px solid #e2e8f0;
}

.enr-modal-divider {
    border-color: #e2e8f0;
    margin: 4px 0 0;
}

.enr-modal-error {
    color: #DC2626;
    font-size: 0.85rem;
    padding: 8px 12px;
    background: #FEF2F2;
    border-radius: 6px;
}

.enr-required {
    color: #DC2626;
}

/* ── Edit icon button on contact cards ── */
.enr-edit-icon-btn {
    background: none;
    border: none;
    padding: 2px 4px;
    color: #94a3b8;
    cursor: pointer;
    border-radius: 4px;
    flex-shrink: 0;
    line-height: 1;
    transition: color 0.15s, background 0.15s;
}

    .enr-edit-icon-btn:hover {
        color: #4F46E5;
        background: #EEF2FF;
    }

/* ── Student link rows in parent modals ── */
.enr-student-link-row {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 6px 10px;
    background: #f8fafc;
    border-radius: 6px;
    border: 1px solid #e2e8f0;
    font-size: 0.85rem;
}

.enr-primary-contact-label {
    font-size: 0.78rem;
    color: #64748b;
}

.enr-sibling-rel-select {
    width: auto;
    min-width: 140px;
    font-size: 0.8rem;
    padding: 2px 6px;
}

/* ── Sibling selection — card grid (Add Child modal) ── */
/* Replaces the settings-list row pattern: each existing sibling is a
   clickable card; selected state shows indigo border + relationship dropdown */
.enr-sibling-select-hint {
    font-size: 0.8125rem;
    color: #94a3b8;
    margin: 0 0 8px;
}

.enr-sibling-select-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.enr-sibling-select-card {
    flex: 0 0 auto;
    min-width: 130px;
    max-width: 200px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 10px 12px;
    cursor: pointer;
    background: #fff;
    transition: border-color 0.15s, background 0.15s;
    user-select: none;
}

    .enr-sibling-select-card:hover {
        border-color: #a5b4fc;
        background: #f8f9fa;
    }

    .enr-sibling-select-card:focus-visible {
        outline: 2px solid #4F46E5;
        outline-offset: 2px;
    }

.enr-sibling-select-card-selected {
    border-color: #4F46E5;
    background: #EEF2FF;
}

.enr-sibling-select-name {
    font-size: 0.875rem;
    font-weight: 500;
    color: #1e293b;
}

/* Relationship dropdown — visible only when card is selected */
.enr-sibling-select-rel {
    margin-top: 8px;
    font-size: 0.75rem;
    width: 100%;
}

/* ── Eligibility badge in AddChild modal ── */
.enr-eligibility-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    background: #F5F3FF;
    border: 1px solid #DDD6FE;
    border-radius: 20px;
    font-size: 0.8rem;
    color: #5B21B6;
    font-weight: 500;
}

/* ── Toast container (family detail page) ── */
.enr-toast-container {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 1090;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.enr-toast {
    padding: 10px 18px;
    border-radius: 8px;
    font-size: 0.875rem;
    font-weight: 500;
    opacity: 0;
    transition: opacity 0.25s;
    pointer-events: none;
    min-width: 200px;
}

.enr-toast-visible {
    opacity: 1;
}

.enr-toast-success {
    background: #F0FDF4;
    color: #15803D;
    border: 1px solid #BBF7D0;
}

.enr-toast-error {
    background: #FEF2F2;
    color: #DC2626;
    border: 1px solid #FCA5A5;
}

/* ── Sibling chip with × button ── */
.enr-sibling-chip-removable {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 6px 3px 10px;
}

.enr-sibling-chip-link {
    color: inherit;
    text-decoration: none;
}

    .enr-sibling-chip-link:hover {
        text-decoration: underline;
    }

.enr-sibling-chip-text {
    font-size: 0.8rem;
}

.enr-sibling-unlink-btn {
    background: none;
    border: none;
    padding: 0 2px;
    font-size: 0.9rem;
    line-height: 1;
    color: #94a3b8;
    cursor: pointer;
    border-radius: 3px;
    transition: color 0.12s;
}

    .enr-sibling-unlink-btn:hover {
        color: #DC2626;
    }

/* ── Student search results dropdown ── */
.enr-search-results {
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    background: #fff;
    max-height: 220px;
    overflow-y: auto;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

.enr-search-result-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    padding: 8px 12px;
    cursor: pointer;
    gap: 12px;
    transition: background 0.1s;
    outline: none;
}

    .enr-search-result-row:hover,
    .enr-search-result-row:focus {
        background: #EEF2FF;
    }

.enr-search-result-name {
    font-size: 0.875rem;
    font-weight: 500;
    color: #1e293b;
}

.enr-search-result-meta {
    font-size: 0.775rem;
    color: #64748b;
    white-space: nowrap;
}

.enr-search-result-empty {
    padding: 10px 12px;
    font-size: 0.85rem;
    color: #94a3b8;
}

/* ── Selected student display ── */
.enr-selected-student {
    padding: 8px 12px;
    background: #F0FDF4;
    border: 1px solid #BBF7D0;
    border-radius: 6px;
    font-size: 0.875rem;
    color: #15803D;
    font-weight: 500;
}

/* ============================================================
   Choices.js Integration — Families Index / Email Composer
   Overrides for the Choices.js multi-select widget used in the
   "Send To" field. Scoped under .enr-send-to-choices.
   ============================================================ */

/* Wrapper fills its column */
.enr-send-to-choices {
    width: 100%;
    margin-bottom: 0;
}

/* Input box height/padding matches form-select-sm (~31 px) */
.enr-send-to-choices .choices__inner {
    font-size: 0.875rem;
    min-height: 31px;
    padding: 3px 8px;
    border: 1px solid #dee2e6;
    border-radius: 0.375rem;
    background-color: #fff;
    cursor: pointer;
}

/* Selected pills — tinted indigo style matching enr-contact-priority-primary */
.enr-send-to-choices .choices__list--multiple .choices__item {
    font-size: 0.6875rem;
    font-weight: 500;
    line-height: 1.5;
    background-color: #EEF2FF;
    border: 1px solid #c7d2fe;
    border-radius: 20px;
    padding: 1px 8px;
    margin: 2px 3px 2px 0;
    color: #4F46E5;
}

/* × remove button on selected pills */
.enr-send-to-choices .choices__list--multiple .choices__item .choices__button {
    border-left-color: rgba(79, 70, 229, 0.3);
    opacity: 0.7;
    filter: invert(30%) sepia(80%) saturate(600%) hue-rotate(220deg);
}

    .enr-send-to-choices .choices__list--multiple .choices__item .choices__button:hover {
        opacity: 1;
    }

/* Dropdown: expand to fit longest option, never clip long names */
.enr-send-to-choices .choices__list--dropdown {
    font-size: 0.8125rem;
    border-color: #dee2e6;
    border-radius: 0.375rem;
    z-index: 1060;
    width: auto;
    min-width: 100%;
    right: auto;
}

/* Dropdown items: no wrapping, consistent padding */
.enr-send-to-choices .choices__list--dropdown .choices__item {
    white-space: nowrap;
    padding: 6px 12px;
}

/* Hover state matches app highlight token */
.enr-send-to-choices .choices__list--dropdown .choices__item--selectable.is-highlighted {
    background-color: #EEF2FF;
    color: #1e293b;
}

/* Focus ring: brand indigo */
.enr-send-to-choices.is-focused .choices__inner {
    border-color: #4F46E5;
    box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.15);
    outline: none;
}

/* ── Sortable column headers ──────────────────────────────────────────── */
.enr-sortable-col { cursor: pointer; user-select: none; white-space: nowrap; }
.enr-sortable-col:hover { background: var(--enr-slate-50, #f8fafc); }
.enr-sort-active { color: var(--enr-indigo-600, #4F46E5); }
.enr-sort-icon { font-size: 0.7rem; margin-left: 0.25rem; }

/* ── Tag Library action buttons ──────────────────────────────────────── */
.btn-xs { padding: 0.1rem 0.45rem; font-size: 0.75rem; line-height: 1.4; border-radius: 4px; }

/* ── Tag edit/chip links ─────────────────────────────────────────────── */
.enr-tag-chip-link { text-decoration: none; }
.enr-tag-chip-link:hover { opacity: 0.85; }
.enr-edit-icon-btn { color: #94a3b8; text-decoration: none; display: inline-flex; align-items: center; }
.enr-edit-icon-btn:hover { color: #4F46E5; }

/* ── Tag type section inactive state ────────────────────────────────── */
.enr-section-inactive { opacity: 0.55; }

/* ── Tag filter banner ───────────────────────────────────────────────── */
.enr-tag-filter-banner { font-size: 0.875rem; }