/* _content/SchoolManagementApp/Components/AskForClassCard.razor.rz.scp.css */
/* Contact fallback under the "ask for a class" guide: tel:/mailto: as calm outline buttons. */
.ask-for-class-contact[b-ctwxyv1mtp] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    max-width: 500px;
    margin: -1rem auto 2rem;
    font-size: 0.9rem;
}

.ask-for-class-contact .btn[b-ctwxyv1mtp] {
    min-height: 2.75rem; /* 44px touch target */
    display: inline-flex;
    align-items: center;
}
/* _content/SchoolManagementApp/Components/ConciergeMigrationCard.razor.rz.scp.css */
.migration-choice[b-2pps5p2k5j] {
    display: grid;
    gap: 0.75rem;
}

.migration-offer[b-2pps5p2k5j] {
    padding: 0.875rem;
    border: 1px solid var(--primary);
    border-radius: 10px;
    background: color-mix(in srgb, var(--primary) 6%, var(--card-bg));
}

.migration-eyebrow[b-2pps5p2k5j] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    color: var(--primary);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.migration-title[b-2pps5p2k5j] {
    margin: 0.375rem 0 0.25rem;
    color: var(--text-color);
    font-size: 1rem;
    font-weight: 700;
}

.migration-description[b-2pps5p2k5j] {
    margin: 0 0 0.75rem;
    color: var(--text-muted);
    font-size: 0.875rem;
    line-height: 1.5;
}

.migration-primary[b-2pps5p2k5j],
.migration-secondary[b-2pps5p2k5j] {
    min-height: 44px;
    border-radius: 8px;
    font-size: 0.875rem;
    font-weight: 600;
}

.migration-primary[b-2pps5p2k5j] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.625rem 1rem;
    background: var(--primary);
    color: white;
    text-decoration: none;
}

.migration-primary:hover[b-2pps5p2k5j] {
    background: var(--primary-hover);
    color: white;
}

.migration-email-fallback[b-2pps5p2k5j] {
    margin: 0.5rem 0 0;
    color: var(--text-muted);
    font-size: 0.75rem;
    text-align: center;
}

.migration-email-fallback a[b-2pps5p2k5j] {
    color: var(--primary);
    overflow-wrap: anywhere;
}

.migration-reassurance[b-2pps5p2k5j] {
    display: flex;
    align-items: flex-start;
    gap: 0.375rem;
    margin-top: 0.75rem;
    color: var(--status-paid-fg);
    font-size: 0.8125rem;
    line-height: 1.4;
}

.migration-details[b-2pps5p2k5j] {
    margin-top: 0.625rem;
    color: var(--text-muted);
    font-size: 0.8125rem;
}

.migration-details summary[b-2pps5p2k5j] {
    min-height: 44px;
    display: flex;
    align-items: center;
    cursor: pointer;
    color: var(--text-color);
    font-weight: 600;
}

.migration-details summary[b-2pps5p2k5j]::after {
    content: "+";
    margin-left: auto;
    padding-left: 0.5rem;
    color: var(--primary);
    font-size: 1rem;
}

.migration-details[open] summary[b-2pps5p2k5j]::after {
    content: "−";
}

.migration-details p[b-2pps5p2k5j] {
    margin: 0 0 0.5rem;
    line-height: 1.45;
}

.migration-details .migration-warning[b-2pps5p2k5j] {
    margin-bottom: 0;
}

.migration-divider[b-2pps5p2k5j] {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    color: var(--text-muted);
    font-size: 0.75rem;
}

.migration-divider[b-2pps5p2k5j]::before,
.migration-divider[b-2pps5p2k5j]::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--border);
}

.migration-secondary[b-2pps5p2k5j] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    width: 100%;
    padding: 0.625rem 0.875rem;
    border: 1px solid var(--border);
    background: var(--card-bg);
    color: var(--text-color);
    cursor: pointer;
    text-align: left;
}

.migration-secondary:hover[b-2pps5p2k5j] {
    border-color: var(--primary);
    color: var(--primary);
}

.migration-secondary span[b-2pps5p2k5j] {
    display: grid;
    gap: 0.125rem;
}

.migration-secondary small[b-2pps5p2k5j] {
    color: var(--text-muted);
    font-weight: 400;
}

@media (min-width: 576px) {
    .migration-primary[b-2pps5p2k5j] {
        width: fit-content;
    }

    .migration-email-fallback[b-2pps5p2k5j] {
        text-align: left;
    }
}
/* _content/SchoolManagementApp/Components/DateInput.razor.rz.scp.css */
.date-input-wrapper[b-v0fmani47d] {
    position: relative;
}

.date-input-display[b-v0fmani47d] {
    display: block;
}

/* Force light appearance regardless of theme or OS dark mode */
.date-input-wrapper input[readonly][b-v0fmani47d] {
    background-color: #ffffff !important;
    color: #111827 !important;
    color-scheme: light;
    cursor: pointer;
}

[data-theme="dark"] .date-input-wrapper input[readonly][b-v0fmani47d] {
    background-color: #ffffff !important;
    color: #111827 !important;
    border-color: #cbd5e1 !important;
}

/* Never intercepts pointer input: clicks must reach the visible input so its
   Blazor handler runs (mobile overlay, or showPicker() on the native input). */
.date-input-hidden[b-v0fmani47d] {
    position: absolute;
    inset: 0;
    opacity: 0;
    pointer-events: none;
    z-index: 2;
    color-scheme: light !important;
}

/* Calendar picker overlay */
.date-picker-overlay[b-v0fmani47d] {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: rgba(17, 24, 39, 0.45);
    overflow: hidden;
    overscroll-behavior: contain;
    touch-action: none;
}

.date-picker-modal[b-v0fmani47d] {
    width: min(360px, 100%);
    border-radius: 18px;
    background: #ffffff;
    color: #111827;
    box-shadow: 0 24px 50px rgba(15, 23, 42, 0.24);
    padding: 16px;
    touch-action: auto;
}

/* Month/year navigation */
.date-picker-nav[b-v0fmani47d] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}

.date-picker-nav-title[b-v0fmani47d] {
    font-size: 1rem;
    font-weight: 700;
}

.date-picker-nav-btn[b-v0fmani47d] {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: #111827;
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
}

.date-picker-nav-btn:active[b-v0fmani47d] {
    background: #f3f4f6;
}

/* Weekday headers */
.date-picker-weekdays[b-v0fmani47d] {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    text-align: center;
    margin-bottom: 4px;
}

.date-picker-weekdays span[b-v0fmani47d] {
    font-size: 0.75rem;
    font-weight: 600;
    color: #9ca3af;
    padding: 4px 0;
}

/* Day grid */
.date-picker-grid[b-v0fmani47d] {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 4px;
}

.date-picker-cell[b-v0fmani47d] {
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: #111827;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    padding: 0;
}

.date-picker-cell:not(.empty):active[b-v0fmani47d] {
    background: var(--brand-50);
}

.date-picker-cell.today[b-v0fmani47d] {
    border: 1.5px solid var(--primary);
}

.date-picker-cell.selected[b-v0fmani47d] {
    background: var(--primary);
    color: #ffffff;
    font-weight: 700;
}

.date-picker-cell.empty[b-v0fmani47d] {
    cursor: default;
}
/* _content/SchoolManagementApp/Components/EditSheet.razor.rz.scp.css */
/* EditSheet — one-field editor. Bottom sheet on phones, centered dialog on
   desktop. Save sits in the header (bottom-dead-zone rule). Colors via tokens;
   the sheet follows the app theme (card surface), unlike the pinned-light
   pickers, because it hosts form controls that already have dark-mode rules. */

.edit-sheet-overlay[b-ztktz1z6b1] {
    position: fixed;
    inset: 0;
    /* Beat the support-chat bubble and tie with the bottom nav; DOM order wins
       the tie, so mount the sheet after the page content. */
    z-index: 2147483647;
    background: rgba(17, 24, 39, 0.45);
    display: flex;
    align-items: flex-end;
    justify-content: center;
    overscroll-behavior: contain;
}

.edit-sheet[b-ztktz1z6b1] {
    width: 100%;
    background: var(--card-bg);
    color: var(--text-color);
    border-radius: 18px 18px 0 0;
    padding: 0.25rem 1rem calc(1.25rem + env(safe-area-inset-bottom, 0px));
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    box-shadow: var(--shadow-md);
    animation: edit-sheet-up-b-ztktz1z6b1 0.2s ease;
    outline: none;
}

@keyframes edit-sheet-up-b-ztktz1z6b1 {
    from { transform: translateY(100%); }
    to { transform: translateY(0); }
}

.edit-sheet-handle[b-ztktz1z6b1] {
    width: 36px;
    height: 4px;
    border-radius: 2px;
    background: var(--border);
    margin: 0.4rem auto 0.5rem;
    flex-shrink: 0;
}

.edit-sheet-header[b-ztktz1z6b1] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 44px;
    margin-bottom: 0.75rem;
}

.edit-sheet-title[b-ztktz1z6b1] {
    flex: 1;
    min-width: 0;
    text-align: center;
    font-weight: 600;
    font-size: var(--text-base);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.edit-sheet-cancel[b-ztktz1z6b1] {
    background: none;
    border: 0;
    color: var(--text-muted);
    padding: 0.5rem 0.25rem;
    min-height: 44px;
    font-size: var(--text-base);
}

.edit-sheet-save[b-ztktz1z6b1] {
    min-height: 44px;
    min-width: 5.5rem;
    border-radius: var(--radius-full);
    padding-inline: 1.1rem;
}

.edit-sheet-body[b-ztktz1z6b1] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.edit-sheet-input[b-ztktz1z6b1] {
    min-height: 52px;
    font-size: 1.125rem;
}

.edit-sheet-hint[b-ztktz1z6b1] {
    color: var(--text-muted);
    font-size: var(--text-sm);
}

.edit-sheet-error[b-ztktz1z6b1] {
    color: var(--danger);
    font-size: var(--text-sm);
}

.edit-sheet-secondary[b-ztktz1z6b1] {
    margin-top: 0.5rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--border);
}

/* Desktop: a small centered dialog instead of a sheet. */
@media (min-width: 768px) {
    .edit-sheet-overlay[b-ztktz1z6b1] {
        align-items: center;
    }

    .edit-sheet[b-ztktz1z6b1] {
        width: min(440px, calc(100vw - 2rem));
        border-radius: var(--radius-lg);
        padding: 1rem 1.25rem 1.25rem;
        animation: edit-sheet-in-b-ztktz1z6b1 0.15s ease;
    }

    .edit-sheet-handle[b-ztktz1z6b1] {
        display: none;
    }

    @keyframes edit-sheet-in-b-ztktz1z6b1 {
        from { transform: translateY(8px); opacity: 0; }
        to { transform: translateY(0); opacity: 1; }
    }
}
/* _content/SchoolManagementApp/Components/InstallAppGuide.razor.rz.scp.css */
.install-guide[b-3yqghr1rdg] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.install-guide-installed[b-3yqghr1rdg] {
    display: flex;
    align-items: center;
    color: var(--success, #16A34A);
    font-weight: 600;
}

.install-guide-toggle[b-3yqghr1rdg],
.install-guide-copy[b-3yqghr1rdg] {
    min-height: 44px; /* thumb-sized */
    padding: 0.5rem 1rem;
    border: 1.5px solid var(--border);
    border-radius: 10px;
    background: var(--card-bg);
    color: var(--text-color);
    font-weight: 600;
    font-size: 0.9375rem;
    cursor: pointer;
    align-self: flex-start;
}

.install-guide-toggle:hover[b-3yqghr1rdg],
.install-guide-copy:hover[b-3yqghr1rdg] {
    border-color: var(--primary);
}

.install-guide-handoff[b-3yqghr1rdg] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    align-items: flex-start;
}

.install-guide-intro[b-3yqghr1rdg] {
    margin: 0;
    color: var(--text-muted);
    font-size: 0.9375rem;
    line-height: 1.5;
}

.install-guide-qr[b-3yqghr1rdg] {
    width: 160px;
    max-width: 100%;
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 0.5rem;
    background: #fff; /* QR quiet zone must stay white in dark mode too */
}

.install-guide-tabs[b-3yqghr1rdg] {
    display: flex;
    gap: 0.5rem;
}

.install-guide-tab[b-3yqghr1rdg] {
    min-height: 44px;
    padding: 0.5rem 1rem;
    border: 1.5px solid var(--border);
    border-radius: 10px;
    background: var(--card-bg);
    color: var(--text-color);
    font-weight: 600;
    font-size: 0.9375rem;
    cursor: pointer;
}

.install-guide-tab.active[b-3yqghr1rdg] {
    border-color: var(--primary);
    background: var(--brand-100);
    color: var(--primary);
}

.install-guide-steps[b-3yqghr1rdg] {
    margin: 0;
    padding-left: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    color: var(--text-color);
    font-size: 0.9375rem;
    line-height: 1.5;
}

