/* /Areas/Academic/Pages/ClassTeacher/Attendance/Index.razor.rz.scp.css */
.attendance-page[b-ykpuovlh9m] {
    max-width: 1200px;
    margin: 0 auto;
}

.page-header[b-ykpuovlh9m] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 1.5rem;
}

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

.page-subtitle[b-ykpuovlh9m] {
    color: var(--text-muted);
    font-size: 0.95rem;
}

/* Cards */
.card[b-ykpuovlh9m] {
    background: var(--card-gradient);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 1.25rem;
    margin-bottom: 1rem;
}

/* Date Selector */
.date-selector[b-ykpuovlh9m] {
    background: var(--bg-secondary);
}

.date-picker-row[b-ykpuovlh9m] {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.date-label[b-ykpuovlh9m] {
    font-weight: 600;
    color: var(--text-primary);
}

.date-input[b-ykpuovlh9m] {
    padding: 0.6rem 1rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--bg-primary);
    color: var(--text-primary);
    font-size: 0.95rem;
    min-width: 180px;
}

.date-input:focus[b-ykpuovlh9m] {
    outline: none;
    border-color: var(--brand-blue);
}

/* Buttons */
.btn[b-ykpuovlh9m] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.6rem 1.25rem;
    border-radius: var(--radius-md);
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    border: none;
}

.btn-primary[b-ykpuovlh9m] {
    background: var(--brand-blue);
    color: white;
}

.btn-primary:hover:not(:disabled)[b-ykpuovlh9m] {
    background: #2563eb;
}

.btn-success[b-ykpuovlh9m] {
    background: #10b981;
    color: white;
}

.btn-success:hover:not(:disabled)[b-ykpuovlh9m] {
    background: #059669;
}

.btn-outline[b-ykpuovlh9m] {
    background: transparent;
    border: 1px solid var(--border);
    color: var(--text-primary);
}

.btn-outline:hover[b-ykpuovlh9m] {
    background: var(--bg-secondary);
}

.btn-lg[b-ykpuovlh9m] {
    padding: 0.85rem 2rem;
    font-size: 1rem;
}

.btn:disabled[b-ykpuovlh9m] {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Alerts */
.alert[b-ykpuovlh9m] {
    padding: 1rem 1.25rem;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
    font-size: 0.9rem;
}

.alert-error[b-ykpuovlh9m] {
    background: #fef2f2;
    color: #991b1b;
    border-left: 3px solid #ef4444;
}

.alert-success[b-ykpuovlh9m] {
    background: #f0fdf4;
    color: #166534;
    border-left: 3px solid #10b981;
}

.alert-warning[b-ykpuovlh9m] {
    background: #fffbeb;
    color: #92400e;
    border-left: 3px solid #f59e0b;
}

.alert-info[b-ykpuovlh9m] {
    background: #eff6ff;
    color: #1e40af;
    border-left: 3px solid #3b82f6;
}

/* Actions Card */
.actions-card[b-ykpuovlh9m] {
    background: var(--bg-secondary);
}

.actions-row[b-ykpuovlh9m] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
}

.attendance-summary[b-ykpuovlh9m] {
    display: flex;
    gap: 1.25rem;
    flex-wrap: wrap;
}

.summary-item[b-ykpuovlh9m] {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.9rem;
    font-weight: 600;
}

.summary-item.present[b-ykpuovlh9m] {
    color: #10b981;
}

.summary-item.absent[b-ykpuovlh9m] {
    color: #ef4444;
}

.summary-item.leave[b-ykpuovlh9m] {
    color: #f59e0b;
}

.summary-item.unmarked[b-ykpuovlh9m] {
    color: var(--text-muted);
}

.action-buttons[b-ykpuovlh9m] {
    display: flex;
    gap: 0.75rem;
}

/* Students Table */
.students-table-container[b-ykpuovlh9m] {
    overflow-x: auto;
}

.students-table[b-ykpuovlh9m] {
    width: 100%;
    border-collapse: collapse;
}

.students-table th[b-ykpuovlh9m],
.students-table td[b-ykpuovlh9m] {
    padding: 0.85rem 1rem;
    text-align: left;
    border-bottom: 1px solid var(--border);
}

.students-table th[b-ykpuovlh9m] {
    background: var(--bg-secondary);
    font-weight: 600;
    font-size: 0.85rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.students-table tbody tr:hover[b-ykpuovlh9m] {
    background: var(--bg-secondary);
}

.col-sr[b-ykpuovlh9m] {
    width: 100px;
}

.col-name[b-ykpuovlh9m] {
    min-width: 200px;
}

.col-father[b-ykpuovlh9m] {
    min-width: 180px;
}

.col-status[b-ykpuovlh9m] {
    width: 160px;
}

/* Row Highlighting */
.row-present[b-ykpuovlh9m] {
    background: rgba(16, 185, 129, 0.05);
}

.row-absent[b-ykpuovlh9m] {
    background: rgba(239, 68, 68, 0.05);
}

.row-leave[b-ykpuovlh9m] {
    background: rgba(245, 158, 11, 0.05);
}

/* Status Buttons */
.status-buttons[b-ykpuovlh9m] {
    display: flex;
    gap: 0.35rem;
}

.status-btn[b-ykpuovlh9m] {
    width: 38px;
    height: 38px;
    border-radius: var(--radius-sm);
    border: 2px solid var(--border);
    background: var(--bg-primary);
    color: var(--text-muted);
    font-weight: 700;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.15s ease;
}

.status-btn:hover[b-ykpuovlh9m] {
    border-color: var(--brand-blue);
    color: var(--brand-blue);
}

.status-btn.active.present[b-ykpuovlh9m] {
    background: #10b981;
    border-color: #10b981;
    color: white;
}

.status-btn.active.absent[b-ykpuovlh9m] {
    background: #ef4444;
    border-color: #ef4444;
    color: white;
}

.status-btn.active.leave[b-ykpuovlh9m] {
    background: #f59e0b;
    border-color: #f59e0b;
    color: white;
}

/* Bottom Actions */
.bottom-actions[b-ykpuovlh9m] {
    display: flex;
    justify-content: center;
    padding: 1.5rem 0;
}

/* Loading */
.loading-container[b-ykpuovlh9m] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem;
    color: var(--text-muted);
}

.spinner[b-ykpuovlh9m] {
    width: 40px;
    height: 40px;
    border: 3px solid var(--border);
    border-top-color: var(--brand-blue);
    border-radius: 50%;
    animation: spin-b-ykpuovlh9m 0.8s linear infinite;
    margin-bottom: 1rem;
}

.spinner-sm[b-ykpuovlh9m] {
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: white;
    border-radius: 50%;
    animation: spin-b-ykpuovlh9m 0.6s linear infinite;
}

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

/* Responsive */
@media (max-width: 768px) {
    .page-header[b-ykpuovlh9m] {
        flex-direction: column;
        gap: 1rem;
    }

    .date-picker-row[b-ykpuovlh9m] {
        flex-direction: column;
        align-items: stretch;
    }

    .date-input[b-ykpuovlh9m] {
        width: 100%;
    }

    .actions-row[b-ykpuovlh9m] {
        flex-direction: column;
        align-items: stretch;
    }

    .attendance-summary[b-ykpuovlh9m] {
        justify-content: center;
    }

    .action-buttons[b-ykpuovlh9m] {
        justify-content: center;
    }

    .col-father[b-ykpuovlh9m] {
        display: none;
    }

    .status-btn[b-ykpuovlh9m] {
        width: 34px;
        height: 34px;
        font-size: 0.8rem;
    }
}
/* /Areas/Academic/Pages/ClassTeacher/Attendance/Overview.razor.rz.scp.css */
/* Page Container */
.overview-container[b-pdr8d1zpuo] {
    min-height: 100vh;
    padding: 2rem;
}

/* Header Section */
.overview-header[b-pdr8d1zpuo] {
    border-radius: 12px;
    padding: 1.5rem 2rem;
    margin-bottom: 2rem;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    background: var(--card-gradient, white);
}

.overview-title[b-pdr8d1zpuo] {
    font-size: 1.75rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.overview-subtitle[b-pdr8d1zpuo] {
    font-size: 0.938rem;
    color: var(--text-muted);
}

/* Quick Stats */
.quick-stats[b-pdr8d1zpuo] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
    margin-bottom: 2rem;
}

.stat-card[b-pdr8d1zpuo] {
    border-radius: 12px;
    padding: 1.5rem;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    transition: all 0.3s ease;
    background: var(--card-gradient, white);
}

.stat-card:hover[b-pdr8d1zpuo] {
    transform: translateY(-4px);
    box-shadow: 0 6px 16px rgba(0,0,0,0.12);
}

.stat-icon[b-pdr8d1zpuo] {
    width: 48px;
    height: 48px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    margin-bottom: 1rem;
}

.stat-value[b-pdr8d1zpuo] {
    font-size: 1.875rem;
    font-weight: 700;
    margin-bottom: 0.25rem;
    color: var(--text-primary);
}

.stat-label[b-pdr8d1zpuo] {
    font-size: 0.813rem;
    font-weight: 500;
    color: var(--text-muted);
}

/* Tab Navigation */
.tabs-container[b-pdr8d1zpuo] {
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    overflow: hidden;
    background: var(--card-gradient, white);
}

.tabs-nav[b-pdr8d1zpuo] {
    display: flex;
    overflow-x: auto;
    scrollbar-width: thin;
    border-bottom: 1px solid var(--border);
}

.tab-button[b-pdr8d1zpuo] {
    flex: 1;
    min-width: 180px;
    padding: 1rem 1.5rem;
    background: transparent;
    border: none;
    font-weight: 600;
    font-size: 0.938rem;
    cursor: pointer;
    transition: all 0.3s ease;
    border-bottom: 3px solid transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    color: var(--text-muted);
}

.tab-button:hover[b-pdr8d1zpuo] {
    color: #3b82f6;
    background: var(--bg-secondary);
}

.tab-button.active[b-pdr8d1zpuo] {
    color: #3b82f6;
    border-bottom-color: #3b82f6;
}

.tab-content[b-pdr8d1zpuo] {
    display: none;
    padding: 2rem;
    animation: fadeIn-b-pdr8d1zpuo 0.3s ease;
}

.tab-content.active[b-pdr8d1zpuo] {
    display: block;
}

@keyframes fadeIn-b-pdr8d1zpuo {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Chart Cards */
.chart-card[b-pdr8d1zpuo] {
    border-radius: 12px;
    padding: 1.5rem;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    margin-bottom: 1.5rem;
    background: var(--bg-secondary, #f8fafc);
}

.chart-title[b-pdr8d1zpuo] {
    font-size: 1.125rem;
    font-weight: 700;
    margin-bottom: 1.5rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--text-primary);
}

/* Performance Breakdown Row */
.performance-breakdown[b-pdr8d1zpuo] {
    margin-top: 1.5rem;
    display: flex;
    gap: 1rem;
}

.performance-breakdown .stat-card[b-pdr8d1zpuo] {
    flex: 1;
}

/* Student Lists */
.student-list[b-pdr8d1zpuo] {
    border-radius: 12px;
    padding: 0;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    overflow: hidden;
    background: var(--card-gradient, white);
}

.list-header[b-pdr8d1zpuo] {
    padding: 1rem 1.5rem;
    font-weight: 700;
    font-size: 1.125rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--text-primary);
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border);
}

.student-item[b-pdr8d1zpuo] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.5rem;
    border-bottom: 1px solid var(--border);
    transition: background 0.2s ease;
    gap: 1rem;
}

.student-item:last-child[b-pdr8d1zpuo] {
    border-bottom: none;
}

.student-item:hover[b-pdr8d1zpuo] {
    background: var(--bg-secondary);
}

