/* =========================================
   Student Detail Tabs — Shared Styles
   SchoolConnect Design System
   ========================================= */

/* =========================================
   Tab Root Containers
   ========================================= */
.personal-info-tab,
.identification-tab,
.guardians-tab,
.siblings-tab,
.medical-tab,
.special-needs-tab,
.boarding-transport-tab,
.timeline-tab,
.academic-tab {
    display: flex;
    flex-direction: column;
    gap: var(--sc-space-6);
}

/* =========================================
   Section Pattern
   ========================================= */
.tab-section {
    background: var(--sc-surface);
    border: 1px solid var(--sc-border, #ededed);
    border-radius: 12px;
    padding: var(--sc-space-5) var(--sc-space-6);
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 8px 24px -8px rgba(15, 23, 42, 0.12);
}

[data-theme*="-dark"] .tab-section {
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 8px 24px -8px rgba(0, 0, 0, 0.45);
}

.tab-section + .tab-section {
    margin-top: 0;
}

.section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--sc-space-5);
    padding-bottom: var(--sc-space-4);
    border-bottom: 1px solid var(--sc-divider);
    gap: var(--sc-space-4);
    flex-wrap: wrap;
}

.section-title {
    display: flex;
    align-items: center;
    gap: var(--sc-space-3);
    font-size: var(--sc-text-lg);
    font-weight: var(--sc-font-semibold);
    color: var(--sc-text-primary);
    margin: 0;
    line-height: var(--sc-leading-tight);
}

.section-subtitle {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: var(--sc-text-xs);
    font-weight: var(--sc-font-medium);
    color: var(--sc-text-secondary);
    background: var(--sc-surface-variant, var(--sc-surface-muted));
    border: none;
    border-radius: var(--sc-radius-full, 9999px);
    padding: 0.2rem 0.65rem;
    white-space: nowrap;
    margin-left: auto;
}

/* Section title + subtitle stacked vertically (used in Family/Guardians/Siblings tabs) */
.section-title-block {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.section-title-block .section-subtitle {
    display: block;
    background: none;
    border-radius: 0;
    padding: 0;
    /* Indent to align with the title text, not the icon.
       Icon box is 36px wide; gap between icon and text is --sc-space-3. */
    padding-left: calc(36px + var(--sc-space-3, 0.75rem));
    margin-left: 0;
    font-size: 0.8125rem;
    white-space: normal;
    color: var(--sc-text-secondary);
}

.section-title .rzi {
    font-size: 1.25rem !important;
    color: var(--sc-gray-600);
    background: var(--sc-body-bg, var(--sc-background));
    border: 1px solid var(--sc-border);
    padding: var(--sc-space-2);
    border-radius: 8px;
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* Section header action buttons — source of truth: ref "+ Add" button (labeled, bordered, compact) */
.section-header .rz-button,
.sd-section-header .rz-button:not(.rz-primary):not(.rz-danger) {
    height: 32px !important;
    padding: 0 10px !important;
    border: 1px solid var(--sc-border) !important;
    border-radius: 6px !important;
    background: var(--sc-surface) !important;
    color: var(--sc-text-secondary) !important;
    box-shadow: none !important;
    font-size: 0.8125rem !important;
    font-weight: 500 !important;
}

.section-header .rz-button:hover,
.sd-section-header .rz-button:not(.rz-primary):not(.rz-danger):hover {
    background: var(--sc-gray-50, #f9fafb) !important;
    border-color: var(--sc-border-hover, #d1d5db) !important;
    color: var(--sc-text-primary) !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05) !important;
}

.section-header .rz-button .rzi,
.section-header .rz-button i,
.sd-section-header .rz-button .rzi,
.sd-section-header .rz-button i {
    font-size: 0.9rem !important;
    color: inherit !important;
}

/* =========================================
   Info Grid — Key/Value Display
   ========================================= */
.info-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--sc-space-1);
}

.info-item {
    display: flex;
    flex-direction: column;
    /* Explicit (not left to the flex default) — a same-named global .info-item rule
       elsewhere (settings-page-content.css) sets align-items: center and
       justify-content: space-between for its own unrelated row layout; since this
       rule never set those properties, the cascade let that global value leak in
       per-property and centered every label/value here instead of stacking them
       left-aligned (same leak already fixed once in MyProfile.razor.css). */
    align-items: flex-start;
    justify-content: flex-start;
    text-align: left;
    gap: var(--sc-space-1);
    padding: var(--sc-space-3) var(--sc-space-4);
    border-radius: var(--sc-radius-lg);
    transition: background var(--sc-transition-fast);
}

.info-item:hover {
    background: var(--sc-surface-variant);
}

.info-label {
    font-size: var(--sc-text-xs);
    font-weight: var(--sc-font-semibold);
    color: var(--sc-text-disabled);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    line-height: var(--sc-leading-normal);
}

.info-value {
    font-size: var(--sc-text-sm);
    font-weight: var(--sc-font-medium);
    color: var(--sc-text-primary);
    line-height: var(--sc-leading-relaxed);
}

.info-value.not-provided {
    color: var(--sc-text-disabled);
    font-style: italic;
    font-weight: var(--sc-font-normal);
}

.info-value-badge {
    display: inline-flex;
    align-items: center;
    font-size: var(--sc-text-xs);
    font-weight: var(--sc-font-semibold);
    padding: 1px var(--sc-space-2);
    border-radius: var(--sc-radius-full);
    background: rgba(var(--sc-primary-rgb), 0.1);
    color: var(--sc-primary-500);
    margin-left: var(--sc-space-2);
    vertical-align: middle;
}

.info-value-tag {
    display: inline-flex;
    align-items: center;
    font-size: var(--sc-text-xs);
    font-weight: var(--sc-font-medium);
    padding: 2px var(--sc-space-2);
    border-radius: var(--sc-radius-md);
    background: var(--sc-surface-variant);
    border: 1px solid var(--sc-border);
    color: var(--sc-text-primary);
    margin-right: var(--sc-space-1);
    margin-bottom: 2px;
}

/* =========================================
   Detail Cards
   ========================================= */
.detail-card {
    background: var(--sc-surface);
    border: 1px solid var(--sc-gray-100);
    border-radius: 10px;
    padding: var(--sc-space-5);
}

.detail-card:hover {}

.detail-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--sc-space-4);
    padding-bottom: 0;
}

.detail-card-title {
    font-size: var(--sc-text-base);
    font-weight: var(--sc-font-semibold);
    color: var(--sc-text-primary);
}

/* =========================================
   List Items (Docs, Guardians, Conditions)
   ========================================= */
.documents-list,
.guardians-list,
.medical-items-list,
.disabilities-list {
    display: flex;
    flex-direction: column;
    gap: var(--sc-space-2);
}

.list-item {
    display: flex;
    align-items: center;
    gap: var(--sc-space-4);
    padding: var(--sc-space-4);
    border: 1px solid var(--sc-gray-100);
    border-radius: 10px;
    transition: background var(--sc-transition-fast);
    background: var(--sc-surface);
}

.list-item:hover {
    background: var(--sc-surface-variant);
}

.list-item-info {
    display: flex;
    align-items: center;
    gap: var(--sc-space-3);
    flex: 1;
    min-width: 0;
}