.install-guide-note[b-3yqghr1rdg] {
    color: var(--text-muted);
    font-size: 0.875rem;
    line-height: 1.5;
}
/* _content/SchoolManagementApp/Components/LanguageChoiceCard.razor.rz.scp.css */
.language-choice[b-xyzdk7bfxy] {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.language-choice-form[b-xyzdk7bfxy] {
    display: contents;
}

.language-choice-btn[b-xyzdk7bfxy] {
    min-height: 44px; /* thumb-sized: the card is used on phones */
    padding: 0.5rem 1.25rem;
    border: 1.5px solid var(--border);
    border-radius: 10px;
    background: var(--card-bg);
    color: var(--text-color);
    font-weight: 600;
    font-size: 0.9375rem;
    cursor: pointer;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

.language-choice-btn:hover[b-xyzdk7bfxy] {
    border-color: var(--primary);
}

.language-choice-btn.chosen[b-xyzdk7bfxy] {
    border-color: var(--primary);
    background: var(--brand-100);
    color: var(--primary);
}
/* _content/SchoolManagementApp/Components/MobilePickerSelect.razor.rz.scp.css */
.mobile-picker-native-select[b-soq5h6gpsw] {
    color-scheme: light;
    background: #ffffff !important;
    color: #111827 !important;
    -webkit-text-fill-color: #111827 !important;
}

.mobile-picker-native-select option[b-soq5h6gpsw],
.mobile-picker-native-select optgroup[b-soq5h6gpsw] {
    background: #ffffff !important;
    color: #111827 !important;
}

.mobile-picker-trigger[b-soq5h6gpsw] {
    display: none !important;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    text-align: left;
    color-scheme: light;
    background: #ffffff !important;
    color: #111827 !important;
    border-color: #d1d5db !important;
    background-image: none !important;
    -webkit-appearance: none;
    appearance: none;
    -webkit-text-fill-color: #111827 !important;
}

.mobile-picker-force-custom .mobile-picker-native-select[b-soq5h6gpsw] {
    display: none !important;
}

.mobile-picker-force-custom .mobile-picker-trigger[b-soq5h6gpsw] {
    display: flex !important;
}

.mobile-picker-trigger-label[b-soq5h6gpsw] {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mobile-picker-chevron[b-soq5h6gpsw] {
    color: #6b7280;
    font-size: 0.85rem;
    flex-shrink: 0;
}

.mobile-picker-overlay[b-soq5h6gpsw] {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: rgba(17, 24, 39, 0.45);
    overflow: hidden;
    overscroll-behavior: contain;
    touch-action: none;
}

.mobile-picker-modal[b-soq5h6gpsw] {
    width: min(420px, 100%);
    max-height: min(70vh, 560px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-radius: 18px;
    background: #ffffff;
    color: #111827;
    box-shadow: 0 24px 50px rgba(15, 23, 42, 0.24);
    touch-action: auto;
}

.mobile-picker-header[b-soq5h6gpsw] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 18px 20px 12px;
    border-bottom: 1px solid #e5e7eb;
}

.mobile-picker-header h3[b-soq5h6gpsw] {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 700;
}

.mobile-picker-close[b-soq5h6gpsw] {
    border: 0;
    background: transparent;
    color: #6b7280;
    font-size: 1.75rem;
    line-height: 1;
}

.mobile-picker-body[b-soq5h6gpsw] {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    gap: 10px;
    padding: 16px 20px 20px;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}

.mobile-picker-option[b-soq5h6gpsw] {
    width: 100%;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 16px;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    background: #ffffff;
    color: #111827;
    text-align: left;
    font-weight: 500;
}

.mobile-picker-option.active[b-soq5h6gpsw] {
    border-color: var(--primary);
    background: var(--brand-50);
    box-shadow: 0 0 0 2px rgba(var(--brand-rgb), 0.12);
}

.mobile-picker-option-description[b-soq5h6gpsw] {
    color: #6b7280;
    font-size: 0.85rem;
    white-space: nowrap;
}

/* Dark theme: base !important styles already enforce light colors;
   only border-color needs an explicit dark-mode override. */
[data-theme="dark"] .mobile-picker-trigger[b-soq5h6gpsw],
[data-theme="dark"] .mobile-picker-native-select[b-soq5h6gpsw] {
    border-color: #cbd5e1 !important;
}

[data-theme="dark"] .mobile-picker-select-shell .mobile-picker-trigger[b-soq5h6gpsw],
[data-theme="dark"] .mobile-picker-select-shell .mobile-picker-native-select[b-soq5h6gpsw] {
    background: #ffffff !important;
    color: #111827 !important;
    border-color: #d1d5db !important;
    background-image: none !important;
    -webkit-text-fill-color: #111827 !important;
}

@media (max-width: 767.98px) {
    .mobile-picker-native-select[b-soq5h6gpsw] {
        display: none !important;
    }

    .mobile-picker-trigger[b-soq5h6gpsw] {
        display: flex !important;
    }
}
/* _content/SchoolManagementApp/Components/ParentLane.razor.rz.scp.css */
/* Parent welcome lane: a calm card above the hero grid. Tokens only. */
.parent-lane[b-bofgqbn9yu] {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 1rem;
    padding: 1rem 1rem 0.5rem;
    margin-bottom: 1.25rem;
}

.parent-lane-header[b-bofgqbn9yu] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.parent-lane-progress[b-bofgqbn9yu] {
    margin-left: 0.5rem;
    color: var(--text-muted);
    font-size: 0.875rem;
}

/* The way back after a dismissal — the admin dashboard's pill, teacher-sized. */
.parent-lane-pill[b-bofgqbn9yu] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin-bottom: 1rem;
    padding: 0.3rem 0.75rem 0.3rem 0.55rem;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--surface);
    color: var(--text-color);
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    min-height: 2.75rem; /* 44px touch target */
}

.parent-lane-pill:hover[b-bofgqbn9yu],
.parent-lane-pill:focus-visible[b-bofgqbn9yu] {
    border-color: var(--brand-600);
    color: var(--brand-600);
}

.parent-lane-pill .bi[b-bofgqbn9yu] {
    font-size: 0.75rem;
    opacity: 0.7;
}

.parent-lane-ring[b-bofgqbn9yu] {
    width: 1.1rem;
    height: 1.1rem;
    transform: rotate(-90deg);
}

.parent-lane-ring .ring-track[b-bofgqbn9yu] {
    fill: none;
    stroke: var(--border);
    stroke-width: 3;
}

.parent-lane-ring .ring-fill[b-bofgqbn9yu] {
    fill: none;
    stroke: var(--brand-600);
    stroke-width: 3;
    stroke-linecap: round;
}
/* _content/SchoolManagementApp/Components/QuickFamilyRegistration.razor.rz.scp.css */
.quick-family[b-06b596oo1w] {
    max-width: 760px;
    margin: 0 auto;
    color: var(--text-color);
}

.quick-family-subtitle[b-06b596oo1w] {
    color: var(--text-muted);
    margin: 0 0 1.25rem;
}

.quick-family-section[b-06b596oo1w] {
    border: 1px solid var(--border-color, #dee2e6);
    border-radius: 14px;
    padding: 1.15rem;
    margin-bottom: 1rem;
    background: var(--surface, #fff);
}

.quick-family-section h3[b-06b596oo1w],
.quick-family-outcome h3[b-06b596oo1w] {
    font-size: 1rem;
    font-weight: 700;
    margin: 0 0 1rem;
}

.quick-family-section .form-label[b-06b596oo1w] {
    font-weight: 600;
}

.quick-family-fee-warning[b-06b596oo1w] {
    display: flex;
    gap: .4rem;
    align-items: center;
    color: var(--warning-text, #8a5600);
    margin-top: .5rem;
    font-size: .9rem;
}

.quick-family-fee-warning .btn-link[b-06b596oo1w] {
    padding: 0;
}

.quick-family-outcome[b-06b596oo1w] {
    border: 1px solid rgba(25, 135, 84, .25);
    border-radius: 14px;
    background: rgba(25, 135, 84, .07);
    padding: 1rem 1.1rem;
    margin-bottom: 1rem;
}

.quick-family-outcome ul[b-06b596oo1w] {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: .65rem;
}

.quick-family-outcome li[b-06b596oo1w] {
    display: flex;
    gap: .55rem;
    align-items: flex-start;
}

.quick-family-outcome .bi-check-circle-fill[b-06b596oo1w] {
    color: var(--success, #198754);
    margin-top: .1rem;
}

.quick-family-outcome .quick-family-safe[b-06b596oo1w] {
    color: var(--text-muted);
}

.quick-family-actions[b-06b596oo1w] {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: .35rem;
    padding-bottom: .25rem;
}

.quick-family-empty[b-06b596oo1w] {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    border: 1px solid var(--border-color, #dee2e6);
    border-radius: 14px;
    padding: 1.25rem;
    background: var(--surface, #fff);
}

.quick-family-empty > .bi[b-06b596oo1w] {
    color: var(--primary);
    font-size: 1.75rem;
}

.quick-family-empty p[b-06b596oo1w] {
    color: var(--text-muted);
    margin: .25rem 0 .9rem;
}

[b-06b596oo1w] .validation-message {
    color: var(--danger, #dc3545);
    font-size: .82rem;
    margin-top: .25rem;
}

@media (max-width: 575.98px) {
    .quick-family-section[b-06b596oo1w] {
        padding: 1rem;
    }
}
/* _content/SchoolManagementApp/Components/ReceiptSheet.razor.rz.scp.css */
/* The receipt document: a card on screen, a clean sheet in print. It commits
   to plain black-on-white so the paper artifact is theme-independent. */

.receipt-sheet[b-z4ze2m6m3e] {
    position: relative;
    width: 100%;
    max-width: 42rem;
    background: #fff;
    color: #1a1a1a;
    border: 1px solid var(--bs-border-color);
    border-radius: 0.5rem;
    padding: 2rem;
    overflow: hidden;
}

.receipt-header[b-z4ze2m6m3e] {
    display: flex;
    justify-content: space-between;
    gap: 1.5rem;
    flex-wrap: wrap;
    border-bottom: 2px solid #1a1a1a;
    padding-bottom: 1rem;
    margin-bottom: 1.25rem;
}

.receipt-issuer-name[b-z4ze2m6m3e] {
    font-size: 1.25rem;
    font-weight: 700;
}

.receipt-issuer-details[b-z4ze2m6m3e] {
    font-size: 0.85rem;
    color: #555;
    white-space: pre-line;
}

.receipt-identity[b-z4ze2m6m3e] {
    text-align: right;
}

.receipt-identity h1[b-z4ze2m6m3e] {
    font-size: 1.1rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin: 0;
}

.receipt-number[b-z4ze2m6m3e] {
    font-size: 1.35rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.receipt-issued-date[b-z4ze2m6m3e] {
    font-size: 0.85rem;
    color: #555;
}

.receipt-amount[b-z4ze2m6m3e] {
    text-align: center;
    margin: 1.5rem 0;
}

.receipt-amount-label[b-z4ze2m6m3e] {
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #555;
}

.receipt-amount-value[b-z4ze2m6m3e] {
    font-size: 2.25rem;
    font-weight: 700;
    color: #157347; /* printed artifact: fixed success green, not a theme token */
}

.receipt-details[b-z4ze2m6m3e] {
    border-top: 1px solid #ddd;
    padding-top: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.receipt-row[b-z4ze2m6m3e] {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    font-size: 0.95rem;
}

.receipt-row span[b-z4ze2m6m3e] {
    color: #555;
}

.receipt-footer[b-z4ze2m6m3e] {
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid #ddd;
    font-style: italic;
    color: #333;
}

.receipt-fine-print[b-z4ze2m6m3e] {
    margin-top: 1.5rem;
    font-size: 0.75rem;
    color: #888;
    text-align: center;
}

/* Void state: the page stays reachable, the document says so loudly. */
.receipt-void-watermark[b-z4ze2m6m3e] {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 5rem;
    font-weight: 800;
    letter-spacing: 0.2em;
    color: rgba(220, 53, 69, 0.18);
    transform: rotate(-24deg);
    pointer-events: none;
    user-select: none;
}

.receipt-void-banner[b-z4ze2m6m3e] {
    position: relative;
    background: #f8d7da;
    color: #842029;
    border: 1px solid #f1aeb5;
    border-radius: 0.375rem;
    padding: 0.5rem 0.75rem;
    font-weight: 600;
    margin-bottom: 1.25rem;
}

/* Settings preview: unmistakably not an issued document. */
.receipt-sample-watermark[b-z4ze2m6m3e] {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 4.5rem;
    font-weight: 800;
    letter-spacing: 0.2em;
    color: rgba(108, 117, 125, 0.16);
    transform: rotate(-24deg);
    pointer-events: none;
    user-select: none;
}

@media print {
    .receipt-sheet[b-z4ze2m6m3e] {
        border: none;
        border-radius: 0;
        max-width: none;
        padding: 0;
    }
}
/* _content/SchoolManagementApp/Components/SetupHub.razor.rz.scp.css */
/* SetupHub — dashboard-native first-run guidance. All colors flow through the
   dark-aware design tokens (docs/design-system.md); no raw hex. Mobile-first:
   single column with the header + first step in the first viewport (primary
   actions live at the TOP — the bottom of the screen is a known dead zone
   under the bottom nav and support bubble). */

.setup-hub[b-qzf10s9egp] {
    max-width: 860px;
    margin: 0 auto;
    padding: 0.5rem 0 1.5rem;
}

.setup-hub-header[b-qzf10s9egp] {
    margin-bottom: 1.25rem;
}

.setup-hub-back[b-qzf10s9egp] {
    display: inline-flex;
    align-items: center;
    background: none;
    border: none;
    padding: 0.25rem 0;
    margin-bottom: 0.5rem;
    color: var(--text-muted);
    font-size: 0.875rem;
    cursor: pointer;
    min-height: 44px;
}

.setup-hub-back:hover[b-qzf10s9egp] {
    color: var(--primary);
}

.setup-hub-title[b-qzf10s9egp] {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-color);
    margin-bottom: 0.25rem;
}

.setup-hub-promise[b-qzf10s9egp] {
    font-size: 1rem;
    color: var(--text-muted);
    margin-bottom: 0.75rem;
}

.setup-hub-steps[b-qzf10s9egp] {
    margin-top: 1rem;
}

.setup-hub-phase[b-qzf10s9egp] {
    margin: 1.5rem 0 0.75rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border);
}

.setup-hub-phase:first-child[b-qzf10s9egp] {
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
}

.setup-hub-phase-heading[b-qzf10s9egp] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-3);
}

.setup-hub-phase-title[b-qzf10s9egp] {
    margin: 0;
    color: var(--text-color);
    font-size: 1rem;
    font-weight: 700;
}

.setup-hub-phase-body[b-qzf10s9egp] {
    margin: 0.2rem 0 0;
    color: var(--text-muted);
    font-size: 0.875rem;
    line-height: 1.45;
}

.setup-hub-phase-count[b-qzf10s9egp] {
    flex: 0 0 auto;
    padding: 0.25rem 0.625rem;
    border-radius: var(--radius-full);
    background: var(--brand-50);
    color: var(--primary);
    font-size: 0.75rem;
    font-weight: 700;
}

.setup-hub-phase-progress[b-qzf10s9egp] {
    height: 6px;
    margin-top: 0.625rem;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: var(--radius-full);
    background: var(--surface);
}

.setup-hub-phase-progress-fill[b-qzf10s9egp] {
    height: 100%;
    border-radius: var(--radius-full);
    background: linear-gradient(90deg, var(--brand-600), var(--brand-400));
    transition: width 0.4s ease;
}

.setup-hub-discovery[b-qzf10s9egp] {
    margin-top: 2rem;
}

.setup-hub-discovery-title[b-qzf10s9egp] {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--text-color);
    margin-bottom: 0.75rem;
}

.setup-hub-discovery-group[b-qzf10s9egp] {
    font-size: 0.8125rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
    margin: 1rem 0 0.5rem;
}

.setup-hub-aside[b-qzf10s9egp] {
    margin-top: 1.5rem;
}

.setup-hub-chips-title[b-qzf10s9egp] {
    font-size: 0.8125rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
    margin-bottom: 0.5rem;
}

.setup-hub-chips[b-qzf10s9egp] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.setup-hub-chip[b-qzf10s9egp] {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.5rem 0.875rem;
    border-radius: 9999px;
    border: 1px solid var(--border);
    background: var(--card-bg);
    color: var(--text-color);
    font-size: 0.875rem;
    cursor: pointer;
    transition: all 0.15s ease;
    min-height: 44px; /* comfortable touch target */
}

.setup-hub-chip:hover[b-qzf10s9egp] {
    border-color: var(--primary);
    color: var(--primary);
}

.setup-hub-footer[b-qzf10s9egp] {
    margin-top: 1.5rem;
    text-align: center;
}

.setup-hub-dismiss[b-qzf10s9egp] {
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 0.875rem;
    cursor: pointer;
    padding: 0.5rem 0.75rem;
}

.setup-hub-dismiss:hover[b-qzf10s9egp] {
    color: var(--text-color);
    text-decoration: underline;
}

@media (min-width: 992px) {
    .setup-hub[b-qzf10s9egp] {
        padding-top: 1rem;
    }

    .setup-hub-title[b-qzf10s9egp] {
        font-size: 1.75rem;
    }
}

.setup-hub-receipt-line[b-qzf10s9egp] {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-color);
}

/* Pre-activation accordion rows: every lane step stays visible as a compact,
   tappable row; only the current card is open. */
.setup-hub-step-row[b-qzf10s9egp] {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    width: 100%;
    min-height: 44px; /* comfortable touch target */
    padding: 0.5rem 0.75rem;
    margin-bottom: 0.375rem;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--card-bg);
    color: var(--text-color);
    font-size: 0.875rem;
    text-align: left;
    cursor: pointer;
    transition: border-color 0.15s ease;
}

.setup-hub-step-row:hover[b-qzf10s9egp] {
    border-color: var(--primary);
}

.setup-hub-step-row.is-completed[b-qzf10s9egp] {
    opacity: 0.8;
}

.setup-hub-step-row-check[b-qzf10s9egp] {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
}

.setup-hub-step-row-check i[b-qzf10s9egp] {
    font-size: 1rem;
    color: var(--success);
}

.setup-hub-step-row-dot[b-qzf10s9egp] {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid var(--border);
    border-radius: 50%;
}

.setup-hub-step-row-icon[b-qzf10s9egp] {
    flex-shrink: 0;
    line-height: 1;
}

.setup-hub-step-row-title[b-qzf10s9egp] {
    flex: 1;
    min-width: 0;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.setup-hub-step-row-chevron[b-qzf10s9egp] {
    flex-shrink: 0;
    color: var(--text-muted);
    font-size: 0.75rem;
}
/* _content/SchoolManagementApp/Components/StudentAttendanceCard.razor.rz.scp.css */
/* Season strip: 12 toggle cells (aria-pressed), colour = one status pair per band.
   Follows the MonthGrid toggle-grid rule; tokens only, never raw hex. */
.sar-strip[b-2b9q3xu9vj] {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 4px;
}

.sar-cell[b-2b9q3xu9vj] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    /* ≥44px touch target on phones. */
    min-height: 2.75rem;
    padding: 0.35rem 0.1rem;
    border: 1px solid transparent;
    border-radius: var(--radius-sm, 0.25rem);
    font-family: inherit;
    font-size: var(--text-xs, 0.75rem);
    line-height: 1.1;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}

.sar-cell-month[b-2b9q3xu9vj] {
    font-weight: 600;
    opacity: 0.85;
}

.sar-cell-count[b-2b9q3xu9vj] {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.sar-band--present[b-2b9q3xu9vj] { background: var(--status-present-bg); color: var(--status-present-fg); }
.sar-band--late[b-2b9q3xu9vj]    { background: var(--status-late-bg);    color: var(--status-late-fg); }
.sar-band--absent[b-2b9q3xu9vj]  { background: var(--status-absent-bg);  color: var(--status-absent-fg); }

.sar-band--none[b-2b9q3xu9vj] {
    background: var(--surface);
    color: var(--text-muted);
    border-color: var(--border);
    border-style: dashed;
}

.sar-cell--closed[b-2b9q3xu9vj] {
    background: var(--surface);
    color: var(--text-muted);
    border-color: var(--border);
    border-style: dashed;
    opacity: 0.6;
}

.sar-cell--selected[b-2b9q3xu9vj] {
    outline: 2px solid var(--primary);
    outline-offset: 1px;
}

.sar-cell:hover[b-2b9q3xu9vj] { filter: brightness(0.96); }

.sar-cell:focus-visible[b-2b9q3xu9vj] {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

.sar-season-nav[b-2b9q3xu9vj] {
    /* Icon-only chevrons; keep them small on desktop, tappable on phones. */
    line-height: 1;
    padding: 0.2rem 0.45rem;
}

.sar-season-total[b-2b9q3xu9vj] {
    font-size: var(--text-sm, 0.875rem);
    padding: 0.15rem 0.6rem;
    border-radius: var(--radius-full, 999px);
}

.sar-season-total.sar-band--none[b-2b9q3xu9vj] {
    background: transparent;
    border: 0;
}

.sar-dates[b-2b9q3xu9vj] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.sar-date[b-2b9q3xu9vj] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 0.2rem 0.55rem;
    border-radius: var(--radius-full, 999px);
    font-size: var(--text-xs, 0.75rem);
    font-weight: 600;
    white-space: nowrap;
}

.sar-date--present[b-2b9q3xu9vj]  { background: var(--status-present-bg); color: var(--status-present-fg); }
.sar-date--absent[b-2b9q3xu9vj]   { background: var(--status-absent-bg);  color: var(--status-absent-fg); }
.sar-date--unmarked[b-2b9q3xu9vj] { background: var(--surface); color: var(--text-muted); border: 1px dashed var(--border); }

.sar-date-class[b-2b9q3xu9vj] {
    font-weight: 400;
    opacity: 0.8;
}

@media (max-width: 575px) {
    .sar-strip[b-2b9q3xu9vj] {
        grid-template-columns: repeat(6, minmax(0, 1fr));
    }
    .sar-season-nav[b-2b9q3xu9vj] {
        min-width: 2.75rem;
        min-height: 2.75rem;
    }
}

.sar-class-filter[b-2b9q3xu9vj] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}
.sar-class-filter select[b-2b9q3xu9vj] {
    width: auto;
    max-width: 100%;
    min-height: 2.75rem;
}
.sar-date[b-2b9q3xu9vj] { white-space: normal; }
.sar-date-class[b-2b9q3xu9vj] { overflow-wrap: anywhere; }
/* _content/SchoolManagementApp/Components/StudentDetailsModal.razor.rz.scp.css */
/* Student details card — shared by /students, /attendance (and any page naming a student).
   Colors flow through tokens (see docs/design-system.md); only shadows are literal. */

.parent-card[b-ou72zf4msq] {
    transition: transform 0.2s;
    background: var(--surface);
}

.parent-card:hover[b-ou72zf4msq] {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.parent-info[b-ou72zf4msq] {
    line-height: 1.4;
}

.class-card[b-ou72zf4msq] {
    background: var(--surface);
    transition: transform 0.2s;
}

.class-card:hover[b-ou72zf4msq] {
    transform: translateY(-1px);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

:global([data-theme="dark"]) .parent-card[b-ou72zf4msq],
:global([data-theme="dark"]) .class-card[b-ou72zf4msq] {
    background: var(--bs-gray-750) !important;
    border-color: var(--bs-gray-600) !important;
}

:global([data-theme="dark"]) .parent-card:hover[b-ou72zf4msq] {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

:global([data-theme="dark"]) .class-card:hover[b-ou72zf4msq] {
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}

/* The action cluster: inline beside the title on desktop (pushed right, before
   the ✕), a full-width second header row on phones (bottom-dead-zone rule). */
@media (min-width: 768px) {
    .student-card-actions[b-ou72zf4msq] {
        margin-left: auto;
    }
}

@media (max-width: 767.98px) {
    .student-card-actions[b-ou72zf4msq] {
        width: 100%;
        order: 99; /* below the title + ✕ row */
    }
}

/* At/near the md boundary the fullscreen class no longer applies but Bootstrap
   would clamp modal-xl to 500px — keep the card usable on tablet portrait. */
@media (max-width: 991.98px) and (min-width: 768px) {
    .modal-xl[b-ou72zf4msq] {
        max-width: 95vw;
    }
}

@media (max-width: 767.98px) {
    /* Sizing (100dvh + safe-area + dead-zone clearance) comes from the shared
       fullscreen-modal recipe in custom.css — no max-height guesswork here. */

    /* Stack the detail cards on mobile */
    .student-details-modal .col-md-6[b-ou72zf4msq] {
        margin-bottom: 1rem;
    }

    /* Footer actions are desktop-only; the lone Κλείσιμο becomes one full-width,
       thumb-reachable target (44px+ via the button's own padding). */
    .student-details-modal .modal-footer > .btn[b-ou72zf4msq] {
        width: 100%;
        margin: 0;
    }
}
/* _content/SchoolManagementApp/Components/TeacherLane.razor.rz.scp.css */
/* First-week lane: a calm card above the hero grid. Tokens only. */
.teacher-lane[b-n1vo5vourj] {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 1rem;
    padding: 1rem 1rem 0.5rem;
    margin-bottom: 1.25rem;
}

.teacher-lane-header[b-n1vo5vourj] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.teacher-lane-progress[b-n1vo5vourj] {
    margin-left: 0.5rem;
    color: var(--text-muted);
    font-size: 0.875rem;
}

/* The way back after a dismissal — the admin dashboard's pill, teacher-sized. */
.teacher-lane-pill[b-n1vo5vourj] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin-bottom: 1rem;
    padding: 0.3rem 0.75rem 0.3rem 0.55rem;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--surface);
    color: var(--text-color);
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    min-height: 2.75rem; /* 44px touch target */
}

.teacher-lane-pill:hover[b-n1vo5vourj],
.teacher-lane-pill:focus-visible[b-n1vo5vourj] {
    border-color: var(--brand-600);
    color: var(--brand-600);
}

.teacher-lane-pill .bi[b-n1vo5vourj] {
    font-size: 0.75rem;
    opacity: 0.7;
}

.teacher-lane-ring[b-n1vo5vourj] {
    width: 1.1rem;
    height: 1.1rem;
    transform: rotate(-90deg);
}

.teacher-lane-ring .ring-track[b-n1vo5vourj] {
    fill: none;
    stroke: var(--border);
    stroke-width: 3;
}

.teacher-lane-ring .ring-fill[b-n1vo5vourj] {
    fill: none;
    stroke: var(--brand-600);
    stroke-width: 3;
    stroke-linecap: round;
}
/* _content/SchoolManagementApp/Components/ToastHost.razor.rz.scp.css */
.toast-host[b-meobyh9fou] {
    position: fixed;
    top: 1rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 20000; /* above modals/nav */
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    width: min(420px, calc(100vw - 2rem));
    pointer-events: none;
}

.app-toast[b-meobyh9fou] {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.85rem 1rem;
    border-radius: 0.75rem;
    background: #ffffff;
    color: #111827;
    border: 1px solid rgba(16, 185, 129, 0.35);
    border-left: 4px solid #10b981;
    box-shadow: 0 12px 30px rgba(15, 23, 42, 0.18);
    pointer-events: auto;
    animation: app-toast-in-b-meobyh9fou 0.25s ease;
}

.app-toast.leaving[b-meobyh9fou] {
    animation: app-toast-out-b-meobyh9fou 0.25s ease forwards;
}

.app-toast-icon[b-meobyh9fou] {
    color: #10b981;
    font-size: 1.15rem;
    line-height: 1.4;
    flex-shrink: 0;
}

.app-toast-text[b-meobyh9fou] {
    flex: 1;
    min-width: 0;
}

.app-toast-title[b-meobyh9fou] {
    font-weight: 600;
    font-size: 0.95rem;
}

.app-toast-message[b-meobyh9fou] {
    font-size: 0.9rem;
    color: #4b5563;
    overflow-wrap: anywhere;
}

/* Undo and friends: the way back from a one-tap action, so it has to read as the
   live control on the toast — 44px target, brand ink, no button chrome competing
   with the message. */
.app-toast-action[b-meobyh9fou] {
    align-self: center;
    flex-shrink: 0;
    min-height: 44px;
    padding: 0 0.75rem;
    border: 0;
    border-radius: 0.5rem;
    background: transparent;
    color: var(--primary);
    font-size: 0.9rem;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
}

.app-toast-action:hover[b-meobyh9fou],
.app-toast-action:active[b-meobyh9fou] {
    background: var(--brand-50);
}

.app-toast-action:focus-visible[b-meobyh9fou] {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

.app-toast-close[b-meobyh9fou] {
    border: 0;
    background: transparent;
    color: #9ca3af;
    font-size: 1.1rem;
    line-height: 1;
    padding: 0;
    flex-shrink: 0;
    cursor: pointer;
}

@keyframes app-toast-in-b-meobyh9fou {
    from { opacity: 0; transform: translateY(-0.5rem); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes app-toast-out-b-meobyh9fou {
    from { opacity: 1; transform: translateY(0); }
    to { opacity: 0; transform: translateY(-0.5rem); }
}

/* Dark theme: the toast stays a light card (like the app's popups/pickers) but
   with a readable dark-on-light body — matches the pinned-light convention. */
:global([data-theme="dark"]) .app-toast[b-meobyh9fou] {
    background: #ffffff;
    color: #111827;
}
/* _content/SchoolManagementApp/Components/TrialCountdownBanner.razor.rz.scp.css */
.trial-banner[b-5ndpm5wyj2] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.55rem 1rem;
    font-size: 0.9rem;
    line-height: 1.4;
}

.trial-banner-text[b-5ndpm5wyj2] {
    flex: 1 1 auto;
    min-width: 0;
}

.trial-banner--countdown[b-5ndpm5wyj2] {
    background: var(--status-overdue-bg);
    color: var(--status-overdue-fg);
    border-bottom: 1px solid var(--border);
}

.trial-banner--expired[b-5ndpm5wyj2] {
    background: var(--danger);
    color: #fff;
}

.trial-banner-cta[b-5ndpm5wyj2] {
    flex-shrink: 0;
    min-height: 36px;
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
}

.trial-banner-dismiss[b-5ndpm5wyj2] {
    flex-shrink: 0;
    background: none;
    border: none;
    color: inherit;
    padding: 0.4rem;
    min-width: 44px;
    min-height: 36px;
    cursor: pointer;
    opacity: 0.75;
}

.trial-banner-dismiss:hover[b-5ndpm5wyj2] {
    opacity: 1;
}

@media (max-width: 575.98px) {
    .trial-banner[b-5ndpm5wyj2] {
        flex-wrap: wrap;
        row-gap: 0.5rem;
        font-size: 0.85rem;
    }

    .trial-banner-text[b-5ndpm5wyj2] {
        flex: 1 1 100%;
    }

    .trial-banner-cta[b-5ndpm5wyj2] {
        flex: 1 1 auto;
        justify-content: center;
    }
}
/* _content/SchoolManagementApp/Components/ValueStrip.razor.rz.scp.css */
/* The continuing value receipt: a quiet band of real numbers, each one a link.
   Deliberately smaller than the hero metric cards — it informs, they navigate. */
.value-strip[b-nlfxx78h0f] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.value-fact[b-nlfxx78h0f] {
    flex: 1 1 9.5rem;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.05rem;
    padding: 0.55rem 0.8rem;
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 10px;
    text-decoration: none;
    min-height: 44px; /* tap target */
}

.value-fact:hover[b-nlfxx78h0f],
.value-fact:focus-visible[b-nlfxx78h0f] {
    border-color: var(--entity-brand-fg);
    text-decoration: none;
}

.value-fact-number[b-nlfxx78h0f] {
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--text-color);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.value-fact-label[b-nlfxx78h0f] {
    font-size: 0.72rem;
    color: var(--text-muted);
    line-height: 1.25;
}
/* _content/SchoolManagementApp/Pages/BillingSettings.razor.rz.scp.css */
.billing-plan-card[b-52ww9fnqvu] {
    position: relative;
    border: 1.5px solid var(--border);
    border-radius: 14px;
    padding: 1rem;
    height: 100%;
    display: flex;
    flex-direction: column;
    background: var(--card-bg);
}

.billing-plan-card--current[b-52ww9fnqvu] {
    border-color: var(--primary);
    box-shadow: 0 0 0 1px var(--primary);
}

.billing-plan-popular[b-52ww9fnqvu] {
    position: absolute;
    top: -0.6rem;
    right: 0.75rem;
}

.billing-plan-name[b-52ww9fnqvu] {
    font-weight: 700;
}

.billing-plan-price[b-52ww9fnqvu] {
    font-size: 1.5rem;
    font-weight: 750;
    color: var(--text-color);
}

.billing-plan-per[b-52ww9fnqvu] {
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--text-muted);
}

.billing-plan-limit[b-52ww9fnqvu] {
    color: var(--text-muted);
    font-size: 0.85rem;
    flex: 1 1 auto;
}

[b-52ww9fnqvu] .billing-plan-card .btn {
    min-height: 44px;
}

/* Proof before price: the recommended-plan badge wears the success pair (it is a
   fact about the school, not a marketing label), the anchor line reads as a check. */
.billing-plan-recommended[b-52ww9fnqvu] {
    white-space: nowrap;
}

.billing-proof-anchor[b-52ww9fnqvu] {
    color: var(--text-color);
    font-weight: 600;
}

/* The "I want to start" flow lives inside the plans card, right under the cards the
   owner just tapped — never above the fold they scrolled past. */
.billing-intent[b-52ww9fnqvu],
.billing-intent-recorded[b-52ww9fnqvu] {
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 0.9rem 1rem;
    background: var(--surface);
}

.billing-intent-recorded[b-52ww9fnqvu] {
    border-color: var(--success);
}

[b-52ww9fnqvu] .billing-intent-window {
    min-height: 44px;
    flex: 1 1 8rem;
}

[b-52ww9fnqvu] .billing-callme {
    min-height: 44px;
}
/* _content/SchoolManagementApp/Pages/Classes.razor.rz.scp.css */
/* Quick-create (instructor / classroom from inside the class form).
   Tokens only (docs/design-system.md). Mobile-first: fields stack full-width
   with 44px touch targets; from md up they sit inline like a toolbar. */

.quick-create-box[b-dskhn8w3o7] {
    border: 1px dashed var(--border);
    border-radius: 10px;
    padding: 0.75rem;
    background: var(--surface);
}

.quick-create-fields[b-dskhn8w3o7] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.quick-create-fields .form-control[b-dskhn8w3o7] {
    min-height: 44px;
}

.quick-create-add[b-dskhn8w3o7] {
    min-height: 44px;
    white-space: nowrap;
}

.quick-create-cancel[b-dskhn8w3o7] {
    align-self: center;
    text-decoration: none;
}

@media (min-width: 768px) {
    .quick-create-fields[b-dskhn8w3o7] {
        flex-direction: row;
        align-items: center;
    }

    .quick-create-fields .form-control[b-dskhn8w3o7] {
        min-width: 0;
        flex: 1 1 auto;
    }

    .quick-create-add[b-dskhn8w3o7],
    .quick-create-cancel[b-dskhn8w3o7] {
        flex: 0 0 auto;
    }

    .classes-actions-heading[b-dskhn8w3o7],
    .classes-actions-cell[b-dskhn8w3o7] {
        width: 1%;
        min-width: 174px;
        text-align: right;
        white-space: nowrap;
    }

    .classes-actions[b-dskhn8w3o7] {
        display: inline-flex;
        align-items: center;
        justify-content: flex-end;
        gap: 0.375rem;
    }

    .classes-attendance-action[b-dskhn8w3o7] {
        white-space: nowrap;
    }

    .classes-more-actions[b-dskhn8w3o7] {
        display: inline-flex;
        width: 32px;
        height: 32px;
        padding: 0;
        align-items: center;
        justify-content: center;
    }
}
/* _content/SchoolManagementApp/Pages/Dashboard.razor.rz.scp.css */
/* Enhanced Dashboard Styles */
.enhanced-dashboard[b-gf7blzew2x] {
    background: var(--surface);
    padding: 2rem;
}

/* Skeleton loading */
@keyframes shimmer-b-gf7blzew2x {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}
.skeleton[b-gf7blzew2x] {
    background: linear-gradient(90deg, var(--surface) 25%, var(--border) 37%, var(--surface) 63%);
    background-size: 400% 100%;
    animation: shimmer-b-gf7blzew2x 1.2s ease-in-out infinite;
}
.skeleton-card[b-gf7blzew2x] { position: relative; overflow: hidden; }
.skeleton-icon[b-gf7blzew2x] { width: 56px; height: 56px; border-radius: 50%; }
.skeleton-number[b-gf7blzew2x] { width: 60%; height: 28px; border-radius: 6px; margin-top: 12px; }
.skeleton-label[b-gf7blzew2x] { width: 40%; height: 16px; border-radius: 6px; margin-top: 8px; }
.class-skeleton-title[b-gf7blzew2x] { width: 70%; height: 20px; border-radius: 6px; }
.class-skeleton-line[b-gf7blzew2x] { width: 85%; height: 14px; border-radius: 6px; margin-top: 10px; }
.class-skeleton-line.short[b-gf7blzew2x] { width: 55%; }

.dashboard-header[b-gf7blzew2x] {
    margin-bottom: 3rem;
    text-align: center;
}

.dashboard-title[b-gf7blzew2x] {
    font-size: 3rem;
    font-weight: 800;
    background: linear-gradient(135deg, var(--brand-600), var(--brand-400));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 1rem;
    letter-spacing: -1px;
}

.welcome-section[b-gf7blzew2x] {
    margin-top: 1rem;
}

.greeting-text[b-gf7blzew2x] {
    font-size: 1.2rem;
    color: var(--text-color);
    margin-bottom: 0.5rem;
    display: block;
}

/* Resume pill: the way back to a hidden setup guide. Text-sized on purpose. */
.setup-resume-pill[b-gf7blzew2x] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin-top: 0.6rem;
    padding: 0.3rem 0.75rem 0.3rem 0.55rem;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--surface);
    color: var(--text-color);
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    min-height: 2.75rem; /* 44px touch target */
}

.setup-resume-pill:hover[b-gf7blzew2x],
.setup-resume-pill:focus-visible[b-gf7blzew2x] {
    border-color: var(--brand-600);
    color: var(--brand-600);
}

.setup-resume-pill .bi[b-gf7blzew2x] {
    font-size: 0.75rem;
    opacity: 0.7;
}

.setup-resume-ring[b-gf7blzew2x] {
    width: 1.1rem;
    height: 1.1rem;
    transform: rotate(-90deg);
}

.setup-resume-ring .ring-track[b-gf7blzew2x] {
    fill: none;
    stroke: var(--border);
    stroke-width: 3;
}

.setup-resume-ring .ring-fill[b-gf7blzew2x] {
    fill: none;
    stroke: var(--brand-600);
    stroke-width: 3;
    stroke-linecap: round;
}

.user-context[b-gf7blzew2x] {
    display: flex;
    justify-content: center;
    gap: 1rem;
    flex-wrap: wrap;
    margin-top: 0.5rem;
}

.role-badge[b-gf7blzew2x], .school-badge[b-gf7blzew2x] {
    padding: 0.4rem 0.8rem;
    border-radius: 2rem;
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.5px;
}

.role-badge[b-gf7blzew2x] {
    background: var(--bs-primary);
    color: white;
}

.role-god[b-gf7blzew2x] { background: var(--entity-brand-bg); color: var(--entity-brand-fg); }
.role-admin[b-gf7blzew2x] { background: var(--entity-brand-bg); color: var(--entity-brand-fg); }
.role-teacher[b-gf7blzew2x] { background: var(--entity-teachers-bg); color: var(--entity-teachers-fg); }
.role-parent[b-gf7blzew2x] { background: var(--entity-parents-bg); color: var(--entity-parents-fg); }

.school-badge[b-gf7blzew2x] {
    background: var(--surface);
    color: var(--text-muted);
    border: 1px solid var(--border);
}

/* Hero Metrics Row */
.hero-metrics-row[b-gf7blzew2x] {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    gap: 1.5rem;
    margin-bottom: 3rem;
}

.hero-metric-card[b-gf7blzew2x] {
    border-radius: 1.5rem;
    padding: 2rem 1.5rem;
    background: var(--card-bg);
    box-shadow: var(--shadow-md);
    cursor: pointer;
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.2s ease, border-color 0.2s ease;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    border: 1px solid var(--border);
}

/* Calm + tinted: the card is a plain surface; the entity hue lives only in the
   icon tile (see .hero-metric-icon below), so an icon can never clash with its
   card. The number reads in ink, the label muted. */

/* Corner shortcut on a hero card (e.g. add family on the students card).
   44px touch target; white-on-gradient works in both themes. */
.hero-metric-add-btn[b-gf7blzew2x] {
    position: absolute;
    top: 0.6rem;
    right: 0.6rem;
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 50%;
    background: var(--brand-100);
    color: var(--brand-700);
    font-size: 1.15rem;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.hero-metric-add-btn:hover[b-gf7blzew2x],
.hero-metric-add-btn:focus-visible[b-gf7blzew2x] {
    background: rgba(var(--brand-rgb), 0.2);
    outline: none;
}

/* Each entity colours only its icon tile; the card stays on --card-bg. */
.hero-metric-card.primary-metric .hero-metric-icon[b-gf7blzew2x],
.hero-metric-card.students-metric .hero-metric-icon[b-gf7blzew2x] {
    background: var(--entity-students-bg);
    color: var(--entity-students-fg);
}

.hero-metric-card.classes-metric .hero-metric-icon[b-gf7blzew2x] {
    background: var(--entity-classes-bg);
    color: var(--entity-classes-fg);
}

.hero-metric-card.teachers-metric .hero-metric-icon[b-gf7blzew2x] {
    background: var(--entity-teachers-bg);
    color: var(--entity-teachers-fg);
}

.hero-metric-card.secondary-metric .hero-metric-icon[b-gf7blzew2x],
.hero-metric-card.schedule-metric .hero-metric-icon[b-gf7blzew2x],
.hero-metric-card.announcements-metric .hero-metric-icon[b-gf7blzew2x],
.hero-metric-card.attendance-metric .hero-metric-icon[b-gf7blzew2x],
.hero-metric-card.progress-metric .hero-metric-icon[b-gf7blzew2x] {
    background: var(--entity-brand-bg);
    color: var(--entity-brand-fg);
}

/* Status metrics (parent payment summary): the icon tile and the number carry
   the payment-status hue, so "overdue" still reads red and "all paid" green —
   meaning via a semantic accent, not a full colour flood. */
.hero-metric-card.overdue-metric .hero-metric-icon[b-gf7blzew2x] {
    background: var(--status-urgent-bg);
    color: var(--status-urgent-fg);
}

.hero-metric-card.overdue-metric .hero-metric-number[b-gf7blzew2x] {
    color: var(--status-urgent-fg);
}

.hero-metric-card.success-metric .hero-metric-icon[b-gf7blzew2x] {
    background: var(--status-paid-bg);
    color: var(--status-paid-fg);
}

.hero-metric-card.success-metric .hero-metric-number[b-gf7blzew2x] {
    color: var(--status-paid-fg);
}

.hero-metric-number-sm[b-gf7blzew2x] {
    font-size: 1.5rem !important;
}

/* Parent Dashboard Content Sections */
.parent-content-grid[b-gf7blzew2x] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem;
    margin-top: 2rem;
    max-width: 900px;
}

.parent-content-card[b-gf7blzew2x] {
    background: var(--card-bg, #fff);
    border-radius: 1rem;
    border: 1px solid rgba(15, 23, 42, 0.08);
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.04);
    padding: 1.25rem;
}

.parent-content-header[b-gf7blzew2x] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid rgba(15, 23, 42, 0.06);
}

.parent-content-header h3[b-gf7blzew2x] {
    font-size: 0.95rem;
    font-weight: 700;
    margin: 0;
    color: var(--text-color);
}

.parent-content-link[b-gf7blzew2x] {
    font-size: 0.8rem;
    color: var(--primary);
    text-decoration: none;
    font-weight: 500;
}

.parent-content-link:hover[b-gf7blzew2x] {
    text-decoration: underline;
}

/* Payment rows — matches /parent-payments .payment-row */
.dash-payment-row[b-gf7blzew2x] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 12px;
    margin-bottom: 4px;
    border-radius: 6px;
    border-left: 3px solid var(--border);
    background: var(--surface);
    transition: background 0.15s;
}

.dash-payment-row.paid[b-gf7blzew2x] { border-left-color: var(--status-paid-solid); }
.dash-payment-row.overdue[b-gf7blzew2x] { border-left-color: var(--status-urgent-solid); background: var(--status-urgent-bg); }
.dash-payment-row.due[b-gf7blzew2x] { border-left-color: var(--status-overdue-solid); }

.dash-payment-left[b-gf7blzew2x] { display: flex; flex-direction: column; }
.dash-payment-student[b-gf7blzew2x] { font-size: 0.8rem; font-weight: 600; color: var(--text-color); }
.dash-payment-month[b-gf7blzew2x] { font-size: 0.8rem; color: var(--text-muted); }
.dash-payment-right[b-gf7blzew2x] { text-align: right; }
.dash-payment-amount[b-gf7blzew2x] { font-weight: 700; color: var(--text-color); margin-bottom: 2px; }
.dash-payment-status .dash-status[b-gf7blzew2x] { font-size: 0.75rem; font-weight: 500; }
.dash-payment-status .dash-status.paid[b-gf7blzew2x] { color: var(--status-paid-fg); }
.dash-payment-status .dash-status.overdue[b-gf7blzew2x] { color: var(--status-urgent-fg); }
.dash-payment-status .dash-status.due[b-gf7blzew2x] { color: var(--status-overdue-fg); }

/* Upcoming classes — matches /parent-schedule .upcoming-class */
.dash-upcoming-list[b-gf7blzew2x] { display: flex; flex-direction: column; gap: 6px; }

.dash-upcoming-item[b-gf7blzew2x] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: var(--surface);
    transition: all 0.15s;
}

.dash-upcoming-item:hover[b-gf7blzew2x] { border-color: var(--info); box-shadow: 0 2px 8px rgba(0,0,0,0.06); }
.dash-upcoming-item.today[b-gf7blzew2x] { background: var(--status-overdue-bg); border-color: var(--warning); }
.dash-upcoming-item.tomorrow[b-gf7blzew2x] { background: var(--status-pending-bg); border-color: var(--info); }

.dash-upcoming-badge[b-gf7blzew2x] {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 60px;
    flex-shrink: 0;
}

.dash-day-label[b-gf7blzew2x] { font-size: 0.7rem; font-weight: 700; color: var(--text-muted); text-transform: uppercase; }
.dash-time-label[b-gf7blzew2x] { font-size: 0.85rem; font-weight: 600; color: var(--text-color); }
.dash-upcoming-name[b-gf7blzew2x] { font-size: 0.875rem; font-weight: 600; color: var(--text-color); }
.dash-upcoming-student[b-gf7blzew2x] { display: block; font-size: 0.75rem; font-weight: 500; color: var(--text-muted); }

/* Announcement cards — matches /announcements .announcement-card */
.dash-announcement-card[b-gf7blzew2x] {
    padding: 12px;
    margin-bottom: 6px;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: var(--surface);
    border-left: 4px solid var(--success);
    transition: transform 0.15s, box-shadow 0.15s;
}

.dash-announcement-card:hover[b-gf7blzew2x] { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0,0,0,0.08); }
.dash-announcement-card.priority-urgent[b-gf7blzew2x] { border-left-color: var(--danger); }
.dash-announcement-card.priority-high[b-gf7blzew2x] { border-left-color: var(--warning); }
.dash-announcement-card.priority-normal[b-gf7blzew2x] { border-left-color: var(--success); }
.dash-announcement-card.priority-low[b-gf7blzew2x] { border-left-color: var(--text-muted); }

.dash-announcement-header[b-gf7blzew2x] { display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px; }
.dash-announcement-title[b-gf7blzew2x] { font-size: 0.875rem; font-weight: 600; color: var(--text-color); margin: 0; }
.dash-announcement-date[b-gf7blzew2x] { font-size: 0.75rem; color: var(--text-muted); flex-shrink: 0; }
.dash-announcement-content[b-gf7blzew2x] { font-size: 0.8rem; color: var(--text-muted); margin: 0; line-height: 1.4; }

.parent-content-empty[b-gf7blzew2x] {
    text-align: center;
    padding: 1.5rem 0;
    color: var(--text-muted);
    font-size: 0.875rem;
}

.hero-metric-card:hover[b-gf7blzew2x] {
    transform: translateY(-8px) scale(1.02);
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.12);
    border-color: var(--brand-400);
}

.hero-metric-icon[b-gf7blzew2x] {
    width: 64px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-lg);
    font-size: 2rem;
}

.hero-metric-card.primary-metric .hero-metric-icon[b-gf7blzew2x] {
    animation: bounce-b-gf7blzew2x 2s ease-in-out infinite;
}