.student-rank[b-pdr8d1zpuo] {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: linear-gradient(135deg, #3b82f6, #2563eb);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.938rem;
    margin-right: 1rem;
    flex-shrink: 0;
}

.student-rank.gold[b-pdr8d1zpuo] {
    background: linear-gradient(135deg, #fbbf24, #f59e0b);
}

.student-rank.silver[b-pdr8d1zpuo] {
    background: linear-gradient(135deg, #94a3b8, #64748b);
}

.student-rank.bronze[b-pdr8d1zpuo] {
    background: linear-gradient(135deg, #fb923c, #f97316);
}

.student-info[b-pdr8d1zpuo] {
    flex: 1;
    min-width: 0;
}

.student-name[b-pdr8d1zpuo] {
    font-weight: 600;
    font-size: 0.938rem;
    margin-bottom: 0.25rem;
    color: var(--text-primary);
}

.student-details[b-pdr8d1zpuo] {
    font-size: 0.813rem;
    color: var(--text-muted);
}

.student-metric[b-pdr8d1zpuo] {
    text-align: right;
    min-width: 80px;
}

.metric-value[b-pdr8d1zpuo] {
    font-size: 1.25rem;
    font-weight: 700;
}

.metric-label[b-pdr8d1zpuo] {
    font-size: 0.75rem;
    margin-top: 0.125rem;
    color: var(--text-muted);
}

/* Attention Students */
.attention-section[b-pdr8d1zpuo] {
    margin-bottom: 2rem;
}

.attention-header[b-pdr8d1zpuo] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1rem;
    padding: 0 0.5rem;
}

.attention-header h3[b-pdr8d1zpuo] {
    font-size: 1.125rem;
    font-weight: 700;
    margin: 0;
    color: var(--text-primary);
}

.severity-badge[b-pdr8d1zpuo] {
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

.severity-badge.critical[b-pdr8d1zpuo] {
    background: #fee2e2;
    color: #dc2626;
}

.severity-badge.average[b-pdr8d1zpuo] {
    background: #fef3c7;
    color: #d97706;
}

/* Action Buttons */
.action-buttons[b-pdr8d1zpuo] {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.btn-notify[b-pdr8d1zpuo] {
    padding: 0.5rem 1rem;
    border-radius: 8px;
    border: none;
    font-size: 0.813rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 0.375rem;
}

.btn-whatsapp[b-pdr8d1zpuo] {
    background: #25D366;
    color: white;
}

.btn-whatsapp:hover[b-pdr8d1zpuo] {
    background: #20ba5a;
    transform: scale(1.05);
}

.btn-firebase[b-pdr8d1zpuo] {
    background: #3b82f6;
    color: white;
}

.btn-firebase:hover[b-pdr8d1zpuo] {
    background: #2563eb;
    transform: scale(1.05);
}

.btn-notify:disabled[b-pdr8d1zpuo] {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none !important;
}

/* Mark Attendance button */
.btn-mark-attendance[b-pdr8d1zpuo] {
    padding: 0.5rem 1rem;
    background: #3b82f6;
    color: white;
    border-radius: 8px;
    text-decoration: none;
    font-size: 0.813rem;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    transition: all 0.2s ease;
}

.btn-mark-attendance:hover[b-pdr8d1zpuo] {
    background: #2563eb;
    transform: scale(1.05);
    color: white;
    text-decoration: none;
}

/* Badge for unmarked days count on tab */
.badge-warning[b-pdr8d1zpuo] {
    display: inline-block;
    padding: 0.125rem 0.5rem;
    background: #fef3c7;
    color: #92400e;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 700;
    margin-left: 0.5rem;
}

/* Unmarked date item */
.unmarked-date-item[b-pdr8d1zpuo] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    background: #fef2f2;
    border-left: 3px solid #dc2626;
    border-radius: 6px;
    font-size: 0.875rem;
    color: #991b1b;
    transition: all 0.2s ease;
}

.unmarked-date-item:hover[b-pdr8d1zpuo] {
    background: #fee2e2;
    transform: translateX(4px);
}

/* Empty State */
.empty-state[b-pdr8d1zpuo] {
    text-align: center;
    padding: 3rem 1rem;
    color: #94a3b8;
}

.empty-state i[b-pdr8d1zpuo] {
    font-size: 3rem;
    margin-bottom: 1rem;
    opacity: 0.5;
}

.empty-state.success i[b-pdr8d1zpuo] {
    color: #10b981;
    opacity: 1;
}

.empty-state p[b-pdr8d1zpuo] {
    font-size: 1rem;
    margin: 0;
}

/* Alerts */
.alert[b-pdr8d1zpuo] {
    padding: 1rem 1.25rem;
    border-radius: 8px;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
    font-size: 0.9rem;
}

.alert-error[b-pdr8d1zpuo] {
    background: #fef2f2;
    color: #991b1b;
    border-left: 3px solid #ef4444;
}

.alert-warning[b-pdr8d1zpuo] {
    background: #fffbeb;
    color: #92400e;
    border-left: 3px solid #f59e0b;
}

/* Loading */
.loading-container[b-pdr8d1zpuo] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem;
    color: var(--text-muted);
}

.spinner[b-pdr8d1zpuo] {
    width: 40px;
    height: 40px;
    border: 3px solid var(--border);
    border-top-color: var(--brand-blue, #3b82f6);
    border-radius: 50%;
    animation: spin-b-pdr8d1zpuo 0.8s linear infinite;
    margin-bottom: 1rem;
}

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

/* Info Card Animation */
.info-card[b-pdr8d1zpuo] {
    animation: slideDown-b-pdr8d1zpuo 0.3s ease;
}

@keyframes slideDown-b-pdr8d1zpuo {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Student Performance Row Highlights */
.student-item.performance-excellent[b-pdr8d1zpuo] {
    background: rgba(16, 185, 129, 0.08);
    border-left: 3px solid #10b981;
}

.student-item.performance-good[b-pdr8d1zpuo] {
    background: rgba(5, 150, 105, 0.06);
    border-left: 3px solid #059669;
}

.student-item.performance-average[b-pdr8d1zpuo] {
    background: rgba(245, 158, 11, 0.08);
    border-left: 3px solid #f59e0b;
}

.student-item.performance-poor[b-pdr8d1zpuo] {
    background: rgba(239, 68, 68, 0.08);
    border-left: 3px solid #ef4444;
}

/* Metric value colors based on performance */
.metric-value.excellent[b-pdr8d1zpuo] {
    color: #10b981 !important;
}

.metric-value.good[b-pdr8d1zpuo] {
    color: #059669 !important;
}

.metric-value.average[b-pdr8d1zpuo] {
    color: #d97706 !important;
}

.metric-value.poor[b-pdr8d1zpuo] {
    color: #dc2626 !important;
}

/* Improvement indicators */
.improvement-positive[b-pdr8d1zpuo] {
    color: #10b981;
}

.improvement-negative[b-pdr8d1zpuo] {
    color: #ef4444;
}

.improvement-neutral[b-pdr8d1zpuo] {
    color: #64748b;
}

/* Responsive */
@media (max-width: 768px) {
    .overview-container[b-pdr8d1zpuo] {
        padding: 1rem;
    }

    .tabs-nav[b-pdr8d1zpuo] {
        flex-wrap: nowrap;
    }

    .tab-button[b-pdr8d1zpuo] {
        min-width: 150px;
        font-size: 0.8rem;
        padding: 0.75rem 1rem;
    }

    .performance-breakdown[b-pdr8d1zpuo] {
        flex-direction: column;
    }

    .action-buttons[b-pdr8d1zpuo] {
        flex-direction: column;
        width: 100%;
    }

    .btn-notify[b-pdr8d1zpuo],
    .btn-mark-attendance[b-pdr8d1zpuo] {
        width: 100%;
        justify-content: center;
    }

    .student-item[b-pdr8d1zpuo] {
        flex-wrap: wrap;
    }
}

@media print {
    .tabs-nav[b-pdr8d1zpuo], .action-buttons[b-pdr8d1zpuo] {
        display: none !important;
    }
    .tab-content[b-pdr8d1zpuo] {
        display: block !important;
    }
}
/* /Areas/Academic/Pages/ClassTeacher/Attendance/Report.razor.rz.scp.css */
.report-page[b-esxeb6k3i2] {
    max-width: 100%;
    margin: 0 auto;
}

.page-header[b-esxeb6k3i2] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 1.5rem;
}

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

.page-subtitle[b-esxeb6k3i2] {
    color: var(--text-muted);
    font-size: 0.95rem;
}

.header-actions[b-esxeb6k3i2] {
    display: flex;
    gap: 0.75rem;
}

/* Cards */
.card[b-esxeb6k3i2] {
    background: var(--card-gradient);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 1.25rem;
    margin-bottom: 1rem;
}

/* Month Selector */
.month-selector[b-esxeb6k3i2] {
    background: var(--bg-secondary);
}

.month-picker-row[b-esxeb6k3i2] {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.month-label[b-esxeb6k3i2] {
    font-weight: 600;
    color: var(--text-primary);
}

.month-select[b-esxeb6k3i2],
.year-select[b-esxeb6k3i2] {
    padding: 0.6rem 1rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--bg-primary);
    color: var(--text-primary);
    font-size: 0.95rem;
    min-width: 140px;
}

.year-select[b-esxeb6k3i2] {
    min-width: 100px;
}

/* Report Header */
.report-header[b-esxeb6k3i2] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
    flex-wrap: wrap;
    gap: 1rem;
}

.report-info h2[b-esxeb6k3i2] {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 0.25rem;
}

.report-info p[b-esxeb6k3i2] {
    font-size: 0.9rem;
    color: var(--text-muted);
}

.legend[b-esxeb6k3i2] {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

.legend-item[b-esxeb6k3i2] {
    padding: 0.35rem 0.75rem;
    border-radius: var(--radius-sm);
    font-size: 0.8rem;
    font-weight: 600;
}

.legend-item.present[b-esxeb6k3i2] {
    background: rgba(16, 185, 129, 0.1);
    color: #10b981;
}

.legend-item.absent[b-esxeb6k3i2] {
    background: rgba(239, 68, 68, 0.1);
    color: #ef4444;
}

.legend-item.leave[b-esxeb6k3i2] {
    background: rgba(245, 158, 11, 0.1);
    color: #f59e0b;
}

/* Attendance Grid */
.attendance-grid-card[b-esxeb6k3i2] {
    padding: 0;
    overflow: hidden;
}

.attendance-grid-container[b-esxeb6k3i2] {
    overflow-x: auto;
    max-height: 70vh;
}

.attendance-grid[b-esxeb6k3i2] {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 0.85rem;
}

.attendance-grid th[b-esxeb6k3i2],
.attendance-grid td[b-esxeb6k3i2] {
    padding: 0.5rem 0.4rem;
    text-align: center;
    border-bottom: 1px solid var(--border);
    border-right: 1px solid var(--border);
    white-space: nowrap;
}

.attendance-grid th[b-esxeb6k3i2] {
    background: var(--bg-secondary);
    font-weight: 600;
    font-size: 0.75rem;
    color: var(--text-muted);
    text-transform: uppercase;
    position: sticky;
    top: 0;
    z-index: 10;
}

/* Sticky columns */
.sticky-col[b-esxeb6k3i2] {
    position: sticky;
    background: var(--bg-primary);
    z-index: 5;
}

.attendance-grid th.sticky-col[b-esxeb6k3i2] {
    z-index: 15;
    background: var(--bg-secondary);
}

.col-sr[b-esxeb6k3i2] {
    left: 0;
    min-width: 45px;
    width: 45px;
}

.col-name[b-esxeb6k3i2] {
    left: 45px;
    min-width: 150px;
    max-width: 150px;
    text-align: left;
    overflow: hidden;
    text-overflow: ellipsis;
}

.col-day[b-esxeb6k3i2] {
    min-width: 32px;
    width: 32px;
}

.col-day.sunday[b-esxeb6k3i2] {
    background: rgba(239, 68, 68, 0.05);
}

.attendance-grid th.col-day.sunday[b-esxeb6k3i2] {
    background: rgba(239, 68, 68, 0.1);
    color: #ef4444;
}

.col-total[b-esxeb6k3i2] {
    min-width: 40px;
    width: 40px;
    font-weight: 600;
}

/* Status colors */
.status-present[b-esxeb6k3i2] {
    background: rgba(16, 185, 129, 0.15);
    color: #059669;
    font-weight: 600;
}

.status-absent[b-esxeb6k3i2] {
    background: rgba(239, 68, 68, 0.15);
    color: #dc2626;
    font-weight: 600;
}

.status-leave[b-esxeb6k3i2] {
    background: rgba(245, 158, 11, 0.15);
    color: #d97706;
    font-weight: 600;
}

/* Total columns */
.present-total[b-esxeb6k3i2] {
    color: #10b981;
}

.absent-total[b-esxeb6k3i2] {
    color: #ef4444;
}

.leave-total[b-esxeb6k3i2] {
    color: #f59e0b;
}

/* Percentage colors */
.percent-good[b-esxeb6k3i2] {
    color: #10b981;
    font-weight: 700;
}

.percent-average[b-esxeb6k3i2] {
    color: #f59e0b;
    font-weight: 700;
}

.percent-poor[b-esxeb6k3i2] {
    color: #ef4444;
    font-weight: 700;
}

/* Summary Section */
.summary-section[b-esxeb6k3i2] {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    margin-top: 1rem;
}

.summary-box[b-esxeb6k3i2] {
    background: var(--card-gradient);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 1rem 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 150px;
}

.summary-label[b-esxeb6k3i2] {
    font-size: 0.8rem;
    color: var(--text-muted);
}

.summary-value[b-esxeb6k3i2] {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-primary);
}

.summary-value.present[b-esxeb6k3i2] {
    color: #10b981;
}

.summary-value.absent[b-esxeb6k3i2] {
    color: #ef4444;
}

.summary-value.leave[b-esxeb6k3i2] {
    color: #f59e0b;
}

/* Buttons */
.btn[b-esxeb6k3i2] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.6rem 1.25rem;
    border-radius: var(--radius-md);
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    border: none;
}

.btn-primary[b-esxeb6k3i2] {
    background: var(--brand-blue);
    color: white;
}

.btn-primary:hover:not(:disabled)[b-esxeb6k3i2] {
    background: #2563eb;
}

.btn-outline[b-esxeb6k3i2] {
    background: transparent;
    border: 1px solid var(--border);
    color: var(--text-primary);
}

.btn-outline:hover[b-esxeb6k3i2] {
    background: var(--bg-secondary);
}

.btn:disabled[b-esxeb6k3i2] {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Alerts */
.alert[b-esxeb6k3i2] {
    padding: 1rem 1.25rem;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
    font-size: 0.9rem;
}

.alert-error[b-esxeb6k3i2] {
    background: #fef2f2;
    color: #991b1b;
    border-left: 3px solid #ef4444;
}

.alert-warning[b-esxeb6k3i2] {
    background: #fffbeb;
    color: #92400e;
    border-left: 3px solid #f59e0b;
}

.alert-info[b-esxeb6k3i2] {
    background: #eff6ff;
    color: #1e40af;
    border-left: 3px solid #3b82f6;
}

/* Loading */
.loading-container[b-esxeb6k3i2] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem;
    color: var(--text-muted);
}

.spinner[b-esxeb6k3i2] {
    width: 40px;
    height: 40px;
    border: 3px solid var(--border);
    border-top-color: var(--brand-blue);
    border-radius: 50%;
    animation: spin-b-esxeb6k3i2 0.8s linear infinite;
    margin-bottom: 1rem;
}

.spinner-sm[b-esxeb6k3i2] {
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: white;
    border-radius: 50%;
    animation: spin-b-esxeb6k3i2 0.6s linear infinite;
}

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

/* Print styles */
@media print {
    .page-header .header-actions[b-esxeb6k3i2],
    .month-selector[b-esxeb6k3i2] {
        display: none;
    }

    .attendance-grid-container[b-esxeb6k3i2] {
        overflow: visible;
        max-height: none;
    }

    .attendance-grid[b-esxeb6k3i2] {
        font-size: 0.7rem;
    }

    .attendance-grid th[b-esxeb6k3i2],
    .attendance-grid td[b-esxeb6k3i2] {
        padding: 0.25rem;
    }

    .sticky-col[b-esxeb6k3i2] {
        position: static;
    }
}

/* Row Highlighting based on student overall attendance */
.row-excellent[b-esxeb6k3i2] {
    background: rgba(16, 185, 129, 0.08) !important;
}

.row-good[b-esxeb6k3i2] {
    background: rgba(5, 150, 105, 0.06) !important;
}

.row-average[b-esxeb6k3i2] {
    background: rgba(245, 158, 11, 0.08) !important;
}

.row-poor[b-esxeb6k3i2] {
    background: rgba(239, 68, 68, 0.08) !important;
}

/* Row hover with preserved highlighting */
.attendance-grid tbody tr:hover[b-esxeb6k3i2] {
    filter: brightness(0.97);
}

/* Holiday status */
.status-holiday[b-esxeb6k3i2] {
    background: rgba(251, 191, 36, 0.2);
    color: #92400e;
    font-size: 0.7rem;
    font-weight: 600;
}

/* Sunday column highlighting */
.col-day.sunday[b-esxeb6k3i2] {
    background: rgba(239, 68, 68, 0.05);
}

.attendance-grid th.col-day.sunday[b-esxeb6k3i2] {
    background: rgba(239, 68, 68, 0.12);
    color: #dc2626;
}

/* Responsive */
@media (max-width: 768px) {
    .page-header[b-esxeb6k3i2] {
        flex-direction: column;
        gap: 1rem;
    }

    .month-picker-row[b-esxeb6k3i2] {
        flex-direction: column;
        align-items: stretch;
    }

    .month-select[b-esxeb6k3i2],
    .year-select[b-esxeb6k3i2] {
        width: 100%;
    }

    .report-header[b-esxeb6k3i2] {
        flex-direction: column;
        align-items: flex-start;
    }

    .summary-section[b-esxeb6k3i2] {
        flex-direction: column;
    }

    .summary-box[b-esxeb6k3i2] {
        width: 100%;
    }
}
/* /Areas/Academic/Pages/ClassTeacher/Attendance/YearlyReport.razor.rz.scp.css */
.yearly-report-page[b-jush3qkduj] {
    max-width: 1400px;
    margin: 0 auto;
}

/* Page Header */
.page-header[b-jush3qkduj] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
    gap: 1rem;
}

.page-title[b-jush3qkduj] {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.5rem;
}

.page-title i[b-jush3qkduj] {
    background: linear-gradient(135deg, #2563eb, #4338ca);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.page-badges[b-jush3qkduj] {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-bottom: 0.5rem;
}

.badge[b-jush3qkduj] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.35rem 0.75rem;
    border-radius: var(--radius-md);
    font-size: 0.8rem;
    font-weight: 600;
}

.badge-primary[b-jush3qkduj] {
    background: rgba(37, 99, 235, 0.1);
    color: #2563eb;
}

.badge-info[b-jush3qkduj] {
    background: rgba(59, 130, 246, 0.1);
    color: #3b82f6;
}

.badge-secondary[b-jush3qkduj] {
    background: var(--bg-secondary);
    color: var(--text-secondary);
}

.page-note[b-jush3qkduj] {
    font-size: 0.85rem;
    color: var(--text-muted);
    margin: 0;
}

.page-note i[b-jush3qkduj] {
    margin-right: 0.25rem;
}

.header-actions[b-jush3qkduj] {
    display: flex;
    gap: 0.75rem;
}

/* Cards */
.card[b-jush3qkduj] {
    background: var(--card-gradient);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    margin-bottom: 1.5rem;
    overflow: hidden;
}

.card-header[b-jush3qkduj] {
    padding: 1rem 1.5rem;
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border);
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.insights-card[b-jush3qkduj] {
    padding-bottom: 1.5rem;
}

.insights-header[b-jush3qkduj] {
    background: linear-gradient(135deg, #3b82f6, #2563eb);
    color: white;
}

.insights-grid[b-jush3qkduj] {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 1rem;
    padding: 1.5rem;
}

.insight-card[b-jush3qkduj] {
    background: var(--bg-primary);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 1rem;
    text-align: center;
    transition: all 0.2s ease;
}

.insight-card:hover[b-jush3qkduj] {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.insight-icon[b-jush3qkduj] {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    margin: 0 auto 0.75rem;
}

.icon-blue[b-jush3qkduj] {
    background: #3b82f6;
    color: white;
}

.icon-purple[b-jush3qkduj] {
    background: #8b5cf6;
    color: white;
}

.icon-success[b-jush3qkduj] {
    background: #10b981;
    color: white;
}

.icon-success-light[b-jush3qkduj] {
    background: #6ee7b7;
    color: #065f46;
}

.icon-warning[b-jush3qkduj] {
    background: #fbbf24;
    color: #78350f;
}

.icon-danger[b-jush3qkduj] {
    background: #f87171;
    color: white;
}

.insight-label[b-jush3qkduj] {
    font-size: 0.8rem;
    color: var(--text-muted);
    margin-bottom: 0.25rem;
    font-weight: 600;
}

.insight-value[b-jush3qkduj] {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
}

.insight-value.purple[b-jush3qkduj] {
    color: #7c3aed;
}

.insight-value.success[b-jush3qkduj] {
    color: #059669;
}

.insight-value.warning[b-jush3qkduj] {
    color: #d97706;
}

.insight-value.danger[b-jush3qkduj] {
    color: #dc2626;
}

.month-alerts[b-jush3qkduj] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    padding: 0 1.5rem;
}

.month-alert[b-jush3qkduj] {
    padding: 0.75rem 1rem;
    border-radius: var(--radius-md);
    font-size: 0.9rem;
}

.month-alert.alert-success[b-jush3qkduj] {
    background: #f0fdf4;
    color: #166534;
    border-left: 3px solid #10b981;
}

.month-alert.alert-warning[b-jush3qkduj] {
    background: #fffbeb;
    color: #92400e;
    border-left: 3px solid #f59e0b;
}

.month-alert i[b-jush3qkduj] {
    margin-right: 0.5rem;
}

/* Search Bar */
.search-bar[b-jush3qkduj] {
    padding: 1rem 1.5rem;
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
}

.search-input-wrapper[b-jush3qkduj] {
    position: relative;
    flex: 1;
    max-width: 400px;
}

.search-input-wrapper i[b-jush3qkduj] {
    position: absolute;
    left: 1rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted);
}

.search-input[b-jush3qkduj] {
    width: 100%;
    padding: 0.65rem 1rem 0.65rem 2.5rem;
    border: 2px solid var(--border);
    border-radius: var(--radius-md);
    font-size: 0.95rem;
    background: var(--bg-primary);
    color: var(--text-primary);
    transition: all 0.2s ease;
}

.search-input:focus[b-jush3qkduj] {
    outline: none;
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.record-count[b-jush3qkduj] {
    color: var(--text-muted);
}

/* Grid Container */
.grid-container[b-jush3qkduj] {
    overflow-x: auto;
    max-height: 70vh;
    overflow-y: auto;
}

.yearly-grid[b-jush3qkduj] {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 0.85rem;
}

.yearly-grid th[b-jush3qkduj],
.yearly-grid td[b-jush3qkduj] {
    padding: 0.6rem 0.5rem;
    text-align: center;
    border-bottom: 1px solid var(--border);
    white-space: nowrap;
}

.yearly-grid th[b-jush3qkduj] {
    background: var(--bg-secondary);
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 0.5px;
    position: sticky;
    top: 0;
    z-index: 10;
}

.yearly-grid th.sortable[b-jush3qkduj] {
    cursor: pointer;
    user-select: none;
    transition: background 0.2s ease;
}

.yearly-grid th.sortable:hover[b-jush3qkduj] {
    background: var(--bg-tertiary);
}

.yearly-grid th.sortable i[b-jush3qkduj] {
    margin-left: 0.25rem;
    font-size: 0.65rem;
    opacity: 0.5;
}

.yearly-grid th.sortable:hover i[b-jush3qkduj] {
    opacity: 1;
}

/* Sticky Columns */
.sticky-col[b-jush3qkduj] {
    position: sticky;
    background: var(--bg-primary);
    z-index: 5;
}

.yearly-grid th.sticky-col[b-jush3qkduj] {
    z-index: 15;
    background: var(--bg-secondary);
}

.col-num[b-jush3qkduj] {
    left: 0;
    min-width: 45px;
    width: 45px;
}

.col-sr[b-jush3qkduj] {
    left: 45px;
    min-width: 70px;
    width: 70px;
}

.col-name[b-jush3qkduj] {
    left: 115px;
    min-width: 180px;
    max-width: 180px;
    text-align: left !important;
}

.col-month[b-jush3qkduj] {
    min-width: 55px;
}

.col-total[b-jush3qkduj] {
    min-width: 50px;
    font-weight: 600;
}

/* Row Highlighting */
.yearly-grid tbody tr:nth-child(odd)[b-jush3qkduj] {
    background: var(--bg-secondary);
}

.yearly-grid tbody tr:nth-child(even)[b-jush3qkduj] {
    background: var(--bg-primary);
}

.yearly-grid tbody tr:hover[b-jush3qkduj] {
    background: #e0f2fe !important;
}

.yearly-grid tbody tr:hover .sticky-col[b-jush3qkduj] {
    background: #e0f2fe !important;
}

.yearly-grid tbody tr:nth-child(odd) .sticky-col[b-jush3qkduj] {
    background: var(--bg-secondary);
}

.yearly-grid tbody tr:nth-child(even) .sticky-col[b-jush3qkduj] {
    background: var(--bg-primary);
}

/* Performance Row Highlighting */
.row-excellent[b-jush3qkduj] {
    background: rgba(16, 185, 129, 0.06) !important;
}

.row-good[b-jush3qkduj] {
    background: rgba(5, 150, 105, 0.04) !important;
}

.row-average[b-jush3qkduj] {
    background: rgba(245, 158, 11, 0.06) !important;
}

.row-poor[b-jush3qkduj] {
    background: rgba(239, 68, 68, 0.06) !important;
}

.row-excellent .sticky-col[b-jush3qkduj],
.row-good .sticky-col[b-jush3qkduj],
.row-average .sticky-col[b-jush3qkduj],
.row-poor .sticky-col[b-jush3qkduj] {
    background: inherit;
}

/* Badges */
.sr-badge[b-jush3qkduj] {
    display: inline-block;
    padding: 0.25rem 0.5rem;
    background: var(--bg-tertiary);
    border-radius: var(--radius-sm);
    font-size: 0.8rem;
    font-weight: 700;
}

.month-badge[b-jush3qkduj] {
    display: inline-block;
    padding: 0.25rem 0.4rem;
    border-radius: var(--radius-sm);
    font-size: 0.8rem;
    font-weight: 600;
}

.yearly-badge[b-jush3qkduj] {
    display: inline-block;
    padding: 0.3rem 0.5rem;
    border-radius: var(--radius-sm);
    font-size: 0.85rem;
    font-weight: 700;
}

.badge-success[b-jush3qkduj] {
    background: #10b981;
    color: white;
}

.badge-success-light[b-jush3qkduj] {
    background: #6ee7b7;
    color: #065f46;
}

.badge-warning[b-jush3qkduj] {
    background: #fbbf24;
    color: #78350f;
}

.badge-danger[b-jush3qkduj] {
    background: #f87171;
    color: white;
}

.present-value[b-jush3qkduj] {
    color: #10b981;
}

.absent-value[b-jush3qkduj] {
    color: #ef4444;
}

.text-muted[b-jush3qkduj] {
    color: var(--text-muted);
}

/* No Results */
.no-results[b-jush3qkduj] {
    text-align: center;
    padding: 3rem 2rem;
    color: var(--text-muted);
}

.no-results i[b-jush3qkduj] {
    font-size: 3rem;
    margin-bottom: 1rem;
    opacity: 0.3;
}

.no-results h4[b-jush3qkduj] {
    margin-bottom: 0.5rem;
    color: var(--text-secondary);
}

/* Buttons */
.btn[b-jush3qkduj] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.6rem 1.25rem;
    border-radius: var(--radius-md);
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    border: none;
}

.btn-primary[b-jush3qkduj] {
    background: var(--brand-blue);
    color: white;
}

.btn-primary:hover[b-jush3qkduj] {
    background: #2563eb;
}

.btn-outline[b-jush3qkduj] {
    background: transparent;
    border: 1px solid var(--border);
    color: var(--text-primary);
}

.btn-outline:hover[b-jush3qkduj] {
    background: var(--bg-secondary);
}

/* Alerts */
.alert[b-jush3qkduj] {
    padding: 1rem 1.25rem;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
    font-size: 0.9rem;
}

.alert-error[b-jush3qkduj] {
    background: #fef2f2;
    color: #991b1b;
    border-left: 3px solid #ef4444;
}

.alert-warning[b-jush3qkduj] {
    background: #fffbeb;
    color: #92400e;
    border-left: 3px solid #f59e0b;
}

/* Loading */
.loading-container[b-jush3qkduj] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem;
    color: var(--text-muted);
}

.spinner[b-jush3qkduj] {
    width: 40px;
    height: 40px;
    border: 3px solid var(--border);
    border-top-color: var(--brand-blue);
    border-radius: 50%;
    animation: spin-b-jush3qkduj 0.8s linear infinite;
    margin-bottom: 1rem;
}

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

/* Print Styles */
@media print {
    @page {
        margin: 0.5cm;
        size: landscape;
    }

    .page-header .header-actions[b-jush3qkduj],
    .search-bar[b-jush3qkduj],
    .btn[b-jush3qkduj],
    .insights-card[b-jush3qkduj] {
        display: none !important;
    }

    .yearly-report-page[b-jush3qkduj] {
        max-width: 100%;
    }

    .sticky-col[b-jush3qkduj] {
        position: static !important;
    }

    .yearly-grid[b-jush3qkduj] {
        font-size: 7px !important;
    }

    .yearly-grid th[b-jush3qkduj],
    .yearly-grid td[b-jush3qkduj] {
        padding: 2px 1px !important;
    }
}