.list-item-avatar {
    width: 42px;
    height: 42px;
    border-radius: var(--sc-radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: rgba(var(--sc-primary-rgb), 0.1);
    color: var(--sc-primary-500);
}

.list-item-avatar .rzi {
    font-size: 1.25rem !important;
}

.list-item-avatar.has-portal {
    background: var(--sc-success-50);
    color: var(--sc-success-600);
}

.list-item-avatar.emergency {
    background: var(--sc-danger-50);
    color: var(--sc-danger-500);
}

.list-item-details {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.list-item-name {
    font-size: var(--sc-text-sm);
    font-weight: var(--sc-font-semibold);
    color: var(--sc-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.list-item-meta {
    font-size: var(--sc-text-xs);
    color: var(--sc-text-secondary);
    display: flex;
    align-items: center;
    gap: var(--sc-space-2);
    flex-wrap: wrap;
}

.list-item-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: var(--sc-space-1);
    flex-shrink: 0;
    /* Always visible — were faded to 0.5 until hover, which read as "not visible"
       and combined with overflow clipped the trailing icons. */
    opacity: 1;
}

/* Compact icon buttons so the action row fits without clipping. */
.list-item-actions .rz-button.rz-button-md {
    width: 32px;
    min-width: 32px;
    height: 32px;
    padding: 0;
}

/* The Light/Text button variant renders its icon near-white on a white row, so the
   edit/delete icons read as invisible. Force a visible grey, darkening on hover, with the
   delete (last) action going red on hover. */
.list-item-actions .rz-button,
.list-item-actions .rz-button .rzi,
.list-item-actions .rz-button i {
    color: var(--sc-text-secondary, #64748b) !important;
}

.list-item-actions .rz-button:hover {
    background: var(--sc-surface-hover, rgba(15, 23, 42, 0.06));
}

.list-item-actions .rz-button:hover,
.list-item-actions .rz-button:hover .rzi,
.list-item-actions .rz-button:hover i {
    color: var(--sc-text-primary, #1e293b) !important;
}

.list-item-actions .rz-button:last-child:hover,
.list-item-actions .rz-button:last-child:hover .rzi,
.list-item-actions .rz-button:last-child:hover i {
    color: var(--sc-danger, #dc2626) !important;
}

/* =========================================
   Card Grids (Siblings, Medical, Collectors)
   ========================================= */
.siblings-grid,
.medical-items-grid,
.medications-grid,
.vaccinations-grid,
.consent-grid,
.difficulties-grid,
.accommodations-grid,
.support-staff-grid,
.specialists-grid,
.benefits-grid,
.collectors-grid,
.emergency-contacts-grid,
.guardian-contact-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: var(--sc-space-4);
}

/* Required Documents strip — dedicated 5-across layout (moved to the top of
   the Identification tab and spans the full width there). */
.required-docs-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: var(--sc-space-3);
}

/* =========================================
   Sibling Cards
   ========================================= */
.sibling-card {
    background: var(--sc-surface);
    border: 1px solid var(--sc-gray-100);
    border-radius: 10px;
    padding: var(--sc-space-5);
    transition: transform var(--sc-transition-normal);
    display: flex;
    flex-direction: column;
    gap: var(--sc-space-4);
}

.sibling-card:hover {
    transform: translateY(-2px);
}

.sibling-header {
    display: flex;
    align-items: center;
    gap: var(--sc-space-3);
}

.sibling-avatar {
    width: 48px;
    height: 48px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--sc-primary-500);
    color: var(--sc-text-inverse);
    font-weight: var(--sc-font-bold);
    font-size: var(--sc-text-lg);
    flex-shrink: 0;
}

.sibling-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.sibling-name {
    font-size: var(--sc-text-sm);
    font-weight: var(--sc-font-semibold);
    color: var(--sc-text-primary);
}

.sibling-badges {
    display: flex;
    gap: var(--sc-space-1);
    flex-wrap: wrap;
}

.sibling-details {
    display: flex;
    flex-direction: column;
    gap: var(--sc-space-2);
}

.detail-row {
    display: flex;
    align-items: center;
    gap: var(--sc-space-2);
    font-size: var(--sc-text-xs);
    color: var(--sc-text-secondary);
}

.detail-row .rzi {
    font-size: 0.95rem !important;
    color: var(--sc-text-disabled);
}

.student-number {
    font-family: var(--sc-font-mono);
    font-size: var(--sc-text-xs);
    color: var(--sc-text-secondary);
    letter-spacing: 0.03em;
}

.sibling-actions {
    display: flex;
    gap: var(--sc-space-2);
    padding-top: var(--sc-space-3);
}

/* =========================================
   Guardian Styles
   ========================================= */
.primary-guardian-card {
    background: var(--sc-surface-variant);
    border: 1px solid var(--sc-border);
    border-radius: 12px;
    padding: var(--sc-space-5);
    margin-bottom: var(--sc-space-4);
}

.guardian-main-info {
    display: flex;
    align-items: center;
    gap: var(--sc-space-4);
    margin-bottom: var(--sc-space-4);
}

.guardian-avatar {
    width: 56px;
    height: 56px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--sc-primary-500);
    color: var(--sc-text-inverse);
    font-weight: var(--sc-font-bold);
    font-size: var(--sc-text-xl);
    flex-shrink: 0;
}

.guardian-details {
    flex: 1;
    min-width: 0;
}

.guardian-name {
    font-size: var(--sc-text-base);
    font-weight: var(--sc-font-semibold);
    color: var(--sc-text-primary);
    margin-bottom: 2px;
}

.guardian-meta {
    font-size: var(--sc-text-xs);
    color: var(--sc-text-secondary);
    display: flex;
    align-items: center;
    gap: var(--sc-space-2);
}

.contact-item {
    display: flex;
    align-items: center;
    gap: var(--sc-space-3);
    padding: var(--sc-space-3);
    background: var(--sc-surface);
    border-radius: 10px;
    border: none;
}

.contact-item .rzi {
    color: var(--sc-primary-500);
    font-size: 1.15rem !important;
}

.guardian-actions {
    display: flex;
    gap: var(--sc-space-2);
    margin-top: var(--sc-space-4);
    padding-top: var(--sc-space-3);
}

/* Clean primary-contact card — drop the boxed border/surface so it reads as part
   of the panel (the bordered card looked busy). Overrides the shared grid rule above. */
.primary-guardian-card {
    background: transparent;
    border: none;
    border-radius: 0;
    padding: 0;
    margin-bottom: var(--sc-space-3);
}

/* Contact phone/email chips — subtle instead of white boxes on the panel. */
.primary-guardian-card .contact-item {
    background: transparent;
    padding: var(--sc-space-1) 0;
}

.guardian-badges {
    display: flex;
    gap: var(--sc-space-1);
    flex-wrap: wrap;
}

.guardian-contact-quick {
    display: flex;
    gap: var(--sc-space-2);
    align-items: center;
    font-size: var(--sc-text-xs);
    color: var(--sc-text-secondary);
}

.portal-indicator {
    width: 8px;
    height: 8px;
    border-radius: var(--sc-radius-full);
    background: var(--sc-success-500);
    flex-shrink: 0;
}

.primary-star {
    color: var(--sc-warning-500);
}

/* Emergency Contacts */
.emergency-contact-card {
    background: var(--sc-surface);
    border: 1px solid var(--sc-gray-100);
    border-radius: 10px;
    padding: var(--sc-space-4);
    display: flex;
    flex-direction: column;
    gap: var(--sc-space-2);
}

.emergency-priority {
    font-size: var(--sc-text-xs);
    font-weight: var(--sc-font-semibold);
    color: var(--sc-danger-500);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.emergency-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.emergency-name {
    font-size: var(--sc-text-sm);
    font-weight: var(--sc-font-semibold);
    color: var(--sc-text-primary);
}

.emergency-relationship {
    font-size: var(--sc-text-xs);
    color: var(--sc-text-secondary);
}

.emergency-phone {
    font-size: var(--sc-text-sm);
    color: var(--sc-primary-500);
    font-weight: var(--sc-font-medium);
}

.emergency-email {
    font-size: var(--sc-text-xs);
    color: var(--sc-text-secondary);
}

/* =========================================
   Medical Styles
   ========================================= */
.medical-alerts-banner {
    display: flex;
    align-items: center;
    gap: var(--sc-space-4);
    padding: var(--sc-space-4) var(--sc-space-5);
    background: linear-gradient(135deg, var(--sc-danger-50), rgba(239, 68, 68, 0.08));
    border: none;
    border-radius: 12px;
    margin-bottom: var(--sc-space-2);
}

.medical-alerts-banner .rzi {
    font-size: 1.5rem !important;
    color: var(--sc-danger-500);
}

.alert-content {
    flex: 1;
}

.alert-content h4 {
    margin: 0 0 2px 0;
    font-size: var(--sc-text-sm);
    font-weight: var(--sc-font-semibold);
    color: var(--sc-danger-600);
}

.alert-content p {
    margin: 0;
    font-size: var(--sc-text-xs);
    color: var(--sc-text-secondary);
}

/* Medical Item Cards */
.medical-item-card {
    background: var(--sc-surface);
    border: 1px solid var(--sc-gray-100);
    border-radius: 10px;
    padding: var(--sc-space-4);
    display: flex;
    flex-direction: column;
    gap: var(--sc-space-3);
    transition: background var(--sc-transition-fast);
}

.medical-item-card:hover {}

/* No left accent rail. The card already carries a SEVERE badge beside the allergen name, so the
   bar was a second encoding of one fact — and being the only card in the grid with an asymmetric
   border, it misaligned the whole row against its neighbour. The badge is the signal. */

.medical-item-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sc-space-2);
}

.medical-item-name {
    font-size: var(--sc-text-sm);
    font-weight: var(--sc-font-semibold);
    color: var(--sc-text-primary);
}

.medical-item-badges {
    display: flex;
    gap: var(--sc-space-1);
}

.medical-item-detail {
    font-size: var(--sc-text-xs);
    color: var(--sc-text-secondary);
    line-height: var(--sc-leading-relaxed);
}

.medical-item-actions {
    display: flex;
    gap: var(--sc-space-2);
    padding-top: var(--sc-space-2);
    /* At the end of the card, where an action belongs — and where the eye already is after
       reading the detail lines. They were left-aligned under the text and read as more content. */
    justify-content: flex-end;
    margin-top: auto;
}

/* Edit and delete were ButtonStyle.Light + Variant.Text, which Radzen renders in a grey so pale
   that on a white card the icons were barely findable — you had to know they were there. Given
   real ink at rest, and their own meaning on hover: primary for edit, danger for delete. */
.medical-item-actions .rz-button.rz-button-icon-only,
.medical-item-actions .rz-button {
    color: var(--sc-text-secondary);
}

.medical-item-actions .rz-button .rzi,
.medical-item-actions .rz-button .rz-button-icon-left {
    color: inherit;
    font-size: 1rem;
}

.medical-item-actions .rz-button:hover {
    background: var(--sc-primary-50, #eef2ff);
    color: var(--sc-primary-700, #3730a3);
}

.medical-item-actions .rz-button:last-child:hover {
    background: var(--sc-danger-50, #fef2f2);
    color: var(--sc-danger-600, #dc2626);
}

.condition-treatment {
    font-size: var(--sc-text-xs);
    color: var(--sc-text-secondary);
    line-height: var(--sc-leading-relaxed);
}

/* Consent Items */
.consent-item {
    display: flex;
    align-items: center;
    gap: var(--sc-space-3);
    padding: var(--sc-space-3) var(--sc-space-4);
    background: var(--sc-surface);
    border: 1px solid var(--sc-gray-100);
    border-radius: 10px;
}

.consent-content {
    flex: 1;
    font-size: var(--sc-text-sm);
    color: var(--sc-text-primary);
}

/* Vaccination - overdue */
.overdue {
    border-left: 3px solid var(--sc-warning-500);
}

/* =========================================
   Special Needs Styles
   ========================================= */
.no-special-needs-card {
    display: flex;
    align-items: center;
    gap: var(--sc-space-5);
    padding: var(--sc-space-6);
    background: var(--sc-success-50);
    border: none;
    border-radius: 12px;
}

.success-icon {
    width: 56px;
    height: 56px;
    border-radius: var(--sc-radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(34, 197, 94, 0.15);
    flex-shrink: 0;
}

.success-icon .rzi {
    font-size: 1.5rem !important;
    color: var(--sc-success-500);
}

.no-needs-content h4 {
    margin: 0 0 4px 0;
    font-size: var(--sc-text-base);
    font-weight: var(--sc-font-semibold);
    color: var(--sc-text-primary);
}

.no-needs-content p {
    margin: 0;
    font-size: var(--sc-text-sm);
    color: var(--sc-text-secondary);
}

.special-needs-summary {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: var(--sc-space-4);
    margin-bottom: var(--sc-space-4);
    padding: var(--sc-space-4);
    background: var(--sc-surface-variant);
    border-radius: var(--sc-radius-lg);
}

.summary-item {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.summary-label {
    font-size: var(--sc-text-xs);
    font-weight: var(--sc-font-semibold);
    color: var(--sc-text-disabled);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.summary-value {
    font-size: var(--sc-text-sm);
    font-weight: var(--sc-font-medium);
    color: var(--sc-text-primary);
}

.summary-value.review-due {
    color: var(--sc-warning-600);
}

/* Difficulty Cards */
.difficulty-card {
    background: var(--sc-surface);
    border: 1px solid var(--sc-gray-100);
    border-radius: 10px;
    padding: var(--sc-space-4);
    display: flex;
    flex-direction: column;
    gap: var(--sc-space-2);
    transition: background var(--sc-transition-fast);
}

.difficulty-card:hover {}

.difficulty-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.difficulty-name {
    font-size: var(--sc-text-sm);
    font-weight: var(--sc-font-semibold);
    color: var(--sc-text-primary);
}

.difficulty-description {
    font-size: var(--sc-text-xs);
    color: var(--sc-text-secondary);
    line-height: var(--sc-leading-relaxed);
}

.difficulty-date {
    font-size: var(--sc-text-xs);
    color: var(--sc-text-disabled);
}

.disability-support {
    font-size: var(--sc-text-xs);
    color: var(--sc-text-secondary);
    line-height: var(--sc-leading-relaxed);
}

/* Accommodations */
.accommodation-category {
    display: flex;
    flex-direction: column;
    gap: var(--sc-space-3);
}

.category-title {
    font-size: var(--sc-text-sm);
    font-weight: var(--sc-font-semibold);
    color: var(--sc-text-primary);
    padding-bottom: var(--sc-space-2);
}

.accommodation-items {
    display: flex;
    flex-direction: column;
    gap: var(--sc-space-2);
}

.accommodation-item {
    display: flex;
    align-items: flex-start;
    gap: var(--sc-space-3);
    padding: var(--sc-space-3);
    background: var(--sc-surface-variant);
    border-radius: var(--sc-radius-md);
}

.check-icon {
    color: var(--sc-success-500);
    flex-shrink: 0;
    margin-top: 1px;
}

.check-icon .rzi {
    font-size: 1.1rem !important;
}

.accommodation-content {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.accommodation-name {
    font-size: var(--sc-text-sm);
    font-weight: var(--sc-font-medium);
    color: var(--sc-text-primary);
}

.accommodation-details {
    font-size: var(--sc-text-xs);
    color: var(--sc-text-secondary);
}

.exam-accommodations-box {
    padding: var(--sc-space-4);
    background: var(--sc-info-50);
    border: none;
    border-radius: 10px;
    font-size: var(--sc-text-sm);
    color: var(--sc-text-primary);
    line-height: var(--sc-leading-relaxed);
}

/* Support Staff Cards */
.support-staff-card {
    display: flex;
    align-items: center;
    gap: var(--sc-space-4);
    padding: var(--sc-space-4);
    background: var(--sc-surface);
    border: 1px solid var(--sc-gray-100);
    border-radius: 10px;
    transition: background var(--sc-transition-fast);
}

.support-staff-card:hover {}

.staff-avatar {
    width: 44px;
    height: 44px;
    border-radius: var(--sc-radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(var(--sc-primary-rgb), 0.1);
    color: var(--sc-primary-500);
    flex-shrink: 0;
}

.staff-avatar .rzi {
    font-size: 1.25rem !important;
}

.staff-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.staff-name {
    font-size: var(--sc-text-sm);
    font-weight: var(--sc-font-semibold);
    color: var(--sc-text-primary);
}

.staff-role {
    font-size: var(--sc-text-xs);
    color: var(--sc-text-secondary);
}

.staff-schedule {
    font-size: var(--sc-text-xs);
    color: var(--sc-text-disabled);
}

.notes-content {
    padding: var(--sc-space-4);
    background: var(--sc-surface-variant);
    border-radius: var(--sc-radius-lg);
    font-size: var(--sc-text-sm);
    color: var(--sc-text-primary);
    line-height: var(--sc-leading-relaxed);
}

/* =========================================
   Boarding & Transport Styles
   ========================================= */
.status-card {
    display: flex;
    align-items: center;
    gap: var(--sc-space-4);
    padding: var(--sc-space-5);
    border-radius: 12px;
    border: none;
    background: var(--sc-surface-variant);
    margin-bottom: var(--sc-space-4);
}

.status-card.boarder-active {
    background: linear-gradient(135deg, rgba(var(--sc-primary-rgb), 0.04), rgba(var(--sc-primary-rgb), 0.08));
}

.status-card.transport-active {
    background: linear-gradient(135deg, var(--sc-success-50), rgba(34, 197, 94, 0.06));
}

.status-card.day-scholar,
.status-card.no-transport {
    background: var(--sc-surface-variant);
}

.status-icon {
    width: 48px;
    height: 48px;
    border-radius: var(--sc-radius-xl);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: rgba(var(--sc-primary-rgb), 0.1);
}

.status-icon .rzi {
    font-size: 1.35rem !important;
    color: var(--sc-primary-500);
}

.status-content {
    flex: 1;
}

.status-content h4 {
    margin: 0 0 4px 0;
    font-size: var(--sc-text-base);
    font-weight: var(--sc-font-semibold);
    color: var(--sc-text-primary);
}

.status-content p {
    margin: 0;
    font-size: var(--sc-text-sm);
    color: var(--sc-text-secondary);
}

.status-badge {
    font-size: var(--sc-text-xs);
    font-weight: var(--sc-font-semibold);
    padding: var(--sc-space-1) var(--sc-space-3);
    border-radius: var(--sc-radius-full);
    background: rgba(var(--sc-primary-rgb), 0.1);
    color: var(--sc-primary-500);
}

.transport-details {
    display: flex;
    flex-direction: column;
    gap: var(--sc-space-3);
}

/* Collector Cards */
.collector-card {
    display: flex;
    align-items: center;
    gap: var(--sc-space-4);
    padding: var(--sc-space-4);
    background: var(--sc-surface);
    border: 1px solid var(--sc-gray-100);
    border-radius: 10px;
    transition: background var(--sc-transition-fast);
}

.collector-card:hover {}

.collector-avatar {
    width: 44px;
    height: 44px;
    border-radius: var(--sc-radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(var(--sc-primary-rgb), 0.1);
    color: var(--sc-primary-500);
    flex-shrink: 0;
}

.collector-avatar .rzi {
    font-size: 1.15rem !important;
}

.collector-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
}

.collector-name {
    font-size: var(--sc-text-sm);
    font-weight: var(--sc-font-semibold);
    color: var(--sc-text-primary);
}

.collector-relation {
    font-size: var(--sc-text-xs);
    color: var(--sc-text-secondary);
}

.collector-phone {
    font-size: var(--sc-text-sm);
    color: var(--sc-primary-500);
    font-weight: var(--sc-font-medium);
}

.verified-icon {
    color: var(--sc-success-500);
    flex-shrink: 0;
}

.verified-icon .rzi {
    font-size: 1.15rem !important;
}

/* =========================================
   Identification Styles
   ========================================= */
.learner-id {
    font-family: var(--sc-font-mono);
    font-size: var(--sc-text-lg);
    font-weight: var(--sc-font-bold);
    color: var(--sc-text-primary);
    letter-spacing: 0.05em;
    padding: var(--sc-space-3) var(--sc-space-4);
    background: var(--sc-surface-variant);
    border-radius: var(--sc-radius-md);
    display: inline-block;
}

.document-status {
    font-size: var(--sc-text-xs);
    font-weight: var(--sc-font-semibold);
    padding: var(--sc-space-1) var(--sc-space-3);
    border-radius: var(--sc-radius-full);
}

.expiring-soon {
    background: var(--sc-warning-50);
    color: var(--sc-warning-600);
}

/* Required Docs — compact checklist chips, not full-height cards.
   Three states: verified (on file, checked) / awaiting (on file, not yet checked) /
   missing (not on file at all) — collapsing the last two into one "pending" state is exactly
   the "confirmed looks the same as never-asked" mistake this redesign is meant to avoid. */
.required-doc-item {
    display: flex;
    align-items: center;
    gap: var(--sc-space-2);
    padding: var(--sc-space-2) var(--sc-space-3);
    border-radius: 10px;
    border: 1px solid var(--sc-gray-100);
    background: var(--sc-surface);
    font-size: var(--sc-text-sm);
}

.required-doc-body {
    display: flex;
    flex-direction: column;
    line-height: 1.3;
}

.required-doc-body small {
    font-size: 0.7rem;
    color: var(--sc-text-secondary);
}

.required-doc-item--verified {
    background: var(--sc-success-50);
}

.required-doc-item--verified .rzi {
    color: var(--sc-success-500);
}

.required-doc-item--awaiting {
    background: var(--sc-info-50, #eff6ff);
}

.required-doc-item--awaiting .rzi {
    color: var(--sc-info-500, #3b82f6);
}

.required-doc-item--missing {
    background: var(--sc-warning-50);
}

.required-doc-item--missing .rzi {
    color: var(--sc-warning-500);
}

/* On file but not through the identification record, so there is no verification state to show. */
.required-doc-item--onfile {
    background: var(--sc-success-50);
}

.required-doc-item--onfile .rzi {
    color: var(--sc-success-500);
}

/* Neither store could be read. Neutral on purpose: "not confirmed" is not "not provided". */
.required-doc-item--unknown {
    background: var(--sc-surface-variant);
}

.required-doc-item--unknown .rzi {
    color: var(--sc-text-secondary);
}

/* =========================================
   Timeline Styles
   ========================================= */
.timeline-filters {
    display: flex;
    align-items: center;
    gap: var(--sc-space-3);
    flex-wrap: wrap;
}

.loading-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 200px;
    gap: var(--sc-space-3);
    color: var(--sc-text-secondary);
}

.timeline {
    position: relative;
    padding-left: var(--sc-space-8);
}

.timeline::before {
    content: '';
    position: absolute;
    left: 15px;
    top: 0;
    bottom: 0;
    width: 2px;
    background: var(--sc-gray-200);
    border-radius: var(--sc-radius-full);
}

.timeline-year {
    margin-bottom: var(--sc-space-4);
}

.year-marker {
    font-size: var(--sc-text-sm);
    font-weight: var(--sc-font-bold);
    color: var(--sc-text-primary);
    background: var(--sc-surface-variant);
    padding: var(--sc-space-1) var(--sc-space-3);
    border-radius: var(--sc-radius-full);
    border: none;
    display: inline-block;
    margin-bottom: var(--sc-space-3);
    position: relative;
    left: calc(-1 * var(--sc-space-8) + 6px);
}

.timeline-item {
    position: relative;
    margin-bottom: var(--sc-space-4);
}

.timeline-marker {
    position: absolute;
    left: calc(-1 * var(--sc-space-8) + 8px);
    top: var(--sc-space-1);
    width: 16px;
    height: 16px;
    border-radius: var(--sc-radius-full);
    border: 3px solid var(--sc-gray-300);
    background: var(--sc-surface);
    z-index: 1;
}

.timeline-item.event-enrollment .timeline-marker,
.timeline-item.event-success .timeline-marker {
    border-color: var(--sc-success-500);
    background: var(--sc-success-50);
}

.timeline-item.event-warning .timeline-marker {
    border-color: var(--sc-warning-500);
    background: var(--sc-warning-50);
}

.timeline-item.event-danger .timeline-marker {
    border-color: var(--sc-danger-500);
    background: var(--sc-danger-50);
}

.timeline-item.event-medical .timeline-marker {
    border-color: var(--sc-info-500);
    background: var(--sc-info-50);
}

.timeline-content {
    padding: var(--sc-space-4);
    background: var(--sc-surface);
    border: 1px solid var(--sc-gray-100);
    border-radius: 10px;
    transition: background var(--sc-transition-fast);
}

.timeline-content:hover {}

.timeline-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sc-space-2);
    margin-bottom: var(--sc-space-2);
}

.timeline-date {
    font-size: var(--sc-text-xs);
    color: var(--sc-text-disabled);
    white-space: nowrap;
}

.timeline-title {
    font-size: var(--sc-text-sm);
    font-weight: var(--sc-font-semibold);
    color: var(--sc-text-primary);
}

.timeline-description {
    font-size: var(--sc-text-xs);
    color: var(--sc-text-secondary);
    line-height: var(--sc-leading-relaxed);
}

.timeline-meta {
    display: flex;
    gap: var(--sc-space-2);
    margin-top: var(--sc-space-2);
    flex-wrap: wrap;
}

.load-more {
    text-align: center;
    padding-top: var(--sc-space-4);
}

/* =========================================
   Edit Form Styles
   ========================================= */
.edit-form {
    display: flex;
    flex-direction: column;
    gap: var(--sc-space-6);
}

.header-actions {
    display: flex;
    gap: var(--sc-space-2);
}

.form-sections {
    display: flex;
    flex-direction: column;
    gap: var(--sc-space-5);
}

.form-section {
    border: none !important;
    border-radius: 12px !important;
    padding: var(--sc-space-5) !important;
    background: var(--sc-surface-variant) !important;
}

.form-section legend {
    font-size: var(--sc-text-sm) !important;
    font-weight: var(--sc-font-semibold) !important;
    color: var(--sc-primary-500) !important;
    padding: 0 var(--sc-space-2) !important;
}

/* SCOPED to this sheet's own .form-section forms. Unscoped it loaded after staff-modern.css and
   flattened every .form-grid in the app to one column, Edit Staff included. */
.form-section .form-grid {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.form-field {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.form-field .rz-label {
    font-size: 0.775rem !important;
    font-weight: 600 !important;
    color: var(--sc-text-secondary) !important;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* =========================================
   Shared Information Section
   ========================================= */
.shared-guardians-section {
    padding: var(--sc-space-4);
    background: var(--sc-surface-variant);
    border-radius: var(--sc-radius-lg);
}

.info-text {
    font-size: var(--sc-text-sm);
    color: var(--sc-text-secondary);
    line-height: var(--sc-leading-relaxed);
}

/* Benefit Items (Siblings) */
.benefit-item {
    display: flex;
    align-items: flex-start;
    gap: var(--sc-space-3);
    padding: var(--sc-space-4);
    background: var(--sc-surface);
    border: 1px solid var(--sc-gray-100);
    border-radius: 10px;
}

.benefit-icon {
    width: 36px;
    height: 36px;
    border-radius: var(--sc-radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(var(--sc-primary-rgb), 0.1);
    flex-shrink: 0;
}

.benefit-icon .rzi {
    font-size: 1.1rem !important;
    color: var(--sc-primary-500);
}

.benefit-content {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.benefit-content strong {
    font-size: var(--sc-text-sm);
    font-weight: var(--sc-font-semibold);
    color: var(--sc-text-primary);
}

.benefit-content span {
    font-size: var(--sc-text-xs);
    color: var(--sc-text-secondary);
}

/* =========================================
   Empty State
   ========================================= */
.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 200px;
    gap: var(--sc-space-3);
    text-align: center;
    color: var(--sc-text-secondary);
    padding: var(--sc-space-8);
}

.empty-state.small {
    min-height: 120px;
    padding: var(--sc-space-5);
}

.empty-state .rzi {
    font-size: 2.5rem !important;
    color: var(--sc-text-disabled);
}

.empty-state h4 {
    margin: 0;
    font-size: var(--sc-text-base);
    font-weight: var(--sc-font-semibold);
    color: var(--sc-text-primary);
}

.empty-state p {
    margin: 0;
    font-size: var(--sc-text-sm);
    max-width: 360px;
}

/* =========================================
   Academic Tab — Profile, Placement, Subjects
   ========================================= */

/* Loading state */
.loading-state {
    display: flex;
    align-items: center;
    gap: var(--sc-space-3);
    padding: var(--sc-space-5);
    color: var(--sc-text-secondary);
    font-size: var(--sc-text-sm);
}

/* No-profile placeholder */
.no-profile-state {
    display: flex;
    align-items: center;
    gap: var(--sc-space-3);
    padding: var(--sc-space-4) var(--sc-space-5);
    background: var(--sc-surface-variant);
    border-radius: var(--sc-radius-lg);
    font-size: var(--sc-text-sm);
    color: var(--sc-text-secondary);
}

.no-profile-state .rzi {
    font-size: 1.25rem !important;
    color: var(--sc-primary-400);
}

/* Profile edit form */
.profile-edit-form {
    display: flex;
    flex-direction: column;
    gap: var(--sc-space-5);
}

.profile-edit-form .form-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--sc-space-4);
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: var(--sc-space-1);
}

.form-group label {
    font-size: var(--sc-text-xs);
    font-weight: var(--sc-font-semibold);
    color: var(--sc-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.form-actions {
    display: flex;
    gap: var(--sc-space-2);
    padding-top: var(--sc-space-3);
}

/* Placement card */
.placement-card {
    background: transparent;
    border: none;
    border-radius: 0;
    padding: 0;
}

.placement-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--sc-space-4);
}

.placement-item {
    display: flex;
    align-items: flex-start;
    gap: var(--sc-space-3);
    padding: var(--sc-space-4);
    border-radius: 10px;
    background: var(--sc-surface);
    border: 1px solid var(--sc-gray-100, var(--sc-border));
    transition: all var(--sc-transition-fast);
}

.placement-item:hover {}

.placement-icon {
    width: 40px;
    height: 40px;
    border-radius: var(--sc-radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--sc-gray-100, #f3f4f6);
    color: var(--sc-text-primary, #111827);
    flex-shrink: 0;
}

.placement-icon .rzi {
    font-size: 1.2rem !important;
    color: var(--sc-text-primary, #111827) !important;
}

.placement-content {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.placement-label {
    font-size: var(--sc-text-xs);
    font-weight: var(--sc-font-semibold);
    color: var(--sc-text-disabled);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.placement-value {
    font-size: var(--sc-text-sm);
    font-weight: var(--sc-font-semibold);
    color: var(--sc-text-primary);
}

.placement-code {
    font-size: var(--sc-text-xs);
    font-family: var(--sc-font-mono);
    color: var(--sc-text-secondary);
    letter-spacing: 0.03em;
}

/* Subjects grid */
.subjects-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: var(--sc-space-3, 12px);
}

.subject-card {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    background: var(--sc-surface, #fff);
    border: 1px solid var(--sc-border, #e7ebf0);
    border-radius: 14px;
    padding: 14px;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
    transition: box-shadow 0.15s ease, transform 0.15s ease, border-color 0.15s ease;
}

.subject-card:hover {
    box-shadow: 0 6px 18px rgba(16, 24, 40, 0.08);
    transform: translateY(-2px);
    border-color: var(--sc-primary-200, #c7d7fe);
}

/* Subject icon avatar — primary tint for core, neutral for elective. */
.subject-card-icon {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: grid;
    place-items: center;
    background: var(--sc-primary-50, #eff4ff);
    color: var(--sc-primary-500, var(--sc-primary, #2563eb));
}

.subject-card.elective .subject-card-icon {
    background: var(--sc-gray-100, #f1f5f9);
    color: var(--sc-text-secondary, #64748b);
}

.subject-card-icon .rzi {
    font-size: 1.3rem !important;
}

.subject-card-body {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
    flex: 1;
}

.subject-name {
    font-size: 0.9rem;
    font-weight: var(--sc-font-semibold, 600);
    color: var(--sc-text-primary);
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Type chip (Core / Elective) — replaces the old left-accent bar + badge. */
.subject-type-chip {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 3px 10px;
    border-radius: 999px;
}

.subject-type-chip .dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
}

.subject-type-chip.core {
    background: var(--sc-primary-50, #eff4ff);
    color: var(--sc-primary-500, var(--sc-primary, #2563eb));
}

.subject-type-chip.elective {
    background: var(--sc-gray-100, #f1f5f9);
    color: var(--sc-text-secondary, #64748b);
}

.subject-details {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.subject-level,
.subject-teacher {
    font-size: var(--sc-text-xs);
    color: var(--sc-text-secondary);
    display: flex;
    align-items: center;
    gap: var(--sc-space-1);
}

.subject-teacher .rzi {
    font-size: 0.9rem !important;
    color: var(--sc-text-disabled);
}

.subject-actions {
    display: flex;
    gap: var(--sc-space-1);
    padding-top: var(--sc-space-2);
    border-top: 1px solid var(--sc-divider);
    opacity: 0.5;
    transition: opacity var(--sc-transition-fast);
}

.subject-card:hover .subject-actions {
    opacity: 1;
}

/* Subject source note below the grid */
.section-footer-note {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-top: var(--sc-space-4);
    padding: 0.6rem 1rem;
    background: var(--sc-surface-variant);
    border: none;
    border-radius: 10px;
    font-size: var(--sc-text-xs);
    color: var(--sc-text-secondary);
    line-height: 1.4;
}

.section-footer-note .rzi {
    font-size: 1rem !important;
    color: var(--sc-text-disabled);
    flex-shrink: 0;
}

/* Previous schools (academic tab) */
.previous-schools-list {
    display: flex;
    flex-direction: column;
    gap: var(--sc-space-2);
}

.school-grades {
    flex-shrink: 0;
}

.school-grade-range {
    display: inline-flex;
    align-items: center;
    font-size: var(--sc-text-xs);
    font-weight: var(--sc-font-medium);
    padding: 2px var(--sc-space-2);
    border-radius: var(--sc-radius-md);
    background: var(--sc-surface-variant);
    border: 1px solid var(--sc-border);
    color: var(--sc-text-secondary);
}

/* Academic history grid overrides */
.academic-history-grid.rz-datatable {
    border-radius: var(--sc-radius-lg);
    overflow: hidden;
    border: 1px solid var(--sc-border);
}

/* =========================================
   Responsive
   ========================================= */
@media (max-width: 768px) {

    .info-grid,
    .form-grid {
        grid-template-columns: 1fr;
    }

    .siblings-grid,
    .medical-items-grid,
    .medications-grid,
    .vaccinations-grid,
    .consent-grid,
    .difficulties-grid,
    .accommodations-grid,
    .support-staff-grid,
    .specialists-grid,
    .benefits-grid,
    .collectors-grid,
    .emergency-contacts-grid,
    .guardian-contact-grid,
    .subjects-grid,
    .placement-grid {
        grid-template-columns: 1fr;
    }

    .required-docs-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .profile-edit-form .form-grid {
        grid-template-columns: 1fr;
    }

    .section-header {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--sc-space-3);
    }

    .primary-guardian-card {
        padding: var(--sc-space-4);
    }

    .guardian-main-info {
        flex-direction: column;
        align-items: flex-start;
    }

    .special-needs-summary {
        grid-template-columns: 1fr;
    }
}

/* =========================================
   Print
   ========================================= */
@media print {
    .tab-section {
        break-inside: avoid;
        border: none;
        padding: 0;
        margin-bottom: 1rem;
    }

    .section-header button,
    .header-actions,
    .list-item-actions,
    .sibling-actions,
    .guardian-actions,
    .medical-item-actions {
        display: none;
    }

    .list-item:hover,
    .sibling-card:hover,
    .medical-item-card:hover {
        transform: none;
    }
}

/* =========================================
   SD Layout System — Shared Vertical Tabs
   (Academics, Performance, and sub-pages)
   ========================================= */

/* ---- Breadcrumb ---- */
.sd-breadcrumb {
    display: flex;
    align-items: center;
    gap: var(--sc-space-2);
    font-size: var(--sc-text-sm);
    margin-bottom: var(--sc-space-6);
}

.sd-breadcrumb a {
    display: inline-flex;
    align-items: center;
    gap: var(--sc-space-1);
    color: var(--sc-text-secondary);
    text-decoration: none;
    transition: color var(--sc-transition-fast);
}

.sd-breadcrumb a:hover {
    color: var(--sc-primary-500);
}

.sd-breadcrumb a .rzi {
    font-size: 1rem !important;
}

.sd-breadcrumb-sep {
    color: var(--sc-gray-300);
    font-weight: var(--sc-font-light);
    user-select: none;
}

.sd-breadcrumb-current {
    color: var(--sc-text-primary);
    font-weight: var(--sc-font-medium);
}

/* ---- Hero Header ---- */
.sd-hero {
    position: relative;
    border-radius: var(--sc-hero-radius, 12px);
    overflow: hidden;
    margin-bottom: var(--sc-space-6);
    background: linear-gradient(135deg, var(--sc-hero-bg-start, var(--sc-primary-800)), var(--sc-hero-bg-end, var(--sc-primary-500)));
}

.sd-hero-bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
}

.sd-hero-bg::before {
    content: '';
    position: absolute;
    top: -60%;
    right: -10%;
    width: 400px;
    height: 400px;
    border-radius: 50%;
    background: var(--sc-hero-pattern);
}

.sd-hero-bg::after {
    content: '';
    position: absolute;
    bottom: -40%;
    left: 5%;
    width: 300px;
    height: 300px;
    border-radius: 50%;
    background: var(--sc-hero-pattern);
}

.sd-hero-content {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--sc-hero-padding-y, 1.75rem) var(--sc-hero-padding-x, 2rem);
    gap: var(--sc-space-6);
}

.sd-hero-left {
    display: flex;
    align-items: center;
    gap: var(--sc-space-6);
    min-width: 0;
}

.sd-hero-info {
    min-width: 0;
}

.sd-hero-info h1 {
    margin: 0 0 var(--sc-space-3) 0;
    font-size: var(--sc-hero-title-size, 1.75rem);
    font-weight: var(--sc-font-bold);
    color: var(--sc-text-inverse);
    letter-spacing: -0.3px;
    line-height: var(--sc-leading-tight);
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}

.sd-hero-meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sc-space-2);
}

.sd-meta-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--sc-space-1);
    padding: 0.2rem 0.65rem;
    border-radius: var(--sc-radius-full);
    font-size: var(--sc-text-xs);
    font-weight: var(--sc-font-medium);
    background: var(--sc-hero-overlay);
    color: var(--sc-text-inverse);
    backdrop-filter: blur(4px);
    transition: background var(--sc-transition-fast);
    line-height: var(--sc-leading-normal);
}

.sd-meta-chip:hover {
    background: var(--sc-hero-overlay-hover);
}

.sd-hero-actions {
    display: flex;
    gap: var(--sc-space-2);
    flex-shrink: 0;
}

.sd-hero-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--sc-space-2);
    padding: 0.5rem 1rem;
    border: 1px solid var(--sc-hero-border);
    border-radius: var(--sc-radius-lg);
    background: var(--sc-hero-overlay);
    color: var(--sc-text-inverse);
    font-size: var(--sc-text-sm);
    font-weight: var(--sc-font-medium);
    cursor: pointer;
    transition: all var(--sc-transition-fast);
    backdrop-filter: blur(4px);
    white-space: nowrap;
}

.sd-hero-btn:hover {
    background: var(--sc-hero-overlay-hover);
    border-color: var(--sc-hero-border-strong);
    transform: translateY(-1px);
}

.sd-hero-btn .rzi {
    font-size: 1.1rem !important;
}

.sd-hero-btn.icon-only {
    padding: 0.5rem;
    aspect-ratio: 1;
}

.sd-hero-btn.icon-only span {
    display: none;
}

/* Hero Stats Strip */
.sd-hero-stats {
    display: flex;
    gap: var(--sc-space-1);
    padding: var(--sc-space-3) var(--sc-hero-padding-x, 2rem);
    position: relative;
    z-index: 1;
}

.sd-hero-stat {
    display: flex;
    align-items: center;
    gap: var(--sc-space-2);
    padding: var(--sc-space-2) var(--sc-space-4);
    border-radius: var(--sc-radius-lg);
    background: var(--sc-hero-stat-bg, rgba(255, 255, 255, 0.08));
    transition: background var(--sc-transition-fast);
    flex: 1;
    min-width: 0;
}

.sd-hero-stat:hover {
    background: var(--sc-hero-stat-bg-hover, rgba(255, 255, 255, 0.13));
}

.sd-hero-stat .rzi {
    font-size: 1.15rem !important;
    color: var(--sc-hero-text-muted);
    opacity: 0.7;
    flex-shrink: 0;
}

.sd-hero-stat-val {
    font-size: var(--sc-hero-stat-value-size, 1.1rem);
    font-weight: var(--sc-font-bold);
    color: var(--sc-text-inverse);
    line-height: var(--sc-leading-none);
}

.sd-hero-stat-lbl {
    font-size: var(--sc-hero-stat-label-size, 0.7rem);
    color: var(--sc-hero-text-muted, rgba(255, 255, 255, 0.7));
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: var(--sc-font-medium);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ---- Content Area — Vertical Tabs ---- */
.sd-content {
    display: flex;
    gap: 0;
    background: var(--sc-surface);
    border: none;
    border-radius: 16px;
    overflow: hidden;
    min-height: 520px;
    box-shadow:
        0 1px 2px rgba(15, 23, 42, 0.04),
        0 8px 24px rgba(15, 23, 42, 0.08);
}

[data-theme*="-dark"] .sd-content {
    box-shadow:
        0 1px 2px rgba(0, 0, 0, 0.5),
        0 10px 28px rgba(0, 0, 0, 0.4);
}

/* Sidebar Navigation */
.sd-sidebar {
    width: 230px;
    flex-shrink: 0;
    background: var(--sc-surface-variant);
    display: flex;
    flex-direction: column;
    padding: var(--sc-space-4) var(--sc-space-3);
    gap: var(--sc-space-1);
}

.sd-sidebar-heading {
    font-size: var(--sc-text-xs);
    font-weight: var(--sc-font-semibold);
    color: var(--sc-text-disabled);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: var(--sc-space-1) var(--sc-space-3);
    margin-bottom: var(--sc-space-2);
}

.sd-nav-item {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--sc-space-3);
    padding: 0.6rem 0.85rem;
    border: none;
    background: transparent;
    color: var(--sc-text-secondary);
    font-size: var(--sc-text-sm);
    font-weight: var(--sc-font-medium);
    cursor: pointer;
    border-radius: var(--sc-radius-lg);
    transition: all var(--sc-transition-fast);
    text-align: left;
    width: 100%;
    line-height: var(--sc-leading-normal);
}

.sd-nav-icon {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--sc-radius-md);
    background: transparent;
    transition: all var(--sc-transition-fast);
    flex-shrink: 0;
}

.sd-nav-icon .rzi {
    font-size: 1.15rem !important;
    transition: color var(--sc-transition-fast);
}

.sd-nav-label {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sd-nav-item:hover {
    background: var(--sc-gray-200);
    color: var(--sc-text-primary);
}

.sd-nav-item:hover .sd-nav-icon {
    background: var(--sc-gray-300);
}

.sd-nav-item.active {
    background: rgba(var(--sc-primary-rgb), 0.1);
    color: var(--sc-primary-500);
    font-weight: var(--sc-font-semibold);
}

.sd-nav-item.active .sd-nav-icon {
    background: var(--sc-primary-500);
}

.sd-nav-item.active .sd-nav-icon .rzi {
    color: var(--sc-text-inverse);
}

.sd-nav-indicator {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 60%;
    border-radius: 0 var(--sc-radius-full) var(--sc-radius-full) 0;
    background: var(--sc-primary-500);
}

/* Category Styles */
.sd-nav-category {
    margin-bottom: var(--sc-space-4);
}

.sd-nav-category-header {
    display: flex;
    align-items: center;
    gap: var(--sc-space-2);
    padding: var(--sc-space-2) var(--sc-space-3);
    margin-bottom: var(--sc-space-2);
    font-size: var(--sc-text-xs);
    font-weight: var(--sc-font-bold);
    color: var(--sc-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.sd-nav-category-header .rzi {
    font-size: 1rem !important;
    color: var(--sc-primary-500);
}

.sd-nav-items {
    display: flex;
    flex-direction: column;
    gap: var(--sc-space-1);
}

/* Empty Tab State */
.sd-empty-tab {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--sc-space-10) var(--sc-space-6);
    text-align: center;
    color: var(--sc-text-secondary);
    background: var(--sc-surface-variant);
    border-radius: var(--sc-radius-xl);
}

.sd-empty-tab .rzi {
    font-size: 3rem !important;
    color: var(--sc-text-disabled);
    margin-bottom: var(--sc-space-4);
}

.sd-empty-tab p {
    margin: 0;
    font-size: var(--sc-text-sm);
}

/* Tab Content Panel */
.sd-tab-content {
    flex: 1;
    padding: var(--sc-space-6) var(--sc-space-8);
    overflow-y: auto;
    min-width: 0;
}

.tab-panel {
    display: flex;
    flex-direction: column;
    gap: var(--sc-space-6);
}

/* ---- Responsive ---- */
@media (max-width: 1024px) {
    .sd-hero-content {
        flex-direction: column;
        align-items: flex-start;
    }

    .sd-hero-actions {
        width: 100%;
    }

    .sd-hero-stats {
        flex-wrap: wrap;
    }

    .sd-hero-stat {
        flex: 1 1 calc(50% - var(--sc-space-2));
        min-width: 120px;
    }

    .sd-tab-content {
        padding: var(--sc-space-4) var(--sc-space-5);
    }
}

@media (max-width: 768px) {
    .sd-hero-content {
        padding: var(--sc-space-5);
    }

    .sd-hero-left {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--sc-space-4);
    }

    .sd-hero-info h1 {
        font-size: var(--sc-text-xl);
    }

    .sd-hero-stats {
        padding: var(--sc-space-3) var(--sc-space-5);
    }

    .sd-hero-stat {
        flex: 1 1 100%;
    }

    .sd-content {
        flex-direction: column;
    }

    .sd-sidebar {
        width: 100%;
        flex-direction: row;
        overflow-x: auto;
        padding: var(--sc-space-2) var(--sc-space-3);
        gap: var(--sc-space-1);
    }

    .sd-sidebar-heading {
        display: none;
    }

    .sd-nav-item {
        flex-direction: column;
        padding: var(--sc-space-2);
        font-size: var(--sc-text-xs);
        gap: var(--sc-space-1);
        min-width: 56px;
        text-align: center;
    }

    .sd-nav-icon {
        width: 28px;
        height: 28px;
    }

    .sd-nav-label {
        display: none;
    }

    .sd-nav-indicator {
        display: none;
    }

    .sd-tab-content {
        padding: var(--sc-space-4);
    }

    .sd-hero-btn span {
        display: none;
    }

    .sd-hero-btn {
        padding: 0.5rem;
    }
}

@media print {
    .sd-hero-actions, .sd-sidebar, .sd-breadcrumb {
        display: none;
    }

    .sd-hero {
        border-radius: 0;
    }

    .sd-content {
        border: none;
    }

    .sd-tab-content {
        padding: 0;
    }
}

/* =========================================
   Guardian Dialog - Layout (gd-* classes)
   ========================================= */
.gd-dialog {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: var(--sc-surface-variant);
}

.gd-body {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    padding: 2rem;
    overflow-y: auto;
    /* Grid/flex items default to min-width: auto, not 0 -- without an explicit reset here and
       on .gd-column/.gd-fields/.gd-field below, a wide-enough child (e.g. a multi-select
       chips row with several languages picked) refuses to shrink to its track's 1fr share and
       forces the whole grid past .gd-body's width, which nothing here was clipping. That's
       the "unnecessary horizontal scrollbar" -- the content wasn't actually wider than the
       dialog needed to allow, the dialog just never told its children they were allowed to
       shrink. */
    overflow-x: hidden;
    flex: 1;
    min-width: 0;
}

/* ── Stepper (the full add/edit dialog) ───────────────────────────────────────────────
   The rail sits beside the pane, the layout every other wizard here uses. The form is rendered
   by RadzenTemplateForm, so the grid goes on it rather than on .gd-dialog. */
.gd-dialog.is-stepped > form {
    display: grid;
    grid-template-columns: 300px minmax(0, 1fr);
    column-gap: var(--sc-space-5);
    align-items: start;
}

.gd-dialog.is-stepped > form > .sc-dialog-header,
.gd-dialog.is-stepped > form > header {
    grid-column: 1 / -1;
}

.gd-dialog.is-stepped .bw-wizard-rail {
    grid-column: 1;
    grid-row: 2 / span 2;
    margin: 0 0 var(--sc-space-5) var(--sc-space-5);
}

.gd-dialog.is-stepped > form > .gd-body,
.gd-dialog.is-stepped > form > .gd-step-foot {
    grid-column: 2;
}

/* One step at a time, so the two-column field grid would leave an empty track beside it. */
.gd-body.is-stepped {
    display: block;
}

.gd-body.is-stepped .gd-column + .gd-column:empty {
    display: none;
}

.gd-steps {
    display: flex;
    align-items: center;
    gap: var(--sc-space-2);
    flex-wrap: wrap;
    margin: 0;
    padding: var(--sc-space-4) 2rem 0;
    list-style: none;
}

.gd-step {
    display: flex;
    align-items: center;
    min-width: 0;
}

/* A step behind the current one is a link back; the rest are labels, not controls. */
.gd-step-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--sc-space-2);
    padding: 6px 10px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--sc-text-secondary);
    font-size: var(--sc-text-xs);
    font-weight: var(--sc-font-medium);
    cursor: pointer;
}

.gd-step-btn:disabled {
    cursor: default;
}

.gd-step-dot {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 999px;
    background: var(--sc-surface-variant);
    border: 1px solid var(--sc-border);
    font-size: 0.7rem;
    font-weight: var(--sc-font-semibold);
}

.gd-step.is-current .gd-step-btn {
    color: var(--sc-text-primary);
    background: var(--sc-surface);
}

.gd-step.is-current .gd-step-dot {
    background: var(--sc-primary-500);
    border-color: var(--sc-primary-500);
    color: #fff;
}

.gd-step.is-done .gd-step-dot {
    background: var(--sc-success-500);
    border-color: var(--sc-success-500);
    color: #fff;
}

.gd-step + .gd-step::before {
    content: "";
    width: 1rem;
    height: 1px;
    background: var(--sc-border);
    flex: none;
}

.gd-step-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sc-space-3);
    flex-wrap: wrap;
    padding: var(--sc-space-4) 2rem;
    border-top: 1px solid var(--sc-border);
    background: var(--sc-surface);
}

.gd-step-foot-actions {
    display: flex;
    align-items: center;
    gap: var(--sc-space-2);
    margin-left: auto;
}

.gd-step-error {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--sc-danger-500);
    font-size: var(--sc-text-xs);
}

@media (max-width: 640px) {
    .gd-steps,
    .gd-step-foot {
        padding-left: var(--sc-space-4);
        padding-right: var(--sc-space-4);
    }

    .gd-step:not(.is-current) .gd-step-label {
        display: none;
    }
}

/* ── Compact section editor (DialogOptions.CssClass = "gd-dialog-compact") ──────────────
   Three separate paddings stacked between the dialog edge and the fields: dialog-modern.css
   gives every registered dialog root (.gd-dialog among ~40 others) 1.5rem, ScDialogHeader
   carries 16px/var(--sc-space-8) of its own, and .gd-body adds 1.5rem more -- 48px of side
   inset before a text box, 56px before the header text, and 40px of air above the title, on
   a 560px popup holding four fields. One inset instead: header, body and footer all sit
   20px from the edge and line up with each other.

   Scoped to the compact class, never to .gd-dialog or .sc-dialog-header directly -- both are
   shared, and the full-screen "all" sheet still wants the roomier spacing. */
.gd-dialog-compact .gd-dialog {
    padding: 0;
}

.gd-dialog-compact .sc-dialog-header {
    padding: 14px 20px;
    min-height: 0;
    flex-wrap: wrap;
}

/* The two actions are ~300px of a 560px header, and they do not shrink -- which left the title
   block ~160px wide and wrapped "Add or update guardian information" a word per line (#12483).
   Give the title the whole row and let the buttons take the next one. */
.gd-dialog-compact .sc-dialog-header-title {
    flex: 1 0 100%;
}

.gd-dialog-compact .sc-dialog-header-actions {
    margin-left: auto;
}

.gd-dialog-compact .gd-body,
.gd-dialog-compact .gd-body--single {
    padding: 20px;
}

.gd-dialog-compact .gd-footer {
    padding: 14px 20px;
}

/* Section-scoped edit (one card's Edit button): one column of plain fields in a popup sized
   to them. The section chrome is dropped here -- .gd-section's card and .gd-section-header's
   icon/title/subtitle restate what ScDialogHeader has already said two centimetres above, so
   in single mode they are a second header and a card wrapping the only thing in the dialog.
   Both are load-bearing in "all" mode, where seven sections share one sheet and the headers
   are the only thing telling them apart -- which is why this is scoped to --single rather
   than removed from the sections themselves. */
.gd-body--single {
    grid-template-columns: minmax(0, 1fr);
    align-content: start;
    padding: 1.5rem;
    gap: 1.25rem;
}

.gd-body--single .gd-section {
    background: transparent;
    border: none;
    padding: 0;
}

/* A dialog showing exactly one section drops its header entirely -- ScDialogHeader above it
   already carries the same icon, title and subtitle. */
.gd-body--single .gd-column > .gd-section:only-child .gd-section-header {
    display: none;
}

/* A composite ("birth", "contact") still needs its groups told apart, but NOT with four
   icon + title + subtitle blocks stacked down one popup, each looking like the dialog's own
   header. Demote them to a slim rule-and-label: the group is named, the dialog header stays
   the only heading on screen. */
.gd-body--single .gd-section-icon,
.gd-body--single .gd-section-subtitle {
    display: none;
}

.gd-body--single .gd-section-header {
    gap: 0;
    margin-bottom: 0.75rem;
    padding-bottom: 0.4rem;
}

.gd-body--single .gd-section-title {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--sc-text-secondary);
    margin: 0;
}

/* The dialog opens with Height="auto", so .gd-dialog's height:100% resolves against nothing
   and the body never gets a bounded height to scroll inside. The whole dialog overflowed
   instead, which is what pushed the title up under the top edge and the buttons off the
   bottom. Cap the body: the header above it and the footer below it are then always on
   screen, and only the fields move. */
.gd-dialog-compact .gd-dialog {
    height: auto;
}

.gd-dialog-compact .gd-body {
    max-height: min(58vh, 540px);
    overflow-y: auto;
}

/* Gender as selectable cards: five equal columns, not a content-sized flex row. Sized to
   content they came out five different widths on a ragged line, which reads as five options
   of different weight -- and "Prefer Not to Say" ended up the biggest target on the row. */
.gd-radio-cards {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0.5rem;
    align-items: stretch;
}

@media (max-width: 700px) {
    .gd-radio-cards {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.gd-radio-card {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    padding: 0.5rem 0.5rem;
    border: 1px solid var(--sc-border);
    border-radius: 10px;
    background: var(--sc-surface);
    cursor: pointer;
    font-size: 0.8rem;
    line-height: 1.2;
    text-align: center;
    color: var(--sc-text-primary);
    transition: border-color 0.12s ease, background 0.12s ease;
}

.gd-radio-card:hover {
    background: var(--sc-surface-muted);
}

.gd-radio-card input[type="radio"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.gd-radio-card-dot {
    width: 15px;
    height: 15px;
    border-radius: 50%;
    border: 1.5px solid var(--sc-border-strong);
    flex-shrink: 0;
    position: relative;
}

.gd-radio-card.is-selected {
    border-color: var(--sc-primary-500);
    background: var(--sc-primary-50);
    color: var(--sc-primary-600, var(--sc-primary-500));
    font-weight: 600;
}

.gd-radio-card.is-selected .gd-radio-card-dot {
    border-color: var(--sc-primary-500);
}

.gd-radio-card.is-selected .gd-radio-card-dot::after {
    content: "";
    position: absolute;
    inset: 3px;
    border-radius: 50%;
    background: var(--sc-primary-500);
}

/* Keeps the validator's hidden target out of sight without display:none, which would take it
   out of the form and defeat the point of having it. */
.gd-visually-hidden {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

.gd-column {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    min-width: 0;
}

.gd-section {
    background: var(--sc-surface);
    border-radius: 12px;
    border: 1px solid var(--sc-border);
    padding: 1.75rem;
}

.gd-section:hover {}

.gd-section-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--sc-border-light);
}

.gd-section-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--sc-info-50) 0%, var(--sc-info-50) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.gd-section-icon .rzi {
    font-size: 1.25rem;
    color: var(--sc-info-600);
}

.gd-section-title {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--sc-text-primary);
    letter-spacing: -0.01em;
}

.gd-section-subtitle {
    margin: 0.15rem 0 0 0;
    font-size: 0.8rem;
    color: var(--sc-text-disabled);
    font-weight: 400;
}

.gd-fields {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.15rem;
    min-width: 0;
}

.gd-field {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    min-width: 0;
}

.gd-field-full {
    grid-column: 1 / -1;
}

/* "Same as residential address" toggle — a checkbox + its label sit on one line,
   unlike every other .gd-field which stacks a label above its input. */
.gd-same-as {
    flex-direction: row;
    align-items: center;
    gap: 0.5rem;
}

.gd-label {
    font-size: 0.775rem;
    font-weight: 600;
    color: var(--sc-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.gd-required {
    color: var(--sc-danger-500);
    font-weight: 700;
}

.gd-field .rz-textbox,
.gd-field .rz-dropdown {
    border-radius: 10px !important;
    border: 1px solid var(--sc-border) !important;
    background: var(--sc-surface-variant) !important;
    transition: all 0.15s ease !important;
    font-size: 0.9rem !important;
    padding: 0.6rem 0.85rem !important;
}

.gd-field .rz-textbox:focus,
.gd-field .rz-dropdown.rz-state-focused {
    border-color: var(--sc-primary-500) !important;
    background: var(--sc-surface) !important;
}

.gd-field .rz-textbox::placeholder {
    color: var(--sc-border-strong);
}

/* Permissions Grid */
.gd-permissions {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
}

.gd-perm-card {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 1rem;
    background: var(--sc-surface-variant);
    border: 1px solid var(--sc-border);
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.gd-perm-card:hover {
    background: var(--sc-primary-50);
    border-color: var(--sc-primary-200);
}

.gd-perm-card .rz-chkbox {
    margin-top: 2px;
    flex-shrink: 0;
}

.gd-perm-content {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
}

.gd-perm-label {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--sc-text-primary);
}

.gd-perm-desc {
    font-size: 0.75rem;
    color: var(--sc-text-disabled);
    line-height: 1.4;
}

/* Footer */
.gd-footer {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 0.75rem;
    padding: 1.25rem 2rem;
    background: var(--sc-surface);
    border-top: 1px solid var(--sc-border);
    flex-shrink: 0;
}

.gd-btn-cancel {
    border-radius: 10px !important;
    padding: 0.6rem 1.5rem !important;
    font-weight: 600 !important;
    border: 1px solid var(--sc-border) !important;
}

.gd-btn-submit {
    border-radius: 10px !important;
    padding: 0.6rem 2rem !important;
    font-weight: 600 !important;
    background: linear-gradient(135deg, var(--sc-primary-500) 0%, var(--sc-primary-500) 100%) !important;
    border: none !important;
}

.gd-btn-submit:hover {}

/* Radio Button List */
.gd-radio-list {
    display: flex;
    gap: 1.25rem;
    flex-wrap: wrap;
    padding: 0.25rem 0;
}

/* Validation */
.gd-field .rz-message {
    font-size: 0.75rem;
    margin-top: 0.2rem;
}

/* Responsive */
@media (max-width: 900px) {
    .gd-body {
        grid-template-columns: 1fr;
        padding: 1.25rem;
        gap: 1.25rem;
    }

    .gd-fields {
        grid-template-columns: 1fr;
    }

    .gd-permissions {
        grid-template-columns: 1fr;
    }

    .gd-footer {
        padding: 1rem 1.25rem;
    }
}

/* =========================================
   Dark Mode Overrides
   ========================================= */
[data-theme*="-dark"] .section-title .rzi {
    color: var(--sc-gray-300);
    background: #0f172a;
}

/* Sidebar nav — dark mode */
[data-theme*="-dark"] .sd-nav-item:hover {
    background: rgba(255, 255, 255, 0.05);
    color: var(--sc-text-primary);
}

[data-theme*="-dark"] .sd-nav-item:hover .sd-nav-icon {
    background: #1f2937;
}

[data-theme*="-dark"] .sd-nav-item:hover .sd-nav-label {
    color: var(--sc-text-primary);
}

[data-theme*="-dark"] .sd-nav-item.active {
    background: rgba(255, 255, 255, 0.08);
    color: var(--sc-primary-400);
}

[data-theme*="-dark"] .sd-nav-item.active .sd-nav-icon {
    background: var(--sc-primary-500);
}

[data-theme*="-dark"] .sd-nav-item.active .sd-nav-icon .rzi {
    color: var(--sc-text-inverse);
}

/* Sidebar category header icons — dark mode */
[data-theme*="-dark"] .sd-nav-category-header .rzi {
    color: var(--sc-gray-400);
}

/* =========================================
   Students Dashboard — Dark Mode (global)
   ========================================= */

/* Glass card dark mode — lighter than icon backgrounds */
[data-theme*="-dark"] .glass-card {
    background: var(--sc-surface, #1f2937) !important;
    border-color: rgba(255, 255, 255, 0.06) !important;
}

[data-theme*="-dark"] .glass-card-header {
    border-bottom-color: rgba(255, 255, 255, 0.06) !important;
}

/* Icon boxes in glass-card headers — !important to beat scoped CSS */
[data-theme*="-dark"] .icon-box.primary,
[data-theme*="-dark"] .icon-box.amber,
[data-theme*="-dark"] .icon-box.purple {
    background: #0f172a !important;
    color: var(--sc-gray-300) !important;
}

[data-theme*="-dark"] .icon-box.primary .rzi,
[data-theme*="-dark"] .icon-box.amber .rzi,
[data-theme*="-dark"] .icon-box.purple .rzi {
    color: var(--sc-gray-300);
}

/* Stat card icons */
[data-theme*="-dark"] .stat-card-icon.primary,
[data-theme*="-dark"] .stat-card-icon.success,
[data-theme*="-dark"] .stat-card-icon.warning,
[data-theme*="-dark"] .stat-card-icon.info {
    background: #0f172a;
    color: var(--sc-gray-300);
}

/* Quick action cards — !important to beat scoped CSS */
[data-theme*="-dark"] .quick-action-card,
[data-theme*="-dark"] .quick-action-card.primary,
[data-theme*="-dark"] .quick-action-card.success,
[data-theme*="-dark"] .quick-action-card.info {
    background: #0f172a !important;
    border-color: rgba(255, 255, 255, 0.06) !important;
    color: var(--sc-text-primary) !important;
}

[data-theme*="-dark"] .quick-action-card .rzi,
[data-theme*="-dark"] .quick-action-card.primary .rzi,
[data-theme*="-dark"] .quick-action-card.success .rzi,
[data-theme*="-dark"] .quick-action-card.info .rzi {
    color: var(--sc-gray-300) !important;
}

/* Recent enrollment avatars */
[data-theme*="-dark"] .recent-avatar {
    background: #374151;
    color: var(--sc-gray-300);
}

/* Modern avatar */
[data-theme*="-dark"] .modern-avatar.default {
    background: #374151;
    color: var(--sc-gray-300);
}

/* Empty states */
[data-theme*="-dark"] .modern-empty-mini .empty-icon {
    background: #0f172a;
}

[data-theme*="-dark"] .modern-empty-mini .empty-icon .rzi {
    color: var(--sc-gray-300);
}

[data-theme*="-dark"] .modern-empty-state .empty-state-icon {
    background: #0f172a;
}

[data-theme*="-dark"] .modern-empty-state .empty-state-icon .rzi {
    color: var(--sc-gray-300);
}

/* Section header inline icons */
[data-theme*="-dark"] .section-header-inline h3 .rzi {
    color: var(--sc-gray-300);
    background: #0f172a;
}

/* Action redirect card icons */
[data-theme*="-dark"] .action-redirect-card .action-icon,
[data-theme*="-dark"] .action-redirect-card .action-icon.primary,
[data-theme*="-dark"] .action-redirect-card .action-icon.success,
[data-theme*="-dark"] .action-redirect-card .action-icon.info,
[data-theme*="-dark"] .action-redirect-card .action-icon.purple {
    background: #0f172a;
}

[data-theme*="-dark"] .action-redirect-card .action-icon .rzi {
    color: var(--sc-gray-300);
}

/* Quick action buttons */
[data-theme*="-dark"] .quick-action-btn.primary,
[data-theme*="-dark"] .quick-action-btn.success,
[data-theme*="-dark"] .quick-action-btn.info {
    background: #0f172a;
    color: var(--sc-gray-300);
}

/* Dashboard hero text — match Staff Directory */
[data-theme*="-dark"] .dashboard-details h1 {
    color: var(--sc-text-inverse);
}

[data-theme*="-dark"] .dashboard-details .dashboard-subtitle {
    color: var(--sc-hero-text-muted);
    opacity: 0.7;
}