@keyframes bounce-b-gf7blzew2x {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

.hero-metric-content[b-gf7blzew2x] {
    text-align: center;
    color: var(--text-color);
}

.hero-metric-number[b-gf7blzew2x] {
    font-size: 3.5rem;
    font-weight: 900;
    line-height: 1;
    color: var(--text-color);
    letter-spacing: -2px;
}

.hero-metric-card.primary-metric .hero-metric-number[b-gf7blzew2x] {
    font-size: 4.5rem;
}

.hero-metric-label[b-gf7blzew2x] {
    font-size: 1rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--text-muted);
}

.hero-metric-card.primary-metric .hero-metric-label[b-gf7blzew2x] {
    font-size: 1.2rem;
}

/* Dashboard Grid */
.dashboard-grid[b-gf7blzew2x] {
    display: grid;
    gap: 2rem;
    margin-top: 2rem;
}

.god-dashboard[b-gf7blzew2x] {
    grid-template-columns: 1fr;
    max-width: 600px;
    margin: 0 auto;
}

.admin-dashboard[b-gf7blzew2x] {
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    max-width: 1400px;
    margin: 0 auto;
}

.teacher-dashboard[b-gf7blzew2x], .parent-dashboard[b-gf7blzew2x] {
    grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
    max-width: 800px;
    margin: 0 auto;
}

/* Action Cards */
.action-card[b-gf7blzew2x] {
    background: var(--card-bg);
    border-radius: 1.5rem;
    padding: 2rem;
    box-shadow: 0 4px 20px rgba(0,0,0,0.08);
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    border: 2px solid transparent;
    position: relative;
    overflow: hidden;
}

.action-card[b-gf7blzew2x]::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
    transition: left 0.5s;
}

.action-card:hover[b-gf7blzew2x] {
    transform: translateY(-8px) scale(1.02);
    box-shadow: 0 12px 40px rgba(0,0,0,0.15);
    border-color: var(--bs-primary);
}

.action-card:hover[b-gf7blzew2x]::before {
    left: 100%;
}

.featured-card[b-gf7blzew2x] {
    background: var(--card-bg);
    border: 2px solid var(--bs-primary);
}

.card-icon[b-gf7blzew2x] {
    margin-bottom: 1.5rem;
}

.icon-wrapper[b-gf7blzew2x] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 4rem;
    height: 4rem;
    border-radius: 1rem;
    margin: 0 auto;
    font-size: 1.5rem;
}

/* Icon tiles: tint + same-hue glyph. Grouped into four hues (brand / classes-
   teal / teachers-slate / parents-rose) rather than nine, so it reads as a
   system, not a rainbow. Each tile's glyph shares its background hue. */
.god-icon[b-gf7blzew2x] { background: var(--entity-brand-bg); color: var(--entity-brand-fg); }
.classes-icon[b-gf7blzew2x] { background: var(--entity-classes-bg); color: var(--entity-classes-fg); }
.students-icon[b-gf7blzew2x] { background: var(--entity-students-bg); color: var(--entity-students-fg); }
.teachers-icon[b-gf7blzew2x] { background: var(--entity-teachers-bg); color: var(--entity-teachers-fg); }
.parents-icon[b-gf7blzew2x] { background: var(--entity-parents-bg); color: var(--entity-parents-fg); }
.attendance-icon[b-gf7blzew2x] { background: var(--entity-classes-bg); color: var(--entity-classes-fg); }
.announcements-icon[b-gf7blzew2x] { background: var(--entity-brand-bg); color: var(--entity-brand-fg); }
.payments-icon[b-gf7blzew2x] { background: var(--entity-brand-bg); color: var(--entity-brand-fg); }
.classrooms-icon[b-gf7blzew2x] { background: var(--entity-classes-bg); color: var(--entity-classes-fg); }

.card-content[b-gf7blzew2x] {
    text-align: center;
}

.card-title[b-gf7blzew2x] {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--text-color);
    margin-bottom: 0.75rem;
    letter-spacing: -0.5px;
}

.card-description[b-gf7blzew2x] {
    font-size: 1rem;
    color: var(--text-muted);
    line-height: 1.5;
    margin-bottom: 1.5rem;
}

.card-action[b-gf7blzew2x] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    font-weight: 600;
    color: var(--bs-primary);
    font-size: 0.95rem;
}

.action-arrow[b-gf7blzew2x] {
    font-size: 1.2rem;
    transition: transform 0.3s ease;
}

.action-card:hover .action-arrow[b-gf7blzew2x] {
    transform: translateX(4px);
}

/* Today's Classes Section */
.today-classes-section[b-gf7blzew2x] {
    margin-bottom: 3rem;
    background: var(--card-bg);
    border-radius: 1.5rem;
    padding: 2rem;
    box-shadow: 0 4px 20px rgba(0,0,0,0.08);
}

.section-subtitle-container[b-gf7blzew2x] {
    text-align: center;
    margin-bottom: 1rem;
}

.section-subtitle[b-gf7blzew2x] {
    color: var(--text-muted);
    font-size: 1.1rem;
    margin: 0;
}

.classes-grid[b-gf7blzew2x] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1.5rem;
}

.class-card[b-gf7blzew2x] {
    background: var(--surface);
    border-radius: 1rem;
    padding: 1.5rem;
    border-left: 4px solid var(--border);
    transition: all 0.3s ease;
}

.class-card.clickable[b-gf7blzew2x] {
    cursor: pointer;
}

.class-card.clickable:hover[b-gf7blzew2x] {
    transform: translateY(-4px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.15);
}

.class-card.current[b-gf7blzew2x] {
    border-left-color: var(--success);
    background: var(--status-present-bg);
}

.class-card.upcoming[b-gf7blzew2x] {
    border-left-color: var(--info);
    background: var(--status-pending-bg);
}

.class-card.past[b-gf7blzew2x] {
    border-left-color: var(--text-muted);
    opacity: 0.8;
}

.class-header[b-gf7blzew2x] {
    display: flex;
    justify-content: between;
    align-items: flex-start;
    margin-bottom: 1rem;
    flex-wrap: wrap;
    gap: 0.5rem;
}

/* Status badge + the take-attendance corner shortcut, clustered top-right. */
.class-header-right[b-gf7blzew2x] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
}

/* The parent's makeup reward banner: full-width tap target above the hero row */
.makeup-reward-banner[b-gf7blzew2x] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    width: 100%;
    padding: 0.7rem 1rem;
    border: 1px solid rgba(var(--brand-rgb), 0.25);
    border-radius: 12px;
    background: var(--entity-brand-bg);
    color: var(--entity-brand-fg);
    font-weight: 600;
    cursor: pointer;
    text-align: left;
}

.makeup-reward-banner:hover[b-gf7blzew2x] {
    border-color: var(--primary);
}

.makeup-reward-banner-cta[b-gf7blzew2x] {
    white-space: nowrap;
}

/* "N reported absent" — parents' heads-ups for this lesson, next to the status badge. */
.reported-absent-pill[b-gf7blzew2x] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.2rem 0.55rem;
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--entity-brand-fg);
    background: var(--entity-brand-bg);
    white-space: nowrap;
}

/* Corner shortcut into taking attendance for a today's class. Mirrors the
   tokenized add-family button (hero-metric-add-btn), but inline in the header. */
.class-take-attendance-btn[b-gf7blzew2x] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    flex-shrink: 0;
    border: none;
    border-radius: 50%;
    background: var(--brand-100);
    color: var(--brand-700);
    font-size: 1rem;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.class-take-attendance-btn:hover[b-gf7blzew2x],
.class-take-attendance-btn:focus-visible[b-gf7blzew2x] {
    background: rgba(var(--brand-rgb), 0.2);
    outline: none;
}

.class-name[b-gf7blzew2x] {
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--text-color);
    margin: 0;
    flex: 1;
}

.status-badge[b-gf7blzew2x] {
    padding: 0.25rem 0.75rem;
    border-radius: 1rem;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.3px;
}

.status-badge.current[b-gf7blzew2x] {
    background: var(--success);
    color: white;
}

.status-badge.upcoming[b-gf7blzew2x] {
    background: var(--info);
    color: white;
}

.status-badge.past[b-gf7blzew2x] {
    background: var(--text-muted);
    color: white;
}

.class-details[b-gf7blzew2x] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.detail-item[b-gf7blzew2x] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9rem;
}

.detail-icon[b-gf7blzew2x] {
    font-size: 1rem;
    min-width: 1.2rem;
    text-align: center;
}

.detail-text[b-gf7blzew2x] {
    color: var(--text-color);
    font-weight: 500;
}

.location-detail[b-gf7blzew2x] {
    color: var(--text-muted);
    font-weight: 400;
}

/* Overview Sections */
.overview-section[b-gf7blzew2x] {
    background: var(--card-bg);
    border-radius: 1.5rem;
    padding: 2rem;
    margin-bottom: 1rem;
    box-shadow: 0 4px 20px rgba(0,0,0,0.08);
}

.overview-section:last-child[b-gf7blzew2x] {
    margin-bottom: 0;
}

.section-header[b-gf7blzew2x] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
    gap: 1rem;
}

.section-link[b-gf7blzew2x] {
    color: var(--bs-primary);
    text-decoration: none;
    font-weight: 600;
    font-size: 0.9rem;
    transition: all 0.2s ease;
}

.section-link:hover[b-gf7blzew2x] {
    color: var(--bs-primary);
    transform: translateX(2px);
}

/* Payment Stats */
.stats-grid[b-gf7blzew2x] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 1.5rem;
}

.stat-card[b-gf7blzew2x] {
    background: var(--surface);
    border-radius: 1rem;
    padding: 1.5rem;
    text-align: center;
    border-left: 4px solid var(--border);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

/* Empty payments overview: one full-width card instead of three zero tiles. */
.stat-card.payments-empty-card[b-gf7blzew2x] {
    grid-column: 1 / -1;
    display: block;
    text-decoration: none;
    text-align: left;
    border-left-color: var(--brand-400);
}

.payments-empty-card .stat-label[b-gf7blzew2x] {
    color: var(--text);
    font-weight: 600;
}

.payments-empty-card .stat-amount[b-gf7blzew2x] {
    color: var(--text-muted);
    font-weight: 400;
}

.payments-empty-action[b-gf7blzew2x] {
    margin-top: 0.5rem;
    color: var(--brand-600);
    font-weight: 600;
}

.stat-card[b-gf7blzew2x]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: inherit;
    opacity: 0.1;
    z-index: -1;
}

.stat-card:hover[b-gf7blzew2x] {
    transform: translateY(-4px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.15);
}

.stat-card.clickable-card[b-gf7blzew2x] {
    cursor: pointer;
    transition: all 0.3s ease;
}

.stat-card.clickable-card:hover[b-gf7blzew2x] {
    transform: translateY(-6px);
    box-shadow: 0 12px 30px rgba(0,0,0,0.2);
}

.stat-card.clickable-card:active[b-gf7blzew2x] {
    transform: translateY(-2px);
    transition: all 0.1s ease;
}

.paid-card[b-gf7blzew2x] {
    border-left-color: var(--status-paid-solid);
    background: var(--status-paid-bg);
}

.pending-card[b-gf7blzew2x] {
    border-left-color: var(--status-pending-solid);
    background: var(--status-pending-bg);
}

.overdue-card[b-gf7blzew2x] {
    border-left-color: var(--status-urgent-solid);
    background: var(--status-urgent-bg);
}

.stat-number[b-gf7blzew2x] {
    font-size: 2.5rem;
    font-weight: 800;
    color: var(--text-color);
    margin-bottom: 0.25rem;
    line-height: 1;
}

.stat-label[b-gf7blzew2x] {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-muted);
    margin-bottom: 0.5rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.stat-amount[b-gf7blzew2x] {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-color);
}

.loading-stat[b-gf7blzew2x] {
    grid-column: 1 / -1;
    text-align: center;
    padding: 2rem;
    color: var(--text-muted);
    font-style: italic;
}

/* Announcements List */
.announcements-list[b-gf7blzew2x] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.announcement-preview[b-gf7blzew2x] {
    background: var(--surface);
    border-radius: 0.75rem;
    padding: 1.25rem;
    border-left: 4px solid var(--border);
    transition: all 0.3s ease;
}