/* Responsive */
@media (max-width: 1200px) {
    .insights-grid[b-jush3qkduj] {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 768px) {
    .page-header[b-jush3qkduj] {
        flex-direction: column;
    }

    .insights-grid[b-jush3qkduj] {
        grid-template-columns: repeat(2, 1fr);
    }

    .month-alerts[b-jush3qkduj] {
        grid-template-columns: 1fr;
    }

    .search-bar[b-jush3qkduj] {
        flex-direction: column;
        align-items: stretch;
    }

    .search-input-wrapper[b-jush3qkduj] {
        max-width: none;
    }

    .col-name[b-jush3qkduj] {
        min-width: 150px;
        max-width: 150px;
    }
}
/* /Areas/Academic/Pages/ClassTeacher/Index.razor.rz.scp.css */
.dashboard[b-t8y3yz7owu] {
    max-width: 1400px;
    margin: 0 auto;
}

.dashboard-header[b-t8y3yz7owu] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 1.5rem;
}

.dashboard-title[b-t8y3yz7owu] {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 0.25rem;
}

.dashboard-subtitle[b-t8y3yz7owu] {
    color: var(--text-muted);
    font-size: 0.95rem;
}

.dashboard-user[b-t8y3yz7owu] {
    padding: 0.5rem 1rem;
    background: var(--bg-secondary);
    border-radius: var(--radius-md);
}

.user-name[b-t8y3yz7owu] {
    font-weight: 600;
    color: var(--text-primary);
    font-size: 0.9rem;
}

/* Class Banner */
.class-banner[b-t8y3yz7owu] {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    background: linear-gradient(135deg, var(--brand-blue), #2563eb);
    padding: 1.5rem 2rem;
    border-radius: var(--radius-lg);
    margin-bottom: 1.5rem;
    color: white;
}

.class-banner__icon[b-t8y3yz7owu] {
    width: 56px;
    height: 56px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
}

.class-banner__info[b-t8y3yz7owu] {
    flex: 1;
}

.class-banner__title[b-t8y3yz7owu] {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 0.25rem;
}

.class-banner__subtitle[b-t8y3yz7owu] {
    opacity: 0.9;
    font-size: 0.9rem;
}

.class-banner__stats[b-t8y3yz7owu] {
    display: flex;
    gap: 2rem;
}

.class-banner__stat[b-t8y3yz7owu] {
    text-align: center;
}

.class-banner__stat-value[b-t8y3yz7owu] {
    display: block;
    font-size: 1.75rem;
    font-weight: 700;
}

.class-banner__stat-label[b-t8y3yz7owu] {
    font-size: 0.8rem;
    opacity: 0.9;
}

/* Metrics Grid */
.metrics-grid[b-t8y3yz7owu] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.metric-card[b-t8y3yz7owu] {
    background: var(--card-gradient);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 1.25rem;
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    transition: all 0.2s ease;
}

.metric-card:hover[b-t8y3yz7owu] {
    border-color: var(--brand-blue);
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.1);
}

.metric-card__icon[b-t8y3yz7owu] {
    width: 48px;
    height: 48px;
    background: rgba(59, 130, 246, 0.1);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--brand-blue);
    font-size: 1.25rem;
    flex-shrink: 0;
}

.metric-card__icon--warning[b-t8y3yz7owu] {
    background: rgba(245, 158, 11, 0.1);
    color: #f59e0b;
}

.metric-card__icon--success[b-t8y3yz7owu] {
    background: rgba(16, 185, 129, 0.1);
    color: #10b981;
}

.metric-card__icon--info[b-t8y3yz7owu] {
    background: rgba(99, 102, 241, 0.1);
    color: #6366f1;
}

.metric-card__content[b-t8y3yz7owu] {
    flex: 1;
    min-width: 0;
}

.metric-card__label[b-t8y3yz7owu] {
    font-size: 0.85rem;
    color: var(--text-muted);
    margin-bottom: 0.25rem;
}

.metric-card__value[b-t8y3yz7owu] {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 0.25rem;
}

.metric-card__status[b-t8y3yz7owu] {
    font-size: 0.8rem;
    color: var(--text-muted);
}

.status-success[b-t8y3yz7owu] {
    color: #10b981;
}

.status-warning[b-t8y3yz7owu] {
    color: #f59e0b;
}

.status-danger[b-t8y3yz7owu] {
    color: #ef4444;
}

/* Cards */
.card[b-t8y3yz7owu] {
    background: var(--card-gradient);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    margin-bottom: 1.5rem;
}

.card-title[b-t8y3yz7owu] {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* Actions Grid */
.actions-grid[b-t8y3yz7owu] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 0.75rem;
}

.action-btn[b-t8y3yz7owu] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: 1.25rem 1rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--bg-secondary);
    color: var(--text-primary);
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.action-btn i[b-t8y3yz7owu] {
    font-size: 1.25rem;
}

.action-btn:hover[b-t8y3yz7owu] {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.action-btn--primary[b-t8y3yz7owu] {
    background: rgba(59, 130, 246, 0.1);
    border-color: rgba(59, 130, 246, 0.2);
    color: var(--brand-blue);
}

.action-btn--primary:hover[b-t8y3yz7owu] {
    background: var(--brand-blue);
    color: white;
}

.action-btn--info[b-t8y3yz7owu] {
    background: rgba(99, 102, 241, 0.1);
    border-color: rgba(99, 102, 241, 0.2);
    color: #6366f1;
}

.action-btn--info:hover[b-t8y3yz7owu] {
    background: #6366f1;
    color: white;
}

.action-btn--success[b-t8y3yz7owu] {
    background: rgba(16, 185, 129, 0.1);
    border-color: rgba(16, 185, 129, 0.2);
    color: #10b981;
}

.action-btn--success:hover[b-t8y3yz7owu] {
    background: #10b981;
    color: white;
}

.action-btn--warning[b-t8y3yz7owu] {
    background: rgba(245, 158, 11, 0.1);
    border-color: rgba(245, 158, 11, 0.2);
    color: #f59e0b;
}

.action-btn--warning:hover[b-t8y3yz7owu] {
    background: #f59e0b;
    color: white;
}

/* Two Column Layout */
.two-column[b-t8y3yz7owu] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
}

/* Activity List */
.activity-list[b-t8y3yz7owu] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.activity-item[b-t8y3yz7owu] {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.75rem;
    background: var(--bg-secondary);
    border-radius: var(--radius-md);
}

.activity-item__icon[b-t8y3yz7owu] {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 0.9rem;
}

.icon-success[b-t8y3yz7owu] {
    background: rgba(16, 185, 129, 0.1);
    color: #10b981;
}

.icon-warning[b-t8y3yz7owu] {
    background: rgba(245, 158, 11, 0.1);
    color: #f59e0b;
}

.icon-info[b-t8y3yz7owu] {
    background: rgba(59, 130, 246, 0.1);
    color: var(--brand-blue);
}

.activity-item__content[b-t8y3yz7owu] {
    flex: 1;
    min-width: 0;
}

.activity-item__text[b-t8y3yz7owu] {
    font-size: 0.875rem;
    color: var(--text-primary);
    margin-bottom: 0.25rem;
}

.activity-item__time[b-t8y3yz7owu] {
    font-size: 0.75rem;
    color: var(--text-muted);
}

.activity-empty[b-t8y3yz7owu] {
    text-align: center;
    padding: 2rem 1rem;
    color: var(--text-muted);
}

.activity-empty i[b-t8y3yz7owu] {
    font-size: 2rem;
    margin-bottom: 0.75rem;
    opacity: 0.5;
}

.activity-empty p[b-t8y3yz7owu] {
    font-size: 0.9rem;
}

/* Attention List */
.attention-list[b-t8y3yz7owu] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.attention-item[b-t8y3yz7owu] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.85rem;
    background: var(--bg-secondary);
    border-radius: var(--radius-md);
    border-left: 3px solid transparent;
}

.attention-item.severity-warning[b-t8y3yz7owu] {
    border-left-color: #f59e0b;
    background: rgba(245, 158, 11, 0.05);
}

.attention-item.severity-danger[b-t8y3yz7owu] {
    border-left-color: #ef4444;
    background: rgba(239, 68, 68, 0.05);
}

.attention-item__indicator[b-t8y3yz7owu] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.severity-warning .attention-item__indicator[b-t8y3yz7owu] {
    background: #f59e0b;
}

.severity-danger .attention-item__indicator[b-t8y3yz7owu] {
    background: #ef4444;
}

.attention-item__content[b-t8y3yz7owu] {
    flex: 1;
    min-width: 0;
}

.attention-item__title[b-t8y3yz7owu] {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 0.15rem;
}

.attention-item__desc[b-t8y3yz7owu] {
    font-size: 0.75rem;
    color: var(--text-muted);
}

.attention-item__action[b-t8y3yz7owu] {
    width: 32px;
    height: 32px;
    border-radius: var(--radius-sm);
    border: none;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.attention-item__action:hover[b-t8y3yz7owu] {
    background: var(--bg-primary);
    color: var(--brand-blue);
}

.text-warning[b-t8y3yz7owu] {
    color: #f59e0b;
}

.text-success[b-t8y3yz7owu] {
    color: #10b981;
}

/* Responsive */
@media (max-width: 1024px) {
    .two-column[b-t8y3yz7owu] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .dashboard-header[b-t8y3yz7owu] {
        flex-direction: column;
        gap: 1rem;
    }

    .dashboard-title[b-t8y3yz7owu] {
        font-size: 1.5rem;
    }

    .class-banner[b-t8y3yz7owu] {
        flex-direction: column;
        text-align: center;
        padding: 1.25rem;
    }

    .class-banner__stats[b-t8y3yz7owu] {
        width: 100%;
        justify-content: center;
        padding-top: 1rem;
        border-top: 1px solid rgba(255, 255, 255, 0.2);
    }

    .metrics-grid[b-t8y3yz7owu] {
        grid-template-columns: 1fr;
    }

    .actions-grid[b-t8y3yz7owu] {
        grid-template-columns: repeat(2, 1fr);
    }
}
/* /Areas/Accounts/Pages/FeeClerk/CollectFee.razor.rz.scp.css */
/* =============================================================================
   FEE COLLECTION PAGE - "Financial Clarity" Design
   Clean, professional, task-focused interface for fee collection
   ============================================================================= */

/* Local Design Tokens */
.collect-fee[b-q502aozksr] {
    --fc-primary: #2563eb;
    --fc-primary-dark: #1d4ed8;
    --fc-primary-light: #3b82f6;
    --fc-success: #059669;
    --fc-success-light: #d1fae5;
    --fc-warning: #d97706;
    --fc-warning-light: #fef3c7;
    --fc-danger: #dc2626;
    --fc-danger-light: #fee2e2;
    --fc-surface: #f8fafc;
    --fc-surface-elevated: #ffffff;
    --fc-border: #e2e8f0;
    --fc-border-strong: #cbd5e1;
    --fc-text-primary: #0f172a;
    --fc-text-secondary: #475569;
    --fc-text-muted: #64748b;
    --fc-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --fc-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
    --fc-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
    --fc-radius-sm: 6px;
    --fc-radius-md: 8px;
    --fc-radius-lg: 12px;
}

/* =============================================================================
   BASE CONTAINER
   ============================================================================= */

.collect-fee[b-q502aozksr] {
    max-width: 100%;
    margin: 0;
    padding: var(--space-md);
    background: var(--fc-surface);
    min-height: calc(100vh - 50px);
}

/* =============================================================================
   HEADER SECTION
   ============================================================================= */

.fee-header[b-q502aozksr] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-md);
    padding-bottom: var(--space-sm);
    border-bottom: 1px solid var(--fc-border);
}

.fee-title[b-q502aozksr] {
    font-size: var(--font-size-xl);
    font-weight: 700;
    color: var(--fc-text-primary);
    margin: 0;
    letter-spacing: -0.025em;
}

.fee-subtitle[b-q502aozksr] {
    font-size: 0.875rem;
    color: var(--fc-text-muted);
    margin: 0.25rem 0 0 0;
}

.btn-back[b-q502aozksr] {
    padding: 0.5rem 1rem;
    background: var(--fc-surface-elevated);
    border: 1px solid var(--fc-border);
    border-radius: var(--fc-radius-md);
    color: var(--fc-text-secondary);
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.btn-back:hover[b-q502aozksr] {
    background: var(--fc-surface);
    border-color: var(--fc-border-strong);
    color: var(--fc-text-primary);
}

/* =============================================================================
   SEARCH SECTION
   ============================================================================= */

.search-card[b-q502aozksr] {
    background: var(--fc-surface-elevated);
    border: 1px solid var(--fc-border);
    border-radius: var(--fc-radius-lg);
    padding: var(--space-md);
    margin-bottom: var(--space-md);
    box-shadow: var(--fc-shadow-sm);
}

.search-bar[b-q502aozksr] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    position: relative;
}

.search-bar>i:first-child[b-q502aozksr] {
    position: absolute;
    left: 1rem;
    color: var(--fc-text-muted);
    font-size: 1rem;
    z-index: 1;
}

.search-input[b-q502aozksr] {
    flex: 1;
    padding: var(--space-sm) var(--space-md) var(--space-sm) 2.25rem;
    border: 1px solid var(--fc-border);
    border-radius: var(--fc-radius-md);
    font-size: var(--font-size-sm);
    background: var(--fc-surface-elevated);
    color: var(--fc-text-primary);
    transition: all 0.2s ease;
}

.search-input:focus[b-q502aozksr] {
    outline: none;
    border-color: var(--fc-primary);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

.search-input[b-q502aozksr]::placeholder {
    color: var(--fc-text-muted);
}

.btn-search[b-q502aozksr] {
    padding: var(--space-sm) var(--space-md);
    background: var(--fc-primary);
    color: white;
    border: none;
    border-radius: var(--fc-radius-md);
    font-size: var(--font-size-sm);
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    transition: all 0.2s ease;
    white-space: nowrap;
}

.btn-search:hover:not(:disabled)[b-q502aozksr] {
    background: var(--fc-primary-dark);
    transform: translateY(-1px);
    box-shadow: var(--fc-shadow-md);
}

.btn-search:disabled[b-q502aozksr] {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

/* Alert Messages */
.alert[b-q502aozksr] {
    margin-top: 1rem;
    padding: 0.875rem 1rem;
    border-radius: var(--fc-radius-md);
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 0.875rem;
    font-weight: 500;
}

.alert i[b-q502aozksr] {
    font-size: 1.125rem;
    flex-shrink: 0;
}

.alert-error[b-q502aozksr] {
    background: var(--fc-danger-light);
    color: var(--fc-danger);
    border: 1px solid #fecaca;
}

.alert-success[b-q502aozksr] {
    background: var(--fc-success-light);
    color: var(--fc-success);
    border: 1px solid #a7f3d0;
}

.alert-info[b-q502aozksr] {
    background: #eff6ff;
    color: var(--fc-primary);
    border: 1px solid #bfdbfe;
}

/* =============================================================================
   MAIN LAYOUT - Two Column
   ============================================================================= */

.fee-collection-container[b-q502aozksr] {
    display: grid;
    grid-template-columns: 1fr 340px;
    gap: var(--space-md);
    min-height: calc(100vh - 200px);
}

.left-panel[b-q502aozksr] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    min-width: 0;
}

.right-panel[b-q502aozksr] {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    position: sticky;
    top: 60px;
    align-self: flex-start;
    max-height: calc(100vh - 80px);
    overflow-y: auto;
}

/* =============================================================================
   STUDENT INFO CARD
   ============================================================================= */

.student-header-compact[b-q502aozksr] {
    background: var(--fc-surface-elevated);
    border: 1px solid var(--fc-border);
    border-radius: var(--fc-radius-lg);
    padding: var(--space-sm) var(--space-md);
    box-shadow: var(--fc-shadow-sm);
    display: flex;
    align-items: center;
    gap: var(--space-md);
}

.student-info-inline[b-q502aozksr] {
    font-size: 0.9375rem;
    color: var(--fc-text-primary);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.student-info-inline strong[b-q502aozksr] {
    color: var(--fc-text-secondary);
    font-weight: 500;
}

.student-info-inline strong:nth-of-type(2)[b-q502aozksr] {
    color: var(--fc-text-primary);
    font-weight: 700;
    font-size: 1rem;
}

/* =============================================================================
   FEE TABLE CARD
   ============================================================================= */

.fee-table-card[b-q502aozksr] {
    background: var(--fc-surface-elevated);
    border: 1px solid var(--fc-border);
    border-radius: var(--fc-radius-lg);
    padding: 0;
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: var(--fc-shadow-sm);
}

.table-wrapper[b-q502aozksr] {
    flex: 1;
    overflow-y: auto;
    overflow-x: auto;
}

/* =============================================================================
   FEE TABLE
   ============================================================================= */

.fee-table[b-q502aozksr] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8125rem;
    min-width: 900px;
}

/* Table Header */
.fee-table thead th[b-q502aozksr] {
    background: var(--fc-surface);
    padding: var(--space-sm) var(--space-md);
    font-size: var(--font-size-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--fc-text-muted);
    border-bottom: 2px solid var(--fc-border-strong);
    position: sticky;
    top: 0;
    z-index: 10;
    white-space: nowrap;
}

.fee-table thead th.text-right[b-q502aozksr] {
    text-align: right;
}

.fee-table thead th.text-center[b-q502aozksr] {
    text-align: center;
}

/* Quarter Headers */
.fee-table .quarter-header[b-q502aozksr] {
    background: var(--fc-surface) !important;
}

.fee-table .quarter-header td[b-q502aozksr] {
    padding: var(--space-xs) var(--space-md) !important;
    background: transparent !important;
    color: var(--fc-primary) !important;
    font-weight: 700 !important;
    font-size: 0.8125rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    border-top: 1px solid var(--fc-border) !important;
    border-bottom: none !important;
}

.fee-table .quarter-header td i[b-q502aozksr] {
    margin-right: 0.5rem;
    opacity: 0.7;
}

/* Quarter Totals */
.fee-table .quarter-total[b-q502aozksr] {
    background: var(--fc-surface) !important;
}

.fee-table .quarter-total td[b-q502aozksr] {
    padding: var(--space-sm) var(--space-md) !important;
    background: transparent !important;
    font-weight: 600;
    color: var(--fc-text-primary);
    border-top: 1px solid var(--fc-border-strong);
    border-bottom: 2px solid var(--fc-border-strong);
}

.fee-table .quarter-total td:first-child[b-q502aozksr] {
    border-left: 3px solid var(--fc-primary);
}

/* Grand Total */
.fee-table .grand-total[b-q502aozksr] {
    background: linear-gradient(135deg, var(--fc-primary) 0%, var(--fc-primary-dark) 100%) !important;
}

.fee-table .grand-total td[b-q502aozksr] {
    padding: var(--space-sm) var(--space-md) !important;
    color: white !important;
    background: transparent !important;
    font-weight: 700;
    font-size: 0.9375rem;
}

.fee-table .grand-total .fee-amount[b-q502aozksr] {
    color: white !important;
    font-size: 1.125rem !important;
}

/* Table Body */
.fee-table tbody td[b-q502aozksr] {
    padding: var(--space-xs) var(--space-md);
    font-size: 0.8125rem;
    vertical-align: middle;
    color: var(--fc-text-primary);
    border-bottom: 1px solid var(--fc-border);
    transition: background 0.15s ease;
}

/* Column Alignment */
.fee-table tbody td.text-right[b-q502aozksr],
.fee-table .quarter-total td.text-right[b-q502aozksr],
.fee-table .grand-total td.text-right[b-q502aozksr] {
    text-align: right !important;
}

.fee-table tbody td.text-center[b-q502aozksr],
.fee-table .quarter-total td.text-center[b-q502aozksr],
.fee-table .grand-total td.text-center[b-q502aozksr] {
    text-align: center !important;
}

/* Row Hover */
.fee-table tbody tr:not(.quarter-header):not(.quarter-total):not(.grand-total):hover[b-q502aozksr] {
    background: rgba(37, 99, 235, 0.04) !important;
    cursor: pointer;
}

/* Paid Rows */
.fee-table .row-paid[b-q502aozksr] {
    background: rgba(5, 150, 105, 0.04) !important;
}

.fee-table .row-paid td[b-q502aozksr] {
    background: transparent !important;
    color: var(--fc-text-muted);
}

/* Fee Amounts */
.fee-table .fee-amount[b-q502aozksr] {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--fc-text-primary);
    white-space: nowrap;
}

.fee-table .quarter-total .fee-amount[b-q502aozksr] {
    font-size: 0.9375rem;
    font-weight: 700;
}

/* Checkboxes */
.fee-table input[type="checkbox"][b-q502aozksr] {
    width: 18px;
    height: 18px;
    cursor: pointer;
    accent-color: var(--fc-primary);
    border-radius: 4px;
}

/* Status Indicators */
.fee-table .text-success[b-q502aozksr] {
    color: var(--fc-success) !important;
}

.fee-table .text-danger[b-q502aozksr] {
    color: var(--fc-danger) !important;
}

.fee-table .text-muted[b-q502aozksr] {
    color: var(--fc-text-muted) !important;
}

/* =============================================================================
   TOTAL SELECTED BAR
   ============================================================================= */

