/**
 * Page-specific styles for Coaching Management SPA.
 * Restored after accidental deletion during dashboard shell patch.
 */
@import url('./attendance/styles/attendance.css');
@import url('./exam/styles/exam.css');
@import url('./homework/styles/homework.css');
@import url('./promotion/styles/promotion.css');
@import url('./salary/styles/salary.css');
@import url('./leads/styles/leads.css');
@import url('./student-details/styles/student-details.css');
@import url('./fee-collection/styles/fee-collection.css');
@import url('./academic/styles/academic.css');
@import url('./admission/styles/admission.css');
@import url('./routine/styles/routine.css');
@import url('./subscription/styles/subscription.css');

/* ========== Global table cell pills ========== */
.app-cell-pill {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 2.5rem; padding: 0.25rem 0.625rem; border-radius: 0.5rem;
  font-size: 0.8125rem; font-weight: 600; line-height: 1.3;
  -webkit-print-color-adjust: exact; print-color-adjust: exact;
}
.app-cell-pill--mint { background: #d1fae5; color: #047857; border: 1px solid #a7f3d0; }
.app-cell-pill--sky { background: #e0f2fe; color: #0369a1; border: 1px solid #bae6fd; }
.app-cell-pill--pink { background: #fce7f3; color: #be185d; border: 1px solid #fbcfe8; }
.app-cell-pill--lavender { background: #ede9fe; color: #6d28d9; border: 1px solid #ddd6fe; }
.app-cell-pill--amber { background: #fef3c7; color: #b45309; border: 1px solid #fde68a; }
.app-cell-pill--rose { background: #ffe4e6; color: #be123c; border: 1px solid #fecdd3; }
.app-cell-pill--indigo { background: #e0e7ff; color: #4338ca; border: 1px solid #c7d2fe; }

/* ========== Global table cell center alignment (desktop only) ========== */
@media (min-width: 769px) {
  table.responsive-table th,
  table.responsive-table td,
  table.exam-table th,
  table.exam-table td,
  table.hw-table th,
  table.hw-table td,
  table.att-table th,
  table.att-table td,
  table.fee-table th,
  table.fee-table td,
  table.lead-table th,
  table.lead-table td,
  table.sal-table th,
  table.sal-table td,
  table.promo-table th,
  table.promo-table td,
  table.acad-table th,
  table.acad-table td,
  table.std-table th,
  table.std-table td,
  table.app-pill-table th,
  table.app-pill-table td,
  .app-page-shell table th,
  .app-page-shell table td,
  .app-surface-card table th,
  .app-surface-card table td,
  .exam-table-wrap table th,
  .exam-table-wrap table td,
  .att-table-wrap table th,
  .att-table-wrap table td,
  .modal-backdrop table th,
  .modal-backdrop table td {
    text-align: center;
    vertical-align: middle;
  }

  table th.text-left, table td.text-left,
  table th.text-right, table td.text-right {
    text-align: center;
  }

  table td .sl-student-cell,
  table td .bm-batch-cell,
  table td .bm-teacher-cell,
  table td .tm-teacher-cell,
  table td .fm-student-cell,
  table td .sl-actions,
  table td .bm-actions,
  table td .em-actions,
  table td .rpt-actions,
  table td .table-actions {
    justify-content: center;
    margin-left: auto;
    margin-right: auto;
  }

  table td .sl-due-cell,
  table td .sl-batch-pill,
  table td .sl-due-badge,
  table td .sl-status-badge,
  table td .app-cell-pill {
    margin-inline: auto;
  }
  table td .sl-due-cell { width: fit-content; }
}

.table-actions {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 0.5rem; flex-wrap: wrap; margin-inline: auto;
}

/* ========== Global colorful filter bars ========== */
.sl-filter-bar, .bm-filter-bar, .tm-filter-bar,
.fm-filter-bar, .em-filter-bar, .exp-filter-bar,
.rpt-filter-bar, .exam-filter-bar, .att-filter-bar {
  display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center;
  background: #fff; border: 1px solid #f0f0f0; border-radius: 1.125rem;
  padding: 0.875rem 1rem; margin-bottom: 0;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}
@media (min-width: 768px) {
  .sl-filter-bar, .bm-filter-bar, .tm-filter-bar,
  .fm-filter-bar, .em-filter-bar, .exp-filter-bar,
  .rpt-filter-bar, .exam-filter-bar, .att-filter-bar { padding: 1.125rem 1.25rem; }
}
.sl-filter-bar select, .bm-filter-bar select, .tm-filter-bar select,
.fm-filter-bar select, .em-filter-bar select, .exp-filter-bar select,
.rpt-filter-bar select, .exam-filter-bar select, .att-filter-bar select,
.sl-filter-bar input, .bm-filter-bar input, .tm-filter-bar input,
.fm-filter-bar input, .em-filter-bar input, .exp-filter-bar input,
.rpt-filter-bar input, .exam-filter-bar input, .att-filter-bar input {
  border-radius: 0.625rem; padding: 0.5rem 0.75rem; font-size: 0.875rem;
  border: 1px solid transparent; min-height: 2.375rem;
}
.sl-filter-bar select:nth-of-type(1), .bm-filter-bar select:nth-of-type(1), .tm-filter-bar select:nth-of-type(1),
.fm-filter-bar select:nth-of-type(1), .em-filter-bar select:nth-of-type(1), .exp-filter-bar select:nth-of-type(1),
.rpt-filter-bar select:nth-of-type(1), .exam-filter-bar select:nth-of-type(1), .att-filter-bar select:nth-of-type(1) {
  background: #ecfdf5; border-color: #a7f3d0; color: #047857;
}
.sl-filter-bar select:nth-of-type(2), .bm-filter-bar select:nth-of-type(2), .tm-filter-bar select:nth-of-type(2),
.fm-filter-bar select:nth-of-type(2), .em-filter-bar select:nth-of-type(2), .exp-filter-bar select:nth-of-type(2),
.rpt-filter-bar select:nth-of-type(2), .exam-filter-bar select:nth-of-type(2), .att-filter-bar select:nth-of-type(2) {
  background: #e0f2fe; border-color: #bae6fd; color: #0369a1;
}
.sl-filter-bar select:nth-of-type(3), .bm-filter-bar select:nth-of-type(3), .tm-filter-bar select:nth-of-type(3),
.fm-filter-bar select:nth-of-type(3), .em-filter-bar select:nth-of-type(3), .exp-filter-bar select:nth-of-type(3),
.rpt-filter-bar select:nth-of-type(3), .exam-filter-bar select:nth-of-type(3), .att-filter-bar select:nth-of-type(3) {
  background: #fce7f3; border-color: #fbcfe8; color: #be185d;
}
.sl-filter-bar select:nth-of-type(4), .bm-filter-bar select:nth-of-type(4), .tm-filter-bar select:nth-of-type(4),
.fm-filter-bar select:nth-of-type(4), .em-filter-bar select:nth-of-type(4), .exp-filter-bar select:nth-of-type(4),
.rpt-filter-bar select:nth-of-type(4), .exam-filter-bar select:nth-of-type(4), .att-filter-bar select:nth-of-type(4) {
  background: #ede9fe; border-color: #ddd6fe; color: #6d28d9;
}
.sl-filter-bar select:nth-of-type(5), .bm-filter-bar select:nth-of-type(5), .tm-filter-bar select:nth-of-type(5),
.fm-filter-bar select:nth-of-type(5), .em-filter-bar select:nth-of-type(5), .exp-filter-bar select:nth-of-type(5),
.rpt-filter-bar select:nth-of-type(5), .exam-filter-bar select:nth-of-type(5), .att-filter-bar select:nth-of-type(5) {
  background: #fef3c7; border-color: #fde68a; color: #b45309;
}
.sl-filter-bar input[type="date"], .bm-filter-bar input[type="date"], .tm-filter-bar input[type="date"],
.fm-filter-bar input[type="date"], .em-filter-bar input[type="date"], .exp-filter-bar input[type="date"],
.rpt-filter-bar input[type="date"], .exam-filter-bar input[type="date"], .att-filter-bar input[type="date"] {
  background: #ede9fe; border-color: #ddd6fe; color: #6d28d9; min-width: 9rem;
}
.sl-filter-bar input[type="search"], .sl-filter-bar input[type="text"],
.bm-filter-bar input[type="search"], .bm-filter-bar input[type="text"],
.tm-filter-bar input[type="search"], .tm-filter-bar input[type="text"],
.fm-filter-bar input[type="search"], .fm-filter-bar input[type="text"],
.em-filter-bar input[type="search"], .em-filter-bar input[type="text"],
.exp-filter-bar input[type="search"], .exp-filter-bar input[type="text"],
.rpt-filter-bar input[type="search"], .rpt-filter-bar input[type="text"],
.exam-filter-bar input[type="search"], .exam-filter-bar input[type="text"],
.att-filter-bar input[type="search"], .att-filter-bar input[type="text"] {
  background: #fffbeb; border-color: #fde68a; color: #92400e;
}
.sl-filter-bar input:focus, .sl-filter-bar select:focus,
.bm-filter-bar input:focus, .bm-filter-bar select:focus,
.tm-filter-bar input:focus, .tm-filter-bar select:focus,
.fm-filter-bar input:focus, .fm-filter-bar select:focus,
.em-filter-bar input:focus, .em-filter-bar select:focus,
.exp-filter-bar input:focus, .exp-filter-bar select:focus,
.rpt-filter-bar input:focus, .rpt-filter-bar select:focus,
.exam-filter-bar input:focus, .exam-filter-bar select:focus,
.att-filter-bar input:focus, .att-filter-bar select:focus {
  outline: none; border-color: #004e92 !important; box-shadow: 0 0 0 3px rgba(0, 78, 146, 0.15);
}
.sl-filter-bar .sl-btn-secondary, .bm-filter-bar .sl-btn-secondary,
.fm-filter-bar .fm-btn-secondary, .em-filter-bar .em-btn-secondary,
.exam-filter-bar .exam-btn--secondary, .att-filter-bar .att-btn--secondary,
.rpt-filter-bar button:not(.app-btn-primary):not(.btn-grad):not([class*="--primary"]) {
  background: #e0f2fe; border: 1px solid #bae6fd; color: #0369a1;
  border-radius: 0.625rem; padding: 0.5rem 0.9rem; font-size: 0.875rem; font-weight: 600; cursor: pointer;
}
.sl-filter-bar .sl-btn-secondary:hover, .exam-filter-bar .exam-btn--secondary:hover,
.att-filter-bar .att-btn--secondary:hover {
  background: #bae6fd;
}

/* Fallback when Tailwind CDN is unavailable (e.g. offline) */
.hidden { display: none !important; }

/* ========== Student List ========== */
.sl-kpi-strip { display: grid; grid-template-columns: 1fr; gap: 0.875rem; }
@media (min-width: 640px) { .sl-kpi-strip { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .sl-kpi-strip { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 1280px) { .sl-kpi-strip { grid-template-columns: repeat(5, 1fr); } }
#studentListSection .sl-kpi-card {
    padding: 0.875rem 1rem; border-radius: 1.125rem; display: flex; align-items: flex-start; gap: 0.75rem;
    background: #fff; border: 1px solid #f0f0f0; border-top: 3px solid #e5e7eb;
    transition: border-color 0.15s, background 0.15s;
}
@media (min-width: 768px) { #studentListSection .sl-kpi-card { padding: 1.125rem 1.25rem; } }
#studentListSection .sl-kpi-card.sl-kpi-total { border-top-color: #004e92; }
#studentListSection .sl-kpi-card.sl-kpi-active { border-top-color: #10b981; }
#studentListSection .sl-kpi-card.sl-kpi-inactive { border-top-color: #9ca3af; }
#studentListSection .sl-kpi-card.sl-kpi-due { border-top-color: #f97316; }
#studentListSection .sl-kpi-card.sl-kpi-collection { border-top-color: #f59e0b; }
#studentListSection .sl-kpi-card.sl-kpi-clickable { cursor: pointer; }
#studentListSection .sl-kpi-card.sl-kpi-clickable:hover { border-color: #93c5fd; background: #e0f2fe; }
#studentListSection .sl-kpi-icon {
    width: 2.5rem; height: 2.5rem; padding: 0.5rem; border-radius: 0.625rem; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
}
#studentListSection .sl-kpi-label { font-size: 0.75rem; color: #6b7280; font-weight: 600; }
#studentListSection .sl-kpi-value { font-size: 1.375rem; font-weight: 700; color: #1e293b; line-height: 1.2; margin: 0.2rem 0; }
#studentListSection .sl-kpi-sub { font-size: 0.6875rem; color: #9ca3af; margin-top: 0.25rem; }
.sl-page-header {
    display: flex; flex-direction: column; align-items: stretch; justify-content: space-between; gap: 0.875rem;
}
@media (min-width: 768px) {
    .sl-page-header { flex-direction: row; align-items: flex-start; }
}
.sl-page-header-main { display: flex; flex-direction: column; gap: 0.5rem; min-width: 0; }
.sl-header-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; flex-shrink: 0; }
.sl-pending-chip {
    display: inline-flex; align-items: center; gap: 0.5rem; align-self: flex-start;
    padding: 0.375rem 0.75rem; border-radius: 9999px;
    background: var(--app-primary-light, #e0f2fe); color: var(--app-primary, #004e92);
    font-size: 0.8125rem; font-weight: 600; text-decoration: none;
    transition: background 0.15s, color 0.15s;
}
.sl-pending-chip:hover { background: #bae6fd; color: #000428; }
.sl-pending-badge {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 1.25rem; height: 1.25rem; padding: 0 0.375rem;
    background: #ef4444; color: #fff; border-radius: 9999px;
    font-size: 0.6875rem; font-weight: 700;
}
.sl-btn-secondary {
    display: inline-flex; align-items: center; gap: 0.375rem;
    border: 1px solid #d1d5db; background: #fff; color: #374151;
    padding: 0.5rem 1rem; border-radius: 0.5rem; font-size: 0.8125rem; font-weight: 500; cursor: pointer;
}
.sl-btn-secondary:hover { background: #f9fafb; }
.sl-filter-card { padding: 0.875rem 1rem !important; }
@media (min-width: 768px) { .sl-filter-card { padding: 1.125rem 1.25rem !important; } }
.sl-filter-bar { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: stretch; }
.sl-search-wrap { position: relative; flex: 1; min-width: 12rem; }
.sl-search-icon {
    position: absolute; left: 0.75rem; top: 50%; transform: translateY(-50%);
    color: #9ca3af; pointer-events: none;
}
.sl-search-wrap input { width: 100%; padding-left: 2.25rem; }
.sl-table-card { padding: 0 !important; overflow: hidden; }
.sl-table-scroll { overflow-x: visible; }
@media (min-width: 769px) {
  .sl-table-scroll { overflow-x: auto; }
}
.sl-table-footer {
    display: flex; flex-direction: column; align-items: center; justify-content: space-between; gap: 1rem;
    padding: 0.875rem 1rem; border-top: 1px solid #f0f0f0;
}
@media (min-width: 640px) { .sl-table-footer { flex-direction: row; padding: 1rem 1.25rem; } }
.sl-page-btn {
    padding: 0.375rem 0.75rem; border-radius: 0.5rem; font-size: 0.8125rem; font-weight: 500;
    border: 1px solid #d1d5db; background: #fff; color: #374151; cursor: pointer;
}
.sl-page-btn:hover:not(:disabled) { background: #f9fafb; }
.sl-page-btn.active {
    background: var(--app-gradient, linear-gradient(to right, #000428 0%, #004e92 51%, #000428 100%));
    border-color: transparent; color: #fff;
}
.sl-page-btn:disabled, .sl-page-btn.disabled { opacity: 0.4; pointer-events: none; }
.sl-table-row { border-bottom: 1px solid #f8fafc; transition: background 0.15s; }
.sl-table-row:hover { background: #e0f2fe; }
.sl-student-cell { display: flex; align-items: center; justify-content: center; gap: 0.75rem; min-width: 0; width: fit-content; margin-inline: auto; }
.sl-student-avatar {
    width: 2.25rem; height: 2.25rem; border-radius: 9999px; flex-shrink: 0;
    background: var(--app-gradient, linear-gradient(to right, #000428 0%, #004e92 51%, #000428 100%));
    color: #fff; font-size: 0.75rem; font-weight: 700;
    display: flex; align-items: center; justify-content: center;
}
.sl-student-name {
    font-weight: 600; color: #111827; text-align: center; background: none; border: none; padding: 0; cursor: pointer;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 11rem;
}
.sl-student-name:hover { color: #004e92; }
.sl-student-roll { font-size: 0.75rem; color: #9ca3af; text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sl-batch-pill {
    display: inline-flex; align-items: center; padding: 0.25rem 0.625rem; border-radius: 9999px;
    font-size: 0.75rem; font-weight: 600; white-space: nowrap;
}
.sl-batch-blue { background: #dbeafe; color: #1d4ed8; }
.sl-batch-indigo { background: #e0f2fe; color: #000428; }
.sl-batch-green { background: #d1fae5; color: #047857; }
.sl-batch-amber { background: #fef3c7; color: #b45309; }
.sl-batch-rose { background: #ffe4e6; color: #be123c; }
.sl-batch-gray { background: #f3f4f6; color: #4b5563; }
.sl-due-badge {
    display: inline-flex; align-items: center; padding: 0.2rem 0.5rem; border-radius: 9999px;
    font-size: 0.6875rem; font-weight: 600; white-space: nowrap;
}
.sl-due-paid { background: #f3f4f6; color: #6b7280; }
.sl-due-due { background: #ffedd5; color: #c2410c; }
.sl-due-overdue { background: #fee2e2; color: #b91c1c; }
.sl-due-amount { font-weight: 600; font-size: 0.875rem; display: block; }
.sl-due-cell { display: flex; flex-direction: column; gap: 0.25rem; align-items: center; width: fit-content; margin-inline: auto; }
.sl-due-amount.sl-due-due-text { color: #ea580c; }
.sl-due-amount.sl-due-overdue-text { color: #dc2626; }
.sl-due-amount.sl-due-paid-text { color: #9ca3af; }
.sl-status-badge {
    display: inline-flex; align-items: center; padding: 0.25rem 0.625rem; border-radius: 9999px;
    font-size: 0.75rem; font-weight: 600; white-space: nowrap;
}
.sl-status-active { background: #d1fae5; color: #047857; }
.sl-status-inactive { background: #f3f4f6; color: #6b7280; }
.sl-status-archived { background: #ede9fe; color: #6d28d9; }
.sl-collect-btn {
    display: inline-flex; align-items: center; gap: 0.25rem;
    padding: 0.375rem 0.625rem; border-radius: 9999px; border: none;
    background: var(--app-gradient, linear-gradient(to right, #000428 0%, #004e92 51%, #000428 100%));
    color: #fff; font-size: 0.6875rem; font-weight: 600; cursor: pointer;
}
.sl-collect-btn:hover { filter: brightness(1.08); }
.sl-empty-state { text-align: center; padding: 2.5rem 1.5rem; }
@media (min-width: 768px) { .sl-empty-state { padding: 3rem 2rem; } }
.sl-empty-icon {
    width: 3.5rem; height: 3.5rem; margin: 0 auto 1rem;
    background: var(--app-primary-light, #e0f2fe); color: var(--app-primary, #004e92);
    border-radius: 9999px; display: flex; align-items: center; justify-content: center;
}
.sl-empty-title { font-size: 1rem; font-weight: 600; color: #1e293b; margin: 0 0 0.375rem; }
.sl-empty-desc { font-size: 0.8125rem; color: #6b7280; margin: 0 0 1.25rem; max-width: 22rem; margin-left: auto; margin-right: auto; }
#studentListSection .responsive-table th,
#studentListSection .responsive-table td,
#studentListSection .app-pill-table th,
#studentListSection .app-pill-table td {
    text-align: left;
    vertical-align: middle;
}
#studentListSection .responsive-table th {
    padding: 0.75rem 1rem; font-size: 0.75rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #6b7280; background: #f9fafb;
}
#studentListSection .responsive-table tbody td {
    padding-top: 0.875rem;
    padding-bottom: 0.875rem;
}
#studentListSection table td .sl-student-cell,
#studentListSection table td .sl-due-cell,
#studentListSection table td .sl-actions,
#studentListSection table td .sl-batch-pill,
#studentListSection table td .sl-due-badge,
#studentListSection table td .sl-status-badge,
#studentListSection table td .app-cell-pill {
    margin-inline: 0;
    justify-content: flex-start;
    align-items: flex-start;
}
#studentListSection .sl-student-cell {
    justify-content: flex-start;
    margin-inline: 0;
    width: auto;
}
#studentListSection .sl-student-name,
#studentListSection .sl-student-roll {
    text-align: left;
}
#studentListSection .sl-due-cell {
    align-items: flex-start;
    margin-inline: 0;
    width: auto;
}
#studentListSection .sl-actions {
    justify-content: flex-start;
}
#studentListSection .sl-table-row:nth-child(even) { background: #fafbfc; }
#studentListSection .sl-table-row:hover { background: #e0f2fe; }
#studentListSection .sl-student-avatar {
    box-shadow: 0 1px 3px rgba(0, 78, 146, 0.2);
}
#studentListSection .responsive-table th:first-child,
#studentListSection .responsive-table td:first-child,
#studentListSection .responsive-table td[data-label="#"] {
    text-align: center;
}
.sl-actions { display: flex; align-items: center; justify-content: center; gap: 0.25rem; flex-wrap: wrap; }
.sl-actions button { padding: 0.375rem; border-radius: 0.375rem; color: #6b7280; border: none; background: transparent; cursor: pointer; }
.sl-actions button:hover { background: #f3f4f6; color: #000428; }
.sl-actions button.sl-action-restore:hover { color: #059669; background: #ecfdf5; }
.sl-actions button.sl-action-archive:hover { color: #dc2626; background: #fef2f2; }
.sl-actions button.sl-action-wa:hover { color: #059669; background: #ecfdf5; }
.sl-actions button.sl-action-edit:hover { color: #004e92; background: #e0f2fe; }
@media print {
    body * { visibility: hidden; }
    #slPrintArea, #slPrintArea * { visibility: visible; }
    #slPrintArea { position: absolute; left: 0; top: 0; width: 100%; padding: 1rem; }
}
@media screen and (max-width: 768px) {
    .sl-table-scroll, .bm-table-scroll, .tm-table-scroll,
    .exam-table-wrap, .att-table-wrap, .hw-table-wrap,
    #feeManagementSection .fm-table-scroll,
    #expenseManagementSection .em-table-scroll,
    #reportsSection .rpt-table-scroll {
        overflow-x: visible;
    }

    table.responsive-table,
    table.exam-table, table.att-table, table.hw-table,
    table.fee-table, table.lead-table, table.sal-table,
    table.promo-table, table.acad-table, table.std-table,
    .app-page-shell table, .app-surface-card table,
    .modal-backdrop table {
        border-collapse: collapse;
        width: 100%;
    }

    table.responsive-table thead,
    table.exam-table thead, table.att-table thead, table.hw-table thead,
    table.fee-table thead, table.lead-table thead, table.sal-table thead,
    table.promo-table thead, table.acad-table thead, table.std-table thead,
    .app-page-shell table thead, .app-surface-card table thead,
    .modal-backdrop table thead {
        display: none;
    }

    table.responsive-table tbody,
    table.exam-table tbody, table.att-table tbody, table.hw-table tbody,
    table.fee-table tbody, table.lead-table tbody, table.sal-table tbody,
    table.promo-table tbody, table.acad-table tbody, table.std-table tbody,
    .app-page-shell table tbody, .app-surface-card table tbody,
    .modal-backdrop table tbody {
        display: block;
    }

    table.responsive-table tr.mobile-data-card,
    table.exam-table tr.mobile-data-card, table.att-table tr.mobile-data-card,
    table.hw-table tr.mobile-data-card, table.fee-table tr.mobile-data-card,
    table.lead-table tr.mobile-data-card, table.sal-table tr.mobile-data-card,
    table.promo-table tr.mobile-data-card, table.acad-table tr.mobile-data-card,
    table.std-table tr.mobile-data-card,
    .app-page-shell table tr.mobile-data-card, .app-surface-card table tr.mobile-data-card,
    .modal-backdrop table tr.mobile-data-card {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.5rem 0.625rem;
        margin-bottom: 0.875rem;
        padding: 1.125rem 1.25rem;
        border-radius: 1.125rem;
        background: #fff;
        border: 1px solid #f0f0f0;
        box-shadow: 0 4px 14px rgba(15, 23, 42, 0.06);
        overflow: hidden;
    }

    table.responsive-table td,
    table.exam-table td, table.att-table td, table.hw-table td,
    table.fee-table td, table.lead-table td, table.sal-table td,
    table.promo-table td, table.acad-table td, table.std-table td,
    .app-page-shell table td, .app-surface-card table td,
    .modal-backdrop table td {
        display: block;
        padding: 0;
        border: none;
        text-align: left;
    }

    table.responsive-table td::before,
    table.exam-table td::before, table.att-table td::before, table.hw-table td::before,
    table.fee-table td::before, table.lead-table td::before, table.sal-table td::before,
    table.promo-table td::before, table.acad-table td::before, table.std-table td::before,
    .app-page-shell table td::before, .app-surface-card table td::before,
    .modal-backdrop table td::before {
        content: none;
        display: none;
    }

    table.responsive-table td > *,
    table.exam-table td > *, table.att-table td > *, table.hw-table td > *,
    table.fee-table td > *, table.lead-table td > *, table.sal-table td > *,
    table.promo-table td > *, table.acad-table td > *, table.std-table td > *,
    .app-page-shell table td > *, .app-surface-card table td > *,
    .modal-backdrop table td > * {
        text-align: left;
        margin-inline: 0;
    }

    table.responsive-table td.responsive-table-skip,
    table.exam-table td.responsive-table-skip, table.att-table td.responsive-table-skip,
    table.hw-table td.responsive-table-skip, table.fee-table td.responsive-table-skip,
    table.lead-table td.responsive-table-skip, table.sal-table td.responsive-table-skip,
    table.promo-table td.responsive-table-skip, table.acad-table td.responsive-table-skip,
    table.std-table td.responsive-table-skip,
    .app-page-shell table td.responsive-table-skip, .app-surface-card table td.responsive-table-skip,
    .modal-backdrop table td.responsive-table-skip,
    table td.hidden, table td[class*="hidden"] {
        display: none !important;
    }

    table.responsive-table td.mobile-card-index,
    table.exam-table td.mobile-card-index, table.att-table td.mobile-card-index,
    table.hw-table td.mobile-card-index, table.fee-table td.mobile-card-index,
    table.lead-table td.mobile-card-index, table.sal-table td.mobile-card-index,
    table.promo-table td.mobile-card-index, table.acad-table td.mobile-card-index,
    table.std-table td.mobile-card-index,
    .app-page-shell table td.mobile-card-index, .app-surface-card table td.mobile-card-index,
    .modal-backdrop table td.mobile-card-index {
        grid-column: 1 / -1;
        display: inline-flex;
        align-self: flex-start;
        width: fit-content;
        padding: 0.15rem 0.5rem;
        border-radius: 9999px;
        background: #f1f5f9;
        color: #64748b;
        font-size: 0.6875rem;
        font-weight: 600;
    }

    table.responsive-table td.mobile-card-hero,
    table.exam-table td.mobile-card-hero, table.att-table td.mobile-card-hero,
    table.hw-table td.mobile-card-hero, table.fee-table td.mobile-card-hero,
    table.lead-table td.mobile-card-hero, table.sal-table td.mobile-card-hero,
    table.promo-table td.mobile-card-hero, table.acad-table td.mobile-card-hero,
    table.std-table td.mobile-card-hero,
    .app-page-shell table td.mobile-card-hero, .app-surface-card table td.mobile-card-hero,
    .modal-backdrop table td.mobile-card-hero {
        grid-column: 1;
        align-self: center;
        font-size: 1.0625rem;
        font-weight: 700;
        color: #111827;
        line-height: 1.3;
        min-width: 0;
    }

    tr.mobile-card-no-badge td.mobile-card-hero {
        grid-column: 1 / -1;
    }

    table.responsive-table td.mobile-card-badge,
    table.exam-table td.mobile-card-badge, table.att-table td.mobile-card-badge,
    table.hw-table td.mobile-card-badge, table.fee-table td.mobile-card-badge,
    table.lead-table td.mobile-card-badge, table.sal-table td.mobile-card-badge,
    table.promo-table td.mobile-card-badge, table.acad-table td.mobile-card-badge,
    table.std-table td.mobile-card-badge,
    .app-page-shell table td.mobile-card-badge, .app-surface-card table td.mobile-card-badge,
    .modal-backdrop table td.mobile-card-badge {
        grid-column: 2;
        justify-self: end;
        align-self: start;
        text-align: right;
    }

    table.responsive-table td.mobile-card-sub,
    table.exam-table td.mobile-card-sub, table.att-table td.mobile-card-sub,
    table.hw-table td.mobile-card-sub, table.fee-table td.mobile-card-sub,
    table.lead-table td.mobile-card-sub, table.sal-table td.mobile-card-sub,
    table.promo-table td.mobile-card-sub, table.acad-table td.mobile-card-sub,
    table.std-table td.mobile-card-sub,
    .app-page-shell table td.mobile-card-sub, .app-surface-card table td.mobile-card-sub,
    .modal-backdrop table td.mobile-card-sub {
        grid-column: 1 / -1;
        font-size: 0.8125rem;
        color: #6b7280;
        line-height: 1.4;
        padding-top: 0.125rem;
    }

    table.responsive-table td.mobile-card-detail,
    table.exam-table td.mobile-card-detail, table.att-table td.mobile-card-detail,
    table.hw-table td.mobile-card-detail, table.fee-table td.mobile-card-detail,
    table.lead-table td.mobile-card-detail, table.sal-table td.mobile-card-detail,
    table.promo-table td.mobile-card-detail, table.acad-table td.mobile-card-detail,
    table.std-table td.mobile-card-detail,
    .app-page-shell table td.mobile-card-detail, .app-surface-card table td.mobile-card-detail,
    .modal-backdrop table td.mobile-card-detail {
        min-width: 0;
    }

    .mobile-card-detail-inner {
        display: flex;
        align-items: flex-start;
        gap: 0.5rem;
        padding: 0.5rem 0.625rem;
        border-radius: 0.625rem;
        background: #f8fafc;
        border: 1px solid #f1f5f9;
        min-height: 100%;
    }

    .mobile-card-detail-icon {
        flex-shrink: 0;
        width: 1.75rem;
        height: 1.75rem;
        border-radius: 0.5rem;
        background-color: #ecfdf5;
        background-repeat: no-repeat;
        background-position: center;
        background-size: 1rem 1rem;
    }

    .mobile-card-detail-icon--phone { background-color: #ecfdf5; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23047857' stroke-width='2'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.12.81.3 1.6.57 2.34a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.74.27 1.53.45 2.34.57A2 2 0 0 1 22 16.92z'/%3E%3C/svg%3E"); }
    .mobile-card-detail-icon--email { background-color: #e0f2fe; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230369a1' stroke-width='2'%3E%3Crect width='20' height='16' x='2' y='4' rx='2'/%3E%3Cpath d='m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7'/%3E%3C/svg%3E"); }
    .mobile-card-detail-icon--batch { background-color: #ede9fe; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236d28d9' stroke-width='2'%3E%3Cpath d='M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z'/%3E%3Cpath d='M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z'/%3E%3C/svg%3E"); }
    .mobile-card-detail-icon--date { background-color: #e0f2fe; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230369a1' stroke-width='2'%3E%3Crect width='18' height='18' x='3' y='4' rx='2'/%3E%3Cline x1='16' x2='16' y1='2' y2='6'/%3E%3Cline x1='8' x2='8' y1='2' y2='6'/%3E%3Cline x1='3' x2='21' y1='10' y2='10'/%3E%3C/svg%3E"); }
    .mobile-card-detail-icon--amount { background-color: #fef3c7; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b45309' stroke-width='2'%3E%3Cline x1='12' x2='12' y1='2' y2='22'/%3E%3Cpath d='M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6'/%3E%3C/svg%3E"); }
    .mobile-card-detail-icon--tag { background-color: #fce7f3; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23be185d' stroke-width='2'%3E%3Cpath d='M12 2H2v10l9.29 9.29a1 1 0 0 0 1.41 0l6.59-6.59a1 1 0 0 0 0-1.41L12 2Z'/%3E%3Ccircle cx='7' cy='7' r='1'/%3E%3C/svg%3E"); }
    .mobile-card-detail-icon--session { background-color: #ede9fe; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236d28d9' stroke-width='2'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpolyline points='12 6 12 12 16 14'/%3E%3C/svg%3E"); }
    .mobile-card-detail-icon--teacher { background-color: #dbeafe; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231d4ed8' stroke-width='2'%3E%3Cpath d='M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3C/svg%3E"); }
    .mobile-card-detail-icon--schedule { background-color: #e0f2fe; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230369a1' stroke-width='2'%3E%3Cpath d='M3 12h18'/%3E%3Cpath d='M12 3v18'/%3E%3C/svg%3E"); }
    .mobile-card-detail-icon--user { background-color: #e0e7ff; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234338ca' stroke-width='2'%3E%3Cpath d='M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E"); }
    .mobile-card-detail-icon--status { background-color: #d1fae5; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23047857' stroke-width='2'%3E%3Cpath d='M22 11.08V12a10 10 0 1 1-5.93-9.14'/%3E%3Cpolyline points='22 4 12 14.01 9 11.01'/%3E%3C/svg%3E"); }
    .mobile-card-detail-icon--doc { background-color: #e0f2fe; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23004e92' stroke-width='2'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/%3E%3Cpolyline points='14 2 14 8 20 8'/%3E%3C/svg%3E"); }
    .mobile-card-detail-icon--default { background-color: #f1f5f9; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='12' x2='12' y1='8' y2='12'/%3E%3Cline x1='12' x2='12.01' y1='16' y2='16'/%3E%3C/svg%3E"); }

    .mobile-card-detail-body {
        display: flex;
        flex-direction: column;
        gap: 0.125rem;
        min-width: 0;
        flex: 1;
    }

    .mobile-card-detail-label {
        font-size: 0.625rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        color: #9ca3af;
        line-height: 1.2;
    }

    .mobile-card-detail-value {
        font-size: 0.8125rem;
        font-weight: 600;
        color: #1e293b;
        line-height: 1.35;
        word-break: break-word;
    }

    .mobile-card-detail-value .app-cell-pill {
        font-size: 0.75rem;
        padding: 0.2rem 0.5rem;
    }

    table.responsive-table td.mobile-card-actions,
    table.exam-table td.mobile-card-actions, table.att-table td.mobile-card-actions,
    table.hw-table td.mobile-card-actions, table.fee-table td.mobile-card-actions,
    table.lead-table td.mobile-card-actions, table.sal-table td.mobile-card-actions,
    table.promo-table td.mobile-card-actions, table.acad-table td.mobile-card-actions,
    table.std-table td.mobile-card-actions,
    .app-page-shell table td.mobile-card-actions, .app-surface-card table td.mobile-card-actions,
    .modal-backdrop table td.mobile-card-actions {
        grid-column: 1 / -1;
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem;
        padding-top: 0.625rem;
        margin-top: 0.25rem;
        border-top: 1px solid #f0f0f0;
    }

    #studentListSection table td.mobile-card-hero .sl-student-cell {
        justify-content: flex-start;
        width: 100%;
        gap: 0.625rem;
    }

    #studentListSection table td.mobile-card-hero .sl-student-name {
        font-size: 1.0625rem;
        font-weight: 700;
        color: #111827;
    }

    #studentListSection table td.mobile-card-hero .sl-student-roll {
        font-size: 0.75rem;
        color: #6b7280;
    }

    table td .sl-student-cell, table td .bm-batch-cell, table td .bm-teacher-cell,
    table td .tm-teacher-cell, table td .fm-student-cell, table td .sl-due-cell,
    table td .sl-actions, table td .bm-actions, table td .em-actions,
    table td .rpt-actions, table td .table-actions {
        width: auto;
        justify-content: flex-start;
        margin-inline: 0;
    }

    table td .sl-batch-pill, table td .sl-due-badge, table td .sl-status-badge,
    table td .exam-badge, table td .app-cell-pill {
        margin-inline: 0;
    }

    table td.mobile-card-badge .app-cell-pill,
    table td.mobile-card-badge .sl-due-badge,
    table td.mobile-card-badge .sl-status-badge,
    table td.mobile-card-badge .exam-badge {
        font-size: 0.8125rem;
        font-weight: 700;
        padding: 0.35rem 0.75rem;
        border-radius: 9999px;
    }
}

/* ========== Student Form (Add / Edit) ========== */
.student-form-page { max-width: 72rem; margin: 0 auto; }
.student-form-input { width: 100%; border: 1px solid #d1d5db; border-radius: 0.5rem; padding: 0.625rem 0.75rem; font-size: 0.875rem; }
.student-form-input:focus { outline: none; border-color: #004e92; box-shadow: 0 0 0 3px rgba(0, 78, 146, 0.15); }
.student-form-label { display: block; font-size: 0.875rem; font-weight: 500; color: #374151; margin-bottom: 0.375rem; }
.student-form-section { background: #fff; border: 1px solid #f0f0f0; border-radius: 1.125rem; padding: 0.875rem 1rem; }
@media (min-width: 768px) { .student-form-section { padding: 1.125rem 1.25rem; } }
.student-form-section-title { display: flex; align-items: center; font-size: 1rem; font-weight: 700; color: #1e293b; margin-bottom: 1rem; padding-bottom: 0.875rem; border-bottom: 1px solid #f0f0f0; }
.student-form-section-title svg { width: 1.25rem; height: 1.25rem; margin-right: 0.5rem; color: #004e92; flex-shrink: 0; }
.student-form-fee-grid { display: grid; grid-template-columns: repeat(1, 1fr); gap: 0.875rem; }
@media (min-width: 640px) { .student-form-fee-grid { grid-template-columns: repeat(3, 1fr); } }
.student-form-fee-card { background: #fff; border: 1px solid #f0f0f0; border-radius: 1.125rem; padding: 0.875rem 1rem; text-align: center; }
@media (min-width: 768px) { .student-form-fee-card { padding: 1.125rem 1.25rem; } }
.student-form-footer { position: sticky; bottom: 0; z-index: 10; background: rgba(255,255,255,0.95); backdrop-filter: blur(8px); border-top: 1px solid #f0f0f0; padding: 1rem 1.25rem; margin-top: 1.25rem; }
.student-form-page-wrap { padding-bottom: 7.5rem; }
.student-form-sidebar-card { background: #fff; border: 1px solid #f0f0f0; border-radius: 1.125rem; padding: 0.875rem 1rem; }
@media (min-width: 768px) { .student-form-sidebar-card { padding: 1.125rem 1.25rem; } }
.student-form-photo-zone { border: 2px dashed #d1d5db; border-radius: 0.75rem; padding: 2rem 1rem; text-align: center; cursor: pointer; transition: border-color 0.15s; min-height: 10rem; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.student-form-photo-zone:hover { border-color: #004e92; }
.student-form-total-payable { background: #ecfdf5; border: 1px solid #a7f3d0; border-radius: 0.5rem; padding: 0.75rem 1rem; }
.student-form-total-payable .sf-total-value { font-size: 1.25rem; font-weight: 700; color: #059669; }
.student-form-readonly { background: #f9fafb; color: #6b7280; }

/* ========== Add Student (sf-*) ========== */
#addStudentSection .sf-page-header { display: flex; flex-direction: column; gap: 0.25rem; margin-bottom: 0.25rem; }
#addStudentSection .sf-section,
#addStudentSection .sf-sidebar-card { padding: 1.125rem 1.25rem !important; }
#addStudentSection .sf-section-head {
    display: flex; align-items: center; justify-content: space-between; gap: 0.75rem;
    margin-bottom: 1.125rem; padding-bottom: 0.875rem; border-bottom: 1px solid #f0f0f0;
}
#addStudentSection .sf-section-icon {
    width: 2.5rem; height: 2.5rem; border-radius: 0.625rem; flex-shrink: 0; margin-left: auto;
    background: var(--app-primary-light, #e0f2fe); color: var(--app-primary, #004e92);
    display: flex; align-items: center; justify-content: center;
}
#addStudentSection .sf-section-title { font-size: 1rem; font-weight: 700; color: #1e293b; margin: 0; flex: 1; min-width: 0; }
#addStudentSection .sf-sidebar-stack { display: flex; flex-direction: column; gap: 1.5rem; }
@media (min-width: 1024px) {
    #addStudentSection .sf-sidebar-stack { position: sticky; top: 1rem; align-self: start; }
}
#addStudentSection .sf-photo-zone {
    border: 2px dashed #cbd5e1; border-radius: 1rem; padding: 2rem 1rem; text-align: center;
    cursor: pointer; transition: border-color 0.15s, background 0.15s; min-height: 10rem;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    background: #f8fafc;
}
#addStudentSection .sf-photo-zone:hover { border-color: #004e92; background: #e0f2fe; }
#addStudentSection .sf-photo-upload-icon { color: #94a3b8; margin-bottom: 0.5rem; }
#addStudentSection .sf-photo-label { font-size: 0.875rem; font-weight: 600; color: #374151; margin: 0; }
#addStudentSection .sf-photo-hint { font-size: 0.75rem; color: #9ca3af; margin: 0.25rem 0 0; }
#addStudentSection .sf-photo-preview {
    width: 6rem; height: 6rem; margin-bottom: 0.75rem; border-radius: 0.75rem; overflow: hidden;
    border: 3px solid #e0f2fe; box-shadow: 0 2px 8px rgba(0, 78, 146, 0.12);
}
#addStudentSection .sf-total-payable {
    background: linear-gradient(135deg, #e0f2fe 0%, #f0f9ff 100%);
    border: 1px solid #bae6fd; border-top: 3px solid #004e92;
    border-radius: 0.75rem; padding: 0.875rem 1rem;
}
#addStudentSection .sf-total-label {
    font-size: 0.6875rem; font-weight: 600; color: #004e92;
    text-transform: uppercase; letter-spacing: 0.05em; margin: 0;
}
#addStudentSection .sf-total-value {
    font-size: 1.5rem; font-weight: 700; color: #000428; margin: 0.25rem 0 0;
    font-variant-numeric: tabular-nums;
}
#addStudentSection .sf-payable-hint { font-size: 0.75rem; color: #6b7280; margin: 0; }
#addStudentSection .sf-form-footer {
    position: sticky; bottom: 0; z-index: 10;
    display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center;
    background: rgba(255, 255, 255, 0.95); backdrop-filter: blur(8px);
    border-top: 1px solid #e5e7eb; padding: 1rem 1.25rem; margin-top: 1.5rem;
}
#addStudentSection .sf-btn-secondary {
    display: inline-flex; align-items: center; gap: 0.375rem;
    border: 1px solid #d1d5db; background: #fff; color: #374151;
    padding: 0.625rem 1.25rem; border-radius: 0.5rem; font-size: 0.8125rem; font-weight: 600; cursor: pointer;
}
#addStudentSection .sf-btn-secondary:hover { background: #f9fafb; }
#addStudentSection .sf-success-banner {
    margin-top: 1rem; padding: 0.875rem 1rem; border-radius: 0.75rem;
    background: #ecfdf5; border: 1px solid #a7f3d0; color: #047857; font-size: 0.875rem; font-weight: 500;
}
#addStudentSection .sf-batch-empty {
    display: flex; flex-direction: column; align-items: flex-start; gap: 0.5rem;
    margin-top: 0.5rem; padding: 0.35rem 0;
}
#addStudentSection .sf-batch-hint { font-size: 0.75rem; color: #6b7280; margin: 0; }
#addStudentSection .sf-field-hint { font-size: 0.75rem; color: #6b7280; margin: 0.35rem 0 0; line-height: 1.4; }
#addStudentSection .sf-btn-add-batch {
    display: inline-flex; align-items: center; gap: 0.35rem;
    padding: 0.45rem 0.85rem; border-radius: 0.5rem; font-size: 0.8125rem; font-weight: 600;
    color: #fff; background: linear-gradient(to right, #000428 0%, #004e92 51%, #000428 100%);
    border: none; cursor: pointer; transition: filter 0.15s;
}
#addStudentSection .sf-btn-add-batch:hover { filter: brightness(1.08); }

#editStudentSection .es-input { width: 100%; border: 1px solid #d1d5db; border-radius: 0.5rem; padding: 0.625rem 0.75rem; font-size: 0.875rem; }
#editStudentSection .es-input:focus { outline: none; border-color: #004e92; box-shadow: 0 0 0 3px rgba(0, 78, 146, 0.15); }
#editStudentSection .es-label { display: block; font-size: 0.875rem; font-weight: 500; color: #374151; margin-bottom: 0.375rem; }
#editStudentSection .es-section { background: #fff; border-radius: 0.75rem; box-shadow: 0 1px 3px rgba(0,0,0,0.08); padding: 1.25rem 1.5rem; }
#editStudentSection .es-section-title { font-size: 1rem; font-weight: 700; color: #111827; margin-bottom: 1rem; padding-bottom: 0.75rem; border-bottom: 1px solid #f3f4f6; }
#editStudentSection .es-fee-grid { display: grid; grid-template-columns: repeat(1, 1fr); gap: 1rem; }
@media (min-width: 640px) { #editStudentSection .es-fee-grid { grid-template-columns: repeat(3, 1fr); } }
#editStudentSection .es-fee-card { background: #fff; border-radius: 0.75rem; padding: 1.25rem; box-shadow: 0 1px 3px rgba(0,0,0,0.08); text-align: center; }
#editStudentSection .es-footer { position: sticky; bottom: 0; z-index: 10; background: rgba(255,255,255,0.95); backdrop-filter: blur(8px); border-top: 1px solid #e5e7eb; padding: 1rem 0; margin-top: 1.5rem; }
#editStudentSection .es-page-wrap { padding-bottom: 5rem; }

/* ========== Student Detail Modal ========== */
#studentDetailModal .detail-tab-btn {
    border-bottom: 2px solid transparent;
    transition: color 0.15s, border-color 0.15s;
}
#studentDetailModal .detail-tab-btn.active {
    background: #e0f2fe;
    color: #000428;
    border-bottom-color: #000428;
}
.student-detail-name { cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
.student-detail-name:hover { color: #004e92; }

/* ========== Batch Management ========== */
.bm-kpi-strip { display: grid; grid-template-columns: 1fr; gap: 0.875rem; }
@media (min-width: 640px) { .bm-kpi-strip { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .bm-kpi-strip { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1280px) { .bm-kpi-strip { grid-template-columns: repeat(5, 1fr); } }
#batchManagementSection .bm-kpi-card {
    padding: 0.875rem 1rem; border-radius: 1.125rem; display: flex; align-items: flex-start; gap: 0.75rem;
    background: #fff; border: 1px solid #f0f0f0; border-top: 3px solid #e5e7eb;
    transition: border-color 0.15s, background 0.15s;
}
@media (min-width: 768px) { #batchManagementSection .bm-kpi-card { padding: 1.125rem 1.25rem; } }
#batchManagementSection .bm-kpi-card.bm-kpi-total { border-top-color: #004e92; }
#batchManagementSection .bm-kpi-card.bm-kpi-active { border-top-color: #10b981; }
#batchManagementSection .bm-kpi-card.bm-kpi-upcoming { border-top-color: #f59e0b; }
#batchManagementSection .bm-kpi-card.bm-kpi-completed { border-top-color: #ec4899; }
#batchManagementSection .bm-kpi-card.bm-kpi-students { border-top-color: #3b82f6; }
#batchManagementSection .bm-kpi-card.bm-kpi-clickable { cursor: pointer; }
#batchManagementSection .bm-kpi-card.bm-kpi-clickable:hover { border-color: #ddd6fe; background: #faf9ff; }
#batchManagementSection .bm-kpi-icon { width: 2.5rem; height: 2.5rem; padding: 0.5rem; border-radius: 0.625rem; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
#batchManagementSection .bm-kpi-label { font-size: 0.75rem; color: #6b7280; font-weight: 600; }
#batchManagementSection .bm-kpi-value { font-size: 1.375rem; font-weight: 700; color: #1e293b; line-height: 1.2; margin: 0.2rem 0; }
#batchManagementSection .bm-kpi-sub { font-size: 0.6875rem; color: #9ca3af; margin-top: 0.25rem; }
.bm-kpi-sparkline { margin-top: 0.375rem; height: 1rem; opacity: 0.7; }
.bm-filter-card { padding: 0.875rem 1rem !important; }
@media (min-width: 768px) { .bm-filter-card { padding: 1.125rem 1.25rem !important; } }
.bm-table-card { padding: 0 !important; overflow: hidden; }
.bm-table-scroll { overflow-x: visible; }
@media (min-width: 769px) {
  .bm-table-scroll { overflow-x: auto; }
}
.bm-table-footer {
    display: flex; flex-direction: column; align-items: center; justify-content: space-between; gap: 1rem;
    padding: 0.875rem 1rem; border-top: 1px solid #f0f0f0;
}
@media (min-width: 640px) { .bm-table-footer { flex-direction: row; padding: 1rem 1.25rem; } }
.bm-btn-secondary {
    border: 1px solid #d1d5db; background: #fff; color: #374151;
    padding: 0.5rem 1rem; border-radius: 0.5rem; font-size: 0.8125rem; font-weight: 500; cursor: pointer;
}
.bm-btn-secondary:hover { background: #f9fafb; }
.bm-empty-state { text-align: center; padding: 2.5rem 1.5rem; }
@media (min-width: 768px) { .bm-empty-state { padding: 3rem 2rem; } }
.bm-empty-icon {
    width: 3.5rem; height: 3.5rem; margin: 0 auto 1rem;
    background: var(--app-primary-light, #e0f2fe); color: var(--app-primary, #004e92);
    border-radius: 9999px; display: flex; align-items: center; justify-content: center;
}
.bm-empty-title { font-size: 1rem; font-weight: 600; color: #1e293b; margin: 0 0 0.375rem; }
.bm-empty-desc { font-size: 0.8125rem; color: #6b7280; margin: 0 0 1.25rem; max-width: 22rem; margin-left: auto; margin-right: auto; }
#batchDetailSection .bm-detail-tabs {
    display: flex; flex-wrap: wrap; gap: 0.5rem; padding: 0.75rem !important;
}
@media (min-width: 640px) { #batchDetailSection .bm-detail-tabs { flex-wrap: nowrap; } }
.bm-filter-bar { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: stretch; }
.bm-filter-bar input[type="text"] { flex: 1; min-width: 12rem; }
.bm-batch-cell { display: flex; align-items: center; justify-content: center; gap: 0.75rem; min-width: 0; }
.bm-batch-badge { width: 2.5rem; height: 2.5rem; border-radius: 0.5rem; display: flex; align-items: center; justify-content: center; font-size: 0.7rem; font-weight: 700; color: #fff; flex-shrink: 0; }
.bm-batch-name { font-weight: 600; color: #111827; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bm-batch-sub { font-size: 0.75rem; color: #9ca3af; }
.bm-course-badge { display: inline-flex; align-items: center; padding: 0.25rem 0.625rem; border-radius: 9999px; font-size: 0.75rem; font-weight: 600; white-space: nowrap; }
.bm-course-blue { background: #dbeafe; color: #1d4ed8; }
.bm-course-pink { background: #e0f2fe; color: #be185d; }
.bm-course-indigo { background: #e0f2fe; color: #000428; }
.bm-course-gray { background: #f3f4f6; color: #4b5563; }
.bm-teacher-cell { display: flex; align-items: center; justify-content: center; gap: 0.5rem; min-width: 0; }
.bm-teacher-avatar { width: 2rem; height: 2rem; border-radius: 9999px; display: flex; align-items: center; justify-content: center; font-size: 0.65rem; font-weight: 700; color: #fff; flex-shrink: 0; background: #004e92; }
.bm-schedule-text { font-size: 0.8125rem; color: #6b7280; max-width: 14rem; }
.bm-seat-wrap { min-width: 5rem; }
.bm-seat-count { font-size: 0.875rem; font-weight: 600; color: #374151; margin-bottom: 0.25rem; }
.bm-seat-bar { height: 0.375rem; background: #e5e7eb; border-radius: 9999px; overflow: hidden; }
.bm-seat-fill { height: 100%; border-radius: 9999px; background: #004e92; transition: width 0.2s; }
.bm-status-badge { display: inline-flex; align-items: center; padding: 0.25rem 0.625rem; border-radius: 9999px; font-size: 0.75rem; font-weight: 600; white-space: nowrap; }
.bm-status-active { background: #d1fae5; color: #047857; }
.bm-status-upcoming { background: #fef3c7; color: #b45309; }
.bm-status-completed { background: #f3f4f6; color: #4b5563; }
.bm-actions { display: flex; align-items: center; justify-content: center; gap: 0.25rem; }
.bm-actions button { padding: 0.375rem; border-radius: 0.375rem; color: #6b7280; }
.bm-actions button:hover { background: #f3f4f6; color: #000428; }
.bm-actions button.bm-del:hover { color: #dc2626; background: #fef2f2; }
#batchManagementSection .responsive-table th { padding: 0.75rem 1rem; font-size: 0.75rem; font-weight: 700; text-transform: uppercase; color: #6b7280; background: #f9fafb; }
#batchManagementSection .responsive-table td { padding: 1rem; vertical-align: middle; }

/* ========== Teacher Management ========== */
.tm-kpi-strip { display: grid; grid-template-columns: 1fr; gap: 0.875rem; }
@media (min-width: 640px) { .tm-kpi-strip { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .tm-kpi-strip { grid-template-columns: repeat(3, 1fr); } }
#teacherManagementSection .tm-kpi-card {
    padding: 0.875rem 1rem; border-radius: 1.125rem; display: flex; align-items: flex-start; gap: 0.75rem;
    background: #fff; border: 1px solid #f0f0f0; border-top: 3px solid #e5e7eb;
    transition: border-color 0.15s, background 0.15s;
}
@media (min-width: 768px) { #teacherManagementSection .tm-kpi-card { padding: 1.125rem 1.25rem; } }
#teacherManagementSection .tm-kpi-card.tm-kpi-total { border-top-color: #004e92; }
#teacherManagementSection .tm-kpi-card.tm-kpi-assigned { border-top-color: #10b981; }
#teacherManagementSection .tm-kpi-card.tm-kpi-available { border-top-color: #f59e0b; }
#teacherManagementSection .tm-kpi-icon { width: 2.5rem; height: 2.5rem; padding: 0.5rem; border-radius: 0.625rem; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
#teacherManagementSection .tm-kpi-label { font-size: 0.75rem; color: #6b7280; font-weight: 600; }
#teacherManagementSection .tm-kpi-value { font-size: 1.375rem; font-weight: 700; color: #1e293b; line-height: 1.2; margin: 0.2rem 0; }
.tm-filter-card { padding: 0.875rem 1rem !important; }
@media (min-width: 768px) { .tm-filter-card { padding: 1.125rem 1.25rem !important; } }
.tm-table-card { padding: 0 !important; overflow: hidden; }
.tm-table-scroll { overflow-x: visible; }
@media (min-width: 769px) {
  .tm-table-scroll { overflow-x: auto; }
}
.tm-filter-bar { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: stretch; }
.tm-filter-bar input { flex: 1; min-width: 12rem; }
.tm-btn-secondary {
    border: 1px solid #d1d5db; background: #fff; color: #374151;
    padding: 0.5rem 1rem; border-radius: 0.5rem; font-size: 0.8125rem; font-weight: 500; cursor: pointer;
}
.tm-btn-secondary:hover { background: #f9fafb; }
.tm-teacher-cell { display: flex; align-items: center; justify-content: center; gap: 0.75rem; min-width: 0; }
.tm-teacher-avatar {
    width: 2.25rem; height: 2.25rem; border-radius: 9999px; flex-shrink: 0;
    background: #e0f2fe; color: #000428; font-size: 0.75rem; font-weight: 700;
    display: flex; align-items: center; justify-content: center;
}
.tm-subject-pill {
    display: inline-flex; align-items: center; padding: 0.25rem 0.625rem; border-radius: 9999px;
    font-size: 0.75rem; font-weight: 600; background: #e0f2fe; color: #000428; white-space: nowrap;
}
.tm-batch-count-pill {
    display: inline-flex; align-items: center; padding: 0.25rem 0.625rem; border-radius: 9999px;
    font-size: 0.75rem; font-weight: 600; white-space: nowrap;
}
.tm-batch-count-pill.tm-has-batches { background: #d1fae5; color: #047857; }
.tm-batch-count-pill.tm-no-batches { background: #f3f4f6; color: #6b7280; }
.tm-actions { display: flex; align-items: center; gap: 0.25rem; }
.tm-actions button { padding: 0.375rem; border-radius: 0.375rem; color: #6b7280; }
.tm-actions button:hover { background: #f3f4f6; color: #000428; }
.tm-actions button.tm-del:hover { color: #dc2626; background: #fef2f2; }
.tm-empty-state { text-align: center; padding: 2.5rem 1.5rem; }
@media (min-width: 768px) { .tm-empty-state { padding: 3rem 2rem; } }
.tm-empty-icon {
    width: 3.5rem; height: 3.5rem; margin: 0 auto 1rem;
    background: var(--app-primary-light, #e0f2fe); color: var(--app-primary, #004e92);
    border-radius: 9999px; display: flex; align-items: center; justify-content: center;
}
.tm-empty-title { font-size: 1rem; font-weight: 600; color: #1e293b; margin: 0 0 0.375rem; }
.tm-empty-desc { font-size: 0.8125rem; color: #6b7280; margin: 0 0 1.25rem; max-width: 22rem; margin-left: auto; margin-right: auto; }
#teacherManagementSection .responsive-table th { padding: 0.75rem 1rem; font-size: 0.75rem; font-weight: 700; text-transform: uppercase; color: #6b7280; background: #f9fafb; }
#teacherManagementSection .responsive-table td { padding: 1rem; vertical-align: middle; }
/* btn-grad — deep blue animated gradient (see index.html for .app-btn-primary sync) */
.btn-grad {
    background-image: linear-gradient(to right, #000428 0%, #004e92 51%, #000428 100%);
    background-size: 200% auto;
    background-color: transparent;
    margin: 10px;
    padding: 15px 45px;
    text-align: center;
    text-transform: uppercase;
    transition: background-position 0.5s, box-shadow 0.5s;
    color: #fff;
    box-shadow: 0 0 20px #eee;
    border-radius: 10px;
    display: block;
    outline: none;
    border: none;
}
.btn-grad:hover {
    background-image: linear-gradient(to right, #000428 0%, #004e92 51%, #000428 100%);
    background-position: right center;
    color: #fff;
    text-decoration: none;
}
.app-btn-primary.btn-grad,
button.btn-grad {
    display: inline-flex;
    align-items: center;
    margin: 0;
    padding: 0.5rem 1rem;
}
.tm-detail-card { padding: 1.125rem 1.25rem !important; }
.tm-detail-section-title { font-size: 0.9375rem; font-weight: 600; color: #1e293b; margin: 0 0 1rem; }
.tm-detail-batch-list { display: flex; flex-wrap: wrap; gap: 0.625rem; }
.tm-detail-batch-card {
    display: inline-flex; flex-direction: column; gap: 0.125rem;
    padding: 0.625rem 0.875rem; border-radius: 0.625rem;
    background: #f9fafb; border: 1px solid #f0f0f0; min-width: 8rem;
}
.tm-detail-batch-name { font-size: 0.875rem; font-weight: 600; color: #1e293b; }
.tm-detail-batch-time { font-size: 0.75rem; color: #6b7280; }
.tm-detail-empty { font-size: 0.875rem; color: #6b7280; margin: 0; }

/* ========== Fee Management (fm-*) ========== */
#feeManagementSection .fm-page-header { display: flex; flex-direction: column; gap: 0.25rem; }
#feeManagementSection .fm-kpi-strip { display: grid; grid-template-columns: 1fr; gap: 0.875rem; }
@media (min-width: 640px) { #feeManagementSection .fm-kpi-strip { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { #feeManagementSection .fm-kpi-strip { grid-template-columns: repeat(4, 1fr); } }
#feeManagementSection .fm-kpi-card {
    padding: 0.875rem 1rem; border-radius: 1.125rem; display: flex; align-items: flex-start; gap: 0.75rem;
    background: #fff; border: 1px solid #f0f0f0; border-top: 3px solid #e5e7eb;
}
@media (min-width: 768px) { #feeManagementSection .fm-kpi-card { padding: 1.125rem 1.25rem; } }
#feeManagementSection .fm-kpi-today { border-top-color: #10b981; }
#feeManagementSection .fm-kpi-month { border-top-color: #004e92; }
#feeManagementSection .fm-kpi-total { border-top-color: #6366f1; }
#feeManagementSection .fm-kpi-count { border-top-color: #f59e0b; }
#feeManagementSection .fm-kpi-icon {
    width: 2.5rem; height: 2.5rem; padding: 0.5rem; border-radius: 0.625rem; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
}
#feeManagementSection .fm-kpi-label { font-size: 0.75rem; color: #6b7280; font-weight: 600; }
#feeManagementSection .fm-kpi-value { font-size: 1.375rem; font-weight: 700; color: #1e293b; line-height: 1.2; margin: 0.2rem 0; }
#feeManagementSection .fm-kpi-sub { font-size: 0.6875rem; color: #9ca3af; margin-top: 0.25rem; }
#feeManagementSection .fm-payment-card,
#feeManagementSection .fm-history-card { padding: 1.125rem 1.25rem !important; }
#feeManagementSection .fm-section-head {
    display: flex; align-items: center; justify-content: space-between; gap: 0.75rem;
    margin-bottom: 0.375rem;
}
#feeManagementSection .fm-section-title { font-size: 1rem; font-weight: 700; color: #1e293b; margin: 0; flex: 1; min-width: 0; }
#feeManagementSection .fm-section-sub { font-size: 0.8125rem; color: #6b7280; margin: 0 0 1.25rem; }
#feeManagementSection .fm-section-icon {
    width: 2.5rem; height: 2.5rem; border-radius: 0.625rem; flex-shrink: 0;
    background: var(--app-primary-light, #e0f2fe); color: var(--app-primary, #004e92);
    display: flex; align-items: center; justify-content: center;
}
#feeManagementSection .fm-input-wrap { position: relative; }
#feeManagementSection .fm-input-icon {
    position: absolute; left: 0.75rem; top: 50%; transform: translateY(-50%);
    color: #9ca3af; pointer-events: none; z-index: 1;
}
#feeManagementSection .fm-input-wrap .student-form-input { padding-left: 2.5rem; }
#feeManagementSection .fm-input-wrap select.student-form-input { padding-left: 2.5rem; appearance: auto; }
#feeManagementSection .fm-refund-hint { font-size: 0.75rem; color: #d97706; margin: 0.375rem 0 0; }
#feeManagementSection .fm-label-muted { color: #9ca3af; font-weight: 400; }
#feeManagementSection .fm-search-dropdown {
    position: absolute; z-index: 20; width: 100%; background: #fff;
    border: 1px solid #e5e7eb; border-radius: 0.75rem; margin-top: 0.25rem;
    max-height: 15rem; overflow-y: auto; box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
}
#feeManagementSection .fm-search-item {
    padding: 0.75rem 1rem; cursor: pointer; border-bottom: 1px solid #f8fafc;
    transition: background 0.15s;
}
#feeManagementSection .fm-search-item:last-child { border-bottom: none; }
#feeManagementSection .fm-search-item:hover { background: #e0f2fe; }
#feeManagementSection .fm-search-name { font-size: 0.875rem; font-weight: 600; color: #111827; margin: 0; }
#feeManagementSection .fm-search-meta { font-size: 0.75rem; color: #6b7280; margin: 0.125rem 0 0; }
#feeManagementSection .fm-fee-summary { margin-bottom: 0.25rem; }
#feeManagementSection .fm-batch-pill {
    display: inline-flex; align-items: center; padding: 0.25rem 0.625rem; border-radius: 9999px;
    font-size: 0.75rem; font-weight: 600; background: #e0f2fe; color: #004e92; margin-bottom: 0.875rem;
}
#feeManagementSection .fm-fee-grid { display: grid; grid-template-columns: 1fr; gap: 0.75rem; }
@media (min-width: 640px) { #feeManagementSection .fm-fee-grid { grid-template-columns: repeat(3, 1fr); } }
#feeManagementSection .fm-fee-stat {
    background: linear-gradient(135deg, #f8fafc 0%, #fff 100%);
    border: 1px solid #f0f0f0; border-radius: 0.75rem; padding: 0.875rem 1rem; text-align: center;
}
#feeManagementSection .fm-fee-stat.fm-fee-due { border-top: 3px solid #f97316; }
#feeManagementSection .fm-fee-stat.fm-fee-paid { border-top: 3px solid #10b981; }
#feeManagementSection .fm-fee-stat.fm-fee-total { border-top: 3px solid #004e92; }
#feeManagementSection .fm-fee-stat-label {
    font-size: 0.6875rem; font-weight: 600; color: #6b7280;
    text-transform: uppercase; letter-spacing: 0.04em; margin: 0;
}
#feeManagementSection .fm-fee-stat-value { font-size: 1.25rem; font-weight: 700; margin: 0.375rem 0 0; font-variant-numeric: tabular-nums; }
#feeManagementSection .fm-form-footer {
    display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0.75rem;
    margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px solid #f0f0f0;
}
#feeManagementSection .fm-success-banner {
    margin-top: 1rem; padding: 0.875rem 1rem; border-radius: 0.75rem;
    background: #ecfdf5; border: 1px solid #a7f3d0; color: #047857; font-size: 0.875rem; font-weight: 500;
}
#feeManagementSection .fm-filter-bar { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: stretch; margin-bottom: 1rem; }
#feeManagementSection .fm-search-wrap { position: relative; flex: 1; min-width: 12rem; }
#feeManagementSection .fm-search-icon {
    position: absolute; left: 0.75rem; top: 50%; transform: translateY(-50%);
    color: #9ca3af; pointer-events: none;
}
#feeManagementSection .fm-search-wrap input { width: 100%; padding-left: 2.25rem; }
#feeManagementSection .fm-table-card { padding: 0 !important; overflow: hidden; border: 1px solid #f0f0f0; border-radius: 0.75rem; }
#feeManagementSection .fm-table-scroll { overflow-x: visible; }
@media (min-width: 769px) {
  #feeManagementSection .fm-table-scroll { overflow-x: auto; }
}
#feeManagementSection .fm-table-row { border-bottom: 1px solid #f8fafc; transition: background 0.15s; }
#feeManagementSection .fm-table-row:hover { background: #e0f2fe; }
#feeManagementSection .fm-student-cell { display: flex; align-items: center; justify-content: center; gap: 0.75rem; min-width: 0; }
#feeManagementSection .fm-student-avatar {
    width: 2.25rem; height: 2.25rem; border-radius: 9999px; flex-shrink: 0;
    background: var(--app-gradient, linear-gradient(to right, #000428 0%, #004e92 51%, #000428 100%));
    color: #fff; font-size: 0.75rem; font-weight: 700;
    display: flex; align-items: center; justify-content: center;
}
#feeManagementSection .fm-student-name { font-weight: 600; color: #111827; }
#feeManagementSection .fm-student-roll { font-size: 0.75rem; color: #9ca3af; }
#feeManagementSection .fm-method-badge {
    display: inline-flex; align-items: center; gap: 0.25rem; padding: 0.25rem 0.625rem;
    border-radius: 9999px; font-size: 0.75rem; font-weight: 600; white-space: nowrap;
}
#feeManagementSection .fm-method-cash { background: #ecfdf5; color: #059669; }
#feeManagementSection .fm-method-online { background: #e0f2fe; color: #004e92; }
#feeManagementSection .fm-amount-positive { color: #059669; font-weight: 600; font-variant-numeric: tabular-nums; }
#feeManagementSection .fm-amount-refund { color: #dc2626; font-weight: 600; font-variant-numeric: tabular-nums; }
#feeManagementSection .fm-receipt-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
#feeManagementSection .fm-receipt-btn {
    display: inline-flex; align-items: center; gap: 0.25rem;
    padding: 0.25rem 0.5rem; border-radius: 0.375rem; border: none; background: transparent;
    color: #004e92; font-size: 0.75rem; font-weight: 600; cursor: pointer;
}
#feeManagementSection .fm-receipt-btn:hover { background: #e0f2fe; }
#feeManagementSection .fm-empty-state { text-align: center; padding: 2.5rem 1.5rem; }
#feeManagementSection .fm-empty-icon {
    width: 3.5rem; height: 3.5rem; margin: 0 auto 1rem;
    background: var(--app-primary-light, #e0f2fe); color: var(--app-primary, #004e92);
    border-radius: 9999px; display: flex; align-items: center; justify-content: center;
}
#feeManagementSection .fm-empty-title { font-size: 1rem; font-weight: 600; color: #1e293b; margin: 0 0 0.375rem; }
#feeManagementSection .fm-empty-desc { font-size: 0.8125rem; color: #6b7280; margin: 0; }
#feeManagementSection .responsive-table th {
    padding: 0.75rem 1rem; font-size: 0.75rem; font-weight: 700; text-transform: uppercase;
    color: #6b7280; background: #f9fafb;
}
#feeManagementSection .responsive-table td { padding: 1rem; vertical-align: middle; }

/* ========== Expense Management (em-*) ========== */
#expenseManagementSection .em-page-header { display: flex; flex-direction: column; gap: 0.25rem; }
#expenseManagementSection .em-kpi-strip { display: grid; grid-template-columns: 1fr; gap: 0.875rem; }
@media (min-width: 640px) { #expenseManagementSection .em-kpi-strip { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { #expenseManagementSection .em-kpi-strip { grid-template-columns: repeat(4, 1fr); } }
#expenseManagementSection .em-kpi-card {
    padding: 0.875rem 1rem; border-radius: 1.125rem; display: flex; align-items: flex-start; gap: 0.75rem;
    background: #fff; border: 1px solid #f0f0f0; border-top: 3px solid #e5e7eb;
}
@media (min-width: 768px) { #expenseManagementSection .em-kpi-card { padding: 1.125rem 1.25rem; } }
#expenseManagementSection .em-kpi-month { border-top-color: #f43f5e; }
#expenseManagementSection .em-kpi-categories { border-top-color: #10b981; }
#expenseManagementSection .em-kpi-month-detail { border-top-color: #f59e0b; }
#expenseManagementSection .em-kpi-year { border-top-color: #004e92; }
#expenseManagementSection .em-kpi-icon {
    width: 2.5rem; height: 2.5rem; padding: 0.5rem; border-radius: 0.625rem; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
}
#expenseManagementSection .em-kpi-label { font-size: 0.75rem; color: #6b7280; font-weight: 600; }
#expenseManagementSection .em-kpi-value { font-size: 1.375rem; font-weight: 700; color: #1e293b; line-height: 1.2; margin: 0.2rem 0; }
#expenseManagementSection .em-kpi-sub { font-size: 0.6875rem; color: #9ca3af; margin-top: 0.25rem; }
#expenseManagementSection .em-chart-grid { display: grid; grid-template-columns: 1fr; gap: 1.25rem; }
@media (min-width: 1024px) { #expenseManagementSection .em-chart-grid { grid-template-columns: 2fr 1fr; } }
#expenseManagementSection .em-chart-card { padding: 1.125rem 1.25rem !important; }
#expenseManagementSection .em-section-head {
    display: flex; align-items: center; justify-content: space-between; gap: 0.75rem;
    margin-bottom: 0.375rem;
}
#expenseManagementSection .em-section-head-inline { margin-bottom: 0; }
#expenseManagementSection .em-section-title { font-size: 1rem; font-weight: 700; color: #1e293b; margin: 0; flex: 1; min-width: 0; }
#expenseManagementSection .em-section-sub { font-size: 0.8125rem; color: #6b7280; margin: 0.25rem 0 0; }
#expenseManagementSection .em-section-icon {
    width: 2.5rem; height: 2.5rem; border-radius: 0.625rem; flex-shrink: 0;
    background: var(--app-primary-light, #e0f2fe); color: var(--app-primary, #004e92);
    display: flex; align-items: center; justify-content: center;
}
#expenseManagementSection .em-chart-filters { display: flex; flex-wrap: wrap; gap: 0.5rem; }
#expenseManagementSection .em-chart-filters select {
    border: 1px solid #d1d5db; border-radius: 0.5rem; padding: 0.375rem 0.625rem; font-size: 0.8125rem;
}
#expenseManagementSection .em-chart-filters select:focus { outline: none; border-color: #004e92; box-shadow: 0 0 0 3px rgba(0, 78, 146, 0.15); }
#expenseManagementSection .em-chart-wrap { position: relative; height: 16rem; }
#expenseManagementSection .em-chart-total { font-size: 0.875rem; font-weight: 600; color: #6b7280; margin: 0 0 0.75rem; }
#expenseManagementSection .em-chart-donut-wrap { position: relative; height: 12rem; max-width: 14rem; margin: 0 auto; }
#expenseManagementSection .em-category-legend { display: flex; flex-direction: column; gap: 0.5rem; margin-top: 1rem; max-height: 120px; overflow-y: auto; }
#expenseManagementSection .em-expenses-card { padding: 1.125rem 1.25rem !important; }
#expenseManagementSection .em-table-header {
    display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 0.75rem;
    margin-bottom: 1rem;
}
#expenseManagementSection .em-filter-bar { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: stretch; margin-bottom: 1rem; }
#expenseManagementSection .em-search-wrap { position: relative; flex: 1; min-width: 12rem; }
#expenseManagementSection .em-search-icon {
    position: absolute; left: 0.75rem; top: 50%; transform: translateY(-50%);
    color: #9ca3af; pointer-events: none;
}
#expenseManagementSection .em-search-wrap input { width: 100%; padding-left: 2.25rem; }
#expenseManagementSection .em-table-card { padding: 0 !important; overflow: hidden; border: 1px solid #f0f0f0; border-radius: 0.75rem; }
#expenseManagementSection .em-table-scroll { overflow-x: visible; }
@media (min-width: 769px) {
  #expenseManagementSection .em-table-scroll { overflow-x: auto; }
}
#expenseManagementSection .em-table-footer {
    display: flex; flex-direction: column; align-items: center; justify-content: space-between; gap: 0.75rem;
    padding: 0.875rem 1rem; border-top: 1px solid #f0f0f0;
}
@media (min-width: 640px) { #expenseManagementSection .em-table-footer { flex-direction: row; padding: 1rem 1.25rem; } }
#expenseManagementSection .em-table-row { border-bottom: 1px solid #f8fafc; transition: background 0.15s; }
#expenseManagementSection .em-table-row:hover { background: #e0f2fe; }
#expenseManagementSection .em-amount { color: #e11d48; font-weight: 600; font-variant-numeric: tabular-nums; }
#expenseManagementSection .em-actions { display: flex; align-items: center; justify-content: center; gap: 0.25rem; }
#expenseManagementSection .em-actions button { padding: 0.375rem; border-radius: 0.375rem; color: #6b7280; border: none; background: transparent; cursor: pointer; }
#expenseManagementSection .em-actions button:hover { background: #e0f2fe; color: #004e92; }
#expenseManagementSection .em-actions button.em-del:hover { color: #dc2626; background: #fef2f2; }
#expenseManagementSection .em-empty-state { text-align: center; padding: 2.5rem 1.5rem; }
#expenseManagementSection .em-empty-icon {
    width: 3.5rem; height: 3.5rem; margin: 0 auto 1rem;
    background: var(--app-primary-light, #e0f2fe); color: var(--app-primary, #004e92);
    border-radius: 9999px; display: flex; align-items: center; justify-content: center;
}
#expenseManagementSection .em-empty-title { font-size: 1rem; font-weight: 600; color: #1e293b; margin: 0 0 0.375rem; }
#expenseManagementSection .em-empty-desc { font-size: 0.8125rem; color: #6b7280; margin: 0; }
#expenseManagementSection .em-page-btn {
    padding: 0.375rem 0.75rem; border-radius: 0.5rem; font-size: 0.8125rem; font-weight: 500;
    border: 1px solid #d1d5db; background: #fff; color: #374151; cursor: pointer;
}
#expenseManagementSection .em-page-btn:hover:not(:disabled) { background: #f9fafb; }
#expenseManagementSection .em-page-btn.active {
    background: var(--app-gradient, linear-gradient(to right, #000428 0%, #004e92 51%, #000428 100%));
    border-color: transparent; color: #fff;
}
#expenseManagementSection .em-page-btn:disabled, #expenseManagementSection .em-page-btn.disabled { opacity: 0.4; pointer-events: none; }
#expenseManagementSection .em-success-banner {
    margin-top: 1rem; padding: 0.875rem 1rem; border-radius: 0.75rem;
    background: #ecfdf5; border: 1px solid #a7f3d0; color: #047857; font-size: 0.875rem; font-weight: 500;
}
#expenseManagementSection .responsive-table th {
    padding: 0.75rem 1rem; font-size: 0.75rem; font-weight: 700; text-transform: uppercase;
    color: #6b7280; background: #f9fafb;
}
#expenseManagementSection .responsive-table td { padding: 1rem; vertical-align: middle; }

/* Legacy fee-page-card — used by Expense & Reports sections */
.fee-page-card { background: #fff; border: 1px solid #f0f0f0; border-radius: 1.125rem; padding: 0.875rem 1rem; position: relative; overflow: hidden; }
@media (min-width: 768px) { .fee-page-card { padding: 1.125rem 1.25rem; } }

/* Legacy fee-* aliases used by JS-rendered content */
.fee-method-badge { display: inline-flex; align-items: center; gap: 0.25rem; padding: 0.25rem 0.625rem; border-radius: 9999px; font-size: 0.75rem; font-weight: 600; background: #ecfdf5; color: #059669; }
.fee-amount-positive { color: #059669; font-weight: 600; }


/* ========== Expense Management (legacy exp-* — Reports still uses these) ========== */
.exp-page { max-width: 90rem; margin: 0 auto; }
.exp-kpi-grid { display: grid; grid-template-columns: 1fr; gap: 0.875rem; }
@media (min-width: 640px) { .exp-kpi-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .exp-kpi-grid { grid-template-columns: repeat(4, 1fr); } }
.exp-kpi-card { background: #fff; border: 1px solid #f0f0f0; border-radius: 1.125rem; padding: 0.875rem 1rem; display: flex; align-items: flex-start; gap: 0.75rem; border-top: 3px solid #e5e7eb; }
@media (min-width: 768px) { .exp-kpi-card { padding: 1.125rem 1.25rem; } }
.exp-kpi-icon { width: 2.5rem; height: 2.5rem; border-radius: 0.625rem; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.exp-kpi-value { font-size: 1.375rem; font-weight: 700; color: #1e293b; line-height: 1.2; }
.exp-kpi-label { font-size: 0.75rem; color: #6b7280; font-weight: 600; }
.exp-kpi-sub { font-size: 0.6875rem; color: #9ca3af; margin-top: 0.25rem; }
.exp-chart-grid { display: grid; grid-template-columns: 1fr; gap: 0.875rem; }
@media (min-width: 1024px) { .exp-chart-grid { grid-template-columns: 2fr 1fr; } }
.exp-chart-card { background: #fff; border: 1px solid #f0f0f0; border-radius: 1.125rem; padding: 0.875rem 1rem; }
@media (min-width: 768px) { .exp-chart-card { padding: 1.125rem 1.25rem; } }
.exp-chart-header { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem; margin-bottom: 1rem; }
.exp-chart-filters { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.exp-chart-filters select { border: 1px solid #d1d5db; border-radius: 0.5rem; padding: 0.375rem 0.625rem; font-size: 0.8125rem; }
.exp-chart-wrap { position: relative; height: 16rem; }
.exp-chart-donut-wrap { position: relative; height: 12rem; max-width: 14rem; margin: 0 auto; }
.exp-category-legend { display: flex; flex-direction: column; gap: 0.5rem; margin-top: 1rem; max-height: 120px; overflow-y: auto; }
.exp-category-legend-item { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; font-size: 0.75rem; }
.exp-category-legend-dot { width: 0.5rem; height: 0.5rem; border-radius: 9999px; flex-shrink: 0; }
.exp-table-card { background: #fff; border-radius: 0.75rem; box-shadow: 0 1px 3px rgba(0,0,0,0.08); padding: 1.25rem 1.5rem; }
.exp-table-header { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem; margin-bottom: 1rem; }
.exp-filter-bar { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: stretch; margin-bottom: 1rem; }
.exp-filter-bar input[type="text"] { flex: 1; min-width: 10rem; }
.exp-category-badge, .exp-paymethod-badge { display: inline-flex; align-items: center; padding: 0.25rem 0.625rem; border-radius: 9999px; font-size: 0.75rem; font-weight: 600; white-space: nowrap; }
.exp-cat-indigo { background: #e0f2fe; color: #000428; }
.exp-cat-blue { background: #dbeafe; color: #1d4ed8; }
.exp-cat-emerald { background: #d1fae5; color: #047857; }
.exp-cat-amber { background: #fef3c7; color: #b45309; }
.exp-cat-rose { background: #ffe4e6; color: #be123c; }
.exp-cat-gray { background: #f3f4f6; color: #4b5563; }
.exp-pay-cash { background: #ecfdf5; color: #059669; }
.exp-pay-bank { background: #dbeafe; color: #1d4ed8; }
.exp-pay-bkash { background: #e0f2fe; color: #be185d; }
.exp-pay-online { background: #e0f2fe; color: #000428; }
#expenseManagementSection .responsive-table th { padding: 0.75rem 1rem; font-size: 0.75rem; font-weight: 700; text-transform: uppercase; color: #6b7280; background: #f9fafb; }
#expenseManagementSection .responsive-table td { padding: 1rem; vertical-align: middle; }
.exp-actions { display: flex; align-items: center; gap: 0.25rem; }
.exp-actions button { padding: 0.375rem; border-radius: 0.375rem; color: #6b7280; }
.exp-actions button:hover { background: #f3f4f6; color: #000428; }
.exp-actions button.exp-del:hover { color: #dc2626; background: #fef2f2; }

/* ========== Reports (rpt-*) ========== */
.rpt-page { max-width: 90rem; margin: 0 auto; }
#reportsSection .rpt-page-header { display: flex; flex-direction: column; gap: 0.25rem; }
#reportsSection .rpt-kpi-strip { display: grid; grid-template-columns: 1fr; gap: 0.875rem; }
@media (min-width: 640px) { #reportsSection .rpt-kpi-strip { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { #reportsSection .rpt-kpi-strip { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1280px) { #reportsSection .rpt-kpi-strip { grid-template-columns: repeat(6, 1fr); } }
#reportsSection .rpt-kpi-card {
    padding: 0.875rem 1rem; border-radius: 1.125rem; display: flex; align-items: flex-start; gap: 0.75rem;
    background: #fff; border: 1px solid #f0f0f0; border-top: 3px solid #e5e7eb;
}
@media (min-width: 768px) { #reportsSection .rpt-kpi-card { padding: 1.125rem 1.25rem; } }
#reportsSection .rpt-kpi-students { border-top-color: #3b82f6; }
#reportsSection .rpt-kpi-revenue { border-top-color: #10b981; }
#reportsSection .rpt-kpi-expenses { border-top-color: #f43f5e; }
#reportsSection .rpt-kpi-profit { border-top-color: #6366f1; }
#reportsSection .rpt-kpi-attendance { border-top-color: #f59e0b; }
#reportsSection .rpt-kpi-batches { border-top-color: #a855f7; }
#reportsSection .rpt-kpi-icon {
    width: 2.5rem; height: 2.5rem; padding: 0.5rem; border-radius: 0.625rem; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
}
#reportsSection .rpt-kpi-label { font-size: 0.75rem; color: #6b7280; font-weight: 600; }
#reportsSection .rpt-kpi-value { font-size: 1.375rem; font-weight: 700; color: #1e293b; line-height: 1.2; margin: 0.2rem 0; }
#reportsSection .rpt-kpi-sub { font-size: 0.6875rem; color: #9ca3af; margin-top: 0.25rem; }
#reportsSection .rpt-main-grid { display: grid; grid-template-columns: 1fr; gap: 0.875rem; }
@media (min-width: 1024px) { #reportsSection .rpt-main-grid { grid-template-columns: 2fr 1fr; } }
#reportsSection .rpt-main-left { display: flex; flex-direction: column; gap: 0.875rem; }
#reportsSection .rpt-main-right { display: flex; flex-direction: column; gap: 0.875rem; }
#reportsSection .rpt-filter-bar { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: stretch; background: #fff; border: 1px solid #f0f0f0; border-radius: 1.125rem; padding: 0.875rem 1rem; }
@media (min-width: 768px) { #reportsSection .rpt-filter-bar { padding: 1.125rem 1.25rem; } }
#reportsSection .rpt-filter-bar input[type="date"] { min-width: 9rem; }
#reportsSection .rpt-filter-bar select { min-width: 8rem; }
#reportsSection .rpt-export-btn { display: inline-flex; align-items: center; gap: 0.375rem; padding: 0.5rem 0.875rem; border-radius: 0.5rem; font-size: 0.875rem; font-weight: 600; border: 1px solid transparent; cursor: pointer; }
#reportsSection .rpt-export-pdf { background: #fef2f2; color: #dc2626; border-color: #fecaca; }
#reportsSection .rpt-export-pdf:hover { background: #fee2e2; }
#reportsSection .rpt-export-excel { background: #ecfdf5; color: #059669; border-color: #a7f3d0; }
#reportsSection .rpt-export-excel:hover { background: #d1fae5; }
#reportsSection .rpt-chart-card { padding: 1.125rem 1.25rem !important; }
#reportsSection .rpt-section-head {
    display: flex; align-items: center; justify-content: space-between; gap: 0.75rem;
    margin-bottom: 0.375rem;
}
#reportsSection .rpt-section-head-inline { margin-bottom: 0; }
#reportsSection .rpt-section-title { font-size: 1rem; font-weight: 700; color: #1e293b; margin: 0; flex: 1; min-width: 0; }
#reportsSection .rpt-section-sub { font-size: 0.8125rem; color: #6b7280; margin: 0.25rem 0 0.75rem; }
#reportsSection .rpt-section-icon {
    width: 2.5rem; height: 2.5rem; border-radius: 0.625rem; flex-shrink: 0;
    background: var(--app-primary-light, #e0f2fe); color: var(--app-primary, #004e92);
    display: flex; align-items: center; justify-content: center;
}
#reportsSection .rpt-chart-select { border: 1px solid #d1d5db; border-radius: 0.5rem; padding: 0.375rem 0.625rem; font-size: 0.8125rem; }
#reportsSection .rpt-chart-select:focus { outline: none; border-color: #004e92; box-shadow: 0 0 0 3px rgba(0, 78, 146, 0.15); }
#reportsSection .rpt-chart-wrap { position: relative; height: 16rem; }
#reportsSection .rpt-donut-wrap { position: relative; height: 12rem; max-width: 14rem; margin: 0 auto; }
#reportsSection .rpt-category-legend { display: flex; flex-direction: column; gap: 0.5rem; margin-top: 1rem; max-height: 120px; overflow-y: auto; }
#reportsSection .rpt-category-legend-item { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; font-size: 0.75rem; }
#reportsSection .rpt-category-legend-dot { width: 0.5rem; height: 0.5rem; border-radius: 9999px; flex-shrink: 0; }
#reportsSection .rpt-insight-card { padding: 1.125rem 1.25rem !important; }
#reportsSection .rpt-insight-row { display: flex; flex-direction: column; gap: 0.25rem; padding: 0.75rem 0; border-bottom: 1px solid #f0f0f0; }
#reportsSection .rpt-insight-row:last-child { border-bottom: none; padding-bottom: 0; }
#reportsSection .rpt-insight-label { font-size: 0.6875rem; font-weight: 600; color: #6b7280; text-transform: uppercase; letter-spacing: 0.04em; }
#reportsSection .rpt-insight-value { font-size: 0.875rem; font-weight: 600; color: #1e293b; }
#reportsSection .rpt-insight-sub { font-size: 0.75rem; color: #9ca3af; }
#reportsSection .rpt-quick-list { display: flex; flex-direction: column; gap: 0.5rem; }
#reportsSection .rpt-quick-link {
    display: flex; align-items: center; gap: 0.625rem; width: 100%; padding: 0.625rem 0.875rem;
    border-radius: 0.625rem; font-size: 0.875rem; font-weight: 500; color: #374151;
    background: #fff; border: 1px solid #f0f0f0; border-left: 3px solid #e5e7eb;
    text-align: left; cursor: pointer; transition: background 0.15s, border-color 0.15s;
}
#reportsSection .rpt-quick-link:hover { background: #e0f2fe; color: #004e92; border-color: #93c5fd; }
#reportsSection .rpt-quick-icon {
    width: 1.75rem; height: 1.75rem; border-radius: 0.375rem; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
}
#reportsSection .rpt-quick-arrow { margin-left: auto; color: #9ca3af; font-size: 0.875rem; flex-shrink: 0; }
#reportsSection .rpt-quick-collection { border-left-color: #10b981; }
#reportsSection .rpt-quick-collection .rpt-quick-icon { background: #ecfdf5; color: #059669; }
#reportsSection .rpt-quick-due { border-left-color: #f59e0b; }
#reportsSection .rpt-quick-due .rpt-quick-icon { background: #fffbeb; color: #d97706; }
#reportsSection .rpt-quick-expense { border-left-color: #f43f5e; }
#reportsSection .rpt-quick-expense .rpt-quick-icon { background: #fff1f2; color: #e11d48; }
#reportsSection .rpt-quick-ledger { border-left-color: #004e92; }
#reportsSection .rpt-quick-ledger .rpt-quick-icon { background: #e0f2fe; color: #004e92; }
#reportsSection .rpt-quick-salary { border-left-color: #a855f7; }
#reportsSection .rpt-quick-salary .rpt-quick-icon { background: #f3e8ff; color: #9333ea; }
#reportsSection .rpt-view-all-btn { margin-top: 1.25rem; }
#reportsSection .rpt-generated-card { padding: 1.125rem 1.25rem !important; }
#reportsSection .rpt-table-header { margin-bottom: 1rem; }
#reportsSection .rpt-table-card { padding: 0 !important; overflow: hidden; border: 1px solid #f0f0f0; border-radius: 0.75rem; }
#reportsSection .rpt-table-scroll { overflow-x: visible; }
@media (min-width: 769px) {
  #reportsSection .rpt-table-scroll { overflow-x: auto; }
}
#reportsSection .rpt-table-footer {
    display: flex; flex-direction: column; align-items: center; justify-content: space-between; gap: 0.75rem;
    padding: 0.875rem 1rem; border-top: 1px solid #f0f0f0;
}
@media (min-width: 640px) { #reportsSection .rpt-table-footer { flex-direction: row; padding: 1rem 1.25rem; } }
#reportsSection .rpt-table-row { border-bottom: 1px solid #f8fafc; transition: background 0.15s; }
#reportsSection .rpt-table-row:hover { background: #e0f2fe; }
#reportsSection .rpt-empty-state { text-align: center; padding: 2.5rem 1.5rem; }
#reportsSection .rpt-empty-icon {
    width: 3.5rem; height: 3.5rem; margin: 0 auto 1rem;
    background: var(--app-primary-light, #e0f2fe); color: var(--app-primary, #004e92);
    border-radius: 9999px; display: flex; align-items: center; justify-content: center;
}
#reportsSection .rpt-empty-title { font-size: 1rem; font-weight: 600; color: #1e293b; margin: 0 0 0.375rem; }
#reportsSection .rpt-empty-desc { font-size: 0.8125rem; color: #6b7280; margin: 0; }
#reportsSection .rpt-page-btn {
    padding: 0.375rem 0.75rem; border-radius: 0.5rem; font-size: 0.8125rem; font-weight: 500;
    border: 1px solid #d1d5db; background: #fff; color: #374151; cursor: pointer;
}
#reportsSection .rpt-page-btn:hover:not(:disabled) { background: #f9fafb; }
#reportsSection .rpt-page-btn.active {
    background: var(--app-gradient, linear-gradient(to right, #000428 0%, #004e92 51%, #000428 100%));
    border-color: transparent; color: #fff;
}
#reportsSection .rpt-page-btn:disabled, #reportsSection .rpt-page-btn.disabled { opacity: 0.4; pointer-events: none; }
#reportsSection .rpt-actions { display: flex; align-items: center; justify-content: center; gap: 0.25rem; }
#reportsSection .rpt-actions button { padding: 0.375rem; border-radius: 0.375rem; color: #6b7280; border: none; background: transparent; cursor: pointer; }
#reportsSection .rpt-actions button:hover { background: #e0f2fe; color: #004e92; }
#reportsSection .rpt-donut-center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; pointer-events: none; }
#reportsSection .rpt-donut-total { font-size: 1rem; font-weight: 700; color: #1e293b; }
#reportsSection .rpt-donut-label { font-size: 0.65rem; color: #6b7280; text-transform: uppercase; }
.rpt-cat-badge { display: inline-flex; align-items: center; padding: 0.25rem 0.625rem; border-radius: 9999px; font-size: 0.75rem; font-weight: 600; white-space: nowrap; }
.rpt-cat-finance { background: #e0f2fe; color: #000428; }
.rpt-cat-student { background: #d1fae5; color: #047857; }
.rpt-cat-attendance { background: #fef3c7; color: #b45309; }
.rpt-cat-teacher { background: #dbeafe; color: #1d4ed8; }
.rpt-cat-batch { background: #ffe4e6; color: #be123c; }
.rpt-status-ready { background: #d1fae5; color: #047857; }
#reportsSection .responsive-table th { padding: 0.75rem 1rem; font-size: 0.75rem; font-weight: 700; text-transform: uppercase; color: #6b7280; background: #f9fafb; }
#reportsSection .responsive-table td { padding: 1rem; vertical-align: middle; }

@media (max-width: 768px) {
    #reportsSection,
    #reportsSection .rpt-page,
    #reportsSection .rpt-main-grid,
    #reportsSection .rpt-main-left,
    #reportsSection .rpt-main-right {
        max-width: 100%;
        min-width: 0;
    }
    #reportsSection .rpt-chart-card {
        overflow: hidden;
        max-width: 100%;
    }
    #reportsSection .rpt-filter-bar {
        flex-direction: column;
        align-items: stretch;
    }
    #reportsSection .rpt-filter-bar input,
    #reportsSection .rpt-filter-bar select,
    #reportsSection .rpt-filter-bar .rpt-export-btn {
        width: 100%;
        min-width: 0;
        max-width: 100%;
    }
    #reportsSection .rpt-filter-bar input[type="date"] {
        min-width: 0;
    }
    #reportsSection .rpt-chart-wrap {
        width: 100%;
        max-width: 100%;
        height: 14rem;
        overflow: hidden;
    }
    #reportsSection .rpt-donut-wrap {
        width: 100%;
        max-width: min(14rem, 100%);
        margin: 0 auto;
        overflow: hidden;
    }
    #reportsSection .rpt-chart-wrap canvas,
    #reportsSection .rpt-donut-wrap canvas {
        max-width: 100% !important;
    }
    #reportsSection .rpt-section-head {
        flex-wrap: wrap;
    }
    #reportsSection .rpt-chart-select {
        max-width: 100%;
    }
}

/* ========== ID Card Generator ========== */
.idc-page { max-width: 90rem; margin: 0 auto; }
#idCardGeneratorSection .idc-page-header { display: flex; flex-direction: column; gap: 0.25rem; margin-bottom: 0.25rem; }
.idc-main-grid { display: grid; grid-template-columns: 1fr; gap: 0.875rem; }
@media (min-width: 1024px) { .idc-main-grid { grid-template-columns: minmax(320px, 380px) 1fr; } }
.idc-panel { padding: 0.875rem 1rem !important; }
@media (min-width: 768px) { .idc-panel { padding: 1.125rem 1.25rem !important; } }
.idc-panel-title { font-size: 0.9375rem; font-weight: 600; color: #111827; margin-bottom: 0.75rem; }
.idc-field { margin-bottom: 1rem; }
.idc-field label { display: block; font-size: 0.8125rem; font-weight: 500; color: #374151; margin-bottom: 0.375rem; }
.idc-field input[type="text"], .idc-field input[type="color"], .idc-field select { width: 100%; border: 1px solid #d1d5db; border-radius: 0.5rem; padding: 0.5rem 0.75rem; font-size: 0.875rem; }
.idc-check-row { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.5rem; font-size: 0.875rem; color: #374151; }
.idc-student-chip { display: none; align-items: center; gap: 0.75rem; padding: 0.75rem; border: 1px solid #e5e7eb; border-radius: 0.75rem; background: #f9fafb; margin-top: 0.75rem; }
.idc-student-chip.visible { display: flex; }
.idc-student-chip-avatar, .idc-chip-avatar { width: 2.5rem; height: 2.5rem; border-radius: 9999px; background: var(--idc-primary, #004e92); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 0.75rem; font-weight: 700; flex-shrink: 0; }
.idc-status-badge { display: inline-flex; padding: 0.125rem 0.5rem; border-radius: 9999px; font-size: 0.6875rem; font-weight: 600; background: #d1fae5; color: #047857; }
.idc-theme-toggle { display: flex; gap: 0.5rem; }
.idc-theme-btn { flex: 1; padding: 0.5rem; border: 1px solid #d1d5db; border-radius: 0.5rem; font-size: 0.8125rem; font-weight: 500; color: #374151; background: #fff; cursor: pointer; }
.idc-theme-btn.active { border-color: var(--idc-primary, #004e92); background: #e0f2fe; color: var(--idc-primary, #004e92); }
.idc-preview-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; flex-wrap: wrap; }
.idc-segment { display: inline-flex; border: 1px solid #e5e7eb; border-radius: 0.5rem; overflow: hidden; }
.idc-segment button { padding: 0.375rem 1rem; font-size: 0.8125rem; font-weight: 500; color: #6b7280; background: #fff; border: none; cursor: pointer; }
.idc-segment button.active { background: var(--idc-primary, #004e92); color: #fff; }
.idc-preview-wrap { display: flex; justify-content: center; align-items: center; min-height: 420px; padding: 1.5rem; background: linear-gradient(135deg, #f8fafc 0%, #f0f0f0 100%); border-radius: 1.125rem; border: 1px solid #f0f0f0; }
.idc-preview-stage { display: flex; justify-content: center; align-items: flex-start; width: 100%; overflow: auto; }
.idc-preview-empty { text-align: center; color: #9ca3af; font-size: 0.875rem; }
.idc-preview-tabs { display: flex; gap: 0.5rem; background: #f3f4f6; padding: 0.25rem; border-radius: 0.5rem; }
.idc-preview-tab { padding: 0.375rem 0.875rem; border-radius: 0.375rem; font-size: 0.8125rem; font-weight: 600; color: #6b7280; border: none; background: transparent; cursor: pointer; }
.idc-preview-tab.active { background: #fff; color: #000428; box-shadow: 0 1px 3px rgba(0,0,0,0.08); }
.idc-options-grid { display: grid; grid-template-columns: 1fr; gap: 0.75rem; }
@media (min-width: 640px) { .idc-options-grid { grid-template-columns: repeat(2, 1fr); } }
.idc-option-label { display: block; font-size: 0.8125rem; font-weight: 500; color: #374151; margin-bottom: 0.375rem; }
.idc-btn { padding: 0.5rem 1rem; border-radius: 0.5rem; font-size: 0.8125rem; font-weight: 600; border: 1px solid #d1d5db; background: #fff; color: #374151; cursor: pointer; }
.idc-btn:hover { background: #f9fafb; }
.idc-btn-primary { background: var(--idc-primary, #004e92); border-color: var(--idc-primary, #004e92); color: #fff; }
.idc-btn-primary:hover { filter: brightness(1.05); }
.idc-preview-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1rem; justify-content: flex-end; }
.idc-history-actions { display: flex; gap: 0.25rem; }
.idc-history-actions button { padding: 0.375rem; border-radius: 0.375rem; color: #6b7280; border: none; background: transparent; cursor: pointer; }
.idc-history-actions button:hover { background: #f3f4f6; color: #000428; }
.idc-history-actions button.idc-del:hover { color: #dc2626; background: #fef2f2; }
#settingsSection .settings-card { width: 100%; max-width: 36rem; }
#editStudentSection .sf-edit-hero {
    background: #fff; border: 1px solid #f0f0f0; border-radius: 1.125rem; padding: 0.875rem 1rem; margin-bottom: 0.875rem;
}
@media (min-width: 768px) { #editStudentSection .sf-edit-hero { padding: 1.125rem 1.25rem; } }
#editStudentSection .sf-edit-hero-inner { display: flex; flex-direction: column; gap: 1rem; }
@media (min-width: 640px) { #editStudentSection .sf-edit-hero-inner { flex-direction: row; align-items: center; } }
#editStudentSection .sf-edit-avatar {
    width: 4rem; height: 4rem; border-radius: 9999px; flex-shrink: 0;
    background: var(--app-gradient, linear-gradient(to right, #000428 0%, #004e92 51%, #000428 100%));
    color: #fff; font-size: 1.25rem; font-weight: 700;
    display: flex; align-items: center; justify-content: center;
}
#editStudentSection .sf-fee-strip { display: grid; grid-template-columns: 1fr; gap: 0.875rem; margin-bottom: 0.875rem; }
@media (min-width: 640px) { #editStudentSection .sf-fee-strip { grid-template-columns: repeat(3, 1fr); } }
#editStudentSection .sf-fee-pill {
    background: #fff; border: 1px solid #f0f0f0; border-radius: 1.125rem; padding: 0.875rem 1rem; text-align: center;
}
@media (min-width: 768px) { #editStudentSection .sf-fee-pill { padding: 1.125rem 1.25rem; } }

#idCardGeneratorSection .responsive-table th { padding: 0.75rem 1rem; font-size: 0.75rem; font-weight: 700; text-transform: uppercase; color: #6b7280; background: #f9fafb; }
#idCardGeneratorSection .responsive-table td { padding: 0.875rem 1rem; vertical-align: middle; }
.idc-print-a4 { display: flex; flex-wrap: wrap; gap: 10mm; justify-content: center; padding: 10mm; }
@media print {
    #idCardPrintArea, #idCardPrintArea * { visibility: visible; }
    #idCardPrintArea { position: absolute; left: 0; top: 0; width: 100%; }
    #idCardPrintArea .idc-card { width: 54mm; min-height: 86mm; box-shadow: none; page-break-inside: avoid; }
}

/* ID Card visual design */
.idc-card { width: 340px; min-height: 540px; border-radius: 16px; overflow: hidden; box-shadow: 0 10px 40px rgba(79, 38, 190, 0.18); position: relative; font-family: 'Inter', sans-serif; display: flex; flex-direction: column; background: #fff; color: #111827; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.idc-card.idc-theme-dark { background: #1f2937; color: #f9fafb; }
.idc-card.idc-theme-light { background: #fff; color: #111827; }
.idc-front-header { background: linear-gradient(145deg, var(--idc-primary, #004e92) 0%, var(--idc-primary-dark, #000428) 100%); color: #fff; padding: 0.875rem 0.875rem 0; position: relative; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.idc-front-header-inner { display: flex; align-items: center; gap: 0.625rem; padding-bottom: 1.75rem; }
.idc-front-logo { width: 42px; height: 42px; border-radius: 50%; object-fit: cover; border: 2px solid rgba(255,255,255,0.35); flex-shrink: 0; background: #fff; }
.idc-front-academy-name { font-size: 0.6875rem; font-weight: 700; line-height: 1.25; margin: 0; }
.idc-front-tagline { font-size: 0.5625rem; opacity: 0.85; margin: 0.125rem 0 0; font-weight: 400; }
.idc-wave-svg { display: block; width: 100%; height: 22px; margin-bottom: -1px; }
.idc-photo-zone { display: flex; flex-direction: column; align-items: center; margin-top: -1.75rem; position: relative; z-index: 2; padding: 0 1rem; }
.idc-photo { width: 88px; height: 88px; border-radius: 9999px; border: 3px solid var(--idc-primary, #004e92); outline: 3px solid #fff; background: linear-gradient(135deg, var(--idc-primary, #004e92), var(--idc-primary-dark, #000428)); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 1.625rem; font-weight: 700; box-shadow: 0 6px 16px rgba(0,0,0,0.12); }
.idc-ribbon { margin-top: -0.625rem; background: linear-gradient(180deg, var(--idc-primary, #004e92) 0%, var(--idc-primary-dark, #000428) 100%); color: #fff; font-size: 0.5625rem; font-weight: 700; letter-spacing: 0.14em; padding: 0.3125rem 1.125rem; clip-path: polygon(6% 0, 94% 0, 100% 100%, 0 100%); white-space: nowrap; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.idc-card-name { text-align: center; font-size: 1.125rem; font-weight: 700; padding: 0.625rem 1rem 0.5rem; margin: 0; }
.idc-fields-list { padding: 0.375rem 1rem 0.75rem; display: flex; flex-direction: column; gap: 0.4375rem; flex: 1; }
.idc-field-row { display: grid; grid-template-columns: 18px 1fr auto 1fr; align-items: center; gap: 0.25rem 0.375rem; font-size: 0.625rem; line-height: 1.3; }
.idc-field-icon { color: var(--idc-primary, #004e92); display: flex; align-items: center; justify-content: center; }
.idc-field-icon svg { width: 13px; height: 13px; }
.idc-field-label { color: #6b7280; font-weight: 500; white-space: nowrap; }
.idc-field-colon { color: #9ca3af; }
.idc-field-value { font-weight: 600; color: #111827; word-break: break-word; text-align: left; }
.idc-theme-dark .idc-field-label { color: #9ca3af; }
.idc-theme-dark .idc-field-value { color: #f3f4f6; }
.idc-front-footer { margin-top: auto; position: relative; }
.idc-front-footer-wave { background: linear-gradient(145deg, var(--idc-primary, #004e92) 0%, var(--idc-primary-dark, #000428) 100%); padding: 1.25rem 1rem 0.875rem; position: relative; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.idc-front-footer-wave .idc-wave-svg { position: absolute; top: -21px; left: 0; transform: rotate(180deg); }
.idc-front-footer-inner { display: flex; align-items: flex-end; justify-content: space-between; gap: 0.5rem; min-height: 4.5rem; }
.idc-signature { flex: 1; color: #fff; }
.idc-signature-scribble { font-family: 'Segoe Script', 'Brush Script MT', cursive; font-size: 1.125rem; opacity: 0.95; line-height: 1; margin-bottom: 0.125rem; }
.idc-signature-line { border-top: 1px solid rgba(255,255,255,0.55); width: 4.5rem; margin-bottom: 0.2rem; }
.idc-signature-label { font-size: 0.5625rem; opacity: 0.9; }
.idc-card-qr { width: 68px; height: 68px; flex-shrink: 0; background: #fff; padding: 3px; border-radius: 4px; }
.idc-card-qr img, .idc-card-qr canvas { width: 62px !important; height: 62px !important; display: block; }
.idc-back-top { display: flex; align-items: center; gap: 0.625rem; padding: 1rem 1rem 0.625rem; }
.idc-back-logo-circle { width: 36px; height: 36px; border-radius: 9999px; background: var(--idc-primary, #004e92); display: flex; align-items: center; justify-content: center; flex-shrink: 0; overflow: hidden; border: 2px solid color-mix(in srgb, var(--idc-primary, #004e92) 30%, #fff); }
.idc-back-logo-circle img { width: 100%; height: 100%; object-fit: cover; }
.idc-back-title { font-size: 0.75rem; font-weight: 700; color: var(--idc-primary, #004e92); margin: 0; line-height: 1.25; }
.idc-back-content { padding: 0 1rem 0.75rem; flex: 1; display: flex; flex-direction: column; gap: 0.5rem; }
.idc-contact-list { display: flex; flex-direction: column; gap: 0.4375rem; }
.idc-contact-row { display: flex; align-items: flex-start; gap: 0.5rem; font-size: 0.625rem; line-height: 1.45; color: #374151; }
.idc-contact-icon { color: var(--idc-primary, #004e92); flex-shrink: 0; margin-top: 1px; }
.idc-contact-icon svg { width: 13px; height: 13px; }
.idc-back-divider { border: none; border-top: 1px solid color-mix(in srgb, var(--idc-primary, #004e92) 25%, #e5e7eb); margin: 0.25rem 0; }
.idc-terms-block { position: relative; padding: 0.375rem 0; }
.idc-terms-watermark { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; pointer-events: none; opacity: 0.07; }
.idc-terms-watermark img { width: 72px; height: 72px; object-fit: contain; }
.idc-terms-block h4 { font-size: 0.6875rem; font-weight: 700; color: var(--idc-primary, #004e92); margin: 0 0 0.375rem; position: relative; }
.idc-terms-block ul { margin: 0; padding-left: 1rem; font-size: 0.5625rem; line-height: 1.45; color: #4b5563; position: relative; }
.idc-emergency-pill { display: inline-flex; align-items: center; justify-content: center; gap: 0.375rem; align-self: center; background: var(--idc-primary, #004e92); color: #fff; font-size: 0.5625rem; font-weight: 600; padding: 0.4375rem 0.875rem; border-radius: 9999px; margin: 0.25rem auto; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.idc-emergency-pill svg { width: 12px; height: 12px; flex-shrink: 0; }
.idc-back-footer { position: relative; margin-top: auto; padding-top: 1.5rem; }
.idc-back-footer-wave { background: linear-gradient(145deg, var(--idc-primary, #004e92) 0%, var(--idc-primary-dark, #000428) 100%); padding: 0 1rem 1rem; position: relative; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.idc-back-footer-wave .idc-wave-svg { position: absolute; top: -21px; left: 0; transform: rotate(180deg); }
.idc-barcode-panel { background: #fff; border-radius: 10px; padding: 0.625rem 0.75rem 0.5rem; text-align: center; box-shadow: 0 2px 8px rgba(0,0,0,0.08); position: relative; top: -0.5rem; }
.idc-barcode-panel svg { max-width: 100%; height: auto; display: block; margin: 0 auto; }
.idc-barcode-id { display: block; font-size: 0.625rem; font-weight: 700; color: #374151; margin-top: 0.375rem; letter-spacing: 0.04em; }
.idc-card.idc-theme-dark .idc-front-header, .idc-card.idc-theme-dark .idc-front-footer-wave, .idc-card.idc-theme-dark .idc-back-footer-wave { filter: brightness(0.85); }
.idc-card.idc-theme-dark .idc-back-content, .idc-card.idc-theme-dark .idc-contact-row, .idc-card.idc-theme-dark .idc-terms-block ul { color: #d1d5db; }