.announcement-preview:hover[b-gf7blzew2x] {
    transform: translateX(4px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.priority-urgent[b-gf7blzew2x] {
    border-left-color: var(--danger);
    background: var(--status-urgent-bg);
}

.priority-high[b-gf7blzew2x] {
    border-left-color: var(--warning);
    background: var(--status-overdue-bg);
}

.priority-normal[b-gf7blzew2x] {
    border-left-color: var(--success);
    background: var(--status-paid-bg);
}

.priority-low[b-gf7blzew2x] {
    border-left-color: var(--text-muted);
    background: var(--surface);
}

.announcement-header[b-gf7blzew2x] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 0.75rem;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.announcement-title[b-gf7blzew2x] {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-color);
    margin: 0;
    flex: 1;
}

.announcement-date[b-gf7blzew2x] {
    font-size: 0.85rem;
    color: var(--text-muted);
    font-weight: 500;
    white-space: nowrap;
}

.announcement-content p[b-gf7blzew2x] {
    margin: 0;
    color: var(--text-color);
    line-height: 1.5;
    font-size: 0.9rem;
}

.announcement-meta[b-gf7blzew2x] {
    display: flex;
    gap: 0.75rem;
    margin-top: 0.75rem;
    flex-wrap: wrap;
}

.priority-badge[b-gf7blzew2x] {
    padding: 0.25rem 0.5rem;
    border-radius: 0.375rem;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.priority-urgent.priority-badge[b-gf7blzew2x] {
    background: var(--danger);
    color: white;
}

.priority-high.priority-badge[b-gf7blzew2x] {
    background: var(--warning);
    color: white;
}

.priority-normal.priority-badge[b-gf7blzew2x] {
    background: var(--success);
    color: white;
}

.priority-low.priority-badge[b-gf7blzew2x] {
    background: var(--text-muted);
    color: white;
}

.scope-badge[b-gf7blzew2x] {
    padding: 0.25rem 0.5rem;
    border-radius: 0.375rem;
    font-size: 0.75rem;
    font-weight: 500;
    background: var(--border);
    color: var(--text-color);
}

.scope-badge.school-wide[b-gf7blzew2x] {
    background: var(--status-pending-bg);
    color: var(--status-pending-fg);
}

.scope-badge.class-specific[b-gf7blzew2x] {
    background: var(--entity-classes-bg);
    color: var(--entity-classes-fg);
}

.no-announcements[b-gf7blzew2x] {
    text-align: center;
    padding: 2rem;
    color: var(--text-muted);
    font-style: italic;
}

.no-announcements p[b-gf7blzew2x] {
    margin: 0;
    font-size: 1rem;
}

/* Mobile Responsiveness */
@media (max-width: 768px) {
    .enhanced-dashboard[b-gf7blzew2x] {
        padding: 0.75rem;
        min-height: auto;
    }

    .dashboard-header[b-gf7blzew2x] {
        margin-bottom: 1.5rem;
    }

    /* Hero Metrics - Mobile Optimized */
    .hero-metrics-row[b-gf7blzew2x] {
        grid-template-columns: 1fr 1fr 1fr;
        gap: 0.75rem;
        margin-bottom: 1.5rem;
    }

    .hero-metric-card[b-gf7blzew2x] {
        padding: 1rem 0.5rem;
        border-radius: 1rem;
        gap: 0.5rem;
    }

    .hero-metric-icon[b-gf7blzew2x] {
        font-size: 2rem;
    }

    .hero-metric-number[b-gf7blzew2x] {
        font-size: 1.75rem;
        letter-spacing: -1px;
    }

    .hero-metric-card.primary-metric .hero-metric-number[b-gf7blzew2x] {
        font-size: 2rem;
    }

    .hero-metric-label[b-gf7blzew2x] {
        font-size: 0.7rem;
    }

    /* The students card's corner add-family button and its bouncing icon
       fight for the same top-right corner once the card shrinks to ~1/3 of a
       phone width. Left-align this card's icon/content (matching the parent
       row's layout below) and shrink both the icon and the button so there's
       always daylight between them, verified down to a 320px-wide phone. */
    .hero-metric-card.primary-metric[b-gf7blzew2x] {
        align-items: flex-start;
    }

    .hero-metric-card.primary-metric .hero-metric-icon img[b-gf7blzew2x] {
        width: 36px !important;
        height: 36px !important;
    }

    .hero-metric-card.primary-metric .hero-metric-content[b-gf7blzew2x] {
        text-align: left;
        width: 100%;
    }

    .hero-metric-add-btn[b-gf7blzew2x] {
        width: 30px;
        height: 30px;
        font-size: 0.75rem;
        top: 0.3rem;
        right: 0.3rem;
    }

    /* Parent hero row: stack vertically on mobile */
    .parent-hero-row[b-gf7blzew2x] {
        grid-template-columns: 1fr !important;
        gap: 0.75rem;
    }

    .parent-hero-row .hero-metric-card[b-gf7blzew2x] {
        flex-direction: row;
        padding: 1.25rem 1rem;
        gap: 1rem;
        align-items: center;
    }

    .parent-hero-row .hero-metric-icon[b-gf7blzew2x] {
        font-size: 1.75rem;
        flex-shrink: 0;
    }

    .parent-hero-row .hero-metric-icon img[b-gf7blzew2x] {
        width: 2rem !important;
        height: 2rem !important;
    }

    .parent-hero-row .hero-metric-content[b-gf7blzew2x] {
        text-align: left;
    }

    .parent-hero-row .hero-metric-number[b-gf7blzew2x] {
        font-size: 1.5rem;
    }

    .parent-hero-row .hero-metric-number-sm[b-gf7blzew2x] {
        font-size: 1.1rem !important;
    }

    .parent-hero-row .hero-metric-label[b-gf7blzew2x] {
        font-size: 0.8rem;
    }

    .parent-content-grid[b-gf7blzew2x] {
        grid-template-columns: 1fr;
    }

    .parent-content-card[style*="grid-column"][b-gf7blzew2x] {
        grid-column: auto !important;
    }

    .hero-metric-card.primary-metric .hero-metric-label[b-gf7blzew2x] {
        font-size: 0.75rem;
    }

    .dashboard-title[b-gf7blzew2x] {
        font-size: 1.8rem;
        margin-bottom: 0.5rem;
    }

    .greeting-text[b-gf7blzew2x] {
        font-size: 1rem;
    }

    .user-context[b-gf7blzew2x] {
        flex-direction: row;
        gap: 0.5rem;
        justify-content: center;
        margin-top: 0.25rem;
    }

    .role-badge[b-gf7blzew2x], .school-badge[b-gf7blzew2x] {
        padding: 0.25rem 0.5rem;
        font-size: 0.75rem;
    }

    .dashboard-grid[b-gf7blzew2x] {
        gap: 1rem;
        margin-top: 1rem;
    }

    .action-card[b-gf7blzew2x] {
        padding: 1rem;
        border-radius: 1rem;
    }

    .icon-wrapper[b-gf7blzew2x] {
        width: 3rem;
        height: 3rem;
        font-size: 1.25rem;
    }

    .card-title[b-gf7blzew2x] {
        font-size: 1.1rem;
        margin-bottom: 0.5rem;
    }

    .card-description[b-gf7blzew2x] {
        font-size: 0.9rem;
        margin-bottom: 1rem;
        line-height: 1.4;
    }

    .card-action[b-gf7blzew2x] {
        font-size: 0.85rem;
    }

    /* Today's Classes - More Compact */
    .today-classes-section[b-gf7blzew2x] {
        padding: 1rem;
        margin-bottom: 1.5rem;
        border-radius: 1rem;
    }

    .section-header[b-gf7blzew2x] {
        margin-bottom: 1rem;
    }

    .section-title[b-gf7blzew2x] {
        font-size: 1.3rem;
        margin-bottom: 0.25rem;
    }

    .section-subtitle[b-gf7blzew2x] {
        font-size: 0.9rem;
    }

    .classes-grid[b-gf7blzew2x] {
        grid-template-columns: 1fr;
        gap: 0.75rem;
    }

    .class-card[b-gf7blzew2x] {
        padding: 1rem;
        border-radius: 0.75rem;
    }

    .class-header[b-gf7blzew2x] {
        margin-bottom: 0.75rem;
        gap: 0.5rem;
    }

    .class-name[b-gf7blzew2x] {
        font-size: 1rem;
    }

    .status-badge[b-gf7blzew2x] {
        padding: 0.2rem 0.5rem;
        font-size: 0.7rem;
    }

    .detail-item[b-gf7blzew2x] {
        font-size: 0.8rem;
        gap: 0.4rem;
    }

    /* Overview Sections - Compact */
    .overview-section[b-gf7blzew2x] {
        padding: 1rem;
        margin-bottom: 1rem;
        border-radius: 1rem;
    }

    .section-header[b-gf7blzew2x] {
        margin-bottom: 1rem;
        gap: 0.5rem;
    }

    .section-link[b-gf7blzew2x] {
        font-size: 0.8rem;
    }

    /* Payment Stats - Horizontal Layout */
    .stats-grid[b-gf7blzew2x] {
        grid-template-columns: repeat(3, 1fr);
        gap: 0.5rem;
    }

    .stat-card[b-gf7blzew2x] {
        padding: 0.75rem 0.5rem;
        border-radius: 0.5rem;
        text-align: center;
    }

    .stat-number[b-gf7blzew2x] {
        font-size: 1.5rem;
        margin-bottom: 0.1rem;
    }

    .stat-label[b-gf7blzew2x] {
        font-size: 0.7rem;
        margin-bottom: 0.25rem;
    }

    .stat-amount[b-gf7blzew2x] {
        font-size: 0.75rem;
        font-weight: 500;
    }

    /* Announcements - More Compact */
    .announcements-list[b-gf7blzew2x] {
        gap: 0.5rem;
    }

    .announcement-preview[b-gf7blzew2x] {
        padding: 0.75rem;
        border-radius: 0.5rem;
    }

    .announcement-header[b-gf7blzew2x] {
        margin-bottom: 0.5rem;
        gap: 0.25rem;
    }

    .announcement-title[b-gf7blzew2x] {
        font-size: 0.95rem;
    }

    .announcement-date[b-gf7blzew2x] {
        font-size: 0.75rem;
    }

    .announcement-content p[b-gf7blzew2x] {
        font-size: 0.8rem;
        line-height: 1.4;
        margin-bottom: 0.5rem;
    }

    .announcement-meta[b-gf7blzew2x] {
        margin-top: 0.5rem;
        gap: 0.5rem;
    }

    .priority-badge[b-gf7blzew2x], .scope-badge[b-gf7blzew2x] {
        padding: 0.2rem 0.4rem;
        font-size: 0.65rem;
    }
}

/* Dark mode support */
[data-theme="dark"] .enhanced-dashboard[b-gf7blzew2x] {
    background: linear-gradient(135deg, var(--bs-gray-900) 0%, var(--bs-gray-800) 100%) !important;
}

[data-theme="dark"] .action-card[b-gf7blzew2x] {
    background: var(--bs-gray-800) !important;
    border-color: var(--bs-gray-600) !important;
    color: var(--bs-light) !important;
}

[data-theme="dark"] .hero-metric-card.overdue-metric[b-gf7blzew2x] {
    box-shadow: 0 8px 24px rgba(239, 68, 68, 0.2);
}

[data-theme="dark"] .hero-metric-card.success-metric[b-gf7blzew2x] {
    box-shadow: 0 8px 24px rgba(16, 185, 129, 0.2);
}

[data-theme="dark"] .hero-metric-card.schedule-metric[b-gf7blzew2x] {
    box-shadow: 0 8px 24px rgba(139, 92, 246, 0.2);
}

[data-theme="dark"] .hero-metric-card.announcements-metric[b-gf7blzew2x] {
    box-shadow: 0 8px 24px rgba(245, 158, 11, 0.2);
}

[data-theme="dark"] .parent-content-card[b-gf7blzew2x] {
    background: var(--bs-gray-800);
    border-color: var(--bs-gray-600);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

[data-theme="dark"] .parent-content-header[b-gf7blzew2x] {
    border-bottom-color: var(--bs-gray-600);
}

[data-theme="dark"] .parent-content-header h3[b-gf7blzew2x],
[data-theme="dark"] .dash-payment-amount[b-gf7blzew2x],
[data-theme="dark"] .dash-upcoming-name[b-gf7blzew2x],
[data-theme="dark"] .dash-announcement-title[b-gf7blzew2x],
[data-theme="dark"] .dash-time-label[b-gf7blzew2x] {
    color: var(--bs-light);
}

[data-theme="dark"] .dash-payment-student[b-gf7blzew2x],
[data-theme="dark"] .dash-day-label[b-gf7blzew2x] {
    color: var(--bs-gray-300);
}

[data-theme="dark"] .dash-payment-month[b-gf7blzew2x],
[data-theme="dark"] .dash-announcement-date[b-gf7blzew2x],
[data-theme="dark"] .dash-announcement-content[b-gf7blzew2x] {
    color: var(--bs-gray-400);
}

[data-theme="dark"] .dash-payment-row[b-gf7blzew2x] {
    background: var(--bs-gray-700);
}

/* Payment-row / upcoming-item status colours now flow through --status-* tokens
   (which have their own dark values), so no raw-hex dark override is needed. */
[data-theme="dark"] .dash-upcoming-item[b-gf7blzew2x] {
    background: var(--bs-gray-700);
    border-color: var(--bs-gray-600);
}

[data-theme="dark"] .dash-announcement-card[b-gf7blzew2x] {
    background: var(--bs-gray-700);
    border-color: var(--bs-gray-600);
}

[data-theme="dark"] .today-classes-section[b-gf7blzew2x] {
    background: var(--bs-gray-800) !important;
    color: var(--bs-light) !important;
}

[data-theme="dark"] .class-card[b-gf7blzew2x] {
    background: var(--bs-gray-800) !important;
    color: var(--bs-light) !important;
}

[data-theme="dark"] .card-title[b-gf7blzew2x],
[data-theme="dark"] .section-title[b-gf7blzew2x],
[data-theme="dark"] .class-name[b-gf7blzew2x] {
    color: var(--bs-light) !important;
}

[data-theme="dark"] .greeting-text[b-gf7blzew2x] {
    color: var(--bs-gray-300) !important;
}

[data-theme="dark"] .overview-section[b-gf7blzew2x] {
    background: var(--bs-gray-800) !important;
    color: var(--bs-light) !important;
}

[data-theme="dark"] .stat-card[b-gf7blzew2x] {
    background: var(--bs-gray-800) !important;
    color: var(--bs-light) !important;
}

[data-theme="dark"] .stat-number[b-gf7blzew2x],
[data-theme="dark"] .stat-amount[b-gf7blzew2x] {
    color: var(--bs-light) !important;
}

[data-theme="dark"] .announcement-preview[b-gf7blzew2x] {
    background: var(--bs-gray-800) !important;
    border-left-color: var(--bs-gray-600) !important;
    color: var(--bs-light) !important;
}

[data-theme="dark"] .announcement-title[b-gf7blzew2x] {
    color: var(--bs-light) !important;
}

[data-theme="dark"] .announcement-content p[b-gf7blzew2x] {
    color: var(--bs-gray-300) !important;
}

[data-theme="dark"] .announcement-date[b-gf7blzew2x] {
    color: var(--bs-gray-400) !important;
}

[data-theme="dark"] .detail-text[b-gf7blzew2x] {
    color: var(--bs-gray-300) !important;
}

[data-theme="dark"] .location-detail[b-gf7blzew2x] {
    color: var(--bs-gray-400) !important;
}

[data-theme="dark"] .school-badge[b-gf7blzew2x] {
    background: var(--bs-gray-700) !important;
    color: var(--bs-light) !important;
    border-color: var(--bs-gray-600) !important;
}

[data-theme="dark"] .no-announcements p[b-gf7blzew2x] {
    color: var(--bs-gray-400) !important;
}

/* Attendees Modal */
.modal-overlay[b-gf7blzew2x] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: var(--bottom-nav-height, 0px);
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000000;
    padding: 16px;
    animation: fadeIn-b-gf7blzew2x 0.2s ease;
    overscroll-behavior: contain;
    touch-action: none;
}

@keyframes fadeIn-b-gf7blzew2x {
    from { opacity: 0; }
    to { opacity: 1; }
}

.modal-content[b-gf7blzew2x] {
    background: var(--card-bg);
    border-radius: 16px;
    max-width: 600px;
    width: 100%;
    max-height: 85vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    animation: slideUp-b-gf7blzew2x 0.3s ease;
    touch-action: auto;
}

@keyframes slideUp-b-gf7blzew2x {
    from {
        transform: translateY(20px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.modal-header[b-gf7blzew2x] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    border-bottom: 1px solid var(--border);
    position: sticky;
    top: 0;
    background: var(--card-bg);
    border-radius: 16px 16px 0 0;
    z-index: 1;
    flex-shrink: 0;
}

.modal-header h3[b-gf7blzew2x] {
    margin: 0;
    color: var(--text-color);
    font-size: 1.25rem;
    font-weight: 700;
}

.close-btn[b-gf7blzew2x] {
    background: none;
    border: none;
    font-size: 2rem;
    color: var(--text-muted);
    cursor: pointer;
    padding: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    transition: all 0.2s ease;
}

.close-btn:hover[b-gf7blzew2x] {
    background: var(--surface);
    color: var(--text-color);
}

.modal-body[b-gf7blzew2x] {
    padding: 20px;
    overflow-y: auto;
    overscroll-behavior: contain;
    min-height: 0;
}

.attendees-info[b-gf7blzew2x] {
    background: var(--status-pending-bg);
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 20px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.info-row[b-gf7blzew2x] {
    color: var(--status-pending-fg);
    font-weight: 500;
    font-size: 0.9rem;
}

.take-attendance-btn[b-gf7blzew2x] {
    background: var(--primary);
    color: white;
    border: none;
    border-radius: 8px;
    padding: 10px 20px;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 2px 8px rgba(var(--brand-rgb), 0.3);
    width: 100%;
    margin-top: 4px;
}

.take-attendance-btn:hover[b-gf7blzew2x] {
    background: var(--primary-hover);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(var(--brand-rgb), 0.4);
}

.take-attendance-btn:active[b-gf7blzew2x] {
    transform: translateY(0);
}

.attendees-grid[b-gf7blzew2x] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 12px;
}

.attendee-card[b-gf7blzew2x] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 8px;
    transition: all 0.2s ease;
}

.attendee-card:hover[b-gf7blzew2x] {
    border-color: var(--brand-400);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.attendee-avatar[b-gf7blzew2x] {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--entity-brand-bg);
    color: var(--entity-brand-fg);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 0.9rem;
    flex-shrink: 0;
}

.attendee-details[b-gf7blzew2x] {
    flex: 1;
    min-width: 0;
}

.attendee-name[b-gf7blzew2x] {
    font-weight: 600;
    color: var(--text-color);
    font-size: 0.95rem;
}

.attendee-email[b-gf7blzew2x] {
    font-size: 0.85rem;
    color: var(--text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.modal-schedule-notes[b-gf7blzew2x] {
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.modal-note[b-gf7blzew2x] {
    padding: 12px;
    border-radius: 8px;
    font-size: 0.9rem;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.modal-note.missing[b-gf7blzew2x] {
    background: var(--status-urgent-bg);
    border: 1px solid var(--status-urgent-bg);
}

.modal-note.override[b-gf7blzew2x] {
    background: var(--status-paid-bg);
    border: 1px solid var(--status-paid-bg);
}

.modal-note .note-label[b-gf7blzew2x] {
    font-weight: 600;
    color: var(--text-color);
}

.modal-note.missing .note-label[b-gf7blzew2x] {
    color: var(--status-urgent-fg);
}

.modal-note.override .note-label[b-gf7blzew2x] {
    color: var(--status-paid-fg);
}

.modal-note .note-value[b-gf7blzew2x] {
    color: var(--text-muted);
    line-height: 1.5;
}

.no-attendees[b-gf7blzew2x] {
    text-align: center;
    padding: 60px 20px;
}

.no-attendees-icon[b-gf7blzew2x] {
    font-size: 3rem;
    margin-bottom: 16px;
    opacity: 0.6;
}

.no-attendees h4[b-gf7blzew2x] {
    margin: 0 0 12px 0;
    color: var(--text-color);
    font-size: 1.25rem;
}

.no-attendees p[b-gf7blzew2x] {
    color: var(--text-muted);
    margin: 0;
    font-size: 0.95rem;
}

/* The attendees-modal colours now flow through tokens (surface / border / text /
   --status-* / brand), which carry their own dark values — so the modal needs no
   hand-written [data-theme="dark"] overrides. Only the near-black modal chrome
   that Bootstrap variables cover is kept below. */
[data-theme="dark"] .modal-content[b-gf7blzew2x],
[data-theme="dark"] .modal-header[b-gf7blzew2x] {
    background: var(--card-bg);
    border-bottom-color: var(--border);
}

/* Encoding/emoji display fixes */
.material-icon[b-gf7blzew2x] { font-size: 0; }
.material-icon[b-gf7blzew2x]::before { font-size: 28px; line-height: 1; }

/* Prefer toolbar image icons for dashboard cards */
.god-icon[b-gf7blzew2x],
.attendance-icon[b-gf7blzew2x],
.payments-icon[b-gf7blzew2x],
.announcements-icon[b-gf7blzew2x] {
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}
.god-icon[b-gf7blzew2x] { background-image: url('/images/dashboard-icon.png'); }
.attendance-icon[b-gf7blzew2x] { background-image: url('/images/attendance-icon.png'); }
.payments-icon[b-gf7blzew2x] { background-image: url('/images/payments-icon.png'); }
/* Use provided announcement icon from root */
.announcements-icon[b-gf7blzew2x] { background-image: url('/images/Announcment.png'); }
.announcements-icon .material-icon[b-gf7blzew2x] { display: none; }

.action-arrow[b-gf7blzew2x] { font-size: 0; }
.action-arrow[b-gf7blzew2x]::before { content: '→'; font-size: 1rem; }

.class-details .detail-icon[b-gf7blzew2x] {
    font-size: 1rem;
    margin-right: 0.5rem;
    display: inline-block;
}

/* Prefer the fixed titles and hide originals */
.section-header > .section-title.fixed[b-gf7blzew2x] { display: block; position: relative; }
.section-header > .section-title:not(.fixed)[b-gf7blzew2x] { display: none; }

/* The section-link text is rendered (and localized) in the Razor markup as
   `@L["Dashboard.ViewAll"] →`. Do NOT hide it and inject a CSS `content:`
   string — that hardcodes English and leaks into the Greek UI. */

/* Use toolbar icons in section headers */
.today-classes-section .section-title.fixed[b-gf7blzew2x]::before {
    content: '';
    display: inline-block;
    width: 20px; height: 20px;
    background: url('/images/schedule-icon-clean.svg') center/contain no-repeat;
    margin-right: .5rem;
    vertical-align: -3px;
}
.today-classes-section .section-title.fixed[b-gf7blzew2x] { font-size: 0; }
.today-classes-section .section-title.fixed[b-gf7blzew2x]::after { content: attr(data-label); font-size: 1.5rem; vertical-align: 0; margin-left: .1rem; }
.payments-overview .section-title.fixed[b-gf7blzew2x]::before {
    content: '';
    display: inline-block;
    width: 20px; height: 20px;
    background: url('/images/payments-icon.png') center/contain no-repeat;
    margin-right: .5rem;
    vertical-align: -3px;
}
.payments-overview .section-title.fixed[b-gf7blzew2x] { font-size: 0; }
.payments-overview .section-title.fixed[b-gf7blzew2x]::after { content: attr(data-label); font-size: 1.5rem; vertical-align: 0; margin-left: .1rem; }
.announcements-overview .section-title.fixed[b-gf7blzew2x]::before {
    content: '';
    display: inline-block;
    width: 20px; height: 20px;
    background: url('/images/Announcment.png') center/contain no-repeat;
    margin-right: .5rem;
    vertical-align: -3px;
}
.announcements-overview .section-title.fixed[b-gf7blzew2x] { font-size: 0; }
.announcements-overview .section-title.fixed[b-gf7blzew2x]::after { content: attr(data-label); font-size: 1.5rem; vertical-align: 0; margin-left: .1rem; }

/* Remove any lingering emoji from corrupted text by hiding actual text */

/* Button and empty-state icons */
.take-attendance-btn[b-gf7blzew2x]::before { content: '📝 '; }
.no-attendees-icon[b-gf7blzew2x] { font-size: 0; }
.no-attendees-icon[b-gf7blzew2x]::before { content: '📭'; font-size: 1.5rem; }

/* Modal note emojis */
.modal-note.missing .note-label[b-gf7blzew2x]::before { content: '⚠️ '; }
.modal-note.override .note-label[b-gf7blzew2x]::before { content: '🔁 '; }

/* Pending self-registrations banner */
.pending-registrations-banner[b-gf7blzew2x] {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    min-height: 48px;
    margin-bottom: 12px;
    padding: 10px 14px;
    border: 1px solid rgba(59, 130, 246, 0.35);
    border-radius: 12px;
    background: rgba(59, 130, 246, 0.08);
    color: inherit;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
}

.pending-registrations-banner:hover[b-gf7blzew2x] {
    background: rgba(59, 130, 246, 0.14);
}

.pending-registrations-icon[b-gf7blzew2x] { font-size: 1.25rem; }

/* Actionable attendance signal: compact, contextual and absent when there is no work. */
.attendance-followups-card[b-gf7blzew2x] {
    margin-bottom: 1.5rem;
    padding: 1rem;
    border: 1px solid var(--border);
    border-left: 4px solid var(--status-late-fg);
    border-radius: 14px;
    background: var(--card-bg);
    box-shadow: var(--shadow-sm);
}

.attendance-followups-header[b-gf7blzew2x] {
    display: flex;
    align-items: center;
    gap: 0.85rem;
}

.attendance-followups-icon[b-gf7blzew2x] {
    display: inline-flex;
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: var(--status-late-bg);
    color: var(--status-late-fg);
    font-size: 1.25rem;
}

.attendance-followups-copy[b-gf7blzew2x] {
    min-width: 0;
    flex: 1;
}

.attendance-followups-eyebrow[b-gf7blzew2x] {
    color: var(--status-late-fg);
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.attendance-followups-copy h2[b-gf7blzew2x] {
    margin: 0.1rem 0;
    color: var(--text-color);
    font-size: 1.15rem;
    font-weight: 750;
}

.attendance-followups-copy p[b-gf7blzew2x] {
    margin: 0;
    color: var(--text-muted);
    font-size: 0.875rem;
}

.attendance-followups-action[b-gf7blzew2x],
.attendance-followups-more[b-gf7blzew2x] {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    color: var(--brand-700);
    font-weight: 700;
    text-decoration: none;
}

.attendance-followups-list[b-gf7blzew2x] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.75rem;
    margin-top: 0.9rem;
    padding-top: 0.9rem;
    border-top: 1px solid var(--border);
}

.attendance-followup-row[b-gf7blzew2x] {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 0.65rem;
}

.attendance-followup-avatar[b-gf7blzew2x] {
    display: inline-flex;
    flex: 0 0 36px;
    width: 36px;
    height: 36px;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--entity-students-bg);
    color: var(--entity-students-fg);
    font-size: 0.75rem;
    font-weight: 800;
}

.attendance-followup-student[b-gf7blzew2x] {
    display: flex;
    min-width: 0;
    flex-direction: column;
}

.attendance-followup-student .entity-link[b-gf7blzew2x] {
    overflow: hidden;
    color: var(--text-color);
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.attendance-followup-student small[b-gf7blzew2x] {
    overflow: hidden;
    color: var(--text-muted);
    font-size: 0.78rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.attendance-followups-more[b-gf7blzew2x] {
    width: fit-content;
    margin-top: 0.35rem;
    font-size: 0.82rem;
}

@media (max-width: 768px) {
    .attendance-followups-header[b-gf7blzew2x] {
        align-items: flex-start;
        flex-wrap: wrap;
    }

    .attendance-followups-action[b-gf7blzew2x] {
        width: 100%;
        border-top: 1px solid var(--border);
    }

    .attendance-followups-list[b-gf7blzew2x] {
        grid-template-columns: 1fr;
    }
}

/* Finish-setup reminder card: slim, dismissible, shown post-activation while lane
   steps remain. Tokens only (docs/design-system.md). */
.finish-setup-card[b-gf7blzew2x] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    margin-bottom: 1rem;
    border: 1px solid var(--border);
    border-left: 4px solid var(--primary);
    border-radius: 12px;
    background: var(--card-bg);
    flex-wrap: wrap;
}

.finish-setup-text[b-gf7blzew2x] {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    color: var(--text-color);
    min-width: 0;
}

.finish-setup-subtitle[b-gf7blzew2x] {
    font-size: 0.8125rem;
    color: var(--text-muted);
}

.finish-setup-actions[b-gf7blzew2x] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    flex-shrink: 0;
}

/* The finish-setup card is whole-card tappable (reopens the setup guide) —
   card-tappable primitive: cursor + hover lift + trailing chevron, the X is
   the only inner control. */
.finish-setup-card.clickable[b-gf7blzew2x] {
    cursor: pointer;
    transition: box-shadow 0.15s ease, transform 0.15s ease;
}

.finish-setup-card.clickable:hover[b-gf7blzew2x],
.finish-setup-card.clickable:focus-visible[b-gf7blzew2x] {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    transform: translateY(-1px);
}

.finish-setup-chevron[b-gf7blzew2x] {
    color: var(--text-muted);
}
/* _content/SchoolManagementApp/Pages/FamilyChanges.razor.rz.scp.css */
/* Family updates ledger — same timeline recipe as the payment journal:
   time · icon tile · sentence · before → after. Tiles take the entity hue of
   the person whose data changed (parents / students). Unseen rows get a thin
   brand keyline, never a red alarm — a parent fixing their phone is normal. */

.family-changes-page[b-d8wgf8xroo] {
    max-width: 760px;
}

.family-changes-day[b-d8wgf8xroo] {
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin: 1rem 0 0.5rem;
}

.activity-row[b-d8wgf8xroo] {
    gap: 0.75rem;
}

.activity-row--new[b-d8wgf8xroo] {
    box-shadow: inset 3px 0 0 var(--primary);
}

.activity-time[b-d8wgf8xroo] {
    flex: 0 0 3rem;
    font-variant-numeric: tabular-nums;
    padding-top: 0.35rem;
}

.activity-tile[b-d8wgf8xroo] {
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--text-base);
}

.activity-tile--guardian[b-d8wgf8xroo] {
    background: var(--entity-parents-bg);
    color: var(--entity-parents-fg);
}

.activity-tile--student[b-d8wgf8xroo] {
    background: var(--entity-students-bg);
    color: var(--entity-students-fg);
}

.family-changes-diff[b-d8wgf8xroo] {
    font-size: var(--text-sm);
    overflow-wrap: anywhere;
}

.family-changes-old[b-d8wgf8xroo] {
    color: var(--text-muted);
    text-decoration: line-through;
}

.family-changes-new[b-d8wgf8xroo] {
    font-weight: 600;
}

.activity-chip[b-d8wgf8xroo] {
    display: inline-flex;
    align-items: center;
    background: var(--status-pending-bg);
    color: var(--status-pending-fg);
    border-radius: var(--radius-full);
    padding: 0 0.5rem;
    font-size: var(--text-xs);
    line-height: 1.6;
}
/* _content/SchoolManagementApp/Pages/ParentFamily.razor.rz.scp.css */
/* My family — settings-style rows. The row is the tap target (label · value ·
   chevron, 44px+), sections are cards led by the entity avatar tile. Empty
   values render as a brand-ink "Add": missing data is an invitation, not an
   error. Tokens only. */

.parent-family-page[b-ixtd69x1g0] {
    max-width: 640px;
    /* Clear the bottom nav + support bubble on mobile. */
    padding-bottom: 6rem;
}

.family-sections[b-ixtd69x1g0] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.family-section[b-ixtd69x1g0] {
    padding: 0.75rem 0 0.25rem;
    border-radius: var(--radius-lg);
}

.family-section-header[b-ixtd69x1g0] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0 1rem 0.5rem;
}

.family-section-heading[b-ixtd69x1g0] {
    min-width: 0;
}

.family-section-name[b-ixtd69x1g0] {
    font-size: 1.05rem;
    font-weight: 600;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.family-section-sub[b-ixtd69x1g0] {
    font-size: var(--text-sm);
    color: var(--text-muted);
}

.family-you-chip[b-ixtd69x1g0] {
    font-size: var(--text-xs);
    font-weight: 600;
    line-height: 1;
    padding: 0.25rem 0.5rem;
    border-radius: var(--radius-full);
    background: var(--brand-100);
    color: var(--brand-700);
}

.family-pending-pill[b-ixtd69x1g0] {
    font-size: var(--text-xs);
    font-weight: 600;
    line-height: 1;
    padding: 0.25rem 0.5rem;
    border-radius: var(--radius-full);
    background: var(--status-pending-bg);
    color: var(--status-pending-fg);
    white-space: nowrap;
}

.family-section-foot[b-ixtd69x1g0] {
    font-size: var(--text-xs);
    padding: 0.5rem 1rem 0.5rem;
    border-top: 1px solid var(--border);
}

.family-help[b-ixtd69x1g0] {
    margin-top: 1.5rem;
    padding: 1rem;
    border: 1px dashed var(--border);
    border-radius: var(--radius-lg);
}

.family-help-title[b-ixtd69x1g0] {
    font-weight: 600;
    margin-bottom: 0.25rem;
}

.loading-state[b-ixtd69x1g0] {
    display: flex;
    justify-content: center;
    padding: 3rem 0;
}
/* _content/SchoolManagementApp/Pages/Parents.razor.rz.scp.css */
    .parent-card[b-lxd0o6entx] {
        transition: transform 0.2s;
    }
    .parent-card:hover[b-lxd0o6entx] {
        transform: translateY(-2px);
        box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    }
    .student-checkboxes[b-lxd0o6entx] {
        max-height: 200px;
        overflow-y: auto;
        border: 1px solid var(--border);
        border-radius: 0.375rem;
        padding: 0.75rem;
    }
    .student-list .badge[b-lxd0o6entx] {
        font-size: 0.75em;
    }
    
    /* Unified status badge styling */
    .parent-card .badge[b-lxd0o6entx] {
        font-weight: 600;
        font-size: 0.8rem;
        padding: 0.5rem 0.75rem;
        border-radius: 20px;
    }
    
    .parent-card .badge.bg-success[b-lxd0o6entx] {
        background: var(--success) !important;
        box-shadow: 0 2px 6px rgba(40, 167, 69, 0.3);
    }
    
    .parent-card .badge.bg-info[b-lxd0o6entx] {
        background: var(--info) !important;
        box-shadow: 0 2px 6px rgba(23, 162, 184, 0.3);
        animation: pulse-ready-b-lxd0o6entx 2s infinite;
    }
    
    .parent-card .badge.bg-secondary[b-lxd0o6entx] {
        background: var(--secondary) !important;
        box-shadow: 0 2px 4px rgba(108, 117, 125, 0.3);
    }
    
    @keyframes pulse-ready-b-lxd0o6entx {
        0% { transform: scale(1); }
        50% { transform: scale(1.05); }
        100% { transform: scale(1); }
    }
    
    .dropdown-item.text-success:hover[b-lxd0o6entx] {
        background: var(--status-paid-bg);
        color: var(--status-paid-fg) !important;
    }
    
    .parent-activation-hint[b-lxd0o6entx] {
        background: var(--status-pending-bg);
        border-left: 4px solid var(--info);
        color: var(--status-pending-fg);
        border-radius: 8px;
        padding: 12px;
        margin: 8px 0;
        font-size: 0.85em;
    }
    
    /* Dual Parent Display Styles */
    .parent-info-section[b-lxd0o6entx] {
        background: var(--surface);
        border-radius: 6px;
        padding: 8px 12px;
        border-left: 3px solid var(--border);
    }
    
    .parent-type-label[b-lxd0o6entx] {
        color: var(--text-color);
        font-size: 0.9rem;
        display: block;
        margin-bottom: 4px;
    }
    
    .parent-details[b-lxd0o6entx] {
        font-size: 0.85rem;
        color: var(--text-muted);
        margin-left: 16px;
    }
    
    .parent-info-section:first-child[b-lxd0o6entx] {
        border-left-color: var(--primary);
    }
    
    .parent-info-section + .parent-info-section[b-lxd0o6entx] {
        border-left-color: var(--primary);
    }
    
    /* Student Assignment Status Styles */
    .student-assigned-elsewhere[b-lxd0o6entx] {
        background-color: var(--surface);
        border-radius: 4px;
        padding: 4px 8px;
        margin: 2px 0;
        border-left: 3px solid var(--danger);
    }
    
    .student-assigned-elsewhere input[type="checkbox"]:disabled[b-lxd0o6entx] {
        opacity: 0.5;
        cursor: not-allowed;
    }
    
    .student-assigned-elsewhere .form-check-label.text-muted[b-lxd0o6entx] {
        color: var(--text-muted) !important;
    }
    
    .student-checkboxes .form-check[b-lxd0o6entx] {
        padding: 8px 12px;
        margin: 4px 0;
        border-radius: 4px;
        transition: background-color 0.2s ease;
        display: flex;
        align-items: flex-start;
        gap: 8px;
    }
    
    .student-checkboxes .form-check-input[b-lxd0o6entx] {
        flex-shrink: 0;
        margin-top: 2px;
        margin-right: 0;
    }
    
    .student-checkboxes .form-check-label[b-lxd0o6entx] {
        flex: 1;
        margin-bottom: 0;
        line-height: 1.4;
    }
    
    .student-checkboxes .form-check:hover:not(.student-assigned-elsewhere)[b-lxd0o6entx] {
        background-color: var(--surface);
    }
    
    /* Header Section Styles */
    .header-section[b-lxd0o6entx] {
        background: var(--card-bg);
        border-radius: 12px;
        padding: 20px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
        border: 1px solid var(--border);
    }
    
    .search-section[b-lxd0o6entx] {
        min-width: 0; /* Allows flex item to shrink below content size */
    }
    
    .no-search-placeholder[b-lxd0o6entx] {
        display: flex;
        align-items: center;
        height: 48px; /* Match search input height */
        padding-left: 12px;
    }
    
    .btn-add-parent[b-lxd0o6entx] {
        height: 48px;
        padding: 0 20px;
        font-weight: 600;
        display: flex;
        align-items: center;
        justify-content: center;
        white-space: nowrap;
        background: var(--primary);
        border: none;
        transition: all 0.2s ease;
        box-shadow: 0 2px 6px rgba(var(--brand-rgb), 0.3);
    }
    
    .btn-add-parent:hover[b-lxd0o6entx] {
        background: var(--primary-hover);
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(var(--brand-rgb), 0.4);
    }
    
    .btn-add-parent:active[b-lxd0o6entx] {
        transform: translateY(0);
    }
    
    /* Search Functionality Styles */
    .search-container[b-lxd0o6entx] {
        max-width: none; /* Remove max-width constraint for header layout */
        margin: 0; /* Remove auto centering */
    }
    
    .search-container .input-group[b-lxd0o6entx] {
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
        border-radius: 8px;
        overflow: hidden;
    }
    
    .search-container .input-group-text[b-lxd0o6entx] {
        background: linear-gradient(45deg, var(--brand-600), var(--brand-700));
        color: white;
        border: none;
        font-size: 1.1rem;
    }
    
    .search-container .form-control[b-lxd0o6entx] {
        border: none;
        font-size: 1rem;
        padding: 12px 16px;
    }
    
    .search-container .form-control:focus[b-lxd0o6entx] {
        box-shadow: none;
        outline: 2px solid var(--primary);
        outline-offset: -2px;
    }
    
    .search-container .btn[b-lxd0o6entx] {
        border: none;
        background: var(--surface);
        color: var(--text-muted);
        transition: all 0.2s ease;
    }
    
    .search-container .btn:hover[b-lxd0o6entx] {
        background: var(--border);
        color: var(--text-color);
    }
    
    /* Mobile optimizations */
    @media (max-width: 768px) {
        .header-section[b-lxd0o6entx] {
            padding: 16px;
            border-radius: 8px;
        }
        
        .d-flex.justify-content-between.align-items-center.gap-3[b-lxd0o6entx] {
            flex-direction: column;
            gap: 12px !important;
            align-items: stretch !important;
        }
        
        .search-section[b-lxd0o6entx] {
            order: 2;
        }
        
        .action-section[b-lxd0o6entx] {
            order: 1;
            align-self: stretch;
        }
        
        .btn-add-parent[b-lxd0o6entx] {
            width: 100%;
            justify-content: center;
        }
        
        .search-container .form-control[b-lxd0o6entx] {
            font-size: 16px; /* Prevents zoom on iOS */
        }
        
        .no-search-placeholder[b-lxd0o6entx] {
            justify-content: center;
            text-align: center;
        }
    }
    
    @media (max-width: 576px) {
        .header-section[b-lxd0o6entx] {
            padding: 12px;
            margin: 0 -12px;
            border-radius: 0;
            border-left: none;
            border-right: none;
        }
        
        .gap-3[b-lxd0o6entx] {
            gap: 8px !important;
        }
    }
    
    /* Search highlighting styles */
    .badge.bg-warning[b-lxd0o6entx] {
        background: var(--warning) !important;
        box-shadow: 0 2px 6px rgba(255, 193, 7, 0.3);
        animation: highlight-pulse-b-lxd0o6entx 1.5s ease-in-out;
    }
    
    @keyframes highlight-pulse-b-lxd0o6entx {
        0% { transform: scale(1); }
        50% { transform: scale(1.05); }
        100% { transform: scale(1); }
    }

/* Dark Mode Styles */
[data-theme="dark"] .page-content[b-lxd0o6entx] {
    background: transparent !important;
    color: var(--bs-light) !important;
}

[data-theme="dark"] h1[b-lxd0o6entx] {
    color: var(--bs-light) !important;
}

[data-theme="dark"] h5[b-lxd0o6entx] {
    color: var(--bs-light) !important;
}

[data-theme="dark"] h6[b-lxd0o6entx] {
    color: var(--bs-light) !important;
}

[data-theme="dark"] .card[b-lxd0o6entx] {
    background: var(--bs-gray-800) !important;
    border-color: var(--bs-gray-600) !important;
    color: var(--bs-light) !important;
}

[data-theme="dark"] .card-header[b-lxd0o6entx] {
    background: var(--bs-gray-700) !important;
    border-bottom-color: var(--bs-gray-600) !important;
    color: var(--bs-light) !important;
}

[data-theme="dark"] .card-body[b-lxd0o6entx] {
    background: var(--bs-gray-800) !important;
    color: var(--bs-light) !important;
}

[data-theme="dark"] .card-footer[b-lxd0o6entx] {
    background: var(--bs-gray-700) !important;
    border-top-color: var(--bs-gray-600) !important;
    color: var(--bs-gray-400) !important;
}

[data-theme="dark"] .card-title[b-lxd0o6entx] {
    color: var(--bs-light) !important;
}

[data-theme="dark"] .form-label[b-lxd0o6entx] {
    color: var(--bs-light) !important;
}

[data-theme="dark"] .form-control[b-lxd0o6entx] {
    background-color: var(--bs-gray-700) !important;
    border-color: var(--bs-gray-600) !important;
    color: var(--bs-light) !important;
}

[data-theme="dark"] .form-control:focus[b-lxd0o6entx] {
    background-color: var(--bs-gray-700) !important;
    border-color: var(--bs-primary) !important;
    color: var(--bs-light) !important;
    box-shadow: 0 0 0 0.25rem rgba(59, 130, 246, 0.25) !important;
}

[data-theme="dark"] .form-control[b-lxd0o6entx]::placeholder {
    color: var(--bs-gray-400) !important;
}

[data-theme="dark"] .form-check-label[b-lxd0o6entx] {
    color: var(--bs-light) !important;
}

[data-theme="dark"] .form-check-input[b-lxd0o6entx] {
    background-color: var(--bs-gray-700) !important;
    border-color: var(--bs-gray-600) !important;
}

[data-theme="dark"] .form-check-input:checked[b-lxd0o6entx] {
    background-color: var(--bs-primary) !important;
    border-color: var(--bs-primary) !important;
}

[data-theme="dark"] .form-check-input:focus[b-lxd0o6entx] {
    box-shadow: 0 0 0 0.25rem rgba(59, 130, 246, 0.25) !important;
}

[data-theme="dark"] .text-muted[b-lxd0o6entx] {
    color: var(--bs-gray-400) !important;
}

[data-theme="dark"] .text-danger[b-lxd0o6entx] {
    color: var(--danger) !important;
}

[data-theme="dark"] .text-success[b-lxd0o6entx] {
    color: var(--success) !important;
}

[data-theme="dark"] .badge.bg-success[b-lxd0o6entx] {
    background-color: rgba(16, 185, 129, 0.8) !important;
    color: white !important;
}

[data-theme="dark"] .badge.bg-warning[b-lxd0o6entx] {
    background-color: rgba(245, 158, 11, 0.8) !important;
    color: white !important;
}

[data-theme="dark"] .badge.bg-info[b-lxd0o6entx] {
    background-color: rgba(14, 165, 233, 0.8) !important;
    color: white !important;
}

[data-theme="dark"] .badge.bg-secondary[b-lxd0o6entx] {
    background-color: var(--bs-gray-600) !important;
    color: var(--bs-light) !important;
}

[data-theme="dark"] .badge.bg-primary[b-lxd0o6entx] {
    background-color: rgba(59, 130, 246, 0.8) !important;
    color: white !important;
}

[data-theme="dark"] .alert-success[b-lxd0o6entx] {
    background-color: rgba(16, 185, 129, 0.1) !important;
    border-color: rgba(16, 185, 129, 0.3) !important;
    color: var(--success) !important;
}

[data-theme="dark"] .alert-info[b-lxd0o6entx] {
    background-color: rgba(14, 165, 233, 0.1) !important;
    border-color: rgba(14, 165, 233, 0.3) !important;
    color: var(--info) !important;
}

[data-theme="dark"] .dropdown-menu[b-lxd0o6entx] {
    background-color: var(--bs-gray-700) !important;
    border-color: var(--bs-gray-600) !important;
}

[data-theme="dark"] .dropdown-item[b-lxd0o6entx] {
    color: var(--bs-light) !important;
}

[data-theme="dark"] .dropdown-item:hover[b-lxd0o6entx],
[data-theme="dark"] .dropdown-item:focus[b-lxd0o6entx] {
    background-color: var(--bs-gray-600) !important;
    color: var(--bs-light) !important;
}

[data-theme="dark"] .dropdown-item.text-success[b-lxd0o6entx] {
    color: var(--success) !important;
}

[data-theme="dark"] .dropdown-item.text-danger[b-lxd0o6entx] {
    color: var(--danger) !important;
}

[data-theme="dark"] .dropdown-item-text[b-lxd0o6entx] {
    color: var(--bs-gray-400) !important;
}

[data-theme="dark"] .dropdown-divider[b-lxd0o6entx] {
    border-top-color: var(--bs-gray-600) !important;
}

[data-theme="dark"] .btn-outline-secondary[b-lxd0o6entx] {
    border-color: var(--bs-gray-500) !important;
    color: var(--bs-gray-300) !important;
}

[data-theme="dark"] .btn-outline-secondary:hover[b-lxd0o6entx] {
    background-color: var(--bs-gray-600) !important;
    border-color: var(--bs-gray-600) !important;
    color: white !important;
}

[data-theme="dark"] .btn-outline-primary[b-lxd0o6entx] {
    border-color: var(--primary) !important;
    color: var(--primary) !important;
}

[data-theme="dark"] .btn-outline-primary:hover[b-lxd0o6entx] {
    background-color: var(--primary) !important;
    border-color: var(--primary) !important;
    color: white !important;
}

/* Dark mode for parent card specific styles */
[data-theme="dark"] .parent-card[b-lxd0o6entx] {
    background: var(--bs-gray-800) !important;
    border-color: var(--bs-gray-600) !important;
    color: var(--bs-light) !important;
}

[data-theme="dark"] .parent-card:hover[b-lxd0o6entx] {
    box-shadow: 0 4px 8px rgba(0,0,0,0.3) !important;
}

[data-theme="dark"] .student-checkboxes[b-lxd0o6entx] {
    background: var(--bs-gray-750) !important;
    border-color: var(--bs-gray-600) !important;
}

[data-theme="dark"] .student-assigned-elsewhere[b-lxd0o6entx] {
    background-color: var(--bs-gray-700) !important;
    border-left-color: var(--danger) !important;
}

[data-theme="dark"] .student-assigned-elsewhere .form-check-label.text-muted[b-lxd0o6entx] {
    color: var(--bs-gray-400) !important;
}

[data-theme="dark"] .student-checkboxes .form-check:hover:not(.student-assigned-elsewhere)[b-lxd0o6entx] {
    background-color: var(--bs-gray-700) !important;
}

[data-theme="dark"] .header-section[b-lxd0o6entx] {
    background: var(--bs-gray-800) !important;
    border-color: var(--bs-gray-600) !important;
    color: var(--bs-light) !important;
}

[data-theme="dark"] .search-container .form-control[b-lxd0o6entx] {
    background: var(--bs-gray-700) !important;
    border-color: var(--bs-gray-600) !important;
    color: var(--bs-light) !important;
}

[data-theme="dark"] .search-container .form-control:focus[b-lxd0o6entx] {
    background: var(--bs-gray-700) !important;
    outline-color: var(--primary) !important;
    color: var(--bs-light) !important;
}

[data-theme="dark"] .search-container .btn[b-lxd0o6entx] {
    background: var(--bs-gray-700) !important;
    color: var(--bs-gray-400) !important;
    border-color: var(--bs-gray-600) !important;
}

[data-theme="dark"] .search-container .btn:hover[b-lxd0o6entx] {
    background: var(--bs-gray-600) !important;
    color: var(--bs-light) !important;
}

.activation-dashboard-modal .modal-content[b-lxd0o6entx] {
    border-radius: 16px;
    border: none;
    box-shadow: 0 20px 80px rgba(15, 23, 42, 0.2);
}

.activation-dashboard-dialog[b-lxd0o6entx] {
    max-width: 1100px;
    width: calc(100% - 2rem);
}

.activation-icon-wrapper[b-lxd0o6entx] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: var(--entity-brand-bg);
    color: var(--entity-brand-fg);
    font-size: 1.25rem;
}

.activation-summary-card[b-lxd0o6entx] {
    background: var(--surface);
    border-radius: 16px;
    padding: 1.25rem;
    margin-bottom: 1.5rem;
}

.activation-summary-header[b-lxd0o6entx] {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 1rem;
    align-items: center;
}

.activation-summary-counts[b-lxd0o6entx] {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.activation-progress[b-lxd0o6entx] {
    height: 12px;
    border-radius: 999px;
    overflow: hidden;
    background-color: rgba(148, 163, 184, 0.3);
    margin: 0.75rem 0;
}

.activation-summary-footnote[b-lxd0o6entx] {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.activation-summary-resend .resend-awaiting-btn[b-lxd0o6entx] {
    min-width: 220px;
}

.activation-summary-resend .badge[b-lxd0o6entx] {
    font-size: 0.75rem;
    letter-spacing: 0.01em;
    text-transform: uppercase;
}

.activation-awaiting-list[b-lxd0o6entx] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    max-height: 220px;
    overflow-y: auto;
    padding-right: 0.25rem;
}

.activation-awaiting-list .awaiting-row[b-lxd0o6entx] {
    display: flex;
    gap: 0.75rem;
    align-items: flex-start;
    padding: 0.5rem;
    border-radius: 10px;
    border: 1px dashed rgba(234, 179, 8, 0.35);
    background-color: rgba(253, 230, 138, 0.25);
}

.activation-awaiting-list .awaiting-checkbox[b-lxd0o6entx] {
    margin-top: 0.35rem;
}

.activation-awaiting-list .awaiting-checkbox .form-check-input[b-lxd0o6entx] {
    width: 1.1rem;
    height: 1.1rem;
}

.activation-awaiting-list .awaiting-icon[b-lxd0o6entx] {
    font-size: 1.3rem;
    display: flex;
    align-items: center;
}

.activation-awaiting-list .awaiting-details[b-lxd0o6entx] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.activation-awaiting-list .awaiting-primary[b-lxd0o6entx] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    align-items: baseline;
}

.activation-awaiting-list .awaiting-secondary[b-lxd0o6entx] {
    font-size: 0.85rem;
}

.activation-columns .activation-column[b-lxd0o6entx] {
    background-color: var(--bs-body-bg);
    border: 1px solid rgba(148, 163, 184, 0.25);
    border-radius: 12px;
    padding: 1rem;
    min-height: 320px;
}

.activation-column-header[b-lxd0o6entx] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

.activation-parent-list[b-lxd0o6entx] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.activation-family-card[b-lxd0o6entx] {
    border-radius: 12px;
    border: 1px solid rgba(148, 163, 184, 0.25);
    background-color: rgba(255, 255, 255, 0.85);
    padding: 0.75rem;
}

.activation-family-card.pending[b-lxd0o6entx] {
    border-left: 4px solid var(--warning);
}

.activation-family-card.active[b-lxd0o6entx] {
    border-left: 4px solid var(--success);
}

.activation-family-header[b-lxd0o6entx] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 0.75rem;
    margin-bottom: 0.5rem;
}

.activation-guardian-list[b-lxd0o6entx] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.activation-guardian-row[b-lxd0o6entx] {
    display: flex;
    gap: 0.75rem;
    padding: 0.5rem;
    border-radius: 10px;
    border: 1px dashed rgba(148, 163, 184, 0.4);
    align-items: stretch;
}

.activation-guardian-row.pending[b-lxd0o6entx] {
    background-color: rgba(252, 211, 77, 0.08);
}

.activation-guardian-row.active[b-lxd0o6entx] {
    background-color: rgba(16, 185, 129, 0.08);
}

.activation-guardian-details[b-lxd0o6entx] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.activation-guardian-names[b-lxd0o6entx] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    align-items: baseline;
}

.activation-guardian-actions[b-lxd0o6entx] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.activation-status-icon[b-lxd0o6entx] {
    display: flex;
    align-items: center;
    font-size: 1.25rem;
}

.activation-empty-state[b-lxd0o6entx] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 2rem 1rem;
    border-radius: 12px;
    border: 1px dashed rgba(148, 163, 184, 0.35);
    text-align: center;
}

.btn-activation-overview[b-lxd0o6entx] {
    min-width: 140px;
}

@media (max-width: 991.98px) {
    .activation-columns .activation-column[b-lxd0o6entx] {
        min-height: auto;
    }
}

@media (max-width: 767.98px) {
    .activation-dashboard-modal[b-lxd0o6entx] {
        /* Keep the activation console inside the phone's visual viewport, including
           notches/home indicators. The dialog itself fills the remaining content box. */
        height: 100%;
        max-height: 100%;
        height: 100dvh;
        max-height: 100dvh;
        padding: calc(0.5rem + env(safe-area-inset-top))
                 calc(0.5rem + env(safe-area-inset-right))
                 calc(0.5rem + env(safe-area-inset-bottom))
                 calc(0.5rem + env(safe-area-inset-left));
        overflow: hidden;
    }

    .activation-dashboard-dialog[b-lxd0o6entx] {
        width: 100%;
        max-width: none;
        height: 100%;
        min-height: 0;
        margin: 0;
    }

    .activation-dashboard-modal .modal-content[b-lxd0o6entx] {
        height: 100%;
        max-height: 100%;
        min-height: 0;
        border-radius: 12px;
    }

    .activation-dashboard-modal .modal-body[b-lxd0o6entx] {
        min-height: 0;
        overflow-y: auto;
        overflow-wrap: anywhere;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 1rem;
    }

    .activation-dashboard-modal .modal-footer[b-lxd0o6entx] {
        /* This overlay sits above the bottom navigation, so the global mobile
           footer clearance only wastes viewport height here. */
        margin-bottom: 0 !important;
    }

    .activation-summary-card[b-lxd0o6entx] {
        padding: 1rem;
    }

    .activation-guardian-row[b-lxd0o6entx] {
        flex-direction: column;
    }

    .activation-guardian-actions[b-lxd0o6entx] {
        justify-content: flex-start;
    }

    .btn-activation-overview[b-lxd0o6entx] {
        min-width: 44px;
    }

    .activation-summary-resend .resend-awaiting-btn[b-lxd0o6entx] {
        width: 100%;
    }

    .activation-awaiting-list[b-lxd0o6entx] {
        max-height: none;
    }
}

[data-theme="dark"] .activation-columns .activation-column[b-lxd0o6entx] {
    background-color: var(--bs-gray-800);
    border-color: rgba(148, 163, 184, 0.3);
}

[data-theme="dark"] .activation-family-card[b-lxd0o6entx] {
    background-color: rgba(31, 41, 55, 0.85);
    border-color: rgba(148, 163, 184, 0.3);
}

[data-theme="dark"] .activation-guardian-row[b-lxd0o6entx] {
    border-color: rgba(148, 163, 184, 0.35);
}

[data-theme="dark"] .activation-guardian-row.pending[b-lxd0o6entx] {
    background-color: rgba(250, 204, 21, 0.12);
}

[data-theme="dark"] .activation-guardian-row.active[b-lxd0o6entx] {
    background-color: rgba(16, 185, 129, 0.18);
}

[data-theme="dark"] .activation-empty-state[b-lxd0o6entx] {
    border-color: rgba(148, 163, 184, 0.35);
    background-color: rgba(31, 41, 55, 0.6);
    color: var(--bs-gray-200);
}

[data-theme="dark"] .activation-summary-resend .badge[b-lxd0o6entx] {
    background-color: var(--status-overdue-bg) !important;
    color: var(--status-overdue-fg) !important;
}

[data-theme="dark"] .activation-summary-resend .resend-awaiting-btn[b-lxd0o6entx] {
    background-color: rgba(250, 204, 21, 0.2);
    border-color: rgba(250, 204, 21, 0.45);
    color: var(--bs-light);
}

[data-theme="dark"] .activation-awaiting-list .awaiting-row[b-lxd0o6entx] {
    border-color: rgba(250, 204, 21, 0.35);
    background-color: rgba(161, 98, 7, 0.25);
}

/* Custom CSS variable for gray-750 since Bootstrap doesn't have it */
:root[data-theme="dark"][b-lxd0o6entx] {
    --bs-gray-750: var(--border);
}

.parents-infinite-scroll-sentinel[b-lxd0o6entx] {
    height: 1px;
    width: 100%;
}

/* Icon-only chevron segment of the split add action: narrow, with a seam, since
   both segments share the primary fill and the global caret strip leaves nothing
   between them. */
.parents-split-toggle[b-lxd0o6entx] {
    padding-inline: 0.55rem;
    min-width: 44px;
    border-left: 1px solid rgba(255, 255, 255, 0.35);
}

/* Add-menu shell shared with the Students toolbar (same classes, scoped CSS
   forces the copy): the split toggle's exceptional add-parent-only option. */
.family-add-menu[b-lxd0o6entx] {
    width: 21rem;
    max-width: calc(100vw - 1.5rem);
    padding: 0.4rem;
}

.family-add-option[b-lxd0o6entx] {
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
    min-height: 54px;
    padding: 0.65rem;
    border-radius: 0.5rem;
    white-space: normal;
}

.family-add-icon[b-lxd0o6entx] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 2rem;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    color: var(--bs-primary);
    background: color-mix(in srgb, var(--bs-primary) 12%, transparent);
}