.total-selected-bar[b-q502aozksr] {
    padding: var(--space-sm) var(--space-md);
    background: linear-gradient(135deg, var(--fc-primary) 0%, var(--fc-primary-dark) 100%);
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.total-label[b-q502aozksr] {
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.8125rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.total-amount[b-q502aozksr] {
    color: white;
    font-size: 1.375rem;
    font-weight: 700;
}

/* =============================================================================
   PAYMENT CARD
   ============================================================================= */

.payment-card[b-q502aozksr] {
    background: var(--fc-surface-elevated);
    border: 1px solid var(--fc-border);
    border-radius: var(--fc-radius-lg);
    padding: var(--space-md);
    box-shadow: var(--fc-shadow-sm);
}

.card-title[b-q502aozksr] {
    font-size: var(--font-size-base);
    font-weight: 700;
    color: var(--fc-text-primary);
    margin: 0 0 var(--space-md) 0;
    padding-bottom: var(--space-sm);
    border-bottom: 1px solid var(--fc-border);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.card-title i[b-q502aozksr] {
    color: var(--fc-primary);
    font-size: 1rem;
}

/* Form Elements */
.form-grid[b-q502aozksr] {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-md);
    margin-bottom: var(--space-md);
}

.form-group[b-q502aozksr] {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

.full-width[b-q502aozksr] {
    grid-column: 1 / -1;
}

.form-label[b-q502aozksr] {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--fc-text-secondary);
    margin-bottom: 0.25rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.form-control[b-q502aozksr] {
    padding: var(--space-sm) var(--space-md);
    border: 1px solid var(--fc-border);
    border-radius: var(--fc-radius-sm);
    font-size: var(--font-size-sm);
    color: var(--fc-text-primary);
    background: var(--fc-surface-elevated);
    transition: all 0.2s ease;
}

.form-control:focus[b-q502aozksr] {
    outline: none;
    border-color: var(--fc-primary);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

/* Notification Section */
.notification-section[b-q502aozksr] {
    margin: 1.25rem 0;
    padding: 1rem;
    background: var(--fc-surface);
    border-radius: var(--fc-radius-md);
    border-left: 3px solid var(--fc-primary);
}

.notification-section .form-label[b-q502aozksr] {
    margin-bottom: 0.5rem;
}

.checkbox-group[b-q502aozksr] {
    display: flex;
    flex-wrap: wrap;
    gap: 1.25rem;
    margin-top: 0.625rem;
}

.checkbox-label[b-q502aozksr] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    font-size: 0.875rem;
    color: var(--fc-text-secondary);
    margin: 0;
}

.checkbox-label input[type="checkbox"][b-q502aozksr] {
    width: 16px;
    height: 16px;
    accent-color: var(--fc-primary);
}

/* Payment Summary */
.payment-summary[b-q502aozksr] {
    background: linear-gradient(135deg, var(--fc-surface) 0%, #f1f5f9 100%);
    padding: 1.25rem;
    border-radius: var(--fc-radius-md);
    margin: 1.25rem 0;
    border: 1px solid var(--fc-border);
}

.summary-row[b-q502aozksr] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.875rem;
}

.summary-row span:first-child[b-q502aozksr] {
    color: var(--fc-text-muted);
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 0.04em;
}

.summary-amount[b-q502aozksr] {
    font-size: 1.625rem;
    font-weight: 700;
    color: var(--fc-primary);
}

/* Form Actions */
.form-actions[b-q502aozksr] {
    display: flex;
    gap: 0.875rem;
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid var(--fc-border);
}

.btn[b-q502aozksr] {
    padding: var(--space-sm) var(--space-md);
    border: none;
    border-radius: var(--fc-radius-md);
    font-size: var(--font-size-sm);
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    transition: all 0.2s ease;
    flex: 1;
}

.btn-primary[b-q502aozksr] {
    background: var(--fc-primary);
    color: white;
}

.btn-primary:hover:not(:disabled)[b-q502aozksr] {
    background: var(--fc-primary-dark);
    transform: translateY(-1px);
    box-shadow: var(--fc-shadow-md);
}

.btn-primary:disabled[b-q502aozksr] {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

.btn-secondary[b-q502aozksr] {
    background: var(--fc-surface);
    color: var(--fc-text-secondary);
    border: 1px solid var(--fc-border);
    flex: 0 0 auto;
}

.btn-secondary:hover[b-q502aozksr] {
    background: var(--fc-border);
    color: var(--fc-text-primary);
}

/* =============================================================================
   SIBLING PAYMENT SECTION
   ============================================================================= */

.btn-sibling[b-q502aozksr] {
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
    padding: 0.625rem 1rem !important;
    background: linear-gradient(135deg, #7c3aed 0%, #6d28d9 100%) !important;
    color: white !important;
    border: none !important;
    border-radius: var(--fc-radius-md) !important;
    font-size: 0.875rem !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    white-space: nowrap !important;
}

.btn-sibling:hover[b-q502aozksr] {
    background: linear-gradient(135deg, #6d28d9 0%, #5b21b6 100%) !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px rgba(124, 58, 237, 0.3) !important;
}

.sibling-card[b-q502aozksr] {
    background: var(--fc-surface-elevated) !important;
    border-radius: var(--fc-radius-lg) !important;
    padding: 1.25rem !important;
    border: 1px solid var(--fc-border) !important;
    box-shadow: var(--fc-shadow-sm) !important;
}

.sibling-list[b-q502aozksr] {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.75rem !important;
    margin-top: 1rem !important;
    max-height: 280px !important;
    overflow-y: auto !important;
}

.sibling-item[b-q502aozksr] {
    border: 1px solid var(--fc-border) !important;
    border-radius: var(--fc-radius-md) !important;
    padding: 1rem !important;
    transition: all 0.2s ease !important;
    background: var(--fc-surface) !important;
}

.sibling-item:hover[b-q502aozksr] {
    border-color: #7c3aed !important;
    background: #faf5ff !important;
}

.sibling-item.selected[b-q502aozksr] {
    border-color: #7c3aed !important;
    background: #f3e8ff !important;
    box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.1) !important;
}

.sibling-header[b-q502aozksr] {
    display: flex !important;
    align-items: center !important;
    gap: 0.75rem !important;
}

.sibling-checkbox[b-q502aozksr] {
    display: flex !important;
    align-items: center !important;
    gap: 0.875rem !important;
    cursor: pointer !important;
    flex: 1 !important;
    margin: 0 !important;
}

.btn-load-sibling-fee[b-q502aozksr] {
    display: flex !important;
    align-items: center !important;
    gap: 0.375rem !important;
    padding: 0.5rem 0.75rem !important;
    background: var(--fc-primary) !important;
    color: white !important;
    border: none !important;
    border-radius: var(--fc-radius-sm) !important;
    font-size: 0.75rem !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
}

.btn-load-sibling-fee:hover[b-q502aozksr] {
    background: var(--fc-primary-dark) !important;
    transform: translateY(-1px) !important;
}

.btn-load-sibling-fee i[b-q502aozksr] {
    font-size: 0.75rem !important;
}

.sibling-checkbox input[type="checkbox"][b-q502aozksr] {
    width: 18px !important;
    height: 18px !important;
    cursor: pointer !important;
    flex-shrink: 0 !important;
    accent-color: #7c3aed !important;
}

.sibling-info[b-q502aozksr] {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 0.375rem !important;
}

.sibling-name[b-q502aozksr] {
    display: flex !important;
    align-items: center !important;
    gap: 0.625rem !important;
    flex-wrap: wrap !important;
}

.sibling-name strong[b-q502aozksr] {
    font-size: 0.9375rem !important;
    color: var(--fc-text-primary) !important;
}

.sibling-class[b-q502aozksr] {
    font-size: 0.75rem !important;
    color: var(--fc-text-muted) !important;
    padding: 0.1875rem 0.5rem !important;
    background: var(--fc-surface-elevated) !important;
    border-radius: 4px !important;
    border: 1px solid var(--fc-border) !important;
    font-weight: 500 !important;
}

.sibling-details[b-q502aozksr] {
    display: flex !important;
    align-items: center !important;
    gap: 1rem !important;
    font-size: 0.8125rem !important;
}

.sibling-sr[b-q502aozksr] {
    color: var(--fc-text-muted) !important;
}

.sibling-balance[b-q502aozksr] {
    color: var(--fc-text-secondary) !important;
}

.sibling-balance strong[b-q502aozksr] {
    color: var(--fc-danger) !important;
}

.sibling-summary[b-q502aozksr] {
    margin-top: 1rem !important;
    padding: 1rem !important;
    background: var(--fc-surface) !important;
    border-radius: var(--fc-radius-md) !important;
    border: 1px solid var(--fc-border) !important;
}

.sibling-summary .summary-row[b-q502aozksr] {
    display: flex !important;
    justify-content: space-between !important;
    padding: 0.375rem 0 !important;
    font-size: 0.875rem !important;
}

.sibling-summary .grand-total-row[b-q502aozksr] {
    border-top: 2px solid #7c3aed !important;
    padding-top: 0.625rem !important;
    margin-top: 0.625rem !important;
    font-size: 1rem !important;
    color: #7c3aed !important;
    font-weight: 700 !important;
}

.sibling-note[b-q502aozksr] {
    margin-top: 1rem !important;
    margin-bottom: 0 !important;
    padding: 0.75rem 1rem !important;
    font-size: 0.8125rem !important;
    background: #eff6ff !important;
    border: 1px solid #bfdbfe !important;
    color: var(--fc-primary) !important;
    border-radius: var(--fc-radius-md) !important;
}

.sibling-note i[b-q502aozksr] {
    margin-right: 0.5rem !important;
}

/* Sibling Pay Button */
.btn-sibling-pay[b-q502aozksr] {
    width: 100%;
    margin-top: 1rem;
    padding: 0.875rem 1.5rem;
    font-size: 1rem;
    font-weight: 700;
    border-radius: var(--fc-radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.625rem;
    background: linear-gradient(135deg, var(--fc-success) 0%, #047857 100%);
    border: none;
    color: white;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-sibling-pay:hover:not(:disabled)[b-q502aozksr] {
    background: linear-gradient(135deg, #047857 0%, #065f46 100%);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(5, 150, 105, 0.3);
}

.btn-sibling-pay:disabled[b-q502aozksr] {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

/* =============================================================================
   MIXED PAYMENT SECTION
   ============================================================================= */

.mixed-payment-toggle[b-q502aozksr] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.875rem 1rem;
    background: var(--fc-surface);
    border-radius: var(--fc-radius-md);
    cursor: pointer;
    border: 1px solid var(--fc-border);
    transition: all 0.2s ease;
    width: 100%;
}

.mixed-payment-toggle:hover[b-q502aozksr] {
    border-color: var(--fc-primary);
    background: rgba(37, 99, 235, 0.04);
}

.mixed-payment-toggle input[type="checkbox"][b-q502aozksr] {
    width: 18px;
    height: 18px;
    cursor: pointer;
    accent-color: var(--fc-primary);
    flex-shrink: 0;
}

.mixed-payment-toggle label[b-q502aozksr] {
    font-weight: 600;
    font-size: 0.875rem;
    color: var(--fc-text-secondary);
    cursor: pointer;
    margin: 0;
}

.mixed-payment-section[b-q502aozksr] {
    background: var(--fc-surface);
    border-radius: var(--fc-radius-lg);
    padding: 1.25rem;
    margin-top: 1rem;
    border: 1px solid var(--fc-border);
}

.mixed-payment-header[b-q502aozksr] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--fc-border);
}

.mixed-total[b-q502aozksr] {
    font-weight: 600;
    color: var(--fc-text-secondary);
    font-size: 0.875rem;
}

.mixed-remaining[b-q502aozksr] {
    font-weight: 700;
}

.mixed-payment-part[b-q502aozksr] {
    background: var(--fc-surface-elevated);
    border: 1px solid var(--fc-border);
    border-radius: var(--fc-radius-md);
    padding: 1rem;
    margin-bottom: 0.75rem;
}

.part-row[b-q502aozksr] {
    display: flex;
    gap: 0.625rem;
    align-items: center;
}

.part-mode[b-q502aozksr] {
    flex: 1;
    min-width: 120px;
}

.part-amount[b-q502aozksr] {
    flex: 1;
    min-width: 120px;
}

.part-details[b-q502aozksr] {
    display: flex;
    gap: 0.625rem;
    margin-top: 0.625rem;
    flex-wrap: wrap;
}

.part-details input[b-q502aozksr] {
    flex: 1;
    min-width: 140px;
}

.add-part-btn[b-q502aozksr] {
    width: 100%;
    margin-top: 0.625rem;
}

/* =============================================================================
   RESPONSIVE DESIGN
   ============================================================================= */

@media (max-width: 1200px) {
    .fee-collection-container[b-q502aozksr] {
        grid-template-columns: 1fr 340px;
    }
}

@media (max-width: 1024px) {
    .fee-collection-container[b-q502aozksr] {
        grid-template-columns: 1fr;
        min-height: auto;
    }

    .left-panel[b-q502aozksr],
    .right-panel[b-q502aozksr] {
        overflow: visible;
    }

    .fee-table-card[b-q502aozksr] {
        max-height: 500px;
    }
}

@media (max-width: 768px) {
    .collect-fee[b-q502aozksr] {
        padding: 1rem;
    }

    .fee-header[b-q502aozksr] {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }

    .search-bar[b-q502aozksr] {
        flex-wrap: wrap;
    }

    .search-input[b-q502aozksr] {
        flex: 1 1 100%;
    }

    .btn-search[b-q502aozksr] {
        flex: 1;
    }

    .btn-sibling[b-q502aozksr] {
        flex: 1;
    }
}

/* =============================================================================
   SUCCESS MODAL
   ============================================================================= */

.success-modal-overlay[b-q502aozksr] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(15, 23, 42, 0.6);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    animation: fadeIn-b-q502aozksr 0.2s ease;
}

@keyframes fadeIn-b-q502aozksr {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.success-modal[b-q502aozksr] {
    background: var(--fc-surface-elevated);
    border-radius: var(--fc-radius-lg);
    padding: 2rem;
    max-width: 420px;
    width: 90%;
    text-align: center;
    position: relative;
    box-shadow: var(--fc-shadow-lg);
    animation: slideUp-b-q502aozksr 0.3s ease;
}

@keyframes slideUp-b-q502aozksr {
    from {
        opacity: 0;
        transform: translateY(20px) scale(0.95);
    }

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

.success-modal__icon[b-q502aozksr] {
    width: 72px;
    height: 72px;
    background: linear-gradient(135deg, var(--fc-success) 0%, #047857 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.5rem;
    animation: scaleIn-b-q502aozksr 0.4s ease 0.1s both;
}

@keyframes scaleIn-b-q502aozksr {
    from {
        transform: scale(0);
    }

    to {
        transform: scale(1);
    }
}

.success-modal__icon i[b-q502aozksr] {
    font-size: 2rem;
    color: white;
}

.success-modal__title[b-q502aozksr] {
    font-size: 1.375rem;
    font-weight: 700;
    color: var(--fc-text-primary);
    margin: 0 0 1rem;
}

.success-modal__details[b-q502aozksr] {
    background: var(--fc-surface);
    border-radius: var(--fc-radius-md);
    padding: 1rem 1.25rem;
    margin-bottom: 1.5rem;
    border: 1px solid var(--fc-border);
}

.success-modal__receipt-no[b-q502aozksr] {
    font-size: 1rem;
    color: var(--fc-text-secondary);
    margin-bottom: 0.375rem;
}

.success-modal__receipt-no strong[b-q502aozksr] {
    color: var(--fc-success);
    font-size: 1.25rem;
}

.success-modal__date[b-q502aozksr],
.success-modal__student[b-q502aozksr] {
    font-size: 0.875rem;
    color: var(--fc-text-muted);
    margin-top: 0.25rem;
}

.success-modal__actions[b-q502aozksr] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.success-modal__actions .btn[b-q502aozksr] {
    padding: 0.875rem 1.5rem;
    border-radius: var(--fc-radius-md);
    font-size: 0.9375rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    border: none;
}

.success-modal__actions .btn-primary[b-q502aozksr] {
    background: linear-gradient(135deg, var(--fc-primary) 0%, var(--fc-primary-dark) 100%);
    color: white;
}

.success-modal__actions .btn-primary:hover[b-q502aozksr] {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.4);
}

.success-modal__actions .btn-secondary[b-q502aozksr] {
    background: var(--fc-surface);
    color: var(--fc-text-secondary);
    border: 1px solid var(--fc-border);
}

.success-modal__actions .btn-secondary:hover[b-q502aozksr] {
    background: var(--fc-border);
    color: var(--fc-text-primary);
}

.success-modal__actions .btn-outline[b-q502aozksr] {
    background: transparent;
    color: var(--fc-text-secondary);
    border: 1px solid var(--fc-border);
}

.success-modal__actions .btn-outline:hover[b-q502aozksr] {
    border-color: var(--fc-primary);
    color: var(--fc-primary);
    background: rgba(37, 99, 235, 0.04);
}

.success-modal__close[b-q502aozksr] {
    position: absolute;
    top: 1rem;
    right: 1rem;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--fc-surface);
    border: 1px solid var(--fc-border);
    color: var(--fc-text-muted);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.success-modal__close:hover[b-q502aozksr] {
    background: var(--fc-border);
    color: var(--fc-text-primary);
}

/* =============================================================================
   UTILITY CLASSES
   ============================================================================= */

.text-right[b-q502aozksr] {
    text-align: right;
}

.text-center[b-q502aozksr] {
    text-align: center;
}

.fw-bold[b-q502aozksr] {
    font-weight: 700;
}

.w-100[b-q502aozksr] {
    width: 100%;
}

.mb-2[b-q502aozksr] {
    margin-bottom: 0.5rem;
}

.small[b-q502aozksr] {
    font-size: 0.8125rem;
}

.text-primary[b-q502aozksr] {
    color: var(--fc-primary) !important;
}

/* =============================================================================
   SIBLING PAYMENT MULTI-STUDENT SELECTION
   ============================================================================= */

.sibling-count-badge[b-q502aozksr] {
    font-size: 0.75rem;
    font-weight: 500;
    color: #7c3aed;
    background: #f3e8ff;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    margin-left: 0.5rem;
}

.editing-indicator[b-q502aozksr] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.875rem 1rem;
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    border: 1px solid #f59e0b;
    border-radius: var(--fc-radius-md);
    margin-bottom: 1rem;
    color: #92400e;
    font-size: 0.875rem;
}

.editing-indicator i[b-q502aozksr] {
    color: #f59e0b;
}

.btn-update-selection[b-q502aozksr] {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.5rem 1rem;
    background: #059669;
    color: white;
    border: none;
    border-radius: var(--fc-radius-sm);
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-update-selection:hover[b-q502aozksr] {
    background: #047857;
    transform: translateY(-1px);
}

.sibling-selections-list[b-q502aozksr] {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
    margin-bottom: 1rem;
}

.sibling-selection-item[b-q502aozksr] {
    padding: 0.875rem 1rem;
    background: var(--fc-surface);
    border: 1px solid var(--fc-border);
    border-radius: var(--fc-radius-md);
    transition: all 0.2s ease;
}

.sibling-selection-item.editing[b-q502aozksr] {
    border-color: #f59e0b;
    background: #fffbeb;
    box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.1);
}

.sibling-selection-item.has-fees[b-q502aozksr] {
    border-color: #10b981;
    background: #ecfdf5;
}

.sibling-selection-item.no-fees[b-q502aozksr] {
    border-color: var(--fc-border);
    background: #f9fafb;
}

.selection-header[b-q502aozksr] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
}

.selection-student-info[b-q502aozksr] {
    display: flex;
    align-items: center;
    gap: 0.625rem;
}

.selection-student-info strong[b-q502aozksr] {
    font-size: 0.9375rem;
    color: var(--fc-text-primary);
}

.selection-class[b-q502aozksr] {
    font-size: 0.6875rem;
    color: var(--fc-text-muted);
    padding: 0.125rem 0.375rem;
    background: var(--fc-surface-elevated);
    border-radius: 3px;
    border: 1px solid var(--fc-border);
}

.selection-amount[b-q502aozksr] {
    font-size: 1rem;
    font-weight: 700;
}

.selection-amount.positive[b-q502aozksr] {
    color: #059669;
}

.selection-amount.zero[b-q502aozksr] {
    color: var(--fc-text-muted);
}

.selection-details[b-q502aozksr] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.8125rem;
}

.selection-fee-count[b-q502aozksr] {
    color: var(--fc-text-muted);
}

.btn-edit-selection[b-q502aozksr] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.375rem 0.625rem;
    background: transparent;
    color: var(--fc-primary);
    border: 1px solid var(--fc-primary);
    border-radius: var(--fc-radius-sm);
    font-size: 0.6875rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-edit-selection:hover[b-q502aozksr] {
    background: var(--fc-primary);
    color: white;
}

.badge-editing[b-q502aozksr] {
    font-size: 0.6875rem;
    font-weight: 600;
    color: #f59e0b;
    background: #fef3c7;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    border: 1px solid #fde68a;
}

/* =============================================================================
   MONTHLY FEE PERMISSION BANNER
   ============================================================================= */

.monthly-permission-banner[b-q502aozksr] {
    background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%);
    border: 1px solid #10b981;
    border-radius: var(--fc-radius-lg);
    padding: 0.875rem 1rem;
    margin-bottom: 0.5rem;
    box-shadow: 0 2px 8px rgba(16, 185, 129, 0.15);
}

.banner-content[b-q502aozksr] {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.banner-icon[b-q502aozksr] {
    width: 40px;
    height: 40px;
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.banner-icon i[b-q502aozksr] {
    color: white;
    font-size: 1rem;
}

.banner-text[b-q502aozksr] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.banner-text strong[b-q502aozksr] {
    font-size: 0.9375rem;
    color: #065f46;
    font-weight: 700;
}

.banner-details[b-q502aozksr] {
    font-size: 0.8125rem;
    color: #047857;
    font-weight: 500;
}

.banner-badge[b-q502aozksr] {
    flex-shrink: 0;
}

.banner-title[b-q502aozksr] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.banner-app-no[b-q502aozksr] {
    font-size: 0.8125rem;
    color: #047857;
    font-weight: 500;
}

.banner-approval-info[b-q502aozksr] {
    font-size: 0.75rem;
    color: #065f46;
    display: flex;
    align-items: center;
    gap: 0.375rem;
    margin-top: 0.25rem;
}

.banner-approval-info i[b-q502aozksr] {
    color: #10b981;
    font-size: 0.75rem;
}

.banner-actions[b-q502aozksr] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.5rem;
    flex-shrink: 0;
}

.banner-actions .badge[b-q502aozksr] {
    font-size: 0.75rem;
    padding: 0.375rem 0.75rem;
    font-weight: 600;
}

.btn-view-app[b-q502aozksr] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.375rem 0.75rem;
    background: #047857;
    color: white;
    border: none;
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-view-app:hover[b-q502aozksr] {
    background: #065f46;
    transform: translateY(-1px);
}

/* =============================================================================
   MONTHLY FEE ROWS
   ============================================================================= */

.fee-table .row-monthly[b-q502aozksr] {
    background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%) !important;
    border-left: 3px solid #10b981;
}

.fee-table .row-monthly td[b-q502aozksr] {
    background: transparent !important;
}

.fee-table .row-monthly:hover[b-q502aozksr] {
    background: linear-gradient(135deg, #dcfce7 0%, #bbf7d0 100%) !important;
}

.monthly-fee-indicator[b-q502aozksr] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    background: #10b981;
    color: white;
    border-radius: 4px;
    margin-right: 0.5rem;
    font-size: 0.65rem;
}

/* Monthly header styling */
.fee-table .quarter-header td:has(text:contains("MONTHLY"))[b-q502aozksr] {
    color: #059669 !important;
    background: #ecfdf5 !important;
}

/* Locked/Not Permitted month rows */
.fee-table .row-locked[b-q502aozksr] {
    background: #f9fafb !important;
    opacity: 0.6;
}

.fee-table .row-locked td[b-q502aozksr] {
    background: transparent !important;
    color: #9ca3af !important;
}

.fee-table .row-locked .fee-amount[b-q502aozksr] {
    color: #9ca3af !important;
}

.fee-table .row-locked .monthly-fee-indicator[b-q502aozksr] {
    background: #9ca3af;
}

/* Remaining Quarter Fee Rows (non-permitted months as collective) */
.fee-table .row-remaining[b-q502aozksr] {
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%) !important;
    border-left: 3px solid #f59e0b;
}

/* =============================================================================
   FINE ROWS - Late Payment Fee
   ============================================================================= */

.fee-table .row-fine[b-q502aozksr] {
    background: transparent !important;
}

.fee-table .row-fine td[b-q502aozksr] {
    background: transparent !important;
}

.fee-table .row-fine:hover[b-q502aozksr] {
    background: linear-gradient(135deg, #fee2e2 0%, #fca5a5 100%) !important;
}

.fine-indicator[b-q502aozksr] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    background: #dc2626;
    color: white;
    border-radius: 4px;
    margin-right: 0.5rem;
    font-size: 0.65rem;
}

.fee-table .row-fine.row-paid[b-q502aozksr] {
    background: rgba(5, 150, 105, 0.08) !important;
}

.fee-table .row-fine.row-paid .fine-indicator[b-q502aozksr] {
    background: #059669;
}

.fee-table .row-remaining td[b-q502aozksr] {
    background: transparent !important;
}

.fee-table .row-remaining:hover[b-q502aozksr] {
    background: linear-gradient(135deg, #fde68a 0%, #fcd34d 100%) !important;
}

.remaining-fee-indicator[b-q502aozksr] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    background: #f59e0b;
    color: white;
    border-radius: 4px;
    margin-right: 0.5rem;
    font-size: 0.65rem;
}
/* /Areas/Accounts/Pages/FeeClerk/Components/ReceiptDetailModal.razor.rz.scp.css */
.modal-overlay[b-qvh1l74h8o] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    padding: 20px;
}

.receipt-modal-container[b-qvh1l74h8o] {
    background: white;
    border-radius: 8px;
    max-width: 750px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
}

.receipt-actions[b-qvh1l74h8o] {
    display: flex;
    gap: 12px;
    justify-content: center;
    padding: 16px;
    background: #f8f9fa;
    border-bottom: 1px solid #dee2e6;
    position: sticky;
    top: 0;
    z-index: 10;
}

.action-btn[b-qvh1l74h8o] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    background: white;
    border: 2px solid #dee2e6;
    border-radius: 6px;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s ease;
    color: #495057;
}

.action-btn:hover[b-qvh1l74h8o] {
    background: #0d6efd;
    border-color: #0d6efd;
    color: white;
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(13, 110, 253, 0.2);
}

.receipt-container[b-qvh1l74h8o] {
    background: white;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
    font-size: 14px;
    line-height: 1.6;
    color: #212529;
    position: relative;
}

.receipt-header[b-qvh1l74h8o] {
    background: #FFFFFF;
    padding: 20px;
    border-bottom: 3px solid #2a5298;
}

.school-info[b-qvh1l74h8o] {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.school-name[b-qvh1l74h8o] {
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 5px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #1e3c72;
}

.school-details[b-qvh1l74h8o] {
    font-size: 11px;
    line-height: 1.4;
    opacity: 0.9;
}

.school-details p[b-qvh1l74h8o] {
    margin: 2px 0;
}

.school-logo img[b-qvh1l74h8o] {
    height: 120px;
    width: auto;
}

.logo-section[b-qvh1l74h8o] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

.copy-indicator[b-qvh1l74h8o] {
    font-size: 14px;
    font-weight: 700;
    color: #2a5298;
    text-transform: uppercase;
    padding: 5px 15px;
    border: 2px solid #2a5298;
    border-radius: 5px;
}

.invoice-info[b-qvh1l74h8o] {
    display: flex;
    justify-content: space-between;
    padding: 12px 20px;
    background-color: #f8f9fa;
    border-bottom: 1px solid #e9ecef;
}

.invoice-detail[b-qvh1l74h8o] {
    display: flex;
    align-items: center;
    gap: 5px;
}

.invoice-label[b-qvh1l74h8o] {
    font-weight: 600;
    color: #6c757d;
    font-size: 11px;
}

.invoice-value[b-qvh1l74h8o] {
    font-weight: 500;
    color: #2a5298;
    font-size: 12px;
}

.payment-status-badge[b-qvh1l74h8o] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 16px;
    background: linear-gradient(135deg, #d4edda 0%, #c3e6cb 100%);
    color: #155724;
    border-radius: 20px;
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 0.5px;
}

.student-info[b-qvh1l74h8o] {
    padding: 15px 20px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}

.info-group[b-qvh1l74h8o] {
    margin-bottom: 8px;
}

.info-label[b-qvh1l74h8o] {
    font-size: 10px;
    color: #6c757d;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 2px;
}

.info-value[b-qvh1l74h8o] {
    font-size: 12px;
    font-weight: 500;
    color: #333;
}

.fee-summary[b-qvh1l74h8o] {
    margin: 0 20px;
    border: 1px solid #e9ecef;
    border-radius: 5px;
    overflow: hidden;
}

.summary-header[b-qvh1l74h8o] {
    background-color: #2a5298;
    color: white;
    padding: 8px 15px;
    font-size: 14px;
    font-weight: 600;
    text-align: center;
}

.fee-table[b-qvh1l74h8o] {
    width: 100%;
    border-collapse: collapse;
}

.fee-table th[b-qvh1l74h8o] {
    background-color: #f8f9fa;
    padding: 8px;
    text-align: left;
    font-weight: 600;
    color: #495057;
    font-size: 11px;
    border-bottom: 1px solid #dee2e6;
}

.fee-table td[b-qvh1l74h8o] {
    padding: 8px;
    border-bottom: 1px solid #e9ecef;
    font-size: 11px;
}

.fee-table th:last-child[b-qvh1l74h8o],
.fee-table td:last-child[b-qvh1l74h8o] {
    text-align: right;
}

.total-section[b-qvh1l74h8o] {
    background-color: #f8f9fa;
    padding: 12px;
    margin: 10px 20px;
    border-radius: 5px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.total-label[b-qvh1l74h8o] {
    font-size: 14px;
    font-weight: 600;
    color: #333;
}

.total-amount[b-qvh1l74h8o] {
    font-size: 18px;
    font-weight: 700;
    color: #2a5298;
}

.payment-method[b-qvh1l74h8o] {
    padding: 12px 20px;
    background-color: #e9ecef;
}

.payment-header[b-qvh1l74h8o] {
    font-size: 12px;
    font-weight: 600;
    margin-bottom: 8px;
    color: #333;
}

.payment-details[b-qvh1l74h8o] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
}

.payment-info[b-qvh1l74h8o] {
    background-color: white;
    padding: 8px;
    border-radius: 5px;
    border: 1px solid #dee2e6;
}

.receipt-footer[b-qvh1l74h8o] {
    padding: 20px;
    border-top: 1px solid #e9ecef;
}

.footer-content-wrapper[b-qvh1l74h8o] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.footer-left-section[b-qvh1l74h8o] {
    flex: 1;
}

.footer-info[b-qvh1l74h8o] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
    margin-bottom: 30px;
    font-size: 11px;
    color: #6c757d;
    font-weight: 500;
}

.footer-info > div[b-qvh1l74h8o] {
    display: flex;
    gap: 6px;
}

.footer-info span:first-child[b-qvh1l74h8o] {
    font-weight: 600;
}

.signature-section[b-qvh1l74h8o] {
    display: flex;
    justify-content: space-between;
    margin: 20px 30px 10px 30px;
}

.signature-box[b-qvh1l74h8o] {
    text-align: center;
    width: 150px;
}

.signature-line[b-qvh1l74h8o] {
    border-top: 1px solid #333;
    margin-bottom: 8px;
    width: 100%;
}

.signature-label[b-qvh1l74h8o] {
    font-size: 11px;
    color: #6c757d;
    font-weight: 500;
}

.security-strip[b-qvh1l74h8o] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 16px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    font-size: 11px;
    font-weight: 600;
    border-radius: 6px;
    margin-top: 15px;
}

.footer-note[b-qvh1l74h8o] {
    text-align: center;
    margin: 10px 0 5px 0;
    font-size: 11px;
    color: #6c757d;
    font-style: italic;
}

@media print {
    .receipt-actions[b-qvh1l74h8o] {
        display: none !important;
    }

    .modal-overlay[b-qvh1l74h8o] {
        background: white;
        position: static;
    }

    .receipt-modal-container[b-qvh1l74h8o] {
        max-width: 100%;
        box-shadow: none;
    }
}
/* /Areas/Accounts/Pages/FeeClerk/FeeStatement.razor.rz.scp.css */
/* Page Container */
.page-container[b-l7zf5med3b] {
    padding: 2rem;
    max-width: 1400px;
    margin: 0 auto;
}

.page-header[b-l7zf5med3b] {
    margin-bottom: 2rem;
}

.page-header h2[b-l7zf5med3b] {
    font-size: 1.75rem;
    font-weight: 600;
    color: #1a1a1a;
    margin: 0 0 0.5rem 0;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.page-header h2 i[b-l7zf5med3b] {
    color: #0066cc;
}

/* Search Section */
.search-section[b-l7zf5med3b] {
    margin-bottom: 2rem;
}

.search-card[b-l7zf5med3b] {
    background: white;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    overflow: hidden;
}

.search-header[b-l7zf5med3b] {
    background: linear-gradient(135deg, #0066cc 0%, #0052a3 100%);
    color: white;
    padding: 1rem 1.5rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-weight: 500;
}

.search-body[b-l7zf5med3b] {
    padding: 1.5rem;
}

.form-row[b-l7zf5med3b] {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 1rem;
    align-items: end;
}

.form-group[b-l7zf5med3b] {
    display: flex;
    flex-direction: column;
}

.form-group label[b-l7zf5med3b] {
    font-weight: 500;
    margin-bottom: 0.5rem;
    color: #333;
    font-size: 0.9rem;
}

.form-control[b-l7zf5med3b] {
    padding: 0.75rem 1rem;
    border: 2px solid #e0e0e0;
    border-radius: 8px;
    font-size: 1rem;
    transition: all 0.3s ease;
}

.form-control:focus[b-l7zf5med3b] {
    outline: none;
    border-color: #0066cc;
    box-shadow: 0 0 0 3px rgba(0, 102, 204, 0.1);
}

/* Buttons */
.btn[b-l7zf5med3b] {
    padding: 0.75rem 1.5rem;
    border: none;
    border-radius: 8px;
    font-weight: 500;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    transition: all 0.3s ease;
    font-size: 1rem;
}

.btn-primary[b-l7zf5med3b] {
    background: linear-gradient(135deg, #0066cc 0%, #0052a3 100%);
    color: white;
}

.btn-primary:hover:not(:disabled)[b-l7zf5med3b] {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 102, 204, 0.3);
}

.btn-primary:disabled[b-l7zf5med3b] {
    opacity: 0.6;
    cursor: not-allowed;
}

.btn-secondary[b-l7zf5med3b] {
    background: #6c757d;
    color: white;
}

.btn-secondary:hover[b-l7zf5med3b] {
    background: #5a6268;
}

.btn-sm[b-l7zf5med3b] {
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
}

/* Alerts */
.alert[b-l7zf5med3b] {
    padding: 1rem;
    border-radius: 8px;
    margin-top: 1rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.alert-danger[b-l7zf5med3b] {
    background: #fee;
    color: #c00;
    border: 1px solid #fcc;
}

.alert-info[b-l7zf5med3b] {
    background: #e7f3ff;
    color: #0066cc;
    border: 1px solid #b3d9ff;
}

/* Statement Section */
.statement-section[b-l7zf5med3b] {
    margin-top: 2rem;
}

.statement-card[b-l7zf5med3b] {
    background: white;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    overflow: hidden;
}

/* Statement Header */
.statement-header[b-l7zf5med3b] {
    background: linear-gradient(135deg, #0066cc 0%, #0052a3 100%);
    color: white;
    padding: 2rem;
    text-align: center;
    position: relative;
}

.school-info h2[b-l7zf5med3b] {
    margin: 0;
    font-size: 2rem;
    font-weight: 700;
}

.school-info p[b-l7zf5med3b] {
    margin: 0.5rem 0 0 0;
    font-size: 1.125rem;
    opacity: 0.95;
}

.session-info[b-l7zf5med3b] {
    font-size: 0.875rem;
    opacity: 0.85;
}

.print-button-container[b-l7zf5med3b] {
    position: absolute;
    top: 1rem;
    right: 1rem;
}

/* Student Info Section */
.student-info-section[b-l7zf5med3b] {
    padding: 2rem;
    border-bottom: 2px solid #e9ecef;
}

.section-title[b-l7zf5med3b] {
    font-size: 1.125rem;
    font-weight: 600;
    color: #0066cc;
    margin: 0 0 1rem 0;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid #e9ecef;
}

.info-grid[b-l7zf5med3b] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
}

.info-item[b-l7zf5med3b] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.info-item .label[b-l7zf5med3b] {
    font-size: 0.875rem;
    color: #666;
    font-weight: 500;
}

.info-item .value[b-l7zf5med3b] {
    font-size: 1rem;
    color: #1a1a1a;
    font-weight: 600;
}

/* Fee Summary Cards */
.fee-summary[b-l7zf5med3b] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    padding: 2rem;
    background: #f8f9fa;
}

.summary-card[b-l7zf5med3b] {
    background: white;
    border-radius: 12px;
    padding: 1.5rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
}

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

.summary-icon[b-l7zf5med3b] {
    width: 60px;
    height: 60px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
}

.total-payable .summary-icon[b-l7zf5med3b] {
    background: rgba(0, 102, 204, 0.1);
    color: #0066cc;
}

.total-paid .summary-icon[b-l7zf5med3b] {
    background: rgba(40, 167, 69, 0.1);
    color: #28a745;
}

.total-balance .summary-icon[b-l7zf5med3b] {
    background: rgba(255, 193, 7, 0.1);
    color: #ffc107;
}

.total-balance.clear .summary-icon[b-l7zf5med3b] {
    background: rgba(40, 167, 69, 0.1);
    color: #28a745;
}

.total-balance.pending .summary-icon[b-l7zf5med3b] {
    background: rgba(220, 53, 69, 0.1);
    color: #dc3545;
}

.summary-content[b-l7zf5med3b] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.summary-label[b-l7zf5med3b] {
    font-size: 0.875rem;
    color: #666;
    font-weight: 500;
}

.summary-amount[b-l7zf5med3b] {
    font-size: 1.5rem;
    font-weight: 700;
    color: #1a1a1a;
}

/* Fee Breakdown Section */
.fee-breakdown-section[b-l7zf5med3b] {
    padding: 2rem;
}

.table-responsive[b-l7zf5med3b] {
    overflow-x: auto;
    margin-top: 1rem;
}

.fee-statement-table[b-l7zf5med3b] {
    width: 100%;
    border-collapse: collapse;
}

.fee-statement-table thead[b-l7zf5med3b] {
    background: #f8f9fa;
}

.fee-statement-table th[b-l7zf5med3b] {
    padding: 1rem;
    text-align: left;
    font-weight: 600;
    color: #333;
    border-bottom: 2px solid #dee2e6;
    font-size: 0.875rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.fee-statement-table td[b-l7zf5med3b] {
    padding: 1rem;
    border-bottom: 1px solid #dee2e6;
}

.fee-statement-table tbody tr[b-l7zf5med3b] {
    transition: background 0.2s ease;
}

.fee-statement-table tbody tr:hover[b-l7zf5med3b] {
    background: #f8f9fa;
}

.fee-statement-table tbody tr.pending-row[b-l7zf5med3b] {
    background: rgba(255, 193, 7, 0.05);
}

.fee-statement-table tbody tr.pending-row:hover[b-l7zf5med3b] {
    background: rgba(255, 193, 7, 0.1);
}

.fee-head-name[b-l7zf5med3b] {
    font-weight: 500;
    color: #1a1a1a;
}

.text-right[b-l7zf5med3b] {
    text-align: right;
}

.text-center[b-l7zf5med3b] {
    text-align: center;
}

.text-danger[b-l7zf5med3b] {
    color: #dc3545;
    font-weight: 600;
}

.text-success[b-l7zf5med3b] {
    color: #28a745;
    font-weight: 600;
}

/* Status Badges */
.status-badge[b-l7zf5med3b] {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.375rem 0.75rem;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.status-paid[b-l7zf5med3b] {
    background: rgba(40, 167, 69, 0.1);
    color: #28a745;
}

.status-partial[b-l7zf5med3b] {
    background: rgba(255, 193, 7, 0.1);
    color: #ffc107;
}

.status-pending[b-l7zf5med3b] {
    background: rgba(220, 53, 69, 0.1);
    color: #dc3545;
}

/* Table Footer */
.fee-statement-table tfoot[b-l7zf5med3b] {
    background: #f8f9fa;
}

.total-row td[b-l7zf5med3b] {
    padding: 1.25rem 1rem;
    border-top: 3px solid #0066cc;
    border-bottom: none;
    font-size: 1rem;
}

/* Payment Notice */
.payment-notice[b-l7zf5med3b] {
    margin: 2rem;
    padding: 1.5rem;
    background: rgba(220, 53, 69, 0.05);
    border-left: 4px solid #dc3545;
    border-radius: 8px;
    display: flex;
    gap: 1rem;
}

.payment-notice.success[b-l7zf5med3b] {
    background: rgba(40, 167, 69, 0.05);
    border-left-color: #28a745;
}

.notice-icon[b-l7zf5med3b] {
    font-size: 2rem;
    color: #dc3545;
}

.payment-notice.success .notice-icon[b-l7zf5med3b] {
    color: #28a745;
}

.notice-content[b-l7zf5med3b] {
    flex: 1;
}

.notice-content h4[b-l7zf5med3b] {
    margin: 0 0 0.5rem 0;
    font-size: 1.125rem;
    font-weight: 600;
    color: #1a1a1a;
}

.notice-content p[b-l7zf5med3b] {
    margin: 0 0 1rem 0;
    color: #666;
    line-height: 1.6;
}

/* Statement Footer */
.statement-footer[b-l7zf5med3b] {
    padding: 1.5rem 2rem;
    background: #f8f9fa;
    border-top: 2px solid #e9ecef;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.footer-note[b-l7zf5med3b] {
    color: #666;
    font-size: 0.875rem;
}

.footer-note p[b-l7zf5med3b] {
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.footer-date[b-l7zf5med3b] {
    color: #999;
    font-size: 0.875rem;
}

.footer-date p[b-l7zf5med3b] {
    margin: 0;
}

/* Spinner */
.spinner-border[b-l7zf5med3b] {
    width: 1rem;
    height: 1rem;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: spinner-border-b-l7zf5med3b 0.75s linear infinite;
}

.spinner-border-sm[b-l7zf5med3b] {
    width: 0.875rem;
    height: 0.875rem;
}

@keyframes spinner-border-b-l7zf5med3b {
    to {
        transform: rotate(360deg);
    }
}

/* Responsive */
@media (max-width: 1024px) {
    .fee-summary[b-l7zf5med3b] {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .page-container[b-l7zf5med3b] {
        padding: 1rem;
    }

    .form-row[b-l7zf5med3b] {
        grid-template-columns: 1fr;
    }

    .info-grid[b-l7zf5med3b] {
        grid-template-columns: 1fr;
    }

    .fee-summary[b-l7zf5med3b] {
        grid-template-columns: 1fr;
    }

    .statement-footer[b-l7zf5med3b] {
        flex-direction: column;
        gap: 1rem;
        text-align: center;
    }

    .fee-statement-table[b-l7zf5med3b] {
        font-size: 0.875rem;
    }

    .fee-statement-table th[b-l7zf5med3b],
    .fee-statement-table td[b-l7zf5med3b] {
        padding: 0.75rem 0.5rem;
    }
}

/* Print Styles */
@media print {
    .page-header[b-l7zf5med3b],
    .search-section[b-l7zf5med3b],
    .print-button-container[b-l7zf5med3b],
    .btn[b-l7zf5med3b],
    .print-hide[b-l7zf5med3b] {
        display: none !important;
    }

    .page-container[b-l7zf5med3b] {
        padding: 0;
    }

    .statement-card[b-l7zf5med3b] {
        box-shadow: none;
    }

    .statement-header[b-l7zf5med3b] {
        background: none;
        color: #000;
        border-bottom: 3px solid #000;
    }

    .section-title[b-l7zf5med3b] {
        color: #000;
        border-bottom-color: #000;
    }

    .fee-summary[b-l7zf5med3b] {
        page-break-inside: avoid;
    }

    .payment-notice[b-l7zf5med3b] {
        page-break-inside: avoid;
    }

    .summary-card[b-l7zf5med3b] {
        box-shadow: none;
        border: 1px solid #dee2e6;
    }
}
/* /Areas/Accounts/Pages/FeeClerk/Index.razor.rz.scp.css */
.dashboard[b-jf018tpq60] {
    max-width: 1400px;
    margin: 0 auto;
    padding: 2rem;
    background: var(--bg-primary);
    min-height: 100vh;
}

.dashboard-header[b-jf018tpq60] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 2rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid var(--border);
}

.dashboard-title[b-jf018tpq60] {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 0.25rem 0;
}

.dashboard-subtitle[b-jf018tpq60] {
    font-size: 0.95rem;
    color: var(--text-muted);
    margin: 0;
}

.dashboard-user[b-jf018tpq60] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

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

/* Metrics Grid */
.metrics-grid[b-jf018tpq60] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.25rem;
    margin-bottom: 2rem;
}

.metric-card[b-jf018tpq60] {
    background: var(--card-gradient);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    display: flex;
    gap: 1.25rem;
    transition: all 0.2s ease;
}

.metric-card:hover[b-jf018tpq60] {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.metric-card__icon[b-jf018tpq60] {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-md);
    background: rgba(59, 130, 246, 0.1);
    color: var(--brand-blue);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    flex-shrink: 0;
}

.metric-card__icon--warning[b-jf018tpq60] {
    background: rgba(245, 158, 11, 0.1);
    color: #f59e0b;
}

.metric-card__icon--success[b-jf018tpq60] {
    background: rgba(16, 185, 129, 0.1);
    color: #10b981;
}

.metric-card__content[b-jf018tpq60] {
    flex: 1;
}

.metric-card__label[b-jf018tpq60] {
    font-size: 0.85rem;
    color: var(--text-muted);
    margin-bottom: 0.5rem;
}

.metric-card__value[b-jf018tpq60] {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 0.25rem;
}

.metric-card__status[b-jf018tpq60] {
    font-size: 0.85rem;
    color: var(--text-muted);
}

/* Card */
.card[b-jf018tpq60] {
    background: var(--card-gradient);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 1.75rem;
    margin-bottom: 1.5rem;
}

.card-title[b-jf018tpq60] {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 1.25rem 0;
}

/* Actions Grid */
.actions-grid[b-jf018tpq60] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 1rem;
}

.action-btn[b-jf018tpq60] {
    padding: 1.25rem;
    border: none;
    border-radius: var(--radius-md);
    background: var(--brand-blue);
    color: white;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.65rem;
}

.action-btn i[b-jf018tpq60] {
    font-size: 1.5rem;
}

.action-btn:hover[b-jf018tpq60] {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}

.action-btn--primary[b-jf018tpq60] {
    background: var(--brand-blue);
}

.action-btn--primary:hover[b-jf018tpq60] {
    background: #2563eb;
}

.action-btn--info[b-jf018tpq60] {
    background: #0ea5e9;
}

.action-btn--info:hover[b-jf018tpq60] {
    background: #0284c7;
}

.action-btn--success[b-jf018tpq60] {
    background: #10b981;
}

.action-btn--success:hover[b-jf018tpq60] {
    background: #059669;
}

/* Activity List */
.activity-list[b-jf018tpq60] {
    min-height: 120px;
}

.activity-empty[b-jf018tpq60] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    color: var(--text-muted);
}

.activity-empty i[b-jf018tpq60] {
    font-size: 2.5rem;
    margin-bottom: 0.75rem;
    opacity: 0.4;
}

.activity-empty p[b-jf018tpq60] {
    margin: 0;
    font-size: 0.95rem;
}

/* Responsive */
@media (max-width: 768px) {
    .dashboard[b-jf018tpq60] {
        padding: 1.5rem 1rem;
    }

    .dashboard-header[b-jf018tpq60] {
        flex-direction: column;
        gap: 1rem;
    }

    .dashboard-title[b-jf018tpq60] {
        font-size: 1.5rem;
    }

    .metrics-grid[b-jf018tpq60] {
        grid-template-columns: 1fr;
    }

    .actions-grid[b-jf018tpq60] {
        grid-template-columns: 1fr;
    }
}
/* /Areas/Accounts/Pages/FeeClerk/ReceiptPrint.razor.rz.scp.css */
body[b-svuc8ogfmo] {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
    background-color: #f8f9fa;
    color: #212529;
    font-size: 14px;
    line-height: 1.6;
}

.loading-spinner[b-svuc8ogfmo],
.error-message[b-svuc8ogfmo] {
    text-align: center;
    padding: 50px;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.spinner-border[b-svuc8ogfmo] {
    width: 3rem;
    height: 3rem;
    color: #2a5298;
}

.error-message[b-svuc8ogfmo] {
    color: #dc3545;
}

.receipt-actions[b-svuc8ogfmo] {
    display: flex;
    gap: 12px;
    justify-content: center;
    padding: 20px;
    background: #f8f9fa;
    border-bottom: 1px solid #dee2e6;
}

.action-btn[b-svuc8ogfmo] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    background: white;
    border: 2px solid #dee2e6;
    border-radius: 8px;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s ease;
    text-decoration: none;
    color: #495057;
}

.action-btn:hover[b-svuc8ogfmo] {
    background: #0d6efd;
    border-color: #0d6efd;
    color: white;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(13, 110, 253, 0.2);
}

.receipt-container[b-svuc8ogfmo] {
    max-width: 700px;
    margin: 5px auto;
    background-color: white;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    position: relative;
}

.receipt-header[b-svuc8ogfmo] {
    background: #FFFFFF;
    color: black;
    padding: 15px 20px;
    border-bottom: 3px solid #2a5298;
    margin-bottom: 8px;
}

.school-info[b-svuc8ogfmo] {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.school-name[b-svuc8ogfmo] {
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 5px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #1e3c72;
}

.school-details[b-svuc8ogfmo] {
    font-size: 11px;
    line-height: 1.4;
    opacity: 0.9;
}

.school-details p[b-svuc8ogfmo] {
    margin: 2px 0;
}

.school-logo[b-svuc8ogfmo] {
    padding-left: 10px;
}

.school-logo img[b-svuc8ogfmo] {
    height: 150px;
    width: auto;
}

.copy-indicator[b-svuc8ogfmo] {
    text-align: center;
    font-size: 14px;
    font-weight: 700;
    color: #2a5298;
    text-transform: uppercase;
    padding: 5px 15px;
    border: 1px solid #52678b;
    border-radius: 5px;
    margin-top: 8px;
    display: inline-block;
}

.logo-section[b-svuc8ogfmo] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

.invoice-info[b-svuc8ogfmo] {
    display: flex;
    justify-content: space-between;
    padding: 10px 20px;
    background-color: #f8f9fa;
    border-bottom: 1px solid #e9ecef;
    margin-bottom: 10px;
}

.invoice-detail[b-svuc8ogfmo] {
    display: flex;
    align-items: center;
    gap: 5px;
}

.invoice-label[b-svuc8ogfmo] {
    font-weight: 600;
    color: #6c757d;
    font-size: 11px;
}

.invoice-value[b-svuc8ogfmo] {
    font-weight: 500;
    color: #2a5298;
    font-size: 12px;
}

.payment-status-badge[b-svuc8ogfmo] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 16px;
    background: linear-gradient(135deg, #d4edda 0%, #c3e6cb 100%);
    color: #155724;
    border-radius: 20px;
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 0.5px;
    box-shadow: 0 2px 4px rgba(21, 87, 36, 0.1);
}

.student-info[b-svuc8ogfmo] {
    padding: 12px 20px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    margin-bottom: 10px;
}

.info-group[b-svuc8ogfmo] {
    margin-bottom: 6px;
}

.info-label[b-svuc8ogfmo] {
    font-size: 10px;
    color: #6c757d;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 2px;
}

.info-value[b-svuc8ogfmo] {
    font-size: 12px;
    font-weight: 500;
    color: #333;
}

.fee-summary[b-svuc8ogfmo] {
    margin: 0 20px 10px 20px;
    border: 1px solid #e9ecef;
    border-radius: 5px;
    overflow: hidden;
}

.summary-header[b-svuc8ogfmo] {
    background-color: #2a5298;
    color: white;
    padding: 8px 15px;
    font-size: 14px;
    font-weight: 600;
    text-align: center;
}

.fee-table[b-svuc8ogfmo] {
    width: 100%;
    border-collapse: collapse;
}

.fee-table th[b-svuc8ogfmo] {
    background-color: #f8f9fa;
    padding: 6px;
    text-align: left;
    font-weight: 600;
    color: #495057;
    font-size: 11px;
    border-bottom: 1px solid #dee2e6;
    vertical-align: middle;
}

.fee-table td[b-svuc8ogfmo] {
    padding: 6px;
    border-bottom: 1px solid #e9ecef;
    font-size: 11px;
    vertical-align: middle;
}

.fee-table th:last-child[b-svuc8ogfmo],
.fee-table td:last-child[b-svuc8ogfmo] {
    text-align: right;
}

.total-section[b-svuc8ogfmo] {
    background-color: #f8f9fa;
    padding: 10px;
    margin: 0 20px 10px 20px;
    border-radius: 5px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.total-label[b-svuc8ogfmo] {
    font-size: 14px;
    font-weight: 600;
    color: #333;
}

.total-amount[b-svuc8ogfmo] {
    font-size: 18px;
    font-weight: 700;
    color: #2a5298;
}

.payment-method[b-svuc8ogfmo] {
    padding: 12px 20px;
    background-color: #e9ecef;
    margin-bottom: 10px;
}

.payment-header[b-svuc8ogfmo] {
    font-size: 12px;
    font-weight: 600;
    margin-bottom: 8px;
    color: #333;
}

.payment-details[b-svuc8ogfmo] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
}

.payment-info[b-svuc8ogfmo] {
    background-color: white;
    padding: 8px;
    border-radius: 5px;
    border: 1px solid #dee2e6;
}

.receipt-footer[b-svuc8ogfmo] {
    padding: 15px 20px 15px 20px;
    border-top: 2px solid #e9ecef;
    margin-top: 8px;
}

.footer-content-wrapper[b-svuc8ogfmo] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 20px;
}

.footer-left-section[b-svuc8ogfmo] {
    flex: 1;
}

.footer-info[b-svuc8ogfmo] {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    margin-bottom: 10px;
    font-size: 11px;
    color: #6c757d;
    font-weight: 500;
    flex-wrap: wrap;
}

.footer-info>div[b-svuc8ogfmo] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    text-align: left;
}

.footer-info span:first-child[b-svuc8ogfmo] {
    font-weight: 600;
}

.footer-qr-section[b-svuc8ogfmo] {
    display: flex !important;
    align-items: flex-end !important;
    justify-content: center !important;
    padding: 10px;
    padding-left: 20px;
    align-self: flex-end;
}

.signature-section[b-svuc8ogfmo] {
    display: flex;
    justify-content: flex-start;
    gap: 100px;
    margin: 5px 30px 8px 30px;
}

.signature-box[b-svuc8ogfmo] {
    text-align: center;
    width: 150px;
}

.signature-line[b-svuc8ogfmo] {
    border-top: 1px solid #333;
    margin-bottom: 8px;
    width: 100%;
}

.signature-label[b-svuc8ogfmo] {
    font-size: 11px;
    color: #6c757d;
    font-weight: 500;
}

.qr-code-container[b-svuc8ogfmo] {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    padding: 8px !important;
    background: #ffffff !important;
    border: 1px solid #dee2e6 !important;
    border-radius: 8px !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1) !important;
    min-width: auto;
    max-width: 100px;
}