.family-add-copy[b-lxd0o6entx] {
    display: flex;
    flex: 1 1 auto;
    min-width: 0;
    flex-direction: column;
    gap: 0.15rem;
}

.family-add-copy small[b-lxd0o6entx] {
    color: var(--bs-secondary-color);
    line-height: 1.3;
}
/* _content/SchoolManagementApp/Pages/PaymentActivityReview.razor.rz.scp.css */
/* Payment journal — visual hierarchy per docs/design-system.md:
   metric-card summary (calm surface, big ink number, hue only in the tile),
   icon-tile rule on timeline entries, corrections in neutral slate. */

/* ---- Per-actor summary cards (they double as filter toggles) ---- */

.actor-card[b-txyh44h83s] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 0.75rem 1rem;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

.actor-card:hover[b-txyh44h83s] {
    background: var(--brand-50);
}

.actor-card:focus-visible[b-txyh44h83s] {
    outline: none;
    box-shadow: 0 0 0 0.25rem var(--focus-ring);
}

.actor-card[aria-pressed="true"][b-txyh44h83s] {
    background: var(--brand-100);
    border-color: var(--primary);
}

.actor-avatar[b-txyh44h83s] {
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: var(--text-sm);
}

.actor-avatar--staff[b-txyh44h83s] {
    background: var(--entity-teachers-bg);
    color: var(--entity-teachers-fg);
}

.actor-avatar--brand[b-txyh44h83s] {
    background: var(--entity-brand-bg);
    color: var(--entity-brand-fg);
}

.actor-card-text[b-txyh44h83s] {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

/* The number the admin came for: the day's net drawer total, in ink. */
.actor-net[b-txyh44h83s] {
    font-size: var(--text-xl);
    font-weight: 700;
    line-height: 1.2;
}

.actor-name[b-txyh44h83s] {
    font-weight: 600;
    font-size: var(--text-sm);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ---- Timeline ---- */

.activity-row[b-txyh44h83s] {
    gap: 0.75rem;
}

.activity-time[b-txyh44h83s] {
    flex: 0 0 3rem;
    font-variant-numeric: tabular-nums;
    padding-top: 0.35rem;
}

/* Icon-tile rule: bg + glyph from ONE hue pair, so the meaning is scannable
   down the left edge of the list. */
.activity-tile[b-txyh44h83s] {
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--text-base);
}

.activity-tile--collected[b-txyh44h83s] {
    background: var(--status-paid-bg);
    color: var(--status-paid-fg);
}

.activity-tile--recorded[b-txyh44h83s] {
    background: var(--entity-brand-bg);
    color: var(--entity-brand-fg);
}

/* Corrections are normal desk work, never danger red (ux-guidelines §11). */
.activity-tile--corrected[b-txyh44h83s] {
    background: var(--entity-teachers-bg);
    color: var(--entity-teachers-fg);
}

.activity-amount[b-txyh44h83s] {
    font-weight: 700;
}

.activity-amount--collected[b-txyh44h83s] {
    color: var(--status-paid-fg);
}

.activity-amount--corrected[b-txyh44h83s] {
    text-decoration: line-through;
    color: var(--text-muted);
    font-weight: 600;
}

.activity-student[b-txyh44h83s] {
    font-weight: 600;
    color: var(--primary);
}

/* Small neutral chips: payment method, and the corrected pair badge. */
.activity-chip[b-txyh44h83s] {
    display: inline-flex;
    align-items: center;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-full);
    padding: 0 0.5rem;
    font-size: var(--text-xs);
    line-height: 1.5;
    vertical-align: text-bottom;
}

.activity-chip--corrected[b-txyh44h83s] {
    background: var(--entity-teachers-bg);
    border-color: var(--entity-teachers-bg);
    color: var(--entity-teachers-fg);
}
/* _content/SchoolManagementApp/Pages/Payments.razor.rz.scp.css */
    /* Lean Payment Toolbar */
    .payment-toolbar[b-dfe4zxhyvb] {
        background: rgba(248, 249, 250, 0.8);
        backdrop-filter: blur(10px);
        border: 1px solid rgba(0,0,0,0.05);
        border-radius: 0.75rem;
        padding: 1rem;
        margin-bottom: 1rem;
        max-width: 100%;
        overflow-x: hidden;
    }
    
    .stats-summary[b-dfe4zxhyvb] {
        min-width: 0; /* Allow flexbox shrinking */
    }
    
    .stats-summary .badge[b-dfe4zxhyvb] {
        white-space: nowrap;
        flex-shrink: 1;
        min-width: 0;
    }
    
    /* Button group improvements */
    .payment-toolbar .btn-group[b-dfe4zxhyvb] {
        flex-shrink: 0; /* Prevent button group from shrinking */
    }
    
    .payment-toolbar .btn-group .btn[b-dfe4zxhyvb] {
        white-space: nowrap; /* Keep button text on one line */
    }
    
    .stats-summary .badge[b-dfe4zxhyvb] {
        font-size: 0.8rem;
        padding: 0.4rem 0.8rem;
        transition: all 0.2s ease;
        font-weight: 600;
        /* Improve dark mode readability */
        background-color: var(--bs-badge-bg, #6c757d) !important;
        color: var(--bs-badge-color, #fff) !important;
        border: 1px solid rgba(255,255,255,0.2);
    }
    
    .stats-summary .bg-success-subtle[b-dfe4zxhyvb] {
        background-color: var(--status-paid-solid) !important;
        color: #ffffff !important;
    }

    .stats-summary .bg-warning-subtle[b-dfe4zxhyvb] {
        background-color: var(--status-overdue-solid) !important;
        color: #ffffff !important;
    }

    .stats-summary .bg-info-subtle[b-dfe4zxhyvb] {
        background-color: var(--info) !important;
        color: #ffffff !important;
    }

    .stats-summary .bg-primary-subtle[b-dfe4zxhyvb] {
        background-color: var(--primary) !important;
        color: #ffffff !important;
    }
    
    .cursor-pointer[b-dfe4zxhyvb] {
        cursor: pointer;
    }
    
    .cursor-pointer:hover[b-dfe4zxhyvb] {
        transform: translateY(-1px);
        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    }


    .stats-card[b-dfe4zxhyvb] {
        padding: 1.5rem;
        border-radius: 1rem;
        box-shadow: 0 4px 6px rgba(0,0,0,0.1);
        transition: all 0.3s ease;
        border: 1px solid rgba(255,255,255,0.1);
        position: relative;
        overflow: hidden;
        height: 140px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }
    
    .stats-card.clickable[b-dfe4zxhyvb] {
        cursor: pointer;
    }
    
    .stats-card.clickable:hover[b-dfe4zxhyvb] {
        transform: translateY(-2px);
        box-shadow: 0 8px 12px rgba(0,0,0,0.15);
    }
    
    /* Flat, token-driven status fills (were BS4-era gradients). One source of
       truth in tokens.css; white text meets AA on every fill. */
    .stats-card.paid[b-dfe4zxhyvb] {
        background: var(--status-paid-solid);
        color: white;
    }

    .stats-card.pending[b-dfe4zxhyvb] {
        background: var(--status-pending-solid);
        color: white;
    }

    .stats-card.overdue[b-dfe4zxhyvb] {
        background: var(--status-overdue-solid);
        color: white;
        animation: subtle-pulse-b-dfe4zxhyvb 2s infinite;
    }

    .stats-card.overdue.urgent[b-dfe4zxhyvb] {
        background: var(--status-urgent-solid);
    }

    .stats-card.celebration[b-dfe4zxhyvb] {
        background: var(--status-paid-solid);
        color: white;
    }

    .stats-card.total[b-dfe4zxhyvb] {
        background: var(--status-total-solid);
        color: white;
    }
    
    .stats-icon[b-dfe4zxhyvb] {
        font-size: 1.5rem;
        margin-bottom: 0.5rem;
    }
    
    .stats-label[b-dfe4zxhyvb] {
        font-size: 0.9rem;
        font-weight: 600;
        opacity: 0.9;
        margin-bottom: 0.25rem;
    }
    
    .stats-value[b-dfe4zxhyvb] {
        font-size: 1.5rem;
        font-weight: bold;
        line-height: 1.2;
        margin-bottom: 0.25rem;
        min-height: 2rem;
        display: flex;
        align-items: center;
        justify-content: flex-end;
    }
    
    .stats-sublabel[b-dfe4zxhyvb] {
        font-size: 0.75rem;
        opacity: 0.8;
    }
    
    .payment-priority-indicator[b-dfe4zxhyvb] {
        width: 4px;
        height: 40px;
        border-radius: 2px;
        margin-right: 12px;
        flex-shrink: 0;
    }
    
    .priority-overdue[b-dfe4zxhyvb] {
        background: var(--status-urgent-solid);
        animation: priority-pulse-b-dfe4zxhyvb 1.5s infinite;
    }

    .priority-due-soon[b-dfe4zxhyvb] {
        background: var(--status-overdue-solid);
    }

    .priority-paid[b-dfe4zxhyvb] {
        background: var(--status-paid-solid);
    }
    
    .priority-normal[b-dfe4zxhyvb] {
        background: var(--border);
    }
    
    .badge-pulse[b-dfe4zxhyvb] {
        animation: badge-pulse-b-dfe4zxhyvb 1.5s infinite;
    }
    
    @keyframes subtle-pulse-b-dfe4zxhyvb {
        0%, 100% { opacity: 1; }
        50% { opacity: 0.9; }
    }
    
    @keyframes priority-pulse-b-dfe4zxhyvb {
        0%, 100% { opacity: 1; }
        50% { opacity: 0.6; }
    }
    
    @keyframes badge-pulse-b-dfe4zxhyvb {
        0%, 100% { transform: scale(1); }
        50% { transform: scale(1.05); }
    }
    
    .table-hover tbody tr:hover[b-dfe4zxhyvb] {
        background-color: rgba(var(--brand-rgb), 0.05);
    }

    /* Overdue rows via status tokens. The dark override was keyed to
       [data-bs-theme] — an attribute the app never sets (theme.js uses
       [data-theme]) — so it was dead. Tokens now carry the dark values. */
    .overdue-row[b-dfe4zxhyvb] {
        background-color: var(--status-overdue-bg) !important;
        color: var(--status-overdue-fg) !important;
    }

    .overdue-row td[b-dfe4zxhyvb] {
        color: var(--status-overdue-fg) !important;
    }
    
    /* Mobile-First Stats Grid */
    .stats-grid[b-dfe4zxhyvb] {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
        gap: 1rem;
    }
    
    /* Mobile-First Filter Toolbar */
    .mobile-filter-toolbar[b-dfe4zxhyvb] {
        background: rgba(var(--brand-rgb), 0.05);
        border-radius: 0.5rem;
        padding: 0.75rem;
    }
    
    .filter-item[b-dfe4zxhyvb] {
        display: flex;
        flex-direction: column;
    }
    
    .filter-status-bar[b-dfe4zxhyvb] {
        background: rgba(var(--brand-rgb), 0.03);
        border-radius: 0.375rem;
        padding: 0.5rem 0.75rem;
        border-left: 3px solid var(--bs-primary);
    }
    
    /* Mobile Payment Cards — tappability comes from the shared .card-tappable
       primitive in custom.css (chevronless here; the whole card opens edit). */
    .payment-card[b-dfe4zxhyvb] {
        background: var(--card-bg);
        border: 1px solid var(--border);
        border-radius: 0.75rem;
        padding: 1rem;
        box-shadow: var(--shadow-sm);
        transition: all 0.2s ease;
        position: relative;
    }

    .payment-card-overdue[b-dfe4zxhyvb] {
        background: linear-gradient(135deg, var(--status-overdue-bg) 0%, var(--card-bg) 100%);
        border-left: 4px solid var(--status-overdue-solid);
    }

    .payment-card-overdue:hover[b-dfe4zxhyvb] {
        border-color: var(--status-overdue-solid);
    }
    
    /* Mobile Responsive Breakpoints */
    @media (max-width: 576px) {
        .stats-grid[b-dfe4zxhyvb] {
            grid-template-columns: 1fr;
            gap: 0.75rem;
        }
        
        .stats-card[b-dfe4zxhyvb] {
            height: 120px;
            padding: 1rem;
        }
        
        .stats-label[b-dfe4zxhyvb] {
            font-size: 0.8rem;
        }
        
        .stats-value[b-dfe4zxhyvb] {
            font-size: 1.25rem;
        }
        
        .mobile-filter-toolbar[b-dfe4zxhyvb] {
            padding: 0.5rem;
        }
        
        .payment-card[b-dfe4zxhyvb] {
            padding: 0.75rem;
        }
    }
    
    /* Touch-Optimized Controls */
    @media (max-width: 768px) {
        .btn-sm[b-dfe4zxhyvb] {
            padding: 0.375rem 0.75rem;
            min-height: 36px;
        }
        
        .form-select-sm[b-dfe4zxhyvb] {
            min-height: 36px;
        }
        
        .dropdown-toggle[b-dfe4zxhyvb]::after {
            margin-left: 0.5rem;
        }
    }
    
    /* Dropdown positioning improvements - Force high z-index */
    .dropdown-menu[b-dfe4zxhyvb] {
        z-index: 9999 !important;
        position: fixed !important;
        box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.25) !important;
        border: 1px solid rgba(0, 0, 0, 0.2) !important;
    }

    /* Specific targeting for table dropdowns */
    .table .dropdown-menu[b-dfe4zxhyvb],
    .table-responsive .dropdown-menu[b-dfe4zxhyvb],
    tbody .dropdown-menu[b-dfe4zxhyvb],
    tr .dropdown-menu[b-dfe4zxhyvb] {
        z-index: 9999 !important;
        position: fixed !important;
    }

    .payment-card .dropdown-menu[b-dfe4zxhyvb] {
        z-index: 9999 !important;
    }

    /* The card's More menu must be a real dropup. The blanket position:fixed above
       detaches the menu from its button (fixed with no coordinates = placed at the
       static-flow spot but pinned to the viewport), so it spilled DOWNWARD from the
       button — under the next card and into the bottom-nav dead zone, whose z-index
       outranks everything. Anchored absolute, Bootstrap's dropup rules (bottom:100%)
       apply again and the menu opens upward over the card's own body. */
    .payment-card .dropup .dropdown-menu[b-dfe4zxhyvb] {
        position: absolute !important;
    }

    /* Belt and braces: whichever way a menu ends up opening, the card that owns it
       must paint above its sibling cards (position:relative siblings otherwise
       stack in DOM order, letting the NEXT card cover an open menu). */
    .payment-card:has(.dropdown-menu.show)[b-dfe4zxhyvb] {
        z-index: 10;
    }

    .payments-mobile-wrapper[b-dfe4zxhyvb],
    .payments-mobile-wrapper > .card-body[b-dfe4zxhyvb] {
        overflow: visible !important;
    }

    /* Remove any conflicting positioning from table elements */
    .table-responsive[b-dfe4zxhyvb] {
        overflow: visible !important;
    }

    .table[b-dfe4zxhyvb] {
        overflow: visible !important;
    }

    .table tbody[b-dfe4zxhyvb],
    .table tbody tr[b-dfe4zxhyvb],
    .table tbody td[b-dfe4zxhyvb] {
        overflow: visible !important;
        position: static !important;
    }

    /* Ensure dropdown container doesn't interfere */
    .table .dropdown[b-dfe4zxhyvb] {
        position: static !important;
        overflow: visible !important;
    }

    /* Header Actions dropdown should also use high z-index */
    .card-header .dropdown-menu[b-dfe4zxhyvb] {
        z-index: 9999 !important;
        position: fixed !important;
        box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.25) !important;
        border: 1px solid rgba(0, 0, 0, 0.2) !important;
    }

    /* Remove problematic overrides and let Bootstrap handle theming naturally */
    .card-header[b-dfe4zxhyvb] {
        /* Remove forced colors - let Bootstrap handle it */
    }

    /* Header row: title left, reminder action right on the same line. The pill
       used to be a sticky full-width band on its own row; it now lives beside
       the page title and wraps below it on narrow screens. */
    .payments-header[b-dfe4zxhyvb] {
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-wrap: wrap;
        gap: 0.5rem 1rem;
        margin-bottom: 0.75rem;
    }

    /* On desktop the fixed profile avatar overlays the content's top-right
       corner (custom.css .desktop-profile-container: right 1rem + 2.5rem
       button). Stop the reminder slot before it so the pill isn't covered.
       Mobile keeps the full width — the avatar lives in the mobile top bar. */
    @media (min-width: 768px) {
        .payments-header[b-dfe4zxhyvb] {
            padding-right: 4.5rem;
        }
    }

    .payments-header .payments-header-title[b-dfe4zxhyvb] {
        margin-bottom: 0;
    }

    .reminder-pill-wrapper[b-dfe4zxhyvb] {
        display: inline-flex;
        align-items: stretch;
        gap: 0;
        max-width: 100%;
    }

    .reminder-inline-note[b-dfe4zxhyvb] {
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
        font-size: 0.85rem;
        color: var(--text-muted);
        max-width: 100%;
    }

    .reminder-inline-note-text[b-dfe4zxhyvb] {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        max-width: 32rem;
    }

    .reminder-inline-note-action[b-dfe4zxhyvb] {
        flex-shrink: 0;
    }

    .reminder-pill[b-dfe4zxhyvb] {
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
        background: var(--status-overdue-bg);
        border: 1px solid var(--warning);
        border-right: none;
        border-radius: 999px 0 0 999px;
        padding: 0.4rem 0.9rem 0.4rem 0.85rem;
        font-size: 0.875rem;
        color: var(--status-overdue-fg);
        cursor: pointer;
        transition: background-color 0.15s ease, border-color 0.15s ease;
        min-height: 36px;
    }

    .reminder-pill:hover[b-dfe4zxhyvb],
    .reminder-pill:focus-visible[b-dfe4zxhyvb] {
        background: var(--status-overdue-bg);
        border-color: var(--status-overdue-solid);
        outline: none;
    }

    .reminder-pill-bell[b-dfe4zxhyvb] {
        color: var(--warning);
        font-size: 0.95rem;
    }

    .reminder-pill-count[b-dfe4zxhyvb] {
        font-weight: 700;
    }

    .reminder-pill-text[b-dfe4zxhyvb] {
        color: var(--status-overdue-fg);
    }

    .reminder-pill-amount[b-dfe4zxhyvb] {
        margin-left: 0.35rem;
        padding-left: 0.6rem;
        border-left: 1px solid var(--warning);
        font-weight: 600;
    }

    .reminder-pill-snooze[b-dfe4zxhyvb] {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        background: var(--status-overdue-bg);
        border: 1px solid var(--warning);
        border-radius: 0 999px 999px 0;
        padding: 0 0.65rem;
        color: var(--status-overdue-fg);
        cursor: pointer;
        transition: background-color 0.15s ease, color 0.15s ease;
        min-height: 36px;
    }

    .reminder-pill-snooze:hover[b-dfe4zxhyvb],
    .reminder-pill-snooze:focus-visible[b-dfe4zxhyvb] {
        background: var(--status-overdue-bg);
        border-color: var(--status-overdue-solid);
        outline: none;
    }

    @media (max-width: 575.98px) {
        .reminder-pill-text[b-dfe4zxhyvb] {
            display: none;
        }
    }

    /* Reminder-pill amber now flows through --status-overdue-* / --warning
       tokens (which carry their own dark values), so no raw-hex dark override
       is needed. */

    /* Row menu "Send reminder": two lines when the anti-spam rules block it —
       the action label, then who/when in the same amber the pill uses. The
       item stays tappable (the tap explains), so no disabled greying. */
    .row-reminder-item[b-dfe4zxhyvb] {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 0.125rem;
        white-space: normal;
    }

    .row-reminder-item--blocked > span[b-dfe4zxhyvb] {
        color: var(--text-muted);
    }

    .row-reminder-hint[b-dfe4zxhyvb] {
        display: block;
        padding-left: 1.5rem; /* under the label text, past the icon */
        font-size: 0.75rem;
        line-height: 1.2;
        color: var(--status-overdue-fg);
    }

    /* Reminder-modal dead-zone clearance now comes from the shared fullscreen
       mobile modal recipe in custom.css. */

    .payments-skeleton[b-dfe4zxhyvb] {
        margin-bottom: 2rem;
    }

    .payments-skeleton-toolbar[b-dfe4zxhyvb],
    .payments-skeleton-card[b-dfe4zxhyvb] {
        background: var(--bs-body-bg);
        border: 1px solid rgba(15, 23, 42, 0.08);
        border-radius: 1rem;
        box-shadow: 0 10px 24px rgba(15, 23, 42, 0.05);
    }

    .payments-skeleton-toolbar[b-dfe4zxhyvb] {
        padding: 1rem 1.25rem;
        margin-bottom: 1rem;
    }

    .payments-skeleton-card[b-dfe4zxhyvb] {
        padding: 1.25rem;
    }

    .payments-skeleton-chip-row[b-dfe4zxhyvb] {
        display: flex;
        gap: 0.75rem;
        margin-top: 1rem;
        flex-wrap: wrap;
    }

    .payments-skeleton-chip[b-dfe4zxhyvb],
    .payments-skeleton-line[b-dfe4zxhyvb] {
        position: relative;
        overflow: hidden;
        background: linear-gradient(90deg, rgba(226, 232, 240, 0.85) 25%, rgba(248, 250, 252, 1) 50%, rgba(226, 232, 240, 0.85) 75%);
        background-size: 200% 100%;
        animation: paymentsSkeletonPulse-b-dfe4zxhyvb 1.4s ease-in-out infinite;
        border-radius: 999px;
    }

    .payments-skeleton-chip[b-dfe4zxhyvb] {
        width: 6.5rem;
        height: 2.25rem;
    }

    .payments-skeleton-line[b-dfe4zxhyvb] {
        height: 0.9rem;
        margin-bottom: 0.85rem;
    }

    .payments-skeleton-line-lg[b-dfe4zxhyvb] {
        width: min(24rem, 65%);
        height: 1.1rem;
    }

    .payments-skeleton-line-md[b-dfe4zxhyvb] {
        width: min(16rem, 48%);
    }

    .payments-skeleton-line-sm[b-dfe4zxhyvb] {
        width: min(11rem, 34%);
    }

    .payments-skeleton-line-xs[b-dfe4zxhyvb] {
        width: min(8rem, 24%);
        margin-bottom: 0;
    }

    .payments-skeleton-table[b-dfe4zxhyvb] {
        margin-top: 1.25rem;
    }

    .payments-skeleton-row[b-dfe4zxhyvb] {
        padding: 1rem 0;
        border-top: 1px solid rgba(15, 23, 42, 0.06);
    }

    .payments-skeleton-row:first-child[b-dfe4zxhyvb] {
        border-top: 0;
        padding-top: 0.25rem;
    }

    /* On phones the skeleton mirrors the mobile card list, not the desktop table */
    @media (max-width: 991.98px) {
        .payments-skeleton-row[b-dfe4zxhyvb],
        .payments-skeleton-row:first-child[b-dfe4zxhyvb] {
            border: 1px solid rgba(15, 23, 42, 0.08);
            border-radius: 0.75rem;
            padding: 0.9rem;
            margin-bottom: 0.75rem;
        }

        .payments-skeleton-line-md[b-dfe4zxhyvb] {
            width: 70%;
        }

        .payments-skeleton-line-sm[b-dfe4zxhyvb] {
            width: 50%;
        }
    }

    @keyframes paymentsSkeletonPulse-b-dfe4zxhyvb {
        0% {
            background-position: 200% 0;
        }

        100% {
            background-position: -200% 0;
        }
    }

    /* Student Details Modal Styling */
    .student-details-modal .modal-dialog[b-dfe4zxhyvb] {
        max-width: 90vw;
    }

    .parent-card[b-dfe4zxhyvb] {
        transition: transform 0.2s;
        background: var(--surface);
    }

    .parent-card:hover[b-dfe4zxhyvb] {
        transform: translateY(-2px);
        box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    }

    .parent-info[b-dfe4zxhyvb] {
        line-height: 1.4;
    }

    .class-card[b-dfe4zxhyvb] {
        background: var(--surface);
        transition: transform 0.2s;
    }

    .class-card:hover[b-dfe4zxhyvb] {
        transform: translateY(-1px);
        box-shadow: 0 2px 6px rgba(0,0,0,0.1);
    }

    /* Student Name Link Styling */
    .student-name-link[b-dfe4zxhyvb] {
        cursor: pointer;
        transition: color 0.2s ease;
    }

    .student-name-link:hover[b-dfe4zxhyvb] {
        color: var(--bs-primary) !important;
        text-decoration: underline !important;
    }

    /* Dark mode support for student details modal — background flows through
       --surface (dark-aware); only the border needs a dark override. */
    [data-theme="dark"] .parent-card[b-dfe4zxhyvb] {
        border-color: var(--bs-gray-600) !important;
    }

    [data-theme="dark"] .class-card[b-dfe4zxhyvb] {
        border-color: var(--bs-gray-600) !important;
    }

    [data-theme="dark"] .parent-card:hover[b-dfe4zxhyvb] {
        box-shadow: 0 4px 8px rgba(0,0,0,0.3);
    }

    [data-theme="dark"] .class-card:hover[b-dfe4zxhyvb] {
        box-shadow: 0 2px 6px rgba(0,0,0,0.3);
    }

    /* Responsive adjustments for mobile */
    @media (max-width: 768px) {
        .student-details-modal .modal-dialog[b-dfe4zxhyvb] {
            max-width: 95vw !important;
        }

        .student-details-modal .modal-dialog-scrollable .modal-body[b-dfe4zxhyvb] {
            max-height: calc(100vh - 120px);
        }

        /* Stack student details cards on mobile */
        .student-details-modal .col-md-6[b-dfe4zxhyvb] {
            margin-bottom: 1rem;
        }

        .student-details-modal .modal-footer[b-dfe4zxhyvb] {
            flex-wrap: wrap;
        }

        .student-details-modal .modal-footer .btn[b-dfe4zxhyvb] {
            margin: 0.25rem;
            flex: 1;
            min-width: calc(50% - 0.5rem);
        }
    }

    /* Payment Edit Modal Responsive Styles */
    .payment-edit-modal[b-dfe4zxhyvb] {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
        z-index: 1055 !important;
    }

    /* Payment Note Modal Responsive Styles */
    .payment-note-modal[b-dfe4zxhyvb] {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
        z-index: 1055 !important;
    }

    .payment-export-modal[b-dfe4zxhyvb] {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
        z-index: 1055 !important;
    }

    .payment-export-summary-card[b-dfe4zxhyvb] {
        background: linear-gradient(180deg, var(--status-urgent-bg) 0%, var(--card-bg) 100%);
        border: 1px solid var(--status-urgent-bg);
        border-radius: 16px;
        padding: 16px;
        margin-bottom: 20px;
    }

    .payment-export-summary-title[b-dfe4zxhyvb] {
        font-size: 0.85rem;
        font-weight: 700;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: var(--status-urgent-fg);
        margin-bottom: 8px;
    }

    .payment-export-summary-meta[b-dfe4zxhyvb] {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
    }

    .payment-export-chip[b-dfe4zxhyvb] {
        display: inline-flex;
        align-items: center;
        padding: 6px 10px;
        border-radius: 999px;
        background: var(--card-bg);
        border: 1px solid var(--status-urgent-bg);
        color: var(--status-urgent-fg);
        font-size: 0.85rem;
        font-weight: 600;
    }

    /* Mobile-specific modal blocking */
    @media (max-width: 768px) {
        .payment-edit-modal[b-dfe4zxhyvb] {
            background-color: rgba(0,0,0,0.85) !important;
            z-index: 99999 !important;
        }

        .payment-note-modal[b-dfe4zxhyvb] {
            background-color: rgba(0,0,0,0.85) !important;
            z-index: 99999 !important;
        }

        .payment-export-modal[b-dfe4zxhyvb] {
            background-color: rgba(0,0,0,0.85) !important;
            z-index: 99999 !important;
        }

        .multi-month-modal[b-dfe4zxhyvb] {
            background-color: rgba(0,0,0,0.85) !important;
            z-index: 100000 !important;
            position: fixed !important;
            top: 0 !important;
            left: 0 !important;
            width: 100% !important;
            height: 100% !important;
        }

        /* Hide dropdowns and buttons on mobile when modal is open */
        .payment-edit-modal ~ * .dropdown-menu[b-dfe4zxhyvb],
        .payment-edit-modal ~ * .btn-group .dropdown-toggle[b-dfe4zxhyvb],
        .payment-note-modal ~ * .dropdown-menu[b-dfe4zxhyvb],
        .payment-note-modal ~ * .btn-group .dropdown-toggle[b-dfe4zxhyvb] {
            display: none !important;
            visibility: hidden !important;
            pointer-events: none !important;
        }

        /* Ensure modal dialog takes proper space on mobile */
        .payment-edit-modal .modal-dialog[b-dfe4zxhyvb] {
            margin: 0.5rem !important;
            max-height: calc(100vh - 1rem) !important;
        }

        .payment-edit-modal .modal-content[b-dfe4zxhyvb] {
            max-height: calc(100vh - 1rem) !important;
        }

        .payment-note-modal .modal-dialog[b-dfe4zxhyvb] {
            margin: 0.5rem !important;
            max-height: calc(100vh - 1rem) !important;
        }

        .payment-note-modal .modal-content[b-dfe4zxhyvb] {
            max-height: calc(100vh - 1rem) !important;
        }

        .payment-export-modal .modal-dialog[b-dfe4zxhyvb] {
            margin: 0.75rem !important;
            max-height: calc(100vh - 1.5rem) !important;
        }

        .payment-export-modal .modal-content[b-dfe4zxhyvb] {
            max-height: calc(100vh - 1.5rem) !important;
        }
    }

    /* Desktop keeps lighter overlay */
    @media (min-width: 769px) {
        .payment-edit-modal[b-dfe4zxhyvb] {
            background-color: rgba(0,0,0,0.5) !important;
        }

        .payment-note-modal[b-dfe4zxhyvb] {
            background-color: rgba(0,0,0,0.5) !important;
        }

        .payment-export-modal[b-dfe4zxhyvb] {
            background-color: rgba(0,0,0,0.5) !important;
        }
    }

    /* Additional mobile blocking when modal is open */
    body.modal-open-mobile .dropdown-toggle[b-dfe4zxhyvb],
    body.modal-open-mobile .btn-group[b-dfe4zxhyvb],
    body.modal-open-mobile .dropdown-menu[b-dfe4zxhyvb] {
        pointer-events: none !important;
        visibility: hidden !important;
    }

    /* Cash/Card payment-type toggle in the mark-paid modal. Deliberately NOT a
       .btn-group: the rule above hides every .btn-group while a mobile modal is
       open (to blank the background toolbar), which would hide this control
       inside the modal too. */
    .payment-type-toggle[b-dfe4zxhyvb] {
        display: flex;
        gap: 0.5rem;
        width: 100%;
    }

    .payment-type-toggle .btn[b-dfe4zxhyvb] {
        flex: 1 1 0;
    }

    /* Mobile Floating Action Button (FAB) */
    .mobile-fab[b-dfe4zxhyvb] {
        position: fixed;
        bottom: 20px;
        right: 20px;
        z-index: 1050;
    }

    .fab-button[b-dfe4zxhyvb] {
        width: 56px;
        height: 56px;
        border-radius: 50%;
        background: linear-gradient(135deg, var(--brand-600) 0%, var(--brand-700) 100%);
        color: white;
        border: none;
        box-shadow: 0 4px 12px rgba(var(--brand-rgb), 0.4), 0 2px 4px rgba(0, 0, 0, 0.2);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.5rem;
        cursor: pointer;
        transition: all 0.3s ease;
        animation: fabPulse-b-dfe4zxhyvb 2s infinite;
    }

    .fab-button:hover[b-dfe4zxhyvb],
    .fab-button:active[b-dfe4zxhyvb] {
        transform: scale(1.05);
        box-shadow: 0 6px 16px rgba(var(--brand-rgb), 0.5), 0 3px 6px rgba(0, 0, 0, 0.3);
    }

    .fab-button[aria-expanded="true"][b-dfe4zxhyvb] {
        animation: none;
        transform: rotate(45deg);
    }

    @keyframes fabPulse-b-dfe4zxhyvb {
        0%, 100% {
            box-shadow: 0 4px 12px rgba(var(--brand-rgb), 0.4), 0 2px 4px rgba(0, 0, 0, 0.2);
        }
        50% {
            box-shadow: 0 4px 16px rgba(var(--brand-rgb), 0.6), 0 2px 6px rgba(0, 0, 0, 0.3);
        }
    }

    .mobile-fab .dropdown-menu[b-dfe4zxhyvb] {
        min-width: 240px;
        max-width: 280px;
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25) !important;
        border-radius: 12px;
        border: none;
        padding: 0.5rem 0;
        margin-bottom: 8px !important;
    }

    .mobile-fab .dropdown-item[b-dfe4zxhyvb] {
        padding: 0.875rem 1.25rem;
        font-size: 0.95rem;
        transition: background-color 0.15s ease;
        white-space: normal;
        word-wrap: break-word;
    }

    .mobile-fab .dropdown-item:hover[b-dfe4zxhyvb] {
        background-color: var(--surface);
    }

    .mobile-fab .dropdown-item i[b-dfe4zxhyvb] {
        font-size: 1.1rem;
        width: 24px;
        text-align: center;
    }

    .mobile-fab .dropdown-divider[b-dfe4zxhyvb] {
        margin: 0.5rem 0;
    }

    .payments-infinite-scroll-sentinel[b-dfe4zxhyvb] {
        width: 100%;
        height: 1px;
    }

    /* Dark mode support for FAB — the gradient uses brand tokens (identical in
       both themes), so no raw-hex dark override is needed. */
    [data-theme="dark"] .mobile-fab .dropdown-menu[b-dfe4zxhyvb] {
        background-color: var(--bs-gray-700) !important;
        border-color: var(--bs-gray-600) !important;
    }

    [data-theme="dark"] .mobile-fab .dropdown-item[b-dfe4zxhyvb] {
        color: var(--bs-light) !important;
    }

    [data-theme="dark"] .mobile-fab .dropdown-item:hover[b-dfe4zxhyvb] {
        background-color: var(--bs-gray-600) !important;
    }

    /* Adjust FAB position when keyboard is visible on mobile */
    @media (max-width: 768px) and (max-height: 500px) {
        .mobile-fab[b-dfe4zxhyvb] {
            bottom: 10px;
            right: 10px;
        }

        .fab-button[b-dfe4zxhyvb] {
            width: 48px;
            height: 48px;
            font-size: 1.3rem;
        }
    }

    /* ── Bulk selection (desktop table) ─────────────────────────────────────── */
    .payments-select-col[b-dfe4zxhyvb] {
        width: 40px;
        text-align: center;
        padding-right: 0 !important;
    }
    .payments-select-col .form-check-input[b-dfe4zxhyvb] {
        cursor: pointer;
        margin: 0;
    }

    /* Sticky action bar that appears while rows are selected. Sticks to the
       bottom of the scrolling content pane; sits above the table rows. */
    .payments-bulk-bar[b-dfe4zxhyvb] {
        position: sticky;
        bottom: 0;
        z-index: 5;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 1rem;
        flex-wrap: wrap;
        margin-top: 0.5rem;
        padding: 0.75rem 1rem;
        background: var(--card-bg);
        border-top: 1px solid var(--border);
        box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.08);
    }
    .payments-bulk-summary[b-dfe4zxhyvb] {
        font-weight: 600;
        color: var(--text-color);
    }
    .payments-bulk-actions[b-dfe4zxhyvb] {
        display: flex;
        gap: 0.5rem;
        flex-shrink: 0;
    }

/* Attendance beside money: the "attended X of Y" pill for the row's billing month.
   One status pair per band (present / late / absent); no register = muted dash.
   As a <button> on desktop it is its own click target inside the clickable row. */
.attendance-pill[b-dfe4zxhyvb] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.15rem 0.55rem;
    border: 1px solid transparent;
    border-radius: var(--radius-full, 999px);
    font-size: var(--text-xs, 0.75rem);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    line-height: 1.4;
    white-space: nowrap;
    background: var(--surface);
    color: var(--text-muted);
    font-family: inherit;
    cursor: default;
}
button.attendance-pill[b-dfe4zxhyvb] { cursor: pointer; }
button.attendance-pill:hover[b-dfe4zxhyvb] { filter: brightness(0.96); }
button.attendance-pill:focus-visible[b-dfe4zxhyvb] { outline: 2px solid var(--primary); outline-offset: 2px; }

.attendance-pill--present[b-dfe4zxhyvb] { background: var(--status-present-bg); color: var(--status-present-fg); }
.attendance-pill--late[b-dfe4zxhyvb]    { background: var(--status-late-bg);    color: var(--status-late-fg); }
.attendance-pill--absent[b-dfe4zxhyvb]  { background: var(--status-absent-bg);  color: var(--status-absent-fg); }
.attendance-pill--none[b-dfe4zxhyvb]    { border-color: var(--border); border-style: dashed; }

/* Low-attendance lens chip: not a payment status, so it wears the absent pair, outlined at rest. */
.attendance-filter-chip[b-dfe4zxhyvb] {
    border: 1px solid var(--status-absent-fg);
    color: var(--status-absent-fg);
    background: transparent;
}
.attendance-filter-chip:hover[b-dfe4zxhyvb] { background: var(--status-absent-bg); color: var(--status-absent-fg); }
.attendance-filter-chip.is-active[b-dfe4zxhyvb] { background: var(--status-absent-bg); color: var(--status-absent-fg); font-weight: 600; }

/* The way back into the seen celebration receipt: split pill + dismiss, the same
   two-segment recipe as the reminder pill, in the brand palette. Retires with the
   lane; the X retires it for good. Theme-aware via --entity-brand-bg. */
.receipt-reopen-wrapper[b-dfe4zxhyvb] {
    display: inline-flex;
    align-items: stretch;
    max-width: 100%;
    margin: 0.25rem 0 1rem;
}

.receipt-reopen-pill[b-dfe4zxhyvb] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: var(--entity-brand-bg);
    border: 1px solid var(--border);
    border-right: none;
    border-radius: 999px 0 0 999px;
    padding: 0.45rem 0.9rem 0.45rem 1rem;
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.2;
    color: var(--text-color);
    cursor: pointer;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    min-height: 2.75rem; /* 44px touch target */
    text-align: left;
}

.receipt-reopen-pill:hover[b-dfe4zxhyvb],
.receipt-reopen-pill:focus-visible[b-dfe4zxhyvb] {
    border-color: var(--brand-600);
    box-shadow: 0 1px 6px rgba(var(--brand-rgb), 0.18);
    outline: none;
}

.receipt-reopen-pill .bi[b-dfe4zxhyvb] {
    font-size: 0.75rem;
    color: var(--brand-600);
    opacity: 0.85;
}

.receipt-reopen-dismiss[b-dfe4zxhyvb] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--entity-brand-bg);
    border: 1px solid var(--border);
    border-radius: 0 999px 999px 0;
    padding: 0 0.7rem;
    color: var(--text-muted);
    cursor: pointer;
    transition: border-color 0.15s ease, color 0.15s ease;
    min-height: 2.75rem;
}

.receipt-reopen-dismiss:hover[b-dfe4zxhyvb],
.receipt-reopen-dismiss:focus-visible[b-dfe4zxhyvb] {
    border-color: var(--brand-600);
    color: var(--text-color);
    outline: none;
}

/* Mobile: clear air between the pill and the toolbar/filter row beneath it. */
@media (max-width: 767.98px) {
    .receipt-reopen-wrapper[b-dfe4zxhyvb] {
        margin: 0.5rem 0 1.25rem;
    }
}

/* The desk changed what this bill asks for. Amber, not red: it is a normal
   thing to do, but it must not pass unnoticed. */
.collected-amount-amended[b-dfe4zxhyvb] {
    color: var(--warning);
    font-weight: 500;
}
/* _content/SchoolManagementApp/Pages/ReceiptView.razor.rz.scp.css */
/* Anonymous receipt page chrome: the document itself is the shared
   ReceiptSheet component (its styles live with it); this file only lays out
   the page around it. */

.receipt-view[b-5utcnqroro] {
    min-height: 100vh;
    background: var(--bs-body-bg);
    padding: 1.5rem 1rem 3rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

.receipt-card[b-5utcnqroro] {
    background: var(--bs-card-bg, var(--bs-body-bg));
    border: 1px solid var(--bs-border-color);
    border-radius: 1rem;
    padding: 2.5rem 1.5rem;
    max-width: 28rem;
    width: 100%;
    margin-top: 3rem;
}

.receipt-emoji[b-5utcnqroro] {
    font-size: 2.5rem;
    margin-bottom: 0.75rem;
}

.receipt-toolbar[b-5utcnqroro] {
    width: 100%;
    max-width: 42rem;
    display: flex;
    justify-content: flex-end;
}

@media print {
    .receipt-view[b-5utcnqroro] {
        padding: 0;
        background: #fff;
    }

    .no-print[b-5utcnqroro] {
        display: none !important;
    }
}
/* _content/SchoolManagementApp/Pages/RegistrationLinkPrint.razor.rz.scp.css */
/* Door poster for the registration link: screen chrome around one A4 sheet.
   Screen chrome comes from tokens; the sheet is white with black ink in both
   themes (a dark-mode admin still prints a light poster). */

.poster-page[b-2rnnrczrse] {
    min-height: 100vh;
    background: var(--bs-body-bg);
    padding: 1.25rem 1rem 3rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

.poster-empty[b-2rnnrczrse] {
    text-align: center;
    max-width: 28rem;
    margin-top: 3rem;
}

.poster-empty-emoji[b-2rnnrczrse] {
    font-size: 2.5rem;
    margin-bottom: 0.75rem;
}

/* Primary action first: the toolbar sits above the sheet, never below it. */
.poster-toolbar[b-2rnnrczrse] {
    width: 100%;
    max-width: 210mm;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.poster-toolbar-actions[b-2rnnrczrse] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.poster-toolbar-actions .btn[b-2rnnrczrse] {
    min-height: 44px;
}

.poster-sheet[b-2rnnrczrse] {
    width: 100%;
    max-width: 210mm;
    aspect-ratio: 210 / 297;
    background: var(--bs-white);
    color: var(--bs-black);
    border: 1px solid var(--bs-border-color);
    border-radius: 0.75rem;
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.08);
    padding: 8% 8% 5%;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    font-family: var(--font-sans);
}

.poster-head[b-2rnnrczrse] {
    margin-bottom: 4%;
}

.poster-eyebrow[b-2rnnrczrse] {
    font-size: 1.05rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--bs-primary);
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.poster-school[b-2rnnrczrse] {
    font-size: clamp(1.6rem, 4.5vw, 2.6rem);
    font-weight: 800;
    line-height: 1.15;
    margin: 0;
    overflow-wrap: anywhere;
}

.poster-headline[b-2rnnrczrse] {
    font-size: clamp(1.8rem, 6vw, 3.2rem);
    font-weight: 800;
    line-height: 1.1;
    margin: 0 0 5%;
}

.poster-qr[b-2rnnrczrse] {
    width: 62%;
    max-width: 120mm;
    margin: 0 auto 4%;
}

.poster-qr[b-2rnnrczrse]  svg {
    display: block;
    width: 100%;
    height: auto;
    shape-rendering: crispEdges;
}

.poster-instruction[b-2rnnrczrse] {
    font-size: clamp(1rem, 2.6vw, 1.35rem);
    line-height: 1.4;
    margin: 0 0 4%;
    max-width: 30ch;
}

.poster-url[b-2rnnrczrse] {
    margin-top: auto;
}

.poster-url-label[b-2rnnrczrse] {
    font-size: 0.95rem;
    color: var(--bs-gray-600);
    margin-bottom: 0.25rem;
}

.poster-url-value[b-2rnnrczrse] {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: clamp(0.85rem, 2.2vw, 1.15rem);
    overflow-wrap: anywhere;
}

.poster-foot[b-2rnnrczrse] {
    margin-top: 4%;
    font-size: 0.8rem;
    color: var(--bs-gray-600);
}

@media print {
    @page {
        size: A4 portrait;
        margin: 12mm;
    }

    .no-print[b-2rnnrczrse] {
        display: none !important;
    }

    .poster-page[b-2rnnrczrse] {
        min-height: 0;
        padding: 0;
        background: var(--bs-white);
        display: block;
    }

    .poster-sheet[b-2rnnrczrse] {
        max-width: none;
        width: 100%;
        min-height: calc(297mm - 24mm);
        aspect-ratio: auto;
        border: 0;
        border-radius: 0;
        box-shadow: none;
        padding: 6mm 4mm 0;
        break-inside: avoid;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    .poster-school[b-2rnnrczrse] { font-size: 2.6rem; }
    .poster-headline[b-2rnnrczrse] { font-size: 3.2rem; }
    .poster-qr[b-2rnnrczrse] { width: 120mm; max-width: none; }
    .poster-instruction[b-2rnnrczrse] { font-size: 1.35rem; }
    .poster-url-value[b-2rnnrczrse] { font-size: 1.15rem; }
}
/* _content/SchoolManagementApp/Pages/Rollover.razor.rz.scp.css */
/* Step indicator — token-based version of the FamilyRegistration wizard steps
   (that component's CSS is inline and hex-based; do not copy it verbatim). */
.wizard-steps[b-pk6p901dqh] {
    display: flex;
    justify-content: space-between;
    position: relative;
    max-width: 420px;
    margin: 0 auto;
}

.step[b-pk6p901dqh] {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    flex: 1;
}

.step-number[b-pk6p901dqh] {
    width: 32px;
    height: 32px;
    border-radius: var(--radius-full);
    border: 2px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    background: var(--surface);
    color: var(--text-muted);
    margin-bottom: 8px;
    transition: all 0.3s ease;
}

.step.active .step-number[b-pk6p901dqh] {
    border-color: var(--primary);
    background: var(--primary);
    color: #fff;
}

.step.completed .step-number[b-pk6p901dqh] {
    border-color: var(--success);
    background: var(--success);
    color: #fff;
}

.step-label[b-pk6p901dqh] {
    font-size: var(--text-sm);
    color: var(--text-muted);
    text-align: center;
}

.step.active .step-label[b-pk6p901dqh] {
    color: var(--primary);
    font-weight: 600;
}

.step.completed .step-label[b-pk6p901dqh] {
    color: var(--success);
}

.step[b-pk6p901dqh]::after {
    content: '';
    position: absolute;
    top: 16px;
    left: 60%;
    right: -40%;
    height: 2px;
    background: var(--border);
    z-index: -1;
}

.step:last-child[b-pk6p901dqh]::after {
    display: none;
}

.step.completed[b-pk6p901dqh]::after {
    background: var(--success);
}

/* Primary action cluster at the top (bottom-dead-zone rule). */
.rollover-actions[b-pk6p901dqh] {
    display: flex;
    gap: 0.5rem;
}

.rollover-actions .btn[b-pk6p901dqh] {
    min-height: 44px;
}

.rollover-class-card[b-pk6p901dqh] {
    margin-bottom: 0.75rem;
}

.rollover-student-row[b-pk6p901dqh] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.5rem 0;
    border-top: 1px solid var(--border);
    min-height: 44px;
}

.rollover-student-row:first-of-type[b-pk6p901dqh] {
    border-top: none;
}

.rollover-student-name[b-pk6p901dqh] {
    flex: 1 1 40%;
    min-width: 0;
    overflow-wrap: anywhere;
}

.rollover-student-row[b-pk6p901dqh]  .mobile-picker-select-shell {
    flex: 1 1 60%;
    max-width: 16rem;
}

.rollover-fee-badge[b-pk6p901dqh] {
    background: var(--entity-brand-bg);
    color: var(--entity-brand-fg);
    margin-left: 0.4rem;
}

.rollover-review-row[b-pk6p901dqh] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.4rem 0;
    border-top: 1px solid var(--border);
}

.rollover-review-row:first-of-type[b-pk6p901dqh] {
    border-top: none;
}

/* A fee change is a row plus the places that explain it. The wrapper owns the divider so
   the explanation sits inside the same entry rather than between two of them. */
.rollover-review-change[b-pk6p901dqh] {
    border-top: 1px solid var(--border);
}

.rollover-review-change:first-of-type[b-pk6p901dqh] {
    border-top: none;
}

.rollover-review-change > .rollover-review-row[b-pk6p901dqh] {
    border-top: none;
}

.rollover-review-cause[b-pk6p901dqh] {
    padding: 0 0 0.4rem 0.75rem;
    overflow-wrap: anywhere;
}

.rollover-success[b-pk6p901dqh] {
    max-width: 28rem;
    margin: 2rem auto;
}

.rollover-success-icon[b-pk6p901dqh] {
    font-size: 3rem;
    margin-bottom: 0.5rem;
}

.rollover-success-stats[b-pk6p901dqh] {
    margin: 1rem 0;
}

.rollover-success-stats li[b-pk6p901dqh] {
    padding: 0.2rem 0;
}

/* A review row an owner can tap to decide something. The row is the affordance — no
   edit button, no gear (card-tappable rule). Resets the button chrome and keeps the
   row's own layout. */
.rollover-review-tappable[b-pk6p901dqh] {
    width: 100%;
    background: none;
    border: 0;
    border-top: 1px solid var(--border);
    text-align: left;
    font: inherit;
    color: inherit;
    cursor: pointer;
}

.rollover-review-tappable:first-of-type[b-pk6p901dqh] {
    border-top: none;
}

.rollover-review-tappable:hover[b-pk6p901dqh],
.rollover-review-tappable:focus-visible[b-pk6p901dqh] {
    background: var(--surface-hover, transparent);
    outline: none;
}

.rollover-review-tappable:focus-visible[b-pk6p901dqh] {
    box-shadow: inset 0 0 0 2px var(--primary);
}

.rollover-review-cause.rollover-review-tappable[b-pk6p901dqh] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem;
    border-top: none;
    padding: 0.15rem 0 0.4rem 0.75rem;
}

.rollover-review-who[b-pk6p901dqh] {
    min-width: 0;
}

.rollover-review-price[b-pk6p901dqh] {
    flex-shrink: 0;
}

.rollover-review-place[b-pk6p901dqh] {
    min-width: 0;
    overflow-wrap: anywhere;
}

.rollover-review-place .badge[b-pk6p901dqh] {
    vertical-align: baseline;
}
/* _content/SchoolManagementApp/Pages/SchoolSettings.razor.rz.scp.css */
.school-settings-card[b-wpfb5267m3] {
    max-width: 720px;
}

/* ---- Card headers: icon tile + heading + action ---- */

.settings-card-header[b-wpfb5267m3] {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    margin-bottom: 1rem;
    flex-wrap: wrap;
}

.settings-card-heading[b-wpfb5267m3] {
    flex: 1 1 12rem;
    min-width: 0;
}

.settings-icon-tile[b-wpfb5267m3] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: var(--radius-md, 0.5rem);
    font-size: 1.1rem;
    flex: none;
}

.settings-icon-tile--brand[b-wpfb5267m3] {
    background: var(--entity-brand-bg);
    color: var(--entity-brand-fg);
}

.settings-icon-tile--teal[b-wpfb5267m3] {
    background: var(--entity-classes-bg, var(--entity-brand-bg));
    color: var(--entity-classes-fg, var(--entity-brand-fg));
}

.settings-save-btn[b-wpfb5267m3] {
    flex: none;
}

/* ---- Legend under the tappable month grid (the grid itself is the shared
   MonthGrid component) ---- */

.year-strip-legend[b-wpfb5267m3] {
    display: flex;
    gap: 1rem;
    margin-top: 0.5rem;
}

.legend-item[b-wpfb5267m3] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: var(--text-xs, 0.75rem);
    color: var(--text-muted);
}

.legend-swatch[b-wpfb5267m3] {
    width: 0.7rem;
    height: 0.7rem;
    border-radius: 3px;
    flex: none;
}

.legend-swatch--open[b-wpfb5267m3] {
    background: var(--entity-brand-bg);
    border: 1px solid var(--entity-brand-fg);
}

.legend-swatch--off[b-wpfb5267m3] {
    background: var(--surface);
    border: 1px dashed var(--border);
}

/* ---- Holidays list ---- */