.qr-code-container img[b-svuc8ogfmo] {
    width: 70px !important;
    height: 70px !important;
    margin-bottom: 5px !important;
    display: block !important;
}

.qr-label[b-svuc8ogfmo] {
    font-size: 9px !important;
    font-weight: 700 !important;
    color: #2a5298 !important;
    margin-bottom: 2px !important;
    text-align: center !important;
}

.qr-verification-text[b-svuc8ogfmo] {
    font-size: 8px !important;
    color: #6c757d !important;
    text-align: center !important;
    font-weight: 500 !important;
}

.security-strip[b-svuc8ogfmo] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 4px 10px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    font-size: 9px;
    font-weight: 600;
    border-radius: 6px 6px 0 0;
    margin-top: 8px;
}

.footer-note[b-svuc8ogfmo] {
    text-align: center;
    margin: 2px 0 3px 0;
    font-size: 10px;
    color: #6c757d;
    line-height: 1.4;
}

.page-break[b-svuc8ogfmo] {
    display: none;
}

.address-section[b-svuc8ogfmo] {
    grid-column: 1 / -1;
}

.amount-words[b-svuc8ogfmo] {
    font-size: 11px;
    color: #6c757d;
    text-align: center;
    padding: 5px 20px;
    font-style: italic;
}

.quarter-status[b-svuc8ogfmo] {
    padding: 0 20px 10px;
}

.quarter-header[b-svuc8ogfmo] {
    font-size: 12px;
    font-weight: 600;
    margin-bottom: 8px;
    color: #333;
}

.quarter-grid[b-svuc8ogfmo] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
}

.quarter-box[b-svuc8ogfmo] {
    background-color: #f8f9fa;
    padding: 8px;
    border-radius: 5px;
    text-align: center;
    border: 1px solid #e9ecef;
}

.quarter-box.paid[b-svuc8ogfmo] {
    background-color: #d4edda;
    border-color: #28a745;
}

.quarter-name[b-svuc8ogfmo] {
    font-size: 10px;
    font-weight: 600;
    color: #495057;
    margin-bottom: 2px;
}

.quarter-amount[b-svuc8ogfmo] {
    font-size: 12px;
    font-weight: 700;
    color: #333;
}

.mixed-payment-notice[b-svuc8ogfmo] {
    margin-bottom: 12px;
    padding: 8px;
    background: #fff3cd;
    border-left: 4px solid #ffc107;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
    color: #856404;
}

.payment-parts-table[b-svuc8ogfmo] {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 0;
}

.payment-parts-table thead tr[b-svuc8ogfmo] {
    background-color: #f8f9fa;
}

.payment-parts-table th[b-svuc8ogfmo] {
    padding: 8px;
    border-bottom: 2px solid #ddd;
    font-size: 11px;
    font-weight: 600;
    color: #495057;
}

.payment-parts-table td[b-svuc8ogfmo] {
    padding: 8px;
    border-bottom: 1px solid #eee;
    font-size: 11px;
}

.payment-mode-badge[b-svuc8ogfmo] {
    padding: 3px 10px;
    background: #e3f2fd;
    color: #1976d2;
    border-radius: 3px;
    font-size: 10px;
    font-weight: 600;
    display: inline-block;
}

.receipt-container[b-svuc8ogfmo]::before {
    content: "PAID";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(-45deg);
    font-size: 120px;
    color: rgba(76, 175, 80, 0.03);
    font-weight: 900;
    z-index: 0;
    pointer-events: none;
    letter-spacing: 20px;
}

.receipt-header[b-svuc8ogfmo],
.invoice-info[b-svuc8ogfmo],
.student-info[b-svuc8ogfmo],
.fee-summary[b-svuc8ogfmo],
.payment-method[b-svuc8ogfmo],
.receipt-footer[b-svuc8ogfmo] {
    position: relative;
    z-index: 1;
}

@media print {

    .receipt-actions[b-svuc8ogfmo],
    .no-print[b-svuc8ogfmo] {
        display: none !important;
    }

    body[b-svuc8ogfmo] {
        background-color: white;
        margin: 0;
        font-size: 11px;
        line-height: 1.2;
    }

    .receipt-container[b-svuc8ogfmo] {
        box-shadow: none;
        margin: 0;
        max-width: 100%;
    }

    .page-break[b-svuc8ogfmo] {
        display: block;
        page-break-after: always;
        height: 0;
        margin: 0;
    }

    .quarter-box.paid[b-svuc8ogfmo] {
        background-color: #d4edda !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    .mixed-payment-notice[b-svuc8ogfmo] {
        background: #fff3cd !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    .payment-mode-badge[b-svuc8ogfmo] {
        background: #e3f2fd !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    .amount-words[b-svuc8ogfmo] {
        font-size: 9px !important;
        padding: 4px 12px !important;
    }

    .quarter-status[b-svuc8ogfmo] {
        padding: 6px 12px !important;
    }

    .quarter-box[b-svuc8ogfmo] {
        padding: 5px !important;
    }

    .quarter-grid[b-svuc8ogfmo] {
        gap: 5px !important;
    }

    .quarter-header[b-svuc8ogfmo] {
        font-size: 10px !important;
        margin-bottom: 5px !important;
    }

    .quarter-name[b-svuc8ogfmo] {
        font-size: 8px !important;
    }

    .quarter-amount[b-svuc8ogfmo] {
        font-size: 9px !important;
    }

    .qr-code-container[b-svuc8ogfmo] {
        background: #ffffff !important;
        border: 1px solid #dee2e6 !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
        box-shadow: none !important;
    }

    @page {
        size: A5;
        margin: 2mm;
    }

    body[b-svuc8ogfmo] {
        font-size: 9px !important;
    }

    .receipt-header[b-svuc8ogfmo] {
        padding: 6px 15px !important;
    }

    .school-logo img[b-svuc8ogfmo] {
        height: 100px !important;
    }

    .invoice-info[b-svuc8ogfmo] {
        padding: 5px 15px !important;
    }

    .student-info[b-svuc8ogfmo] {
        padding: 6px 15px !important;
        gap: 5px !important;
    }

    .info-group[b-svuc8ogfmo] {
        margin-bottom: 2px !important;
    }

    .total-section[b-svuc8ogfmo] {
        padding: 5px !important;
        margin: 5px 15px !important;
    }

    .payment-method[b-svuc8ogfmo] {
        padding: 5px 15px !important;
    }

    .receipt-footer[b-svuc8ogfmo] {
        padding: 6px 15px 5px 15px !important;
    }

    .footer-info[b-svuc8ogfmo] {
        margin-bottom: 5px !important;
    }

    .signature-section[b-svuc8ogfmo] {
        margin: 3px 20px 2px 20px !important;
    }

    .security-strip[b-svuc8ogfmo] {
        padding: 3px 8px !important;
        font-size: 8px !important;
        margin-top: 1px !important;
    }

    .footer-note[b-svuc8ogfmo] {
        margin: 1px 0 2px 0 !important;
        font-size: 8px !important;
    }
}
/* /Areas/Accounts/Pages/FeeClerk/ViewReceipt.razor.rz.scp.css */
/* Page Container */
.page-container[b-uxr5mplq8m] {
    padding: 2rem;
    max-width: 1400px;
    margin: 0 auto;
}