.closure-list[b-wpfb5267m3] {
    list-style: none;
    margin: 0 0 1rem;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.closure-row[b-wpfb5267m3] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.6rem 0.75rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-md, 0.5rem);
    background: var(--card-bg);
}

.closure-row--past[b-wpfb5267m3] {
    opacity: 0.55;
}

.closure-date-chip[b-wpfb5267m3] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 3rem;
    padding: 0.3rem 0;
    border-radius: var(--radius-sm, 0.375rem);
    background: var(--entity-classes-bg, var(--entity-brand-bg));
    color: var(--entity-classes-fg, var(--entity-brand-fg));
    flex: none;
    line-height: 1.1;
}

.closure-date-day[b-wpfb5267m3] {
    font-weight: 700;
    font-size: 1.05rem;
}

.closure-date-month[b-wpfb5267m3] {
    font-size: var(--text-xs, 0.7rem);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.closure-row-text[b-wpfb5267m3] {
    flex: 1;
    min-width: 0;
    overflow-wrap: anywhere;
}

.closure-remove-btn[b-wpfb5267m3] {
    background: none;
    border: none;
    color: var(--text-muted);
    padding: 0.4rem 0.5rem;
    border-radius: var(--radius-sm, 0.375rem);
    cursor: pointer;
    flex: none;
    transition: color 0.15s ease, background 0.15s ease;
}

.closure-remove-btn:hover[b-wpfb5267m3] {
    color: var(--danger);
    background: var(--surface);
}

/* ---- Empty state + add panel ---- */

.closures-empty[b-wpfb5267m3] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 1rem 0.25rem;
}

.closures-empty-icon[b-wpfb5267m3] {
    font-size: 1.4rem;
}

.closure-add-panel[b-wpfb5267m3] {
    background: var(--surface);
    border-radius: var(--radius-md, 0.5rem);
    padding: 0.75rem;
}
/* _content/SchoolManagementApp/Pages/SeasonDetail.razor.rz.scp.css */
.season-stat-grid[b-ngray6b9gi] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
}

@media (min-width: 768px) {
    .season-stat-grid[b-ngray6b9gi] {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        max-width: 720px;
    }
}

.season-stat-value[b-ngray6b9gi] {
    font-weight: 700;
    font-size: var(--text-xl, 1.25rem);
    overflow-wrap: anywhere;
}

.season-month-table th[b-ngray6b9gi] {
    white-space: nowrap;
}

.season-closed-month td[b-ngray6b9gi] {
    color: var(--text-muted);
}

.season-closed-badge[b-ngray6b9gi] {
    background: var(--entity-brand-bg);
    color: var(--entity-brand-fg);
}

.season-data-view > summary[b-ngray6b9gi] {
    cursor: pointer;
    font-weight: 600;
    color: var(--text-color);
    padding: 0.25rem 0;
    list-style-position: inside;
}

.season-data-view > summary:hover[b-ngray6b9gi] {
    color: var(--primary);
}

/* Return confirmations: the season's outstanding work, so it sits above the charts
   and leads with the one number an owner can act on. Attention, not alarm — the
   brand accent, never a red alert, because nothing here has gone wrong. */
.season-returns-head[b-ngray6b9gi] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem 1rem;
    margin-bottom: 0.5rem;
}

.season-returns-headline[b-ngray6b9gi] {
    display: flex;
    align-items: baseline;
    gap: 0.4rem;
    padding: 0.25rem 0.7rem;
    border-radius: 999px;
    background: var(--entity-brand-bg);
    color: var(--entity-brand-fg);
}

.season-returns-count[b-ngray6b9gi] {
    font-weight: 700;
    font-size: var(--text-xl, 1.25rem);
    line-height: 1.1;
}

.season-returns-label[b-ngray6b9gi] {
    font-size: var(--text-sm, 0.875rem);
    font-weight: 600;
}

/* A season with families still to hear from gets a visible edge on the card. */
.season-returns--awaiting > .card[b-ngray6b9gi] {
    border-left: 3px solid var(--primary);
}

.season-return-card--selected[b-ngray6b9gi] {
    border-color: var(--primary) !important;
    box-shadow: 0 0 0 2px var(--focus-ring);
}

/* A season being prepared (ux §17a): the same brand accent as "Current", never an
   alarm, because nothing here has gone wrong — it simply has not started. */
.season-planned-badge[b-ngray6b9gi] {
    background: var(--entity-brand-bg);
    color: var(--entity-brand-fg);
}

/* Classes and prices: one row per class, the switch is the row's own control, and
   the editor opens underneath the row it belongs to. */
.season-plan-row[b-ngray6b9gi] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--border);
}

.season-plan-row:last-child[b-ngray6b9gi] {
    border-bottom: 0;
}

.season-plan-row--off .form-check-label[b-ngray6b9gi] {
    color: var(--text-muted);
}

.season-plan-main[b-ngray6b9gi] {
    flex: 1 1 auto;
    min-width: 0;
}

.season-plan-editor[b-ngray6b9gi] {
    padding: 0.75rem 1rem 1rem;
    border-bottom: 1px solid var(--border);
    background: var(--card-bg);
}
/* _content/SchoolManagementApp/Pages/Seasons.razor.rz.scp.css */
.season-card-list[b-8k6nu7n7qi] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    max-width: 640px;
}

.season-card[b-8k6nu7n7qi] {
    cursor: pointer;
    transition: transform 0.12s ease, box-shadow 0.12s ease;
}

.season-card:hover[b-8k6nu7n7qi],
.season-card:focus-visible[b-8k6nu7n7qi] {
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

/* A season being prepared: the same brand accent as "Current" (ux §17a). */
.season-planned-badge[b-8k6nu7n7qi] {
    background: var(--entity-brand-bg);
    color: var(--entity-brand-fg);
}
/* _content/SchoolManagementApp/Pages/Students.razor.rz.scp.css */
/* Wizard Progress Indicator */
.wizard-step[b-6t77cef8q8] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.wizard-step .step-number[b-6t77cef8q8] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background-color: var(--border);
    color: var(--text-muted);
    font-weight: 600;
    font-size: 14px;
}

.wizard-step.active .step-number[b-6t77cef8q8] {
    background-color: var(--primary);
    color: white;
}

.wizard-step.completed .step-number[b-6t77cef8q8] {
    background-color: var(--success);
    color: white;
}

.wizard-step .step-label[b-6t77cef8q8] {
    font-size: 14px;
    color: var(--text-muted);
    font-weight: 500;
}

.wizard-step.active .step-label[b-6t77cef8q8] {
    color: var(--primary);
    font-weight: 600;
}

.wizard-step.completed .step-label[b-6t77cef8q8] {
    color: var(--success);
}

.wizard-line[b-6t77cef8q8] {
    width: 40px;
    height: 2px;
    background-color: var(--border);
    margin: 0 4px;
}

/* Schedule Selection Step */
.schedule-selection-step[b-6t77cef8q8] {
    padding: 0;
}

.class-schedule-group[b-6t77cef8q8] {
    padding: 12px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background-color: var(--surface);
}

.schedule-checkboxes .form-check[b-6t77cef8q8] {
    padding: 8px 12px;
    border-radius: 6px;
    transition: background-color 0.2s;
}

.schedule-checkboxes .form-check:hover[b-6t77cef8q8] {
    background-color: var(--card-bg);
}

.schedule-checkboxes .form-check-input[b-6t77cef8q8] {
    margin-top: 0.4em;
}

.schedule-checkboxes .form-check-label[b-6t77cef8q8] {
    width: 100%;
    cursor: pointer;
    user-select: none;
}

/* Mobile Responsiveness */
@media (max-width: 768px) {
    .wizard-step .step-label[b-6t77cef8q8] {
        display: none !important;
    }

    .wizard-line[b-6t77cef8q8] {
        width: 20px;
    }

    .class-schedule-group[b-6t77cef8q8] {
        padding: 8px;
    }

    .schedule-checkboxes .form-check-label span[b-6t77cef8q8] {
        font-size: 0.875rem;
    }

    .schedule-checkboxes .form-check-label .badge[b-6t77cef8q8] {
        font-size: 0.75rem;
    }
}

/* ---- Migrated from inline <style> block ---- */
    /* Toolbar/Filter Controls Styling */
    .filter-controls[b-6t77cef8q8] {
        background-color: var(--surface) !important; /* Light grey background for light mode */
        border-radius: 8px;
    }

    .students-toolbar[b-6t77cef8q8] {
        display: flex;
        align-items: flex-end;
        gap: 0.75rem;
        flex-wrap: wrap;
    }

    .students-toolbar-group[b-6t77cef8q8] {
        display: flex;
        flex-direction: column;
        gap: 0.35rem;
        margin-bottom: 1rem;
        flex: 0 0 auto;
        min-width: 0;
    }

    .students-toolbar-search[b-6t77cef8q8] {
        flex: 1 1 0;
        min-width: 14rem;
    }

    .students-toolbar-class[b-6t77cef8q8] {
        width: 11rem;
    }

    .students-toolbar-year[b-6t77cef8q8] {
        width: 7rem;
    }

    .students-toolbar-status[b-6t77cef8q8] {
        width: 7.5rem;
    }

    .students-toolbar-action[b-6t77cef8q8] {
        width: auto;
    }

    /* Export PDF + Add a family are one flex item, so they wrap together and stay
       at the trailing edge. As separate items the search field's flex-grow ate the
       free space and pushed the primary action alone onto the next row. */
    .students-toolbar-actions[b-6t77cef8q8] {
        display: flex;
        align-items: flex-end;
        gap: 0.75rem;
        margin-left: auto;
    }

    .students-toolbar-label[b-6t77cef8q8] {
        margin-bottom: 0;
        font-size: 0.8rem;
        line-height: 1.2;
        color: var(--bs-gray-700);
        white-space: nowrap;
    }

    .students-toolbar-control[b-6t77cef8q8],
    .students-toolbar-button[b-6t77cef8q8] {
        height: 38px;
        font-size: 0.875rem;
    }

    .students-toolbar-button[b-6t77cef8q8] {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        white-space: nowrap;
        padding-inline: 0.9rem;
    }

    /* Split action ("Add a family" + the exceptional shapes). The sizing lives on
       the buttons, never on the group: .students-toolbar-button carries a button's
       own height and padding, and putting it on the wrapper padded the group while
       leaving the segments unsized. */
    .students-toolbar .students-toolbar-split[b-6t77cef8q8] {
        height: 38px;
    }

    /* The two segments never stack: a wrapped split button reads as two unrelated
       buttons, which is exactly what this control exists to avoid. */
    .students-toolbar-split[b-6t77cef8q8] {
        flex-wrap: nowrap;
    }

    /* A seam, because both segments are the same primary fill and the global caret
       strip (custom.css) leaves nothing to separate them visually. */
    .students-toolbar-split-toggle[b-6t77cef8q8] {
        padding-inline: 0.55rem;
        border-left: 1px solid rgba(255, 255, 255, 0.35);
    }

    /* One compact decision point for the common and advanced family flows.
       Outcome copy does the explaining; the primary path is visually suggested
       without hiding the comprehensive registration option. */
    .family-add-menu[b-6t77cef8q8] {
        width: 21rem;
        max-width: calc(100vw - 1.5rem);
        padding: 0.4rem;
    }

    .family-add-option[b-6t77cef8q8] {
        display: flex;
        align-items: flex-start;
        gap: 0.65rem;
        min-height: 60px;
        padding: 0.65rem;
        border-radius: 0.5rem;
        white-space: normal;
    }

    .family-add-option-recommended[b-6t77cef8q8] {
        background: color-mix(in srgb, var(--bs-primary) 8%, transparent);
    }

    .family-add-icon[b-6t77cef8q8] {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex: 0 0 2rem;
        width: 2rem;
        height: 2rem;
        border-radius: 50%;
        color: var(--bs-primary);
        background: color-mix(in srgb, var(--bs-primary) 12%, transparent);
    }

    .family-add-copy[b-6t77cef8q8] {
        display: flex;
        flex: 1 1 auto;
        min-width: 0;
        flex-direction: column;
        gap: 0.15rem;
    }

    .family-add-copy small[b-6t77cef8q8] {
        color: var(--bs-secondary-color);
        line-height: 1.3;
    }

    .family-add-title-row[b-6t77cef8q8] {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 0.5rem;
    }

    .family-add-time[b-6t77cef8q8] {
        flex: 0 0 auto;
        color: var(--bs-primary-text-emphasis);
        background: var(--bs-primary-bg-subtle);
    }

    .family-add-option-single[b-6t77cef8q8] {
        min-height: 54px;
    }

    @media (max-width: 767.98px) {
        .students-mobile-control[b-6t77cef8q8] {
            min-height: 44px;
        }

        /* The chevron segment is icon-only — keep it a real touch target. */
        .students-toolbar-split-toggle[b-6t77cef8q8] {
            min-width: 44px;
        }

        .students-mobile-icon-button[b-6t77cef8q8] {
            width: 44px;
            min-width: 44px;
            min-height: 44px;
            padding: 0;
        }
    }

    /* Dark Mode Styles */
    [data-theme="dark"] .page-content[b-6t77cef8q8] {
        background: transparent !important;
        color: var(--bs-light) !important;
    }

    [data-theme="dark"] h1[b-6t77cef8q8] {
        color: var(--bs-light) !important;
    }

    [data-theme="dark"] h5[b-6t77cef8q8] {
        color: var(--bs-light) !important;
    }

    [data-theme="dark"] h6[b-6t77cef8q8] {
        color: var(--bs-light) !important;
    }

    /* Cards Dark Mode */
    [data-theme="dark"] .card[b-6t77cef8q8] {
        background: var(--bs-gray-800) !important;
        border-color: var(--bs-gray-600) !important;
        color: var(--bs-light) !important;
    }

    [data-theme="dark"] .card-header[b-6t77cef8q8] {
        background: var(--bs-gray-700) !important;
        border-bottom-color: var(--bs-gray-600) !important;
        color: var(--bs-light) !important;
    }

    [data-theme="dark"] .card-body[b-6t77cef8q8] {
        background: var(--bs-gray-800) !important;
        color: var(--bs-light) !important;
    }

    [data-theme="dark"] .card-title[b-6t77cef8q8] {
        color: var(--bs-light) !important;
    }

    [data-theme="dark"] .card-text[b-6t77cef8q8] {
        color: var(--bs-gray-300) !important;
    }

    /* Form Controls Dark Mode */
    [data-theme="dark"] .form-label[b-6t77cef8q8] {
        color: var(--bs-light) !important;
    }

    [data-theme="dark"] .form-control[b-6t77cef8q8] {
        background-color: var(--bs-gray-700) !important;
        border-color: var(--bs-gray-600) !important;
        color: var(--bs-light) !important;
    }

    [data-theme="dark"] .form-control:focus[b-6t77cef8q8] {
        background-color: var(--bs-gray-700) !important;
        border-color: var(--bs-primary) !important;
        color: var(--bs-light) !important;
        box-shadow: 0 0 0 0.25rem var(--focus-ring) !important;
    }

    [data-theme="dark"] .form-control[b-6t77cef8q8]::placeholder {
        color: var(--bs-gray-400) !important;
    }

    [data-theme="dark"] .form-check-input[b-6t77cef8q8] {
        background-color: var(--bs-gray-700) !important;
        border-color: var(--bs-gray-600) !important;
    }

    [data-theme="dark"] .form-check-input:checked[b-6t77cef8q8] {
        background-color: var(--bs-primary) !important;
        border-color: var(--bs-primary) !important;
    }

    [data-theme="dark"] .form-check-input:focus[b-6t77cef8q8] {
        box-shadow: 0 0 0 0.25rem var(--focus-ring) !important;
    }

    [data-theme="dark"] .form-check-label[b-6t77cef8q8] {
        color: var(--bs-light) !important;
    }

    [data-theme="dark"] .input-group-text[b-6t77cef8q8] {
        background-color: var(--bs-gray-600) !important;
        border-color: var(--bs-gray-600) !important;
        color: var(--bs-light) !important;
    }

    /* Table Dark Mode */
    [data-theme="dark"] .table[b-6t77cef8q8] {
        color: var(--bs-light) !important;
        border-color: var(--bs-gray-600) !important;
    }

    [data-theme="dark"] .table th[b-6t77cef8q8] {
        background: var(--bs-gray-700) !important;
        color: var(--bs-light) !important;
        border-color: var(--bs-gray-600) !important;
    }

    [data-theme="dark"] .table td[b-6t77cef8q8] {
        background: var(--bs-gray-800) !important;
        color: var(--bs-light) !important;
        border-color: var(--bs-gray-600) !important;
    }

    [data-theme="dark"] .table-striped > tbody > tr:nth-of-type(odd) > td[b-6t77cef8q8] {
        background: var(--bs-gray-750) !important;
    }

    /* Text Colors Dark Mode */
    [data-theme="dark"] .text-muted[b-6t77cef8q8] {
        color: var(--bs-gray-400) !important;
    }

    [data-theme="dark"] .text-primary[b-6t77cef8q8] {
        color: var(--brand-400) !important;
    }

    [data-theme="dark"] .text-danger[b-6t77cef8q8] {
        color: var(--status-urgent-fg) !important;
    }

    [data-theme="dark"] small[b-6t77cef8q8] {
        color: var(--bs-gray-400) !important;
    }

    [data-theme="dark"] .small[b-6t77cef8q8] {
        color: var(--bs-gray-400) !important;
    }

    [data-theme="dark"] .fw-bold[b-6t77cef8q8] {
        color: var(--bs-light) !important;
    }

    [data-theme="dark"] .fw-semibold[b-6t77cef8q8] {
        color: var(--bs-light) !important;
    }

    /* Badges Dark Mode */
    [data-theme="dark"] .badge.bg-primary[b-6t77cef8q8] {
        background-color: var(--bs-primary) !important;
        color: white !important;
    }

    [data-theme="dark"] .badge.text-white[b-6t77cef8q8] {
        color: white !important;
    }

    [data-theme="dark"] .bg-light[b-6t77cef8q8] {
        background-color: var(--bs-gray-700) !important;
        color: var(--bs-light) !important;
    }

    /* Button Styling Dark Mode */
    [data-theme="dark"] .btn-outline-primary[b-6t77cef8q8] {
        border-color: var(--bs-primary) !important;
        color: var(--bs-primary) !important;
    }

    [data-theme="dark"] .btn-outline-primary:hover[b-6t77cef8q8] {
        background-color: var(--bs-primary) !important;
        border-color: var(--bs-primary) !important;
        color: white !important;
    }

    [data-theme="dark"] .btn-outline-danger[b-6t77cef8q8] {
        border-color: var(--danger) !important;
        color: var(--danger) !important;
    }

    [data-theme="dark"] .btn-outline-danger:hover[b-6t77cef8q8] {
        background-color: var(--danger) !important;
        border-color: var(--danger) !important;
        color: white !important;
    }

    [data-theme="dark"] .btn-outline-secondary[b-6t77cef8q8] {
        border-color: var(--bs-gray-500) !important;
        color: var(--bs-gray-300) !important;
    }

    [data-theme="dark"] .btn-outline-secondary:hover[b-6t77cef8q8] {
        background-color: var(--bs-gray-700) !important;
        border-color: var(--bs-gray-500) !important;
        color: var(--bs-light) !important;
    }

    /* Dropdown Dark Mode */
    [data-theme="dark"] .dropdown-menu[b-6t77cef8q8] {
        background-color: var(--bs-gray-800) !important;
        border-color: var(--bs-gray-600) !important;
    }

    [data-theme="dark"] .dropdown-item[b-6t77cef8q8] {
        color: var(--bs-light) !important;
    }

    [data-theme="dark"] .dropdown-item:hover[b-6t77cef8q8],
    [data-theme="dark"] .dropdown-item:focus[b-6t77cef8q8] {
        background-color: var(--bs-gray-700) !important;
        color: var(--bs-light) !important;
    }

    [data-theme="dark"] .dropdown-item.text-danger[b-6t77cef8q8] {
        color: var(--status-urgent-fg) !important;
    }

    [data-theme="dark"] .dropdown-item.text-danger:hover[b-6t77cef8q8],
    [data-theme="dark"] .dropdown-item.text-danger:focus[b-6t77cef8q8] {
        color: var(--status-urgent-fg) !important;
        background-color: var(--status-urgent-bg) !important;
    }

    /* Mobile Card Specific Styling */
    [data-theme="dark"] .student-mobile-card[b-6t77cef8q8] {
        background: var(--bs-gray-800) !important;
        border-color: var(--bs-gray-600) !important;
        color: var(--bs-light) !important;
    }

    [data-theme="dark"] .student-mobile-card .card-body[b-6t77cef8q8] {
        background: var(--bs-gray-800) !important;
        color: var(--bs-light) !important;
    }

    /* Filter Controls Styling */
    [data-theme="dark"] .filter-controls[b-6t77cef8q8] {
        background: var(--bs-gray-800) !important;
        color: var(--bs-light) !important;
    }

    [data-theme="dark"] .filter-summary[b-6t77cef8q8] {
        border-top: 1px solid var(--bs-gray-600);
        padding-top: 12px;
        margin-top: 12px;
    }

    /* Empty State Dark Mode */
    [data-theme="dark"] .text-center .text-muted[b-6t77cef8q8] {
        color: var(--bs-gray-400) !important;
    }

    /* Class Selection Highlighted Rows */
    [data-theme="dark"] .bg-light.rounded[b-6t77cef8q8] {
        background-color: var(--bs-gray-700) !important;
        color: var(--bs-light) !important;
    }

    /* Custom CSS variable for gray-750 since Bootstrap doesn't have it */
    :root[data-theme="dark"][b-6t77cef8q8] {
        --bs-gray-750: #374151;
    }

    /* Modal Dark Mode Styling */
    [data-theme="dark"] .modal-content[b-6t77cef8q8] {
        background-color: var(--bs-gray-800) !important;
        border-color: var(--bs-gray-600) !important;
        color: var(--bs-light) !important;
    }

    [data-theme="dark"] .modal-header[b-6t77cef8q8] {
        background-color: var(--bs-gray-700) !important;
        border-bottom-color: var(--bs-gray-600) !important;
        color: var(--bs-light) !important;
    }

    [data-theme="dark"] .modal-title[b-6t77cef8q8] {
        color: var(--bs-light) !important;
    }

    [data-theme="dark"] .modal-body[b-6t77cef8q8] {
        background-color: var(--bs-gray-800) !important;
        color: var(--bs-light) !important;
    }

    [data-theme="dark"] .modal-footer[b-6t77cef8q8] {
        background-color: var(--bs-gray-700) !important;
        border-top-color: var(--bs-gray-600) !important;
    }

    [data-theme="dark"] .btn-close[b-6t77cef8q8] {
        filter: invert(1) grayscale(100%) brightness(200%);
    }

    /* Modal specific alert styling */
    [data-theme="dark"] .modal .alert-warning[b-6t77cef8q8] {
        background-color: rgba(245, 158, 11, 0.1) !important;
        border-color: rgba(245, 158, 11, 0.3) !important;
        color: var(--status-overdue-fg) !important;
    }

    [data-theme="dark"] .modal .alert-heading[b-6t77cef8q8] {
        color: var(--status-overdue-fg) !important;
    }

    [data-theme="dark"] .modal .duplicate-suggestion[b-6t77cef8q8] {
        background-color: var(--bs-gray-700) !important;
        border: 1px solid var(--bs-gray-600) !important;
    }

    .export-summary-grid[b-6t77cef8q8] {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.75rem;
    }

    .export-summary-item[b-6t77cef8q8] {
        padding: 0.75rem;
        border: 1px solid var(--bs-border-color);
        border-radius: 0.75rem;
        background: var(--bs-light);
    }

    .export-summary-label[b-6t77cef8q8] {
        display: block;
        font-size: 0.8rem;
        font-weight: 600;
        color: var(--bs-secondary);
        margin-bottom: 0.2rem;
    }

    .export-summary-value[b-6t77cef8q8] {
        font-weight: 600;
        color: var(--bs-dark);
    }

    .export-column-chip[b-6t77cef8q8] {
        font-weight: 600;
        border: 1px solid var(--bs-border-color);
    }

    [data-theme="dark"] .export-summary-item[b-6t77cef8q8] {
        background: var(--bs-gray-700) !important;
        border-color: var(--bs-gray-600) !important;
    }

    [data-theme="dark"] .export-summary-label[b-6t77cef8q8] {
        color: var(--bs-gray-400) !important;
    }

    [data-theme="dark"] .export-summary-value[b-6t77cef8q8] {
        color: var(--bs-light) !important;
    }

    [data-theme="dark"] .export-column-chip[b-6t77cef8q8] {
        background: var(--bs-gray-700) !important;
        color: var(--bs-light) !important;
        border-color: var(--bs-gray-600) !important;
    }

    /* Below md the fullscreen-modal recipe in custom.css owns modal sizing; between
       md and lg keep modal-xl usable (Bootstrap would clamp it to 500px). */
    @media (max-width: 991.98px) and (min-width: 768px) {
        .modal-xl[b-6t77cef8q8] {
            max-width: 95vw !important;
        }
    }

    /* Responsive adjustments for mobile */
    @media (max-width: 768px) {
        [data-theme="dark"] .student-mobile-card[b-6t77cef8q8] {
            box-shadow: 0 2px 8px rgba(0,0,0,0.3);
        }

        .export-summary-grid[b-6t77cef8q8] {
            grid-template-columns: 1fr;
        }
    }

    /* Student details modal styling lives in Components/StudentDetailsModal.razor.css */

    /* Sortable column styling */
    .sortable[b-6t77cef8q8] {
        cursor: pointer;
        user-select: none;
        transition: background-color 0.2s;
    }

    .sortable:hover[b-6t77cef8q8] {
        background-color: rgba(0, 0, 0, 0.05);
    }

    [data-theme="dark"] .sortable:hover[b-6t77cef8q8] {
        background-color: rgba(255, 255, 255, 0.1);
    }