.page-header[b-uxr5mplq8m] {
    margin-bottom: 2rem;
}

.page-header h2[b-uxr5mplq8m] {
    font-size: 1.75rem;
    font-weight: 600;
    color: #1a1a1a;
    margin: 0 0 0.5rem 0;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.page-header h2 i[b-uxr5mplq8m] {
    color: #0066cc;
}

/* Search Section */
.search-section[b-uxr5mplq8m] {
    margin-bottom: 2rem;
}

.search-card[b-uxr5mplq8m] {
    background: white;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    overflow: hidden;
}

.search-header[b-uxr5mplq8m] {
    background: linear-gradient(135deg, #0066cc 0%, #0052a3 100%);
    color: white;
    padding: 1rem 1.5rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-weight: 500;
}

.search-body[b-uxr5mplq8m] {
    padding: 1.5rem;
}

.form-row[b-uxr5mplq8m] {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 1rem;
    align-items: end;
}

.form-group[b-uxr5mplq8m] {
    display: flex;
    flex-direction: column;
}

.form-group label[b-uxr5mplq8m] {
    font-weight: 500;
    margin-bottom: 0.5rem;
    color: #333;
    font-size: 0.9rem;
}

.form-control[b-uxr5mplq8m] {
    padding: 0.75rem 1rem;
    border: 2px solid #e0e0e0;
    border-radius: 8px;
    font-size: 1rem;
    transition: all 0.3s ease;
}

.form-control:focus[b-uxr5mplq8m] {
    outline: none;
    border-color: #0066cc;
    box-shadow: 0 0 0 3px rgba(0, 102, 204, 0.1);
}

/* Buttons */
.btn[b-uxr5mplq8m] {
    padding: 0.75rem 1.5rem;
    border: none;
    border-radius: 8px;
    font-weight: 500;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    transition: all 0.3s ease;
    font-size: 1rem;
}

.btn-primary[b-uxr5mplq8m] {
    background: linear-gradient(135deg, #0066cc 0%, #0052a3 100%);
    color: white;
}

.btn-primary:hover:not(:disabled)[b-uxr5mplq8m] {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 102, 204, 0.3);
}

.btn-primary:disabled[b-uxr5mplq8m] {
    opacity: 0.6;
    cursor: not-allowed;
}

.btn-secondary[b-uxr5mplq8m] {
    background: #6c757d;
    color: white;
}

.btn-secondary:hover[b-uxr5mplq8m] {
    background: #5a6268;
}

.btn-outline-primary[b-uxr5mplq8m] {
    background: white;
    color: #0066cc;
    border: 2px solid #0066cc;
}

.btn-outline-primary:hover[b-uxr5mplq8m] {
    background: #0066cc;
    color: white;
}

.btn-sm[b-uxr5mplq8m] {
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
}

/* Alerts */
.alert[b-uxr5mplq8m] {
    padding: 1rem;
    border-radius: 8px;
    margin-top: 1rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.alert-danger[b-uxr5mplq8m] {
    background: #fee;
    color: #c00;
    border: 1px solid #fcc;
}

.alert-info[b-uxr5mplq8m] {
    background: #e7f3ff;
    color: #0066cc;
    border: 1px solid #b3d9ff;
}

/* Receipts Section */
.receipts-section[b-uxr5mplq8m] {
    margin-top: 2rem;
}

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

.section-header h4[b-uxr5mplq8m] {
    font-size: 1.25rem;
    font-weight: 600;
    color: #1a1a1a;
    margin: 0;
}

.badge[b-uxr5mplq8m] {
    padding: 0.5rem 1rem;
    border-radius: 20px;
    font-size: 0.875rem;
    font-weight: 500;
}

.badge-primary[b-uxr5mplq8m] {
    background: #0066cc;
    color: white;
}

/* Receipts Grid */
.receipts-grid[b-uxr5mplq8m] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 1.5rem;
}

.receipt-card[b-uxr5mplq8m] {
    background: white;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    cursor: pointer;
    transition: all 0.3s ease;
    border: 2px solid transparent;
}

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

.receipt-card.selected[b-uxr5mplq8m] {
    border-color: #0066cc;
    box-shadow: 0 4px 16px rgba(0, 102, 204, 0.2);
}

.receipt-card-header[b-uxr5mplq8m] {
    background: linear-gradient(135deg, #0066cc 0%, #0052a3 100%);
    color: white;
    padding: 1rem 1.25rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.receipt-number[b-uxr5mplq8m] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 600;
    font-size: 1rem;
}

.receipt-amount[b-uxr5mplq8m] {
    font-size: 1.25rem;
    font-weight: 700;
}

.receipt-card-body[b-uxr5mplq8m] {
    padding: 1rem 1.25rem;
}

.receipt-info[b-uxr5mplq8m] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
    color: #666;
}

.receipt-info i[b-uxr5mplq8m] {
    color: #0066cc;
    width: 20px;
}

.receipt-card-footer[b-uxr5mplq8m] {
    padding: 1rem 1.25rem;
    background: #f8f9fa;
    border-top: 1px solid #e9ecef;
}

/* Modal */
.modal-overlay[b-uxr5mplq8m] {
    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: 1000;
    padding: 1rem;
}

.modal-container[b-uxr5mplq8m] {
    background: white;
    border-radius: 16px;
    max-width: 900px;
    width: 100%;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}

.modal-header[b-uxr5mplq8m] {
    padding: 1.5rem;
    border-bottom: 1px solid #e9ecef;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.modal-header h3[b-uxr5mplq8m] {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 600;
    color: #1a1a1a;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.btn-close[b-uxr5mplq8m] {
    background: none;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    color: #666;
    padding: 0.5rem;
    border-radius: 4px;
    transition: all 0.2s ease;
}

.btn-close:hover[b-uxr5mplq8m] {
    background: #f0f0f0;
    color: #333;
}

.modal-body[b-uxr5mplq8m] {
    padding: 2rem;
    overflow-y: auto;
}

.modal-footer[b-uxr5mplq8m] {
    padding: 1.5rem;
    border-top: 1px solid #e9ecef;
    display: flex;
    justify-content: flex-end;
    gap: 1rem;
}

/* Receipt Detail */
.receipt-detail-header[b-uxr5mplq8m] {
    text-align: center;
    padding-bottom: 1.5rem;
    border-bottom: 2px solid #0066cc;
    margin-bottom: 2rem;
}

.school-info h2[b-uxr5mplq8m] {
    margin: 0;
    color: #0066cc;
    font-size: 2rem;
    font-weight: 700;
}

.school-info p[b-uxr5mplq8m] {
    margin: 0.5rem 0 0 0;
    color: #666;
    font-size: 1.125rem;
}

.receipt-meta[b-uxr5mplq8m] {
    display: flex;
    justify-content: center;
    gap: 3rem;
    margin-top: 1rem;
}

.meta-item[b-uxr5mplq8m] {
    display: flex;
    gap: 0.5rem;
}

.meta-item .label[b-uxr5mplq8m] {
    font-weight: 600;
    color: #666;
}

.meta-item .value[b-uxr5mplq8m] {
    color: #1a1a1a;
}

.receipt-section[b-uxr5mplq8m] {
    margin-bottom: 2rem;
}

.section-title[b-uxr5mplq8m] {
    font-size: 1.125rem;
    font-weight: 600;
    color: #0066cc;
    margin: 0 0 1rem 0;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid #e9ecef;
}

.info-grid[b-uxr5mplq8m] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
}

.info-item[b-uxr5mplq8m] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.info-item .label[b-uxr5mplq8m] {
    font-size: 0.875rem;
    color: #666;
    font-weight: 500;
}

.info-item .value[b-uxr5mplq8m] {
    font-size: 1rem;
    color: #1a1a1a;
    font-weight: 500;
}

.payment-mode[b-uxr5mplq8m] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: #e7f3ff;
    border-radius: 6px;
    color: #0066cc;
}

/* Fee Breakdown Table */
.fee-breakdown-table[b-uxr5mplq8m] {
    width: 100%;
    border-collapse: collapse;
    margin-top: 1rem;
}

.fee-breakdown-table thead[b-uxr5mplq8m] {
    background: #f8f9fa;
}

.fee-breakdown-table th[b-uxr5mplq8m] {
    padding: 0.75rem 1rem;
    text-align: left;
    font-weight: 600;
    color: #333;
    border-bottom: 2px solid #dee2e6;
}

.fee-breakdown-table td[b-uxr5mplq8m] {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid #dee2e6;
}

.fee-breakdown-table tbody tr:hover[b-uxr5mplq8m] {
    background: #f8f9fa;
}

.fee-breakdown-table .text-right[b-uxr5mplq8m] {
    text-align: right;
}

.fee-breakdown-table tfoot[b-uxr5mplq8m] {
    background: #f8f9fa;
    font-weight: 600;
}

.total-row td[b-uxr5mplq8m] {
    padding: 1rem;
    border-top: 2px solid #0066cc;
    border-bottom: none;
}

/* Receipt Footer */
.receipt-footer[b-uxr5mplq8m] {
    margin-top: 3rem;
    padding-top: 2rem;
    border-top: 2px solid #e9ecef;
}

.signature-section[b-uxr5mplq8m] {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 2rem;
}

.signature-line[b-uxr5mplq8m] {
    text-align: center;
    min-width: 200px;
}

.signature-line span[b-uxr5mplq8m] {
    display: block;
    padding-top: 3rem;
    border-top: 2px solid #333;
    font-size: 0.875rem;
    color: #666;
}

.receipt-note[b-uxr5mplq8m] {
    text-align: center;
    color: #999;
    font-size: 0.875rem;
}

/* Spinner */
.spinner-border[b-uxr5mplq8m] {
    width: 1rem;
    height: 1rem;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: spinner-border-b-uxr5mplq8m 0.75s linear infinite;
}

.spinner-border-sm[b-uxr5mplq8m] {
    width: 0.875rem;
    height: 0.875rem;
}

@keyframes spinner-border-b-uxr5mplq8m {
    to {
        transform: rotate(360deg);
    }
}

/* Responsive */
@media (max-width: 768px) {
    .page-container[b-uxr5mplq8m] {
        padding: 1rem;
    }

    .form-row[b-uxr5mplq8m] {
        grid-template-columns: 1fr;
    }

    .receipts-grid[b-uxr5mplq8m] {
        grid-template-columns: 1fr;
    }

    .info-grid[b-uxr5mplq8m] {
        grid-template-columns: 1fr;
    }

    .receipt-meta[b-uxr5mplq8m] {
        flex-direction: column;
        gap: 0.5rem;
        align-items: center;
    }

    .modal-container[b-uxr5mplq8m] {
        max-width: 100%;
        max-height: 100vh;
        border-radius: 0;
    }
}

/* Print Styles */
@media print {
    .modal-overlay[b-uxr5mplq8m],
    .modal-header[b-uxr5mplq8m],
    .modal-footer[b-uxr5mplq8m],
    .btn[b-uxr5mplq8m],
    .search-section[b-uxr5mplq8m],
    .receipts-section[b-uxr5mplq8m] {
        display: none !important;
    }

    .modal-body[b-uxr5mplq8m] {
        padding: 0;
    }

    .receipt-detail-header[b-uxr5mplq8m] {
        border-color: #000;
    }

    .section-title[b-uxr5mplq8m] {
        color: #000;
    }
}
/* /Pages/Contact.razor.rz.scp.css */
.contact-section[b-q28p9xe5y3] {
    padding-top: 120px;
    min-height: calc(100vh - 300px);
}

.contact-container[b-q28p9xe5y3] {
    max-width: 1100px;
}

.contact-grid[b-q28p9xe5y3] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 2.5rem;
    margin-top: 3rem;
}

.contact-form-card[b-q28p9xe5y3] {
    background: var(--card-gradient);
    padding: 2.5rem;
    border-radius: var(--radius-lg);
    border: 1px solid var(--border);
}

.form-card-title[b-q28p9xe5y3] {
    margin-top: 0;
    color: var(--text-primary);
    font-size: 1.5rem;
    margin-bottom: 1.5rem;
}

.contact-form[b-q28p9xe5y3] {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.status-alert[b-q28p9xe5y3] {
    padding: 1rem;
    border-radius: var(--radius-md);
    margin-bottom: 1rem;
}

.form-label[b-q28p9xe5y3] {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 600;
    color: var(--text-primary);
}

.form-control[b-q28p9xe5y3] {
    width: 100%;
    padding: 0.85rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--bg-secondary);
    color: var(--text-primary);
    font-size: 1rem;
}

.form-control-textarea[b-q28p9xe5y3] {
    resize: vertical;
}

.validation-message[b-q28p9xe5y3] {
    color: var(--error-text);
    font-size: 0.875rem;
    margin-top: 0.25rem;
}

.btn-submit[b-q28p9xe5y3] {
    width: 100%;
    padding: 1rem;
    font-size: 1.05rem;
}

.contact-info-stack[b-q28p9xe5y3] {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.info-card[b-q28p9xe5y3] {
    background: var(--card-gradient);
    padding: 2rem;
    border-radius: var(--radius-lg);
    border: 1px solid var(--border);
}

.info-header[b-q28p9xe5y3] {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
}

.icon-box[b-q28p9xe5y3] {
    width: 50px;
    height: 50px;
    background: rgba(37, 99, 235, 0.15);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.icon-box i[b-q28p9xe5y3] {
    color: var(--brand-blue);
    font-size: 1.4rem;
}

.info-title[b-q28p9xe5y3] {
    margin: 0;
    color: var(--text-primary);
    font-size: 1.2rem;
}

.info-content[b-q28p9xe5y3] {
    margin: 0;
    color: var(--text-secondary);
    line-height: 1.6;
}

.info-content-relaxed[b-q28p9xe5y3] {
    line-height: 1.8;
}

.info-link[b-q28p9xe5y3] {
    color: var(--brand-blue);
    text-decoration: none;
}
/* /Pages/EmployeeLogin.razor.rz.scp.css */
.login-container[b-fqli26cvrt] {
    min-height: 100vh;
    padding-top: 70px;
    background: var(--bg-primary);
}

.login-split[b-fqli26cvrt] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-height: calc(100vh - 70px);
}

/* Right Side - Form */
.login-right[b-fqli26cvrt] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem 1.5rem;
    background: var(--bg-primary);
}

.login-form-wrapper[b-fqli26cvrt] {
    width: 100%;
    max-width: 380px;
}

.form-title[b-fqli26cvrt] {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 0.5rem;
}

.form-subtitle[b-fqli26cvrt] {
    font-size: 0.95rem;
    color: var(--text-secondary);
    margin-bottom: 1.5rem;
}

.login-form[b-fqli26cvrt] {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.alert[b-fqli26cvrt] {
    padding: 0.85rem;
    border-radius: var(--radius-md);
    font-size: 0.875rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.alert-error[b-fqli26cvrt] {
    background: #fef2f2;
    color: #991b1b;
    border-left: 3px solid var(--accent);
}

.alert-success[b-fqli26cvrt] {
    background: #ecfdf5;
    color: #065f46;
    border-left: 3px solid var(--secondary);
}

.form-group[b-fqli26cvrt] {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.form-group label[b-fqli26cvrt] {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-primary);
}

.form-input[b-fqli26cvrt] {
    width: 100%;
    padding: 0.85rem 1rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--bg-secondary);
    color: var(--text-primary);
    font-size: 0.975rem;
    transition: all 0.2s ease;
}

.form-input:focus[b-fqli26cvrt] {
    outline: none;
    border-color: var(--brand-blue);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.form-input[b-fqli26cvrt]::placeholder {
    color: var(--text-muted);
}

.password-field[b-fqli26cvrt] {
    position: relative;
}

.toggle-btn[b-fqli26cvrt] {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 0.4rem;
}

.toggle-btn:hover[b-fqli26cvrt] {
    color: var(--text-primary);
}

.validation-msg[b-fqli26cvrt] {
    color: var(--accent);
    font-size: 0.8rem;
}

.form-row[b-fqli26cvrt] {
    display: flex;
    align-items: center;
}

.checkbox-label[b-fqli26cvrt] {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.875rem;
    color: var(--text-secondary);
    cursor: pointer;
}

.btn-login[b-fqli26cvrt] {
    width: 100%;
    padding: 0.85rem;
    background: var(--brand-blue);
    color: white;
    border: none;
    border-radius: var(--radius-md);
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 0.25rem;
}

.btn-login:hover:not(:disabled)[b-fqli26cvrt] {
    background: #2563eb;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}

.btn-login:disabled[b-fqli26cvrt] {
    opacity: 0.6;
    cursor: not-allowed;
}

.form-footer[b-fqli26cvrt] {
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--border);
}

.form-footer p[b-fqli26cvrt] {
    font-size: 0.85rem;
    color: var(--text-secondary);
    margin-bottom: 0.75rem;
}

.back-link[b-fqli26cvrt] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    color: var(--brand-blue);
    text-decoration: none;
    font-size: 0.875rem;
    font-weight: 600;
    transition: gap 0.2s ease;
}

.back-link:hover[b-fqli26cvrt] {
    gap: 0.65rem;
}

/* Responsive */
@media (max-width: 1024px) {
    .login-split[b-fqli26cvrt] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {
    .login-container[b-fqli26cvrt] {
        padding-top: 60px;
    }

    .login-right[b-fqli26cvrt] {
        padding: 1.5rem 1rem;
    }
}
/* /Pages/Refund.razor.rz.scp.css */
.policy-section[b-nlmztlivb3] {
    padding-top: 120px;
}

.policy-container[b-nlmztlivb3] {
    max-width: 800px;
}

.policy-header[b-nlmztlivb3] {
    text-align: left;
}

.last-updated[b-nlmztlivb3] {
    color: var(--text-muted);
    margin-top: 0.5rem;
}

.policy-body[b-nlmztlivb3] {
    margin-top: 2rem;
    line-height: 1.8;
    color: var(--text-secondary);
}

.policy-section-title[b-nlmztlivb3] {
    color: var(--text-primary);
    margin-top: 2rem;
    margin-bottom: 1rem;
}

.policy-subsection-title[b-nlmztlivb3] {
    color: var(--text-primary);
    margin-top: 1rem;
    margin-bottom: 0.5rem;
}

.policy-list[b-nlmztlivb3] {
    margin-left: 1.5rem;
    margin-top: 0.5rem;
}

.policy-list-ordered[b-nlmztlivb3] {
    margin-left: 1.5rem;
    margin-top: 0.5rem;
}

.nested-list[b-nlmztlivb3] {
    margin-left: 1rem;
    margin-top: 0.25rem;
}

.contact-list[b-nlmztlivb3] {
    margin-left: 1.5rem;
    margin-top: 0.5rem;
    list-style: none;
}

.important-note[b-nlmztlivb3] {
    margin-top: 2rem;
    padding: 1.5rem;
    background: var(--bg-secondary);
    border-radius: var(--radius-lg);
    border-left: 4px solid var(--brand-blue);
}
/* /Pages/StudentLogin.razor.rz.scp.css */
.login-container[b-hllt5585zu] {
    min-height: 100vh;
    padding-top: 70px;
    background: var(--bg-primary);
}

.login-split[b-hllt5585zu] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-height: calc(100vh - 70px);
}

/* Left Side */
.login-left[b-hllt5585zu] {
    background: var(--card-gradient);
    border-right: 1px solid var(--border);
    padding: 3rem 2.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.login-content[b-hllt5585zu] {
    max-width: 480px;
}

.login-badge[b-hllt5585zu] {
    display: inline-block;
    padding: 0.45rem 1.1rem;
    background: rgba(139, 92, 246, 0.1);
    color: #8b5cf6;
    border-radius: 50px;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    margin-bottom: 1.75rem;
}

.login-heading[b-hllt5585zu] {
    font-size: 2.25rem;
    font-weight: 800;
    line-height: 1.3;
    color: var(--text-primary);
    margin-bottom: 1.5rem;
}

.login-description[b-hllt5585zu] {
    font-size: 1rem;
    line-height: 1.65;
    color: var(--text-secondary);
    margin-bottom: 2.25rem;
}

.feature-list[b-hllt5585zu] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-bottom: 2.25rem;
}

.feature-pill[b-hllt5585zu] {
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.65rem 1.1rem;
    background: rgba(139, 92, 246, 0.08);
    border-radius: 50px;
    border: 1px solid rgba(139, 92, 246, 0.15);
}

.feature-pill i[b-hllt5585zu] {
    color: #8b5cf6;
    font-size: 0.95rem;
    flex-shrink: 0;
}

.feature-pill span[b-hllt5585zu] {
    font-size: 0.925rem;
    font-weight: 600;
    color: var(--text-primary);
}

.uptime-box[b-hllt5585zu] {
    padding: 1.5rem;
    background: rgba(139, 92, 246, 0.05);
    border-radius: var(--radius-md);
    border: 1px solid rgba(139, 92, 246, 0.2);
}

.uptime-label[b-hllt5585zu] {
    display: inline-block;
    padding: 0.25rem 0.65rem;
    background: rgba(139, 92, 246, 0.15);
    color: #8b5cf6;
    border-radius: 50px;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    margin-bottom: 0.5rem;
}

.uptime-value[b-hllt5585zu] {
    font-size: 1.75rem;
    font-weight: 800;
    color: #8b5cf6;
    margin: 0;
}

.uptime-description[b-hllt5585zu] {
    font-size: 0.85rem;
    color: var(--text-secondary);
    margin-top: 0.65rem;
    margin-bottom: 0;
    line-height: 1.4;
}

/* Right Side - Form */
.login-right[b-hllt5585zu] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem 1.5rem;
    background: var(--bg-primary);
}

.login-form-wrapper[b-hllt5585zu] {
    width: 100%;
    max-width: 380px;
}

.form-title[b-hllt5585zu] {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 0.5rem;
}

.form-subtitle[b-hllt5585zu] {
    font-size: 0.95rem;
    color: var(--text-secondary);
    margin-bottom: 1.5rem;
}

.login-form[b-hllt5585zu] {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.alert[b-hllt5585zu] {
    padding: 0.85rem;
    border-radius: var(--radius-md);
    font-size: 0.875rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.alert-error[b-hllt5585zu] {
    background: #fef2f2;
    color: #991b1b;
    border-left: 3px solid var(--accent);
}

.alert-success[b-hllt5585zu] {
    background: #ecfdf5;
    color: #065f46;
    border-left: 3px solid var(--secondary);
}

.form-group[b-hllt5585zu] {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.form-group label[b-hllt5585zu] {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-primary);
}

.form-input[b-hllt5585zu] {
    width: 100%;
    padding: 0.85rem 1rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--bg-secondary);
    color: var(--text-primary);
    font-size: 0.975rem;
    transition: all 0.2s ease;
}

.form-input:focus[b-hllt5585zu] {
    outline: none;
    border-color: #8b5cf6;
    box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.1);
}

.form-input[b-hllt5585zu]::placeholder {
    color: var(--text-muted);
}

.password-field[b-hllt5585zu] {
    position: relative;
}

.toggle-btn[b-hllt5585zu] {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 0.4rem;
}

.toggle-btn:hover[b-hllt5585zu] {
    color: var(--text-primary);
}

.validation-msg[b-hllt5585zu] {
    color: var(--accent);
    font-size: 0.8rem;
}

.form-row[b-hllt5585zu] {
    display: flex;
    align-items: center;
}

.checkbox-label[b-hllt5585zu] {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.875rem;
    color: var(--text-secondary);
    cursor: pointer;
}

.btn-login[b-hllt5585zu] {
    width: 100%;
    padding: 0.85rem;
    background: #8b5cf6;
    color: white;
    border: none;
    border-radius: var(--radius-md);
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 0.25rem;
}

.btn-login:hover:not(:disabled)[b-hllt5585zu] {
    background: #7c3aed;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(139, 92, 246, 0.3);
}

.btn-login:disabled[b-hllt5585zu] {
    opacity: 0.6;
    cursor: not-allowed;
}

.form-footer[b-hllt5585zu] {
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--border);
}

.form-footer p[b-hllt5585zu] {
    font-size: 0.85rem;
    color: var(--text-secondary);
    margin-bottom: 0.75rem;
}

.back-link[b-hllt5585zu] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    color: #8b5cf6;
    text-decoration: none;
    font-size: 0.875rem;
    font-weight: 600;
    transition: gap 0.2s ease;
}

.back-link:hover[b-hllt5585zu] {
    gap: 0.65rem;
}

/* Responsive */
@media (max-width: 1024px) {
    .login-split[b-hllt5585zu] {
        grid-template-columns: 1fr;
    }

    .login-left[b-hllt5585zu] {
        display: none;
    }
}

@media (max-width: 640px) {
    .login-container[b-hllt5585zu] {
        padding-top: 60px;
    }

    .login-right[b-hllt5585zu] {
        padding: 1.5rem 1rem;
    }
}
/* /Shared/Components/Auth/LoginSidebar.razor.rz.scp.css */
/* Left Side */
.login-left[b-5mdj9oirfi] {
    background: var(--card-gradient);
    border-right: 1px solid var(--border);
    padding: 3rem 2.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.login-content[b-5mdj9oirfi] {
    max-width: 480px;
}

.login-badge[b-5mdj9oirfi] {
    display: inline-block;
    padding: 0.45rem 1.1rem;
    background: rgba(59, 130, 246, 0.1);
    color: var(--brand-blue);
    border-radius: 50px;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    margin-bottom: 1.75rem;
}

.login-heading[b-5mdj9oirfi] {
    font-size: 2.25rem;
    font-weight: 800;
    line-height: 1.3;
    color: var(--text-primary);
    margin-bottom: 1.5rem;
}

.login-description[b-5mdj9oirfi] {
    font-size: 1rem;
    line-height: 1.65;
    color: var(--text-secondary);
    margin-bottom: 2.25rem;
}

.feature-list[b-5mdj9oirfi] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-bottom: 2.25rem;
}

.feature-pill[b-5mdj9oirfi] {
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.65rem 1.1rem;
    background: rgba(59, 130, 246, 0.08);
    border-radius: 50px;
    border: 1px solid rgba(59, 130, 246, 0.15);
}

.feature-pill i[b-5mdj9oirfi] {
    color: var(--brand-blue);
    font-size: 0.95rem;
    flex-shrink: 0;
}

.feature-pill span[b-5mdj9oirfi] {
    font-size: 0.925rem;
    font-weight: 600;
    color: var(--text-primary);
}

.uptime-box[b-5mdj9oirfi] {
    padding: 1.5rem;
    background: rgba(16, 185, 129, 0.05);
    border-radius: var(--radius-md);
    border: 1px solid rgba(16, 185, 129, 0.2);
}

.uptime-label[b-5mdj9oirfi] {
    display: inline-block;
    padding: 0.25rem 0.65rem;
    background: rgba(16, 185, 129, 0.15);
    color: #10b981;
    border-radius: 50px;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    margin-bottom: 0.5rem;
}

.uptime-value[b-5mdj9oirfi] {
    font-size: 1.75rem;
    font-weight: 800;
    color: #10b981;
    margin: 0;
}

.uptime-description[b-5mdj9oirfi] {
    font-size: 0.85rem;
    color: var(--text-secondary);
    margin-top: 0.65rem;
    margin-bottom: 0;
    line-height: 1.4;
}

/* Responsive */
@media (max-width: 1024px) {
    .login-left[b-5mdj9oirfi] {
        display: none;
    }
}
/* /Shared/Components/Calendar/ProposeEventForm.razor.rz.scp.css */
.propose-page[b-5qxjtxkqyc] {
    padding: 1.5rem;
    max-width: 900px;
}

.page-header[b-5qxjtxkqyc] {
    display: flex;
    align-items: center;
    margin-bottom: 1.5rem;
}

.header-left[b-5qxjtxkqyc] {
    display: flex;
    align-items: center;
}

.header-left h1[b-5qxjtxkqyc] {
    font-size: 1.5rem;
    font-weight: 600;
    margin: 0;
}

.header-left .text-muted[b-5qxjtxkqyc] {
    font-size: 0.875rem;
    margin: 0;
}

.form-container[b-5qxjtxkqyc] {
    background: var(--bg-primary);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-color);
    padding: 1.5rem;
}

.form-section[b-5qxjtxkqyc] {
    margin-bottom: 2rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid var(--border-color);
}

.form-section:last-of-type[b-5qxjtxkqyc] {
    border-bottom: none;
    margin-bottom: 1rem;
}

.form-section h5[b-5qxjtxkqyc] {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 1rem;
    color: var(--text-primary);
}

.form-actions[b-5qxjtxkqyc] {
    display: flex;
    justify-content: flex-end;
    gap: 1rem;
    padding-top: 1rem;
}

[b-5qxjtxkqyc] .nav-tabs .nav-link {
    font-size: 0.85rem;
    padding: 0.5rem 1rem;
    color: var(--text-muted);
    border: none;
    border-bottom: 2px solid transparent;
    background: transparent;
    cursor: pointer;
}

[b-5qxjtxkqyc] .nav-tabs .nav-link:hover {
    color: var(--text-primary);
}

[b-5qxjtxkqyc] .nav-tabs .nav-link.active {
    color: var(--primary);
    border-bottom-color: var(--primary);
}

[b-5qxjtxkqyc] .nav-tabs-sm .nav-link {
    font-size: 0.8rem !important;
    padding: 0.375rem 0.75rem !important;
}

.class-group-grid[b-5qxjtxkqyc],
.class-grid[b-5qxjtxkqyc] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.5rem;
    max-height: 200px;
    overflow-y: auto;
}

.class-group-grid .form-check[b-5qxjtxkqyc],
.class-grid .form-check[b-5qxjtxkqyc] {
    margin: 0;
    padding-left: 1.5rem;
}

.class-group-grid .form-check-label[b-5qxjtxkqyc],
.class-grid .form-check-label[b-5qxjtxkqyc] {
    font-size: 0.875rem;
}

.subdept-selection-grid[b-5qxjtxkqyc] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
    max-height: 280px;
    overflow-y: auto;
    padding: 0.5rem;
}

.subdept-selection-grid .dept-group[b-5qxjtxkqyc] {
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 0.75rem;
}

.subdept-selection-grid .dept-group .form-check[b-5qxjtxkqyc] {
    margin: 0.25rem 0;
    padding-left: 1.5rem;
}

.subdept-selection-grid .dept-group .form-check-label[b-5qxjtxkqyc] {
    font-size: 0.85rem;
}
/* /Shared/Components/Navigation/NavProfile.razor.rz.scp.css */
/* =============================================================================
   NavProfile.razor.css
   User profile dropdown component styles

   CSS Variable Dependencies (from _variables.css):
   - Colors: --bg-primary, --bg-secondary, --text-primary, --text-muted, --border
   - Brand: --brand-blue, --brand-primary
   - Spacing: --radius-sm, --radius-md
   - Z-Index: --z-dropdown
   - Shadows: --shadow-lg
   ============================================================================= */

.nav-profile[b-zt5hb2xu70] {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.5rem 0.75rem;
    border-radius: var(--radius-md);
    cursor: pointer;
    position: relative;
    transition: all 0.2s ease;
    height: 100%;
    max-height: 64px;
    box-sizing: border-box;
}

.nav-profile:hover[b-zt5hb2xu70] {
    background: var(--bg-secondary);
}

.nav-profile__avatar[b-zt5hb2xu70] {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--brand-blue, var(--brand-primary));
    color: var(--text-inverse, white);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 0.95rem;
    flex-shrink: 0;
    overflow: hidden;
}

.nav-profile__avatar img[b-zt5hb2xu70] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

.nav-profile__meta[b-zt5hb2xu70] {
    display: flex;
    flex-direction: column;
    justify-content: center;
    line-height: 1.2;
    overflow: hidden;
}

.nav-profile__name[b-zt5hb2xu70] {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-primary);
    line-height: 1.25;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 180px;
}

.nav-profile__meta small[b-zt5hb2xu70] {
    font-size: 0.75rem;
    color: var(--text-muted);
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.nav-profile__caret[b-zt5hb2xu70] {
    font-size: 0.7rem;
    color: var(--text-muted);
    transition: transform 0.2s ease;
}

.nav-profile__caret.rotated[b-zt5hb2xu70] {
    transform: rotate(180deg);
}

/* =============================================================================
   DROPDOWN MENU
   ============================================================================= */

.nav-profile__menu[b-zt5hb2xu70] {
    display: none;
    position: absolute;
    top: calc(100% + 0.5rem);
    right: 0;
    background: var(--bg-primary);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg, 0 10px 40px rgba(0, 0, 0, 0.15));
    min-width: 220px;
    padding: 0.5rem;
    z-index: var(--z-dropdown, 1000);
}

.nav-profile.menu-open .nav-profile__menu[b-zt5hb2xu70] {
    display: block;
}

.nav-profile__menu a[b-zt5hb2xu70],
.nav-profile__menu button[b-zt5hb2xu70] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.65rem 0.85rem;
    color: var(--text-primary);
    text-decoration: none;
    border-radius: var(--radius-sm);
    font-size: 0.85rem;
    transition: all 0.2s ease;
    background: none;
    border: none;
    width: 100%;
    cursor: pointer;
    text-align: left;
}

.nav-profile__menu a:hover[b-zt5hb2xu70],
.nav-profile__menu button:hover[b-zt5hb2xu70] {
    background: var(--bg-secondary);
}

.nav-profile__menu a i[b-zt5hb2xu70],
.nav-profile__menu button i[b-zt5hb2xu70] {
    width: 16px;
    text-align: center;
    color: var(--text-muted);
}

.nav-profile__divider[b-zt5hb2xu70] {
    height: 1px;
    background: var(--border);
    margin: 0.5rem 0;
}

/* =============================================================================
   PHOTO UPLOAD MODAL
   ============================================================================= */

.modal-backdrop[b-zt5hb2xu70] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1040;
}

.photo-upload-modal[b-zt5hb2xu70] {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: var(--bg-primary, white);
    border-radius: var(--radius-md, 8px);
    box-shadow: var(--shadow-lg, 0 10px 40px rgba(0, 0, 0, 0.2));
    z-index: 1050;
    width: 90%;
    max-width: 400px;
    display: flex;
    flex-direction: column;
}

.photo-upload-modal .modal-header[b-zt5hb2xu70] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--border, #e5e7eb);
}

.photo-upload-modal .modal-header h5[b-zt5hb2xu70] {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 600;
}

.photo-upload-modal .btn-close[b-zt5hb2xu70] {
    background: none;
    border: none;
    font-size: 1.25rem;
    cursor: pointer;
    opacity: 0.5;
    padding: 0;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.photo-upload-modal .btn-close:hover[b-zt5hb2xu70] {
    opacity: 1;
}

.photo-upload-modal .btn-close[b-zt5hb2xu70]::before {
    content: "×";
}

.photo-upload-modal .modal-body[b-zt5hb2xu70] {
    padding: 1.25rem;
}

.photo-upload-modal .current-photo[b-zt5hb2xu70] {
    text-align: center;
    margin-bottom: 1rem;
}

.photo-upload-modal .current-photo img[b-zt5hb2xu70] {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid var(--border, #e5e7eb);
}

.photo-upload-modal .upload-section[b-zt5hb2xu70] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.photo-upload-modal .modal-footer[b-zt5hb2xu70] {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    padding: 1rem 1.25rem;
    border-top: 1px solid var(--border, #e5e7eb);
}

.photo-upload-modal .btn[b-zt5hb2xu70] {
    padding: 0.5rem 1rem;
    border-radius: var(--radius-sm, 4px);
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    border: none;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.photo-upload-modal .btn-secondary[b-zt5hb2xu70] {
    background: var(--bg-secondary, #f3f4f6);
    color: var(--text-primary, #1f2937);
}

.photo-upload-modal .btn-primary[b-zt5hb2xu70] {
    background: var(--brand-primary, #3b82f6);
    color: white;
}

.photo-upload-modal .btn-primary:disabled[b-zt5hb2xu70] {
    opacity: 0.6;
    cursor: not-allowed;
}

.photo-upload-modal .alert[b-zt5hb2xu70] {
    padding: 0.75rem 1rem;
    border-radius: var(--radius-sm, 4px);
    font-size: 0.875rem;
}

.photo-upload-modal .alert-danger[b-zt5hb2xu70] {
    background: #fef2f2;
    color: #dc2626;
    border: 1px solid #fecaca;
}

.photo-upload-modal .alert-success[b-zt5hb2xu70] {
    background: #f0fdf4;
    color: #16a34a;
    border: 1px solid #bbf7d0;
}

.photo-upload-modal .spinner-border-sm[b-zt5hb2xu70] {
    width: 1rem;
    height: 1rem;
    border-width: 2px;
}

/* =============================================================================
   DARK THEME OVERRIDES
   ============================================================================= */

:global([data-theme="dark"]) .nav-profile__menu[b-zt5hb2xu70] {
    background: var(--bg-primary);
    box-shadow: var(--shadow-lg, 0 10px 40px rgba(0, 0, 0, 0.3));
}

:global([data-theme="dark"]) .photo-upload-modal[b-zt5hb2xu70] {
    background: var(--bg-primary);
}

:global([data-theme="dark"]) .photo-upload-modal .alert-danger[b-zt5hb2xu70] {
    background: #450a0a;
    color: #fca5a5;
    border-color: #7f1d1d;
}

:global([data-theme="dark"]) .photo-upload-modal .alert-success[b-zt5hb2xu70] {
    background: #052e16;
    color: #86efac;
    border-color: #166534;
}
/* /Shared/Components/Sidebars/FeeClerkSidebar.razor.rz.scp.css */
/* =============================================================================
   FeeClerkSidebar.razor.css
   Fee Clerk role sidebar navigation styles

   CSS Variable Dependencies (from _variables.css):
   - Colors: --bg-secondary, --text-primary, --text-muted
   - Brand: --brand-blue, --brand-primary, --brand-blue-alpha
   - Spacing: --radius-md
   ============================================================================= */

/* =============================================================================
   SIDEBAR SECTIONS
   ============================================================================= */

.rd-sidebar__section[b-jvkekycux8] {
    padding: 0 1rem;
    margin-bottom: 1.25rem;
}

.rd-sidebar__label[b-jvkekycux8] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.75rem;
    color: var(--text-secondary, #475569);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 700;
    padding: 0.625rem 0;
}

.rd-sidebar__label--collapsible[b-jvkekycux8] {
    cursor: pointer;
    user-select: none;
}

.rd-sidebar__toggle-icon[b-jvkekycux8] {
    transition: transform 0.2s ease;
    font-size: 0.7rem;
}

.rd-sidebar__toggle-icon.rotated[b-jvkekycux8] {
    transform: rotate(180deg);
}

/* =============================================================================
   SIDEBAR LINKS
   ============================================================================= */

.rd-sidebar__links[b-jvkekycux8] {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    overflow: hidden;
    transition: max-height 0.3s ease;
    padding-top: 0.25rem;
}

.rd-sidebar__links.collapsed[b-jvkekycux8] {
    max-height: 0;
}

.rd-sidebar__links.expanded[b-jvkekycux8] {
    max-height: 500px;
}

.rd-sidebar__link[b-jvkekycux8] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.7rem 0.85rem;
    color: var(--text-primary);
    text-decoration: none;
    border-radius: var(--radius-md);
    font-size: 0.875rem;
    font-weight: 500;
    transition: all 0.2s ease;
}

.rd-sidebar__link:hover[b-jvkekycux8] {
    background: var(--bg-secondary);
    color: var(--brand-blue, var(--brand-primary));
}

.rd-sidebar__link.active[b-jvkekycux8] {
    background: var(--brand-blue-alpha, rgba(59, 130, 246, 0.1));
    color: var(--brand-blue, var(--brand-primary));
    font-weight: 600;
}

.rd-sidebar__link i[b-jvkekycux8] {
    width: 18px;
    text-align: center;
    font-size: 0.95rem;
}

/* =============================================================================
   COLLAPSED SIDEBAR STATES
   Note: These use ::deep to target parent sidebar collapsed state
   ============================================================================= */

:global(.rd-sidebar.collapsed) .rd-sidebar__text[b-jvkekycux8] {
    display: none;
}

:global(.rd-sidebar.collapsed) .rd-sidebar__label span[b-jvkekycux8] {
    display: none;
}

:global(.rd-sidebar.collapsed) .rd-sidebar__toggle-icon[b-jvkekycux8] {
    display: none;
}

:global(.rd-sidebar.collapsed) .rd-sidebar__section[b-jvkekycux8] {
    padding: 0 0.5rem;
}

:global(.rd-sidebar.collapsed) .rd-sidebar__link[b-jvkekycux8] {
    justify-content: center;
    padding: 0.65rem;
}
/* /Shared/Layouts/RoleDashboardLayout.razor.rz.scp.css */
/* =============================================================================
   RoleDashboardLayout.razor.css
   Scoped CSS - Minimal overrides only
   Main styles are in wwwroot/css/dashboard-layout.css (global)

   Note: Use dashboard-layout.css for layout styles.
   This file is for component-specific isolation only.
   ============================================================================= */

/* Component-specific styles that need CSS isolation go here */
/* Currently empty - all styles moved to global dashboard-layout.css */