/* _content/SchoolManagementApp/Pages/Teachers.razor.rz.scp.css */
/* Page-scoped styles. The .accounts-guide arrival banner lives once in custom.css. */
/* _content/SchoolManagementApp/Pages/TeacherSchedule.razor.rz.scp.css */
    /* Mobile-First Teacher Schedule Styles */

    .classroom-filter-bar[b-paastetvys] {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 16px 20px;
        background: var(--surface);
        border: 1px solid var(--border);
        border-radius: 12px;
        margin-bottom: 20px;
        font-size: 0.9rem;
        color: var(--text-color);
        font-weight: 500;
        flex-wrap: wrap;
    }

    .filter-icon[b-paastetvys] {
        font-size: 1rem;
    }

    /* The classroom picker is a MobilePickerSelect child component, so its
       elements need ::deep to be reached from this scoped stylesheet. */
    .classroom-filter-bar[b-paastetvys]  .classroom-filter-picker {
        flex: 0 1 auto;
        min-width: 200px;
        max-width: 300px;
    }

    .classroom-filter-bar[b-paastetvys]  .filter-select {
        width: 100%;
        font-size: 0.9rem;
        cursor: pointer;
    }

    .classroom-filter-bar[b-paastetvys]  .filter-select:hover {
        border-color: var(--primary);
    }

    /* Filter-bar surface/border/text flow through tokens (which carry their own
       dark values), so no hand-written dark override is needed. Select colors
       come from the global light pin in custom.css. */

    .clear-filter-btn[b-paastetvys] {
        padding: 8px 16px;
        background: var(--danger);
        color: white;
        border: none;
        border-radius: 8px;
        font-size: 0.85rem;
        font-weight: 500;
        cursor: pointer;
        transition: all 0.2s ease;
        white-space: nowrap;
    }

    .clear-filter-btn:hover[b-paastetvys] {
        background: var(--status-urgent-solid);
        transform: translateY(-1px);
        box-shadow: 0 2px 8px rgba(239, 68, 68, 0.3);
    }

    .clear-filter-btn:active[b-paastetvys] {
        transform: translateY(0);
    }

    .loading-state[b-paastetvys] {
        text-align: center;
        padding: 60px 20px;
    }

    .loading-text[b-paastetvys] {
        margin-top: 16px;
        color: var(--text-muted);
        font-size: 0.9rem;
    }

    .skeleton-card[b-paastetvys] {
        position: relative;
        overflow: hidden;
    }

    .skeleton-card[b-paastetvys]::after {
        content: "";
        position: absolute;
        inset: 0;
        transform: translateX(-100%);
        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.5), transparent);
        animation: teacher-schedule-shimmer-b-paastetvys 1.6s infinite;
    }

    .skeleton-circle[b-paastetvys] {
        width: 3rem;
        height: 3rem;
        border-radius: 999px;
        background: rgba(255, 255, 255, 0.28);
        flex-shrink: 0;
    }

    .skeleton-line[b-paastetvys] {
        height: 0.85rem;
        border-radius: 999px;
        background: var(--border);
    }

    .skeleton-line-title[b-paastetvys] {
        width: 8rem;
        margin-bottom: 0.75rem;
    }

    .skeleton-line-subtitle[b-paastetvys] {
        width: 6rem;
    }

    .skeleton-line-subtitle.short[b-paastetvys] {
        width: 4.5rem;
    }

    .skeleton-line-time[b-paastetvys] {
        width: 5rem;
        margin-bottom: 0.75rem;
    }

    .skeleton-line-badge[b-paastetvys] {
        width: 5.5rem;
        margin-top: 0.9rem;
    }

    .schedule-overview-skeleton .overview-card[b-paastetvys] {
        align-items: center;
    }

    .skeleton-day-column .schedule-item[b-paastetvys] {
        min-height: 5.5rem;
    }

    @keyframes teacher-schedule-shimmer-b-paastetvys {
        100% {
            transform: translateX(100%);
        }
    }

    /* Schedule Overview */
    .schedule-overview[b-paastetvys] {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
        gap: 16px;
    }

    /* Decorative stat card: brand-purple fill (was a blue gradient). */
    .overview-card[b-paastetvys] {
        background: linear-gradient(135deg, var(--brand-600) 0%, var(--brand-700) 100%);
        color: white;
        border-radius: 12px;
        padding: 20px;
        display: flex;
        align-items: center;
        gap: 12px;
        box-shadow: 0 4px 12px rgba(var(--brand-rgb), 0.3);
    }

    .overview-icon[b-paastetvys] {
        font-size: 2rem;
        flex-shrink: 0;
    }

    .overview-content h3[b-paastetvys] {
        margin: 0 0 4px 0;
        font-size: 1.25rem;
        font-weight: 700;
    }

    .overview-content p[b-paastetvys] {
        margin: 0;
        opacity: 0.9;
        font-size: 0.9rem;
    }

    /* Today's Classes */
    .todays-classes h2[b-paastetvys] {
        color: var(--text-color);
        font-size: 1.25rem;
        font-weight: 600;
        margin-bottom: 16px;
    }

    .today-classes-grid[b-paastetvys] {
        display: flex;
        flex-direction: column;
        gap: 12px;
    }

    .today-class-card[b-paastetvys] {
        background: var(--card-bg);
        border-radius: 12px;
        padding: 16px;
        box-shadow: 0 2px 8px rgba(0,0,0,0.1);
        border-left: 4px solid var(--border);
        transition: all 0.2s ease;
    }

    /* Class state = status hue: current green (present), upcoming blue (pending),
       past grey. Solid status-*-bg tints carry their own dark values. */
    .today-class-card.current[b-paastetvys] {
        border-left-color: var(--success);
        background: var(--status-present-bg);
    }

    .today-class-card.upcoming[b-paastetvys] {
        border-left-color: var(--info);
        background: var(--status-pending-bg);
    }

    .today-class-card.past[b-paastetvys] {
        border-left-color: var(--text-muted);
        background: var(--surface);
        opacity: 0.7;
    }

    /* Inline register shortcut on today's cards. Full-width 44px target below the
       card's detail rows, so it never competes with the card's own tap zone. */
    .today-class-attendance-btn[b-paastetvys] {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        min-height: 44px;
        margin-top: 12px;
        padding: 0 12px;
        border: 1px solid var(--success);
        border-radius: var(--radius-md);
        background: transparent;
        color: var(--success);
        font-size: var(--text-sm);
        font-weight: 600;
        cursor: pointer;
        transition: background-color 0.15s ease, color 0.15s ease;
    }

    .today-class-attendance-btn:active[b-paastetvys],
    .today-class-attendance-btn:hover[b-paastetvys] {
        background: var(--success);
        color: #fff;
    }

    .today-class-attendance-btn:focus-visible[b-paastetvys] {
        outline: 2px solid var(--primary);
        outline-offset: 2px;
    }

    .class-time[b-paastetvys] {
        font-size: 1.1rem;
        font-weight: 700;
        color: var(--text-color);
        margin-bottom: 4px;
    }

    .class-name[b-paastetvys] {
        font-size: 1rem;
        font-weight: 600;
        color: var(--text-color);
        margin-bottom: 8px;
    }

    .status-badge[b-paastetvys] {
        font-size: 0.8rem;
        font-weight: 500;
        padding: 4px 8px;
        border-radius: 6px;
    }

    .status-badge.current[b-paastetvys] {
        background: var(--status-present-bg);
        color: var(--status-present-fg);
    }

    .status-badge.upcoming[b-paastetvys] {
        background: var(--status-pending-bg);
        color: var(--status-pending-fg);
    }

    .status-badge.past[b-paastetvys] {
        background: var(--surface);
        color: var(--text-muted);
    }

    .class-classroom[b-paastetvys] {
        margin-top: 8px;
        margin-bottom: 4px;
    }

    .classroom-badge[b-paastetvys] {
        font-size: 0.8rem;
        padding: 2px 6px;
        border-radius: 4px;
        font-weight: 500;
        display: inline-block;
    }

    /* "override" classroom = a decorative label, not status → brand. */
    .classroom-badge.override[b-paastetvys] {
        background: var(--primary);
        color: white;
    }

    .classroom-badge.default[b-paastetvys] {
        background: var(--text-muted);
        color: white;
    }

    .classroom-location[b-paastetvys] {
        font-size: 0.75rem;
        color: var(--text-muted);
        margin-left: 4px;
    }

    .class-notes[b-paastetvys] {
        font-size: 0.85rem;
        color: var(--text-muted);
        font-style: italic;
        margin-top: 8px;
    }

    .missing-students[b-paastetvys], .override-students[b-paastetvys] {
        font-size: 0.8rem;
        margin-top: 6px;
        padding: 4px 6px;
        border-radius: 4px;
    }

    .missing-students[b-paastetvys] {
        background: var(--status-urgent-bg);
        color: var(--status-urgent-fg);
    }

    .override-students[b-paastetvys] {
        background: var(--status-present-bg);
        color: var(--status-present-fg);
    }

    .missing-label[b-paastetvys], .override-label[b-paastetvys] {
        font-weight: 600;
    }

    /* Weekly Schedule */
    .weekly-schedule h2[b-paastetvys] {
        color: var(--text-color);
        font-size: 1.25rem;
        font-weight: 600;
        margin-bottom: 16px;
    }

    .week-grid[b-paastetvys] {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
        gap: 8px;
    }

    .day-column[b-paastetvys] {
        background: var(--card-bg);
        border-radius: 8px;
        padding: 12px 8px;
        box-shadow: 0 1px 3px rgba(0,0,0,0.1);
        border: 1px solid var(--border);
    }

    /* "today" = amber (warning), the app-wide today hue. */
    .day-column.today[b-paastetvys] {
        border-color: var(--warning);
        background: var(--status-overdue-bg);
    }

    .day-header[b-paastetvys] {
        text-align: center;
        margin-bottom: 8px;
        padding-bottom: 8px;
        border-bottom: 1px solid var(--border);
    }

    .day-header h4[b-paastetvys] {
        margin: 0 0 4px 0;
        font-size: 0.9rem;
        font-weight: 600;
        color: var(--text-color);
    }

    .today-indicator[b-paastetvys] {
        font-size: 0.7rem;
        background: var(--warning);
        color: white;
        padding: 2px 6px;
        border-radius: 4px;
        font-weight: 500;
    }

    /* A holiday closure covering this week's occurrence of the day */
    .day-column.day-off[b-paastetvys] {
        background: var(--surface);
        border-style: dashed;
    }

    .day-off-indicator[b-paastetvys] {
        font-size: 0.7rem;
        background: var(--entity-brand-bg);
        color: var(--entity-brand-fg);
        padding: 2px 6px;
        border-radius: 4px;
        font-weight: 500;
    }

    .day-off-note[b-paastetvys] {
        text-align: center;
        color: var(--text-muted);
        font-size: 0.8rem;
        font-style: italic;
        padding: 20px 0;
        overflow-wrap: anywhere;
    }

    .schedule-item[b-paastetvys] {
        margin-bottom: 8px;
        padding: 6px;
        background: var(--surface);
        border-radius: 4px;
        border-left: 2px solid var(--primary);
    }

    .schedule-item.has-overrides[b-paastetvys] {
        border-left-color: var(--warning);
        background: var(--status-overdue-bg);
    }

    .schedule-time[b-paastetvys] {
        font-size: 0.8rem;
        font-weight: 600;
        color: var(--primary);
    }

    .schedule-class[b-paastetvys] {
        font-size: 0.8rem;
        font-weight: 500;
        color: var(--text-color);
        margin: 2px 0;
    }

    .schedule-duration[b-paastetvys] {
        font-size: 0.7rem;
        color: var(--text-muted);
    }

    .schedule-missing[b-paastetvys], .schedule-override[b-paastetvys] {
        font-size: 0.65rem;
        margin-top: 2px;
        font-weight: 500;
    }

    .schedule-missing[b-paastetvys] {
        color: var(--danger);
    }

    .schedule-override[b-paastetvys] {
        color: var(--success);
    }

    .no-classes[b-paastetvys] {
        text-align: center;
        color: var(--text-muted);
        font-size: 0.8rem;
        font-style: italic;
        padding: 20px 0;
    }

    /* Upcoming Classes */
    .upcoming-schedule h2[b-paastetvys] {
        color: var(--text-color);
        font-size: 1.25rem;
        font-weight: 600;
        margin-bottom: 16px;
    }

    .upcoming-classes-list[b-paastetvys] {
        display: flex;
        flex-direction: column;
        gap: 8px;
    }

    .upcoming-class[b-paastetvys] {
        background: var(--card-bg);
        border-radius: 8px;
        padding: 12px;
        box-shadow: 0 1px 3px rgba(0,0,0,0.1);
        border: 1px solid var(--border);
        display: flex;
        align-items: center;
        gap: 12px;
        transition: all 0.2s ease;
    }

    .upcoming-class:hover[b-paastetvys] {
        border-color: var(--primary);
        box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    }

    .upcoming-class.today[b-paastetvys] {
        background: var(--status-overdue-bg);
        border-color: var(--warning);
    }

    .upcoming-class.tomorrow[b-paastetvys] {
        background: var(--status-pending-bg);
        border-color: var(--info);
    }

    .upcoming-class.this-week[b-paastetvys] {
        border-left: 3px solid var(--success);
    }

    .upcoming-date[b-paastetvys] {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 4px;
        min-width: 70px;
    }

    .date-badge[b-paastetvys] {
        font-weight: 600;
        font-size: 0.8rem;
        padding: 3px 8px;
        border-radius: 4px;
        background: var(--surface);
        color: var(--text-color);
        white-space: nowrap;
    }

    .date-badge.today[b-paastetvys] {
        background: var(--warning);
        color: white;
    }

    .date-badge.tomorrow[b-paastetvys] {
        background: var(--info);
        color: white;
    }

    .day-name[b-paastetvys] {
        font-size: 0.7rem;
        color: var(--text-muted);
        font-weight: 500;
    }

    .upcoming-details[b-paastetvys] {
        flex: 1;
    }

    .upcoming-class-name[b-paastetvys] {
        font-weight: 600;
        color: var(--text-color);
        margin-bottom: 4px;
    }

    .upcoming-time[b-paastetvys] {
        font-size: 0.85rem;
        color: var(--text-muted);
        margin-bottom: 4px;
    }

    .upcoming-notes[b-paastetvys] {
        font-size: 0.8rem;
        color: var(--text-muted);
        font-style: italic;
    }

    .upcoming-missing[b-paastetvys], .upcoming-override[b-paastetvys] {
        font-size: 0.75rem;
        margin-top: 4px;
        font-weight: 500;
    }

    .upcoming-missing[b-paastetvys] {
        color: var(--danger);
    }

    .upcoming-override[b-paastetvys] {
        color: var(--success);
    }

    /* Empty States */
    .no-upcoming[b-paastetvys], .no-classes-assigned[b-paastetvys] {
        text-align: center;
        padding: 60px 20px;
    }

    .no-upcoming-icon[b-paastetvys], .no-classes-icon[b-paastetvys] {
        font-size: 4rem;
        margin-bottom: 16px;
        opacity: 0.6;
    }

    .no-upcoming h4[b-paastetvys], .no-classes-assigned h3[b-paastetvys] {
        margin: 0 0 8px 0;
        color: var(--text-color);
    }

    .no-upcoming p[b-paastetvys], .no-classes-assigned p[b-paastetvys] {
        color: var(--text-muted);
        margin: 0;
        font-size: 0.95rem;
    }

    /* Dark Mode Styles
       Schedule surfaces, borders, text and status/entity accents now flow
       through tokens (which carry their own [data-theme="dark"] values), so the
       long hand-written dark block that merely re-stated those colours is gone.
       Only the couple of non-token structural rules remain. */
    [data-theme="dark"] .page-content[b-paastetvys] {
        background: transparent !important;
        color: var(--bs-light) !important;
    }

    [data-theme="dark"] h1[b-paastetvys] {
        color: var(--bs-light) !important;
    }

    /* Clickable Items */
    .clickable[b-paastetvys] {
        cursor: pointer;
        transition: all 0.2s ease;
    }

    .today-class-card.clickable:hover[b-paastetvys],
    .schedule-item.clickable:hover[b-paastetvys],
    .upcoming-class.clickable:hover[b-paastetvys] {
        transform: translateY(-2px);
        box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15) !important;
    }

    /* Attendees Modal */
    .modal-overlay[b-paastetvys] {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.5);
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 10000000;
        padding: 16px;
        padding-bottom: calc(var(--bottom-nav-height, 0px) + 16px);
        animation: fadeIn-b-paastetvys 0.2s ease;
    }

    @keyframes fadeIn-b-paastetvys {
        from { opacity: 0; }
        to { opacity: 1; }
    }

    /* The modal chrome flows through tokens (card-bg / border / text / surface /
       --status-* / entity-brand), which carry their own dark values — so it needs
       no hand-written [data-theme="dark"] overrides. */
    .modal-content[b-paastetvys] {
        background: var(--card-bg);
        border-radius: 16px;
        max-width: 600px;
        width: 100%;
        max-height: 85vh;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
        animation: slideUp-b-paastetvys 0.3s ease;
        color: var(--text-color);
    }

    @keyframes slideUp-b-paastetvys {
        from {
            transform: translateY(20px);
            opacity: 0;
        }
        to {
            transform: translateY(0);
            opacity: 1;
        }
    }

    .modal-header[b-paastetvys] {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 20px;
        border-bottom: 1px solid var(--border);
        position: sticky;
        top: 0;
        background: var(--card-bg);
        border-radius: 16px 16px 0 0;
        z-index: 1;
        flex-shrink: 0;
    }

    .modal-header h3[b-paastetvys] {
        margin: 0;
        color: var(--text-color);
        font-size: 1.25rem;
        font-weight: 700;
    }

    .close-btn[b-paastetvys] {
        background: none;
        border: none;
        font-size: 2rem;
        color: var(--text-muted);
        cursor: pointer;
        padding: 0;
        width: 32px;
        height: 32px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 4px;
        transition: all 0.2s ease;
    }

    .close-btn:hover[b-paastetvys] {
        background: var(--surface);
        color: var(--text-color);
    }

    .modal-body[b-paastetvys] {
        padding: 20px;
        overflow-y: auto;
        overscroll-behavior: contain;
        min-height: 0;
    }

    .attendees-info[b-paastetvys] {
        background: var(--status-pending-bg);
        border-radius: 12px;
        padding: 16px;
        margin-bottom: 20px;
        display: flex;
        flex-direction: column;
        gap: 8px;
    }

    .info-row[b-paastetvys] {
        color: var(--status-pending-fg);
        font-weight: 500;
        font-size: 0.9rem;
    }

    /* Primary action → brand (was a green gradient). */
    .take-attendance-btn[b-paastetvys] {
        background: var(--primary);
        color: white;
        border: none;
        border-radius: 8px;
        padding: 10px 20px;
        font-size: 0.95rem;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.2s ease;
        box-shadow: 0 2px 8px rgba(var(--brand-rgb), 0.3);
        width: 100%;
        margin-top: 4px;
    }

    .take-attendance-btn:hover[b-paastetvys] {
        background: var(--primary-hover);
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(var(--brand-rgb), 0.4);
    }

    .take-attendance-btn:active[b-paastetvys] {
        transform: translateY(0);
    }

    .attendees-grid[b-paastetvys] {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
        gap: 12px;
    }

    .attendee-card[b-paastetvys] {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 12px;
        background: var(--card-bg);
        border: 1px solid var(--border);
        border-radius: 8px;
        transition: all 0.2s ease;
    }

    .attendee-card:hover[b-paastetvys] {
        border-color: var(--brand-400);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    }

    /* Avatar icon-tile: same-hue tint + ink (was a blue gradient). */
    .attendee-avatar[b-paastetvys] {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        background: var(--entity-brand-bg);
        color: var(--entity-brand-fg);
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: 600;
        font-size: 0.9rem;
        flex-shrink: 0;
    }

    .attendee-details[b-paastetvys] {
        flex: 1;
        min-width: 0;
    }

    .attendee-name[b-paastetvys] {
        font-weight: 600;
        color: var(--text-color);
        font-size: 0.95rem;
    }

    .attendee-email[b-paastetvys] {
        font-size: 0.85rem;
        color: var(--text-muted);
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .modal-schedule-notes[b-paastetvys] {
        margin-top: 20px;
        padding-top: 16px;
        border-top: 1px solid var(--border);
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

    .modal-note[b-paastetvys] {
        padding: 12px;
        border-radius: 8px;
        font-size: 0.9rem;
        display: flex;
        flex-direction: column;
        gap: 4px;
    }

    .modal-note.missing[b-paastetvys] {
        background: var(--status-urgent-bg);
        border: 1px solid var(--status-urgent-bg);
    }

    .modal-note.override[b-paastetvys] {
        background: var(--status-paid-bg);
        border: 1px solid var(--status-paid-bg);
    }

    .modal-note .note-label[b-paastetvys] {
        font-weight: 600;
        color: var(--text-color);
    }

    .modal-note.missing .note-label[b-paastetvys] {
        color: var(--status-urgent-fg);
    }

    .modal-note.override .note-label[b-paastetvys] {
        color: var(--status-paid-fg);
    }

    .modal-note .note-value[b-paastetvys] {
        color: var(--text-muted);
        line-height: 1.5;
    }

    .no-attendees[b-paastetvys] {
        text-align: center;
        padding: 60px 20px;
    }

    .no-attendees-icon[b-paastetvys] {
        font-size: 3rem;
        margin-bottom: 16px;
        opacity: 0.6;
    }

    .no-attendees h4[b-paastetvys] {
        margin: 0 0 12px 0;
        color: var(--text-color);
        font-size: 1.25rem;
    }

    .no-attendees p[b-paastetvys] {
        color: var(--text-muted);
        margin: 0;
        font-size: 0.95rem;
    }

    /* Mobile Responsive */
    @media (max-width: 768px) {
        .classroom-filter-bar[b-paastetvys] {
            flex-direction: column;
            align-items: stretch;
            gap: 10px;
            padding: 12px 16px;
        }

        .classroom-filter-bar[b-paastetvys]  .classroom-filter-picker {
            width: 100%;
            max-width: none;
            min-width: unset;
        }

        .clear-filter-btn[b-paastetvys] {
            width: 100%;
        }

        .overview-card[b-paastetvys] {
            padding: 16px;
        }

        .overview-icon[b-paastetvys] {
            font-size: 1.5rem;
        }

        .overview-content h3[b-paastetvys] {
            font-size: 1.1rem;
        }

        .week-grid[b-paastetvys] {
            grid-template-columns: repeat(2, 1fr);
            gap: 6px;
        }

        .upcoming-class[b-paastetvys] {
            flex-direction: column;
            align-items: flex-start;
            gap: 8px;
        }

        .upcoming-date[b-paastetvys] {
            flex-direction: row;
            min-width: auto;
            gap: 8px;
            align-self: flex-start;
        }

        .today-classes-grid[b-paastetvys] {
            gap: 8px;
        }

        .today-class-card[b-paastetvys] {
            padding: 12px;
        }
    }

    @media (max-width: 480px) {
        .week-grid[b-paastetvys] {
            grid-template-columns: 1fr;
        }

        .schedule-overview[b-paastetvys] {
            grid-template-columns: 1fr;
        }

        .day-column[b-paastetvys] {
            padding: 10px;
        }

        .upcoming-class[b-paastetvys] {
            padding: 10px;
        }
    }
/* _content/SchoolManagementApp/Shared/MainLayout.razor.rz.scp.css */
/* MainLayout styles are now handled in custom.css */
/* This file is kept for compatibility but styles are moved to the main CSS file */
/* _content/SchoolManagementApp/Shared/MobileNavSheet.razor.rz.scp.css */
.mobile-nav-sheet-overlay[b-evct575t0g] {
    position: fixed;
    inset: 0;
    /* Must beat the support-chat bubble (2147483646, site.css) and ties with the
       Firefox bottom-nav override (2147483647, custom.css). The tie is broken by
       DOM order: this sheet is mounted AFTER the bottom nav in MainLayout. */
    z-index: 2147483647;
    background: rgba(17, 24, 39, 0.45);
    display: flex;
    align-items: flex-end;
    overscroll-behavior: contain;
    touch-action: none;
}

/* The sheet stays a light card in dark mode, matching the pinned-light
   convention of the app's popups and pickers. */
.mobile-nav-sheet[b-evct575t0g] {
    width: 100%;
    background: #ffffff;
    color: #111827;
    border-radius: 18px 18px 0 0;
    padding: 0 0.75rem calc(0.75rem + env(safe-area-inset-bottom, 0px));
    max-height: 92vh;
    max-height: 92dvh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 -12px 30px rgba(15, 23, 42, 0.25);
    animation: mobile-nav-sheet-up-b-evct575t0g 0.2s ease;
    touch-action: auto;
}

@keyframes mobile-nav-sheet-up-b-evct575t0g {
    from { transform: translateY(100%); }
    to { transform: translateY(0); }
}

.mobile-nav-sheet-header[b-evct575t0g] {
    flex-shrink: 0;
    background: #ffffff;
}

.mobile-nav-sheet-handle[b-evct575t0g] {
    width: 36px;
    height: 4px;
    border-radius: 2px;
    background: #d1d5db;
    margin: 0.45rem auto 0.25rem;
    flex-shrink: 0;
}

.mobile-nav-sheet-title-row[b-evct575t0g] {
    min-height: 52px;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0 0.25rem 0.25rem 0.5rem;
    border-bottom: 1px solid #e5e7eb;
}

.mobile-nav-sheet-title-row h2[b-evct575t0g] {
    flex: 1;
    min-width: 0;
    margin: 0;
    font-size: 1.125rem;
    font-weight: 700;
    color: #111827;
}

.mobile-nav-sheet-close[b-evct575t0g] {
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: #374151;
    font-size: 1.1rem;
}

.mobile-nav-sheet-close:active[b-evct575t0g] {
    background: #f3f4f6;
}

.mobile-nav-sheet-close:focus-visible[b-evct575t0g] {
    outline: 2px solid #2563eb;
    outline-offset: -2px;
}

.mobile-nav-sheet-items[b-evct575t0g] {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    display: flex;
    flex-direction: column;
    padding: 0.35rem 0 0.25rem;
}

/* The same collapsible section model as the desktop sidebar, with pinned-light
   colors because the sheet intentionally stays white in dark mode. */
.mobile-nav-sheet-group-heading[b-evct575t0g] {
    width: 100%;
    min-height: 48px;
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.65rem 0.75rem;
    margin: 2px 0;
    border: 0;
    border-radius: 12px;
    background: transparent;
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #6b7280;
    text-align: start;
}

.mobile-nav-sheet-group-heading:active[b-evct575t0g] {
    background: #f3f4f6;
}

.mobile-nav-sheet-group-heading:focus-visible[b-evct575t0g] {
    outline: 2px solid #2563eb;
    outline-offset: -2px;
}

.mobile-nav-sheet-group-heading > span:first-child[b-evct575t0g] {
    flex: 1;
    min-width: 0;
}

.mobile-nav-sheet-chevron[b-evct575t0g] {
    flex: none;
    font-size: 0.8rem;
    transition: transform 0.15s ease;
}

.mobile-nav-sheet-chevron.expanded[b-evct575t0g] {
    transform: rotate(180deg);
}

.mobile-nav-sheet-section-items[b-evct575t0g] {
    display: flex;
    flex-direction: column;
    padding-bottom: 0.25rem;
}

.mobile-nav-sheet-group-badge[b-evct575t0g] {
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    border-radius: 999px;
    background: #ef4444;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0;
    line-height: 1;
}

/* NavLink renders its own <a> without the scope attribute, so style it via
   ::deep from the scoped parent. */
.mobile-nav-sheet-items[b-evct575t0g]  .mobile-nav-sheet-item {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    min-height: 52px;
    padding: 0.5rem 0.75rem;
    border-radius: 12px;
    color: #111827;
    text-decoration: none;
    font-size: 1rem;
}

.mobile-nav-sheet-items[b-evct575t0g]  .mobile-nav-sheet-item.active {
    background: rgba(59, 130, 246, 0.12);
    font-weight: 600;
}

.mobile-nav-sheet-items[b-evct575t0g]  .mobile-nav-sheet-item:active {
    background: rgba(17, 24, 39, 0.06);
}

.mobile-nav-sheet-items[b-evct575t0g]  .mobile-nav-sheet-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    font-size: 22px;
    flex-shrink: 0;
}

.mobile-nav-sheet-items[b-evct575t0g]  .mobile-nav-sheet-icon img {
    width: 24px;
    height: 24px;
    object-fit: contain;
}

.mobile-nav-sheet-items[b-evct575t0g]  .mobile-nav-sheet-label {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mobile-nav-sheet-items[b-evct575t0g]  .mobile-nav-sheet-badge {
    background: #ef4444;
    color: #ffffff;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1;
    padding: 0.25rem 0.55rem;
    flex-shrink: 0;
}

:global([data-theme="dark"]) .mobile-nav-sheet[b-evct575t0g] {
    background: #ffffff;
    color: #111827;
}
/* _content/SchoolManagementApp/Shared/MonthGrid.razor.rz.scp.css */
.month-grid[b-0aa4jo898m] {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 4px;
    margin-top: 1rem;
}

.month-grid-cell[b-0aa4jo898m] {
    position: relative;
    text-align: center;
    padding: 0.4rem 0.1rem;
    /* Comfortable touch target on phones (≥44px). */
    min-height: 2.75rem;
    border: 0;
    border-radius: var(--radius-sm, 0.25rem);
    font-family: inherit;
    font-size: var(--text-xs, 0.75rem);
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}

.month-grid-cell.open[b-0aa4jo898m] {
    background: var(--entity-brand-bg);
    color: var(--entity-brand-fg);
}

.month-grid-cell.off[b-0aa4jo898m] {
    background: var(--surface);
    color: var(--text-muted);
    border: 1px dashed var(--border);
}

.month-grid-cell:hover:not(:disabled)[b-0aa4jo898m] {
    filter: brightness(0.96);
}

.month-grid-cell:focus-visible[b-0aa4jo898m] {
    outline: 2px solid var(--entity-brand-fg);
    outline-offset: 2px;
}

.month-grid-cell:disabled[b-0aa4jo898m] {
    cursor: default;
}

.month-grid-start-dot[b-0aa4jo898m] {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: currentColor;
    opacity: 0.7;
}

@media (max-width: 575px) {
    .month-grid[b-0aa4jo898m] {
        grid-template-columns: repeat(6, minmax(0, 1fr));
    }
}
/* _content/SchoolManagementApp/Shared/PageHeader.razor.rz.scp.css */
.page-header[b-i5ksoxy0vc] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}

.page-header-back[b-i5ksoxy0vc] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    border-radius: var(--radius-md);
    color: var(--text-color);
    background: var(--surface);
    border: 1px solid var(--border);
    font-size: 1.1rem;
    text-decoration: none;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.page-header-back:hover[b-i5ksoxy0vc] {
    background: var(--brand-50);
    border-color: var(--brand-400);
    color: var(--primary);
}

.page-header-titles[b-i5ksoxy0vc] {
    flex: 1;
    min-width: 0;
}

.page-header-title[b-i5ksoxy0vc] {
    font-size: var(--text-2xl);
    font-weight: 700;
    margin: 0;
    color: var(--text-color);
    line-height: 1.2;
}

.page-header-subtitle[b-i5ksoxy0vc] {
    font-size: var(--text-sm);
    color: var(--text-muted);
    margin: 0.15rem 0 0;
}

.page-header-actions[b-i5ksoxy0vc] {
    flex-shrink: 0;
    display: flex;
    gap: 0.5rem;
    align-items: center;
}
/* _content/SchoolManagementApp/Shared/QuickSearch.razor.rz.scp.css */
/* Top-anchored overlay: the bottom of a phone screen belongs to the nav and the
   support-chat bubble (mobile dead-zone rule), so input and results flow from
   the top. Same z-index tier and pinned-light card convention as the More sheet. */
.quick-search-overlay[b-vco0rcfe6e] {
    position: fixed;
    inset: 0;
    z-index: 2147483647;
    background: rgba(17, 24, 39, 0.45);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    overscroll-behavior: contain;
}

.quick-search-panel[b-vco0rcfe6e] {
    width: min(560px, 100%);
    margin: 0 0.5rem;
    background: #ffffff;
    color: #111827;
    border-radius: 0 0 18px 18px;
    padding: 0.5rem 0.75rem 0.75rem;
    max-height: 70vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 12px 30px rgba(15, 23, 42, 0.25);
}

@media (min-width: 768px) {
    .quick-search-panel[b-vco0rcfe6e] {
        margin-top: 10vh;
        border-radius: 18px;
    }
}

.quick-search-input-row[b-vco0rcfe6e] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    border: 1px solid #d1d5db;
    border-radius: 12px;
    padding: 0.25rem 0.6rem;
}

.quick-search-input-row:focus-within[b-vco0rcfe6e] {
    border-color: var(--primary);
}

.quick-search-input-icon[b-vco0rcfe6e] {
    color: #6b7280;
    flex-shrink: 0;
}

.quick-search-input[b-vco0rcfe6e] {
    flex: 1;
    min-width: 0;
    border: none;
    outline: none;
    background: transparent;
    color: #111827;
    font-size: 1rem;
    min-height: 44px;
}

.quick-search-close[b-vco0rcfe6e] {
    border: none;
    background: none;
    color: #6b7280;
    min-width: 44px;
    min-height: 44px;
    border-radius: 12px;
}

.quick-search-close:active[b-vco0rcfe6e] {
    background: rgba(17, 24, 39, 0.06);
}

.quick-search-hint[b-vco0rcfe6e] {
    color: #6b7280;
    font-size: var(--text-sm, 0.875rem);
    margin: 0.75rem 0.25rem 0.25rem;
}

.quick-search-results[b-vco0rcfe6e] {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    display: flex;
    flex-direction: column;
    padding-top: 0.25rem;
}

.quick-search-group-heading[b-vco0rcfe6e] {
    padding: 6px 0.75rem 2px;
    margin-top: 10px;
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #6b7280;
}

.quick-search-group-heading:first-child[b-vco0rcfe6e] {
    margin-top: 0;
}

.quick-search-result[b-vco0rcfe6e] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    min-height: 48px;
    padding: 0.5rem 0.75rem;
    border: none;
    border-radius: 12px;
    background: none;
    color: #111827;
    text-align: left;
    font-size: 1rem;
}

.quick-search-result-icon[b-vco0rcfe6e] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    border-radius: 9px;
    background: rgba(var(--brand-rgb), 0.08);
    color: var(--primary);
}

.quick-search-result-copy[b-vco0rcfe6e] {
    display: flex;
    flex: 1;
    min-width: 0;
    flex-direction: column;
    gap: 1px;
}

.quick-search-result.active[b-vco0rcfe6e],
.quick-search-result:hover[b-vco0rcfe6e] {
    background: rgba(var(--brand-rgb), 0.1);
}

.quick-search-result-title[b-vco0rcfe6e] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.quick-search-result-subtitle[b-vco0rcfe6e] {
    color: #6b7280;
    font-size: var(--text-sm, 0.875rem);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.quick-search-enter-hint[b-vco0rcfe6e] {
    flex: 0 0 auto;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    background: #ffffff;
    color: #6b7280;
    padding: 1px 6px;
    font-size: var(--text-xs, 0.75rem);
}

/* Pinned light in dark mode, like the More sheet. */
:global([data-theme="dark"]) .quick-search-panel[b-vco0rcfe6e] {
    background: #ffffff;
    color: #111827;
}
/* _content/SchoolManagementApp/Shared/SchoolClosedBanner.razor.rz.scp.css */
.school-closed-banner[b-a1bzzd7zrn] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    margin-bottom: 1rem;
    border-radius: var(--radius-md, 0.5rem);
    background: var(--entity-brand-bg);
    color: var(--entity-brand-fg);
}

.school-closed-icon[b-a1bzzd7zrn] {
    font-size: 1.25rem;
    line-height: 1;
    flex: none;
}

.school-closed-detail[b-a1bzzd7zrn] {
    display: block;
    font-size: var(--text-sm, 0.875rem);
}