/* /Components/Approvals/ApprovalInbox.razor.rz.scp.css */
.approval-inbox[b-r19c6x53zq] {
    max-width: 90rem;
    margin: 0 auto;
    padding: var(--spacing-6);
}

.inbox-header[b-r19c6x53zq] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--spacing-4);
    margin-bottom: var(--spacing-6);
}

.eyebrow[b-r19c6x53zq],
.category-label[b-r19c6x53zq] {
    color: var(--color-primary-700);
    font-size: var(--font-size-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0;
}

h1[b-r19c6x53zq] {
    margin: var(--spacing-1) 0;
    color: var(--color-neutral-900);
    font-size: var(--font-size-3xl);
}

.subtitle[b-r19c6x53zq],
.description[b-r19c6x53zq] {
    color: var(--color-neutral-600);
}

.refresh-button[b-r19c6x53zq],
.retry-button[b-r19c6x53zq],
.review-link[b-r19c6x53zq] {
    min-height: 2.75rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-2);
    border-radius: var(--radius-md);
    font-weight: 600;
    cursor: pointer;
}

.refresh-button[b-r19c6x53zq] {
    padding: var(--spacing-2) var(--spacing-4);
    color: var(--color-neutral-700);
    background: var(--color-white);
    border: 1px solid var(--color-neutral-300);
}

.summary-grid[b-r19c6x53zq] {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: var(--spacing-3);
    margin-bottom: var(--spacing-5);
}

.summary-button[b-r19c6x53zq] {
    min-height: 5rem;
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
    padding: var(--spacing-4);
    color: var(--color-neutral-700);
    background: var(--color-white);
    border: 1px solid var(--color-neutral-200);
    border-radius: var(--radius-md);
    text-align: left;
    cursor: pointer;
}

.summary-button.active[b-r19c6x53zq] {
    border-color: var(--color-primary-500);
    box-shadow: 0 0 0 2px var(--color-primary-100);
}

.summary-icon[b-r19c6x53zq] {
    width: 2.5rem;
    height: 2.5rem;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    border-radius: var(--radius-md);
    color: var(--color-primary-700);
    background: var(--color-primary-50);
}

.summary-copy[b-r19c6x53zq] {
    display: grid;
    gap: var(--spacing-1);
}

.summary-copy strong[b-r19c6x53zq] {
    color: var(--color-neutral-900);
    font-size: var(--font-size-xl);
}

.summary-copy span[b-r19c6x53zq] {
    font-size: var(--font-size-sm);
}

.filter-bar[b-r19c6x53zq] {
    display: grid;
    grid-template-columns: minmax(12rem, 0.35fr) minmax(16rem, 1fr);
    gap: var(--spacing-4);
    padding: var(--spacing-4);
    margin-bottom: var(--spacing-4);
    background: var(--color-white);
    border: 1px solid var(--color-neutral-200);
    border-radius: var(--radius-md);
}

.filter-bar label[b-r19c6x53zq] {
    display: grid;
    gap: var(--spacing-2);
    color: var(--color-neutral-700);
    font-size: var(--font-size-sm);
    font-weight: 600;
}

.filter-bar select[b-r19c6x53zq],
.filter-bar input[b-r19c6x53zq] {
    width: 100%;
    min-height: 2.75rem;
    padding: var(--spacing-2) var(--spacing-3);
    color: var(--color-neutral-900);
    background: var(--color-white);
    border: 1px solid var(--color-neutral-300);
    border-radius: var(--radius-md);
}

.search-input[b-r19c6x53zq] {
    position: relative;
}

.search-input i[b-r19c6x53zq] {
    position: absolute;
    top: 50%;
    left: var(--spacing-3);
    color: var(--color-neutral-500);
    transform: translateY(-50%);
}

.search-input input[b-r19c6x53zq] {
    padding-left: var(--spacing-8);
}

.approval-list[b-r19c6x53zq] {
    display: grid;
    gap: var(--spacing-3);
}

.approval-item[b-r19c6x53zq] {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--spacing-4);
    padding: var(--spacing-4);
    background: var(--color-white);
    border: 1px solid var(--color-neutral-200);
    border-radius: var(--radius-md);
}

.category-icon[b-r19c6x53zq] {
    width: 3rem;
    height: 3rem;
    display: grid;
    place-items: center;
    border-radius: var(--radius-md);
    color: var(--color-primary-700);
    background: var(--color-primary-50);
}

.item-main[b-r19c6x53zq] {
    min-width: 0;
}

.item-heading[b-r19c6x53zq] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--spacing-3);
}

.item-heading h2[b-r19c6x53zq] {
    margin: var(--spacing-1) 0 0;
    color: var(--color-neutral-900);
    font-size: var(--font-size-lg);
}

.description[b-r19c6x53zq] {
    margin: var(--spacing-2) 0;
    overflow-wrap: anywhere;
}

.item-meta[b-r19c6x53zq] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-4);
    color: var(--color-neutral-500);
    font-size: var(--font-size-sm);
}

.item-meta span[b-r19c6x53zq] {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-2);
}

.item-meta .amount[b-r19c6x53zq] {
    color: var(--color-neutral-900);
    font-weight: 700;
}

.status-badge[b-r19c6x53zq] {
    flex: 0 0 auto;
    padding: var(--spacing-1) var(--spacing-2);
    color: var(--color-warning-800);
    background: var(--color-warning-100);
    border-radius: var(--radius-full);
    font-size: var(--font-size-xs);
    font-weight: 700;
}

.review-link[b-r19c6x53zq],
.retry-button[b-r19c6x53zq] {
    padding: var(--spacing-2) var(--spacing-4);
    color: var(--color-white);
    background: var(--color-primary-600);
    border: 0;
    text-decoration: none;
}

.state-panel[b-r19c6x53zq] {
    min-height: 16rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-3);
    padding: var(--spacing-8);
    color: var(--color-neutral-600);
    background: var(--color-white);
    border: 1px solid var(--color-neutral-200);
    border-radius: var(--radius-md);
    text-align: center;
}

.state-panel > i[b-r19c6x53zq] {
    color: var(--color-primary-600);
    font-size: var(--font-size-3xl);
}

.state-panel h2[b-r19c6x53zq],
.state-panel p[b-r19c6x53zq] {
    margin: 0;
}

.error-panel > i[b-r19c6x53zq] {
    color: var(--color-danger-600);
}

@media (max-width: 64rem) {
    .summary-grid[b-r19c6x53zq] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 48rem) {
    .approval-inbox[b-r19c6x53zq] {
        padding: var(--spacing-4);
    }

    .inbox-header[b-r19c6x53zq],
    .item-heading[b-r19c6x53zq] {
        flex-direction: column;
    }

    .filter-bar[b-r19c6x53zq] {
        grid-template-columns: 1fr;
    }

    .approval-item[b-r19c6x53zq] {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .review-link[b-r19c6x53zq] {
        grid-column: 1 / -1;
        width: 100%;
    }
}

@media (max-width: 20rem) {
    .summary-grid[b-r19c6x53zq] {
        grid-template-columns: 1fr;
    }
}
/* /Components/Approvals/PayrollApprovalsView.razor.rz.scp.css */
.payroll-approvals[b-pz3oquttk6]{width:100%;max-width:100rem;margin:0 auto;padding:var(--spacing-5);color:var(--color-text-primary)}h1[b-pz3oquttk6],h2[b-pz3oquttk6],h3[b-pz3oquttk6],p[b-pz3oquttk6]{margin:0}.page-heading[b-pz3oquttk6]{margin-bottom:var(--spacing-7)}.page-heading p[b-pz3oquttk6],.section-heading p[b-pz3oquttk6],.dialog-header p[b-pz3oquttk6]{margin-top:var(--spacing-2);color:var(--color-text-secondary);font-size:var(--font-size-sm)}.loading-state[b-pz3oquttk6],.inline-loading[b-pz3oquttk6],.empty-state[b-pz3oquttk6]{display:flex;align-items:center;justify-content:center;gap:var(--spacing-4);min-height:8rem;color:var(--color-text-secondary)}.spinner[b-pz3oquttk6]{width:var(--spacing-8);height:var(--spacing-8);border:var(--spacing-1) solid var(--color-primary-200);border-top-color:var(--color-primary-600);border-radius:var(--radius-full);animation:spin-b-pz3oquttk6 700ms linear infinite}@keyframes spin-b-pz3oquttk6{to{transform:rotate(360deg)}}.alert[b-pz3oquttk6]{display:flex;align-items:center;gap:var(--spacing-4);padding:var(--spacing-5);margin:0 var(--spacing-5) var(--spacing-6);border:1px solid;border-radius:var(--radius-sm);font-size:var(--font-size-sm)}.danger[b-pz3oquttk6]{color:var(--color-danger-700);background:var(--color-danger-50);border-color:var(--color-danger-200)}.success[b-pz3oquttk6]{color:var(--color-text-inverse);background:var(--color-success-600)}.alert.success[b-pz3oquttk6]{color:var(--color-success-700);background:var(--color-success-50);border-color:var(--color-success-200)}.text-button[b-pz3oquttk6]{margin-left:auto;min-height:2.75rem;color:inherit;font-weight:var(--font-weight-semibold);text-decoration:underline}.section-heading[b-pz3oquttk6]{display:flex;align-items:center;justify-content:space-between;gap:var(--spacing-5);padding:var(--spacing-5);margin:0}.run-panel[b-pz3oquttk6],.transfer-section[b-pz3oquttk6],.history-section[b-pz3oquttk6]{margin-bottom:var(--spacing-6);overflow:hidden;border:1px solid var(--color-border-subtle);border-radius:var(--radius-sm);background:var(--color-bg-surface);box-shadow:var(--shadow-xs)}.run-header[b-pz3oquttk6]{display:flex;align-items:center;justify-content:space-between;gap:var(--spacing-4);padding:var(--spacing-5);border-bottom:1px solid var(--color-warning-200);background:var(--color-warning-50)}.run-header p[b-pz3oquttk6]{margin-top:var(--spacing-2);color:var(--color-text-secondary);font-size:var(--font-size-xs)}.status[b-pz3oquttk6]{display:inline-flex;width:fit-content;padding:var(--spacing-2) var(--spacing-3);border-radius:var(--radius-full);font-size:var(--font-size-xs);font-weight:var(--font-weight-semibold);white-space:nowrap}.pending[b-pz3oquttk6]{color:var(--color-warning-800);background:var(--color-warning-100)}.approved[b-pz3oquttk6]{color:var(--color-success-700);background:var(--color-success-100)}.transferred[b-pz3oquttk6]{color:var(--color-primary-700);background:var(--color-primary-100)}.rejected[b-pz3oquttk6]{color:var(--color-danger-700);background:var(--color-danger-100)}.neutral[b-pz3oquttk6]{background:var(--color-neutral-100)}.review-summary[b-pz3oquttk6]{display:grid;gap:var(--spacing-3);padding:var(--spacing-5) var(--spacing-5) 0}.review-item[b-pz3oquttk6]{display:flex;align-items:center;gap:var(--spacing-4);padding:var(--spacing-4);border-left:var(--spacing-1) solid;background:var(--color-bg-subtle)}.review-item div[b-pz3oquttk6],.transfer-list li div[b-pz3oquttk6],.history-row>div[b-pz3oquttk6]{display:flex;flex-direction:column;gap:var(--spacing-1)}.review-item span[b-pz3oquttk6],.transfer-list span[b-pz3oquttk6],.history-row span[b-pz3oquttk6]{color:var(--color-text-secondary);font-size:var(--font-size-xs)}.warning[b-pz3oquttk6]{border-color:var(--color-warning-500)}.clear[b-pz3oquttk6]{border-color:var(--color-success-500)}.negative[b-pz3oquttk6]{color:var(--color-danger-700);border-color:var(--color-danger-500)}.positive[b-pz3oquttk6]{color:var(--color-success-700)}.summary-grid[b-pz3oquttk6]{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;margin:var(--spacing-5);background:var(--color-border-subtle);border:1px solid var(--color-border-subtle)}.summary-grid div[b-pz3oquttk6]{padding:var(--spacing-4);background:var(--color-bg-surface)}.summary-grid dt[b-pz3oquttk6],.history-row small[b-pz3oquttk6]{display:block;margin-bottom:var(--spacing-2);color:var(--color-text-muted);font-size:var(--font-size-xs);font-weight:var(--font-weight-semibold);text-transform:uppercase}.summary-grid dd[b-pz3oquttk6]{margin:0;font-size:var(--font-size-lg);font-weight:var(--font-weight-bold);font-variant-numeric:tabular-nums}.amount-danger[b-pz3oquttk6]{color:var(--color-danger-600)}.amount-success[b-pz3oquttk6]{color:var(--color-success-700)}.workflow[b-pz3oquttk6]{display:flex;align-items:center;padding:0 var(--spacing-5) var(--spacing-5);overflow-x:auto}.workflow-step[b-pz3oquttk6]{display:flex;flex-direction:column;align-items:center;gap:var(--spacing-2);min-width:6rem;color:var(--color-text-muted);font-size:var(--font-size-xs)}.workflow-step i[b-pz3oquttk6]{display:grid;width:2rem;height:2rem;place-items:center;border:2px solid var(--color-neutral-200);border-radius:var(--radius-full);background:var(--color-neutral-100)}.workflow-step.complete i[b-pz3oquttk6]{color:var(--color-success-700);border-color:var(--color-success-300);background:var(--color-success-100)}.workflow-step.current i[b-pz3oquttk6]{color:var(--color-warning-700);border-color:var(--color-warning-300);background:var(--color-warning-100)}.workflow-line[b-pz3oquttk6]{min-width:var(--spacing-7);height:var(--spacing-1);flex:1;background:var(--color-neutral-200)}.workflow-line.complete[b-pz3oquttk6]{background:var(--color-success-400)}.run-actions[b-pz3oquttk6],.dialog-footer[b-pz3oquttk6]{display:flex;flex-direction:column;gap:var(--spacing-3);padding:var(--spacing-5);border-top:1px solid var(--color-border-subtle)}.decision-actions[b-pz3oquttk6]{display:grid;grid-template-columns:1fr 1fr;gap:var(--spacing-3)}.button[b-pz3oquttk6],.icon-button[b-pz3oquttk6]{display:inline-flex;min-height:2.75rem;align-items:center;justify-content:center;gap:var(--spacing-3);border:1px solid transparent;border-radius:var(--radius-sm);font-size:var(--font-size-sm);font-weight:var(--font-weight-semibold)}.secondary[b-pz3oquttk6]{color:var(--color-primary-700);border-color:var(--color-primary-200);background:var(--color-primary-50)}.button.danger[b-pz3oquttk6]{color:var(--color-danger-700);border-color:var(--color-danger-200);background:var(--color-danger-50)}button:disabled[b-pz3oquttk6]{opacity:.6}.table-scroll[b-pz3oquttk6]{overflow-x:auto}[b-pz3oquttk6] .payroll-table{width:100%;min-width:42rem;border-collapse:collapse;font-size:var(--font-size-sm)}[b-pz3oquttk6] .payroll-table th,[b-pz3oquttk6] .payroll-table td{padding:var(--spacing-4) var(--spacing-5);border-top:1px solid var(--color-border-subtle);text-align:right}[b-pz3oquttk6] .payroll-table th:first-child,[b-pz3oquttk6] .payroll-table td:first-child{text-align:left}[b-pz3oquttk6] .payroll-table thead{background:var(--color-bg-subtle)}[b-pz3oquttk6] .payroll-table td span{display:block;color:var(--color-text-muted);font-size:var(--font-size-xs)}.transfer-section>.section-heading[b-pz3oquttk6],.history-section>.section-heading[b-pz3oquttk6]{border-bottom:1px solid var(--color-border-subtle)}.transfer-list[b-pz3oquttk6]{padding:0;margin:0;list-style:none}.transfer-list li[b-pz3oquttk6]{display:flex;align-items:center;justify-content:space-between;gap:var(--spacing-4);padding:var(--spacing-5);border-top:1px solid var(--color-border-subtle)}.transfer-list li:first-child[b-pz3oquttk6]{border-top:0}.transfer-amount[b-pz3oquttk6]{align-items:flex-end}.filters[b-pz3oquttk6]{display:flex;flex-wrap:wrap;gap:var(--spacing-3)}.filters label[b-pz3oquttk6]{display:flex;align-items:center;gap:var(--spacing-2);font-size:var(--font-size-xs)}select[b-pz3oquttk6],textarea[b-pz3oquttk6]{min-height:2.75rem;padding:var(--spacing-3);border:1px solid var(--color-border-strong);border-radius:var(--radius-sm);color:var(--color-text-primary);background:var(--color-bg-surface);font:inherit}textarea[b-pz3oquttk6]{width:100%;resize:vertical}.history-row[b-pz3oquttk6]{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:var(--spacing-4);padding:var(--spacing-5);border-top:1px solid var(--color-border-subtle);font-size:var(--font-size-sm)}.history-row:first-child[b-pz3oquttk6]{border-top:0}.dialog-backdrop[b-pz3oquttk6]{position:fixed;inset:0;z-index:2000;display:flex;align-items:center;justify-content:center;padding:var(--spacing-5);background:color-mix(in srgb,var(--color-neutral-900) 65%,transparent)}.dialog[b-pz3oquttk6]{display:flex;width:100%;max-height:90vh;flex-direction:column;overflow:hidden;border-radius:var(--radius-md);background:var(--color-bg-surface);box-shadow:var(--shadow-lg)}.history-dialog[b-pz3oquttk6]{max-width:72rem}.decision-dialog[b-pz3oquttk6]{max-width:32rem}.dialog-header[b-pz3oquttk6]{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--spacing-4);padding:var(--spacing-5);border-bottom:1px solid var(--color-border-subtle)}.icon-button[b-pz3oquttk6]{width:2.75rem;flex:0 0 2.75rem;color:var(--color-text-secondary);border-color:var(--color-border-subtle);background:var(--color-bg-surface)}.dialog-summary[b-pz3oquttk6]{margin:0}.dialog-body[b-pz3oquttk6]{overflow-y:auto;padding:var(--spacing-5)}.dialog-body label[b-pz3oquttk6]{display:block;margin-bottom:var(--spacing-3);font-size:var(--font-size-sm);font-weight:var(--font-weight-semibold)}.dialog-footer[b-pz3oquttk6]{flex-direction:row;justify-content:flex-end}.sr-only[b-pz3oquttk6]{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}@media(min-width:768px){.payroll-approvals[b-pz3oquttk6]{padding:var(--spacing-7)}.review-summary[b-pz3oquttk6]{grid-template-columns:repeat(2,minmax(0,1fr))}.summary-grid[b-pz3oquttk6]{grid-template-columns:repeat(4,minmax(0,1fr))}.run-actions[b-pz3oquttk6]{flex-direction:row;justify-content:space-between}.history-row[b-pz3oquttk6]{grid-template-columns:1.2fr repeat(3,1fr) 1fr auto}}
/* /Components/Certificates/CertificateIssuanceWorkflow.razor.rz.scp.css */
.certificate-workflow[b-x8cw8vz3eo]{color:var(--color-text-primary);display:flex;flex-direction:column;gap:var(--spacing-5)}.workflow-header[b-x8cw8vz3eo]{align-items:flex-start;display:flex;gap:var(--spacing-4);justify-content:space-between}.eyebrow[b-x8cw8vz3eo]{color:var(--color-primary);font-size:var(--font-size-xs);font-weight:var(--font-weight-semibold);margin:0;text-transform:uppercase}.workflow-header h1[b-x8cw8vz3eo]{font-size:var(--font-size-2xl);font-weight:var(--font-weight-bold);margin:var(--spacing-1) 0}.subtitle[b-x8cw8vz3eo]{color:var(--color-text-secondary);font-size:var(--font-size-sm);margin:0}.header-stat[b-x8cw8vz3eo]{background:var(--color-bg-white);border:1px solid var(--color-border);border-radius:var(--radius-md);display:flex;flex-direction:column;min-width:72px;padding:var(--spacing-3);text-align:center}.header-stat strong[b-x8cw8vz3eo]{color:var(--color-primary);font-size:var(--font-size-xl)}.header-stat span[b-x8cw8vz3eo]{color:var(--color-text-secondary);font-size:var(--font-size-xs)}.workflow-tabs[b-x8cw8vz3eo]{border-bottom:1px solid var(--color-border);display:flex;gap:var(--spacing-2);overflow-x:auto}.workflow-tabs button[b-x8cw8vz3eo]{background:transparent;border:0;border-bottom:3px solid transparent;color:var(--color-text-secondary);font-weight:var(--font-weight-semibold);min-height:44px;padding:var(--spacing-3) var(--spacing-4);white-space:nowrap}.workflow-tabs button.active[b-x8cw8vz3eo]{border-color:var(--color-primary);color:var(--color-primary)}.tab-count[b-x8cw8vz3eo]{background:var(--color-bg-secondary);border-radius:var(--radius-full);font-size:var(--font-size-xs);padding:var(--spacing-1) var(--spacing-2)}.issue-grid[b-x8cw8vz3eo]{display:grid;gap:var(--spacing-5)}.issue-form[b-x8cw8vz3eo]{display:flex;flex-direction:column;gap:var(--spacing-5)}.panel[b-x8cw8vz3eo],.records-panel[b-x8cw8vz3eo]{background:var(--color-bg-white);border:1px solid var(--color-border);border-radius:var(--radius-md);padding:var(--spacing-5)}.panel-heading[b-x8cw8vz3eo]{align-items:flex-start;display:flex;gap:var(--spacing-3);margin-bottom:var(--spacing-5)}.panel-heading h2[b-x8cw8vz3eo]{font-size:var(--font-size-lg);font-weight:var(--font-weight-semibold);margin:0}.panel-heading p[b-x8cw8vz3eo]{color:var(--color-text-secondary);font-size:var(--font-size-sm);margin:var(--spacing-1) 0 0}.step[b-x8cw8vz3eo]{align-items:center;background:var(--color-primary);border-radius:var(--radius-full);color:var(--color-bg-white);display:flex;flex:0 0 28px;height:28px;justify-content:center}.step.complete[b-x8cw8vz3eo]{background:var(--color-success)}.category-group[b-x8cw8vz3eo]{border:0;margin:0 0 var(--spacing-5);padding:0}.category-group:last-child[b-x8cw8vz3eo]{margin-bottom:0}.category-group legend[b-x8cw8vz3eo]{align-items:center;display:flex;font-size:var(--font-size-sm);font-weight:var(--font-weight-semibold);gap:var(--spacing-2);margin-bottom:var(--spacing-3)}.color-swatch[b-x8cw8vz3eo]{border:1px solid var(--color-border);border-radius:var(--radius-sm);height:16px;width:16px}.type-options[b-x8cw8vz3eo]{display:grid;gap:var(--spacing-2)}.type-option[b-x8cw8vz3eo]{align-items:center;border:1px solid var(--color-border);border-radius:var(--radius-md);cursor:pointer;display:flex;gap:var(--spacing-3);min-height:52px;padding:var(--spacing-3)}.type-option.selected[b-x8cw8vz3eo]{border-color:var(--color-primary);box-shadow:inset 3px 0 0 var(--color-primary)}.type-option span[b-x8cw8vz3eo]{display:flex;flex-direction:column}.type-option small[b-x8cw8vz3eo],.student-table small[b-x8cw8vz3eo],.result-list small[b-x8cw8vz3eo]{color:var(--color-text-secondary);display:block;font-size:var(--font-size-xs);margin-top:var(--spacing-1)}input[type="checkbox"][b-x8cw8vz3eo],input[type="radio"][b-x8cw8vz3eo]{accent-color:var(--color-primary);height:18px;width:18px}.filter-grid[b-x8cw8vz3eo]{display:grid;gap:var(--spacing-4);margin-bottom:var(--spacing-4)}label[b-x8cw8vz3eo]{color:var(--color-text-secondary);display:flex;flex-direction:column;font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);gap:var(--spacing-2)}select[b-x8cw8vz3eo],input[type="search"][b-x8cw8vz3eo],textarea[b-x8cw8vz3eo]{background:var(--color-bg-white);border:1px solid var(--color-border);border-radius:var(--radius-md);color:var(--color-text-primary);font:inherit;min-height:44px;padding:var(--spacing-3)}select:focus[b-x8cw8vz3eo],input:focus[b-x8cw8vz3eo],textarea:focus[b-x8cw8vz3eo]{border-color:var(--color-primary);outline:2px solid var(--color-primary-light)}.student-tools[b-x8cw8vz3eo]{align-items:stretch;display:flex;flex-direction:column;gap:var(--spacing-3);margin-bottom:var(--spacing-3)}.search-box[b-x8cw8vz3eo]{position:relative}.search-box i[b-x8cw8vz3eo]{left:var(--spacing-3);position:absolute;top:15px}.search-box input[b-x8cw8vz3eo]{padding-left:var(--spacing-7);width:100%}.select-all[b-x8cw8vz3eo]{align-items:center;flex-direction:row;min-height:44px}.student-table-wrap[b-x8cw8vz3eo],.records-table-wrap[b-x8cw8vz3eo]{overflow-x:auto}.student-table[b-x8cw8vz3eo],.records-panel table[b-x8cw8vz3eo]{border-collapse:collapse;width:100%}th[b-x8cw8vz3eo]{color:var(--color-text-secondary);font-size:var(--font-size-xs);font-weight:var(--font-weight-semibold);padding:var(--spacing-3);text-align:left}td[b-x8cw8vz3eo]{border-top:1px solid var(--color-border);font-size:var(--font-size-sm);padding:var(--spacing-3)}.email-state[b-x8cw8vz3eo]{align-items:center;display:inline-flex;font-size:var(--font-size-xs);gap:var(--spacing-1)}.email-state.available[b-x8cw8vz3eo]{color:var(--color-success)}.email-state.unknown[b-x8cw8vz3eo]{color:var(--color-text-secondary)}.toggle-row[b-x8cw8vz3eo]{align-items:flex-start;background:var(--color-bg-secondary);border-radius:var(--radius-md);flex-direction:row;margin-top:var(--spacing-4);padding:var(--spacing-4)}.toggle-row span[b-x8cw8vz3eo]{display:flex;flex-direction:column}.toggle-row small[b-x8cw8vz3eo]{font-weight:var(--font-weight-normal)}.character-count[b-x8cw8vz3eo]{align-self:flex-end;color:var(--color-text-secondary);font-size:var(--font-size-xs)}.batch-notice[b-x8cw8vz3eo]{align-items:flex-start;background:var(--color-warning-light);border-radius:var(--radius-md);display:flex;font-size:var(--font-size-sm);gap:var(--spacing-3);margin-top:var(--spacing-4);padding:var(--spacing-4)}.generate-button[b-x8cw8vz3eo],.state-panel button[b-x8cw8vz3eo],.secondary-button[b-x8cw8vz3eo],.danger-button[b-x8cw8vz3eo]{align-items:center;border:0;border-radius:var(--radius-md);display:flex;font-weight:var(--font-weight-semibold);gap:var(--spacing-2);justify-content:center;min-height:44px;padding:var(--spacing-3) var(--spacing-5)}.generate-button[b-x8cw8vz3eo]{background:var(--color-primary);color:var(--color-bg-white);margin-top:var(--spacing-4);width:100%}.generate-button:disabled[b-x8cw8vz3eo]{cursor:not-allowed;opacity:.55}.preview-column[b-x8cw8vz3eo]{min-width:0}.preview-label[b-x8cw8vz3eo]{display:flex;justify-content:space-between;margin-bottom:var(--spacing-2)}.preview-label span[b-x8cw8vz3eo]{font-weight:var(--font-weight-semibold)}.preview-label small[b-x8cw8vz3eo],.preview-note[b-x8cw8vz3eo]{color:var(--color-text-secondary);font-size:var(--font-size-xs)}.a4-preview[b-x8cw8vz3eo]{aspect-ratio:210/297;background:var(--color-bg-white);border:1px solid var(--color-border);box-shadow:var(--shadow-md);padding:5%;width:100%}.preview-border[b-x8cw8vz3eo]{align-items:center;border:3px double var(--certificate-accent);display:flex;flex-direction:column;height:100%;justify-content:flex-start;padding:8%;text-align:center}.preview-mark[b-x8cw8vz3eo]{align-items:center;background:var(--certificate-accent);border-radius:var(--radius-full);color:var(--color-bg-white);display:flex;height:48px;justify-content:center;width:48px}.preview-school[b-x8cw8vz3eo]{font-size:clamp(12px,2.5vw,20px);font-weight:var(--font-weight-bold);margin:5% 0 0;text-transform:uppercase}.preview-location[b-x8cw8vz3eo],.presented[b-x8cw8vz3eo]{color:var(--color-text-secondary);font-size:clamp(7px,1.5vw,12px);margin:2% 0}.preview-rule[b-x8cw8vz3eo]{background:var(--certificate-accent);height:2px;margin:5% auto;width:25%}.a4-preview h2[b-x8cw8vz3eo]{color:var(--certificate-accent);font-family:Georgia,serif;font-size:clamp(16px,4vw,32px);margin:2% 0 8%;text-transform:uppercase}.a4-preview h3[b-x8cw8vz3eo]{border-bottom:1px solid var(--certificate-accent);font-family:Georgia,serif;font-size:clamp(13px,3vw,24px);margin:3% 0;padding:0 5% 2%}.preview-copy[b-x8cw8vz3eo],.preview-reason[b-x8cw8vz3eo]{font-family:Georgia,serif;font-size:clamp(8px,1.8vw,14px);line-height:1.6;margin:4% auto;max-width:85%}.preview-reason[b-x8cw8vz3eo]{color:var(--certificate-accent);font-style:italic}.signature-row[b-x8cw8vz3eo]{display:flex;font-size:clamp(7px,1.5vw,11px);justify-content:space-between;margin-top:auto;width:100%}.signature-row span[b-x8cw8vz3eo]{display:flex;flex-direction:column;width:38%}.signature-row i[b-x8cw8vz3eo]{border-top:1px solid var(--color-text-primary);margin-bottom:4%}.preview-note[b-x8cw8vz3eo]{display:flex;gap:var(--spacing-2);line-height:1.5;margin-top:var(--spacing-3)}.result-counts[b-x8cw8vz3eo]{display:grid;gap:var(--spacing-2);grid-template-columns:repeat(2,1fr)}.result-counts span[b-x8cw8vz3eo]{background:var(--color-bg-secondary);border-radius:var(--radius-md);font-size:var(--font-size-xs);padding:var(--spacing-3)}.result-counts strong[b-x8cw8vz3eo]{display:block;font-size:var(--font-size-lg)}.result-list[b-x8cw8vz3eo]{margin-top:var(--spacing-4)}.result-list>div[b-x8cw8vz3eo]{align-items:center;border-top:1px solid var(--color-border);display:flex;justify-content:space-between;padding:var(--spacing-3) 0}.status-badge[b-x8cw8vz3eo],.record-status[b-x8cw8vz3eo]{background:var(--color-bg-secondary);border-radius:var(--radius-full);font-size:var(--font-size-xs);padding:var(--spacing-1) var(--spacing-2)}.state-panel[b-x8cw8vz3eo],.empty-inline[b-x8cw8vz3eo],.records-empty[b-x8cw8vz3eo]{align-items:center;background:var(--color-bg-white);border:1px solid var(--color-border);border-radius:var(--radius-md);color:var(--color-text-secondary);display:flex;gap:var(--spacing-3);justify-content:center;min-height:120px;padding:var(--spacing-5);text-align:center}.state-panel.error[b-x8cw8vz3eo]{color:var(--color-danger)}.records-empty[b-x8cw8vz3eo]{flex-direction:column;min-height:260px}.records-empty i[b-x8cw8vz3eo]{font-size:var(--font-size-2xl)}.records-empty h2[b-x8cw8vz3eo],.records-empty p[b-x8cw8vz3eo]{margin:0}.record-actions[b-x8cw8vz3eo]{display:flex;gap:var(--spacing-2)}.record-actions button[b-x8cw8vz3eo]{background:var(--color-bg-secondary);border:0;border-radius:var(--radius-md);color:var(--color-primary);height:44px;width:44px}.record-actions .approve[b-x8cw8vz3eo]{color:var(--color-success)}.record-actions .reject[b-x8cw8vz3eo]{color:var(--color-danger)}.dialog-overlay[b-x8cw8vz3eo]{align-items:center;background:var(--color-overlay);display:flex;inset:0;justify-content:center;padding:var(--spacing-4);position:fixed;z-index:var(--z-modal)}.reject-dialog[b-x8cw8vz3eo]{background:var(--color-bg-white);border-radius:var(--radius-md);max-width:480px;padding:var(--spacing-5);width:100%}.reject-dialog h2[b-x8cw8vz3eo]{margin-top:0}.reject-dialog p[b-x8cw8vz3eo]{color:var(--color-text-secondary)}.dialog-actions[b-x8cw8vz3eo]{display:flex;flex-direction:column-reverse;gap:var(--spacing-3);margin-top:var(--spacing-5)}.secondary-button[b-x8cw8vz3eo]{background:var(--color-bg-secondary);color:var(--color-text-primary)}.danger-button[b-x8cw8vz3eo]{background:var(--color-danger);color:var(--color-bg-white)}.sr-only[b-x8cw8vz3eo]{height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}
@media (max-width:767px){.student-table thead[b-x8cw8vz3eo],.records-panel thead[b-x8cw8vz3eo]{display:none}.student-table tr[b-x8cw8vz3eo],.records-panel tr[b-x8cw8vz3eo]{border:1px solid var(--color-border);border-radius:var(--radius-md);display:block;margin-bottom:var(--spacing-3);padding:var(--spacing-2)}.student-table td[b-x8cw8vz3eo],.records-panel td[b-x8cw8vz3eo]{align-items:center;border:0;display:flex;justify-content:space-between;padding:var(--spacing-2)}.student-table td[b-x8cw8vz3eo]::before,.records-panel td[b-x8cw8vz3eo]::before{color:var(--color-text-secondary);content:attr(data-label);font-size:var(--font-size-xs);font-weight:var(--font-weight-semibold);margin-right:var(--spacing-3)}.record-actions[b-x8cw8vz3eo]{justify-content:flex-end}}
.certificate-type-select[b-x8cw8vz3eo]{display:flex;flex-direction:column;font-size:var(--font-size-sm);font-weight:var(--font-weight-semibold);gap:var(--spacing-2)}.certificate-type-select select[b-x8cw8vz3eo]{width:100%}.selected-type-summary[b-x8cw8vz3eo]{align-items:center;background:var(--color-bg-secondary);border:1px solid var(--color-border);border-radius:var(--radius-md);display:flex;gap:var(--spacing-3);margin-top:var(--spacing-3);padding:var(--spacing-3)}.selected-type-summary>span:last-child[b-x8cw8vz3eo]{display:flex;flex-direction:column;gap:var(--spacing-1)}.selected-type-summary strong[b-x8cw8vz3eo]{font-size:var(--font-size-sm)}.selected-type-summary small[b-x8cw8vz3eo]{color:var(--color-text-secondary);font-size:var(--font-size-xs)}
@media (min-width:768px){.workflow-header h1[b-x8cw8vz3eo]{font-size:var(--font-size-3xl)}.filter-grid[b-x8cw8vz3eo]{grid-template-columns:repeat(3,1fr)}.student-tools[b-x8cw8vz3eo]{align-items:center;flex-direction:row;justify-content:space-between}.search-box[b-x8cw8vz3eo]{width:min(360px,60%)}.result-counts[b-x8cw8vz3eo]{grid-template-columns:repeat(4,1fr)}.dialog-actions[b-x8cw8vz3eo]{flex-direction:row;justify-content:flex-end}}
@media (min-width:1280px){.preview-frame[b-x8cw8vz3eo]{height:440px;width:312px}.html-preview[b-x8cw8vz3eo]{transform:scale(0.393)}}
.delivery-actions button[b-x8cw8vz3eo]{align-items:center;display:flex;gap:var(--spacing-2);justify-content:center;min-height:44px}.delivery-actions button:disabled[b-x8cw8vz3eo]{cursor:not-allowed;opacity:var(--opacity-60)}.preview-panel[b-x8cw8vz3eo]{display:flex;flex-direction:column;gap:var(--spacing-3)}.preview-bar[b-x8cw8vz3eo]{align-items:center;display:flex;flex-wrap:wrap;gap:var(--spacing-3)}.preview-title[b-x8cw8vz3eo]{align-items:center;color:var(--color-primary);display:inline-flex;gap:var(--spacing-2);font-weight:var(--font-weight-semibold)}.preview-who[b-x8cw8vz3eo]{color:var(--color-text-secondary);font-size:var(--font-size-sm)}.preview-actions[b-x8cw8vz3eo]{display:flex;gap:var(--spacing-2);margin-left:auto}.preview-action[b-x8cw8vz3eo]{align-items:center;background:var(--color-bg-secondary);border:1px solid var(--color-border);border-radius:var(--radius-md);color:var(--color-text-primary);display:inline-flex;gap:var(--spacing-2);font-weight:var(--font-weight-semibold);min-height:36px;padding:var(--spacing-2) var(--spacing-3)}.preview-action:hover[b-x8cw8vz3eo]{border-color:var(--color-primary);color:var(--color-primary)}.preview-action:disabled[b-x8cw8vz3eo]{cursor:not-allowed;opacity:var(--opacity-60)}.preview-state[b-x8cw8vz3eo]{align-items:center;background:var(--color-bg-secondary);border:1px dashed var(--color-border);border-radius:var(--radius-md);color:var(--color-text-secondary);display:flex;justify-content:center;min-height:120px;padding:var(--spacing-5);text-align:center}.preview-state.error[b-x8cw8vz3eo]{border-color:var(--color-danger);color:var(--color-danger)}.preview-frame[b-x8cw8vz3eo]{background:var(--color-bg-white);border:1px solid var(--color-border);border-radius:var(--radius-md);height:396px;margin:0 auto;overflow:hidden;position:relative;width:280px}.html-preview[b-x8cw8vz3eo]{background:var(--color-bg-white);border:0;height:1123px;transform:scale(0.3526);transform-origin:top left;width:794px}.delivery-actions[b-x8cw8vz3eo]{display:flex;flex-direction:column;gap:var(--spacing-3);margin-bottom:var(--spacing-4)}
@media (min-width:768px){.delivery-actions[b-x8cw8vz3eo]{flex-direction:row;flex-wrap:wrap}.delivery-actions button[b-x8cw8vz3eo]{width:auto}}
@media print{.workflow-header[b-x8cw8vz3eo],.workflow-tabs[b-x8cw8vz3eo],.issue-form[b-x8cw8vz3eo],.preview-bar[b-x8cw8vz3eo]{display:none}.issue-grid[b-x8cw8vz3eo]{display:block}.preview-frame[b-x8cw8vz3eo]{height:auto;overflow:visible;width:auto}.html-preview[b-x8cw8vz3eo]{border:0;height:auto;transform:none;width:auto}}
.dues-summary[b-x8cw8vz3eo]{background:var(--color-bg-secondary);border:1px solid var(--color-border);border-radius:var(--radius-md);display:grid;gap:var(--spacing-2);margin:var(--spacing-4) 0;padding:var(--spacing-3)}.dues-summary div[b-x8cw8vz3eo]{align-items:center;display:flex;justify-content:space-between}.dues-summary dt[b-x8cw8vz3eo]{color:var(--color-text-secondary)}.dues-summary dd[b-x8cw8vz3eo]{font-weight:var(--font-weight-semibold);margin:0}.warning-button[b-x8cw8vz3eo]{background:var(--color-warning);border:0;border-radius:var(--radius-md);color:var(--color-text-primary);font-weight:var(--font-weight-semibold);min-height:44px;padding:var(--spacing-3) var(--spacing-4)}.warning-button:disabled[b-x8cw8vz3eo]{cursor:not-allowed;opacity:var(--opacity-60)}.result-list>div[b-x8cw8vz3eo]{align-items:center;gap:var(--spacing-3)}.retry-email-button[b-x8cw8vz3eo]{align-items:center;display:inline-flex;gap:var(--spacing-2);margin-left:var(--spacing-3);min-height:44px}.retry-email-button:disabled[b-x8cw8vz3eo]{cursor:not-allowed;opacity:var(--opacity-60)}
.stepper[b-x8cw8vz3eo]{display:flex;align-items:center;justify-content:space-between;position:relative;padding:var(--spacing-4) 0;margin:0;gap:var(--spacing-3)}
.stepper-progress[b-x8cw8vz3eo]{position:absolute;top:1.5rem;left:0;height:3px;background:var(--color-success-600);transition:width 0.4s ease;z-index:var(--z-base)}
.stepper .step[b-x8cw8vz3eo]{display:flex;flex-direction:column;align-items:center;flex:1;position:relative;z-index:2}
.stepper .step[b-x8cw8vz3eo]::before{content:'';position:absolute;top:1.5rem;left:50%;right:-50%;height:3px;background:var(--color-border);z-index:-1}
.stepper .step:last-child[b-x8cw8vz3eo]::before{display:none}
.stepper .step-dot[b-x8cw8vz3eo]{align-items:center;background:var(--color-bg-white);border:3px solid var(--color-border);border-radius:var(--radius-full);color:var(--color-text-muted);display:flex;font-weight:var(--font-weight-bold);font-size:var(--font-size-md);height:3rem;justify-content:center;width:3rem;position:relative;z-index:2;transition:all 0.3s;box-shadow:var(--shadow-sm)}
.stepper .step-label[b-x8cw8vz3eo]{margin-top:var(--spacing-2);font-size:var(--font-size-xs);font-weight:var(--font-weight-semibold);color:var(--color-text-muted);text-align:center}
.stepper .step.done .step-dot[b-x8cw8vz3eo]{background:var(--color-success-600);border-color:var(--color-success-600);color:var(--color-bg-white)}
.stepper .step.done .step-label[b-x8cw8vz3eo]{color:var(--color-success-600)}
.stepper .step.current .step-dot[b-x8cw8vz3eo]{background:var(--color-primary);border-color:var(--color-primary);color:var(--color-bg-white);transform:scale(1.15);box-shadow:var(--shadow-lg)}
.stepper .step.current .step-label[b-x8cw8vz3eo]{color:var(--color-primary);font-weight:var(--font-weight-bold)}
.stepper .step.locked[b-x8cw8vz3eo]{opacity:var(--opacity-60)}
.chips[b-x8cw8vz3eo]{display:flex;flex-wrap:wrap;gap:var(--spacing-2);margin-top:var(--spacing-3)}
.chip[b-x8cw8vz3eo]{align-items:center;background:var(--color-bg-secondary);border:1px solid var(--color-border);border-radius:var(--radius-full);display:inline-flex;font-size:var(--font-size-xs);gap:var(--spacing-1);padding:var(--spacing-1) var(--spacing-2)}
.chip-x[b-x8cw8vz3eo]{background:transparent;border:0;color:var(--color-text-secondary);cursor:pointer;font-size:var(--font-size-xs);line-height:1;min-height:24px;padding:0 var(--spacing-1)}
.chip-x:hover[b-x8cw8vz3eo]{color:var(--color-danger)}
.chip-more[b-x8cw8vz3eo]{background:var(--color-primary);color:var(--color-bg-white)}
.email-filter[b-x8cw8vz3eo]{display:inline-flex;gap:var(--spacing-1)}
.email-filter button[b-x8cw8vz3eo]{background:var(--color-bg-secondary);border:1px solid var(--color-border);border-radius:var(--radius-full);color:var(--color-text-secondary);font-size:var(--font-size-xs);min-height:36px;padding:var(--spacing-1) var(--spacing-3)}
.email-filter button.active[b-x8cw8vz3eo]{background:var(--color-primary);border-color:var(--color-primary);color:var(--color-bg-white)}
.avatar[b-x8cw8vz3eo]{align-items:center;background:var(--color-bg-secondary);border-radius:var(--radius-full);color:var(--color-primary);display:flex;font-size:var(--font-size-xs);font-weight:var(--font-weight-bold);height:36px;justify-content:center;object-fit:cover;width:36px}
img.avatar[b-x8cw8vz3eo]{border:1px solid var(--color-border)}
.preview-modal .preview-sheet[b-x8cw8vz3eo]{background:var(--color-bg-white);border-radius:var(--radius-lg,16px);display:flex;flex-direction:column;height:90vh;max-width:1100px;width:95%}
.preview-modal .mbar[b-x8cw8vz3eo]{align-items:center;display:flex;justify-content:space-between;padding:var(--spacing-3) var(--spacing-4)}
.html-preview-full[b-x8cw8vz3eo]{background:var(--color-bg-white);border:0;flex:1;width:100%}
.sticky-bar[b-x8cw8vz3eo]{align-items:center;background:var(--color-bg-white);border:1px solid var(--color-border);border-radius:var(--radius-md);display:flex;gap:var(--spacing-4);justify-content:space-between;padding:var(--spacing-3) var(--spacing-4)}
.sticky-counts[b-x8cw8vz3eo]{display:flex;gap:var(--spacing-4)}
.sticky-counts strong[b-x8cw8vz3eo]{color:var(--color-primary)}
.result-row[b-x8cw8vz3eo]{align-items:center;border-bottom:1px solid var(--color-border);display:flex;gap:var(--spacing-3);padding:var(--spacing-2) 0}
.result-row:last-child[b-x8cw8vz3eo]{border-bottom:0}
.result-name[b-x8cw8vz3eo]{display:flex;flex:1;flex-direction:column;gap:var(--spacing-1)}
.result-name small[b-x8cw8vz3eo]{color:var(--color-text-secondary);font-size:var(--font-size-xs)}
.status-badge.ok[b-x8cw8vz3eo]{background:var(--color-success-100,#dcfce7);color:var(--color-success-600)}
.status-badge.mail[b-x8cw8vz3eo]{background:var(--color-primary-100,#d1fae5);color:var(--color-primary)}
.status-badge.fail[b-x8cw8vz3eo]{background:var(--color-danger-100,#fee2e2);color:var(--color-danger)}
.status-badge.pend[b-x8cw8vz3eo]{background:var(--color-warning-100,#fef3c7);color:var(--color-warning)}
@media (max-width:767px){.stepper[b-x8cw8vz3eo]{gap:var(--spacing-1)}.stepper .step-label[b-x8cw8vz3eo]{font-size:var(--font-size-xs)}.student-tools[b-x8cw8vz3eo]{flex-wrap:wrap;gap:var(--spacing-2)}.email-filter[b-x8cw8vz3eo]{order:2;width:100%}.sticky-bar[b-x8cw8vz3eo]{bottom:var(--spacing-2);left:var(--spacing-2);position:sticky;right:var(--spacing-2);z-index:20}.sticky-bar .generate-button[b-x8cw8vz3eo]{flex:1}.avatar[b-x8cw8vz3eo]{height:32px;width:32px}}
@media (min-width:768px){.sticky-bar[b-x8cw8vz3eo]{position:sticky;bottom:var(--spacing-2);z-index:10}}
[b-x8cw8vz3eo] .record-filters{display:flex;flex-wrap:wrap;gap:var(--spacing-2);align-items:end;margin-bottom:var(--spacing-3)}
[b-x8cw8vz3eo] .record-search{flex:1 1 220px;min-height:44px;border:1px solid var(--color-border);border-radius:var(--radius-md);padding:0 var(--spacing-3);background:var(--color-bg-secondary)}
[b-x8cw8vz3eo] .record-status{min-height:44px;border:1px solid var(--color-border);border-radius:var(--radius-md);padding:0 var(--spacing-2);background:var(--color-bg-secondary)}
[b-x8cw8vz3eo] .record-date{display:flex;flex-direction:column;gap:2px;font-size:var(--font-size-xs);color:var(--color-text-secondary)}
[b-x8cw8vz3eo] .record-date input{min-height:44px;border:1px solid var(--color-border);border-radius:var(--radius-md);padding:0 var(--spacing-2);background:var(--color-bg-secondary)}
@media (max-width:767px){[b-x8cw8vz3eo] .record-filters{gap:var(--spacing-2)}[b-x8cw8vz3eo] .record-search{flex:1 1 100%}[b-x8cw8vz3eo] .record-status{flex:1 1 100%}[b-x8cw8vz3eo] .record-date{flex:1 1 45%}}
/* /Components/Certificates/RecordList.razor.rz.scp.css */
.records-panel[b-bny5vs9ofu]{background:var(--color-bg-white);border:1px solid var(--color-border);border-radius:var(--radius-md);padding:var(--spacing-5)}.records-table-wrap[b-bny5vs9ofu]{overflow-x:auto}table[b-bny5vs9ofu]{border-collapse:collapse;width:100%}th[b-bny5vs9ofu]{color:var(--color-text-secondary);font-size:var(--font-size-xs);padding:var(--spacing-3);text-align:left}td[b-bny5vs9ofu]{border-top:1px solid var(--color-border);font-size:var(--font-size-sm);padding:var(--spacing-3)}td small[b-bny5vs9ofu]{color:var(--color-text-secondary);display:block;font-size:var(--font-size-xs);margin-top:var(--spacing-1)}.records-empty[b-bny5vs9ofu]{align-items:center;color:var(--color-text-secondary);display:flex;flex-direction:column;justify-content:center;min-height:260px;text-align:center}.records-empty h2[b-bny5vs9ofu],.records-empty p[b-bny5vs9ofu]{margin:var(--spacing-2) 0 0}.record-status[b-bny5vs9ofu]{background:var(--color-bg-secondary);border-radius:var(--radius-full);font-size:var(--font-size-xs);padding:var(--spacing-1) var(--spacing-2)}.record-actions[b-bny5vs9ofu]{display:flex;gap:var(--spacing-2)}.record-actions button[b-bny5vs9ofu]{background:var(--color-bg-secondary);border:0;border-radius:var(--radius-md);color:var(--color-primary);height:44px;width:44px}.record-actions .approve[b-bny5vs9ofu]{color:var(--color-success)}.record-actions .reject[b-bny5vs9ofu]{color:var(--color-danger)}
@media (max-width:767px){thead[b-bny5vs9ofu]{display:none}tr[b-bny5vs9ofu]{border:1px solid var(--color-border);border-radius:var(--radius-md);display:block;margin-bottom:var(--spacing-3);padding:var(--spacing-2)}td[b-bny5vs9ofu]{align-items:center;border:0;display:flex;justify-content:space-between;padding:var(--spacing-2)}td[b-bny5vs9ofu]::before{color:var(--color-text-secondary);content:attr(data-label);font-size:var(--font-size-xs);font-weight:var(--font-weight-semibold);margin-right:var(--spacing-3)}}
/* /Components/ChatGenie/GenieChat.razor.rz.scp.css */
/* GenieChat CSS Isolation — per EA360 convention */

.genie-chat-container[b-vo6p4rzaa3] {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: var(--genie-bg, #ffffff);
    border-radius: var(--radius-lg, 12px);
    overflow: hidden;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.1);
}

/* Header */
.genie-header[b-vo6p4rzaa3] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--spacing-4, 16px) var(--spacing-6, 24px);
    background: var(--genie-header-bg, var(--color-teal-500, #0d9488));
    color: var(--genie-header-text, #ffffff);
}

.genie-header-content[b-vo6p4rzaa3] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.genie-logo[b-vo6p4rzaa3] {
    font-size: 1.5rem;
}

.genie-title[b-vo6p4rzaa3] {
    font-weight: 600;
    font-size: 1.1rem;
}

.genie-context-badge[b-vo6p4rzaa3] {
    background: rgba(255, 255, 255, 0.2);
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 0.85rem;
    display: flex;
    align-items: center;
    gap: 6px;
}

.genie-header-actions[b-vo6p4rzaa3] {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* Status indicator */
.genie-status-dot[b-vo6p4rzaa3] {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--genie-status-online, #22c55e);
    box-shadow: 0 0 8px rgba(34, 197, 94, 0.5);
}

.genie-status-dot.offline[b-vo6p4rzaa3] {
    background: var(--genie-status-offline, #ef4444);
    box-shadow: 0 0 8px rgba(239, 68, 68, 0.5);
}

.genie-status-dot.streaming[b-vo6p4rzaa3] {
    animation: genie-pulse-b-vo6p4rzaa3 1s ease-in-out infinite;
    background: var(--genie-status-slow, #f59e0b);
}

@keyframes genie-pulse-b-vo6p4rzaa3 {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.5; transform: scale(1.2); }
}

/* Buttons */
.genie-stop-btn[b-vo6p4rzaa3],
.genie-clear-btn[b-vo6p4rzaa3] {
    background: rgba(255, 255, 255, 0.15);
    border: none;
    color: inherit;
    padding: 8px;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.2s;
}

.genie-stop-btn:hover[b-vo6p4rzaa3],
.genie-clear-btn:hover[b-vo6p4rzaa3] {
    background: rgba(255, 255, 255, 0.25);
}

/* Welcome screen */
.genie-welcome[b-vo6p4rzaa3] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-8, 32px);
    text-align: center;
}

.genie-welcome-icon[b-vo6p4rzaa3] {
    font-size: 4rem;
    color: var(--color-teal-500, #0d9488);
    margin-bottom: 16px;
}

.genie-welcome h2[b-vo6p4rzaa3] {
    margin: 0 0 12px 0;
    color: var(--genie-text, var(--color-text-primary, #1e293b));
}

.genie-welcome p[b-vo6p4rzaa3] {
    color: var(--genie-text-secondary, var(--color-text-secondary, #64748b));
    max-width: 400px;
}

/* Messages area */
.genie-messages[b-vo6p4rzaa3] {
    flex: 1;
    overflow-y: auto;
    padding: var(--spacing-4, 16px);
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* Bubbles */
.genie-bubble[b-vo6p4rzaa3] {
    display: flex;
    gap: 12px;
    max-width: 85%;
    animation: genie-fadeIn-b-vo6p4rzaa3 0.3s ease-in;
}

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

.genie-bubble.genie-user[b-vo6p4rzaa3] {
    align-self: flex-end;
}

.genie-bubble.genie-assistant[b-vo6p4rzaa3] {
    align-self: flex-start;
}

.genie-bubble-content[b-vo6p4rzaa3] {
    padding: 12px 16px;
    border-radius: 12px;
    line-height: 1.6;
}

.genie-user .genie-bubble-content[b-vo6p4rzaa3] {
    background: var(--genie-user-bubble-bg, var(--color-teal-500, #0d9488));
    color: var(--genie-user-bubble-text, #ffffff);
    border-bottom-right-radius: 4px;
}

.genie-assistant .genie-bubble-content[b-vo6p4rzaa3] {
    background: var(--genie-assistant-bubble-bg, var(--color-gray-100, #f1f5f9));
    color: var(--genie-assistant-bubble-text, var(--color-text-primary, #1e293b));
    border-bottom-left-radius: 4px;
}

.genie-icon[b-vo6p4rzaa3] {
    font-size: 1.2rem;
    color: var(--color-teal-500, #0d9488);
    flex-shrink: 0;
    margin-top: 4px;
}

.genie-error .genie-bubble-content[b-vo6p4rzaa3] {
    background: var(--color-red-50, #fef2f2) !important;
    color: var(--color-red-600, #dc2626) !important;
}

/* Streaming dots */
.genie-streaming-dots[b-vo6p4rzaa3] {
    display: inline-block;
    animation: genie-blink-b-vo6p4rzaa3 1.4s infinite;
    animation-fill-mode: both;
    color: var(--genie-streaming-dot, var(--color-teal-400, #14b8a6));
}

@keyframes genie-blink-b-vo6p4rzaa3 {
    0%, 80%, 100% { opacity: 0; }
    40% { opacity: 1; }
}

/* Input area */
.genie-input-area[b-vo6p4rzaa3] {
    display: flex;
    align-items: flex-end;
    padding: var(--spacing-4, 16px);
    background: var(--genie-bg-alt, var(--color-gray-50, #f9fafb));
    border-top: 1px solid var(--genie-input-border, var(--color-border, #e2e8f0));
}

.genie-input-wrapper[b-vo6p4rzaa3] {
    flex: 1;
    position: relative;
}

.genie-textarea[b-vo6p4rzaa3] {
    width: 100%;
    padding: 12px 48px 12px 16px;
    border: 1px solid var(--genie-input-border, var(--color-border, #e2e8f0));
    border-radius: 24px;
    background: var(--genie-input-bg, #ffffff);
    font-size: 1rem;
    resize: none;
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.genie-textarea:focus[b-vo6p4rzaa3] {
    border-color: var(--genie-input-focus-ring, var(--color-teal-500, #0d9488));
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--genie-input-focus-ring, var(--color-teal-600)) 20%, transparent);
}

.genie-send-btn[b-vo6p4rzaa3] {
    position: absolute;
    right: 8px;
    bottom: 8px;
    background: var(--genie-send-bg, var(--color-orange-500, #f97316));
    color: white;
    border: none;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s, transform 0.1s;
}

.genie-send-btn:hover:not(:disabled)[b-vo6p4rzaa3] {
    background: var(--genie-send-hover, var(--color-orange-600, #ea580c));
    transform: scale(1.05);
}

.genie-send-btn:disabled[b-vo6p4rzaa3] {
    opacity: 0.4;
    cursor: not-allowed;
}

/* Attach button for image upload (FR-5) */
.genie-attach-btn[b-vo6p4rzaa3] {
    position: absolute;
    left: 12px;
    bottom: 10px;
    background: transparent;
    color: var(--color-text-secondary, #64748b);
    border: none;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s, color 0.2s;
}

.genie-attach-btn:hover[b-vo6p4rzaa3] {
    background: var(--color-gray-100, #f1f5f9);
    color: var(--color-teal-500, #0d9488);
}

/* Image preview chips (FR-5) */
.genie-image-preview[b-vo6p4rzaa3] {
    display: flex;
    gap: 8px;
    padding: 8px 16px;
    flex-wrap: wrap;
    border-bottom: 1px solid var(--color-border-light, #e2e8f0);
}

.genie-image-chip[b-vo6p4rzaa3] {
    position: relative;
    width: 64px;
    height: 64px;
    border-radius: 8px;
    overflow: hidden;
    border: 2px solid var(--color-border, #e2e8f0);
}

.genie-image-chip img[b-vo6p4rzaa3] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.genie-image-remove[b-vo6p4rzaa3] {
    position: absolute;
    top: -4px;
    right: -4px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: rgba(239, 68, 68, 0.9);
    color: white;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.6rem;
    transition: background 0.2s;
}

.genie-image-remove:hover[b-vo6p4rzaa3] {
    background: rgba(220, 38, 38, 1);
}
    cursor: not-allowed;[b-vo6p4rzaa3]
}

/* Context selector button (FR-11) */
.genie-context-btn[b-vo6p4rzaa3] {
    display: flex;
    align-items: center;
    gap: 6px;
    background: rgba(255, 255, 255, 0.15);
    border: none;
    color: white;
    padding: 6px 12px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 0.85rem;
    transition: background 0.2s;
}

.genie-context-btn:hover[b-vo6p4rzaa3] {
    background: rgba(255, 255, 255, 0.25);
}

.genie-context-label[b-vo6p4rzaa3] {
    font-weight: 500;
}

/* Context selector panel (FR-11) */
.genie-context-panel[b-vo6p4rzaa3] {
    border-bottom: 1px solid var(--color-border-light, #e2e8f0);
    background: var(--genie-bg-alt, #ffffff);
    animation: genie-slideDown-b-vo6p4rzaa3 0.2s ease-out;
}

@keyframes genie-slideDown-b-vo6p4rzaa3 {
    from { opacity: 0; transform: translateY(-8px); }
    to { opacity: 1; transform: translateY(0); }
}

.genie-context-panel-header[b-vo6p4rzaa3] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    background: var(--genie-header-bg, var(--color-teal-500, #0d9488));
    color: white;
    font-weight: 600;
    font-size: 0.9rem;
}

.genie-context-close-btn[b-vo6p4rzaa3] {
    background: rgba(255, 255, 255, 0.2);
    border: none;
    color: white;
    width: 24px;
    height: 24px;
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
}

.genie-context-close-btn:hover[b-vo6p4rzaa3] {
    background: rgba(255, 255, 255, 0.3);
}

.genie-context-panel-body[b-vo6p4rzaa3] {
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.genie-context-panel-body label[b-vo6p4rzaa3] {
    font-size: 0.8rem;
    color: var(--color-text-secondary, #64748b);
    font-weight: 500;
    margin-bottom: 4px;
    display: block;
}

.genie-context-panel-body select[b-vo6p4rzaa3],
.genie-context-panel-body input[type="text"][b-vo6p4rzaa3] {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid var(--color-border, #e2e8f0);
    border-radius: 6px;
    font-size: 0.9rem;
    background: white;
    transition: border-color 0.2s;
}

.genie-context-panel-body select:focus[b-vo6p4rzaa3],
.genie-context-panel-body input[type="text"]:focus[b-vo6p4rzaa3] {
    outline: none;
    border-color: var(--color-teal-500, #0d9488);
    box-shadow: 0 0 0 2px rgba(13, 148, 136, 0.1);
}

/* Math blocks */
.genie-math-block[b-vo6p4rzaa3] {
    margin: 16px 0;
    padding: 16px;
    background: var(--genie-math-bg, var(--color-gray-50, #f9fafb));
    border: 1px solid var(--genie-math-border, var(--color-border-light, #e2e8f0));
    border-radius: 8px;
    overflow-x: auto;
    text-align: center;
}

/* Renderer */
.genie-renderer[b-vo6p4rzaa3] {
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.genie-renderer pre[b-vo6p4rzaa3] {
    background: var(--genie-code-bg, var(--color-gray-900, #111827));
    color: var(--genie-code-text, var(--color-gray-50, #f9fafb));
    padding: 12px;
    border-radius: 8px;
    overflow-x: auto;
}

/* Responsive */
@media (max-width: 768px) {
    .genie-chat-container[b-vo6p4rzaa3] {
        border-radius: 0;
    }

    .genie-bubble[b-vo6p4rzaa3] {
        max-width: 95%;
    }

    .genie-header[b-vo6p4rzaa3] {
        padding: var(--spacing-3, 12px) var(--spacing-4, 16px);
    }

    .genie-welcome-icon[b-vo6p4rzaa3] {
        font-size: 3rem;
    }
}
/* /Components/ChatGenie/GenieChatSidebar.razor.rz.scp.css */
/* GenieChatSidebar CSS Isolation */

.genie-sidebar[b-kolkvemxim] {
    width: 280px;
    background: var(--genie-sidebar-bg, #ffffff);
    border-right: 1px solid var(--color-border-light, #e2e8f0);
    display: flex;
    flex-direction: column;
    height: 100%;
}

.genie-new-chat-btn[b-kolkvemxim] {
    margin: 16px;
    padding: 12px 16px;
    background: var(--color-teal-500, #0d9488);
    color: white;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 0.95rem;
    transition: background 0.2s;
}

.genie-new-chat-btn:hover[b-kolkvemxim] {
    background: var(--color-teal-600, #0f766e);
}

.genie-thread-list[b-kolkvemxim] {
    flex: 1;
    overflow-y: auto;
    padding: 0 8px;
}

.genie-empty-state[b-kolkvemxim] {
    text-align: center;
    padding: 24px 16px;
    color: var(--color-text-secondary, #64748b);
}

.genie-thread-item[b-kolkvemxim] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    margin: 4px 0;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.15s;
}

.genie-thread-item:hover[b-kolkvemxim] {
    background: var(--genie-sidebar-item-hover-bg, #f9fafb);
}

.genie-thread-active[b-kolkvemxim] {
    background: var(--genie-sidebar-item-active-bg, #fef3c7) !important;
    color: var(--genie-sidebar-item-active-text, #d97706);
}

.genie-thread-icon[b-kolkvemxim] {
    font-size: 1rem;
    opacity: 0.6;
}

.genie-thread-title[b-kolkvemxim] {
    font-size: 0.9rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
}

.genie-context-selector[b-kolkvemxim] {
    padding: 16px;
    border-top: 1px solid var(--color-border-light, #e2e8f0);
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.genie-context-selector label[b-kolkvemxim] {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--color-text-secondary, #64748b);
}

.genie-context-selector input[b-kolkvemxim],
.genie-context-selector select[b-kolkvemxim] {
    padding: 8px 12px;
    border: 1px solid var(--color-border, #e2e8f0);
    border-radius: 6px;
    font-size: 0.9rem;
}

@media (max-width: 768px) {
    .genie-sidebar[b-kolkvemxim] {
        width: 100%;
        border-right: none;
        border-bottom: 1px solid var(--color-border-light, #e2e8f0);
    }
}
/* /Components/ChatGenie/GenieMessageBubble.razor.rz.scp.css */
/* GenieMessageBubble CSS Isolation */

.genie-bubble[b-apygowz4nj] {
    display: flex;
    gap: 12px;
    max-width: 85%;
    animation: genie-bubbleFadeIn-b-apygowz4nj 0.3s ease-in;
}

@keyframes genie-bubbleFadeIn-b-apygowz4nj {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.genie-bubble-content[b-apygowz4nj] {
    padding: 12px 16px;
    border-radius: 12px;
    line-height: 1.6;
    font-size: 0.95rem;
}

.genie-icon[b-apygowz4nj] {
    flex-shrink: 0;
    margin-top: 4px;
}
/* /Components/ChatGenie/GenieStreamingRenderer.razor.rz.scp.css */
/* GenieStreamingRenderer CSS Isolation */

.genie-renderer[b-kih188qf3b] {
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.genie-renderer pre[b-kih188qf3b] {
    background: var(--genie-code-bg, var(--color-gray-900, #111827));
    color: var(--genie-code-text, var(--color-gray-50, #f9fafb));
    padding: 12px;
    border-radius: 8px;
    overflow-x: auto;
    font-size: 0.9rem;
}

.genie-renderer code[b-kih188qf3b] {
    font-family: 'Cascadia Code', 'Fira Code', 'Consolas', monospace;
}

.genie-renderer p[b-kih188qf3b] {
    margin: 8px 0;
}

.genie-renderer ul[b-kih188qf3b], .genie-renderer ol[b-kih188qf3b] {
    padding-left: 24px;
    margin: 8px 0;
}

.genie-renderer li[b-kih188qf3b] {
    margin: 4px 0;
}

.genie-renderer strong[b-kih188qf3b] {
    font-weight: 600;
}

.genie-renderer em[b-kih188qf3b] {
    font-style: italic;
}

.genie-math-block[b-kih188qf3b] {
    margin: 16px 0;
    padding: 16px;
    background: var(--genie-math-bg, var(--color-gray-50, #f9fafb));
    border: 1px solid var(--genie-math-border, var(--color-border-light, #e2e8f0));
    border-radius: 8px;
    overflow-x: auto;
    text-align: center;
}
/* /Components/Fee/ReceiptOcrPanel.razor.rz.scp.css */
.ocr-panel[b-4sc2f4lagc] { margin-top:var(--spacing-6); padding:var(--spacing-5); background:var(--color-bg-surface); border:1px solid var(--color-border); border-radius:var(--radius-lg); }
.ocr-header[b-4sc2f4lagc],.upload-row[b-4sc2f4lagc],.queue-heading[b-4sc2f4lagc],.history-row[b-4sc2f4lagc],.review-summary[b-4sc2f4lagc],.review-actions[b-4sc2f4lagc],.reject-row[b-4sc2f4lagc] { display:flex; align-items:center; gap:var(--spacing-3); }
.ocr-header[b-4sc2f4lagc] { justify-content:space-between; margin-bottom:var(--spacing-4); }
.ocr-header h2[b-4sc2f4lagc],.queue-heading h3[b-4sc2f4lagc] { margin:0; font-size:var(--font-size-lg); }
.ocr-header p[b-4sc2f4lagc],.upload-note[b-4sc2f4lagc] { margin:var(--spacing-1) 0 0; color:var(--color-text-secondary); font-size:var(--font-size-sm); }
.icon-button[b-4sc2f4lagc] { width:44px; height:44px; border:1px solid var(--color-border); background:var(--color-bg-surface); border-radius:var(--radius-md); }
.upload-row[b-4sc2f4lagc] { align-items:stretch; }
.file-picker[b-4sc2f4lagc] { min-height:48px; flex:1; display:flex; align-items:center; gap:var(--spacing-3); padding:var(--spacing-3); border:2px dashed var(--color-border); border-radius:var(--radius-md); cursor:pointer; }
.file-picker input[b-4sc2f4lagc] { position:absolute; width:1px; height:1px; opacity:0; }
.primary-button[b-4sc2f4lagc],.approve-button[b-4sc2f4lagc],.reject-button[b-4sc2f4lagc] { min-height:44px; border:0; border-radius:var(--radius-md); padding:var(--spacing-2) var(--spacing-4); font-weight:600; }
.primary-button[b-4sc2f4lagc],.approve-button[b-4sc2f4lagc] { background:var(--color-brand-primary); color:var(--color-brand-primary-contrast); }
.reject-button[b-4sc2f4lagc] { background:var(--color-status-error); color:var(--color-text-inverse); }
.info-banner[b-4sc2f4lagc],.panel-state[b-4sc2f4lagc],.result-strip[b-4sc2f4lagc] { padding:var(--spacing-3); border-radius:var(--radius-md); background:var(--color-bg-subtle); }
.result-strip[b-4sc2f4lagc] { margin-top:var(--spacing-4); border-left:4px solid var(--color-accent-caution); }
.result-strip.ready[b-4sc2f4lagc] { border-left-color:var(--color-accent-positive); }
.result-strip.conflict[b-4sc2f4lagc] { border-left-color:var(--color-status-error); }
.validation-message[b-4sc2f4lagc] { margin-top:var(--spacing-2); color:var(--color-status-error); font-size:var(--font-size-sm); }
.queue-heading[b-4sc2f4lagc] { margin-top:var(--spacing-5); justify-content:space-between; }
.queue-heading span[b-4sc2f4lagc] { min-width:28px; text-align:center; padding:var(--spacing-1); background:var(--color-bg-subtle); border-radius:var(--radius-full); }
.review-item[b-4sc2f4lagc] { margin-top:var(--spacing-3); border:1px solid var(--color-border); border-radius:var(--radius-md); overflow:hidden; }
.review-summary[b-4sc2f4lagc] { width:100%; justify-content:space-between; text-align:left; padding:var(--spacing-3); border:0; background:var(--color-bg-surface); }
.review-summary span[b-4sc2f4lagc] { display:flex; flex-direction:column; gap:var(--spacing-1); }
.review-summary span:last-child[b-4sc2f4lagc] { text-align:right; }
.review-summary small[b-4sc2f4lagc] { color:var(--color-text-secondary); }
.review-summary .manual-prompt[b-4sc2f4lagc] { color:var(--color-brand-primary); font-weight:600; }
.review-grid[b-4sc2f4lagc] { display:grid; grid-template-columns:minmax(240px, .8fr) minmax(280px, 1.2fr); gap:var(--spacing-4); padding:var(--spacing-4); border-top:1px solid var(--color-border); background:var(--color-bg-subtle); }
.image-column img[b-4sc2f4lagc] { display:block; width:100%; max-height:420px; object-fit:contain; background:var(--color-bg-surface); border:1px solid var(--color-border); }
.image-loading[b-4sc2f4lagc] { min-height:220px; display:grid; place-items:center; }
.image-column pre[b-4sc2f4lagc] { white-space:pre-wrap; overflow-wrap:anywhere; font-size:var(--font-size-xs); }
.fields-column[b-4sc2f4lagc] { display:grid; gap:var(--spacing-3); }
.manual-entry-banner[b-4sc2f4lagc] { display:flex; align-items:flex-start; gap:var(--spacing-3); padding:var(--spacing-3); border-left:4px solid var(--color-accent-caution); border-radius:var(--radius-md); background:var(--color-bg-surface); color:var(--color-text-secondary); font-size:var(--font-size-sm); }
.manual-entry-banner > i[b-4sc2f4lagc] { margin-top:var(--spacing-1); color:var(--color-accent-caution); }
.manual-entry-banner span[b-4sc2f4lagc] { display:grid; gap:var(--spacing-1); }
.manual-entry-banner strong[b-4sc2f4lagc] { color:var(--color-text-primary); }
.fields-column label[b-4sc2f4lagc] { display:grid; gap:var(--spacing-1); font-size:var(--font-size-sm); font-weight:600; }
.field-label[b-4sc2f4lagc] { display:flex; align-items:center; justify-content:space-between; gap:var(--spacing-2); }
.required-label[b-4sc2f4lagc] { color:var(--color-status-error); font-size:var(--font-size-xs); font-weight:600; }
.fields-column input[b-4sc2f4lagc],.fields-column select[b-4sc2f4lagc],.fields-column textarea[b-4sc2f4lagc],.reject-row input[b-4sc2f4lagc] { width:100%; min-height:44px; padding:var(--spacing-2); border:1px solid var(--color-border); border-radius:var(--radius-md); background:var(--color-bg-surface); color:var(--color-text-primary); }
.fields-column textarea[b-4sc2f4lagc] { min-height:72px; resize:vertical; }
.reject-row input[b-4sc2f4lagc] { flex:1; }
.history-row[b-4sc2f4lagc] { justify-content:space-between; min-height:44px; border-bottom:1px solid var(--color-border); }
.status-pending[b-4sc2f4lagc] { color:var(--color-accent-caution); }.status-approved[b-4sc2f4lagc] { color:var(--color-accent-positive); }.status-rejected[b-4sc2f4lagc] { color:var(--color-status-error); }
@media (max-width:767px) { .ocr-panel[b-4sc2f4lagc] { padding:var(--spacing-3); }.upload-row[b-4sc2f4lagc],.reject-row[b-4sc2f4lagc] { flex-direction:column; align-items:stretch; }.review-grid[b-4sc2f4lagc] { grid-template-columns:1fr; }.primary-button[b-4sc2f4lagc] { width:100%; }.review-summary[b-4sc2f4lagc] { align-items:flex-start; } }
/* /Components/Principal/YearEndPromotionWizard.razor.rz.scp.css */
/* ── Page mode ─────────────────────────────────────────────────────────────── */
.wizard-page-wrapper[b-pfyyqisdpz] {
    width: 100%;
    min-width: 0;
    padding: 0;
}

.wizard-modal-page[b-pfyyqisdpz] {
    background: transparent;
    border-radius: 0;
    box-shadow: none;
    width: 100%;
    max-width: 100%;
    max-height: none;
    overflow: visible;
    margin: 0;
}

.wizard-modal-page .wizard-body[b-pfyyqisdpz] {
    background: transparent;
    overflow-y: visible;
    max-height: none;
    padding: var(--spacing-5) 0;
}

.wizard-modal-page .wizard-body-focused[b-pfyyqisdpz] {
    width: min(100%, 960px);
    margin-inline: auto;
    padding-block: var(--spacing-7);
}

.wizard-modal-page .wizard-body-focused .step-section[b-pfyyqisdpz] {
    min-height: 360px;
    padding: var(--spacing-8);
    border: 1px solid var(--color-border);
    border-top: var(--border-md) solid var(--color-primary-500);
    border-radius: var(--radius-md);
    background: var(--color-surface-primary);
    box-shadow: var(--shadow-sm);
}

/* ── Overlay ───────────────────────────────────────────────────────────────── */
.wizard-overlay[b-pfyyqisdpz] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    z-index: 1050;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 1.5rem;
    overflow-y: auto;
}

.wizard-modal[b-pfyyqisdpz] {
    background: #fff;
    border-radius: 1rem;
    width: 100%;
    max-width: 1024px;
    box-shadow: 0 24px 64px rgba(0,0,0,.22);
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - 3rem);
    overflow: hidden;
}

/* Page mode must override the modal constraints declared above. */
.wizard-modal.wizard-modal-page[b-pfyyqisdpz] {
    background: transparent;
    border-radius: 0;
    box-shadow: none;
    max-width: none;
    max-height: none;
    overflow: visible;
}

.wizard-modal-page .wizard-header[b-pfyyqisdpz] {
    position: static;
    padding: 0 0 var(--spacing-4);
    background: transparent;
    color: var(--color-text-primary);
}

.wizard-modal-page .wizard-header-inner[b-pfyyqisdpz] {
    margin-bottom: var(--spacing-4);
}

.wizard-modal-page .wizard-title-icon[b-pfyyqisdpz] {
    color: var(--color-primary-600);
}

.wizard-modal-page .wizard-subtitle[b-pfyyqisdpz] {
    color: var(--color-text-muted);
    opacity: 1;
}

.wizard-modal-page .wizard-stepper[b-pfyyqisdpz] {
    padding: var(--spacing-5) 0;
    border-block: 1px solid var(--color-border);
    background: transparent;
}

.wizard-modal-page .stepper-circle[b-pfyyqisdpz] {
    width: var(--spacing-8);
    height: var(--spacing-8);
    background: var(--color-surface-primary);
    color: var(--color-gray-500);
    border-color: var(--color-border-dark);
    font-size: var(--font-size-sm);
}

.wizard-modal-page .stepper-item.active .stepper-circle[b-pfyyqisdpz] {
    background: var(--color-primary-600);
    color: var(--color-text-white);
    border-color: var(--color-primary-600);
    box-shadow: 0 0 0 var(--spacing-2) var(--color-primary-100);
}

.wizard-modal-page .stepper-item.done .stepper-circle[b-pfyyqisdpz] {
    background: var(--color-success-600);
    color: var(--color-text-white);
    border-color: var(--color-success-600);
}

.wizard-modal-page .stepper-label[b-pfyyqisdpz],
.wizard-modal-page .stepper-item.done .stepper-label[b-pfyyqisdpz] {
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);
    letter-spacing: 0;
}

.wizard-modal-page .stepper-item.active .stepper-label[b-pfyyqisdpz] {
    color: var(--color-primary-700);
}

.wizard-modal-page .stepper-line[b-pfyyqisdpz] {
    background: var(--color-border);
}

.wizard-modal-page .stepper-line.done[b-pfyyqisdpz] {
    background: var(--color-success-500);
}

.wizard-modal-page .btn-primary[b-pfyyqisdpz] {
    background: var(--color-primary-600);
}

.wizard-modal-page .btn-primary:hover:not(:disabled)[b-pfyyqisdpz] {
    background: var(--color-primary-700);
}

.wizard-modal-page .form-select:focus[b-pfyyqisdpz],
.wizard-modal-page .search-input:focus[b-pfyyqisdpz] {
    border-color: var(--color-primary-600);
    box-shadow: 0 0 0 var(--spacing-2) var(--color-primary-100);
}

/* ── Header ─────────────────────────────────────────────────────────────────── */
.wizard-header[b-pfyyqisdpz] {
    background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);
    color: #fff;
    padding: 1.5rem 1.5rem 0;
    flex-shrink: 0;
}

.wizard-header-inner[b-pfyyqisdpz] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 1.25rem;
}

.wizard-title-group[b-pfyyqisdpz] {
    display: flex;
    align-items: center;
    gap: .875rem;
}

.wizard-title-icon[b-pfyyqisdpz] {
    font-size: 1.75rem;
    opacity: .9;
}

.wizard-title[b-pfyyqisdpz] {
    font-size: 1.25rem;
    font-weight: 700;
    margin: 0 0 .125rem;
}

.wizard-subtitle[b-pfyyqisdpz] {
    font-size: .8125rem;
    opacity: .8;
    margin: 0;
}

.wizard-close[b-pfyyqisdpz] {
    background: rgba(255,255,255,.15);
    border: none;
    color: #fff;
    width: 2rem;
    height: 2rem;
    border-radius: .5rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    flex-shrink: 0;
    transition: background .15s;
}

.wizard-close:hover[b-pfyyqisdpz] { background: rgba(255,255,255,.25); }
.wizard-close:disabled[b-pfyyqisdpz] { opacity: .45; cursor: not-allowed; }

/* ── Stepper ─────────────────────────────────────────────────────────────────── */
.wizard-stepper[b-pfyyqisdpz] {
    display: flex;
    align-items: center;
    padding: .5rem 0;
    overflow-x: auto;
    scrollbar-width: none;
}

.wizard-stepper[b-pfyyqisdpz]::-webkit-scrollbar { display: none; }

.stepper-progress-copy[b-pfyyqisdpz] {
    display: none;
}

.stepper-item[b-pfyyqisdpz] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .25rem;
    flex-shrink: 0;
}

.stepper-circle[b-pfyyqisdpz] {
    width: 1.625rem;
    height: 1.625rem;
    border-radius: 50%;
    background: rgba(255,255,255,.2);
    color: rgba(255,255,255,.65);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .75rem;
    font-weight: 700;
    transition: all .2s;
    border: 1.5px solid rgba(255,255,255,.3);
}

.stepper-item.active .stepper-circle[b-pfyyqisdpz] {
    background: #fff;
    color: #6d28d9;
    border-color: #fff;
    box-shadow: 0 0 0 3px rgba(255,255,255,.25);
}

.stepper-item.done .stepper-circle[b-pfyyqisdpz] {
    background: rgba(255,255,255,.9);
    color: #16a34a;
    border-color: rgba(255,255,255,.9);
}

.stepper-label[b-pfyyqisdpz] {
    font-size: .625rem;
    color: rgba(255,255,255,.7);
    font-weight: 500;
    white-space: nowrap;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.stepper-item.active .stepper-label[b-pfyyqisdpz] { color: #fff; font-weight: 700; }
.stepper-item.done .stepper-label[b-pfyyqisdpz]   { color: rgba(255,255,255,.85); }

.stepper-line[b-pfyyqisdpz] {
    flex: 1;
    height: 1.5px;
    background: rgba(255,255,255,.2);
    min-width: 3rem;
    margin: 0 .5rem;
    margin-bottom: 1rem;
    transition: background .2s;
}

.stepper-line.done[b-pfyyqisdpz] { background: rgba(255,255,255,.6); }

/* ── Body ───────────────────────────────────────────────────────────────────── */
.wizard-body[b-pfyyqisdpz] {
    flex: 1;
    overflow-y: auto;
    padding: 1.25rem 1.5rem;
    background: #f8fafc;
}

.step-section[b-pfyyqisdpz] { max-width: none; }

.step-heading[b-pfyyqisdpz] {
    font-size: 1rem;
    font-weight: 700;
    color: #111827;
    margin: 0 0 .25rem;
}

.step-desc[b-pfyyqisdpz] {
    font-size: .8125rem;
    color: #6b7280;
    margin: 0 0 1rem;
}

.desc-hint[b-pfyyqisdpz] {
    color: #9ca3af;
    font-size: .75rem;
    font-style: italic;
}

/* ── Form ──────────────────────────────────────────────────────────────────── */
.form-grid[b-pfyyqisdpz] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 1rem;
    margin-bottom: 1.25rem;
}

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

.form-label[b-pfyyqisdpz] {
    font-size: .8125rem;
    font-weight: 600;
    color: #374151;
}

.req[b-pfyyqisdpz] { color: #ef4444; }

.form-select[b-pfyyqisdpz] {
    padding: .5rem .75rem;
    border: 1.5px solid #e2e8f0;
    border-radius: .5rem;
    font-size: .875rem;
    color: #1e293b;
    background: #f8fafc;
    transition: border-color .15s;
}

.form-select:focus[b-pfyyqisdpz] {
    outline: none;
    border-color: #4f46e5;
    background: #fff;
}

/* ── Setup info cards ─────────────────────────────────────────────────────── */
.setup-info-cards[b-pfyyqisdpz] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: .875rem;
    margin-bottom: 1rem;
}

.info-card[b-pfyyqisdpz] {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .875rem 1rem;
    border-radius: .75rem;
    font-size: .8125rem;
}

.info-card i[b-pfyyqisdpz] { font-size: 1.125rem; opacity: .8; }

.info-card-label[b-pfyyqisdpz] { color: inherit; opacity: .8; font-size: .75rem; margin-bottom: .125rem; }
.info-card-value[b-pfyyqisdpz] { font-weight: 700; font-size: .9375rem; display: flex; align-items: center; gap: .375rem; }

.info-card-blue[b-pfyyqisdpz]  { background: #eff6ff; color: #1d4ed8; }
.info-card-green[b-pfyyqisdpz] { background: #f0fdf4; color: #166534; }
.info-card-orange[b-pfyyqisdpz]{ background: #fff7ed; color: #9a3412; }
.info-card-purple[b-pfyyqisdpz]{ background: #faf5ff; color: #6b21a8; }

.section-tags[b-pfyyqisdpz] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .5rem;
    margin-top: .5rem;
}

.section-tags-label[b-pfyyqisdpz] {
    font-size: .8125rem;
    font-weight: 600;
    color: #64748b;
}

.section-tag[b-pfyyqisdpz] {
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    border-radius: 1rem;
    padding: .25rem .75rem;
    font-size: .8125rem;
    color: #475569;
}

.section-tag em[b-pfyyqisdpz] { font-style: normal; color: #94a3b8; margin-left: .25rem; }

.badge[b-pfyyqisdpz] { display: inline-block; padding: .125rem .5rem; border-radius: 1rem; font-size: .75rem; font-weight: 600; }
.badge-purple[b-pfyyqisdpz] { background: #ede9fe; color: #6d28d9; }

/* ── Loading ─────────────────────────────────────────────────────────────── */
.loading-row[b-pfyyqisdpz] {
    display: flex;
    align-items: center;
    gap: .5rem;
    color: #64748b;
    font-size: .875rem;
    padding: 1rem 0;
}

/* ── Review toolbar ──────────────────────────────────────────────────────── */
.review-toolbar[b-pfyyqisdpz] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: .75rem;
    margin-bottom: 1rem;
    padding: .875rem 1.25rem;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: .875rem;
    box-shadow: 0 1px 3px rgba(0,0,0,.04);
}

.review-toolbar-actions[b-pfyyqisdpz] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .75rem;
}

.review-results-count[b-pfyyqisdpz] {
    width: 100%;
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);
}

.section-filter[b-pfyyqisdpz] {
    position: relative;
    display: flex;
    align-items: center;
}

.section-filter i[b-pfyyqisdpz] {
    position: absolute;
    left: var(--spacing-4);
    color: var(--color-text-muted);
    pointer-events: none;
}

.section-filter select[b-pfyyqisdpz] {
    height: 36px;
    min-width: 140px;
    padding: 0 var(--spacing-5) 0 var(--spacing-8);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xs);
    background: var(--color-surface-primary);
    color: var(--color-text-primary);
    font-size: var(--font-size-xs);
}

.override-help[b-pfyyqisdpz] {
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
    margin-bottom: var(--spacing-4);
    padding: var(--spacing-4) var(--spacing-5);
    border: 1px solid var(--color-warning-300);
    border-radius: var(--radius-sm);
    background: var(--color-warning-50);
    color: var(--color-warning-900);
    font-size: var(--font-size-sm);
}

.step-confirmation[b-pfyyqisdpz] {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-4);
    margin-bottom: var(--spacing-5);
    padding: var(--spacing-5);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-surface-primary);
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
    cursor: pointer;
}

.step-confirmation input[b-pfyyqisdpz] {
    width: 18px;
    height: 18px;
    margin-top: var(--spacing-1);
    accent-color: var(--color-primary-600);
    flex-shrink: 0;
}

.step-confirmation-critical[b-pfyyqisdpz] {
    border-color: var(--color-warning-300);
    background: var(--color-warning-50);
}

.btn-auto[b-pfyyqisdpz] {
    background: #f3f4f6;
    color: #374151;
    border: 1.5px solid #e5e7eb;
    padding: 0 1rem;
    border-radius: .5rem;
    font-size: .8125rem;
    font-weight: 600;
    cursor: pointer;
    transition: all .15s;
    height: 36px;
    display: flex;
    align-items: center;
    gap: .375rem;
    white-space: nowrap;
}

.btn-auto:hover[b-pfyyqisdpz] { background: #e5e7eb; border-color: #d1d5db; color: #111827; }

.filter-tabs[b-pfyyqisdpz] { display: flex; flex-wrap: wrap; gap: .5rem; }

.filter-tab[b-pfyyqisdpz] {
    display: flex;
    align-items: center;
    gap: .375rem;
    padding: 0 .875rem;
    border: 1.5px solid #e5e7eb;
    border-radius: 999px;
    background: #fff;
    font-size: .75rem;
    font-weight: 500;
    color: #6b7280;
    cursor: pointer;
    transition: all .15s;
    height: 32px;
    white-space: nowrap;
}

.filter-tab:hover[b-pfyyqisdpz] { border-color: #6d28d9; color: #6d28d9; }
.filter-tab.active[b-pfyyqisdpz] { border-color: #6d28d9; background: #ede9fe; color: #6d28d9; font-weight: 700; }

.dot[b-pfyyqisdpz] {
    width: .5rem;
    height: .5rem;
    border-radius: 50%;
    flex-shrink: 0;
}

.dot-green[b-pfyyqisdpz]  { background: #22c55e; }
.dot-red[b-pfyyqisdpz]    { background: #ef4444; }
.dot-orange[b-pfyyqisdpz] { background: #f97316; }
.dot-purple[b-pfyyqisdpz] { background: #8b5cf6; }
.dot-gray[b-pfyyqisdpz]   { background: #94a3b8; }

/* ── Search box ──────────────────────────────────────────────── */
.search-box-wrap[b-pfyyqisdpz] {
    position: relative;
    display: flex;
    align-items: center;
}

.search-icon[b-pfyyqisdpz] {
    position: absolute;
    left: .625rem;
    color: #94a3b8;
    font-size: .8125rem;
    pointer-events: none;
}

.search-input[b-pfyyqisdpz] {
    padding: .4375rem .75rem .4375rem 2rem;
    border: 1.5px solid #e5e7eb;
    border-radius: .5rem;
    font-size: .8125rem;
    color: #111827;
    background: #f9fafb;
    width: 320px;
    height: 36px;
    transition: border-color .15s, background .15s;
}

.search-input:focus[b-pfyyqisdpz] {
    outline: none;
    border-color: #6d28d9;
    background: #fff;
    box-shadow: 0 0 0 3px rgba(109,40,217,.08);
}

.search-clear[b-pfyyqisdpz] {
    position: absolute;
    right: .5rem;
    background: none;
    border: none;
    color: #94a3b8;
    cursor: pointer;
    font-size: .75rem;
    padding: .25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: .25rem;
    transition: color .15s;
}
.search-clear:hover[b-pfyyqisdpz] { color: #ef4444; }

/* ── Students table ─────────────────────────────────────────────── */
.students-table-wrap[b-pfyyqisdpz] {
    overflow-x: auto;
    overflow-y: auto;
    /* header ≈90px + footer ≈65px + stats bar ≈80px + toolbar ≈80px + breadcrumb ≈44px = ~360px */
    max-height: calc(100vh - 360px);
    min-height: 200px;
    border: 1px solid #e5e7eb;
    border-radius: .875rem;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0,0,0,.05);
}

.wizard-modal-page .students-table-wrap[b-pfyyqisdpz] {
    max-height: calc(100vh - 390px);
    overflow-y: auto;
    scrollbar-gutter: stable;
}

.students-table[b-pfyyqisdpz] {
    width: 100%;
    border-collapse: collapse;
    font-size: .8125rem;
}

.students-table th[b-pfyyqisdpz] {
    background: #f9fafb;
    padding: .75rem 1.25rem;
    text-align: left;
    font-weight: 700;
    color: #374151;
    font-size: .6875rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    border-bottom: 1.5px solid #e5e7eb;
    white-space: nowrap;
    position: sticky;
    top: 0;
    z-index: 2;
    box-shadow: 0 1px 0 #e5e7eb;
}

.students-table .th-right[b-pfyyqisdpz] { text-align: right; }
.students-table .th-center[b-pfyyqisdpz] { text-align: center; }

.students-table td[b-pfyyqisdpz] {
    padding: 1.0625rem 1.25rem;
    border-bottom: 1px solid #f3f4f6;
    color: #374151;
    vertical-align: middle;
}

.students-table tr:last-child td[b-pfyyqisdpz] { border-bottom: none; }
.students-table tr:hover td[b-pfyyqisdpz] { background: #fafafa; }
.students-table tr.row-overridden td[b-pfyyqisdpz] { background: #fdfaff; }

.text-right[b-pfyyqisdpz]  { text-align: right; }
.text-center[b-pfyyqisdpz] { text-align: center; }
.text-sm[b-pfyyqisdpz]     { font-size: .8125rem; }

.student-cell[b-pfyyqisdpz] { display: flex; align-items: center; gap: .75rem; }

.avatar[b-pfyyqisdpz] {
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 50%;
    color: #fff;
    font-size: .75rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    letter-spacing: .01em;
}

.student-name[b-pfyyqisdpz]  { font-weight: 600; color: #111827; font-size: .875rem; line-height: 1.3; }
.student-adm[b-pfyyqisdpz]   { font-size: .6875rem; color: #9ca3af; margin-top: .25rem; }

.pct-pass[b-pfyyqisdpz] { color: #16a34a; font-weight: 700; }
.pct-fail[b-pfyyqisdpz] { color: #dc2626; font-weight: 700; }
.no-data[b-pfyyqisdpz]  { color: #d1d5db; }

.status-select[b-pfyyqisdpz] {
    padding: .3125rem .875rem .3125rem .625rem;
    border-radius: 999px;
    border: 1.5px solid #e5e7eb;
    font-size: .75rem;
    cursor: pointer;
    font-weight: 600;
    min-width: 130px;
    height: 32px;
    background-color: #f9fafb;
    transition: border-color .15s, background .15s;
}

.status-select.status-promoted[b-pfyyqisdpz]   { border-color: #86efac; background: #f0fdf4; color: #15803d; }
.status-select.status-failed[b-pfyyqisdpz]     { border-color: #fca5a5; background: #fef2f2; color: #dc2626; }
.status-select.status-compartment[b-pfyyqisdpz]{ border-color: #fdba74; background: #fff7ed; color: #c2410c; }
.status-select.status-graduated[b-pfyyqisdpz]  { border-color: #c4b5fd; background: #faf5ff; color: #7c3aed; }

.override-input[b-pfyyqisdpz] {
    width: 150px;
    max-width: 100%;
    padding: .3125rem .5rem;
    border: 1.5px solid #c4b5fd;
    border-radius: .375rem;
    font-size: .75rem;
    background: #faf5ff;
}

.auto-decision[b-pfyyqisdpz] {
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);
}

.empty-state[b-pfyyqisdpz] {
    text-align: center;
    padding: 2.5rem 1rem;
    color: #94a3b8;
    font-size: .875rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .5rem;
}

.empty-state i[b-pfyyqisdpz] { font-size: 1.5rem; color: #cbd5e1; }

.btn-link[b-pfyyqisdpz] {
    background: none;
    border: none;
    color: #4f46e5;
    font-size: .8125rem;
    font-weight: 600;
    cursor: pointer;
    padding: .125rem .25rem;
    text-decoration: underline;
}
.btn-link:hover[b-pfyyqisdpz] { color: #4338ca; }

/* ── Preview ─────────────────────────────────────────────────────────────── */
.preview-summary-cards[b-pfyyqisdpz] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 240px));
    gap: var(--spacing-4);
    margin-bottom: var(--spacing-4);
}

.summary-card[b-pfyyqisdpz] {
    border-radius: var(--radius-sm);
    padding: var(--spacing-5);
    text-align: left;
    border: 1.5px solid transparent;
}

.summary-num[b-pfyyqisdpz]  { font-size: 2rem; font-weight: 800; line-height: 1; margin-bottom: var(--spacing-3); }
.summary-label[b-pfyyqisdpz]{ font-size: .8125rem; font-weight: 700; margin-bottom: var(--spacing-2); }
.summary-sub[b-pfyyqisdpz]  { font-size: .75rem; opacity: .75; }

.summary-green[b-pfyyqisdpz]  { background: #f0fdf4; border-color: #bbf7d0; color: #166534; }
.summary-red[b-pfyyqisdpz]    { background: #fef2f2; border-color: #fecaca; color: #9b1c1c; }
.summary-orange[b-pfyyqisdpz] { background: #fff7ed; border-color: #fed7aa; color: #9a3412; }
.summary-purple[b-pfyyqisdpz] { background: #faf5ff; border-color: #e9d5ff; color: #6b21a8; }

.no-results-note[b-pfyyqisdpz] {
    display: flex;
    align-items: center;
    gap: .5rem;
    background: #f0f9ff;
    border: 1px solid #bae6fd;
    border-radius: .625rem;
    padding: .625rem 1rem;
    font-size: .8125rem;
    color: #0369a1;
    margin-bottom: var(--spacing-5);
}

.warning-box[b-pfyyqisdpz] {
    background: #fffbeb;
    border: 1.5px solid #fde68a;
    border-radius: .625rem;
    padding: .875rem 1rem;
    font-size: .8125rem;
    color: #92400e;
    display: flex;
    gap: .625rem;
    align-items: flex-start;
    margin-top: 1rem;
}

.warning-box.warning-box-red[b-pfyyqisdpz] {
    background: #fef2f2;
    border-color: #fecaca;
    color: #9b1c1c;
}

.warning-box i[b-pfyyqisdpz] { margin-top: .125rem; flex-shrink: 0; }

.section-breakdown-table[b-pfyyqisdpz] { margin-top: 1rem; overflow-x: auto; }

.preview-table[b-pfyyqisdpz] {
    width: 100%;
    border-collapse: collapse;
    font-size: .8125rem;
}

.preview-table th[b-pfyyqisdpz] {
    background: #f8fafc;
    padding: .5rem .875rem;
    text-align: left;
    font-weight: 700;
    font-size: .75rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: #374151;
    border-bottom: 1.5px solid #e2e8f0;
}

.preview-table td[b-pfyyqisdpz] {
    padding: .5rem .875rem;
    border-bottom: 1px solid #f1f5f9;
    color: #374151;
}

.preview-table tr:last-child td[b-pfyyqisdpz] { border-bottom: none; }

.section-badge[b-pfyyqisdpz] {
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    border-radius: .375rem;
    padding: .125rem .5rem;
    font-weight: 600;
}

.text-green[b-pfyyqisdpz]  { color: #166534; }
.text-red[b-pfyyqisdpz]    { color: #9b1c1c; }
.text-orange[b-pfyyqisdpz] { color: #9a3412; }
.text-purple[b-pfyyqisdpz] { color: #6b21a8; }

/* ── Execute step ─────────────────────────────────────────────────────────── */
.step-execute[b-pfyyqisdpz] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.execute-confirm[b-pfyyqisdpz], .execute-progress[b-pfyyqisdpz], .execute-success[b-pfyyqisdpz], .execute-error[b-pfyyqisdpz] {
    max-width: 500px;
    width: 100%;
    padding: 2rem 0;
}

.execute-icon[b-pfyyqisdpz] { font-size: 3rem; color: #4f46e5; margin-bottom: 1rem; display: block; }
.execute-icon-success[b-pfyyqisdpz] { font-size: 3rem; color: #22c55e; margin-bottom: 1rem; display: block; }
.execute-icon-error[b-pfyyqisdpz]   { font-size: 3rem; color: #ef4444; margin-bottom: 1rem; display: block; }

.execute-spinner[b-pfyyqisdpz] { font-size: 2.5rem; color: #4f46e5; margin-bottom: 1rem; }

.execute-list[b-pfyyqisdpz] {
    text-align: left;
    list-style: none;
    padding: 0;
    margin: 1rem 0;
}

.execute-list li[b-pfyyqisdpz] {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .375rem 0;
    font-size: .875rem;
    color: #374151;
}

.progress-bar-wrap[b-pfyyqisdpz] {
    display: flex;
    align-items: center;
    gap: .75rem;
    margin-top: 1.5rem;
}

.progress-bar-track[b-pfyyqisdpz] {
    flex: 1;
    height: .75rem;
    background: #e2e8f0;
    border-radius: 1rem;
    overflow: hidden;
}

.progress-bar-fill[b-pfyyqisdpz] {
    height: 100%;
    background: linear-gradient(90deg, #4f46e5, #7c3aed);
    border-radius: 1rem;
    transition: width .5s ease;
}

.progress-pct[b-pfyyqisdpz] { font-size: .875rem; font-weight: 700; color: #4f46e5; min-width: 3rem; text-align: right; }

.result-grid[b-pfyyqisdpz] {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .625rem;
    margin: 1.25rem 0;
}

.result-chip[b-pfyyqisdpz] {
    padding: .375rem 1rem;
    border-radius: 1rem;
    font-size: .875rem;
    font-weight: 700;
}

.chip-green[b-pfyyqisdpz]  { background: #dcfce7; color: #166534; }
.chip-red[b-pfyyqisdpz]    { background: #fee2e2; color: #9b1c1c; }
.chip-orange[b-pfyyqisdpz] { background: #ffedd5; color: #9a3412; }
.chip-purple[b-pfyyqisdpz] { background: #ede9fe; color: #6d28d9; }

.mt-4[b-pfyyqisdpz] { margin-top: 1rem; }

/* ── Footer ─────────────────────────────────────────────────────────────── */
.wizard-footer[b-pfyyqisdpz] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.5rem;
    border-top: 1px solid #e5e7eb;
    background: #fff;
    flex-shrink: 0;
}

.wizard-modal-page .wizard-footer[b-pfyyqisdpz] {
    position: static;
    padding: var(--spacing-6) 0;
    background: transparent;
    border-top: 1px solid var(--color-border);
    box-shadow: none;
}

.wizard-modal-page .wizard-footer-focused[b-pfyyqisdpz] {
    width: min(100%, 960px);
    margin-inline: auto;
}

.wizard-footer-left[b-pfyyqisdpz] { display: flex; gap: .75rem; }
.wizard-footer-right[b-pfyyqisdpz] { display: flex; gap: .75rem; }

.btn-primary[b-pfyyqisdpz] {
    background: #4f46e5;
    color: #fff;
    border: none;
    padding: .5625rem 1.25rem;
    border-radius: .5rem;
    font-size: .875rem;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s;
    display: flex;
    align-items: center;
    gap: .375rem;
}

.btn-primary:hover:not(:disabled)[b-pfyyqisdpz] { background: #4338ca; }
.btn-primary:disabled[b-pfyyqisdpz] { opacity: .5; cursor: not-allowed; }

.btn-secondary[b-pfyyqisdpz] {
    background: #fff;
    color: #374151;
    border: 1.5px solid #e2e8f0;
    padding: .5rem 1.25rem;
    border-radius: .5rem;
    font-size: .875rem;
    font-weight: 600;
    cursor: pointer;
    transition: all .15s;
    display: flex;
    align-items: center;
    gap: .375rem;
}

.btn-secondary:hover[b-pfyyqisdpz] { border-color: #4f46e5; color: #4f46e5; }

.btn-danger[b-pfyyqisdpz] {
    background: #ef4444;
    color: #fff;
    border: none;
    padding: .5625rem 1.25rem;
    border-radius: .5rem;
    font-size: .875rem;
    font-weight: 700;
    cursor: pointer;
    transition: background .15s;
    display: flex;
    align-items: center;
    gap: .375rem;
}

.btn-danger:hover[b-pfyyqisdpz] { background: #dc2626; }
.btn-danger:disabled[b-pfyyqisdpz] { opacity: .5; cursor: not-allowed; }

.mr-1[b-pfyyqisdpz] { margin-right: .25rem; }
.ml-1[b-pfyyqisdpz] { margin-left: .25rem; }

/* ── Bulk toolbar ─────────────────────────────────────────────────────── */
.bulk-toolbar[b-pfyyqisdpz] {
    display: flex;
    align-items: center;
    gap: .5rem;
    flex-wrap: wrap;
    padding: .625rem 1.25rem;
    background: #ede9fe;
    border: 1.5px solid #c4b5fd;
    border-radius: .75rem;
    margin-bottom: .75rem;
    position: sticky;
    top: 0;
    z-index: 3;
    box-shadow: 0 2px 8px rgba(109,40,217,.12);
}

.bulk-count[b-pfyyqisdpz] {
    font-size: .875rem;
    font-weight: 700;
    color: #4f46e5;
    padding-right: .5rem;
    border-right: 1.5px solid #c7d2fe;
    margin-right: .125rem;
    white-space: nowrap;
}

.btn-bulk[b-pfyyqisdpz] {
    padding: .375rem .875rem;
    border-radius: .5rem;
    font-size: .8125rem;
    font-weight: 600;
    cursor: pointer;
    border: 1.5px solid transparent;
    transition: all .15s;
    display: flex;
    align-items: center;
    gap: .3rem;
}

.btn-bulk-promote[b-pfyyqisdpz] { background: #dcfce7; color: #166534; border-color: #86efac; }
.btn-bulk-promote:hover[b-pfyyqisdpz] { background: #bbf7d0; }
.btn-bulk-fail[b-pfyyqisdpz]    { background: #fee2e2; color: #9b1c1c; border-color: #fca5a5; }
.btn-bulk-fail:hover[b-pfyyqisdpz] { background: #fecaca; }
.btn-bulk-comp[b-pfyyqisdpz]    { background: #fff7ed; color: #9a3412; border-color: #fdba74; }
.btn-bulk-comp:hover[b-pfyyqisdpz] { background: #ffedd5; }
.btn-bulk-clear[b-pfyyqisdpz]   { background: #f1f5f9; color: #475569; border-color: #e2e8f0; margin-left: auto; }
.btn-bulk-clear:hover[b-pfyyqisdpz] { background: #e2e8f0; }

/* ── Row risk coloring ─────────────────────────────────────────────────── */
.row-risk-fail[b-pfyyqisdpz] { background: #fff5f5 !important; }
.row-risk-fail td:first-child[b-pfyyqisdpz] { border-left: 4px solid #ef4444; }
.row-risk-comp[b-pfyyqisdpz] { background: #fff8f0 !important; }
.row-risk-comp td:first-child[b-pfyyqisdpz] { border-left: 4px solid #f97316; }
.row-risk-low-att td:first-child[b-pfyyqisdpz] { border-left: 4px solid #f59e0b; }
.row-risk-no-results td:first-child[b-pfyyqisdpz] { border-left: 4px solid #94a3b8; }
.row-overridden[b-pfyyqisdpz] { background: #fdfaff !important; }
.row-overridden td:first-child[b-pfyyqisdpz] { border-left: 4px solid #8b5cf6; }

/* ── Checkbox column ───────────────────────────────────────────────────── */
.th-checkbox[b-pfyyqisdpz], .td-checkbox[b-pfyyqisdpz] {
    width: 3rem;
    min-width: 3rem;
    text-align: center;
    padding-right: 0 !important;
}

.student-checkbox[b-pfyyqisdpz] {
    width: 1.125rem;
    height: 1.125rem;
    cursor: pointer;
    accent-color: #4f46e5;
}

/* ── Stats bar ─────────────────────────────────────────────────────────── */
.promo-stats-bar[b-pfyyqisdpz] {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    padding: 1rem 1.5rem;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: .875rem;
    margin-bottom: 1rem;
    flex-wrap: wrap;
    box-shadow: 0 1px 3px rgba(0,0,0,.05);
}

.promo-stat[b-pfyyqisdpz] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .125rem;
    min-width: 60px;
}

.promo-stat-num[b-pfyyqisdpz] {
    font-size: 1.875rem;
    font-weight: 800;
    line-height: 1;
    color: #111827;
    letter-spacing: -.02em;
}

.promo-stat-label[b-pfyyqisdpz] {
    font-size: .6875rem;
    font-weight: 600;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: .04em;
    white-space: nowrap;
}

.promo-stat-num.s-green[b-pfyyqisdpz]  { color: #16a34a; }
.promo-stat-num.s-red[b-pfyyqisdpz]    { color: #dc2626; }
.promo-stat-num.s-orange[b-pfyyqisdpz] { color: #ea580c; }
.promo-stat-num.s-purple[b-pfyyqisdpz] { color: #7c3aed; }
.promo-stat-num.s-amber[b-pfyyqisdpz]  { color: #d97706; }

.promo-stat-divider[b-pfyyqisdpz] {
    width: 1px;
    height: 2.5rem;
    background: #e5e7eb;
    flex-shrink: 0;
}

.promo-progress-wrap[b-pfyyqisdpz] {
    flex: 1;
    min-width: 220px;
}

.promo-progress-label[b-pfyyqisdpz] {
    font-size: .75rem;
    font-weight: 600;
    color: #374151;
    margin-bottom: .375rem;
    display: flex;
    justify-content: space-between;
}

.promo-progress-track[b-pfyyqisdpz] {
    height: .5rem;
    background: #f1f5f9;
    border-radius: 1rem;
    overflow: hidden;
}

.promo-progress-fill[b-pfyyqisdpz] {
    height: 100%;
    border-radius: 1rem;
    background: linear-gradient(90deg, #6d28d9, #4f46e5);
    transition: width .5s ease;
}

/* ── Responsive ─────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
    .wizard-overlay[b-pfyyqisdpz] { padding: 0; }
    .wizard-modal[b-pfyyqisdpz] {
        border-radius: 0;
        max-height: 100vh;
        height: 100vh;
    }
    .wizard-page-wrapper[b-pfyyqisdpz] { padding: var(--spacing-4); }
    .wizard-modal.wizard-modal-page[b-pfyyqisdpz] {
        height: auto;
        max-height: none;
        overflow: visible;
    }
    .wizard-header[b-pfyyqisdpz] { padding: 1rem 1rem 0; }
    .wizard-modal-page .wizard-header[b-pfyyqisdpz] { padding: 0 0 var(--spacing-4); }
    .wizard-modal-page .wizard-header-inner[b-pfyyqisdpz] { margin-bottom: var(--spacing-4); }
    .wizard-modal-page .wizard-stepper[b-pfyyqisdpz] {
        padding: var(--spacing-4);
        scroll-snap-type: x proximity;
    }
    .wizard-modal-page .stepper-item[b-pfyyqisdpz] { scroll-snap-align: center; }
    .stepper-progress-copy[b-pfyyqisdpz] {
        display: block;
        margin-bottom: var(--spacing-3);
        color: var(--color-text-muted);
        font-size: var(--font-size-xs);
        font-weight: 600;
    }
    .wizard-title-icon[b-pfyyqisdpz] { font-size: 1.25rem; }
    .wizard-title[b-pfyyqisdpz] { font-size: 1rem; }
    .wizard-stepper[b-pfyyqisdpz] { width: 100%; }
    .stepper-line[b-pfyyqisdpz] { min-width: 1rem; margin-inline: .25rem; }
    .wizard-body[b-pfyyqisdpz] { padding: 1rem; }
    .wizard-modal-page .wizard-body[b-pfyyqisdpz] { padding: var(--spacing-4) 0; }
    .wizard-modal-page .wizard-body-focused[b-pfyyqisdpz] {
        width: 100%;
        padding-block: var(--spacing-4);
    }
    .wizard-modal-page .wizard-body-focused .step-section[b-pfyyqisdpz] {
        min-height: 0;
        padding: var(--spacing-5);
    }
    .form-grid[b-pfyyqisdpz] { grid-template-columns: 1fr; }
    .preview-summary-cards[b-pfyyqisdpz] { grid-template-columns: 1fr 1fr; }
    .review-toolbar[b-pfyyqisdpz] { flex-direction: column; }
    .review-toolbar-actions[b-pfyyqisdpz],
    .search-box-wrap[b-pfyyqisdpz],
    .search-input[b-pfyyqisdpz] { width: 100%; }
    .section-filter[b-pfyyqisdpz],
    .section-filter select[b-pfyyqisdpz] { width: 100%; }
    .filter-tabs[b-pfyyqisdpz] { overflow-x: auto; flex-wrap: nowrap; padding-bottom: .25rem; }
    .wizard-stepper[b-pfyyqisdpz] { padding: .75rem 0; }
    .btn-auto[b-pfyyqisdpz],
    .filter-tab[b-pfyyqisdpz],
    .btn-primary[b-pfyyqisdpz],
    .btn-secondary[b-pfyyqisdpz],
    .btn-danger[b-pfyyqisdpz] { min-height: 44px; }
    .students-table[b-pfyyqisdpz] { min-width: 880px; }
    .wizard-modal-page .students-table-wrap[b-pfyyqisdpz] {
        max-height: calc(100vh - 320px);
        min-height: 240px;
    }
    .wizard-footer[b-pfyyqisdpz] { padding: .75rem 1rem; }
    .wizard-modal-page .wizard-footer[b-pfyyqisdpz] { padding: var(--spacing-4) 0; }
    .wizard-modal-page .wizard-footer-left[b-pfyyqisdpz],
    .wizard-modal-page .wizard-footer-right[b-pfyyqisdpz] { flex: 1; }
    .wizard-modal-page .btn-primary[b-pfyyqisdpz],
    .wizard-modal-page .btn-secondary[b-pfyyqisdpz],
    .wizard-modal-page .btn-danger[b-pfyyqisdpz] { width: 100%; justify-content: center; }
}
/* /Components/Shared/AnnouncementsScreen.razor.rz.scp.css */
/* ================================================================
   AnnouncementsScreen — Shared component stylesheet
   Design tokens only — no hardcoded values
   ================================================================ */

.ann-screen[b-5oiaz43i18] {
    max-width: 900px;
    margin: 0 auto;
    padding: var(--spacing-6) var(--spacing-5);
}

/* ---- Header ---------------------------------------------------- */
.ann-header[b-5oiaz43i18] {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-4);
    margin-bottom: var(--spacing-7);
}

@media (min-width: 768px) {
    .ann-header[b-5oiaz43i18] {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }
}

.ann-title[b-5oiaz43i18] {
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-text-primary);
    margin: 0 0 var(--spacing-1);
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
}

.ann-title i[b-5oiaz43i18] { color: var(--color-primary); }

.ann-subtitle[b-5oiaz43i18] {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    margin: 0;
}

.ann-btn-create[b-5oiaz43i18] {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-2);
    padding: var(--spacing-3) var(--spacing-5);
    background: var(--color-primary);
    color: var(--color-text-white);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    border: none;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: background 0.15s;
    white-space: nowrap;
}

.ann-btn-create:hover[b-5oiaz43i18] { background: var(--color-primary-dark); }

/* ---- Search ---------------------------------------------------- */
.ann-search[b-5oiaz43i18] {
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
    background: var(--color-bg-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    padding: var(--spacing-3) var(--spacing-4);
    margin-bottom: var(--spacing-5);
    box-shadow: var(--shadow-sm);
}

.ann-search-icon[b-5oiaz43i18] { color: var(--color-text-muted); font-size: var(--font-size-sm); }

.ann-search-input[b-5oiaz43i18] {
    flex: 1;
    border: none;
    outline: none;
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    background: transparent;
}

/* ---- Audience filter ------------------------------------------- */
.ann-filter-row[b-5oiaz43i18] {
    display: flex;
    gap: var(--spacing-3);
    flex-wrap: wrap;
    margin-bottom: var(--spacing-6);
}

.ann-filter-btn[b-5oiaz43i18] {
    padding: var(--spacing-2) var(--spacing-4);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-bg-white);
    color: var(--color-text-muted);
    cursor: pointer;
    transition: all 0.15s;
}

.ann-filter-btn:hover[b-5oiaz43i18]    { background: var(--color-gray-50); }
.ann-filter-btn.active[b-5oiaz43i18]   { background: var(--color-primary); color: var(--color-text-white); border-color: var(--color-primary); }

/* ---- Skeleton loader ------------------------------------------- */
.ann-skeleton-list[b-5oiaz43i18] {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-4);
}

.ann-skeleton[b-5oiaz43i18] {
    height: 90px;
    background: var(--color-gray-100);
    border-radius: var(--radius-md);
    animation: ann-pulse-b-5oiaz43i18 1.5s ease-in-out infinite;
}

@keyframes ann-pulse-b-5oiaz43i18 {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0.5; }
}

/* ---- Error state ----------------------------------------------- */
.ann-error[b-5oiaz43i18] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-10) var(--spacing-5);
    text-align: center;
    gap: var(--spacing-4);
    color: var(--color-text-muted);
}

.ann-error-icon[b-5oiaz43i18] { font-size: 2.5rem; color: var(--color-danger-400); }

.ann-btn-retry[b-5oiaz43i18] {
    padding: var(--spacing-3) var(--spacing-5);
    background: var(--color-primary);
    color: var(--color-text-white);
    font-size: var(--font-size-sm);
    border: none;
    border-radius: var(--radius-sm);
    cursor: pointer;
}

/* ---- Empty state ----------------------------------------------- */
.ann-empty[b-5oiaz43i18] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-10) var(--spacing-5);
    text-align: center;
}

.ann-empty-icon[b-5oiaz43i18]  { font-size: 3rem; color: var(--color-gray-300); margin-bottom: var(--spacing-4); }
.ann-empty-title[b-5oiaz43i18] { font-size: var(--font-size-md); font-weight: var(--font-weight-semibold); color: var(--color-text-primary); margin: 0 0 var(--spacing-2); }
.ann-empty-sub[b-5oiaz43i18]   { font-size: var(--font-size-sm); color: var(--color-text-muted); margin: 0; }

/* ---- Card list ------------------------------------------------- */
.ann-list[b-5oiaz43i18] {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-4);
}

.ann-card[b-5oiaz43i18] {
    display: flex;
    background: var(--color-bg-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    transition: box-shadow 0.15s;
}

.ann-card:hover[b-5oiaz43i18] { box-shadow: var(--shadow-md); }

.ann-card-accent[b-5oiaz43i18] {
    width: 5px;
    flex-shrink: 0;
    background: var(--color-gray-300);
}

.ann-card.brand-new .ann-card-accent[b-5oiaz43i18] { background: var(--color-danger-500); }
.ann-card.recent    .ann-card-accent[b-5oiaz43i18] { background: var(--color-primary); }

.ann-card-body[b-5oiaz43i18] {
    padding: var(--spacing-5) var(--spacing-6);
    flex: 1;
    min-width: 0;
}

.ann-card-top[b-5oiaz43i18] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--spacing-4);
    margin-bottom: var(--spacing-3);
    flex-wrap: wrap;
}

.ann-card-title[b-5oiaz43i18] {
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
    margin: 0;
    line-height: 1.4;
}

.ann-card-meta[b-5oiaz43i18] {
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
    flex-shrink: 0;
    flex-wrap: wrap;
}

.ann-card-date[b-5oiaz43i18] { font-size: var(--font-size-xs); color: var(--color-text-muted); white-space: nowrap; }

.ann-card-content[b-5oiaz43i18] {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    line-height: 1.6;
    margin: 0 0 var(--spacing-3);
}

/* ---- Rich content (Quill HTML) -------------------------------- */
.ann-rich-content > :first-child[b-5oiaz43i18] { margin-top: 0; }
.ann-rich-content > :last-child[b-5oiaz43i18]  { margin-bottom: 0; }

.ann-rich-content p[b-5oiaz43i18] { margin: 0 0 var(--spacing-2); }
.ann-rich-content ul[b-5oiaz43i18],
.ann-rich-content ol[b-5oiaz43i18] {
    margin: 0 0 var(--spacing-2);
    padding-left: 1.5em;
}
.ann-rich-content li[b-5oiaz43i18] { margin-bottom: var(--spacing-1); }
.ann-rich-content h1[b-5oiaz43i18],
.ann-rich-content h2[b-5oiaz43i18],
.ann-rich-content h3[b-5oiaz43i18],
.ann-rich-content h4[b-5oiaz43i18] {
    color: var(--color-text-primary);
    font-weight: var(--font-weight-semibold);
    margin: var(--spacing-3) 0 var(--spacing-1);
    line-height: 1.3;
}
.ann-rich-content h1[b-5oiaz43i18] { font-size: var(--font-size-lg); }
.ann-rich-content h2[b-5oiaz43i18] { font-size: var(--font-size-md); }
.ann-rich-content h3[b-5oiaz43i18],
.ann-rich-content h4[b-5oiaz43i18] { font-size: var(--font-size-sm); }
.ann-rich-content a[b-5oiaz43i18] { color: var(--color-primary); text-decoration: underline; }
.ann-rich-content blockquote[b-5oiaz43i18] {
    margin: 0 0 var(--spacing-2);
    padding-left: var(--spacing-3);
    border-left: 3px solid var(--color-border);
    color: var(--color-text-muted);
}
.ann-rich-content code[b-5oiaz43i18] {
    background: var(--color-gray-100);
    padding: 1px var(--spacing-1);
    border-radius: var(--radius-xs);
    font-size: 0.9em;
}
.ann-rich-content strong[b-5oiaz43i18] { font-weight: var(--font-weight-semibold); color: var(--color-text-primary); }

.ann-card-footer[b-5oiaz43i18] {
    display: flex;
    align-items: center;
    gap: var(--spacing-5);
    flex-wrap: wrap;
}

.ann-card-author[b-5oiaz43i18],
.ann-card-expiry[b-5oiaz43i18] {
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
    display: flex;
    align-items: center;
    gap: var(--spacing-1);
}

.ann-card-expiry[b-5oiaz43i18] { color: var(--color-warning-600); }

.ann-card-actions[b-5oiaz43i18] {
    display: flex;
    gap: var(--spacing-3);
    margin-top: var(--spacing-4);
    padding-top: var(--spacing-3);
    border-top: 1px solid var(--color-border-light);
}

.ann-action-btn[b-5oiaz43i18] {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-2);
    padding: var(--spacing-2) var(--spacing-4);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-secondary);
    background: var(--color-bg-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}

.ann-action-btn:hover:not(:disabled)[b-5oiaz43i18] {
    background: var(--color-primary-100);
    color: var(--color-primary-700);
}

.ann-action-btn:disabled[b-5oiaz43i18] { opacity: 0.6; cursor: not-allowed; }

/* ---- Audience badges ------------------------------------------- */
.ann-badge[b-5oiaz43i18] {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    padding: 2px var(--spacing-3);
    border-radius: var(--radius-full);
    white-space: nowrap;
}

.badge-primary[b-5oiaz43i18] { background: var(--color-primary-100); color: var(--color-primary-700); }
.badge-success[b-5oiaz43i18] { background: var(--color-success-100); color: var(--color-success-700); }
.badge-info[b-5oiaz43i18]    { background: var(--color-teal-100);    color: var(--color-teal-700); }
.badge-warning[b-5oiaz43i18] { background: var(--color-warning-100); color: var(--color-warning-700); }
.badge-neutral[b-5oiaz43i18] { background: var(--color-gray-100);    color: var(--color-gray-600); }

/* ---- Modal ----------------------------------------------------- */
.ann-modal-overlay[b-5oiaz43i18] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: var(--z-modal);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-5);
}

.ann-modal[b-5oiaz43i18] {
    background: var(--color-bg-white);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xl);
    width: 100%;
    max-width: 520px;
}

.ann-modal-header[b-5oiaz43i18] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--spacing-6);
    border-bottom: 1px solid var(--color-border-light);
}

.ann-modal-title[b-5oiaz43i18] {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
    margin: 0;
}

.ann-modal-close[b-5oiaz43i18] {
    background: none;
    border: none;
    color: var(--color-text-muted);
    cursor: pointer;
    font-size: var(--font-size-md);
    padding: var(--spacing-2);
    border-radius: var(--radius-xs);
    transition: color 0.15s;
}

.ann-modal-close:hover[b-5oiaz43i18] { color: var(--color-text-secondary); }

.ann-modal-body[b-5oiaz43i18] {
    padding: var(--spacing-6);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-5);
}

.ann-form-group[b-5oiaz43i18] {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-2);
}

.ann-form-row[b-5oiaz43i18] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-4);
}

@media (max-width: 480px) {
    .ann-form-row[b-5oiaz43i18] { grid-template-columns: 1fr; }
}

.ann-label[b-5oiaz43i18] {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.ann-input[b-5oiaz43i18] {
    width: 100%;
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    background: var(--color-bg-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    padding: var(--spacing-3) var(--spacing-4);
    box-sizing: border-box;
    outline: none;
    transition: border-color 0.15s;
    font-family: var(--font-primary);
}

.ann-input:focus[b-5oiaz43i18]  { border-color: var(--color-primary); }
.ann-textarea[b-5oiaz43i18]     { resize: none; line-height: 1.5; }

.ann-create-error[b-5oiaz43i18] {
    font-size: var(--font-size-xs);
    color: var(--color-danger-600);
    margin: 0;
}

.ann-modal-footer[b-5oiaz43i18] {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: var(--spacing-3);
    padding: var(--spacing-5) var(--spacing-6);
    border-top: 1px solid var(--color-border-light);
}

.ann-btn-cancel[b-5oiaz43i18] {
    padding: var(--spacing-3) var(--spacing-5);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-muted);
    background: var(--color-bg-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    cursor: pointer;
}

.ann-btn-cancel:hover[b-5oiaz43i18] { background: var(--color-gray-50); }

.ann-btn-publish[b-5oiaz43i18] {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-2);
    padding: var(--spacing-3) var(--spacing-5);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-white);
    background: var(--color-primary);
    border: none;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: background 0.15s;
}

.ann-btn-publish:hover:not(:disabled)[b-5oiaz43i18] { background: var(--color-primary-dark); }
.ann-btn-publish:disabled[b-5oiaz43i18]             { opacity: 0.6; cursor: not-allowed; }

/* ---- Mobile adjustments --------------------------------------- */
@media (max-width: 640px) {
    .ann-card-top[b-5oiaz43i18]  { flex-direction: column; }
    .ann-card-meta[b-5oiaz43i18] { flex-direction: row; }
    .ann-screen[b-5oiaz43i18]    { padding: var(--spacing-5) var(--spacing-4); }
}
/* /Components/Shared/Celebrations/FountainEffect.razor.rz.scp.css */
/* FountainEffect.razor.css — fountain particle animation */

.fountain-stage[b-l9oi54jf0y] {
    position: fixed;
    bottom: 40%;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    pointer-events: none;
    z-index: 9998;
    overflow: visible;
}

/* Base particle */
.fp[b-l9oi54jf0y] {
    position: absolute;
    bottom: 0;
    left: 0;
    font-size: 1.8rem;
    line-height: 1;
    opacity: 0;
    animation: fp-arc-b-l9oi54jf0y var(--dur, 1.4s) var(--delay, 0s) cubic-bezier(0.15, 0.85, 0.55, 1) forwards;
    will-change: transform, opacity;
}

/* Inner ring — smaller, faster */
.fp.fp-inner[b-l9oi54jf0y] {
    font-size: 1.5rem;
    animation-timing-function: cubic-bezier(0.1, 0.9, 0.5, 1);
}

/* Outer ring — larger, slower */
.fp.fp-outer[b-l9oi54jf0y] {
    font-size: 2.2rem;
    animation-duration: calc(var(--dur) * 1.15);
}

/* Ribbon streamer */
.fp.fp-ribbon[b-l9oi54jf0y] {
    font-size: 1.6rem;
    animation-duration: calc(var(--dur) * 1.3);
    animation-timing-function: cubic-bezier(0.05, 0.95, 0.4, 1);
}

/* The fountain arc keyframe:
   Starts at center-bottom, shoots outward & upward, fades at apex */
@keyframes fp-arc-b-l9oi54jf0y {
    0% {
        transform: translate(0, 0) scale(0.3) rotate(0deg);
        opacity: 1;
    }
    40% {
        opacity: 1;
    }
    70% {
        opacity: 0.8;
    }
    100% {
        transform: translate(var(--tx), var(--ty)) scale(1.1) rotate(var(--rot, 360deg));
        opacity: 0;
    }
}
/* /Components/Shared/Celebrations/GreetingTemplatePickerModal.razor.rz.scp.css */
/* GreetingTemplatePickerModal.razor.css */

/* ── Overlay ─────────────────────────────────────────────────────────── */
.gtpm-overlay[b-3l92phdfhx] {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.65);
    backdrop-filter: blur(6px);
    z-index: 9000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

/* ── Modal shell ─────────────────────────────────────────────────────── */
.gtpm-modal[b-3l92phdfhx] {
    background: var(--color-neutral-0, #fff);
    border-radius: 20px;
    box-shadow: 0 24px 80px rgba(0,0,0,0.22), 0 4px 24px rgba(0,0,0,0.1);
    width: 1040px;
    max-width: 96vw;
    max-height: 92vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* ── Header ──────────────────────────────────────────────────────────── */
.gtpm-header[b-3l92phdfhx] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.125rem 1.5rem;
    border-bottom: 1px solid var(--color-neutral-100, #f1f5f9);
    flex-shrink: 0;
    background: linear-gradient(135deg, #fdf4ff 0%, #f0f9ff 100%);
}

.gtpm-header-left[b-3l92phdfhx] {
    display: flex;
    align-items: center;
    gap: 0.875rem;
}

.gtpm-header-icon-wrap[b-3l92phdfhx] {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: linear-gradient(135deg, #7c3aed, #db2777);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 4px 12px rgba(124, 58, 237, 0.35);
}

.gtpm-header-icon[b-3l92phdfhx] {
    font-size: 1.1rem;
    color: #fff;
}

.gtpm-title[b-3l92phdfhx] {
    font-size: 1rem;
    font-weight: 700;
    color: var(--color-neutral-900, #0f172a);
}

.gtpm-subtitle[b-3l92phdfhx] {
    font-size: 0.75rem;
    color: var(--color-neutral-500, #6B7280);
    margin-top: 0.2rem;
    display: flex;
    align-items: center;
    gap: 0.3rem;
}

.gtpm-sub-icon[b-3l92phdfhx] {
    font-size: 0.65rem;
    opacity: 0.7;
}

.gtpm-sub-sep[b-3l92phdfhx] {
    opacity: 0.4;
}

.gtpm-close[b-3l92phdfhx] {
    background: none;
    border: none;
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
    color: var(--color-neutral-500, #6B7280);
    cursor: pointer;
    border-radius: 8px;
    transition: background 0.15s, color 0.15s;
    flex-shrink: 0;
}
.gtpm-close:hover[b-3l92phdfhx] {
    background: var(--color-neutral-100, #f1f5f9);
    color: var(--color-neutral-900, #0f172a);
}

/* ── Body ────────────────────────────────────────────────────────────── */
.gtpm-body[b-3l92phdfhx] {
    display: flex;
    flex: 1;
    overflow: hidden;
    min-height: 0;
}

/* ── Left: template grid (scrollable) ───────────────────────────────── */
.gtpm-left[b-3l92phdfhx] {
    width: 390px;
    flex-shrink: 0;
    border-right: 1px solid var(--color-neutral-100, #f1f5f9);
    overflow-y: auto;
    padding: 1.25rem 1rem;
    background: var(--color-neutral-50, #f8fafc);
}

.gtpm-section-title[b-3l92phdfhx] {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-neutral-400, #94a3b8);
    margin-bottom: 0.875rem;
}

/* Scope filter tabs above template grid */
.gtpm-scope-tabs[b-3l92phdfhx] {
    display: flex;
    gap: 0.3rem;
    margin-bottom: 0.75rem;
    flex-wrap: wrap;
}

.gtpm-scope-tab[b-3l92phdfhx] {
    padding: 0.25rem 0.65rem;
    font-size: 0.72rem;
    font-weight: 600;
    border: 1px solid var(--color-neutral-200);
    border-radius: 20px;
    background: #fff;
    color: var(--color-neutral-500);
    cursor: pointer;
    transition: all 0.15s;
    white-space: nowrap;
}

.gtpm-scope-tab.active[b-3l92phdfhx],
.gtpm-scope-tab:hover:not(.gtpm-scope-tab--create)[b-3l92phdfhx] {
    background: var(--color-primary-50, #eef2ff);
    border-color: var(--color-primary-300, #a5b4fc);
    color: var(--color-primary-700, #4338ca);
}

.gtpm-scope-tab--create[b-3l92phdfhx] {
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    border-color: transparent;
    color: #fff;
}

.gtpm-scope-tab--create:hover[b-3l92phdfhx] {
    background: linear-gradient(135deg, #4f46e5, #7c3aed);
    color: #fff;
}

.gtpm-grid[b-3l92phdfhx] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
}

/* Template card */
.gtpm-card[b-3l92phdfhx] {
    border: 2px solid transparent;
    background: #fff;
    border-radius: 14px;
    padding: 1rem 0.875rem 0.875rem;
    cursor: pointer;
    text-align: center;
    transition: border-color 0.15s, box-shadow 0.2s, transform 0.12s;
    position: relative;
    min-height: 140px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    box-shadow: 0 1px 4px rgba(0,0,0,0.06);
}
.gtpm-card:hover[b-3l92phdfhx] {
    border-color: var(--theme-color, #6366f1);
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(0,0,0,0.1);
}
.gtpm-card--selected[b-3l92phdfhx] {
    border-color: var(--theme-color, #6366f1);
    background: color-mix(in srgb, var(--theme-color, #6366f1) 6%, white);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--theme-color, #6366f1) 20%, transparent);
}

.gtpm-card-icon-wrap[b-3l92phdfhx] {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    background: color-mix(in srgb, var(--theme-color, #6366f1) 14%, white);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.gtpm-card-icon[b-3l92phdfhx] {
    font-size: 1.35rem;
    color: var(--theme-color, #6366f1);
}

.gtpm-card-name[b-3l92phdfhx] {
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--color-neutral-800, #1e293b);
    line-height: 1.35;
    text-align: center;
}

.gtpm-card-label[b-3l92phdfhx] {
    font-size: 0.63rem;
    color: var(--color-neutral-500, #6B7280);
    line-height: 1.3;
    text-align: center;
}

.gtpm-card-badge[b-3l92phdfhx] {
    position: absolute;
    top: -8px;
    right: -4px;
    background: linear-gradient(135deg, #f59e0b, #d97706);
    color: #fff;
    font-size: 0.55rem;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    gap: 3px;
    white-space: nowrap;
    box-shadow: 0 2px 6px rgba(245, 158, 11, 0.4);
}

/* ── No recipient state ──────────────────────────────────────────────── */
.gtpm-no-recip[b-3l92phdfhx] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 2rem 1.75rem;
    text-align: center;
}

.gtpm-no-recip-icon[b-3l92phdfhx] {
    width: 64px;
    height: 64px;
    border-radius: 16px;
    background: linear-gradient(135deg, #ede9fe, #fce7f3);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: #7c3aed;
    margin-bottom: 1rem;
}

.gtpm-no-recip-title[b-3l92phdfhx] {
    font-size: 1rem;
    font-weight: 700;
    color: var(--color-neutral-900, #0f172a);
    margin-bottom: 0.5rem;
}

.gtpm-no-recip-body[b-3l92phdfhx] {
    font-size: 0.8rem;
    color: var(--color-neutral-600, #475569);
    line-height: 1.5;
    margin-bottom: 1.25rem;
}

.gtpm-no-recip-steps[b-3l92phdfhx] {
    list-style: none;
    padding: 0;
    margin: 0;
    width: 100%;
    text-align: left;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.gtpm-no-recip-steps li[b-3l92phdfhx] {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    background: var(--color-neutral-50, #f8fafc);
    border: 1px solid var(--color-neutral-100, #f1f5f9);
    border-radius: 10px;
    padding: 0.75rem;
    font-size: 0.78rem;
    color: var(--color-neutral-700, #374151);
    line-height: 1.5;
}

.gtpm-step-icon[b-3l92phdfhx] {
    flex-shrink: 0;
    margin-top: 0.1rem;
    color: #7c3aed;
    font-size: 0.9rem;
    width: 16px;
    text-align: center;
}

/* ── Recipient bar ───────────────────────────────────────────────────── */
.gtpm-recipient-bar[b-3l92phdfhx] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    background: color-mix(in srgb, var(--rc, #7c3aed) 6%, white);
    border: 1.5px solid color-mix(in srgb, var(--rc, #7c3aed) 18%, white);
    border-radius: 12px;
    flex-shrink: 0;
}

.gtpm-recip-avatar[b-3l92phdfhx] {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: linear-gradient(135deg, #7c3aed, #db2777);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
    font-weight: 700;
    color: #fff;
    flex-shrink: 0;
}

.gtpm-recip-info[b-3l92phdfhx] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}

.gtpm-recip-name[b-3l92phdfhx] {
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--color-neutral-900, #0f172a);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.gtpm-recip-meta[b-3l92phdfhx] {
    font-size: 0.7rem;
    color: var(--color-neutral-500, #6B7280);
    display: flex;
    align-items: center;
    gap: 0.3rem;
}

.gtpm-recip-event-pill[b-3l92phdfhx] {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--rc, #7c3aed);
    background: color-mix(in srgb, var(--rc, #7c3aed) 12%, white);
    border: 1px solid color-mix(in srgb, var(--rc, #7c3aed) 20%, white);
    border-radius: 20px;
    padding: 0.25rem 0.65rem;
    white-space: nowrap;
    flex-shrink: 0;
}

/* ── Full email preview mockup ───────────────────────────────────────── */
.gtpm-email-preview[b-3l92phdfhx] {
    border: 1px solid var(--color-neutral-200, #e2e8f0);
    border-radius: 12px;
    overflow: hidden;
    flex-shrink: 0;
}

.gtpm-ep-chrome[b-3l92phdfhx] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.55rem 0.875rem;
    background: var(--color-neutral-50, #f8fafc);
    border-bottom: 1px solid var(--color-neutral-200, #e2e8f0);
}

.gtpm-ep-dot[b-3l92phdfhx] {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    display: inline-block;
    flex-shrink: 0;
}

.gtpm-ep-subject[b-3l92phdfhx] {
    font-size: 0.68rem;
    color: var(--color-neutral-600, #475569);
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

.gtpm-ep-header[b-3l92phdfhx] {
    padding: 1.25rem 1.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.3rem;
}

.gtpm-ep-header-icon[b-3l92phdfhx] {
    width: 46px;
    height: 46px;
    border-radius: 14px;
    background: rgba(255,255,255,0.25);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0.2rem;
}
.gtpm-ep-header-icon i[b-3l92phdfhx] { font-size: 1.3rem; color: #fff; }

.gtpm-ep-header-title[b-3l92phdfhx] {
    font-size: 1rem;
    font-weight: 800;
    color: #fff;
    text-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

.gtpm-ep-header-name[b-3l92phdfhx] {
    font-size: 0.75rem;
    color: rgba(255,255,255,0.88);
    font-weight: 600;
}

.gtpm-ep-body[b-3l92phdfhx] {
    padding: 1rem 1.25rem;
    background: #fff;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.gtpm-ep-salutation[b-3l92phdfhx] { font-size: 0.8rem; color: var(--color-neutral-800, #1e293b); margin: 0; }
.gtpm-ep-template-text[b-3l92phdfhx] { font-size: 0.78rem; color: var(--color-neutral-700, #374151); line-height: 1.55; margin: 0; }

.gtpm-ep-note[b-3l92phdfhx] {
    margin: 0;
    padding: 0.6rem 0.875rem;
    border-left: 3px solid #7c3aed;
    background: rgba(124,58,237,0.05);
    border-radius: 0 8px 8px 0;
    font-size: 0.78rem;
    font-style: italic;
    color: var(--color-neutral-700, #374151);
    line-height: 1.5;
}

.gtpm-ep-note--empty[b-3l92phdfhx] {
    color: var(--color-neutral-400, #94a3b8);
    border-left-color: var(--color-neutral-200, #e2e8f0);
    background: var(--color-neutral-50, #f8fafc);
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.gtpm-ep-closing[b-3l92phdfhx] { font-size: 0.78rem; color: var(--color-neutral-600, #475569); margin: 0; margin-top: 0.25rem; line-height: 1.6; }

.gtpm-ep-footer-bar[b-3l92phdfhx] {
    padding: 0.5rem 1.25rem;
    background: var(--color-neutral-50, #f8fafc);
    border-top: 1px solid var(--color-neutral-100, #f1f5f9);
    font-size: 0.65rem;
    color: var(--color-neutral-400, #94a3b8);
    display: flex;
    align-items: center;
    gap: 0.3rem;
}

/* ── Action summary strip ────────────────────────────────────────────── */
.gtpm-action-summary[b-3l92phdfhx] {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    padding: 0.75rem 0.875rem;
    background: rgba(59,130,246,0.06);
    border: 1px solid rgba(59,130,246,0.18);
    border-radius: 10px;
    font-size: 0.75rem;
    color: var(--color-neutral-700, #374151);
    line-height: 1.5;
}

.gtpm-summary-icon[b-3l92phdfhx] {
    color: #3b82f6;
    font-size: 0.85rem;
    margin-top: 0.05rem;
    flex-shrink: 0;
}

/* ── Right: preview + form ───────────────────────────────────────────── */
.gtpm-right[b-3l92phdfhx] {
    flex: 1;
    overflow-y: auto;
    padding: 1.25rem 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    min-width: 0;
}

/* ── Greeting card preview ───────────────────────────────────────────── */
.gtpm-greeting-card[b-3l92phdfhx] {
    border-radius: 16px;
    overflow: hidden;
    background: linear-gradient(
        135deg,
        color-mix(in srgb, var(--tc, #6366f1) 20%, white) 0%,
        color-mix(in srgb, var(--tc, #6366f1) 7%, white) 100%
    );
    border: 1.5px solid color-mix(in srgb, var(--tc, #6366f1) 22%, white);
    position: relative;
    min-height: 180px;
    flex-shrink: 0;
}

/* Decorative circles */
.gtpm-card-decorations[b-3l92phdfhx] {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
}
.gtpm-dec[b-3l92phdfhx] {
    position: absolute;
    border-radius: 50%;
    background: color-mix(in srgb, var(--tc, #6366f1) 10%, transparent);
}
.gtpm-dec--1[b-3l92phdfhx] { width: 130px; height: 130px; top: -50px; right: -35px; }
.gtpm-dec--2[b-3l92phdfhx] { width: 75px;  height: 75px;  bottom: -25px; left: 18px; }
.gtpm-dec--3[b-3l92phdfhx] { width: 45px;  height: 45px;  top: 18px; left: -12px; }

.gtpm-card-body[b-3l92phdfhx] {
    position: relative;
    z-index: 1;
    padding: 1.5rem 2rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.4rem;
}

.gtpm-card-event-icon[b-3l92phdfhx] {
    width: 54px;
    height: 54px;
    border-radius: 16px;
    background: var(--tc, #6366f1);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0.25rem;
    box-shadow: 0 6px 16px color-mix(in srgb, var(--tc, #6366f1) 40%, transparent);
}
.gtpm-card-event-icon i[b-3l92phdfhx] {
    font-size: 1.4rem;
    color: #fff;
}

.gtpm-card-event-text[b-3l92phdfhx] {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--tc, #6366f1);
}

.gtpm-card-recipient[b-3l92phdfhx] {
    font-size: 1.3rem;
    font-weight: 800;
    color: var(--color-neutral-900, #0f172a);
    line-height: 1.2;
}

.gtpm-card-msg[b-3l92phdfhx] {
    font-size: 0.82rem;
    color: var(--color-neutral-700, #374151);
    font-style: italic;
    max-width: 340px;
    line-height: 1.55;
}

.gtpm-card-msg--placeholder[b-3l92phdfhx] {
    color: var(--color-neutral-400, #94a3b8);
    font-size: 0.75rem;
}

.gtpm-card-from[b-3l92phdfhx] {
    font-size: 0.7rem;
    color: var(--color-neutral-500, #6B7280);
    display: flex;
    align-items: center;
    gap: 0.3rem;
    margin-top: 0.3rem;
}

/* ── Form ────────────────────────────────────────────────────────────── */
.gtpm-form[b-3l92phdfhx] {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.gtpm-field[b-3l92phdfhx] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.gtpm-label[b-3l92phdfhx] {
    font-size: 0.775rem;
    font-weight: 600;
    color: var(--color-neutral-700, #374151);
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.gtpm-label-icon[b-3l92phdfhx] {
    color: var(--color-neutral-400, #94a3b8);
}

.gtpm-label-opt[b-3l92phdfhx] {
    font-weight: 400;
    color: var(--color-neutral-400, #94a3b8);
    font-size: 0.7rem;
}

.gtpm-textarea[b-3l92phdfhx] {
    border: 1.5px solid var(--color-neutral-200, #e2e8f0);
    border-radius: 10px;
    padding: 0.75rem;
    font-size: 0.8rem;
    resize: vertical;
    min-height: 80px;
    max-height: 130px;
    font-family: inherit;
    color: var(--color-neutral-900, #0f172a);
    outline: none;
    transition: border-color 0.15s, box-shadow 0.15s;
    width: 100%;
    box-sizing: border-box;
    background: var(--color-neutral-50, #f8fafc);
}
.gtpm-textarea:focus[b-3l92phdfhx] {
    border-color: #7c3aed;
    box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.12);
    background: #fff;
}
.gtpm-textarea[b-3l92phdfhx]::placeholder {
    color: var(--color-neutral-400, #94a3b8);
}

.gtpm-ai-hint[b-3l92phdfhx] {
    font-size: 0.7rem;
    color: #7c3aed;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.45rem 0.65rem;
    background: rgba(124, 58, 237, 0.07);
    border-radius: 8px;
    border: 1px solid rgba(124, 58, 237, 0.15);
}

.gtpm-char-count[b-3l92phdfhx] {
    font-size: 0.65rem;
    color: var(--color-neutral-400, #94a3b8);
    text-align: right;
}

/* Segmented delivery control */
.gtpm-seg-control[b-3l92phdfhx] {
    display: flex;
    background: var(--color-neutral-100, #f1f5f9);
    border-radius: 10px;
    padding: 3px;
    gap: 2px;
}

.gtpm-seg-btn[b-3l92phdfhx] {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    padding: 0 0.5rem;
    height: 36px;
    border: none;
    border-radius: 8px;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--color-neutral-600, #475569);
    background: transparent;
    cursor: pointer;
    transition: all 0.15s;
    white-space: nowrap;
    font-family: inherit;
}
.gtpm-seg-btn:hover:not(.gtpm-seg-btn--active)[b-3l92phdfhx] {
    background: rgba(255, 255, 255, 0.7);
    color: var(--color-neutral-900, #0f172a);
}
.gtpm-seg-btn--active[b-3l92phdfhx] {
    background: #fff;
    color: #7c3aed;
    box-shadow: 0 1px 4px rgba(0,0,0,0.12);
    font-weight: 700;
}

.gtpm-checkbox-row[b-3l92phdfhx] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.78rem;
    color: var(--color-neutral-700, #374151);
    cursor: pointer;
    user-select: none;
}
.gtpm-checkbox-row input[b-3l92phdfhx] {
    accent-color: #7c3aed;
    width: 15px;
    height: 15px;
    cursor: pointer;
    flex-shrink: 0;
}

/* ── Placeholder (no template selected) ─────────────────────────────── */
.gtpm-placeholder[b-3l92phdfhx] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 3rem 2rem;
}

.gtpm-placeholder-icon[b-3l92phdfhx] {
    width: 64px;
    height: 64px;
    border-radius: 16px;
    background: var(--color-neutral-100, #f1f5f9);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: var(--color-neutral-400, #94a3b8);
    margin-bottom: 0.875rem;
}

.gtpm-placeholder-title[b-3l92phdfhx] {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--color-neutral-700, #374151);
    margin-bottom: 0.35rem;
}

.gtpm-placeholder-sub[b-3l92phdfhx] {
    font-size: 0.78rem;
    color: var(--color-neutral-400, #94a3b8);
}

/* ── Footer ──────────────────────────────────────────────────────────── */
.gtpm-footer[b-3l92phdfhx] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.75rem;
    padding: 1rem 1.5rem;
    border-top: 1px solid var(--color-neutral-100, #f1f5f9);
    flex-shrink: 0;
    background: var(--color-neutral-50, #f8fafc);
}

.gtpm-btn-cancel[b-3l92phdfhx] {
    background: #fff;
    border: 1.5px solid var(--color-neutral-200, #e2e8f0);
    border-radius: 10px;
    height: 42px;
    padding: 0 1.4rem;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--color-neutral-700, #374151);
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
    font-family: inherit;
}
.gtpm-btn-cancel:hover[b-3l92phdfhx] {
    background: var(--color-neutral-50, #f8fafc);
    border-color: var(--color-neutral-300, #cbd5e1);
}

.gtpm-btn-send[b-3l92phdfhx] {
    background: linear-gradient(135deg, #7c3aed, #db2777);
    border: none;
    border-radius: 10px;
    height: 42px;
    padding: 0 1.75rem;
    font-size: 0.85rem;
    font-weight: 700;
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    transition: opacity 0.15s, transform 0.1s, box-shadow 0.15s;
    box-shadow: 0 4px 16px rgba(124, 58, 237, 0.45);
    font-family: inherit;
}
.gtpm-btn-send:hover:not(:disabled)[b-3l92phdfhx] {
    opacity: 0.92;
    transform: translateY(-1px);
    box-shadow: 0 6px 22px rgba(124, 58, 237, 0.5);
}
.gtpm-btn-send:disabled[b-3l92phdfhx] {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

.gtpm-spinner[b-3l92phdfhx] {
    width: 14px;
    height: 14px;
    border: 2px solid rgba(255,255,255,0.4);
    border-top-color: #fff;
    border-radius: 50%;
    animation: gtpm-spin-b-3l92phdfhx 0.7s linear infinite;
}
@keyframes gtpm-spin-b-3l92phdfhx {
    to { transform: rotate(360deg); }
}

/* ── Responsive ─────────────────────────────────────────────────────── */
@media (max-width: 860px) {
    .gtpm-body[b-3l92phdfhx] { flex-direction: column; }
    .gtpm-left[b-3l92phdfhx] {
        width: 100%;
        border-right: none;
        border-bottom: 1px solid var(--color-neutral-100, #f1f5f9);
        max-height: 230px;
    }
    .gtpm-grid[b-3l92phdfhx] { grid-template-columns: repeat(3, 1fr); }
    .gtpm-right[b-3l92phdfhx] { flex: none; }
}

@media (max-width: 540px) {
    .gtpm-modal[b-3l92phdfhx] {
        width: 100%;
        max-width: 100%;
        max-height: 98vh;
        border-radius: 16px 16px 0 0;
        align-self: flex-end;
    }
    .gtpm-overlay[b-3l92phdfhx] {
        padding: 0;
        align-items: flex-end;
    }
    .gtpm-grid[b-3l92phdfhx] { grid-template-columns: 1fr 1fr; }
    .gtpm-seg-btn[b-3l92phdfhx] { font-size: 0.68rem; gap: 0.25rem; }
}

/* ── Batch recipient bar ─────────────────────────────────────────────── */
.gtpm-batch-bar[b-3l92phdfhx] {
    background: linear-gradient(135deg, #fdf4ff, #eff6ff);
    border: 1px solid rgba(168, 85, 247, 0.2);
    border-radius: 12px;
    padding: 0.75rem 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    flex-shrink: 0;
}

.gtpm-batch-label[b-3l92phdfhx] {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.75rem;
    font-weight: 700;
    color: #7c3aed;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.gtpm-batch-chips[b-3l92phdfhx] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.gtpm-batch-chip[b-3l92phdfhx] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: #fff;
    border: 1px solid rgba(168, 85, 247, 0.25);
    border-radius: 99px;
    padding: 3px 10px 3px 3px;
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--color-neutral-700);
}

.gtpm-batch-chip-av[b-3l92phdfhx] {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: linear-gradient(135deg, #a855f7, #ec4899);
    color: #fff;
    font-size: 0.62rem;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
/* /Components/Shared/Celebrations/TemplateBuilderModal.razor.rz.scp.css */
/* TemplateBuilderModal.razor.css */

/* ── Full-screen overlay ──────────────────────────────────────── */
.tb-overlay[b-6hw7a0tc9r] {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.6);
    backdrop-filter: blur(3px);
    z-index: 9000;
    display: flex;
    align-items: stretch;
    justify-content: center;
}

/* ── Shell ────────────────────────────────────────────────────── */
.tb-shell[b-6hw7a0tc9r] {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    background: #fff;
    box-shadow: 0 20px 60px rgba(0,0,0,0.2);
    overflow: hidden;
}

/* ── Header ───────────────────────────────────────────────────── */
.tb-header[b-6hw7a0tc9r] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1.25rem;
    background: #fff;
    border-bottom: 1px solid var(--color-neutral-100);
    flex-shrink: 0;
    gap: 1rem;
}

.tb-header-left[b-6hw7a0tc9r] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.tb-title[b-6hw7a0tc9r] {
    font-size: 1rem;
    font-weight: 700;
    color: var(--color-neutral-900);
    margin: 0;
}

.tb-scope-badge[b-6hw7a0tc9r] {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 2px 8px;
    border-radius: 20px;
}

.tb-scope-badge.system[b-6hw7a0tc9r]   { background: #ede9fe; color: #6d28d9; }
.tb-scope-badge.school[b-6hw7a0tc9r]   { background: #dbeafe; color: #1d4ed8; }
.tb-scope-badge.personal[b-6hw7a0tc9r] { background: #d1fae5; color: #065f46; }

.tb-header-actions[b-6hw7a0tc9r] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.tb-error[b-6hw7a0tc9r] {
    font-size: 0.8rem;
    color: var(--color-error, #dc2626);
}

/* Buttons (inline light variants) */
.btn-outline-sm[b-6hw7a0tc9r] {
    padding: 0.4rem 1rem;
    font-size: 0.8rem;
    font-weight: 600;
    border: 1px solid var(--color-neutral-200);
    border-radius: 6px;
    background: #fff;
    color: var(--color-neutral-700);
    cursor: pointer;
    transition: border-color 0.15s;
}

.btn-outline-sm:hover[b-6hw7a0tc9r] { border-color: var(--color-neutral-400); }

.btn-primary-sm[b-6hw7a0tc9r] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 1.1rem;
    font-size: 0.8rem;
    font-weight: 600;
    border: none;
    border-radius: 6px;
    background: var(--color-primary-600, #6366f1);
    color: #fff;
    cursor: pointer;
    transition: background 0.15s;
}

.btn-primary-sm:hover:not(:disabled)[b-6hw7a0tc9r]  { background: var(--color-primary-700, #4f46e5); }
.btn-primary-sm:disabled[b-6hw7a0tc9r]              { opacity: 0.6; cursor: default; }

/* ── Body ─────────────────────────────────────────────────────── */
.tb-body[b-6hw7a0tc9r] {
    display: flex;
    flex: 1;
    overflow: hidden;
    min-height: 0;
}

/* ── Left sidebar ─────────────────────────────────────────────── */
.tb-sidebar[b-6hw7a0tc9r] {
    width: 260px;
    flex-shrink: 0;
    border-right: 1px solid var(--color-neutral-100);
    padding: 1rem;
    overflow-y: auto;
    background: #fafafa;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.tb-field-group[b-6hw7a0tc9r] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.tb-field-row[b-6hw7a0tc9r] {
    display: flex;
    gap: 0.5rem;
}

.tb-field-row .tb-field-group[b-6hw7a0tc9r] { flex: 1; }

.tb-label[b-6hw7a0tc9r] {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-neutral-500);
}

.tb-input[b-6hw7a0tc9r],
.tb-select[b-6hw7a0tc9r] {
    width: 100%;
    padding: 0.4rem 0.6rem;
    font-size: 0.82rem;
    border: 1px solid var(--color-neutral-200);
    border-radius: 5px;
    background: #fff;
    color: var(--color-neutral-900);
    box-sizing: border-box;
    transition: border-color 0.15s;
}

.tb-input:focus[b-6hw7a0tc9r],
.tb-select:focus[b-6hw7a0tc9r] {
    outline: none;
    border-color: var(--color-primary-400, #818cf8);
}

.tb-emoji[b-6hw7a0tc9r] { font-size: 1.2rem; text-align: center; }

.tb-color-row[b-6hw7a0tc9r] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.tb-color-swatch[b-6hw7a0tc9r] {
    width: 36px;
    height: 30px;
    border: 1px solid var(--color-neutral-200);
    border-radius: 5px;
    cursor: pointer;
    padding: 2px;
}

.tb-color-hex[b-6hw7a0tc9r] {
    font-size: 0.75rem;
    color: var(--color-neutral-500);
    font-family: monospace;
}

.tb-field-check[b-6hw7a0tc9r] { display: flex; align-items: center; }

.tb-check-label[b-6hw7a0tc9r] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8rem;
    color: var(--color-neutral-700);
    cursor: pointer;
}

.tb-divider[b-6hw7a0tc9r] {
    height: 1px;
    background: var(--color-neutral-100);
    margin: 0.25rem 0;
}

/* ── Device switcher ─────────────────────────────────────────── */
.tb-device-row[b-6hw7a0tc9r] {
    display: flex;
    gap: 0.35rem;
    flex-wrap: wrap;
}

.tb-device-btn[b-6hw7a0tc9r] {
    flex: 1;
    padding: 0.35rem 0.4rem;
    font-size: 0.72rem;
    font-weight: 600;
    border: 1px solid var(--color-neutral-200);
    border-radius: 5px;
    background: #fff;
    color: var(--color-neutral-600);
    cursor: pointer;
    text-align: center;
    transition: all 0.15s;
}

.tb-device-btn.active[b-6hw7a0tc9r],
.tb-device-btn:hover[b-6hw7a0tc9r] {
    background: var(--color-primary-50, #eef2ff);
    border-color: var(--color-primary-400, #818cf8);
    color: var(--color-primary-700, #4338ca);
}

/* ── Token chips ─────────────────────────────────────────────── */
.tb-tokens-section[b-6hw7a0tc9r] { display: flex; flex-direction: column; gap: 0.3rem; }

.tb-tokens-title[b-6hw7a0tc9r] {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-neutral-400);
    padding-bottom: 0.2rem;
    border-bottom: 1px solid var(--color-neutral-100);
}

.tb-token-hint[b-6hw7a0tc9r] {
    font-size: 0.72rem;
    color: var(--color-neutral-400);
    line-height: 1.4;
}

.tb-token-chip[b-6hw7a0tc9r] {
    display: inline-block;
    padding: 3px 8px;
    border-radius: 4px;
    background: #f0f9ff;
    color: #0369a1;
    font-size: 0.72rem;
    font-family: monospace;
    cursor: default;
    border: 1px solid #bae6fd;
    user-select: text;
}

/* ── Canvas area ─────────────────────────────────────────────── */
.tb-canvas[b-6hw7a0tc9r] {
    flex: 1;
    min-width: 0;
    position: relative;
    background: #f1f5f9;
    overflow: hidden;
}

.tb-canvas-loading[b-6hw7a0tc9r] {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    z-index: 1;
    background: #f1f5f9;
}

.tb-grapes-hidden[b-6hw7a0tc9r] { visibility: hidden; position: absolute; inset: 0; }
.tb-grapes-visible[b-6hw7a0tc9r] { width: 100%; height: 100%; }

.tb-spinner-ring[b-6hw7a0tc9r] {
    width: 40px;
    height: 40px;
    border: 3px solid #e2e8f0;
    border-top-color: var(--color-primary-500, #6366f1);
    border-radius: 50%;
    animation: tb-spin-b-6hw7a0tc9r 0.8s linear infinite;
}

.tb-spinner-label[b-6hw7a0tc9r] {
    font-size: 0.85rem;
    color: var(--color-neutral-400);
}

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

.spinner-xs[b-6hw7a0tc9r] {
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 2px solid rgba(255,255,255,0.4);
    border-top-color: #fff;
    border-radius: 50%;
    animation: tb-spin-b-6hw7a0tc9r 0.7s linear infinite;
}

/* ── Responsive ──────────────────────────────────────────────── */
@media (max-width: 768px) {
    .tb-body[b-6hw7a0tc9r] { flex-direction: column; }

    .tb-sidebar[b-6hw7a0tc9r] {
        width: 100%;
        border-right: none;
        border-bottom: 1px solid var(--color-neutral-100);
        max-height: 45vh;
    }

    .tb-canvas[b-6hw7a0tc9r] { height: 55vh; }
}
/* /Components/Shared/ClassAssignmentForm.razor.rz.scp.css */
.class-assignment-form[b-lrgox8567f] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

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

.selector-label[b-lrgox8567f] {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-primary);
}

.optional-badge[b-lrgox8567f] {
    font-weight: 400;
    color: var(--text-tertiary);
    font-size: 0.75rem;
}

.form-select[b-lrgox8567f] {
    padding: 0.625rem 0.75rem;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    background: var(--bg-surface-primary);
    color: var(--text-primary);
    font-size: 0.875rem;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.form-select:focus[b-lrgox8567f] {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.1);
}

.form-select.loading[b-lrgox8567f] {
    opacity: 0.6;
    pointer-events: none;
}

/* Subjects Picker */

.subjects-picker[b-lrgox8567f] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.subjects-label[b-lrgox8567f] {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.count-badge[b-lrgox8567f] {
    font-size: 0.75rem;
    padding: 0.125rem 0.5rem;
    background: var(--bg-primary);
    color: var(--text-on-primary);
    border-radius: 999px;
    font-weight: 500;
}

.subjects-grid[b-lrgox8567f] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 0.5rem;
}

.subject-chip[b-lrgox8567f] {
    position: relative;
    display: flex;
    align-items: center;
    padding: 0.5rem 0.75rem 0.5rem 2rem;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all 0.2s;
    user-select: none;
}

.subject-chip:hover[b-lrgox8567f] {
    border-color: var(--primary-light);
    background: var(--bg-surface-secondary);
}

.subject-chip.selected[b-lrgox8567f] {
    border-color: var(--primary-color);
    background: var(--bg-primary-subtle);
}

.subject-chip.readonly[b-lrgox8567f] {
    cursor: default;
    opacity: 0.7;
}

.subject-chip input[type="checkbox"][b-lrgox8567f] {
    position: absolute;
    left: 0.5rem;
    width: 1rem;
    height: 1rem;
    accent-color: var(--primary-color);
}

.subject-name[b-lrgox8567f] {
    font-size: 0.8125rem;
    color: var(--text-primary);
}

/* Validation Message */

.validation-message[b-lrgox8567f] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 0.75rem;
    border-radius: var(--radius-md);
    font-size: 0.8125rem;
}

.validation-message.error[b-lrgox8567f] {
    background: var(--bg-error-subtle);
    color: var(--text-error);
    border: 1px solid var(--border-error);
}

.validation-message.warning[b-lrgox8567f] {
    background: var(--bg-warning-subtle);
    color: var(--text-warning);
    border: 1px solid var(--border-warning);
}

/* Responsive */

@media (max-width: 768px) {
    .subjects-grid[b-lrgox8567f] {
        grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    }
}
/* /Components/Shared/ComingSoon.razor.rz.scp.css */
.coming-soon-wrap[b-hds7hfpn32] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 70vh;
    padding: 1rem;
}

.coming-soon-card[b-hds7hfpn32] {
    background: var(--color-white, #fff);
    border-radius: var(--radius-xl, 24px);
    box-shadow: var(--shadow-lg, 0 8px 24px rgba(0,0,0,.12));
    padding: 3rem 2.5rem;
    text-align: center;
    max-width: 420px;
    width: 100%;
}

.coming-soon-icon[b-hds7hfpn32] {
    width: 80px;
    height: 80px;
    border-radius: var(--radius-full, 9999px);
    background: var(--color-primary-50, #E6F7F4);
    color: var(--color-primary-500, #4A9B8E);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    margin: 0 auto 1.5rem;
}

.coming-soon-title[b-hds7hfpn32] {
    font-size: var(--font-size-2xl, 24px);
    font-weight: var(--font-weight-bold, 700);
    color: var(--color-text-primary, #111);
    margin-bottom: 0.75rem;
}

.coming-soon-desc[b-hds7hfpn32] {
    font-size: var(--font-size-md, 16px);
    color: var(--color-neutral-500, #6b7280);
    line-height: var(--line-height-normal, 1.5);
    margin-bottom: 2rem;
}

.coming-soon-btn[b-hds7hfpn32] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    border-radius: var(--radius-lg, 16px);
    background: var(--color-primary-500, #4A9B8E);
    color: #fff;
    font-weight: var(--font-weight-semibold, 600);
    font-size: var(--font-size-sm, 14px);
    border: none;
    cursor: pointer;
    transition: background 0.2s ease;
}

.coming-soon-btn:hover[b-hds7hfpn32] {
    background: var(--color-primary-600, #3D8275);
}
/* /Components/Shared/ContentRenderer.razor.rz.scp.css */
.content-renderer[b-b9oto50qst] {
    min-width: 0;
    max-width: 100%;
    color: var(--color-text-primary);
    overflow-wrap: anywhere;
}

.content-renderer.inline[b-b9oto50qst],
.content-renderer.inline[b-b9oto50qst]  .rendered-markdown,
.content-renderer.inline[b-b9oto50qst]  p {
    display: inline;
    margin: 0;
}

.content-renderer.inline[b-b9oto50qst]  .rendered-markdown {
    line-height: inherit;
}

.content-renderer[b-b9oto50qst]  .rendered-markdown {
    min-width: 0;
    max-width: 100%;
    line-height: 1.65;
}

.content-renderer[b-b9oto50qst]  .rendered-markdown > :first-child {
    margin-top: 0;
}

.content-renderer[b-b9oto50qst]  .rendered-markdown > :last-child {
    margin-bottom: 0;
}

.content-renderer[b-b9oto50qst]  p,
.content-renderer[b-b9oto50qst]  ul,
.content-renderer[b-b9oto50qst]  ol,
.content-renderer[b-b9oto50qst]  blockquote,
.content-renderer[b-b9oto50qst]  pre,
.content-renderer[b-b9oto50qst]  table,
.content-renderer[b-b9oto50qst]  mjx-container[display="true"] {
    margin-block: var(--spacing-sm);
}

.content-renderer[b-b9oto50qst]  ul,
.content-renderer[b-b9oto50qst]  ol {
    padding-inline-start: var(--spacing-xl);
}

.content-renderer[b-b9oto50qst]  a {
    color: var(--color-text-link);
    text-decoration: underline;
    text-underline-offset: 0.15em;
}

.content-renderer[b-b9oto50qst]  blockquote {
    margin-inline: 0;
    padding: var(--spacing-sm) var(--spacing-md);
    border-inline-start: 3px solid var(--color-primary);
    color: var(--color-text-secondary);
    background: var(--color-surface-secondary);
}

.content-renderer[b-b9oto50qst]  pre,
.content-renderer[b-b9oto50qst]  .table-scroll,
.content-renderer[b-b9oto50qst]  mjx-container[display="true"] {
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
}

.content-renderer[b-b9oto50qst]  pre {
    padding: var(--spacing-md);
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-sm);
    background: var(--color-surface-secondary);
    white-space: pre;
}

.content-renderer[b-b9oto50qst]  code {
    font-family: Consolas, "Courier New", monospace;
}

.content-renderer[b-b9oto50qst]  :not(pre) > code {
    padding: 0.1em 0.3em;
    border-radius: var(--radius-xs);
    background: var(--color-surface-secondary);
}

.content-renderer[b-b9oto50qst]  table {
    width: max-content;
    min-width: 100%;
    border-collapse: collapse;
}

.content-renderer[b-b9oto50qst]  th,
.content-renderer[b-b9oto50qst]  td {
    padding: var(--spacing-sm) var(--spacing-md);
    border: 1px solid var(--color-border-subtle);
    text-align: start;
    vertical-align: top;
}

.content-renderer[b-b9oto50qst]  th {
    background: var(--color-surface-secondary);
}

.content-renderer[b-b9oto50qst]  .visual-placeholder,
.content-renderer[b-b9oto50qst]  .unresolved-image-reference {
    display: inline-block;
    max-width: 100%;
    padding: var(--spacing-xs) var(--spacing-sm);
    border: 1px dashed var(--color-border-strong);
    border-radius: var(--radius-xs);
    color: var(--color-text-secondary);
    background: var(--color-surface-secondary);
}

.content-renderer[b-b9oto50qst]  .math-error {
    border-inline-start: 3px solid var(--color-error, #dc2626);
    padding-inline-start: var(--spacing-sm);
}

@media (max-width: 767px) {
    .content-renderer[b-b9oto50qst]  th,
    .content-renderer[b-b9oto50qst]  td {
        padding: var(--spacing-xs) var(--spacing-sm);
    }
}
/* /Components/Shared/DataGrid.razor.rz.scp.css */
/* DataGrid.razor.css — scoped styles for DataGrid component */

.data-grid-card-content[b-uzrnnzcx8y] {
    cursor: pointer;
}

.data-grid-row[b-uzrnnzcx8y] {
    cursor: pointer;
}
/* /Components/Shared/DateRangeFilter.razor.rz.scp.css */
.filter-control[b-zafz9k1haa] {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
}

.clear-filter-btn[b-zafz9k1haa] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    min-width: 32px;
    border-radius: 8px;
    border: 1px solid var(--color-neutral-300, #d1d5db);
    background: white;
    color: var(--color-neutral-500, #6b7280);
    font-size: 13px;
    cursor: pointer;
    transition: all 0.15s ease;
    flex-shrink: 0;
}

.clear-filter-btn:hover[b-zafz9k1haa] {
    background: var(--color-neutral-100, #f3f4f6);
    color: var(--color-neutral-700, #374151);
    border-color: var(--color-neutral-400, #9ca3af);
}

@media (max-width: 767px) {
    .filter-control[b-zafz9k1haa] {
        flex-wrap: wrap;
    }

    /* Align with the first (top) date input instead of centering between both */
    .clear-filter-btn[b-zafz9k1haa] {
        margin-left: auto;
        align-self: flex-start;
    }
}
/* /Components/Shared/ExamPaperIframe.razor.rz.scp.css */
/* =============================================================
   ExamPaperIframe — co-located scoped styles.
   Uses design tokens only — never hardcoded colors or spacing.
   ============================================================= */

.epi-wrap[b-ic71ao8mt9] {
    position: relative;
    width: 100%;
    background: var(--color-neutral-100, #f1f5f9);
    border: 1px solid var(--color-neutral-200, #e2e8f0);
    border-radius: var(--radius-md, 0.5rem);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* The iframe fills the wrapper. min-height keeps it usable when Height="auto". */
.epi-iframe[b-ic71ao8mt9] {
    width: 100%;
    height: 100%;
    flex: 1;
    min-height: 480px;
    border: 0;
    background: #fff;
    display: block;
}

/* Loading / error / empty states — same look as the rest of the app. */
.epi-state[b-ic71ao8mt9] {
    flex: 1;
    min-height: 320px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    color: var(--color-neutral-600, #475569);
    font-size: 0.875rem;
    font-weight: 500;
    padding: 2rem 1rem;
}

.epi-state i[b-ic71ao8mt9] {
    font-size: 1.5rem;
    color: var(--color-primary-600, #2563eb);
}

.epi-state--error i[b-ic71ao8mt9] {
    color: var(--color-danger-500, #ef4444);
}

.epi-retry[b-ic71ao8mt9] {
    margin-top: 0.25rem;
    padding: 0.4rem 0.9rem;
    border-radius: var(--radius-sm, 0.375rem);
    border: 1px solid var(--color-neutral-300, #cbd5e1);
    background: #fff;
    color: var(--color-neutral-700, #334155);
    font-size: 0.8125rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}

.epi-retry:hover[b-ic71ao8mt9] {
    background: var(--color-neutral-100, #f1f5f9);
    border-color: var(--color-primary-400, #60a5fa);
    color: var(--color-primary-700, #1d4ed8);
}

/* Mobile: take the full viewport minus any visible toolbar */
@media (max-width: 767px) {
    .epi-wrap[b-ic71ao8mt9] {
        border-radius: var(--radius-sm, 0.375rem);
    }
    .epi-iframe[b-ic71ao8mt9] {
        min-height: 360px;
    }
}
/* /Components/Shared/FeatureGuard.razor.rz.scp.css */
/* FeatureGuard — visually wraps and locks gated content */

.feature-guard-lock[b-z77ji9j3ni] {
    position: relative;
    display: inline-flex;
    cursor: pointer;
    opacity: 0.65;
    filter: grayscale(0.4);
    transition: opacity 0.15s;
}

.feature-guard-lock:hover[b-z77ji9j3ni] { opacity: 0.8; }

.lock-badge[b-z77ji9j3ni] {
    position: absolute;
    top: -6px;
    right: -6px;
    width: 18px;
    height: 18px;
    background: var(--color-warning-500);
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-neutral-0);
    font-size: var(--font-size-xs);
    box-shadow: var(--shadow-sm);
    pointer-events: none;
}

/* Upgrade modal */
.feature-guard-overlay[b-z77ji9j3ni] {
    position: fixed;
    inset: 0;
    background: var(--color-neutral-900-alpha-45, rgba(0,0,0,0.45));
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}

.feature-guard-modal[b-z77ji9j3ni] {
    background: var(--color-neutral-0);
    border-radius: var(--radius-xl);
    padding: var(--space-6);
    width: 420px;
    max-width: 95vw;
    box-shadow: var(--shadow-xl);
}

.modal-header[b-z77ji9j3ni] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: var(--space-4);
}

.modal-header i[b-z77ji9j3ni] { font-size: 1.6rem; }

.modal-header h3[b-z77ji9j3ni] {
    font-size: var(--text-xl);
    font-weight: var(--font-semibold);
    margin: 0;
    color: var(--color-neutral-900);
}

.modal-body[b-z77ji9j3ni] {
    color: var(--color-neutral-700);
    font-size: var(--text-sm);
    margin-bottom: var(--space-5);
    line-height: 1.6;
}

.fg-desc[b-z77ji9j3ni] {
    margin: var(--space-3) 0;
    color: var(--color-neutral-600);
}

.fg-benefits[b-z77ji9j3ni] {
    list-style: none;
    margin: var(--space-3) 0 0;
    padding: 0;
}

.fg-benefits li[b-z77ji9j3ni] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-1) 0;
    font-size: var(--text-sm);
    color: var(--color-neutral-700);
}

.fg-benefits li i[b-z77ji9j3ni] {
    color: var(--color-success-500);
}

.modal-footer[b-z77ji9j3ni] {
    display: flex;
    gap: var(--space-3);
    justify-content: flex-end;
}
/* /Components/Shared/Financial/ExpenseManager.razor.rz.scp.css */
/* ExpenseManager.razor.css – co-located styles for shared expense component */

.expense-manager[b-seygjen0ub] {
    width: 100%;
}

/* ── Tabs ─────────────────────────────────────────────────────── */
.expense-tabs[b-seygjen0ub] {
    display: flex;
    gap: 4px;
    border-bottom: 2px solid var(--color-border, #e5e7eb);
    margin-bottom: 24px;
    overflow-x: auto;
    padding-bottom: 0;
}

.expense-tab[b-seygjen0ub] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    border: none;
    background: transparent;
    color: var(--color-text-secondary, #6b7280);
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    transition: all 0.2s;
    white-space: nowrap;
}

.expense-tab:hover[b-seygjen0ub] {
    color: var(--color-primary, #6366f1);
    background: var(--color-surface-hover, #f9fafb);
    border-radius: 6px 6px 0 0;
}

.expense-tab.active[b-seygjen0ub] {
    color: var(--color-primary, #0e7490);
    border-bottom-color: var(--color-primary, #0e7490);
    background: transparent;
    border-radius: 6px 6px 0 0;
    font-weight: 700;
}

/* ── KPI Grid ─────────────────────────────────────────────────── */
.kpi-grid[b-seygjen0ub] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 16px;
    margin-bottom: 24px;
}

.kpi-card[b-seygjen0ub] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px;
    border-radius: 12px;
    background: var(--color-surface, #fff);
    border: 1px solid var(--color-border, #e5e7eb);
    box-shadow: 0 2px 10px rgba(0,0,0,0.06);
    border-top: 3px solid transparent;
    transition: box-shadow 0.15s;
}
.kpi-card:hover[b-seygjen0ub] { box-shadow: 0 4px 16px rgba(0,0,0,0.10); }

/* Accent top bar per type */
.kpi-blue[b-seygjen0ub]   { border-top-color: #2563eb; }
.kpi-purple[b-seygjen0ub] { border-top-color: #7c3aed; }
.kpi-orange[b-seygjen0ub] { border-top-color: #ea580c; }
.kpi-green[b-seygjen0ub]  { border-top-color: #059669; }
.kpi-red[b-seygjen0ub]    { border-top-color: #dc2626; }

.kpi-icon[b-seygjen0ub] {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    flex-shrink: 0;
}

.kpi-blue .kpi-icon[b-seygjen0ub] { background: #dbeafe; color: #2563eb; }
.kpi-purple .kpi-icon[b-seygjen0ub] { background: #ede9fe; color: #7c3aed; }
.kpi-orange .kpi-icon[b-seygjen0ub] { background: #ffedd5; color: #ea580c; }
.kpi-green .kpi-icon[b-seygjen0ub] { background: #d1fae5; color: #059669; }
.kpi-red .kpi-icon[b-seygjen0ub] { background: #fee2e2; color: #dc2626; }

.kpi-content[b-seygjen0ub] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.kpi-label[b-seygjen0ub] {
    font-size: 0.75rem;
    color: var(--color-text-secondary, #6b7280);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.kpi-value[b-seygjen0ub] {
    font-size: clamp(1rem, 1.3rem, 1.6rem);
    font-weight: 800;
    color: var(--color-text-primary, #111827);
    line-height: 1.15;
    font-variant-numeric: tabular-nums;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ── Section Card ─────────────────────────────────────────────── */
.section-card[b-seygjen0ub] {
    background: var(--color-surface, #fff);
    border: 1px solid var(--color-border, #e5e7eb);
    border-radius: 12px;
    padding: 20px 24px;
    margin-bottom: 20px;
}

.section-title[b-seygjen0ub] {
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-text-primary, #111827);
    margin: 0 0 16px 0;
}

/* ── Category breakdown ───────────────────────────────────────── */
.category-list[b-seygjen0ub] { display: flex; flex-direction: column; gap: 10px; }

.category-row[b-seygjen0ub] {
    display: grid;
    grid-template-columns: 200px 1fr 170px;
    align-items: center;
    gap: 12px;
    padding: 6px 0;
}

.category-label[b-seygjen0ub] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.9rem;
    color: #374151;
    font-weight: 500;
}

.color-dot[b-seygjen0ub] {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    flex-shrink: 0;
}

.category-bar-wrap[b-seygjen0ub] {
    height: 10px;
    background: #f3f4f6;
    border-radius: 6px;
    overflow: hidden;
}

.category-bar[b-seygjen0ub] {
    height: 100%;
    border-radius: 6px;
    transition: width 0.6s ease;
    min-width: 4px;
}

.category-amount[b-seygjen0ub] {
    text-align: right;
    font-size: 0.875rem;
    font-weight: 600;
    color: #111827;
}

/* ── Monthly trend chart ──────────────────────────────────────── */
.trend-chart[b-seygjen0ub] {
    display: flex;
    align-items: flex-end;
    gap: 12px;
    height: 220px;
    padding-top: 8px;
}

.trend-bar-group[b-seygjen0ub] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    flex: 1;
    height: 100%;
}

.trend-bar-container[b-seygjen0ub] {
    flex: 1;
    width: 100%;
    display: flex;
    align-items: flex-end;
    max-width: 48px;
}

.trend-bar[b-seygjen0ub] {
    width: 100%;
    background: var(--color-primary, #0e7490);
    border-radius: 4px 4px 0 0;
    min-height: 4px;
    transition: height 0.4s ease;
    opacity: 1;
}

.trend-label[b-seygjen0ub] {
    font-size: 0.72rem;
    color: #6b7280;
    text-align: center;
    white-space: nowrap;
}

.trend-amount[b-seygjen0ub] {
    font-size: 0.72rem;
    color: #374151;
    font-weight: 700;
}

/* ── Toolbar ──────────────────────────────────────────────────── */
.tab-toolbar[b-seygjen0ub] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}

.search-group[b-seygjen0ub] {
    display: flex;
    gap: 8px;
    flex: 1;
    min-width: 240px;
}

.search-input[b-seygjen0ub] {
    flex: 1;
    padding: 9px 14px;
    border: 1px solid var(--color-border, #e5e7eb);
    border-radius: 8px;
    font-size: 0.875rem;
    background: var(--color-surface, #fff);
    color: var(--color-text-primary, #111827);
    outline: none;
    transition: border-color 0.15s;
    min-width: 200px;
}

.search-input:focus[b-seygjen0ub] {
    border-color: var(--color-primary, #6366f1);
    box-shadow: 0 0 0 3px var(--color-primary-light, #eef2ff);
}

.filter-select[b-seygjen0ub] {
    padding: 9px 12px;
    border: 1px solid var(--color-border, #e5e7eb);
    border-radius: 8px;
    font-size: 0.875rem;
    background: var(--color-surface, #fff);
    color: var(--color-text-primary, #111827);
    cursor: pointer;
}

/* ── Table ────────────────────────────────────────────────────── */
.table-wrap[b-seygjen0ub] {
    overflow-x: auto;
    border: 1px solid var(--color-border, #e5e7eb);
    border-radius: 12px;
}

.data-table[b-seygjen0ub] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
}

.data-table th[b-seygjen0ub] {
    padding: 12px 14px;
    text-align: left;
    font-weight: 600;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-text-secondary, #6b7280);
    background: var(--color-surface-secondary, #f9fafb);
    border-bottom: 1px solid var(--color-border, #e5e7eb);
    white-space: nowrap;
}

.data-table td[b-seygjen0ub] {
    padding: 12px 14px;
    color: var(--color-text-primary, #111827);
    border-bottom: 1px solid var(--color-border-light, #f3f4f6);
    vertical-align: middle;
}

.data-table tr:last-child td[b-seygjen0ub] { border-bottom: none; }
.data-table tr:hover td[b-seygjen0ub] { background: var(--color-surface-hover, #f9fafb); }

.empty-row[b-seygjen0ub] {
    text-align: center;
    color: var(--color-text-secondary, #6b7280);
    padding: 40px !important;
}

/* ── Status badges ────────────────────────────────────────────── */
.status-badge[b-seygjen0ub] {
    display: inline-flex;
    align-items: center;
    padding: 2px 10px;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
}

.status-approved[b-seygjen0ub] { background: #d1fae5; color: #065f46; }
.status-pendinGapproval[b-seygjen0ub], .status-pendingapproval[b-seygjen0ub] { background: #fef3c7; color: #92400e; }
.status-rejected[b-seygjen0ub] { background: #fee2e2; color: #991b1b; }
.status-active[b-seygjen0ub] { background: #d1fae5; color: #065f46; }
.status-underrepair[b-seygjen0ub] { background: #fef3c7; color: #92400e; }
.status-disposed[b-seygjen0ub] { background: #fee2e2; color: #991b1b; }

.category-badge[b-seygjen0ub] {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 500;
}

/* ── Pagination ───────────────────────────────────────────────── */
.pagination[b-seygjen0ub] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 16px;
    justify-content: flex-end;
}

.page-btn[b-seygjen0ub] {
    padding: 6px 12px;
    border: 1px solid var(--color-border, #e5e7eb);
    background: var(--color-surface, #fff);
    border-radius: 6px;
    cursor: pointer;
    color: var(--color-text-primary, #111827);
    transition: background 0.15s;
}

.page-btn:hover:not(:disabled)[b-seygjen0ub] { background: var(--color-surface-hover, #f3f4f6); }
.page-btn:disabled[b-seygjen0ub] { opacity: 0.4; cursor: not-allowed; }

.page-info[b-seygjen0ub] {
    font-size: 0.875rem;
    color: var(--color-text-secondary, #6b7280);
}

/* ── Icon button ──────────────────────────────────────────────── */
.icon-btn[b-seygjen0ub] {
    padding: 6px 8px;
    border: 1px solid var(--color-border, #e5e7eb);
    background: transparent;
    border-radius: 6px;
    cursor: pointer;
    color: var(--color-text-secondary, #6b7280);
    transition: all 0.15s;
}

.icon-btn:hover[b-seygjen0ub] { background: var(--color-primary-light, #eef2ff); color: var(--color-primary, #6366f1); }

/* ── Modal ────────────────────────────────────────────────────── */
.modal-backdrop[b-seygjen0ub] {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.4);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}

.modal-box[b-seygjen0ub] {
    background: var(--color-surface, #fff);
    border-radius: 16px;
    width: 100%;
    max-width: 560px;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 20px 60px rgba(0,0,0,0.2);
}

.modal-lg[b-seygjen0ub] { max-width: 720px; }

.modal-header[b-seygjen0ub] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px;
    border-bottom: 1px solid var(--color-border, #e5e7eb);
}

.modal-header h3[b-seygjen0ub] {
    margin: 0;
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--color-text-primary, #111827);
}

.modal-close[b-seygjen0ub] {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--color-text-secondary, #6b7280);
    font-size: 1rem;
    padding: 4px 8px;
    border-radius: 6px;
    transition: background 0.15s;
}

.modal-close:hover[b-seygjen0ub] { background: var(--color-surface-secondary, #f3f4f6); }

.modal-body[b-seygjen0ub] { padding: 20px 24px; }

.modal-footer[b-seygjen0ub] {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 16px 24px;
    border-top: 1px solid var(--color-border, #e5e7eb);
}

/* ── Form ─────────────────────────────────────────────────────── */
.form-grid[b-seygjen0ub] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

.form-full[b-seygjen0ub] { grid-column: 1 / -1; }

.form-group[b-seygjen0ub] {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.form-group label[b-seygjen0ub] {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--color-text-secondary, #6b7280);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.form-control[b-seygjen0ub] {
    padding: 9px 12px;
    border: 1px solid var(--color-border, #e5e7eb);
    border-radius: 8px;
    font-size: 0.875rem;
    color: var(--color-text-primary, #111827);
    background: var(--color-surface, #fff);
    outline: none;
    transition: border-color 0.15s;
}

.form-control:focus[b-seygjen0ub] {
    border-color: var(--color-primary, #6366f1);
    box-shadow: 0 0 0 3px var(--color-primary-light, #eef2ff);
}

/* ── Alerts ───────────────────────────────────────────────────── */
.alert-error[b-seygjen0ub] {
    padding: 10px 14px;
    background: #fee2e2;
    color: #991b1b;
    border-radius: 8px;
    font-size: 0.875rem;
}

/* ── Loading ──────────────────────────────────────────────────── */
.loading-container[b-seygjen0ub] {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 12px;
    min-height: 200px;
    color: var(--color-text-secondary, #6b7280);
}

.spinner[b-seygjen0ub] {
    width: 36px;
    height: 36px;
    border: 3px solid var(--color-border, #e5e7eb);
    border-top-color: var(--color-primary, #6366f1);
    border-radius: 50%;
    animation: spin-b-seygjen0ub 0.8s linear infinite;
}

.spinner-sm[b-seygjen0ub] {
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 2px solid rgba(255,255,255,0.4);
    border-top-color: white;
    border-radius: 50%;
    animation: spin-b-seygjen0ub 0.8s linear infinite;
}

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

/* ── Responsive ───────────────────────────────────────────────── */
@media (max-width: 768px) {
    .kpi-grid[b-seygjen0ub] { grid-template-columns: 1fr 1fr; }
    .category-row[b-seygjen0ub] { grid-template-columns: 1fr; }
    .form-grid[b-seygjen0ub] { grid-template-columns: 1fr; }
    .tab-toolbar[b-seygjen0ub] { flex-direction: column; align-items: stretch; }
    .search-group[b-seygjen0ub] { flex-direction: column; }
}

@media (max-width: 480px) {
    .kpi-grid[b-seygjen0ub] { grid-template-columns: 1fr; }
    .expense-tab span[b-seygjen0ub] { display: none; }
    .expense-tab[b-seygjen0ub] { padding: 10px 14px; }
}
/* /Components/Shared/FormModal.razor.rz.scp.css */
.form-modal-body[b-1k5zou8u41] {
    padding: var(--spacing-5) 0 0;
}

.form-modal-form[b-1k5zou8u41] {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-5);
}

.form-modal-footer[b-1k5zou8u41] {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: var(--spacing-3);
    padding: var(--spacing-4) 0 0;
    border-top: 1px solid var(--color-neutral-200);
}

.form-modal-footer button[b-1k5zou8u41] {
    min-height: var(--spacing-10);
}
/* /Components/Shared/GenieWidget.razor.rz.scp.css */
/* ──────────────────────────────────────────────────────────────────────────────
   GenieWidget.razor.css  — Scoped styles for the in-app Genie assistant widget
   Uses design tokens (--color-primary-*) from design-tokens.css
   ────────────────────────────────────────────────────────────────────────────── */

/* ── Floating bubble ──────────────────────────────────────────────────────── */
.genie-wrap[b-6hinq8mrpw] {
    position: fixed;
    bottom: 28px;
    right: 28px;
    width: 56px;
    height: 56px;
    z-index: calc(var(--z-toast, 100) + 1);
}

.genie-wrap[b-6hinq8mrpw]::before,
.genie-wrap[b-6hinq8mrpw]::after {
    content: "";
    position: absolute;
    inset: -8px;
    border-radius: 50%;
    background: rgba(99, 102, 241, 0.18);
    animation: genie-ripple-b-6hinq8mrpw 2.6s ease-out infinite;
    pointer-events: none;
}

.genie-wrap[b-6hinq8mrpw]::after {
    inset: -16px;
    background: rgba(99, 102, 241, 0.08);
    animation-delay: 0.85s;
}

.genie-wrap.open[b-6hinq8mrpw]::before,
.genie-wrap.open[b-6hinq8mrpw]::after {
    animation: none;
    opacity: 0;
}

@keyframes genie-ripple-b-6hinq8mrpw {
    0%   { transform: scale(0.9); opacity: 1; }
    100% { transform: scale(1.6); opacity: 0; }
}

.genie-bubble[b-6hinq8mrpw] {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: linear-gradient(135deg, #6366f1 0%, #3b82f6 50%, #0ea5e9 100%);
    color: #fff;
    font-size: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    cursor: pointer;
    box-shadow: 0 4px 20px rgba(99, 102, 241, 0.55), 0 0 0 0 rgba(99, 102, 241, 0.4);
    transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.2s;
    user-select: none;
    animation: genie-bubble-enter-b-6hinq8mrpw 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards, genie-ai-glow-b-6hinq8mrpw 3s ease-in-out 1s infinite;
}

.genie-bubble:hover[b-6hinq8mrpw] {
    transform: scale(1.12);
    box-shadow: 0 8px 32px rgba(99, 102, 241, 0.65);
}

@keyframes genie-ai-glow-b-6hinq8mrpw {
    0%, 100% { box-shadow: 0 4px 20px rgba(99, 102, 241, 0.55), 0 0 0 0 rgba(99, 102, 241, 0.4); }
    50%       { box-shadow: 0 4px 28px rgba(99, 102, 241, 0.7), 0 0 24px 6px rgba(99, 102, 241, 0.25); }
}

@keyframes genie-bubble-enter-b-6hinq8mrpw {
    from { transform: scale(0.5); opacity: 0; }
    to   { transform: scale(1);   opacity: 1; }
}

/* Unread badge */
.genie-badge[b-6hinq8mrpw] {
    position: absolute;
    top: -3px;
    right: -3px;
    background: #f97316;
    color: #fff;
    font-size: 9px;
    font-weight: 700;
    padding: 2px 5px;
    border-radius: 10px;
    letter-spacing: 0.3px;
    pointer-events: none;
    animation: genie-badge-pop-b-6hinq8mrpw 0.4s 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

@keyframes genie-badge-pop-b-6hinq8mrpw {
    from { transform: scale(0); opacity: 0; }
    to   { transform: scale(1); opacity: 1; }
}

/* ── Slide-in panel ──────────────────────────────────────────────────────── */
.genie-panel[b-6hinq8mrpw] {
    position: fixed;
    bottom: 96px;
    right: 28px;
    width: 360px;
    max-width: calc(100vw - 16px);
    height: 560px;
    max-height: calc(100vh - 120px);
    background: #fff;
    border-radius: 20px;
    box-shadow: 0 12px 48px rgba(0, 0, 0, 0.18);
    z-index: calc(var(--z-toast, 100) + 1);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition: opacity 0.28s cubic-bezier(0.4, 0, 0.2, 1), transform 0.28s cubic-bezier(0.34, 1.56, 0.64, 1);
    opacity: 0;
    transform: translateY(20px) scale(0.95);
    pointer-events: none;
}

.genie-panel.open[b-6hinq8mrpw] {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: all;
}

/* ── Panel header ────────────────────────────────────────────────────────── */
.genie-header[b-6hinq8mrpw] {
    background: linear-gradient(135deg, #4f46e5, #2563eb, #0891b2);
    color: #fff;
    padding: 14px 18px;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

.genie-avatar[b-6hinq8mrpw] {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    border: 2px solid rgba(255, 255, 255, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
    animation: genie-avatar-bob-b-6hinq8mrpw 4s ease-in-out infinite;
}

@keyframes genie-avatar-bob-b-6hinq8mrpw {
    0%, 100% { transform: translateY(0);   }
    50%      { transform: translateY(-3px); }
}

.genie-header-info[b-6hinq8mrpw] { flex: 1; }
.genie-header-name[b-6hinq8mrpw] { font-weight: 700; font-size: 14px; }
.genie-header-sub[b-6hinq8mrpw]  { font-size: 11px; opacity: 0.8; margin-top: 1px; }

.genie-close[b-6hinq8mrpw] {
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.8);
    cursor: pointer;
    font-size: 18px;
    padding: 4px 6px;
    border-radius: 6px;
    line-height: 1;
    transition: all 0.15s;
}

.genie-close:hover[b-6hinq8mrpw] {
    color: #fff;
    background: rgba(255, 255, 255, 0.15);
}

/* ── Messages area ──────────────────────────────────────────────────────── */
.genie-messages[b-6hinq8mrpw] {
    flex: 1;
    overflow-y: auto;
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    scroll-behavior: smooth;
}

.genie-messages[b-6hinq8mrpw]::-webkit-scrollbar { width: 4px; }
.genie-messages[b-6hinq8mrpw]::-webkit-scrollbar-thumb { background: #e2e8f0; border-radius: 4px; }

/* ── Message rows ──────────────────────────────────────────────────────── */
.genie-msg[b-6hinq8mrpw] {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    max-width: 95%;
}

.genie-msg.genie[b-6hinq8mrpw]  { align-self: flex-start; }
.genie-msg.user[b-6hinq8mrpw]   { align-self: flex-end; flex-direction: row-reverse; }

.genie-msg-icon[b-6hinq8mrpw] {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: linear-gradient(135deg, #4f46e5, #2563eb);
    color: #fff;
    font-size: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.user-icon[b-6hinq8mrpw] {
    background: #64748b;
}

.genie-msg-body[b-6hinq8mrpw] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-width: calc(100% - 40px);
}

.genie-msg-bubble[b-6hinq8mrpw] {
    padding: 10px 14px;
    border-radius: 16px;
    font-size: 13.5px;
    line-height: 1.55;
    word-break: break-word;
}

.genie-msg.genie .genie-msg-bubble[b-6hinq8mrpw] {
    background: #f1f5f9;
    color: #1e293b;
    border-bottom-left-radius: 4px;
}

.genie-msg.user .genie-msg-bubble[b-6hinq8mrpw] {
    background: linear-gradient(135deg, var(--color-primary-600, #1E6CE0), var(--color-primary-700, #1554B3));
    color: #fff;
    border-bottom-right-radius: 4px;
}

/* Typing dots */
.genie-typing[b-6hinq8mrpw] {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 12px 16px;
    min-width: 60px;
}

.genie-typing .dot[b-6hinq8mrpw] {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #94a3b8;
    display: inline-block;
    animation: genie-dots-b-6hinq8mrpw 1.4s infinite ease-in-out both;
}

.genie-typing .dot:nth-child(2)[b-6hinq8mrpw] { animation-delay: 0.2s; }
.genie-typing .dot:nth-child(3)[b-6hinq8mrpw] { animation-delay: 0.4s; }

@keyframes genie-dots-b-6hinq8mrpw {
    0%, 80%, 100% { transform: scale(0.7); opacity: 0.4; }
    40%            { transform: scale(1.1); opacity: 1; }
}

/* ── Data card ──────────────────────────────────────────────────────────── */
.genie-data-card[b-6hinq8mrpw] {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    margin-top: 2px;
}

.genie-data-card-title[b-6hinq8mrpw] {
    background: var(--color-primary-50, #EEF6FF);
    color: var(--color-primary-700, #1554B3);
    font-size: 12px;
    font-weight: 700;
    padding: 8px 12px;
    display: flex;
    align-items: center;
    gap: 6px;
    letter-spacing: 0.3px;
    text-transform: uppercase;
}

.genie-data-card-rows[b-6hinq8mrpw] {
    padding: 4px 0;
}

.genie-data-row[b-6hinq8mrpw] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 12px;
    font-size: 13px;
    border-bottom: 1px solid #f8fafc;
}

.genie-data-row:last-child[b-6hinq8mrpw] { border-bottom: none; }

.genie-data-label[b-6hinq8mrpw] {
    color: #64748b;
    font-weight: 500;
}

.genie-data-value[b-6hinq8mrpw] {
    color: #1e293b;
    font-weight: 600;
    text-align: right;
}

/* ── Navigate button ────────────────────────────────────────────────────── */
.genie-nav-btn[b-6hinq8mrpw] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: none;
    border: 1.5px solid var(--color-primary-400, #5AA3FF);
    color: var(--color-primary-600, #1E6CE0);
    font-size: 12px;
    font-weight: 600;
    padding: 5px 12px;
    border-radius: 20px;
    cursor: pointer;
    transition: all 0.15s;
    align-self: flex-start;
    margin-top: 2px;
}

.genie-nav-btn:hover[b-6hinq8mrpw] {
    background: var(--color-primary-600, #1E6CE0);
    color: #fff;
    border-color: var(--color-primary-600, #1E6CE0);
}

/* ── Quick chips ────────────────────────────────────────────────────────── */
.genie-chips[b-6hinq8mrpw] {
    padding: 8px 12px;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    border-top: 1px solid #f1f5f9;
    flex-shrink: 0;
}

.genie-chip[b-6hinq8mrpw] {
    background: var(--color-primary-50, #EEF6FF);
    border: 1px solid var(--color-primary-200, #B7D7FF);
    color: var(--color-primary-700, #1554B3);
    font-size: 11.5px;
    font-weight: 600;
    padding: 5px 10px;
    border-radius: 20px;
    cursor: pointer;
    transition: all 0.15s;
    white-space: nowrap;
}

.genie-chip:hover[b-6hinq8mrpw] {
    background: var(--color-primary-600, #1E6CE0);
    border-color: var(--color-primary-600, #1E6CE0);
    color: #fff;
    transform: translateY(-1px);
}

/* ── Input bar ──────────────────────────────────────────────────────────── */
.genie-input-bar[b-6hinq8mrpw] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    border-top: 1px solid #e9edf3;
    flex-shrink: 0;
    background: #fff;
}

.genie-input[b-6hinq8mrpw] {
    flex: 1;
    border: 1.5px solid #e2e8f0;
    border-radius: 10px;
    padding: 9px 13px;
    font-size: 13.5px;
    color: #1e293b;
    background: #f8fafc;
    outline: none;
    transition: border-color 0.15s;
}

.genie-input:focus[b-6hinq8mrpw] {
    border-color: var(--color-primary-400, #5AA3FF);
    background: #fff;
}

.genie-input:disabled[b-6hinq8mrpw] {
    opacity: 0.6;
}

.genie-send-btn[b-6hinq8mrpw] {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    border: none;
    background: var(--color-primary-600, #1E6CE0);
    color: #fff;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.15s;
    flex-shrink: 0;
}

.genie-send-btn:hover:not(:disabled)[b-6hinq8mrpw] {
    background: var(--color-primary-700, #1554B3);
    transform: scale(1.05);
}

.genie-send-btn:disabled[b-6hinq8mrpw] {
    opacity: 0.4;
    cursor: not-allowed;
}

/* ── Mobile backdrop ──────────────────────────────────────────────────── */
.genie-backdrop[b-6hinq8mrpw] {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.35);
    z-index: var(--z-overlay, 40);
}

/* ── Mobile overrides ───────────────────────────────────────────────────── */
@media (max-width: 480px) {
    .genie-panel[b-6hinq8mrpw] {
        bottom: 0;
        right: 0;
        width: 100vw;
        max-width: 100vw;
        height: 88vh;
        max-height: 88vh;
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
        transform: translateY(100%);
    }

    .genie-panel.open[b-6hinq8mrpw] {
        transform: translateY(0);
    }

    .genie-wrap[b-6hinq8mrpw] {
        bottom: 20px;
        right: 20px;
    }

    .genie-backdrop[b-6hinq8mrpw] {
        display: block;
    }

    .genie-backdrop:not(.open)[b-6hinq8mrpw] {
        display: none;
    }
}
/* /Components/Shared/Inbox/InboxPage.razor.rz.scp.css */
/* ==============================
   InboxPage.razor.css
   Co-located styles for the shared InboxPage component
   ============================== */

.inbox-container[b-y5gajzjahr] {
    max-width: 900px;
    margin: 0 auto;
}

/* ---- Header ---- */
.inbox-header[b-y5gajzjahr] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--spacing-6);
    gap: var(--spacing-4);
    flex-wrap: wrap;
}

.inbox-header-actions[b-y5gajzjahr] {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
}

.inbox-title-block[b-y5gajzjahr] {
    display: flex;
    align-items: center;
    gap: var(--spacing-4);
}

.inbox-icon[b-y5gajzjahr] {
    width: 48px;
    height: 48px;
    background: linear-gradient(135deg, var(--color-primary-600), var(--color-primary-700));
    border-radius: var(--radius-xl);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.25rem;
    flex-shrink: 0;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.inbox-title[b-y5gajzjahr] {
    font-size: var(--font-size-2xl);
    font-weight: 700;
    color: var(--color-text-primary);
    line-height: 1.2;
}

.inbox-subtitle[b-y5gajzjahr] {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    margin: 0;
}

.btn-mark-all[b-y5gajzjahr] {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-2);
    padding: var(--spacing-2) var(--spacing-4);
    border: 1px solid var(--color-primary-300);
    border-radius: var(--radius-lg);
    background: white;
    color: var(--color-primary-700);
    font-size: var(--font-size-sm);
    font-weight: 500;
    cursor: pointer;
    transition: all var(--duration-fast) var(--easing-standard);
    white-space: nowrap;
}

.btn-compose[b-y5gajzjahr] {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-2);
    padding: var(--spacing-2) var(--spacing-4);
    border: 1px solid var(--color-primary-500);
    border-radius: var(--radius-lg);
    background: var(--color-primary-600);
    color: var(--color-neutral-0);
    font-size: var(--font-size-sm);
    font-weight: 600;
    cursor: pointer;
}

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

.btn-mark-all:hover[b-y5gajzjahr] {
    background: var(--color-primary-50);
    border-color: var(--color-primary-500);
}

.btn-mark-all:disabled[b-y5gajzjahr] {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ---- Filter Tabs ---- */
.inbox-tabs[b-y5gajzjahr] {
    display: flex;
    gap: var(--spacing-1);
    border-bottom: 2px solid var(--color-neutral-200);
    margin-bottom: var(--spacing-4);
    overflow-x: auto;
    scrollbar-width: none;
}

.inbox-tabs[b-y5gajzjahr]::-webkit-scrollbar {
    display: none;
}

.tab-btn[b-y5gajzjahr] {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    gap: var(--spacing-2);
    padding: var(--spacing-3) var(--spacing-4);
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
    font-weight: 500;
    cursor: pointer;
    transition: all var(--duration-fast) var(--easing-standard);
    white-space: nowrap;
}

.tab-btn:hover[b-y5gajzjahr] {
    color: var(--color-primary-700);
}

.tab-btn.active[b-y5gajzjahr] {
    color: var(--color-primary-700);
    border-bottom-color: var(--color-primary-600);
}

.tab-badge[b-y5gajzjahr] {
    background: var(--color-primary-100);
    color: var(--color-primary-700);
    border-radius: 99px;
    padding: 1px 7px;
    font-size: 0.7rem;
    font-weight: 600;
    line-height: 1.4;
}

/* ---- Loading ---- */
.inbox-loading[b-y5gajzjahr] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-4);
    padding: var(--spacing-12) 0;
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
}

.loading-spinner[b-y5gajzjahr] {
    width: 36px;
    height: 36px;
    border: 3px solid var(--color-neutral-200);
    border-top-color: var(--color-primary-600);
    border-radius: 50%;
    animation: spin-b-y5gajzjahr 0.7s linear infinite;
}

.loading-spinner.sm[b-y5gajzjahr] {
    width: 20px;
    height: 20px;
    border-width: 2px;
}

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

/* ---- Empty State ---- */
.inbox-empty[b-y5gajzjahr] {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: var(--spacing-16) var(--spacing-4);
    text-align: center;
}

.empty-icon[b-y5gajzjahr] {
    width: 72px;
    height: 72px;
    background: var(--color-neutral-100);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.75rem;
    color: var(--color-neutral-400);
    margin-bottom: var(--spacing-4);
}

.empty-title[b-y5gajzjahr] {
    font-size: var(--font-size-lg);
    font-weight: 600;
    color: var(--color-text-primary);
    margin-bottom: var(--spacing-2);
}

.empty-text[b-y5gajzjahr] {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    max-width: 320px;
}

/* ---- Message List ---- */
.message-list[b-y5gajzjahr] {
    display: flex;
    flex-direction: column;
    gap: 1px;
    background: var(--color-neutral-200);
    border: 1px solid var(--color-neutral-200);
    border-radius: var(--radius-xl);
    overflow: hidden;
}

.message-row[b-y5gajzjahr] {
    background: white;
    cursor: pointer;
    transition: background var(--duration-fast) var(--easing-standard);
}

.message-row:hover[b-y5gajzjahr] {
    background: var(--color-neutral-50);
}

.message-row.unread[b-y5gajzjahr] {
    background: var(--color-primary-50);
}

.message-row.unread:hover[b-y5gajzjahr] {
    background: var(--color-primary-100);
}

.message-row.expanded[b-y5gajzjahr] {
    background: white;
}

.message-row-main[b-y5gajzjahr] {
    display: grid;
    grid-template-columns: 16px auto 1fr auto auto;
    align-items: center;
    gap: var(--spacing-3);
    padding: var(--spacing-4) var(--spacing-5);
}

.sent-row-main[b-y5gajzjahr] {
    grid-template-columns: auto 1fr auto;
}

/* Unread dot column */
.unread-dot-col[b-y5gajzjahr] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 16px;
}

.unread-dot[b-y5gajzjahr] {
    width: 8px;
    height: 8px;
    background: var(--color-primary-600);
    border-radius: 50%;
    display: block;
    flex-shrink: 0;
}

/* Type badge */
.msg-type-badge[b-y5gajzjahr] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 10px;
    border-radius: 99px;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    white-space: nowrap;
    flex-shrink: 0;
}

.badge-exam[b-y5gajzjahr]    { background: var(--color-primary-100);  color: var(--color-primary-700);  }
.badge-result[b-y5gajzjahr]  { background: #d1fae5;                   color: #065f46;                   }
.badge-fee[b-y5gajzjahr]     { background: #fef3c7;                   color: #92400e;                   }
.badge-warning[b-y5gajzjahr] { background: #fee2e2;                   color: #991b1b;                   }
.badge-announce[b-y5gajzjahr]{ background: #ede9fe;                   color: #5b21b6;                   }
.badge-default[b-y5gajzjahr] { background: var(--color-neutral-100);  color: var(--color-neutral-600);  }

/* Subject column */
.msg-subject-col[b-y5gajzjahr] {
    min-width: 0;
    overflow: hidden;
}

.msg-subject[b-y5gajzjahr] {
    display: block;
    font-size: var(--font-size-sm);
    font-weight: 500;
    color: var(--color-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.message-row.unread .msg-subject[b-y5gajzjahr] {
    font-weight: 600;
}

.msg-exam-ref[b-y5gajzjahr] {
    display: block;
    font-size: 0.7rem;
    color: var(--color-text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Date */
.msg-date[b-y5gajzjahr] {
    font-size: 0.75rem;
    color: var(--color-text-secondary);
    white-space: nowrap;
    flex-shrink: 0;
}

/* Actions */
.msg-actions[b-y5gajzjahr] {
    display: flex;
    align-items: center;
    gap: var(--spacing-1);
    flex-shrink: 0;
}

.action-btn[b-y5gajzjahr] {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-md);
    background: transparent;
    border: none;
    cursor: pointer;
    font-size: 0.75rem;
    transition: all var(--duration-fast) var(--easing-standard);
    opacity: 0;
}

.message-row:hover .action-btn[b-y5gajzjahr] {
    opacity: 1;
}

.delete-btn[b-y5gajzjahr] {
    color: var(--color-neutral-500);
}

.delete-btn:hover[b-y5gajzjahr] {
    background: #fee2e2;
    color: #dc2626;
}

/* ---- Expanded Detail ---- */
.message-detail[b-y5gajzjahr] {
    padding: var(--spacing-4) var(--spacing-5) var(--spacing-5);
    border-top: 1px solid var(--color-neutral-100);
    background: white;
}

.message-body-section[b-y5gajzjahr] {
    padding: var(--spacing-4);
    background: var(--color-neutral-0);
    border-bottom: 1px solid var(--color-neutral-200);
}

.message-body-content[b-y5gajzjahr] {
    font-size: var(--font-size-sm);
    line-height: 1.6;
    color: var(--color-text-primary);
    word-wrap: break-word;
    white-space: pre-wrap;
}

.sent-status-header[b-y5gajzjahr] {
    padding: var(--spacing-3) var(--spacing-4);
    font-size: var(--font-size-xs);
    font-weight: 600;
    color: var(--color-text-secondary);
    text-transform: uppercase;
    background: var(--color-neutral-50);
    border-bottom: 1px solid var(--color-neutral-200);
}

.sent-status-header h4[b-y5gajzjahr] {
    margin: 0;
    font-weight: 600;
}

.sent-status-grid[b-y5gajzjahr] {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-2);
}

.sent-status-item[b-y5gajzjahr] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border: 1px solid var(--color-neutral-200);
    border-radius: var(--radius-lg);
    padding: var(--spacing-3);
    background: var(--color-neutral-0);
}

.sent-status-name[b-y5gajzjahr] {
    font-weight: 600;
    color: var(--color-text-primary);
}

.sent-status-role[b-y5gajzjahr] {
    font-size: var(--font-size-xs);
    color: var(--color-text-secondary);
}

.sent-status-state[b-y5gajzjahr] {
    font-size: var(--font-size-xs);
    font-weight: 600;
}

.sent-status-state.read[b-y5gajzjahr] {
    color: var(--color-success-700);
}

.sent-status-state.unread[b-y5gajzjahr] {
    color: var(--color-warning-700);
}

.compose-overlay[b-y5gajzjahr] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.35);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2000;
    padding: var(--spacing-4);
}

.compose-modal[b-y5gajzjahr] {
    width: min(960px, 100%);
    max-height: 90vh;
    overflow: hidden;
    background: var(--color-neutral-0);
    border-radius: var(--radius-xl);
    border: 1px solid var(--color-neutral-200);
    display: flex;
    flex-direction: column;
}

.compose-header[b-y5gajzjahr] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--spacing-4) var(--spacing-5);
    border-bottom: 1px solid var(--color-neutral-200);
}

.compose-form[b-y5gajzjahr] {
    overflow-y: auto;
    padding: var(--spacing-4) var(--spacing-5);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-4);
}

.compose-row[b-y5gajzjahr] {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-2);
}

.compose-row label[b-y5gajzjahr] {
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--color-text-primary);
}

.compose-note[b-y5gajzjahr] {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    border: 1px solid var(--color-neutral-200);
    border-radius: var(--radius-md);
    background: var(--color-neutral-50);
    padding: var(--spacing-2) var(--spacing-3);
}

.compose-select[b-y5gajzjahr],
.compose-input[b-y5gajzjahr] {
    width: 100%;
    border: 1px solid var(--color-neutral-300);
    border-radius: var(--radius-md);
    padding: var(--spacing-2) var(--spacing-3);
    font-size: var(--font-size-sm);
}

.recipient-actions[b-y5gajzjahr] {
    display: flex;
    gap: var(--spacing-2);
}

.btn-inline[b-y5gajzjahr] {
    border: 1px solid var(--color-neutral-300);
    background: var(--color-neutral-0);
    border-radius: var(--radius-md);
    padding: var(--spacing-1) var(--spacing-3);
    font-size: var(--font-size-xs);
    color: var(--color-text-secondary);
    cursor: pointer;
}

.recipient-list[b-y5gajzjahr] {
    max-height: 220px;
    overflow-y: auto;
    border: 1px solid var(--color-neutral-200);
    border-radius: var(--radius-md);
    padding: var(--spacing-2);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-1);
}

.recipient-item[b-y5gajzjahr] {
    display: grid;
    grid-template-columns: 18px 1fr;
    align-items: center;
    column-gap: var(--spacing-2);
    row-gap: 2px;
    padding: var(--spacing-2);
    border-radius: var(--radius-md);
}

.recipient-item small[b-y5gajzjahr] {
    grid-column: 2;
    color: var(--color-text-secondary);
    font-size: var(--font-size-xs);
}

.parent-role-group[b-y5gajzjahr] {
    margin-bottom: var(--spacing-3);
}

.parent-role-group:last-child[b-y5gajzjahr] {
    margin-bottom: 0;
}

.parent-role-header[b-y5gajzjahr] {
    font-size: var(--font-size-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-text-secondary);
    padding: 0 var(--spacing-1) var(--spacing-1);
}

.parent-role-group .recipient-list[b-y5gajzjahr] {
    max-height: 150px;
    border: none;
    padding: 0;
}

.compose-footer[b-y5gajzjahr] {
    display: flex;
    justify-content: flex-end;
    gap: var(--spacing-2);
    padding: var(--spacing-3) var(--spacing-5);
    border-top: 1px solid var(--color-neutral-200);
}

.detail-loading[b-y5gajzjahr] {
    display: flex;
    justify-content: center;
    padding: var(--spacing-4);
}

.detail-body[b-y5gajzjahr] {
    font-size: var(--font-size-sm);
    color: var(--color-text-primary);
    line-height: 1.7;
    margin-bottom: var(--spacing-4);
    white-space: pre-wrap;
}

/* Exam info card */
.exam-info-card[b-y5gajzjahr] {
    background: var(--color-primary-50);
    border: 1px solid var(--color-primary-100);
    border-radius: var(--radius-lg);
    padding: var(--spacing-4);
}

.exam-info-title[b-y5gajzjahr] {
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--color-primary-800);
    margin-bottom: var(--spacing-3);
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
}

.exam-info-grid[b-y5gajzjahr] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: var(--spacing-3);
    margin-bottom: var(--spacing-3);
}

.exam-info-item[b-y5gajzjahr] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.ei-label[b-y5gajzjahr] {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-primary-600);
    font-weight: 600;
}

.ei-value[b-y5gajzjahr] {
    font-size: var(--font-size-sm);
    color: var(--color-text-primary);
    font-weight: 500;
}

.btn-action-link[b-y5gajzjahr] {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-2);
    font-size: var(--font-size-sm);
    color: var(--color-primary-700);
    font-weight: 500;
    text-decoration: none;
    transition: color var(--duration-fast);
}

.btn-action-link:hover[b-y5gajzjahr] {
    color: var(--color-primary-900);
}

/* ---- Pagination ---- */
.inbox-pagination[b-y5gajzjahr] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-4);
    padding: var(--spacing-6) 0 var(--spacing-2);
}

.page-btn[b-y5gajzjahr] {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--color-neutral-300);
    border-radius: var(--radius-md);
    background: white;
    color: var(--color-text-primary);
    cursor: pointer;
    transition: all var(--duration-fast) var(--easing-standard);
    font-size: var(--font-size-sm);
}

.page-btn:hover:not(:disabled)[b-y5gajzjahr] {
    border-color: var(--color-primary-400);
    color: var(--color-primary-700);
    background: var(--color-primary-50);
}

.page-btn:disabled[b-y5gajzjahr] {
    opacity: 0.4;
    cursor: not-allowed;
}

.page-info[b-y5gajzjahr] {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
}

/* ---- Responsive ---- */
@media (max-width: 640px) {
    .inbox-header[b-y5gajzjahr] {
        flex-direction: column;
        align-items: flex-start;
    }

    .message-row-main[b-y5gajzjahr] {
        grid-template-columns: 12px auto 1fr auto;
        gap: var(--spacing-2);
        padding: var(--spacing-3) var(--spacing-4);
    }

    /* hide actions column on mobile — actions appear on expand */
    .msg-actions[b-y5gajzjahr] {
        display: none;
    }

    .msg-type-badge[b-y5gajzjahr] {
        font-size: 0.65rem;
        padding: 1px 7px;
    }
}
/* /Components/Shared/LimitedRoleLayout.razor.rz.scp.css */
.limited-role-loading[b-umqavexomo] {
    align-items: center;
    background: var(--color-neutral-50);
    display: flex;
    justify-content: center;
    min-height: 100vh;
}

.limited-role-layout[b-umqavexomo] {
    background: var(--color-neutral-50);
    color: var(--color-text-primary);
    min-height: 100vh;
}

.limited-role-header[b-umqavexomo] {
    align-items: center;
    background: var(--color-white);
    border-bottom: 1px solid var(--color-neutral-200);
    display: grid;
    gap: var(--spacing-4);
    grid-template-columns: auto 1fr auto;
    padding: var(--spacing-3) var(--spacing-5);
}

.limited-role-brand[b-umqavexomo],
.limited-role-nav a[b-umqavexomo] {
    align-items: center;
    color: var(--color-text-primary);
    display: inline-flex;
    text-decoration: none;
}

.limited-role-brand[b-umqavexomo] {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-bold);
    gap: var(--spacing-2);
}

.limited-role-brand-icon[b-umqavexomo] {
    align-items: center;
    background: var(--color-primary-50);
    border-radius: var(--radius-md);
    color: var(--color-primary-600);
    display: inline-flex;
    height: 2.5rem;
    justify-content: center;
    width: 2.5rem;
}

.limited-role-identity[b-umqavexomo] {
    align-items: flex-start;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.limited-role-name[b-umqavexomo] {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.limited-role-badge[b-umqavexomo] {
    color: var(--color-text-secondary);
    font-size: var(--font-size-xs);
}

.limited-role-nav[b-umqavexomo] {
    align-items: center;
    display: flex;
    gap: var(--spacing-1);
}

.limited-role-nav a[b-umqavexomo] {
    border-radius: var(--radius-md);
    gap: var(--spacing-2);
    min-height: 2.75rem;
    padding: var(--spacing-2) var(--spacing-3);
}

.limited-role-nav a:hover[b-umqavexomo],
.limited-role-nav a:focus-visible[b-umqavexomo] {
    background: var(--color-primary-50);
    color: var(--color-primary-700);
}

.limited-role-main[b-umqavexomo] {
    margin: 0 auto;
    max-width: 72rem;
    padding: var(--spacing-8) var(--spacing-5);
}

@media (max-width: 767px) {
    .limited-role-header[b-umqavexomo] {
        grid-template-columns: auto 1fr;
        padding: var(--spacing-3);
    }

    .limited-role-identity[b-umqavexomo] {
        align-items: flex-end;
    }

    .limited-role-nav[b-umqavexomo] {
        border-top: 1px solid var(--color-neutral-200);
        grid-column: 1 / -1;
        justify-content: space-between;
        padding-top: var(--spacing-2);
    }

    .limited-role-nav a[b-umqavexomo] {
        flex-direction: column;
        font-size: var(--font-size-xs);
        gap: var(--spacing-1);
        padding: var(--spacing-2);
    }

    .limited-role-main[b-umqavexomo] {
        padding: var(--spacing-6) var(--spacing-3);
    }
}
/* /Components/Shared/MathTextField.razor.rz.scp.css */
/* ══════════════════════════════════════════════════════════════════
   MathTextField.razor.css — Scoped styles for the MathTextField
   component. Uses CSS isolation (auto-scoped by Blazor).
   Design tokens from design-tokens.css are used throughout.
   ══════════════════════════════════════════════════════════════════ */

/* ── Root ───────────────────────────────────────────────────────── */
.mtf-root[b-pj00jedump] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    width: 100%;
}

.mtf-root.mtf-disabled[b-pj00jedump] {
    opacity: 0.55;
    pointer-events: none;
}

/* ── Label ──────────────────────────────────────────────────────── */
.mtf-label[b-pj00jedump] {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-text-primary, #111827);
    margin-bottom: 2px;
}

/* ── Field wrapper (toolbar + textarea + preview) ───────────────── */
.mtf-field-wrapper[b-pj00jedump] {
    display: flex;
    flex-direction: column;
    border: 1.5px solid var(--color-border, #d1d5db);
    border-radius: 8px;
    overflow: hidden;
    transition: border-color 0.15s, box-shadow 0.15s;
    background: var(--color-surface, #ffffff);
}

.mtf-field-wrapper:focus-within[b-pj00jedump] {
    border-color: var(--color-primary, #4f46e5);
    box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.15);
}

/* ── Toolbar ────────────────────────────────────────────────────── */
.mtf-toolbar[b-pj00jedump] {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 6px 8px;
    background: var(--color-surface-secondary, #f9fafb);
    border-bottom: 1px solid var(--color-border, #e5e7eb);
    flex-wrap: wrap;
}

.mtf-toolbar-group[b-pj00jedump] {
    display: flex;
    align-items: center;
    gap: 2px;
}

.mtf-toolbar-divider[b-pj00jedump] {
    width: 1px;
    height: 20px;
    background: var(--color-border, #d1d5db);
    margin: 0 4px;
    flex-shrink: 0;
}

/* ── Toolbar Buttons ────────────────────────────────────────────── */
.mtf-btn[b-pj00jedump] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    border: 1px solid transparent;
    border-radius: 5px;
    background: transparent;
    cursor: pointer;
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--color-text-secondary, #374151);
    padding: 3px 7px;
    line-height: 1;
    transition: background 0.12s, border-color 0.12s, color 0.12s;
    white-space: nowrap;
    user-select: none;
}

.mtf-btn:hover:not(:disabled)[b-pj00jedump] {
    background: var(--color-surface-hover, #e5e7eb);
    color: var(--color-text-primary, #111827);
    border-color: var(--color-border, #d1d5db);
}

.mtf-btn:active:not(:disabled)[b-pj00jedump] {
    background: var(--color-surface-active, #d1d5db);
}

.mtf-btn:disabled[b-pj00jedump] {
    opacity: 0.45;
    cursor: not-allowed;
}

/* Format buttons (B, I, U) */
.mtf-btn-format[b-pj00jedump] {
    min-width: 26px;
}

/* Math shortcut buttons (x², x₂, √) */
.mtf-btn-math[b-pj00jedump] {
    font-size: 0.85rem;
    min-width: 30px;
}

/* Sigma / Formula button */
.mtf-btn-sigma[b-pj00jedump] {
    background: var(--color-primary-light, #eef2ff);
    color: var(--color-primary, #4f46e5);
    border-color: var(--color-primary-border, #c7d2fe);
    padding: 3px 10px;
    font-weight: 600;
}

.mtf-btn-sigma:hover:not(:disabled)[b-pj00jedump] {
    background: var(--color-primary, #4f46e5);
    color: #ffffff;
    border-color: var(--color-primary, #4f46e5);
}

/* ── Textarea ───────────────────────────────────────────────────── */
.mtf-textarea[b-pj00jedump] {
    width: 100%;
    border: none;
    outline: none;
    resize: vertical;
    padding: 10px 12px;
    font-size: 0.9rem;
    line-height: 1.6;
    color: var(--color-text-primary, #111827);
    background: var(--color-surface, #ffffff);
    font-family: inherit;
    box-sizing: border-box;
    min-height: 36px;
}

.mtf-textarea:disabled[b-pj00jedump] {
    background: var(--color-surface-secondary, #f9fafb);
    cursor: not-allowed;
}

/* ── Live Preview ───────────────────────────────────────────────── */
.mtf-preview-strip[b-pj00jedump] {
    border-top: 1px dashed var(--color-border, #e5e7eb);
    padding: 8px 12px;
    background: var(--color-surface-secondary, #fafafa);
}

.mtf-preview-label[b-pj00jedump] {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-text-muted, #9ca3af);
    display: block;
    margin-bottom: 4px;
}

.mtf-preview-content[b-pj00jedump] {
    font-size: 0.95rem;
    line-height: 1.7;
    color: var(--color-text-primary, #111827);
}

/* ── Responsive ─────────────────────────────────────────────────── */

/* Tablet — compact toolbar */
@media (max-width: 768px) {
    .mtf-toolbar[b-pj00jedump] {
        gap: 3px;
        padding: 5px 6px;
    }

    .mtf-btn[b-pj00jedump] {
        padding: 3px 6px;
        font-size: 0.78rem;
    }
}

/* Phone — hide text formatting buttons, keep math buttons */
@media (max-width: 480px) {
    .mtf-format-group[b-pj00jedump] {
        display: none;
    }

    .mtf-toolbar-divider[b-pj00jedump] {
        display: none;
    }

    .mtf-btn-sigma[b-pj00jedump] {
        padding: 3px 8px;
    }
}
/* /Components/Shared/Pagination.razor.rz.scp.css */
.pagination[b-2zvpqlhssn] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-2);
}

.pagination-btn[b-2zvpqlhssn] {
    display: inline-flex;
    min-width: var(--spacing-10);
    min-height: var(--spacing-10);
    align-items: center;
    justify-content: center;
    border: 1px solid var(--color-neutral-300);
    border-radius: var(--radius-sm);
    background: var(--color-neutral-0);
    color: var(--color-neutral-700);
    font-weight: var(--font-weight-medium);
}

.pagination-btn:hover:not(:disabled)[b-2zvpqlhssn],
.pagination-btn--active[b-2zvpqlhssn] {
    border-color: var(--color-primary-600);
    background: var(--color-primary-50);
    color: var(--color-primary-700);
}

.pagination-btn:disabled[b-2zvpqlhssn] {
    cursor: not-allowed;
    opacity: 0.5;
}

.pagination-ellipsis[b-2zvpqlhssn] {
    padding: 0 var(--spacing-2);
    color: var(--color-neutral-500);
}
/* /Components/Shared/QuestionBankCard.razor.rz.scp.css */
/* ── QuestionBankCard — question bank preview card ───────────────────── */

.qbc-card[b-twg8b0zskf] {
    background: #fff;
    border: 1px solid var(--color-border, #e5e7eb);
    border-radius: 12px;
    padding: 20px 24px;
    margin-bottom: 16px;
    transition: box-shadow 0.15s ease;
}

.qbc-card:hover[b-twg8b0zskf] {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
}

/* ── Header ──────────────────────────────────────────────────────────── */

.qbc-header[b-twg8b0zskf] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

.qbc-header-left[b-twg8b0zskf] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.qbc-header-right[b-twg8b0zskf] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

.qbc-num[b-twg8b0zskf] {
    font-weight: 800;
    font-size: 1rem;
    color: #111827;
    flex-shrink: 0;
    line-height: 1.4;
}

/* ── Badges ──────────────────────────────────────────────────────────── */

.qbc-badge[b-twg8b0zskf] {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    white-space: nowrap;
}

.qbc-type[b-twg8b0zskf]     { background: #dbeafe; color: #1e40af; }
.qbc-marks[b-twg8b0zskf]    { background: #fef9c3; color: #92400e; }
.qbc-topic[b-twg8b0zskf]    { background: #f3e8ff; color: #6b21a8; font-size: 0.7rem; }

.qbc-diff-easy[b-twg8b0zskf]   { background: #dcfce7; color: #166534; }
.qbc-diff-medium[b-twg8b0zskf] { background: #fef9c3; color: #92400e; }
.qbc-diff-hard[b-twg8b0zskf]   { background: #fee2e2; color: #991b1b; }

.qbc-review-approved[b-twg8b0zskf] { background: #dcfce7; color: #166534; }
.qbc-review-pending[b-twg8b0zskf]  { background: #fef9c3; color: #92400e; }
.qbc-review-rejected[b-twg8b0zskf] { background: #fee2e2; color: #991b1b; }

/* ── Stars ───────────────────────────────────────────────────────────── */

.qbc-stars[b-twg8b0zskf] {
    display: flex;
    align-items: center;
    gap: 2px;
}

.qbc-star[b-twg8b0zskf] {
    background: none;
    border: none;
    cursor: pointer;
    padding: 2px;
    font-size: 0.9rem;
    transition: transform 0.1s ease;
    line-height: 1;
}

.qbc-star:hover[b-twg8b0zskf] { transform: scale(1.2); }
.qbc-star-on[b-twg8b0zskf]  { color: #f59e0b; }
.qbc-star-off[b-twg8b0zskf] { color: #d1d5db; }

/* ── Bookmark ────────────────────────────────────────────────────────── */

.qbc-bm[b-twg8b0zskf] {
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px 6px;
    border-radius: 6px;
    font-size: 1rem;
    color: #9ca3af;
    transition: color 0.15s ease, background 0.15s ease;
}

.qbc-bm:hover[b-twg8b0zskf]    { background: #f3f4f6; color: #374151; }
.qbc-bm-on[b-twg8b0zskf]       { color: #2563eb; }
.qbc-bm-on:hover[b-twg8b0zskf] { color: #1d4ed8; }

/* ── Diagram ─────────────────────────────────────────────────────────── */

.qbc-diagram[b-twg8b0zskf] {
    background: #f9fafb;
    border-radius: 8px;
    padding: 12px;
    margin-bottom: 12px;
    text-align: center;
}

.qbc-diagram img[b-twg8b0zskf] {
    max-width: 100%;
    height: auto;
    border-radius: 6px;
    border: 1px solid #e5e7eb;
}

.qbc-diagram-caption[b-twg8b0zskf] {
    font-size: 0.8rem;
    color: #6b7280;
    margin-top: 6px;
    font-style: italic;
}

/* ── Fallback renderer (unknown type) ───────────────────────────────── */

.qbc-fallback[b-twg8b0zskf] {
    font-size: 0.95rem;
    color: #1f2937;
    line-height: 1.7;
}

.qbc-fallback-answer[b-twg8b0zskf] {
    margin-top: 12px;
    padding: 12px 16px;
    background: #f0fdf4;
    border-left: 4px solid #16a34a;
    border-radius: 0 8px 8px 0;
    font-size: 0.9rem;
}

.qbc-answer-label[b-twg8b0zskf] {
    font-weight: 700;
    color: #166534;
    margin-right: 6px;
}

.qbc-explanation[b-twg8b0zskf] {
    margin-top: 12px;
    padding: 12px 16px;
    background: var(--color-primary-50);
    border-inline-start: 4px solid var(--color-primary);
    border-radius: 0 8px 8px 0;
}

.qbc-explanation-label[b-twg8b0zskf] {
    display: block;
    margin-bottom: 6px;
    color: var(--color-primary-700);
    font-size: 0.8rem;
    font-weight: 700;
}

/* ── Metadata section ───────────────────────────────────────────────── */

.qbc-meta[b-twg8b0zskf] {
    margin-top: 14px;
    padding: 12px 14px;
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.qbc-meta-row[b-twg8b0zskf] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    font-size: 0.8rem;
    color: #374151;
}

.qbc-meta-label[b-twg8b0zskf] {
    flex: 0 0 120px;
    font-weight: 600;
    color: #6b7280;
    white-space: nowrap;
}

.qbc-hash[b-twg8b0zskf] {
    font-family: monospace;
    font-size: 0.75rem;
    color: #6b7280;
    word-break: break-all;
}
/* /Components/Shared/QuotaBar.razor.rz.scp.css */
.quota-bar[b-w413k5afif] {
    margin-bottom: var(--space-3);
}

.quota-bar__head[b-w413k5afif] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: var(--text-sm);
    margin-bottom: var(--space-1);
}

.quota-bar__label[b-w413k5afif] {
    font-weight: 600;
    color: var(--color-neutral-800);
}

.quota-bar__label i[b-w413k5afif] {
    margin-right: var(--space-1);
    color: var(--color-primary-500);
}

.quota-bar__count[b-w413k5afif] {
    color: var(--color-neutral-600);
}

.quota-bar__unlimited[b-w413k5afif] {
    color: var(--color-success-600);
    font-style: italic;
    margin-left: var(--space-1);
}

.quota-bar__track[b-w413k5afif] {
    height: 10px;
    background: var(--color-neutral-200);
    border-radius: var(--radius-full);
    overflow: hidden;
}

.quota-bar__track--unlimited[b-w413k5afif] {
    background: repeating-linear-gradient(45deg, var(--color-neutral-100), var(--color-neutral-100) 6px, var(--color-neutral-200) 6px, var(--color-neutral-200) 12px);
}

.quota-bar__fill[b-w413k5afif] {
    height: 100%;
    background: var(--color-primary-500);
    transition: width 0.3s ease;
}

.quota-bar--near .quota-bar__fill[b-w413k5afif] {
    background: var(--color-warning-500);
}

.quota-bar--full .quota-bar__fill[b-w413k5afif] {
    background: var(--color-danger-500);
}

.quota-bar--full .quota-bar__count[b-w413k5afif] {
    color: var(--color-danger-700);
    font-weight: 600;
}
/* /Components/Shared/RichTextEditor.razor.rz.scp.css */
.rte-wrapper .ql-toolbar[b-df0uxuxznt] {
    border-radius: 0.5rem 0.5rem 0 0;
    border-color: #e5e7eb;
    background: #f9fafb;
    font-family: 'Inter', sans-serif;
}

.rte-wrapper .ql-container[b-df0uxuxznt] {
    border-radius: 0 0 0.5rem 0.5rem;
    border-color: #e5e7eb;
    font-family: 'Inter', sans-serif;
    font-size: 0.9375rem;
}

.rte-wrapper .ql-editor[b-df0uxuxznt] {
    padding: 1rem;
    line-height: 1.6;
}

.rte-wrapper:focus-within .ql-toolbar[b-df0uxuxznt],
.rte-wrapper:focus-within .ql-container[b-df0uxuxznt] {
    border-color: var(--color-primary, #6366f1);
}

/* Read-only: hide toolbar */
.rte-readonly .ql-toolbar[b-df0uxuxznt] {
    display: none;
}

.rte-readonly .ql-container[b-df0uxuxznt] {
    border-radius: 0.5rem;
    border-color: #e5e7eb;
    background: #f9fafb;
}
/* /Components/Shared/SplashPopup.razor.rz.scp.css */
.splash-overlay[b-btcghzlg61] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    animation: splashFadeIn-b-btcghzlg61 0.25s ease;
}

@keyframes splashFadeIn-b-btcghzlg61 {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.splash-card[b-btcghzlg61] {
    position: relative;
    width: 100%;
    max-width: 440px;
    border-radius: 1.25rem;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    animation: splashSlideUp-b-btcghzlg61 0.3s ease;
}

.splash-default-bg[b-btcghzlg61] {
    background: linear-gradient(135deg, var(--color-primary-600, #4f46e5), var(--color-primary-800, #3730a3));
}

@keyframes splashSlideUp-b-btcghzlg61 {
    from { transform: translateY(24px); opacity: 0; }
    to   { transform: translateY(0);    opacity: 1; }
}

.splash-close[b-btcghzlg61] {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    color: #fff;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.875rem;
    transition: background 0.15s;
    z-index: 10;
}

.splash-close:hover[b-btcghzlg61] {
    background: rgba(255, 255, 255, 0.35);
}

.splash-image-wrap[b-btcghzlg61] {
    width: 100%;
    max-height: 220px;
    overflow: hidden;
}

.splash-image[b-btcghzlg61] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.splash-icon-wrap[b-btcghzlg61] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem 1.5rem 0.5rem;
}

.splash-icon[b-btcghzlg61] {
    font-size: 3.5rem;
    color: rgba(255, 255, 255, 0.9);
}

.splash-body[b-btcghzlg61] {
    padding: 1.5rem 1.75rem 1rem;
    text-align: center;
}

.splash-title[b-btcghzlg61] {
    font-size: 1.5rem;
    font-weight: 700;
    color: #fff;
    margin: 0 0 0.5rem;
    line-height: 1.3;
}

.splash-message[b-btcghzlg61] {
    font-size: 0.9375rem;
    color: rgba(255, 255, 255, 0.88);
    line-height: 1.6;
    margin: 0;
}

.splash-actions[b-btcghzlg61] {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
    padding: 0 1.75rem 1.5rem;
}

.splash-btn-primary[b-btcghzlg61] {
    display: block;
    text-align: center;
    padding: 0.75rem 1.5rem;
    background: rgba(255, 255, 255, 0.95);
    color: var(--color-primary-700, #4338ca);
    border-radius: 0.75rem;
    font-weight: 600;
    font-size: 0.9375rem;
    text-decoration: none;
    transition: background 0.15s;
}

.splash-btn-primary:hover[b-btcghzlg61] {
    background: #fff;
}

.splash-btn-secondary[b-btcghzlg61] {
    display: block;
    text-align: center;
    padding: 0.625rem 1.5rem;
    background: rgba(255, 255, 255, 0.15);
    color: rgba(255, 255, 255, 0.9);
    border-radius: 0.75rem;
    font-size: 0.875rem;
    text-decoration: none;
    transition: background 0.15s;
}

.splash-btn-secondary:hover[b-btcghzlg61] {
    background: rgba(255, 255, 255, 0.25);
}

.splash-countdown[b-btcghzlg61] {
    text-align: center;
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.6);
    padding-bottom: 1rem;
    margin: 0;
}
/* /Components/Shared/TimetableScheduler.razor.rz.scp.css */
/* ============================================================
   Timetable Scheduler — Index.razor.css
   Tokens from design-tokens.css  |  Mobile-first
   ============================================================ */

/* ---- Page Header ----------------------------------------- */
.tt-page-header[b-oy58j19pnn] {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-3, 8px);
    padding: var(--spacing-5, 16px);
    background: var(--color-white, #fff);
    border-bottom: 1px solid var(--color-neutral-200, #e5e7eb);
}

.tt-title[b-oy58j19pnn] {
    display: flex;
    align-items: center;
    gap: var(--spacing-2, 4px);
    font-size: var(--font-size-xl, 20px);
    font-weight: 700;
    color: var(--color-neutral-900, #111827);
    margin: 0;
}

.tt-title i[b-oy58j19pnn] { color: var(--color-primary-600, #3D8275); }

.tt-subtitle[b-oy58j19pnn] {
    font-size: var(--font-size-sm, 14px);
    color: var(--color-neutral-500, #6b7280);
    margin: var(--spacing-1, 2px) 0 0;
}

.tt-header-actions[b-oy58j19pnn] {
    display: flex;
    gap: var(--spacing-2, 4px);
    flex-wrap: wrap;
}

@media (min-width: 768px) {
    .tt-page-header[b-oy58j19pnn] {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        padding: var(--spacing-5, 16px) var(--spacing-7, 24px);
    }
}

/* ---- Buttons --------------------------------------------- */
.tt-btn[b-oy58j19pnn] {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-2, 4px);
    padding: 8px 16px;
    font-size: var(--font-size-sm, 14px);
    font-weight: 500;
    border-radius: var(--radius-md, 12px);
    border: 1px solid transparent;
    cursor: pointer;
    transition: all var(--duration-fast, 120ms) var(--easing-standard, ease);
    white-space: nowrap;
    line-height: 1.4;
}

.tt-btn:disabled[b-oy58j19pnn] { opacity: 0.5; cursor: not-allowed; }

.tt-btn-sm[b-oy58j19pnn] { padding: 5px 12px; font-size: var(--font-size-xs, 12px); }

.tt-btn-primary[b-oy58j19pnn] {
    background: var(--color-primary-600, #3D8275);
    color: #fff;
    border-color: var(--color-primary-600, #3D8275);
}
.tt-btn-primary:hover:not(:disabled)[b-oy58j19pnn] { background: var(--color-primary-700, #2F6A5C); }

.tt-btn-outline[b-oy58j19pnn] {
    background: #fff;
    color: var(--color-neutral-700, #374151);
    border-color: var(--color-neutral-300, #d1d5db);
}
.tt-btn-outline:hover:not(:disabled)[b-oy58j19pnn] { background: var(--color-neutral-50, #f9fafb); }

.tt-btn-success[b-oy58j19pnn] {
    background: var(--color-success-600, #16a34a);
    color: #fff;
}
.tt-btn-success:hover:not(:disabled)[b-oy58j19pnn] { background: var(--color-success-700, #15803d); }

.tt-btn-danger-outline[b-oy58j19pnn] {
    background: #fff;
    color: var(--color-danger-600, #dc2626);
    border-color: var(--color-danger-300, #fca5a5);
}
.tt-btn-danger-outline:hover:not(:disabled)[b-oy58j19pnn] { background: var(--color-danger-50, #fef2f2); }

/* ---- Loading --------------------------------------------- */
.tt-loading[b-oy58j19pnn] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 300px;
}

/* ---- Selector Bar ---------------------------------------- */
.tt-selector-bar[b-oy58j19pnn] {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-3, 8px);
    padding: var(--spacing-4, 12px) var(--spacing-5, 16px);
    background: var(--color-white, #fff);
    border-bottom: 1px solid var(--color-neutral-200, #e5e7eb);
}

.tt-selector-group[b-oy58j19pnn] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.tt-selector-label[b-oy58j19pnn] {
    font-size: var(--font-size-xs, 12px);
    font-weight: 600;
    color: var(--color-neutral-600, #4b5563);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.tt-select[b-oy58j19pnn] {
    padding: 8px 12px;
    border: 1px solid var(--color-neutral-300, #d1d5db);
    border-radius: var(--radius-md, 12px);
    font-size: var(--font-size-sm, 14px);
    color: var(--color-neutral-800, #1f2937);
    background: #fff;
    min-width: 160px;
    cursor: pointer;
    outline: none;
}

.tt-select:focus[b-oy58j19pnn] {
    border-color: var(--color-primary-500, #4A9B8E);
    box-shadow: 0 0 0 3px var(--color-primary-100, #B3E8DE);
}

.tt-select:disabled[b-oy58j19pnn] {
    background: var(--color-neutral-50, #f9fafb);
    color: var(--color-neutral-400, #9ca3af);
    cursor: not-allowed;
}

.tt-status-chips[b-oy58j19pnn] {
    display: flex;
    gap: var(--spacing-2, 4px);
    flex-wrap: wrap;
    align-items: center;
}

.tt-chip[b-oy58j19pnn] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    border-radius: var(--radius-full, 9999px);
    font-size: var(--font-size-xs, 12px);
    font-weight: 600;
}

.chip-success[b-oy58j19pnn] { background: var(--color-success-100, #d1fae5); color: var(--color-success-700, #15803d); }
.chip-warn[b-oy58j19pnn]    { background: var(--color-warning-100, #fff8e5); color: var(--color-warning-700, #cc8400); }
.chip-danger[b-oy58j19pnn]  { background: var(--color-danger-100, #fee2e2);  color: var(--color-danger-600, #dc2626); }

@media (min-width: 768px) {
    .tt-selector-bar[b-oy58j19pnn] {
        flex-direction: row;
        align-items: flex-end;
        padding: var(--spacing-4, 12px) var(--spacing-7, 24px);
    }
}

/* ---- Empty State ----------------------------------------- */
.tt-empty-state[b-oy58j19pnn] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 80px var(--spacing-7, 24px);
    color: var(--color-neutral-500, #6b7280);
}

.tt-empty-icon[b-oy58j19pnn] {
    width: 64px;
    height: 64px;
    border-radius: var(--radius-full, 9999px);
    background: var(--color-primary-100, #B3E8DE);
    color: var(--color-primary-600, #3D8275);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.75rem;
    margin-bottom: var(--spacing-5, 16px);
}

.tt-empty-state h3[b-oy58j19pnn] {
    font-size: var(--font-size-lg, 18px);
    font-weight: 600;
    color: var(--color-neutral-800, #1f2937);
    margin: 0 0 var(--spacing-2, 4px);
}

.tt-empty-state p[b-oy58j19pnn] {
    font-size: var(--font-size-sm, 14px);
    max-width: 360px;
    margin: 0;
}

/* ---- Workspace (two columns) ----------------------------- */
.tt-workspace[b-oy58j19pnn] {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-5, 16px);
    padding: var(--spacing-5, 16px);
    align-items: flex-start;
}

@media (min-width: 1024px) {
    .tt-workspace[b-oy58j19pnn] {
        flex-direction: row;
        padding: var(--spacing-6, 20px) var(--spacing-7, 24px);
        gap: var(--spacing-6, 20px);
    }
}

/* ---- Teacher Pool (left panel) --------------------------- */
.tt-teacher-pool[b-oy58j19pnn] {
    width: 100%;
    background: #fff;
    border: 1px solid var(--color-neutral-200, #e5e7eb);
    border-radius: var(--radius-xl, 24px);
    overflow: hidden;
    box-shadow: var(--shadow-sm, 0 2px 8px rgba(0,0,0,0.08));
}

@media (min-width: 1024px) {
    .tt-teacher-pool[b-oy58j19pnn] {
        width: 220px;
        flex-shrink: 0;
        position: sticky;
        top: 20px;
        max-height: calc(100vh - 200px);
        overflow-y: auto;
    }
}

.tt-pool-header[b-oy58j19pnn] {
    display: flex;
    align-items: center;
    gap: var(--spacing-2, 4px);
    padding: 10px var(--spacing-4, 12px);
    font-size: var(--font-size-sm, 14px);
    font-weight: 600;
    color: var(--color-neutral-700, #374151);
    background: var(--color-neutral-50, #f9fafb);
    border-bottom: 1px solid var(--color-neutral-200, #e5e7eb);
}

.tt-pool-empty[b-oy58j19pnn] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 32px var(--spacing-4, 12px);
    color: var(--color-neutral-400, #9ca3af);
    font-size: var(--font-size-xs, 12px);
    gap: var(--spacing-2, 4px);
    line-height: 1.5;
}

.tt-pool-empty i[b-oy58j19pnn] { font-size: 1.4rem; }
.tt-pool-empty p[b-oy58j19pnn] { margin: 0; }

.tt-teacher-card[b-oy58j19pnn] {
    padding: 10px var(--spacing-4, 12px);
    border-bottom: 1px solid var(--color-neutral-100, #f3f4f6);
}

.tt-teacher-card:last-child[b-oy58j19pnn] { border-bottom: none; }

.tt-teacher-name[b-oy58j19pnn] {
    display: flex;
    align-items: center;
    gap: var(--spacing-2, 4px);
    margin-bottom: var(--spacing-2, 4px);
}

.tt-avatar[b-oy58j19pnn] {
    width: 26px;
    height: 26px;
    border-radius: var(--radius-full, 9999px);
    background: var(--color-primary-600, #3D8275);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.tt-teacher-label[b-oy58j19pnn] {
    font-size: var(--font-size-sm, 14px);
    font-weight: 600;
    color: var(--color-neutral-800, #1f2937);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
}

.tt-teacher-subjects[b-oy58j19pnn] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.tt-subject-chip[b-oy58j19pnn] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 2px 8px;
    background: var(--color-neutral-50, #f9fafb);
    border-radius: var(--radius-sm, 8px);
    font-size: var(--font-size-xs, 12px);
    color: var(--color-neutral-700, #374151);
    border-left-width: 3px;
    border-left-style: solid;
}

.tt-chip-count[b-oy58j19pnn] {
    font-weight: 600;
    color: var(--color-neutral-500, #6b7280);
    flex-shrink: 0;
    margin-left: 4px;
}

.tt-teacher-load[b-oy58j19pnn] {
    margin-top: 4px;
    font-size: var(--font-size-xs, 12px);
    color: var(--color-neutral-400, #9ca3af);
}

/* ---- Grid Panel (right) ---------------------------------- */
.tt-grid-panel[b-oy58j19pnn] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
}

.tt-grid-header[b-oy58j19pnn] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-3, 8px);
    align-items: center;
    justify-content: space-between;
    padding: 10px var(--spacing-4, 12px);
    background: #fff;
    border: 1px solid var(--color-neutral-200, #e5e7eb);
    border-radius: var(--radius-xl, 24px) var(--radius-xl, 24px) 0 0;
    border-bottom: none;
}

.tt-grid-title[b-oy58j19pnn] {
    font-size: var(--font-size-md, 16px);
    font-weight: 600;
    color: var(--color-neutral-800, #1f2937);
    display: flex;
    align-items: center;
    gap: var(--spacing-2, 4px);
    flex-wrap: wrap;
}

.tt-year-tag[b-oy58j19pnn] {
    font-size: var(--font-size-xs, 12px);
    color: var(--color-neutral-500, #6b7280);
    font-weight: 400;
    background: var(--color-neutral-100, #f3f4f6);
    padding: 2px 8px;
    border-radius: var(--radius-full, 9999px);
}

.tt-grid-actions[b-oy58j19pnn] {
    display: flex;
    gap: var(--spacing-2, 4px);
}

/* ---- Table ----------------------------------------------- */
.tt-table-wrap[b-oy58j19pnn] {
    overflow-x: auto;
    background: #fff;
    border: 1px solid var(--color-neutral-200, #e5e7eb);
    border-top: none;
}

.tt-table[b-oy58j19pnn] {
    width: 100%;
    border-collapse: collapse;
    min-width: 420px; /* reduced from 500 for very narrow phones */
}

@media (min-width: 768px) {
    .tt-table[b-oy58j19pnn] { min-width: 500px; }
}

.tt-th-period[b-oy58j19pnn] {
    width: 90px;
    padding: 8px 12px;
    text-align: left;
    font-size: var(--font-size-xs, 12px);
    font-weight: 600;
    color: var(--color-neutral-500, #6b7280);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-bottom: 1px solid var(--color-neutral-200, #e5e7eb);
    background: var(--color-neutral-50, #f9fafb);
}

.tt-th-day[b-oy58j19pnn] {
    padding: 8px 12px;
    text-align: center;
    font-size: var(--font-size-xs, 12px);
    font-weight: 600;
    color: var(--color-neutral-500, #6b7280);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-bottom: 1px solid var(--color-neutral-200, #e5e7eb);
    border-left: 1px solid var(--color-neutral-100, #f3f4f6);
    background: var(--color-neutral-50, #f9fafb);
    min-width: 110px;
}

.tt-td-period[b-oy58j19pnn] {
    padding: 8px 12px;
    border-bottom: 1px solid var(--color-neutral-100, #f3f4f6);
    vertical-align: top;
    background: var(--color-neutral-50, #f9fafb);
}

.tt-period-name[b-oy58j19pnn] {
    font-size: var(--font-size-sm, 14px);
    font-weight: 600;
    color: var(--color-neutral-800, #1f2937);
}

.tt-period-time[b-oy58j19pnn] {
    font-size: var(--font-size-xs, 12px);
    color: var(--color-neutral-500, #6b7280);
    margin-top: 1px;
}

.tt-td-slot[b-oy58j19pnn] {
    padding: 4px;
    border-bottom: 1px solid var(--color-neutral-100, #f3f4f6);
    border-left: 1px solid var(--color-neutral-100, #f3f4f6);
    vertical-align: top;
}

.tt-slot-break[b-oy58j19pnn] {
    min-height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-size-xs, 12px);
    color: var(--color-neutral-400, #9ca3af);
    background: var(--color-neutral-50, #f9fafb);
    border-radius: var(--radius-sm, 8px);
}

.tt-slot-filled[b-oy58j19pnn] {
    min-height: 58px;
    border-radius: var(--radius-sm, 8px);
    padding: 6px 8px;
    cursor: pointer;
    position: relative;
    transition: opacity var(--duration-fast, 120ms) ease;
    border-left-width: 4px;
    border-left-style: solid;
}

.tt-slot-filled:hover[b-oy58j19pnn] { opacity: 0.82; }

.tt-slot-filled.has-conflict[b-oy58j19pnn] {
    box-shadow: 0 0 0 2px var(--color-danger-500, #ef4444);
}

/* Draft slot — auto-generated but not yet saved to the database */
.slot-draft[b-oy58j19pnn] {
    animation: draftPulse-b-oy58j19pnn 2.4s ease-in-out infinite;
}

@keyframes draftPulse-b-oy58j19pnn {
    0%,  100% { opacity: 1; }
    50%        { opacity: 0.82; }
}

.tt-slot-subject[b-oy58j19pnn] {
    font-size: var(--font-size-xs, 12px);
    font-weight: 600;
    color: var(--color-neutral-900, #111827);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tt-slot-teacher[b-oy58j19pnn] {
    font-size: var(--font-size-xs, 12px);
    color: var(--color-neutral-600, #4b5563);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-top: 2px;
}

.tt-conflict-icon[b-oy58j19pnn] {
    position: absolute;
    top: 4px;
    right: 4px;
    font-size: 10px;
    color: var(--color-danger-500, #ef4444);
}

.tt-slot-empty[b-oy58j19pnn] {
    min-height: 46px;
    border: 2px dashed var(--color-neutral-200, #e5e7eb);
    border-radius: var(--radius-sm, 8px);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--color-neutral-300, #d1d5db);
    font-size: var(--font-size-sm, 14px);
    transition: all var(--duration-fast, 120ms) ease;
}

.tt-slot-empty:hover[b-oy58j19pnn] {
    border-color: var(--color-primary-400, #3BB89D);
    background: var(--color-primary-50, #E6F7F4);
    color: var(--color-primary-500, #4A9B8E);
}

/* ---- Legend ---------------------------------------------- */
.tt-legend[b-oy58j19pnn] {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    padding: 10px var(--spacing-4, 12px);
    background: #fff;
    border: 1px solid var(--color-neutral-200, #e5e7eb);
    border-top: none;
    border-radius: 0 0 var(--radius-xl, 24px) var(--radius-xl, 24px);
}

.tt-legend-item[b-oy58j19pnn] {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: var(--font-size-xs, 12px);
    color: var(--color-neutral-600, #4b5563);
}

.tt-legend-dot[b-oy58j19pnn] {
    width: 10px;
    height: 10px;
    border-radius: var(--radius-sm, 8px);
    flex-shrink: 0;
}

/* ---- Conflicts Panel ------------------------------------- */
.tt-conflicts-panel[b-oy58j19pnn] {
    background: var(--color-danger-50, #fef2f2);
    border: 1px solid var(--color-danger-200, #fecaca);
    border-radius: var(--radius-xl, 24px);
    padding: var(--spacing-4, 12px);
    margin-top: var(--spacing-4, 12px);
}

.tt-conflicts-title[b-oy58j19pnn] {
    font-size: var(--font-size-sm, 14px);
    font-weight: 600;
    color: var(--color-danger-800, #991b1b);
    display: flex;
    align-items: center;
    gap: var(--spacing-2, 4px);
    margin: 0 0 var(--spacing-3, 8px);
}

.tt-conflict-item[b-oy58j19pnn] {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-3, 8px);
    background: #fff;
    border-radius: var(--radius-md, 12px);
    padding: var(--spacing-3, 8px);
    margin-bottom: 6px;
}

.tt-conflict-badge[b-oy58j19pnn] {
    width: 26px;
    height: 26px;
    border-radius: var(--radius-full, 9999px);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-size-xs, 12px);
    flex-shrink: 0;
}

.cb-high[b-oy58j19pnn]   { background: var(--color-danger-100, #fee2e2);  color: var(--color-danger-600, #dc2626); }
.cb-medium[b-oy58j19pnn] { background: var(--color-warning-100, #fff8e5); color: var(--color-warning-700, #cc8400); }

.tt-conflict-desc[b-oy58j19pnn]  { font-size: var(--font-size-sm, 14px); color: var(--color-neutral-800, #1f2937); margin: 0; }
.tt-conflict-where[b-oy58j19pnn] { font-size: var(--font-size-xs, 12px); color: var(--color-neutral-500, #6b7280); margin: 2px 0 0; }

/* ---- Modals ---------------------------------------------- */
.tt-modal-backdrop[b-oy58j19pnn] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1100;
    padding: var(--spacing-4, 12px);
}

.tt-modal[b-oy58j19pnn] {
    background: #fff;
    border-radius: var(--radius-xl, 24px);
    box-shadow: var(--shadow-xl, 0 12px 32px rgba(0,0,0,0.18));
    width: 100%;
    max-width: 480px;
    max-height: 90vh;
    overflow-y: auto;
}

.tt-modal-sm[b-oy58j19pnn] { max-width: 380px; }

.tt-modal-header[b-oy58j19pnn] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--spacing-4, 12px) var(--spacing-5, 16px);
    border-bottom: 1px solid var(--color-neutral-200, #e5e7eb);
}

.tt-modal-header h3[b-oy58j19pnn] {
    font-size: var(--font-size-md, 16px);
    font-weight: 600;
    color: var(--color-neutral-900, #111827);
    display: flex;
    align-items: center;
    gap: var(--spacing-2, 4px);
    margin: 0;
}

.tt-modal-close[b-oy58j19pnn] {
    background: none;
    border: none;
    color: var(--color-neutral-400, #9ca3af);
    cursor: pointer;
    font-size: var(--font-size-md, 16px);
    padding: 4px;
    border-radius: var(--radius-md, 12px);
    line-height: 1;
}

.tt-modal-close:hover[b-oy58j19pnn] { color: var(--color-neutral-700, #374151); }

.tt-modal-body[b-oy58j19pnn] {
    padding: var(--spacing-5, 16px);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-4, 12px);
}

.tt-modal-info[b-oy58j19pnn] {
    font-size: var(--font-size-sm, 14px);
    color: var(--color-neutral-600, #4b5563);
    background: var(--color-neutral-50, #f9fafb);
    padding: var(--spacing-3, 8px) var(--spacing-4, 12px);
    border-radius: var(--radius-md, 12px);
    margin: 0;
}

.tt-options[b-oy58j19pnn] {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-3, 8px);
}

.tt-option-row[b-oy58j19pnn] {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-3, 8px);
    cursor: pointer;
}

.tt-option-row input[type="checkbox"][b-oy58j19pnn] { margin-top: 3px; flex-shrink: 0; }

.tt-option-row span[b-oy58j19pnn] { display: flex; flex-direction: column; gap: 2px; }
.tt-option-row strong[b-oy58j19pnn] { font-size: var(--font-size-sm, 14px); color: var(--color-neutral-800, #1f2937); }
.tt-option-row small[b-oy58j19pnn]  { font-size: var(--font-size-xs, 12px); color: var(--color-neutral-500, #6b7280); }

.tt-number-row[b-oy58j19pnn] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-3, 8px);
}

.tt-number-row label[b-oy58j19pnn] {
    font-size: var(--font-size-sm, 14px);
    font-weight: 500;
    color: var(--color-neutral-700, #374151);
    flex: 1;
}

.tt-number-row label small[b-oy58j19pnn] { font-weight: 400; color: var(--color-neutral-400, #9ca3af); margin-left: 4px; }

.tt-number-input[b-oy58j19pnn] {
    width: 70px;
    padding: 6px 8px;
    border: 1px solid var(--color-neutral-300, #d1d5db);
    border-radius: var(--radius-md, 12px);
    font-size: var(--font-size-sm, 14px);
    text-align: center;
    flex-shrink: 0;
}

.tt-gen-result[b-oy58j19pnn] {
    padding: var(--spacing-3, 8px) var(--spacing-4, 12px);
    border-radius: var(--radius-md, 12px);
    font-size: var(--font-size-sm, 14px);
}

.result-success[b-oy58j19pnn] { background: var(--color-success-100, #d1fae5); border: 1px solid #a7f3d0; color: var(--color-success-700, #15803d); }
.result-error[b-oy58j19pnn]   { background: var(--color-danger-50, #fef2f2);  border: 1px solid #fecaca; color: var(--color-danger-700, #b91c1c); }

.tt-gen-stats[b-oy58j19pnn]   { font-size: var(--font-size-xs, 12px); margin: 4px 0 0; }
.tt-gen-warning[b-oy58j19pnn] { font-size: var(--font-size-xs, 12px); color: var(--color-warning-700, #cc8400); margin: 4px 0 0; }

.tt-field[b-oy58j19pnn] {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.tt-field label[b-oy58j19pnn] {
    font-size: var(--font-size-sm, 14px);
    font-weight: 500;
    color: var(--color-neutral-700, #374151);
}

.tt-modal-footer[b-oy58j19pnn] {
    display: flex;
    justify-content: flex-end;
    gap: var(--spacing-2, 4px);
    padding: var(--spacing-4, 12px) var(--spacing-5, 16px);
    border-top: 1px solid var(--color-neutral-200, #e5e7eb);
}

.tt-modal-footer-split[b-oy58j19pnn] { justify-content: space-between; }
.tt-modal-footer-right[b-oy58j19pnn] { display: flex; gap: var(--spacing-2, 4px); }

/* ============================================================
   Bug #95 — Dropdown vertical constraint for Class/Section selectors
   Prevents native <select> from overflowing viewport when many items exist
   ============================================================ */

tt-select-constrained[b-oy58j19pnn] {
    max-height: 70vh;
    overflow-y: auto;
}

.tt-selector-bar select[b-oy58j19pnn],
.tt-page-header select[b-oy58j19pnn] {
    max-height: 45vh;          /* hard limit so list never extends below viewport */
    min-width: 160px;
}
/* /Components/Shared/UsageLimitGuard.razor.rz.scp.css */
.usage-guard[b-mswqhpid6u] {
    border: 1px solid var(--color-neutral-200);
    border-radius: var(--radius-md);
    padding: var(--space-3) var(--space-4);
    background: var(--color-neutral-50);
    margin-bottom: var(--space-3);
}

.usage-guard--loading[b-mswqhpid6u] {
    color: var(--color-neutral-500);
    font-size: var(--text-sm);
}

.usage-guard--near[b-mswqhpid6u] {
    border-color: var(--color-warning-300);
    background: var(--color-warning-50);
}

.usage-guard--reached[b-mswqhpid6u] {
    border-color: var(--color-danger-300);
    background: var(--color-danger-50);
}

.usage-guard__head[b-mswqhpid6u] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: var(--text-sm);
    margin-bottom: var(--space-2);
}

.usage-guard__label[b-mswqhpid6u] {
    font-weight: 600;
    color: var(--color-neutral-800);
}

.usage-guard__count[b-mswqhpid6u] {
    color: var(--color-neutral-600);
}

.usage-guard__bar[b-mswqhpid6u] {
    height: 8px;
    background: var(--color-neutral-200);
    border-radius: var(--radius-full);
    overflow: hidden;
}

.usage-guard__fill[b-mswqhpid6u] {
    height: 100%;
    background: var(--color-primary-500);
    transition: width 0.3s ease;
}

.usage-guard--near .usage-guard__fill[b-mswqhpid6u] {
    background: var(--color-warning-500);
}

.usage-guard--reached .usage-guard__fill[b-mswqhpid6u] {
    background: var(--color-danger-500);
}

.usage-guard__msg[b-mswqhpid6u] {
    margin-top: var(--space-2);
    font-size: var(--text-sm);
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.usage-guard__msg--near[b-mswqhpid6u] {
    color: var(--color-warning-700);
}

.usage-guard__msg--reached[b-mswqhpid6u] {
    color: var(--color-danger-700);
    font-weight: 600;
}
/* /Components/Shared/ValidatedInput.razor.rz.scp.css */
/* ValidatedInput — scoped styles
   Uses design tokens from design-tokens.css
   Matches the existing form-input / form-error / form-hint pattern */

.vi-field[b-rgj2adqc1t] {
    display: flex;
    flex-direction: column;
}

.vi-label[b-rgj2adqc1t] {
    display: block;
    font-size: var(--font-size-xs);
    font-weight: 600;
    color: var(--color-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 0.25rem;
}

.vi-required[b-rgj2adqc1t] {
    color: var(--color-danger-500);
    margin-left: 1px;
    font-weight: 700;
}

.vi-input[b-rgj2adqc1t] {
    width: 100%;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xs);
    font-size: var(--font-size-sm);
    color: var(--color-text-primary);
    background: var(--color-bg-white);
    transition: border-color 0.15s, box-shadow 0.15s;
    outline: none;
    box-sizing: border-box;
}

.vi-input:focus[b-rgj2adqc1t] {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(74, 155, 142, 0.15);
}

.vi-input:disabled[b-rgj2adqc1t] {
    opacity: 0.55;
    cursor: not-allowed;
    background: var(--color-neutral-50);
}

.vi-input-error[b-rgj2adqc1t] {
    border-color: var(--color-danger-400);
}

.vi-input-error:focus[b-rgj2adqc1t] {
    border-color: var(--color-danger-500);
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.12);
}

/* Reserved slot for the error/hint line. Always present so every field
   keeps the same height whether or not it is showing a message — this is
   what keeps inputs in the same grid row aligned across the form. */
.vi-slot[b-rgj2adqc1t] {
    margin-top: 0.25rem;
    min-height: calc(var(--font-size-xs) * 1.4);
    font-size: var(--font-size-xs);
}

.vi-error[b-rgj2adqc1t] {
    display: block;
    font-size: var(--font-size-xs);
    color: var(--color-danger-600);
    font-weight: 500;
    line-height: 1.3;
}

.vi-hint[b-rgj2adqc1t] {
    display: block;
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
    line-height: 1.4;
}
/* /Components/Shared/WeeklyTimetableGrid.razor.rz.scp.css */
[b-xc2pmt158t] .weekly-timetable-grid {
    /* Component-wide styling */
}

[b-xc2pmt158t] .weekly-timetable-grid table {
    /* Table styling handled via Tailwind classes in component */
}
/* /Components/Shared/YearPicker.razor.rz.scp.css */
.year-picker[b-pzgkbiykth] {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-2, 8px);
    padding: var(--spacing-1, 4px) var(--spacing-2, 8px);
    background: var(--color-surface, #fff);
    border: 1px solid var(--color-border, #e2e8f0);
    border-radius: var(--radius-md, 6px);
    font-size: var(--font-size-sm, 0.875rem);
}

.year-picker-label[b-pzgkbiykth] {
    margin: 0;
    font-weight: var(--font-weight-medium, 500);
    color: var(--color-text-secondary, #64748b);
    white-space: nowrap;
}

.year-picker-control[b-pzgkbiykth] {
    display: flex;
    align-items: center;
}

.year-picker-select[b-pzgkbiykth] {
    padding: var(--spacing-1, 4px) var(--spacing-2, 8px);
    border: 1px solid var(--color-border, #e2e8f0);
    border-radius: var(--radius-sm, 4px);
    background: var(--color-surface, #fff);
    color: var(--color-text-primary, #1e293b);
    font-size: var(--font-size-sm, 0.875rem);
    cursor: pointer;
    transition: border-color 0.15s ease;
}

.year-picker-select:hover[b-pzgkbiykth] {
    border-color: var(--color-primary, #3b82f6);
}

.year-picker-select:focus[b-pzgkbiykth] {
    outline: none;
    border-color: var(--color-primary, #3b82f6);
    box-shadow: 0 0 0 2px var(--color-primary-light, rgba(59, 130, 246, 0.2));
}

@media (max-width: 640px) {
    .year-picker[b-pzgkbiykth] {
        width: 100%;
        justify-content: space-between;
    }

    .year-picker-select[b-pzgkbiykth] {
        flex: 1;
    }
}
/* /Components/Student/ExamTimer.razor.rz.scp.css */
.exam-timer[b-kxhuyhshqu] {
    min-height: 44px;
}

@media (max-width: 767px) {
    .exam-timer[b-kxhuyhshqu] {
        width: 100%;
        justify-content: center;
        padding: var(--spacing-3) var(--spacing-4);
        font-size: 1rem;
    }
}
/* /Components/Student/NavigationControls.razor.rz.scp.css */
.navigation-controls[b-lyxx9k8cy0] {
    min-width: 0;
}

.navigation-controls button[b-lyxx9k8cy0] {
    min-height: 44px;
}

@media (max-width: 767px) {
    .navigation-controls[b-lyxx9k8cy0] {
        padding-bottom: max(var(--spacing-3), env(safe-area-inset-bottom));
    }
}
/* /Components/Student/QuestionDisplay.razor.rz.scp.css */
.question-display[b-734n01722z] {
    min-width: 0;
    padding: var(--spacing-6);
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-sm);
    color: var(--color-text-primary);
    background: var(--color-surface-primary);
    box-shadow: var(--shadow-xs);
}

.question-text[b-734n01722z] {
    min-width: 0;
    max-width: 100%;
    font-size: 1.0625rem;
    line-height: 1.75;
    overflow-wrap: anywhere;
}

.question-display[b-734n01722z]  img {
    max-width: 100%;
    height: auto;
}

@media (max-width: 767px) {
    .question-display[b-734n01722z] {
        padding: var(--spacing-5);
    }

    .question-text[b-734n01722z] {
        font-size: 0.9375rem;
    }

    .question-display[b-734n01722z]  img {
        min-height: 44px;
    }
}
/* /Components/Student/QuestionPalette.razor.rz.scp.css */
.palette-question-button[b-iecf9xhay1] {
    min-width: 44px;
    min-height: 44px;
}

@media (max-width: 767px) {
    .palette-question-button[b-iecf9xhay1] {
        min-width: 48px;
        min-height: 48px;
    }
}
/* /Components/SuperAdmin/AIImportQuestionPreviewCard.razor.rz.scp.css */
/* ── AI Import Question Preview Card ────────────────────────── */

.ai-question-card[b-ilhq4jzc6c] {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 1rem;
    padding: 1.25rem 1.5rem;
    transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

.ai-question-card:hover[b-ilhq4jzc6c] {
    box-shadow: 0 8px 24px -4px rgba(0,0,0,0.08);
    border-color: #d1d5db;
}

/* ── Header row ─────────────────────────────────────────────── */
.qcard-header[b-ilhq4jzc6c] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.875rem;
}

.qcard-number[b-ilhq4jzc6c] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.25rem;
    height: 2.25rem;
    padding: 0 0.625rem;
    background: linear-gradient(135deg, #6366f1, #4f46e5);
    color: #fff;
    font-weight: 700;
    font-size: 0.875rem;
    border-radius: 0.625rem;
    flex-shrink: 0;
}

/* ── Badges ─────────────────────────────────────────────────── */
.qcard-badge[b-ilhq4jzc6c] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.2rem 0.6rem;
    border-radius: 9999px;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.01em;
}

.badge-type[b-ilhq4jzc6c]      { background: #eff6ff; color: #1d4ed8; border: 1px solid #bfdbfe; }
.badge-marks[b-ilhq4jzc6c]     { background: #fefce8; color: #92400e; border: 1px solid #fde68a; }
.badge-bloom[b-ilhq4jzc6c]     { background: #f5f3ff; color: #6d28d9; border: 1px solid #ddd6fe; }
.badge-topic[b-ilhq4jzc6c]     { background: #ecfdf5; color: #065f46; border: 1px solid #a7f3d0; max-width: 14rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.badge-diff-easy[b-ilhq4jzc6c]   { background: #dcfce7; color: #166534; border: 1px solid #86efac; }
.badge-diff-medium[b-ilhq4jzc6c] { background: #fef9c3; color: #854d0e; border: 1px solid #fde047; }
.badge-diff-hard[b-ilhq4jzc6c]   { background: #fee2e2; color: #991b1b; border: 1px solid #fca5a5; }

/* ── Body (question text) ────────────────────────────────────── */
.qcard-body[b-ilhq4jzc6c] {
    color: #111827;
    font-size: 0.95rem;
    line-height: 1.7;
    margin-bottom: 0.75rem;
}

/* ── Block types ─────────────────────────────────────────────── */
.block-text[b-ilhq4jzc6c] {
    margin-bottom: 0.4rem;
}

.block-formula[b-ilhq4jzc6c] {
    margin: 0.5rem 0;
    padding: 0.5rem 0.75rem;
    background: #fafafa;
    border-left: 3px solid #6366f1;
    border-radius: 0 0.375rem 0.375rem 0;
    overflow-x: auto;
    font-size: 1rem;
}

.block-diagram[b-ilhq4jzc6c] {
    margin: 0.75rem 0;
}

.block-diagram-placeholder[b-ilhq4jzc6c] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 0.875rem;
    background: #f3f4f6;
    border: 1px dashed #d1d5db;
    border-radius: 0.5rem;
    color: #6b7280;
    font-size: 0.85rem;
}

.block-diagram-placeholder i[b-ilhq4jzc6c] { color: #9ca3af; font-size: 1.1rem; }

.block-diagram-caption[b-ilhq4jzc6c] {
    font-size: 0.8rem;
    color: #6b7280;
    font-style: italic;
    margin-top: 0.35rem;
}

.block-table[b-ilhq4jzc6c] {
    overflow-x: auto;
    margin: 0.5rem 0;
    font-size: 0.875rem;
}

/* ── Section labels ──────────────────────────────────────────── */
.qcard-section-label[b-ilhq4jzc6c] {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    margin-bottom: 0.5rem;
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

/* ── Options ─────────────────────────────────────────────────── */
.qcard-options[b-ilhq4jzc6c] {
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    border-radius: 0.625rem;
    padding: 0.75rem 1rem;
    margin-bottom: 0.75rem;
}

.qcard-options .qcard-section-label[b-ilhq4jzc6c] { color: #1d4ed8; }

.qcard-options-grid[b-ilhq4jzc6c] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
}

@media (max-width: 600px) {
    .qcard-options-grid[b-ilhq4jzc6c] { grid-template-columns: 1fr; }
}

.qcard-option[b-ilhq4jzc6c] {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    padding: 0.45rem 0.75rem;
    background: rgba(255,255,255,0.8);
    border: 1px solid #dbeafe;
    border-radius: 0.5rem;
    font-size: 0.88rem;
    color: #1e3a5f;
}

.qcard-option-label[b-ilhq4jzc6c] {
    flex-shrink: 0;
    width: 1.4rem;
    height: 1.4rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #2563eb;
    color: #fff;
    font-weight: 700;
    font-size: 0.72rem;
    border-radius: 0.3rem;
}

/* ── Answer ──────────────────────────────────────────────────── */
.qcard-answer[b-ilhq4jzc6c] {
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    border-radius: 0.625rem;
    padding: 0.75rem 1rem;
    margin-bottom: 0.75rem;
}

.answer-label[b-ilhq4jzc6c] { color: #166534; }

.qcard-answer .katex-content[b-ilhq4jzc6c] {
    color: #14532d;
    font-size: 0.9rem;
    line-height: 1.6;
}

/* ── Hint ────────────────────────────────────────────────────── */
.qcard-hint[b-ilhq4jzc6c] {
    background: #fffbeb;
    border: 1px solid #fde68a;
    border-radius: 0.625rem;
    padding: 0.75rem 1rem;
    margin-bottom: 0.75rem;
}

.hint-label[b-ilhq4jzc6c] { color: #92400e; }

.qcard-hint .katex-content[b-ilhq4jzc6c] {
    color: #78350f;
    font-size: 0.88rem;
    line-height: 1.6;
}

/* ── Explanation ─────────────────────────────────────────────── */
.qcard-explanation[b-ilhq4jzc6c] {
    background: #faf5ff;
    border: 1px solid #e9d5ff;
    border-radius: 0.625rem;
    padding: 0.75rem 1rem;
}

.explanation-label[b-ilhq4jzc6c] { color: #6d28d9; }

.qcard-explanation .katex-content[b-ilhq4jzc6c] {
    color: #4c1d95;
    font-size: 0.88rem;
    line-height: 1.65;
}
/* /Pages/Accountant/Budget/Index.razor.rz.scp.css */
.budget-page[b-txnqqb2crg] {
    /* Scoped styles for Budget Management page */
}
/* /Pages/Accountant/Dashboard.razor.rz.scp.css */
/* Accountant Dashboard */
/* /Pages/Accountant/DayBook/Index.razor.rz.scp.css */
/* ─── Mobile payment mode badges ───────────────────────── */
[b-tlg0gcxzyr] .db-mode-badge {
    display: inline-block;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.03em;
    padding: 2px 8px;
    border-radius: 6px;
    border: 1px solid transparent;
}
[b-tlg0gcxzyr] .db-badge-cash   { background: #f0fdf4; color: #16a34a; border-color: #bbf7d0; }
[b-tlg0gcxzyr] .db-badge-upi    { background: #eff6ff; color: #1d4ed8; border-color: #bfdbfe; }
[b-tlg0gcxzyr] .db-badge-cheque { background: #fefce8; color: #b45309; border-color: #fde68a; }
[b-tlg0gcxzyr] .db-badge-online { background: #faf5ff; color: #7c3aed; border-color: #ddd6fe; }

/* ─── Chip strip: hide scrollbar, keep swipe ───────────── */
[b-tlg0gcxzyr] .db-chip-strip {
    -ms-overflow-style: none;
    scrollbar-width: none;
}
[b-tlg0gcxzyr] .db-chip-strip::-webkit-scrollbar {
    display: none;
}

/* ─── Quick filter chips ────────────────────────────────── */
[b-tlg0gcxzyr] .db-chip {
    height: 34px;
    padding: 0 14px;
    font-size: 13px;
    font-weight: 500;
    color: #6b7280;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    white-space: nowrap;
    transition: all 0.15s;
    cursor: pointer;
}

[b-tlg0gcxzyr] .db-chip:hover {
    background: #f9fafb;
    border-color: #d1d5db;
    color: #374151;
}

[b-tlg0gcxzyr] .db-chip-active {
    background: var(--color-primary, #0e7490);
    border-color: var(--color-primary, #0e7490);
    color: #fff !important;
    font-weight: 600;
}

[b-tlg0gcxzyr] .db-chip-mode-active {
    background: #eff6ff;
    border-color: #bfdbfe;
    color: #1d4ed8 !important;
    font-weight: 600;
}

/* ─── Calendar cell ─────────────────────────────────────── */
[b-tlg0gcxzyr] .db-cal-cell {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 44px;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.12s, transform 0.1s;
    overflow: hidden;
    border: 1px solid transparent;
    font-size: 12px;
    color: #374151;
    margin: 1px auto;
}

[b-tlg0gcxzyr] .db-cal-cell:hover:not(:disabled) {
    background: #f3f4f6;
    transform: scale(1.05);
}

[b-tlg0gcxzyr] .db-cal-day {
    font-size: 12px;
    font-weight: 500;
    line-height: 1;
    z-index: 1;
    position: relative;
}

[b-tlg0gcxzyr] .db-cal-amt {
    font-size: 9px;
    font-weight: 600;
    color: #16a34a;
    line-height: 1;
    z-index: 1;
    position: relative;
    margin-top: 1px;
}

/* Green intensity background behind the day number */
[b-tlg0gcxzyr] .db-cal-has-data {
    background: #f0fdf4;
}

[b-tlg0gcxzyr] .db-cal-bar {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 3px;
    background: #22c55e;
    transition: width 0.3s ease;
    border-radius: 0 2px 2px 0;
    max-width: 100%;
}

[b-tlg0gcxzyr] .db-cal-today {
    border-color: var(--color-primary, #0e7490) !important;
    background: #f0fdff;
}

[b-tlg0gcxzyr] .db-cal-today .db-cal-day {
    color: var(--color-primary, #0e7490);
    font-weight: 700;
}

[b-tlg0gcxzyr] .db-cal-selected {
    background: var(--color-primary, #0e7490) !important;
    border-color: var(--color-primary, #0e7490) !important;
}

[b-tlg0gcxzyr] .db-cal-selected .db-cal-day,
[b-tlg0gcxzyr] .db-cal-selected .db-cal-amt {
    color: #fff !important;
}

[b-tlg0gcxzyr] .db-cal-selected .db-cal-bar {
    background: rgba(255, 255, 255, 0.5);
}

[b-tlg0gcxzyr] .db-cal-future {
    opacity: 0.35;
    cursor: not-allowed;
}

/* Responsive: hide calendar on small screens — handled by Tailwind `hidden lg:block` */

/* /Pages/Accountant/Expenses/Index.razor.rz.scp.css */
.expenses-page[b-w1h9uvv0j5] {
    /* Scoped styles for Accountant expenses page */
}

/* /Pages/Accountant/FeeRefunds/Index.razor.rz.scp.css */
.fee-refunds-page[b-n0s6tjodfh] {
    /* Scoped styles for Accountant fee refunds page */
}

/* /Pages/Accountant/Fees/Index.razor.rz.scp.css */
.fees-page[b-dh8u0n7tmd] {
    /* Scoped styles for Accountant fees page */
}

/* /Pages/Accountant/GeneralLedger/Index.razor.rz.scp.css */
.ledger-page[b-iq4tidhehf] {
    /* Scoped styles for General Ledger page */
}
/* /Pages/Accountant/Inbox/Index.razor.rz.scp.css */
.inbox-page[b-b5rn20gov5] {
    /* Scoped styles for Accountant inbox page */
}

/* /Pages/Accountant/LeavePolicies.razor.rz.scp.css */
/* filepath: src/ExamActive.Web/Pages/Accountant/LeavePolicies.razor.css */
/* Staff Leave Policies page — Accountant */
.lp-shell[b-vk356l0os9] { max-width: 1400px; margin: 0 auto; padding: 1.5rem 1rem; }

.lp-page-header[b-vk356l0os9] {
    display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem;
    flex-wrap: wrap; margin-bottom: 1.25rem;
}
.lp-page-title[b-vk356l0os9] { font-size: 1.5rem; font-weight: 700; color: var(--color-neutral-900, #1f2937); margin: 0; }
.lp-page-subtitle[b-vk356l0os9] { color: var(--color-neutral-500, #6b7280); font-size: 0.875rem; margin: 0.25rem 0 0; }

.lp-page-msg[b-vk356l0os9] { padding: 0.75rem 1rem; border-radius: 0.5rem; margin-bottom: 1rem; font-size: 0.875rem; }
.lp-msg-ok[b-vk356l0os9]   { background: #ecfdf5; color: #065f46; border: 1px solid #a7f3d0; }
.lp-msg-error[b-vk356l0os9]{ background: #fef2f2; color: #991b1b; border: 1px solid #fecaca; }

.lp-loading[b-vk356l0os9] {
    padding: 2rem 1rem;
    text-align: center;
    color: var(--color-neutral-500, #6b7280);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 10rem;
    gap: 0.75rem;
}
@media (min-width: 768px) { .lp-loading[b-vk356l0os9] { padding: 3rem; } }
.lp-loading-text[b-vk356l0os9] { font-size: 0.9rem; animation: lp-pulse-b-vk356l0os9 1.5s ease-in-out infinite; }
@keyframes lp-pulse-b-vk356l0os9 { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }
.lp-empty[b-vk356l0os9]   { padding: 2rem 1rem; text-align: center; color: var(--color-neutral-500, #6b7280);
              background: #fff; border: 1px dashed #e5e7eb; border-radius: 0.75rem; }
@media (min-width: 768px) { .lp-empty[b-vk356l0os9] { padding: 3rem; } }
.lp-empty p[b-vk356l0os9] { margin: 0.25rem 0; }

/* KPI strip */
.lp-kpi-grid[b-vk356l0os9] {
    display: grid; gap: 0.75rem; margin-bottom: 1.5rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 768px)  { .lp-kpi-grid[b-vk356l0os9] { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.lp-kpi-card[b-vk356l0os9] {
    background: #fff; border: 1px solid #e5e7eb; border-radius: 0.75rem;
    padding: 1rem; box-shadow: 0 1px 2px rgba(0,0,0,0.04);
}
.lp-kpi-label[b-vk356l0os9] { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.05em;
                color: var(--color-neutral-500, #6b7280); font-weight: 600; }
.lp-kpi-value[b-vk356l0os9] { font-size: 1.5rem; font-weight: 700; color: var(--color-neutral-900, #1f2937);
                margin-top: 0.25rem; }
.lp-kpi-warn[b-vk356l0os9]  { border-left: 3px solid #f59e0b; }
.lp-kpi-info[b-vk356l0os9]  { border-left: 3px solid #3b82f6; }
.lp-kpi-ok[b-vk356l0os9]    { border-left: 3px solid #10b981; }

/* Per-staff cards */
.lp-staff-list[b-vk356l0os9] { display: flex; flex-direction: column; gap: 0.75rem; }
.lp-staff-card[b-vk356l0os9] {
    background: #fff; border: 1px solid #e5e7eb; border-radius: 0.75rem;
    padding: 1rem 1.25rem; box-shadow: 0 1px 2px rgba(0,0,0,0.04);
}
.lp-staff-warn[b-vk356l0os9] { border-left: 3px solid #f59e0b; }
.lp-staff-head[b-vk356l0os9] {
    display: flex; align-items: center; justify-content: space-between; gap: 0.5rem;
    margin-bottom: 0.75rem; flex-wrap: wrap;
}
.lp-staff-name[b-vk356l0os9] { font-weight: 600; color: var(--color-neutral-900, #1f2937); }
.lp-staff-meta[b-vk356l0os9] { font-size: 0.75rem; color: var(--color-neutral-500, #6b7280); }
.lp-badge-warn[b-vk356l0os9] {
    background: #fef3c7; color: #92400e; padding: 0.25rem 0.5rem; border-radius: 9999px;
    font-size: 0.7rem; font-weight: 600; display: inline-flex; align-items: center; gap: 0.25rem;
}

.lp-balance-grid[b-vk356l0os9] {
    display: grid; gap: 0.5rem;
    grid-template-columns: repeat(1, minmax(0, 1fr));
}
@media (min-width: 640px)  { .lp-balance-grid[b-vk356l0os9] { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .lp-balance-grid[b-vk356l0os9] { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1280px) { .lp-balance-grid[b-vk356l0os9] { grid-template-columns: repeat(5, minmax(0, 1fr)); } }

.lp-balance-cell[b-vk356l0os9] {
    background: var(--color-neutral-50, #f9fafb);
    border-radius: 0.5rem; padding: 0.5rem 0.75rem;
}
.lp-balance-head[b-vk356l0os9] { display: flex; justify-content: space-between; align-items: baseline; }
.lp-leave-type[b-vk356l0os9] { font-size: 0.75rem; font-weight: 600; color: var(--color-neutral-700, #374151); }
.lp-balance-numbers[b-vk356l0os9] { font-size: 0.875rem; color: var(--color-neutral-900, #1f2937); }
.lp-bar-track[b-vk356l0os9] {
    background: var(--color-neutral-200, #e5e7eb);
    height: 6px; border-radius: 9999px; margin: 0.4rem 0; overflow: hidden;
}
.lp-bar-fill[b-vk356l0os9] { height: 100%; border-radius: 9999px; transition: width 200ms ease; }
.lp-bar-ok[b-vk356l0os9]   { background: #10b981; }
.lp-bar-warn[b-vk356l0os9] { background: #f59e0b; }
.lp-bar-over[b-vk356l0os9] { background: #ef4444; }
.lp-balance-foot[b-vk356l0os9] { display: flex; justify-content: space-between; gap: 0.25rem;
                   font-size: 0.7rem; color: var(--color-neutral-500, #6b7280); }

/* Buttons */
.lp-btn-primary[b-vk356l0os9], .lp-btn-secondary[b-vk356l0os9] {
    border: none; border-radius: 0.5rem; padding: 0.5rem 0.875rem; font-size: 0.875rem;
    font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; gap: 0.4rem;
    transition: background 150ms ease;
}
.lp-btn-primary[b-vk356l0os9] { background: var(--color-teal-600); color: #fff; }
.lp-btn-primary:hover[b-vk356l0os9] { background: var(--color-teal-700); }
.lp-btn-primary:disabled[b-vk356l0os9] { background: var(--color-teal-300); cursor: not-allowed; }
.lp-btn-secondary[b-vk356l0os9] { background: #fff; color: var(--color-teal-600); border: 1px solid var(--color-teal-600); }
.lp-btn-secondary:hover[b-vk356l0os9] { background: var(--color-teal-50); }
.lp-btn-secondary:disabled[b-vk356l0os9] { opacity: 0.5; cursor: not-allowed; }

/* Modal */
.lp-modal-backdrop[b-vk356l0os9] {
    position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 50;
    display: flex; align-items: center; justify-content: center; padding: 1rem;
}
.lp-modal[b-vk356l0os9] {
    background: #fff; border-radius: 0.75rem; max-width: 640px; width: 100%;
    max-height: 90vh; overflow-y: auto; padding: 1.25rem 1.5rem;
    box-shadow: 0 20px 25px -5px rgba(0,0,0,0.1);
}
.lp-modal-head[b-vk356l0os9] { display: flex; justify-content: space-between; align-items: center; }
.lp-modal-head h2[b-vk356l0os9] { margin: 0; font-size: 1.125rem; font-weight: 700; }
.lp-modal-close[b-vk356l0os9] { background: none; border: none; cursor: pointer; color: #6b7280; font-size: 1.25rem; }
.lp-modal-help[b-vk356l0os9]  { color: #6b7280; font-size: 0.8rem; margin: 0.5rem 0 1rem; }
.lp-defaults-grid[b-vk356l0os9] {
    display: grid; gap: 0.75rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}
.lp-defaults-grid label[b-vk356l0os9] {
    display: flex; flex-direction: column; gap: 0.25rem;
    font-size: 0.8rem; color: #374151; font-weight: 500;
}
.lp-defaults-grid input[b-vk356l0os9] {
    border: 1px solid #d1d5db; border-radius: 0.375rem; padding: 0.4rem 0.5rem;
    font-size: 0.875rem;
}
.lp-defaults-grid input:focus[b-vk356l0os9] { outline: none; border-color: var(--color-teal-600); box-shadow: 0 0 0 3px rgba(13,148,136,0.15); }
.lp-modal-actions[b-vk356l0os9] { display: flex; justify-content: flex-end; gap: 0.5rem; margin-top: 1rem; }
/* /Pages/Accountant/Payroll/Components.razor.rz.scp.css */
[b-kyemmxhg9r] .comp-kpi-card {
    background: var(--color-bg-white, #fff);
    border: 1px solid var(--color-border, #e5e7eb);
    border-radius: 0.75rem;
    padding: 1rem 1.25rem;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}
[b-kyemmxhg9r] .comp-kpi-label {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-text-muted, #94a3b8);
    margin-bottom: 0.35rem;
}
[b-kyemmxhg9r] .comp-kpi-value {
    font-size: 1.75rem;
    font-weight: 800;
    color: var(--color-text-primary, #1e293b);
}
[b-kyemmxhg9r] .comp-kpi-earning .comp-kpi-value { color: var(--color-success-600, #16a34a); }
[b-kyemmxhg9r] .comp-kpi-deduction .comp-kpi-value { color: var(--color-danger-600, #dc2626); }
[b-kyemmxhg9r] .comp-kpi-active { background: var(--color-teal-500, #4a9b8e); }
[b-kyemmxhg9r] .comp-kpi-active .comp-kpi-label { color: rgba(255,255,255,0.75); }
[b-kyemmxhg9r] .comp-kpi-active .comp-kpi-value { color: #fff; }

[b-kyemmxhg9r] .comp-btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.45rem 1rem;
    background: var(--color-primary, #0e7490);
    color: #fff;
    border-radius: 0.5rem;
    font-size: 0.85rem;
    font-weight: 600;
    border: none;
    cursor: pointer;
    transition: background 0.15s;
}
[b-kyemmxhg9r] .comp-btn-primary:hover { background: #0a5f73; }
[b-kyemmxhg9r] .comp-btn-primary:disabled { opacity: 0.6; cursor: not-allowed; }

[b-kyemmxhg9r] .comp-btn-secondary {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.45rem 1rem;
    background: #fff;
    color: #374151;
    border-radius: 0.5rem;
    font-size: 0.85rem;
    font-weight: 500;
    border: 1px solid #d1d5db;
    cursor: pointer;
    transition: background 0.15s;
}
[b-kyemmxhg9r] .comp-btn-secondary:hover { background: #f9fafb; }
[b-kyemmxhg9r] .comp-btn-secondary:disabled { opacity: 0.6; cursor: not-allowed; }

[b-kyemmxhg9r] .comp-btn-danger {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.45rem 1rem;
    background: #ef4444;
    color: #fff;
    border-radius: 0.5rem;
    font-size: 0.85rem;
    font-weight: 600;
    border: none;
    cursor: pointer;
    transition: background 0.15s;
}
[b-kyemmxhg9r] .comp-btn-danger:hover { background: #dc2626; }
[b-kyemmxhg9r] .comp-btn-danger:disabled { opacity: 0.6; cursor: not-allowed; }

/* Section headers */
[b-kyemmxhg9r] .comp-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1.25rem;
    border-bottom: 1px solid #f3f4f6;
}
[b-kyemmxhg9r] .comp-earning-header   { background: #f0fdf4; }
[b-kyemmxhg9r] .comp-deduction-header { background: #fff1f2; }

/* Component rows */
[b-kyemmxhg9r] .comp-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.65rem 1.25rem;
    border-bottom: 1px solid #f9fafb;
    gap: 0.5rem;
    transition: background 0.1s;
}
[b-kyemmxhg9r] .comp-row:last-child { border-bottom: none; }
[b-kyemmxhg9r] .comp-row:hover { background: #f9fafb; }
[b-kyemmxhg9r] .comp-row-inactive { opacity: 0.5; }

[b-kyemmxhg9r] .comp-row-left  { display: flex; align-items: center; gap: 0.75rem; flex: 1; min-width: 0; }
[b-kyemmxhg9r] .comp-row-right { display: flex; align-items: center; gap: 0.5rem; flex-shrink: 0; }

[b-kyemmxhg9r] .comp-dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}
[b-kyemmxhg9r] .comp-dot-earning   { background: #10b981; }
[b-kyemmxhg9r] .comp-dot-deduction { background: #f43f5e; }

[b-kyemmxhg9r] .comp-name { font-size: 0.875rem; font-weight: 500; color: #111827; }
[b-kyemmxhg9r] .comp-desc { font-size: 0.75rem; color: #6b7280; margin-top: 1px; }

[b-kyemmxhg9r] .comp-badge-active {
    font-size: 0.7rem;
    background: #f0fdf4;
    color: #16a34a;
    border-radius: 9999px;
    padding: 0.15rem 0.6rem;
    font-weight: 500;
    white-space: nowrap;
}
[b-kyemmxhg9r] .comp-badge-inactive {
    font-size: 0.7rem;
    background: #f3f4f6;
    color: #9ca3af;
    border-radius: 9999px;
    padding: 0.15rem 0.6rem;
    font-weight: 500;
}

[b-kyemmxhg9r] .comp-icon-btn {
    width: 28px; height: 28px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 0.375rem;
    border: none;
    background: transparent;
    color: #9ca3af;
    cursor: pointer;
    font-size: 0.75rem;
    transition: background 0.1s, color 0.1s;
}
[b-kyemmxhg9r] .comp-icon-btn:hover { background: #f3f4f6; color: #374151; }
[b-kyemmxhg9r] .comp-icon-btn-danger:hover { background: #fff1f2; color: #ef4444; }
[b-kyemmxhg9r] .comp-icon-btn-success:hover { background: var(--color-success-50, #ecfdf5); color: var(--color-success-700, #15803d); }

/* Form */
[b-kyemmxhg9r] .comp-label {
    display: block;
    font-size: 0.8rem;
    font-weight: 600;
    color: #374151;
    margin-bottom: 0.35rem;
}
[b-kyemmxhg9r] .comp-input {
    width: 100%;
    padding: 0.5rem 0.75rem;
    border: 1px solid #d1d5db;
    border-radius: 0.5rem;
    font-size: 0.875rem;
    color: #111827;
    background: #fff;
    transition: border-color 0.15s;
    box-sizing: border-box;
}
[b-kyemmxhg9r] .comp-input:focus { outline: none; border-color: #0e7490; box-shadow: 0 0 0 2px rgba(14,116,144,0.12); }

[b-kyemmxhg9r] .comp-radio {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 0.85rem;
    border: 1px solid #d1d5db;
    border-radius: 0.5rem;
    font-size: 0.83rem;
    font-weight: 500;
    cursor: pointer;
    color: #374151;
    transition: all 0.1s;
}
[b-kyemmxhg9r] .comp-radio input[type="radio"] { display: none; }
[b-kyemmxhg9r] .comp-radio-earning-active   { border-color: #10b981; background: #f0fdf4; color: #16a34a; }
[b-kyemmxhg9r] .comp-radio-deduction-active { border-color: #f43f5e; background: #fff1f2; color: #f43f5e; }
/* /Pages/Accountant/Payroll/EmploymentLetters.razor.rz.scp.css */
.letters-page[b-x9x6ylkb5q] { --touch-target-min: 2.5rem; width: 100%; margin: 0 auto; padding: var(--spacing-4); color: var(--color-text-primary); }
.page-heading[b-x9x6ylkb5q] { margin-bottom: var(--spacing-5); }
.page-heading h1[b-x9x6ylkb5q] { margin: var(--spacing-2) 0 0; font-size: var(--font-size-3xl); }
.page-heading p[b-x9x6ylkb5q], .section-heading p[b-x9x6ylkb5q], .history-heading p[b-x9x6ylkb5q] { margin: var(--spacing-2) 0 0; color: var(--color-text-muted); }
.back-link[b-x9x6ylkb5q] { color: var(--color-primary-700); font-size: var(--font-size-sm); }
.letters-layout[b-x9x6ylkb5q] { display: grid; gap: var(--spacing-5); }
.issue-panel[b-x9x6ylkb5q], .history-panel[b-x9x6ylkb5q] { background: var(--color-surface-primary); border: 1px solid var(--color-border); border-radius: var(--radius-sm); box-shadow: var(--shadow-sm); }
.issue-panel[b-x9x6ylkb5q] { padding: var(--spacing-5); }
.section-heading[b-x9x6ylkb5q], .history-heading[b-x9x6ylkb5q] { display: flex; align-items: flex-start; gap: var(--spacing-3); margin-bottom: var(--spacing-5); }
.section-heading h2[b-x9x6ylkb5q], .history-heading h2[b-x9x6ylkb5q] { margin: 0; font-size: var(--font-size-xl); }
.section-icon[b-x9x6ylkb5q] { width: var(--touch-target-min); height: var(--touch-target-min); display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; color: var(--color-primary-700); background: var(--color-primary-50); border-radius: var(--radius-sm); }
.form-grid[b-x9x6ylkb5q] { display: grid; grid-template-columns: 1fr; gap: var(--spacing-3); }
.field[b-x9x6ylkb5q], .compact-field[b-x9x6ylkb5q] { display: flex; flex-direction: column; gap: var(--spacing-2); color: var(--color-text-secondary); font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); }
.field select[b-x9x6ylkb5q], .compact-field select[b-x9x6ylkb5q], .field[b-x9x6ylkb5q]  input, .field[b-x9x6ylkb5q]  textarea { width: 100%; min-height: var(--touch-target-min); padding: var(--spacing-3) var(--spacing-4); color: var(--color-text-primary); background: var(--color-surface-primary); border: 1px solid var(--color-border-dark); border-radius: var(--input-radius); }
.field[b-x9x6ylkb5q]  textarea { min-height: var(--spacing-32); resize: vertical; }
.full-width[b-x9x6ylkb5q] { grid-column: 1 / -1; }
.issue-button[b-x9x6ylkb5q] { width: 100%; margin-top: var(--spacing-4); }
.statutory-options[b-x9x6ylkb5q] { display: flex; flex-wrap: wrap; gap: var(--spacing-3) var(--spacing-5); padding: var(--spacing-4); border: 1px solid var(--color-border); border-radius: var(--radius-sm); }
.statutory-options legend[b-x9x6ylkb5q] { padding: 0 var(--spacing-2); color: var(--color-text-secondary); font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); }
.statutory-options label[b-x9x6ylkb5q] { display: inline-flex; align-items: center; gap: var(--spacing-2); min-height: var(--touch-target-min); font-size: var(--font-size-sm); }
.statutory-options[b-x9x6ylkb5q]  input { width: 1rem; height: 1rem; }
.compensation-action[b-x9x6ylkb5q] { display: flex; align-items: center; flex-wrap: wrap; gap: var(--spacing-3); }
.compensation-action small[b-x9x6ylkb5q] { color: var(--color-text-muted); }
.secondary-button[b-x9x6ylkb5q] { min-height: var(--touch-target-min); display: inline-flex; align-items: center; justify-content: center; gap: var(--spacing-2); padding: var(--spacing-3) var(--spacing-4); color: var(--color-primary-700); background: var(--color-surface-primary); border: 1px solid var(--color-primary-500); border-radius: var(--radius-sm); font-weight: var(--font-weight-semibold); }
.compensation-preview[b-x9x6ylkb5q] { border: 1px solid var(--color-border); border-radius: var(--radius-sm); overflow: hidden; }
.preview-heading[b-x9x6ylkb5q] { display: flex; justify-content: space-between; gap: var(--spacing-4); padding: var(--spacing-4); background: var(--color-primary-50); }
.preview-heading h3[b-x9x6ylkb5q] { margin: 0; font-size: var(--font-size-lg); }
.preview-heading span[b-x9x6ylkb5q] { color: var(--color-text-muted); font-size: var(--font-size-sm); }
.preview-heading strong[b-x9x6ylkb5q] { color: var(--color-primary-800); white-space: nowrap; }
.preview-table-wrap[b-x9x6ylkb5q] { overflow-x: auto; }
.preview-table[b-x9x6ylkb5q] { min-width: 32rem; }
.preview-table th:not(:first-child)[b-x9x6ylkb5q], .preview-table td:not(:first-child)[b-x9x6ylkb5q] { text-align: right; }
.preview-table .employeededuction td[b-x9x6ylkb5q] { color: var(--color-danger-700); }
.preview-table .employercontribution td[b-x9x6ylkb5q] { color: var(--color-text-muted); }
.preview-table tfoot th[b-x9x6ylkb5q] { background: var(--color-surface-secondary); }
.history-panel[b-x9x6ylkb5q] { overflow: hidden; }
.history-heading[b-x9x6ylkb5q] { justify-content: space-between; align-items: flex-end; padding: var(--spacing-5); margin: 0; border-bottom: 1px solid var(--color-border-light); }
.compact-field[b-x9x6ylkb5q] { min-width: 10rem; }
.table-wrap[b-x9x6ylkb5q] { overflow-x: auto; }
table[b-x9x6ylkb5q] { width: 100%; border-collapse: collapse; font-size: var(--font-size-sm); }
th[b-x9x6ylkb5q], td[b-x9x6ylkb5q] { padding: var(--spacing-4); text-align: left; border-bottom: 1px solid var(--color-border-light); }
th[b-x9x6ylkb5q] { color: var(--color-text-muted); background: var(--color-surface-secondary); font-size: var(--font-size-xs); text-transform: uppercase; }
td strong[b-x9x6ylkb5q], td small[b-x9x6ylkb5q] { display: block; }
td small[b-x9x6ylkb5q] { margin-top: var(--spacing-1); color: var(--color-text-muted); }
.type-badge[b-x9x6ylkb5q] { display: inline-flex; padding: var(--spacing-1) var(--spacing-2); color: var(--color-primary-800); background: var(--color-primary-50); border-radius: var(--radius-sm); font-weight: var(--font-weight-semibold); }
.action-cell[b-x9x6ylkb5q] { width: var(--touch-target-min); }
.icon-button[b-x9x6ylkb5q] { width: var(--touch-target-min); height: var(--touch-target-min); display: inline-flex; align-items: center; justify-content: center; color: var(--color-primary-700); background: var(--color-surface-primary); border: 1px solid var(--color-primary-300); border-radius: var(--radius-sm); }
.icon-button:disabled[b-x9x6ylkb5q] { opacity: var(--opacity-60); }
.primary-button[b-x9x6ylkb5q] { min-height: var(--touch-target-min); display: inline-flex; align-items: center; justify-content: center; gap: var(--spacing-2); padding: var(--spacing-3) var(--spacing-5); color: var(--color-text-white); background: var(--color-primary-600); border: 1px solid var(--color-primary-600); border-radius: var(--radius-sm); font-weight: var(--font-weight-semibold); }
.state-panel[b-x9x6ylkb5q] { min-height: var(--spacing-32); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--spacing-2); padding: var(--spacing-8); text-align: center; color: var(--color-text-muted); }
.sr-only[b-x9x6ylkb5q] { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
[b-x9x6ylkb5q] .validation-errors { margin: 0 0 var(--spacing-4); padding: var(--spacing-3) var(--spacing-5); color: var(--color-danger-700); background: var(--color-danger-50); border: 1px solid var(--color-danger-200); border-radius: var(--radius-sm); }

@media (min-width: 768px) {
    .letters-page[b-x9x6ylkb5q] { padding: var(--spacing-6); }
    .form-grid[b-x9x6ylkb5q] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1280px) {
    .letters-layout[b-x9x6ylkb5q] { grid-template-columns: minmax(22rem, .8fr) minmax(0, 1.4fr); align-items: start; }
    .issue-panel[b-x9x6ylkb5q] { position: sticky; top: var(--spacing-4); }
}

@media (max-width: 767px) {
    .history-heading[b-x9x6ylkb5q] { align-items: stretch; flex-direction: column; }
    .compact-field[b-x9x6ylkb5q] { width: 100%; }
    table[b-x9x6ylkb5q], tbody[b-x9x6ylkb5q] { display: block; }
    thead[b-x9x6ylkb5q] { display: none; }
    tr[b-x9x6ylkb5q] { display: grid; grid-template-columns: 1fr auto; gap: var(--spacing-3); padding: var(--spacing-4); border-bottom: 1px solid var(--color-border-light); }
    td[b-x9x6ylkb5q] { display: block; padding: 0; border: 0; }
    td[b-x9x6ylkb5q]::before { content: attr(data-label); display: block; margin-bottom: var(--spacing-1); color: var(--color-text-muted); font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold); text-transform: uppercase; }
    td:nth-child(2)[b-x9x6ylkb5q], td:nth-child(3)[b-x9x6ylkb5q] { grid-column: 1; }
    .action-cell[b-x9x6ylkb5q] { grid-column: 2; grid-row: 1; }
    .action-cell[b-x9x6ylkb5q]::before { display: none; }
}
/* /Pages/Accountant/Payroll/Index.razor.rz.scp.css */
.payroll-page[b-iryhaj527t] {
    /* Scoped styles for Accountant payroll index page */
}

/* Page title — uppercase bold matching WF-06 */
.idx-page-title[b-iryhaj527t] {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--color-text-primary);
    text-transform: uppercase;
    letter-spacing: -0.02em;
}

/* Generate Payroll button */
.idx-btn-gen[b-iryhaj527t] {
    background: var(--color-primary-600, #4f46e5);
    color: #fff;
    padding: 0.55rem 1.1rem;
    border-radius: 9px;
    text-decoration: none;
    transition: background 0.15s;
}
.idx-btn-gen:hover[b-iryhaj527t] {
    background: var(--color-primary-700, #4338ca);
    color: #fff;
}

/* KPI cards — compact icon + value layout matching WF-06 */
.idx-kpi-card[b-iryhaj527t] {
    background: #fff;
    border: 1px solid var(--color-border, #e5e7eb);
    border-radius: 12px;
    padding: 1rem 1.25rem;
    display: flex;
    align-items: center;
    gap: 14px;
}
.idx-kpi-icon[b-iryhaj527t] {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    flex-shrink: 0;
}
.idx-kpi-label[b-iryhaj527t] {
    font-size: 0.68rem;
    font-weight: 700;
    color: var(--color-text-muted, #718096);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 2px;
}
.idx-kpi-value[b-iryhaj527t] {
    font-size: 1.75rem;
    font-weight: 800;
    color: var(--color-text-primary, #2d3748);
    line-height: 1.1;
}

/* Net payable — purple (matching WF-06) */
.idx-net-amt[b-iryhaj527t] {
    color: #7c3aed;
}

/* Deductions — danger red */
.idx-deduct-amt[b-iryhaj527t] {
    color: var(--color-danger-600, #dc2626);
    font-weight: 600;
}

/* Status badge pill */
.idx-status-badge[b-iryhaj527t] {
    display: inline-block;
    padding: 0.2rem 0.65rem;
    border-radius: 20px;
    font-size: 0.72rem;
    font-weight: 700;
}
.idx-status-draft[b-iryhaj527t] {
    background: #fef9c3;
    color: #a16207;
}
.idx-status-submitted[b-iryhaj527t] {
    background: #fef3c7;
    color: #b45309;
}
.idx-status-approved[b-iryhaj527t] {
    background: #dbeafe;
    color: #1d4ed8;
}
.idx-status-transferred[b-iryhaj527t], .idx-status-paid[b-iryhaj527t] {
    background: #dcfce7;
    color: #15803d;
}
.idx-status-rejected[b-iryhaj527t] {
    background: #fee2e2;
    color: #b91c1c;
}

/* Mark paid icon button */
.idx-btn-action-success[b-iryhaj527t] {
    transition: color 0.15s, background 0.15s;
}
.idx-btn-action-success:hover[b-iryhaj527t] {
    color: var(--color-success-600, #16a34a);
    background: var(--color-success-50, #f0fdf4);
}

/* /Pages/Accountant/Payroll/Run.razor.rz.scp.css */
.payroll-run-page[b-pdtxh83ksj] {
    /* Scoped styles for Accountant payroll run page */
}

/* /Pages/Accountant/Payroll/RunDetail.razor.rz.scp.css */
[b-nt1qeanowe] .rd-btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.45rem 1.1rem;
    background: #0e7490;
    color: #fff;
    border-radius: 0.5rem;
    font-size: 0.85rem;
    font-weight: 600;
    border: none;
    cursor: pointer;
    transition: background 0.15s;
}
[b-nt1qeanowe] .rd-btn-primary:hover { background: #0a5f73; }
[b-nt1qeanowe] .rd-btn-primary:disabled { opacity: 0.6; cursor: not-allowed; }

[b-nt1qeanowe] .rd-btn-secondary {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.45rem 1.1rem;
    background: #fff;
    color: #374151;
    border-radius: 0.5rem;
    font-size: 0.85rem;
    font-weight: 500;
    border: 1px solid #d1d5db;
    cursor: pointer;
    text-decoration: none;
    transition: background 0.15s;
}
[b-nt1qeanowe] .rd-btn-secondary:hover { background: #f9fafb; }
[b-nt1qeanowe] .rd-btn-secondary:disabled { opacity: 0.6; cursor: not-allowed; }

[b-nt1qeanowe] .rd-btn-success {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.45rem 1.1rem;
    background: #16a34a;
    color: #fff;
    border-radius: 0.5rem;
    font-size: 0.85rem;
    font-weight: 600;
    border: none;
    cursor: pointer;
    transition: background 0.15s;
}
[b-nt1qeanowe] .rd-btn-success:hover { background: #15803d; }
[b-nt1qeanowe] .rd-btn-success:disabled { opacity: 0.6; cursor: not-allowed; }

/* Slip rows */
[b-nt1qeanowe] .rd-slip-block {
    border-bottom: 1px solid #f1f5f9;
    transition: background 0.1s;
}
[b-nt1qeanowe] .rd-slip-block:last-child { border-bottom: none; }

[b-nt1qeanowe] .rd-slip-row {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.85rem 1.25rem;
    cursor: pointer;
    transition: background 0.1s;
}
[b-nt1qeanowe] .rd-slip-row:hover { background: #f8fafc; }
[b-nt1qeanowe] .rd-slip-expanded > .rd-slip-row { background: #f0f9ff; }

[b-nt1qeanowe] .rd-slip-avatar {
    width: 36px; height: 36px;
    border-radius: 50%;
    background: linear-gradient(135deg, #0e7490, #0891b2);
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: 0.875rem;
    font-weight: 700;
    flex-shrink: 0;
    text-transform: uppercase;
}

[b-nt1qeanowe] .rd-slip-info { flex: 1; min-width: 0; }
[b-nt1qeanowe] .rd-slip-name { font-size: 0.875rem; font-weight: 600; color: #111827; }
[b-nt1qeanowe] .rd-slip-sub  { font-size: 0.72rem; color: #6b7280; margin-top: 1px; }

[b-nt1qeanowe] .rd-slip-amounts {
    text-align: right;
    flex-shrink: 0;
    min-width: 80px;
}
[b-nt1qeanowe] .rd-slip-net { min-width: 100px; }

/* Expanded detail area */
[b-nt1qeanowe] .rd-slip-detail {
    padding: 1rem 1.25rem 1.25rem 4.25rem;
    background: #f8fafc;
    border-top: 1px solid #e8f4ff;
}

[b-nt1qeanowe] .rd-detail-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    margin-bottom: 0.75rem;
}

[b-nt1qeanowe] .rd-detail-section-title {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding-bottom: 0.3rem;
    border-bottom: 1px solid #e2e8f0;
    margin-bottom: 0.35rem;
}

[b-nt1qeanowe] .rd-detail-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 0.25rem 0;
    font-size: 0.82rem;
    border-bottom: 1px solid #f1f5f9;
}
[b-nt1qeanowe] .rd-detail-row:last-child { border-bottom: none; }
[b-nt1qeanowe] .rd-detail-label { color: #4b5563; }
[b-nt1qeanowe] .rd-detail-value { font-weight: 500; }

[b-nt1qeanowe] .rd-attendance-info {
    font-size: 0.75rem;
    color: #0e7490;
    background: #ecfeff;
    border: 1px solid #a5f3fc;
    border-radius: 0.375rem;
    padding: 0.35rem 0.75rem;
    margin-bottom: 0.75rem;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

/* Adjustments */
[b-nt1qeanowe] .rd-adj-section {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 0.5rem;
    padding: 0.75rem 1rem;
}
[b-nt1qeanowe] .rd-adj-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.5rem;
}
[b-nt1qeanowe] .rd-btn-add-adj {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.25rem 0.65rem;
    background: #0e7490;
    color: #fff;
    border-radius: 0.375rem;
    font-size: 0.75rem;
    font-weight: 600;
    border: none;
    cursor: pointer;
}
[b-nt1qeanowe] .rd-btn-add-adj:hover { background: #0a5f73; }

[b-nt1qeanowe] .rd-adj-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.35rem 0;
    border-bottom: 1px solid #f9fafb;
    font-size: 0.82rem;
}
[b-nt1qeanowe] .rd-adj-row:last-child { border-bottom: none; }

[b-nt1qeanowe] .rd-adj-type {
    font-size: 0.7rem;
    font-weight: 600;
    border-radius: 9999px;
    padding: 0.15rem 0.55rem;
}
[b-nt1qeanowe] .rd-adj-positive  { background: #f0fdf4; color: #16a34a; }
[b-nt1qeanowe] .rd-adj-negative  { background: #fff1f2; color: #e11d48; }

[b-nt1qeanowe] .rd-adj-del {
    width: 22px; height: 22px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%;
    border: none;
    background: #f3f4f6;
    color: #9ca3af;
    cursor: pointer;
    flex-shrink: 0;
    transition: background 0.1s, color 0.1s;
}
[b-nt1qeanowe] .rd-adj-del:hover { background: #fee2e2; color: #ef4444; }

/* Form */
[b-nt1qeanowe] .rd-label {
    display: block;
    font-size: 0.8rem;
    font-weight: 600;
    color: #374151;
    margin-bottom: 0.3rem;
}
[b-nt1qeanowe] .rd-input {
    width: 100%;
    padding: 0.5rem 0.75rem;
    border: 1px solid #d1d5db;
    border-radius: 0.5rem;
    font-size: 0.875rem;
    color: #111827;
    background: #fff;
    box-sizing: border-box;
}
[b-nt1qeanowe] .rd-input:focus { outline: none; border-color: #0e7490; }

/* Mobile adjustments */
@media (max-width: 640px) {
    [b-nt1qeanowe] .rd-slip-amounts { display: none; }
    [b-nt1qeanowe] .rd-slip-net { display: block !important; }
    [b-nt1qeanowe] .rd-detail-grid { grid-template-columns: 1fr; }
}

/* ============= New classes for redesigned header / badges / meta ============= */

[b-nt1qeanowe] .rd-title-row {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
    margin-bottom: 0.25rem;
}

[b-nt1qeanowe] .rd-page-title {
    font-size: 1.25rem;
    font-weight: 800;
    color: var(--color-text-primary, #1e293b);
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

[b-nt1qeanowe] .rd-badge {
    font-size: 0.72rem;
    font-weight: 700;
    padding: 0.2rem 0.65rem;
    border-radius: 9999px;
    white-space: nowrap;
}
[b-nt1qeanowe] .rd-badge-amber  { background: #fef9c3; color: #a16207; }
[b-nt1qeanowe] .rd-badge-green  { background: #dcfce7; color: #15803d; }
[b-nt1qeanowe] .rd-badge-blue   { background: #dbeafe; color: #1d4ed8; }
[b-nt1qeanowe] .rd-badge-purple { background: #f3e8ff; color: #7c3aed; }
[b-nt1qeanowe] .rd-badge-purple-solid { background: #7c3aed; color: #fff; }
[b-nt1qeanowe] .rd-badge-red    { background: #fee2e2; color: #b91c1c; }

/* Net payable KPI card (purple) */
[b-nt1qeanowe] .rd-kpi-net {
    background: var(--color-primary-600, #4f46e5);
    border: 1px solid transparent;
    box-shadow: 0 1px 3px rgba(0,0,0,0.12);
}

/* Meta row */
[b-nt1qeanowe] .rd-meta-row {
    display: flex;
    gap: 2rem;
    flex-wrap: wrap;
    background: #fff;
    border: 1px solid var(--color-border, #e5e7eb);
    border-radius: 0.625rem;
    padding: 0.875rem 1.25rem;
}
[b-nt1qeanowe] .rd-meta-cell { display: flex; flex-direction: column; }
[b-nt1qeanowe] .rd-meta-label { font-size: 0.72rem; color: var(--color-text-muted, #94a3b8); margin-bottom: 0.15rem; }
[b-nt1qeanowe] .rd-meta-value { font-size: 0.875rem; font-weight: 700; color: var(--color-text-primary, #1e293b); }
[b-nt1qeanowe] .rd-meta-date  { font-size: 0.7rem; color: var(--color-text-muted, #94a3b8); margin-top: 0.1rem; }

/* Per-staff Slip + Details buttons */
[b-nt1qeanowe] .rd-btn-slip {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.3rem 0.75rem;
    border: 1.5px solid var(--color-border, #e2e8f0);
    background: #fff;
    border-radius: 0.4rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: #475569;
    cursor: pointer;
    flex-shrink: 0;
    white-space: nowrap;
    transition: background 0.1s, border-color 0.1s;
}
[b-nt1qeanowe] .rd-btn-slip:hover { background: #f0f9ff; border-color: #93c5fd; color: #1d4ed8; }

[b-nt1qeanowe] .rd-btn-details {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.3rem 0.75rem;
    border: 1.5px solid var(--color-border, #e2e8f0);
    background: #fff;
    border-radius: 0.4rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: #475569;
    cursor: pointer;
    flex-shrink: 0;
    white-space: nowrap;
}
[b-nt1qeanowe] .rd-btn-details:hover { background: #f8fafc; }
[b-nt1qeanowe] .rd-btn-details-open { background: #f0f9ff; border-color: #93c5fd; }

/* Absent badge */
[b-nt1qeanowe] .rd-absent-badge {
    background: #fee2e2;
    color: #dc2626;
    font-size: 0.68rem;
    font-weight: 700;
    padding: 0.1rem 0.45rem;
    border-radius: 9999px;
    margin-left: 0.25rem;
}

/* Component arrows */
[b-nt1qeanowe] .rd-comp-arrow-up { color: var(--color-success-600, #16a34a); font-size: 0.7rem; }
[b-nt1qeanowe] .rd-comp-arrow-dn { color: var(--color-danger-600, #dc2626); font-size: 0.7rem; }

/* Attendance 4-cell grid */
[b-nt1qeanowe] .rd-att-box {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.5rem;
    margin-top: 0.75rem;
}
[b-nt1qeanowe] .rd-att-cell {
    border: 1px solid var(--color-border, #e2e8f0);
    border-radius: 0.5rem;
    padding: 0.6rem 0.5rem;
    text-align: center;
    background: #fff;
}
[b-nt1qeanowe] .rd-att-val {
    font-size: 1.1rem;
    font-weight: 800;
    color: var(--color-text-primary, #1e293b);
}
[b-nt1qeanowe] .rd-att-lbl {
    font-size: 0.65rem;
    color: var(--color-text-muted, #94a3b8);
    margin-top: 0.15rem;
}
[b-nt1qeanowe] .rd-att-present { background: #f0fdf4; border-color: #bbf7d0; }
[b-nt1qeanowe] .rd-att-absent  { background: #fff5f5; border-color: #fecaca; }
[b-nt1qeanowe] .rd-att-perday  { background: #f0f9ff; border-color: #bae6fd; }

/* Approve modal */
[b-nt1qeanowe] .rd-approve-icon {
    width: 52px; height: 52px;
    border-radius: 50%;
    background: var(--color-primary-600, #4f46e5);
    display: flex; align-items: center; justify-content: center;
}
[b-nt1qeanowe] .rd-approve-info-table {
    background: #f0f9ff;
    border: 1px solid #bae6fd;
    border-radius: 0.625rem;
    overflow: hidden;
}
[b-nt1qeanowe] .rd-approve-info-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.55rem 1rem;
    border-bottom: 1px solid #e0f2fe;
    font-size: 0.82rem;
}
[b-nt1qeanowe] .rd-approve-info-row:last-child { border-bottom: none; }
[b-nt1qeanowe] .rd-approve-info-label { color: #0369a1; font-weight: 500; }
[b-nt1qeanowe] .rd-approve-info-value { color: #0c4a6e; font-weight: 700; }
[b-nt1qeanowe] .rd-approve-warning {
    background: #fffbeb;
    border: 1px solid #fde68a;
    border-radius: 0.5rem;
    padding: 0.6rem 0.875rem;
    font-size: 0.8rem;
    color: #92400e;
    text-align: left;
}

/* Expanded slip detail — 2-column left (components) / right (adjustments) */
[b-nt1qeanowe] .rd-slip-detail {
    background: #f8fafc;
    border-top: 1px solid #e2e8f0;
}

[b-nt1qeanowe] .rd-detail-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    border-top: none;
}

[b-nt1qeanowe] .rd-detail-grid > div:first-child {
    padding: 1rem 1.25rem;
    border-right: 1px solid #e2e8f0;
}

[b-nt1qeanowe] .rd-detail-grid > div:last-child {
    padding: 1rem 1.25rem;
}

/* /Pages/Accountant/Payroll/StaffSalaries.razor.rz.scp.css */
/* ─── Shared Buttons ──────────────────────────────────────── */
[b-jthhlc9n4o] .ss-btn-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    padding: 0.45rem 1rem;
    background: #fff;
    color: #374151;
    border-radius: 0.5rem;
    font-size: 0.85rem;
    font-weight: 500;
    border: 1px solid #d1d5db;
    cursor: pointer;
    text-decoration: none;
    transition: background 0.15s;
}
[b-jthhlc9n4o] .ss-btn-secondary:hover { background: #f9fafb; }

/* ─── KPI Cards ───────────────────────────────────────────── */
[b-jthhlc9n4o] .ss-kpi-card {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 0.75rem;
    padding: 1rem 1.1rem;
    display: flex;
    align-items: center;
    gap: 0.85rem;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}
[b-jthhlc9n4o] .ss-kpi-icon {
    width: 38px; height: 38px;
    border-radius: 0.5rem;
    display: flex; align-items: center; justify-content: center;
    font-size: 1rem;
    flex-shrink: 0;
}
[b-jthhlc9n4o] .ss-kpi-neutral  { background: #f1f5f9; color: #64748b; }
[b-jthhlc9n4o] .ss-kpi-success  { background: #dcfce7; color: #16a34a; }
[b-jthhlc9n4o] .ss-kpi-warning  { background: #fef9c3; color: #ca8a04; }
[b-jthhlc9n4o] .ss-kpi-purple   { background: #ede9fe; color: #7c3aed; }
[b-jthhlc9n4o] .ss-kpi-label {
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #94a3b8;
    margin-bottom: 0.15rem;
}
[b-jthhlc9n4o] .ss-kpi-val {
    font-size: 1.35rem;
    font-weight: 800;
    color: #0f172a;
    line-height: 1.1;
}
[b-jthhlc9n4o] .ss-kpi-val-success { color: #16a34a; }
[b-jthhlc9n4o] .ss-kpi-val-warning { color: #ca8a04; }

/* ─── Toolbar ─────────────────────────────────────────────── */
[b-jthhlc9n4o] .ss-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
    padding: 0.75rem 1rem;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 0.75rem;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}
[b-jthhlc9n4o] .ss-search-wrap {
    position: relative;
    flex: 1;
    min-width: 200px;
}
[b-jthhlc9n4o] .ss-search-icon {
    position: absolute;
    left: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    color: #94a3b8;
    font-size: 0.78rem;
    pointer-events: none;
}
[b-jthhlc9n4o] .ss-search-input {
    width: 100%;
    height: 42px;
    padding: 0 2.5rem 0 2.4rem;
    border: 1.5px solid #e2e8f0;
    border-radius: 0.6rem;
    font-size: 0.875rem;
    color: #1e293b;
    background: #f8fafc;
    box-sizing: border-box;
    transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
    box-shadow: 0 1px 2px rgba(0,0,0,0.04);
}
[b-jthhlc9n4o] .ss-search-input:focus { outline: none; border-color: #0e7490; background: #fff; box-shadow: 0 0 0 3px rgba(14,116,144,0.1); }
[b-jthhlc9n4o] .ss-search-clear {
    position: absolute;
    right: 0.6rem;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: #94a3b8;
    cursor: pointer;
    padding: 0.2rem;
    font-size: 0.75rem;
}
[b-jthhlc9n4o] .ss-search-clear:hover { color: #64748b; }
[b-jthhlc9n4o] .ss-filter-chips { display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; }
[b-jthhlc9n4o] .ss-filter-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.3rem 0.75rem;
    border-radius: 9999px;
    border: 1px solid #e2e8f0;
    background: #f8fafc;
    font-size: 0.78rem;
    font-weight: 500;
    color: #64748b;
    cursor: pointer;
    transition: all 0.15s;
}
[b-jthhlc9n4o] .ss-filter-chip:hover { border-color: #0e7490; color: #0e7490; background: #f0fdff; }
[b-jthhlc9n4o] .ss-filter-chip.ss-chip-on { background: #0e7490; color: #fff; border-color: #0e7490; font-weight: 600; }
[b-jthhlc9n4o] .ss-chip-badge { font-size: 0.68rem; background: rgba(255,255,255,0.3); border-radius: 9999px; padding: 0.05rem 0.4rem; font-weight: 700; }
[b-jthhlc9n4o] .ss-filter-chip:not(.ss-chip-on) .ss-chip-badge { background: #e2e8f0; color: #475569; }

/* ─── Table ───────────────────────────────────────────────── */
[b-jthhlc9n4o] .ss-thead-row { background: #f8fafc; border-bottom: 2px solid #e2e8f0; }
[b-jthhlc9n4o] .ss-th {
    padding: 0.75rem 1rem;
    font-size: 0.8125rem;
    font-weight: 600;
    color: #374151;
    white-space: nowrap;
}
[b-jthhlc9n4o] .ss-row { border-bottom: 1px solid #f1f5f9; transition: background 0.1s, border-left 0.1s; cursor: pointer; min-height: 72px; }
[b-jthhlc9n4o] .ss-row:last-child { border-bottom: none; }
[b-jthhlc9n4o] .ss-row:hover { background: #f8fafc; }
[b-jthhlc9n4o] .ss-row-expanded { background: var(--color-teal-50) !important; border-left: 4px solid var(--color-teal-700); }
[b-jthhlc9n4o] .ss-td { padding: 0.875rem 1rem; vertical-align: middle; font-size: 0.875rem; }
[b-jthhlc9n4o] .ss-money-right { text-align: right; font-variant-numeric: tabular-nums; }
[b-jthhlc9n4o] .ss-avatar {
    width: 38px; height: 38px;
    border-radius: 50%;
    background: linear-gradient(135deg, #0e7490, #0891b2);
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: 0.88rem; font-weight: 700; flex-shrink: 0; text-transform: uppercase;
}
[b-jthhlc9n4o] .ss-emp-name  { font-size: 0.875rem; font-weight: 600; color: #0f172a; }
[b-jthhlc9n4o] .ss-emp-meta  { font-size: 0.75rem; color: #64748b; margin-top: 0.15rem; }
[b-jthhlc9n4o] .ss-amt-earn  { font-weight: 600; font-size: 0.85rem; color: #15803d; font-variant-numeric: tabular-nums; }
[b-jthhlc9n4o] .ss-amt-deduct{ font-weight: 600; font-size: 0.85rem; color: var(--color-danger-600,#dc2626); font-variant-numeric: tabular-nums; }
[b-jthhlc9n4o] .ss-amt-net   { font-weight: 700; font-size: 0.875rem; color: #0f172a; font-variant-numeric: tabular-nums; }
[b-jthhlc9n4o] .ss-dash      { color: #cbd5e1; font-size: 0.85rem; }
[b-jthhlc9n4o] .ss-chip      { display: inline-block; padding: 0.22rem 0.65rem; border-radius: 9999px; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.02em; }
[b-jthhlc9n4o] .ss-chip-active  { background: #dcfce7; color: #15803d; }
[b-jthhlc9n4o] .ss-chip-pending { background: #fef9c3; color: #a16207; }
[b-jthhlc9n4o] .ss-icon-btn {
    display: inline-flex; align-items: center; gap: 0.32rem;
    height: 32px;
    padding: 0 0.65rem;
    border-radius: 0.4rem;
    border: 1px solid #e2e8f0;
    background: #fff;
    color: #374151;
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s;
    white-space: nowrap;
}
[b-jthhlc9n4o] .ss-icon-btn:hover { background: #0e7490; color: #fff; border-color: #0e7490; }

[b-jthhlc9n4o] .ss-action-group { display: flex; align-items: center; gap: 0.4rem; justify-content: flex-end; }

[b-jthhlc9n4o] .ss-inline-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.32rem;
    height: 32px;
    padding: 0 0.65rem;
    margin-right: 0.35rem;
    border-radius: 0.4rem;
    border: 1px solid var(--color-border, #e2e8f0);
    background: #fff;
    color: var(--color-primary-600, #0e7490);
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s;
}
[b-jthhlc9n4o] .ss-inline-btn:hover {
    background: var(--color-primary-50, #f0f9ff);
    border-color: var(--color-primary-200, #bae6fd);
    color: var(--color-primary-700, #0c4a6e);
}

[b-jthhlc9n4o] .ss-accordion-row td {
    padding: 0;
    border-bottom: 1px solid #e2e8f0;
}

[b-jthhlc9n4o] .ss-accordion-body {
    background: #F8FAFC;
    border-top: 2px solid var(--color-teal-700);
    padding: 1.25rem 1.5rem 1.35rem;
}

[b-jthhlc9n4o] .ss-acc-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 64px;
    color: #64748b;
    font-size: 0.85rem;
}

[b-jthhlc9n4o] .ss-acc-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.7rem;
}

[b-jthhlc9n4o] .ss-acc-title {
    font-size: 0.85rem;
    font-weight: 700;
    color: #0f172a;
}

[b-jthhlc9n4o] .ss-acc-subtitle {
    font-size: 0.72rem;
    color: #64748b;
    margin-top: 0.1rem;
}

[b-jthhlc9n4o] .ss-acc-grid {
    display: grid;
    gap: 0.7rem;
}
[b-jthhlc9n4o] .ss-acc-grid-1 { grid-template-columns: minmax(0, 1fr); }
[b-jthhlc9n4o] .ss-acc-grid-2 { grid-template-columns: 1fr 1fr; }

[b-jthhlc9n4o] .ss-acc-col {
    background: #fff;
    border: 1px solid var(--color-border, #e2e8f0);
    border-radius: 0.55rem;
    padding: 0.65rem 0.7rem;
}

[b-jthhlc9n4o] .ss-acc-col-title {
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #475569;
    margin-bottom: 0.45rem;
    display: flex;
    align-items: center;
    gap: 0.32rem;
}

[b-jthhlc9n4o] .ss-acc-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    font-size: 0.78rem;
    color: #334155;
    padding: 0.24rem 0;
}

[b-jthhlc9n4o] .ss-acc-reason {
    color: #94a3b8;
    font-size: 0.68rem;
    font-weight: 500;
}

[b-jthhlc9n4o] .ss-acc-empty {
    font-size: 0.75rem;
    color: #94a3b8;
    padding: 0.2rem 0;
}

[b-jthhlc9n4o] .ss-empty-dashed {
    border: 2px dashed #d1d5db;
    border-radius: 0.5rem;
    padding: 0.85rem 1rem;
    text-align: center;
    color: #94a3b8;
    font-size: 0.78rem;
    margin-top: 0.25rem;
}
[b-jthhlc9n4o] .ss-empty-dashed a {
    display: inline-flex; align-items: center; gap: 0.3rem;
    margin-top: 0.4rem;
    color: #0e7490; font-size: 0.75rem; font-weight: 600;
    text-decoration: none;
}
[b-jthhlc9n4o] .ss-empty-dashed a:hover { text-decoration: underline; }

[b-jthhlc9n4o] .ss-acc-summary {
    margin-top: 0.7rem;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.55rem;
}

[b-jthhlc9n4o] .ss-acc-kpi {
    background: #fff;
    border: 1px solid var(--color-border, #e2e8f0);
    border-radius: 0.5rem;
    padding: 0.45rem 0.55rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.76rem;
    color: #475569;
    font-variant-numeric: tabular-nums;
}

[b-jthhlc9n4o] .ss-acc-kpi-net {
    border-color: var(--color-teal-700);
    background: var(--color-teal-50);
    font-size: 0.875rem;
    font-weight: 700;
}

/* ─── Publish confirm modal ────────────────────────────────── */
[b-jthhlc9n4o] .ss-confirm-backdrop {
    position: fixed; inset: 0; z-index: 220;
    background: rgba(0,0,0,0.45);
    display: flex; align-items: center; justify-content: center;
    padding: 1rem;
}
[b-jthhlc9n4o] .ss-confirm-modal {
    background: #fff; border-radius: 0.875rem;
    box-shadow: 0 20px 60px rgba(0,0,0,0.2);
    padding: 1.75rem 1.75rem 1.5rem;
    max-width: 420px; width: calc(100% - 2rem);
}
[b-jthhlc9n4o] .ss-confirm-title { font-size: 1.05rem; font-weight: 700; color: #0f172a; margin-bottom: 0.5rem; }
[b-jthhlc9n4o] .ss-confirm-body  { font-size: 0.875rem; color: #475569; margin-bottom: 1.25rem; line-height: 1.6; }
[b-jthhlc9n4o] .ss-confirm-footer { display: flex; justify-content: flex-end; gap: 0.65rem; }

/* ─── Modal Backdrop ──────────────────────────────────────── */
[b-jthhlc9n4o] .ss-modal-backdrop {
    position: fixed; inset: 0; z-index: 200;
    background: rgba(0,0,0,0.45);
    display: flex; align-items: center; justify-content: center;
    padding: 1rem;
}

/* ─── Centered Modal ─────────────────────────────────────── */
[b-jthhlc9n4o] .ss-modal {
    background: #fff;
    border-radius: 1rem;
    box-shadow: 0 25px 60px rgba(0,0,0,0.25);
    width: min(720px, calc(100vw - 2rem));
    max-width: 720px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: ssModalIn-b-jthhlc9n4o 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes ssModalIn-b-jthhlc9n4o {
    from { transform: scale(0.9) translateY(20px); opacity: 0; }
    to   { transform: scale(1) translateY(0); opacity: 1; }
}

/* Panel header */
[b-jthhlc9n4o] .ss-panel-header {
    padding: 1.25rem;
    border-bottom: 1px solid #f1f5f9;
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    background: #fafbfc;
    flex-shrink: 0;
}
[b-jthhlc9n4o] .ss-panel-avatar {
    width: 46px; height: 46px;
    border-radius: 50%;
    background: linear-gradient(135deg, #0e7490, #0891b2);
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.1rem; font-weight: 700; flex-shrink: 0; text-transform: uppercase;
}
[b-jthhlc9n4o] .ss-panel-name { font-size: 1rem; font-weight: 700; color: #0f172a; line-height: 1.25; }
[b-jthhlc9n4o] .ss-panel-meta { font-size: 0.8rem; color: #64748b; margin-top: 0.2rem; display: flex; align-items: center; gap: 0.35rem; flex-wrap: wrap; }
[b-jthhlc9n4o] .ss-meta-sep   { color: #cbd5e1; }
[b-jthhlc9n4o] .ss-panel-chip { display: inline-flex; align-items: center; gap: 0.3rem; font-size: 0.7rem; font-weight: 700; padding: 0.2rem 0.6rem; border-radius: 9999px; }
[b-jthhlc9n4o] .ss-panel-chip-active  { background: #dcfce7; color: #15803d; }
[b-jthhlc9n4o] .ss-panel-chip-pending { background: #fef9c3; color: #a16207; }
[b-jthhlc9n4o] .ss-close-btn {
    background: none; border: none; color: #94a3b8; cursor: pointer;
    padding: 0.35rem; border-radius: 0.375rem; font-size: 0.9rem; flex-shrink: 0;
    transition: color 0.15s, background 0.15s;
}
[b-jthhlc9n4o] .ss-close-btn:hover { color: #374151; background: #f1f5f9; }

[b-jthhlc9n4o] .ss-panel-scroll {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
}

/* Form fields */
[b-jthhlc9n4o] .ss-label { display: block; font-size: 0.78rem; font-weight: 600; color: #374151; margin-bottom: 0.3rem; }
[b-jthhlc9n4o] .ss-input {
    width: 100%;
    padding: 0.45rem 0.75rem;
    border: 1px solid #d1d5db;
    border-radius: 0.5rem;
    font-size: 0.875rem;
    color: #111827;
    box-sizing: border-box;
    background: #fff;
}
[b-jthhlc9n4o] .ss-input:focus { outline: none; border-color: #0e7490; }

/* ─── Two-column component grid ───────────────────────────── */
[b-jthhlc9n4o] .ss-cols-wrap {
    display: grid;
    grid-template-columns: 1fr 1fr;
    flex: 1;
    overflow: visible;
    border-top: 1px solid #f1f5f9;
    min-height: 0;
}
[b-jthhlc9n4o] .ss-col         { padding: 0.85rem 1rem; overflow: visible; }
[b-jthhlc9n4o] .ss-col-earn    { border-right: 1px solid #f1f5f9; background: #fafffe; }
[b-jthhlc9n4o] .ss-col-deduct  { background: #fffafa; }
[b-jthhlc9n4o] .ss-col-hdr {
    font-size: 0.68rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.06em; padding: 0.25rem 0 0.5rem;
    border-bottom: 2px solid; margin-bottom: 0.5rem;
    display: flex; align-items: center; gap: 0.35rem;
}
[b-jthhlc9n4o] .ss-col-hdr-earn   { color: #15803d; border-color: #bbf7d0; }
[b-jthhlc9n4o] .ss-col-hdr-deduct { color: var(--color-danger-600,#dc2626); border-color: #fecaca; }
[b-jthhlc9n4o] .ss-col-empty  { font-size: 0.78rem; color: #94a3b8; padding: 0.75rem 0; font-style: italic; }
[b-jthhlc9n4o] .ss-comp-row {
    display: flex; align-items: center; justify-content: space-between;
    padding: 0.4rem 0; border-bottom: 1px solid #f8fafc; gap: 0.4rem;
}
[b-jthhlc9n4o] .ss-comp-row:last-of-type { border-bottom: none; }
[b-jthhlc9n4o] .ss-comp-label { font-size: 0.78rem; color: #374151; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
[b-jthhlc9n4o] .ss-amount-wrap { display: flex; align-items: center; border: 1px solid #d1d5db; border-radius: 0.375rem; overflow: hidden; flex-shrink: 0; }
[b-jthhlc9n4o] .ss-currency    { padding: 0.28rem 0.4rem; background: #f9fafb; color: #6b7280; font-size: 0.75rem; border-right: 1px solid #d1d5db; }
[b-jthhlc9n4o] .ss-amount-input {
    width: 78px; padding: 0.28rem 0.45rem; border: none;
    font-size: 0.8rem; color: #111827; text-align: right; font-variant-numeric: tabular-nums;
}
[b-jthhlc9n4o] .ss-amount-input:focus { outline: none; background: #f0fdff; }
[b-jthhlc9n4o] .ss-col-subtotal {
    display: flex; justify-content: space-between; align-items: center;
    margin-top: 0.6rem; padding: 0.45rem 0.6rem;
    border-radius: 0.375rem; font-size: 0.78rem; font-weight: 700; font-variant-numeric: tabular-nums;
}
[b-jthhlc9n4o] .ss-subtotal-earn   { background: #dcfce7; color: #15803d; }
[b-jthhlc9n4o] .ss-subtotal-deduct { background: #fee2e2; color: #b91c1c; }

/* ─── Net Summary Bar ─────────────────────────────────────── */
[b-jthhlc9n4o] .ss-net-bar {
    display: flex; align-items: center; padding: 0.85rem 1.25rem;
    background: #1e293b; color: #fff; flex-shrink: 0; min-height: 72px;
}
[b-jthhlc9n4o] .ss-net-item       { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 0.2rem; }
[b-jthhlc9n4o] .ss-net-item-total { flex: 1.4; background: rgba(255,255,255,0.07); border-radius: 0.5rem; padding: 0.35rem 0.75rem; }
[b-jthhlc9n4o] .ss-net-lbl    { font-size: 0.65rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: #94a3b8; }
[b-jthhlc9n4o] .ss-net-earn   { font-size: 1rem; font-weight: 700; color: #86efac; font-variant-numeric: tabular-nums; }
[b-jthhlc9n4o] .ss-net-deduct { font-size: 1rem; font-weight: 700; color: #fca5a5; font-variant-numeric: tabular-nums; }
[b-jthhlc9n4o] .ss-net-total  { font-size: 1.4rem; font-weight: 800; color: #fff; font-variant-numeric: tabular-nums; }
[b-jthhlc9n4o] .ss-net-sep    { width: 1px; height: 40px; background: rgba(255,255,255,0.12); margin: 0 0.5rem; flex-shrink: 0; }

/* ─── Panel Footer ────────────────────────────────────────── */
[b-jthhlc9n4o] .ss-panel-actions {
    flex-shrink: 0;
    background: #fff;
    box-shadow: 0 -4px 12px rgba(15, 23, 42, 0.08);
}

[b-jthhlc9n4o] .ss-panel-error {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    margin: 0.75rem 1.25rem 0;
    padding: 0.65rem 0.75rem;
    border: 1px solid var(--color-danger-200, #fecaca);
    border-radius: 0.5rem;
    background: var(--color-danger-50, #fef2f2);
    color: var(--color-danger-700, #b91c1c);
    font-size: 0.8rem;
    line-height: 1.4;
}

[b-jthhlc9n4o] .ss-panel-footer {
    display: flex; align-items: center; justify-content: space-between;
    padding: 0.9rem 1.25rem; border-top: 1px solid #f1f5f9;
    background: #fff; gap: 0.75rem; flex-shrink: 0;
}
[b-jthhlc9n4o] .ss-btn-ghost {
    display: inline-flex; align-items: center; gap: 0.35rem;
    padding: 0.5rem 1rem; background: none; color: #64748b;
    border: 1px solid #e2e8f0; border-radius: 0.5rem;
    font-size: 0.83rem; font-weight: 500; cursor: pointer; transition: all 0.15s;
}
[b-jthhlc9n4o] .ss-btn-ghost:hover { border-color: #94a3b8; color: #374151; background: #f8fafc; }
[b-jthhlc9n4o] .ss-btn-ghost:disabled { opacity: 0.5; cursor: not-allowed; }
[b-jthhlc9n4o] .ss-quick-date {
    padding: 0.35rem 0.7rem; background: #fff; color: #475569;
    border: 1px solid #e2e8f0; border-radius: 0.5rem;
    font-size: 0.78rem; font-weight: 500; cursor: pointer; transition: all 0.15s;
}
[b-jthhlc9n4o] .ss-quick-date:hover { border-color: #0e7490; color: #0e7490; background: #f0fdfa; }
[b-jthhlc9n4o] .ss-quick-date-on { border-color: #0e7490; color: #0e7490; background: #f0fdfa; font-weight: 600; }
[b-jthhlc9n4o] .ss-quick-date-picker {
    padding: 0.35rem 0.5rem; border: 1px solid #e2e8f0; border-radius: 0.5rem;
    font-size: 0.78rem; color: #475569; background: #fff; cursor: pointer;
}
[b-jthhlc9n4o] .ss-quick-date-picker:focus { outline: none; border-color: #0e7490; }
[b-jthhlc9n4o] .ss-btn-draft {
    display: inline-flex; align-items: center; gap: 0.35rem;
    padding: 0.5rem 1rem; background: #f1f5f9; color: #334155;
    border: 1px solid #e2e8f0; border-radius: 0.5rem;
    font-size: 0.83rem; font-weight: 600; cursor: pointer; transition: all 0.15s;
}
[b-jthhlc9n4o] .ss-btn-draft:hover { background: #e2e8f0; border-color: #cbd5e1; }
[b-jthhlc9n4o] .ss-btn-draft:disabled { opacity: 0.5; cursor: not-allowed; }
[b-jthhlc9n4o] .ss-btn-publish {
    display: inline-flex; align-items: center; gap: 0.35rem;
    padding: 0.5rem 1.15rem;
    background: var(--color-primary, #0e7490); color: #fff;
    border: none; border-radius: 0.5rem; font-size: 0.83rem; font-weight: 700;
    cursor: pointer; transition: background 0.15s;
    box-shadow: 0 1px 4px rgba(14,116,144,0.3);
}
[b-jthhlc9n4o] .ss-btn-publish:hover { background: #0a5f73; }
[b-jthhlc9n4o] .ss-btn-publish:disabled { opacity: 0.6; cursor: not-allowed; }

/* Calculate button */
[b-jthhlc9n4o] .ss-btn-calc {
    display: inline-flex; align-items: center; gap: 0.35rem;
    padding: 0.5rem 1rem;
    background: var(--color-primary, #0e7490); color: #fff;
    border: none; border-radius: 0.5rem; font-size: 0.83rem; font-weight: 700;
    cursor: pointer; transition: background 0.15s;
    box-shadow: 0 1px 4px rgba(14,116,144,0.3);
    white-space: nowrap;
}
[b-jthhlc9n4o] .ss-btn-calc:hover { background: #0a5f73; }
[b-jthhlc9n4o] .ss-btn-calc:disabled { opacity: 0.5; cursor: not-allowed; }

@media (max-width: 767px) {
    [b-jthhlc9n4o] .ss-acc-grid-2 {
        grid-template-columns: 1fr;
    }

    [b-jthhlc9n4o] .ss-modal-backdrop {
        padding: 0;
        align-items: flex-end;
    }

    [b-jthhlc9n4o] .ss-modal {
        width: 100vw;
        max-width: 100vw;
        height: 100dvh;
        max-height: 100dvh;
        border-radius: 0;
    }

    [b-jthhlc9n4o] .ss-panel-header {
        padding: 1rem;
    }

    [b-jthhlc9n4o] .ss-panel-avatar {
        width: 42px;
        height: 42px;
    }

    [b-jthhlc9n4o] .ss-cols-wrap {
        grid-template-columns: 1fr;
    }

    [b-jthhlc9n4o] .ss-col-earn {
        border-right: 0;
        border-bottom: 1px solid #f1f5f9;
    }

    [b-jthhlc9n4o] .ss-net-bar {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0.75rem;
        min-height: auto;
        padding: 1rem;
    }

    [b-jthhlc9n4o] .ss-net-item-total {
        grid-column: 1 / -1;
        width: 100%;
    }

    [b-jthhlc9n4o] .ss-net-sep {
        display: none;
    }

    [b-jthhlc9n4o] .ss-panel-footer {
        align-items: stretch;
        flex-direction: column-reverse;
        padding: 0.75rem 1rem max(0.75rem, env(safe-area-inset-bottom));
    }

    [b-jthhlc9n4o] .ss-panel-error {
        margin: 0.625rem 1rem 0;
    }

    [b-jthhlc9n4o] .ss-panel-footer > div {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0.5rem;
    }

    [b-jthhlc9n4o] .ss-btn-ghost,
    [b-jthhlc9n4o] .ss-btn-draft,
    [b-jthhlc9n4o] .ss-btn-publish,
    [b-jthhlc9n4o] .ss-btn-calc {
        min-height: 44px;
        justify-content: center;
    }

    [b-jthhlc9n4o] .ss-confirm-modal {
        width: 100%;
        max-width: 100%;
        padding: 1.25rem;
    }
}
/* /Pages/Accountant/Payroll/Statutory.razor.rz.scp.css */
.statutory-page[b-1jt2yc8r55] { --touch-target-min: 2.5rem; max-width: var(--container-xl); margin: 0 auto; padding: var(--spacing-6); color: var(--color-text-primary); }
.page-heading[b-1jt2yc8r55], .section-heading[b-1jt2yc8r55], .form-actions[b-1jt2yc8r55] { display: flex; align-items: center; justify-content: space-between; gap: var(--spacing-4); }
.page-heading[b-1jt2yc8r55] { margin-bottom: var(--spacing-6); }
.page-heading h1[b-1jt2yc8r55] { margin: var(--spacing-2) 0 0; font-size: var(--font-size-3xl); font-weight: var(--font-weight-bold); }
.page-heading p[b-1jt2yc8r55], .registration-block p[b-1jt2yc8r55] { margin: var(--spacing-2) 0 0; color: var(--color-text-muted); }
.back-link[b-1jt2yc8r55] { color: var(--color-primary-700); font-size: var(--font-size-sm); }
.privacy-note[b-1jt2yc8r55] { display: flex; align-items: center; gap: var(--spacing-3); padding: var(--spacing-4); color: var(--color-primary-800); background: var(--color-primary-50); border: 1px solid var(--color-primary-200); border-radius: var(--radius-sm); }
.config-section[b-1jt2yc8r55] { margin-bottom: var(--spacing-6); padding: var(--spacing-6); background: var(--color-surface-primary); border: 1px solid var(--color-border); border-radius: var(--radius-sm); box-shadow: var(--shadow-sm); }
.section-heading[b-1jt2yc8r55] { padding-bottom: var(--spacing-5); border-bottom: 1px solid var(--color-border-light); margin-bottom: var(--spacing-5); }
.section-heading h2[b-1jt2yc8r55] { margin: var(--spacing-2) 0 0; font-size: var(--font-size-xl); }
.section-kicker[b-1jt2yc8r55] { color: var(--color-primary-700); font-size: var(--font-size-xs); font-weight: var(--font-weight-bold); text-transform: uppercase; }
.status-badge[b-1jt2yc8r55] { padding: var(--spacing-2) var(--spacing-4); color: var(--color-success-700); background: var(--color-success-100); border-radius: var(--radius-full); font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold); }
.form-grid[b-1jt2yc8r55] { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--spacing-5); }
.field[b-1jt2yc8r55] { display: flex; flex-direction: column; gap: var(--spacing-2); color: var(--color-text-secondary); font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); }
.field input[b-1jt2yc8r55], .field select[b-1jt2yc8r55], .field textarea[b-1jt2yc8r55] { min-height: var(--touch-target-min); padding: var(--spacing-3) var(--spacing-4); color: var(--color-text-primary); background: var(--color-surface-primary); border: 1px solid var(--color-border-dark); border-radius: var(--input-radius); }
.field textarea[b-1jt2yc8r55] { min-height: var(--spacing-20); resize: vertical; }
.field-wide[b-1jt2yc8r55] { grid-column: 1 / -1; }
.registration-block[b-1jt2yc8r55], .rule-form[b-1jt2yc8r55] { margin-top: var(--spacing-6); padding-top: var(--spacing-5); border-top: 1px solid var(--color-border-light); }
.registration-block h3[b-1jt2yc8r55] { margin: 0; font-size: var(--font-size-base); }
.registration-block p[b-1jt2yc8r55] { margin-bottom: var(--spacing-5); font-size: var(--font-size-sm); }
.form-actions[b-1jt2yc8r55] { justify-content: flex-end; margin-top: var(--spacing-6); }
.primary-button[b-1jt2yc8r55], .secondary-button[b-1jt2yc8r55] { min-height: var(--touch-target-min); display: inline-flex; align-items: center; justify-content: center; gap: var(--spacing-3); padding: var(--spacing-3) var(--spacing-5); border-radius: var(--radius-sm); font-weight: var(--font-weight-semibold); }
.primary-button[b-1jt2yc8r55] { color: var(--color-text-white); background: var(--color-primary-600); border: 1px solid var(--color-primary-600); }
.secondary-button[b-1jt2yc8r55] { color: var(--color-primary-700); background: var(--color-surface-primary); border: 1px solid var(--color-primary-300); }
.primary-button:disabled[b-1jt2yc8r55] { opacity: var(--opacity-disabled); }
.loading-state[b-1jt2yc8r55], .empty-state[b-1jt2yc8r55] { display: flex; align-items: center; justify-content: center; gap: var(--spacing-3); min-height: var(--spacing-24); color: var(--color-text-muted); background: var(--color-surface-primary); border: 1px solid var(--color-border); border-radius: var(--radius-sm); }
.empty-state[b-1jt2yc8r55] { flex-direction: column; }
.rule-table-wrap[b-1jt2yc8r55] { overflow-x: auto; }
.rule-table[b-1jt2yc8r55] { width: 100%; border-collapse: collapse; font-size: var(--font-size-sm); }
.rule-table th[b-1jt2yc8r55] { padding: var(--spacing-4); text-align: left; color: var(--color-text-muted); background: var(--color-surface-secondary); border-bottom: 1px solid var(--color-border); }
.rule-table td[b-1jt2yc8r55] { padding: var(--spacing-4); vertical-align: top; border-bottom: 1px solid var(--color-border-light); }
.rule-table td span[b-1jt2yc8r55] { display: block; margin-top: var(--spacing-2); color: var(--color-text-muted); font-size: var(--font-size-xs); }
.validation-summary[b-1jt2yc8r55] { color: var(--color-danger-700); margin-bottom: var(--spacing-4); }

@media (max-width: 768px) {
    .statutory-page[b-1jt2yc8r55] { padding: var(--spacing-4); }
    .page-heading[b-1jt2yc8r55], .section-heading[b-1jt2yc8r55] { align-items: flex-start; flex-direction: column; }
    .form-grid[b-1jt2yc8r55] { grid-template-columns: 1fr; }
    .config-section[b-1jt2yc8r55] { padding: var(--spacing-4); }
}
/* /Pages/Accountant/Payroll/Structures.razor.rz.scp.css */
[b-z4vbk5ecz2] .str-shell {
    width: 100%;
    max-width: 1600px;
    margin: 0 auto;
    padding: 24px 32px;
    box-sizing: border-box;
}

[b-z4vbk5ecz2] .str-page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 24px;
}

[b-z4vbk5ecz2] .str-page-title {
    margin: 0;
    font-size: 2rem;
    font-weight: 800;
    color: #0f172a;
}

[b-z4vbk5ecz2] .str-page-subtitle {
    margin: 4px 0 0;
    color: #4b5563;
    font-size: 0.9rem;
}

[b-z4vbk5ecz2] .str-page-msg {
    margin-bottom: 16px;
    padding: 10px 12px;
    border-radius: 10px;
    font-size: 0.85rem;
    font-weight: 600;
}

[b-z4vbk5ecz2] .str-msg-ok {
    background: #ecfdf3;
    color: #166534;
    border: 1px solid #bbf7d0;
}

[b-z4vbk5ecz2] .str-msg-error {
    background: #fef2f2;
    color: #b91c1c;
    border: 1px solid #fecaca;
}

[b-z4vbk5ecz2] .str-btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    border: none;
    border-radius: 10px;
    background: var(--color-primary-600, #0e7490);
    color: #fff;
    font-size: 0.84rem;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.15s;
}

[b-z4vbk5ecz2] .str-btn-primary:hover {
    background: #0a5f73;
}

[b-z4vbk5ecz2] .str-btn-secondary {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    border: 1px solid #d1d5db;
    border-radius: 9px;
    background: #ffffff;
    color: #374151;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
}

[b-z4vbk5ecz2] .str-btn-secondary:hover {
    background: #f8fafc;
}

[b-z4vbk5ecz2] .str-insights {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    margin-bottom: 20px;
}

[b-z4vbk5ecz2] .str-insight-card {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    padding: 16px;
}

[b-z4vbk5ecz2] .str-insight-label {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #64748b;
    font-weight: 700;
}

[b-z4vbk5ecz2] .str-insight-value {
    margin-top: 6px;
    font-size: 1.25rem;
    font-weight: 800;
    color: #0f172a;
    font-variant-numeric: tabular-nums;
}

[b-z4vbk5ecz2] .str-insight-value-sm {
    margin-top: 6px;
    font-size: 1rem;
    font-weight: 700;
    color: #0f172a;
}

[b-z4vbk5ecz2] .str-cards-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
    margin-bottom: 24px;
}

[b-z4vbk5ecz2] .str-card {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    display: flex;
    flex-direction: column;
    min-height: 360px;
    overflow: hidden;
}

[b-z4vbk5ecz2] .str-card-header {
    display: flex;
    align-items: start;
    justify-content: space-between;
    gap: 12px;
    padding: 20px 20px 12px;
    border-bottom: 1px solid #f1f5f9;
}

[b-z4vbk5ecz2] .str-card-title {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
    color: #0f172a;
}

[b-z4vbk5ecz2] .str-card-meta {
    margin-top: 4px;
    font-size: 0.75rem;
    color: #4b5563;
}

[b-z4vbk5ecz2] .str-card-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

[b-z4vbk5ecz2] .str-status-chip {
    border-radius: 9999px;
    padding: 4px 10px;
    font-size: 0.68rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

[b-z4vbk5ecz2] .str-status-active {
    background: #dcfce7;
    color: #15803d;
}

[b-z4vbk5ecz2] .str-status-archived {
    background: #e5e7eb;
    color: #374151;
}

[b-z4vbk5ecz2] .str-status-pending {
    background: #fef9c3;
    color: #a16207;
}

[b-z4vbk5ecz2] .str-icon-btn {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    border: 1px solid #dbe4ee;
    background: #f8fafc;
    color: #475569;
    cursor: pointer;
}

[b-z4vbk5ecz2] .str-icon-btn:hover {
    color: var(--color-primary-600, #0e7490);
    border-color: #bae6fd;
    background: #f0f9ff;
}

[b-z4vbk5ecz2] .str-card-body {
    padding: 16px 20px 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    flex: 1;
}

[b-z4vbk5ecz2] .str-block {
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    padding: 10px 12px;
    background: #ffffff;
}

[b-z4vbk5ecz2] .str-block-earn {
    border-left: 4px solid #15803d;
    background: #f8fff9;
}

[b-z4vbk5ecz2] .str-block-deduct {
    border-left: 4px solid #dc2626;
    background: #fff9f9;
}

[b-z4vbk5ecz2] .str-block-title {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #334155;
    font-weight: 800;
    margin-bottom: 8px;
    padding-bottom: 6px;
    border-bottom: 1px solid #e2e8f0;
}

[b-z4vbk5ecz2] .str-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 5px 0;
    font-size: 0.84rem;
    line-height: 1.5;
    color: #475569;
}

[b-z4vbk5ecz2] .str-money {
    color: #0f172a;
    font-variant-numeric: tabular-nums;
}

[b-z4vbk5ecz2] .str-earn {
    color: #15803d;
}

[b-z4vbk5ecz2] .str-deduct {
    color: #dc2626;
}

[b-z4vbk5ecz2] .str-card-dates {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    font-size: 0.72rem;
    color: #4b5563;
    font-weight: 600;
}

[b-z4vbk5ecz2] .str-card-footer {
    margin-top: auto;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

[b-z4vbk5ecz2] .str-summary-pill {
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 8px;
    background: #f8fafc;
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: 0.72rem;
    color: #64748b;
}

[b-z4vbk5ecz2] .str-net-pill {
    background: #eff6ff;
    border-color: #bfdbfe;
}

[b-z4vbk5ecz2] .str-net {
    color: #0f172a;
    font-size: 0.9rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

[b-z4vbk5ecz2] .str-assn-wrap {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    overflow: hidden;
}

[b-z4vbk5ecz2] .str-assn-head {
    padding: 16px 20px;
    border-bottom: 1px solid #eef2f7;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

[b-z4vbk5ecz2] .str-assn-title {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
    color: #0f172a;
}

[b-z4vbk5ecz2] .str-toolbar-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

[b-z4vbk5ecz2] .str-assn-filters {
    padding: 12px 20px;
    border-bottom: 1px solid #eef2f7;
    display: grid;
    grid-template-columns: 1.2fr repeat(4, minmax(0, 1fr));
    gap: 10px;
}

[b-z4vbk5ecz2] .str-filter-item {
    border: 1px solid #dbe4ee;
    border-radius: 10px;
    padding: 8px 10px;
    font-size: 0.83rem;
    color: #334155;
    background: #fff;
    min-height: 38px;
}

[b-z4vbk5ecz2] .str-filter-search {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 10px;
}

[b-z4vbk5ecz2] .str-filter-search i {
    color: #94a3b8;
    font-size: 0.78rem;
}

[b-z4vbk5ecz2] .str-filter-search input {
    border: none;
    outline: none;
    width: 100%;
    font-size: 0.83rem;
    color: #334155;
}

[b-z4vbk5ecz2] .str-bulk-bar {
    padding: 12px 20px;
    border-bottom: 1px solid #eef2f7;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

[b-z4vbk5ecz2] .str-selected-count {
    font-size: 0.78rem;
    font-weight: 700;
    color: #475569;
    margin-right: 2px;
}

[b-z4vbk5ecz2] .str-date-input {
    border: 1px solid #dbe4ee;
    border-radius: 10px;
    padding: 8px 10px;
    font-size: 0.82rem;
    color: #334155;
    min-height: 38px;
}

[b-z4vbk5ecz2] .str-assn-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    min-width: 980px;
}

[b-z4vbk5ecz2] .str-assn-sticky-head th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: #f8fafc;
    color: #374151;
    font-size: 0.84rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    padding: 12px 14px;
    border-bottom: 1px solid #e5e7eb;
    text-align: left;
}

[b-z4vbk5ecz2] .str-assn-sticky-head th.text-right {
    text-align: right;
}

[b-z4vbk5ecz2] .str-assn-sticky-head th.text-center {
    text-align: center;
}

[b-z4vbk5ecz2] .str-assn-row td {
    padding: 14px;
    border-bottom: 1px solid #eef2f7;
    font-size: 0.88rem;
    color: #334155;
    vertical-align: middle;
}

[b-z4vbk5ecz2] .str-row-even {
    background: #ffffff;
}

[b-z4vbk5ecz2] .str-row-odd {
    background: #fcfdff;
}

[b-z4vbk5ecz2] .str-assn-row:hover {
    background: #f8fbff;
}

[b-z4vbk5ecz2] .str-avatar {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--color-teal-100);
    color: var(--color-teal-700);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.72rem;
    font-weight: 700;
    flex-shrink: 0;
}

[b-z4vbk5ecz2] .str-staff-name {
    color: #0f172a;
    font-weight: 600;
    font-size: 0.92rem;
}

[b-z4vbk5ecz2] .str-staff-meta {
    color: #64748b;
    font-size: 0.75rem;
}

[b-z4vbk5ecz2] .str-chip {
    display: inline-flex;
    align-items: center;
    border-radius: 9999px;
    padding: 4px 9px;
    font-size: 0.72rem;
    font-weight: 700;
}

[b-z4vbk5ecz2] .str-chip-active {
    background: #ecfeff;
    color: var(--color-teal-700);
}

[b-z4vbk5ecz2] .str-chip-pending {
    background: #fef9c3;
    color: #a16207;
}

[b-z4vbk5ecz2] .str-table-money {
    color: #0f172a;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

[b-z4vbk5ecz2] .str-edit-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 10px;
    border: 1px solid #cbd5e1;
    background: #fff;
    border-radius: 9px;
    color: #1f2937;
    font-size: 0.78rem;
    font-weight: 700;
    cursor: pointer;
}

[b-z4vbk5ecz2] .str-edit-btn:hover {
    border-color: #0ea5e9;
    color: #0369a1;
    background: #f0f9ff;
}

[b-z4vbk5ecz2] .str-empty {
    text-align: center;
    padding: 36px;
    color: #64748b;
    font-size: 0.9rem;
}

@media (max-width: 1440px) {
    [b-z4vbk5ecz2] .str-cards-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 1280px) {
    [b-z4vbk5ecz2] .str-shell {
        padding: 18px 18px;
    }

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

    [b-z4vbk5ecz2] .str-assn-filters {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    [b-z4vbk5ecz2] .str-filter-search {
        grid-column: span 2;
    }
}

@media (max-width: 768px) {
    [b-z4vbk5ecz2] .str-page-header {
        flex-direction: column;
        align-items: flex-start;
    }

    [b-z4vbk5ecz2] .str-insights {
        grid-template-columns: 1fr;
    }

    [b-z4vbk5ecz2] .str-assn-filters {
        grid-template-columns: 1fr;
    }

    [b-z4vbk5ecz2] .str-filter-search {
        grid-column: auto;
    }

    [b-z4vbk5ecz2] .str-bulk-bar {
        align-items: stretch;
    }
}

/* /Pages/Accountant/Payroll/TaxDeclarations.razor.rz.scp.css */
.review-page[b-qy0fsiwo9t] { --touch-target-min: 2.5rem; max-width: var(--container-xl); margin: 0 auto; padding: var(--spacing-6); color: var(--color-text-primary); }
.page-heading[b-qy0fsiwo9t] { margin-bottom: var(--spacing-5); }
.page-heading h1[b-qy0fsiwo9t] { margin: var(--spacing-2) 0 0; font-size: var(--font-size-3xl); }
.page-heading p[b-qy0fsiwo9t], .detail-heading p[b-qy0fsiwo9t] { margin: var(--spacing-2) 0 0; color: var(--color-text-muted); }
.back-link[b-qy0fsiwo9t] { color: var(--color-primary-700); font-size: var(--font-size-sm); }
.filter-bar[b-qy0fsiwo9t] { display: flex; align-items: end; gap: var(--spacing-4); margin-bottom: var(--spacing-5); padding: var(--spacing-4); background: var(--color-surface-secondary); border: 1px solid var(--color-border); border-radius: var(--radius-sm); }
.field[b-qy0fsiwo9t] { display: flex; flex-direction: column; gap: var(--spacing-2); color: var(--color-text-secondary); font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); }
.field input[b-qy0fsiwo9t], .field select[b-qy0fsiwo9t], .field textarea[b-qy0fsiwo9t] { min-height: var(--touch-target-min); padding: var(--spacing-3) var(--spacing-4); color: var(--color-text-primary); background: var(--color-surface-primary); border: 1px solid var(--color-border-dark); border-radius: var(--input-radius); }
.review-layout[b-qy0fsiwo9t] { display: grid; grid-template-columns: minmax(18rem, .8fr) minmax(0, 1.7fr); gap: var(--spacing-5); }
.list-panel[b-qy0fsiwo9t], .detail-panel[b-qy0fsiwo9t] { background: var(--color-surface-primary); border: 1px solid var(--color-border); border-radius: var(--radius-sm); box-shadow: var(--shadow-sm); }
.list-panel[b-qy0fsiwo9t] { overflow: hidden; }
.declaration-row[b-qy0fsiwo9t] { width: 100%; min-height: var(--touch-target-min); display: grid; grid-template-columns: 1.4fr 1fr auto; align-items: center; gap: var(--spacing-3); padding: var(--spacing-4); text-align: left; background: transparent; border: 0; border-bottom: 1px solid var(--color-border-light); }
.declaration-row:hover[b-qy0fsiwo9t], .declaration-row.selected[b-qy0fsiwo9t] { background: var(--color-primary-50); }
.declaration-row span[b-qy0fsiwo9t] { min-width: 0; }
.declaration-row small[b-qy0fsiwo9t] { display: block; margin-top: var(--spacing-1); color: var(--color-text-muted); }
.detail-panel[b-qy0fsiwo9t] { padding: var(--spacing-5); }
.detail-heading[b-qy0fsiwo9t] { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--spacing-4); padding-bottom: var(--spacing-4); border-bottom: 1px solid var(--color-border-light); }
.detail-heading span:first-child[b-qy0fsiwo9t] { color: var(--color-primary-700); font-size: var(--font-size-xs); font-weight: var(--font-weight-bold); text-transform: uppercase; }
.detail-heading h2[b-qy0fsiwo9t] { margin: var(--spacing-2) 0 0; font-size: var(--font-size-xl); }
.badge[b-qy0fsiwo9t] { padding: var(--spacing-2) var(--spacing-3); border-radius: var(--radius-full); font-size: var(--font-size-xs); font-weight: var(--font-weight-bold); }
.badge-draft[b-qy0fsiwo9t] { color: var(--color-text-secondary); background: var(--color-surface-secondary); }
.badge-submitted[b-qy0fsiwo9t] { color: var(--color-warning-800); background: var(--color-warning-100); }
.badge-approved[b-qy0fsiwo9t] { color: var(--color-success-800); background: var(--color-success-100); }
.badge-rejected[b-qy0fsiwo9t] { color: var(--color-danger-800); background: var(--color-danger-100); }
.amount-grid[b-qy0fsiwo9t] { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--spacing-4); margin: var(--spacing-5) 0; }
.amount-grid div[b-qy0fsiwo9t] { padding: var(--spacing-4); background: var(--color-surface-secondary); border-radius: var(--radius-sm); }
.amount-grid span[b-qy0fsiwo9t] { display: block; color: var(--color-text-muted); font-size: var(--font-size-xs); }
.amount-grid strong[b-qy0fsiwo9t] { display: block; margin-top: var(--spacing-2); }
.items-table-wrap[b-qy0fsiwo9t] { overflow-x: auto; }
table[b-qy0fsiwo9t] { width: 100%; border-collapse: collapse; font-size: var(--font-size-sm); }
th[b-qy0fsiwo9t], td[b-qy0fsiwo9t] { padding: var(--spacing-3); text-align: left; border-bottom: 1px solid var(--color-border-light); }
th[b-qy0fsiwo9t] { color: var(--color-text-muted); background: var(--color-surface-secondary); }
td a[b-qy0fsiwo9t] { color: var(--color-primary-700); }
.review-field[b-qy0fsiwo9t] { margin-top: var(--spacing-5); }
.review-field textarea[b-qy0fsiwo9t] { min-height: var(--spacing-20); resize: vertical; }
.review-actions[b-qy0fsiwo9t] { display: flex; justify-content: flex-end; gap: var(--spacing-3); margin-top: var(--spacing-4); }
.primary-button[b-qy0fsiwo9t], .secondary-button[b-qy0fsiwo9t], .danger-button[b-qy0fsiwo9t] { min-height: var(--touch-target-min); display: inline-flex; align-items: center; justify-content: center; gap: var(--spacing-2); padding: var(--spacing-3) var(--spacing-5); border-radius: var(--radius-sm); font-weight: var(--font-weight-semibold); }
.primary-button[b-qy0fsiwo9t] { color: var(--color-text-white); background: var(--color-primary-600); border: 1px solid var(--color-primary-600); }
.secondary-button[b-qy0fsiwo9t] { color: var(--color-primary-700); background: var(--color-surface-primary); border: 1px solid var(--color-primary-300); }
.danger-button[b-qy0fsiwo9t] { color: var(--color-danger-700); background: var(--color-danger-50); border: 1px solid var(--color-danger-200); }
.state-panel[b-qy0fsiwo9t] { padding: var(--spacing-8); text-align: center; color: var(--color-text-muted); background: var(--color-surface-primary); border: 1px solid var(--color-border); border-radius: var(--radius-sm); }
.review-note[b-qy0fsiwo9t] { display: flex; flex-direction: column; gap: var(--spacing-2); margin-top: var(--spacing-5); padding: var(--spacing-4); color: var(--color-danger-800); background: var(--color-danger-50); border: 1px solid var(--color-danger-200); border-radius: var(--radius-sm); }
@media (max-width: 768px) { .review-page[b-qy0fsiwo9t] { padding: var(--spacing-4); } .filter-bar[b-qy0fsiwo9t], .detail-heading[b-qy0fsiwo9t] { align-items: stretch; flex-direction: column; } .review-layout[b-qy0fsiwo9t] { grid-template-columns: 1fr; } .amount-grid[b-qy0fsiwo9t] { grid-template-columns: 1fr; } .declaration-row[b-qy0fsiwo9t] { grid-template-columns: 1fr auto; } .declaration-row > span:nth-child(2)[b-qy0fsiwo9t] { display: none; } }
/* /Pages/Accountant/Payroll/TaxSections.razor.rz.scp.css */
.sections-page[b-4cfilzxuhj] { --touch-target-min: 2.5rem; max-width: var(--container-xl); margin: 0 auto; padding: var(--spacing-6); color: var(--color-text-primary); }
.page-heading[b-4cfilzxuhj] { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--spacing-4); margin-bottom: var(--spacing-5); }
.page-heading h1[b-4cfilzxuhj] { margin: var(--spacing-2) 0 0; font-size: var(--font-size-3xl); }
.page-heading p[b-4cfilzxuhj] { margin: var(--spacing-2) 0 0; color: var(--color-text-muted); }
.back-link[b-4cfilzxuhj] { color: var(--color-primary-700); font-size: var(--font-size-sm); }
.sections-layout[b-4cfilzxuhj] { display: grid; grid-template-columns: minmax(20rem, 1.2fr) minmax(0, 1fr); gap: var(--spacing-5); }
.list-panel[b-4cfilzxuhj], .edit-panel[b-4cfilzxuhj] { background: var(--color-surface-primary); border: 1px solid var(--color-border); border-radius: var(--radius-sm); box-shadow: var(--shadow-sm); }
.list-panel[b-4cfilzxuhj] { overflow: hidden; }
table[b-4cfilzxuhj] { width: 100%; border-collapse: collapse; font-size: var(--font-size-sm); }
th[b-4cfilzxuhj], td[b-4cfilzxuhj] { padding: var(--spacing-3); text-align: left; border-bottom: 1px solid var(--color-border-light); }
th[b-4cfilzxuhj] { color: var(--color-text-muted); background: var(--color-surface-secondary); }
.section-row[b-4cfilzxuhj] { cursor: pointer; }
.section-row:hover[b-4cfilzxuhj], .section-row.selected[b-4cfilzxuhj] { background: var(--color-primary-50); }
.badge[b-4cfilzxuhj] { padding: var(--spacing-2) var(--spacing-3); border-radius: var(--radius-full); font-size: var(--font-size-xs); font-weight: var(--font-weight-bold); }
.badge-active[b-4cfilzxuhj] { color: var(--color-success-800); background: var(--color-success-100); }
.badge-inactive[b-4cfilzxuhj] { color: var(--color-text-secondary); background: var(--color-surface-secondary); }
.edit-panel[b-4cfilzxuhj] { padding: var(--spacing-5); }
.detail-heading[b-4cfilzxuhj] { padding-bottom: var(--spacing-4); border-bottom: 1px solid var(--color-border-light); }
.detail-heading span:first-child[b-4cfilzxuhj] { color: var(--color-primary-700); font-size: var(--font-size-xs); font-weight: var(--font-weight-bold); text-transform: uppercase; }
.detail-heading h2[b-4cfilzxuhj] { margin: var(--spacing-2) 0 0; font-size: var(--font-size-xl); }
.field[b-4cfilzxuhj] { display: flex; flex-direction: column; gap: var(--spacing-2); margin-top: var(--spacing-4); color: var(--color-text-secondary); font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); }
/* Global CSS applies appearance:none to inputs, which erases the native box —
   so the border must be explicit and high-contrast, otherwise empty fields look
   like plain label text. */
.field input[b-4cfilzxuhj], .field textarea[b-4cfilzxuhj] { min-height: var(--touch-target-min); padding: var(--spacing-3) var(--spacing-4); color: #111827; background: #FFFFFF; border: 2px solid var(--color-gray-400); border-radius: var(--input-radius); width: 100%; }
.field input:focus[b-4cfilzxuhj], .field textarea:focus[b-4cfilzxuhj] { outline: none; border-color: var(--color-primary-600); box-shadow: 0 0 0 3px var(--color-primary-100); }
.field-hint[b-4cfilzxuhj] { color: var(--color-text-muted); font-weight: var(--font-weight-normal); font-size: var(--font-size-xs); }
.form-grid[b-4cfilzxuhj] { display: grid; grid-template-columns: 1fr 1fr; gap: var(--spacing-4); }
.check-field[b-4cfilzxuhj] { display: flex; align-items: center; gap: var(--spacing-2); margin-top: var(--spacing-4); font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); color: var(--color-text-secondary); }
.check-field input[b-4cfilzxuhj] { width: var(--touch-target-min); height: var(--touch-target-min); }
.teacher-preview[b-4cfilzxuhj] { margin-top: var(--spacing-4); padding: var(--spacing-3) var(--spacing-4); background: var(--color-surface-secondary); border: 1px dashed var(--color-border-dark); border-radius: var(--radius-sm); }
.teacher-preview > span[b-4cfilzxuhj] { display: block; color: var(--color-text-muted); font-size: var(--font-size-xs); font-weight: var(--font-weight-bold); text-transform: uppercase; }
.preview-option[b-4cfilzxuhj] { display: flex; align-items: center; gap: var(--spacing-2); margin-top: var(--spacing-2); flex-wrap: wrap; font-size: var(--font-size-sm); color: var(--color-text-primary); }
.preview-option strong[b-4cfilzxuhj] { color: var(--color-primary-700); }
.preview-option em[b-4cfilzxuhj] { color: var(--color-text-muted); font-style: normal; font-size: var(--font-size-xs); }
.edit-actions[b-4cfilzxuhj] { display: flex; justify-content: flex-end; gap: var(--spacing-3); margin-top: var(--spacing-5); }
.primary-button[b-4cfilzxuhj], .secondary-button[b-4cfilzxuhj] { min-height: var(--touch-target-min); display: inline-flex; align-items: center; justify-content: center; gap: var(--spacing-2); padding: var(--spacing-3) var(--spacing-5); border-radius: var(--radius-sm); font-weight: var(--font-weight-semibold); }
.primary-button[b-4cfilzxuhj] { color: var(--color-text-white); background: var(--color-primary-600); border: 1px solid var(--color-primary-600); }
.secondary-button[b-4cfilzxuhj] { color: var(--color-primary-700); background: var(--color-surface-primary); border: 1px solid var(--color-primary-300); }
.state-panel[b-4cfilzxuhj] { padding: var(--spacing-8); text-align: center; color: var(--color-text-muted); background: var(--color-surface-primary); border: 1px solid var(--color-border); border-radius: var(--radius-sm); }
@media (max-width: 768px) {
    .sections-page[b-4cfilzxuhj] { padding: var(--spacing-4); }
    .page-heading[b-4cfilzxuhj] { flex-direction: column; align-items: stretch; }
    .sections-layout[b-4cfilzxuhj] { grid-template-columns: 1fr; }
    .form-grid[b-4cfilzxuhj] { grid-template-columns: 1fr; }
    .list-panel[b-4cfilzxuhj] { overflow-x: auto; }
}
/* /Pages/Accountant/PendingFees/Index.razor.rz.scp.css */
.pending-fees-page[b-e76pjfu6hi] {
    /* Scoped styles for Accountant pending fees page */
}

/* /Pages/Accountant/Receipts/Index.razor.rz.scp.css */
.receipts-page[b-q1i1wsg55g] {
    /* Scoped styles for Accountant receipts page */
}

/* /Pages/Accountant/Statements/Index.razor.rz.scp.css */
.statements-page[b-eogt0d8gdg] {
    /* Scoped styles for Financial Statements page */
}
/* /Pages/Accountant/StudentChargeReport.razor.rz.scp.css */
.charge-report-page[b-md5qj8w9lh] {
    width: 100%;
    max-width: var(--grid-max-width);
    margin: var(--spacing-0) auto;
    padding: var(--spacing-5);
    color: var(--color-text-primary);
}

.report-header[b-md5qj8w9lh] {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-4);
    margin-bottom: var(--spacing-6);
    padding: var(--spacing-5);
    border: var(--border-sm) solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-bg-white);
    box-shadow: var(--shadow-sm);
}

.report-header h1[b-md5qj8w9lh],
.report-header p[b-md5qj8w9lh] { margin: var(--spacing-0); }
.report-header h1[b-md5qj8w9lh] { display: flex; align-items: center; gap: var(--spacing-3); font-size: var(--font-size-xl); letter-spacing: var(--letter-spacing-normal); }
.report-header h1 i[b-md5qj8w9lh] { color: var(--color-primary); }
.report-header p[b-md5qj8w9lh] { margin-top: var(--spacing-2); color: var(--color-text-muted); font-size: var(--font-size-sm); }

.export-button[b-md5qj8w9lh] {
    display: inline-flex;
    min-height: var(--button-height-lg);
    align-items: center;
    justify-content: center;
    gap: var(--spacing-2);
    border: 0;
    border-radius: var(--radius-sm);
    padding: var(--spacing-3) var(--spacing-5);
    background: var(--color-primary);
    color: var(--color-text-white);
    font: inherit;
    font-weight: var(--font-weight-semibold);
    cursor: pointer;
}
.export-button:hover[b-md5qj8w9lh] { background: var(--color-primary-dark); }
.export-button:disabled[b-md5qj8w9lh] { cursor: not-allowed; opacity: var(--opacity-60); }
.export-button:focus-visible[b-md5qj8w9lh] { outline: none; box-shadow: var(--input-focus-ring); }

.state-panel[b-md5qj8w9lh] {
    display: flex;
    min-height: var(--spacing-20);
    align-items: center;
    justify-content: center;
    padding: var(--spacing-5);
    border: var(--border-sm) dashed var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-surface-secondary);
    color: var(--color-text-muted);
    text-align: center;
}
.state-error[b-md5qj8w9lh] { border-color: var(--color-danger-200); background: var(--color-danger-50); color: var(--color-danger-700); }

.summary-grid[b-md5qj8w9lh] { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--spacing-3); margin-bottom: var(--spacing-5); }
.summary-grid > div[b-md5qj8w9lh] { display: grid; gap: var(--spacing-2); padding: var(--spacing-4); border: var(--border-sm) solid var(--color-border); border-radius: var(--radius-sm); background: var(--color-bg-white); box-shadow: var(--shadow-sm); }
.summary-grid span[b-md5qj8w9lh] { color: var(--color-text-muted); font-size: var(--font-size-xs); }
.summary-grid strong[b-md5qj8w9lh] { overflow-wrap: anywhere; font-size: var(--font-size-lg); }

.report-table-wrap[b-md5qj8w9lh] { overflow-x: auto; border: var(--border-sm) solid var(--color-border); border-radius: var(--radius-sm); background: var(--color-bg-white); box-shadow: var(--shadow-sm); }
.report-table[b-md5qj8w9lh] { width: 100%; border-collapse: collapse; }
.report-table th[b-md5qj8w9lh],
.report-table td[b-md5qj8w9lh] { padding: var(--spacing-3); border-bottom: var(--border-sm) solid var(--color-border-light); text-align: left; font-size: var(--font-size-sm); }
.report-table th[b-md5qj8w9lh] { background: var(--color-surface-secondary); color: var(--color-text-secondary); font-size: var(--font-size-xs); }
.report-table td:nth-child(n + 3)[b-md5qj8w9lh],
.report-table th:nth-child(n + 3)[b-md5qj8w9lh] { text-align: right; }

@media (min-width: 768px) {
    .charge-report-page[b-md5qj8w9lh] { padding: var(--spacing-7); }
    .report-header[b-md5qj8w9lh] { flex-direction: row; align-items: center; justify-content: space-between; padding: var(--spacing-6); }
    .summary-grid[b-md5qj8w9lh] { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (max-width: 767px) {
    .report-table-wrap[b-md5qj8w9lh] { overflow: visible; border: 0; background: transparent; box-shadow: none; }
    .report-table[b-md5qj8w9lh],
    .report-table tbody[b-md5qj8w9lh],
    .report-table tr[b-md5qj8w9lh],
    .report-table td[b-md5qj8w9lh] { display: block; width: 100%; }
    .report-table thead[b-md5qj8w9lh] { display: none; }
    .report-table tr[b-md5qj8w9lh] { margin-bottom: var(--spacing-3); padding: var(--spacing-3); border: var(--border-sm) solid var(--color-border); border-radius: var(--radius-sm); background: var(--color-bg-white); box-shadow: var(--shadow-sm); }
    .report-table td[b-md5qj8w9lh],
    .report-table td:nth-child(n + 3)[b-md5qj8w9lh] { display: flex; justify-content: space-between; gap: var(--spacing-3); padding: var(--spacing-2); border: 0; text-align: right; }
    .report-table td[b-md5qj8w9lh]::before { content: attr(data-label); color: var(--color-text-muted); font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold); text-align: left; }
}
/* /Pages/AdminStaff/Admissions/Details.razor.rz.scp.css */
/* Styles handled via Tailwind utility classes in markup */
/* /Pages/AdminStaff/Admissions/Index.razor.rz.scp.css */
/* Styles handled via Tailwind utility classes in markup */
/* /Pages/AdminStaff/Budget/Index.razor.rz.scp.css */
/* No additional styles needed */
/* /Pages/AdminStaff/Curriculum/Index.razor.rz.scp.css */
/* Styles handled via Tailwind utility classes in markup */
/* /Pages/AdminStaff/Dashboard.razor.rz.scp.css */
.loading-overlay[b-a32ndvoku5] {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-neutral-50, #f9fafb);
    z-index: 9997;
}

.error-state[b-a32ndvoku5] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 40vh;
    gap: var(--spacing-2, 0.5rem);
    color: var(--color-neutral-600, #4b5563);
    font-size: var(--font-size-sm, 0.875rem);
}

/* ── Header ─────────────────────────────────────────────────── */
.dashboard-header[b-a32ndvoku5] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--spacing-4, 1rem);
    margin-bottom: var(--spacing-6, 1.5rem);
}

.welcome-text[b-a32ndvoku5] {
    font-size: var(--font-size-2xl, 1.5rem);
    font-weight: 700;
    color: var(--color-neutral-900, #111827);
    margin: 0;
}

.date-text[b-a32ndvoku5] {
    font-size: var(--font-size-sm, 0.875rem);
    color: var(--color-neutral-500, #6b7280);
    margin: var(--spacing-1, 0.25rem) 0 0;
}

.header-badges[b-a32ndvoku5] {
    display: flex;
    gap: var(--spacing-2, 0.5rem);
    flex-wrap: wrap;
    align-items: center;
}

.badge[b-a32ndvoku5] {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-1, 0.25rem);
    padding: var(--spacing-1, 0.25rem) var(--spacing-3, 0.75rem);
    border-radius: var(--radius-full, 9999px);
    font-size: var(--font-size-xs, 0.75rem);
    font-weight: 600;
}

.badge-blue[b-a32ndvoku5] {
    background: var(--color-info-100, #dbeafe);
    color: var(--color-info-700, #1d4ed8);
}

.badge-warning[b-a32ndvoku5] {
    background: var(--color-warning-100, #fef3c7);
    color: var(--color-warning-700, #b45309);
}

/* ── KPI Grid ───────────────────────────────────────────────── */
.kpi-grid[b-a32ndvoku5] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-4, 1rem);
    margin-bottom: var(--spacing-6, 1.5rem);
}

@media (min-width: 768px) {
    .kpi-grid[b-a32ndvoku5] {
        grid-template-columns: repeat(4, 1fr);
    }
}

.kpi-card[b-a32ndvoku5] {
    background: white;
    border-radius: var(--radius-xl, 0.75rem);
    padding: var(--spacing-5, 1.25rem);
    box-shadow: var(--shadow-sm, 0 1px 2px rgb(0 0 0 / 5%));
    border: 1px solid var(--color-neutral-200, #e5e7eb);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-2, 0.5rem);
}

.kpi-icon[b-a32ndvoku5] {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: var(--radius-lg, 0.5rem);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.125rem;
}

.kpi-blue .kpi-icon[b-a32ndvoku5] { background: var(--color-info-100, #dbeafe); color: var(--color-info-600, #2563eb); }
.kpi-green .kpi-icon[b-a32ndvoku5] { background: var(--color-success-100, #dcfce7); color: var(--color-success-600, #16a34a); }
.kpi-orange .kpi-icon[b-a32ndvoku5] { background: var(--color-warning-100, #fef3c7); color: var(--color-warning-600, #d97706); }
.kpi-red .kpi-icon[b-a32ndvoku5] { background: var(--color-error-100, #fee2e2); color: var(--color-error-600, #dc2626); }

.kpi-content[b-a32ndvoku5] {
    display: flex;
    flex-direction: column;
}

.kpi-value[b-a32ndvoku5] {
    font-size: var(--font-size-2xl, 1.5rem);
    font-weight: 700;
    color: var(--color-neutral-900, #111827);
    line-height: 1.2;
}

.kpi-label[b-a32ndvoku5] {
    font-size: var(--font-size-sm, 0.875rem);
    color: var(--color-neutral-500, #6b7280);
}

.kpi-sub[b-a32ndvoku5] {
    font-size: var(--font-size-xs, 0.75rem);
    color: var(--color-neutral-400, #9ca3af);
}

/* ── Card ────────────────────────────────────────────────────── */
.card[b-a32ndvoku5] {
    background: white;
    border-radius: var(--radius-xl, 0.75rem);
    padding: var(--spacing-5, 1.25rem);
    box-shadow: var(--shadow-sm, 0 1px 2px rgb(0 0 0 / 5%));
    border: 1px solid var(--color-neutral-200, #e5e7eb);
    margin-bottom: var(--spacing-6, 1.5rem);
}

.card-header[b-a32ndvoku5] {
    display: flex;
    align-items: center;
    gap: var(--spacing-2, 0.5rem);
    margin-bottom: var(--spacing-4, 1rem);
}

.card-header h2[b-a32ndvoku5] {
    font-size: var(--font-size-base, 1rem);
    font-weight: 600;
    color: var(--color-neutral-900, #111827);
    margin: 0;
    flex: 1;
}

/* ── Tasks Grid ──────────────────────────────────────────────── */
.tasks-grid[b-a32ndvoku5] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-3, 0.75rem);
}

@media (min-width: 768px) {
    .tasks-grid[b-a32ndvoku5] {
        grid-template-columns: repeat(4, 1fr);
    }
}

.task-item[b-a32ndvoku5] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-2, 0.5rem);
    padding: var(--spacing-4, 1rem);
    border-radius: var(--radius-lg, 0.5rem);
    text-decoration: none;
    border: 1px solid var(--color-neutral-200, #e5e7eb);
    transition: all 0.15s ease;
    text-align: center;
}

.task-item:hover[b-a32ndvoku5] {
    transform: translateY(-1px);
    box-shadow: var(--shadow-md, 0 4px 6px rgb(0 0 0 / 7%));
}

.task-active[b-a32ndvoku5] { background: var(--color-neutral-50, #f9fafb); }
.task-idle[b-a32ndvoku5] { background: white; }

.task-icon[b-a32ndvoku5] {
    width: 3rem;
    height: 3rem;
    border-radius: var(--radius-xl, 0.75rem);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
}

.task-info[b-a32ndvoku5] {
    display: flex;
    flex-direction: column;
}

.task-count[b-a32ndvoku5] {
    font-size: var(--font-size-2xl, 1.5rem);
    font-weight: 700;
    color: var(--color-neutral-900, #111827);
    line-height: 1.2;
}

.task-label[b-a32ndvoku5] {
    font-size: var(--font-size-xs, 0.75rem);
    color: var(--color-neutral-500, #6b7280);
}

.task-badge[b-a32ndvoku5] {
    font-size: var(--font-size-xs, 0.75rem);
    font-weight: 600;
    padding: 2px var(--spacing-2, 0.5rem);
    border-radius: var(--radius-full, 9999px);
    background: var(--color-info-100, #dbeafe);
    color: var(--color-info-700, #1d4ed8);
}

/* ── Quick Links ─────────────────────────────────────────────── */
.quick-links-grid[b-a32ndvoku5] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--spacing-3, 0.75rem);
}

@media (max-width: 640px) {
    .quick-links-grid[b-a32ndvoku5] {
        grid-template-columns: repeat(2, 1fr);
    }
}

.quick-link[b-a32ndvoku5] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-2, 0.5rem);
    padding: var(--spacing-4, 1rem);
    background: var(--color-neutral-50, #f9fafb);
    border: 1px solid var(--color-neutral-200, #e5e7eb);
    border-radius: var(--radius-lg, 0.5rem);
    text-decoration: none;
    color: var(--color-neutral-700, #374151);
    font-size: var(--font-size-sm, 0.875rem);
    font-weight: 500;
    transition: all 0.15s ease;
}

.quick-link:hover[b-a32ndvoku5] {
    background: var(--color-info-50, #eff6ff);
    border-color: var(--color-info-300, #93c5fd);
    color: var(--color-info-700, #1d4ed8);
    transform: translateY(-1px);
    box-shadow: var(--shadow-sm, 0 1px 2px rgb(0 0 0 / 5%));
}

.quick-link i[b-a32ndvoku5] {
    font-size: 1.25rem;
}
/* /Pages/AdminStaff/Documents/Index.razor.rz.scp.css */

/* /Pages/AdminStaff/Expenses/Index.razor.rz.scp.css */
/* AdminStaff/Expenses/Index.razor.css */
.page-header[b-rmn1lm5h2x] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
}
/* /Pages/AdminStaff/FeeRefunds/Index.razor.rz.scp.css */
/* No additional styles needed */
/* /Pages/AdminStaff/Fees/Index.razor.rz.scp.css */

/* /Pages/AdminStaff/Finance/Index.razor.rz.scp.css */
/* AdminStaff Finance hub — no custom styles needed; design tokens handle all layout */
/* /Pages/AdminStaff/Finance/Statements.razor.rz.scp.css */
/* No additional styles needed */
/* /Pages/AdminStaff/GeneralLedger/Index.razor.rz.scp.css */
/* AdminStaff/GeneralLedger/Index.razor.css */
/* /Pages/AdminStaff/Inbox/Index.razor.rz.scp.css */
/* Styles handled via Tailwind utility classes in markup */
/* /Pages/AdminStaff/Inventory/Index.razor.rz.scp.css */

/* /Pages/AdminStaff/Reports/Index.razor.rz.scp.css */

/* /Pages/AdminStaff/Settings/Index.razor.rz.scp.css */

/* /Pages/AdminStaff/Students/Index.razor.rz.scp.css */

/* /Pages/AdminStaff/Visitors/Index.razor.rz.scp.css */

/* /Pages/Admin/AcademicYears/Index.razor.rz.scp.css */
/* Styles handled via Tailwind utility classes in markup */
/* /Pages/Admin/AdminSettings/Index.razor.rz.scp.css */
/* Styles handled via Tailwind utility classes in markup */
/* /Pages/Admin/BulkImport/Index.razor.rz.scp.css */
/* Styles handled via Tailwind utility classes in markup */
/* /Pages/Admin/Celebrations/Templates/Index.razor.rz.scp.css */
/* Pages/Admin/Celebrations/Templates/Index.razor.css */

.ct-loading[b-wx70xn8p1a] {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 200px;
}

/* ── Page shell ─────────────────────────────────────────────── */
.ct-page[b-wx70xn8p1a] { padding: 1.5rem; max-width: 1200px; margin: 0 auto; }

.ct-page-header[b-wx70xn8p1a] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 1.25rem;
    gap: 1rem;
    flex-wrap: wrap;
}

.ct-page-title[b-wx70xn8p1a] { font-size: 1.2rem; font-weight: 700; color: var(--color-neutral-900); margin: 0 0 0.2rem; }
.ct-page-sub[b-wx70xn8p1a]   { font-size: 0.82rem; color: var(--color-neutral-500); margin: 0; }

.ct-btn-primary[b-wx70xn8p1a] {
    padding: 0.5rem 1.1rem;
    font-size: 0.82rem;
    font-weight: 700;
    border: none;
    border-radius: 6px;
    background: var(--color-primary-600, #6366f1);
    color: #fff;
    cursor: pointer;
    white-space: nowrap;
}

.ct-btn-primary:hover[b-wx70xn8p1a] { background: var(--color-primary-700, #4f46e5); }

/* ── Error banner ────────────────────────────────────────────── */
.ct-error-banner[b-wx70xn8p1a] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.6rem 1rem;
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: 6px;
    color: #dc2626;
    font-size: 0.82rem;
    margin-bottom: 1rem;
}

.ct-error-banner button[b-wx70xn8p1a] {
    background: none;
    border: none;
    color: #dc2626;
    cursor: pointer;
    font-size: 1rem;
}

/* ── Scope filter tabs ───────────────────────────────────────── */
.ct-filter-bar[b-wx70xn8p1a] {
    display: flex;
    gap: 0.35rem;
    margin-bottom: 1rem;
    flex-wrap: wrap;
}

.ct-tab[b-wx70xn8p1a] {
    padding: 0.35rem 0.9rem;
    font-size: 0.78rem;
    font-weight: 600;
    border: 1px solid var(--color-neutral-200);
    border-radius: 6px;
    background: #fff;
    color: var(--color-neutral-600);
    cursor: pointer;
    transition: all 0.15s;
}

.ct-tab.active[b-wx70xn8p1a],
.ct-tab:hover[b-wx70xn8p1a] {
    background: var(--color-primary-50, #eef2ff);
    border-color: var(--color-primary-300, #a5b4fc);
    color: var(--color-primary-700, #4338ca);
}

/* ── Card / Table ────────────────────────────────────────────── */
.ct-card[b-wx70xn8p1a] {
    background: #fff;
    border: 1px solid var(--color-neutral-100);
    border-radius: 8px;
    overflow: hidden;
}

.ct-table[b-wx70xn8p1a] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.82rem;
}

.ct-table th[b-wx70xn8p1a] {
    padding: 0.6rem 0.8rem;
    text-align: left;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-neutral-500);
    background: #f8fafc;
    border-bottom: 1px solid var(--color-neutral-100);
}

.ct-table td[b-wx70xn8p1a] {
    padding: 0.7rem 0.8rem;
    border-bottom: 1px solid var(--color-neutral-50);
    vertical-align: middle;
    color: var(--color-neutral-800);
}

.ct-table tr:last-child td[b-wx70xn8p1a] { border-bottom: none; }
.ct-table tr:hover td[b-wx70xn8p1a]      { background: #fafafa; }

.ct-row-inactive td[b-wx70xn8p1a] { opacity: 0.55; }

/* Template cell */
.ct-template-cell[b-wx70xn8p1a] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.ct-theme-dot[b-wx70xn8p1a] {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    flex-shrink: 0;
}

.ct-template-name[b-wx70xn8p1a]    { font-weight: 600; color: var(--color-neutral-900); }
.ct-template-preview[b-wx70xn8p1a] { font-size: 0.72rem; color: var(--color-neutral-400); margin-top: 2px; }

/* Badges */
.ct-badge-type[b-wx70xn8p1a] {
    display: inline-block;
    padding: 2px 7px;
    border-radius: 4px;
    background: #f0fdf4;
    color: #15803d;
    font-size: 0.72rem;
    font-weight: 600;
}

.ct-badge-sub[b-wx70xn8p1a] {
    display: inline-block;
    padding: 2px 7px;
    border-radius: 4px;
    background: #fefce8;
    color: #a16207;
    font-size: 0.72rem;
    font-weight: 600;
    margin-left: 4px;
}

.ct-badge-default[b-wx70xn8p1a] {
    display: inline-block;
    padding: 1px 6px;
    border-radius: 4px;
    background: #f0f9ff;
    color: #0369a1;
    font-size: 0.68rem;
    font-weight: 700;
    margin-left: 4px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.ct-scope-badge[b-wx70xn8p1a] {
    display: inline-block;
    padding: 2px 7px;
    border-radius: 20px;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.ct-scope-badge.system[b-wx70xn8p1a]   { background: #ede9fe; color: #6d28d9; }
.ct-scope-badge.school[b-wx70xn8p1a]   { background: #dbeafe; color: #1d4ed8; }
.ct-scope-badge.personal[b-wx70xn8p1a] { background: #d1fae5; color: #065f46; }

.ct-status-active[b-wx70xn8p1a]   { display: inline-block; padding: 2px 8px; border-radius: 20px; background: #d1fae5; color: #065f46; font-size: 0.72rem; font-weight: 600; }
.ct-status-inactive[b-wx70xn8p1a] { display: inline-block; padding: 2px 8px; border-radius: 20px; background: #f1f5f9; color: #64748b; font-size: 0.72rem; font-weight: 600; }

.ct-muted[b-wx70xn8p1a] { color: var(--color-neutral-400); font-size: 0.78rem; }

/* Actions */
.ct-actions[b-wx70xn8p1a] { display: flex; gap: 0.4rem; align-items: center; }

.ct-btn-icon[b-wx70xn8p1a] {
    background: none;
    border: 1px solid var(--color-neutral-200);
    border-radius: 5px;
    padding: 0.25rem 0.5rem;
    font-size: 0.85rem;
    cursor: pointer;
    transition: background 0.15s;
}

.ct-btn-icon:hover[b-wx70xn8p1a] { background: #f8fafc; }

/* ── Empty state ─────────────────────────────────────────────── */
.ct-empty[b-wx70xn8p1a] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 3rem 1rem;
}

.ct-empty-icon[b-wx70xn8p1a] { font-size: 2.5rem; }
.ct-empty-text[b-wx70xn8p1a] { font-size: 0.85rem; color: var(--color-neutral-400); }
/* /Pages/Admin/Certificates/Index.razor.rz.scp.css */
:host[b-mxb245t1yq]{display:block}
/* /Pages/Admin/Classes/Index.razor.rz.scp.css */
/* Styles handled via Tailwind utility classes in markup */
/* /Pages/Admin/EmailSettings/Edit.razor.rz.scp.css */
/* Styles handled via Tailwind utility classes in markup */
/* /Pages/Admin/EmailSettings/Index.razor.rz.scp.css */
/* Styles handled via Tailwind utility classes in markup */
/* /Pages/Admin/IntegrationSettings/DashboardTab.razor.rz.scp.css */
/* Styles handled via Tailwind utility classes in markup */
/* /Pages/Admin/IntegrationSettings/Index.razor.rz.scp.css */
/* Styles handled via Tailwind utility classes in markup */
/* /Pages/Admin/IntegrationSettings/PaymentTab.razor.rz.scp.css */
/* Styles handled via Tailwind utility classes in markup */
/* /Pages/Admin/IntegrationSettings/SmsTab.razor.rz.scp.css */
/* Styles handled via Tailwind utility classes in markup */
/* /Pages/Admin/IntegrationSettings/WhatsAppTab.razor.rz.scp.css */
/* Styles handled via Tailwind utility classes in markup */
/* /Pages/Admin/Notifications/OutboxMonitor.razor.rz.scp.css */
.outbox-header[b-5eopr0hqxb] {
    margin-bottom: var(--spacing-6);
}

.page-title[b-5eopr0hqxb] {
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-semibold);
    color: var(--color-neutral-900);
    margin: 0 0 var(--spacing-1) 0;
}

.page-subtitle[b-5eopr0hqxb] {
    color: var(--color-neutral-500);
    margin: 0;
    font-size: var(--font-size-sm);
}

/* ── Stats row ─────────────────────────────────────────────────────────────── */
.stats-row[b-5eopr0hqxb] {
    display: flex;
    gap: var(--spacing-3);
    margin-bottom: var(--spacing-6);
    flex-wrap: wrap;
}

.stat-card[b-5eopr0hqxb] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-4) var(--spacing-5);
    border-radius: var(--radius-lg);
    min-width: 110px;
    background: var(--color-neutral-50);
    border: 1px solid var(--color-neutral-200);
}

.stat-card.pending[b-5eopr0hqxb]  { border-left: 4px solid var(--color-warning-500); }
.stat-card.sent[b-5eopr0hqxb]     { border-left: 4px solid var(--color-success-500); }
.stat-card.failed[b-5eopr0hqxb]   { border-left: 4px solid var(--color-error-500);   }
.stat-card.info[b-5eopr0hqxb]     { border-left: 4px solid var(--color-primary-500); }
.stat-card.info2[b-5eopr0hqxb]    { border-left: 4px solid var(--color-success-400); }
.stat-card.warning[b-5eopr0hqxb]  { border-left: 4px solid var(--color-warning-600); }

.stat-value[b-5eopr0hqxb] {
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-neutral-900);
}

.stat-label[b-5eopr0hqxb] {
    font-size: var(--font-size-xs);
    color: var(--color-neutral-500);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-top: var(--spacing-1);
}

/* ── Filter bar ─────────────────────────────────────────────────────────────── */
.filter-bar[b-5eopr0hqxb] {
    display: flex;
    gap: var(--spacing-3);
    align-items: center;
    margin-bottom: var(--spacing-5);
    flex-wrap: wrap;
}

.filter-input[b-5eopr0hqxb],
.filter-select[b-5eopr0hqxb] {
    padding: var(--spacing-2) var(--spacing-3);
    border: 1px solid var(--color-neutral-300);
    border-radius: var(--radius-md);
    font-size: var(--font-size-sm);
    background: var(--color-white);
    color: var(--color-neutral-700);
}

.filter-input[b-5eopr0hqxb]  { width: 160px; }
.filter-select[b-5eopr0hqxb] { min-width: 160px; }

/* ── Status badges ─────────────────────────────────────────────────────────── */
.status-badge[b-5eopr0hqxb] {
    display: inline-block;
    padding: 2px var(--spacing-2);
    border-radius: var(--radius-full);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
}

.status-pending[b-5eopr0hqxb]   { background: var(--color-warning-100); color: var(--color-warning-700); }
.status-sent[b-5eopr0hqxb]      { background: var(--color-success-100); color: var(--color-success-700); }
.status-failed[b-5eopr0hqxb]    { background: var(--color-error-100);   color: var(--color-error-700);   }
.status-cancelled[b-5eopr0hqxb] { background: var(--color-neutral-100); color: var(--color-neutral-600); }

.type-badge[b-5eopr0hqxb] {
    display: inline-block;
    padding: 2px var(--spacing-2);
    border-radius: var(--radius-sm);
    font-size: var(--font-size-xs);
    background: var(--color-primary-50);
    color: var(--color-primary-700);
    white-space: nowrap;
}

/* ── Table ─────────────────────────────────────────────────────────────────── */
.table-container[b-5eopr0hqxb] {
    overflow-x: auto;
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-neutral-200);
    margin-bottom: var(--spacing-4);
}

.data-table[b-5eopr0hqxb] {
    width: 100%;
    border-collapse: collapse;
    background: var(--color-white);
    font-size: var(--font-size-sm);
}

.data-table th[b-5eopr0hqxb] {
    padding: var(--spacing-3) var(--spacing-4);
    background: var(--color-neutral-50);
    text-align: left;
    font-weight: var(--font-weight-semibold);
    color: var(--color-neutral-600);
    border-bottom: 1px solid var(--color-neutral-200);
    white-space: nowrap;
}

.data-table td[b-5eopr0hqxb] {
    padding: var(--spacing-3) var(--spacing-4);
    border-bottom: 1px solid var(--color-neutral-100);
    color: var(--color-neutral-800);
    vertical-align: middle;
}

.data-table tr:last-child td[b-5eopr0hqxb] { border-bottom: none; }
.data-table tr:hover td[b-5eopr0hqxb]      { background: var(--color-neutral-50); }

.school-cell[b-5eopr0hqxb]  { font-family: monospace; color: var(--color-neutral-500); }
.date-cell[b-5eopr0hqxb]    { white-space: nowrap; color: var(--color-neutral-500); }
.center-cell[b-5eopr0hqxb]  { text-align: center; }
.preview-cell[b-5eopr0hqxb] { max-width: 240px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--color-neutral-500); }
.actions-cell[b-5eopr0hqxb] { display: flex; gap: var(--spacing-1); align-items: center; }

/* ── Buttons ─────────────────────────────────────────────────────────────────  */
.btn-xs[b-5eopr0hqxb] {
    padding: 2px var(--spacing-2);
    font-size: var(--font-size-xs);
    border-radius: var(--radius-sm);
    border: none;
    cursor: pointer;
    font-weight: var(--font-weight-medium);
    white-space: nowrap;
}

.btn-xs.btn-primary[b-5eopr0hqxb] { background: var(--color-primary-600); color: var(--color-white); }
.btn-xs.btn-danger[b-5eopr0hqxb]  { background: var(--color-error-500);   color: var(--color-white); }
.btn-xs.btn-ghost[b-5eopr0hqxb]   { background: transparent; color: var(--color-neutral-500); border: 1px solid var(--color-neutral-300); }

/* ── Pagination ────────────────────────────────────────────────────────────── */
.pagination[b-5eopr0hqxb] {
    display: flex;
    gap: var(--spacing-3);
    align-items: center;
    justify-content: flex-end;
    margin-top: var(--spacing-4);
}

.page-info[b-5eopr0hqxb] { font-size: var(--font-size-sm); color: var(--color-neutral-500); }

/* ── Misc ──────────────────────────────────────────────────────────────────── */
.loading-spinner[b-5eopr0hqxb] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-16);
    gap: var(--spacing-4);
    color: var(--color-neutral-500);
}

.spinner[b-5eopr0hqxb] {
    width: 32px;
    height: 32px;
    border: 3px solid var(--color-neutral-200);
    border-top-color: var(--color-primary-600);
    border-radius: 50%;
    animation: spin-b-5eopr0hqxb 0.8s linear infinite;
}

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

.empty-state[b-5eopr0hqxb] {
    text-align: center;
    padding: var(--spacing-12) var(--spacing-6);
    color: var(--color-neutral-400);
    font-size: var(--font-size-sm);
}

.alert-error[b-5eopr0hqxb] {
    background: var(--color-error-50);
    color: var(--color-error-700);
    border: 1px solid var(--color-error-200);
    border-radius: var(--radius-md);
    padding: var(--spacing-3) var(--spacing-4);
    margin-bottom: var(--spacing-4);
    font-size: var(--font-size-sm);
}

/* ── Error modal ─────────────────────────────────────────────────────────────  */
.modal-overlay[b-5eopr0hqxb] {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 999;
}

.modal-box[b-5eopr0hqxb] {
    background: var(--color-white);
    border-radius: var(--radius-lg);
    padding: var(--spacing-6);
    max-width: 620px;
    width: 90%;
    box-shadow: var(--shadow-xl);
}

.modal-box h3[b-5eopr0hqxb] {
    margin: 0 0 var(--spacing-4) 0;
    font-size: var(--font-size-lg);
    color: var(--color-neutral-900);
}

.error-pre[b-5eopr0hqxb] {
    background: var(--color-neutral-50);
    border: 1px solid var(--color-neutral-200);
    border-radius: var(--radius-md);
    padding: var(--spacing-4);
    font-size: var(--font-size-xs);
    overflow-x: auto;
    white-space: pre-wrap;
    word-break: break-all;
    margin-bottom: var(--spacing-4);
    color: var(--color-error-700);
    max-height: 320px;
    overflow-y: auto;
}

@media (max-width: 768px) {
    .stats-row[b-5eopr0hqxb] { gap: var(--spacing-2); }
    .stat-card[b-5eopr0hqxb] { min-width: 80px; padding: var(--spacing-3); }
    .filter-bar[b-5eopr0hqxb] { flex-direction: column; align-items: stretch; }
    .filter-input[b-5eopr0hqxb], .filter-select[b-5eopr0hqxb] { width: 100%; }
    .data-table th:nth-child(1)[b-5eopr0hqxb],
    .data-table td:nth-child(1)[b-5eopr0hqxb],
    .data-table th:nth-child(6)[b-5eopr0hqxb],
    .data-table td:nth-child(6)[b-5eopr0hqxb] { display: none; }
}
/* /Pages/Admin/NotificationTest/Index.razor.rz.scp.css */
/* Styles handled via Tailwind utility classes in markup */
/* /Pages/Admin/PopupAnnouncements/Index.razor.rz.scp.css */
.popup-card-preview[b-lgaih3jf2a] {
    background: linear-gradient(135deg, var(--color-primary-600, #4f46e5), var(--color-primary-800, #3730a3));
}

.popup-card[b-lgaih3jf2a] {
    transition: box-shadow 0.2s;
}

.popup-card:hover[b-lgaih3jf2a] {
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}
/* /Pages/Admin/QuestionTypes/Index.razor.rz.scp.css */
/* Styles handled via Tailwind utility classes in markup */
/* /Pages/Admin/SchoolChapterMapping/Index.razor.rz.scp.css */
/* Styles handled via Tailwind utility classes in markup */
/* /Pages/Admin/SchoolDomains/Index.razor.rz.scp.css */
/* Styles handled via Tailwind utility classes in markup */
/* /Pages/Admin/SchoolEmbedCodes.razor.rz.scp.css */
/* Styles handled via Tailwind utility classes in markup */
/* /Pages/Admin/Schools/Index.razor.rz.scp.css */
/* Styles handled via Tailwind utility classes in markup */
/* /Pages/Admin/SystemProfile/Index.razor.rz.scp.css */
/* Styles handled via Tailwind utility classes in markup */
/* /Pages/Admin/Users/Index.razor.rz.scp.css */
/* ══════════════════════════════════════════════════════
   User Management — um-* scoped styles
   ══════════════════════════════════════════════════════ */

/* ── KPI strip ── */
.um-kpi-strip[b-5rb0gj8g6b] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: .75rem;
    margin-bottom: 1.25rem;
}
.um-kpi[b-5rb0gj8g6b] {
    display: flex;
    align-items: center;
    gap: .85rem;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: .75rem;
    padding: .85rem 1rem;
    transition: box-shadow .15s;
}
.um-kpi:hover[b-5rb0gj8g6b] { box-shadow: 0 2px 10px rgba(0,0,0,.06); }
.um-kpi--primary[b-5rb0gj8g6b] {
    border-color: #bbf7d0;
    background: #f0fdf4;
}
.um-kpi-icon[b-5rb0gj8g6b] {
    width: 42px;
    height: 42px;
    border-radius: .6rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.05rem;
    flex-shrink: 0;
}
.um-kpi-body[b-5rb0gj8g6b] { min-width: 0; }
.um-kpi-val[b-5rb0gj8g6b] {
    font-size: 1.5rem;
    font-weight: 800;
    color: #111827;
    line-height: 1.1;
}
.um-kpi-lbl[b-5rb0gj8g6b] {
    font-size: .78rem;
    font-weight: 600;
    color: #374151;
    margin-top: .1rem;
}
.um-kpi-sub[b-5rb0gj8g6b] {
    font-size: .68rem;
    color: #6b7280;
    margin-top: .05rem;
}

/* ── Filter bar ── */
.um-filter-bar[b-5rb0gj8g6b] {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: .75rem;
    padding: .85rem 1rem;
    margin-bottom: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: .65rem;
}
.um-filter-primary[b-5rb0gj8g6b] {
    display: flex;
    align-items: center;
    gap: .65rem;
    flex-wrap: wrap;
}

/* Search */
.um-search-wrap[b-5rb0gj8g6b] {
    position: relative;
    flex: 0 0 380px;
    max-width: 100%;
}
.um-search-icon[b-5rb0gj8g6b] {
    position: absolute;
    left: .85rem;
    top: 50%;
    transform: translateY(-50%);
    color: #9ca3af;
    font-size: .85rem;
    pointer-events: none;
}
.um-search-input[b-5rb0gj8g6b] {
    width: 100%;
    height: 42px;
    padding: 0 2.5rem 0 2.25rem;
    border: 1.5px solid #d1d5db;
    border-radius: .5rem;
    font-size: .875rem;
    color: #111827;
    background: #fafafa;
    transition: border-color .15s, box-shadow .15s;
    box-sizing: border-box;
}
.um-search-input:focus[b-5rb0gj8g6b] {
    outline: none;
    border-color: #2563eb;
    box-shadow: 0 0 0 3px #2563eb22;
    background: #fff;
}
.um-search-hint[b-5rb0gj8g6b] {
    position: absolute;
    right: .65rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: .65rem;
    color: #9ca3af;
    background: #f3f4f6;
    border: 1px solid #e5e7eb;
    border-radius: .25rem;
    padding: .1rem .3rem;
    pointer-events: none;
}

/* Selects */
.um-filter-select[b-5rb0gj8g6b] {
    height: 42px;
    min-width: 140px;
    padding: 0 .85rem;
    border: 1.5px solid #d1d5db;
    border-radius: .5rem;
    font-size: .82rem;
    color: #374151;
    background: #fafafa;
    cursor: pointer;
    transition: border-color .15s;
}
.um-filter-select:focus[b-5rb0gj8g6b] {
    outline: none;
    border-color: #2563eb;
    box-shadow: 0 0 0 3px #2563eb22;
}
.um-filter-select--tenant[b-5rb0gj8g6b] { min-width: 180px; }

.um-filter-actions[b-5rb0gj8g6b] {
    display: flex;
    align-items: center;
    gap: .45rem;
    margin-left: auto;
}
.um-filter-toggle[b-5rb0gj8g6b] {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    height: 42px;
    padding: 0 .85rem;
    border: 1.5px solid #d1d5db;
    border-radius: .5rem;
    background: #fafafa;
    color: #374151;
    font-size: .8rem;
    font-weight: 500;
    cursor: pointer;
    transition: all .15s;
}
.um-filter-toggle:hover[b-5rb0gj8g6b] { border-color: #2563eb; color: #2563eb; }
.um-filter-toggle--active[b-5rb0gj8g6b] { background: #eff6ff; border-color: #2563eb; color: #2563eb; }
.um-filter-clear[b-5rb0gj8g6b] {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    height: 42px;
    padding: 0 .75rem;
    border: 1.5px solid #fca5a5;
    border-radius: .5rem;
    background: #fef2f2;
    color: #dc2626;
    font-size: .8rem;
    font-weight: 500;
    cursor: pointer;
    transition: all .15s;
}
.um-filter-clear:hover[b-5rb0gj8g6b] { background: #fee2e2; }

/* Secondary filter row */
.um-filter-secondary[b-5rb0gj8g6b] {
    display: flex;
    align-items: center;
    gap: .65rem;
    flex-wrap: wrap;
    padding-top: .5rem;
    border-top: 1px solid #f3f4f6;
}
.um-filter-hint[b-5rb0gj8g6b] {
    font-size: .7rem;
    color: #9ca3af;
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: .25rem;
}

/* Active filter chips */
.um-filter-chips[b-5rb0gj8g6b] {
    display: flex;
    gap: .4rem;
    flex-wrap: wrap;
    padding-top: .4rem;
    border-top: 1px dashed #e5e7eb;
}
.um-chip[b-5rb0gj8g6b] {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    background: #eff6ff;
    color: #1d4ed8;
    border: 1px solid #bfdbfe;
    border-radius: 999px;
    padding: .2rem .6rem;
    font-size: .72rem;
    font-weight: 500;
}
.um-chip button[b-5rb0gj8g6b] {
    border: none;
    background: none;
    color: #2563eb;
    font-size: .85rem;
    cursor: pointer;
    padding: 0;
    line-height: 1;
    opacity: .7;
}
.um-chip button:hover[b-5rb0gj8g6b] { opacity: 1; }

/* ── Table ── */
.um-table-wrap[b-5rb0gj8g6b] {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
table.um-table[b-5rb0gj8g6b] {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
    min-width: 960px;
}
table.um-table colgroup col:nth-child(1)[b-5rb0gj8g6b] { width: 220px; }
table.um-table colgroup col:nth-child(2)[b-5rb0gj8g6b] { width: 240px; }
table.um-table colgroup col:nth-child(3)[b-5rb0gj8g6b] { width: 160px; }
table.um-table colgroup col:nth-child(4)[b-5rb0gj8g6b] { width: 130px; }
table.um-table colgroup col:nth-child(5)[b-5rb0gj8g6b] { width: 170px; }
table.um-table colgroup col:nth-child(6)[b-5rb0gj8g6b] { width: 110px; }
table.um-table colgroup col:nth-child(7)[b-5rb0gj8g6b] { width: 120px; }
table.um-table colgroup col:nth-child(8)[b-5rb0gj8g6b] { width: 200px; }

/* Sticky header */
.um-thead[b-5rb0gj8g6b] { position: sticky; top: 0; z-index: 2; }
.um-th[b-5rb0gj8g6b] {
    padding: 0 1rem;
    height: 52px;
    text-align: left;
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: #4b5563;
    background: #f3f4f6;
    border-bottom: 2px solid #e5e7eb;
    white-space: nowrap;
    overflow: hidden;
    vertical-align: middle;
    /* NEVER set display:flex on a th — it breaks table-cell */
}
/* Inner wrapper for sortable flex layout */
.um-th-inner[b-5rb0gj8g6b] {
    display: flex;
    align-items: center;
    gap: .35rem;
    height: 100%;
    width: 100%;
}
.um-th--sortable[b-5rb0gj8g6b] {
    cursor: pointer;
    user-select: none;
}
.um-th--sortable:hover[b-5rb0gj8g6b] { background: #e9eaec; color: #111827; }
.um-th--actions[b-5rb0gj8g6b] { text-align: right; }
.um-th--actions .um-th-inner[b-5rb0gj8g6b] { justify-content: flex-end; }
.um-th--center[b-5rb0gj8g6b] { text-align: center; }
.um-th--center .um-th-inner[b-5rb0gj8g6b] { justify-content: center; }
.um-sort-icon[b-5rb0gj8g6b] { font-size: .65rem; flex-shrink: 0; }

/* Table rows */
.um-row[b-5rb0gj8g6b] {
    border-bottom: 1px solid #f3f4f6;
    transition: background .1s;
}
.um-row:hover[b-5rb0gj8g6b] { background: #f0f4f8; }
.um-row:nth-child(even)[b-5rb0gj8g6b] { background: #fafafa; }
.um-row:nth-child(even):hover[b-5rb0gj8g6b] { background: #eef2f7; }
.um-row--inactive[b-5rb0gj8g6b] { background: #f9fafb !important; }
.um-row--inactive .um-user-name[b-5rb0gj8g6b] { color: #9ca3af; }
.um-row--pending[b-5rb0gj8g6b] { background: #fffbeb !important; }
.um-row--pending:hover[b-5rb0gj8g6b] { background: #fef3c7 !important; }
.um-row--unverified[b-5rb0gj8g6b] { background: rgba(255,251,235,.4); }

.um-td[b-5rb0gj8g6b] {
    padding: 0 1rem;
    vertical-align: middle;
    font-size: .82rem;
    color: #374151;
    height: 54px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    box-sizing: border-box;
    border-bottom: 1px solid #f3f4f6;
}
.um-td--email[b-5rb0gj8g6b] { color: #6b7280; font-size: .78rem; }
.um-td--muted[b-5rb0gj8g6b] { color: #6b7280; font-size: .78rem; }
.um-dash[b-5rb0gj8g6b] { color: #d1d5db; }
.um-never[b-5rb0gj8g6b] { color: #d1d5db; font-style: italic; }

/* User cell */
.um-user-cell[b-5rb0gj8g6b] {
    display: flex;
    align-items: center;
    gap: .65rem;
}
.um-avatar-img[b-5rb0gj8g6b] {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}
.um-avatar[b-5rb0gj8g6b] {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .75rem;
    font-weight: 700;
    flex-shrink: 0;
}
.um-user-name[b-5rb0gj8g6b] {
    font-weight: 600;
    font-size: .82rem;
    color: #111827;
    white-space: nowrap;
}
.um-unverified-badge[b-5rb0gj8g6b] {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    margin-top: .15rem;
    font-size: .65rem;
    font-weight: 600;
    color: #b45309;
    background: #fef3c7;
    border: 1px solid #fde68a;
    border-radius: .25rem;
    padding: .1rem .4rem;
}

/* Tenant cell */
.um-tenant-cell[b-5rb0gj8g6b] {
    display: flex;
    align-items: center;
    gap: .5rem;
}
.um-tenant-dot[b-5rb0gj8g6b] {
    width: 24px;
    height: 24px;
    border-radius: .3rem;
    color: #fff;
    font-size: .6rem;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.um-tenant-name[b-5rb0gj8g6b] {
    font-size: .78rem;
    color: #374151;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 120px;
}

/* Role badge */
.um-role-badge[b-5rb0gj8g6b] {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: .25rem .6rem;
    border-radius: .35rem;
    font-size: .72rem;
    font-weight: 600;
    white-space: nowrap;
}
.um-role-badge i[b-5rb0gj8g6b] { font-size: .65rem; }

/* Assignment chips */
.um-assign-chips[b-5rb0gj8g6b] {
    display: flex;
    gap: .35rem;
    flex-wrap: wrap;
}
.um-assign-chip[b-5rb0gj8g6b] {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    padding: .2rem .55rem;
    border-radius: 999px;
    font-size: .68rem;
    font-weight: 600;
    white-space: nowrap;
}
.um-assign-chip--class[b-5rb0gj8g6b]   { background: #dbeafe; color: #1e40af; }
.um-assign-chip--subject[b-5rb0gj8g6b] { background: #dcfce7; color: #166534; }

/* Status badges */
.um-status[b-5rb0gj8g6b] {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: .25rem .65rem;
    border-radius: 999px;
    font-size: .72rem;
    font-weight: 600;
    white-space: nowrap;
}
.um-status--active[b-5rb0gj8g6b]   { background: #dcfce7; color: #15803d; }
.um-status--inactive[b-5rb0gj8g6b] { background: #f3f4f6; color: #4b5563; }
.um-status--pending[b-5rb0gj8g6b]  { background: #fef3c7; color: #92400e; }

/* Inline actions */
.um-actions-td[b-5rb0gj8g6b] {
    text-align: right;
    overflow: visible !important;
    white-space: nowrap;
}
.um-inline-actions[b-5rb0gj8g6b] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: .25rem;
    flex-wrap: nowrap;
}
.um-act[b-5rb0gj8g6b] {
    width: 34px;
    height: 34px;
    border: 1px solid #d1d5db;
    border-radius: .4rem;
    background: #f9fafb;
    color: #374151;
    font-size: .8rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all .12s;
    flex-shrink: 0;
}
.um-act:hover[b-5rb0gj8g6b] { background: #e5e7eb; color: #111827; border-color: #9ca3af; }
.um-act--view[b-5rb0gj8g6b]  { color: #2563eb; border-color: #bfdbfe; background: #eff6ff; }
.um-act--view:hover[b-5rb0gj8g6b]  { background: #dbeafe; }
.um-act--edit[b-5rb0gj8g6b]  { color: #7c3aed; border-color: #ddd6fe; background: #f5f3ff; }
.um-act--edit:hover[b-5rb0gj8g6b]  { background: #ede9fe; }
.um-act--approve[b-5rb0gj8g6b]  { color: #16a34a; border-color: #86efac; background: #f0fdf4; }
.um-act--approve:hover[b-5rb0gj8g6b]  { background: #dcfce7; }
.um-act--deactivate[b-5rb0gj8g6b] { color: #d97706; border-color: #fcd34d; background: #fffbeb; }
.um-act--deactivate:hover[b-5rb0gj8g6b] { background: #fef3c7; }
.um-act--activate[b-5rb0gj8g6b] { color: #16a34a; border-color: #86efac; background: #f0fdf4; }
.um-act--activate:hover[b-5rb0gj8g6b] { background: #dcfce7; }
.um-act--pwd[b-5rb0gj8g6b] { color: #374151; border-color: #d1d5db; background: #f9fafb; }
.um-act--pwd:hover[b-5rb0gj8g6b] { background: #e5e7eb; }
.um-act--resend[b-5rb0gj8g6b] { color: #2563eb; border-color: #93c5fd; background: #eff6ff; }
.um-act--resend:hover[b-5rb0gj8g6b] { background: #dbeafe; }



/* Pagination footer */
.um-pagination[b-5rb0gj8g6b] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .85rem 1rem;
    border-top: 1px solid #e5e7eb;
    background: #f9fafb;
    border-radius: 0 0 .75rem .75rem;
    flex-wrap: wrap;
    gap: .5rem;
}
.um-pagination-info[b-5rb0gj8g6b] {
    font-size: .8rem;
    color: #6b7280;
}
.um-pagination-nav[b-5rb0gj8g6b] {
    display: flex;
    align-items: center;
    gap: .35rem;
}
.um-page-btn[b-5rb0gj8g6b] {
    width: 32px;
    height: 32px;
    border: 1px solid #e5e7eb;
    border-radius: .4rem;
    background: #fff;
    color: #374151;
    font-size: .78rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all .12s;
}
.um-page-btn:hover:not(:disabled)[b-5rb0gj8g6b] { background: #f3f4f6; border-color: #d1d5db; }
.um-page-btn:disabled[b-5rb0gj8g6b] { opacity: .35; cursor: not-allowed; }
.um-page-label[b-5rb0gj8g6b] {
    font-size: .8rem;
    font-weight: 600;
    color: #374151;
    padding: 0 .5rem;
    white-space: nowrap;
}
.um-page-size[b-5rb0gj8g6b] {
    height: 32px;
    padding: 0 .6rem;
    border: 1px solid #e5e7eb;
    border-radius: .4rem;
    font-size: .78rem;
    color: #374151;
    background: #fff;
    cursor: pointer;
    margin-left: .5rem;
}
@media (max-width: 768px) {
    .um-kpi-strip[b-5rb0gj8g6b] { grid-template-columns: repeat(2, 1fr); }
    .um-filter-primary[b-5rb0gj8g6b] { flex-direction: column; align-items: stretch; }
    .um-search-wrap[b-5rb0gj8g6b] { flex: 0 0 auto; width: 100%; }
    .um-filter-actions[b-5rb0gj8g6b] { margin-left: 0; }
    .um-filter-secondary[b-5rb0gj8g6b] { flex-direction: column; }
    .um-td[b-5rb0gj8g6b] { padding: .5rem .65rem; height: auto; }
}
/* /Pages/Admin/VideoLessons/AutoPopulate.razor.rz.scp.css */
/* Auto-Populate Videos page -- paired CSS for AutoPopulate.razor */

/* Status cards hover lift */
.status-card[b-io16wk21kt] {
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.status-card:hover[b-io16wk21kt] {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

/* Progress bar animated fill */
.progress-fill[b-io16wk21kt] {
    transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Results table zebra rows */
tbody tr:nth-child(even)[b-io16wk21kt] {
    background-color: rgba(249, 250, 251, 0.6);
}

/* Truncate long search queries in mobile */
@media (max-width: 640px) {
    td.query-cell[b-io16wk21kt] {
        max-width: 120px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
}
/* /Pages/Auth/CompleteProfile.razor.rz.scp.css */
/* Styles handled via Tailwind utility classes in markup */
/* /Pages/Auth/ForgotPassword.razor.rz.scp.css */
/* Styles handled via Tailwind utility classes in markup */
/* /Pages/Auth/Login.razor.rz.scp.css */
.page-transition[b-e6rgcb4scm] { animation: page-in-b-e6rgcb4scm 180ms ease-out; }
.login-page[b-e6rgcb4scm] { align-items: flex-start; padding-top: var(--space-6); padding-bottom: var(--space-6); overflow-y: auto; }
.form-control[b-e6rgcb4scm] { width: 100%; min-height: 44px; padding: var(--space-3); border: 1px solid var(--color-border-dark); border-radius: var(--radius-sm); background: var(--color-surface-primary); color: var(--color-text-primary); }
.form-control:focus[b-e6rgcb4scm] { outline: 2px solid var(--color-primary-200); border-color: var(--color-primary); }
.validation-message[b-e6rgcb4scm] { display: block; margin-top: var(--space-1); color: var(--color-danger-600); font-size: var(--font-size-sm); }
/* ── Demo credentials (development only) ─────────────────────────────────── */
.demo-credentials[b-e6rgcb4scm] { margin-top: var(--space-6); }
.demo-credentials-divider[b-e6rgcb4scm] {
	display: flex; align-items: center; gap: var(--space-3);
	margin-bottom: var(--space-3);
}
.demo-credentials-divider[b-e6rgcb4scm]::before,
.demo-credentials-divider[b-e6rgcb4scm]::after {
	content: ""; flex: 1; height: 1px; background: var(--color-border);
}
.demo-credentials-divider span[b-e6rgcb4scm] {
	font-size: var(--font-size-xs); font-weight: 600;
	color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.06em;
	white-space: nowrap;
}
.demo-credentials-sub[b-e6rgcb4scm] {
	margin: 0 0 var(--space-3);
	font-size: var(--font-size-sm); color: var(--color-text-secondary);
}
.demo-role-grid[b-e6rgcb4scm] {
	display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--space-2);
}
@media (min-width: 480px) {
	.demo-role-grid[b-e6rgcb4scm] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.demo-role-button[b-e6rgcb4scm] {
	min-height: 40px; padding: var(--space-2) var(--space-3);
	border: 1px solid var(--color-border); border-radius: var(--radius-sm);
	background: var(--color-surface-primary); color: var(--color-text-secondary);
	font-size: var(--font-size-sm); font-weight: 500;
	transition: border-color 0.15s, background 0.15s, color 0.15s;
}
.demo-role-button:hover:not(:disabled)[b-e6rgcb4scm] {
	border-color: var(--color-primary); color: var(--color-text-primary);
	background: var(--color-primary-50);
}
.demo-role-button:disabled[b-e6rgcb4scm] { opacity: 0.55; cursor: not-allowed; }
.demo-view-toggle[b-e6rgcb4scm] { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-bottom: var(--space-5); overflow: hidden; border: 1px solid var(--color-border); border-radius: var(--radius-sm); }
.demo-view-toggle button[b-e6rgcb4scm] { min-height: 44px; border: 0; background: var(--color-surface-primary); color: var(--color-text-secondary); font-weight: 600; }
.demo-view-toggle button.active[b-e6rgcb4scm] { background: var(--color-primary); color: var(--color-text-white); }
.login-mode-toggle[b-e6rgcb4scm] { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); overflow: hidden; border: 1px solid var(--color-border); border-radius: var(--radius-sm); }
.login-mode-toggle button[b-e6rgcb4scm] { min-height: 44px; border: 0; background: var(--color-surface-primary); color: var(--color-text-secondary); }
.login-mode-toggle button.active[b-e6rgcb4scm] { background: var(--color-primary); color: var(--color-text-white); }
.password-field[b-e6rgcb4scm] { position: relative; }
.password-field .form-control[b-e6rgcb4scm] { padding-right: 52px; }
.password-toggle[b-e6rgcb4scm] { position: absolute; top: 0; right: 0; width: 44px; height: 44px; border: 0; background: transparent; color: var(--color-text-muted); }

@keyframes page-in-b-e6rgcb4scm {
	from { opacity: 0; transform: translateY(8px); }
	to { opacity: 1; transform: translateY(0); }
}

@media (min-height: 760px) {
	.login-page[b-e6rgcb4scm] { align-items: center; }
}
/* /Pages/Auth/Register.razor.rz.scp.css */
/* Styles handled via Tailwind utility classes in markup */
/* /Pages/Auth/ResetPassword.razor.rz.scp.css */
/* Styles handled via Tailwind utility classes in markup */
/* /Pages/Chairman/AcademicReports/Index.razor.rz.scp.css */

/* /Pages/Chairman/Academic/Exams/Index.razor.rz.scp.css */
/* Styles handled via Tailwind utility classes in markup */
/* /Pages/Chairman/Academic/Results/Index.razor.rz.scp.css */
/* Styles handled via Tailwind utility classes in markup */
/* /Pages/Chairman/Admissions/Details.razor.rz.scp.css */
/* Styles handled via Tailwind utility classes in markup */
/* /Pages/Chairman/Admissions/Index.razor.rz.scp.css */
/* Active status filter card indicator */
.stat-card-active[b-98qfnirxuk] {
    outline: 2px solid var(--color-primary-400);
    outline-offset: 2px;
}

/* Status badge */
.status-badge[b-98qfnirxuk] {
    display: inline-block;
    padding: 0.125rem 0.625rem;
    border-radius: 9999px;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
/* /Pages/Chairman/Analytics/Index.razor.rz.scp.css */

/* /Pages/Chairman/BoardExams/Index.razor.rz.scp.css */
.stat-card[b-6l939qicgj] { background: white; border-radius: 0.75rem; padding: 1rem 1.25rem; border: 1px solid #e5e7eb; }
/* /Pages/Chairman/Communication/Compose/Index.razor.rz.scp.css */
/* Styles handled via Tailwind utility classes in markup */
/* /Pages/Chairman/CompleteProfile.razor.rz.scp.css */
/* Styles handled via Tailwind utility classes in markup */
/* /Pages/Chairman/DashboardNew.razor.rz.scp.css */
/* ── Dashboard Layout ─────────────────────────────────────────────────── */

.dash-root[b-7yg6q4k81l] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    background: #F5F7FA;
    padding: 20px;
}

/* ── Alert Banner ─────────────────────────────────────────────────────── */

.alert-banner[b-7yg6q4k81l] {
    background: #FEF2F2;
    border-left: 4px solid #EF4444;
    border-radius: 8px;
    padding: 10px 16px;
}

.alert-banner__inner[b-7yg6q4k81l] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.alert-banner__left[b-7yg6q4k81l] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.alert-banner__icon[b-7yg6q4k81l] {
    color: #EF4444;
    font-size: 15px;
    flex-shrink: 0;
}

.alert-banner__title[b-7yg6q4k81l] {
    font-size: 0.813rem;
    font-weight: 700;
    color: #991B1B;
}

.alert-banner__msg[b-7yg6q4k81l] {
    font-size: 0.813rem;
    color: #DC2626;
}

.alert-banner__cta[b-7yg6q4k81l] {
    font-size: 0.75rem;
    font-weight: 600;
    color: #DC2626;
    background: none;
    border: none;
    cursor: pointer;
    white-space: nowrap;
    padding: 4px 8px;
    border-radius: 4px;
}

.alert-banner__cta:hover[b-7yg6q4k81l] { background: #FEE2E2; }

/* ── KPI Strip ────────────────────────────────────────────────────────── */

.kpi-strip[b-7yg6q4k81l] {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 16px;
}

.kpi-card[b-7yg6q4k81l] {
    background: #FFFFFF;
    border-radius: 10px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
    padding: 16px;
    border-top: 3px solid transparent;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.kpi-card--blue[b-7yg6q4k81l]   { border-top-color: #3B82F6; }
.kpi-card--green[b-7yg6q4k81l]  { border-top-color: #22C55E; }
.kpi-card--purple[b-7yg6q4k81l] { border-top-color: #A855F7; }
.kpi-card--emerald[b-7yg6q4k81l]{ border-top-color: #10B981; }
.kpi-card--red[b-7yg6q4k81l]    { border-top-color: #EF4444; }

.kpi-card__top[b-7yg6q4k81l] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}

.kpi-icon[b-7yg6q4k81l] {
    width: 32px;
    height: 32px;
    border-radius: 7px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
}

.kpi-icon--blue[b-7yg6q4k81l]    { background: #EFF6FF; color: #3B82F6; }
.kpi-icon--green[b-7yg6q4k81l]   { background: #F0FDF4; color: #22C55E; }
.kpi-icon--purple[b-7yg6q4k81l]  { background: #FAF5FF; color: #A855F7; }
.kpi-icon--emerald[b-7yg6q4k81l] { background: #ECFDF5; color: #10B981; }
.kpi-icon--red[b-7yg6q4k81l]     { background: #FEF2F2; color: #EF4444; }

.kpi-badge[b-7yg6q4k81l] {
    font-size: 0.7rem;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 999px;
}

.kpi-badge--green[b-7yg6q4k81l]  { background: #DCFCE7; color: #15803D; }
.kpi-badge--amber[b-7yg6q4k81l]  { background: #FEF9C3; color: #A16207; }
.kpi-badge--red[b-7yg6q4k81l]    { background: #FEE2E2; color: #B91C1C; }
.kpi-badge--blue[b-7yg6q4k81l]   { background: #DBEAFE; color: #1D4ED8; }

.kpi-num[b-7yg6q4k81l] {
    font-size: 30px;
    font-weight: 800;
    color: #111827;
    line-height: 1.1;
}

.kpi-num--red[b-7yg6q4k81l] { color: #DC2626; }

.kpi-lbl[b-7yg6q4k81l] {
    font-size: 0.8rem;
    color: #6B7280;
    font-weight: 500;
}

.kpi-progress[b-7yg6q4k81l] {
    height: 4px;
    background: #F3F4F6;
    border-radius: 2px;
    margin-top: 10px;
    overflow: hidden;
}

.kpi-progress__bar[b-7yg6q4k81l] {
    height: 100%;
    background: #10B981;
    border-radius: 2px;
    transition: width 0.6s ease;
}

.kpi-link[b-7yg6q4k81l] {
    font-size: 0.72rem;
    color: #6B7280;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    text-align: left;
    margin-top: 6px;
}

.kpi-link:hover[b-7yg6q4k81l] { color: #3B82F6; }
.kpi-link--red:hover[b-7yg6q4k81l] { color: #DC2626; }

/* ── Main Grid ────────────────────────────────────────────────────────── */

.main-grid[b-7yg6q4k81l] {
    display: grid;
    grid-template-columns: 1fr 400px;
    gap: 16px;
    align-items: start;
}

.main-grid__left[b-7yg6q4k81l] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.main-grid__right[b-7yg6q4k81l] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* ── Bottom Grid ──────────────────────────────────────────────────────── */

.bottom-grid[b-7yg6q4k81l] {
    display: grid;
    grid-template-columns: 1fr 1fr 280px;
    gap: 16px;
    align-items: start;
}

/* ── Section Card ─────────────────────────────────────────────────────── */

.section-card[b-7yg6q4k81l] {
    background: #FFFFFF;
    border-radius: 10px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
    padding: 18px 20px;
}

.section-card__header[b-7yg6q4k81l] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #F3F4F6;
    padding-bottom: 10px;
    margin-bottom: 4px;
}

.section-card__title[b-7yg6q4k81l] {
    font-size: 0.9rem;
    font-weight: 600;
    color: #111827;
}

.section-card__title i[b-7yg6q4k81l] {
    margin-right: 6px;
    color: #6B7280;
    font-size: 0.85rem;
}

.section-card__viewall[b-7yg6q4k81l] {
    font-size: 0.72rem;
    color: #3B82F6;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    text-decoration: none;
}

.section-card__viewall:hover[b-7yg6q4k81l] { color: #1D4ED8; text-decoration: underline; }

/* ── Metric Row ───────────────────────────────────────────────────────── */

.metric-row[b-7yg6q4k81l] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 0;
    border-bottom: 1px solid #F9FAFB;
}

.metric-row--last[b-7yg6q4k81l] { border-bottom: none; }

.metric-row__left[b-7yg6q4k81l] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.metric-row__right[b-7yg6q4k81l] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.metric-icon[b-7yg6q4k81l] {
    width: 32px;
    height: 32px;
    border-radius: 7px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    flex-shrink: 0;
}

.metric-icon--green[b-7yg6q4k81l]  { background: #F0FDF4; color: #22C55E; }
.metric-icon--blue[b-7yg6q4k81l]   { background: #EFF6FF; color: #3B82F6; }
.metric-icon--purple[b-7yg6q4k81l] { background: #FAF5FF; color: #A855F7; }
.metric-icon--orange[b-7yg6q4k81l] { background: #FFF7ED; color: #F97316; }
.metric-icon--amber[b-7yg6q4k81l]  { background: #FFFBEB; color: #F59E0B; }
.metric-icon--red[b-7yg6q4k81l]    { background: #FEF2F2; color: #EF4444; }

.metric-label[b-7yg6q4k81l] {
    font-size: 0.85rem;
    font-weight: 500;
    color: #374151;
}

.metric-sub[b-7yg6q4k81l] {
    font-size: 0.72rem;
    color: #9CA3AF;
}

.metric-value[b-7yg6q4k81l] {
    font-size: 0.9rem;
    font-weight: 700;
    color: #111827;
}

/* ── Status Pill ──────────────────────────────────────────────────────── */

.status-pill[b-7yg6q4k81l] {
    font-size: 0.68rem;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 999px;
    white-space: nowrap;
}

.status-pill--green[b-7yg6q4k81l]  { background: #DCFCE7; color: #15803D; }
.status-pill--amber[b-7yg6q4k81l]  { background: #FEF9C3; color: #A16207; }
.status-pill--red[b-7yg6q4k81l]    { background: #FEE2E2; color: #B91C1C; }
.status-pill--blue[b-7yg6q4k81l]   { background: #DBEAFE; color: #1D4ED8; }

/* ── Financial Metrics ────────────────────────────────────────────────── */

.fin-metric[b-7yg6q4k81l] {
    padding: 12px 0;
    border-bottom: 1px solid #F3F4F6;
}

.fin-metric--risk[b-7yg6q4k81l] {
    background: #FEF2F2;
    margin: 8px -20px;
    padding: 12px 20px;
    border-bottom: none;
    border-radius: 4px;
}

.fin-metric__header[b-7yg6q4k81l] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 4px;
}

.fin-metric__label[b-7yg6q4k81l] {
    font-size: 0.78rem;
    color: #6B7280;
    font-weight: 500;
}

.fin-metric__label--risk[b-7yg6q4k81l] {
    color: #B91C1C;
    font-weight: 600;
}

.fin-metric__label--risk i[b-7yg6q4k81l] { margin-right: 4px; }

.fin-metric__value[b-7yg6q4k81l] {
    font-size: 24px;
    font-weight: 800;
    color: #111827;
    line-height: 1.2;
}

.fin-metric__value--red[b-7yg6q4k81l] { color: #DC2626; }

.fin-metric__action[b-7yg6q4k81l] {
    font-size: 0.72rem;
    color: #DC2626;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    margin-top: 6px;
}

.fin-metric__action:hover[b-7yg6q4k81l] { text-decoration: underline; }

.fin-badge[b-7yg6q4k81l] {
    font-size: 0.68rem;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 999px;
}

.fin-badge--green[b-7yg6q4k81l] { background: #DCFCE7; color: #15803D; }
.fin-badge--red[b-7yg6q4k81l]   { background: #FEE2E2; color: #B91C1C; }

.fin-progress[b-7yg6q4k81l] {
    height: 6px;
    background: #F3F4F6;
    border-radius: 3px;
    margin-top: 8px;
    overflow: hidden;
}

.fin-progress__bar[b-7yg6q4k81l] {
    height: 100%;
    border-radius: 3px;
    transition: width 0.6s ease;
}

.fin-progress__bar--green[b-7yg6q4k81l] { background: #22C55E; }

.fin-row-pair[b-7yg6q4k81l] {
    display: flex;
    align-items: stretch;
    gap: 0;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid #F3F4F6;
}

.fin-pair-item[b-7yg6q4k81l] {
    flex: 1;
    padding: 0 12px;
}

.fin-pair-item:first-child[b-7yg6q4k81l] { padding-left: 0; }
.fin-pair-item:last-child[b-7yg6q4k81l]  { padding-right: 0; }

.fin-pair-divider[b-7yg6q4k81l] {
    width: 1px;
    background: #E5E7EB;
    flex-shrink: 0;
}

.fin-pair-item__label[b-7yg6q4k81l] {
    font-size: 0.72rem;
    color: #9CA3AF;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.fin-pair-item__sub[b-7yg6q4k81l] {
    font-size: 0.78rem;
    color: #6B7280;
    margin: 2px 0 4px;
}

.fin-pair-item__value[b-7yg6q4k81l] {
    font-size: 1.1rem;
    font-weight: 700;
}

.fin-pair-item__value--green[b-7yg6q4k81l] { color: #16A34A; }

/* ── Hostel Strip ─────────────────────────────────────────────────────── */

.hostel-strip[b-7yg6q4k81l] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    margin-top: 4px;
}

.hostel-stat[b-7yg6q4k81l] {
    text-align: center;
    padding: 10px 4px;
    border-radius: 8px;
    background: #F9FAFB;
}

.hostel-stat--alert[b-7yg6q4k81l] { background: #FEF2F2; }
.hostel-stat--alert .hostel-stat__num[b-7yg6q4k81l] { color: #DC2626; }

.hostel-stat__num[b-7yg6q4k81l] {
    font-size: 1.4rem;
    font-weight: 800;
    color: #111827;
    line-height: 1.1;
}

.hostel-stat__denom[b-7yg6q4k81l] {
    font-size: 0.85rem;
    color: #9CA3AF;
    font-weight: 500;
}

.hostel-stat__lbl[b-7yg6q4k81l] {
    font-size: 0.68rem;
    color: #9CA3AF;
    font-weight: 500;
    margin-top: 2px;
}

/* ── Approvals ────────────────────────────────────────────────────────── */

.approval-row[b-7yg6q4k81l] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 0;
    border-bottom: 1px solid #F9FAFB;
    gap: 8px;
}

.approval-row:last-child[b-7yg6q4k81l] { border-bottom: none; }

.approval-row__info[b-7yg6q4k81l] { flex: 1; }

.approval-row__title[b-7yg6q4k81l] {
    font-size: 0.82rem;
    font-weight: 600;
    color: #374151;
}

.approval-row__desc[b-7yg6q4k81l] {
    font-size: 0.72rem;
    color: #9CA3AF;
    margin-top: 1px;
}

.approval-row__btn[b-7yg6q4k81l] {
    font-size: 0.7rem;
    font-weight: 600;
    color: #4F46E5;
    background: #EEF2FF;
    border: none;
    border-radius: 999px;
    padding: 4px 12px;
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
}

.approval-row__btn:hover[b-7yg6q4k81l] { background: #E0E7FF; }

/* ── Empty State ──────────────────────────────────────────────────────── */

.empty-state[b-7yg6q4k81l] {
    text-align: center;
    padding: 24px 16px;
}

.empty-state__icon[b-7yg6q4k81l] {
    font-size: 28px;
    color: #22C55E;
    display: block;
    margin-bottom: 8px;
}

.empty-state__msg[b-7yg6q4k81l] {
    font-size: 0.875rem;
    font-weight: 600;
    color: #374151;
}

.empty-state__sub[b-7yg6q4k81l] {
    font-size: 0.75rem;
    color: #9CA3AF;
    margin-top: 2px;
}

/* ── Quick Actions ────────────────────────────────────────────────────── */

.action-grid[b-7yg6q4k81l] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-top: 4px;
}

.action-btn[b-7yg6q4k81l] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 14px 8px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-size: 0.8rem;
    font-weight: 600;
    transition: transform 0.12s ease, box-shadow 0.12s ease;
}

.action-btn:hover[b-7yg6q4k81l] {
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(0,0,0,0.10);
}

.action-btn__icon[b-7yg6q4k81l] { font-size: 18px; }

.action-btn--blue[b-7yg6q4k81l]   { background: #EFF6FF; color: #1D4ED8; }
.action-btn--green[b-7yg6q4k81l]  { background: #F0FDF4; color: #15803D; }
.action-btn--purple[b-7yg6q4k81l] { background: #FAF5FF; color: #7C3AED; }
.action-btn--orange[b-7yg6q4k81l] { background: #FFF7ED; color: #C2410C; }

/* ── Responsive ───────────────────────────────────────────────────────── */

@keyframes fade-up-b-7yg6q4k81l {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: translateY(0); }
}

.kpi-strip[b-7yg6q4k81l], .main-grid[b-7yg6q4k81l], .bottom-grid[b-7yg6q4k81l], .section-card[b-7yg6q4k81l] {
    animation: fade-up-b-7yg6q4k81l 0.35s ease both;
}

@media (max-width: 1100px) {
    .kpi-strip[b-7yg6q4k81l] { grid-template-columns: repeat(3, 1fr); }
    .main-grid[b-7yg6q4k81l] { grid-template-columns: 1fr; }
    .bottom-grid[b-7yg6q4k81l] { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 700px) {
    .dash-root[b-7yg6q4k81l] { padding: 12px; gap: 12px; }
    .kpi-strip[b-7yg6q4k81l] { grid-template-columns: repeat(2, 1fr); }
    .main-grid[b-7yg6q4k81l] { grid-template-columns: 1fr; }
    .bottom-grid[b-7yg6q4k81l] { grid-template-columns: 1fr; }
    .hostel-strip[b-7yg6q4k81l] { grid-template-columns: repeat(2, 1fr); }
}
/* /Pages/Chairman/Financial/Budget.razor.rz.scp.css */
/* No additional styles needed */
/* /Pages/Chairman/Financial/DayBook.razor.rz.scp.css */
/* ─── Mobile payment mode badges ───────────────────────── */
[b-6byc6gghl9] .db-mode-badge {
    display: inline-block;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.03em;
    padding: 2px 8px;
    border-radius: 6px;
    border: 1px solid transparent;
}
[b-6byc6gghl9] .db-badge-cash   { background: #f0fdf4; color: #16a34a; border-color: #bbf7d0; }
[b-6byc6gghl9] .db-badge-upi    { background: #eff6ff; color: #1d4ed8; border-color: #bfdbfe; }
[b-6byc6gghl9] .db-badge-cheque { background: #fefce8; color: #b45309; border-color: #fde68a; }
[b-6byc6gghl9] .db-badge-online { background: #faf5ff; color: #7c3aed; border-color: #ddd6fe; }

/* ─── Chip strip: hide scrollbar, keep swipe ───────────── */
[b-6byc6gghl9] .db-chip-strip {
    -ms-overflow-style: none;
    scrollbar-width: none;
}
[b-6byc6gghl9] .db-chip-strip::-webkit-scrollbar {
    display: none;
}

/* ─── Quick filter chips ────────────────────────────────── */
[b-6byc6gghl9] .db-chip {
    height: 34px;
    padding: 0 14px;
    font-size: 13px;
    font-weight: 500;
    color: #6b7280;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    white-space: nowrap;
    transition: all 0.15s;
    cursor: pointer;
}

[b-6byc6gghl9] .db-chip:hover {
    background: #f9fafb;
    border-color: #d1d5db;
    color: #374151;
}

[b-6byc6gghl9] .db-chip-active {
    background: var(--color-primary, #0e7490);
    border-color: var(--color-primary, #0e7490);
    color: #fff !important;
    font-weight: 600;
}

[b-6byc6gghl9] .db-chip-mode-active {
    background: #eff6ff;
    border-color: #bfdbfe;
    color: #1d4ed8 !important;
    font-weight: 600;
}

/* ─── Calendar cell ─────────────────────────────────────── */
[b-6byc6gghl9] .db-cal-cell {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 44px;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.12s, transform 0.1s;
    overflow: hidden;
    border: 1px solid transparent;
    font-size: 12px;
    color: #374151;
    margin: 1px auto;
}

[b-6byc6gghl9] .db-cal-cell:hover:not(:disabled) {
    background: #f3f4f6;
    transform: scale(1.05);
}

[b-6byc6gghl9] .db-cal-day {
    font-size: 12px;
    font-weight: 500;
    line-height: 1;
    z-index: 1;
    position: relative;
}

[b-6byc6gghl9] .db-cal-amt {
    font-size: 9px;
    font-weight: 600;
    color: #16a34a;
    line-height: 1;
    z-index: 1;
    position: relative;
    margin-top: 1px;
}

[b-6byc6gghl9] .db-cal-has-data {
    background: #f0fdf4;
}

[b-6byc6gghl9] .db-cal-bar {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 3px;
    background: #22c55e;
    transition: width 0.3s ease;
    border-radius: 0 2px 2px 0;
    max-width: 100%;
}

[b-6byc6gghl9] .db-cal-today {
    border-color: var(--color-primary, #0e7490) !important;
    background: #f0fdff;
}

[b-6byc6gghl9] .db-cal-today .db-cal-day {
    color: var(--color-primary, #0e7490);
    font-weight: 700;
}

[b-6byc6gghl9] .db-cal-selected {
    background: var(--color-primary, #0e7490) !important;
    border-color: var(--color-primary, #0e7490) !important;
}

[b-6byc6gghl9] .db-cal-selected .db-cal-day,
[b-6byc6gghl9] .db-cal-selected .db-cal-amt {
    color: #fff !important;
}

[b-6byc6gghl9] .db-cal-selected .db-cal-bar {
    background: rgba(255, 255, 255, 0.5);
}

[b-6byc6gghl9] .db-cal-future {
    opacity: 0.35;
    cursor: not-allowed;
}

    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding-bottom: 6px;
    scrollbar-width: thin;
    scrollbar-color: #e2e8f0 transparent;[b-6byc6gghl9]
}

.date-chips-row[b-6byc6gghl9]::-webkit-scrollbar {
    height: 4px;
}

.date-chips-row[b-6byc6gghl9]::-webkit-scrollbar-track {
    background: transparent;
}

.date-chips-row[b-6byc6gghl9]::-webkit-scrollbar-thumb {
    background: #e2e8f0;
    border-radius: 4px;
}

/* Individual date chip */
.date-chip[b-6byc6gghl9] {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 60px;
    border-radius: 10px;
    border: 1.5px solid transparent;
    cursor: pointer;
    transition: all 0.15s ease;
    font-family: inherit;
    gap: 2px;
}

.date-chip-day[b-6byc6gghl9] {
    font-size: 1.2rem;
    font-weight: 700;
    line-height: 1;
}

.date-chip-dow[b-6byc6gghl9] {
    font-size: 0.65rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    line-height: 1;
}

/* Inactive chip */
.date-chip-inactive[b-6byc6gghl9] {
    background: #f8fafc;
    border-color: #e2e8f0;
    color: #475569;
}

.date-chip-inactive:hover[b-6byc6gghl9] {
    background: #eff6ff;
    border-color: #93c5fd;
    color: #1d4ed8;
}

/* Active/selected chip */
.date-chip-active[b-6byc6gghl9] {
    background: #2563eb;
    border-color: #1d4ed8;
    color: white;
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.35);
}

/* /Pages/Chairman/Financial/Expenses/Index.razor.rz.scp.css */
/* Chairman/Financial/Expenses/Index.razor.css */
.page-header[b-w2bsms8xfz] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
}
/* /Pages/Chairman/Financial/FeeConcessions.razor.rz.scp.css */
/* Chairman Fee Concessions — scoped CSS */
/* /Pages/Chairman/Financial/FeeRefunds.razor.rz.scp.css */
/* Chairman/Financial/FeeRefunds.razor.css */
/* /Pages/Chairman/Financial/FeeStructure.razor.rz.scp.css */
/* Chairman Fee Structure Viewer — accordion layout */

/* ── Page shell ────────────────────────────────────────────────────────────── */
.fs-page[b-dg7wnwsqcv] {
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
    padding: 1.5rem 1rem;
}

/* ── Page header ───────────────────────────────────────────────────────────── */
.fs-page-header[b-dg7wnwsqcv] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-bottom: 1.5rem;
}
@media (min-width: 640px) {
    .fs-page-header[b-dg7wnwsqcv] {
        flex-direction: row;
        justify-content: space-between;
        align-items: flex-start;
    }
}
.fs-page-title[b-dg7wnwsqcv] {
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--color-neutral-900);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}
.fs-title-icon[b-dg7wnwsqcv] { color: var(--color-purple-500, #8b5cf6); }
.fs-view-badge[b-dg7wnwsqcv] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.7rem;
    font-weight: 600;
    background: var(--color-blue-50, #eff6ff);
    color: var(--color-blue-600, #2563eb);
    border: 1px solid var(--color-blue-200, #bfdbfe);
    border-radius: 999px;
    padding: 2px 8px;
}
.fs-page-sub[b-dg7wnwsqcv] {
    font-size: 0.8rem;
    color: var(--color-neutral-500);
    margin-top: 0.2rem;
}

/* ── Toolbar ───────────────────────────────────────────────────────────────── */
.fs-toolbar[b-dg7wnwsqcv] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    background: #fff;
    border: 1px solid var(--color-neutral-200);
    border-radius: 0.75rem;
    padding: 0.75rem 1rem;
    margin-bottom: 1rem;
    flex-wrap: wrap;
}
.fs-toolbar-label[b-dg7wnwsqcv] {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--color-neutral-600);
    flex-shrink: 0;
}
.fs-expand-all-btn[b-dg7wnwsqcv] {
    margin-left: auto;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--color-primary, #4f46e5);
    background: none;
    border: 1px solid var(--color-primary, #4f46e5);
    border-radius: 6px;
    padding: 0.3rem 0.75rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: background 0.15s, color 0.15s;
}
.fs-expand-all-btn:hover[b-dg7wnwsqcv] {
    background: var(--color-primary, #4f46e5);
    color: #fff;
}

/* ── KPI row ───────────────────────────────────────────────────────────────── */
.fs-kpi-row[b-dg7wnwsqcv] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
    margin-bottom: 1rem;
}
@media (min-width: 640px) {
    .fs-kpi-row[b-dg7wnwsqcv] { grid-template-columns: repeat(4, 1fr); }
}
@media (min-width: 1024px) {
    .fs-kpi-row[b-dg7wnwsqcv] { grid-template-columns: repeat(5, 1fr); }
}
.fs-kpi[b-dg7wnwsqcv] {
    background: #fff;
    border: 1px solid var(--color-neutral-200);
    border-radius: 0.75rem;
    padding: 0.8rem 1rem;
}
.fs-kpi--wide[b-dg7wnwsqcv] {
    grid-column: span 2;
}
@media (min-width: 1024px) {
    .fs-kpi--wide[b-dg7wnwsqcv] { grid-column: span 1; }
}
.fs-kpi-label[b-dg7wnwsqcv] {
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-neutral-400);
    margin-bottom: 0.25rem;
}
.fs-kpi-value[b-dg7wnwsqcv] {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--color-neutral-900);
    font-variant-numeric: tabular-nums;
}
.fs-kpi-value--green[b-dg7wnwsqcv] { color: var(--color-success-600, #16a34a); }
.fs-kpi-value--amber[b-dg7wnwsqcv] { color: var(--color-warning-600, #d97706); }
.fs-kpi-value--purple[b-dg7wnwsqcv] { color: var(--color-purple-600, #7c3aed); }

/* ── Accordion container ───────────────────────────────────────────────────── */
.fs-accordion[b-dg7wnwsqcv] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

/* ── Accordion item ────────────────────────────────────────────────────────── */
.fs-item[b-dg7wnwsqcv] {
    background: #fff;
    border: 1px solid var(--color-neutral-200);
    border-radius: 0.75rem;
    overflow: hidden;
    transition: box-shadow 0.15s;
}
.fs-item--open[b-dg7wnwsqcv] {
    border-color: var(--color-primary-200, #c7d2fe);
    box-shadow: 0 2px 8px rgba(79, 70, 229, 0.08);
}

/* ── Accordion header (clickable row) ─────────────────────────────────────── */
.fs-header[b-dg7wnwsqcv] {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.8rem 1rem;
    background: none;
    border: none;
    cursor: pointer;
    text-align: left;
    transition: background 0.12s;
}
.fs-header:hover[b-dg7wnwsqcv] { background: var(--color-neutral-50, #f9fafb); }
.fs-item--open .fs-header[b-dg7wnwsqcv] { background: var(--color-primary-50, #eef2ff); }

.fs-header-left[b-dg7wnwsqcv] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    min-width: 0;
    flex-shrink: 0;
}
.fs-class-icon[b-dg7wnwsqcv] {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    background: var(--color-blue-50, #eff6ff);
    color: var(--color-blue-500, #3b82f6);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    flex-shrink: 0;
}
.fs-item--open .fs-class-icon[b-dg7wnwsqcv] {
    background: var(--color-primary-100, #e0e7ff);
    color: var(--color-primary, #4f46e5);
}
.fs-class-name[b-dg7wnwsqcv] {
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--color-neutral-800);
    white-space: nowrap;
}

/* Meta pills (head count, mandatory, optional) */
.fs-header-meta[b-dg7wnwsqcv] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: wrap;
    flex: 1;
    min-width: 0;
}
.fs-badge[b-dg7wnwsqcv] {
    display: inline-flex;
    align-items: center;
    font-size: 0.68rem;
    font-weight: 600;
    padding: 2px 7px;
    border-radius: 999px;
    white-space: nowrap;
}
.fs-badge--blue[b-dg7wnwsqcv] {
    background: var(--color-blue-50, #eff6ff);
    color: var(--color-blue-600, #2563eb);
    border: 1px solid var(--color-blue-100, #dbeafe);
}
.fs-badge--green[b-dg7wnwsqcv] {
    background: var(--color-success-50, #f0fdf4);
    color: var(--color-success-700, #15803d);
    border: 1px solid var(--color-success-100, #dcfce7);
}
.fs-badge--amber[b-dg7wnwsqcv] {
    background: var(--color-warning-50, #fffbeb);
    color: var(--color-warning-700, #b45309);
    border: 1px solid var(--color-warning-100, #fde68a);
}

/* Right side: total + chevron */
.fs-header-right[b-dg7wnwsqcv] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-shrink: 0;
    margin-left: auto;
}
.fs-header-total[b-dg7wnwsqcv] {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--color-success-700, #15803d);
    font-variant-numeric: tabular-nums;
}
.fs-per-year[b-dg7wnwsqcv] {
    font-size: 0.7rem;
    font-weight: 500;
    color: var(--color-neutral-400);
    margin-left: 2px;
}
.fs-chevron[b-dg7wnwsqcv] {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--color-neutral-100);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.65rem;
    color: var(--color-neutral-500);
    transition: transform 0.2s, background 0.15s;
    flex-shrink: 0;
}
.fs-item--open .fs-chevron[b-dg7wnwsqcv] {
    transform: rotate(180deg);
    background: var(--color-primary-100, #e0e7ff);
    color: var(--color-primary, #4f46e5);
}

/* ── Accordion body ────────────────────────────────────────────────────────── */
.fs-body[b-dg7wnwsqcv] {
    border-top: 1px solid var(--color-neutral-100);
    animation: fsBodyIn-b-dg7wnwsqcv 0.15s ease-out;
}
@keyframes fsBodyIn-b-dg7wnwsqcv {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}
.fs-table-wrap[b-dg7wnwsqcv] { overflow-x: auto; }

/* ── Table ─────────────────────────────────────────────────────────────────── */
.fs-table[b-dg7wnwsqcv] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8rem;
}
.fs-thead-row[b-dg7wnwsqcv] { background: var(--color-neutral-50, #f9fafb); }
.fs-th[b-dg7wnwsqcv] {
    padding: 0.55rem 1rem;
    text-align: left;
    font-size: 0.67rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-neutral-400);
    white-space: nowrap;
}
.fs-th--right[b-dg7wnwsqcv] { text-align: right; }
.fs-th--center[b-dg7wnwsqcv] { text-align: center; }

.fs-row[b-dg7wnwsqcv] { border-top: 1px solid var(--color-neutral-50); }
.fs-row:hover[b-dg7wnwsqcv] { background: var(--color-neutral-50, #f9fafb); }
.fs-td[b-dg7wnwsqcv] {
    padding: 0.6rem 1rem;
    color: var(--color-neutral-700);
    vertical-align: middle;
}
.fs-td--name[b-dg7wnwsqcv] {
    font-weight: 600;
    color: var(--color-neutral-900);
    font-size: 0.82rem;
}
.fs-td--amount[b-dg7wnwsqcv] {
    text-align: right;
    font-weight: 700;
    color: var(--color-neutral-900);
    font-variant-numeric: tabular-nums;
}
.fs-td--center[b-dg7wnwsqcv] { text-align: center; }
.fs-td--muted[b-dg7wnwsqcv] { color: var(--color-neutral-400); font-size: 0.78rem; }

.fs-cat-badge[b-dg7wnwsqcv] {
    display: inline-flex;
    align-items: center;
    font-size: 0.68rem;
    font-weight: 600;
    padding: 2px 7px;
    border-radius: 999px;
    background: var(--color-purple-50, #f5f3ff);
    color: var(--color-purple-700, #6d28d9);
    border: 1px solid var(--color-purple-100, #ede9fe);
}

.fs-type-badge[b-dg7wnwsqcv] {
    display: inline-flex;
    align-items: center;
    font-size: 0.68rem;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 999px;
}
.fs-type-badge--mandatory[b-dg7wnwsqcv] {
    background: var(--color-success-50, #f0fdf4);
    color: var(--color-success-700, #15803d);
    border: 1px solid var(--color-success-100, #dcfce7);
}
.fs-type-badge--optional[b-dg7wnwsqcv] {
    background: var(--color-warning-50, #fffbeb);
    color: var(--color-warning-700, #b45309);
    border: 1px solid var(--color-warning-100, #fde68a);
}

/* Total footer row */
.fs-total-row[b-dg7wnwsqcv] { border-top: 2px solid var(--color-neutral-200); background: var(--color-neutral-50, #f9fafb); }
.fs-total-label[b-dg7wnwsqcv] {
    padding: 0.6rem 1rem;
    text-align: right;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-neutral-600);
}
.fs-total-amount[b-dg7wnwsqcv] {
    padding: 0.6rem 1rem;
    text-align: right;
    font-size: 0.875rem;
    font-weight: 800;
    color: var(--color-success-700, #15803d);
    font-variant-numeric: tabular-nums;
}

/* ── Loading / empty states ────────────────────────────────────────────────── */
.fs-loading[b-dg7wnwsqcv], .fs-empty[b-dg7wnwsqcv] {
    text-align: center;
    padding: 3rem 1rem;
    background: #fff;
    border: 1px solid var(--color-neutral-200);
    border-radius: 0.75rem;
    color: var(--color-neutral-500);
}
.fs-spinner[b-dg7wnwsqcv] { font-size: 2rem; color: var(--color-primary, #4f46e5); margin-bottom: 0.75rem; }
.fs-empty-icon[b-dg7wnwsqcv] { font-size: 2.5rem; color: var(--color-neutral-300); margin-bottom: 0.75rem; }
.fs-empty h3[b-dg7wnwsqcv], .fs-loading p[b-dg7wnwsqcv] { font-size: 0.9rem; font-weight: 600; color: var(--color-neutral-700); }

.fs-empty-school[b-dg7wnwsqcv] {
    text-align: center;
    padding: 3rem 1rem;
    background: var(--color-warning-50, #fffbeb);
    border: 1px solid var(--color-warning-200, #fde68a);
    border-radius: 0.75rem;
    color: var(--color-warning-700, #b45309);
}
.fs-empty-school h3[b-dg7wnwsqcv] { font-size: 1rem; font-weight: 700; margin-bottom: 0.25rem; }
.fs-empty-school p[b-dg7wnwsqcv]  { font-size: 0.82rem; }

/* ── Responsive ────────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
    .fs-header-meta[b-dg7wnwsqcv] { display: none; }
    .fs-class-name[b-dg7wnwsqcv] { font-size: 0.8rem; }
    .fs-header-total[b-dg7wnwsqcv] { font-size: 0.8rem; }
}
/* /Pages/Chairman/Financial/Fees/Index.razor.rz.scp.css */
/* Styles handled via Tailwind utility classes in markup */
/* /Pages/Chairman/Financial/PendingFees.razor.rz.scp.css */
/* Chairman Pending Fees */
/* /Pages/Chairman/Financial/Receipts.razor.rz.scp.css */
/* Chairman Receipts */
/* /Pages/Chairman/Financial/Reports/ReceivablesReport.razor.rz.scp.css */
/* Chairman Receivables Report */
/* /Pages/Chairman/Financial/Reports/ReceivablesStudentDetails.razor.rz.scp.css */
/* Chairman Receivables Student Details */
/* /Pages/Chairman/Financial/Reports/StudentLedger.razor.rz.scp.css */
/* Chairman Student Ledger */
/* /Pages/Chairman/Financial/Reports/StudentLedgerSearch.razor.rz.scp.css */
/* Chairman Student Ledger Search */
/* /Pages/Chairman/Financial/Statements.razor.rz.scp.css */
.stat-card[b-c0fszku05j] {
    background: white;
    border-radius: 0.75rem;
    padding: 1rem 1.25rem;
    border: 1px solid var(--color-neutral-200, #e5e7eb);
}

.stat-label[b-c0fszku05j] { font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-neutral-500, #6b7280); margin-bottom: 0.25rem; }
.stat-value[b-c0fszku05j] { font-size: 1.5rem; font-weight: 700; line-height: 1.2; }
.stat-sub[b-c0fszku05j] { font-size: 0.72rem; color: var(--color-neutral-400, #9ca3af); margin-top: 0.2rem; }

.stat-card--green .stat-value[b-c0fszku05j] { color: #15803d; }
.stat-card--red .stat-value[b-c0fszku05j] { color: #b91c1c; }
.stat-card--blue .stat-value[b-c0fszku05j] { color: #1d4ed8; }
.stat-card--amber .stat-value[b-c0fszku05j] { color: #92400e; }

.stmt-row[b-c0fszku05j] {
    display: flex;
    align-items: center;
    padding: 0.35rem 0;
    gap: 0.5rem;
}
.stmt-label[b-c0fszku05j] { flex: 1; font-size: 0.83rem; color: var(--color-neutral-700, #374151); }
.stmt-pct[b-c0fszku05j] { font-size: 0.75rem; width: 3.5rem; text-align: right; }
.stmt-amount[b-c0fszku05j] { font-size: 0.875rem; font-weight: 600; width: 8rem; text-align: right; }

.stmt-bar-track[b-c0fszku05j] {
    height: 4px;
    background: var(--color-neutral-100, #f3f4f6);
    border-radius: 2px;
    margin-bottom: 0.4rem;
}
.stmt-bar[b-c0fszku05j] { height: 4px; border-radius: 2px; transition: width 0.3s ease; }
.stmt-bar--green[b-c0fszku05j] { background: #16a34a; }
.stmt-bar--red[b-c0fszku05j] { background: #dc2626; }

.spinner[b-c0fszku05j] {
    width: 2rem;
    height: 2rem;
    border: 3px solid var(--color-neutral-200, #e5e7eb);
    border-top-color: var(--color-primary, #6366f1);
    border-radius: 50%;
    animation: spin-b-c0fszku05j 0.8s linear infinite;
}

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

.btn-outline-sm[b-c0fszku05j] {
    display: inline-flex;
    align-items: center;
    padding: 0.375rem 0.875rem;
    font-size: 0.8125rem;
    font-weight: 500;
    border: 1px solid var(--color-neutral-300, #d1d5db);
    border-radius: 0.5rem;
    background: white;
    color: var(--color-neutral-700, #374151);
    cursor: pointer;
    transition: background 0.15s;
}
.btn-outline-sm:hover[b-c0fszku05j] { background: var(--color-neutral-50, #f9fafb); }

/* ── Clickable category rows ───────────────────────────────── */
.stmt-row--clickable[b-c0fszku05j] {
    cursor: pointer;
    border-radius: 6px;
    padding-left: 6px;
    padding-right: 4px;
    margin-left: -6px;
    margin-right: -4px;
    transition: background 0.12s;
}
.stmt-row--clickable:hover[b-c0fszku05j] { background: #f0fdf4; }
.stmt-nav-icon[b-c0fszku05j] {
    font-size: 0.65rem;
    opacity: 0;
    transition: opacity 0.12s, transform 0.12s;
    flex-shrink: 0;
}
.stmt-row--clickable:hover .stmt-nav-icon[b-c0fszku05j] { opacity: 1; transform: translateX(2px); }

/* ── Monthly accordion ─────────────────────────────────────── */
.stmt-month-row[b-c0fszku05j] {
    border-bottom: 1px solid #f3f4f6;
    cursor: pointer;
    transition: background 0.12s;
    user-select: none;
}
.stmt-month-row:hover[b-c0fszku05j] { background: #f9fafb; }
.stmt-month-row--open[b-c0fszku05j] { background: #fafafa; }

.stmt-chevron[b-c0fszku05j] {
    font-size: 0.6rem;
    color: #9ca3af;
    transition: transform 0.18s ease;
    flex-shrink: 0;
}
.stmt-chevron--open[b-c0fszku05j] { transform: rotate(90deg); color: #6366f1; }

.stmt-accordion-row[b-c0fszku05j] { background: #f9fafb; }
.stmt-accordion[b-c0fszku05j] {
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    padding: 16px;
}

/* ── KPI mini-cards inside accordion ──────────────────────── */
.stmt-kpi[b-c0fszku05j] {
    padding: 10px 14px;
    border-radius: 8px;
    border: 1px solid #e5e7eb;
}
.stmt-kpi--green[b-c0fszku05j] { background: #f0fdf4; border-color: #bbf7d0; }
.stmt-kpi--red[b-c0fszku05j]   { background: #fff5f5; border-color: #fecaca; }
.stmt-kpi--blue[b-c0fszku05j]  { background: #eff6ff; border-color: #bfdbfe; }
.stmt-kpi--amber[b-c0fszku05j] { background: #fffbeb; border-color: #fde68a; }
.stmt-kpi-label[b-c0fszku05j]  { font-size: 0.67rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: #9ca3af; margin-bottom: 4px; }
.stmt-kpi-value[b-c0fszku05j]  { font-size: 1.05rem; font-weight: 800; font-variant-numeric: tabular-nums; }

/* ── Quick-link buttons in accordion ──────────────────────── */
.stmt-link-btn[b-c0fszku05j] {
    display: inline-flex; align-items: center;
    padding: 5px 12px;
    border-radius: 6px;
    font-size: 0.75rem; font-weight: 600;
    cursor: pointer; transition: all 0.12s;
    border: 1px solid transparent;
}
.stmt-link-btn--green[b-c0fszku05j] { background: #dcfce7; color: #15803d; border-color: #bbf7d0; }
.stmt-link-btn--green:hover[b-c0fszku05j] { background: #bbf7d0; }
.stmt-link-btn--red[b-c0fszku05j] { background: #fee2e2; color: #b91c1c; border-color: #fecaca; }
.stmt-link-btn--red:hover[b-c0fszku05j] { background: #fecaca; }

/* /Pages/Chairman/Hostel/Approvals.razor.rz.scp.css */
/* Re-use the same design tokens from the Principal Approvals page */

.approvals-page[b-bcofvwhiw6] {
    padding: var(--spacing-6, 1.5rem);
    max-width: 1200px;
    margin: 0 auto;
}
.page-header[b-bcofvwhiw6] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--spacing-4, 1rem);
    margin-bottom: var(--spacing-6, 1.5rem);
    flex-wrap: wrap;
}
.page-title[b-bcofvwhiw6] { font-size: 1.5rem; font-weight: 700; color: var(--color-text-primary, #111827); margin: 0; }
.page-subtitle[b-bcofvwhiw6] { font-size: 0.875rem; color: var(--color-text-secondary, #6b7280); margin: 0.25rem 0 0; }
.btn-refresh[b-bcofvwhiw6] {
    display: flex; align-items: center; gap: 0.4rem;
    padding: 0.45rem 1rem;
    border: 1px solid var(--color-border, #d1d5db);
    border-radius: var(--radius-md, 6px);
    background: #fff; font-size: 0.875rem; cursor: pointer;
    color: var(--color-text-primary, #111827);
}
.btn-refresh:hover[b-bcofvwhiw6] { background: var(--color-bg-hover, #f3f4f6); }
.icon-refresh[b-bcofvwhiw6] { font-style: normal; display: inline-block; }
.icon-refresh.spinning[b-bcofvwhiw6] { animation: spin-b-bcofvwhiw6 1s linear infinite; }
@keyframes spin-b-bcofvwhiw6 { to { transform: rotate(360deg); } }

.summary-row[b-bcofvwhiw6] { display: flex; gap: var(--spacing-4, 1rem); margin-bottom: var(--spacing-6, 1.5rem); flex-wrap: wrap; }
.summary-card[b-bcofvwhiw6] {
    flex: 1; min-width: 160px; display: flex; align-items: center; gap: 0.75rem;
    padding: 1rem 1.25rem;
    border-radius: var(--radius-lg, 8px);
    border: 2px solid var(--color-border, #d1d5db);
    background: #fff; cursor: pointer;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.summary-card:hover[b-bcofvwhiw6], .summary-card.active[b-bcofvwhiw6] {
    border-color: var(--color-primary, #4f46e5);
    box-shadow: 0 0 0 3px rgba(79,70,229,0.1);
}
.summary-icon[b-bcofvwhiw6] { font-size: 1.75rem; }
.summary-count[b-bcofvwhiw6] { font-size: 1.5rem; font-weight: 700; color: var(--color-primary, #4f46e5); }
.summary-label[b-bcofvwhiw6] { font-size: 0.75rem; color: var(--color-text-secondary, #6b7280); }

.tab-panel[b-bcofvwhiw6] { margin-top: var(--spacing-2, 0.5rem); }
.tab-title[b-bcofvwhiw6] { font-size: 1.1rem; font-weight: 600; margin-bottom: var(--spacing-4, 1rem); color: var(--color-text-primary, #111827); }
.empty-state[b-bcofvwhiw6] {
    padding: 2rem; text-align: center;
    background: var(--color-bg-surface, #f9fafb);
    border-radius: var(--radius-md, 6px);
    color: var(--color-text-secondary, #6b7280); font-size: 0.95rem;
}
.table-wrap[b-bcofvwhiw6] { overflow-x: auto; }
.approval-table[b-bcofvwhiw6] { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.approval-table th[b-bcofvwhiw6] {
    background: var(--color-bg-surface, #f9fafb); padding: 0.65rem 1rem; text-align: left;
    font-weight: 600; font-size: 0.8rem; color: var(--color-text-secondary, #6b7280);
    border-bottom: 1px solid var(--color-border, #d1d5db); white-space: nowrap;
}
.approval-table td[b-bcofvwhiw6] {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--color-border, #d1d5db);
    color: var(--color-text-primary, #111827);
}
.approval-table tr:last-child td[b-bcofvwhiw6] { border-bottom: none; }
.approval-table tr:hover td[b-bcofvwhiw6] { background: var(--color-bg-hover, #f3f4f6); }
.amount-col[b-bcofvwhiw6] { font-weight: 700; color: var(--color-text-primary, #111827); }

.btn-approve[b-bcofvwhiw6], .btn-reject[b-bcofvwhiw6] {
    display: inline-flex; align-items: center; gap: 0.25rem;
    padding: 0.3rem 0.75rem;
    border-radius: var(--radius-sm, 4px); font-size: 0.8rem; font-weight: 600;
    cursor: pointer; border: none; margin-right: 0.4rem;
}
.btn-approve[b-bcofvwhiw6] { background: #d1fae5; color: #065f46; }
.btn-approve:hover[b-bcofvwhiw6] { background: #a7f3d0; }
.btn-reject[b-bcofvwhiw6] { background: #fee2e2; color: #991b1b; }
.btn-reject:hover[b-bcofvwhiw6] { background: #fecaca; }

.alert-error[b-bcofvwhiw6] {
    background: #fee2e2; color: #991b1b;
    padding: 0.75rem 1rem; border-radius: var(--radius-md, 6px);
    font-size: 0.875rem; margin-bottom: var(--spacing-4, 1rem);
}
.loading-state[b-bcofvwhiw6] {
    display: flex; flex-direction: column; align-items: center;
    gap: var(--spacing-4, 1rem); padding: 3rem;
    color: var(--color-text-secondary, #6b7280);
}
.spinner[b-bcofvwhiw6] {
    width: 36px; height: 36px;
    border: 3px solid var(--color-border, #d1d5db);
    border-top-color: var(--color-primary, #4f46e5);
    border-radius: 50%; animation: spin-b-bcofvwhiw6 0.8s linear infinite;
}

.modal-overlay[b-bcofvwhiw6] {
    position: fixed; inset: 0; background: rgba(0,0,0,0.45);
    z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 1rem;
}
.modal-card[b-bcofvwhiw6] {
    background: #fff; border-radius: var(--radius-lg, 8px);
    width: 100%; max-width: 460px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.2);
}
.modal-header[b-bcofvwhiw6] {
    display: flex; align-items: center; justify-content: space-between;
    padding: 1rem 1.25rem; border-bottom: 1px solid var(--color-border, #d1d5db);
}
.modal-header h3[b-bcofvwhiw6] { margin: 0; font-size: 1rem; font-weight: 600; }
.btn-close[b-bcofvwhiw6] {
    background: none; border: none; font-size: 1.4rem;
    cursor: pointer; color: var(--color-text-secondary, #6b7280); line-height: 1;
}
.modal-body[b-bcofvwhiw6] { padding: 1.25rem; display: flex; flex-direction: column; gap: 0.75rem; }
.modal-body p[b-bcofvwhiw6] { margin: 0; font-size: 0.9rem; }
.form-label[b-bcofvwhiw6] { font-size: 0.85rem; font-weight: 600; color: var(--color-text-primary, #111827); }
.form-textarea[b-bcofvwhiw6] {
    width: 100%; padding: 0.5rem 0.75rem;
    border: 1px solid var(--color-border, #d1d5db);
    border-radius: var(--radius-md, 6px);
    font-size: 0.875rem; resize: vertical; font-family: inherit;
}
.modal-footer[b-bcofvwhiw6] {
    display: flex; justify-content: flex-end; gap: 0.75rem;
    padding: 1rem 1.25rem; border-top: 1px solid var(--color-border, #d1d5db);
}

.btn-approve-solid[b-bcofvwhiw6] {
    padding: 0.45rem 1.1rem; border: none;
    border-radius: var(--radius-md, 6px); background: var(--color-success, #10b981);
    color: #fff; font-size: 0.875rem; font-weight: 600; cursor: pointer;
}
.btn-approve-solid:disabled[b-bcofvwhiw6] { opacity: 0.5; cursor: not-allowed; }
.btn-reject-solid[b-bcofvwhiw6] {
    padding: 0.45rem 1.1rem; border: none;
    border-radius: var(--radius-md, 6px); background: var(--color-danger, #ef4444);
    color: #fff; font-size: 0.875rem; font-weight: 600; cursor: pointer;
}
.btn-reject-solid:disabled[b-bcofvwhiw6] { opacity: 0.5; cursor: not-allowed; }

@media (max-width: 640px) {
    .approvals-page[b-bcofvwhiw6] { padding: var(--spacing-4, 1rem); }
    .summary-row[b-bcofvwhiw6] { gap: 0.5rem; }
    .summary-card[b-bcofvwhiw6] { padding: 0.75rem; min-width: 120px; }
    .approval-table th[b-bcofvwhiw6], .approval-table td[b-bcofvwhiw6] { padding: 0.55rem 0.6rem; }
}
/* /Pages/Chairman/HR/Leaves/Index.razor.rz.scp.css */
/* Styles handled via Tailwind utility classes in markup */
/* /Pages/Chairman/HR/Payroll.razor.rz.scp.css */
.stat-card[b-ezzv1ohhyb] {
    background: white;
    border-radius: 0.75rem;
    padding: 1rem 1.25rem;
    border: 1px solid var(--color-neutral-200, #e5e7eb);
}

.stat-label[b-ezzv1ohhyb] { font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-neutral-500, #6b7280); margin-bottom: 0.25rem; }
.stat-value[b-ezzv1ohhyb] { font-size: 1.4rem; font-weight: 700; line-height: 1.2; }
.stat-sub[b-ezzv1ohhyb] { font-size: 0.72rem; color: var(--color-neutral-400, #9ca3af); margin-top: 0.2rem; }

.status-badge[b-ezzv1ohhyb] {
    display: inline-flex;
    align-items: center;
    padding: 0.15rem 0.5rem;
    border-radius: 9999px;
    font-size: 0.7rem;
    font-weight: 600;
}
.status-badge--green[b-ezzv1ohhyb] { background: #dcfce7; color: #15803d; }
.status-badge--blue[b-ezzv1ohhyb] { background: #dbeafe; color: #1d4ed8; }

.spinner[b-ezzv1ohhyb] {
    width: 2rem;
    height: 2rem;
    border: 3px solid var(--color-neutral-200, #e5e7eb);
    border-top-color: var(--color-primary, #6366f1);
    border-radius: 50%;
    animation: spin-b-ezzv1ohhyb 0.8s linear infinite;
}

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

.btn-outline-sm[b-ezzv1ohhyb] {
    display: inline-flex;
    align-items: center;
    padding: 0.375rem 0.875rem;
    font-size: 0.8125rem;
    font-weight: 500;
    border: 1px solid var(--color-neutral-300, #d1d5db);
    border-radius: 0.5rem;
    background: white;
    color: var(--color-neutral-700, #374151);
    cursor: pointer;
    transition: background 0.15s;
}
.btn-outline-sm:hover[b-ezzv1ohhyb] { background: var(--color-neutral-50, #f9fafb); }

/* ── Payroll Run Breakdown Modal ────────────────────────────── */
.papr-view-btn[b-ezzv1ohhyb] {
    display: inline-flex; align-items: center; padding: 5px 12px;
    border: 1px solid #e0f2fe; background: #f0f9ff; color: #0369a1;
    border-radius: 6px; font-size: 0.75rem; font-weight: 600;
    cursor: pointer; transition: all 0.12s; white-space: nowrap;
}
.papr-view-btn:hover[b-ezzv1ohhyb] { background: #e0f2fe; border-color: #bae6fd; color: #075985; }

.papr-modal-kpi-grid[b-ezzv1ohhyb] {
    display: grid; grid-template-columns: repeat(4, 1fr);
    border-bottom: 1px solid #f3f4f6;
}
@media (max-width: 640px) { .papr-modal-kpi-grid[b-ezzv1ohhyb] { grid-template-columns: repeat(2, 1fr); } }
.papr-modal-kpi[b-ezzv1ohhyb] { padding: 16px 20px; text-align: center; border-right: 1px solid #f3f4f6; }
.papr-modal-kpi:last-child[b-ezzv1ohhyb] { border-right: none; }
.papr-modal-kpi-green[b-ezzv1ohhyb] { background: #f0fdf4; border-right: none; }
.papr-modal-kpi-red[b-ezzv1ohhyb] { background: #fff5f5; }
.papr-modal-kpi-label[b-ezzv1ohhyb] { font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: #9ca3af; margin-bottom: 6px; }
.papr-modal-kpi-value[b-ezzv1ohhyb] { font-size: 1.6rem; font-weight: 800; color: #111827; font-variant-numeric: tabular-nums; line-height: 1.1; }
.papr-modal-red[b-ezzv1ohhyb] { color: #dc2626; }
.papr-modal-green[b-ezzv1ohhyb] { color: #15803d; }
.papr-modal-kpi-sub[b-ezzv1ohhyb] { font-size: 0.67rem; color: #9ca3af; margin-top: 3px; }

.papr-section-title[b-ezzv1ohhyb] { font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: #6b7280; margin-bottom: 4px; }
.papr-section-count[b-ezzv1ohhyb] { display: inline-flex; align-items: center; justify-content: center; background: #e5e7eb; color: #374151; font-size: 0.68rem; font-weight: 700; border-radius: 999px; padding: 2px 7px; margin-left: 6px; }

.papr-deduct-card[b-ezzv1ohhyb] { background: #fff8f8; border: 1px solid #fecaca; border-radius: 8px; padding: 12px 14px; text-align: center; }
.papr-deduct-icon[b-ezzv1ohhyb] { font-size: 1rem; color: #f87171; margin-bottom: 6px; }
.papr-deduct-label[b-ezzv1ohhyb] { font-size: 0.68rem; font-weight: 600; color: #9ca3af; margin-bottom: 4px; text-transform: uppercase; letter-spacing: 0.04em; }
.papr-deduct-value[b-ezzv1ohhyb] { font-size: 1.1rem; font-weight: 800; color: #dc2626; font-variant-numeric: tabular-nums; line-height: 1.1; }
.papr-deduct-pct[b-ezzv1ohhyb] { font-size: 0.67rem; color: #ef4444; margin-top: 3px; opacity: 0.75; }

.papr-insight-row[b-ezzv1ohhyb] { display: flex; align-items: flex-start; gap: 8px; padding: 6px 0; font-size: 0.8125rem; color: #374151; }
.papr-insight-dot[b-ezzv1ohhyb] { display: inline-block; width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; margin-top: 4px; }
.papr-insight-text[b-ezzv1ohhyb] { line-height: 1.4; }
.papr-insight-text strong[b-ezzv1ohhyb] { color: #111827; }

.papr-thead-row[b-ezzv1ohhyb] { background: #f8fafc; border-bottom: 1px solid #e5e7eb; }
.papr-th[b-ezzv1ohhyb] { padding: 10px 16px; text-align: left; font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: #6b7280; white-space: nowrap; }
.papr-th-right[b-ezzv1ohhyb] { text-align: right; }
.papr-row[b-ezzv1ohhyb] { border-bottom: 1px solid #f3f4f6; transition: background 0.12s; }
.papr-row:hover[b-ezzv1ohhyb] { background: #f9fafb; }
.papr-row-alt[b-ezzv1ohhyb] { background: #fafafa; }
.papr-row-alt:hover[b-ezzv1ohhyb] { background: #f3f4f6; }
.papr-td[b-ezzv1ohhyb] { padding: 14px 16px; font-size: 0.8125rem; color: #374151; font-variant-numeric: tabular-nums; }
.papr-td-right[b-ezzv1ohhyb] { text-align: right; font-weight: 600; color: #111827; }
.papr-net[b-ezzv1ohhyb] { font-weight: 800; color: #0e7490; font-size: 0.875rem; }
.papr-totals-row[b-ezzv1ohhyb] { background: #f8fafc; border-top: 2px solid #e5e7eb; }
.papr-totals-row .papr-td[b-ezzv1ohhyb] { padding: 12px 16px; }

.papr-chip[b-ezzv1ohhyb] { display: inline-flex; align-items: center; padding: 4px 10px; border-radius: 999px; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.01em; white-space: nowrap; }
.papr-chip-green[b-ezzv1ohhyb] { background: #dcfce7; color: #15803d; }
.papr-chip-blue[b-ezzv1ohhyb]  { background: #dbeafe; color: #1d4ed8; }
.papr-chip-red[b-ezzv1ohhyb]   { background: #fee2e2; color: #b91c1c; }
.papr-chip-gray[b-ezzv1ohhyb]  { background: #f3f4f6; color: #6b7280; }

.papr-modal-footer[b-ezzv1ohhyb] { display: flex; align-items: center; justify-content: space-between; padding: 12px 24px; border-top: 1px solid #f3f4f6; background: #f9fafb; flex-shrink: 0; border-radius: 0 0 16px 16px; }
.papr-close-btn[b-ezzv1ohhyb] { display: inline-flex; align-items: center; padding: 7px 16px; border: 1px solid #e5e7eb; background: #fff; color: #374151; border-radius: 8px; font-size: 0.8125rem; font-weight: 500; cursor: pointer; transition: all 0.12s; }
.papr-close-btn:hover[b-ezzv1ohhyb] { background: #f9fafb; border-color: #d1d5db; }

/* /Pages/Chairman/HR/Teachers/Index.razor.rz.scp.css */
/* Styles handled via Tailwind utility classes in markup */
/* /Pages/Chairman/Inbox/Index.razor.rz.scp.css */
/* Styles handled via Tailwind utility classes in markup */
/* /Pages/Chairman/Schools/Details.razor.rz.scp.css */
/* Styles handled via Tailwind utility classes in markup */
/* /Pages/Chairman/Schools/Index.razor.rz.scp.css */
/* ══ Schools Workspace ═══════════════════════════════════════════════════ */

.sw-page[b-q0h8hrm9d1] {
    display: flex;
    flex-direction: column;
    gap: 20px;
    /* Full width — no centering container. Layout already handled by ChairmanLayout <main>. */
}

/* ── Loading ─────────────────────────────────────────────────────────── */

.sw-loading[b-q0h8hrm9d1] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 400px;
    gap: 12px;
    color: #6b7280;
}

.sw-loading i[b-q0h8hrm9d1] {
    font-size: 2.5rem;
    color: #7c3aed;
}

/* ── Page Header ─────────────────────────────────────────────────────── */

.sw-header[b-q0h8hrm9d1] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.sw-title[b-q0h8hrm9d1] {
    font-size: 1.5rem;
    font-weight: 700;
    color: #0f172a;
    margin: 0 0 3px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.sw-title i[b-q0h8hrm9d1] { color: #7c3aed; }

.sw-sub[b-q0h8hrm9d1] {
    font-size: 0.8125rem;
    color: #64748b;
    margin: 0;
}

.sw-export-btn[b-q0h8hrm9d1] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 38px;
    padding: 0 16px;
    background: white;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    font-size: 0.8125rem;
    font-weight: 500;
    color: #374151;
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
    transition: background 0.15s, border-color 0.15s;
}

.sw-export-btn:hover[b-q0h8hrm9d1] {
    background: #f9fafb;
    border-color: #9ca3af;
}

/* ── KPI Strip ───────────────────────────────────────────────────────── */

.sw-kpi-strip[b-q0h8hrm9d1] {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 14px;
}

.sw-kpi[b-q0h8hrm9d1] {
    background: white;
    border-radius: 12px;
    padding: 18px 20px;
    display: flex;
    align-items: center;
    gap: 14px;
    border: 1px solid #f1f5f9;
    box-shadow: 0 1px 2px rgba(0,0,0,.04), 0 4px 12px rgba(0,0,0,.05);
    transition: transform 0.2s, box-shadow 0.2s;
}

.sw-kpi:hover[b-q0h8hrm9d1] {
    transform: translateY(-2px);
    box-shadow: 0 2px 4px rgba(0,0,0,.06), 0 8px 20px rgba(0,0,0,.08);
}

.sw-kpi-icon[b-q0h8hrm9d1] {
    width: 48px;
    height: 48px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    color: white;
    flex-shrink: 0;
}

.sw-kpi--purple .sw-kpi-icon[b-q0h8hrm9d1] { background: linear-gradient(135deg, #8b5cf6, #7c3aed); }
.sw-kpi--blue   .sw-kpi-icon[b-q0h8hrm9d1] { background: linear-gradient(135deg, #60a5fa, #3b82f6); }
.sw-kpi--green  .sw-kpi-icon[b-q0h8hrm9d1] { background: linear-gradient(135deg, #34d399, #10b981); }
.sw-kpi--amber  .sw-kpi-icon[b-q0h8hrm9d1] { background: linear-gradient(135deg, #fbbf24, #f59e0b); }
.sw-kpi--red    .sw-kpi-icon[b-q0h8hrm9d1] { background: linear-gradient(135deg, #f87171, #ef4444); }

.sw-kpi-body[b-q0h8hrm9d1] { display: flex; flex-direction: column; gap: 2px; }

.sw-kpi-val[b-q0h8hrm9d1] {
    font-size: 1.75rem;
    font-weight: 700;
    color: #0f172a;
    line-height: 1.1;
    letter-spacing: -0.5px;
}

.sw-kpi-lbl[b-q0h8hrm9d1] {
    font-size: 0.75rem;
    color: #64748b;
    font-weight: 500;
}

/* ── Toolbar ─────────────────────────────────────────────────────────── */

.sw-toolbar[b-q0h8hrm9d1] {
    display: flex;
    align-items: center;
    gap: 10px;
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 8px 12px;
    box-shadow: 0 1px 2px rgba(0,0,0,.04);
}

.sw-search[b-q0h8hrm9d1] {
    position: relative;
    flex: 1;
    min-width: 0;
}

.sw-search-icon[b-q0h8hrm9d1] {
    position: absolute;
    left: 11px;
    top: 50%;
    transform: translateY(-50%);
    color: #94a3b8;
    font-size: 0.8rem;
    pointer-events: none;
}

.sw-search-input[b-q0h8hrm9d1] {
    width: 100%;
    height: 36px;
    padding: 0 32px 0 30px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    font-size: 0.8125rem;
    color: #0f172a;
    background: #f8fafc;
    outline: none;
    box-sizing: border-box;
    transition: border-color 0.15s, background 0.15s;
}

.sw-search-input:focus[b-q0h8hrm9d1] {
    border-color: #7c3aed;
    background: white;
    box-shadow: 0 0 0 2px #ede9fe;
}

.sw-search-clear[b-q0h8hrm9d1] {
    position: absolute;
    right: 7px;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #e2e8f0;
    border: none;
    cursor: pointer;
    font-size: 0.65rem;
    color: #64748b;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s;
}

.sw-search-clear:hover[b-q0h8hrm9d1] { background: #cbd5e1; }

.sw-filters[b-q0h8hrm9d1] {
    display: flex;
    align-items: center;
    gap: 5px;
    flex-shrink: 0;
}

.sw-filter[b-q0h8hrm9d1] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    height: 30px;
    padding: 0 11px;
    border: 1px solid #e2e8f0;
    border-radius: 999px;
    background: white;
    font-size: 0.75rem;
    font-weight: 500;
    color: #475569;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.15s;
}

.sw-filter:hover[b-q0h8hrm9d1]  { border-color: #7c3aed; color: #7c3aed; }
.sw-filter.active[b-q0h8hrm9d1] { background: #7c3aed; border-color: #7c3aed; color: white; }

/* ── Dots ────────────────────────────────────────────────────────────── */

.sw-dot[b-q0h8hrm9d1] {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    display: inline-block;
    flex-shrink: 0;
}

.sw-dot--green[b-q0h8hrm9d1] { background: #16a34a; }
.sw-dot--red[b-q0h8hrm9d1]   { background: #dc2626; }

/* ── Schools Grid ────────────────────────────────────────────────────── */

.sw-grid[b-q0h8hrm9d1] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(520px, 1fr));
    gap: 16px;
}

/* ── School Card ─────────────────────────────────────────────────────── */

.sw-card[b-q0h8hrm9d1] {
    background: white;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
    box-shadow: 0 1px 2px rgba(0,0,0,.04), 0 4px 12px rgba(0,0,0,.05);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: transform 0.2s, box-shadow 0.2s;
}

.sw-card:hover[b-q0h8hrm9d1] {
    transform: translateY(-2px);
    box-shadow: 0 2px 4px rgba(0,0,0,.06), 0 8px 24px rgba(0,0,0,.1);
}

.sw-card--inactive[b-q0h8hrm9d1] {
    opacity: 0.72;
    background: #f8fafc;
}

/* Card Head: logo + name + status */
.sw-card-head[b-q0h8hrm9d1] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 18px 14px;
    border-bottom: 1px solid #f1f5f9;
}

.sw-card-logo[b-q0h8hrm9d1] { flex-shrink: 0; }

.sw-card-identity[b-q0h8hrm9d1] {
    flex: 1;
    min-width: 0;
}

.sw-card-name[b-q0h8hrm9d1] {
    font-size: 1rem;
    font-weight: 700;
    color: #0f172a;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.3;
}

.sw-card-loc[b-q0h8hrm9d1] {
    font-size: 0.75rem;
    color: #64748b;
    margin-top: 2px;
    display: flex;
    align-items: center;
    gap: 4px;
}

.sw-status[b-q0h8hrm9d1] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 600;
    flex-shrink: 0;
    white-space: nowrap;
}

.sw-status--active[b-q0h8hrm9d1]   { background: #dcfce7; color: #166534; }
.sw-status--inactive[b-q0h8hrm9d1] { background: #fee2e2; color: #991b1b; }

/* Stats row */
.sw-card-stats[b-q0h8hrm9d1] {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    background: #f8fafc;
    border-bottom: 1px solid #f1f5f9;
}

.sw-stat[b-q0h8hrm9d1] {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 12px 8px;
    border-right: 1px solid #e2e8f0;
    gap: 2px;
}

.sw-stat:last-child[b-q0h8hrm9d1] { border-right: none; }

.sw-stat-val[b-q0h8hrm9d1] {
    font-size: 1.1rem;
    font-weight: 700;
    color: #0f172a;
    line-height: 1.2;
}

.sw-stat-val.good[b-q0h8hrm9d1] { color: #16a34a; }
.sw-stat-val.warn[b-q0h8hrm9d1] { color: #d97706; }
.sw-stat-val.bad[b-q0h8hrm9d1]  { color: #dc2626; }

.sw-stat-lbl[b-q0h8hrm9d1] {
    font-size: 0.68rem;
    color: #94a3b8;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* Fee + actions footer */
.sw-card-foot[b-q0h8hrm9d1] {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 11px 18px;
}

.sw-fee[b-q0h8hrm9d1] {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.sw-fee-amt[b-q0h8hrm9d1] {
    font-size: 0.78rem;
    font-weight: 600;
    color: #334155;
    white-space: nowrap;
    flex-shrink: 0;
}

.sw-fee-track[b-q0h8hrm9d1] {
    flex: 1;
    height: 5px;
    background: #e2e8f0;
    border-radius: 999px;
    overflow: hidden;
}

.sw-fee-fill[b-q0h8hrm9d1] {
    height: 100%;
    border-radius: 999px;
    transition: width 0.4s ease;
}

.sw-bar--green[b-q0h8hrm9d1] { background: #16a34a; }
.sw-bar--amber[b-q0h8hrm9d1] { background: #d97706; }
.sw-bar--red[b-q0h8hrm9d1]   { background: #dc2626; }

.sw-alert-chip[b-q0h8hrm9d1] {
    font-size: 0.68rem;
    font-weight: 600;
    color: #92400e;
    background: #fef3c7;
    padding: 2px 7px;
    border-radius: 4px;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 3px;
    flex-shrink: 0;
}

.sw-actions[b-q0h8hrm9d1] {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
}

.sw-btn-primary[b-q0h8hrm9d1] {
    height: 36px;
    padding: 0 14px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: #6d28d9;
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s, transform 0.15s;
}

.sw-btn-primary:hover[b-q0h8hrm9d1] {
    background: #5b21b6;
    transform: translateY(-1px);
}

.sw-btn-secondary[b-q0h8hrm9d1] {
    height: 36px;
    padding: 0 14px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: white;
    color: #374151;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    font-size: 0.8rem;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s, border-color 0.15s, transform 0.15s;
}

.sw-btn-secondary:hover[b-q0h8hrm9d1] {
    background: #f9fafb;
    border-color: #9ca3af;
    transform: translateY(-1px);
}

/* ── Empty State ─────────────────────────────────────────────────────── */

.sw-empty[b-q0h8hrm9d1] {
    background: white;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
    padding: 56px 24px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.sw-empty i[b-q0h8hrm9d1]  { font-size: 2.5rem; color: #d1d5db; margin-bottom: 4px; }
.sw-empty h3[b-q0h8hrm9d1] { font-size: 1rem; font-weight: 600; color: #374151; margin: 0; }
.sw-empty p[b-q0h8hrm9d1]  { font-size: 0.875rem; color: #6b7280; margin: 0 0 8px; }

/* ── Responsive ──────────────────────────────────────────────────────── */

@media (max-width: 1100px) {
    .sw-kpi-strip[b-q0h8hrm9d1] { grid-template-columns: repeat(3, 1fr); }
    .sw-grid[b-q0h8hrm9d1]      { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
    .sw-kpi-strip[b-q0h8hrm9d1] { grid-template-columns: repeat(2, 1fr); }
    .sw-toolbar[b-q0h8hrm9d1]   { flex-wrap: wrap; }
    .sw-card-stats[b-q0h8hrm9d1] { grid-template-columns: repeat(3, 1fr); }
    .sw-stat:nth-child(3)[b-q0h8hrm9d1] { border-right: none; }
    .sw-card-foot[b-q0h8hrm9d1] { flex-direction: column; align-items: stretch; }
    .sw-actions[b-q0h8hrm9d1]   { justify-content: stretch; }
    .sw-btn-primary[b-q0h8hrm9d1], .sw-btn-secondary[b-q0h8hrm9d1] { flex: 1; justify-content: center; }
}

@media (max-width: 520px) {
    .sw-header[b-q0h8hrm9d1] { flex-direction: column; align-items: flex-start; }
    .sw-kpi-strip[b-q0h8hrm9d1] { grid-template-columns: 1fr 1fr; }
}

/* ── Page Header ─────────────────────────────────────────────────────── */

.page-header[b-q0h8hrm9d1] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.page-title[b-q0h8hrm9d1] {
    font-size: 1.35rem;
    font-weight: 700;
    color: #1e1b4b;
    margin: 0 0 2px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.page-title i[b-q0h8hrm9d1] {
    color: #7c3aed;
}

.page-sub[b-q0h8hrm9d1] {
    font-size: 0.8125rem;
    color: #6b7280;
    margin: 0;
}

.btn-export[b-q0h8hrm9d1] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 16px;
    height: 38px;
    background: white;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    font-size: 0.8125rem;
    font-weight: 500;
    color: #374151;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s, border-color 0.15s;
    flex-shrink: 0;
}

.btn-export:hover[b-q0h8hrm9d1] {
    background: #f9fafb;
    border-color: #9ca3af;
}

/* ── KPI Strip ───────────────────────────────────────────────────────── */

.kpi-strip[b-q0h8hrm9d1] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}

.kpi-card[b-q0h8hrm9d1] {
    background: white;
    border-radius: 12px;
    padding: 20px 22px;
    display: flex;
    align-items: center;
    gap: 16px;
    border: 1px solid #f0f0f0;
    box-shadow: 0 1px 2px rgba(0,0,0,.04), 0 4px 12px rgba(0,0,0,.05);
    transition: transform 0.2s, box-shadow 0.2s;
}

.kpi-card:hover[b-q0h8hrm9d1] {
    transform: translateY(-2px);
    box-shadow: 0 2px 4px rgba(0,0,0,.06), 0 8px 20px rgba(0,0,0,.08);
}

.kpi-icon[b-q0h8hrm9d1] {
    font-size: 1.5rem;
    width: 52px;
    height: 52px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.kpi-purple .kpi-icon[b-q0h8hrm9d1] { background: linear-gradient(135deg, #8b5cf6, #7c3aed); color: white; }
.kpi-blue   .kpi-icon[b-q0h8hrm9d1] { background: linear-gradient(135deg, #60a5fa, #3b82f6); color: white; }
.kpi-green  .kpi-icon[b-q0h8hrm9d1] { background: linear-gradient(135deg, #34d399, #10b981); color: white; }
.kpi-amber  .kpi-icon[b-q0h8hrm9d1] { background: linear-gradient(135deg, #fbbf24, #f59e0b); color: white; }

.kpi-body[b-q0h8hrm9d1] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.kpi-value[b-q0h8hrm9d1] {
    font-size: 2rem;
    font-weight: 700;
    color: #111827;
    line-height: 1.1;
    letter-spacing: -0.5px;
}

.kpi-label[b-q0h8hrm9d1] {
    font-size: 0.78rem;
    color: #6b7280;
    font-weight: 500;
}

/* ── Search + Filter Toolbar ─────────────────────────────────────────── */

.toolbar[b-q0h8hrm9d1] {
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    padding: 10px 14px;
    display: flex;
    align-items: center;
    gap: 12px;
    box-shadow: 0 1px 2px rgba(0,0,0,.04);
}

.toolbar-search[b-q0h8hrm9d1] {
    position: relative;
    flex: 1;
    min-width: 0;
}

.toolbar-search-icon[b-q0h8hrm9d1] {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: #9ca3af;
    font-size: 0.8125rem;
    pointer-events: none;
}

.toolbar-input[b-q0h8hrm9d1] {
    width: 100%;
    height: 38px;
    padding: 0 36px 0 34px;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    font-size: 0.8125rem;
    color: #111827;
    background: #f9fafb;
    outline: none;
    transition: border-color 0.15s, background 0.15s;
    box-sizing: border-box;
}

.toolbar-input:focus[b-q0h8hrm9d1] {
    border-color: #7c3aed;
    background: white;
    box-shadow: 0 0 0 2px #ede9fe;
}

.toolbar-clear[b-q0h8hrm9d1] {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #e5e7eb;
    border: none;
    cursor: pointer;
    font-size: 0.7rem;
    color: #6b7280;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s;
}

.toolbar-clear:hover[b-q0h8hrm9d1] { background: #d1d5db; }

.toolbar-filters[b-q0h8hrm9d1] {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

.filter-pill[b-q0h8hrm9d1] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    height: 32px;
    padding: 0 12px;
    border: 1px solid #e5e7eb;
    border-radius: 999px;
    background: white;
    font-size: 0.78rem;
    font-weight: 500;
    color: #374151;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.15s;
}

.filter-pill:hover[b-q0h8hrm9d1] {
    border-color: #7c3aed;
    color: #7c3aed;
}

.filter-pill.active[b-q0h8hrm9d1] {
    background: #7c3aed;
    border-color: #7c3aed;
    color: white;
}

/* ── Dot ─────────────────────────────────────────────────────────────── */

.dot[b-q0h8hrm9d1] {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    display: inline-block;
    flex-shrink: 0;
}

.dot-green[b-q0h8hrm9d1] { background: #16a34a; }
.dot-red[b-q0h8hrm9d1]   { background: #dc2626; }

/* ── Schools Grid ────────────────────────────────────────────────────── */

.schools-grid[b-q0h8hrm9d1] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(440px, 1fr));
    gap: 16px;
}

.school-card[b-q0h8hrm9d1] {
    background: white;
    border-radius: 12px;
    border: 1px solid #e5e7eb;
    box-shadow: 0 1px 2px rgba(0,0,0,.04), 0 4px 12px rgba(0,0,0,.05);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: transform 0.2s, box-shadow 0.2s;
}

.school-card:hover[b-q0h8hrm9d1] {
    transform: translateY(-2px);
    box-shadow: 0 2px 4px rgba(0,0,0,.06), 0 8px 24px rgba(0,0,0,.1);
}

.school-card--inactive[b-q0h8hrm9d1] {
    opacity: 0.7;
    background: #fafafa;
}

/* Card Header */
.sc-header[b-q0h8hrm9d1] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 18px;
    border-bottom: 1px solid #f3f4f6;
}

.sc-logo[b-q0h8hrm9d1] {
    flex-shrink: 0;
}

.sc-identity[b-q0h8hrm9d1] {
    flex: 1;
    min-width: 0;
}

.sc-name[b-q0h8hrm9d1] {
    font-size: 0.9375rem;
    font-weight: 700;
    color: #111827;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.3;
}

.sc-location[b-q0h8hrm9d1] {
    font-size: 0.75rem;
    color: #6b7280;
    margin-top: 2px;
    display: flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sc-badge[b-q0h8hrm9d1] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 600;
    flex-shrink: 0;
    white-space: nowrap;
}

.sc-badge--active[b-q0h8hrm9d1]   { background: #dcfce7; color: #166534; }
.sc-badge--inactive[b-q0h8hrm9d1] { background: #fee2e2; color: #991b1b; }

/* Stats Row */
.sc-stats[b-q0h8hrm9d1] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
    padding: 12px 18px;
    border-bottom: 1px solid #f3f4f6;
    background: #fafafa;
}

.sc-stat[b-q0h8hrm9d1] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 0 8px;
    border-right: 1px solid #e5e7eb;
}

.sc-stat:first-child[b-q0h8hrm9d1] { padding-left: 0; }
.sc-stat:last-child[b-q0h8hrm9d1]  { padding-right: 0; border-right: none; }

.sc-stat-val[b-q0h8hrm9d1] {
    font-size: 1.125rem;
    font-weight: 700;
    color: #111827;
    line-height: 1.2;
}

.sc-stat-lbl[b-q0h8hrm9d1] {
    font-size: 0.7rem;
    color: #6b7280;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* Fee Row */
.sc-fee[b-q0h8hrm9d1] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 18px;
    border-bottom: 1px solid #f3f4f6;
}

.sc-fee-info[b-q0h8hrm9d1] {
    display: flex;
    flex-direction: column;
    gap: 1px;
    flex-shrink: 0;
    min-width: 64px;
}

.sc-fee-amount[b-q0h8hrm9d1] {
    font-size: 0.875rem;
    font-weight: 700;
    color: #111827;
}

.sc-fee-label[b-q0h8hrm9d1] {
    font-size: 0.68rem;
    color: #9ca3af;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.sc-fee-bar-wrap[b-q0h8hrm9d1] {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 8px;
}

.sc-fee-bar-track[b-q0h8hrm9d1] {
    flex: 1;
    height: 6px;
    background: #e5e7eb;
    border-radius: 999px;
    overflow: hidden;
}

.sc-fee-bar-fill[b-q0h8hrm9d1] {
    height: 100%;
    border-radius: 999px;
    transition: width 0.4s ease;
}

.bar-green[b-q0h8hrm9d1] { background: #16a34a; }
.bar-amber[b-q0h8hrm9d1] { background: #d97706; }
.bar-red[b-q0h8hrm9d1]   { background: #dc2626; }

.sc-fee-pct[b-q0h8hrm9d1] {
    font-size: 0.78rem;
    font-weight: 600;
    min-width: 34px;
    text-align: right;
    flex-shrink: 0;
}

.sc-alert[b-q0h8hrm9d1] {
    font-size: 0.72rem;
    font-weight: 600;
    color: #b45309;
    background: #fef3c7;
    padding: 2px 8px;
    border-radius: 4px;
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}

/* Actions */
.sc-actions[b-q0h8hrm9d1] {
    display: flex;
    gap: 10px;
    padding: 12px 18px;
}

.sc-btn-primary[b-q0h8hrm9d1] {
    flex: 1;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    background: #6d28d9;
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 0.8125rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s, transform 0.15s;
}

.sc-btn-primary:hover[b-q0h8hrm9d1] {
    background: #5b21b6;
    transform: translateY(-1px);
}

.sc-btn-secondary[b-q0h8hrm9d1] {
    flex: 1;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    background: white;
    color: #374151;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    font-size: 0.8125rem;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, transform 0.15s;
}

.sc-btn-secondary:hover[b-q0h8hrm9d1] {
    background: #f9fafb;
    border-color: #9ca3af;
    transform: translateY(-1px);
}

/* ── Empty State ─────────────────────────────────────────────────────── */

.empty-state[b-q0h8hrm9d1] {
    background: white;
    border-radius: 12px;
    border: 1px solid #e5e7eb;
    padding: 48px 24px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.empty-state i[b-q0h8hrm9d1] {
    font-size: 3rem;
    color: #d1d5db;
    margin-bottom: 4px;
}

.empty-state h3[b-q0h8hrm9d1] {
    font-size: 1.05rem;
    font-weight: 600;
    color: #374151;
    margin: 0;
}

.empty-state p[b-q0h8hrm9d1] {
    font-size: 0.875rem;
    color: #6b7280;
    margin: 0 0 8px;
}

/* ── Responsive ──────────────────────────────────────────────────────── */

@media (max-width: 900px) {
    .kpi-strip[b-q0h8hrm9d1] { grid-template-columns: repeat(2, 1fr); }
    .schools-grid[b-q0h8hrm9d1] { grid-template-columns: 1fr; }
    .toolbar[b-q0h8hrm9d1] { flex-wrap: wrap; }
    .toolbar-filters[b-q0h8hrm9d1] { flex-wrap: wrap; }
}

@media (max-width: 600px) {
    .kpi-strip[b-q0h8hrm9d1] { grid-template-columns: repeat(2, 1fr); }
    .page-header[b-q0h8hrm9d1] { flex-direction: column; align-items: flex-start; }
    .sc-stats[b-q0h8hrm9d1] { grid-template-columns: repeat(2, 1fr); gap: 8px; }
    .sc-stat[b-q0h8hrm9d1] { border-right: none; padding: 4px 0; }
}
/* /Pages/Chairman/Settings/Index.razor.rz.scp.css */

/* /Pages/DataOperator/DataOperatorAccess.razor.rz.scp.css */
.do-access[b-721dwug2dq] {
    min-height: calc(100vh - 3rem);
    padding: 0 0.5rem;
    max-width: 960px;
}

.do-access-header[b-721dwug2dq] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.75rem;
}

.do-access-title[b-721dwug2dq] {
    font-size: 1.5rem;
    font-weight: 700;
    margin: 0 0 0.25rem 0;
}

.do-access-title i[b-721dwug2dq] {
    color: var(--color-teal-500, #4A9B8E);
    margin-right: 0.5rem;
}

.do-access-sub[b-721dwug2dq] {
    margin: 0;
    color: var(--color-neutral-600, #6b7280);
    max-width: 640px;
    font-size: 0.9375rem;
}

.do-access-refresh[b-721dwug2dq] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.875rem;
    background: white;
    border: 1px solid var(--color-neutral-300, #d1d5db);
    color: var(--color-neutral-700, #374151);
    border-radius: 0.5rem;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 120ms ease;
}

.do-access-refresh:hover[b-721dwug2dq] {
    border-color: var(--color-teal-500, #4A9B8E);
    color: var(--color-teal-600, #2E6E62);
}

.do-access-loading[b-721dwug2dq] {
    min-height: 240px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-teal-500, #4A9B8E);
    font-size: 2rem;
}

.do-access-error[b-721dwug2dq] {
    display: flex;
    gap: 0.75rem;
    align-items: flex-start;
    padding: 1rem 1.25rem;
    background: #fbeaea;
    color: #b91c1c;
    border: 1px solid #fecaca;
    border-radius: 0.5rem;
    margin-top: 1rem;
    font-size: 0.9375rem;
}

.do-access-empty[b-721dwug2dq] {
    text-align: center;
    margin-top: 2rem;
    padding: 2rem;
    border: 1px dashed var(--color-neutral-300, #d1d5db);
    border-radius: 0.75rem;
    background: white;
}

.do-access-empty i[b-721dwug2dq] {
    font-size: 2.25rem;
    color: var(--color-teal-400, #4A9B8E);
    display: block;
    margin-bottom: 1rem;
}

.do-access-empty h3[b-721dwug2dq] {
    margin: 0 0 0.5rem;
    color: var(--color-neutral-800, #1f2937);
    font-size: 1.125rem;
}

.do-access-empty p[b-721dwug2dq] {
    margin: 0;
    color: var(--color-neutral-600, #6b7280);
    max-width: 480px;
    margin-inline: auto;
}

.do-access-summary[b-721dwug2dq] {
    display: flex;
    gap: 1rem;
    margin-bottom: 1rem;
    font-size: 0.875rem;
    color: var(--color-neutral-600, #6b7280);
}

.do-access-stat[b-721dwug2dq] {
    font-weight: 600;
    color: var(--color-neutral-800, #1f2937);
}

.do-access-tenants[b-721dwug2dq] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 1rem;
}

.do-tenant-card[b-721dwug2dq] {
    background: white;
    border: 1px solid var(--color-neutral-200, #e5e7eb);
    border-radius: 0.75rem;
    padding: 1rem 1.25rem;
}

.do-tenant-header[b-721dwug2dq] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    border-bottom: 1px solid var(--color-neutral-100, #f3f4f6);
    padding-bottom: 0.5rem;
    margin-bottom: 0.75rem;
}

.do-tenant-header i[b-721dwug2dq] {
    color: var(--color-teal-500, #4A9B8E);
    font-size: 1.25rem;
}

.do-tenant-name[b-721dwug2dq] {
    font-weight: 600;
    font-size: 1rem;
    flex: 1;
}

.do-tenant-id[b-721dwug2dq] {
    font-size: 0.75rem;
    color: var(--color-neutral-500, #6b7280);
    background: var(--color-neutral-50, #f9fafb);
    padding: 0.125rem 0.5rem;
    border-radius: 999px;
    border: 1px solid var(--color-neutral-200, #e5e7eb);
    white-space: nowrap;
}

.do-tenant-subs-none[b-721dwug2dq] {
    font-size: 0.875rem;
    color: var(--color-neutral-500, #6b7280);
    font-style: italic;
}

.do-school-list[b-721dwug2dq] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
}

.do-school-tag[b-721dwug2dq] {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.8125rem;
    background: #f0faf7;
    color: var(--color-teal-700, #2E6E62);
    border: 1px solid #c5e9e1;
    border-radius: 0.375rem;
    padding: 0.25rem 0.5rem;
    max-width: 100%;
}

.do-school-tag i[b-721dwug2dq] {
    font-size: 0.75rem;
}
/* /Pages/DataOperator/DataOperatorDashboard.razor.rz.scp.css */
.do-dash[b-a9x36wmeto] {
    min-height: calc(100vh - 3rem);
    padding-top: 1rem;
}

.dash-hero[b-a9x36wmeto] {
    padding: 1.75rem 2rem;
    border-radius: 0.75rem;
    background: linear-gradient(135deg,
        var(--color-teal-500, #4A9B8E),
        var(--color-teal-700, #2E6E62));
    color: white;
    box-shadow: 0 12px 30px rgba(46, 110, 98, 0.18);
    margin-bottom: 1.5rem;
}

.dash-title[b-a9x36wmeto] {
    font-size: 1.75rem;
    font-weight: 700;
    margin: 0 0 0.5rem;
}

.dash-accent[b-a9x36wmeto] {
    color: #FFD8A8;
    margin: 0 0.25rem;
}

.dash-sub[b-a9x36wmeto] {
    margin: 0;
    font-size: 1rem;
    opacity: 0.95;
}

.dash-actions[b-a9x36wmeto] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1rem;
    margin-bottom: 1.75rem;
}

.dash-action-card[b-a9x36wmeto] {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 1.25rem 1.5rem;
    border: 1px solid var(--color-neutral-200, #e5e7eb);
    border-radius: 0.75rem;
    background: white;
    color: var(--color-neutral-800, #1f2937);
    font-weight: 600;
    text-decoration: none;
    transition: all 140ms ease;
}

.dash-action-card i[b-a9x36wmeto] {
    font-size: 1.25rem;
}

.dash-action-primary[b-a9x36wmeto] {
    background: linear-gradient(135deg,
        var(--color-orange-500, #F97316),
        #EA580C);
    color: white;
}

.dash-action-secondary[b-a9x36wmeto] { border-color: #D6E4E2; }

.dash-action-card:hover[b-a9x36wmeto] {
    border-color: var(--color-teal-500, #4A9B8E);
    color: var(--color-teal-700, #2E6E62);
    transform: translateY(-2px);
    box-shadow: 0 10px 22px rgba(46, 110, 98, 0.12);
}

.dash-action-primary:hover[b-a9x36wmeto] {
    color: white;
    border-color: transparent;
}

.dash-cards[b-a9x36wmeto] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 1rem;
    margin-bottom: 2rem;
}

.dash-stat-num[b-a9x36wmeto] {
    font-size: 2rem;
    font-weight: 700;
    color: var(--color-teal-700, #2E6E62);
}

.dash-stat-label[b-a9x36wmeto] {
    font-size: 0.9rem;
    color: var(--color-neutral-600, #6b7280);
}

.dash-section-title[b-a9x36wmeto] {
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: 1rem;
    color: var(--color-neutral-900, #111827);
}

.dash-tenants[b-a9x36wmeto] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1rem;
}

.dash-tenant-card[b-a9x36wmeto] {
    background: white;
    border: 1px solid var(--color-neutral-200, #e5e7eb);
    border-radius: 0.75rem;
    padding: 1rem 1.25rem;
}

.dash-tenant-head[b-a9x36wmeto] {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    font-weight: 600;
    color: var(--color-neutral-900, #111827);
    font-size: 1rem;
    margin-bottom: 0.75rem;
}

.dash-tenant-head i[b-a9x36wmeto] {
    color: var(--color-teal-500, #4A9B8E);
    font-size: 1.125rem;
}

.dash-tenant-tenant-id[b-a9x36wmeto] {
    font-size: 0.75rem;
    color: var(--color-neutral-500, #6b7280);
    margin-left: auto;
    background: var(--color-neutral-50, #f9fafb);
    padding: 0.125rem 0.5rem;
    border-radius: 999px;
    border: 1px solid var(--color-neutral-200, #e5e7eb);
}

.dash-school-chips[b-a9x36wmeto] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
}

.dash-school-chip[b-a9x36wmeto] {
    font-size: 0.8125rem;
    background: #f0faf7;
    color: var(--color-teal-700, #2E6E62);
    border: 1px solid #c5e9e1;
    border-radius: 999px;
    padding: 0.125rem 0.5625rem;
    white-space: nowrap;
}

.dash-school-chip i[b-a9x36wmeto] {
    font-size: 0.75rem;
    margin-right: 0.375rem;
}

.dash-empty-box[b-a9x36wmeto] {
    border: 1px dashed var(--color-neutral-300, #cbd5e1);
    background: white;
    padding: 2rem 1.5rem;
    border-radius: 0.75rem;
    text-align: center;
    color: var(--color-neutral-600, #6b7280);
    font-size: 0.9375rem;
}

.dash-empty-box i[b-a9x36wmeto] {
    font-size: 1.5rem;
    color: var(--color-teal-500, #4A9B8E);
    display: block;
    margin-bottom: 0.75rem;
}

.dash-empty-box p[b-a9x36wmeto] {
    margin: 0 auto;
    max-width: 440px;
}

.dash-empty[b-a9x36wmeto] {
    padding: 3rem 1rem;
    text-align: center;
    color: var(--color-neutral-500, #6b7280);
}

.dash-tenant-empty[b-a9x36wmeto] {
    font-size: 0.875rem;
    color: var(--color-neutral-500, #6b7280);
    font-style: italic;
}
/* /Pages/DataOperator/DataOperatorImport.razor.rz.scp.css */
.doi-page[b-mq6eil76or] {
    max-width: 1400px;
    margin: 0 auto;
    padding: 1.5rem;
}

.doi-header[b-mq6eil76or] {
    margin-bottom: 1.5rem;
}

.doi-title[b-mq6eil76or] {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--color-neutral-900, #111827);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.doi-title > i[b-mq6eil76or] {
    color: var(--color-teal-600, #0d9488);
}

.doi-subtitle[b-mq6eil76or] {
    margin: 0.25rem 0 0;
    font-size: 0.875rem;
    color: var(--color-neutral-500, #6b7280);
}

/* ─── Step bar ─── */

.doi-steps[b-mq6eil76or] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
}

.doi-step[b-mq6eil76or] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.doi-step-circle[b-mq6eil76or] {
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-neutral-100, #f3f4f6);
    color: var(--color-neutral-500, #6b7280);
    font-size: 0.8rem;
    font-weight: 600;
}

.doi-step--active .doi-step-circle[b-mq6eil76or] {
    background: var(--color-teal-600, #0d9488);
    color: #fff;
}

.doi-step--done .doi-step-circle[b-mq6eil76or] {
    background: var(--color-teal-100);
    color: var(--color-teal-700);
}

.doi-step-label[b-mq6eil76or] {
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--color-neutral-500, #6b7280);
}

.doi-steps .doi-step--active .doi-step-label[b-mq6eil76or],
.doi-steps .doi-step--done .doi-step-label[b-mq6eil76or] {
    color: var(--color-teal-700, #0f766e);
    font-weight: 600;
}

.doi-step-line[b-mq6eil76or] {
    flex: 1;
    height: 2px;
    background: var(--color-neutral-200, #e5e7eb);
    min-width: 10px;
}

.doi-step-line--done[b-mq6eil76or] {
    background: var(--color-teal-300);
}

/* ─── Card ─── */

.doi-card[b-mq6eil76or] {
    background: #fff;
    border: 1px solid var(--color-neutral-200, #e5e7eb);
    border-radius: 0.75rem;
    padding: 1.25rem;
    box-shadow: 0 1px 3px rgb(0 0 0 / 0.05);
}

.doi-card-title[b-mq6eil76or] {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--color-neutral-900, #111827);
    margin: 0 0 1rem;
}

.doi-card-sub[b-mq6eil76or] {
    font-size: 0.875rem;
    color: var(--color-neutral-600, #4b5563);
    margin: 0;
}

/* ─── Form ─── */

.doi-form-grid[b-mq6eil76or] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem 1.5rem;
    margin-bottom: 1rem;
}

@media (max-width: 768px) {
    .doi-form-grid[b-mq6eil76or] { grid-template-columns: 1fr; }
}

.doi-field[b-mq6eil76or] { display: flex; flex-direction: column; gap: 0.375rem; }

.doi-label[b-mq6eil76or] {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--color-neutral-700, #374151);
}

.doi-required[b-mq6eil76or] { color: #ef4444; }

.doi-label-hint[b-mq6eil76or] {
    font-size: 0.75rem;
    color: var(--color-neutral-400, #9ca3af);
}

.doi-select[b-mq6eil76or] {
    height: 2.375rem;
    padding: 0 0.75rem;
    border: 1px solid var(--color-neutral-300, #d1d5db);
    border-radius: 0.375rem;
    background: #fff;
    font-size: 0.875rem;
    width: 100%;
}

.doi-select:focus[b-mq6eil76or], .doi-select:focus-within[b-mq6eil76or] {
    border-color: var(--color-teal-500, #14b8a6);
    outline: none;
    box-shadow: 0 0 0 2px rgb(20 184 166 / 0.15);
}

.doi-select:disabled[b-mq6eil76or] {
    background: var(--color-neutral-100, #f3f4f6);
    cursor: not-allowed;
}

.doi-input[b-mq6eil76or] {
    height: 2.375rem;
    padding: 0 0.75rem;
    border: 1px solid var(--color-neutral-300, #d1d5db);
    border-radius: 0.375rem;
    background: #fff;
    font-size: 0.875rem;
    width: 100%;
}

.doi-input:focus[b-mq6eil76or] {
    border-color: var(--color-teal-500, #14b8a6);
    outline: none;
    box-shadow: 0 0 0 2px rgb(20 184 166 / 0.15);
}

/* ─── Templates ─── */

.doi-template-row[b-mq6eil76or] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-bottom: 1.25rem;
    padding: 0.75rem;
    background: var(--color-neutral-50, #f9fafb);
    border-radius: 0.5rem;
}

.doi-template-label[b-mq6eil76or] {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--color-neutral-700, #374151);
}

.doi-template-btn[b-mq6eil76or] {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.4rem 0.7rem;
    border: none;
    border-radius: 0.375rem;
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    background: var(--color-neutral-200, #e5e7eb);
    color: var(--color-neutral-700, #374151);
}

.doi-template-btn:hover:not(:disabled)[b-mq6eil76or] { filter: brightness(0.97); }
.doi-template-btn:disabled[b-mq6eil76or] { opacity: 0.5; cursor: not-allowed; }

.doi-template-btn--blue[b-mq6eil76or] { background: #dbeafe; color: #1d4ed8; }
.doi-template-btn--purple[b-mq6eil76or] { background: #ede9fe; color: #6d28d9; }
.doi-template-btn--teal[b-mq6eil76or] { background: var(--color-teal-100); color: var(--color-teal-700); }
.doi-template-btn--orange[b-mq6eil76or] { background: #ffedd5; color: #c2410c; }

/* ─── Context hint (school/class/section drive the import) ─── */

.doi-context-hint[b-mq6eil76or] {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    margin: 0 0 1.25rem;
    padding: 0.625rem 0.75rem;
    font-size: 0.8rem;
    line-height: 1.45;
    color: var(--color-neutral-700, #374151);
    background: var(--color-teal-50);
    border: 1px solid var(--color-teal-200);
    border-radius: 0.5rem;
}

.doi-context-hint i[b-mq6eil76or] {
    margin-top: 0.15rem;
    color: var(--color-teal-600, #0d9488);
}

/* ─── Upload ─── */

.doi-upload-area[b-mq6eil76or] { position: relative; margin-bottom: 1.25rem; }

.doi-file-input[b-mq6eil76or] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

.doi-upload-label[b-mq6eil76or] {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
    padding: 1.5rem;
    border: 2px dashed var(--color-neutral-300, #d1d5db);
    border-radius: 0.75rem;
    background: var(--color-neutral-50, #f9fafb);
    text-align: center;
    transition: all 0.15s ease;
}

.doi-upload-label:hover[b-mq6eil76or] {
    border-color: var(--color-teal-500, #14b8a6);
    background: var(--color-teal-50);
}

.doi-upload-icon[b-mq6eil76or] {
    font-size: 1.5rem;
    color: var(--color-teal-500, #14b8a6);
}

.doi-upload-hint[b-mq6eil76or] { margin: 0; font-size: 0.875rem; color: var(--color-neutral-700, #374151); }

.doi-upload-sub[b-mq6eil76or] { margin: 0; font-size: 0.75rem; color: var(--color-neutral-400, #9ca3af); }

.doi-file-badge[b-mq6eil76or] {
    margin-top: 0.5rem;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0.75rem;
    background: #ecfdf5;
    border: 1px solid #a7f3d0;
    border-radius: 2rem;
    font-size: 0.8rem;
    color: #065f46;
}

.doi-file-size[b-mq6eil76or] { color: var(--color-neutral-500, #6b7280); font-size: 0.7rem; }

/* ─── Buttons ─── */

.doi-row-errors[b-mq6eil76or] {
    margin-top: 1rem;
}

.doi-actions[b-mq6eil76or] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.75rem;
    margin-top: 1rem;
}

.doi-btn[b-mq6eil76or] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 1.1rem;
    border: none;
    border-radius: 0.5rem;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
}

.doi-btn:disabled[b-mq6eil76or] { opacity: 0.5; cursor: not-allowed; }

.doi-btn--sm[b-mq6eil76or] {
    padding: 0.35rem 0.75rem;
    font-size: 0.75rem;
    border-radius: 0.4rem;
    gap: 0.35rem;
}

.doi-btn--primary[b-mq6eil76or] {
    background: var(--color-teal-600, #0d9488);
    color: #fff;
}

.doi-btn--primary:hover:not(:disabled)[b-mq6eil76or] { background: var(--color-teal-700); }

.doi-btn--ghost[b-mq6eil76or] {
    background: transparent;
    color: var(--color-neutral-600, #4b5563);
    border: 1px solid var(--color-neutral-300, #d1d5db);
}

.doi-btn--ghost:hover:not(:disabled)[b-mq6eil76or] { background: var(--color-neutral-100, #f3f4f6); }

.doi-confirm-text[b-mq6eil76or] {
    margin: 0;
    font-size: 0.8rem;
    color: var(--color-neutral-600, #4b5563);
}

/* ─── Stats ─── */

.doi-stats[b-mq6eil76or] {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}

.doi-stat[b-mq6eil76or] {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0.6rem 1rem;
    border-radius: 0.5rem;
    background: #fff;
    border: 1px solid var(--color-neutral-200, #e5e7eb);
    min-width: 90px;
}

.doi-stat-num[b-mq6eil76or] {
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.2;
}

.doi-stat-label[b-mq6eil76or] {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--color-neutral-500, #6b7280);
}

.doi-stat--blue .doi-stat-num[b-mq6eil76or] { color: #1d4ed8; }
.doi-stat--green .doi-stat-num[b-mq6eil76or] { color: #059669; }
.doi-stat--red .doi-stat-num[b-mq6eil76or] { color: #dc2626; }
.doi-stat--orange .doi-stat-num[b-mq6eil76or] { color: #ea580c; }
.doi-stat--purple .doi-stat-num[b-mq6eil76or] { color: #6d28d9; }
.doi-stat--teal .doi-stat-num[b-mq6eil76or] { color: var(--color-teal-700); }

/* ─── Role breakdown ─── */

.doi-role-breakdown[b-mq6eil76or] {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}

.doi-role-badge[b-mq6eil76or] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.3rem 0.7rem;
    border-radius: 2rem;
    font-size: 0.75rem;
    font-weight: 600;
}

.doi-role--blue[b-mq6eil76or] { background: #dbeafe; color: #1d4ed8; }
.doi-role--purple[b-mq6eil76or] { background: #ede9fe; color: #6d28d9; }
.doi-role--amber[b-mq6eil76or] { background: #fef3c7; color: #b45309; }
.doi-role--teal[b-mq6eil76or] { background: var(--color-teal-100); color: var(--color-teal-700); }
.doi-role--grey[b-mq6eil76or] { background: #f3f4f6; color: #374151; }

/* ─── Messages ─── */

.doi-messages[b-mq6eil76or] {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    margin-bottom: 1rem;
    max-height: 120px;
    overflow-y: auto;
}

.doi-message[b-mq6eil76or] {
    font-size: 0.75rem;
    padding: 0.4rem 0.65rem;
    border-radius: 0.35rem;
}

.doi-message--error[b-mq6eil76or] {
    background: #fef2f2;
    color: #991b1b;
    border: 1px solid #fecaca;
}

.doi-message--warn[b-mq6eil76or] {
    background: #fffbeb;
    color: #92400e;
    border: 1px solid #fde68a;
}

/* ─── Preview toolbar ─── */

.doi-preview-toolbar[b-mq6eil76or] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: wrap;
    margin-bottom: 0.75rem;
}

.doi-filter-label[b-mq6eil76or] {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--color-neutral-500, #6b7280);
}

.doi-filter-chip[b-mq6eil76or] {
    padding: 0.3rem 0.7rem;
    border-radius: 2rem;
    border: 1px solid var(--color-neutral-300, #d1d5db);
    background: #fff;
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--color-neutral-600, #4b5563);
    cursor: pointer;
}

.doi-filter-chip:hover[b-mq6eil76or] { background: var(--color-neutral-100, #f3f4f6); }

.doi-filter-chip--active[b-mq6eil76or] {
    background: var(--color-teal, var(--color-teal-600));
    border-color: var(--color-teal, var(--color-teal-600));
    color: #fff;
}

.doi-toolbar-spacer[b-mq6eil76or] { flex: 1 1 auto; }

.doi-edit-hint[b-mq6eil76or] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.78rem;
    color: var(--color-neutral-600, #4b5563);
    background: var(--color-neutral-50, #f9fafb);
    border: 1px solid var(--color-neutral-200, #e5e7eb);
    border-radius: 0.5rem;
    padding: 0.6rem 0.85rem;
    margin-bottom: 0.75rem;
}

.doi-edit-hint i[b-mq6eil76or] { color: var(--color-teal, var(--color-teal-600)); }

/* ─── Grid ─── */

.doi-grid-wrap[b-mq6eil76or] {
    max-height: 420px;
    overflow: auto;
    border: 1px solid var(--color-neutral-200, #e5e7eb);
    border-radius: 0.5rem;
    margin-bottom: 0.75rem;
}

.doi-grid[b-mq6eil76or] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8rem;
}

.doi-grid th[b-mq6eil76or] {
    position: sticky;
    top: 0;
    z-index: 5;
    background: var(--color-neutral-50, #f9fafb);
    text-align: left;
    padding: 0.55rem 0.7rem;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-neutral-500, #6b7280);
    border-bottom: 1px solid var(--color-neutral-200, #e5e7eb);
}

.doi-grid td[b-mq6eil76or] {
    padding: 0.5rem 0.7rem;
    border-top: 1px solid #f3f4f6;
    vertical-align: middle;
}

.doi-grid-row--error[b-mq6eil76or] { background: #fff5f5; }
.doi-grid-row--warn[b-mq6eil76or] { background: #fffaf0; }
.doi-grid-row--skipped[b-mq6eil76or] { opacity: 0.55; }

.doi-th-actions[b-mq6eil76or] { width: 11rem; text-align: right; }

.doi-td-actions[b-mq6eil76or] {
    white-space: nowrap;
    text-align: right;
}

.doi-action-btn[b-mq6eil76or] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.25rem 0.6rem;
    border-radius: 0.4rem;
    font-size: 0.7rem;
    font-weight: 600;
    cursor: pointer;
    border: 1px solid transparent;
}

.doi-action-btn--edit[b-mq6eil76or] {
    background: #eff6ff;
    color: #1d4ed8;
    border-color: #bfdbfe;
}

.doi-action-btn--edit:hover[b-mq6eil76or] { background: #dbeafe; }

.doi-action-btn--skip[b-mq6eil76or] {
    background: #fff;
    color: var(--color-neutral-500, #6b7280);
    border-color: var(--color-neutral-300, #d1d5db);
    margin-left: 0.35rem;
}

.doi-action-btn--skip:hover[b-mq6eil76or] { background: var(--color-neutral-100, #f3f4f6); }

.doi-action-btn--skip-active[b-mq6eil76or] {
    background: #fef2f2;
    color: #b91c1c;
    border-color: #fecaca;
    margin-left: 0.35rem;
}

.doi-action-btn--skip-active:hover[b-mq6eil76or] { background: #fee2e2; }

/* ─── Row edit panel ─── */

.doi-edit-row td[b-mq6eil76or] {
    background: var(--color-neutral-50, #f9fafb);
    padding: 0.85rem 1rem;
}

.doi-edit-panel[b-mq6eil76or] {
    border: 1px solid var(--color-neutral-200, #e5e7eb);
    border-left: 3px solid var(--color-teal, var(--color-teal-600));
    border-radius: 0.5rem;
    background: #fff;
    padding: 0.85rem 1rem;
}

.doi-edit-grid[b-mq6eil76or] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
    gap: 0.7rem 1rem;
    margin-bottom: 0.85rem;
}

.doi-edit-field label[b-mq6eil76or] {
    display: block;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-neutral-500, #6b7280);
    margin-bottom: 0.3rem;
}

.doi-edit-actions[b-mq6eil76or] {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    border-top: 1px solid var(--color-neutral-200, #e5e7eb);
    padding-top: 0.75rem;
}

.doi-role-tag[b-mq6eil76or] {
    font-size: 0.7rem;
    font-weight: 600;
}

.doi-badge[b-mq6eil76or] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.15rem 0.5rem;
    border-radius: 2rem;
    font-size: 0.68rem;
    font-weight: 600;
}

.doi-badge--green[b-mq6eil76or] { background: #ecfdf5; color: #047857; }
.doi-badge--orange[b-mq6eil76or] { background: #fff7ed; color: #c2410c; }
.doi-badge--red[b-mq6eil76or] { background: #fef2f2; color: #b91c1c; }
.doi-badge--grey[b-mq6eil76or] { background: #f3f4f6; color: #4b5563; }

.doi-error-text[b-mq6eil76or] { color: #b91c1c; font-size: 0.72rem; }
.doi-warn-text[b-mq6eil76or] { color: #c2410c; font-size: 0.72rem; }

.doi-preview-more[b-mq6eil76or] {
    font-size: 0.72rem;
    color: var(--color-neutral-400, #9ca3af);
}

/* ─── Results ─── */

.doi-result-icon[b-mq6eil76or] {
    font-size: 3rem;
    text-align: center;
    margin-bottom: 0.5rem;
}

.doi-result-icon--green[b-mq6eil76or] { color: #10b981; }
.doi-result-icon--orange[b-mq6eil76or] { color: #f59e0b; }

.doi-errors[b-mq6eil76or] {
    margin-top: 1.25rem;
}

.doi-errors-title[b-mq6eil76or] {
    font-size: 0.9rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-bottom: 0.5rem;
}
/* /Pages/DataOperator/DataOperatorImportHistory.razor.rz.scp.css */
.doi-history[b-50yjslxvn6] {
    max-width: 1000px;
    margin: 1rem auto;
}

.doi-history-header[b-50yjslxvn6] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}

.doi-history-title[b-50yjslxvn6] {
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--color-neutral-900, #111827);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
}

.doi-history-title .fas[b-50yjslxvn6] {
    color: var(--color-teal-500, #0d9488);
}

.doi-history-new[b-50yjslxvn6] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 1rem;
    border-radius: 0.5rem;
    border: none;
    background: var(--color-teal-700);
    color: #fff;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
}

.doi-history-new:hover[b-50yjslxvn6] { background: var(--color-teal-600); }

.doi-history-loading[b-50yjslxvn6] {
    text-align: center;
    padding: 2.5rem 0;
    color: var(--color-neutral-500, #6b7280);
    font-size: 0.9rem;
}

.doi-history-empty[b-50yjslxvn6] {
    text-align: center;
    padding: 3rem 0;
    color: var(--color-neutral-400, #9ca3af);
}

.doi-history-empty .fas[b-50yjslxvn6] {
    font-size: 2.5rem;
    display: block;
    margin-bottom: 0.75rem;
    opacity: 0.5;
}

.doi-history-table-wrap[b-50yjslxvn6] {
    overflow-x: auto;
    background: #fff;
    border: 1px solid var(--color-neutral-200, #e5e7eb);
    border-radius: 0.75rem;
}

.doi-history-table[b-50yjslxvn6] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
}

.doi-history-table th[b-50yjslxvn6] {
    background: var(--color-neutral-50, #f9fafb);
    padding: 0.6rem 0.8rem;
    text-align: left;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--color-neutral-500, #6b7280);
    border-bottom: 1px solid var(--color-neutral-200, #e5e7eb);
}

.doi-history-table td[b-50yjslxvn6] {
    padding: 0.55rem 0.8rem;
    border-bottom: 1px solid #f3f4f6;
    color: var(--color-neutral-700, #374151);
    vertical-align: middle;
}

.doi-history-table tr:last-child td[b-50yjslxvn6] { border-bottom: none; }
.doi-history-table tr:hover td[b-50yjslxvn6] { background: #fafafa; }

.doi-history-file[b-50yjslxvn6] {
    max-width: 180px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.8rem;
}

.doi-h-badge[b-50yjslxvn6] {
    display: inline-block;
    padding: 0.15rem 0.55rem;
    border-radius: 0.4rem;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: capitalize;
}

.doi-h-badge--blue[b-50yjslxvn6] {
    background: var(--color-teal-50, #ecfeff);
    color: var(--color-teal-700, #0e7490);
}

.doi-h-badge--purple[b-50yjslxvn6] {
    background: #ede9fe;
    color: #7c3aed;
}

.doi-h-badge--teal[b-50yjslxvn6] {
    background: #e6fffa;
    color: var(--color-teal-700);
}

.doi-h-badge--orange[b-50yjslxvn6] {
    background: #fff7ed;
    color: #ea580c;
}

.doi-h-badge--grey[b-50yjslxvn6] {
    background: var(--color-neutral-100, #f3f4f6);
    color: var(--color-neutral-600, #4b5563);
}

.doi-h-stat[b-50yjslxvn6] {
    display: inline-block;
    min-width: 1.6rem;
    text-align: center;
    padding: 0.1rem 0.3rem;
    border-radius: 0.25rem;
    font-size: 0.75rem;
    font-weight: 600;
}

.doi-h-stat--green[b-50yjslxvn6] {
    background: #dcfce7;
    color: #166534;
}

.doi-h-stat--amber[b-50yjslxvn6] {
    background: #fef3c7;
    color: #92400e;
}

.doi-h-stat--red[b-50yjslxvn6] {
    background: #fee2e2;
    color: #991b1b;
}

.doi-h-stat--muted[b-50yjslxvn6] {
    background: var(--color-neutral-100, #f3f4f6);
    color: var(--color-neutral-400, #9ca3af);
}

.doi-h-status[b-50yjslxvn6] {
    display: inline-block;
    padding: 0.15rem 0.6rem;
    border-radius: 1rem;
    font-size: 0.7rem;
    font-weight: 600;
}

.doi-h-status--ok[b-50yjslxvn6] {
    color: #166534;
    background: #dcfce7;
}

.doi-h-status--warn[b-50yjslxvn6] {
    color: #92400e;
    background: #fef3c7;
}
/* /Pages/Fee/ReceiptApprovals.razor.rz.scp.css */
.approval-page[b-lg5ruhf9jg] {
    width: min(100%, 80rem);
    margin-inline: auto;
    padding: var(--spacing-4);
}

.approval-header[b-lg5ruhf9jg] {
    margin-bottom: var(--spacing-4);
}

.approval-header h1[b-lg5ruhf9jg] {
    color: var(--color-neutral-900);
    font-size: 1.5rem;
    font-weight: 700;
}

.approval-header p[b-lg5ruhf9jg] {
    color: var(--color-neutral-600);
    margin-top: var(--spacing-1);
}

.approval-loading[b-lg5ruhf9jg] {
    align-items: center;
    display: flex;
    justify-content: center;
    min-height: 60vh;
}
/* /Pages/Index.razor.rz.scp.css */
/* Styles handled via Tailwind utility classes in markup */
/* /Pages/LabAssistant/Chemicals/Index.razor.rz.scp.css */

/* /Pages/LabAssistant/Dashboard.razor.rz.scp.css */
/* Styles handled via Tailwind utility classes in markup */
/* /Pages/LabAssistant/Equipment/Index.razor.rz.scp.css */

/* /Pages/LabAssistant/Experiments/Index.razor.rz.scp.css */

/* /Pages/LabAssistant/Inbox/Index.razor.rz.scp.css */
/* Styles handled via Tailwind utility classes in markup */
/* /Pages/LabAssistant/Inventory/Index.razor.rz.scp.css */

/* /Pages/LabAssistant/Maintenance/Index.razor.rz.scp.css */

/* /Pages/LabAssistant/Reports/Index.razor.rz.scp.css */

/* /Pages/LabAssistant/Safety/Index.razor.rz.scp.css */

/* /Pages/LabAssistant/Schedule/Index.razor.rz.scp.css */

/* /Pages/LabAssistant/Settings/Index.razor.rz.scp.css */

/* /Pages/Landing/AdmissionForm.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════
   ADMISSION FORM STYLES - Using ExamActive Design Tokens
   ═══════════════════════════════════════════════════════════ */

/* ────────── TOP BAR ────────── */
.admission-top-bar[b-s5oi5su2tx] {
    background: #ffffff;
    border-bottom: 1px solid #e5e7eb;
    box-shadow: 0 1px 4px rgba(0,0,0,.07);
    position: sticky;
    top: 0;
    z-index: 50;
    margin-bottom: 2rem;
}

.admission-top-bar-inner[b-s5oi5su2tx] {
    max-width: 72rem;
    margin: 0 auto;
    padding: 0.75rem 1.5rem;
    display: flex;
    align-items: center;
    gap: 1rem;
}

.admission-logo[b-s5oi5su2tx] {
    height: 64px;
    width: auto;
    max-width: 160px;
    object-fit: contain;
    flex-shrink: 0;
    background: transparent;
    border-radius: 8px;
}

.admission-logo-placeholder[b-s5oi5su2tx] {
    width: 64px;
    height: 64px;
    border-radius: 12px;
    background: linear-gradient(135deg, #7c3aed, #4f46e5);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.5rem;
    flex-shrink: 0;
}

.admission-school-info[b-s5oi5su2tx] {
    min-width: 0;
    overflow: hidden;
}

.admission-school-name[b-s5oi5su2tx] {
    font-size: 1.1rem;
    font-weight: 700;
    color: #111827;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.3;
    /* reset any global h1/input styles */
    border: none;
    background: transparent;
    padding: 0;
    margin: 0;
    box-shadow: none;
    outline: none;
}

.admission-school-sub[b-s5oi5su2tx] {
    font-size: 0.8rem;
    color: #6b7280;
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.loading-overlay[b-s5oi5su2tx] {
    position: fixed;
    inset: 0;
    background: #ffffff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    gap: 1rem;
}

.loading-overlay .spinner[b-s5oi5su2tx] {
    width: 3rem;
    height: 3rem;
    border: 4px solid var(--color-border);
    border-top-color: var(--color-primary-500);
    border-radius: 50%;
    animation: spin-b-s5oi5su2tx 0.8s linear infinite;
}

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

.loading-overlay p[b-s5oi5su2tx] {
    color: var(--color-text-muted);
    font-weight: var(--font-weight-semibold);
}

/* ────────── DRAFT BANNER ────────── */
.draft-banner[b-s5oi5su2tx] {
    max-width: 64rem;
    margin: 0 auto var(--spacing-8);
    padding: var(--spacing-5) var(--spacing-6);
    background: linear-gradient(135deg, var(--color-warning-50) 0%, var(--color-warning-100) 100%);
    border: var(--border-md) solid var(--color-warning-500);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    gap: var(--spacing-4);
    box-shadow: var(--shadow-sm);
}

.draft-banner i[b-s5oi5su2tx] {
    font-size: var(--font-size-xl);
    color: var(--color-warning-500);
}

.draft-banner .link-btn[b-s5oi5su2tx] {
    background: none;
    border: none;
    color: var(--color-primary-500);
    text-decoration: underline;
    cursor: pointer;
    font-weight: var(--font-weight-semibold);
    padding: 0;
}

.draft-banner .dismiss-btn[b-s5oi5su2tx] {
    margin-left: auto;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--color-warning-900);
    font-size: var(--font-size-xl);
    padding: var(--spacing-2);
    opacity: var(--opacity-60);
    transition: opacity 0.2s;
}

.draft-banner .dismiss-btn:hover[b-s5oi5su2tx] {
    opacity: 1;
}

/* ────────── STEPPER ────────── */
.stepper[b-s5oi5su2tx] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    padding: var(--spacing-5) 0;
    gap: var(--spacing-3);
}

.stepper-progress[b-s5oi5su2tx] {
    position: absolute;
    top: 2.25rem;
    left: 0;
    height: 3px;
    background: var(--color-success-600);
    transition: width 0.4s ease;
    z-index: var(--z-base);
}

.step[b-s5oi5su2tx] {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
    cursor: pointer;
    transition: all 0.3s;
    position: relative;
    z-index: 2;
}

.step[b-s5oi5su2tx]::before {
    content: '';
    position: absolute;
    top: 1.5rem;
    left: 50%;
    right: -50%;
    height: 3px;
    background: var(--color-border);
    z-index: -1;
}

.step:last-child[b-s5oi5su2tx]::before {
    display: none;
}

.step-circle[b-s5oi5su2tx] {
    width: 3rem;
    height: 3rem;
    border-radius: var(--radius-full);
    border: 3px solid var(--color-border);
    background: var(--color-white);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-md);
    color: var(--color-text-muted);
    transition: all 0.3s;
    position: relative;
    z-index: 2;
    box-shadow: var(--shadow-sm);
}

.step.active .step-circle[b-s5oi5su2tx] {
    background: var(--color-primary-500);
    color: var(--color-white);
    border-color: var(--color-primary-500);
    transform: scale(1.15);
    box-shadow: var(--shadow-lg);
}

.step.completed .step-circle[b-s5oi5su2tx] {
    background: var(--color-success-600);
    color: var(--color-white);
    border-color: var(--color-success-600);
}

.step.has-error .step-circle[b-s5oi5su2tx] {
    background: var(--color-danger-600);
    color: var(--color-white);
    border-color: var(--color-danger-600);
    animation: shake-b-s5oi5su2tx 0.5s;
}

@keyframes shake-b-s5oi5su2tx {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-5px); }
    75% { transform: translateX(5px); }
}

.step-label[b-s5oi5su2tx] {
    margin-top: var(--spacing-3);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-muted);
    text-align: center;
}

.step.active .step-label[b-s5oi5su2tx] {
    color: var(--color-primary-500);
    font-weight: var(--font-weight-bold);
}

.step.completed .step-label[b-s5oi5su2tx] {
    color: var(--color-success-600);
}

.step.has-error .step-label[b-s5oi5su2tx] {
    color: var(--color-danger-600);
}

/* ────────── FORM GROUPS ────────── */
.form-group[b-s5oi5su2tx] {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-3);
}

.form-group.required label[b-s5oi5su2tx]::after {
    content: ' *';
    color: var(--color-danger-600);
}

.form-group label[b-s5oi5su2tx] {
    font-weight: var(--font-weight-semibold);
    font-size: var(--font-size-sm);
    color: var(--color-text-primary);
}

.form-input[b-s5oi5su2tx],
.form-select[b-s5oi5su2tx],
.form-textarea[b-s5oi5su2tx] {
    width: 100%;
    padding: var(--spacing-4) var(--spacing-5);
    border: var(--border-md) solid var(--color-border);
    border-radius: var(--radius-md);
    font-size: var(--font-size-md);
    transition: all 0.2s;
    background: var(--color-white);
}

.form-input:focus[b-s5oi5su2tx],
.form-select:focus[b-s5oi5su2tx],
.form-textarea:focus[b-s5oi5su2tx] {
    outline: none;
    border-color: var(--color-primary-500);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary-500) 10%, transparent);
}

.form-group.has-error .form-input[b-s5oi5su2tx],
.form-group.has-error .form-select[b-s5oi5su2tx],
.form-group.has-error .form-textarea[b-s5oi5su2tx] {
    border-color: var(--color-danger-600);
}

.form-group.has-error .form-input:focus[b-s5oi5su2tx],
.form-group.has-error .form-select:focus[b-s5oi5su2tx],
.form-group.has-error .form-textarea:focus[b-s5oi5su2tx] {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-danger-600) 10%, transparent);
}

.field-error[b-s5oi5su2tx] {
    color: var(--color-danger-600);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
}

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

.form-textarea[b-s5oi5su2tx] {
    min-height: 6rem;
    resize: vertical;
}

/* ────────── STEP INTRO ────────── */
.step-intro[b-s5oi5su2tx] {
    color: var(--color-text-muted);
    margin-bottom: var(--spacing-6);
    font-size: var(--font-size-md);
}

/* ────────── DRAFT CHECK LOADING ────────── */
.draft-check-loading[b-s5oi5su2tx] {
    padding: var(--spacing-5);
    background: var(--color-info-50);
    border: var(--border-sm) solid var(--color-info-200);
    border-radius: var(--radius-md);
    text-align: center;
    color: var(--color-info-700);
    font-weight: var(--font-weight-medium);
}

/* ────────── EXISTING DRAFT ALERT ────────── */
.existing-draft-alert[b-s5oi5su2tx] {
    padding: var(--spacing-6);
    border-radius: var(--radius-lg);
    margin-top: var(--spacing-5);
}

.existing-draft-alert.success[b-s5oi5su2tx] {
    background: linear-gradient(135deg, var(--color-success-50) 0%, var(--color-success-100) 100%);
    border: var(--border-md) solid var(--color-success-600);
}

.existing-draft-alert.info[b-s5oi5su2tx] {
    background: linear-gradient(135deg, var(--color-info-50) 0%, var(--color-info-100) 100%);
    border: var(--border-md) solid var(--color-info-500);
}

.existing-draft-alert .alert-header[b-s5oi5su2tx] {
    display: flex;
    align-items: center;
    gap: var(--spacing-4);
    margin-bottom: var(--spacing-4);
}

.existing-draft-alert .alert-header i[b-s5oi5su2tx] {
    font-size: var(--font-size-2xl);
    color: var(--color-success-600);
}

.existing-draft-alert .alert-header h3[b-s5oi5su2tx] {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
    margin: 0;
}

.existing-draft-alert p[b-s5oi5su2tx] {
    margin: var(--spacing-3) 0;
    color: var(--color-success-800);
}

.draft-actions[b-s5oi5su2tx] {
    display: flex;
    gap: var(--spacing-4);
    margin-top: var(--spacing-5);
    flex-wrap: wrap;
}

.other-children-info[b-s5oi5su2tx] {
    margin-top: var(--spacing-5);
    padding-top: var(--spacing-5);
    border-top: var(--border-sm) solid color-mix(in srgb, var(--color-gray-900) 10%, transparent);
}

.other-children-info h4[b-s5oi5su2tx] {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    margin-bottom: var(--spacing-3);
    color: var(--color-success-800);
}

.other-children-info ul[b-s5oi5su2tx] {
    list-style: none;
    padding: 0;
    margin: 0;
}

.other-children-info li[b-s5oi5su2tx] {
    padding: var(--spacing-3);
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
    flex-wrap: wrap;
    background: var(--color-gray-50);
    border-radius: var(--border-radius-md);
    margin-bottom: var(--spacing-2);
    transition: all 0.2s ease;
}

.other-children-info li.clickable-child[b-s5oi5su2tx] {
    cursor: pointer;
    border: 1px solid var(--color-gray-200);
}

.other-children-info li.clickable-child:hover[b-s5oi5su2tx] {
    background: var(--color-primary-50);
    border-color: var(--color-primary-400);
    transform: translateX(4px);
}

.other-children-info li.clickable-child i.fa-arrow-right-to-bracket[b-s5oi5su2tx],
.other-children-info li.clickable-child i.fa-eye[b-s5oi5su2tx] {
    margin-left: auto;
    color: var(--color-primary-500);
    font-size: var(--font-size-md);
}

.other-children-info li .child-pdf-btn[b-s5oi5su2tx] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 1px solid var(--color-error-300);
    color: var(--color-error-500);
    border-radius: var(--border-radius-md);
    padding: 3px 7px;
    cursor: pointer;
    font-size: var(--font-size-sm);
    line-height: 1;
    transition: background 0.15s, color 0.15s;
    margin-left: var(--spacing-2);
}

.other-children-info li .child-pdf-btn:hover[b-s5oi5su2tx] {
    background: var(--color-error-50);
    color: var(--color-error-700);
    border-color: var(--color-error-500);
}

.other-children-info li .step-info[b-s5oi5su2tx] {
    color: var(--color-gray-600);
    font-size: var(--font-size-xs);
}

.status-badge[b-s5oi5su2tx] {
    font-size: var(--font-size-xs);
    padding: var(--spacing-2) var(--spacing-3);
    border-radius: var(--radius-sm);
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
}

.status-badge.status-draft[b-s5oi5su2tx] {
    background: var(--color-warning-50);
    color: var(--color-warning-900);
}

.status-badge.status-submitted[b-s5oi5su2tx] {
    background: var(--color-info-50);
    color: var(--color-info-800);
}

.status-badge.status-approved[b-s5oi5su2tx] {
    background: var(--color-success-50);
    color: var(--color-success-800);
}

.renewal-badge[b-s5oi5su2tx] {
    font-size: var(--font-size-xs);
    padding: var(--spacing-2) var(--spacing-3);
    border-radius: var(--radius-sm);
    font-weight: var(--font-weight-semibold);
    background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%);
    color: #1e40af;
    border: 1px solid #60a5fa;
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-2);
    margin-left: var(--spacing-2);
}

.renewal-badge i[b-s5oi5su2tx] {
    font-size: var(--font-size-xs);
}

/* ────────── SUBMITTED APPLICATION BANNER ────────── */
.submitted-app-banner[b-s5oi5su2tx] {
    display: flex;
    align-items: center;
    gap: var(--spacing-4);
    padding: var(--spacing-6);
    background: linear-gradient(135deg, var(--color-info-50) 0%, var(--color-info-100) 100%);
    border: var(--border-md) solid var(--color-info-600);
    border-radius: var(--radius-lg);
    margin-bottom: var(--spacing-6);
    flex-wrap: wrap;
}

.submitted-app-banner > i[b-s5oi5su2tx] {
    font-size: var(--font-size-3xl);
    color: var(--color-info-600);
    flex-shrink: 0;
}

.submitted-app-banner > div:first-of-type[b-s5oi5su2tx] {
    flex: 1;
    min-width: 250px;
}

.submitted-app-banner > div:last-of-type[b-s5oi5su2tx] {
    display: flex;
    gap: var(--spacing-3);
    align-items: center;
    flex-shrink: 0;
    flex-wrap: wrap;
}

.submitted-app-banner strong[b-s5oi5su2tx] {
    display: block;
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-bold);
    color: var(--color-info-900);
    margin-bottom: var(--spacing-2);
}

.submitted-app-banner p[b-s5oi5su2tx] {
    color: var(--color-info-800);
    font-size: var(--font-size-sm);
    margin: 0;
}

.submitted-app-banner .btn[b-s5oi5su2tx] {
    flex-shrink: 0;
    white-space: nowrap;
}

/* Responsive adjustments for submitted banner */
@media (max-width: 768px) {
    .submitted-app-banner[b-s5oi5su2tx] {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--spacing-4);
    }
    
    .submitted-app-banner > div:last-of-type[b-s5oi5su2tx] {
        width: 100%;
        justify-content: flex-start;
    }
    
    .submitted-app-banner .btn[b-s5oi5su2tx] {
        flex: 1;
        min-width: 140px;
    }
}

/* ────────── INFO MESSAGE BOX ────────── */
.info-message-box[b-s5oi5su2tx] {
    display: flex;
    gap: var(--spacing-4);
    padding: var(--spacing-5);
    background: linear-gradient(135deg, #fff9e6 0%, #fff4cc 100%);
    border: var(--border-md) solid #f59e0b;
    border-left: 4px solid #f59e0b;
    border-radius: var(--radius-lg);
    margin-bottom: var(--spacing-6);
    align-items: flex-start;
}

.info-message-box > i[b-s5oi5su2tx] {
    font-size: var(--font-size-xl);
    color: #d97706;
    flex-shrink: 0;
    margin-top: 2px;
}

.info-message-box > div[b-s5oi5su2tx] {
    flex: 1;
}

.info-message-box p[b-s5oi5su2tx] {
    color: #78350f;
    font-size: var(--font-size-sm);
    line-height: 1.6;
    margin: 0 0 var(--spacing-3) 0;
}

.info-message-box p:last-child[b-s5oi5su2tx] {
    margin-bottom: 0;
}

.info-message-box p strong[b-s5oi5su2tx] {
    color: #92400e;
    font-weight: var(--font-weight-bold);
}

.info-message-box .contact-info[b-s5oi5su2tx] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-4);
    align-items: center;
    margin-top: var(--spacing-3);
    padding-top: var(--spacing-3);
    border-top: 1px solid #fbbf24;
}

.info-message-box .contact-info strong[b-s5oi5su2tx] {
    color: #92400e;
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-sm);
}

.info-message-box .contact-info span[b-s5oi5su2tx] {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    font-size: var(--font-size-sm);
    color: #78350f;
}

.info-message-box .contact-info span i[b-s5oi5su2tx] {
    color: #d97706;
    font-size: var(--font-size-xs);
}

.info-message-box .contact-info a[b-s5oi5su2tx] {
    color: #0369a1;
    text-decoration: none;
    font-weight: var(--font-weight-semibold);
    transition: color 0.2s ease;
}

.info-message-box .contact-info a:hover[b-s5oi5su2tx] {
    color: #075985;
    text-decoration: underline;
}

.status-badge.status-rejected[b-s5oi5su2tx] {
    background: var(--color-danger-50);
    color: var(--color-danger-800);
}

.app-number[b-s5oi5su2tx] {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
}

/* ────────── BUTTONS ────────── */
.btn[b-s5oi5su2tx] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-3);
    padding: var(--spacing-4) var(--spacing-6);
    border-radius: var(--radius-md);
    font-weight: var(--font-weight-semibold);
    font-size: var(--font-size-md);
    cursor: pointer;
    transition: all 0.2s;
    border: var(--border-md) solid transparent;
}

.btn:disabled[b-s5oi5su2tx] {
    opacity: var(--opacity-40);
    cursor: not-allowed;
}

.btn-outline[b-s5oi5su2tx] {
    background: var(--color-white);
    color: var(--color-text-primary);
    border-color: var(--color-border);
}

.btn-outline:hover:not(:disabled)[b-s5oi5su2tx] {
    background: var(--color-gray-50);
    border-color: var(--color-primary-500);
    color: var(--color-primary-500);
}

/* ────────── SIBLINGS SECTION ────────── */
.sibling-card[b-s5oi5su2tx] {
    padding: var(--spacing-5);
    background: var(--color-gray-50);
    border: var(--border-sm) solid var(--color-border);
    border-radius: var(--radius-md);
    margin-bottom: var(--spacing-5);
}

.sibling-header[b-s5oi5su2tx] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-4);
}

.sibling-header h4[b-s5oi5su2tx] {
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
    margin: 0;
}

.remove-sibling-btn[b-s5oi5su2tx] {
    background: none;
    border: none;
    color: var(--color-danger-600);
    cursor: pointer;
    padding: var(--spacing-2) var(--spacing-3);
    font-size: var(--font-size-sm);
    border-radius: var(--radius-sm);
    transition: background 0.2s;
}

.remove-sibling-btn:hover[b-s5oi5su2tx] {
    background: var(--color-danger-50);
}

.add-sibling-btn[b-s5oi5su2tx] {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-3);
    padding: var(--spacing-3) var(--spacing-5);
    background: var(--color-white);
    border: var(--border-md) dashed var(--color-border);
    border-radius: var(--radius-md);
    color: var(--color-primary-500);
    font-weight: var(--font-weight-semibold);
    cursor: pointer;
    transition: all 0.2s;
}

.add-sibling-btn:hover[b-s5oi5su2tx] {
    border-color: var(--color-primary-500);
    background: var(--color-primary-50);
}

/* ────────── DOCUMENT UPLOAD ────────── */
.section-hint[b-s5oi5su2tx] {
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
    margin-bottom: var(--spacing-6);
    line-height: var(--line-height-normal);
}

.info-box[b-s5oi5su2tx] {
    display: flex;
    align-items: center;
    gap: var(--spacing-4);
    padding: var(--spacing-5);
    background: var(--color-info-50);
    border: var(--border-sm) solid var(--color-info-200);
    border-radius: var(--radius-md);
    color: var(--color-info-800);
    margin-bottom: var(--spacing-5);
}

.info-box.error-box[b-s5oi5su2tx] {
    background: var(--color-danger-50);
    border-color: var(--color-danger-600);
    color: var(--color-danger-800);
}

.info-box i[b-s5oi5su2tx] {
    font-size: var(--font-size-xl);
    flex-shrink: 0;
}

.document-grid[b-s5oi5su2tx] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: var(--spacing-5);
    margin-bottom: var(--spacing-6);
}

.document-upload-card[b-s5oi5su2tx] {
    position: relative;
    padding: var(--spacing-6);
    background: var(--color-white);
    border: var(--border-md) solid var(--color-border);
    border-radius: var(--radius-lg);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    transition: all 0.2s;
    min-height: 240px;
}

.document-upload-card:hover[b-s5oi5su2tx] {
    border-color: var(--color-primary-500);
    box-shadow: var(--shadow-md);
}

.document-upload-card.uploaded[b-s5oi5su2tx] {
    background: var(--color-success-50);
    border-color: var(--color-success-600);
}

.document-upload-card.doc-error[b-s5oi5su2tx] {
    border-color: var(--color-danger-600);
    background: var(--color-danger-50);
}

.document-upload-card.required[b-s5oi5su2tx]::before {
    content: 'Required';
    position: absolute;
    top: var(--spacing-3);
    right: var(--spacing-3);
    font-size: var(--font-size-xs);
    padding: var(--spacing-2) var(--spacing-3);
    background: var(--color-warning-500);
    color: var(--color-white);
    border-radius: var(--radius-sm);
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
}

/* Empty state — click to upload */
.doc-upload-label[b-s5oi5su2tx] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-3);
    cursor: pointer;
    width: 100%;
    height: 100%;
    min-height: 200px;
    padding: var(--spacing-5);
    transition: all 0.2s;
}

.doc-upload-label:hover[b-s5oi5su2tx] {
    transform: scale(1.02);
}

.doc-upload-label i[b-s5oi5su2tx] {
    font-size: var(--font-size-4xl);
    color: var(--color-primary-500);
    margin-bottom: var(--spacing-2);
}

.doc-name[b-s5oi5su2tx] {
    font-weight: var(--font-weight-semibold);
    font-size: var(--font-size-md);
    color: var(--color-text-primary);
    margin-bottom: var(--spacing-2);
}

.doc-upload-label small[b-s5oi5su2tx],
.required-label[b-s5oi5su2tx] {
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
}

.required-label[b-s5oi5su2tx] {
    color: var(--color-warning-700);
    font-weight: var(--font-weight-semibold);
}

/* Uploaded state — show preview */
.doc-preview-thumb[b-s5oi5su2tx] {
    position: relative;
    width: 100%;
    height: 140px;
    border-radius: var(--radius-md);
    overflow: hidden;
    margin-bottom: var(--spacing-4);
    cursor: pointer;
    background: var(--color-gray-100);
}

.doc-preview-thumb img[b-s5oi5su2tx] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.doc-preview-thumb.doc-preview-pdf[b-s5oi5su2tx] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-3);
    background: linear-gradient(135deg, var(--color-danger-50) 0%, var(--color-danger-100) 100%);
}

.doc-preview-thumb.doc-preview-pdf i[b-s5oi5su2tx] {
    font-size: var(--font-size-5xl);
    color: var(--color-danger-600);
}

.doc-preview-pdf-label[b-s5oi5su2tx] {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-bold);
    color: var(--color-danger-800);
    text-transform: uppercase;
}

.doc-preview-overlay[b-s5oi5su2tx] {
    position: absolute;
    inset: 0;
    background: color-mix(in srgb, var(--color-gray-900) 70%, transparent);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.2s;
}

.doc-preview-thumb:hover .doc-preview-overlay[b-s5oi5su2tx] {
    opacity: 1;
}

.doc-preview-overlay i[b-s5oi5su2tx] {
    font-size: var(--font-size-3xl);
    color: var(--color-white);
}

.doc-file-info[b-s5oi5su2tx] {
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
    margin-bottom: var(--spacing-4);
}

/* Document actions */
.doc-actions[b-s5oi5su2tx] {
    display: flex;
    gap: var(--spacing-3);
    width: 100%;
    justify-content: center;
}

.doc-action-btn[b-s5oi5su2tx] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--color-white);
    border: var(--border-sm) solid var(--color-border);
    color: var(--color-text-primary);
    padding: var(--spacing-3);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all 0.2s;
    font-size: var(--font-size-md);
    width: 36px;
    height: 36px;
}

.doc-action-btn:hover[b-s5oi5su2tx] {
    background: var(--color-primary-50);
    border-color: var(--color-primary-500);
    color: var(--color-primary-500);
    transform: translateY(-1px);
}

.doc-action-btn.delete:hover[b-s5oi5su2tx] {
    background: var(--color-danger-50);
    border-color: var(--color-danger-600);
    color: var(--color-danger-600);
}

.doc-action-btn.preview:hover[b-s5oi5su2tx] {
    background: var(--color-info-50);
    border-color: var(--color-info-500);
    color: var(--color-info-500);
}

.doc-action-btn:disabled[b-s5oi5su2tx] {
    opacity: var(--opacity-40);
    cursor: not-allowed;
}

/* Uploading state */
.doc-uploading[b-s5oi5su2tx] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 140px;
    margin-bottom: var(--spacing-4);
}

.spinner-sm[b-s5oi5su2tx] {
    width: 2rem;
    height: 2rem;
    border: 3px solid var(--color-border);
    border-top-color: var(--color-primary-500);
    border-radius: 50%;
    animation: spin-b-s5oi5su2tx 0.8s linear infinite;
}

/* ────────── DOCUMENT PREVIEW MODAL ────────── */
.doc-preview-modal-backdrop[b-s5oi5su2tx] {
    position: fixed;
    inset: 0;
    background: color-mix(in srgb, var(--color-gray-900) 75%, transparent);
    z-index: var(--z-modal);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-5);
    animation: fadeIn-b-s5oi5su2tx 0.2s;
}

.doc-preview-modal[b-s5oi5su2tx] {
    background: var(--color-white);
    border-radius: var(--radius-lg);
    max-width: 56rem;
    width: 100%;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: slideUp-b-s5oi5su2tx 0.3s;
}

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

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

.doc-preview-modal-header[b-s5oi5su2tx] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--spacing-6);
    border-bottom: var(--border-sm) solid var(--color-border);
}

.doc-preview-close[b-s5oi5su2tx] {
    background: none;
    border: none;
    font-size: var(--font-size-2xl);
    color: var(--color-text-muted);
    cursor: pointer;
    padding: var(--spacing-2);
    border-radius: var(--radius-sm);
    transition: all 0.2s;
}

.doc-preview-close:hover[b-s5oi5su2tx] {
    background: var(--color-gray-50);
    color: var(--color-text-primary);
}

.doc-preview-modal-body[b-s5oi5su2tx] {
    padding: var(--spacing-6);
    overflow-y: auto;
}

.doc-preview-modal-body img[b-s5oi5su2tx] {
    max-width: 100%;
    height: auto;
    border-radius: var(--radius-md);
}

.doc-preview-pdf-placeholder[b-s5oi5su2tx] {
    text-align: center;
    padding: var(--spacing-10);
}

.doc-preview-pdf-placeholder i[b-s5oi5su2tx] {
    font-size: var(--font-size-6xl);
    color: var(--color-danger-600);
    margin-bottom: var(--spacing-5);
}

.doc-preview-open-btn[b-s5oi5su2tx] {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-3);
    padding: var(--spacing-4) var(--spacing-6);
    background: var(--color-primary-500);
    color: var(--color-white);
    border-radius: var(--radius-md);
    text-decoration: none;
    font-weight: var(--font-weight-semibold);
    margin-top: var(--spacing-5);
    transition: all 0.2s;
}

.doc-preview-open-btn:hover[b-s5oi5su2tx] {
    background: var(--color-primary-600);
    transform: translateY(-1px);
}

/* ────────── REVIEW PAGE ────────── */
.review-alert[b-s5oi5su2tx] {
    padding: var(--spacing-5) var(--spacing-6);
    border-radius: var(--radius-lg);
    margin-bottom: var(--spacing-6);
    display: flex;
    align-items: center;
    gap: var(--spacing-4);
}

.review-alert-error[b-s5oi5su2tx] {
    background: var(--color-danger-50);
    border: var(--border-md) solid var(--color-danger-600);
    color: var(--color-danger-800);
}

.review-alert-success[b-s5oi5su2tx] {
    background: var(--color-success-50);
    border: var(--border-md) solid var(--color-success-600);
    color: var(--color-success-800);
}

.review-alert i[b-s5oi5su2tx] {
    font-size: var(--font-size-2xl);
}

.review-item[b-s5oi5su2tx] {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-2);
}

.review-item label[b-s5oi5su2tx] {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-muted);
}

.review-item span[b-s5oi5su2tx] {
    color: var(--color-text-primary);
    font-weight: var(--font-weight-medium);
}

.review-item.review-missing span[b-s5oi5su2tx] {
    color: var(--color-danger-600);
    font-weight: var(--font-weight-semibold);
}

.review-edit-btn[b-s5oi5su2tx] {
    background: none;
    border: var(--border-sm) solid var(--color-border);
    color: var(--color-primary-500);
    padding: var(--spacing-3) var(--spacing-5);
    border-radius: var(--radius-sm);
    font-weight: var(--font-weight-semibold);
    cursor: pointer;
    transition: all 0.2s;
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-3);
}

.review-edit-btn:hover[b-s5oi5su2tx] {
    background: var(--color-primary-500);
    color: var(--color-white);
    border-color: var(--color-primary-500);
}

/* ────────── DECLARATION ────────── */
.review-summary[b-s5oi5su2tx] {
    padding: var(--spacing-6);
    background: var(--color-gray-50);
    border: var(--border-md) solid var(--color-border);
    border-radius: var(--radius-lg);
    margin-bottom: var(--spacing-8);
}

.review-summary h3[b-s5oi5su2tx] {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-text-primary);
    margin-bottom: var(--spacing-5);
}

.declaration-box[b-s5oi5su2tx] {
    padding: var(--spacing-6);
    background: var(--color-warning-50);
    border: var(--border-md) solid var(--color-warning-500);
    border-radius: var(--radius-lg);
}

.checkbox-label[b-s5oi5su2tx] {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-4);
    cursor: pointer;
}

.checkbox-label input[type="checkbox"][b-s5oi5su2tx] {
    width: 1.25rem;
    height: 1.25rem;
    cursor: pointer;
    margin-top: 0.125rem;
    flex-shrink: 0;
}

/* ────────── SUCCESS PAGE ────────── */
.success-container[b-s5oi5su2tx] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 60vh;
    padding: var(--spacing-8);
}

.success-card[b-s5oi5su2tx] {
    max-width: 42rem;
    width: 100%;
    background: var(--color-white);
    border-radius: var(--radius-xl);
    padding: var(--spacing-10);
    text-align: center;
    box-shadow: var(--shadow-lg);
}

.success-icon[b-s5oi5su2tx] {
    width: 5rem;
    height: 5rem;
    border-radius: var(--radius-full);
    background: linear-gradient(135deg, var(--color-success-50) 0%, var(--color-success-100) 100%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--spacing-6);
}

.success-icon i[b-s5oi5su2tx] {
    font-size: var(--font-size-5xl);
    color: var(--color-success-600);
}

.success-card h2[b-s5oi5su2tx] {
    font-size: var(--font-size-3xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-text-primary);
    margin-bottom: var(--spacing-5);
}

.success-app-number[b-s5oi5su2tx] {
    font-size: var(--font-size-xl);
    margin-bottom: var(--spacing-5);
    color: var(--color-primary-500);
}

.success-message[b-s5oi5su2tx] {
    color: var(--color-text-muted);
    margin-bottom: var(--spacing-5);
    line-height: var(--line-height-normal);
}

.success-email-note[b-s5oi5su2tx] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-3);
    padding: var(--spacing-5);
    background: var(--color-info-50);
    border-radius: var(--radius-md);
    margin-bottom: var(--spacing-6);
    color: var(--color-info-800);
}

.success-actions[b-s5oi5su2tx] {
    display: flex;
    gap: var(--spacing-4);
    justify-content: center;
    flex-wrap: wrap;
}

/* ────────── SAVING INDICATOR ────────── */
.saving-indicator[b-s5oi5su2tx] {
    position: absolute;
    top: var(--spacing-5);
    right: var(--spacing-5);
    padding: var(--spacing-3) var(--spacing-5);
    background: var(--color-warning-50);
    color: var(--color-warning-900);
    border-radius: var(--radius-md);
    font-weight: var(--font-weight-semibold);
    font-size: var(--font-size-sm);
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
}

/* ────────── TOAST NOTIFICATION ────────── */
.toast[b-s5oi5su2tx] {
    position: fixed;
    bottom: var(--spacing-8);
    right: var(--spacing-8);
    padding: var(--spacing-5) var(--spacing-6);
    background: var(--color-white);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xl);
    display: flex;
    align-items: center;
    gap: var(--spacing-4);
    z-index: var(--z-toast);
    animation: slideInRight-b-s5oi5su2tx 0.3s;
    min-width: 20rem;
    border-left: 4px solid;
}

@keyframes slideInRight-b-s5oi5su2tx {
    from { transform: translateX(100%); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}

.toast.success[b-s5oi5su2tx] {
    border-left-color: var(--color-success-600);
}

.toast.success i[b-s5oi5su2tx] {
    color: var(--color-success-600);
}

.toast.error[b-s5oi5su2tx] {
    border-left-color: var(--color-danger-600);
}

.toast.error i[b-s5oi5su2tx] {
    color: var(--color-danger-600);
}

.toast.warning[b-s5oi5su2tx] {
    border-left-color: var(--color-warning-500);
}

.toast.warning i[b-s5oi5su2tx] {
    color: var(--color-warning-500);
}

.toast i[b-s5oi5su2tx] {
    font-size: var(--font-size-2xl);
}

/* ────────── RESPONSIVE ────────── */
@media (max-width: 768px) {
    .stepper[b-s5oi5su2tx] {
        flex-wrap: nowrap;
        overflow-x: auto;
        padding: var(--spacing-3) 0;
    }

    .step[b-s5oi5su2tx] {
        min-width: 4rem;
    }

    .step-circle[b-s5oi5su2tx] {
        width: 2.5rem;
        height: 2.5rem;
        font-size: var(--font-size-sm);
    }

    .step-label[b-s5oi5su2tx] {
        font-size: 0.65rem;
    }

    .document-grid[b-s5oi5su2tx] {
        grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
        gap: var(--spacing-4);
    }

    .document-upload-card[b-s5oi5su2tx] {
        min-height: 220px;
        padding: var(--spacing-4);
    }

    .doc-preview-thumb[b-s5oi5su2tx] {
        height: 120px;
    }

    .doc-action-btn[b-s5oi5su2tx] {
        width: 32px;
        height: 32px;
        font-size: var(--font-size-sm);
    }

    .toast[b-s5oi5su2tx] {
        bottom: var(--spacing-5);
        right: var(--spacing-5);
        left: var(--spacing-5);
        min-width: auto;
    }

    .success-card[b-s5oi5su2tx] {
        padding: var(--spacing-8);
    }

    .draft-actions[b-s5oi5su2tx] {
        flex-direction: column;
    }

    .draft-actions .btn[b-s5oi5su2tx] {
        width: 100%;
    }
}

@media (max-width: 480px) {
    .document-grid[b-s5oi5su2tx] {
        grid-template-columns: 1fr;
    }

    .document-upload-card[b-s5oi5su2tx] {
        min-height: auto;
    }
}

/* ══════════════════════════════════════════════════
   PDF GENERATION ANIMATED OVERLAY
   ══════════════════════════════════════════════════ */
.pdf-gen-overlay[b-s5oi5su2tx] {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.72);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    animation: pdf-overlay-in-b-s5oi5su2tx 0.25s ease;
}

@keyframes pdf-overlay-in-b-s5oi5su2tx {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.pdf-gen-card[b-s5oi5su2tx] {
    background: #fff;
    border-radius: 1.25rem;
    padding: 2.5rem 3rem;
    text-align: center;
    width: min(420px, 90vw);
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.30);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.25rem;
    animation: pdf-card-in-b-s5oi5su2tx 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes pdf-card-in-b-s5oi5su2tx {
    from { opacity: 0; transform: scale(0.88) translateY(20px); }
    to   { opacity: 1; transform: scale(1)    translateY(0);    }
}

.pdf-gen-icon-wrap[b-s5oi5su2tx] {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: pdf-icon-pulse-b-s5oi5su2tx 2s ease-in-out infinite;
}

.pdf-gen-icon[b-s5oi5su2tx] {
    font-size: 2.1rem;
    color: #fff;
}

@keyframes pdf-icon-pulse-b-s5oi5su2tx {
    0%,  100% { transform: scale(1);    box-shadow: 0 0 0 0   rgba(239, 68, 68, 0.45); }
    50%       { transform: scale(1.07); box-shadow: 0 0 0 14px rgba(239, 68, 68, 0);    }
}

.pdf-gen-title[b-s5oi5su2tx] {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--color-text-primary, #0f172a);
    margin: 0;
    letter-spacing: -0.01em;
}

/* Step row — re-animates each time pdfStepIndex changes via key= */
.pdf-gen-step[b-s5oi5su2tx] {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    font-size: 0.9rem;
    color: var(--color-primary-600, #2563eb);
    font-weight: 500;
    min-height: 1.6rem;
    animation: pdf-step-in-b-s5oi5su2tx 0.45s ease;
}

.pdf-gen-step i[b-s5oi5su2tx] {
    font-size: 0.95rem;
    flex-shrink: 0;
}

@keyframes pdf-step-in-b-s5oi5su2tx {
    from { opacity: 0; transform: translateY(7px); }
    to   { opacity: 1; transform: translateY(0);   }
}

.pdf-gen-progress-track[b-s5oi5su2tx] {
    width: 100%;
    height: 8px;
    background: var(--color-border, #e2e8f0);
    border-radius: 999px;
    overflow: hidden;
}

.pdf-gen-progress-bar[b-s5oi5su2tx] {
    height: 100%;
    background: linear-gradient(90deg, #3b82f6 0%, #6366f1 100%);
    border-radius: 999px;
    transition: width 0.65s cubic-bezier(0.4, 0, 0.2, 1);
}

.pdf-gen-hint[b-s5oi5su2tx] {
    font-size: 0.78rem;
    color: var(--color-text-muted, #94a3b8);
    margin: 0;
}
/* /Pages/Landing/MainLanding.razor.rz.scp.css */
/* MainLanding page styles (CSS isolation). Tailwind utilities handle the rest. */

/* Translucent, blurred fixed nav */
.nav-blur[b-qb51jixfbw] {
    background: rgba(255, 255, 255, 0.82);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

/* Hero: subtle teal/amber mesh on white (brand tokens, not a rainbow band) */
.hero-mesh[b-qb51jixfbw] {
    background:
        radial-gradient(1100px 520px at 85% -10%, var(--color-teal-50) 0%, transparent 60%),
        radial-gradient(900px 480px at 0% 10%, var(--color-orange-50) 0%, transparent 55%),
        #ffffff;
}

/* Elevated card used across sections */
.landing-card[b-qb51jixfbw] {
    background: #fff;
    border: 1px solid #EEF0F2;
    border-radius: 20px;
    box-shadow: 0 1px 2px rgba(16, 56, 42, 0.05), 0 10px 28px rgba(16, 56, 42, 0.07);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.landing-card:hover[b-qb51jixfbw] {
    transform: translateY(-4px);
    box-shadow: 0 1px 2px rgba(16, 56, 42, 0.06), 0 22px 40px rgba(16, 56, 42, 0.12);
}

/* Teal icon chip */
.icon-chip[b-qb51jixfbw] {
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Role tabs (Solutions section) */
.role-tab[b-qb51jixfbw] {
    border-radius: 12px;
    font-weight: 600;
    font-size: 15px;
    padding: 0.6rem 1.1rem;
    border: 1px solid #E5E7EB;
    background: #fff;
    color: #374151;
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.role-tab:hover[b-qb51jixfbw] {
    border-color: var(--color-teal-500);
    color: var(--color-teal-700);
}

.role-tab.active[b-qb51jixfbw] {
    background: var(--color-teal-700);
    color: #fff;
    border-color: var(--color-teal-700);
}

/* Grayscale school wordmarks in trust strip */
.wordmark[b-qb51jixfbw] {
    filter: grayscale(1);
    opacity: 0.55;
    font-size: 15px;
}
/* /Pages/Landing/ParentRegister.razor.rz.scp.css */
:root[b-pdbladv01k] {
  --track-primary: #2563eb;
  --track-primary-dark: #1d4ed8;
  --track-success: #16a34a;
  --track-warning: #d97706;
  --track-danger: #dc2626;
  --track-info: #0891b2;
  --track-bg: #f9fafb;
  --track-card-bg: #ffffff;
  --track-border: #e5e7eb;
  --track-text: #111827;
  --track-text-muted: #6b7280;
  --track-text-light: #9ca3af;
}

/* ─── Top Bar ─── */
.admission-top-bar[b-pdbladv01k] {
  background: linear-gradient(135deg, #1e3a8a 0%, #2563eb 100%);
  padding: 1rem 1.5rem;
}
.admission-top-bar-inner[b-pdbladv01k] {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 1rem;
}
.admission-logo-placeholder[b-pdbladv01k] {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 0.5rem;
  background: rgba(255,255,255,0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 1.25rem;
}
.admission-school-name[b-pdbladv01k] {
  color: #fff;
  font-weight: 700;
  font-size: 1.125rem;
}
.admission-school-sub[b-pdbladv01k] {
  color: rgba(255,255,255,0.8);
  font-size: 0.875rem;
}

/* ─── Card ─── */
.track-card[b-pdbladv01k],
.track-result-card[b-pdbladv01k] {
  background: var(--track-card-bg);
  border-radius: 1rem;
  box-shadow: 0 4px 24px rgba(0,0,0,0.06);
  border: 1px solid var(--track-border);
  overflow: hidden;
}
.track-card-header[b-pdbladv01k] {
  padding: 2rem 1.5rem 1.5rem;
  text-align: center;
  border-bottom: 1px solid var(--track-border);
}
.track-icon-wrap[b-pdbladv01k] {
  width: 4rem;
  height: 4rem;
  border-radius: 50%;
  background: #eff6ff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1rem;
  color: var(--track-primary);
  font-size: 1.5rem;
}
.track-title[b-pdbladv01k] {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--track-text);
  margin-bottom: 0.5rem;
}
.track-subtitle[b-pdbladv01k] {
  color: var(--track-text-muted);
  font-size: 0.9375rem;
  max-width: 24rem;
  margin: 0 auto;
  line-height: 1.5;
}

/* ─── Form ─── */
.track-form[b-pdbladv01k] {
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}
.track-field[b-pdbladv01k] {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}
.track-field-row[b-pdbladv01k] {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}
.track-label[b-pdbladv01k] {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--track-text);
}
.track-required[b-pdbladv01k] {
  color: var(--track-danger);
}
.track-input[b-pdbladv01k] {
  padding: 0.75rem 1rem;
  border: 1px solid var(--track-border);
  border-radius: 0.5rem;
  font-size: 0.9375rem;
  color: var(--track-text);
  background: #fff;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.track-input:focus[b-pdbladv01k] {
  outline: none;
  border-color: var(--track-primary);
  box-shadow: 0 0 0 3px rgba(37,99,235,0.1);
}
.track-hint[b-pdbladv01k] {
  font-size: 0.8125rem;
  color: var(--track-text-light);
}
.track-hint.warning[b-pdbladv01k] {
  color: var(--track-warning);
}
.track-hint.success[b-pdbladv01k] {
  color: var(--track-success);
}

/* ─── Submit Button ─── */
.track-submit-btn[b-pdbladv01k] {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: 100%;
  padding: 0.875rem 1.5rem;
  background: var(--track-primary);
  color: #fff;
  border: none;
  border-radius: 0.5rem;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s, transform 0.1s;
}
.track-submit-btn:hover:not(:disabled)[b-pdbladv01k] {
  background: var(--track-primary-dark);
}
.track-submit-btn:disabled[b-pdbladv01k] {
  opacity: 0.7;
  cursor: not-allowed;
}

/* ─── Error Banner ─── */
.track-error-banner[b-pdbladv01k] {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem 1.25rem;
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: 0.5rem;
  color: #991b1b;
  font-size: 0.9375rem;
  margin-bottom: 1rem;
}
.track-error-banner i[b-pdbladv01k] {
  color: #dc2626;
  font-size: 1.125rem;
}

/* ─── Next Step / Info Banner ─── */
.track-next-step[b-pdbladv01k] {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 1rem 1.25rem;
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  border-radius: 0.5rem;
  color: #1e40af;
  font-size: 0.9375rem;
  line-height: 1.5;
}
.track-next-step i[b-pdbladv01k] {
  color: #f59e0b;
  font-size: 1.125rem;
  margin-top: 0.125rem;
  flex-shrink: 0;
}

/* ─── Alt Action ─── */
.track-alt-action[b-pdbladv01k] {
  text-align: center;
  font-size: 0.9375rem;
  color: var(--track-text-muted);
  padding-top: 0.5rem;
}
.track-alt-action a[b-pdbladv01k] {
  color: var(--track-primary);
  text-decoration: none;
  font-weight: 600;
}
.track-alt-action a:hover[b-pdbladv01k] {
  text-decoration: underline;
}

/* ─── Page Footer ─── */
.track-footer[b-pdbladv01k] {
  text-align: center;
  padding: 2rem 1rem;
  color: var(--track-text-light);
  font-size: 0.875rem;
}
.track-footer a[b-pdbladv01k] {
  color: var(--track-primary);
  text-decoration: none;
  font-weight: 500;
}
.track-footer a:hover[b-pdbladv01k] {
  text-decoration: underline;
}

/* ─── Mobile ─── */
@media (max-width: 640px) {
  .track-field-row[b-pdbladv01k] {
    grid-template-columns: 1fr;
  }
}
/* /Pages/Landing/RequestDemo.razor.rz.scp.css */
/* =====================================================
   RequestDemo.razor.css  — Scoped styles for the
   "Claim Your Free 1 Month" page
   ===================================================== */

/* ── Page wrapper ─────────────────────────────────── */
.page-wrapper[b-54ohgcu83c] {
    min-height: 100vh;
    background: linear-gradient(135deg, #f0f4ff 0%, #fef3e2 100%);
    font-family: 'Inter', sans-serif;
}

/* ── Top navigation bar ───────────────────────────── */
.top-bar[b-54ohgcu83c] {
    background: white;
    border-bottom: 1px solid #e5e7eb;
    padding: 0 1.5rem;
    height: 64px;
    display: flex;
    align-items: center;
}

.nav-inner[b-54ohgcu83c] {
    max-width: 1200px;
    width: 100%;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo-img[b-54ohgcu83c] {
    height: 40px;
}

.back-link[b-54ohgcu83c] {
    background: none;
    border: none;
    color: #2563eb;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: color 0.2s;
}

.back-link:hover[b-54ohgcu83c] {
    color: #1d4ed8;
}

/* ── Two-column layout ────────────────────────────── */
.content-grid[b-54ohgcu83c] {
    max-width: 1200px;
    margin: 0 auto;
    padding: 2.5rem 1.5rem;
    display: grid;
    grid-template-columns: 1fr 1.5fr;
    gap: 2.5rem;
    align-items: start;
}

@media (max-width: 900px) {
    .content-grid[b-54ohgcu83c] {
        grid-template-columns: 1fr;
    }
}

/* ── Left offer panel ─────────────────────────────── */
.offer-panel[b-54ohgcu83c] {
    background: linear-gradient(160deg, #004aad 0%, #0066cc 100%);
    color: white;
    border-radius: 20px;
    padding: 2rem 1.75rem;
    position: sticky;
    top: 80px;
}

@media (max-width: 900px) {
    .offer-panel[b-54ohgcu83c] {
        position: static;
    }
}

.offer-badge[b-54ohgcu83c] {
    display: inline-block;
    background: #f97316;
    color: white;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 4px 14px;
    border-radius: 999px;
    margin-bottom: 1rem;
}

.offer-headline[b-54ohgcu83c] {
    font-size: 2.25rem;
    font-weight: 800;
    line-height: 1.2;
    margin-bottom: 0.5rem;
}

.offer-headline .highlight[b-54ohgcu83c] {
    color: #fde047;
    font-size: 2.75rem;
}

.offer-sub[b-54ohgcu83c] {
    font-size: 1rem;
    opacity: 0.85;
    margin-bottom: 1.5rem;
}

.offer-list[b-54ohgcu83c] {
    list-style: none;
    padding: 0;
    margin: 0 0 1.5rem 0;
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
}

.offer-list li[b-54ohgcu83c] {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.95rem;
}

.offer-list .green[b-54ohgcu83c] {
    color: #86efac;
    font-size: 1.1rem;
}

.offer-list .grey[b-54ohgcu83c] {
    color: rgba(255,255,255,0.35);
    font-size: 1.1rem;
}

.offer-list .excluded[b-54ohgcu83c] {
    opacity: 0.6;
}

.line-through[b-54ohgcu83c] {
    text-decoration: line-through;
}

.not-included-tag[b-54ohgcu83c] {
    font-size: 0.7rem;
    background: rgba(255,255,255,0.15);
    padding: 2px 8px;
    border-radius: 999px;
}

/* ── Trial section labels ──────────────────────────── */
.trial-section-label[b-54ohgcu83c] {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: rgba(255,255,255,0.6);
    margin-bottom: 0.35rem;
    margin-top: 0.1rem;
}

.locked-label[b-54ohgcu83c] {
    margin-top: 0.9rem;
    color: rgba(255,255,255,0.38);
}

/* ── Trial included badge ─────────────────────────── */
.trial-included[b-54ohgcu83c] {
    font-weight: 600;
}

.trial-tag[b-54ohgcu83c] {
    font-size: 0.62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    background: rgba(134,239,172,0.2);
    color: #86efac;
    border: 1px solid rgba(134,239,172,0.35);
    padding: 1px 8px;
    border-radius: 999px;
    margin-left: auto;
    flex-shrink: 0;
}

/* ── Locked feature list ─────────────────────────── */
.locked-list[b-54ohgcu83c] {
    gap: 0.45rem !important;
    margin-bottom: 0 !important;
}

.offer-list li.locked[b-54ohgcu83c] {
    opacity: 0.42;
    font-size: 0.87rem;
}

.lock-icon[b-54ohgcu83c] {
    color: rgba(255,255,255,0.5);
    font-size: 0.78rem;
    flex-shrink: 0;
}

.offer-note[b-54ohgcu83c] {
    background: rgba(255,255,255,0.1);
    border-left: 3px solid #fde047;
    padding: 0.75rem 1rem;
    border-radius: 0 8px 8px 0;
    font-size: 0.8rem;
    opacity: 0.9;
    display: flex;
    gap: 8px;
    align-items: flex-start;
    line-height: 1.5;
}

.offer-star[b-54ohgcu83c] {
    font-size: 1.6rem;
    vertical-align: super;
    line-height: 1;
    color: #fde047;
    margin-left: 2px;
}

.offer-highlights[b-54ohgcu83c] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.highlight-row[b-54ohgcu83c] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.82rem;
    opacity: 0.9;
}

.offer-asterisk-note[b-54ohgcu83c] {
    background: rgba(0,0,0,0.15);
    border-radius: 8px;
    padding: 0.6rem 0.9rem;
    font-size: 0.75rem;
    color: rgba(255,255,255,0.8);
    margin-bottom: 0.75rem;
    line-height: 1.5;
}

.offer-star-inline[b-54ohgcu83c] {
    color: #fde047;
    font-weight: bold;
    margin-right: 2px;
}

.title-star[b-54ohgcu83c] {
    color: #f97316;
    font-size: 1.1rem;
    vertical-align: super;
    margin-left: 2px;
}

/* ── Right form panel ─────────────────────────────── */
.form-panel[b-54ohgcu83c] {
    /* no extra styles needed */
}

.form-card[b-54ohgcu83c] {
    background: white;
    border-radius: 20px;
    padding: 2.5rem 2rem;
    box-shadow: 0 4px 30px rgba(0,0,0,0.07);
}

.form-title[b-54ohgcu83c] {
    font-size: 1.75rem;
    font-weight: 800;
    color: #111827;
    margin-bottom: 0.4rem;
    outline: none;
}

.form-subtitle[b-54ohgcu83c] {
    color: #6b7280;
    margin-bottom: 1.75rem;
    font-size: 0.95rem;
}

/* ── Alert ─────────────────────────────────────────── */
.alert-error[b-54ohgcu83c] {
    background: #fef2f2;
    border: 1px solid #fca5a5;
    color: #dc2626;
    border-radius: 10px;
    padding: 0.75rem 1rem;
    margin-bottom: 1.25rem;
    font-size: 0.9rem;
    display: flex;
    gap: 8px;
    align-items: center;
}

/* ── Form grid ─────────────────────────────────────── */
.form-grid[b-54ohgcu83c] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem;
}

@media (max-width: 580px) {
    .form-grid[b-54ohgcu83c] {
        grid-template-columns: 1fr;
    }
}

.field-group[b-54ohgcu83c] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.field-group.full-width[b-54ohgcu83c] {
    grid-column: 1 / -1;
}

.field-group label[b-54ohgcu83c] {
    font-size: 0.875rem;
    font-weight: 600;
    color: #374151;
}

.required[b-54ohgcu83c] {
    color: #ef4444;
}

.input-field[b-54ohgcu83c] {
    padding: 0.65rem 0.9rem;
    border: 1.5px solid #d1d5db;
    border-radius: 10px;
    font-size: 0.95rem;
    color: #111827;
    transition: border-color 0.2s, box-shadow 0.2s;
    outline: none;
    width: 100%;
    box-sizing: border-box;
}

.input-field:focus[b-54ohgcu83c] {
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59,130,246,0.15);
}

.input-error[b-54ohgcu83c] {
    border-color: #f87171 !important;
    box-shadow: 0 0 0 3px rgba(248,113,113,0.15) !important;
}

.field-error[b-54ohgcu83c] {
    font-size: 0.775rem;
    color: #dc2626;
}

/* ── Autocomplete dropdown ────────────────────────── */
.autocomplete-wrapper[b-54ohgcu83c] {
    position: relative;
    width: 100%;
}

.autocomplete-list[b-54ohgcu83c] {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 1000;
    background: white;
    border: 1.5px solid #d1d5db;
    border-top: none;
    border-radius: 0 0 10px 10px;
    max-height: 220px;
    overflow-y: auto;
    list-style: none;
    margin: 0;
    padding: 0;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

.autocomplete-item[b-54ohgcu83c] {
    padding: 0.55rem 0.9rem;
    font-size: 0.9rem;
    color: #111827;
    cursor: pointer;
    transition: background-color 0.15s;
    border-bottom: 1px solid #f3f4f6;
}

.autocomplete-item:last-child[b-54ohgcu83c] {
    border-bottom: none;
}

.autocomplete-item:hover[b-54ohgcu83c],
.autocomplete-item.highlighted[b-54ohgcu83c] {
    background-color: #eff6ff;
    color: #1d4ed8;
}

/* ── Form footer ───────────────────────────────────── */
.form-footer[b-54ohgcu83c] {
    margin-top: 2rem;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.75rem;
}

.submit-btn[b-54ohgcu83c] {
    background: linear-gradient(135deg, #f97316 0%, #f59e0b 100%);
    color: white;
    font-size: 1.05rem;
    font-weight: 700;
    padding: 1rem 2rem;
    border: none;
    border-radius: 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    transition: opacity 0.2s, transform 0.15s;
    box-shadow: 0 4px 15px rgba(249,115,22,0.3);
}

.submit-btn:hover:not(:disabled)[b-54ohgcu83c] {
    opacity: 0.92;
    transform: translateY(-1px);
}

.submit-btn:disabled[b-54ohgcu83c] {
    opacity: 0.65;
    cursor: not-allowed;
}

.privacy-note[b-54ohgcu83c] {
    text-align: center;
    font-size: 0.78rem;
    color: #9ca3af;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

/* ── Terms & Conditions ────────────────────────────── */
.terms-box[b-54ohgcu83c] {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 1rem 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.terms-label[b-54ohgcu83c] {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    font-size: 0.875rem;
    color: #374151;
    cursor: pointer;
    line-height: 1.5;
}

.terms-checkbox[b-54ohgcu83c] {
    margin-top: 2px;
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    accent-color: #f97316;
    cursor: pointer;
}

.terms-link[b-54ohgcu83c] {
    color: #2563eb;
    text-decoration: underline;
    background: none;
    border: none;
    padding: 0;
    font-size: inherit;
    cursor: pointer;
}

.terms-link:hover[b-54ohgcu83c] {
    color: #1d4ed8;
}

.terms-content[b-54ohgcu83c] {
    background: #fff;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    padding: 1.25rem;
    margin-top: 0.5rem;
    font-size: 0.82rem;
    color: #4b5563;
    line-height: 1.6;
    max-height: 280px;
    overflow-y: auto;
}

.terms-content h4[b-54ohgcu83c] {
    font-size: 0.95rem;
    font-weight: 700;
    color: #111827;
    margin: 0 0 0.75rem 0;
}

.terms-content p[b-54ohgcu83c] {
    margin: 0 0 0.6rem 0;
}

.terms-close-btn[b-54ohgcu83c] {
    background: #f3f4f6;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    padding: 0.4rem 1rem;
    font-size: 0.8rem;
    cursor: pointer;
    margin-top: 0.5rem;
    color: #374151;
}

.terms-close-btn:hover[b-54ohgcu83c] {
    background: #e5e7eb;
}

/* ── Success card ──────────────────────────────────── */
.success-card[b-54ohgcu83c] {
    background: white;
    border-radius: 20px;
    padding: 3rem 2rem;
    box-shadow: 0 4px 30px rgba(0,0,0,0.07);
    text-align: center;
}

.success-icon[b-54ohgcu83c] {
    font-size: 4rem;
    color: #22c55e;
    margin-bottom: 1rem;
}

.success-title[b-54ohgcu83c] {
    font-size: 1.75rem;
    font-weight: 800;
    color: #111827;
    margin-bottom: 0.75rem;
}

.success-msg[b-54ohgcu83c] {
    color: #6b7280;
    font-size: 0.97rem;
    line-height: 1.65;
    margin-bottom: 2rem;
}

.success-what-next[b-54ohgcu83c] {
    background: #f0f9ff;
    border-radius: 12px;
    padding: 1.5rem;
    text-align: left;
    margin-bottom: 2rem;
}

.success-what-next h3[b-54ohgcu83c] {
    font-size: 1rem;
    font-weight: 700;
    color: #1e40af;
    margin-bottom: 1rem;
}

.success-what-next ol[b-54ohgcu83c] {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    counter-reset: step;
}

.success-what-next ol li[b-54ohgcu83c] {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 0.9rem;
    color: #374151;
    counter-increment: step;
}

.success-what-next ol li[b-54ohgcu83c]::before {
    content: counter(step);
    background: #1d4ed8;
    color: white;
    font-size: 0.75rem;
    font-weight: 700;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.back-home-btn[b-54ohgcu83c] {
    background: #1d4ed8;
    color: white;
    font-size: 1rem;
    font-weight: 600;
    padding: 0.85rem 2rem;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: background 0.2s;
}

.back-home-btn:hover[b-54ohgcu83c] {
    background: #1e40af;
}

/* ── Coming Soon list item ─────────────────────────── */
.coming-soon-item[b-54ohgcu83c] {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.95rem;
}

.coming-soon-icon[b-54ohgcu83c] {
    color: #fb923c;
    font-size: 1.1rem;
    flex-shrink: 0;
}

.coming-soon-text[b-54ohgcu83c] {
    text-decoration: line-through;
    text-decoration-color: #ef4444;
    text-decoration-thickness: 2px;
    opacity: 0.75;
}

.coming-soon-badge[b-54ohgcu83c] {
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    background: #f97316;
    color: white;
    padding: 2px 8px;
    border-radius: 999px;
    flex-shrink: 0;
}

/* ── Feature sub-label (e.g. iOS & Android) ────────── */
.feature-sub[b-54ohgcu83c] {
    display: block;
    font-size: 0.72rem;
    opacity: 0.65;
    margin-top: 1px;
    font-weight: 400;
}

/* ── Benefits 2×2 grid ────────────────────────────── */
.benefits-grid[b-54ohgcu83c] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.6rem;
    margin-bottom: 1rem;
}

.benefit-box[b-54ohgcu83c] {
    background: rgba(255,255,255,0.1);
    border-radius: 10px;
    padding: 0.65rem 0.75rem;
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 0.78rem;
    line-height: 1.4;
}

.benefit-box i[b-54ohgcu83c] {
    margin-top: 2px;
    flex-shrink: 0;
}

/* ── Info boxes at the bottom of offer panel ────────── */
.info-box-row[b-54ohgcu83c] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-top: 0.75rem;
}

.info-box[b-54ohgcu83c] {
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 10px;
    padding: 0.65rem 0.9rem;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 0.78rem;
    line-height: 1.45;
}

.info-box i[b-54ohgcu83c] {
    margin-top: 2px;
    opacity: 0.8;
    flex-shrink: 0;
}

.info-box strong[b-54ohgcu83c] {
    display: block;
    font-weight: 700;
    margin-bottom: 1px;
}

.info-box span[b-54ohgcu83c] {
    opacity: 0.8;
}

/* ── Urgency note (right panel) ───────────────────── */
.urgency-note[b-54ohgcu83c] {
    text-align: center;
    font-size: 0.8rem;
    font-weight: 600;
    color: #f97316;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin: 0;
}

/* /Pages/Landing/SaasLanding.razor.rz.scp.css */
/* Styles handled via Tailwind utility classes in markup */
/* /Pages/Landing/SchoolLanding.razor.rz.scp.css */
/* Styles handled via Tailwind utility classes in markup */
/* /Pages/Landing/TrackApplication.razor.rz.scp.css */
/* ─── Track Application Page ─── */
/* Uses ExamActive design tokens from design-tokens.css */

.track-page-bg[b-7rfn6xkk6f] {
  background: var(--color-gray-50);
  min-height: 100vh;
  padding-bottom: var(--space-10);
}

/* ─── Top Bar ─── */
.track-top-bar[b-7rfn6xkk6f] {
  background: linear-gradient(135deg, var(--color-teal-700) 0%, var(--color-teal-500) 100%);
  padding: var(--space-4) var(--space-6);
}
.track-top-bar-inner[b-7rfn6xkk6f] {
  max-width: var(--grid-max-width);
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: var(--space-4);
}
.track-logo-wrap[b-7rfn6xkk6f] {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--radius-sm);
  background: rgba(255,255,255,0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-white);
  font-size: 1.25rem;
}
.track-top-title[b-7rfn6xkk6f] {
  color: var(--color-white);
  font-weight: 700;
  font-size: 1.125rem;
}
.track-top-sub[b-7rfn6xkk6f] {
  color: rgba(255,255,255,0.8);
  font-size: 0.875rem;
}

/* ─── Card ─── */
.track-card[b-7rfn6xkk6f],
.track-result-card[b-7rfn6xkk6f] {
  background: var(--color-white);
  border-radius: var(--radius-lg);
  box-shadow: 0 4px 24px rgba(0,0,0,0.06);
  border: 1px solid var(--color-border);
  overflow: hidden;
}
.track-card-header[b-7rfn6xkk6f] {
  padding: var(--space-8) var(--space-6) var(--space-6);
  text-align: center;
  border-bottom: 1px solid var(--color-border);
}
.track-icon-wrap[b-7rfn6xkk6f] {
  width: 4rem;
  height: 4rem;
  border-radius: 50%;
  background: var(--color-teal-50);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--space-4);
  color: var(--color-teal-500);
  font-size: 1.5rem;
}
.track-title[b-7rfn6xkk6f] {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--color-text-primary);
  margin-bottom: var(--space-2);
}
.track-subtitle[b-7rfn6xkk6f] {
  color: var(--color-text-muted);
  font-size: 0.9375rem;
  max-width: 24rem;
  margin: 0 auto;
  line-height: 1.5;
}

/* ─── Form ─── */
.track-form[b-7rfn6xkk6f] {
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}
.track-field[b-7rfn6xkk6f] {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}
.track-label[b-7rfn6xkk6f] {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-text-primary);
}
.track-required[b-7rfn6xkk6f] {
  color: var(--color-danger-500);
}
.track-input[b-7rfn6xkk6f] {
  padding: 0.75rem 1rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-size: 0.9375rem;
  color: var(--color-text-primary);
  background: var(--color-white);
  transition: border-color 0.2s, box-shadow 0.2s;
}
.track-input:focus[b-7rfn6xkk6f] {
  outline: none;
  border-color: var(--color-teal-400);
  box-shadow: 0 0 0 3px rgba(74,155,142,0.15);
}
.track-input-error[b-7rfn6xkk6f] {
  border-color: var(--color-danger-400) !important;
  box-shadow: 0 0 0 3px rgba(248,113,113,0.15) !important;
}
.track-field-error[b-7rfn6xkk6f] {
  display: block;
  margin-top: 0.375rem;
  font-size: 0.75rem;
  color: var(--color-danger-600);
}
.track-hint[b-7rfn6xkk6f] {
  font-size: 0.8125rem;
  color: var(--color-text-muted);
}

/* ─── Help Box ─── */
.track-help-box[b-7rfn6xkk6f] {
  background: var(--color-teal-50);
  border: 1px solid var(--color-teal-100);
  border-radius: var(--radius-sm);
  padding: var(--space-4) var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.track-help-title[b-7rfn6xkk6f] {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-teal-700);
}
.track-help-title i[b-7rfn6xkk6f] {
  color: var(--color-teal-500);
  font-size: 1rem;
}
.track-help-text[b-7rfn6xkk6f] {
  font-size: 0.8125rem;
  color: var(--color-text-secondary);
  line-height: 1.5;
  margin: 0;
}

/* ─── OR Divider ─── */
.track-or-divider[b-7rfn6xkk6f] {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin: -0.25rem 0;
}
.track-or-line[b-7rfn6xkk6f] {
  flex: 1;
  height: 1px;
  background: var(--color-border);
}
.track-or-text[b-7rfn6xkk6f] {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* ─── Submit Button ─── */
.track-submit-btn[b-7rfn6xkk6f] {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  width: 100%;
  padding: 0.875rem 1.5rem;
  background: var(--color-teal-500);
  color: var(--color-white);
  border: none;
  border-radius: var(--radius-sm);
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s, transform 0.1s;
}
.track-submit-btn:hover:not(:disabled)[b-7rfn6xkk6f] {
  background: var(--color-teal-600);
}
.track-submit-btn:disabled[b-7rfn6xkk6f] {
  opacity: 0.7;
  cursor: not-allowed;
}

/* ─── Error Banner ─── */
.track-error-banner[b-7rfn6xkk6f] {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  background: var(--color-danger-50);
  border: 1px solid var(--color-danger-200);
  border-radius: var(--radius-sm);
  color: var(--color-danger-800);
  font-size: 0.9375rem;
  margin-bottom: var(--space-4);
}
.track-error-banner i[b-7rfn6xkk6f] {
  color: var(--color-danger-500);
  font-size: 1.125rem;
}

/* ─── Result Card ─── */
.track-result-header[b-7rfn6xkk6f] {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-6);
  border-bottom: 1px solid var(--color-border);
  flex-wrap: wrap;
}
.track-result-icon[b-7rfn6xkk6f] {
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  flex-shrink: 0;
}
.track-result-meta[b-7rfn6xkk6f] {
  flex: 1;
  min-width: 0;
}
.track-result-number[b-7rfn6xkk6f] {
  font-weight: 700;
  font-size: 1.125rem;
  color: var(--color-text-primary);
}
.track-result-date[b-7rfn6xkk6f] {
  font-size: 0.875rem;
  color: var(--color-text-muted);
}
.track-status-badge[b-7rfn6xkk6f] {
  padding: 0.375rem 0.875rem;
  border-radius: 9999px;
  font-size: 0.8125rem;
  font-weight: 600;
  text-transform: capitalize;
  white-space: nowrap;
}

/* Status colors — using design tokens */
.status-review[b-7rfn6xkk6f]    { background: var(--color-teal-50); color: var(--color-teal-700); }
.status-review i[b-7rfn6xkk6f]  { background: var(--color-teal-100); color: var(--color-teal-500); }
.status-approved[b-7rfn6xkk6f]  { background: var(--color-success-50); color: var(--color-success-700); }
.status-approved i[b-7rfn6xkk6f]{ background: var(--color-success-100); color: var(--color-success-500); }
.status-enrolled[b-7rfn6xkk6f]  { background: var(--color-success-50); color: var(--color-success-700); }
.status-enrolled i[b-7rfn6xkk6f]{ background: var(--color-success-100); color: var(--color-success-500); }
.status-rejected[b-7rfn6xkk6f]  { background: var(--color-danger-50); color: var(--color-danger-700); }
.status-rejected i[b-7rfn6xkk6f]{ background: var(--color-danger-100); color: var(--color-danger-500); }
.status-waitlist[b-7rfn6xkk6f]  { background: var(--color-orange-50); color: var(--color-orange-700); }
.status-waitlist i[b-7rfn6xkk6f]{ background: var(--color-orange-100); color: var(--color-orange-500); }
.status-default[b-7rfn6xkk6f]   { background: var(--color-gray-100); color: var(--color-gray-600); }
.status-default i[b-7rfn6xkk6f] { background: var(--color-gray-200); color: var(--color-gray-500); }

/* ─── Result Body ─── */
.track-result-body[b-7rfn6xkk6f] {
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}
.track-student-info[b-7rfn6xkk6f] {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.track-info-row[b-7rfn6xkk6f] {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
}
.track-info-label[b-7rfn6xkk6f] {
  width: 5rem;
  flex-shrink: 0;
  font-size: 0.8125rem;
  color: var(--color-text-muted);
  font-weight: 500;
}
.track-info-value[b-7rfn6xkk6f] {
  font-size: 0.9375rem;
  color: var(--color-text-primary);
  font-weight: 600;
}

/* ─── Next Step ─── */
.track-next-step[b-7rfn6xkk6f] {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  background: var(--color-teal-50);
  border: 1px solid var(--color-teal-100);
  border-radius: var(--radius-sm);
  color: var(--color-teal-700);
  font-size: 0.9375rem;
  line-height: 1.5;
}
.track-next-step i[b-7rfn6xkk6f] {
  color: var(--color-orange-500);
  font-size: 1.125rem;
  margin-top: 0.125rem;
  flex-shrink: 0;
}

/* ─── Scores ─── */
.track-scores[b-7rfn6xkk6f] {
  border-top: 1px solid var(--color-border);
  padding-top: var(--space-5);
}
.track-score-title[b-7rfn6xkk6f] {
  font-size: 0.8125rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-muted);
  margin-bottom: var(--space-3);
}
.track-score-grid[b-7rfn6xkk6f] {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(5rem, 1fr));
  gap: var(--space-3);
}
.track-score-box[b-7rfn6xkk6f] {
  background: var(--color-gray-50);
  border-radius: var(--radius-sm);
  padding: 0.875rem;
  text-align: center;
  border: 1px solid var(--color-border);
}
.track-score-label[b-7rfn6xkk6f] {
  display: block;
  font-size: 0.75rem;
  color: var(--color-text-muted);
  font-weight: 500;
  margin-bottom: var(--space-1);
}
.track-score-value[b-7rfn6xkk6f] {
  display: block;
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--color-text-primary);
}
.track-score-rank .track-score-value[b-7rfn6xkk6f] {
  color: var(--color-teal-500);
}

/* ─── Waitlist / Rejection / Enrolled Banners ─── */
.track-waitlist-banner[b-7rfn6xkk6f],
.track-rejection-banner[b-7rfn6xkk6f],
.track-enrolled-banner[b-7rfn6xkk6f] {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-sm);
  font-size: 0.9375rem;
  line-height: 1.5;
}
.track-waitlist-banner[b-7rfn6xkk6f] {
  background: var(--color-orange-50);
  border: 1px solid var(--color-orange-200);
  color: var(--color-orange-800);
}
.track-rejection-banner[b-7rfn6xkk6f] {
  background: var(--color-danger-50);
  border: 1px solid var(--color-danger-200);
  color: var(--color-danger-800);
}
.track-enrolled-banner[b-7rfn6xkk6f] {
  background: var(--color-success-50);
  border: 1px solid var(--color-success-200);
  color: var(--color-success-800);
}
.track-waitlist-banner i[b-7rfn6xkk6f] { color: var(--color-orange-500); }
.track-rejection-banner i[b-7rfn6xkk6f] { color: var(--color-danger-500); }
.track-enrolled-banner i[b-7rfn6xkk6f] { color: var(--color-success-500); }

/* ─── Fee Status ─── */
.track-fee-status[b-7rfn6xkk6f] {
  border-top: 1px solid var(--color-border);
  padding-top: var(--space-5);
}
.track-fee-title[b-7rfn6xkk6f] {
  font-size: 0.8125rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-muted);
  margin-bottom: var(--space-3);
}
.track-fee-grid[b-7rfn6xkk6f] {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-3);
}
.track-fee-item[b-7rfn6xkk6f] {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0.75rem;
  border-radius: var(--radius-sm);
  font-size: 0.8125rem;
  font-weight: 500;
  background: var(--color-gray-50);
  color: var(--color-text-muted);
}
.track-fee-item.paid[b-7rfn6xkk6f] {
  background: var(--color-success-50);
  color: var(--color-success-800);
}
.track-fee-item.paid i[b-7rfn6xkk6f] {
  color: var(--color-success-500);
}

/* ─── Footer Actions ─── */
.track-result-footer[b-7rfn6xkk6f] {
  padding: var(--space-4) var(--space-6);
  border-top: 1px solid var(--color-border);
  display: flex;
  justify-content: center;
}
.track-back-btn[b-7rfn6xkk6f] {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0.625rem 1.25rem;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  color: var(--color-text-muted);
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
}
.track-back-btn:hover[b-7rfn6xkk6f] {
  background: var(--color-gray-50);
  color: var(--color-text-primary);
}

/* ─── Page Footer ─── */
.track-footer[b-7rfn6xkk6f] {
  text-align: center;
  padding: var(--space-8) var(--space-4);
  color: var(--color-text-muted);
  font-size: 0.875rem;
}
.track-footer a[b-7rfn6xkk6f] {
  color: var(--color-teal-500);
  text-decoration: none;
  font-weight: 500;
}
.track-footer a:hover[b-7rfn6xkk6f] {
  text-decoration: underline;
}

/* ─── Mobile ─── */
@media (max-width: 640px) {
  .track-fee-grid[b-7rfn6xkk6f] {
    grid-template-columns: 1fr;
  }
  .track-score-grid[b-7rfn6xkk6f] {
    grid-template-columns: repeat(2, 1fr);
  }
  .track-result-header[b-7rfn6xkk6f] {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-3);
  }
  .track-status-badge[b-7rfn6xkk6f] {
    align-self: flex-start;
  }
}

/* ─── 6-Stage Pipeline Timeline ─── */
.track-pipeline[b-7rfn6xkk6f] {
  border-top: 1px solid var(--color-border);
  padding-top: var(--space-5);
}
.track-pipeline-title[b-7rfn6xkk6f] {
  font-size: 0.8125rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-muted);
  margin-bottom: var(--space-4);
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.track-pipeline-steps[b-7rfn6xkk6f] {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 0;
  position: relative;
}
.track-pipeline-step[b-7rfn6xkk6f] {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  position: relative;
  padding: 0 0.25rem;
}
.track-pipeline-dot[b-7rfn6xkk6f] {
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  background: var(--color-gray-100);
  color: var(--color-gray-400);
  border: 2px solid var(--color-gray-200);
  position: relative;
  z-index: 2;
  transition: all 0.2s;
}
.track-pipeline-dot.reached[b-7rfn6xkk6f] {
  background: var(--color-success-500);
  border-color: var(--color-success-500);
  color: var(--color-white);
}
.track-pipeline-dot.rejected[b-7rfn6xkk6f] {
  background: var(--color-danger-500);
  border-color: var(--color-danger-500);
  color: var(--color-white);
}
.track-pipeline-label[b-7rfn6xkk6f] {
  margin-top: var(--space-2);
  font-size: 0.6875rem;
  color: var(--color-text-muted);
  font-weight: 600;
  line-height: 1.3;
}
.track-pipeline-step.reached .track-pipeline-label[b-7rfn6xkk6f] {
  color: var(--color-text-primary);
}
.track-pipeline-line[b-7rfn6xkk6f] {
  position: absolute;
  top: 1rem;
  left: -50%;
  right: 50%;
  height: 2px;
  background: var(--color-gray-200);
  z-index: 1;
}
.track-pipeline-line.reached[b-7rfn6xkk6f] {
  background: var(--color-success-500);
}

/* ─── Per-Stage Email History ─── */
.track-email-history[b-7rfn6xkk6f] {
  border-top: 1px solid var(--color-border);
  padding-top: var(--space-5);
}
.track-email-history-title[b-7rfn6xkk6f] {
  font-size: 0.8125rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-muted);
  margin-bottom: var(--space-3);
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.track-email-list[b-7rfn6xkk6f] {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.track-email-row[b-7rfn6xkk6f] {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: 0.625rem 0.875rem;
  background: var(--color-gray-50);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-size: 0.8125rem;
}
.track-email-icon[b-7rfn6xkk6f] {
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  flex-shrink: 0;
}
.track-email-icon.sent[b-7rfn6xkk6f] {
  background: var(--color-success-100);
  color: var(--color-success-700);
}
.track-email-icon.failed[b-7rfn6xkk6f] {
  background: var(--color-danger-100);
  color: var(--color-danger-700);
}
.track-email-icon.pending[b-7rfn6xkk6f] {
  background: var(--color-gray-200);
  color: var(--color-gray-500);
}
.track-email-stage[b-7rfn6xkk6f] {
  font-weight: 600;
  color: var(--color-text-primary);
  min-width: 7.5rem;
}
.track-email-status[b-7rfn6xkk6f] {
  flex: 1;
  color: var(--color-text-muted);
}
.track-email-status.sent[b-7rfn6xkk6f] {
  color: var(--color-success-700);
}
.track-email-status.failed[b-7rfn6xkk6f] {
  color: var(--color-danger-700);
}
.track-email-time[b-7rfn6xkk6f] {
  font-size: 0.75rem;
  color: var(--color-text-muted);
  white-space: nowrap;
}

@media (max-width: 640px) {
  .track-pipeline-steps[b-7rfn6xkk6f] {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-4) 0.5rem;
  }
  .track-pipeline-line[b-7rfn6xkk6f] {
    display: none;
  }
  .track-email-row[b-7rfn6xkk6f] {
    flex-wrap: wrap;
  }
  .track-email-stage[b-7rfn6xkk6f] {
    min-width: 5.5rem;
  }
}
/* /Pages/Librarian/Catalog/Index.razor.rz.scp.css */

/* /Pages/Librarian/Dashboard.razor.rz.scp.css */
/* Styles handled via Tailwind utility classes in markup */
/* /Pages/Librarian/Inbox/Index.razor.rz.scp.css */
/* Styles handled via Tailwind utility classes in markup */
/* /Pages/Librarian/Issue/Index.razor.rz.scp.css */

/* /Pages/Librarian/Members/Index.razor.rz.scp.css */

/* /Pages/Librarian/NewArrivals/Index.razor.rz.scp.css */

/* /Pages/Librarian/Overdue/Index.razor.rz.scp.css */

/* /Pages/Librarian/Reports/Index.razor.rz.scp.css */

/* /Pages/Librarian/Return/Index.razor.rz.scp.css */

/* /Pages/Librarian/Settings/Index.razor.rz.scp.css */

/* /Pages/LimitedRole/Dashboard.razor.rz.scp.css */
.limited-dashboard[b-p7asb5q1o9] {
    align-items: center;
    background: var(--color-white);
    border: 1px solid var(--color-neutral-200);
    border-radius: var(--radius-lg);
    display: flex;
    flex-direction: column;
    margin: 0 auto;
    max-width: 42rem;
    padding: var(--spacing-8);
    text-align: center;
}

.limited-dashboard-icon[b-p7asb5q1o9] {
    align-items: center;
    background: var(--color-primary-50);
    border-radius: var(--radius-full);
    color: var(--color-primary-600);
    display: flex;
    font-size: var(--font-size-2xl);
    height: 4rem;
    justify-content: center;
    margin-bottom: var(--spacing-4);
    width: 4rem;
}

.limited-dashboard-eyebrow[b-p7asb5q1o9] {
    color: var(--color-primary-700);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    margin: 0 0 var(--spacing-2);
}

.limited-dashboard h1[b-p7asb5q1o9] {
    font-size: var(--font-size-2xl);
    margin: 0 0 var(--spacing-3);
}

.limited-dashboard-message[b-p7asb5q1o9] {
    color: var(--color-text-secondary);
    line-height: var(--line-height-relaxed);
    margin: 0;
    max-width: 34rem;
}

.limited-dashboard-actions[b-p7asb5q1o9] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-3);
    justify-content: center;
    margin-top: var(--spacing-6);
}

.limited-dashboard-actions a[b-p7asb5q1o9] {
    align-items: center;
    border: 1px solid var(--color-primary-500);
    border-radius: var(--radius-md);
    color: var(--color-primary-700);
    display: inline-flex;
    gap: var(--spacing-2);
    justify-content: center;
    min-height: 2.75rem;
    padding: var(--spacing-2) var(--spacing-4);
    text-decoration: none;
}

.limited-dashboard-actions a:hover[b-p7asb5q1o9],
.limited-dashboard-actions a:focus-visible[b-p7asb5q1o9] {
    background: var(--color-primary-50);
}

@media (max-width: 767px) {
    .limited-dashboard[b-p7asb5q1o9] {
        padding: var(--spacing-6) var(--spacing-4);
    }

    .limited-dashboard-actions[b-p7asb5q1o9],
    .limited-dashboard-actions a[b-p7asb5q1o9] {
        width: 100%;
    }
}
/* /Pages/Logout.razor.rz.scp.css */
/* ── Page shell ─────────────────────────────────────────── */
.logout-page[b-jami6rzcx2] {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2rem 1rem;
    background: linear-gradient(135deg, #eff6ff 0%, #eef2ff 50%, #f0f9ff 100%);
}

/* ── Logo ────────────────────────────────────────────────── */
.logout-logo[b-jami6rzcx2] {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    margin-bottom: 2rem;
}

.logout-logo-icon[b-jami6rzcx2] {
    width: 2.5rem;
    height: 2.5rem;
    background: linear-gradient(135deg, #2563eb, #4f46e5);
    border-radius: 0.625rem;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1rem;
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.35);
}

.logout-logo-text[b-jami6rzcx2] {
    font-size: 1.25rem;
    font-weight: 700;
    color: #1e293b;
    letter-spacing: -0.01em;
}

/* ── Card ────────────────────────────────────────────────── */
.logout-card[b-jami6rzcx2] {
    width: 100%;
    max-width: 400px;
    background: white;
    border-radius: 1.25rem;
    box-shadow: 0 20px 60px -10px rgba(0, 0, 0, 0.12), 0 4px 16px -4px rgba(0, 0, 0, 0.06);
    padding: 2.5rem 2rem;
    text-align: center;
}

/* ── Phase container ──────────────────────────────────────── */
.logout-phase[b-jami6rzcx2] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
}

/* ── Spinner (Phase 1) ────────────────────────────────────── */
.logout-spinner[b-jami6rzcx2] {
    width: 4rem;
    height: 4rem;
    margin-bottom: 1rem;
}

.spinner-ring[b-jami6rzcx2] {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 4px solid #e2e8f0;
    border-top-color: #2563eb;
    animation: spin-b-jami6rzcx2 0.8s linear infinite;
}

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

/* ── Check icon (Phase 2) ─────────────────────────────────── */
.logout-check[b-jami6rzcx2] {
    width: 4rem;
    height: 4rem;
    border-radius: 50%;
    background: linear-gradient(135deg, #22c55e, #16a34a);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.5rem;
    margin-bottom: 1rem;
    box-shadow: 0 6px 20px rgba(34, 197, 94, 0.4);
    animation: popIn-b-jami6rzcx2 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

@keyframes popIn-b-jami6rzcx2 {
    from { transform: scale(0); opacity: 0; }
    to   { transform: scale(1); opacity: 1; }
}

/* ── Typography ───────────────────────────────────────────── */
.logout-title[b-jami6rzcx2] {
    font-size: 1.25rem;
    font-weight: 700;
    color: #0f172a;
    margin: 0.25rem 0;
}

.logout-subtitle[b-jami6rzcx2] {
    font-size: 0.9rem;
    color: #64748b;
    margin: 0 0 1.25rem;
}

/* ── Countdown bar ────────────────────────────────────────── */
.logout-countdown[b-jami6rzcx2] {
    width: 100%;
    margin-bottom: 1.5rem;
}

.countdown-bar-track[b-jami6rzcx2] {
    width: 100%;
    height: 4px;
    background: #e2e8f0;
    border-radius: 999px;
    overflow: hidden;
    margin-bottom: 0.5rem;
}

.countdown-bar[b-jami6rzcx2] {
    height: 100%;
    width: 100%;
    background: linear-gradient(90deg, #2563eb, #6366f1);
    border-radius: 999px;
    transform-origin: left;
    animation: drainBar-b-jami6rzcx2 linear forwards;
}

@keyframes drainBar-b-jami6rzcx2 {
    from { transform: scaleX(1); }
    to   { transform: scaleX(0); }
}

.countdown-text[b-jami6rzcx2] {
    font-size: 0.8rem;
    color: #94a3b8;
    margin: 0;
}

/* ── Back to Login button ─────────────────────────────────── */
.logout-back-btn[b-jami6rzcx2] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    background: #2563eb;
    color: white;
    border-radius: 0.75rem;
    font-size: 0.9rem;
    font-weight: 600;
    text-decoration: none;
    transition: background 0.15s, transform 0.15s, box-shadow 0.15s;
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3);
}

.logout-back-btn:hover[b-jami6rzcx2] {
    background: #1d4ed8;
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(37, 99, 235, 0.4);
    color: white;
    text-decoration: none;
}

/* ── Fade-in transition ───────────────────────────────────── */
.fade-in[b-jami6rzcx2] {
    animation: fadeSlideIn-b-jami6rzcx2 0.35s ease-out forwards;
}

@keyframes fadeSlideIn-b-jami6rzcx2 {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ── Footer ───────────────────────────────────────────────── */
.logout-footer[b-jami6rzcx2] {
    margin-top: 2rem;
    font-size: 0.78rem;
    color: #94a3b8;
}

.footer-link[b-jami6rzcx2] {
    color: #64748b;
    text-decoration: none;
}

.footer-link:hover[b-jami6rzcx2] {
    color: #2563eb;
    text-decoration: underline;
}
/* /Pages/Onboarding/Index.razor.rz.scp.css */
/* ─── Onboarding page — standalone wizard (no sidebar) ─────────────────── */

/* Loading / error / success full-page states */
.onboard-loading[b-gu3e3wofkb] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    gap: 1rem;
    background: #f8fafc;
    color: #64748b;
}

.spinner-ring[b-gu3e3wofkb] {
    width: 48px;
    height: 48px;
    border: 4px solid #e2e8f0;
    border-top-color: #6366f1;
    border-radius: 50%;
    animation: spin-b-gu3e3wofkb 0.8s linear infinite;
}

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

.onboard-error-page[b-gu3e3wofkb],
.onboard-success-page[b-gu3e3wofkb] {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f8fafc;
    padding: 2rem;
}

.error-card[b-gu3e3wofkb],
.success-card[b-gu3e3wofkb] {
    background: #fff;
    border-radius: 16px;
    padding: 3rem 2.5rem;
    max-width: 480px;
    width: 100%;
    text-align: center;
    box-shadow: 0 8px 32px rgba(0,0,0,.08);
}

.error-icon[b-gu3e3wofkb],
.success-icon[b-gu3e3wofkb] {
    font-size: 3rem;
    margin-bottom: 1rem;
}

.error-card h2[b-gu3e3wofkb] {
    color: #dc2626;
    margin-bottom: .75rem;
}

.success-card h1[b-gu3e3wofkb] {
    color: #059669;
    margin-bottom: .75rem;
}

.support-hint[b-gu3e3wofkb] {
    margin-top: 1.5rem;
    color: #64748b;
    font-size: .875rem;
}

.success-msg[b-gu3e3wofkb] {
    font-size: 1.1rem;
    color: #334155;
    margin-bottom: 1.5rem;
}

/* ─── Next-steps cards ──────────────────────────────────────────────────── */
.next-steps[b-gu3e3wofkb] {
    display: flex;
    flex-direction: column;
    gap: .75rem;
    margin-bottom: 1.75rem;
    text-align: left;
}

.next-step-card[b-gu3e3wofkb] {
    display: flex;
    align-items: flex-start;
    gap: .875rem;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: .875rem 1rem;
}

.ns-icon[b-gu3e3wofkb] {
    font-size: 1.4rem;
    flex-shrink: 0;
    line-height: 1;
    margin-top: .1rem;
}

.ns-content[b-gu3e3wofkb] {
    display: flex;
    flex-direction: column;
    gap: .2rem;
}

.ns-content strong[b-gu3e3wofkb] {
    font-size: .9rem;
    color: #1e293b;
}

.ns-content span[b-gu3e3wofkb] {
    font-size: .82rem;
    color: #64748b;
}

.ns-content a[b-gu3e3wofkb] {
    color: #25d366;
    font-weight: 600;
    text-decoration: none;
}

/* ─── Emails-sent notice ─────────────────────────────────────────────────── */
.emails-sent-notice[b-gu3e3wofkb] {
    display: flex;
    align-items: flex-start;
    gap: .875rem;
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    border-radius: 10px;
    padding: 1rem 1.1rem;
    margin-bottom: 1.5rem;
    text-align: left;
}

.esn-icon[b-gu3e3wofkb] {
    font-size: 1.6rem;
    flex-shrink: 0;
    margin-top: .1rem;
}

.esn-body[b-gu3e3wofkb] {
    display: flex;
    flex-direction: column;
    gap: .3rem;
}

.esn-body strong[b-gu3e3wofkb] {
    font-size: .9rem;
    color: #1e40af;
}

.esn-body > span[b-gu3e3wofkb] {
    font-size: .82rem;
    color: #3b82f6;
}

.esn-body ul[b-gu3e3wofkb] {
    margin: .3rem 0 .3rem 1rem;
    padding: 0;
    font-size: .83rem;
    color: #1e3a8a;
    line-height: 1.7;
}

.esn-sub[b-gu3e3wofkb] {
    font-size: .78rem !important;
    color: #60a5fa !important;
    font-style: italic;
}

.btn-goto-login[b-gu3e3wofkb] {
    display: inline-block;
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    color: #fff;
    padding: .75rem 2rem;
    border-radius: 10px;
    text-decoration: none;
    font-weight: 600;
    transition: opacity .2s;
}
.btn-goto-login:hover[b-gu3e3wofkb] { opacity: .9; }

/* ─── Inline field validation ────────────────────────────────────────────── */
.field-error[b-gu3e3wofkb] {
    display: block;
    color: #dc2626;
    font-size: .78rem;
    margin-top: .3rem;
    font-weight: 500;
}

.form-input.is-error[b-gu3e3wofkb],
.form-select.is-error[b-gu3e3wofkb] {
    border-color: #fca5a5;
    background: #fff5f5;
    box-shadow: 0 0 0 3px rgba(220, 38, 38, .1);
}

/* ─── Main wizard wrapper ────────────────────────────────────────────────── */
*[b-gu3e3wofkb] { box-sizing: border-box; }

html[b-gu3e3wofkb], body[b-gu3e3wofkb] {
    margin: 0;
    padding: 0;
    background: #f1f5f9;
}

.onboard-wrapper[b-gu3e3wofkb] {
    max-width: 760px;
    margin: 0 auto;
    padding: 2rem 1rem 4rem;
}

.onboard-header[b-gu3e3wofkb] {
    text-align: center;
    margin-bottom: 2rem;
}

.brand-logo[b-gu3e3wofkb] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    font-size: 1.5rem;
    font-weight: 700;
    color: #6366f1;
}

.brand-icon[b-gu3e3wofkb] { font-size: 1.75rem; }

.header-sub[b-gu3e3wofkb] {
    color: #64748b;
    font-size: .9rem;
    margin-top: .25rem;
}

/* ─── Stepper ────────────────────────────────────────────────────────────── */
.stepper[b-gu3e3wofkb] {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 2rem;
    gap: 0;
}

.step[b-gu3e3wofkb] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .4rem;
    min-width: 80px;
}

.step-circle[b-gu3e3wofkb] {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: .9rem;
    background: #e2e8f0;
    color: #94a3b8;
    transition: all .3s;
}

.step.active .step-circle[b-gu3e3wofkb] {
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    color: #fff;
    box-shadow: 0 0 0 4px rgba(99,102,241,.15);
}

.step.done .step-circle[b-gu3e3wofkb] {
    background: #059669;
    color: #fff;
}

.step-label[b-gu3e3wofkb] {
    font-size: .75rem;
    color: #94a3b8;
    font-weight: 500;
}
.step.active .step-label[b-gu3e3wofkb] { color: #6366f1; font-weight: 700; }
.step.done .step-label[b-gu3e3wofkb] { color: #059669; }

.step-line[b-gu3e3wofkb] {
    flex: 1;
    height: 2px;
    background: #e2e8f0;
    min-width: 40px;
    transition: background .3s;
    margin-bottom: 22px;
}
.step-line.done[b-gu3e3wofkb] { background: #059669; }

/* ─── Card ───────────────────────────────────────────────────────────────── */
.onboard-card[b-gu3e3wofkb] {
    background: #fff;
    border-radius: 16px;
    padding: 2.5rem;
    box-shadow: 0 4px 24px rgba(0,0,0,.06);
}

.step-title[b-gu3e3wofkb] {
    font-size: 1.4rem;
    font-weight: 700;
    color: #1e293b;
    margin: 0 0 .4rem;
}

.step-sub[b-gu3e3wofkb] {
    color: #64748b;
    font-size: .9rem;
    margin-bottom: 1.75rem;
}

.step-error[b-gu3e3wofkb] {
    background: #fef2f2;
    color: #dc2626;
    border: 1px solid #fecaca;
    padding: .75rem 1rem;
    border-radius: 8px;
    margin-bottom: 1rem;
    font-size: .9rem;
}

/* ─── Form ───────────────────────────────────────────────────────────────── */
.form-grid[b-gu3e3wofkb] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem 1.5rem;
    margin-bottom: 2rem;
}

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

.form-group.full-width[b-gu3e3wofkb] { grid-column: 1 / -1; }

.form-group label[b-gu3e3wofkb] {
    font-size: .85rem;
    font-weight: 600;
    color: #374151;
}

.required[b-gu3e3wofkb] { color: #ef4444; }

.form-input[b-gu3e3wofkb],
.form-select[b-gu3e3wofkb] {
    border: 1.5px solid #e5e7eb;
    border-radius: 8px;
    padding: .6rem .85rem;
    font-size: .9rem;
    color: #1e293b;
    transition: border-color .2s, box-shadow .2s;
    width: 100%;
    background: #fff;
}

.form-input:focus[b-gu3e3wofkb],
.form-select:focus[b-gu3e3wofkb] {
    outline: none;
    border-color: #6366f1;
    box-shadow: 0 0 0 3px rgba(99,102,241,.15);
}

.form-input:disabled[b-gu3e3wofkb] {
    background: #f9fafb;
    color: #94a3b8;
}

.form-hint[b-gu3e3wofkb] {
    font-size: .75rem;
    color: #94a3b8;
}

/* ─── UDISE ──────────────────────────────────────────────────────────────── */
.udise-section[b-gu3e3wofkb] { border: 1.5px dashed #e2e8f0; border-radius: 12px; padding: 1.25rem; }

.udise-label[b-gu3e3wofkb] {
    font-size: .85rem;
    font-weight: 600;
    color: #374151;
    display: block;
    margin-bottom: .5rem;
}

.udise-row[b-gu3e3wofkb] { margin-bottom: .75rem; }

.udise-input[b-gu3e3wofkb] { max-width: 220px; letter-spacing: .08em; font-variant-numeric: tabular-nums; }

.udise-skip-label[b-gu3e3wofkb] {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-size: .875rem;
    color: #374151;
    cursor: pointer;
}

.skip-checkbox[b-gu3e3wofkb] { width: 16px; height: 16px; cursor: pointer; accent-color: #6366f1; }

.udise-warning[b-gu3e3wofkb] {
    margin-top: .75rem;
    background: #fffbeb;
    border: 1px solid #fbbf24;
    color: #92400e;
    padding: .6rem 1rem;
    border-radius: 8px;
    font-size: .85rem;
}

/* ─── Buttons ────────────────────────────────────────────────────────────── */
.step-actions[b-gu3e3wofkb] {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.btn-ghost[b-gu3e3wofkb] {
    background: transparent;
    border: 1.5px solid #e5e7eb;
    color: #374151;
    padding: .65rem 1.25rem;
    border-radius: 10px;
    font-weight: 500;
    font-size: .9rem;
    cursor: pointer;
    transition: background .2s, border-color .2s;
}
.btn-ghost:hover[b-gu3e3wofkb] { background: #f8fafc; border-color: #6366f1; color: #6366f1; }
.btn-ghost:disabled[b-gu3e3wofkb] { opacity: .5; cursor: not-allowed; }

.btn-submit[b-gu3e3wofkb] {
    background: linear-gradient(135deg, #059669, #10b981);
    color: #fff;
    border: none;
    padding: .75rem 2.25rem;
    border-radius: 10px;
    font-weight: 700;
    font-size: 1rem;
    cursor: pointer;
    transition: opacity .2s;
}
.btn-submit:hover[b-gu3e3wofkb] { opacity: .9; }
.btn-submit:disabled[b-gu3e3wofkb] { opacity: .6; cursor: not-allowed; }

.submitting-text[b-gu3e3wofkb] { display: inline-flex; align-items: center; gap: .5rem; }

/* ─── Review ─────────────────────────────────────────────────────────────── */
.review-section[b-gu3e3wofkb] {
    border: 1.5px solid #e5e7eb;
    border-radius: 12px;
    padding: 1.25rem 1.5rem;
    margin-bottom: 1.25rem;
}

.review-heading[b-gu3e3wofkb] {
    font-weight: 700;
    color: #6366f1;
    font-size: .8rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    margin-bottom: .75rem;
}

.review-grid[b-gu3e3wofkb] {
    display: flex;
    flex-direction: column;
    gap: .6rem;
}

.review-item[b-gu3e3wofkb] {
    display: flex;
    justify-content: space-between;
    font-size: .9rem;
    gap: 1rem;
}

.review-item span[b-gu3e3wofkb] { color: #64748b; flex-shrink: 0; }
.review-item strong[b-gu3e3wofkb] { color: #1e293b; text-align: right; word-break: break-word; }

.tag-pending[b-gu3e3wofkb] {
    background: #fffbeb;
    border: 1px solid #fbbf24;
    color: #92400e;
    padding: .15rem .5rem;
    border-radius: 4px;
    font-size: .8rem;
    font-weight: 600;
}

/* ─── Responsive ─────────────────────────────────────────────────────────── */
@media (max-width: 600px) {
    .onboard-card[b-gu3e3wofkb] { padding: 1.5rem 1rem; }
    .form-grid[b-gu3e3wofkb] { grid-template-columns: 1fr; }
    .stepper[b-gu3e3wofkb] { gap: 0; }
    .step-line[b-gu3e3wofkb] { min-width: 20px; }
    .step[b-gu3e3wofkb] { min-width: 60px; }
    .step-label[b-gu3e3wofkb] { font-size: .65rem; }
    .step-actions[b-gu3e3wofkb] { flex-direction: column; align-items: stretch; }
    
}
/* /Pages/Parent/AdmissionDetail.razor.rz.scp.css */
/* AdmissionDetail.razor.css — co-located styles for parent admission detail page */

.card[b-cu7nogvyiz] {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 0.75rem;
    padding: 1.25rem;
    box-shadow: 0 1px 3px rgba(0,0,0,.06);
}

.card-header[b-cu7nogvyiz] {
    font-size: 0.95rem;
    font-weight: 600;
    color: #1f2937;
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid #e0f2f1;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.card-header i[b-cu7nogvyiz] {
    color: #4A9B8E;
    font-size: 0.85rem;
}

.field-group[b-cu7nogvyiz] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.field-label[b-cu7nogvyiz] {
    font-size: 0.65rem;
    font-weight: 600;
    color: #9ca3af;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.field-value[b-cu7nogvyiz] {
    font-size: 0.875rem;
    color: #1f2937;
}

/* Fee table */
.fee-table[b-cu7nogvyiz] {
    width: 100%;
    font-size: 0.85rem;
    border-collapse: collapse;
    margin-top: 0.25rem;
}

.fee-table thead tr[b-cu7nogvyiz] {
    color: #6b7280;
    font-size: 0.7rem;
    text-transform: uppercase;
    border-bottom: 1px solid #e5e7eb;
}

.fee-table thead th[b-cu7nogvyiz] {
    padding: 0.4rem 0.5rem;
    font-weight: 600;
    text-align: left;
}

.fee-table tbody tr[b-cu7nogvyiz] {
    border-bottom: 1px solid #f3f4f6;
}

.fee-table tbody tr:hover[b-cu7nogvyiz] {
    background: #f9fafb;
}

.fee-table tbody td[b-cu7nogvyiz] {
    padding: 0.45rem 0.5rem;
    color: #374151;
}

.fee-table .total-row[b-cu7nogvyiz] {
    border-top: 2px solid var(--color-teal-100);
    background: rgba(204,251,241,.25);
    color: var(--color-teal-700);
}

.fee-table .total-row td[b-cu7nogvyiz] {
    padding: 0.55rem 0.5rem;
    color: var(--color-teal-700);
}

.fee-table .optional-total-row td[b-cu7nogvyiz] {
    padding: 0.45rem 0.5rem;
    color: #6b7280;
    background: #f9fafb;
}

.optional-badge[b-cu7nogvyiz] {
    font-size: 0.6rem;
    background: #f3f4f6;
    color: #6b7280;
    padding: 1px 5px;
    border-radius: 10px;
    margin-left: 4px;
    vertical-align: middle;
}

/* Declaration box */
.declaration-box[b-cu7nogvyiz] {
    margin-top: 1.25rem;
    padding: 1rem;
    background: #fffbeb;
    border: 1px solid #fde68a;
    border-radius: 0.5rem;
}

.accept-btn[b-cu7nogvyiz] {
    margin-top: 0.875rem;
    display: inline-flex;
    align-items: center;
    padding: 0.5rem 1.25rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: #fff;
    background: var(--color-teal-600);
    border: none;
    border-radius: 0.5rem;
    cursor: pointer;
    transition: background 0.15s;
}

.accept-btn:hover:not(:disabled)[b-cu7nogvyiz] {
    background: var(--color-teal-700);
}

.accept-btn:disabled[b-cu7nogvyiz] {
    background: #9ca3af;
    cursor: not-allowed;
}

/* Accepted state */
.declaration-accepted[b-cu7nogvyiz] {
    margin-top: 1rem;
    display: flex;
    align-items: flex-start;
    gap: 0.625rem;
    padding: 0.75rem 1rem;
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    border-radius: 0.5rem;
    font-size: 0.875rem;
    color: #166534;
}

.declaration-accepted i[b-cu7nogvyiz] {
    color: #16a34a;
    margin-top: 2px;
}

/* Info / reject banners */
.info-banner[b-cu7nogvyiz] {
    padding: 0.875rem 1rem;
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    border-radius: 0.5rem;
    font-size: 0.875rem;
    color: #1e40af;
    margin-bottom: 1rem;
}

.reject-banner[b-cu7nogvyiz] {
    padding: 0.875rem 1rem;
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: 0.5rem;
    font-size: 0.875rem;
    color: #991b1b;
    margin-bottom: 1rem;
}
/* /Pages/Parent/Admissions/New.razor.rz.scp.css */
/* Parent/ Admissions/New.razor.css — styles for parent admission form */

.card[b-oflyn5sg2c] {
    background: var(--color-white);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-sm);
}

.card-header[b-oflyn5sg2c] {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--color-gray-800);
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid #e0f2f1;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.card-header i[b-oflyn5sg2c] {
    color: var(--color-teal-500);
}

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

.form-group label[b-oflyn5sg2c] {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--color-gray-700);
}

.form-group.required label[b-oflyn5sg2c]::after {
    content: " *";
    color: var(--color-danger-500);
}

.form-group small[b-oflyn5sg2c] {
    font-size: 0.75rem;
    color: var(--color-gray-500);
}

.form-input[b-oflyn5sg2c], .form-select[b-oflyn5sg2c] {
    height: 40px;
    padding: 0 0.75rem;
    border: 1px solid var(--color-neutral-300);
    border-radius: var(--radius-md);
    font-size: 0.875rem;
    background: var(--color-white);
    color: var(--color-neutral-800);
}

.form-input:focus[b-oflyn5sg2c], .form-select:focus[b-oflyn5sg2c] {
    outline: none;
    border-color: var(--color-primary-500);
    box-shadow: var(--input-focus-ring);
}

.form-input:disabled[b-oflyn5sg2c] {
    background: var(--color-neutral-100);
    cursor: not-allowed;
}

.btn-primary[b-oflyn5sg2c] {
    display: inline-flex;
    align-items: center;
    padding: 0.5rem 1.25rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-white);
    background: var(--color-orange-500);
    border: none;
    border-radius: var(--radius-lg);
    cursor: pointer;
    transition: background var(--transition-fast);
}

.btn-primary:hover:not(:disabled)[b-oflyn5sg2c] {
    background: var(--color-orange-600);
}

.btn-primary:disabled[b-oflyn5sg2c] {
    background: var(--color-gray-400);
    cursor: not-allowed;
}

.btn-outline[b-oflyn5sg2c] {
    display: inline-flex;
    align-items: center;
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--color-gray-700);
    background: transparent;
    border: 1px solid var(--color-gray-300);
    border-radius: var(--radius-lg);
    cursor: pointer;
    transition: background var(--transition-fast);
}

.btn-outline:hover[b-oflyn5sg2c] {
    background: var(--color-gray-100);
}

.space-y-6 > * + *[b-oflyn5sg2c] {
    margin-top: 1.5rem;
}

.text-gray-500[b-oflyn5sg2c] { color: var(--color-gray-500); }
.text-gray-600[b-oflyn5sg2c] { color: var(--color-gray-600); }
/* /Pages/Parent/Announcements/Index.razor.rz.scp.css */
.announcements-page[b-j0ra2tlht6] {
    max-width: 860px;
    margin: 0 auto;
    padding: 1.5rem 1rem;
}

/* Header */
.page-header[b-j0ra2tlht6] {
    margin-bottom: 1.75rem;
}

.page-title[b-j0ra2tlht6] {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--color-text-primary, #111827);
    margin: 0 0 0.25rem;
}

.page-subtitle[b-j0ra2tlht6] {
    font-size: 0.9rem;
    color: var(--color-text-muted, #6b7280);
    margin: 0;
}

/* Search */
.search-bar[b-j0ra2tlht6] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 0.625rem;
    padding: 0.5rem 0.875rem;
    margin-bottom: 1.25rem;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}

.search-icon[b-j0ra2tlht6] { font-size: 1rem; }

.search-input[b-j0ra2tlht6] {
    flex: 1;
    border: none;
    outline: none;
    font-size: 0.9rem;
    color: #374151;
    background: transparent;
}

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

/* Card */
.announcement-card[b-j0ra2tlht6] {
    display: flex;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 0.75rem;
    overflow: hidden;
    box-shadow: 0 1px 4px rgba(0,0,0,0.06);
    transition: box-shadow 0.15s;
}

.announcement-card:hover[b-j0ra2tlht6] {
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.card-accent[b-j0ra2tlht6] {
    width: 5px;
    background: #6b7280;
    flex-shrink: 0;
}

.announcement-card.new .card-accent[b-j0ra2tlht6]    { background: #ef4444; }
.announcement-card.recent .card-accent[b-j0ra2tlht6] { background: #3b82f6; }

.card-body[b-j0ra2tlht6] {
    padding: 1rem 1.25rem;
    flex: 1;
    min-width: 0;
}

.card-header-row[b-j0ra2tlht6] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 0.5rem;
}

.card-title[b-j0ra2tlht6] {
    font-size: 1rem;
    font-weight: 600;
    color: #111827;
    margin: 0;
    line-height: 1.4;
}

.card-date[b-j0ra2tlht6] {
    font-size: 0.78rem;
    color: #9ca3af;
    white-space: nowrap;
    flex-shrink: 0;
}

.card-content[b-j0ra2tlht6] {
    font-size: 0.875rem;
    color: #4b5563;
    line-height: 1.6;
    margin: 0 0 0.75rem;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.card-footer-row[b-j0ra2tlht6] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.card-author[b-j0ra2tlht6] {
    font-size: 0.78rem;
    color: #6b7280;
    font-style: italic;
}

.card-expiry[b-j0ra2tlht6] {
    font-size: 0.75rem;
    color: #f59e0b;
    background: #fef3c7;
    padding: 0.1rem 0.5rem;
    border-radius: 999px;
}

/* States */
.loading-container[b-j0ra2tlht6] {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 4rem 0;
    gap: 1rem;
}

.spinner[b-j0ra2tlht6] {
    width: 36px;
    height: 36px;
    border: 3px solid #e5e7eb;
    border-top-color: #3b82f6;
    border-radius: 50%;
    animation: spin-b-j0ra2tlht6 0.7s linear infinite;
}

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

.loading-text[b-j0ra2tlht6] { color: #6b7280; font-size: 0.875rem; }

.error-card[b-j0ra2tlht6] {
    text-align: center;
    padding: 3rem 1rem;
    background: #fff7f7;
    border: 1px solid #fecaca;
    border-radius: 0.75rem;
}

.error-icon[b-j0ra2tlht6] { font-size: 2rem; display: block; margin-bottom: 0.5rem; }

.btn-retry[b-j0ra2tlht6] {
    margin-top: 1rem;
    padding: 0.5rem 1.25rem;
    background: #3b82f6;
    color: #fff;
    border: none;
    border-radius: 0.5rem;
    cursor: pointer;
    font-size: 0.875rem;
}

.btn-retry:hover[b-j0ra2tlht6] { background: #2563eb; }

.empty-state[b-j0ra2tlht6] {
    text-align: center;
    padding: 4rem 1rem;
    color: #6b7280;
}

.empty-icon[b-j0ra2tlht6] { font-size: 3rem; display: block; margin-bottom: 1rem; }
.empty-state h3[b-j0ra2tlht6] { font-size: 1.1rem; font-weight: 600; color: #374151; margin-bottom: 0.5rem; }
.empty-state p[b-j0ra2tlht6]  { font-size: 0.875rem; }

/* Responsive */
@media (max-width: 640px) {
    .card-header-row[b-j0ra2tlht6] { flex-direction: column; gap: 0.25rem; }
    .card-date[b-j0ra2tlht6] { font-size: 0.72rem; }
}
/* /Pages/Parent/AssignmentDetail.razor.rz.scp.css */
.detail-page[b-zofn2xxkj6] { padding: var(--spacing-lg); max-width: 900px; margin: 0 auto; }

.detail-header[b-zofn2xxkj6] {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-lg);
}
.back-btn[b-zofn2xxkj6] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border);
    background: var(--color-surface);
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}
.back-btn:hover[b-zofn2xxkj6] { background: var(--color-neutral-50); color: var(--color-text-primary); }
.page-title[b-zofn2xxkj6] { font-size: var(--font-size-2xl); font-weight: 700; color: var(--color-text-primary); margin: 0; }

/* Meta card */
.meta-card[b-zofn2xxkj6] {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--spacing-lg);
    margin-bottom: var(--spacing-lg);
}
.meta-header[b-zofn2xxkj6] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-sm);
}
.assignment-title[b-zofn2xxkj6] { font-size: var(--font-size-lg); font-weight: 700; color: var(--color-text-primary); margin: 0 0 var(--spacing-xs); }
.assignment-desc[b-zofn2xxkj6] { font-size: var(--font-size-sm); color: var(--color-text-secondary); margin: 0 0 var(--spacing-md); line-height: 1.5; }
.meta-row[b-zofn2xxkj6] { display: flex; flex-wrap: wrap; gap: var(--spacing-md); font-size: var(--font-size-sm); color: var(--color-text-secondary); }
.meta-row span[b-zofn2xxkj6] { display: inline-flex; align-items: center; gap: 6px; }
.meta-row i[b-zofn2xxkj6] { color: var(--color-primary-600); }
.submitted-info[b-zofn2xxkj6] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: var(--spacing-sm);
    padding: 6px 12px;
    background: var(--color-success-50);
    border: 1px solid var(--color-success-200);
    border-radius: var(--radius-md);
    color: var(--color-success-700);
    font-size: var(--font-size-sm);
    font-weight: 500;
}
.status-pill[b-zofn2xxkj6] {
    display: inline-block;
    padding: 4px 12px;
    border-radius: var(--radius-full);
    font-size: var(--font-size-xs);
    font-weight: 600;
    text-transform: capitalize;
    white-space: nowrap;
}
.status-pending[b-zofn2xxkj6]   { background: #fff7ed; color: #c2410c; }
.status-submitted[b-zofn2xxkj6] { background: #f0fdf4; color: #15803d; }
.status-graded[b-zofn2xxkj6]    { background: #eff6ff; color: #1d4ed8; }
.status-overdue[b-zofn2xxkj6]   { background: #fef2f2; color: #b91c1c; }
.status-late[b-zofn2xxkj6]      { background: #fef2f2; color: #b91c1c; }

/* Questions section */
.questions-section[b-zofn2xxkj6] { display: flex; flex-direction: column; gap: var(--spacing-md); }
.section-title[b-zofn2xxkj6] {
    font-size: var(--font-size-lg);
    font-weight: 700;
    color: var(--color-text-primary);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 8px;
}
.section-title i[b-zofn2xxkj6] { color: var(--color-primary-600); }

.question-card[b-zofn2xxkj6] {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--spacing-lg);
    transition: box-shadow 0.15s;
}
.question-card:hover[b-zofn2xxkj6] { box-shadow: 0 2px 8px rgba(0,0,0,0.06); }
.question-header[b-zofn2xxkj6] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-sm);
}
.q-number[b-zofn2xxkj6] {
    font-size: var(--font-size-sm);
    font-weight: 700;
    color: var(--color-primary-600);
}
.q-badges[b-zofn2xxkj6] { display: flex; gap: var(--spacing-sm); }
.type-badge[b-zofn2xxkj6] {
    display: inline-block;
    padding: 2px 10px;
    border-radius: var(--radius-full);
    background: var(--color-neutral-100);
    color: var(--color-text-secondary);
    font-size: var(--font-size-xs);
    font-weight: 600;
    text-transform: uppercase;
}
.marks-badge[b-zofn2xxkj6] {
    display: inline-block;
    padding: 2px 10px;
    border-radius: var(--radius-full);
    background: var(--color-warning-50);
    color: var(--color-warning-700);
    font-size: var(--font-size-xs);
    font-weight: 600;
}
.question-text[b-zofn2xxkj6] {
    font-size: var(--font-size-base);
    color: var(--color-text-primary);
    line-height: 1.6;
    margin-bottom: var(--spacing-md);
}

/* Options */
.options-list[b-zofn2xxkj6] { display: flex; flex-direction: column; gap: var(--spacing-sm); margin-bottom: var(--spacing-md); }
.option-item[b-zofn2xxkj6] {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-sm);
    padding: 10px 14px;
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border);
    background: var(--color-neutral-50);
    font-size: var(--font-size-sm);
}
.option-item.selected[b-zofn2xxkj6] {
    border-color: var(--color-success-400);
    background: var(--color-success-50);
}
.opt-key[b-zofn2xxkj6] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: var(--radius-full);
    background: var(--color-primary-100);
    color: var(--color-primary-700);
    font-size: var(--font-size-xs);
    font-weight: 700;
    flex-shrink: 0;
}
.option-item.selected .opt-key[b-zofn2xxkj6] { background: var(--color-success-200); color: var(--color-success-800); }
.opt-text[b-zofn2xxkj6] { flex: 1; }
.opt-check[b-zofn2xxkj6] { color: var(--color-success-600); margin-left: auto; }

/* Answer block */
.answer-block[b-zofn2xxkj6] {
    background: var(--color-success-50);
    border: 1px solid var(--color-success-200);
    border-radius: var(--radius-md);
    padding: var(--spacing-md);
}
.answer-label[b-zofn2xxkj6] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: var(--font-size-xs);
    font-weight: 700;
    color: var(--color-success-700);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: var(--spacing-sm);
}
.answer-text[b-zofn2xxkj6] {
    font-size: var(--font-size-base);
    color: var(--color-text-primary);
    line-height: 1.5;
}
.correctness-badge[b-zofn2xxkj6] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: var(--spacing-sm);
    padding: 3px 10px;
    border-radius: var(--radius-full);
    font-size: var(--font-size-xs);
    font-weight: 700;
}
.correctness-badge.correct[b-zofn2xxkj6] { background: var(--color-success-100); color: var(--color-success-800); }
.correctness-badge.incorrect[b-zofn2xxkj6] { background: var(--color-danger-100); color: var(--color-danger-800); }
.marks-awarded[b-zofn2xxkj6] { font-weight: 400; opacity: 0.9; }

.no-answer[b-zofn2xxkj6] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: var(--spacing-sm) var(--spacing-md);
    background: var(--color-neutral-50);
    border-radius: var(--radius-md);
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
}
.no-answer i[b-zofn2xxkj6] { color: var(--color-neutral-400); }

.loading-spinner[b-zofn2xxkj6] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 64px 0;
    color: var(--color-text-secondary);
    gap: var(--spacing-sm);
}
.loading-spinner i[b-zofn2xxkj6] { font-size: var(--font-size-2xl); color: var(--color-primary-600); }
.loading-spinner span[b-zofn2xxkj6] { font-size: var(--font-size-sm); }

.empty-state[b-zofn2xxkj6] { text-align: center; padding: 64px 0; color: var(--color-text-secondary); }
.empty-state i[b-zofn2xxkj6] { font-size: var(--font-size-3xl); color: var(--color-border); margin-bottom: var(--spacing-sm); display: block; }
.empty-state h3[b-zofn2xxkj6] { font-size: var(--font-size-lg); font-weight: 600; margin: 0 0 var(--spacing-xs); color: var(--color-text-primary); }

/* Responsive */
@media (max-width: 768px) {
    .detail-page[b-zofn2xxkj6] { padding: var(--spacing-md); }
    .detail-header[b-zofn2xxkj6] { flex-direction: column; align-items: flex-start; }
    .meta-card[b-zofn2xxkj6] { padding: var(--spacing-md); }
    .meta-row[b-zofn2xxkj6] { flex-direction: column; gap: var(--spacing-sm); }
    .question-card[b-zofn2xxkj6] { padding: var(--spacing-md); }
}
/* /Pages/Parent/Assignments.razor.rz.scp.css */
.page-container[b-5g1owc5akp] { padding: var(--spacing-lg); max-width: 1200px; margin: 0 auto; }

/* Header */
.page-header[b-5g1owc5akp] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-lg);
}
.page-title[b-5g1owc5akp] { font-size: var(--font-size-2xl); font-weight: 700; color: var(--color-text-primary); margin: 0; }
.page-subtitle[b-5g1owc5akp] { font-size: var(--font-size-sm); color: var(--color-text-secondary); margin: 4px 0 0; }

/* Child selector */
.child-selector[b-5g1owc5akp] { display: flex; align-items: center; gap: var(--spacing-sm); }
.selector-label[b-5g1owc5akp] { font-size: var(--font-size-sm); font-weight: 500; color: var(--color-text-secondary); white-space: nowrap; }
.selector-label i[b-5g1owc5akp] { margin-right: 4px; }
.selector-select[b-5g1owc5akp] {
    border: 1px solid var(--color-neutral-300);
    border-radius: var(--radius-md);
    padding: 8px 32px 8px 12px;
    font-size: var(--font-size-sm);
    background: var(--color-white);
    color: var(--color-neutral-800);
    cursor: pointer;
    min-width: 220px;
}

/* Stats */
.stats-bar[b-5g1owc5akp] { display: flex; gap: var(--spacing-sm); flex-wrap: wrap; margin-bottom: var(--spacing-md); }
.stat-chip[b-5g1owc5akp] {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 10px 20px;
    text-align: center;
    min-width: 72px;
}
.stat-chip .stat-num[b-5g1owc5akp] { display: block; font-size: var(--font-size-xl); font-weight: 700; color: var(--color-text-primary); }
.stat-chip .stat-lbl[b-5g1owc5akp] { font-size: var(--font-size-xs); color: var(--color-text-secondary); text-transform: uppercase; letter-spacing: 0.5px; }
.chip-green .stat-num[b-5g1owc5akp] { color: var(--color-success-600); }
.chip-amber .stat-num[b-5g1owc5akp] { color: var(--color-warning-600); }
.chip-blue  .stat-num[b-5g1owc5akp] { color: var(--color-primary-600); }
.chip-red   .stat-num[b-5g1owc5akp] { color: var(--color-danger-600); }

/* Filter tabs */
.filter-tabs[b-5g1owc5akp] { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: var(--spacing-md); }
.filter-tab[b-5g1owc5akp] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: var(--radius-full);
    border: 1px solid var(--color-border);
    background: var(--color-surface);
    font-size: var(--font-size-sm);
    font-weight: 500;
    color: var(--color-text-secondary);
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}
.filter-tab:hover[b-5g1owc5akp] { background: var(--color-primary-50); color: var(--color-primary-600); }
.filter-tab.active[b-5g1owc5akp] { background: var(--color-primary-600); color: #fff; border-color: var(--color-primary-600); }
.filter-tab.active .tab-badge[b-5g1owc5akp] { background: rgba(255,255,255,0.25); color: #fff; }
.tab-badge[b-5g1owc5akp] {
    background: var(--color-primary-50);
    color: var(--color-primary-600);
    font-size: var(--font-size-xs);
    padding: 1px 7px;
    border-radius: var(--radius-full);
    font-weight: 600;
}

/* Table wrapper */
.table-wrapper[b-5g1owc5akp] {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

/* Assignment table */
.assignment-table[b-5g1owc5akp] {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--font-size-sm);
}
.assignment-table thead[b-5g1owc5akp] {
    background: var(--color-neutral-50);
    border-bottom: 1px solid var(--color-border);
}
.assignment-table th[b-5g1owc5akp] {
    padding: 12px 16px;
    text-align: left;
    font-weight: 600;
    font-size: var(--font-size-xs);
    color: var(--color-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap;
}
.assignment-table td[b-5g1owc5akp] {
    padding: 12px 16px;
    border-bottom: 1px solid var(--color-neutral-50);
    vertical-align: middle;
}
.assignment-table tbody tr:last-child td[b-5g1owc5akp] { border-bottom: none; }
.clickable-row[b-5g1owc5akp] { cursor: pointer; transition: background 0.1s; }
.clickable-row:hover[b-5g1owc5akp] { background: var(--color-primary-50); }

.subject-badge[b-5g1owc5akp] {
    display: inline-block;
    background: var(--color-primary-50);
    color: var(--color-primary-600);
    font-size: var(--font-size-xs);
    font-weight: 600;
    padding: 3px 10px;
    border-radius: var(--radius-full);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap;
}
.assignment-title-cell[b-5g1owc5akp] { min-width: 200px; }
.assignment-title-cell .assignment-desc-cell[b-5g1owc5akp] {
    display: block;
    font-size: var(--font-size-xs);
    color: var(--color-text-secondary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 300px;
    margin-top: 2px;
}
.teacher-cell[b-5g1owc5akp] { white-space: nowrap; }
.date-cell[b-5g1owc5akp] { white-space: nowrap; }
.marks-cell[b-5g1owc5akp] { font-weight: 600; text-align: center; }
.grade-cell[b-5g1owc5akp] { white-space: nowrap; }
.submitted-cell[b-5g1owc5akp] { font-size: var(--font-size-xs); color: var(--color-text-secondary); }

.status-pill[b-5g1owc5akp] {
    display: inline-block;
    padding: 3px 12px;
    border-radius: var(--radius-full);
    font-size: var(--font-size-xs);
    font-weight: 600;
    text-transform: capitalize;
    white-space: nowrap;
}
.status-pending[b-5g1owc5akp]   { background: #fff7ed; color: #c2410c; }
.status-submitted[b-5g1owc5akp] { background: #f0fdf4; color: #15803d; }
.status-graded[b-5g1owc5akp]    { background: #eff6ff; color: #1d4ed8; }
.status-overdue[b-5g1owc5akp]   { background: #fef2f2; color: #b91c1c; }
.status-late[b-5g1owc5akp]      { background: #fef2f2; color: #b91c1c; }

.grade-chip[b-5g1owc5akp] { font-size: var(--font-size-sm); font-weight: 700; color: var(--color-success-600); }

.view-detail-btn[b-5g1owc5akp] {
    background: none;
    border: 1px solid var(--color-primary-200);
    color: var(--color-primary-600);
    border-radius: var(--radius-md);
    padding: 4px 12px;
    font-size: var(--font-size-xs);
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
    transition: background 0.15s;
}
.view-detail-btn:hover[b-5g1owc5akp] { background: var(--color-primary-50); }

/* Pagination */
.pagination-bar[b-5g1owc5akp] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--spacing-sm);
    padding: var(--spacing-md) var(--spacing-lg);
    background: var(--color-surface);
    border-top: 1px solid var(--color-border);
}
.pagination-info[b-5g1owc5akp] {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
}
.pagination-controls[b-5g1owc5akp] {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}
.btn-pagination[b-5g1owc5akp] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border);
    background: var(--color-surface);
    color: var(--color-text-primary);
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}
.btn-pagination:hover:not(:disabled)[b-5g1owc5akp] { background: var(--color-primary-50); border-color: var(--color-primary-200); }
.btn-pagination:disabled[b-5g1owc5akp] { opacity: 0.4; cursor: not-allowed; }
.page-indicator[b-5g1owc5akp] {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    font-weight: 500;
    padding: 0 var(--spacing-sm);
}

/* States */
.loading-state[b-5g1owc5akp] { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 64px 0; color: var(--color-text-secondary); gap: var(--spacing-sm); }
.loading-state i[b-5g1owc5akp] { font-size: var(--font-size-2xl); color: var(--color-primary-600); }
.empty-state[b-5g1owc5akp] { text-align: center; padding: 64px 0; color: var(--color-text-secondary); }
.empty-state i[b-5g1owc5akp] { font-size: var(--font-size-3xl); color: var(--color-border); margin-bottom: var(--spacing-sm); display: block; }
.empty-state h3[b-5g1owc5akp] { font-size: var(--font-size-lg); font-weight: 600; margin: 0 0 var(--spacing-xs); color: var(--color-text-primary); }
.error-banner[b-5g1owc5akp] { background: var(--color-danger-50); border: 1px solid var(--color-danger-200); color: var(--color-danger-700); padding: 12px 16px; border-radius: var(--radius-md); font-size: var(--font-size-sm); }

/* Responsive */
@media (max-width: 768px) {
    .page-container[b-5g1owc5akp] { padding: var(--spacing-md); }
    .page-header[b-5g1owc5akp] { flex-direction: column; }
    .child-selector[b-5g1owc5akp] { width: 100%; }
    .selector-select[b-5g1owc5akp] { flex: 1; }
    .stats-bar[b-5g1owc5akp] { gap: var(--spacing-xs); }
    .stat-chip[b-5g1owc5akp] { padding: 8px 12px; min-width: 56px; }
    .table-wrapper[b-5g1owc5akp] { overflow-x: auto; }
    .assignment-table[b-5g1owc5akp] { min-width: 720px; }
    .assignment-table th[b-5g1owc5akp],
    .assignment-table td[b-5g1owc5akp] { padding: 10px 12px; }
    .pagination-bar[b-5g1owc5akp] { flex-direction: column; align-items: stretch; text-align: center; }
}

@media (max-width: 640px) {
    .stats-bar[b-5g1owc5akp] { justify-content: space-between; }
    .stat-chip[b-5g1owc5akp] { flex: 1; }
    .stat-chip .stat-num[b-5g1owc5akp] { font-size: var(--font-size-lg); }
    .filter-tabs[b-5g1owc5akp] { overflow-x: auto; flex-wrap: nowrap; padding-bottom: var(--spacing-xs); }
    .filter-tab[b-5g1owc5akp] { flex-shrink: 0; }
}
/* /Pages/Parent/Attendance.razor.rz.scp.css */
/* Subject-wise attendance matrix for the Parent page.
   Wide month matrix: freeze subject column to the LEFT and Sessions/% to the RIGHT
   so they stay visible while the day columns scroll horizontally (overflow-x:auto). */

.tt-matrix[b-1rsy32flpi] {
    --tt-subject-w: 180px;
    --tt-cell-w: 34px;
    --tt-side-w: 64px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.tt-table[b-1rsy32flpi] {
    min-width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    table-layout: fixed;
    font-size: 12px;
}

/* Header row */
.tt-head[b-1rsy32flpi] {
    background: var(--color-neutral-50);
}
.tt-head-subject[b-1rsy32flpi] {
    position: sticky;
    left: 0;
    z-index: 3;
    width: var(--tt-subject-w);
    min-width: var(--tt-subject-w);
    background: var(--color-neutral-50);
    border-right: 2px solid var(--color-neutral-200);
    text-align: left;
    font-weight: 700;
    color: var(--color-neutral-700);
    padding: 6px 8px;
}
.tt-cell[b-1rsy32flpi] {
    width: var(--tt-cell-w);
    min-width: var(--tt-cell-w);
    max-width: var(--tt-cell-w);
    text-align: center;
    padding: 4px 2px;
    border: 1px solid var(--color-neutral-100);
}
.tt-ddd[b-1rsy32flpi] {
    display: block;
    font-size: 9px;
    color: var(--color-neutral-400);
    text-transform: uppercase;
}
.tt-head-sessions[b-1rsy32flpi],
.tt-head-pct[b-1rsy32flpi] {
    position: sticky;
    right: 0;
    z-index: 3;
    width: var(--tt-side-w);
    min-width: var(--tt-side-w);
    background: var(--color-neutral-50);
    border-left: 2px solid var(--color-neutral-200);
    text-align: center;
    font-weight: 700;
    color: var(--color-neutral-700);
    padding: 6px 8px;
}
/* Sessions column sits just left of %; pin it so both stay visible */
.tt-head-sessions[b-1rsy32flpi] {
    right: var(--tt-side-w);
}

/* Body rows */
.tt-row[b-1rsy32flpi] {
    background: var(--color-white);
}
.tt-row:hover[b-1rsy32flpi] {
    background: var(--color-neutral-100);
}
.tt-cell-subject[b-1rsy32flpi] {
    position: sticky;
    left: 0;
    z-index: 2;
    width: var(--tt-subject-w);
    min-width: var(--tt-subject-w);
    background: var(--color-white);
    border-right: 2px solid var(--color-neutral-200);
    text-align: left;
    font-weight: 600;
    color: var(--color-neutral-900);
    padding: 6px 8px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.tt-cell-sessions[b-1rsy32flpi],
.tt-cell-pct[b-1rsy32flpi] {
    position: sticky;
    right: 0;
    z-index: 1;
    width: var(--tt-side-w);
    min-width: var(--tt-side-w);
    background: var(--color-white);
    border-left: 2px solid var(--color-neutral-200);
    text-align: center;
    font-weight: 600;
    color: var(--color-neutral-700);
    padding: 6px 8px;
}
.tt-cell-sessions[b-1rsy32flpi] {
    right: var(--tt-side-w);
}

/* Weekend / non-working columns. Defined BEFORE the status colours so a marked
   cell (P/L/A/H) still wins; only empty cells pick up the weekend tint. */
.tt-cell--weekend[b-1rsy32flpi] { background: var(--color-neutral-100); }
.tt-th--weekend[b-1rsy32flpi] { background: var(--color-neutral-200); }

/* Today column: flat underline marker (no background, so it never hides a status colour). */
.tt-th--today[b-1rsy32flpi] { color: var(--color-primary-700); box-shadow: inset 0 -3px 0 var(--color-primary-500); }
.tt-cell--today[b-1rsy32flpi] { box-shadow: inset 0 -3px 0 var(--color-primary-500); }

/* Dropdown selects: strip native 3D/bevel styling and draw a flat chevron. */
.tt-select[b-1rsy32flpi] {
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'><path d='M2 4 L6 8 L10 4' fill='none' stroke='%236B7280' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/></svg>");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 12px 12px;
}

/* Cell status colours */
.tt-p[b-1rsy32flpi] {
    background: var(--color-success-50);
    color: var(--color-success-700);
}
.tt-l[b-1rsy32flpi] {
    background: var(--color-warning-50);
    color: var(--color-warning-800);
}
.tt-a[b-1rsy32flpi] {
    background: var(--color-danger-100);
    color: var(--color-danger-800);
}
.tt-h[b-1rsy32flpi] {
    background: var(--color-info-50);
    color: var(--color-info-800);
}
.tt-q[b-1rsy32flpi] {
    background: var(--color-neutral-100);
    color: var(--color-neutral-500);
}
.tt-none[b-1rsy32flpi] {
    background: var(--color-white);
    color: var(--color-neutral-300);
}

/* Holiday date chip shown in the footer detail row. */
.tt-holiday-chip[b-1rsy32flpi] {
    background: var(--color-info-50);
    color: var(--color-info-800);
    border-radius: 6px;
    padding: 2px 8px;
    white-space: nowrap;
}

/* Legend */
.tt-legend-p[b-1rsy32flpi] {
    color: var(--color-success-700);
}
.tt-legend-l[b-1rsy32flpi] {
    color: var(--color-warning-800);
}
.tt-legend-a[b-1rsy32flpi] {
    color: var(--color-danger-800);
}
.tt-legend-h[b-1rsy32flpi] {
    color: var(--color-info-800);
}
.tt-legend-today[b-1rsy32flpi] {
    color: var(--color-primary-700);
    box-shadow: inset 0 -3px 0 var(--color-primary-500);
}
.tt-legend-q[b-1rsy32flpi] {
    color: var(--color-neutral-500);
}
.tt-legend-none[b-1rsy32flpi] {
    color: var(--color-neutral-400);
}

/* Narrow screens: shrink day cells so the matrix still scrolls comfortably. */
@media (max-width: 767px) {
    .tt-matrix[b-1rsy32flpi] {
        --tt-cell-w: 26px;
    }
    .tt-ddd[b-1rsy32flpi] {
        display: none;
    }
}
/* /Pages/Parent/Children.razor.rz.scp.css */
/* Styles handled via Tailwind utility classes in markup */
/* /Pages/Parent/Communication/Index.razor.rz.scp.css */
.parent-comm-page[b-m79lqmtzkp] {
    max-width: 1200px;
    margin: 0 auto;
    padding: var(--spacing-6);
}

.parent-comm-header[b-m79lqmtzkp] {
    margin-bottom: var(--spacing-6);
}

.parent-comm-header h1[b-m79lqmtzkp] {
    font-size: var(--font-size-2xl);
    font-weight: 700;
    color: var(--color-neutral-900);
    margin: 0;
}

.parent-comm-subtitle[b-m79lqmtzkp] {
    font-size: var(--font-size-sm);
    color: var(--color-neutral-500);
    margin: var(--spacing-1) 0 0;
}

.parent-comm-tabs[b-m79lqmtzkp] {
    display: flex;
    gap: var(--spacing-1);
    border-bottom: 1px solid var(--color-neutral-200);
    margin-bottom: var(--spacing-6);
}

.parent-comm-tab[b-m79lqmtzkp] {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-2);
    padding: var(--spacing-2) var(--spacing-4);
    font-size: var(--font-size-sm);
    font-weight: 500;
    color: var(--color-neutral-600);
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    cursor: pointer;
    transition: color 0.2s, border-color 0.2s;
}

.parent-comm-tab:hover[b-m79lqmtzkp] {
    color: var(--color-neutral-800);
}

.parent-comm-tab.active[b-m79lqmtzkp] {
    color: var(--color-primary-700);
    border-bottom-color: var(--color-primary-600);
}

.parent-comm-badge[b-m79lqmtzkp] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    font-size: 11px;
    font-weight: 600;
    color: white;
    background: var(--color-danger-500);
    border-radius: var(--radius-full);
}

.parent-comm-panel[b-m79lqmtzkp] {
    min-height: 200px;
}

@media (max-width: 768px) {
    .parent-comm-page[b-m79lqmtzkp] {
        padding: var(--spacing-4);
    }

    .parent-comm-tabs[b-m79lqmtzkp] {
        gap: 0;
    }

    .parent-comm-tab[b-m79lqmtzkp] {
        flex: 1;
        justify-content: center;
        padding: var(--spacing-2) var(--spacing-2);
        font-size: 12px;
    }
}
/* /Pages/Parent/CompleteProfile.razor.rz.scp.css */
/* Complete Profile (Parent) — CSS isolation */
/* Uses design tokens from design-tokens.css — no hardcoded colors/spacing */

.complete-profile-page[b-76zh3ze6k9] {
    max-width: 800px;
    margin: 0 auto;
    padding: var(--spacing-6);
}

.complete-profile-wizard[b-76zh3ze6k9] {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: var(--spacing-4);
    margin-bottom: var(--spacing-8);
}

.wizard-step[b-76zh3ze6k9] {
    text-align: center;
    flex-shrink: 0;
}

.wizard-step-circle[b-76zh3ze6k9] {
    width: 36px;
    height: 36px;
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-bold);
    margin: 0 auto var(--spacing-1);
}

.wizard-step-circle.completed[b-76zh3ze6k9] {
    background: var(--color-success-500);
    color: var(--color-white);
}

.wizard-step-circle.active[b-76zh3ze6k9] {
    background: var(--color-primary-500);
    color: var(--color-white);
}

.wizard-step-circle.pending[b-76zh3ze6k9] {
    background: var(--color-neutral-200);
    color: var(--color-neutral-400);
}

.wizard-step-label[b-76zh3ze6k9] {
    font-size: var(--font-size-xs);
    color: var(--color-neutral-600);
}

.wizard-step-label.active[b-76zh3ze6k9] {
    font-weight: var(--font-weight-semibold);
    color: var(--color-primary-700);
}

.wizard-connector[b-76zh3ze6k9] {
    width: 60px;
    height: 2px;
    background: var(--color-neutral-200);
    margin-top: 17px;
}

.wizard-connector.completed[b-76zh3ze6k9] {
    background: var(--color-primary-500);
}

.profile-hero[b-76zh3ze6k9] {
    background: linear-gradient(135deg, var(--color-primary-600), var(--color-primary-700));
    border-radius: var(--radius-xl);
    padding: var(--spacing-8);
    color: var(--color-white);
    text-align: center;
    margin-bottom: var(--spacing-8);
}

.profile-form-card[b-76zh3ze6k9] {
    background: var(--color-white);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-md);
    padding: var(--spacing-8);
}

@media (max-width: 767px) {
    .complete-profile-page[b-76zh3ze6k9] { padding: var(--spacing-4); }
    .profile-form-card[b-76zh3ze6k9] { padding: var(--spacing-5); }
    .wizard-connector[b-76zh3ze6k9] { width: 30px; }
    .wizard-step-label[b-76zh3ze6k9] { font-size: 10px; }
}
/* /Pages/Parent/Curriculum/Index.razor.rz.scp.css */
/* Parent Curriculum Page — scoped styles */

/* Progress bar smooth transition */
.progress-fill[b-1c8puwvz9i] {
    transition: width 0.5s ease-in-out;
}

/* Subject coverage row hover */
.subject-row:hover[b-1c8puwvz9i] {
    background-color: var(--color-neutral-50, #f9fafb);
}
/* /Pages/Parent/Dashboard.razor.rz.scp.css */
.parent-dashboard[b-hpbfmhaldm] {
    padding: var(--spacing-6);
    max-width: 900px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

/* Fee Summary Section */
.fee-summary-section[b-hpbfmhaldm] {
    background: var(--color-white);
    border-radius: var(--radius-xl);
    padding: var(--spacing-6);
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--color-neutral-200);
}

.section-header-row[b-hpbfmhaldm] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--spacing-4);
    flex-wrap: wrap;
    gap: var(--spacing-2);
}

.section-header-row .section-title[b-hpbfmhaldm] {
    font-size: 1.25rem;
    font-weight: 700;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.view-all-link[b-hpbfmhaldm] {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--color-primary-600);
    text-decoration: none;
    white-space: nowrap;
}
.view-all-link:hover[b-hpbfmhaldm] { text-decoration: underline; }

.fee-cards-grid[b-hpbfmhaldm] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: var(--spacing-4);
}

.fee-summary-card-dashboard[b-hpbfmhaldm] {
    border: 1px solid var(--color-neutral-200);
    border-radius: var(--radius-lg);
    padding: var(--spacing-4);
    background: var(--color-neutral-50);
}

.fee-card-header[b-hpbfmhaldm] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--spacing-3);
    gap: var(--spacing-2);
}

.child-name[b-hpbfmhaldm] {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--color-neutral-900);
    display: flex;
    align-items: center;
    gap: 4px;
}

.status-pill[b-hpbfmhaldm] {
    display: inline-flex;
    align-items: center;
    padding: 2px 10px;
    border-radius: 99px;
    font-size: 0.7rem;
    font-weight: 600;
    white-space: nowrap;
}
.status-pill.status-paid[b-hpbfmhaldm] { background: #dcfce7; color: #166534; }
.status-pill.status-partiallypaid[b-hpbfmhaldm] { background: #fef9c3; color: #713f12; }
.status-pill.status-pending[b-hpbfmhaldm] { background: #fef3c7; color: #92400e; }
.status-pill.status-overdue[b-hpbfmhaldm] { background: #fee2e2; color: #991b1b; }

.fee-card-figures[b-hpbfmhaldm] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-2);
}

.fee-figure[b-hpbfmhaldm] {
    text-align: center;
    padding: var(--spacing-2);
    border-radius: var(--radius-md);
    background: white;
    border: 1px solid var(--color-neutral-200);
}
.fee-figure-paid[b-hpbfmhaldm] { background: #f0fdf4; border-color: #bbf7d0; }
.fee-figure-outstanding[b-hpbfmhaldm] { background: #fef2f2; border-color: #fecaca; }
.fee-figure-clear[b-hpbfmhaldm] { background: #f0fdf4; border-color: #bbf7d0; }
.fee-figure-late-fee[b-hpbfmhaldm] { background: #fef3c7; border-color: #fcd34d; }
.fee-figure-late-fee .fee-figure-value[b-hpbfmhaldm] { color: #92400e; }

.fee-figure-label[b-hpbfmhaldm] {
    display: block;
    font-size: 0.65rem;
    font-weight: 500;
    color: var(--color-neutral-500);
    margin-bottom: 2px;
}

.fee-figure-value[b-hpbfmhaldm] {
    display: block;
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--color-neutral-900);
}

.fee-card-due[b-hpbfmhaldm] {
    margin-top: var(--spacing-2);
    font-size: 0.75rem;
    color: #92400e;
    background: #fffbeb;
    border: 1px solid #fde68a;
    border-radius: var(--radius-md);
    padding: 4px 8px;
    display: flex;
    align-items: center;
    gap: 4px;
}

/* OMR Upload Section */
.omr-section[b-hpbfmhaldm] {
    background: linear-gradient(135deg, var(--color-primary-50) 0%, var(--color-success-50, #f0fdf4) 100%);
    border: 2px solid var(--color-primary-200);
    border-radius: var(--radius-xl);
    padding: 1.5rem;
}

.section-title[b-hpbfmhaldm] {
    font-size: 1.25rem;
    font-weight: 700;
    margin: 0 0 0.5rem 0;
}

.section-desc[b-hpbfmhaldm] {
    color: var(--color-neutral-600);
    font-size: 0.9rem;
    margin: 0 0 1.25rem 0;
    line-height: 1.6;
}

/* Loading State */
.loading-row[b-hpbfmhaldm] {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    color: var(--color-neutral-600);
}

.mini-spinner[b-hpbfmhaldm] {
    width: 20px;
    height: 20px;
    border: 3px solid var(--color-neutral-200);
    border-top-color: var(--color-primary-500);
    border-radius: 50%;
    animation: spin-b-hpbfmhaldm 0.8s linear infinite;
}

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

/* Empty State */
.empty-state[b-hpbfmhaldm] {
    text-align: center;
    padding: 1.5rem;
    color: var(--color-neutral-500);
    font-size: 0.9rem;
}

.empty-state span[b-hpbfmhaldm] {
    font-size: 2rem;
    display: block;
    margin-bottom: 0.5rem;
}

/* Exam Cards */
.exam-list[b-hpbfmhaldm] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.exam-card[b-hpbfmhaldm] {
    background: white;
    border-radius: var(--radius-md);
    padding: 1rem 1.25rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.child-badge[b-hpbfmhaldm] {
    display: inline-block;
    background: var(--color-primary-100);
    color: var(--color-primary-700);
    padding: 0.15rem 0.6rem;
    border-radius: 99px;
    font-size: 0.75rem;
    font-weight: 600;
    margin-bottom: 0.25rem;
}

.exam-name[b-hpbfmhaldm] {
    font-weight: 700;
    font-size: 0.95rem;
    margin: 0 0 0.2rem 0;
}

.exam-meta[b-hpbfmhaldm] {
    font-size: 0.8rem;
    color: var(--color-neutral-500);
    margin: 0;
}

.btn-sm[b-hpbfmhaldm] {
    padding: 0.4rem 1rem;
    font-size: 0.85rem;
    white-space: nowrap;
}

/* Quick Links Section */
.quick-links-section[b-hpbfmhaldm] {
    background: var(--color-white);
    border-radius: var(--radius-xl);
    padding: var(--spacing-6);
    box-shadow: var(--shadow-sm);
}

.quick-links-grid[b-hpbfmhaldm] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: var(--spacing-4);
}

.quick-link-card[b-hpbfmhaldm] {
    display: flex;
    align-items: center;
    gap: var(--spacing-4);
    padding: var(--spacing-4);
    border: 1px solid var(--color-neutral-200);
    border-radius: var(--radius-lg);
    text-decoration: none;
    color: inherit;
    transition: box-shadow 0.2s, border-color 0.2s, transform 0.15s;
}

.quick-link-card:hover[b-hpbfmhaldm] {
    box-shadow: var(--shadow-md);
    border-color: var(--color-primary-300);
    transform: translateY(-2px);
}

.quick-link-icon[b-hpbfmhaldm] {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    flex-shrink: 0;
}

.quick-link-icon--teal[b-hpbfmhaldm] { background: var(--color-primary-50); color: var(--color-primary-600); }
.quick-link-icon--orange[b-hpbfmhaldm] { background: var(--color-warning-50); color: var(--color-warning-500); }
.quick-link-icon--success[b-hpbfmhaldm] { background: var(--color-success-50); color: var(--color-success-600); }
.quick-link-icon--info[b-hpbfmhaldm] { background: var(--color-neutral-100); color: var(--color-neutral-700); }

.quick-link-body h3[b-hpbfmhaldm] {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--color-neutral-900);
    margin: 0 0 0.125rem;
}

.quick-link-body p[b-hpbfmhaldm] {
    font-size: 0.8125rem;
    color: var(--color-neutral-500);
    margin: 0;
    line-height: 1.4;
}

@media (max-width: 768px) {
    .parent-dashboard[b-hpbfmhaldm] { padding: var(--spacing-4); }
    .quick-links-grid[b-hpbfmhaldm] { grid-template-columns: 1fr; }
    .fee-cards-grid[b-hpbfmhaldm] { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
    .fee-card-figures[b-hpbfmhaldm] { grid-template-columns: 1fr; }
}
/* /Pages/Parent/Events.razor.rz.scp.css */
.parent-events-page[b-qurjy3ckk4] {
    max-width: 1200px;
    margin: 0 auto;
    padding: var(--spacing-6);
}

.parent-events-header[b-qurjy3ckk4] {
    margin-bottom: var(--spacing-6);
}

.parent-events-header h1[b-qurjy3ckk4] {
    font-size: var(--font-size-2xl);
    font-weight: 700;
    color: var(--color-neutral-900);
    margin: 0;
}

.parent-events-subtitle[b-qurjy3ckk4] {
    font-size: var(--font-size-sm);
    color: var(--color-neutral-500);
    margin: var(--spacing-1) 0 0;
}

.parent-events-section[b-qurjy3ckk4] {
    margin-bottom: var(--spacing-6);
}

.parent-events-section-title[b-qurjy3ckk4] {
    font-size: var(--font-size-lg);
    font-weight: 600;
    color: var(--color-neutral-800);
    margin: 0 0 var(--spacing-4);
}

.parent-event-card[b-qurjy3ckk4] {
    background: white;
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-neutral-200);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    display: flex;
    transition: box-shadow 0.2s;
}

.parent-event-card:hover[b-qurjy3ckk4] {
    box-shadow: var(--shadow-md);
}

.parent-event-card-accent[b-qurjy3ckk4] {
    width: 6px;
    background: var(--color-primary-400);
    flex-shrink: 0;
}

.parent-event-card-body[b-qurjy3ckk4] {
    padding: var(--spacing-4);
    flex: 1;
}

.parent-event-card-name[b-qurjy3ckk4] {
    font-size: var(--font-size-base);
    font-weight: 600;
    color: var(--color-neutral-900);
    margin: 0;
}

.parent-event-card-desc[b-qurjy3ckk4] {
    font-size: var(--font-size-sm);
    color: var(--color-neutral-600);
    margin: var(--spacing-2) 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.parent-event-card-meta[b-qurjy3ckk4] {
    font-size: var(--font-size-sm);
    color: var(--color-neutral-500);
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
}

.parent-event-card-meta i[b-qurjy3ckk4] {
    width: 1rem;
    text-align: center;
    color: var(--color-neutral-400);
}

.parent-event-badge[b-qurjy3ckk4] {
    font-size: 11px;
    font-weight: 600;
    padding: 2px 10px;
    border-radius: var(--radius-full);
    white-space: nowrap;
}

.parent-event-badge--upcoming[b-qurjy3ckk4] {
    background: var(--color-primary-100);
    color: var(--color-primary-700);
}

@media (max-width: 768px) {
    .parent-events-page[b-qurjy3ckk4] {
        padding: var(--spacing-4);
    }
}
/* /Pages/Parent/Exams.razor.rz.scp.css */
/* Styles handled via Tailwind utility classes in markup */
/* /Pages/Parent/Fees.razor.rz.scp.css */
.parent-fees-page[b-6392r0s25r] {
    padding: var(--spacing-6);
    max-width: 1100px;
    margin: 0 auto;
}

/* Page Header */
.page-header[b-6392r0s25r]   { margin-bottom: var(--spacing-6); }
.page-title[b-6392r0s25r]    { font-size: 1.5rem; font-weight: 700; color: var(--color-neutral-900); margin: 0 0 var(--spacing-1); }
.page-subtitle[b-6392r0s25r] { color: var(--color-neutral-500); font-size: 0.875rem; margin: 0; }

/* Loading / Empty */
.loading-container[b-6392r0s25r], .empty-state-card[b-6392r0s25r] {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    padding: var(--spacing-16); gap: var(--spacing-4); color: var(--color-neutral-500);
}

.loading-spinner[b-6392r0s25r] {
    width: 40px; height: 40px;
    border: 3px solid var(--color-neutral-200);
    border-top-color: var(--color-primary-600);
    border-radius: 50%;
    animation: spin-b-6392r0s25r 0.8s linear infinite;
}

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

/* Child selector */
.child-selector[b-6392r0s25r]   { margin-bottom: var(--spacing-5); }
.selector-label[b-6392r0s25r]   { font-size: 0.875rem; font-weight: 600; color: var(--color-neutral-600); display: block; margin-bottom: var(--spacing-2); }
.child-tabs[b-6392r0s25r]       { display: flex; gap: var(--spacing-2); flex-wrap: wrap; }
.child-tab[b-6392r0s25r] {
    padding: var(--spacing-2) var(--spacing-4);
    border-radius: var(--radius-full);
    border: 1px solid var(--color-neutral-300);
    background: white;
    cursor: pointer;
    font-size: 0.875rem;
    transition: all var(--duration-fast);
}
.child-tab.active[b-6392r0s25r], .child-tab:hover[b-6392r0s25r] { background: var(--color-primary-600); color: white; border-color: var(--color-primary-600); }

/* Fee summary card */
.fee-summary-card[b-6392r0s25r] {
    background: white;
    border-radius: var(--radius-xl);
    padding: var(--spacing-6);
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--color-neutral-200);
    margin-bottom: var(--spacing-5);
}

.student-info-row[b-6392r0s25r] {
    display: flex; justify-content: space-between; align-items: flex-start;
    margin-bottom: var(--spacing-5); flex-wrap: wrap; gap: var(--spacing-3);
}
.student-name[b-6392r0s25r]  { font-size: 1.25rem; font-weight: 700; color: var(--color-neutral-900); margin: 0 0 var(--spacing-2); }
.student-meta[b-6392r0s25r]  { display: flex; flex-wrap: wrap; gap: var(--spacing-2); }
.meta-badge[b-6392r0s25r] {
    font-size: 0.8rem; color: var(--color-neutral-600); background: var(--color-neutral-100);
    padding: 2px 10px; border-radius: var(--radius-full); display: flex; align-items: center; gap: 4px;
}

.fee-amounts-grid[b-6392r0s25r] { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: var(--spacing-3); }
.amount-card[b-6392r0s25r]      { border-radius: var(--radius-lg); padding: var(--spacing-4); text-align: center; }
.amount-card.total[b-6392r0s25r]        { background: var(--color-neutral-50);  border: 1px solid var(--color-neutral-200); }
.amount-card.discount[b-6392r0s25r]     { background: #fff7ed;                  border: 1px solid #fed7aa; }
.amount-card.net[b-6392r0s25r]          { background: #eff6ff;                  border: 1px solid #bfdbfe; }
.amount-card.paid[b-6392r0s25r]         { background: #f0fdf4;                  border: 1px solid #bbf7d0; }
.amount-card.outstanding[b-6392r0s25r]  { background: #fef2f2;                  border: 1px solid #fecaca; }
.amount-card.clear[b-6392r0s25r]        { background: #f0fdf4;                  border: 1px solid #bbf7d0; }
.amount-card.late-fee[b-6392r0s25r]     { background: #fef3c7;                  border: 1px solid #fcd34d; }
.amount-card.late-fee .amount-value[b-6392r0s25r] { color: #92400e; }
.amount-card.advance[b-6392r0s25r]      { background: #f0fdfa;                  border: 1px solid #a5f3fc; }
.amount-card.advance .amount-value[b-6392r0s25r] { color: #0e7490; }
.amount-card.balance[b-6392r0s25r]      { background: #faf5ff;                  border: 1px solid #e9d5ff; }
.amount-card.balance .amount-value[b-6392r0s25r] { color: #7c3aed; }
.late-fee-value[b-6392r0s25r]           { color: #92400e; font-weight: 600; }
.days-overdue[b-6392r0s25r]             { color: #dc2626; font-weight: 600; font-size: 0.8rem; }
.amount-label[b-6392r0s25r] { display: block; font-size: 0.75rem; font-weight: 500; color: var(--color-neutral-500); margin-bottom: var(--spacing-1); }
.amount-value[b-6392r0s25r] { font-size: 1.125rem; font-weight: 700; color: var(--color-neutral-900); }

.next-due-banner[b-6392r0s25r] {
    margin-top: var(--spacing-4);
    background: #fffbeb; border: 1px solid #fde68a; border-radius: var(--radius-lg);
    padding: var(--spacing-3) var(--spacing-4); font-size: 0.875rem;
    color: #78350f; display: flex; align-items: center; gap: var(--spacing-2);
}
.last-payment-note[b-6392r0s25r] { margin-top: var(--spacing-3); font-size: 0.8rem; color: var(--color-success-600); display: flex; align-items: center; gap: var(--spacing-1); }

/* Online payment */
.payment-panel[b-6392r0s25r] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--spacing-5);
    margin-bottom: var(--spacing-5);
    padding: var(--spacing-5);
    background: var(--color-white);
    border: 1px solid var(--color-primary-200);
    border-left: 4px solid var(--color-primary-600);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}
.payment-panel-copy h3[b-6392r0s25r] {
    margin: 0 0 var(--spacing-1);
    color: var(--color-neutral-900);
    font-size: 1rem;
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
}
.payment-panel-copy p[b-6392r0s25r] { margin: 0; color: var(--color-neutral-500); font-size: 0.8125rem; }
.payment-controls[b-6392r0s25r] { display: flex; align-items: flex-end; gap: var(--spacing-3); }
.payment-amount-field[b-6392r0s25r] { min-width: 210px; }
.payment-amount-field[b-6392r0s25r]  .payment-input { min-height: 44px; }
.btn-use-balance[b-6392r0s25r] {
    min-height: 28px;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--color-primary-600);
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
}
.btn-pay-online[b-6392r0s25r] {
    min-height: 44px;
    padding: var(--spacing-2) var(--spacing-5);
    border: 1px solid var(--color-primary-600);
    border-radius: var(--radius-md);
    background: var(--color-primary-600);
    color: var(--color-white);
    font-size: 0.875rem;
    font-weight: 700;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-2);
    white-space: nowrap;
}
.btn-pay-online:hover:not(:disabled)[b-6392r0s25r] { background: var(--color-primary-700); }
.btn-pay-online:disabled[b-6392r0s25r], .btn-use-balance:disabled[b-6392r0s25r] { opacity: 0.55; cursor: not-allowed; }

/* Section cards */
.section-card[b-6392r0s25r] {
    background: white; border-radius: var(--radius-xl);
    box-shadow: var(--shadow-sm); border: 1px solid var(--color-neutral-200);
    margin-bottom: var(--spacing-5); overflow: hidden;
}
.section-card-header[b-6392r0s25r] { padding: var(--spacing-4) var(--spacing-6); border-bottom: 1px solid var(--color-neutral-200); }
.section-header-row[b-6392r0s25r] { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--spacing-2); }
.section-card-header h3[b-6392r0s25r] { font-size: 1rem; font-weight: 600; color: var(--color-neutral-900); margin: 0; display: flex; align-items: center; gap: var(--spacing-2); }
.fee-pending-indicator[b-6392r0s25r] {
    display: inline-flex; align-items: center; gap: var(--spacing-1);
    padding: 4px 10px; border-radius: var(--radius-full);
    background: #fffbeb; color: #92400e; font-size: 0.8rem; font-weight: 600;
    border: 1px solid #fcd34d;
}
.overdue-count[b-6392r0s25r] { color: #dc2626; font-weight: 700; }
.late-fee-paid-note[b-6392r0s25r] { font-size: 0.7rem; color: #16a34a; font-weight: 500; }

.inner-loading[b-6392r0s25r], .empty-note[b-6392r0s25r] {
    padding: var(--spacing-6); color: var(--color-neutral-500);
    font-size: 0.875rem; display: flex; align-items: center; gap: var(--spacing-2);
}
.mini-spinner[b-6392r0s25r] {
    width: 16px; height: 16px;
    border: 2px solid var(--color-neutral-300);
    border-top-color: var(--color-primary-600);
    border-radius: 50%; animation: spin-b-6392r0s25r 0.8s linear infinite;
}

/* Tables */
.table-responsive[b-6392r0s25r] { overflow-x: auto; }
.fee-table[b-6392r0s25r] { width: 100%; border-collapse: collapse; font-size: 0.875rem; }
.fee-table th[b-6392r0s25r] {
    background: var(--color-neutral-50); padding: var(--spacing-3) var(--spacing-4);
    text-align: left; font-weight: 600; color: var(--color-neutral-600);
    border-bottom: 1px solid var(--color-neutral-200); white-space: nowrap;
}
.fee-table td[b-6392r0s25r] { padding: var(--spacing-3) var(--spacing-4); color: var(--color-neutral-800); border-bottom: 1px solid var(--color-neutral-100); }
.fee-table tr:last-child td[b-6392r0s25r] { border-bottom: none; }
.fee-table tr.row-overdue td[b-6392r0s25r] { background: #fef2f2; }
.fee-table tr.row-pending td[b-6392r0s25r] { background: #fffbeb; }
.fee-table tr.row-cancelled[b-6392r0s25r]  { opacity: 0.6; text-decoration: line-through; }
.fee-table tr.row-opted-out[b-6392r0s25r]  { opacity: 0.5; }

/* Fee table totals row (fee heads breakdown) */
.fee-table tfoot tr.fee-table-total td[b-6392r0s25r] {
    background: var(--color-neutral-50);
    border-top: 2px solid var(--color-neutral-300);
    font-size: 0.875rem;
}

/* Fee head badges */
.badge-optional[b-6392r0s25r] {
    display: inline-block; margin-left: 6px;
    font-size: 0.65rem; font-weight: 600; padding: 1px 6px;
    border-radius: var(--radius-full);
    background: #e0e7ff; color: #3730a3;
}
.badge-opted-out[b-6392r0s25r] {
    display: inline-block; margin-left: 6px;
    font-size: 0.65rem; font-weight: 600; padding: 1px 6px;
    border-radius: var(--radius-full);
    background: var(--color-neutral-200); color: var(--color-neutral-600);
}
.text-outstanding[b-6392r0s25r] { color: #dc2626; font-weight: 600; }
.text-clear[b-6392r0s25r]        { color: var(--color-success-600); }

/* Status badges */
.status-badge[b-6392r0s25r], .status-pill[b-6392r0s25r] {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 4px 12px; border-radius: var(--radius-full);
    font-size: 0.75rem; font-weight: 600; white-space: nowrap;
}
.status-paid[b-6392r0s25r],          .status-badge.status-paid[b-6392r0s25r]      { background: #dcfce7; color: #166534; }
.status-partiallypaid[b-6392r0s25r]                                  { background: #fef9c3; color: #713f12; }
.status-pending[b-6392r0s25r]                                        { background: #fef3c7; color: #92400e; }
.status-overdue[b-6392r0s25r],       .status-badge.status-overdue[b-6392r0s25r]    { background: #fee2e2; color: #991b1b; }
.status-cancelled[b-6392r0s25r]                                      { background: var(--color-neutral-200); color: var(--color-neutral-600); }

.mode-badge[b-6392r0s25r] {
    display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px;
    border-radius: var(--radius-full); font-size: 0.75rem;
    background: var(--color-neutral-100); color: var(--color-neutral-700);
}

.receipt-number[b-6392r0s25r] { font-family: var(--font-mono, monospace); font-weight: 600; }
.txn-ref[b-6392r0s25r]        { font-family: var(--font-mono, monospace); font-size: 0.8rem; }
.text-muted[b-6392r0s25r]     { color: var(--color-neutral-400); }

/* Expand button for receipt line items */
.expand-btn[b-6392r0s25r] {
    display: inline-flex; align-items: center; justify-content: center;
    width: 20px; height: 20px;
    border: 1px solid var(--color-neutral-300); border-radius: var(--radius-full);
    background: white; cursor: pointer; margin-right: 6px;
    transition: transform var(--duration-fast);
    padding: 0; font-size: 0.6rem; color: var(--color-neutral-500);
}
.expand-btn.expanded[b-6392r0s25r] { transform: rotate(90deg); background: var(--color-primary-50); border-color: var(--color-primary-300); color: var(--color-primary-600); }
.expand-btn:hover[b-6392r0s25r] { border-color: var(--color-primary-400); color: var(--color-primary-600); }

/* Receipt detail expansion row */
.receipt-detail-row td[b-6392r0s25r] { padding: 0 !important; background: var(--color-neutral-50); }
.receipt-detail-content[b-6392r0s25r] { padding: var(--spacing-3) var(--spacing-4) var(--spacing-4) var(--spacing-6); }
.receipt-detail-table[b-6392r0s25r] { font-size: 0.8rem; }
.receipt-detail-table th[b-6392r0s25r] { background: transparent; border-bottom: 1px solid var(--color-neutral-200); padding: 4px 8px; }
.receipt-detail-table td[b-6392r0s25r] { padding: 4px 8px; border-bottom: 1px solid var(--color-neutral-100); }

/* PDF download button */
.btn-download-pdf[b-6392r0s25r] {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 4px 10px; border-radius: var(--radius-md);
    border: 1px solid #fecaca; background: #fef2f2; color: #991b1b;
    font-size: 0.75rem; font-weight: 600; cursor: pointer;
    transition: background var(--duration-fast);
}
.btn-download-pdf:hover:not(:disabled)[b-6392r0s25r] { background: #fee2e2; }
.btn-download-pdf:disabled[b-6392r0s25r] { opacity: 0.5; cursor: wait; }
.btn-download-pdf i[b-6392r0s25r] { font-size: 0.85rem; }

.alert[b-6392r0s25r] {
    display: flex; gap: var(--spacing-3); align-items: flex-start;
    padding: var(--spacing-4); background: #fef2f2; border: 1px solid #fca5a5;
    border-radius: var(--radius-lg); color: #991b1b; margin-bottom: var(--spacing-5);
}

/* Mobile */
@media (max-width: 640px) {
    .parent-fees-page[b-6392r0s25r]       { padding: var(--spacing-4); }
    .fee-amounts-grid[b-6392r0s25r]       { grid-template-columns: repeat(2, 1fr); }
    .student-info-row[b-6392r0s25r]       { flex-direction: column; }
    .payment-panel[b-6392r0s25r]          { align-items: stretch; flex-direction: column; }
    .payment-controls[b-6392r0s25r]       { align-items: stretch; flex-direction: column; }
    .payment-amount-field[b-6392r0s25r]   { min-width: 0; width: 100%; }
    .btn-pay-online[b-6392r0s25r]         { width: 100%; }
}
/* /Pages/Parent/Hostel/Attendance.razor.rz.scp.css */
.parent-hostel-page[b-25q5qgnyiz] { padding: 1.5rem; max-width: 900px; }
.page-header[b-25q5qgnyiz] { margin-bottom: 1.5rem; }
.page-title[b-25q5qgnyiz] { font-size: 1.5rem; font-weight: 700; color: #111827; margin: 0 0 0.25rem; }
.page-subtitle[b-25q5qgnyiz] { color: #6b7280; font-size: 0.875rem; margin: 0; }

.loading-center[b-25q5qgnyiz] { display: flex; justify-content: center; padding: 2rem; }
.spinner[b-25q5qgnyiz] { width: 2rem; height: 2rem; border: 3px solid #e5e7eb; border-top-color: var(--color-primary, #7c3aed); border-radius: 50%; animation: spin-b-25q5qgnyiz 0.6s linear infinite; }
@keyframes spin-b-25q5qgnyiz { to { transform: rotate(360deg); } }

.alert[b-25q5qgnyiz] { padding: 0.75rem 1rem; border-radius: 0.5rem; margin-bottom: 1rem; font-size: 0.875rem; }
.alert-danger[b-25q5qgnyiz] { background: #fef2f2; color: #dc2626; border: 1px solid #fecaca; }

.filter-row[b-25q5qgnyiz] { display: flex; gap: 0.75rem; margin-bottom: 1.25rem; align-items: flex-end; flex-wrap: wrap; }
.filter-group[b-25q5qgnyiz] { display: flex; flex-direction: column; gap: 0.3rem; }
.filter-group label[b-25q5qgnyiz] { font-size: 0.75rem; font-weight: 600; color: #374151; }
.filter-group input[b-25q5qgnyiz] { padding: 0.4rem 0.75rem; border: 1px solid #d1d5db; border-radius: 0.375rem; font-size: 0.875rem; }

.attendance-grid[b-25q5qgnyiz] { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 1rem; }
.meal-card[b-25q5qgnyiz] { background: #fff; border: 1px solid #e5e7eb; border-radius: 0.75rem; padding: 1.25rem; text-align: center; }
.meal-name[b-25q5qgnyiz] { font-weight: 700; font-size: 0.875rem; color: #374151; margin-bottom: 0.5rem; }
.meal-status[b-25q5qgnyiz] { display: inline-block; padding: 0.3rem 0.875rem; border-radius: 9999px; font-size: 0.8rem; font-weight: 700; }
.meal-status.present[b-25q5qgnyiz] { background: #d1fae5; color: #065f46; }
.meal-status.absent[b-25q5qgnyiz] { background: #fee2e2; color: #991b1b; }
.meal-status.not-marked[b-25q5qgnyiz] { background: #f3f4f6; color: #9ca3af; }
/* /Pages/Parent/Hostel/Fees.razor.rz.scp.css */
.parent-hostel-page[b-g1mbn7nf5r] { padding: 1.5rem; max-width: 900px; }
.page-header[b-g1mbn7nf5r] { margin-bottom: 1.5rem; }
.page-title[b-g1mbn7nf5r] { font-size: 1.5rem; font-weight: 700; color: #111827; margin: 0 0 0.25rem; }
.page-subtitle[b-g1mbn7nf5r] { color: #6b7280; font-size: 0.875rem; margin: 0; }

.loading-center[b-g1mbn7nf5r] { display: flex; justify-content: center; padding: 2rem; }
.spinner[b-g1mbn7nf5r] { width: 2rem; height: 2rem; border: 3px solid #e5e7eb; border-top-color: var(--color-primary, #7c3aed); border-radius: 50%; animation: spin-b-g1mbn7nf5r 0.6s linear infinite; }
@keyframes spin-b-g1mbn7nf5r { to { transform: rotate(360deg); } }

.alert[b-g1mbn7nf5r] { padding: 0.75rem 1rem; border-radius: 0.5rem; margin-bottom: 1rem; font-size: 0.875rem; }
.alert-danger[b-g1mbn7nf5r] { background: #fef2f2; color: #dc2626; border: 1px solid #fecaca; }

.table-container[b-g1mbn7nf5r] { background: #fff; border-radius: 0.75rem; border: 1px solid #e5e7eb; overflow-x: auto; }
.data-table[b-g1mbn7nf5r] { width: 100%; border-collapse: collapse; font-size: 0.875rem; }
.data-table th[b-g1mbn7nf5r] { padding: 0.75rem 1rem; text-align: left; background: #f9fafb; border-bottom: 1px solid #e5e7eb; font-weight: 600; color: #374151; }
.data-table td[b-g1mbn7nf5r] { padding: 0.75rem 1rem; border-bottom: 1px solid #f3f4f6; color: #374151; }
.data-table tr:last-child td[b-g1mbn7nf5r] { border-bottom: none; }
.empty-row[b-g1mbn7nf5r] { text-align: center; color: #9ca3af; font-style: italic; padding: 2rem !important; }

.badge[b-g1mbn7nf5r] { display: inline-block; padding: 0.2rem 0.6rem; border-radius: 9999px; font-size: 0.75rem; font-weight: 600; }
.badge-green[b-g1mbn7nf5r] { background: #d1fae5; color: #065f46; }
.badge-yellow[b-g1mbn7nf5r] { background: #fef3c7; color: #92400e; }
.badge-orange[b-g1mbn7nf5r] { background: #ffedd5; color: #9a3412; }
.badge-gray[b-g1mbn7nf5r] { background: #f3f4f6; color: #374151; }

.not-enrolled-msg[b-g1mbn7nf5r] { text-align: center; padding: 3rem; color: #6b7280; }
/* /Pages/Parent/Hostel/Index.razor.rz.scp.css */
.parent-hostel-page[b-42q5rkjdnv] { padding: 1.5rem; max-width: 900px; }
.page-header[b-42q5rkjdnv] { margin-bottom: 1.5rem; }
.page-title[b-42q5rkjdnv] { font-size: 1.5rem; font-weight: 700; color: #111827; margin: 0 0 0.25rem; }
.page-subtitle[b-42q5rkjdnv] { color: #6b7280; font-size: 0.875rem; margin: 0; }

.loading-center[b-42q5rkjdnv] { display: flex; justify-content: center; padding: 2rem; }
.spinner[b-42q5rkjdnv] { width: 2rem; height: 2rem; border: 3px solid #e5e7eb; border-top-color: var(--color-primary, #7c3aed); border-radius: 50%; animation: spin-b-42q5rkjdnv 0.6s linear infinite; }
@keyframes spin-b-42q5rkjdnv { to { transform: rotate(360deg); } }

.alert[b-42q5rkjdnv] { padding: 0.75rem 1rem; border-radius: 0.5rem; margin-bottom: 1rem; font-size: 0.875rem; }
.alert-danger[b-42q5rkjdnv] { background: #fef2f2; color: #dc2626; border: 1px solid #fecaca; }

.info-cards[b-42q5rkjdnv] { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 1rem; margin-bottom: 1.5rem; }
.info-card[b-42q5rkjdnv] { background: #fff; border: 1px solid #e5e7eb; border-radius: 0.75rem; padding: 1rem; }
.info-card.highlight[b-42q5rkjdnv] { border-color: #fca5a5; background: #fef2f2; }
.info-label[b-42q5rkjdnv] { font-size: 0.75rem; color: #6b7280; font-weight: 600; margin-bottom: 0.25rem; }
.info-value[b-42q5rkjdnv] { font-size: 1rem; font-weight: 700; color: #111827; }
.info-value.amount[b-42q5rkjdnv] { color: #dc2626; }

.section-block[b-42q5rkjdnv] { margin-bottom: 1.5rem; }
.section-title[b-42q5rkjdnv] { font-size: 1rem; font-weight: 700; color: #374151; margin: 0 0 0.75rem; }

.data-table[b-42q5rkjdnv] { width: 100%; border-collapse: collapse; font-size: 0.875rem; background: #fff; border-radius: 0.75rem; overflow: hidden; border: 1px solid #e5e7eb; }
.data-table th[b-42q5rkjdnv] { padding: 0.6rem 0.875rem; text-align: left; background: #f9fafb; border-bottom: 1px solid #e5e7eb; font-weight: 600; color: #374151; }
.data-table td[b-42q5rkjdnv] { padding: 0.6rem 0.875rem; border-bottom: 1px solid #f3f4f6; color: #374151; }
.data-table tr:last-child td[b-42q5rkjdnv] { border-bottom: none; }

.badge[b-42q5rkjdnv] { display: inline-block; padding: 0.2rem 0.6rem; border-radius: 9999px; font-size: 0.75rem; font-weight: 600; }
.badge-green[b-42q5rkjdnv] { background: #d1fae5; color: #065f46; }
.badge-yellow[b-42q5rkjdnv] { background: #fef3c7; color: #92400e; }
.badge-orange[b-42q5rkjdnv] { background: #ffedd5; color: #9a3412; }
.badge-gray[b-42q5rkjdnv] { background: #f3f4f6; color: #374151; }

.empty-text[b-42q5rkjdnv] { color: #9ca3af; font-size: 0.875rem; font-style: italic; }
.not-enrolled-msg[b-42q5rkjdnv] { text-align: center; padding: 3rem; color: #6b7280; }
/* /Pages/Parent/Hostel/Leave.razor.rz.scp.css */
.hostel-leave-page[b-pft57yqslr] { padding: 1.5rem; max-width: 700px; }
.back-link[b-pft57yqslr] { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.875rem; color: var(--color-primary-600); text-decoration: none; margin-bottom: 0.75rem; }
.page-title[b-pft57yqslr] { font-size: 1.5rem; font-weight: 700; color: var(--color-neutral-900); margin: 0; }
.page-subtitle[b-pft57yqslr] { font-size: 0.875rem; color: var(--color-neutral-500); margin: 0.25rem 0 0; }
.page-header[b-pft57yqslr] { margin-bottom: 1.5rem; }
.coming-soon-card[b-pft57yqslr] { background: white; border-radius: 1rem; border: 2px dashed var(--color-primary-200); padding: 3rem; text-align: center; }
.coming-soon-icon[b-pft57yqslr] { font-size: 3rem; color: var(--color-primary-400); margin-bottom: 1rem; }
.coming-soon-card h2[b-pft57yqslr] { font-size: 1.5rem; font-weight: 700; color: var(--color-neutral-800); margin: 0 0 0.75rem; }
.coming-soon-card p[b-pft57yqslr] { color: var(--color-neutral-500); max-width: 500px; margin: 0 auto 0.75rem; line-height: 1.6; }
.coming-features[b-pft57yqslr] { text-align: left; max-width: 440px; margin: 1.5rem auto; background: var(--color-primary-50); border-radius: 0.75rem; padding: 1.25rem; }
.coming-features h4[b-pft57yqslr] { font-size: 0.875rem; font-weight: 700; color: var(--color-primary-800); margin: 0 0 0.75rem; }
.coming-features ul[b-pft57yqslr] { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.5rem; }
.coming-features li[b-pft57yqslr] { display: flex; align-items: center; gap: 0.5rem; font-size: 0.875rem; color: var(--color-neutral-700); }
.coming-features li i[b-pft57yqslr] { color: var(--color-primary-600); }
.workaround-box[b-pft57yqslr] { display: flex; align-items: flex-start; gap: 0.75rem; background: var(--color-blue-50, #eff6ff); border: 1px solid var(--color-blue-200, #bfdbfe); border-radius: 0.75rem; padding: 1.25rem; max-width: 440px; margin: 1.5rem auto 0; text-align: left; font-size: 0.875rem; color: var(--color-blue-800, #1e40af); }
.workaround-box i[b-pft57yqslr] { color: var(--color-blue-600, #2563eb); font-size: 1.25rem; margin-top: 0.1rem; }

/* Form controls (select / input / textarea) — token-based, matching the portal dropdown style */
.form-control[b-pft57yqslr] {
    border: 1px solid var(--color-neutral-300);
    border-radius: var(--radius-md);
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
    background: var(--color-white);
    color: var(--color-neutral-800);
}
.form-control:focus[b-pft57yqslr] {
    outline: none;
    border-color: var(--color-primary-500);
}
.form-control:disabled[b-pft57yqslr] {
    background: var(--color-neutral-100);
    cursor: not-allowed;
}
/* /Pages/Parent/Hostel/Movement.razor.rz.scp.css */
.parent-hostel-page[b-l3ibwpyzjn] { padding: 1.5rem; max-width: 900px; }
.page-header[b-l3ibwpyzjn] { margin-bottom: 1.5rem; }
.page-title[b-l3ibwpyzjn] { font-size: 1.5rem; font-weight: 700; color: #111827; margin: 0 0 0.25rem; }
.page-subtitle[b-l3ibwpyzjn] { color: #6b7280; font-size: 0.875rem; margin: 0; }

.loading-center[b-l3ibwpyzjn] { display: flex; justify-content: center; padding: 2rem; }
.spinner[b-l3ibwpyzjn] { width: 2rem; height: 2rem; border: 3px solid #e5e7eb; border-top-color: var(--color-primary, #7c3aed); border-radius: 50%; animation: spin-b-l3ibwpyzjn 0.6s linear infinite; }
@keyframes spin-b-l3ibwpyzjn { to { transform: rotate(360deg); } }

.alert[b-l3ibwpyzjn] { padding: 0.75rem 1rem; border-radius: 0.5rem; margin-bottom: 1rem; font-size: 0.875rem; }
.alert-danger[b-l3ibwpyzjn] { background: #fef2f2; color: #dc2626; border: 1px solid #fecaca; }

.table-container[b-l3ibwpyzjn] { background: #fff; border-radius: 0.75rem; border: 1px solid #e5e7eb; overflow-x: auto; }
.data-table[b-l3ibwpyzjn] { width: 100%; border-collapse: collapse; font-size: 0.875rem; }
.data-table th[b-l3ibwpyzjn] { padding: 0.75rem 1rem; text-align: left; background: #f9fafb; border-bottom: 1px solid #e5e7eb; font-weight: 600; color: #374151; }
.data-table td[b-l3ibwpyzjn] { padding: 0.75rem 1rem; border-bottom: 1px solid #f3f4f6; color: #374151; }
.data-table tr:last-child td[b-l3ibwpyzjn] { border-bottom: none; }
.empty-row[b-l3ibwpyzjn] { text-align: center; color: #9ca3af; font-style: italic; padding: 2rem !important; }

.badge[b-l3ibwpyzjn] { display: inline-block; padding: 0.2rem 0.6rem; border-radius: 9999px; font-size: 0.75rem; font-weight: 600; }
.badge-green[b-l3ibwpyzjn] { background: #d1fae5; color: #065f46; }
.badge-yellow[b-l3ibwpyzjn] { background: #fef3c7; color: #92400e; }
.badge-gray[b-l3ibwpyzjn] { background: #f3f4f6; color: #374151; }

.not-enrolled-msg[b-l3ibwpyzjn] { text-align: center; padding: 3rem; color: #6b7280; }
/* /Pages/Parent/Hostel/Room.razor.rz.scp.css */
.hostel-room-page[b-d6dw64w2nv] { padding: 1.5rem; max-width: 800px; }
.back-link[b-d6dw64w2nv] { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.875rem; color: var(--color-primary-600); text-decoration: none; margin-bottom: 0.75rem; }
.page-title[b-d6dw64w2nv] { font-size: 1.5rem; font-weight: 700; color: var(--color-neutral-900); margin: 0; }
.page-subtitle[b-d6dw64w2nv] { font-size: 0.875rem; color: var(--color-neutral-500); margin: 0.25rem 0 0; }
.page-header[b-d6dw64w2nv] { margin-bottom: 1.5rem; }
.loading-center[b-d6dw64w2nv] { display: flex; flex-direction: column; align-items: center; padding: 3rem; gap: 1rem; color: var(--color-neutral-500); }
.spinner[b-d6dw64w2nv] { width: 2rem; height: 2rem; border: 3px solid var(--color-neutral-200); border-top-color: var(--color-primary-600); border-radius: 50%; animation: spin 0.8s linear infinite; }
@@keyframes spin { to[b-d6dw64w2nv] { transform: rotate(360deg); } }
.alert[b-d6dw64w2nv] { padding: 0.875rem 1rem; border-radius: 0.5rem; font-size: 0.875rem; }
.alert-danger[b-d6dw64w2nv] { background: var(--color-red-50, #fef2f2); color: var(--color-red-700, #b91c1c); border: 1px solid var(--color-red-200, #fecaca); }
.room-card[b-d6dw64w2nv] { background: white; border-radius: 1rem; border: 1px solid var(--color-neutral-200); overflow: hidden; margin-bottom: 1.25rem; }
.room-card-header[b-d6dw64w2nv] { background: linear-gradient(135deg, #7c3aed, #6d28d9); padding: 1.5rem; display: flex; gap: 1rem; align-items: center; }
.room-icon[b-d6dw64w2nv] { width: 3rem; height: 3rem; background: rgba(255,255,255,0.2); border-radius: 0.75rem; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; color: white; }
.room-number[b-d6dw64w2nv] { font-size: 1.5rem; font-weight: 700; color: white; margin: 0; }
.building-name[b-d6dw64w2nv] { color: rgba(255,255,255,0.8); font-size: 0.875rem; margin: 0.25rem 0 0; display: flex; align-items: center; gap: 0.5rem; }
.info-grid[b-d6dw64w2nv] { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; padding: 1.5rem; }
.info-item[b-d6dw64w2nv] { display: flex; flex-direction: column; gap: 0.25rem; }
.info-item.full-width[b-d6dw64w2nv] { grid-column: 1 / -1; }
.info-label[b-d6dw64w2nv] { font-size: 0.75rem; font-weight: 600; color: var(--color-neutral-500); text-transform: uppercase; letter-spacing: 0.05em; }
.info-value[b-d6dw64w2nv] { font-size: 0.95rem; color: var(--color-neutral-800); font-weight: 500; }
.badge[b-d6dw64w2nv] { display: inline-flex; align-items: center; padding: 0.2rem 0.6rem; border-radius: 9999px; font-size: 0.75rem; font-weight: 600; }
.badge-green[b-d6dw64w2nv] { background: var(--color-green-100, #dcfce7); color: var(--color-green-700, #15803d); }
.badge-blue[b-d6dw64w2nv] { background: var(--color-blue-100, #dbeafe); color: var(--color-blue-700, #1d4ed8); }
.student-info-card[b-d6dw64w2nv], .meal-card[b-d6dw64w2nv] { background: white; border-radius: 1rem; border: 1px solid var(--color-neutral-200); padding: 1.5rem; margin-bottom: 1.25rem; }
.section-title[b-d6dw64w2nv] { font-size: 1rem; font-weight: 700; color: var(--color-neutral-800); margin: 0 0 1.25rem; display: flex; align-items: center; gap: 0.5rem; }
.no-room-card[b-d6dw64w2nv], .empty-state[b-d6dw64w2nv] { background: var(--color-neutral-50); border-radius: 1rem; border: 2px dashed var(--color-neutral-200); padding: 3rem; text-align: center; color: var(--color-neutral-400); }
.no-room-card i[b-d6dw64w2nv], .empty-state i[b-d6dw64w2nv] { font-size: 2.5rem; margin-bottom: 1rem; }
.no-room-card h3[b-d6dw64w2nv] { font-size: 1.1rem; font-weight: 600; color: var(--color-neutral-500); }
.no-room-card p[b-d6dw64w2nv], .empty-state p[b-d6dw64w2nv] { font-size: 0.875rem; }
@media (max-width: 640px) { .info-grid[b-d6dw64w2nv] { grid-template-columns: 1fr; } }
/* /Pages/Parent/Inbox/Index.razor.rz.scp.css */
/* Styles handled via Tailwind utility classes in markup */
/* /Pages/Parent/Leaves.razor.rz.scp.css */
/* Parent student leave page — custom styles
   (Most layout / typography is handled by Tailwind utility classes in the .razor)
*/
.parent-leaves-page .status-badge[b-9h8icjew41] {
    display: inline-flex;
    align-items: center;
    padding: var(--spacing-1) var(--spacing-2);
    border-radius: var(--radius-full);
    font-size: var(--font-size-xs);
    font-weight: 600;
    text-transform: uppercase;
}

.parent-leaves-page .leave-type-badge[b-9h8icjew41] {
    display: inline-flex;
    align-items: center;
    padding: var(--spacing-1) var(--spacing-2);
    border-radius: var(--radius-full);
    background-color: var(--color-teal-50);
    color: var(--color-teal-700);
    font-size: var(--font-size-xs);
    font-weight: 600;
}

.parent-leaves-page .status-pendingclassteacher[b-9h8icjew41],
.parent-leaves-page .status-pending[b-9h8icjew41],
.parent-leaves-page .status-pendingescalation[b-9h8icjew41],
.parent-leaves-page .status-needmoreinfo[b-9h8icjew41] {
    background-color: var(--color-warning-100);
    color: var(--color-warning-800);
}

.parent-leaves-page .status-approved[b-9h8icjew41] {
    background-color: var(--color-success-100);
    color: var(--color-success-800);
}

.parent-leaves-page .status-rejected[b-9h8icjew41] {
    background-color: var(--color-error-100);
    color: var(--color-error-800);
}

.parent-leaves-page .status-withdrawn[b-9h8icjew41] {
    background-color: var(--color-neutral-100);
    color: var(--color-neutral-600);
}

.parent-leaves-page .spinner[b-9h8icjew41] {
    width: 1.75rem;
    height: 1.75rem;
    border: 3px solid var(--color-neutral-200);
    border-top-color: var(--color-teal-600);
    border-radius: var(--radius-full);
    animation: spin-b-9h8icjew41 0.8s linear infinite;
}

.parent-leaves-page textarea[b-9h8icjew41] {
    min-height: 64px;
}
.parent-leaves-page .child-selector button.active[b-9h8icjew41] {
    background-color: var(--color-teal-50, var(--color-teal-50));
    border-left: 4px solid var(--color-teal-500, __FALLBACK_14B8var(--color-teal-500));
}

@keyframes spin-b-9h8icjew41 {
    to { transform: rotate(360deg); }
}
/* /Pages/Parent/OmrUpload.razor.rz.scp.css */
/* Styles handled via Tailwind utility classes in markup */
/* /Pages/Parent/Ptm.razor.rz.scp.css */
/* No page-specific styles */
/* /Pages/Parent/Reports/Index.razor.rz.scp.css */
/* Parent Reports hub page — uses design tokens only */
.reports-page[b-5zgetu17nm] {
    max-width: 1200px;
    margin: 0 auto;
    padding: var(--spacing-6);
}

.reports-header[b-5zgetu17nm] {
    margin-bottom: var(--spacing-8);
}

.reports-header h1[b-5zgetu17nm] {
    font-size: var(--font-size-2xl);
    font-weight: 700;
    color: var(--color-neutral-900);
    margin: 0;
}

.reports-subtitle[b-5zgetu17nm] {
    font-size: var(--font-size-sm);
    color: var(--color-neutral-500);
    margin: var(--spacing-1) 0 0;
}

.reports-grid[b-5zgetu17nm] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: var(--spacing-6);
}

.report-card[b-5zgetu17nm] {
    display: flex;
    align-items: center;
    gap: var(--spacing-4);
    padding: var(--spacing-6);
    background: var(--color-white);
    border: 1px solid var(--color-neutral-200);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    text-decoration: none;
    color: inherit;
    transition: box-shadow 0.2s, border-color 0.2s, transform 0.15s;
}

.report-card:hover[b-5zgetu17nm] {
    box-shadow: var(--shadow-md);
    border-color: var(--color-primary-300);
    transform: translateY(-2px);
}

.report-card-icon[b-5zgetu17nm] {
    width: 56px;
    height: 56px;
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-size-xl);
    flex-shrink: 0;
}

.report-card-icon--teal[b-5zgetu17nm] {
    background: var(--color-primary-50);
    color: var(--color-primary-600);
}

.report-card-icon--orange[b-5zgetu17nm] {
    background: var(--color-warning-50);
    color: var(--color-warning-500);
}

.report-card-icon--success[b-5zgetu17nm] {
    background: var(--color-success-50);
    color: var(--color-success-600);
}

.report-card-icon--info[b-5zgetu17nm] {
    background: var(--color-neutral-100);
    color: var(--color-neutral-700);
}

.report-card-body[b-5zgetu17nm] {
    flex: 1;
    min-width: 0;
}

.report-card-body h3[b-5zgetu17nm] {
    font-size: var(--font-size-base);
    font-weight: 600;
    color: var(--color-neutral-900);
    margin: 0 0 var(--spacing-1);
}

.report-card-body p[b-5zgetu17nm] {
    font-size: var(--font-size-sm);
    color: var(--color-neutral-500);
    margin: 0;
    line-height: 1.4;
}

.report-card-arrow[b-5zgetu17nm] {
    font-size: var(--font-size-sm);
    color: var(--color-neutral-400);
    transition: transform 0.15s;
    flex-shrink: 0;
}

.report-card:hover .report-card-arrow[b-5zgetu17nm] {
    transform: translateX(4px);
    color: var(--color-primary-500);
}

/* Mobile responsive */
@media (max-width: 768px) {
    .reports-page[b-5zgetu17nm] {
        padding: var(--spacing-4);
    }

    .reports-grid[b-5zgetu17nm] {
        grid-template-columns: 1fr;
        gap: var(--spacing-4);
    }

    .report-card[b-5zgetu17nm] {
        padding: var(--spacing-4);
    }

    .report-card-icon[b-5zgetu17nm] {
        width: 48px;
        height: 48px;
        font-size: var(--font-size-lg);
    }
}
/* /Pages/Parent/Results.razor.rz.scp.css */
/* Styles handled via Tailwind utility classes in markup */
/* /Pages/Parent/SyllabusProgress/Index.razor.rz.scp.css */
/* ── Syllabus Progress (Parent) ──────────────────────────────────── */

.pp-page[b-gpdsxeixp0] {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    padding: 1rem 0;
}

/* Filter row */
.filter-row[b-gpdsxeixp0] {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.pp-select[b-gpdsxeixp0] {
    flex: 1;
    min-width: 180px;
    max-width: 320px;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--color-neutral-200);
    border-radius: 8px;
    font-size: 0.875rem;
    color: var(--color-neutral-700);
    background: var(--color-white);
}

.pp-select:disabled[b-gpdsxeixp0] {
    background: var(--color-neutral-100);
    color: var(--color-neutral-400);
    cursor: not-allowed;
}

/* Subject grid */
.subject-grid[b-gpdsxeixp0] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 1rem;
}

/* Subject card */
.subject-card[b-gpdsxeixp0] {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 1rem 1.25rem;
}

.subject-card-header[b-gpdsxeixp0] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 0.75rem;
}

.subject-card-header h3[b-gpdsxeixp0] {
    font-size: 1rem;
    font-weight: 600;
    color: #1e293b;
    margin: 0;
}

.teacher-name[b-gpdsxeixp0] {
    font-size: 0.75rem;
    color: #64748b;
}

.coverage-badge[b-gpdsxeixp0] {
    font-size: 0.75rem;
    font-weight: 600;
    color: #0d9488;
    background: #f0fdfa;
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
    white-space: nowrap;
}

/* Chapter bars */
.chapter-bars[b-gpdsxeixp0] {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    margin-bottom: 0.75rem;
}

.chapter-bar-row[b-gpdsxeixp0] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.chapter-bar-label[b-gpdsxeixp0] {
    font-size: 0.75rem;
    color: #64748b;
    width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.chapter-bar-track[b-gpdsxeixp0] {
    flex: 1;
    height: 6px;
    background: #e2e8f0;
    border-radius: 3px;
    overflow: hidden;
}

.chapter-bar-fill[b-gpdsxeixp0] {
    height: 100%;
    border-radius: 3px;
    transition: width 0.3s ease;
}

.chapter-bar-fill.good[b-gpdsxeixp0] {
    background: #10b981;
}

.chapter-bar-fill.medium[b-gpdsxeixp0] {
    background: #f59e0b;
}

.chapter-bar-fill.low[b-gpdsxeixp0] {
    background: #ef4444;
}

.chapter-bar-pct[b-gpdsxeixp0] {
    font-size: 0.7rem;
    font-weight: 600;
    color: #475569;
    min-width: 32px;
    text-align: right;
}

/* Expand button */
.expand-btn[b-gpdsxeixp0] {
    background: none;
    border: none;
    color: #0d9488;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    padding: 0.25rem 0;
}

.expand-btn:hover[b-gpdsxeixp0] {
    text-decoration: underline;
}

/* Micro chapter list */
.micro-list[b-gpdsxeixp0] {
    margin-top: 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.micro-chapter-group[b-gpdsxeixp0] {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.micro-chapter-group-label[b-gpdsxeixp0] {
    font-size: 0.75rem;
    font-weight: 600;
    color: #475569;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.micro-item[b-gpdsxeixp0] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.85rem;
    color: #475569;
    padding: 0.3rem 0.5rem;
    border-radius: 6px;
}

.micro-item.completed[b-gpdsxeixp0] {
    color: #94a3b8;
    text-decoration: line-through;
    text-decoration-color: #cbd5e1;
}

.micro-item.upcoming[b-gpdsxeixp0] {
    color: #334155;
}

.micro-item.notscheduled[b-gpdsxeixp0] {
    color: #94a3b8;
}

.micro-item.up-next[b-gpdsxeixp0] {
    background: #f0fdfa;
    border-left: 3px solid #0d9488;
}

/* Status dot */
.micro-status-dot[b-gpdsxeixp0] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.micro-item.completed .micro-status-dot[b-gpdsxeixp0] {
    background: #10b981;
}

.micro-item.upcoming .micro-status-dot[b-gpdsxeixp0] {
    background: #3b82f6;
}

.micro-item.notscheduled .micro-status-dot[b-gpdsxeixp0] {
    background: #cbd5e1;
}

/* Up next badge */
.up-next-badge[b-gpdsxeixp0] {
    font-size: 0.65rem;
    font-weight: 700;
    color: #0d9488;
    background: #ccfbf1;
    padding: 0.1rem 0.4rem;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

/* Date */
.micro-date[b-gpdsxeixp0] {
    margin-left: auto;
    font-size: 0.75rem;
    color: #94a3b8;
    white-space: nowrap;
}

/* Empty state */
.empty-state[b-gpdsxeixp0] {
    text-align: center;
    padding: 2.5rem 1rem;
    color: #94a3b8;
    font-size: 0.9rem;
}

/* Loading */
.loading-container[b-gpdsxeixp0] {
    text-align: center;
    padding: 2rem;
    color: #64748b;
}

.spinner[b-gpdsxeixp0] {
    width: 2rem;
    height: 2rem;
    border: 3px solid #e2e8f0;
    border-top-color: #0d9488;
    border-radius: 50%;
    animation: spin-b-gpdsxeixp0 0.8s linear infinite;
    margin: 0 auto 0.75rem;
}

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

/* Alert */
.alert[b-gpdsxeixp0] {
    padding: 0.75rem 1rem;
    border-radius: 8px;
    font-size: 0.875rem;
}

.alert-danger[b-gpdsxeixp0] {
    background: #fee2e2;
    color: #991b1b;
    border: 1px solid #fecaca;
}

/* ── Responsive ──────────────────────────────────────────────────── */
@media (max-width: 768px) {
    .pp-page[b-gpdsxeixp0] {
        padding: 0.5rem 0;
        gap: 0.75rem;
    }

    .subject-grid[b-gpdsxeixp0] {
        grid-template-columns: 1fr;
    }

    .subject-card[b-gpdsxeixp0] {
        padding: 0.75rem;
    }

    .chapter-bar-label[b-gpdsxeixp0] {
        width: 80px;
    }

    .micro-date[b-gpdsxeixp0] {
        display: none;
    }
}
/* /Pages/Parent/TeachingPlan/Index.razor.rz.scp.css */
/* Filter bar */
.tp-filter-bar[b-m3enduznnl] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 1rem;
    background: #fff;
    border: 1px solid #E5E7EB;
    border-radius: 0.75rem;
    padding: 1rem 1.25rem;
    margin-bottom: 1.5rem;
}

.tp-fg[b-m3enduznnl] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.tp-fl[b-m3enduznnl] {
    font-size: 0.75rem;
    font-weight: 500;
    color: #4B5563;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.tp-input[b-m3enduznnl] {
    border: 1px solid #D1D5DB;
    border-radius: 0.5rem;
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
    color: #111827;
    background: #fff;
    outline: none;
    transition: border-color 0.15s;
    min-width: 160px;
}

.tp-input:focus[b-m3enduznnl] {
    border-color: #6366F1;
}

.tp-btn-primary[b-m3enduznnl] {
    background: #4F46E5;
    color: #fff;
    border: none;
    border-radius: 0.5rem;
    padding: 0.5rem 1.25rem;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s;
}

.tp-btn-primary:hover:not(:disabled)[b-m3enduznnl] {
    background: #4338CA;
}

.tp-btn-primary:disabled[b-m3enduznnl] {
    opacity: 0.55;
    cursor: not-allowed;
}

.tp-btn-secondary[b-m3enduznnl] {
    background: #fff;
    color: #374151;
    border: 1px solid #D1D5DB;
    border-radius: 0.5rem;
    padding: 0.5rem 1.25rem;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s;
}

.tp-btn-secondary:hover[b-m3enduznnl] {
    background: #F9FAFB;
}

/* Subject badge */
.tp-subject-badge[b-m3enduznnl] {
    display: inline-block;
    background: #E0E7FF;
    color: #4338CA;
    border-radius: 0.375rem;
    padding: 0.2rem 0.65rem;
    font-size: 0.75rem;
    font-weight: 600;
    white-space: nowrap;
}

/* Pagination buttons */
.tp-page-btn[b-m3enduznnl] {
    background: #fff;
    border: 1px solid #D1D5DB;
    border-radius: 0.5rem;
    padding: 0.4rem 1rem;
    font-size: 0.875rem;
    cursor: pointer;
    color: #374151;
    transition: background 0.15s;
}

.tp-page-btn:hover:not(:disabled)[b-m3enduznnl] {
    background: #F3F4F6;
}

.tp-page-btn:disabled[b-m3enduznnl] {
    opacity: 0.4;
    cursor: not-allowed;
}
/* /Pages/Principal/AcademicSetup/GradeScales/Index.razor.rz.scp.css */
/* =============================================================
   Grade Scale Configuration Page — Scoped Styles
   ============================================================= */

.gs-page[b-qqki55ls38] {
    max-width: 1400px;
    margin: 0 auto;
    padding: 1.5rem 1.5rem 3rem;
}

/* ─── Header ─────────────────────────────────────────────────── */
.gs-header[b-qqki55ls38] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1.5rem;
    flex-wrap: wrap;
    margin-bottom: 1.25rem;
}

.gs-title[b-qqki55ls38] {
    font-size: 1.45rem;
    font-weight: 700;
    color: var(--color-neutral-900);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
}

.gs-subtitle[b-qqki55ls38] {
    font-size: 0.84rem;
    color: var(--color-neutral-500);
    margin: 0.2rem 0 0;
}

.gs-header-actions[b-qqki55ls38] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
}

/* ─── Info Banner ─────────────────────────────────────────────── */
.gs-info-banner[b-qqki55ls38] {
    background: #EFF6FF;
    border: 1px solid #BFDBFE;
    border-radius: 0.75rem;
    padding: 0.65rem 1rem;
    font-size: 0.83rem;
    color: #1E40AF;
    margin-bottom: 1.25rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* ─── Loading / Empty ─────────────────────────────────────────── */
.gs-loading[b-qqki55ls38] {
    text-align: center;
    padding: 4rem 0;
    color: var(--color-neutral-400);
    font-size: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.gs-empty[b-qqki55ls38] {
    text-align: center;
    padding: 4rem 2rem;
    color: var(--color-neutral-500);
}

.gs-empty-icon[b-qqki55ls38] {
    font-size: 3rem;
    color: var(--color-neutral-300);
    margin-bottom: 1rem;
}

.gs-empty h3[b-qqki55ls38] {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--color-neutral-700);
    margin: 0 0 0.4rem;
}

.gs-empty p[b-qqki55ls38] {
    font-size: 0.875rem;
    max-width: 480px;
    margin: 0 auto;
}

/* ─── Table Card ──────────────────────────────────────────────── */
.gs-card[b-qqki55ls38] {
    background: #fff;
    border: 1px solid var(--color-neutral-200);
    border-radius: 1rem;
    overflow: hidden;
    box-shadow: 0 1px 4px rgba(0,0,0,0.05);
}

.gs-table[b-qqki55ls38] {
    width: 100%;
    border-collapse: collapse;
}

.gs-thead-row[b-qqki55ls38] {
    background: var(--color-neutral-50);
    border-bottom: 2px solid var(--color-neutral-200);
}

.gs-th[b-qqki55ls38] {
    font-size: 0.8125rem;
    font-weight: 600;
    color: #374151;
    padding: 0.75rem 1rem;
    text-align: left;
    white-space: nowrap;
}

.gs-row[b-qqki55ls38] {
    border-bottom: 1px solid var(--color-neutral-100);
    transition: background 0.1s;
}

.gs-row:last-child[b-qqki55ls38] { border-bottom: none; }
.gs-row:hover[b-qqki55ls38] { background: var(--color-neutral-50); }

.gs-td[b-qqki55ls38] {
    font-size: 0.875rem;
    color: var(--color-neutral-900);
    padding: 0.6rem 1rem;
    vertical-align: middle;
}

.gs-mono[b-qqki55ls38] { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.gs-muted[b-qqki55ls38] { color: var(--color-neutral-500); }

/* ─── Grade Badges ────────────────────────────────────────────── */
.gs-grade-badge[b-qqki55ls38] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.4rem;
    padding: 0.2rem 0.5rem;
    border-radius: 0.4rem;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.gs-badge-aplus[b-qqki55ls38] { background: #DCFCE7; color: #166534; }
.gs-badge-a[b-qqki55ls38]     { background: #D1FAE5; color: #065F46; }
.gs-badge-b[b-qqki55ls38]     { background: #DBEAFE; color: #1E40AF; }
.gs-badge-c[b-qqki55ls38]     { background: #EDE9FE; color: #5B21B6; }
.gs-badge-d[b-qqki55ls38]     { background: #FEF3C7; color: #92400E; }
.gs-badge-e[b-qqki55ls38]     { background: #FED7AA; color: #9A3412; }
.gs-badge-f[b-qqki55ls38]     { background: #FEE2E2; color: #991B1B; }

/* ─── Status Chips ────────────────────────────────────────────── */
.gs-status[b-qqki55ls38] {
    display: inline-flex;
    padding: 0.15rem 0.55rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 600;
}

.gs-status-active[b-qqki55ls38]   { background: #DCFCE7; color: #166534; }
.gs-status-inactive[b-qqki55ls38] { background: var(--color-neutral-100); color: var(--color-neutral-500); }

/* ─── Row Actions ─────────────────────────────────────────────── */
.gs-row-actions[b-qqki55ls38] {
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

.gs-btn-icon[b-qqki55ls38] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border: 1px solid var(--color-neutral-200);
    border-radius: 0.4rem;
    background: #fff;
    color: var(--color-neutral-500);
    cursor: pointer;
    transition: all 0.15s;
    font-size: 0.8rem;
}

.gs-btn-icon:hover[b-qqki55ls38] { border-color: var(--color-primary-400); color: var(--color-primary-600); background: var(--color-teal-50); }
.gs-btn-icon.gs-btn-danger:hover[b-qqki55ls38] { border-color: #F87171; color: #DC2626; background: #FEF2F2; }

/* ─── Buttons ─────────────────────────────────────────────────── */
.gs-btn-primary[b-qqki55ls38] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0 1rem;
    height: 38px;
    border-radius: 0.5rem;
    font-size: 0.84rem;
    font-weight: 600;
    background: var(--color-primary-600);
    color: #fff;
    border: none;
    cursor: pointer;
    transition: background 0.15s;
    white-space: nowrap;
}

.gs-btn-primary:hover:not(:disabled)[b-qqki55ls38] { background: var(--color-primary-700); }
.gs-btn-primary:disabled[b-qqki55ls38] { opacity: 0.55; cursor: not-allowed; }

.gs-btn-secondary[b-qqki55ls38] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0 1rem;
    height: 38px;
    border-radius: 0.5rem;
    font-size: 0.84rem;
    font-weight: 600;
    background: #fff;
    color: var(--color-neutral-700);
    border: 1.5px solid var(--color-neutral-300);
    cursor: pointer;
    transition: all 0.15s;
    white-space: nowrap;
}

.gs-btn-secondary:hover:not(:disabled)[b-qqki55ls38] { border-color: var(--color-primary-400); color: var(--color-primary-600); }
.gs-btn-secondary:disabled[b-qqki55ls38] { opacity: 0.55; cursor: not-allowed; }

.gs-btn-danger[b-qqki55ls38] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0 1rem;
    height: 38px;
    border-radius: 0.5rem;
    font-size: 0.84rem;
    font-weight: 600;
    background: #DC2626;
    color: #fff;
    border: none;
    cursor: pointer;
    transition: background 0.15s;
    white-space: nowrap;
}

.gs-btn-danger:hover:not(:disabled)[b-qqki55ls38] { background: #B91C1C; }
.gs-btn-danger:disabled[b-qqki55ls38] { opacity: 0.55; cursor: not-allowed; }

/* ─── Select ──────────────────────────────────────────────────── */
.gs-select[b-qqki55ls38] {
    height: 38px;
    padding: 0 0.75rem;
    border: 1.5px solid var(--color-neutral-300);
    border-radius: 0.5rem;
    font-size: 0.84rem;
    color: var(--color-neutral-700);
    background: #fff;
    cursor: pointer;
}

/* ─── Modal ───────────────────────────────────────────────────── */
.gs-modal-backdrop[b-qqki55ls38] {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.4);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

.gs-modal[b-qqki55ls38] {
    background: #fff;
    border-radius: 1rem;
    width: 100%;
    max-width: 560px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.2);
    display: flex;
    flex-direction: column;
    max-height: 90vh;
    overflow: hidden;
}

.gs-modal-sm[b-qqki55ls38] { max-width: 400px; }

.gs-modal-header[b-qqki55ls38] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.1rem 1.5rem;
    border-bottom: 1px solid var(--color-neutral-200);
}

.gs-modal-title[b-qqki55ls38] {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--color-neutral-900);
    margin: 0;
}

.gs-close-btn[b-qqki55ls38] {
    background: none;
    border: none;
    font-size: 1.1rem;
    color: var(--color-neutral-400);
    cursor: pointer;
    padding: 0.25rem;
    transition: color 0.15s;
}

.gs-close-btn:hover[b-qqki55ls38] { color: var(--color-neutral-700); }

.gs-modal-body[b-qqki55ls38] {
    padding: 1.25rem 1.5rem;
    overflow-y: auto;
}

.gs-modal-footer[b-qqki55ls38] {
    padding: 1rem 1.5rem;
    border-top: 1px solid var(--color-neutral-200);
    display: flex;
    justify-content: flex-end;
    gap: 0.6rem;
}

/* ─── Form ────────────────────────────────────────────────────── */
.gs-form-error[b-qqki55ls38] {
    background: #FEF2F2;
    border: 1px solid #FECACA;
    border-radius: 0.5rem;
    padding: 0.6rem 0.9rem;
    font-size: 0.83rem;
    color: #DC2626;
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.gs-form-grid[b-qqki55ls38] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.gs-field[b-qqki55ls38] { display: flex; flex-direction: column; gap: 0.3rem; }
.gs-field-full[b-qqki55ls38] { grid-column: 1 / -1; }

.gs-label[b-qqki55ls38] {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--color-neutral-600);
}

.gs-input[b-qqki55ls38] {
    height: 38px;
    padding: 0 0.75rem;
    border: 1.5px solid var(--color-neutral-300);
    border-radius: 0.5rem;
    font-size: 0.875rem;
    color: var(--color-neutral-900);
    transition: border-color 0.15s;
    width: 100%;
}

.gs-input:focus[b-qqki55ls38] {
    outline: none;
    border-color: var(--color-primary-500);
    box-shadow: 0 0 0 3px rgba(20,184,166,0.12);
}

.gs-hint[b-qqki55ls38] {
    font-size: 0.74rem;
    color: var(--color-neutral-400);
}

.gs-toggle-row[b-qqki55ls38] {
    flex-direction: row;
    align-items: center;
    gap: 0.6rem;
}

/* ─── Utility ─────────────────────────────────────────────────── */
.mt-2[b-qqki55ls38] { margin-top: 0.5rem; }
.mt-4[b-qqki55ls38] { margin-top: 1rem; }
.mr-1[b-qqki55ls38] { margin-right: 0.25rem; }

@media (max-width: 768px) {
    .gs-form-grid[b-qqki55ls38] { grid-template-columns: 1fr; }
    .gs-header[b-qqki55ls38] { flex-direction: column; }
    .gs-header-actions[b-qqki55ls38] { width: 100%; }
}
/* /Pages/Principal/Admissions/Details.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════════
   Admission Details — enterprise redesign
   ═══════════════════════════════════════════════════════════════ */

/* ── Page shell ─────────────────────────────────────────── */
.adm-page[b-mqry1k3ifp] {
    max-width: 1600px;
    margin: 0 auto;
    padding: 28px 32px;
    background: #F8FAFC;
    min-height: 100vh;
}

/* ── Back nav bar ──────────────────────────────────────── */
.adm-back-bar[b-mqry1k3ifp] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
    color: #64748B;
    font-size: 0.82rem;
}
.adm-back-btn[b-mqry1k3ifp] {
    display: flex;
    align-items: center;
    gap: 6px;
    background: none;
    border: none;
    cursor: pointer;
    color: #64748B;
    font-size: 0.82rem;
    padding: 6px 10px;
    border-radius: 6px;
    transition: background 0.15s, color 0.15s;
}
.adm-back-btn:hover[b-mqry1k3ifp] { background: #E2E8F0; color: #1E293B; }

/* ── Hero applicant card ────────────────────────────────── */
.adm-hero[b-mqry1k3ifp] {
    background: #FFFFFF;
    border: 1px solid #E2E8F0;
    border-radius: 16px;
    padding: 24px 28px;
    margin-bottom: 24px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    display: flex;
    align-items: flex-start;
    gap: 20px;
}
.adm-hero-photo[b-mqry1k3ifp] {
    width: 72px;
    height: 88px;
    border-radius: 10px;
    object-fit: cover;
    border: 2px solid #E2E8F0;
    flex-shrink: 0;
}
.adm-hero-photo-placeholder[b-mqry1k3ifp] {
    width: 72px;
    height: 88px;
    border-radius: 10px;
    background: #F1F5F9;
    border: 2px solid #E2E8F0;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: #CBD5E1;
    font-size: 2rem;
}
.adm-hero-body[b-mqry1k3ifp] {
    flex: 1;
    min-width: 0;
}
.adm-hero-name[b-mqry1k3ifp] {
    font-size: 1.6rem;
    font-weight: 700;
    color: #0F172A;
    margin: 0 0 4px;
    line-height: 1.2;
}
.adm-hero-meta[b-mqry1k3ifp] {
    font-size: 0.875rem;
    color: #64748B;
    margin-bottom: 12px;
}
.adm-hero-chips[b-mqry1k3ifp] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}
.adm-chip[b-mqry1k3ifp] {
    font-size: 0.75rem;
    font-weight: 500;
    padding: 3px 10px;
    border-radius: 20px;
    background: #F1F5F9;
    color: #475569;
    border: 1px solid #E2E8F0;
}
.adm-hero-right[b-mqry1k3ifp] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
    flex-shrink: 0;
}

/* ── Status badge ───────────────────────────────────────── */
.adm-status-badge[b-mqry1k3ifp] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 16px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.adm-status-badge.draft[b-mqry1k3ifp]        { background: #F1F5F9; color: #64748B; }
.adm-status-badge.submitted[b-mqry1k3ifp]    { background: #EFF6FF; color: #1D4ED8; border: 1px solid #BFDBFE; }
.adm-status-badge.under-review[b-mqry1k3ifp] { background: #FFFBEB; color: #D97706; border: 1px solid #FDE68A; }
.adm-status-badge.approved[b-mqry1k3ifp]     { background: #ECFDF5; color: #059669; border: 1px solid #A7F3D0; }
.adm-status-badge.rejected[b-mqry1k3ifp]     { background: #FEF2F2; color: #DC2626; border: 1px solid #FECACA; }
.adm-status-badge.enrolled[b-mqry1k3ifp]     { background: #EFF6FF; color: var(--color-teal-700); border: 1px solid #99F6E4; }
.adm-status-badge.feeaccepted[b-mqry1k3ifp]  { background: #ECFDF5; color: #059669; border: 1px solid #A7F3D0; }

/* ── 2-column workspace ─────────────────────────────────── */
.adm-workspace[b-mqry1k3ifp] {
    display: grid;
    grid-template-columns: 1fr 380px;
    gap: 24px;
    align-items: start;
}
.adm-main[b-mqry1k3ifp]  { display: flex; flex-direction: column; gap: 20px; }
.adm-panel[b-mqry1k3ifp] { display: flex; flex-direction: column; gap: 16px; position: sticky; top: 16px; }

/* ── Section card ───────────────────────────────────────── */
.adm-card[b-mqry1k3ifp] {
    background: #FFFFFF;
    border: 1px solid #E2E8F0;
    border-radius: 12px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.04);
    overflow: hidden;
}

/* ── Soft section header (replaces dark green bars) ─────── */
.adm-card-header[b-mqry1k3ifp] {
    background: #F8FAFC;
    border-bottom: 1px solid #E2E8F0;
    border-left: 4px solid var(--color-teal-700);
    padding: 11px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.adm-card-header h3[b-mqry1k3ifp] {
    margin: 0;
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #374151;
    display: flex;
    align-items: center;
    gap: 8px;
}
.adm-card-header h3 i[b-mqry1k3ifp] { color: var(--color-teal-700); }
.adm-card-body[b-mqry1k3ifp] { padding: 20px; }

/* ── Property rows ──────────────────────────────────────── */
.adm-prop-section[b-mqry1k3ifp] { margin-bottom: 1.1rem; }
.adm-prop-section:last-child[b-mqry1k3ifp] { margin-bottom: 0; }
.adm-prop-section-title[b-mqry1k3ifp] {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #94A3B8;
    padding-bottom: 6px;
    border-bottom: 1px solid #F1F5F9;
    margin-bottom: 4px;
}
.adm-prop-grid[b-mqry1k3ifp] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
}
.adm-prop-row[b-mqry1k3ifp] {
    display: flex;
    flex-direction: column;
    padding: 7px 0;
    border-bottom: 1px solid #F8FAFC;
    gap: 2px;
}
.adm-prop-row.full[b-mqry1k3ifp] { grid-column: 1 / -1; }
.adm-prop-label[b-mqry1k3ifp] {
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #94A3B8;
}
.adm-prop-value[b-mqry1k3ifp] {
    font-size: 0.9rem;
    font-weight: 500;
    color: #1E293B;
}

/* ── Document cards ─────────────────────────────────────── */
.adm-doc-grid[b-mqry1k3ifp] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 12px;
}
.adm-doc-card[b-mqry1k3ifp] {
    border: 1px solid #E2E8F0;
    border-radius: 10px;
    padding: 14px;
    background: #FAFAFA;
    display: flex;
    flex-direction: column;
    gap: 8px;
    transition: box-shadow 0.15s;
}
.adm-doc-card:hover[b-mqry1k3ifp] { box-shadow: 0 4px 12px rgba(0,0,0,0.08); }
.adm-doc-icon[b-mqry1k3ifp] {
    font-size: 1.5rem;
    color: var(--color-teal-700);
}
.adm-doc-name[b-mqry1k3ifp] {
    font-size: 0.875rem;
    font-weight: 600;
    color: #1E293B;
    line-height: 1.3;
}
.adm-doc-type[b-mqry1k3ifp] {
    font-size: 0.72rem;
    color: #94A3B8;
}
.adm-doc-status[b-mqry1k3ifp] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.7rem;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 10px;
}
.adm-doc-status.verified[b-mqry1k3ifp] { background: #ECFDF5; color: #059669; }
.adm-doc-status.pending[b-mqry1k3ifp]  { background: #FFFBEB; color: #D97706; }
.adm-doc-status.rejected[b-mqry1k3ifp] { background: #FEF2F2; color: #DC2626; }
.adm-doc-actions[b-mqry1k3ifp] {
    display: flex;
    gap: 6px;
    margin-top: auto;
}
.adm-doc-actions a[b-mqry1k3ifp] {
    flex: 1;
    text-align: center;
    font-size: 0.72rem;
    font-weight: 600;
    padding: 5px 0;
    border-radius: 6px;
    border: 1px solid #E2E8F0;
    color: var(--color-teal-700);
    background: #fff;
    text-decoration: none;
    transition: background 0.12s;
}
.adm-doc-actions a:hover[b-mqry1k3ifp] { background: #F0FDF9; }

/* ── Decision panel card ────────────────────────────────── */
.adm-decision-card[b-mqry1k3ifp] {
    background: #FFFFFF;
    border: 1px solid #E2E8F0;
    border-radius: 12px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.06);
    overflow: hidden;
}
.adm-decision-header[b-mqry1k3ifp] {
    background: linear-gradient(135deg, var(--color-teal-700) 0%, #0E7490 100%);
    padding: 16px 20px;
}
.adm-decision-header-label[b-mqry1k3ifp] {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgba(255,255,255,0.7);
    margin-bottom: 4px;
}
.adm-decision-header-status[b-mqry1k3ifp] {
    font-size: 1.1rem;
    font-weight: 700;
    color: #FFFFFF;
}
.adm-decision-body[b-mqry1k3ifp] { padding: 16px 20px; }
.adm-decision-body .action-group[b-mqry1k3ifp] { display: flex; flex-direction: column; gap: 10px; }

/* ── Decision action buttons ────────────────────────────── */
.adm-btn[b-mqry1k3ifp] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    min-height: 44px;
    padding: 10px 16px;
    border-radius: 8px;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    border: none;
    transition: all 0.15s;
}
.adm-btn:disabled[b-mqry1k3ifp] { opacity: 0.5; cursor: not-allowed; }
.adm-btn-review[b-mqry1k3ifp]  { background: #FFFBEB; color: #D97706; border: 1.5px solid #FDE68A; }
.adm-btn-review:hover:not(:disabled)[b-mqry1k3ifp]  { background: #FEF3C7; }
.adm-btn-approve[b-mqry1k3ifp] { background: #059669; color: #FFFFFF; }
.adm-btn-approve:hover:not(:disabled)[b-mqry1k3ifp] { background: #047857; box-shadow: 0 4px 12px rgba(5,150,105,0.3); }
.adm-btn-reject[b-mqry1k3ifp]  { background: #FEF2F2; color: #DC2626; border: 1.5px solid #FECACA; }
.adm-btn-reject:hover:not(:disabled)[b-mqry1k3ifp]  { background: #FEE2E2; }
.adm-btn-enroll[b-mqry1k3ifp]  { background: var(--color-teal-700); color: #FFFFFF; }
.adm-btn-enroll:hover:not(:disabled)[b-mqry1k3ifp]  { background: #0D6560; box-shadow: 0 4px 12px rgba(15,118,110,0.3); }
.adm-enrolled-badge[b-mqry1k3ifp] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 16px;
    border-radius: 8px;
    background: #ECFDF5;
    color: #059669;
    font-weight: 600;
    font-size: 0.85rem;
    border: 1.5px solid #A7F3D0;
}
.adm-btn-secondary[b-mqry1k3ifp] { background: #F1F5F9; color: #475569; border: 1px solid #E2E8F0; }
.adm-btn-secondary:hover:not(:disabled)[b-mqry1k3ifp] { background: #E2E8F0; }

/* ── Remarks / notes ────────────────────────────────────── */
.adm-textarea[b-mqry1k3ifp] {
    width: 100%;
    padding: 10px 12px;
    font-size: 0.875rem;
    border: 1.5px solid #E2E8F0;
    border-radius: 8px;
    resize: vertical;
    background: #FAFAFA;
    color: #1E293B;
    transition: border 0.15s;
    box-sizing: border-box;
}
.adm-textarea:focus[b-mqry1k3ifp] { outline: none; border-color: var(--color-teal-700); background: #fff; }
.adm-current-remarks[b-mqry1k3ifp] {
    margin-top: 10px;
    padding: 10px 12px;
    background: #F8FAFC;
    border: 1px solid #E2E8F0;
    border-radius: 8px;
    font-size: 0.82rem;
    color: #475569;
    line-height: 1.5;
}

/* ── Timeline ───────────────────────────────────────────── */
.adm-timeline[b-mqry1k3ifp] { display: flex; flex-direction: column; gap: 0; position: relative; }
.adm-tl-item[b-mqry1k3ifp] {
    display: flex;
    gap: 12px;
    padding-bottom: 16px;
    position: relative;
}
.adm-tl-item:last-child[b-mqry1k3ifp] { padding-bottom: 0; }
.adm-tl-left[b-mqry1k3ifp] {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-shrink: 0;
    width: 32px;
}
.adm-tl-dot[b-mqry1k3ifp] {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    flex-shrink: 0;
    position: relative;
    z-index: 2;
}
.adm-tl-dot.completed[b-mqry1k3ifp] { background: #ECFDF5; color: #059669; border: 2px solid #6EE7B7; }
.adm-tl-dot.current[b-mqry1k3ifp]   { background: #FFFBEB; color: #D97706; border: 2px solid #FCD34D; box-shadow: 0 0 0 3px rgba(251,191,36,0.2); }
.adm-tl-dot.rejected[b-mqry1k3ifp]  { background: #FEF2F2; color: #DC2626; border: 2px solid #FCA5A5; }
.adm-tl-dot.pending[b-mqry1k3ifp]   { background: #F8FAFC; color: #CBD5E1; border: 2px solid #E2E8F0; }
.adm-tl-connector[b-mqry1k3ifp] {
    flex: 1;
    width: 2px;
    background: #E2E8F0;
    min-height: 12px;
    margin-top: 2px;
}
.adm-tl-connector.completed[b-mqry1k3ifp] { background: #6EE7B7; }
.adm-tl-body[b-mqry1k3ifp] { flex: 1; padding-top: 5px; }
.adm-tl-label[b-mqry1k3ifp] { font-size: 0.875rem; color: #1E293B; font-weight: 600; }
.adm-tl-label.pending[b-mqry1k3ifp] { color: #94A3B8; font-weight: 400; }
.adm-tl-label.rejected[b-mqry1k3ifp] { color: #DC2626; }
.adm-tl-label.current[b-mqry1k3ifp] { color: #D97706; }
.adm-tl-desc[b-mqry1k3ifp] { font-size: 0.75rem; color: #64748B; margin-top: 2px; }
.adm-tl-desc.pending[b-mqry1k3ifp] { color: #CBD5E1; font-style: italic; }
.adm-tl-time[b-mqry1k3ifp] { font-size: 0.7rem; color: #94A3B8; margin-top: 3px; }
.adm-tl-current-badge[b-mqry1k3ifp] {
    display: inline-block;
    margin-top: 4px;
    font-size: 0.65rem;
    font-weight: 700;
    background: #FFFBEB;
    color: #D97706;
    border: 1px solid #FDE68A;
    padding: 2px 8px;
    border-radius: 10px;
}

/* ── Fee structure ──────────────────────────────────────── */
.adm-fee-summary[b-mqry1k3ifp] {
    background: linear-gradient(135deg, var(--color-teal-700) 0%, #0E7490 100%);
    border-radius: 10px;
    padding: 16px 20px;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.adm-fee-summary-label[b-mqry1k3ifp] {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: rgba(255,255,255,0.75);
}
.adm-fee-summary-amount[b-mqry1k3ifp] {
    font-size: 1.5rem;
    font-weight: 800;
    color: #FFFFFF;
    margin-top: 2px;
}
.adm-fee-table[b-mqry1k3ifp] { width: 100%; border-collapse: collapse; font-size: 0.875rem; }
.adm-fee-table thead th[b-mqry1k3ifp] {
    padding: 8px 10px;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #94A3B8;
    border-bottom: 2px solid #F1F5F9;
    text-align: left;
}
.adm-fee-table thead th:last-child[b-mqry1k3ifp] { text-align: right; }
.adm-fee-table tbody tr:nth-child(odd)[b-mqry1k3ifp]  { background: #FAFAFA; }
.adm-fee-table tbody tr:nth-child(even)[b-mqry1k3ifp] { background: #FFFFFF; }
.adm-fee-table tbody tr:hover[b-mqry1k3ifp] { background: #F0FDF9; }
.adm-fee-table td[b-mqry1k3ifp] {
    padding: 9px 10px;
    color: #374151;
    border-bottom: 1px solid #F1F5F9;
    vertical-align: middle;
}
.adm-fee-table td:last-child[b-mqry1k3ifp] { text-align: right; font-weight: 600; color: #1E293B; }
.adm-fee-table .optional-tag[b-mqry1k3ifp] {
    font-size: 0.65rem;
    color: #94A3B8;
    margin-left: 4px;
}
.adm-fee-total-row[b-mqry1k3ifp] { background: #F0FDF9 !important; }
.adm-fee-total-row td[b-mqry1k3ifp] {
    font-weight: 700;
    color: var(--color-teal-700) !important;
    font-size: 0.9rem;
    border-top: 2px solid #A7F3D0;
}
.adm-fee-opt-row td[b-mqry1k3ifp] { color: #64748B !important; font-weight: 500 !important; }

/* ── Readiness score widget ─────────────────────────────── */
.adm-readiness-card[b-mqry1k3ifp] {
    background: #FFFFFF;
    border: 1px solid #E2E8F0;
    border-radius: 12px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.04);
    overflow: hidden;
}
.adm-readiness-header[b-mqry1k3ifp] {
    background: #F8FAFC;
    border-bottom: 1px solid #E2E8F0;
    border-left: 4px solid var(--color-teal-700);
    padding: 11px 20px;
}
.adm-readiness-header h3[b-mqry1k3ifp] {
    margin: 0;
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #374151;
    display: flex;
    align-items: center;
    gap: 8px;
}
.adm-readiness-header h3 i[b-mqry1k3ifp] { color: var(--color-teal-700); }
.adm-readiness-body[b-mqry1k3ifp] { padding: 16px 20px; }
.adm-readiness-score-row[b-mqry1k3ifp] {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 14px;
}
.adm-readiness-circle[b-mqry1k3ifp] {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: conic-gradient(var(--color-teal-700) 0% var(--pct, 0%), #E2E8F0 var(--pct, 0%) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    position: relative;
}
.adm-readiness-circle[b-mqry1k3ifp]::after {
    content: '';
    position: absolute;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #fff;
}
.adm-readiness-pct[b-mqry1k3ifp] {
    position: relative;
    z-index: 1;
    font-size: 0.95rem;
    font-weight: 800;
    color: var(--color-teal-700);
}
.adm-readiness-label[b-mqry1k3ifp] {
    font-size: 0.82rem;
    color: #64748B;
}
.adm-readiness-label strong[b-mqry1k3ifp] { font-size: 1rem; color: #1E293B; display: block; }
.adm-readiness-checklist[b-mqry1k3ifp] { display: flex; flex-direction: column; gap: 7px; }
.adm-readiness-item[b-mqry1k3ifp] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.82rem;
    color: #475569;
}
.adm-readiness-item i.ok[b-mqry1k3ifp]   { color: #059669; }
.adm-readiness-item i.warn[b-mqry1k3ifp] { color: #D97706; }
.adm-readiness-item i.fail[b-mqry1k3ifp] { color: #DC2626; }

/* ── Fee declaration alert ──────────────────────────────── */
.adm-declaration-ok[b-mqry1k3ifp] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 14px;
    background: #ECFDF5;
    border: 1px solid #A7F3D0;
    border-radius: 8px;
    font-size: 0.82rem;
    color: #065F46;
}
.adm-declaration-ok i[b-mqry1k3ifp] { font-size: 1rem; margin-top: 1px; flex-shrink: 0; }
.adm-declaration-pending[b-mqry1k3ifp] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 14px;
    background: #FFFBEB;
    border: 1px solid #FDE68A;
    border-radius: 8px;
    font-size: 0.82rem;
    color: #92400E;
}
.adm-declaration-pending i[b-mqry1k3ifp] { font-size: 1rem; margin-top: 1px; flex-shrink: 0; }

/* ── Siblings table ─────────────────────────────────────── */
.adm-siblings-table[b-mqry1k3ifp] { width: 100%; border-collapse: collapse; font-size: 0.82rem; margin-top: 4px; }
.adm-siblings-table th[b-mqry1k3ifp] {
    padding: 5px 8px;
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #94A3B8;
    text-align: left;
    border-bottom: 1px solid #F1F5F9;
}
.adm-siblings-table td[b-mqry1k3ifp] {
    padding: 6px 8px;
    color: #374151;
    border-bottom: 1px solid #F8FAFC;
}

/* ── Responsive ─────────────────────────────────────────── */
@media (max-width: 1100px) {
    .adm-workspace[b-mqry1k3ifp] { grid-template-columns: 1fr 340px; }
}
@media (max-width: 900px) {
    .adm-workspace[b-mqry1k3ifp] { grid-template-columns: 1fr; }
    .adm-panel[b-mqry1k3ifp] { position: static; }
    .adm-page[b-mqry1k3ifp] { padding: 16px; }
}
@media (max-width: 600px) {
    .adm-prop-grid[b-mqry1k3ifp] { grid-template-columns: 1fr; }
    .adm-hero[b-mqry1k3ifp] { flex-direction: column; gap: 14px; }
    .adm-hero-right[b-mqry1k3ifp] { align-items: flex-start; }
}
/* /Pages/Principal/Admissions/Edit.razor.rz.scp.css */
.adm-edit-page[b-tbmfkgxelf] {
    padding: 1rem;
    max-width: 1280px;
    margin: 0 auto;
}

.adm-edit-header[b-tbmfkgxelf] {
    display: flex;
    align-items: flex-start;
    gap: 0.9rem;
    margin-bottom: 1rem;
}

.adm-edit-header h1[b-tbmfkgxelf] {
    margin: 0;
    font-size: 1.35rem;
    font-weight: 700;
    color: #0f172a;
}

.adm-edit-header p[b-tbmfkgxelf] {
    margin: 0.2rem 0 0;
    color: #475569;
    font-size: 0.88rem;
}

.adm-edit-back[b-tbmfkgxelf] {
    border: 1px solid #cbd5e1;
    background: #fff;
    color: #0f172a;
    border-radius: 0.5rem;
    padding: 0.45rem 0.7rem;
    font-size: 0.82rem;
    cursor: pointer;
}

.adm-edit-loading[b-tbmfkgxelf],
.adm-edit-error[b-tbmfkgxelf],
.adm-edit-status[b-tbmfkgxelf] {
    border-radius: 0.6rem;
    padding: 0.75rem 0.9rem;
    margin-bottom: 0.9rem;
    font-size: 0.85rem;
}

.adm-edit-loading[b-tbmfkgxelf] {
    display: flex;
    gap: 0.6rem;
    align-items: center;
    background: #f8fafc;
    color: #334155;
}

.adm-edit-error[b-tbmfkgxelf],
.adm-edit-status.error[b-tbmfkgxelf] {
    background: #fef2f2;
    color: #b91c1c;
    border: 1px solid #fecaca;
}

.adm-edit-status.success[b-tbmfkgxelf] {
    background: #ecfdf5;
    color: #065f46;
    border: 1px solid #a7f3d0;
}

.adm-edit-grid[b-tbmfkgxelf] {
    display: grid;
    gap: 0.85rem;
}

.adm-edit-card[b-tbmfkgxelf] {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 0.75rem;
    padding: 0.8rem;
}

.adm-edit-card h2[b-tbmfkgxelf] {
    margin: 0 0 0.55rem;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: #475569;
}

.form-grid[b-tbmfkgxelf] {
    display: grid;
    gap: 0.5rem;
}

.form-grid.two[b-tbmfkgxelf] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.form-grid.three[b-tbmfkgxelf] {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.form-grid label[b-tbmfkgxelf] {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    font-size: 0.75rem;
    color: #475569;
}

.form-grid label.full[b-tbmfkgxelf] {
    grid-column: 1 / -1;
}

.form-grid input[b-tbmfkgxelf],
.form-grid select[b-tbmfkgxelf],
.form-grid textarea[b-tbmfkgxelf] {
    border: 1px solid #cbd5e1;
    border-radius: 0.45rem;
    padding: 0.42rem 0.5rem;
    font-size: 0.82rem;
    color: #0f172a;
    background: #fff;
}

.card-header-row[b-tbmfkgxelf] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.45rem;
}

.small-btn[b-tbmfkgxelf],
.remove-btn[b-tbmfkgxelf],
.btn-primary[b-tbmfkgxelf],
.btn-secondary[b-tbmfkgxelf] {
    border: 1px solid #cbd5e1;
    border-radius: 0.45rem;
    padding: 0.38rem 0.62rem;
    cursor: pointer;
    font-size: 0.78rem;
}

.small-btn[b-tbmfkgxelf] {
    background: #f8fafc;
}

.remove-btn[b-tbmfkgxelf] {
    margin-top: 0.45rem;
    background: #fff1f2;
    border-color: #fecdd3;
    color: #be123c;
}

.sub-card[b-tbmfkgxelf] {
    border: 1px dashed #cbd5e1;
    border-radius: 0.55rem;
    padding: 0.55rem;
    margin-bottom: 0.5rem;
}

.muted[b-tbmfkgxelf] {
    color: #64748b;
    font-size: 0.8rem;
    margin: 0;
}

.adm-edit-actions[b-tbmfkgxelf] {
    display: flex;
    justify-content: flex-end;
    gap: 0.55rem;
    margin-top: 0.9rem;
}

.btn-secondary[b-tbmfkgxelf] {
    background: #fff;
}

.btn-primary[b-tbmfkgxelf] {
    background: #0ea5e9;
    border-color: #0ea5e9;
    color: #fff;
}

@media (max-width: 1024px) {
    .form-grid.three[b-tbmfkgxelf] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 768px) {
    .adm-edit-page[b-tbmfkgxelf] {
        padding: 0.8rem;
    }

    .adm-edit-header[b-tbmfkgxelf] {
        flex-direction: column;
        align-items: stretch;
    }

    .form-grid.two[b-tbmfkgxelf],
    .form-grid.three[b-tbmfkgxelf] {
        grid-template-columns: 1fr;
    }
}
/* /Pages/Principal/Analytics/StudentPerformance/Index.razor.rz.scp.css */
/* =============================================================
   Student Performance Intelligence — Principal Analytics
   Scoped styles for /principal/analytics/students
   ============================================================= */

/* ─── Page Shell ──────────────────────────────────────────────── */
.spa-page[b-52nmer7q90] {
    max-width: 1700px;
    margin: 0 auto;
    padding: 1.5rem 2rem 3rem;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

/* ─── Header ──────────────────────────────────────────────────── */
.spa-header[b-52nmer7q90] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.spa-title[b-52nmer7q90] {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--color-neutral-900);
    display: flex;
    align-items: center;
    gap: 0.55rem;
    margin: 0;
}

.spa-title i[b-52nmer7q90] { color: var(--color-primary-600); }

.spa-subtitle[b-52nmer7q90] {
    font-size: 0.82rem;
    color: var(--color-neutral-500);
    margin: 0.2rem 0 0;
}

.spa-header-actions[b-52nmer7q90] { display: flex; gap: 0.6rem; }

/* ─── Buttons ──────────────────────────────────────────────────── */
.spa-btn-outline[b-52nmer7q90] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    height: 38px;
    padding: 0 1rem;
    border: 1.5px solid var(--color-neutral-300);
    border-radius: 0.5rem;
    font-size: 0.84rem;
    font-weight: 600;
    background: #fff;
    color: var(--color-neutral-700);
    cursor: pointer;
    transition: all 0.15s;
}

.spa-btn-outline:hover:not(:disabled)[b-52nmer7q90] { border-color: var(--color-primary-400); color: var(--color-primary-600); }
.spa-btn-outline:disabled[b-52nmer7q90] { opacity: 0.55; cursor: not-allowed; }

/* ─── Filter Bar ───────────────────────────────────────────────── */
.spa-filter-bar[b-52nmer7q90] {
    display: flex;
    align-items: flex-end;
    gap: 0.75rem;
    flex-wrap: wrap;
    background: #fff;
    border: 1px solid var(--color-neutral-200);
    border-radius: 1rem;
    padding: 1rem 1.25rem;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}

.spa-filter-primary[b-52nmer7q90] { display: flex; flex-direction: column; gap: 0.25rem; }
.spa-filter-item[b-52nmer7q90]    { display: flex; flex-direction: column; gap: 0.25rem; }

.spa-filter-label[b-52nmer7q90] {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-neutral-500);
}

.spa-select[b-52nmer7q90] {
    height: 40px;
    min-width: 150px;
    padding: 0 0.75rem;
    border: 1.5px solid var(--color-neutral-300);
    border-radius: 0.5rem;
    font-size: 0.84rem;
    color: var(--color-neutral-800);
    background: #fff;
    cursor: pointer;
    transition: border-color 0.15s;
}

.spa-select:focus[b-52nmer7q90] { outline: none; border-color: var(--color-primary-500); }

.spa-select-primary[b-52nmer7q90] {
    border-color: var(--color-primary-500);
    color: var(--color-primary-700);
    font-weight: 600;
    background: var(--color-teal-50);
    min-width: 170px;
}

/* ─── Risk Legend ──────────────────────────────────────────────── */
.spa-legend[b-52nmer7q90] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    font-size: 0.78rem;
}

.spa-legend-title[b-52nmer7q90] {
    font-weight: 600;
    color: var(--color-neutral-500);
    margin-right: 0.25rem;
}

.spa-legend-chip[b-52nmer7q90] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.2rem 0.65rem;
    border-radius: 9999px;
    font-weight: 600;
    font-size: 0.75rem;
}

.spa-chip-critical[b-52nmer7q90] { background: #FEE2E2; color: #991B1B; }
.spa-chip-atrisk[b-52nmer7q90]   { background: #FED7AA; color: #9A3412; }
.spa-chip-watch[b-52nmer7q90]    { background: #FEF08A; color: #713F12; }
.spa-chip-ok[b-52nmer7q90]       { background: #DCFCE7; color: #166534; }

/* ─── Loading ──────────────────────────────────────────────────── */
.spa-loading-full[b-52nmer7q90] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: 5rem 0;
    color: var(--color-neutral-400);
    font-size: 1rem;
}

/* ─── KPI Cards ────────────────────────────────────────────────── */
.spa-kpi-grid[b-52nmer7q90] {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 1rem;
}

.spa-kpi[b-52nmer7q90] {
    background: #fff;
    border-radius: 1rem;
    border: 1px solid var(--color-neutral-200);
    box-shadow: 0 1px 4px rgba(0,0,0,0.05);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.spa-kpi-body[b-52nmer7q90] {
    display: flex;
    align-items: flex-start;
    gap: 0.9rem;
    padding: 1.1rem 1.1rem 0.75rem;
    flex: 1;
}

.spa-kpi-icon[b-52nmer7q90] {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 0.6rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    flex-shrink: 0;
}

.spa-kpi-value[b-52nmer7q90] {
    font-size: 2rem;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.02em;
}

.spa-kpi-label[b-52nmer7q90] {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--color-neutral-600);
    margin-top: 0.2rem;
}

.spa-kpi-sub[b-52nmer7q90] {
    font-size: 0.72rem;
    color: var(--color-neutral-400);
    margin-top: 0.1rem;
}

.spa-kpi-action[b-52nmer7q90] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    padding: 0.45rem;
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    border-top: 1px solid;
    transition: opacity 0.15s;
    text-align: center;
}

.spa-kpi-action:hover[b-52nmer7q90] { opacity: 0.75; }

/* Critical */
.spa-kpi-critical[b-52nmer7q90] { border-left: 4px solid #DC2626; }
.spa-kpi-critical .spa-kpi-icon[b-52nmer7q90] { background: #FEE2E2; color: #DC2626; }
.spa-kpi-critical .spa-kpi-value[b-52nmer7q90] { color: #DC2626; }
.spa-kpi-critical .spa-kpi-action[b-52nmer7q90] { background: #FEF2F2; color: #DC2626; border-color: #FECACA; }

/* At Risk */
.spa-kpi-atrisk[b-52nmer7q90] { border-left: 4px solid #EA580C; }
.spa-kpi-atrisk .spa-kpi-icon[b-52nmer7q90] { background: #FED7AA; color: #EA580C; }
.spa-kpi-atrisk .spa-kpi-value[b-52nmer7q90] { color: #C2410C; }
.spa-kpi-atrisk .spa-kpi-action[b-52nmer7q90] { background: #FFF7ED; color: #C2410C; border-color: #FED7AA; }

/* Watch */
.spa-kpi-watch[b-52nmer7q90] { border-left: 4px solid #CA8A04; }
.spa-kpi-watch .spa-kpi-icon[b-52nmer7q90] { background: #FEF08A; color: #CA8A04; }
.spa-kpi-watch .spa-kpi-value[b-52nmer7q90] { color: #A16207; }
.spa-kpi-watch .spa-kpi-action[b-52nmer7q90] { background: #FEFCE8; color: #A16207; border-color: #FDE047; }

/* Total */
.spa-kpi-total[b-52nmer7q90] { border-left: 4px solid var(--color-primary-500); }
.spa-kpi-total .spa-kpi-icon[b-52nmer7q90] { background: var(--color-teal-100); color: var(--color-primary-600); }
.spa-kpi-total .spa-kpi-value[b-52nmer7q90] { color: var(--color-primary-700); }

/* Avg */
.spa-kpi-avg[b-52nmer7q90] { border-left: 4px solid #6366F1; }
.spa-kpi-avg .spa-kpi-icon[b-52nmer7q90] { background: #EEF2FF; color: #6366F1; }
.spa-kpi-avg .spa-kpi-value[b-52nmer7q90] { color: #4338CA; }

/* ─── Risk Distribution Bar ────────────────────────────────────── */
.spa-risk-bar-section[b-52nmer7q90] {
    background: #fff;
    border: 1px solid var(--color-neutral-200);
    border-radius: 1rem;
    padding: 1rem 1.25rem;
}

.spa-risk-bar-label[b-52nmer7q90] { margin-bottom: 0.6rem; }

.spa-section-title[b-52nmer7q90] {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--color-neutral-600);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.spa-risk-bar[b-52nmer7q90] {
    display: flex;
    height: 14px;
    border-radius: 9999px;
    overflow: hidden;
    background: var(--color-neutral-100);
    gap: 2px;
}

.spa-bar-seg[b-52nmer7q90] { transition: width 0.4s ease; }
.spa-bar-critical[b-52nmer7q90] { background: #DC2626; }
.spa-bar-atrisk[b-52nmer7q90]   { background: #F97316; }
.spa-bar-watch[b-52nmer7q90]    { background: #EAB308; }
.spa-bar-health[b-52nmer7q90]   { background: #22C55E; }

.spa-risk-bar-keys[b-52nmer7q90] {
    display: flex;
    gap: 1.5rem;
    margin-top: 0.6rem;
    flex-wrap: wrap;
}

.spa-bar-key[b-52nmer7q90] {
    font-size: 0.73rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.3rem;
}

.spa-bar-key[b-52nmer7q90]::before {
    content: '';
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 2px;
}

.spa-bar-key-critical[b-52nmer7q90]::before { background: #DC2626; }
.spa-bar-key-atrisk[b-52nmer7q90]::before   { background: #F97316; }
.spa-bar-key-watch[b-52nmer7q90]::before    { background: #EAB308; }
.spa-bar-key-health[b-52nmer7q90]::before   { background: #22C55E; }

/* ─── Insights Grid (subject + chapters) ───────────────────────── */
.spa-insights-grid[b-52nmer7q90] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

/* ─── Cards ────────────────────────────────────────────────────── */
.spa-card[b-52nmer7q90] {
    background: #fff;
    border: 1px solid var(--color-neutral-200);
    border-radius: 1rem;
    box-shadow: 0 1px 4px rgba(0,0,0,0.05);
    overflow: hidden;
}

.spa-card-table[b-52nmer7q90] { margin-top: 0; }

.spa-card-header[b-52nmer7q90] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.85rem 1.1rem;
    border-bottom: 1px solid var(--color-neutral-100);
    background: var(--color-neutral-50);
    gap: 0.5rem;
    flex-wrap: wrap;
}

.spa-card-title[b-52nmer7q90] {
    font-size: 0.84rem;
    font-weight: 700;
    color: var(--color-neutral-800);
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.spa-card-title i[b-52nmer7q90] { color: var(--color-primary-600); }

.spa-card-badge[b-52nmer7q90] {
    font-size: 0.72rem;
    color: var(--color-neutral-400);
    font-style: italic;
}

/* ─── Subject Weakness Panel ───────────────────────────────────── */
.spa-subject-list[b-52nmer7q90] { padding: 0.5rem 0; }

.spa-subj-row[b-52nmer7q90] {
    display: grid;
    grid-template-columns: 130px 1fr 110px;
    align-items: center;
    gap: 0.75rem;
    padding: 0.55rem 1.1rem;
    border-bottom: 1px solid var(--color-neutral-50);
}

.spa-subj-row:last-child[b-52nmer7q90] { border-bottom: none; }

.spa-subj-name[b-52nmer7q90] {
    font-size: 0.83rem;
    font-weight: 600;
    color: var(--color-neutral-800);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.spa-subj-bar-wrap[b-52nmer7q90] {
    height: 8px;
    background: var(--color-neutral-100);
    border-radius: 9999px;
    overflow: hidden;
}

.spa-subj-bar[b-52nmer7q90] {
    height: 100%;
    border-radius: 9999px;
    transition: width 0.4s ease;
}

.spa-subj-bar-critical[b-52nmer7q90] { background: #EF4444; }
.spa-subj-bar-atrisk[b-52nmer7q90]   { background: #F97316; }
.spa-subj-bar-watch[b-52nmer7q90]    { background: #EAB308; }

.spa-subj-meta[b-52nmer7q90] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.1rem;
}

.spa-subj-avg[b-52nmer7q90] {
    font-size: 0.85rem;
    font-weight: 700;
}

.spa-subj-avg-critical[b-52nmer7q90] { color: #DC2626; }
.spa-subj-avg-atrisk[b-52nmer7q90]   { color: #C2410C; }
.spa-subj-avg-watch[b-52nmer7q90]    { color: #A16207; }

.spa-subj-count[b-52nmer7q90] {
    font-size: 0.7rem;
    color: var(--color-neutral-400);
    white-space: nowrap;
}

/* ─── Weak Chapters Panel ──────────────────────────────────────── */
.spa-chapter-list[b-52nmer7q90] { padding: 0.5rem 0; }

.spa-chapter-row[b-52nmer7q90] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.55rem 1.1rem;
    border-bottom: 1px solid var(--color-neutral-50);
    gap: 0.75rem;
}

.spa-chapter-row:last-child[b-52nmer7q90] { border-bottom: none; }

.spa-chapter-name[b-52nmer7q90] {
    font-size: 0.83rem;
    font-weight: 600;
    color: var(--color-neutral-800);
}

.spa-chapter-subj[b-52nmer7q90] {
    font-size: 0.72rem;
    color: var(--color-neutral-400);
    margin-top: 0.05rem;
}

.spa-chapter-stats[b-52nmer7q90] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-shrink: 0;
}

.spa-chapter-count-badge[b-52nmer7q90] {
    font-size: 0.72rem;
    padding: 0.15rem 0.5rem;
    border-radius: 9999px;
    background: var(--color-neutral-100);
    color: var(--color-neutral-600);
    font-weight: 600;
    white-space: nowrap;
}

.spa-chapter-pct[b-52nmer7q90] {
    font-size: 0.85rem;
    font-weight: 700;
    min-width: 38px;
    text-align: right;
}

.spa-no-data[b-52nmer7q90] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 2.5rem 1rem;
    font-size: 0.83rem;
    color: #16A34A;
}

/* ─── AI Recommendations ───────────────────────────────────────── */
.spa-recommendations[b-52nmer7q90] {
    background: linear-gradient(135deg, #FEFCE8 0%, #FFF7ED 100%);
    border: 1px solid #FDE68A;
    border-radius: 1rem;
    overflow: hidden;
}

.spa-rec-header[b-52nmer7q90] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.85rem 1.1rem;
    border-bottom: 1px solid #FDE68A;
    font-size: 0.9rem;
    font-weight: 700;
    color: #92400E;
}

.spa-rec-header i[b-52nmer7q90] { font-size: 1.1rem; color: #D97706; }

.spa-rec-badge[b-52nmer7q90] {
    font-size: 0.7rem;
    color: #B45309;
    font-style: italic;
    font-weight: 400;
    margin-left: auto;
}

.spa-rec-grid[b-52nmer7q90] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
}

.spa-rec-item[b-52nmer7q90] {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 1rem 1.1rem;
    border-right: 1px solid #FDE68A;
    border-bottom: 1px solid #FDE68A;
}

.spa-rec-item:nth-child(even)[b-52nmer7q90] { border-right: none; }
.spa-rec-item:nth-last-child(-n+2)[b-52nmer7q90] { border-bottom: none; }

.spa-rec-icon[b-52nmer7q90] {
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    flex-shrink: 0;
    margin-top: 0.1rem;
}

.spa-rec-title[b-52nmer7q90] {
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--color-neutral-800);
    margin-bottom: 0.2rem;
}

.spa-rec-body[b-52nmer7q90] {
    font-size: 0.79rem;
    color: var(--color-neutral-600);
    line-height: 1.5;
}

.spa-rec-urgent .spa-rec-icon[b-52nmer7q90] { background: #FEE2E2; color: #DC2626; }
.spa-rec-moderate .spa-rec-icon[b-52nmer7q90] { background: #FED7AA; color: #EA580C; }
.spa-rec-info .spa-rec-icon[b-52nmer7q90] { background: #DBEAFE; color: #2563EB; }

/* ─── Table Controls ────────────────────────────────────────────── */
.spa-table-controls[b-52nmer7q90] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.spa-chip-close[b-52nmer7q90] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.15rem 0.6rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 600;
    background: var(--color-neutral-100);
    color: var(--color-neutral-600);
    border: 1px solid var(--color-neutral-300);
    cursor: pointer;
    transition: all 0.15s;
}

.spa-chip-close:hover[b-52nmer7q90] { background: #FEE2E2; color: #DC2626; border-color: #FECACA; }

/* ─── Table ─────────────────────────────────────────────────────── */
.spa-table-loading[b-52nmer7q90] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 3rem 0;
    color: var(--color-neutral-400);
    font-size: 0.9rem;
}

.spa-table-wrap[b-52nmer7q90] { overflow-x: auto; }

.spa-table[b-52nmer7q90] {
    width: 100%;
    border-collapse: collapse;
    min-width: 900px;
}

.spa-thead[b-52nmer7q90] { background: var(--color-neutral-50); }

.spa-thead tr[b-52nmer7q90] { border-bottom: 2px solid var(--color-neutral-200); }

.spa-th[b-52nmer7q90] {
    padding: 0.7rem 0.9rem;
    font-size: 0.8rem;
    font-weight: 700;
    color: #374151;
    text-align: left;
    white-space: nowrap;
}

.spa-th-center[b-52nmer7q90] { text-align: center; }

.spa-tr[b-52nmer7q90] {
    border-bottom: 1px solid var(--color-neutral-100);
    transition: background 0.1s;
}

.spa-tr:hover[b-52nmer7q90] { background: #FAFAFA; }
.spa-tr:last-child[b-52nmer7q90] { border-bottom: none; }

/* Row severity tints */
.spa-row-critical[b-52nmer7q90] { border-left: 3px solid #DC2626; background: #FFF5F5; }
.spa-row-atrisk[b-52nmer7q90]   { border-left: 3px solid #F97316; background: #FFFBF5; }
.spa-row-watch[b-52nmer7q90]    { border-left: 3px solid #EAB308; background: #FEFEF0; }
.spa-row-critical:hover[b-52nmer7q90] { background: #FEE2E2; }
.spa-row-atrisk:hover[b-52nmer7q90]   { background: #FFF7ED; }
.spa-row-watch:hover[b-52nmer7q90]    { background: #FEFCE8; }

.spa-td[b-52nmer7q90] {
    padding: 0.6rem 0.9rem;
    font-size: 0.855rem;
    color: var(--color-neutral-900);
    vertical-align: middle;
}

.spa-td-center[b-52nmer7q90] { text-align: center; }
.spa-td-muted[b-52nmer7q90]  { color: var(--color-neutral-500); font-size: 0.82rem; }

.spa-student-name[b-52nmer7q90] {
    font-weight: 600;
    font-size: 0.875rem;
    color: var(--color-neutral-900);
}

.spa-student-roll[b-52nmer7q90] {
    font-size: 0.72rem;
    color: var(--color-neutral-400);
    margin-top: 0.05rem;
}

/* Percentage */
.spa-pct[b-52nmer7q90] {
    font-size: 1.05rem;
    font-weight: 800;
}

.spa-pct-critical[b-52nmer7q90] { color: #DC2626; }
.spa-pct-atrisk[b-52nmer7q90]   { color: #C2410C; }
.spa-pct-watch[b-52nmer7q90]    { color: #A16207; }
.spa-pct-ok[b-52nmer7q90]       { color: #16A34A; }

/* Trend */
.spa-trend[b-52nmer7q90] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.8rem;
    font-weight: 700;
}

.spa-trend-up[b-52nmer7q90]   { color: #16A34A; }
.spa-trend-down[b-52nmer7q90] { color: #DC2626; }
.spa-trend-flat[b-52nmer7q90] { color: var(--color-neutral-400); }

/* Exam Stats */
.spa-exam-stats[b-52nmer7q90] {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--color-neutral-700);
}

.spa-exam-sub[b-52nmer7q90] {
    font-size: 0.68rem;
    color: var(--color-neutral-400);
    font-weight: 400;
}

/* Weak chips */
.spa-weak-chips[b-52nmer7q90] { display: flex; flex-wrap: wrap; gap: 0.25rem; }

.spa-weak-chip[b-52nmer7q90] {
    font-size: 0.7rem;
    padding: 0.15rem 0.45rem;
    border-radius: 0.3rem;
    background: #FEE2E2;
    color: #991B1B;
    font-weight: 600;
    white-space: nowrap;
    cursor: default;
}

.spa-weak-more[b-52nmer7q90] {
    font-size: 0.7rem;
    padding: 0.15rem 0.45rem;
    border-radius: 0.3rem;
    background: var(--color-neutral-100);
    color: var(--color-neutral-500);
    font-weight: 600;
}

/* Intervention badge */
.spa-intervention-badge[b-52nmer7q90] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.2rem 0.55rem;
    border-radius: 9999px;
    font-size: 0.72rem;
    font-weight: 700;
    background: #DC2626;
    color: #fff;
    animation: spa-pulse-b-52nmer7q90 2s infinite;
}

@keyframes spa-pulse-b-52nmer7q90 {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0.75; }
}

/* Details button */
.spa-btn-details[b-52nmer7q90] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.3rem 0.7rem;
    border-radius: 0.4rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--color-primary-600);
    background: var(--color-teal-50);
    border: 1px solid var(--color-primary-200);
    cursor: pointer;
    transition: all 0.15s;
    white-space: nowrap;
}

.spa-btn-details:hover[b-52nmer7q90] {
    background: var(--color-primary-600);
    color: #fff;
    border-color: var(--color-primary-600);
}

/* ─── Pagination ────────────────────────────────────────────────── */
.spa-pagination[b-52nmer7q90] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.85rem 1.1rem;
    border-top: 1px solid var(--color-neutral-200);
    flex-wrap: wrap;
    gap: 0.5rem;
}

.spa-pg-info[b-52nmer7q90] {
    font-size: 0.8rem;
    color: var(--color-neutral-500);
}

/* ─── Empty State ───────────────────────────────────────────────── */
.spa-empty[b-52nmer7q90] {
    padding: 3.5rem 2rem;
    text-align: center;
}

.spa-empty-icon[b-52nmer7q90] {
    font-size: 3rem;
    color: var(--color-neutral-300);
    margin-bottom: 1rem;
}

.spa-empty-title[b-52nmer7q90] {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--color-neutral-700);
    margin: 0 0 0.4rem;
}

.spa-empty-body[b-52nmer7q90] {
    font-size: 0.84rem;
    color: var(--color-neutral-500);
    max-width: 500px;
    margin: 0 auto 1rem;
}

.spa-empty-suggestions[b-52nmer7q90] {
    display: inline-block;
    text-align: left;
    background: var(--color-neutral-50);
    border: 1px solid var(--color-neutral-200);
    border-radius: 0.75rem;
    padding: 0.75rem 1.1rem;
    font-size: 0.82rem;
    color: var(--color-neutral-600);
    max-width: 420px;
}

.spa-empty-suggestions strong[b-52nmer7q90] {
    display: block;
    margin-bottom: 0.35rem;
    color: var(--color-neutral-700);
}

.spa-empty-suggestions ul[b-52nmer7q90] {
    margin: 0;
    padding-left: 1.2rem;
}

.spa-empty-suggestions li[b-52nmer7q90] { margin-bottom: 0.2rem; }

.mt-4[b-52nmer7q90] { margin-top: 1rem; }

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

@media (max-width: 900px) {
    .spa-kpi-grid[b-52nmer7q90]     { grid-template-columns: repeat(2, 1fr); }
    .spa-insights-grid[b-52nmer7q90] { grid-template-columns: 1fr; }
    .spa-rec-grid[b-52nmer7q90]     { grid-template-columns: 1fr; }
    .spa-rec-item:nth-child(even)[b-52nmer7q90] { border-right: 1px solid #FDE68A; }
}

@media (max-width: 640px) {
    .spa-page[b-52nmer7q90]         { padding: 1rem 0.75rem 2rem; }
    .spa-filter-bar[b-52nmer7q90]   { flex-direction: column; }
    .spa-select[b-52nmer7q90]       { min-width: 100%; width: 100%; }
    .spa-kpi-grid[b-52nmer7q90]     { grid-template-columns: 1fr 1fr; }
    .spa-rec-item:nth-child(even)[b-52nmer7q90] { border-right: none; }
}
/* /Pages/Principal/Announcements/Index.razor.rz.scp.css */
/* Principal Announcements page — primary styling via Tailwind utilities in markup */
/* /Pages/Principal/Attendance/Index.razor.rz.scp.css */
/* ══════════════════════════════════════════════════════
   Principal Staff Attendance Workstation — aw-* CSS
   Mirrors Teacher Attendance ergonomic design
   ══════════════════════════════════════════════════════ */

/* ── Page shell ── */
.aw-page[b-gokqcl0om2] { padding: 0 0 60px; background: #f1f5f9; min-height: 100vh; width: 100%; max-width: 100vw; overflow-x: hidden; }

/* ══ TOP BAR ══ */
.aw-matrix-shell[b-gokqcl0om2] {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

@media (max-width: 768px) {
    .aw-page[b-gokqcl0om2],
    .aw-topbar[b-gokqcl0om2],
    .aw-controls-bar[b-gokqcl0om2],
    .aw-kpi-strip[b-gokqcl0om2],
    .aw-filter-chips[b-gokqcl0om2] { min-width: 0; max-width: 100%; padding-left: 12px; padding-right: 12px; }

    .aw-matrix-shell[b-gokqcl0om2] { margin: 0 12px 16px; border-radius: 12px; border: 1px solid #e2e8f0; background: #fff; }

    /* ── Topbar: wrap brand + actions on mobile ── */
    /* z-index must stay below sidebar drawer (50) and overlay (40) on mobile */
    .aw-topbar[b-gokqcl0om2] { flex-wrap: wrap; gap: 8px; padding: 10px 12px; z-index: 10; }
    .aw-topbar-brand[b-gokqcl0om2] { gap: 10px; }
    .aw-topbar-icon-wrap[b-gokqcl0om2] { width: 36px; height: 36px; border-radius: 9px; font-size: .85rem; }
    .aw-topbar-title[b-gokqcl0om2] { font-size: .95rem; }
    .aw-topbar-date[b-gokqcl0om2] { font-size: .7rem; }
    .aw-topbar-actions[b-gokqcl0om2] { flex-wrap: wrap; gap: 6px; width: 100%; }

    /* Mode tabs: compact */
    .aw-mode-toggle[b-gokqcl0om2] { border-radius: 8px; padding: 2px; gap: 2px; }
    .aw-mode-tab[b-gokqcl0om2] { font-size: .7rem; padding: 5px 9px; gap: 4px; border-radius: 6px; }
    .aw-mode-tab i[b-gokqcl0om2] { font-size: .7rem; }

    /* Hide the read-only pill on mobile — it's informational only */
    .aw-save-ind--saved[b-gokqcl0om2] { display: none; }

    /* Controls bar: stack cleanly */
    .aw-controls-bar[b-gokqcl0om2] { top: auto; position: static; }
    .aw-ctrl-input[b-gokqcl0om2] { min-width: 0; width: 100%; }

    /* KPI cards: 2-col grid on mobile */
    .aw-kpi-strip[b-gokqcl0om2] { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
    .aw-kpi[b-gokqcl0om2] { min-width: 0; padding: 10px 12px; gap: 8px; }
    .aw-kpi-icon[b-gokqcl0om2] { width: 32px; height: 32px; border-radius: 8px; font-size: .8rem; }
    .aw-kpi-val[b-gokqcl0om2] { font-size: 1.15rem; }
}

/* ══ TOP BAR ══ */
.aw-topbar[b-gokqcl0om2] {
    display: flex; align-items: center; justify-content: space-between;
    padding: 13px 28px; background: #fff;
    border-bottom: 1.5px solid #e2e8f0;
    position: sticky; top: 0; z-index: 50;
    box-shadow: 0 1px 6px rgba(0,0,0,.07);
}
.aw-topbar-brand[b-gokqcl0om2]   { display: flex; align-items: center; gap: 14px; }
.aw-topbar-icon-wrap[b-gokqcl0om2] {
    width: 42px; height: 42px; border-radius: 11px; flex-shrink: 0;
    background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
    color: #fff; display: flex; align-items: center; justify-content: center; font-size: 1rem;
}
.aw-topbar-title[b-gokqcl0om2]  { font-size: 1.05rem; font-weight: 800; color: #0f172a; }
.aw-topbar-date[b-gokqcl0om2]   { font-size: 0.77rem; color: #64748b; font-weight: 500; margin-top: 1px; }
.aw-topbar-actions[b-gokqcl0om2] { display: flex; align-items: center; gap: 10px; }

.aw-save-ind[b-gokqcl0om2] { display: flex; align-items: center; gap: 6px; font-size: 0.8rem; font-weight: 600; padding: 6px 14px; border-radius: 999px; }
.aw-save-ind--saving[b-gokqcl0om2] { background: #eff6ff; color: #1d4ed8; }
.aw-save-ind--saved[b-gokqcl0om2]  { background: #f0fdf4; color: #166534; }
.aw-save-ind--error[b-gokqcl0om2]  { background: #fef2f2; color: #b91c1c; }

.aw-mode-toggle[b-gokqcl0om2] {
    display: inline-flex;
    background: #eef2ff;
    border-radius: 10px;
    padding: 3px;
    gap: 4px;
}

.aw-mode-tab[b-gokqcl0om2] {
    border: none;
    background: transparent;
    color: #475569;
    font-size: 0.78rem;
    font-weight: 700;
    padding: 7px 12px;
    border-radius: 8px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.aw-mode-tab--active[b-gokqcl0om2] {
    background: #ffffff;
    color: #1d4ed8;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
}

.aw-save-btn[b-gokqcl0om2] {
    display: flex; align-items: center; gap: 8px;
    padding: 10px 22px; font-size: 0.88rem; font-weight: 700;
    border: none; border-radius: 9px; cursor: pointer;
    background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
    color: #fff; box-shadow: 0 3px 10px rgba(59,130,246,.32);
    transition: filter .15s, transform .1s;
}
.aw-save-btn:hover:not(:disabled)[b-gokqcl0om2] { filter: brightness(.92); transform: translateY(-1px); }
.aw-save-btn:disabled[b-gokqcl0om2] { opacity: .45; cursor: not-allowed; }

/* ══ CONTROLS BAR ══ */
.aw-controls-bar[b-gokqcl0om2] {
    display: flex; align-items: flex-end; flex-wrap: wrap; gap: 14px;
    padding: 14px 28px; background: #fff;
    border-bottom: 1.5px solid #e2e8f0; margin-bottom: 18px;
    position: sticky; top: 68px; z-index: 40;
    box-shadow: 0 2px 6px rgba(0,0,0,.04);
}
.aw-ctrl-sep[b-gokqcl0om2]   { width: 1px; height: 38px; background: #e2e8f0; flex-shrink: 0; align-self: flex-end; margin-bottom: 1px; }
.aw-ctrl-field[b-gokqcl0om2] { display: flex; flex-direction: column; gap: 4px; }
.aw-ctrl-lbl[b-gokqcl0om2]   { font-size: 0.66rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: #94a3b8; }
.aw-ctrl-input[b-gokqcl0om2] {
    height: 42px; padding: 0 12px; font-size: 0.86rem;
    border: 1.5px solid #cbd5e1; border-radius: 9px; background: #fff; color: #0f172a;
    min-width: 140px; transition: border-color .15s;
}
.aw-ctrl-input:focus[b-gokqcl0om2] { outline: none; border-color: #3b82f6; }
.aw-search-wrap[b-gokqcl0om2]  { position: relative; }
.aw-search-icon[b-gokqcl0om2]  { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: #94a3b8; font-size: .8rem; }
.aw-search-input[b-gokqcl0om2] { padding-left: 30px !important; }
.aw-refresh-btn[b-gokqcl0om2]  {
    align-self: flex-end; width: 42px; height: 42px; border-radius: 9px;
    border: 1.5px solid #cbd5e1; background: #fff; color: #64748b;
    cursor: pointer; font-size: .9rem; transition: border-color .15s, color .15s;
}
.aw-refresh-btn:hover[b-gokqcl0om2] { border-color: #3b82f6; color: #3b82f6; }

/* Mode/bulk action buttons */
.aw-mode-group[b-gokqcl0om2] { display: flex; gap: 4px; }
.aw-mode-btn[b-gokqcl0om2] {
    display: flex; align-items: center; gap: 6px;
    padding: 0 14px; height: 42px; font-size: 0.8rem; font-weight: 600;
    border: 1.5px solid #cbd5e1; border-radius: 8px; background: #fff;
    color: #475569; cursor: pointer; transition: all .15s; white-space: nowrap;
}
.aw-mode-btn:hover[b-gokqcl0om2] { border-color: #3b82f6; color: #3b82f6; background: #eff6ff; }

/* ══ KPI STRIP ══ */
.aw-kpi-strip[b-gokqcl0om2] { display: flex; gap: 12px; flex-wrap: wrap; padding: 0 28px 14px; }
.aw-kpi[b-gokqcl0om2] {
    display: flex; align-items: center; gap: 12px;
    background: #fff; border: 1.5px solid #e2e8f0; border-radius: 14px;
    padding: 14px 18px; flex: 1; min-width: 110px;
    box-shadow: 0 1px 4px rgba(0,0,0,.04);
}
.aw-kpi-icon[b-gokqcl0om2] {
    width: 40px; height: 40px; border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    font-size: .95rem; flex-shrink: 0;
}
.aw-kpi-icon--total[b-gokqcl0om2]   { background: #f1f5f9; color: #475569; }
.aw-kpi-icon--present[b-gokqcl0om2] { background: #f0fdf4; color: #16a34a; }
.aw-kpi-icon--absent[b-gokqcl0om2]  { background: #fef2f2; color: #dc2626; }
.aw-kpi-icon--late[b-gokqcl0om2]    { background: #fefce8; color: #ca8a04; }
.aw-kpi-icon--halfday[b-gokqcl0om2] { background: #f5f3ff; color: #7c3aed; }
.aw-kpi-icon--leave[b-gokqcl0om2]   { background: #eff6ff; color: #2563eb; }
.aw-kpi-icon--unmarked[b-gokqcl0om2]{ background: #fff7ed; color: #ea580c; }

.aw-kpi--present[b-gokqcl0om2]  { border-left: 3px solid #16a34a; }
.aw-kpi--absent[b-gokqcl0om2]   { border-left: 3px solid #dc2626; }
.aw-kpi--late[b-gokqcl0om2]     { border-left: 3px solid #ca8a04; }
.aw-kpi--halfday[b-gokqcl0om2]  { border-left: 3px solid #7c3aed; }
.aw-kpi--leave[b-gokqcl0om2]    { border-left: 3px solid #2563eb; }
.aw-kpi--unmarked[b-gokqcl0om2] { border-left: 3px solid #ea580c; }

.aw-kpi-val[b-gokqcl0om2] { font-size: 1.4rem; font-weight: 800; color: #0f172a; line-height: 1; }
.aw-kpi-lbl[b-gokqcl0om2] { font-size: 0.72rem; color: #64748b; font-weight: 500; margin-top: 2px; }

/* Progress bar */
.aw-kpi-progress[b-gokqcl0om2] {
    display: flex; align-items: center; justify-content: space-between;
    gap: 16px; padding: 0 28px 14px; flex-wrap: wrap;
}
.aw-progress-bar-wrap[b-gokqcl0om2] { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 200px; }
.aw-kpi-bar-track[b-gokqcl0om2] { flex: 1; height: 10px; background: #e2e8f0; border-radius: 999px; overflow: hidden; }
.aw-kpi-bar[b-gokqcl0om2] {
    height: 100%; border-radius: 999px;
    background: linear-gradient(90deg, #22c55e 0%, #16a34a 100%);
    transition: width .5s ease;
}
.aw-progress-warn[b-gokqcl0om2] { font-size: .78rem; font-weight: 600; color: #dc2626; display: flex; align-items: center; gap: 5px; white-space: nowrap; }
.aw-progress-ok[b-gokqcl0om2]   { font-size: .78rem; font-weight: 600; color: #16a34a; display: flex; align-items: center; gap: 5px; white-space: nowrap; }
.aw-progress-sub[b-gokqcl0om2]  { font-size: .75rem; color: #94a3b8; font-weight: 500; white-space: nowrap; }

/* ══ FILTER CHIPS ══ */
.aw-filter-chips[b-gokqcl0om2] { display: flex; gap: 6px; flex-wrap: wrap; padding: 0 28px 14px; }
.aw-fc[b-gokqcl0om2] {
    display: flex; align-items: center; gap: 6px;
    padding: 6px 14px; border-radius: 999px; font-size: 0.79rem; font-weight: 600;
    border: 1.5px solid #e2e8f0; background: #fff; color: #475569;
    cursor: pointer; transition: all .15s;
}
.aw-fc:hover[b-gokqcl0om2]     { border-color: #94a3b8; color: #0f172a; }
.aw-fc--active[b-gokqcl0om2]   { border-color: #3b82f6; background: #eff6ff; color: #1d4ed8; }
.aw-fc--p.aw-fc--active[b-gokqcl0om2]  { border-color: #16a34a; background: #f0fdf4; color: #166534; }
.aw-fc--a.aw-fc--active[b-gokqcl0om2]  { border-color: #dc2626; background: #fef2f2; color: #991b1b; }
.aw-fc--l.aw-fc--active[b-gokqcl0om2]  { border-color: #ca8a04; background: #fefce8; color: #92400e; }
.aw-fc--hd.aw-fc--active[b-gokqcl0om2] { border-color: #7c3aed; background: #f5f3ff; color: #5b21b6; }
.aw-fc--ol.aw-fc--active[b-gokqcl0om2] { border-color: #2563eb; background: #eff6ff; color: #1e3a8a; }
.aw-fc--unmarked.aw-fc--active[b-gokqcl0om2] { border-color: #ea580c; background: #fff7ed; color: #9a3412; }
.aw-fc-count[b-gokqcl0om2] { font-size: .7rem; background: #f1f5f9; padding: 1px 7px; border-radius: 999px; }

.aw-month-nav[b-gokqcl0om2] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.aw-month-label[b-gokqcl0om2] {
    font-size: 0.82rem;
    font-weight: 700;
    color: #334155;
    min-width: 124px;
    text-align: center;
}

.aw-month-picker[b-gokqcl0om2] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.aw-month-picker .aw-month-select[b-gokqcl0om2] {
    height: 36px;
    padding: 0 24px 0 10px;
    font-size: 0.82rem;
    font-weight: 700;
    color: #334155;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    background: #fff;
    cursor: pointer;
}

.aw-month-picker .aw-year-select[b-gokqcl0om2] { min-width: 82px; }

/* ══ GRID ══ */
.aw-grid-card[b-gokqcl0om2]  { margin: 0 28px 28px; background: #fff; border-radius: 14px; border: 1.5px solid #e2e8f0; box-shadow: 0 2px 8px rgba(0,0,0,.05); overflow-y: auto; max-height: calc(100vh - 260px); }
.aw-grid-head[b-gokqcl0om2]  {
    display: grid;
    grid-template-columns: 44px 1fr 120px 260px 110px 110px;
    gap: 0; padding: 10px 16px;
    background: #f8fafc; border-bottom: 1.5px solid #e2e8f0;
    position: sticky; top: 0; z-index: 30;
}
.aw-th[b-gokqcl0om2] { font-size: 0.68rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: #94a3b8; }
.aw-th-name[b-gokqcl0om2] { padding-left: 42px; }
.aw-th-status[b-gokqcl0om2] { text-align: center; }
.aw-th-checkin[b-gokqcl0om2] { text-align: center; }
.aw-th-checkout[b-gokqcl0om2] { text-align: center; }

.aw-row[b-gokqcl0om2] {
    display: grid;
    grid-template-columns: 44px 1fr 120px 260px 110px 110px;
    gap: 0; padding: 0 16px;
    min-height: 54px; align-items: center;
    border-bottom: 1px solid #f1f5f9;
    transition: background .1s;
}
.aw-row:hover[b-gokqcl0om2]          { background: #f8fafc; }
.aw-row--alt[b-gokqcl0om2]           { background: #fcfcfd; }
.aw-row--present[b-gokqcl0om2]       { box-shadow: inset 4px 0 0 #16a34a; }
.aw-row--absent[b-gokqcl0om2]        { box-shadow: inset 4px 0 0 #dc2626; }
.aw-row--late[b-gokqcl0om2]          { box-shadow: inset 4px 0 0 #ca8a04; }
.aw-row--halfday[b-gokqcl0om2]       { box-shadow: inset 4px 0 0 #7c3aed; }
.aw-row--leave[b-gokqcl0om2]         { box-shadow: inset 4px 0 0 #2563eb; }
.aw-row--unmarked-row[b-gokqcl0om2]  { box-shadow: inset 4px 0 0 #e2e8f0; }

.aw-td[b-gokqcl0om2] { font-size: 0.85rem; color: #0f172a; padding: 4px 0; }
.aw-td-name[b-gokqcl0om2] { display: flex; align-items: center; gap: 10px; font-weight: 600; }
.aw-avatar[b-gokqcl0om2] {
    width: 32px; height: 32px; border-radius: 50%; background: #dbeafe;
    color: #1d4ed8; font-size: .8rem; font-weight: 700; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    text-transform: uppercase;
}
.aw-role-badge[b-gokqcl0om2] { font-size: .72rem; background: #f1f5f9; color: #475569; padding: 2px 9px; border-radius: 999px; font-weight: 600; }

/* Read-only status pill */
.aw-status-pill[b-gokqcl0om2] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 88px;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: .72rem;
    font-weight: 700;
}

.aw-status-pill--present[b-gokqcl0om2] { background: #f0fdf4; color: #166534; }
.aw-status-pill--absent[b-gokqcl0om2] { background: #fef2f2; color: #991b1b; }
.aw-status-pill--late[b-gokqcl0om2] { background: #fefce8; color: #92400e; }
.aw-status-pill--halfday[b-gokqcl0om2] { background: #f5f3ff; color: #5b21b6; }
.aw-status-pill--leave[b-gokqcl0om2] { background: #eff6ff; color: #1e3a8a; }
.aw-status-pill--unmarked[b-gokqcl0om2] { background: #f8fafc; color: #475569; }

/* Status buttons */
.aw-status-btns[b-gokqcl0om2] { display: flex; gap: 4px; }
.aw-sb[b-gokqcl0om2] {
    width: 36px; height: 32px; border-radius: 7px; border: 1.5px solid #e2e8f0;
    background: #fff; color: #94a3b8; font-size: 0.72rem; font-weight: 700;
    cursor: pointer; transition: all .12s;
}
.aw-sb:hover[b-gokqcl0om2] { border-color: #94a3b8; color: #475569; background: #f8fafc; }
.aw-sb--p.aw-sb--active[b-gokqcl0om2]  { background: #16a34a; border-color: #16a34a; color: #fff; }
.aw-sb--a.aw-sb--active[b-gokqcl0om2]  { background: #dc2626; border-color: #dc2626; color: #fff; }
.aw-sb--l.aw-sb--active[b-gokqcl0om2]  { background: #ca8a04; border-color: #ca8a04; color: #fff; }
.aw-sb--hd.aw-sb--active[b-gokqcl0om2] { background: #7c3aed; border-color: #7c3aed; color: #fff; }
.aw-sb--ol.aw-sb--active[b-gokqcl0om2] { background: #2563eb; border-color: #2563eb; color: #fff; }

/* Skeletons */
.aw-loading-shell[b-gokqcl0om2] { padding: 0 28px; }
.aw-kpi-skeleton[b-gokqcl0om2]  { height: 80px; background: #e2e8f0; border-radius: 14px; animation: pulse-b-gokqcl0om2 1.4s ease-in-out infinite; }
.aw-kpi-strip.aw-kpi-skeleton + .aw-grid-skeleton[b-gokqcl0om2] { height: 300px; }
.aw-grid-skeleton[b-gokqcl0om2] { height: 300px; background: #e2e8f0; border-radius: 14px; margin-top: 14px; animation: pulse-b-gokqcl0om2 1.4s ease-in-out infinite; }

@keyframes pulse-b-gokqcl0om2 { 0%,100% { opacity: 1; } 50% { opacity: .4; } }

/* Error / empty */
.aw-error-state[b-gokqcl0om2] { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 60px 0; color: #dc2626; }
.aw-error-state i[b-gokqcl0om2] { font-size: 2rem; }
.aw-error-state button[b-gokqcl0om2] { padding: 8px 20px; border-radius: 8px; border: none; background: #3b82f6; color: #fff; font-weight: 600; cursor: pointer; }
.aw-empty-row[b-gokqcl0om2] { padding: 40px; text-align: center; color: #94a3b8; font-size: .9rem; }

/* ══ STUDENT MONTHLY MATRIX ══ */
.aw-matrix-shell[b-gokqcl0om2] {
    overflow-x: auto;
    margin: 0 28px 28px;
    border: 1.5px solid #e2e8f0;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .05);
}

.aw-matrix-grid[b-gokqcl0om2] {
    --aw-mx-name-w: 200px;
    --aw-mx-role-w: 52px;
    --aw-mx-sum-w: 40px;
    --aw-mx-pct-w: 70px;
    width: 100%;
    min-width: 1120px;
    border-collapse: collapse;
    font-size: 13px;
    table-layout: fixed;
}

.aw-mx-th-student[b-gokqcl0om2] {
    position: sticky;
    left: 0;
    top: 0;
    z-index: 3;
    background: #f8f9fb;
    text-align: left;
    padding: 10px 12px;
    font-size: 13px;
    font-weight: 700;
    color: #475569;
    border-bottom: 1px solid #e2e8f0;
    border-right: 1px solid #e2e8f0;
    min-width: var(--aw-mx-name-w);
    width: var(--aw-mx-name-w);
}

/* Role header (staff matrix) — not frozen horizontally; scrolls with the days */
.aw-matrix-grid--staff thead tr:first-child th:nth-child(2).aw-mx-th-student[b-gokqcl0om2] {
    left: auto;
    text-align: center;
    padding: 10px 4px;
    min-width: var(--aw-mx-role-w);
    width: var(--aw-mx-role-w);
    border-right: 0;
}

.aw-mx-th-day[b-gokqcl0om2],
.aw-mx-th-summary[b-gokqcl0om2],
.aw-mx-th-pct[b-gokqcl0om2] {
    position: sticky;
    top: 0;
    z-index: 2;
    text-align: center;
    padding: 8px 4px;
    font-size: 12px;
    font-weight: 700;
    color: #475569;
    border-bottom: 1px solid #e2e8f0;
    border-right: 1px solid #e2e8f0;
    background: #f8fafc;
}

.aw-mx-th-day[b-gokqcl0om2] { min-width: 34px; width: 34px; }
.aw-mx-th-summary[b-gokqcl0om2] { min-width: var(--aw-mx-sum-w); width: var(--aw-mx-sum-w); border-left: 2px solid #e2e8f0; }
.aw-mx-th-pct[b-gokqcl0om2] {
    min-width: var(--aw-mx-pct-w);
    width: var(--aw-mx-pct-w);
    position: sticky;
    right: 0;
    z-index: 3;
    border-left: 2px solid #e2e8f0;
}

.aw-mx-th-day--off[b-gokqcl0om2] { color: #9ca3af; background: #f4f6f9; }
.aw-mx-th-day--weekend[b-gokqcl0om2] { background: #f1f5f9; }
.aw-mx-th-day--week-alt[b-gokqcl0om2] { background: #f9fafb; }
.aw-mx-th-day--week-start[b-gokqcl0om2] { border-left: 2px solid #cbd5e1; }
.aw-mx-th-day--today[b-gokqcl0om2] { box-shadow: inset 0 -2px 0 #3b82f6; color: #1d4ed8; }

.aw-mx-tr-dow td[b-gokqcl0om2] {
    text-align: center;
    font-size: 11px;
    color: #94a3b8;
    padding: 3px 0;
    border-bottom: 1px solid #e2e8f0;
    background: #fafbfc;
}

.aw-mx-tr-dow td:first-child[b-gokqcl0om2] {
    position: sticky;
    z-index: 2;
    background: #f8f9fb;
    border-right: 1px solid #e2e8f0;
    left: 0;
}

.aw-mx-dow--weekend[b-gokqcl0om2] { background: #f1f5f9; }
.aw-mx-dow--week-alt[b-gokqcl0om2] { background: #f9fafb; }
.aw-mx-dow--week-start[b-gokqcl0om2] { border-left: 2px solid #cbd5e1; }
.aw-mx-dow--off[b-gokqcl0om2] { background: #f4f6f9; }

.aw-mx-row[b-gokqcl0om2] { height: 42px; }

.aw-mx-row--zebra .aw-mx-td-student[b-gokqcl0om2],
.aw-mx-row--zebra .aw-mx-td-day[b-gokqcl0om2],
.aw-mx-row--zebra .aw-mx-td-summary[b-gokqcl0om2],
.aw-mx-row--zebra .aw-mx-td-pct[b-gokqcl0om2] { background-color: #fafafa; }

.aw-mx-row:hover .aw-mx-td-student[b-gokqcl0om2],
.aw-mx-row:hover .aw-mx-td-day[b-gokqcl0om2],
.aw-mx-row:hover .aw-mx-td-summary[b-gokqcl0om2],
.aw-mx-row:hover .aw-mx-td-pct[b-gokqcl0om2] { background-color: #eef4ff !important; }

.aw-mx-td-student[b-gokqcl0om2] {
    position: sticky;
    left: 0;
    z-index: 2;
    background: #fff;
    padding: 8px 12px;
    border-bottom: 1px solid #e2e8f0;
    border-right: 1px solid #e2e8f0;
    white-space: normal;
    overflow-wrap: anywhere;
}

/* Role cell (staff matrix) — not frozen; scrolls with the days */
.aw-matrix-grid--staff tbody tr > td:nth-child(2).aw-mx-td-student[b-gokqcl0om2] {
    left: auto;
    text-align: center;
    padding: 8px 4px;
    min-width: var(--aw-mx-role-w);
    width: var(--aw-mx-role-w);
    box-shadow: none;
}

.aw-mx-student-name[b-gokqcl0om2] {
    display: block;
    font-size: 13px;
    font-weight: 700;
    color: #0f172a;
    overflow-wrap: break-word;
    word-break: break-word;
}

.aw-mx-roll[b-gokqcl0om2] {
    display: block;
    font-size: 11px;
    color: #94a3b8;
}

.aw-mx-td-day[b-gokqcl0om2] {
    text-align: center;
    padding: 8px 0;
    border-bottom: 1px solid #e2e8f0;
    border-right: 1px solid #e2e8f0;
    background: #fff;
}

.aw-mx-td-day--off[b-gokqcl0om2] { background: #f4f6f9 !important; }
.aw-mx-td-day--present[b-gokqcl0om2] { background: #ecfdf3; }
.aw-mx-td-day--absent[b-gokqcl0om2] { background: #fef2f2; }
.aw-mx-td-day--late[b-gokqcl0om2] { background: #fef3c7; }
.aw-mx-td-day--halfday[b-gokqcl0om2] { background: #fff4d6; }
.aw-mx-td-day--onleave[b-gokqcl0om2] { background: #e0f2fe; }
.aw-mx-td-day--weekend[b-gokqcl0om2] { background: #f8fafc; }
.aw-mx-td-day--week-alt[b-gokqcl0om2] { background: #fbfdff; }
.aw-mx-td-day--week-start[b-gokqcl0om2] { border-left: 2px solid #cbd5e1; }
.aw-mx-td-day--today[b-gokqcl0om2] { box-shadow: inset 0 -2px 0 #3b82f6; }

.aw-mx-badge[b-gokqcl0om2] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    height: 24px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 700;
    color: #334155;
}

.aw-mx-off[b-gokqcl0om2] {
    color: #cbd5e1;
    font-size: 12px;
    font-weight: 700;
}

.aw-mx-td-summary[b-gokqcl0om2] {
    text-align: center;
    padding: 8px 6px;
    border-bottom: 1px solid #e2e8f0;
    border-left: 1px solid #e2e8f0;
    font-weight: 700;
    width: var(--aw-mx-sum-w);
}

.aw-mx-td-summary--p[b-gokqcl0om2] { color: #16a34a; }
.aw-mx-td-summary--a[b-gokqcl0om2] { color: #dc2626; }
.aw-mx-td-summary--l[b-gokqcl0om2] { color: #ca8a04; }
.aw-mx-td-summary--hd[b-gokqcl0om2] { color: #ea580c; }
.aw-mx-td-summary--ol[b-gokqcl0om2] { color: #0284c7; }

.aw-mx-td-pct[b-gokqcl0om2] {
    text-align: center;
    padding: 8px 6px;
    border-bottom: 1px solid #e2e8f0;
    border-left: 2px solid #e2e8f0;
    font-size: 13px;
    font-weight: 800;
    color: #334155;
    white-space: nowrap;
    width: var(--aw-mx-pct-w);
    position: sticky;
    right: 0;
    z-index: 1;
    background: #fff;
}

.aw-mx-td-pct--low[b-gokqcl0om2] { color: #dc2626; }

/* ── Mobile: keep the frozen name column compact ── */
@media (max-width: 640px) {
    .aw-matrix-grid[b-gokqcl0om2] { --aw-mx-name-w: 130px; }
    .aw-mx-th-student[b-gokqcl0om2] { padding: 10px 8px; }
    .aw-mx-td-student[b-gokqcl0om2] { padding: 8px 8px; }
    .aw-mx-student-name[b-gokqcl0om2] { font-size: 12px; }
}

/* ── Responsive ── */
@media (max-width: 768px) {
    .aw-topbar[b-gokqcl0om2]   { padding: 10px 16px; }
    .aw-controls-bar[b-gokqcl0om2] { padding: 10px 16px; top: 60px; }
    .aw-kpi-strip[b-gokqcl0om2] { padding: 0 16px 12px; }
    .aw-kpi-progress[b-gokqcl0om2], .aw-filter-chips[b-gokqcl0om2] { padding-left: 16px; padding-right: 16px; }
    .aw-grid-card[b-gokqcl0om2] { margin: 0 16px 24px; }
    .aw-matrix-shell[b-gokqcl0om2] { margin: 0 16px 24px; }
    .aw-grid-head[b-gokqcl0om2], .aw-row[b-gokqcl0om2] { grid-template-columns: 36px 1fr 200px; }
    .aw-th-role[b-gokqcl0om2], .aw-td-role[b-gokqcl0om2], .aw-th-checkin[b-gokqcl0om2], .aw-td-checkin[b-gokqcl0om2], .aw-th-checkout[b-gokqcl0om2], .aw-td-checkout[b-gokqcl0om2] { display: none; }
    .aw-mode-toggle[b-gokqcl0om2] { width: 100%; }
    .aw-mode-tab[b-gokqcl0om2] { flex: 1; justify-content: center; }
}

/* /Pages/Principal/Budget/Review.razor.rz.scp.css */
/* No additional styles needed */
/* /Pages/Principal/Celebrations/Templates/Index.razor.rz.scp.css */
/* Pages/Principal/Celebrations/Templates/Index.razor.css */
/* Inherits the ct-* class styles defined in Admin version — both pages share the same CSS class names.
   This file intentionally mirrors the admin styles since the page structure is identical. */

.ct-loading[b-mvcyz3uqkj] {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 200px;
}

.ct-page[b-mvcyz3uqkj] { padding: 1.5rem; max-width: 1200px; margin: 0 auto; }

.ct-page-header[b-mvcyz3uqkj] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 1.25rem;
    gap: 1rem;
    flex-wrap: wrap;
}

.ct-page-title[b-mvcyz3uqkj] { font-size: 1.2rem; font-weight: 700; color: var(--color-neutral-900); margin: 0 0 0.2rem; }
.ct-page-sub[b-mvcyz3uqkj]   { font-size: 0.82rem; color: var(--color-neutral-500); margin: 0; }

.ct-btn-primary[b-mvcyz3uqkj] {
    padding: 0.5rem 1.1rem;
    font-size: 0.82rem;
    font-weight: 700;
    border: none;
    border-radius: 6px;
    background: var(--color-primary-600, #6366f1);
    color: #fff;
    cursor: pointer;
    white-space: nowrap;
}

.ct-btn-primary:hover[b-mvcyz3uqkj] { background: var(--color-primary-700, #4f46e5); }

.ct-error-banner[b-mvcyz3uqkj] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.6rem 1rem;
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: 6px;
    color: #dc2626;
    font-size: 0.82rem;
    margin-bottom: 1rem;
}

.ct-error-banner button[b-mvcyz3uqkj] { background: none; border: none; color: #dc2626; cursor: pointer; font-size: 1rem; }

.ct-filter-bar[b-mvcyz3uqkj] { display: flex; gap: 0.35rem; margin-bottom: 1rem; flex-wrap: wrap; }

.ct-tab[b-mvcyz3uqkj] {
    padding: 0.35rem 0.9rem;
    font-size: 0.78rem;
    font-weight: 600;
    border: 1px solid var(--color-neutral-200);
    border-radius: 6px;
    background: #fff;
    color: var(--color-neutral-600);
    cursor: pointer;
    transition: all 0.15s;
}

.ct-tab.active[b-mvcyz3uqkj],
.ct-tab:hover[b-mvcyz3uqkj] {
    background: var(--color-primary-50, #eef2ff);
    border-color: var(--color-primary-300, #a5b4fc);
    color: var(--color-primary-700, #4338ca);
}

.ct-card[b-mvcyz3uqkj] { background: #fff; border: 1px solid var(--color-neutral-100); border-radius: 8px; overflow: hidden; }

.ct-table[b-mvcyz3uqkj] { width: 100%; border-collapse: collapse; font-size: 0.82rem; }

.ct-table th[b-mvcyz3uqkj] {
    padding: 0.6rem 0.8rem;
    text-align: left;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-neutral-500);
    background: #f8fafc;
    border-bottom: 1px solid var(--color-neutral-100);
}

.ct-table td[b-mvcyz3uqkj] {
    padding: 0.7rem 0.8rem;
    border-bottom: 1px solid var(--color-neutral-50);
    vertical-align: middle;
    color: var(--color-neutral-800);
}

.ct-table tr:last-child td[b-mvcyz3uqkj] { border-bottom: none; }
.ct-table tr:hover td[b-mvcyz3uqkj]      { background: #fafafa; }
.ct-row-inactive td[b-mvcyz3uqkj]        { opacity: 0.55; }

.ct-template-cell[b-mvcyz3uqkj] { display: flex; align-items: center; gap: 0.6rem; }

.ct-theme-dot[b-mvcyz3uqkj] {
    width: 36px; height: 36px; border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.1rem; flex-shrink: 0;
}

.ct-template-name[b-mvcyz3uqkj]    { font-weight: 600; color: var(--color-neutral-900); }
.ct-template-preview[b-mvcyz3uqkj] { font-size: 0.72rem; color: var(--color-neutral-400); margin-top: 2px; }

.ct-badge-type[b-mvcyz3uqkj] { display: inline-block; padding: 2px 7px; border-radius: 4px; background: #f0fdf4; color: #15803d; font-size: 0.72rem; font-weight: 600; }
.ct-badge-sub[b-mvcyz3uqkj]  { display: inline-block; padding: 2px 7px; border-radius: 4px; background: #fefce8; color: #a16207; font-size: 0.72rem; font-weight: 600; margin-left: 4px; }
.ct-badge-default[b-mvcyz3uqkj] { display: inline-block; padding: 1px 6px; border-radius: 4px; background: #f0f9ff; color: #0369a1; font-size: 0.68rem; font-weight: 700; margin-left: 4px; text-transform: uppercase; letter-spacing: 0.04em; }

.ct-scope-badge[b-mvcyz3uqkj] { display: inline-block; padding: 2px 7px; border-radius: 20px; font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; }
.ct-scope-badge.system[b-mvcyz3uqkj]   { background: #ede9fe; color: #6d28d9; }
.ct-scope-badge.school[b-mvcyz3uqkj]   { background: #dbeafe; color: #1d4ed8; }
.ct-scope-badge.personal[b-mvcyz3uqkj] { background: #d1fae5; color: #065f46; }

.ct-status-active[b-mvcyz3uqkj]   { display: inline-block; padding: 2px 8px; border-radius: 20px; background: #d1fae5; color: #065f46; font-size: 0.72rem; font-weight: 600; }
.ct-status-inactive[b-mvcyz3uqkj] { display: inline-block; padding: 2px 8px; border-radius: 20px; background: #f1f5f9; color: #64748b; font-size: 0.72rem; font-weight: 600; }

.ct-actions[b-mvcyz3uqkj] { display: flex; gap: 0.4rem; align-items: center; }

.ct-btn-icon[b-mvcyz3uqkj] { background: none; border: 1px solid var(--color-neutral-200); border-radius: 5px; padding: 0.25rem 0.5rem; font-size: 0.85rem; cursor: pointer; transition: background 0.15s; }
.ct-btn-icon:hover[b-mvcyz3uqkj] { background: #f8fafc; }

.ct-empty[b-mvcyz3uqkj] { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.5rem; padding: 3rem 1rem; }
.ct-empty-icon[b-mvcyz3uqkj] { font-size: 2.5rem; }
.ct-empty-text[b-mvcyz3uqkj] { font-size: 0.85rem; color: var(--color-neutral-400); }
/* /Pages/Principal/Certificates/Index.razor.rz.scp.css */
:host[b-sykimaowyx]{display:block}
/* /Pages/Principal/Curriculum/Approvals.razor.rz.scp.css */
/* Principal Curriculum Approvals — Approvals.razor.css */

/* Modal backdrop animation */
.modal-backdrop[b-v2mvuei4mm] {
    animation: fadeInBackdrop-b-v2mvuei4mm 0.2s ease;
}

@keyframes fadeInBackdrop-b-v2mvuei4mm {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Modal panel */
.modal-panel[b-v2mvuei4mm] {
    animation: slideUpModal-b-v2mvuei4mm 0.25s ease;
}

@keyframes slideUpModal-b-v2mvuei4mm {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Plan card hover */
.plan-card[b-v2mvuei4mm] {
    transition: box-shadow 0.2s ease;
}

.plan-card:hover[b-v2mvuei4mm] {
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.1);
}

/* Chapter row */
.chapter-row[b-v2mvuei4mm] {
    border-left: 3px solid var(--color-primary-300, #93c5fd);
    padding-left: 0.75rem;
}

/* Stat counter */
.stat-count[b-v2mvuei4mm] {
    font-feature-settings: "tnum";
    font-variant-numeric: tabular-nums;
}
/* /Pages/Principal/Curriculum/Coverage.razor.rz.scp.css */
/* Principal Curriculum Coverage — Coverage.razor.css */

/* ── Stat cards ──────────────────────────────────────────────── */
.stat-card[b-o8it6birto] {
    transition: box-shadow 0.2s ease;
}

.stat-card:hover[b-o8it6birto] {
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.1);
}

.stat-number[b-o8it6birto] {
    font-variant-numeric: tabular-nums;
}

/* ── Overall progress bar ────────────────────────────────────── */
.progress-track[b-o8it6birto] {
    width: 100%;
    height: 14px;
    background-color: #e5e7eb;
    border-radius: 9999px;
    overflow: hidden;
}

.progress-fill[b-o8it6birto] {
    height: 100%;
    background-color: #2563eb;
    border-radius: 9999px;
    transition: width 0.6s ease;
}

.overall-pct[b-o8it6birto] {
    font-variant-numeric: tabular-nums;
}

/* ── Coverage table ──────────────────────────────────────────── */
.coverage-table[b-o8it6birto] {
    border-collapse: collapse;
}

.subject-row[b-o8it6birto] {
    transition: background-color 0.12s ease;
}

/* ── Subject progress bars (in table) ───────────────────────── */
.subject-bar-track[b-o8it6birto] {
    width: 100%;
    height: 8px;
    background-color: #f3f4f6;
    border-radius: 9999px;
    overflow: hidden;
    min-width: 80px;
}

.subject-bar-fill[b-o8it6birto] {
    height: 100%;
    border-radius: 9999px;
    transition: width 0.5s ease;
}

.subject-bar-fill--success[b-o8it6birto] {
    background-color: #16a34a;
}

.subject-bar-fill--primary[b-o8it6birto] {
    background-color: #2563eb;
}

.subject-bar-fill--warning[b-o8it6birto] {
    background-color: #ca8a04;
}

.subject-bar-fill--danger[b-o8it6birto] {
    background-color: #dc2626;
}

/* ── Status badges ───────────────────────────────────────────── */
.status-badge[b-o8it6birto] {
    display: inline-block;
    padding: 0.2rem 0.625rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 600;
    white-space: nowrap;
}

.status-badge--success[b-o8it6birto] {
    background-color: #dcfce7;
    color: #166534;
}

.status-badge--primary[b-o8it6birto] {
    background-color: #dbeafe;
    color: #1e40af;
}

.status-badge--warning[b-o8it6birto] {
    background-color: #fef9c3;
    color: #854d0e;
}

.status-badge--danger[b-o8it6birto] {
    background-color: #fee2e2;
    color: #991b1b;
}
/* /Pages/Principal/Curriculum/Extensions.razor.rz.scp.css */
/* Principal Curriculum Extensions — Extensions.razor.css */

/* Extension request card */
.ext-card[b-hruwmdmay3] {
    transition: box-shadow 0.2s ease;
}

.ext-card:hover[b-hruwmdmay3] {
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.1);
}

/* Days requested badge */
.days-badge[b-hruwmdmay3] {
    font-feature-settings: "tnum";
    font-variant-numeric: tabular-nums;
    min-width: 2.5rem;
    text-align: center;
}

/* Timeline arrow between dates */
.date-arrow[b-hruwmdmay3] {
    color: var(--color-neutral-400, #9ca3af);
    font-size: 0.875rem;
}

/* Stat count */
.stat-count[b-hruwmdmay3] {
    font-feature-settings: "tnum";
    font-variant-numeric: tabular-nums;
}

/* Modal backdrop */
.modal-backdrop[b-hruwmdmay3] {
    animation: fadeInBackdrop-b-hruwmdmay3 0.2s ease;
}

@keyframes fadeInBackdrop-b-hruwmdmay3 {
    from { opacity: 0; }
    to   { opacity: 1; }
}
/* /Pages/Principal/Curriculum/Index.razor.rz.scp.css */
/* Principal Curriculum Dashboard — Index.razor.css */

/* Stat cards */
.stat-card[b-tp139o1pbo] {
    transition: box-shadow 0.2s ease;
}

.stat-card:hover[b-tp139o1pbo] {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* Coverage progress bar */
.coverage-bar[b-tp139o1pbo] {
    transition: width 0.6s ease;
}

/* Subject row hover */
.subject-row[b-tp139o1pbo] {
    transition: background-color 0.15s ease;
}

/* Alert strip */
.alert-strip[b-tp139o1pbo] {
    border-left-width: 4px;
    border-left-style: solid;
}

/* Summary number highlight */
.summary-number[b-tp139o1pbo] {
    font-feature-settings: "tnum";
    font-variant-numeric: tabular-nums;
}
/* /Pages/Principal/Curriculum/MarkdownImport.razor.rz.scp.css */
/* Principal Curriculum MarkdownImport — MarkdownImport.razor.css */

/* ── Wizard stepper ──────────────────────────────────────────── */
.stepper[b-fqsyx7wixn] {
    display: flex;
    align-items: center;
    background: #ffffff;
    border-radius: 0.75rem;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
    padding: 1.25rem 1.5rem;
    gap: 0;
}

.step[b-fqsyx7wixn] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.375rem;
    flex-shrink: 0;
}

.step-circle[b-fqsyx7wixn] {
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 50%;
    background-color: #e5e7eb;
    color: #9ca3af;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.875rem;
    font-weight: 700;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.step--active .step-circle[b-fqsyx7wixn] {
    background-color: #2563eb;
    color: #ffffff;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.2);
}

.step--done .step-circle[b-fqsyx7wixn] {
    background-color: #16a34a;
    color: #ffffff;
}

.step-label[b-fqsyx7wixn] {
    font-size: 0.75rem;
    font-weight: 600;
    color: #9ca3af;
    white-space: nowrap;
}

.step--active .step-label[b-fqsyx7wixn],
.step--done .step-label[b-fqsyx7wixn] {
    color: #111827;
}

.step-line[b-fqsyx7wixn] {
    flex: 1;
    height: 2px;
    background-color: #e5e7eb;
    margin: 0 0.5rem;
    margin-bottom: 1.25rem; /* align with circle center */
    transition: background-color 0.2s ease;
}

/* ── Form elements ───────────────────────────────────────────── */
.form-group[b-fqsyx7wixn] {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

.form-label[b-fqsyx7wixn] {
    font-size: 0.875rem;
    font-weight: 600;
    color: #374151;
}

.form-select[b-fqsyx7wixn] {
    width: 100%;
    padding: 0.5rem 0.75rem;
    border: 1px solid #d1d5db;
    border-radius: 0.5rem;
    font-size: 0.9375rem;
    color: #111827;
    background-color: #ffffff;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    outline: none;
}

.form-select:focus[b-fqsyx7wixn] {
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}

.form-select:disabled[b-fqsyx7wixn] {
    background-color: #f9fafb;
    color: #9ca3af;
    cursor: not-allowed;
}

.markdown-textarea[b-fqsyx7wixn] {
    resize: vertical;
    min-height: 200px;
    line-height: 1.6;
}

/* ── Preview list ────────────────────────────────────────────── */
.preview-item[b-fqsyx7wixn] {
    transition: background-color 0.12s ease;
}

.preview-item:hover[b-fqsyx7wixn] {
    background-color: #fafafa;
}

.chapter-num[b-fqsyx7wixn] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.875rem;
    height: 1.875rem;
    background-color: #dbeafe;
    color: #1e40af;
    border-radius: 50%;
    font-size: 0.8125rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

/* ── Result icon ─────────────────────────────────────────────── */
.result-icon[b-fqsyx7wixn] {
    width: 5rem;
    height: 5rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.result-icon--success[b-fqsyx7wixn] {
    background-color: #dcfce7;
}

.result-icon--danger[b-fqsyx7wixn] {
    background-color: #fee2e2;
}
/* /Pages/Principal/Curriculum/RedSchedule.razor.rz.scp.css */
/* Principal Curriculum Red-Schedule — RedSchedule.razor.css */

/* ── Summary chips ───────────────────────────────────────────── */
.summary-chips[b-tlunuvxc8y] {
    flex-wrap: wrap;
}

.chip[b-tlunuvxc8y] {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.5rem 1rem;
    border-radius: 9999px;
    font-size: 0.875rem;
    font-weight: 600;
    border: 1px solid transparent;
}

.chip-danger[b-tlunuvxc8y] {
    background-color: #fef2f2;
    color: #991b1b;
    border-color: #fecaca;
}

.chip-warning[b-tlunuvxc8y] {
    background-color: #fffbeb;
    color: #92400e;
    border-color: #fde68a;
}

.chip-info[b-tlunuvxc8y] {
    background-color: #eff6ff;
    color: #1e40af;
    border-color: #bfdbfe;
}

.chip-neutral[b-tlunuvxc8y] {
    background-color: #f3f4f6;
    color: #374151;
    border-color: #e5e7eb;
}

.chip-count[b-tlunuvxc8y] {
    font-size: 1.125rem;
    font-variant-numeric: tabular-nums;
}

.chip-label[b-tlunuvxc8y] {
    font-weight: 500;
}

/* ── Filter buttons ──────────────────────────────────────────── */
.filter-btn[b-tlunuvxc8y] {
    padding: 0.375rem 1rem;
    border-radius: 9999px;
    font-size: 0.875rem;
    font-weight: 500;
    border: 1px solid #e5e7eb;
    background: #ffffff;
    color: #374151;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.filter-btn:hover[b-tlunuvxc8y] {
    background-color: #f3f4f6;
}

.filter-btn--active[b-tlunuvxc8y] {
    background-color: #1d4ed8;
    color: #ffffff;
    border-color: #1d4ed8;
}

/* ── Alert cards ─────────────────────────────────────────────── */
.alert-card[b-tlunuvxc8y] {
    border-left: 4px solid #e5e7eb;
    transition: box-shadow 0.2s ease;
}

.alert-card--critical[b-tlunuvxc8y] {
    border-left-color: #dc2626;
}

.alert-card--high[b-tlunuvxc8y] {
    border-left-color: #ea580c;
}

.alert-card--medium[b-tlunuvxc8y] {
    border-left-color: #ca8a04;
}

.alert-card--low[b-tlunuvxc8y] {
    border-left-color: #16a34a;
}

/* ── Severity badges ─────────────────────────────────────────── */
.severity-badge[b-tlunuvxc8y] {
    display: inline-block;
    padding: 0.125rem 0.625rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.severity-badge--critical[b-tlunuvxc8y] {
    background-color: #fef2f2;
    color: #991b1b;
}

.severity-badge--high[b-tlunuvxc8y] {
    background-color: #fff7ed;
    color: #9a3412;
}

.severity-badge--medium[b-tlunuvxc8y] {
    background-color: #fefce8;
    color: #854d0e;
}

.severity-badge--low[b-tlunuvxc8y] {
    background-color: #f0fdf4;
    color: #166534;
}

/* ── Days delayed badge ──────────────────────────────────────── */
.days-delayed-badge[b-tlunuvxc8y] {
    display: inline-flex;
    align-items: center;
    background-color: #fef2f2;
    color: #991b1b;
    font-size: 0.8125rem;
    font-weight: 600;
    padding: 0.25rem 0.625rem;
    border-radius: 0.375rem;
    font-variant-numeric: tabular-nums;
}
/* /Pages/Principal/Dashboard.razor.rz.scp.css */
/* ════════════════════════════════════════════════════════
   Principal Dashboard — Scoped styles
   Complements Tailwind utility classes in Dashboard.razor
   ════════════════════════════════════════════════════════ */

/* ── Full-width page container (no max-width restriction) ── */
.dash-page[b-dr7voipkd3] {
    width: 100%;
    padding-top: 8px;
    padding-bottom: 40px;
}

/* Setup banner wrapper — same full width as page */
.dash-banner-wrap[b-dr7voipkd3] {
    width: 100%;
    margin-bottom: 24px;
}

/* ── Context bar (Academic Year / school name header) ── */
.dash-context-bar[b-dr7voipkd3] {
    background: white;
    border: 1px solid #d1d5db;
    border-radius: 12px;
    padding: 20px 24px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 32px;
    flex-wrap: wrap;
}

.dash-context-bar .school-icon[b-dr7voipkd3] {
    width: 56px;
    height: 56px;
    background: linear-gradient(135deg, var(--color-primary-500, #10b981), var(--color-primary-700, #047857));
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 8px rgba(16, 185, 129, 0.3);
    flex-shrink: 0;
}

.dash-context-bar .school-icon i[b-dr7voipkd3] {
    font-size: 1.375rem;
    color: white;
}

.dash-context-bar .school-name[b-dr7voipkd3] {
    font-size: 1.25rem;
    font-weight: 700;
    color: #111827;
    line-height: 1.2;
}

.dash-context-bar .academic-year-label[b-dr7voipkd3] {
    font-size: 0.875rem;
    color: #6b7280;
    margin-top: 2px;
}

.dash-context-bar .academic-year-label span[b-dr7voipkd3] {
    color: var(--color-primary-600, #059669);
    font-weight: 600;
}

.dash-refresh-btn[b-dr7voipkd3] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    background: var(--color-primary-50, #ecfdf5);
    color: var(--color-primary-700, #047857);
    border: 1px solid var(--color-primary-200, #a7f3d0);
    border-radius: 8px;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
    white-space: nowrap;
}

.dash-refresh-btn:hover[b-dr7voipkd3] {
    background: var(--color-primary-100, #d1fae5);
    box-shadow: 0 2px 6px rgba(16, 185, 129, 0.2);
}

.dash-refresh-btn:disabled[b-dr7voipkd3] {
    opacity: 0.5;
    cursor: not-allowed;
}

.dash-refresh-btn.privacy-active[b-dr7voipkd3] {
    background: #fef3c7;
    color: #92400e;
    border-color: #fcd34d;
}

/* ── Section headers ── */
.dash-section-title[b-dr7voipkd3] {
    font-size: 1rem;
    font-weight: 700;
    color: #1f2937;
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 14px;
}

/* ── KPI metric cards (modern) ── */
.kpi-card[b-dr7voipkd3] {
    position: relative;
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    padding: 16px 16px 14px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(16,24,40,0.05);
    transition: box-shadow 0.18s ease, transform 0.18s ease, border-color 0.18s ease;
    display: block;
    text-decoration: none;
}
/* colored top accent bar */
.kpi-card[b-dr7voipkd3]::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: var(--kpi-accent, #3b82f6);
}

.kpi-card:hover[b-dr7voipkd3] {
    box-shadow: 0 8px 20px rgba(16,24,40,0.10);
    transform: translateY(-3px);
    border-color: var(--kpi-ring, #cbd5e1);
}

.kpi-card .kpi-top[b-dr7voipkd3] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}

.kpi-card .kpi-label[b-dr7voipkd3] {
    font-size: 0.78rem;
    color: #64748b;
    font-weight: 600;
    letter-spacing: 0.01em;
}

.kpi-card .kpi-icon[b-dr7voipkd3] {
    width: 38px;
    height: 38px;
    border-radius: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.05rem;
    flex-shrink: 0;
    background: var(--kpi-icon-bg, #eff6ff);
    color: var(--kpi-icon-fg, #2563eb);
}

.kpi-card .kpi-number[b-dr7voipkd3] {
    font-size: 2.15rem;
    font-weight: 800;
    color: #0f172a;
    line-height: 1.05;
    letter-spacing: -0.02em;
    margin: 0 0 10px;
    font-variant-numeric: tabular-nums;
}

.kpi-card .kpi-sub[b-dr7voipkd3] {
    font-size: 0.72rem;
    font-weight: 500;
    margin-top: 0;
    padding-top: 9px;
    border-top: 1px dashed #e2e8f0;
    color: var(--kpi-sub, #64748b);
}

/* Per-KPI accent palettes */
.kpi-card.kpi-students[b-dr7voipkd3] {
    --kpi-accent: #10b981;
    --kpi-ring: #a7f3d0;
    --kpi-icon-bg: linear-gradient(135deg, #d1fae5, #a7f3d0);
    --kpi-icon-fg: #059669;
    --kpi-sub: #047857;
}
.kpi-card.kpi-teachers[b-dr7voipkd3] {
    --kpi-accent: #3b82f6;
    --kpi-ring: #bfdbfe;
    --kpi-icon-bg: linear-gradient(135deg, #dbeafe, #bfdbfe);
    --kpi-icon-fg: #2563eb;
    --kpi-sub: #1d4ed8;
}
.kpi-card.kpi-exams[b-dr7voipkd3] {
    --kpi-accent: #0ea5e9;
    --kpi-ring: #bae6fd;
    --kpi-icon-bg: linear-gradient(135deg, #e0f2fe, #bae6fd);
    --kpi-icon-fg: #0284c7;
    --kpi-sub: #0369a1;
}
.kpi-card.kpi-defaulters[b-dr7voipkd3] {
    --kpi-accent: #f59e0b;
    --kpi-ring: #fde68a;
    --kpi-icon-bg: linear-gradient(135deg, #fef3c7, #fde68a);
    --kpi-icon-fg: #d97706;
    --kpi-sub: #b45309;
}

/* Fee Overview KPI palettes — same system, fee hues */
.kpi-card.kpi-fee-demand[b-dr7voipkd3] {
    --kpi-accent: #3b82f6;
    --kpi-ring: #bfdbfe;
    --kpi-icon-bg: linear-gradient(135deg, #dbeafe, #bfdbfe);
    --kpi-icon-fg: #2563eb;
    --kpi-sub: #1d4ed8;
}
.kpi-card.kpi-fee-collected[b-dr7voipkd3] {
    --kpi-accent: #10b981;
    --kpi-ring: #a7f3d0;
    --kpi-icon-bg: linear-gradient(135deg, #d1fae5, #a7f3d0);
    --kpi-icon-fg: #059669;
    --kpi-sub: #047857;
}
.kpi-card.kpi-fee-today[b-dr7voipkd3] {
    --kpi-accent: #f59e0b;
    --kpi-ring: #fde68a;
    --kpi-icon-bg: linear-gradient(135deg, #fef3c7, #fde68a);
    --kpi-icon-fg: #d97706;
    --kpi-sub: #b45309;
}
.kpi-card.kpi-fee-dues[b-dr7voipkd3] {
    --kpi-accent: #ef4444;
    --kpi-ring: #fecaca;
    --kpi-icon-bg: linear-gradient(135deg, #fee2e2, #fecaca);
    --kpi-icon-fg: #dc2626;
    --kpi-sub: #b91c1c;
}

/* ── Quick Action cards (compact, single row) ── */
.qa-card[b-dr7voipkd3] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 12px 8px 11px;
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
    text-decoration: none;
    transition: box-shadow 0.15s ease, transform 0.15s ease, border-color 0.15s ease;
    cursor: pointer;
}

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

.qa-card .qa-icon[b-dr7voipkd3] {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    flex-shrink: 0;
    transition: transform 0.15s ease;
}

.qa-card:hover .qa-icon[b-dr7voipkd3] {
    transform: scale(1.08);
}

.qa-card .qa-label[b-dr7voipkd3] {
    font-size: 0.75rem;
    font-weight: 600;
    color: #374151;
    text-align: center;
    line-height: 1.15;
    width: 100%;
}

/* Primary CTA variant — Add Student, Add Teacher */
.qa-card.qa-primary[b-dr7voipkd3] {
    border: 1.5px solid var(--color-primary-300, #6ee7b7);
    background: linear-gradient(135deg, #f0fdf4 0%, white 70%);
}

.qa-card.qa-primary .qa-icon[b-dr7voipkd3] {
    background: var(--color-primary-100, #d1fae5);
}

.qa-card.qa-primary .qa-icon i[b-dr7voipkd3] {
    color: var(--color-primary-600, #059669);
}

.qa-card.qa-primary .qa-label[b-dr7voipkd3] {
    color: var(--color-primary-700, #047857);
    font-weight: 700;
}

.qa-card.qa-primary:hover[b-dr7voipkd3] {
    border-color: var(--color-primary-500, #10b981);
    box-shadow: 0 6px 16px rgba(16, 185, 129, 0.2);
}

/* ── Assignment stat pills ── */
.assign-stat[b-dr7voipkd3] {
    display: flex;
    align-items: center;
    gap: 12px;
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 14px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}

.assign-stat .stat-icon[b-dr7voipkd3] {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 0.9rem;
}

.assign-stat .stat-num[b-dr7voipkd3] {
    font-size: 1.375rem;
    font-weight: 800;
    line-height: 1;
}

.assign-stat .stat-lbl[b-dr7voipkd3] {
    font-size: 0.75rem;
    color: #6b7280;
    line-height: 1.2;
    margin-top: 2px;
}

/* Color variants */
.assign-stat.stat-total   .stat-icon[b-dr7voipkd3] { background: #ede9fe; }
.assign-stat.stat-total   .stat-icon i[b-dr7voipkd3] { color: #7c3aed; }
.assign-stat.stat-total   .stat-num[b-dr7voipkd3] { color: #111827; }

.assign-stat.stat-not-started .stat-icon[b-dr7voipkd3] { background: #fee2e2; }
.assign-stat.stat-not-started .stat-icon i[b-dr7voipkd3] { color: #dc2626; }
.assign-stat.stat-not-started .stat-num[b-dr7voipkd3] { color: #dc2626; }

.assign-stat.stat-in-progress .stat-icon[b-dr7voipkd3] { background: #fef3c7; }
.assign-stat.stat-in-progress .stat-icon i[b-dr7voipkd3] { color: #d97706; }
.assign-stat.stat-in-progress .stat-num[b-dr7voipkd3] { color: #d97706; }

.assign-stat.stat-submitted .stat-icon[b-dr7voipkd3] { background: #dbeafe; }
.assign-stat.stat-submitted .stat-icon i[b-dr7voipkd3] { color: #2563eb; }
.assign-stat.stat-submitted .stat-num[b-dr7voipkd3] { color: #2563eb; }

.assign-stat.stat-graded .stat-icon[b-dr7voipkd3] { background: #d1fae5; }
.assign-stat.stat-graded .stat-icon i[b-dr7voipkd3] { color: #059669; }
.assign-stat.stat-graded .stat-num[b-dr7voipkd3] { color: #059669; }

.assign-stat.stat-exams-total .stat-icon[b-dr7voipkd3] { background: #e0e7ff; }
.assign-stat.stat-exams-total .stat-icon i[b-dr7voipkd3] { color: #4f46e5; }
.assign-stat.stat-exams-total .stat-num[b-dr7voipkd3] { color: #111827; }

/* ── Hostel stat tiles ── */
.hostel-grid[b-dr7voipkd3] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
}

@media (min-width: 1280px) {
    .hostel-grid[b-dr7voipkd3] { grid-template-columns: repeat(7, 1fr); }
}

@media (max-width: 767px) {
    .hostel-grid[b-dr7voipkd3] { grid-template-columns: repeat(2, 1fr); }
}

/* ── Spacing helpers ── */
.dash-section[b-dr7voipkd3] {
    margin-bottom: 36px;
}

/* ── Responsive ── */
@media (max-width: 639px) {
    .dash-page[b-dr7voipkd3] { padding-bottom: 24px; }
    .dash-context-bar[b-dr7voipkd3] {
        padding: 16px;
        margin-bottom: 20px;
    }
    .dash-context-bar .school-name[b-dr7voipkd3] { font-size: 1.05rem; }
    .kpi-card .kpi-number[b-dr7voipkd3] { font-size: 1.75rem; }
    .hostel-grid[b-dr7voipkd3] { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 767px) {
    .grid.grid-cols-2[b-dr7voipkd3] { grid-template-columns: 1fr !important; }
}

/* ══════════════════════════════════════════════════
   School Setup Stepper
   ══════════════════════════════════════════════════ */

.setup-stepper-card[b-dr7voipkd3] {
    background: white;
    border: 1px solid #d1fae5;
    border-radius: 14px;
    padding: 20px 24px 16px;
    box-shadow: 0 2px 8px rgba(13, 148, 136, 0.08);
}

/* Header row */
.setup-stepper-hdr[b-dr7voipkd3] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}

.setup-stepper-title[b-dr7voipkd3] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--color-teal-700);
}

.setup-stepper-title i[b-dr7voipkd3] {
    color: var(--color-teal-600);
    font-size: 0.95rem;
}

.setup-stepper-count[b-dr7voipkd3] {
    font-size: 0.8rem;
    font-weight: 600;
    color: #6b7280;
    background: #f3f4f6;
    padding: 3px 10px;
    border-radius: 999px;
}

.setup-stepper-count.count-all-done[b-dr7voipkd3] {
    color: #059669;
    background: #d1fae5;
}

/* Progress bar */
.setup-progress-track[b-dr7voipkd3] {
    height: 4px;
    background: #e5e7eb;
    border-radius: 999px;
    margin-bottom: 20px;
    overflow: hidden;
}

.setup-progress-fill[b-dr7voipkd3] {
    height: 100%;
    background: linear-gradient(90deg, var(--color-teal-600), #10b981);
    border-radius: 999px;
    transition: width 0.6s ease;
}

/* Steps row — horizontally scrollable on mobile */
.setup-steps-row[b-dr7voipkd3] {
    display: flex;
    align-items: flex-start;
    overflow-x: auto;
    padding-bottom: 6px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 0;
}

.setup-steps-row[b-dr7voipkd3]::-webkit-scrollbar { display: none; }

/* Individual step */
.setup-step[b-dr7voipkd3] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
    min-width: 52px;
}

/* Connector line between steps */
.step-connector[b-dr7voipkd3] {
    flex: 1;
    min-width: 8px;
    height: 2px;
    background: #e5e7eb;
    margin-top: 17px;
    flex-shrink: 1;
}

.step-connector.conn-done[b-dr7voipkd3] {
    background: #10b981;
}

/* Circle */
.step-circle[b-dr7voipkd3] {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    font-weight: 700;
    flex-shrink: 0;
    text-decoration: none;
    transition: transform 0.15s, box-shadow 0.15s;
}

.step-circle.step-done[b-dr7voipkd3] {
    background: #d1fae5;
    color: #059669;
    border: 2px solid #10b981;
    cursor: default;
}

.step-circle.step-missing[b-dr7voipkd3] {
    background: #fee2e2;
    color: #dc2626;
    border: 2px solid #fca5a5;
    cursor: pointer;
}

.step-circle.step-missing:hover[b-dr7voipkd3] {
    background: #dc2626;
    color: white;
    border-color: #dc2626;
    transform: scale(1.1);
    box-shadow: 0 3px 8px rgba(220, 38, 38, 0.3);
}

/* Label below circle */
.step-lbl[b-dr7voipkd3] {
    font-size: 0.62rem;
    font-weight: 600;
    text-align: center;
    white-space: nowrap;
    line-height: 1.2;
}

.step-lbl.lbl-done[b-dr7voipkd3]  { color: #059669; }
.step-lbl.lbl-missing[b-dr7voipkd3] { color: #dc2626; }

/* Footer hint */
.setup-stepper-footer[b-dr7voipkd3] {
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid #f0fdf4;
    font-size: 0.8rem;
    color: #6b7280;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.stepper-fix-link[b-dr7voipkd3] {
    color: var(--color-teal-600);
    font-weight: 600;
    text-decoration: none;
}

.stepper-fix-link:hover[b-dr7voipkd3] { text-decoration: underline; }

.setup-complete-footer[b-dr7voipkd3] {
    color: #059669;
    font-weight: 600;
    gap: 6px;
}

.setup-complete-footer i[b-dr7voipkd3] { font-size: 0.95rem; }
/* /Pages/Principal/Events/Index.razor.rz.scp.css */
/* Principal Events page — primary styling via Tailwind utilities in markup */

/* /Pages/Principal/Exams/Index.razor.rz.scp.css */
/* Principal Exams page — primary styling via Tailwind utilities in markup */

/* Ensure table scrolls cleanly on small screens */
.overflow-x-auto[b-c4rw67n7lt] {
    -webkit-overflow-scrolling: touch;
}
/* /Pages/Principal/ExamTemplates/Index.razor.rz.scp.css */
/* ── Batch cards ──────────────────────────────────────────────────── */
.batch-card[b-x1o8l6fdc3] {
    background: #fff;
    border-radius: 0.75rem;
    border: 1.5px solid #e5e7eb;
    padding: 1rem 1.25rem;
    transition: box-shadow 0.15s;
}

.batch-card:hover[b-x1o8l6fdc3] {
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

.batch-card--done[b-x1o8l6fdc3] {
    border-color: #d1fae5;
    background: #f0fdf4;
}

.batch-card--pending[b-x1o8l6fdc3] {
    border-color: #e5e7eb;
}

/* ── Status badge ─────────────────────────────────────────────────── */
.badge-done[b-x1o8l6fdc3] {
    display: inline-flex;
    align-items: center;
    padding: 0.2rem 0.65rem;
    border-radius: 9999px;
    font-size: 0.72rem;
    font-weight: 600;
    white-space: nowrap;
    background: #d1fae5;
    color: #065f46;
    flex-shrink: 0;
}

/* ── Generate buttons ─────────────────────────────────────────────── */
.btn-generate[b-x1o8l6fdc3] {
    display: inline-flex;
    align-items: center;
    padding: 0.3rem 0.85rem;
    border-radius: 0.5rem;
    font-size: 0.8rem;
    font-weight: 600;
    white-space: nowrap;
    border: 1.5px solid transparent;
    cursor: pointer;
    transition: background 0.15s, opacity 0.15s;
    background: var(--color-primary, #4f46e5);
    color: #fff;
    flex-shrink: 0;
}

.btn-generate:disabled[b-x1o8l6fdc3] {
    opacity: 0.5;
    cursor: not-allowed;
}

.btn-generate--orange[b-x1o8l6fdc3] {
    background: #ea580c;
}

.btn-generate--green[b-x1o8l6fdc3] {
    background: #16a34a;
}

.btn-generate--purple[b-x1o8l6fdc3] {
    background: #7c3aed;
}
/* /Pages/Principal/ExamTerms/Detail.razor.rz.scp.css */
/* Exam Term date sheet page — print rules for notice-board export. */

@media print {
    .no-print[b-tjmuexsooq] {
        display: none !important;
    }

    body[b-tjmuexsooq] {
        background: white !important;
    }
}
/* /Pages/Principal/ExamTerms/Index.razor.rz.scp.css */
/* Exam Terms list page — no isolated styles needed (Tailwind utilities). */

@media print {
    .no-print[b-eon04jetb0] {
        display: none !important;
    }
}
/* /Pages/Principal/Expenses/Index.razor.rz.scp.css */
/* Principal/Expenses/Index.razor.css */
.page-header[b-zh8dqku042] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
}
/* /Pages/Principal/FeeManagement/Configuration.razor.rz.scp.css */
/* Fee Configuration Page — scoped styles */
/* /Pages/Principal/FeeManagement/DayBook.razor.rz.scp.css */
/* ─── Mobile payment mode badges ───────────────────────── */
[b-rgrfm16p9f] .db-mode-badge {
    display: inline-block;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.03em;
    padding: 2px 8px;
    border-radius: 6px;
    border: 1px solid transparent;
}
[b-rgrfm16p9f] .db-badge-cash   { background: #f0fdf4; color: #16a34a; border-color: #bbf7d0; }
[b-rgrfm16p9f] .db-badge-upi    { background: #eff6ff; color: #1d4ed8; border-color: #bfdbfe; }
[b-rgrfm16p9f] .db-badge-cheque { background: #fefce8; color: #b45309; border-color: #fde68a; }
[b-rgrfm16p9f] .db-badge-online { background: #faf5ff; color: #7c3aed; border-color: #ddd6fe; }

/* ─── Chip strip: hide scrollbar, keep swipe ───────────── */
[b-rgrfm16p9f] .db-chip-strip {
    width: 100%;
    max-width: 100vw;
    -ms-overflow-style: none;
    scrollbar-width: none;
}
[b-rgrfm16p9f] .db-chip-strip::-webkit-scrollbar {
    display: none;
}

@media (max-width: 767px) {
    [b-rgrfm16p9f] .db-page {
        width: 100%;
        max-width: 100vw;
        overflow-x: hidden;
    }
    [b-rgrfm16p9f] .db-chip-strip {
        max-width: calc(100vw - 48px);
    }
}

/* ─── Quick filter chips ────────────────────────────────── */
[b-rgrfm16p9f] .db-chip {
    min-height: 44px;
    padding: 0 14px;
    font-size: 13px;
    font-weight: 500;
    color: #6b7280;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    white-space: nowrap;
    transition: all 0.15s;
    cursor: pointer;
}

[b-rgrfm16p9f] .db-chip:hover {
    background: #f9fafb;
    border-color: #d1d5db;
    color: #374151;
}

[b-rgrfm16p9f] .db-chip-active {
    background: var(--color-primary, #0e7490);
    border-color: var(--color-primary, #0e7490);
    color: #fff !important;
    font-weight: 600;
}

[b-rgrfm16p9f] .db-chip-mode-active {
    background: #eff6ff;
    border-color: #bfdbfe;
    color: #1d4ed8 !important;
    font-weight: 600;
}

/* ─── Transaction table: min-width forces horizontal scroll ─
   The fixed column widths (~1100px) exceed the card width;
   without a min-width the table shrinks and the last column
   is clipped by the card's overflow-hidden. */
[b-rgrfm16p9f] .db-table {
    min-width: 1150px;
}

/* ─── Calendar cell ─────────────────────────────────────── */
[b-rgrfm16p9f] .db-cal-cell {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.12s, transform 0.1s;
    overflow: hidden;
    border: 1px solid transparent;
    font-size: 12px;
    color: #374151;
    margin: 1px auto;
}

[b-rgrfm16p9f] .db-cal-cell:hover:not(:disabled) {
    background: #f3f4f6;
    transform: scale(1.05);
}

[b-rgrfm16p9f] .db-cal-day {
    font-size: 12px;
    font-weight: 500;
    line-height: 1;
    z-index: 1;
    position: relative;
}

[b-rgrfm16p9f] .db-cal-amt {
    font-size: 9px;
    font-weight: 600;
    color: #16a34a;
    line-height: 1;
    z-index: 1;
    position: relative;
    margin-top: 1px;
}

/* Green intensity background behind the day number */
[b-rgrfm16p9f] .db-cal-has-data {
    background: #f0fdf4;
}

[b-rgrfm16p9f] .db-cal-bar {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 3px;
    background: #22c55e;
    transition: width 0.3s ease;
    border-radius: 0 2px 2px 0;
    max-width: 100%;
}

[b-rgrfm16p9f] .db-cal-today {
    border-color: var(--color-primary, #0e7490) !important;
    background: #f0fdff;
}

[b-rgrfm16p9f] .db-cal-today .db-cal-day {
    color: var(--color-primary, #0e7490);
    font-weight: 700;
}

[b-rgrfm16p9f] .db-cal-selected {
    background: var(--color-primary, #0e7490) !important;
    border-color: var(--color-primary, #0e7490) !important;
}

[b-rgrfm16p9f] .db-cal-selected .db-cal-day,
[b-rgrfm16p9f] .db-cal-selected .db-cal-amt {
    color: #fff !important;
}

[b-rgrfm16p9f] .db-cal-selected .db-cal-bar {
    background: rgba(255, 255, 255, 0.5);
}

[b-rgrfm16p9f] .db-cal-future {
    opacity: 0.35;
    cursor: not-allowed;
}

/* Responsive: hide calendar on small screens — handled by Tailwind `hidden lg:block` */
/* /Pages/Principal/FeeManagement/Index.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════
   Fee Management Dashboard — Scoped styles
   ═══════════════════════════════════════════════════════════ */

/* ── Page header ── */
.fee-page-header h1[b-ebf2fnq6wz] {
    font-size: 1.5rem;
    font-weight: 700;
    color: #111827;
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 4px;
}

.fee-page-header h1 i[b-ebf2fnq6wz] {
    font-size: 1.25rem;
    color: var(--color-primary-600, #059669);
}

.fee-page-header p[b-ebf2fnq6wz] {
    font-size: 0.875rem;
    color: #6b7280;
}

/* ── Action bar ── */
.fee-action-bar[b-ebf2fnq6wz] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.fee-action-bar .action-divider[b-ebf2fnq6wz] {
    width: 1px;
    height: 28px;
    background: #e5e7eb;
    margin: 0 4px;
}

/* ── KPI cards ── */
.kpi-grid[b-ebf2fnq6wz] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    margin-bottom: 32px;
}

@media (min-width: 1024px) {
    .kpi-grid[b-ebf2fnq6wz] { grid-template-columns: repeat(4, 1fr); }
}

.fee-kpi[b-ebf2fnq6wz] {
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    transition: box-shadow 0.15s ease, transform 0.15s ease;
    display: block;
    text-decoration: none;
}

.fee-kpi:hover[b-ebf2fnq6wz] {
    box-shadow: 0 6px 16px rgba(0,0,0,0.1);
    transform: translateY(-1px);
}

.fee-kpi .kpi-icon-wrap[b-ebf2fnq6wz] {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    margin-bottom: 14px;
}

.fee-kpi .kpi-lbl[b-ebf2fnq6wz] {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #6b7280;
    margin-bottom: 6px;
}

.fee-kpi .kpi-amount[b-ebf2fnq6wz] {
    font-size: 1.75rem;
    font-weight: 800;
    color: #111827;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    margin-bottom: 6px;
}

.fee-kpi .kpi-sub[b-ebf2fnq6wz] {
    font-size: 0.75rem;
    color: #9ca3af;
    display: flex;
    align-items: center;
    gap: 5px;
}

/* Annual Demand — blue accent */
.fee-kpi.kpi-demand[b-ebf2fnq6wz] {
    border-left: 3px solid #3b82f6;
    background: linear-gradient(135deg, #eff6ff 0%, white 60%);
}
.fee-kpi.kpi-demand .kpi-icon-wrap[b-ebf2fnq6wz] { background: #dbeafe; color: #2563eb; }
.fee-kpi.kpi-demand .kpi-sub[b-ebf2fnq6wz] { color: #2563eb; }

/* Total Collected — green accent */
.fee-kpi.kpi-collected[b-ebf2fnq6wz] {
    border-left: 3px solid #22c55e;
    background: linear-gradient(135deg, #f0fdf4 0%, white 60%);
}
.fee-kpi.kpi-collected .kpi-icon-wrap[b-ebf2fnq6wz] { background: #dcfce7; color: #16a34a; }
.fee-kpi.kpi-collected .kpi-sub[b-ebf2fnq6wz] { color: #16a34a; }

/* Today's Collection — neutral (gray) when 0, green tint when > 0 */
.fee-kpi.kpi-today[b-ebf2fnq6wz] {
    border-left: 3px solid #9ca3af;
    background: white;
}
.fee-kpi.kpi-today .kpi-icon-wrap[b-ebf2fnq6wz] { background: #f3f4f6; color: #6b7280; }

.fee-kpi.kpi-today.has-data[b-ebf2fnq6wz] {
    border-left-color: #059669;
    background: linear-gradient(135deg, #f0fdf4 0%, white 60%);
}
.fee-kpi.kpi-today.has-data .kpi-icon-wrap[b-ebf2fnq6wz] { background: #dcfce7; color: #059669; }

/* Outstanding — red accent only (critical metric) */
.fee-kpi.kpi-outstanding[b-ebf2fnq6wz] {
    border-left: 3px solid #ef4444;
    background: linear-gradient(135deg, #fef2f2 0%, white 60%);
}
.fee-kpi.kpi-outstanding .kpi-icon-wrap[b-ebf2fnq6wz] { background: #fee2e2; color: #dc2626; }
.fee-kpi.kpi-outstanding .kpi-sub[b-ebf2fnq6wz] { color: #dc2626; }

/* ── Section cards ── */
.fee-section-card[b-ebf2fnq6wz] {
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    overflow: hidden;
    margin-bottom: 24px;
}

.fee-section-header[b-ebf2fnq6wz] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid #f3f4f6;
}

.fee-section-header h3[b-ebf2fnq6wz] {
    font-size: 0.9375rem;
    font-weight: 700;
    color: #111827;
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
}

.fee-section-header h3 i[b-ebf2fnq6wz] {
    font-size: 0.875rem;
}

.fee-section-header .section-link[b-ebf2fnq6wz] {
    font-size: 0.75rem;
    color: var(--color-primary-600, #059669);
    font-weight: 500;
    text-decoration: none;
}

.fee-section-header .section-link:hover[b-ebf2fnq6wz] { text-decoration: underline; }

/* ── Collection Progress ── */
.progress-layout[b-ebf2fnq6wz] {
    display: flex;
    align-items: center;
    gap: 28px;
    padding: 20px;
    flex-wrap: wrap;
}

.donut-wrap[b-ebf2fnq6wz] {
    position: relative;
    width: 120px;
    height: 120px;
    flex-shrink: 0;
}

.donut-wrap .donut-label[b-ebf2fnq6wz] {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    font-weight: 800;
    color: #111827;
}

.progress-metrics[b-ebf2fnq6wz] {
    flex: 1;
    min-width: 180px;
}

.progress-metric-row[b-ebf2fnq6wz] {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 6px 0;
    border-bottom: 1px solid #f3f4f6;
}

.progress-metric-row:last-of-type[b-ebf2fnq6wz] { border-bottom: none; }

.progress-metric-row .pm-label[b-ebf2fnq6wz] {
    font-size: 0.8125rem;
    color: #6b7280;
}

.progress-metric-row .pm-value[b-ebf2fnq6wz] {
    font-size: 0.875rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.progress-bar-track[b-ebf2fnq6wz] {
    width: 100%;
    background: #f3f4f6;
    border-radius: 999px;
    height: 8px;
    overflow: hidden;
    margin-top: 14px;
}

.progress-bar-fill[b-ebf2fnq6wz] {
    height: 100%;
    border-radius: 999px;
    transition: width 0.6s ease;
}

/* ── Overdue Aging ── */
.aging-grid[b-ebf2fnq6wz] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    padding: 16px 20px;
}

@media (min-width: 640px) {
    .aging-grid[b-ebf2fnq6wz] { grid-template-columns: repeat(4, 1fr); }
}

.aging-tile[b-ebf2fnq6wz] {
    border-radius: 10px;
    padding: 16px;
    text-align: center;
    border: 1px solid transparent;
}

.aging-tile .aging-num[b-ebf2fnq6wz] {
    font-size: 1.875rem;
    font-weight: 800;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.aging-tile .aging-lbl[b-ebf2fnq6wz] {
    font-size: 0.75rem;
    color: #6b7280;
    margin-top: 6px;
}

.aging-tile.tier-1[b-ebf2fnq6wz] { background: #fffbeb; border-color: #fde68a; }
.aging-tile.tier-1 .aging-num[b-ebf2fnq6wz] { color: #d97706; }

.aging-tile.tier-2[b-ebf2fnq6wz] { background: #fff7ed; border-color: #fed7aa; }
.aging-tile.tier-2 .aging-num[b-ebf2fnq6wz] { color: #ea580c; }

.aging-tile.tier-3[b-ebf2fnq6wz] { background: #fef2f2; border-color: #fecaca; }
.aging-tile.tier-3 .aging-num[b-ebf2fnq6wz] { color: #dc2626; }

.aging-tile.tier-4[b-ebf2fnq6wz] { background: #fef2f2; border-color: #fca5a5; }
.aging-tile.tier-4 .aging-num[b-ebf2fnq6wz] { color: #b91c1c; }

.aging-urgent-banner[b-ebf2fnq6wz] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.8125rem;
    color: #b91c1c;
    background: #fef2f2;
    padding: 10px 20px;
    border-top: 1px solid #fecaca;
}

/* ── Class-wise table ── */
.fee-table[b-ebf2fnq6wz] {
    width: 100%;
    font-size: 0.875rem;
    border-collapse: collapse;
}

.fee-table thead tr[b-ebf2fnq6wz] {
    background: #f9fafb;
}

.fee-table thead th[b-ebf2fnq6wz] {
    padding: 12px 16px;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #6b7280;
    white-space: nowrap;
}

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

.fee-table tbody tr[b-ebf2fnq6wz] {
    border-bottom: 1px solid #f3f4f6;
    transition: background 0.1s ease;
}

.fee-table tbody tr:nth-child(even)[b-ebf2fnq6wz] { background: #fafafa; }
.fee-table tbody tr:hover[b-ebf2fnq6wz] { background: #f0fdf4; }

.fee-table tbody td[b-ebf2fnq6wz] {
    padding: 13px 16px;
    color: #374151;
    font-variant-numeric: tabular-nums;
}

.fee-table tbody td.td-name[b-ebf2fnq6wz] {
    font-weight: 600;
    color: #111827;
}

.fee-table tbody td.td-right[b-ebf2fnq6wz] {
    text-align: right;
}

.fee-table tbody td.td-green[b-ebf2fnq6wz] {
    text-align: right;
    color: #16a34a;
    font-weight: 600;
}

.fee-table tbody td.td-red[b-ebf2fnq6wz] {
    text-align: right;
    color: #dc2626;
    font-weight: 600;
}

.fee-table tfoot tr[b-ebf2fnq6wz] {
    background: #f9fafb;
    border-top: 2px solid #e5e7eb;
}

.fee-table tfoot td[b-ebf2fnq6wz] {
    padding: 12px 16px;
    font-weight: 700;
    color: #111827;
    font-variant-numeric: tabular-nums;
}

/* Table progress bar */
.tbl-progress-wrap[b-ebf2fnq6wz] {
    display: flex;
    align-items: center;
    gap: 8px;
    justify-content: flex-end;
}

.tbl-progress-track[b-ebf2fnq6wz] {
    flex: 1;
    min-width: 60px;
    max-width: 120px;
    height: 7px;
    background: #f3f4f6;
    border-radius: 999px;
    overflow: hidden;
}

.tbl-progress-fill[b-ebf2fnq6wz] {
    height: 100%;
    border-radius: 999px;
    transition: width 0.4s ease;
}

.tbl-pct[b-ebf2fnq6wz] {
    font-size: 0.75rem;
    font-weight: 700;
    min-width: 38px;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* ── Recent transactions table ── */
.txn-table tbody tr:hover[b-ebf2fnq6wz] { background: #f9fafb; }

/* ── Quick links panel ── */
.fee-quicklink[b-ebf2fnq6wz] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 20px;
}

.fee-quicklink .ql-icon[b-ebf2fnq6wz] {
    width: 40px;
    height: 40px;
    background: #f0fdf4;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-primary-600, #059669);
    font-size: 1rem;
    flex-shrink: 0;
}

.fee-quicklink .ql-title[b-ebf2fnq6wz] {
    font-size: 0.875rem;
    font-weight: 600;
    color: #111827;
}

.fee-quicklink .ql-sub[b-ebf2fnq6wz] {
    font-size: 0.75rem;
    color: #6b7280;
    margin-top: 2px;
}

/* ── Skeleton ── */
.fee-skeleton-card[b-ebf2fnq6wz] {
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 20px;
    animation: pulse-b-ebf2fnq6wz 1.5s ease-in-out infinite;
}

@keyframes pulse-b-ebf2fnq6wz {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

/* ── Responsive ── */
@media (max-width: 639px) {
    .fee-kpi .kpi-amount[b-ebf2fnq6wz] { font-size: 1.375rem; }
    .donut-wrap[b-ebf2fnq6wz] { width: 90px; height: 90px; }
    .donut-wrap .donut-label[b-ebf2fnq6wz] { font-size: 1rem; }

    .fee-action-bar[b-ebf2fnq6wz] { flex-direction: column; align-items: stretch; }
    .fee-action-bar > *[b-ebf2fnq6wz] { width: 100%; justify-content: center; max-width: 100%; white-space: normal; }
    .action-divider[b-ebf2fnq6wz] { display: none; }

    .fee-quicklink[b-ebf2fnq6wz] {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }
    .fee-quicklink > a[b-ebf2fnq6wz] {
        width: 100%;
        max-width: 100%;
        justify-content: center;
        white-space: normal;
    }
}
/* /Pages/Principal/FeeManagement/Receipts.razor.rz.scp.css */
/* ─── Container ─────────────────────────────────────────────── */
[b-foolpxtcm6] .rcpt-container {
    width: 100%;
    max-width: 1600px;
    margin: 0 auto;
    padding: 1.5rem 2rem;
}
@media (max-width: 640px) {
    [b-foolpxtcm6] .rcpt-container { padding: 1rem; }
}

/* ─── Page Header ────────────────────────────────────────────── */
[b-foolpxtcm6] .rcpt-page-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 0.75rem;
    margin-bottom: 1.25rem;
}
[b-foolpxtcm6] .rcpt-page-title { font-size: 1.375rem; font-weight: 700; color: #111827; line-height: 1.2; }
[b-foolpxtcm6] .rcpt-page-sub   { font-size: 0.8125rem; color: #6b7280; margin-top: 0.125rem; }
[b-foolpxtcm6] .btn-back {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.5rem 0.875rem;
    font-size: 0.8125rem;
    font-weight: 500;
    color: #4b5563;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 0.5rem;
    text-decoration: none;
    transition: background 0.12s;
    white-space: nowrap;
}
[b-foolpxtcm6] .btn-back:hover { background: #f9fafb; }

/* ─── KPI Grid ───────────────────────────────────────────────── */
[b-foolpxtcm6] .rcpt-kpi-grid {
    display: grid;
    grid-template-columns: 1.8fr 1fr 1fr 1fr;
    gap: 0.75rem;
    margin-bottom: 1.25rem;
}
@media (max-width: 900px) { [b-foolpxtcm6] .rcpt-kpi-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { [b-foolpxtcm6] .rcpt-kpi-grid { grid-template-columns: 1fr; }    }

/* Hero card */
[b-foolpxtcm6] .rcpt-kpi-hero {
    background: linear-gradient(135deg, #0e7490 0%, #0b6480 100%);
    border-radius: 0.875rem;
    padding: 1.375rem 1.5rem 1.25rem;
    color: #fff;
    box-shadow: 0 4px 18px rgba(14,116,144,0.22);
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
    overflow: hidden;
}
[b-foolpxtcm6] .rcpt-kpi-hero::before {
    content: ''; position: absolute; right: -30px; top: -30px;
    width: 140px; height: 140px; border-radius: 50%;
    background: rgba(255,255,255,0.06); pointer-events: none;
}
[b-foolpxtcm6] .rcpt-kpi-hero::after {
    content: ''; position: absolute; right: 50px; bottom: -40px;
    width: 100px; height: 100px; border-radius: 50%;
    background: rgba(255,255,255,0.04); pointer-events: none;
}
[b-foolpxtcm6] .rcpt-kpi-hero-label {
    font-size: 0.6875rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.08em; color: rgba(255,255,255,0.65); margin-bottom: 0.375rem;
}
[b-foolpxtcm6] .rcpt-kpi-hero-value {
    font-size: 2.5rem; font-weight: 800; color: #fff; line-height: 1.05;
    font-variant-numeric: tabular-nums; letter-spacing: -0.03em;
}
[b-foolpxtcm6] .rcpt-kpi-hero-full {
    font-size: 0.75rem; color: rgba(255,255,255,0.55);
    font-variant-numeric: tabular-nums; margin-top: 0.125rem;
}
[b-foolpxtcm6] .rcpt-kpi-hero-sub {
    font-size: 0.75rem; color: rgba(255,255,255,0.6);
    margin-top: 0.625rem; display: flex; align-items: center;
}

/* Secondary KPI cards */
[b-foolpxtcm6] .rcpt-kpi-card {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 0.875rem;
    padding: 1.125rem 1.25rem;
    display: flex; align-items: center; gap: 0.875rem;
    box-shadow: 0 1px 4px rgba(0,0,0,0.04);
    transition: box-shadow 0.15s;
}
[b-foolpxtcm6] .rcpt-kpi-card:hover { box-shadow: 0 3px 10px rgba(0,0,0,0.08); }
[b-foolpxtcm6] .rcpt-kpi-icon {
    width: 42px; height: 42px; border-radius: 0.625rem;
    display: flex; align-items: center; justify-content: center;
    font-size: 1rem; flex-shrink: 0;
}
[b-foolpxtcm6] .rcpt-kpi-card-label {
    font-size: 0.6875rem; font-weight: 600; text-transform: uppercase;
    letter-spacing: 0.06em; color: #9ca3af; margin-bottom: 0.125rem;
}
[b-foolpxtcm6] .rcpt-kpi-card-value {
    font-size: 1.5rem; font-weight: 800; color: #111827;
    font-variant-numeric: tabular-nums; line-height: 1.1;
}

/* ─── Filter Toolbar ─────────────────────────────────────────── */
[b-foolpxtcm6] .rcpt-filter-toolbar {
    display: flex; flex-wrap: wrap; align-items: center;
    gap: 0.5rem; margin-bottom: 0.5rem;
}
[b-foolpxtcm6] .rcpt-search-wrap {
    display: flex; align-items: center; flex: 1 1 240px; min-width: 0;
    background: #fff; border: 1px solid #d1d5db;
    border-radius: 0.5rem; overflow: hidden; height: 42px;
    transition: box-shadow 0.12s, border-color 0.12s;
}
[b-foolpxtcm6] .rcpt-search-wrap:focus-within {
    border-color: var(--color-primary, #0e7490);
    box-shadow: 0 0 0 3px rgba(14,116,144,0.12);
}
[b-foolpxtcm6] .rcpt-search-icon  { padding: 0 0.625rem; color: #9ca3af; font-size: 0.8125rem; flex-shrink: 0; }
[b-foolpxtcm6] .rcpt-search-input { flex: 1; height: 100%; font-size: 0.875rem; color: #374151; background: transparent; outline: none; border: none; }
[b-foolpxtcm6] .rcpt-search-clear { padding: 0 0.625rem; color: #9ca3af; background: transparent; border: none; cursor: pointer; font-size: 0.8125rem; }
[b-foolpxtcm6] .rcpt-search-clear:hover { color: #374151; }

[b-foolpxtcm6] .rcpt-date-field { display: flex; flex-direction: column; gap: 1px; }
[b-foolpxtcm6] .rcpt-date-label { font-size: 0.625rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: #9ca3af; line-height: 1; padding-left: 2px; }
[b-foolpxtcm6] .rcpt-date-input {
    height: 34px; padding: 0 0.625rem;
    border: 1px solid #d1d5db; border-radius: 0.5rem;
    font-size: 0.8125rem; color: #374151; background: #fff; outline: none;
    transition: border-color 0.12s, box-shadow 0.12s;
}
[b-foolpxtcm6] .rcpt-date-input:focus { border-color: var(--color-primary, #0e7490); box-shadow: 0 0 0 3px rgba(14,116,144,0.12); }

[b-foolpxtcm6] .rcpt-presets { display: flex; align-items: center; gap: 2px; background: #f3f4f6; border-radius: 0.5rem; padding: 3px; }
[b-foolpxtcm6] .rcpt-preset {
    padding: 4px 10px; font-size: 0.75rem; font-weight: 500; color: #6b7280;
    background: transparent; border: none; border-radius: 6px; cursor: pointer;
    transition: background 0.1s, color 0.1s; white-space: nowrap;
}
[b-foolpxtcm6] .rcpt-preset:hover { background: #e5e7eb; color: #374151; }
[b-foolpxtcm6] .rcpt-preset-active { background: #fff !important; color: var(--color-primary, #0e7490) !important; font-weight: 700; box-shadow: 0 1px 3px rgba(0,0,0,0.1); }

[b-foolpxtcm6] .rcpt-filter-toggle {
    display: inline-flex; align-items: center; height: 38px; padding: 0 0.875rem;
    font-size: 0.8125rem; font-weight: 500; color: #374151; background: #fff;
    border: 1px solid #d1d5db; border-radius: 0.5rem; cursor: pointer;
    transition: background 0.12s, border-color 0.12s;
}
[b-foolpxtcm6] .rcpt-filter-toggle:hover { background: #f9fafb; }
[b-foolpxtcm6] .rcpt-filter-toggle-active { background: var(--color-teal-50); border-color: var(--color-primary, #0e7490); color: var(--color-primary, #0e7490); }
[b-foolpxtcm6] .rcpt-filter-badge {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 18px; height: 18px; font-size: 0.625rem; font-weight: 700;
    color: #fff; background: var(--color-primary, #0e7490);
    border-radius: 100px; padding: 0 4px; margin-left: 5px;
}

[b-foolpxtcm6] .rcpt-btn-secondary {
    display: inline-flex; align-items: center; gap: 0.375rem; height: 38px;
    padding: 0 0.875rem; font-size: 0.8125rem; font-weight: 500; color: #4b5563;
    background: #fff; border: 1px solid #d1d5db; border-radius: 0.5rem;
    cursor: pointer; transition: background 0.12s; white-space: nowrap;
}
[b-foolpxtcm6] .rcpt-btn-secondary:hover:not(:disabled) { background: #f9fafb; }
[b-foolpxtcm6] .rcpt-btn-secondary:disabled { opacity: 0.5; cursor: not-allowed; }

/* ─── Filter Drawer ──────────────────────────────────────────── */
[b-foolpxtcm6] .rcpt-filter-drawer {
    display: flex; flex-wrap: wrap; align-items: center; gap: 1rem;
    background: #f8fafc; border: 1px solid #e5e7eb; border-radius: 0.75rem;
    padding: 0.875rem 1rem; margin-bottom: 0.625rem;
    animation: rcptSlideDown-b-foolpxtcm6 0.15s ease;
}
@keyframes rcptSlideDown-b-foolpxtcm6 {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}
[b-foolpxtcm6] .rcpt-drawer-section { display: flex; align-items: center; gap: 0.625rem; flex-wrap: wrap; }
[b-foolpxtcm6] .rcpt-drawer-label   { font-size: 0.6875rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: #9ca3af; white-space: nowrap; }
[b-foolpxtcm6] .rcpt-chip-group     { display: flex; align-items: center; gap: 0.25rem; flex-wrap: wrap; }
[b-foolpxtcm6] .rcpt-chip {
    display: inline-flex; align-items: center; padding: 4px 10px;
    font-size: 0.75rem; font-weight: 500; color: #4b5563; background: #fff;
    border: 1px solid #d1d5db; border-radius: 100px; cursor: pointer;
    transition: background 0.1s, border-color 0.1s, color 0.1s;
}
[b-foolpxtcm6] .rcpt-chip:hover { background: #f3f4f6; }
[b-foolpxtcm6] .rcpt-chip-active { background: var(--color-primary, #0e7490) !important; border-color: var(--color-primary, #0e7490) !important; color: #fff !important; font-weight: 600; }
[b-foolpxtcm6] .rcpt-clear-filters {
    display: inline-flex; align-items: center; padding: 4px 10px;
    font-size: 0.75rem; font-weight: 500; color: #ef4444; background: #fff5f5;
    border: 1px solid #fca5a5; border-radius: 100px; cursor: pointer;
    transition: background 0.1s; margin-left: auto;
}
[b-foolpxtcm6] .rcpt-clear-filters:hover { background: #fee2e2; }

/* ─── Bulk Bar ───────────────────────────────────────────────── */
[b-foolpxtcm6] .rcpt-bulk-bar {
    display: flex; align-items: center; gap: 0.75rem;
    background: #ecfdf5; border: 1px solid #a7f3d0;
    border-radius: 0.75rem; padding: 0.625rem 1rem; margin-bottom: 0.75rem;
}
[b-foolpxtcm6] .rcpt-bulk-count { font-size: 0.8125rem; font-weight: 600; color: #065f46; }
[b-foolpxtcm6] .rcpt-bulk-btn {
    display: inline-flex; align-items: center; padding: 5px 12px;
    font-size: 0.75rem; font-weight: 600; color: #065f46; background: #fff;
    border: 1px solid #6ee7b7; border-radius: 0.5rem; cursor: pointer; transition: background 0.1s;
}
[b-foolpxtcm6] .rcpt-bulk-btn:hover { background: #d1fae5; }
[b-foolpxtcm6] .rcpt-bulk-btn-danger {
    display: inline-flex; align-items: center; padding: 5px 10px;
    font-size: 0.75rem; font-weight: 600; color: #991b1b; background: transparent;
    border: 1px solid #fca5a5; border-radius: 0.5rem; cursor: pointer; transition: background 0.1s;
}
[b-foolpxtcm6] .rcpt-bulk-btn-danger:hover { background: #fee2e2; }

/* ─── Loading / Empty ────────────────────────────────────────── */
[b-foolpxtcm6] .rcpt-loading-state {
    display: flex; justify-content: center; align-items: center;
    padding: 4rem 0; background: #fff; border-radius: 0.875rem;
    border: 1px solid #e5e7eb; box-shadow: 0 1px 4px rgba(0,0,0,0.04);
}
[b-foolpxtcm6] .rcpt-empty-state {
    background: #fff; border: 1px solid #e5e7eb; border-radius: 0.875rem;
    box-shadow: 0 1px 4px rgba(0,0,0,0.04); padding: 3.5rem 1.5rem; text-align: center;
}
[b-foolpxtcm6] .rcpt-empty-icon {
    width: 56px; height: 56px; background: #f3f4f6; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    margin: 0 auto 1rem; font-size: 1.25rem; color: #9ca3af;
}
[b-foolpxtcm6] .rcpt-empty-title { font-size: 1rem; font-weight: 600; color: #374151; }
[b-foolpxtcm6] .rcpt-empty-sub   { font-size: 0.8125rem; color: #9ca3af; margin-top: 0.25rem; }
[b-foolpxtcm6] .rcpt-cta-btn {
    display: inline-flex; align-items: center; margin-top: 1.25rem;
    padding: 0.5rem 1.25rem; font-size: 0.875rem; font-weight: 600;
    color: #fff; background: var(--color-primary, #0e7490); border-radius: 0.5rem;
    text-decoration: none; transition: opacity 0.12s;
}
[b-foolpxtcm6] .rcpt-cta-btn:hover { opacity: 0.9; }

/* ─── Table ──────────────────────────────────────────────────── */
[b-foolpxtcm6] .rcpt-table-wrap {
    background: #fff; border: 1px solid #e5e7eb; border-radius: 0.875rem;
    box-shadow: 0 1px 4px rgba(0,0,0,0.04); overflow: hidden;
}
[b-foolpxtcm6] .rcpt-table-scroll { overflow-x: auto; }
[b-foolpxtcm6] .rcpt-table { width: 100%; font-size: 0.875rem; border-collapse: collapse; }
[b-foolpxtcm6] .rcpt-thead { background: #f8fafc; }
[b-foolpxtcm6] .rcpt-th {
    padding: 0.75rem 1rem; text-align: left;
    font-size: 0.6875rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.05em; color: #6b7280; border-bottom: 2px solid #e5e7eb;
    white-space: nowrap; position: sticky; top: 0; background: #f8fafc; z-index: 1;
}

/* ─── Date group header rows ────────────────────────────── */
[b-foolpxtcm6] .rcpt-group-header {
    background: #f9fafb;
    border-top: 2px solid #e5e7eb;
}
[b-foolpxtcm6] .rcpt-group-cell   { padding: 0.625rem 1rem; }
[b-foolpxtcm6] .rcpt-group-badge  { font-size: 0.6875rem; font-weight: 600; background: #e5e7eb; color: #374151; padding: 1px 6px; border-radius: 4px; }

/* Data rows */
[b-foolpxtcm6] .rcpt-row           { transition: background 0.1s; }
[b-foolpxtcm6] .rcpt-row:hover     { background: rgba(14,116,144,0.04) !important; }
[b-foolpxtcm6] .rcpt-row-alt       { background: rgba(249,250,251,0.7); }
[b-foolpxtcm6] .rcpt-row-cancelled { opacity: 0.55; }
[b-foolpxtcm6] .rcpt-row-selected  { background: rgba(14,116,144,0.07) !important; }

/* Cells */
[b-foolpxtcm6] .rcpt-td { padding: 0.875rem 1rem; border-bottom: 1px solid #f3f4f6; vertical-align: middle; }
[b-foolpxtcm6] .rcpt-checkbox { width: 15px; height: 15px; cursor: pointer; accent-color: var(--color-primary, #0e7490); }

[b-foolpxtcm6] .rcpt-receipt-num  { font-size: 0.875rem; font-weight: 700; color: var(--color-primary, #0e7490); font-family: monospace; }
[b-foolpxtcm6] .rcpt-receipt-date { font-size: 0.6875rem; color: #9ca3af; margin-top: 2px; }
[b-foolpxtcm6] .rcpt-student-name { font-size: 0.875rem; font-weight: 600; color: #111827; }
[b-foolpxtcm6] .rcpt-student-meta { font-size: 0.75rem; color: #6b7280; margin-top: 2px; display: flex; align-items: center; flex-wrap: wrap; }
[b-foolpxtcm6] .rcpt-txn-ref      { font-size: 0.6875rem; color: #9ca3af; margin-top: 3px; font-family: monospace; }

[b-foolpxtcm6] .rcpt-collected-by   { display: flex; align-items: center; gap: 0.5rem; }
[b-foolpxtcm6] .rcpt-avatar {
    width: 28px; height: 28px; border-radius: 50%;
    background: var(--color-primary, #0e7490); color: #fff;
    font-size: 0.6875rem; font-weight: 700;
    display: flex; align-items: center; justify-content: center; flex-shrink: 0; opacity: 0.8;
}
[b-foolpxtcm6] .rcpt-collected-name { font-size: 0.8125rem; color: #374151; font-weight: 500; }

[b-foolpxtcm6] .rcpt-amount           { font-size: 1rem; font-weight: 700; color: #16a34a; font-variant-numeric: tabular-nums; }
[b-foolpxtcm6] .rcpt-amount-cancelled { color: #9ca3af; text-decoration: line-through; font-variant-numeric: tabular-nums; }
[b-foolpxtcm6] .rcpt-amount-original  { font-size: 0.75rem; color: #9ca3af; text-decoration: line-through; font-variant-numeric: tabular-nums; }
[b-foolpxtcm6] .rcpt-badge-cancelled  { display: inline-flex; align-items: center; font-size: 0.625rem; font-weight: 700; color: #dc2626; background: #fef2f2; border: 1px solid #fecaca; padding: 1px 5px; border-radius: 4px; }
[b-foolpxtcm6] .rcpt-actions          { display: flex; align-items: center; justify-content: center; gap: 2px; }

/* ─── Payment mode badges ───────────────────────────────────── */
[b-foolpxtcm6] .rcpt-mode-badge {
    display: inline-flex; align-items: center;
    font-size: 0.6875rem; font-weight: 600;
    padding: 2px 7px; border-radius: 5px;
    border: 1px solid transparent;
    white-space: nowrap;
}
[b-foolpxtcm6] .rcpt-badge-cash    { background: #f0fdf4; color: #16a34a; border-color: #bbf7d0; }
[b-foolpxtcm6] .rcpt-badge-upi     { background: #eff6ff; color: #1d4ed8; border-color: #bfdbfe; }
[b-foolpxtcm6] .rcpt-badge-card    { background: #f0f9ff; color: #0369a1; border-color: #bae6fd; }
[b-foolpxtcm6] .rcpt-badge-cheque  { background: #fefce8; color: #b45309; border-color: #fde68a; }
[b-foolpxtcm6] .rcpt-badge-online  { background: #faf5ff; color: #7c3aed; border-color: #ddd6fe; }
[b-foolpxtcm6] .rcpt-badge-default { background: #f9fafb; color: #6b7280; border-color: #e5e7eb; }

/* ─── Action icon buttons ────────────────────────────────────── */
[b-foolpxtcm6] .rcpt-action-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 32px; height: 32px; border-radius: 7px;
    font-size: 0.8125rem; cursor: pointer;
    border: none; background: transparent; transition: background 0.1s;
}
[b-foolpxtcm6] .rcpt-action-btn:hover { background: rgba(0,0,0,0.06); }

/* ─── Pagination ─────────────────────────────────────────────── */
[b-foolpxtcm6] .rcpt-pagination {
    background: #f8fafc; padding: 0.75rem 1rem; border-top: 1px solid #e5e7eb;
    display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 0.75rem;
}
[b-foolpxtcm6] .rcpt-page-info { font-size: 0.75rem; color: #6b7280; }
[b-foolpxtcm6] .rcpt-page-btn {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 32px; height: 32px; padding: 0 6px;
    font-size: 0.8125rem; font-weight: 500; color: #374151; background: #fff;
    border: 1px solid #e5e7eb; border-radius: 0.5rem; cursor: pointer; transition: background 0.1s;
}
[b-foolpxtcm6] .rcpt-page-btn:hover:not(:disabled) { background: #f3f4f6; }
[b-foolpxtcm6] .rcpt-page-btn:disabled { opacity: 0.4; cursor: not-allowed; }
[b-foolpxtcm6] .rcpt-page-active {
    background: var(--color-primary, #0e7490) !important;
    color: #fff !important;
    border-color: var(--color-primary, #0e7490) !important;
    font-weight: 700;
}
[b-foolpxtcm6] .rcpt-per-page {
    border: 1px solid #d1d5db; border-radius: 0.375rem;
    padding: 2px 6px; font-size: 0.75rem; background: #fff; outline: none;
}
/* /Pages/Principal/FeeRefunds/Approvals.razor.rz.scp.css */
/* Principal/FeeRefunds/Approvals.razor.css */
/* /Pages/Principal/Fee/Concessions.razor.rz.scp.css */
.concessions-page[b-3y2oz1ml2l] {
    width: 100%;
    max-width: var(--grid-max-width);
    margin: var(--spacing-0) auto;
    padding: var(--spacing-5);
    color: var(--color-text-primary);
}

.page-header[b-3y2oz1ml2l],
.workspace-card[b-3y2oz1ml2l],
.discount-card[b-3y2oz1ml2l],
.account-summary[b-3y2oz1ml2l],
.apply-concession-section[b-3y2oz1ml2l],
.concessions-list-section[b-3y2oz1ml2l] {
    background: var(--color-bg-white);
    border: var(--border-sm) solid var(--color-border);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-sm);
}

.page-header[b-3y2oz1ml2l] {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: var(--spacing-4);
    padding: var(--spacing-5);
}

.header-icon[b-3y2oz1ml2l] {
    display: grid;
    place-items: center;
    width: var(--spacing-10);
    height: var(--spacing-10);
    border-radius: var(--radius-sm);
    background: var(--color-primary);
    color: var(--color-text-white);
    font-size: var(--font-size-xl);
}

.header-copy[b-3y2oz1ml2l],
.student-result-main[b-3y2oz1ml2l],
.concession-item > div[b-3y2oz1ml2l] {
    min-width: 0;
}

.header-copy h1[b-3y2oz1ml2l],
.page-section h2[b-3y2oz1ml2l],
.search-intro h3[b-3y2oz1ml2l],
.student-identity h3[b-3y2oz1ml2l],
.concessions-list-section h3[b-3y2oz1ml2l],
.discount-card h3[b-3y2oz1ml2l] {
    margin: var(--spacing-0);
    letter-spacing: var(--letter-spacing-normal);
}

.header-copy h1[b-3y2oz1ml2l] { font-size: var(--font-size-xl); }
.header-copy p[b-3y2oz1ml2l],
.search-intro p[b-3y2oz1ml2l] { margin: var(--spacing-2) var(--spacing-0) var(--spacing-0); color: var(--color-text-muted); font-size: var(--font-size-sm); }

.refresh-button[b-3y2oz1ml2l],
.search-button[b-3y2oz1ml2l],
.preview-button[b-3y2oz1ml2l],
.apply-button[b-3y2oz1ml2l],
.revoke-button[b-3y2oz1ml2l],
.cancel-button[b-3y2oz1ml2l],
.secondary-button[b-3y2oz1ml2l],
.danger-button[b-3y2oz1ml2l] {
    min-height: var(--button-height-lg);
    border: var(--border-sm) solid transparent;
    border-radius: var(--radius-sm);
    padding: var(--spacing-3) var(--spacing-5);
    font: inherit;
    font-weight: var(--font-weight-semibold);
    cursor: pointer;
}

.refresh-button[b-3y2oz1ml2l] {
    grid-column: 1 / -1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-3);
    background: var(--color-primary-50);
    color: var(--color-primary-700);
}

.search-button[b-3y2oz1ml2l],
.apply-button[b-3y2oz1ml2l] { background: var(--color-primary); color: var(--color-text-white); }
.preview-button[b-3y2oz1ml2l] { background: var(--color-primary-50); color: var(--color-primary-700); }
.revoke-button[b-3y2oz1ml2l] { background: var(--color-danger-700); color: var(--color-text-white); }
.danger-button[b-3y2oz1ml2l] { background: var(--color-danger-700); color: var(--color-text-white); }
.cancel-button[b-3y2oz1ml2l] { border-color: var(--color-border-dark); background: var(--color-bg-white); color: var(--color-text-secondary); }
.secondary-button[b-3y2oz1ml2l] { border-color: var(--color-border-dark); background: var(--color-bg-white); color: var(--color-text-secondary); }
.refresh-button:hover[b-3y2oz1ml2l] { background: var(--color-primary-100); }
.search-button:hover[b-3y2oz1ml2l],
.apply-button:hover[b-3y2oz1ml2l] { background: var(--color-primary-dark); }
.preview-button:hover[b-3y2oz1ml2l] { background: var(--color-primary-100); }
.revoke-button:hover[b-3y2oz1ml2l] { background: var(--color-danger-800); }
.danger-button:hover[b-3y2oz1ml2l] { background: var(--color-danger-800); }
.cancel-button:hover[b-3y2oz1ml2l] { background: var(--color-gray-100); }
.secondary-button:hover[b-3y2oz1ml2l] { background: var(--color-gray-100); }
.refresh-button:disabled[b-3y2oz1ml2l],
.search-button:disabled[b-3y2oz1ml2l],
.preview-button:disabled[b-3y2oz1ml2l],
.apply-button:disabled[b-3y2oz1ml2l],
.revoke-button:disabled[b-3y2oz1ml2l],
.cancel-button:disabled[b-3y2oz1ml2l],
.secondary-button:disabled[b-3y2oz1ml2l],
.danger-button:disabled[b-3y2oz1ml2l] { cursor: not-allowed; opacity: var(--opacity-60); }

.refresh-button:focus-visible[b-3y2oz1ml2l],
.search-button:focus-visible[b-3y2oz1ml2l],
.preview-button:focus-visible[b-3y2oz1ml2l],
.apply-button:focus-visible[b-3y2oz1ml2l],
.revoke-button:focus-visible[b-3y2oz1ml2l],
.cancel-button:focus-visible[b-3y2oz1ml2l],
.secondary-button:focus-visible[b-3y2oz1ml2l],
.danger-button:focus-visible[b-3y2oz1ml2l],
.history-details summary:focus-visible[b-3y2oz1ml2l],
.student-result:focus-visible[b-3y2oz1ml2l],
.field select:focus-visible[b-3y2oz1ml2l],
.field input:focus-visible[b-3y2oz1ml2l],
.field textarea:focus-visible[b-3y2oz1ml2l],
.search-control input:focus-visible[b-3y2oz1ml2l] {
    outline: none;
    box-shadow: var(--input-focus-ring);
}

.page-section[b-3y2oz1ml2l] { margin-top: var(--spacing-8); }
.page-section > h2[b-3y2oz1ml2l] { display: flex; align-items: center; gap: var(--spacing-3); margin-bottom: var(--spacing-5); font-size: var(--font-size-lg); }
.page-section > h2 i[b-3y2oz1ml2l] { color: var(--color-primary); }
.section-heading[b-3y2oz1ml2l] { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--spacing-3); margin-bottom: var(--spacing-5); }
.section-heading h2[b-3y2oz1ml2l] { display: flex; align-items: center; gap: var(--spacing-3); margin: var(--spacing-0); font-size: var(--font-size-lg); }
.section-heading h2 i[b-3y2oz1ml2l] { color: var(--color-primary); }
.section-heading .secondary-button[b-3y2oz1ml2l] { display: inline-flex; align-items: center; gap: var(--spacing-2); }

.audit-summary[b-3y2oz1ml2l] { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--spacing-3); margin-bottom: var(--spacing-4); }
.audit-summary > div[b-3y2oz1ml2l] { display: grid; gap: var(--spacing-2); padding: var(--spacing-4); border: var(--border-sm) solid var(--color-border); border-radius: var(--radius-sm); background: var(--color-bg-white); }
.audit-summary span[b-3y2oz1ml2l] { color: var(--color-text-muted); font-size: var(--font-size-xs); }
.audit-summary strong[b-3y2oz1ml2l] { overflow-wrap: anywhere; }
.audit-table-wrap[b-3y2oz1ml2l] { overflow-x: auto; border: var(--border-sm) solid var(--color-border); border-radius: var(--radius-sm); background: var(--color-bg-white); }
.audit-table[b-3y2oz1ml2l] { width: 100%; border-collapse: collapse; }
.audit-table th[b-3y2oz1ml2l],
.audit-table td[b-3y2oz1ml2l] { padding: var(--spacing-3); border-bottom: var(--border-sm) solid var(--color-border-light); text-align: left; font-size: var(--font-size-sm); }
.audit-table th[b-3y2oz1ml2l] { background: var(--color-surface-secondary); color: var(--color-text-secondary); font-size: var(--font-size-xs); }

.discount-grid[b-3y2oz1ml2l] { display: grid; gap: var(--spacing-4); }
.discount-card[b-3y2oz1ml2l] { padding: var(--spacing-5); }
.discount-heading[b-3y2oz1ml2l],
.student-identity[b-3y2oz1ml2l],
.concession-item[b-3y2oz1ml2l],
.concession-meta[b-3y2oz1ml2l] { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--spacing-3); }
.discount-card h3[b-3y2oz1ml2l] { font-size: var(--font-size-md); }
.discount-value[b-3y2oz1ml2l] { margin: var(--spacing-5) var(--spacing-0); color: var(--color-primary-700); font-size: var(--font-size-2xl); font-weight: var(--font-weight-bold); }
.discount-value span[b-3y2oz1ml2l] { color: var(--color-text-muted); font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); }

.badge[b-3y2oz1ml2l],
.active-indicator[b-3y2oz1ml2l] {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-2);
    width: fit-content;
    padding: var(--spacing-2) var(--spacing-3);
    border-radius: var(--radius-full);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
}

.badge-primary[b-3y2oz1ml2l] { background: var(--color-primary-100); color: var(--color-primary-800); }
.badge-info[b-3y2oz1ml2l] { background: var(--color-accentB-100); color: var(--color-gray-800); }
.badge-success[b-3y2oz1ml2l] { background: var(--color-success-100); color: var(--color-success-800); }
.badge-warning[b-3y2oz1ml2l] { background: var(--color-warning-100); color: var(--color-warning-800); }
.badge-danger[b-3y2oz1ml2l] { background: var(--color-danger-100); color: var(--color-danger-800); }
.badge-neutral[b-3y2oz1ml2l] { background: var(--color-gray-100); color: var(--color-gray-700); }

.compact-details[b-3y2oz1ml2l],
.identity-details[b-3y2oz1ml2l],
.amount-grid[b-3y2oz1ml2l] { margin: var(--spacing-0); }
.compact-details > div[b-3y2oz1ml2l],
.identity-details > div[b-3y2oz1ml2l] { display: flex; justify-content: space-between; gap: var(--spacing-4); padding: var(--spacing-3) var(--spacing-0); border-top: var(--border-sm) solid var(--color-border-light); }
dt[b-3y2oz1ml2l] { color: var(--color-text-muted); font-size: var(--font-size-xs); }
dd[b-3y2oz1ml2l] { margin: var(--spacing-0); font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); }
.active-status[b-3y2oz1ml2l] { color: var(--color-success-700); }

.workspace-card[b-3y2oz1ml2l] { overflow: hidden; }
.search-panel[b-3y2oz1ml2l],
.student-panel[b-3y2oz1ml2l] { padding: var(--spacing-5); }
.student-panel[b-3y2oz1ml2l] { border-top: var(--border-sm) solid var(--color-border); background: var(--color-surface-secondary); }
.search-intro[b-3y2oz1ml2l] { margin-bottom: var(--spacing-5); }
.search-intro h3[b-3y2oz1ml2l],
.student-identity h3[b-3y2oz1ml2l],
.concessions-list-section h3[b-3y2oz1ml2l],
.discount-card h3[b-3y2oz1ml2l] { font-size: var(--font-size-md); }
.filter-grid[b-3y2oz1ml2l] { display: grid; gap: var(--spacing-4); }
.field[b-3y2oz1ml2l] { display: grid; gap: var(--spacing-2); color: var(--color-text-secondary); font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); }
.field select[b-3y2oz1ml2l],
.field input[b-3y2oz1ml2l],
.field textarea[b-3y2oz1ml2l],
.search-control input[b-3y2oz1ml2l] {
    width: 100%;
    min-height: var(--button-height-lg);
    border: var(--border-sm) solid var(--color-border-dark);
    border-radius: var(--radius-sm);
    background: var(--color-bg-white);
    color: var(--color-text-primary);
    font: inherit;
}
.field select[b-3y2oz1ml2l] { padding: var(--spacing-3); }
.field input[b-3y2oz1ml2l],
.field textarea[b-3y2oz1ml2l] { padding: var(--spacing-3); }
.field textarea[b-3y2oz1ml2l] { min-height: var(--spacing-20); resize: vertical; }
.field small[b-3y2oz1ml2l] { color: var(--color-text-muted); font-weight: var(--font-weight-normal); }
.field strong[b-3y2oz1ml2l] { color: var(--color-danger-700); }
.search-control[b-3y2oz1ml2l] { position: relative; }
.search-control i[b-3y2oz1ml2l] { position: absolute; left: var(--spacing-4); top: 50%; translate: 0 -50%; color: var(--color-text-muted); }
.search-control input[b-3y2oz1ml2l] { padding: var(--spacing-3) var(--spacing-4) var(--spacing-3) var(--spacing-9); }

.inline-error[b-3y2oz1ml2l] { margin-top: var(--spacing-4); color: var(--color-danger-700); font-size: var(--font-size-sm); }
.results-region[b-3y2oz1ml2l] { margin-top: var(--spacing-5); }
.results-heading[b-3y2oz1ml2l] { margin-bottom: var(--spacing-3); color: var(--color-text-muted); font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold); }
.results-list[b-3y2oz1ml2l],
.concessions-list[b-3y2oz1ml2l] { display: grid; gap: var(--spacing-3); }
.student-result[b-3y2oz1ml2l] {
    display: grid;
    min-height: var(--button-height-lg);
    width: 100%;
    align-items: start;
    gap: var(--spacing-4);
    border: var(--border-sm) solid var(--color-border);
    border-radius: var(--radius-sm);
    padding: var(--spacing-4);
    background: var(--color-bg-white);
    color: var(--color-text-primary);
    text-align: left;
    cursor: pointer;
}
.student-result:hover[b-3y2oz1ml2l],
.student-result.selected[b-3y2oz1ml2l] { border-color: var(--color-primary); background: var(--color-primary-50); }
.student-result-main[b-3y2oz1ml2l] { display: grid; gap: var(--spacing-2); }
.student-result-main > span[b-3y2oz1ml2l] { color: var(--color-text-muted); font-size: var(--font-size-xs); }
.result-balance[b-3y2oz1ml2l] { display: grid; gap: var(--spacing-2); text-align: left; }
.result-balance small[b-3y2oz1ml2l] { color: var(--color-text-muted); font-size: var(--font-size-xs); }

.state-panel[b-3y2oz1ml2l] {
    display: flex;
    min-height: var(--spacing-12);
    align-items: center;
    justify-content: center;
    gap: var(--spacing-3);
    padding: var(--spacing-5);
    border: var(--border-sm) dashed var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-surface-secondary);
    color: var(--color-text-muted);
    text-align: center;
}
.state-error[b-3y2oz1ml2l] { border-color: var(--color-danger-200); background: var(--color-danger-50); color: var(--color-danger-700); }
.student-placeholder[b-3y2oz1ml2l] { min-height: var(--spacing-32); }

.account-summary[b-3y2oz1ml2l],
.apply-concession-section[b-3y2oz1ml2l],
.concessions-list-section[b-3y2oz1ml2l] { padding: var(--spacing-5); }
.student-identity[b-3y2oz1ml2l] { align-items: center; }
.eyebrow[b-3y2oz1ml2l] { color: var(--color-text-muted); font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold); }
.identity-details[b-3y2oz1ml2l] { margin-top: var(--spacing-4); }
.amount-grid[b-3y2oz1ml2l] { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--spacing-3); margin-top: var(--spacing-4); }
.amount-grid > div[b-3y2oz1ml2l] { padding: var(--spacing-3); border-radius: var(--radius-sm); background: var(--color-gray-50); }
.amount-grid dd[b-3y2oz1ml2l] { margin-top: var(--spacing-2); overflow-wrap: anywhere; }
.amount-grid .outstanding[b-3y2oz1ml2l] { background: var(--color-warning-50); }
.amount-grid .outstanding dd[b-3y2oz1ml2l] { color: var(--color-warning-800); }
.concessions-list-section[b-3y2oz1ml2l] { margin-top: var(--spacing-4); }
.apply-concession-section[b-3y2oz1ml2l] { margin-top: var(--spacing-4); }
.apply-concession-section > h3[b-3y2oz1ml2l] { margin: var(--spacing-0) var(--spacing-0) var(--spacing-4); font-size: var(--font-size-md); }
.concession-form-grid[b-3y2oz1ml2l] { display: grid; gap: var(--spacing-4); }
.reason-field[b-3y2oz1ml2l],
.documents-field[b-3y2oz1ml2l] { grid-column: 1 / -1; }
.documents-field input[b-3y2oz1ml2l] { min-height: var(--button-height-lg); padding: var(--spacing-2); }
.selected-files[b-3y2oz1ml2l] { display: grid; gap: var(--spacing-2); margin: var(--spacing-4) var(--spacing-0); padding: var(--spacing-0); list-style: none; }
.selected-files li[b-3y2oz1ml2l] { display: grid; gap: var(--spacing-2); overflow-wrap: anywhere; color: var(--color-text-secondary); font-size: var(--font-size-sm); }
.selected-files li span[b-3y2oz1ml2l] { color: var(--color-text-muted); }
.preview-button[b-3y2oz1ml2l],
.apply-button[b-3y2oz1ml2l] { display: inline-flex; align-items: center; justify-content: center; gap: var(--spacing-2); width: 100%; margin-top: var(--spacing-4); }
.application-message[b-3y2oz1ml2l] { margin-top: var(--spacing-4); }
.preview-panel[b-3y2oz1ml2l] { display: grid; gap: var(--spacing-3); margin-top: var(--spacing-5); padding: var(--spacing-4); border: var(--border-sm) solid var(--color-primary-200); border-radius: var(--radius-sm); background: var(--color-primary-50); }
.preview-panel > div[b-3y2oz1ml2l] { display: flex; justify-content: space-between; gap: var(--spacing-4); color: var(--color-text-secondary); font-size: var(--font-size-sm); }
.preview-panel strong[b-3y2oz1ml2l] { color: var(--color-text-primary); text-align: right; overflow-wrap: anywhere; }
.preview-panel .preview-after strong[b-3y2oz1ml2l] { color: var(--color-success-700); }
.concessions-list-section > h3[b-3y2oz1ml2l] { margin-bottom: var(--spacing-4); }
.history-card[b-3y2oz1ml2l] { display: grid; gap: var(--spacing-4); padding: var(--spacing-5) var(--spacing-0); border-top: var(--border-sm) solid var(--color-border-light); }
.history-heading[b-3y2oz1ml2l] { display: grid; gap: var(--spacing-3); }
.history-heading > div[b-3y2oz1ml2l] { display: grid; min-width: 0; gap: var(--spacing-2); }
.history-heading > div:last-child[b-3y2oz1ml2l] { justify-items: start; }
.history-heading span:not(.badge)[b-3y2oz1ml2l] { color: var(--color-text-muted); font-size: var(--font-size-xs); overflow-wrap: anywhere; }
.history-summary[b-3y2oz1ml2l] { display: grid; gap: var(--spacing-3); margin: var(--spacing-0); }
.history-summary > div[b-3y2oz1ml2l] { display: grid; gap: var(--spacing-2); }
.history-summary dd[b-3y2oz1ml2l] { overflow-wrap: anywhere; }
.history-details[b-3y2oz1ml2l] { border: var(--border-sm) solid var(--color-border-light); border-radius: var(--radius-sm); background: var(--color-surface-secondary); }
.history-details summary[b-3y2oz1ml2l] { display: flex; min-height: var(--button-height-lg); align-items: center; padding: var(--spacing-3) var(--spacing-4); color: var(--color-primary-700); font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); cursor: pointer; }
.detail-group[b-3y2oz1ml2l] { padding: var(--spacing-4); border-top: var(--border-sm) solid var(--color-border-light); }
.detail-group h4[b-3y2oz1ml2l],
.detail-group p[b-3y2oz1ml2l] { margin: var(--spacing-0); font-size: var(--font-size-sm); }
.detail-group p[b-3y2oz1ml2l] { color: var(--color-text-muted); }
.detail-group ul[b-3y2oz1ml2l] { display: grid; gap: var(--spacing-3); margin: var(--spacing-3) var(--spacing-0) var(--spacing-0); padding: var(--spacing-0); list-style: none; }
.detail-group li[b-3y2oz1ml2l] { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--spacing-2); font-size: var(--font-size-sm); }
.detail-group li .badge[b-3y2oz1ml2l] { grid-column: 1 / -1; }
.detail-group a[b-3y2oz1ml2l] { color: var(--color-primary-700); overflow-wrap: anywhere; }
.revocation-note[b-3y2oz1ml2l] { display: grid; gap: var(--spacing-2); padding: var(--spacing-3); border-radius: var(--radius-sm); background: var(--color-gray-100); color: var(--color-text-secondary); font-size: var(--font-size-sm); }
.revocation-note.blocked[b-3y2oz1ml2l] { background: var(--color-warning-50); color: var(--color-warning-800); }
.revoke-button[b-3y2oz1ml2l],
.cancel-button[b-3y2oz1ml2l] { display: inline-flex; align-items: center; justify-content: center; gap: var(--spacing-2); width: 100%; }
.revoke-form[b-3y2oz1ml2l] { display: grid; gap: var(--spacing-4); padding: var(--spacing-4); border: var(--border-sm) solid var(--color-danger-200); border-radius: var(--radius-sm); background: var(--color-danger-50); }
.revoke-actions[b-3y2oz1ml2l] { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--spacing-3); }

@media (min-width: 768px) {
    .concessions-page[b-3y2oz1ml2l] { padding: var(--spacing-7); }
    .page-header[b-3y2oz1ml2l] { grid-template-columns: auto minmax(0, 1fr) auto; padding: var(--spacing-6); }
    .refresh-button[b-3y2oz1ml2l] { grid-column: auto; }
    .discount-grid[b-3y2oz1ml2l] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .filter-grid[b-3y2oz1ml2l] { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: end; }
    .concession-form-grid[b-3y2oz1ml2l] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .search-field[b-3y2oz1ml2l] { grid-column: 1 / 2; }
    .search-button[b-3y2oz1ml2l] { width: fit-content; min-width: var(--spacing-32); }
    .student-result[b-3y2oz1ml2l] { display: flex; align-items: center; justify-content: space-between; }
    .result-balance[b-3y2oz1ml2l] { flex: 0 0 auto; text-align: right; }
    .selected-files li[b-3y2oz1ml2l] { display: flex; align-items: center; }
    .selected-files li span[b-3y2oz1ml2l] { margin-left: auto; white-space: nowrap; }
    .preview-button[b-3y2oz1ml2l],
    .apply-button[b-3y2oz1ml2l] { width: fit-content; }
    .history-summary[b-3y2oz1ml2l] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .history-heading[b-3y2oz1ml2l] { display: flex; align-items: flex-start; justify-content: space-between; }
    .history-heading > div:last-child[b-3y2oz1ml2l] { justify-items: end; flex: 0 0 auto; }
    .detail-group li[b-3y2oz1ml2l] { grid-template-columns: minmax(0, 1fr) auto auto; }
    .detail-group li .badge[b-3y2oz1ml2l] { grid-column: auto; }
    .revoke-button[b-3y2oz1ml2l],
    .cancel-button[b-3y2oz1ml2l],
    .secondary-button[b-3y2oz1ml2l],
    .danger-button[b-3y2oz1ml2l] { width: fit-content; }
    .revoke-actions[b-3y2oz1ml2l] { display: flex; justify-content: flex-end; }
    .identity-details[b-3y2oz1ml2l] { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--spacing-5); }
    .identity-details > div[b-3y2oz1ml2l] { display: grid; gap: var(--spacing-2); }
    .amount-grid[b-3y2oz1ml2l] { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .audit-summary[b-3y2oz1ml2l] { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (max-width: 767px) {
    .audit-table-wrap[b-3y2oz1ml2l] { overflow: visible; border: 0; background: transparent; }
    .audit-table[b-3y2oz1ml2l],
    .audit-table tbody[b-3y2oz1ml2l],
    .audit-table tr[b-3y2oz1ml2l],
    .audit-table td[b-3y2oz1ml2l] { display: block; width: 100%; }
    .audit-table thead[b-3y2oz1ml2l] { display: none; }
    .audit-table tr[b-3y2oz1ml2l] { margin-bottom: var(--spacing-3); padding: var(--spacing-3); border: var(--border-sm) solid var(--color-border); border-radius: var(--radius-sm); background: var(--color-bg-white); }
    .audit-table td[b-3y2oz1ml2l] { display: flex; justify-content: space-between; gap: var(--spacing-3); padding: var(--spacing-2); border: 0; text-align: right; }
    .audit-table td[b-3y2oz1ml2l]::before { content: attr(data-label); color: var(--color-text-muted); font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold); text-align: left; }
}

@media (min-width: 1280px) {
    .discount-grid[b-3y2oz1ml2l] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .workspace-card[b-3y2oz1ml2l] { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
    .student-panel[b-3y2oz1ml2l] { border-top: 0; border-left: var(--border-sm) solid var(--color-border); }
}
/* /Pages/Principal/Hostel/Approvals.razor.rz.scp.css */
.approvals-page[b-i6rz9qotd7] {
    padding: var(--spacing-6, 1.5rem);
    max-width: 1200px;
    margin: 0 auto;
}

/* Header */
.page-header[b-i6rz9qotd7] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--spacing-4, 1rem);
    margin-bottom: var(--spacing-6, 1.5rem);
    flex-wrap: wrap;
}
.page-title[b-i6rz9qotd7] {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--color-text-primary, #111827);
    margin: 0;
}
.page-subtitle[b-i6rz9qotd7] {
    font-size: 0.875rem;
    color: var(--color-text-secondary, #6b7280);
    margin: 0.25rem 0 0;
}
.btn-refresh[b-i6rz9qotd7] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.45rem 1rem;
    border: 1px solid var(--color-border, #d1d5db);
    border-radius: var(--radius-md, 6px);
    background: #fff;
    font-size: 0.875rem;
    cursor: pointer;
    color: var(--color-text-primary, #111827);
}
.btn-refresh:hover[b-i6rz9qotd7] { background: var(--color-bg-hover, #f3f4f6); }
.icon-refresh[b-i6rz9qotd7] { font-style: normal; display: inline-block; }
.icon-refresh.spinning[b-i6rz9qotd7] { animation: spin-b-i6rz9qotd7 1s linear infinite; }
@keyframes spin-b-i6rz9qotd7 { to { transform: rotate(360deg); } }

/* Summary cards */
.summary-row[b-i6rz9qotd7] {
    display: flex;
    gap: var(--spacing-4, 1rem);
    margin-bottom: var(--spacing-6, 1.5rem);
    flex-wrap: wrap;
}
.summary-card[b-i6rz9qotd7] {
    flex: 1;
    min-width: 160px;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 1.25rem;
    border-radius: var(--radius-lg, 8px);
    border: 2px solid var(--color-border, #d1d5db);
    background: #fff;
    cursor: pointer;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.summary-card:hover[b-i6rz9qotd7], .summary-card.active[b-i6rz9qotd7] {
    border-color: var(--color-primary, #4f46e5);
    box-shadow: 0 0 0 3px rgba(79,70,229,0.1);
}
.summary-icon[b-i6rz9qotd7] { font-size: 1.75rem; }
.summary-count[b-i6rz9qotd7] { font-size: 1.5rem; font-weight: 700; color: var(--color-primary, #4f46e5); }
.summary-label[b-i6rz9qotd7] { font-size: 0.75rem; color: var(--color-text-secondary, #6b7280); }

/* Tab panel */
.tab-panel[b-i6rz9qotd7] { margin-top: var(--spacing-2, 0.5rem); }
.tab-title[b-i6rz9qotd7] {
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: var(--spacing-4, 1rem);
    color: var(--color-text-primary, #111827);
}
.empty-state[b-i6rz9qotd7] {
    padding: 2rem;
    text-align: center;
    background: var(--color-bg-surface, #f9fafb);
    border-radius: var(--radius-md, 6px);
    color: var(--color-text-secondary, #6b7280);
    font-size: 0.95rem;
}

/* Table */
.table-wrap[b-i6rz9qotd7] { overflow-x: auto; }
.approval-table[b-i6rz9qotd7] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
}
.approval-table th[b-i6rz9qotd7] {
    background: var(--color-bg-surface, #f9fafb);
    padding: 0.65rem 1rem;
    text-align: left;
    font-weight: 600;
    font-size: 0.8rem;
    color: var(--color-text-secondary, #6b7280);
    border-bottom: 1px solid var(--color-border, #d1d5db);
    white-space: nowrap;
}
.approval-table td[b-i6rz9qotd7] {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--color-border, #d1d5db);
    color: var(--color-text-primary, #111827);
}
.approval-table tr:last-child td[b-i6rz9qotd7] { border-bottom: none; }
.approval-table tr:hover td[b-i6rz9qotd7] { background: var(--color-bg-hover, #f3f4f6); }

/* Inline action buttons */
.btn-approve[b-i6rz9qotd7], .btn-reject[b-i6rz9qotd7] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.3rem 0.75rem;
    border-radius: var(--radius-sm, 4px);
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    border: none;
    margin-right: 0.4rem;
}
.btn-approve[b-i6rz9qotd7] { background: #d1fae5; color: #065f46; }
.btn-approve:hover:not(:disabled)[b-i6rz9qotd7] { background: #a7f3d0; }
.btn-approve:disabled[b-i6rz9qotd7] { opacity: 0.45; cursor: not-allowed; }
.btn-reject[b-i6rz9qotd7] { background: #fee2e2; color: #991b1b; }
.btn-reject:hover[b-i6rz9qotd7] { background: #fecaca; }

/* Due / clear badges */
.badge-dues[b-i6rz9qotd7] {
    background: #fee2e2;
    color: #b91c1c;
    padding: 0.2rem 0.6rem;
    border-radius: 9999px;
    font-size: 0.78rem;
    font-weight: 600;
}
.badge-clear[b-i6rz9qotd7] {
    background: #d1fae5;
    color: #065f46;
    padding: 0.2rem 0.6rem;
    border-radius: 9999px;
    font-size: 0.78rem;
    font-weight: 600;
}

/* Error alert */
.alert-error[b-i6rz9qotd7] {
    background: #fee2e2;
    color: #991b1b;
    padding: 0.75rem 1rem;
    border-radius: var(--radius-md, 6px);
    font-size: 0.875rem;
    margin-bottom: var(--spacing-4, 1rem);
}

/* Loading */
.loading-state[b-i6rz9qotd7] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-4, 1rem);
    padding: 3rem;
    color: var(--color-text-secondary, #6b7280);
}
.spinner[b-i6rz9qotd7] {
    width: 36px;
    height: 36px;
    border: 3px solid var(--color-border, #d1d5db);
    border-top-color: var(--color-primary, #4f46e5);
    border-radius: 50%;
    animation: spin-b-i6rz9qotd7 0.8s linear infinite;
}

/* Modal */
.modal-overlay[b-i6rz9qotd7] {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.45);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}
.modal-card[b-i6rz9qotd7] {
    background: #fff;
    border-radius: var(--radius-lg, 8px);
    width: 100%;
    max-width: 460px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.2);
}
.modal-header[b-i6rz9qotd7] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--color-border, #d1d5db);
}
.modal-header h3[b-i6rz9qotd7] { margin: 0; font-size: 1rem; font-weight: 600; }
.btn-close[b-i6rz9qotd7] {
    background: none;
    border: none;
    font-size: 1.4rem;
    cursor: pointer;
    color: var(--color-text-secondary, #6b7280);
    line-height: 1;
}
.modal-body[b-i6rz9qotd7] {
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}
.modal-body p[b-i6rz9qotd7] { margin: 0; font-size: 0.9rem; }
.form-label[b-i6rz9qotd7] { font-size: 0.85rem; font-weight: 600; color: var(--color-text-primary, #111827); }
.form-textarea[b-i6rz9qotd7] {
    width: 100%;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--color-border, #d1d5db);
    border-radius: var(--radius-md, 6px);
    font-size: 0.875rem;
    resize: vertical;
    font-family: inherit;
}
.modal-footer[b-i6rz9qotd7] {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    padding: 1rem 1.25rem;
    border-top: 1px solid var(--color-border, #d1d5db);
}

.btn-approve-solid[b-i6rz9qotd7] {
    padding: 0.45rem 1.1rem;
    border: none;
    border-radius: var(--radius-md, 6px);
    background: var(--color-success, #10b981);
    color: #fff;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
}
.btn-approve-solid:disabled[b-i6rz9qotd7] { opacity: 0.5; cursor: not-allowed; }
.btn-reject-solid[b-i6rz9qotd7] {
    padding: 0.45rem 1.1rem;
    border: none;
    border-radius: var(--radius-md, 6px);
    background: var(--color-danger, #ef4444);
    color: #fff;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
}
.btn-reject-solid:disabled[b-i6rz9qotd7] { opacity: 0.5; cursor: not-allowed; }

/* Summary total sub-label */
.summary-total[b-i6rz9qotd7] {
    font-size: 0.72rem;
    color: var(--color-text-secondary, #6b7280);
    margin-top: 0.1rem;
}

/* History card accent */
.summary-card--history[b-i6rz9qotd7] {
    border-left: 3px solid var(--color-text-secondary, #9ca3af);
}

/* Status badges in history table */
.badge-status[b-i6rz9qotd7] {
    display: inline-block;
    padding: 0.2rem 0.65rem;
    border-radius: 9999px;
    font-size: 0.78rem;
    font-weight: 600;
}
.badge-approved[b-i6rz9qotd7] {
    background: #d1fae5;
    color: #065f46;
}
.badge-rejected[b-i6rz9qotd7] {
    background: #fee2e2;
    color: #b91c1c;
}
.text-muted[b-i6rz9qotd7] {
    color: var(--color-text-secondary, #9ca3af);
}

/* Mobile */
@media (max-width: 640px) {
    .approvals-page[b-i6rz9qotd7] { padding: var(--spacing-4, 1rem); }
    .summary-row[b-i6rz9qotd7] { gap: 0.5rem; }
    .summary-card[b-i6rz9qotd7] { padding: 0.75rem; min-width: 120px; }
    .approval-table th[b-i6rz9qotd7], .approval-table td[b-i6rz9qotd7] { padding: 0.55rem 0.6rem; }
}
/* /Pages/Principal/Hostel/FeeStructure.razor.rz.scp.css */
.fee-structure-page[b-jo1adcxaa7] { padding: var(--space-6); }

/* ── Page Header ──────────────────────────────────────────── */
.page-header[b-jo1adcxaa7] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-4);
    margin-bottom: var(--space-6);
    flex-wrap: wrap;
}
.page-title[b-jo1adcxaa7] { font-size: 1.5rem; font-weight: 700; color: var(--color-text-primary); margin: 0; }
.page-subtitle[b-jo1adcxaa7] { font-size: 0.875rem; color: var(--color-text-secondary); margin: var(--space-1) 0 0; }

/* ── Filter Bar ───────────────────────────────────────────── */
.filter-bar[b-jo1adcxaa7] { display: flex; gap: var(--space-3); margin-bottom: var(--space-4); flex-wrap: wrap; }
.filter-bar .form-control[b-jo1adcxaa7] { max-width: 220px; }

/* ── Table ────────────────────────────────────────────────── */
.table-container[b-jo1adcxaa7] {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    overflow-x: auto;
}

.data-table[b-jo1adcxaa7] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
}

.data-table thead tr[b-jo1adcxaa7] {
    background: var(--color-surface-secondary, #f8fafc);
    border-bottom: 2px solid var(--color-border);
}

.data-table th[b-jo1adcxaa7] {
    padding: var(--space-3) var(--space-4);
    text-align: left;
    font-weight: 600;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-text-secondary);
    white-space: nowrap;
}

.data-table td[b-jo1adcxaa7] {
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--color-border);
    color: var(--color-text-primary);
    vertical-align: middle;
}

.data-table tbody tr:last-child td[b-jo1adcxaa7] { border-bottom: none; }

.data-table tbody tr:hover[b-jo1adcxaa7] { background: var(--color-surface-hover, #f8fafc); }

/* ── Badges ───────────────────────────────────────────────── */
.badge[b-jo1adcxaa7] { display: inline-flex; align-items: center; padding: 2px 10px; border-radius: 9999px; font-size: 0.75rem; font-weight: 600; white-space: nowrap; }
.badge-blue[b-jo1adcxaa7] { background: #dbeafe; color: #1d4ed8; }
.badge-teal[b-jo1adcxaa7] { background: var(--color-teal-100); color: var(--color-teal-700); }

/* ── Buttons ──────────────────────────────────────────────── */

.btn-icon[b-jo1adcxaa7] { background: none; border: none; padding: var(--space-1); cursor: pointer; color: var(--color-text-secondary); border-radius: var(--radius-sm); }
.btn-icon:hover[b-jo1adcxaa7] { background: var(--color-surface-secondary, #f1f5f9); color: var(--color-text-primary); }

.btn-icon-danger[b-jo1adcxaa7] { background: none; border: none; padding: var(--space-1) var(--space-2); cursor: pointer; color: var(--color-error, #dc2626); border-radius: var(--radius-sm); font-size: 0.875rem; transition: background 0.15s; }
.btn-icon-danger:hover[b-jo1adcxaa7] { background: #fee2e2; }

/* ── Modal ────────────────────────────────────────────────── */
.modal-overlay[b-jo1adcxaa7] {
    position: fixed; inset: 0; background: rgba(0,0,0,0.45);
    display: flex; align-items: center; justify-content: center;
    z-index: 1000; padding: var(--space-4);
}
.modal-card[b-jo1adcxaa7] {
    background: var(--color-surface); border-radius: var(--radius-xl);
    box-shadow: 0 20px 60px rgba(0,0,0,0.25);
    width: 100%; max-width: 720px; max-height: 90vh; overflow-y: auto;
    display: flex; flex-direction: column; flex-shrink: 0;
}
.modal-header[b-jo1adcxaa7] {
    display: flex; align-items: center; justify-content: space-between;
    padding: var(--space-4) var(--space-6);
    border-bottom: 1px solid var(--color-border);
}
.modal-header h3[b-jo1adcxaa7] { margin: 0; font-size: 1.125rem; font-weight: 700; color: var(--color-text-primary); }
.modal-body[b-jo1adcxaa7] { padding: var(--space-5) var(--space-6); display: flex; flex-direction: column; gap: var(--space-4); align-items: stretch; }
.modal-footer[b-jo1adcxaa7] {
    display: flex; justify-content: flex-end; gap: var(--space-3);
    padding: var(--space-4) var(--space-6);
    border-top: 1px solid var(--color-border);
}

/* ── Form ─────────────────────────────────────────────────── */
.form-row[b-jo1adcxaa7] { display: flex; gap: var(--space-3); flex-wrap: wrap; width: 100%; }
.form-row .form-group[b-jo1adcxaa7] { flex: 1 1 180px; min-width: 0; }
.form-group[b-jo1adcxaa7] { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; width: 100%; flex-shrink: 0; }
.form-group label[b-jo1adcxaa7] { font-size: 0.8125rem; font-weight: 600; color: var(--color-text-secondary); }
.form-control[b-jo1adcxaa7] {
    padding: var(--space-2) var(--space-3); border: 1px solid var(--color-border);
    border-radius: var(--radius-md); font-size: 0.875rem; color: var(--color-text-primary);
    background: var(--color-surface); width: 100%; min-width: 0; max-width: 100%; box-sizing: border-box; display: block;
}
select.form-control[b-jo1adcxaa7] { appearance: auto; }
.form-control:focus[b-jo1adcxaa7] { outline: none; border-color: var(--color-primary-400, #a78bfa); box-shadow: 0 0 0 3px rgba(124,58,237,0.12); }

.checkbox-row[b-jo1adcxaa7] { display: flex; gap: var(--space-5); flex-wrap: wrap; padding: var(--space-1) 0; }
.checkbox-label[b-jo1adcxaa7] { display: inline-flex; align-items: center; gap: var(--space-2); cursor: pointer; font-size: 0.875rem; color: var(--color-text-primary); }

/* ── Misc ─────────────────────────────────────────────────── */
.empty-row[b-jo1adcxaa7] { text-align: center; color: var(--color-text-secondary); padding: var(--space-8) var(--space-6) !important; font-size: 0.9375rem; }
.loading-center[b-jo1adcxaa7] { display: flex; flex-direction: column; align-items: center; gap: var(--space-3); padding: var(--space-10); color: var(--color-text-secondary); }
.alert[b-jo1adcxaa7] { padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); font-size: 0.875rem; margin-bottom: var(--space-4); }
.alert-danger[b-jo1adcxaa7] { background: #fee2e2; color: #991b1b; border: 1px solid #fca5a5; }
.spinner[b-jo1adcxaa7] { width: 32px; height: 32px; border: 3px solid var(--color-border); border-top-color: var(--color-primary-600, #7c3aed); border-radius: 50%; animation: spin-b-jo1adcxaa7 0.7s linear infinite; }
@keyframes spin-b-jo1adcxaa7 { to { transform: rotate(360deg); } }

/* ── Responsive ───────────────────────────────────────────── */
@media (max-width: 768px) {
    .fee-structure-page[b-jo1adcxaa7] { padding: var(--space-4); }
    .page-header[b-jo1adcxaa7] { flex-direction: column; }
    .filter-bar .form-control[b-jo1adcxaa7] { max-width: 100%; }
    .form-row[b-jo1adcxaa7] { flex-direction: column; }
    .form-row .form-group[b-jo1adcxaa7] { flex: 1 1 100%; }
    .data-table th[b-jo1adcxaa7], .data-table td[b-jo1adcxaa7] { padding: var(--space-2) var(--space-3); font-size: 0.8125rem; }
    .modal-card[b-jo1adcxaa7] { max-width: 100%; }
    .modal-header[b-jo1adcxaa7], .modal-body[b-jo1adcxaa7], .modal-footer[b-jo1adcxaa7] { padding-left: var(--space-4); padding-right: var(--space-4); }
}
/* /Pages/Principal/Hostel/Index.razor.rz.scp.css */
.hostel-page[b-ch7xcnkgpe] {
    min-height: 100vh;
    background: var(--color-neutral-50);
    padding: var(--space-6);
}

.page-header[b-ch7xcnkgpe] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: var(--space-6);
    flex-wrap: wrap;
    gap: var(--space-4);
}

.page-title[b-ch7xcnkgpe] {
    font-size: var(--text-3xl);
    font-weight: 700;
    color: var(--color-neutral-900);
}

.page-subtitle[b-ch7xcnkgpe] {
    color: var(--color-neutral-600);
    margin-top: var(--space-1);
}

.header-actions[b-ch7xcnkgpe] {
    display: flex;
    gap: var(--space-3);
    flex-wrap: wrap;
}

.loading-center[b-ch7xcnkgpe] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 16rem;
    gap: var(--space-4);
}

.spinner[b-ch7xcnkgpe] {
    width: 3rem;
    height: 3rem;
    border: 4px solid var(--color-neutral-200);
    border-top-color: var(--color-primary-600);
    border-radius: 50%;
    animation: spin-b-ch7xcnkgpe 0.8s linear infinite;
}

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

.alert-error[b-ch7xcnkgpe] {
    background: var(--color-danger-50);
    border: 1px solid var(--color-danger-200);
    border-radius: var(--radius-lg);
    padding: var(--space-4);
    color: var(--color-danger-800);
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.kpi-grid[b-ch7xcnkgpe] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--space-4);
    margin-bottom: var(--space-6);
}

.kpi-card[b-ch7xcnkgpe] {
    background: white;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    padding: var(--space-5);
    border-left: 4px solid transparent;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.kpi-blue[b-ch7xcnkgpe]  { border-color: var(--color-primary-600); }
.kpi-green[b-ch7xcnkgpe] { border-color: var(--color-success-600); }
.kpi-orange[b-ch7xcnkgpe] { border-color: var(--color-warning-600); }
.kpi-purple[b-ch7xcnkgpe] { border-color: #7c3aed; }
.kpi-gray[b-ch7xcnkgpe]  { border-color: var(--color-neutral-400); }

.kpi-label[b-ch7xcnkgpe] { font-size: var(--text-sm); color: var(--color-neutral-600); }
.kpi-value[b-ch7xcnkgpe] { font-size: var(--text-3xl); font-weight: 700; color: var(--color-neutral-900); margin: var(--space-1) 0; }
.kpi-sub[b-ch7xcnkgpe]   { font-size: var(--text-xs); color: var(--color-neutral-500); }
.kpi-icon[b-ch7xcnkgpe]  { font-size: 2rem; opacity: 0.2; }

.section-grid[b-ch7xcnkgpe] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--space-6);
    margin-bottom: var(--space-6);
}

.card[b-ch7xcnkgpe] {
    background: white;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}

.card-header[b-ch7xcnkgpe] {
    padding: var(--space-4) var(--space-6);
    border-bottom: 1px solid var(--color-neutral-100);
}

.card-title[b-ch7xcnkgpe] {
    font-size: var(--text-lg);
    font-weight: 600;
    color: var(--color-neutral-900);
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.breakdown-list[b-ch7xcnkgpe] { padding: var(--space-4) var(--space-6); display: flex; flex-direction: column; gap: var(--space-3); }
.breakdown-item[b-ch7xcnkgpe] { display: flex; justify-content: space-between; align-items: center; }
.breakdown-label[b-ch7xcnkgpe] { color: var(--color-neutral-700); }
.breakdown-badge[b-ch7xcnkgpe] { font-size: var(--text-sm); font-weight: 600; padding: 0.125rem 0.5rem; border-radius: var(--radius-full); }

.badge-blue[b-ch7xcnkgpe]   { background: #dbeafe; color: #1e40af; }
.badge-teal[b-ch7xcnkgpe]   { background: var(--color-teal-100); color: #134e4a; }
.badge-purple[b-ch7xcnkgpe] { background: #ede9fe; color: #4c1d95; }
.badge-orange[b-ch7xcnkgpe] { background: #ffedd5; color: #7c2d12; }
.badge-pink[b-ch7xcnkgpe]   { background: #fce7f3; color: #831843; }
.badge-gray[b-ch7xcnkgpe]   { background: var(--color-neutral-100); color: var(--color-neutral-700); }

.quick-actions[b-ch7xcnkgpe] { padding: var(--space-2) var(--space-4); }
.quick-action-item[b-ch7xcnkgpe] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-2);
    color: var(--color-neutral-800);
    text-decoration: none;
    border-radius: var(--radius-md);
    transition: background 0.15s;
    border-bottom: 1px solid var(--color-neutral-100);
}
.quick-action-item:last-child[b-ch7xcnkgpe] { border-bottom: none; }
.quick-action-item:hover[b-ch7xcnkgpe] { background: var(--color-neutral-50); }
.quick-action-item i:first-child[b-ch7xcnkgpe] { color: var(--color-primary-600); width: 1.25rem; text-align: center; }
.ml-auto[b-ch7xcnkgpe] { margin-left: auto; }

.table-wrapper[b-ch7xcnkgpe] { overflow-x: auto; }
.data-table[b-ch7xcnkgpe] { width: 100%; border-collapse: collapse; }
.data-table th[b-ch7xcnkgpe] { background: var(--color-neutral-50); font-size: var(--text-xs); font-weight: 600; text-transform: uppercase; color: var(--color-neutral-500); padding: var(--space-3) var(--space-4); text-align: left; }
.data-table td[b-ch7xcnkgpe] { padding: var(--space-3) var(--space-4); border-top: 1px solid var(--color-neutral-100); font-size: var(--text-sm); }
.data-table tr:hover td[b-ch7xcnkgpe] { background: var(--color-neutral-50); }
.font-medium[b-ch7xcnkgpe] { font-weight: 500; }
.text-success[b-ch7xcnkgpe] { color: var(--color-success-600); }
.text-danger[b-ch7xcnkgpe]  { color: var(--color-danger-600); }

.gender-badge[b-ch7xcnkgpe] { font-size: var(--text-xs); padding: 0.125rem 0.5rem; border-radius: var(--radius-full); font-weight: 500; }

.progress-bar-outer[b-ch7xcnkgpe] { background: var(--color-neutral-200); border-radius: var(--radius-full); height: 0.5rem; width: 5rem; display: inline-block; vertical-align: middle; }
.progress-bar-inner[b-ch7xcnkgpe] { height: 0.5rem; border-radius: var(--radius-full); transition: width 0.3s; }
.bar-success[b-ch7xcnkgpe] { background: var(--color-success-500); }
.bar-warning[b-ch7xcnkgpe] { background: var(--color-warning-500); }
.bar-danger[b-ch7xcnkgpe]  { background: var(--color-danger-500); }
.progress-label[b-ch7xcnkgpe] { font-size: var(--text-xs); color: var(--color-neutral-600); margin-left: var(--space-2); }

@media (max-width: 768px) {
    .hostel-page[b-ch7xcnkgpe] { padding: var(--space-4); }
    .page-header[b-ch7xcnkgpe] { flex-direction: column; }
    .kpi-grid[b-ch7xcnkgpe] { grid-template-columns: 1fr; }
    .section-grid[b-ch7xcnkgpe] { grid-template-columns: 1fr; }
}
/* /Pages/Principal/Hostel/Meals.razor.rz.scp.css */
.meals-page[b-tdkvdu45z9] { padding: var(--space-6); }

.attendance-controls[b-tdkvdu45z9] { display: flex; gap: var(--space-3); margin-bottom: var(--space-4); flex-wrap: wrap; }
.attendance-controls .form-control[b-tdkvdu45z9] { max-width: 200px; }

.attendance-summary[b-tdkvdu45z9] { display: flex; gap: var(--space-3); margin-bottom: var(--space-4); flex-wrap: wrap; }
.summary-card[b-tdkvdu45z9] { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-3) var(--space-4); display: flex; flex-direction: column; gap: var(--space-1); }
.meal-label[b-tdkvdu45z9] { font-size: var(--text-xs); color: var(--color-text-secondary); text-transform: uppercase; }
.count[b-tdkvdu45z9] { font-size: var(--text-lg); font-weight: 600; color: var(--color-primary); }

.plans-header[b-tdkvdu45z9] { margin-bottom: var(--space-4); }
.plans-grid[b-tdkvdu45z9] { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--space-4); }
.plan-card[b-tdkvdu45z9] { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-4); }
.plan-header[b-tdkvdu45z9] { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: var(--space-3); }
.plan-header h4[b-tdkvdu45z9] { margin: 0; font-size: var(--text-base); }
.plan-code[b-tdkvdu45z9] { font-size: var(--text-xs); background: var(--color-surface-raised); padding: 2px 8px; border-radius: var(--radius-sm); }
.plan-meals[b-tdkvdu45z9] { display: flex; gap: var(--space-2); margin-bottom: var(--space-3); flex-wrap: wrap; }
.meal-tag[b-tdkvdu45z9] { font-size: var(--text-xs); background: var(--color-primary-light); color: var(--color-primary-dark); padding: 2px 8px; border-radius: 999px; }
.plan-rates[b-tdkvdu45z9] { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-2); margin-bottom: var(--space-3); }
.rate-item[b-tdkvdu45z9] { display: flex; flex-direction: column; text-align: center; }
.rate-item span[b-tdkvdu45z9] { font-size: var(--text-xs); color: var(--color-text-secondary); }
.plan-desc[b-tdkvdu45z9] { font-size: var(--text-sm); color: var(--color-text-secondary); margin: var(--space-2) 0; }
.plan-actions[b-tdkvdu45z9] { display: flex; justify-content: flex-end; }

.meals-checkboxes[b-tdkvdu45z9] { display: flex; gap: var(--space-3); flex-wrap: wrap; }
.checkbox-label[b-tdkvdu45z9] { display: flex; align-items: center; gap: var(--space-2); cursor: pointer; }

.empty-state[b-tdkvdu45z9] { color: var(--color-text-secondary); text-align: center; padding: var(--space-8); }

@media (max-width: 768px) {
    .attendance-controls .form-control[b-tdkvdu45z9] { max-width: 100%; }
    .plans-grid[b-tdkvdu45z9] { grid-template-columns: 1fr; }
}
/* /Pages/Principal/Hostel/Movement.razor.rz.scp.css */
.movement-page[b-ef1kvc50gb] {
    padding: 1.5rem;
    max-width: 1200px;
    margin: 0 auto;
}

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

.page-title[b-ef1kvc50gb] {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--color-text-primary, #1a202c);
    margin: 0 0 0.25rem 0;
}

.page-subtitle[b-ef1kvc50gb] {
    font-size: 0.875rem;
    color: var(--color-text-secondary, #6b7280);
    margin: 0;
}

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

.btn-outline[b-ef1kvc50gb] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 1rem;
    border: 1.5px solid var(--color-primary, #4f46e5);
    border-radius: 6px;
    color: var(--color-primary, #4f46e5);
    font-size: 0.875rem;
    font-weight: 500;
    text-decoration: none;
    background: none;
    cursor: pointer;
    transition: background 0.2s;
}

.btn-outline:hover[b-ef1kvc50gb] {
    background: var(--color-primary-light, #eef2ff);
}

.btn-check-in[b-ef1kvc50gb] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.35rem 0.75rem;
    background: #dcfce7;
    color: #16a34a;
    border: 1px solid #bbf7d0;
    border-radius: 5px;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s;
    white-space: nowrap;
}

.btn-check-in:hover[b-ef1kvc50gb] {
    background: #bbf7d0;
}

.tabs[b-ef1kvc50gb] {
    display: flex;
    gap: 0.25rem;
    border-bottom: 1px solid var(--color-border, #e2e8f0);
    margin-bottom: 1.25rem;
}

.tab-btn[b-ef1kvc50gb] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.6rem 1.25rem;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    color: var(--color-text-secondary, #6b7280);
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: color 0.2s, border-color 0.2s;
    margin-bottom: -1px;
}

.tab-btn.active[b-ef1kvc50gb] {
    color: var(--color-primary, #4f46e5);
    border-bottom-color: var(--color-primary, #4f46e5);
}

.tab-btn:hover:not(.active)[b-ef1kvc50gb] {
    color: var(--color-text-primary, #1a202c);
}

.tab-count[b-ef1kvc50gb] {
    background: #fee2e2;
    color: #dc2626;
    font-size: 0.7rem;
    font-weight: 700;
    padding: 0.1rem 0.45rem;
    border-radius: 999px;
}

.loading-center[b-ef1kvc50gb] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4rem 2rem;
    color: var(--color-text-secondary, #6b7280);
    gap: 1rem;
}

.spinner[b-ef1kvc50gb] {
    width: 36px;
    height: 36px;
    border: 3px solid var(--color-border, #e2e8f0);
    border-top-color: var(--color-primary, #4f46e5);
    border-radius: 50%;
    animation: spin-b-ef1kvc50gb 0.8s linear infinite;
}

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

.alert-error[b-ef1kvc50gb] {
    background: #fef2f2;
    border: 1px solid #fecaca;
    color: #dc2626;
    padding: 0.75rem 1rem;
    border-radius: 8px;
    font-size: 0.875rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.small-alert[b-ef1kvc50gb] {
    padding: 0.5rem 0.75rem;
    font-size: 0.8rem;
    margin-top: 0.75rem;
    margin-bottom: 0;
}

.card[b-ef1kvc50gb] {
    background: #fff;
    border: 1px solid var(--color-border, #e2e8f0);
    border-radius: 10px;
    overflow: hidden;
}

.card-header[b-ef1kvc50gb] {
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--color-border, #e2e8f0);
}

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

.count-badge[b-ef1kvc50gb] {
    background: #fee2e2;
    color: #dc2626;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
}

.table-wrapper[b-ef1kvc50gb] {
    overflow-x: auto;
}

.data-table[b-ef1kvc50gb] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
}

.data-table th[b-ef1kvc50gb] {
    padding: 0.75rem 1rem;
    text-align: left;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-text-secondary, #6b7280);
    background: var(--color-surface, #f8fafc);
    border-bottom: 1px solid var(--color-border, #e2e8f0);
    white-space: nowrap;
}

.data-table td[b-ef1kvc50gb] {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--color-border, #e2e8f0);
    color: var(--color-text-primary, #1a202c);
    vertical-align: middle;
}

.data-table tr:last-child td[b-ef1kvc50gb] {
    border-bottom: none;
}

.data-table tr:hover td[b-ef1kvc50gb] {
    background: var(--color-surface, #f8fafc);
}

.row-overdue td[b-ef1kvc50gb] {
    background: #fff5f5;
}

.row-overdue:hover td[b-ef1kvc50gb] {
    background: #fee2e2;
}

.student-name[b-ef1kvc50gb] {
    font-weight: 600;
}

.student-sub[b-ef1kvc50gb] {
    font-size: 0.75rem;
    color: var(--color-text-secondary, #6b7280);
}

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

.text-muted[b-ef1kvc50gb] {
    color: var(--color-text-secondary, #6b7280);
}

.status-badge[b-ef1kvc50gb] {
    display: inline-block;
    padding: 0.25rem 0.7rem;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.badge-out[b-ef1kvc50gb] {
    background: #dbeafe;
    color: #1d4ed8;
}

.badge-overdue[b-ef1kvc50gb] {
    background: #fee2e2;
    color: #dc2626;
}

.empty-cell[b-ef1kvc50gb] {
    text-align: center;
    color: var(--color-text-secondary, #6b7280);
    padding: 2.5rem;
    font-style: italic;
}

/* Modal */
.modal-overlay[b-ef1kvc50gb] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

.modal[b-ef1kvc50gb] {
    background: #fff;
    border-radius: 12px;
    width: 100%;
    max-width: 520px;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
}

.modal-sm[b-ef1kvc50gb] {
    max-width: 400px;
}

.modal-header[b-ef1kvc50gb] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.25rem 1.5rem 1rem;
    border-bottom: 1px solid var(--color-border, #e2e8f0);
}

.modal-header h3[b-ef1kvc50gb] {
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-text-primary, #1a202c);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.close-btn[b-ef1kvc50gb] {
    background: none;
    border: none;
    font-size: 1rem;
    cursor: pointer;
    color: var(--color-text-secondary, #6b7280);
    padding: 0.25rem;
    line-height: 1;
}

.close-btn:hover[b-ef1kvc50gb] {
    color: var(--color-text-primary, #1a202c);
}

.modal-body[b-ef1kvc50gb] {
    padding: 1.25rem 1.5rem;
}

.modal-footer[b-ef1kvc50gb] {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    padding: 1rem 1.5rem 1.25rem;
    border-top: 1px solid var(--color-border, #e2e8f0);
}

.form-group[b-ef1kvc50gb] {
    margin-bottom: 1rem;
}

.form-group label[b-ef1kvc50gb] {
    display: block;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--color-text-secondary, #6b7280);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 0.35rem;
}

.form-input[b-ef1kvc50gb] {
    width: 100%;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--color-border, #e2e8f0);
    border-radius: 6px;
    font-size: 0.875rem;
    color: var(--color-text-primary, #1a202c);
    background: #fff;
    box-sizing: border-box;
    transition: border-color 0.2s;
}

.form-input:focus[b-ef1kvc50gb] {
    outline: none;
    border-color: var(--color-primary, #4f46e5);
    box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1);
}

.form-textarea[b-ef1kvc50gb] {
    resize: vertical;
    min-height: 70px;
}

.required[b-ef1kvc50gb] {
    color: #dc2626;
}

.btn-spinner[b-ef1kvc50gb] {
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 2px solid rgba(255, 255, 255, 0.4);
    border-top-color: #fff;
    border-radius: 50%;
    animation: spin-b-ef1kvc50gb 0.7s linear infinite;
    margin-right: 0.25rem;
}

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

    .page-header[b-ef1kvc50gb] {
        flex-direction: column;
    }

    .tabs[b-ef1kvc50gb] {
        overflow-x: auto;
    }

    .tab-btn[b-ef1kvc50gb] {
        white-space: nowrap;
    }

    .data-table th[b-ef1kvc50gb],
    .data-table td[b-ef1kvc50gb] {
        padding: 0.6rem 0.75rem;
    }

    .modal[b-ef1kvc50gb] {
        margin: 0.5rem;
    }
}
/* /Pages/Principal/Hostel/Payments.razor.rz.scp.css */
.payments-page[b-8557noa6zk] {
    padding: 1.5rem;
    max-width: 1200px;
    margin: 0 auto;
}

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

.page-title[b-8557noa6zk] {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--color-text-primary, #1a202c);
    margin: 0 0 0.25rem 0;
}

.page-subtitle[b-8557noa6zk] {
    font-size: 0.875rem;
    color: var(--color-text-secondary, #6b7280);
    margin: 0;
}

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

.btn-outline[b-8557noa6zk] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 1rem;
    border: 1.5px solid var(--color-primary, #4f46e5);
    border-radius: 6px;
    color: var(--color-primary, #4f46e5);
    font-size: 0.875rem;
    font-weight: 500;
    text-decoration: none;
    transition: background 0.2s;
}

.btn-outline:hover[b-8557noa6zk] {
    background: var(--color-primary-light, #eef2ff);
}

.filter-bar[b-8557noa6zk] {
    display: flex;
    gap: 1rem;
    margin-bottom: 1.25rem;
    flex-wrap: wrap;
    align-items: center;
}

.filter-select[b-8557noa6zk] {
    padding: 0.45rem 0.75rem;
    border: 1px solid var(--color-border, #e2e8f0);
    border-radius: 6px;
    font-size: 0.875rem;
    color: var(--color-text-primary, #1a202c);
    background: #fff;
    min-width: 160px;
}

.loading-center[b-8557noa6zk] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4rem 2rem;
    color: var(--color-text-secondary, #6b7280);
    gap: 1rem;
}

.spinner[b-8557noa6zk] {
    width: 36px;
    height: 36px;
    border: 3px solid var(--color-border, #e2e8f0);
    border-top-color: var(--color-primary, #4f46e5);
    border-radius: 50%;
    animation: spin-b-8557noa6zk 0.8s linear infinite;
}

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

.alert-error[b-8557noa6zk] {
    background: #fef2f2;
    border: 1px solid #fecaca;
    color: #dc2626;
    padding: 0.75rem 1rem;
    border-radius: 8px;
    font-size: 0.875rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.card[b-8557noa6zk] {
    background: #fff;
    border: 1px solid var(--color-border, #e2e8f0);
    border-radius: 10px;
    overflow: hidden;
}

.card-header[b-8557noa6zk] {
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--color-border, #e2e8f0);
}

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

.card-title[b-8557noa6zk] {
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-text-primary, #1a202c);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.count-badge[b-8557noa6zk] {
    background: var(--color-primary-light, #eef2ff);
    color: var(--color-primary, #4f46e5);
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
}

.table-wrapper[b-8557noa6zk] {
    overflow-x: auto;
}

.data-table[b-8557noa6zk] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
}

.data-table th[b-8557noa6zk] {
    padding: 0.75rem 1rem;
    text-align: left;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-text-secondary, #6b7280);
    background: var(--color-surface, #f8fafc);
    border-bottom: 1px solid var(--color-border, #e2e8f0);
    white-space: nowrap;
}

.data-table td[b-8557noa6zk] {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--color-border, #e2e8f0);
    color: var(--color-text-primary, #1a202c);
    vertical-align: middle;
}

.data-table tr:last-child td[b-8557noa6zk] {
    border-bottom: none;
}

.data-table tr:hover td[b-8557noa6zk] {
    background: var(--color-surface, #f8fafc);
}

.mono-text[b-8557noa6zk] {
    font-family: monospace;
    font-size: 0.8rem;
    color: var(--color-text-secondary, #6b7280);
}

.student-name[b-8557noa6zk] {
    font-weight: 600;
}

.student-admission[b-8557noa6zk] {
    font-size: 0.75rem;
    color: var(--color-text-secondary, #6b7280);
}

.text-success[b-8557noa6zk] {
    color: #16a34a;
    font-weight: 600;
}

.text-danger[b-8557noa6zk] {
    color: #dc2626;
    font-weight: 600;
}

.text-muted[b-8557noa6zk] {
    color: var(--color-text-secondary, #6b7280);
}

.status-badge[b-8557noa6zk] {
    display: inline-block;
    padding: 0.25rem 0.7rem;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.badge-paid[b-8557noa6zk] {
    background: #dcfce7;
    color: #16a34a;
}

.badge-partial[b-8557noa6zk] {
    background: #fef9c3;
    color: #ca8a04;
}

.badge-pending[b-8557noa6zk] {
    background: #fee2e2;
    color: #dc2626;
}

.badge-gray[b-8557noa6zk] {
    background: var(--color-surface, #f8fafc);
    color: var(--color-text-secondary, #6b7280);
}

.empty-cell[b-8557noa6zk] {
    text-align: center;
    color: var(--color-text-secondary, #6b7280);
    padding: 2rem;
    font-style: italic;
}

.pagination[b-8557noa6zk] {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    border-top: 1px solid var(--color-border, #e2e8f0);
}

.page-btn[b-8557noa6zk] {
    background: none;
    border: 1px solid var(--color-border, #e2e8f0);
    border-radius: 6px;
    padding: 0.4rem 0.75rem;
    cursor: pointer;
    color: var(--color-text-primary, #1a202c);
    transition: background 0.2s;
}

.page-btn:hover:not([disabled])[b-8557noa6zk] {
    background: var(--color-surface, #f8fafc);
}

.page-btn:disabled[b-8557noa6zk] {
    opacity: 0.4;
    cursor: not-allowed;
}

.page-info[b-8557noa6zk] {
    font-size: 0.875rem;
    color: var(--color-text-secondary, #6b7280);
}

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

    .page-header[b-8557noa6zk] {
        flex-direction: column;
    }

    .data-table th[b-8557noa6zk],
    .data-table td[b-8557noa6zk] {
        padding: 0.6rem 0.75rem;
    }
}

/* ── Alert banners ───────────────────────────────────── */
.alert-success[b-8557noa6zk] { background: var(--color-success-50); border: 1px solid var(--color-success-200); border-radius: var(--radius-lg); padding: var(--space-3) var(--space-4); color: var(--color-success-800); margin-top: var(--space-3); }
.alert-error[b-8557noa6zk]   { background: var(--color-danger-50);  border: 1px solid var(--color-danger-200);  border-radius: var(--radius-lg); padding: var(--space-3) var(--space-4); color: var(--color-danger-800);  margin-top: var(--space-3); }
.alert-error.small[b-8557noa6zk] { font-size: var(--text-sm); padding: var(--space-2) var(--space-3); margin-top: var(--space-2); }

/* ── Shared modal shell (smodal) ─────────────────────── */
.modal-overlay[b-8557noa6zk] { position: fixed; inset: 0; background: rgba(0,0,0,0.48); z-index: 9000; display: flex; align-items: center; justify-content: center; padding: var(--space-4); }
.smodal[b-8557noa6zk]        { background: white; border-radius: var(--radius-xl); width: 100%; max-width: 560px; max-height: 90vh; overflow-y: auto; box-shadow: var(--shadow-xl); display: flex; flex-direction: column; }
.smodal-header[b-8557noa6zk] { display: flex; align-items: center; justify-content: space-between; padding: var(--space-4) var(--space-6); border-bottom: 1px solid var(--color-neutral-200); }
.smodal-header h3[b-8557noa6zk] { font-size: var(--text-lg); font-weight: 700; color: var(--color-neutral-900); margin: 0; }
.smodal-body[b-8557noa6zk]   { padding: var(--space-6); display: flex; flex-direction: column; gap: var(--space-4); }
.smodal-footer[b-8557noa6zk] { padding: var(--space-4) var(--space-6); border-top: 1px solid var(--color-neutral-200); display: flex; justify-content: flex-end; gap: var(--space-3); }
.close-btn[b-8557noa6zk]     { background: none; border: none; cursor: pointer; padding: var(--space-1); color: var(--color-neutral-500); font-size: 1.1rem; border-radius: var(--radius-md); }
.close-btn:hover[b-8557noa6zk] { background: var(--color-neutral-100); color: var(--color-neutral-800); }

/* ── Form helpers inside modals ──────────────────────── */
.form-group[b-8557noa6zk]       { display: flex; flex-direction: column; gap: var(--space-1); }
.form-group label[b-8557noa6zk] { font-size: var(--text-sm); font-weight: 600; color: var(--color-neutral-700); }
.form-input[b-8557noa6zk]       { border: 1px solid var(--color-neutral-300); border-radius: var(--radius-md); padding: var(--space-2) var(--space-3); font-size: var(--text-sm); color: var(--color-neutral-900); background: white; width: 100%; box-sizing: border-box; }
.form-input:focus[b-8557noa6zk] { outline: none; border-color: var(--color-primary-500); box-shadow: 0 0 0 2px var(--color-primary-100); }
.form-row[b-8557noa6zk]         { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
.req[b-8557noa6zk]              { color: var(--color-danger-600); }

/* ── Calculate result callout ────────────────────────── */
.calc-result[b-8557noa6zk] { background: var(--color-success-50); border: 1px solid var(--color-success-200); border-radius: var(--radius-md); padding: var(--space-2) var(--space-3); font-size: var(--text-sm); color: var(--color-success-800); }

/* ── Loading / spinner ───────────────────────────────── */
.loading-center[b-8557noa6zk] { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-3); padding: var(--space-8); color: var(--color-neutral-500); }
.spinner[b-8557noa6zk]    { width: 2rem; height: 2rem; border: 3px solid var(--color-neutral-200); border-top-color: var(--color-primary-600); border-radius: 50%; animation: spin-b-8557noa6zk 0.8s linear infinite; }
.spinner-sm[b-8557noa6zk] { width: 1rem; height: 1rem; border: 2px solid var(--color-neutral-200); border-top-color: var(--color-primary-600); border-radius: 50%; animation: spin-b-8557noa6zk 0.8s linear infinite; display: inline-block; vertical-align: middle; }
@keyframes spin-b-8557noa6zk { to { transform: rotate(360deg); } }
@media (max-width: 520px) { .form-row[b-8557noa6zk] { grid-template-columns: 1fr; } .smodal[b-8557noa6zk] { max-width: 100%; } }
/* /Pages/Principal/Hostel/Reports/Attendance.razor.rz.scp.css */
.report-page[b-5m1djropyd] { padding: var(--space-6); }
.filter-bar[b-5m1djropyd] { display: flex; gap: var(--space-3); margin-bottom: var(--space-4); flex-wrap: wrap; }
.filter-bar .form-control[b-5m1djropyd] { max-width: 200px; }
.summary-bar[b-5m1djropyd] { display: flex; gap: var(--space-3); margin-bottom: var(--space-4); flex-wrap: wrap; }
.metric-card[b-5m1djropyd] { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-3) var(--space-4); display: flex; flex-direction: column; gap: var(--space-1); min-width: 130px; }
.metric-label[b-5m1djropyd] { font-size: var(--text-xs); color: var(--color-text-secondary); text-transform: uppercase; }
.metric-value[b-5m1djropyd] { font-size: var(--text-xl); font-weight: 700; color: var(--color-primary); }
.empty-row[b-5m1djropyd] { text-align: center; color: var(--color-text-secondary); padding: var(--space-6); }
@media (max-width: 768px) { .filter-bar .form-control[b-5m1djropyd] { max-width: 100%; } }
/* /Pages/Principal/Hostel/Reports/Defaulters.razor.rz.scp.css */
.defaulters-page[b-kzu30lj3ox] { padding: 1.5rem; }
.page-header[b-kzu30lj3ox] { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 1.5rem; }
.page-title[b-kzu30lj3ox] { font-size: 1.5rem; font-weight: 700; color: var(--color-neutral-900); margin: 0; }
.page-subtitle[b-kzu30lj3ox] { font-size: 0.875rem; color: var(--color-neutral-500); margin: 0.25rem 0 0; }
.summary-row[b-kzu30lj3ox] { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; margin-bottom: 1.5rem; }
.summary-card[b-kzu30lj3ox] { background: white; border-radius: 0.875rem; border: 1px solid var(--color-neutral-200); padding: 1.25rem; display: flex; align-items: center; gap: 1rem; }
.summary-card i[b-kzu30lj3ox] { font-size: 1.5rem; }
.summary-card.red i[b-kzu30lj3ox] { color: #ef4444; }
.summary-card.orange i[b-kzu30lj3ox] { color: #f97316; }
.summary-card.yellow i[b-kzu30lj3ox] { color: #eab308; }
.summary-num[b-kzu30lj3ox] { display: block; font-size: 1.25rem; font-weight: 700; color: var(--color-neutral-900); }
.summary-label[b-kzu30lj3ox] { font-size: 0.75rem; color: var(--color-neutral-500); }
.loading-center[b-kzu30lj3ox] { display: flex; flex-direction: column; align-items: center; padding: 3rem; gap: 1rem; color: var(--color-neutral-500); }
.spinner[b-kzu30lj3ox] { width: 2rem; height: 2rem; border: 3px solid var(--color-neutral-200); border-top-color: var(--color-red-500, #ef4444); border-radius: 50%; animation: spin 0.8s linear infinite; }
@@keyframes spin { to[b-kzu30lj3ox] { transform: rotate(360deg); } }
.alert[b-kzu30lj3ox] { padding: 0.875rem 1rem; border-radius: 0.5rem; font-size: 0.875rem; }
.alert-danger[b-kzu30lj3ox] { background: #fef2f2; color: #b91c1c; border: 1px solid #fecaca; }
.empty-state[b-kzu30lj3ox] { background: white; border-radius: 1rem; padding: 4rem; text-align: center; color: var(--color-neutral-400); border: 1px solid var(--color-neutral-200); }
.empty-state i[b-kzu30lj3ox] { font-size: 3rem; margin-bottom: 1rem; display: block; }
.empty-state h3[b-kzu30lj3ox] { font-size: 1.1rem; color: var(--color-neutral-600); }
.empty-state p[b-kzu30lj3ox] { font-size: 0.875rem; }
.toolbar[b-kzu30lj3ox] { display: flex; gap: 0.75rem; margin-bottom: 1rem; flex-wrap: wrap; }
.search-input[b-kzu30lj3ox] { flex: 1; min-width: 200px; padding: 0.5rem 0.875rem; border: 1px solid var(--color-neutral-300); border-radius: 0.5rem; font-size: 0.875rem; }
.form-control-sm[b-kzu30lj3ox] { padding: 0.5rem 0.75rem; border: 1px solid var(--color-neutral-300); border-radius: 0.5rem; font-size: 0.875rem; min-width: 140px; }
.table-container[b-kzu30lj3ox] { background: white; border-radius: 0.875rem; border: 1px solid var(--color-neutral-200); overflow: hidden; }
.data-table[b-kzu30lj3ox] { width: 100%; border-collapse: collapse; font-size: 0.875rem; }
.data-table th[b-kzu30lj3ox] { background: var(--color-neutral-50); padding: 0.75rem 1rem; text-align: left; font-weight: 600; color: var(--color-neutral-600); border-bottom: 1px solid var(--color-neutral-200); white-space: nowrap; }
.data-table td[b-kzu30lj3ox] { padding: 0.75rem 1rem; border-bottom: 1px solid var(--color-neutral-100); color: var(--color-neutral-700); }
.data-table tr:last-child td[b-kzu30lj3ox] { border-bottom: none; }
.data-table tr:hover td[b-kzu30lj3ox] { background: var(--color-neutral-50); }
.student-cell[b-kzu30lj3ox] { display: flex; align-items: center; gap: 0.75rem; }
.student-avatar[b-kzu30lj3ox] { width: 2rem; height: 2rem; border-radius: 50%; background: linear-gradient(135deg, #ef4444, #dc2626); display: flex; align-items: center; justify-content: center; color: white; font-weight: 700; font-size: 0.8rem; flex-shrink: 0; }
.student-name[b-kzu30lj3ox] { font-weight: 600; color: var(--color-neutral-800); }
.text-mono[b-kzu30lj3ox] { font-family: monospace; }
.text-neutral[b-kzu30lj3ox] { color: var(--color-neutral-500); }
.text-green[b-kzu30lj3ox] { color: #16a34a; }
.text-red[b-kzu30lj3ox] { color: #dc2626; }
.font-bold[b-kzu30lj3ox] { font-weight: 700; }
.badge[b-kzu30lj3ox] { display: inline-flex; align-items: center; padding: 0.2rem 0.6rem; border-radius: 9999px; font-size: 0.75rem; font-weight: 600; }
.badge-red[b-kzu30lj3ox] { background: #fef2f2; color: #dc2626; }
.badge-orange[b-kzu30lj3ox] { background: #fff7ed; color: #c2410c; }
.badge-gray[b-kzu30lj3ox] { background: var(--color-neutral-100); color: var(--color-neutral-600); }
.empty-row[b-kzu30lj3ox] { text-align: center; color: var(--color-neutral-400); padding: 2rem !important; }
.pagination-bar[b-kzu30lj3ox] { display: flex; justify-content: space-between; align-items: center; padding: 0.875rem 1rem; background: white; border-radius: 0 0 0.875rem 0.875rem; border-top: 1px solid var(--color-neutral-100); }
.page-info[b-kzu30lj3ox] { font-size: 0.8rem; color: var(--color-neutral-500); }
.page-btns[b-kzu30lj3ox] { display: flex; align-items: center; gap: 0.5rem; font-size: 0.875rem; }
.btn-icon-sm[b-kzu30lj3ox] { width: 1.75rem; height: 1.75rem; border: 1px solid var(--color-neutral-300); background: white; border-radius: 0.375rem; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.btn-icon-sm:disabled[b-kzu30lj3ox] { opacity: 0.4; cursor: not-allowed; }

@media (max-width: 768px) { .summary-row[b-kzu30lj3ox] { grid-template-columns: 1fr 1fr; } .table-container[b-kzu30lj3ox] { overflow-x: auto; } }
@media (max-width: 480px) { .summary-row[b-kzu30lj3ox] { grid-template-columns: 1fr; } }
/* /Pages/Principal/Hostel/Reports/Fees.razor.rz.scp.css */
.report-page[b-wqjwpxk8rz] { padding: var(--space-6); }
.filter-bar[b-wqjwpxk8rz] { display: flex; gap: var(--space-3); margin-bottom: var(--space-4); flex-wrap: wrap; }
.filter-bar .form-control[b-wqjwpxk8rz] { max-width: 200px; }
.summary-bar[b-wqjwpxk8rz] { display: flex; gap: var(--space-3); margin-bottom: var(--space-4); flex-wrap: wrap; }
.metric-card[b-wqjwpxk8rz] { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-3) var(--space-4); display: flex; flex-direction: column; gap: var(--space-1); min-width: 160px; }
.metric-label[b-wqjwpxk8rz] { font-size: var(--text-xs); color: var(--color-text-secondary); text-transform: uppercase; }
.metric-value[b-wqjwpxk8rz] { font-size: var(--text-xl); font-weight: 700; color: var(--color-primary); }
.text-danger[b-wqjwpxk8rz] { color: var(--color-danger); }
.empty-row[b-wqjwpxk8rz] { text-align: center; color: var(--color-text-secondary); padding: var(--space-6); }
@media (max-width: 768px) { .filter-bar .form-control[b-wqjwpxk8rz] { max-width: 100%; } }
/* /Pages/Principal/Hostel/Reports/Occupancy.razor.rz.scp.css */
.report-page[b-dj4mqljuhu] { padding: var(--space-6); }
.filter-bar[b-dj4mqljuhu] { display: flex; gap: var(--space-3); margin-bottom: var(--space-4); flex-wrap: wrap; }
.filter-bar .form-control[b-dj4mqljuhu] { max-width: 200px; }
.summary-bar[b-dj4mqljuhu] { display: flex; gap: var(--space-3); margin-bottom: var(--space-4); flex-wrap: wrap; }
.metric-card[b-dj4mqljuhu] { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-3) var(--space-4); display: flex; flex-direction: column; gap: var(--space-1); min-width: 130px; }
.metric-label[b-dj4mqljuhu] { font-size: var(--text-xs); color: var(--color-text-secondary); text-transform: uppercase; }
.metric-value[b-dj4mqljuhu] { font-size: var(--text-xl); font-weight: 700; color: var(--color-primary); }
.occupancy-bar[b-dj4mqljuhu] { position: relative; width: 100%; height: 20px; background: var(--color-border); border-radius: 4px; overflow: hidden; }
.occupancy-bar .fill[b-dj4mqljuhu] { height: 100%; background: var(--color-primary); transition: width .3s; }
.occupancy-bar span[b-dj4mqljuhu] { position: absolute; right: 4px; top: 2px; font-size: var(--text-xs); font-weight: 600; }
.empty-row[b-dj4mqljuhu] { text-align: center; color: var(--color-text-secondary); padding: var(--space-6); }
@media (max-width: 768px) { .filter-bar .form-control[b-dj4mqljuhu] { max-width: 100%; } .summary-bar[b-dj4mqljuhu] { gap: var(--space-2); } }
/* /Pages/Principal/Hostel/Rooms.razor.rz.scp.css */
.rooms-page[b-gjc6w52lqs] { min-height: 100vh; background: var(--color-neutral-50); padding: var(--space-6); }
.page-header[b-gjc6w52lqs] { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: var(--space-6); flex-wrap: wrap; gap: var(--space-4); }
.page-title[b-gjc6w52lqs] { font-size: var(--text-3xl); font-weight: 700; color: var(--color-neutral-900); }
.page-subtitle[b-gjc6w52lqs] { color: var(--color-neutral-600); margin-top: var(--space-1); }
.header-actions[b-gjc6w52lqs] { display: flex; gap: var(--space-3); }
.btn-outline[b-gjc6w52lqs] { display: inline-flex; align-items: center; gap: var(--space-2); border: 1px solid var(--color-neutral-300); color: var(--color-neutral-700); padding: var(--space-2) var(--space-4); border-radius: var(--radius-md); font-weight: 500; text-decoration: none; cursor: pointer; background: white; transition: background 0.15s; }
.btn-outline:hover[b-gjc6w52lqs] { background: var(--color-neutral-50); }
.loading-center[b-gjc6w52lqs] { display: flex; flex-direction: column; align-items: center; padding: var(--space-16); gap: var(--space-4); }
.spinner[b-gjc6w52lqs] { width: 3rem; height: 3rem; border: 4px solid var(--color-neutral-200); border-top-color: var(--color-primary-600); border-radius: 50%; animation: spin-b-gjc6w52lqs 0.8s linear infinite; }
@keyframes spin-b-gjc6w52lqs { to { transform: rotate(360deg); } }
.alert-error[b-gjc6w52lqs] { background: var(--color-danger-50); border: 1px solid var(--color-danger-200); border-radius: var(--radius-lg); padding: var(--space-4); color: var(--color-danger-800); }
.buildings-grid[b-gjc6w52lqs] { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--space-4); margin-bottom: var(--space-6); }
.building-card[b-gjc6w52lqs] { background: white; border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); padding: var(--space-4); cursor: pointer; border: 2px solid transparent; transition: border-color 0.15s, box-shadow 0.15s; }
.building-card:hover[b-gjc6w52lqs] { box-shadow: var(--shadow-md); }
.building-card.selected[b-gjc6w52lqs] { border-color: var(--color-primary-500); }
.building-header[b-gjc6w52lqs] { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: var(--space-3); }
.building-name[b-gjc6w52lqs] { font-size: var(--text-lg); font-weight: 600; color: var(--color-neutral-900); }
.building-code[b-gjc6w52lqs] { font-size: var(--text-sm); color: var(--color-neutral-500); margin-top: 0.125rem; }
.gender-badge[b-gjc6w52lqs] { font-size: var(--text-xs); font-weight: 600; padding: 0.2rem 0.5rem; border-radius: var(--radius-full); }
.badge-blue[b-gjc6w52lqs] { background: #dbeafe; color: #1e40af; }
.badge-pink[b-gjc6w52lqs] { background: #fce7f3; color: #831843; }
.badge-purple[b-gjc6w52lqs] { background: #ede9fe; color: #4c1d95; }
.building-stats[b-gjc6w52lqs] { display: grid; grid-template-columns: repeat(4,1fr); gap: var(--space-2); text-align: center; border-top: 1px solid var(--color-neutral-100); padding-top: var(--space-3); margin-top: var(--space-2); }
.stat-value[b-gjc6w52lqs] { display: block; font-size: var(--text-xl); font-weight: 700; color: var(--color-neutral-900); }
.stat-label[b-gjc6w52lqs] { display: block; font-size: var(--text-xs); color: var(--color-neutral-500); }
.text-success[b-gjc6w52lqs] { color: var(--color-success-600); }
.text-danger[b-gjc6w52lqs]  { color: var(--color-danger-600); }
.card[b-gjc6w52lqs] { background: white; border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); overflow: hidden; }
.card-header[b-gjc6w52lqs] { padding: var(--space-4) var(--space-6); border-bottom: 1px solid var(--color-neutral-100); }
.card-title[b-gjc6w52lqs] { font-size: var(--text-lg); font-weight: 600; color: var(--color-neutral-900); display: flex; align-items: center; gap: var(--space-2); }
.flex-between[b-gjc6w52lqs] { display: flex; align-items: center; justify-content: space-between; }
.count-badge[b-gjc6w52lqs] { background: var(--color-primary-100); color: var(--color-primary-700); border-radius: var(--radius-full); padding: 0.125rem 0.5rem; font-size: var(--text-sm); }
.table-wrapper[b-gjc6w52lqs] { overflow-x: auto; }
.data-table[b-gjc6w52lqs] { width: 100%; border-collapse: collapse; }
.data-table th[b-gjc6w52lqs] { background: var(--color-neutral-50); font-size: var(--text-xs); font-weight: 600; text-transform: uppercase; color: var(--color-neutral-500); padding: var(--space-3) var(--space-4); text-align: left; }
.data-table td[b-gjc6w52lqs] { padding: var(--space-3) var(--space-4); border-top: 1px solid var(--color-neutral-100); font-size: var(--text-sm); vertical-align: middle; }
.data-table tr:hover td[b-gjc6w52lqs] { background: var(--color-neutral-50); }
.font-medium[b-gjc6w52lqs] { font-weight: 500; }
.type-badge[b-gjc6w52lqs] { font-size: var(--text-xs); font-weight: 600; padding: 0.2rem 0.5rem; border-radius: var(--radius-full); }
.type-single[b-gjc6w52lqs] { background: #dbeafe; color: #1e40af; }
.type-double[b-gjc6w52lqs] { background: var(--color-teal-100); color: #134e4a; }
.type-triple[b-gjc6w52lqs] { background: #ede9fe; color: #4c1d95; }
.type-dorm[b-gjc6w52lqs]   { background: #ffedd5; color: #7c2d12; }
.type-other[b-gjc6w52lqs]  { background: var(--color-neutral-100); color: var(--color-neutral-700); }
.status-badge[b-gjc6w52lqs] { font-size: var(--text-xs); font-weight: 600; padding: 0.2rem 0.5rem; border-radius: var(--radius-full); }
.badge-full[b-gjc6w52lqs]    { background: var(--color-danger-100); color: var(--color-danger-700); }
.badge-vacant[b-gjc6w52lqs]  { background: var(--color-success-100); color: var(--color-success-700); }
.badge-partial[b-gjc6w52lqs] { background: var(--color-warning-100); color: var(--color-warning-700); }
.empty-state[b-gjc6w52lqs] { text-align: center; padding: var(--space-16); color: var(--color-neutral-500); }
.empty-state h3[b-gjc6w52lqs] { margin-top: var(--space-4); font-size: var(--text-xl); color: var(--color-neutral-700); }
.empty-state p[b-gjc6w52lqs] { margin-top: var(--space-2); }
.text-5xl[b-gjc6w52lqs] { font-size: 3rem; }
.text-neutral-300[b-gjc6w52lqs] { color: var(--color-neutral-300); }
@media (max-width: 768px) { .rooms-page[b-gjc6w52lqs] { padding: var(--space-4); } .page-header[b-gjc6w52lqs] { flex-direction: column; } .buildings-grid[b-gjc6w52lqs] { grid-template-columns: 1fr; } }

/* ── New: action buttons ──────────────────────────────── */

.mt-4[b-gjc6w52lqs] { margin-top: var(--space-4); }
.mb-4[b-gjc6w52lqs] { margin-bottom: var(--space-4); }
.icon-btn[b-gjc6w52lqs] { background: none; border: 1px solid var(--color-neutral-200); border-radius: var(--radius-md); padding: 0.25rem 0.5rem; cursor: pointer; color: var(--color-neutral-500); transition: color 0.15s, background 0.15s; }
.icon-btn:hover[b-gjc6w52lqs] { background: var(--color-neutral-100); color: var(--color-neutral-800); }
.building-header-right[b-gjc6w52lqs] { display: flex; align-items: center; gap: var(--space-2); flex-shrink: 0; }
.building-address[b-gjc6w52lqs] { font-size: var(--text-xs); color: var(--color-neutral-500); margin: 0.1rem 0 0.5rem; display: flex; align-items: center; gap: 0.3rem; }
.spinner-sm[b-gjc6w52lqs] { width: 1.2rem; height: 1.2rem; border: 2px solid var(--color-neutral-200); border-top-color: var(--color-primary-600); border-radius: 50%; animation: spin-b-gjc6w52lqs 0.8s linear infinite; display: inline-block; }
.alert-success[b-gjc6w52lqs] { background: var(--color-success-50); border: 1px solid var(--color-success-200); border-radius: var(--radius-lg); padding: var(--space-4); color: var(--color-success-800); }

/* ── Modal styles ────────────────────────────────────── */
.modal-overlay[b-gjc6w52lqs] { position: fixed; inset: 0; background: rgba(0,0,0,0.48); z-index: 9000; display: flex; align-items: center; justify-content: center; padding: var(--space-4); }
.modal-box[b-gjc6w52lqs] { background: white; border-radius: var(--radius-xl); width: 100%; max-width: 520px; max-height: 90vh; overflow-y: auto; box-shadow: var(--shadow-xl); display: flex; flex-direction: column; }
.modal-wide[b-gjc6w52lqs] { max-width: 700px; }
.modal-header[b-gjc6w52lqs] { display: flex; align-items: center; justify-content: space-between; padding: var(--space-4) var(--space-6); border-bottom: 1px solid var(--color-neutral-200); }
.modal-header h3[b-gjc6w52lqs] { font-size: var(--text-lg); font-weight: 700; color: var(--color-neutral-900); }
.close-btn[b-gjc6w52lqs] { background: none; border: none; cursor: pointer; padding: var(--space-1); color: var(--color-neutral-500); font-size: 1.1rem; border-radius: var(--radius-md); }
.close-btn:hover[b-gjc6w52lqs] { background: var(--color-neutral-100); color: var(--color-neutral-800); }
.modal-body[b-gjc6w52lqs] { padding: var(--space-6); display: flex; flex-direction: column; gap: var(--space-4); }
.modal-footer[b-gjc6w52lqs] { padding: var(--space-4) var(--space-6); border-top: 1px solid var(--color-neutral-200); display: flex; justify-content: flex-end; gap: var(--space-3); }
.form-group[b-gjc6w52lqs] { display: flex; flex-direction: column; gap: var(--space-1); }
.form-group label[b-gjc6w52lqs] { font-size: var(--text-sm); font-weight: 600; color: var(--color-neutral-700); }
.form-input[b-gjc6w52lqs] { border: 1px solid var(--color-neutral-300); border-radius: var(--radius-md); padding: var(--space-2) var(--space-3); font-size: var(--text-sm); color: var(--color-neutral-900); background: white; width: 100%; box-sizing: border-box; }
.form-input:focus[b-gjc6w52lqs] { outline: none; border-color: var(--color-primary-500); box-shadow: 0 0 0 2px var(--color-primary-100); }
.form-row[b-gjc6w52lqs] { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
.form-row.three-col[b-gjc6w52lqs] { grid-template-columns: 1fr 1fr 1fr; }
.section-label[b-gjc6w52lqs] { font-size: var(--text-xs); font-weight: 700; text-transform: uppercase; color: var(--color-neutral-500); letter-spacing: 0.05em; margin-top: var(--space-1); }
.req[b-gjc6w52lqs] { color: var(--color-danger-600); }
.checkbox-label[b-gjc6w52lqs] { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm); cursor: pointer; }
@media (max-width: 520px) { .form-row[b-gjc6w52lqs] { grid-template-columns: 1fr; } .form-row.three-col[b-gjc6w52lqs] { grid-template-columns: 1fr; } .modal-box[b-gjc6w52lqs] { max-width: 100%; } }
/* /Pages/Principal/Hostel/Students.razor.rz.scp.css */
.students-page[b-xlq2w2josm] {
    min-height: 100vh;
    background: var(--color-neutral-50);
    padding: var(--space-6);
}

.page-header[b-xlq2w2josm] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: var(--space-6);
    flex-wrap: wrap;
    gap: var(--space-4);
}

.page-title[b-xlq2w2josm] { font-size: var(--text-3xl); font-weight: 700; color: var(--color-neutral-900); }
.page-subtitle[b-xlq2w2josm] { color: var(--color-neutral-600); margin-top: var(--space-1); }

.header-actions[b-xlq2w2josm] { display: flex; gap: var(--space-3); flex-wrap: wrap; }

.btn-outline[b-xlq2w2josm] {
    display: inline-flex; align-items: center; gap: var(--space-2);
    border: 1px solid var(--color-neutral-300); color: var(--color-neutral-700);
    padding: var(--space-2) var(--space-4); border-radius: var(--radius-md);
    font-weight: 500; text-decoration: none; cursor: pointer; background: white;
    transition: background 0.15s;
}
.btn-outline:hover[b-xlq2w2josm] { background: var(--color-neutral-50); }

.filter-bar[b-xlq2w2josm] { display: flex; gap: var(--space-3); margin-bottom: var(--space-4); flex-wrap: wrap; }
.filter-select[b-xlq2w2josm] {
    padding: var(--space-2) var(--space-3); border: 1px solid var(--color-neutral-300);
    border-radius: var(--radius-md); background: white; color: var(--color-neutral-800);
    font-size: var(--text-sm);
}

.loading-center[b-xlq2w2josm] { display: flex; flex-direction: column; align-items: center; padding: var(--space-16); gap: var(--space-4); }
.spinner[b-xlq2w2josm] { width: 3rem; height: 3rem; border: 4px solid var(--color-neutral-200); border-top-color: var(--color-primary-600); border-radius: 50%; animation: spin-b-xlq2w2josm 0.8s linear infinite; }
@keyframes spin-b-xlq2w2josm { to { transform: rotate(360deg); } }
.alert-error[b-xlq2w2josm] { background: var(--color-danger-50); border: 1px solid var(--color-danger-200); border-radius: var(--radius-lg); padding: var(--space-4); color: var(--color-danger-800); display: flex; align-items: center; gap: var(--space-2); }

.card[b-xlq2w2josm] { background: white; border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); overflow: hidden; margin-bottom: var(--space-6); }
.card-header[b-xlq2w2josm] { padding: var(--space-4) var(--space-6); border-bottom: 1px solid var(--color-neutral-100); }
.card-title[b-xlq2w2josm] { font-size: var(--text-lg); font-weight: 600; color: var(--color-neutral-900); display: flex; align-items: center; gap: var(--space-2); }
.flex-between[b-xlq2w2josm] { display: flex; align-items: center; justify-content: space-between; }
.count-badge[b-xlq2w2josm] { background: var(--color-primary-100); color: var(--color-primary-700); border-radius: var(--radius-full); padding: 0.125rem 0.5rem; font-size: var(--text-sm); }

.table-wrapper[b-xlq2w2josm] { overflow-x: auto; }
.data-table[b-xlq2w2josm] { width: 100%; border-collapse: collapse; }
.data-table th[b-xlq2w2josm] { background: var(--color-neutral-50); font-size: var(--text-xs); font-weight: 600; text-transform: uppercase; color: var(--color-neutral-500); padding: var(--space-3) var(--space-4); text-align: left; }
.data-table td[b-xlq2w2josm] { padding: var(--space-3) var(--space-4); border-top: 1px solid var(--color-neutral-100); font-size: var(--text-sm); vertical-align: middle; }
.data-table tr:hover td[b-xlq2w2josm] { background: var(--color-neutral-50); }

.student-name[b-xlq2w2josm] { font-weight: 500; color: var(--color-neutral-900); }
.mono-text[b-xlq2w2josm] { font-family: monospace; color: var(--color-neutral-700); }
.text-muted[b-xlq2w2josm] { color: var(--color-neutral-400); font-style: italic; }
.text-danger[b-xlq2w2josm] { color: var(--color-danger-600); }
.bed-label[b-xlq2w2josm] { color: var(--color-neutral-500); font-size: var(--text-xs); }

.type-badge[b-xlq2w2josm] { font-size: var(--text-xs); font-weight: 600; padding: 0.2rem 0.5rem; border-radius: var(--radius-full); }
.type-full[b-xlq2w2josm]    { background: #dbeafe; color: #1e40af; }
.type-weekly[b-xlq2w2josm]  { background: var(--color-teal-100); color: #134e4a; }
.type-day[b-xlq2w2josm]     { background: #ede9fe; color: #4c1d95; }
.type-meal[b-xlq2w2josm]    { background: #ffedd5; color: #7c2d12; }
.type-other[b-xlq2w2josm]   { background: var(--color-neutral-100); color: var(--color-neutral-700); }

.status-badge[b-xlq2w2josm] { font-size: var(--text-xs); font-weight: 600; padding: 0.2rem 0.5rem; border-radius: var(--radius-full); }
.badge-active[b-xlq2w2josm]   { background: var(--color-success-100); color: var(--color-success-700); }
.badge-inactive[b-xlq2w2josm] { background: var(--color-neutral-200); color: var(--color-neutral-500); }

.btn-icon[b-xlq2w2josm] { background: none; border: 1px solid var(--color-neutral-200); padding: 0.375rem 0.5rem; border-radius: var(--radius-md); cursor: pointer; color: var(--color-neutral-600); transition: background 0.15s; margin-right: var(--space-1); }
.btn-icon:hover[b-xlq2w2josm] { background: var(--color-neutral-100); }
.btn-icon-allocate[b-xlq2w2josm] { color: var(--color-success-600); }

.empty-cell[b-xlq2w2josm] { text-align: center; padding: var(--space-8); color: var(--color-neutral-400); font-style: italic; }

.pagination[b-xlq2w2josm] { display: flex; align-items: center; justify-content: center; gap: var(--space-3); padding: var(--space-4); border-top: 1px solid var(--color-neutral-100); }
.page-btn[b-xlq2w2josm] { background: white; border: 1px solid var(--color-neutral-300); padding: var(--space-2) var(--space-3); border-radius: var(--radius-md); cursor: pointer; color: var(--color-neutral-700); }
.page-btn:disabled[b-xlq2w2josm] { opacity: 0.4; cursor: not-allowed; }
.page-info[b-xlq2w2josm] { color: var(--color-neutral-600); font-size: var(--text-sm); }

/* Modal / Detail Panel */
.modal-overlay[b-xlq2w2josm] { position: fixed; inset: 0; background: rgba(0,0,0,0.4); z-index: 50; display: flex; align-items: center; justify-content: center; padding: var(--space-4); }
.detail-panel[b-xlq2w2josm] { background: white; border-radius: var(--radius-xl); box-shadow: var(--shadow-xl); width: 100%; max-width: 28rem; max-height: 90vh; overflow-y: auto; }
.detail-header[b-xlq2w2josm] { display: flex; align-items: center; justify-content: space-between; padding: var(--space-4) var(--space-6); border-bottom: 1px solid var(--color-neutral-100); }
.detail-header h2[b-xlq2w2josm] { font-size: var(--text-xl); font-weight: 700; color: var(--color-neutral-900); }
.close-btn[b-xlq2w2josm] { background: none; border: none; color: var(--color-neutral-500); cursor: pointer; font-size: var(--text-xl); padding: var(--space-1); }
.close-btn:hover[b-xlq2w2josm] { color: var(--color-neutral-800); }
.detail-body[b-xlq2w2josm] { padding: var(--space-4) var(--space-6); display: flex; flex-direction: column; gap: var(--space-3); }
.detail-row[b-xlq2w2josm] { display: flex; justify-content: space-between; padding: var(--space-2) 0; border-bottom: 1px solid var(--color-neutral-50); }
.detail-label[b-xlq2w2josm] { font-weight: 500; color: var(--color-neutral-600); }
.due-row[b-xlq2w2josm] { background: var(--color-danger-50); padding: var(--space-2) var(--space-3); border-radius: var(--radius-md); border: none; }
.detail-footer[b-xlq2w2josm] { padding: var(--space-4) var(--space-6); border-top: 1px solid var(--color-neutral-100); display: flex; justify-content: flex-end; gap: var(--space-3); }

@media (max-width: 768px) {
    .students-page[b-xlq2w2josm] { padding: var(--space-4); }
    .page-header[b-xlq2w2josm] { flex-direction: column; }
}

/* ── Additional icon variants ─────────────────────────────── */
.btn-icon-edit[b-xlq2w2josm]   { color: var(--color-primary-600); }
.btn-icon-danger[b-xlq2w2josm] { color: var(--color-danger-600); }
.actions-cell[b-xlq2w2josm]    { white-space: nowrap; }

/* ── Flash / alert banners ────────────────────────────────── */
.alert-success[b-xlq2w2josm] { background: var(--color-success-50); border: 1px solid var(--color-success-200); border-radius: var(--radius-lg); padding: var(--space-3) var(--space-4); color: var(--color-success-800); margin-top: var(--space-3); }
.alert-error[b-xlq2w2josm]   { background: var(--color-danger-50);  border: 1px solid var(--color-danger-200);  border-radius: var(--radius-lg); padding: var(--space-3) var(--space-4); color: var(--color-danger-800);  margin-top: var(--space-3); }
.alert-warn[b-xlq2w2josm]    { background: var(--color-warning-50); border: 1px solid var(--color-warning-200); border-radius: var(--radius-lg); padding: var(--space-3) var(--space-4); color: var(--color-warning-800); margin-top: var(--space-3); }
.alert-error.small[b-xlq2w2josm] { font-size: var(--text-sm); padding: var(--space-2) var(--space-3); margin-top: var(--space-2); }

/* ── Shared modal shell (smodal pattern) ─────────────────── */
.smodal[b-xlq2w2josm]    { background: white; border-radius: var(--radius-xl); width: 100%; max-width: 560px; max-height: 90vh; overflow-y: auto; box-shadow: var(--shadow-xl); display: flex; flex-direction: column; }
.smodal-sm[b-xlq2w2josm] { max-width: 420px; }
.smodal-header[b-xlq2w2josm] { display: flex; align-items: center; justify-content: space-between; padding: var(--space-4) var(--space-6); border-bottom: 1px solid var(--color-neutral-200); }
.smodal-header h3[b-xlq2w2josm] { font-size: var(--text-lg); font-weight: 700; color: var(--color-neutral-900); margin: 0; }
.smodal-body[b-xlq2w2josm]   { padding: var(--space-6); display: flex; flex-direction: column; gap: var(--space-4); }
.smodal-footer[b-xlq2w2josm] { padding: var(--space-4) var(--space-6); border-top: 1px solid var(--color-neutral-200); display: flex; justify-content: flex-end; gap: var(--space-3); }

/* ── Form helpers inside modals ───────────────────────────── */
.form-group[b-xlq2w2josm]       { display: flex; flex-direction: column; gap: var(--space-1); }
.form-group label[b-xlq2w2josm] { font-size: var(--text-sm); font-weight: 600; color: var(--color-neutral-700); }
.form-input[b-xlq2w2josm]       { border: 1px solid var(--color-neutral-300); border-radius: var(--radius-md); padding: var(--space-2) var(--space-3); font-size: var(--text-sm); color: var(--color-neutral-900); background: white; width: 100%; box-sizing: border-box; }
.form-input:focus[b-xlq2w2josm] { outline: none; border-color: var(--color-primary-500); box-shadow: 0 0 0 2px var(--color-primary-100); }
.form-row[b-xlq2w2josm]         { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
.req[b-xlq2w2josm]              { color: var(--color-danger-600); }
.checkbox-label[b-xlq2w2josm]   { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm); cursor: pointer; }

/* ── Misc helpers ─────────────────────────────────────────── */
.info-note[b-xlq2w2josm]    { background: var(--color-primary-50,#eff6ff); border: 1px solid var(--color-primary-100,#bfdbfe); border-radius: var(--radius-md); padding: var(--space-2) var(--space-3); font-size: var(--text-sm); color: var(--color-primary-800,#1e40af); }
.warn-text[b-xlq2w2josm]    { font-size: var(--text-sm); color: var(--color-warning-700,#b45309); }
.spinner-sm[b-xlq2w2josm]   { width: 1rem; height: 1rem; border: 2px solid var(--color-neutral-200); border-top-color: var(--color-primary-600); border-radius: 50%; animation: spin-b-xlq2w2josm 0.8s linear infinite; display: inline-block; vertical-align: middle; }
.loading-center[b-xlq2w2josm] { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-3); padding: var(--space-8); color: var(--color-neutral-500); }
.spinner[b-xlq2w2josm]      { width: 2rem; height: 2rem; border: 3px solid var(--color-neutral-200); border-top-color: var(--color-primary-600); border-radius: 50%; animation: spin-b-xlq2w2josm 0.8s linear infinite; }
@keyframes spin-b-xlq2w2josm { to { transform: rotate(360deg); } }
@media (max-width: 520px) { .form-row[b-xlq2w2josm] { grid-template-columns: 1fr; } .smodal[b-xlq2w2josm] { max-width: 100%; } }
/* /Pages/Principal/Integrations/Index.razor.rz.scp.css */
.page-header[b-5iq9v2qiue] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 1.5rem;
}

.page-title[b-5iq9v2qiue] {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--color-neutral-900);
}

.page-subtitle[b-5iq9v2qiue] {
    font-size: 0.875rem;
    color: var(--color-neutral-500);
    margin-top: 0.25rem;
}

/* Tab navigation */
.tab-nav[b-5iq9v2qiue] {
    margin-bottom: 1.5rem;
    border-bottom: 1px solid var(--color-neutral-200);
}

.tab-list[b-5iq9v2qiue] {
    display: flex;
    gap: 0;
    overflow-x: auto;
}

.tab-btn[b-5iq9v2qiue] {
    padding: 0.75rem 1rem;
    font-size: 0.875rem;
    font-weight: 500;
    white-space: nowrap;
    border-bottom: 2px solid transparent;
    transition: color 0.2s, border-color 0.2s;
    background: none;
    border-top: none;
    border-left: none;
    border-right: none;
    cursor: pointer;
}

.tab-btn--active[b-5iq9v2qiue] {
    border-bottom-color: var(--color-primary);
    color: var(--color-primary);
    background: color-mix(in srgb, var(--color-primary) 5%, transparent);
}

.tab-btn--idle[b-5iq9v2qiue] {
    color: var(--color-neutral-500);
}

.tab-btn--idle:hover[b-5iq9v2qiue] {
    color: var(--color-neutral-700);
    border-bottom-color: var(--color-neutral-300);
}

/* Loading state */
.loading-state[b-5iq9v2qiue] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4rem 0;
}
/* /Pages/Principal/MicroChapterProgress/Index.razor.rz.scp.css */
/* ── Micro Chapter Progress (Principal) ──────────────────────────── */

.mcp-page[b-316rzy97tj] {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    padding: 1rem 0;
}

/* Filter card */
.filter-card[b-316rzy97tj] {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 1rem 1.25rem;
}

/* Summary table card */
.summary-table-card[b-316rzy97tj] {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 1rem 1.25rem;
}

.section-title[b-316rzy97tj] {
    font-size: 1rem;
    font-weight: 600;
    color: #1e293b;
    margin: 0 0 0.75rem;
}

/* Table */
.table-responsive[b-316rzy97tj] {
    overflow-x: auto;
}

.mcp-table[b-316rzy97tj] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
}

.mcp-table th[b-316rzy97tj] {
    text-align: left;
    padding: 0.6rem 0.75rem;
    border-bottom: 2px solid #e2e8f0;
    color: #64748b;
    font-weight: 600;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    white-space: nowrap;
}

.mcp-table td[b-316rzy97tj] {
    padding: 0.6rem 0.75rem;
    border-bottom: 1px solid #f1f5f9;
    color: #334155;
}

.mcp-row[b-316rzy97tj] {
    cursor: pointer;
    transition: background 0.15s;
}

.mcp-row:hover[b-316rzy97tj] {
    background: #f8fafc;
}

.mcp-row.has-overdue td[b-316rzy97tj] {
    /* subtle red tint on rows with overdue items */
}

.mcp-row.has-overdue .overdue-cell[b-316rzy97tj] {
    color: #dc2626;
    font-weight: 700;
}

/* Coverage bar */
.coverage-wrap[b-316rzy97tj] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 110px;
}

.coverage-bar[b-316rzy97tj] {
    flex: 1;
    height: 8px;
    background: #e2e8f0;
    border-radius: 4px;
    overflow: hidden;
}

.coverage-fill[b-316rzy97tj] {
    height: 100%;
    border-radius: 4px;
    transition: width 0.3s ease;
}

.coverage-fill.good[b-316rzy97tj] {
    background: #10b981;
}

.coverage-fill.medium[b-316rzy97tj] {
    background: #f59e0b;
}

.coverage-fill.low[b-316rzy97tj] {
    background: #ef4444;
}

.coverage-label[b-316rzy97tj] {
    font-size: 0.75rem;
    font-weight: 600;
    color: #475569;
    min-width: 32px;
    text-align: right;
}

/* Drill link */
.drill-link[b-316rzy97tj] {
    font-size: 0.8rem;
    color: #0d9488;
    font-weight: 600;
}

/* Empty state */
.empty-state[b-316rzy97tj] {
    text-align: center;
    padding: 2.5rem 1rem;
    color: #94a3b8;
    font-size: 0.9rem;
}

/* ── Drill-down panel ────────────────────────────────────────────── */
.drilldown-card[b-316rzy97tj] {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 1rem 1.25rem;
    border-left: 4px solid #0d9488;
}

.drilldown-header[b-316rzy97tj] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 1rem;
    gap: 1rem;
}

.drilldown-header h3[b-316rzy97tj] {
    font-size: 1rem;
    font-weight: 600;
    color: #1e293b;
    margin: 0;
}

.drilldown-subtitle[b-316rzy97tj] {
    font-size: 0.8rem;
    color: #64748b;
    margin: 0.25rem 0 0;
}

/* Status pills */
.status-pill[b-316rzy97tj] {
    display: inline-block;
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: capitalize;
}

.status-completed[b-316rzy97tj] {
    background: #d1fae5;
    color: #065f46;
}

.status-overdue[b-316rzy97tj] {
    background: #fee2e2;
    color: #991b1b;
}

.status-scheduled[b-316rzy97tj] {
    background: #dbeafe;
    color: #1e40af;
}

.status-notstarted[b-316rzy97tj] {
    background: #f1f5f9;
    color: #64748b;
}

/* Overdue row highlight */
.overdue-row[b-316rzy97tj] {
    background: #fef2f2;
}

.overdue-row td[b-316rzy97tj] {
    border-bottom-color: #fecaca;
}

/* Notes cell */
.notes-cell[b-316rzy97tj] {
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.8rem;
    color: #64748b;
}

/* Buttons */
.btn[b-316rzy97tj] {
    padding: 0.4rem 0.9rem;
    border-radius: 6px;
    font-size: 0.8rem;
    font-weight: 600;
    border: none;
    cursor: pointer;
    transition: background 0.15s;
}

.btn-sm[b-316rzy97tj] {
    padding: 0.3rem 0.7rem;
    font-size: 0.75rem;
}

.btn-secondary[b-316rzy97tj] {
    background: #f1f5f9;
    color: #475569;
}

.btn-secondary:hover[b-316rzy97tj] {
    background: #e2e8f0;
}

/* Loading */
.loading-container[b-316rzy97tj] {
    text-align: center;
    padding: 2rem;
    color: #64748b;
}

.spinner[b-316rzy97tj] {
    width: 2rem;
    height: 2rem;
    border: 3px solid #e2e8f0;
    border-top-color: #0d9488;
    border-radius: 50%;
    animation: spin-b-316rzy97tj 0.8s linear infinite;
    margin: 0 auto 0.75rem;
}

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

/* Alert */
.alert[b-316rzy97tj] {
    padding: 0.75rem 1rem;
    border-radius: 8px;
    font-size: 0.875rem;
}

.alert-danger[b-316rzy97tj] {
    background: #fee2e2;
    color: #991b1b;
    border: 1px solid #fecaca;
}

/* ── Responsive ──────────────────────────────────────────────────── */
@media (max-width: 768px) {
    .mcp-page[b-316rzy97tj] {
        padding: 0.5rem 0;
        gap: 0.75rem;
    }

    .summary-table-card[b-316rzy97tj],
    .drilldown-card[b-316rzy97tj],
    .filter-card[b-316rzy97tj] {
        padding: 0.75rem;
    }

    .mcp-table[b-316rzy97tj] {
        font-size: 0.8rem;
    }

    .mcp-table th[b-316rzy97tj],
    .mcp-table td[b-316rzy97tj] {
        padding: 0.5rem 0.5rem;
    }

    .coverage-wrap[b-316rzy97tj] {
        min-width: 80px;
    }

    .drilldown-header[b-316rzy97tj] {
        flex-direction: column;
    }
}
/* /Pages/Principal/Notifications/Dashboard.razor.rz.scp.css */
.dashboard[b-lbwsnbqk9l] { max-width: var(--grid-max-width); margin: 0 auto; padding: var(--spacing-6) var(--spacing-4); color: var(--color-neutral-900); }
.page-header[b-lbwsnbqk9l] { display: flex; flex-direction: column; gap: var(--spacing-4); margin-bottom: var(--spacing-7); }
.page-header h1[b-lbwsnbqk9l] { margin: 0; font-size: var(--font-size-2xl); }
.page-header p[b-lbwsnbqk9l] { margin: var(--spacing-2) 0 0; color: var(--color-neutral-600); }
.page-header .eyebrow[b-lbwsnbqk9l] { color: var(--color-teal-700); font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); }
select[b-lbwsnbqk9l], button[b-lbwsnbqk9l] { min-height: var(--spacing-10); border-radius: var(--radius-sm); }
select[b-lbwsnbqk9l] { border: var(--spacing-1) solid var(--color-neutral-300); background: var(--color-neutral-0); padding: 0 var(--spacing-4); }
.metrics[b-lbwsnbqk9l] { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--spacing-3); margin-bottom: var(--spacing-6); }
.metrics article[b-lbwsnbqk9l], .panel[b-lbwsnbqk9l] { background: var(--color-neutral-0); border: var(--spacing-1) solid var(--color-neutral-200); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); }
.metrics article[b-lbwsnbqk9l] { padding: var(--spacing-5); display: grid; gap: var(--spacing-2); }
.metrics span[b-lbwsnbqk9l] { color: var(--color-neutral-600); font-size: var(--font-size-sm); }
.metrics strong[b-lbwsnbqk9l] { font-size: var(--font-size-xl); }
.metrics .failed strong[b-lbwsnbqk9l] { color: var(--color-error-600); }
.breakdowns[b-lbwsnbqk9l] { display: grid; gap: var(--spacing-6); margin-bottom: var(--spacing-6); }
.panel[b-lbwsnbqk9l] { padding: var(--spacing-5); }
.panel h2[b-lbwsnbqk9l] { margin: 0 0 var(--spacing-5); font-size: var(--font-size-lg); }
.breakdown-row[b-lbwsnbqk9l] { width: 100%; display: grid; grid-template-columns: 1fr auto; text-align: left; border: 0; border-top: var(--spacing-1) solid var(--color-neutral-100); background: transparent; padding: var(--spacing-3) 0; color: inherit; cursor: pointer; }
.breakdown-row span[b-lbwsnbqk9l] { text-transform: capitalize; }.breakdown-row small[b-lbwsnbqk9l] { grid-column: 1 / -1; color: var(--color-neutral-500); }
.day-row[b-lbwsnbqk9l] { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--spacing-3); min-height: var(--spacing-8); font-size: var(--font-size-sm); }
.bar[b-lbwsnbqk9l] { height: var(--spacing-3); border-radius: var(--radius-sm); overflow: hidden; background: var(--color-neutral-100); }.bar i[b-lbwsnbqk9l] { display: block; height: 100%; background: var(--color-teal-500); }
.recent-header[b-lbwsnbqk9l] { display: flex; justify-content: space-between; align-items: center; gap: var(--spacing-3); }.recent-header button[b-lbwsnbqk9l] { border: 0; background: transparent; color: var(--color-teal-700); cursor: pointer; }
.table-wrap[b-lbwsnbqk9l] { overflow-x: auto; }table[b-lbwsnbqk9l] { width: 100%; border-collapse: collapse; }th[b-lbwsnbqk9l], td[b-lbwsnbqk9l] { padding: var(--spacing-4); border-top: var(--spacing-1) solid var(--color-neutral-100); text-align: left; font-size: var(--font-size-sm); }th[b-lbwsnbqk9l] { color: var(--color-neutral-600); }
.status[b-lbwsnbqk9l] { display: inline-block; padding: var(--spacing-2) var(--spacing-3); border-radius: var(--radius-sm); background: var(--color-neutral-100); }.status-failed[b-lbwsnbqk9l] { color: var(--color-error-700); background: var(--color-error-50); }.status-sent[b-lbwsnbqk9l], .status-delivered[b-lbwsnbqk9l], .status-read[b-lbwsnbqk9l] { color: var(--color-success-700); background: var(--color-success-50); }
.loading[b-lbwsnbqk9l], .empty[b-lbwsnbqk9l] { text-align: center; padding: var(--spacing-12); color: var(--color-neutral-600); }
@media (min-width: 768px) { .dashboard[b-lbwsnbqk9l] { padding: var(--spacing-8); }.page-header[b-lbwsnbqk9l] { flex-direction: row; justify-content: space-between; align-items: center; }.metrics[b-lbwsnbqk9l] { grid-template-columns: repeat(5, minmax(0, 1fr)); }.breakdowns[b-lbwsnbqk9l] { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 767px) { table[b-lbwsnbqk9l], tbody[b-lbwsnbqk9l], tr[b-lbwsnbqk9l], td[b-lbwsnbqk9l] { display: block; }thead[b-lbwsnbqk9l] { display: none; }tr[b-lbwsnbqk9l] { padding: var(--spacing-3) 0; border-top: var(--spacing-1) solid var(--color-neutral-100); }td[b-lbwsnbqk9l] { display: grid; grid-template-columns: var(--spacing-20) 1fr; border: 0; padding: var(--spacing-2) 0; overflow-wrap: anywhere; }td[b-lbwsnbqk9l]::before { content: attr(data-label); color: var(--color-neutral-500); } }
/* /Pages/Principal/Notifications/OutboxMonitor.razor.rz.scp.css */
.outbox-header[b-5fjtpddq9i] {
    margin-bottom: var(--spacing-6);
}

.page-title[b-5fjtpddq9i] {
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-semibold);
    color: var(--color-neutral-900);
    margin: 0 0 var(--spacing-1) 0;
}

.page-subtitle[b-5fjtpddq9i] {
    color: var(--color-neutral-500);
    margin: 0;
    font-size: var(--font-size-sm);
}

/* ── Stats row ─────────────────────────────────────────────────────────────── */
.stats-row[b-5fjtpddq9i] {
    display: flex;
    gap: var(--spacing-4);
    margin-bottom: var(--spacing-6);
    flex-wrap: wrap;
}

.stat-card[b-5fjtpddq9i] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-4) var(--spacing-6);
    border-radius: var(--radius-lg);
    min-width: 120px;
    background: var(--color-neutral-50);
    border: 1px solid var(--color-neutral-200);
}

.stat-card.pending[b-5fjtpddq9i]  { border-left: 4px solid var(--color-warning-500); }
.stat-card.sent[b-5fjtpddq9i]     { border-left: 4px solid var(--color-success-500); }
.stat-card.failed[b-5fjtpddq9i]   { border-left: 4px solid var(--color-error-500);   }
.stat-card.info[b-5fjtpddq9i]     { border-left: 4px solid var(--color-primary-500); }
.stat-card.warning[b-5fjtpddq9i]  { border-left: 4px solid var(--color-warning-600); }

.stat-value[b-5fjtpddq9i] {
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-neutral-900);
}

.stat-label[b-5fjtpddq9i] {
    font-size: var(--font-size-xs);
    color: var(--color-neutral-500);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-top: var(--spacing-1);
}

/* ── Filter bar ─────────────────────────────────────────────────────────────── */
.filter-bar[b-5fjtpddq9i] {
    display: flex;
    gap: var(--spacing-3);
    align-items: center;
    margin-bottom: var(--spacing-5);
    flex-wrap: wrap;
}

.filter-select[b-5fjtpddq9i] {
    padding: var(--spacing-2) var(--spacing-3);
    border: 1px solid var(--color-neutral-300);
    border-radius: var(--radius-md);
    font-size: var(--font-size-sm);
    background: var(--color-white);
    color: var(--color-neutral-700);
    min-width: 160px;
}

/* ── Status badges ─────────────────────────────────────────────────────────── */
.status-badge[b-5fjtpddq9i] {
    display: inline-block;
    padding: 2px var(--spacing-2);
    border-radius: var(--radius-full);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
}

.status-pending[b-5fjtpddq9i]   { background: var(--color-warning-100); color: var(--color-warning-700); }
.status-sent[b-5fjtpddq9i]      { background: var(--color-success-100); color: var(--color-success-700); }
.status-failed[b-5fjtpddq9i]    { background: var(--color-error-100);   color: var(--color-error-700);   }
.status-cancelled[b-5fjtpddq9i] { background: var(--color-neutral-100); color: var(--color-neutral-600); }

.type-badge[b-5fjtpddq9i] {
    display: inline-block;
    padding: 2px var(--spacing-2);
    border-radius: var(--radius-sm);
    font-size: var(--font-size-xs);
    background: var(--color-primary-50);
    color: var(--color-primary-700);
    white-space: nowrap;
}

/* ── Table ─────────────────────────────────────────────────────────────────── */
.table-container[b-5fjtpddq9i] {
    overflow-x: auto;
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-neutral-200);
    margin-bottom: var(--spacing-4);
}

.data-table[b-5fjtpddq9i] {
    width: 100%;
    border-collapse: collapse;
    background: var(--color-white);
    font-size: var(--font-size-sm);
}

.data-table th[b-5fjtpddq9i] {
    padding: var(--spacing-3) var(--spacing-4);
    background: var(--color-neutral-50);
    text-align: left;
    font-weight: var(--font-weight-semibold);
    color: var(--color-neutral-600);
    border-bottom: 1px solid var(--color-neutral-200);
    white-space: nowrap;
}

.data-table td[b-5fjtpddq9i] {
    padding: var(--spacing-3) var(--spacing-4);
    border-bottom: 1px solid var(--color-neutral-100);
    color: var(--color-neutral-800);
    vertical-align: middle;
}

.data-table tr:last-child td[b-5fjtpddq9i] { border-bottom: none; }
.data-table tr:hover td[b-5fjtpddq9i]      { background: var(--color-neutral-50); }

.date-cell[b-5fjtpddq9i]    { white-space: nowrap; color: var(--color-neutral-500); }
.center-cell[b-5fjtpddq9i]  { text-align: center; }
.preview-cell[b-5fjtpddq9i] { max-width: 280px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--color-neutral-500); }

.actions-cell[b-5fjtpddq9i] { display: flex; gap: var(--spacing-2); align-items: center; }

/* ── Buttons ─────────────────────────────────────────────────────────────────  */
.btn-xs[b-5fjtpddq9i] {
    padding: 2px var(--spacing-2);
    font-size: var(--font-size-xs);
    border-radius: var(--radius-sm);
    border: none;
    cursor: pointer;
    font-weight: var(--font-weight-medium);
}

.btn-xs.btn-primary[b-5fjtpddq9i] { background: var(--color-primary-600); color: var(--color-white); }
.btn-xs.btn-ghost[b-5fjtpddq9i]   { background: transparent; color: var(--color-neutral-500); border: 1px solid var(--color-neutral-300); }

/* ── Pagination ────────────────────────────────────────────────────────────── */
.pagination[b-5fjtpddq9i] {
    display: flex;
    gap: var(--spacing-3);
    align-items: center;
    justify-content: flex-end;
    margin-top: var(--spacing-4);
}

.page-info[b-5fjtpddq9i] { font-size: var(--font-size-sm); color: var(--color-neutral-500); }

/* ── Misc ──────────────────────────────────────────────────────────────────── */
.loading-spinner[b-5fjtpddq9i] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-16);
    gap: var(--spacing-4);
    color: var(--color-neutral-500);
}

.spinner[b-5fjtpddq9i] {
    width: 32px;
    height: 32px;
    border: 3px solid var(--color-neutral-200);
    border-top-color: var(--color-primary-600);
    border-radius: 50%;
    animation: spin-b-5fjtpddq9i 0.8s linear infinite;
}

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

.empty-state[b-5fjtpddq9i] {
    text-align: center;
    padding: var(--spacing-12) var(--spacing-6);
    color: var(--color-neutral-400);
    font-size: var(--font-size-sm);
}

.alert-error[b-5fjtpddq9i] {
    background: var(--color-error-50);
    color: var(--color-error-700);
    border: 1px solid var(--color-error-200);
    border-radius: var(--radius-md);
    padding: var(--spacing-3) var(--spacing-4);
    margin-bottom: var(--spacing-4);
    font-size: var(--font-size-sm);
}

/* ── Error modal ─────────────────────────────────────────────────────────────  */
.modal-overlay[b-5fjtpddq9i] {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 999;
}

.modal-box[b-5fjtpddq9i] {
    background: var(--color-white);
    border-radius: var(--radius-lg);
    padding: var(--spacing-6);
    max-width: 600px;
    width: 90%;
    box-shadow: var(--shadow-xl);
}

.modal-box h3[b-5fjtpddq9i] {
    margin: 0 0 var(--spacing-4) 0;
    font-size: var(--font-size-lg);
    color: var(--color-neutral-900);
}

.error-pre[b-5fjtpddq9i] {
    background: var(--color-neutral-50);
    border: 1px solid var(--color-neutral-200);
    border-radius: var(--radius-md);
    padding: var(--spacing-4);
    font-size: var(--font-size-xs);
    overflow-x: auto;
    white-space: pre-wrap;
    word-break: break-all;
    margin-bottom: var(--spacing-4);
    color: var(--color-error-700);
    max-height: 300px;
    overflow-y: auto;
}

@media (max-width: 768px) {
    .stats-row[b-5fjtpddq9i] { gap: var(--spacing-3); }
    .stat-card[b-5fjtpddq9i] { min-width: 90px; padding: var(--spacing-3) var(--spacing-4); }
    .filter-bar[b-5fjtpddq9i] { flex-direction: column; align-items: stretch; }
    .filter-select[b-5fjtpddq9i] { min-width: unset; width: 100%; }
    .data-table th:nth-child(5)[b-5fjtpddq9i],
    .data-table td:nth-child(5)[b-5fjtpddq9i] { display: none; }
}
/* /Pages/Principal/Notifications/Settings.razor.rz.scp.css */
.notification-settings[b-8mqdmcdqjc] {
    max-width: var(--grid-max-width);
    margin: 0 auto;
    padding: var(--spacing-6) var(--spacing-4);
}

.page-header[b-8mqdmcdqjc] {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-4);
    margin-bottom: var(--spacing-8);
}

.eyebrow[b-8mqdmcdqjc] {
    color: var(--color-teal-600);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    margin: 0 0 var(--spacing-2);
}

h1[b-8mqdmcdqjc] { color: var(--color-neutral-900); font-size: var(--font-size-2xl); margin: 0; }
.subtitle[b-8mqdmcdqjc], .panel-heading p[b-8mqdmcdqjc] { color: var(--color-neutral-600); margin: var(--spacing-2) 0 0; }

.save-button[b-8mqdmcdqjc], .add-button[b-8mqdmcdqjc], .offset-row button[b-8mqdmcdqjc] {
    min-height: var(--spacing-10);
    border-radius: var(--radius-sm);
    cursor: pointer;
}

.save-button[b-8mqdmcdqjc] {
    align-self: stretch;
    border: 0;
    background: var(--color-orange-500);
    color: var(--color-neutral-900);
    font-weight: var(--font-weight-semibold);
    padding: 0 var(--spacing-6);
}

.save-button:disabled[b-8mqdmcdqjc] { cursor: not-allowed; opacity: var(--opacity-60); }

.settings-grid[b-8mqdmcdqjc] { display: grid; gap: var(--spacing-6); }

.setting-panel[b-8mqdmcdqjc] {
    background: var(--color-neutral-0);
    border: var(--spacing-1) solid var(--color-neutral-200);
    border-radius: var(--radius-md);
    padding: var(--spacing-6);
    box-shadow: var(--shadow-sm);
}

.panel-heading[b-8mqdmcdqjc] { display: flex; align-items: flex-start; gap: var(--spacing-4); margin-bottom: var(--spacing-6); }
.panel-heading h2[b-8mqdmcdqjc] { color: var(--color-neutral-900); font-size: var(--font-size-lg); margin: 0; }

.panel-icon[b-8mqdmcdqjc] {
    display: grid;
    place-items: center;
    width: var(--spacing-10);
    height: var(--spacing-10);
    flex: 0 0 var(--spacing-10);
    border-radius: var(--radius-sm);
    color: var(--color-teal-700);
    background: var(--color-teal-50);
}

.panel-icon.warning[b-8mqdmcdqjc] { color: var(--color-orange-700); background: var(--color-orange-50); }
.offset-list[b-8mqdmcdqjc] { display: grid; gap: var(--spacing-3); }

.offset-row[b-8mqdmcdqjc] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto var(--spacing-10);
    align-items: center;
    gap: var(--spacing-3);
}

.offset-row input[b-8mqdmcdqjc] {
    width: 100%;
    min-height: var(--spacing-10);
    border: var(--spacing-1) solid var(--color-neutral-300);
    border-radius: var(--radius-sm);
    color: var(--color-neutral-900);
    padding: 0 var(--spacing-4);
}

.offset-row span[b-8mqdmcdqjc] { color: var(--color-neutral-600); font-size: var(--font-size-sm); }
.offset-row button[b-8mqdmcdqjc] { border: 0; color: var(--color-error-600); background: transparent; }
.threshold-row[b-8mqdmcdqjc] { display: flex; align-items: center; gap: var(--spacing-3); }
.threshold-row input[b-8mqdmcdqjc] {
    width: 100%;
    min-height: var(--spacing-10);
    border: var(--spacing-1) solid var(--color-neutral-300);
    border-radius: var(--radius-sm);
    color: var(--color-neutral-900);
    padding: 0 var(--spacing-4);
}
.threshold-row span[b-8mqdmcdqjc] { color: var(--color-neutral-600); font-weight: var(--font-weight-semibold); }
.add-button[b-8mqdmcdqjc] { margin-top: var(--spacing-4); border: var(--spacing-1) solid var(--color-teal-500); background: transparent; color: var(--color-teal-700); padding: 0 var(--spacing-4); }
.loading[b-8mqdmcdqjc] { display: flex; justify-content: center; gap: var(--spacing-3); color: var(--color-neutral-600); padding: var(--spacing-12); }

.template-editor[b-8mqdmcdqjc] {
    margin-top: var(--spacing-6);
    background: var(--color-neutral-0);
    border: var(--spacing-1) solid var(--color-neutral-200);
    border-radius: var(--radius-md);
    padding: var(--spacing-6);
    box-shadow: var(--shadow-sm);
}

.template-fields[b-8mqdmcdqjc] { display: grid; gap: var(--spacing-4); }
.template-fields label[b-8mqdmcdqjc] { display: grid; gap: var(--spacing-2); color: var(--color-neutral-700); font-weight: var(--font-weight-semibold); }
.template-fields input[b-8mqdmcdqjc], .template-fields select[b-8mqdmcdqjc], .template-fields textarea[b-8mqdmcdqjc] {
    width: 100%;
    min-height: var(--spacing-10);
    border: var(--spacing-1) solid var(--color-neutral-300);
    border-radius: var(--radius-sm);
    color: var(--color-neutral-900);
    background: var(--color-neutral-0);
    padding: var(--spacing-3) var(--spacing-4);
    font: inherit;
}
.template-fields textarea[b-8mqdmcdqjc] { resize: vertical; }
.placeholder-note[b-8mqdmcdqjc], .empty-state[b-8mqdmcdqjc] { color: var(--color-neutral-600); font-size: var(--font-size-sm); margin: 0; }
.template-actions[b-8mqdmcdqjc] { display: flex; flex-direction: column; gap: var(--spacing-3); }
.reset-button[b-8mqdmcdqjc] { min-height: var(--spacing-10); border: var(--spacing-1) solid var(--color-neutral-300); border-radius: var(--radius-sm); background: var(--color-neutral-0); color: var(--color-neutral-700); padding: 0 var(--spacing-4); cursor: pointer; }
.reset-button:disabled[b-8mqdmcdqjc] { cursor: not-allowed; opacity: var(--opacity-60); }

@media (min-width: 768px) {
    .notification-settings[b-8mqdmcdqjc] { padding: var(--spacing-8); }
    .page-header[b-8mqdmcdqjc] { flex-direction: row; align-items: center; justify-content: space-between; }
    .save-button[b-8mqdmcdqjc] { align-self: auto; }
    .settings-grid[b-8mqdmcdqjc] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .template-actions[b-8mqdmcdqjc] { flex-direction: row; }
}
/* /Pages/Principal/ParentAccounts/Index.razor.rz.scp.css */
.bulk-action-bar[b-pwm7demyji] {
    align-items: center;
    background: var(--color-primary-50);
    border: 1px solid var(--color-primary-200);
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-3);
    margin-bottom: var(--spacing-4);
    padding: var(--spacing-4);
}

.bulk-action-button[b-pwm7demyji],
.bulk-action-clear[b-pwm7demyji] {
    min-height: 2.75rem;
    padding: 0 var(--spacing-4);
}

.bulk-action-button[b-pwm7demyji] {
    background: var(--color-primary-600);
    color: var(--color-white);
}

.bulk-action-whatsapp[b-pwm7demyji] {
    background: var(--color-success-600);
}

.bulk-action-clear[b-pwm7demyji] {
    margin-left: auto;
}

.parent-card-list[b-pwm7demyji] {
    background: var(--color-gray-50);
    padding: var(--spacing-4);
}

.parent-card[b-pwm7demyji] {
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    margin-bottom: var(--spacing-4);
    padding: var(--spacing-4);
}

.parent-card-heading[b-pwm7demyji] {
    align-items: flex-start;
    display: grid;
    gap: var(--spacing-3);
    grid-template-columns: auto 1fr auto;
}

.parent-card-heading h2[b-pwm7demyji] {
    color: var(--color-gray-900);
    font-size: 0.95rem;
    font-weight: 700;
}

.parent-card-heading p[b-pwm7demyji],
.parent-card-details p[b-pwm7demyji] {
    color: var(--color-gray-500);
    font-size: 0.75rem;
}

.parent-card-details[b-pwm7demyji] {
    display: grid;
    gap: var(--spacing-2);
    margin: var(--spacing-4) 0;
}

.parent-card-details i[b-pwm7demyji] {
    color: var(--color-primary-600);
    width: 1rem;
}

.parent-card-actions[b-pwm7demyji] {
    display: grid;
    gap: var(--spacing-3);
    grid-template-columns: repeat(3, 1fr);
}

.parent-card-actions button[b-pwm7demyji] {
    align-items: center;
    border: 1px solid var(--color-border);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-2);
    justify-content: center;
    min-height: 3.25rem;
}

.parent-card-actions button:disabled[b-pwm7demyji] {
    opacity: 0.4;
}

.whatsapp-preview[b-pwm7demyji] {
    background: var(--color-white);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-xl);
    max-width: 28rem;
    padding: var(--spacing-5);
    position: relative;
    width: 100%;
}

.whatsapp-preview h3[b-pwm7demyji] {
    color: var(--color-gray-900);
    font-weight: 700;
    margin-bottom: var(--spacing-4);
}

.whatsapp-message[b-pwm7demyji] {
    background: var(--color-success-50);
    border-radius: var(--radius-md);
    color: var(--color-gray-700);
    padding: var(--spacing-4);
    white-space: pre-wrap;
}

.whatsapp-preview-actions[b-pwm7demyji] {
    display: flex;
    gap: var(--spacing-3);
    justify-content: flex-end;
    margin-top: var(--spacing-5);
}

@media (max-width: 767px) {
    .bulk-action-clear[b-pwm7demyji] {
        margin-left: 0;
    }

    .bulk-action-bar > *[b-pwm7demyji] {
        flex: 1 1 auto;
    }
}
/* /Pages/Principal/ParentAccounts/StatCard.razor.rz.scp.css */
.stat-card[b-ebtchmfk0n] {
    min-height: 5.5rem;
    transition: transform 150ms ease, box-shadow 150ms ease;
    width: 100%;
}

.stat-card:hover[b-ebtchmfk0n],
.stat-card:focus-visible[b-ebtchmfk0n] {
    box-shadow: var(--shadow-md);
    transform: translateY(-1px);
}
/* /Pages/Principal/Payroll/Approvals.razor.rz.scp.css */
/* Payroll approval styles are owned by Components/Approvals/PayrollApprovalsView.razor.css. *//* ── KPI Cards (pending run) ───────────────────────────────── */
[b-d9ec8wuoqi] .papr-kpi-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin-bottom: 20px;
}
@media (max-width: 640px) {
    [b-d9ec8wuoqi] .papr-kpi-grid { grid-template-columns: repeat(2, 1fr); }
}
[b-d9ec8wuoqi] .papr-kpi-card {
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    padding: 14px 16px;
    text-align: center;
}
[b-d9ec8wuoqi] .papr-kpi-card-red  { background: #fff5f5; border-color: #fecaca; }
[b-d9ec8wuoqi] .papr-kpi-card-green { background: #f0fdf4; border-color: #bbf7d0; }

[b-d9ec8wuoqi] .papr-kpi-label {
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #6b7280;
    margin-bottom: 6px;
}
[b-d9ec8wuoqi] .papr-kpi-value {
    font-size: 1.35rem;
    font-weight: 800;
    color: #111827;
    font-variant-numeric: tabular-nums;
    line-height: 1.1;
}
[b-d9ec8wuoqi] .papr-kpi-red   { color: #dc2626; }
[b-d9ec8wuoqi] .papr-kpi-green { color: #059669; }
[b-d9ec8wuoqi] .papr-kpi-sub {
    font-size: 0.68rem;
    color: #9ca3af;
    margin-top: 3px;
}

/* ── Audit Timeline ─────────────────────────────────────────── */
[b-d9ec8wuoqi] .papr-timeline {
    display: flex;
    align-items: center;
    gap: 0;
    padding: 12px 0;
    overflow-x: auto;
    scrollbar-width: none;
}
[b-d9ec8wuoqi] .papr-timeline::-webkit-scrollbar { display: none; }

[b-d9ec8wuoqi] .papr-step {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

[b-d9ec8wuoqi] .papr-dot {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    flex-shrink: 0;
    border: 2px solid transparent;
}
[b-d9ec8wuoqi] .papr-dot-green  { background: #d1fae5; color: #059669; border-color: #6ee7b7; }
[b-d9ec8wuoqi] .papr-dot-amber  { background: #fef3c7; color: #d97706; border-color: #fcd34d; box-shadow: 0 0 0 3px rgba(217,119,6,0.15); }
[b-d9ec8wuoqi] .papr-dot-red    { background: #fee2e2; color: #dc2626; border-color: #fca5a5; }
[b-d9ec8wuoqi] .papr-dot-gray   { background: #f3f4f6; color: #d1d5db; border-color: #e5e7eb; }

[b-d9ec8wuoqi] .papr-step-text { min-width: 110px; }
[b-d9ec8wuoqi] .papr-step-label { font-size: 0.75rem; font-weight: 700; color: #374151; line-height: 1.2; white-space: nowrap; }
[b-d9ec8wuoqi] .papr-step-sub   { font-size: 0.68rem; color: #9ca3af; margin-top: 2px; white-space: nowrap; }

[b-d9ec8wuoqi] .papr-step-active .papr-dot-amber { animation: papr-pulse-b-d9ec8wuoqi 2s ease-in-out infinite; }
[b-d9ec8wuoqi] .papr-step-active .papr-step-label { color: #d97706; }
[b-d9ec8wuoqi] .papr-step-dim   .papr-step-label  { color: #d1d5db; }
[b-d9ec8wuoqi] .papr-step-dim   .papr-step-sub    { color: #e5e7eb; }

@keyframes papr-pulse-b-d9ec8wuoqi {
    0%, 100% { box-shadow: 0 0 0 3px rgba(217,119,6,0.15); }
    50%       { box-shadow: 0 0 0 6px rgba(217,119,6,0.08); }
}

[b-d9ec8wuoqi] .papr-line {
    flex: 1;
    height: 2px;
    background: #10b981;
    min-width: 20px;
    margin: 0 4px;
}
[b-d9ec8wuoqi] .papr-line-dim { background: #e5e7eb; }

/* ── History Table ──────────────────────────────────────────── */
[b-d9ec8wuoqi] .papr-th {
    padding: 10px 16px;
    text-align: left;
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #6b7280;
    white-space: nowrap;
}
[b-d9ec8wuoqi] .papr-th-right  { text-align: right; }
[b-d9ec8wuoqi] .papr-th-center { text-align: center; }

[b-d9ec8wuoqi] .papr-row {
    border-bottom: 1px solid #f3f4f6;
    transition: background 0.12s;
}
[b-d9ec8wuoqi] .papr-row:hover { background: #f9fafb; }

[b-d9ec8wuoqi] .papr-td {
    padding: 14px 16px;
    font-size: 0.8125rem;
    color: #374151;
    font-variant-numeric: tabular-nums;
}
[b-d9ec8wuoqi] .papr-td-right { text-align: right; font-weight: 600; color: #111827; }

[b-d9ec8wuoqi] .papr-net {
    font-weight: 800;
    color: #0e7490;
    font-size: 0.875rem;
}

/* Per-slip PDF download button — used in the history detail modal. */
[b-d9ec8wuoqi] .papr-slip-dl-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 7px;
    border: 1.5px solid #e2e8f0;
    background: #fff;
    color: #0e7490;
    cursor: pointer;
    transition: all 0.15s;
}
[b-d9ec8wuoqi] .papr-slip-dl-btn:hover:not(:disabled) {
    background: #ecfeff;
    border-color: #67e8f9;
    color: #155e75;
}
[b-d9ec8wuoqi] .papr-slip-dl-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

[b-d9ec8wuoqi] .papr-variance {
    font-size: 0.72rem;
    font-weight: 700;
    margin-top: 3px;
    display: flex;
    align-items: center;
    gap: 3px;
    justify-content: flex-end;
    letter-spacing: -0.01em;
}
[b-d9ec8wuoqi] .papr-variance-up   { color: #059669; }
[b-d9ec8wuoqi] .papr-variance-down { color: #dc2626; }

/* ── Status Chips ───────────────────────────────────────────── */
[b-d9ec8wuoqi] .papr-chip {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    white-space: nowrap;
}
[b-d9ec8wuoqi] .papr-chip-green { background: #dcfce7; color: #15803d; }
[b-d9ec8wuoqi] .papr-chip-blue  { background: #dbeafe; color: #1d4ed8; }
[b-d9ec8wuoqi] .papr-chip-red   { background: #fee2e2; color: #b91c1c; }
[b-d9ec8wuoqi] .papr-chip-amber { background: #fef3c7; color: #b45309; }
[b-d9ec8wuoqi] .papr-chip-gray  { background: #f3f4f6; color: #6b7280; }

/* ── View Button ────────────────────────────────────────────── */
[b-d9ec8wuoqi] .papr-view-btn {
    display: inline-flex;
    align-items: center;
    padding: 5px 12px;
    border: 1px solid #e0f2fe;
    background: #f0f9ff;
    color: #0369a1;
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.12s;
    white-space: nowrap;
}
[b-d9ec8wuoqi] .papr-view-btn:hover {
    background: #e0f2fe;
    border-color: #bae6fd;
    color: #075985;
}

/* ── Modal KPI Grid ─────────────────────────────────────────── */
[b-d9ec8wuoqi] .papr-modal-kpi-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    border-bottom: 1px solid #f3f4f6;
}
@media (max-width: 640px) {
    [b-d9ec8wuoqi] .papr-modal-kpi-grid { grid-template-columns: repeat(2, 1fr); }
}
[b-d9ec8wuoqi] .papr-modal-kpi {
    padding: 16px 20px;
    text-align: center;
    border-right: 1px solid #f3f4f6;
}
[b-d9ec8wuoqi] .papr-modal-kpi:last-child { border-right: none; }
[b-d9ec8wuoqi] .papr-modal-kpi-hero {
    background: linear-gradient(135deg, #0e7490 0%, #0369a1 100%);
    border-right: none;
}
[b-d9ec8wuoqi] .papr-modal-kpi-green { background: #f0fdf4; border-right: none; }
[b-d9ec8wuoqi] .papr-modal-green { color: #15803d; }
[b-d9ec8wuoqi] .papr-modal-kpi-red { background: #fff5f5; }

[b-d9ec8wuoqi] .papr-modal-kpi-label {
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #9ca3af;
    margin-bottom: 6px;
}
[b-d9ec8wuoqi] .papr-modal-kpi-value {
    font-size: 1.6rem;
    font-weight: 800;
    color: #111827;
    font-variant-numeric: tabular-nums;
    line-height: 1.1;
}
[b-d9ec8wuoqi] .papr-modal-red { color: #dc2626; }
[b-d9ec8wuoqi] .papr-modal-kpi-sub {
    font-size: 0.67rem;
    color: #9ca3af;
    margin-top: 3px;
}

@media (max-width: 640px) {
    [b-d9ec8wuoqi] .papr-timeline { padding: 8px 0; }
    [b-d9ec8wuoqi] .papr-step-text { min-width: 70px; }
    [b-d9ec8wuoqi] .papr-step-label { font-size: 0.7rem; white-space: nowrap; }
    [b-d9ec8wuoqi] .papr-step-sub   { display: none; }
    [b-d9ec8wuoqi] .papr-line { min-width: 12px; }
}

/* ── Table improvements ─────────────────────────────────────── */
[b-d9ec8wuoqi] .papr-thead-row {
    background: #f8fafc;
    border-bottom: 1px solid #e5e7eb;
}
[b-d9ec8wuoqi] .papr-row:nth-child(even) { background: #fafafa; }
[b-d9ec8wuoqi] .papr-row-alt { background: #fafafa; }
[b-d9ec8wuoqi] .papr-row-alt:hover { background: #f3f4f6; }

[b-d9ec8wuoqi] .papr-totals-row {
    background: #f8fafc;
    border-top: 2px solid #e5e7eb;
}
[b-d9ec8wuoqi] .papr-totals-row .papr-td { padding: 12px 16px; }

/* ── Modal sections ─────────────────────────────────────────── */
[b-d9ec8wuoqi] .papr-section-title {
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #6b7280;
    margin-bottom: 4px;
}
[b-d9ec8wuoqi] .papr-section-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #e5e7eb;
    color: #374151;
    font-size: 0.68rem;
    font-weight: 700;
    border-radius: 999px;
    padding: 2px 7px;
    margin-left: 6px;
}

/* ── Deduction cards ────────────────────────────────────────── */
[b-d9ec8wuoqi] .papr-deduct-card {
    background: #fff8f8;
    border: 1px solid #fecaca;
    border-radius: 8px;
    padding: 12px 14px;
    text-align: center;
}
[b-d9ec8wuoqi] .papr-deduct-icon {
    font-size: 1rem;
    color: #f87171;
    margin-bottom: 6px;
}
[b-d9ec8wuoqi] .papr-deduct-label {
    font-size: 0.68rem;
    font-weight: 600;
    color: #9ca3af;
    margin-bottom: 4px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
[b-d9ec8wuoqi] .papr-deduct-value {
    font-size: 1.1rem;
    font-weight: 800;
    color: #dc2626;
    font-variant-numeric: tabular-nums;
    line-height: 1.1;
}
[b-d9ec8wuoqi] .papr-deduct-pct {
    font-size: 0.67rem;
    color: #ef4444;
    margin-top: 3px;
    opacity: 0.75;
}

/* ── Insight rows ───────────────────────────────────────────── */
[b-d9ec8wuoqi] .papr-insight-row {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 6px 0;
    font-size: 0.8125rem;
    color: #374151;
}
[b-d9ec8wuoqi] .papr-insight-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
    margin-top: 4px;
}
[b-d9ec8wuoqi] .papr-insight-text { line-height: 1.4; }
[b-d9ec8wuoqi] .papr-insight-text strong { color: #111827; }

/* ── Modal footer ───────────────────────────────────────────── */
[b-d9ec8wuoqi] .papr-modal-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 24px;
    border-top: 1px solid #f3f4f6;
    background: #f9fafb;
    flex-shrink: 0;
    border-radius: 0 0 16px 16px;
}
[b-d9ec8wuoqi] .papr-close-btn {
    display: inline-flex;
    align-items: center;
    padding: 7px 16px;
    border: 1px solid #e5e7eb;
    background: #fff;
    color: #374151;
    border-radius: 8px;
    font-size: 0.8125rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.12s;
}
[b-d9ec8wuoqi] .papr-close-btn:hover {
    background: #f3f4f6;
    border-color: #d1d5db;
}
/* /Pages/Principal/Ptm/Create.razor.rz.scp.css */
/* No page-specific styles — all via design tokens */
/* /Pages/Principal/Ptm/Detail.razor.rz.scp.css */
/* No page-specific styles — all via design tokens */
/* /Pages/Principal/Ptm/Index.razor.rz.scp.css */
.ptm-card:hover[b-phc8csy4mp] {
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}
/* /Pages/Principal/Reports/Index.razor.rz.scp.css */
/* Principal Reports hub — link cards styled via Tailwind utilities in markup */
/* /Pages/Principal/Rooms/Index.razor.rz.scp.css */
/* Rooms Page */
.rooms-page[b-mydni97n1t] {
    min-height: 100vh;
    background: #f9fafb;
}

/* Header */
.page-header[b-mydni97n1t] {
    background: white;
    border-bottom: 1px solid var(--color-neutral-200);
    position: sticky;
    top: 0;
    z-index: 40;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}

.header-inner[b-mydni97n1t] {
    max-width: 1280px;
    margin: 0 auto;
    padding: 1rem 1.5rem;
    display: flex;
    align-items: center;
    gap: 1rem;
}

.header-icon[b-mydni97n1t] {
    width: 3rem;
    height: 3rem;
    background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark, #1e40af));
    border-radius: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.25rem;
    flex-shrink: 0;
}

.header-text[b-mydni97n1t] {
    flex: 1;
}

.page-title[b-mydni97n1t] {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--color-neutral-900);
    margin: 0;
}

.page-subtitle[b-mydni97n1t] {
    font-size: 0.875rem;
    color: var(--color-neutral-500);
    margin: 0.125rem 0 0;
}

.header-actions[b-mydni97n1t] {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-shrink: 0;
}

/* Content */
.page-content[b-mydni97n1t] {
    max-width: 1280px;
    margin: 0 auto;
    padding: 1.5rem;
}

/* States */
.loading-state[b-mydni97n1t] {
    display: flex;
    justify-content: center;
    padding: 3rem 0;
}

.empty-state[b-mydni97n1t] {
    text-align: center;
    padding: 4rem 1rem;
    background: white;
    border-radius: 0.75rem;
    border: 1px solid var(--color-neutral-200);
}

.empty-icon[b-mydni97n1t] {
    font-size: 3rem;
    color: var(--color-neutral-300);
    margin-bottom: 1rem;
    display: block;
}

.empty-state h3[b-mydni97n1t] {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--color-neutral-700);
    margin: 0 0 0.5rem;
}

.empty-state p[b-mydni97n1t] {
    font-size: 0.875rem;
    color: var(--color-neutral-500);
    max-width: 28rem;
    margin: 0 auto 1.5rem;
}

/* Toolbar */
.toolbar[b-mydni97n1t] {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
}

.search-box[b-mydni97n1t] {
    position: relative;
    flex: 1;
    max-width: 24rem;
}

.search-icon[b-mydni97n1t] {
    position: absolute;
    left: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--color-neutral-400);
    font-size: 0.875rem;
}

.search-input[b-mydni97n1t] {
    width: 100%;
    padding: 0.5rem 0.75rem 0.5rem 2.25rem;
    border: 1px solid var(--color-neutral-300);
    border-radius: 0.5rem;
    font-size: 0.875rem;
    background: white;
    outline: none;
    transition: border-color 0.15s;
}

.search-input:focus[b-mydni97n1t] {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.record-count[b-mydni97n1t] {
    font-size: 0.8125rem;
    color: var(--color-neutral-500);
    margin-left: auto;
}

/* Table */
.table-card[b-mydni97n1t] {
    background: white;
    border: 1px solid var(--color-neutral-200);
    border-radius: 0.75rem;
    overflow: hidden;
}

.rooms-table[b-mydni97n1t] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
}

.rooms-table thead tr[b-mydni97n1t] {
    background: var(--color-neutral-50);
    border-bottom: 1px solid var(--color-neutral-200);
}

.rooms-table th[b-mydni97n1t] {
    padding: 0.625rem 1rem;
    text-align: left;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-neutral-500);
}

.rooms-table tbody tr[b-mydni97n1t] {
    border-bottom: 1px solid var(--color-neutral-100);
    transition: background 0.1s;
}

.rooms-table tbody tr:last-child[b-mydni97n1t] {
    border-bottom: none;
}

.rooms-table tbody tr:hover[b-mydni97n1t] {
    background: var(--color-neutral-50);
}

.rooms-table td[b-mydni97n1t] {
    padding: 0.625rem 1rem;
    color: var(--color-neutral-800);
}

.row-inactive td[b-mydni97n1t] {
    opacity: 0.55;
}

.room-number[b-mydni97n1t] {
    font-weight: 600;
    font-family: monospace;
    color: var(--color-neutral-900) !important;
}

.room-name[b-mydni97n1t] {
    font-weight: 500;
}

.muted[b-mydni97n1t] {
    color: var(--color-neutral-400);
}

.capacity-cell[b-mydni97n1t] {
    color: var(--color-neutral-600) !important;
}

.capacity-icon[b-mydni97n1t] {
    font-size: 0.75rem;
    margin-right: 0.25rem;
}

/* Type Badge */
.type-badge[b-mydni97n1t] {
    display: inline-block;
    padding: 0.125rem 0.5rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 500;
    background: var(--color-neutral-100);
    color: var(--color-neutral-700);
}

.type-classroom[b-mydni97n1t] { background: #dbeafe; color: #1e40af; }
.type-lab[b-mydni97n1t] { background: #dcfce7; color: #166534; }
.type-exam-hall[b-mydni97n1t] { background: #fef3c7; color: #92400e; }
.type-conference-room[b-mydni97n1t] { background: #ede9fe; color: #5b21b6; }
.type-library[b-mydni97n1t] { background: #ffedd5; color: #9a3412; }

/* Status Badge */
.status-badge[b-mydni97n1t] {
    display: inline-block;
    padding: 0.125rem 0.5rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 600;
}

.status-active[b-mydni97n1t] {
    background: #dcfce7;
    color: #15803d;
}

.status-inactive[b-mydni97n1t] {
    background: #fee2e2;
    color: #b91c1c;
}

/* Action Buttons */
.actions-cell[b-mydni97n1t] {
    display: flex;
    gap: 0.375rem;
}

.btn-icon[b-mydni97n1t] {
    width: 2rem;
    height: 2rem;
    border: 1px solid var(--color-neutral-200);
    border-radius: 0.375rem;
    background: white;
    color: var(--color-neutral-600);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8125rem;
    transition: all 0.15s;
}

.btn-icon:hover[b-mydni97n1t] {
    background: var(--color-neutral-100);
    color: var(--color-neutral-900);
}

.btn-icon-danger:hover[b-mydni97n1t] {
    background: #fef2f2;
    color: #dc2626;
    border-color: #fca5a5;
}

/* Buttons */
.btn-primary[b-mydni97n1t] {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.5rem 1rem;
    background: var(--color-primary);
    color: white;
    border: none;
    border-radius: 0.5rem;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: opacity 0.15s;
}

.btn-primary:hover:not(:disabled)[b-mydni97n1t] {
    opacity: 0.9;
}

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

.btn-secondary[b-mydni97n1t] {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.5rem 1rem;
    background: white;
    color: var(--color-neutral-700);
    border: 1px solid var(--color-neutral-300);
    border-radius: 0.5rem;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s;
}

.btn-secondary:hover:not(:disabled)[b-mydni97n1t] {
    background: var(--color-neutral-50);
}

/* Toggle */
.toggle-label[b-mydni97n1t] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    color: var(--color-neutral-600);
    cursor: pointer;
    white-space: nowrap;
}

/* Modal */
.modal-backdrop[b-mydni97n1t] {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.45);
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

.modal-box[b-mydni97n1t] {
    background: white;
    border-radius: 0.75rem;
    width: 100%;
    max-width: 36rem;
    box-shadow: 0 20px 60px rgba(0,0,0,0.2);
    display: flex;
    flex-direction: column;
    max-height: 90vh;
}

.modal-header[b-mydni97n1t] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid var(--color-neutral-100);
}

.modal-title[b-mydni97n1t] {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--color-neutral-900);
    margin: 0;
}

.modal-close[b-mydni97n1t] {
    width: 2rem;
    height: 2rem;
    border: none;
    background: none;
    color: var(--color-neutral-400);
    cursor: pointer;
    border-radius: 0.375rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s;
}

.modal-close:hover[b-mydni97n1t] {
    background: var(--color-neutral-100);
    color: var(--color-neutral-700);
}

.modal-body[b-mydni97n1t] {
    padding: 1.5rem;
    overflow-y: auto;
    flex: 1;
}

.modal-footer[b-mydni97n1t] {
    padding: 1rem 1.5rem;
    border-top: 1px solid var(--color-neutral-100);
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
}

/* Form */
.form-grid[b-mydni97n1t] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

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

.form-group-full[b-mydni97n1t] {
    grid-column: 1 / -1;
}

.form-label[b-mydni97n1t] {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--color-neutral-700);
}

.required[b-mydni97n1t] {
    color: #dc2626;
}

.form-input[b-mydni97n1t] {
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--color-neutral-300);
    border-radius: 0.5rem;
    font-size: 0.875rem;
    outline: none;
    transition: border-color 0.15s;
    background: white;
    width: 100%;
}

.form-input:focus[b-mydni97n1t] {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.input-error[b-mydni97n1t] {
    border-color: #dc2626 !important;
}

.error-text[b-mydni97n1t] {
    font-size: 0.75rem;
    color: #dc2626;
}

.submit-error[b-mydni97n1t] {
    margin-top: 0.75rem;
    padding: 0.625rem 0.875rem;
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: 0.5rem;
    font-size: 0.875rem;
    color: #b91c1c;
}

/* Spinner */
.spinner-sm[b-mydni97n1t] {
    width: 0.875rem;
    height: 0.875rem;
    border: 2px solid rgba(255,255,255,0.4);
    border-top-color: white;
    border-radius: 50%;
    animation: spin-b-mydni97n1t 0.7s linear infinite;
    display: inline-block;
}

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

/* Responsive */
@media (max-width: 640px) {
    .header-inner[b-mydni97n1t] {
        flex-wrap: wrap;
        gap: 0.75rem;
    }

    .header-actions[b-mydni97n1t] {
        width: 100%;
        justify-content: flex-end;
    }

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

    .rooms-table th:nth-child(4)[b-mydni97n1t],
    .rooms-table td:nth-child(4)[b-mydni97n1t] {
        display: none;
    }
}
/* /Pages/Principal/SchoolSetup/Holidays.razor.rz.scp.css */
/* ── Holiday Calendar Page ─────────────────────────────────────────────────── */

.hc-root[b-kpbi1pzory] {
    max-width: 1100px;
    margin: 0 auto;
    padding: 1.5rem 1rem;
}

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

.hc-header-eyebrow[b-kpbi1pzory] {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-primary-600, #16a34a);
    margin-bottom: 0.3rem;
}

.hc-title[b-kpbi1pzory] {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--color-neutral-900, #111827);
    margin: 0 0 0.3rem;
    line-height: 1.2;
}

.hc-subtitle[b-kpbi1pzory] {
    font-size: 0.825rem;
    color: var(--color-neutral-500, #6b7280);
    max-width: 560px;
    margin: 0;
    line-height: 1.5;
}

/* Buttons */
.hc-btn[b-kpbi1pzory] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.55rem 1rem;
    border-radius: 8px;
    font-size: 0.825rem;
    font-weight: 600;
    cursor: pointer;
    border: 1px solid transparent;
    transition: background 0.15s, box-shadow 0.15s;
    white-space: nowrap;
}

.hc-btn--primary[b-kpbi1pzory] { background: var(--color-primary-600, #16a34a); color: #fff; }
.hc-btn--primary:hover[b-kpbi1pzory] { background: var(--color-primary-700, #15803d); }
.hc-btn--ghost[b-kpbi1pzory] { background: #fff; color: var(--color-neutral-700, #374151); border-color: var(--color-neutral-200, #e5e7eb); }
.hc-btn--ghost:hover[b-kpbi1pzory] { background: var(--color-neutral-50, #f9fafb); }
.hc-btn--danger[b-kpbi1pzory] { background: #dc2626; color: #fff; }
.hc-btn--danger:hover[b-kpbi1pzory] { background: #b91c1c; }
.hc-btn:disabled[b-kpbi1pzory] { opacity: 0.6; cursor: not-allowed; }

.hc-btn-spinner[b-kpbi1pzory] {
    width: 14px; height: 14px;
    border: 2px solid rgba(255,255,255,0.4);
    border-top-color: #fff;
    border-radius: 50%;
    animation: hc-spin-b-kpbi1pzory 0.7s linear infinite;
    display: inline-block;
}

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

/* KPI Row */
.hc-kpi-row[b-kpbi1pzory] {
    display: flex;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
}

.hc-kpi[b-kpbi1pzory] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    background: #fff;
    border: 1px solid var(--color-neutral-100, #f3f4f6);
    border-radius: 10px;
    padding: 0.875rem 1rem;
    flex: 1;
    min-width: 140px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}

.hc-kpi--wide[b-kpbi1pzory] { min-width: 200px; flex: 1.5; }

.hc-kpi-icon[b-kpbi1pzory] {
    width: 38px; height: 38px;
    border-radius: 9px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1rem;
    flex-shrink: 0;
}

.hc-kpi-icon--blue[b-kpbi1pzory]   { background: #dbeafe; color: #1d4ed8; }
.hc-kpi-icon--red[b-kpbi1pzory]    { background: #fee2e2; color: #dc2626; }
.hc-kpi-icon--green[b-kpbi1pzory]  { background: #dcfce7; color: #16a34a; }
.hc-kpi-icon--amber[b-kpbi1pzory]  { background: #fef3c7; color: #d97706; }
.hc-kpi-icon--purple[b-kpbi1pzory] { background: #ede9fe; color: #7c3aed; }

.hc-kpi-value[b-kpbi1pzory] {
    font-size: 1.375rem;
    font-weight: 800;
    color: var(--color-neutral-900, #111827);
    line-height: 1.1;
}

.hc-kpi-value--sm[b-kpbi1pzory] { font-size: 0.95rem; }
.hc-kpi-label[b-kpbi1pzory] { font-size: 0.72rem; color: var(--color-neutral-500, #6b7280); font-weight: 500; margin-top: 0.1rem; }

/* Holiday List */
.hc-list[b-kpbi1pzory] {
    display: flex;
    flex-direction: column;
    gap: 0;
    background: #fff;
    border: 1px solid var(--color-neutral-100, #f3f4f6);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 1px 4px rgba(0,0,0,0.05);
}

.hc-row[b-kpbi1pzory] {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    padding: 0.875rem 1rem;
    border-bottom: 1px solid var(--color-neutral-50, #f9fafb);
    transition: background 0.1s;
}

.hc-row:last-child[b-kpbi1pzory] { border-bottom: none; }
.hc-row:hover[b-kpbi1pzory] { background: #fafafa; }
.hc-row--past[b-kpbi1pzory] { opacity: 0.6; }

.hc-row-type[b-kpbi1pzory] { flex-shrink: 0; }

.hc-type-badge[b-kpbi1pzory] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.7rem;
    font-weight: 700;
    padding: 0.2rem 0.55rem;
    border-radius: 999px;
    white-space: nowrap;
}

.hc-type-national[b-kpbi1pzory]     { background: #fff7ed; color: #c2410c; border: 1px solid #fed7aa; }
.hc-type-religious[b-kpbi1pzory]    { background: #fdf4ff; color: #7c3aed; border: 1px solid #e9d5ff; }
.hc-type-vacation[b-kpbi1pzory]     { background: #ecfdf5; color: #065f46; border: 1px solid #a7f3d0; }
.hc-type-emergency[b-kpbi1pzory]    { background: #fef2f2; color: #991b1b; border: 1px solid #fecaca; }
.hc-type-exam[b-kpbi1pzory]         { background: #eff6ff; color: #1e40af; border: 1px solid #bfdbfe; }
.hc-type-publicholiday[b-kpbi1pzory]{ background: #f0f9ff; color: #0369a1; border: 1px solid #bae6fd; }
.hc-type-school[b-kpbi1pzory]       { background: #f3f4f6; color: #374151; border: 1px solid #e5e7eb; }

.hc-row-main[b-kpbi1pzory] {
    flex: 1;
    min-width: 0;
}

.hc-row-name[b-kpbi1pzory] {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-neutral-900, #111827);
    margin-bottom: 0.2rem;
}

.hc-row-meta[b-kpbi1pzory] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    font-size: 0.75rem;
    color: var(--color-neutral-500, #6b7280);
}

.hc-duration[b-kpbi1pzory] { color: var(--color-primary-600, #16a34a); font-weight: 600; margin-left: 0.25rem; }

.hc-reopen[b-kpbi1pzory] {
    color: #0369a1;
    font-weight: 500;
}

.hc-desc[b-kpbi1pzory] {
    font-style: italic;
    color: var(--color-neutral-400, #9ca3af);
}

.hc-row-flags[b-kpbi1pzory] {
    display: flex;
    gap: 0.35rem;
    flex-shrink: 0;
}

.hc-flag[b-kpbi1pzory] {
    width: 26px; height: 26px;
    border-radius: 6px;
    display: flex; align-items: center; justify-content: center;
    font-size: 0.7rem;
}

.hc-flag--recurring[b-kpbi1pzory] { background: #ecfdf5; color: #16a34a; }
.hc-flag--notified[b-kpbi1pzory]  { background: #eff6ff; color: #2563eb; }

.hc-row-actions[b-kpbi1pzory] {
    display: flex;
    gap: 0.35rem;
    flex-shrink: 0;
}

.hc-action-btn[b-kpbi1pzory] {
    width: 32px; height: 32px;
    border-radius: 7px;
    border: 1px solid transparent;
    background: transparent;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    font-size: 0.75rem;
    transition: background 0.15s;
}

.hc-action-btn--notify[b-kpbi1pzory] { color: #2563eb; border-color: #bfdbfe; }
.hc-action-btn--notify:hover[b-kpbi1pzory] { background: #eff6ff; }
.hc-action-btn--edit[b-kpbi1pzory]   { color: #6b7280; border-color: #e5e7eb; }
.hc-action-btn--edit:hover[b-kpbi1pzory] { background: #f3f4f6; }
.hc-action-btn--delete[b-kpbi1pzory] { color: #dc2626; border-color: #fecaca; }
.hc-action-btn--delete:hover[b-kpbi1pzory] { background: #fef2f2; }
.hc-action-btn:disabled[b-kpbi1pzory] { opacity: 0.4; cursor: not-allowed; }

/* Empty states */
.hc-empty-state[b-kpbi1pzory] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: 3rem 1rem;
    background: #fff;
    border: 1px dashed var(--color-neutral-200, #e5e7eb);
    border-radius: 12px;
    color: var(--color-neutral-400, #9ca3af);
    font-size: 0.875rem;
    text-align: center;
}

.hc-empty-state i[b-kpbi1pzory] { font-size: 2rem; color: var(--color-neutral-300, #d1d5db); }
.hc-empty-state strong[b-kpbi1pzory] { color: var(--color-neutral-600, #4b5563); }

.hc-loading[b-kpbi1pzory], .hc-empty[b-kpbi1pzory] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: 4rem 1rem;
    color: var(--color-neutral-500, #6b7280);
    font-size: 0.875rem;
}

.hc-spinner[b-kpbi1pzory] {
    width: 24px; height: 24px;
    border: 3px solid var(--color-neutral-200, #e5e7eb);
    border-top-color: var(--color-primary-500, #22c55e);
    border-radius: 50%;
    animation: hc-spin-b-kpbi1pzory 0.8s linear infinite;
}

/* ── Modal ───────────────────────────────────────────────────────────────── */

.hc-modal-backdrop[b-kpbi1pzory] {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.4);
    z-index: 900;
}

.hc-modal[b-kpbi1pzory] {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #fff;
    border-radius: 14px;
    width: 560px;
    max-width: calc(100vw - 2rem);
    max-height: calc(100vh - 4rem);
    overflow-y: auto;
    z-index: 910;
    box-shadow: 0 20px 60px rgba(0,0,0,0.18);
}

.hc-modal--sm[b-kpbi1pzory] { width: 400px; }

.hc-modal-header[b-kpbi1pzory] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.25rem 1.5rem 1rem;
    border-bottom: 1px solid var(--color-neutral-100, #f3f4f6);
}

.hc-modal-header h2[b-kpbi1pzory] {
    font-size: 1rem;
    font-weight: 700;
    color: var(--color-neutral-900, #111827);
    margin: 0;
}

.hc-modal-close[b-kpbi1pzory] {
    width: 32px; height: 32px;
    border: none; background: none;
    color: var(--color-neutral-400, #9ca3af);
    border-radius: 6px;
    cursor: pointer;
    font-size: 1rem;
}

.hc-modal-close:hover[b-kpbi1pzory] { background: var(--color-neutral-100, #f3f4f6); color: var(--color-neutral-700); }

.hc-modal-body[b-kpbi1pzory] { padding: 1.25rem 1.5rem; }

.hc-modal-footer[b-kpbi1pzory] {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    padding: 1rem 1.5rem;
    border-top: 1px solid var(--color-neutral-100, #f3f4f6);
}

/* Form */
.hc-form-grid[b-kpbi1pzory] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.875rem;
}

.hc-form-group[b-kpbi1pzory] { display: flex; flex-direction: column; gap: 0.3rem; }
.hc-form-group--full[b-kpbi1pzory] { grid-column: 1 / -1; }
.hc-form-group label[b-kpbi1pzory] { font-size: 0.775rem; font-weight: 600; color: var(--color-neutral-600, #4b5563); }

.hc-req[b-kpbi1pzory] { color: #dc2626; }

.hc-input[b-kpbi1pzory] {
    padding: 0.5rem 0.6rem;
    border: 1px solid var(--color-neutral-200, #e5e7eb);
    border-radius: 7px;
    font-size: 0.825rem;
    color: var(--color-neutral-900, #111827);
    outline: none;
    background: #fff;
    transition: border-color 0.15s;
}

.hc-input:focus[b-kpbi1pzory] { border-color: var(--color-primary-400, #4ade80); box-shadow: 0 0 0 3px rgba(74,222,128,0.1); }

.hc-form-checkboxes[b-kpbi1pzory] { display: flex; flex-direction: column; gap: 0.4rem; }

.hc-checkbox[b-kpbi1pzory] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8rem;
    color: var(--color-neutral-700, #374151);
    cursor: pointer;
}

.hc-checkbox input[type="checkbox"][b-kpbi1pzory] { width: 15px; height: 15px; accent-color: var(--color-primary-600, #16a34a); }

.hc-form-error[b-kpbi1pzory] {
    margin-top: 0.75rem;
    background: #fef2f2;
    color: #991b1b;
    border: 1px solid #fecaca;
    border-radius: 7px;
    padding: 0.5rem 0.75rem;
    font-size: 0.8rem;
}

/* Responsive */
@media (max-width: 768px) {
    .hc-kpi-row[b-kpbi1pzory] { flex-direction: column; }
    .hc-kpi[b-kpbi1pzory]     { flex: none; width: 100%; }
    .hc-row[b-kpbi1pzory]     { flex-wrap: wrap; }
    .hc-form-grid[b-kpbi1pzory] { grid-template-columns: 1fr; }
    .hc-header[b-kpbi1pzory]  { flex-direction: column; }
}
/* /Pages/Principal/SchoolSetup/Status.razor.rz.scp.css */
/* -----------------------------------------------------------
   School Setup Timeline � Premium Redesign v4
   ----------------------------------------------------------- */

/* -- Root -- Issue 13: wider container */
.setup-root[b-ojv1qkin0c] {
    max-width: 1600px;
    margin: 0 auto;
    padding: 28px 32px 64px;
}

/* -- Loading / Error -- */
.setup-loading[b-ojv1qkin0c], .setup-error[b-ojv1qkin0c] {
    display: flex; align-items: center; justify-content: center;
    gap: 12px; padding: 72px; font-size: 1rem;
    color: var(--color-neutral-500, #6b7280);
}
.setup-error[b-ojv1qkin0c] { color: #dc2626; }
.btn-retry[b-ojv1qkin0c] {
    margin-left: 8px; padding: 7px 18px; border-radius: 8px;
    border: 1px solid #dc2626; background: #fee2e2; color: #dc2626;
    font-size: 0.8125rem; font-weight: 600; cursor: pointer;
}

/* -- Top bar -- */
.setup-topbar[b-ojv1qkin0c] {
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: 16px; margin-bottom: 20px; flex-wrap: wrap;
}
.stb-left[b-ojv1qkin0c] { display: flex; align-items: flex-start; gap: 14px; }
.stb-icon[b-ojv1qkin0c] { font-size: 1.875rem; color: #059669; flex-shrink: 0; margin-top: 2px; }
/* Issue 1: typography scale */
.stb-title[b-ojv1qkin0c] {
    font-size: 1.75rem; font-weight: 800;
    color: #111827; margin: 0 0 4px; letter-spacing: -0.025em;
}
.stb-sub[b-ojv1qkin0c] { font-size: 0.9375rem; color: #6b7280; margin: 0; line-height: 1.4; }
.stb-right[b-ojv1qkin0c] { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.sync-badge[b-ojv1qkin0c] {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 0.8rem; color: #9ca3af;
    background: #f9fafb; border: 1px solid #e5e7eb;
    padding: 6px 14px; border-radius: 999px;
}
.btn-refresh[b-ojv1qkin0c] {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 9px 20px; font-size: 0.875rem; font-weight: 600;
    border: 1px solid #e5e7eb; border-radius: 9px;
    background: white; color: #4b5563;
    cursor: pointer; transition: all 0.15s;
}
.btn-refresh:hover[b-ojv1qkin0c] { border-color: #059669; color: #059669; background: #f0fdf4; }
.btn-summary[b-ojv1qkin0c] {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 9px 18px; font-size: 0.875rem; font-weight: 600;
    border: 1px solid #dbeafe; border-radius: 9px;
    background: #eff6ff; color: #1d4ed8;
    text-decoration: none; transition: all 0.15s;
}
.btn-summary:hover[b-ojv1qkin0c] { background: #dbeafe; }

/* -- Context breadcrumb -- */
.ctx-bar[b-ojv1qkin0c] {
    display: flex; align-items: center; gap: 10px;
    background: white; border: 1px solid #e5e7eb;
    border-radius: 12px; padding: 13px 20px; margin-bottom: 22px;
    flex-wrap: wrap; box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}
.ctx-chip[b-ojv1qkin0c] {
    display: flex; align-items: center; gap: 7px;
    font-size: 0.9rem; color: #374151;
}
.ctx-chip i[b-ojv1qkin0c] { color: #9ca3af; font-size: 0.8rem; }
.ctx-chip strong[b-ojv1qkin0c] { font-weight: 700; }
.ctx-chip-warn strong[b-ojv1qkin0c] { color: #d97706; }
.ctx-arrow[b-ojv1qkin0c] { color: #d1d5db; font-size: 0.65rem; }
.ctx-right[b-ojv1qkin0c] { margin-left: auto; }
.ctx-est[b-ojv1qkin0c] {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 0.8rem; font-weight: 600; color: #6b7280;
    background: #f9fafb; padding: 5px 14px; border-radius: 999px;
    border: 1px solid #f3f4f6;
}

/* -- Issue 9: Next Step banner � bigger, more urgent -- */
.next-step-banner[b-ojv1qkin0c] {
    position: relative; overflow: hidden;
    display: flex; align-items: center; gap: 20px;
    background: linear-gradient(135deg, #1d4ed8 0%, #7c3aed 100%);
    border-radius: 20px; padding: 24px 28px;
    margin-bottom: 26px; color: white; min-height: 100px;
    box-shadow: 0 12px 32px rgba(29, 78, 216, 0.30);
}
.nsb-pulse[b-ojv1qkin0c] {
    position: absolute; right: -50px; top: -50px;
    width: 200px; height: 200px; border-radius: 50%;
    background: rgba(255,255,255,0.07);
}
.nsb-pulse2[b-ojv1qkin0c] {
    position: absolute; right: 120px; bottom: -60px;
    width: 130px; height: 130px; border-radius: 50%;
    background: rgba(255,255,255,0.04);
}
.nsb-icon[b-ojv1qkin0c] {
    width: 56px; height: 56px; border-radius: 14px;
    background: rgba(255,255,255,0.18);
    display: flex; align-items: center; justify-content: center;
    font-size: 1.625rem; flex-shrink: 0;
}
.nsb-body[b-ojv1qkin0c] { flex: 1; min-width: 0; }
.nsb-label[b-ojv1qkin0c] {
    font-size: 0.72rem; font-weight: 800; text-transform: uppercase;
    letter-spacing: 0.1em; opacity: 0.75; margin-bottom: 5px;
}
.nsb-main[b-ojv1qkin0c] { font-size: 1.1875rem; font-weight: 800; margin-bottom: 5px; letter-spacing: -0.01em; }
.nsb-hint[b-ojv1qkin0c] { font-size: 0.875rem; opacity: 0.82; line-height: 1.4; }
.nsb-btn[b-ojv1qkin0c] {
    display: inline-flex; align-items: center; gap: 9px;
    padding: 13px 26px; border-radius: 12px; border: none;
    background: rgba(255,255,255,0.22); color: white;
    font-size: 0.9375rem; font-weight: 800; cursor: pointer;
    white-space: nowrap; transition: background 0.15s; flex-shrink: 0;
    backdrop-filter: blur(6px); letter-spacing: 0.01em;
}
.nsb-btn:hover[b-ojv1qkin0c] { background: rgba(255,255,255,0.35); transform: translateY(-1px); }

/* -- Issue 10: Two-column main grid -- */
.setup-grid[b-ojv1qkin0c] {
    display: grid;
    grid-template-columns: 1fr 400px;
    gap: 24px;
    align-items: start;
}

@media (max-width: 1100px) {
    .setup-grid[b-ojv1qkin0c] { grid-template-columns: 1fr; }
    .setup-right[b-ojv1qkin0c] { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
}
@media (max-width: 680px) {
    .setup-root[b-ojv1qkin0c] { padding: 16px 14px 48px; }
    .setup-right[b-ojv1qkin0c] { grid-template-columns: 1fr; }
    .ctx-right[b-ojv1qkin0c] { display: none; }
    .stb-title[b-ojv1qkin0c] { font-size: 1.375rem; }
}

/* -- Issue 5: Layer accordion cards � better separation -- */
.layer-card[b-ojv1qkin0c] {
    border-radius: 18px; overflow: hidden;
    border: 1.5px solid #e5e7eb;
    background: white;
    box-shadow: 0 2px 10px rgba(0,0,0,0.06);
    margin-bottom: 18px;
    transition: box-shadow 0.2s, transform 0.15s;
}
.layer-card:hover[b-ojv1qkin0c] { box-shadow: 0 6px 20px rgba(0,0,0,0.09); }
.layer-card.lc-done[b-ojv1qkin0c] { border-color: #bbf7d0; background: #f8fff9; }
.layer-card.lc-blocked[b-ojv1qkin0c] { opacity: 0.52; pointer-events: none; }

/* -- Issue 15: Accordion header interaction feedback -- */
.lc-header[b-ojv1qkin0c] {
    display: flex; align-items: center; justify-content: space-between;
    padding: 18px 22px; cursor: pointer; user-select: none;
    transition: background 0.2s ease;
}
.lc-header:hover[b-ojv1qkin0c] { background: #f8fafc; }
.lc-done .lc-header:hover[b-ojv1qkin0c] { background: #f0fdf4; }

.lc-header-left[b-ojv1qkin0c] { display: flex; align-items: center; gap: 14px; }
.lc-badge[b-ojv1qkin0c] {
    width: 34px; height: 34px; border-radius: 9px;
    display: flex; align-items: center; justify-content: center;
    font-size: 0.72rem; font-weight: 800; color: white; flex-shrink: 0;
}
.lc-b1[b-ojv1qkin0c] { background: #16a34a; }
.lc-b2[b-ojv1qkin0c] { background: #2563eb; }
.lc-b3[b-ojv1qkin0c] { background: #d97706; }
.lc-b4[b-ojv1qkin0c] { background: #9333ea; }

/* Issue 1: Typography */
.lc-title[b-ojv1qkin0c] { font-size: 1.0625rem; font-weight: 700; color: #111827; }
.lc-subtitle[b-ojv1qkin0c] { font-size: 0.8125rem; color: #9ca3af; margin-top: 2px; }

.lc-header-right[b-ojv1qkin0c] { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }

/* Issue 4: Progress bars thicker */
.lc-mini-progress[b-ojv1qkin0c] {
    width: 88px; height: 8px;
    background: #e2e8f0; border-radius: 999px; overflow: hidden;
}
.lc-mini-progress div[b-ojv1qkin0c] { height: 100%; background: #16a34a; border-radius: 999px; transition: width 0.4s; }

.lc-pct[b-ojv1qkin0c] { font-size: 0.875rem; font-weight: 700; color: #374151; min-width: 36px; text-align: right; }

/* Layer status badges */
.lsb[b-ojv1qkin0c] {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: 0.75rem; font-weight: 700; padding: 4px 12px; border-radius: 999px;
}
.lsb-done[b-ojv1qkin0c] { background: #dcfce7; color: #15803d; }
.lsb-active[b-ojv1qkin0c] { background: #fef9c3; color: #a16207; }
.lsb-critical[b-ojv1qkin0c] { background: #fee2e2; color: #dc2626; }

.lc-lock-tag[b-ojv1qkin0c] {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 0.75rem; font-weight: 600; color: #9ca3af;
    background: #f3f4f6; padding: 4px 12px; border-radius: 7px;
}
/* Issue 15: rotating chevron */
.lc-toggle[b-ojv1qkin0c] { font-size: 0.75rem; color: #9ca3af; transition: transform 0.25s ease; }
.lc-toggle.open[b-ojv1qkin0c] { transform: rotate(180deg); }

/* Accordion body */
.lc-body[b-ojv1qkin0c] { border-top: 1px solid #f3f4f6; padding: 12px 14px 14px; background: #fafafa; }
.lc-done .lc-body[b-ojv1qkin0c] { background: #f0fdf4; }

/* -- Issue 2 & 3: Step cards � proper card structure -- */
.sc[b-ojv1qkin0c] {
    display: flex; align-items: flex-start; gap: 14px;
    padding: 14px 16px;
    border-radius: 12px;
    background: white;
    border: 1px solid #e5e7eb;
    margin-bottom: 10px;
    transition: box-shadow 0.15s, border-color 0.15s;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}
.sc:last-child[b-ojv1qkin0c] { margin-bottom: 0; }
.sc:hover[b-ojv1qkin0c] { box-shadow: 0 3px 10px rgba(0,0,0,0.09); border-color: #d1d5db; }

.sc-done[b-ojv1qkin0c] { background: #f0fdf4; border-color: #bbf7d0; }
.sc-done:hover[b-ojv1qkin0c] { border-color: #86efac; }
.sc-pending[b-ojv1qkin0c] { background: white; }
.sc-critical[b-ojv1qkin0c] { background: #fff7ed; border-color: #fed7aa; }
.sc-critical:hover[b-ojv1qkin0c] { border-color: #fdba74; }
.sc-locked[b-ojv1qkin0c] { opacity: 0.48; background: #f9fafb; }

/* Issue 3: Icon wrapper consistent sizing */
.sn[b-ojv1qkin0c] {
    width: 32px; height: 32px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 0.8125rem; font-weight: 700; flex-shrink: 0; margin-top: 1px;
}
.sn-done[b-ojv1qkin0c] { background: #22c55e; color: white; box-shadow: 0 2px 8px rgba(34,197,94,0.4); }
.sn-pending[b-ojv1qkin0c] { background: #fef3c7; color: #d97706; border: 1.5px solid #fcd34d; }
.sn-critical[b-ojv1qkin0c] { background: #fee2e2; color: #dc2626; border: 1.5px solid #fca5a5; }
.sn-locked[b-ojv1qkin0c] { background: #f3f4f6; color: #9ca3af; border: 1.5px solid #e5e7eb; }

/* Info column */
.sc-info[b-ojv1qkin0c] { flex: 1; min-width: 0; }

.sc-title-row[b-ojv1qkin0c] {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 5px;
}
/* Issue 1: item title typography */
.sc-name[b-ojv1qkin0c] { font-size: 0.9375rem; font-weight: 600; color: #111827; }
.sc-name i[b-ojv1qkin0c] { color: #9ca3af; font-size: 0.875rem; margin-right: 5px; }

.sbt[b-ojv1qkin0c] {
    font-size: 0.72rem; font-weight: 700; padding: 2px 9px; border-radius: 999px;
}
.sbt-done[b-ojv1qkin0c] { background: #dcfce7; color: #15803d; }
.sbt-required[b-ojv1qkin0c] { background: #fee2e2; color: #dc2626; }
.sbt-critical[b-ojv1qkin0c] { background: #fef3c7; color: #b45309; }
.sbt-optional[b-ojv1qkin0c] { background: #f3f4f6; color: #6b7280; }

/* Issue 1: item meta typography */
.sc-detail[b-ojv1qkin0c] { font-size: 0.875rem; color: #6b7280; margin-bottom: 5px; line-height: 1.5; }
.sc-owner[b-ojv1qkin0c] { font-size: 0.78rem; color: #9ca3af; display: flex; align-items: center; gap: 5px; }
.sc-owner i[b-ojv1qkin0c] { font-size: 0.72rem; }

/* Step action button */
.sc-btn[b-ojv1qkin0c] {
    display: inline-flex; align-items: center; gap: 7px; flex-shrink: 0;
    padding: 8px 18px; font-size: 0.8125rem; font-weight: 700;
    border-radius: 9px; border: none;
    background: #059669; color: white;
    cursor: pointer; white-space: nowrap; transition: all 0.15s; margin-top: 2px;
}
.sc-btn:hover[b-ojv1qkin0c] { filter: brightness(1.08); box-shadow: 0 4px 12px rgba(5,150,105,0.32); transform: translateY(-1px); }
.sc-btn-critical[b-ojv1qkin0c] { background: #ea580c; }
.sc-btn-critical:hover[b-ojv1qkin0c] { box-shadow: 0 4px 12px rgba(234,88,12,0.32); }
.sc-lock[b-ojv1qkin0c] { display: flex; align-items: center; color: #e5e7eb; font-size: 0.9rem; flex-shrink: 0; margin-top: 4px; }

/* Status footer message */
.status-msg[b-ojv1qkin0c] {
    display: flex; align-items: flex-start; gap: 12px;
    padding: 16px 20px; border-radius: 12px;
    font-size: 0.9rem; font-weight: 500; margin-top: 6px;
    line-height: 1.5;
}
.msg-success[b-ojv1qkin0c] { background: #f0fdf4; border: 1px solid #bbf7d0; color: #15803d; }
.msg-warn[b-ojv1qkin0c] { background: #fff7ed; border: 1px solid #fed7aa; color: #92400e; }
.status-msg i[b-ojv1qkin0c] { font-size: 1.1rem; flex-shrink: 0; margin-top: 1px; }

/* ---- RIGHT SIDEBAR ---- */
/* Issue 6: sidebar breathing room */
.right-card[b-ojv1qkin0c] {
    background: white; border: 1px solid #e5e7eb;
    border-radius: 16px; padding: 20px 22px; margin-bottom: 16px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}
.rc-title[b-ojv1qkin0c] {
    font-size: 0.72rem; font-weight: 800; text-transform: uppercase;
    letter-spacing: 0.08em; color: #9ca3af; margin-bottom: 18px;
}

/* Issue 7: Circular progress � bigger, bolder */
.circ-wrap[b-ojv1qkin0c] { position: relative; width: 160px; height: 160px; margin: 0 auto 16px; }
.circ-svg[b-ojv1qkin0c] { width: 100%; height: 100%; }
.circ-center[b-ojv1qkin0c] {
    position: absolute; inset: 0;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.circ-pct[b-ojv1qkin0c] { font-size: 2.25rem; font-weight: 900; color: #111827; line-height: 1; letter-spacing: -0.03em; }
.circ-lbl[b-ojv1qkin0c] { font-size: 0.75rem; color: #9ca3af; font-weight: 700; margin-top: 4px; text-transform: uppercase; letter-spacing: 0.05em; }
.circ-steps-row[b-ojv1qkin0c] {
    display: flex; align-items: center; justify-content: center; gap: 10px;
    font-size: 0.8125rem; font-weight: 600; margin-top: 2px;
}
.csr-done[b-ojv1qkin0c] { color: #16a34a; }
.csr-sep[b-ojv1qkin0c] { color: #d1d5db; }
.csr-rem[b-ojv1qkin0c] { color: #6b7280; }

/* Issue 8: Go Live Readiness � proper hierarchy with badges */
.readiness-list[b-ojv1qkin0c] { display: flex; flex-direction: column; gap: 0; }
.rr[b-ojv1qkin0c] {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 0; border-bottom: 1px solid #f9fafb;
}
.rr:last-child[b-ojv1qkin0c] { border-bottom: none; }
.rr-ico[b-ojv1qkin0c] { width: 20px; height: 20px; text-align: center; font-size: 0.9rem; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.rr-label[b-ojv1qkin0c] { flex: 1; font-size: 0.875rem; font-weight: 500; }
.rr-ready .rr-ico[b-ojv1qkin0c] { color: #059669; }
.rr-ready .rr-label[b-ojv1qkin0c] { color: #374151; }
.rr-blocked .rr-ico[b-ojv1qkin0c] { color: #d1d5db; }
.rr-blocked .rr-label[b-ojv1qkin0c] { color: #9ca3af; }
/* Status badge on readiness rows */
.rr-badge[b-ojv1qkin0c] {
    font-size: 0.68rem; font-weight: 800; padding: 3px 9px;
    border-radius: 999px; flex-shrink: 0; letter-spacing: 0.04em;
    text-transform: uppercase;
}
.rr-badge-ready[b-ojv1qkin0c] { background: #dcfce7; color: #15803d; }
.rr-badge-blocked[b-ojv1qkin0c] { background: #f3f4f6; color: #9ca3af; }

/* Layer heatmap */
.heatmap-list[b-ojv1qkin0c] { display: flex; flex-direction: column; gap: 12px; }
.hm-row[b-ojv1qkin0c] { display: flex; align-items: center; gap: 10px; }
.hm-label[b-ojv1qkin0c] { font-size: 0.8rem; font-weight: 600; color: #4b5563; width: 120px; flex-shrink: 0; }
/* Issue 4: thicker bars */
.hm-bar-wrap[b-ojv1qkin0c] { flex: 1; height: 10px; background: #e2e8f0; border-radius: 999px; overflow: hidden; }
.hm-bar[b-ojv1qkin0c] { height: 100%; border-radius: 999px; transition: width 0.5s; min-width: 6px; }
.hm-pct[b-ojv1qkin0c] { font-size: 0.8rem; font-weight: 700; color: #374151; min-width: 36px; text-align: right; }

/* Issue 11: Critical gaps � softer red */
.rc-critical[b-ojv1qkin0c] { border-color: #fecaca; background: #fef2f2; }
.rc-title-critical[b-ojv1qkin0c] { color: #dc2626; }
.gap-row[b-ojv1qkin0c] {
    display: flex; align-items: center; gap: 12px;
    padding: 11px 0; border-bottom: 1px solid #fee2e2;
}
.gap-row:last-child[b-ojv1qkin0c] { border-bottom: none; }
.gap-ico[b-ojv1qkin0c] { font-size: 1rem; color: #f87171; flex-shrink: 0; width: 20px; text-align: center; }
.gap-body[b-ojv1qkin0c] { flex: 1; min-width: 0; }
.gap-title[b-ojv1qkin0c] { font-size: 0.875rem; font-weight: 700; color: #991b1b; }
.gap-sub[b-ojv1qkin0c] { font-size: 0.78rem; color: #b91c1c; margin-top: 2px; line-height: 1.4; }
.gap-btn[b-ojv1qkin0c] {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 6px 14px; font-size: 0.78rem; font-weight: 700;
    border-radius: 7px; border: 1px solid #fca5a5;
    background: white; color: #dc2626; cursor: pointer; flex-shrink: 0;
    transition: all 0.15s;
}
.gap-btn:hover[b-ojv1qkin0c] { background: #fee2e2; border-color: #f87171; }

/* Unlock operations list */
.unlock-list[b-ojv1qkin0c] { display: flex; flex-direction: column; gap: 0; }
.ul-row[b-ojv1qkin0c] {
    display: flex; align-items: center; gap: 13px;
    padding: 12px 0; border-bottom: 1px solid #f9fafb;
}
.ul-row:last-child[b-ojv1qkin0c] { border-bottom: none; }
.ul-icon[b-ojv1qkin0c] {
    width: 40px; height: 40px; border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    font-size: 0.95rem; flex-shrink: 0;
}
.ul-on .ul-icon[b-ojv1qkin0c] { background: #dcfce7; color: #16a34a; }
.ul-off .ul-icon[b-ojv1qkin0c] { background: #f3f4f6; color: #9ca3af; }
.ul-info[b-ojv1qkin0c] { flex: 1; min-width: 0; }
.ul-label[b-ojv1qkin0c] { font-size: 0.9rem; font-weight: 700; color: #1f2937; }
.ul-off .ul-label[b-ojv1qkin0c] { color: #9ca3af; }
.ul-sub[b-ojv1qkin0c] { font-size: 0.775rem; color: #9ca3af; margin-top: 2px; line-height: 1.3; }
.ul-status[b-ojv1qkin0c] { font-size: 0.7rem; font-weight: 800; padding: 4px 11px; border-radius: 999px; flex-shrink: 0; text-transform: uppercase; letter-spacing: 0.04em; }
.ul-active[b-ojv1qkin0c] { background: #dcfce7; color: #15803d; }
.ul-locked[b-ojv1qkin0c] { background: #f3f4f6; color: #9ca3af; }
/* /Pages/Principal/SchoolSetup/Summary.razor.rz.scp.css */
/* ── Root ─────────────────────────────────────────────────────────────────── */
.summary-root[b-t0xx65q5y2] {
    padding: 1.5rem 2rem;
    max-width: 1600px;
    font-family: var(--font-sans);
}

/* ── Loading / Error ──────────────────────────────────────────────────────── */
.summary-loading[b-t0xx65q5y2],
.summary-error[b-t0xx65q5y2] {
    display: flex; align-items: center; gap: 0.75rem;
    padding: 3rem; color: #6B7280; font-size: 0.9rem;
}
.btn-retry[b-t0xx65q5y2] {
    margin-left: 1rem; padding: 0.4rem 1rem;
    border: 1.5px solid #D1D5DB; border-radius: 8px;
    background: #fff; cursor: pointer; font-size: 0.85rem; font-weight: 600; color: #374151;
}

/* ── Header ───────────────────────────────────────────────────────────────── */
.summary-header[b-t0xx65q5y2] {
    display: flex; align-items: center; justify-content: space-between;
    flex-wrap: wrap; gap: 1rem; margin-bottom: 1.5rem;
}
.summary-header-left[b-t0xx65q5y2] { display: flex; align-items: center; gap: 0.75rem; }
.summary-title[b-t0xx65q5y2] { font-size: 1.3rem; font-weight: 800; color: #111827; margin: 0; letter-spacing: -0.02em; }
.summary-year-badge[b-t0xx65q5y2] {
    background: #ECFDF5; color: #065F46; font-size: 0.78rem; font-weight: 700;
    padding: 0.25rem 0.75rem; border-radius: 20px; border: 1px solid #A7F3D0;
}
.summary-header-right[b-t0xx65q5y2] { display: flex; gap: 0.625rem; align-items: center; }
.btn-primary[b-t0xx65q5y2], .btn-secondary[b-t0xx65q5y2] {
    display: inline-flex; align-items: center; gap: 0.45rem;
    padding: 0 1.25rem; height: 40px; border-radius: 8px;
    font-size: 0.85rem; font-weight: 600; text-decoration: none;
    cursor: pointer; border: none; transition: all 0.15s; white-space: nowrap;
}
.btn-primary[b-t0xx65q5y2]  { background: var(--color-teal-700); color: #fff; }
.btn-primary:hover[b-t0xx65q5y2]  { background: #0D6460; box-shadow: 0 2px 8px rgba(15,118,110,0.28); }
.btn-secondary[b-t0xx65q5y2] { background: #fff; color: #374151; border: 1.5px solid #D1D5DB; }
.btn-secondary:hover[b-t0xx65q5y2] { background: #F9FAFB; border-color: #9CA3AF; }

/* ── KPI Rows ─────────────────────────────────────────────────────────────── */
.kpi-row[b-t0xx65q5y2] {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 0.875rem;
    margin-bottom: 0.875rem;
}
.kpi-row-secondary[b-t0xx65q5y2] { margin-bottom: 1.25rem; }

.kpi-card[b-t0xx65q5y2] {
    background: #fff; border: 1px solid #F3F4F6; border-radius: 14px;
    padding: 1.125rem 1.125rem 1rem;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.04);
    transition: box-shadow 0.18s, transform 0.18s; position: relative;
}
.kpi-card:hover[b-t0xx65q5y2] { box-shadow: 0 6px 16px rgba(0,0,0,0.08); transform: translateY(-2px); }

/* Top accent borders */
.kpi-accent-teal[b-t0xx65q5y2]    { border-top: 3px solid var(--color-teal-700); }
.kpi-accent-blue[b-t0xx65q5y2]    { border-top: 3px solid #3B82F6; }
.kpi-accent-indigo[b-t0xx65q5y2]  { border-top: 3px solid #4F46E5; }
.kpi-accent-green[b-t0xx65q5y2]   { border-top: 3px solid #16A34A; }
.kpi-accent-emerald[b-t0xx65q5y2] { border-top: 3px solid #059669; }
.kpi-accent-purple[b-t0xx65q5y2]  { border-top: 3px solid #7C3AED; }
.kpi-accent-amber[b-t0xx65q5y2]   { border-top: 3px solid #D97706; }
.kpi-accent-rose[b-t0xx65q5y2]    { border-top: 3px solid #E11D48; }
.kpi-accent-cyan[b-t0xx65q5y2]    { border-top: 3px solid #0891B2; }
.kpi-card-alert[b-t0xx65q5y2] { border-top-color: #EF4444; background: #FFFBEB; }

.kpi-top[b-t0xx65q5y2] { display: flex; align-items: flex-start; justify-content: space-between; }
.kpi-icon[b-t0xx65q5y2] {
    width: 40px; height: 40px; border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1rem; flex-shrink: 0;
}
.kpi-icon-teal[b-t0xx65q5y2]    { background: var(--color-teal-100); color: var(--color-teal-700); }
.kpi-icon-blue[b-t0xx65q5y2]    { background: #DBEAFE; color: #1D4ED8; }
.kpi-icon-indigo[b-t0xx65q5y2]  { background: #E0E7FF; color: #4F46E5; }
.kpi-icon-green[b-t0xx65q5y2]   { background: #DCFCE7; color: #16A34A; }
.kpi-icon-emerald[b-t0xx65q5y2] { background: #D1FAE5; color: #059669; }
.kpi-icon-purple[b-t0xx65q5y2]  { background: #EDE9FE; color: #7C3AED; }
.kpi-icon-amber[b-t0xx65q5y2]   { background: #FEF3C7; color: #D97706; }
.kpi-icon-rose[b-t0xx65q5y2]    { background: #FFE4E6; color: #E11D48; }
.kpi-icon-cyan[b-t0xx65q5y2]    { background: #CFFAFE; color: #0891B2; }
.kpi-icon-danger[b-t0xx65q5y2]  { background: #FEE2E2; color: #DC2626; }

.kpi-num[b-t0xx65q5y2] { font-size: 2rem; font-weight: 800; line-height: 1; color: #111827; letter-spacing: -0.03em; }
.kpi-num-danger[b-t0xx65q5y2] { color: #DC2626; }
.kpi-num-warn[b-t0xx65q5y2]   { color: #D97706; }
.kpi-lbl[b-t0xx65q5y2] {
    font-size: 0.72rem; font-weight: 600; color: #6B7280;
    text-transform: uppercase; letter-spacing: 0.05em; margin-top: 0.3rem;
}
.kpi-sub[b-t0xx65q5y2]  { font-size: 0.72rem; color: #9CA3AF; margin-top: 0.15rem; font-weight: 500; }
.kpi-trend[b-t0xx65q5y2] { font-size: 0.72rem; font-weight: 600; display: flex; align-items: center; gap: 0.25rem; margin-top: 0.2rem; }
.kpi-trend-warn[b-t0xx65q5y2] { color: #D97706; }

/* ── Setup Completion Ring ────────────────────────────────────────────────── */
.kpi-card-ring[b-t0xx65q5y2] { display: flex; align-items: center; gap: 1rem; }
.ring-svg-wrap[b-t0xx65q5y2] { width: 72px; height: 72px; flex-shrink: 0; }
.ring-svg[b-t0xx65q5y2] { display: block; width: 100%; height: 100%; }
.ring-track[b-t0xx65q5y2] { fill: none; stroke: #F3F4F6; stroke-width: 4; }
.ring-fill[b-t0xx65q5y2]  { fill: none; stroke-width: 4; stroke-linecap: round; transition: stroke-dasharray 1.2s ease-out; }
.ring-green[b-t0xx65q5y2]  { stroke: #10B981; }
.ring-yellow[b-t0xx65q5y2] { stroke: #F59E0B; }
.ring-red[b-t0xx65q5y2]    { stroke: #EF4444; }
.ring-pct[b-t0xx65q5y2] { font-size: 1.75rem; font-weight: 800; color: #111827; line-height: 1; letter-spacing: -0.03em; }
.ring-lbl[b-t0xx65q5y2] { font-size: 0.72rem; font-weight: 600; color: #6B7280; text-transform: uppercase; letter-spacing: 0.05em; margin-top: 0.2rem; }
.ring-sub[b-t0xx65q5y2] { font-size: 0.7rem; color: #9CA3AF; margin-top: 0.2rem; }

/* ── Body two-column ──────────────────────────────────────────────────────── */
.summary-body[b-t0xx65q5y2] {
    display: grid; grid-template-columns: 1fr 360px; gap: 1.25rem; align-items: start;
}

/* ── Panels ───────────────────────────────────────────────────────────────── */
.summary-panel[b-t0xx65q5y2] {
    background: #fff; border: 1px solid #E5E7EB; border-radius: 14px;
    margin-bottom: 1.25rem; overflow: hidden; box-shadow: 0 1px 4px rgba(0,0,0,0.04);
}
.panel-header[b-t0xx65q5y2] {
    display: flex; align-items: center; justify-content: space-between;
    padding: 1rem 1.25rem; border-bottom: 1px solid #F3F4F6;
}
.panel-header-toggle[b-t0xx65q5y2] { cursor: pointer; user-select: none; }
.panel-header-toggle:hover[b-t0xx65q5y2] { background: #F9FAFB; }
.panel-title[b-t0xx65q5y2] { font-size: 0.875rem; font-weight: 700; color: #111827; display: flex; align-items: center; gap: 0.5rem; }
.panel-title i[b-t0xx65q5y2] { color: #6B7280; }
.toggle-icon[b-t0xx65q5y2] { color: #9CA3AF; font-size: 0.75rem; }
.panel-footer[b-t0xx65q5y2] { display: flex; gap: 1rem; padding: 0.75rem 1.25rem; border-top: 1px solid #F3F4F6; background: #F9FAFB; }
.footer-link[b-t0xx65q5y2] { font-size: 0.8rem; color: var(--color-teal-700); text-decoration: none; display: flex; align-items: center; gap: 0.35rem; font-weight: 700; }
.footer-link:hover[b-t0xx65q5y2] { text-decoration: underline; }

/* Filter row */
.class-filter-row[b-t0xx65q5y2] { display: flex; gap: 0.5rem; }
.filter-select[b-t0xx65q5y2], .filter-search[b-t0xx65q5y2] {
    font-size: 0.8rem; padding: 0.35rem 0.7rem; border: 1.5px solid #E5E7EB;
    border-radius: 8px; background: #fff; color: #374151; transition: border-color 0.15s;
}
.filter-search[b-t0xx65q5y2] { width: 150px; }
.filter-select:focus[b-t0xx65q5y2], .filter-search:focus[b-t0xx65q5y2] { outline: none; border-color: var(--color-teal-700); box-shadow: 0 0 0 3px rgba(15,118,110,0.1); }

/* ── Class Table ──────────────────────────────────────────────────────────── */
.class-table-scroll[b-t0xx65q5y2] { overflow-x: auto; }
.class-table[b-t0xx65q5y2] { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
.class-table thead th[b-t0xx65q5y2] {
    padding: 0.625rem 1rem; font-size: 0.71rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.05em; color: #6B7280;
    background: #F9FAFB; border-bottom: 1px solid #E5E7EB; white-space: nowrap;
}
.class-table tbody tr[b-t0xx65q5y2] { border-bottom: 1px solid #F9FAFB; transition: background 0.1s; }
.class-table tbody tr:hover[b-t0xx65q5y2] { background: #F9FAFB; }
.class-table td[b-t0xx65q5y2] { padding: 0.875rem 1rem; vertical-align: middle; color: #374151; }
.class-name-cell[b-t0xx65q5y2] { font-weight: 700; color: #111827; font-size: 0.875rem; }
.sections-cell[b-t0xx65q5y2] { display: flex; flex-wrap: wrap; gap: 0.3rem; align-items: center; }
.subject-count-cell[b-t0xx65q5y2] { text-align: center; font-weight: 700; color: #374151; }
.students-cell[b-t0xx65q5y2] { text-align: center; color: #374151; }
.row-danger td[b-t0xx65q5y2] { background: rgba(239, 68, 68, 0.025); }
.row-warn td[b-t0xx65q5y2]   { background: rgba(245, 158, 11, 0.025); }

.chip[b-t0xx65q5y2] { display: inline-block; padding: 0.2rem 0.6rem; border-radius: 12px; font-size: 0.73rem; font-weight: 600; }
.chip-section[b-t0xx65q5y2] { background: #EFF6FF; color: #1D4ED8; }
.chip-missing[b-t0xx65q5y2] { background: #FEF2F2; color: #DC2626; }
.chip-more[b-t0xx65q5y2]    { background: #F3F4F6; color: #6B7280; }

.status-badge[b-t0xx65q5y2] { display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.25rem 0.7rem; border-radius: 20px; font-size: 0.73rem; font-weight: 600; white-space: nowrap; }
.badge-ready[b-t0xx65q5y2]   { background: #ECFDF5; color: #065F46; }
.badge-warn[b-t0xx65q5y2]    { background: #FFFBEB; color: #92400E; }
.badge-missing[b-t0xx65q5y2] { background: #FEF2F2; color: #991B1B; }

/* ── Empty state ──────────────────────────────────────────────────────────── */
.class-empty-state[b-t0xx65q5y2] { display: flex; flex-direction: column; align-items: center; padding: 3rem 2rem; text-align: center; }
.empty-icon-wrap[b-t0xx65q5y2] {
    width: 68px; height: 68px; border-radius: 18px; background: #ECFDF5;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.75rem; color: #10B981; margin-bottom: 1.1rem;
}
.empty-title[b-t0xx65q5y2] { font-size: 1rem; font-weight: 700; color: #111827; margin-bottom: 0.4rem; }
.empty-desc[b-t0xx65q5y2]  { font-size: 0.85rem; color: #6B7280; margin-bottom: 1.25rem; max-width: 320px; line-height: 1.6; }
.btn-empty-cta[b-t0xx65q5y2] {
    display: inline-flex; align-items: center; gap: 0.45rem;
    padding: 0 1.25rem; height: 40px; border-radius: 8px;
    background: var(--color-teal-700); color: #fff; font-size: 0.85rem; font-weight: 600;
    text-decoration: none; transition: background 0.15s;
}
.btn-empty-cta:hover[b-t0xx65q5y2] { background: #0D6460; }

.badge-count[b-t0xx65q5y2] { display: inline-block; padding: 0.1rem 0.5rem; border-radius: 10px; font-size: 0.7rem; font-weight: 700; }
.badge-warn-count[b-t0xx65q5y2] { background: #FEF3C7; color: #92400E; }

/* ── Go Live Readiness ────────────────────────────────────────────────────── */
.readiness-list[b-t0xx65q5y2] { padding: 0.25rem 0; }
.readiness-row[b-t0xx65q5y2] {
    display: flex; align-items: center; gap: 0.75rem;
    padding: 0.875rem 1.25rem; border-bottom: 1px solid #F9FAFB;
    font-size: 0.875rem; font-weight: 500; transition: background 0.1s;
}
.readiness-row:last-child[b-t0xx65q5y2] { border-bottom: none; }
.readiness-row:hover[b-t0xx65q5y2] { background: #F9FAFB; }
.rr-ready[b-t0xx65q5y2], .rr-blocked[b-t0xx65q5y2] { color: #111827; }
.rr-ready > i[b-t0xx65q5y2]   { color: #10B981; }
.rr-blocked > i[b-t0xx65q5y2] { color: #D1D5DB; }
.rr-fix-link[b-t0xx65q5y2] {
    margin-left: auto; font-size: 0.78rem; color: var(--color-teal-700); text-decoration: none;
    font-weight: 700; padding: 0.2rem 0.65rem; background: #ECFDF5; border-radius: 6px;
}
.rr-fix-link:hover[b-t0xx65q5y2] { background: #D1FAE5; }

/* ── Action Needed ────────────────────────────────────────────────────────── */
.panel-actions-warn[b-t0xx65q5y2] { border: 1px solid #FCD34D; }
.panel-actions-warn .panel-header[b-t0xx65q5y2] { background: #FFFBEB; border-bottom-color: #FDE68A; }
.panel-actions-warn .panel-title i[b-t0xx65q5y2] { color: #D97706; }
.panel-actions-ok[b-t0xx65q5y2]  { border: 1px solid #A7F3D0; }
.panel-actions-ok  .panel-header[b-t0xx65q5y2] { background: #ECFDF5; border-bottom-color: #A7F3D0; }
.panel-actions-ok  .panel-title i[b-t0xx65q5y2] { color: #10B981; }

.actions-count-badge[b-t0xx65q5y2] {
    font-size: 0.72rem; font-weight: 700; padding: 0.15rem 0.6rem;
    background: #FEF3C7; color: #92400E; border-radius: 20px; border: 1px solid #FDE68A;
}
.action-list[b-t0xx65q5y2] { padding: 0.5rem 0; }
.action-item[b-t0xx65q5y2] {
    display: flex; gap: 0.75rem; align-items: flex-start;
    padding: 0.875rem 1.25rem; border-bottom: 1px solid rgba(0,0,0,0.04);
    font-size: 0.85rem; transition: background 0.1s;
}
.action-item:last-child[b-t0xx65q5y2] { border-bottom: none; }
.action-item:hover[b-t0xx65q5y2] { background: rgba(0,0,0,0.015); }
.action-item > i[b-t0xx65q5y2]    { margin-top: 0.15rem; flex-shrink: 0; font-size: 0.95rem; }
.action-danger > i[b-t0xx65q5y2]  { color: #DC2626; }
.action-warn   > i[b-t0xx65q5y2]  { color: #D97706; }
.action-ok     > i[b-t0xx65q5y2]  { color: #10B981; }
.action-body[b-t0xx65q5y2]   { display: flex; flex-direction: column; gap: 0.25rem; }
.action-text[b-t0xx65q5y2]   { color: #111827; font-weight: 600; line-height: 1.4; }
.action-link[b-t0xx65q5y2]   { font-size: 0.78rem; color: var(--color-teal-700); text-decoration: none; font-weight: 700; }
.action-link:hover[b-t0xx65q5y2] { text-decoration: underline; }
.action-all-good[b-t0xx65q5y2] { display: flex; align-items: center; gap: 0.75rem; padding: 1.25rem; font-size: 0.875rem; }
.action-stats[b-t0xx65q5y2] { padding: 0.625rem 1.25rem; border-top: 1px solid rgba(0,0,0,0.06); font-size: 0.78rem; color: #374151; background: rgba(0,0,0,0.02); }
.stat-ok[b-t0xx65q5y2] { color: #065F46; font-weight: 700; }

/* ── Operations Checklist ─────────────────────────────────────────────────── */
.checklist[b-t0xx65q5y2] { padding: 0.25rem 0; }
.cl-row[b-t0xx65q5y2] {
    display: flex; align-items: center; gap: 0.625rem;
    padding: 0.75rem 1.25rem; border-bottom: 1px solid #F9FAFB;
    font-size: 0.875rem; transition: background 0.1s;
}
.cl-row:last-child[b-t0xx65q5y2] { border-bottom: none; }
.cl-row:hover[b-t0xx65q5y2] { background: #F9FAFB; }
.cl-divider[b-t0xx65q5y2] { height: 1px; background: #E5E7EB; margin: 0.25rem 1.25rem; }

.cl-icon[b-t0xx65q5y2] { width: 18px; flex-shrink: 0; font-size: 0.9rem; display: flex; justify-content: center; }
.cl-done    .cl-icon i[b-t0xx65q5y2] { color: #10B981; }
.cl-missing .cl-icon i[b-t0xx65q5y2] { color: #EF4444; }
.cl-optional .cl-icon i[b-t0xx65q5y2] { color: #D1D5DB; }

.cl-label[b-t0xx65q5y2] { flex: 1; font-weight: 500; }
.cl-done    .cl-label[b-t0xx65q5y2]  { color: #111827; }
.cl-missing .cl-label[b-t0xx65q5y2]  { color: #111827; }
.cl-optional .cl-label[b-t0xx65q5y2] { color: #9CA3AF; }

.cl-optional-badge[b-t0xx65q5y2] { font-size: 0.66rem; padding: 0.1rem 0.45rem; background: #F3F4F6; color: #9CA3AF; border-radius: 8px; font-weight: 700; }
.cl-check-badge[b-t0xx65q5y2]    { font-size: 0.66rem; color: #065F46; font-weight: 700; background: #D1FAE5; padding: 0.1rem 0.5rem; border-radius: 8px; }
.cl-fix[b-t0xx65q5y2] {
    font-size: 0.75rem; color: var(--color-teal-700); text-decoration: none; font-weight: 700;
    padding: 0.15rem 0.55rem; background: #ECFDF5; border-radius: 5px; white-space: nowrap;
}
.cl-fix:hover[b-t0xx65q5y2] { background: #D1FAE5; }

/* ── Mobile ───────────────────────────────────────────────────────────────── */
@media (max-width: 1280px) { .summary-body[b-t0xx65q5y2] { grid-template-columns: 1fr 330px; } }
@media (max-width: 1024px) {
    .summary-body[b-t0xx65q5y2] { grid-template-columns: 1fr; }
    .kpi-row[b-t0xx65q5y2] { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 768px) {
    .summary-root[b-t0xx65q5y2] { padding: 0.75rem 1rem; }
    .kpi-row[b-t0xx65q5y2] { grid-template-columns: repeat(2, 1fr); }
    .summary-header[b-t0xx65q5y2] { flex-direction: column; align-items: flex-start; }
    .class-filter-row[b-t0xx65q5y2] { flex-direction: column; }
}
@media (max-width: 480px) {
    .kpi-row[b-t0xx65q5y2] { grid-template-columns: 1fr 1fr; }
    .kpi-num[b-t0xx65q5y2] { font-size: 1.6rem; }
}

.btn-retry[b-t0xx65q5y2] {
    margin-left: 1rem;
    padding: 0.35rem 0.9rem;
    border: 1px solid var(--color-neutral-300);
    border-radius: 6px;
    background: #fff;
    cursor: pointer;
    font-size: 0.85rem;
}

/* ── Header ───────────────────────────────────────────────────────────────── */
.summary-header[b-t0xx65q5y2] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-bottom: 1.25rem;
}
.summary-header-left[b-t0xx65q5y2] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}
.summary-title[b-t0xx65q5y2] {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--color-neutral-900);
    margin: 0;
}
.summary-year-badge[b-t0xx65q5y2] {
    background: var(--color-primary-50);
    color: var(--color-primary-600);
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.2rem 0.6rem;
    border-radius: 12px;
    border: 1px solid var(--color-primary-200);
}
.summary-header-right[b-t0xx65q5y2] {
    display: flex;
    gap: 0.5rem;
}
.btn-primary[b-t0xx65q5y2], .btn-secondary[b-t0xx65q5y2] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.45rem 1rem;
    border-radius: 6px;
    font-size: 0.82rem;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    border: none;
    transition: background 0.15s;
}
.btn-primary[b-t0xx65q5y2] {
    background: var(--color-primary-600);
    color: #fff;
}
.btn-primary:hover[b-t0xx65q5y2] { background: var(--color-primary-700); }
.btn-secondary[b-t0xx65q5y2] {
    background: var(--color-neutral-100);
    color: var(--color-neutral-700);
    border: 1px solid var(--color-neutral-200);
}
.btn-secondary:hover[b-t0xx65q5y2] { background: var(--color-neutral-200); }

/* ── KPI Strip ────────────────────────────────────────────────────────────── */
.kpi-strip[b-t0xx65q5y2] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
    gap: 0.65rem;
    margin-bottom: 1.25rem;
}
.kpi-card[b-t0xx65q5y2] {
    background: #fff;
    border: 1px solid var(--color-neutral-100);
    border-radius: 8px;
    padding: 0.75rem 0.75rem 0.6rem;
    text-align: center;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}
.kpi-value[b-t0xx65q5y2] {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--color-neutral-900);
    line-height: 1;
    margin-bottom: 0.3rem;
}
.kpi-warn[b-t0xx65q5y2] { color: var(--color-warning-600); }
.kpi-label[b-t0xx65q5y2] {
    font-size: 0.68rem;
    color: var(--color-neutral-500);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

/* Completion ring */
.kpi-card-completion[b-t0xx65q5y2] { display: flex; flex-direction: column; align-items: center; gap: 0.3rem; }
.kpi-ring-wrapper[b-t0xx65q5y2] { width: 52px; height: 52px; }
.circular-chart[b-t0xx65q5y2] { display: block; width: 100%; height: 100%; }
.circle-bg[b-t0xx65q5y2] { fill: none; stroke: var(--color-neutral-100); stroke-width: 3.8; }
.circle[b-t0xx65q5y2] { fill: none; stroke-width: 3.8; stroke-linecap: round; }
.chart-green .circle[b-t0xx65q5y2] { stroke: var(--color-success-500, #22c55e); }
.chart-yellow .circle[b-t0xx65q5y2] { stroke: var(--color-warning-500, #f59e0b); }
.chart-red .circle[b-t0xx65q5y2] { stroke: var(--color-danger-500, #ef4444); }
.percentage[b-t0xx65q5y2] { fill: var(--color-neutral-800); font-size: 8px; font-weight: 700; text-anchor: middle; }

/* ── Body two-column ──────────────────────────────────────────────────────── */
.summary-body[b-t0xx65q5y2] {
    display: grid;
    grid-template-columns: 1fr 340px;
    gap: 1rem;
    align-items: start;
}
@media (max-width: 1024px) {
    .summary-body[b-t0xx65q5y2] { grid-template-columns: 1fr; }
}

/* ── Panels ───────────────────────────────────────────────────────────────── */
.summary-panel[b-t0xx65q5y2] {
    background: #fff;
    border: 1px solid var(--color-neutral-100);
    border-radius: 10px;
    margin-bottom: 1rem;
    overflow: hidden;
    box-shadow: 0 1px 4px rgba(0,0,0,0.04);
}
.panel-header[b-t0xx65q5y2] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--color-neutral-100);
    background: var(--color-neutral-50);
}
.panel-header-toggle[b-t0xx65q5y2] { cursor: pointer; user-select: none; }
.panel-header-toggle:hover[b-t0xx65q5y2] { background: var(--color-neutral-100); }
.panel-title[b-t0xx65q5y2] {
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--color-neutral-700);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
.toggle-icon[b-t0xx65q5y2] { color: var(--color-neutral-400); font-size: 0.75rem; }
.panel-footer[b-t0xx65q5y2] {
    display: flex;
    gap: 1rem;
    padding: 0.6rem 1rem;
    border-top: 1px solid var(--color-neutral-100);
    background: var(--color-neutral-50);
}
.footer-link[b-t0xx65q5y2] {
    font-size: 0.8rem;
    color: var(--color-primary-600);
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 0.3rem;
    font-weight: 600;
}
.footer-link:hover[b-t0xx65q5y2] { text-decoration: underline; }

/* Filter row */
.class-filter-row[b-t0xx65q5y2] {
    display: flex;
    gap: 0.5rem;
}
.filter-select[b-t0xx65q5y2] {
    font-size: 0.78rem;
    padding: 0.25rem 0.5rem;
    border: 1px solid var(--color-neutral-200);
    border-radius: 5px;
    background: #fff;
    color: var(--color-neutral-700);
}
.filter-search[b-t0xx65q5y2] {
    font-size: 0.78rem;
    padding: 0.25rem 0.6rem;
    border: 1px solid var(--color-neutral-200);
    border-radius: 5px;
    width: 140px;
    color: var(--color-neutral-700);
}

/* ── Class Table ──────────────────────────────────────────────────────────── */
.class-table-scroll[b-t0xx65q5y2] { overflow-x: auto; }
.class-table[b-t0xx65q5y2] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.82rem;
}
.class-table thead th[b-t0xx65q5y2] {
    padding: 0.5rem 0.75rem;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-neutral-500);
    background: var(--color-neutral-50);
    border-bottom: 1px solid var(--color-neutral-100);
    white-space: nowrap;
}
.class-table tbody tr[b-t0xx65q5y2] {
    border-bottom: 1px solid var(--color-neutral-50);
    transition: background 0.1s;
}
.class-table tbody tr:hover[b-t0xx65q5y2] { background: var(--color-neutral-50); }
.class-table td[b-t0xx65q5y2] {
    padding: 0.5rem 0.75rem;
    vertical-align: middle;
    color: var(--color-neutral-800);
}
.class-name-cell[b-t0xx65q5y2] { font-weight: 600; }
.sections-cell[b-t0xx65q5y2] { display: flex; flex-wrap: wrap; gap: 0.25rem; align-items: center; }
.subject-count-cell[b-t0xx65q5y2], .students-cell[b-t0xx65q5y2] { text-align: center; }

.row-danger[b-t0xx65q5y2] { background: rgba(239, 68, 68, 0.03); }
.row-warn[b-t0xx65q5y2] { background: rgba(245, 158, 11, 0.03); }

.chip[b-t0xx65q5y2] {
    display: inline-block;
    padding: 0.15rem 0.5rem;
    border-radius: 10px;
    font-size: 0.72rem;
    font-weight: 600;
}
.chip-section[b-t0xx65q5y2] { background: var(--color-primary-50); color: var(--color-primary-700); }
.chip-missing[b-t0xx65q5y2] { background: var(--color-danger-50, #fef2f2); color: var(--color-danger-600, #dc2626); }
.chip-more[b-t0xx65q5y2] { background: var(--color-neutral-100); color: var(--color-neutral-500); }

.status-badge[b-t0xx65q5y2] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.2rem 0.6rem;
    border-radius: 10px;
    font-size: 0.72rem;
    font-weight: 600;
    white-space: nowrap;
}
.badge-ready[b-t0xx65q5y2] { background: var(--color-success-50, #f0fdf4); color: var(--color-success-700, #15803d); }
.badge-warn[b-t0xx65q5y2]  { background: var(--color-warning-50, #fffbeb); color: var(--color-warning-700, #b45309); }
.badge-missing[b-t0xx65q5y2] { background: var(--color-danger-50, #fef2f2); color: var(--color-danger-700, #b91c1c); }

.no-rows[b-t0xx65q5y2] { text-align: center; padding: 1.5rem; color: var(--color-neutral-400); font-style: italic; }

.badge-count[b-t0xx65q5y2] {
    display: inline-block;
    padding: 0.1rem 0.45rem;
    border-radius: 10px;
    font-size: 0.7rem;
    font-weight: 600;
}
.badge-warn-count[b-t0xx65q5y2] { background: var(--color-warning-100, #fef3c7); color: var(--color-warning-700, #b45309); }

/* ── Go Live Readiness ────────────────────────────────────────────────────── */
.readiness-list[b-t0xx65q5y2] { padding: 0.5rem 1rem; }
.readiness-row[b-t0xx65q5y2] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.45rem 0;
    border-bottom: 1px solid var(--color-neutral-50);
    font-size: 0.83rem;
    font-weight: 500;
}
.readiness-row:last-child[b-t0xx65q5y2] { border-bottom: none; }
.rr-ready[b-t0xx65q5y2] { color: var(--color-success-700, #15803d); }
.rr-blocked[b-t0xx65q5y2] { color: var(--color-neutral-600); }
.rr-fix-link[b-t0xx65q5y2] {
    margin-left: auto;
    font-size: 0.75rem;
    color: var(--color-primary-600);
    text-decoration: none;
    font-weight: 600;
}
.rr-fix-link:hover[b-t0xx65q5y2] { text-decoration: underline; }

/* ── Action Needed ────────────────────────────────────────────────────────── */
.action-list[b-t0xx65q5y2] { padding: 0.5rem 1rem; }
.action-item[b-t0xx65q5y2] {
    display: flex;
    gap: 0.6rem;
    align-items: flex-start;
    padding: 0.55rem 0;
    border-bottom: 1px solid var(--color-neutral-50);
    font-size: 0.82rem;
}
.action-item:last-child[b-t0xx65q5y2] { border-bottom: none; }
.action-item > i[b-t0xx65q5y2] { margin-top: 0.15rem; flex-shrink: 0; }
.action-danger > i[b-t0xx65q5y2] { color: var(--color-danger-500, #ef4444); }
.action-warn > i[b-t0xx65q5y2] { color: var(--color-warning-500, #f59e0b); }
.action-ok > i[b-t0xx65q5y2] { color: var(--color-success-500, #22c55e); }
.action-body[b-t0xx65q5y2] { display: flex; flex-direction: column; gap: 0.2rem; }
.action-text[b-t0xx65q5y2] { color: var(--color-neutral-700); font-weight: 500; }
.action-link[b-t0xx65q5y2] {
    font-size: 0.75rem;
    color: var(--color-primary-600);
    text-decoration: none;
    font-weight: 600;
}
.action-link:hover[b-t0xx65q5y2] { text-decoration: underline; }
.action-stats[b-t0xx65q5y2] {
    padding: 0.5rem 1rem;
    border-top: 1px solid var(--color-neutral-100);
    background: var(--color-neutral-50);
    font-size: 0.75rem;
}
.stat-ok[b-t0xx65q5y2] { color: var(--color-success-600, #16a34a); font-weight: 600; }

/* ── Operations Checklist ─────────────────────────────────────────────────── */
.checklist[b-t0xx65q5y2] { padding: 0.5rem 1rem; }
.cl-row[b-t0xx65q5y2] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0;
    border-bottom: 1px solid var(--color-neutral-50);
    font-size: 0.82rem;
}
.cl-row:last-child[b-t0xx65q5y2] { border-bottom: none; }
.cl-done > i[b-t0xx65q5y2] { color: var(--color-success-500, #22c55e); }
.cl-done > span[b-t0xx65q5y2] { color: var(--color-neutral-700); }
.cl-missing > i[b-t0xx65q5y2] { color: var(--color-danger-500, #ef4444); }
.cl-missing > span[b-t0xx65q5y2] { color: var(--color-neutral-700); }
.cl-optional > i[b-t0xx65q5y2] { color: var(--color-neutral-300); }
.cl-optional > span[b-t0xx65q5y2] { color: var(--color-neutral-500); }
.cl-optional-badge[b-t0xx65q5y2] {
    font-size: 0.65rem;
    padding: 0.1rem 0.4rem;
    background: var(--color-neutral-100);
    color: var(--color-neutral-500);
    border-radius: 8px;
    font-weight: 600;
}
.cl-fix[b-t0xx65q5y2] {
    margin-left: auto;
    font-size: 0.75rem;
    color: var(--color-primary-600);
    text-decoration: none;
    font-weight: 600;
}
.cl-fix:hover[b-t0xx65q5y2] { text-decoration: underline; }

/* ── Mobile ───────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
    .summary-root[b-t0xx65q5y2] { padding: 0.75rem; }
    .kpi-strip[b-t0xx65q5y2] { grid-template-columns: repeat(3, 1fr); }
    .summary-header[b-t0xx65q5y2] { flex-direction: column; align-items: flex-start; }
    .class-filter-row[b-t0xx65q5y2] { flex-direction: column; gap: 0.35rem; }
}
@media (max-width: 480px) {
    .kpi-strip[b-t0xx65q5y2] { grid-template-columns: repeat(2, 1fr); }
}
/* /Pages/Principal/SchoolSetup/YearRollover.razor.rz.scp.css */
/* ─────────────────────────────────────────────────────────────────────────── *
 * YearRollover.razor.css — Critical System Action Workflow                   *
 * ─────────────────────────────────────────────────────────────────────────── */

.yr-root[b-kic6tpb03k] {
    padding: 1.75rem 2rem;
    max-width: 1400px;
    margin: 0 auto;
    font-family: var(--font-sans);
}

/* ── Page Header ──────────────────────────────────────────────────────────── */

.yr-header[b-kic6tpb03k] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 1.25rem;
    flex-wrap: wrap;
    gap: 1rem;
}

.yr-header-eyebrow[b-kic6tpb03k] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: #dc2626;
    margin-bottom: 0.4rem;
}

.yr-eyebrow-icon[b-kic6tpb03k] { font-size: 0.75rem; }

.yr-title[b-kic6tpb03k] {
    font-size: 1.875rem;
    font-weight: 800;
    color: var(--color-neutral-900);
    margin: 0 0 0.3rem;
    line-height: 1.2;
}

.yr-subtitle[b-kic6tpb03k] {
    font-size: 0.875rem;
    color: var(--color-neutral-500);
    margin: 0;
    max-width: 520px;
}

.yr-year-transition[b-kic6tpb03k] {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    background: var(--color-neutral-50);
    border: 1px solid var(--color-neutral-200);
    border-radius: 12px;
    padding: 0.625rem 1rem;
}

.yr-year-current[b-kic6tpb03k] {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--color-neutral-600);
}

.yr-year-arrow[b-kic6tpb03k] {
    color: var(--color-neutral-400);
    font-size: 0.875rem;
}

.yr-year-next[b-kic6tpb03k] {
    font-size: 1.125rem;
    font-weight: 800;
    color: var(--color-primary-600);
}

/* ── Critical Banner ──────────────────────────────────────────────────────── */

.yr-critical-banner[b-kic6tpb03k] {
    display: flex;
    align-items: flex-start;
    gap: 0.875rem;
    background: #fff7ed;
    border: 1px solid #fdba74;
    border-left: 4px solid #f97316;
    border-radius: 12px;
    padding: 1rem 1.25rem;
    margin-bottom: 1.25rem;
}

.yr-critical-icon[b-kic6tpb03k] {
    font-size: 1.25rem;
    color: #ea580c;
    flex-shrink: 0;
    margin-top: 0.1rem;
}

.yr-critical-body[b-kic6tpb03k] {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    font-size: 0.875rem;
    line-height: 1.5;
    color: #7c2d12;
}

.yr-critical-body strong[b-kic6tpb03k] {
    font-size: 0.9375rem;
    font-weight: 700;
    color: #9a3412;
}

/* ── Workflow Ribbon ──────────────────────────────────────────────────────── */

.yr-workflow[b-kic6tpb03k] {
    display: flex;
    align-items: center;
    background: #fff;
    border: 1px solid var(--color-neutral-100);
    border-radius: 12px;
    padding: 1rem 1.5rem;
    margin-bottom: 1.25rem;
    gap: 0;
    box-shadow: 0 1px 4px rgba(0,0,0,0.05);
}

.yr-workflow-step[b-kic6tpb03k] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
    flex-shrink: 0;
}

.yr-workflow-step span[b-kic6tpb03k] {
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--color-neutral-400);
    text-align: center;
    white-space: nowrap;
}

.yr-wf-dot[b-kic6tpb03k] {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--color-neutral-100);
    color: var(--color-neutral-400);
    font-size: 0.75rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--color-neutral-200);
    transition: all 0.2s;
}

.yr-wf--active .yr-wf-dot[b-kic6tpb03k] {
    background: var(--color-primary-600);
    color: #fff;
    border-color: var(--color-primary-600);
    box-shadow: 0 0 0 4px var(--color-primary-100);
}

.yr-wf--active span[b-kic6tpb03k] {
    color: var(--color-primary-700);
    font-weight: 700;
}

.yr-wf--done .yr-wf-dot[b-kic6tpb03k] {
    background: #22c55e;
    color: #fff;
    border-color: #22c55e;
}

.yr-wf--done span[b-kic6tpb03k] {
    color: #166534;
}

.yr-workflow-line[b-kic6tpb03k] {
    flex: 1;
    height: 2px;
    background: var(--color-neutral-200);
    margin: 0 0.25rem;
    margin-bottom: 1.25rem;
    min-width: 20px;
}

.yr-wf-line--done[b-kic6tpb03k] {
    background: #22c55e;
}

/* ── Status Banners ───────────────────────────────────────────────────────── */

.yr-banner[b-kic6tpb03k] {
    display: flex;
    align-items: flex-start;
    gap: 0.875rem;
    padding: 0.875rem 1.25rem;
    border-radius: 10px;
    margin-bottom: 1.25rem;
    border-left: 4px solid transparent;
}

.yr-banner--pending[b-kic6tpb03k]  { background: #fffbeb; border-left-color: #f59e0b; color: #92400e; }
.yr-banner--rejected[b-kic6tpb03k] { background: #fef2f2; border-left-color: #ef4444; color: #991b1b; }
.yr-banner--approved[b-kic6tpb03k] { background: #f0fdf4; border-left-color: #22c55e; color: #14532d; }

.yr-banner-icon[b-kic6tpb03k] { font-size: 1.125rem; flex-shrink: 0; margin-top: 0.1rem; }

.yr-banner-body[b-kic6tpb03k] {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    font-size: 0.875rem;
    line-height: 1.55;
}

.yr-banner-body strong[b-kic6tpb03k] { font-weight: 700; font-size: 0.9375rem; }

/* ── KPI Row ──────────────────────────────────────────────────────────────── */

.yr-kpi-row[b-kic6tpb03k] {
    display: grid;
    grid-template-columns: 1fr 1fr repeat(5, 0.7fr);
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}

/* Hero cards */
.yr-kpi[b-kic6tpb03k] {
    background: #fff;
    border: 1px solid var(--color-neutral-100);
    border-radius: 12px;
    padding: 1rem 1.125rem;
    display: flex;
    align-items: center;
    gap: 0.875rem;
    box-shadow: 0 2px 6px rgba(0,0,0,0.05);
    transition: box-shadow 0.2s, transform 0.15s;
}

.yr-kpi:hover[b-kic6tpb03k] {
    box-shadow: 0 4px 12px rgba(0,0,0,0.09);
    transform: translateY(-1px);
}

.yr-kpi--hero[b-kic6tpb03k] { padding: 1.25rem; }

.yr-kpi-icon-wrap[b-kic6tpb03k] {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.125rem;
    flex-shrink: 0;
}

.yr-kpi--hero .yr-kpi-icon-wrap[b-kic6tpb03k] { width: 48px; height: 48px; font-size: 1.25rem; }
.yr-kpi--secondary .yr-kpi-icon-wrap[b-kic6tpb03k] { width: 36px; height: 36px; font-size: 0.9rem; }

.yr-kpi-icon--green[b-kic6tpb03k]  { background: #dcfce7; color: #16a34a; }
.yr-kpi-icon--amber[b-kic6tpb03k]  { background: #fef3c7; color: #d97706; }
.yr-kpi-icon--blue[b-kic6tpb03k]   { background: #dbeafe; color: #2563eb; }
.yr-kpi-icon--purple[b-kic6tpb03k] { background: #ede9fe; color: #7c3aed; }
.yr-kpi-icon--teal[b-kic6tpb03k]   { background: var(--color-teal-100); color: var(--color-teal-600); }
.yr-kpi-icon--gray[b-kic6tpb03k]   { background: #f1f5f9; color: #64748b; }

.yr-kpi-content[b-kic6tpb03k] { min-width: 0; }

.yr-kpi-label[b-kic6tpb03k] {
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-neutral-400);
    margin-bottom: 0.2rem;
}

.yr-kpi-value[b-kic6tpb03k] {
    font-size: 2rem;
    font-weight: 800;
    color: var(--color-neutral-900);
    line-height: 1.1;
}

.yr-kpi-value--sm[b-kic6tpb03k] { font-size: 1.25rem; }

.yr-kpi-sub[b-kic6tpb03k] {
    font-size: 0.75rem;
    color: var(--color-neutral-400);
    margin-top: 0.15rem;
}

/* ── Body Grid ────────────────────────────────────────────────────────────── */

.yr-body[b-kic6tpb03k] {
    display: grid;
    grid-template-columns: 380px 1fr;
    gap: 1.25rem;
    align-items: flex-start;
}

.yr-left[b-kic6tpb03k] { display: flex; flex-direction: column; gap: 1rem; }
.yr-right[b-kic6tpb03k] { display: flex; flex-direction: column; gap: 1rem; }

/* ── Shared Card Base ─────────────────────────────────────────────────────── */

.yr-validation-card[b-kic6tpb03k],
.yr-audit-card[b-kic6tpb03k],
.yr-action-card[b-kic6tpb03k],
.yr-timeline-card[b-kic6tpb03k],
.yr-danger-card[b-kic6tpb03k] {
    background: #fff;
    border: 1px solid var(--color-neutral-200);
    border-radius: 12px;
    padding: 1.25rem;
    box-shadow: 0 2px 6px rgba(0,0,0,0.05);
}

.yr-card-title[b-kic6tpb03k] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--color-neutral-800);
    margin-bottom: 1rem;
    padding-bottom: 0.625rem;
    border-bottom: 1px solid var(--color-neutral-100);
}

.yr-card-title i[b-kic6tpb03k] { color: var(--color-primary-500); font-size: 0.875rem; }

/* ── Pre-check Validation ─────────────────────────────────────────────────── */

.yr-checks[b-kic6tpb03k] { display: flex; flex-direction: column; gap: 0.5rem; }

.yr-check[b-kic6tpb03k] {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    font-size: 0.8125rem;
    padding: 0.425rem 0;
    border-bottom: 1px solid var(--color-neutral-50);
    line-height: 1.4;
}

.yr-check:last-child[b-kic6tpb03k] { border-bottom: none; }

.yr-check--ok[b-kic6tpb03k]  { color: #166534; }
.yr-check--ok i[b-kic6tpb03k]  { color: #16a34a; font-size: 0.875rem; }
.yr-check--warn[b-kic6tpb03k]  { color: #92400e; }
.yr-check--warn i[b-kic6tpb03k]  { color: #d97706; font-size: 0.875rem; }

/* ── Audit Panel ──────────────────────────────────────────────────────────── */

.yr-audit-rows[b-kic6tpb03k] { display: flex; flex-direction: column; }

.yr-audit-row[b-kic6tpb03k] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    padding: 0.35rem 0;
    border-bottom: 1px solid var(--color-neutral-50);
    font-size: 0.8125rem;
}

.yr-audit-row:last-child[b-kic6tpb03k] { border-bottom: none; }

.yr-audit-label[b-kic6tpb03k] { color: var(--color-neutral-500); font-weight: 500; }
.yr-audit-value[b-kic6tpb03k] { color: var(--color-neutral-800); font-weight: 600; text-align: right; }
.yr-audit-value--mono[b-kic6tpb03k] { font-family: monospace; font-size: 0.75rem; }

.yr-status[b-kic6tpb03k] {
    display: inline-block;
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.yr-status--draft[b-kic6tpb03k]    { background: var(--color-neutral-100); color: var(--color-neutral-600); }
.yr-status--pending[b-kic6tpb03k]  { background: #fef3c7; color: #92400e; }
.yr-status--approved[b-kic6tpb03k] { background: #dcfce7; color: #166534; }
.yr-status--rejected[b-kic6tpb03k] { background: #fef2f2; color: #991b1b; }

/* ── Action Card ──────────────────────────────────────────────────────────── */

.yr-action-card--disabled[b-kic6tpb03k] { background: var(--color-neutral-50); }

.yr-action-info[b-kic6tpb03k] {
    display: flex;
    align-items: flex-start;
    gap: 0.625rem;
    font-size: 0.8125rem;
    line-height: 1.6;
    padding: 0.75rem;
    border-radius: 8px;
}

.yr-action-info--pending[b-kic6tpb03k] { background: #fffbeb; color: #92400e; border: 1px solid #fde68a; }
.yr-action-info--done[b-kic6tpb03k]    { background: #f0fdf4; color: #166534; border: 1px solid #bbf7d0; }

/* ── Year-end window lock ─────────────────────────────────────────────────── */

.yr-window-lock[b-kic6tpb03k] {
    display: flex;
    align-items: flex-start;
    gap: 0.875rem;
    background: #fff7ed;
    border: 1px solid #fdba74;
    border-radius: 10px;
    padding: 1rem;
}

.yr-window-lock-icon[b-kic6tpb03k] {
    width: 40px;
    height: 40px;
    background: #fef3c7;
    color: #d97706;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    flex-shrink: 0;
}

.yr-window-lock-body[b-kic6tpb03k] {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    font-size: 0.8125rem;
    color: #92400e;
    line-height: 1.5;
}

.yr-window-lock-body strong[b-kic6tpb03k] { font-size: 0.875rem; font-weight: 700; color: #78350f; }

.yr-window-countdown[b-kic6tpb03k] {
    display: inline-block;
    margin-top: 0.25rem;
    background: #fef3c7;
    color: #92400e;
    font-size: 0.75rem;
    font-weight: 700;
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
    border: 1px solid #fde68a;
}

.yr-field[b-kic6tpb03k] { margin-bottom: 0.875rem; }

.yr-label[b-kic6tpb03k] {
    display: block;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--color-neutral-700);
    margin-bottom: 0.4rem;
}

.yr-label-optional[b-kic6tpb03k] { font-weight: 400; color: var(--color-neutral-400); font-size: 0.75rem; }

.yr-textarea[b-kic6tpb03k] {
    width: 100%;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--color-neutral-200);
    border-radius: 8px;
    font-size: 0.875rem;
    font-family: var(--font-sans);
    color: var(--color-neutral-800);
    resize: vertical;
    box-sizing: border-box;
    transition: border-color 0.15s, box-shadow 0.15s;
    background: #fff;
}

.yr-textarea:focus[b-kic6tpb03k] {
    outline: none;
    border-color: var(--color-primary-400);
    box-shadow: 0 0 0 3px var(--color-primary-50);
}

.yr-textarea:disabled[b-kic6tpb03k] {
    background: var(--color-neutral-50);
    color: var(--color-neutral-400);
    cursor: not-allowed;
}

.yr-btn-request[b-kic6tpb03k] {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0 1rem;
    height: 48px;
    background: var(--color-primary-600);
    color: #fff;
    font-size: 0.9375rem;
    font-weight: 600;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    transition: background 0.15s, transform 0.1s, box-shadow 0.15s;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}

.yr-btn-request:hover:not(:disabled)[b-kic6tpb03k] {
    background: var(--color-primary-700);
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(0,0,0,0.2);
}

.yr-btn-request:active:not(:disabled)[b-kic6tpb03k] { transform: translateY(0); }

.yr-btn-request:disabled[b-kic6tpb03k] {
    background: var(--color-neutral-300);
    cursor: not-allowed;
    box-shadow: none;
}

/* ── Timeline (Right Panel) ───────────────────────────────────────────────── */

.yr-timeline[b-kic6tpb03k] { display: flex; flex-direction: column; }

.yr-tl-item[b-kic6tpb03k] {
    display: grid;
    grid-template-columns: 44px 16px 1fr;
    gap: 0 0.75rem;
    align-items: flex-start;
}

.yr-tl-marker[b-kic6tpb03k] {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    flex-shrink: 0;
    grid-column: 1;
    grid-row: 1;
}

.yr-tl-marker--green[b-kic6tpb03k]  { background: #dcfce7; color: #16a34a; }
.yr-tl-marker--blue[b-kic6tpb03k]   { background: #dbeafe; color: #2563eb; }
.yr-tl-marker--purple[b-kic6tpb03k] { background: #ede9fe; color: #7c3aed; }
.yr-tl-marker--amber[b-kic6tpb03k]  { background: #fef3c7; color: #d97706; }

.yr-tl-connector[b-kic6tpb03k] {
    grid-column: 1;
    grid-row: 2;
    width: 2px;
    height: 100%;
    min-height: 20px;
    background: var(--color-neutral-200);
    margin: 0 auto;
    align-self: stretch;
}

.yr-tl-connector--last[b-kic6tpb03k] { display: none; }

.yr-tl-content[b-kic6tpb03k] {
    grid-column: 3;
    grid-row: 1 / span 2;
    padding-bottom: 1.25rem;
}

.yr-tl-title[b-kic6tpb03k] {
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--color-neutral-800);
    margin-bottom: 0.3rem;
    padding-top: 0.625rem;
}

.yr-tl-desc[b-kic6tpb03k] {
    font-size: 0.8125rem;
    color: var(--color-neutral-500);
    line-height: 1.55;
}

.yr-tl-desc strong[b-kic6tpb03k] { color: var(--color-neutral-700); }

/* ── Danger Zone ──────────────────────────────────────────────────────────── */

.yr-danger-card[b-kic6tpb03k] {
    background: #fef2f2;
    border-color: #fca5a5;
    border-left: 4px solid #ef4444;
}

.yr-danger-header[b-kic6tpb03k] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    font-weight: 700;
    color: #991b1b;
    margin-bottom: 0.75rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid #fecaca;
}

.yr-danger-header i[b-kic6tpb03k] { color: #ef4444; }

.yr-danger-list[b-kic6tpb03k] {
    margin: 0;
    padding: 0 0 0 1.125rem;
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}

.yr-danger-list li[b-kic6tpb03k] {
    font-size: 0.8125rem;
    color: #b91c1c;
    line-height: 1.5;
}

.yr-danger-list li strong[b-kic6tpb03k] { color: #991b1b; }

/* ── Confirmation Modal ───────────────────────────────────────────────────── */

.yr-modal-overlay[b-kic6tpb03k] {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.5);
    backdrop-filter: blur(2px);
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

.yr-modal[b-kic6tpb03k] {
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.25);
    width: 100%;
    max-width: 520px;
    overflow: hidden;
    animation: yr-modal-in-b-kic6tpb03k 0.2s ease;
}

@keyframes yr-modal-in-b-kic6tpb03k {
    from { opacity: 0; transform: scale(0.96) translateY(-8px); }
    to   { opacity: 1; transform: scale(1) translateY(0); }
}

.yr-modal-header[b-kic6tpb03k] {
    display: flex;
    align-items: flex-start;
    gap: 0.875rem;
    padding: 1.5rem 1.5rem 1.25rem;
    background: #fff7ed;
    border-bottom: 1px solid #fed7aa;
}

.yr-modal-warn-icon[b-kic6tpb03k] { font-size: 1.75rem; color: #f97316; margin-top: 0.1rem; flex-shrink: 0; }
.yr-modal-title[b-kic6tpb03k]     { font-size: 1.0625rem; font-weight: 800; color: var(--color-neutral-900); margin-bottom: 0.2rem; }
.yr-modal-sub[b-kic6tpb03k]       { font-size: 0.8125rem; color: var(--color-neutral-500); }

.yr-modal-body[b-kic6tpb03k] { padding: 1.25rem 1.5rem; }

.yr-modal-summary[b-kic6tpb03k] {
    background: var(--color-neutral-50);
    border: 1px solid var(--color-neutral-100);
    border-radius: 10px;
    padding: 0.875rem;
    margin-bottom: 1.25rem;
}

.yr-modal-row[b-kic6tpb03k] {
    display: flex;
    justify-content: space-between;
    font-size: 0.8125rem;
    padding: 0.35rem 0;
    border-bottom: 1px solid var(--color-neutral-100);
}

.yr-modal-row:last-child[b-kic6tpb03k] { border-bottom: none; }
.yr-modal-row span[b-kic6tpb03k] { color: var(--color-neutral-500); }
.yr-modal-row strong[b-kic6tpb03k] { color: var(--color-neutral-800); }

.yr-modal-checklist[b-kic6tpb03k] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.yr-modal-check-item[b-kic6tpb03k] {
    display: flex;
    align-items: flex-start;
    gap: 0.625rem;
    cursor: pointer;
    font-size: 0.8125rem;
    color: var(--color-neutral-700);
    line-height: 1.5;
}

.yr-modal-check-item input[type="checkbox"][b-kic6tpb03k] {
    margin-top: 0.15rem;
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    cursor: pointer;
    accent-color: var(--color-primary-600);
}

.yr-modal-footer[b-kic6tpb03k] {
    display: flex;
    gap: 0.75rem;
    padding: 1rem 1.5rem;
    border-top: 1px solid var(--color-neutral-100);
    background: var(--color-neutral-50);
}

.yr-modal-btn[b-kic6tpb03k] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    height: 42px;
    padding: 0 1.25rem;
    border-radius: 8px;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    border: 1px solid transparent;
    transition: all 0.15s;
}

.yr-modal-btn--cancel[b-kic6tpb03k] {
    background: #fff;
    border-color: var(--color-neutral-200);
    color: var(--color-neutral-700);
}

.yr-modal-btn--cancel:hover[b-kic6tpb03k] { background: var(--color-neutral-50); }

.yr-modal-btn--confirm[b-kic6tpb03k] {
    flex: 1;
    justify-content: center;
    background: var(--color-primary-600);
    color: #fff;
    border-color: var(--color-primary-600);
    box-shadow: 0 2px 8px rgba(0,0,0,0.12);
}

.yr-modal-btn--confirm:hover:not(:disabled)[b-kic6tpb03k] {
    background: var(--color-primary-700);
    transform: translateY(-1px);
}

.yr-modal-btn--confirm:disabled[b-kic6tpb03k] {
    background: var(--color-neutral-300);
    border-color: var(--color-neutral-300);
    cursor: not-allowed;
    box-shadow: none;
}

/* ── Loading ──────────────────────────────────────────────────────────────── */

.yr-loading[b-kic6tpb03k] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    color: var(--color-neutral-500);
    padding: 3rem;
    justify-content: center;
    font-size: 0.875rem;
}

.yr-spinner[b-kic6tpb03k] {
    width: 24px;
    height: 24px;
    border: 3px solid var(--color-neutral-200);
    border-top-color: var(--color-primary-500);
    border-radius: 50%;
    animation: yr-spin-b-kic6tpb03k 0.8s linear infinite;
    flex-shrink: 0;
}

.yr-btn-spinner[b-kic6tpb03k] {
    width: 14px;
    height: 14px;
    border: 2px solid rgba(255,255,255,0.4);
    border-top-color: #fff;
    border-radius: 50%;
    animation: yr-spin-b-kic6tpb03k 0.7s linear infinite;
    flex-shrink: 0;
}

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

/* ── Toast ────────────────────────────────────────────────────────────────── */

.yr-toast[b-kic6tpb03k] {
    position: fixed;
    bottom: 1.5rem;
    right: 1.5rem;
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.75rem 1.125rem;
    border-radius: 10px;
    font-size: 0.875rem;
    font-weight: 600;
    box-shadow: 0 4px 20px rgba(0,0,0,0.14);
    z-index: 3000;
    animation: yr-fadein-b-kic6tpb03k 0.25s ease;
    max-width: 360px;
}

.yr-toast--success[b-kic6tpb03k] { background: #f0fdf4; color: #166534; border: 1px solid #bbf7d0; }
.yr-toast--error[b-kic6tpb03k]   { background: #fef2f2; color: #991b1b; border: 1px solid #fecaca; }

@keyframes yr-fadein-b-kic6tpb03k {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ── Responsive ───────────────────────────────────────────────────────────── */

@media (max-width: 1200px) {
    .yr-kpi-row[b-kic6tpb03k] { grid-template-columns: 1fr 1fr 1fr 1fr; }
    .yr-kpi--secondary:nth-child(5)[b-kic6tpb03k],
    .yr-kpi--secondary:nth-child(6)[b-kic6tpb03k] { grid-column: auto; }
}

@media (max-width: 1024px) {
    .yr-kpi-row[b-kic6tpb03k] { grid-template-columns: 1fr 1fr 1fr; }
    .yr-body[b-kic6tpb03k] { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
    .yr-root[b-kic6tpb03k] { padding: 1rem; }
    .yr-kpi-row[b-kic6tpb03k] { grid-template-columns: 1fr 1fr; }
    .yr-title[b-kic6tpb03k] { font-size: 1.5rem; }
    .yr-workflow[b-kic6tpb03k] { flex-wrap: wrap; gap: 0.5rem; padding: 0.875rem; }
    .yr-workflow-line[b-kic6tpb03k] { min-width: 16px; }
}

@media (max-width: 480px) {
    .yr-kpi-row[b-kic6tpb03k] { grid-template-columns: 1fr 1fr; }
    .yr-kpi--hero .yr-kpi-value[b-kic6tpb03k] { font-size: 1.625rem; }
}


.yr-root[b-kic6tpb03k] {
    padding: 1.5rem 2rem;
    max-width: 1200px;
    margin: 0 auto;
    font-family: var(--font-sans);
}

/* ── Header ──────────────────────────────────────────────────────────────── */

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

.yr-title[b-kic6tpb03k] {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--color-neutral-900);
    margin: 0 0 0.25rem;
}

.yr-subtitle[b-kic6tpb03k] {
    font-size: 0.875rem;
    color: var(--color-neutral-500);
    margin: 0;
}

.yr-badge[b-kic6tpb03k] {
    background: var(--color-primary-50);
    color: var(--color-primary-700);
    font-size: 0.875rem;
    font-weight: 700;
    padding: 0.35rem 0.875rem;
    border-radius: 999px;
    border: 1px solid var(--color-primary-200);
    white-space: nowrap;
}

/* ── Loading ─────────────────────────────────────────────────────────────── */

.yr-loading[b-kic6tpb03k] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    color: var(--color-neutral-500);
    padding: 3rem;
    justify-content: center;
}

.yr-spinner[b-kic6tpb03k] {
    width: 24px;
    height: 24px;
    border: 3px solid var(--color-neutral-200);
    border-top-color: var(--color-primary-500);
    border-radius: 50%;
    animation: yr-spin-b-kic6tpb03k 0.8s linear infinite;
}

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

/* ── Status Banners ──────────────────────────────────────────────────────── */

.yr-banner[b-kic6tpb03k] {
    display: flex;
    align-items: flex-start;
    gap: 0.875rem;
    padding: 0.875rem 1.125rem;
    border-radius: 10px;
    margin-bottom: 1.25rem;
    border-left: 4px solid transparent;
}

.yr-banner--pending[b-kic6tpb03k] {
    background: #fffbeb;
    border-left-color: #f59e0b;
    color: #92400e;
}

.yr-banner--rejected[b-kic6tpb03k] {
    background: #fef2f2;
    border-left-color: #ef4444;
    color: #991b1b;
}

.yr-banner--approved[b-kic6tpb03k] {
    background: #f0fdf4;
    border-left-color: #22c55e;
    color: #14532d;
}

.yr-banner-icon[b-kic6tpb03k] {
    font-size: 1.25rem;
    flex-shrink: 0;
    margin-top: 0.1rem;
}

.yr-banner-body[b-kic6tpb03k] {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    font-size: 0.875rem;
    line-height: 1.5;
}

.yr-banner-body strong[b-kic6tpb03k] {
    font-weight: 700;
    font-size: 0.9375rem;
}

/* ── KPI Row ─────────────────────────────────────────────────────────────── */

.yr-kpi-row[b-kic6tpb03k] {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}

.yr-kpi[b-kic6tpb03k] {
    background: #fff;
    border: 1px solid var(--color-neutral-100);
    border-radius: 10px;
    padding: 0.875rem 1rem;
    border-top: 3px solid transparent;
}

.yr-kpi--blue[b-kic6tpb03k]   { border-top-color: #3b82f6; }
.yr-kpi--purple[b-kic6tpb03k] { border-top-color: #8b5cf6; }
.yr-kpi--green[b-kic6tpb03k]  { border-top-color: #22c55e; }
.yr-kpi--amber[b-kic6tpb03k]  { border-top-color: #f59e0b; }
.yr-kpi--teal[b-kic6tpb03k]   { border-top-color: var(--color-teal-500); }
.yr-kpi--gray[b-kic6tpb03k]   { border-top-color: #94a3b8; }

.yr-kpi-label[b-kic6tpb03k] {
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-neutral-400);
    margin-bottom: 0.35rem;
}

.yr-kpi-value[b-kic6tpb03k] {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--color-neutral-900);
    line-height: 1.2;
}

/* ── Body Grid ───────────────────────────────────────────────────────────── */

.yr-body[b-kic6tpb03k] {
    display: grid;
    grid-template-columns: 380px 1fr;
    gap: 1.25rem;
    align-items: flex-start;
}

/* ── Action Card ─────────────────────────────────────────────────────────── */

.yr-action-card[b-kic6tpb03k] {
    background: #fff;
    border: 1px solid var(--color-neutral-200);
    border-radius: 12px;
    padding: 1.25rem;
    box-shadow: 0 1px 4px rgba(0,0,0,0.06);
}

.yr-action-card--disabled[b-kic6tpb03k] {
    background: var(--color-neutral-50);
}

.yr-action-title[b-kic6tpb03k] {
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--color-neutral-800);
    margin-bottom: 0.875rem;
}

.yr-action-info[b-kic6tpb03k] {
    font-size: 0.8125rem;
    color: var(--color-neutral-500);
    line-height: 1.6;
    padding: 0.75rem;
    background: var(--color-neutral-50);
    border-radius: 8px;
    border: 1px solid var(--color-neutral-100);
}

.yr-action-info--done[b-kic6tpb03k] {
    background: #f0fdf4;
    color: #166534;
    border-color: #bbf7d0;
}

.yr-field[b-kic6tpb03k] {
    margin-bottom: 1rem;
}

.yr-label[b-kic6tpb03k] {
    display: block;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--color-neutral-600);
    margin-bottom: 0.375rem;
}

.yr-textarea[b-kic6tpb03k] {
    width: 100%;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--color-neutral-200);
    border-radius: 8px;
    font-size: 0.875rem;
    font-family: var(--font-sans);
    color: var(--color-neutral-800);
    resize: vertical;
    box-sizing: border-box;
    transition: border-color 0.15s;
}

.yr-textarea:focus[b-kic6tpb03k] {
    outline: none;
    border-color: var(--color-primary-400);
    box-shadow: 0 0 0 3px var(--color-primary-50);
}

.yr-textarea:disabled[b-kic6tpb03k] {
    background: var(--color-neutral-50);
    color: var(--color-neutral-400);
    cursor: not-allowed;
}

.yr-btn-request[b-kic6tpb03k] {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.625rem 1rem;
    background: var(--color-primary-600);
    color: #fff;
    font-size: 0.875rem;
    font-weight: 600;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.15s;
}

.yr-btn-request:hover:not(:disabled)[b-kic6tpb03k] {
    background: var(--color-primary-700);
}

.yr-btn-request:disabled[b-kic6tpb03k] {
    background: var(--color-neutral-300);
    cursor: not-allowed;
}

.yr-btn-spinner[b-kic6tpb03k] {
    width: 14px;
    height: 14px;
    border: 2px solid rgba(255,255,255,0.4);
    border-top-color: #fff;
    border-radius: 50%;
    animation: yr-spin-b-kic6tpb03k 0.7s linear infinite;
    flex-shrink: 0;
}

/* ── Info Card ───────────────────────────────────────────────────────────── */

.yr-info-card[b-kic6tpb03k] {
    background: #fff;
    border: 1px solid var(--color-neutral-200);
    border-radius: 12px;
    padding: 1.25rem;
    box-shadow: 0 1px 4px rgba(0,0,0,0.06);
}

.yr-info-title[b-kic6tpb03k] {
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--color-neutral-800);
    margin-bottom: 1rem;
}

.yr-info-list[b-kic6tpb03k] {
    list-style: none;
    padding: 0;
    margin: 0 0 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.875rem;
}

.yr-info-list li[b-kic6tpb03k] {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
}

.yr-info-list li div[b-kic6tpb03k] {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.yr-info-list li strong[b-kic6tpb03k] {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-neutral-800);
}

.yr-info-list li span[b-kic6tpb03k] {
    font-size: 0.8125rem;
    color: var(--color-neutral-500);
    line-height: 1.5;
}

.yr-info-icon[b-kic6tpb03k] {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 700;
    flex-shrink: 0;
}

.yr-info-icon--green[b-kic6tpb03k]  { background: #dcfce7; color: #166534; }
.yr-info-icon--blue[b-kic6tpb03k]   { background: #dbeafe; color: #1d4ed8; }
.yr-info-icon--purple[b-kic6tpb03k] { background: #ede9fe; color: #6d28d9; }
.yr-info-icon--amber[b-kic6tpb03k]  { background: #fef3c7; color: #92400e; }

.yr-info-note[b-kic6tpb03k] {
    font-size: 0.8125rem;
    color: #92400e;
    background: #fffbeb;
    border: 1px solid #fde68a;
    border-radius: 8px;
    padding: 0.625rem 0.875rem;
    line-height: 1.5;
}

/* ── Toast ───────────────────────────────────────────────────────────────── */

.yr-toast[b-kic6tpb03k] {
    position: fixed;
    bottom: 1.5rem;
    right: 1.5rem;
    padding: 0.75rem 1.125rem;
    border-radius: 10px;
    font-size: 0.875rem;
    font-weight: 600;
    box-shadow: 0 4px 16px rgba(0,0,0,0.12);
    z-index: 1000;
    animation: yr-fadein-b-kic6tpb03k 0.25s ease;
}

.yr-toast--success[b-kic6tpb03k] {
    background: #f0fdf4;
    color: #166534;
    border: 1px solid #bbf7d0;
}

.yr-toast--error[b-kic6tpb03k] {
    background: #fef2f2;
    color: #991b1b;
    border: 1px solid #fecaca;
}

@keyframes yr-fadein-b-kic6tpb03k {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ── Responsive ──────────────────────────────────────────────────────────── */

@media (max-width: 1024px) {
    .yr-kpi-row[b-kic6tpb03k] {
        grid-template-columns: repeat(3, 1fr);
    }
    .yr-body[b-kic6tpb03k] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .yr-root[b-kic6tpb03k] {
        padding: 1rem;
    }
    .yr-kpi-row[b-kic6tpb03k] {
        grid-template-columns: repeat(2, 1fr);
    }
    .yr-title[b-kic6tpb03k] {
        font-size: 1.25rem;
    }
}

@media (max-width: 480px) {
    .yr-kpi-row[b-kic6tpb03k] {
        grid-template-columns: 1fr 1fr;
    }
}
/* /Pages/Principal/Settings/Branding/Index.razor.rz.scp.css */
/* ============================================================
   School Branding Page — Scoped Styles
   ============================================================ */

/* Two-column layout: picker left, preview right */
.branding-layout[b-qywi7371y6] {
    display: grid;
    grid-template-columns: 380px 1fr;
    gap: 24px;
    align-items: start;
}

@media (max-width: 900px) {
    .branding-layout[b-qywi7371y6] {
        grid-template-columns: 1fr;
    }
}

/* ── Panel Card ─────────────────────────────────────── */
.card-panel[b-qywi7371y6] {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 24px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.05);
}

.panel-heading[b-qywi7371y6] {
    font-size: 15px;
    font-weight: 700;
    color: #111827;
    margin-bottom: 20px;
}

/* ── Palette Grid ──────────────────────────────────── */
.palette-grid[b-qywi7371y6] {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 8px;
}

.swatch[b-qywi7371y6] {
    width: 100%;
    aspect-ratio: 1;
    border-radius: 8px;
    border: 3px solid transparent;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.15s, border-color 0.15s;
    position: relative;
}

.swatch:hover[b-qywi7371y6] {
    transform: scale(1.1);
    border-color: rgba(0,0,0,0.25);
}

.swatch-active[b-qywi7371y6] {
    border-color: #1f2937 !important;
    transform: scale(1.12);
    box-shadow: 0 0 0 2px white, 0 0 0 4px #1f2937;
}

.swatch-check[b-qywi7371y6] {
    font-size: 12px;
    text-shadow: 0 1px 2px rgba(0,0,0,0.5);
}

.palette-names[b-qywi7371y6] {
    font-size: 11px;
    color: #6b7280;
    height: 16px;
}

/* ── Custom Color Input ────────────────────────────── */
.custom-color-input[b-qywi7371y6] {
    width: 52px;
    height: 52px;
    border-radius: 10px;
    border: 2px solid #e5e7eb;
    cursor: pointer;
    padding: 2px;
    flex-shrink: 0;
}

.hex-input[b-qywi7371y6] {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    font-size: 14px;
    font-family: monospace;
    letter-spacing: 1px;
    outline: none;
    transition: border-color 0.15s;
}

.hex-input:focus[b-qywi7371y6] {
    border-color: var(--color-primary-500);
    box-shadow: 0 0 0 3px var(--color-primary-100);
}

.hex-input-error[b-qywi7371y6] {
    border-color: #ef4444 !important;
    box-shadow: 0 0 0 3px #fee2e2 !important;
}

/* ── Shade Strip ───────────────────────────────────── */
.shade-strip[b-qywi7371y6] {
    display: flex;
    border-radius: 8px;
    overflow: hidden;
    height: 40px;
}

.shade-block[b-qywi7371y6] {
    flex: 1;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding-bottom: 3px;
}

.shade-label[b-qywi7371y6] {
    font-size: 9px;
    color: rgba(255,255,255,0.7);
    font-weight: 600;
    text-shadow: 0 1px 1px rgba(0,0,0,0.4);
    writing-mode: vertical-lr;
    transform: rotate(180deg);
    letter-spacing: 0.5px;
}

/* ── Warning Box ───────────────────────────────────── */
.warning-box[b-qywi7371y6] {
    background: #fef9c3;
    border: 1px solid #fde047;
    color: #854d0e;
    border-radius: 8px;
    padding: 10px 14px;
    font-size: 13px;
    margin-top: 4px;
}

/* ── Action Buttons ────────────────────────────────── */
.btn-save[b-qywi7371y6] {
    width: 100%;
    padding: 11px 20px;
    background: var(--color-primary-600);
    color: white;
    border-radius: 9px;
    font-weight: 600;
    font-size: 14px;
    border: none;
    cursor: pointer;
    transition: background 0.15s, opacity 0.15s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.btn-save:hover:not(:disabled)[b-qywi7371y6] {
    background: var(--color-primary-700);
}

.btn-save:disabled[b-qywi7371y6] {
    opacity: 0.5;
    cursor: not-allowed;
}

.btn-reset[b-qywi7371y6] {
    width: 100%;
    padding: 10px 20px;
    background: #f3f4f6;
    color: #374151;
    border-radius: 9px;
    font-weight: 600;
    font-size: 13px;
    border: 1px solid #d1d5db;
    cursor: pointer;
    transition: background 0.15s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.btn-reset:hover:not(:disabled)[b-qywi7371y6] {
    background: #e5e7eb;
}

.btn-reset:disabled[b-qywi7371y6] {
    opacity: 0.5;
    cursor: not-allowed;
}

.saved-badge[b-qywi7371y6] {
    margin-top: 12px;
    background: #dcfce7;
    color: #166534;
    border-radius: 8px;
    padding: 8px 14px;
    font-size: 13px;
    font-weight: 600;
    text-align: center;
    animation: fadein-b-qywi7371y6 0.3s ease;
}

@keyframes fadein-b-qywi7371y6 {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ── Preview Panel ─────────────────────────────────── */
.preview-navbar[b-qywi7371y6] {
    border-radius: 8px 8px 0 0;
    overflow: hidden;
}

.preview-navbar-inner[b-qywi7371y6] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
}

.preview-logo-area[b-qywi7371y6] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.preview-logo-box[b-qywi7371y6] {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 10px;
    font-weight: 800;
}

.preview-school-name[b-qywi7371y6] {
    color: white;
    font-size: 12px;
    font-weight: 700;
}

.preview-nav-items[b-qywi7371y6] {
    display: flex;
    gap: 4px;
}

.preview-nav-item[b-qywi7371y6] {
    color: rgba(255,255,255,0.75);
    font-size: 11px;
    padding: 3px 8px;
    border-radius: 5px;
    cursor: pointer;
}

.preview-nav-active[b-qywi7371y6] {
    color: white !important;
    font-weight: 600;
}

.preview-body[b-qywi7371y6] {
    border: 1px solid #e5e7eb;
    border-top: none;
    border-radius: 0 0 8px 8px;
    padding: 16px;
    background: #f9fafb;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.preview-section[b-qywi7371y6] {
    background: white;
    border-radius: 8px;
    padding: 12px 14px;
    border: 1px solid #f0f0f0;
}

.preview-section-label[b-qywi7371y6] {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: #9ca3af;
    margin-bottom: 8px;
}

/* Buttons preview */
.preview-btn-primary[b-qywi7371y6] {
    padding: 7px 14px;
    color: white;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    border: none;
    cursor: default;
}

.preview-btn-outline[b-qywi7371y6] {
    padding: 6px 14px;
    background: white;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    border: 1.5px solid;
    cursor: default;
}

.preview-btn-ghost[b-qywi7371y6] {
    padding: 6px 10px;
    background: none;
    border: none;
    font-size: 12px;
    font-weight: 600;
    cursor: default;
}

/* Form preview */
.preview-input[b-qywi7371y6] {
    width: 100%;
    padding: 7px 10px;
    border: 1.5px solid #d1d5db;
    border-radius: 6px;
    font-size: 12px;
    color: #374151;
    outline: none;
    background: white;
}

.preview-input:focus[b-qywi7371y6] {
    border-color: var(--focus-ring, #4A9B8E);
    box-shadow: 0 0 0 2px rgba(74,155,142,0.2);
}

.preview-radio[b-qywi7371y6] {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    color: #374151;
    cursor: default;
}

/* Card preview */
.preview-card[b-qywi7371y6] {
    border-radius: 7px;
    overflow: hidden;
    border: 1px solid #e5e7eb;
}

.preview-card-header[b-qywi7371y6] {
    padding: 8px 12px;
    color: white;
    font-size: 12px;
    font-weight: 600;
}

.preview-card-body[b-qywi7371y6] {
    padding: 8px 12px;
    background: white;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.preview-table-row[b-qywi7371y6] {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.preview-table-name[b-qywi7371y6] {
    font-size: 12px;
    color: #374151;
}

.preview-badge[b-qywi7371y6] {
    font-size: 10px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 10px;
}

/* Sidebar preview */
.preview-sidebar[b-qywi7371y6] {
    border-radius: 7px;
    overflow: hidden;
    padding: 6px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.preview-sidebar-item[b-qywi7371y6] {
    padding: 7px 10px;
    border-radius: 6px;
    font-size: 12px;
    cursor: default;
}

/* Status badges */
.preview-status-badge[b-qywi7371y6] {
    display: inline-block;
    font-size: 11px;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 10px;
}

/* Progress bar */
.preview-progress-track[b-qywi7371y6] {
    height: 7px;
    background: #e5e7eb;
    border-radius: 10px;
    overflow: hidden;
}

.preview-progress-fill[b-qywi7371y6] {
    height: 100%;
    border-radius: 10px;
    transition: background 0.3s;
}
/* /Pages/Principal/Settings/Geofence/Index.razor.rz.scp.css */
/* ============================================================
   Attendance Geofence Settings Page — Scoped Styles
   ============================================================ */

/* ── Page shell ─────────────────────────────────────────────── */
.gf-page[b-82a57mmca8] {
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
    padding: 1.5rem 1rem 3rem;
}

/* ── Header ─────────────────────────────────────────────────── */
.gf-page-header[b-82a57mmca8] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.75rem;
    flex-wrap: wrap;
}

.gf-title[b-82a57mmca8] {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--color-neutral-900);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.gf-title i[b-82a57mmca8] {
    color: var(--color-primary-500);
}

.gf-subtitle[b-82a57mmca8] {
    font-size: 0.875rem;
    color: var(--color-neutral-500);
    margin-top: 0.2rem;
}

/* ── Status badge ───────────────────────────────────────────── */
.gf-status-badge[b-82a57mmca8] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.35rem 0.8rem;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 600;
}

.gf-status-badge--active[b-82a57mmca8] {
    background: #dcfce7;
    color: #15803d;
}

.gf-status-badge--warning[b-82a57mmca8] {
    background: #fef9c3;
    color: #a16207;
}

/* ── Two-column grid ────────────────────────────────────────── */
.gf-grid[b-82a57mmca8] {
    display: grid;
    grid-template-columns: 420px 1fr;
    gap: 1.5rem;
    align-items: start;
}

@media (max-width: 860px) {
    .gf-grid[b-82a57mmca8] {
        grid-template-columns: 1fr;
    }
}

/* ── Cards ──────────────────────────────────────────────────── */
.gf-card[b-82a57mmca8] {
    background: #fff;
    border: 1px solid var(--color-neutral-100);
    border-radius: 12px;
    padding: 1.5rem;
    box-shadow: 0 1px 4px rgba(0,0,0,0.05);
    margin-bottom: 1rem;
}

.gf-card:last-child[b-82a57mmca8] { margin-bottom: 0; }

.gf-card--help[b-82a57mmca8] {
    background: #fafafa;
    border-color: var(--color-neutral-100);
}

.gf-card--tips[b-82a57mmca8] {
    background: #fffbeb;
    border-color: #fde68a;
}

.gf-card--current[b-82a57mmca8] {
    background: #f0fdf4;
    border-color: #bbf7d0;
}

.gf-card-header[b-82a57mmca8] {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--color-neutral-700);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.gf-card-header i[b-82a57mmca8] {
    color: var(--color-primary-500);
    font-size: 0.95rem;
}

/* ── Mandatory notice ───────────────────────────────────────── */
.gf-mandatory-notice[b-82a57mmca8] {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: 8px;
    padding: 0.75rem 1rem;
    font-size: 0.82rem;
    color: #b91c1c;
    margin-bottom: 1.25rem;
    line-height: 1.5;
}

.gf-mandatory-notice i[b-82a57mmca8] {
    margin-top: 0.1rem;
    flex-shrink: 0;
}

/* ── Current location ───────────────────────────────────────── */
.gf-location-picker[b-82a57mmca8] {
    margin-bottom: 1.25rem;
}

.gf-location-btn[b-82a57mmca8] {
    width: 100%;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    border: 1.5px solid var(--color-primary-300);
    border-radius: var(--radius-md);
    padding: 0.65rem 1rem;
    background: var(--color-primary-50);
    color: var(--color-primary-700);
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s, opacity 0.15s;
}

.gf-location-btn:hover:not(:disabled)[b-82a57mmca8] {
    background: var(--color-primary-100);
}

.gf-location-btn:disabled[b-82a57mmca8] {
    opacity: 0.65;
    cursor: not-allowed;
}

.gf-location-result[b-82a57mmca8] {
    display: flex;
    align-items: flex-start;
    gap: 0.4rem;
    margin-top: 0.5rem;
    color: var(--color-success-700);
    font-size: 0.78rem;
    line-height: 1.45;
}

.gf-location-result i[b-82a57mmca8] {
    margin-top: 0.15rem;
}

/* ── Form fields ────────────────────────────────────────────── */
.gf-field[b-82a57mmca8] {
    margin-bottom: 1.1rem;
}

.gf-label[b-82a57mmca8] {
    display: block;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--color-neutral-700);
    margin-bottom: 0.35rem;
}

.gf-required[b-82a57mmca8] {
    color: #ef4444;
    margin-left: 2px;
}

.gf-input[b-82a57mmca8] {
    width: 100%;
    border: 1.5px solid var(--color-neutral-200);
    border-radius: 8px;
    padding: 0.55rem 0.75rem;
    font-size: 0.9rem;
    color: var(--color-neutral-900);
    background: #fff;
    transition: border-color 0.15s;
    box-sizing: border-box;
}

.gf-input:focus[b-82a57mmca8] {
    outline: none;
    border-color: var(--color-primary-400);
    box-shadow: 0 0 0 3px rgba(74,155,142,0.12);
}

.gf-input--error[b-82a57mmca8] {
    border-color: #ef4444;
}

.gf-field-error[b-82a57mmca8] {
    display: block;
    font-size: 0.75rem;
    color: #ef4444;
    margin-top: 0.25rem;
}

.gf-field-hint[b-82a57mmca8] {
    font-size: 0.76rem;
    color: var(--color-neutral-500);
    margin-top: 0.35rem;
    line-height: 1.5;
}

/* ── Radius slider ──────────────────────────────────────────── */
.gf-radius-row[b-82a57mmca8] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.gf-range[b-82a57mmca8] {
    flex: 1;
    accent-color: var(--color-primary-500);
}

.gf-radius-value[b-82a57mmca8] {
    min-width: 56px;
    text-align: center;
    font-size: 0.92rem;
    font-weight: 700;
    color: var(--color-primary-600);
    background: var(--color-primary-50);
    padding: 0.25rem 0.6rem;
    border-radius: 6px;
}

/* ── Save button ────────────────────────────────────────────── */
.gf-actions[b-82a57mmca8] {
    margin-top: 1.5rem;
}

.gf-save-btn[b-82a57mmca8] {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    background: var(--color-primary-500);
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 0.65rem 1.5rem;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s, opacity 0.15s;
    width: 100%;
    justify-content: center;
}

.gf-save-btn:hover:not(:disabled)[b-82a57mmca8] {
    background: var(--color-primary-600);
}

.gf-save-btn:disabled[b-82a57mmca8] {
    opacity: 0.65;
    cursor: not-allowed;
}

/* ── Help steps ─────────────────────────────────────────────── */
.gf-help-steps[b-82a57mmca8] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-bottom: 1.1rem;
}

.gf-help-step[b-82a57mmca8] {
    display: flex;
    gap: 0.65rem;
    align-items: flex-start;
}

.gf-step-num[b-82a57mmca8] {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--color-primary-500);
    color: #fff;
    font-size: 0.72rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-top: 1px;
}

.gf-step-body[b-82a57mmca8] {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    font-size: 0.82rem;
    line-height: 1.5;
    color: var(--color-neutral-700);
}

.gf-step-body strong[b-82a57mmca8] {
    color: var(--color-neutral-900);
    font-weight: 600;
}

.gf-step-body a[b-82a57mmca8] {
    color: var(--color-primary-600);
    text-decoration: underline;
}

/* ── Example coordinates ────────────────────────────────────── */
.gf-help-example[b-82a57mmca8] {
    background: #fff;
    border: 1px solid var(--color-neutral-100);
    border-radius: 8px;
    padding: 0.75rem 1rem;
    margin-bottom: 0.9rem;
}

.gf-example-label[b-82a57mmca8] {
    font-size: 0.72rem;
    color: var(--color-neutral-400);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 0.4rem;
}

.gf-example-row[b-82a57mmca8] {
    display: flex;
    gap: 1rem;
    font-size: 0.82rem;
    padding: 0.2rem 0;
}

.gf-example-key[b-82a57mmca8] {
    width: 80px;
    color: var(--color-neutral-500);
    font-weight: 500;
}

.gf-example-val[b-82a57mmca8] {
    font-family: monospace;
    color: var(--color-neutral-900);
    font-weight: 600;
}

/* ── Open Maps button ───────────────────────────────────────── */
.gf-maps-btn[b-82a57mmca8] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    background: var(--color-primary-50);
    color: var(--color-primary-700);
    border: 1.5px solid var(--color-primary-200);
    border-radius: 8px;
    padding: 0.5rem 1rem;
    font-size: 0.82rem;
    font-weight: 600;
    text-decoration: none;
    transition: background 0.15s;
}

.gf-maps-btn:hover[b-82a57mmca8] {
    background: var(--color-primary-100);
}

/* ── Tips list ──────────────────────────────────────────────── */
.gf-tips-list[b-82a57mmca8] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.gf-tip[b-82a57mmca8] {
    display: flex;
    gap: 0.65rem;
    align-items: baseline;
    font-size: 0.82rem;
    padding: 0.4rem 0.6rem;
    border-radius: 6px;
}

.gf-tip--recommended[b-82a57mmca8] {
    background: #fef9c3;
    border: 1px solid #fde68a;
}

.gf-tip--recommended .gf-tip-range i[b-82a57mmca8] {
    color: #d97706;
    font-size: 0.7rem;
}

.gf-tip-range[b-82a57mmca8] {
    min-width: 90px;
    font-weight: 700;
    color: var(--color-neutral-800);
    flex-shrink: 0;
}

.gf-tip-desc[b-82a57mmca8] {
    color: var(--color-neutral-600);
}

/* ── Currently saved card ───────────────────────────────────── */
.gf-current-row[b-82a57mmca8] {
    display: flex;
    align-items: baseline;
    padding: 0.3rem 0;
    border-bottom: 1px solid #d1fae5;
    font-size: 0.82rem;
}

.gf-current-row:last-of-type[b-82a57mmca8] {
    border-bottom: none;
    margin-bottom: 0.75rem;
}

.gf-current-label[b-82a57mmca8] {
    width: 90px;
    flex-shrink: 0;
    color: var(--color-neutral-500);
    font-weight: 500;
}

.gf-current-val[b-82a57mmca8] {
    font-family: monospace;
    color: var(--color-neutral-900);
    font-weight: 600;
    font-size: 0.85rem;
}

.gf-verify-link[b-82a57mmca8] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.78rem;
    color: #15803d;
    text-decoration: underline;
    font-weight: 600;
}

/* ── Loader ─────────────────────────────────────────────────── */
.gf-loader-wrap[b-82a57mmca8] {
    display: flex;
    justify-content: center;
    padding: 4rem 0;
}
/* /Pages/Principal/Settings/Terms/Index.razor.rz.scp.css */
/* Terms & Conditions Manager — co-located styles */

.quill-editor-container[b-qjxpjnxusw] {
    min-height: 280px;
    border: 1px solid #e5e7eb;
    border-radius: 0 0 0.5rem 0.5rem;
}

/* Quill toolbar rounded top */
.quill-editor-container .ql-toolbar[b-qjxpjnxusw] {
    border-radius: 0.5rem 0.5rem 0 0;
    border-color: #e5e7eb;
    background: #f9fafb;
}

.quill-editor-container .ql-container[b-qjxpjnxusw] {
    border-color: #e5e7eb;
    font-family: 'Inter', sans-serif;
    font-size: 0.9375rem;
    min-height: 220px;
}

.quill-editor-container .ql-editor[b-qjxpjnxusw] {
    min-height: 220px;
    padding: 1rem;
}

/* Focus ring */
.quill-editor-container:focus-within[b-qjxpjnxusw] {
    outline: 2px solid var(--color-primary, #6366f1);
    outline-offset: 1px;
    border-radius: 0.5rem;
}
/* /Pages/Principal/Setup/Step2_ClassesSections.razor.rz.scp.css */
/* Step 2: Classes & Sections — input validation styles (Bugs 39, 40, 42, 43, 44) */

.form-input-error[b-i0gtr8nsei] {
    border-color: var(--color-danger-500) !important;
    box-shadow: 0 0 0 3px var(--color-danger-100) !important;
}

.form-error[b-i0gtr8nsei] {
    display: block;
    margin-top: 0.35rem;
    font-size: 0.75rem;
    color: var(--color-danger-600);
    font-weight: 500;
}

.form-hint[b-i0gtr8nsei] {
    display: block;
    margin-top: 0.35rem;
    font-size: 0.72rem;
    color: var(--color-neutral-500);
}
/* /Pages/Principal/Setup/Step4_Timing.razor.rz.scp.css */
/* ══════════════════════════════════════════════════════════
   Step4_Timing.razor — Scoped Styles
   ══════════════════════════════════════════════════════════ */

/* ── Page wrapper ─────────────────────────────────────────── */
.timing-page[b-ikc9s4xvrq] {
    max-width: 1200px;
    margin: 0 auto;
}

/* ── Section card ─────────────────────────────────────────── */
.timing-section[b-ikc9s4xvrq] {
    background: #fff;
    border: 1px solid #E5E7EB;
    border-radius: 16px;
    padding: 24px;
    margin-bottom: 24px;
}

.timing-section-title[b-ikc9s4xvrq] {
    font-size: 1rem;
    font-weight: 700;
    color: #111827;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1.25rem;
}

.timing-section-title i[b-ikc9s4xvrq] {
    color: var(--color-primary-500, #4A9B8E);
    font-size: 1.1rem;
}

/* ── Info banner (bullets) ─────────────────────────────────── */
.timing-info-banner[b-ikc9s4xvrq] {
    background: #EFF6FF;
    border: 1px solid #BFDBFE;
    border-radius: 14px;
    padding: 1rem 1.25rem;
}

.timing-info-banner ul[b-ikc9s4xvrq] {
    list-style: none;
    padding: 0;
    margin: 0;
}

.timing-info-banner li[b-ikc9s4xvrq] {
    position: relative;
    padding-left: 1.5rem;
    margin-bottom: 0.4rem;
    font-size: 0.875rem;
    color: #1E40AF;
    line-height: 1.5;
}

.timing-info-banner li:last-child[b-ikc9s4xvrq] {
    margin-bottom: 0;
}

.timing-info-banner li[b-ikc9s4xvrq]::before {
    content: "✓";
    position: absolute;
    left: 0;
    color: #2563EB;
    font-weight: 700;
}

/* ── Form 2-column grid ────────────────────────────────────── */
.timing-form-grid[b-ikc9s4xvrq] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}

/* ── Segmented control (Working Days) ──────────────────────── */
.timing-segmented-control[b-ikc9s4xvrq] {
    display: flex;
    gap: 8px;
    margin-top: 0.375rem;
}

.timing-segmented-btn[b-ikc9s4xvrq] {
    flex: 1;
    padding: 10px 16px;
    border-radius: 10px;
    border: 1.5px solid #E5E7EB;
    background: #fff;
    cursor: pointer;
    font-size: 0.875rem;
    font-weight: 500;
    color: #4B5563;
    text-align: center;
    transition: all 0.15s;
}

.timing-segmented-btn.active[b-ikc9s4xvrq] {
    background: #2F7D73;
    color: #fff;
    border-color: #2F7D73;
    font-weight: 600;
}

.timing-segmented-btn:not(.active):hover[b-ikc9s4xvrq] {
    background: #E8F5F2;
    border-color: #2F7D73;
    color: #2F7D73;
}

/* ── Slider value display ──────────────────────────────────── */
.timing-slider-value[b-ikc9s4xvrq] {
    font-size: 16px;
    font-weight: 600;
    color: #2F7D73;
    margin-bottom: 8px;
    display: block;
}

/* ── Timing Groups empty state ─────────────────────────────── */
.timing-group-empty[b-ikc9s4xvrq] {
    max-height: 120px;
    padding: 32px;
    text-align: center;
    border: 2px dashed #E5E7EB;
    border-radius: 12px;
    margin-bottom: 16px;
}

.timing-group-empty-icon[b-ikc9s4xvrq] {
    font-size: 2rem;
    color: #9CA3AF;
    margin-bottom: 0.5rem;
}

.timing-group-empty h4[b-ikc9s4xvrq] {
    font-size: 0.95rem;
    font-weight: 600;
    color: #6B7280;
    margin: 0 0 0.25rem;
}

.timing-group-empty p[b-ikc9s4xvrq] {
    font-size: 0.8rem;
    color: #9CA3AF;
    margin: 0 0 0.75rem;
}

.timing-group-empty .btn-create[b-ikc9s4xvrq] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 8px 16px;
    background: #2F7D73;
    color: #fff;
    border-radius: 8px;
    font-size: 0.8rem;
    font-weight: 600;
    border: none;
    cursor: pointer;
    transition: background 0.15s;
}

.timing-group-empty .btn-create:hover[b-ikc9s4xvrq] {
    background: #236B62;
}

/* ── Group header row ──────────────────────────────────────── */
.timing-group-header[b-ikc9s4xvrq] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1rem;
}

.timing-group-name[b-ikc9s4xvrq] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: left;
}

.timing-field-help[b-ikc9s4xvrq] {
    display: block;
    margin-top: var(--spacing-1);
    color: var(--color-neutral-500);
    font-size: var(--font-size-xs);
    line-height: 1.4;
}

.timing-field-error[b-ikc9s4xvrq] {
    display: block;
    margin-top: var(--spacing-1);
    color: var(--color-danger-600);
    font-size: var(--font-size-xs);
    line-height: 1.4;
}

/* ── Break cards ───────────────────────────────────────────── */
.timing-breaks-grid[b-ikc9s4xvrq] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.timing-break-card[b-ikc9s4xvrq] {
    display: grid;
    grid-template-columns: 1fr auto auto auto;
    gap: 24px;
    align-items: center;
    padding: 24px;
    background: #FFFBEB;
    border: 1px solid #FDE68A;
    border-radius: 16px;
}

.timing-break-card-edit[b-ikc9s4xvrq] {
    grid-template-columns: 1fr;
    gap: 16px;
}

.schedule-editor[b-ikc9s4xvrq] {
    margin-top: var(--spacing-6);
    padding-top: var(--spacing-5);
    border-top: 1px solid var(--color-neutral-200);
}

.schedule-editor-header[b-ikc9s4xvrq] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-3);
    margin-bottom: var(--spacing-4);
}

.schedule-editor-header h4[b-ikc9s4xvrq] {
    margin: 0;
    color: var(--color-neutral-900);
    font-size: var(--font-size-sm);
    font-weight: 700;
}

.schedule-editor-header p[b-ikc9s4xvrq] {
    margin: var(--spacing-1) 0 0;
    color: var(--color-neutral-500);
    font-size: var(--font-size-xs);
}

.schedule-add[b-ikc9s4xvrq],
.schedule-actions button[b-ikc9s4xvrq] {
    min-width: 44px;
    min-height: 44px;
    border: 1px solid var(--color-neutral-200);
    background: var(--color-neutral-0);
    color: var(--color-primary-600);
    cursor: pointer;
}

.schedule-add[b-ikc9s4xvrq] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-2);
    padding: 0 var(--spacing-4);
    border-color: var(--color-primary-200);
    border-radius: var(--radius-md);
    font-size: var(--font-size-sm);
    font-weight: 600;
    white-space: nowrap;
}

.schedule-row[b-ikc9s4xvrq] {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--spacing-3);
    padding: var(--spacing-4) 0;
    border-bottom: 1px solid var(--color-neutral-100);
}

.schedule-actions[b-ikc9s4xvrq] {
    display: flex;
    align-items: end;
    gap: var(--spacing-2);
}

.schedule-actions button[b-ikc9s4xvrq] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-md);
}

.schedule-actions button.delete[b-ikc9s4xvrq] {
    color: var(--color-danger-600);
    border-color: var(--color-danger-200);
}

.schedule-actions button:disabled[b-ikc9s4xvrq] {
    cursor: not-allowed;
    opacity: 0.4;
}

.schedule-time-display[b-ikc9s4xvrq] {
    display: block;
    min-height: 1.25rem;
    margin-top: var(--spacing-1);
    color: var(--color-neutral-600);
    font-size: var(--font-size-xs);
    font-weight: 600;
}

@media (min-width: 768px) {
    .schedule-row[b-ikc9s4xvrq] {
        /* Use minmax(0, …) so columns shrink below their content width when the
           card is narrow — the previous hard minimums (8rem/10rem/6rem/9rem/9rem)
           exceeded the container width and pushed the action buttons
           (move up/down, delete) past the card's right edge. */
        grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.4fr) minmax(0, 0.6fr) minmax(0, 0.9fr) minmax(0, 0.9fr) auto;
        align-items: end;
    }
}

.timing-break-edit-actions[b-ikc9s4xvrq] {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

.timing-break-edit-actions .btn-edit[b-ikc9s4xvrq],
.timing-break-edit-actions .btn-delete[b-ikc9s4xvrq] {
    padding: 8px 14px;
    border-radius: 8px;
    font-size: 0.8rem;
    font-weight: 600;
    border: 1px solid transparent;
    cursor: pointer;
    transition: all 0.15s;
}

.timing-break-edit-actions .btn-edit[b-ikc9s4xvrq] {
    background: #E8F5F2;
    color: #2F7D73;
    border-color: #2F7D73;
}

.timing-break-edit-actions .btn-edit:hover[b-ikc9s4xvrq] {
    background: #2F7D73;
    color: #fff;
}

.timing-break-edit-actions .btn-delete[b-ikc9s4xvrq] {
    background: #FEF2F2;
    color: #DC2626;
    border-color: #FECACA;
}

.timing-break-edit-actions .btn-delete:hover[b-ikc9s4xvrq] {
    background: #DC2626;
    color: #fff;
    border-color: #DC2626;
}

.timing-evening-pill[b-ikc9s4xvrq] {
    display: inline-flex;
    align-items: center;
    max-width: 100%;
    white-space: normal;
    word-break: break-word;
    text-align: left;
    flex-shrink: 0;
    min-width: 0;
}

.timing-break-card-info strong[b-ikc9s4xvrq] {
    display: block;
    font-size: 0.9rem;
    color: #111827;
    margin-bottom: 0.25rem;
}

.timing-break-card-info span[b-ikc9s4xvrq] {
    font-size: 0.8rem;
    color: #6B7280;
}

.timing-break-card-metric[b-ikc9s4xvrq] {
    text-align: center;
    min-width: 80px;
}

.timing-break-card-metric .value[b-ikc9s4xvrq] {
    font-size: 1rem;
    font-weight: 600;
    color: #111827;
}

.timing-break-card-metric .label[b-ikc9s4xvrq] {
    font-size: 0.7rem;
    color: #6B7280;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-top: 0.125rem;
}

.timing-break-card-actions[b-ikc9s4xvrq] {
    display: flex;
    gap: 8px;
}

.timing-break-card-actions button[b-ikc9s4xvrq] {
    padding: 8px 14px;
    border-radius: 8px;
    font-size: 0.8rem;
    font-weight: 600;
    border: 1px solid transparent;
    cursor: pointer;
    transition: all 0.15s;
}

.timing-break-card-actions .btn-edit[b-ikc9s4xvrq] {
    background: #E8F5F2;
    color: #2F7D73;
    border-color: #2F7D73;
}

.timing-break-card-actions .btn-edit:hover[b-ikc9s4xvrq] {
    background: #2F7D73;
    color: #fff;
}

.timing-break-card-actions .btn-delete[b-ikc9s4xvrq] {
    background: #FEF2F2;
    color: #DC2626;
    border-color: #FECACA;
}

.timing-break-card-actions .btn-delete:hover[b-ikc9s4xvrq] {
    background: #DC2626;
    color: #fff;
    border-color: #DC2626;
}

/* ── Schedule Summary ──────────────────────────────────────── */
.timing-summary-grid[b-ikc9s4xvrq] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}

.timing-summary-card[b-ikc9s4xvrq] {
    height: 100px;
    border-radius: 16px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
}

.timing-summary-card .icon[b-ikc9s4xvrq] {
    font-size: 1.25rem;
    line-height: 1;
}

.timing-summary-card .value[b-ikc9s4xvrq] {
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.2;
}

.timing-summary-card .label[b-ikc9s4xvrq] {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    line-height: 1;
}

/* ── Save action bar ───────────────────────────────────────── */
.timing-save-bar[b-ikc9s4xvrq] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 24px;
    background: #fff;
    border-top: 1px solid #E5E7EB;
    position: sticky;
    bottom: 0;
    z-index: 10;
}

/* ── Inline confirm dialog ─────────────────────────────────── */
.timing-confirm-overlay[b-ikc9s4xvrq] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 50;
}

.timing-confirm-dialog[b-ikc9s4xvrq] {
    background: #fff;
    border-radius: 16px;
    padding: 24px;
    max-width: 400px;
    width: 90%;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
}

.timing-confirm-dialog h4[b-ikc9s4xvrq] {
    font-size: 1rem;
    font-weight: 700;
    color: #111827;
    margin: 0 0 0.5rem;
}

.timing-confirm-dialog p[b-ikc9s4xvrq] {
    font-size: 0.875rem;
    color: #6B7280;
    margin: 0 0 1.25rem;
}

.timing-confirm-dialog .btn-row[b-ikc9s4xvrq] {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
}

/* ── Responsive ────────────────────────────────────────────── */
@media (max-width: 768px) {
    .timing-form-grid[b-ikc9s4xvrq] {
        grid-template-columns: 1fr;
    }

    .timing-break-card[b-ikc9s4xvrq] {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .timing-break-card-time[b-ikc9s4xvrq],
    .timing-break-card-duration[b-ikc9s4xvrq] {
        text-align: left;
    }

    .timing-break-card-metric[b-ikc9s4xvrq] {
        text-align: left;
        min-width: auto;
    }

    .timing-break-edit-actions[b-ikc9s4xvrq] {
        justify-content: stretch;
    }

    .timing-break-edit-actions .btn-edit[b-ikc9s4xvrq],
    .timing-break-edit-actions .btn-delete[b-ikc9s4xvrq] {
        flex: 1;
    }

    .timing-summary-grid[b-ikc9s4xvrq] {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 480px) {
    .timing-group-header[b-ikc9s4xvrq] {
        align-items: stretch;
        flex-direction: column;
        gap: var(--spacing-2);
    }

    .timing-group-header button[b-ikc9s4xvrq] {
        justify-content: center;
        width: 100%;
    }

    .timing-summary-grid[b-ikc9s4xvrq] {
        grid-template-columns: 1fr;
    }
}

/* ── Form inputs (moved from Wizard.razor.css — only this step uses them) ── */
.wiz-input[b-ikc9s4xvrq] {
    height: 44px;
    border-radius: 10px;
    font-size: 0.9rem;
    padding: 0 14px;
    border: 1.5px solid #E5E7EB;
    width: 100%;
    background: #fff;
    color: #374151;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.wiz-input:focus[b-ikc9s4xvrq] {
    outline: none;
    border-color: var(--color-primary-400, #6ABCB0);
    box-shadow: 0 0 0 3px rgba(74, 155, 142, 0.12);
}

.wiz-input:disabled[b-ikc9s4xvrq] {
    background: #F9FAFB;
    color: #6B7280;
    cursor: not-allowed;
}

.wiz-label[b-ikc9s4xvrq] {
    display: block;
    font-size: 0.82rem;
    font-weight: 600;
    color: #4B5563;
    margin-bottom: 0.375rem;
    letter-spacing: 0.01em;
}

/* ── Save error list ─────────────────────────────────────────── */
.timing-save-errors[b-ikc9s4xvrq] {
    background: #FEF2F2;
    border: 1.5px solid #FECACA;
    border-radius: 12px;
    padding: 0.875rem 1rem;
    margin-bottom: var(--spacing-3, 0.75rem);
}

.timing-save-errors-title[b-ikc9s4xvrq] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: #B91C1C;
    margin-bottom: 0.375rem;
}

.timing-save-errors ul[b-ikc9s4xvrq] {
    list-style: disc;
    padding-left: 1.25rem;
    margin: 0;
}

.timing-save-errors li[b-ikc9s4xvrq] {
    font-size: 0.82rem;
    color: #991B1B;
    line-height: 1.5;
}
/* /Pages/Principal/Setup/Wizard.razor.rz.scp.css */
/* ══════════════════════════════════════════════════════════
   School Setup Wizard — Scoped Layout & Animation Styles
   ══════════════════════════════════════════════════════════ */

/* ── Page shell ─────────────────────────────────────────────── */
.setup-page[b-lxlr4li7km] {
    width: 100%;
    display: flex;
    flex-direction: column;
}

/* ── Constrained content wrapper ────────────────────────────── */
.wizard-wrap[b-lxlr4li7km] {
    max-width: 920px;
    margin: 0 auto;
    padding: 2rem 1.75rem 1.5rem;
    width: 100%;
}

@media (max-width: 768px) {
    .wizard-wrap[b-lxlr4li7km] {
        padding: 1.25rem 1rem 1rem;
    }
}

/* ── Sticky wizard navigation footer ───────────────────────── */
.wizard-footer[b-lxlr4li7km] {
    position: sticky;
    bottom: 0;
    background: #ffffff;
    border-top: 2px solid #F3F4F6;
    padding: 1.125rem 2.25rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    z-index: 40;
    box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.08);
}

@media (max-width: 640px) {
    .wizard-footer[b-lxlr4li7km] {
        padding: 1rem;
        flex-wrap: wrap;
        justify-content: space-between;
    }

    .wizard-footer-center[b-lxlr4li7km] {
        order: 3;
        width: 100%;
        text-align: center;
    }
}

/* ── Step progress bar ──────────────────────────────────────── */
.step-circle-active[b-lxlr4li7km] {
    box-shadow: 0 0 0 5px rgba(var(--color-primary-rgb, 74, 155, 142), 0.15);
}

/* ── Step card content areas ─────────────────────────────────── */
.step-section-card[b-lxlr4li7km] {
    background: #FAFAFA;
    border: 1px solid #F0F0F0;
    border-radius: 16px;
    padding: 1.5rem;
    margin-bottom: 1.25rem;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
}

/* ── Wizard section header ───────────────────────────────────── */
.wizard-section-title[b-lxlr4li7km] {
    font-size: 1rem;
    font-weight: 700;
    color: #111827;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1.25rem;
}

.wizard-section-title i[b-lxlr4li7km] {
    color: var(--color-primary-500, #4A9B8E);
    font-size: 1.1rem;
}

/* ── Step complete / incomplete banners ─────────────────────── */
.step-complete-banner[b-lxlr4li7km] {
    background: #F0FDF4;
    border: 2px solid #BBF7D0;
    border-radius: 14px;
    padding: 1.1rem 1.25rem;
    display: flex;
    align-items: center;
    gap: 1rem;
}

.step-complete-banner-icon[b-lxlr4li7km] {
    width: 44px;
    height: 44px;
    background: #DCFCE7;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.step-incomplete-banner[b-lxlr4li7km] {
    background: #FFFBEB;
    border: 2px solid #FDE68A;
    border-radius: 14px;
    padding: 1.1rem 1.25rem;
    display: flex;
    align-items: center;
    gap: 1rem;
}
/* /Pages/Principal/Staff/Handover.razor.rz.scp.css */
/* ── Tabs ──────────────────────────────────────────────────────────────── */
.tab-btn[b-54yyx8kdt5] {
    padding: 0.6rem 1.25rem;
    border-bottom: 3px solid transparent;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--color-text-secondary, #6b7280);
    background: none;
    border-radius: 0;
    cursor: pointer;
    transition: color 0.15s, border-color 0.15s;
}
.tab-btn:hover[b-54yyx8kdt5] { color: var(--color-primary, #4f46e5); }
.tab-btn--active[b-54yyx8kdt5] {
    color: var(--color-primary, #4f46e5);
    border-bottom-color: var(--color-primary, #4f46e5);
    font-weight: 600;
}

/* ── Step progress bar ─────────────────────────────────────────────────── */
.steps-bar[b-54yyx8kdt5] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
}
.step[b-54yyx8kdt5] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
}
.step-circle[b-54yyx8kdt5] {
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background: #e5e7eb;
    color: #9ca3af;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    font-weight: 700;
    transition: background 0.2s, color 0.2s;
}
.step--active .step-circle[b-54yyx8kdt5] {
    background: var(--color-primary, #4f46e5);
    color: #fff;
    box-shadow: 0 0 0 4px rgba(79, 70, 229, 0.15);
}
.step--done .step-circle[b-54yyx8kdt5] { background: #10b981; color: #fff; }
.step-label[b-54yyx8kdt5] {
    font-size: 0.7rem;
    font-weight: 500;
    color: #9ca3af;
    white-space: nowrap;
}
.step--active .step-label[b-54yyx8kdt5] { color: var(--color-primary, #4f46e5); font-weight: 600; }
.step--done .step-label[b-54yyx8kdt5] { color: #10b981; }
.step-line[b-54yyx8kdt5] {
    flex: 1;
    height: 2px;
    background: #e5e7eb;
    margin-bottom: 1.2rem;
    min-width: 1.5rem;
    max-width: 4rem;
    transition: background 0.2s;
}
.step-line--done[b-54yyx8kdt5] { background: #10b981; }

/* ── Card ──────────────────────────────────────────────────────────────── */
.card[b-54yyx8kdt5] {
    background: #fff;
    border-radius: 0.75rem;
    box-shadow: 0 1px 4px rgba(0,0,0,0.08);
    padding: 1.5rem;
}
.card-title[b-54yyx8kdt5] {
    font-size: 1.1rem;
    font-weight: 700;
    color: #111827;
    margin-bottom: 0.5rem;
}

/* ── Staff picker grid ─────────────────────────────────────────────────── */
.staff-grid[b-54yyx8kdt5] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 0.75rem;
    max-height: 340px;
    overflow-y: auto;
    padding-right: 4px;
}
.staff-card[b-54yyx8kdt5] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    border: 1.5px solid #e5e7eb;
    border-radius: 0.6rem;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
    background: #fafafa;
}
.staff-card:hover[b-54yyx8kdt5] { border-color: var(--color-primary, #4f46e5); background: #f5f3ff; }
.staff-card--selected[b-54yyx8kdt5] { border-color: var(--color-primary, #4f46e5); background: #ede9fe; }
.staff-avatar[b-54yyx8kdt5] {
    width: 2.5rem;
    height: 2.5rem;
    min-width: 2.5rem;
    border-radius: 50%;
    background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
    color: #fff;
    font-weight: 700;
    font-size: 0.8rem;
    display: flex;
    align-items: center;
    justify-content: center;
}
.staff-avatar--sm[b-54yyx8kdt5] { width: 2rem; height: 2rem; min-width: 2rem; font-size: 0.7rem; }
.staff-avatar--lg[b-54yyx8kdt5] { width: 3.5rem; height: 3.5rem; min-width: 3.5rem; font-size: 1rem; }
.staff-avatar--green[b-54yyx8kdt5] { background: linear-gradient(135deg, #10b981 0%, #059669 100%); }
.staff-info[b-54yyx8kdt5] { flex: 1; min-width: 0; }
.role-badge[b-54yyx8kdt5] {
    display: inline-block;
    padding: 0.1rem 0.5rem;
    border-radius: 9999px;
    font-size: 0.65rem;
    font-weight: 600;
    background: #e0e7ff;
    color: #3730a3;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
.role-badge--teacher[b-54yyx8kdt5] { background: #dbeafe; color: #1d4ed8; }
.role-badge--viceprincipal[b-54yyx8kdt5] { background: #fce7f3; color: #9d174d; }
.role-badge--principal[b-54yyx8kdt5] { background: #fef3c7; color: #92400e; }

/* ── Step action bar ───────────────────────────────────────────────────── */
.step-actions[b-54yyx8kdt5] {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid #f3f4f6;
}

/* ── Selected summary bar ──────────────────────────────────────────────── */
.selected-summary[b-54yyx8kdt5] {
    background: #f5f3ff;
    border: 1px solid #ddd6fe;
    border-radius: 0.5rem;
    padding: 0.6rem 1rem;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.25rem;
    font-size: 0.875rem;
}

/* ── Transfer options ──────────────────────────────────────────────────── */
.transfer-summary[b-54yyx8kdt5] {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    background: #f9fafb;
    border-radius: 0.6rem;
    padding: 1rem;
    flex-wrap: wrap;
}
.transfer-person[b-54yyx8kdt5] { display: flex; align-items: center; gap: 0.75rem; }
.options-grid[b-54yyx8kdt5] { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; }
.option-check[b-54yyx8kdt5] {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    border: 1.5px solid #e5e7eb;
    border-radius: 0.6rem;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
    background: #fafafa;
}
.option-check:hover[b-54yyx8kdt5] { border-color: var(--color-primary, #4f46e5); background: #f5f3ff; }
.option-check input[type="checkbox"][b-54yyx8kdt5] { margin-top: 0.15rem; accent-color: var(--color-primary, #4f46e5); }
.option-check--danger:hover[b-54yyx8kdt5] { border-color: #ef4444; background: #fef2f2; }
.form-textarea[b-54yyx8kdt5] {
    width: 100%;
    border: 1.5px solid #e5e7eb;
    border-radius: 0.5rem;
    padding: 0.6rem 0.75rem;
    font-size: 0.875rem;
    resize: vertical;
    outline: none;
    transition: border-color 0.15s;
}
.form-textarea:focus[b-54yyx8kdt5] { border-color: var(--color-primary, #4f46e5); }

/* ── Preview flow ──────────────────────────────────────────────────────── */
.preview-flow[b-54yyx8kdt5] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2rem;
    padding: 1.5rem;
    background: #f9fafb;
    border-radius: 0.75rem;
    flex-wrap: wrap;
}
.preview-person[b-54yyx8kdt5] { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; }
.preview-arrow[b-54yyx8kdt5] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    color: #9ca3af;
    font-size: 1.5rem;
}
.counts-grid[b-54yyx8kdt5] { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 0.75rem; }
.count-card[b-54yyx8kdt5] {
    border-radius: 0.6rem;
    padding: 0.85rem;
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    font-size: 0.75rem;
}
.count-card .count[b-54yyx8kdt5] { font-size: 1.6rem; font-weight: 800; line-height: 1; }
.count-card .label[b-54yyx8kdt5] { color: inherit; opacity: 0.8; font-weight: 500; }
.count-card--blue[b-54yyx8kdt5] { background: #dbeafe; color: #1e40af; }
.count-card--purple[b-54yyx8kdt5] { background: #ede9fe; color: #5b21b6; }
.count-card--orange[b-54yyx8kdt5] { background: #ffedd5; color: #9a3412; }
.count-card--green[b-54yyx8kdt5] { background: #d1fae5; color: #065f46; }
.count-card--teal[b-54yyx8kdt5] { background: var(--color-teal-100); color: #134e4a; }
.count-card--gray[b-54yyx8kdt5] { background: #f3f4f6; color: #374151; }

/* ── Alerts ────────────────────────────────────────────────────────────── */
.alert-warning[b-54yyx8kdt5] {
    background: #fffbeb;
    border: 1px solid #fde68a;
    border-radius: 0.5rem;
    padding: 0.75rem 1rem;
    font-size: 0.875rem;
    color: #92400e;
}
.alert-error[b-54yyx8kdt5] {
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: 0.5rem;
    padding: 0.75rem 1rem;
    font-size: 0.875rem;
    color: #991b1b;
}

/* ── Result screen ─────────────────────────────────────────────────────── */
.result-card[b-54yyx8kdt5] { text-align: center; padding: 3rem 2rem; }
.result-icon[b-54yyx8kdt5] { font-size: 4rem; color: #10b981; }

/* ── Status badge ──────────────────────────────────────────────────────── */
.status-badge[b-54yyx8kdt5] {
    display: inline-block;
    padding: 0.2rem 0.65rem;
    border-radius: 9999px;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: capitalize;
}
.status-badge--completed[b-54yyx8kdt5] { background: #d1fae5; color: #065f46; }
.status-badge--inprogress[b-54yyx8kdt5] { background: #dbeafe; color: #1e40af; }
.status-badge--failed[b-54yyx8kdt5] { background: #fee2e2; color: #991b1b; }

/* ── Search input ──────────────────────────────────────────────────────── */
.search-input[b-54yyx8kdt5] {
    width: 100%;
    border: 1.5px solid #e5e7eb;
    border-radius: 0.5rem;
    padding: 0.5rem 0.85rem;
    font-size: 0.875rem;
    outline: none;
    transition: border-color 0.15s;
}
.search-input:focus[b-54yyx8kdt5] { border-color: var(--color-primary, #4f46e5); }

/* ── Misc ──────────────────────────────────────────────────────────────── */
.loading-state[b-54yyx8kdt5] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 160px;
    color: #9ca3af;
}
.empty-state[b-54yyx8kdt5] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 200px;
    color: #9ca3af;
}

/* ── Responsive ────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
    .options-grid[b-54yyx8kdt5] { grid-template-columns: 1fr; }
    .steps-bar[b-54yyx8kdt5] { gap: 0; }
    .step-label[b-54yyx8kdt5] { display: none; }
    .step-line[b-54yyx8kdt5] { min-width: 1rem; }
}
/* /Pages/Principal/Staff/Index.razor.rz.scp.css */
/* ── Page CTA Button (Add Staff Member) ─────────────────────────── */
/* Replaces global btn-primary to make the CTA distinct on this page */

/* ── Role Filter Tabs (btn-primary / btn-secondary toggle) ───────── */

/* Active filter tab uses btn-primary — already styled above but needs compact look */
.text-sm
.text-sm

/* ── Modal Clean ─────────────────────────────────────────────────── */
.modal-clean[b-59rv5cnnye] {
    background: white;
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-2xl, 0 25px 50px rgba(0,0,0,0.25));
    max-height: 90vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.modal-header-clean[b-59rv5cnnye] {
    padding: var(--space-4) var(--space-6);
    border-bottom: 1px solid var(--color-neutral-200);
    background: var(--color-neutral-50);
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
    flex-shrink: 0;
}
.modal-body-clean[b-59rv5cnnye] {
    padding: var(--space-5) var(--space-6);
    overflow-y: auto;
    flex: 1;
}
.modal-footer-clean[b-59rv5cnnye] {
    padding: var(--space-4) var(--space-6);
    border-top: 1px solid var(--color-neutral-200);
    background: var(--color-neutral-50);
    display: flex;
    justify-content: flex-end;
    gap: var(--space-3);
    border-radius: 0 0 var(--radius-xl) var(--radius-xl);
    flex-shrink: 0;
}

/* ── Modal Action Buttons ────────────────────────────────────────── */
.btn-clean-secondary[b-59rv5cnnye] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-5);
    background: white;
    color: var(--color-neutral-700);
    border: 1px solid var(--color-neutral-300);
    border-radius: var(--radius-md);
    font-size: var(--text-sm);
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s;
}
.btn-clean-secondary:hover[b-59rv5cnnye] { background: var(--color-neutral-100); }

.btn-clean-primary[b-59rv5cnnye] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-5);
    background: var(--color-primary-700);
    color: white;
    border: none;
    border-radius: var(--radius-md);
    font-size: var(--text-sm);
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s;
}
.btn-clean-primary:hover[b-59rv5cnnye] { background: var(--color-primary-800); }
.btn-clean-primary:disabled[b-59rv5cnnye] { opacity: 0.55; cursor: not-allowed; }

/* ── Role Card Grid ──────────────────────────────────────────────── */
.role-card-clean[b-59rv5cnnye] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.3rem;
    padding: var(--space-2) var(--space-1);
    border: 1.5px solid var(--color-neutral-200);
    border-radius: var(--radius-lg);
    background: white;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
    font-size: 0;       /* kill inherited text */
}
.role-card-clean:hover[b-59rv5cnnye] {
    border-color: var(--color-primary-400);
    background: var(--color-primary-50);
}
.role-card-clean.selected[b-59rv5cnnye] {
    border-color: var(--color-primary-600);
    background: var(--color-primary-50);
    box-shadow: 0 0 0 2px var(--color-primary-200);
}
.role-card-icon[b-59rv5cnnye] {
    font-size: 1.25rem;
    color: var(--color-primary-600);
    display: block;
}
.role-card-clean.selected .role-card-icon[b-59rv5cnnye] { color: var(--color-primary-700); }
.role-card-name[b-59rv5cnnye] {
    font-size: 0.68rem;
    font-weight: 600;
    color: var(--color-neutral-700);
    text-align: center;
    line-height: 1.2;
    white-space: normal;
}
.role-card-clean.selected .role-card-name[b-59rv5cnnye] { color: var(--color-primary-800); }

/* ── Form Elements (Clean variant) ──────────────────────────────── */
.form-label-clean[b-59rv5cnnye] {
    display: block;
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--color-neutral-600);
    margin-bottom: 0.35rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.form-input-clean[b-59rv5cnnye] {
    display: block;
    width: 100%;
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--color-neutral-300);
    border-radius: var(--radius-md);
    font-size: var(--text-sm);
    color: var(--color-neutral-900);
    background: white;
    box-sizing: border-box;
    transition: border-color 0.15s, box-shadow 0.15s;
    font-family: inherit;
}
.form-input-clean:focus[b-59rv5cnnye] {
    outline: none;
    border-color: var(--color-primary-500);
    box-shadow: 0 0 0 2px var(--color-primary-100);
}
.form-input-clean:disabled[b-59rv5cnnye] {
    background: var(--color-neutral-100);
    color: var(--color-neutral-500);
    cursor: not-allowed;
}
.form-field-clean[b-59rv5cnnye] { margin-bottom: var(--space-4); }
.form-grid-2[b-59rv5cnnye] { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); margin-bottom: var(--space-4); }
.form-grid-3[b-59rv5cnnye] { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: var(--space-4); margin-bottom: var(--space-4); }
.form-section-divider[b-59rv5cnnye] { border: none; border-top: 1px solid var(--color-neutral-200); margin: var(--space-4) 0; }

/* ── Checkbox Field ──────────────────────────────────────────────── */
.form-checkbox-clean[b-59rv5cnnye] {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    background: var(--color-primary-50);
    border: 1px solid var(--color-primary-200);
    border-radius: var(--radius-lg);
    padding: var(--space-3) var(--space-4);
}
.form-checkbox-clean input[type="checkbox"][b-59rv5cnnye] {
    width: 1.1rem;
    height: 1.1rem;
    margin-top: 0.15rem;
    accent-color: var(--color-primary-600);
    cursor: pointer;
    flex-shrink: 0;
}
.form-checkbox-label[b-59rv5cnnye] {
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--color-neutral-800);
    line-height: 1.4;
}
.form-checkbox-hint[b-59rv5cnnye] {
    font-size: var(--text-xs);
    color: var(--color-neutral-500);
    margin-top: 0.2rem;
    line-height: 1.4;
}

/* ── Responsive ──────────────────────────────────────────────────── */
@media (max-width: 767px) {
    [b-59rv5cnnye] h1, [b-59rv5cnnye] p, [b-59rv5cnnye] select { min-width: 0; max-width: 100%; }

    [b-59rv5cnnye] .staff-header-actions { flex-wrap: wrap; gap: 8px; }
}

@media (max-width: 640px) {
    .form-grid-2[b-59rv5cnnye] { grid-template-columns: 1fr; }
    .form-grid-3[b-59rv5cnnye] { grid-template-columns: 1fr 1fr; }
    .modal-body-clean[b-59rv5cnnye] { padding: var(--space-4); }
    .modal-header-clean[b-59rv5cnnye], .modal-footer-clean[b-59rv5cnnye] { padding: var(--space-3) var(--space-4); }
}
@media (max-width: 400px) {
    .form-grid-3[b-59rv5cnnye] { grid-template-columns: 1fr; }
}
/* /Pages/Principal/Students/BulkAdd.razor.rz.scp.css */
.bulk-add-page[b-2li3bb9jvz] {
    max-width: 100%;
    margin: 0 auto;
    padding: var(--spacing-6) var(--spacing-4);
}

.bulk-add-header[b-2li3bb9jvz] {
    margin-bottom: var(--spacing-6);
}

.back-btn[b-2li3bb9jvz] {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-2);
    padding: var(--spacing-2) var(--spacing-4);
    border: 1px solid var(--color-neutral-200);
    border-radius: var(--radius-md);
    background: var(--color-neutral-0);
    color: var(--color-neutral-700);
    cursor: pointer;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    transition: background-color 0.15s;
}

.back-btn:hover[b-2li3bb9jvz] {
    background: var(--color-neutral-50);
}

.page-card[b-2li3bb9jvz] {
    background: var(--color-neutral-0);
    border: 1px solid var(--color-neutral-200);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.page-card-header[b-2li3bb9jvz] {
    padding: var(--spacing-6);
    border-bottom: 1px solid var(--color-neutral-200);
    background: var(--color-neutral-50);
}

.page-title[b-2li3bb9jvz] {
    margin: 0 0 var(--spacing-1) 0;
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-semibold);
    color: var(--color-neutral-900);
}

.page-subtitle[b-2li3bb9jvz] {
    margin: 0;
    font-size: var(--font-size-sm);
    color: var(--color-neutral-500);
}

.success-banner[b-2li3bb9jvz] {
    margin: var(--spacing-6);
    padding: var(--spacing-4) var(--spacing-5);
    background: var(--color-success-50);
    border: 1px solid var(--color-success-200);
    border-radius: var(--radius-md);
    color: var(--color-success-700);
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
}

.success-banner i[b-2li3bb9jvz] {
    font-size: var(--font-size-xl);
}

.error-banner[b-2li3bb9jvz] {
    margin: var(--spacing-6);
    padding: var(--spacing-4) var(--spacing-5);
    background: var(--color-error-50);
    border: 1px solid var(--color-error-200);
    border-radius: var(--radius-md);
    color: var(--color-error-700);
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
}

.error-banner i[b-2li3bb9jvz] {
    font-size: var(--font-size-xl);
}

/* Bug 28: Prominent error banner for validation errors */
.error-banner-prominent[b-2li3bb9jvz] {
    margin: var(--spacing-4) var(--spacing-6);
    padding: var(--spacing-5) var(--spacing-6);
    background: #fef2f2;
    border: 2px solid #ef4444;
    border-radius: var(--radius-md);
    color: #991b1b;
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-4);
    font-size: var(--font-size-sm);
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.15);
    animation: error-pulse-b-2li3bb9jvz 0.4s ease-out;
}

@keyframes error-pulse-b-2li3bb9jvz {
    from { opacity: 0; transform: translateY(-8px); }
    to   { opacity: 1; transform: translateY(0); }
}

.error-banner-prominent i[b-2li3bb9jvz] {
    font-size: 1.5rem;
    margin-top: 2px;
}

.error-banner-prominent strong[b-2li3bb9jvz] {
    display: block;
    font-size: var(--font-size-base);
    margin-bottom: 0.25rem;
}

.error-banner-prominent p[b-2li3bb9jvz] {
    margin: 0.15rem 0;
    line-height: 1.4;
}

.error-banner-prominent .error-hint[b-2li3bb9jvz] {
    font-size: var(--font-size-xs);
    opacity: 0.8;
}

.form-section[b-2li3bb9jvz] {
    padding: var(--spacing-6);
}

.row-controls[b-2li3bb9jvz] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--spacing-4);
}

.row-count[b-2li3bb9jvz] {
    font-size: var(--font-size-sm);
    color: var(--color-neutral-500);
}

.row-btns[b-2li3bb9jvz] {
    display: flex;
    gap: var(--spacing-2);
}

.table-wrap-full[b-2li3bb9jvz] {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border: 1px solid var(--color-neutral-200);
    border-radius: var(--radius-md);
}

.bulk-table[b-2li3bb9jvz] {
    width: 100%;
    min-width: 600px;
    border-collapse: collapse;
    font-size: var(--font-size-sm);
}

.bulk-table thead[b-2li3bb9jvz] {
    background: var(--color-neutral-50);
}

.bulk-table th[b-2li3bb9jvz] {
    padding: var(--spacing-3) var(--spacing-3);
    text-align: left;
    font-weight: var(--font-weight-semibold);
    color: var(--color-neutral-700);
    border-bottom: 1px solid var(--color-neutral-200);
    white-space: nowrap;
}

.bulk-table td[b-2li3bb9jvz] {
    padding: var(--spacing-2) var(--spacing-3);
    border-bottom: 1px solid var(--color-neutral-50);
    vertical-align: middle;
}

.bulk-table tbody tr:last-child td[b-2li3bb9jvz] {
    border-bottom: none;
}

.required[b-2li3bb9jvz] {
    color: var(--color-error-500);
}

.hint[b-2li3bb9jvz] {
    font-size: var(--font-size-xs);
    color: var(--color-neutral-400);
    font-weight: var(--font-weight-normal);
}

.cell-input[b-2li3bb9jvz] {
    width: 100%;
    padding: 0.45rem var(--spacing-3);
    border: 1px solid var(--color-neutral-300);
    border-radius: var(--radius-sm);
    font-size: var(--font-size-sm);
    background: var(--color-neutral-0);
    transition: border-color 0.15s, box-shadow 0.15s;
}

.cell-input:focus[b-2li3bb9jvz] {
    outline: none;
    border-color: var(--color-primary-500);
    box-shadow: 0 0 0 3px var(--color-primary-50);
}

.cell-input-err[b-2li3bb9jvz] {
    border-color: var(--color-error-500);
    background: var(--color-error-50);
}

.cell-select[b-2li3bb9jvz] {
    appearance: none;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
    background-position: right var(--spacing-2) center;
    background-repeat: no-repeat;
    background-size: 1.5em 1.5em;
    padding-right: var(--spacing-6);
}

.delete-btn[b-2li3bb9jvz] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--spacing-5);
    height: var(--spacing-5);
    border: none;
    border-radius: var(--radius-sm);
    background: var(--color-error-50);
    color: var(--color-error-600);
    cursor: pointer;
    transition: background-color 0.15s;
}

.delete-btn:hover:not(:disabled)[b-2li3bb9jvz] {
    background: var(--color-error-100);
}

.delete-btn:disabled[b-2li3bb9jvz] {
    opacity: 0.5;
    cursor: not-allowed;
}

.results-section[b-2li3bb9jvz] {
    margin: 0 var(--spacing-6) var(--spacing-6);
}

.results-table-wrap[b-2li3bb9jvz] {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border: 1px solid var(--color-neutral-200);
    border-radius: var(--radius-md);
}

.results-table[b-2li3bb9jvz] {
    width: 100%;
    min-width: 500px;
    border-collapse: collapse;
    font-size: var(--font-size-sm);
}

.results-table thead[b-2li3bb9jvz] {
    background: var(--color-neutral-50);
}

.results-table th[b-2li3bb9jvz] {
    padding: var(--spacing-3) var(--spacing-3);
    text-align: left;
    font-weight: var(--font-weight-semibold);
    color: var(--color-neutral-700);
    border-bottom: 1px solid var(--color-neutral-200);
}

.results-table td[b-2li3bb9jvz] {
    padding: var(--spacing-3) var(--spacing-3);
    border-bottom: 1px solid var(--color-neutral-50);
}

.results-table tbody tr:last-child td[b-2li3bb9jvz] {
    border-bottom: none;
}

.result-success[b-2li3bb9jvz] {
    background: var(--color-success-50);
}

.result-fail[b-2li3bb9jvz] {
    background: var(--color-error-50);
}

.result-icon[b-2li3bb9jvz] {
    text-align: center;
}

.result-icon .fas[b-2li3bb9jvz] {
    font-size: var(--font-size-base);
}

.result-success .fas[b-2li3bb9jvz] {
    color: var(--color-success-600);
}

.result-fail .fas[b-2li3bb9jvz] {
    color: var(--color-error-600);
}

.result-note[b-2li3bb9jvz] {
    font-size: var(--font-size-xs);
}

.note-error[b-2li3bb9jvz] {
    color: var(--color-error-700);
}

.note-warn[b-2li3bb9jvz] {
    color: var(--color-warning-700);
}

.note-info[b-2li3bb9jvz] {
    color: var(--color-info-700);
}

.page-footer[b-2li3bb9jvz] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--spacing-3);
    padding: var(--spacing-5) var(--spacing-6);
    border-top: 1px solid var(--color-neutral-200);
    background: var(--color-neutral-50);
}

.btn[b-2li3bb9jvz] {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-2);
    padding: var(--spacing-3) var(--spacing-5);
    border: none;
    border-radius: var(--radius-md);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    cursor: pointer;
    transition: background-color 0.15s, opacity 0.15s;
    min-height: 44px;
}

.btn:disabled[b-2li3bb9jvz] {
    opacity: 0.5;
    cursor: not-allowed;
}

.btn-primary[b-2li3bb9jvz] {
    background: var(--color-primary-500);
    color: var(--color-neutral-0);
}

.btn-primary:hover:not(:disabled)[b-2li3bb9jvz] {
    background: var(--color-primary-600);
}

.btn-secondary[b-2li3bb9jvz] {
    background: var(--color-neutral-0);
    color: var(--color-neutral-700);
    border: 1px solid var(--color-neutral-300);
}

.btn-secondary:hover:not(:disabled)[b-2li3bb9jvz] {
    background: var(--color-neutral-50);
}

.btn-sm[b-2li3bb9jvz] {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-2);
    padding: 0.35rem var(--spacing-3);
    border: 1px solid var(--color-neutral-300);
    border-radius: var(--radius-sm);
    background: var(--color-neutral-0);
    color: var(--color-neutral-700);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    cursor: pointer;
}

.btn-sm:hover:not(:disabled)[b-2li3bb9jvz] {
    background: var(--color-neutral-50);
}

.btn-sm:disabled[b-2li3bb9jvz] {
    opacity: 0.5;
    cursor: not-allowed;
}

.btn-danger[b-2li3bb9jvz] {
    color: var(--color-error-600);
    border-color: var(--color-error-200);
    background: var(--color-error-50);
}

.btn-danger:hover:not(:disabled)[b-2li3bb9jvz] {
    background: var(--color-error-100);
}

/* Bug 28: Inline per-cell error message for on-the-fly validation */
.cell-err[b-2li3bb9jvz] {
    display: block;
    margin-top: 2px;
    font-size: 0.65rem;
    color: #dc2626;
    font-weight: 500;
    line-height: 1.3;
}

@media (max-width: 767px) {
    .bulk-add-page[b-2li3bb9jvz] {
        padding: 0 var(--spacing-4);
    }

    .page-card-header[b-2li3bb9jvz] {
        padding: var(--spacing-4);
    }

    .form-section[b-2li3bb9jvz] {
        padding: var(--spacing-4);
    }

    .results-section[b-2li3bb9jvz] {
        margin: 0 var(--spacing-4) var(--spacing-4);
    }

    .page-footer[b-2li3bb9jvz] {
        flex-direction: column-reverse;
    }

    .page-footer .btn[b-2li3bb9jvz] {
        width: 100%;
        justify-content: center;
    }
}
/* /Pages/Principal/Students/Details.razor.rz.scp.css */
.student-details-container[b-g6n785sq7p] {
    padding: 2rem;
    max-width: 1400px;
    margin: 0 auto;
}

/* ── Hostel Badge ─────────────────────────────────────────── */
.hostel-badge[b-g6n785sq7p] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: 0.25rem 0.75rem;
    background: var(--color-indigo-100, #e0e7ff);
    border: 1px solid var(--color-indigo-200, #c7d2fe);
    border-radius: var(--radius-full, 9999px);
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--color-indigo-700, #4338ca);
    margin-top: var(--space-1);
}
.hostel-badge i[b-g6n785sq7p] { font-size: 0.7rem; }

/* ── Hostel Info Card (Overview Tab) ─────────────────────── */
.hostel-info-card[b-g6n785sq7p] {
    background: var(--color-white, #fff);
    border: 1px solid var(--color-neutral-200, #e5e7eb);
    border-left: 4px solid var(--color-indigo-500, #6366f1);
    border-radius: var(--radius-lg);
    padding: var(--space-5);
    margin-bottom: var(--space-5);
}
.hostel-info-card .section-title[b-g6n785sq7p] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-base);
    font-weight: 700;
    color: var(--color-indigo-700, #4338ca);
    margin-bottom: var(--space-4);
}

.badge-hostel-type[b-g6n785sq7p] {
    display: inline-flex;
    align-items: center;
    padding: 0.2rem 0.65rem;
    background: var(--color-indigo-50, #eef2ff);
    border: 1px solid var(--color-indigo-200, #c7d2fe);
    border-radius: var(--radius-full, 9999px);
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--color-indigo-600, #4f46e5);
}

.btn-link-small[b-g6n785sq7p] {
    background: none;
    border: none;
    padding: 0;
    font-size: var(--text-sm);
    color: var(--color-primary-600, #2563eb);
    cursor: pointer;
    text-decoration: underline;
    font-weight: 500;
}
.btn-link-small:hover[b-g6n785sq7p] { color: var(--color-primary-800, #1e40af); }

/* Header Section */
.details-header[b-g6n785sq7p] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem;
}

.back-button[b-g6n785sq7p] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    background: var(--color-gray-100);
    border: 1px solid var(--color-gray-300);
    border-radius: var(--radius-md);
    color: var(--color-gray-700);
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

.back-button:hover[b-g6n785sq7p] {
    background: var(--color-gray-200);
    border-color: var(--color-gray-400);
}

.header-actions[b-g6n785sq7p] {
    display: flex;
    gap: 1rem;
}

/* Loading & Error States */
.loading-container[b-g6n785sq7p], .error-container[b-g6n785sq7p] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4rem 2rem;
    text-align: center;
}

.spinner[b-g6n785sq7p] {
    width: 50px;
    height: 50px;
    border: 4px solid var(--color-gray-200);
    border-top-color: var(--color-primary);
    border-radius: 50%;
    animation: spin-b-g6n785sq7p 1s linear infinite;
}

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

.error-container i[b-g6n785sq7p] {
    font-size: 3rem;
    color: var(--color-danger);
    margin-bottom: 1rem;
}

/* Profile Header Card */
.profile-header-card[b-g6n785sq7p] {
    background: white;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    padding: 2rem;
    margin-bottom: 2rem;
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 2rem;
    align-items: center;
}

.profile-photo-section[b-g6n785sq7p] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

.profile-photo[b-g6n785sq7p] {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background: var(--color-gray-100);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border: 4px solid white;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.profile-photo img[b-g6n785sq7p] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.profile-photo i[b-g6n785sq7p] {
    font-size: 3rem;
    color: var(--color-gray-400);
}

.student-status[b-g6n785sq7p] {
    padding: 0.5rem 1rem;
    border-radius: var(--radius-full);
    font-size: 0.875rem;
    font-weight: 600;
    text-transform: uppercase;
}

.student-status.active[b-g6n785sq7p] {
    background: var(--color-success-light);
    color: var(--color-success);
}

.student-status.inactive[b-g6n785sq7p] {
    background: var(--color-gray-200);
    color: var(--color-gray-600);
}

.profile-info-section[b-g6n785sq7p] {
    flex: 1;
}

.student-name[b-g6n785sq7p] {
    font-size: 2rem;
    font-weight: 700;
    color: var(--color-gray-900);
    margin-bottom: 1rem;
}

.student-meta[b-g6n785sq7p] {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
}

.meta-item[b-g6n785sq7p] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--color-gray-600);
}

.meta-item i[b-g6n785sq7p] {
    color: var(--color-primary);
}

.meta-item strong[b-g6n785sq7p] {
    color: var(--color-gray-900);
}

.profile-stats-section[b-g6n785sq7p] {
    display: flex;
    gap: 1.5rem;
}

.stat-card[b-g6n785sq7p] {
    text-align: center;
    padding: 1.5rem;
    background: var(--color-gray-50);
    border-radius: var(--radius-lg);
    min-width: 100px;
}

.stat-card i[b-g6n785sq7p] {
    font-size: 2rem;
    color: var(--color-primary);
    margin-bottom: 0.5rem;
}

.stat-value[b-g6n785sq7p] {
    font-size: 2rem;
    font-weight: 700;
    color: var(--color-gray-900);
    margin-bottom: 0.25rem;
}

.stat-label[b-g6n785sq7p] {
    font-size: 0.875rem;
    color: var(--color-gray-600);
}

/* Tabs */
.tabs-container[b-g6n785sq7p] {
    display: flex;
    gap: 0.25rem;
    background: white;
    padding: 0.75rem 1rem;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    margin-bottom: 2rem;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: var(--color-gray-300) transparent;
    flex-wrap: nowrap;
}

.tabs-container[b-g6n785sq7p]::-webkit-scrollbar {
    height: 3px;
}
.tabs-container[b-g6n785sq7p]::-webkit-scrollbar-track {
    background: transparent;
}
.tabs-container[b-g6n785sq7p]::-webkit-scrollbar-thumb {
    background: var(--color-gray-300);
    border-radius: 2px;
}

.tab-button[b-g6n785sq7p] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.625rem 1rem;
    background: transparent;
    border: none;
    border-radius: var(--radius-md);
    color: var(--color-gray-600);
    font-weight: 500;
    font-size: 0.875rem;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
    flex-shrink: 0;
}

.tab-button:hover[b-g6n785sq7p] {
    background: var(--color-gray-50);
    color: var(--color-gray-900);
}

.tab-button.active[b-g6n785sq7p] {
    background: var(--color-primary);
    color: white;
}

/* Tab Content */
.tab-content[b-g6n785sq7p] {
    animation: fadeIn-b-g6n785sq7p 0.3s;
}

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

/* Info Card */
.info-card[b-g6n785sq7p] {
    background: white;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    margin-bottom: 2rem;
}

.card-header[b-g6n785sq7p] {
    padding: 1.5rem;
    border-bottom: 1px solid var(--color-gray-200);
}

.card-header h3[b-g6n785sq7p] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--color-gray-900);
    margin: 0;
}

.card-header i[b-g6n785sq7p] {
    color: var(--color-primary);
}

.card-body[b-g6n785sq7p] {
    padding: 1.5rem;
}

/* Info Grid — legacy, used by overview tab */
.info-grid[b-g6n785sq7p] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.5rem;
}

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

.info-item.full-width[b-g6n785sq7p] {
    grid-column: 1 / -1;
}

.info-item label[b-g6n785sq7p] {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--color-gray-500);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.info-item span[b-g6n785sq7p] {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--color-gray-900);
}

/* ── Compact key-value rows (NNGroup/Salesforce/GitHub standard) ── */
.prop-panel[b-g6n785sq7p] {
    background: white;
    border: 1px solid var(--color-gray-200, #e5e7eb);
    border-radius: var(--radius-md, 8px);
    padding: 1.25rem 1.5rem;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}

.prop-section[b-g6n785sq7p] {
    margin-bottom: 1.25rem;
}

.prop-section:last-child[b-g6n785sq7p] {
    margin-bottom: 0;
}

.prop-section-title[b-g6n785sq7p] {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-gray-400, #9ca3af);
    padding-bottom: 0.4rem;
    border-bottom: 1px solid var(--color-gray-200, #e5e7eb);
    margin-bottom: 0.1rem;
}

.prop-row[b-g6n785sq7p] {
    display: flex;
    align-items: baseline;
    padding: 0.35rem 0;
    border-bottom: 1px solid var(--color-gray-50, #f9fafb);
}

.prop-row:last-child[b-g6n785sq7p] {
    border-bottom: none;
}

.prop-label[b-g6n785sq7p] {
    width: 170px;
    flex-shrink: 0;
    font-size: 0.78rem;
    color: var(--color-gray-500, #6b7280);
    font-weight: 500;
}

.prop-value[b-g6n785sq7p] {
    font-size: 0.875rem;
    color: var(--color-gray-900, #111827);
    font-weight: 500;
    word-break: break-word;
}

.prop-empty[b-g6n785sq7p] {
    font-size: 0.875rem;
    color: var(--color-gray-400, #9ca3af);
    padding: 0.5rem 0;
}

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

.stat-card-detailed[b-g6n785sq7p] {
    background: white;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    padding: 1.5rem;
    display: flex;
    align-items: center;
    gap: 1rem;
}

.stat-icon[b-g6n785sq7p] {
    width: 60px;
    height: 60px;
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
}

.stat-icon.blue[b-g6n785sq7p] {
    background: var(--color-primary-light);
    color: var(--color-primary);
}

.stat-icon.green[b-g6n785sq7p] {
    background: var(--color-success-light);
    color: var(--color-success);
}

.stat-icon.orange[b-g6n785sq7p] {
    background: var(--color-warning-light);
    color: var(--color-warning);
}

.stat-icon.red[b-g6n785sq7p] {
    background: var(--color-danger-light);
    color: var(--color-danger);
}

.stat-details[b-g6n785sq7p] {
    flex: 1;
}

.stat-details .stat-value[b-g6n785sq7p] {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--color-gray-900);
    margin-bottom: 0.25rem;
}

.stat-details .stat-label[b-g6n785sq7p] {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--color-gray-600);
    margin-bottom: 0.25rem;
}

.stat-details .stat-change[b-g6n785sq7p] {
    font-size: 0.75rem;
    color: var(--color-gray-500);
}

/* Table */
.table-responsive[b-g6n785sq7p] {
    overflow-x: auto;
}

.data-table[b-g6n785sq7p] {
    width: 100%;
    border-collapse: collapse;
}

.data-table thead[b-g6n785sq7p] {
    background: var(--color-gray-50);
}

.data-table th[b-g6n785sq7p] {
    padding: 1rem;
    text-align: left;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-gray-700);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-bottom: 2px solid var(--color-gray-200);
}

.data-table td[b-g6n785sq7p] {
    padding: 1rem;
    border-bottom: 1px solid var(--color-gray-200);
    color: var(--color-gray-700);
}

.data-table tbody tr:hover[b-g6n785sq7p] {
    background: var(--color-gray-50);
}

/* Badges */
.percentage-badge[b-g6n785sq7p] {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    border-radius: var(--radius-full);
    font-size: 0.875rem;
    font-weight: 600;
}

.percentage-badge.excellent[b-g6n785sq7p] {
    background: var(--color-success-light);
    color: var(--color-success);
}

.percentage-badge.good[b-g6n785sq7p] {
    background: var(--color-info-light);
    color: var(--color-info);
}

.percentage-badge.average[b-g6n785sq7p] {
    background: var(--color-warning-light);
    color: var(--color-warning);
}

.percentage-badge.poor[b-g6n785sq7p] {
    background: var(--color-danger-light);
    color: var(--color-danger);
}

.grade-badge[b-g6n785sq7p] {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    border-radius: var(--radius-md);
    font-size: 0.875rem;
    font-weight: 700;
}

.grade-badge.a\+[b-g6n785sq7p] {
    background: var(--color-success);
    color: white;
}

.grade-badge.a[b-g6n785sq7p] {
    background: var(--color-info);
    color: white;
}

.grade-badge.b\+[b-g6n785sq7p] {
    background: var(--color-warning);
    color: white;
}

.status-badge[b-g6n785sq7p] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem 0.75rem;
    border-radius: var(--radius-full);
    font-size: 0.875rem;
    font-weight: 600;
}

.status-badge.completed[b-g6n785sq7p] {
    background: var(--color-success-light);
    color: var(--color-success);
}

.status-badge.pending[b-g6n785sq7p] {
    background: var(--color-warning-light);
    color: var(--color-warning);
}

.status-badge.overdue[b-g6n785sq7p] {
    background: var(--color-danger-light);
    color: var(--color-danger);
}

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

.attendance-stat-card[b-g6n785sq7p] {
    text-align: center;
    padding: 2rem;
    border-radius: var(--radius-lg);
}

.attendance-stat-card i[b-g6n785sq7p] {
    font-size: 2.5rem;
    margin-bottom: 1rem;
}

.attendance-stat-card.present[b-g6n785sq7p] {
    background: var(--color-success-light);
    color: var(--color-success);
}

.attendance-stat-card.absent[b-g6n785sq7p] {
    background: var(--color-danger-light);
    color: var(--color-danger);
}

.attendance-stat-card.late[b-g6n785sq7p] {
    background: var(--color-warning-light);
    color: var(--color-warning);
}

.attendance-stat-card.leave[b-g6n785sq7p] {
    background: var(--color-info-light);
    color: var(--color-info);
}

.attendance-stat-card .stat-number[b-g6n785sq7p] {
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
}

.attendance-stat-card .stat-label[b-g6n785sq7p] {
    font-size: 1rem;
    font-weight: 600;
    opacity: 0.8;
}

.badge-present[b-g6n785sq7p], .badge-absent[b-g6n785sq7p], .badge-late[b-g6n785sq7p], .badge-leave[b-g6n785sq7p] {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    border-radius: var(--radius-full);
    font-size: 0.875rem;
    font-weight: 600;
}

.badge-present[b-g6n785sq7p] {
    background: var(--color-success-light);
    color: var(--color-success);
}

.badge-absent[b-g6n785sq7p] {
    background: var(--color-danger-light);
    color: var(--color-danger);
}

.badge-late[b-g6n785sq7p] {
    background: var(--color-warning-light);
    color: var(--color-warning);
}

.badge-leave[b-g6n785sq7p] {
    background: var(--color-info-light);
    color: var(--color-info);
}

/* Fee Cards */
.fee-summary-cards[b-g6n785sq7p] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.fee-card[b-g6n785sq7p] {
    background: white;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    padding: 2rem;
    text-align: center;
}

.fee-card i[b-g6n785sq7p] {
    font-size: 2.5rem;
    margin-bottom: 1rem;
}

.fee-card.total[b-g6n785sq7p] {
    border-top: 4px solid var(--color-info);
}

.fee-card.total i[b-g6n785sq7p] {
    color: var(--color-info);
}

.fee-card.paid[b-g6n785sq7p] {
    border-top: 4px solid var(--color-success);
}

.fee-card.paid i[b-g6n785sq7p] {
    color: var(--color-success);
}

.fee-card.pending[b-g6n785sq7p] {
    border-top: 4px solid var(--color-danger);
}

.fee-card.pending i[b-g6n785sq7p] {
    color: var(--color-danger);
}

.fee-amount[b-g6n785sq7p] {
    font-size: 2rem;
    font-weight: 700;
    color: var(--color-gray-900);
    margin-bottom: 0.5rem;
}

.fee-label[b-g6n785sq7p] {
    font-size: 1rem;
    color: var(--color-gray-600);
    font-weight: 500;
}

/* Documents */
.documents-grid[b-g6n785sq7p] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 1.5rem;
}

.document-card[b-g6n785sq7p] {
    background: white;
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    transition: all 0.2s;
}

.document-card:hover[b-g6n785sq7p] {
    box-shadow: var(--shadow-md);
    border-color: var(--color-primary);
}

.doc-icon[b-g6n785sq7p] {
    width: 50px;
    height: 50px;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
}

.doc-icon.certificate[b-g6n785sq7p] {
    background: var(--color-success-light);
    color: var(--color-success);
}

.doc-icon.identity[b-g6n785sq7p] {
    background: var(--color-info-light);
    color: var(--color-info);
}

.doc-icon.photo[b-g6n785sq7p] {
    background: var(--color-warning-light);
    color: var(--color-warning);
}

.doc-icon.medical[b-g6n785sq7p] {
    background: var(--color-danger-light);
    color: var(--color-danger);
}

.doc-details[b-g6n785sq7p] {
    flex: 1;
}

.doc-details h4[b-g6n785sq7p] {
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-gray-900);
    margin-bottom: 0.25rem;
}

.doc-details p[b-g6n785sq7p] {
    font-size: 0.875rem;
    color: var(--color-gray-600);
    margin-bottom: 0.5rem;
}

.doc-meta[b-g6n785sq7p] {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    font-size: 0.75rem;
    color: var(--color-gray-500);
}

.doc-meta span[b-g6n785sq7p] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.doc-actions[b-g6n785sq7p] {
    display: flex;
    gap: 0.5rem;
}

.btn-icon[b-g6n785sq7p] {
    width: 36px;
    height: 36px;
    border-radius: var(--radius-md);
    border: 1px solid var(--color-gray-300);
    background: white;
    color: var(--color-gray-600);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-icon:hover[b-g6n785sq7p] {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: white;
}

.text-muted[b-g6n785sq7p] {
    color: var(--color-gray-400);
}

/* Responsive Design */
@media (max-width: 1024px) {
    .profile-header-card[b-g6n785sq7p] {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .profile-stats-section[b-g6n785sq7p] {
        justify-content: center;
    }

    .student-meta[b-g6n785sq7p] {
        justify-content: center;
    }
}

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

    .details-header[b-g6n785sq7p] {
        flex-direction: column;
        gap: 1rem;
    }

    .header-actions[b-g6n785sq7p] {
        width: 100%;
    }

    

    .student-name[b-g6n785sq7p] {
        font-size: 1.5rem;
    }

    .profile-stats-section[b-g6n785sq7p] {
        flex-direction: column;
    }

    .stat-card[b-g6n785sq7p] {
        width: 100%;
    }

    .tabs-container[b-g6n785sq7p] {
        padding: 0.5rem;
    }

    .tab-button[b-g6n785sq7p] {
        padding: 0.5rem 1rem;
        font-size: 0.875rem;
    }

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

    .stats-grid[b-g6n785sq7p] {
        grid-template-columns: 1fr;
    }

    .attendance-stats[b-g6n785sq7p] {
        grid-template-columns: repeat(2, 1fr);
    }

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

    .documents-grid[b-g6n785sq7p] {
        grid-template-columns: 1fr;
    }
}

/* ── New extended tabs ──────────────────────────────────────── */
.badge-blood-group[b-g6n785sq7p] {
    display: inline-block;
    padding: 0.2rem 0.75rem;
    background: var(--color-danger-100, #fee2e2);
    color: var(--color-danger-800, #991b1b);
    border-radius: 999px;
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.03em;
}

.placeholder-achievements[b-g6n785sq7p] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem 1rem;
    text-align: center;
    color: var(--color-neutral-400, #9ca3af);
}

.placeholder-achievements i[b-g6n785sq7p] {
    font-size: 3rem;
    margin-bottom: 1rem;
    color: var(--color-accentA-300, #fcd34d);
}

.placeholder-achievements p[b-g6n785sq7p] {
    margin: 0.25rem 0;
    font-size: 1rem;
}

.placeholder-achievements .text-small[b-g6n785sq7p] {
    font-size: 0.8rem;
    color: var(--color-neutral-400, #9ca3af);
}
/* /Pages/Principal/Students/Edit.razor.rz.scp.css */
/* ════════════════════════════════════════════════════════
   Principal Students Edit — Scoped styles
   Mobile-first responsive form, design-token compliant
   ════════════════════════════════════════════════════════ */

.edit-page[b-6kouc8u4g2] {
    padding: var(--spacing-5) var(--spacing-4) var(--spacing-8);
    max-width: 960px;
    margin: 0 auto;
}

/* ── Header ── */
.edit-header[b-6kouc8u4g2] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-4);
    margin-bottom: var(--spacing-6);
    flex-wrap: wrap;
}

.back-btn[b-6kouc8u4g2] {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-2);
    padding: var(--spacing-2) var(--spacing-4);
    background: transparent;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    font-size: var(--font-size-sm);
    font-weight: 500;
    color: var(--color-text-secondary);
    cursor: pointer;
    transition: all 0.15s ease;
    text-decoration: none;
}

.back-btn:hover[b-6kouc8u4g2] {
    background: var(--color-surface-secondary);
    border-color: var(--color-border-dark);
    color: var(--color-text-primary);
}

.header-actions[b-6kouc8u4g2] {
    display: flex;
    gap: var(--spacing-3);
}

/* ── Buttons ── */
.btn-primary[b-6kouc8u4g2] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-2);
    padding: var(--spacing-2) var(--spacing-5);
    background: var(--color-primary-600);
    color: var(--color-text-white);
    border: none;
    border-radius: var(--radius-md);
    font-size: var(--font-size-sm);
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
    min-height: 44px;
    white-space: nowrap;
}

.btn-primary:hover:not(:disabled)[b-6kouc8u4g2] {
    background: var(--color-primary-700);
    box-shadow: var(--shadow-sm);
}

.btn-primary:disabled[b-6kouc8u4g2] {
    opacity: 0.5;
    cursor: not-allowed;
}

.btn-secondary[b-6kouc8u4g2] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-2);
    padding: var(--spacing-2) var(--spacing-5);
    background: var(--color-bg-white);
    color: var(--color-text-secondary);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    font-size: var(--font-size-sm);
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
    min-height: 44px;
    white-space: nowrap;
}

.btn-secondary:hover:not(:disabled)[b-6kouc8u4g2] {
    background: var(--color-surface-secondary);
    border-color: var(--color-border-dark);
    color: var(--color-text-primary);
}

.btn-secondary:disabled[b-6kouc8u4g2] {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ── Alert ── */
.alert-error[b-6kouc8u4g2] {
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
    padding: var(--spacing-4) var(--spacing-5);
    background: var(--color-danger-50);
    border: 1px solid #FECACA;
    border-radius: var(--radius-md);
    color: var(--color-danger-700);
    font-size: var(--font-size-sm);
    margin-bottom: var(--spacing-5);
}

.alert-error i[b-6kouc8u4g2] {
    font-size: var(--font-size-lg);
    flex-shrink: 0;
}

/* ── Loading ── */
.loading-state[b-6kouc8u4g2] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-12) 0;
    gap: var(--spacing-4);
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
}

/* ── Error ── */
.error-state[b-6kouc8u4g2] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-12) 0;
    gap: var(--spacing-4);
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
}

.error-state .btn-secondary[b-6kouc8u4g2] {
    margin-top: var(--spacing-3);
}

/* ── Form sections ── */
.form-section[b-6kouc8u4g2] {
    background: var(--color-bg-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--spacing-6);
    margin-bottom: var(--spacing-6);
    box-shadow: var(--shadow-sm);
}

.section-title[b-6kouc8u4g2] {
    font-size: var(--font-size-base);
    font-weight: 700;
    color: var(--color-text-primary);
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
    margin-bottom: var(--spacing-5);
    padding-bottom: var(--spacing-3);
    border-bottom: 1px solid var(--color-border-light);
}

.section-title i[b-6kouc8u4g2] {
    color: var(--color-primary-600);
    font-size: var(--font-size-base);
}

/* ── Form grid ── */
.form-grid[b-6kouc8u4g2] {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--spacing-4);
}

@media (min-width: 768px) {
    .form-grid[b-6kouc8u4g2] {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1280px) {
    .form-grid[b-6kouc8u4g2] {
        gap: var(--spacing-5);
    }
}

/* ── Form fields ── */
.form-group[b-6kouc8u4g2] {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-2);
}

.form-group.full-width[b-6kouc8u4g2] {
    grid-column: 1 / -1;
}

.form-label[b-6kouc8u4g2] {
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--color-text-secondary);
    line-height: 1.4;
}

.form-label .required[b-6kouc8u4g2] {
    color: var(--color-danger-500);
    font-weight: 700;
}

.form-input[b-6kouc8u4g2],
.form-select[b-6kouc8u4g2],
.form-textarea[b-6kouc8u4g2] {
    width: 100%;
    padding: var(--spacing-2) var(--spacing-3);
    background: var(--color-bg-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    font-size: var(--font-size-sm);
    color: var(--color-text-primary);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    min-height: 44px;
    font-family: var(--font-primary);
}

.form-input:focus[b-6kouc8u4g2],
.form-select:focus[b-6kouc8u4g2],
.form-textarea:focus[b-6kouc8u4g2] {
    outline: none;
    border-color: var(--color-primary-500);
    box-shadow: 0 0 0 3px rgba(74, 155, 142, 0.12);
}

.form-input-error[b-6kouc8u4g2],
.form-input-error:focus[b-6kouc8u4g2] {
    border-color: var(--color-danger-500);
}

.form-input[b-6kouc8u4g2]::placeholder,
.form-textarea[b-6kouc8u4g2]::placeholder {
    color: var(--color-text-muted);
}

.form-input[readonly][b-6kouc8u4g2] {
    background: var(--color-neutral-50);
    color: var(--color-text-secondary);
    cursor: default;
}

.form-textarea[b-6kouc8u4g2] {
    resize: vertical;
    min-height: 80px;
}

.form-select[b-6kouc8u4g2] {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%236B7280' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 36px;
}

.form-error[b-6kouc8u4g2] {
    display: flex;
    align-items: center;
    gap: var(--spacing-1);
    font-size: var(--font-size-xs);
    color: var(--color-danger-600);
    font-weight: 500;
}

.form-error[b-6kouc8u4g2]::before {
    content: "•";
    font-weight: 700;
}

.form-hint[b-6kouc8u4g2] {
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
}

.form-warning[b-6kouc8u4g2] {
    display: flex;
    align-items: center;
    gap: var(--spacing-1);
    font-size: var(--font-size-xs);
    color: var(--color-warning-700, #b45309);
    font-weight: 500;
}

.form-warning i[b-6kouc8u4g2] {
    font-size: var(--font-size-xs);
}

/* ── Form actions ── */
.form-actions[b-6kouc8u4g2] {
    display: flex;
    justify-content: flex-end;
    gap: var(--spacing-3);
    padding-top: var(--spacing-4);
    border-top: 1px solid var(--color-border-light);
    margin-top: var(--spacing-2);
}

@media (max-width: 767px) {
    .form-actions[b-6kouc8u4g2] {
        flex-direction: column-reverse;
    }

    .form-actions .btn-primary[b-6kouc8u4g2],
    .form-actions .btn-secondary[b-6kouc8u4g2] {
        width: 100%;
    }
}

@media (max-width: 639px) {
    .edit-page[b-6kouc8u4g2] {
        padding: var(--spacing-4) var(--spacing-3) var(--spacing-6);
    }

    .edit-header[b-6kouc8u4g2] {
        flex-direction: column;
        align-items: flex-start;
    }

    .header-actions[b-6kouc8u4g2] {
        width: 100%;
    }

    .header-actions .btn-secondary[b-6kouc8u4g2],
    .header-actions .btn-primary[b-6kouc8u4g2] {
        flex: 1;
    }

    .form-section[b-6kouc8u4g2] {
        padding: var(--spacing-4);
        border-radius: var(--radius-md);
    }

    .section-title[b-6kouc8u4g2] {
        font-size: var(--font-size-sm);
    }
}
/* /Pages/Principal/Students/Enrollment.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════════
   Student Enrollment Management — enterprise redesign
   ═══════════════════════════════════════════════════════════════ */

/* ── Page shell ──────────────────────────────────────────── */
.enrl-page[b-z3wx2y3xxm] {
    max-width: 1600px;
    margin: 0 auto;
    padding: 24px 32px 100px 32px; /* bottom pad for sticky footer */
    background: #F8FAFC;
    min-height: 100vh;
}

@media (max-width: 767px) {
    .enrl-page[b-z3wx2y3xxm] { width: 100%; max-width: 100vw; overflow-x: hidden; padding-left: 16px; padding-right: 16px; }

    .enrl-header[b-z3wx2y3xxm],
    .enrl-filter-grid[b-z3wx2y3xxm],
    .enrl-kpi-grid[b-z3wx2y3xxm],
    .enrl-progress-bar-wrap[b-z3wx2y3xxm] { min-width: 0; max-width: 100%; }

    .enrl-header[b-z3wx2y3xxm] {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }

    .enrl-header-title[b-z3wx2y3xxm],
    .enrl-select[b-z3wx2y3xxm],
    .enrl-search[b-z3wx2y3xxm] { width: 100%; min-width: 0; max-width: 100%; }

    .enrl-header-action[b-z3wx2y3xxm] { width: 100%; justify-content: center; white-space: normal; }

    .enrl-filter-grid[b-z3wx2y3xxm] { grid-template-columns: 1fr; }
    .enrl-kpi-grid[b-z3wx2y3xxm] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .enrl-workspace[b-z3wx2y3xxm] { grid-template-columns: 1fr; }
}

/* ── Page header ─────────────────────────────────────────── */
.enrl-header[b-z3wx2y3xxm] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 24px;
}
.enrl-header-title[b-z3wx2y3xxm] {
    font-size: 1.6rem;
    font-weight: 800;
    color: #0F172A;
    margin: 0 0 4px 0;
    display: flex;
    align-items: center;
    gap: 10px;
}
.enrl-header-title i[b-z3wx2y3xxm] { color: var(--color-teal-700); font-size: 1.4rem; }
.enrl-header-sub[b-z3wx2y3xxm] { font-size: 0.875rem; color: #64748B; margin: 0; }
.enrl-header-action[b-z3wx2y3xxm] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    background: linear-gradient(135deg, #7C3AED, #6D28D9);
    color: #fff;
    font-size: 0.875rem;
    font-weight: 600;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    white-space: nowrap;
    box-shadow: 0 4px 12px rgba(124,58,237,0.3);
    transition: transform 0.15s, box-shadow 0.15s;
}
.enrl-header-action:hover[b-z3wx2y3xxm] { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(124,58,237,0.4); }

/* ── Filter bar ──────────────────────────────────────────── */
.enrl-filters[b-z3wx2y3xxm] {
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    padding: 20px 24px;
    margin-bottom: 20px;
}
.enrl-filter-grid[b-z3wx2y3xxm] {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 16px;
    margin-bottom: 14px;
}
.enrl-filter-label[b-z3wx2y3xxm] {
    display: block;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #64748B;
    margin-bottom: 6px;
}
.enrl-filter-label span[b-z3wx2y3xxm] { color: #EF4444; }
.enrl-select[b-z3wx2y3xxm] {
    width: 100%;
    height: 44px;
    padding: 0 12px;
    border: 1.5px solid #E2E8F0;
    border-radius: 8px;
    font-size: 0.875rem;
    color: #1E293B;
    background: #fff;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%2364748B' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.enrl-select:focus[b-z3wx2y3xxm] { outline: none; border-color: var(--color-teal-700); box-shadow: 0 0 0 3px rgba(15,118,110,0.1); }
.enrl-search-wrap[b-z3wx2y3xxm] { position: relative; }
.enrl-search-wrap i[b-z3wx2y3xxm] { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: #94A3B8; font-size: 0.85rem; }
.enrl-search[b-z3wx2y3xxm] {
    width: 100%;
    height: 44px;
    padding: 0 44px 0 40px;
    border: 1.5px solid #E2E8F0;
    border-radius: 8px;
    font-size: 0.875rem;
    color: #1E293B;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.enrl-search:focus[b-z3wx2y3xxm] { outline: none; border-color: var(--color-teal-700); box-shadow: 0 0 0 3px rgba(15,118,110,0.1); }
.enrl-search-clear[b-z3wx2y3xxm] { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); background: none; border: none; color: #94A3B8; cursor: pointer; padding: 0; font-size: 0.9rem; }
.enrl-search-clear:hover[b-z3wx2y3xxm] { color: #475569; }

/* ── KPI cards ───────────────────────────────────────────── */
.enrl-kpi-grid[b-z3wx2y3xxm] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 20px;
}
.enrl-kpi[b-z3wx2y3xxm] {
    background: #fff;
    border-radius: 14px;
    padding: 20px 24px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    display: flex;
    align-items: flex-start;
    gap: 14px;
}
.enrl-kpi-icon[b-z3wx2y3xxm] {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 1.25rem;
}
.enrl-kpi-icon.blue[b-z3wx2y3xxm] { background: #EFF6FF; color: #3B82F6; }
.enrl-kpi-icon.green[b-z3wx2y3xxm] { background: #F0FDF4; color: #16A34A; }
.enrl-kpi-icon.amber[b-z3wx2y3xxm] { background: #FFFBEB; color: #D97706; }
.enrl-kpi-icon.purple[b-z3wx2y3xxm] { background: #FAF5FF; color: #7C3AED; }
.enrl-kpi-value[b-z3wx2y3xxm] {
    font-size: 1.9rem;
    font-weight: 800;
    color: #0F172A;
    line-height: 1;
    margin-bottom: 2px;
}
.enrl-kpi-title[b-z3wx2y3xxm] { font-size: 0.8rem; font-weight: 700; color: #374151; margin-bottom: 2px; }
.enrl-kpi-sub[b-z3wx2y3xxm] { font-size: 0.72rem; color: #94A3B8; }

/* ── Progress bar ────────────────────────────────────────── */
.enrl-progress-bar-wrap[b-z3wx2y3xxm] {
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    padding: 14px 24px;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 16px;
}
.enrl-progress-label[b-z3wx2y3xxm] { font-size: 0.8rem; font-weight: 700; color: #374151; white-space: nowrap; }
.enrl-progress-track[b-z3wx2y3xxm] {
    flex: 1;
    height: 10px;
    background: #E2E8F0;
    border-radius: 999px;
    overflow: hidden;
}
.enrl-progress-fill[b-z3wx2y3xxm] {
    height: 100%;
    background: linear-gradient(90deg, var(--color-teal-700), var(--color-teal-600));
    border-radius: 999px;
    transition: width 0.4s ease;
}
.enrl-progress-pct[b-z3wx2y3xxm] { font-size: 0.85rem; font-weight: 700; color: var(--color-teal-700); white-space: nowrap; }
.enrl-progress-detail[b-z3wx2y3xxm] { font-size: 0.75rem; color: #64748B; white-space: nowrap; }

/* ── Two-panel workspace ─────────────────────────────────── */
.enrl-workspace[b-z3wx2y3xxm] {
    display: grid;
    grid-template-columns: 1fr 420px;
    gap: 20px;
    margin-bottom: 20px;
    align-items: start;
}

/* ── Panel shared ────────────────────────────────────────── */
.enrl-panel[b-z3wx2y3xxm] {
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.06);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    max-height: 680px;
}
.enrl-panel-head[b-z3wx2y3xxm] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid #F1F5F9;
    background: #FAFAFA;
    flex-shrink: 0;
}
.enrl-panel-title[b-z3wx2y3xxm] {
    font-size: 0.95rem;
    font-weight: 700;
    color: #1E293B;
    display: flex;
    align-items: center;
    gap: 8px;
}
.enrl-panel-count[b-z3wx2y3xxm] {
    background: #F1F5F9;
    color: #475569;
    font-size: 0.72rem;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 999px;
}
.enrl-panel-count.active[b-z3wx2y3xxm] { background: #DCFCE7; color: #15803D; }

/* ── Bulk action toolbar ─────────────────────────────────── */
.enrl-toolbar[b-z3wx2y3xxm] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 20px;
    border-bottom: 1px solid #F1F5F9;
    background: #FAFAFA;
    flex-shrink: 0;
    flex-wrap: wrap;
}
.enrl-tool-btn[b-z3wx2y3xxm] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 12px;
    font-size: 0.78rem;
    font-weight: 600;
    border-radius: 7px;
    border: 1.5px solid #E2E8F0;
    background: #fff;
    color: #374151;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.enrl-tool-btn:hover:not(:disabled)[b-z3wx2y3xxm] { background: #F0FDF4; border-color: var(--color-teal-700); color: var(--color-teal-700); }
.enrl-tool-btn:disabled[b-z3wx2y3xxm] { opacity: 0.4; cursor: not-allowed; }
.enrl-tool-btn i[b-z3wx2y3xxm] { font-size: 0.72rem; }
.enrl-sort-select[b-z3wx2y3xxm] {
    height: 34px;
    padding: 0 28px 0 10px;
    border: 1.5px solid #E2E8F0;
    border-radius: 7px;
    font-size: 0.78rem;
    color: #374151;
    background: #fff;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 12 12'%3E%3Cpath fill='%2364748B' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 8px center;
    margin-left: auto;
}

/* ── Student list scroll area ────────────────────────────── */
.enrl-student-list[b-z3wx2y3xxm] { flex: 1; overflow-y: auto; }

/* ── Student row ─────────────────────────────────────────── */
.enrl-student-row[b-z3wx2y3xxm] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 20px;
    min-height: 72px;
    border-bottom: 1px solid #F8FAFC;
    cursor: pointer;
    transition: background 0.12s;
}
.enrl-student-row:hover[b-z3wx2y3xxm] { background: #F0FDF9; }
.enrl-student-row.selected[b-z3wx2y3xxm] { background: #ECFDF5; }
.enrl-student-row input[type=checkbox][b-z3wx2y3xxm] { width: 18px; height: 18px; flex-shrink: 0; cursor: pointer; accent-color: var(--color-teal-700); }
.enrl-avatar[b-z3wx2y3xxm] {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.875rem;
    font-weight: 700;
    color: #fff;
}
.enrl-student-info[b-z3wx2y3xxm] { flex: 1; min-width: 0; }
.enrl-student-name[b-z3wx2y3xxm] { font-size: 0.9rem; font-weight: 600; color: #1E293B; margin-bottom: 2px; }
.enrl-student-meta[b-z3wx2y3xxm] { font-size: 0.75rem; color: #94A3B8; }

/* ── Status badges ───────────────────────────────────────── */
.enrl-badge[b-z3wx2y3xxm] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 5px 10px;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 700;
    white-space: nowrap;
    flex-shrink: 0;
}
.enrl-badge.enrolled[b-z3wx2y3xxm]   { background: #DCFCE7; color: #15803D; }
.enrl-badge.not-enrolled[b-z3wx2y3xxm] { background: #F1F5F9; color: #64748B; }
.enrl-badge.pending[b-z3wx2y3xxm]    { background: #FEF3C7; color: #B45309; }

/* ── Empty state ─────────────────────────────────────────── */
.enrl-empty[b-z3wx2y3xxm] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 48px 24px;
    color: #94A3B8;
    text-align: center;
}
.enrl-empty i[b-z3wx2y3xxm] { font-size: 2.5rem; margin-bottom: 12px; }
.enrl-empty h4[b-z3wx2y3xxm] { font-size: 1rem; font-weight: 600; color: #475569; margin: 0 0 6px 0; }
.enrl-empty p[b-z3wx2y3xxm] { font-size: 0.82rem; margin: 0; }

/* ── Section pill tabs ───────────────────────────────────── */
.enrl-section-tabs[b-z3wx2y3xxm] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 12px 20px;
    border-bottom: 1px solid #F1F5F9;
    flex-wrap: wrap;
    flex-shrink: 0;
}
.enrl-section-tab[b-z3wx2y3xxm] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 600;
    border: 1.5px solid #E2E8F0;
    background: #F8FAFC;
    color: #475569;
    cursor: pointer;
    transition: all 0.12s;
}
.enrl-section-tab:hover:not(.active)[b-z3wx2y3xxm] { background: #F0FDF4; border-color: var(--color-teal-700); color: var(--color-teal-700); }
.enrl-section-tab.active[b-z3wx2y3xxm] { background: var(--color-teal-700); border-color: var(--color-teal-700); color: #fff; }
.enrl-section-tab .tab-count[b-z3wx2y3xxm] {
    background: rgba(255,255,255,0.25);
    border-radius: 999px;
    padding: 1px 6px;
    font-size: 0.68rem;
}
.enrl-section-tab:not(.active) .tab-count[b-z3wx2y3xxm] { background: #E2E8F0; color: #64748B; }
.enrl-add-section-btn[b-z3wx2y3xxm] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 12px;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 600;
    border: 1.5px dashed #CBD5E1;
    background: transparent;
    color: var(--color-teal-700);
    cursor: pointer;
    transition: all 0.12s;
}
.enrl-add-section-btn:hover[b-z3wx2y3xxm] { background: #F0FDF4; border-color: var(--color-teal-700); }

/* ── Roll number config cards ────────────────────────────── */
.enrl-roll-config[b-z3wx2y3xxm] {
    padding: 16px 20px;
    border-bottom: 1px solid #F1F5F9;
    flex-shrink: 0;
}
.enrl-roll-config-title[b-z3wx2y3xxm] {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #94A3B8;
    margin-bottom: 10px;
}
.enrl-roll-options[b-z3wx2y3xxm] { display: flex; flex-direction: column; gap: 8px; }
.enrl-roll-option[b-z3wx2y3xxm] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    border-radius: 10px;
    border: 1.5px solid #E2E8F0;
    background: #FAFAFA;
    cursor: pointer;
    transition: all 0.12s;
}
.enrl-roll-option:hover[b-z3wx2y3xxm] { border-color: var(--color-teal-600); background: #F0FDF9; }
.enrl-roll-option.selected[b-z3wx2y3xxm] { border-color: var(--color-teal-700); background: #F0FDF4; }
.enrl-roll-option input[type=radio][b-z3wx2y3xxm] { width: 16px; height: 16px; flex-shrink: 0; accent-color: var(--color-teal-700); }
.enrl-roll-option-body[b-z3wx2y3xxm] { flex: 1; }
.enrl-roll-option-label[b-z3wx2y3xxm] { font-size: 0.85rem; font-weight: 600; color: #1E293B; }
.enrl-roll-option-desc[b-z3wx2y3xxm] { font-size: 0.72rem; color: #64748B; margin-top: 1px; }
.enrl-roll-start[b-z3wx2y3xxm] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 10px;
    padding: 0 14px;
}
.enrl-roll-start label[b-z3wx2y3xxm] { font-size: 0.78rem; color: #475569; font-weight: 500; }
.enrl-roll-stepper[b-z3wx2y3xxm] {
    display: flex;
    align-items: center;
    border: 1.5px solid #E2E8F0;
    border-radius: 8px;
    overflow: hidden;
}
.enrl-roll-stepper button[b-z3wx2y3xxm] {
    width: 32px;
    height: 34px;
    background: #F8FAFC;
    border: none;
    cursor: pointer;
    font-size: 0.8rem;
    color: #64748B;
    transition: background 0.12s;
}
.enrl-roll-stepper button:hover[b-z3wx2y3xxm] { background: #E2E8F0; }
.enrl-roll-stepper input[b-z3wx2y3xxm] {
    width: 52px;
    height: 34px;
    border: none;
    border-left: 1.5px solid #E2E8F0;
    border-right: 1.5px solid #E2E8F0;
    text-align: center;
    font-size: 0.875rem;
    font-weight: 600;
    color: #1E293B;
}
.enrl-roll-stepper input:focus[b-z3wx2y3xxm] { outline: none; }

/* ── AY info banner ──────────────────────────────────────── */
.enrl-ay-banner[b-z3wx2y3xxm] {
    margin: 8px 20px 0 20px;
    padding: 10px 14px;
    background: #EFF6FF;
    border: 1px solid #BFDBFE;
    border-radius: 8px;
    font-size: 0.78rem;
    color: #1E40AF;
    display: flex;
    align-items: flex-start;
    gap: 8px;
    flex-shrink: 0;
}
.enrl-ay-banner i[b-z3wx2y3xxm] { color: #3B82F6; font-size: 0.85rem; margin-top: 1px; flex-shrink: 0; }

/* ── Enrolled students list ──────────────────────────────── */
.enrl-enrolled-list[b-z3wx2y3xxm] { flex: 1; overflow-y: auto; padding: 12px 20px; }
.enrl-enrolled-row[b-z3wx2y3xxm] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    border-radius: 8px;
    background: #F8FAFC;
    border: 1px solid #F1F5F9;
    margin-bottom: 6px;
}
.enrl-enrolled-row-left[b-z3wx2y3xxm] { display: flex; align-items: center; gap: 10px; }
.enrl-enrolled-name[b-z3wx2y3xxm] { font-size: 0.85rem; font-weight: 600; color: #1E293B; }
.enrl-enrolled-adm[b-z3wx2y3xxm] { font-size: 0.72rem; color: #94A3B8; }
.enrl-roll-input[b-z3wx2y3xxm] {
    width: 64px;
    height: 28px;
    padding: 0 6px;
    border: 1.5px solid #E2E8F0;
    border-radius: 6px;
    font-size: 0.78rem;
    text-align: center;
    font-weight: 600;
    color: var(--color-teal-700);
}
.enrl-roll-input:focus[b-z3wx2y3xxm] { outline: none; border-color: var(--color-teal-700); }
.enrl-remove-btn[b-z3wx2y3xxm] {
    width: 26px;
    height: 26px;
    border: none;
    background: none;
    color: #CBD5E1;
    cursor: pointer;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    transition: background 0.12s, color 0.12s;
}
.enrl-remove-btn:hover[b-z3wx2y3xxm] { background: #FEE2E2; color: #DC2626; }

/* ── Validation warnings ─────────────────────────────────── */
.enrl-warnings[b-z3wx2y3xxm] {
    background: #FFFBEB;
    border: 1px solid #FDE68A;
    border-radius: 12px;
    padding: 16px 20px;
    margin-bottom: 20px;
    display: flex;
    gap: 12px;
}
.enrl-warnings i[b-z3wx2y3xxm] { color: #D97706; font-size: 1.1rem; margin-top: 1px; flex-shrink: 0; }
.enrl-warnings-title[b-z3wx2y3xxm] { font-size: 0.875rem; font-weight: 700; color: #92400E; margin-bottom: 6px; }
.enrl-warnings ul[b-z3wx2y3xxm] { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 4px; }
.enrl-warnings li[b-z3wx2y3xxm] { font-size: 0.8rem; color: #B45309; display: flex; align-items: center; justify-content: space-between; }
.enrl-warn-fix[b-z3wx2y3xxm] { font-size: 0.75rem; font-weight: 600; color: #D97706; background: none; border: none; cursor: pointer; }

/* ── Sticky footer ───────────────────────────────────────── */
.enrl-footer[b-z3wx2y3xxm] {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 50;
    background: #fff;
    border-top: 1px solid #E2E8F0;
    padding: 14px 32px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-shadow: 0 -4px 16px rgba(0,0,0,0.06);
}
.enrl-footer-context[b-z3wx2y3xxm] {
    display: flex;
    align-items: center;
    gap: 20px;
}
.enrl-footer-stat[b-z3wx2y3xxm] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.82rem;
    color: #475569;
}
.enrl-footer-stat strong[b-z3wx2y3xxm] { color: #0F172A; font-weight: 700; }
.enrl-footer-actions[b-z3wx2y3xxm] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

@media (max-width: 640px) {
    .enrl-footer-actions[b-z3wx2y3xxm] { width: 100%; flex-direction: column; align-items: stretch; }
    .enrl-footer-actions > *[b-z3wx2y3xxm] { width: 100%; min-width: 0; white-space: nowrap; justify-content: center; }
}

.enrl-btn-ghost[b-z3wx2y3xxm] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 16px;
    font-size: 0.82rem;
    font-weight: 600;
    border: 1.5px solid #E2E8F0;
    border-radius: 8px;
    background: #fff;
    color: #475569;
    cursor: pointer;
    transition: background 0.12s, border-color 0.12s;
}
.enrl-btn-ghost:hover[b-z3wx2y3xxm] { background: #F8FAFC; border-color: #CBD5E1; }
.enrl-btn-preview[b-z3wx2y3xxm] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 16px;
    font-size: 0.82rem;
    font-weight: 600;
    border: 1.5px solid var(--color-teal-700);
    border-radius: 8px;
    background: #fff;
    color: var(--color-teal-700);
    cursor: pointer;
    transition: background 0.12s;
}
.enrl-btn-preview:hover[b-z3wx2y3xxm] { background: #F0FDF4; }
.enrl-btn-enroll[b-z3wx2y3xxm] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 20px;
    font-size: 0.875rem;
    font-weight: 700;
    border: none;
    border-radius: 8px;
    background: linear-gradient(135deg, var(--color-teal-700), var(--color-teal-600));
    color: #fff;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(15,118,110,0.3);
    transition: transform 0.12s, box-shadow 0.12s;
}
.enrl-btn-enroll:hover:not(:disabled)[b-z3wx2y3xxm] { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(15,118,110,0.4); }
.enrl-btn-enroll:disabled[b-z3wx2y3xxm] { opacity: 0.5; cursor: not-allowed; transform: none; box-shadow: none; }

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 1200px) {
    .enrl-workspace[b-z3wx2y3xxm] { grid-template-columns: 1fr 360px; }
    .enrl-kpi-grid[b-z3wx2y3xxm] { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
    .enrl-workspace[b-z3wx2y3xxm] { grid-template-columns: 1fr; }
    .enrl-page[b-z3wx2y3xxm] { padding: 16px 16px 100px 16px; }
    .enrl-filter-grid[b-z3wx2y3xxm] { grid-template-columns: 1fr; }
    .enrl-kpi-grid[b-z3wx2y3xxm] { grid-template-columns: repeat(2, 1fr); }
    .enrl-panel[b-z3wx2y3xxm] { max-height: none; }
}

/* ── Preview Enrollment Modal ── */
.enrl-modal-overlay[b-z3wx2y3xxm] {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.55);
    backdrop-filter: blur(2px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 80;
    padding: 16px;
    animation: enrl-fadeIn-b-z3wx2y3xxm 0.15s ease;
}

.enrl-modal[b-z3wx2y3xxm] {
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
    width: 100%;
    max-width: 720px;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    animation: enrl-slideUp-b-z3wx2y3xxm 0.2s ease;
}

.enrl-modal-head[b-z3wx2y3xxm] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid #E2E8F0;
}

.enrl-modal-head h2[b-z3wx2y3xxm] {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 700;
    color: #0F172A;
    display: flex;
    align-items: center;
    gap: 8px;
}

.enrl-modal-head h2 i[b-z3wx2y3xxm] { color: var(--color-teal-700); }

.enrl-modal-close[b-z3wx2y3xxm] {
    background: none;
    border: none;
    color: #64748B;
    font-size: 1.1rem;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 6px;
    transition: all 0.12s;
}

.enrl-modal-close:hover[b-z3wx2y3xxm] { background: #F1F5F9; color: #0F172A; }

.enrl-modal-body[b-z3wx2y3xxm] {
    padding: 20px;
    overflow-y: auto;
    flex: 1;
}

.enrl-modal-foot[b-z3wx2y3xxm] {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 12px 20px;
    border-top: 1px solid #E2E8F0;
    background: #F8FAFC;
    border-radius: 0 0 14px 14px;
}

.enrl-preview-summary[b-z3wx2y3xxm] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 20px;
}

.enrl-preview-stat[b-z3wx2y3xxm] {
    background: #F8FAFC;
    border: 1px solid #E2E8F0;
    border-radius: 10px;
    padding: 14px 12px;
    text-align: center;
}

.enrl-preview-stat-value[b-z3wx2y3xxm] {
    font-size: 1.1rem;
    font-weight: 800;
    color: #0F172A;
    margin-bottom: 4px;
}

.enrl-preview-stat-label[b-z3wx2y3xxm] {
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #64748B;
}

.enrl-preview-table-wrap[b-z3wx2y3xxm] {
    border: 1px solid #E2E8F0;
    border-radius: 10px;
    overflow: hidden;
}

.enrl-preview-table[b-z3wx2y3xxm] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
}

.enrl-preview-table th[b-z3wx2y3xxm] {
    background: #F1F5F9;
    padding: 10px 12px;
    text-align: left;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #64748B;
    border-bottom: 1px solid #E2E8F0;
}

.enrl-preview-table td[b-z3wx2y3xxm] {
    padding: 10px 12px;
    border-bottom: 1px solid #F1F5F9;
    color: #334155;
}

.enrl-preview-table tbody tr:last-child td[b-z3wx2y3xxm] { border-bottom: none; }

.enrl-preview-table tbody tr:nth-child(even)[b-z3wx2y3xxm] { background: #F8FAFC; }

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

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

@media (max-width: 767px) {
    .enrl-preview-summary[b-z3wx2y3xxm] { grid-template-columns: repeat(2, 1fr); }
    .enrl-modal[b-z3wx2y3xxm] { max-height: 90vh; }
    .enrl-modal-foot[b-z3wx2y3xxm] { flex-direction: column; }
    .enrl-modal-foot button[b-z3wx2y3xxm] { width: 100%; }
}
/* /Pages/Principal/Students/Index.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════════════
   Principal Students Page — Scoped CSS
   Uses design-tokens.css values (var(--color-*), var(--radius-*), etc.)
   ═══════════════════════════════════════════════════════════════════ */

/* ── Add Student button ─────────────────────────────────────────────── */
.btn-add-student[b-9xvot2gb9d] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 1rem;
    background: var(--color-primary);
    color: var(--color-text-white);
    font-size: var(--font-size-sm);
    font-weight: 600;
    border-radius: var(--radius-sm);
    border: none;
    cursor: pointer;
    transition: background 0.15s, box-shadow 0.15s;
    box-shadow: var(--shadow-sm);
}

.btn-add-student:hover[b-9xvot2gb9d] {
    background: var(--color-primary-dark);
    box-shadow: var(--shadow-md);
}

/* ── Bulk Add button ────────────────────────────────────────────────── */
.btn-bulk-student[b-9xvot2gb9d] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 1rem;
    background: var(--color-bg-white);
    color: var(--color-primary);
    font-size: var(--font-size-sm);
    font-weight: 600;
    border-radius: var(--radius-sm);
    border: 1.5px solid var(--color-primary);
    cursor: pointer;
    transition: background 0.15s, color 0.15s, box-shadow 0.15s;
    box-shadow: var(--shadow-sm);
}

.btn-bulk-student:hover[b-9xvot2gb9d] {
    background: var(--color-primary-light);
    box-shadow: var(--shadow-md);
}

/* ── Modal overlay ──────────────────────────────────────────────────── */
.modal-overlay[b-9xvot2gb9d] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.35);
    z-index: 1100;  /* Bug 31: above header z-index 999 */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    overflow-y: auto;
}

/* ── Modal sheet ────────────────────────────────────────────────────── */
@media (max-width: 767px) {
    [b-9xvot2gb9d] select,
    [b-9xvot2gb9d] input,
    [b-9xvot2gb9d] h1,
    [b-9xvot2gb9d] p { min-width: 0; max-width: 100%; }

    [b-9xvot2gb9d] .students-header-actions { flex-wrap: wrap; gap: 8px; }
    [b-9xvot2gb9d] .students-mobile-cards > a { width: 100%; text-decoration: none; }
}

.modal-sheet[b-9xvot2gb9d] {
    background: var(--color-bg-white);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xl);
    width: 100%;
    max-width: 700px;
    max-height: 90vh;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    animation: modal-in-b-9xvot2gb9d 0.18s ease-out;
}

@keyframes modal-in-b-9xvot2gb9d {
    from { opacity: 0; transform: translateY(12px) scale(0.98); }
    to   { opacity: 1; transform: translateY(0)   scale(1); }
}

/* ── Modal header ───────────────────────────────────────────────────── */
.modal-header[b-9xvot2gb9d] {
    display: flex;
    align-items: flex-start;
    gap: 0.875rem;
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid var(--color-border-light);
    position: sticky;
    top: 0;
    background: var(--color-bg-white);
    z-index: 1;
}

.modal-header-icon[b-9xvot2gb9d] {
    flex-shrink: 0;
    width: 2.25rem;
    height: 2.25rem;
    background: var(--color-primary-light);
    color: var(--color-primary-dark);
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.95rem;
    margin-top: 2px;
}

.modal-title[b-9xvot2gb9d] {
    font-size: var(--font-size-lg);
    font-weight: 700;
    color: var(--color-text-primary);
    margin: 0 0 0.15rem;
    line-height: 1.2;
}

.modal-subtitle[b-9xvot2gb9d] {
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
    margin: 0;
    line-height: 1.4;
}

.modal-close[b-9xvot2gb9d] {
    margin-left: auto;
    flex-shrink: 0;
    width: 2rem;
    height: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    border-radius: var(--radius-xs);
    color: var(--color-text-muted);
    cursor: pointer;
    font-size: 0.9rem;
    transition: background 0.12s, color 0.12s;
}

.modal-close:hover[b-9xvot2gb9d] {
    background: var(--color-gray-100);
    color: var(--color-text-primary);
}

/* ── Banners ────────────────────────────────────────────────────────── */
.modal-error-banner[b-9xvot2gb9d] {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    margin: 1rem 1.5rem 0;
    padding: 0.75rem 1rem;
    background: var(--color-danger-50);
    border: 1px solid var(--color-danger-200);
    border-radius: var(--radius-sm);
    color: var(--color-danger-700);
    font-size: var(--font-size-sm);
}

.modal-success-banner[b-9xvot2gb9d] {
    display: flex;
    align-items: flex-start;
    gap: 0.875rem;
    margin: 1.25rem 1.5rem;
    padding: 1rem 1.125rem;
    background: var(--color-success-50);
    border: 1px solid var(--color-success-200);
    border-radius: var(--radius-md);
    color: var(--color-success-700);
    font-size: var(--font-size-sm);
}

.modal-success-banner i[b-9xvot2gb9d] {
    font-size: 1.25rem;
    flex-shrink: 0;
    margin-top: 1px;
}

.modal-success-title[b-9xvot2gb9d] {
    font-weight: 700;
    margin: 0 0 0.25rem;
    font-size: var(--font-size-sm);
    color: var(--color-success-800);
}

.modal-success-detail[b-9xvot2gb9d] {
    margin: 0;
    color: var(--color-success-700);
    line-height: 1.5;
}

/* ── Modal body ─────────────────────────────────────────────────────── */
.modal-body[b-9xvot2gb9d] {
    padding: 1.25rem 1.5rem;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

/* ── Form sections ──────────────────────────────────────────────────── */
.form-section[b-9xvot2gb9d] {
    display: flex;
    flex-direction: column;
    gap: 0.875rem;
}

.form-section-header[b-9xvot2gb9d] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--color-border-light);
}

.form-section-num[b-9xvot2gb9d] {
    flex-shrink: 0;
    width: 1.375rem;
    height: 1.375rem;
    background: var(--color-primary);
    color: var(--color-text-white);
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    font-weight: 700;
}

.form-section-title[b-9xvot2gb9d] {
    font-size: var(--font-size-sm);
    font-weight: 700;
    color: var(--color-text-primary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.form-section-badge[b-9xvot2gb9d] {
    margin-left: auto;
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
    background: var(--color-gray-100);
    padding: 0.15rem 0.5rem;
    border-radius: var(--radius-full);
}

/* ── Form grid & fields ─────────────────────────────────────────────── */
.form-grid-2[b-9xvot2gb9d] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.875rem;
    /* Top-align cells so a field that shows an error (and grows) does not
       stretch or misalign its row peer. */
    align-items: start;
}

@media (max-width: 560px) {
    .form-grid-2[b-9xvot2gb9d] {
        grid-template-columns: 1fr;
    }
}

.form-field[b-9xvot2gb9d] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

/* Match .vi-label (ValidatedInput) box metrics exactly so raw form-field
   cells and ValidatedInput cells in the same grid row line up. Spacing to
   the input is provided by the .form-field gap, not label margin/padding. */
.form-label[b-9xvot2gb9d] {
    display: block;
    padding: 0;
    margin: 0;
    font-size: var(--font-size-xs);
    font-weight: 600;
    color: var(--color-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.required[b-9xvot2gb9d] {
    color: var(--color-danger-500);
    margin-left: 1px;
}

.form-optional[b-9xvot2gb9d] {
    font-weight: 400;
    color: var(--color-text-muted);
    text-transform: none;
    font-size: var(--font-size-xs);
    letter-spacing: 0;
}

.form-input[b-9xvot2gb9d] {
    width: 100%;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xs);
    font-size: var(--font-size-sm);
    color: var(--color-text-primary);
    background: var(--color-bg-white);
    transition: border-color 0.15s, box-shadow 0.15s;
    outline: none;
    box-sizing: border-box;
}

.form-input:focus[b-9xvot2gb9d] {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(74, 155, 142, 0.15);
}

.form-input-error[b-9xvot2gb9d] {
    border-color: var(--color-danger-400);
}

.form-input-error:focus[b-9xvot2gb9d] {
    border-color: var(--color-danger-500);
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.12);
}

.form-hint[b-9xvot2gb9d] {
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
    line-height: 1.4;
}

/* Reserved slot for the error/hint line on raw form-field cells (selects).
   Matches .vi-slot on ValidatedInput so every cell in form-grid-2 has the
   same height whether or not it is showing a message. */
.form-slot[b-9xvot2gb9d] {
    min-height: calc(var(--font-size-xs) * 1.4);
    font-size: var(--font-size-xs);
}

.form-error[b-9xvot2gb9d] {
    display: block;
    font-size: var(--font-size-xs);
    color: var(--color-danger-600);
    font-weight: 500;
}

/* ── Modal footer ───────────────────────────────────────────────────── */
.modal-footer[b-9xvot2gb9d] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.625rem;
    padding: 1rem 1.5rem;
    border-top: 1px solid var(--color-border-light);
    background: var(--color-surface-secondary);
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
    position: sticky;
    bottom: 0;
}

.btn-modal-secondary[b-9xvot2gb9d] {
    padding: 0.5rem 1.125rem;
    background: var(--color-bg-white);
    border: 1px solid var(--color-border);
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
    font-weight: 600;
    border-radius: var(--radius-xs);
    cursor: pointer;
    transition: background 0.12s, border-color 0.12s;
}

.btn-modal-secondary:hover:not(:disabled)[b-9xvot2gb9d] {
    background: var(--color-gray-50);
    border-color: var(--color-border-dark);
}

.btn-modal-secondary:disabled[b-9xvot2gb9d] {
    opacity: 0.5;
    cursor: not-allowed;
}

.btn-modal-primary[b-9xvot2gb9d] {
    display: inline-flex;
    align-items: center;
    padding: 0.5rem 1.25rem;
    background: var(--color-primary);
    color: var(--color-text-white);
    font-size: var(--font-size-sm);
    font-weight: 600;
    border: none;
    border-radius: var(--radius-xs);
    cursor: pointer;
    transition: background 0.15s, box-shadow 0.15s;
    box-shadow: var(--shadow-sm);
}

.btn-modal-primary:hover:not(:disabled)[b-9xvot2gb9d] {
    background: var(--color-primary-dark);
}

.btn-modal-primary:disabled[b-9xvot2gb9d] {
    opacity: 0.6;
    cursor: not-allowed;
    background: var(--color-primary);
}

/* Bug 33: ensure enabled button doesn't look disabled (remove stale disabled look) */
.btn-modal-primary:not(:disabled)[b-9xvot2gb9d] {
    opacity: 1;
    background: var(--color-primary);
}

/* ═══════════════════════════════════════════════════════════════════════
   Bulk Add Students Modal
   ═══════════════════════════════════════════════════════════════════════ */

/* Wider sheet for the spreadsheet table */
.bulk-modal-sheet[b-9xvot2gb9d] {
    max-width: 960px;
}

/* ── Row controls bar ─────────────────────────────────────────────────── */
.bulk-row-controls[b-9xvot2gb9d] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.75rem;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.bulk-row-count[b-9xvot2gb9d] {
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
    font-weight: 500;
}

.bulk-row-btns[b-9xvot2gb9d] {
    display: flex;
    gap: 0.5rem;
}

.bulk-btn-sm[b-9xvot2gb9d] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.3rem 0.7rem;
    font-size: var(--font-size-xs);
    font-weight: 600;
    border-radius: var(--radius-xs);
    border: 1px solid var(--color-border);
    background: var(--color-bg-white);
    color: var(--color-text-primary);
    cursor: pointer;
    transition: background 0.12s;
}

.bulk-btn-sm:hover:not(:disabled)[b-9xvot2gb9d] {
    background: var(--color-gray-50);
}

.bulk-btn-sm:disabled[b-9xvot2gb9d] {
    opacity: 0.45;
    cursor: not-allowed;
}

.bulk-btn-danger[b-9xvot2gb9d] {
    color: var(--color-danger-600);
    border-color: var(--color-danger-200);
}

.bulk-btn-danger:hover:not(:disabled)[b-9xvot2gb9d] {
    background: var(--color-danger-50);
}

/* ── Spreadsheet table ────────────────────────────────────────────────── */
.bulk-table-wrap[b-9xvot2gb9d] {
    overflow-x: auto;
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-sm);
}

.bulk-table[b-9xvot2gb9d] {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--font-size-xs);
    min-width: 780px;
}

.bulk-table thead th[b-9xvot2gb9d] {
    background: var(--color-gray-50);
    padding: 0.45rem 0.5rem;
    text-align: left;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-text-muted);
    border-bottom: 1px solid var(--color-border-light);
    white-space: nowrap;
}

.bulk-table tbody tr[b-9xvot2gb9d] {
    border-bottom: 1px solid var(--color-border-light);
}

.bulk-table tbody tr:last-child[b-9xvot2gb9d] {
    border-bottom: none;
}

.bulk-table tbody tr:hover[b-9xvot2gb9d] {
    background: var(--color-gray-50);
}

.bulk-table td[b-9xvot2gb9d] {
    padding: 0.3rem 0.4rem;
    vertical-align: middle;
}

.bulk-col-num[b-9xvot2gb9d] {
    width: 32px;
    text-align: center;
    color: var(--color-text-muted);
    font-size: 0.7rem;
}

.bulk-input[b-9xvot2gb9d] {
    width: 100%;
    min-width: 110px;
    padding: 0.3rem 0.45rem;
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-xs);
    font-size: var(--font-size-xs);
    color: var(--color-text-primary);
    background: var(--color-bg-white);
    outline: none;
    box-sizing: border-box;
    transition: border-color 0.12s;
}

.bulk-input:focus[b-9xvot2gb9d] {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 2px var(--color-primary-light);
}

.bulk-input-err[b-9xvot2gb9d] {
    border-color: var(--color-danger-400) !important;
    background: var(--color-danger-50);
}

.bulk-select[b-9xvot2gb9d] {
    min-width: 80px;
    cursor: pointer;
}

.bulk-delete-btn[b-9xvot2gb9d] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: var(--radius-xs);
    border: none;
    background: transparent;
    color: var(--color-text-muted);
    cursor: pointer;
    transition: background 0.12s, color 0.12s;
}

.bulk-delete-btn:hover:not(:disabled)[b-9xvot2gb9d] {
    background: var(--color-danger-50);
    color: var(--color-danger-600);
}

.bulk-delete-btn:disabled[b-9xvot2gb9d] {
    opacity: 0.25;
    cursor: not-allowed;
}

/* ── Results table ────────────────────────────────────────────────────── */
.bulk-results-wrap[b-9xvot2gb9d] {
    overflow-x: auto;
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-sm);
}

.bulk-results-table[b-9xvot2gb9d] {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--font-size-xs);
}

.bulk-results-table thead th[b-9xvot2gb9d] {
    background: var(--color-gray-50);
    padding: 0.45rem 0.6rem;
    text-align: left;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-text-muted);
    border-bottom: 1px solid var(--color-border-light);
}

.bulk-results-table tbody td[b-9xvot2gb9d] {
    padding: 0.4rem 0.6rem;
    border-bottom: 1px solid var(--color-border-light);
    vertical-align: middle;
}

.bulk-results-table tbody tr:last-child td[b-9xvot2gb9d] {
    border-bottom: none;
}

.bulk-result-success .bulk-result-icon i[b-9xvot2gb9d] {
    color: var(--color-success-600, #16a34a);
}

.bulk-result-fail .bulk-result-icon i[b-9xvot2gb9d] {
    color: var(--color-danger-500);
}

.bulk-result-fail[b-9xvot2gb9d] {
    background: var(--color-danger-50);
}

.bulk-result-email[b-9xvot2gb9d] {
    font-family: monospace;
    font-size: 0.72rem;
    color: var(--color-text-muted);
}

.bulk-note-error[b-9xvot2gb9d] {
    color: var(--color-danger-600);
    font-weight: 500;
}

.bulk-note-info[b-9xvot2gb9d] {
    color: var(--color-primary-dark);
}

.bulk-note-warn[b-9xvot2gb9d] {
    color: var(--color-warning-600, #d97706);
}

/* /Pages/Principal/Students/StudentImport.razor.rz.scp.css */
.student-import-page[b-7vetcn5jp3] {
    width: min(100%, 80rem);
    margin: 0 auto;
    padding: var(--spacing-6) var(--spacing-4);
    color: var(--color-gray-900);
}

.page-header[b-7vetcn5jp3],
.panel-heading[b-7vetcn5jp3],
.template-row[b-7vetcn5jp3],
.actions[b-7vetcn5jp3],
.stats[b-7vetcn5jp3],
.result-grid[b-7vetcn5jp3] {
    display: flex;
    align-items: center;
}

.page-header[b-7vetcn5jp3],
.panel-heading[b-7vetcn5jp3],
.template-row[b-7vetcn5jp3],
.split-actions[b-7vetcn5jp3] {
    justify-content: space-between;
}

h1[b-7vetcn5jp3],
h2[b-7vetcn5jp3],
h3[b-7vetcn5jp3],
p[b-7vetcn5jp3] {
    margin: 0;
}

h1[b-7vetcn5jp3] { font-size: var(--font-size-2xl); }
h2[b-7vetcn5jp3] { font-size: var(--font-size-xl); }
h3[b-7vetcn5jp3] { font-size: var(--font-size-base); }
p[b-7vetcn5jp3] { color: var(--color-gray-600); }

.back-link[b-7vetcn5jp3],
.primary-button[b-7vetcn5jp3],
.secondary-button[b-7vetcn5jp3] {
    min-height: 2.75rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-2);
    padding: var(--spacing-2) var(--spacing-4);
    border-radius: var(--radius-md);
    font-weight: var(--font-weight-semibold);
    text-decoration: none;
    cursor: pointer;
}

.back-link[b-7vetcn5jp3],
.secondary-button[b-7vetcn5jp3] {
    color: var(--color-gray-700);
    background: var(--color-white);
    border: 1px solid var(--color-gray-300);
}

.primary-button[b-7vetcn5jp3] {
    color: var(--color-white);
    background: var(--color-teal-600);
    border: 1px solid var(--color-teal-600);
}

button:disabled[b-7vetcn5jp3] {
    cursor: not-allowed;
    opacity: 0.55;
}

.steps[b-7vetcn5jp3] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-2);
    margin: var(--spacing-6) 0;
    padding: 0;
    list-style: none;
}

.step[b-7vetcn5jp3] {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    color: var(--color-gray-500);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
}

.step span[b-7vetcn5jp3] {
    width: 2rem;
    height: 2rem;
    display: inline-grid;
    place-items: center;
    flex: 0 0 auto;
    border-radius: var(--radius-full);
    background: var(--color-gray-200);
}

.step.active[b-7vetcn5jp3],
.step.complete[b-7vetcn5jp3] { color: var(--color-teal-700); }
.step.active span[b-7vetcn5jp3],
.step.complete span[b-7vetcn5jp3] { background: var(--color-teal-100); }

.panel[b-7vetcn5jp3] {
    padding: var(--spacing-6);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-lg);
    background: var(--color-white);
    box-shadow: var(--shadow-sm);
}

.loading-state[b-7vetcn5jp3] {
    display: flex;
    justify-content: center;
    gap: var(--spacing-3);
}

.field-grid[b-7vetcn5jp3] {
    display: grid;
    gap: var(--spacing-4);
    margin-top: var(--spacing-5);
}

label > span[b-7vetcn5jp3] {
    display: block;
    margin-bottom: var(--spacing-2);
    font-weight: var(--font-weight-semibold);
}

label strong[b-7vetcn5jp3] { color: var(--color-danger-500); }

select[b-7vetcn5jp3] {
    width: 100%;
    min-height: 2.75rem;
    padding: var(--spacing-2) var(--spacing-3);
    border: 1px solid var(--color-gray-300);
    border-radius: var(--radius-md);
    background: var(--color-white);
}

.template-row[b-7vetcn5jp3] {
    gap: var(--spacing-4);
    margin-top: var(--spacing-6);
    padding: var(--spacing-4);
    border-left: 0.25rem solid var(--color-orange-500);
    background: var(--color-orange-50);
}

.upload-zone[b-7vetcn5jp3] {
    position: relative;
    margin-top: var(--spacing-5);
    border: 1px dashed var(--color-teal-400);
    background: var(--color-teal-50);
}

/* Hide native file input — its UA button ignores size/opacity, so clip it fully */
.upload-zone input[b-7vetcn5jp3] {
    position: absolute;
    top: -9999px;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.upload-zone label[b-7vetcn5jp3] {
    min-height: 10rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-2);
    cursor: pointer;
}

.upload-zone i[b-7vetcn5jp3] {
    color: var(--color-teal-600);
    font-size: var(--font-size-3xl);
}

.upload-zone small[b-7vetcn5jp3],
td small[b-7vetcn5jp3] { color: var(--color-gray-500); }

.actions[b-7vetcn5jp3] {
    gap: var(--spacing-3);
    margin-top: var(--spacing-5);
    justify-content: flex-end;
}

.import-progress[b-7vetcn5jp3] {
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
    margin-top: var(--spacing-5);
    padding: var(--spacing-4);
    border-left: 0.25rem solid var(--color-teal-500);
    background: var(--color-teal-50);
}

.import-progress strong[b-7vetcn5jp3] { color: var(--color-teal-800); }
.import-progress p[b-7vetcn5jp3] { margin-top: var(--spacing-1); }

.progress-spinner[b-7vetcn5jp3] {
    width: 2rem;
    height: 2rem;
    flex: 0 0 auto;
    border: 0.2rem solid var(--color-teal-200);
    border-top-color: var(--color-teal-600);
    border-radius: var(--radius-full);
    animation: import-spin-b-7vetcn5jp3 0.8s linear infinite;
}

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

.stats[b-7vetcn5jp3],
.result-grid[b-7vetcn5jp3] {
    gap: var(--spacing-3);
    flex-wrap: wrap;
}

.stats span[b-7vetcn5jp3],
.result-grid span[b-7vetcn5jp3] {
    padding: var(--spacing-2) var(--spacing-3);
    border-radius: var(--radius-md);
    background: var(--color-gray-100);
}

.valid[b-7vetcn5jp3] { color: var(--color-success-600); }
.invalid[b-7vetcn5jp3] { color: var(--color-danger-600); }

.table-wrap[b-7vetcn5jp3] {
    margin-top: var(--spacing-5);
    overflow-x: auto;
}

table[b-7vetcn5jp3] {
    width: 100%;
    min-width: 58rem;
    border-collapse: collapse;
}

th[b-7vetcn5jp3],
td[b-7vetcn5jp3] {
    padding: var(--spacing-3);
    border-bottom: 1px solid var(--color-gray-200);
    text-align: left;
    vertical-align: top;
}

th[b-7vetcn5jp3] {
    color: var(--color-gray-600);
    background: var(--color-gray-50);
    font-size: var(--font-size-sm);
}

.invalid-row[b-7vetcn5jp3] { background: var(--color-danger-50); }
.status[b-7vetcn5jp3] { white-space: nowrap; font-weight: var(--font-weight-semibold); }
.row-errors[b-7vetcn5jp3] { margin: 0; padding-left: var(--spacing-4); color: var(--color-danger-600); }

.message[b-7vetcn5jp3] {
    margin-top: var(--spacing-4);
    padding: var(--spacing-4);
    border-radius: var(--radius-md);
}

.message p + p[b-7vetcn5jp3] { margin-top: var(--spacing-2); }
.error-message[b-7vetcn5jp3] { color: var(--color-danger-700); background: var(--color-danger-50); }

.result-panel[b-7vetcn5jp3] { text-align: center; }
.result-icon[b-7vetcn5jp3] {
    width: 4rem;
    height: 4rem;
    display: grid;
    place-items: center;
    margin: 0 auto var(--spacing-4);
    border-radius: var(--radius-full);
    font-size: var(--font-size-2xl);
}

.result-icon.success[b-7vetcn5jp3] { color: var(--color-success-600); background: var(--color-success-50); }
.result-icon.partial[b-7vetcn5jp3] { color: var(--color-warning-700); background: var(--color-orange-50); }
.result-grid[b-7vetcn5jp3] { justify-content: center; margin-top: var(--spacing-5); }
.result-actions[b-7vetcn5jp3] { justify-content: center; }

@media (min-width: 768px) {
    .field-grid[b-7vetcn5jp3] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 767px) {
    .student-import-page[b-7vetcn5jp3] { padding: var(--spacing-4); }
    .page-header[b-7vetcn5jp3],
    .panel-heading[b-7vetcn5jp3],
    .template-row[b-7vetcn5jp3] { align-items: stretch; flex-direction: column; gap: var(--spacing-4); }
    .panel[b-7vetcn5jp3] { padding: var(--spacing-4); }
    .step[b-7vetcn5jp3] { flex-direction: column; text-align: center; }
    .actions[b-7vetcn5jp3] { align-items: stretch; flex-direction: column-reverse; }
    .primary-button[b-7vetcn5jp3],
    .secondary-button[b-7vetcn5jp3] { width: 100%; }
}
/* /Pages/Principal/Teachers/AssignClasses/Index.razor.rz.scp.css */
/* AssignClasses/Index — wireframe-aligned card layout */
/* Mobile-first | Design tokens from design-tokens.css */

/* ── Page Header ─────────────────────────────────────────────────────────── */
.ac-header[b-1bjt2fjvlg] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.25rem;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.ac-title[b-1bjt2fjvlg] {
    font-size: 1.375rem;
    font-weight: 700;
    color: var(--color-neutral-900, #1f2937);
    display: flex;
    align-items: center;
    gap: 0.625rem;
    margin: 0;
}

.ac-title i[b-1bjt2fjvlg] { color: var(--color-primary-600, var(--color-teal-700)); }

.ac-subtitle[b-1bjt2fjvlg] {
    font-size: 0.8125rem;
    color: var(--color-neutral-500, #6b7280);
    margin: 0.125rem 0 0;
}

.ac-btn-create[b-1bjt2fjvlg] {
    background: var(--color-primary-600, var(--color-teal-700));
    color: #fff;
    border: none;
    padding: 0.625rem 1rem;
    border-radius: 0.5rem;
    font-size: 0.8125rem;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    transition: background 0.2s;
    text-decoration: none;
}

.ac-btn-create:hover[b-1bjt2fjvlg] {
    background: var(--color-primary-700, #0d6b63);
}

/* ── Stats Bar ───────────────────────────────────────────────────────────── */
.ac-kpi-row[b-1bjt2fjvlg] {
    display: flex;
    gap: 0.75rem;
    margin-bottom: 1.25rem;
    flex-wrap: wrap;
}

.ac-kpi[b-1bjt2fjvlg] {
    flex: 1;
    background: #fff;
    border: 1px solid var(--color-neutral-200, #e5e7eb);
    border-radius: 0.5rem;
    padding: 0.75rem 1rem;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
    min-width: 0;
}

.ac-kpi-label[b-1bjt2fjvlg] {
    font-size: 0.6875rem;
    text-transform: uppercase;
    color: var(--color-neutral-500, #6b7280);
    font-weight: 600;
    letter-spacing: 0.04em;
}

.ac-kpi-value[b-1bjt2fjvlg] {
    font-size: 1.25rem;
    font-weight: 700;
    margin-top: 0.125rem;
    color: var(--color-neutral-900, #1f2937);
}

.ac-kpi--primary .ac-kpi-value[b-1bjt2fjvlg] { color: var(--color-primary-600, var(--color-teal-700)); }
.ac-kpi--warning .ac-kpi-value[b-1bjt2fjvlg] { color: #d97706; }
.ac-kpi--danger .ac-kpi-value[b-1bjt2fjvlg]  { color: #dc2626; }

/* ── Toolbar ─────────────────────────────────────────────────────────────── */
.ac-toolbar[b-1bjt2fjvlg] {
    background: #fff;
    border: 1px solid var(--color-neutral-200, #e5e7eb);
    border-radius: 0.75rem;
    padding: 0.75rem 1rem;
    margin-bottom: 1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
    flex-wrap: wrap;
    gap: 0.75rem;
}

.ac-search-wrap[b-1bjt2fjvlg] {
    position: relative;
    flex: 1;
    max-width: 320px;
    min-width: 200px;
}

.ac-search-icon[b-1bjt2fjvlg] {
    position: absolute;
    left: 0.625rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--color-neutral-400, #9ca3af);
    font-size: 0.8125rem;
    pointer-events: none;
}

.ac-search-input[b-1bjt2fjvlg] {
    width: 100%;
    padding: 0.5rem 2rem 0.5rem 2rem;
    border: 1px solid var(--color-neutral-300, #d1d5db);
    border-radius: 0.5rem;
    font-size: 0.8125rem;
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s;
    box-sizing: border-box;
    background: #fff;
    color: var(--color-neutral-900, #1f2937);
}

.ac-search-input:focus[b-1bjt2fjvlg] {
    border-color: var(--color-primary-600, var(--color-teal-700));
    box-shadow: 0 0 0 3px rgba(14, 116, 144, 0.1);
}

.ac-search-clear[b-1bjt2fjvlg] {
    position: absolute;
    right: 0.5rem;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: var(--color-neutral-400, #9ca3af);
    cursor: pointer;
    padding: 0.125rem;
    font-size: 0.75rem;
    line-height: 1;
}

.ac-search-clear:hover[b-1bjt2fjvlg] { color: var(--color-neutral-700, #374151); }

.ac-filter-tabs[b-1bjt2fjvlg] {
    display: flex;
    gap: 0.25rem;
    background: var(--color-neutral-100, #f3f4f6);
    padding: 0.1875rem;
    border-radius: 0.5rem;
    flex-wrap: wrap;
}

.ac-filter-tab[b-1bjt2fjvlg] {
    padding: 0.375rem 0.875rem;
    border-radius: 0.375rem;
    font-size: 0.8125rem;
    font-weight: 500;
    cursor: pointer;
    border: none;
    background: transparent;
    color: var(--color-neutral-500, #6b7280);
    transition: all 0.2s;
    white-space: nowrap;
}

.ac-filter-tab:hover[b-1bjt2fjvlg] { color: var(--color-neutral-900, #1f2937); }

.ac-filter-tab--active[b-1bjt2fjvlg] {
    background: #fff;
    color: var(--color-primary-600, var(--color-teal-700));
    box-shadow: 0 1px 2px rgba(0,0,0,0.08);
}

/* ── Bulk Action Bar ─────────────────────────────────────────────────────── */
.ac-bulk-bar[b-1bjt2fjvlg] {
    background: rgba(14, 116, 144, 0.08);
    border: 1px solid var(--color-primary-600, var(--color-teal-700));
    border-radius: 0.5rem;
    padding: 0.5rem 1rem;
    margin-bottom: 1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.ac-bulk-bar span[b-1bjt2fjvlg] {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--color-primary-600, var(--color-teal-700));
}

.ac-bulk-actions[b-1bjt2fjvlg] {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.ac-btn-sm[b-1bjt2fjvlg] {
    padding: 0.375rem 0.75rem;
    font-size: 0.75rem;
    border-radius: 0.375rem;
    border: 1px solid var(--color-neutral-300, #d1d5db);
    background: #fff;
    cursor: pointer;
    font-weight: 500;
    transition: all 0.2s;
    color: var(--color-neutral-700, #374151);
}

.ac-btn-sm:hover[b-1bjt2fjvlg] { background: var(--color-neutral-50, #f9fafb); }

.ac-btn-sm--primary[b-1bjt2fjvlg] {
    background: var(--color-primary-600, var(--color-teal-700));
    color: #fff;
    border-color: var(--color-primary-600, var(--color-teal-700));
}

.ac-btn-sm--primary:hover[b-1bjt2fjvlg] {
    background: var(--color-primary-700, #0d6b63);
}

.ac-btn-sm--ghost[b-1bjt2fjvlg] {
    border: none;
    background: none;
    color: var(--color-primary-600, var(--color-teal-700));
}

.ac-btn-sm--ghost:hover[b-1bjt2fjvlg] { text-decoration: underline; }

/* ── Teacher List ────────────────────────────────────────────────────────── */
.ac-list-container[b-1bjt2fjvlg] {
    background: #fff;
    border: 1px solid var(--color-neutral-200, #e5e7eb);
    border-radius: 0.75rem;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}

/* ── Row ─────────────────────────────────────────────────────────────────── */
.ac-row[b-1bjt2fjvlg] {
    display: grid;
    grid-template-columns: 36px 2fr 1.5fr 1fr auto;
    align-items: center;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--color-neutral-200, #e5e7eb);
    transition: background 0.2s;
    cursor: pointer;
}

.ac-row:last-child[b-1bjt2fjvlg] { border-bottom: none; }
.ac-row:hover[b-1bjt2fjvlg] { background: var(--color-neutral-50, #f9fafb); }
.ac-row--expanded[b-1bjt2fjvlg] { background: rgba(14, 116, 144, 0.06); }

/* Checkbox */
.ac-checkbox[b-1bjt2fjvlg] {
    width: 1rem;
    height: 1rem;
    border: 1px solid var(--color-neutral-300, #d1d5db);
    border-radius: 0.25rem;
    cursor: pointer;
    accent-color: var(--color-primary-600, var(--color-teal-700));
}

/* Teacher Info */
.ac-col-info[b-1bjt2fjvlg] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-width: 0;
}

.ac-avatar[b-1bjt2fjvlg] {
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 50%;
    background: var(--color-primary-600, var(--color-teal-700));
    color: #fff;
    font-size: 0.8125rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    letter-spacing: 0.02em;
}

.ac-avatar--full[b-1bjt2fjvlg] { background: #dc2626; }
.ac-avatar--none[b-1bjt2fjvlg] { background: var(--color-neutral-500, #6b7280); }

.ac-teacher-meta[b-1bjt2fjvlg] {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.ac-teacher-name[b-1bjt2fjvlg] {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-neutral-900, #1f2937);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: flex;
    align-items: center;
    gap: 0.375rem;
    flex-wrap: wrap;
}

.ac-teacher-sub[b-1bjt2fjvlg] {
    font-size: 0.75rem;
    color: var(--color-neutral-500, #6b7280);
    margin-top: 0.0625rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ac-emp-id[b-1bjt2fjvlg] {
    color: var(--color-neutral-400, #9ca3af);
    font-size: 0.75rem;
    font-weight: 400;
}

.ac-inactive-badge[b-1bjt2fjvlg],
.ac-unassigned-badge[b-1bjt2fjvlg] {
    font-size: 0.625rem;
    font-weight: 600;
    padding: 0.0625rem 0.375rem;
    border-radius: 999px;
    flex-shrink: 0;
}

.ac-inactive-badge[b-1bjt2fjvlg] {
    background: #fee2e2;
    color: #dc2626;
}

.ac-unassigned-badge[b-1bjt2fjvlg] {
    background: #fee2e2;
    color: #dc2626;
}

/* Class Chips */
.ac-col-classes[b-1bjt2fjvlg] {
    display: flex;
    gap: 0.25rem;
    flex-wrap: wrap;
    align-items: center;
}

.ac-class-chip[b-1bjt2fjvlg] {
    background: rgba(14, 116, 144, 0.1);
    color: var(--color-primary-600, var(--color-teal-700));
    padding: 0.125rem 0.5rem;
    border-radius: 999px;
    font-size: 0.6875rem;
    font-weight: 600;
    white-space: nowrap;
}

.ac-class-chip--more[b-1bjt2fjvlg] {
    background: var(--color-neutral-100, #f3f4f6);
    color: var(--color-neutral-500, #6b7280);
}

.ac-badge-unassigned[b-1bjt2fjvlg] {
    background: #fee2e2;
    color: #dc2626;
    padding: 0.125rem 0.5rem;
    border-radius: 999px;
    font-size: 0.6875rem;
    font-weight: 600;
}

/* Workload */
.ac-col-load[b-1bjt2fjvlg] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 0;
}

.ac-load-label[b-1bjt2fjvlg] {
    display: flex;
    justify-content: space-between;
    font-size: 0.6875rem;
    color: var(--color-neutral-500, #6b7280);
}

.ac-load-text--none[b-1bjt2fjvlg] {
    color: var(--color-neutral-400, #9ca3af);
    font-style: italic;
}

.ac-load-text--full[b-1bjt2fjvlg] {
    color: #dc2626;
    font-weight: 600;
}

.ac-bar-track[b-1bjt2fjvlg] {
    height: 0.375rem;
    background: var(--color-neutral-100, #f3f4f6);
    border-radius: 0.25rem;
    overflow: hidden;
}

.ac-bar-fill[b-1bjt2fjvlg] {
    height: 100%;
    border-radius: 0.25rem;
    transition: width 0.3s ease;
}

.ac-bar--ok[b-1bjt2fjvlg]   { background: #10b981; }
.ac-bar--warn[b-1bjt2fjvlg] { background: #f59e0b; }
.ac-bar--full[b-1bjt2fjvlg] { background: #ef4444; }
.ac-bar--none[b-1bjt2fjvlg] { background: var(--color-neutral-300, #d1d5db); }

/* Expand Button */
.ac-expand-btn[b-1bjt2fjvlg] {
    background: none;
    border: 1px solid var(--color-neutral-300, #d1d5db);
    border-radius: 0.375rem;
    padding: 0.375rem 0.625rem;
    font-size: 0.75rem;
    cursor: pointer;
    color: var(--color-neutral-500, #6b7280);
    transition: all 0.2s;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.ac-expand-btn:hover[b-1bjt2fjvlg] {
    background: var(--color-neutral-50, #f9fafb);
    color: var(--color-neutral-900, #1f2937);
}

.ac-expand-btn i[b-1bjt2fjvlg] {
    font-size: 0.625rem;
    transition: transform 0.2s;
}

.ac-chevron--open[b-1bjt2fjvlg] {
    transform: rotate(180deg);
}

/* ── Expanded Detail ─────────────────────────────────────────────────────── */
.ac-detail[b-1bjt2fjvlg] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem;
    padding: 1rem;
    background: rgba(14, 116, 144, 0.06);
    border-bottom: 1px solid var(--color-primary-600, var(--color-teal-700));
}

.ac-detail-section h3[b-1bjt2fjvlg] {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--color-primary-600, var(--color-teal-700));
    margin: 0 0 0.5rem;
    letter-spacing: 0.04em;
}

.ac-detail-list[b-1bjt2fjvlg] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.ac-detail-item[b-1bjt2fjvlg] {
    background: #fff;
    border: 1px solid var(--color-neutral-200, #e5e7eb);
    border-radius: 0.375rem;
    padding: 0.5rem 0.75rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.8125rem;
}

.ac-detail-remove[b-1bjt2fjvlg] {
    color: #ef4444;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.2s;
    background: none;
    border: none;
    font-size: 0.75rem;
    line-height: 1;
}

.ac-detail-item:hover .ac-detail-remove[b-1bjt2fjvlg] { opacity: 1; }

.ac-detail-check[b-1bjt2fjvlg] {
    color: #10b981;
    font-size: 0.75rem;
}

.ac-detail-empty[b-1bjt2fjvlg] {
    font-size: 0.8125rem;
    color: var(--color-neutral-400, #9ca3af);
    font-style: italic;
}

.ac-btn-add[b-1bjt2fjvlg] {
    margin-top: 0.5rem;
    padding: 0.375rem 0.75rem;
    font-size: 0.75rem;
    border: 1px dashed var(--color-primary-600, var(--color-teal-700));
    background: none;
    color: var(--color-primary-600, var(--color-teal-700));
    border-radius: 0.375rem;
    cursor: pointer;
    font-weight: 500;
    width: 100%;
    transition: background 0.2s;
}

.ac-btn-add:hover[b-1bjt2fjvlg] { background: rgba(14, 116, 144, 0.08); }

/* ── Pagination ──────────────────────────────────────────────────────────── */
.ac-pagination[b-1bjt2fjvlg] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 1rem;
    padding: 0 0.25rem;
}

.ac-pagination-info[b-1bjt2fjvlg] {
    font-size: 0.8125rem;
    color: var(--color-neutral-500, #6b7280);
}

.ac-pagination-btns[b-1bjt2fjvlg] {
    display: flex;
    gap: 0.25rem;
}

.ac-page-btn[b-1bjt2fjvlg] {
    width: 2rem;
    height: 2rem;
    border: 1px solid var(--color-neutral-300, #d1d5db);
    border-radius: 0.375rem;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 0.8125rem;
    transition: all 0.2s;
    color: var(--color-neutral-700, #374151);
}

.ac-page-btn:hover[b-1bjt2fjvlg] { background: var(--color-neutral-50, #f9fafb); }

.ac-page-btn--active[b-1bjt2fjvlg] {
    background: var(--color-primary-600, var(--color-teal-700));
    color: #fff;
    border-color: var(--color-primary-600, var(--color-teal-700));
}

.ac-page-btn[disabled][b-1bjt2fjvlg] {
    opacity: 0.4;
    cursor: not-allowed;
}

.ac-page-ellipsis[b-1bjt2fjvlg] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    color: var(--color-neutral-400, #9ca3af);
}

/* ── Loading & Empty states ──────────────────────────────────────────────── */
.ac-loading[b-1bjt2fjvlg] {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 16rem;
}

.ac-empty[b-1bjt2fjvlg] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: 5rem 0;
    color: var(--color-neutral-400, #9ca3af);
    background: #fff;
    border-radius: 0.75rem;
    border: 1px solid var(--color-neutral-200, #e5e7eb);
}

.ac-empty i[b-1bjt2fjvlg] { font-size: 2.5rem; }
.ac-empty p[b-1bjt2fjvlg] { font-size: 0.875rem; font-weight: 500; }

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
    .ac-row[b-1bjt2fjvlg] {
        grid-template-columns: 36px 2fr auto;
    }
    .ac-col-classes[b-1bjt2fjvlg], .ac-col-load[b-1bjt2fjvlg] { display: none; }
    .ac-kpi-row[b-1bjt2fjvlg] { flex-wrap: wrap; }
    .ac-kpi[b-1bjt2fjvlg] { min-width: calc(50% - 0.375rem); }
}

@media (max-width: 600px) {
    .ac-header[b-1bjt2fjvlg] { flex-direction: column; gap: 0.75rem; align-items: flex-start; }
    .ac-kpi[b-1bjt2fjvlg] { min-width: 100%; }
    .ac-toolbar[b-1bjt2fjvlg] { flex-direction: column; gap: 0.75rem; }
    .ac-search-wrap[b-1bjt2fjvlg] { max-width: 100%; }
    .ac-filter-tabs[b-1bjt2fjvlg] { overflow-x: auto; flex-wrap: nowrap; }
    .ac-detail[b-1bjt2fjvlg] { grid-template-columns: 1fr; }
    .ac-pagination[b-1bjt2fjvlg] { flex-direction: column; gap: 0.5rem; align-items: center; }
}

/* /Pages/Principal/Teachers/AssignClasses/Manage.razor.rz.scp.css */
/* AssignClasses/Manage — subject-first, class-block layout */

.teacher-avatar[b-i0yjhsrzsa] {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 9999px;
    background-color: var(--color-teal-600, #0d9488);
    color: #fff;
    font-weight: 700;
    font-size: 0.8125rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.class-card[b-i0yjhsrzsa] {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 1rem;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0,0,0,.06);
}

.class-card-header[b-i0yjhsrzsa] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1.25rem;
    background: #f9fafb;
    border-bottom: 1px solid #e5e7eb;
    gap: 0.75rem;
}

.subject-grid[b-i0yjhsrzsa] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 0.5rem;
}

.subject-chip[b-i0yjhsrzsa] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    border-radius: 0.625rem;
    border: 1px solid;
    cursor: pointer;
    user-select: none;
    transition: background 0.15s, border-color 0.15s, box-shadow 0.15s;
    font-size: 0.8125rem;
    line-height: 1.25;
}

.subject-chip--on[b-i0yjhsrzsa] {
    background: var(--color-teal-50);
    border-color: var(--color-teal-500);
    color: var(--color-teal-700);
    box-shadow: 0 0 0 1px var(--color-teal-500);
    font-weight: 600;
}

.subject-chip--off[b-i0yjhsrzsa] {
    background: #fff;
    border-color: #e5e7eb;
    color: #374151;
}

.subject-chip--off:hover[b-i0yjhsrzsa] {
    border-color: var(--color-teal-200);
    background: var(--color-teal-50);
}

@media (max-width: 640px) {
    .subject-grid[b-i0yjhsrzsa] {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* /Pages/Principal/Teachers/BulkImport.razor.rz.scp.css */
/* BulkImport.razor.css — Teacher Excel Import Wizard */

.page-container[b-d25pqqn2l5] {
    max-width: 860px;
    margin: 0 auto;
    padding: 1.5rem 1rem;
}

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

.page-title[b-d25pqqn2l5] {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--color-neutral-900, #111827);
}

.page-subtitle[b-d25pqqn2l5] {
    font-size: 0.875rem;
    color: var(--color-neutral-500, #6b7280);
    margin-top: 0.25rem;
}

/* ── Step Indicator ── */
.step-indicator[b-d25pqqn2l5] {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 2rem;
    gap: 0;
}

.step[b-d25pqqn2l5] {
    display: flex;
    flex-direction: column;
    align-items: center;
    opacity: 0.45;
    transition: opacity 0.2s;
}

.step.step-active[b-d25pqqn2l5],
.step.step-done[b-d25pqqn2l5] {
    opacity: 1;
}

.step-circle[b-d25pqqn2l5] {
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 50%;
    background: var(--color-neutral-200, #e5e7eb);
    color: var(--color-neutral-500, #6b7280);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.9rem;
    transition: background 0.2s, color 0.2s;
}

.step.step-active .step-circle[b-d25pqqn2l5] {
    background: var(--color-primary-600, #0d6e5f);
    color: #fff;
}

.step.step-done .step-circle[b-d25pqqn2l5] {
    background: var(--color-success-500, #22c55e);
    color: #fff;
}

.step-label[b-d25pqqn2l5] {
    font-size: 0.75rem;
    margin-top: 0.35rem;
    font-weight: 500;
    color: var(--color-neutral-600, #4b5563);
}

.step-line[b-d25pqqn2l5] {
    width: 5rem;
    height: 2px;
    background: var(--color-neutral-200, #e5e7eb);
    margin: 0 0.5rem;
    margin-bottom: 1rem; /* optical alignment with circle */
    transition: background 0.2s;
}

.step-line.step-line-done[b-d25pqqn2l5] {
    background: var(--color-success-500, #22c55e);
}

/* ── Card ── */
.card[b-d25pqqn2l5] {
    background: #fff;
    border: 1px solid var(--color-neutral-100, #f3f4f6);
    border-radius: 0.75rem;
    padding: 1.5rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

/* ── Template Banner ── */
.template-banner[b-d25pqqn2l5] {
    display: flex;
    align-items: center;
    gap: 1rem;
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    border-radius: 0.625rem;
    padding: 1rem 1.25rem;
    margin-bottom: 1.5rem;
}

.template-banner-icon[b-d25pqqn2l5] {
    font-size: 1.75rem;
    color: #16a34a;
    flex-shrink: 0;
}

.btn-template[b-d25pqqn2l5] {
    display: inline-flex;
    align-items: center;
    padding: 0.5rem 1rem;
    background: #16a34a;
    color: #fff;
    border-radius: 0.375rem;
    font-size: 0.875rem;
    font-weight: 500;
    border: none;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s;
}

.btn-template:hover:not(:disabled)[b-d25pqqn2l5] {
    background: #15803d;
}

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

/* ── Drop Zone ── */
.drop-zone[b-d25pqqn2l5] {
    position: relative;
    border: 2px dashed var(--color-neutral-300, #d1d5db);
    border-radius: 0.625rem;
    padding: 2.5rem 1.5rem;
    text-align: center;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
    margin-bottom: 1.25rem;
}

.drop-zone:hover[b-d25pqqn2l5] {
    border-color: var(--color-primary-500, #0d6e5f);
    background: var(--color-teal-50);
}

.drop-zone.drop-zone-selected[b-d25pqqn2l5] {
    border-color: #16a34a;
    background: #f0fdf4;
}

.drop-zone-icon[b-d25pqqn2l5] {
    font-size: 2.5rem;
    color: var(--color-neutral-300, #d1d5db);
    display: block;
    margin: 0 auto 0.75rem;
}

/* The InputFile element overlays the entire drop zone */
.file-input-overlay[b-d25pqqn2l5] {
    position: absolute;
    inset: 0;
    opacity: 0;
    width: 100%;
    height: 100%;
    cursor: pointer;
}

/* ── Column Guide ── */
.column-guide[b-d25pqqn2l5] {
    background: var(--color-neutral-50, #f9fafb);
    border: 1px solid var(--color-neutral-100, #f3f4f6);
    border-radius: 0.5rem;
    padding: 0.875rem 1rem;
    margin-bottom: 1.25rem;
}

.column-chips[b-d25pqqn2l5] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.chip[b-d25pqqn2l5] {
    display: inline-block;
    padding: 0.2rem 0.6rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 500;
}

.chip-required[b-d25pqqn2l5] {
    background: #fef2f2;
    color: #b91c1c;
    border: 1px solid #fecaca;
}

.chip-optional[b-d25pqqn2l5] {
    background: #f0f9ff;
    color: #0369a1;
    border: 1px solid #bae6fd;
}

/* ── Stats Grid ── */
.stats-grid[b-d25pqqn2l5] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.75rem;
    margin-bottom: 1.25rem;
}

@media (max-width: 640px) {
    .stats-grid[b-d25pqqn2l5] {
        grid-template-columns: repeat(2, 1fr);
    }

    .validation-checks[b-d25pqqn2l5] {
        grid-template-columns: 1fr;
    }
}

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

.stat-number[b-d25pqqn2l5] {
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1;
}

.stat-label[b-d25pqqn2l5] {
    font-size: 0.75rem;
    margin-top: 0.25rem;
    opacity: 0.8;
}

.stat-blue[b-d25pqqn2l5] {
    background: #eff6ff;
    color: #1d4ed8;
}

.stat-green[b-d25pqqn2l5] {
    background: #f0fdf4;
    color: #15803d;
}

.stat-red[b-d25pqqn2l5] {
    background: #fef2f2;
    color: #b91c1c;
}

.stat-amber[b-d25pqqn2l5] {
    background: #fffbeb;
    color: #b45309;
}

/* ── Alerts ── */
.alert[b-d25pqqn2l5] {
    display: flex;
    align-items: flex-start;
    padding: 0.75rem 1rem;
    border-radius: 0.5rem;
    margin-bottom: 1rem;
    font-size: 0.875rem;
}

.alert-warning[b-d25pqqn2l5] {
    background: #fffbeb;
    border: 1px solid #fde68a;
    color: #92400e;
}

.alert-error[b-d25pqqn2l5] {
    background: #fef2f2;
    border: 1px solid #fecaca;
    color: #991b1b;
}

.alert-info[b-d25pqqn2l5] {
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    color: #1e40af;
}

.alert-success[b-d25pqqn2l5] {
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    color: #166534;
}

.import-progress[b-d25pqqn2l5] {
    display: grid;
    gap: var(--spacing-sm);
    margin-top: var(--spacing-lg);
    padding: var(--spacing-md);
    border: 1px solid var(--color-primary-200);
    border-radius: var(--radius-md);
    background: var(--color-primary-50);
    color: var(--color-neutral-700);
    font-size: var(--font-size-sm);
}

.import-progress-heading[b-d25pqqn2l5] {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    color: var(--color-primary-800);
}

.import-progress progress[b-d25pqqn2l5] {
    width: 100%;
    accent-color: var(--color-primary-600);
}

.import-progress p[b-d25pqqn2l5] {
    margin: 0;
    color: var(--color-neutral-600);
}

.validation-checks[b-d25pqqn2l5] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.5rem 1rem;
    margin-bottom: 1rem;
    color: var(--color-neutral-700, #374151);
    font-size: 0.8125rem;
}

.validation-checks span[b-d25pqqn2l5] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.validation-checks i[b-d25pqqn2l5] {
    color: var(--color-success-600, #16a34a);
}

/* ── Section titles ── */
.section-title[b-d25pqqn2l5] {
    font-size: 0.9375rem;
    font-weight: 600;
    margin-bottom: 0.75rem;
    display: flex;
    align-items: center;
}

/* ── Table ── */
.table-wrapper[b-d25pqqn2l5] {
    overflow-x: auto;
    border: 1px solid var(--color-neutral-200, #e5e7eb);
    border-radius: 0.5rem;
}

.data-table[b-d25pqqn2l5] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8125rem;
}

.data-table th[b-d25pqqn2l5] {
    background: var(--color-neutral-50, #f9fafb);
    padding: 0.5rem 0.75rem;
    text-align: left;
    font-weight: 600;
    color: var(--color-neutral-600, #4b5563);
    border-bottom: 1px solid var(--color-neutral-200, #e5e7eb);
    white-space: nowrap;
}

.data-table td[b-d25pqqn2l5] {
    padding: 0.5rem 0.75rem;
    border-bottom: 1px solid var(--color-neutral-100, #f3f4f6);
    color: var(--color-neutral-800, #1f2937);
}

.data-table tr:last-child td[b-d25pqqn2l5] {
    border-bottom: none;
}

.row-error td[b-d25pqqn2l5] {
    background: #fff5f5;
}

.row-warning td[b-d25pqqn2l5] {
    background: #fffbeb;
}

.email-cell[b-d25pqqn2l5] {
    max-width: 220px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.role-badge[b-d25pqqn2l5] {
    display: inline-block;
    padding: 0.125rem 0.5rem;
    background: #eff6ff;
    color: #1d4ed8;
    border-radius: 9999px;
    font-size: 0.7rem;
    font-weight: 500;
    white-space: nowrap;
}

.badge-ok[b-d25pqqn2l5] {
    display: inline-flex;
    align-items: center;
    padding: 0.125rem 0.5rem;
    background: #dcfce7;
    color: #15803d;
    border-radius: 9999px;
    font-size: 0.7rem;
    font-weight: 600;
    white-space: nowrap;
}

.badge-warning[b-d25pqqn2l5] {
    display: inline-flex;
    align-items: center;
    padding: 0.125rem 0.5rem;
    background: #fef9c3;
    color: #a16207;
    border-radius: 9999px;
    font-size: 0.7rem;
    font-weight: 600;
    white-space: nowrap;
    cursor: help;
}

.role-note[b-d25pqqn2l5] {
    margin-top: 0.5rem;
}

/* ── Result Icon ── */
.result-icon[b-d25pqqn2l5] {
    width: 4rem;
    height: 4rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
}

.result-icon-success[b-d25pqqn2l5] {
    background: #dcfce7;
    color: #16a34a;
}

.result-icon-warning[b-d25pqqn2l5] {
    background: #fef9c3;
    color: #ca8a04;
}

/* ── Buttons ── */
.btn-primary[b-d25pqqn2l5] {
    display: inline-flex;
    align-items: center;
    padding: 0.5625rem 1.25rem;
    background: var(--color-primary-600, #0d6e5f);
    color: #fff;
    border-radius: 0.375rem;
    font-size: 0.875rem;
    font-weight: 500;
    border: none;
    cursor: pointer;
    text-decoration: none;
    transition: background 0.15s;
}

.btn-primary:hover:not(:disabled)[b-d25pqqn2l5] {
    background: var(--color-primary-700, #0a5a4d);
}

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

.btn-secondary[b-d25pqqn2l5] {
    display: inline-flex;
    align-items: center;
    padding: 0.5625rem 1.25rem;
    background: #fff;
    color: var(--color-neutral-700, #374151);
    border: 1px solid var(--color-neutral-300, #d1d5db);
    border-radius: 0.375rem;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    text-decoration: none;
    transition: background 0.15s;
}

.btn-secondary:hover[b-d25pqqn2l5] {
    background: var(--color-neutral-50, #f9fafb);
}

/* ── Utility ── */
.hidden[b-d25pqqn2l5] { display: none; }
.flex[b-d25pqqn2l5] { display: flex; }
.flex-1[b-d25pqqn2l5] { flex: 1; }
.justify-end[b-d25pqqn2l5] { justify-content: flex-end; }
.justify-between[b-d25pqqn2l5] { justify-content: space-between; }
.justify-center[b-d25pqqn2l5] { justify-content: center; }
.text-center[b-d25pqqn2l5] { text-align: center; }
.text-left[b-d25pqqn2l5] { text-align: left; }
.gap-4[b-d25pqqn2l5] { gap: 1rem; }
.mt-1[b-d25pqqn2l5] { margin-top: 0.25rem; }
.mt-2[b-d25pqqn2l5] { margin-top: 0.5rem; }
.mt-4[b-d25pqqn2l5] { margin-top: 1rem; }
.mt-6[b-d25pqqn2l5] { margin-top: 1.5rem; }
.mt-8[b-d25pqqn2l5] { margin-top: 2rem; }
.mr-2[b-d25pqqn2l5] { margin-right: 0.5rem; }
.ml-2[b-d25pqqn2l5] { margin-left: 0.5rem; }
.pt-4[b-d25pqqn2l5] { padding-top: 1rem; }
.border-t[b-d25pqqn2l5] { border-top-width: 1px; border-top-style: solid; }
.border-neutral-100[b-d25pqqn2l5] { border-color: #f3f4f6; }
.font-semibold[b-d25pqqn2l5] { font-weight: 600; }
.font-bold[b-d25pqqn2l5] { font-weight: 700; }
.text-sm[b-d25pqqn2l5] { font-size: 0.875rem; }
.text-xs[b-d25pqqn2l5] { font-size: 0.75rem; }
.text-2xl[b-d25pqqn2l5] { font-size: 1.5rem; }
.text-neutral-500[b-d25pqqn2l5] { color: #6b7280; }
.text-neutral-900[b-d25pqqn2l5] { color: #111827; }
.text-green-700[b-d25pqqn2l5] { color: #15803d; }
.text-red-600[b-d25pqqn2l5] { color: #dc2626; }
/* /Pages/Principal/Teachers/Details.razor.rz.scp.css */
.teacher-page[b-djgkttw8pb] {
    width: 100%;
    padding: var(--spacing-6, 24px) var(--spacing-5, 16px);
}

.teacher-header[b-djgkttw8pb] {
    margin-bottom: var(--spacing-4, 12px);
}

.teacher-header h1[b-djgkttw8pb] {
    margin: var(--spacing-1, 4px) 0 0;
    color: var(--color-neutral-900, #111827);
    font-size: var(--font-size-2xl, 1.5rem);
    font-weight: 700;
}

.teacher-header p[b-djgkttw8pb] {
    margin: var(--spacing-1, 4px) 0 0;
    color: var(--color-neutral-600, #4b5563);
    font-size: var(--font-size-sm, 0.875rem);
}

.back-link[b-djgkttw8pb] {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    border: 0;
    background: transparent;
    color: var(--color-primary-700, #0f766e);
    font-size: var(--font-size-sm, 0.875rem);
    cursor: pointer;
}

.metric-strip[b-djgkttw8pb] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-bottom: var(--spacing-5, 16px);
    border: 1px solid var(--color-neutral-200, #e5e7eb);
    border-radius: var(--radius-md, 8px);
    background: var(--color-neutral-0, #fff);
}

.metric-item[b-djgkttw8pb] {
    display: flex;
    align-items: center;
    gap: var(--spacing-2, 8px);
    min-height: 52px;
    padding: var(--spacing-3, 12px);
    border-bottom: 1px solid var(--color-neutral-100, #f3f4f6);
    color: var(--color-neutral-700, #374151);
    font-size: var(--font-size-sm, 0.875rem);
}

.metric-item:nth-child(odd)[b-djgkttw8pb] {
    border-right: 1px solid var(--color-neutral-100, #f3f4f6);
}

.metric-item i[b-djgkttw8pb] {
    width: 20px;
    color: var(--color-primary-600, #0d9488);
    text-align: center;
}

.metric-item strong[b-djgkttw8pb] {
    color: var(--color-neutral-900, #111827);
}

.teacher-tabs[b-djgkttw8pb] {
    margin-bottom: var(--spacing-5, 16px);
    border-bottom: 1px solid var(--color-neutral-200, #e5e7eb);
}

.teacher-tabs nav[b-djgkttw8pb] {
    display: flex;
    gap: var(--spacing-5, 16px);
}

.teacher-tab[b-djgkttw8pb] {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-2, 8px);
    min-height: 44px;
    padding: 0 var(--spacing-2, 8px);
    border: 0;
    border-bottom: 2px solid transparent;
    background: transparent;
    color: var(--color-neutral-600, #4b5563);
    font-size: var(--font-size-sm, 0.875rem);
    font-weight: 600;
    cursor: pointer;
}

.teacher-tab.active[b-djgkttw8pb] {
    border-bottom-color: var(--color-primary-600, #0d9488);
    color: var(--color-primary-700, #0f766e);
}

.teacher-tab:disabled[b-djgkttw8pb] {
    color: var(--color-neutral-400, #9ca3af);
    cursor: not-allowed;
}

.tab-count[b-djgkttw8pb] {
    color: var(--color-neutral-500, #6b7280);
    font-size: var(--font-size-xs, 0.75rem);
    font-weight: 500;
}

.teacher-tabs > p[b-djgkttw8pb] {
    margin: 0 0 var(--spacing-2, 8px);
    color: var(--color-warning-700, #a16207);
    font-size: var(--font-size-xs, 0.75rem);
}

.subject-panel[b-djgkttw8pb] {
    max-width: 920px;
    border: 1px solid var(--color-neutral-200, #e5e7eb);
    border-radius: var(--radius-md, 8px);
    background: var(--color-neutral-0, #fff);
}

.subject-panel-header[b-djgkttw8pb] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--spacing-4, 12px);
    padding: var(--spacing-4, 12px);
    border-bottom: 1px solid var(--color-neutral-100, #f3f4f6);
}

.subject-panel-header h2[b-djgkttw8pb] {
    margin: 0;
    color: var(--color-neutral-900, #111827);
    font-size: var(--font-size-lg, 1.125rem);
    font-weight: 700;
}

.subject-panel-header p[b-djgkttw8pb] {
    margin: var(--spacing-1, 4px) 0 0;
    color: var(--color-neutral-600, #4b5563);
    font-size: var(--font-size-sm, 0.875rem);
}

.save-subjects-button[b-djgkttw8pb],
.assignment-next-step button[b-djgkttw8pb] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-2, 8px);
    min-height: 44px;
    padding: 0 var(--spacing-4, 12px);
    border: 0;
    border-radius: var(--radius-sm, 6px);
    background: var(--color-primary-600, #0d9488);
    color: var(--color-neutral-0, #fff);
    font-size: var(--font-size-sm, 0.875rem);
    font-weight: 600;
    cursor: pointer;
}

.save-subjects-button:disabled[b-djgkttw8pb],
.assignment-next-step button:disabled[b-djgkttw8pb] {
    background: var(--color-neutral-200, #e5e7eb);
    color: var(--color-neutral-500, #6b7280);
    cursor: not-allowed;
}

.identity-strip[b-djgkttw8pb] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin: 0;
    padding: var(--spacing-3, 12px) var(--spacing-4, 12px);
    background: var(--color-neutral-50, #f9fafb);
}

.identity-strip div[b-djgkttw8pb] {
    padding-right: var(--spacing-3, 12px);
}

.identity-strip dt[b-djgkttw8pb] {
    color: var(--color-neutral-500, #6b7280);
    font-size: var(--font-size-xs, 0.75rem);
}

.identity-strip dd[b-djgkttw8pb] {
    margin: var(--spacing-1, 4px) 0 0;
    color: var(--color-neutral-800, #1f2937);
    font-size: var(--font-size-sm, 0.875rem);
    font-weight: 600;
}

.subject-selector[b-djgkttw8pb] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--spacing-2, 8px);
    max-height: 320px;
    overflow-y: auto;
    padding: var(--spacing-4, 12px);
}

.subject-option[b-djgkttw8pb] {
    display: flex;
    align-items: center;
    gap: var(--spacing-2, 8px);
    min-height: 44px;
    padding: var(--spacing-2, 8px) var(--spacing-3, 12px);
    border: 1px solid var(--color-neutral-200, #e5e7eb);
    border-radius: var(--radius-sm, 6px);
    color: var(--color-neutral-700, #374151);
    font-size: var(--font-size-sm, 0.875rem);
    cursor: pointer;
}

.subject-option.selected[b-djgkttw8pb] {
    border-color: var(--color-primary-400, #2dd4bf);
    background: var(--color-primary-50, #f0fdfa);
    color: var(--color-primary-800, #115e59);
}

.subject-option input[b-djgkttw8pb] {
    width: 18px;
    height: 18px;
    accent-color: var(--color-primary-600, #0d9488);
}

.subject-loading[b-djgkttw8pb],
.subject-empty[b-djgkttw8pb] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-2, 8px);
    min-height: 120px;
    padding: var(--spacing-4, 12px);
    color: var(--color-neutral-500, #6b7280);
    font-size: var(--font-size-sm, 0.875rem);
}

.subject-empty a[b-djgkttw8pb] {
    color: var(--color-primary-700, #0f766e);
    font-weight: 600;
}

.assignment-next-step[b-djgkttw8pb] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-4, 12px);
    padding: var(--spacing-3, 12px) var(--spacing-4, 12px);
    border-top: 1px solid var(--color-neutral-100, #f3f4f6);
    background: var(--color-neutral-50, #f9fafb);
}

.assignment-next-step div[b-djgkttw8pb] {
    display: grid;
    gap: var(--spacing-1, 4px);
}

.assignment-next-step strong[b-djgkttw8pb] {
    color: var(--color-neutral-800, #1f2937);
    font-size: var(--font-size-sm, 0.875rem);
}

.assignment-next-step span[b-djgkttw8pb] {
    color: var(--color-neutral-600, #4b5563);
    font-size: var(--font-size-xs, 0.75rem);
}

@media (min-width: 768px) {
    .metric-strip[b-djgkttw8pb] {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .metric-item[b-djgkttw8pb] {
        border-right: 1px solid var(--color-neutral-100, #f3f4f6);
        border-bottom: 0;
    }

    .metric-item:last-child[b-djgkttw8pb] {
        border-right: 0;
    }
}

@media (max-width: 767px) {
    .teacher-page[b-djgkttw8pb] {
        padding: var(--spacing-4, 12px);
    }

    .teacher-tabs nav[b-djgkttw8pb],
    .subject-panel-header[b-djgkttw8pb],
    .assignment-next-step[b-djgkttw8pb] {
        align-items: stretch;
        flex-direction: column;
    }

    .teacher-tab[b-djgkttw8pb],
    .save-subjects-button[b-djgkttw8pb],
    .assignment-next-step button[b-djgkttw8pb] {
        width: 100%;
    }

    .identity-strip[b-djgkttw8pb],
    .subject-selector[b-djgkttw8pb] {
        grid-template-columns: 1fr;
    }
}

/* Edit-mode action bar: sticky (not fixed) so it pins while scrolling
   but settles ABOVE the layout footer at page end (z-index contract). */
.edit-action-bar[b-djgkttw8pb] {
    position: sticky;
    bottom: 0;
    z-index: var(--z-action-bar, 30);
    margin-left: calc(var(--spacing-5, 16px) * -1);
    margin-right: calc(var(--spacing-5, 16px) * -1);
}

@media (min-width: 768px) {
    .edit-action-bar[b-djgkttw8pb] {
        margin-left: -28px;
        margin-right: -28px;
    }
}
/* /Pages/Principal/Teachers/Index.razor.rz.scp.css */
/* ── Tab Strip ────────────────────────────────────────────────── */
[b-5pd1xaf4dd] .tw-tab-strip {
    display: flex;
    align-items: center;
    gap: 0;
    border-bottom: 2px solid #e5e7eb;
    overflow-x: auto;
    scrollbar-width: none;
}
[b-5pd1xaf4dd] .tw-tab-strip::-webkit-scrollbar { display: none; }

[b-5pd1xaf4dd] .tw-tab {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 18px;
    font-size: 0.875rem;
    font-weight: 500;
    color: #6b7280;
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    cursor: pointer;
    white-space: nowrap;
    text-decoration: none;
    transition: color 0.15s;
}
[b-5pd1xaf4dd] .tw-tab:hover { color: #111827; }

[b-5pd1xaf4dd] .tw-tab-active {
    color: #0e7490;
    border-bottom-color: #0e7490;
    font-weight: 700;
}

/* ── Status Badges ────────────────────────────────────────────── */
[b-5pd1xaf4dd] .tw-status-active {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    font-size: 0.72rem;
    font-weight: 600;
    border-radius: 999px;
    background: #dcfce7;
    color: #166534;
}
[b-5pd1xaf4dd] .tw-status-leave {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    font-size: 0.72rem;
    font-weight: 600;
    border-radius: 999px;
    background: #fef3c7;
    color: #92400e;
}
[b-5pd1xaf4dd] .tw-status-inactive {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    font-size: 0.72rem;
    font-weight: 600;
    border-radius: 999px;
    background: #f3f4f6;
    color: #6b7280;
}

/* ── Subject & Class Teacher Badges ──────────────────────────── */
[b-5pd1xaf4dd] .tw-subject-badge {
    display: inline-block;
    padding: 2px 8px;
    font-size: 0.72rem;
    font-weight: 600;
    border-radius: 6px;
    background: #eff6ff;
    color: #1e40af;
    border: 1px solid #bfdbfe;
}
[b-5pd1xaf4dd] .tw-classtch-badge {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 2px 8px;
    font-size: 0.72rem;
    font-weight: 600;
    border-radius: 6px;
    background: #fef9c3;
    color: #854d0e;
    border: 1px solid #fde68a;
}

/* ── Profile Completion Badges ────────────────────────────────── */
[b-5pd1xaf4dd] .profile-badge {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 2px 7px;
    font-size: 0.67rem;
    font-weight: 600;
    border-radius: 6px;
    letter-spacing: 0.02em;
}
[b-5pd1xaf4dd] .profile-badge-complete {
    background: #d1fae5;
    color: #065f46;
    border: 1px solid #a7f3d0;
}
[b-5pd1xaf4dd] .profile-badge-incomplete {
    background: #fff7ed;
    color: #9a3412;
    border: 1px solid #fed7aa;
}

/* ── Action Buttons ───────────────────────────────────────────── */
[b-5pd1xaf4dd] .tw-action-btn {
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    border: 1px solid transparent;
    cursor: pointer;
    transition: all 0.15s;
}
[b-5pd1xaf4dd] .tw-action-blue  { background: #eff6ff; color: #2563eb; border-color: #bfdbfe; }
[b-5pd1xaf4dd] .tw-action-blue:hover  { background: #dbeafe; }
[b-5pd1xaf4dd] .tw-action-teal  { background: var(--color-teal-50); color: var(--color-teal-700); border-color: var(--color-teal-200); }
[b-5pd1xaf4dd] .tw-action-teal:hover  { background: var(--color-teal-100); }
[b-5pd1xaf4dd] .tw-action-amber { background: #fffbeb; color: #d97706; border-color: #fde68a; }
[b-5pd1xaf4dd] .tw-action-amber:hover { background: #fef3c7; }
[b-5pd1xaf4dd] .tw-action-red   { background: #fff1f2; color: #dc2626; border-color: #fecaca; }
[b-5pd1xaf4dd] .tw-action-red:hover   { background: #fee2e2; }
[b-5pd1xaf4dd] .tw-action-indigo { background: #eef2ff; color: #4f46e5; border-color: #c7d2fe; }
[b-5pd1xaf4dd] .tw-action-indigo:hover { background: #e0e7ff; }
[b-5pd1xaf4dd] .tw-action-violet { background: #f5f3ff; color: #7c3aed; border-color: #ddd6fe; }
[b-5pd1xaf4dd] .tw-action-violet:hover { background: #ede9fe; }

/* ── Table row height ─────────────────────────────────────────── */
[b-5pd1xaf4dd] tbody tr { height: 56px; }

/* Bug #93: Responsive sidebar-aware layout — adjusts when sidebar expands/collapses */

/* Mobile: full width, no sidebar interference */
@media (max-width: 768px) {
    .page-container[b-5pd1xaf4dd] { padding-left: 0 !important; margin-left: 0 !important; }
}

/* Tablet: account for collapsed sidebar (256px) */
@media (min-width: 769px) and (max-width: 1200px) {
    .page-container[b-5pd1xaf4dd] { margin-left: 256px; }
}

/* Desktop: expanded sidebar (288px) vs collapsed (80px) */
@media (min-width: 1201px) {
    .page-container.sidebar-expanded[b-5pd1xaf4dd] { margin-left: 288px; }
    .page-container.sidebar-collapsed[b-5pd1xaf4dd] { margin-left: 80px; }

    /* Ensure table wraps properly on smaller desktops */
    @media (max-width: 1600px) {
        .page-container[b-5pd1xaf4dd] { overflow-x: auto; }
    }
}

/* Large screens: full width with comfortable padding */
@media (min-width: 1920px) {
    .page-container.sidebar-expanded[b-5pd1xaf4dd] { margin-left: 320px; max-width: calc(100% - 360px); }
    .page-container.sidebar-collapsed[b-5pd1xaf4dd] { margin-left: 100px; max-width: calc(100% - 140px); }
}

/* Ensure table is responsive */
@media (max-width: 768px) {
    [b-5pd1xaf4dd] .data-table { font-size: var(--font-size-xs); }
    [b-5pd1xaf4dd] .data-table th, [b-5pd1xaf4dd] .data-table td { padding: var(--spacing-2) var(--spacing-3); }
}

/* Fix layout when sidebar transitions */
.page-container[b-5pd1xaf4dd] {
    transition: margin-left 200ms ease;
}

/* Ensure table doesn't overflow on mobile */
[b-5pd1xaf4dd] .table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* Mobile card view adjustments */
@media (max-width: 640px) {
    [b-5pd1xaf4dd] .mobile-card-grid {
        grid-template-columns: 1fr;
        gap: var(--spacing-3);
    }
    
    [b-5pd1xaf4dd] .mobile-card-header {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--spacing-2);
    }
}
/* /Pages/Principal/TeachingPlan/Index.razor.rz.scp.css */
/* Index.razor.css — Principal Teaching Plan Overview */

.compliance-bar-wrap[b-500dvs0yc4] {
    width: 6rem;
    height: 0.4rem;
    background: var(--color-neutral-200, #e5e7eb);
    border-radius: 9999px;
    overflow: hidden;
}

.compliance-bar[b-500dvs0yc4] {
    height: 100%;
    border-radius: 9999px;
    transition: width 0.4s ease;
}

.bar-success[b-500dvs0yc4] {
    background: var(--color-success-500, #22c55e);
}

.bar-warning[b-500dvs0yc4] {
    background: var(--color-warning-500, #f59e0b);
}

.bar-danger[b-500dvs0yc4] {
    background: var(--color-danger-500, #ef4444);
}

.topic-tag[b-500dvs0yc4] {
    display: inline-block;
    background: var(--color-primary-50, #eff6ff);
    color: var(--color-primary-700, #1d4ed8);
    padding: 0.15rem 0.5rem;
    border-radius: 0.375rem;
    font-size: 0.78rem;
    font-weight: 500;
    max-width: 14rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: middle;
}
/* /Pages/Principal/Timetable/Constraints.razor.rz.scp.css */
.page-wrapper[b-hdv3tvisho] {
    min-height: calc(100vh - 60px);
}

/* ── Filter Chips ── */
.ctab-chip[b-hdv3tvisho] {
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    border: 1px solid var(--color-neutral-300, #d1d5db);
    cursor: pointer;
    background: #fff;
    color: var(--color-neutral-600, #4b5563);
    transition: background .12s, color .12s;
}
.ctab-chip.active[b-hdv3tvisho] {
    background: var(--color-teal-500, #14b8a6);
    color: #fff;
    border-color: var(--color-teal-500, #14b8a6);
}
.ctab-chip-red[b-hdv3tvisho] { border-color: #fca5a5; color: #b91c1c; background: #fef2f2; }
.ctab-chip-red.active-red[b-hdv3tvisho] { background: #dc2626; color: #fff; border-color: #dc2626; }
.ctab-chip-gray[b-hdv3tvisho] { border-color: #d1d5db; color: #6b7280; }
.ctab-chip-gray.active-gray[b-hdv3tvisho] { background: #6b7280; color: #fff; border-color: #6b7280; }

/* ── Column header ── */
.ctab-col-header[b-hdv3tvisho] {
    display: grid;
    grid-template-columns: 220px 80px 90px 110px 1fr 90px;
    gap: 10px;
    align-items: center;
    padding: 7px 14px;
    background: var(--color-neutral-50, #f9fafb);
    border-bottom: 2px solid var(--color-neutral-200, #e5e7eb);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--color-neutral-400, #9ca3af);
}
.ctab-col-teacher[b-hdv3tvisho] { }
.ctab-col-num[b-hdv3tvisho] { text-align: center; }
.ctab-col-type[b-hdv3tvisho] { }
.ctab-col-count[b-hdv3tvisho] { text-align: center; }
.ctab-col-action[b-hdv3tvisho] { text-align: center; }

/* ── Row ── */
.ctab-body[b-hdv3tvisho] { background: #fff; }
.ctab-row[b-hdv3tvisho] {
    display: grid;
    grid-template-columns: 220px 80px 90px 110px 1fr 90px;
    gap: 10px;
    align-items: center;
    padding: 10px 14px;
    border-bottom: 1px solid var(--color-neutral-100, #f3f4f6);
    cursor: pointer;
    transition: background .12s;
}
.ctab-row:hover[b-hdv3tvisho] { background: var(--color-neutral-50, #f9fafb); }
.ctab-row.ctab-row-expanded[b-hdv3tvisho] { background: var(--color-teal-50); border-bottom-color: var(--color-teal-200); }

/* Teacher cell */
.ctab-teacher-cell[b-hdv3tvisho] {
    display: flex;
    align-items: center;
    gap: 8px;
}
.ctab-avatar[b-hdv3tvisho] {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--color-teal-100);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 700;
    color: var(--color-teal-700);
    flex-shrink: 0;
}
.ctab-name[b-hdv3tvisho] { font-size: 13px; font-weight: 600; color: #1f2937; }
.ctab-dept[b-hdv3tvisho] { font-size: 11px; color: #9ca3af; margin-top: 1px; }

/* Capacity inputs */
.ctab-cap-input[b-hdv3tvisho] {
    width: 64px;
    padding: 4px 8px;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 600;
    text-align: center;
    display: block;
    margin: 0 auto;
}
.ctab-cap-input:focus[b-hdv3tvisho] {
    outline: none;
    border-color: var(--color-teal-500);
    box-shadow: 0 0 0 3px rgba(20,184,166,.1);
}

/* Employment type select */
.ctab-type-sel[b-hdv3tvisho] {
    font-size: 12px;
    padding: 4px 6px;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    width: 100%;
    cursor: pointer;
}
.ctab-type-sel:focus[b-hdv3tvisho] { outline: none; border-color: var(--color-teal-500); }

/* Constraint count badge */
.ctab-unavail-badge[b-hdv3tvisho] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
}
.ctab-badge-red[b-hdv3tvisho] { background: #fee2e2; color: #b91c1c; }
.ctab-badge-gray[b-hdv3tvisho] { background: #f3f4f6; color: #6b7280; }

/* Slots / Hide button */
.ctab-action-cell[b-hdv3tvisho] { text-align: center; }
.ctab-slots-btn[b-hdv3tvisho] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    background: #fff;
    font-size: 12px;
    font-weight: 600;
    color: #374151;
    cursor: pointer;
    transition: background .12s, border-color .12s;
}
.ctab-slots-btn:hover[b-hdv3tvisho] { background: #f3f4f6; }
.ctab-slots-btn.ctab-slots-active[b-hdv3tvisho] {
    background: var(--color-teal-700);
    border-color: var(--color-teal-700);
    color: #fff;
}

/* ── Expandable detail ── */
.ctab-expand[b-hdv3tvisho] {
    background: var(--color-teal-50);
    border-bottom: 1px solid var(--color-teal-200);
    padding: 14px 20px 18px;
}
.ctab-expand-header[b-hdv3tvisho] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
    flex-wrap: wrap;
}
.ctab-expand-icon[b-hdv3tvisho] { color: var(--color-teal-700); font-size: 13px; }
.ctab-expand-title[b-hdv3tvisho] { font-size: 13px; font-weight: 700; color: var(--color-teal-700); }
.ctab-expand-hint[b-hdv3tvisho] {
    font-size: 11px;
    color: #6b7280;
    margin-left: 4px;
}
.ctab-expand-actions[b-hdv3tvisho] { margin-left: auto; display: flex; gap: 6px; }
.ctab-cell-off-ex[b-hdv3tvisho] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #fee2e2;
    border: 1px solid #fca5a5;
    color: #b91c1c;
    border-radius: 3px;
    padding: 1px 5px;
    font-size: 10px;
    font-weight: 600;
}

/* Period × Day grid */
.ctab-grid[b-hdv3tvisho] {
    display: grid;
    grid-template-columns: 40px repeat(6, 1fr);
    gap: 3px;
    max-width: 580px;
}
.ctab-grid-corner[b-hdv3tvisho] { }
.ctab-grid-th[b-hdv3tvisho] {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    color: #6b7280;
    text-align: center;
    padding: 3px 0;
}
.ctab-grid-period[b-hdv3tvisho] {
    font-size: 11px;
    font-weight: 600;
    text-align: right;
    padding: 3px 6px;
    color: #9ca3af;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}
.ctab-grid-cell[b-hdv3tvisho] {
    width: 36px;
    height: 28px;
    border-radius: 4px;
    border: 1px solid #e5e7eb;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 10px;
    font-weight: 700;
    transition: background .1s, border-color .1s;
    margin: 0 auto;
}
.ctab-grid-cell:hover[b-hdv3tvisho] { background: #f3f4f6; }
.ctab-grid-cell.ctab-cell-off[b-hdv3tvisho] {
    background: #fee2e2;
    border-color: #fca5a5;
    color: #b91c1c;
}
.ctab-grid-cell.ctab-cell-off:hover[b-hdv3tvisho] { background: #fecaca; }

/* Special (non-grid) constraints list */
.ctab-special-list[b-hdv3tvisho] {
    margin-top: 12px;
    border-top: 1px solid var(--color-teal-200);
    padding-top: 8px;
}
.ctab-special-title[b-hdv3tvisho] {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: #6b7280;
    margin-bottom: 6px;
}
.ctab-special-row[b-hdv3tvisho] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 0;
    font-size: 12px;
    border-bottom: 1px solid #f3f4f6;
}
.ctab-type-pill[b-hdv3tvisho] {
    display: inline-flex;
    padding: 2px 7px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 700;
}
.ctab-pill-unavailable[b-hdv3tvisho] { background: #fee2e2; color: #b91c1c; }
.ctab-pill-preferred[b-hdv3tvisho] { background: #d1fae5; color: #065f46; }
.ctab-pill-avoid[b-hdv3tvisho] { background: #fef3c7; color: #92400e; }
.ctab-special-info[b-hdv3tvisho] { color: #374151; }
.ctab-reason[b-hdv3tvisho] { font-style: italic; color: #9ca3af; font-size: 11px; }
.ctab-del-btn[b-hdv3tvisho] {
    margin-left: auto;
    color: #f87171;
    background: none;
    border: none;
    cursor: pointer;
    padding: 2px 4px;
    border-radius: 3px;
    font-size: 11px;
}
.ctab-del-btn:hover[b-hdv3tvisho] { background: #fee2e2; }

/* Responsive: collapse table on small screens */
@media (max-width: 700px) {
    .ctab-col-header[b-hdv3tvisho] { display: none; }
    .ctab-row[b-hdv3tvisho] {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto auto;
    }
    .ctab-teacher-cell[b-hdv3tvisho] { grid-column: 1 / -1; }
    .ctab-grid[b-hdv3tvisho] { grid-template-columns: 34px repeat(6, 1fr); }
    .ctab-grid-cell[b-hdv3tvisho] { width: 28px; height: 24px; }
}
/* /Pages/Principal/Timetable/Overview.razor.rz.scp.css */
/* Overview.razor.css — Timetable Overview page */

/* ─── Header ──────────────────────────────────────────────── */
.ov-header[b-7zr130jk8l] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-bottom: 1.25rem;
}

.ov-title[b-7zr130jk8l] {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--color-neutral-900);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
}

.ov-subtitle[b-7zr130jk8l] {
    font-size: 0.78rem;
    color: var(--color-neutral-400);
    margin: 0.15rem 0 0;
}

.ov-header-actions[b-7zr130jk8l] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

/* ─── Action buttons ──────────────────────────────────────── */
.ov-btn-secondary[b-7zr130jk8l] {
    padding: 0.45rem 0.9rem;
    border: 1px solid var(--color-neutral-200);
    border-radius: 6px;
    background: var(--color-neutral-0, #fff);
    color: var(--color-neutral-600);
    font-size: 0.82rem;
    font-weight: 500;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    text-decoration: none;
}

.ov-btn-warning[b-7zr130jk8l] {
    padding: 0.45rem 0.9rem;
    border-radius: 6px;
    background: #fef3c7;
    color: #92400e;
    border: 1px solid #fcd34d;
    font-size: 0.82rem;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    text-decoration: none;
}

.ov-btn-success[b-7zr130jk8l] {
    padding: 0.45rem 0.9rem;
    border-radius: 6px;
    background: var(--color-primary-500, var(--color-teal-600));
    color: #fff;
    border: none;
    font-size: 0.82rem;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    text-decoration: none;
}

/* ─── Stats bar ───────────────────────────────────────────── */
.ov-stats-bar[b-7zr130jk8l] {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1.25rem;
}

.ov-stat[b-7zr130jk8l] {
    flex: 1;
    min-width: 110px;
    padding: 0.75rem 1rem;
    border-radius: 8px;
    border-left: 4px solid transparent;
    background: var(--color-neutral-0, #fff);
    box-shadow: 0 1px 3px rgba(0,0,0,0.07);
}

.ov-stat-val[b-7zr130jk8l] {
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1;
}

.ov-stat-label[b-7zr130jk8l] {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-neutral-400);
    margin-top: 0.2rem;
}

.ov-stat-teal[b-7zr130jk8l]   { border-left-color: var(--color-teal-600); }
.ov-stat-teal .ov-stat-val[b-7zr130jk8l] { color: var(--color-teal-600); }

.ov-stat-green[b-7zr130jk8l]  { border-left-color: #16a34a; }
.ov-stat-green .ov-stat-val[b-7zr130jk8l] { color: #16a34a; }

.ov-stat-orange[b-7zr130jk8l] { border-left-color: #d97706; }
.ov-stat-orange .ov-stat-val[b-7zr130jk8l] { color: #d97706; }

.ov-stat-red[b-7zr130jk8l]    { border-left-color: #dc2626; }
.ov-stat-red .ov-stat-val[b-7zr130jk8l] { color: #dc2626; }

.ov-stat-gray[b-7zr130jk8l]   { border-left-color: #9ca3af; }
.ov-stat-gray .ov-stat-val[b-7zr130jk8l] { color: #6b7280; }

/* ─── Loading ─────────────────────────────────────────────── */
.ov-loading[b-7zr130jk8l] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 300px;
}

/* ─── Body layout ─────────────────────────────────────────── */
.ov-body[b-7zr130jk8l] {
    display: flex;
    gap: 1.25rem;
    align-items: flex-start;
}

/* ─── Class tree (left panel) ─────────────────────────────── */
.ov-tree[b-7zr130jk8l] {
    width: 210px;
    flex-shrink: 0;
    background: var(--color-neutral-0, #fff);
    border: 1px solid var(--color-neutral-100);
    border-radius: 10px;
    padding: 0.75rem 0;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
    max-height: calc(100vh - 260px);
    overflow-y: auto;
}

.ov-tree-header[b-7zr130jk8l] {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-neutral-400);
    padding: 0 0.85rem 0.5rem;
    border-bottom: 1px solid var(--color-neutral-100);
    margin-bottom: 0.25rem;
}

.ov-tree-grade[b-7zr130jk8l] {
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--color-neutral-500);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 0.55rem 0.85rem 0.2rem;
}

.ov-tree-item[b-7zr130jk8l] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.38rem 0.85rem;
    border: none;
    background: transparent;
    cursor: pointer;
    font-size: 0.8rem;
    color: var(--color-neutral-700);
    text-align: left;
    transition: background 0.12s;
    border-radius: 0;
}

.ov-tree-item:hover[b-7zr130jk8l] { background: var(--color-neutral-50); }
.ov-tree-item.active[b-7zr130jk8l] { background: #e6fffa; color: var(--color-teal-600); font-weight: 600; }

.ov-tree-dot[b-7zr130jk8l] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.ov-dot-green[b-7zr130jk8l]  { background: #16a34a; }
.ov-dot-orange[b-7zr130jk8l] { background: #d97706; }
.ov-dot-red[b-7zr130jk8l]    { background: #dc2626; }
.ov-dot-gray[b-7zr130jk8l]   { background: #9ca3af; }

.ov-tree-badge[b-7zr130jk8l] {
    margin-left: auto;
    font-size: 0.65rem;
    font-weight: 700;
    padding: 0.1rem 0.35rem;
    border-radius: 10px;
}

.ov-tbadge-green[b-7zr130jk8l]  { background: #dcfce7; color: #166534; }
.ov-tbadge-red[b-7zr130jk8l]    { background: #fee2e2; color: #991b1b; }
.ov-tbadge-orange[b-7zr130jk8l] { background: #fef3c7; color: #92400e; }
.ov-tbadge-gray[b-7zr130jk8l]   { background: var(--color-neutral-100); color: var(--color-neutral-400); }

/* ─── Main area ───────────────────────────────────────────── */
.ov-main[b-7zr130jk8l] {
    flex: 1;
    min-width: 0;
}

.ov-card[b-7zr130jk8l] {
    background: var(--color-neutral-0, #fff);
    border: 1px solid var(--color-neutral-100);
    border-radius: 10px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}

.ov-mb[b-7zr130jk8l] { margin-bottom: 1.25rem; }

.ov-card-header[b-7zr130jk8l] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.85rem 1.1rem;
    border-bottom: 1px solid var(--color-neutral-100);
    flex-wrap: wrap;
    gap: 0.5rem;
}

.ov-card-title[b-7zr130jk8l] {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--color-neutral-800);
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.ov-filter-row[b-7zr130jk8l] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.ov-sel[b-7zr130jk8l] {
    padding: 0.3rem 0.6rem;
    border: 1px solid var(--color-neutral-200);
    border-radius: 6px;
    font-size: 0.8rem;
    color: var(--color-neutral-700);
    background: var(--color-neutral-0, #fff);
}

/* ─── Table ───────────────────────────────────────────────── */
.ov-table-wrap[b-7zr130jk8l] { overflow-x: auto; }

.ov-table[b-7zr130jk8l] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.82rem;
}

.ov-table th[b-7zr130jk8l] {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-neutral-400);
    padding: 0.55rem 0.9rem;
    text-align: left;
    border-bottom: 1px solid var(--color-neutral-100);
    background: var(--color-neutral-50);
}

.ov-table td[b-7zr130jk8l] { padding: 0.6rem 0.9rem; border-bottom: 1px solid var(--color-neutral-50); }

.ov-row-red[b-7zr130jk8l]    { background: #fff5f5; }
.ov-row-orange[b-7zr130jk8l] { background: #fffbeb; }
.ov-row-green[b-7zr130jk8l]  { background: #f0fdf4; }

.ov-td-bold[b-7zr130jk8l]  { font-weight: 600; color: var(--color-neutral-800); }
.ov-td-muted[b-7zr130jk8l] { color: var(--color-neutral-400); font-size: 0.78rem; }
.ov-td-empty[b-7zr130jk8l] { text-align: center; color: var(--color-neutral-400); padding: 2rem; }

/* Progress bar */
.ov-prog-wrap[b-7zr130jk8l] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.ov-prog-bar[b-7zr130jk8l] {
    width: 100px;
    height: 6px;
    background: var(--color-neutral-100);
    border-radius: 99px;
    overflow: hidden;
    flex-shrink: 0;
}

.ov-prog-fill[b-7zr130jk8l] {
    height: 100%;
    border-radius: 99px;
    transition: width 0.3s ease;
}

.ov-prog-green[b-7zr130jk8l]  { background: #16a34a; }
.ov-prog-orange[b-7zr130jk8l] { background: #d97706; }
.ov-prog-red[b-7zr130jk8l]    { background: #dc2626; }
.ov-prog-gray[b-7zr130jk8l]   { background: #9ca3af; }

.ov-prog-text[b-7zr130jk8l] { font-size: 0.78rem; white-space: nowrap; }

/* Badges */
.ov-badge[b-7zr130jk8l] {
    display: inline-block;
    min-width: 1.5rem;
    text-align: center;
    padding: 0.1rem 0.4rem;
    border-radius: 99px;
    font-size: 0.72rem;
    font-weight: 700;
}

.ov-badge-red[b-7zr130jk8l]   { background: #fee2e2; color: #991b1b; }
.ov-badge-green[b-7zr130jk8l] { background: #dcfce7; color: #166534; }

/* Status chips */
.ov-status[b-7zr130jk8l] {
    font-size: 0.72rem;
    font-weight: 600;
    padding: 0.15rem 0.55rem;
    border-radius: 99px;
    white-space: nowrap;
}

.ov-status-green[b-7zr130jk8l]  { background: #dcfce7; color: #166534; }
.ov-status-red[b-7zr130jk8l]    { background: #fee2e2; color: #991b1b; }
.ov-status-orange[b-7zr130jk8l] { background: #fef3c7; color: #92400e; }
.ov-status-gray[b-7zr130jk8l]   { background: var(--color-neutral-100); color: var(--color-neutral-500); }

/* Row actions */
.ov-actions[b-7zr130jk8l] {
    display: flex;
    gap: 0.35rem;
    flex-wrap: wrap;
}

.ov-btn-sm[b-7zr130jk8l] {
    font-size: 0.72rem;
    font-weight: 600;
    padding: 0.25rem 0.6rem;
    border-radius: 5px;
    text-decoration: none;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
}

.ov-btn-sm-red[b-7zr130jk8l]   { background: #fee2e2; color: #991b1b; }
.ov-btn-sm-teal[b-7zr130jk8l]  { background: #e6fffa; color: var(--color-teal-600); }
.ov-btn-sm-gray[b-7zr130jk8l]  { background: var(--color-neutral-100); color: var(--color-neutral-600); }
.ov-btn-sm-green[b-7zr130jk8l] { background: #dcfce7; color: #166534; }

/* ─── Workload quick strip ─────────────────────────────────── */
.ov-wl-strip[b-7zr130jk8l] {
    background: var(--color-neutral-0, #fff);
    border: 1px solid var(--color-neutral-100);
    border-radius: 10px;
    padding: 1rem 1.1rem;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}

.ov-wl-title[b-7zr130jk8l] {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-neutral-800);
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-bottom: 0.5rem;
}

.ov-wl-link[b-7zr130jk8l] {
    margin-left: auto;
    font-size: 0.78rem;
    color: var(--color-teal-600);
    text-decoration: none;
    font-weight: 500;
}

.ov-wl-link:hover[b-7zr130jk8l] { text-decoration: underline; }

.ov-wl-hint[b-7zr130jk8l] {
    font-size: 0.8rem;
    color: var(--color-neutral-500);
    margin: 0;
}

/* ─── Responsive ──────────────────────────────────────────── */
@media (max-width: 768px) {
    .ov-body[b-7zr130jk8l] {
        flex-direction: column;
    }

    .ov-tree[b-7zr130jk8l] {
        width: 100%;
        max-height: none;
        display: flex;
        flex-wrap: wrap;
        gap: 0.25rem;
        padding: 0.5rem;
        overflow-x: auto;
    }

    .ov-tree-header[b-7zr130jk8l]  { display: none; }
    .ov-tree-grade[b-7zr130jk8l]   { display: none; }
    .ov-tree-item[b-7zr130jk8l]    { width: auto; border-radius: 6px; padding: 0.3rem 0.6rem; }
    .ov-tree-badge[b-7zr130jk8l]   { display: none; }

    .ov-stats-bar[b-7zr130jk8l]    { gap: 0.5rem; }
    .ov-stat[b-7zr130jk8l]         { min-width: 80px; padding: 0.5rem; }
    .ov-stat-val[b-7zr130jk8l]     { font-size: 1.35rem; }

    .ov-prog-bar[b-7zr130jk8l]     { width: 60px; }
}
/* /Pages/Principal/Timetable/Publish.razor.rz.scp.css */
/* Publish.razor.css — minimal scoped styles for Publish timetable page */

/* Smooth checkbox interactions */
input[type="checkbox"][b-wopa34yz3d] {
    cursor: pointer;
}
/* /Pages/Principal/Timetable/SubjectRequirements.razor.rz.scp.css */
.sr-class-btn[b-3x60dd7bnt] {
    transition: all 0.15s ease;
}
/* /Pages/Principal/Timetable/SubjectRules.razor.rz.scp.css */
/* ── Two-column layout ── */
.sr-layout[b-kwokwtk80z] {
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: 0;
    min-height: calc(100vh - 120px);
}

/* ── Subject list panel ── */
.sr-list-panel[b-kwokwtk80z] {
    border-right: 1px solid #e5e7eb;
    background: #fff;
}
.sr-list-header[b-kwokwtk80z] {
    padding: 10px 12px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: #9ca3af;
    border-bottom: 1px solid #f3f4f6;
}
.sr-list-item[b-kwokwtk80z] {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 11px 14px;
    cursor: pointer;
    border-bottom: 1px solid #f3f4f6;
    font-size: 13px;
    font-weight: 500;
    color: #374151;
    background: none;
    border-left: none;
    border-right: none;
    border-top: none;
    text-align: left;
    transition: background .12s;
}
.sr-list-item:hover[b-kwokwtk80z] { background: #f9fafb; }
.sr-list-item.active[b-kwokwtk80z] {
    background: var(--color-teal-50);
    color: var(--color-teal-700);
    border-right: 3px solid var(--color-teal-500);
}
.sr-dot[b-kwokwtk80z] {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}

/* ── Rules editor panel ── */
.sr-editor[b-kwokwtk80z] {
    padding: 18px 22px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    background: #f9fafb;
}
.sr-editor-title[b-kwokwtk80z] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 15px;
    font-weight: 700;
    color: #1f2937;
}
.sr-editor-empty[b-kwokwtk80z] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 1;
    padding: 60px 20px;
    text-align: center;
}

/* ── Rule card ── */
.sr-card[b-kwokwtk80z] {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 14px 16px;
}
.sr-card-header[b-kwokwtk80z] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}
.sr-card-title[b-kwokwtk80z] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 700;
    color: #1f2937;
}
.sr-card-icon[b-kwokwtk80z] { color: var(--color-teal-500); }

/* ── Toggle switch ── */
.sr-toggle[b-kwokwtk80z] {
    width: 36px;
    height: 20px;
    background: #d1d5db;
    border-radius: 10px;
    position: relative;
    cursor: pointer;
    flex-shrink: 0;
    border: none;
    transition: background .2s;
}
.sr-toggle[b-kwokwtk80z]::after {
    content: '';
    position: absolute;
    width: 16px;
    height: 16px;
    background: #fff;
    border-radius: 50%;
    top: 2px;
    left: 2px;
    transition: left .2s;
    box-shadow: 0 1px 3px rgba(0,0,0,.2);
}
.sr-toggle.on[b-kwokwtk80z] { background: var(--color-teal-500); }
.sr-toggle.on[b-kwokwtk80z]::after { left: 18px; }

/* ── Double period grid ── */
.sr-double-grid[b-kwokwtk80z] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

/* ── Field label / select ── */
.sr-field-label[b-kwokwtk80z] {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: #4b5563;
    margin-bottom: 5px;
}
.sr-select[b-kwokwtk80z] {
    width: 100%;
    padding: 5px 8px;
    border: 1px solid #d1d5db;
    border-radius: 5px;
    font-size: 13px;
}
.sr-select:focus[b-kwokwtk80z] { outline: none; border-color: var(--color-teal-500); }

/* ── Day chips ── */
.sr-day-chips[b-kwokwtk80z] { display: flex; gap: 5px; flex-wrap: wrap; }
.sr-day-chip[b-kwokwtk80z] {
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 600;
    border: 1px solid #d1d5db;
    cursor: pointer;
    background: #fff;
    color: #4b5563;
    transition: background .12s, color .12s;
}
.sr-day-chip:hover[b-kwokwtk80z] { background: #f3f4f6; }
.sr-day-chip.on[b-kwokwtk80z] { background: var(--color-teal-500); color: #fff; border-color: var(--color-teal-500); }

/* ── Period chips ── */
.sr-period-chips[b-kwokwtk80z] { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 6px; }
.sr-period-chip[b-kwokwtk80z] {
    min-width: 36px;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
    border: 1px solid #d1d5db;
    cursor: pointer;
    background: #fff;
    color: #4b5563;
    text-align: center;
    transition: background .1s;
    user-select: none;
}
.sr-period-chip.on[b-kwokwtk80z] { background: var(--color-teal-100); color: var(--color-teal-700); border-color: var(--color-teal-300); }
.sr-period-chip.off[b-kwokwtk80z] { background: #fee2e2; color: #b91c1c; border-color: #fca5a5; }

/* ── Rule row (advanced) ── */
.sr-rule-row[b-kwokwtk80z] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 0;
    border-bottom: 1px solid #f3f4f6;
    font-size: 13px;
    color: #374151;
}
.sr-rule-row:last-child[b-kwokwtk80z] { border-bottom: none; }
.sr-inline-num[b-kwokwtk80z] {
    width: 50px;
    display: inline-block;
    padding: 3px 6px;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    font-size: 13px;
    text-align: center;
    margin: 0 2px;
}

/* ── Hints ── */
.sr-hint[b-kwokwtk80z] { font-size: 11px; color: #6b7280; margin-bottom: 8px; }
.sr-hint-sm[b-kwokwtk80z] { margin-top: 6px; margin-bottom: 0; }
.sr-legend-green[b-kwokwtk80z] { color: var(--color-teal-700); font-weight: 600; }
.sr-legend-red[b-kwokwtk80z] { color: #b91c1c; font-weight: 600; }

/* ── API pending notice ── */
.sr-notice[b-kwokwtk80z] {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    background: #fefce8;
    border: 1px solid #fde68a;
    border-radius: 6px;
    padding: 10px 14px;
    font-size: 12px;
    color: #78350f;
}
.sr-notice i[b-kwokwtk80z] { color: #d97706; margin-top: 1px; flex-shrink: 0; }

/* ── Responsive ── */
@media (max-width: 640px) {
    .sr-layout[b-kwokwtk80z] {
        grid-template-columns: 1fr;
    }
    .sr-list-panel[b-kwokwtk80z] {
        border-right: none;
        border-bottom: 1px solid #e5e7eb;
        display: flex;
        flex-wrap: wrap;
        gap: 0;
        padding: 4px;
    }
    .sr-list-item[b-kwokwtk80z] {
        width: auto;
        flex: none;
        border: 1px solid #e5e7eb;
        border-radius: 6px;
        padding: 6px 10px;
        margin: 2px;
        font-size: 12px;
    }
    .sr-list-header[b-kwokwtk80z] { display: none; }
}
/* /Pages/Principal/Timetable/Substitutions.razor.rz.scp.css */
/* Substitutions page — relies on Tailwind utility classes; this paired file
   exists so CSS isolation is active for any future scoped selectors. */
/* /Pages/Principal/Timetable/Wizard.razor.rz.scp.css */
/* ─────────────────────────────────────────────────────────────────────────────
   Timetable Wizard — Wizard.razor.css
   Design tokens from design-tokens.css  |  Mobile-first (320px → 768px → 1280px)
───────────────────────────────────────────────────────────────────────────── */

/* ── Page shell ──────────────────────────────────────────────────────────── */
.wizard-page[b-65c3n80raj] {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background: var(--color-gray-50, #f9fafb);
}

/* ── Header ──────────────────────────────────────────────────────────────── */
.wizard-header[b-65c3n80raj] {
    background: #fff;
    border-bottom: 1px solid var(--color-gray-200, #e5e7eb);
    padding: 1rem;
    position: sticky;
    top: 0;
    z-index: 10;
}

.wizard-header__title-row[b-65c3n80raj] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.wizard-header__back[b-65c3n80raj] {
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 0.5rem;
    border: 1px solid var(--color-gray-200, #e5e7eb);
    background: #fff;
    color: var(--color-gray-600, #4b5563);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.wizard-header__back:hover[b-65c3n80raj] { background: var(--color-gray-50, #f9fafb); }

.wizard-header__title[b-65c3n80raj] {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--color-gray-900, #111827);
    margin: 0;
}

.wizard-header__subtitle[b-65c3n80raj] {
    font-size: 0.75rem;
    color: var(--color-gray-500, #6b7280);
    margin: 0;
}

/* ── Step progress bar ───────────────────────────────────────────────────── */
.wizard-steps[b-65c3n80raj] {
    display: flex;
    align-items: center;
    gap: 0;
    overflow-x: auto;
    padding-bottom: 0.25rem;
}

.wizard-step[b-65c3n80raj] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    flex-shrink: 0;
}

.wizard-step__dot[b-65c3n80raj] {
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    border: 2px solid var(--color-gray-300, #d1d5db);
    background: #fff;
    color: var(--color-gray-400, #9ca3af);
    font-size: 0.75rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.wizard-step--active .wizard-step__dot[b-65c3n80raj] {
    border-color: var(--color-primary, #4A9B8E);
    background: var(--color-primary, #4A9B8E);
    color: #fff;
}

.wizard-step--done .wizard-step__dot[b-65c3n80raj] {
    border-color: var(--color-success-main, #22C55E);
    background: var(--color-success-main, #22C55E);
    color: #fff;
}

.wizard-step__label[b-65c3n80raj] {
    font-size: 0.65rem;
    color: var(--color-gray-500, #6b7280);
    white-space: nowrap;
}
.wizard-step--active .wizard-step__label[b-65c3n80raj] { color: var(--color-primary, #4A9B8E); font-weight: 600; }
.wizard-step--done .wizard-step__label[b-65c3n80raj]   { color: var(--color-success-main, #22C55E); }

.wizard-step__line[b-65c3n80raj] {
    flex: 1;
    height: 2px;
    background: var(--color-gray-200, #e5e7eb);
    margin: 0 0.25rem;
    align-self: flex-start;
    margin-top: 1rem;
    min-width: 1.5rem;
}

/* ── Body ────────────────────────────────────────────────────────────────── */
.wizard-body[b-65c3n80raj] {
    flex: 1;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* ── Loading state ───────────────────────────────────────────────────────── */
.wizard-loading[b-65c3n80raj] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    padding: 4rem 1rem;
    color: var(--color-gray-500, #6b7280);
}
.wizard-loading__icon[b-65c3n80raj] { font-size: 2.5rem; color: var(--color-primary, #4A9B8E); }
.wizard-loading__text[b-65c3n80raj] { font-size: 0.875rem; }

/* ── Generating progress panel ───────────────────────────────────────────── */
.wiz-gen-panel[b-65c3n80raj] {
    background: var(--color-neutral-0, #fff);
    border: 1px solid var(--color-neutral-100);
    border-radius: 10px;
    padding: 1.5rem;
    margin: 1rem 0;
}

.wiz-gen-header[b-65c3n80raj] {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.wiz-gen-icon[b-65c3n80raj] {
    font-size: 2rem;
    color: var(--color-teal-600);
    animation: wiz-spin-b-65c3n80raj 1.5s linear infinite;
}

@keyframes wiz-spin-b-65c3n80raj {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

.wiz-gen-title[b-65c3n80raj] {
    font-size: 1rem;
    font-weight: 700;
    color: var(--color-neutral-800);
}

.wiz-gen-sub[b-65c3n80raj] {
    font-size: 0.8rem;
    color: var(--color-neutral-500);
    margin-top: 0.1rem;
}

.wiz-gen-list[b-65c3n80raj] {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
}

.wiz-gen-row[b-65c3n80raj] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 0.75rem;
    border-radius: 7px;
    background: var(--color-neutral-50);
    border-left: 3px solid #9ca3af;
}

.wiz-gen-row--running[b-65c3n80raj] { border-left-color: var(--color-teal-600); background: var(--color-teal-50); }
.wiz-gen-row--done[b-65c3n80raj]    { border-left-color: #16a34a; background: #f0fdf4; }
.wiz-gen-row--failed[b-65c3n80raj]  { border-left-color: #dc2626; background: #fff5f5; }
.wiz-gen-row--queued[b-65c3n80raj]  { border-left-color: #9ca3af; opacity: 0.7; }

.wiz-gen-name[b-65c3n80raj] {
    width: 160px;
    flex-shrink: 0;
    font-size: 0.83rem;
    font-weight: 600;
    color: var(--color-neutral-700);
}

.wiz-gen-bar-wrap[b-65c3n80raj] {
    flex: 1;
    height: 8px;
    background: var(--color-neutral-100);
    border-radius: 99px;
    overflow: hidden;
}

.wiz-gen-bar[b-65c3n80raj] {
    height: 100%;
    border-radius: 99px;
}

.wiz-gen-bar--done[b-65c3n80raj]    { background: #16a34a; }
.wiz-gen-bar--failed[b-65c3n80raj]  { background: #dc2626; }
.wiz-gen-bar--queued[b-65c3n80raj]  { background: #d1d5db; }
.wiz-gen-bar--anim[b-65c3n80raj] {
    background: var(--color-teal-600);
    width: 60%;
    animation: wiz-slide-b-65c3n80raj 1.2s ease-in-out infinite alternate;
}

@keyframes wiz-slide-b-65c3n80raj {
    from { margin-left: 0; width: 40%; }
    to   { margin-left: 20%; width: 60%; }
}

.wiz-gen-status-chip[b-65c3n80raj] {
    font-size: 0.7rem;
    font-weight: 700;
    padding: 0.15rem 0.55rem;
    border-radius: 99px;
    white-space: nowrap;
}

.wiz-gen-chip--running[b-65c3n80raj]  { background: #e6fffa; color: var(--color-teal-600); }
.wiz-gen-chip--done[b-65c3n80raj]     { background: #dcfce7; color: #166534; }
.wiz-gen-chip--failed[b-65c3n80raj]   { background: #fee2e2; color: #991b1b; }
.wiz-gen-chip--queued[b-65c3n80raj]   { background: var(--color-neutral-100); color: var(--color-neutral-500); }

/* ── Alert ───────────────────────────────────────────────────────────────── */
.alert[b-65c3n80raj] {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 1rem;
    border-radius: 0.5rem;
    border: 1px solid transparent;
}

.alert--danger[b-65c3n80raj]  { background: var(--color-danger-50, #fef2f2); border-color: var(--color-danger-200, #fecaca); color: var(--color-danger-900, #7f1d1d); }
.alert--warning[b-65c3n80raj] { background: var(--color-warning-50, #fffbeb); border-color: var(--color-warning-200, #fde68a); color: #78350f; }
.alert--compact[b-65c3n80raj] { padding: 0.625rem 0.875rem; font-size: 0.875rem; }

.alert__icon[b-65c3n80raj] { flex-shrink: 0; margin-top: 0.125rem; font-size: 1.1rem; }
.alert__sub[b-65c3n80raj]  { font-size: 0.8rem; margin: 0.25rem 0 0; opacity: 0.85; }

.alert__fix-link[b-65c3n80raj] {
    margin-left: auto;
    flex-shrink: 0;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--color-primary, #4A9B8E);
    text-decoration: none;
    white-space: nowrap;
    align-self: center;
}
.alert__fix-link:hover[b-65c3n80raj] { text-decoration: underline; }

/* ── Info strip (school timing summary) ─────────────────────────────────── */
.info-strip[b-65c3n80raj] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    background: var(--color-teal-50, var(--color-teal-50));
    border: 1px solid var(--color-teal-200, #99f6e4);
    border-radius: 0.5rem;
    align-items: center;
}

.info-strip__item[b-65c3n80raj] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.8125rem;
    color: var(--color-teal-800, #065f46);
}
.info-strip__icon[b-65c3n80raj] { color: var(--color-primary, #4A9B8E); font-size: 0.875rem; }

.info-strip__edit[b-65c3n80raj] {
    margin-left: auto;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--color-primary, #4A9B8E);
    text-decoration: none;
}
.info-strip__edit:hover[b-65c3n80raj] { text-decoration: underline; }

/* ── Section group + cards ───────────────────────────────────────────────── */
.section-list[b-65c3n80raj] { display: flex; flex-direction: column; gap: 1.25rem; }

.class-group__title[b-65c3n80raj] {
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--color-gray-700, #374151);
    margin: 0 0 0.5rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.class-group__sections[b-65c3n80raj] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.5rem;
}

.section-card[b-65c3n80raj] {
    background: #fff;
    border: 1.5px solid var(--color-gray-200, #e5e7eb);
    border-radius: 0.625rem;
    padding: 0.875rem;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.section-card--ready[b-65c3n80raj]   { border-color: var(--color-success-main, #22C55E); }
.section-card--warning[b-65c3n80raj] { border-color: var(--color-warning-300, #fcd34d); }
.section-card--blocked[b-65c3n80raj] { border-color: var(--color-danger-200, #fecaca); background: var(--color-danger-50, #fef2f2); }

/* Selectable variant */
.section-card--selectable[b-65c3n80raj] {
    cursor: pointer;
    user-select: none;
}
.section-card--selectable:hover:not(.section-card--disabled)[b-65c3n80raj] {
    border-color: var(--color-primary, #4A9B8E);
    box-shadow: 0 0 0 3px var(--color-teal-100, #ccfbf1);
}
.section-card--selected[b-65c3n80raj] {
    border-color: var(--color-primary, #4A9B8E) !important;
    background: var(--color-teal-50, var(--color-teal-50));
}
.section-card--disabled[b-65c3n80raj] { opacity: 0.6; cursor: not-allowed; }

.section-card__header[b-65c3n80raj] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}
.section-card__checkbox[b-65c3n80raj] { flex-shrink: 0; width: 1rem; height: 1rem; accent-color: var(--color-primary, #4A9B8E); }
.section-card__name[b-65c3n80raj]     { flex: 1; font-weight: 600; font-size: 0.875rem; color: var(--color-gray-800, #1f2937); }

.section-card__stats[b-65c3n80raj] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.5rem;
    font-size: 0.75rem;
    color: var(--color-gray-500, #6b7280);
}
.section-card__stats span[b-65c3n80raj]::before { content: "· "; }
.section-card__stats span:first-child[b-65c3n80raj]::before { content: ""; }

.barrier-list[b-65c3n80raj] {
    display: grid;
    gap: var(--spacing-2, 0.5rem);
    margin-top: var(--spacing-3, 0.75rem);
}

.barrier-list--compact[b-65c3n80raj] { margin-top: 0; }

.barrier-row[b-65c3n80raj] {
    display: grid;
    grid-template-columns: 1rem minmax(8rem, 1fr) auto auto;
    align-items: center;
    gap: var(--spacing-2, 0.5rem);
    font-size: var(--font-size-xs, 0.75rem);
}

.barrier-row strong[b-65c3n80raj] { font-weight: 600; }
.barrier-row a[b-65c3n80raj] { color: var(--color-primary); font-weight: 700; text-decoration: none; }
.barrier-row a:hover[b-65c3n80raj] { text-decoration: underline; }
.barrier-row--pass[b-65c3n80raj] { color: var(--color-success-700, #15803d); }
.barrier-row--fail[b-65c3n80raj] { color: var(--color-danger-700, #b91c1c); }

.section-card__blocked-hint[b-65c3n80raj] {
    margin-top: 0.5rem;
    font-size: 0.75rem;
    color: var(--color-danger-700, #b91c1c);
    display: flex;
    align-items: center;
    gap: 0.375rem;
    flex-wrap: wrap;
}

/* ── Badge ───────────────────────────────────────────────────────────────── */
.badge[b-65c3n80raj] {
    font-size: 0.6875rem;
    font-weight: 600;
    padding: 0.15em 0.55em;
    border-radius: 9999px;
    white-space: nowrap;
}
.badge--success[b-65c3n80raj] { background: var(--color-success-100, #dcfce7); color: var(--color-success-800, #166534); }
.badge--warning[b-65c3n80raj] { background: var(--color-warning-100, #fef9c3); color: #78350f; }
.badge--danger[b-65c3n80raj]  { background: var(--color-danger-100, #fee2e2); color: var(--color-danger-700, #b91c1c); }
.badge--neutral[b-65c3n80raj] { background: var(--color-gray-100, #f3f4f6); color: var(--color-gray-600, #4b5563); }

/* ── Issue lists ─────────────────────────────────────────────────────────── */
.issue-list[b-65c3n80raj] {
    margin: 0.5rem 0 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    font-size: 0.78rem;
}
.issue-list li[b-65c3n80raj] { display: flex; align-items: flex-start; gap: 0.375rem; }
.issue-list--blocking li[b-65c3n80raj] { color: var(--color-danger-700, #b91c1c); }
.issue-list--blocking li i[b-65c3n80raj] { color: var(--color-danger-500, #ef4444); flex-shrink: 0; margin-top: 0.1em; }
.issue-list--warning li[b-65c3n80raj] { color: #78350f; }
.issue-list--warning li i[b-65c3n80raj] { color: var(--color-warning-500, #f59e0b); flex-shrink: 0; margin-top: 0.1em; }

/* ── Fix link ────────────────────────────────────────────────────────────── */
.fix-link[b-65c3n80raj] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    margin-top: 0.5rem;
    font-size: 0.775rem;
    font-weight: 600;
    color: var(--color-primary, #4A9B8E);
    text-decoration: none;
}
.fix-link:hover[b-65c3n80raj] { text-decoration: underline; }
.fix-link--warning[b-65c3n80raj] { color: #b45309; }
.fix-link--inline[b-65c3n80raj] { margin-top: 0; font-size: 0.72rem; }

/* ── Subject staffing panel ─────────────────────────────────────────────── */
.staffing-panel[b-65c3n80raj] {
    margin-top: 1rem;
    border: 1.5px solid var(--color-gray-200, #e5e7eb);
    border-radius: 0.625rem;
    padding: 1rem;
    background: #fff;
}
.staffing-panel__title[b-65c3n80raj] {
    display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap;
    margin: 0 0 0.75rem; font-size: 0.9375rem; font-weight: 700;
    color: var(--color-gray-900, #111827);
}
.staffing-table[b-65c3n80raj] {
    width: 100%; border-collapse: collapse; font-size: 0.8125rem;
}
.staffing-table th[b-65c3n80raj],
.staffing-table td[b-65c3n80raj] {
    padding: 0.5rem 0.5rem; text-align: left; border-bottom: 1px solid var(--color-gray-100, #f3f4f6);
}
.staffing-table th[b-65c3n80raj] { font-weight: 600; color: var(--color-gray-600, #4b5563); }
.staffing-table__num[b-65c3n80raj] { text-align: right; font-variant-numeric: tabular-nums; }
.staffing-row--short[b-65c3n80raj] { background: var(--color-warning-50, #fffbeb); }
.staffing-panel__hint[b-65c3n80raj] {
    margin: 0.75rem 0 0; font-size: 0.8125rem; color: var(--color-gray-600, #4b5563);
}

/* ── Readiness summary ───────────────────────────────────────────────────── */
.readiness-summary[b-65c3n80raj] {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}
.readiness-summary__item[b-65c3n80raj] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.8125rem;
    font-weight: 600;
}
.readiness-summary__item--ready[b-65c3n80raj]   { color: var(--color-success-700, #15803d); }
.readiness-summary__item--blocked[b-65c3n80raj] { color: var(--color-danger-600, #dc2626); }

/* ── Step heading ────────────────────────────────────────────────────────── */
.step-heading__title[b-65c3n80raj] {
    font-size: 1.0625rem;
    font-weight: 700;
    color: var(--color-gray-900, #111827);
    margin: 0 0 0.25rem;
}
.step-heading__sub[b-65c3n80raj] { font-size: 0.8125rem; color: var(--color-gray-500, #6b7280); margin: 0; }

/* ── Step 1 controls ─────────────────────────────────────────────────────── */
.step1-controls[b-65c3n80raj] { padding: 0.25rem 0; }

.checkbox-row[b-65c3n80raj] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    font-size: 0.875rem;
    color: var(--color-gray-700, #374151);
}
.checkbox-row__input[b-65c3n80raj] { width: 1rem; height: 1rem; accent-color: var(--color-primary, #4A9B8E); cursor: pointer; }

/* ── Selected summary (step 2) ───────────────────────────────────────────── */
.selected-summary[b-65c3n80raj] {
    display: flex;
    align-items: flex-start;
    gap: 0.625rem;
    padding: 0.75rem 1rem;
    background: var(--color-teal-50, var(--color-teal-50));
    border-radius: 0.5rem;
    font-size: 0.8125rem;
    color: var(--color-teal-800, #065f46);
}
.selected-summary__icon[b-65c3n80raj] { color: var(--color-primary, #4A9B8E); flex-shrink: 0; margin-top: 0.125rem; }

/* ── Setup sections ──────────────────────────────────────────────────────── */
.setup-section[b-65c3n80raj] {
    background: #fff;
    border: 1px solid var(--color-gray-200, #e5e7eb);
    border-radius: 0.625rem;
    padding: 1rem;
}

.setup-section__header[b-65c3n80raj] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.75rem;
}
.setup-section__title[b-65c3n80raj] {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--color-gray-800, #1f2937);
    margin: 0 0 0.75rem;
}
.setup-section__edit-link[b-65c3n80raj] {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--color-primary, #4A9B8E);
    text-decoration: none;
}
.setup-section__edit-link:hover[b-65c3n80raj] { text-decoration: underline; }

.days-row[b-65c3n80raj] { display: flex; gap: 0.375rem; flex-wrap: wrap; margin-bottom: 0.5rem; }

.day-chip[b-65c3n80raj] {
    padding: 0.3em 0.6em;
    border-radius: 0.375rem;
    font-size: 0.75rem;
    font-weight: 600;
}
.day-chip--active[b-65c3n80raj]   { background: var(--color-primary, #4A9B8E); color: #fff; }
.day-chip--inactive[b-65c3n80raj] { background: var(--color-gray-100, #f3f4f6); color: var(--color-gray-400, #9ca3af); }

.setup-note[b-65c3n80raj] {
    font-size: 0.75rem;
    color: var(--color-gray-500, #6b7280);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.375rem;
}

.setup-row[b-65c3n80raj] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.625rem 0;
    border-bottom: 1px solid var(--color-gray-100, #f3f4f6);
}
.setup-row:last-of-type[b-65c3n80raj] { border-bottom: none; }

.setup-label[b-65c3n80raj] {
    font-size: 0.8125rem;
    color: var(--color-gray-700, #374151);
    line-height: 1.4;
}
.setup-label__hint[b-65c3n80raj] { display: block; font-size: 0.7rem; color: var(--color-gray-400, #9ca3af); font-weight: 400; }

.setup-input-group[b-65c3n80raj] { display: flex; align-items: center; gap: 0.5rem; flex-shrink: 0; }

.stepper-btn[b-65c3n80raj] {
    width: 2rem;
    height: 2rem;
    border-radius: 0.375rem;
    border: 1px solid var(--color-gray-300, #d1d5db);
    background: #fff;
    font-size: 1.125rem;
    line-height: 1;
    cursor: pointer;
    color: var(--color-gray-700, #374151);
    display: flex;
    align-items: center;
    justify-content: center;
}
.stepper-btn:hover[b-65c3n80raj]   { background: var(--color-gray-50, #f9fafb); }
.stepper-btn:active[b-65c3n80raj]  { background: var(--color-gray-100, #f3f4f6); }

.stepper-value[b-65c3n80raj] {
    min-width: 1.75rem;
    text-align: center;
    font-size: 1rem;
    font-weight: 700;
    color: var(--color-primary, #4A9B8E);
}

.setup-toggles[b-65c3n80raj] { display: flex; flex-direction: column; gap: 0.625rem; padding-top: 0.75rem; }

.toggle-row[b-65c3n80raj] { display: flex; align-items: center; gap: 0.5rem; cursor: pointer; font-size: 0.8125rem; color: var(--color-gray-700, #374151); }
.toggle-row__input[b-65c3n80raj] { width: 1rem; height: 1rem; accent-color: var(--color-primary, #4A9B8E); cursor: pointer; }

/* ── Step 3 generation summary ───────────────────────────────────────────── */
.gen-summary[b-65c3n80raj] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    background: #fff;
    border: 1px solid var(--color-gray-200, #e5e7eb);
    border-radius: 0.5rem;
}
.gen-summary__item[b-65c3n80raj] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.8125rem;
    font-weight: 600;
}
.gen-summary__item--ok[b-65c3n80raj]       { color: var(--color-success-700, #15803d); }
.gen-summary__item--conflict[b-65c3n80raj] { color: var(--color-danger-600, #dc2626); }
.gen-summary__item--warn[b-65c3n80raj]     { color: #b45309; }
.gen-summary__item--fail[b-65c3n80raj]     { color: var(--color-danger-700, #b91c1c); }

/* ── Tab bar ─────────────────────────────────────────────────────────────── */
.tab-bar[b-65c3n80raj] {
    display: flex;
    gap: 0.25rem;
    overflow-x: auto;
    border-bottom: 2px solid var(--color-gray-200, #e5e7eb);
    padding-bottom: 0;
    -webkit-overflow-scrolling: touch;
}

.tab-btn[b-65c3n80raj] {
    padding: 0.5rem 0.875rem;
    font-size: 0.8125rem;
    font-weight: 600;
    border: none;
    background: transparent;
    color: var(--color-gray-500, #6b7280);
    cursor: pointer;
    border-bottom: 3px solid transparent;
    margin-bottom: -2px;
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 0.375rem;
}
.tab-btn:hover[b-65c3n80raj]    { color: var(--color-primary, #4A9B8E); }
.tab-btn--active[b-65c3n80raj]  { color: var(--color-primary, #4A9B8E); border-bottom-color: var(--color-primary, #4A9B8E); }

.tab-badge[b-65c3n80raj] {
    font-size: 0.65rem;
    font-weight: 700;
    padding: 0.1em 0.45em;
    border-radius: 9999px;
}
.tab-badge--conflict[b-65c3n80raj] { background: var(--color-danger-100, #fee2e2); color: var(--color-danger-700, #b91c1c); }
.tab-badge--fail[b-65c3n80raj]     { background: var(--color-danger-200, #fecaca); color: var(--color-danger-800, #991b1b); }

/* ── Timetable preview table ─────────────────────────────────────────────── */
.timetable-preview-wrap[b-65c3n80raj] {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border: 1px solid var(--color-gray-200, #e5e7eb);
    border-radius: 0.5rem;
    background: #fff;
}

.tt-table[b-65c3n80raj] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.75rem;
    min-width: 480px;
}

.tt-table th[b-65c3n80raj], .tt-table td[b-65c3n80raj] {
    border: 1px solid var(--color-gray-100, #f3f4f6);
    padding: 0.375rem 0.5rem;
    vertical-align: top;
}
.tt-table th[b-65c3n80raj] {
    background: var(--color-gray-50, #f9fafb);
    font-weight: 700;
    color: var(--color-gray-700, #374151);
    text-align: center;
}

.tt-table__period-col[b-65c3n80raj] { min-width: 70px; }

.tt-period-label[b-65c3n80raj] { font-weight: 600; color: var(--color-gray-700, #374151); }
.tt-period-time[b-65c3n80raj]  { font-size: 0.65rem; color: var(--color-gray-400, #9ca3af); }

.tt-table__break-row td[b-65c3n80raj] { background: var(--color-gray-50, #f9fafb); }
.tt-table__break-cell[b-65c3n80raj] {
    text-align: center;
    color: var(--color-gray-400, #9ca3af);
    font-style: italic;
    padding: 0.375rem;
}

.tt-cell[b-65c3n80raj] { min-width: 80px; }
.tt-cell--conflict[b-65c3n80raj] { background: var(--color-danger-50, #fef2f2); }
.tt-cell--empty[b-65c3n80raj] { color: var(--color-gray-300, #d1d5db); text-align: center; }

.tt-cell__subject[b-65c3n80raj]  { font-weight: 600; color: var(--color-gray-800, #1f2937); }
.tt-cell__teacher[b-65c3n80raj]  { font-size: 0.65rem; color: var(--color-gray-500, #6b7280); margin-top: 0.125rem; }
.tt-cell__empty-text[b-65c3n80raj] { font-size: 1rem; }

.tt-cell__conflict-badge[b-65c3n80raj] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.6rem;
    color: var(--color-danger-600, #dc2626);
    margin-top: 0.25rem;
}

/* ── Conflict list ───────────────────────────────────────────────────────── */
.conflict-list[b-65c3n80raj] {
    background: var(--color-danger-50, #fef2f2);
    border: 1px solid var(--color-danger-200, #fecaca);
    border-radius: 0.5rem;
    padding: 0.875rem;
}

.conflict-list__title[b-65c3n80raj] {
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--color-danger-700, #b91c1c);
    margin: 0 0 0.625rem;
    display: flex;
    align-items: center;
    gap: 0.375rem;
}

.conflict-item[b-65c3n80raj] {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 0.375rem 0;
    border-bottom: 1px solid var(--color-danger-100, #fee2e2);
    font-size: 0.8rem;
    color: var(--color-gray-700, #374151);
}
.conflict-item:last-child[b-65c3n80raj] { border-bottom: none; }

.conflict-item__badge[b-65c3n80raj] {
    flex-shrink: 0;
    font-size: 0.65rem;
    font-weight: 700;
    padding: 0.1em 0.45em;
    border-radius: 0.25rem;
    text-transform: uppercase;
}
.conflict-item__badge--high[b-65c3n80raj]   { background: var(--color-danger-200, #fecaca);   color: var(--color-danger-800, #991b1b); }
.conflict-item__badge--medium[b-65c3n80raj] { background: var(--color-warning-200, #fde68a);  color: #78350f; }
.conflict-item__badge--low[b-65c3n80raj]    { background: var(--color-gray-200, #e5e7eb);     color: var(--color-gray-700, #374151); }

/* ── Buttons ─────────────────────────────────────────────────────────────── */
.btn[b-65c3n80raj] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 1.25rem;
    border-radius: 0.5rem;
    font-size: 0.875rem;
    font-weight: 600;
    border: none;
    cursor: pointer;
    text-decoration: none;
    transition: background 0.15s, box-shadow 0.15s;
    justify-content: center;
}
.btn:disabled[b-65c3n80raj] { opacity: 0.5; cursor: not-allowed; }

.btn--primary[b-65c3n80raj]  { background: var(--color-primary, #4A9B8E); color: #fff; }
.btn--primary:hover:not(:disabled)[b-65c3n80raj] { background: var(--color-teal-600, #0d9488); }

.btn--secondary[b-65c3n80raj] { background: var(--color-gray-100, #f3f4f6); color: var(--color-gray-700, #374151); border: 1px solid var(--color-gray-300, #d1d5db); }
.btn--secondary:hover:not(:disabled)[b-65c3n80raj] { background: var(--color-gray-200, #e5e7eb); }

.btn--ghost[b-65c3n80raj] { background: transparent; color: var(--color-gray-600, #4b5563); border: 1px solid var(--color-gray-300, #d1d5db); }
.btn--ghost:hover:not(:disabled)[b-65c3n80raj] { background: var(--color-gray-50, #f9fafb); }

/* ── Wizard actions footer ───────────────────────────────────────────────── */
.wizard-actions[b-65c3n80raj] {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
    padding-top: 0.5rem;
}
.wizard-actions .btn--primary[b-65c3n80raj] { margin-left: auto; }

/* ─────────────────────────────────────────────────────────────────────────────
   768px — tablet
───────────────────────────────────────────────────────────────────────────── */
@media (min-width: 768px) {
    .wizard-header[b-65c3n80raj] { padding: 1.25rem 1.5rem; }
    .wizard-body[b-65c3n80raj]   { padding: 1.5rem; gap: 1.25rem; }

    .class-group__sections[b-65c3n80raj] {
        grid-template-columns: repeat(2, 1fr);
    }

    .setup-row[b-65c3n80raj] { padding: 0.75rem 0; }

    .tt-table th[b-65c3n80raj], .tt-table td[b-65c3n80raj] { padding: 0.5rem 0.625rem; }
    .tt-table[b-65c3n80raj] { font-size: 0.8125rem; }
}

/* ─────────────────────────────────────────────────────────────────────────────
   1280px — desktop
───────────────────────────────────────────────────────────────────────────── */
@media (min-width: 1280px) {
    .wizard-page[b-65c3n80raj] { max-width: 960px; margin: 0 auto; width: 100%; }

    .class-group__sections[b-65c3n80raj] {
        grid-template-columns: repeat(3, 1fr);
    }

    .wizard-body[b-65c3n80raj] { padding: 2rem; }

    .tt-table th[b-65c3n80raj], .tt-table td[b-65c3n80raj] { padding: 0.625rem 0.75rem; }
    .tt-table[b-65c3n80raj] { font-size: 0.875rem; }
}
/* /Pages/Principal/Timetable/Workload.razor.rz.scp.css */
/* Workload.razor.css — Teacher Workload page */

/* ─── Header ──────────────────────────────────────────────── */
.wl-header[b-5q6i6rbvir] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-bottom: 1.25rem;
}

.wl-title[b-5q6i6rbvir] {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--color-neutral-900);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
}

.wl-subtitle[b-5q6i6rbvir] {
    font-size: 0.78rem;
    color: var(--color-neutral-400);
    margin: 0.15rem 0 0;
}

.wl-header-actions[b-5q6i6rbvir] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.wl-btn-ghost[b-5q6i6rbvir] {
    padding: 0.45rem 0.9rem;
    border: 1px solid var(--color-neutral-200);
    border-radius: 6px;
    background: transparent;
    color: var(--color-neutral-600);
    font-size: 0.82rem;
    font-weight: 500;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.wl-btn-secondary[b-5q6i6rbvir] {
    padding: 0.45rem 0.9rem;
    border: 1px solid var(--color-neutral-200);
    border-radius: 6px;
    background: var(--color-neutral-0, #fff);
    color: var(--color-neutral-600);
    font-size: 0.82rem;
    font-weight: 500;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

/* ─── Loading ─────────────────────────────────────────────── */
.wl-loading[b-5q6i6rbvir] {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 300px;
}

/* ─── Stats bar ───────────────────────────────────────────── */
.wl-stats-bar[b-5q6i6rbvir] {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1.25rem;
}

.wl-stat[b-5q6i6rbvir] {
    flex: 1;
    min-width: 100px;
    padding: 0.75rem 1rem;
    border-radius: 8px;
    border-left: 4px solid transparent;
    background: var(--color-neutral-0, #fff);
    box-shadow: 0 1px 3px rgba(0,0,0,0.07);
}

.wl-stat-val[b-5q6i6rbvir] {
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 1;
}

.wl-stat-label[b-5q6i6rbvir] {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-neutral-400);
    margin-top: 0.2rem;
}

.wl-stat-teal[b-5q6i6rbvir]   { border-left-color: var(--color-teal-600); }
.wl-stat-teal .wl-stat-val[b-5q6i6rbvir]   { color: var(--color-teal-600); }
.wl-stat-blue[b-5q6i6rbvir]   { border-left-color: #3b82f6; }
.wl-stat-blue .wl-stat-val[b-5q6i6rbvir]   { color: #3b82f6; }
.wl-stat-red[b-5q6i6rbvir]    { border-left-color: #dc2626; }
.wl-stat-red .wl-stat-val[b-5q6i6rbvir]    { color: #dc2626; }
.wl-stat-orange[b-5q6i6rbvir] { border-left-color: #d97706; }
.wl-stat-orange .wl-stat-val[b-5q6i6rbvir] { color: #d97706; }
.wl-stat-green[b-5q6i6rbvir]  { border-left-color: #16a34a; }
.wl-stat-green .wl-stat-val[b-5q6i6rbvir]  { color: #16a34a; }

/* ─── Two column layout ───────────────────────────────────── */
.wl-two-col[b-5q6i6rbvir] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.wl-mb[b-5q6i6rbvir] { margin-bottom: 1.25rem; }

/* ─── Card ────────────────────────────────────────────────── */
.wl-card[b-5q6i6rbvir] {
    background: var(--color-neutral-0, #fff);
    border: 1px solid var(--color-neutral-100);
    border-radius: 10px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
    padding: 1rem 1.1rem;
}

.wl-card-title[b-5q6i6rbvir] {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-neutral-800);
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-bottom: 0.85rem;
}

.wl-card-header[b-5q6i6rbvir] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.85rem 1.1rem;
    border-bottom: 1px solid var(--color-neutral-100);
    gap: 0.75rem;
}

/* ─── Fairness ring ───────────────────────────────────────── */
.wl-fairness-body[b-5q6i6rbvir] {
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

.wl-fairness-ring[b-5q6i6rbvir] {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    border: 8px solid var(--color-teal-600);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: #e6fffa;
}

.wl-ring-inner[b-5q6i6rbvir] {
    text-align: center;
}

.wl-ring-num[b-5q6i6rbvir] {
    display: block;
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--color-teal-600);
    line-height: 1;
}

.wl-ring-sub[b-5q6i6rbvir] {
    font-size: 0.65rem;
    color: var(--color-teal-300);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.wl-distrib[b-5q6i6rbvir] { flex: 1; }

.wl-dist-row[b-5q6i6rbvir] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.4rem;
}

.wl-dist-label[b-5q6i6rbvir] {
    width: 90px;
    flex-shrink: 0;
    font-size: 0.75rem;
    color: var(--color-neutral-600);
}

.wl-dist-bar-wrap[b-5q6i6rbvir] {
    flex: 1;
    height: 6px;
    background: var(--color-neutral-100);
    border-radius: 99px;
    overflow: hidden;
}

.wl-dist-bar[b-5q6i6rbvir] {
    height: 100%;
    border-radius: 99px;
    min-width: 3px;
    transition: width 0.3s;
}

.text-success[b-5q6i6rbvir] { background: #16a34a; }
.text-danger[b-5q6i6rbvir]  { background: #dc2626; }
.text-warning[b-5q6i6rbvir] { background: #d97706; }
.text-gray-400[b-5q6i6rbvir] { background: #9ca3af; }

.wl-dist-count[b-5q6i6rbvir] {
    width: 22px;
    text-align: right;
    font-size: 0.75rem;
    color: var(--color-neutral-500);
}

/* ─── Quick actions ───────────────────────────────────────── */
.wl-actions-list[b-5q6i6rbvir] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.wl-action-btn[b-5q6i6rbvir] {
    padding: 0.55rem 0.9rem;
    border-radius: 7px;
    font-size: 0.82rem;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    border: none;
    text-decoration: none;
    transition: opacity 0.1s;
}

.wl-action-btn:hover[b-5q6i6rbvir] { opacity: 0.85; }

.wl-action-red[b-5q6i6rbvir]    { background: #fee2e2; color: #991b1b; }
.wl-action-orange[b-5q6i6rbvir] { background: #fef3c7; color: #92400e; }
.wl-action-teal[b-5q6i6rbvir]   { background: #e6fffa; color: var(--color-teal-600); }
.wl-action-ghost[b-5q6i6rbvir]  { background: var(--color-neutral-100); color: var(--color-neutral-700); }

/* ─── Dept filter chips ───────────────────────────────────── */
.wl-filter-row[b-5q6i6rbvir] {
    display: flex;
    gap: 0.4rem;
    flex-wrap: wrap;
}

.wl-chip[b-5q6i6rbvir] {
    padding: 0.3rem 0.8rem;
    border-radius: 99px;
    border: 1px solid var(--color-neutral-200);
    background: var(--color-neutral-0, #fff);
    font-size: 0.78rem;
    color: var(--color-neutral-600);
    cursor: pointer;
    font-weight: 500;
    transition: all 0.12s;
}

.wl-chip:hover[b-5q6i6rbvir] { border-color: var(--color-teal-600); color: var(--color-teal-600); }
.wl-chip.active[b-5q6i6rbvir] { background: #e6fffa; border-color: var(--color-teal-600); color: var(--color-teal-600); }

.wl-chip-filter[b-5q6i6rbvir] { background: #fef3c7; border-color: #fcd34d; color: #92400e; }

/* ─── Search ──────────────────────────────────────────────── */
.wl-search[b-5q6i6rbvir] {
    padding: 0.35rem 0.75rem;
    border: 1px solid var(--color-neutral-200);
    border-radius: 6px;
    font-size: 0.82rem;
    color: var(--color-neutral-700);
    width: 200px;
    max-width: 100%;
}

/* ─── Table ───────────────────────────────────────────────── */
.wl-table-wrap[b-5q6i6rbvir] { overflow-x: auto; }

.wl-table[b-5q6i6rbvir] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.82rem;
}

.wl-table th[b-5q6i6rbvir] {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-neutral-400);
    padding: 0.55rem 0.9rem;
    text-align: left;
    border-bottom: 1px solid var(--color-neutral-100);
    background: var(--color-neutral-50);
}

.wl-table td[b-5q6i6rbvir] {
    padding: 0.6rem 0.9rem;
    border-bottom: 1px solid var(--color-neutral-50);
    vertical-align: middle;
}

.wl-th-name[b-5q6i6rbvir] { min-width: 180px; }
.wl-th-num[b-5q6i6rbvir]  { width: 80px; }
.wl-th-bar[b-5q6i6rbvir]  { min-width: 160px; }
.wl-th-stat[b-5q6i6rbvir] { width: 100px; }
.wl-th-dept[b-5q6i6rbvir] { width: 130px; }

.wl-row-red[b-5q6i6rbvir]    { background: #fff5f5; }
.wl-row-orange[b-5q6i6rbvir] { background: #fffbeb; }
.wl-row-muted[b-5q6i6rbvir]  { opacity: 0.65; }

.wl-table tbody tr[b-5q6i6rbvir] { cursor: pointer; transition: background 0.1s; }
.wl-table tbody tr:hover[b-5q6i6rbvir] { background: var(--color-neutral-50) !important; }

/* Teacher name cell */
.wl-td-name[b-5q6i6rbvir] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.wl-avatar[b-5q6i6rbvir] {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #e6fffa;
    color: var(--color-teal-600);
    font-size: 0.9rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.wl-teacher-name[b-5q6i6rbvir] { font-weight: 600; color: var(--color-neutral-800); }
.wl-teacher-code[b-5q6i6rbvir] { font-size: 0.72rem; color: var(--color-neutral-400); }

.wl-td-num[b-5q6i6rbvir] {
    text-align: center;
    font-weight: 600;
    color: var(--color-neutral-800);
}

.wl-td-unit[b-5q6i6rbvir] {
    font-size: 0.7rem;
    color: var(--color-neutral-400);
    font-weight: 400;
}

.wl-td-dept[b-5q6i6rbvir] { color: var(--color-neutral-500); font-size: 0.78rem; }
.wl-td-empty[b-5q6i6rbvir] { text-align: center; padding: 2rem; color: var(--color-neutral-400); }

/* Load bar */
.wl-bar-wrap[b-5q6i6rbvir] {
    height: 8px;
    background: var(--color-neutral-100);
    border-radius: 99px;
    overflow: hidden;
    margin-bottom: 0.15rem;
}

.wl-bar[b-5q6i6rbvir] {
    height: 100%;
    border-radius: 99px;
    min-width: 3px;
    transition: width 0.3s ease;
}

.wl-bar-teal[b-5q6i6rbvir]   { background: var(--color-teal-600); }
.wl-bar-red[b-5q6i6rbvir]    { background: #dc2626; }
.wl-bar-orange[b-5q6i6rbvir] { background: #d97706; }

.wl-bar-pct[b-5q6i6rbvir] {
    font-size: 0.7rem;
    color: var(--color-neutral-400);
}

/* Status chip */
.wl-status[b-5q6i6rbvir] {
    font-size: 0.72rem;
    font-weight: 600;
    padding: 0.15rem 0.55rem;
    border-radius: 99px;
    white-space: nowrap;
}

.wl-status-green[b-5q6i6rbvir]  { background: #dcfce7; color: #166534; }
.wl-status-red[b-5q6i6rbvir]    { background: #fee2e2; color: #991b1b; }
.wl-status-orange[b-5q6i6rbvir] { background: #fef3c7; color: #92400e; }
.wl-status-gray[b-5q6i6rbvir]   { background: var(--color-neutral-100); color: var(--color-neutral-500); }

/* Row actions */
.wl-row-actions[b-5q6i6rbvir] {
    display: flex;
    gap: 0.3rem;
}

.wl-btn-xs[b-5q6i6rbvir] {
    font-size: 0.72rem;
    font-weight: 600;
    padding: 0.2rem 0.5rem;
    border-radius: 5px;
    background: var(--color-neutral-100);
    color: var(--color-neutral-600);
    border: none;
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
}

.wl-btn-xs.active[b-5q6i6rbvir] { background: #e6fffa; color: var(--color-teal-600); }

/* ─── Expanded assignments row ────────────────────────────── */
.wl-expand-row[b-5q6i6rbvir] { background: var(--color-neutral-50) !important; cursor: default !important; }
.wl-expand-row td[b-5q6i6rbvir] { padding: 0.75rem 0.9rem 0.75rem 3.6rem; }

.wl-assignments[b-5q6i6rbvir] { }

.wl-assign-title[b-5q6i6rbvir] {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-neutral-400);
    margin-bottom: 0.5rem;
}

.wl-assign-grid[b-5q6i6rbvir] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.wl-assign-chip[b-5q6i6rbvir] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.25rem 0.6rem;
    background: var(--color-neutral-0, #fff);
    border: 1px solid var(--color-neutral-150, #e5e7eb);
    border-radius: 6px;
    font-size: 0.75rem;
}

.wl-assign-class[b-5q6i6rbvir]  { font-weight: 600; color: var(--color-neutral-800); }
.wl-assign-subj[b-5q6i6rbvir]   { color: var(--color-neutral-500); }
.wl-assign-periods[b-5q6i6rbvir] {
    background: #e6fffa;
    color: var(--color-teal-600);
    font-weight: 600;
    padding: 0.05rem 0.35rem;
    border-radius: 4px;
    font-size: 0.7rem;
}

/* ─── Responsive ──────────────────────────────────────────── */
@media (max-width: 900px) {
    .wl-two-col[b-5q6i6rbvir] { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
    .wl-stats-bar[b-5q6i6rbvir] { gap: 0.5rem; }
    .wl-stat[b-5q6i6rbvir]      { min-width: 85px; padding: 0.5rem; }
    .wl-stat-val[b-5q6i6rbvir]  { font-size: 1.25rem; }

    .wl-search[b-5q6i6rbvir]    { width: 140px; }
    .wl-th-dept[b-5q6i6rbvir], .wl-td-dept[b-5q6i6rbvir] { display: none; }
    .wl-th-stat[b-5q6i6rbvir] { display: none; }
}
/* /Pages/Principal/Transport/Index.razor.rz.scp.css */
/* ── Page Shell ──────────────────────────────────────────────────── */
.transport-page[b-2wgixc0bl9] {
    max-width: 1100px;
    margin: 0 auto;
    padding: 1.25rem 1rem 3rem;
}

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

.page-title[b-2wgixc0bl9] {
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--color-neutral-900);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.page-title i[b-2wgixc0bl9] { color: var(--color-primary-500); }

.page-subtitle[b-2wgixc0bl9] {
    font-size: 0.8rem;
    color: var(--color-neutral-500);
    margin-top: 0.2rem;
}

/* ── Tab Bar ─────────────────────────────────────────────────────── */
.tab-bar[b-2wgixc0bl9] {
    display: flex;
    gap: 0;
    border-bottom: 2px solid var(--color-neutral-100);
    margin-bottom: 1.25rem;
}

.tab-btn[b-2wgixc0bl9] {
    padding: 0.55rem 1.1rem;
    font-size: 0.83rem;
    font-weight: 600;
    color: var(--color-neutral-500);
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-bottom: -2px;
    transition: color 0.15s;
}

.tab-btn:hover[b-2wgixc0bl9] { color: var(--color-neutral-800); }
.tab-btn.active[b-2wgixc0bl9] {
    color: var(--color-primary-600);
    border-bottom-color: var(--color-primary-500);
}

.tab-badge[b-2wgixc0bl9] {
    background: var(--color-success-500);
    color: #fff;
    font-size: 0.68rem;
    font-weight: 700;
    border-radius: 999px;
    padding: 0.1rem 0.45rem;
    min-width: 18px;
    text-align: center;
}

/* ── Loading / Empty ─────────────────────────────────────────────── */
.loading-state[b-2wgixc0bl9] {
    padding: 2.5rem;
    text-align: center;
    color: var(--color-neutral-400);
    font-size: 0.9rem;
}

.loading-inline[b-2wgixc0bl9] {
    padding: 0.75rem 0;
    color: var(--color-neutral-400);
    font-size: 0.82rem;
}

.empty-state[b-2wgixc0bl9] {
    padding: 3rem 1rem;
    text-align: center;
    color: var(--color-neutral-400);
}

.empty-state i[b-2wgixc0bl9] { font-size: 2rem; margin-bottom: 0.75rem; display: block; }
.empty-state p[b-2wgixc0bl9] { font-size: 0.9rem; font-weight: 600; color: var(--color-neutral-600); }
.empty-state span[b-2wgixc0bl9] { font-size: 0.8rem; }

/* ── Stats Bar ───────────────────────────────────────────────────── */
.stats-bar[b-2wgixc0bl9] {
    display: flex;
    gap: 0;
    border: 1px solid var(--color-neutral-100);
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 1.25rem;
}

.stat-item[b-2wgixc0bl9] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0.75rem 1rem;
    border-right: 1px solid var(--color-neutral-100);
}
.stat-item:last-child[b-2wgixc0bl9] { border-right: none; }

.stat-value[b-2wgixc0bl9] {
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--color-neutral-900);
    line-height: 1;
}

.stat-label[b-2wgixc0bl9] {
    font-size: 0.72rem;
    color: var(--color-neutral-500);
    margin-top: 0.25rem;
    text-align: center;
}

/* ── Trip Cards (Live) ───────────────────────────────────────────── */
.trip-list[b-2wgixc0bl9] { display: flex; flex-direction: column; gap: 0.6rem; }

.trip-card[b-2wgixc0bl9] {
    border: 1px solid var(--color-neutral-150);
    border-radius: 8px;
    overflow: hidden;
    background: var(--color-surface);
}

.trip-card.signal-lost[b-2wgixc0bl9] { border-color: var(--color-danger-200); }

.trip-header[b-2wgixc0bl9] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    cursor: pointer;
}

.trip-status-dot[b-2wgixc0bl9] {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}

.dot-green[b-2wgixc0bl9] { background: var(--color-success-500); animation: pulse-green-b-2wgixc0bl9 2s infinite; }
.dot-red[b-2wgixc0bl9]   { background: var(--color-danger-500); }

@keyframes pulse-green-b-2wgixc0bl9 {
    0%, 100% { box-shadow: 0 0 0 0 rgba(34,197,94,0.5); }
    50%       { box-shadow: 0 0 0 5px rgba(34,197,94,0); }
}

.trip-info[b-2wgixc0bl9] { flex: 1; min-width: 0; }
.trip-route[b-2wgixc0bl9] { display: block; font-size: 0.88rem; font-weight: 600; color: var(--color-neutral-900); }
.trip-meta[b-2wgixc0bl9]  { font-size: 0.76rem; color: var(--color-neutral-500); }

.trip-stats[b-2wgixc0bl9] { display: flex; align-items: center; gap: 0.75rem; }
.trip-speed[b-2wgixc0bl9] { font-size: 0.78rem; font-weight: 600; color: var(--color-primary-600); }
.trip-students[b-2wgixc0bl9] { font-size: 0.78rem; color: var(--color-neutral-600); }

.signal-lost-badge[b-2wgixc0bl9] {
    font-size: 0.76rem;
    background: var(--color-danger-50);
    color: var(--color-danger-700);
    padding: 0.2rem 0.55rem;
    border-radius: 999px;
    font-weight: 600;
}

.expand-icon[b-2wgixc0bl9] { color: var(--color-neutral-400); font-size: 0.75rem; }

.trip-detail[b-2wgixc0bl9] {
    padding: 0.75rem 1rem 1rem;
    border-top: 1px solid var(--color-neutral-100);
    background: var(--color-neutral-25);
}

.stop-progress[b-2wgixc0bl9] { margin-bottom: 0.75rem; }
.stop-progress-label[b-2wgixc0bl9] { font-size: 0.75rem; color: var(--color-neutral-500); display: block; margin-bottom: 0.35rem; }

.stop-dots[b-2wgixc0bl9] { display: flex; gap: 6px; flex-wrap: wrap; }
.stop-dot[b-2wgixc0bl9] {
    width: 10px;
    height: 10px;
    border-radius: 50%;
}
.stop-dot.done[b-2wgixc0bl9]    { background: var(--color-success-400); }
.stop-dot.current[b-2wgixc0bl9] { background: var(--color-primary-500); box-shadow: 0 0 0 3px rgba(var(--color-primary-rgb),0.25); }
.stop-dot.pending[b-2wgixc0bl9] { background: var(--color-neutral-200); }

.prop-row[b-2wgixc0bl9] { display: flex; align-items: baseline; padding: 0.3rem 0; border-bottom: 1px solid var(--color-neutral-50); }
.prop-label[b-2wgixc0bl9] { width: 130px; flex-shrink: 0; font-size: 0.76rem; color: var(--color-neutral-500); font-weight: 500; }
.prop-value[b-2wgixc0bl9] { font-size: 0.84rem; color: var(--color-neutral-900); font-weight: 500; }
.prop-value a[b-2wgixc0bl9] { color: var(--color-primary-600); text-decoration: none; }

.refresh-btn[b-2wgixc0bl9] {
    margin-top: 1rem;
    padding: 0.45rem 1rem;
    font-size: 0.8rem;
    font-weight: 600;
    border: 1px solid var(--color-neutral-200);
    border-radius: 6px;
    background: var(--color-surface);
    color: var(--color-neutral-600);
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.refresh-btn:hover[b-2wgixc0bl9] { background: var(--color-neutral-50); }

/* ── Route Cards ─────────────────────────────────────────────────── */
.route-list[b-2wgixc0bl9] { display: flex; flex-direction: column; gap: 0.6rem; }

.route-card[b-2wgixc0bl9] {
    border: 1px solid var(--color-neutral-150);
    border-radius: 8px;
    overflow: hidden;
    background: var(--color-surface);
}

.route-header[b-2wgixc0bl9] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    cursor: pointer;
}

.route-info[b-2wgixc0bl9] { flex: 1; min-width: 0; }
.route-name[b-2wgixc0bl9] { display: block; font-size: 0.88rem; font-weight: 600; color: var(--color-neutral-900); }
.route-meta[b-2wgixc0bl9] { font-size: 0.75rem; color: var(--color-neutral-500); }
.route-badges[b-2wgixc0bl9] { display: flex; gap: 0.4rem; align-items: center; }

.badge-active[b-2wgixc0bl9]   { background: var(--color-success-50); color: var(--color-success-700); font-size: 0.7rem; font-weight: 700; padding: 0.15rem 0.5rem; border-radius: 999px; }
.badge-inactive[b-2wgixc0bl9] { background: var(--color-neutral-100); color: var(--color-neutral-500); font-size: 0.7rem; font-weight: 700; padding: 0.15rem 0.5rem; border-radius: 999px; }

.route-detail[b-2wgixc0bl9] {
    padding: 0.75rem 1rem 1rem;
    border-top: 1px solid var(--color-neutral-100);
    background: var(--color-neutral-25);
}

/* ── Stop List ───────────────────────────────────────────────────── */
.stop-list[b-2wgixc0bl9] { display: flex; flex-direction: column; gap: 0; margin-bottom: 0.75rem; }

.stop-row[b-2wgixc0bl9] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.4rem 0;
    border-bottom: 1px solid var(--color-neutral-50);
    font-size: 0.82rem;
}

.stop-seq[b-2wgixc0bl9] {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--color-neutral-100);
    color: var(--color-neutral-600);
    font-size: 0.72rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.stop-name[b-2wgixc0bl9] { flex: 1; color: var(--color-neutral-900); font-weight: 500; }
.stop-time[b-2wgixc0bl9] { font-size: 0.76rem; color: var(--color-neutral-500); }
.stop-students[b-2wgixc0bl9] { font-size: 0.76rem; color: var(--color-neutral-500); margin-left: auto; }

.no-stops[b-2wgixc0bl9] { font-size: 0.8rem; color: var(--color-neutral-400); padding: 0.4rem 0; }

/* ── Stop Forms ──────────────────────────────────────────────────── */
.stop-input[b-2wgixc0bl9] {
    padding: 0.35rem 0.6rem;
    border: 1px solid var(--color-neutral-200);
    border-radius: 5px;
    font-size: 0.8rem;
    outline: none;
    flex: 1;
    min-width: 0;
}

.stop-input:focus[b-2wgixc0bl9] { border-color: var(--color-primary-400); }
.stop-input-sm[b-2wgixc0bl9] { flex: 0 0 80px; }

.stop-edit-form[b-2wgixc0bl9],
.add-stop-form[b-2wgixc0bl9] {
    display: flex;
    gap: 0.4rem;
    align-items: center;
    flex-wrap: wrap;
    padding: 0.4rem 0;
}

.btn-save[b-2wgixc0bl9]   { padding: 0.35rem 0.65rem; background: var(--color-success-500); color: #fff; border: none; border-radius: 5px; cursor: pointer; font-size: 0.8rem; }
.btn-cancel[b-2wgixc0bl9] { padding: 0.35rem 0.65rem; background: var(--color-neutral-100); color: var(--color-neutral-600); border: none; border-radius: 5px; cursor: pointer; font-size: 0.8rem; }

.btn-primary-sm[b-2wgixc0bl9] { padding: 0.38rem 0.9rem; background: var(--color-primary-500); color: #fff; border: none; border-radius: 6px; cursor: pointer; font-size: 0.8rem; font-weight: 600; }
.btn-primary-sm:disabled[b-2wgixc0bl9] { opacity: 0.6; cursor: not-allowed; }
.btn-cancel-sm[b-2wgixc0bl9]  { padding: 0.38rem 0.75rem; background: none; color: var(--color-neutral-500); border: 1px solid var(--color-neutral-200); border-radius: 6px; cursor: pointer; font-size: 0.8rem; }

.btn-add-stop[b-2wgixc0bl9] {
    margin-top: 0.6rem;
    padding: 0.4rem 0.85rem;
    font-size: 0.78rem;
    font-weight: 600;
    border: 1px dashed var(--color-primary-300);
    border-radius: 6px;
    background: var(--color-primary-25, #f0f6ff);
    color: var(--color-primary-600);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.btn-add-stop:hover[b-2wgixc0bl9] { background: var(--color-primary-50); }

.btn-icon[b-2wgixc0bl9] {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--color-neutral-400);
    font-size: 0.75rem;
    padding: 0.2rem 0.3rem;
    border-radius: 4px;
}

.btn-icon:hover[b-2wgixc0bl9] { background: var(--color-neutral-100); color: var(--color-neutral-700); }
.btn-icon-danger:hover[b-2wgixc0bl9] { background: var(--color-danger-50); color: var(--color-danger-600); }

.form-error[b-2wgixc0bl9] {
    font-size: 0.78rem;
    color: var(--color-danger-600);
    margin-top: 0.3rem;
}

/* ── Driver Table ────────────────────────────────────────────────── */
.driver-table-wrap[b-2wgixc0bl9] { overflow-x: auto; }

.driver-table[b-2wgixc0bl9] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.83rem;
}

.driver-table th[b-2wgixc0bl9] {
    padding: 0.5rem 0.75rem;
    text-align: left;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-neutral-500);
    border-bottom: 2px solid var(--color-neutral-100);
}

.driver-table td[b-2wgixc0bl9] {
    padding: 0.6rem 0.75rem;
    color: var(--color-neutral-800);
    border-bottom: 1px solid var(--color-neutral-50);
}

.driver-table tr:hover td[b-2wgixc0bl9] { background: var(--color-neutral-25); }

/* ── Responsive ──────────────────────────────────────────────────── */
@media (max-width: 640px) {
    .stats-bar[b-2wgixc0bl9] { flex-direction: column; }
    .stat-item[b-2wgixc0bl9] { border-right: none; border-bottom: 1px solid var(--color-neutral-100); }
    .stat-item:last-child[b-2wgixc0bl9] { border-bottom: none; }
    .trip-header[b-2wgixc0bl9] { flex-wrap: wrap; }
    .stop-input-sm[b-2wgixc0bl9] { flex: 0 0 64px; }
    .driver-table th:nth-child(3)[b-2wgixc0bl9],
    .driver-table td:nth-child(3)[b-2wgixc0bl9] { display: none; }
}
/* /Pages/Profile/Index.razor.rz.scp.css */
/* ══════════════════════════════════════════════════════════════════════
   Profile Page — prof-* CSS (design-token-based, mobile-first)
   ══════════════════════════════════════════════════════════════════════ */

.profile-page[b-ivy9sjxcwd] {
    font-family: inherit;
    max-width: 1200px;
    margin: 0 auto;
}

/* ── Layout grid ──────────────────────────────────────────────────────── */
.prof-layout[b-ivy9sjxcwd] {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-5, 1.25rem);
}

@media (min-width: 1024px) {
    .prof-layout[b-ivy9sjxcwd] {
        grid-template-columns: 320px 1fr;
        align-items: start;
    }
}

.prof-left[b-ivy9sjxcwd] {
    display: flex;
    flex-direction: column;
    gap: var(--space-4, 1rem);
}

.prof-right[b-ivy9sjxcwd] {
    display: flex;
    flex-direction: column;
    gap: var(--space-4, 1rem);
}

/* ── Card ─────────────────────────────────────────────────────────────── */
.prof-card[b-ivy9sjxcwd] {
    background: #fff;
    border-radius: var(--radius-lg, 16px);
    box-shadow: var(--shadow-md, 0 4px 16px rgba(0,0,0,.08));
    padding: 1.5rem;
}

/* ── Identity card ────────────────────────────────────────────────────── */
.prof-identity-card[b-ivy9sjxcwd] {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
}

/* ── Avatar ───────────────────────────────────────────────────────────── */
.prof-avatar-wrap[b-ivy9sjxcwd] {
    position: relative;
    display: inline-block;
}

.prof-avatar[b-ivy9sjxcwd] {
    width: 140px;
    height: 140px;
    border-radius: 50%;
    overflow: hidden;
    box-shadow: 0 0 0 3px var(--color-primary, #4A9B8E), 0 0 0 6px #fff;
    flex-shrink: 0;
}

.prof-avatar-img[b-ivy9sjxcwd] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.prof-avatar-initials[b-ivy9sjxcwd] {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, var(--color-primary, #4A9B8E) 0%, var(--color-primary-600, #3D8275) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.5rem;
    font-weight: 700;
    color: #fff;
    letter-spacing: 0.04em;
}

.prof-camera-btn[b-ivy9sjxcwd] {
    position: absolute;
    bottom: 4px;
    right: 4px;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--color-primary, #4A9B8E);
    color: #fff;
    border: 2px solid #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 0.75rem;
    box-shadow: var(--shadow-sm, 0 1px 4px rgba(0,0,0,.15));
    transition: background 0.15s;
}

.prof-camera-btn:hover[b-ivy9sjxcwd] {
    background: var(--color-primary-600, #3D8275);
}

.prof-camera-btn.hidden[b-ivy9sjxcwd] {
    display: none;
}

.prof-uploading-text[b-ivy9sjxcwd] {
    font-size: 0.78rem;
    color: var(--color-primary, #4A9B8E);
    margin: 0;
}

/* ── Name / email ─────────────────────────────────────────────────────── */
.prof-name[b-ivy9sjxcwd] {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--color-neutral-900, #111827);
    margin: 0;
    line-height: 1.3;
}

.prof-email[b-ivy9sjxcwd] {
    font-size: 0.85rem;
    color: var(--color-neutral-500, #6B7280);
    margin: 0;
    word-break: break-all;
}

/* ── Badges ───────────────────────────────────────────────────────────── */
.prof-badges[b-ivy9sjxcwd] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    justify-content: center;
}

.prof-role-badge[b-ivy9sjxcwd] {
    display: inline-flex;
    align-items: center;
    padding: 0.2rem 0.75rem;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    background: var(--color-primary-50, #e6f4f2);
    color: var(--color-primary-700, #2a6b60);
}

.prof-school-badge[b-ivy9sjxcwd] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.2rem 0.75rem;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 500;
    background: var(--color-neutral-100, #F3F4F6);
    color: var(--color-neutral-600, #4B5563);
}

/* ── Profile completion bar ───────────────────────────────────────────── */
.prof-completion[b-ivy9sjxcwd] {
    width: 100%;
}

.prof-completion-header[b-ivy9sjxcwd] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.35rem;
}

.prof-completion-label[b-ivy9sjxcwd] {
    font-size: 0.75rem;
    color: var(--color-neutral-500, #6B7280);
    font-weight: 500;
}

.prof-completion-pct[b-ivy9sjxcwd] {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--color-primary, #4A9B8E);
}

.prof-progress-track[b-ivy9sjxcwd] {
    height: 6px;
    background: var(--color-neutral-100, #F3F4F6);
    border-radius: 999px;
    overflow: hidden;
}

.prof-progress-fill[b-ivy9sjxcwd] {
    height: 100%;
    background: var(--color-primary, #4A9B8E);
    border-radius: 999px;
    transition: width 0.5s ease;
}

/* ── Action buttons ───────────────────────────────────────────────────── */
.prof-actions[b-ivy9sjxcwd] {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.prof-btn-primary[b-ivy9sjxcwd] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: 44px;
    padding: 0 1.25rem;
    border-radius: var(--radius-md, 10px);
    background: var(--color-primary, #4A9B8E);
    color: #fff;
    font-size: 0.875rem;
    font-weight: 600;
    border: none;
    cursor: pointer;
    transition: background 0.15s, opacity 0.15s;
}

.prof-btn-primary:hover:not(:disabled)[b-ivy9sjxcwd] {
    background: var(--color-primary-600, #3D8275);
}

.prof-btn-primary:disabled[b-ivy9sjxcwd] {
    opacity: 0.65;
    cursor: not-allowed;
}

.prof-btn-ghost[b-ivy9sjxcwd] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: 44px;
    padding: 0 1.25rem;
    border-radius: var(--radius-md, 10px);
    background: transparent;
    color: var(--color-neutral-600, #4B5563);
    font-size: 0.875rem;
    font-weight: 500;
    border: 1.5px solid var(--color-neutral-200, #E5E7EB);
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}

.prof-btn-ghost:hover[b-ivy9sjxcwd] {
    background: var(--color-neutral-50, #F9FAFB);
    border-color: var(--color-neutral-300, #D1D5DB);
}

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

/* ── Quick contact card ───────────────────────────────────────────────── */
.prof-quick-card .prof-section-label[b-ivy9sjxcwd] {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-neutral-400, #9CA3AF);
    margin-bottom: 0.75rem;
    display: block;
}

.prof-quick-list[b-ivy9sjxcwd] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.prof-quick-row[b-ivy9sjxcwd] {
    display: flex;
    align-items: flex-start;
    gap: 0.625rem;
    padding: 0.35rem 0;
    border-bottom: 1px solid var(--color-neutral-50, #F9FAFB);
}

.prof-quick-icon[b-ivy9sjxcwd] {
    width: 16px;
    flex-shrink: 0;
    color: var(--color-primary, #4A9B8E);
    margin-top: 2px;
    font-size: 0.8rem;
}

.prof-quick-value[b-ivy9sjxcwd] {
    font-size: 0.85rem;
    color: var(--color-neutral-700, #374151);
    line-height: 1.4;
}

.prof-quick-link[b-ivy9sjxcwd] {
    font-size: 0.85rem;
    color: var(--color-primary, #4A9B8E);
    text-decoration: none;
}

.prof-quick-link:hover[b-ivy9sjxcwd] {
    text-decoration: underline;
}

/* ── Stats grid (Principal) ───────────────────────────────────────────── */
.prof-stats-grid[b-ivy9sjxcwd] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
}

@media (min-width: 768px) {
    .prof-stats-grid[b-ivy9sjxcwd] {
        grid-template-columns: repeat(4, 1fr);
    }
}

.prof-stat-card[b-ivy9sjxcwd] {
    background: #fff;
    border-radius: var(--radius-lg, 16px);
    padding: 1rem 1.125rem;
    display: flex;
    align-items: center;
    gap: 0.875rem;
    box-shadow: var(--shadow-sm, 0 1px 4px rgba(0,0,0,.06));
    border-left: 4px solid transparent;
}

.prof-stat-icon[b-ivy9sjxcwd] {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    flex-shrink: 0;
}

.prof-stat-value[b-ivy9sjxcwd] {
    font-size: 1.375rem;
    font-weight: 700;
    color: var(--color-neutral-900, #111827);
    line-height: 1;
}

.prof-stat-label[b-ivy9sjxcwd] {
    font-size: 0.72rem;
    color: var(--color-neutral-500, #6B7280);
    font-weight: 500;
    margin-top: 0.15rem;
}

/* Colour variants */
.prof-stat-teal[b-ivy9sjxcwd] {
    border-left-color: var(--color-primary, #4A9B8E);
}
.prof-stat-teal .prof-stat-icon[b-ivy9sjxcwd] {
    background: var(--color-primary-50, #e6f4f2);
    color: var(--color-primary, #4A9B8E);
}

.prof-stat-indigo[b-ivy9sjxcwd] {
    border-left-color: #6366f1;
}
.prof-stat-indigo .prof-stat-icon[b-ivy9sjxcwd] {
    background: #eef2ff;
    color: #6366f1;
}

.prof-stat-amber[b-ivy9sjxcwd] {
    border-left-color: #f59e0b;
}
.prof-stat-amber .prof-stat-icon[b-ivy9sjxcwd] {
    background: #fffbeb;
    color: #f59e0b;
}

.prof-stat-rose[b-ivy9sjxcwd] {
    border-left-color: #f43f5e;
}
.prof-stat-rose .prof-stat-icon[b-ivy9sjxcwd] {
    background: #fff1f2;
    color: #f43f5e;
}

/* ── Section header inside card ───────────────────────────────────────── */
.prof-section-title[b-ivy9sjxcwd] {
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--color-neutral-800, #1F2937);
    margin: 0 0 1rem 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.prof-section-icon[b-ivy9sjxcwd] {
    color: var(--color-primary, #4A9B8E);
    font-size: 0.9rem;
}

/* ── 2-col field grid ─────────────────────────────────────────────────── */
.prof-grid[b-ivy9sjxcwd] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.75rem;
}

@media (min-width: 640px) {
    .prof-grid[b-ivy9sjxcwd] {
        grid-template-columns: repeat(2, 1fr);
    }
}

.prof-field[b-ivy9sjxcwd] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.prof-field-full[b-ivy9sjxcwd] {
    grid-column: 1 / -1;
}

.prof-label[b-ivy9sjxcwd] {
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-neutral-500, #6B7280);
}

.prof-value[b-ivy9sjxcwd] {
    font-size: 0.9375rem;
    color: var(--color-neutral-900, #111827);
    font-weight: 500;
    word-break: break-word;
}

.prof-input[b-ivy9sjxcwd] {
    width: 100%;
    padding: 0.5rem 0.75rem;
    border: 1.5px solid var(--color-neutral-200, #E5E7EB);
    border-radius: var(--radius-md, 10px);
    font-size: 0.875rem;
    color: var(--color-neutral-900, #111827);
    background: var(--color-neutral-50, #F9FAFB);
    transition: border-color 0.15s, box-shadow 0.15s;
    outline: none;
    box-sizing: border-box;
}

.prof-input:focus[b-ivy9sjxcwd] {
    border-color: var(--color-primary, #4A9B8E);
    box-shadow: 0 0 0 3px rgba(74, 155, 142, 0.15);
    background: #fff;
}

.prof-textarea[b-ivy9sjxcwd] {
    resize: vertical;
    min-height: 80px;
}

.prof-link[b-ivy9sjxcwd] {
    font-size: 0.875rem;
    color: var(--color-primary, #4A9B8E);
    text-decoration: none;
    word-break: break-all;
}

.prof-link:hover[b-ivy9sjxcwd] {
    text-decoration: underline;
}

/* ── Sub-sections (parents list, children list) ───────────────────────── */
.prof-sub-section[b-ivy9sjxcwd] {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--color-neutral-100, #F3F4F6);
}

.prof-sub-label[b-ivy9sjxcwd] {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-neutral-400, #9CA3AF);
    margin: 0 0 0.625rem 0;
}

.prof-person-list[b-ivy9sjxcwd] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.prof-person-row[b-ivy9sjxcwd] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.625rem 0.875rem;
    background: var(--color-neutral-50, #F9FAFB);
    border-radius: var(--radius-md, 10px);
}

.prof-person-icon[b-ivy9sjxcwd] {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--color-primary-50, #e6f4f2);
    color: var(--color-primary, #4A9B8E);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.875rem;
    flex-shrink: 0;
}

.prof-person-icon--purple[b-ivy9sjxcwd] {
    background: #f5f3ff;
    color: #7c3aed;
}

.prof-person-name[b-ivy9sjxcwd] {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-neutral-900, #111827);
    margin: 0;
}

.prof-person-rel[b-ivy9sjxcwd] {
    font-weight: 400;
    color: var(--color-neutral-500, #6B7280);
}

.prof-person-sub[b-ivy9sjxcwd] {
    font-size: 0.78rem;
    color: var(--color-neutral-500, #6B7280);
    margin: 0.1rem 0 0 0;
}

/* ── Utility ──────────────────────────────────────────────────────────── */
.break-all[b-ivy9sjxcwd] {
    word-break: break-all;
}

.hidden[b-ivy9sjxcwd] {
    display: none !important;
}

.mr-1[b-ivy9sjxcwd] {
    margin-right: 0.25rem;
}
/* /Pages/Publisher/Dashboard.razor.rz.scp.css */
.publisher-dashboard[b-cjeu33y9oq] { padding: var(--space-6); max-width: 1200px; }
.page-header[b-cjeu33y9oq] { margin-bottom: var(--space-6); }
.page-title[b-cjeu33y9oq] { font-size: 1.75rem; font-weight: 700; color: var(--color-gray-900); display: flex; align-items: center; gap: var(--space-2); margin: 0 0 var(--space-1) 0; }
.page-subtitle[b-cjeu33y9oq] { color: var(--color-gray-500); margin: 0; }
.loading-center[b-cjeu33y9oq] { display: flex; justify-content: center; padding: var(--space-12); }
.spinner[b-cjeu33y9oq] { width: 40px; height: 40px; border: 4px solid var(--color-gray-200); border-top-color: #7c3aed; border-radius: 50%; animation: spin-b-cjeu33y9oq 0.8s linear infinite; }
@keyframes spin-b-cjeu33y9oq { to { transform: rotate(360deg); } }
.stats-grid[b-cjeu33y9oq] { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: var(--space-4); margin-bottom: var(--space-8); }
.stat-card[b-cjeu33y9oq] { display: flex; align-items: center; gap: var(--space-4); background: #fff; border-radius: var(--radius-xl); padding: var(--space-5); box-shadow: 0 1px 4px rgba(0,0,0,.08); }
.stat-icon[b-cjeu33y9oq] { width: 48px; height: 48px; border-radius: var(--radius-lg); display: flex; align-items: center; justify-content: center; font-size: 1.25rem; flex-shrink: 0; }
.stat-purple .stat-icon[b-cjeu33y9oq] { background: #ede9fe; color: #7c3aed; }
.stat-blue   .stat-icon[b-cjeu33y9oq] { background: #dbeafe; color: #2563eb; }
.stat-green  .stat-icon[b-cjeu33y9oq] { background: #dcfce7; color: #16a34a; }
.stat-orange .stat-icon[b-cjeu33y9oq] { background: #fed7aa; color: #ea580c; }
.stat-info[b-cjeu33y9oq] { display: flex; flex-direction: column; }
.stat-value[b-cjeu33y9oq] { font-size: 1.5rem; font-weight: 700; color: var(--color-gray-900); line-height: 1; }
.stat-label[b-cjeu33y9oq] { font-size: 0.8rem; color: var(--color-gray-500); margin-top: 2px; }
.section-title[b-cjeu33y9oq] { font-size: 1.1rem; font-weight: 600; color: var(--color-gray-800); margin: 0 0 var(--space-4) 0; }
.quick-actions[b-cjeu33y9oq] { margin-bottom: var(--space-8); }
.action-grid[b-cjeu33y9oq] { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--space-3); }
.action-card[b-cjeu33y9oq] { display: flex; flex-direction: column; align-items: center; gap: var(--space-2); background: #fff; border-radius: var(--radius-xl); padding: var(--space-5); box-shadow: 0 1px 4px rgba(0,0,0,.08); text-decoration: none; color: #7c3aed; font-weight: 600; font-size: 0.9rem; transition: box-shadow 0.2s, transform 0.2s; }
.action-card:hover[b-cjeu33y9oq] { box-shadow: 0 4px 12px rgba(124,58,237,.2); transform: translateY(-2px); }
.action-card i[b-cjeu33y9oq] { font-size: 1.5rem; }
.schools-section[b-cjeu33y9oq] { background: #fff; border-radius: var(--radius-xl); padding: var(--space-6); box-shadow: 0 1px 4px rgba(0,0,0,.08); }
.school-list[b-cjeu33y9oq] { display: flex; flex-direction: column; gap: var(--space-3); }
.school-item[b-cjeu33y9oq] { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3); border-radius: var(--radius-lg); background: var(--color-gray-50); }
.school-icon[b-cjeu33y9oq] { color: #7c3aed; font-size: 1.1rem; }
.school-name[b-cjeu33y9oq] { font-weight: 600; color: var(--color-gray-800); margin: 0; font-size: 0.9rem; }
.school-meta[b-cjeu33y9oq] { color: var(--color-gray-500); margin: 0; font-size: 0.78rem; }
.view-all-link[b-cjeu33y9oq] { display: inline-block; margin-top: var(--space-3); color: #7c3aed; font-weight: 600; font-size: 0.85rem; text-decoration: none; }
.view-all-link:hover[b-cjeu33y9oq] { text-decoration: underline; }
@media (max-width: 640px) { .stats-grid[b-cjeu33y9oq] { grid-template-columns: repeat(2, 1fr); } .action-grid[b-cjeu33y9oq] { grid-template-columns: repeat(2, 1fr); } .publisher-dashboard[b-cjeu33y9oq] { padding: var(--space-4); } }
/* /Pages/Publisher/Exams/Create.razor.rz.scp.css */
/* Publisher-specific: School assignment section */
.school-assignment-section[b-fbzj6bxp1m] {
    margin-top: var(--spacing-6);
    padding: var(--spacing-5);
    background: var(--color-neutral-50);
    border: 2px solid var(--color-neutral-200);
    border-radius: var(--radius-md);
}
.school-assignment-section h3[b-fbzj6bxp1m] { font-size: 16px; font-weight: 700; color: var(--color-neutral-900); margin: 0 0 4px 0; display: flex; align-items: center; gap: 8px; }
.school-assignment-section h3 i[b-fbzj6bxp1m] { color: #7c3aed; }
.section-hint[b-fbzj6bxp1m]  { font-size: 13px; color: var(--color-neutral-600); margin: 0 0 var(--spacing-4) 0; }
.no-schools-hint[b-fbzj6bxp1m] { font-size: 13px; color: var(--color-neutral-500); }
.schools-toggle-bar[b-fbzj6bxp1m] { margin-bottom: var(--spacing-3); }
.school-toggle-all[b-fbzj6bxp1m] { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--color-neutral-700); cursor: pointer; }
.school-toggle-all input[b-fbzj6bxp1m] { width: 16px; height: 16px; cursor: pointer; accent-color: #7c3aed; }
.schools-grid[b-fbzj6bxp1m] { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--spacing-2); margin-bottom: var(--spacing-3); }
.school-checkbox-item[b-fbzj6bxp1m] { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; border: 2px solid var(--color-neutral-200); border-radius: var(--radius-sm); cursor: pointer; background: var(--color-neutral-0); transition: all 0.15s; }
.school-checkbox-item:hover[b-fbzj6bxp1m]  { border-color: #7c3aed; background: #faf5ff; }
.school-checkbox-item.selected[b-fbzj6bxp1m] { border-color: #7c3aed; background: #f5f3ff; }
.school-checkbox-item input[b-fbzj6bxp1m] { width: 16px; height: 16px; margin-top: 2px; cursor: pointer; accent-color: #7c3aed; flex-shrink: 0; }
.school-item-info[b-fbzj6bxp1m]  { display: flex; flex-direction: column; gap: 2px; }
.school-item-name[b-fbzj6bxp1m]  { font-size: 13px; font-weight: 600; color: var(--color-neutral-800); }
.school-item-city[b-fbzj6bxp1m]  { font-size: 12px; color: var(--color-neutral-500); }
.selected-count[b-fbzj6bxp1m] { font-size: 13px; font-weight: 600; color: #7c3aed; margin: 0; display: flex; align-items: center; gap: 6px; }

/* /Pages/Publisher/Exams/Details.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════
   PDF Generation Overlay — same pattern as AdmissionForm
   ═══════════════════════════════════════════════════ */

.pdf-gen-overlay[b-zgv6lww4hu] {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.72);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    animation: pdf-overlay-in-b-zgv6lww4hu 0.25s ease;
}

@keyframes pdf-overlay-in-b-zgv6lww4hu {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.pdf-gen-card[b-zgv6lww4hu] {
    background: #fff;
    border-radius: 1.25rem;
    padding: 2.5rem 3rem;
    text-align: center;
    width: min(420px, 90vw);
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.30);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.25rem;
    animation: pdf-card-in-b-zgv6lww4hu 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes pdf-card-in-b-zgv6lww4hu {
    from { opacity: 0; transform: scale(0.88) translateY(20px); }
    to   { opacity: 1; transform: scale(1)    translateY(0);    }
}

.pdf-gen-icon-wrap[b-zgv6lww4hu] {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: pdf-icon-pulse-b-zgv6lww4hu 2s ease-in-out infinite;
}

.pdf-gen-icon[b-zgv6lww4hu] {
    font-size: 2.1rem;
    color: #fff;
}

@keyframes pdf-icon-pulse-b-zgv6lww4hu {
    0%,  100% { transform: scale(1);    box-shadow: 0 0 0 0    rgba(239, 68, 68, 0.45); }
    50%        { transform: scale(1.07); box-shadow: 0 0 0 14px rgba(239, 68, 68, 0);    }
}

.pdf-gen-title[b-zgv6lww4hu] {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--color-text-primary, #0f172a);
    margin: 0;
    letter-spacing: -0.01em;
}

/* Step row — re-animates each time _pdfStepIndex changes via key= */
.pdf-gen-step[b-zgv6lww4hu] {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    font-size: 0.9rem;
    color: var(--color-primary-600, #2563eb);
    font-weight: 500;
    min-height: 1.6rem;
    animation: pdf-step-in-b-zgv6lww4hu 0.45s ease;
}

.pdf-gen-step i[b-zgv6lww4hu] {
    font-size: 0.95rem;
    flex-shrink: 0;
}

@keyframes pdf-step-in-b-zgv6lww4hu {
    from { opacity: 0; transform: translateY(7px); }
    to   { opacity: 1; transform: translateY(0);   }
}

.pdf-gen-progress-track[b-zgv6lww4hu] {
    width: 100%;
    height: 8px;
    background: var(--color-border, #e2e8f0);
    border-radius: 999px;
    overflow: hidden;
}

.pdf-gen-progress-bar[b-zgv6lww4hu] {
    height: 100%;
    background: linear-gradient(90deg, #3b82f6 0%, #6366f1 100%);
    border-radius: 999px;
    transition: width 0.65s cubic-bezier(0.4, 0, 0.2, 1);
}

.pdf-gen-hint[b-zgv6lww4hu] {
    font-size: 0.78rem;
    color: var(--color-text-muted, #94a3b8);
    margin: 0;
}
/* /Pages/Publisher/Exams/Index.razor.rz.scp.css */

/* /Pages/Publisher/Exams/Preview.razor.rz.scp.css */
/* Question Paper Preview - Indian Traditional Style */

.question-paper-preview[b-mhm0wrqqkh] {
    min-height: 100vh;
    background: var(--color-neutral-50);
    font-family: 'Times New Roman', Times, serif;
}

/* Preview Actions (No Print) */
.preview-actions[b-mhm0wrqqkh] {
    position: sticky;
    top: 0;
    z-index: 100;
    background: white;
    border-bottom: 2px solid var(--color-neutral-200);
    padding: var(--spacing-4) var(--spacing-6);
    display: flex;
    justify-content: space-between;
    gap: var(--spacing-4);
}

/* Paper Content */
.paper-content[b-mhm0wrqqkh] {
    max-width: 210mm; /* A4 width */
    margin: 20px auto;
    background: white;
    padding: 20mm;
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
    min-height: 297mm; /* A4 height */
}

/* ==================== EXAM HEADER - INDIAN STYLE ==================== */

.exam-header[b-mhm0wrqqkh] {
    text-align: center;
    padding-bottom: 20px;
    margin-bottom: 24px;
    border: 3px double #000;
    padding: 20px;
}

/* School Logo */
.school-logo[b-mhm0wrqqkh] {
    margin: 0 auto 16px auto;
    width: 80px;
    height: 80px;
}

.school-logo img[b-mhm0wrqqkh] {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* School Information */
.school-info[b-mhm0wrqqkh] {
    margin-bottom: 16px;
}

.school-name[b-mhm0wrqqkh] {
    font-size: 20px;
    font-weight: bold;
    color: #000;
    margin: 0 0 8px 0;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.school-address[b-mhm0wrqqkh] {
    font-size: 11px;
    color: #000;
    margin: 4px 0;
}

.school-affiliation[b-mhm0wrqqkh] {
    font-size: 10px;
    color: #000;
    margin: 4px 0;
    font-style: italic;
}

/* Horizontal Divider */
.header-divider[b-mhm0wrqqkh] {
    width: 200px;
    height: 2px;
    background: #000;
    margin: 12px auto;
}

/* Exam Info */
.exam-info[b-mhm0wrqqkh] {
    margin: 16px 0;
}

.exam-session[b-mhm0wrqqkh] {
    font-size: 14px;
    font-weight: bold;
    color: #000;
    margin: 8px 0;
    text-transform: uppercase;
}

.exam-class[b-mhm0wrqqkh] {
    font-size: 16px;
    font-weight: bold;
    color: #000;
    margin: 6px 0;
    text-transform: uppercase;
}

.exam-subject[b-mhm0wrqqkh] {
    font-size: 16px;
    font-weight: bold;
    color: #000;
    margin: 6px 0;
    text-transform: uppercase;
}

/* Time and Marks Bar */
.exam-meta-bar[b-mhm0wrqqkh] {
    display: flex;
    justify-content: space-between;
    border-top: 2px solid #000;
    border-bottom: 2px solid #000;
    padding: 10px 20px;
    margin: 16px 0;
    font-size: 12px;
}

.meta-item[b-mhm0wrqqkh] {
    display: flex;
    gap: 8px;
}

.meta-label[b-mhm0wrqqkh] {
    font-weight: bold;
    color: #000;
}

.meta-value[b-mhm0wrqqkh] {
    color: #000;
}

/* Student Information Section */
.student-info-section[b-mhm0wrqqkh] {
    text-align: left;
    margin-top: 16px;
    padding: 12px 20px;
    background: #f9f9f9;
}

.student-info-row[b-mhm0wrqqkh] {
    display: flex;
    justify-content: space-between;
    margin-bottom: 8px;
    gap: 20px;
}

.info-field[b-mhm0wrqqkh] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    flex: 1;
}

.info-label[b-mhm0wrqqkh] {
    font-weight: bold;
    color: #000;
    white-space: nowrap;
}

.info-line[b-mhm0wrqqkh] {
    color: #000;
    border-bottom: 1px solid #000;
    flex: 1;
}

.info-line-short[b-mhm0wrqqkh] {
    color: #000;
    border-bottom: 1px solid #000;
    min-width: 100px;
}

/* ==================== GENERAL INSTRUCTIONS ==================== */

.general-instructions[b-mhm0wrqqkh] {
    border: 2px solid #000;
    padding: 16px 20px;
    margin: 20px 0;
    page-break-inside: avoid;
}

.instructions-header[b-mhm0wrqqkh] {
    border-bottom: 1px solid #000;
    padding-bottom: 8px;
    margin-bottom: 12px;
}

.instructions-title[b-mhm0wrqqkh] {
    font-size: 13px;
    font-weight: bold;
    color: #000;
    margin: 0;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.instructions-content[b-mhm0wrqqkh] {
    padding: 8px 0;
}

.instructions-list[b-mhm0wrqqkh] {
    margin: 0;
    padding-left: 24px;
    font-size: 11px;
    color: #000;
    line-height: 1.6;
}

.instructions-list li[b-mhm0wrqqkh] {
    margin: 6px 0;
}

/* ==================== SECTION STYLING ==================== */

.section-block[b-mhm0wrqqkh] {
    margin: 28px 0;
    page-break-inside: avoid;
}

.section-header[b-mhm0wrqqkh] {
    margin: 24px 0 20px 0;
}

.section-title-box[b-mhm0wrqqkh] {
    background: #fff;
    padding: 0;
    border: none;
}

.section-title[b-mhm0wrqqkh] {
    font-size: 13px;
    font-weight: bold;
    margin: 0;
    text-transform: uppercase;
    color: #000;
    text-align: left;
    letter-spacing: 0.5px;
}

.section-underline[b-mhm0wrqqkh] {
    width: 100%;
    height: 2px;
    background: #000;
    margin-top: 8px;
}

/* ==================== QUESTION TABLES - CBSE STYLE ==================== */

.question-table[b-mhm0wrqqkh] {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 20px;
    margin-top: 16px;
}

.question-table thead[b-mhm0wrqqkh] {
    background: white;
}

.question-table th[b-mhm0wrqqkh] {
    border: 1px solid #000;
    padding: 8px 6px;
    text-align: center;
    font-weight: bold;
    font-size: 11pt;
    background: white;
    color: #000;
}

.question-table td[b-mhm0wrqqkh] {
    border: 1px solid #000;
    padding: 10px;
    vertical-align: top;
    font-size: 11pt;
    color: #000;
}

.qno-col[b-mhm0wrqqkh] {
    width: 50px;
    text-align: center;
    font-weight: bold;
}

.marks-col[b-mhm0wrqqkh] {
    width: 60px;
    text-align: center;
    font-weight: bold;
}

.question-content[b-mhm0wrqqkh] {
    line-height: 1.6;
    color: #000;
}

/* Options Grid for MCQ */
.options-grid[b-mhm0wrqqkh] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
    margin-top: 12px;
}

.option-item[b-mhm0wrqqkh] {
    font-size: 10.5pt;
    line-height: 1.5;
    color: #000;
}

/* Exam Footer */
.exam-footer[b-mhm0wrqqkh] {
    margin-top: var(--spacing-8);
    padding-top: var(--spacing-5);
    border-top: 2px solid #000;
    text-align: center;
}

.footer-content[b-mhm0wrqqkh] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    font-size: 13px;
    color: #000;
}

.footer-content h3[b-mhm0wrqqkh] {
    font-size: 14px;
    font-weight: bold;
    margin: 0;
    text-transform: uppercase;
}

.footer-content p[b-mhm0wrqqkh] {
    margin: 4px 0;
    font-style: italic;
}

.pto[b-mhm0wrqqkh] {
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-lg);
    color: var(--color-text-primary);
}

.page-info[b-mhm0wrqqkh] {
    color: var(--color-text-secondary);
}

.roll-box[b-mhm0wrqqkh] {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    color: var(--color-text-secondary);
}

.roll-line[b-mhm0wrqqkh] {
    color: var(--color-neutral-500);
}

/* Loading & Error States */
.loading-state[b-mhm0wrqqkh],
.error-state[b-mhm0wrqqkh] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 60vh;
    gap: var(--spacing-4);
}

.spinner[b-mhm0wrqqkh] {
    width: 40px;
    height: 40px;
    border: 4px solid var(--color-neutral-200);
    border-top-color: var(--color-primary-600);
    border-radius: 50%;
    animation: spin-b-mhm0wrqqkh 0.8s linear infinite;
}

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

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

/* Mobile Devices */
@media (max-width: 767px) {
    .paper-content[b-mhm0wrqqkh] {
        max-width: 100%;
        padding: 16px;
        margin: 10px;
        box-shadow: none;
    }
    
    .exam-header[b-mhm0wrqqkh] {
        padding: 12px;
    }
    
    .school-name[b-mhm0wrqqkh] {
        font-size: 16px;
    }
    
    .exam-session[b-mhm0wrqqkh],
    .exam-class[b-mhm0wrqqkh],
    .exam-subject[b-mhm0wrqqkh] {
        font-size: 12px;
    }
    
    .exam-meta-bar[b-mhm0wrqqkh] {
        flex-direction: column;
        gap: 8px;
        padding: 8px 12px;
    }
    
    .student-info-row[b-mhm0wrqqkh] {
        flex-direction: column;
        gap: 8px;
    }
    
    .section-title[b-mhm0wrqqkh] {
        font-size: 11px;
    }
}

/* Print Styles */
@media print {
    /* Hide application layout elements */
    header[b-mhm0wrqqkh],
    nav[b-mhm0wrqqkh],
    aside[b-mhm0wrqqkh],
    .sidebar[b-mhm0wrqqkh],
    .navigation-bar[b-mhm0wrqqkh],
    .school-name-bar[b-mhm0wrqqkh],
    .hamburg-sidebar[b-mhm0wrqqkh],
    footer:not(.exam-footer)[b-mhm0wrqqkh],
    .no-print[b-mhm0wrqqkh],
    .preview-actions[b-mhm0wrqqkh] {
        display: none !important;
    }
    
    /* Reset page styles for printing */
    body[b-mhm0wrqqkh] {
        margin: 0 !important;
        padding: 0 !important;
        background: white !important;
    }
    
    .question-paper-preview[b-mhm0wrqqkh] {
        background: white;
        padding: 0 !important;
        margin: 0 !important;
    }
    
    .paper-content[b-mhm0wrqqkh] {
        max-width: 100%;
        padding: 20mm !important;
        box-shadow: none;
        margin: 0;
    }
    
    /* A4 Paper Size */
    @page {
        size: A4;
        margin: 15mm;
    }
    
    /* Exam Header - Print */
    .exam-header[b-mhm0wrqqkh] {
        border: 3px double #000;
        padding: 16px;
    }
    
    /* Avoid page breaks */
    .section-block[b-mhm0wrqqkh],
    .general-instructions[b-mhm0wrqqkh],
    .exam-header[b-mhm0wrqqkh] {
        page-break-inside: avoid;
    }
    
    /* Section header on same page as first question */
    .section-header[b-mhm0wrqqkh] {
        page-break-after: avoid;
    }
    
    /* Keep question with its answer - prevent row breaks */
    .question-table[b-mhm0wrqqkh] {
        page-break-inside: auto;
    }
    
    .question-table tr[b-mhm0wrqqkh] {
        page-break-inside: avoid;
        page-break-after: auto;
    }
    
    .question-table thead[b-mhm0wrqqkh] {
        display: table-header-group;
    }
    
    .question-table tbody[b-mhm0wrqqkh] {
        display: table-row-group;
    }
    
    /* Ensure exam footer stays at bottom */
    .exam-footer[b-mhm0wrqqkh] {
        position: relative;
        margin-top: 20px;
        page-break-before: avoid;
    }
    
    /* Black and white only */
    *[b-mhm0wrqqkh] {
        color: #000 !important;
        background: white !important;
        border-color: #000 !important;
    }
    
    .general-instructions[b-mhm0wrqqkh] {
        border: 2px solid #000 !important;
        background: white !important;
    }
    
    .student-info-section[b-mhm0wrqqkh] {
        background: white !important;
    }
    
    /* Question table borders */
    .question-table[b-mhm0wrqqkh],
    .question-table th[b-mhm0wrqqkh],
    .question-table td[b-mhm0wrqqkh] {
        border: 1px solid #000 !important;
        background: white !important;
        color: #000 !important;
    }
    
    /* Font adjustments for print */
    body[b-mhm0wrqqkh] {
        font-family: 'Times New Roman', Times, serif !important;
        font-size: 12pt !important;
        line-height: 1.5 !important;
    }
}
/* /Pages/Publisher/ExamTemplates/Create.razor.rz.scp.css */

/* /Pages/Publisher/ExamTemplates/Details.razor.rz.scp.css */

/* /Pages/Publisher/ExamTemplates/Index.razor.rz.scp.css */

/* /Pages/Publisher/Insights.razor.rz.scp.css */
.insights-page[b-6qgr0v4hdi] { padding: var(--space-6); max-width: 1200px; }
.page-header[b-6qgr0v4hdi] { margin-bottom: var(--space-6); }
.page-title[b-6qgr0v4hdi] { font-size: 1.75rem; font-weight: 700; color: var(--color-gray-900); display: flex; align-items: center; gap: var(--space-2); margin: 0 0 var(--space-1) 0; }
.page-subtitle[b-6qgr0v4hdi] { color: var(--color-gray-500); margin: 0; }
.loading-center[b-6qgr0v4hdi] { display: flex; justify-content: center; padding: var(--space-12); }
.spinner[b-6qgr0v4hdi] { width: 40px; height: 40px; border: 4px solid var(--color-gray-200); border-top-color: #7c3aed; border-radius: 50%; animation: spin-b-6qgr0v4hdi 0.8s linear infinite; }
@keyframes spin-b-6qgr0v4hdi { to { transform: rotate(360deg); } }
.empty-state[b-6qgr0v4hdi] { display: flex; flex-direction: column; align-items: center; padding: var(--space-12); color: var(--color-gray-400); text-align: center; gap: var(--space-3); }
.empty-icon[b-6qgr0v4hdi] { font-size: 3rem; }
.empty-state h3[b-6qgr0v4hdi] { font-size: 1.1rem; font-weight: 600; color: var(--color-gray-600); margin: 0; }
.stats-grid[b-6qgr0v4hdi] { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: var(--space-4); margin-bottom: var(--space-6); }
.stat-card[b-6qgr0v4hdi] { display: flex; align-items: flex-start; gap: var(--space-4); background: #fff; border-radius: var(--radius-xl); padding: var(--space-5); box-shadow: 0 1px 4px rgba(0,0,0,.08); }
.stat-icon[b-6qgr0v4hdi] { width: 48px; height: 48px; border-radius: var(--radius-lg); display: flex; align-items: center; justify-content: center; font-size: 1.25rem; flex-shrink: 0; }
.stat-purple .stat-icon[b-6qgr0v4hdi] { background: #ede9fe; color: #7c3aed; }
.stat-blue   .stat-icon[b-6qgr0v4hdi] { background: #dbeafe; color: #2563eb; }
.stat-green  .stat-icon[b-6qgr0v4hdi] { background: #dcfce7; color: #16a34a; }
.stat-orange .stat-icon[b-6qgr0v4hdi] { background: #fed7aa; color: #ea580c; }
.stat-info[b-6qgr0v4hdi] { display: flex; flex-direction: column; }
.stat-value[b-6qgr0v4hdi] { font-size: 1.75rem; font-weight: 700; color: var(--color-gray-900); line-height: 1; }
.stat-label[b-6qgr0v4hdi] { font-size: 0.8rem; color: var(--color-gray-500); margin-top: 2px; }
.stat-sub[b-6qgr0v4hdi] { font-size: 0.75rem; color: var(--color-gray-400); }
.section-card[b-6qgr0v4hdi] { background: #fff; border-radius: var(--radius-xl); padding: var(--space-6); box-shadow: 0 1px 4px rgba(0,0,0,.08); margin-bottom: var(--space-5); }
.section-title[b-6qgr0v4hdi] { font-size: 1rem; font-weight: 700; color: var(--color-gray-800); display: flex; align-items: center; gap: var(--space-2); margin: 0 0 var(--space-4) 0; }
.section-title i[b-6qgr0v4hdi] { color: #7c3aed; }
.table-wrap[b-6qgr0v4hdi] { overflow-x: auto; }
.insights-table[b-6qgr0v4hdi] { width: 100%; border-collapse: collapse; font-size: 0.875rem; }
.insights-table th[b-6qgr0v4hdi] { background: var(--color-gray-50); padding: var(--space-3) var(--space-4); text-align: left; font-weight: 600; color: var(--color-gray-600); border-bottom: 2px solid var(--color-gray-200); white-space: nowrap; }
.insights-table td[b-6qgr0v4hdi] { padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--color-gray-100); }
.insights-table tbody tr:last-child td[b-6qgr0v4hdi] { border-bottom: none; }
.insights-table tbody tr:hover[b-6qgr0v4hdi] { background: var(--color-gray-50); }
.row-inactive[b-6qgr0v4hdi] { opacity: 0.6; }
.school-name-cell[b-6qgr0v4hdi] { font-weight: 600; color: var(--color-gray-800); }
.text-muted-sm[b-6qgr0v4hdi] { color: var(--color-gray-500); font-size: 0.82rem; }
.text-center[b-6qgr0v4hdi] { text-align: center; }
.count-badge[b-6qgr0v4hdi] { font-weight: 700; font-size: 0.9rem; }
.count-q[b-6qgr0v4hdi] { color: #2563eb; }
.count-t[b-6qgr0v4hdi] { color: #16a34a; }
.count-v[b-6qgr0v4hdi] { color: #ea580c; }
.status-badge[b-6qgr0v4hdi] { font-size: 0.75rem; font-weight: 600; padding: 2px 10px; border-radius: 999px; }
.badge-active[b-6qgr0v4hdi] { background: #dcfce7; color: #16a34a; }
.badge-inactive[b-6qgr0v4hdi] { background: var(--color-gray-100); color: var(--color-gray-500); }
.charts-row[b-6qgr0v4hdi] { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-5); }
.chart-card[b-6qgr0v4hdi] { margin-bottom: 0; }
.bar-chart[b-6qgr0v4hdi] { display: flex; flex-direction: column; gap: var(--space-3); }
.bar-row[b-6qgr0v4hdi] { display: grid; grid-template-columns: 80px 1fr 36px; align-items: center; gap: var(--space-3); }
.bar-label[b-6qgr0v4hdi] { font-size: 0.82rem; color: var(--color-gray-600); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bar-track[b-6qgr0v4hdi] { background: var(--color-gray-100); border-radius: 999px; height: 10px; overflow: hidden; }
.bar-fill[b-6qgr0v4hdi] { height: 100%; border-radius: 999px; transition: width 0.5s ease; min-width: 4px; }
.bar-purple[b-6qgr0v4hdi] { background: linear-gradient(90deg, #7c3aed, #a78bfa); }
.bar-orange[b-6qgr0v4hdi] { background: linear-gradient(90deg, #ea580c, #fb923c); }
.bar-value[b-6qgr0v4hdi] { font-size: 0.82rem; font-weight: 700; color: var(--color-gray-700); text-align: right; }
@media (max-width: 900px) { .charts-row[b-6qgr0v4hdi] { grid-template-columns: 1fr; } }
@media (max-width: 640px) { .insights-page[b-6qgr0v4hdi] { padding: var(--space-4); } .stats-grid[b-6qgr0v4hdi] { grid-template-columns: repeat(2, 1fr); } .bar-row[b-6qgr0v4hdi] { grid-template-columns: 60px 1fr 32px; } }
/* /Pages/Publisher/QuestionBank.razor.rz.scp.css */
.question-bank-page[b-1d1xak2r1x] { padding: var(--space-6); max-width: 1200px; }
.page-header[b-1d1xak2r1x] { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: var(--space-5); flex-wrap: wrap; gap: var(--space-3); }
.page-title[b-1d1xak2r1x] { font-size: 1.75rem; font-weight: 700; color: var(--color-gray-900); display: flex; align-items: center; gap: var(--space-2); margin: 0 0 var(--space-1) 0; }
.page-subtitle[b-1d1xak2r1x] { color: var(--color-gray-500); margin: 0; }

.filters-bar[b-1d1xak2r1x] { display: flex; gap: var(--space-3); margin-bottom: var(--space-5); flex-wrap: wrap; }
.filter-input[b-1d1xak2r1x] { flex: 1; min-width: 180px; border: 1px solid var(--color-gray-200); border-radius: var(--radius-lg); padding: var(--space-2) var(--space-3); font-size: 0.9rem; }
.filter-select[b-1d1xak2r1x] { border: 1px solid var(--color-gray-200); border-radius: var(--radius-lg); padding: var(--space-2) var(--space-3); font-size: 0.9rem; background: #fff; }
.btn-filter[b-1d1xak2r1x] { background: var(--color-gray-100); border: 1px solid var(--color-gray-200); border-radius: var(--radius-lg); padding: var(--space-2) var(--space-4); cursor: pointer; font-size: 0.9rem; display: flex; align-items: center; gap: var(--space-2); }
.btn-filter:hover[b-1d1xak2r1x] { background: var(--color-gray-200); }
.loading-center[b-1d1xak2r1x] { display: flex; justify-content: center; padding: var(--space-12); }
.spinner[b-1d1xak2r1x] { width: 40px; height: 40px; border: 4px solid var(--color-gray-200); border-top-color: #7c3aed; border-radius: 50%; animation: spin-b-1d1xak2r1x 0.8s linear infinite; }
@keyframes spin-b-1d1xak2r1x { to { transform: rotate(360deg); } }
.empty-state[b-1d1xak2r1x] { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: var(--space-12); color: var(--color-gray-400); text-align: center; gap: var(--space-3); }
.empty-icon[b-1d1xak2r1x] { font-size: 3rem; }
.empty-state h3[b-1d1xak2r1x] { font-size: 1.1rem; font-weight: 600; color: var(--color-gray-600); margin: 0; }
.empty-state p[b-1d1xak2r1x] { margin: 0; font-size: 0.9rem; }
.question-table-wrap[b-1d1xak2r1x] { overflow-x: auto; border-radius: var(--radius-xl); box-shadow: 0 1px 4px rgba(0,0,0,.08); background: #fff; }
.question-table[b-1d1xak2r1x] { width: 100%; border-collapse: collapse; font-size: 0.875rem; }
.question-table th[b-1d1xak2r1x] { background: var(--color-gray-50); padding: var(--space-3) var(--space-4); text-align: left; font-weight: 600; color: var(--color-gray-600); border-bottom: 1px solid var(--color-gray-200); white-space: nowrap; }
.question-table td[b-1d1xak2r1x] { padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--color-gray-100); vertical-align: top; }
.question-table tr:last-child td[b-1d1xak2r1x] { border-bottom: none; }
.question-table tbody tr:hover[b-1d1xak2r1x] { background: var(--color-gray-50); }
.question-text-cell[b-1d1xak2r1x] { max-width: 340px; }
.q-text[b-1d1xak2r1x] { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; color: var(--color-gray-800); }
.q-chapter[b-1d1xak2r1x] { display: block; font-size: 0.78rem; color: var(--color-gray-500); margin-top: 2px; }
.tag-class[b-1d1xak2r1x], .tag-subject[b-1d1xak2r1x] { display: inline-block; font-size: 0.75rem; border-radius: 999px; padding: 2px 8px; margin: 1px; }
.tag-class[b-1d1xak2r1x] { background: #ede9fe; color: #7c3aed; }
.tag-subject[b-1d1xak2r1x] { background: #dbeafe; color: #1d4ed8; }
.badge-type[b-1d1xak2r1x] { background: var(--color-gray-100); color: var(--color-gray-700); border-radius: 999px; padding: 2px 8px; font-size: 0.75rem; font-weight: 600; }
.badge-diff[b-1d1xak2r1x] { border-radius: 999px; padding: 2px 8px; font-size: 0.75rem; font-weight: 600; }
.badge-easy[b-1d1xak2r1x] { background: #dcfce7; color: #16a34a; }
.badge-medium[b-1d1xak2r1x] { background: #fef9c3; color: #a16207; }
.badge-hard[b-1d1xak2r1x] { background: #fee2e2; color: #dc2626; }
.text-center[b-1d1xak2r1x] { text-align: center; }
.text-muted[b-1d1xak2r1x] { color: var(--color-gray-400); }
.action-btns[b-1d1xak2r1x] { display: flex; gap: var(--space-2); }
.btn-icon[b-1d1xak2r1x] { border: none; background: transparent; cursor: pointer; padding: 4px 8px; border-radius: var(--radius-md); font-size: 0.9rem; }
.btn-edit[b-1d1xak2r1x] { color: #7c3aed; } .btn-edit:hover[b-1d1xak2r1x] { background: #ede9fe; }
.btn-del[b-1d1xak2r1x] { color: #dc2626; } .btn-del:hover[b-1d1xak2r1x] { background: #fee2e2; }
.pagination[b-1d1xak2r1x] { display: flex; justify-content: center; align-items: center; gap: var(--space-3); padding: var(--space-4); }
.btn-page[b-1d1xak2r1x] { border: 1px solid var(--color-gray-200); background: #fff; border-radius: var(--radius-lg); padding: var(--space-2) var(--space-3); cursor: pointer; }
.btn-page:disabled[b-1d1xak2r1x] { opacity: 0.4; cursor: default; }
.page-info[b-1d1xak2r1x] { font-size: 0.9rem; color: var(--color-gray-600); }
.modal-backdrop[b-1d1xak2r1x] { position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 1000; display: flex; align-items: center; justify-content: center; padding: var(--space-4); }
.modal[b-1d1xak2r1x] { background: #fff; border-radius: var(--radius-xl); width: 100%; max-width: 600px; max-height: 90vh; display: flex; flex-direction: column; box-shadow: 0 20px 60px rgba(0,0,0,.3); }
.modal-sm[b-1d1xak2r1x] { max-width: 420px; }
.modal-header[b-1d1xak2r1x] { display: flex; justify-content: space-between; align-items: center; padding: var(--space-5) var(--space-6); border-bottom: 1px solid var(--color-gray-100); }
.modal-header h2[b-1d1xak2r1x] { margin: 0; font-size: 1.1rem; font-weight: 700; }
.modal-close[b-1d1xak2r1x] { border: none; background: transparent; cursor: pointer; color: var(--color-gray-400); font-size: 1rem; }
.modal-body[b-1d1xak2r1x] { padding: var(--space-5) var(--space-6); overflow-y: auto; flex: 1; display: flex; flex-direction: column; gap: var(--space-4); }
.modal-footer[b-1d1xak2r1x] { padding: var(--space-4) var(--space-6); border-top: 1px solid var(--color-gray-100); display: flex; justify-content: flex-end; gap: var(--space-3); }
.form-group[b-1d1xak2r1x] { display: flex; flex-direction: column; gap: var(--space-1); }
.form-group label[b-1d1xak2r1x] { font-size: 0.85rem; font-weight: 600; color: var(--color-gray-700); }
.form-row[b-1d1xak2r1x] { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
.form-control[b-1d1xak2r1x] { border: 1px solid var(--color-gray-200); border-radius: var(--radius-lg); padding: var(--space-2) var(--space-3); font-size: 0.9rem; width: 100%; }
.form-control:focus[b-1d1xak2r1x] { outline: none; border-color: #7c3aed; box-shadow: 0 0 0 3px rgba(124,58,237,.15); }
.req[b-1d1xak2r1x] { color: #dc2626; }
.error-msg[b-1d1xak2r1x] { color: #dc2626; font-size: 0.85rem; background: #fee2e2; padding: var(--space-2) var(--space-3); border-radius: var(--radius-lg); margin: 0; }
.btn-cancel[b-1d1xak2r1x] { background: var(--color-gray-100); border: none; border-radius: var(--radius-lg); padding: var(--space-2) var(--space-4); font-weight: 600; cursor: pointer; }

.spinner-sm[b-1d1xak2r1x] { display: inline-block; width: 16px; height: 16px; border: 2px solid rgba(255,255,255,.4); border-top-color: #fff; border-radius: 50%; animation: spin-b-1d1xak2r1x 0.8s linear infinite; }
@media (max-width: 640px) { .question-bank-page[b-1d1xak2r1x] { padding: var(--space-4); } .form-row[b-1d1xak2r1x] { grid-template-columns: 1fr; } .filters-bar[b-1d1xak2r1x] { flex-direction: column; } }
/* /Pages/Publisher/Schools.razor.rz.scp.css */
.publisher-schools[b-fxzyefi8w6] { padding: var(--space-6); max-width: 1200px; }
.page-header[b-fxzyefi8w6] { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: var(--space-6); }
.page-title[b-fxzyefi8w6] { font-size: 1.75rem; font-weight: 700; color: var(--color-gray-900); display: flex; align-items: center; gap: var(--space-2); margin: 0 0 var(--space-1) 0; }
.page-subtitle[b-fxzyefi8w6] { color: var(--color-gray-500); margin: 0; }
.loading-center[b-fxzyefi8w6] { display: flex; justify-content: center; padding: var(--space-12); }
.spinner[b-fxzyefi8w6] { width: 40px; height: 40px; border: 4px solid var(--color-gray-200); border-top-color: #7c3aed; border-radius: 50%; animation: spin-b-fxzyefi8w6 0.8s linear infinite; }
@keyframes spin-b-fxzyefi8w6 { to { transform: rotate(360deg); } }
.empty-state[b-fxzyefi8w6] { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: var(--space-12); color: var(--color-gray-400); text-align: center; }
.empty-icon[b-fxzyefi8w6] { font-size: 3rem; margin-bottom: var(--space-4); }
.empty-state h3[b-fxzyefi8w6] { font-size: 1.1rem; font-weight: 600; color: var(--color-gray-600); margin: 0 0 var(--space-2) 0; }
.empty-state p[b-fxzyefi8w6] { margin: 0; font-size: 0.9rem; }
.schools-grid[b-fxzyefi8w6] { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--space-5); }
.school-card[b-fxzyefi8w6] { background: #fff; border-radius: var(--radius-xl); padding: var(--space-5); box-shadow: 0 1px 4px rgba(0,0,0,.08); transition: box-shadow 0.2s; }
.school-card:hover[b-fxzyefi8w6] { box-shadow: 0 4px 12px rgba(0,0,0,.12); }
.school-card.inactive[b-fxzyefi8w6] { opacity: 0.6; }
.school-header[b-fxzyefi8w6] { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--space-4); }
.school-avatar[b-fxzyefi8w6] { width: 48px; height: 48px; background: #ede9fe; border-radius: var(--radius-lg); display: flex; align-items: center; justify-content: center; color: #7c3aed; font-size: 1.25rem; }
.school-badge[b-fxzyefi8w6] { font-size: 0.75rem; font-weight: 600; padding: 3px 10px; border-radius: 999px; }
.badge-active[b-fxzyefi8w6] { background: #dcfce7; color: #16a34a; }
.badge-inactive[b-fxzyefi8w6] { background: var(--color-gray-100); color: var(--color-gray-500); }
.school-name[b-fxzyefi8w6] { font-size: 1rem; font-weight: 700; color: var(--color-gray-900); margin: 0 0 var(--space-1) 0; }
.school-code[b-fxzyefi8w6] { font-size: 0.8rem; color: var(--color-gray-500); margin: 0 0 var(--space-3) 0; }
.school-meta-row[b-fxzyefi8w6] { display: flex; gap: var(--space-4); font-size: 0.82rem; color: var(--color-gray-600); margin-bottom: var(--space-2); flex-wrap: wrap; }
.school-meta-row i[b-fxzyefi8w6] { margin-right: 4px; color: #7c3aed; }
.school-date[b-fxzyefi8w6] { font-size: 0.82rem; color: var(--color-gray-500); margin: 0; }
.school-date i[b-fxzyefi8w6] { margin-right: 4px; }
@media (max-width: 640px) { .publisher-schools[b-fxzyefi8w6] { padding: var(--space-4); } .schools-grid[b-fxzyefi8w6] { grid-template-columns: 1fr; } }
/* /Pages/Publisher/VideoLessons.razor.rz.scp.css */
.video-lessons-page[b-xnedxngqql] { padding: var(--space-6); max-width: 1200px; }
.page-header[b-xnedxngqql] { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: var(--space-5); flex-wrap: wrap; gap: var(--space-3); }
.page-title[b-xnedxngqql] { font-size: 1.75rem; font-weight: 700; color: var(--color-gray-900); display: flex; align-items: center; gap: var(--space-2); margin: 0 0 var(--space-1) 0; }
.page-subtitle[b-xnedxngqql] { color: var(--color-gray-500); margin: 0; }

.filters-bar[b-xnedxngqql] { display: flex; gap: var(--space-3); margin-bottom: var(--space-5); flex-wrap: wrap; }
.filter-input[b-xnedxngqql] { flex: 1; min-width: 180px; border: 1px solid var(--color-gray-200); border-radius: var(--radius-lg); padding: var(--space-2) var(--space-3); font-size: 0.9rem; }
.btn-filter[b-xnedxngqql] { background: var(--color-gray-100); border: 1px solid var(--color-gray-200); border-radius: var(--radius-lg); padding: var(--space-2) var(--space-4); cursor: pointer; font-size: 0.9rem; display: flex; align-items: center; gap: var(--space-2); }
.loading-center[b-xnedxngqql] { display: flex; justify-content: center; padding: var(--space-12); }
.spinner[b-xnedxngqql] { width: 40px; height: 40px; border: 4px solid var(--color-gray-200); border-top-color: #7c3aed; border-radius: 50%; animation: spin-b-xnedxngqql 0.8s linear infinite; }
@keyframes spin-b-xnedxngqql { to { transform: rotate(360deg); } }
.empty-state[b-xnedxngqql] { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: var(--space-12); color: var(--color-gray-400); text-align: center; gap: var(--space-3); }
.empty-icon[b-xnedxngqql] { font-size: 3rem; }
.empty-state h3[b-xnedxngqql] { font-size: 1.1rem; font-weight: 600; color: var(--color-gray-600); margin: 0; }
.empty-state p[b-xnedxngqql] { margin: 0; font-size: 0.9rem; }
.videos-grid[b-xnedxngqql] { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: var(--space-4); margin-bottom: var(--space-5); }
.video-card[b-xnedxngqql] { background: #fff; border-radius: var(--radius-xl); overflow: hidden; box-shadow: 0 1px 4px rgba(0,0,0,.08); transition: box-shadow 0.2s, transform 0.2s; }
.video-card:hover[b-xnedxngqql] { box-shadow: 0 4px 16px rgba(0,0,0,.12); transform: translateY(-2px); }
.video-thumb[b-xnedxngqql] { position: relative; aspect-ratio: 16/9; overflow: hidden; background: var(--color-gray-100); }
.video-thumb img[b-xnedxngqql] { width: 100%; height: 100%; object-fit: cover; }
.thumb-placeholder img[b-xnedxngqql] { width: 100%; height: 100%; object-fit: cover; }
.duration-badge[b-xnedxngqql] { position: absolute; bottom: 8px; right: 8px; background: rgba(0,0,0,.75); color: #fff; font-size: 0.75rem; padding: 2px 6px; border-radius: var(--radius-md); }
.video-body[b-xnedxngqql] { padding: var(--space-4); display: flex; flex-direction: column; gap: var(--space-2); }
.video-title[b-xnedxngqql] { font-size: 0.95rem; font-weight: 700; color: var(--color-gray-900); margin: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.video-tags[b-xnedxngqql] { display: flex; flex-wrap: wrap; gap: 4px; }
.tag-class[b-xnedxngqql], .tag-subject[b-xnedxngqql], .tag-chapter[b-xnedxngqql] { font-size: 0.75rem; border-radius: 999px; padding: 2px 8px; }
.tag-class[b-xnedxngqql] { background: #ede9fe; color: #7c3aed; }
.tag-subject[b-xnedxngqql] { background: #dbeafe; color: #1d4ed8; }
.tag-chapter[b-xnedxngqql] { background: var(--color-gray-100); color: var(--color-gray-600); }
.video-desc[b-xnedxngqql] { font-size: 0.82rem; color: var(--color-gray-500); margin: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.video-actions[b-xnedxngqql] { display: flex; gap: var(--space-2); align-items: center; padding-top: var(--space-2); border-top: 1px solid var(--color-gray-100); }
.btn-watch[b-xnedxngqql] { display: flex; align-items: center; gap: var(--space-1); background: #ff0000; color: #fff; text-decoration: none; border-radius: var(--radius-lg); padding: 4px 12px; font-size: 0.82rem; font-weight: 600; flex: 1; justify-content: center; }
.btn-watch:hover[b-xnedxngqql] { background: #cc0000; }
.btn-icon[b-xnedxngqql] { border: none; background: transparent; cursor: pointer; padding: 6px 8px; border-radius: var(--radius-md); font-size: 0.9rem; }
.btn-edit[b-xnedxngqql] { color: #7c3aed; } .btn-edit:hover[b-xnedxngqql] { background: #ede9fe; }
.btn-del[b-xnedxngqql] { color: #dc2626; } .btn-del:hover[b-xnedxngqql] { background: #fee2e2; }
.pagination[b-xnedxngqql] { display: flex; justify-content: center; align-items: center; gap: var(--space-3); padding: var(--space-4); }
.btn-page[b-xnedxngqql] { border: 1px solid var(--color-gray-200); background: #fff; border-radius: var(--radius-lg); padding: var(--space-2) var(--space-3); cursor: pointer; }
.btn-page:disabled[b-xnedxngqql] { opacity: 0.4; cursor: default; }
.page-info[b-xnedxngqql] { font-size: 0.9rem; color: var(--color-gray-600); }
.modal-backdrop[b-xnedxngqql] { position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 1000; display: flex; align-items: center; justify-content: center; padding: var(--space-4); }
.modal[b-xnedxngqql] { background: #fff; border-radius: var(--radius-xl); width: 100%; max-width: 600px; max-height: 90vh; display: flex; flex-direction: column; box-shadow: 0 20px 60px rgba(0,0,0,.3); }
.modal-sm[b-xnedxngqql] { max-width: 420px; }
.modal-header[b-xnedxngqql] { display: flex; justify-content: space-between; align-items: center; padding: var(--space-5) var(--space-6); border-bottom: 1px solid var(--color-gray-100); }
.modal-header h2[b-xnedxngqql] { margin: 0; font-size: 1.1rem; font-weight: 700; }
.modal-close[b-xnedxngqql] { border: none; background: transparent; cursor: pointer; color: var(--color-gray-400); font-size: 1rem; }
.modal-body[b-xnedxngqql] { padding: var(--space-5) var(--space-6); overflow-y: auto; flex: 1; display: flex; flex-direction: column; gap: var(--space-4); }
.modal-footer[b-xnedxngqql] { padding: var(--space-4) var(--space-6); border-top: 1px solid var(--color-gray-100); display: flex; justify-content: flex-end; gap: var(--space-3); }
.form-group[b-xnedxngqql] { display: flex; flex-direction: column; gap: var(--space-1); }
.form-group label[b-xnedxngqql] { font-size: 0.85rem; font-weight: 600; color: var(--color-gray-700); }
.form-row[b-xnedxngqql] { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
.form-control[b-xnedxngqql] { border: 1px solid var(--color-gray-200); border-radius: var(--radius-lg); padding: var(--space-2) var(--space-3); font-size: 0.9rem; width: 100%; }
.form-control:focus[b-xnedxngqql] { outline: none; border-color: #7c3aed; box-shadow: 0 0 0 3px rgba(124,58,237,.15); }
.field-hint[b-xnedxngqql] { font-size: 0.78rem; color: var(--color-gray-400); }
.field-hint code[b-xnedxngqql] { background: var(--color-gray-100); padding: 1px 4px; border-radius: 3px; }
.req[b-xnedxngqql] { color: #dc2626; }
.error-msg[b-xnedxngqql] { color: #dc2626; font-size: 0.85rem; background: #fee2e2; padding: var(--space-2) var(--space-3); border-radius: var(--radius-lg); margin: 0; }
.btn-cancel[b-xnedxngqql] { background: var(--color-gray-100); border: none; border-radius: var(--radius-lg); padding: var(--space-2) var(--space-4); font-weight: 600; cursor: pointer; }

.spinner-sm[b-xnedxngqql] { display: inline-block; width: 16px; height: 16px; border: 2px solid rgba(255,255,255,.4); border-top-color: #fff; border-radius: 50%; animation: spin-b-xnedxngqql 0.8s linear infinite; }
@media (max-width: 640px) { .video-lessons-page[b-xnedxngqql] { padding: var(--space-4); } .videos-grid[b-xnedxngqql] { grid-template-columns: 1fr; } .form-row[b-xnedxngqql] { grid-template-columns: 1fr; } }
/* /Pages/Setup/Setup.razor.rz.scp.css */
/* ============================================
   Initial Setup Wizard styles
   Mobile-first responsive (320px, 768px, 1280px)
   Uses design tokens from design-tokens.css
   ============================================ */

.setup-page[b-av2bgnrari] {
    max-width: 1024px;
    margin: 0 auto;
    padding: 1.5rem 1rem;
    min-height: 100vh;
    background: var(--color-neutral-50, #f9fafb);
}

.setup-header[b-av2bgnrari] {
    text-align: center;
    margin-bottom: 2rem;
}
.setup-header h1[b-av2bgnrari] {
    font-size: 1.875rem;
    font-weight: 700;
    color: var(--color-neutral-900, #111827);
    margin: 0 0 0.5rem 0;
}
.setup-header p[b-av2bgnrari] {
    color: var(--color-neutral-600, #4b5563);
    font-size: 1rem;
    margin: 0;
}

.setup-card[b-av2bgnrari] {
    background: white;
    border-radius: 0.75rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    padding: 2rem;
    min-height: 400px;
}

.setup-loading[b-av2bgnrari] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 60vh;
    gap: 1rem;
}
.setup-loading p[b-av2bgnrari] { color: var(--color-neutral-600, #4b5563); }

.spinner[b-av2bgnrari] {
    width: 48px;
    height: 48px;
    border: 4px solid var(--color-neutral-200, #e5e7eb);
    border-top-color: var(--color-primary-500, #3b82f6);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}
@@keyframes spin {
    to[b-av2bgnrari] { transform: rotate(360deg); }
}

.setup-complete[b-av2bgnrari] {
    text-align: center;
    padding: 4rem 1rem;
    background: white;
    border-radius: 0.75rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}
.setup-complete h2[b-av2bgnrari] {
    margin: 1rem 0 0.5rem 0;
    color: var(--color-neutral-900, #111827);
}
.setup-complete p[b-av2bgnrari] {
    color: var(--color-neutral-600, #4b5563);
    margin-bottom: 1.5rem;
}

/* Common step-content styles */
.setup-step-content h2[b-av2bgnrari] {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--color-neutral-900, #111827);
    margin: 0 0 0.5rem 0;
}
.setup-step-content p.step-intro[b-av2bgnrari] {
    color: var(--color-neutral-600, #4b5563);
    margin: 0 0 1.5rem 0;
}

.form-group[b-av2bgnrari] {
    margin-bottom: 1rem;
}
.form-group label[b-av2bgnrari] {
    display: block;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--color-neutral-700, #374151);
    margin-bottom: 0.25rem;
}
.form-control[b-av2bgnrari] {
    display: block;
    width: 100%;
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
    line-height: 1.5;
    color: var(--color-neutral-900, #111827);
    background: white;
    border: 1px solid var(--color-neutral-300, #d1d5db);
    border-radius: 0.375rem;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.form-control:focus[b-av2bgnrari] {
    border-color: var(--color-primary-500, #3b82f6);
    outline: 0;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.form-row[b-av2bgnrari] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}
@@media (max-width: 640px) {
    .form-row[b-av2bgnrari] { grid-template-columns: 1fr; }
}

.btn-primary[b-av2bgnrari], .btn-secondary[b-av2bgnrari], .btn-success[b-av2bgnrari] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.625rem 1.25rem;
    font-size: 0.875rem;
    font-weight: 600;
    border-radius: 0.5rem;
    border: 0;
    cursor: pointer;
    transition: all 0.15s;
}
.btn-primary[b-av2bgnrari] {
    background: var(--color-primary-600, #2563eb);
    color: white;
}
.btn-primary:hover[b-av2bgnrari] { background: var(--color-primary-700, #1d4ed8); }
.btn-primary:disabled[b-av2bgnrari] { opacity: 0.5; cursor: not-allowed; }
.btn-secondary[b-av2bgnrari] {
    background: var(--color-neutral-100, #f3f4f6);
    color: var(--color-neutral-700, #374151);
    border: 1px solid var(--color-neutral-300, #d1d5db);
}
.btn-secondary:hover[b-av2bgnrari] { background: var(--color-neutral-200, #e5e7eb); }
.btn-success[b-av2bgnrari] {
    background: var(--color-success-600, #059669);
    color: white;
}
.btn-success:hover[b-av2bgnrari] { background: var(--color-success-700, #047857); }

.step-nav[b-av2bgnrari] {
    display: flex;
    justify-content: space-between;
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--color-neutral-200, #e5e7eb);
}
.step-nav .spacer[b-av2bgnrari] { flex: 1; }

@media (max-width: 768px) {
    .setup-card[b-av2bgnrari] { padding: 1.25rem; }
    .setup-page[b-av2bgnrari] { padding: 1rem 0.5rem; }
}
/* /Pages/Shared/NotificationPreferences/Index.razor.rz.scp.css */
/* NotificationPreferences page — responsive table-to-card collapse */
.prop-section[b-8idoltdk9x] { margin-bottom: 1.25rem; }

.quiet-hours-panel[b-8idoltdk9x] {
    display: grid;
    gap: var(--spacing-4);
    margin-bottom: var(--spacing-6);
    padding: var(--spacing-5);
    border: var(--spacing-1) solid var(--color-neutral-200);
    border-radius: var(--radius-md);
    background: var(--color-neutral-0);
    box-shadow: var(--shadow-sm);
}

.quiet-hours-panel h2[b-8idoltdk9x] { margin: 0; color: var(--color-neutral-900); font-size: var(--font-size-lg); }
.quiet-hours-panel p[b-8idoltdk9x] { margin: var(--spacing-1) 0 0; color: var(--color-neutral-600); font-size: var(--font-size-sm); }
.quiet-hours-toggle[b-8idoltdk9x] { display: flex; align-items: center; gap: var(--spacing-2); min-height: var(--spacing-11); color: var(--color-neutral-800); }
.quiet-hours-times[b-8idoltdk9x] { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--spacing-4); }
.quiet-hours-times label[b-8idoltdk9x] { display: grid; gap: var(--spacing-2); color: var(--color-neutral-700); font-size: var(--font-size-sm); }
.quiet-hours-times input[b-8idoltdk9x] { min-height: var(--spacing-11); padding: 0 var(--spacing-3); border: var(--spacing-1) solid var(--color-neutral-300); border-radius: var(--radius-sm); }

@media (max-width: 640px) {
    .quiet-hours-times[b-8idoltdk9x] { grid-template-columns: 1fr; }
    table[b-8idoltdk9x] { display: block; }
    thead[b-8idoltdk9x] { display: none; }
    tbody[b-8idoltdk9x] { display: block; }
    tr[b-8idoltdk9x] {
        display: flex;
        flex-wrap: wrap;
        padding: 0.75rem;
        border-bottom: 1px solid var(--color-neutral-100, #f3f4f6);
    }
    td[b-8idoltdk9x] {
        display: flex;
        align-items: center;
        width: 100%;
        padding: 0.25rem 0;
        font-size: 0.875rem;
    }
    td:first-child[b-8idoltdk9x] {
        font-weight: 600;
        font-size: 0.9rem;
        margin-bottom: 0.5rem;
    }
    td:not(:first-child)[b-8idoltdk9x] {
        width: 25%;
        justify-content: center;
    }
}
/* /Pages/Shared/Notifications/Index.razor.rz.scp.css */
/* Styles handled via Tailwind utility classes in markup */
/* /Pages/Staff/CompleteProfile.razor.rz.scp.css */
/* Styles handled via Tailwind utility classes in markup */
/* /Pages/Student/Analytics/Index.razor.rz.scp.css */
/* Performance Analytics Page */

/* Trend Badge */
.trend-badge[b-dqyzek4rc3] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.375rem 0.875rem;
    border-radius: 9999px;
    font-size: 0.8125rem;
    font-weight: 600;
    white-space: nowrap;
    align-self: flex-start;
}

.trend-improving[b-dqyzek4rc3] { background: #d1fae5; color: #065f46; }
.trend-declining[b-dqyzek4rc3]  { background: #fee2e2; color: #991b1b; }
.trend-stable[b-dqyzek4rc3]     { background: #dbeafe; color: #1e40af; }
.trend-no-data[b-dqyzek4rc3]    { background: #f3f4f6; color: #6b7280; }

/* Stat Cards */
.stat-card[b-dqyzek4rc3] {
    background: var(--color-surface, #fff);
    border: 1px solid var(--color-border, #e5e7eb);
    border-radius: 0.75rem;
    padding: 1rem;
    display: flex;
    align-items: center;
    gap: 0.875rem;
}

.stat-icon-wrapper[b-dqyzek4rc3] {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 0.625rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.stat-label[b-dqyzek4rc3] {
    font-size: 0.75rem;
    color: var(--color-text-muted, #6b7280);
    margin-bottom: 0.125rem;
}

.stat-value[b-dqyzek4rc3] {
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.2;
}

/* Analytics Cards */
.analytics-card[b-dqyzek4rc3] {
    background: var(--color-surface, #fff);
    border: 1px solid var(--color-border, #e5e7eb);
    border-radius: 0.75rem;
    padding: 1.25rem;
}

.section-title[b-dqyzek4rc3] {
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-text, #111827);
    margin-bottom: 1rem;
}

/* Progress Bars */
.progress-track[b-dqyzek4rc3] {
    flex: 1;
    height: 0.5rem;
    background: #f3f4f6;
    border-radius: 9999px;
    overflow: hidden;
}

.progress-fill[b-dqyzek4rc3] {
    height: 100%;
    border-radius: 9999px;
    transition: width 0.6s ease;
    min-width: 0.125rem;
}

/* Trend / Score Bar Chart */
.trend-chart-container[b-dqyzek4rc3] {
    display: flex;
    align-items: flex-end;
    gap: 0.375rem;
    height: 140px;
    overflow-x: auto;
    padding-bottom: 0.25rem;
}

.trend-bar-wrap[b-dqyzek4rc3] {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 2.5rem;
    flex-shrink: 0;
}

.trend-bar-track[b-dqyzek4rc3] {
    width: 1.25rem;
    height: 100px;
    background: #f3f4f6;
    border-radius: 0.25rem;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    overflow: hidden;
}

.trend-bar[b-dqyzek4rc3] {
    width: 100%;
    border-radius: 0.25rem 0.25rem 0 0;
    transition: height 0.6s ease;
    min-height: 2px;
}

.trend-bar-pct[b-dqyzek4rc3] {
    font-size: 0.625rem;
    color: #6b7280;
    margin-top: 0.25rem;
    text-align: center;
}

.trend-bar-label[b-dqyzek4rc3] {
    font-size: 0.625rem;
    color: #9ca3af;
    text-align: center;
    word-break: break-all;
    max-width: 2.5rem;
    line-height: 1.2;
}

.trend-legend[b-dqyzek4rc3] {
    display: flex;
    gap: 1rem;
    margin-top: 0.75rem;
    flex-wrap: wrap;
}

.legend-item[b-dqyzek4rc3] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.75rem;
    color: #6b7280;
}

.legend-dot[b-dqyzek4rc3] {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 9999px;
    display: inline-block;
}

/* Performance Badges */
.perf-badge[b-dqyzek4rc3] {
    padding: 0.125rem 0.5rem;
    border-radius: 9999px;
    font-size: 0.6875rem;
    font-weight: 500;
    white-space: nowrap;
}

.badge-excellent[b-dqyzek4rc3] { background: #d1fae5; color: #065f46; }
.badge-good[b-dqyzek4rc3]      { background: #dbeafe; color: #1e40af; }
.badge-fair[b-dqyzek4rc3]      { background: #fef9c3; color: #854d0e; }
.badge-poor[b-dqyzek4rc3]      { background: #fee2e2; color: #991b1b; }

/* Grade Dot */
.grade-dot[b-dqyzek4rc3] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    background: #dbeafe;
    color: #1e40af;
    border-radius: 0.375rem;
    font-size: 0.875rem;
    font-weight: 700;
}

@media (min-width: 640px) {
    .stat-card[b-dqyzek4rc3] {
        padding: 1.25rem;
    }

    .stat-value[b-dqyzek4rc3] {
        font-size: 1.5rem;
    }
}
/* /Pages/Student/Announcements/Index.razor.rz.scp.css */
.announcements-page[b-fjnnxo9txf] {
    max-width: 860px;
    margin: 0 auto;
    padding: 1.5rem 1rem;
}

/* Header */
.page-header[b-fjnnxo9txf] {
    margin-bottom: 1.75rem;
}

.page-title[b-fjnnxo9txf] {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--color-text-primary, #111827);
    margin: 0 0 0.25rem;
}

.page-subtitle[b-fjnnxo9txf] {
    font-size: 0.9rem;
    color: var(--color-text-muted, #6b7280);
    margin: 0;
}

/* Search */
.search-bar[b-fjnnxo9txf] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 0.625rem;
    padding: 0.5rem 0.875rem;
    margin-bottom: 1.25rem;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}

.search-icon[b-fjnnxo9txf] { font-size: 1rem; }

.search-input[b-fjnnxo9txf] {
    flex: 1;
    border: none;
    outline: none;
    font-size: 0.9rem;
    color: #374151;
    background: transparent;
}

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

/* Card */
.announcement-card[b-fjnnxo9txf] {
    display: flex;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 0.75rem;
    overflow: hidden;
    box-shadow: 0 1px 4px rgba(0,0,0,0.06);
    transition: box-shadow 0.15s;
}

.announcement-card:hover[b-fjnnxo9txf] {
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.card-accent[b-fjnnxo9txf] {
    width: 5px;
    background: #6b7280;
    flex-shrink: 0;
}

.announcement-card.new .card-accent[b-fjnnxo9txf]    { background: #ef4444; }
.announcement-card.recent .card-accent[b-fjnnxo9txf] { background: #3b82f6; }

.card-body[b-fjnnxo9txf] {
    padding: 1rem 1.25rem;
    flex: 1;
    min-width: 0;
}

.card-header-row[b-fjnnxo9txf] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 0.5rem;
}

.card-title[b-fjnnxo9txf] {
    font-size: 1rem;
    font-weight: 600;
    color: #111827;
    margin: 0;
    line-height: 1.4;
}

.card-date[b-fjnnxo9txf] {
    font-size: 0.78rem;
    color: #9ca3af;
    white-space: nowrap;
    flex-shrink: 0;
}

.card-content[b-fjnnxo9txf] {
    font-size: 0.875rem;
    color: #4b5563;
    line-height: 1.6;
    margin: 0 0 0.75rem;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.card-footer-row[b-fjnnxo9txf] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.card-author[b-fjnnxo9txf] {
    font-size: 0.78rem;
    color: #6b7280;
    font-style: italic;
}

.card-expiry[b-fjnnxo9txf] {
    font-size: 0.75rem;
    color: #f59e0b;
    background: #fef3c7;
    padding: 0.1rem 0.5rem;
    border-radius: 999px;
}

/* States */
.loading-container[b-fjnnxo9txf] {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 4rem 0;
    gap: 1rem;
}

.spinner[b-fjnnxo9txf] {
    width: 36px;
    height: 36px;
    border: 3px solid #e5e7eb;
    border-top-color: #3b82f6;
    border-radius: 50%;
    animation: spin-b-fjnnxo9txf 0.7s linear infinite;
}

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

.loading-text[b-fjnnxo9txf] { color: #6b7280; font-size: 0.875rem; }

.error-card[b-fjnnxo9txf] {
    text-align: center;
    padding: 3rem 1rem;
    background: #fff7f7;
    border: 1px solid #fecaca;
    border-radius: 0.75rem;
}

.error-icon[b-fjnnxo9txf] { font-size: 2rem; display: block; margin-bottom: 0.5rem; }

.btn-retry[b-fjnnxo9txf] {
    margin-top: 1rem;
    padding: 0.5rem 1.25rem;
    background: #3b82f6;
    color: #fff;
    border: none;
    border-radius: 0.5rem;
    cursor: pointer;
    font-size: 0.875rem;
}

.btn-retry:hover[b-fjnnxo9txf] { background: #2563eb; }

.empty-state[b-fjnnxo9txf] {
    text-align: center;
    padding: 4rem 1rem;
    color: #6b7280;
}

.empty-icon[b-fjnnxo9txf] { font-size: 3rem; display: block; margin-bottom: 1rem; }
.empty-state h3[b-fjnnxo9txf] { font-size: 1.1rem; font-weight: 600; color: #374151; margin-bottom: 0.5rem; }
.empty-state p[b-fjnnxo9txf]  { font-size: 0.875rem; }

/* Responsive */
@media (max-width: 640px) {
    .card-header-row[b-fjnnxo9txf] { flex-direction: column; gap: 0.25rem; }
    .card-date[b-fjnnxo9txf] { font-size: 0.72rem; }
}
/* /Pages/Student/AssignmentAccess.razor.rz.scp.css */
.access-wrapper[b-zuajd1zdpy] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    background: var(--color-bg-subtle, #f8fafc);
    padding: var(--space-4, 1rem);
}

.access-card[b-zuajd1zdpy] {
    background: #fff;
    border-radius: var(--radius-lg, 0.75rem);
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
    padding: var(--space-8, 2rem);
    width: 100%;
    max-width: 420px;
}

.error-block[b-zuajd1zdpy] {
    text-align: center;
}

.error-icon[b-zuajd1zdpy] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 4rem;
    height: 4rem;
    border-radius: 50%;
    background: var(--color-danger-100, #fee2e2);
    color: var(--color-danger-600, #dc2626);
    font-size: 1.75rem;
    margin-bottom: var(--space-4, 1rem);
}

.error-title[b-zuajd1zdpy] {
    font-size: 1.375rem;
    font-weight: 700;
    color: var(--color-text-primary, #111827);
    margin: 0 0 var(--space-4, 1rem);
}

.error-message[b-zuajd1zdpy] {
    background: var(--color-danger-50, #fef2f2);
    border-left: 4px solid var(--color-danger-400, #f87171);
    border-radius: var(--radius-sm, 0.25rem);
    padding: var(--space-3, 0.75rem) var(--space-4, 1rem);
    margin-bottom: var(--space-4, 1rem);
    text-align: left;
}

.error-message p[b-zuajd1zdpy] {
    color: var(--color-danger-700, #b91c1c);
    font-weight: 500;
    margin: 0;
}

.error-hint[b-zuajd1zdpy] {
    color: var(--color-text-secondary, #6b7280);
    font-size: 0.875rem;
    margin-bottom: var(--space-5, 1.25rem);
}

.btn-login[b-zuajd1zdpy] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2, 0.5rem);
    background: var(--color-primary, #4f46e5);
    color: #fff;
    border: none;
    border-radius: var(--radius-md, 0.5rem);
    padding: var(--space-3, 0.75rem) var(--space-6, 1.5rem);
    font-size: 0.9375rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s;
    width: 100%;
    justify-content: center;
}

.btn-login:hover[b-zuajd1zdpy] {
    background: var(--color-primary-dark, #4338ca);
}
/* /Pages/Student/Assignments/Detail.razor.rz.scp.css */
/* ── Assignment Exam-Style Shell ───────────────────────────────── */
.asgn-exam-shell[b-ee7nfzyejp] {
    display: flex;
    flex-direction: column;
    height: calc(100vh - 60px); /* subtract StudentLayout header */
    overflow: hidden;
    background: #f3f4f6;
}

/* ── Header Bar ────────────────────────────────────────────────── */
.asgn-exam-header[b-ee7nfzyejp] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.75rem 1.25rem;
    background: #1e293b;
    color: #fff;
    flex-shrink: 0;
}

.asgn-header-left[b-ee7nfzyejp] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-width: 0;
}

.asgn-back-btn[b-ee7nfzyejp] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 6px;
    background: rgba(255,255,255,0.1);
    color: #fff;
    flex-shrink: 0;
    cursor: pointer;
    border: none;
    transition: background 0.15s;
}
.asgn-back-btn:hover[b-ee7nfzyejp] { background: rgba(255,255,255,0.2); }

.asgn-header-title[b-ee7nfzyejp] {
    font-size: 1rem;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 380px;
}

.asgn-header-meta[b-ee7nfzyejp] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.75rem;
    color: rgba(255,255,255,0.65);
    flex-wrap: wrap;
}
.asgn-header-sep[b-ee7nfzyejp] { margin: 0 0.25rem; opacity: 0.5; }

.asgn-header-right[b-ee7nfzyejp] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-shrink: 0;
}

.asgn-status-badge[b-ee7nfzyejp] {
    font-size: 0.7rem;
    font-weight: 700;
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
}

.asgn-submit-btn[b-ee7nfzyejp] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.45rem 1rem;
    background: #4f46e5;
    color: #fff;
    border-radius: 8px;
    font-size: 0.8rem;
    font-weight: 600;
    border: none;
    cursor: pointer;
    transition: background 0.15s;
}
.asgn-submit-btn:hover:not(:disabled)[b-ee7nfzyejp] { background: #4338ca; }
.asgn-submit-btn:disabled[b-ee7nfzyejp] { opacity: 0.6; cursor: not-allowed; }

.asgn-submitted-chip[b-ee7nfzyejp] {
    font-size: 0.75rem;
    color: #86efac;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.3rem;
}

/* ── Body: two-column layout ───────────────────────────────────── */
.asgn-exam-body[b-ee7nfzyejp] {
    display: flex;
    flex: 1;
    overflow: hidden;
    gap: 0;
}

/* ── Left: Question Panel ──────────────────────────────────────── */
.asgn-question-panel[b-ee7nfzyejp] {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    background: #fff;
    border-right: 1px solid #e5e7eb;
}

.asgn-q-topbar[b-ee7nfzyejp] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1.5rem;
    border-bottom: 1px solid #f1f5f9;
    background: #f8fafc;
    flex-shrink: 0;
}

.asgn-q-label[b-ee7nfzyejp] {
    font-size: 0.8rem;
    font-weight: 600;
    color: #64748b;
}

.asgn-q-type-badge[b-ee7nfzyejp] {
    font-size: 0.7rem;
    font-weight: 600;
    padding: 0.15rem 0.6rem;
    background: #e0e7ff;
    color: #4338ca;
    border-radius: 999px;
}

.asgn-q-marks-badge[b-ee7nfzyejp] {
    font-size: 0.7rem;
    font-weight: 600;
    padding: 0.15rem 0.6rem;
    background: #f0fdf4;
    color: #16a34a;
    border-radius: 999px;
}

.asgn-q-body[b-ee7nfzyejp] {
    padding: 1.5rem 1.5rem 0.5rem;
}

.asgn-q-text[b-ee7nfzyejp] {
    font-size: 1rem;
    font-weight: 500;
    color: #111827;
    line-height: 1.65;
    margin-bottom: 0.75rem;
}

.asgn-feedback[b-ee7nfzyejp] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.8rem;
    font-weight: 600;
    padding: 0.4rem 0.75rem;
    border-radius: 8px;
    margin-top: 0.5rem;
}
.asgn-feedback.correct[b-ee7nfzyejp]   { background: #f0fdf4; color: #15803d; border: 1px solid #bbf7d0; }
.asgn-feedback.incorrect[b-ee7nfzyejp] { background: #fef2f2; color: #dc2626; border: 1px solid #fecaca; }

/* ── Answer Section ────────────────────────────────────────────── */
.asgn-answer-section[b-ee7nfzyejp] {
    padding: 1rem 1.5rem 1rem;
    flex: 1;
}

.asgn-answer-label[b-ee7nfzyejp] {
    font-size: 0.75rem;
    font-weight: 600;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 0.75rem;
}

/* MCQ 2-column grid */
.asgn-mcq-grid[b-ee7nfzyejp] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.6rem;
}

.asgn-mcq-option[b-ee7nfzyejp] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    border: 1.5px solid #e5e7eb;
    border-radius: 10px;
    cursor: pointer;
    background: #fff;
    transition: border-color 0.15s, background 0.15s;
}
.asgn-mcq-option:hover:not(.disabled)[b-ee7nfzyejp] {
    border-color: #a5b4fc;
    background: #f5f3ff;
}
.asgn-mcq-option.selected[b-ee7nfzyejp] {
    border-color: #4f46e5;
    background: #eef2ff;
}
.asgn-mcq-option.disabled[b-ee7nfzyejp] {
    cursor: default;
    opacity: 0.8;
}

.asgn-mcq-letter[b-ee7nfzyejp] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 6px;
    background: #e5e7eb;
    font-size: 0.8rem;
    font-weight: 700;
    color: #374151;
    flex-shrink: 0;
    transition: background 0.15s, color 0.15s;
}
.asgn-mcq-option.selected .asgn-mcq-letter[b-ee7nfzyejp] {
    background: #4f46e5;
    color: #fff;
}

.asgn-mcq-text[b-ee7nfzyejp] {
    font-size: 0.875rem;
    color: #374151;
    line-height: 1.4;
}

/* True/False row */
.asgn-tf-row[b-ee7nfzyejp] {
    display: flex;
    gap: 0.75rem;
}

.asgn-tf-btn[b-ee7nfzyejp] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.65rem 1.75rem;
    border: 1.5px solid #e5e7eb;
    border-radius: 10px;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    background: #fff;
    color: #374151;
    transition: all 0.15s;
}
.asgn-tf-btn:hover:not(.disabled)[b-ee7nfzyejp] { border-color: #a5b4fc; background: #f5f3ff; }
.asgn-tf-btn.selected[b-ee7nfzyejp] { border-color: #4f46e5; background: #eef2ff; color: #4f46e5; }
.asgn-tf-btn.disabled[b-ee7nfzyejp] { cursor: default; }

/* Textarea */
.asgn-textarea[b-ee7nfzyejp] {
    width: 100%;
    padding: 0.75rem 1rem;
    border: 1.5px solid #e5e7eb;
    border-radius: 10px;
    font-size: 0.875rem;
    color: #111827;
    resize: vertical;
    transition: border-color 0.15s;
    background: #fff;
}
.asgn-textarea:focus[b-ee7nfzyejp] { outline: none; border-color: #6366f1; box-shadow: 0 0 0 3px rgba(99,102,241,0.12); }
.asgn-textarea.readonly[b-ee7nfzyejp] { background: #f9fafb; color: #6b7280; }

/* ── Previous / Next Navigation ────────────────────────────────── */
.asgn-q-nav[b-ee7nfzyejp] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.5rem;
    border-top: 1px solid #f1f5f9;
    background: #f8fafc;
    flex-shrink: 0;
}

.asgn-nav-btn[b-ee7nfzyejp] {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.55rem 1.25rem;
    border: 1.5px solid #d1d5db;
    border-radius: 8px;
    background: #fff;
    font-size: 0.82rem;
    font-weight: 600;
    color: #374151;
    cursor: pointer;
    transition: all 0.15s;
}
.asgn-nav-btn:hover:not(:disabled)[b-ee7nfzyejp] { background: #f1f5f9; border-color: #9ca3af; }
.asgn-nav-btn:disabled[b-ee7nfzyejp] { opacity: 0.4; cursor: not-allowed; }
.asgn-nav-btn.primary[b-ee7nfzyejp] { background: #4f46e5; border-color: #4f46e5; color: #fff; }
.asgn-nav-btn.primary:hover:not(:disabled)[b-ee7nfzyejp] { background: #4338ca; }

.asgn-q-progress[b-ee7nfzyejp] {
    font-size: 0.8rem;
    font-weight: 600;
    color: #6b7280;
}

/* ── Right Sidebar ─────────────────────────────────────────────── */
.asgn-sidebar[b-ee7nfzyejp] {
    width: 260px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
    overflow-y: auto;
    background: #f8fafc;
    border-left: 1px solid #e5e7eb;
}

.asgn-palette-box[b-ee7nfzyejp],
.asgn-submit-box[b-ee7nfzyejp],
.asgn-grade-box[b-ee7nfzyejp] {
    padding: 1rem;
    border-bottom: 1px solid #e5e7eb;
}

.asgn-palette-title[b-ee7nfzyejp] {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #6b7280;
    margin-bottom: 0.75rem;
    display: flex;
    align-items: center;
}

/* Question palette grid */
.asgn-palette-grid[b-ee7nfzyejp] {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 0.35rem;
    margin-bottom: 0.6rem;
}

.asgn-palette-btn[b-ee7nfzyejp] {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 2rem;
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    border: 1.5px solid transparent;
    transition: all 0.12s;
}
.asgn-palette-btn.unanswered[b-ee7nfzyejp] { background: #fff; border-color: #d1d5db; color: #6b7280; }
.asgn-palette-btn.answered[b-ee7nfzyejp]   { background: #dcfce7; border-color: #86efac; color: #15803d; }
.asgn-palette-btn.current[b-ee7nfzyejp]    { background: #4f46e5; border-color: #4f46e5; color: #fff; }
.asgn-palette-btn:hover[b-ee7nfzyejp] { transform: scale(1.08); }

.asgn-palette-legend[b-ee7nfzyejp] {
    display: flex;
    align-items: center;
    font-size: 0.68rem;
    color: #6b7280;
    flex-wrap: wrap;
    gap: 0.15rem;
    margin-bottom: 0.6rem;
}
.legend-dot[b-ee7nfzyejp] {
    display: inline-block;
    width: 0.65rem;
    height: 0.65rem;
    border-radius: 3px;
    margin-right: 0.2rem;
}
.legend-dot.answered[b-ee7nfzyejp]   { background: #86efac; }
.legend-dot.current[b-ee7nfzyejp]    { background: #4f46e5; }
.legend-dot.unanswered[b-ee7nfzyejp] { background: #d1d5db; }

.asgn-palette-stats[b-ee7nfzyejp] {
    font-size: 0.72rem;
    color: #6b7280;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}
.asgn-palette-stats strong[b-ee7nfzyejp] { color: #111827; }

/* Sidebar inputs */
.asgn-sidebar-input[b-ee7nfzyejp] {
    width: 100%;
    padding: 0.5rem 0.7rem;
    border: 1px solid #d1d5db;
    border-radius: 7px;
    font-size: 0.8rem;
    color: #111827;
    background: #fff;
    resize: none;
    transition: border-color 0.15s;
}
.asgn-sidebar-input:focus[b-ee7nfzyejp] { outline: none; border-color: #6366f1; box-shadow: 0 0 0 2px rgba(99,102,241,0.12); }

.asgn-submit-assignment-btn[b-ee7nfzyejp] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    width: 100%;
    padding: 0.55rem;
    background: #4f46e5;
    color: #fff;
    border-radius: 8px;
    font-size: 0.82rem;
    font-weight: 600;
    border: none;
    cursor: pointer;
    transition: background 0.15s;
}
.asgn-submit-assignment-btn:hover:not(:disabled)[b-ee7nfzyejp] { background: #4338ca; }
.asgn-submit-assignment-btn:disabled[b-ee7nfzyejp] { opacity: 0.6; cursor: not-allowed; }

.asgn-grade-box[b-ee7nfzyejp] {
    background: #f0fdf4;
}

/* ── Responsive ────────────────────────────────────────────────── */
@media (max-width: 768px) {
    .asgn-exam-body[b-ee7nfzyejp] { flex-direction: column; overflow: auto; }
    .asgn-sidebar[b-ee7nfzyejp]   { width: 100%; border-left: none; border-top: 1px solid #e5e7eb; }
    .asgn-mcq-grid[b-ee7nfzyejp]  { grid-template-columns: 1fr; }
    .asgn-header-title[b-ee7nfzyejp] { max-width: 180px; }
    .asgn-exam-shell[b-ee7nfzyejp] { height: auto; overflow: auto; }
    .asgn-question-panel[b-ee7nfzyejp] { overflow: visible; }
}
/* /Pages/Student/Assignments/Index.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════
   Student Assignments — Option B Card Grid Layout
   Compact stats chips + 3-column responsive card grid
   ═══════════════════════════════════════════════════════ */

/* ── Page Shell ─────────────────────────────────────── */
.asgn-page[b-yqrkwk0dv6] {
    width: 100%;
    padding: 24px 32px;
    box-sizing: border-box;
    background: #F8FAFC;
}

/* ── Loading State ──────────────────────────────────── */
.asgn-loading[b-yqrkwk0dv6] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 60vh;
    gap: 12px;
}

.asgn-loading-icon[b-yqrkwk0dv6] { font-size: 36px; color: #4F46E5; }
.asgn-loading-text[b-yqrkwk0dv6] { font-size: 14px; color: #6B7280; margin: 0; }

/* ── Page Header ─────────────────────────────────────── */
.asgn-header[b-yqrkwk0dv6] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 16px;
}

.asgn-page-title[b-yqrkwk0dv6] { font-size: 20px; font-weight: 700; color: #111827; margin: 0; }
.asgn-page-subtitle[b-yqrkwk0dv6] { font-size: 13px; color: #6B7280; margin: 2px 0 0 0; }

.asgn-filter-btn[b-yqrkwk0dv6] {
    display: flex; align-items: center; gap: 6px; padding: 0 14px; height: 36px;
    background: #4F46E5; color: white; border: none; border-radius: 8px;
    font-size: 13px; cursor: pointer; flex-shrink: 0; transition: background 0.15s;
}

.asgn-filter-btn:hover[b-yqrkwk0dv6] { background: #4338CA; }

/* ── Compact Stats Chips ─────────────────────────────── */
.asgn-stats-bar[b-yqrkwk0dv6] {
    display: flex; gap: 12px; margin-bottom: 16px; flex-wrap: wrap;
}

.asgn-chip[b-yqrkwk0dv6] {
    background: white; border: 1px solid #E5E7EB; border-radius: 10px; padding: 8px 12px;
    display: flex; align-items: center; gap: 8px; min-width: 140px; font-family: inherit;
}

.asgn-chip i[b-yqrkwk0dv6] { font-size: 14px; width: 20px; text-align: center; }
.asgn-chip-total i[b-yqrkwk0dv6]    { color: #4F46E5; }
.asgn-chip-pending i[b-yqrkwk0dv6]  { color: #D97706; }
.asgn-chip-completed i[b-yqrkwk0dv6]{ color: #059669; }
.asgn-chip-overdue i[b-yqrkwk0dv6]  { color: #EF4444; }

.asgn-chip-number[b-yqrkwk0dv6] { font-size: 18px; font-weight: 700; line-height: 1; display: block; }
.asgn-chip-label[b-yqrkwk0dv6]  { font-size: 11px; color: #9CA3AF; margin-top: 1px; display: block; }

.asgn-urgent-dot[b-yqrkwk0dv6] { padding: 1px 6px; background: #FEE2E2; color: #DC2626; border-radius: 999px; font-size: 10px; font-weight: 600; margin-left: 4px; }
.asgn-rate-dot[b-yqrkwk0dv6]   { padding: 1px 6px; background: #DCFCE7; color: #15803D; border-radius: 999px; font-size: 10px; font-weight: 600; margin-left: 4px; }

/* ── Filter Tabs ─────────────────────────────────────── */
.asgn-tabs-wrap[b-yqrkwk0dv6] { display: flex; gap: 4px; margin-bottom: 14px; border-bottom: 1px solid #E5E7EB; padding-bottom: 0; }

.asgn-tab[b-yqrkwk0dv6] {
    padding: 8px 12px; font-size: 12px; font-weight: 500; color: #6B7280; background: transparent; border: none;
    border-bottom: 2px solid transparent; margin-bottom: -1px; cursor: pointer; transition: all 0.15s; white-space: nowrap;
}

.asgn-tab:hover[b-yqrkwk0dv6] { color: #374151; }

.asgn-tab-active[b-yqrkwk0dv6] { color: #4F46E5; border-bottom-color: #4F46E5; font-weight: 600; }

.asgn-tab-badge[b-yqrkwk0dv6] { padding: 1px 6px; border-radius: 999px; font-size: 10px; font-weight: 700; background: #EEF2FF; color: #4F46E5; margin-left: 4px; }

/* ── Card Grid Layout (Option B) ─────────────────────── */
.asgn-card-grid[b-yqrkwk0dv6] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

@media(max-width:960px){ .asgn-card-grid[b-yqrkwk0dv6]{grid-template-columns:repeat(2,minmax(0,1fr));} }
@media(max-width:640px){ .asgn-card-grid[b-yqrkwk0dv6]{grid-template-columns:1fr;} }

/* ── Single Assignment Card ─────────────────────────── */
.asg-card[b-yqrkwk0dv6] {
    background: white; border-radius: 12px; padding: 14px 16px; border: 1px solid #E5E7EB; cursor: pointer; transition: all 0.15s ease; display: flex; flex-direction: column; gap: 8px;
}

.asg-card:hover[b-yqrkwk0dv6] { box-shadow: 0 4px 16px rgba(0,0,0,0.08); transform: translateY(-1px); border-color: #D1D5DB; }

/* Top row */
.ac-top[b-yqrkwk0dv6] { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.ac-title-area[b-yqrkwk0dv6] { min-width: 0; flex: 1; }
.ac-title-row[b-yqrkwk0dv6] { display: flex; align-items: center; gap: 6px; margin-bottom: 2px; flex-wrap: wrap; }

.ac-title[b-yqrkwk0dv6] { font-size: 14px; font-weight: 600; color: #111827; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; max-width: calc(100% - 70px); }

.ac-desc[b-yqrkwk0dv6] {
    font-size: 11px; color: #9CA3AF; margin-top: 2px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.45; max-width: 100%;
}

/* Graded score inline */
.ac-graded-info[b-yqrkwk0dv6] { font-size: 11px; color: #6B7280; margin-top: 2px; display: flex; align-items: center; gap: 4px; }
.ac-pct[b-yqrkwk0dv6]         { font-weight: 700; }

/* Bottom row */
.ac-bottom[b-yqrkwk0dv6] { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: auto; padding-top: 6px; border-top: 1px solid #F3F4F6; }
.ac-meta[b-yqrkwk0dv6]    { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }

.ac-subject[b-yqrkwk0dv6] { font-size: 11px; color: #6B7280; display: flex; align-items: center; gap: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.ac-subject i[b-yqrkwk0dv6]{ color: #4F46E5; font-size: 10px; }

.asgn-due-countdown[b-yqrkwk0dv6] { font-size: 10px; color: #9CA3AF; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 80%; }
.asgn-due-overdue[b-yqrkwk0dv6]   { color: #DC2626 !important; font-weight: 600; }
.asgn-due-submitted[b-yqrkwk0dv6] { color: #059669 !important; }

/* Card action button */
.ac-btn[b-yqrkwk0dv6] { padding: 4px 10px; border-radius: 7px; font-size: 11px; font-weight: 600; cursor: pointer; border: none; white-space: nowrap; display: inline-flex; align-items: center; gap: 4px; flex-shrink: 0; transition: all 0.15s ease; }

.ac-btn.asgn-row-btn-primary[b-yqrkwk0dv6]   { background: #4F46E5; color: white; }
.ac-btn.asgn-row-btn-primary:hover[b-yqrkwk0dv6] { background: #4338CA; }

.ac-btn.asgn-row-btn-danger[b-yqrkwk0dv6]    { background: #EF4444; color: white; }
.ac-btn.asgn-row-btn-danger:hover[b-yqrkwk0dv6]   { background: #DC2626; }

.ac-btn.asgn-row-btn-outline[b-yqrkwk0dv6]   { background: white; color: #374151; border: 1px solid #D1D5DB; }
.ac-btn.asgn-row-btn-outline:hover[b-yqrkwk0dv6]{ background: #F9FAFB; border-color: #9CA3AF; }

.ac-btn.asgn-row-btn-secondary[b-yqrkwk0dv6] { background: #F3F4F6; color: #374151; }
.ac-btn.asgn-row-btn-secondary:hover[b-yqrkwk0dv6]{ background: #E5E7EB; }

.ac-btn.asgn-row-btn-success[b-yqrkwk0dv6]   { background: #DCFCE7; color: #15803D; border: 1px solid #BBF7D0; }
.ac-btn.asgn-row-btn-success:hover[b-yqrkwk0dv6]{ background: #BBF7D0; }

/* ── Status Pill (shared) ───────────────────────────── */
.asgn-status-pill[b-yqrkwk0dv6] { display: inline-flex; align-items: center; padding: 2px 7px; border-radius: 999px; font-size: 10px; font-weight: 600; white-space: nowrap; text-transform: uppercase; letter-spacing: 0.03em; }
.asgn-st-pending[b-yqrkwk0dv6]   { background: #FFFBEB; color: #D97706; }
.asgn-st-submitted[b-yqrkwk0dv6] { background: #EFF6FF; color: #1D4ED8; }
.asgn-st-graded[b-yqrkwk0dv6]    { background: #F0FDF4; color: #059669; }
.asgn-st-overdue[b-yqrkwk0dv6]   { background: #FEF2F2; color: #DC2626; }
.asgn-st-default[b-yqrkwk0dv6]   { background: #F3F4F6; color: #6B7280; }

/* ── Empty State ─────────────────────────────────────── */
.asgn-empty[b-yqrkwk0dv6] { background: white; border-radius: 14px; padding: 48px 24px; text-align: center; border: 1px solid #E5E7EB; }
.asgn-empty i[b-yqrkwk0dv6]           { font-size: 40px; color: #D1D5DB; display: block; margin-bottom: 12px; }
.asgn-empty-title[b-yqrkwk0dv6]       { font-size: 15px; font-weight: 600; color: #111827; margin: 0 0 4px 0; }
.asgn-empty-text[b-yqrkwk0dv6]        { font-size: 13px; color: #6B7280; margin: 0; }

/* ── Responsive Tweaks ─────────────────────────────── */
@media(max-width:768px){
    .asgn-page[b-yqrkwk0dv6]{ padding:16px; }
    .asgn-header[b-yqrkwk0dv6]{ flex-direction:column; align-items:flex-start; gap:12px; }
}
/* /Pages/Student/Attendance/Index.razor.rz.scp.css */
/* Styles handled via Tailwind utility classes in markup */
/* /Pages/Student/Curriculum/Index.razor.rz.scp.css */
/* Student Curriculum Page — scoped styles */

/* Subject coverage progress bar transition */
.coverage-bar[b-g11p0mbx1l] {
    transition: width 0.5s ease-in-out;
}

/* Chapter expand/collapse section */
.chapter-list-enter[b-g11p0mbx1l] {
    animation: slideDown-b-g11p0mbx1l 0.2s ease-out;
}

@keyframes slideDown-b-g11p0mbx1l {
    from { opacity: 0; transform: translateY(-8px); }
    to   { opacity: 1; transform: translateY(0); }
}
/* /Pages/Student/DailyPlanner/Index.razor.rz.scp.css */
/* Daily Planner Page Styles */

.dashboard-container[b-wo5nug3ski] {
    max-width: 1400px;
    margin: 0 auto;
    padding: 1.5rem 1rem;
}

@media (min-width: 640px) {
    .dashboard-container[b-wo5nug3ski] {
        padding: 2rem 1.5rem;
    }
}

/* Welcome Section */
.welcome-section[b-wo5nug3ski] {
    margin-bottom: 1.5rem;
}

.welcome-title[b-wo5nug3ski] {
    font-size: 1.5rem;
    font-weight: 700;
    color: #1f2937;
    margin-bottom: 0.25rem;
}

@media (min-width: 768px) {
    .welcome-title[b-wo5nug3ski] {
        font-size: 1.875rem;
    }
}

.welcome-date[b-wo5nug3ski] {
    font-size: 0.875rem;
    color: #6b7280;
}

/* Loading State */
.loading-state[b-wo5nug3ski] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4rem 1rem;
}

.spinner[b-wo5nug3ski] {
    border: 4px solid #e5e7eb;
    border-top: 4px solid #3b82f6;
    border-radius: 50%;
    width: 3rem;
    height: 3rem;
    animation: spin-b-wo5nug3ski 1s linear infinite;
}

@keyframes spin-b-wo5nug3ski {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.loading-text[b-wo5nug3ski] {
    margin-top: 1rem;
    color: #6b7280;
    font-size: 0.875rem;
}

/* Stat Cards */
.stat-card[b-wo5nug3ski] {
    background: white;
    border-radius: 0.75rem;
    padding: 1rem;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    transition: transform 0.2s, box-shadow 0.2s;
    position: relative;
    overflow: hidden;
}

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

.stat-icon-wrapper[b-wo5nug3ski] {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
}

@media (min-width: 640px) {
    .stat-icon-wrapper[b-wo5nug3ski] {
        width: 3rem;
        height: 3rem;
        font-size: 1.5rem;
    }
}

.stat-content[b-wo5nug3ski] {
    flex: 1;
}

.stat-label[b-wo5nug3ski] {
    font-size: 0.75rem;
    font-weight: 500;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.025em;
    margin-bottom: 0.25rem;
}

@media (min-width: 640px) {
    .stat-label[b-wo5nug3ski] {
        font-size: 0.875rem;
    }
}

.stat-value[b-wo5nug3ski] {
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.2;
}

@media (min-width: 640px) {
    .stat-value[b-wo5nug3ski] {
        font-size: 2rem;
    }
}

.stat-trend[b-wo5nug3ski] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.75rem;
    font-weight: 500;
    margin-top: 0.25rem;
}

.stat-trend i[b-wo5nug3ski] {
    font-size: 0.625rem;
}

/* Task Cards */
.task-card[b-wo5nug3ski] {
    background: white;
    border-radius: 0.5rem;
    padding: 1rem;
    border-left: 4px solid transparent;
    transition: all 0.2s;
    cursor: pointer;
}

.task-card:hover[b-wo5nug3ski] {
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    transform: translateX(4px);
}

.task-card.priority-high[b-wo5nug3ski] {
    border-left-color: #ef4444;
}

.task-card.priority-medium[b-wo5nug3ski] {
    border-left-color: #f59e0b;
}

.task-card.priority-low[b-wo5nug3ski] {
    border-left-color: #10b981;
}

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

.empty-state i[b-wo5nug3ski] {
    font-size: 3rem;
    color: #d1d5db;
    margin-bottom: 1rem;
}

.empty-state h3[b-wo5nug3ski] {
    font-size: 1.125rem;
    font-weight: 600;
    color: #374151;
    margin-bottom: 0.5rem;
}

.empty-state p[b-wo5nug3ski] {
    font-size: 0.875rem;
    color: #6b7280;
}

/* Button Styles */

@media (max-width: 639px) {
    
}
/* /Pages/Student/DashboardV2.razor.rz.scp.css */
/* Styles handled via Tailwind utility classes in markup */
/* /Pages/Student/ExamAccess.razor.rz.scp.css */
/* Styles handled via Tailwind utility classes in markup */
/* /Pages/Student/Exams/Details.razor.rz.scp.css */
/* Student Exam Details — Modern Redesign (design-tokens.css) */
.ea-exam-details-page[b-38pp026w1b]{max-width:1100px;margin:0 auto;padding:24px 16px 32px;font-family:var(--font-family-base,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif)}
.ea-exam-card[b-38pp026w1b]{background:#fff;border-radius:14px;box-shadow:0 1px 3px rgba(15,23,42,.06),0 0 0 1px rgba(15,23,42,.04);padding:28px;overflow-x:hidden}
.ea-subject-chip[b-38pp026w1b]{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:600;color:var(--color-teal-700,#2F6A5C);background:var(--color-teal-50,#E6F7F4);padding:4px 10px;border-radius:999px;margin-bottom:8px;text-transform:uppercase;letter-spacing:.3px}
.ea-subject-chip i[b-38pp026w1b]{font-size:10px}
.ea-header[b-38pp026w1b]{display:flex;justify-content:space-between;align-items:flex-start;gap:24px;margin-bottom:24px;flex-wrap:wrap}
.ea-title[b-38pp026w1b]{font-size:26px;font-weight:700;color:#111827;margin:0 0 5px;line-height:1.3}
.ea-context[b-38pp026w1b]{font-size:14px;color:var(--color-gray-500,#6B7280);margin:0;display:flex;align-items:center;gap:6px}
.ea-dot[b-38pp026w1b]{color:var(--color-gray-300,#D1D5DB);font-size:12px}
/* Status badge */
.ea-status-badge[b-38pp026w1b]{display:inline-flex;align-items:center;gap:6px;padding:5px 12px;border-radius:999px;font-size:12px;font-weight:600;white-space:nowrap}
.ea-status-badge i[b-38pp026w1b]{font-size:11px}
.ea-status-notstarted[b-38pp026w1b]{background:var(--color-info-50,#E6F7F4);color:var(--color-info-700,#2F6A5C)}
.ea-status-inprogress[b-38pp026w1b]{background:var(--color-warning-50,#FFF8E5);color:var(--color-warning-700,#CC8400)}
.ea-status-submitted[b-38pp026w1b]{background:var(--color-gray-100,#F3F4F6);color:#374151}
.ea-status-graded[b-38pp026w1b]{background:var(--color-success-50,#ECFDF5);color:#15803D}
/* Metadata grid */
.ea-meta-grid[b-38pp026w1b]{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;padding-bottom:24px;margin-bottom:24px;border-bottom:1px solid #F3F4F6}
.ea-meta-item[b-38pp026w1b]{display:flex;align-items:center;gap:12px}
.ea-meta-icon[b-38pp026w1b]{width:40px;height:40px;border-radius:10px;background:#F9FAFB;display:flex;align-items:center;justify-content:center;color:var(--color-teal-600,#3D8275);font-size:14px;flex-shrink:0}
.ea-meta-label[b-38pp026w1b]{display:block;font-size:11.5px;color:#6B7280;margin-bottom:2px;text-transform:uppercase;letter-spacing:.3px}
.ea-meta-value[b-38pp026w1b]{display:block;font-size:14.5px;font-weight:600;color:#1F2937}
/* Score section */
.ea-score-section[b-38pp026w1b]{background:linear-gradient(135deg,var(--color-success-50,#ECFDF5) 0%,var(--color-teal-50,#E6F7F4) 100%);border-radius:12px;padding:22px 24px;margin-bottom:28px;display:flex;align-items:center;justify-content:space-between;gap:24px}
.ea-score-label[b-38pp026w1b]{font-size:10.5px;font-weight:700;letter-spacing:.6px;color:#6B7280;text-transform:uppercase;margin-bottom:4px}
.ea-score-row[b-38pp026w1b]{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;line-height:1}
.ea-score-raw[b-38pp026w1b]{font-size:42px;font-weight:800;color:#111827;letter-spacing:-.5px}
.ea-slash[b-38pp026w1b]{font-size:32px;color:#9CA3AF;margin-left:2px}
.ea-score-meta[b-38pp026w1b]{display:flex;align-items:center;gap:10px}
.ea-percent[b-38pp026w1b]{font-size:24px;font-weight:700;color:#16A34A}
.ea-performance-tag[b-38pp026w1b]{font-size:11.5px;font-weight:600;background:#fff;color:var(--color-teal-700,#2F6A5C);padding:3px 9px;border-radius:8px;box-shadow:0 1px 2px rgba(0,0,0,.04)}
/* Progress ring */
.ea-ring-wrap[b-38pp026w1b]{width:110px;height:110px;position:relative;flex-shrink:0}
.ea-ring[b-38pp026w1b]{width:100%;height:100%}
.ea-ring-text[b-38pp026w1b]{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:18px;font-weight:700;color:#1F2937}
/* Sections */
.ea-section[b-38pp026w1b]{padding-top:24px;border-top:1px solid #F3F4F6;margin-bottom:8px}
.ea-section-title[b-38pp026w1b]{font-size:15px;font-weight:700;color:#1F2937;margin:0 0 12px;display:flex;align-items:center;gap:8px}
.ea-section-title i[b-38pp026w1b]{color:var(--color-teal-600,#3D8275);font-size:14px}
/* Instructions */
.ea-instructions-content[b-38pp026w1b]{font-size:14px;line-height:1.65;color:#374151}
/* Progress info */
.ea-progress-info .ea-progress-row[b-38pp026w1b]{display:flex;justify-content:space-between;padding:9px 12px;background:#F9FAFB;border-radius:8px;margin-bottom:6px;font-size:13.5px}
.ea-progress-info .ea-progress-row span:first-child[b-38pp026w1b]{color:#4B5563}
.ea-progress-info .ea-progress-row strong[b-38pp026w1b]{color:var(--color-teal-700,#2F6A5C)}
/* OMR */
.ea-omr-wrap[b-38pp026w1b],.ea-omr-upload-wrap[b-38pp026w1b]{background:linear-gradient(135deg,var(--color-teal-50,#E6F7F4) 0%,var(--color-warning-50,#FFF8E5) 100%);border-radius:12px;padding:18px;margin-top:16px}
.ea-omr-card[b-38pp026w1b]{background:#fff;border-radius:10px;padding:16px;font-size:13.5px;color:#374151}
.ea-omr-card h3[b-38pp026w1b]{margin:0 0 6px;font-size:15px;font-weight:700;color:#1F2937}
.ea-check-list[b-38pp026w1b]{list-style:none;padding:0;margin:8px 0 0;display:flex;flex-direction:column;gap:4px;font-size:12.5px}
.ea-check-list li i[b-38pp026w1b]{color:var(--color-warning-500,#FFA500);margin-right:3px;font-size:11px}
/* Upload */
.ea-upload-controls[b-38pp026w1b]{display:flex;align-items:center;gap:8px;margin-top:10px;flex-wrap:wrap}
.ea-upload-success[b-38pp026w1b]{padding:12px;background:var(--color-success-50,#ECFDF5);border-radius:8px;text-align:center}
.ea-check-icon[b-38pp026w1b]{font-size:24px;display:block;margin-bottom:4px}
.hidden-file-input[b-38pp026w1b]{display:none !important}
/* Actions footer */
.ea-actions[b-38pp026w1b]{padding-top:24px;border-top:1px solid #F3F4F6;margin-top:24px;display:flex;align-items:center;gap:16px;flex-wrap:wrap}
/* Buttons */
.ea-btn[b-38pp026w1b]{display:inline-flex;align-items:center;gap:7px;padding:9px 18px;border-radius:9px;font-size:13.5px;font-weight:600;cursor:pointer;transition:all .15s ease;border:none;text-decoration:none;line-height:1.4}
.ea-btn i[b-38pp026w1b]{font-size:13px}
.ea-btn-lg[b-38pp026w1b]{padding:10px 22px;font-size:14.5px}
.ea-btn-primary[b-38pp026w1b]{background:linear-gradient(135deg,var(--color-teal-600,#3D8275) 0%,var(--color-teal-700,#2F6A5C) 100%);color:#fff;box-shadow:0 2px 6px rgba(47,106,92,.28)}
.ea-btn-primary:hover[b-38pp026w1b]{background:linear-gradient(135deg,var(--color-teal-700,#2F6A5C) 0%,var(--color-teal-800,#225143) 100%);box-shadow:0 4px 10px rgba(47,106,92,.35)}
.ea-btn-outline[b-38pp026w1b]{background:#fff;color:#374151;border:1px solid #E5E7EB}
.ea-btn-outline:hover[b-38pp026w1b]{background:#F9FAFB;border-color:#D1D5DB}
.ea-btn-ghost[b-38pp026w1b]{background:transparent;color:#4B5563;padding-left:6px}
.ea-btn-ghost:hover[b-38pp026w1b]{color:var(--color-teal-700,#2F6A5C);background:var(--color-teal-50,#E6F7F4)}
/* Hints */
.ea-action-hint[b-38pp026w1b]{font-size:12px;color:#6B7280;margin:0;line-height:1.5}
.ea-warn[b-38pp026w1b]{color:var(--color-warning-700,#CC8400) !important;font-weight:600}
.ea-status-message[b-38pp026w1b]{padding:14px 18px;background:#F9FAFB;border-radius:9px;font-size:13.5px;color:#374151;line-height:1.6}
.ea-status-message p[b-38pp026w1b]{margin:2px 0}
.ea-error-text[b-38pp026w1b]{font-size:12px;color:#DC2626;margin-top:4px}
/* Responsive */
@media(max-width:900px){.ea-meta-grid[b-38pp026w1b]{grid-template-columns:repeat(2,1fr)}.ea-header[b-38pp026w1b]{flex-direction:column;gap:14px}.ea-score-section[b-38pp026w1b]{flex-direction:column-reverse;align-items:center;text-align:center}}
@media(max-width:500px){.ea-exam-details-page[b-38pp026w1b]{padding:16px 12px 24px}.ea-exam-card[b-38pp026w1b]{padding:18px 16px}.ea-meta-grid[b-38pp026w1b]{grid-template-columns:repeat(2,1fr);gap:12px}.ea-meta-icon[b-38pp026w1b]{width:34px;height:34px;font-size:12.5px}.ea-title[b-38pp026w1b]{font-size:20px}.ea-score-raw[b-38pp026w1b]{font-size:34px}.ea-percent[b-38pp026w1b]{font-size:20px}.ea-ring-wrap[b-38pp026w1b]{width:90px;height:90px}.ea-actions[b-38pp026w1b]{flex-direction:column;align-items:stretch}.ea-btn-lg[b-38pp026w1b]{justify-content:center}}

/* Loading State */
.loading-container[b-38pp026w1b] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 400px;
    gap: 1rem;
}

.spinner[b-38pp026w1b] {
    width: 48px;
    height: 48px;
    border: 4px solid var(--color-gray-200);
    border-top-color: var(--color-primary-500);
    border-radius: 50%;
    animation: spin-b-38pp026w1b 1s linear infinite;
}

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

.loading-text[b-38pp026w1b] {
    color: var(--color-gray-600);
    font-size: 1.125rem;
}

/* Error State */
.error-container[b-38pp026w1b] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 3rem 1rem;
    gap: 1.5rem;
}

.error-icon[b-38pp026w1b] {
    font-size: 4rem;
}

.error-title[b-38pp026w1b] {
    font-size: 1.875rem;
    font-weight: 700;
    color: var(--color-gray-900);
    margin: 0;
}

.error-message[b-38pp026w1b] {
    font-size: 1.125rem;
    color: var(--color-gray-700);
    max-width: 600px;
    margin: 0;
}

/* Header */
.exam-header[b-38pp026w1b] {
    margin-bottom: 2rem;
}

.breadcrumb[b-38pp026w1b] {
    font-size: 0.875rem;
    color: var(--color-gray-600);
    margin-bottom: 1rem;
}

.breadcrumb a[b-38pp026w1b] {
    color: var(--color-primary-600);
    text-decoration: none;
}

.breadcrumb a:hover[b-38pp026w1b] {
    text-decoration: underline;
}

.breadcrumb .separator[b-38pp026w1b] {
    margin: 0 0.5rem;
}

.breadcrumb .current[b-38pp026w1b] {
    color: var(--color-gray-900);
}

.exam-title[b-38pp026w1b] {
    font-size: 2rem;
    font-weight: 700;
    color: var(--color-gray-900);
    margin: 0 0 1rem 0;
}

.exam-meta[b-38pp026w1b] {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    color: var(--color-gray-600);
}

.meta-item[b-38pp026w1b] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

/* Status Banner */
.status-banner[b-38pp026w1b] {
    padding: 1rem 1.5rem;
    border-radius: var(--border-radius-lg);
    margin-bottom: 2rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 1.125rem;
}

.status-banner.status-notstarted[b-38pp026w1b] {
    background-color: var(--color-info-50);
    border-left: 4px solid var(--color-info-500);
}

.status-banner.status-inprogress[b-38pp026w1b] {
    background-color: var(--color-warning-50);
    border-left: 4px solid var(--color-warning-500);
}

.status-banner.status-submitted[b-38pp026w1b] {
    background-color: var(--color-success-50);
    border-left: 4px solid var(--color-success-500);
}

.status-banner.status-graded[b-38pp026w1b] {
    background-color: var(--color-primary-50);
    border-left: 4px solid var(--color-primary-500);
}

.status-label[b-38pp026w1b] {
    font-weight: 600;
    color: var(--color-gray-900);
}

.status-value[b-38pp026w1b] {
    font-weight: 700;
}

.status-subtext[b-38pp026w1b] {
    margin-left: auto;
    font-size: 0.875rem;
    color: var(--color-gray-600);
}

/* Info Grid */
.info-grid[b-38pp026w1b] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1rem;
    margin-bottom: 2rem;
}

.info-card[b-38pp026w1b] {
    background: var(--color-white);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--border-radius-lg);
    padding: 1.25rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    transition: box-shadow 0.2s ease;
}

.info-card:hover[b-38pp026w1b] {
    box-shadow: var(--shadow-md);
}

.info-card.highlight[b-38pp026w1b] {
    background: linear-gradient(135deg, var(--color-primary-50) 0%, var(--color-secondary-50) 100%);
    border-color: var(--color-primary-200);
}

.info-icon[b-38pp026w1b] {
    font-size: 2rem;
    color: var(--color-primary-600);
}

.info-content[b-38pp026w1b] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.info-label[b-38pp026w1b] {
    font-size: 0.875rem;
    color: var(--color-gray-600);
    font-weight: 500;
}

.info-value[b-38pp026w1b] {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--color-gray-900);
}

/* Instructions Section */
.instructions-section[b-38pp026w1b] {
    background: var(--color-gray-50);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--border-radius-lg);
    padding: 1.5rem;
    margin-bottom: 2rem;
}

.section-title[b-38pp026w1b] {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--color-gray-900);
    margin: 0 0 1rem 0;
}

.section-title i[b-38pp026w1b] {
    margin-right: var(--spacing-2);
    color: var(--color-primary-600);
}

.instructions-content[b-38pp026w1b] {
    font-size: 1rem;
    line-height: 1.6;
    color: var(--color-gray-700);
}

/* Progress Section */
.progress-section[b-38pp026w1b] {
    background: var(--color-white);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--border-radius-lg);
    padding: 1.5rem;
    margin-bottom: 2rem;
}

.progress-info[b-38pp026w1b] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.progress-item[b-38pp026w1b] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem;
    background: var(--color-gray-50);
    border-radius: var(--border-radius-md);
}

.progress-label[b-38pp026w1b] {
    font-weight: 600;
    color: var(--color-gray-700);
}

.progress-value[b-38pp026w1b] {
    font-weight: 700;
    color: var(--color-primary-600);
}

/* OMR Download Section */
.omr-download-section[b-38pp026w1b] {
    background: linear-gradient(135deg, var(--color-primary-50) 0%, var(--color-secondary-50) 100%);
    border: 2px solid var(--color-primary-200);
    border-radius: var(--border-radius-lg);
    padding: 1.5rem;
    margin-bottom: 2rem;
}

.omr-download-card[b-38pp026w1b] {
    background: var(--color-white);
    border-radius: var(--border-radius-md);
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.omr-icon[b-38pp026w1b] {
    font-size: 3rem;
    text-align: center;
}

.omr-content h3[b-38pp026w1b] {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--color-gray-900);
    margin: 0 0 0.75rem 0;
}

.omr-content p[b-38pp026w1b] {
    font-size: 1rem;
    color: var(--color-gray-700);
    line-height: 1.6;
    margin: 0 0 1rem 0;
}

.omr-instructions[b-38pp026w1b] {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.omr-instructions li[b-38pp026w1b] {
    font-size: 0.875rem;
    color: var(--color-gray-700);
    padding-left: 1.5rem;
    position: relative;
}

.omr-instructions li[b-38pp026w1b]::before {
    position: absolute;
    left: 0;
}

.omr-actions[b-38pp026w1b] {
    display: flex;
    justify-content: center;
    gap: 1rem;
}

/* OMR Upload Section */
.omr-upload-section[b-38pp026w1b] {
    background: linear-gradient(135deg, var(--color-success-50, #f0fdf4) 0%, var(--color-primary-50) 100%);
    border: 2px solid var(--color-success-200, #bbf7d0);
    border-radius: var(--border-radius-lg);
    padding: 1.5rem;
    margin-bottom: 2rem;
}

.omr-upload-card[b-38pp026w1b] {
    background: var(--color-white);
    border-radius: var(--border-radius-md);
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.omr-upload-area[b-38pp026w1b] {
    display: flex;
    justify-content: center;
}

.upload-controls[b-38pp026w1b] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    width: 100%;
    max-width: 400px;
}

.omr-file-input[b-38pp026w1b] {
    display: none;
}

.omr-file-label[b-38pp026w1b] {
    cursor: pointer;
    width: 100%;
    justify-content: center;
    text-align: center;
    word-break: break-all;
}

.upload-success[b-38pp026w1b] {
    text-align: center;
    padding: 1.5rem;
}

.success-icon[b-38pp026w1b] {
    font-size: 3rem;
    display: block;
    margin-bottom: 0.75rem;
}

.upload-success p[b-38pp026w1b] {
    color: var(--color-success-700, #15803d);
    font-weight: 600;
    margin: 0 0 0.5rem 0;
}

.upload-hint[b-38pp026w1b] {
    font-size: 0.875rem;
    color: var(--color-gray-600) !important;
    font-weight: 400 !important;
}

.upload-error[b-38pp026w1b] {
    color: var(--color-danger-600, #dc2626);
    font-size: 0.875rem;
    text-align: center;
    margin: 0;
}

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

.spinning[b-38pp026w1b] {
    display: inline-block;
    animation: spin-b-38pp026w1b 1s linear infinite;
}

/* Action Buttons */
.action-buttons[b-38pp026w1b] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    margin-top: 2rem;
}

.btn[b-38pp026w1b] {
    padding: 0.75rem 2rem;
    border-radius: var(--border-radius-md);
    font-weight: 600;
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.2s ease;
    border: none;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.btn-large[b-38pp026w1b] {
    padding: 1rem 3rem;
    font-size: 1.125rem;
}

.btn-outline[b-38pp026w1b] {
    background: transparent;
    color: var(--color-gray-700);
    border: 1px solid var(--color-gray-300);
}

.btn-outline:hover[b-38pp026w1b] {
    background: var(--color-gray-50);
    border-color: var(--color-gray-400);
}

.btn-icon[b-38pp026w1b] {
    font-size: 1.25rem;
}

.action-hint[b-38pp026w1b] {
    text-align: center;
    color: var(--color-gray-600);
    font-size: 0.875rem;
    margin: 0;
}

.action-hint.warning[b-38pp026w1b] {
    color: var(--color-warning-700);
    font-weight: 600;
}

.status-message[b-38pp026w1b] {
    text-align: center;
    padding: 2rem;
    background: var(--color-gray-50);
    border-radius: var(--border-radius-lg);
    border: 1px solid var(--color-gray-200);
}

.status-message p[b-38pp026w1b] {
    margin: 0.5rem 0;
    color: var(--color-gray-700);
}

.status-message.warning[b-38pp026w1b] {
    background: var(--color-warning-50);
    border-color: var(--color-warning-200);
}

/* Responsive */
@media (max-width: 768px) {
    .exam-details-page[b-38pp026w1b] {
        padding: 1rem;
    }

    .exam-title[b-38pp026w1b] {
        font-size: 1.5rem;
    }

    .exam-meta[b-38pp026w1b] {
        flex-direction: column;
        gap: 0.75rem;
    }

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

    .btn-large[b-38pp026w1b] {
        width: 100%;
        justify-content: center;
    }

    .status-banner[b-38pp026w1b],
    .progress-item[b-38pp026w1b] {
        align-items: flex-start;
        flex-direction: column;
    }

    .status-subtext[b-38pp026w1b] {
        margin-left: 0;
    }

    .action-buttons .btn[b-38pp026w1b] {
        min-height: 44px;
    }
}
/* /Pages/Student/Exams/Index.razor.rz.scp.css */
/* 
 * Scoped CSS for Student Exams Index page.
 * Most styling is handled by Tailwind utility classes in the Razor file.
 * Use this file for any custom overrides or complex animations.
 */
/* /Pages/Student/Exams/OmrPrintout.razor.rz.scp.css */
/* ── Student OMR Printout Page ── */

.omr-printout-page[b-jedp547hqy] {
    font-family: var(--font-family-base);
    background: #f5f5f5;
    min-height: 100vh;
    padding: 1.5rem;
}

/* ── Print Controls (hidden on print) ── */

.print-controls[b-jedp547hqy] {
    max-width: 820px;
    margin: 0 auto 1.5rem;
    background: #fff;
    border: 1px solid var(--color-border, #e2e8f0);
    border-radius: 8px;
    padding: 1rem 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.print-actions[b-jedp547hqy] {
    display: flex;
    gap: 1rem;
    align-items: center;
    flex-wrap: wrap;
}

.print-hint[b-jedp547hqy] {
    font-size: 0.875rem;
    color: var(--color-text-muted, #64748b);
    margin: 0;
}

/* ── OMR Sheet ── */

.omr-sheet[b-jedp547hqy] {
    max-width: 820px;
    margin: 0 auto;
    background: #fff;
    border: 1px solid #ccc;
    padding: 28px 36px;
    font-family: 'Times New Roman', Times, serif;
    font-size: 11pt;
    color: #000;
}

.omr-title-bar[b-jedp547hqy] {
    text-align: center;
    margin-bottom: 10px;
}

.omr-badge[b-jedp547hqy] {
    display: inline-block;
    border: 2px solid #000;
    padding: 4px 18px;
    font-size: 13pt;
    font-weight: bold;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 6px;
}

.omr-school-name[b-jedp547hqy] {
    font-size: 12pt;
    font-weight: bold;
    margin: 4px 0;
}

.omr-school-address[b-jedp547hqy],
.omr-affiliation[b-jedp547hqy] {
    font-size: 10pt;
    margin: 2px 0;
    color: #333;
}

.omr-exam-info[b-jedp547hqy] {
    font-size: 10.5pt;
    padding: 4px 0;
    text-align: center;
}

.omr-divider[b-jedp547hqy] {
    border: none;
    border-top: 1.5px solid #000;
    margin: 8px 0;
}

.omr-divider-thin[b-jedp547hqy] {
    border: none;
    border-top: 0.5px solid #555;
    margin: 4px 0;
}

.omr-student-row[b-jedp547hqy] {
    display: flex;
    gap: 24px;
    margin: 6px 0;
    align-items: center;
    flex-wrap: wrap;
}

.omr-field[b-jedp547hqy] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 10.5pt;
}

.omr-field-value[b-jedp547hqy] {
    font-weight: bold;
    font-size: 11pt;
    border-bottom: 1px solid #000;
    min-width: 120px;
    padding: 0 4px;
}

.omr-field-line[b-jedp547hqy] {
    display: inline-block;
    border-bottom: 1px solid #000;
    width: 140px;
}

.omr-field-line-short[b-jedp547hqy] {
    display: inline-block;
    border-bottom: 1px solid #000;
    width: 80px;
}

.omr-instructions-line[b-jedp547hqy] {
    font-size: 9.5pt;
    margin: 4px 0;
}

/* ── Bubble Grid ── */

.omr-bubble-grid[b-jedp547hqy] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 2px 6px;
    margin: 10px 0;
}

.omr-bubble-row[b-jedp547hqy] {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 2px 0;
}

.omr-qno[b-jedp547hqy] {
    min-width: 28px;
    font-size: 10pt;
    font-weight: bold;
    text-align: right;
}

.omr-bubble[b-jedp547hqy] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 1.5px solid #000;
    font-size: 9pt;
    font-weight: bold;
    cursor: default;
    background: white;
    margin: 0 1px;
}

/* ── Footer Note ── */

.omr-note[b-jedp547hqy] {
    font-size: 9.5pt;
    margin-top: 14px;
    padding: 8px 10px;
    border: 1px solid #000;
    line-height: 1.5;
}

.omr-note ul[b-jedp547hqy] {
    margin: 4px 0;
    padding-left: 20px;
}

/* ── Error / Loading States ── */

.loading-container[b-jedp547hqy] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 300px;
    gap: 1rem;
}

.error-container[b-jedp547hqy] {
    max-width: 600px;
    margin: 2rem auto;
    text-align: center;
}

.error-message[b-jedp547hqy] {
    color: var(--color-danger, #dc2626);
    margin-bottom: 1rem;
}

/* ── Print Media Query ── */

@media print {
    .no-print[b-jedp547hqy] {
        display: none !important;
    }

    .omr-printout-page[b-jedp547hqy] {
        background: none;
        padding: 0;
    }

    .omr-sheet[b-jedp547hqy] {
        border: none;
        padding: 0;
        max-width: 100%;
    }

    .omr-bubble-row[b-jedp547hqy] {
        break-inside: avoid;
    }
}
/* /Pages/Student/Exams/Results.razor.rz.scp.css */
/* Styles handled via Tailwind utility classes in markup */
/* /Pages/Student/Exams/Submitted.razor.rz.scp.css */
/* Styles handled via Tailwind utility classes in markup */
/* /Pages/Student/Exams/TakeExam.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════
   TakeExam — Student Exam Interface
   Design: Modern online exam UI (no design tokens)
   ═══════════════════════════════════════════════════════ */

/* ── Reset & Container ── */
.exam-container[b-kxmoj6kupc] {
    display: flex;
    flex-direction: column;
    height: 100vh;
    background: #f0f4f8;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    color: #2c3e50;
    overflow: hidden;
}

/* ── Header Bar ── */
.exam-header[b-kxmoj6kupc] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 20px;
    background: #1e3a5f;
    color: #fff;
    position: sticky;
    top: 0;
    z-index: 100;
    gap: 16px;
    min-height: 60px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.25);
}

.exam-header-left[b-kxmoj6kupc] {
    flex: 1;
    min-width: 0;
}

.exam-title[b-kxmoj6kupc] {
    font-size: 16px;
    font-weight: 700;
    color: #ffffff;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.exam-subtitle[b-kxmoj6kupc] {
    font-size: 12px;
    color: #a8c4e0;
    display: block;
    margin-top: 2px;
}

.exam-header-center[b-kxmoj6kupc] {
    flex-shrink: 0;
}

.exam-header-right[b-kxmoj6kupc] {
    display: flex;
    gap: 10px;
    flex-shrink: 0;
    align-items: center;
}

/* ── Main Content Layout ── */
.exam-content[b-kxmoj6kupc] {
    display: flex;
    flex: 1;
    overflow: hidden;
}

/* ── Question Area (left / main) ── */
.question-area[b-kxmoj6kupc] {
    flex: 1;
    overflow-y: auto;
    padding: 20px 24px;
    background: #f0f4f8;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.answer-section[b-kxmoj6kupc] {
    background: #ffffff;
    border: 1px solid #d1dce8;
    border-radius: 8px;
    padding: 20px 24px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.06);
}

/* ── Question Palette Sidebar (right) ── */
.palette-area[b-kxmoj6kupc] {
    width: 288px;
    flex-shrink: 0;
    overflow-y: auto;
    background: #ffffff;
    border-left: 1px solid #d1dce8;
    padding: 16px;
}

/* ── Auto-Save Indicator ── */
.autosave-indicator[b-kxmoj6kupc] {
    position: fixed;
    bottom: 16px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 16px;
    background: #ffffff;
    border: 1px solid #d1dce8;
    border-radius: 20px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.12);
    font-size: 12px;
    color: #5a6a7e;
    z-index: 90;
    white-space: nowrap;
}

.autosave-indicator[data-status="saving"][b-kxmoj6kupc] {
    border-color: #90b8d8;
    background: #eaf4fc;
    color: #1d6fa4;
}

.autosave-indicator[data-status="saved"][b-kxmoj6kupc] {
    border-color: #7dc4a0;
    background: #edfaf3;
    color: #217a4f;
}

.autosave-indicator[data-status="failed"][b-kxmoj6kupc] {
    border-color: #f5aaaa;
    background: #fff0f0;
    color: #c0392b;
}

/* ── Header Buttons ── */
.btn-sm[b-kxmoj6kupc] {
    padding: 7px 14px;
    font-size: 13px;
    font-weight: 600;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border: none;
    transition: background 0.15s, box-shadow 0.15s;
    text-decoration: none;
}

/* ── Modal Overlay ── */
.modal-overlay[b-kxmoj6kupc] {
    position: fixed;
    inset: 0;
    background: rgba(15,25,40,0.55);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 16px;
}

.modal-content[b-kxmoj6kupc] {
    background: #ffffff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0,0,0,0.3);
    width: 100%;
}

.max-w-md[b-kxmoj6kupc] { max-width: 480px; }

.modal-header[b-kxmoj6kupc] {
    padding: 20px 24px;
    border-bottom: 1px solid #e8edf2;
}

.modal-body[b-kxmoj6kupc] {
    padding: 24px;
}

/* Utility classes used in the auto-submit modal */
.flex[b-kxmoj6kupc] { display: flex; }
.items-center[b-kxmoj6kupc] { align-items: center; }
.justify-center[b-kxmoj6kupc] { justify-content: center; }
.text-center[b-kxmoj6kupc] { text-align: center; }
.py-8[b-kxmoj6kupc] { padding-top: 32px; padding-bottom: 32px; }
.mt-6[b-kxmoj6kupc] { margin-top: 24px; }
.mb-2[b-kxmoj6kupc] { margin-bottom: 8px; }
.mb-4[b-kxmoj6kupc] { margin-bottom: 16px; }
.mb-6[b-kxmoj6kupc] { margin-bottom: 24px; }
.mr-2[b-kxmoj6kupc] { margin-right: 8px; }
.mr-3[b-kxmoj6kupc] { margin-right: 12px; }
.mr-4[b-kxmoj6kupc] { margin-right: 16px; }
.text-sm[b-kxmoj6kupc] { font-size: 13px; }
.text-lg[b-kxmoj6kupc] { font-size: 18px; }
.text-xl[b-kxmoj6kupc] { font-size: 20px; }
.font-bold[b-kxmoj6kupc] { font-weight: 700; }
.p-4[b-kxmoj6kupc] { padding: 16px; }
.rounded-lg[b-kxmoj6kupc] { border-radius: 8px; }
.border[b-kxmoj6kupc] { border-width: 1px; border-style: solid; }
.animate-spin[b-kxmoj6kupc] { animation: spin-b-kxmoj6kupc 1s linear infinite; }
.rounded-full[b-kxmoj6kupc] { border-radius: 50%; }
.h-16[b-kxmoj6kupc] { height: 64px; }
.w-full[b-kxmoj6kupc] { width: 100%; }
.border-b-4[b-kxmoj6kupc] { border-bottom-width: 4px; border-bottom-style: solid; }

/* Warning / Primary states */
.bg-warning-50[b-kxmoj6kupc] { background: #fff8ec; }
.border-warning-200[b-kxmoj6kupc] { border-color: #fcd086; }
.text-warning-800[b-kxmoj6kupc] { color: #7a4a00; }
.text-warning-600[b-kxmoj6kupc] { color: #a85f00; }
.border-warning-600[b-kxmoj6kupc] { border-color: #a85f00; }
.bg-primary-50[b-kxmoj6kupc] { background: #eaf4fc; }
.border-primary-200[b-kxmoj6kupc] { border-color: #90b8d8; }
.text-primary-700[b-kxmoj6kupc] { color: #1d6fa4; }
.text-neutral-700[b-kxmoj6kupc] { color: #4a5568; }
.text-neutral-500[b-kxmoj6kupc] { color: #718096; }

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

/* ── Mobile Palette Overlay toggle ── */
.palette-header-mobile[b-kxmoj6kupc] {
    display: none;
}

/* ── Mobile palette close button ── */
.close-btn[b-kxmoj6kupc] {
    background: none;
    border: none;
    font-size: 22px;
    color: #5a6a7e;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 4px;
    line-height: 1;
}

.close-btn:hover[b-kxmoj6kupc] { background: #f0f4f8; }

/* ── Alert fallback ── */
.alert[b-kxmoj6kupc] {
    padding: 14px 18px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    font-size: 14px;
    gap: 8px;
}

.alert-warning[b-kxmoj6kupc] {
    background: #fff8ec;
    border: 1px solid #fcd086;
    color: #7a4a00;
}

/* ── Responsive ── */
@media (max-width: 1024px) {
    .palette-area[b-kxmoj6kupc] {
        width: 240px;
    }
}

@media (max-width: 768px) {
    .exam-header[b-kxmoj6kupc] {
        flex-wrap: wrap;
        padding: 8px 12px;
        gap: 8px;
    }

    .exam-header-center[b-kxmoj6kupc] {
        order: -1;
        flex-basis: 100%;
        display: flex;
        justify-content: center;
    }

    .exam-header-left[b-kxmoj6kupc],
    .exam-header-right[b-kxmoj6kupc] {
        flex: 1;
    }

    .exam-header-right[b-kxmoj6kupc] {
        justify-content: flex-end;
    }

    .exam-subtitle[b-kxmoj6kupc] { display: none; }

    .exam-content[b-kxmoj6kupc] {
        flex-direction: column;
    }

    .question-area[b-kxmoj6kupc] {
        padding: 12px;
        padding-bottom: 60px;
    }

    /* Palette as full-screen overlay on mobile */
    .palette-area[b-kxmoj6kupc] {
        display: none;
        position: fixed;
        inset: 0;
        z-index: 200;
        width: 100%;
        height: 100%;
        border: none;
        max-height: none;
        padding: 0;
    }

    .palette-area.mobile-visible[b-kxmoj6kupc] {
        display: flex;
        flex-direction: column;
    }

    .palette-header-mobile[b-kxmoj6kupc] {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 14px 16px;
        background: #1e3a5f;
        color: #fff;
        flex-shrink: 0;
    }

    .palette-header-mobile h3[b-kxmoj6kupc] {
        margin: 0;
        font-size: 16px;
        font-weight: 700;
        color: #fff;
    }

    .palette-header-mobile .close-btn[b-kxmoj6kupc] {
        color: #fff;
    }

    .palette-area[b-kxmoj6kupc]  .question-palette {
        flex: 1;
        overflow-y: auto;
        padding: 16px;
    }

    .autosave-indicator[b-kxmoj6kupc] {
        bottom: 8px;
        font-size: 11px;
        padding: 4px 12px;
    }

    .md-hidden[b-kxmoj6kupc] { display: inline-flex !important; }
    .hidden-mobile[b-kxmoj6kupc] { display: none !important; }
}

@media (min-width: 769px) {
    .md-hidden[b-kxmoj6kupc] { display: none !important; }
    .hidden-mobile[b-kxmoj6kupc] { display: inline-flex !important; }
}

/* ── Print ── */
@media print {
    .exam-header[b-kxmoj6kupc], .palette-area[b-kxmoj6kupc], .autosave-indicator[b-kxmoj6kupc] { display: none; }
    .exam-content[b-kxmoj6kupc] { display: block; }
    .question-area[b-kxmoj6kupc] { overflow: visible; padding: 0; }
}

/* Responsive exam-shell overrides */
.exam-container[b-kxmoj6kupc] {
    height: 100dvh;
    min-height: 100dvh;
    color: var(--color-text-primary);
    background: var(--color-bg-page);
}

.exam-header[b-kxmoj6kupc] {
    padding: var(--spacing-3) var(--spacing-6);
    gap: var(--spacing-5);
    background: var(--color-primary-800);
    box-shadow: var(--shadow-sm);
}

.exam-header-right[b-kxmoj6kupc] {
    gap: var(--spacing-3);
}

.exam-header-right .btn-sm[b-kxmoj6kupc],
.close-btn[b-kxmoj6kupc] {
    min-width: 44px;
    min-height: 44px;
}

.exam-content[b-kxmoj6kupc],
.question-area[b-kxmoj6kupc],
.answer-section[b-kxmoj6kupc] {
    min-width: 0;
}

.question-area[b-kxmoj6kupc] {
    padding: var(--spacing-6) var(--spacing-7);
    gap: var(--spacing-5);
    background: var(--color-bg-page);
    overscroll-behavior: contain;
}

.answer-section[b-kxmoj6kupc] {
    padding: var(--spacing-6) var(--spacing-7);
    border-color: var(--color-border-subtle);
    border-radius: var(--radius-sm);
    background: var(--color-bg-surface);
    box-shadow: var(--shadow-xs);
    overflow-x: auto;
}

.palette-area[b-kxmoj6kupc] {
    border-color: var(--color-border-subtle);
    background: var(--color-bg-surface);
}

.autosave-indicator[b-kxmoj6kupc] {
    max-width: calc(100% - (2 * var(--spacing-5)));
    pointer-events: none;
}

.modal-content[b-kxmoj6kupc] {
    max-height: calc(100dvh - (2 * var(--spacing-5)));
    overflow-y: auto;
}

@media (max-width: 767px) {
    .exam-header[b-kxmoj6kupc] {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        padding: max(var(--spacing-3), env(safe-area-inset-top)) var(--spacing-4) var(--spacing-3);
        gap: var(--spacing-3);
    }

    .exam-header-center[b-kxmoj6kupc] {
        grid-column: 1 / -1;
        grid-row: 1;
        width: 100%;
    }

    .exam-header-left[b-kxmoj6kupc] {
        grid-column: 1;
        grid-row: 2;
    }

    .exam-header-right[b-kxmoj6kupc] {
        grid-column: 2;
        grid-row: 2;
    }

    .exam-title[b-kxmoj6kupc] {
        font-size: 0.9375rem;
    }

    .question-area[b-kxmoj6kupc] {
        padding: var(--spacing-4);
        padding-bottom: calc(var(--spacing-12) + env(safe-area-inset-bottom));
        gap: var(--spacing-4);
    }

    .answer-section[b-kxmoj6kupc] {
        padding: var(--spacing-5);
    }

    .palette-area[b-kxmoj6kupc] {
        height: 100dvh;
        padding-bottom: env(safe-area-inset-bottom);
    }

    .palette-header-mobile[b-kxmoj6kupc] {
        min-height: 56px;
        padding: max(var(--spacing-3), env(safe-area-inset-top)) var(--spacing-4) var(--spacing-3);
        background: var(--color-primary-800);
    }

    .autosave-indicator[b-kxmoj6kupc] {
        bottom: calc(var(--spacing-3) + env(safe-area-inset-bottom));
    }
}

/* /Pages/Student/Fees.razor.rz.scp.css */
.student-fees-page[b-8pftheaivz] { display: grid; gap: var(--spacing-6); }
.page-header[b-8pftheaivz] { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--spacing-4); }
.page-header h1[b-8pftheaivz], section h2[b-8pftheaivz] { margin: 0; color: var(--color-neutral-900); }
.page-header p[b-8pftheaivz] { margin: var(--spacing-1) 0 0; color: var(--color-neutral-600); }
.download-button[b-8pftheaivz] { min-height: 44px; display: inline-flex; align-items: center; gap: var(--spacing-2); padding: var(--spacing-3) var(--spacing-4); border: 0; border-radius: var(--radius-md); background: var(--color-primary-600); color: white; font-weight: 600; }
.download-button:disabled[b-8pftheaivz] { opacity: .55; }
.state-panel[b-8pftheaivz] { padding: var(--spacing-6); background: var(--color-neutral-50); border: 1px solid var(--color-neutral-200); border-radius: var(--radius-md); }
.state-panel.error[b-8pftheaivz] { color: var(--color-error-700); border-color: var(--color-error-300); }
.summary-grid[b-8pftheaivz] { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--spacing-3); }
.summary-grid div[b-8pftheaivz] { display: grid; gap: var(--spacing-1); padding: var(--spacing-4); background: white; border: 1px solid var(--color-neutral-200); border-radius: var(--radius-md); }
.summary-grid span[b-8pftheaivz] { color: var(--color-neutral-600); font-size: var(--font-size-sm); }
.summary-grid strong[b-8pftheaivz] { color: var(--color-neutral-900); font-size: var(--font-size-xl); }
.summary-grid .balance[b-8pftheaivz] { border-color: var(--color-warning-400); }
section[b-8pftheaivz] { min-width: 0; }
section h2[b-8pftheaivz] { margin-bottom: var(--spacing-3); font-size: var(--font-size-lg); }
.table-wrap[b-8pftheaivz] { overflow-x: auto; border: 1px solid var(--color-neutral-200); border-radius: var(--radius-md); background: white; }
table[b-8pftheaivz] { width: 100%; border-collapse: collapse; }
th[b-8pftheaivz], td[b-8pftheaivz] { padding: var(--spacing-3); text-align: left; border-bottom: 1px solid var(--color-neutral-100); white-space: nowrap; }
th[b-8pftheaivz] { color: var(--color-neutral-600); background: var(--color-neutral-50); font-size: var(--font-size-xs); text-transform: uppercase; }
td[b-8pftheaivz] { color: var(--color-neutral-800); }

@media (min-width: 768px) {
    .summary-grid[b-8pftheaivz] { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
/* /Pages/Student/Hostel/Attendance.razor.rz.scp.css */
.student-hostel-page[b-mz2hpylx00] { padding: 1.5rem; max-width: 860px; }
.page-header[b-mz2hpylx00] { margin-bottom: 1.5rem; }
.page-title[b-mz2hpylx00] { font-size: 1.5rem; font-weight: 700; color: #111827; margin: 0 0 0.25rem; }
.page-subtitle[b-mz2hpylx00] { color: #6b7280; font-size: 0.875rem; margin: 0; }

.loading-center[b-mz2hpylx00] { display: flex; justify-content: center; padding: 2rem; }
.spinner[b-mz2hpylx00] { width: 2rem; height: 2rem; border: 3px solid #e5e7eb; border-top-color: var(--color-primary, #7c3aed); border-radius: 50%; animation: spin-b-mz2hpylx00 0.6s linear infinite; }
@keyframes spin-b-mz2hpylx00 { to { transform: rotate(360deg); } }

.alert[b-mz2hpylx00] { padding: 0.75rem 1rem; border-radius: 0.5rem; margin-bottom: 1rem; font-size: 0.875rem; }
.alert-danger[b-mz2hpylx00] { background: #fef2f2; color: #dc2626; border: 1px solid #fecaca; }

.filter-row[b-mz2hpylx00] { display: flex; gap: 0.75rem; margin-bottom: 1.25rem; align-items: flex-end; }
.filter-group[b-mz2hpylx00] { display: flex; flex-direction: column; gap: 0.3rem; }
.filter-group label[b-mz2hpylx00] { font-size: 0.75rem; font-weight: 600; color: #374151; }
.filter-group input[b-mz2hpylx00] { padding: 0.4rem 0.75rem; border: 1px solid #d1d5db; border-radius: 0.375rem; font-size: 0.875rem; }

.attendance-grid[b-mz2hpylx00] { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 1rem; }
.meal-card[b-mz2hpylx00] { background: #fff; border: 1px solid #e5e7eb; border-radius: 0.75rem; padding: 1.25rem; text-align: center; }
.meal-icon[b-mz2hpylx00] { font-size: 1.75rem; margin-bottom: 0.5rem; }
.meal-name[b-mz2hpylx00] { font-weight: 700; font-size: 0.875rem; color: #374151; margin-bottom: 0.5rem; }
.meal-status[b-mz2hpylx00] { display: inline-block; padding: 0.3rem 0.875rem; border-radius: 9999px; font-size: 0.8rem; font-weight: 700; }
.meal-status.present[b-mz2hpylx00] { background: #d1fae5; color: #065f46; }
.meal-status.absent[b-mz2hpylx00] { background: #fee2e2; color: #991b1b; }
.meal-status.not-marked[b-mz2hpylx00] { background: #f3f4f6; color: #9ca3af; }
/* /Pages/Student/Hostel/Fees.razor.rz.scp.css */
.student-hostel-page[b-efhzva3uim] { padding: 1.5rem; max-width: 860px; }
.page-header[b-efhzva3uim] { margin-bottom: 1.5rem; }
.page-title[b-efhzva3uim] { font-size: 1.5rem; font-weight: 700; color: #111827; margin: 0 0 0.25rem; }
.page-subtitle[b-efhzva3uim] { color: #6b7280; font-size: 0.875rem; margin: 0; }

.loading-center[b-efhzva3uim] { display: flex; justify-content: center; padding: 2rem; }
.spinner[b-efhzva3uim] { width: 2rem; height: 2rem; border: 3px solid #e5e7eb; border-top-color: var(--color-primary, #7c3aed); border-radius: 50%; animation: spin-b-efhzva3uim 0.6s linear infinite; }
@keyframes spin-b-efhzva3uim { to { transform: rotate(360deg); } }

.alert[b-efhzva3uim] { padding: 0.75rem 1rem; border-radius: 0.5rem; margin-bottom: 1rem; font-size: 0.875rem; }
.alert-danger[b-efhzva3uim] { background: #fef2f2; color: #dc2626; border: 1px solid #fecaca; }

.due-alert[b-efhzva3uim] { background: #fef3c7; border: 1px solid #fcd34d; border-radius: 0.5rem; padding: 0.75rem 1rem; margin-bottom: 1rem; display: flex; gap: 0.5rem; align-items: center; font-size: 0.875rem; }
.due-alert strong[b-efhzva3uim] { color: #92400e; font-size: 1rem; }

.table-container[b-efhzva3uim] { background: #fff; border-radius: 0.75rem; border: 1px solid #e5e7eb; overflow-x: auto; }
.data-table[b-efhzva3uim] { width: 100%; border-collapse: collapse; font-size: 0.875rem; }
.data-table th[b-efhzva3uim] { padding: 0.75rem 1rem; text-align: left; background: #f9fafb; border-bottom: 1px solid #e5e7eb; font-weight: 600; color: #374151; }
.data-table td[b-efhzva3uim] { padding: 0.75rem 1rem; border-bottom: 1px solid #f3f4f6; color: #374151; }
.data-table tr:last-child td[b-efhzva3uim] { border-bottom: none; }
.empty-row[b-efhzva3uim] { text-align: center; color: #9ca3af; font-style: italic; padding: 2rem !important; }

.badge[b-efhzva3uim] { display: inline-block; padding: 0.2rem 0.6rem; border-radius: 9999px; font-size: 0.75rem; font-weight: 600; }
.badge-green[b-efhzva3uim] { background: #d1fae5; color: #065f46; }
.badge-yellow[b-efhzva3uim] { background: #fef3c7; color: #92400e; }
.badge-orange[b-efhzva3uim] { background: #ffedd5; color: #9a3412; }
.badge-gray[b-efhzva3uim] { background: #f3f4f6; color: #374151; }

.not-enrolled-msg[b-efhzva3uim] { text-align: center; padding: 3rem; color: #6b7280; }
/* /Pages/Student/Hostel/Index.razor.rz.scp.css */
.student-hostel-page[b-0hrnle7a1k] { padding: 1.5rem; max-width: 860px; }
.page-header[b-0hrnle7a1k] { margin-bottom: 1.5rem; }
.page-title[b-0hrnle7a1k] { font-size: 1.5rem; font-weight: 700; color: #111827; margin: 0 0 0.25rem; }
.page-subtitle[b-0hrnle7a1k] { color: #6b7280; font-size: 0.875rem; margin: 0; }

.loading-center[b-0hrnle7a1k] { display: flex; justify-content: center; padding: 2rem; }
.spinner[b-0hrnle7a1k] { width: 2rem; height: 2rem; border: 3px solid #e5e7eb; border-top-color: var(--color-primary, #7c3aed); border-radius: 50%; animation: spin-b-0hrnle7a1k 0.6s linear infinite; }
@keyframes spin-b-0hrnle7a1k { to { transform: rotate(360deg); } }

.alert[b-0hrnle7a1k] { padding: 0.75rem 1rem; border-radius: 0.5rem; margin-bottom: 1rem; font-size: 0.875rem; }
.alert-danger[b-0hrnle7a1k] { background: #fef2f2; color: #dc2626; border: 1px solid #fecaca; }

.student-info-grid[b-0hrnle7a1k] { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 1rem; margin-bottom: 1.5rem; }
.info-card[b-0hrnle7a1k] { background: #fff; border: 1px solid #e5e7eb; border-radius: 0.75rem; padding: 1.25rem; text-align: center; }
.info-icon[b-0hrnle7a1k] { font-size: 1.5rem; margin-bottom: 0.5rem; }
.info-label[b-0hrnle7a1k] { font-size: 0.75rem; color: #6b7280; font-weight: 600; margin-bottom: 0.25rem; }
.info-value[b-0hrnle7a1k] { font-size: 0.95rem; font-weight: 700; color: #111827; }

.section-block[b-0hrnle7a1k] { margin-bottom: 1.5rem; }
.section-title[b-0hrnle7a1k] { font-size: 0.95rem; font-weight: 700; color: #374151; margin: 0 0 0.5rem; }

.not-enrolled-msg[b-0hrnle7a1k] { text-align: center; padding: 3rem; color: #6b7280; }
/* /Pages/Student/Hostel/Leave.razor.rz.scp.css */
.leave-page[b-xkjz9cjv2q] { padding: 1.5rem; max-width: 700px; }
.back-link[b-xkjz9cjv2q] { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.875rem; color: var(--color-primary-600); text-decoration: none; margin-bottom: 0.75rem; }
.page-title[b-xkjz9cjv2q] { font-size: 1.5rem; font-weight: 700; color: var(--color-neutral-900); margin: 0; }
.page-subtitle[b-xkjz9cjv2q] { font-size: 0.875rem; color: var(--color-neutral-500); margin: 0.25rem 0 0; }
.page-header[b-xkjz9cjv2q] { margin-bottom: 1.5rem; }
.coming-soon-card[b-xkjz9cjv2q] { background: white; border-radius: 1rem; border: 2px dashed var(--color-primary-200); padding: 3rem; text-align: center; }
.coming-soon-icon[b-xkjz9cjv2q] { font-size: 3rem; color: var(--color-primary-400); margin-bottom: 1rem; }
.coming-soon-card h2[b-xkjz9cjv2q] { font-size: 1.5rem; font-weight: 700; color: var(--color-neutral-800); margin: 0 0 0.75rem; }
.coming-soon-card p[b-xkjz9cjv2q] { color: var(--color-neutral-500); max-width: 480px; margin: 0 auto 0.75rem; line-height: 1.6; }
.coming-features[b-xkjz9cjv2q] { text-align: left; max-width: 400px; margin: 1.5rem auto; background: var(--color-primary-50); border-radius: 0.75rem; padding: 1.25rem; }
.coming-features h4[b-xkjz9cjv2q] { font-size: 0.875rem; font-weight: 700; color: var(--color-primary-800); margin: 0 0 0.75rem; }
.coming-features ul[b-xkjz9cjv2q] { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.6rem; }
.coming-features li[b-xkjz9cjv2q] { display: flex; align-items: center; gap: 0.6rem; font-size: 0.875rem; color: var(--color-neutral-700); }
.coming-features li i[b-xkjz9cjv2q] { color: var(--color-primary-600); width: 1rem; text-align: center; }
.workaround-box[b-xkjz9cjv2q] { display: flex; gap: 0.75rem; align-items: flex-start; background: var(--color-blue-50, #eff6ff); border: 1px solid var(--color-blue-200, #bfdbfe); border-radius: 0.75rem; padding: 1.25rem; max-width: 400px; margin: 1.5rem auto 0; text-align: left; font-size: 0.875rem; color: var(--color-blue-800, #1e40af); }
.workaround-box i[b-xkjz9cjv2q] { color: var(--color-blue-600, #2563eb); font-size: 1.15rem; margin-top: 0.15rem; }
/* /Pages/Student/Hostel/Meals.razor.rz.scp.css */
.student-hostel-page[b-7nqk16x013] { padding: 1.5rem; max-width: 860px; }
.page-header[b-7nqk16x013] { margin-bottom: 1.5rem; }
.page-title[b-7nqk16x013] { font-size: 1.5rem; font-weight: 700; color: #111827; margin: 0 0 0.25rem; }
.page-subtitle[b-7nqk16x013] { color: #6b7280; font-size: 0.875rem; margin: 0; }

.loading-center[b-7nqk16x013] { display: flex; justify-content: center; padding: 2rem; }
.spinner[b-7nqk16x013] { width: 2rem; height: 2rem; border: 3px solid #e5e7eb; border-top-color: var(--color-primary, #7c3aed); border-radius: 50%; animation: spin-b-7nqk16x013 0.6s linear infinite; }
@keyframes spin-b-7nqk16x013 { to { transform: rotate(360deg); } }

.alert[b-7nqk16x013] { padding: 0.75rem 1rem; border-radius: 0.5rem; margin-bottom: 1rem; font-size: 0.875rem; }
.alert-danger[b-7nqk16x013] { background: #fef2f2; color: #dc2626; border: 1px solid #fecaca; }

.meal-plan-card[b-7nqk16x013] { background: linear-gradient(135deg, #7c3aed, #6d28d9); color: #fff; border-radius: 0.75rem; padding: 1.5rem; margin-bottom: 1.25rem; }
.plan-name[b-7nqk16x013] { font-size: 1.25rem; font-weight: 700; margin-bottom: 0.5rem; }
.plan-dates[b-7nqk16x013] { font-size: 0.875rem; opacity: 0.85; }

.plan-details[b-7nqk16x013] { display: grid; gap: 1rem; }
.meals-included h3[b-7nqk16x013], .plan-rates h3[b-7nqk16x013] { font-size: 0.875rem; font-weight: 700; color: #374151; margin: 0 0 0.75rem; }
.meal-tags[b-7nqk16x013] { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.meal-tag[b-7nqk16x013] { background: #ede9fe; color: #5b21b6; padding: 0.3rem 0.75rem; border-radius: 9999px; font-size: 0.8rem; font-weight: 600; }
.plan-rates[b-7nqk16x013] { background: #fff; border: 1px solid #e5e7eb; border-radius: 0.75rem; padding: 1rem; }
.rate-item[b-7nqk16x013] { display: flex; justify-content: space-between; padding: 0.4rem 0; border-bottom: 1px solid #f3f4f6; font-size: 0.875rem; }
.rate-item:last-child[b-7nqk16x013] { border-bottom: none; }

.not-enrolled-msg[b-7nqk16x013] { text-align: center; padding: 3rem; color: #6b7280; }
/* /Pages/Student/Hostel/Room.razor.rz.scp.css */
.hostel-room-page[b-8ln4t3yoxl] { padding: 1.5rem; max-width: 800px; }
.back-link[b-8ln4t3yoxl] { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.875rem; color: var(--color-primary-600); text-decoration: none; margin-bottom: 0.75rem; }
.page-title[b-8ln4t3yoxl] { font-size: 1.5rem; font-weight: 700; color: var(--color-neutral-900); margin: 0; }
.page-subtitle[b-8ln4t3yoxl] { font-size: 0.875rem; color: var(--color-neutral-500); margin: 0.25rem 0 0; }
.page-header[b-8ln4t3yoxl] { margin-bottom: 1.5rem; }
.loading-center[b-8ln4t3yoxl] { display: flex; flex-direction: column; align-items: center; padding: 3rem; gap: 1rem; color: var(--color-neutral-500); }
.spinner[b-8ln4t3yoxl] { width: 2rem; height: 2rem; border: 3px solid var(--color-neutral-200); border-top-color: var(--color-primary-600); border-radius: 50%; animation: spin 0.8s linear infinite; }
@@keyframes spin { to[b-8ln4t3yoxl] { transform: rotate(360deg); } }
.alert[b-8ln4t3yoxl] { padding: 0.875rem 1rem; border-radius: 0.5rem; font-size: 0.875rem; }
.alert-danger[b-8ln4t3yoxl] { background: var(--color-red-50, #fef2f2); color: var(--color-red-700, #b91c1c); border: 1px solid var(--color-red-200, #fecaca); }
.room-card[b-8ln4t3yoxl] { background: white; border-radius: 1rem; border: 1px solid var(--color-neutral-200); overflow: hidden; margin-bottom: 1.25rem; }
.room-card-header[b-8ln4t3yoxl] { background: linear-gradient(135deg, #7c3aed, #6d28d9); padding: 1.5rem; display: flex; gap: 1rem; align-items: center; }
.room-icon[b-8ln4t3yoxl] { width: 3rem; height: 3rem; background: rgba(255,255,255,0.2); border-radius: 0.75rem; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; color: white; }
.room-number[b-8ln4t3yoxl] { font-size: 1.5rem; font-weight: 700; color: white; margin: 0; }
.building-name[b-8ln4t3yoxl] { color: rgba(255,255,255,0.8); font-size: 0.875rem; margin: 0.25rem 0 0; display: flex; align-items: center; gap: 0.5rem; }
.info-grid[b-8ln4t3yoxl] { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; padding: 1.5rem; }
.info-item[b-8ln4t3yoxl] { display: flex; flex-direction: column; gap: 0.25rem; }
.info-label[b-8ln4t3yoxl] { font-size: 0.75rem; font-weight: 600; color: var(--color-neutral-500); text-transform: uppercase; letter-spacing: 0.05em; }
.info-value[b-8ln4t3yoxl] { font-size: 0.95rem; color: var(--color-neutral-800); font-weight: 500; }
.badge[b-8ln4t3yoxl] { display: inline-flex; padding: 0.2rem 0.6rem; border-radius: 9999px; font-size: 0.75rem; font-weight: 600; }
.badge-green[b-8ln4t3yoxl] { background: #dcfce7; color: #15803d; }
.badge-blue[b-8ln4t3yoxl] { background: #dbeafe; color: #1d4ed8; }
.student-info-card[b-8ln4t3yoxl], .meal-card[b-8ln4t3yoxl] { background: white; border-radius: 1rem; border: 1px solid var(--color-neutral-200); padding: 1.5rem; margin-bottom: 1.25rem; }
.section-title[b-8ln4t3yoxl] { font-size: 1rem; font-weight: 700; color: var(--color-neutral-800); margin: 0 0 1.25rem; display: flex; align-items: center; gap: 0.5rem; }
.no-room-card[b-8ln4t3yoxl], .empty-state[b-8ln4t3yoxl] { background: var(--color-neutral-50); border-radius: 1rem; border: 2px dashed var(--color-neutral-200); padding: 3rem; text-align: center; color: var(--color-neutral-400); }
.no-room-card i[b-8ln4t3yoxl], .empty-state i[b-8ln4t3yoxl] { font-size: 2.5rem; margin-bottom: 1rem; display: block; }
.no-room-card h3[b-8ln4t3yoxl] { font-size: 1.1rem; font-weight: 600; color: var(--color-neutral-500); }
@media (max-width: 640px) { .info-grid[b-8ln4t3yoxl] { grid-template-columns: 1fr; } }
/* /Pages/Student/Inbox/Index.razor.rz.scp.css */
/* Styles handled via Tailwind utility classes in markup */
/* /Pages/Student/Leaderboard/Index.razor.rz.scp.css */
/* Student Leaderboard Page */

/* Class / Section badges in header */
.class-badge[b-nm6l5bhp4c] {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    background: #dbeafe;
    color: #1e40af;
    border-radius: 9999px;
    font-size: 0.8125rem;
    font-weight: 600;
}

.section-badge[b-nm6l5bhp4c] {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    background: #f3f4f6;
    color: #374151;
    border-radius: 9999px;
    font-size: 0.8125rem;
    font-weight: 500;
}

/* My Position Card */
.my-position-card[b-nm6l5bhp4c] {
    background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
    border: 1px solid #bfdbfe;
    border-radius: 0.875rem;
    padding: 1.125rem 1.25rem;
}

.my-rank-badge[b-nm6l5bhp4c] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 4rem;
    height: 4rem;
    background: #2563eb;
    border-radius: 0.75rem;
    flex-shrink: 0;
}

.rank-label[b-nm6l5bhp4c] {
    font-size: 0.5625rem;
    font-weight: 500;
    color: #bfdbfe;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    line-height: 1;
}

.rank-number[b-nm6l5bhp4c] {
    font-size: 1.375rem;
    font-weight: 800;
    color: #fff;
    line-height: 1.1;
}

/* Leaderboard Card */
.lb-card[b-nm6l5bhp4c] {
    background: var(--color-surface, #fff);
    border: 1px solid var(--color-border, #e5e7eb);
    border-radius: 0.875rem;
    overflow: hidden;
}

/* Header row */
.lb-header[b-nm6l5bhp4c] {
    display: grid;
    grid-template-columns: 3rem 1fr 7rem 4rem;
    gap: 0.5rem;
    padding: 0.625rem 1rem;
    background: #f9fafb;
    border-bottom: 1px solid #e5e7eb;
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #6b7280;
}

/* Data rows */
.lb-row[b-nm6l5bhp4c] {
    display: grid;
    grid-template-columns: 3rem 1fr 7rem 4rem;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid #f3f4f6;
    align-items: center;
    transition: background 0.15s;
}

.lb-row:last-child[b-nm6l5bhp4c] {
    border-bottom: none;
}

.lb-row:hover[b-nm6l5bhp4c] {
    background: #f9fafb;
}

.lb-row-me[b-nm6l5bhp4c] {
    background: #eff6ff !important;
}

.lb-row-me:hover[b-nm6l5bhp4c] {
    background: #dbeafe !important;
}

/* Column alignments */
.lb-col-rank[b-nm6l5bhp4c] {
    display: flex;
    align-items: center;
    justify-content: center;
}

.lb-col-name[b-nm6l5bhp4c] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
}

.lb-col-score[b-nm6l5bhp4c] {
    /* aligned by grid */
}

.lb-col-exams[b-nm6l5bhp4c] {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Medal / rank number */
.medal[b-nm6l5bhp4c] {
    font-size: 1.375rem;
    line-height: 1;
}

.rank-num[b-nm6l5bhp4c] {
    font-size: 0.8125rem;
    font-weight: 600;
    color: #6b7280;
}

/* Student name */
.student-name[b-nm6l5bhp4c] {
    font-size: 0.875rem;
    color: #111827;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* "You" badge */
.you-badge[b-nm6l5bhp4c] {
    display: inline-flex;
    align-items: center;
    padding: 0.125rem 0.4375rem;
    background: #2563eb;
    color: #fff;
    border-radius: 9999px;
    font-size: 0.625rem;
    font-weight: 700;
    white-space: nowrap;
    flex-shrink: 0;
}

/* Score column */
.score-wrap[b-nm6l5bhp4c] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.score-pct[b-nm6l5bhp4c] {
    font-size: 0.875rem;
    font-weight: 700;
    line-height: 1;
}

.score-bar-track[b-nm6l5bhp4c] {
    height: 0.25rem;
    background: #f3f4f6;
    border-radius: 9999px;
    overflow: hidden;
}

.score-bar[b-nm6l5bhp4c] {
    height: 100%;
    border-radius: 9999px;
    transition: width 0.6s ease;
    min-width: 2px;
}

/* Exams count */
.exams-count[b-nm6l5bhp4c] {
    font-size: 0.8125rem;
    font-weight: 600;
    color: #374151;
}

/* Loading state */
.loading-state[b-nm6l5bhp4c] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4rem 1rem;
    gap: 0.75rem;
}

.spinner[b-nm6l5bhp4c] {
    width: 2rem;
    height: 2rem;
    border: 3px solid #e5e7eb;
    border-top-color: #2563eb;
    border-radius: 50%;
    animation: spin-b-nm6l5bhp4c 0.8s linear infinite;
}

.loading-text[b-nm6l5bhp4c] {
    font-size: 0.875rem;
    color: #6b7280;
}

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

/* Responsive: hide exams column on mobile */
@media (max-width: 639px) {
    .lb-header[b-nm6l5bhp4c],
    .lb-row[b-nm6l5bhp4c] {
        grid-template-columns: 3rem 1fr 7rem;
    }
}
/* /Pages/Student/Materials/Index.razor.rz.scp.css */
/* Study Materials Page */

.documents-grid[b-o6b4obbj5j] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.doc-card[b-o6b4obbj5j] {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    background: var(--color-surface, #fff);
    border: 1px solid var(--color-border, #e5e7eb);
    border-radius: 0.75rem;
    padding: 1rem;
    transition: box-shadow 0.15s ease, border-color 0.15s ease;
}

    .doc-card:hover[b-o6b4obbj5j] {
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
        border-color: var(--color-primary, #3b82f6);
    }

/* File Icon */
.doc-icon[b-o6b4obbj5j] {
    flex-shrink: 0;
    width: 3rem;
    height: 3rem;
    border-radius: 0.625rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.icon-bg-red[b-o6b4obbj5j]    { background-color: #fee2e2; }
.icon-bg-blue[b-o6b4obbj5j]   { background-color: #dbeafe; }
.icon-bg-green[b-o6b4obbj5j]  { background-color: #d1fae5; }
.icon-bg-purple[b-o6b4obbj5j] { background-color: #ede9fe; }
.icon-bg-orange[b-o6b4obbj5j] { background-color: #ffedd5; }
.icon-bg-gray[b-o6b4obbj5j]   { background-color: #f3f4f6; }

/* Content */
.doc-content[b-o6b4obbj5j] {
    flex: 1;
    min-width: 0;
}

.doc-title[b-o6b4obbj5j] {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--color-text, #111827);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 0.25rem;
}

.doc-desc[b-o6b4obbj5j] {
    font-size: 0.8125rem;
    color: var(--color-text-muted, #6b7280);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-bottom: 0.5rem;
}

.doc-meta[b-o6b4obbj5j] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

.meta-badge[b-o6b4obbj5j] {
    display: inline-block;
    padding: 0.125rem 0.5rem;
    background: #dbeafe;
    color: #1d4ed8;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 500;
}

.meta-size[b-o6b4obbj5j],
.meta-date[b-o6b4obbj5j] {
    font-size: 0.75rem;
    color: var(--color-text-muted, #6b7280);
}

/* Actions */
.doc-actions[b-o6b4obbj5j] {
    flex-shrink: 0;
    align-self: center;
}

.btn-download[b-o6b4obbj5j] {
    display: inline-flex;
    align-items: center;
    padding: 0.4375rem 0.875rem;
    background: var(--color-primary, #3b82f6);
    color: #fff;
    border-radius: 0.5rem;
    font-size: 0.8125rem;
    font-weight: 500;
    text-decoration: none;
    transition: background 0.15s ease;
    white-space: nowrap;
}

    .btn-download:hover[b-o6b4obbj5j] {
        background: #2563eb;
        color: #fff;
    }

/* Category Chips */
.category-chip[b-o6b4obbj5j] {
    display: inline-block;
    padding: 0.375rem 0.875rem;
    border-radius: 9999px;
    font-size: 0.8125rem;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}

.chip-active[b-o6b4obbj5j] {
    background: var(--color-primary, #3b82f6);
    color: #fff;
    border: none;
}

.chip-inactive[b-o6b4obbj5j] {
    background: #f3f4f6;
    color: #374151;
    border: 1px solid #e5e7eb;
}

    .chip-inactive:hover[b-o6b4obbj5j] {
        background: #e5e7eb;
    }

/* Empty State */
.empty-state[b-o6b4obbj5j] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4rem 2rem;
    text-align: center;
    background: var(--color-surface, #fff);
    border: 1px solid var(--color-border, #e5e7eb);
    border-radius: 0.75rem;
}

/* Responsive */
@media (min-width: 640px) {
    .documents-grid[b-o6b4obbj5j] {
        gap: 1rem;
    }

    .doc-card[b-o6b4obbj5j] {
        padding: 1.25rem;
    }
}
/* /Pages/Student/Practice/Index.razor.rz.scp.css */
/* ── Practice Mode Page ─────────────────────────────────────────── */

/* Loading */
.loading-state[b-x7pi73vqij] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 5rem 1rem;
    gap: 0.75rem;
}
.spinner[b-x7pi73vqij] {
    width: 2rem;
    height: 2rem;
    border: 3px solid #e5e7eb;
    border-top-color: #2563eb;
    border-radius: 50%;
    animation: spin-b-x7pi73vqij 0.75s linear infinite;
}
@keyframes spin-b-x7pi73vqij { to { transform: rotate(360deg); } }
.loading-text[b-x7pi73vqij] { font-size: 0.875rem; color: #6b7280; }

/* ─── SETUP PHASE ─────────────────────────────────────────────── */
.practice-setup[b-x7pi73vqij] {
    max-width: 720px;
    margin: 0 auto;
    padding: 1.5rem 1rem 3rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.setup-hero[b-x7pi73vqij] {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding-bottom: 0.5rem;
}
.hero-icon[b-x7pi73vqij] { font-size: 2.5rem; line-height: 1; }
.setup-title[b-x7pi73vqij] {
    font-size: 1.5rem;
    font-weight: 800;
    color: #111827;
    margin: 0;
}
.setup-subtitle[b-x7pi73vqij] {
    font-size: 0.9375rem;
    color: #6b7280;
    margin: 0.25rem 0 0;
}

.setup-card[b-x7pi73vqij] {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 0.875rem;
    padding: 1.25rem;
}

.section-heading[b-x7pi73vqij] {
    font-size: 0.9375rem;
    font-weight: 700;
    color: #374151;
    margin: 0 0 0.875rem;
}

.selection-summary[b-x7pi73vqij] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    flex-wrap: wrap;
    margin-top: 0.75rem;
    font-size: 0.8125rem;
}
.sel-class[b-x7pi73vqij]    { font-weight: 700; color: #1e40af; }
.sel-sep[b-x7pi73vqij]      { color: #9ca3af; }
.sel-subject[b-x7pi73vqij]  { font-weight: 600; color: #374151; }
.sel-chapters[b-x7pi73vqij] { padding: 0.125rem 0.5rem; background: #f3f4f6; border-radius: 9999px; color: #4b5563; }
.sel-qcount[b-x7pi73vqij]   { color: #6b7280; }

.setup-filters-row[b-x7pi73vqij] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.filter-card[b-x7pi73vqij] { }

.filter-options[b-x7pi73vqij] {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.filter-btn[b-x7pi73vqij] {
    padding: 0.375rem 0.875rem;
    border: 1.5px solid #e5e7eb;
    border-radius: 9999px;
    background: #fff;
    font-size: 0.875rem;
    font-weight: 500;
    color: #374151;
    cursor: pointer;
    transition: all 0.12s;
}
.filter-btn:hover[b-x7pi73vqij]   { border-color: #2563eb; color: #2563eb; }
.filter-active[b-x7pi73vqij]      { border-color: #2563eb !important; background: #2563eb !important; color: #fff !important; }

.setup-error[b-x7pi73vqij] {
    background: #fef2f2;
    border: 1px solid #fecaca;
    color: #b91c1c;
    border-radius: 0.75rem;
    padding: 0.75rem 1rem;
    font-size: 0.875rem;
}

.btn-start[b-x7pi73vqij] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.875rem;
    background: #2563eb;
    color: #fff;
    border: none;
    border-radius: 0.75rem;
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.15s, transform 0.1s;
}
.btn-start:hover:not(:disabled)[b-x7pi73vqij] { background: #1d4ed8; transform: translateY(-1px); }
.btn-start:disabled[b-x7pi73vqij] { background: #93c5fd; cursor: not-allowed; transform: none; }
.btn-spinner[b-x7pi73vqij] {
    width: 1rem;
    height: 1rem;
    border: 2px solid rgba(255,255,255,0.4);
    border-top-color: #fff;
    border-radius: 50%;
    animation: spin-b-x7pi73vqij 0.75s linear infinite;
}

/* ─── PRACTICE PHASE ──────────────────────────────────────────── */
.practice-main[b-x7pi73vqij] {
    max-width: 680px;
    margin: 0 auto;
    padding: 0 1rem 3rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.progress-strip[b-x7pi73vqij] {
    height: 0.3125rem;
    background: #e5e7eb;
    border-radius: 9999px;
    overflow: hidden;
    margin-bottom: 0.25rem;
}
.progress-fill[b-x7pi73vqij] {
    height: 100%;
    background: #2563eb;
    border-radius: 9999px;
    transition: width 0.4s ease;
}

.practice-header[b-x7pi73vqij] {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.q-counter[b-x7pi73vqij] { font-size: 0.875rem; font-weight: 600; color: #374151; }
.q-of[b-x7pi73vqij]      { font-weight: 400; color: #9ca3af; }
.score-chip[b-x7pi73vqij] {
    font-size: 0.8125rem;
    font-weight: 600;
    padding: 0.25rem 0.625rem;
    background: #dbeafe;
    color: #1e40af;
    border-radius: 9999px;
}

/* Question Card */
.question-card[b-x7pi73vqij] {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 0.875rem;
    padding: 1.375rem 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.875rem;
}

/* Meta row */
.q-meta[b-x7pi73vqij] { display: flex; align-items: center; gap: 0.375rem; flex-wrap: wrap; }

.diff-badge[b-x7pi73vqij] {
    display: inline-block;
    padding: 0.1875rem 0.5rem;
    border-radius: 9999px;
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.badge-easy[b-x7pi73vqij]    { background: #dcfce7; color: #15803d; }
.badge-medium[b-x7pi73vqij]  { background: #fef9c3; color: #a16207; }
.badge-hard[b-x7pi73vqij]    { background: #fee2e2; color: #b91c1c; }
.badge-unknown[b-x7pi73vqij] { background: #f3f4f6; color: #6b7280; }

.type-tag[b-x7pi73vqij]    { font-size: 0.6875rem; font-weight: 600; padding: 0.1875rem 0.5rem; background: #ede9fe; color: #6d28d9; border-radius: 9999px; }
.subject-tag[b-x7pi73vqij] { font-size: 0.6875rem; font-weight: 600; padding: 0.1875rem 0.5rem; background: #e0f2fe; color: #0369a1; border-radius: 9999px; }
.chapter-tag[b-x7pi73vqij] { font-size: 0.6875rem; color: #6b7280; padding: 0.1875rem 0.5rem; background: #f3f4f6; border-radius: 9999px; }

/* Question text */
.q-text[b-x7pi73vqij] { font-size: 1rem; line-height: 1.65; color: #111827; }

/* Diagram */
.q-diagram[b-x7pi73vqij] { border-radius: 0.5rem; overflow: hidden; border: 1px solid #e5e7eb; }
.q-diagram img[b-x7pi73vqij] { width: 100%; height: auto; display: block; }
.diagram-caption[b-x7pi73vqij] { font-size: 0.8125rem; color: #6b7280; text-align: center; margin: 0.5rem 0.75rem; }

/* Hint */
.btn-hint[b-x7pi73vqij] {
    background: none;
    border: 1px dashed #d1d5db;
    color: #6b7280;
    border-radius: 0.5rem;
    padding: 0.375rem 0.75rem;
    font-size: 0.8125rem;
    cursor: pointer;
    align-self: flex-start;
    transition: border-color 0.12s, color 0.12s;
}
.btn-hint:hover[b-x7pi73vqij] { border-color: #2563eb; color: #2563eb; }
.hint-box[b-x7pi73vqij] {
    background: #fffbeb;
    border: 1px solid #fde68a;
    border-radius: 0.5rem;
    padding: 0.625rem 0.875rem;
    font-size: 0.875rem;
    color: #92400e;
}

/* MCQ Options */
.options-list[b-x7pi73vqij] { display: flex; flex-direction: column; gap: 0.5rem; }

.option-btn[b-x7pi73vqij] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    background: #f9fafb;
    border: 1.5px solid #e5e7eb;
    border-radius: 0.625rem;
    text-align: left;
    cursor: pointer;
    font-size: 0.9375rem;
    color: #111827;
    transition: background 0.12s, border-color 0.12s;
    width: 100%;
}
.option-btn:hover:not(:disabled)[b-x7pi73vqij] { background: #eff6ff; border-color: #93c5fd; }
.option-btn:disabled[b-x7pi73vqij] { cursor: default; }
.opt-selected[b-x7pi73vqij] { background: #eff6ff !important; border-color: #2563eb !important; }
.opt-correct[b-x7pi73vqij]  { background: #f0fdf4 !important; border-color: #16a34a !important; color: #15803d; }
.opt-wrong[b-x7pi73vqij]    { background: #fef2f2 !important; border-color: #ef4444 !important; color: #b91c1c; }

.opt-letter[b-x7pi73vqij] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.625rem;
    height: 1.625rem;
    background: #e5e7eb;
    border-radius: 9999px;
    font-size: 0.8125rem;
    font-weight: 700;
    flex-shrink: 0;
}
.opt-correct .opt-letter[b-x7pi73vqij] { background: #dcfce7; color: #15803d; }
.opt-wrong   .opt-letter[b-x7pi73vqij] { background: #fee2e2; color: #b91c1c; }
.opt-text[b-x7pi73vqij] { flex: 1; line-height: 1.45; }
.opt-result-icon[b-x7pi73vqij] { flex-shrink: 0; font-size: 1rem; font-weight: 700; }
.correct-icon[b-x7pi73vqij] { color: #16a34a; }
.wrong-icon[b-x7pi73vqij]   { color: #dc2626; }

/* Short Answer */
.sa-wrap[b-x7pi73vqij] { display: flex; flex-direction: column; gap: 0.625rem; }
.sa-input[b-x7pi73vqij] {
    width: 100%;
    border: 1.5px solid #d1d5db;
    border-radius: 0.5rem;
    padding: 0.625rem 0.75rem;
    font-size: 0.9375rem;
    resize: vertical;
    box-sizing: border-box;
    font-family: inherit;
    line-height: 1.5;
    transition: border-color 0.12s;
}
.sa-input:focus[b-x7pi73vqij] { outline: none; border-color: #2563eb; }
.sa-input:disabled[b-x7pi73vqij] { background: #f9fafb; }
.btn-check-answer[b-x7pi73vqij] {
    align-self: flex-start;
    padding: 0.5rem 1.25rem;
    background: #2563eb;
    color: #fff;
    border: none;
    border-radius: 0.5rem;
    font-size: 0.9375rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.12s;
}
.btn-check-answer:hover:not(:disabled)[b-x7pi73vqij] { background: #1d4ed8; }
.btn-check-answer:disabled[b-x7pi73vqij] { background: #93c5fd; cursor: not-allowed; }

/* Feedback Panel */
.feedback-panel[b-x7pi73vqij] {
    border-radius: 0.625rem;
    padding: 0.875rem 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
}
.fb-correct[b-x7pi73vqij] { background: #f0fdf4; border: 1px solid #bbf7d0; }
.fb-wrong[b-x7pi73vqij]   { background: #fef2f2; border: 1px solid #fecaca; }

.fb-header[b-x7pi73vqij] { display: flex; align-items: center; gap: 0.5rem; }
.fb-icon[b-x7pi73vqij]   { font-size: 1.25rem; font-weight: 800; }
.fb-correct .fb-icon[b-x7pi73vqij]  { color: #16a34a; }
.fb-wrong   .fb-icon[b-x7pi73vqij]  { color: #dc2626; }
.fb-title[b-x7pi73vqij]  { font-size: 1rem; font-weight: 700; }
.fb-correct .fb-title[b-x7pi73vqij] { color: #15803d; }
.fb-wrong   .fb-title[b-x7pi73vqij] { color: #b91c1c; }

.fb-section[b-x7pi73vqij] { display: flex; flex-direction: column; gap: 0.25rem; }
.fb-label[b-x7pi73vqij]   { font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: #6b7280; }
.fb-answer[b-x7pi73vqij]  { font-size: 0.9375rem; font-weight: 600; color: #111827; }
.fb-body[b-x7pi73vqij]    { font-size: 0.875rem; line-height: 1.6; color: #374151; }

/* Action row */
.q-actions[b-x7pi73vqij] { display: flex; gap: 0.75rem; justify-content: flex-end; padding-top: 0.25rem; }

.btn-skip[b-x7pi73vqij] {
    padding: 0.5rem 1rem;
    background: #f3f4f6;
    border: 1px solid #e5e7eb;
    border-radius: 0.5rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: #6b7280;
    cursor: pointer;
    transition: background 0.12s;
}
.btn-skip:hover[b-x7pi73vqij] { background: #e5e7eb; color: #374151; }

.btn-next[b-x7pi73vqij] {
    padding: 0.5625rem 1.25rem;
    background: #2563eb;
    color: #fff;
    border: none;
    border-radius: 0.5rem;
    font-size: 0.9375rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.12s, transform 0.1s;
}
.btn-next:hover[b-x7pi73vqij] { background: #1d4ed8; transform: translateX(2px); }

/* ─── SUMMARY PHASE ───────────────────────────────────────────── */
.practice-summary[b-x7pi73vqij] {
    max-width: 640px;
    margin: 0 auto;
    padding: 1.5rem 1rem 3rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.summary-hero[b-x7pi73vqij] { text-align: center; padding: 0.5rem 0 0.25rem; }
.summary-title[b-x7pi73vqij] { font-size: 1.5rem; font-weight: 800; color: #111827; margin: 0; }
.summary-subtitle[b-x7pi73vqij] { font-size: 0.9375rem; color: #6b7280; margin: 0.25rem 0 0; }

.score-card[b-x7pi73vqij] {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 0.875rem;
    padding: 1.375rem 1.25rem;
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

.score-donut[b-x7pi73vqij] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 5.5rem;
    height: 5.5rem;
    background: #eff6ff;
    border: 3px solid #2563eb;
    border-radius: 50%;
    flex-shrink: 0;
}
.donut-pct[b-x7pi73vqij]   { font-size: 1.5rem; font-weight: 800; color: #1e40af; line-height: 1; }
.donut-label[b-x7pi73vqij] { font-size: 0.625rem; font-weight: 600; color: #3b82f6; text-transform: uppercase; letter-spacing: 0.05em; }

.score-meta[b-x7pi73vqij] { display: flex; flex-direction: column; gap: 0.625rem; min-width: 0; }

.grade-badge[b-x7pi73vqij] {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
    font-size: 0.875rem;
    font-weight: 700;
    align-self: flex-start;
}
.grade-excellent[b-x7pi73vqij] { background: #dcfce7; color: #15803d; }
.grade-good[b-x7pi73vqij]      { background: #dbeafe; color: #1e40af; }
.grade-fair[b-x7pi73vqij]      { background: #fef9c3; color: #a16207; }
.grade-poor[b-x7pi73vqij]      { background: #fee2e2; color: #b91c1c; }
.grade-unknown[b-x7pi73vqij]   { background: #f3f4f6; color: #6b7280; }

.score-stats[b-x7pi73vqij] { display: flex; gap: 0.875rem; }
.stat-row[b-x7pi73vqij] { display: flex; align-items: center; gap: 0.3125rem; }
.stat-icon[b-x7pi73vqij]  { font-size: 0.875rem; font-weight: 700; }
.stat-val[b-x7pi73vqij]   { font-size: 1rem; font-weight: 700; color: #111827; }
.stat-name[b-x7pi73vqij]  { font-size: 0.75rem; color: #6b7280; }
.stat-correct .stat-icon[b-x7pi73vqij] { color: #16a34a; }
.stat-wrong   .stat-icon[b-x7pi73vqij] { color: #dc2626; }
.stat-skipped .stat-icon[b-x7pi73vqij] { color: #9ca3af; }

/* History card */
.history-card[b-x7pi73vqij] {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 0.875rem;
    padding: 1.125rem 1.25rem;
}
.history-heading[b-x7pi73vqij] {
    font-size: 0.9375rem;
    font-weight: 700;
    color: #374151;
    margin: 0 0 0.875rem;
}

.history-row[b-x7pi73vqij] {
    display: flex;
    align-items: flex-start;
    gap: 0.625rem;
    padding: 0.5rem 0;
    border-bottom: 1px solid #f3f4f6;
    font-size: 0.875rem;
}
.history-row:last-child[b-x7pi73vqij] { border-bottom: none; }

.h-icon[b-x7pi73vqij] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.375rem;
    height: 1.375rem;
    border-radius: 50%;
    font-size: 0.75rem;
    font-weight: 800;
    flex-shrink: 0;
    margin-top: 1px;
}
.h-correct[b-x7pi73vqij] { background: #dcfce7; color: #16a34a; }
.h-wrong[b-x7pi73vqij]   { background: #fee2e2; color: #dc2626; }
.h-skip[b-x7pi73vqij]    { background: #f3f4f6; color: #9ca3af; }
.h-text[b-x7pi73vqij]    { color: #374151; line-height: 1.45; }

/* Summary action buttons */
.summary-actions[b-x7pi73vqij] { display: flex; gap: 0.75rem; }

.btn-again[b-x7pi73vqij] {
    flex: 1;
    padding: 0.75rem;
    background: #2563eb;
    color: #fff;
    border: none;
    border-radius: 0.625rem;
    font-size: 0.9375rem;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.12s;
}
.btn-again:hover[b-x7pi73vqij] { background: #1d4ed8; }

.btn-change[b-x7pi73vqij] {
    flex: 1;
    padding: 0.75rem;
    background: #f3f4f6;
    color: #374151;
    border: 1px solid #e5e7eb;
    border-radius: 0.625rem;
    font-size: 0.9375rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.12s;
}
.btn-change:hover[b-x7pi73vqij] { background: #e5e7eb; }

/* ─── Responsive ──────────────────────────────────────────────── */
@media (max-width: 639px) {
    .setup-filters-row[b-x7pi73vqij] { grid-template-columns: 1fr; }
    .score-card[b-x7pi73vqij] { flex-direction: column; align-items: center; text-align: center; }
    .score-meta[b-x7pi73vqij] { align-items: center; }
    .score-stats[b-x7pi73vqij] { justify-content: center; }
}
/* /Pages/Student/Profile/Index.razor.rz.scp.css */
/* Styles handled via Tailwind utility classes in markup */
/* /Pages/Student/Results/Detail.razor.rz.scp.css */
/* Result header card */
.result-header-card[b-psne8o9jy4] {
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    padding: 24px;
    box-shadow: 0 1px 4px rgba(0,0,0,.06);
}

/* Tag badges */
.tag-badge[b-psne8o9jy4] {
    display: inline-flex;
    align-items: center;
    padding: 2px 10px;
    border-radius: 9999px;
    font-size: 12px;
    font-weight: 600;
}
.tag-subject[b-psne8o9jy4] { background: #ede9fe; color: #5b21b6; }
.tag-type[b-psne8o9jy4]    { background: #fef3c7; color: #92400e; }
.tag-grade[b-psne8o9jy4]   { background: #d1fae5; color: #065f46; }

/* Score circle */
.score-circle[b-psne8o9jy4] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    flex-shrink: 0;
}
.score-circle.score-green[b-psne8o9jy4]  { background: linear-gradient(135deg, #10b981, #059669); }
.score-circle.score-orange[b-psne8o9jy4] { background: linear-gradient(135deg, #f59e0b, #d97706); }
.score-circle.score-red[b-psne8o9jy4]    { background: linear-gradient(135deg, #ef4444, #dc2626); }
.score-value[b-psne8o9jy4] { font-size: 18px; font-weight: 700; color: white; line-height: 1; }
.score-label[b-psne8o9jy4] { font-size: 11px; color: rgba(255,255,255,.85); margin-top: 2px; }

/* Stats row */
.stat-item[b-psne8o9jy4] { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.stat-value[b-psne8o9jy4] { font-size: 20px; font-weight: 700; }
.stat-label[b-psne8o9jy4] { font-size: 11px; color: #9ca3af; text-align: center; }

/* Feedback card */
.feedback-card[b-psne8o9jy4] {
    background: #f0f9ff;
    border: 1px solid #bae6fd;
    border-radius: 12px;
    padding: 16px;
}

/* Question cards */
.question-card[b-psne8o9jy4] {
    background: white;
    border: 1px solid #e5e7eb;
    border-left: 4px solid #e5e7eb;
    border-radius: 12px;
    padding: 16px;
}
.question-card.border-l-green-400[b-psne8o9jy4] { border-left-color: #4ade80; }
.question-card.border-l-red-400[b-psne8o9jy4]   { border-left-color: #f87171; }
.question-card.border-l-gray-300[b-psne8o9jy4]  { border-left-color: #d1d5db; }

.q-number[b-psne8o9jy4] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    background: #eef2ff;
    color: #4338ca;
    font-size: 12px;
    font-weight: 700;
    border-radius: 8px;
    flex-shrink: 0;
}

.question-text[b-psne8o9jy4] { font-size: 14px; color: #111827; line-height: 1.55; }

.marks-pill[b-psne8o9jy4] {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: 9999px;
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;
    flex-shrink: 0;
}
.marks-pill.pill-green[b-psne8o9jy4] { background: #d1fae5; color: #065f46; }
.marks-pill.pill-red[b-psne8o9jy4]   { background: #fee2e2; color: #991b1b; }
.marks-pill.pill-gray[b-psne8o9jy4]  { background: #f3f4f6; color: #4b5563; }

/* Answer section */
.answer-section[b-psne8o9jy4] {
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    padding: 12px 14px;
    margin-top: 10px;
}

.answer-section-header[b-psne8o9jy4] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}

.answer-verdict[b-psne8o9jy4] {
    display: inline-flex;
    align-items: center;
    font-size: 11px;
    font-weight: 700;
    padding: 2px 9px;
    border-radius: 9999px;
}
.verdict-correct[b-psne8o9jy4] { background: #dcfce7; color: #15803d; }
.verdict-wrong[b-psne8o9jy4]   { background: #fee2e2; color: #b91c1c; }

.text-answer-box[b-psne8o9jy4] {
    font-size: 14px;
    color: #1f2937;
    line-height: 1.6;
    padding: 8px 10px;
    border-radius: 6px;
    border: 1px solid #e5e7eb;
    background: #fff;
}
.answer-box-correct[b-psne8o9jy4] {
    border-color: #86efac;
    background: #f0fdf4;
    color: #14532d;
}
.answer-box-wrong[b-psne8o9jy4] {
    border-color: #fca5a5;
    background: #fff1f1;
    color: #7f1d1d;
}

/* MCQ options */
.mcq-option[b-psne8o9jy4] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 8px 12px;
    border-radius: 8px;
    border: 1px solid transparent;
}
.mcq-option.opt-correct-selected[b-psne8o9jy4]   { background: #dcfce7; border-color: #4ade80; }
.mcq-option.opt-wrong-selected[b-psne8o9jy4]     { background: #fee2e2; border-color: #f87171; }
.mcq-option.opt-correct-unselected[b-psne8o9jy4] { background: #f0fdf4; border-color: #bbf7d0; }
.mcq-option.opt-default[b-psne8o9jy4]            { background: #f9fafb; border-color: #f3f4f6; }

.mcq-letter[b-psne8o9jy4] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    font-size: 12px;
    font-weight: 700;
    flex-shrink: 0;
    margin-top: 1px;
}
.mcq-letter.letter-green[b-psne8o9jy4]         { background: #16a34a; color: white; }
.mcq-letter.letter-red[b-psne8o9jy4]           { background: #dc2626; color: white; }
.mcq-letter.letter-green-outline[b-psne8o9jy4] { background: transparent; border: 2px solid #4ade80; color: #16a34a; }
.mcq-letter.letter-default[b-psne8o9jy4]       { background: #e5e7eb; color: #4b5563; }

/* Teacher remarks */
.teacher-remarks[b-psne8o9jy4] {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    margin-top: 10px;
    padding: 8px 12px;
    background: #eef2ff;
    border-radius: 8px;
    border-left: 3px solid #6366f1;
    font-size: 13px;
    color: #374151;
}

/* Expected answer */
.expected-answer-section[b-psne8o9jy4] {
    margin-top: 10px;
    padding: 10px 14px;
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    border-left: 3px solid #16a34a;
    border-radius: 8px;
}
.expected-answer-section.expected-answer-unknown[b-psne8o9jy4] {
    background: #fffbeb;
    border-color: #fde68a;
    border-left-color: #d97706;
}
/* /Pages/Student/Results/Index.razor.rz.scp.css */
/* Styles handled via Tailwind utility classes in markup */
/* /Pages/Student/StudyGuide/Bookmarks.razor.rz.scp.css */
/* ── Study Guide Bookmarks page ─────────────────────────────────────────── */

.sgbm-loading[b-df8zjopv6o] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: 4rem 1rem;
    color: var(--color-neutral-500, #64748b);
    font-size: 0.875rem;
}

.sgbm-spinner[b-df8zjopv6o] {
    width: 28px;
    height: 28px;
    border: 3px solid var(--color-neutral-200, #e2e8f0);
    border-top-color: var(--color-teal-500, #4A9B8E);
    border-radius: 50%;
    animation: sgbm-spin-b-df8zjopv6o 0.7s linear infinite;
}

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

.sgbm-page[b-df8zjopv6o] {
    max-width: 760px;
    margin: 0 auto;
    padding: 1.5rem 1rem 3rem;
}

/* ── Header ───────────────────────────────────────────────────────────────── */
.sgbm-back[b-df8zjopv6o] {
    display: inline-block;
    font-size: 0.8rem;
    color: var(--color-teal-500, #4A9B8E);
    text-decoration: none;
    font-weight: 500;
    margin-bottom: 0.5rem;
}

.sgbm-back:hover[b-df8zjopv6o] { text-decoration: underline; }

.sgbm-title[b-df8zjopv6o] {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--color-neutral-900, #0f172a);
    margin: 0 0 0.2rem;
}

.sgbm-subtitle[b-df8zjopv6o] {
    font-size: 0.875rem;
    color: var(--color-neutral-500, #64748b);
    margin: 0 0 1.5rem;
}

.sgbm-header[b-df8zjopv6o] {
    margin-bottom: 1.5rem;
}

/* ── Error ─────────────────────────────────────────────────────────────────── */
.sgbm-error[b-df8zjopv6o] {
    padding: 0.75rem 1rem;
    background: #fee2e2;
    color: #991b1b;
    border-radius: 8px;
    font-size: 0.875rem;
    margin-bottom: 1rem;
}

/* ── Empty state ──────────────────────────────────────────────────────────── */
.sgbm-empty[b-df8zjopv6o] {
    text-align: center;
    padding: 3rem 1.5rem;
    color: var(--color-neutral-500, #64748b);
    background: var(--color-white, #fff);
    border-radius: 12px;
    box-shadow: var(--shadow-sm, 0 1px 3px rgba(0,0,0,.06));
}

.sgbm-empty-icon[b-df8zjopv6o] {
    font-size: 3rem;
    margin-bottom: 0.75rem;
}

.sgbm-empty-title[b-df8zjopv6o] {
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-neutral-700, #334155);
    margin: 0 0 0.4rem;
}

.sgbm-empty-sub[b-df8zjopv6o] {
    font-size: 0.875rem;
    color: var(--color-neutral-500, #64748b);
    max-width: 380px;
    margin: 0 auto 1.25rem;
    line-height: 1.5;
}

.sgbm-cta[b-df8zjopv6o] {
    display: inline-block;
    padding: 0.55rem 1.25rem;
    background: var(--color-teal-500, #4A9B8E);
    color: #fff;
    border-radius: 8px;
    font-size: 0.875rem;
    font-weight: 500;
    text-decoration: none;
    transition: opacity 0.15s;
}

.sgbm-cta:hover[b-df8zjopv6o] { opacity: 0.88; }

/* ── Subject group ────────────────────────────────────────────────────────── */
.sgbm-group[b-df8zjopv6o] {
    background: var(--color-white, #fff);
    border-radius: 12px;
    box-shadow: var(--shadow-sm, 0 1px 3px rgba(0,0,0,.06));
    margin-bottom: 1rem;
    overflow: hidden;
}

.sgbm-group-header[b-df8zjopv6o] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.8rem 1rem;
    cursor: pointer;
    user-select: none;
    border-bottom: 1px solid var(--color-neutral-100, #f1f5f9);
}

.sgbm-group-header:hover[b-df8zjopv6o] { background: var(--color-neutral-50, #f8fafc); }

.sgbm-group-info[b-df8zjopv6o] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.sgbm-subject-icon[b-df8zjopv6o] { font-size: 1rem; }

.sgbm-subject-name[b-df8zjopv6o] {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--color-neutral-800, #1e293b);
}

.sgbm-group-count[b-df8zjopv6o] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 5px;
    background: var(--color-teal-100, #ccfbf1);
    color: var(--color-teal-700, #0f766e);
    font-size: 0.7rem;
    font-weight: 700;
    border-radius: 10px;
}

.sgbm-chevron[b-df8zjopv6o] {
    font-size: 0.9rem;
    color: var(--color-neutral-400, #94a3b8);
    transition: transform 0.2s;
    display: inline-block;
}

.sgbm-chevron--collapsed[b-df8zjopv6o] { transform: rotate(-90deg); }

/* ── Bookmark row ─────────────────────────────────────────────────────────── */
.sgbm-rows[b-df8zjopv6o] {
    display: flex;
    flex-direction: column;
}

.sgbm-row[b-df8zjopv6o] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.7rem 1rem;
    border-bottom: 1px solid var(--color-neutral-50, #f8fafc);
    cursor: pointer;
    transition: background 0.12s;
}

.sgbm-row:last-child[b-df8zjopv6o] { border-bottom: none; }
.sgbm-row:hover[b-df8zjopv6o] { background: var(--color-neutral-50, #f8fafc); }

.sgbm-row-left[b-df8zjopv6o] { flex: 1; min-width: 0; }

.sgbm-chapter-tag[b-df8zjopv6o] {
    display: inline-block;
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--color-neutral-500, #64748b);
    background: var(--color-neutral-100, #f1f5f9);
    border-radius: 4px;
    padding: 0.1rem 0.4rem;
    margin-bottom: 0.3rem;
}

.sgbm-qtext[b-df8zjopv6o] {
    font-size: 0.83rem;
    color: var(--color-neutral-800, #1e293b);
    margin: 0 0 0.3rem;
    line-height: 1.45;
    word-break: break-word;
}

.sgbm-tags[b-df8zjopv6o] {
    display: flex;
    gap: 0.35rem;
    flex-wrap: wrap;
}

.sgbm-type-tag[b-df8zjopv6o],
.sgbm-marks-tag[b-df8zjopv6o] {
    font-size: 0.68rem;
    padding: 0.1rem 0.4rem;
    border-radius: 4px;
    background: var(--color-neutral-100, #f1f5f9);
    color: var(--color-neutral-600, #475569);
    font-weight: 500;
}

.sgbm-diff-tag[b-df8zjopv6o] { font-size: 0.68rem; padding: 0.1rem 0.4rem; border-radius: 4px; font-weight: 600; }
.sgbm-diff-easy[b-df8zjopv6o]   { background: #dcfce7; color: #166534; }
.sgbm-diff-medium[b-df8zjopv6o] { background: #fef9c3; color: #854d0e; }
.sgbm-diff-hard[b-df8zjopv6o]   { background: #fee2e2; color: #991b1b; }

.sgbm-row-right[b-df8zjopv6o] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.2rem;
    flex-shrink: 0;
}

.sgbm-date[b-df8zjopv6o] {
    font-size: 0.72rem;
    color: var(--color-neutral-400, #94a3b8);
    white-space: nowrap;
}

.sgbm-arrow[b-df8zjopv6o] {
    font-size: 1rem;
    color: var(--color-neutral-300, #cbd5e1);
}

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 480px) {
    .sgbm-title[b-df8zjopv6o] { font-size: 1.2rem; }
}
/* /Pages/Student/StudyGuide/Chapter.razor.rz.scp.css */
/* ── Study Guide Chapter (question list) page ────────────────────────────── */

.sgq-loading[b-87rpqy6bls] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: 4rem 1rem;
    color: var(--color-neutral-500, #64748b);
    font-size: 0.875rem;
}

.sgq-spinner[b-87rpqy6bls],
.sgq-load-spinner[b-87rpqy6bls] {
    width: 28px;
    height: 28px;
    border: 3px solid var(--color-neutral-200, #e2e8f0);
    border-top-color: var(--color-teal-500, #4A9B8E);
    border-radius: 50%;
    animation: sgq-spin-b-87rpqy6bls 0.7s linear infinite;
    margin: 0 auto;
}

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

.sgq-page[b-87rpqy6bls] {
    max-width: 820px;
    margin: 0 auto;
    padding: 1.5rem 1rem 3rem;
}

/* ── Breadcrumb ───────────────────────────────────────────────────────────── */
.sgq-breadcrumb[b-87rpqy6bls] {
    margin-bottom: 1.25rem;
}

.sgq-back[b-87rpqy6bls] {
    font-size: 0.8rem;
    color: var(--color-teal-500, #4A9B8E);
    text-decoration: none;
    font-weight: 500;
    cursor: pointer;
    background: none;
    border: none;
    padding: 0;
}

.sgq-back:hover[b-87rpqy6bls] { text-decoration: underline; }

/* ── Header ───────────────────────────────────────────────────────────────── */
.sgq-header[b-87rpqy6bls] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
    flex-wrap: wrap;
}

.sgq-title[b-87rpqy6bls] {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--color-neutral-900, #0f172a);
    margin: 0;
}

.sgq-meta[b-87rpqy6bls] {
    font-size: 0.8rem;
    color: var(--color-neutral-500, #64748b);
    margin: 0.25rem 0 0;
}

.sgq-bm-link[b-87rpqy6bls] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.8rem;
    color: var(--color-teal-500, #4A9B8E);
    text-decoration: none;
    padding: 0.35rem 0.75rem;
    border: 1px solid var(--color-teal-200, #b2dfdb);
    border-radius: 6px;
    white-space: nowrap;
}

.sgq-bm-link:hover[b-87rpqy6bls] { background: var(--color-teal-50, #f0fdf9); }

/* ── Progress ──────────────────────────────────────────────────────────────── */
.sgq-progress-wrap[b-87rpqy6bls] {
    margin-bottom: 1.25rem;
}

.sgq-progress-label[b-87rpqy6bls] {
    display: flex;
    justify-content: space-between;
    font-size: 0.78rem;
    color: var(--color-neutral-600, #475569);
    margin-bottom: 0.35rem;
}

.sgq-progress-track[b-87rpqy6bls] {
    height: 5px;
    background: var(--color-neutral-100, #f1f5f9);
    border-radius: 3px;
    overflow: hidden;
}

.sgq-progress-fill[b-87rpqy6bls] {
    height: 100%;
    background: var(--color-teal-500, #4A9B8E);
    border-radius: 3px;
    transition: width 0.4s ease;
}

/* ── Question list ─────────────────────────────────────────────────────────── */
.sgq-list[b-87rpqy6bls] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

/* ── Load more ──────────────────────────────────────────────────────────────── */
.sgq-load-more-wrap[b-87rpqy6bls] {
    display: flex;
    justify-content: center;
    padding: 1.5rem 0;
}

.sgq-load-more-btn[b-87rpqy6bls] {
    padding: 0.6rem 1.5rem;
    background: var(--color-white, #fff);
    border: 1.5px solid var(--color-teal-500, #4A9B8E);
    border-radius: 8px;
    color: var(--color-teal-500, #4A9B8E);
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s;
}

.sgq-load-more-btn:hover[b-87rpqy6bls] {
    background: var(--color-teal-50, #f0fdf9);
}

/* ── Error / empty ──────────────────────────────────────────────────────────── */
.sgq-error[b-87rpqy6bls] {
    padding: 0.75rem 1rem;
    background: #fee2e2;
    color: #991b1b;
    border-radius: 8px;
    font-size: 0.875rem;
    margin-bottom: 1rem;
}

.sgq-empty[b-87rpqy6bls] {
    text-align: center;
    padding: 3rem 1rem;
    color: var(--color-neutral-500, #64748b);
}

.sgq-empty-icon[b-87rpqy6bls] { font-size: 2.5rem; margin-bottom: 0.75rem; }

.sgq-back-link[b-87rpqy6bls] {
    display: inline-block;
    margin-top: 0.75rem;
    color: var(--color-teal-500, #4A9B8E);
    font-size: 0.875rem;
    text-decoration: none;
}

.sgq-back-link:hover[b-87rpqy6bls] { text-decoration: underline; }
/* /Pages/Student/StudyGuide/Chapters.razor.rz.scp.css */
/* ── Study Guide Chapters page ──────────────────────────────────────────── */

.sgc-loading[b-i5balex22v] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: 4rem 1rem;
    color: var(--color-neutral-500, #64748b);
    font-size: 0.875rem;
}

.sgc-spinner[b-i5balex22v] {
    width: 28px;
    height: 28px;
    border: 3px solid var(--color-neutral-200, #e2e8f0);
    border-top-color: var(--color-teal-500, #4A9B8E);
    border-radius: 50%;
    animation: sgc-spin-b-i5balex22v 0.7s linear infinite;
}

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

.sgc-page[b-i5balex22v] {
    max-width: 800px;
    margin: 0 auto;
    padding: 1.5rem 1rem 3rem;
}

/* ── Breadcrumb ───────────────────────────────────────────────────────────── */
.sgc-breadcrumb[b-i5balex22v] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8rem;
    margin-bottom: 1.25rem;
    color: var(--color-neutral-500, #64748b);
}

.sgc-back[b-i5balex22v] {
    color: var(--color-teal-500, #4A9B8E);
    text-decoration: none;
    font-weight: 500;
}

.sgc-back:hover[b-i5balex22v] { text-decoration: underline; }

.sgc-bc-sep[b-i5balex22v]   { color: var(--color-neutral-300, #cbd5e1); }
.sgc-bc-current[b-i5balex22v] { color: var(--color-neutral-600, #475569); font-weight: 500; }

/* ── Header ───────────────────────────────────────────────────────────────── */
.sgc-header[b-i5balex22v] {
    display: flex;
    align-items: center;
    gap: 1rem;
    background: var(--color-white, #fff);
    border-radius: 12px;
    padding: 1rem 1.25rem;
    margin-bottom: 1.25rem;
    box-shadow: var(--shadow-sm, 0 1px 3px rgba(0,0,0,.08));
}

.sgc-header-icon[b-i5balex22v] {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    flex-shrink: 0;
}

.sgc-title[b-i5balex22v] {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--color-neutral-900, #0f172a);
    margin: 0;
}

.sgc-meta[b-i5balex22v] {
    font-size: 0.8rem;
    color: var(--color-neutral-500, #64748b);
    margin: 0.25rem 0 0;
}

/* ── Chapter list ─────────────────────────────────────────────────────────── */
.sgc-list[b-i5balex22v] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

/* ── Skeleton ─────────────────────────────────────────────────────────────── */
.sgc-skeleton[b-i5balex22v] {
    height: 80px;
    background: linear-gradient(90deg, #f1f5f9 25%, #e2e8f0 50%, #f1f5f9 75%);
    background-size: 200% 100%;
    border-radius: 10px;
    animation: sgc-shimmer-b-i5balex22v 1.4s infinite;
}

@keyframes sgc-shimmer-b-i5balex22v {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ── Error / empty ────────────────────────────────────────────────────────── */
.sgc-error[b-i5balex22v] {
    padding: 0.75rem 1rem;
    background: #fee2e2;
    color: #991b1b;
    border-radius: 8px;
    font-size: 0.875rem;
    margin-bottom: 1rem;
}

.sgc-empty[b-i5balex22v] {
    text-align: center;
    padding: 3rem 1rem;
    color: var(--color-neutral-500, #64748b);
}

.sgc-empty-icon[b-i5balex22v] {
    font-size: 2.5rem;
    margin-bottom: 0.75rem;
}
/* /Pages/Student/StudyGuide/Index.razor.rz.scp.css */
/* ── Study Guide Index page (/student/study-guide) ────────────────────── */

/* Loading */
.sg-loading[b-d7gg8udj92] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: 4rem 1rem;
    color: var(--color-neutral-500, #64748b);
    font-size: 0.875rem;
}

.sg-spinner[b-d7gg8udj92] {
    width: 32px;
    height: 32px;
    border: 3px solid var(--color-neutral-200, #e2e8f0);
    border-top-color: var(--color-teal-500, #4A9B8E);
    border-radius: 50%;
    animation: sg-spin-b-d7gg8udj92 0.7s linear infinite;
}

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

/* Main wrapper */
.sg-wrap[b-d7gg8udj92] {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1rem 3rem;
}

/* App header */
.sg-app-header[b-d7gg8udj92] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 0 0.75rem;
    border-bottom: 1px solid var(--color-neutral-100, #f1f5f9);
    margin-bottom: 0;
}

.sg-app-title[b-d7gg8udj92] {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    font-size: 1.25rem;
    font-weight: 700;
}

.sg-app-brand[b-d7gg8udj92] {
    color: var(--color-teal-600, #0d9488);
}

.sg-app-page[b-d7gg8udj92] {
    color: var(--color-neutral-700, #334155);
    font-weight: 600;
}

.sg-header-actions[b-d7gg8udj92] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.sg-role-toggle[b-d7gg8udj92] {
    display: flex;
    border: 1px solid var(--color-neutral-200, #e2e8f0);
    border-radius: 20px;
    overflow: hidden;
    font-size: 0.78rem;
    font-weight: 600;
}

.sg-role-btn[b-d7gg8udj92] {
    padding: 0.3rem 0.9rem;
    cursor: pointer;
    color: var(--color-neutral-500, #64748b);
    text-decoration: none;
    transition: background 0.15s;
}

.sg-role-btn--active[b-d7gg8udj92] {
    background: var(--color-teal-500, #4A9B8E);
    color: #fff;
}

.sg-bm-link[b-d7gg8udj92] {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--color-neutral-600, #475569);
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 0.3rem;
}

.sg-bm-badge[b-d7gg8udj92] {
    background: var(--color-teal-500, #4A9B8E);
    color: #fff;
    font-size: 0.65rem;
    font-weight: 700;
    padding: 0.1rem 0.4rem;
    border-radius: 99px;
}

/* Student info bar */
.sg-info-bar[b-d7gg8udj92] {
    background: #f0edff;
    border-left: 3px solid #8b5cf6;
    padding: 0.55rem 1rem;
    font-size: 0.8rem;
    color: var(--color-neutral-700, #334155);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0;
}

/* Tabs */
.sg-tabs[b-d7gg8udj92] {
    display: flex;
    gap: 0;
    border-bottom: 2px solid var(--color-neutral-100, #f1f5f9);
    margin-bottom: 1rem;
}

.sg-tab[b-d7gg8udj92] {
    padding: 0.7rem 1.1rem;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--color-neutral-500, #64748b);
    border: none;
    background: none;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    display: flex;
    align-items: center;
    gap: 0.35rem;
    transition: color 0.15s;
}

.sg-tab:hover[b-d7gg8udj92] { color: var(--color-neutral-800, #1e293b); }

.sg-tab--active[b-d7gg8udj92] {
    color: var(--color-teal-600, #0d9488);
    border-bottom-color: var(--color-teal-500, #4A9B8E);
}

.sg-tab-badge[b-d7gg8udj92] {
    background: var(--color-teal-100, #ccfbf1);
    color: var(--color-teal-700, #0f766e);
    font-size: 0.65rem;
    font-weight: 700;
    padding: 0.1rem 0.4rem;
    border-radius: 99px;
}

/* Search + filter row */
.sg-search-row[b-d7gg8udj92] {
    display: flex;
    gap: 0.75rem;
    align-items: center;
    margin-bottom: 1.25rem;
}

.sg-search-wrap[b-d7gg8udj92] {
    flex: 1;
    position: relative;
}

.sg-search-icon[b-d7gg8udj92] {
    position: absolute;
    left: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.9rem;
    pointer-events: none;
}

.sg-search-input[b-d7gg8udj92] {
    width: 100%;
    padding: 0.55rem 0.75rem 0.55rem 2.25rem;
    border: 1px solid var(--color-neutral-200, #e2e8f0);
    border-radius: 8px;
    font-size: 0.85rem;
    background: var(--color-white, #fff);
    color: var(--color-neutral-800, #1e293b);
    box-shadow: 0 1px 3px rgba(0,0,0,.04);
}

.sg-search-input:focus[b-d7gg8udj92] { outline: none; border-color: var(--color-teal-400, #2dd4bf); }

.sg-filter-btns[b-d7gg8udj92] { display: flex; gap: 0.5rem; }

.sg-filter-sel[b-d7gg8udj92] {
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--color-neutral-200, #e2e8f0);
    border-radius: 8px;
    font-size: 0.8rem;
    color: var(--color-neutral-700, #334155);
    background: #fff;
    cursor: pointer;
}

/* Stats row */
.sg-stats-row[b-d7gg8udj92] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.875rem;
    margin-bottom: 1.5rem;
}

.sg-stat-card[b-d7gg8udj92] {
    background: var(--color-white, #fff);
    border-radius: 10px;
    padding: 1rem;
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    box-shadow: 0 1px 4px rgba(0,0,0,.06);
    border: 1px solid var(--color-neutral-100, #f1f5f9);
}

.sg-stat-icon[b-d7gg8udj92] { font-size: 1.4rem; margin-top: 0.1rem; }

.sg-stat-body[b-d7gg8udj92] { flex: 1; }

.sg-stat-num[b-d7gg8udj92] {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--color-neutral-800, #1e293b);
    line-height: 1.1;
}

.sg-stat-lbl[b-d7gg8udj92] {
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-neutral-400, #94a3b8);
    margin-top: 0.1rem;
}

.sg-stat-sub[b-d7gg8udj92] {
    font-size: 0.72rem;
    color: var(--color-neutral-400, #94a3b8);
    margin-top: 0.15rem;
}

.sg-stat-sub--green[b-d7gg8udj92] { color: var(--color-success-600, #16a34a); }
.sg-stat-sub--orange[b-d7gg8udj92] { color: #f97316; }

/* Section header */
.sg-section-hdr[b-d7gg8udj92] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 0.875rem;
}

.sg-section-title[b-d7gg8udj92] {
    font-size: 1rem;
    font-weight: 700;
    color: var(--color-neutral-800, #1e293b);
}

.sg-section-meta[b-d7gg8udj92] {
    font-size: 0.75rem;
    color: var(--color-neutral-400, #94a3b8);
}

/* Subjects grid */
.sg-subjects-grid[b-d7gg8udj92] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 0.875rem;
    margin-bottom: 2rem;
}

/* Skeleton */
.sg-card-skeleton[b-d7gg8udj92] {
    background: linear-gradient(90deg, #f1f5f9 25%, #e2e8f0 50%, #f1f5f9 75%);
    background-size: 200% 100%;
    animation: sg-shimmer-b-d7gg8udj92 1.2s infinite;
    border-radius: 10px;
    height: 140px;
}

@keyframes sg-shimmer-b-d7gg8udj92 {
    from { background-position: 200% 0; }
    to { background-position: -200% 0; }
}

/* Error / empty */
.sg-error[b-d7gg8udj92] {
    background: #fee2e2;
    color: #b91c1c;
    border-radius: 8px;
    padding: 0.75rem 1rem;
    font-size: 0.85rem;
    margin-bottom: 1rem;
}

.sg-empty[b-d7gg8udj92] {
    text-align: center;
    padding: 2.5rem 1rem;
    color: var(--color-neutral-400, #94a3b8);
    font-size: 0.875rem;
}

.sg-empty-icon[b-d7gg8udj92] { font-size: 2rem; margin-bottom: 0.5rem; }

/* Chapters section */
.sg-chapters-section[b-d7gg8udj92] {
    margin-top: 0.5rem;
    padding-top: 1.5rem;
    border-top: 2px solid var(--color-neutral-100, #f1f5f9);
}

/* Type filter chips */
.sg-type-chips[b-d7gg8udj92] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-bottom: 1rem;
}

.sg-type-chip[b-d7gg8udj92] {
    padding: 0.3rem 0.75rem;
    border-radius: 99px;
    border: 1.5px solid var(--color-neutral-200, #e2e8f0);
    font-size: 0.72rem;
    font-weight: 600;
    cursor: pointer;
    background: #fff;
    color: var(--color-neutral-600, #475569);
    transition: all 0.15s;
}

.sg-type-chip:hover[b-d7gg8udj92] { border-color: var(--color-teal-400, #2dd4bf); color: var(--color-teal-600, #0d9488); }

.sg-type-chip--active[b-d7gg8udj92] {
    background: var(--color-teal-500, #4A9B8E);
    border-color: var(--color-teal-500, #4A9B8E);
    color: #fff;
}

/* Chapters grid */
.sg-chapters-grid[b-d7gg8udj92] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: 0.875rem;
}

/* ── Responsive ── */
@media (max-width: 768px) {
    .sg-stats-row[b-d7gg8udj92] { grid-template-columns: repeat(2, 1fr); }
    .sg-subjects-grid[b-d7gg8udj92] { grid-template-columns: repeat(2, 1fr); }
    .sg-chapters-grid[b-d7gg8udj92] { grid-template-columns: 1fr 1fr; }
    .sg-app-title[b-d7gg8udj92] { font-size: 1rem; }
    .sg-search-row[b-d7gg8udj92] { flex-direction: column; align-items: stretch; }
}

@media (max-width: 480px) {
    .sg-stats-row[b-d7gg8udj92] { grid-template-columns: 1fr 1fr; }
    .sg-subjects-grid[b-d7gg8udj92] { grid-template-columns: 1fr 1fr; }
    .sg-chapters-grid[b-d7gg8udj92] { grid-template-columns: 1fr; }
}

}

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

.sg-title[b-d7gg8udj92] {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--color-neutral-900, #0f172a);
    margin: 0;
    line-height: 1.2;
}

.sg-subtitle[b-d7gg8udj92] {
    font-size: 0.875rem;
    color: var(--color-neutral-500, #64748b);
    margin: 0.25rem 0 0;
}

.sg-bookmarks-btn[b-d7gg8udj92] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 1rem;
    background: var(--color-white, #fff);
    border: 1.5px solid var(--color-neutral-200, #e2e8f0);
    border-radius: 8px;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--color-neutral-700, #334155);
    text-decoration: none;
    transition: border-color 0.15s, background 0.15s;
    white-space: nowrap;
}

.sg-bookmarks-btn:hover[b-d7gg8udj92] {
    border-color: var(--color-teal-500, #4A9B8E);
    background: var(--color-teal-50, #f0fdf9);
}

.sg-bm-badge[b-d7gg8udj92] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 5px;
    background: var(--color-teal-500, #4A9B8E);
    color: #fff;
    font-size: 0.7rem;
    font-weight: 700;
    border-radius: 10px;
}

/* ── Overall progress bar ────────────────────────────────────────────────── */
.sg-progress-bar-wrap[b-d7gg8udj92] {
    margin-bottom: 1.5rem;
}

.sg-progress-bar-label[b-d7gg8udj92] {
    display: flex;
    justify-content: space-between;
    font-size: 0.8rem;
    color: var(--color-neutral-600, #475569);
    margin-bottom: 0.4rem;
}

.sg-progress-track[b-d7gg8udj92] {
    height: 6px;
    background: var(--color-neutral-100, #f1f5f9);
    border-radius: 3px;
    overflow: hidden;
}

.sg-progress-fill[b-d7gg8udj92] {
    height: 100%;
    background: var(--color-teal-500, #4A9B8E);
    border-radius: 3px;
    transition: width 0.6s ease;
}

/* ── Subject grid ────────────────────────────────────────────────────────── */
.sg-subjects-grid[b-d7gg8udj92] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 1rem;
}

/* ── Skeletons ───────────────────────────────────────────────────────────── */
.sg-card-skeleton[b-d7gg8udj92] {
    height: 220px;
    background: linear-gradient(90deg, #f1f5f9 25%, #e2e8f0 50%, #f1f5f9 75%);
    background-size: 200% 100%;
    border-radius: 12px;
    animation: sg-shimmer-b-d7gg8udj92 1.4s infinite;
}

@keyframes sg-shimmer-b-d7gg8udj92 {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ── Error / empty ───────────────────────────────────────────────────────── */
.sg-error[b-d7gg8udj92] {
    padding: 0.75rem 1rem;
    background: #fee2e2;
    color: #991b1b;
    border-radius: 8px;
    font-size: 0.875rem;
    margin-bottom: 1rem;
}

.sg-empty[b-d7gg8udj92] {
    text-align: center;
    padding: 3rem 1rem;
    color: var(--color-neutral-500, #64748b);
}

.sg-empty-icon[b-d7gg8udj92] {
    font-size: 2.5rem;
    margin-bottom: 0.75rem;
}

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 480px) {
    .sg-subjects-grid[b-d7gg8udj92] {
        grid-template-columns: 1fr 1fr;
    }
    .sg-title[b-d7gg8udj92] { font-size: 1.25rem; }
}
/* /Pages/Student/SyllabusProgress/Index.razor.rz.scp.css */
/* ── Syllabus Progress (Student) ─────────────────────────────────── */

.sp-page[b-47ljgwzh6o] {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    padding: 1rem 0;
}

/* Subject select */
.sp-select[b-47ljgwzh6o] {
    width: 100%;
    max-width: 320px;
    padding: 0.5rem 0.75rem;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    font-size: 0.875rem;
    color: #334155;
    background: #fff;
}

/* Subject card */
.subject-card[b-47ljgwzh6o] {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 1rem 1.25rem;
}

.subject-card-header[b-47ljgwzh6o] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.subject-card-header h3[b-47ljgwzh6o] {
    font-size: 1rem;
    font-weight: 600;
    color: #1e293b;
    margin: 0;
}

.coverage-badge[b-47ljgwzh6o] {
    font-size: 0.75rem;
    font-weight: 600;
    color: #0d9488;
    background: #f0fdfa;
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
}

/* Chapter card */
.chapter-card[b-47ljgwzh6o] {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 0.75rem 1rem;
    margin-bottom: 0.75rem;
}

.chapter-card:last-child[b-47ljgwzh6o] {
    margin-bottom: 0;
}

.chapter-card-header[b-47ljgwzh6o] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
}

.chapter-name[b-47ljgwzh6o] {
    font-size: 0.9rem;
    font-weight: 600;
    color: #334155;
}

.chapter-progress[b-47ljgwzh6o] {
    font-size: 0.75rem;
    color: #64748b;
    font-weight: 500;
}

/* Coverage bar */
.coverage-bar[b-47ljgwzh6o] {
    height: 6px;
    background: #e2e8f0;
    border-radius: 3px;
    overflow: hidden;
    margin-bottom: 0.75rem;
}

.coverage-fill[b-47ljgwzh6o] {
    height: 100%;
    border-radius: 3px;
    transition: width 0.3s ease;
}

.coverage-fill.good[b-47ljgwzh6o] {
    background: #10b981;
}

.coverage-fill.medium[b-47ljgwzh6o] {
    background: #f59e0b;
}

.coverage-fill.low[b-47ljgwzh6o] {
    background: #ef4444;
}

/* Micro chapter list */
.micro-list[b-47ljgwzh6o] {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.micro-item[b-47ljgwzh6o] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.85rem;
    color: #475569;
    padding: 0.3rem 0.5rem;
    border-radius: 6px;
}

.micro-item.completed[b-47ljgwzh6o] {
    color: #94a3b8;
    text-decoration: line-through;
    text-decoration-color: #cbd5e1;
}

.micro-item.upcoming[b-47ljgwzh6o] {
    color: #334155;
}

.micro-item.notscheduled[b-47ljgwzh6o] {
    color: #94a3b8;
}

.micro-item.up-next[b-47ljgwzh6o] {
    background: #f0fdfa;
    border-left: 3px solid #0d9488;
}

/* Status dot */
.micro-status-dot[b-47ljgwzh6o] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.micro-item.completed .micro-status-dot[b-47ljgwzh6o] {
    background: #10b981;
}

.micro-item.upcoming .micro-status-dot[b-47ljgwzh6o] {
    background: #3b82f6;
}

.micro-item.notscheduled .micro-status-dot[b-47ljgwzh6o] {
    background: #cbd5e1;
}

/* Up next badge */
.up-next-badge[b-47ljgwzh6o] {
    font-size: 0.65rem;
    font-weight: 700;
    color: #0d9488;
    background: #ccfbf1;
    padding: 0.1rem 0.4rem;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

/* Date */
.micro-date[b-47ljgwzh6o] {
    margin-left: auto;
    font-size: 0.75rem;
    color: #94a3b8;
    white-space: nowrap;
}

/* Empty state */
.empty-state[b-47ljgwzh6o] {
    text-align: center;
    padding: 2.5rem 1rem;
    color: #94a3b8;
    font-size: 0.9rem;
}

/* Loading */
.loading-container[b-47ljgwzh6o] {
    text-align: center;
    padding: 2rem;
    color: #64748b;
}

.spinner[b-47ljgwzh6o] {
    width: 2rem;
    height: 2rem;
    border: 3px solid #e2e8f0;
    border-top-color: #0d9488;
    border-radius: 50%;
    animation: spin-b-47ljgwzh6o 0.8s linear infinite;
    margin: 0 auto 0.75rem;
}

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

/* Alert */
.alert[b-47ljgwzh6o] {
    padding: 0.75rem 1rem;
    border-radius: 8px;
    font-size: 0.875rem;
}

.alert-danger[b-47ljgwzh6o] {
    background: #fee2e2;
    color: #991b1b;
    border: 1px solid #fecaca;
}

/* ── Responsive ──────────────────────────────────────────────────── */
@media (max-width: 768px) {
    .sp-page[b-47ljgwzh6o] {
        padding: 0.5rem 0;
        gap: 0.75rem;
    }

    .subject-card[b-47ljgwzh6o] {
        padding: 0.75rem;
    }

    .chapter-card[b-47ljgwzh6o] {
        padding: 0.6rem 0.75rem;
    }

    .micro-item[b-47ljgwzh6o] {
        font-size: 0.8rem;
    }

    .micro-date[b-47ljgwzh6o] {
        display: none;
    }
}
/* /Pages/Student/TeachingPlan/Index.razor.rz.scp.css */
.tp-student-page[b-msox9gohx7] {
    padding: 1.5rem 1.5rem 3rem;
    max-width: 1200px;
    margin: 0 auto;
}

/* Header */
.tp-header[b-msox9gohx7] {
    margin-bottom: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

@media (min-width: 640px) {
    .tp-header[b-msox9gohx7] {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }
}

.tp-title[b-msox9gohx7] {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--color-neutral-900, #111827);
    margin: 0;
}

.tp-subtitle[b-msox9gohx7] {
    font-size: 0.875rem;
    color: var(--color-neutral-500, #6B7280);
    margin: 0.25rem 0 0;
}

/* Filter bar */
.tp-filter-bar[b-msox9gohx7] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 1rem;
    background: #fff;
    border: 1px solid var(--color-neutral-200, #E5E7EB);
    border-radius: 0.75rem;
    padding: 1rem 1.25rem;
    margin-bottom: 1.5rem;
}

.tp-filter-group[b-msox9gohx7] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.tp-filter-label[b-msox9gohx7] {
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--color-neutral-600, #4B5563);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.tp-input[b-msox9gohx7] {
    border: 1px solid var(--color-neutral-300, #D1D5DB);
    border-radius: 0.5rem;
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
    color: var(--color-neutral-900, #111827);
    background: #fff;
    outline: none;
    transition: border-color 0.15s;
    min-width: 160px;
}

.tp-input:focus[b-msox9gohx7] {
    border-color: var(--color-primary-500, #6366F1);
}

.tp-filter-actions[b-msox9gohx7] {
    display: flex;
    gap: 0.5rem;
    align-items: flex-end;
}

.tp-btn-primary[b-msox9gohx7] {
    background: var(--color-primary-600, #4F46E5);
    color: #fff;
    border: none;
    border-radius: 0.5rem;
    padding: 0.5rem 1.25rem;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s;
}

.tp-btn-primary:hover[b-msox9gohx7] {
    background: var(--color-primary-700, #4338CA);
}

.tp-btn-secondary[b-msox9gohx7] {
    background: #fff;
    color: var(--color-neutral-700, #374151);
    border: 1px solid var(--color-neutral-300, #D1D5DB);
    border-radius: 0.5rem;
    padding: 0.5rem 1.25rem;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s;
}

.tp-btn-secondary:hover[b-msox9gohx7] {
    background: var(--color-neutral-50, #F9FAFB);
}

/* Loading */
.tp-loading[b-msox9gohx7] {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 200px;
}

/* Empty state */
.tp-empty[b-msox9gohx7] {
    text-align: center;
    padding: 4rem 2rem;
    background: #fff;
    border: 1px solid var(--color-neutral-200, #E5E7EB);
    border-radius: 0.75rem;
}

.tp-empty-icon[b-msox9gohx7] {
    font-size: 3rem;
    margin-bottom: 1rem;
}

.tp-empty-text[b-msox9gohx7] {
    color: var(--color-neutral-500, #6B7280);
    font-size: 0.95rem;
}

/* Table */
.tp-table-wrap[b-msox9gohx7] {
    overflow-x: auto;
    border-radius: 0.75rem;
    border: 1px solid var(--color-neutral-200, #E5E7EB);
    background: #fff;
}

.tp-table[b-msox9gohx7] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
}

.tp-table thead tr[b-msox9gohx7] {
    background: var(--color-neutral-50, #F9FAFB);
    border-bottom: 1px solid var(--color-neutral-200, #E5E7EB);
}

.tp-table th[b-msox9gohx7] {
    padding: 0.875rem 1rem;
    font-weight: 600;
    text-align: left;
    color: var(--color-neutral-600, #4B5563);
    white-space: nowrap;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.tp-table td[b-msox9gohx7] {
    padding: 0.8rem 1rem;
    border-bottom: 1px solid var(--color-neutral-100, #F3F4F6);
    color: var(--color-neutral-800, #1F2937);
    vertical-align: middle;
}

.tp-table tbody tr:last-child td[b-msox9gohx7] {
    border-bottom: none;
}

.tp-table tbody tr:hover td[b-msox9gohx7] {
    background: var(--color-neutral-50, #F9FAFB);
}

.tp-col-center[b-msox9gohx7] {
    text-align: center;
}

.tp-date-cell[b-msox9gohx7] {
    white-space: nowrap;
    color: var(--color-neutral-600, #4B5563);
}

.tp-chapter-cell[b-msox9gohx7] {
    color: var(--color-neutral-600, #4B5563);
    font-size: 0.825rem;
}

.tp-activity-cell[b-msox9gohx7] {
    color: var(--color-neutral-500, #6B7280);
    font-size: 0.825rem;
}

.tp-subject-badge[b-msox9gohx7] {
    display: inline-block;
    background: var(--color-primary-100, #E0E7FF);
    color: var(--color-primary-700, #4338CA);
    border-radius: 0.375rem;
    padding: 0.2rem 0.65rem;
    font-size: 0.75rem;
    font-weight: 600;
    white-space: nowrap;
}

/* Pagination */
.tp-pagination[b-msox9gohx7] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    padding: 1.25rem 1rem;
    border-top: 1px solid var(--color-neutral-100, #F3F4F6);
    background: #fff;
    border-radius: 0 0 0.75rem 0.75rem;
}

.tp-page-btn[b-msox9gohx7] {
    background: #fff;
    border: 1px solid var(--color-neutral-300, #D1D5DB);
    border-radius: 0.5rem;
    padding: 0.4rem 1rem;
    font-size: 0.875rem;
    cursor: pointer;
    color: var(--color-neutral-700, #374151);
    transition: background 0.15s;
}

.tp-page-btn:hover:not(:disabled)[b-msox9gohx7] {
    background: var(--color-neutral-100, #F3F4F6);
}

.tp-page-btn:disabled[b-msox9gohx7] {
    opacity: 0.4;
    cursor: not-allowed;
}

.tp-page-info[b-msox9gohx7] {
    font-size: 0.875rem;
    color: var(--color-neutral-600, #4B5563);
}

.tp-total[b-msox9gohx7] {
    color: var(--color-neutral-400, #9CA3AF);
    margin-left: 0.25rem;
}
/* /Pages/Student/Timetable/Index.razor.rz.scp.css */

.timetable-page[b-g3xw4g6xoy] {
    padding: var(--space-4) var(--space-6);
    max-width: 1280px;
    margin: 0 auto;
}

.page-header[b-g3xw4g6xoy] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--space-5);
    flex-wrap: wrap;
    gap: var(--space-3);
}

.page-title[b-g3xw4g6xoy] {
    font-size: var(--font-size-xl);
    font-weight: var(--font-bold);
    color: var(--color-text-primary);
    margin: 0;
}

.page-subtitle[b-g3xw4g6xoy] {
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
    margin: var(--space-1) 0 0;
}

.view-toggle[b-g3xw4g6xoy] {
    display: flex;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.toggle-btn[b-g3xw4g6xoy] {
    padding: var(--space-2) var(--space-4);
    border: none;
    background: transparent;
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}

.toggle-btn.active[b-g3xw4g6xoy] {
    background: var(--color-primary);
    color: #fff;
    font-weight: var(--font-semibold);
}

.loading-container[b-g3xw4g6xoy],
.error-container[b-g3xw4g6xoy],
.empty-container[b-g3xw4g6xoy] {
    text-align: center;
    padding: var(--space-14) var(--space-4);
    color: var(--color-text-secondary);
}

.no-school-today[b-g3xw4g6xoy] {
    text-align: center;
    padding: var(--space-10);
    font-size: var(--font-size-base);
    color: var(--color-text-secondary);
}

/* Table wrapper for scrollable grid */
.table-wrap[b-g3xw4g6xoy] {
    overflow-x: auto;
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-border);
    background: #fff;
}

.tt-table[b-g3xw4g6xoy] {
    width: 100%;
    border-collapse: collapse;
    min-width: 860px;
}

/* Header row */
.tt-time-header[b-g3xw4g6xoy],
.tt-day-header[b-g3xw4g6xoy] {
    padding: var(--space-3) var(--space-4);
    text-align: center;
    background: #f7fafc;
    border-bottom: 1px solid var(--color-border);
    font-weight: var(--font-semibold);
    color: var(--color-text-primary);
    white-space: nowrap;
}

.tt-time-header[b-g3xw4g6xoy] {
    position: sticky;
    left: 0;
    z-index: 2;
    min-width: 130px;
    background: #f7fafc;
}

.tt-day-header .day-name[b-g3xw4g6xoy] {
    font-size: var(--font-size-sm);
}

.tt-today[b-g3xw4g6xoy] {
    background: linear-gradient(to bottom, #e5f4ff 60%, #fff 100%);
}

.today-badge[b-g3xw4g6xoy] {
    display: inline-block;
    margin-top: 2px;
    font-size: 10px;
    font-weight: var(--font-bold);
    background: var(--color-primary);
    color: #fff;
    padding: 1px 6px;
    border-radius: 999px;
}

/* Time/Period column */
.tt-time-cell[b-g3xw4g6xoy] {
    position: sticky;
    left: 0;
    z-index: 1;
    background: #fafbfc;
    border-right: 1px solid var(--color-border);
    padding: var(--space-2) var(--space-3);
    text-align: center;
    font-size: var(--font-size-xs);
    color: var(--color-text-secondary);
}

.period-label[b-g3xw4g6xoy] {
    font-weight: var(--font-bold);
    font-size: var(--font-size-sm);
    color: var(--color-text-primary);
    margin-bottom: 1px;
}

.time-range[b-g3xw4g6xoy] {
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
    opacity: 0.85;
}

/* Period cells */
.tt-cell[b-g3xw4g6xoy] {
    padding: 6px var(--space-2);
    border-right: 1px solid #f0f3f8;
    border-bottom: 1px solid #f0f3f8;
    vertical-align: top;
    font-size: var(--font-size-xs);
    min-width: 150px;
    position: relative;
}

.tt-cell:last-child[b-g3xw4g6xoy] {
    border-right: none;
}

.cell-pno[b-g3xw4g6xoy] {
    color: var(--color-text-muted);
    margin-bottom: 1px;
}

.cell-subject[b-g3xw4g6xoy] {
    font-weight: var(--font-semibold);
    color: var(--color-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cell-teacher[b-g3xw4g6xoy] {
    color: var(--color-text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cell-room[b-g3xw4g6xoy] {
    display: inline-block;
    margin-top: 2px;
    font-size: 10px;
    background: #f3f4f6;
    border-radius: 999px;
    padding: 0 5px;
}

/* Current period highlight */
.tt-current[b-g3xw4g6xoy] {
    box-shadow: inset 0 0 0 2px var(--color-primary);
    background: #f0f7ff;
}

.now-badge[b-g3xw4g6xoy] {
    position: absolute;
    top: 4px;
    right: 6px;
    font-size: 9px;
    font-weight: var(--font-bold);
    color: #fff;
    background: var(--color-primary);
    padding: 1px 5px;
    border-radius: 999px;
}

/* Break rows */
.tt-break[b-g3xw4g6xoy] {
    background: #fafafa;
    opacity: 0.85;
}

/* Mobile adjustments */
@media (max-width: 768px) {
    .timetable-page[b-g3xw4g6xoy] {
        padding: var(--space-3);
    }

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

    .tt-table[b-g3xw4g6xoy] {
        min-width: 700px;
    }
}
/* /Pages/Student/VideoLessons/Index.razor.rz.scp.css */
.hide-scrollbar[b-g66a8mz7jd] {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.hide-scrollbar[b-g66a8mz7jd]::-webkit-scrollbar {
    display: none;
}

.tab-active[b-g66a8mz7jd] {
    background-color: #4f46e5;
    color: #ffffff;
}

.tab-inactive[b-g66a8mz7jd] {
    background-color: #f3f4f6;
    color: #374151;
}

.tab-inactive:hover[b-g66a8mz7jd] {
    background-color: #e5e7eb;
}

.thumb-box[b-g66a8mz7jd] {
    height: 160px;
}

.thumb-box img[b-g66a8mz7jd] {
    height: 160px;
}

.play-overlay[b-g66a8mz7jd] {
    opacity: 0;
    transition: opacity 0.2s ease;
}

.video-card:hover .play-overlay[b-g66a8mz7jd] {
    opacity: 1;
}

.line-clamp-2[b-g66a8mz7jd] {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
/* /Pages/Student/VideoLessons/Watch.razor.rz.scp.css */
/* ════════════════════════════════════════════
   Watch Page — Scoped Styles
   ════════════════════════════════════════════ */

/* ── Page wrapper ── */
.watch-page[b-waiov5d289] {
    /* Bleed out of StudentLayout's p-8 (2rem) / p-5 (1.25rem) to fill edge-to-edge */
    margin: -2rem -2rem 0;
    width: calc(100% + 4rem);
    display: flex;
    flex-direction: column;
    background: #f3f4f6;
}

@media (max-width: 767px) {
    .watch-page[b-waiov5d289] {
        margin: -1.25rem -1.25rem 0;
        width: calc(100% + 2.5rem);
    }
}

/* ── Top Bar — sticky so prev/next always visible ── */
.watch-topbar[b-waiov5d289] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.5rem 1rem;
    background: #ffffff;
    border-bottom: 1px solid #e5e7eb;
    gap: 0.5rem;
    flex-wrap: wrap;
    flex-shrink: 0;
    position: sticky;
    top: 0;
    z-index: 30;
}

.watch-nav-btn[b-waiov5d289] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 0.5rem;
    color: #4b5563;
    background: transparent;
    border: 1px solid #e5e7eb;
    cursor: pointer;
    transition: background-color 0.15s;
    flex-shrink: 0;
}
.watch-nav-btn:hover:not(:disabled)[b-waiov5d289] { background: #f3f4f6; }
.watch-nav-btn:disabled[b-waiov5d289] { opacity: 0.35; cursor: not-allowed; }

.watch-home-btn[b-waiov5d289] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0.75rem;
    border-radius: 0.5rem;
    font-size: 0.8125rem;
    font-weight: 500;
    color: #374151;
    background: transparent;
    border: 1px solid #d1d5db;
    cursor: pointer;
    transition: background-color 0.15s;
    white-space: nowrap;
}
.watch-home-btn:hover[b-waiov5d289] { background: #f3f4f6; }

.watch-complete-todo[b-waiov5d289] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.4rem 0.875rem;
    border-radius: 0.5rem;
    font-size: 0.8125rem;
    font-weight: 600;
    background: #4f46e5;
    color: #ffffff;
    border: none;
    cursor: pointer;
    transition: background-color 0.15s;
    white-space: nowrap;
}
.watch-complete-todo:hover:not(:disabled)[b-waiov5d289] { background: #4338ca; }
.watch-complete-todo:disabled[b-waiov5d289] { opacity: 0.6; cursor: default; }

.watch-complete-done[b-waiov5d289] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.4rem 0.875rem;
    border-radius: 0.5rem;
    font-size: 0.8125rem;
    font-weight: 600;
    background: #dcfce7;
    color: #15803d;
    border: 1px solid #bbf7d0;
    cursor: default;
    white-space: nowrap;
}

/* ── Body (sidebar + main) ── */
.watch-body[b-waiov5d289] {
    display: flex;
    flex-direction: column;    /* mobile-first: video top, sidebar below */
    flex: 1;
}

@media (min-width: 1024px) {
    .watch-body[b-waiov5d289] {
        flex-direction: row;   /* desktop: sidebar left, video right */
        align-items: flex-start;
    }
}

/* ── Sidebar ── */
.watch-sidebar[b-waiov5d289] {
    width: 100%;
    background: #ffffff;
    border-top: 1px solid #e5e7eb;
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    /* Mobile: limit height so it doesn't push page too tall */
    max-height: 55vh;
    overflow-y: auto;
}

@media (min-width: 1024px) {
    .watch-sidebar[b-waiov5d289] {
        width: 300px;
        border-top: none;
        border-right: 1px solid #e5e7eb;
        max-height: none;
        overflow-y: auto;
        /* Sticky: sits just below the sticky topbar (~44px) */
        position: sticky;
        top: 44px;
        height: calc(100vh - 44px);
    }
}

@media (min-width: 1280px) {
    .watch-sidebar[b-waiov5d289] { width: 340px; }
}

/* Sidebar tab buttons */
.sidebar-tab[b-waiov5d289] {
    flex: 1;
    padding: 0.625rem 0.5rem;
    font-size: 0.8125rem;
    font-weight: 500;
    color: #6b7280;
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    cursor: pointer;
    transition: color 0.15s, border-color 0.15s;
}
.sidebar-tab:hover[b-waiov5d289] { color: #374151; }
.sidebar-tab.active[b-waiov5d289] {
    color: #4f46e5;
    font-weight: 600;
    border-bottom-color: #4f46e5;
}

/* Chapter header row */
.chapter-header[b-waiov5d289] {
    display: flex;
    align-items: center;
    padding: 0.6rem 0.875rem;
    cursor: pointer;
    user-select: none;
    border-bottom: 1px solid #f3f4f6;
    transition: background-color 0.15s;
}
.chapter-header:hover[b-waiov5d289]     { background: #f9fafb; }
.chapter-header.has-current[b-waiov5d289] { background: #eef2ff; }
.chapter-header.expanded[b-waiov5d289]  { background: #f3f4f6; }

/* Lesson row */
.lesson-row[b-waiov5d289] {
    display: flex;
    align-items: flex-start;
    gap: 0.625rem;
    padding: 0.6rem 0.875rem;
    cursor: pointer;
    border-left: 3px solid transparent;
    border-bottom: 1px solid #f9fafb;
    transition: background-color 0.15s;
}
.lesson-row:hover[b-waiov5d289]   { background: #f9fafb; }
.lesson-row.current[b-waiov5d289] {
    background: #eef2ff;
    border-left-color: #4f46e5;
}

/* ── Main content area ── */
.watch-main[b-waiov5d289] {
    flex: 1;
    min-width: 0;
    padding: 1rem;
}
@media (min-width: 768px) {
    .watch-main[b-waiov5d289] { padding: 1.25rem 1.5rem; }
}

/* ── Video container ── */
.video-container[b-waiov5d289] {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    background: #000000;
    border-radius: 0.5rem;
    overflow: hidden;
}

@media (min-width: 1024px) {
    .video-container[b-waiov5d289] {
        border-radius: 0.75rem;
        /*
         * On desktop the video fills the full flex width, which at wide
         * viewports makes it 700-900px tall — too big to see everything.
         * Cap the height to viewport-minus-overhead (~200px for topbar +
         * layout header + title row). The width formula ensures the
         * container stays exactly 16:9 at max-height, never wider.
         */
        max-height: calc(100vh - 200px);
        width: min(100%, calc((100vh - 200px) * 16 / 9));
    }
}

.video-container #yt-player[b-waiov5d289] {
    width: 100%;
    height: 100%;
}

/* :deep targets the YouTube-injected iframe (no Blazor scope attr) */
.video-container :deep(iframe)[b-waiov5d289] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* Transparent blocker over YouTube branding (bottom-left) */
.video-logo-blocker[b-waiov5d289] {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 150px;
    height: 40px;
    z-index: 1;
}

/* ── Video metadata card ── */
.video-meta-card[b-waiov5d289] {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 0.75rem;
    padding: 1rem;
    margin-bottom: 1rem;
}

.meta-badge[b-waiov5d289] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.7rem;
    font-weight: 600;
    padding: 0.25rem 0.625rem;
    border-radius: 9999px;
    white-space: nowrap;
}

.meta-badge--channel[b-waiov5d289] {
    background: #ede9fe;
    color: #5b21b6;
}

.meta-badge--cc[b-waiov5d289] {
    background: #dcfce7;
    color: #15803d;
    letter-spacing: 0.04em;
}

.meta-badge--hd[b-waiov5d289] {
    background: #dbeafe;
    color: #1d4ed8;
    letter-spacing: 0.04em;
}

.meta-badge--views[b-waiov5d289] {
    background: #f3f4f6;
    color: #374151;
}

.meta-badge--date[b-waiov5d289] {
    background: #f3f4f6;
    color: #374151;
}

.meta-description[b-waiov5d289] {
    font-size: 0.875rem;
    color: #4b5563;
    line-height: 1.6;
    white-space: pre-wrap;
    margin: 0;
}

.meta-description--collapsed[b-waiov5d289] {
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.meta-expand-btn[b-waiov5d289] {
    margin-top: 0.375rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: #4f46e5;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

.meta-expand-btn:hover[b-waiov5d289] {
    color: #4338ca;
}
/* /Pages/SuperAdmin/AiQaReview/Audit.razor.rz.scp.css */
.audit-results-page[b-wo98gaft86] {
    padding: var(--spacing-5);
    max-width: 1200px;
    margin: 0 auto;
}

/* ── Header ──────────────────────────────────── */
.back-link[b-wo98gaft86] {
    font-size: var(--font-size-sm);
    color: var(--color-primary-600);
    text-decoration: none;
    display: block;
    margin-bottom: var(--spacing-1);
}

.back-link:hover[b-wo98gaft86] { text-decoration: underline; }

.page-header[b-wo98gaft86] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--spacing-3);
    margin-bottom: var(--spacing-5);
}

.page-title[b-wo98gaft86] { font-size: var(--font-size-xl); font-weight: 700; margin: 0; color: var(--color-neutral-900); }
.page-title i[b-wo98gaft86] { color: var(--color-primary-600); margin-right: var(--spacing-2); }
.page-subtitle[b-wo98gaft86] { font-size: var(--font-size-sm); color: var(--color-neutral-500); margin: 4px 0 0; }

/* ── Bulk action bar ─────────────────────────── */
.bulk-bar[b-wo98gaft86] {
    position: sticky;
    top: 0;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--spacing-2);
    background: var(--color-primary-600);
    color: #fff;
    padding: var(--spacing-2) var(--spacing-3);
    border-radius: var(--radius-md);
    margin-bottom: var(--spacing-2);
    box-shadow: var(--shadow-md);
}

.bulk-count[b-wo98gaft86] { font-weight: 700; font-size: var(--font-size-sm); }
.bulk-actions[b-wo98gaft86] { display: flex; gap: var(--spacing-2); flex-wrap: wrap; align-items: center; }

/* ── Select-all header ───────────────────────── */
.select-all-header[b-wo98gaft86] {
    padding: var(--spacing-1) var(--spacing-2);
    margin-bottom: var(--spacing-1);
}

.select-all-label[b-wo98gaft86] {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    font-size: var(--font-size-sm);
    color: var(--color-neutral-600);
    cursor: pointer;
    user-select: none;
}

/* ── Row checkbox ────────────────────────────── */
.row-check-cell[b-wo98gaft86] {
    width: 32px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 var(--spacing-1);
}

.row-checkbox[b-wo98gaft86] {
    width: 16px;
    height: 16px;
    cursor: pointer;
    accent-color: var(--color-primary-600);
}

.row-check-done[b-wo98gaft86] {
    color: var(--color-success-400);
    font-size: 0.85rem;
}

.result-row-content[b-wo98gaft86] {
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
    flex: 1;
    cursor: pointer;
    user-select: none;
}

/* ── Selected card highlight ─────────────────── */
.result-card.selected[b-wo98gaft86] {
    border-color: var(--color-primary-400);
    background: var(--color-primary-50);
}

.result-card.selected .result-row[b-wo98gaft86] {
    background: var(--color-primary-50);
}

/* ── Result row (updated to flex with check cell) */
.result-card[b-wo98gaft86] {
    border: 1px solid var(--color-neutral-200);
    border-radius: var(--radius-md);
    margin-bottom: var(--spacing-2);
    overflow: hidden;
    background: #fff;
    transition: box-shadow 0.15s, border-color 0.15s, background 0.15s;
}

.result-card:hover[b-wo98gaft86] { box-shadow: var(--shadow-sm); }
.result-card.priority-high[b-wo98gaft86] { border-left: 3px solid var(--color-danger-400); }
.result-card.priority-medium[b-wo98gaft86] { border-left: 3px solid var(--color-warning-400); }

/* ── Summary row ─────────────────────────────── */
.result-row[b-wo98gaft86] {
    display: flex;
    align-items: center;
    gap: 0;
    padding: var(--spacing-2) var(--spacing-3);
    cursor: pointer;
    user-select: none;
}

.result-id[b-wo98gaft86] { font-weight: 700; color: var(--color-neutral-500); font-size: var(--font-size-sm); min-width: 48px; }
.result-type[b-wo98gaft86] { font-size: var(--font-size-xs); color: var(--color-neutral-500); min-width: 64px; }
.result-stages[b-wo98gaft86] { display: flex; gap: var(--spacing-1); flex-wrap: wrap; flex: 1; }
.result-overall[b-wo98gaft86] { min-width: 72px; }
.result-priority[b-wo98gaft86] { min-width: 64px; }
.result-decision[b-wo98gaft86] { min-width: 64px; }
.result-expand-icon[b-wo98gaft86] { color: var(--color-neutral-400); }

.stage-pill[b-wo98gaft86] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: var(--radius-full);
    font-size: 0.68rem;
    font-weight: 600;
}
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: var(--radius-full);
    font-size: 0.68rem;
    font-weight: 600;[b-wo98gaft86]
}

.stage-ok[b-wo98gaft86]      { background: var(--color-success-50); color: var(--color-success-700); }
.stage-warn[b-wo98gaft86]    { background: var(--color-warning-50); color: var(--color-warning-700); }
.stage-error[b-wo98gaft86]   { background: var(--color-danger-50); color: var(--color-danger-700); }
.stage-pending[b-wo98gaft86] { background: var(--color-neutral-100); color: var(--color-neutral-500); }

.result-overall[b-wo98gaft86] { min-width: 72px; }
.result-priority[b-wo98gaft86] { min-width: 64px; }
.result-decision[b-wo98gaft86] { min-width: 64px; }
.result-expand-icon[b-wo98gaft86] { color: var(--color-neutral-400); }

/* ── Detail panel ────────────────────────────── */
.result-detail[b-wo98gaft86] {
    padding: var(--spacing-3) var(--spacing-4);
    border-top: 1px solid var(--color-neutral-100);
    background: var(--color-neutral-50);
}

.detail-section[b-wo98gaft86] { margin-bottom: var(--spacing-3); }
.detail-section-title[b-wo98gaft86] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-neutral-500);
    padding-bottom: var(--spacing-1);
    border-bottom: 1px solid var(--color-neutral-200);
    margin-bottom: var(--spacing-2);
}

/* ── LaTeX diff (side-by-side with rendered preview) ─────── */
.latex-diff[b-wo98gaft86] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-3);
    margin: var(--spacing-2) 0;
}

.latex-diff-panel[b-wo98gaft86] {
    border-radius: var(--radius-sm);
    overflow: hidden;
}

.latex-before[b-wo98gaft86] { border: 1px solid var(--color-danger-300); }
.latex-after[b-wo98gaft86]  { border: 1px solid var(--color-success-300); }

.diff-panel-header[b-wo98gaft86] {
    padding: var(--spacing-1) var(--spacing-2);
    font-size: 0.7rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 6px;
}

.latex-before .diff-panel-header[b-wo98gaft86] { background: var(--color-danger-100); color: var(--color-danger-700); }
.latex-after  .diff-panel-header[b-wo98gaft86] { background: var(--color-success-100); color: var(--color-success-700); }

.diff-raw-code[b-wo98gaft86] {
    font-family: monospace;
    font-size: var(--font-size-xs);
    padding: var(--spacing-2);
    word-break: break-all;
    color: var(--color-neutral-700);
    background: var(--color-neutral-50);
    border-bottom: 1px dashed var(--color-neutral-200);
}

.diff-rendered[b-wo98gaft86] {
    padding: var(--spacing-2);
    background: #fff;
    font-size: var(--font-size-sm);
}

.diff-rendered-label[b-wo98gaft86] {
    display: block;
    font-size: 0.65rem;
    color: var(--color-neutral-400);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 4px;
}

.finding-summary[b-wo98gaft86] {
    font-size: var(--font-size-sm);
    color: var(--color-neutral-600);
    margin: var(--spacing-1) 0 var(--spacing-2);
}

/* ── Confidence pill (inline in section title) ─ */
.conf-pill[b-wo98gaft86] {
    font-size: 0.65rem;
    font-weight: 700;
    padding: 1px 7px;
    border-radius: var(--radius-full);
    margin-left: var(--spacing-2);
    vertical-align: middle;
}
.conf-high[b-wo98gaft86]   { background: var(--color-success-100); color: var(--color-success-700); }
.conf-medium[b-wo98gaft86] { background: var(--color-warning-100); color: var(--color-warning-700); }
.conf-low[b-wo98gaft86]    { background: var(--color-danger-100);  color: var(--color-danger-700); }

.model-pill[b-wo98gaft86] {
    font-size: 0.65rem;
    font-weight: 600;
    padding: 1px 7px;
    border-radius: var(--radius-full);
    margin-left: var(--spacing-2);
    background: var(--color-info-50);
    color: var(--color-info-700);
    vertical-align: middle;
    font-family: monospace;
}

/* ── Deviation banner (why answer is wrong) ──── */
.deviation-banner[b-wo98gaft86] {
    background: var(--color-neutral-50);
    border: 1px solid var(--color-neutral-200);
    border-radius: var(--radius-sm);
    padding: var(--spacing-2) var(--spacing-3);
    margin: var(--spacing-2) 0;
}

.deviation-row[b-wo98gaft86] {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-3);
    padding: var(--spacing-1) 0;
}

.deviation-label[b-wo98gaft86] {
    width: 100px;
    flex-shrink: 0;
    font-size: 0.72rem;
    color: var(--color-neutral-500);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding-top: 3px;
}

.deviation-value[b-wo98gaft86] { font-size: var(--font-size-sm); flex: 1; }
.deviation-value.stored[b-wo98gaft86] { color: var(--color-danger-700); font-weight: 600; }
.deviation-value.ai[b-wo98gaft86]     { color: var(--color-success-700); font-weight: 600; }
.deviation-value.fix[b-wo98gaft86]    { color: var(--color-primary-700); font-weight: 600; }

.deviation-arrow[b-wo98gaft86] {
    font-size: 0.72rem;
    color: var(--color-neutral-400);
    text-align: center;
    padding: 2px 0;
    border-top: 1px dashed var(--color-neutral-200);
    border-bottom: 1px dashed var(--color-neutral-200);
    margin: 2px 0;
}

/* ── AI Solution block ───────────────────────── */
.ai-solution-block[b-wo98gaft86] {
    background: var(--color-info-50);
    border: 1px solid var(--color-info-200);
    border-radius: var(--radius-sm);
    margin: var(--spacing-2) 0;
    overflow: hidden;
}

.ai-solution-header[b-wo98gaft86] {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    padding: var(--spacing-1) var(--spacing-3);
    background: var(--color-info-100);
    color: var(--color-info-800);
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.ai-solution-note[b-wo98gaft86] {
    font-weight: 400;
    text-transform: none;
    color: var(--color-info-600);
    font-size: 0.68rem;
    margin-left: auto;
}

.ai-solution-body[b-wo98gaft86] {
    padding: var(--spacing-3);
    font-size: var(--font-size-sm);
    color: var(--color-neutral-800);
    line-height: 1.7;
}

/* ── Consistency issues ──────────────────────── */
.consistency-issue[b-wo98gaft86] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: var(--spacing-2);
    padding: var(--spacing-2);
    border-radius: var(--radius-sm);
    margin-bottom: var(--spacing-1);
    font-size: var(--font-size-sm);
}

.consistency-error[b-wo98gaft86]   { background: var(--color-danger-50); border-left: 3px solid var(--color-danger-400); }
.consistency-warning[b-wo98gaft86] { background: var(--color-warning-50); border-left: 3px solid var(--color-warning-400); }
.consistency-info[b-wo98gaft86]    { background: var(--color-info-50); border-left: 3px solid var(--color-info-300); }

.issue-severity[b-wo98gaft86] {
    font-size: 0.65rem;
    font-weight: 700;
    padding: 1px 6px;
    border-radius: var(--radius-full);
    flex-shrink: 0;
}

.consistency-error   .issue-severity[b-wo98gaft86] { background: var(--color-danger-100); color: var(--color-danger-700); }
.consistency-warning .issue-severity[b-wo98gaft86] { background: var(--color-warning-100); color: var(--color-warning-700); }
.consistency-info    .issue-severity[b-wo98gaft86] { background: var(--color-info-100); color: var(--color-info-700); }

.issue-field[b-wo98gaft86] { font-weight: 600; color: var(--color-neutral-700); flex-shrink: 0; }
.issue-text[b-wo98gaft86]  { flex: 1; color: var(--color-neutral-700); }
.issue-suggestion[b-wo98gaft86] { width: 100%; font-size: var(--font-size-xs); color: var(--color-neutral-500); margin-top: 2px; }
.issue-suggestion i[b-wo98gaft86] { margin-right: 4px; color: var(--color-warning-500); }

/* ── Issues text (fallback) ──────────────────── */
.issues-text[b-wo98gaft86] { font-size: var(--font-size-sm); color: var(--color-neutral-700); }

/* ── Review panel ────────────────────────────── */
.review-panel[b-wo98gaft86] {
    background: var(--color-neutral-50);
    border: 1px solid var(--color-neutral-200);
    border-radius: var(--radius-md);
    padding: var(--spacing-3);
    margin-top: var(--spacing-2);
}

.review-panel--required[b-wo98gaft86] {
    background: var(--color-warning-50);
    border-color: var(--color-warning-200);
}

.review-title[b-wo98gaft86] {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    font-weight: 600;
    color: var(--color-neutral-700);
    margin-bottom: var(--spacing-2);
    font-size: var(--font-size-sm);
}

.review-panel--required .review-title[b-wo98gaft86] { color: var(--color-warning-800); }

.review-quick-actions[b-wo98gaft86] { display: flex; gap: var(--spacing-2); flex-wrap: wrap; }
.review-actions[b-wo98gaft86] { display: flex; gap: var(--spacing-2); flex-wrap: wrap; margin-top: var(--spacing-2); }
.review-done[b-wo98gaft86] { font-size: var(--font-size-sm); color: var(--color-success-700); margin-top: var(--spacing-2); }

/* ── Badges ──────────────────────────────────── */
.badge[b-wo98gaft86] { display: inline-block; padding: 2px 8px; border-radius: var(--radius-full); font-size: 0.72rem; font-weight: 600; }
.badge-info[b-wo98gaft86]     { background: var(--color-info-100); color: var(--color-info-700); }
.badge-success[b-wo98gaft86]  { background: var(--color-success-100); color: var(--color-success-700); }
.badge-warning[b-wo98gaft86]  { background: var(--color-warning-100); color: var(--color-warning-700); }
.badge-danger[b-wo98gaft86]   { background: var(--color-danger-100); color: var(--color-danger-700); }
.badge-secondary[b-wo98gaft86] { background: var(--color-neutral-100); color: var(--color-neutral-600); }

.loading-state[b-wo98gaft86], .empty-state[b-wo98gaft86] { text-align: center; padding: var(--spacing-7); color: var(--color-neutral-400); }
.empty-icon[b-wo98gaft86] { font-size: 3rem; display: block; margin-bottom: var(--spacing-3); }

@media (max-width: 768px) {
    .audit-results-page[b-wo98gaft86] { padding: var(--spacing-3); }
    .result-row[b-wo98gaft86] { flex-wrap: wrap; gap: var(--spacing-2); }
    .result-stages[b-wo98gaft86] { min-width: 100%; }
    .latex-diff[b-wo98gaft86] { grid-template-columns: 1fr; }
    .deviation-row[b-wo98gaft86] { flex-direction: column; gap: var(--spacing-1); }
    .deviation-label[b-wo98gaft86] { width: auto; }
    .review-quick-actions[b-wo98gaft86] { flex-direction: column; }
    .bulk-bar[b-wo98gaft86] { flex-direction: column; align-items: flex-start; }
    .bulk-actions[b-wo98gaft86] { flex-wrap: wrap; }
}
/* /Pages/SuperAdmin/AiQaReview/Index.razor.rz.scp.css */
.qa-page[b-ko8k0u16tr] {
    padding: var(--spacing-5);
    max-width: 1400px;
    margin: 0 auto;
}

/* ── Page header ─────────────────────────────── */
.page-header[b-ko8k0u16tr] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--spacing-3);
    margin-bottom: var(--spacing-5);
}

.page-title[b-ko8k0u16tr] {
    font-size: var(--font-size-2xl);
    font-weight: 700;
    color: var(--color-neutral-900);
    margin: 0;
}

.page-title i[b-ko8k0u16tr] {
    color: var(--color-primary-600);
    margin-right: var(--spacing-2);
}

.page-subtitle[b-ko8k0u16tr] {
    font-size: var(--font-size-sm);
    color: var(--color-neutral-500);
    margin: var(--spacing-1) 0 0;
}

.header-actions[b-ko8k0u16tr] {
    display: flex;
    gap: var(--spacing-2);
    align-items: center;
}

/* ── Loading / empty ─────────────────────────── */
.loading-state[b-ko8k0u16tr],
.empty-state[b-ko8k0u16tr] {
    text-align: center;
    padding: var(--spacing-7);
    color: var(--color-neutral-400);
}

.empty-icon[b-ko8k0u16tr] {
    font-size: 3rem;
    display: block;
    margin-bottom: var(--spacing-3);
}

/* ── Table ───────────────────────────────────── */
.data-table[b-ko8k0u16tr] {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--font-size-sm);
}

.data-table thead th[b-ko8k0u16tr] {
    background: var(--color-neutral-50);
    color: var(--color-neutral-500);
    font-weight: 600;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: var(--spacing-2) var(--spacing-3);
    border-bottom: 1px solid var(--color-neutral-200);
    white-space: nowrap;
}

.data-table tbody tr[b-ko8k0u16tr] {
    border-bottom: 1px solid var(--color-neutral-100);
    transition: background 0.15s;
}

.data-table tbody tr:hover[b-ko8k0u16tr] {
    background: var(--color-neutral-50);
}

.data-table tbody td[b-ko8k0u16tr] {
    padding: var(--spacing-2) var(--spacing-3);
    vertical-align: middle;
}

/* ── Badges ──────────────────────────────────── */
.badge[b-ko8k0u16tr] {
    display: inline-block;
    padding: 2px 8px;
    border-radius: var(--radius-full);
    font-size: 0.72rem;
    font-weight: 600;
}

.badge-info[b-ko8k0u16tr]     { background: var(--color-info-100); color: var(--color-info-700); }
.badge-success[b-ko8k0u16tr]  { background: var(--color-success-100); color: var(--color-success-700); }
.badge-warning[b-ko8k0u16tr]  { background: var(--color-warning-100); color: var(--color-warning-700); }
.badge-danger[b-ko8k0u16tr]   { background: var(--color-danger-100); color: var(--color-danger-700); }
.badge-primary[b-ko8k0u16tr]  { background: var(--color-primary-100); color: var(--color-primary-700); }
.badge-secondary[b-ko8k0u16tr] { background: var(--color-neutral-100); color: var(--color-neutral-600); }

/* ── Model chip ──────────────────────────────── */
.model-chip[b-ko8k0u16tr] {
    display: inline-block;
    padding: 2px 8px;
    border: 1px solid var(--color-neutral-200);
    border-radius: var(--radius-sm);
    font-size: 0.7rem;
    font-family: monospace;
    color: var(--color-neutral-600);
    background: var(--color-neutral-50);
    max-width: 160px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ── Live polling banner ─────────────────────── */
.polling-banner[b-ko8k0u16tr] {
    position: fixed;
    bottom: var(--spacing-4);
    left: 50%;
    transform: translateX(-50%);
    background: var(--color-info-700);
    color: #fff;
    padding: var(--spacing-2) var(--spacing-4);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg);
    font-size: var(--font-size-sm);
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    z-index: 1000;
}

.polling-banner .btn-link[b-ko8k0u16tr] {
    color: #fff;
    text-decoration: underline;
    padding: 0;
    border: none;
    background: none;
    cursor: pointer;
}

/* ── Modal ───────────────────────────────────── */
.modal-backdrop[b-ko8k0u16tr] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    z-index: 1040;
}

.modal-panel[b-ko8k0u16tr] {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #fff;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xl);
    z-index: 1050;
    width: 480px;
    max-width: 95vw;
}

.modal-header[b-ko8k0u16tr] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--spacing-4);
    border-bottom: 1px solid var(--color-neutral-100);
}

.modal-header h5[b-ko8k0u16tr] { margin: 0; font-size: var(--font-size-lg); }

.modal-body[b-ko8k0u16tr] {
    padding: var(--spacing-4);
}

.modal-footer[b-ko8k0u16tr] {
    padding: var(--spacing-3) var(--spacing-4);
    border-top: 1px solid var(--color-neutral-100);
    display: flex;
    gap: var(--spacing-2);
    justify-content: flex-end;
}

/* ── Responsive ──────────────────────────────── */
@media (max-width: 768px) {
    .qa-page[b-ko8k0u16tr] { padding: var(--spacing-3); }
    .page-header[b-ko8k0u16tr] { flex-direction: column; }
    .header-actions[b-ko8k0u16tr] { width: 100%; }
    .data-table[b-ko8k0u16tr] { font-size: 0.75rem; }
    .model-chip[b-ko8k0u16tr] { max-width: 80px; }
}
/* /Pages/SuperAdmin/AiQaReview/Settings.razor.rz.scp.css */
.settings-page[b-lv11ecddr0] {
    padding: var(--spacing-5);
    max-width: 900px;
    margin: 0 auto;
}

.back-link[b-lv11ecddr0] {
    font-size: var(--font-size-sm);
    color: var(--color-primary-600);
    text-decoration: none;
    display: block;
    margin-bottom: var(--spacing-1);
}
.back-link:hover[b-lv11ecddr0] { text-decoration: underline; }

.page-header[b-lv11ecddr0] { margin-bottom: var(--spacing-5); }
.page-title[b-lv11ecddr0] { font-size: var(--font-size-xl); font-weight: 700; margin: 0; color: var(--color-neutral-900); }
.page-title i[b-lv11ecddr0] { color: var(--color-primary-600); margin-right: var(--spacing-2); }
.page-subtitle[b-lv11ecddr0] { font-size: var(--font-size-sm); color: var(--color-neutral-500); margin: 4px 0 0; }

/* ── Settings card ───────────────────────────── */
.settings-card[b-lv11ecddr0] {
    border: 1px solid var(--color-neutral-200);
    border-radius: var(--radius-md);
    background: #fff;
    overflow: hidden;
}

.settings-card-header[b-lv11ecddr0] {
    background: var(--color-neutral-50);
    padding: var(--spacing-2) var(--spacing-4);
    font-weight: 600;
    font-size: var(--font-size-sm);
    color: var(--color-neutral-700);
    border-bottom: 1px solid var(--color-neutral-200);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.settings-card-body[b-lv11ecddr0] { padding: var(--spacing-4); }

/* ── Two-column grid for provider forms ──────── */
.two-col-grid[b-lv11ecddr0] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-3);
}

/* ── Prop rows ───────────────────────────────── */
.prop-row[b-lv11ecddr0] { display: flex; padding: 0.4rem 0; border-bottom: 1px solid var(--color-neutral-50); align-items: center; }
.prop-label[b-lv11ecddr0] { width: 180px; flex-shrink: 0; font-size: 0.78rem; color: var(--color-neutral-500); font-weight: 500; }
.prop-value[b-lv11ecddr0] { display: flex; align-items: center; gap: var(--spacing-2); }

/* ── Ollama status ───────────────────────────── */
.status-pill[b-lv11ecddr0] {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-2);
    padding: var(--spacing-1) var(--spacing-3);
    border-radius: var(--radius-full);
    font-size: var(--font-size-sm);
    font-weight: 600;
}

.status-ok[b-lv11ecddr0]    { background: var(--color-success-50); color: var(--color-success-700); border: 1px solid var(--color-success-200); }
.status-error[b-lv11ecddr0] { background: var(--color-danger-50); color: var(--color-danger-700); border: 1px solid var(--color-danger-200); }

.models-list[b-lv11ecddr0] { border: 1px solid var(--color-neutral-200); border-radius: var(--radius-sm); overflow: hidden; }
.model-row[b-lv11ecddr0] {
    display: flex;
    gap: var(--spacing-3);
    padding: var(--spacing-1) var(--spacing-3);
    font-size: var(--font-size-sm);
    border-bottom: 1px solid var(--color-neutral-100);
}
.model-row:last-child[b-lv11ecddr0] { border-bottom: none; }
.model-name[b-lv11ecddr0] { font-family: monospace; flex: 1; }
.model-size[b-lv11ecddr0] { color: var(--color-neutral-500); }

/* ── Form actions ────────────────────────────── */
.form-actions[b-lv11ecddr0] { padding-bottom: var(--spacing-6); }

.loading-state[b-lv11ecddr0] { text-align: center; padding: var(--spacing-7); color: var(--color-neutral-400); }

@media (max-width: 640px) {
    .settings-page[b-lv11ecddr0] { padding: var(--spacing-3); }
    .two-col-grid[b-lv11ecddr0] { grid-template-columns: 1fr; }
    .prop-row[b-lv11ecddr0] { flex-direction: column; align-items: flex-start; }
    .prop-label[b-lv11ecddr0] { width: auto; margin-bottom: 4px; }
}
/* /Pages/SuperAdmin/BulkUserImport.razor.rz.scp.css */
/* Bulk User Import page styles — reuses FlexibleImport design tokens */

.fi-page[b-3jqov5lnmm] { max-width: 1100px; margin: 0 auto; padding: 1rem; }

.fi-header[b-3jqov5lnmm] { margin-bottom: 1.5rem; }
.fi-title[b-3jqov5lnmm] { font-size: 1.5rem; font-weight: 700; color: var(--color-teal-700, #0f766e); display: flex; align-items: center; gap: 0.5rem; }
.fi-subtitle[b-3jqov5lnmm] { font-size: 0.875rem; color: var(--color-gray-500, #6b7280); margin-top: 0.25rem; }

/* ── Step indicator ── */
.fi-steps[b-3jqov5lnmm] { display: flex; align-items: center; justify-content: center; gap: 0; margin-bottom: 2rem; }
.fi-step[b-3jqov5lnmm] { display: flex; flex-direction: column; align-items: center; gap: 0.35rem; }
.fi-step-circle[b-3jqov5lnmm] {
    width: 36px; height: 36px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-weight: 600; font-size: 0.875rem;
    border: 2px solid var(--color-gray-300, #d1d5db);
    background: white; color: var(--color-gray-400, #9ca3af);
    transition: all 0.2s;
}
.fi-step--active .fi-step-circle[b-3jqov5lnmm] { border-color: var(--color-teal-500, #14b8a6); background: var(--color-teal-500, #14b8a6); color: white; }
.fi-step--done .fi-step-circle[b-3jqov5lnmm] { border-color: var(--color-green-500, #22c55e); background: var(--color-green-500, #22c55e); color: white; }
.fi-step-label[b-3jqov5lnmm] { font-size: 0.8rem; color: var(--color-gray-500, #6b7280); }
.fi-step--active .fi-step-label[b-3jqov5lnmm] { color: var(--color-teal-600, #0d9488); font-weight: 600; }
.fi-step--done .fi-step-label[b-3jqov5lnmm] { color: var(--color-green-600, #16a34a); }
.fi-step-line[b-3jqov5lnmm] { width: 60px; height: 2px; background: var(--color-gray-300, #d1d5db); margin: 0 0.5rem; align-self: flex-start; margin-top: 17px; }
.fi-step-line--done[b-3jqov5lnmm] { background: var(--color-green-500, #22c55e); }

/* ── Card ── */
.fi-card[b-3jqov5lnmm] {
    background: white; border-radius: 0.75rem; box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1);
    border: 1px solid var(--color-gray-200, #e5e7eb); padding: 1.5rem; margin-bottom: 1.5rem;
}
.fi-card-title[b-3jqov5lnmm] { font-size: 1.1rem; font-weight: 600; color: var(--color-gray-800, #1f2937); margin-bottom: 1rem; }
.fi-card-sub[b-3jqov5lnmm] { font-size: 0.875rem; color: var(--color-gray-500, #6b7280); margin-bottom: 1rem; }

/* ── Form ── */
.fi-form-grid[b-3jqov5lnmm] { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1rem; margin-bottom: 1.5rem; }
.fi-field[b-3jqov5lnmm] { display: flex; flex-direction: column; gap: 0.35rem; }
.fi-label[b-3jqov5lnmm] { font-size: 0.8rem; font-weight: 600; color: var(--color-gray-600, #4b5563); }
.fi-required[b-3jqov5lnmm] { color: var(--color-red-500, #ef4444); }
.fi-label-hint[b-3jqov5lnmm] { font-size: 0.75rem; color: var(--color-gray-400, #9ca3af); }
.fi-select[b-3jqov5lnmm] {
    padding: 0.6rem 0.75rem; border: 1px solid var(--color-gray-300, #d1d5db);
    border-radius: 0.5rem; font-size: 0.875rem; background: white; color: var(--color-gray-800, #1f2937);
}
.fi-select:focus[b-3jqov5lnmm] { outline: none; border-color: var(--color-teal-500, #14b8a6); box-shadow: 0 0 0 3px var(--color-teal-100, #ccfbf1); }
.fi-select:disabled[b-3jqov5lnmm] { background: var(--color-gray-50, #f9fafb); color: var(--color-gray-400, #9ca3af); cursor: not-allowed; }

/* ── Toggle ── */
.fi-toggle-row[b-3jqov5lnmm] { display: flex; align-items: center; gap: 0.75rem; padding: 0.75rem 1rem; background: var(--color-amber-50, #fffbeb); border: 1px solid var(--color-amber-100, #fef3c7); border-radius: 0.5rem; margin-bottom: 1.5rem; }
.fi-toggle[b-3jqov5lnmm] { position: relative; display: inline-block; width: 40px; height: 22px; flex-shrink: 0; }
.fi-toggle input[b-3jqov5lnmm] { opacity: 0; width: 0; height: 0; }
.fi-toggle-slider[b-3jqov5lnmm] { position: absolute; cursor: pointer; inset: 0; background: var(--color-gray-300, #d1d5db); border-radius: 1rem; transition: 0.2s; }
.fi-toggle-slider[b-3jqov5lnmm]::before { content: ''; position: absolute; width: 16px; height: 16px; left: 3px; bottom: 3px; background: white; border-radius: 50%; transition: 0.2s; }
.fi-toggle input:checked + .fi-toggle-slider[b-3jqov5lnmm] { background: var(--color-teal-500, #14b8a6); }
.fi-toggle input:checked + .fi-toggle-slider[b-3jqov5lnmm]::before { transform: translateX(18px); }
.fi-toggle-label[b-3jqov5lnmm] { font-size: 0.85rem; font-weight: 600; color: var(--color-gray-700, #374151); display: block; }
.fi-toggle-hint[b-3jqov5lnmm] { font-size: 0.75rem; color: var(--color-gray-500, #6b7280); }

/* ── Template buttons ── */
.fi-template-row[b-3jqov5lnmm] { display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: center; padding: 0.75rem; background: var(--color-teal-50, var(--color-teal-50)); border-radius: 0.5rem; border: 1px dashed var(--color-teal-300, #5eead4); margin-bottom: 1.5rem; }
.fi-template-label[b-3jqov5lnmm] { font-size: 0.8rem; font-weight: 600; color: var(--color-teal-700, #0f766e); margin-right: 0.5rem; }
.fi-template-btn[b-3jqov5lnmm] { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.4rem 0.8rem; background: white; border: 1px solid var(--color-teal-500, #14b8a6); border-radius: 0.4rem; font-size: 0.78rem; font-weight: 500; color: var(--color-teal-600, #0d9488); text-decoration: none; transition: all 0.15s; cursor: pointer; }
.fi-template-btn:hover[b-3jqov5lnmm] { background: var(--color-teal-500, #14b8a6); color: white; }
.fi-template-btn:disabled[b-3jqov5lnmm] { opacity: 0.5; cursor: not-allowed; }

/* ── Upload area ── */
.fi-upload-area[b-3jqov5lnmm] { border: 2px dashed var(--color-gray-300, #d1d5db); border-radius: 0.75rem; padding: 2.5rem 2rem; text-align: center; background: var(--color-gray-50, #f9fafb); transition: all 0.2s; }
.fi-upload-area:hover[b-3jqov5lnmm] { border-color: var(--color-teal-500, #14b8a6); background: var(--color-teal-50, var(--color-teal-50)); }
.fi-file-input[b-3jqov5lnmm] { display: none; }
.fi-upload-label[b-3jqov5lnmm] { cursor: pointer; display: block; }
.fi-upload-icon[b-3jqov5lnmm] { font-size: 2.5rem; color: var(--color-gray-400, #9ca3af); margin-bottom: 0.5rem; }
.fi-upload-hint[b-3jqov5lnmm] { font-size: 0.9rem; color: var(--color-gray-600, #4b5563); margin-bottom: 0.25rem; }
.fi-upload-sub[b-3jqov5lnmm] { font-size: 0.75rem; color: var(--color-gray-400, #9ca3af); }
.fi-file-badge[b-3jqov5lnmm] { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.5rem 1rem; background: var(--color-green-50, #f0fdf4); border: 1px solid var(--color-green-100, #dcfce7); border-radius: 0.5rem; margin-top: 0.75rem; font-size: 0.85rem; color: var(--color-gray-700, #374151); }
.fi-file-size[b-3jqov5lnmm] { color: var(--color-gray-400, #9ca3af); font-size: 0.75rem; }

/* ── Buttons ── */
.fi-actions[b-3jqov5lnmm] { display: flex; justify-content: space-between; align-items: center; margin-top: 1.5rem; padding-top: 1.5rem; border-top: 1px solid var(--color-gray-200, #e5e7eb); gap: 0.75rem; }
.fi-btn[b-3jqov5lnmm] { padding: 0.6rem 1.25rem; border-radius: 0.5rem; font-size: 0.875rem; font-weight: 600; cursor: pointer; border: none; display: inline-flex; align-items: center; gap: 0.4rem; transition: all 0.15s; text-decoration: none; }
.fi-btn--primary[b-3jqov5lnmm] { background: var(--color-teal-500, #14b8a6); color: white; }
.fi-btn--primary:hover[b-3jqov5lnmm] { background: var(--color-teal-600, #0d9488); }
.fi-btn--primary:disabled[b-3jqov5lnmm] { background: var(--color-gray-300, #d1d5db); cursor: not-allowed; }
.fi-btn--ghost[b-3jqov5lnmm] { background: white; color: var(--color-gray-600, #4b5563); border: 1px solid var(--color-gray-300, #d1d5db); }
.fi-btn--ghost:hover[b-3jqov5lnmm] { background: var(--color-gray-50, #f9fafb); }
.fi-confirm-text[b-3jqov5lnmm] { font-size: 0.8rem; color: var(--color-gray-500, #6b7280); }

/* ── Stats ── */
.fi-preview-stats[b-3jqov5lnmm] { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 0.75rem; margin-bottom: 1.5rem; }
.fi-stat[b-3jqov5lnmm] { padding: 1rem; border-radius: 0.5rem; text-align: center; border: 1px solid var(--color-gray-200, #e5e7eb); }
.fi-stat--blue[b-3jqov5lnmm] { background: #eff6ff; border-color: #dbeafe; }
.fi-stat--green[b-3jqov5lnmm] { background: #f0fdf4; border-color: #dcfce7; }
.fi-stat--red[b-3jqov5lnmm] { background: #fef2f2; border-color: #fee2e2; }
.fi-stat--orange[b-3jqov5lnmm] { background: #fffbeb; border-color: #fef3c7; }
.fi-stat--purple[b-3jqov5lnmm] { background: #faf5ff; border-color: #f3e8ff; }
.fi-stat--amber[b-3jqov5lnmm] { background: #fffbeb; border-color: #fef3c7; }
.fi-stat--teal[b-3jqov5lnmm] { background: var(--color-teal-50); border-color: var(--color-teal-100); }
.fi-stat-num[b-3jqov5lnmm] { font-size: 1.5rem; font-weight: 700; display: block; }
.fi-stat--blue .fi-stat-num[b-3jqov5lnmm] { color: #3b82f6; }
.fi-stat--green .fi-stat-num[b-3jqov5lnmm] { color: #16a34a; }
.fi-stat--red .fi-stat-num[b-3jqov5lnmm] { color: #dc2626; }
.fi-stat--orange .fi-stat-num[b-3jqov5lnmm] { color: #f59e0b; }
.fi-stat--purple .fi-stat-num[b-3jqov5lnmm] { color: #a855f7; }
.fi-stat--amber .fi-stat-num[b-3jqov5lnmm] { color: #f59e0b; }
.fi-stat--teal .fi-stat-num[b-3jqov5lnmm] { color: var(--color-teal-600); }
.fi-stat-label[b-3jqov5lnmm] { font-size: 0.7rem; color: var(--color-gray-600, #4b5563); margin-top: 0.15rem; }

/* ── Role badges ── */
.fi-role-breakdown[b-3jqov5lnmm] { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 1.5rem; }
.fi-role-badge[b-3jqov5lnmm] { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.35rem 0.8rem; border-radius: 2rem; font-size: 0.78rem; font-weight: 600; }
.fi-role-badge b[b-3jqov5lnmm] { background: white; padding: 0.05rem 0.4rem; border-radius: 1rem; font-size: 0.72rem; }
.fi-role--blue[b-3jqov5lnmm] { background: #dbeafe; color: #3b82f6; }
.fi-role--purple[b-3jqov5lnmm] { background: #f3e8ff; color: #a855f7; }
.fi-role--amber[b-3jqov5lnmm] { background: #fef3c7; color: #f59e0b; }
.fi-role--teal[b-3jqov5lnmm] { background: var(--color-teal-100); color: var(--color-teal-700); }
.fi-role--grey[b-3jqov5lnmm] { background: var(--color-gray-100, #f3f4f6); color: var(--color-gray-500, #6b7280); }

/* ── Messages ── */
.fi-messages[b-3jqov5lnmm] { margin-bottom: 1rem; }
.fi-message[b-3jqov5lnmm] { padding: 0.5rem 0.75rem; border-radius: 0.4rem; font-size: 0.8rem; margin-bottom: 0.35rem; }
.fi-message--error[b-3jqov5lnmm] { background: #fef2f2; color: #dc2626; border: 1px solid #fee2e2; }
.fi-message--warn[b-3jqov5lnmm] { background: #fffbeb; color: #f59e0b; border: 1px solid #fef3c7; }

/* ── Preview toolbar ── */
.fi-preview-toolbar[b-3jqov5lnmm] { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 1rem; }
.fi-filter-label[b-3jqov5lnmm] { font-size: 0.8rem; font-weight: 600; color: var(--color-gray-600, #4b5563); }
.fi-filter-chip[b-3jqov5lnmm] { padding: 0.3rem 0.7rem; border-radius: 2rem; font-size: 0.75rem; font-weight: 500; background: var(--color-gray-100, #f3f4f6); color: var(--color-gray-600, #4b5563); cursor: pointer; border: 1px solid var(--color-gray-200, #e5e7eb); }
.fi-filter-chip:hover[b-3jqov5lnmm] { background: var(--color-gray-200, #e5e7eb); }
.fi-filter-chip--active[b-3jqov5lnmm] { background: var(--color-teal-500, #14b8a6); color: white; border-color: var(--color-teal-500, #14b8a6); }

/* ── Grid ── */
.fi-grid-wrap[b-3jqov5lnmm] { overflow-x: auto; border: 1px solid var(--color-gray-200, #e5e7eb); border-radius: 0.5rem; }
.fi-grid[b-3jqov5lnmm] { width: 100%; border-collapse: collapse; font-size: 0.8rem; }
.fi-grid thead[b-3jqov5lnmm] { background: var(--color-gray-50, #f9fafb); }
.fi-grid th[b-3jqov5lnmm] { text-align: left; padding: 0.5rem 0.6rem; font-weight: 600; color: var(--color-gray-600, #4b5563); border-bottom: 1px solid var(--color-gray-200, #e5e7eb); white-space: nowrap; }
.fi-grid td[b-3jqov5lnmm] { padding: 0.5rem 0.6rem; border-bottom: 1px solid var(--color-gray-100, #f3f4f6); color: var(--color-gray-700, #374151); }
.fi-grid-row--error[b-3jqov5lnmm] { opacity: 0.6; }
.fi-grid-row--warn[b-3jqov5lnmm] { opacity: 0.7; }
.fi-role-tag[b-3jqov5lnmm] { display: inline-block; padding: 0.1rem 0.5rem; border-radius: 1rem; font-size: 0.7rem; font-weight: 600; }
.fi-role-tag.fi-role--blue[b-3jqov5lnmm] { background: #dbeafe; color: #3b82f6; }
.fi-role-tag.fi-role--purple[b-3jqov5lnmm] { background: #f3e8ff; color: #a855f7; }
.fi-role-tag.fi-role--amber[b-3jqov5lnmm] { background: #fef3c7; color: #f59e0b; }
.fi-role-tag.fi-role--teal[b-3jqov5lnmm] { background: var(--color-teal-100); color: var(--color-teal-700); }
.fi-role-tag.fi-role--grey[b-3jqov5lnmm] { background: var(--color-gray-100, #f3f4f6); color: var(--color-gray-500, #6b7280); }
.fi-badge[b-3jqov5lnmm] { display: inline-flex; align-items: center; gap: 0.25rem; padding: 0.1rem 0.45rem; border-radius: 1rem; font-size: 0.7rem; font-weight: 600; }
.fi-badge--green[b-3jqov5lnmm] { background: #dcfce7; color: #16a34a; }
.fi-badge--red[b-3jqov5lnmm] { background: #fee2e2; color: #dc2626; }
.fi-badge--orange[b-3jqov5lnmm] { background: #fef3c7; color: #f59e0b; }
.fi-error-text[b-3jqov5lnmm] { font-size: 0.72rem; color: var(--color-red-500, #ef4444); }
.fi-warn-text[b-3jqov5lnmm] { font-size: 0.72rem; color: var(--color-amber-500, #f59e0b); }
.fi-preview-more[b-3jqov5lnmm] { font-size: 0.75rem; color: var(--color-gray-400, #9ca3af); margin-top: 0.5rem; text-align: center; }

/* ── Results ── */
.fi-result-icon[b-3jqov5lnmm] { width: 56px; height: 56px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 1.75rem; margin: 0 auto 0.75rem; }
.fi-result-icon--green[b-3jqov5lnmm] { background: #dcfce7; color: #16a34a; }
.fi-result-icon--orange[b-3jqov5lnmm] { background: #fef3c7; color: #f59e0b; }
.fi-info-banner[b-3jqov5lnmm] { display: flex; gap: 0.6rem; padding: 0.6rem 0.9rem; border-radius: 0.4rem; font-size: 0.8rem; margin-bottom: 1rem; align-items: center; }
.fi-info-banner--teal[b-3jqov5lnmm] { background: var(--color-teal-50); border: 1px solid var(--color-teal-100); color: var(--color-teal-700); }
.fi-errors[b-3jqov5lnmm] { margin-top: 1.5rem; }
.fi-errors-title[b-3jqov5lnmm] { font-size: 0.9rem; font-weight: 600; color: var(--color-red-600, #dc2626); margin-bottom: 0.5rem; }
/* /Pages/SuperAdmin/Chat/Index.razor.rz.scp.css */
/* ── Live Chat Page — SuperAdmin (Redesigned) ───────────────────────────── */

/* ── Page Shell ─────────────────────────────────────────────────────────── */

.chat-page[b-fe2ners6eb] {
    display: flex;
    flex-direction: column;
    height: calc(100vh - var(--header-height, 60px));
    padding: 0;
    gap: 0;
    background: var(--color-neutral-50, #f9fafb);
    font-family: var(--font-sans-primary, 'Inter', system-ui, -apple-system, sans-serif);
}

/* ── Top Stats Bar ──────────────────────────────────────────────────────── */

.chat-stats-bar[b-fe2ners6eb] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    background: var(--color-white, #fff);
    border-bottom: 1px solid var(--color-neutral-200, #e5e7eb);
    flex-shrink: 0;
}

.chat-stat-chip[b-fe2ners6eb] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 600;
    background: var(--color-neutral-100, #f3f4f6);
    color: var(--color-neutral-700, #374151);
}

.chat-stat-chip i[b-fe2ners6eb] {
    font-size: 0.75rem;
}

.chat-stat-chip.active[b-fe2ners6eb] {
    background: #dcfce7;
    color: #166534;
}

.chat-stat-chip.active i[b-fe2ners6eb] {
    color: #22c55e;
    animation: pulse-dot-b-fe2ners6eb 2s infinite;
}

.chat-stat-chip.unread[b-fe2ners6eb] {
    background: #dbeafe;
    color: #1e40af;
}

.chat-stat-chip.closed[b-fe2ners6eb] {
    background: var(--color-neutral-100, #f3f4f6);
    color: var(--color-neutral-500, #6b7280);
}

@keyframes pulse-dot-b-fe2ners6eb {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}

/* ── Two-column layout ────────────────────────────────────────────────── */

.chat-layout[b-fe2ners6eb] {
    display: grid;
    grid-template-columns: 360px 1fr;
    gap: 0;
    flex: 1;
    min-height: 0;
    background: var(--color-neutral-50, #f9fafb);
}

/* ── Sessions panel (left) ────────────────────────────────────────────── */

.sessions-panel[b-fe2ners6eb] {
    display: flex;
    flex-direction: column;
    background: var(--color-white, #fff);
    border-right: 1px solid var(--color-neutral-200, #e5e7eb);
    overflow: hidden;
}

.sessions-header[b-fe2ners6eb] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid var(--color-neutral-200, #e5e7eb);
    background: var(--color-white, #fff);
    flex-shrink: 0;
}

.sessions-title[b-fe2ners6eb] {
    font-weight: 700;
    font-size: 1rem;
    color: var(--color-neutral-900, #111827);
    letter-spacing: -0.01em;
}

.sessions-count[b-fe2ners6eb] {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--color-neutral-500, #6b7280);
    background: var(--color-neutral-100, #f3f4f6);
    padding: 2px 8px;
    border-radius: 999px;
}

.btn-refresh[b-fe2ners6eb] {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--color-neutral-500, #6b7280);
    padding: 8px;
    border-radius: 8px;
    transition: all 0.15s ease;
    font-size: 0.875rem;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.btn-refresh:hover[b-fe2ners6eb] {
    background: var(--color-neutral-100, #f3f4f6);
    color: var(--color-neutral-800, #1f2937);
}

.sessions-loading[b-fe2ners6eb],
.sessions-empty[b-fe2ners6eb] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 200px;
    color: var(--color-neutral-400, #9ca3af);
    gap: 12px;
    font-size: 0.875rem;
    text-align: center;
    padding: 24px;
}

.sessions-empty i[b-fe2ners6eb] {
    font-size: 2rem;
    color: var(--color-neutral-300, #d1d5db);
}

.sessions-list[b-fe2ners6eb] {
    list-style: none;
    margin: 0;
    padding: 0;
    overflow-y: auto;
    flex: 1;
}

/* ── Session item ───────────────────────────────────────────────────────── */

.session-item[b-fe2ners6eb] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
    cursor: pointer;
    border-bottom: 1px solid rgba(229, 231, 235, 0.5);
    transition: all 0.15s ease;
    min-height: 72px;
    position: relative;
}

.session-item:hover[b-fe2ners6eb] {
    background: var(--color-neutral-50, #f9fafb);
}

.session-item.active[b-fe2ners6eb] {
    background: #eff6ff;
    border-left: 3px solid var(--color-primary-500, #3b82f6);
    padding-left: 13px; /* compensate for 3px border */
}

.session-item.unread .visitor-name[b-fe2ners6eb] {
    font-weight: 700;
    color: var(--color-neutral-900, #111827);
}

.session-avatar[b-fe2ners6eb] {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--color-primary-400, #60a5fa) 0%, var(--color-primary-600, #2563eb) 100%);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.875rem;
    font-weight: 600;
    flex-shrink: 0;
    text-transform: uppercase;
}

.session-avatar.visitor[b-fe2ners6eb] {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
}

.session-content[b-fe2ners6eb] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.session-item-top[b-fe2ners6eb] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.visitor-name[b-fe2ners6eb] {
    font-size: 0.9375rem; /* 15px */
    color: var(--color-neutral-800, #1f2937);
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.4;
}

.unread-dot[b-fe2ners6eb] {
    width: 8px;
    height: 8px;
    background: var(--color-primary-500, #3b82f6);
    border-radius: 50%;
    flex-shrink: 0;
    box-shadow: 0 0 0 2px var(--color-white, #fff);
}

.session-preview[b-fe2ners6eb] {
    font-size: 0.875rem; /* 14px */
    color: var(--color-neutral-500, #6b7280);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.4;
}

.session-item.unread .session-preview[b-fe2ners6eb] {
    color: var(--color-neutral-700, #374151);
    font-weight: 500;
}

.session-meta[b-fe2ners6eb] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.75rem; /* 12px */
    line-height: 1.4;
}

.session-origin[b-fe2ners6eb] {
    padding: 2px 8px;
    border-radius: 999px;
    font-weight: 600;
    text-transform: capitalize;
    font-size: 0.6875rem; /* 11px */
    letter-spacing: 0.02em;
}

.session-origin.landing[b-fe2ners6eb] {
    background: #dbeafe;
    color: #1e40af;
}

.session-origin.demo[b-fe2ners6eb] {
    background: #d1fae5;
    color: #065f46;
}

.session-time[b-fe2ners6eb] {
    color: var(--color-neutral-400, #9ca3af);
    margin-left: auto;
    font-weight: 500;
}

.session-status[b-fe2ners6eb] {
    padding: 2px 8px;
    border-radius: 999px;
    text-transform: capitalize;
    font-weight: 600;
    font-size: 0.6875rem; /* 11px */
    letter-spacing: 0.02em;
}

.session-status.active[b-fe2ners6eb] {
    background: #dcfce7;
    color: #166534;
}

.session-status.closed[b-fe2ners6eb] {
    background: var(--color-neutral-100, #f3f4f6);
    color: var(--color-neutral-500, #6b7280);
}

/* ── Chat panel (right) ───────────────────────────────────────────────── */

.chat-panel[b-fe2ners6eb] {
    display: flex;
    flex-direction: column;
    background: var(--color-neutral-50, #f9fafb);
    overflow: hidden;
    position: relative;
}

/* ── Empty state ────────────────────────────────────────────────────────── */

.chat-empty-state[b-fe2ners6eb] {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    padding: 24px;
}

.empty-state-card[b-fe2ners6eb] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 16px;
    width: 100%;
    max-width: 360px;
    padding: 40px 32px;
    background: var(--color-white, #fff);
    border-radius: 16px;
    border: 1px solid var(--color-neutral-200, #e5e7eb);
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06);
}

.empty-state-card .empty-icon-wrap[b-fe2ners6eb] {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
    display: flex;
    align-items: center;
    justify-content: center;
}

.empty-state-card .empty-icon-wrap i[b-fe2ners6eb] {
    font-size: 1.75rem;
    color: var(--color-primary-500, #3b82f6);
}

.empty-state-card h3[b-fe2ners6eb] {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--color-neutral-800, #1f2937);
    margin: 0;
}

.empty-state-card p[b-fe2ners6eb] {
    font-size: 0.875rem;
    color: var(--color-neutral-500, #6b7280);
    margin: 0;
    line-height: 1.5;
}

.empty-state-tips[b-fe2ners6eb] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
    margin-top: 8px;
}

.empty-tip[b-fe2ners6eb] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    background: var(--color-neutral-50, #f9fafb);
    border-radius: 10px;
    font-size: 0.8125rem;
    color: var(--color-neutral-600, #4b5563);
    text-align: left;
}

.empty-tip i[b-fe2ners6eb] {
    color: var(--color-primary-500, #3b82f6);
    font-size: 0.875rem;
    width: 20px;
    text-align: center;
    flex-shrink: 0;
}

.empty-tip span[b-fe2ners6eb] {
    line-height: 1.4;
}

/* ── Chat loading ───────────────────────────────────────────────────────── */

.chat-loading[b-fe2ners6eb] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: var(--color-neutral-400, #9ca3af);
    gap: 16px;
    font-size: 0.875rem;
}

/* ── Chat window ──────────────────────────────────────────────────────── */

.chat-window[b-fe2ners6eb] {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: var(--color-white, #fff);
    margin: 16px;
    border-radius: 14px;
    border: 1px solid var(--color-neutral-200, #e5e7eb);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
    overflow: hidden;
}

/* ── Chat header ────────────────────────────────────────────────────────── */

.chat-header-bar[b-fe2ners6eb] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 20px;
    border-bottom: 1px solid var(--color-neutral-200, #e5e7eb);
    background: var(--color-white, #fff);
    flex-shrink: 0;
    gap: 12px;
}

.chat-header-left[b-fe2ners6eb] {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    flex: 1;
}

.chat-header-avatar[b-fe2ners6eb] {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.875rem;
    font-weight: 600;
    flex-shrink: 0;
    text-transform: uppercase;
}

.chat-header-info[b-fe2ners6eb] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.chat-visitor-name[b-fe2ners6eb] {
    font-weight: 700;
    font-size: 1rem;
    color: var(--color-neutral-900, #111827);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.3;
}

.chat-visitor-email[b-fe2ners6eb] {
    font-size: 0.8125rem;
    color: var(--color-neutral-500, #6b7280);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.3;
}

.chat-header-meta[b-fe2ners6eb] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 2px;
}

.chat-status[b-fe2ners6eb] {
    font-size: 0.75rem;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 999px;
    line-height: 1;
}

.chat-status.active[b-fe2ners6eb] {
    background: #dcfce7;
    color: #166534;
}

.chat-status.closed[b-fe2ners6eb] {
    background: var(--color-neutral-100, #f3f4f6);
    color: var(--color-neutral-500, #6b7280);
}

.online-pulse[b-fe2ners6eb] {
    width: 8px;
    height: 8px;
    background: #22c55e;
    border-radius: 50%;
    position: relative;
}

.online-pulse[b-fe2ners6eb]::after {
    content: '';
    position: absolute;
    inset: -3px;
    border-radius: 50%;
    background: rgba(34, 197, 94, 0.35);
    animation: pulse-ring-b-fe2ners6eb 2s infinite;
}

@keyframes pulse-ring-b-fe2ners6eb {
    0% { transform: scale(1); opacity: 1; }
    100% { transform: scale(2.2); opacity: 0; }
}

.chat-header-actions[b-fe2ners6eb] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.btn-header-action[b-fe2ners6eb] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border-radius: 8px;
    font-size: 0.8125rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
    border: 1px solid transparent;
    background: transparent;
    color: var(--color-neutral-600, #4b5563);
}

.btn-header-action:hover[b-fe2ners6eb] {
    background: var(--color-neutral-100, #f3f4f6);
    color: var(--color-neutral-800, #1f2937);
}

.btn-header-action.close[b-fe2ners6eb] {
    background: #fef2f2;
    color: #dc2626;
    border-color: #fecaca;
}

.btn-header-action.close:hover[b-fe2ners6eb] {
    background: #fee2e2;
    border-color: #fca5a5;
}

.btn-header-action:disabled[b-fe2ners6eb] {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ── Messages ───────────────────────────────────────────────────────────── */

.messages-container[b-fe2ners6eb] {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    background: var(--color-neutral-50, #f9fafb);
}

.message[b-fe2ners6eb] {
    display: flex;
    justify-content: flex-start;
    animation: message-in-b-fe2ners6eb 0.25s ease-out;
}

.message.operator[b-fe2ners6eb] {
    justify-content: flex-end;
}

@keyframes message-in-b-fe2ners6eb {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

.message-bubble[b-fe2ners6eb] {
    background: var(--color-white, #fff);
    border-radius: 14px 14px 14px 4px;
    padding: 12px 16px;
    max-width: 70%;
    display: flex;
    flex-direction: column;
    gap: 4px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
    border: 1px solid var(--color-neutral-200, #e5e7eb);
}

.message.operator .message-bubble[b-fe2ners6eb] {
    background: linear-gradient(135deg, var(--color-primary-500, #3b82f6) 0%, var(--color-primary-600, #2563eb) 100%);
    color: #fff;
    border-radius: 14px 14px 4px 14px;
    border: none;
    box-shadow: 0 2px 8px rgba(37, 99, 235, 0.2);
}

.message-sender[b-fe2ners6eb] {
    font-size: 0.75rem;
    font-weight: 700;
    opacity: 0.65;
    color: var(--color-neutral-600, #4b5563);
    line-height: 1.3;
}

.message.operator .message-sender[b-fe2ners6eb] {
    color: rgba(255, 255, 255, 0.85);
    opacity: 1;
}

.message-text[b-fe2ners6eb] {
    margin: 0;
    font-size: 0.9375rem;
    line-height: 1.55;
    white-space: pre-wrap;
    word-break: break-word;
    color: var(--color-neutral-800, #1f2937);
}

.message.operator .message-text[b-fe2ners6eb] {
    color: #fff;
}

.message-time[b-fe2ners6eb] {
    font-size: 0.6875rem;
    opacity: 0.55;
    align-self: flex-end;
    color: var(--color-neutral-500, #6b7280);
    margin-top: 2px;
    font-weight: 500;
}

.message.operator .message-time[b-fe2ners6eb] {
    color: rgba(255, 255, 255, 0.75);
    opacity: 1;
}

/* Typing indicator */
.typing-indicator .message-bubble[b-fe2ners6eb] {
    padding: 14px 18px;
    background: var(--color-white, #fff);
    border: 1px solid var(--color-neutral-200, #e5e7eb);
}

.dot[b-fe2ners6eb] {
    display: inline-block;
    width: 7px;
    height: 7px;
    background: var(--color-neutral-400, #9ca3af);
    border-radius: 50%;
    animation: bounce-b-fe2ners6eb 1.4s infinite ease-in-out;
    margin: 0 2px;
}

.dot:nth-child(2)[b-fe2ners6eb] { animation-delay: 0.2s; }
.dot:nth-child(3)[b-fe2ners6eb] { animation-delay: 0.4s; }

@keyframes bounce-b-fe2ners6eb {
    0%, 60%, 100% { transform: translateY(0); }
    30% { transform: translateY(-5px); }
}

/* ── Reply bar ──────────────────────────────────────────────────────────── */

.reply-bar[b-fe2ners6eb] {
    display: flex;
    align-items: flex-end;
    gap: 10px;
    padding: 14px 20px;
    border-top: 1px solid var(--color-neutral-200, #e5e7eb);
    background: var(--color-white, #fff);
    flex-shrink: 0;
}

.reply-input-wrap[b-fe2ners6eb] {
    flex: 1;
    position: relative;
}

.reply-input[b-fe2ners6eb] {
    width: 100%;
    border: 1px solid var(--color-neutral-300, #d1d5db);
    border-radius: 12px;
    padding: 12px 16px;
    font-size: 0.9375rem;
    resize: none;
    outline: none;
    transition: all 0.15s ease;
    background: var(--color-white, #fff);
    color: var(--color-neutral-900, #111827);
    font-family: inherit;
    line-height: 1.5;
    min-height: 48px;
    max-height: 140px;
}

.reply-input:focus[b-fe2ners6eb] {
    border-color: var(--color-primary-400, #60a5fa);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.12);
}

.reply-input:disabled[b-fe2ners6eb] {
    opacity: 0.5;
    background: var(--color-neutral-100, #f3f4f6);
}

.reply-hint[b-fe2ners6eb] {
    font-size: 0.6875rem;
    color: var(--color-neutral-400, #9ca3af);
    margin-top: 4px;
    padding-left: 4px;
}

.btn-send[b-fe2ners6eb] {
    width: 44px;
    height: 44px;
    background: linear-gradient(135deg, var(--color-primary-500, #3b82f6) 0%, var(--color-primary-600, #2563eb) 100%);
    color: #fff;
    border: none;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.15s ease;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(37, 99, 235, 0.25);
}

.btn-send:hover[b-fe2ners6eb] {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.35);
}

.btn-send:active[b-fe2ners6eb] {
    transform: translateY(0);
}

.btn-send:disabled[b-fe2ners6eb] {
    opacity: 0.4;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
    background: var(--color-neutral-300, #d1d5db);
}

/* ── Scrollbar styling ──────────────────────────────────────────────────── */

.sessions-list[b-fe2ners6eb]::-webkit-scrollbar,
.messages-container[b-fe2ners6eb]::-webkit-scrollbar {
    width: 6px;
}

.sessions-list[b-fe2ners6eb]::-webkit-scrollbar-track,
.messages-container[b-fe2ners6eb]::-webkit-scrollbar-track {
    background: transparent;
}

.sessions-list[b-fe2ners6eb]::-webkit-scrollbar-thumb,
.messages-container[b-fe2ners6eb]::-webkit-scrollbar-thumb {
    background: var(--color-neutral-300, #d1d5db);
    border-radius: 3px;
}

.sessions-list[b-fe2ners6eb]::-webkit-scrollbar-thumb:hover,
.messages-container[b-fe2ners6eb]::-webkit-scrollbar-thumb:hover {
    background: var(--color-neutral-400, #9ca3af);
}

/* ── Responsive ─────────────────────────────────────────────────────────── */

@media (max-width: 1023px) {
    .chat-layout[b-fe2ners6eb] {
        grid-template-columns: 1fr;
        grid-template-rows: auto 1fr;
    }

    .sessions-panel[b-fe2ners6eb] {
        max-height: 320px;
        border-right: none;
        border-bottom: 1px solid var(--color-neutral-200, #e5e7eb);
    }

    .chat-page[b-fe2ners6eb] {
        height: auto;
        min-height: calc(100vh - var(--header-height, 60px));
    }

    .chat-window[b-fe2ners6eb] {
        margin: 8px;
        border-radius: 12px;
    }
}

@media (max-width: 767px) {
    .chat-stats-bar[b-fe2ners6eb] {
        padding: 10px 16px;
        gap: 6px;
        overflow-x: auto;
    }

    .chat-stat-chip[b-fe2ners6eb] {
        padding: 5px 10px;
        font-size: 0.75rem;
        white-space: nowrap;
    }

    .sessions-panel[b-fe2ners6eb] {
        max-height: 280px;
    }

    .session-item[b-fe2ners6eb] {
        padding: 12px 14px;
        min-height: 64px;
    }

    .chat-window[b-fe2ners6eb] {
        margin: 0;
        border-radius: 0;
        border: none;
        border-top: 1px solid var(--color-neutral-200, #e5e7eb);
    }

    .messages-container[b-fe2ners6eb] {
        padding: 12px;
        gap: 10px;
    }

    .message-bubble[b-fe2ners6eb] {
        max-width: 85%;
        padding: 10px 14px;
    }

    .reply-bar[b-fe2ners6eb] {
        padding: 10px 12px;
    }

    .chat-header-bar[b-fe2ners6eb] {
        padding: 10px 14px;
    }

    .empty-state-card[b-fe2ners6eb] {
        padding: 28px 20px;
        max-width: 100%;
        margin: 16px;
    }
}

/* ── Spinners ───────────────────────────────────────────────────────────── */

.spinner-sm[b-fe2ners6eb] {
    width: 24px;
    height: 24px;
    border: 3px solid var(--color-neutral-200, #e5e7eb);
    border-top-color: var(--color-primary-500, #3b82f6);
    border-radius: 50%;
    animation: spin-b-fe2ners6eb 0.7s linear infinite;
}

.spinner[b-fe2ners6eb] {
    width: 36px;
    height: 36px;
    border: 4px solid var(--color-neutral-200, #e5e7eb);
    border-top-color: var(--color-primary-500, #3b82f6);
    border-radius: 50%;
    animation: spin-b-fe2ners6eb 0.8s linear infinite;
}

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

/* /Pages/SuperAdmin/CORSDomains/Index.razor.rz.scp.css */
/* ─────────────────────────────────────────────────────────────────────
   CORS Domains Page — Enhanced Scoped Styles
   ───────────────────────────────────────────────────────────────────── */

/* ── Page Header ─────────────────────────────────────────────────────── */
.page-header[b-s42gfcittd] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--spacing-4);
    margin-bottom: var(--spacing-6);
}
.page-header-left[b-s42gfcittd] {
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
}
.page-icon[b-s42gfcittd] {
    width: 3.25rem;
    height: 3.25rem;
    border-radius: var(--radius-xl);
    background: linear-gradient(135deg, #4f46e5, #7c3aed);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 1.375rem;
    flex-shrink: 0;
    box-shadow: 0 4px 12px rgba(79, 70, 229, 0.35);
}
.page-title[b-s42gfcittd] {
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-neutral-900);
    margin: 0;
    line-height: 1.2;
}
.page-subtitle[b-s42gfcittd] {
    font-size: var(--font-size-sm);
    color: var(--color-neutral-500);
    margin: 2px 0 0;
}
.page-header-actions[b-s42gfcittd] {
    display: flex;
    gap: var(--spacing-3);
    flex-wrap: wrap;
    align-items: center;
}

/* ── Info banner ─────────────────────────────────────────────────────── */
.info-banner[b-s42gfcittd] {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-3);
    background: linear-gradient(135deg, #eff6ff 0%, #f0f9ff 100%);
    border: 1px solid #bfdbfe;
    border-left: 4px solid #3b82f6;
    border-radius: var(--radius-xl);
    padding: var(--spacing-4) var(--spacing-5);
    margin-bottom: var(--spacing-5);
    font-size: var(--font-size-sm);
    color: #1e40af;
    line-height: 1.6;
}
.info-banner i[b-s42gfcittd] {
    margin-top: 2px;
    flex-shrink: 0;
    font-size: 1rem;
    color: #3b82f6;
}
.info-banner strong[b-s42gfcittd] { color: #1d4ed8; }

/* ── Filter bar ──────────────────────────────────────────────────────── */
.filter-bar[b-s42gfcittd] {
    display: flex;
    gap: var(--spacing-3);
    flex-wrap: wrap;
    margin-bottom: var(--spacing-4);
    align-items: center;
}
.search-box[b-s42gfcittd] {
    position: relative;
    flex: 1;
    min-width: 220px;
}
.search-icon[b-s42gfcittd] {
    position: absolute;
    left: 0.875rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--color-neutral-400);
    font-size: 0.8125rem;
    pointer-events: none;
}
.search-input[b-s42gfcittd] {
    width: 100%;
    padding: 0.5625rem var(--spacing-4) 0.5625rem 2.375rem;
    border: 1px solid var(--color-neutral-300);
    border-radius: var(--radius-lg);
    font-size: var(--font-size-sm);
    background: #fff;
    color: var(--color-neutral-800);
    transition: border-color 0.15s, box-shadow 0.15s;
}
.search-input[b-s42gfcittd]::placeholder { color: var(--color-neutral-400); }
.search-input:focus[b-s42gfcittd] {
    outline: none;
    border-color: #6366f1;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.12);
}
.filter-select[b-s42gfcittd] {
    padding: 0.5625rem var(--spacing-4);
    border: 1px solid var(--color-neutral-300);
    border-radius: var(--radius-lg);
    font-size: var(--font-size-sm);
    background: #fff;
    color: var(--color-neutral-700);
    cursor: pointer;
    transition: border-color 0.15s;
    min-width: 130px;
    -webkit-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 20 20'%3E%3Cpath fill='%236b7280' d='M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    padding-right: 2.25rem;
}
.filter-select:focus[b-s42gfcittd] { outline: none; border-color: #6366f1; }

/* ── States ──────────────────────────────────────────────────────────── */
.loading-state[b-s42gfcittd],
.empty-state[b-s42gfcittd] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 5rem var(--spacing-6);
    background: #fff;
    border-radius: var(--radius-xl);
    box-shadow: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
    gap: var(--spacing-2);
    color: var(--color-neutral-400);
    text-align: center;
}
.loading-state i[b-s42gfcittd],
.empty-state i[b-s42gfcittd] {
    font-size: 2.75rem;
    margin-bottom: var(--spacing-3);
    opacity: 0.5;
}
.empty-state p[b-s42gfcittd]  { margin: 0; font-size: var(--font-size-base); color: var(--color-neutral-600); font-weight: var(--font-weight-medium); }
.empty-state small[b-s42gfcittd] { color: var(--color-neutral-400); font-size: 0.8125rem; }

/* ── Table Card ──────────────────────────────────────────────────────── */
.table-card[b-s42gfcittd] {
    background: #fff;
    border-radius: var(--radius-xl);
    box-shadow: 0 1px 3px rgba(0,0,0,0.07), 0 1px 2px rgba(0,0,0,0.04);
    overflow: hidden;
    border: 1px solid var(--color-neutral-200);
}

/* ── Data Table ──────────────────────────────────────────────────────── */
.data-table[b-s42gfcittd] {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--font-size-sm);
}
.data-table thead[b-s42gfcittd] {
    background: var(--color-neutral-50);
    border-bottom: 2px solid var(--color-neutral-200);
}
.data-table th[b-s42gfcittd] {
    padding: 0.875rem var(--spacing-4);
    text-align: left;
    font-size: 0.75rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-neutral-500);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    white-space: nowrap;
}
.data-table td[b-s42gfcittd] {
    padding: 0.875rem var(--spacing-4);
    border-bottom: 1px solid var(--color-neutral-100);
    vertical-align: middle;
    color: var(--color-neutral-700);
}
.data-table tbody tr:last-child td[b-s42gfcittd] { border-bottom: none; }
.data-table tbody tr[b-s42gfcittd] { transition: background 0.1s; }
.data-table tbody tr:hover td[b-s42gfcittd] { background: #f8faff; }
.row-inactive td[b-s42gfcittd] { opacity: 0.5; }
.col-actions[b-s42gfcittd] {
    width: 128px;
    text-align: right;
    padding-right: var(--spacing-4) !important;
}

/* ── Inline text helpers (replaces Tailwind utilities used in razor) ── */
.text-monospace[b-s42gfcittd] {
    font-family: var(--font-mono, ui-monospace, 'Cascadia Code', Consolas, monospace);
}
.text-sm[b-s42gfcittd]    { font-size: var(--font-size-sm); }
.text-xs[b-s42gfcittd]    { font-size: 0.75rem; }
.text-muted[b-s42gfcittd] { color: var(--color-neutral-500); }

/* ── Domain Pill ─────────────────────────────────────────────────────── */
.domain-pill[b-s42gfcittd] {
    display: inline-flex;
    align-items: center;
    gap: 0.4375rem;
    font-family: var(--font-mono, ui-monospace, 'Cascadia Code', Consolas, monospace);
    font-size: 0.8125rem;
    color: var(--color-neutral-800);
    font-weight: 500;
}
.domain-pill i[b-s42gfcittd] {
    color: #60a5fa;
    font-size: 0.875rem;
    flex-shrink: 0;
}

/* ── Type Badges ─────────────────────────────────────────────────────── */
.type-badge[b-s42gfcittd] {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 0.6875rem;
    font-weight: var(--font-weight-semibold);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    white-space: nowrap;
}
.type-primary[b-s42gfcittd] {
    background: #dbeafe;
    color: #1d4ed8;
    border: 1px solid #bfdbfe;
}
.type-alias[b-s42gfcittd] {
    background: #ede9fe;
    color: #5b21b6;
    border: 1px solid #ddd6fe;
}
.type-subdomain[b-s42gfcittd] {
    background: #d1fae5;
    color: #065f46;
    border: 1px solid #a7f3d0;
}

/* ── Status Badges ───────────────────────────────────────────────────── */
.status-badge[b-s42gfcittd] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 0.6875rem;
    font-weight: var(--font-weight-semibold);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    white-space: nowrap;
}
.status-badge[b-s42gfcittd]::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    flex-shrink: 0;
}
.status-active[b-s42gfcittd] {
    background: #d1fae5;
    color: #065f46;
    border: 1px solid #a7f3d0;
}
.status-active[b-s42gfcittd]::before { background: #10b981; }
.status-inactive[b-s42gfcittd] {
    background: #f3f4f6;
    color: #6b7280;
    border: 1px solid #e5e7eb;
}
.status-inactive[b-s42gfcittd]::before { background: #9ca3af; }

/* ── Tenant / School text in table ──────────────────────────────────── */
.data-table td.col-tenant[b-s42gfcittd],
.data-table td.col-school[b-s42gfcittd] {
    font-size: var(--font-size-sm);
    color: var(--color-neutral-600);
    max-width: 160px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.data-table td.col-date[b-s42gfcittd] {
    font-size: 0.75rem;
    color: var(--color-neutral-400);
    white-space: nowrap;
}

/* ── Buttons ─────────────────────────────────────────────────────────── */

/* ── Icon Buttons (action column) ────────────────────────────────────── */
.btn-icon[b-s42gfcittd] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border: none;
    background: transparent;
    border-radius: var(--radius-md);
    cursor: pointer;
    color: var(--color-neutral-400);
    transition: background 0.15s, color 0.15s;
    flex-shrink: 0;
}
.btn-icon:hover[b-s42gfcittd] { background: var(--color-neutral-100); color: var(--color-neutral-700); }

/* Color overrides for specific actions */
.btn-icon.text-yellow-600[b-s42gfcittd] { color: #d97706; }
.btn-icon.text-yellow-600:hover[b-s42gfcittd] { background: #fef3c7; color: #92400e; }
.btn-icon.text-green-600[b-s42gfcittd]  { color: #16a34a; }
.btn-icon.text-green-600:hover[b-s42gfcittd]  { background: #dcfce7; color: #14532d; }
.btn-icon.text-red-600[b-s42gfcittd]    { color: #dc2626; }
.btn-icon.text-red-600:hover[b-s42gfcittd]    { background: #fee2e2; color: #7f1d1d; }
.btn-icon.text-blue-400[b-s42gfcittd]   { color: #60a5fa; }

/* ── Pagination ──────────────────────────────────────────────────────── */
.pagination-bar[b-s42gfcittd] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--spacing-3) var(--spacing-5);
    border-top: 2px solid var(--color-neutral-100);
    flex-wrap: wrap;
    gap: var(--spacing-2);
    background: var(--color-neutral-50);
}
.page-info[b-s42gfcittd] {
    font-size: var(--font-size-sm);
    color: var(--color-neutral-500);
}
.page-buttons[b-s42gfcittd] { display: flex; gap: 3px; }
.btn-page[b-s42gfcittd] {
    min-width: 2rem;
    height: 2rem;
    padding: 0 var(--spacing-2);
    border: 1px solid var(--color-neutral-200);
    background: #fff;
    border-radius: var(--radius-md);
    font-size: 0.8125rem;
    cursor: pointer;
    color: var(--color-neutral-600);
    transition: background 0.15s, border-color 0.15s;
}
.btn-page:hover:not(:disabled)[b-s42gfcittd] {
    background: var(--color-neutral-100);
    border-color: var(--color-neutral-300);
}
.btn-page:disabled[b-s42gfcittd] { opacity: 0.35; cursor: not-allowed; }
.btn-page-active[b-s42gfcittd] {
    background: #4f46e5;
    color: #fff;
    border-color: #4f46e5;
    font-weight: var(--font-weight-semibold);
}
.btn-page-active:hover:not(:disabled)[b-s42gfcittd] { background: #4338ca; }

/* ── Modal Backdrop ──────────────────────────────────────────────────── */
.modal-backdrop[b-s42gfcittd] {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    padding: var(--spacing-4);
    backdrop-filter: blur(2px);
    animation: backdrop-in-b-s42gfcittd 0.15s ease;
}
@keyframes backdrop-in-b-s42gfcittd {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* ── Modal Card ──────────────────────────────────────────────────────── */
.modal-card[b-s42gfcittd] {
    background: #fff;
    border-radius: var(--radius-2xl);
    box-shadow: 0 24px 60px rgba(0,0,0,0.2), 0 8px 24px rgba(0,0,0,0.1);
    width: 100%;
    max-width: 500px;
    display: flex;
    flex-direction: column;
    animation: modal-in-b-s42gfcittd 0.18s ease;
    overflow: hidden;
}
@keyframes modal-in-b-s42gfcittd {
    from { opacity: 0; transform: scale(0.96) translateY(8px); }
    to   { opacity: 1; transform: scale(1) translateY(0); }
}

.modal-header[b-s42gfcittd] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--spacing-5) var(--spacing-6);
    background: linear-gradient(135deg, #f8f6ff 0%, #f0fdf4 100%);
    border-bottom: 1px solid var(--color-neutral-200);
}
.modal-header h2[b-s42gfcittd] {
    margin: 0;
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    color: var(--color-neutral-800);
}
.modal-body[b-s42gfcittd] {
    padding: var(--spacing-5) var(--spacing-6);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-4);
    max-height: 65vh;
    overflow-y: auto;
}
.modal-footer[b-s42gfcittd] {
    display: flex;
    justify-content: flex-end;
    gap: var(--spacing-3);
    padding: var(--spacing-4) var(--spacing-6);
    border-top: 1px solid var(--color-neutral-200);
    background: var(--color-neutral-50);
}

/* ── Form Controls ───────────────────────────────────────────────────── */
.form-group[b-s42gfcittd] {
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.form-group label[b-s42gfcittd] {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--color-neutral-700);
}
.form-group small[b-s42gfcittd] {
    font-size: 0.75rem;
    color: var(--color-neutral-400);
    line-height: 1.4;
}
.form-input[b-s42gfcittd] {
    padding: 0.5625rem 0.875rem;
    border: 1px solid var(--color-neutral-300);
    border-radius: var(--radius-lg);
    font-size: var(--font-size-sm);
    color: var(--color-neutral-800);
    background: #fff;
    transition: border-color 0.15s, box-shadow 0.15s;
    width: 100%;
    box-sizing: border-box;
}
.form-input:focus[b-s42gfcittd] {
    outline: none;
    border-color: #6366f1;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.12);
}
.form-input[b-s42gfcittd]::placeholder { color: var(--color-neutral-400); }
.form-check[b-s42gfcittd] {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    font-size: var(--font-size-sm);
    color: var(--color-neutral-700);
    cursor: pointer;
}
.form-check input[type="checkbox"][b-s42gfcittd] {
    width: 1rem;
    height: 1rem;
    accent-color: #4f46e5;
    cursor: pointer;
}
.required[b-s42gfcittd] { color: #ef4444; margin-left: 2px; }

/* ── Alert / Error ───────────────────────────────────────────────────── */
.alert-error[b-s42gfcittd] {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-2);
    padding: var(--spacing-3) var(--spacing-4);
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-left: 3px solid #ef4444;
    border-radius: var(--radius-lg);
    font-size: var(--font-size-sm);
    color: #991b1b;
    line-height: 1.5;
}
.alert-error i[b-s42gfcittd] { margin-top: 2px; flex-shrink: 0; }

/* ── Misc Utilities ──────────────────────────────────────────────────── */
.mt-3[b-s42gfcittd] { margin-top: var(--spacing-3); }

/* ── Responsive ──────────────────────────────────────────────────────── */
@media (max-width: 768px) {
    .page-header[b-s42gfcittd] {
        flex-direction: column;
        align-items: flex-start;
    }
    .page-header-actions[b-s42gfcittd] { width: 100%; }
    .filter-bar[b-s42gfcittd] { flex-direction: column; }
    .search-box[b-s42gfcittd] { min-width: unset; width: 100%; }
    .filter-select[b-s42gfcittd] { width: 100%; }
    .modal-card[b-s42gfcittd] { max-width: 100%; margin: var(--spacing-3); }
    .modal-body[b-s42gfcittd] { max-height: 55vh; }
}
@media (max-width: 640px) {
    .data-table[b-s42gfcittd] { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .data-table thead[b-s42gfcittd] { display: none; }
    .data-table tbody tr[b-s42gfcittd] {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: var(--spacing-2);
        padding: var(--spacing-3) var(--spacing-4);
        border-bottom: 1px solid var(--color-neutral-100);
    }
    .data-table td[b-s42gfcittd] {
        padding: 0;
        border-bottom: none;
    }
    .col-actions[b-s42gfcittd] { grid-column: span 2; text-align: right; }
}
/* /Pages/SuperAdmin/Dashboard.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════
   SuperAdmin Dashboard — Scoped Styles
   8px spacing system · design-tokens.css for colors/radii
   ══════════════════════════════════════════════════════════ */

/* ── Page container ── */
.dashboard-container[b-l9ygsdwat8] {
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 8px;
}

/* ── Header ── */
.dashboard-header[b-l9ygsdwat8] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 32px;
    flex-wrap: wrap;
}

.dashboard-title[b-l9ygsdwat8] {
    font-size: 28px;
    font-weight: 700;
    color: var(--color-neutral-900);
    margin-bottom: 4px;
    line-height: 1.2;
}

.dashboard-subtitle[b-l9ygsdwat8] {
    font-size: 14px;
    color: var(--color-neutral-500);
}

.header-actions[b-l9ygsdwat8] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.last-updated[b-l9ygsdwat8] {
    font-size: 13px;
    color: var(--color-neutral-400);
    display: flex;
    align-items: center;
    gap: 5px;
}

.btn-refresh[b-l9ygsdwat8] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 7px 16px;
    font-size: 13px;
    font-weight: 500;
    color: var(--color-primary-600);
    background: var(--color-primary-50, #eff6ff);
    border: 1px solid var(--color-primary-200, #bfdbfe);
    border-radius: 8px;
    cursor: pointer;
    transition: background 150ms ease, box-shadow 150ms ease;
}

.btn-refresh:hover:not(:disabled)[b-l9ygsdwat8] {
    background: var(--color-primary-100, #dbeafe);
    box-shadow: 0 1px 4px rgba(0,0,0,0.08);
}

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

/* ── KPI Grid ── */
.kpi-grid[b-l9ygsdwat8] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    margin-bottom: 32px;
}

.kpi-card[b-l9ygsdwat8] {
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.06);
    overflow: hidden;
    transition: transform 150ms ease, box-shadow 150ms ease;
    position: relative;
}

.kpi-card:hover[b-l9ygsdwat8] {
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(0,0,0,0.1);
}

.kpi-accent[b-l9ygsdwat8] {
    height: 4px;
    width: 100%;
}

.kpi-accent-blue[b-l9ygsdwat8]   { background: linear-gradient(90deg, #3b82f6, #2563eb); }
.kpi-accent-green[b-l9ygsdwat8]  { background: linear-gradient(90deg, #10b981, #059669); }
.kpi-accent-purple[b-l9ygsdwat8] { background: linear-gradient(90deg, #8b5cf6, #7c3aed); }
.kpi-accent-orange[b-l9ygsdwat8] { background: linear-gradient(90deg, #f59e0b, #d97706); }

.kpi-body[b-l9ygsdwat8] {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 20px 24px 22px;
}

.kpi-icon[b-l9ygsdwat8] {
    width: 56px;
    height: 56px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    color: #fff;
    flex-shrink: 0;
}

.kpi-icon-blue[b-l9ygsdwat8]   { background: linear-gradient(135deg, #3b82f6, #2563eb); }
.kpi-icon-green[b-l9ygsdwat8]  { background: linear-gradient(135deg, #10b981, #059669); }
.kpi-icon-purple[b-l9ygsdwat8] { background: linear-gradient(135deg, #8b5cf6, #7c3aed); }
.kpi-icon-orange[b-l9ygsdwat8] { background: linear-gradient(135deg, #f59e0b, #d97706); }

.kpi-data[b-l9ygsdwat8] {
    flex: 1;
    min-width: 0;
}

.kpi-label[b-l9ygsdwat8] {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--color-neutral-400);
    margin-bottom: 4px;
}

.kpi-value[b-l9ygsdwat8] {
    font-size: 32px;
    font-weight: 700;
    color: var(--color-neutral-900);
    line-height: 1.1;
    margin-bottom: 6px;
}

.kpi-value-status[b-l9ygsdwat8] {
    font-size: 22px;
    color: #10b981;
}

.kpi-sub[b-l9ygsdwat8] {
    font-size: 12px;
    color: var(--color-neutral-500);
    display: flex;
    align-items: center;
    gap: 5px;
    flex-wrap: wrap;
}

.kpi-muted[b-l9ygsdwat8] {
    color: var(--color-neutral-400);
}

.badge[b-l9ygsdwat8] {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
}

.badge-green[b-l9ygsdwat8] {
    background: #d1fae5;
    color: #065f46;
}

.badge-blue[b-l9ygsdwat8] {
    background: #dbeafe;
    color: #1e40af;
}

.status-dot[b-l9ygsdwat8] {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #10b981;
    box-shadow: 0 0 0 2px #d1fae5;
    animation: pulse-dot-b-l9ygsdwat8 2s infinite;
}

@keyframes pulse-dot-b-l9ygsdwat8 {
    0%, 100% { box-shadow: 0 0 0 2px #d1fae5; }
    50%       { box-shadow: 0 0 0 4px #a7f3d0; }
}

/* ── Section block ── */
.section-block[b-l9ygsdwat8] {
    margin-bottom: 32px;
}

.section-title[b-l9ygsdwat8] {
    font-size: 17px;
    font-weight: 600;
    color: var(--color-neutral-900);
    margin-bottom: 16px;
}

/* ── Quick Actions ── */
.actions-grid[b-l9ygsdwat8] {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 16px;
}

.action-card[b-l9ygsdwat8] {
    background: #fff;
    border: 1px solid var(--color-neutral-200, #e5e7eb);
    border-radius: 12px;
    padding: 16px;
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    color: var(--color-neutral-700);
    transition: border-color 150ms ease, box-shadow 150ms ease, transform 150ms ease;
}

.action-card:hover[b-l9ygsdwat8] {
    border-color: var(--color-primary-400, #60a5fa);
    box-shadow: 0 4px 12px rgba(59,130,246,0.1);
    transform: translateY(-2px);
}

.action-icon[b-l9ygsdwat8] {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    color: #fff;
    flex-shrink: 0;
}

.action-icon-blue[b-l9ygsdwat8]   { background: linear-gradient(135deg, #3b82f6, #2563eb); }
.action-icon-green[b-l9ygsdwat8]  { background: linear-gradient(135deg, #10b981, #059669); }
.action-icon-purple[b-l9ygsdwat8] { background: linear-gradient(135deg, #8b5cf6, #7c3aed); }
.action-icon-orange[b-l9ygsdwat8] { background: linear-gradient(135deg, #f59e0b, #d97706); }
.action-icon-teal[b-l9ygsdwat8]   { background: linear-gradient(135deg, #06b6d4, #0891b2); }
.action-icon-gray[b-l9ygsdwat8]   { background: linear-gradient(135deg, #6b7280, #4b5563); }

.action-info[b-l9ygsdwat8] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.action-label[b-l9ygsdwat8] {
    font-size: 13px;
    font-weight: 600;
    color: var(--color-neutral-800);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.action-desc[b-l9ygsdwat8] {
    font-size: 11px;
    color: var(--color-neutral-400);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.action-arrow[b-l9ygsdwat8] {
    font-size: 11px;
    color: var(--color-neutral-400);
    flex-shrink: 0;
}

.action-badge[b-l9ygsdwat8] {
    min-width: 22px;
    height: 22px;
    padding: 0 6px;
    border-radius: 999px;
    background: #ef4444;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* ── Intel Grid (middle row) ── */
.intel-grid[b-l9ygsdwat8] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-bottom: 32px;
}

/* ── Bottom Grid ── */
.bottom-grid[b-l9ygsdwat8] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-bottom: 40px;
}

/* ── Intel Card (shared) ── */
.intel-card[b-l9ygsdwat8] {
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.06);
    overflow: hidden;
}

.intel-header[b-l9ygsdwat8] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px 12px;
    border-bottom: 1px solid var(--color-neutral-100, #f3f4f6);
}

.intel-title[b-l9ygsdwat8] {
    font-size: 14px;
    font-weight: 600;
    color: var(--color-neutral-800);
    display: flex;
    align-items: center;
    gap: 7px;
    margin: 0;
}

.intel-title i[b-l9ygsdwat8] {
    font-size: 13px;
}

.intel-icon-blue[b-l9ygsdwat8]   { color: #3b82f6; }
.intel-icon-green[b-l9ygsdwat8]  { color: #10b981; }
.intel-icon-purple[b-l9ygsdwat8] { color: #8b5cf6; }
.intel-icon-orange[b-l9ygsdwat8] { color: #f59e0b; }

.intel-link[b-l9ygsdwat8] {
    font-size: 12px;
    font-weight: 500;
    color: var(--color-primary-600);
    text-decoration: none;
    transition: color 150ms ease;
}

.intel-link:hover[b-l9ygsdwat8] {
    color: var(--color-primary-700);
    text-decoration: underline;
}

.intel-empty[b-l9ygsdwat8] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 40px 20px;
    color: var(--color-neutral-400);
    font-size: 13px;
}

.intel-empty i[b-l9ygsdwat8] {
    font-size: 28px;
    color: var(--color-neutral-300);
}

/* ── Intel List Rows ── */
.intel-list[b-l9ygsdwat8] {
    padding: 0 4px;
}

.intel-row[b-l9ygsdwat8] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    border-bottom: 1px solid var(--color-neutral-50, #f9fafb);
    transition: background 120ms ease;
}

.intel-row:last-child[b-l9ygsdwat8] {
    border-bottom: none;
}

.intel-row:hover[b-l9ygsdwat8] {
    background: var(--color-neutral-50, #f9fafb);
}

.intel-avatar[b-l9ygsdwat8] {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: linear-gradient(135deg, #f59e0b, #d97706);
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.intel-avatar-blue[b-l9ygsdwat8]   { background: linear-gradient(135deg, #3b82f6, #2563eb); }
.intel-avatar-green[b-l9ygsdwat8]  { background: linear-gradient(135deg, #10b981, #059669); }
.intel-avatar-orange[b-l9ygsdwat8] { background: linear-gradient(135deg, #f59e0b, #d97706); }

.intel-row-content[b-l9ygsdwat8] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.intel-row-title[b-l9ygsdwat8] {
    font-size: 13px;
    font-weight: 600;
    color: var(--color-neutral-800);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.intel-row-sub[b-l9ygsdwat8] {
    font-size: 11px;
    color: var(--color-neutral-400);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.intel-tag[b-l9ygsdwat8] {
    display: inline-flex;
    align-items: center;
    padding: 2px 9px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    flex-shrink: 0;
}

.intel-tag-pending[b-l9ygsdwat8]  { background: #fef3c7; color: #92400e; }
.intel-tag-active[b-l9ygsdwat8]   { background: #d1fae5; color: #065f46; }
.intel-tag-inactive[b-l9ygsdwat8] { background: #f3f4f6; color: #6b7280; }

/* ── License Bars ── */
.license-bars[b-l9ygsdwat8] {
    padding: 12px 20px 4px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.license-bar-row[b-l9ygsdwat8] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.license-type[b-l9ygsdwat8] {
    width: 72px;
    font-size: 12px;
    font-weight: 500;
    color: var(--color-neutral-600);
    flex-shrink: 0;
}

.license-bar-track[b-l9ygsdwat8] {
    flex: 1;
    height: 8px;
    background: var(--color-neutral-100, #f3f4f6);
    border-radius: 999px;
    overflow: hidden;
}

.license-bar-fill[b-l9ygsdwat8] {
    height: 100%;
    border-radius: 999px;
    min-width: 4px;
    transition: width 600ms cubic-bezier(0.4, 0, 0.2, 1);
}

.license-bar-enterprise[b-l9ygsdwat8] { background: linear-gradient(90deg, #8b5cf6, #7c3aed); }
.license-bar-premium[b-l9ygsdwat8]    { background: linear-gradient(90deg, #3b82f6, #2563eb); }
.license-bar-basic[b-l9ygsdwat8]      { background: linear-gradient(90deg, #10b981, #059669); }
.license-bar-trial[b-l9ygsdwat8]      { background: linear-gradient(90deg, #f59e0b, #d97706); }
.license-bar-free[b-l9ygsdwat8]       { background: linear-gradient(90deg, #9ca3af, #6b7280); }

.license-count[b-l9ygsdwat8] {
    width: 20px;
    font-size: 12px;
    font-weight: 600;
    color: var(--color-neutral-700);
    text-align: right;
    flex-shrink: 0;
}

.expiry-alert[b-l9ygsdwat8] {
    margin: 12px 20px 16px;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: #fef3c7;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 500;
    color: #92400e;
}

.expiry-ok[b-l9ygsdwat8] {
    margin: 12px 20px 16px;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: #d1fae5;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 500;
    color: #065f46;
}

/* ── System Health ── */
.health-list[b-l9ygsdwat8] {
    padding: 8px 4px;
    display: flex;
    flex-direction: column;
}

.health-item[b-l9ygsdwat8] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    border-bottom: 1px solid var(--color-neutral-50, #f9fafb);
    font-size: 13px;
}

.health-item:last-child[b-l9ygsdwat8] {
    border-bottom: none;
}

.health-dot[b-l9ygsdwat8] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.health-dot-green[b-l9ygsdwat8] { background: #10b981; }
.health-dot-red[b-l9ygsdwat8]   { background: #ef4444; }
.health-dot-amber[b-l9ygsdwat8] { background: #f59e0b; }
.health-dot-blue[b-l9ygsdwat8]  { background: #3b82f6; }

.health-service[b-l9ygsdwat8] {
    flex: 1;
    font-weight: 500;
    color: var(--color-neutral-700);
}

.health-status[b-l9ygsdwat8] {
    font-size: 12px;
    color: #10b981;
    font-weight: 500;
}

.health-status-neutral[b-l9ygsdwat8] {
    color: var(--color-neutral-500);
}

.health-uptime[b-l9ygsdwat8] {
    font-size: 11px;
    color: var(--color-neutral-400);
    width: 110px;
    text-align: right;
    flex-shrink: 0;
}

/* ── School Distribution ── */
.school-dist-list[b-l9ygsdwat8] {
    padding: 12px 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.school-dist-row[b-l9ygsdwat8] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.school-dist-name[b-l9ygsdwat8] {
    width: 110px;
    font-size: 12px;
    font-weight: 500;
    color: var(--color-neutral-600);
    flex-shrink: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.school-dist-track[b-l9ygsdwat8] {
    flex: 1;
    height: 8px;
    background: var(--color-neutral-100, #f3f4f6);
    border-radius: 999px;
    overflow: hidden;
}

.school-dist-bar[b-l9ygsdwat8] {
    height: 100%;
    background: linear-gradient(90deg, #3b82f6, #2563eb);
    border-radius: 999px;
    min-width: 4px;
    transition: width 600ms cubic-bezier(0.4, 0, 0.2, 1);
}

.school-dist-count[b-l9ygsdwat8] {
    width: 20px;
    font-size: 12px;
    font-weight: 600;
    color: var(--color-neutral-700);
    text-align: right;
    flex-shrink: 0;
}

/* ── Platform Alerts ── */
.alert-list[b-l9ygsdwat8] {
    padding: 8px 4px;
    display: flex;
    flex-direction: column;
}

.alert-item[b-l9ygsdwat8] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 10px 16px;
    border-bottom: 1px solid var(--color-neutral-50, #f9fafb);
}

.alert-item:last-child[b-l9ygsdwat8] {
    border-bottom: none;
}

.alert-icon-wrap[b-l9ygsdwat8] {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    flex-shrink: 0;
    margin-top: 1px;
}

.alert-icon-wrap-warning[b-l9ygsdwat8] { background: #fef3c7; color: #d97706; }
.alert-icon-wrap-info[b-l9ygsdwat8]    { background: #dbeafe; color: #2563eb; }
.alert-icon-wrap-success[b-l9ygsdwat8] { background: #d1fae5; color: #059669; }

.alert-body[b-l9ygsdwat8] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.alert-title[b-l9ygsdwat8] {
    font-size: 13px;
    font-weight: 600;
    color: var(--color-neutral-800);
}

.alert-desc[b-l9ygsdwat8] {
    font-size: 12px;
    color: var(--color-neutral-500);
}

/* ── Responsive ── */
@@media (max-width: 1279px) {
    .kpi-grid[b-l9ygsdwat8] {
        grid-template-columns: repeat(2, 1fr);
    }
    .actions-grid[b-l9ygsdwat8] {
        grid-template-columns: repeat(3, 1fr);
    }
}

@@media (max-width: 1023px) {
    .intel-grid[b-l9ygsdwat8],
    .bottom-grid[b-l9ygsdwat8] {
        grid-template-columns: 1fr 1fr;
    }
}

@@media (max-width: 767px) {
    .dashboard-header[b-l9ygsdwat8] {
        flex-direction: column;
        align-items: flex-start;
    }

    .dashboard-title[b-l9ygsdwat8] {
        font-size: 22px;
    }

    .kpi-grid[b-l9ygsdwat8] {
        grid-template-columns: 1fr 1fr;
        gap: 16px;
    }

    .kpi-value[b-l9ygsdwat8] {
        font-size: 24px;
    }

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

    .intel-grid[b-l9ygsdwat8],
    .bottom-grid[b-l9ygsdwat8] {
        grid-template-columns: 1fr;
    }
}
/* /Pages/SuperAdmin/DataOperators.razor.rz.scp.css */
.do-page[b-n05m06k0gv] {
    max-width: 1100px;
    margin: 1.5rem auto;
}

.do-header[b-n05m06k0gv] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}

.do-title[b-n05m06k0gv] {
    font-size: 1.375rem;
    font-weight: 700;
    margin: 0 0 0.25rem 0;
    color: var(--color-gray-900, #111827);
}

.do-title i[b-n05m06k0gv] {
    color: var(--color-teal-500, #14b8a6);
    margin-right: 0.5rem;
}

.do-subtitle[b-n05m06k0gv] {
    margin: 0;
    color: var(--color-gray-500, #6b7280);
    font-size: 0.875rem;
}

/* Search */
.do-search-row[b-n05m06k0gv] {
    margin-bottom: 1rem;
}

.do-search-wrap[b-n05m06k0gv] {
    position: relative;
    max-width: 360px;
}

.do-search-input[b-n05m06k0gv] {
    padding-left: 2.25rem !important;
    width: 100%;
}

.do-search-icon[b-n05m06k0gv] {
    position: absolute;
    left: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--color-gray-400, #9ca3af);
    font-size: 0.875rem;
    pointer-events: none;
}

/* List */
.do-list[b-n05m06k0gv] {
    border: 1px solid var(--color-gray-200, #e5e7eb);
    border-radius: 0.75rem;
    overflow: hidden;
    background: white;
}

.do-row[b-n05m06k0gv] {
    border-bottom: 1px solid var(--color-gray-100, #f3f4f6);
}

.do-row:last-child[b-n05m06k0gv] {
    border-bottom: none;
}

.do-row-main[b-n05m06k0gv] {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.875rem 1rem;
    cursor: pointer;
    transition: background-color 120ms ease;
}

.do-row-main:hover[b-n05m06k0gv] {
    background: var(--color-gray-50, #f9fafb);
}

.do-row-expanded .do-row-main[b-n05m06k0gv] {
    border-bottom: 1px solid var(--color-gray-100, #f3f4f6);
    background: var(--color-gray-50, #f9fafb);
}

.do-avatar[b-n05m06k0gv] {
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--color-teal-500, #14b8a6), var(--color-teal-700, #0f766e));
    color: white;
    font-size: 1rem;
    flex-shrink: 0;
}

.do-row-info[b-n05m06k0gv] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.do-row-name[b-n05m06k0gv] {
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--color-gray-900, #111827);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.do-row-sub[b-n05m06k0gv] {
    font-size: 0.8rem;
    color: var(--color-gray-500, #6b7280);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.do-row-phone[b-n05m06k0gv] {
    margin-left: 0.5rem;
    padding-left: 0.5rem;
    border-left: 1px solid var(--color-gray-300, #d1d5db);
}

.do-row-detail[b-n05m06k0gv] {
    padding: 1rem 1.25rem 1.25rem 3.5rem;
    background: var(--color-gray-50, #f9fafb);
    display: flex;
    flex-direction: column;
    gap: 0.875rem;
}

/* Badges */
.do-badge[b-n05m06k0gv] {
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.25rem 0.625rem;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    white-space: nowrap;
}

.do-badge-scope[b-n05m06k0gv] {
    background: var(--color-teal-50, var(--color-teal-50));
    color: var(--color-teal-700, #0f766e);
}

.do-badge-active[b-n05m06k0gv] {
    background: color-mix(in srgb, var(--color-green-500, #22c55e) 12%, white);
    color: color-mix(in srgb, var(--color-green-700, #15803d) 80%, black);
}

.do-badge-inactive[b-n05m06k0gv] {
    background: color-mix(in srgb, var(--color-red-500, #ef4444) 12%, white);
    color: color-mix(in srgb, var(--color-red-700, #b91c1c) 80%, black);
}

/* Grants section */
.do-grants-block[b-n05m06k0gv] {
    background: white;
    padding: 0.75rem 1rem;
    border-radius: 0.5rem;
}

.do-grants-head[b-n05m06k0gv] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.025em;
    color: var(--color-teal-600, #0d9488);
    margin-bottom: 0.5rem;
}

.do-grants-none[b-n05m06k0gv] {
    margin: 0;
    padding: 0.375rem 0;
    font-size: 0.875rem;
    color: var(--color-gray-500, #6b7280);
}

.do-grant-chips[b-n05m06k0gv] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.do-grant-chip[b-n05m06k0gv] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: var(--color-teal-50, var(--color-teal-50));
    color: var(--color-teal-700, #0f766e);
    font-size: 0.8rem;
    font-weight: 500;
    padding: 0.375rem 0.875rem;
    border: 1px solid rgba(20, 184, 166, 0.3);
    border-radius: 999px;
}

.do-chip-check[b-n05m06k0gv] {
    color: var(--color-green-500, #22c55e);
}

.do-grant-subs[b-n05m06k0gv] {
    font-size: 0.7rem;
    font-weight: 400;
    opacity: 0.8;
    padding-left: 0.375rem;
    margin-left: 0.25rem;
    border-left: 1px solid rgba(13, 148, 136, 0.3);
}

.do-meta[b-n05m06k0gv] {
    display: flex;
    flex-wrap: wrap;
    gap: 1.25rem;
    font-size: 0.8rem;
    color: var(--color-gray-600, #4b5563);
}

.do-meta i[b-n05m06k0gv] {
    margin-right: 0.375rem;
    font-size: 0.75rem;
}

.do-row-actions[b-n05m06k0gv] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

/* Buttons */
.do-btn[b-n05m06k0gv] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    border-radius: 0.5rem;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    border: 1px solid transparent;
    transition: background-color 120ms ease, transform 120ms ease;
}

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

.do-btn-primary[b-n05m06k0gv] {
    background: var(--color-teal-500, #14b8a6);
    color: white;
}

.do-btn-primary:hover:not(:disabled)[b-n05m06k0gv] {
    background: var(--color-teal-600, #0d9488);
}

.do-btn-secondary[b-n05m06k0gv] {
    background: white;
    border-color: var(--color-gray-300, #d1d5db);
    color: var(--color-gray-700, #374151);
}

.do-btn-secondary:hover:not(:disabled)[b-n05m06k0gv] {
    border-color: var(--color-teal-500, #14b8a6);
    color: var(--color-teal-700, #0f766e);
    background: var(--color-teal-50, var(--color-teal-50));
}

.do-btn-ghost[b-n05m06k0gv] {
    background: transparent;
    border-color: transparent;
    color: var(--color-gray-600, #4b5563);
}

.do-btn-ghost:hover:not(:disabled)[b-n05m06k0gv] {
    background: var(--color-gray-100, #f3f4f6);
}

.do-btn-activate[b-n05m06k0gv] {
    background: color-mix(in srgb, var(--color-orange-500, #f97316) 10%, white);
    border-color: color-mix(in srgb, var(--color-orange-500, #f97316) 30%, white);
    color: var(--color-orange-700, #c2410c);
}

.do-btn-activate:hover:not(:disabled)[b-n05m06k0gv] {
    background: color-mix(in srgb, var(--color-orange-500, #f97316) 16%, white);
}

/* Empty/Loading states */
.do-empty[b-n05m06k0gv] {
    padding: 3rem 1rem;
    text-align: center;
    color: var(--color-gray-600, #4b5563);
    background: white;
    border: 1px dashed var(--color-gray-300, #d1d5db);
    border-radius: 0.75rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
}

.do-empty i[b-n05m06k0gv] {
    font-size: 2.5rem;
    color: var(--color-gray-400, #9ca3af);
}

.do-empty h3[b-n05m06k0gv] {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--color-gray-900, #111827);
    margin: 0;
}

.do-empty p[b-n05m06k0gv] {
    font-size: 0.875rem;
    color: var(--color-gray-500, #6b7280);
    margin: 0 0 0.75rem 0;
}

.do-loading[b-n05m06k0gv] {
    padding: 3rem;
    text-align: center;
}

.spinner[b-n05m06k0gv] {
    width: 1.5rem;
    height: 1.5rem;
    border: 3px solid rgba(20, 184, 166, 0.2);
    border-top-color: var(--color-teal-500, #14b8a6);
    border-radius: 50%;
    animation: spin-b-n05m06k0gv 1s linear infinite;
    margin: 0 auto;
}

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

/* Pagination */
.do-pagination[b-n05m06k0gv] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    margin-top: 1rem;
}

.do-page-info[b-n05m06k0gv] {
    font-size: 0.875rem;
    color: var(--color-gray-600, #4b5563);
    font-weight: 600;
}

.do-page-info span[b-n05m06k0gv] {
    font-weight: 400;
    color: var(--color-gray-500, #6b7280);
    margin-left: 0.5rem;
}

/* Modal root */
.do-modal[b-n05m06k0gv] {
    position: fixed;
    inset: 0;
    background: var(--modal-backdrop, rgba(0, 0, 0, 0.5));
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-4, 1rem);
}

.do-modal-wrap[b-n05m06k0gv] {
    background: #fff;
    border-radius: var(--radius-xl, 16px);
    width: 100%;
    max-width: 560px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}

.do-form[b-n05m06k0gv] { margin-bottom: 0; }

/* Modal shell */
.do-modal .modal-header[b-n05m06k0gv] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-5, 1.25rem) var(--space-6, 1.5rem);
    border-bottom: 1px solid var(--color-gray-100, #f3f4f6);
}

.modal-title[b-n05m06k0gv] {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--color-gray-800, #1f2937);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.modal-close[b-n05m06k0gv] {
    border: none;
    background: transparent;
    cursor: pointer;
    color: var(--color-gray-400, #9ca3af);
    font-size: 1rem;
    padding: 0.25rem;
}

.modal-close:hover[b-n05m06k0gv] { color: var(--color-gray-700, #374151); }

.do-modal .modal-body[b-n05m06k0gv] {
    padding: var(--space-5, 1.25rem) var(--space-6, 1.5rem);
    overflow-y: auto;
    flex: 1;
}

.do-modal .modal-footer[b-n05m06k0gv] {
    padding: var(--space-4, 1rem) var(--space-6, 1.5rem);
    border-top: 1px solid var(--color-gray-100, #f3f4f6);
    display: flex;
    justify-content: flex-end;
    gap: var(--space-3, 0.75rem);
}

/* Form (create/edit modals) */
.do-form-hint[b-n05m06k0gv] {
    margin: 0 0 1rem;
    padding: 0.625rem 0.875rem;
    background: var(--color-teal-50, var(--color-teal-50));
    border-left: 3px solid var(--color-teal-500, #14b8a6);
    border-radius: 0.375rem;
    font-size: 0.8rem;
    color: var(--color-gray-600, #4b5563);
}

.do-form-hint b[b-n05m06k0gv] { color: var(--color-gray-800, #1f2937); }

.do-form-grid[b-n05m06k0gv] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.875rem;
}

@media (min-width: 520px) {
    .do-form-grid[b-n05m06k0gv] { grid-template-columns: 1fr 1fr; }
}

.do-field[b-n05m06k0gv] {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    min-width: 0;
}

.do-label[b-n05m06k0gv] {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--color-gray-700, #374151);
}

.do-label-hint[b-n05m06k0gv] {
    font-size: 0.72rem;
    color: var(--color-gray-400, #9ca3af);
}

/* Inputs */
.do-input[b-n05m06k0gv] {
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--color-gray-300, #d1d5db);
    border-radius: 0.5rem;
    font-size: 0.875rem;
    background: white;
    color: var(--color-gray-900, #111827);
    width: 100%;
}

.do-input:focus[b-n05m06k0gv] {
    outline: none;
    border-color: var(--color-teal-500, #14b8a6);
    box-shadow: 0 0 0 3px rgba(20, 184, 166, 0.15);
}

.do-input:disabled[b-n05m06k0gv] {
    background: var(--color-gray-100, #f3f4f6);
    color: var(--color-gray-400, #9ca3af);
    cursor: not-allowed;
}

.do-search-spinner[b-n05m06k0gv] {
    position: absolute;
    right: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--color-teal-500, #14b8a6);
    font-size: 0.875rem;
}

/* Block titles inside modals */
.do-block-title[b-n05m06k0gv] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.025em;
    color: var(--color-teal-600, #0d9488);
    margin: 1.25rem 0 0.625rem;
}

/* Tenant picker */
.do-tenant-picker[b-n05m06k0gv] {
    border: 1px solid var(--color-gray-200, #e5e7eb);
    border-radius: 0.625rem;
    background: white;
    overflow: hidden;
}

.do-picker-head[b-n05m06k0gv] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: wrap;
    padding: 0.75rem 0.875rem;
    background: var(--color-gray-50, #f9fafb);
    border-bottom: 1px solid var(--color-gray-200, #e5e7eb);
}

.do-tenant-search[b-n05m06k0gv] {
    flex: 1;
    min-width: 180px;
    max-width: 280px;
}

.do-tenant-search .do-search-input[b-n05m06k0gv],
.do-tenant-search .do-input[b-n05m06k0gv] {
    padding-left: 2.25rem;
}

.do-select-all[b-n05m06k0gv] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--color-gray-700, #374151);
    cursor: pointer;
    user-select: none;
}

.do-select-all input[type="checkbox"][b-n05m06k0gv] {
    width: 1rem;
    height: 1rem;
    accent-color: var(--color-teal-500, #14b8a6);
    margin: 0;
    cursor: pointer;
}

.do-tenant-list[b-n05m06k0gv] {
    max-height: 260px;
    overflow-y: auto;
    padding: 0.5rem 0.625rem;
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

.do-tenant-chip[b-n05m06k0gv] {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.5rem 0.75rem;
    border-radius: 0.5rem;
    border: 1px solid transparent;
    background: white;
    cursor: pointer;
    transition: background-color 120ms ease, border-color 120ms ease;
}

.do-tenant-chip:hover[b-n05m06k0gv] {
    background: var(--color-gray-50, #f9fafb);
}

.do-tenant-chip-selected[b-n05m06k0gv] {
    background: var(--color-teal-50, var(--color-teal-50));
    border-color: var(--color-teal-500, #14b8a6);
}

.do-tenant-chip input[type="checkbox"][b-n05m06k0gv] {
    width: 1rem;
    height: 1rem;
    accent-color: var(--color-teal-500, #14b8a6);
    margin: 0;
    cursor: pointer;
}

.do-tenant-chip-label[b-n05m06k0gv] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--color-gray-800, #1f2937);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.do-tenant-chip-label i[b-n05m06k0gv] {
    color: var(--color-teal-600, #0d9488);
    font-size: 0.8rem;
}

.do-tenant-inactive[b-n05m06k0gv] {
    font-size: 0.72rem;
    font-weight: 400;
    color: var(--color-gray-400, #9ca3af);
}

.do-no-tenants[b-n05m06k0gv] {
    padding: 1.25rem;
    text-align: center;
    font-size: 0.875rem;
    color: var(--color-gray-500, #6b7280);
}

.do-picker-foot[b-n05m06k0gv] {
    padding: 0.625rem 0.875rem;
    background: var(--color-gray-50, #f9fafb);
    border-top: 1px solid var(--color-gray-200, #e5e7eb);
    font-size: 0.78rem;
    font-weight: 500;
    color: var(--color-gray-600, #4b5563);
}

/* Modal error callout */
.do-error[b-n05m06k0gv] {
    margin: 1rem 0 0;
    padding: 0.625rem 0.875rem;
    background: color-mix(in srgb, var(--color-red-500, #ef4444) 8%, white);
    border-left: 3px solid var(--color-red-500, #ef4444);
    border-radius: 0.375rem;
    font-size: 0.85rem;
    color: var(--color-red-700, #b91c1c);
}

.do-error i[b-n05m06k0gv] { margin-right: 0.375rem; }

/* Toast */
.do-toast[b-n05m06k0gv] {
    position: fixed;
    bottom: 1.5rem;
    right: 1.5rem;
    padding: 0.75rem 1.125rem;
    background: var(--color-gray-800, #1f2937);
    color: white;
    border-radius: 0.5rem;
    font-size: 0.875rem;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
    z-index: 10000;
}

.do-btn-activate:hover[b-n05m06k0gv] {
    background: color-mix(in srgb, var(--color-orange-500, #f97316) 12%, white);
}

@media (max-width: 768px) {
    .do-page[b-n05m06k0gv] {
        max-width: 100%;
        margin: 0;
        padding: 1rem;
    }

    .do-row-main[b-n05m06k0gv] {
        flex-wrap: wrap;
    }

    .do-search-wrap[b-n05m06k0gv] {
        max-width: 100%;
    }
}
/* /Pages/SuperAdmin/DemoAccessRequests/Index.razor.rz.scp.css */
.demo-access-page[b-0doibhac3e] { display: grid; gap: var(--space-4); }

/* ── Page heading ─────────────────────────────────────────────────────── */
.page-heading[b-0doibhac3e] {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
    gap: var(--space-4); padding: var(--space-5, 20px) var(--space-6);
    background: var(--color-surface-primary); border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
}
.page-heading h1[b-0doibhac3e], .modal-panel h2[b-0doibhac3e] { margin: 0; color: var(--color-text-primary); font-size: var(--font-size-xl, 20px); }
.page-heading p[b-0doibhac3e], .modal-panel header p[b-0doibhac3e] { margin: var(--space-1) 0 0; color: var(--color-text-secondary); font-size: var(--font-size-sm, 14px); }

/* ── Stat cards ───────────────────────────────────────────────────────── */
.status-summary[b-0doibhac3e] { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3); }
.stat-card[b-0doibhac3e] {
    display: flex; align-items: center; gap: var(--space-3);
    padding: var(--space-4); background: var(--color-surface-primary);
    border: 1px solid var(--color-border); border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm, 0 1px 2px rgb(0 0 0 / 5%));
}
.stat-icon[b-0doibhac3e] {
    display: grid; place-items: center; width: 44px; height: 44px; flex: 0 0 44px;
    border-radius: var(--radius-sm); font-size: 18px;
}
.stat-pending .stat-icon[b-0doibhac3e]  { background: var(--color-warning-100); color: var(--color-warning-700); }
.stat-approved .stat-icon[b-0doibhac3e] { background: var(--color-success-100); color: var(--color-success-700); }
.stat-rejected .stat-icon[b-0doibhac3e] { background: var(--color-danger-100); color: var(--color-danger-700); }
.stat-text[b-0doibhac3e] { display: grid; line-height: 1.2; min-width: 0; }
.stat-text strong[b-0doibhac3e] { font-size: var(--font-size-xl, 20px); color: var(--color-text-primary); }
.stat-text span[b-0doibhac3e] { font-size: var(--font-size-xs); color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.04em; }

/* ── Toolbar ──────────────────────────────────────────────────────────── */
.toolbar[b-0doibhac3e] {
    display: grid; gap: var(--space-3); padding: var(--space-4);
    background: var(--color-surface-primary); border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
}
.search-field[b-0doibhac3e] { position: relative; display: block; }
.search-field i[b-0doibhac3e] { position: absolute; top: 50%; left: var(--space-4); transform: translateY(-50%); color: var(--color-text-muted); }
.search-field input[b-0doibhac3e], .form-field select[b-0doibhac3e], .form-field textarea[b-0doibhac3e] {
    width: 100%; min-height: 44px; border: 1px solid var(--color-border);
    border-radius: var(--radius-sm); background: var(--color-surface-primary);
    color: var(--color-text-primary); font-size: var(--font-size-sm, 14px);
}
.search-field input[b-0doibhac3e] { padding: var(--space-2) var(--space-4) var(--space-2) var(--space-8); }
.search-field input:focus[b-0doibhac3e], .form-field select:focus[b-0doibhac3e], .form-field textarea:focus[b-0doibhac3e] {
    outline: 2px solid var(--color-primary); outline-offset: 1px; border-color: transparent;
}
.filter-tabs[b-0doibhac3e] { display: flex; flex-wrap: wrap; gap: var(--space-1); padding: var(--space-1); background: var(--color-surface-secondary); border-radius: var(--radius-sm); }
.filter-tabs button[b-0doibhac3e] {
    min-height: 40px; padding: 0 var(--space-4); border: 0; border-radius: calc(var(--radius-sm) - 2px);
    background: transparent; color: var(--color-text-secondary); font-weight: 600; font-size: var(--font-size-sm, 14px);
    cursor: pointer; transition: background 0.15s ease, color 0.15s ease;
}
.filter-tabs button:hover[b-0doibhac3e] { color: var(--color-text-primary); }
.filter-tabs button.active[b-0doibhac3e] { background: var(--color-primary); color: var(--color-text-white); box-shadow: var(--shadow-sm, 0 1px 2px rgb(0 0 0 / 10%)); }

/* ── Request list ─────────────────────────────────────────────────────── */
.request-list[b-0doibhac3e] { display: grid; gap: var(--space-4); }
.request-row[b-0doibhac3e] {
    display: grid; gap: var(--space-4); padding: var(--space-5, 20px);
    background: var(--color-surface-primary); border: 1px solid var(--color-border);
    border-left: 4px solid var(--color-border); border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm, 0 1px 2px rgb(0 0 0 / 5%));
    transition: box-shadow 0.15s ease;
}
.request-row:hover[b-0doibhac3e] { box-shadow: var(--shadow-md, 0 4px 12px rgb(0 0 0 / 8%)); }
.request-row:has(.status-pending)[b-0doibhac3e] { border-left-color: var(--color-warning-500); }
.request-row:has(.status-approved)[b-0doibhac3e] { border-left-color: var(--color-success-500); }
.request-row:has(.status-rejected)[b-0doibhac3e] { border-left-color: var(--color-danger-500); }

.request-head[b-0doibhac3e] { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: var(--space-3); }
.request-identity[b-0doibhac3e] { display: flex; align-items: center; gap: var(--space-3); min-width: 0; }
.identity-text[b-0doibhac3e] { display: grid; min-width: 0; gap: 2px; }
.identity-text strong[b-0doibhac3e] { color: var(--color-text-primary); font-size: var(--font-size-md, 16px); }
.identity-meta[b-0doibhac3e] { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); font-size: var(--font-size-sm, 14px); color: var(--color-text-secondary); }
.identity-meta i[b-0doibhac3e] { color: var(--color-text-muted); margin-right: 2px; }
.identity-meta a[b-0doibhac3e] { color: var(--color-primary); overflow-wrap: anywhere; text-decoration: none; }
.identity-meta a:hover[b-0doibhac3e] { text-decoration: underline; }

.avatar[b-0doibhac3e] {
    display: grid; place-items: center; width: 48px; height: 48px; flex: 0 0 48px;
    border-radius: 50%; background: var(--color-primary-light); color: var(--color-primary-dark);
    font-weight: 700; font-size: var(--font-size-md, 16px); letter-spacing: 0.02em;
}
.avatar-sm[b-0doibhac3e] { width: 40px; height: 40px; flex: 0 0 40px; font-size: var(--font-size-sm, 14px); }

.request-badges[b-0doibhac3e] { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.role-chip[b-0doibhac3e] {
    display: inline-flex; align-items: center; gap: var(--space-1);
    padding: var(--space-1) var(--space-3); border-radius: 999px;
    background: var(--color-surface-secondary); border: 1px solid var(--color-border);
    color: var(--color-text-secondary); font-size: var(--font-size-xs); font-weight: 600;
}
.status[b-0doibhac3e] {
    display: inline-flex; align-items: center; gap: var(--space-1);
    padding: var(--space-1) var(--space-3); border-radius: 999px;
    font-size: var(--font-size-xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em;
}
.status-pending[b-0doibhac3e]  { background: var(--color-warning-100); color: var(--color-warning-700); }
.status-approved[b-0doibhac3e] { background: var(--color-success-100); color: var(--color-success-700); }
.status-rejected[b-0doibhac3e] { background: var(--color-danger-100); color: var(--color-danger-700); }

.request-details[b-0doibhac3e] { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); margin: 0; padding: var(--space-3) var(--space-4); background: var(--color-surface-secondary); border-radius: var(--radius-sm); }
.request-details dt[b-0doibhac3e] { color: var(--color-text-muted); font-size: var(--font-size-xs); text-transform: uppercase; letter-spacing: 0.04em; }
.request-details dd[b-0doibhac3e] { margin: 2px 0 0; color: var(--color-text-primary); font-weight: 600; font-size: var(--font-size-sm, 14px); }

.request-message[b-0doibhac3e] { margin: 0; padding: var(--space-3) var(--space-4); border-left: 3px solid var(--color-primary); background: var(--color-surface-secondary); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
.message-label[b-0doibhac3e] { display: inline-flex; align-items: center; gap: var(--space-2); color: var(--color-text-muted); font-size: var(--font-size-xs); text-transform: uppercase; letter-spacing: 0.04em; font-weight: 700; }
.request-message p[b-0doibhac3e] { margin: var(--space-1) 0 0; color: var(--color-text-secondary); font-size: var(--font-size-sm, 14px); line-height: 1.6; white-space: pre-wrap; }

.request-actions[b-0doibhac3e] { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: var(--space-2); }
.decision-note[b-0doibhac3e] { display: inline-flex; align-items: center; gap: var(--space-2); color: var(--color-text-muted); font-size: var(--font-size-sm, 14px); }

/* ── States ───────────────────────────────────────────────────────────── */
.state-message[b-0doibhac3e] {
    display: flex; justify-content: center; align-items: center; gap: var(--space-2);
    min-height: 200px; color: var(--color-text-secondary);
    background: var(--color-surface-primary); border: 1px dashed var(--color-border); border-radius: var(--radius-md);
}
.state-message.error[b-0doibhac3e] { color: var(--color-danger-500); }

/* ── Approval modal ───────────────────────────────────────────────────── */
.modal-backdrop[b-0doibhac3e] { position: fixed; inset: 0; z-index: var(--z-modal); display: grid; place-items: center; padding: var(--space-4); background: rgb(15 23 42 / 55%); backdrop-filter: blur(2px); }
.modal-panel[b-0doibhac3e] { width: min(100%, 560px); max-height: calc(100vh - (2 * var(--space-4))); overflow: auto; border-radius: var(--radius-md); background: var(--color-surface-primary); box-shadow: var(--shadow-xl); }
.modal-panel > header[b-0doibhac3e], .modal-panel form[b-0doibhac3e] { padding: var(--space-6); }
.modal-panel > header[b-0doibhac3e] { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-4); border-bottom: 1px solid var(--color-border); }
.modal-panel form[b-0doibhac3e] { display: grid; gap: var(--space-4); }
.icon-button[b-0doibhac3e] { width: 44px; height: 44px; flex: 0 0 44px; border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--color-text-secondary); cursor: pointer; }
.icon-button:hover[b-0doibhac3e] { background: var(--color-surface-secondary); color: var(--color-text-primary); }

.requester-summary[b-0doibhac3e] {
    display: flex; align-items: center; gap: var(--space-3);
    padding: var(--space-3) var(--space-4); background: var(--color-surface-secondary);
    border: 1px solid var(--color-border); border-radius: var(--radius-sm);
}
.requester-summary div:last-child[b-0doibhac3e] { display: grid; min-width: 0; gap: 2px; }
.requester-summary strong[b-0doibhac3e] { color: var(--color-text-primary); }
.requester-summary span:last-child[b-0doibhac3e] { color: var(--color-text-muted); font-size: var(--font-size-xs); overflow-wrap: anywhere; }

.form-field[b-0doibhac3e] { display: grid; gap: var(--space-1); }
.form-field label[b-0doibhac3e] { color: var(--color-text-secondary); font-size: var(--font-size-sm, 14px); font-weight: 600; }
.form-field select[b-0doibhac3e], .form-field textarea[b-0doibhac3e] { padding: var(--space-2) var(--space-3); }
.approval-note[b-0doibhac3e] {
    margin: 0; padding: var(--space-3) var(--space-4); border-left: 3px solid var(--color-primary);
    background: var(--color-surface-secondary); color: var(--color-text-secondary);
    font-size: var(--font-size-sm, 14px); border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.modal-panel footer[b-0doibhac3e] { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: var(--space-2); padding-top: var(--space-2); border-top: 1px solid var(--color-border); }

.sr-only[b-0doibhac3e] { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/* ── Responsive ──────────────────────────────────────────────────────── */
@media (min-width: 768px) {
    .toolbar[b-0doibhac3e] { grid-template-columns: minmax(260px, 1fr) auto; align-items: center; }
    .request-details[b-0doibhac3e] { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 480px) {
    .status-summary[b-0doibhac3e] { grid-template-columns: 1fr; }
    .request-head[b-0doibhac3e] { flex-direction: column; }
    .request-actions[b-0doibhac3e] { justify-content: stretch; }
    .request-actions .btn-primary[b-0doibhac3e], .request-actions .btn-secondary[b-0doibhac3e] { flex: 1 1 auto; }
}
/* /Pages/SuperAdmin/DemoRequests/Index.razor.rz.scp.css */
/* =====================================================
   Index.razor.css — SuperAdmin Demo Requests page
   ===================================================== */

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

.header-left[b-8o79d7jlcj] {
    display: flex;
    align-items: center;
    gap: 0.875rem;
}

.header-icon[b-8o79d7jlcj] {
    font-size: 1.75rem;
    color: var(--color-primary-600, #2563eb);
}

.page-title[b-8o79d7jlcj] {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--color-neutral-900, #111827);
    margin: 0;
}

.page-subtitle[b-8o79d7jlcj] {
    font-size: 0.875rem;
    color: var(--color-neutral-500, #6b7280);
    margin: 0;
}

/* ── Stats pills ──────────────────────────────────── */
.header-stats[b-8o79d7jlcj] {
    display: flex;
    gap: 0.75rem;
}

.stat-pill[b-8o79d7jlcj] {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0.5rem 1.25rem;
    border-radius: 999px;
    min-width: 72px;
    font-size: 0.8rem;
    font-weight: 600;
}

.stat-pill.pending[b-8o79d7jlcj]  { background: #fef9c3; color: #92400e; }
.stat-pill.active[b-8o79d7jlcj]   { background: #dcfce7; color: #166534; }
.stat-pill.converted[b-8o79d7jlcj] { background: #ede9fe; color: #5b21b6; }

.stat-value[b-8o79d7jlcj] {
    font-size: 1.5rem;
    font-weight: 800;
    line-height: 1;
}

.stat-label[b-8o79d7jlcj] {
    font-size: 0.7rem;
    opacity: 0.85;
}

/* ── Filter bar ───────────────────────────────────── */
.filter-bar[b-8o79d7jlcj] {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    background: white;
    padding: 0.875rem 1.25rem;
    border-radius: 12px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.06);
    margin-bottom: 1.25rem;
}

.search-box[b-8o79d7jlcj] {
    position: relative;
    flex: 1;
    min-width: 200px;
}

.search-icon[b-8o79d7jlcj] {
    position: absolute;
    left: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    color: #9ca3af;
    pointer-events: none;
}

.search-input[b-8o79d7jlcj] {
    width: 100%;
    padding: 0.5rem 0.75rem 0.5rem 2.25rem;
    border: 1.5px solid #e5e7eb;
    border-radius: 8px;
    font-size: 0.9rem;
    outline: none;
    transition: border-color 0.2s;
    box-sizing: border-box;
}

.search-input:focus[b-8o79d7jlcj] {
    border-color: #3b82f6;
}

.filter-tabs[b-8o79d7jlcj] {
    display: flex;
    gap: 0.375rem;
}

.filter-tab[b-8o79d7jlcj] {
    background: #f3f4f6;
    border: none;
    padding: 0.4rem 1rem;
    border-radius: 999px;
    font-size: 0.85rem;
    font-weight: 500;
    color: #6b7280;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
    white-space: nowrap;
}

.filter-tab:hover[b-8o79d7jlcj] {
    background: #e5e7eb;
    color: #374151;
}

.filter-tab.active[b-8o79d7jlcj] {
    background: #2563eb;
    color: white;
}

/* ── States ───────────────────────────────────────── */
.loading-state[b-8o79d7jlcj],
.error-state[b-8o79d7jlcj],
.empty-state[b-8o79d7jlcj] {
    text-align: center;
    padding: 4rem 2rem;
    color: #9ca3af;
    font-size: 1rem;
}

.loading-state .spinner[b-8o79d7jlcj] {
    width: 40px;
    height: 40px;
    border: 3px solid #e5e7eb;
    border-top-color: #3b82f6;
    border-radius: 50%;
    animation: spin-b-8o79d7jlcj 0.7s linear infinite;
    margin: 0 auto 1rem;
}

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

.error-state[b-8o79d7jlcj] { color: #dc2626; }

.error-state i[b-8o79d7jlcj],
.empty-state i[b-8o79d7jlcj] {
    font-size: 2.5rem;
    margin-bottom: 0.75rem;
    display: block;
}

.btn-retry[b-8o79d7jlcj] {
    margin-top: 0.75rem;
    background: #2563eb;
    color: white;
    border: none;
    padding: 0.5rem 1.5rem;
    border-radius: 8px;
    cursor: pointer;
    font-size: 0.9rem;
}

/* ── Table ────────────────────────────────────────── */
.table-card[b-8o79d7jlcj] {
    background: white;
    border-radius: 14px;
    box-shadow: 0 1px 6px rgba(0,0,0,0.07);
    overflow: hidden;
}

.leads-table[b-8o79d7jlcj] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
}

.leads-table thead tr[b-8o79d7jlcj] {
    background: #f8fafc;
    border-bottom: 2px solid #e5e7eb;
}

.leads-table th[b-8o79d7jlcj] {
    padding: 0.75rem 1rem;
    text-align: left;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #6b7280;
    white-space: nowrap;
}

.leads-table tbody tr[b-8o79d7jlcj] {
    border-bottom: 1px solid #f1f5f9;
    transition: background 0.15s;
}

.leads-table tbody tr:hover[b-8o79d7jlcj] {
    background: #f8fafc;
}

.leads-table tbody tr.row-selected[b-8o79d7jlcj] {
    background: #eff6ff;
}

.leads-table td[b-8o79d7jlcj] {
    padding: 0.875rem 1rem;
    vertical-align: top;
}

.td-num[b-8o79d7jlcj] {
    color: #9ca3af;
    font-size: 0.8rem;
    width: 36px;
}

.td-school .school-name[b-8o79d7jlcj] {
    font-weight: 600;
    color: #111827;
}

.td-contact .contact-name[b-8o79d7jlcj] {
    font-weight: 500;
    color: #1f2937;
    margin-bottom: 2px;
}

.td-contact .contact-phone[b-8o79d7jlcj],
.td-contact .contact-email[b-8o79d7jlcj] {
    display: block;
    font-size: 0.8rem;
    color: #6b7280;
    text-decoration: none;
    margin-top: 1px;
}

.td-contact .contact-phone:hover[b-8o79d7jlcj] {
    color: #2563eb;
}

.td-location[b-8o79d7jlcj] {
    color: #6b7280;
    white-space: nowrap;
}

.td-students[b-8o79d7jlcj] {
    color: #374151;
    text-align: center;
}

.td-date[b-8o79d7jlcj] {
    color: #6b7280;
    white-space: nowrap;
    font-size: 0.82rem;
}

/* ── Status badges ────────────────────────────────── */
.status-badge[b-8o79d7jlcj] {
    display: inline-block;
    padding: 0.2rem 0.7rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.badge-pending[b-8o79d7jlcj]   { background: #fef9c3; color: #92400e; }
.badge-active[b-8o79d7jlcj]    { background: #dcfce7; color: #166534; }
.badge-converted[b-8o79d7jlcj] { background: #ede9fe; color: #5b21b6; }
.badge-default[b-8o79d7jlcj]   { background: #f3f4f6; color: #6b7280; }

/* ── Trial dates ──────────────────────────────────── */
.trial-dates[b-8o79d7jlcj] {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 0.8rem;
    color: #374151;
    white-space: nowrap;
}

/* ── Action buttons ───────────────────────────────── */
.btn-activate[b-8o79d7jlcj],
.btn-convert[b-8o79d7jlcj] {
    border: none;
    padding: 0.35rem 0.85rem;
    border-radius: 8px;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    transition: opacity 0.15s, transform 0.1s;
    white-space: nowrap;
}

.btn-activate[b-8o79d7jlcj] {
    background: #22c55e;
    color: white;
}

.btn-activate:hover[b-8o79d7jlcj] {
    opacity: 0.88;
    transform: translateY(-1px);
}

.btn-convert[b-8o79d7jlcj] {
    background: #8b5cf6;
    color: white;
}

.btn-convert:hover[b-8o79d7jlcj] {
    opacity: 0.88;
    transform: translateY(-1px);
}

.btn-resend[b-8o79d7jlcj] {
    background: #0ea5e9;
    color: white;
}

.btn-resend:hover:not(:disabled)[b-8o79d7jlcj] {
    opacity: 0.88;
    transform: translateY(-1px);
}

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

.action-group[b-8o79d7jlcj] {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    align-items: center;
}

/* ── Modal ────────────────────────────────────────── */
.modal-backdrop[b-8o79d7jlcj] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

.modal-box[b-8o79d7jlcj] {
    background: white;
    border-radius: 18px;
    width: 100%;
    max-width: 480px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.2);
    overflow: hidden;
}

.modal-header[b-8o79d7jlcj] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid #e5e7eb;
}

.modal-header h2[b-8o79d7jlcj] {
    font-size: 1.1rem;
    font-weight: 700;
    color: #111827;
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
}

.modal-close[b-8o79d7jlcj] {
    background: none;
    border: none;
    color: #9ca3af;
    font-size: 1.1rem;
    cursor: pointer;
    padding: 4px;
    border-radius: 6px;
    transition: color 0.15s;
}

.modal-close:hover[b-8o79d7jlcj] { color: #374151; }

.modal-body[b-8o79d7jlcj] {
    padding: 1.5rem;
}

/* School info summary */
.modal-school-info[b-8o79d7jlcj] {
    background: #f8fafc;
    border-radius: 10px;
    padding: 1rem;
    margin-bottom: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.msi-row[b-8o79d7jlcj] {
    display: flex;
    gap: 0.75rem;
    font-size: 0.875rem;
}

.msi-label[b-8o79d7jlcj] {
    font-weight: 600;
    color: #6b7280;
    min-width: 60px;
    flex-shrink: 0;
}

.msi-value[b-8o79d7jlcj] {
    color: #111827;
}

/* Form fields */
.modal-fields[b-8o79d7jlcj] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.mf-group[b-8o79d7jlcj] {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.mf-group label[b-8o79d7jlcj] {
    font-size: 0.85rem;
    font-weight: 600;
    color: #374151;
}

.req[b-8o79d7jlcj] { color: #ef4444; }

.mf-input[b-8o79d7jlcj] {
    padding: 0.55rem 0.75rem;
    border: 1.5px solid #d1d5db;
    border-radius: 8px;
    font-size: 0.9rem;
    outline: none;
    transition: border-color 0.2s;
    width: 100%;
    box-sizing: border-box;
}

.mf-input:focus[b-8o79d7jlcj] {
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59,130,246,0.12);
}

.mf-hint[b-8o79d7jlcj] {
    font-size: 0.75rem;
    color: #9ca3af;
}

.modal-error[b-8o79d7jlcj] {
    margin-top: 1rem;
    background: #fef2f2;
    border: 1px solid #fca5a5;
    color: #dc2626;
    border-radius: 8px;
    padding: 0.6rem 0.875rem;
    font-size: 0.85rem;
    display: flex;
    gap: 7px;
    align-items: center;
}

.modal-footer[b-8o79d7jlcj] {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    padding: 1rem 1.5rem;
    border-top: 1px solid #e5e7eb;
    background: #f9fafb;
}

.btn-cancel[b-8o79d7jlcj] {
    background: white;
    border: 1.5px solid #d1d5db;
    color: #374151;
    padding: 0.55rem 1.25rem;
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s;
}

.btn-cancel:hover[b-8o79d7jlcj] { background: #f3f4f6; }

.btn-confirm-activate[b-8o79d7jlcj] {
    background: #22c55e;
    color: white;
    border: none;
    padding: 0.55rem 1.5rem;
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    transition: opacity 0.15s;
}

.btn-confirm-activate:hover:not(:disabled)[b-8o79d7jlcj] { opacity: 0.88; }
.btn-confirm-activate:disabled[b-8o79d7jlcj] { opacity: 0.6; cursor: not-allowed; }

/* ── Responsive ───────────────────────────────────── */
@media (max-width: 768px) {
    .page-header[b-8o79d7jlcj] { flex-direction: column; align-items: flex-start; }
    .header-stats[b-8o79d7jlcj] { flex-wrap: wrap; }
    .modal-fields[b-8o79d7jlcj] { grid-template-columns: 1fr; }
    .leads-table[b-8o79d7jlcj] { font-size: 0.8rem; }
    .leads-table th[b-8o79d7jlcj], .leads-table td[b-8o79d7jlcj] { padding: 0.6rem 0.75rem; }
}
/* /Pages/SuperAdmin/DeviceTokens/Index.razor.rz.scp.css */
/* ── Page header ─────────────────────────────────────────────────────── */
.page-header[b-qw86e3rioy] { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.5rem; gap: 1rem; flex-wrap: wrap; }
.header-left[b-qw86e3rioy] { display: flex; align-items: center; gap: 0.875rem; }
.header-icon[b-qw86e3rioy] { font-size: 1.5rem; color: var(--color-primary-600, #4f46e5); }
.page-title[b-qw86e3rioy] { margin: 0; font-size: 1.5rem; font-weight: 700; color: var(--color-neutral-900, #111827); }
.page-subtitle[b-qw86e3rioy] { margin: 0.125rem 0 0; color: var(--color-neutral-500, #6b7280); font-size: 0.875rem; }

/* ── Stats row ───────────────────────────────────────────────────────── */
.stats-row[b-qw86e3rioy] { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-bottom: 1rem; }
.stat-card[b-qw86e3rioy] { background: var(--color-neutral-0, #fff); border: 1px solid var(--color-neutral-100, #f3f4f6); border-radius: 0.625rem; padding: 1rem 1.125rem; box-shadow: 0 1px 2px rgba(0,0,0,0.04); }
.stat-label[b-qw86e3rioy] { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--color-neutral-500, #6b7280); }
.stat-value[b-qw86e3rioy] { font-size: 1.875rem; font-weight: 700; color: var(--color-neutral-900, #111827); line-height: 1.1; margin-top: 0.25rem; }
.stat-sub[b-qw86e3rioy]   { font-size: 0.75rem; color: var(--color-neutral-500, #6b7280); margin-top: 0.25rem; }
.stat-active[b-qw86e3rioy]  { border-left: 3px solid var(--color-success-500, #10b981); }
.stat-stale[b-qw86e3rioy]   { border-left: 3px solid var(--color-warning-500, #f59e0b); }
.stat-inactive[b-qw86e3rioy]{ border-left: 3px solid var(--color-neutral-300, #d1d5db); }

.by-platform-row[b-qw86e3rioy] { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1.25rem; }
.platform-chip[b-qw86e3rioy] { display: inline-flex; align-items: center; padding: 0.25rem 0.625rem; background: var(--color-neutral-50, #f9fafb); border: 1px solid var(--color-neutral-200, #e5e7eb); border-radius: 999px; font-size: 0.75rem; color: var(--color-neutral-700, #374151); }

/* ── Filters ─────────────────────────────────────────────────────────── */
.filters-card[b-qw86e3rioy] { background: var(--color-neutral-0, #fff); border: 1px solid var(--color-neutral-100, #f3f4f6); border-radius: 0.625rem; padding: 0.875rem 1rem; margin-bottom: 1rem; }
.filters-grid[b-qw86e3rioy] { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr auto; gap: 0.75rem; align-items: end; }
.filter-field[b-qw86e3rioy] { display: flex; flex-direction: column; gap: 0.25rem; }
.filter-field label[b-qw86e3rioy] { font-size: 0.7rem; font-weight: 600; text-transform: uppercase; color: var(--color-neutral-500, #6b7280); letter-spacing: 0.05em; }
.filter-field input[b-qw86e3rioy], .filter-field select[b-qw86e3rioy] { padding: 0.5rem 0.625rem; border: 1px solid var(--color-neutral-200, #e5e7eb); border-radius: 0.375rem; font-size: 0.875rem; background: var(--color-neutral-0, #fff); color: var(--color-neutral-900, #111827); }
.filter-field input:focus[b-qw86e3rioy], .filter-field select:focus[b-qw86e3rioy] { outline: 2px solid var(--color-primary-300, #a5b4fc); outline-offset: 1px; }
.filter-checkbox .check-line[b-qw86e3rioy] { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.8125rem; color: var(--color-neutral-700, #374151); }
.filter-actions[b-qw86e3rioy] { display: flex; gap: 0.5rem; }

/* ── Buttons ─────────────────────────────────────────────────────────── */
.btn-primary[b-qw86e3rioy], .btn-secondary[b-qw86e3rioy], .btn-danger[b-qw86e3rioy], .btn-link[b-qw86e3rioy] { display: inline-flex; align-items: center; gap: 0.4rem; border: 1px solid transparent; border-radius: 0.375rem; padding: 0.5rem 0.875rem; font-size: 0.8125rem; font-weight: 500; cursor: pointer; transition: all 0.12s ease; }
.btn-sm[b-qw86e3rioy] { padding: 0.375rem 0.625rem; font-size: 0.75rem; }
.btn-primary[b-qw86e3rioy]   { background: var(--color-primary-600, #4f46e5); color: #fff; border-color: var(--color-primary-600, #4f46e5); }
.btn-primary:hover[b-qw86e3rioy]   { background: var(--color-primary-700, #4338ca); }
.btn-secondary[b-qw86e3rioy] { background: var(--color-neutral-0, #fff); color: var(--color-neutral-700, #374151); border-color: var(--color-neutral-200, #e5e7eb); }
.btn-secondary:hover[b-qw86e3rioy] { background: var(--color-neutral-50, #f9fafb); }
.btn-danger[b-qw86e3rioy]    { background: var(--color-danger-600, #dc2626); color: #fff; border-color: var(--color-danger-600, #dc2626); }
.btn-danger:hover[b-qw86e3rioy]    { background: var(--color-danger-700, #b91c1c); }
.btn-link[b-qw86e3rioy] { background: transparent; color: var(--color-primary-600, #4f46e5); border: none; padding: 0.25rem 0.5rem; }
button:disabled[b-qw86e3rioy], .btn-primary:disabled[b-qw86e3rioy], .btn-secondary:disabled[b-qw86e3rioy], .btn-danger:disabled[b-qw86e3rioy] { opacity: 0.55; cursor: not-allowed; }

/* ── Table ───────────────────────────────────────────────────────────── */
.table-wrap[b-qw86e3rioy] { background: var(--color-neutral-0, #fff); border: 1px solid var(--color-neutral-100, #f3f4f6); border-radius: 0.625rem; overflow: auto; }
.data-table[b-qw86e3rioy] { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 0.8125rem; }
.data-table thead th[b-qw86e3rioy] { text-align: left; padding: 0.625rem 0.75rem; background: var(--color-neutral-50, #f9fafb); border-bottom: 1px solid var(--color-neutral-100, #f3f4f6); font-weight: 600; color: var(--color-neutral-700, #374151); position: sticky; top: 0; z-index: 1; }
.data-table tbody td[b-qw86e3rioy] { padding: 0.625rem 0.75rem; border-bottom: 1px solid var(--color-neutral-50, #f9fafb); color: var(--color-neutral-900, #111827); vertical-align: top; }
.data-table tbody tr:hover[b-qw86e3rioy] { background: var(--color-neutral-50, #f9fafb); }
.data-table tbody tr.row-inactive[b-qw86e3rioy] { opacity: 0.7; }
.data-table tbody tr.row-stale td[b-qw86e3rioy] { background: rgba(245, 158, 11, 0.04); }
.col-check[b-qw86e3rioy] { width: 36px; }
.col-actions[b-qw86e3rioy] { width: 96px; text-align: right; }

.user-cell .user-name[b-qw86e3rioy] { font-weight: 600; color: var(--color-neutral-900, #111827); }
.user-cell .user-meta[b-qw86e3rioy] { color: var(--color-neutral-500, #6b7280); font-size: 0.75rem; margin-top: 0.125rem; }
.device-cell .device-meta[b-qw86e3rioy] { color: var(--color-neutral-500, #6b7280); font-size: 0.75rem; margin-top: 0.125rem; }
.lastseen-meta[b-qw86e3rioy] { font-size: 0.7rem; color: var(--color-neutral-500, #6b7280); }
.lastseen-old[b-qw86e3rioy] { color: var(--color-warning-700, #b45309); font-weight: 500; }

/* Pills */
.platform-pill[b-qw86e3rioy] { display: inline-block; padding: 0.125rem 0.5rem; border-radius: 999px; font-size: 0.7rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; }
.platform-android[b-qw86e3rioy] { background: rgba(16, 185, 129, 0.12); color: var(--color-success-700, #047857); }
.platform-ios[b-qw86e3rioy]     { background: rgba(79, 70, 229, 0.12); color: var(--color-primary-700, #4338ca); }
.platform-web[b-qw86e3rioy]     { background: rgba(245, 158, 11, 0.12); color: var(--color-warning-700, #b45309); }

.status-pill[b-qw86e3rioy] { display: inline-block; padding: 0.125rem 0.5rem; border-radius: 999px; font-size: 0.7rem; font-weight: 600; }
.status-active[b-qw86e3rioy]   { background: rgba(16, 185, 129, 0.15); color: var(--color-success-700, #047857); }
.status-inactive[b-qw86e3rioy] { background: rgba(107, 114, 128, 0.15); color: var(--color-neutral-600, #4b5563); }

/* Row actions */
.row-actions[b-qw86e3rioy] { display: inline-flex; gap: 0.25rem; }
.icon-btn[b-qw86e3rioy] { background: transparent; border: 1px solid var(--color-neutral-200, #e5e7eb); color: var(--color-neutral-700, #374151); border-radius: 0.375rem; padding: 0.25rem 0.5rem; cursor: pointer; font-size: 0.75rem; }
.icon-btn:hover[b-qw86e3rioy] { background: var(--color-neutral-50, #f9fafb); }
.icon-btn-danger[b-qw86e3rioy] { color: var(--color-danger-600, #dc2626); border-color: rgba(220, 38, 38, 0.3); }
.icon-btn-danger:hover[b-qw86e3rioy] { background: rgba(220, 38, 38, 0.06); }

/* Pager */
.pager-row[b-qw86e3rioy] { display: flex; align-items: center; justify-content: space-between; padding: 0.75rem 0.5rem; flex-wrap: wrap; gap: 0.5rem; }
.pager-info[b-qw86e3rioy] { color: var(--color-neutral-500, #6b7280); font-size: 0.8125rem; }
.pager-buttons[b-qw86e3rioy] { display: inline-flex; align-items: center; gap: 0.5rem; }
.pager-page[b-qw86e3rioy] { color: var(--color-neutral-700, #374151); font-size: 0.8125rem; }

/* Bulk bar */
.bulk-bar[b-qw86e3rioy] { position: sticky; bottom: 0; display: flex; align-items: center; justify-content: space-between; background: var(--color-neutral-900, #111827); color: #fff; padding: 0.625rem 1rem; border-radius: 0.5rem; margin-top: 0.75rem; box-shadow: 0 8px 24px rgba(0,0,0,0.15); }
.bulk-count[b-qw86e3rioy] { font-weight: 600; font-size: 0.875rem; }
.bulk-actions[b-qw86e3rioy] { display: inline-flex; gap: 0.5rem; }
.bulk-bar .btn-secondary[b-qw86e3rioy] { color: #fff; background: transparent; border-color: rgba(255,255,255,0.3); }
.bulk-bar .btn-secondary:hover[b-qw86e3rioy] { background: rgba(255,255,255,0.08); }
.bulk-bar .btn-link[b-qw86e3rioy] { color: #fff; }

/* Loading + empty */
.loading[b-qw86e3rioy], .empty-state[b-qw86e3rioy] { background: var(--color-neutral-0, #fff); border: 1px solid var(--color-neutral-100, #f3f4f6); border-radius: 0.625rem; padding: 2.5rem 1rem; text-align: center; color: var(--color-neutral-500, #6b7280); }
.empty-state i[b-qw86e3rioy] { font-size: 2rem; color: var(--color-neutral-300, #d1d5db); }
.empty-state h3[b-qw86e3rioy] { margin: 0.5rem 0 0.25rem; color: var(--color-neutral-700, #374151); font-size: 1rem; }
.empty-state p[b-qw86e3rioy] { margin: 0; font-size: 0.875rem; }

/* ── Responsive: tablet ─────────────────────────────────────────────── */
@media (max-width: 992px) {
    .filters-grid[b-qw86e3rioy] { grid-template-columns: 1fr 1fr; }
    .filter-search[b-qw86e3rioy] { grid-column: span 2; }
    .filter-actions[b-qw86e3rioy] { grid-column: span 2; justify-content: flex-end; }
    .stats-row[b-qw86e3rioy] { grid-template-columns: 1fr 1fr; }
    .stat-card:last-child[b-qw86e3rioy] { grid-column: span 2; }
}

/* ── Responsive: mobile ─────────────────────────────────────────────── */
@media (max-width: 640px) {
    .stats-row[b-qw86e3rioy] { grid-template-columns: 1fr; }
    .stat-card:last-child[b-qw86e3rioy] { grid-column: auto; }
    .table-wrap[b-qw86e3rioy] { border: none; background: transparent; }
    .data-table thead[b-qw86e3rioy] { display: none; }
    .data-table[b-qw86e3rioy], .data-table tbody[b-qw86e3rioy], .data-table tr[b-qw86e3rioy], .data-table td[b-qw86e3rioy] { display: block; width: 100%; }
    .data-table tr[b-qw86e3rioy] { background: var(--color-neutral-0, #fff); border: 1px solid var(--color-neutral-100, #f3f4f6); border-radius: 0.5rem; margin-bottom: 0.625rem; padding: 0.5rem 0.75rem; }
    .data-table td[b-qw86e3rioy] { border-bottom: 1px solid var(--color-neutral-50, #f9fafb); padding: 0.375rem 0; }
    .data-table td:last-child[b-qw86e3rioy] { border-bottom: none; }
    .col-check[b-qw86e3rioy], .col-actions[b-qw86e3rioy] { width: auto; }
    .data-table td[b-qw86e3rioy]::before { content: attr(data-label); display: block; font-size: 0.7rem; font-weight: 600; color: var(--color-neutral-500, #6b7280); text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 0.125rem; }
}
/* /Pages/SuperAdmin/Inquiries/Index.razor.rz.scp.css */
.inquiries-page[b-rnzcckatsl] {
    padding: var(--space-6);
    max-width: 1200px;
}

/* Header */
.page-header[b-rnzcckatsl] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: var(--space-6);
    gap: var(--space-4);
}

.header-left[b-rnzcckatsl] { flex: 1; }

.page-title[b-rnzcckatsl] {
    font-size: var(--text-2xl);
    font-weight: 700;
    color: var(--color-text-primary);
    margin: 0 0 var(--space-1);
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.page-title i[b-rnzcckatsl] { color: var(--color-primary); }

.page-subtitle[b-rnzcckatsl] {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    margin: 0;
}

.btn-refresh[b-rnzcckatsl] {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-2) var(--space-3);
    color: var(--color-text-secondary);
    cursor: pointer;
    font-size: var(--text-base);
    transition: all 0.15s;
    flex-shrink: 0;
}

.btn-refresh:hover[b-rnzcckatsl] {
    background: var(--color-primary);
    color: white;
    border-color: var(--color-primary);
}

/* Filter tabs */
.filter-tabs[b-rnzcckatsl] {
    display: flex;
    gap: var(--space-2);
    flex-wrap: wrap;
    margin-bottom: var(--space-5);
    border-bottom: 2px solid var(--color-border);
    padding-bottom: var(--space-1);
}

.filter-tab[b-rnzcckatsl] {
    background: none;
    border: none;
    padding: var(--space-2) var(--space-4);
    font-size: var(--text-sm);
    font-weight: 500;
    color: var(--color-text-secondary);
    cursor: pointer;
    border-radius: var(--radius-md) var(--radius-md) 0 0;
    position: relative;
    transition: color 0.15s;
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.filter-tab:hover[b-rnzcckatsl] { color: var(--color-primary); }

.filter-tab.active[b-rnzcckatsl] {
    color: var(--color-primary);
    font-weight: 600;
}

.filter-tab.active[b-rnzcckatsl]::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--color-primary);
}

.tab-count[b-rnzcckatsl] {
    background: var(--color-primary-light, #ede9fe);
    color: var(--color-primary);
    font-size: var(--text-xs);
    font-weight: 700;
    padding: 1px 6px;
    border-radius: 999px;
}

/* Loading / empty states */
.loading-state[b-rnzcckatsl],
.empty-state[b-rnzcckatsl] {
    text-align: center;
    padding: var(--space-16) var(--space-4);
    color: var(--color-text-muted);
}

.loading-state .spinner[b-rnzcckatsl],
.spinner[b-rnzcckatsl] {
    width: 36px;
    height: 36px;
    border: 3px solid var(--color-border);
    border-top-color: var(--color-primary);
    border-radius: 50%;
    animation: spin-b-rnzcckatsl 0.7s linear infinite;
    margin: 0 auto var(--space-3);
}

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

.empty-state i[b-rnzcckatsl] {
    font-size: 3rem;
    display: block;
    margin-bottom: var(--space-3);
    opacity: 0.4;
}

/* Table */
.inquiries-table-wrap[b-rnzcckatsl] {
    overflow-x: auto;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
}

.inquiries-table[b-rnzcckatsl] {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--text-sm);
}

.inquiries-table thead tr[b-rnzcckatsl] {
    background: var(--color-surface);
    border-bottom: 2px solid var(--color-border);
}

.inquiries-table th[b-rnzcckatsl] {
    padding: var(--space-3) var(--space-4);
    text-align: left;
    font-weight: 600;
    color: var(--color-text-secondary);
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    white-space: nowrap;
}

.inquiries-table td[b-rnzcckatsl] {
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--color-border-light, var(--color-border));
    vertical-align: middle;
}

.inquiry-row[b-rnzcckatsl] {
    cursor: pointer;
    transition: background 0.1s;
}

.inquiry-row:hover[b-rnzcckatsl] { background: var(--color-surface); }

.inquiry-row.expanded[b-rnzcckatsl] { background: var(--color-surface); }

.tracking-id[b-rnzcckatsl] {
    font-family: monospace;
    font-size: var(--text-xs);
    color: var(--color-text-secondary);
    white-space: nowrap;
}

.from-cell[b-rnzcckatsl] { min-width: 160px; }

.visitor-name[b-rnzcckatsl] {
    display: block;
    font-weight: 600;
    color: var(--color-text-primary);
}

.visitor-email[b-rnzcckatsl] {
    display: block;
    font-size: var(--text-xs);
    color: var(--color-text-muted);
}

.subject-cell[b-rnzcckatsl] {
    max-width: 240px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Status badges */
.status-badge[b-rnzcckatsl] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: var(--text-xs);
    font-weight: 600;
    white-space: nowrap;
}

.status-open[b-rnzcckatsl]       { background: #fef3c7; color: #92400e; }
.status-inprogress[b-rnzcckatsl] { background: #dbeafe; color: #1e40af; }
.status-resolved[b-rnzcckatsl]   { background: #d1fae5; color: #065f46; }
.status-closed[b-rnzcckatsl]     { background: var(--color-surface); color: var(--color-text-muted); border: 1px solid var(--color-border); }

.verified-cell[b-rnzcckatsl] { text-align: center; }
.date-cell[b-rnzcckatsl] { white-space: nowrap; color: var(--color-text-secondary); font-size: var(--text-xs); }

.actions-cell[b-rnzcckatsl] { width: 60px; text-align: center; }

.btn-expand[b-rnzcckatsl] {
    background: none;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 4px 10px;
    color: var(--color-text-secondary);
    cursor: pointer;
    font-size: var(--text-xs);
    transition: all 0.15s;
}

.btn-expand:hover[b-rnzcckatsl] {
    background: var(--color-primary);
    color: white;
    border-color: var(--color-primary);
}

/* Expanded detail row */
.detail-row td[b-rnzcckatsl] {
    padding: 0;
    background: var(--color-surface);
    border-bottom: 2px solid var(--color-primary);
}

.detail-panel[b-rnzcckatsl] {
    padding: var(--space-5);
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.detail-message label[b-rnzcckatsl],
.detail-section label[b-rnzcckatsl],
.detail-origin label[b-rnzcckatsl],
.detail-grid div label[b-rnzcckatsl] {
    display: block;
    font-size: var(--text-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-text-muted);
    margin-bottom: var(--space-1);
}

.message-text[b-rnzcckatsl],
.admin-notes-text[b-rnzcckatsl] {
    margin: 0;
    color: var(--color-text-primary);
    line-height: 1.6;
}

.detail-grid[b-rnzcckatsl] {
    display: flex;
    gap: var(--space-6);
    flex-wrap: wrap;
}

/* Update status section */
.update-section[b-rnzcckatsl] {
    border-top: 1px dashed var(--color-border);
    padding-top: var(--space-4);
}

.update-row[b-rnzcckatsl] {
    display: flex;
    gap: var(--space-4);
    align-items: flex-end;
    flex-wrap: wrap;
}

.form-group[b-rnzcckatsl] {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.form-group label[b-rnzcckatsl] {
    font-size: var(--text-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-text-muted);
}

.status-select[b-rnzcckatsl] {
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    font-size: var(--text-sm);
    background: white;
    cursor: pointer;
    min-width: 160px;
}

.notes-group[b-rnzcckatsl] { flex: 1; min-width: 200px; }

.notes-input[b-rnzcckatsl] {
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    font-size: var(--text-sm);
    resize: vertical;
    width: 100%;
    box-sizing: border-box;
    font-family: inherit;
}

.btn-save[b-rnzcckatsl] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-5);
    background: var(--color-primary);
    color: white;
    border: none;
    border-radius: var(--radius-md);
    font-size: var(--text-sm);
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: opacity 0.15s;
    height: 38px;
}

.btn-save:hover:not(:disabled)[b-rnzcckatsl] { opacity: 0.9; }
.btn-save:disabled[b-rnzcckatsl] { opacity: 0.6; cursor: not-allowed; }

.save-success[b-rnzcckatsl] {
    font-size: var(--text-sm);
    color: #065f46;
    margin: var(--space-2) 0 0;
}

/* Pagination */
.pagination[b-rnzcckatsl] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-4);
    margin-top: var(--space-5);
}

.btn-page[b-rnzcckatsl] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-4);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    font-size: var(--text-sm);
    cursor: pointer;
    transition: all 0.15s;
}

.btn-page:hover:not(:disabled)[b-rnzcckatsl] {
    background: var(--color-primary);
    color: white;
    border-color: var(--color-primary);
}

.btn-page:disabled[b-rnzcckatsl] { opacity: 0.4; cursor: not-allowed; }

.page-info[b-rnzcckatsl] {
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
}

/* Mobile responsive */
@media (max-width: 768px) {
    .inquiries-page[b-rnzcckatsl] { padding: var(--space-4); }

    .page-header[b-rnzcckatsl] { flex-direction: column; }

    .inquiries-table th:nth-child(5)[b-rnzcckatsl],
    .inquiries-table td:nth-child(5)[b-rnzcckatsl],
    .inquiries-table th:nth-child(6)[b-rnzcckatsl],
    .inquiries-table td:nth-child(6)[b-rnzcckatsl] { display: none; }

    .update-row[b-rnzcckatsl] { flex-direction: column; }

    .status-select[b-rnzcckatsl] { min-width: unset; width: 100%; }
}
/* /Pages/SuperAdmin/MasterData/Index.razor.rz.scp.css */
/* =====================================================
   Index.razor.css — SuperAdmin Master Data Setup page
   ===================================================== */

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

.header-left[b-1dymmdo86t] {
    display: flex;
    align-items: center;
    gap: 0.875rem;
}

.header-icon[b-1dymmdo86t] {
    font-size: 1.75rem;
    color: var(--color-primary-600);
}

.page-title[b-1dymmdo86t] {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--color-neutral-900);
    margin: 0;
}

.page-subtitle[b-1dymmdo86t] {
    font-size: 0.875rem;
    color: var(--color-neutral-500);
    margin: 0;
}

/* ── Status Badge ─────────────────────────────────── */
.status-badge[b-1dymmdo86t] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.35rem 0.75rem;
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 600;
}

/* ── Seed All Hero Banner ─────────────────────────── */
.seed-all-banner[b-1dymmdo86t] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    background: linear-gradient(135deg, var(--color-primary-700) 0%, var(--color-primary-900) 100%);
    border-radius: var(--radius-lg);
    padding: 1.5rem 2rem;
    margin-bottom: 1.75rem;
    flex-wrap: wrap;
}

.seed-all-left[b-1dymmdo86t] {
    flex: 1;
    min-width: 0;
}

.seed-all-title[b-1dymmdo86t] {
    font-size: 1.1rem;
    font-weight: 700;
    color: #fff;
    margin-bottom: 0.75rem;
}

.seed-all-title i[b-1dymmdo86t] {
    color: var(--color-warning-400);
    margin-right: 0.4rem;
}

.seed-all-steps[b-1dymmdo86t] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-bottom: 0.6rem;
}

.step[b-1dymmdo86t] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    background: rgba(255,255,255,0.12);
    padding: 0.25rem 0.65rem;
    border-radius: 999px;
    font-size: 0.8rem;
    color: #fff;
    font-weight: 500;
}

.step-num[b-1dymmdo86t] {
    background: var(--color-warning-400);
    color: var(--color-neutral-900);
    width: 1.2rem;
    height: 1.2rem;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    font-weight: 800;
}

.step-arrow[b-1dymmdo86t] {
    color: rgba(255,255,255,0.4);
    font-size: 0.75rem;
}

.seed-all-note[b-1dymmdo86t] {
    font-size: 0.78rem;
    color: rgba(255,255,255,0.7);
}

.seed-all-note strong[b-1dymmdo86t] {
    color: var(--color-warning-300);
}

.seed-all-note code[b-1dymmdo86t] {
    background: rgba(255,255,255,0.15);
    padding: 0.1rem 0.35rem;
    border-radius: 4px;
    color: #fff;
    font-size: 0.78rem;
}

.btn-seed-all[b-1dymmdo86t] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.8rem 2rem;
    background: #fff;
    color: var(--color-primary-700);
    border: none;
    border-radius: var(--radius-md);
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
    transition: transform 0.1s, box-shadow 0.1s;
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}

.btn-seed-all:hover:not(:disabled)[b-1dymmdo86t] {
    transform: translateY(-1px);
    box-shadow: 0 4px 16px rgba(0,0,0,0.25);
}

.btn-seed-all:disabled[b-1dymmdo86t] {
    opacity: 0.7;
    cursor: not-allowed;
}

/* ── Order items in demo card ─────────────────────── */
.order-item[b-1dymmdo86t] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.order-badge[b-1dymmdo86t] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.3rem;
    height: 1.3rem;
    border-radius: 50%;
    background: var(--color-primary-100);
    color: var(--color-primary-700);
    font-size: 0.68rem;
    font-weight: 800;
    flex-shrink: 0;
}

.status-ok[b-1dymmdo86t] {
    background: var(--color-success-50);
    color: var(--color-success-700);
    border: 1px solid var(--color-success-200);
}

.status-warn[b-1dymmdo86t] {
    background: var(--color-warning-50);
    color: var(--color-warning-700);
    border: 1px solid var(--color-warning-200);
}

/* ── Target Database Selector ────────────────────── */
.database-selector[b-1dymmdo86t] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(16rem, 28rem) minmax(14rem, 24rem);
    align-items: center;
    gap: var(--spacing-4);
    margin-bottom: var(--spacing-5);
    padding: var(--spacing-4);
    border: 1px solid var(--color-neutral-200);
    border-radius: var(--radius-md);
    background: var(--color-white);
}

.database-selector-heading[b-1dymmdo86t] {
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
    min-width: 0;
}

.database-selector-heading > i[b-1dymmdo86t] {
    color: var(--color-primary-600);
    font-size: 1.25rem;
}

.database-selector-heading h2[b-1dymmdo86t] {
    margin: 0;
    color: var(--color-neutral-900);
    font-size: 1rem;
    font-weight: 700;
}

.database-selector-heading p[b-1dymmdo86t] {
    margin: var(--spacing-1) 0 0;
    color: var(--color-neutral-500);
    font-size: 0.78rem;
}

.database-selector-control[b-1dymmdo86t] {
    display: grid;
    gap: var(--spacing-1);
}

.database-selector-control label[b-1dymmdo86t],
.database-connection-detail span[b-1dymmdo86t],
.database-connection-detail small[b-1dymmdo86t] {
    color: var(--color-neutral-500);
    font-size: 0.75rem;
}

.database-selector-control label[b-1dymmdo86t] {
    font-weight: 700;
}

.database-profile-input[b-1dymmdo86t] {
    width: 100%;
    min-height: 2.75rem;
    padding: var(--spacing-2) var(--spacing-3);
    border: 1px solid var(--color-neutral-300);
    border-radius: var(--radius-sm);
    background: var(--color-white);
    color: var(--color-neutral-900);
}

.database-profile-input:focus[b-1dymmdo86t] {
    outline: 2px solid var(--color-primary-200);
    border-color: var(--color-primary-500);
}

.database-profile-input:disabled[b-1dymmdo86t] {
    opacity: 0.65;
    cursor: not-allowed;
}

.database-connection-detail[b-1dymmdo86t] {
    display: grid;
    gap: var(--spacing-1);
    min-width: 0;
    padding: var(--spacing-3);
    border: 1px solid var(--color-neutral-200);
    border-radius: var(--radius-sm);
    background: var(--color-neutral-50);
}

.database-connection-detail strong[b-1dymmdo86t] {
    overflow-wrap: anywhere;
    color: var(--color-neutral-900);
    font-family: var(--font-family-mono);
    font-size: 0.82rem;
}

/* ── Step Result Panel (shown after Seed All runs) ── */
.step-results-panel[b-1dymmdo86t] {
    border-radius: var(--radius-md);
    padding: 1rem 1.25rem;
    margin-bottom: 1.75rem;
    border: 1px solid transparent;
}

.panel-success[b-1dymmdo86t] {
    background: var(--color-success-50);
    border-color: var(--color-success-200);
}

.panel-error[b-1dymmdo86t] {
    background: var(--color-error-50, #fff5f5);
    border-color: var(--color-error-200, #fca5a5);
}

.step-results-title[b-1dymmdo86t] {
    font-weight: 700;
    font-size: 0.9rem;
    margin-bottom: 0.75rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--color-neutral-800);
}

.panel-success .step-results-title[b-1dymmdo86t] { color: var(--color-success-800); }
.panel-error   .step-results-title[b-1dymmdo86t] { color: var(--color-error-700, #b91c1c); }

.step-results-list[b-1dymmdo86t] {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.step-result-row[b-1dymmdo86t] {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    font-size: 0.83rem;
}

.sr-label[b-1dymmdo86t] {
    font-weight: 600;
    width: 200px;
    flex-shrink: 0;
    color: var(--color-neutral-700);
}

.sr-detail[b-1dymmdo86t] {
    color: var(--color-neutral-500);
    font-size: 0.8rem;
}

.sr-ok[b-1dymmdo86t]      { color: var(--color-success-600); }
.sr-fail[b-1dymmdo86t]    { color: var(--color-error-600, #dc2626); }
.sr-pending[b-1dymmdo86t] { color: var(--color-neutral-300); }

/* step badge colouring when a result exists */
.step.step-done[b-1dymmdo86t]   { background: rgba(var(--color-success-500-rgb, 34,197,94), 0.2); }
.step.step-failed[b-1dymmdo86t] { background: rgba(220,38,38,0.2); }

/* ── Counts Grid ──────────────────────────────────── */
.counts-grid[b-1dymmdo86t] {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 0.75rem;
    margin-bottom: 1.75rem;
}

.count-card[b-1dymmdo86t] {
    background: var(--color-white);
    border: 1px solid var(--color-neutral-100);
    border-radius: var(--radius-lg);
    padding: 1rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.count-icon[b-1dymmdo86t] {
    font-size: 1.25rem;
    color: var(--color-primary-500);
    flex-shrink: 0;
}

.count-value[b-1dymmdo86t] {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--color-neutral-900);
    line-height: 1;
}

.count-label[b-1dymmdo86t] {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--color-neutral-700);
    margin-top: 0.2rem;
}

.count-fixed[b-1dymmdo86t] {
    font-size: 0.7rem;
    color: var(--color-neutral-400);
    margin-top: 0.1rem;
}

/* ── Actions Grid ─────────────────────────────────── */
.actions-grid[b-1dymmdo86t] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem;
}

/* ── Action Card ──────────────────────────────────── */
.action-card[b-1dymmdo86t] {
    background: var(--color-white);
    border: 1px solid var(--color-neutral-150);
    border-radius: var(--radius-xl);
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.action-card-header[b-1dymmdo86t] {
    display: flex;
    align-items: flex-start;
    gap: 0.875rem;
}

.action-card-header > .fas[b-1dymmdo86t] {
    font-size: 1.5rem;
    color: var(--color-primary-500);
    margin-top: 0.15rem;
    flex-shrink: 0;
}

.action-title[b-1dymmdo86t] {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--color-neutral-900);
    margin: 0 0 0.25rem;
}

.action-desc[b-1dymmdo86t] {
    font-size: 0.825rem;
    color: var(--color-neutral-500);
    margin: 0;
    line-height: 1.5;
}

/* ── What Seeds List ──────────────────────────────── */
.what-seeds[b-1dymmdo86t] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.35rem;
}

.seed-item[b-1dymmdo86t] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.8rem;
    color: var(--color-neutral-700);
}

.seed-item .fas[b-1dymmdo86t] {
    color: var(--color-success-500);
    font-size: 0.7rem;
    flex-shrink: 0;
}

.seed-item .fa-user[b-1dymmdo86t] {
    color: var(--color-primary-400);
}

/* ── Tenant Input ─────────────────────────────────── */
.tenant-input-row[b-1dymmdo86t] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.input-label[b-1dymmdo86t] {
    font-size: 0.825rem;
    font-weight: 600;
    color: var(--color-neutral-700);
    flex-shrink: 0;
}

.tenant-input[b-1dymmdo86t] {
    width: 90px;
    padding: 0.4rem 0.6rem;
    border: 1px solid var(--color-neutral-200);
    border-radius: var(--radius-md);
    font-size: 0.875rem;
    color: var(--color-neutral-900);
}

.input-hint[b-1dymmdo86t] {
    font-size: 0.75rem;
    color: var(--color-neutral-400);
}

/* ── Action Footer ────────────────────────────────── */
.action-footer[b-1dymmdo86t] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-top: auto;
}

/* ── Buttons ──────────────────────────────────────── */
.btn-primary[b-1dymmdo86t] {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.5rem 1.1rem;
    background: var(--color-primary-600);
    color: var(--color-white);
    border: none;
    border-radius: var(--radius-md);
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s;
}

.btn-primary:hover:not(:disabled)[b-1dymmdo86t] {
    background: var(--color-primary-700);
}

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

.btn-danger-outline[b-1dymmdo86t] {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.5rem 1rem;
    background: transparent;
    color: var(--color-error-600);
    border: 1px solid var(--color-error-300);
    border-radius: var(--radius-md);
    font-size: 0.825rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s;
}

.btn-danger-outline:hover:not(:disabled)[b-1dymmdo86t] {
    background: var(--color-error-50);
}

.btn-danger-outline:disabled[b-1dymmdo86t] {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ── Responsive ───────────────────────────────────── */
@media (max-width: 1100px) {
    .database-selector[b-1dymmdo86t] {
        grid-template-columns: minmax(0, 1fr) minmax(16rem, 1fr);
    }

    .database-connection-detail[b-1dymmdo86t] {
        grid-column: 1 / -1;
    }

    .counts-grid[b-1dymmdo86t] {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 768px) {
    .database-selector[b-1dymmdo86t] {
        grid-template-columns: 1fr;
    }

    .database-connection-detail[b-1dymmdo86t] {
        grid-column: auto;
    }

    .actions-grid[b-1dymmdo86t] {
        grid-template-columns: 1fr;
    }

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

    .what-seeds[b-1dymmdo86t] {
        grid-template-columns: 1fr;
    }

    .page-header[b-1dymmdo86t] {
        flex-direction: column;
        align-items: flex-start;
    }
}

@media (max-width: 480px) {
    .counts-grid[b-1dymmdo86t] {
        grid-template-columns: 1fr 1fr;
    }
}
/* /Pages/SuperAdmin/MathAudit/Index.razor.rz.scp.css */
/* Math Audit Page — Index.razor.css */

/* ── Page layout ──────────────────────────────────────────────────────────── */
.audit-page[b-9bzhl4g4xg] {
    padding: 1.5rem;
    max-width: 1400px;
    margin: 0 auto;
}

.page-header[b-9bzhl4g4xg] {
    margin-bottom: 1.25rem;
}

.page-title[b-9bzhl4g4xg] {
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--color-neutral-900);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
}

.page-subtitle[b-9bzhl4g4xg] {
    font-size: 0.85rem;
    color: var(--color-neutral-500);
    margin: 0.2rem 0 0;
}

/* ── Stat cards ───────────────────────────────────────────────────────────── */
.stat-row[b-9bzhl4g4xg] {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-bottom: 1.25rem;
}

.stat-card[b-9bzhl4g4xg] {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0.75rem 1.25rem;
    border-radius: 8px;
    border: 1px solid var(--color-neutral-200);
    background: var(--color-neutral-0, #fff);
    cursor: pointer;
    transition: box-shadow 0.15s;
    min-width: 120px;
}

.stat-card:hover[b-9bzhl4g4xg] { box-shadow: 0 2px 8px rgba(0,0,0,0.08); }

.stat-num[b-9bzhl4g4xg] {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--color-neutral-900);
}

.stat-label[b-9bzhl4g4xg] {
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-neutral-500);
    margin-top: 0.2rem;
}

.stat-total[b-9bzhl4g4xg]  { border-color: var(--color-neutral-300); }
.stat-ok[b-9bzhl4g4xg]     { border-color: #16a34a; }
.stat-fix[b-9bzhl4g4xg]    { border-color: #ca8a04; }
.stat-review[b-9bzhl4g4xg] { border-color: #dc2626; }
.stat-nomath[b-9bzhl4g4xg] { border-color: var(--color-neutral-300); }

/* ── Filter bar ───────────────────────────────────────────────────────────── */
.filter-bar[b-9bzhl4g4xg] {
    background: var(--color-neutral-0, #fff);
    border: 1px solid var(--color-neutral-200);
    border-radius: 8px;
    padding: 0.75rem 1rem;
    margin-bottom: 1rem;
}

.filter-row[b-9bzhl4g4xg] {
    display: flex;
    gap: 0.6rem;
    align-items: center;
    flex-wrap: wrap;
}

.filter-select[b-9bzhl4g4xg] {
    height: 36px;
    border: 1px solid var(--color-neutral-300);
    border-radius: 6px;
    padding: 0 0.75rem;
    font-size: 0.85rem;
    color: var(--color-neutral-800);
    background: var(--color-neutral-0, #fff);
    min-width: 180px;
}

.status-msg[b-9bzhl4g4xg] {
    margin-top: 0.5rem;
    font-size: 0.85rem;
    padding: 0.4rem 0.75rem;
    border-radius: 6px;
}

.status-msg.success[b-9bzhl4g4xg] { background: #f0fdf4; color: #16a34a; border: 1px solid #bbf7d0; }
.status-msg.error[b-9bzhl4g4xg]   { background: #fef2f2; color: #dc2626; border: 1px solid #fecaca; }

/* ── Results table ────────────────────────────────────────────────────────── */
.results-table-wrap[b-9bzhl4g4xg] {
    overflow-x: auto;
    border: 1px solid var(--color-neutral-200);
    border-radius: 8px;
    background: var(--color-neutral-0, #fff);
}

.audit-table[b-9bzhl4g4xg] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
}

.audit-table thead[b-9bzhl4g4xg] {
    background: var(--color-neutral-50, #f9fafb);
    border-bottom: 1px solid var(--color-neutral-200);
}

.audit-table th[b-9bzhl4g4xg] {
    padding: 0.6rem 0.875rem;
    text-align: left;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-neutral-500);
    white-space: nowrap;
}

.audit-table td[b-9bzhl4g4xg] {
    padding: 0.5rem 0.875rem;
    border-bottom: 1px solid var(--color-neutral-100);
    vertical-align: middle;
}

.audit-row:last-child td[b-9bzhl4g4xg] { border-bottom: none; }

/* Row highlight by status */
.row-fixable td:first-child[b-9bzhl4g4xg] { border-left: 3px solid #ca8a04; }
.row-review  td:first-child[b-9bzhl4g4xg] { border-left: 3px solid #dc2626; }
.row-ok      td:first-child[b-9bzhl4g4xg] { border-left: 3px solid #16a34a; }
.row-nomath  td:first-child[b-9bzhl4g4xg] { border-left: 3px solid var(--color-neutral-300); }

.col-preview[b-9bzhl4g4xg] { max-width: 360px; }

/* Rendered math preview — replaces the old plain-text .preview-text truncation */
.preview-math-wrap[b-9bzhl4g4xg] {
    font-size: 0.83rem;
    color: var(--color-neutral-800);
    line-height: 1.55;
    max-height: 5.5em;
    overflow: hidden;
    /* fade out bottom so truncated math doesn't look broken */
    -webkit-mask-image: linear-gradient(to bottom, black 55%, transparent 100%);
    mask-image: linear-gradient(to bottom, black 55%, transparent 100%);
}

/* Proposed "After fix" preview shown below current text for AutoFixable rows */
.fix-preview-box[b-9bzhl4g4xg] {
    margin-top: 0.45rem;
    padding: 0.35rem 0.55rem;
    background: #f0fdf4;
    border-left: 2px solid #16a34a;
    border-radius: 3px;
}

.fix-label[b-9bzhl4g4xg] {
    display: block;
    font-size: 0.63rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #16a34a;
    margin-bottom: 0.2rem;
}

.fix-math-content[b-9bzhl4g4xg] {
    font-size: 0.8rem;
    color: var(--color-neutral-800);
    line-height: 1.5;
    max-height: 3.5em;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(to bottom, black 50%, transparent 100%);
    mask-image: linear-gradient(to bottom, black 50%, transparent 100%);
}

.q-id[b-9bzhl4g4xg] {
    font-size: 0.7rem;
    color: var(--color-neutral-400);
    margin-left: 0.25rem;
}

.q-type-badge[b-9bzhl4g4xg] {
    font-size: 0.7rem;
    background: var(--color-neutral-100);
    color: var(--color-neutral-600);
    border-radius: 4px;
    padding: 0.15rem 0.45rem;
    white-space: nowrap;
}

.col-issue[b-9bzhl4g4xg] {
    font-size: 0.78rem;
    color: var(--color-neutral-600);
    max-width: 260px;
}

/* Status badges */
.status-badge[b-9bzhl4g4xg] {
    display: inline-flex;
    align-items: center;
    font-size: 0.72rem;
    font-weight: 600;
    border-radius: 4px;
    padding: 0.2rem 0.5rem;
    white-space: nowrap;
}

.badge-ok[b-9bzhl4g4xg]      { background: #f0fdf4; color: #16a34a; }
.badge-fixable[b-9bzhl4g4xg] { background: #fefce8; color: #ca8a04; }
.badge-review[b-9bzhl4g4xg]  { background: #fef2f2; color: #dc2626; }
.badge-nomath[b-9bzhl4g4xg]  { background: var(--color-neutral-100); color: var(--color-neutral-500); }

/* Action buttons */
.col-actions[b-9bzhl4g4xg] { white-space: nowrap; }

.btn-fix-single[b-9bzhl4g4xg] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.78rem;
    font-weight: 600;
    padding: 0.3rem 0.65rem;
    border-radius: 5px;
    border: 1px solid #ca8a04;
    background: #fefce8;
    color: #92400e;
    cursor: pointer;
    transition: background 0.15s;
}

.btn-fix-single:hover:not(:disabled)[b-9bzhl4g4xg] { background: #fef08a; }

.btn-edit[b-9bzhl4g4xg] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.78rem;
    font-weight: 600;
    padding: 0.3rem 0.65rem;
    border-radius: 5px;
    border: 1px solid #dc2626;
    background: #fef2f2;
    color: #991b1b;
    cursor: pointer;
    transition: background 0.15s;
}

.btn-edit:hover[b-9bzhl4g4xg] { background: #fee2e2; }

.btn-warning[b-9bzhl4g4xg] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.85rem;
    font-weight: 600;
    padding: 0.4rem 0.875rem;
    border-radius: 6px;
    border: 1px solid #ca8a04;
    background: #fefce8;
    color: #92400e;
    cursor: pointer;
    transition: background 0.15s;
    height: 36px;
}

.btn-warning:hover:not(:disabled)[b-9bzhl4g4xg] { background: #fef08a; }

/* ── Pagination ───────────────────────────────────────────────────────────── */
.pagination-row[b-9bzhl4g4xg] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    padding: 0.75rem 0;
}

.page-info[b-9bzhl4g4xg] {
    font-size: 0.82rem;
    color: var(--color-neutral-600);
}

.btn-page[b-9bzhl4g4xg] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.82rem;
    padding: 0.35rem 0.75rem;
    border: 1px solid var(--color-neutral-300);
    border-radius: 6px;
    background: var(--color-neutral-0, #fff);
    cursor: pointer;
}

.btn-page:disabled[b-9bzhl4g4xg] { opacity: 0.4; cursor: default; }

/* ── Manual editor modal ──────────────────────────────────────────────────── */
.modal-overlay[b-9bzhl4g4xg] {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 1rem;
}

.editor-modal[b-9bzhl4g4xg] {
    background: var(--color-neutral-0, #fff);
    border-radius: 12px;
    width: 100%;
    max-width: 960px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 20px 60px rgba(0,0,0,0.2);
}

.editor-header[b-9bzhl4g4xg] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--color-neutral-200);
}

.editor-header h2[b-9bzhl4g4xg] {
    font-size: 1.05rem;
    font-weight: 700;
    margin: 0;
    color: var(--color-neutral-900);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.btn-close[b-9bzhl4g4xg] {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--color-neutral-500);
    font-size: 1rem;
    padding: 0.25rem;
}

.editor-body[b-9bzhl4g4xg] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    padding: 1rem 1.25rem;
    overflow-y: auto;
    flex: 1;
}

.editor-label[b-9bzhl4g4xg] {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-neutral-500);
    display: block;
    margin-bottom: 0.3rem;
}

.editor-textarea[b-9bzhl4g4xg] {
    width: 100%;
    border: 1px solid var(--color-neutral-300);
    border-radius: 6px;
    padding: 0.5rem 0.65rem;
    font-size: 0.85rem;
    font-family: 'Menlo', 'Monaco', 'Cascadia Code', monospace;
    color: var(--color-neutral-800);
    resize: vertical;
    box-sizing: border-box;
}

.editor-textarea:focus[b-9bzhl4g4xg] {
    outline: none;
    border-color: var(--color-primary-500, #6366f1);
    box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.15);
}

.editor-hint[b-9bzhl4g4xg] {
    margin-top: 0.6rem;
    font-size: 0.75rem;
    color: var(--color-neutral-500);
    background: var(--color-neutral-50, #f9fafb);
    border-radius: 6px;
    padding: 0.45rem 0.65rem;
}

.editor-hint code[b-9bzhl4g4xg] {
    background: var(--color-neutral-200);
    border-radius: 3px;
    padding: 0 0.3rem;
    font-size: 0.73rem;
}

.preview-box[b-9bzhl4g4xg] {
    background: var(--color-neutral-50, #f9fafb);
    border: 1px solid var(--color-neutral-200);
    border-radius: 8px;
    padding: 0.875rem 1rem;
    min-height: 200px;
}

.preview-section-label[b-9bzhl4g4xg] {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-neutral-400);
    margin-bottom: 0.35rem;
}

.preview-content[b-9bzhl4g4xg] {
    font-size: 0.9rem;
    line-height: 1.6;
    color: var(--color-neutral-900);
}

.editor-footer[b-9bzhl4g4xg] {
    display: flex;
    gap: 0.6rem;
    padding: 0.875rem 1.25rem;
    border-top: 1px solid var(--color-neutral-200);
}

/* Shared button base reset (uses design tokens from parent) */
.btn-primary[b-9bzhl4g4xg], .btn-secondary[b-9bzhl4g4xg], .btn-ghost[b-9bzhl4g4xg] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.85rem;
    font-weight: 600;
    padding: 0.45rem 1rem;
    border-radius: 6px;
    cursor: pointer;
    border: 1px solid transparent;
    height: 36px;
}

.btn-primary[b-9bzhl4g4xg]   { background: var(--color-primary-600, #4f46e5); color: #fff; border-color: var(--color-primary-600, #4f46e5); }
.btn-primary:hover:not(:disabled)[b-9bzhl4g4xg] { background: var(--color-primary-700, #4338ca); }
.btn-secondary[b-9bzhl4g4xg] { background: var(--color-neutral-0, #fff); color: var(--color-neutral-700); border-color: var(--color-neutral-300); }
.btn-secondary:hover[b-9bzhl4g4xg] { background: var(--color-neutral-50); }
.btn-ghost[b-9bzhl4g4xg]     { background: none; color: var(--color-neutral-600); border-color: transparent; }
.btn-ghost:hover[b-9bzhl4g4xg] { background: var(--color-neutral-100); }

/* Shared spinner */
.spinner[b-9bzhl4g4xg] {
    width: 32px; height: 32px;
    border: 3px solid var(--color-neutral-200);
    border-top-color: var(--color-primary-500, #6366f1);
    border-radius: 50%;
    animation: spin-b-9bzhl4g4xg 0.7s linear infinite;
    margin: 1rem auto;
}

.spinner-sm[b-9bzhl4g4xg] {
    display: inline-block;
    width: 14px; height: 14px;
    border: 2px solid rgba(255,255,255,0.4);
    border-top-color: currentColor;
    border-radius: 50%;
    animation: spin-b-9bzhl4g4xg 0.7s linear infinite;
}

.loading-center[b-9bzhl4g4xg] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: 3rem 0;
    color: var(--color-neutral-500);
    font-size: 0.85rem;
}

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

/* ── Apply-All progress banner ──────────────────────────────────────────────── */
.apply-all-banner[b-9bzhl4g4xg] {
    display: flex;
    align-items: center;
    gap: 1rem;
    background: #fffbeb;
    border: 1px solid #fbbf24;
    border-radius: 8px;
    padding: 0.875rem 1.25rem;
    margin-bottom: 1rem;
    animation: slide-in-b-9bzhl4g4xg 0.25s ease;
    position: relative;
    overflow: hidden;
}

/* sweep shimmer across the banner */
.apply-all-banner[b-9bzhl4g4xg]::after {
    content: '';
    position: absolute;
    top: 0; left: -100%; width: 60%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(251,191,36,0.18), transparent);
    animation: shimmer-sweep-b-9bzhl4g4xg 1.6s ease-in-out infinite;
}

.apply-all-spinner[b-9bzhl4g4xg] {
    width: 22px;
    height: 22px;
    border: 3px solid #fde68a;
    border-top-color: #d97706;
    border-radius: 50%;
    animation: spin-b-9bzhl4g4xg 0.65s linear infinite;
    flex-shrink: 0;
}

.apply-all-text[b-9bzhl4g4xg] {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    flex: 1;
}

.apply-all-text strong[b-9bzhl4g4xg] {
    font-size: 0.875rem;
    font-weight: 700;
    color: #92400e;
}

.apply-all-text span[b-9bzhl4g4xg] {
    font-size: 0.78rem;
    color: #b45309;
}

/* Animated bouncing dots */
.apply-all-dots[b-9bzhl4g4xg] {
    display: flex;
    gap: 4px;
    align-items: center;
}

.apply-all-dots span[b-9bzhl4g4xg] {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #d97706;
    animation: dot-bounce-b-9bzhl4g4xg 1.2s ease-in-out infinite;
}

.apply-all-dots span:nth-child(2)[b-9bzhl4g4xg] { animation-delay: 0.2s; }
.apply-all-dots span:nth-child(3)[b-9bzhl4g4xg] { animation-delay: 0.4s; }

@keyframes dot-bounce-b-9bzhl4g4xg {
    0%, 80%, 100% { transform: scale(0.6); opacity: 0.5; }
    40%            { transform: scale(1);   opacity: 1; }
}

@keyframes shimmer-sweep-b-9bzhl4g4xg {
    0%   { left: -100%; }
    100% { left: 160%; }
}

@keyframes slide-in-b-9bzhl4g4xg {
    from { opacity: 0; transform: translateY(-8px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ── Fixable row pulse during apply-all ─────────────────────────────────────── */
.row-being-fixed td[b-9bzhl4g4xg] {
    animation: row-pulse-b-9bzhl4g4xg 1.1s ease-in-out infinite;
}

@keyframes row-pulse-b-9bzhl4g4xg {
    0%   { background: transparent; }
    50%  { background: #fefce8; }
    100% { background: transparent; }
}

/* btn-warning: pulsing opacity + cursor:wait when disabled (apply-all running) */
.btn-warning:disabled[b-9bzhl4g4xg] {
    animation: btn-loading-pulse-b-9bzhl4g4xg 1.1s ease-in-out infinite;
    cursor: wait;
    opacity: 1; /* override default disabled dimming — let animation handle it */
}

@keyframes btn-loading-pulse-b-9bzhl4g4xg {
    0%   { opacity: 1; }
    50%  { opacity: 0.55; }
    100% { opacity: 1; }
}

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
    .editor-body[b-9bzhl4g4xg]  { grid-template-columns: 1fr; }
    .stat-row[b-9bzhl4g4xg]     { gap: 0.5rem; }
    .stat-card[b-9bzhl4g4xg]    { min-width: 90px; padding: 0.6rem 0.75rem; }
    .apply-all-dots[b-9bzhl4g4xg] { display: none; }
}
/* /Pages/SuperAdmin/MicroChapters/MicroChapterImport.razor.rz.scp.css */
/* ============================================================
   Micro Chapter Import — Import.razor.css
   4-step wizard: Select Scope → Upload → Preview & Validate → Success
   ============================================================ */

/* Page wrapper */
.mci-page[b-1zya3ubh88] {
    padding: 1.5rem;
    max-width: 1040px;
    margin: 0 auto;
}

/* ── Header ─────────────────────────────────────────── */
.page-header[b-1zya3ubh88] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.5rem;
}
.page-header-left h1[b-1zya3ubh88] {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--color-neutral-900);
    margin-bottom: 0.25rem;
}
.page-header-left p[b-1zya3ubh88] {
    font-size: 0.875rem;
    color: var(--color-neutral-500);
    margin: 0;
}
.btn-back[b-1zya3ubh88] {
    font-size: 0.85rem;
    color: var(--color-primary-600);
    text-decoration: none;
    white-space: nowrap;
    padding: 0.35rem 0.6rem;
    border-radius: 8px;
}
.btn-back:hover[b-1zya3ubh88] { background: rgba(0, 0, 0, 0.04); }

/* ── Step progress bar ──────────────────────────────── */
.steps-bar[b-1zya3ubh88] {
    display: flex;
    align-items: center;
    margin-bottom: 1.75rem;
    overflow-x: auto;
    padding-bottom: 0.25rem;
}
.step[b-1zya3ubh88] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.3rem;
    flex-shrink: 0;
}
.step-num[b-1zya3ubh88] {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--color-neutral-200);
    color: var(--color-neutral-500);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    font-weight: 700;
    transition: background 0.2s, color 0.2s;
}
.step-label[b-1zya3ubh88] {
    font-size: 0.72rem;
    color: var(--color-neutral-500);
    white-space: nowrap;
}
.step-active .step-num[b-1zya3ubh88] {
    background: var(--color-primary-600);
    color: #fff;
}
.step-active .step-label[b-1zya3ubh88] { color: var(--color-primary-600); font-weight: 600; }
.step-done .step-num[b-1zya3ubh88] {
    background: var(--color-success-600, #16a34a);
    color: #fff;
}
.step-line[b-1zya3ubh88] {
    flex: 1;
    height: 2px;
    min-width: 24px;
    background: var(--color-neutral-200);
    margin: 0 0.5rem;
    margin-bottom: 1.4rem;
}
.step-line-done[b-1zya3ubh88] { background: var(--color-success-600, #16a34a); }

/* ── Loading / cards ────────────────────────────────── */
.loading-block[b-1zya3ubh88] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--color-neutral-500);
    padding: 1rem 0;
    font-size: 0.9rem;
}
.card[b-1zya3ubh88], .step-card[b-1zya3ubh88] {
    background: #fff;
    border: 1px solid var(--color-neutral-200);
    border-radius: 12px;
    padding: 1.5rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}
.step-card h2[b-1zya3ubh88] {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--color-neutral-900);
    margin-bottom: 0.35rem;
}
.step-desc[b-1zya3ubh88] {
    font-size: 0.875rem;
    color: var(--color-neutral-500);
    margin-bottom: 1.25rem;
}
.step-desc code[b-1zya3ubh88] {
    background: var(--color-neutral-100, #f3f4f6);
    padding: 0.1rem 0.35rem;
    border-radius: 4px;
    font-size: 0.8rem;
}

/* ── Form grid / selects ────────────────────────────── */
.form-grid[b-1zya3ubh88] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    margin-bottom: 1.25rem;
}
.form-group[b-1zya3ubh88] { display: flex; flex-direction: column; gap: 0.35rem; }
.form-group label[b-1zya3ubh88] {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--color-neutral-700, #374151);
}
.req[b-1zya3ubh88] { color: var(--color-danger-600, #dc2626); }
.form-select[b-1zya3ubh88] {
    width: 100%;
    padding: 0.55rem 0.7rem;
    border: 1px solid var(--color-neutral-300, #d1d5db);
    border-radius: 8px;
    font-size: 0.9rem;
    background: #fff;
    color: var(--color-neutral-900);
}
.form-select:disabled[b-1zya3ubh88] { background: var(--color-neutral-100, #f3f4f6); color: var(--color-neutral-400); cursor: not-allowed; }
.form-hint[b-1zya3ubh88] { font-size: 0.78rem; color: var(--color-neutral-500); margin: 0.25rem 0; }

/* ── Chapter picker ─────────────────────────────────── */
.chapter-picker[b-1zya3ubh88] { margin: 1rem 0; }
.chapter-picker h3[b-1zya3ubh88] {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--color-neutral-900);
    margin-bottom: 0.6rem;
}
.chapter-list[b-1zya3ubh88] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.6rem;
}
.chapter-radio[b-1zya3ubh88] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 0.75rem;
    border: 1px solid var(--color-neutral-300, #d1d5db);
    border-radius: 10px;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
}
.chapter-radio:hover[b-1zya3ubh88] { border-color: var(--color-primary-600); }
.chapter-radio-selected[b-1zya3ubh88] {
    border-color: var(--color-primary-600);
    background: rgba(20, 184, 166, 0.06);
}
.chapter-radio input[b-1zya3ubh88] { accent-color: var(--color-primary-600); }
.chapter-radio-name[b-1zya3ubh88] {
    flex: 1;
    font-size: 0.88rem;
    color: var(--color-neutral-900);
}
.badge-has[b-1zya3ubh88], .badge-empty[b-1zya3ubh88] {
    font-size: 0.7rem;
    font-weight: 600;
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
    white-space: nowrap;
}
.badge-has[b-1zya3ubh88] { background: rgba(20, 184, 166, 0.12); color: var(--color-primary-700, #0f766e); }
.badge-empty[b-1zya3ubh88] { background: var(--color-neutral-100, #f3f4f6); color: var(--color-neutral-500); }

/* ── Alerts ─────────────────────────────────────────── */
.alert-warn[b-1zya3ubh88], .alert-error[b-1zya3ubh88] {
    padding: 0.7rem 1rem;
    border-radius: 10px;
    font-size: 0.85rem;
    margin: 0.75rem 0;
}
.alert-warn[b-1zya3ubh88] {
    background: rgba(245, 158, 11, 0.1);
    color: #92400e;
    border: 1px solid rgba(245, 158, 11, 0.3);
}
.alert-error[b-1zya3ubh88] {
    background: rgba(220, 38, 38, 0.08);
    color: #991b1b;
    border: 1px solid rgba(220, 38, 38, 0.3);
}
.error-list[b-1zya3ubh88] { margin: 0.4rem 0 0; padding-left: 1.2rem; }

/* File-level error state (chapter not found, no rows parsed) */
.file-error-header[b-1zya3ubh88] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.25rem;
}
.file-error-hint[b-1zya3ubh88] {
    margin: 0.5rem 0 0;
    font-size: 0.8rem;
    color: #7f1d1d;
    opacity: 0.8;
}

/* ── Step actions / buttons ─────────────────────────── */
.step-actions[b-1zya3ubh88] {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    margin-top: 1.5rem;
}
.btn-primary[b-1zya3ubh88], .btn-secondary[b-1zya3ubh88], .btn-import[b-1zya3ubh88], .btn-upload[b-1zya3ubh88] {
    padding: 0.6rem 1.1rem;
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    border: 1px solid transparent;
    transition: background 0.15s, opacity 0.15s;
}
.btn-primary[b-1zya3ubh88] { background: var(--color-primary-600); color: #fff; }
.btn-primary:hover:not(:disabled)[b-1zya3ubh88] { background: var(--color-primary-700, #0f766e); }
.btn-secondary[b-1zya3ubh88] {
    background: #fff;
    color: var(--color-neutral-700, #374151);
    border-color: var(--color-neutral-300, #d1d5db);
}
.btn-secondary:hover:not(:disabled)[b-1zya3ubh88] { background: var(--color-neutral-100, #f3f4f6); }
.btn-import[b-1zya3ubh88] { background: var(--color-success-600, #16a34a); color: #fff; }
.btn-import:hover:not(:disabled)[b-1zya3ubh88] { background: #15803d; }
.btn-upload[b-1zya3ubh88] {
    background: var(--color-primary-600);
    color: #fff;
    display: inline-block;
    margin-top: 0.5rem;
}
.btn-primary:disabled[b-1zya3ubh88], .btn-secondary:disabled[b-1zya3ubh88], .btn-import:disabled[b-1zya3ubh88], .btn-upload:disabled[b-1zya3ubh88] {
    opacity: 0.5;
    cursor: not-allowed;
}
.btn-link[b-1zya3ubh88] {
    background: none;
    border: none;
    color: var(--color-danger-600, #dc2626);
    cursor: pointer;
    font-size: 0.85rem;
    margin-left: 0.5rem;
}

/* ── Template / drop zone ───────────────────────────── */
.template-row[b-1zya3ubh88] { margin-bottom: 1rem; }
.drop-zone[b-1zya3ubh88] {
    position: relative;
    border: 2px dashed var(--color-neutral-300, #d1d5db);
    border-radius: 12px;
    padding: 2rem 1rem;
    text-align: center;
    background: var(--color-neutral-50, #f9fafb);
    transition: border-color 0.15s, background 0.15s;
    margin-bottom: 1rem;
}
.drop-zone:hover[b-1zya3ubh88] { border-color: var(--color-primary-600); }
.drop-zone-loading[b-1zya3ubh88] { opacity: 0.7; }
.drop-zone-icon[b-1zya3ubh88] { font-size: 2rem; margin-bottom: 0.5rem; }
.file-name-display[b-1zya3ubh88] { font-size: 0.95rem; color: var(--color-neutral-900); font-weight: 600; }
.file-size[b-1zya3ubh88] { font-size: 0.8rem; color: var(--color-neutral-500); font-weight: 400; }

/* ── Import mode ────────────────────────────────────── */
.mode-option[b-1zya3ubh88] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 0.75rem;
    border: 1px solid var(--color-neutral-200);
    border-radius: 8px;
    margin-bottom: 0.5rem;
    cursor: pointer;
    font-size: 0.88rem;
}
.mode-option:hover[b-1zya3ubh88] { border-color: var(--color-primary-600); }
.mode-option input[b-1zya3ubh88] { accent-color: var(--color-primary-600); }

/* ── Preview summary ────────────────────────────────── */
.preview-summary[b-1zya3ubh88] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin: 1rem 0;
}
.summary-stat[b-1zya3ubh88] {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0.75rem 1.1rem;
    border-radius: 10px;
    background: var(--color-neutral-50, #f9fafb);
    border: 1px solid var(--color-neutral-200);
    min-width: 90px;
}
.stat-num[b-1zya3ubh88] { font-size: 1.4rem; font-weight: 700; color: var(--color-neutral-900); }
.stat-label[b-1zya3ubh88] { font-size: 0.72rem; color: var(--color-neutral-500); margin-top: 0.15rem; }
.stat-ok[b-1zya3ubh88] { color: var(--color-success-600, #16a34a); }
.stat-err[b-1zya3ubh88] { color: var(--color-danger-600, #dc2626); }
.stat-create[b-1zya3ubh88] { color: var(--color-primary-600); }
.stat-skip[b-1zya3ubh88] { color: var(--color-neutral-500); }
.stat-replace[b-1zya3ubh88] { color: #d97706; }

/* ── Preview table ──────────────────────────────────── */
.table-scroll[b-1zya3ubh88] { overflow-x: auto; margin: 1rem 0; border-radius: 10px; border: 1px solid var(--color-neutral-200); }
.preview-table[b-1zya3ubh88] { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
.preview-table th[b-1zya3ubh88], .preview-table td[b-1zya3ubh88] {
    padding: 0.6rem 0.75rem;
    text-align: left;
    border-bottom: 1px solid var(--color-neutral-200);
}
.preview-table th[b-1zya3ubh88] {
    background: var(--color-neutral-50, #f9fafb);
    font-weight: 700;
    color: var(--color-neutral-700, #374151);
    white-space: nowrap;
}
.preview-table tr:last-child td[b-1zya3ubh88] { border-bottom: none; }
.row-error[b-1zya3ubh88] { background: rgba(220, 38, 38, 0.04); }
.mono[b-1zya3ubh88] { font-family: 'SFMono-Regular', Consolas, monospace; font-size: 0.8rem; }
.cell-errors[b-1zya3ubh88] { font-size: 0.78rem; color: var(--color-danger-600, #dc2626); }
.pill[b-1zya3ubh88] {
    display: inline-block;
    padding: 0.15rem 0.55rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
}
.pill-sm[b-1zya3ubh88] { padding: 0.1rem 0.45rem; font-size: 0.72rem; }
.badge-valid[b-1zya3ubh88] { background: rgba(22, 163, 74, 0.12); color: #166534; }
.badge-invalid[b-1zya3ubh88] { background: rgba(220, 38, 38, 0.12); color: #991b1b; }

/* ── Import button spinner ──────────────────────────── */
.spinner-btn[b-1zya3ubh88] {
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 2px solid rgba(255, 255, 255, 0.4);
    border-top-color: #fff;
    border-radius: 50%;
    animation: mci-spin-b-1zya3ubh88 0.7s linear infinite;
    vertical-align: middle;
    margin-right: 0.4rem;
}
@keyframes mci-spin-b-1zya3ubh88 { to { transform: rotate(360deg); } }

/* ── Success ────────────────────────────────────────── */
.success-card[b-1zya3ubh88] { text-align: center; }
.success-icon[b-1zya3ubh88] { font-size: 3rem; margin-bottom: 0.5rem; }
.success-card .preview-summary[b-1zya3ubh88] { justify-content: center; }

/* ── Responsive ─────────────────────────────────────── */
@media (max-width: 768px) {
    .form-grid[b-1zya3ubh88] { grid-template-columns: 1fr; }
    .chapter-list[b-1zya3ubh88] { grid-template-columns: 1fr; }
    .page-header[b-1zya3ubh88] { flex-direction: column; }
}
@media (max-width: 480px) {
    .mci-page[b-1zya3ubh88] { padding: 1rem; }
    .step-card[b-1zya3ubh88] { padding: 1rem; }
    .step-actions[b-1zya3ubh88] { flex-direction: column-reverse; }
    .step-actions button[b-1zya3ubh88] { width: 100%; }
    .summary-stat[b-1zya3ubh88] { flex: 1 1 40%; min-width: 0; }
}
/* /Pages/SuperAdmin/Plans/Index.razor.rz.scp.css */
/* ─── Page Layout ─────────────────────────────────────────────────────────── */
.plans-container[b-8wxvoq9w5z] {
    padding: var(--space-6);
    max-width: 1400px;
    margin: 0 auto;
}

.plans-header[b-8wxvoq9w5z] {
    margin-bottom: var(--space-6);
}

.page-title[b-8wxvoq9w5z] {
    font-size: var(--text-2xl);
    font-weight: var(--font-bold);
    color: var(--color-neutral-900);
    margin: 0;
}

.page-subtitle[b-8wxvoq9w5z] {
    color: var(--color-neutral-500);
    margin: var(--space-1) 0 0;
}

/* ─── Loading / Error States ──────────────────────────────────────────────── */
.loading-state[b-8wxvoq9w5z],
.error-state[b-8wxvoq9w5z] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-16) 0;
    color: var(--color-neutral-500);
}

.error-state i[b-8wxvoq9w5z] {
    font-size: 2.5rem;
    color: var(--color-danger-500);
}

/* ─── Plan Cards ──────────────────────────────────────────────────────────── */
.plan-cards[b-8wxvoq9w5z] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-4);
    margin-bottom: var(--space-6);
}

@media (max-width: 768px) {
    .plan-cards[b-8wxvoq9w5z] {
        grid-template-columns: 1fr;
    }
}

.plan-card[b-8wxvoq9w5z] {
    background: var(--color-white);
    border: 1px solid var(--color-neutral-200);
    border-radius: var(--radius-lg);
    padding: var(--space-5);
    text-align: center;
}

.plan-card.tier-free[b-8wxvoq9w5z] { border-top: 4px solid var(--color-neutral-400); }
.plan-card.tier-basic[b-8wxvoq9w5z] { border-top: 4px solid var(--color-info-500); }
.plan-card.tier-standard[b-8wxvoq9w5z] { border-top: 4px solid var(--color-primary-500); }
.plan-card.tier-premium[b-8wxvoq9w5z] { border-top: 4px solid var(--color-warning-500); }
.plan-card.tier-enterprise[b-8wxvoq9w5z] { border-top: 4px solid var(--color-purple-500, #7c3aed); }

.plan-card.tier-enterprise h3[b-8wxvoq9w5z],
.plan-card.tier-premium h3[b-8wxvoq9w5z] {
    color: var(--color-primary-700);
}

.plan-card h3[b-8wxvoq9w5z] {
    font-size: var(--text-lg);
    font-weight: var(--font-semibold);
    color: var(--color-neutral-900);
    margin: 0 0 var(--space-2);
}

.plan-price[b-8wxvoq9w5z] {
    font-size: var(--text-2xl);
    font-weight: var(--font-bold);
    color: var(--color-primary-600);
    margin-bottom: var(--space-2);
}

.plan-price small[b-8wxvoq9w5z] {
    font-size: var(--text-sm);
    font-weight: var(--font-normal);
    color: var(--color-neutral-500);
}

.price-free[b-8wxvoq9w5z] {
    color: var(--color-success-600);
}

.plan-limit[b-8wxvoq9w5z] {
    font-size: var(--text-sm);
    color: var(--color-neutral-500);
}

/* ─── Matrix Card ─────────────────────────────────────────────────────────── */
.matrix-card[b-8wxvoq9w5z] {
    background: var(--color-white);
    border: 1px solid var(--color-neutral-200);
    border-radius: var(--radius-lg);
    overflow: hidden;
    margin-bottom: var(--space-4);
}

.matrix-toolbar[b-8wxvoq9w5z] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--color-neutral-100);
    background: var(--color-neutral-50);
    font-size: var(--text-sm);
    color: var(--color-neutral-500);
    gap: var(--space-4);
}

.save-ok[b-8wxvoq9w5z]  { color: var(--color-success-600); font-weight: var(--font-medium); }
.save-err[b-8wxvoq9w5z] { color: var(--color-danger-600);  font-weight: var(--font-medium); }

.matrix-scroll[b-8wxvoq9w5z] {
    overflow-x: auto;
}

/* ─── Matrix Table ────────────────────────────────────────────────────────── */
.matrix-table[b-8wxvoq9w5z] {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--text-sm);
}

.matrix-table thead th[b-8wxvoq9w5z] {
    background: var(--color-neutral-50);
    border-bottom: 2px solid var(--color-neutral-200);
    padding: var(--space-3) var(--space-4);
    text-align: left;
    font-weight: var(--font-semibold);
    color: var(--color-neutral-700);
    white-space: nowrap;
}

.feature-col[b-8wxvoq9w5z] { width: 280px; min-width: 200px; }
.cat-col[b-8wxvoq9w5z]     { width: 120px; }
.plan-col[b-8wxvoq9w5z]    { width: 120px; text-align: center !important; }

/* Category separator row */
.category-row td[b-8wxvoq9w5z] {
    background: var(--color-primary-50);
    color: var(--color-primary-700);
    font-weight: var(--font-semibold);
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: var(--space-2) var(--space-4);
    border-top: 2px solid var(--color-primary-100);
}

/* Feature rows */
.feature-row:hover[b-8wxvoq9w5z] {
    background: var(--color-neutral-50);
}

.feature-row td[b-8wxvoq9w5z] {
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--color-neutral-100);
    vertical-align: middle;
}

.feature-name[b-8wxvoq9w5z] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.feature-name span[b-8wxvoq9w5z] {
    font-weight: var(--font-medium);
    color: var(--color-neutral-800);
}

.feature-code[b-8wxvoq9w5z] {
    font-family: monospace;
    font-size: 11px;
    color: var(--color-neutral-400);
    background: var(--color-neutral-100);
    padding: 1px 4px;
    border-radius: 3px;
}

.feature-cat[b-8wxvoq9w5z] {
    color: var(--color-neutral-500);
    font-size: var(--text-xs);
}

/* Plan cells */
.plan-cell[b-8wxvoq9w5z] {
    text-align: center;
    cursor: pointer;
    transition: background 0.15s;
    user-select: none;
    position: relative;
}

.plan-cell:hover[b-8wxvoq9w5z] { filter: brightness(0.92); }

.cell-yes[b-8wxvoq9w5z] {
    color: var(--color-success-600);
    background: var(--color-success-50);
}

.cell-no[b-8wxvoq9w5z] {
    color: var(--color-neutral-300);
}

.usage-badge[b-8wxvoq9w5z] {
    display: inline-block;
    margin-left: var(--space-1);
    font-size: 11px;
    font-weight: var(--font-bold);
    color: var(--color-primary-700);
    background: var(--color-primary-100);
    border-radius: 8px;
    padding: 1px 6px;
    vertical-align: middle;
}

/* ─── Usage Limit Panel ───────────────────────────────────────────────────── */
.limit-panel[b-8wxvoq9w5z] {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}

.limit-panel-content[b-8wxvoq9w5z] {
    background: var(--color-white);
    border-radius: var(--radius-xl);
    padding: var(--space-6);
    width: 380px;
    max-width: 95vw;
    box-shadow: var(--shadow-xl);
}

.limit-panel-content h4[b-8wxvoq9w5z] {
    font-size: var(--text-lg);
    font-weight: var(--font-semibold);
    margin: 0 0 var(--space-3);
}

.limit-panel-content p[b-8wxvoq9w5z] {
    color: var(--color-neutral-600);
    margin-bottom: var(--space-4);
}

.limit-input[b-8wxvoq9w5z] {
    display: block;
    width: 100%;
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--color-neutral-300);
    border-radius: var(--radius-md);
    font-size: var(--text-base);
    margin-top: var(--space-1);
}

.limit-actions[b-8wxvoq9w5z] {
    display: flex;
    gap: var(--space-3);
    justify-content: flex-end;
    margin-top: var(--space-4);
}

/* ─── Mobile ──────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
    .plans-container[b-8wxvoq9w5z] {
        padding: var(--space-4);
    }

    .matrix-toolbar[b-8wxvoq9w5z] {
        flex-direction: column;
        align-items: flex-start;
    }
}
/* /Pages/SuperAdmin/Publishers.razor.rz.scp.css */
.publishers-page[b-oc2jgyocir] { padding: var(--space-6); max-width: 1200px; }
.page-header[b-oc2jgyocir] { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: var(--space-6); flex-wrap: wrap; gap: var(--space-3); }
.page-title[b-oc2jgyocir] { font-size: 1.75rem; font-weight: 700; color: var(--color-gray-900); display: flex; align-items: center; gap: var(--space-2); margin: 0 0 var(--space-1) 0; }
.page-subtitle[b-oc2jgyocir] { color: var(--color-gray-500); margin: 0; }

.loading-center[b-oc2jgyocir] { display: flex; justify-content: center; padding: var(--space-12); }
.spinner[b-oc2jgyocir] { width: 40px; height: 40px; border: 4px solid var(--color-gray-200); border-top-color: #7c3aed; border-radius: 50%; animation: spin-b-oc2jgyocir 0.8s linear infinite; }
@keyframes spin-b-oc2jgyocir { to { transform: rotate(360deg); } }
.empty-state[b-oc2jgyocir] { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: var(--space-12); color: var(--color-gray-400); text-align: center; gap: var(--space-3); }
.empty-icon[b-oc2jgyocir] { font-size: 3.5rem; }
.empty-state h3[b-oc2jgyocir] { font-size: 1.1rem; font-weight: 600; color: var(--color-gray-600); margin: 0; }
.empty-state p[b-oc2jgyocir] { margin: 0; font-size: 0.9rem; }
.publishers-list[b-oc2jgyocir] { display: flex; flex-direction: column; gap: var(--space-3); margin-bottom: var(--space-4); }
.publisher-row[b-oc2jgyocir] { background: #fff; border-radius: var(--radius-xl); box-shadow: 0 1px 4px rgba(0,0,0,.08); overflow: hidden; transition: box-shadow 0.2s; }
.publisher-row.expanded[b-oc2jgyocir] { box-shadow: 0 4px 16px rgba(124,58,237,.15); }
.publisher-summary[b-oc2jgyocir] { display: flex; align-items: center; gap: var(--space-4); padding: var(--space-5); cursor: pointer; user-select: none; }
.publisher-summary:hover[b-oc2jgyocir] { background: var(--color-gray-50); }
.pub-avatar[b-oc2jgyocir] { width: 48px; height: 48px; background: linear-gradient(135deg, #7c3aed, #5b21b6); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 1.1rem; flex-shrink: 0; }
.pub-info[b-oc2jgyocir] { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pub-name[b-oc2jgyocir] { font-weight: 700; color: var(--color-gray-900); font-size: 0.95rem; }
.pub-email[b-oc2jgyocir] { font-size: 0.82rem; color: var(--color-gray-500); }
.pub-phone[b-oc2jgyocir] { font-size: 0.78rem; color: var(--color-gray-400); }
.pub-stats[b-oc2jgyocir] { display: flex; gap: var(--space-4); }
.pub-stat[b-oc2jgyocir] { display: flex; flex-direction: column; align-items: center; }
.pub-stat-value[b-oc2jgyocir] { font-size: 1.1rem; font-weight: 700; color: #7c3aed; }
.pub-stat-label[b-oc2jgyocir] { font-size: 0.72rem; color: var(--color-gray-500); }
.pub-badges[b-oc2jgyocir] { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.status-badge[b-oc2jgyocir] { font-size: 0.75rem; font-weight: 600; padding: 3px 10px; border-radius: 999px; }
.badge-active[b-oc2jgyocir] { background: #dcfce7; color: #16a34a; }
.badge-inactive[b-oc2jgyocir] { background: var(--color-gray-100); color: var(--color-gray-500); }
.expand-icon[b-oc2jgyocir] { color: var(--color-gray-400); font-size: 0.85rem; }
.publisher-detail[b-oc2jgyocir] { padding: var(--space-5); border-top: 1px solid var(--color-gray-100); background: var(--color-gray-50); }
.detail-header[b-oc2jgyocir] { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--space-4); }
.detail-header h4[b-oc2jgyocir] { margin: 0; font-size: 0.95rem; font-weight: 700; color: var(--color-gray-700); }
.btn-assign[b-oc2jgyocir] { background: #ede9fe; color: #7c3aed; border: none; border-radius: var(--radius-lg); padding: var(--space-2) var(--space-3); font-weight: 600; font-size: 0.82rem; cursor: pointer; display: flex; align-items: center; gap: var(--space-1); }
.btn-assign:hover[b-oc2jgyocir] { background: #ddd6fe; }
.small-loading[b-oc2jgyocir] { display: flex; align-items: center; gap: var(--space-2); color: var(--color-gray-500); font-size: 0.85rem; padding: var(--space-2); }
.spinner-sm-dark[b-oc2jgyocir] { width: 18px; height: 18px; border: 2px solid var(--color-gray-200); border-top-color: #7c3aed; border-radius: 50%; animation: spin-b-oc2jgyocir 0.8s linear infinite; }
.no-schools[b-oc2jgyocir] { color: var(--color-gray-500); font-size: 0.875rem; margin: 0; }
.assigned-schools-table-wrap[b-oc2jgyocir] { overflow-x: auto; border-radius: var(--radius-lg); background: #fff; border: 1px solid var(--color-gray-200); }
.assigned-table[b-oc2jgyocir] { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
.assigned-table th[b-oc2jgyocir] { background: var(--color-gray-50); padding: var(--space-2) var(--space-3); text-align: left; font-weight: 600; color: var(--color-gray-600); border-bottom: 1px solid var(--color-gray-200); white-space: nowrap; }
.assigned-table td[b-oc2jgyocir] { padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--color-gray-100); }
.assigned-table tbody tr:last-child td[b-oc2jgyocir] { border-bottom: none; }
.school-name-cell[b-oc2jgyocir] { font-weight: 600; color: var(--color-gray-800); }
.text-muted-sm[b-oc2jgyocir] { color: var(--color-gray-500); font-size: 0.8rem; }
.btn-revoke[b-oc2jgyocir] { background: #fee2e2; color: #dc2626; border: none; border-radius: var(--radius-md); padding: 3px 10px; font-size: 0.78rem; font-weight: 600; cursor: pointer; display: flex; align-items: center; gap: 4px; }
.btn-revoke:hover[b-oc2jgyocir] { background: #fecaca; }
.pagination[b-oc2jgyocir] { display: flex; justify-content: center; align-items: center; gap: var(--space-3); padding: var(--space-4); }
.btn-page[b-oc2jgyocir] { border: 1px solid var(--color-gray-200); background: #fff; border-radius: var(--radius-lg); padding: var(--space-2) var(--space-3); cursor: pointer; }
.btn-page:disabled[b-oc2jgyocir] { opacity: 0.4; cursor: default; }
.page-info[b-oc2jgyocir] { font-size: 0.9rem; color: var(--color-gray-600); }
.modal-backdrop[b-oc2jgyocir] { position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 1000; display: flex; align-items: center; justify-content: center; padding: var(--space-4); }
.modal[b-oc2jgyocir] { background: #fff; border-radius: var(--radius-xl); width: 100%; max-width: 520px; max-height: 90vh; display: flex; flex-direction: column; box-shadow: 0 20px 60px rgba(0,0,0,.3); }
.modal-sm[b-oc2jgyocir] { max-width: 420px; }
.modal-header[b-oc2jgyocir] { display: flex; justify-content: space-between; align-items: center; padding: var(--space-5) var(--space-6); border-bottom: 1px solid var(--color-gray-100); }
.modal-header h2[b-oc2jgyocir] { margin: 0; font-size: 1.1rem; font-weight: 700; }
.modal-close[b-oc2jgyocir] { border: none; background: transparent; cursor: pointer; color: var(--color-gray-400); font-size: 1rem; }
.modal-body[b-oc2jgyocir] { padding: var(--space-5) var(--space-6); overflow-y: auto; flex: 1; display: flex; flex-direction: column; gap: var(--space-4); }
.modal-footer[b-oc2jgyocir] { padding: var(--space-4) var(--space-6); border-top: 1px solid var(--color-gray-100); display: flex; justify-content: flex-end; gap: var(--space-3); }
.form-group[b-oc2jgyocir] { display: flex; flex-direction: column; gap: var(--space-1); }
.form-group label[b-oc2jgyocir] { font-size: 0.85rem; font-weight: 600; color: var(--color-gray-700); }
.form-row[b-oc2jgyocir] { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
.form-control[b-oc2jgyocir] { border: 1px solid var(--color-gray-200); border-radius: var(--radius-lg); padding: var(--space-2) var(--space-3); font-size: 0.9rem; width: 100%; }
.form-control:focus[b-oc2jgyocir] { outline: none; border-color: #7c3aed; box-shadow: 0 0 0 3px rgba(124,58,237,.15); }
.req[b-oc2jgyocir] { color: #dc2626; }
.error-msg[b-oc2jgyocir] { color: #dc2626; font-size: 0.85rem; background: #fee2e2; padding: var(--space-2) var(--space-3); border-radius: var(--radius-lg); margin: 0; }
.btn-cancel[b-oc2jgyocir] { background: var(--color-gray-100); border: none; border-radius: var(--radius-lg); padding: var(--space-2) var(--space-4); font-weight: 600; cursor: pointer; }

.spinner-sm-inline[b-oc2jgyocir] { display: inline-block; width: 16px; height: 16px; border: 2px solid rgba(255,255,255,.4); border-top-color: #fff; border-radius: 50%; animation: spin-b-oc2jgyocir 0.8s linear infinite; }
.school-search-results[b-oc2jgyocir] { display: flex; flex-direction: column; gap: 2px; border: 1px solid var(--color-gray-200); border-radius: var(--radius-lg); overflow: hidden; max-height: 220px; overflow-y: auto; }
.school-search-item[b-oc2jgyocir] { display: flex; justify-content: space-between; align-items: center; padding: var(--space-3) var(--space-4); cursor: pointer; font-size: 0.875rem; }
.school-search-item:hover[b-oc2jgyocir], .school-search-item.selected[b-oc2jgyocir] { background: #ede9fe; }
.selected-school-chip[b-oc2jgyocir] { display: flex; align-items: center; gap: var(--space-2); background: #ede9fe; color: #7c3aed; border-radius: var(--radius-lg); padding: var(--space-2) var(--space-3); font-size: 0.875rem; }
.chip-clear[b-oc2jgyocir] { border: none; background: transparent; color: #7c3aed; cursor: pointer; padding: 0; margin-left: auto; }
/* ── Wide assign modal ─────────────────────────────────────── */
.modal-wide[b-oc2jgyocir] { max-width: 720px; }
.modal-header .modal-subtitle[b-oc2jgyocir] { margin: 2px 0 0; font-size: 0.82rem; color: var(--color-gray-500); }
.modal-footer-spaced[b-oc2jgyocir] { justify-content: space-between; align-items: center; }
.footer-actions[b-oc2jgyocir] { display: flex; gap: var(--space-3); align-items: center; }
.selection-summary[b-oc2jgyocir] { display: flex; align-items: center; }
.selection-count[b-oc2jgyocir] { font-size: 0.875rem; font-weight: 600; color: #7c3aed; display: flex; align-items: center; gap: var(--space-2); }
.selection-hint[b-oc2jgyocir] { font-size: 0.82rem; color: var(--color-gray-400); }

/* ── School search bar ─────────────────────────────────────── */
.school-search-bar[b-oc2jgyocir] { position: relative; display: flex; align-items: center; }
.search-icon-inner[b-oc2jgyocir] { position: absolute; left: 12px; color: var(--color-gray-400); font-size: 0.85rem; pointer-events: none; }
.search-input-inner[b-oc2jgyocir] { padding-left: 34px !important; }
.search-spinner[b-oc2jgyocir] { position: absolute; right: 10px; }

/* ── School pick list ──────────────────────────────────────── */
.school-pick-list[b-oc2jgyocir] { display: flex; flex-direction: column; border: 1px solid var(--color-gray-200); border-radius: var(--radius-lg); overflow: hidden; max-height: 360px; overflow-y: auto; }
.picker-empty[b-oc2jgyocir] { display: flex; align-items: center; justify-content: center; gap: var(--space-3); padding: var(--space-6); color: var(--color-gray-400); font-size: 0.875rem; }
.school-pick-row[b-oc2jgyocir] { display: flex; align-items: center; gap: var(--space-3); padding: 10px var(--space-4); cursor: pointer; transition: background 0.15s; border-bottom: 1px solid var(--color-gray-100); user-select: none; }
.school-pick-row:last-child[b-oc2jgyocir] { border-bottom: none; }
.school-pick-row:hover:not(.row-assigned)[b-oc2jgyocir] { background: #f5f3ff; }
.school-pick-row.row-selected[b-oc2jgyocir] { background: #ede9fe; }
.school-pick-row.row-assigned[b-oc2jgyocir] { background: var(--color-gray-50); cursor: default; opacity: 0.75; }
.pick-check[b-oc2jgyocir] { width: 24px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.school-checkbox[b-oc2jgyocir] { width: 16px; height: 16px; accent-color: #7c3aed; cursor: pointer; }
.already-icon[b-oc2jgyocir] { color: #16a34a; font-size: 1rem; }
.pick-info[b-oc2jgyocir] { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.pick-name[b-oc2jgyocir] { font-weight: 600; font-size: 0.875rem; color: var(--color-gray-800); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pick-city[b-oc2jgyocir] { font-size: 0.78rem; color: var(--color-gray-500); display: flex; align-items: center; gap: 4px; }
.pick-publishers[b-oc2jgyocir] { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; justify-content: flex-end; min-width: 0; max-width: 260px; }
.pub-tag[b-oc2jgyocir] { display: inline-flex; align-items: center; gap: 4px; font-size: 0.72rem; font-weight: 600; padding: 2px 8px; border-radius: 999px; white-space: nowrap; }
.pub-tag-self[b-oc2jgyocir]  { background: #dcfce7; color: #16a34a; }
.pub-tag-other[b-oc2jgyocir] { background: #dbeafe; color: #1d4ed8; }
.pub-tag-none[b-oc2jgyocir]  { background: var(--color-gray-100); color: var(--color-gray-400); font-weight: 500; font-style: italic; }
.pub-tag-more[b-oc2jgyocir]  { background: var(--color-gray-200); color: var(--color-gray-600); }

/* ── Assign date row ───────────────────────────────────────── */
.assign-date-row[b-oc2jgyocir] { display: flex; gap: var(--space-4); flex-wrap: wrap; background: #f5f3ff; border-radius: var(--radius-lg); padding: var(--space-3) var(--space-4); }
.form-group-inline[b-oc2jgyocir] { flex: 1; min-width: 160px; }
.form-control-sm[b-oc2jgyocir] { padding: var(--space-1) var(--space-2) !important; font-size: 0.85rem !important; }
.optional[b-oc2jgyocir] { font-weight: 400; color: var(--color-gray-400); font-size: 0.78rem; }

@media (max-width: 640px) {
    .publishers-page[b-oc2jgyocir] { padding: var(--space-4); }
    .publisher-summary[b-oc2jgyocir] { flex-wrap: wrap; }
    .form-row[b-oc2jgyocir] { grid-template-columns: 1fr; }
    .pub-stats[b-oc2jgyocir] { display: none; }
    .modal-wide[b-oc2jgyocir] { max-width: 100%; margin: 0 var(--space-2); }
    .pick-publishers[b-oc2jgyocir] { max-width: 140px; }
}
/* /Pages/SuperAdmin/QuestionSharing/Index.razor.rz.scp.css */
.qs-page[b-fvpj6bx9yt] {
    padding: var(--space-6);
    max-width: 1200px;
}

.page-header[b-fvpj6bx9yt] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-4);
    margin-bottom: var(--space-6);
    flex-wrap: wrap;
}

.page-title[b-fvpj6bx9yt] {
    font-size: var(--font-xl);
    font-weight: 700;
    color: var(--color-text-primary);
    margin: 0 0 var(--space-1) 0;
}

.page-title i[b-fvpj6bx9yt] {
    color: var(--color-primary);
    margin-right: var(--space-2);
}

.page-subtitle[b-fvpj6bx9yt] {
    color: var(--color-text-secondary);
    margin: 0;
    font-size: var(--font-sm);
}

/* ── Table ──────────────────────────────────────────────────────────────── */
.table-card[b-fvpj6bx9yt] {
    background: var(--color-surface);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}

.data-table[b-fvpj6bx9yt] {
    width: 100%;
    border-collapse: collapse;
}

.data-table th[b-fvpj6bx9yt],
.data-table td[b-fvpj6bx9yt] {
    padding: var(--space-3) var(--space-4);
    text-align: left;
    border-bottom: 1px solid var(--color-border);
    font-size: var(--font-sm);
}

.data-table th[b-fvpj6bx9yt] {
    background: var(--color-surface-secondary);
    font-weight: 600;
    color: var(--color-text-secondary);
    text-transform: uppercase;
    font-size: 11px;
    letter-spacing: 0.05em;
}

.data-table tr:last-child td[b-fvpj6bx9yt] { border-bottom: none; }
.data-table tr:hover td[b-fvpj6bx9yt] { background: var(--color-surface-hover); }
.row-revoked td[b-fvpj6bx9yt] { opacity: 0.55; }

/* ── Badges ─────────────────────────────────────────────────────────────── */
.badge[b-fvpj6bx9yt] {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 9999px;
    font-size: 11px;
    font-weight: 600;
}

.badge-active[b-fvpj6bx9yt]  { background: var(--color-success-light); color: var(--color-success); }
.badge-revoked[b-fvpj6bx9yt] { background: var(--color-danger-light);  color: var(--color-danger); }

/* ── Buttons ─────────────────────────────────────────────────────────────── */
.btn-danger-sm[b-fvpj6bx9yt] {
    background: transparent;
    border: 1px solid var(--color-danger);
    color: var(--color-danger);
    padding: 4px 12px;
    border-radius: var(--radius-md);
    font-size: var(--font-sm);
    cursor: pointer;
    transition: background 0.15s;
}

.btn-danger-sm:hover[b-fvpj6bx9yt] {
    background: var(--color-danger-light);
}

/* ── Empty state ─────────────────────────────────────────────────────────── */
.empty-state[b-fvpj6bx9yt] {
    text-align: center;
    padding: var(--space-12) var(--space-6);
    color: var(--color-text-secondary);
}

.empty-icon[b-fvpj6bx9yt] {
    font-size: 48px;
    color: var(--color-text-muted);
    display: block;
    margin-bottom: var(--space-4);
}

/* ── Modal ───────────────────────────────────────────────────────────────── */
.modal-overlay[b-fvpj6bx9yt] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.modal-box[b-fvpj6bx9yt] {
    background: var(--color-surface);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-xl);
    width: 100%;
    max-width: 540px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.modal-header[b-fvpj6bx9yt] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-4) var(--space-5);
    border-bottom: 1px solid var(--color-border);
}

.modal-header h2[b-fvpj6bx9yt] {
    font-size: var(--font-lg);
    font-weight: 700;
    margin: 0;
    color: var(--color-text-primary);
}

.modal-close[b-fvpj6bx9yt] {
    background: none;
    border: none;
    font-size: var(--font-lg);
    color: var(--color-text-secondary);
    cursor: pointer;
}

.modal-body[b-fvpj6bx9yt] {
    padding: var(--space-5);
    overflow-y: auto;
    flex: 1;
}

.modal-footer[b-fvpj6bx9yt] {
    padding: var(--space-4) var(--space-5);
    border-top: 1px solid var(--color-border);
    display: flex;
    justify-content: flex-end;
    gap: var(--space-3);
}

/* ── Form ────────────────────────────────────────────────────────────────── */
.form-group[b-fvpj6bx9yt] { margin-bottom: var(--space-5); }
.form-group label[b-fvpj6bx9yt] { display: block; font-weight: 600; margin-bottom: var(--space-1); font-size: var(--font-sm); }
.field-hint[b-fvpj6bx9yt] { color: var(--color-text-secondary); font-size: var(--font-xs); margin: 0 0 var(--space-2) 0; }
.form-select[b-fvpj6bx9yt] { width: 100%; padding: var(--space-2) var(--space-3); border: 1px solid var(--color-border); border-radius: var(--radius-md); font-size: var(--font-sm); background: var(--color-surface); }
.form-select:focus[b-fvpj6bx9yt] { outline: none; border-color: var(--color-primary); }
.required[b-fvpj6bx9yt] { color: var(--color-danger); }

.checkbox-list[b-fvpj6bx9yt] { display: flex; flex-direction: column; gap: var(--space-2); max-height: 200px; overflow-y: auto; padding: var(--space-2); border: 1px solid var(--color-border); border-radius: var(--radius-md); }
.checkbox-item[b-fvpj6bx9yt] { display: flex; align-items: center; gap: var(--space-2); font-size: var(--font-sm); cursor: pointer; }
.checkbox-item input[b-fvpj6bx9yt] { cursor: pointer; }

.alert-error[b-fvpj6bx9yt] { background: var(--color-danger-light); color: var(--color-danger); border-radius: var(--radius-md); padding: var(--space-2) var(--space-3); font-size: var(--font-sm); margin-top: var(--space-3); }

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

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

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
    .qs-page[b-fvpj6bx9yt] { padding: var(--space-4); }
    .data-table th[b-fvpj6bx9yt], .data-table td[b-fvpj6bx9yt] { padding: var(--space-2) var(--space-3); font-size: 12px; }
    .modal-box[b-fvpj6bx9yt] { max-width: 100%; border-radius: var(--radius-lg) var(--radius-lg) 0 0; align-self: flex-end; }
}
/* /Pages/SuperAdmin/Questions/ImportFromJson.razor.rz.scp.css */
/* Styles handled via Tailwind utility classes in markup */
/* /Pages/SuperAdmin/Questions/ImportFromJsonl.razor.rz.scp.css */
/* ── Page layout ───────────────────────────────────────────────────── */
.import-jsonl-page[b-ito7fcwgnn] {
    max-width: 960px;
    margin: 0 auto;
    padding: var(--space-6);
}

.page-header[b-ito7fcwgnn] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-4);
    margin-bottom: var(--space-6);
}

.page-header h1[b-ito7fcwgnn] {
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--color-text-primary);
    margin: 0 0 var(--space-1);
}

.page-header p[b-ito7fcwgnn] {
    color: var(--color-text-secondary);
    margin: 0;
    font-size: 0.9rem;
}

.btn-back[b-ito7fcwgnn] {
    text-decoration: none;
    color: var(--color-text-secondary);
    font-size: 0.875rem;
    white-space: nowrap;
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
}

.btn-back:hover[b-ito7fcwgnn] {
    background: var(--color-bg-secondary);
}

/* ── Step progress bar ─────────────────────────────────────────────── */
.steps-bar[b-ito7fcwgnn] {
    display: flex;
    align-items: center;
    gap: 0;
    margin-bottom: var(--space-6);
}

.step[b-ito7fcwgnn] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-lg);
    color: var(--color-text-muted);
    font-size: 0.875rem;
}

.step-num[b-ito7fcwgnn] {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--color-bg-secondary);
    border: 2px solid var(--color-border);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.8rem;
    flex-shrink: 0;
}

.step-active .step-num[b-ito7fcwgnn] {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: #fff;
}

.step-active .step-label[b-ito7fcwgnn] {
    color: var(--color-primary);
    font-weight: 600;
}

.step-done .step-num[b-ito7fcwgnn] {
    background: var(--color-success);
    border-color: var(--color-success);
    color: #fff;
}

.step-line[b-ito7fcwgnn] {
    flex: 1;
    height: 2px;
    background: var(--color-border);
    min-width: 32px;
}

.step-line-done[b-ito7fcwgnn] {
    background: var(--color-success);
}

/* ── Cards ─────────────────────────────────────────────────────────── */
.step-card[b-ito7fcwgnn] {
    padding: var(--space-6);
}

.step-card h2[b-ito7fcwgnn] {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--color-text-primary);
    margin: 0 0 var(--space-2);
}

.step-desc[b-ito7fcwgnn] {
    color: var(--color-text-secondary);
    font-size: 0.9rem;
    margin-bottom: var(--space-5);
}

/* ── Drop zone ─────────────────────────────────────────────────────── */
.drop-zone[b-ito7fcwgnn] {
    border: 2px dashed var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--space-8);
    text-align: center;
    background: var(--color-bg-secondary);
    margin-bottom: var(--space-5);
    transition: border-color 0.2s;
}

.drop-zone-loading[b-ito7fcwgnn] {
    opacity: 0.7;
}

.drop-zone-icon[b-ito7fcwgnn] {
    font-size: 2.5rem;
    margin-bottom: var(--space-2);
}

.drop-zone p[b-ito7fcwgnn] {
    color: var(--color-text-secondary);
    margin-bottom: var(--space-3);
}

/* .file-input-hidden replaced by inline style — Blazor InputFile cannot use display:none */

.btn-upload[b-ito7fcwgnn] {
    display: inline-block;
    cursor: pointer;
    padding: var(--space-2) var(--space-5);
    background: var(--color-primary);
    color: #fff;
    border-radius: var(--radius-md);
    font-size: 0.9rem;
    font-weight: 600;
}

.btn-upload:hover[b-ito7fcwgnn] {
    opacity: 0.9;
}

.file-name-display[b-ito7fcwgnn] {
    font-weight: 600;
    color: var(--color-text-primary);
}

.file-size[b-ito7fcwgnn] {
    font-size: 0.8rem;
    color: var(--color-text-muted);
}

.btn-link[b-ito7fcwgnn] {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--color-danger);
    font-size: 0.875rem;
    text-decoration: underline;
}

/* ── Spinners ─────────────────────────────────────────────────────── */
.spinner-sm[b-ito7fcwgnn] {
    width: 24px;
    height: 24px;
    border: 3px solid var(--color-border);
    border-top-color: var(--color-primary);
    border-radius: 50%;
    animation: spin-b-ito7fcwgnn 0.7s linear infinite;
    margin: var(--space-3) auto;
}

.spinner-btn[b-ito7fcwgnn] {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255,255,255,0.4);
    border-top-color: #fff;
    border-radius: 50%;
    animation: spin-b-ito7fcwgnn 0.7s linear infinite;
    margin-right: var(--space-2);
    vertical-align: middle;
}

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

/* ── Preview summary ──────────────────────────────────────────────── */
.preview-summary[b-ito7fcwgnn] {
    display: flex;
    gap: var(--space-4);
    margin-bottom: var(--space-4);
    flex-wrap: wrap;
}

.summary-stat[b-ito7fcwgnn] {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: var(--color-bg-secondary);
    border-radius: var(--radius-md);
    padding: var(--space-3) var(--space-5);
    min-width: 100px;
}

.stat-num[b-ito7fcwgnn] {
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--color-primary);
}

.stat-label[b-ito7fcwgnn] {
    font-size: 0.75rem;
    color: var(--color-text-secondary);
    margin-top: 2px;
}

/* ── Pills ────────────────────────────────────────────────────────── */
.type-pills[b-ito7fcwgnn] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-bottom: var(--space-4);
}

.pill[b-ito7fcwgnn] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 0.8rem;
}

.pill-sm[b-ito7fcwgnn] {
    padding: 2px 8px;
    font-size: 0.75rem;
}

.badge-mcq[b-ito7fcwgnn]      { background: #dbeafe; color: #1e40af; }
.badge-tf[b-ito7fcwgnn]       { background: #dcfce7; color: #166534; }
.badge-fill[b-ito7fcwgnn]     { background: #fef9c3; color: #713f12; }
.badge-match[b-ito7fcwgnn]    { background: #f3e8ff; color: #581c87; }
.badge-assert[b-ito7fcwgnn]   { background: #fee2e2; color: #991b1b; }
.badge-short[b-ito7fcwgnn]    { background: #e0f2fe; color: #0c4a6e; }
.badge-long[b-ito7fcwgnn]     { background: #fce7f3; color: #831843; }
.badge-other[b-ito7fcwgnn]    { background: var(--color-bg-secondary); color: var(--color-text-secondary); }

.badge-easy[b-ito7fcwgnn]     { background: #dcfce7; color: #166534; }
.badge-medium[b-ito7fcwgnn]   { background: #fef9c3; color: #713f12; }
.badge-hard[b-ito7fcwgnn]     { background: #fee2e2; color: #991b1b; }

/* ── Preview table ────────────────────────────────────────────────── */
.table-scroll[b-ito7fcwgnn] {
    overflow-x: auto;
    margin-bottom: var(--space-5);
}

.preview-table[b-ito7fcwgnn] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
}

.preview-table th[b-ito7fcwgnn] {
    text-align: left;
    padding: var(--space-2) var(--space-3);
    background: var(--color-bg-secondary);
    border-bottom: 2px solid var(--color-border);
    color: var(--color-text-secondary);
    font-weight: 600;
    white-space: nowrap;
}

.preview-table td[b-ito7fcwgnn] {
    padding: var(--space-2) var(--space-3);
    border-bottom: 1px solid var(--color-border);
    vertical-align: top;
}

.preview-table tr:hover td[b-ito7fcwgnn] {
    background: var(--color-bg-secondary);
}

.mono[b-ito7fcwgnn] {
    font-family: monospace;
    font-size: 0.75rem;
    color: var(--color-text-muted);
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.question-cell[b-ito7fcwgnn] {
    max-width: 300px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ── Alerts ───────────────────────────────────────────────────────── */
.alert-error[b-ito7fcwgnn] {
    background: #fee2e2;
    color: #991b1b;
    border: 1px solid #fca5a5;
    border-radius: var(--radius-md);
    padding: var(--space-3) var(--space-4);
    margin-bottom: var(--space-4);
    font-size: 0.875rem;
}

.alert-warn[b-ito7fcwgnn] {
    background: #fef9c3;
    color: #713f12;
    border: 1px solid #fde047;
    border-radius: var(--radius-md);
    padding: var(--space-3) var(--space-4);
    margin-bottom: var(--space-4);
    font-size: 0.875rem;
}

.alert-warn ul[b-ito7fcwgnn], .error-list[b-ito7fcwgnn] {
    margin: var(--space-1) 0 0 var(--space-4);
    padding: 0;
}

/* ── Step actions ─────────────────────────────────────────────────── */
.step-actions[b-ito7fcwgnn] {
    display: flex;
    justify-content: flex-end;
    gap: var(--space-3);
    margin-top: var(--space-6);
    padding-top: var(--space-4);
    border-top: 1px solid var(--color-border);
}

.btn-primary[b-ito7fcwgnn] {
    padding: var(--space-2) var(--space-5);
    background: var(--color-primary);
    color: #fff;
    border: none;
    border-radius: var(--radius-md);
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
}

.btn-primary:hover:not(:disabled)[b-ito7fcwgnn] { opacity: 0.9; }
.btn-primary:disabled[b-ito7fcwgnn] { opacity: 0.5; cursor: not-allowed; }

.btn-secondary[b-ito7fcwgnn] {
    padding: var(--space-2) var(--space-5);
    background: transparent;
    color: var(--color-text-secondary);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
}

.btn-secondary:hover:not(:disabled)[b-ito7fcwgnn] { background: var(--color-bg-secondary); }
.btn-secondary:disabled[b-ito7fcwgnn] { opacity: 0.5; cursor: not-allowed; }

.btn-import[b-ito7fcwgnn] {
    display: inline-flex;
    align-items: center;
    padding: var(--space-2) var(--space-6);
    background: var(--color-success, #16a34a);
    color: #fff;
    border: none;
    border-radius: var(--radius-md);
    font-size: 0.95rem;
    font-weight: 700;
    cursor: pointer;
}

.btn-import:hover:not(:disabled)[b-ito7fcwgnn] { opacity: 0.9; }
.btn-import:disabled[b-ito7fcwgnn] { opacity: 0.5; cursor: not-allowed; }

/* ── Form grid ────────────────────────────────────────────────────── */
.form-grid[b-ito7fcwgnn] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: var(--space-4);
    margin-bottom: var(--space-5);
}

.form-group[b-ito7fcwgnn] {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.form-group label[b-ito7fcwgnn] {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-text-secondary);
}

.req[b-ito7fcwgnn] {
    color: var(--color-danger);
}

.form-select[b-ito7fcwgnn], .form-select-sm[b-ito7fcwgnn] {
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    font-size: 0.9rem;
    color: var(--color-text-primary);
    background: var(--color-bg-primary);
}

.form-select:disabled[b-ito7fcwgnn] { opacity: 0.5; cursor: not-allowed; }

.form-select-sm[b-ito7fcwgnn] {
    padding: var(--space-1) var(--space-2);
    font-size: 0.825rem;
}

/* ── Micro-chapter mapping ─────────────────────────────────────────── */
.micro-chapter-section[b-ito7fcwgnn] {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--space-4);
    margin-bottom: var(--space-5);
}

.micro-chapter-section h3[b-ito7fcwgnn] {
    font-size: 1rem;
    font-weight: 700;
    margin: 0 0 var(--space-2);
}

.micro-chapter-section p[b-ito7fcwgnn] {
    font-size: 0.875rem;
    color: var(--color-text-secondary);
    margin-bottom: var(--space-3);
}

.mc-map-table[b-ito7fcwgnn] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
}

.mc-map-table th[b-ito7fcwgnn] {
    text-align: left;
    padding: var(--space-2) var(--space-3);
    background: var(--color-bg-secondary);
    border-bottom: 2px solid var(--color-border);
    color: var(--color-text-secondary);
    font-weight: 600;
}

.mc-map-table td[b-ito7fcwgnn] {
    padding: var(--space-2) var(--space-3);
    border-bottom: 1px solid var(--color-border);
    vertical-align: middle;
}

.col-count[b-ito7fcwgnn] {
    width: 52px;
    text-align: center;
}

.col-map[b-ito7fcwgnn] {
    width: 220px;
}

.col-name[b-ito7fcwgnn] {
    white-space: normal;
    word-break: break-word;
    min-width: 160px;
}

.q-count-badge[b-ito7fcwgnn] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    height: 22px;
    padding: 0 6px;
    background: var(--color-primary);
    color: #fff;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 700;
}

.form-input-sm[b-ito7fcwgnn] {
    width: 100%;
    padding: var(--space-1) var(--space-2);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    font-size: 0.825rem;
    color: var(--color-text-primary);
    background: var(--color-bg-primary);
}

.form-input-sm:focus[b-ito7fcwgnn] {
    outline: 2px solid var(--color-primary);
    outline-offset: -1px;
}

.mc-name-existing[b-ito7fcwgnn] {
    font-size: 0.825rem;
    color: var(--color-text-secondary);
    font-style: italic;
    white-space: normal;
    word-break: break-word;
    display: block;
}

/* ── Confirm grid ─────────────────────────────────────────────────── */
.confirm-grid[b-ito7fcwgnn] {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    margin-bottom: var(--space-4);
}

.confirm-row[b-ito7fcwgnn] {
    display: flex;
    gap: var(--space-4);
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--color-border);
}

.confirm-row:last-child[b-ito7fcwgnn] {
    border-bottom: none;
}

.confirm-row:nth-child(even)[b-ito7fcwgnn] {
    background: var(--color-bg-secondary);
}

.confirm-label[b-ito7fcwgnn] {
    flex: 0 0 180px;
    font-weight: 600;
    font-size: 0.875rem;
    color: var(--color-text-secondary);
}

.confirm-value[b-ito7fcwgnn] {
    font-size: 0.875rem;
    color: var(--color-text-primary);
}

/* ── Result modal ─────────────────────────────────────────────────── */
.modal-overlay[b-ito7fcwgnn] {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.modal-box[b-ito7fcwgnn] {
    background: var(--color-bg-primary);
    border-radius: var(--radius-xl);
    width: 100%;
    max-width: 520px;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 20px 60px rgba(0,0,0,0.3);
}

.modal-header[b-ito7fcwgnn] {
    padding: var(--space-4) var(--space-5);
    font-size: 1.1rem;
    font-weight: 700;
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
}

.modal-header-success[b-ito7fcwgnn] { background: #dcfce7; color: #166534; }
.modal-header-partial[b-ito7fcwgnn]  { background: #fef9c3; color: #713f12; }

.modal-body[b-ito7fcwgnn] {
    padding: var(--space-5);
}

.modal-footer[b-ito7fcwgnn] {
    padding: var(--space-4) var(--space-5);
    border-top: 1px solid var(--color-border);
    display: flex;
    justify-content: flex-end;
}

.result-stats[b-ito7fcwgnn] {
    display: flex;
    gap: var(--space-3);
    margin-bottom: var(--space-4);
}

.result-stat[b-ito7fcwgnn] {
    flex: 1;
    text-align: center;
    padding: var(--space-3);
    border-radius: var(--radius-md);
    display: flex;
    flex-direction: column;
}

.result-stat.success[b-ito7fcwgnn] { background: #dcfce7; }
.result-stat.warn[b-ito7fcwgnn]    { background: #fef9c3; }
.result-stat.muted[b-ito7fcwgnn]   { background: var(--color-bg-secondary); }

.topic-breakdown[b-ito7fcwgnn] {
    list-style: none;
    padding: 0;
    margin: 0 0 var(--space-3);
    font-size: 0.875rem;
}

.topic-breakdown li[b-ito7fcwgnn] {
    display: flex;
    justify-content: space-between;
    padding: var(--space-1) 0;
    border-bottom: 1px solid var(--color-border);
}

.topic-name[b-ito7fcwgnn] {
    color: var(--color-text-secondary);
}

/* ── Responsive ───────────────────────────────────────────────────── */
@media (max-width: 640px) {
    .import-jsonl-page[b-ito7fcwgnn] { padding: var(--space-3); }
    .page-header[b-ito7fcwgnn] { flex-direction: column; }
    .steps-bar .step-label[b-ito7fcwgnn] { display: none; }
    .form-grid[b-ito7fcwgnn] { grid-template-columns: 1fr; }
    .confirm-label[b-ito7fcwgnn] { flex: 0 0 120px; }
    .result-stats[b-ito7fcwgnn] { flex-direction: column; }
}
/* /Pages/SuperAdmin/Questions/ImportFromRaw.razor.rz.scp.css */
/* ── Page layout ─────────────────────────────────────────────────────── */
.import-raw-page[b-2e7rwztjmz] {
    max-width: 960px;
    margin: 0 auto;
    padding: var(--space-6);
}

.import-raw-page .page-header[b-2e7rwztjmz] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-4);
    margin-bottom: var(--space-6);
}

.import-raw-page .page-header h1[b-2e7rwztjmz] {
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--color-text-primary);
    margin: 0 0 var(--space-1);
}

.import-raw-page .page-header p[b-2e7rwztjmz] {
    color: var(--color-text-secondary);
    margin: 0;
    font-size: 0.9rem;
}

.import-raw-page .btn-back[b-2e7rwztjmz] {
    text-decoration: none;
    color: var(--color-text-secondary);
    font-size: 0.875rem;
    white-space: nowrap;
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
}

.import-raw-page .btn-back:hover[b-2e7rwztjmz] { background: var(--color-bg-secondary); }

/* ── Steps bar ──────────────────────────────────────────────────────── */
.import-raw-page .steps-bar[b-2e7rwztjmz] {
    display: flex;
    align-items: center;
    gap: 0;
    margin-bottom: var(--space-6);
}

.import-raw-page .step[b-2e7rwztjmz] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-lg);
    color: var(--color-text-muted);
    font-size: 0.875rem;
}

.import-raw-page .step-num[b-2e7rwztjmz] {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    font-weight: 700;
    background: var(--color-bg-tertiary);
    color: var(--color-text-muted);
}

.import-raw-page .step.step-active .step-num[b-2e7rwztjmz] {
    background: var(--color-primary);
    color: #fff;
}

.import-raw-page .step.step-done .step-num[b-2e7rwztjmz] {
    background: var(--color-success);
    color: #fff;
}

.import-raw-page .step-line[b-2e7rwztjmz] {
    flex: 1;
    height: 2px;
    background: var(--color-border);
    min-width: 32px;
}

.import-raw-page .step-line.step-line-done[b-2e7rwztjmz] { background: var(--color-success); }

/* ── Card ───────────────────────────────────────────────────────────── */
.import-raw-page .step-card[b-2e7rwztjmz] {
    background: var(--color-bg-primary);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--space-6);
    margin-bottom: var(--space-6);
}

.import-raw-page .step-card h2[b-2e7rwztjmz] {
    font-size: 1.15rem;
    font-weight: 700;
    margin: 0 0 var(--space-4);
}

.import-raw-page .step-card h3[b-2e7rwztjmz] {
    font-size: 0.95rem;
    font-weight: 600;
    margin: var(--space-4) 0 var(--space-2);
}

.import-raw-page .step-desc[b-2e7rwztjmz] {
    color: var(--color-text-secondary);
    font-size: 0.875rem;
    margin-bottom: var(--space-4);
}

/* ── Drop zone ──────────────────────────────────────────────────────── */
.import-raw-page .drop-zone[b-2e7rwztjmz] {
    position: relative;
    border: 2px dashed var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--space-8) var(--space-4);
    text-align: center;
    cursor: pointer;
    transition: border-color 0.2s, background 0.2s;
    margin-bottom: var(--space-4);
}

.import-raw-page .drop-zone:hover[b-2e7rwztjmz],
.import-raw-page .drop-zone.drop-zone-loading[b-2e7rwztjmz] {
    border-color: var(--color-primary);
    background: var(--color-primary-50, rgba(59,130,246,0.04));
}

.import-raw-page .drop-zone-icon[b-2e7rwztjmz] { font-size: 2rem; margin-bottom: var(--space-2); }

.import-raw-page .btn-upload[b-2e7rwztjmz] {
    display: inline-block;
    margin-top: var(--space-2);
    padding: var(--space-2) var(--space-5);
    background: var(--color-primary);
    color: #fff;
    border-radius: var(--radius-md);
    cursor: pointer;
    font-size: 0.875rem;
    font-weight: 600;
}

.import-raw-page .btn-link[b-2e7rwztjmz] {
    background: none;
    border: none;
    color: var(--color-text-secondary);
    cursor: pointer;
    font-size: 0.875rem;
    margin-top: var(--space-1);
}

.import-raw-page .file-name-display[b-2e7rwztjmz] {
    font-weight: 600;
    font-size: 0.95rem;
}

.import-raw-page .file-size[b-2e7rwztjmz] {
    color: var(--color-text-muted);
    font-size: 0.8rem;
    margin-left: var(--space-2);
}

/* ── Preview summary stats ───────────────────────────────────────────── */
.import-raw-page .preview-summary[b-2e7rwztjmz] {
    display: flex;
    gap: var(--space-4);
    margin-bottom: var(--space-4);
    flex-wrap: wrap;
}

.import-raw-page .summary-stat[b-2e7rwztjmz] {
    background: var(--color-bg-secondary);
    border-radius: var(--radius-md);
    padding: var(--space-3) var(--space-4);
    text-align: center;
    min-width: 80px;
}

.import-raw-page .summary-stat.success-stat .stat-num[b-2e7rwztjmz] { color: var(--color-success); }
.import-raw-page .summary-stat.warn-stat .stat-num[b-2e7rwztjmz] { color: var(--color-warning); }

.import-raw-page .stat-num[b-2e7rwztjmz] {
    display: block;
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--color-primary);
    line-height: 1;
}

.import-raw-page .stat-label[b-2e7rwztjmz] {
    display: block;
    font-size: 0.72rem;
    color: var(--color-text-muted);
    margin-top: var(--space-1);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* ── Type / difficulty pills ─────────────────────────────────────────── */
.import-raw-page .type-pills[b-2e7rwztjmz] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-bottom: var(--space-3);
}

.import-raw-page .pill[b-2e7rwztjmz] {
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 500;
    background: var(--color-neutral-100);
    color: var(--color-neutral-700);
}

.import-raw-page .pill.pill-sm[b-2e7rwztjmz] { font-size: 0.72rem; }
.import-raw-page .badge-mcq[b-2e7rwztjmz]      { background: #dbeafe; color: #1d4ed8; }
.import-raw-page .badge-tf[b-2e7rwztjmz]       { background: #dcfce7; color: #15803d; }
.import-raw-page .badge-fill[b-2e7rwztjmz]     { background: #fef3c7; color: #92400e; }
.import-raw-page .badge-match[b-2e7rwztjmz]    { background: #e9d5ff; color: #6b21a8; }
.import-raw-page .badge-assert[b-2e7rwztjmz]   { background: #fee2e2; color: #b91c1c; }
.import-raw-page .badge-short[b-2e7rwztjmz]    { background: #e0f2fe; color: #075985; }
.import-raw-page .badge-long[b-2e7rwztjmz]     { background: #f1f5f9; color: #334155; }
.import-raw-page .badge-easy[b-2e7rwztjmz]     { background: #dcfce7; color: #166534; }
.import-raw-page .badge-medium[b-2e7rwztjmz]   { background: #fef9c3; color: #854d0e; }
.import-raw-page .badge-hard[b-2e7rwztjmz]     { background: #fee2e2; color: #991b1b; }
.import-raw-page .badge-other[b-2e7rwztjmz]    { background: var(--color-neutral-100); color: var(--color-neutral-600); }

/* ── Quarantine section ───────────────────────────────────────────────── */
.import-raw-page .quarantine-section[b-2e7rwztjmz] {
    border: 1px solid var(--color-warning, #f59e0b);
    border-radius: var(--radius-md);
    padding: var(--space-3) var(--space-4);
    margin-bottom: var(--space-4);
    background: #fffbeb;
}

.import-raw-page .quarantine-section summary[b-2e7rwztjmz] {
    cursor: pointer;
    font-weight: 600;
    font-size: 0.875rem;
    color: #92400e;
    user-select: none;
}

.import-raw-page .quarantine-row[b-2e7rwztjmz] { background: #fffbeb; }

/* ── Table ───────────────────────────────────────────────────────────── */
.import-raw-page .table-scroll[b-2e7rwztjmz] {
    overflow-x: auto;
    margin-bottom: var(--space-4);
}

.import-raw-page .preview-table[b-2e7rwztjmz] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.82rem;
}

.import-raw-page .preview-table th[b-2e7rwztjmz] {
    background: var(--color-bg-secondary);
    padding: var(--space-2) var(--space-3);
    text-align: left;
    font-weight: 600;
    color: var(--color-text-secondary);
    border-bottom: 2px solid var(--color-border);
    white-space: nowrap;
}

.import-raw-page .preview-table td[b-2e7rwztjmz] {
    padding: var(--space-2) var(--space-3);
    border-bottom: 1px solid var(--color-border);
    vertical-align: top;
}

.import-raw-page .question-cell[b-2e7rwztjmz] {
    max-width: 340px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ── Form grid ───────────────────────────────────────────────────────── */
.import-raw-page .form-grid[b-2e7rwztjmz] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: var(--space-4);
    margin-bottom: var(--space-5);
}

.import-raw-page .form-group label[b-2e7rwztjmz] {
    display: block;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--color-text-secondary);
    margin-bottom: var(--space-1);
}

.import-raw-page .req[b-2e7rwztjmz] { color: var(--color-danger); }

.import-raw-page .form-select[b-2e7rwztjmz] {
    width: 100%;
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    font-size: 0.875rem;
    background: var(--color-bg-primary);
}

/* ── Micro-chapter mapping table ─────────────────────────────────────── */
.import-raw-page .micro-chapter-section[b-2e7rwztjmz] {
    margin-top: var(--space-5);
    border-top: 1px solid var(--color-border);
    padding-top: var(--space-4);
}

.import-raw-page .mc-map-table[b-2e7rwztjmz] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.82rem;
}

.import-raw-page .mc-map-table th[b-2e7rwztjmz] {
    background: var(--color-bg-secondary);
    padding: var(--space-2) var(--space-3);
    text-align: left;
    font-weight: 600;
    color: var(--color-text-secondary);
    border-bottom: 2px solid var(--color-border);
}

.import-raw-page .mc-map-table td[b-2e7rwztjmz] {
    padding: var(--space-2) var(--space-3);
    border-bottom: 1px solid var(--color-border);
    vertical-align: middle;
}

.import-raw-page .col-count[b-2e7rwztjmz] { text-align: center; width: 60px; }
.import-raw-page .col-map[b-2e7rwztjmz]   { width: 220px; }

.import-raw-page .q-count-badge[b-2e7rwztjmz] {
    display: inline-block;
    background: var(--color-bg-secondary);
    color: var(--color-text-secondary);
    border-radius: 999px;
    padding: 0 8px;
    font-size: 0.78rem;
    font-weight: 600;
}

.import-raw-page .form-select-sm[b-2e7rwztjmz] {
    padding: 0.2rem 0.5rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    font-size: 0.8rem;
    background: var(--color-bg-primary);
    width: 100%;
}

.import-raw-page .form-input-sm[b-2e7rwztjmz] {
    width: 100%;
    padding: 0.2rem 0.5rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    font-size: 0.8rem;
}

.import-raw-page .mc-name-existing[b-2e7rwztjmz] {
    font-size: 0.8rem;
    color: var(--color-text-secondary);
}

/* ── Confirm grid ─────────────────────────────────────────────────────── */
.import-raw-page .confirm-grid[b-2e7rwztjmz] {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    overflow: hidden;
    margin-bottom: var(--space-4);
}

.import-raw-page .confirm-row[b-2e7rwztjmz] {
    display: flex;
    padding: var(--space-2) var(--space-4);
    border-bottom: 1px solid var(--color-border);
}

.import-raw-page .confirm-row:last-child[b-2e7rwztjmz] { border-bottom: none; }

.import-raw-page .confirm-label[b-2e7rwztjmz] {
    width: 180px;
    font-size: 0.8rem;
    color: var(--color-text-secondary);
    font-weight: 500;
}

.import-raw-page .confirm-value[b-2e7rwztjmz] {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-text-primary);
}

/* ── Step actions ─────────────────────────────────────────────────────── */
.import-raw-page .step-actions[b-2e7rwztjmz] {
    display: flex;
    gap: var(--space-3);
    justify-content: flex-end;
    margin-top: var(--space-5);
    padding-top: var(--space-4);
    border-top: 1px solid var(--color-border);
}

.import-raw-page .btn-primary[b-2e7rwztjmz] {
    padding: var(--space-2) var(--space-5);
    background: var(--color-primary);
    color: #fff;
    border: none;
    border-radius: var(--radius-md);
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
}

.import-raw-page .btn-primary:hover[b-2e7rwztjmz] { background: var(--color-primary-dark, #2563eb); }
.import-raw-page .btn-primary:disabled[b-2e7rwztjmz] { opacity: 0.6; cursor: default; }

.import-raw-page .btn-secondary[b-2e7rwztjmz] {
    padding: var(--space-2) var(--space-4);
    background: var(--color-bg-secondary);
    color: var(--color-text-primary);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
}

.import-raw-page .btn-import[b-2e7rwztjmz] {
    padding: var(--space-2) var(--space-6);
    background: var(--color-success, #16a34a);
    color: #fff;
    border: none;
    border-radius: var(--radius-md);
    font-size: 0.95rem;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.import-raw-page .btn-import:hover[b-2e7rwztjmz] { background: #15803d; }
.import-raw-page .btn-import:disabled[b-2e7rwztjmz] { opacity: 0.6; cursor: default; }

/* ── Alerts ─────────────────────────────────────────────────────────── */
.import-raw-page .alert-error[b-2e7rwztjmz] {
    background: #fee2e2;
    border: 1px solid #fca5a5;
    border-radius: var(--radius-md);
    padding: var(--space-3) var(--space-4);
    color: #b91c1c;
    font-size: 0.875rem;
    margin-bottom: var(--space-3);
}

/* ── Result modal ─────────────────────────────────────────────────────── */
.import-raw-page ~ .modal-overlay[b-2e7rwztjmz],
.modal-overlay[b-2e7rwztjmz] {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.modal-box[b-2e7rwztjmz] {
    background: var(--color-bg-primary);
    border-radius: var(--radius-xl);
    width: min(600px, 96vw);
    max-height: 80vh;
    overflow-y: auto;
    box-shadow: 0 20px 60px rgba(0,0,0,0.25);
}

.modal-header[b-2e7rwztjmz] {
    padding: var(--space-4) var(--space-6);
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
    font-weight: 700;
    font-size: 1.05rem;
}

.modal-header-success[b-2e7rwztjmz]  { background: #dcfce7; color: #166534; }
.modal-header-partial[b-2e7rwztjmz]  { background: #fef3c7; color: #92400e; }

.modal-body[b-2e7rwztjmz] { padding: var(--space-5) var(--space-6); }
.modal-footer[b-2e7rwztjmz] {
    padding: var(--space-4) var(--space-6);
    border-top: 1px solid var(--color-border);
    display: flex;
    justify-content: flex-end;
}

.result-stats[b-2e7rwztjmz] {
    display: flex;
    gap: var(--space-4);
    flex-wrap: wrap;
    margin-bottom: var(--space-4);
}

.result-stat[b-2e7rwztjmz] {
    text-align: center;
    min-width: 80px;
    background: var(--color-bg-secondary);
    border-radius: var(--radius-md);
    padding: var(--space-3);
}

.result-stat.success .stat-num[b-2e7rwztjmz] { color: var(--color-success, #16a34a); }
.result-stat.warn .stat-num[b-2e7rwztjmz]    { color: var(--color-warning, #d97706); }
.result-stat.muted .stat-num[b-2e7rwztjmz]   { color: var(--color-text-muted); }

.topic-breakdown[b-2e7rwztjmz] { list-style: none; padding: 0; margin: 0 0 var(--space-3); }
.topic-breakdown li[b-2e7rwztjmz] {
    display: flex;
    justify-content: space-between;
    padding: var(--space-1) 0;
    font-size: 0.85rem;
    border-bottom: 1px solid var(--color-border);
}

.topic-name[b-2e7rwztjmz] { color: var(--color-text-secondary); }

.error-list[b-2e7rwztjmz] {
    list-style: none;
    padding: 0;
    margin: 0;
    font-size: 0.8rem;
    color: #b91c1c;
}

.error-list li[b-2e7rwztjmz] { padding: var(--space-1) 0; border-bottom: 1px solid #fee2e2; }

/* ── Spinner ─────────────────────────────────────────────────────────── */
.spinner-sm[b-2e7rwztjmz] {
    width: 24px;
    height: 24px;
    border: 3px solid var(--color-border);
    border-top-color: var(--color-primary);
    border-radius: 50%;
    animation: raw-spin-b-2e7rwztjmz 0.6s linear infinite;
    margin: var(--space-2) auto;
}

.spinner-btn[b-2e7rwztjmz] {
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255,255,255,0.4);
    border-top-color: #fff;
    border-radius: 50%;
    animation: raw-spin-b-2e7rwztjmz 0.6s linear infinite;
    display: inline-block;
}

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

/* ── Responsive ─────────────────────────────────────────────────────── */
@media (max-width: 640px) {
    .import-raw-page[b-2e7rwztjmz] { padding: var(--space-3); }
    .import-raw-page .form-grid[b-2e7rwztjmz] { grid-template-columns: 1fr; }
    .import-raw-page .confirm-label[b-2e7rwztjmz] { width: 120px; }
    .import-raw-page .step-label[b-2e7rwztjmz] { display: none; }
}
/* /Pages/SuperAdmin/Questions/ViewQuestions.razor.rz.scp.css */
/* ViewQuestions.razor.css — Scoped styles for SuperAdmin Question Library */

.qv-container[b-a5my5bj2bi] {
    padding: var(--space-6);
    max-width: 1440px;
    margin: 0 auto;
}

/* ── Header ─────────────────────────────────── */
.qv-header[b-a5my5bj2bi] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-4);
    margin-bottom: var(--space-6);
    flex-wrap: wrap;
}

.qv-header-left h1[b-a5my5bj2bi] {
    font-size: var(--font-size-2xl);
    font-weight: 700;
    color: var(--color-neutral-900);
    margin: 0 0 var(--space-1) 0;
}

.qv-header-left p[b-a5my5bj2bi] {
    color: var(--color-neutral-500);
    font-size: var(--font-size-sm);
    margin: 0;
}

.qv-school-badge[b-a5my5bj2bi] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    background: var(--color-primary-50);
    color: var(--color-primary-700);
    border: 1px solid var(--color-primary-200);
    border-radius: var(--radius-full);
    padding: var(--space-1) var(--space-3);
    font-size: var(--font-size-sm);
    font-weight: 500;
    margin-top: var(--space-2);
}

/* ── Stats Bar ───────────────────────────────── */
.qv-stats-bar[b-a5my5bj2bi] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: var(--space-5);
    flex-wrap: wrap;
}

.qv-stat-total[b-a5my5bj2bi] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    background: var(--color-neutral-100);
    border-radius: var(--radius-lg);
    padding: var(--space-2) var(--space-4);
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--color-neutral-700);
    white-space: nowrap;
}

.qv-stat-total strong[b-a5my5bj2bi] {
    font-size: var(--font-size-xl);
    color: var(--color-primary-600);
}

.qv-stat-chips[b-a5my5bj2bi] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
}

.qv-chip[b-a5my5bj2bi] {
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-full);
    font-size: var(--font-size-xs);
    font-weight: 600;
    border: 1.5px solid transparent;
    transition: all 0.15s ease;
    white-space: nowrap;
    user-select: none;
}

.qv-chip-type[b-a5my5bj2bi] {
    background: var(--color-info-50);
    color: var(--color-info-700);
    border-color: var(--color-info-200);
}

.qv-chip-type:hover[b-a5my5bj2bi],
.qv-chip-type.active[b-a5my5bj2bi] {
    background: var(--color-info-600);
    color: white;
    border-color: var(--color-info-600);
}

.qv-chip-diff[b-a5my5bj2bi] {
    background: var(--color-neutral-50);
    color: var(--color-neutral-600);
    border-color: var(--color-neutral-200);
}

.qv-chip-diff:hover[b-a5my5bj2bi],
.qv-chip-diff.active[b-a5my5bj2bi] {
    background: var(--color-neutral-700);
    color: white;
    border-color: var(--color-neutral-700);
}

/* Difficulty color accents */
.qv-chip-diff[data-level="Easy"][b-a5my5bj2bi] { border-left: 3px solid var(--color-success-500); }
.qv-chip-diff[data-level="Medium"][b-a5my5bj2bi] { border-left: 3px solid var(--color-warning-500); }
.qv-chip-diff[data-level="Hard"][b-a5my5bj2bi] { border-left: 3px solid var(--color-danger-500); }

/* ── Filter Card ─────────────────────────────── */
.qv-filters-card[b-a5my5bj2bi] {
    background: var(--color-white);
    border: 1px solid var(--color-neutral-200);
    border-radius: var(--radius-xl);
    margin-bottom: var(--space-5);
    overflow: hidden;
}

.qv-filters-header[b-a5my5bj2bi] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-4) var(--space-5);
    cursor: pointer;
    user-select: none;
}

.qv-filters-header:hover[b-a5my5bj2bi] { background: var(--color-neutral-50); }

.qv-filters-header-left[b-a5my5bj2bi] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    font-weight: 600;
    color: var(--color-neutral-700);
}

.qv-filter-badge[b-a5my5bj2bi] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    background: var(--color-primary-600);
    color: white;
    border-radius: var(--radius-full);
    font-size: 11px;
    font-weight: 700;
}

.qv-filters-body[b-a5my5bj2bi] {
    padding: var(--space-5);
    border-top: 1px solid var(--color-neutral-100);
}

.qv-filters-grid[b-a5my5bj2bi] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: var(--space-4);
}

.qv-filter-wide[b-a5my5bj2bi] {
    grid-column: span 2;
}

.qv-filter-group[b-a5my5bj2bi] {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.qv-filter-group label[b-a5my5bj2bi] {
    font-size: var(--font-size-xs);
    font-weight: 600;
    color: var(--color-neutral-500);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.qv-filter-select[b-a5my5bj2bi],
.qv-filter-input[b-a5my5bj2bi] {
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--color-neutral-200);
    border-radius: var(--radius-md);
    font-size: var(--font-size-sm);
    color: var(--color-neutral-800);
    background: var(--color-white);
    transition: border-color 0.15s ease;
    width: 100%;
}

.qv-filter-select:focus[b-a5my5bj2bi],
.qv-filter-input:focus[b-a5my5bj2bi] {
    outline: none;
    border-color: var(--color-primary-400);
    box-shadow: 0 0 0 3px var(--color-primary-50);
}

.qv-multiselect[b-a5my5bj2bi] {
    height: 100px;
    resize: vertical;
}

.qv-filters-actions[b-a5my5bj2bi] {
    display: flex;
    justify-content: flex-end;
    gap: var(--space-3);
    padding-top: var(--space-4);
    border-top: 1px solid var(--color-neutral-100);
    margin-top: var(--space-4);
}

/* ── Buttons ─────────────────────────────────── */
.qv-btn-primary[b-a5my5bj2bi] {
    padding: var(--space-2) var(--space-5);
    background: var(--color-primary-600);
    color: white;
    border: none;
    border-radius: var(--radius-md);
    font-size: var(--font-size-sm);
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s ease;
}

.qv-btn-primary:hover[b-a5my5bj2bi] { background: var(--color-primary-700); }
.qv-btn-primary:disabled[b-a5my5bj2bi] { opacity: 0.5; cursor: not-allowed; }

.qv-btn-secondary[b-a5my5bj2bi] {
    padding: var(--space-2) var(--space-4);
    background: var(--color-white);
    color: var(--color-neutral-600);
    border: 1px solid var(--color-neutral-200);
    border-radius: var(--radius-md);
    font-size: var(--font-size-sm);
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s ease;
}

.qv-btn-secondary:hover[b-a5my5bj2bi] {
    background: var(--color-neutral-50);
    color: var(--color-neutral-800);
}

/* ── Results Header ──────────────────────────── */
.qv-results-header[b-a5my5bj2bi] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--space-3);
    margin-bottom: var(--space-4);
}

.qv-results-header h3[b-a5my5bj2bi] {
    font-size: var(--font-size-lg);
    font-weight: 600;
    color: var(--color-neutral-800);
    margin: 0;
}

.qv-results-info[b-a5my5bj2bi] {
    font-size: var(--font-size-sm);
    color: var(--color-neutral-500);
}

.qv-page-size-select[b-a5my5bj2bi] {
    padding: var(--space-1) var(--space-2);
    border: 1px solid var(--color-neutral-200);
    border-radius: var(--radius-md);
    font-size: var(--font-size-sm);
    background: var(--color-white);
}

/* ── Loading ─────────────────────────────────── */
.qv-loading[b-a5my5bj2bi] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
    padding: var(--space-12);
    color: var(--color-neutral-500);
    font-size: var(--font-size-sm);
}

.qv-spinner[b-a5my5bj2bi] {
    width: 24px;
    height: 24px;
    border: 3px solid var(--color-neutral-200);
    border-top-color: var(--color-primary-500);
    border-radius: 50%;
    animation: qv-spin-b-a5my5bj2bi 0.8s linear infinite;
}

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

/* ── Empty States ────────────────────────────── */
.qv-empty-state[b-a5my5bj2bi] {
    text-align: center;
    padding: var(--space-16) var(--space-6);
    color: var(--color-neutral-400);
}

.qv-empty-state .qv-empty-icon[b-a5my5bj2bi] {
    font-size: 48px;
    margin-bottom: var(--space-4);
}

.qv-empty-state h3[b-a5my5bj2bi] {
    font-size: var(--font-size-lg);
    font-weight: 600;
    color: var(--color-neutral-600);
    margin: 0 0 var(--space-2) 0;
}

.qv-empty-state p[b-a5my5bj2bi] {
    font-size: var(--font-size-sm);
    margin: 0;
}

/* ── Questions List ──────────────────────────── */
.qv-questions-list[b-a5my5bj2bi] {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

/* ── Pagination ──────────────────────────────── */
.qv-pagination[b-a5my5bj2bi] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: var(--space-6) 0;
    flex-wrap: wrap;
}

.qv-page-btn[b-a5my5bj2bi] {
    min-width: 36px;
    height: 36px;
    padding: 0 var(--space-2);
    background: var(--color-white);
    border: 1px solid var(--color-neutral-200);
    border-radius: var(--radius-md);
    font-size: var(--font-size-sm);
    font-weight: 500;
    color: var(--color-neutral-600);
    cursor: pointer;
    transition: all 0.15s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.qv-page-btn:hover:not(:disabled)[b-a5my5bj2bi] {
    background: var(--color-primary-50);
    border-color: var(--color-primary-300);
    color: var(--color-primary-700);
}

.qv-page-btn:disabled[b-a5my5bj2bi] {
    opacity: 0.4;
    cursor: not-allowed;
}

.qv-page-btn.active[b-a5my5bj2bi] {
    background: var(--color-primary-600);
    border-color: var(--color-primary-600);
    color: white;
    font-weight: 700;
}

.qv-page-info[b-a5my5bj2bi] {
    font-size: var(--font-size-sm);
    color: var(--color-neutral-500);
    padding: 0 var(--space-2);
}

/* ── Responsive ───────────────────────────────── */
@media (max-width: 768px) {
    .qv-container[b-a5my5bj2bi] { padding: var(--space-4); }
    .qv-filters-grid[b-a5my5bj2bi] { grid-template-columns: 1fr; }
    .qv-filter-wide[b-a5my5bj2bi] { grid-column: span 1; }
    .qv-stats-bar[b-a5my5bj2bi] { gap: var(--space-2); }
    .qv-results-header[b-a5my5bj2bi] { flex-direction: column; align-items: flex-start; }
}
/* /Pages/SuperAdmin/SchemaComparison/Index.razor.rz.scp.css */
/* =====================================================
   Index.razor.css — SuperAdmin Schema Comparison page
   ===================================================== */

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

.header-left[b-lils8z11x8] { display: flex; align-items: center; gap: 0.875rem; }
.header-icon[b-lils8z11x8] { font-size: 1.75rem; color: var(--color-primary-600); }
.page-title[b-lils8z11x8]  { font-size: 1.5rem; font-weight: 700; color: var(--color-neutral-900); margin: 0; }
.page-subtitle[b-lils8z11x8] { font-size: 0.875rem; color: var(--color-neutral-500); margin: 0; }

.btn-compare[b-lils8z11x8] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 1.4rem;
    background: var(--color-primary-600);
    color: #fff;
    border: none;
    border-radius: var(--radius-md);
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
}
.btn-compare:disabled[b-lils8z11x8] { opacity: 0.6; cursor: not-allowed; }

.safety-notice[b-lils8z11x8],
.comparison-incomplete[b-lils8z11x8] {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 1rem 1.25rem;
    margin-bottom: 1rem;
    border: 1px solid var(--color-primary-200);
    border-radius: var(--radius-md);
    background: var(--color-primary-50);
    color: var(--color-neutral-700);
}

.safety-notice i[b-lils8z11x8],
.comparison-incomplete i[b-lils8z11x8] {
    margin-top: 0.15rem;
    color: var(--color-primary-600);
}

.safety-notice div[b-lils8z11x8],
.comparison-incomplete div[b-lils8z11x8] {
    display: grid;
    gap: 0.15rem;
}

.safety-notice span[b-lils8z11x8],
.comparison-incomplete span[b-lils8z11x8] {
    font-size: 0.82rem;
    color: var(--color-neutral-600);
}

.environment-overview[b-lils8z11x8] {
    display: grid;
    gap: var(--spacing-3);
    margin-bottom: var(--spacing-4);
    padding-block: var(--spacing-3);
    border-block: 1px solid var(--color-neutral-200);
}

.environment-overview-heading[b-lils8z11x8],
.overview-item-heading[b-lils8z11x8] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-3);
}

.environment-overview-heading h2[b-lils8z11x8] {
    margin: 0;
    color: var(--color-neutral-900);
    font-size: 1rem;
}

.environment-overview-heading span[b-lils8z11x8],
.overview-item-heading span[b-lils8z11x8],
.environment-overview-item p[b-lils8z11x8],
.overview-loading[b-lils8z11x8] {
    color: var(--color-neutral-500);
    font-size: 0.78rem;
}

.environment-overview-grid[b-lils8z11x8] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
    gap: var(--spacing-3);
}

.environment-overview-item[b-lils8z11x8] {
    display: grid;
    gap: var(--spacing-3);
    min-width: 0;
    padding: var(--spacing-3);
    border: 1px solid var(--color-neutral-200);
    border-left-width: var(--spacing-1);
    border-radius: var(--radius-sm);
    background: var(--color-neutral-0);
}

.overview-item-heading div[b-lils8z11x8] {
    display: grid;
    min-width: 0;
}

.overview-item-heading strong[b-lils8z11x8] {
    overflow-wrap: anywhere;
    color: var(--color-neutral-900);
}

.overview-status[b-lils8z11x8] {
    flex: 0 0 auto;
    font-weight: 700;
}

.overview-counts[b-lils8z11x8] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-3);
    color: var(--color-neutral-600);
    font-size: 0.78rem;
}

.overview-current[b-lils8z11x8] { border-left-color: var(--color-success-500); }
.overview-drifted[b-lils8z11x8] { border-left-color: var(--color-warning-500); }
.overview-blocked[b-lils8z11x8],
.overview-unavailable[b-lils8z11x8] { border-left-color: var(--color-danger-500); }
.overview-running[b-lils8z11x8] { border-left-color: var(--color-primary-500); }

.profile-grid[b-lils8z11x8] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 2.75rem minmax(0, 1fr);
    align-items: center;
    margin-bottom: 1rem;
}

.profile-panel[b-lils8z11x8] {
    display: grid;
    gap: 0.5rem;
    padding: 1rem;
    border: 1px solid var(--color-neutral-200);
    border-radius: var(--radius-md);
    background: var(--color-neutral-0, #fff);
}

.profile-heading[b-lils8z11x8] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--color-neutral-100);
}

.profile-heading span[b-lils8z11x8] { font-weight: 700; color: var(--color-neutral-900); }
.profile-heading small[b-lils8z11x8] { color: var(--color-neutral-500); }
.profile-panel label[b-lils8z11x8] { font-size: 0.75rem; font-weight: 700; color: var(--color-neutral-600); }

.profile-input[b-lils8z11x8] {
    width: 100%;
    min-height: 2.75rem;
    padding: 0.55rem 0.7rem;
    border: 1px solid var(--color-neutral-300);
    border-radius: var(--radius-sm);
    background: var(--color-neutral-0, #fff);
    color: var(--color-neutral-900);
}

.profile-input:focus[b-lils8z11x8] {
    outline: 2px solid var(--color-primary-200);
    border-color: var(--color-primary-500);
}

.connection-detail[b-lils8z11x8] {
    display: grid;
    gap: var(--spacing-1);
    min-height: 4.5rem;
    padding: var(--spacing-3);
    border: 1px solid var(--color-neutral-200);
    border-radius: var(--radius-sm);
    background: var(--color-neutral-50);
}

.connection-detail span[b-lils8z11x8],
.connection-detail small[b-lils8z11x8] {
    color: var(--color-neutral-500);
    font-size: 0.75rem;
}

.connection-detail strong[b-lils8z11x8] {
    overflow-wrap: anywhere;
    color: var(--color-neutral-900);
    font-family: var(--font-family-mono);
    font-size: 0.82rem;
}

.connection-examples[b-lils8z11x8] {
    border-top: 1px solid var(--color-neutral-200);
    padding-top: var(--spacing-2);
}

.connection-examples summary[b-lils8z11x8] {
    color: var(--color-primary-700);
    cursor: pointer;
    font-size: 0.78rem;
    font-weight: 700;
}

.connection-examples div[b-lils8z11x8] {
    display: grid;
    gap: var(--spacing-1);
    margin-top: var(--spacing-2);
}

.connection-examples span[b-lils8z11x8] {
    color: var(--color-neutral-500);
    font-size: 0.72rem;
}

.connection-examples code[b-lils8z11x8] {
    overflow-wrap: anywhere;
    padding: var(--spacing-2);
    border-radius: var(--radius-sm);
    background: var(--color-neutral-100);
    color: var(--color-neutral-800);
    font-size: 0.72rem;
    white-space: normal;
}

.profile-warning[b-lils8z11x8] {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    margin-bottom: var(--spacing-3);
    padding: var(--spacing-3);
    border: 1px solid var(--color-warning-200);
    border-radius: var(--radius-sm);
    background: var(--color-warning-50);
    color: var(--color-warning-800);
    font-size: 0.82rem;
}

.direction-indicator[b-lils8z11x8] {
    display: grid;
    place-items: center;
    color: var(--color-primary-600);
}

.btn-swap[b-lils8z11x8] {
    width: 2.75rem;
    height: 2.75rem;
    border: 1px solid var(--color-primary-200);
    border-radius: var(--radius-md);
    background: var(--color-primary-50);
    color: var(--color-primary-700);
    cursor: pointer;
}

.secret-input[b-lils8z11x8] { position: relative; }
.secret-input .profile-input[b-lils8z11x8] { padding-right: 3rem; }
.secret-input button[b-lils8z11x8] {
    position: absolute;
    top: 0;
    right: 0;
    width: 2.75rem;
    height: 2.75rem;
    border: 0;
    background: transparent;
    color: var(--color-neutral-600);
    cursor: pointer;
}

.custom-profile-actions[b-lils8z11x8] {
    display: flex;
    gap: var(--spacing-2);
}

.compare-actions[b-lils8z11x8] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.75rem;
}

.profile-help[b-lils8z11x8] { font-size: 0.78rem; color: var(--color-neutral-500); }

.plan-actions[b-lils8z11x8] {
    position: sticky;
    top: calc(var(--topbar-height, 4rem) + var(--spacing-2));
    z-index: 10;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--spacing-2);
    margin-bottom: var(--spacing-4);
    padding: var(--spacing-3);
    border: 1px solid var(--color-neutral-200);
    border-radius: var(--radius-sm);
    background: var(--color-neutral-0);
    box-shadow: var(--shadow-sm);
}

.backup-input[b-lils8z11x8] { max-width: 20rem; }
.retention-note[b-lils8z11x8] { width: 100%; font-size: 0.78rem; color: var(--color-neutral-500); }
.dry-run-status[b-lils8z11x8] {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-2);
    margin-bottom: var(--spacing-3);
    padding: var(--spacing-3);
    border: 1px solid;
    border-radius: var(--radius-sm);
}

.dry-run-status div[b-lils8z11x8] { display: grid; gap: var(--spacing-1); }
.dry-run-status span[b-lils8z11x8] { font-size: 0.78rem; }
.dry-run-status code[b-lils8z11x8] { overflow-wrap: anywhere; font-size: 0.7rem; }
.dry-run-ready[b-lils8z11x8] { border-color: var(--color-primary-200); background: var(--color-primary-50); color: var(--color-primary-800); }
.dry-run-error[b-lils8z11x8] { border-color: var(--color-danger-200); background: var(--color-danger-50); color: var(--color-danger-700); }
.execution-result[b-lils8z11x8] {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-2);
    margin-bottom: var(--spacing-3);
    padding: var(--spacing-3);
    border: 1px solid;
    border-radius: var(--radius-sm);
}

.execution-result div[b-lils8z11x8] { display: grid; gap: var(--spacing-1); }
.execution-result span[b-lils8z11x8] { font-size: 0.82rem; }
.execution-result code[b-lils8z11x8] { overflow-wrap: anywhere; font-size: 0.72rem; }
.execution-result-success[b-lils8z11x8] { border-color: var(--color-success-300); background: var(--color-success-50); color: var(--color-success-800); }
.execution-result-failed[b-lils8z11x8] { border-color: var(--color-danger-300); background: var(--color-danger-50); color: var(--color-danger-800); }
.workflow-monitor[b-lils8z11x8] {
    display: grid;
    gap: var(--spacing-3);
    margin-bottom: var(--spacing-4);
    padding-block: var(--spacing-3);
    border-block: 1px solid var(--color-neutral-200);
}

.workflow-monitor-active[b-lils8z11x8] {
    position: sticky;
    top: calc(var(--topbar-height, 4rem) + 5.5rem);
    z-index: 9;
    padding: var(--spacing-3);
    background: var(--color-neutral-0);
    box-shadow: var(--shadow-sm);
}

.workflow-heading[b-lils8z11x8],
.workflow-heading div[b-lils8z11x8],
.workflow-checkpoints[b-lils8z11x8],
.workflow-log-entry[b-lils8z11x8],
.rehearsal-warning[b-lils8z11x8] {
    display: flex;
    align-items: center;
}

.workflow-heading[b-lils8z11x8] { justify-content: space-between; gap: var(--spacing-3); }
.workflow-heading div[b-lils8z11x8] { align-items: baseline; gap: var(--spacing-2); }
.workflow-heading span[b-lils8z11x8] { color: var(--color-neutral-500); font-size: 0.78rem; }
.workflow-percent[b-lils8z11x8] { color: var(--color-primary-700) !important; font-weight: 700; }
.workflow-track[b-lils8z11x8] {
    overflow: hidden;
    width: 100%;
    height: var(--spacing-2);
    border-radius: var(--radius-full);
    background: var(--color-neutral-200);
}

.workflow-bar[b-lils8z11x8] {
    height: 100%;
    border-radius: inherit;
    background: var(--color-primary-600);
    transition: width 300ms ease;
}

.workflow-bar-indeterminate[b-lils8z11x8] {
    width: 35% !important;
    animation: schema-progress-indeterminate-b-lils8z11x8 1.4s ease-in-out infinite;
}

@keyframes schema-progress-indeterminate-b-lils8z11x8 {
    from { transform: translateX(-100%); }
    to { transform: translateX(300%); }
}

.workflow-bar-failed[b-lils8z11x8] { background: var(--color-danger-500); }
.workflow-checkpoints[b-lils8z11x8] { justify-content: space-between; color: var(--color-neutral-400); font-size: 0.72rem; font-weight: 700; }
.checkpoint-complete[b-lils8z11x8] { color: var(--color-success-700); }
.workflow-log[b-lils8z11x8] { max-height: 10rem; overflow: auto; border-top: 1px solid var(--color-neutral-100); padding-top: var(--spacing-2); }
.workflow-log summary[b-lils8z11x8] { cursor: pointer; color: var(--color-neutral-800); font-size: 0.82rem; font-weight: 700; }
.workflow-log p[b-lils8z11x8] { color: var(--color-neutral-500); font-size: 0.78rem; }
.workflow-log-entry[b-lils8z11x8] {
    align-items: flex-start;
    gap: var(--spacing-2);
    padding-block: var(--spacing-2);
    border-bottom: 1px solid var(--color-neutral-100);
    font-size: 0.75rem;
}

.workflow-log-entry time[b-lils8z11x8] { flex: 0 0 auto; color: var(--color-neutral-500); font-family: var(--font-family-mono); }
.workflow-log-entry strong[b-lils8z11x8] { flex: 0 0 auto; color: var(--color-neutral-800); }
.workflow-log-entry span[b-lils8z11x8] { overflow-wrap: anywhere; color: var(--color-neutral-600); }
.rehearsal-warning[b-lils8z11x8] { align-items: flex-start; gap: var(--spacing-2); color: var(--color-warning-800); font-size: 0.76rem; }
.rehearsal-warning i[b-lils8z11x8] { margin-top: var(--spacing-1); }
.script-preview[b-lils8z11x8] {
    max-height: 28rem;
    overflow: auto;
    padding: var(--spacing-4);
    border: 1px solid var(--color-neutral-200);
    border-radius: var(--radius-md);
    background: var(--color-neutral-900);
    color: var(--color-neutral-50);
    white-space: pre-wrap;
    font-size: 0.78rem;
}

.script-details[b-lils8z11x8] { margin-bottom: var(--spacing-4); }
.script-details summary[b-lils8z11x8] { cursor: pointer; color: var(--color-neutral-800); font-size: 0.82rem; font-weight: 700; }
.script-details .script-preview[b-lils8z11x8] { margin-top: var(--spacing-2); }

/* ── Environment Status Cards ─────────────────────── */
.env-status-row[b-lils8z11x8] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    margin-bottom: 1.75rem;
}

.env-card[b-lils8z11x8] {
    border-radius: var(--radius-md);
    padding: 1rem 1.25rem;
    border: 1px solid var(--color-neutral-200);
    background: var(--color-neutral-0, #fff);
}

.env-ok[b-lils8z11x8]    { border-left: 4px solid var(--color-success-500); }
.env-error[b-lils8z11x8] { border-left: 4px solid var(--color-error-400, #f87171); }

.summary-card[b-lils8z11x8] { border-left: 4px solid var(--color-primary-500); }

.env-card-label[b-lils8z11x8] {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-neutral-400);
    margin-bottom: 0.35rem;
}

.env-card-value[b-lils8z11x8] {
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: 0.2rem;
}
.val-ok[b-lils8z11x8]   { color: var(--color-success-600); }
.val-warn[b-lils8z11x8] { color: var(--color-warning-600); }

.env-card-sub[b-lils8z11x8] {
    font-size: 0.78rem;
    color: var(--color-neutral-500);
}

.env-card-pending[b-lils8z11x8] {
    margin-top: 0.4rem;
    font-size: 0.75rem;
    color: var(--color-warning-700);
    font-weight: 600;
}

.env-error-msg[b-lils8z11x8] {
    color: var(--color-error-600, #dc2626);
    margin-top: 0.4rem;
    font-size: 0.75rem;
}

.comparison-incomplete[b-lils8z11x8] {
    border-color: var(--color-warning-200);
    background: var(--color-warning-50);
}

.comparison-incomplete i[b-lils8z11x8] { color: var(--color-warning-600); }

.migration-ledger[b-lils8z11x8] {
    display: grid;
    gap: var(--spacing-3);
    margin-bottom: var(--spacing-4);
    padding: var(--spacing-4);
    border: 1px solid var(--color-warning-200);
    border-radius: var(--radius-md);
    background: var(--color-warning-50);
}

.migration-ledger-heading[b-lils8z11x8] {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-3);
    color: var(--color-neutral-800);
}

.migration-ledger-heading > i[b-lils8z11x8] {
    margin-top: var(--spacing-1);
    color: var(--color-warning-700);
}

.migration-ledger-heading div[b-lils8z11x8] {
    display: grid;
    gap: var(--spacing-1);
}

.migration-ledger-heading span[b-lils8z11x8],
.migration-ledger-environment p[b-lils8z11x8] {
    margin: 0;
    color: var(--color-neutral-600);
    font-size: 0.82rem;
}

.migration-ledger-environments[b-lils8z11x8] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--spacing-3);
}

.migration-ledger-environment[b-lils8z11x8] {
    min-width: 0;
    padding: var(--spacing-3);
    border: 1px solid var(--color-neutral-200);
    border-radius: var(--radius-sm);
    background: var(--color-neutral-0);
}

.migration-ledger-environment summary[b-lils8z11x8] {
    display: flex;
    justify-content: space-between;
    gap: var(--spacing-2);
    color: var(--color-neutral-800);
    cursor: pointer;
}

.migration-ledger-environment summary strong[b-lils8z11x8] {
    color: var(--color-warning-800);
    font-size: 0.78rem;
}

.migration-ledger-environment ul[b-lils8z11x8] {
    max-height: 14rem;
    overflow: auto;
    margin: var(--spacing-3) 0 0;
    padding-left: var(--spacing-5);
}

.migration-ledger-environment li[b-lils8z11x8] {
    padding-block: var(--spacing-1);
    overflow-wrap: anywhere;
    color: var(--color-neutral-700);
    font-size: 0.78rem;
}

.migration-ledger-environment code[b-lils8z11x8] { white-space: normal; }

/* ── All In Sync ──────────────────────────────────── */
.all-in-sync[b-lils8z11x8] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1.5rem;
    background: var(--color-success-50);
    border: 1px solid var(--color-success-200);
    border-radius: var(--radius-md);
    color: var(--color-success-800);
    font-weight: 600;
    font-size: 1rem;
}

.all-in-sync i[b-lils8z11x8] { font-size: 1.5rem; color: var(--color-success-500); }

/* ── Filter Tabs ──────────────────────────────────── */
.filter-tabs[b-lils8z11x8] {
    display: flex;
    gap: 0.4rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}

.filter-toolbar[b-lils8z11x8] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}

.difference-navigation[b-lils8z11x8] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-3);
    margin-bottom: var(--spacing-2);
    color: var(--color-neutral-600);
    font-size: 0.78rem;
}

.difference-navigation div[b-lils8z11x8] { display: flex; align-items: center; gap: var(--spacing-2); }
.difference-navigation .btn-secondary[b-lils8z11x8] { min-width: 2.75rem; min-height: 2.75rem; }
.difference-navigation-bottom[b-lils8z11x8] { margin-top: var(--spacing-3); margin-bottom: var(--spacing-4); }

.search-box[b-lils8z11x8] {
    position: relative;
    flex: 0 1 20rem;
}

.search-box i[b-lils8z11x8] {
    position: absolute;
    left: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--color-neutral-400);
}

.search-box input[b-lils8z11x8] {
    width: 100%;
    min-height: 2.25rem;
    padding: 0.4rem 0.75rem 0.4rem 2.25rem;
    border: 1px solid var(--color-neutral-200);
    border-radius: var(--radius-md);
}

.tab[b-lils8z11x8] {
    padding: 0.3rem 0.8rem;
    border-radius: 999px;
    border: 1px solid var(--color-neutral-200);
    background: var(--color-neutral-50);
    color: var(--color-neutral-600);
    font-size: 0.78rem;
    font-weight: 500;
    cursor: pointer;
}
.tab.active[b-lils8z11x8], .tab:hover[b-lils8z11x8] {
    background: var(--color-primary-600);
    border-color: var(--color-primary-600);
    color: #fff;
}

/* ── Diff Table ───────────────────────────────────── */
.diff-table-wrap[b-lils8z11x8] {
    overflow-x: auto;
    border-radius: var(--radius-md);
    border: 1px solid var(--color-neutral-200);
}

.diff-table[b-lils8z11x8] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.83rem;
}

.diff-table th[b-lils8z11x8] {
    position: sticky;
    top: 0;
    z-index: 1;
    background: var(--color-neutral-50);
    padding: 0.6rem 0.75rem;
    text-align: left;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-neutral-500);
    border-bottom: 1px solid var(--color-neutral-200);
}

@media (max-width: 767px) {
    .migration-ledger-environments[b-lils8z11x8] { grid-template-columns: 1fr; }
    .difference-navigation[b-lils8z11x8] { align-items: flex-start; flex-direction: column; }
    .difference-navigation div[b-lils8z11x8] { width: 100%; justify-content: space-between; }
}

.diff-table td[b-lils8z11x8] {
    padding: 0.5rem 0.75rem;
    border-bottom: 1px solid var(--color-neutral-100);
    vertical-align: middle;
}

.diff-row:last-child td[b-lils8z11x8] { border-bottom: none; }
.diff-row:hover td[b-lils8z11x8] { filter: brightness(0.97); }

/* Row backgrounds */
.diff-critical td[b-lils8z11x8] { background: #fff1f1; }
.diff-warn     td[b-lils8z11x8] { background: #fffbeb; }
.diff-info     td[b-lils8z11x8] { background: #f0f6ff; }

/* Left accent border via first cell */
.accent-col[b-lils8z11x8] { padding-left: 0.55rem !important; }
.diff-critical .accent-col[b-lils8z11x8] { border-left: 4px solid var(--color-error-500, #ef4444) !important; }
.diff-warn     .accent-col[b-lils8z11x8] { border-left: 4px solid var(--color-warning-500, #f59e0b) !important; }
.diff-info     .accent-col[b-lils8z11x8] { border-left: 4px solid var(--color-primary-400, #60a5fa) !important; }

/* Highlighted cell text */
.text-critical[b-lils8z11x8] {
    color: var(--color-error-700, #b91c1c);
    font-weight: 700;
}
.text-warn-col[b-lils8z11x8] {
    color: var(--color-warning-700, #b45309);
    font-weight: 700;
}

.env-col[b-lils8z11x8] { text-align: center; width: 60px; }
.approval-col[b-lils8z11x8] { width: 7.5rem; }
.approve-all-control[b-lils8z11x8] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-2);
    min-height: 2.25rem;
    padding: var(--spacing-1) var(--spacing-2);
    border: 1px solid var(--color-primary-500);
    border-radius: var(--radius-sm);
    background: var(--color-primary-50);
    color: var(--color-primary-700);
    font: inherit;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
}
.approve-all-control:hover[b-lils8z11x8] { background: var(--color-primary-100); }
.schema-approval-checkbox[b-lils8z11x8] {
    -webkit-appearance: auto !important;
    appearance: auto !important;
    width: 1.125rem;
    height: 1.125rem;
    margin: 0;
    accent-color: var(--color-primary-600);
    cursor: pointer;
}
.env-yes[b-lils8z11x8] { color: var(--color-success-500); }
.env-no[b-lils8z11x8]  { color: var(--color-error-400, #f87171); }

.mono[b-lils8z11x8] { font-family: monospace; font-size: 0.8rem; }
.desc[b-lils8z11x8] { color: var(--color-neutral-600); }

.kind-badge[b-lils8z11x8] {
    display: inline-block;
    padding: 0.15rem 0.5rem;
    border-radius: 4px;
    font-size: 0.7rem;
    font-weight: 700;
    white-space: nowrap;
}
.diff-critical .kind-badge[b-lils8z11x8] { background: var(--color-error-100, #fee2e2); color: var(--color-error-700, #b91c1c); }
.diff-warn     .kind-badge[b-lils8z11x8] { background: var(--color-warning-100); color: var(--color-warning-800); }
.diff-info     .kind-badge[b-lils8z11x8] { background: var(--color-primary-100); color: var(--color-primary-700); }

/* ── Empty state ──────────────────────────────────── */
.empty-state[b-lils8z11x8] {
    text-align: center;
    padding: 4rem 2rem;
    color: var(--color-neutral-400);
}
.empty-state i[b-lils8z11x8] { font-size: 3rem; display: block; margin-bottom: 1rem; }

/* ── Responsive ───────────────────────────────────── */
@media (max-width: 768px) {
    .profile-grid[b-lils8z11x8] { grid-template-columns: 1fr; gap: 0.75rem; }
    .direction-indicator[b-lils8z11x8] { transform: rotate(90deg); }
    .compare-actions[b-lils8z11x8], .filter-toolbar[b-lils8z11x8] { align-items: stretch; flex-direction: column; }
    .search-box[b-lils8z11x8] { flex-basis: auto; }
    .env-status-row[b-lils8z11x8] { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
    .env-status-row[b-lils8z11x8] { grid-template-columns: 1fr; }
}
/* /Pages/SuperAdmin/Schools/Subscription.razor.rz.scp.css */
/* ─── Layout ──────────────────────────────────────────────────────────────── */
.sub-container[b-vy6dqc3icm] {
    padding: var(--space-6);
    max-width: 1200px;
    margin: 0 auto;
}

.sub-header[b-vy6dqc3icm] {
    display: flex;
    align-items: flex-start;
    gap: var(--space-4);
    margin-bottom: var(--space-6);
}

.btn-back[b-vy6dqc3icm] {
    background: none;
    border: none;
    color: var(--color-primary-600);
    cursor: pointer;
    font-size: var(--text-sm);
    padding: var(--space-2);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    gap: var(--space-2);
    white-space: nowrap;
    margin-top: 4px;
}

.btn-back:hover[b-vy6dqc3icm] { background: var(--color-primary-50); }

.page-title[b-vy6dqc3icm] {
    font-size: var(--text-2xl);
    font-weight: var(--font-bold);
    color: var(--color-neutral-900);
    margin: 0;
}

.page-subtitle[b-vy6dqc3icm] {
    color: var(--color-neutral-500);
    margin: var(--space-1) 0 0;
    font-size: var(--text-sm);
}

/* ─── States ──────────────────────────────────────────────────────────────── */
.loading-state[b-vy6dqc3icm] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-16) 0;
    color: var(--color-neutral-500);
}

.empty-state[b-vy6dqc3icm],
.no-sub[b-vy6dqc3icm] {
    color: var(--color-neutral-400);
    font-style: italic;
    padding: var(--space-4) 0;
}

/* ─── Section Cards ───────────────────────────────────────────────────────── */
.section-card[b-vy6dqc3icm] {
    background: var(--color-white);
    border: 1px solid var(--color-neutral-200);
    border-radius: var(--radius-lg);
    padding: var(--space-6);
    margin-bottom: var(--space-5);
}

.section-title[b-vy6dqc3icm] {
    font-size: var(--text-lg);
    font-weight: var(--font-semibold);
    color: var(--color-neutral-900);
    margin: 0 0 var(--space-4);
}

.section-header-row[b-vy6dqc3icm] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--space-3);
}

.section-hint[b-vy6dqc3icm] {
    font-size: var(--text-sm);
    color: var(--color-neutral-500);
    margin: 0 0 var(--space-4);
}

/* ─── Subscription Info ───────────────────────────────────────────────────── */
.sub-info[b-vy6dqc3icm] {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    margin-bottom: var(--space-5);
    flex-wrap: wrap;
}

.sub-plan-badge[b-vy6dqc3icm] {
    font-size: var(--text-lg);
    font-weight: var(--font-bold);
    padding: var(--space-2) var(--space-5);
    border-radius: var(--radius-full);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.sub-plan-badge.plan-basic[b-vy6dqc3icm]    { background: var(--color-neutral-100); color: var(--color-neutral-700); }
.sub-plan-badge.plan-standard[b-vy6dqc3icm] { background: var(--color-primary-100); color: var(--color-primary-700); }
.sub-plan-badge.plan-premium[b-vy6dqc3icm]  { background: var(--color-amber-100, #fef3c7); color: #92400e; }

.sub-details[b-vy6dqc3icm] {
    display: flex;
    gap: var(--space-4);
    font-size: var(--text-sm);
    color: var(--color-neutral-600);
    flex-wrap: wrap;
}

/* ─── Plan Change Form ────────────────────────────────────────────────────── */
.plan-change-form[b-vy6dqc3icm] {
    border-top: 1px solid var(--color-neutral-100);
    padding-top: var(--space-4);
}

.form-label[b-vy6dqc3icm] {
    display: block;
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    color: var(--color-neutral-700);
    margin-bottom: var(--space-2);
}

.form-row[b-vy6dqc3icm] {
    display: flex;
    gap: var(--space-3);
    align-items: flex-end;
    flex-wrap: wrap;
}

.form-select[b-vy6dqc3icm],
.form-input[b-vy6dqc3icm] {
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--color-neutral-300);
    border-radius: var(--radius-md);
    font-size: var(--text-sm);
    color: var(--color-neutral-900);
    background: var(--color-white);
}

.form-select[b-vy6dqc3icm] { min-width: 180px; }

.msg-ok[b-vy6dqc3icm]  { color: var(--color-success-600); font-size: var(--text-sm); margin-top: var(--space-2); }
.msg-err[b-vy6dqc3icm] { color: var(--color-danger-600);  font-size: var(--text-sm); margin-top: var(--space-2); }

/* ─── Overrides Table ─────────────────────────────────────────────────────── */
.overrides-table-wrap[b-vy6dqc3icm] { overflow-x: auto; }

.overrides-table[b-vy6dqc3icm] {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--text-sm);
}

.overrides-table th[b-vy6dqc3icm] {
    background: var(--color-neutral-50);
    border-bottom: 2px solid var(--color-neutral-200);
    padding: var(--space-3) var(--space-4);
    text-align: left;
    font-weight: var(--font-semibold);
    color: var(--color-neutral-700);
    white-space: nowrap;
}

.overrides-table td[b-vy6dqc3icm] {
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--color-neutral-100);
    vertical-align: middle;
}

.overrides-table tr:hover td[b-vy6dqc3icm] { background: var(--color-neutral-50); }

.row-expired td[b-vy6dqc3icm] { opacity: 0.6; }

.feature-name[b-vy6dqc3icm] {
    display: block;
    font-weight: var(--font-medium);
    color: var(--color-neutral-800);
}

.feature-code[b-vy6dqc3icm] {
    font-family: monospace;
    font-size: 11px;
    color: var(--color-neutral-400);
    background: var(--color-neutral-100);
    padding: 1px 4px;
    border-radius: 3px;
}

.reason-cell[b-vy6dqc3icm] {
    max-width: 180px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--color-neutral-500);
}

/* Badges */
.badge-yes[b-vy6dqc3icm]     { color: var(--color-success-700); background: var(--color-success-50); padding: 2px 8px; border-radius: var(--radius-full); font-size: var(--text-xs); font-weight: var(--font-semibold); }
.badge-no[b-vy6dqc3icm]      { color: var(--color-danger-700);  background: var(--color-danger-50);  padding: 2px 8px; border-radius: var(--radius-full); font-size: var(--text-xs); font-weight: var(--font-semibold); }
.badge-expired[b-vy6dqc3icm] { color: var(--color-warning-700); background: var(--color-warning-50); padding: 2px 8px; border-radius: var(--radius-full); font-size: var(--text-xs); margin-left: var(--space-1); }

.expiry-future[b-vy6dqc3icm]  { color: var(--color-neutral-600); }
.expiry-past[b-vy6dqc3icm]    { color: var(--color-danger-600); }
.expiry-permanent[b-vy6dqc3icm] { color: var(--color-neutral-400); font-style: italic; }

/* Action buttons */
.icon-btn[b-vy6dqc3icm] {
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: var(--radius-sm);
    font-size: var(--text-sm);
    transition: background 0.15s;
}

.edit-btn[b-vy6dqc3icm] { color: var(--color-primary-600); }
.edit-btn:hover[b-vy6dqc3icm] { background: var(--color-primary-50); }

.del-btn[b-vy6dqc3icm] { color: var(--color-danger-500); }
.del-btn:hover[b-vy6dqc3icm] { background: var(--color-danger-50); }

/* ─── Override Drawer ─────────────────────────────────────────────────────── */
.drawer-overlay[b-vy6dqc3icm] {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.4);
    z-index: 9000;
    display: flex;
    justify-content: flex-end;
}

.drawer[b-vy6dqc3icm] {
    background: var(--color-white);
    width: 420px;
    max-width: 100vw;
    height: 100%;
    display: flex;
    flex-direction: column;
    box-shadow: var(--shadow-xl);
}

.drawer-header[b-vy6dqc3icm] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-5);
    border-bottom: 1px solid var(--color-neutral-200);
}

.drawer-header h3[b-vy6dqc3icm] {
    font-size: var(--text-lg);
    font-weight: var(--font-semibold);
    margin: 0;
}

.drawer-body[b-vy6dqc3icm] {
    flex: 1;
    overflow-y: auto;
    padding: var(--space-5);
}

.drawer-footer[b-vy6dqc3icm] {
    padding: var(--space-5);
    border-top: 1px solid var(--color-neutral-200);
    display: flex;
    gap: var(--space-3);
    justify-content: flex-end;
    align-items: center;
    flex-wrap: wrap;
}

.form-group[b-vy6dqc3icm] {
    margin-bottom: var(--space-4);
}

.form-input[b-vy6dqc3icm],
.form-textarea[b-vy6dqc3icm] {
    display: block;
    width: 100%;
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--color-neutral-300);
    border-radius: var(--radius-md);
    font-size: var(--text-sm);
    color: var(--color-neutral-900);
    background: var(--color-white);
}

.form-textarea[b-vy6dqc3icm] { resize: vertical; }

.toggle-row[b-vy6dqc3icm] {
    display: flex;
    gap: var(--space-2);
}

.toggle-btn[b-vy6dqc3icm] {
    flex: 1;
    padding: var(--space-2);
    border: 1px solid var(--color-neutral-300);
    border-radius: var(--radius-md);
    cursor: pointer;
    background: var(--color-white);
    font-size: var(--text-sm);
    color: var(--color-neutral-600);
    transition: all 0.15s;
}

.quota-grid[b-vy6dqc3icm] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--space-4);
}

.toggle-btn.active[b-vy6dqc3icm] {
    background: var(--color-primary-600);
    color: var(--color-white);
    border-color: var(--color-primary-600);
    font-weight: var(--font-semibold);
}

/* ─── Mobile ──────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
    .sub-container[b-vy6dqc3icm] { padding: var(--space-4); }
    .form-row[b-vy6dqc3icm] { flex-direction: column; }
    .form-select[b-vy6dqc3icm], .form-input[b-vy6dqc3icm] { width: 100%; }
    .section-header-row[b-vy6dqc3icm] { flex-direction: column; align-items: flex-start; gap: var(--space-3); }
    .drawer[b-vy6dqc3icm] { width: 100%; }
}
/* /Pages/SuperAdmin/Students/FlexibleImport.razor.rz.scp.css */
/* ============================================================
   Flexible Student Import — FlexibleImport.razor.css
   ============================================================ */

/* Page wrapper */
.fi-page[b-oz2ooaox46] {
    padding: 1.5rem;
    max-width: 960px;
    margin: 0 auto;
}

/* Header */
.fi-header[b-oz2ooaox46] { margin-bottom: 1.75rem; }
.fi-title[b-oz2ooaox46] {
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--color-neutral-900);
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 0.25rem;
}
.fi-title i[b-oz2ooaox46] { color: var(--color-primary-600); }
.fi-subtitle[b-oz2ooaox46] { font-size: 0.875rem; color: var(--color-neutral-500); }

/* ── Step bar ─────────────────────────────────────────── */
.fi-steps[b-oz2ooaox46] {
    display: flex;
    align-items: center;
    gap: 0;
    margin-bottom: 2rem;
    overflow-x: auto;
    padding-bottom: 0.25rem;
}
.fi-step[b-oz2ooaox46] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.3rem;
    flex-shrink: 0;
}
.fi-step-circle[b-oz2ooaox46] {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--color-neutral-200);
    color: var(--color-neutral-500);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    font-weight: 700;
    transition: background 0.2s, color 0.2s;
}
.fi-step--active .fi-step-circle[b-oz2ooaox46] {
    background: var(--color-primary-600);
    color: #fff;
}
.fi-step--done .fi-step-circle[b-oz2ooaox46] {
    background: var(--color-success-600, #16a34a);
    color: #fff;
}
.fi-step-label[b-oz2ooaox46] {
    font-size: 0.7rem;
    color: var(--color-neutral-500);
    font-weight: 600;
    white-space: nowrap;
}
.fi-step--active .fi-step-label[b-oz2ooaox46] { color: var(--color-primary-700); }
.fi-step--done .fi-step-label[b-oz2ooaox46]   { color: var(--color-success-700, #15803d); }

.fi-step-line[b-oz2ooaox46] {
    flex: 1;
    height: 2px;
    background: var(--color-neutral-200);
    min-width: 32px;
    margin-bottom: 1.2rem;
    transition: background 0.2s;
}
.fi-step-line--done[b-oz2ooaox46] { background: var(--color-success-600, #16a34a); }

/* ── Card ─────────────────────────────────────────────── */
.fi-card[b-oz2ooaox46] {
    background: var(--color-white, #fff);
    border: 1px solid var(--color-neutral-150, #e5e7eb);
    border-radius: 10px;
    padding: 1.75rem;
    box-shadow: 0 1px 4px rgba(0,0,0,0.06);
}
.fi-card-title[b-oz2ooaox46] {
    font-size: 1rem;
    font-weight: 700;
    color: var(--color-neutral-900);
    margin-bottom: 0.25rem;
}
.fi-card-sub[b-oz2ooaox46] {
    font-size: 0.85rem;
    color: var(--color-neutral-500);
    margin-bottom: 1.25rem;
}

/* ── Form grid ────────────────────────────────────────── */
.fi-form-grid[b-oz2ooaox46] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem 1.25rem;
    margin-bottom: 1.25rem;
}
@media (max-width: 600px) {
    .fi-form-grid[b-oz2ooaox46] { grid-template-columns: 1fr; }
}
.fi-field[b-oz2ooaox46] { display: flex; flex-direction: column; gap: 0.3rem; }
.fi-label[b-oz2ooaox46] { font-size: 0.78rem; font-weight: 600; color: var(--color-neutral-600); }
.fi-label-hint[b-oz2ooaox46] { font-size: 0.7rem; font-weight: 400; color: var(--color-neutral-400); }
.fi-required[b-oz2ooaox46] { color: var(--color-danger-600, #dc2626); }
.fi-select[b-oz2ooaox46] {
    width: 100%;
    padding: 0.45rem 0.75rem;
    border: 1px solid var(--color-neutral-300);
    border-radius: 6px;
    font-size: 0.875rem;
    background: var(--color-white, #fff);
    color: var(--color-neutral-900);
    height: 38px;
}
.fi-select:focus[b-oz2ooaox46] { outline: none; border-color: var(--color-primary-500); }

/* ── Upload area ──────────────────────────────────────── */
.fi-upload-area[b-oz2ooaox46] {
    border: 2px dashed var(--color-neutral-300);
    border-radius: 8px;
    padding: 2rem;
    text-align: center;
    cursor: pointer;
    transition: border-color 0.2s, background 0.2s;
    position: relative;
    background: var(--color-neutral-50, #f9fafb);
}
.fi-upload-area:hover[b-oz2ooaox46] { border-color: var(--color-primary-400); background: var(--color-primary-50, #eff6ff); }
.fi-file-input[b-oz2ooaox46] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}
.fi-upload-label[b-oz2ooaox46] { cursor: pointer; display: block; }
.fi-upload-icon[b-oz2ooaox46]  { font-size: 2.5rem; color: var(--color-primary-400); margin-bottom: 0.5rem; }
.fi-upload-hint[b-oz2ooaox46]  { font-size: 0.9rem; color: var(--color-neutral-600); margin-bottom: 0.2rem; }
.fi-upload-sub[b-oz2ooaox46]   { font-size: 0.78rem; color: var(--color-neutral-400); }

.fi-file-badge[b-oz2ooaox46] {
    margin-top: 1rem;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.3rem 0.75rem;
    background: var(--color-success-50, #f0fdf4);
    border: 1px solid var(--color-success-300, #86efac);
    border-radius: 20px;
    font-size: 0.82rem;
    color: var(--color-success-700, #15803d);
}
.fi-file-size[b-oz2ooaox46] { color: var(--color-neutral-400); font-size: 0.75rem; }

/* ── Action buttons ───────────────────────────────────── */
.fi-actions[b-oz2ooaox46] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-top: 1.5rem;
    flex-wrap: wrap;
}
.fi-btn[b-oz2ooaox46] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.55rem 1.25rem;
    border-radius: 6px;
    font-size: 0.875rem;
    font-weight: 600;
    border: none;
    cursor: pointer;
    transition: background 0.15s, opacity 0.15s;
}
.fi-btn:disabled[b-oz2ooaox46] { opacity: 0.6; cursor: not-allowed; }
.fi-btn--primary[b-oz2ooaox46]  { background: var(--color-primary-600); color: #fff; }
.fi-btn--primary:hover:not(:disabled)[b-oz2ooaox46]  { background: var(--color-primary-700); }
.fi-btn--ghost[b-oz2ooaox46]    { background: transparent; color: var(--color-neutral-600); border: 1px solid var(--color-neutral-300); }
.fi-btn--ghost:hover:not(:disabled)[b-oz2ooaox46] { background: var(--color-neutral-100); }

/* ── Mapping table ────────────────────────────────────── */
.fi-map-table[b-oz2ooaox46] { margin-bottom: 0.5rem; }
.fi-map-header[b-oz2ooaox46] {
    display: grid;
    grid-template-columns: 2fr 2fr 110px;
    gap: 1rem;
    padding: 0.5rem 0.75rem;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-neutral-400);
    border-bottom: 1px solid var(--color-neutral-200);
    margin-bottom: 0.25rem;
}
.fi-map-row[b-oz2ooaox46] {
    display: grid;
    grid-template-columns: 2fr 2fr 110px;
    gap: 1rem;
    padding: 0.55rem 0.75rem;
    border-bottom: 1px solid var(--color-neutral-100);
    align-items: center;
}
.fi-map-row--required[b-oz2ooaox46] { background: var(--color-neutral-25, #fdfdfd); }
.fi-map-field[b-oz2ooaox46] { display: flex; flex-direction: column; gap: 0.1rem; }
.fi-map-label[b-oz2ooaox46] { font-size: 0.85rem; font-weight: 600; color: var(--color-neutral-800); }
.fi-map-desc[b-oz2ooaox46]  { font-size: 0.75rem; color: var(--color-neutral-400); }
.fi-map-select[b-oz2ooaox46] { font-size: 0.82rem; height: 34px; }
.fi-map-req[b-oz2ooaox46]   { display: flex; align-items: center; }

/* ── Badges ───────────────────────────────────────────── */
.fi-badge[b-oz2ooaox46] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.15rem 0.5rem;
    border-radius: 12px;
    font-size: 0.72rem;
    font-weight: 600;
}
.fi-badge--red[b-oz2ooaox46]    { background: var(--color-danger-100, #fee2e2); color: var(--color-danger-700, #b91c1c); }
.fi-badge--orange[b-oz2ooaox46] { background: #fff3e0; color: #b45309; }
.fi-badge--green[b-oz2ooaox46]  { background: var(--color-success-100, #dcfce7); color: var(--color-success-700, #15803d); }
.fi-badge--grey[b-oz2ooaox46]   { background: var(--color-neutral-100); color: var(--color-neutral-500); }

/* ── Preview stats ────────────────────────────────────── */
.fi-preview-stats[b-oz2ooaox46] {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 1.25rem;
}
.fi-stat[b-oz2ooaox46] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.2rem;
    min-width: 80px;
    padding: 0.75rem 1rem;
    border-radius: 8px;
    flex: 1;
}
.fi-stat-num[b-oz2ooaox46]   { font-size: 1.6rem; font-weight: 800; line-height: 1; }
.fi-stat-label[b-oz2ooaox46] { font-size: 0.72rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; }
.fi-stat--blue[b-oz2ooaox46]   { background: var(--color-primary-50, #eff6ff); color: var(--color-primary-700); }
.fi-stat--green[b-oz2ooaox46]  { background: var(--color-success-50, #f0fdf4); color: var(--color-success-700, #15803d); }
.fi-stat--red[b-oz2ooaox46]    { background: var(--color-danger-50, #fef2f2);  color: var(--color-danger-700, #b91c1c); }
.fi-stat--purple[b-oz2ooaox46] { background: #f5f3ff; color: #6d28d9; }
.fi-stat--grey[b-oz2ooaox46]   { background: var(--color-neutral-100); color: var(--color-neutral-600); }

/* ── Preview grid ─────────────────────────────────────── */
.fi-grid-wrap[b-oz2ooaox46] { overflow-x: auto; margin-bottom: 0.75rem; border-radius: 6px; border: 1px solid var(--color-neutral-200); }
.fi-grid[b-oz2ooaox46] { width: 100%; border-collapse: collapse; font-size: 0.82rem; }
.fi-grid thead tr[b-oz2ooaox46] { background: var(--color-neutral-50, #f9fafb); }
.fi-grid th[b-oz2ooaox46] {
    padding: 0.55rem 0.75rem;
    text-align: left;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-neutral-500);
    border-bottom: 1px solid var(--color-neutral-200);
    white-space: nowrap;
}
.fi-grid td[b-oz2ooaox46] { padding: 0.45rem 0.75rem; border-bottom: 1px solid var(--color-neutral-100); color: var(--color-neutral-800); white-space: nowrap; }
.fi-grid-row--error td[b-oz2ooaox46] { background: var(--color-danger-50, #fef2f2); }
.fi-preview-more[b-oz2ooaox46] { font-size: 0.8rem; color: var(--color-neutral-400); text-align: center; padding: 0.5rem 0; }
.fi-message[b-oz2ooaox46] { font-size: 0.83rem; color: var(--color-neutral-500); padding: 0.25rem 0; }

/* ── Result icon ──────────────────────────────────────── */
.fi-result-icon[b-oz2ooaox46] {
    display: flex;
    justify-content: center;
    margin-bottom: 0.75rem;
}
.fi-result-icon i[b-oz2ooaox46] { font-size: 3rem; }
.fi-result-icon--green i[b-oz2ooaox46] { color: var(--color-success-500, #22c55e); }
.fi-result-icon--orange i[b-oz2ooaox46] { color: #f59e0b; }

/* ── Errors table ─────────────────────────────────────── */
.fi-errors[b-oz2ooaox46] { margin-top: 1.25rem; }
.fi-errors-title[b-oz2ooaox46] { font-size: 0.85rem; font-weight: 700; color: var(--color-danger-700, #b91c1c); margin-bottom: 0.5rem; }

/* ── Responsive ───────────────────────────────────────── */
@media (max-width: 768px) {
    .fi-page[b-oz2ooaox46] { padding: 1rem; }
    .fi-card[b-oz2ooaox46] { padding: 1.25rem 1rem; }
    .fi-map-header[b-oz2ooaox46],
    .fi-map-row[b-oz2ooaox46] { grid-template-columns: 1fr 1fr; }
    .fi-map-req[b-oz2ooaox46] { display: none; }
}
/* /Pages/SupportStaff/Cleaning/Index.razor.rz.scp.css */

/* /Pages/SupportStaff/Dashboard.razor.rz.scp.css */
/* Styles handled via Tailwind utility classes in markup */
/* /Pages/SupportStaff/Inbox/Index.razor.rz.scp.css */
/* Styles handled via Tailwind utility classes in markup */
/* /Pages/SupportStaff/Maintenance/Index.razor.rz.scp.css */

/* /Pages/SupportStaff/Reports/Index.razor.rz.scp.css */

/* /Pages/SupportStaff/Requests/Index.razor.rz.scp.css */

/* /Pages/SupportStaff/Security/Index.razor.rz.scp.css */

/* /Pages/SupportStaff/Settings/Index.razor.rz.scp.css */

/* /Pages/SupportStaff/Tasks/Index.razor.rz.scp.css */

/* /Pages/SupportStaff/Transport/Index.razor.rz.scp.css */

/* /Pages/Teacher/Admissions/Details.razor.rz.scp.css */
/* Styles handled via Tailwind utility classes in markup */
/* /Pages/Teacher/Admissions/Index.razor.rz.scp.css */
/* Styles handled via Tailwind utility classes in markup */
/* /Pages/Teacher/Agent/GeneratePaper.razor.rz.scp.css */
.agent-page[b-c66lccqs2t] {
    padding: var(--space-6);
    max-width: 900px;
    margin: 0 auto;
}

.agent-header[b-c66lccqs2t] {
    margin-bottom: var(--space-6);
}

.page-title[b-c66lccqs2t] {
    font-size: var(--font-size-2xl);
    font-weight: 700;
    color: var(--color-text-primary);
    margin: 0 0 var(--space-2) 0;
}

.page-subtitle[b-c66lccqs2t] {
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
    margin: 0;
}

/* Card */
.card[b-c66lccqs2t] {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--space-6);
    margin-bottom: var(--space-6);
}

/* Spinner */
.spinner-wrap[b-c66lccqs2t] {
    display: flex;
    justify-content: center;
    padding: var(--space-10);
}

.spinner[b-c66lccqs2t] {
    width: 36px;
    height: 36px;
    border: 3px solid var(--color-border);
    border-top-color: var(--color-primary);
    border-radius: 50%;
    animation: spin-b-c66lccqs2t 0.7s linear infinite;
    display: inline-block;
}

.spinner-sm[b-c66lccqs2t] {
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255,255,255,0.4);
    border-top-color: #fff;
    border-radius: 50%;
    animation: spin-b-c66lccqs2t 0.7s linear infinite;
    display: inline-block;
    vertical-align: middle;
    margin-right: var(--space-2);
}

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

/* Slider */
.slider-section[b-c66lccqs2t] {
    margin: var(--space-6) 0;
}

.slider-label[b-c66lccqs2t] {
    display: block;
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    margin-bottom: var(--space-2);
}

.bank-slider[b-c66lccqs2t] {
    width: 100%;
    cursor: pointer;
    accent-color: var(--color-primary);
}

.slider-ticks[b-c66lccqs2t] {
    display: flex;
    justify-content: space-between;
    font-size: var(--font-size-xs);
    color: var(--color-text-tertiary);
    margin-top: var(--space-1);
}

/* Sections */
.sections-panel[b-c66lccqs2t] {
    margin: var(--space-4) 0;
}

.sections-header[b-c66lccqs2t] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: var(--space-3);
}

.section-title-label[b-c66lccqs2t] {
    font-weight: 600;
    font-size: var(--font-size-sm);
    color: var(--color-text-primary);
}

.section-row[b-c66lccqs2t] {
    display: grid;
    grid-template-columns: 160px 80px 90px 1fr 36px;
    gap: var(--space-3);
    align-items: end;
    background: var(--color-background);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-3);
    margin-bottom: var(--space-2);
}

.field[b-c66lccqs2t] {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.field label[b-c66lccqs2t] {
    font-size: var(--font-size-xs);
    color: var(--color-text-secondary);
    font-weight: 500;
}

.field input[b-c66lccqs2t],
.field select[b-c66lccqs2t] {
    height: 36px;
    padding: 0 var(--space-2);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    font-size: var(--font-size-sm);
    background: var(--color-surface);
    color: var(--color-text-primary);
}

.btn-remove[b-c66lccqs2t] {
    height: 36px;
    width: 36px;
    background: var(--color-error-light, #fee2e2);
    color: var(--color-error, #dc2626);
    border: none;
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    align-self: end;
}

.btn-remove:hover[b-c66lccqs2t] {
    background: var(--color-error, #dc2626);
    color: #fff;
}

/* Buttons */
.form-actions[b-c66lccqs2t] {
    display: flex;
    justify-content: flex-end;
    margin-top: var(--space-6);
    padding-top: var(--space-4);
    border-top: 1px solid var(--color-border);
}

.btn[b-c66lccqs2t] {
    padding: var(--space-2) var(--space-5);
    border-radius: var(--radius-md);
    font-size: var(--font-size-sm);
    font-weight: 600;
    cursor: pointer;
    border: none;
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    transition: opacity 0.15s;
}

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

.btn-primary[b-c66lccqs2t] {
    background: var(--color-primary);
    color: #fff;
    min-width: 160px;
    justify-content: center;
}

.btn-primary:hover:not(:disabled)[b-c66lccqs2t] {
    opacity: 0.88;
}

.btn-secondary[b-c66lccqs2t] {
    background: var(--color-surface);
    color: var(--color-text-primary);
    border: 1px solid var(--color-border);
}

.btn-sm[b-c66lccqs2t] {
    padding: var(--space-1) var(--space-3);
    font-size: var(--font-size-xs);
}

/* Results */
.results-panel[b-c66lccqs2t] {
}

.results-title[b-c66lccqs2t] {
    font-size: var(--font-size-lg);
    font-weight: 700;
    margin: 0 0 var(--space-3) 0;
    color: var(--color-text-primary);
}

.results-meta[b-c66lccqs2t] {
    display: flex;
    gap: var(--space-2);
    flex-wrap: wrap;
    margin-bottom: var(--space-4);
}

.badge[b-c66lccqs2t] {
    padding: var(--space-1) var(--space-3);
    border-radius: 999px;
    font-size: var(--font-size-xs);
    font-weight: 600;
}

.badge-bank[b-c66lccqs2t] {
    background: var(--color-info-light, #dbeafe);
    color: var(--color-info, #1d4ed8);
}

.badge-ai[b-c66lccqs2t] {
    background: var(--color-success-light, #dcfce7);
    color: var(--color-success, #16a34a);
}

.badge-total[b-c66lccqs2t] {
    background: var(--color-background);
    color: var(--color-text-secondary);
    border: 1px solid var(--color-border);
}

.results-list[b-c66lccqs2t] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.result-item[b-c66lccqs2t] {
    display: flex;
    gap: var(--space-3);
    align-items: flex-start;
    padding: var(--space-3);
    background: var(--color-background);
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border);
    font-size: var(--font-size-sm);
}

.q-number[b-c66lccqs2t] {
    font-weight: 700;
    color: var(--color-primary);
    min-width: 36px;
    flex-shrink: 0;
}

.q-data[b-c66lccqs2t] {
    color: var(--color-text-primary);
    word-break: break-word;
}

/* Responsive */
@media (max-width: 768px) {
    .agent-page[b-c66lccqs2t] {
        padding: var(--space-3);
    }

    .section-row[b-c66lccqs2t] {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto auto auto;
    }

    .btn-remove[b-c66lccqs2t] {
        grid-column: 2;
        justify-self: end;
    }
}

/* ── Topics (micro-chapters) panel ── */
.topics-panel[b-c66lccqs2t] {
    margin: var(--space-4) 0 var(--space-2) 0;
    padding: var(--space-4);
    background: var(--color-background);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
}

.topics-header[b-c66lccqs2t] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: var(--space-3);
}

.topics-label[b-c66lccqs2t] {
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--color-text-primary);
}

.topics-hint[b-c66lccqs2t] {
    font-weight: 400;
    color: var(--color-text-tertiary);
    font-size: var(--font-size-xs);
}

.btn-link-sm[b-c66lccqs2t] {
    background: none;
    border: none;
    color: var(--color-primary);
    font-size: var(--font-size-xs);
    cursor: pointer;
    padding: 0;
    text-decoration: underline;
    margin-left: auto;
}

.topics-empty[b-c66lccqs2t] {
    font-size: var(--font-size-sm);
    color: var(--color-text-tertiary);
    margin: 0;
    padding: var(--space-2) 0;
}

.topics-grid[b-c66lccqs2t] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.topic-chip[b-c66lccqs2t] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-1) var(--space-3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-full, 999px);
    background: var(--color-surface);
    color: var(--color-text-primary);
    font-size: var(--font-size-xs);
    cursor: pointer;
    transition: all 0.15s ease;
    white-space: nowrap;
}

.topic-chip:hover[b-c66lccqs2t] {
    border-color: var(--color-primary);
    color: var(--color-primary);
}

.topic-chip--active[b-c66lccqs2t] {
    background: var(--color-primary-light, #eff6ff);
    border-color: var(--color-primary);
    color: var(--color-primary);
    font-weight: 600;
}

.topic-count[b-c66lccqs2t] {
    background: rgba(0,0,0,0.08);
    border-radius: var(--radius-full, 999px);
    padding: 1px 6px;
    font-size: 10px;
}
/* /Pages/Teacher/Agent/QAGenerator.razor.rz.scp.css */
/* QAGenerator.razor.css — Q&A Generator page */

/* ── Loading ────────────────────────────────────────────────── */
.qa-loading[b-q7bkhkbexj] {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 40vh;
}

.qa-spinner[b-q7bkhkbexj] {
    width: 2.5rem;
    height: 2.5rem;
    border: 3px solid var(--color-neutral-200);
    border-top-color: var(--color-primary-600);
    border-radius: 50%;
    animation: qa-spin-b-q7bkhkbexj 0.8s linear infinite;
}

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

/* ── Page wrapper ───────────────────────────────────────────── */
.qa-page[b-q7bkhkbexj] {
    padding: var(--spacing-6);
    max-width: 1280px;
    margin: 0 auto;
}

/* ── Header ─────────────────────────────────────────────────── */
.qa-header[b-q7bkhkbexj] {
    display: flex;
    align-items: center;
    gap: var(--spacing-4);
    margin-bottom: var(--spacing-6);
}

.qa-header-icon[b-q7bkhkbexj] {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-lg);
    background: var(--color-primary-100);
    color: var(--color-primary-600);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.375rem;
    flex-shrink: 0;
}

.qa-title[b-q7bkhkbexj] {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--color-neutral-900);
    margin: 0 0 var(--spacing-1) 0;
}

.qa-subtitle[b-q7bkhkbexj] {
    font-size: 0.875rem;
    color: var(--color-neutral-500);
    margin: 0;
}

/* ── Two-column layout ──────────────────────────────────────── */
.qa-layout[b-q7bkhkbexj] {
    display: grid;
    grid-template-columns: 420px 1fr;
    gap: var(--spacing-6);
    align-items: start;
}

@media (max-width: 900px) {
    .qa-page[b-q7bkhkbexj] { padding: var(--spacing-4); }
    .qa-layout[b-q7bkhkbexj] { grid-template-columns: 1fr; }
}

/* ── Cards ──────────────────────────────────────────────────── */
.qa-card[b-q7bkhkbexj] {
    background: var(--color-neutral-0, #fff);
    border: 1px solid var(--color-neutral-200);
    border-radius: var(--radius-lg);
    overflow: hidden;
    margin-bottom: var(--spacing-4);
}

.qa-card-header[b-q7bkhkbexj] {
    padding: var(--spacing-3) var(--spacing-4);
    background: var(--color-neutral-50);
    border-bottom: 1px solid var(--color-neutral-200);
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-neutral-700);
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
}

.qa-card-body[b-q7bkhkbexj] {
    padding: var(--spacing-4);
}

/* ── Form elements ──────────────────────────────────────────── */
.qa-textarea[b-q7bkhkbexj] {
    width: 100%;
    border: 1px solid var(--color-neutral-300);
    border-radius: var(--radius-md);
    padding: var(--spacing-3);
    font-size: 0.875rem;
    color: var(--color-neutral-800);
    resize: vertical;
    font-family: inherit;
    line-height: 1.6;
    box-sizing: border-box;
    transition: border-color 0.15s;
}

.qa-textarea:focus[b-q7bkhkbexj] {
    outline: none;
    border-color: var(--color-primary-500);
    box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.08);
}

.qa-textarea:disabled[b-q7bkhkbexj] { opacity: 0.6; background: var(--color-neutral-50); }

.qa-char-count[b-q7bkhkbexj] {
    font-size: 0.75rem;
    color: var(--color-neutral-400);
    text-align: right;
    margin-top: var(--spacing-1);
}

.qa-row[b-q7bkhkbexj] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-3);
}

.qa-field[b-q7bkhkbexj] {
    margin-bottom: var(--spacing-4);
}

.qa-label[b-q7bkhkbexj] {
    display: block;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--color-neutral-700);
    margin-bottom: var(--spacing-1);
}

.qa-required[b-q7bkhkbexj] { color: var(--color-danger-500); margin-left: 2px; }
.qa-optional[b-q7bkhkbexj] { color: var(--color-neutral-400); font-weight: 400; }

.qa-select[b-q7bkhkbexj] {
    width: 100%;
    height: 38px;
    padding: 0 var(--spacing-3);
    border: 1px solid var(--color-neutral-300);
    border-radius: var(--radius-md);
    font-size: 0.875rem;
    color: var(--color-neutral-800);
    background: #fff;
    cursor: pointer;
    transition: border-color 0.15s;
}

.qa-select:focus[b-q7bkhkbexj] { outline: none; border-color: var(--color-primary-500); }
.qa-select:disabled[b-q7bkhkbexj] { opacity: 0.6; background: var(--color-neutral-50); cursor: not-allowed; }

/* ── Slider ─────────────────────────────────────────────────── */
.qa-slider[b-q7bkhkbexj] {
    width: 100%;
    cursor: pointer;
    accent-color: var(--color-primary-600);
}

.qa-slider-ticks[b-q7bkhkbexj] {
    display: flex;
    justify-content: space-between;
    margin-top: var(--spacing-1);
    font-size: 0.75rem;
    color: var(--color-neutral-400);
}

/* ── Error ──────────────────────────────────────────────────── */
.qa-error[b-q7bkhkbexj] {
    background: var(--color-danger-50, #fef2f2);
    border: 1px solid var(--color-danger-200, #fecaca);
    color: var(--color-danger-700, #b91c1c);
    border-radius: var(--radius-md);
    padding: var(--spacing-3) var(--spacing-4);
    font-size: 0.875rem;
    margin-bottom: var(--spacing-3);
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
}

/* ── Generate button ────────────────────────────────────────── */
.qa-btn-generate[b-q7bkhkbexj] {
    width: 100%;
    padding: var(--spacing-3) var(--spacing-4);
    background: var(--color-primary-600);
    color: #fff;
    border: none;
    border-radius: var(--radius-md);
    font-size: 0.9375rem;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-2);
    transition: background 0.15s, opacity 0.15s;
}

.qa-btn-generate:hover:not(:disabled)[b-q7bkhkbexj] { background: var(--color-primary-700); }
.qa-btn-generate:disabled[b-q7bkhkbexj] { opacity: 0.65; cursor: not-allowed; }

.qa-btn-spinner[b-q7bkhkbexj] {
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255,255,255,0.4);
    border-top-color: #fff;
    border-radius: 50%;
    animation: qa-spin-b-q7bkhkbexj 0.7s linear infinite;
    display: inline-block;
}

/* ── Empty / generating state ───────────────────────────────── */
.qa-empty[b-q7bkhkbexj] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 300px;
    text-align: center;
    padding: var(--spacing-8);
    background: var(--color-neutral-0, #fff);
    border: 1px solid var(--color-neutral-200);
    border-radius: var(--radius-lg);
}

.qa-empty-icon[b-q7bkhkbexj] {
    font-size: 2.5rem;
    color: var(--color-neutral-300);
    margin-bottom: var(--spacing-4);
}

.qa-empty-title[b-q7bkhkbexj] {
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-neutral-600);
    margin: 0 0 var(--spacing-2) 0;
}

.qa-empty-sub[b-q7bkhkbexj] {
    font-size: 0.875rem;
    color: var(--color-neutral-400);
    margin: 0;
}

.qa-gen-spinner[b-q7bkhkbexj] {
    width: 40px;
    height: 40px;
    border: 3px solid var(--color-primary-100);
    border-top-color: var(--color-primary-600);
    border-radius: 50%;
    animation: qa-spin-b-q7bkhkbexj 0.9s linear infinite;
    margin-bottom: var(--spacing-4);
}

/* ── Results header ─────────────────────────────────────────── */
.qa-results-header[b-q7bkhkbexj] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--spacing-4);
}

.qa-results-count[b-q7bkhkbexj] {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-neutral-700);
}

.qa-btn-copy[b-q7bkhkbexj] {
    padding: var(--spacing-1) var(--spacing-3);
    border: 1px solid var(--color-neutral-300);
    border-radius: var(--radius-md);
    background: #fff;
    font-size: 0.8125rem;
    color: var(--color-neutral-600);
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: var(--spacing-1);
    transition: border-color 0.15s, color 0.15s;
}

.qa-btn-copy:hover[b-q7bkhkbexj] { border-color: var(--color-primary-500); color: var(--color-primary-600); }

/* ── Result cards ───────────────────────────────────────────── */
.qa-result-card[b-q7bkhkbexj] {
    background: var(--color-neutral-0, #fff);
    border: 1px solid var(--color-neutral-200);
    border-radius: var(--radius-lg);
    padding: var(--spacing-4);
    margin-bottom: var(--spacing-4);
}

.qa-result-header[b-q7bkhkbexj] {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    margin-bottom: var(--spacing-3);
}

.qa-result-num[b-q7bkhkbexj] {
    font-weight: 700;
    font-size: 0.875rem;
    color: var(--color-neutral-600);
}

.qa-badge[b-q7bkhkbexj] {
    font-size: 0.6875rem;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: var(--radius-full, 9999px);
    letter-spacing: 0.02em;
}

.qa-badge-type[b-q7bkhkbexj] {
    background: var(--color-primary-100);
    color: var(--color-primary-700);
}

.qa-badge-diff[b-q7bkhkbexj] { background: var(--color-neutral-100); color: var(--color-neutral-600); }
.qa-diff-easy[b-q7bkhkbexj]  { background: #dcfce7; color: #15803d; }
.qa-diff-medium[b-q7bkhkbexj] { background: #fef3c7; color: #b45309; }
.qa-diff-hard[b-q7bkhkbexj]   { background: #fee2e2; color: #b91c1c; }

.qa-question-text[b-q7bkhkbexj] {
    font-size: 0.9375rem;
    color: var(--color-neutral-900);
    margin: 0 0 var(--spacing-3) 0;
    line-height: 1.6;
    font-weight: 500;
}

.qa-options[b-q7bkhkbexj] {
    list-style: none;
    padding: 0;
    margin: 0 0 var(--spacing-3) 0;
}

.qa-options li[b-q7bkhkbexj] {
    font-size: 0.875rem;
    color: var(--color-neutral-700);
    padding: var(--spacing-1) 0;
    padding-left: var(--spacing-3);
    border-left: 2px solid var(--color-neutral-200);
    margin-bottom: var(--spacing-1);
}

.qa-answer-block[b-q7bkhkbexj] {
    background: var(--color-success-50, #f0fdf4);
    border: 1px solid var(--color-success-200, #bbf7d0);
    border-radius: var(--radius-md);
    padding: var(--spacing-3);
    margin-bottom: var(--spacing-2);
}

.qa-answer-label[b-q7bkhkbexj] {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--color-success-700, #15803d);
    margin-bottom: var(--spacing-1);
    display: flex;
    align-items: center;
    gap: var(--spacing-1);
}

.qa-answer-text[b-q7bkhkbexj] {
    font-size: 0.875rem;
    color: var(--color-neutral-800);
    margin: 0;
    line-height: 1.6;
}

.qa-explanation[b-q7bkhkbexj] {
    font-size: 0.8125rem;
    color: var(--color-neutral-600);
    margin-bottom: var(--spacing-2);
    line-height: 1.5;
}

.qa-explanation-label[b-q7bkhkbexj] {
    font-weight: 600;
    color: var(--color-neutral-700);
}

.qa-hint[b-q7bkhkbexj] {
    font-size: 0.8125rem;
    color: var(--color-warning-700, #b45309);
    font-style: italic;
    display: flex;
    align-items: center;
    gap: var(--spacing-1);
}
/* /Pages/Teacher/Analytics/StudentPerformance/Index.razor.rz.scp.css */
/* Styles handled via Tailwind utility classes in markup */
/* /Pages/Teacher/Announcements/Index.razor.rz.scp.css */
/* Teacher Announcements Page */
/* /Pages/Teacher/Assignments/Create.razor.rz.scp.css */
/* Assignment Wizard Container */
.assignment-wizard-container[b-e5lrz531rw] {
    min-height: 100vh;
    background: var(--color-neutral-50);
    padding: var(--spacing-6);
}

/* Wizard Header */
.wizard-header[b-e5lrz531rw] {
    background: white;
    border-radius: var(--radius-lg);
    padding: var(--spacing-6);
    margin-bottom: var(--spacing-6);
    box-shadow: var(--shadow-sm);
}

.back-btn[b-e5lrz531rw] {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-2);
    padding: var(--spacing-2) var(--spacing-4);
    background: transparent;
    border: 1px solid var(--color-neutral-300);
    border-radius: var(--radius-md);
    color: var(--color-neutral-700);
    font-size: var(--font-size-sm);
    cursor: pointer;
    transition: all 0.2s;
    margin-bottom: var(--spacing-4);
}

.back-btn:hover[b-e5lrz531rw] {
    background: var(--color-neutral-100);
    border-color: var(--color-primary-500);
    color: var(--color-primary-600);
}

.wizard-title[b-e5lrz531rw] {
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-neutral-900);
    margin-bottom: var(--spacing-6);
}

/* Progress Stepper */
.stepper-container[b-e5lrz531rw] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
}

.step[b-e5lrz531rw] {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
    cursor: pointer;
    transition: all 0.3s ease-in-out;
}

.step:hover:not(.active):not(.completed) .step-circle[b-e5lrz531rw] {
    transform: scale(1.08);
    border-color: var(--color-primary-400);
    box-shadow: 0 0 0 3px rgba(var(--color-primary-rgb, 79 70 229) / 0.15);
}

.step:hover:not(.active):not(.completed) .step-title[b-e5lrz531rw] {
    color: var(--color-primary-600);
}

.step.active .step-circle[b-e5lrz531rw] {
    background: var(--color-primary-600);
    color: white;
    border-color: var(--color-primary-600);
    transform: scale(1.1);
}

.step.completed .step-circle[b-e5lrz531rw] {
    background: var(--color-success-600);
    color: white;
    border-color: var(--color-success-600);
}

.step-circle[b-e5lrz531rw] {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 3px solid var(--color-neutral-300);
    background: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-lg);
    color: var(--color-neutral-600);
    transition: all 0.3s ease-in-out;
    z-index: 2;
    position: relative;
}

.step-label[b-e5lrz531rw] {
    text-align: center;
    margin-top: var(--spacing-2);
}

.step-title[b-e5lrz531rw] {
    font-weight: var(--font-weight-semibold);
    font-size: var(--font-size-sm);
    color: var(--color-neutral-900);
    margin-bottom: 2px;
}

.step-description[b-e5lrz531rw] {
    font-size: var(--font-size-xs);
    color: var(--color-neutral-600);
}

.step-description[b-e5lrz531rw] {
    font-size: var(--font-size-xs);
    color: var(--color-neutral-600);
}

.step.active .step-title[b-e5lrz531rw] {
    color: var(--color-primary-700);
}

/* Step tooltip hint */
.step:not(.active):not(.completed)[b-e5lrz531rw]::after {
    content: "Click to navigate";
    position: absolute;
    bottom: -24px;
    left: 50%;
    transform: translateX(-50%) translateY(4px);
    background: var(--color-neutral-800);
    color: white;
    font-size: 10px;
    padding: 3px 6px;
    border-radius: 4px;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: all 0.2s ease-in-out;
}

.step:not(.active):not(.completed):hover[b-e5lrz531rw]::after {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

.step-connector[b-e5lrz531rw] {
    position: absolute;
    height: 3px;
    background: var(--color-neutral-300);
    top: 24px;
    z-index: 1;
    transition: background 0.3s;
}

.step-connector.completed[b-e5lrz531rw] {
    background: var(--color-success-600);
}

/* Wizard Content */
.wizard-content[b-e5lrz531rw] {
    background: white;
    border-radius: var(--radius-lg);
    padding: var(--spacing-8);
    margin-bottom: var(--spacing-6);
    box-shadow: var(--shadow-sm);
    min-height: 500px;
}

.wizard-step[b-e5lrz531rw] {
    animation: fadeIn-b-e5lrz531rw 0.3s ease-in;
}

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

.step-header[b-e5lrz531rw] {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-3);
    margin-bottom: var(--spacing-6);
    padding-bottom: var(--spacing-4);
    border-bottom: 2px solid var(--color-neutral-100);
}

.step-header i[b-e5lrz531rw] {
    font-size: var(--font-size-2xl);
    color: var(--color-primary-600);
    margin-top: 4px;
}

.step-header h2[b-e5lrz531rw] {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-neutral-900);
    margin: 0 0 var(--spacing-1) 0;
}

.step-header p[b-e5lrz531rw] {
    font-size: var(--font-size-sm);
    color: var(--color-neutral-600);
    margin: 0;
}

/* Form Elements */
.form-grid[b-e5lrz531rw] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-6);
}

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

.form-group.full-width[b-e5lrz531rw] {
    grid-column: 1 / -1;
}

.form-group label[b-e5lrz531rw] {
    font-weight: var(--font-weight-semibold);
    font-size: var(--font-size-sm);
    color: var(--color-neutral-900);
    margin-bottom: var(--spacing-2);
}

.required[b-e5lrz531rw] {
    color: var(--color-danger-600);
}

.optional[b-e5lrz531rw] {
    color: var(--color-neutral-500);
    font-weight: var(--font-weight-normal);
}

.form-input[b-e5lrz531rw] {
    padding: var(--spacing-3);
    border: 1px solid var(--color-neutral-300);
    border-radius: var(--radius-md);
    font-size: var(--font-size-base);
    transition: all 0.2s;
}

.form-input:focus[b-e5lrz531rw] {
    outline: none;
    border-color: var(--color-primary-500);
    box-shadow: 0 0 0 3px var(--color-primary-100);
}

.form-input:disabled[b-e5lrz531rw] {
    background: var(--color-neutral-100);
    cursor: not-allowed;
}

.error-text[b-e5lrz531rw] {
    font-size: var(--font-size-xs);
    color: var(--color-danger-600);
    margin-top: var(--spacing-1);
}

/* Edit mode hint */
.edit-mode-hint[b-e5lrz531rw] {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    padding: var(--spacing-3) var(--spacing-4);
    background: var(--color-info-50);
    border: 1px solid var(--color-info-200);
    color: var(--color-info-800);
    font-size: var(--font-size-sm);
    border-radius: var(--radius-md);
}

.edit-mode-hint i[b-e5lrz531rw] {
    color: var(--color-info-600);
}

/* Question Selection Layout */
.question-selection-layout[b-e5lrz531rw] {
    display: grid;
    grid-template-columns: 300px 1fr;
    gap: var(--spacing-5);
}

.chapters-panel[b-e5lrz531rw], .questions-panel[b-e5lrz531rw] {
    border: 1px solid var(--color-neutral-200);
    border-radius: var(--radius-md);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.panel-header[b-e5lrz531rw] {
    background: var(--color-neutral-50);
    padding: var(--spacing-4);
    border-bottom: 1px solid var(--color-neutral-200);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.panel-header h3[b-e5lrz531rw] {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-bold);
    color: var(--color-neutral-900);
    margin: 0;
}

.header-actions[b-e5lrz531rw] {
    display: flex;
    gap: var(--spacing-2);
}

.badge[b-e5lrz531rw] {
    padding: 4px 12px;
    background: var(--color-primary-100);
    color: var(--color-primary-700);
    border-radius: var(--radius-full);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
}

.badge.badge-info[b-e5lrz531rw] {
    background: var(--color-info-100);
    color: var(--color-info-700);
}

.chapters-list[b-e5lrz531rw], .questions-list[b-e5lrz531rw] {
    flex: 1;
    overflow-y: auto;
    padding: var(--spacing-2);
}

.chapter-item[b-e5lrz531rw] {
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
    padding: var(--spacing-3);
    border: 2px solid var(--color-neutral-200);
    border-radius: var(--radius-md);
    margin-bottom: var(--spacing-2);
    cursor: pointer;
    transition: all 0.2s;
}

.chapter-item:hover[b-e5lrz531rw] {
    background: var(--color-neutral-50);
    border-color: var(--color-primary-300);
}

.chapter-item.selected[b-e5lrz531rw] {
    background: var(--color-primary-50);
    border-color: var(--color-primary-500);
}

.chapter-checkbox[b-e5lrz531rw] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: var(--radius-sm);
    background: white;
    border: 2px solid var(--color-neutral-300);
    flex-shrink: 0;
    position: relative;
}

.chapter-checkbox input[b-e5lrz531rw] {
    opacity: 0;
    width: 100%;
    height: 100%;
    cursor: pointer;
    margin: 0;
}

.chapter-info[b-e5lrz531rw] {
    flex: 1;
}

.chapter-name[b-e5lrz531rw] {
    font-weight: var(--font-weight-semibold);
    font-size: var(--font-size-sm);
    color: var(--color-neutral-900);
    margin-bottom: 2px;
}

.chapter-meta[b-e5lrz531rw] {
    font-size: var(--font-size-xs);
    color: var(--color-neutral-600);
}

.chapter-meta i[b-e5lrz531rw] {
    margin-right: 4px;
}

.empty-message[b-e5lrz531rw] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: var(--color-neutral-500);
    padding: var(--spacing-8);
    text-align: center;
}

.empty-message i[b-e5lrz531rw] {
    font-size: 48px;
    margin-bottom: var(--spacing-3);
    color: var(--color-neutral-400);
}

/* Skeleton Loading */
@keyframes skeleton-pulse-b-e5lrz531rw {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

.skeleton-container[b-e5lrz531rw] {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-4);
    padding: var(--spacing-4);
}

.question-skeleton[b-e5lrz531rw] {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-3);
    padding: var(--spacing-4);
    background: white;
    border-radius: var(--radius-md);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

.skeleton-checkbox[b-e5lrz531rw] {
    width: 24px;
    height: 24px;
    border-radius: var(--radius-sm);
    background: linear-gradient(90deg, var(--color-neutral-100) 25%, var(--color-neutral-200) 50%, var(--color-neutral-100) 75%);
    background-size: 200% 100%;
    animation: skeleton-pulse-b-e5lrz531rw 1.5s ease-in-out infinite;
    flex-shrink: 0;
}

.skeleton-content[b-e5lrz531rw] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-2);
}

.skeleton-line[b-e5lrz531rw] {
    height: 14px;
    border-radius: 6px;
    background: linear-gradient(90deg, var(--color-neutral-100) 25%, var(--color-neutral-200) 50%, var(--color-neutral-100) 75%);
    background-size: 200% 100%;
    animation: skeleton-pulse-b-e5lrz531rw 1.5s ease-in-out infinite;
}

.skeleton-long[b-e5lrz531rw] {
    width: 90%;
}

.skeleton-short[b-e5lrz531rw] {
    width: 60%;
}

/* Partial Loading Banner */
.partial-loading-banner[b-e5lrz531rw] {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    padding: var(--spacing-3) var(--spacing-4);
    background: linear-gradient(90deg, rgba(var(--color-primary-rgb, 79 70 229) / 0.08), rgba(var(--color-primary-rgb, 79 70 229) / 0.03));
    border-radius: var(--radius-md);
    margin-bottom: var(--spacing-3);
    font-size: var(--font-size-sm);
    color: var(--color-neutral-600);
}

.partial-loading-banner i[b-e5lrz531rw] {
    color: var(--color-primary-500);
}

/* Question Filters */
.question-filters[b-e5lrz531rw] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-4);
    padding: var(--spacing-4);
    background: var(--color-neutral-50);
    border-bottom: 1px solid var(--color-neutral-200);
}

.filters-left[b-e5lrz531rw] {
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
    flex: 1;
    min-width: 0;
}

.filters-right[b-e5lrz531rw] {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    flex-shrink: 0;
}

/* Keyword search */
.question-search-wrap[b-e5lrz531rw] {
    position: relative;
    display: flex;
    align-items: center;
    flex: 2;
    min-width: 180px;
}

.question-search-wrap .fas.fa-search[b-e5lrz531rw] {
    position: absolute;
    left: 10px;
    color: var(--color-neutral-400);
    font-size: var(--font-size-sm);
    pointer-events: none;
}

.question-search-input[b-e5lrz531rw] {
    width: 100%;
    padding: var(--spacing-2) var(--spacing-3) var(--spacing-2) 30px;
    border: 1px solid var(--color-neutral-300);
    border-radius: var(--radius-md);
    font-size: var(--font-size-sm);
}

.question-search-input:focus[b-e5lrz531rw] {
    outline: none;
    border-color: var(--color-primary-400);
    box-shadow: 0 0 0 2px rgba(var(--color-primary-rgb, 79 70 229) / 0.1);
}

.search-clear-btn[b-e5lrz531rw] {
    position: absolute;
    right: 8px;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--color-neutral-400);
    padding: 2px 4px;
    font-size: var(--font-size-sm);
}

.search-clear-btn:hover[b-e5lrz531rw] { color: var(--color-neutral-700); }

/* Replace panel */
.replace-panel[b-e5lrz531rw] {
    margin-top: var(--spacing-3);
    border: 1px solid var(--color-primary-200);
    border-radius: var(--radius-md);
    background: var(--color-primary-50);
    overflow: hidden;
}

.replace-panel-header[b-e5lrz531rw] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--spacing-2) var(--spacing-3);
    background: var(--color-primary-100);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-primary-800);
}

.close-replace[b-e5lrz531rw] {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--color-primary-600);
    padding: 2px 6px;
    border-radius: var(--radius-sm);
}

.close-replace:hover[b-e5lrz531rw] { background: var(--color-primary-200); }

.replace-loading[b-e5lrz531rw] {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    padding: var(--spacing-3);
    font-size: var(--font-size-sm);
    color: var(--color-neutral-500);
}

.replace-empty[b-e5lrz531rw] {
    padding: var(--spacing-3);
    font-size: var(--font-size-sm);
    color: var(--color-neutral-500);
    margin: 0;
}

.replace-list[b-e5lrz531rw] {
    max-height: 240px;
    overflow-y: auto;
    padding: var(--spacing-2);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-2);
}

.replace-item[b-e5lrz531rw] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-3);
    padding: var(--spacing-2) var(--spacing-3);
    background: white;
    border: 1px solid var(--color-neutral-200);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.replace-item:hover[b-e5lrz531rw] {
    border-color: var(--color-primary-400);
    box-shadow: 0 1px 4px rgba(0,0,0,0.08);
}

.replace-q-text[b-e5lrz531rw] {
    flex: 1;
    font-size: var(--font-size-sm);
    overflow: hidden;
}

.replace-q-text small[b-e5lrz531rw] {
    display: block;
    color: var(--color-neutral-500);
    margin-top: 2px;
    text-transform: capitalize;
}

.use-this-btn[b-e5lrz531rw] {
    flex-shrink: 0;
    padding: 3px 10px;
    background: var(--color-primary-600);
    color: white;
    border-radius: var(--radius-sm);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    white-space: nowrap;
}

.replace-icon-btn[b-e5lrz531rw] {
    color: var(--color-primary-500);
}

.replace-icon-btn.active[b-e5lrz531rw], .replace-icon-btn:hover[b-e5lrz531rw] {
    color: var(--color-primary-700);
    background: var(--color-primary-50);
}

.filter-select[b-e5lrz531rw] {
    padding: var(--spacing-2) var(--spacing-3);
    border: 1px solid var(--color-neutral-300);
    border-radius: var(--radius-md);
    font-size: var(--font-size-sm);
    flex: 1;
}

.btn-outline-small[b-e5lrz531rw] {
    padding: var(--spacing-2) var(--spacing-3);
    border: 1px solid var(--color-neutral-300);
    background: white;
    border-radius: var(--radius-md);
    font-size: var(--font-size-sm);
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
}

.btn-outline-small:hover[b-e5lrz531rw] {
    background: var(--color-neutral-50);
    border-color: var(--color-primary-500);
    color: var(--color-primary-600);
}

/* Question Items */
.chapter-section[b-e5lrz531rw] {
    margin-bottom: var(--spacing-4);
}

.chapter-section-header[b-e5lrz531rw] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--spacing-2) var(--spacing-3);
    background: var(--color-neutral-100);
    border-radius: var(--radius-md);
    margin-bottom: var(--spacing-2);
}

.chapter-section-header h4[b-e5lrz531rw] {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-bold);
    color: var(--color-neutral-900);
    margin: 0;
}

.question-count[b-e5lrz531rw] {
    font-size: var(--font-size-xs);
    color: var(--color-neutral-600);
}

.question-item[b-e5lrz531rw] {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-3);
    padding: var(--spacing-4);
    border: 2px solid var(--color-neutral-200);
    border-radius: var(--radius-md);
    margin-bottom: var(--spacing-3);
    cursor: pointer;
    transition: all 0.2s;
}

.question-item:hover[b-e5lrz531rw] {
    background: var(--color-neutral-50);
    border-color: var(--color-primary-300);
}

.question-item.selected[b-e5lrz531rw] {
    background: var(--color-primary-50);
    border-color: var(--color-primary-500);
}

.question-checkbox[b-e5lrz531rw] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: var(--radius-sm);
    background: white;
    border: 2px solid var(--color-neutral-300);
    flex-shrink: 0;
    position: relative;
}

.question-checkbox input[b-e5lrz531rw] {
    opacity: 0;
    width: 100%;
    height: 100%;
    cursor: pointer;
    margin: 0;
}

.question-item.selected .question-checkbox[b-e5lrz531rw],
.chapter-item.selected .chapter-checkbox[b-e5lrz531rw] {
    background: var(--color-primary-600);
    border-color: var(--color-primary-600);
}

.question-check-icon[b-e5lrz531rw],
.chapter-check-icon[b-e5lrz531rw] {
    position: absolute;
    color: white;
    font-size: 12px;
}

.question-content[b-e5lrz531rw] {
    flex: 1;
}

.question-text[b-e5lrz531rw] {
    font-size: var(--font-size-sm);
    color: var(--color-neutral-900);
    margin-bottom: var(--spacing-2);
    line-height: 1.5;
}

.question-meta[b-e5lrz531rw] {
    display: flex;
    gap: var(--spacing-2);
    flex-wrap: wrap;
}

.type-badge[b-e5lrz531rw], .difficulty-badge[b-e5lrz531rw], .marks-badge[b-e5lrz531rw] {
    padding: 2px 8px;
    border-radius: var(--radius-sm);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
}

.type-badge.mcq[b-e5lrz531rw] {
    background: var(--color-blue-100);
    color: var(--color-blue-700);
}

.type-badge.shortanswer[b-e5lrz531rw] {
    background: var(--color-purple-100);
    color: var(--color-purple-700);
}

.type-badge.longanswer[b-e5lrz531rw] {
    background: var(--color-orange-100);
    color: var(--color-orange-700);
}

.type-badge.truefalse[b-e5lrz531rw] {
    background: var(--color-teal-100);
    color: var(--color-teal-700);
}

.difficulty-badge.easy[b-e5lrz531rw] {
    background: var(--color-success-100);
    color: var(--color-success-700);
}

.difficulty-badge.medium[b-e5lrz531rw] {
    background: var(--color-warning-100);
    color: var(--color-warning-700);
}

.difficulty-badge.hard[b-e5lrz531rw] {
    background: var(--color-danger-100);
    color: var(--color-danger-700);
}

.marks-badge[b-e5lrz531rw] {
    background: var(--color-info-100);
    color: var(--color-info-700);
}

.preview-btn[b-e5lrz531rw] {
    padding: var(--spacing-2) var(--spacing-3);
    background: white;
    border: 1px solid var(--color-primary-500);
    color: var(--color-primary-600);
    border-radius: var(--radius-md);
    font-size: var(--font-size-sm);
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
}

.preview-btn:hover[b-e5lrz531rw] {
    background: var(--color-primary-600);
    color: white;
}

/* ── Step 3: Configure Questions — redesigned ───────────────────── */

/* Compact analytics bar */
.cfg-stats-bar[b-e5lrz531rw] {
    display: flex;
    align-items: center;
    gap: 0;
    background: #fff;
    border: 1px solid var(--color-neutral-200);
    border-radius: var(--radius-lg);
    padding: 0.875rem 1.5rem;
    margin-bottom: 1rem;
    flex-wrap: wrap;
}

.cfg-stat[b-e5lrz531rw] {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 72px;
    padding: 0 1rem;
}

.cfg-stat-sep[b-e5lrz531rw] {
    width: 1px;
    height: 32px;
    background: var(--color-neutral-200);
    flex-shrink: 0;
}

.cfg-stat-value[b-e5lrz531rw] {
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--color-neutral-900);
    line-height: 1.2;
}
.cfg-stat-value.cfg-easy[b-e5lrz531rw]   { color: #16a34a; }
.cfg-stat-value.cfg-medium[b-e5lrz531rw] { color: #d97706; }
.cfg-stat-value.cfg-hard[b-e5lrz531rw]   { color: #dc2626; }

.cfg-stat-label[b-e5lrz531rw] {
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-neutral-500);
    margin-top: 1px;
}

/* Settings bar */
.cfg-settings-bar[b-e5lrz531rw] {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    background: var(--color-neutral-50);
    border: 1px solid var(--color-neutral-200);
    border-radius: var(--radius-md);
    padding: 0.65rem 1rem;
    margin-bottom: 1.25rem;
    flex-wrap: wrap;
}

.cfg-settings-title[b-e5lrz531rw] {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-neutral-500);
    display: flex;
    align-items: center;
    gap: 0.4rem;
    white-space: nowrap;
}

.cfg-toggle-label[b-e5lrz531rw] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    color: var(--color-neutral-800);
    cursor: pointer;
}

.cfg-toggle-label input[type="checkbox"][b-e5lrz531rw] {
    width: 16px;
    height: 16px;
    cursor: pointer;
    accent-color: var(--color-primary-600);
}

/* Question list */
.cfg-question-list[b-e5lrz531rw] {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
}

/* Question card */
.cfg-q-card[b-e5lrz531rw] {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 1rem 1.25rem;
    background: #fff;
    border: 1.5px solid var(--color-neutral-200);
    border-left-width: 4px;
    border-radius: var(--radius-md);
    transition: box-shadow 0.18s, border-color 0.18s, transform 0.12s;
    position: relative;
}

.cfg-q-card:hover[b-e5lrz531rw] {
    box-shadow: 0 4px 12px rgba(0,0,0,0.07);
    transform: translateY(-1px);
}

/* Left accent border by difficulty */
.cfg-q-card.easy[b-e5lrz531rw]   { border-left-color: #22c55e; }
.cfg-q-card.medium[b-e5lrz531rw] { border-left-color: #f59e0b; }
.cfg-q-card.hard[b-e5lrz531rw]   { border-left-color: #ef4444; }
.cfg-q-card:not(.easy):not(.medium):not(.hard)[b-e5lrz531rw] { border-left-color: var(--color-primary-400); }

/* Drag handle */
.cfg-q-drag[b-e5lrz531rw] {
    display: flex;
    align-items: center;
    color: var(--color-neutral-300);
    font-size: 0.85rem;
    cursor: grab;
    padding: 0.2rem 0.1rem;
    flex-shrink: 0;
    margin-top: 2px;
    transition: color 0.15s;
}
.cfg-q-drag:hover[b-e5lrz531rw] { color: var(--color-neutral-500); }
.cfg-q-drag:active[b-e5lrz531rw] { cursor: grabbing; }

/* Question number badge */
.cfg-q-num[b-e5lrz531rw] {
    flex-shrink: 0;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background: var(--color-primary-100);
    color: var(--color-primary-700);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.8rem;
    margin-top: 1px;
}

/* Question body */
.cfg-q-body[b-e5lrz531rw] {
    flex: 1;
    min-width: 0;
}

.cfg-q-text[b-e5lrz531rw] {
    font-size: 0.9375rem;
    color: var(--color-neutral-900);
    line-height: 1.65;
    margin-bottom: 0.5rem;
    word-break: break-word;
}

.cfg-q-meta[b-e5lrz531rw] {
    display: flex;
    gap: 0.375rem;
    flex-wrap: wrap;
    align-items: center;
}

/* Badges */
.cfg-badge[b-e5lrz531rw] {
    display: inline-flex;
    align-items: center;
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    white-space: nowrap;
}

.cfg-badge.type[b-e5lrz531rw] {
    background: #e0e7ff;
    color: #4338ca;
}

.cfg-badge.diff.easy[b-e5lrz531rw]   { background: #dcfce7; color: #15803d; }
.cfg-badge.diff.medium[b-e5lrz531rw] { background: #fef3c7; color: #b45309; }
.cfg-badge.diff.hard[b-e5lrz531rw]   { background: #fee2e2; color: #b91c1c; }
.cfg-badge.diff:not(.easy):not(.medium):not(.hard)[b-e5lrz531rw] { background: var(--color-neutral-100); color: var(--color-neutral-600); }

.cfg-badge.marks[b-e5lrz531rw] {
    background: #f0f9ff;
    color: #0369a1;
}

/* Action buttons */
.cfg-q-actions[b-e5lrz531rw] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    flex-shrink: 0;
}

.cfg-action-btn[b-e5lrz531rw] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.35rem 0.7rem;
    border-radius: var(--radius-md);
    border: 1.5px solid transparent;
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s;
    background: var(--color-neutral-50);
    color: var(--color-neutral-600);
    border-color: var(--color-neutral-200);
}

.cfg-action-btn.replace[b-e5lrz531rw] {
    color: var(--color-primary-600);
    border-color: var(--color-primary-200);
    background: var(--color-primary-50);
}
.cfg-action-btn.replace:hover[b-e5lrz531rw],
.cfg-action-btn.replace.active[b-e5lrz531rw] {
    background: var(--color-primary-100);
    border-color: var(--color-primary-400);
    color: var(--color-primary-700);
}

.cfg-action-btn.remove:hover[b-e5lrz531rw] {
    background: #fee2e2;
    border-color: #fca5a5;
    color: #dc2626;
}

/* Keep old Configure Layout classes for compatibility (hidden/unused) */
.configure-layout[b-e5lrz531rw] { display: flex; flex-direction: column; gap: var(--spacing-6); }
.summary-cards[b-e5lrz531rw]    { display: none; }
.configure-options[b-e5lrz531rw] { display: none; }
.questions-preview-list[b-e5lrz531rw] { display: none; }

/* Target Students */
.target-selection[b-e5lrz531rw] {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-4);
}

.selection-mode-tabs[b-e5lrz531rw] {
    display: flex;
    gap: var(--spacing-2);
    background: var(--color-neutral-100);
    padding: var(--spacing-1);
    border-radius: var(--radius-lg);
}

.mode-tab[b-e5lrz531rw] {
    flex: 1;
    padding: var(--spacing-3);
    background: transparent;
    border: none;
    border-radius: var(--radius-md);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-2);
}

.mode-tab:hover[b-e5lrz531rw] {
    background: white;
}

.mode-tab.active[b-e5lrz531rw] {
    background: var(--color-primary-600);
    color: white;
}

.info-box[b-e5lrz531rw] {
    display: flex;
    gap: var(--spacing-3);
    padding: var(--spacing-4);
    background: var(--color-blue-50);
    border: 1px solid var(--color-blue-200);
    border-radius: var(--radius-md);
}

.info-box i[b-e5lrz531rw] {
    font-size: 24px;
    color: var(--color-blue-600);
}

.info-box strong[b-e5lrz531rw] {
    display: block;
    margin-bottom: var(--spacing-1);
    color: var(--color-neutral-900);
}

.info-box p[b-e5lrz531rw] {
    margin: 4px 0;
    color: var(--color-neutral-700);
    font-size: var(--font-size-sm);
}

.student-count[b-e5lrz531rw] {
    font-weight: var(--font-weight-semibold);
    color: var(--color-primary-700);
}

.student-search[b-e5lrz531rw] {
    position: relative;
}

.search-input[b-e5lrz531rw] {
    width: 100%;
    padding: var(--spacing-3) var(--spacing-3) var(--spacing-3) var(--spacing-10);
    border: 1px solid var(--color-neutral-300);
    border-radius: var(--radius-md);
    font-size: var(--font-size-base);
}

.search-icon[b-e5lrz531rw] {
    position: absolute;
    left: var(--spacing-3);
    top: 50%;
    transform: translateY(-50%);
    color: var(--color-neutral-500);
}

.student-selection-actions[b-e5lrz531rw] {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
}

.selected-count[b-e5lrz531rw] {
    margin-left: auto;
    font-size: var(--font-size-sm);
    color: var(--color-neutral-600);
}

.students-list[b-e5lrz531rw] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: var(--spacing-3);
    max-height: 400px;
    overflow-y: auto;
    padding: var(--spacing-2);
}

.student-item[b-e5lrz531rw] {
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
    padding: var(--spacing-3);
    border: 2px solid var(--color-neutral-200);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all 0.2s;
}

.student-item:hover[b-e5lrz531rw] {
    background: var(--color-neutral-50);
    border-color: var(--color-primary-300);
}

.student-item.selected[b-e5lrz531rw] {
    background: var(--color-primary-50);
    border-color: var(--color-primary-500);
}

.student-item input[b-e5lrz531rw] {
    width: 18px;
    height: 18px;
    cursor: pointer;
}

.student-avatar[b-e5lrz531rw] {
    width: 40px;
    height: 40px;
    background: var(--color-neutral-200);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-neutral-600);
}

.student-name[b-e5lrz531rw] {
    font-weight: var(--font-weight-semibold);
    font-size: var(--font-size-sm);
    color: var(--color-neutral-900);
}

.student-meta[b-e5lrz531rw] {
    font-size: var(--font-size-xs);
    color: var(--color-neutral-600);
}

.students-loading[b-e5lrz531rw],
.students-empty[b-e5lrz531rw] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-3);
    padding: var(--spacing-10) var(--spacing-6);
    color: var(--color-neutral-500);
    font-size: var(--font-size-sm);
}

.students-loading i[b-e5lrz531rw],
.students-empty i[b-e5lrz531rw] {
    font-size: 2rem;
    color: var(--color-neutral-400);
}

/* Settings Layout */
.settings-layout[b-e5lrz531rw] {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-6);
}

.settings-section[b-e5lrz531rw] {
    padding: var(--spacing-6);
    background: var(--color-neutral-50);
    border: 1px solid var(--color-neutral-200);
    border-radius: var(--radius-lg);
}

.settings-section h3[b-e5lrz531rw] {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-bold);
    color: var(--color-neutral-900);
    margin: 0 0 var(--spacing-4) 0;
}

.radio-group[b-e5lrz531rw], .checkbox-group[b-e5lrz531rw] {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-3);
}

.radio-label[b-e5lrz531rw] {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-3);
    cursor: pointer;
}

.radio-label input[b-e5lrz531rw] {
    margin-top: 4px;
}

.radio-content[b-e5lrz531rw], .checkbox-content[b-e5lrz531rw] {
    flex: 1;
}

.radio-content span[b-e5lrz531rw], .checkbox-content span[b-e5lrz531rw] {
    display: block;
    font-weight: var(--font-weight-semibold);
    font-size: var(--font-size-sm);
    color: var(--color-neutral-900);
    margin-bottom: 2px;
}

.radio-content small[b-e5lrz531rw], .checkbox-content small[b-e5lrz531rw] {
    display: block;
    font-size: var(--font-size-xs);
    color: var(--color-neutral-600);
}

.radio-content i[b-e5lrz531rw] {
    margin-right: var(--spacing-2);
    color: var(--color-primary-600);
}

.nested-option[b-e5lrz531rw] {
    margin-left: var(--spacing-8);
    margin-top: var(--spacing-2);
    padding: var(--spacing-3);
    background: white;
    border-radius: var(--radius-md);
}

.penalty-input-group[b-e5lrz531rw] {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    margin-top: var(--spacing-2);
}

.penalty-input[b-e5lrz531rw] {
    width: 80px;
    padding: var(--spacing-2);
    border: 1px solid var(--color-neutral-300);
    border-radius: var(--radius-md);
    text-align: center;
}

.file-upload-area[b-e5lrz531rw] {
    border: 2px dashed var(--color-neutral-300);
    border-radius: var(--radius-md);
    padding: var(--spacing-8);
    text-align: center;
    cursor: pointer;
    transition: all 0.2s;
}

.file-upload-area:hover[b-e5lrz531rw] {
    border-color: var(--color-primary-500);
    background: var(--color-primary-50);
}

.file-upload-area i[b-e5lrz531rw] {
    font-size: 48px;
    color: var(--color-neutral-400);
    margin-bottom: var(--spacing-2);
}

.file-upload-area p[b-e5lrz531rw] {
    font-weight: var(--font-weight-semibold);
    color: var(--color-neutral-700);
    margin: var(--spacing-2) 0;
}

.file-upload-area small[b-e5lrz531rw] {
    color: var(--color-neutral-500);
    font-size: var(--font-size-xs);
}

.uploaded-files-list[b-e5lrz531rw] {
    margin-top: var(--spacing-3);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-2);
}

.file-item[b-e5lrz531rw] {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    padding: var(--spacing-2) var(--spacing-3);
    background: white;
    border: 1px solid var(--color-neutral-200);
    border-radius: var(--radius-md);
}

.file-item i[b-e5lrz531rw] {
    color: var(--color-primary-600);
}

.file-item span[b-e5lrz531rw] {
    flex: 1;
    font-size: var(--font-size-sm);
}

.remove-file-btn[b-e5lrz531rw] {
    padding: 4px 8px;
    background: transparent;
    border: none;
    color: var(--color-danger-600);
    cursor: pointer;
    border-radius: var(--radius-sm);
    transition: all 0.2s;
}

.remove-file-btn:hover[b-e5lrz531rw] {
    background: var(--color-danger-100);
}

/* Review Layout */
.review-layout[b-e5lrz531rw] {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-6);
}

.review-section[b-e5lrz531rw] {
    padding: var(--spacing-6);
    background: var(--color-neutral-50);
    border: 1px solid var(--color-neutral-200);
    border-radius: var(--radius-lg);
}

.section-header[b-e5lrz531rw] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--spacing-4);
}

.section-header h3[b-e5lrz531rw] {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-bold);
    color: var(--color-neutral-900);
    margin: 0;
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
}

.section-header h3 i[b-e5lrz531rw] {
    color: var(--color-primary-600);
}

.edit-btn[b-e5lrz531rw] {
    padding: var(--spacing-2) var(--spacing-3);
    background: white;
    border: 1px solid var(--color-primary-500);
    color: var(--color-primary-600);
    border-radius: var(--radius-md);
    font-size: var(--font-size-sm);
    cursor: pointer;
    transition: all 0.2s;
}

.edit-btn:hover[b-e5lrz531rw] {
    background: var(--color-primary-600);
    color: white;
}

.review-grid[b-e5lrz531rw] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-4);
}

.review-item[b-e5lrz531rw] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.review-item .label[b-e5lrz531rw] {
    font-size: var(--font-size-xs);
    color: var(--color-neutral-600);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.review-item .value[b-e5lrz531rw] {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--color-neutral-900);
}

.review-stats[b-e5lrz531rw] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-4);
}

.stat-card[b-e5lrz531rw] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-2);
    padding: var(--spacing-4);
    background: white;
    border: 1px solid var(--color-neutral-200);
    border-radius: var(--radius-md);
}

.stat-card i[b-e5lrz531rw] {
    font-size: 32px;
    color: var(--color-primary-600);
}

.stat-value[b-e5lrz531rw] {
    font-size: var(--font-size-3xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-neutral-900);
}

.stat-label[b-e5lrz531rw] {
    font-size: var(--font-size-sm);
    color: var(--color-neutral-600);
}

/* Wizard Footer */
.wizard-footer[b-e5lrz531rw] {
    background: white;
    border-radius: var(--radius-lg);
    padding: var(--spacing-4) var(--spacing-6);
    box-shadow: var(--shadow-sm);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.footer-right[b-e5lrz531rw] {
    display: flex;
    gap: var(--spacing-3);
    align-items: center;
}

.btn-draft[b-e5lrz531rw] {
    background: white;
    border: 1px dashed var(--color-neutral-400);
    color: var(--color-neutral-600);
    padding: var(--spacing-2) var(--spacing-4);
    border-radius: var(--radius-md);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    transition: all 0.15s;
}

.btn-draft:hover:not(:disabled)[b-e5lrz531rw] {
    background: var(--color-neutral-50);
    border-color: var(--color-neutral-500);
    color: var(--color-neutral-800);
}

.btn-draft:disabled[b-e5lrz531rw] {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ── Title Suggestions ───────────────────────────────────────────────── */

.title-suggestions[b-e5lrz531rw] {
    margin-top: var(--spacing-2);
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-2);
    align-items: center;
}

.suggestions-label[b-e5lrz531rw] {
    font-size: var(--font-size-xs);
    color: var(--color-neutral-500);
    white-space: nowrap;
}

.suggestion-chip[b-e5lrz531rw] {
    padding: 4px 12px;
    background: var(--color-primary-50);
    border: 1px solid var(--color-primary-200);
    color: var(--color-primary-700);
    border-radius: 20px;
    font-size: var(--font-size-xs);
    cursor: pointer;
    transition: all 0.15s;
}

.suggestion-chip:hover[b-e5lrz531rw] {
    background: var(--color-primary-100);
    border-color: var(--color-primary-400);
}

/* ── Mode Toggle (Manual / Auto-Pick) ───────────────────────────────── */

.mode-toggle[b-e5lrz531rw] {
    display: flex;
    border: 1px solid var(--color-neutral-200);
    border-radius: var(--radius-md);
    overflow: hidden;
}

.mode-toggle-btn[b-e5lrz531rw] {
    padding: 5px 14px;
    font-size: var(--font-size-sm);
    background: white;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 5px;
    color: var(--color-neutral-600);
    transition: all 0.15s;
}

.mode-toggle-btn.active[b-e5lrz531rw] {
    background: var(--color-primary-600);
    color: white;
}

.mode-toggle-btn:hover:not(.active)[b-e5lrz531rw] {
    background: var(--color-neutral-100);
}

/* ── Auto-Pick Panel ─────────────────────────────────────────────────── */

.auto-pick-panel[b-e5lrz531rw] {
    padding: var(--spacing-4);
    border-bottom: 1px solid var(--color-neutral-200);
    background: var(--color-primary-50);
}

.auto-pick-hint[b-e5lrz531rw] {
    font-size: var(--font-size-sm);
    color: var(--color-neutral-600);
    margin-bottom: var(--spacing-3);
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-2);
}

.slot-table[b-e5lrz531rw] {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-2);
    margin-bottom: var(--spacing-3);
}

.slot-row[b-e5lrz531rw] {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
}

.slot-type-select[b-e5lrz531rw] {
    flex: 1;
    padding: var(--spacing-2) var(--spacing-3);
    border: 1px solid var(--color-neutral-300);
    border-radius: var(--radius-md);
    font-size: var(--font-size-sm);
    background: white;
}

.slot-count-wrap[b-e5lrz531rw] {
    display: flex;
    align-items: center;
    gap: var(--spacing-1);
}

.slot-count-input[b-e5lrz531rw] {
    width: 64px;
    padding: var(--spacing-2) var(--spacing-2);
    border: 1px solid var(--color-neutral-300);
    border-radius: var(--radius-md);
    font-size: var(--font-size-sm);
    text-align: center;
    background: white;
}

.slot-count-label[b-e5lrz531rw] {
    font-size: var(--font-size-xs);
    color: var(--color-neutral-500);
    white-space: nowrap;
}

.slot-remove-btn[b-e5lrz531rw] {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--color-neutral-400);
    padding: 4px 8px;
    border-radius: var(--radius-sm);
    transition: color 0.15s;
}

.slot-remove-btn:hover[b-e5lrz531rw] {
    color: var(--color-danger-500);
}

.auto-pick-actions[b-e5lrz531rw] {
    display: flex;
    gap: var(--spacing-2);
    align-items: center;
    flex-wrap: wrap;
}

.btn-auto-pick[b-e5lrz531rw] {
    padding: var(--spacing-2) var(--spacing-4);
    background: var(--color-primary-600);
    color: white;
    border: none;
    border-radius: var(--radius-md);
    font-size: var(--font-size-sm);
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: var(--spacing-1);
    transition: background 0.15s;
}

.btn-auto-pick:hover:not(:disabled)[b-e5lrz531rw] {
    background: var(--color-primary-700);
}

.btn-auto-pick:disabled[b-e5lrz531rw] {
    opacity: 0.5;
    cursor: not-allowed;
}

.auto-pick-message[b-e5lrz531rw] {
    font-size: var(--font-size-sm);
    margin-top: var(--spacing-2);
    padding: var(--spacing-2) var(--spacing-3);
    border-radius: var(--radius-sm);
    background: var(--color-warning-50);
    color: var(--color-warning-700);
    border: 1px solid var(--color-warning-200);
}

.auto-pick-selected-summary[b-e5lrz531rw] {
    margin-top: var(--spacing-3);
    padding: var(--spacing-3) var(--spacing-4);
    background: var(--color-success-50);
    border: 1px solid var(--color-success-200);
    border-radius: var(--radius-md);
    font-size: var(--font-size-sm);
    color: var(--color-success-700);
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    flex-wrap: wrap;
}

.btn-link-sm[b-e5lrz531rw] {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--color-primary-600);
    font-size: var(--font-size-sm);
    padding: 0 4px;
    text-decoration: underline;
}

.btn-link-sm:hover[b-e5lrz531rw] {
    color: var(--color-primary-800);
}

.btn-outline-small[b-e5lrz531rw] {
    padding: var(--spacing-2) var(--spacing-3);
    background: white;
    border: 1px solid var(--color-neutral-300);
    color: var(--color-neutral-700);
    border-radius: var(--radius-md);
    font-size: var(--font-size-sm);
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 4px;
    transition: all 0.15s;
}

.btn-outline-small:hover[b-e5lrz531rw] {
    background: var(--color-neutral-100);
    border-color: var(--color-neutral-400);
}

.btn-outline[b-e5lrz531rw] {
    background: white;
    border: 1px solid var(--color-neutral-300);
    color: var(--color-neutral-700);
}

.btn-outline:hover:not(:disabled)[b-e5lrz531rw] {
    background: var(--color-neutral-50);
}

/* Validation Message */
.validation-message[b-e5lrz531rw] {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    padding: var(--spacing-3) var(--spacing-4);
    background: var(--color-danger-100);
    border: 1px solid var(--color-danger-300);
    border-radius: var(--radius-md);
    color: var(--color-danger-700);
    font-size: var(--font-size-sm);
    margin-top: var(--spacing-4);
}

/* Modal */
.modal-overlay[b-e5lrz531rw] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.modal-backdrop[b-e5lrz531rw] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
}

.modal-container[b-e5lrz531rw] {
    position: relative;
    background: white;
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-2xl);
    max-width: 600px;
    width: 90%;
    max-height: 90vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.modal-container.modal-large[b-e5lrz531rw] {
    max-width: 900px;
}

.modal-header[b-e5lrz531rw] {
    padding: var(--spacing-6);
    border-bottom: 1px solid var(--color-neutral-200);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.modal-header h2[b-e5lrz531rw] {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-neutral-900);
    margin: 0;
}

.close-btn[b-e5lrz531rw] {
    padding: var(--spacing-2);
    background: transparent;
    border: none;
    cursor: pointer;
    color: var(--color-neutral-600);
    font-size: var(--font-size-xl);
    transition: all 0.2s;
}

.close-btn:hover[b-e5lrz531rw] {
    color: var(--color-neutral-900);
}

.modal-body[b-e5lrz531rw] {
    padding: var(--spacing-6);
    overflow-y: auto;
    flex: 1;
}

.question-preview-content[b-e5lrz531rw] {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-4);
}

.question-meta-badges[b-e5lrz531rw] {
    display: flex;
    gap: var(--spacing-2);
}

.question-text-large[b-e5lrz531rw] {
    font-size: var(--font-size-lg);
    line-height: 1.6;
    color: var(--color-neutral-900);
}

.options-list[b-e5lrz531rw] {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-2);
}

.options-list h4[b-e5lrz531rw] {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-bold);
    color: var(--color-neutral-700);
    margin-bottom: var(--spacing-2);
}

.option-item[b-e5lrz531rw] {
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
    padding: var(--spacing-3);
    background: var(--color-neutral-50);
    border: 1px solid var(--color-neutral-200);
    border-radius: var(--radius-md);
}

.option-item.correct[b-e5lrz531rw] {
    background: var(--color-success-50);
    border-color: var(--color-success-500);
}

.option-label[b-e5lrz531rw] {
    font-weight: var(--font-weight-bold);
    color: var(--color-neutral-700);
}

.option-text[b-e5lrz531rw] {
    flex: 1;
    color: var(--color-neutral-900);
}

.option-item i[b-e5lrz531rw] {
    color: var(--color-success-600);
}

.explanation-section[b-e5lrz531rw] {
    padding: var(--spacing-4);
    background: var(--color-blue-50);
    border-left: 3px solid var(--color-blue-500);
    border-radius: var(--radius-md);
}

.explanation-section h4[b-e5lrz531rw] {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-bold);
    color: var(--color-blue-900);
    margin: 0 0 var(--spacing-2) 0;
}

.explanation-section p[b-e5lrz531rw] {
    margin: 0;
    color: var(--color-blue-800);
    line-height: 1.5;
}

.answer-section[b-e5lrz531rw] {
    padding: var(--spacing-4);
    background: var(--color-green-50);
    border-left: 3px solid var(--color-success-500);
    border-radius: var(--radius-md);
}

.answer-section h4[b-e5lrz531rw] {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-bold);
    color: var(--color-green-900);
    margin: 0 0 var(--spacing-2) 0;
}

.answer-section p[b-e5lrz531rw] {
    margin: 0;
    color: var(--color-green-800);
    line-height: 1.5;
}

/* Responsive */
@media (max-width: 1024px) {
    .question-selection-layout[b-e5lrz531rw] {
        grid-template-columns: 1fr;
        height: auto;
    }
    
    .chapters-panel[b-e5lrz531rw] {
        height: 300px;
    }
    
    .questions-panel[b-e5lrz531rw] {
        height: 500px;
    }
}

@media (max-width: 768px) {
    .assignment-wizard-container[b-e5lrz531rw] {
        padding: var(--spacing-4);
    }
    
    .stepper-container[b-e5lrz531rw] {
        flex-wrap: wrap;
    }
    
    .step[b-e5lrz531rw] {
        min-width: 80px;
    }
    
    .step-description[b-e5lrz531rw] {
        display: none;
    }
    
    .form-grid[b-e5lrz531rw], .review-grid[b-e5lrz531rw], .summary-cards[b-e5lrz531rw], .review-stats[b-e5lrz531rw] {
        grid-template-columns: 1fr;
    }
    
    .students-list[b-e5lrz531rw] {
        grid-template-columns: 1fr;
    }
}
/* /Pages/Teacher/Assignments/Detail.razor.rz.scp.css */
.page-container[b-6puys08dvh] { padding: var(--spacing-lg); max-width: 1200px; margin: 0 auto; }

.page-header[b-6puys08dvh] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-md);
    flex-wrap: wrap;
}

.header-left[b-6puys08dvh] { display: flex; align-items: flex-start; gap: var(--spacing-md); }

.header-info[b-6puys08dvh] { display: flex; flex-direction: column; gap: var(--spacing-xs); }

.page-title[b-6puys08dvh] { font-size: 1.4rem; font-weight: 700; color: var(--color-text-primary); margin: 0; }

.meta-row[b-6puys08dvh] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-sm);
    font-size: 0.85rem;
    color: var(--color-text-secondary);
}
.meta-row span[b-6puys08dvh] { display: flex; align-items: center; gap: 4px; }

/* Stats bar — separate section below header */
.stats-bar[b-6puys08dvh] { display: flex; gap: var(--spacing-sm); flex-wrap: wrap; margin-bottom: var(--spacing-lg); }
.stat-chip[b-6puys08dvh] {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    padding: 8px 16px;
    text-align: center;
    min-width: 80px;
}
.stat-chip .stat-num[b-6puys08dvh] { display: block; font-size: 1.4rem; font-weight: 700; color: var(--color-text-primary); }
.stat-chip .stat-lbl[b-6puys08dvh] { font-size: 0.72rem; color: var(--color-text-secondary); text-transform: uppercase; }
.chip-green .stat-num[b-6puys08dvh] { color: var(--color-success); }
.chip-amber .stat-num[b-6puys08dvh] { color: var(--color-warning); }
.chip-blue .stat-num[b-6puys08dvh] { color: var(--color-primary); }

/* Bulk mark banner */
.bulk-mark-banner[b-6puys08dvh] {
    background: var(--color-primary-light, #eef2ff);
    border: 1px solid var(--color-primary);
    border-radius: 8px;
    padding: var(--spacing-sm) var(--spacing-md);
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-md);
    flex-wrap: wrap;
    font-size: 0.9rem;
}

/* Table */
.table-wrapper[b-6puys08dvh] { overflow-x: auto; border-radius: 10px; border: 1px solid var(--color-border); }
.submissions-table[b-6puys08dvh] { width: 100%; border-collapse: collapse; font-size: 0.875rem; }
.submissions-table th[b-6puys08dvh] {
    background: var(--color-surface-secondary, #f8fafc);
    padding: 10px 14px;
    text-align: left;
    font-weight: 600;
    color: var(--color-text-secondary);
    border-bottom: 1px solid var(--color-border);
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.submissions-table td[b-6puys08dvh] {
    padding: 10px 14px;
    border-bottom: 1px solid var(--color-border);
    color: var(--color-text-primary);
    vertical-align: middle;
}
.submissions-table tr:last-child td[b-6puys08dvh] { border-bottom: none; }
.submissions-table tr:hover td[b-6puys08dvh] { background: var(--color-surface-secondary, #f8fafc); }

.row-submitted td[b-6puys08dvh] { background: #f0fdf4; }
.row-graded td[b-6puys08dvh] { background: #eff6ff; }
.row-late td[b-6puys08dvh] { background: #fff7ed; }
.row-incomplete td[b-6puys08dvh] { background: #fef2f2; }

/* Status pills */
.status-pill[b-6puys08dvh] {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
}
.status-submitted[b-6puys08dvh] { background: #dcfce7; color: #166534; }
.status-graded[b-6puys08dvh]    { background: #dbeafe; color: #1e40af; }
.status-pending[b-6puys08dvh]   { background: #fef9c3; color: #854d0e; }
.status-late[b-6puys08dvh]      { background: #ffedd5; color: #9a3412; }
.status-incomplete[b-6puys08dvh]{ background: #fee2e2; color: #991b1b; }
.status-excused[b-6puys08dvh]   { background: #f3e8ff; color: #6b21a8; }

.status-select[b-6puys08dvh] {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    padding: 3px 28px 3px 10px;
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2.5'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 8px center;
    background-size: 12px;
    line-height: 1.5;
}
/* Two-class specificity beats the single .status-X rules above — colours now apply correctly */
.status-select.status-pending[b-6puys08dvh]    { background-color: #fef9c3; color: #854d0e; border-color: #fde047; }
.status-select.status-submitted[b-6puys08dvh]  { background-color: #dcfce7; color: #166534; border-color: #86efac; }
.status-select.status-graded[b-6puys08dvh]     { background-color: #dbeafe; color: #1e40af; border-color: #93c5fd; }
.status-select.status-late[b-6puys08dvh]       { background-color: #ffedd5; color: #9a3412; border-color: #fdba74; }
.status-select.status-incomplete[b-6puys08dvh] { background-color: #fee2e2; color: #991b1b; border-color: #fca5a5; }
.status-select.status-excused[b-6puys08dvh]    { background-color: #f3e8ff; color: #6b21a8; border-color: #d8b4fe; }

/* Grade chip */
.grade-chip[b-6puys08dvh] {
    background: #dbeafe;
    color: #1e40af;
    border-radius: 6px;
    padding: 3px 10px;
    font-size: 0.82rem;
    font-weight: 600;
}

/* Buttons */
.btn-xs[b-6puys08dvh] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 0.78rem;
    font-weight: 500;
    cursor: pointer;
    border: none;
    text-decoration: none;
}
.btn-xs.btn-ghost[b-6puys08dvh]    { background: transparent; border: 1px solid var(--color-border); color: var(--color-text-secondary); }
.btn-xs.btn-primary[b-6puys08dvh]  { background: var(--color-primary, #4f46e5); color: #fff; border: none; }
.btn-xs.btn-primary:hover[b-6puys08dvh] { opacity: 0.88; }

.btn-sm[b-6puys08dvh] {
    padding: 6px 14px;
    border-radius: 6px;
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    border: none;
}

/* Loading & empty */
.loading-state[b-6puys08dvh] { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 60px; color: var(--color-text-secondary); }
.empty-state[b-6puys08dvh]   { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 60px; color: var(--color-text-secondary); }
.empty-state i[b-6puys08dvh] { font-size: 3rem; opacity: 0.3; }
.empty-state h3[b-6puys08dvh] { font-size: 1.1rem; font-weight: 600; }

/* Modal */
.modal-overlay[b-6puys08dvh] { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; }
.modal-backdrop[b-6puys08dvh] { position: absolute; inset: 0; background: rgba(0,0,0,0.5); }
.modal-container[b-6puys08dvh] { position: relative; background: white; border-radius: 12px; width: 100%; padding: 0; box-shadow: 0 20px 60px rgba(0,0,0,0.2); }
.modal-sm[b-6puys08dvh] { max-width: 440px; }
.modal-header[b-6puys08dvh] { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid var(--color-border); }
.modal-header h2[b-6puys08dvh] { font-size: 1rem; font-weight: 600; margin: 0; }
.modal-body[b-6puys08dvh] { padding: 20px; display: flex; flex-direction: column; gap: 16px; }
.modal-footer[b-6puys08dvh] { display: flex; justify-content: flex-end; gap: 10px; padding: 14px 20px; border-top: 1px solid var(--color-border); }

.form-group[b-6puys08dvh] { display: flex; flex-direction: column; gap: 6px; }
.form-group label[b-6puys08dvh] { font-size: 0.85rem; font-weight: 500; color: var(--color-text-secondary); }
.form-input[b-6puys08dvh], .form-textarea[b-6puys08dvh] { padding: 8px 12px; border: 1px solid var(--color-border); border-radius: 8px; font-size: 0.9rem; width: 100%; box-sizing: border-box; }
.form-textarea[b-6puys08dvh] { resize: vertical; }

.text-muted[b-6puys08dvh] { color: var(--color-text-secondary); font-size: 0.85rem; }

@media (max-width: 768px) {
    .page-header[b-6puys08dvh] { flex-direction: column; }
    .header-left[b-6puys08dvh] { flex-direction: column; }
    .stats-bar[b-6puys08dvh] { gap: 6px; }
    .stat-chip[b-6puys08dvh] { min-width: 60px; padding: 6px 10px; }
}
/* /Pages/Teacher/Assignments/Index.razor.rz.scp.css */
/* ==================== PAGE LAYOUT ==================== */

.page-container[b-p848j7lm58] {
    max-width: 1400px;
    margin: 0 auto;
    padding: 24px;
}

.page-header[b-p848j7lm58] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 32px;
    gap: 16px;
}

.header-content[b-p848j7lm58] {
    display: flex;
    align-items: center;
    gap: 16px;
}

.header-icon[b-p848j7lm58] {
    width: 56px;
    height: 56px;
    background: linear-gradient(135deg, var(--color-primary-600), var(--color-primary-400));
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 24px;
    box-shadow: 0 4px 12px rgba(20, 184, 166, 0.3);
}

.page-title[b-p848j7lm58] {
    font-size: 28px;
    font-weight: 700;
    color: var(--color-neutral-900);
    margin: 0;
}

.page-subtitle[b-p848j7lm58] {
    font-size: 14px;
    color: var(--color-neutral-600);
    margin: 4px 0 0 0;
}

/* ==================== FILTER TABS ==================== */

.filter-tabs[b-p848j7lm58] {
    display: flex;
    gap: 8px;
    margin-bottom: 24px;
    flex-wrap: wrap;
}

.tab-button[b-p848j7lm58] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 20px;
    background: white;
    border: 2px solid var(--color-neutral-200);
    border-radius: 8px;
    color: var(--color-neutral-700);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 200ms ease;
}

.tab-button:hover[b-p848j7lm58] {
    border-color: var(--color-primary-300);
    background: var(--color-primary-50);
}

.tab-button.active[b-p848j7lm58] {
    background: var(--color-primary-600);
    border-color: var(--color-primary-600);
    color: white;
}

.tab-button .badge[b-p848j7lm58] {
    padding: 2px 8px;
    background: var(--color-neutral-100);
    color: var(--color-neutral-700);
    border-radius: 12px;
    font-size: 12px;
    font-weight: 700;
}

.tab-button.active .badge[b-p848j7lm58] {
    background: rgba(255, 255, 255, 0.2);
    color: white;
}

.badge-success[b-p848j7lm58] {
    background: var(--color-success-100);
    color: var(--color-success-700);
}

.tab-button.active .badge-success[b-p848j7lm58] {
    background: rgba(255, 255, 255, 0.2);
    color: white;
}

.badge-info[b-p848j7lm58] {
    background: var(--color-info-100);
    color: var(--color-info-700);
}

.tab-button.active .badge-info[b-p848j7lm58] {
    background: rgba(255, 255, 255, 0.2);
    color: white;
}

.badge-neutral[b-p848j7lm58] {
    background: var(--color-neutral-100);
    color: var(--color-neutral-600);
}

.tab-button.active .badge-neutral[b-p848j7lm58] {
    background: rgba(255, 255, 255, 0.2);
    color: white;
}

.badge-warning[b-p848j7lm58] {
    background: var(--color-warning-100, #fef3c7);
    color: var(--color-warning-700, #b45309);
}

.tab-button.active .badge-warning[b-p848j7lm58] {
    background: rgba(255, 255, 255, 0.2);
    color: white;
}

/* ==================== LOADING & EMPTY STATES ==================== */

.loading-state[b-p848j7lm58] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 80px 20px;
    background: white;
    border-radius: 12px;
}

.loading-state i[b-p848j7lm58] {
    font-size: 48px;
    color: var(--color-primary-600);
    margin-bottom: 16px;
}

.loading-state p[b-p848j7lm58] {
    color: var(--color-neutral-600);
    font-size: 16px;
}

.empty-state[b-p848j7lm58] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 80px 20px;
    background: white;
    border-radius: 12px;
    text-align: center;
}

.empty-icon[b-p848j7lm58] {
    width: 96px;
    height: 96px;
    background: var(--color-neutral-100);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 24px;
}

.empty-icon i[b-p848j7lm58] {
    font-size: 48px;
    color: var(--color-neutral-400);
}

.empty-state h3[b-p848j7lm58] {
    font-size: 20px;
    font-weight: 700;
    color: var(--color-neutral-900);
    margin: 0 0 8px 0;
}

.empty-state p[b-p848j7lm58] {
    font-size: 14px;
    color: var(--color-neutral-600);
    margin: 0 0 24px 0;
}

/* ==================== ASSIGNMENTS TABLE ==================== */

.assignments-table[b-p848j7lm58] {
    background: white;
    border-radius: 12px;
    border: 1px solid var(--color-neutral-200);
    overflow: hidden;
}

/* Header row */
.table-head[b-p848j7lm58] {
    display: grid;
    grid-template-columns: 110px 1fr 130px 130px 150px 100px;
    padding: 10px 16px;
    background: var(--color-neutral-50);
    border-bottom: 1px solid var(--color-neutral-200);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-neutral-500);
    gap: 12px;
    align-items: center;
}

/* Data rows */
.table-row[b-p848j7lm58] {
    display: grid;
    grid-template-columns: 110px 1fr 130px 130px 150px 100px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--color-neutral-100);
    gap: 12px;
    align-items: center;
    transition: background 150ms ease;
    cursor: default;
}

.table-row:last-child[b-p848j7lm58] {
    border-bottom: none;
}

.table-row:hover[b-p848j7lm58] {
    background: var(--color-neutral-50);
}

/* Status pill */
.status-pill[b-p848j7lm58] {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
}

.pill-active[b-p848j7lm58]    { background: var(--color-success-100); color: var(--color-success-700); }
.pill-upcoming[b-p848j7lm58]  { background: var(--color-info-100);    color: var(--color-info-700); }
.pill-completed[b-p848j7lm58] { background: var(--color-neutral-100); color: var(--color-neutral-600); }
.pill-draft[b-p848j7lm58]     { background: var(--color-warning-100, #fef3c7); color: var(--color-warning-700, #b45309); }

/* Title + meta */
.col-title[b-p848j7lm58] {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.row-title[b-p848j7lm58] {
    font-size: 14px;
    font-weight: 600;
    color: var(--color-neutral-900);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.row-meta[b-p848j7lm58] {
    font-size: 12px;
    color: var(--color-neutral-500);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.row-meta i[b-p848j7lm58] {
    font-size: 10px;
}

/* Class column */
.col-class[b-p848j7lm58] {
    font-size: 13px;
    color: var(--color-neutral-700);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Due date */
.col-due[b-p848j7lm58] {
    font-size: 13px;
    color: var(--color-neutral-700);
}

.col-due i[b-p848j7lm58] {
    font-size: 11px;
    color: var(--color-neutral-400);
    margin-right: 4px;
}

.due-overdue[b-p848j7lm58] {
    color: var(--color-danger-600);
    font-weight: 600;
}

.no-due[b-p848j7lm58] {
    color: var(--color-neutral-400);
}

/* Mini progress bar */
.col-progress[b-p848j7lm58] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.mini-bar[b-p848j7lm58] {
    flex: 1;
    height: 6px;
    background: var(--color-neutral-200);
    border-radius: 999px;
    overflow: hidden;
}

.mini-fill[b-p848j7lm58] {
    height: 100%;
    background: var(--color-success-500);
    border-radius: 999px;
    transition: width 300ms ease;
}

.mini-count[b-p848j7lm58] {
    font-size: 12px;
    font-weight: 600;
    color: var(--color-neutral-600);
    white-space: nowrap;
    min-width: 40px;
    text-align: right;
}

/* Row action buttons (always visible on mobile, hover-reveal on desktop) */
.col-actions[b-p848j7lm58] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 2px;
    opacity: 0;
    transition: opacity 150ms ease;
}

.table-row:hover .col-actions[b-p848j7lm58] {
    opacity: 1;
}

.row-btn[b-p848j7lm58] {
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent;
    border-radius: 6px;
    color: var(--color-neutral-500);
    cursor: pointer;
    font-size: 13px;
    transition: background 150ms ease, color 150ms ease;
}

.row-btn:hover[b-p848j7lm58] {
    background: var(--color-neutral-200);
    color: var(--color-neutral-800);
}

.row-btn-danger:hover[b-p848j7lm58] {
    background: var(--color-danger-100);
    color: var(--color-danger-600);
}

/* Responsive — collapse some columns on smaller screens */
@media (max-width: 900px) {
    .table-head[b-p848j7lm58],
    .table-row[b-p848j7lm58] {
        grid-template-columns: 95px 1fr 120px 90px;
    }

    .col-class[b-p848j7lm58],
    .col-progress[b-p848j7lm58],
    .table-head .col-class[b-p848j7lm58],
    .table-head .col-progress[b-p848j7lm58] {
        display: none;
    }
}

@media (max-width: 600px) {
    .table-head[b-p848j7lm58],
    .table-row[b-p848j7lm58] {
        grid-template-columns: 85px 1fr 80px;
    }

    .col-due[b-p848j7lm58],
    .table-head .col-due[b-p848j7lm58] {
        display: none;
    }

    .col-actions[b-p848j7lm58] {
        opacity: 1;
    }
}

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

.modal-overlay[b-p848j7lm58] {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
}

.modal-backdrop[b-p848j7lm58] {
    position: absolute;
    inset: 0;
}

.modal-container[b-p848j7lm58] {
    position: relative;
    width: 100%;
    max-width: 700px;
    max-height: 90vh;
    background: white;
    border-radius: 16px;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: modalSlide-b-p848j7lm58 300ms ease-out;
}

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

.modal-header[b-p848j7lm58] {
    padding: 24px;
    border-bottom: 1px solid var(--color-neutral-200);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.modal-header h2[b-p848j7lm58] {
    font-size: 20px;
    font-weight: 700;
    color: var(--color-neutral-900);
    margin: 0;
}

.modal-body[b-p848j7lm58] {
    flex: 1;
    overflow-y: auto;
    padding: 24px;
}

.modal-footer[b-p848j7lm58] {
    padding: 20px 24px;
    border-top: 1px solid var(--color-neutral-200);
    display: flex;
    justify-content: flex-end;
    gap: 12px;
}

/* ==================== FORM ==================== */

.form-group[b-p848j7lm58] {
    margin-bottom: 20px;
}

.form-group label[b-p848j7lm58] {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: var(--color-neutral-700);
    margin-bottom: 8px;
}

.required[b-p848j7lm58] {
    color: var(--color-danger-600);
}

.form-input[b-p848j7lm58],
.form-textarea[b-p848j7lm58],
.form-select[b-p848j7lm58] {
    width: 100%;
    padding: 12px 14px;
    border: 2px solid var(--color-neutral-300);
    border-radius: 8px;
    font-size: 15px;
    color: var(--color-neutral-900);
    transition: all 200ms ease;
}

.form-input:hover[b-p848j7lm58],
.form-textarea:hover[b-p848j7lm58],
.form-select:hover[b-p848j7lm58] {
    border-color: var(--color-neutral-400);
}

.form-input:focus[b-p848j7lm58],
.form-textarea:focus[b-p848j7lm58],
.form-select:focus[b-p848j7lm58] {
    outline: none;
    border-color: var(--color-primary-600);
    box-shadow: 0 0 0 3px rgba(20, 184, 166, 0.1);
}

.form-textarea[b-p848j7lm58] {
    resize: vertical;
    min-height: 100px;
}

.form-row[b-p848j7lm58] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.file-upload[b-p848j7lm58] {
    border: 2px dashed var(--color-neutral-300);
    border-radius: 8px;
    padding: 32px;
    text-align: center;
    cursor: pointer;
    transition: all 200ms ease;
}

.file-upload:hover[b-p848j7lm58] {
    border-color: var(--color-primary-600);
    background: var(--color-primary-50);
}

.file-upload i[b-p848j7lm58] {
    font-size: 32px;
    color: var(--color-neutral-400);
    display: block;
    margin-bottom: 12px;
}

.file-upload span[b-p848j7lm58] {
    display: block;
    color: var(--color-neutral-600);
}

.file-upload-hint[b-p848j7lm58] {
    font-size: 12px;
    color: var(--color-neutral-500);
    margin-top: 4px;
}

/* ==================== BUTTONS ==================== */

.btn-ghost[b-p848j7lm58] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    background: transparent;
    border: none;
    border-radius: 6px;
    color: var(--color-neutral-700);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 150ms ease;
}

.btn-ghost:hover[b-p848j7lm58] {
    background: var(--color-neutral-100);
}

.btn-icon[b-p848j7lm58] {
    width: 36px;
    height: 36px;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 6px;
    color: var(--color-neutral-600);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 150ms ease;
}

.btn-icon:hover[b-p848j7lm58] {
    background: var(--color-neutral-100);
}

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

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

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

    .assignments-grid[b-p848j7lm58] {
        grid-template-columns: 1fr;
    }

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

    .assignment-dates[b-p848j7lm58] {
        flex-direction: column;
    }

    .card-footer[b-p848j7lm58] {
        flex-direction: column;
    }

    .card-footer button[b-p848j7lm58] {
        width: 100%;
        justify-content: center;
    }
}
/* /Pages/Teacher/Attendance/Index.razor.rz.scp.css */
/* ------------------------------------------------------
   Teacher Attendance Workstation � aw-* CSS
   Target: speed + repetition ergonomics
   ------------------------------------------------------ */

/* -- Page shell -- */
.aw-page[b-c1x801vdu0] {
    padding: 0 0 60px;
    background: #f1f5f9;
    min-height: 100vh;
    overflow-x: auto;  /* Bug #119 fix: allow horizontal scroll instead of overlapping sidebar */
}

/* -- TOP BAR -- */
/* Not sticky: the layout Header (and its user dropdown) already pins to the
   viewport top. A sticky topbar here would collide with it at the top-right. */
.aw-topbar[b-c1x801vdu0] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 13px 28px;
    background: #fff;
    border-bottom: 1.5px solid #e2e8f0;
    box-shadow: 0 1px 6px rgba(0,0,0,.07);
}
.aw-topbar-brand[b-c1x801vdu0]  { display: flex; align-items: center; gap: 14px; }
.aw-topbar-icon-wrap[b-c1x801vdu0] {
    width: 42px; height: 42px; border-radius: 11px; flex-shrink: 0;
    background: linear-gradient(135deg, #4A9B8E 0%, #2D7var(--color-teal-500)E 100%);
    color: #fff; display: flex; align-items: center; justify-content: center; font-size: 1rem;
}
.aw-topbar-title[b-c1x801vdu0]  { font-size: 1.05rem; font-weight: 800; color: #0f172a; }
.aw-topbar-date[b-c1x801vdu0]   { font-size: 0.77rem; color: #64748b; font-weight: 500; margin-top: 1px; }
.aw-topbar-actions[b-c1x801vdu0] { display: flex; align-items: center; gap: 10px; }

.aw-save-ind[b-c1x801vdu0] {
    display: flex; align-items: center; gap: 6px;
    font-size: 0.8rem; font-weight: 600;
    padding: 6px 14px; border-radius: 999px;
}
.aw-save-ind--saving[b-c1x801vdu0] { background: #eff6ff; color: #1d4ed8; }
.aw-save-ind--saved[b-c1x801vdu0]  { background: #f0fdf4; color: #166534; }
.aw-save-ind--error[b-c1x801vdu0]  { background: #fef2f2; color: #b91c1c; }

.aw-save-btn[b-c1x801vdu0] {
    display: flex; align-items: center; gap: 8px;
    padding: 10px 22px; font-size: 0.88rem; font-weight: 700;
    border: none; border-radius: 9px; cursor: pointer;
    background: linear-gradient(135deg, #059669 0%, #047857 100%);
    color: #fff;
    box-shadow: 0 3px 10px rgba(5,150,105,.28);
    transition: filter .15s, transform .1s, box-shadow .15s;
}
.aw-save-btn:hover:not(:disabled)[b-c1x801vdu0] { filter: brightness(.92); transform: translateY(-1px); box-shadow: 0 5px 14px rgba(5,150,105,.35); }
.aw-save-btn:disabled[b-c1x801vdu0] { opacity: .45; cursor: not-allowed; }

.aw-report-btn[b-c1x801vdu0] {
    display: flex; align-items: center; gap: 6px;
    padding: 8px 16px; font-size: 0.82rem; font-weight: 600;
    border: 1px solid var(--color-neutral-200);
    border-radius: 8px; cursor: pointer; text-decoration: none;
    color: var(--color-neutral-700);
    background: var(--color-neutral-0, #fff);
    transition: background .15s, border-color .15s;
}
.aw-report-btn:hover[b-c1x801vdu0] { background: var(--color-neutral-50); border-color: var(--color-neutral-300); color: var(--color-neutral-900); }

/* -- CONTROLS BAR -- */
.aw-controls-bar[b-c1x801vdu0] {
    display: flex;
    align-items: flex-end;
    flex-wrap: nowrap;     /* single row � prevents variable height that breaks sticky offset */
    overflow-x: auto;      /* scroll horizontally if content overflows */
    gap: 14px;
    padding: 14px 28px;
    background: #fff;
    border-bottom: 1.5px solid #e2e8f0;
    margin-bottom: 18px;
    position: sticky;
    top: 68px;         /* topbar height */
    z-index: 40;
    box-shadow: 0 2px 6px rgba(0,0,0,.04);
}
.aw-ctrl-sep[b-c1x801vdu0]    { width: 1px; height: 38px; background: #e2e8f0; flex-shrink: 0; align-self: flex-end; margin-bottom: 1px; }
.aw-ctrl-field[b-c1x801vdu0]  { display: flex; flex-direction: column; gap: 4px; }
.aw-ctrl-lbl[b-c1x801vdu0]    { font-size: 0.66rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: #94a3b8; }
.aw-ctrl-input[b-c1x801vdu0]  {
    height: 44px; padding: 0 12px; font-size: 0.86rem;
    border: 1.5px solid #cbd5e1; border-radius: 9px; background: #fff; color: #0f172a;
    min-width: 140px; transition: border-color .15s;
}
.aw-ctrl-input:focus[b-c1x801vdu0]  { outline: none; border-color: #4A9B8E; }
.aw-ctrl-input:disabled[b-c1x801vdu0] { background: #f8fafc; color: #94a3b8; cursor: not-allowed; }
.aw-ctrl-input--warn[b-c1x801vdu0] { border-color: #f59e0b; background: #fffbeb; }

/* Mode toggle */
.aw-mode-group[b-c1x801vdu0] {
    display: flex; border: 1.5px solid #cbd5e1; border-radius: 9px; overflow: hidden;
}
.aw-mode-btn[b-c1x801vdu0] {
    display: flex; align-items: center; gap: 6px;
    padding: 0 16px; height: 44px;
    font-size: 0.82rem; font-weight: 700;
    border: none; border-right: 1px solid #e2e8f0;
    background: #fff; color: #64748b; cursor: pointer;
    white-space: nowrap; transition: background .13s, color .13s;
}
.aw-mode-btn:last-child[b-c1x801vdu0] { border-right: none; }
.aw-mode-btn:hover[b-c1x801vdu0] { background: #f8fafc; color: #334155; }
.aw-mode-btn--active[b-c1x801vdu0] { background: #f0fdf9; color: #2D7var(--color-teal-500)E; }
.aw-mode-btn i[b-c1x801vdu0] { font-size: 0.72rem; }

/* Search */
.aw-ctrl-field--search[b-c1x801vdu0] { flex: 1; min-width: 200px; }
.aw-search-wrap[b-c1x801vdu0]  { position: relative; display: flex; align-items: center; }
.aw-search-icon[b-c1x801vdu0]  { position: absolute; left: 11px; color: #94a3b8; font-size: 0.72rem; pointer-events: none; }
.aw-search-input[b-c1x801vdu0] {
    height: 44px; width: 100%; padding: 0 34px 0 32px;
    font-size: 0.86rem; border: 1.5px solid #cbd5e1; border-radius: 9px; background: #fff;
    transition: border-color .15s;
}
.aw-search-input:focus[b-c1x801vdu0] { outline: none; border-color: #4A9B8E; }
.aw-search-clear[b-c1x801vdu0] {
    position: absolute; right: 9px; width: 22px; height: 22px; border: none; background: none;
    cursor: pointer; color: #94a3b8; font-size: 0.68rem;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%; transition: background .13s, color .13s;
}
.aw-search-clear:hover[b-c1x801vdu0] { background: #f1f5f9; color: #334155; }

/* Filter chips � segmented container */
.aw-filter-chips[b-c1x801vdu0] {
    display: flex;
    gap: 0;
    height: 44px;
    align-items: center;
    background: #F1F5F9;
    border-radius: 10px;
    padding: 3px;
}
.aw-fc[b-c1x801vdu0] {
    display: flex; align-items: center;
    padding: 0 13px; height: 32px;
    font-size: 0.75rem; font-weight: 700;
    border: none; border-radius: 7px;
    background: transparent; color: #64748b; cursor: pointer;
    white-space: nowrap; transition: background .13s, color .13s, box-shadow .13s;
}
.aw-fc:hover[b-c1x801vdu0] { color: #334155; background: rgba(255,255,255,0.6); }
.aw-fc--active[b-c1x801vdu0] {
    background: #fff;
    color: #0F172A;
    box-shadow: 0 1px 4px rgba(0,0,0,0.12);
}
.aw-fc--unmarked.aw-fc--active[b-c1x801vdu0] { color: #6b7280; }
.aw-fc--guarded.aw-fc--active[b-c1x801vdu0]  { color: #64748b; }
.aw-fc--p.aw-fc--active[b-c1x801vdu0]        { color: #059669; }
.aw-fc--a.aw-fc--active[b-c1x801vdu0]        { color: #dc2626; }
.aw-fc--l.aw-fc--active[b-c1x801vdu0]        { color: #d97706; }
.aw-fc--ol.aw-fc--active[b-c1x801vdu0]       { color: #2563eb; }

/* -- Non-working-day warning -- */
.aw-date-warn[b-c1x801vdu0] {
    margin: 0 28px 14px; padding: 11px 16px;
    background: #fffbeb; color: #92400e; border: 1.5px solid #f59e0b; border-radius: 9px;
    font-size: 0.83rem; font-weight: 600; display: flex; align-items: center; gap: 8px;
}
.aw-date-warn i[b-c1x801vdu0] { color: #d97706; }

/* -- Error / Loading -- */
.aw-error-bar[b-c1x801vdu0] {
    margin: 0 28px 14px; padding: 11px 16px;
    background: #fef2f2; color: #b91c1c; border-radius: 9px;
    font-size: 0.83rem; font-weight: 600; display: flex; align-items: center; gap: 8px;
}
.aw-loading[b-c1x801vdu0] {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    padding: 70px 28px; gap: 16px; color: #64748b; font-size: 0.9rem;
}
.aw-spinner[b-c1x801vdu0] {
    width: 38px; height: 38px;
    border: 3px solid #e2e8f0; border-top-color: #4A9B8E;
    border-radius: 50%; animation: aw-spin-b-c1x801vdu0 .75s linear infinite;
}
@keyframes aw-spin-b-c1x801vdu0 { to { transform: rotate(360deg); } }

/* -- Empty state -- */
.aw-empty-state[b-c1x801vdu0] {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    padding: 90px 28px; text-align: center;
}
.aw-empty-icon[b-c1x801vdu0]  { font-size: 2.8rem; color: #cbd5e1; margin-bottom: 14px; }
.aw-empty-title[b-c1x801vdu0] { font-size: 1.05rem; font-weight: 700; color: #334155; margin-bottom: 6px; }
.aw-empty-sub[b-c1x801vdu0]   { font-size: 0.83rem; color: #94a3b8; }

/* -- KPI CARDS -- */
.aw-kpi-strip[b-c1x801vdu0] {
    display: flex; align-items: stretch; flex-wrap: nowrap; overflow-x: auto;
    background: #fff; border: 1.5px solid #e2e8f0; border-radius: 12px;
    padding: 0; margin: 0 28px 14px;
    box-shadow: 0 1px 4px rgba(0,0,0,.05);
}
.aw-kpi[b-c1x801vdu0] {
    display: flex; align-items: center; gap: 14px;
    padding: 18px 22px;
    border-right: 1px solid #f1f5f9;
    flex-shrink: 0;
    min-width: 110px;
    transition: background .13s;
}
.aw-kpi:hover[b-c1x801vdu0] { background: #fafafa; }
.aw-kpi-icon[b-c1x801vdu0] {
    width: 40px; height: 40px; border-radius: 10px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center; font-size: 1rem;
}
.aw-kpi-icon--total[b-c1x801vdu0]   { background: #f1f5f9; color: #334155; }
.aw-kpi-icon--present[b-c1x801vdu0] { background: #dcfce7; color: #059669; }
.aw-kpi-icon--absent[b-c1x801vdu0]  { background: #fee2e2; color: #dc2626; }
.aw-kpi-icon--late[b-c1x801vdu0]    { background: #fef9c3; color: #ca8a04; }
.aw-kpi-icon--leave[b-c1x801vdu0]   { background: #dbeafe; color: #2563eb; }
.aw-kpi-icon--unmarked[b-c1x801vdu0]{ background: #f3f4f6; color: #9ca3af; }
.aw-kpi-icon--pct[b-c1x801vdu0]     { background: #f0fdf9; color: #2D7var(--color-teal-500)E; }

.aw-kpi-body[b-c1x801vdu0]          { display: flex; flex-direction: column; }
.aw-kpi-val[b-c1x801vdu0]  { font-size: 1.65rem; font-weight: 900; color: #0f172a; line-height: 1; }
.aw-kpi-lbl[b-c1x801vdu0]  { font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: #94a3b8; margin-top: 3px; }
.aw-kpi-pct[b-c1x801vdu0]  { font-size: 1.65rem; font-weight: 900; color: #2D7var(--color-teal-500)E; line-height: 1; }
.aw-kpi-pct sup[b-c1x801vdu0] { font-size: 0.75rem; }

.aw-kpi--present .aw-kpi-val[b-c1x801vdu0] { color: #059669; }
.aw-kpi--absent  .aw-kpi-val[b-c1x801vdu0] { color: #dc2626; }
.aw-kpi--late    .aw-kpi-val[b-c1x801vdu0] { color: #ca8a04; }
.aw-kpi--leave   .aw-kpi-val[b-c1x801vdu0] { color: #2563eb; }
.aw-kpi--unmarked .aw-kpi-val[b-c1x801vdu0]{ color: #6b7280; }
.aw-kpi--guarded .aw-kpi-val[b-c1x801vdu0]{ color: #64748b; }

/* Attendance guard: locked row (not admitted / dropped out) */
.aw-row--guarded[b-c1x801vdu0] { background: #f8fafc !important; opacity: .85; }
.aw-row--guarded .aw-td-student[b-c1x801vdu0] { box-shadow: inset 4px 0 0 #94a3b8; }
.aw-row--guarded .aw-student-name[b-c1x801vdu0] { color: #94a3b8; }

/* Guard badge (desktop + mobile shared) */
.aw-guard-badge[b-c1x801vdu0] {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 6px 12px; border-radius: 999px;
    font-size: 0.78rem; font-weight: 700; letter-spacing: .01em;
    white-space: nowrap;
}
.aw-guard-badge i[b-c1x801vdu0] { font-size: 0.8rem; }
.aw-guard-badge--notadmitted[b-c1x801vdu0] { background: #f1f5f9; color: #64748b; border: 1px solid #e2e8f0; }
.aw-guard-badge--dropout[b-c1x801vdu0] { background: #fef2f2; color: #b91c1c; border: 1px solid #fecaca; }

.aw-kpi-sep[b-c1x801vdu0] { width: 1.5px; background: #e2e8f0; margin: 12px 0; flex-shrink: 0; }

.aw-kpi-progress[b-c1x801vdu0] {
    flex: 1; min-width: 180px; padding: 16px 22px;
    display: flex; flex-direction: column; justify-content: center; gap: 8px;
}
.aw-kpi-progress-top[b-c1x801vdu0]  { display: flex; align-items: center; justify-content: space-between; }
.aw-kpi-progress-lbl[b-c1x801vdu0]  { font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: #94a3b8; }
.aw-kpi-progress-count[b-c1x801vdu0] { font-size: 0.8rem; font-weight: 700; color: #334155; }
.aw-kpi-progress-count strong[b-c1x801vdu0] { color: #0f172a; font-size: 0.9rem; }
.aw-kpi-bar-track[b-c1x801vdu0] {
    height: 10px; background: #f1f5f9; border-radius: 999px; overflow: hidden;
}
.aw-kpi-bar[b-c1x801vdu0] {
    height: 100%; border-radius: 999px; min-width: 4px;
    background: linear-gradient(90deg, #34d399 0%, #059669 100%);
    transition: width .5s cubic-bezier(.4,0,.2,1);
}

/* -- BULK ACTIONS -- */
.aw-bulk-bar[b-c1x801vdu0] {
    display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
    padding: 12px 28px; background: #fff;
    border: 1.5px solid #e2e8f0; border-radius: 12px;
    margin: 0 28px 14px;
    box-shadow: 0 1px 4px rgba(0,0,0,.04);
}
.aw-bulk-btn[b-c1x801vdu0] {
    display: flex; align-items: center; gap: 7px;
    padding: 9px 16px; font-size: 0.82rem; font-weight: 700;
    border-radius: 8px; border: 1.5px solid transparent; cursor: pointer;
    transition: filter .14s, transform .1s, box-shadow .14s; white-space: nowrap;
}
.aw-bulk-btn:hover[b-c1x801vdu0] { filter: brightness(.92); transform: translateY(-1px); }
.aw-bulk-btn--present[b-c1x801vdu0] { background: #dcfce7; color: #166534; border-color: #86efac; }
.aw-bulk-btn--absent[b-c1x801vdu0]  { background: #fee2e2; color: #b91c1c; border-color: #fca5a5; }
.aw-bulk-btn--clear[b-c1x801vdu0]   { background: #f1f5f9; color: #334155; border-color: #cbd5e1; }
.aw-bulk-sep[b-c1x801vdu0]          { width: 1px; height: 26px; background: #e2e8f0; flex-shrink: 0; }

/* -- Pending / all-marked badges -- */
.aw-pending-badge[b-c1x801vdu0] {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 7px 14px; border-radius: 9px;
    background: #FFF7ED; border: 1.5px solid #FED7AA;
    color: #C2410C; font-size: 0.83rem; font-weight: 700;
}
.aw-pending-badge i[b-c1x801vdu0] { font-size: 0.8rem; }
.aw-all-marked-badge[b-c1x801vdu0] {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 7px 14px; border-radius: 9px;
    background: #F0FDF4; border: 1.5px solid #86EFAC;
    color: #166534; font-size: 0.83rem; font-weight: 700;
}
.aw-all-marked-badge i[b-c1x801vdu0] { font-size: 0.8rem; }
.aw-progress-wrap[b-c1x801vdu0] { display: flex; flex-direction: column; gap: 4px; }
.aw-progress-sub[b-c1x801vdu0]  { font-size: 0.72rem; color: #94a3b8; }

.aw-scan-toggle[b-c1x801vdu0] {
    display: flex; align-items: center; gap: 7px;
    padding: 9px 16px; font-size: 0.82rem; font-weight: 700;
    border-radius: 8px; border: none; cursor: pointer; margin-left: auto;
    transition: filter .14s;
}
.aw-scan-toggle--start[b-c1x801vdu0] { background: #2D7var(--color-teal-500)E; color: #fff; }
.aw-scan-toggle--stop[b-c1x801vdu0]  { background: #dc2626; color: #fff; }
.aw-scan-toggle:hover[b-c1x801vdu0]  { filter: brightness(.9); }

/* -- Scanner Panels -- */
.aw-scanner-panel[b-c1x801vdu0] {
    display: grid; grid-template-columns: 1fr 280px; gap: 16px;
    background: #fff; border: 1.5px solid #e2e8f0; border-radius: 12px;
    padding: 16px; margin: 0 28px 14px;
}
.aw-scanner-video[b-c1x801vdu0]  { background: #0f172a; border-radius: 9px; overflow: hidden; min-height: 240px; }
.aw-qr-reader[b-c1x801vdu0]      { width: 100%; min-height: 240px; }
.aw-scanner-feed[b-c1x801vdu0]   { display: flex; flex-direction: column; gap: 8px; }
.aw-scan-counter[b-c1x801vdu0]   { font-size: 1.45rem; font-weight: 900; color: #2D7var(--color-teal-500)E; }
.aw-scan-counter span[b-c1x801vdu0] { font-size: 0.8rem; font-weight: 500; color: #64748b; }
.aw-scan-row[b-c1x801vdu0] {
    display: flex; align-items: center; gap: 8px; padding: 8px 10px;
    background: #f0fdf4; border-radius: 7px; border-left: 3px solid #059669;
    font-size: 0.78rem; color: #166534;
}
.aw-scan-time[b-c1x801vdu0] { margin-left: auto; font-size: 0.7rem; color: #64748b; }

.aw-scanner-panel--usb[b-c1x801vdu0] {
    grid-template-columns: 1fr; display: flex;
    align-items: center; justify-content: center; flex-direction: column;
    gap: 12px; padding: 30px; text-align: center;
    font-size: 0.88rem; color: #334155;
}
.aw-usb-icon[b-c1x801vdu0]     { font-size: 2.2rem; color: #4A9B8E; }
.aw-usb-input[b-c1x801vdu0]    {
    width: min(340px, 100%); height: 46px; padding: 0 16px;
    font-size: 0.9rem; text-align: center;
    border: 2px solid #4A9B8E; border-radius: 9px; background: #f0fdf9;
}
.aw-scan-counter-sm[b-c1x801vdu0] { font-size: 0.8rem; color: #64748b; }

/* -- STUDENT GRID -- */
.aw-grid-card[b-c1x801vdu0] {
    background: #fff; border: 1.5px solid #e2e8f0; border-radius: 12px;
    margin: 0 28px; overflow-x: auto; -webkit-overflow-scrolling: touch; box-shadow: 0 2px 8px rgba(0,0,0,.05);
    /* Sticky container so the header sticks flush under the two stacked sticky bars (topbar 68px + controls ~72px). */
    position: sticky; top: calc(68px + 72px); z-index: 15;
}
.aw-grid[b-c1x801vdu0] { width: 100%; min-width: 600px; border-collapse: collapse; }

/* Table header � inherits the container's sticky offset, no stale hard-coded value. */
.aw-grid-head-row[b-c1x801vdu0] { background: #f8fafc; }
.aw-th[b-c1x801vdu0] {
    padding: 12px 16px;
    font-size: 0.7rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em;
    color: #64748b; text-align: left; border-bottom: 2px solid #e2e8f0;
    white-space: nowrap;
}
.aw-th-student[b-c1x801vdu0] { width: 200px; }
.aw-th-status[b-c1x801vdu0]  { width: 280px; }
.aw-th-remarks[b-c1x801vdu0] { width: 280px; }
.aw-th-method[b-c1x801vdu0]  { width: 60px; text-align: center; }
.aw-th-hint[b-c1x801vdu0] {
    display: inline-flex; align-items: center; justify-content: center;
    width: 16px; height: 16px; border-radius: 50%; background: #e2e8f0; color: #94a3b8;
    font-size: 0.55rem; margin-left: 5px; cursor: help;
}

/* Row sizing & states */
.aw-row[b-c1x801vdu0] {
    transition: background .1s;
    border-bottom: 1px solid #F4F6F8;
}
.aw-row:last-child[b-c1x801vdu0] { border-bottom: none; }
.aw-row:hover[b-c1x801vdu0] { background: #F8F9FA !important; }
.aw-row--alt[b-c1x801vdu0]  { background: #FAFBFC; }

/* Status-colored rows � left border accent */
.aw-row--present[b-c1x801vdu0]      { background: #F0FDF4 !important; }
.aw-row--present .aw-td-student[b-c1x801vdu0] { box-shadow: inset 4px 0 0 #059669; }
.aw-row--absent[b-c1x801vdu0]       { background: #FEF7F7 !important; }
.aw-row--absent  .aw-td-student[b-c1x801vdu0] { box-shadow: inset 4px 0 0 #dc2626; }
.aw-row--late[b-c1x801vdu0]         { background: #FFFBEB !important; }
.aw-row--late    .aw-td-student[b-c1x801vdu0] { box-shadow: inset 4px 0 0 #d97706; }
.aw-row--leave[b-c1x801vdu0]        { background: #EFF8FF !important; }
.aw-row--leave   .aw-td-student[b-c1x801vdu0] { box-shadow: inset 4px 0 0 #2563eb; }
.aw-row--unmarked-row .aw-td-student[b-c1x801vdu0] { box-shadow: inset 4px 0 0 #e2e8f0; }

/* Cells */
.aw-td[b-c1x801vdu0] {
    padding: 18px 20px;
    font-size: 0.875rem; color: #334155;
    vertical-align: middle;
}

/* Student cell � stacked name + roll */
.aw-td-student[b-c1x801vdu0] { min-width: 190px; }
.aw-student-name[b-c1x801vdu0] {
    font-size: 15px; font-weight: 700; color: #0F172A;
    line-height: 1.25; margin: 0;
}
.aw-student-roll[b-c1x801vdu0] {
    font-size: 11.5px; font-weight: 500; color: #94A3B8;
    font-family: ui-monospace, 'SFMono-Regular', monospace;
    letter-spacing: 0.03em; margin: 3px 0 0;
}

/* -- Status Buttons � Segmented Pill -- */
.aw-status-btns[b-c1x801vdu0] {
    display: flex;
    gap: 0;
    align-items: center;
    border: 1.5px solid #E2E8F0;
    border-radius: 10px;
    overflow: hidden;
    width: fit-content;
    background: #F8FAFC;
}
.aw-sb[b-c1x801vdu0] {
    display: flex; align-items: center; justify-content: center; gap: 6px;
    padding: 0 14px; height: 38px; min-width: 84px;
    border: none;
    border-right: 1px solid #E2E8F0;
    font-size: 0.78rem; font-weight: 700;
    cursor: pointer; background: transparent; color: #64748b;
    transition: background .12s, color .12s;
    white-space: nowrap;
}
.aw-sb:last-child[b-c1x801vdu0] { border-right: none; }
.aw-sb i[b-c1x801vdu0] { font-size: 0.72rem; }
.aw-sb:hover[b-c1x801vdu0] { background: #F1F5F9; color: #334155; }

/* Present */
.aw-sb--p.aw-sb--active[b-c1x801vdu0] {
    background: #ECFDF3; color: #027A48; border-right-color: #86EFAC;
}
.aw-sb--p.aw-sb--active + .aw-sb[b-c1x801vdu0] { border-left: 1px solid #86EFAC; }
/* Absent */
.aw-sb--a.aw-sb--active[b-c1x801vdu0] {
    background: #FEF3F2; color: #B42318; border-right-color: #FCA5A5;
}
.aw-sb--a.aw-sb--active + .aw-sb[b-c1x801vdu0] { border-left: 1px solid #FCA5A5; }
/* Late */
.aw-sb--l.aw-sb--active[b-c1x801vdu0] {
    background: #FFF7ED; color: #C2410C; border-right-color: #FED7AA;
}
.aw-sb--l.aw-sb--active + .aw-sb[b-c1x801vdu0] { border-left: 1px solid #FED7AA; }
/* On Leave */
.aw-sb--ol.aw-sb--active[b-c1x801vdu0] {
    background: #EFF6FF; color: #1D4ED8;
}

/* -- Remarks Cell -- */
.aw-td-remarks[b-c1x801vdu0] { min-width: 220px; }
.aw-remarks-input[b-c1x801vdu0] {
    height: 40px; padding: 0 12px; font-size: 0.83rem;
    border: 1.5px solid #e2e8f0; border-radius: 9px; background: #FAFAFC; width: 100%;
    transition: border-color .15s, background .15s;
}
.aw-remarks-input:focus[b-c1x801vdu0] {
    outline: none; border-color: #4A9B8E; background: #fff;
    box-shadow: 0 0 0 3px rgba(74,155,142,0.12);
}
.aw-remark-chips[b-c1x801vdu0] {
    display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px;
}
.aw-rc[b-c1x801vdu0] {
    padding: 3px 9px; font-size: 0.69rem; font-weight: 700;
    border: 1.5px solid #e2e8f0; border-radius: 6px;
    background: #F8FAFC; color: #64748b; cursor: pointer;
    white-space: nowrap; transition: all .12s;
}
.aw-rc:hover[b-c1x801vdu0] { background: #EEF2FF; color: #3730A3; border-color: #A5B4FC; }

/* -- Method Column -- */
.aw-td-method[b-c1x801vdu0] { text-align: center; }
.aw-method-icon[b-c1x801vdu0] {
    display: inline-flex; align-items: center; justify-content: center;
    width: 30px; height: 30px; border-radius: 7px; font-size: 0.75rem;
}
.aw-method-icon--camera[b-c1x801vdu0] { background: #dcfce7; color: #059669; }
.aw-method-icon--usb[b-c1x801vdu0]    { background: #dbeafe; color: #2563eb; }
.aw-method-icon--manual[b-c1x801vdu0] { background: #f3f4f6; color: #6b7280; }
.aw-method-none[b-c1x801vdu0]         { color: #d1d5db; font-size: 0.75rem; }

/* Empty/no-results */
.aw-no-results[b-c1x801vdu0] {
    padding: 28px; text-align: center;
    font-size: 0.86rem; color: #94a3b8; font-style: italic;
}

/* -- Keyboard hint -- */
.aw-keyboard-hint[b-c1x801vdu0] {
    display: flex; align-items: center; gap: 8px;
    padding: 10px 28px 0;
    font-size: 0.74rem; color: #94a3b8;
}
.aw-keyboard-hint i[b-c1x801vdu0] { font-size: 0.7rem; }
kbd[b-c1x801vdu0] {
    display: inline-flex; align-items: center; justify-content: center;
    padding: 1px 6px; font-size: 0.7rem; font-family: monospace; font-weight: 700;
    background: #f1f5f9; border: 1px solid #cbd5e1; border-bottom-width: 2px;
    border-radius: 4px; color: #475569;
}

/* -- FLOATING NAVIGATION -- */
.aw-float-nav[b-c1x801vdu0] {
    position: fixed;
    bottom: 28px;
    right: 28px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    z-index: 200;
}
.aw-float-btn[b-c1x801vdu0] {
    display: flex; align-items: center; gap: 8px;
    padding: 10px 16px; border: none; border-radius: 12px;
    font-size: 0.81rem; font-weight: 700;
    cursor: pointer; white-space: nowrap;
    box-shadow: 0 4px 16px rgba(0,0,0,0.18);
    transition: transform .15s, box-shadow .15s;
}
.aw-float-btn:hover:not(:disabled)[b-c1x801vdu0] {
    transform: translateY(-2px);
    box-shadow: 0 6px 22px rgba(0,0,0,0.24);
}
.aw-float-btn--top[b-c1x801vdu0] {
    background: #1E293B; color: #fff;
}
.aw-float-btn--next[b-c1x801vdu0] {
    background: linear-gradient(135deg, #F59E0B 0%, #D97706 100%);
    color: #fff;
}
.aw-float-btn--done[b-c1x801vdu0] {
    background: #ECFDF5; color: #065F46;
    border: 1.5px solid #6EE7B7;
    box-shadow: 0 2px 8px rgba(5,150,105,0.15);
    cursor: default;
}
.aw-float-badge[b-c1x801vdu0] {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 20px; height: 20px; padding: 0 5px;
    background: rgba(255,255,255,0.3);
    border-radius: 999px;
    font-size: 0.73rem; font-weight: 800;
}

/* Tighten VIA column � it doesn't need to expand */
.aw-th-method[b-c1x801vdu0] { width: 52px; text-align: center; }

/* -----------------------------------------------------------
   RESPONSIVE � Mobile-first breakpoints at 768px and 480px
   Desktop styles above are untouched. Below only overrides.
   ----------------------------------------------------------- */

/* Mobile card list � hidden on desktop, shown at =768px */
.aw-mobile-list[b-c1x801vdu0] { display: none; }

/* -- BREAKPOINT: tablet / small landscape -- */
@media (max-width: 1023px) {
    /* Page shell */
    .aw-page[b-c1x801vdu0] { padding: 0 0 80px; }

    /* -- Topbar -- */
    .aw-topbar[b-c1x801vdu0] {
        padding: 10px 14px;
        flex-wrap: wrap;
        gap: 8px;
    }
    .aw-topbar-brand[b-c1x801vdu0] { gap: 10px; }
    .aw-topbar-icon-wrap[b-c1x801vdu0] { width: 36px; height: 36px; font-size: 0.9rem; border-radius: 9px; }
    .aw-topbar-title[b-c1x801vdu0] { font-size: 0.95rem; }
    .aw-topbar-date[b-c1x801vdu0] { font-size: 0.7rem; }
    .aw-topbar-actions[b-c1x801vdu0] { gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
    .aw-save-ind[b-c1x801vdu0] { font-size: 0.72rem; padding: 5px 10px; }
    .aw-save-btn[b-c1x801vdu0] { padding: 8px 16px; font-size: 0.8rem; }
    .aw-report-btn[b-c1x801vdu0] { padding: 7px 12px; font-size: 0.76rem; }

    /* -- Controls bar � stack vertically -- */
    .aw-controls-bar[b-c1x801vdu0] {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
        padding: 12px 14px;
        overflow-x: visible;
        flex-wrap: wrap;
        position: relative;
        top: 0;
    }
    .aw-ctrl-sep[b-c1x801vdu0] { display: none; }
    .aw-ctrl-field[b-c1x801vdu0] {
        width: 100%;
        box-sizing: border-box;
    }
    .aw-ctrl-input[b-c1x801vdu0] {
        width: 100%;
        box-sizing: border-box;
        min-width: 0;
        height: 44px;
        font-size: 0.84rem;
    }
    .aw-ctrl-field--search[b-c1x801vdu0] { min-width: 0; }
    .aw-search-input[b-c1x801vdu0] {
        width: 100%;
        box-sizing: border-box;
        height: 44px;
    }

    /* Mode toggle � full width, 3 equal columns */
    .aw-mode-group[b-c1x801vdu0] {
        width: 100%;
        box-sizing: border-box;
    }
    .aw-mode-btn[b-c1x801vdu0] {
        flex: 1;
        justify-content: center;
        height: 44px;
        font-size: 0.78rem;
    }

    /* Filter chips � wrap onto multiple lines */
    .aw-filter-chips[b-c1x801vdu0] {
        flex-wrap: wrap;
        height: auto;
        min-height: 44px;
        padding: 4px;
        gap: 4px;
        width: 100%;
        box-sizing: border-box;
    }
    .aw-fc[b-c1x801vdu0] {
        padding: 6px 12px;
        height: 34px;
        font-size: 0.74rem;
    }

    /* -- KPI cards � responsive grid -- */
    .aw-kpi-strip[b-c1x801vdu0] {
        flex-wrap: wrap;
        overflow-x: visible;
        margin: 0 14px 12px;
        padding: 8px;
        gap: 6px;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
    }
    .aw-kpi[b-c1x801vdu0] {
        min-width: 0;
        padding: 12px 14px;
        border-right: none;
        border-bottom: 1px solid #f1f5f9;
        gap: 10px;
    }
    .aw-kpi:nth-last-child(-n+2)[b-c1x801vdu0] { border-bottom: none; }
    .aw-kpi-icon[b-c1x801vdu0] { width: 36px; height: 36px; font-size: 0.9rem; }
    .aw-kpi-val[b-c1x801vdu0] { font-size: 1.35rem; }
    .aw-kpi-pct[b-c1x801vdu0] { font-size: 1.35rem; }
    .aw-kpi-lbl[b-c1x801vdu0] { font-size: 0.62rem; }
    .aw-kpi-sep[b-c1x801vdu0] { display: none; }

    /* Progress card � full width */
    .aw-kpi-progress[b-c1x801vdu0] {
        grid-column: 1 / -1;
        min-width: 0;
        padding: 12px 14px;
        border-top: 1px solid #f1f5f9;
    }

    /* -- Bulk actions � stack vertically -- */
    .aw-bulk-bar[b-c1x801vdu0] {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
        padding: 12px 14px;
        margin: 0 14px 12px;
    }
    .aw-bulk-btn[b-c1x801vdu0] {
        width: 100%;
        box-sizing: border-box;
        justify-content: center;
        padding: 12px 16px;
        font-size: 0.82rem;
        min-height: 44px;
    }
    .aw-bulk-sep[b-c1x801vdu0] { display: none; }
    .aw-progress-wrap[b-c1x801vdu0] { align-items: center; text-align: center; }
    .aw-scan-toggle[b-c1x801vdu0] {
        margin-left: 0;
        width: 100%;
        box-sizing: border-box;
        justify-content: center;
        min-height: 44px;
    }

    /* -- Scanner panel -- */
    .aw-scanner-panel[b-c1x801vdu0] {
        grid-template-columns: 1fr;
        margin: 0 14px 12px;
    }

    /* -- Error bar -- */
    .aw-error-bar[b-c1x801vdu0] { margin: 0 14px 12px; }
    .aw-date-warn[b-c1x801vdu0] { margin: 0 14px 12px; }

    /* -- Hide desktop table, show mobile cards -- */
    .aw-grid-card[b-c1x801vdu0] { display: none; }
    .aw-mobile-list[b-c1x801vdu0] {
        display: flex;
        flex-direction: column;
        gap: 8px;
        margin: 0 14px;
    }

    /* -- Mobile student card -- */
    .aw-mc[b-c1x801vdu0] {
        background: #fff;
        border: 1.5px solid #e2e8f0;
        border-radius: 10px;
        overflow: hidden;
        box-shadow: 0 1px 4px rgba(0,0,0,.05);
        width: 100%;
        box-sizing: border-box;
    }
    .aw-mc-header[b-c1x801vdu0] {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 10px 14px;
        background: #f8fafc;
        border-bottom: 1px solid #f1f5f9;
        border-left: 4px solid #e2e8f0;
    }
    .aw-mc--present .aw-mc-header[b-c1x801vdu0] { border-left-color: #059669; background: #f0fdf4; }
    .aw-mc--absent  .aw-mc-header[b-c1x801vdu0] { border-left-color: #dc2626; background: #fef7f7; }
    .aw-mc--late    .aw-mc-header[b-c1x801vdu0] { border-left-color: #d97706; background: #fffbeb; }
    .aw-mc--leave   .aw-mc-header[b-c1x801vdu0] { border-left-color: #2563eb; background: #eff8ff; }
    .aw-mc--guarded .aw-mc-header[b-c1x801vdu0] { border-left-color: #94a3b8; background: #f8fafc; }
    .aw-mc--guarded[b-c1x801vdu0] { opacity: .9; }
    .aw-mc-guard[b-c1x801vdu0] { padding: 12px 14px; display: flex; }

    .aw-mc-info[b-c1x801vdu0] { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
    .aw-mc-method-badge[b-c1x801vdu0] { color: #94a3b8; font-size: 0.78rem; flex-shrink: 0; }

    /* 4-column attendance buttons */
    .aw-mc-btns[b-c1x801vdu0] {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 6px;
        padding: 10px;
    }
    .aw-mcb[b-c1x801vdu0] {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 3px;
        height: 48px;
        border: 1.5px solid #e2e8f0;
        border-radius: 8px;
        background: #f8fafc;
        color: #64748b;
        cursor: pointer;
        transition: all .12s;
        padding: 0;
        font-weight: 700;
        -webkit-tap-highlight-color: transparent;
    }
    .aw-mcb i[b-c1x801vdu0] { font-size: 0.8rem; }
    .aw-mcb span[b-c1x801vdu0] { font-size: 0.62rem; font-weight: 700; }
    .aw-mcb:active[b-c1x801vdu0] { transform: scale(0.95); }
    .aw-mcb--p.aw-mcb--active[b-c1x801vdu0] { background: #ECFDF3; color: #027A48; border-color: #86EFAC; }
    .aw-mcb--a.aw-mcb--active[b-c1x801vdu0] { background: #FEF3F2; color: #B42318; border-color: #FCA5A5; }
    .aw-mcb--l.aw-mcb--active[b-c1x801vdu0] { background: #FFF7ED; color: #C2410C; border-color: #FED7AA; }
    .aw-mcb--ol.aw-mcb--active[b-c1x801vdu0] { background: #EFF6FF; color: #1D4ED8; border-color: #BFDBFE; }

    /* Remarks (mobile) */
    .aw-mc-remarks[b-c1x801vdu0] { padding: 0 10px 10px; }
    .aw-mc-remarks .aw-remarks-input[b-c1x801vdu0] {
        width: 100%;
        box-sizing: border-box;
    }

    /* -- Keyboard hint � hide on mobile -- */
    .aw-keyboard-hint[b-c1x801vdu0] { display: none; }

    /* -- Floating nav -- */
    .aw-float-nav[b-c1x801vdu0] { bottom: 16px; right: 14px; }
    .aw-float-btn[b-c1x801vdu0] { padding: 10px 14px; font-size: 0.76rem; }

    /* -- Empty / loading states -- */
    .aw-empty-state[b-c1x801vdu0] { padding: 60px 20px; }
    .aw-empty-icon[b-c1x801vdu0] { font-size: 2.2rem; }
    .aw-empty-title[b-c1x801vdu0] { font-size: 0.95rem; }
    .aw-empty-sub[b-c1x801vdu0] { font-size: 0.78rem; }
    .aw-loading[b-c1x801vdu0] { padding: 50px 20px; }
}

/* -- BREAKPOINT: 480px (phones � iPhone SE, Pixel, etc.) -- */
@media (max-width: 480px) {
    /* Topbar � tighter */
    .aw-topbar[b-c1x801vdu0] { padding: 8px 12px; }
    .aw-topbar-brand[b-c1x801vdu0] { gap: 8px; }
    .aw-topbar-icon-wrap[b-c1x801vdu0] { width: 32px; height: 32px; font-size: 0.8rem; border-radius: 8px; }
    .aw-topbar-title[b-c1x801vdu0] { font-size: 0.85rem; }
    .aw-topbar-date[b-c1x801vdu0] { font-size: 0.65rem; }
    .aw-topbar-actions[b-c1x801vdu0] { gap: 6px; }
    .aw-save-ind[b-c1x801vdu0] { display: none; }  /* hide save indicator on very small screens */
    .aw-save-btn[b-c1x801vdu0] { padding: 7px 12px; font-size: 0.74rem; }
    .aw-report-btn[b-c1x801vdu0] { padding: 6px 10px; font-size: 0.7rem; }

    /* Controls � tighter gaps */
    .aw-controls-bar[b-c1x801vdu0] { padding: 10px 12px; gap: 10px; }
    .aw-ctrl-lbl[b-c1x801vdu0] { font-size: 0.6rem; }
    .aw-ctrl-input[b-c1x801vdu0] { height: 42px; font-size: 0.8rem; }
    .aw-mode-btn[b-c1x801vdu0] { height: 42px; font-size: 0.72rem; }
    .aw-mode-btn span[b-c1x801vdu0] { display: none; }  /* icon-only on very small screens */
    .aw-mode-btn i[b-c1x801vdu0] { font-size: 0.85rem; }

    /* Filter chips � smaller */
    .aw-fc[b-c1x801vdu0] { padding: 5px 10px; height: 32px; font-size: 0.7rem; }

    /* KPI � single column on very small screens */
    .aw-kpi-strip[b-c1x801vdu0] {
        grid-template-columns: 1fr;
        margin: 0 10px 10px;
        padding: 6px;
    }
    .aw-kpi[b-c1x801vdu0] {
        padding: 10px 12px;
        border-bottom: 1px solid #f1f5f9;
    }
    .aw-kpi:last-child[b-c1x801vdu0] { border-bottom: none; }
    .aw-kpi-icon[b-c1x801vdu0] { width: 32px; height: 32px; font-size: 0.82rem; }
    .aw-kpi-val[b-c1x801vdu0] { font-size: 1.2rem; }
    .aw-kpi-pct[b-c1x801vdu0] { font-size: 1.2rem; }
    .aw-kpi-lbl[b-c1x801vdu0] { font-size: 0.58rem; }
    .aw-kpi-progress[b-c1x801vdu0] { padding: 10px 12px; }

    /* Bulk bar � tighter */
    .aw-bulk-bar[b-c1x801vdu0] { padding: 10px 12px; margin: 0 10px 10px; gap: 6px; }
    .aw-bulk-btn[b-c1x801vdu0] { padding: 10px 14px; font-size: 0.78rem; }

    /* Scanner panel */
    .aw-scanner-panel[b-c1x801vdu0] { margin: 0 10px 10px; padding: 12px; }
    .aw-scanner-video[b-c1x801vdu0] { min-height: 200px; }
    .aw-qr-reader[b-c1x801vdu0] { min-height: 200px; }

    /* Error bar */
    .aw-error-bar[b-c1x801vdu0] { margin: 0 10px 10px; font-size: 0.78rem; padding: 10px 12px; }

    /* Mobile student cards � tighter */
    .aw-mobile-list[b-c1x801vdu0] { margin: 0 10px; gap: 6px; }
    .aw-mc-header[b-c1x801vdu0] { padding: 8px 12px; }
    .aw-student-name[b-c1x801vdu0] { font-size: 13px; }
    .aw-student-roll[b-c1x801vdu0] { font-size: 10.5px; }
    .aw-mc-btns[b-c1x801vdu0] { gap: 5px; padding: 8px; }
    .aw-mcb[b-c1x801vdu0] { height: 44px; }
    .aw-mcb i[b-c1x801vdu0] { font-size: 0.75rem; }
    .aw-mcb span[b-c1x801vdu0] { font-size: 0.58rem; }
    .aw-mc-remarks[b-c1x801vdu0] { padding: 0 8px 8px; }
    .aw-remarks-input[b-c1x801vdu0] { height: 38px; font-size: 0.78rem; }

    /* Floating nav � smaller */
    .aw-float-nav[b-c1x801vdu0] { bottom: 12px; right: 10px; gap: 6px; }
    .aw-float-btn[b-c1x801vdu0] { padding: 8px 12px; font-size: 0.7rem; border-radius: 10px; }

    /* Empty / loading */
    .aw-empty-state[b-c1x801vdu0] { padding: 40px 16px; }
    .aw-empty-icon[b-c1x801vdu0] { font-size: 2rem; }
    .aw-empty-title[b-c1x801vdu0] { font-size: 0.88rem; }
    .aw-empty-sub[b-c1x801vdu0] { font-size: 0.72rem; }
}
/* /Pages/Teacher/Attendance/Report.razor.rz.scp.css */
/* ============================================
   Attendance Report Page — atr-* prefix
   ============================================ */

:root[b-dp5lvlbt3n] {
    --atr-primary: var(--color-primary-500);     /* teal — brand primary */
    --atr-success: var(--color-success-600);
    --atr-warning: var(--color-warning-500);
    --atr-error: var(--color-danger-600);
    --atr-surface: var(--color-white);
    --atr-page-bg: var(--color-neutral-50);
    --atr-border: var(--color-neutral-200);
}

.atr-page-shell[b-dp5lvlbt3n] {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
    padding: 0 28px 32px;
    background: var(--color-neutral-50);
}

/* ---- Loading state ---- */
.atr-loading[b-dp5lvlbt3n] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 3rem;
    justify-content: center;
    color: var(--color-neutral-500);
    font-size: 0.9rem;
}

.atr-spinner[b-dp5lvlbt3n] {
    width: 20px;
    height: 20px;
    border: 2px solid var(--color-neutral-200);
    border-top-color: var(--color-primary-600);
    border-radius: 50%;
    animation: atr-spin-b-dp5lvlbt3n 0.7s linear infinite;
}

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

/* ---- Unified toolbar ---- */
.atr-toolbar[b-dp5lvlbt3n] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 20px;
    position: sticky;
    top: 0;
    z-index: 20;
    background: var(--atr-surface);
    border: 1px solid var(--atr-border);
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    margin-bottom: 20px;
}

.atr-toolbar-left[b-dp5lvlbt3n] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
}

.atr-toolbar-center[b-dp5lvlbt3n] {
    display: flex;
    align-items: center;
    gap: 0;
    flex: 0 1 auto;
    background: var(--color-neutral-50);
    border: 1px solid var(--atr-border);
    border-radius: 10px;
    padding: 4px 8px;
}

.atr-toolbar-right[b-dp5lvlbt3n] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
    justify-content: flex-end;
}

.atr-title[b-dp5lvlbt3n] {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--color-neutral-900);
    margin: 0;
    line-height: 1.2;
}

.atr-subtitle[b-dp5lvlbt3n] {
    font-size: 0.78rem;
    color: var(--color-neutral-500);
    margin: 0;
}

.atr-btn-ghost[b-dp5lvlbt3n] {
    background: var(--atr-surface);
    border: 1px solid var(--atr-border);
    color: var(--color-neutral-600);
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.15s, box-shadow 0.15s;
}

.atr-btn-ghost:hover:not(:disabled)[b-dp5lvlbt3n] {
    background: var(--color-neutral-50);
    color: var(--color-neutral-900);
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.08);
}

.atr-btn-ghost:disabled[b-dp5lvlbt3n] {
    opacity: 0.35;
    cursor: not-allowed;
}

.atr-month-badge[b-dp5lvlbt3n] {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--color-neutral-800);
    padding: 0 0.5rem;
    min-width: 128px;
    text-align: center;
}

.atr-month-picker[b-dp5lvlbt3n] {
    display: flex;
    align-items: center;
    gap: 6px;
}

.atr-month-picker .atr-select[b-dp5lvlbt3n] {
    width: auto;
    min-width: 0;
    padding: 0 24px 0 10px;
    height: 36px;
    font-size: 0.85rem;
    font-weight: 600;
    border-radius: 10px;
}

.atr-year-select[b-dp5lvlbt3n] { min-width: 84px; }

.atr-btn-export[b-dp5lvlbt3n] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    height: 40px;
    padding: 0 18px;
    background: var(--color-success-600);
    color: #fff;
    border: none;
    border-radius: 10px;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s, transform 0.15s, box-shadow 0.15s;
    white-space: nowrap;
}

.atr-btn-export:hover:not(:disabled)[b-dp5lvlbt3n] {
    background: var(--color-success-700);
    transform: translateY(-1px);
    box-shadow: 0 6px 12px rgba(22, 163, 74, 0.25);
}

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

/* ---- Filters (inside toolbar-center pill) ---- */
.atr-filter-group[b-dp5lvlbt3n] {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 0 12px;
}

.atr-filter-group + .atr-filter-group[b-dp5lvlbt3n] {
    border-left: 1px solid var(--atr-border);
}

.atr-filter-label[b-dp5lvlbt3n] {
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--color-neutral-400);
    white-space: nowrap;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.atr-select[b-dp5lvlbt3n] {
    border: 1px solid transparent;
    border-radius: 6px;
    height: 30px;
    padding: 0 24px 0 6px;
    font-size: 0.84rem;
    font-weight: 500;
    color: var(--color-neutral-800);
    background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3E%3Cpath stroke='%236B7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3E%3C/svg%3E") no-repeat right 5px center / 13px 13px;
    appearance: none;
    -webkit-appearance: none;
    min-width: 120px;
    cursor: pointer;
    transition: background-color 0.15s, border-color 0.15s;
}

.atr-select:hover[b-dp5lvlbt3n] {
    background-color: var(--color-neutral-50);
    border-color: var(--atr-border);
}

.atr-select:focus[b-dp5lvlbt3n] {
    outline: none;
    border-color: var(--atr-primary);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.10);
    background-color: var(--atr-surface);
}

/* ---- Content card wrapper ---- */
.atr-content-card[b-dp5lvlbt3n] {
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
    background: var(--color-white);
    border: 1px solid var(--color-neutral-200);
    border-radius: 16px;
    padding: 24px 24px 0;
    overflow: hidden;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
    margin-bottom: 20px;
}

/* ---- Stats bar ---- */
.atr-stats-cards[b-dp5lvlbt3n] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
    margin: 0 auto 20px;
    max-width: 960px;
}

.atr-stat-card[b-dp5lvlbt3n] {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px 20px;
    border-radius: 12px;
    background: var(--atr-surface);
    border: 1px solid var(--atr-border);
    border-left-width: 4px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    transition: box-shadow 0.15s, transform 0.15s;
}

.atr-stat-card:hover[b-dp5lvlbt3n] {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
    transform: translateY(-1px);
}

.atr-stat-card--students[b-dp5lvlbt3n]   { border-left-color: var(--atr-primary);     background: var(--color-teal-50); }
.atr-stat-card--days[b-dp5lvlbt3n]       { border-left-color: var(--color-orange-500); background: var(--color-orange-50); }
.atr-stat-card--attendance[b-dp5lvlbt3n] { border-left-color: var(--atr-success);      background: var(--color-success-50); }
.atr-stat-card--alert[b-dp5lvlbt3n]      { border-left-color: var(--atr-error);        background: var(--color-danger-50); }

/* Zero / no-data variants — neutral instead of green/red when there is nothing to report */
.atr-stat-card--attendance--zero[b-dp5lvlbt3n] {
    border-left-color: var(--color-neutral-300);
    background: var(--color-neutral-50);
}
.atr-stat-card--attendance--zero .atr-stat-icon[b-dp5lvlbt3n] {
    color: var(--color-neutral-400);
    background: var(--color-neutral-100);
}
.atr-stat-card--attendance--zero .atr-stat-value[b-dp5lvlbt3n] {
    color: var(--color-neutral-500);
}

.atr-stat-card--alert--none[b-dp5lvlbt3n] {
    border-left-color: var(--color-neutral-300);
    background: var(--color-neutral-50);
}
.atr-stat-card--alert--none .atr-stat-icon[b-dp5lvlbt3n] {
    color: var(--color-neutral-400);
    background: var(--color-neutral-100);
}
.atr-stat-card--alert--none .atr-stat-value[b-dp5lvlbt3n] {
    color: var(--color-neutral-500);
}

.atr-stat-icon[b-dp5lvlbt3n] {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    flex-shrink: 0;
}

.atr-stat-card--students .atr-stat-icon[b-dp5lvlbt3n] {
    color: var(--atr-primary);
    background: var(--color-teal-50);
}

.atr-stat-card--days .atr-stat-icon[b-dp5lvlbt3n] {
    color: var(--color-orange-500);
    background: var(--color-orange-50);
}

.atr-stat-card--attendance .atr-stat-icon[b-dp5lvlbt3n] {
    color: var(--atr-success);
    background: var(--color-success-50);
}

.atr-stat-card--alert .atr-stat-icon[b-dp5lvlbt3n] {
    color: var(--atr-error);
    background: var(--color-danger-50);
}

.atr-stat-value[b-dp5lvlbt3n] {
    display: block;
    font-size: 2rem;
    font-weight: 700;
    color: var(--color-neutral-900);
    line-height: 1.1;
}

.atr-stat-label[b-dp5lvlbt3n] {
    display: block;
    font-size: 0.72rem;
    color: var(--color-neutral-500);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-top: 4px;
    font-weight: 600;
}

.atr-stat-card--alert .atr-stat-value[b-dp5lvlbt3n] { color: var(--atr-error); }

/* ---- Legend ---- */
.atr-legend[b-dp5lvlbt3n] {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    padding: 0 0 14px;
    background: transparent;
    border-bottom: 0;
}

.atr-chip[b-dp5lvlbt3n] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 500;
    padding: 4px 10px;
    border-radius: 99px;
}

.atr-chip-p[b-dp5lvlbt3n] { background: var(--color-success-50); color: var(--atr-success); }
.atr-chip-a[b-dp5lvlbt3n] { background: var(--color-danger-50); color: var(--atr-error); }
.atr-chip-l[b-dp5lvlbt3n] { background: var(--color-warning-50); color: var(--color-warning-700); }
.atr-chip-w[b-dp5lvlbt3n] { background: var(--color-neutral-100); color: var(--color-neutral-600); }

/* ---- Grid wrapper — horizontal scroll ---- */
.atr-grid-wrapper[b-dp5lvlbt3n] {
    overflow-x: auto;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
    padding: 0;
    background: var(--atr-surface);
    -webkit-overflow-scrolling: touch;
}

/* ---- Grid table ---- */
.atr-grid[b-dp5lvlbt3n] {
    border-collapse: collapse;
    font-size: 13px;
    width: 100%;
    min-width: 1480px;
    table-layout: fixed;
    background: var(--atr-surface);
}

/* Header cells */
.atr-th-student[b-dp5lvlbt3n] {
    position: sticky;
    left: 0;
    top: 0;
    z-index: 3;
    background: var(--color-neutral-50);
    text-align: left;
    padding: 10px 16px;
    font-size: 13px;
    font-weight: 600;
    color: var(--color-neutral-700);
    border-bottom: 1px solid var(--atr-border);
    border-right: 2px solid var(--color-neutral-300);
    min-width: 280px;
    width: 280px;
    white-space: nowrap;
}

.atr-th-day[b-dp5lvlbt3n] {
    position: sticky;
    top: 0;
    z-index: 2;
    padding: 8px 4px;
    text-align: center;
    font-size: 13px;
    font-weight: 600;
    color: var(--color-neutral-700);
    border-bottom: 1px solid var(--atr-border);
    border-right: 1px solid var(--atr-border);
    min-width: 34px;
    width: 34px;
    background: var(--color-neutral-50);
}

.atr-th-day--off[b-dp5lvlbt3n] {
    color: var(--color-neutral-400);
    background: var(--color-neutral-100);
}

.atr-th-day--weekend[b-dp5lvlbt3n] {
    background: var(--color-neutral-100);
}

.atr-th-day--week-alt[b-dp5lvlbt3n] {
    background: var(--color-neutral-50);
}

.atr-th-day--week-start[b-dp5lvlbt3n] {
    border-left: 2px solid var(--color-neutral-300);
}

.atr-th-day--today[b-dp5lvlbt3n] {
    background: linear-gradient(180deg, var(--color-primary-500), var(--color-primary-700)) !important;
    color: #ffffff !important;
    box-shadow: 0 3px 8px rgba(13, 148, 136, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.3) !important;
    position: relative;
    z-index: 3;
}

.atr-th-day--today[b-dp5lvlbt3n]::after {
    content: "TODAY";
    display: block;
    font-size: 7px;
    font-weight: 800;
    letter-spacing: 0.07em;
    color: rgba(255, 255, 255, 0.75);
    margin-top: 2px;
    line-height: 1;
}

.atr-th-summary[b-dp5lvlbt3n] {
    position: sticky;
    top: 0;
    z-index: 2;
    padding: 8px 8px;
    text-align: center;
    font-size: 12px;
    font-weight: 700;
    color: var(--color-neutral-600);
    border-bottom: 1px solid var(--atr-border);
    border-left: 2px solid var(--color-neutral-300);
    min-width: 44px;
    background: var(--color-neutral-100);
    letter-spacing: 0.03em;
}

.atr-th-pct[b-dp5lvlbt3n] {
    position: sticky;
    top: 0;
    z-index: 2;
    padding: 8px 8px;
    text-align: center;
    font-size: 12px;
    font-weight: 700;
    color: var(--color-neutral-600);
    border-bottom: 1px solid var(--atr-border);
    border-left: 1px solid var(--atr-border);
    min-width: 64px;
    background: var(--color-neutral-100);
}

/* Day-of-week sub-header row */
.atr-tr-dow td[b-dp5lvlbt3n] {
    font-size: 11px;
    font-weight: 500;
    color: var(--color-neutral-400);
    text-align: center;
    padding: 3px 0;
    border-bottom: 1px solid var(--atr-border);
    background: var(--color-bg-light);
}

.atr-tr-dow .atr-dow--weekend[b-dp5lvlbt3n] {
    background: var(--color-neutral-100);
}

.atr-tr-dow .atr-dow--week-alt[b-dp5lvlbt3n] {
    background: var(--color-neutral-50);
}

.atr-tr-dow .atr-dow--week-start[b-dp5lvlbt3n] {
    border-left: 2px solid var(--color-neutral-300);
}

.atr-tr-dow .atr-dow--off[b-dp5lvlbt3n] {
    background: var(--color-neutral-100);
}

.atr-tr-dow .atr-dow--today[b-dp5lvlbt3n] {
    background: var(--color-primary-100) !important;
    color: var(--color-primary-700) !important;
    font-weight: 800;
    box-shadow: inset 0 -2px 0 var(--color-primary-400);
}

.atr-tr-dow td:first-child[b-dp5lvlbt3n] {
    position: sticky;
    left: 0;
    top: 0;
    z-index: 2;
    background: var(--color-neutral-50);
    border-right: 1px solid var(--atr-border);
}

/* Data rows */
.atr-row[b-dp5lvlbt3n] {
    height: 44px;
}

.atr-row--zebra .atr-td-student[b-dp5lvlbt3n],
.atr-row--zebra .atr-td-day[b-dp5lvlbt3n],
.atr-row--zebra .atr-td-summary[b-dp5lvlbt3n],
.atr-row--zebra .atr-td-pct[b-dp5lvlbt3n] {
    background-color: var(--color-neutral-50);
}

.atr-row:hover .atr-td-student[b-dp5lvlbt3n],
.atr-row:hover .atr-td-day[b-dp5lvlbt3n],
.atr-row:hover .atr-td-summary[b-dp5lvlbt3n],
.atr-row:hover .atr-td-pct[b-dp5lvlbt3n] {
    background-color: var(--color-primary-50) !important;
}

.atr-td-student[b-dp5lvlbt3n] {
    position: sticky;
    left: 0;
    z-index: 2;
    background: var(--color-neutral-0, #fff);
    padding: 10px 16px;
    border-bottom: 1px solid var(--atr-border);
    border-right: 2px solid var(--color-neutral-300);
    white-space: nowrap;
}

.atr-student-name[b-dp5lvlbt3n] {
    display: block;
    font-weight: 600;
    color: var(--color-neutral-900);
    font-size: 13px;
}

.atr-roll[b-dp5lvlbt3n] {
    display: block;
    font-size: 11px;
    color: var(--color-neutral-400);
}

.atr-td-day[b-dp5lvlbt3n] {
    text-align: center;
    padding: 10px 0;
    border-bottom: 1px solid var(--atr-border);
    border-right: 1px solid var(--atr-border);
    background: var(--color-neutral-0, #fff);
    transition: background 0.1s;
}

.atr-td-day--off[b-dp5lvlbt3n] { background: var(--color-neutral-100) !important; }
.atr-td-day--present[b-dp5lvlbt3n] { background: var(--color-success-50); }
.atr-td-day--absent[b-dp5lvlbt3n]  { background: var(--color-danger-50); }
.atr-td-day--late[b-dp5lvlbt3n]    { background: var(--color-warning-50); }
.atr-td-day--weekend[b-dp5lvlbt3n] { background: var(--color-neutral-50); }
.atr-td-day--week-alt[b-dp5lvlbt3n] { background: var(--color-white); }
.atr-td-day--week-start[b-dp5lvlbt3n] { border-left: 2px solid var(--color-neutral-300); }
.atr-td-day--today[b-dp5lvlbt3n] {
    background: linear-gradient(180deg, var(--color-primary-50), var(--color-primary-100)) !important;
    box-shadow: inset 2px 0 0 var(--color-primary-400), inset -2px 0 0 var(--color-primary-400), 0 4px 10px rgba(13, 148, 136, 0.18) !important;
    position: relative;
    z-index: 1;
}

.atr-day-off[b-dp5lvlbt3n] {
    color: var(--color-neutral-300);
    font-size: 12px;
    font-weight: 700;
}

.atr-day-badge[b-dp5lvlbt3n] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
}

.atr-day-badge--present[b-dp5lvlbt3n] { background: var(--color-success-100); color: var(--color-success-700); }
.atr-day-badge--absent[b-dp5lvlbt3n]  { background: var(--color-danger-100); color: var(--color-danger-600); }
.atr-day-badge--late[b-dp5lvlbt3n]    { background: var(--color-warning-100); color: var(--color-warning-600); }
.atr-day-badge--empty[b-dp5lvlbt3n]   { color: var(--color-neutral-300); font-weight: 400; }

.atr-td-summary[b-dp5lvlbt3n] {
    text-align: center;
    padding: 10px 8px;
    border-bottom: 1px solid var(--atr-border);
    font-weight: 700;
    font-size: 13px;
    border-left: 2px solid var(--color-neutral-300);
    background: var(--color-neutral-50);
}

.atr-td-summary--p[b-dp5lvlbt3n] { color: var(--atr-success); }
.atr-td-summary--a[b-dp5lvlbt3n] { color: var(--atr-error); }
.atr-td-summary--l[b-dp5lvlbt3n] { color: var(--color-warning-700); }

/* Zero late count — neutral, no warning color */
.atr-td-summary--l--zero[b-dp5lvlbt3n] { color: var(--color-neutral-400); }

/* No-data banner shown when the whole month has zero attendance records */
.atr-no-data-banner[b-dp5lvlbt3n] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 14px 0;
    padding: 12px 16px;
    border-radius: 10px;
    background: var(--color-neutral-100);
    border: 1px solid var(--color-neutral-200);
    color: var(--color-neutral-600);
    font-size: 0.85rem;
    font-weight: 500;
}

.atr-no-data-banner i[b-dp5lvlbt3n] {
    color: var(--color-neutral-500);
    font-size: 1rem;
    flex-shrink: 0;
}

.atr-td-pct[b-dp5lvlbt3n] {
    text-align: center;
    padding: 10px 8px;
    border-bottom: 1px solid var(--atr-border);
    border-left: 1px solid var(--atr-border);
    font-weight: 700;
    font-size: 13px;
    color: var(--color-neutral-700);
    white-space: nowrap;
    background: var(--color-neutral-50);
}

.atr-pct--low[b-dp5lvlbt3n] { color: var(--atr-error); }

/* ---- Empty state ---- */
.atr-empty[b-dp5lvlbt3n] {
    text-align: center;
    padding: 4rem 2rem;
    color: var(--color-neutral-400);
}

.atr-empty i[b-dp5lvlbt3n] {
    font-size: 2.5rem;
    margin-bottom: 0.75rem;
    display: block;
}

.atr-empty p[b-dp5lvlbt3n] {
    font-size: 0.9rem;
    margin: 0;
}

/* ---- Responsive ---- */
@media (max-width: 1100px) {
    .atr-toolbar[b-dp5lvlbt3n] {
        flex-wrap: wrap;
        gap: 8px;
        padding: 12px 0;
    }

    .atr-toolbar-center[b-dp5lvlbt3n] {
        order: 3;
        width: 100%;
        justify-content: flex-start;
    }
}

@media (max-width: 768px) {
    .atr-page-shell[b-dp5lvlbt3n] {
        padding: 0 12px 18px;
    }

    .atr-toolbar[b-dp5lvlbt3n] {
        padding: 10px 0;
    }

    .atr-title[b-dp5lvlbt3n] {
        font-size: 1rem;
    }

    .atr-stats-cards[b-dp5lvlbt3n] {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }

    .atr-grid-wrapper[b-dp5lvlbt3n] {
        border-radius: 10px;
    }

    .atr-th-student[b-dp5lvlbt3n],
    .atr-td-student[b-dp5lvlbt3n] {
        min-width: 180px;
        width: 180px;
    }
}
/* /Pages/Teacher/Celebrations/Index.razor.rz.scp.css */
/* ══════════════════════════════════════════════════════════
   Celebrations & Greetings — Dashboard Layout
   ══════════════════════════════════════════════════════════ */

/* ── Page shell ─────────────────────────────────────────── */
.cel-page[b-6q6nmw03vi] {
    max-width: 1400px;
    padding: 24px 32px;
    margin: 0 auto;
}

.cel-loading[b-6q6nmw03vi] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 48px 32px;
    color: var(--color-neutral-500);
    font-size: 0.9rem;
}

/* ── Header ─────────────────────────────────────────────── */
.cel-header[b-6q6nmw03vi] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 28px;
    flex-wrap: wrap;
}

.cel-header-left[b-6q6nmw03vi] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.cel-title[b-6q6nmw03vi] {
    font-size: 28px;
    font-weight: 800;
    color: var(--color-neutral-900);
    line-height: 1.2;
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0;
}

.cel-title-icon[b-6q6nmw03vi] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    background: linear-gradient(135deg, #667eea, #764ba2);
    border-radius: 12px;
    color: #fff;
    font-size: 1.2rem;
}

.cel-sub[b-6q6nmw03vi] {
    font-size: 14px;
    color: var(--color-neutral-500);
    margin: 0;
}

.cel-header-right[b-6q6nmw03vi] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.cel-today-pill[b-6q6nmw03vi] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #FFF4CC;
    color: #92400e;
    border: 1px solid #fde68a;
    border-radius: 99px;
    padding: 6px 14px;
    font-size: 0.8rem;
    font-weight: 600;
}

.cel-cta-btn[b-6q6nmw03vi] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: #fff;
    border: none;
    border-radius: 10px;
    padding: 10px 20px;
    font-size: 0.875rem;
    font-weight: 700;
    cursor: pointer;
    height: 40px;
    transition: opacity 0.15s, transform 0.1s;
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.35);
}

.cel-cta-btn:hover[b-6q6nmw03vi] {
    opacity: 0.9;
    transform: translateY(-1px);
}

/* ── Dashboard Grid ─────────────────────────────────────── */
.cel-grid[b-6q6nmw03vi] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    align-items: start;
}

.cel-col-left[b-6q6nmw03vi],
.cel-col-right[b-6q6nmw03vi] {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* ── Panel card ─────────────────────────────────────────── */
.cel-card-panel[b-6q6nmw03vi] {
    background: #fff;
    border: 1px solid var(--color-neutral-100, #f3f4f6);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}

.cel-card-panel--muted[b-6q6nmw03vi] {
    background: var(--color-neutral-50, #f9fafb);
    box-shadow: none;
}

/* ── Panel header ───────────────────────────────────────── */
.cel-panel-header[b-6q6nmw03vi] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 16px 20px;
    border-bottom: 1px solid var(--color-neutral-100, #f3f4f6);
}

.cel-panel-header--birthday[b-6q6nmw03vi] { background: linear-gradient(90deg, #FFF0E8, #fff); }
.cel-panel-header--upcoming[b-6q6nmw03vi]  { background: linear-gradient(90deg, #EFF6FF, #fff); }
.cel-panel-header--greet[b-6q6nmw03vi]     { background: linear-gradient(90deg, #F5F0FF, #fff); }
.cel-panel-header--log[b-6q6nmw03vi]       { background: linear-gradient(90deg, #F0FDF4, #fff); }

.cel-panel-icon[b-6q6nmw03vi] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: rgba(0,0,0,0.06);
    border-radius: 8px;
    font-size: 0.9rem;
    color: var(--color-neutral-600);
}

.cel-panel-title[b-6q6nmw03vi] {
    font-size: 15px;
    font-weight: 700;
    color: var(--color-neutral-800);
    flex: 1;
}

.cel-badge-pill[b-6q6nmw03vi] {
    background: #db2777;
    color: #fff;
    border-radius: 99px;
    padding: 2px 10px;
    font-size: 0.72rem;
    font-weight: 700;
}

.cel-badge-pill--blue[b-6q6nmw03vi] { background: #2563eb; }

/* ── Empty state ────────────────────────────────────────── */
.cel-empty-state[b-6q6nmw03vi] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 36px 24px;
    gap: 10px;
    background: linear-gradient(160deg, #FFF9F0, #fff);
    min-height: 180px;
    justify-content: center;
}

.cel-empty-icon[b-6q6nmw03vi] {
    width: 64px;
    height: 64px;
    background: #FFF0E8;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
    color: #f97316;
    margin-bottom: 4px;
}

.cel-empty-title[b-6q6nmw03vi] {
    font-size: 16px;
    font-weight: 700;
    color: var(--color-neutral-700);
}

.cel-empty-sub[b-6q6nmw03vi] {
    font-size: 13px;
    color: var(--color-neutral-400);
    max-width: 280px;
    line-height: 1.5;
}

.cel-empty-actions[b-6q6nmw03vi] {
    display: flex;
    gap: 10px;
    margin-top: 8px;
    flex-wrap: wrap;
    justify-content: center;
}

.cel-btn-ghost[b-6q6nmw03vi] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: transparent;
    border: 1px solid var(--color-neutral-200);
    border-radius: 8px;
    padding: 8px 14px;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--color-neutral-600);
    cursor: pointer;
    transition: all 0.15s;
}

.cel-btn-ghost:hover[b-6q6nmw03vi] {
    background: var(--color-neutral-50);
    border-color: var(--color-neutral-300);
}

.cel-btn-accent[b-6q6nmw03vi] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: linear-gradient(135deg, #f59e0b, #d97706);
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 8px 14px;
    font-size: 0.8rem;
    font-weight: 700;
    cursor: pointer;
    transition: opacity 0.15s;
}

.cel-btn-accent:hover[b-6q6nmw03vi] { opacity: 0.9; }

/* ── Birthday person row ────────────────────────────────── */
.cel-birthday-list[b-6q6nmw03vi] { display: flex; flex-direction: column; }

.cel-person-row[b-6q6nmw03vi] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 20px;
    border-bottom: 1px solid var(--color-neutral-50, #f9fafb);
    transition: background 0.1s;
}

.cel-person-row:last-child[b-6q6nmw03vi] { border-bottom: none; }
.cel-person-row:hover[b-6q6nmw03vi] { background: #fafafa; }

.cel-avatar[b-6q6nmw03vi] {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: linear-gradient(135deg, #FFE7D6, #fda4af);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1rem;
    color: #be185d;
    flex-shrink: 0;
    overflow: hidden;
}

.cel-avatar img[b-6q6nmw03vi] { width: 100%; height: 100%; object-fit: cover; }

.cel-avatar--teacher[b-6q6nmw03vi] {
    background: linear-gradient(135deg, #EFE4FF, #c4b5fd);
    color: #6d28d9;
}

.cel-person-info[b-6q6nmw03vi] { flex: 1; min-width: 0; }

.cel-person-name[b-6q6nmw03vi] {
    font-size: 14px;
    font-weight: 700;
    color: var(--color-neutral-800);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cel-person-meta[b-6q6nmw03vi] {
    font-size: 12px;
    color: var(--color-neutral-400);
    margin-top: 2px;
}

.cel-sent-tag[b-6q6nmw03vi] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.75rem;
    font-weight: 600;
    color: #059669;
    background: #DFF7EA;
    border-radius: 6px;
    padding: 4px 10px;
}

.cel-wish-btn[b-6q6nmw03vi] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: linear-gradient(135deg, #db2777, #be185d);
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 7px 14px;
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: opacity 0.15s, transform 0.1s;
}

.cel-wish-btn:hover[b-6q6nmw03vi] { opacity: 0.9; transform: translateY(-1px); }

/* ── Upcoming timeline ──────────────────────────────────── */
.cel-timeline[b-6q6nmw03vi] { padding: 8px 0; }

.cel-timeline-row[b-6q6nmw03vi] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 20px;
}

.cel-timeline-dot[b-6q6nmw03vi] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #2563eb;
    flex-shrink: 0;
}

.cel-timeline-avatar[b-6q6nmw03vi] {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: linear-gradient(135deg, #EFF6FF, #93c5fd);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.78rem;
    font-weight: 700;
    color: #1d4ed8;
    flex-shrink: 0;
    overflow: hidden;
}

.cel-timeline-avatar img[b-6q6nmw03vi] { width: 100%; height: 100%; object-fit: cover; }

.cel-timeline-info[b-6q6nmw03vi] { flex: 1; min-width: 0; }

.cel-timeline-name[b-6q6nmw03vi] {
    font-size: 13px;
    font-weight: 700;
    color: var(--color-neutral-800);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cel-timeline-meta[b-6q6nmw03vi] { font-size: 11px; color: var(--color-neutral-400); }

.cel-timeline-right[b-6q6nmw03vi] { text-align: right; flex-shrink: 0; }

.cel-timeline-date[b-6q6nmw03vi] {
    font-size: 12px;
    font-weight: 700;
    color: var(--color-neutral-700);
}

.cel-days-pill[b-6q6nmw03vi] {
    display: inline-block;
    background: #EFF6FF;
    color: #2563eb;
    border-radius: 99px;
    padding: 2px 8px;
    font-size: 0.68rem;
    font-weight: 700;
    margin-top: 2px;
}

.cel-days-pill--urgent[b-6q6nmw03vi] { background: #FEF2F2; color: #dc2626; }

.cel-timeline-send[b-6q6nmw03vi] {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    background: var(--color-neutral-100);
    border: none;
    color: var(--color-neutral-500);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.78rem;
    flex-shrink: 0;
    transition: all 0.15s;
}

.cel-timeline-send:hover[b-6q6nmw03vi] {
    background: linear-gradient(135deg, #db2777, #be185d);
    color: #fff;
}

/* ── Greeting action cards ──────────────────────────────── */
.cel-action-cards[b-6q6nmw03vi] { display: flex; flex-direction: column; }

.cel-action-card[b-6q6nmw03vi] {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 20px;
    background: #fff;
    border: none;
    border-bottom: 1px solid var(--color-neutral-50, #f9fafb);
    cursor: pointer;
    text-align: left;
    transition: background 0.15s;
    width: 100%;
}

.cel-action-card:last-child[b-6q6nmw03vi] { border-bottom: none; }
.cel-action-card:hover[b-6q6nmw03vi] { background: #fafafa; }
.cel-action-card:hover .cel-ac-arrow[b-6q6nmw03vi] { transform: translateX(3px); }

.cel-action-card--disabled[b-6q6nmw03vi] {
    cursor: default;
    opacity: 0.75;
}
.cel-action-card--disabled:hover[b-6q6nmw03vi] { background: #fff; }

.cel-ac-soon[b-6q6nmw03vi] {
    font-size: 0.62rem;
    font-weight: 700;
    background: var(--color-neutral-100);
    color: var(--color-neutral-400);
    border-radius: 4px;
    padding: 2px 6px;
    flex-shrink: 0;
    letter-spacing: 0.02em;
}

.cel-ac-icon-wrap[b-6q6nmw03vi] {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: color-mix(in srgb, var(--ac-color, #6366f1) 12%, white);
    color: var(--ac-color, #6366f1);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    flex-shrink: 0;
}

.cel-ac-body[b-6q6nmw03vi] { flex: 1; min-width: 0; }

.cel-ac-title[b-6q6nmw03vi] {
    font-size: 14px;
    font-weight: 700;
    color: var(--color-neutral-800);
}

.cel-ac-sub[b-6q6nmw03vi] {
    font-size: 12px;
    color: var(--color-neutral-400);
    margin-top: 2px;
}

.cel-ac-arrow[b-6q6nmw03vi] {
    color: var(--color-neutral-300);
    font-size: 0.75rem;
    flex-shrink: 0;
    transition: transform 0.15s;
}

/* ── Recent feed ────────────────────────────────────────── */
.cel-feed[b-6q6nmw03vi] { display: flex; flex-direction: column; }

.cel-feed-row[b-6q6nmw03vi] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 20px;
    border-bottom: 1px solid var(--color-neutral-50, #f9fafb);
    transition: background 0.1s;
}

.cel-feed-row:last-child[b-6q6nmw03vi] { border-bottom: none; }
.cel-feed-row:hover[b-6q6nmw03vi] { background: #fafafa; }

.cel-feed-icon-wrap[b-6q6nmw03vi] {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: color-mix(in srgb, var(--fi-color, #6366f1) 12%, white);
    color: var(--fi-color, #6366f1);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    flex-shrink: 0;
}

.cel-feed-info[b-6q6nmw03vi] { flex: 1; min-width: 0; }

.cel-feed-name[b-6q6nmw03vi] {
    font-size: 13px;
    font-weight: 700;
    color: var(--color-neutral-800);
    display: flex;
    align-items: center;
    gap: 6px;
}

.cel-feed-type[b-6q6nmw03vi] {
    font-size: 0.68rem;
    font-weight: 600;
    background: var(--color-neutral-100);
    color: var(--color-neutral-500);
    border-radius: 4px;
    padding: 1px 6px;
}

.cel-feed-meta[b-6q6nmw03vi] {
    font-size: 11px;
    color: var(--color-neutral-400);
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cel-feed-right[b-6q6nmw03vi] { text-align: right; flex-shrink: 0; }

.cel-feed-time[b-6q6nmw03vi] { font-size: 11px; color: var(--color-neutral-400); }

.cel-status[b-6q6nmw03vi] {
    display: inline-block;
    border-radius: 99px;
    padding: 2px 8px;
    font-size: 0.68rem;
    font-weight: 700;
    margin-top: 3px;
}

.cel-status--sent[b-6q6nmw03vi]    { background: #DFF7EA; color: #059669; }
.cel-status--pending[b-6q6nmw03vi] { background: #FEF3C7; color: #d97706; }

/* ── Empty feed ─────────────────────────────────────────── */
.cel-empty-feed[b-6q6nmw03vi] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 32px 20px;
    color: var(--color-neutral-400);
    font-size: 13px;
    text-align: center;
}

.cel-empty-feed i[b-6q6nmw03vi] { font-size: 2rem; color: var(--color-neutral-300); }

/* ── Loading fallback ───────────────────────────────────── */
.cel-chips-loading[b-6q6nmw03vi] {
    padding: 24px 20px;
    color: var(--color-neutral-400);
    font-size: 0.8rem;
}

/* ── Responsive ─────────────────────────────────────────── */
@@media (max-width: 1024px) {
    .cel-grid[b-6q6nmw03vi] { grid-template-columns: 1fr; }
}

@@media (max-width: 768px) {
    .cel-page[b-6q6nmw03vi] { padding: 16px; }
    .cel-header[b-6q6nmw03vi] { flex-direction: column; align-items: flex-start; }
    .cel-title[b-6q6nmw03vi] { font-size: 22px; }
}


.cel-title[b-6q6nmw03vi] {
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--color-neutral-900);
    margin: 0 0 0.25rem;
}

.cel-sub[b-6q6nmw03vi] {
    font-size: 0.875rem;
    color: var(--color-neutral-500);
    margin: 0;
}

/* ── Section ─────────────────────────────────────────────── */
.cel-section[b-6q6nmw03vi] {
    margin-bottom: 2rem;
}

.cel-section-title[b-6q6nmw03vi] {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--color-neutral-700);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0 0 0.875rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--color-neutral-100);
}

.cel-badge[b-6q6nmw03vi] {
    background: var(--color-primary-500, #6366f1);
    color: #fff;
    font-size: 0.7rem;
    font-weight: 700;
    border-radius: 99px;
    padding: 0.05rem 0.45rem;
    line-height: 1.5;
}

/* ── Empty state ──────────────────────────────────────────── */
.cel-empty[b-6q6nmw03vi] {
    background: var(--color-neutral-50, #f9fafb);
    border: 1px dashed var(--color-neutral-200);
    border-radius: 0.625rem;
    padding: 1.5rem;
    text-align: center;
    color: var(--color-neutral-400);
    font-size: 0.875rem;
}

/* ── Stats row ───────────────────────────────────────────── */
.cel-stats-row[b-6q6nmw03vi] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
    margin-bottom: 24px;
}

.cel-stat-card[b-6q6nmw03vi] {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 20px;
    min-width: 0;
    background: #fff;
    border: 1px solid var(--color-neutral-100, #f3f4f6);
    border-radius: 14px;
    box-shadow: 0 1px 3px rgba(0,0,0,.05);
}

.cel-stat-icon[b-6q6nmw03vi] {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
    flex-shrink: 0;
}

.cel-stat--bday .cel-stat-icon[b-6q6nmw03vi]  { background: #fdf4ff; color: #a855f7; }
.cel-stat--sent .cel-stat-icon[b-6q6nmw03vi]  { background: #f0fdf4; color: #22c55e; }
.cel-stat--pending .cel-stat-icon[b-6q6nmw03vi] { background: #fff7ed; color: #f97316; }
.cel-stat--upcoming .cel-stat-icon[b-6q6nmw03vi] { background: #eff6ff; color: #3b82f6; }

.cel-stat-num[b-6q6nmw03vi] {
    font-size: 1.6rem;
    font-weight: 800;
    color: var(--color-neutral-900);
    line-height: 1;
}

.cel-stat-label[b-6q6nmw03vi] {
    font-size: 0.75rem;
    color: var(--color-neutral-500);
    margin-top: 2px;
}

/* ── Select bar ──────────────────────────────────────────── */
.cel-select-bar[b-6q6nmw03vi] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 20px;
    border-bottom: 1px solid var(--color-neutral-100, #f3f4f6);
    background: #fafafa;
    border-radius: 0 0 0 0;
    gap: 12px;
    flex-wrap: wrap;
}

.cel-select-all[b-6q6nmw03vi] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 600;
    color: var(--color-neutral-700);
    cursor: pointer;
    user-select: none;
}

.cel-select-all input[type="checkbox"][b-6q6nmw03vi] {
    width: 16px;
    height: 16px;
    cursor: pointer;
    accent-color: #a855f7;
}

.cel-batch-btn[b-6q6nmw03vi] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 18px;
    background: linear-gradient(135deg, #a855f7, #ec4899);
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: opacity 0.15s, transform 0.1s;
    white-space: nowrap;
}

.cel-batch-btn:hover[b-6q6nmw03vi] { opacity: 0.9; transform: translateY(-1px); }
.cel-batch-btn:active[b-6q6nmw03vi] { transform: translateY(0); }

/* ── Row checkbox ────────────────────────────────────────── */
.cel-row-check[b-6q6nmw03vi] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    flex-shrink: 0;
    cursor: pointer;
}

.cel-row-check input[type="checkbox"][b-6q6nmw03vi] {
    width: 15px;
    height: 15px;
    cursor: pointer;
    accent-color: #a855f7;
}

.cel-row-check-done[b-6q6nmw03vi] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    color: #22c55e;
    font-size: 0.7rem;
}

.cel-person-row--selected[b-6q6nmw03vi] {
    background: color-mix(in srgb, #a855f7 6%, white) !important;
}

@@media (max-width: 640px) {
    .cel-stats-row[b-6q6nmw03vi] { grid-template-columns: repeat(2, 1fr); }
    .cel-select-bar[b-6q6nmw03vi] { flex-direction: column; align-items: flex-start; }
}

.cel-empty i[b-6q6nmw03vi] {
    display: block;
    font-size: 1.75rem;
    margin-bottom: 0.4rem;
}

/* ── Birthday Cards ───────────────────────────────────────── */
.cel-cards[b-6q6nmw03vi] {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
}

.cel-card[b-6q6nmw03vi] {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    background: #fff;
    border: 1px solid var(--color-neutral-100, #f3f4f6);
    border-left: 3px solid var(--theme, #6366f1);
    border-radius: 0.625rem;
    padding: 0.75rem 1rem;
    box-shadow: 0 1px 3px rgba(0,0,0,.05);
}

.cel-card-avatar[b-6q6nmw03vi] {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
    background: var(--theme, #6366f1);
    display: flex;
    align-items: center;
    justify-content: center;
}

.cel-card-avatar img[b-6q6nmw03vi] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.cel-avatar-init[b-6q6nmw03vi] {
    font-size: 1.1rem;
    font-weight: 700;
    color: #fff;
}

.cel-card-info[b-6q6nmw03vi] {
    flex: 1;
    min-width: 0;
}

.cel-card-name[b-6q6nmw03vi] {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--color-neutral-900);
}

.cel-card-meta[b-6q6nmw03vi] {
    font-size: 0.775rem;
    color: var(--color-neutral-500);
}

.cel-card-emoji[b-6q6nmw03vi] {
    font-size: 1.1rem;
    line-height: 1;
    margin-top: 0.15rem;
}

.cel-card-action[b-6q6nmw03vi] {
    flex-shrink: 0;
}

/* ── Send buttons ─────────────────────────────────────────── */
.cel-btn-send[b-6q6nmw03vi] {
    background: var(--color-primary-600, #4f46e5);
    color: #fff;
    border: none;
    border-radius: 0.4rem;
    padding: 0.35rem 0.75rem;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.3rem;
    white-space: nowrap;
    transition: background 0.15s;
}

.cel-btn-send:hover[b-6q6nmw03vi] {
    background: var(--color-primary-700, #4338ca);
}

.cel-sent-badge[b-6q6nmw03vi] {
    font-size: 0.775rem;
    color: var(--color-success-600, #059669);
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.3rem;
}

/* ── Upcoming list ────────────────────────────────────────── */
.cel-upcoming-list[b-6q6nmw03vi] {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

.cel-upcoming-row[b-6q6nmw03vi] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 0.875rem;
    background: #fff;
    border: 1px solid var(--color-neutral-100);
    border-radius: 0.5rem;
}

.cel-upcoming-avatar[b-6q6nmw03vi] {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
    background: var(--color-neutral-200);
    display: flex;
    align-items: center;
    justify-content: center;
}

.cel-upcoming-avatar img[b-6q6nmw03vi] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.cel-avatar-init-sm[b-6q6nmw03vi] {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--color-neutral-600);
}

.cel-upcoming-info[b-6q6nmw03vi] {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.cel-upcoming-name[b-6q6nmw03vi] {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--color-neutral-900);
}

.cel-upcoming-meta[b-6q6nmw03vi] {
    font-size: 0.75rem;
    color: var(--color-neutral-500);
}

.cel-upcoming-date[b-6q6nmw03vi] {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--color-neutral-700);
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.1rem;
}

.cel-days-left[b-6q6nmw03vi] {
    font-size: 0.7rem;
    color: var(--color-primary-500, #6366f1);
    font-weight: 500;
}

.cel-btn-send-sm[b-6q6nmw03vi] {
    background: transparent;
    border: 1px solid var(--color-primary-300, #a5b4fc);
    color: var(--color-primary-600, #4f46e5);
    border-radius: 0.375rem;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;

    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    transition: background 0.15s;
}

.cel-btn-send-sm:hover[b-6q6nmw03vi] {
    background: var(--color-primary-50, #eef2ff);
}

/* ── Event chips ──────────────────────────────────────────── */
.cel-event-chips[b-6q6nmw03vi] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.cel-chips-loading[b-6q6nmw03vi] {
    font-size: 0.8rem;
    color: var(--color-neutral-400);
    padding: 0.5rem 0;
}

.cel-chip[b-6q6nmw03vi] {
    background: #fff;
    border: 1px solid var(--color-neutral-200);
    border-radius: 0.5rem;
    padding: 0.5rem 0.875rem;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--color-neutral-700);
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.35rem;
    transition: all 0.15s;
}

.cel-chip:hover[b-6q6nmw03vi] {
    background: var(--chip-color, #6366f1);
    color: #fff;
    border-color: var(--chip-color, #6366f1);
}

.cel-chip:hover .cel-chip-count[b-6q6nmw03vi] {
    background: rgba(255,255,255,0.25);
    color: #fff;
}

.cel-chip-icon[b-6q6nmw03vi] {
    font-size: 0.85rem;
    width: 1rem;
    text-align: center;
    flex-shrink: 0;
}

.cel-chip-label[b-6q6nmw03vi] {
    flex: 1;
}

.cel-chip-count[b-6q6nmw03vi] {
    background: var(--color-neutral-100);
    color: var(--color-neutral-500);
    border-radius: 99px;
    padding: 0.05rem 0.45rem;
    font-size: 0.7rem;
    font-weight: 700;
    min-width: 1.25rem;
    text-align: center;
}

/* ── Log ──────────────────────────────────────────────────── */
.cel-log[b-6q6nmw03vi] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.cel-log-row[b-6q6nmw03vi] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.45rem 0.875rem;
    background: #fff;
    border: 1px solid var(--color-neutral-50, #f9fafb);
    border-radius: 0.5rem;
}

.cel-log-icon[b-6q6nmw03vi] {
    font-size: 1.1rem;
    flex-shrink: 0;
}

.cel-log-info[b-6q6nmw03vi] {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.cel-log-name[b-6q6nmw03vi] {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--color-neutral-900);
}

.cel-log-meta[b-6q6nmw03vi] {
    font-size: 0.75rem;
    color: var(--color-neutral-500);
}

.cel-log-time[b-6q6nmw03vi] {
    font-size: 0.75rem;
    color: var(--color-neutral-500);
    flex-shrink: 0;
    white-space: nowrap;
}

.cel-log-status[b-6q6nmw03vi] {
    font-size: 0.7rem;
    font-weight: 700;
    border-radius: 99px;
    padding: 0.1rem 0.5rem;
    flex-shrink: 0;
}

.cel-log-status.sent[b-6q6nmw03vi] {
    background: #dcfce7;
    color: #166534;
}

.cel-log-status.pending[b-6q6nmw03vi] {
    background: #fef9c3;
    color: #854d0e;
}

/* ── Responsive ───────────────────────────────────────────── */
@@media (max-width: 640px) {
    .cel-page[b-6q6nmw03vi] {
        padding: 1rem;
    }

    .cel-card[b-6q6nmw03vi] {
        flex-wrap: wrap;
    }

    .cel-card-action[b-6q6nmw03vi] {
        width: 100%;
    }

    .cel-upcoming-date[b-6q6nmw03vi] {
        display: none;
    }
}

/* ── Interactive action cards ─────────────────────────────── */
.cel-action-card--interactive[b-6q6nmw03vi] {
    cursor: pointer;
}
.cel-action-card--interactive:hover[b-6q6nmw03vi] {
    background: color-mix(in srgb, var(--ac-color, #6366f1) 5%, white);
    border-color: color-mix(in srgb, var(--ac-color, #6366f1) 30%, white);
    transform: translateY(-1px);
    box-shadow: 0 3px 10px rgba(0,0,0,.08);
}
.cel-action-card--active[b-6q6nmw03vi] {
    background: color-mix(in srgb, var(--ac-color, #6366f1) 8%, white) !important;
    border-color: color-mix(in srgb, var(--ac-color, #6366f1) 50%, white) !important;
}
.cel-ac-arrow[b-6q6nmw03vi] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    color: var(--color-neutral-400);
    flex-shrink: 0;
    font-size: 0.75rem;
    transition: transform 0.2s;
}
.cel-ac-arrow--open[b-6q6nmw03vi] {
    transform: rotate(90deg);
}

/* ── Action card expanded panel ───────────────────────────── */
.cel-action-expand[b-6q6nmw03vi] {
    margin-top: 0.5rem;
    background: var(--color-neutral-50, #f9fafb);
    border: 1px solid var(--color-neutral-200, #e5e7eb);
    border-radius: 0.625rem;
    padding: 0.875rem 1rem;
    animation: fadeInDown-b-6q6nmw03vi 0.18s ease;
}
@keyframes fadeInDown-b-6q6nmw03vi {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}
.cel-expand-hint[b-6q6nmw03vi] {
    font-size: 0.8rem;
    color: var(--color-neutral-500);
    margin: 0 0 0.625rem 0;
}

/* ── Student search (Achievement) ────────────────────────── */
.cel-search-wrap[b-6q6nmw03vi] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: #fff;
    border: 1px solid var(--color-neutral-200);
    border-radius: 0.5rem;
    padding: 0 0.75rem;
    margin-bottom: 0.5rem;
}
.cel-search-icon[b-6q6nmw03vi] {
    color: var(--color-neutral-400);
    font-size: 0.8rem;
    flex-shrink: 0;
}
.cel-search-input[b-6q6nmw03vi] {
    flex: 1;
    border: none;
    outline: none;
    background: transparent;
    font-size: 0.875rem;
    padding: 0.55rem 0;
    color: var(--color-neutral-900);
}
.cel-search-input[b-6q6nmw03vi]::placeholder { color: var(--color-neutral-400); }
.cel-search-spin[b-6q6nmw03vi] {
    color: var(--color-neutral-400);
    font-size: 0.8rem;
    flex-shrink: 0;
}
.cel-search-results[b-6q6nmw03vi] {
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid var(--color-neutral-200);
    border-radius: 0.5rem;
    overflow: hidden;
    max-height: 220px;
    overflow-y: auto;
}
.cel-search-result-row[b-6q6nmw03vi] {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.5rem 0.75rem;
    border: none;
    background: transparent;
    cursor: pointer;
    text-align: left;
    width: 100%;
    border-bottom: 1px solid var(--color-neutral-50);
    transition: background 0.12s;
}
.cel-search-result-row:last-child[b-6q6nmw03vi] { border-bottom: none; }
.cel-search-result-row:hover[b-6q6nmw03vi] { background: var(--color-primary-50, #eef2ff); }
.cel-sr-av[b-6q6nmw03vi] {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--color-primary-100, #e0e7ff);
    color: var(--color-primary-700, #4338ca);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    font-weight: 700;
    flex-shrink: 0;
}
.cel-sr-info[b-6q6nmw03vi] { flex: 1; min-width: 0; }
.cel-sr-name[b-6q6nmw03vi] { font-size: 0.85rem; font-weight: 600; color: var(--color-neutral-900); }
.cel-sr-class[b-6q6nmw03vi] { font-size: 0.75rem; color: var(--color-neutral-500); }
.cel-sr-arrow[b-6q6nmw03vi] { color: var(--color-neutral-300); font-size: 0.7rem; flex-shrink: 0; }
.cel-search-empty[b-6q6nmw03vi] {
    font-size: 0.8rem;
    color: var(--color-neutral-500);
    padding: 0.5rem 0;
    text-align: center;
}

/* ── Class picker (Festival / Welcome / NewYear) ─────────── */
.cel-picker-row[b-6q6nmw03vi] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-bottom: 0.75rem;
}
.cel-picker-sel[b-6q6nmw03vi] {
    flex: 1;
    min-width: 140px;
    border: 1px solid var(--color-neutral-300);
    border-radius: 0.4rem;
    padding: 0.4rem 0.6rem;
    font-size: 0.82rem;
    background: #fff;
    color: var(--color-neutral-800);
    outline: none;
}
.cel-picker-sel:focus[b-6q6nmw03vi] { border-color: var(--color-primary-400, #818cf8); }
.cel-picker-loading[b-6q6nmw03vi] {
    font-size: 0.8rem;
    color: var(--color-neutral-400);
    display: flex;
    align-items: center;
    gap: 0.4rem;
}
.cel-picker-load-btn[b-6q6nmw03vi] {
    background: var(--color-primary-600, #4f46e5);
    color: #fff;
    border: none;
    border-radius: 0.4rem;
    padding: 0.45rem 0.875rem;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.35rem;
    white-space: nowrap;
    transition: background 0.15s;
    flex-shrink: 0;
}
.cel-picker-load-btn:hover:not(:disabled)[b-6q6nmw03vi] { background: var(--color-primary-700, #4338ca); }
.cel-picker-load-btn:disabled[b-6q6nmw03vi] { opacity: 0.55; cursor: default; }
.cel-class-list-header[b-6q6nmw03vi] {
    padding: 0.3rem 0 0.5rem 0;
    border-bottom: 1px solid var(--color-neutral-100);
    margin-bottom: 0.25rem;
}
.cel-class-select-all[b-6q6nmw03vi] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--color-neutral-600);
    cursor: pointer;
}
.cel-class-student-list[b-6q6nmw03vi] {
    display: flex;
    flex-direction: column;
    max-height: 240px;
    overflow-y: auto;
    margin-bottom: 0.75rem;
}
.cel-class-student-row[b-6q6nmw03vi] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.35rem 0.25rem;
    border-bottom: 1px solid var(--color-neutral-50);
    cursor: pointer;
    transition: background 0.1s;
    border-radius: 0.3rem;
}
.cel-class-student-row:hover[b-6q6nmw03vi] { background: var(--color-neutral-50); }
.cel-class-student-row.cel-csr--sel[b-6q6nmw03vi] { background: color-mix(in srgb, #a855f7 6%, white); }
.cel-csr-av[b-6q6nmw03vi] {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--color-neutral-200);
    color: var(--color-neutral-600);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.72rem;
    font-weight: 700;
    flex-shrink: 0;
}
.cel-csr-name[b-6q6nmw03vi] {
    font-size: 0.83rem;
    font-weight: 500;
    color: var(--color-neutral-800);
    flex: 1;
}
/* /Pages/Teacher/Certificates/Index.razor.rz.scp.css */
:host[b-geutedmhcm]{display:block}
/* /Pages/Teacher/Chapters/Index.razor.rz.scp.css */
/* Styles handled via Tailwind utility classes in markup */
/* /Pages/Teacher/ClassAssignments/Index.razor.rz.scp.css */
/* Styles handled via Tailwind utility classes in markup */
/* /Pages/Teacher/ClassAssignments/Manage.razor.rz.scp.css */
/* Styles handled via Tailwind utility classes in markup */
/* /Pages/Teacher/Classes.razor.rz.scp.css */
/* ══════════════════════════════════════════════════════════
   Teacher My Classes — tc-* scoped styles
   ══════════════════════════════════════════════════════════ */

/* ── Page header ── */
.tc-header[b-fiwys8vgi2] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.25rem;
    flex-wrap: wrap;
}
.tc-page-title[b-fiwys8vgi2] {
    font-size: 1.375rem;
    font-weight: 700;
    color: var(--color-neutral-900, #111827);
    margin: 0 0 .15rem;
}
.tc-page-sub[b-fiwys8vgi2] {
    font-size: .8rem;
    color: var(--color-neutral-500, #6b7280);
    margin: 0;
}
.tc-manage-btn[b-fiwys8vgi2] {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .5rem 1rem;
    background: var(--color-neutral-800, #1f2937);
    color: #fff;
    border-radius: .5rem;
    font-size: .8rem;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    transition: background .15s;
}
.tc-manage-btn:hover[b-fiwys8vgi2] { background: #111; }

/* ── KPI Strip ── */
.tc-kpi-strip[b-fiwys8vgi2] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: .65rem;
    margin-bottom: 1.25rem;
}
.tc-kpi[b-fiwys8vgi2] {
    display: flex;
    align-items: center;
    gap: .65rem;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: .75rem;
    padding: .65rem .85rem;
}
.tc-kpi--highlight[b-fiwys8vgi2] {
    border-color: #c4b5fd;
    background: #faf5ff;
}
.tc-kpi-icon[b-fiwys8vgi2] {
    width: 36px;
    height: 36px;
    border-radius: .5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .9rem;
    flex-shrink: 0;
}
.tc-kpi-val[b-fiwys8vgi2] {
    font-size: 1.2rem;
    font-weight: 700;
    color: #111827;
    line-height: 1.2;
}
.tc-kpi-lbl[b-fiwys8vgi2] {
    font-size: .7rem;
    color: #6b7280;
    margin-top: .1rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 130px;
}

/* ── Loading ── */
.tc-loading[b-fiwys8vgi2] {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 3rem 1rem;
    color: #6b7280;
    font-size: .875rem;
}
.tc-spinner[b-fiwys8vgi2] {
    width: 36px;
    height: 36px;
    border: 3px solid #e5e7eb;
    border-top-color: #2563eb;
    border-radius: 50%;
    animation: tc-spin-b-fiwys8vgi2 .7s linear infinite;
    margin-bottom: .75rem;
}
@keyframes tc-spin-b-fiwys8vgi2 { to { transform: rotate(360deg); } }

/* ── Main 2-column grid ── */
.tc-main-grid[b-fiwys8vgi2] {
    display: grid;
    grid-template-columns: 1fr 340px;
    gap: 1rem;
    align-items: start;
}
@media (max-width: 1100px) {
    .tc-main-grid[b-fiwys8vgi2] { grid-template-columns: 1fr; }
}

/* ── Tab bar ── */
.tc-tab-bar[b-fiwys8vgi2] {
    display: flex;
    align-items: center;
    gap: .35rem;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: .65rem .65rem 0 0;
    padding: .45rem .6rem;
    border-bottom: none;
}
.tc-tab[b-fiwys8vgi2] {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .35rem .75rem;
    border: none;
    border-radius: .4rem;
    font-size: .8rem;
    font-weight: 500;
    cursor: pointer;
    background: transparent;
    color: #6b7280;
    transition: all .15s;
}
.tc-tab:hover[b-fiwys8vgi2] { background: #f3f4f6; color: #374151; }
.tc-tab--active[b-fiwys8vgi2] { background: #2563eb; color: #fff !important; }
.tc-tab-spacer[b-fiwys8vgi2] {
    margin-left: auto;
    font-size: .72rem;
    color: #9ca3af;
}
.tc-tab-hint[b-fiwys8vgi2] {
    color: var(--color-neutral-500, #6b7280);
}

.tc-info-banner[b-fiwys8vgi2] {
    display: flex;
    align-items: center;
    gap: var(--spacing-3, .75rem);
    padding: var(--spacing-3, .75rem) var(--spacing-4, 1rem);
    border: 1px solid var(--color-warning-200, #fde68a);
    background: var(--color-warning-50, #fffbeb);
    color: var(--color-warning-800, #92400e);
    font-size: .8rem;
}

.tc-today-badge[b-fiwys8vgi2] {
    padding: .1rem .4rem;
    border-radius: 999px;
    background: var(--color-teal-100, #ccfbf1);
    color: var(--color-teal-700, #0f766e);
    font-size: .62rem;
    font-weight: 700;
}

.tc-week-grid[b-fiwys8vgi2] {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--spacing-3, .75rem);
    padding: var(--spacing-4, 1rem);
    border: 1px solid var(--color-neutral-200, #e5e7eb);
    border-top: none;
    border-radius: 0 0 var(--radius-md, .75rem) var(--radius-md, .75rem);
    background: var(--color-neutral-50, #f9fafb);
}

.tc-week-day[b-fiwys8vgi2] {
    min-width: 0;
    border: 1px solid var(--color-neutral-200, #e5e7eb);
    border-radius: var(--radius-sm, .5rem);
    background: #fff;
    overflow: hidden;
}

.tc-week-day--today[b-fiwys8vgi2] {
    border-color: var(--color-teal-500, #14b8a6);
}

.tc-week-day-header[b-fiwys8vgi2] {
    display: flex;
    justify-content: space-between;
    gap: var(--spacing-2, .5rem);
    padding: var(--spacing-3, .75rem);
    background: var(--color-neutral-100, #f3f4f6);
    color: var(--color-neutral-700, #374151);
    font-size: .75rem;
    font-weight: 700;
}

.tc-week-day--today .tc-week-day-header[b-fiwys8vgi2] {
    background: var(--color-teal-50, #f0fdfa);
    color: var(--color-teal-700, #0f766e);
}

.tc-week-day-count[b-fiwys8vgi2] {
    font-weight: 500;
    color: var(--color-neutral-500, #6b7280);
}

.tc-week-slot[b-fiwys8vgi2] {
    display: grid;
    grid-template-columns: 3.5rem minmax(0, 1fr);
    gap: var(--spacing-2, .5rem);
    padding: var(--spacing-3, .75rem);
    border-top: 1px solid var(--color-neutral-100, #f3f4f6);
    font-size: .75rem;
}

.tc-week-slot-time[b-fiwys8vgi2] {
    color: var(--color-neutral-500, #6b7280);
    font-variant-numeric: tabular-nums;
}

.tc-week-slot-subj[b-fiwys8vgi2] {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 600;
}

.tc-week-empty[b-fiwys8vgi2] {
    padding: var(--spacing-4, 1rem);
    color: var(--color-neutral-400, #9ca3af);
    font-size: .75rem;
    text-align: center;
}

@media (min-width: 768px) {
    .tc-week-grid[b-fiwys8vgi2] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 1280px) {
    .tc-week-grid[b-fiwys8vgi2] {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* ── Timetable ── */
.tc-tt-wrap[b-fiwys8vgi2] {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-top: none;
    border-radius: 0 0 .75rem .75rem;
    overflow-x: auto;
}
.tc-tt[b-fiwys8vgi2] {
    width: 100%;
    border-collapse: collapse;
    font-size: .78rem;
}

/* Headers */
.tc-tt-th[b-fiwys8vgi2] {
    padding: .5rem .4rem;
    text-align: center;
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .04em;
    color: #6b7280;
    border-right: 1px solid #f3f4f6;
    white-space: nowrap;
    background: #f9fafb;
}
.tc-tt-th:last-child[b-fiwys8vgi2] { border-right: none; }
.tc-tt-th-time[b-fiwys8vgi2] {
    text-align: left;
    padding-left: .6rem;
    width: 76px;
    min-width: 76px;
    position: sticky;
    left: 0;
    z-index: 2;
    background: #f9fafb;
    border-right: 1px solid #e5e7eb;
}
.tc-tt-th--today[b-fiwys8vgi2] {
    background: #eff6ff;
    color: #2563eb;
}
.tc-today-pip[b-fiwys8vgi2] {
    width: 6px;
    height: 6px;
    background: #2563eb;
    border-radius: 50%;
    margin: .2rem auto 0;
}

/* Rows */
.tc-tt-row[b-fiwys8vgi2] { border-top: 1px solid #f3f4f6; }
.tc-tt-row--break[b-fiwys8vgi2] { background: #f9fafb; }
.tc-tt-row:hover[b-fiwys8vgi2] { background: #fafafa; }
.tc-tt-row--break:hover[b-fiwys8vgi2] { background: #f9fafb; }

/* Cells */
.tc-tt-td[b-fiwys8vgi2] {
    padding: .2rem .3rem;
    vertical-align: top;
    border-right: 1px solid #f3f4f6;
    height: 72px;
}
.tc-tt-td:last-child[b-fiwys8vgi2] { border-right: none; }
.tc-tt-td-time[b-fiwys8vgi2] {
    padding: .4rem .5rem;
    background: #fafafa;
    position: sticky;
    left: 0;
    z-index: 1;
    border-right: 1px solid #e5e7eb;
    min-width: 76px;
    vertical-align: middle;
}
.tc-tt-td--today[b-fiwys8vgi2] { background: #f0f7ff; }
.tc-tt-td--break[b-fiwys8vgi2] { height: 32px; vertical-align: middle; }

.tc-period-num[b-fiwys8vgi2] {
    font-weight: 700;
    font-size: .7rem;
    color: #374151;
}
.tc-break-lbl[b-fiwys8vgi2] {
    font-size: .65rem;
    font-weight: 600;
    color: #9ca3af;
    text-transform: uppercase;
    letter-spacing: .04em;
}
.tc-time-range[b-fiwys8vgi2] {
    font-size: .62rem;
    color: #9ca3af;
    line-height: 1.3;
    margin-top: .1rem;
}
.tc-break-cell[b-fiwys8vgi2] {
    font-size: .65rem;
    color: #9ca3af;
    text-align: center;
    font-weight: 500;
}

/* Subject cell card */
.tc-cell[b-fiwys8vgi2] {
    position: relative;
    border-radius: .35rem;
    padding: .3rem .4rem;
    height: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: .1rem;
    cursor: default;
    overflow: hidden;
}
.tc-cell--current[b-fiwys8vgi2] {
    box-shadow: 0 0 0 1.5px currentColor;
}
.tc-cell-subj[b-fiwys8vgi2] {
    font-weight: 700;
    font-size: .72rem;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.tc-cell-class[b-fiwys8vgi2] {
    font-size: .65rem;
    color: #374151;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.tc-cell-room[b-fiwys8vgi2] {
    font-size: .6rem;
    color: #6b7280;
}
.tc-cell-empty[b-fiwys8vgi2] {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: #d1d5db;
    font-size: .8rem;
}

/* Current period pulsing dot */
.tc-now-pulse[b-fiwys8vgi2] {
    position: absolute;
    top: .3rem;
    right: .3rem;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    animation: tc-pulse-b-fiwys8vgi2 1.4s ease-in-out infinite;
}
@keyframes tc-pulse-b-fiwys8vgi2 {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: .5; transform: scale(1.5); }
}

/* Hover quick actions on cell */
.tc-cell-actions[b-fiwys8vgi2] {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    display: none;
    background: rgba(255,255,255,.95);
    justify-content: center;
    gap: .3rem;
    padding: .25rem;
    border-top: 1px solid rgba(0,0,0,.06);
}
.tc-cell:hover .tc-cell-actions[b-fiwys8vgi2] { display: flex; }
.tc-cell-act[b-fiwys8vgi2] {
    width: 26px;
    height: 26px;
    border: 1px solid #e5e7eb;
    border-radius: .3rem;
    background: #fff;
    color: #374151;
    font-size: .7rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all .12s;
}
.tc-cell-act:hover[b-fiwys8vgi2] { background: #2563eb; color: #fff; border-color: #2563eb; }

/* No schedule state */
.tc-no-schedule[b-fiwys8vgi2] {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-top: none;
    border-radius: 0 0 .75rem .75rem;
    padding: 3rem 1.5rem;
    text-align: center;
    color: #6b7280;
    font-size: .875rem;
}
.tc-no-schedule i[b-fiwys8vgi2] { font-size: 2rem; color: #d1d5db; display: block; margin-bottom: .75rem; }
.tc-no-schedule h3[b-fiwys8vgi2] { color: #374151; font-size: 1.1rem; margin: 0 0 .5rem; }
.tc-no-schedule p[b-fiwys8vgi2] { margin: .25rem 0; }
.tc-no-schedule-hint[b-fiwys8vgi2] { font-size: .75rem; color: #9ca3af; margin-top: .75rem; }

/* ── Today Agenda Timeline ── */
.tc-agenda[b-fiwys8vgi2] {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-top: none;
    border-radius: 0 0 .75rem .75rem;
    padding: .75rem 1rem 1rem;
}
.tc-agenda-date[b-fiwys8vgi2] {
    font-size: .75rem;
    font-weight: 600;
    color: #2563eb;
    margin-bottom: .75rem;
    display: flex;
    align-items: center;
    gap: .35rem;
}
.tc-agenda-row[b-fiwys8vgi2] {
    display: grid;
    grid-template-columns: 56px 24px 1fr;
    gap: .5rem;
    margin-bottom: .25rem;
}
.tc-agenda-row--past[b-fiwys8vgi2] { opacity: .45; }
.tc-agenda-time[b-fiwys8vgi2] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    padding-top: .3rem;
}
.tc-agenda-t1[b-fiwys8vgi2] {
    font-size: .75rem;
    font-weight: 700;
    color: #374151;
}
.tc-agenda-t2[b-fiwys8vgi2] {
    font-size: .65rem;
    color: #9ca3af;
}
.tc-agenda-line[b-fiwys8vgi2] {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: .4rem;
}
.tc-agenda-dot[b-fiwys8vgi2] {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    flex-shrink: 0;
    position: relative;
}
.tc-agenda-dot-ring[b-fiwys8vgi2] {
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    border: 2px solid;
    animation: tc-ring-b-fiwys8vgi2 1.4s ease-in-out infinite;
}
@keyframes tc-ring-b-fiwys8vgi2 {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: .3; transform: scale(1.6); }
}
.tc-agenda-connector[b-fiwys8vgi2] {
    flex: 1;
    width: 2px;
    background: #e5e7eb;
    margin: .2rem 0;
    min-height: 28px;
}
.tc-agenda-card[b-fiwys8vgi2] {
    border-radius: .5rem;
    padding: .5rem .7rem;
    margin-bottom: .4rem;
}
.tc-agenda-live[b-fiwys8vgi2] {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    font-size: .65rem;
    font-weight: 700;
    letter-spacing: .05em;
    color: #374151;
    margin-bottom: .2rem;
}
.tc-pulse-dot[b-fiwys8vgi2] {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    animation: tc-pulse-b-fiwys8vgi2 1.4s ease-in-out infinite;
}
.tc-agenda-subj[b-fiwys8vgi2] {
    font-size: .9rem;
    font-weight: 700;
    margin-bottom: .2rem;
}
.tc-agenda-meta[b-fiwys8vgi2] {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    font-size: .72rem;
    color: #6b7280;
    margin-bottom: .5rem;
}
.tc-agenda-meta i[b-fiwys8vgi2] { margin-right: .2rem; }
.tc-agenda-btns[b-fiwys8vgi2] {
    display: flex;
    gap: .4rem;
    flex-wrap: wrap;
}
.tc-agenda-btn[b-fiwys8vgi2] {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: .3rem .65rem;
    border: 1px solid #e5e7eb;
    border-radius: .4rem;
    background: #fff;
    color: #374151;
    font-size: .72rem;
    font-weight: 500;
    cursor: pointer;
    transition: all .12s;
}
.tc-agenda-btn:hover[b-fiwys8vgi2] { background: #f3f4f6; border-color: #d1d5db; }
.tc-agenda-btn--primary[b-fiwys8vgi2] {
    background: #2563eb;
    color: #fff;
    border-color: #2563eb;
}
.tc-agenda-btn--primary:hover[b-fiwys8vgi2] { background: #1d4ed8; }

/* ── Right Sidebar ── */
.tc-right[b-fiwys8vgi2] {
    display: flex;
    flex-direction: column;
    gap: .75rem;
}
.tc-sidebar-header[b-fiwys8vgi2] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: .8rem;
    font-weight: 600;
    color: #374151;
    padding: .4rem .1rem .2rem;
}
.tc-sidebar-badge[b-fiwys8vgi2] {
    background: #e5e7eb;
    color: #374151;
    font-size: .7rem;
    font-weight: 700;
    border-radius: 999px;
    padding: .1rem .5rem;
}
.tc-sidebar-empty[b-fiwys8vgi2] {
    background: #fff;
    border: 1px dashed #d1d5db;
    border-radius: .75rem;
    padding: 2rem 1rem;
    text-align: center;
    color: #6b7280;
    font-size: .8rem;
}
.tc-sidebar-empty i[b-fiwys8vgi2] { font-size: 1.5rem; color: #d1d5db; display: block; margin-bottom: .5rem; }
.tc-sidebar-empty a[b-fiwys8vgi2] { color: #2563eb; font-weight: 500; }

/* Class card */
.tc-class-card[b-fiwys8vgi2] {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: .75rem;
    overflow: hidden;
    transition: box-shadow .15s, transform .15s;
}
.tc-class-card:hover[b-fiwys8vgi2] { box-shadow: 0 4px 12px rgba(0,0,0,.08); transform: translateY(-1px); }

.tc-class-header[b-fiwys8vgi2] {
    padding: .7rem .85rem;
}
.tc-class-name[b-fiwys8vgi2] {
    font-size: 1rem;
    font-weight: 700;
    color: #fff;
    margin-bottom: .25rem;
}
.tc-class-meta-row[b-fiwys8vgi2] {
    display: flex;
    gap: .4rem;
    flex-wrap: wrap;
}
.tc-section-chip[b-fiwys8vgi2] {
    padding: .15rem .5rem;
    background: rgba(255,255,255,.22);
    color: #fff;
    font-size: .65rem;
    font-weight: 600;
    border-radius: 999px;
}
.tc-ct-chip[b-fiwys8vgi2] {
    padding: .15rem .5rem;
    background: rgba(251,191,36,.85);
    color: #78350f;
    font-size: .65rem;
    font-weight: 700;
    border-radius: 999px;
    display: flex;
    align-items: center;
    gap: .2rem;
}

.tc-class-body[b-fiwys8vgi2] { padding: .65rem .85rem; }
.tc-subjects-row[b-fiwys8vgi2] {
    display: flex;
    flex-wrap: wrap;
    gap: .3rem;
    margin-bottom: .6rem;
}
.tc-sub-chip[b-fiwys8vgi2] {
    padding: .2rem .5rem;
    border-radius: 999px;
    font-size: .65rem;
    font-weight: 500;
    white-space: nowrap;
}

/* Class actions */
.tc-class-actions[b-fiwys8vgi2] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .35rem;
}
.tc-act[b-fiwys8vgi2] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .3rem;
    padding: .35rem .5rem;
    border: 1px solid #e5e7eb;
    border-radius: .4rem;
    background: #f9fafb;
    color: #374151;
    font-size: .72rem;
    font-weight: 500;
    cursor: pointer;
    transition: all .12s;
}
.tc-act:hover[b-fiwys8vgi2] { background: #f3f4f6; border-color: #d1d5db; }
.tc-act--primary[b-fiwys8vgi2] {
    background: var(--c, #2563eb);
    color: #fff;
    border-color: var(--c, #2563eb);
}
.tc-act--primary:hover[b-fiwys8vgi2] { filter: brightness(.92); }

/* ── Mobile responsiveness ── */
@media (max-width: 640px) {
    .tc-kpi-strip[b-fiwys8vgi2] { grid-template-columns: repeat(3, 1fr); gap: .4rem; }
    .tc-kpi[b-fiwys8vgi2] { flex-direction: column; align-items: flex-start; gap: .3rem; padding: .5rem .6rem; }
    .tc-kpi-val[b-fiwys8vgi2] { font-size: 1rem; }
    .tc-kpi-lbl[b-fiwys8vgi2] { font-size: .65rem; max-width: none; }
    .tc-tt-td[b-fiwys8vgi2] { height: 56px; }
    .tc-agenda-row[b-fiwys8vgi2] { grid-template-columns: 48px 20px 1fr; }
}
/* /Pages/Teacher/CompleteProfile.razor.rz.scp.css */
/* Styles handled via Tailwind utility classes in markup */
/* /Pages/Teacher/Curriculum/CreatePlan.razor.rz.scp.css */
/* CreatePlan Page Styles - Using Design Tokens */
/* Primary: Teal (#4A9B8E), Accent: Orange (#FFA500) */

*[b-msrekzptsg] {
    box-sizing: border-box;
}

/* Step Indicator */
.step-indicator[b-msrekzptsg] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2.5rem;
    padding: 1.5rem;
    background-color: #ffffff;
    border-radius: 0.5rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.step-item[b-msrekzptsg] {
    display: flex;
    align-items: center;
    flex: 1;
    position: relative;
}

.step-circle[b-msrekzptsg] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    min-width: 2.5rem;
    border-radius: 50%;
    background-color: #e5e7eb;
    color: #6b7280;
    font-weight: 700;
    font-size: 1rem;
    margin-right: 1rem;
    z-index: 10;
}

.step-circle.active[b-msrekzptsg] {
    background-color: #FFA500;
    color: white;
    box-shadow: 0 0 0 4px rgba(255, 165, 0, 0.1);
}

.step-circle.completed[b-msrekzptsg] {
    background-color: #22C55E;
    color: white;
}

.step-label[b-msrekzptsg] {
    font-size: 0.875rem;
    font-weight: 600;
    color: #374151;
    white-space: nowrap;
}

.step-label.inactive[b-msrekzptsg] {
    color: #9ca3af;
}

/* Connectors between steps */
.step-item[b-msrekzptsg]::after {
    content: '';
    position: absolute;
    left: 3rem;
    right: -50%;
    height: 2px;
    background-color: #e5e7eb;
    top: 1.25rem;
    z-index: 1;
}

.step-item:last-child[b-msrekzptsg]::after {
    display: none;
}

.step-item.completed[b-msrekzptsg]::after {
    background-color: #22C55E;
}

/* Main Container */
.container-main[b-msrekzptsg] {
    background-color: #ffffff;
    border-radius: 0.625rem;
    padding: 2rem;
    margin-bottom: 2rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.container-main h2[b-msrekzptsg] {
    font-size: 1.375rem;
    font-weight: 700;
    color: #111827;
    margin-bottom: 1.5rem;
    display: flex;
    align-items: center;
    gap: 1rem;
}

.section-number[b-msrekzptsg] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    background-color: #FFF8E5;
    color: #FFA500;
    font-weight: 700;
    font-size: 1.125rem;
}

/* Form Controls */
.form-group[b-msrekzptsg] {
    margin-bottom: 1.5rem;
}

.form-group label[b-msrekzptsg] {
    display: block;
    font-weight: 600;
    color: #1f2937;
    margin-bottom: 0.5rem;
    font-size: 0.9375rem;
}

.form-group label .required[b-msrekzptsg] {
    color: #dc2626;
    margin-left: 0.25rem;
}

.form-select[b-msrekzptsg],
.form-input[b-msrekzptsg] {
    width: 100%;
    padding: 0.75rem 1rem;
    border: 1px solid #d1d5db;
    border-radius: 0.375rem;
    font-size: 0.9375rem;
    background-color: #ffffff;
    color: #1f2937;
    font-family: inherit;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.form-select:hover[b-msrekzptsg],
.form-input:hover[b-msrekzptsg] {
    border-color: #9ca3af;
}

.form-select:focus[b-msrekzptsg],
.form-input:focus[b-msrekzptsg] {
    outline: none;
    border-color: #FFA500;
    box-shadow: 0 0 0 3px rgba(255, 165, 0, 0.1);
}

.form-select:disabled[b-msrekzptsg],
.form-input:disabled[b-msrekzptsg] {
    background-color: #f3f4f6;
    color: #9ca3af;
    cursor: not-allowed;
    border-color: #e5e7eb;
}

/* Chapter Selection */
.chapters-container[b-msrekzptsg] {
    margin-top: 1.5rem;
}

.chapters-title[b-msrekzptsg] {
    font-size: 1.125rem;
    font-weight: 600;
    color: #1f2937;
    margin-bottom: 1rem;
}

.chapters-grid[b-msrekzptsg] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1rem;
}

.chapter-card[b-msrekzptsg] {
    display: flex;
    align-items: flex-start;
    gap: 0.875rem;
    padding: 1rem;
    border: 2px solid #e5e7eb;
    border-radius: 0.5rem;
    background-color: #ffffff;
    cursor: pointer;
    transition: all 0.2s ease;
}

.chapter-card:hover[b-msrekzptsg] {
    border-color: #FFA500;
    background-color: #FFF8E5;
    box-shadow: 0 2px 6px rgba(255, 165, 0, 0.12);
}

.chapter-card.selected[b-msrekzptsg] {
    border-color: #FFA500;
    background-color: #FFF8E5;
    box-shadow: 0 4px 12px rgba(255, 165, 0, 0.15);
}

.chapter-checkbox[b-msrekzptsg] {
    width: 1.25rem;
    height: 1.25rem;
    min-width: 1.25rem;
    margin-top: 0.125rem;
    cursor: pointer;
    accent-color: #FFA500;
}

.chapter-content[b-msrekzptsg] {
    flex: 1;
    min-width: 0;
}

.chapter-label[b-msrekzptsg] {
    font-size: 0.75rem;
    font-weight: 600;
    color: #9ca3af;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.25rem;
}

.chapter-name[b-msrekzptsg] {
    font-size: 0.95rem;
    font-weight: 600;
    color: #1f2937;
    word-break: break-word;
    line-height: 1.4;
}

/* Empty State */
.empty-state[b-msrekzptsg] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem 2rem;
    text-align: center;
    background-color: #f9fafb;
    border: 2px dashed #d1d5db;
    border-radius: 0.5rem;
    margin-top: 2rem;
}

.empty-state-icon[b-msrekzptsg] {
    font-size: 3.5rem;
    color: #d1d5db;
    margin-bottom: 1rem;
}

.empty-state-title[b-msrekzptsg] {
    font-size: 1.125rem;
    font-weight: 600;
    color: #1f2937;
    margin-bottom: 0.5rem;
}

.empty-state-text[b-msrekzptsg] {
    color: #6b7280;
    font-size: 0.9375rem;
    margin-bottom: 1.5rem;
}

/* Buttons */

/* Alert Messages */
.alert[b-msrekzptsg] {
    padding: 1rem;
    border-radius: 0.375rem;
    font-size: 0.9375rem;
    margin-bottom: 1.5rem;
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
}

.alert-danger[b-msrekzptsg] {
    background-color: #FEE2E2;
    border: 1px solid #FECACA;
    color: #B91C1C;
}

.alert-danger strong[b-msrekzptsg] {
    color: #7F1D1D;
}

.alert-success[b-msrekzptsg] {
    background-color: #DCFCE7;
    border: 1px solid #BBF7D0;
    color: #166534;
}

.alert-warning[b-msrekzptsg] {
    background-color: #FFF8E5;
    border: 1px solid #FFD780;
    color: #B37300;
}

.alert-info[b-msrekzptsg] {
    background-color: #E6F7F4;
    border: 1px solid #B3E8DE;
    color: #225143;
}

.alert-icon[b-msrekzptsg] {
    flex-shrink: 0;
    font-size: 1.125rem;
    margin-top: 0.125rem;
}

.alert-content[b-msrekzptsg] {
    flex: 1;
}

/* Button Group */
.button-group[b-msrekzptsg] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 1rem;
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid #f3f4f6;
}

/* Loading State */
.spinner[b-msrekzptsg] {
    display: inline-block;
    animation: spin-b-msrekzptsg 0.8s linear infinite;
}

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

/* Date Picker */
.form-input[type="date"][b-msrekzptsg] {
    cursor: pointer;
}

/* Responsive Design */
@media (max-width: 768px) {
    .step-indicator[b-msrekzptsg] {
        flex-direction: column;
        gap: 1.5rem;
    }

    .step-item[b-msrekzptsg] {
        width: 100%;
    }

    .step-item[b-msrekzptsg]::after {
        left: 1.25rem;
        right: auto;
        width: 2px;
        height: 1.5rem;
        top: 2.5rem;
        background-color: #e5e7eb;
    }

    .step-label[b-msrekzptsg] {
        display: inline;
    }

    .chapters-grid[b-msrekzptsg] {
        grid-template-columns: 1fr;
    }

    .button-group[b-msrekzptsg] {
        flex-direction: column;
        gap: 0.75rem;
    }

    

    .container-main[b-msrekzptsg] {
        padding: 1.5rem;
    }

    .container-main h2[b-msrekzptsg] {
        font-size: 1.25rem;
    }

    .chapters-grid[b-msrekzptsg] {
        gap: 0.75rem;
    }

    .chapter-card[b-msrekzptsg] {
        gap: 0.75rem;
        padding: 0.875rem;
    }
}

@media (max-width: 480px) {
    .step-circle[b-msrekzptsg] {
        width: 2rem;
        height: 2rem;
        min-width: 2rem;
        font-size: 0.875rem;
        margin-right: 0.5rem;
    }

    .step-label[b-msrekzptsg] {
        font-size: 0.75rem;
    }

    

    .container-main[b-msrekzptsg] {
        padding: 1rem;
    }

    .container-main h2[b-msrekzptsg] {
        font-size: 1.125rem;
        gap: 0.75rem;
    }

    .section-number[b-msrekzptsg] {
        width: 2rem;
        height: 2rem;
        font-size: 1rem;
    }
}

/* /Pages/Teacher/Curriculum/Index.razor.rz.scp.css */
/* Teacher Curriculum Dashboard - scoped styles */

/* Stat cards */
.stat-card[b-5uwgly2pm8] {
    transition: box-shadow 0.2s ease;
}

.stat-card:hover[b-5uwgly2pm8] {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* Progress bar */
.progress-bar[b-5uwgly2pm8] {
    transition: width 0.6s ease;
}

/* Subject coverage rows */
.subject-row[b-5uwgly2pm8] {
    transition: background-color 0.15s ease;
}

.subject-row:hover[b-5uwgly2pm8] {
    background-color: var(--color-neutral-50);
}

/* Alert cards */
.alert-card[b-5uwgly2pm8] {
    transition: transform 0.15s ease;
}

.alert-card:hover[b-5uwgly2pm8] {
    transform: translateX(2px);
}
/* /Pages/Teacher/Curriculum/MyPlans.razor.rz.scp.css */
/* MyPlans Page Styles */
/* Primary: Teal (#4A9B8E), Accent: Orange (#FFA500) */

*[b-82hnbhm906] {
    box-sizing: border-box;
}

/* Summary Cards */
.summary-cards[b-82hnbhm906] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.summary-card[b-82hnbhm906] {
    background-color: #ffffff;
    border-radius: 0.625rem;
    padding: 1.5rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    border-left: 4px solid #e5e7eb;
    transition: all 0.2s ease;
}

.summary-card:hover[b-82hnbhm906] {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.summary-card.total-plans[b-82hnbhm906] {
    border-left-color: #9ca3af;
}

.summary-card.drafts[b-82hnbhm906] {
    border-left-color: #FFA500;
}

.summary-card.active[b-82hnbhm906] {
    border-left-color: #22C55E;
}

.summary-card.pending[b-82hnbhm906] {
    border-left-color: #4A9B8E;
}

.summary-card-header[b-82hnbhm906] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.75rem;
}

.summary-card-label[b-82hnbhm906] {
    font-size: 0.875rem;
    color: #6b7280;
    font-weight: 500;
}

.summary-card-icon[b-82hnbhm906] {
    font-size: 1.75rem;
    opacity: 0.15;
}

.summary-card-value[b-82hnbhm906] {
    font-size: 2rem;
    font-weight: 700;
    color: #1f2937;
}

/* Tabs/Filters */
.filter-tabs[b-82hnbhm906] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
    background-color: #ffffff;
    padding: 1rem;
    border-radius: 0.625rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.filter-btn[b-82hnbhm906] {
    padding: 0.625rem 1.25rem;
    border-radius: 2rem;
    border: none;
    font-weight: 600;
    font-size: 0.875rem;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.filter-btn.inactive[b-82hnbhm906] {
    background-color: #f3f4f6;
    color: #6b7280;
}

.filter-btn.inactive:hover[b-82hnbhm906] {
    background-color: #e5e7eb;
    color: #4b5563;
}

.filter-btn.active[b-82hnbhm906] {
    background-color: #dc2626;
    color: white;
}

.filter-btn.active:hover[b-82hnbhm906] {
    background-color: #b91c1c;
}

/* Plan List/Grid */
.plans-list[b-82hnbhm906] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 1.5rem;
}

.plan-card[b-82hnbhm906] {
    background-color: #ffffff;
    border-radius: 0.625rem;
    padding: 1.5rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    border: 1px solid #e5e7eb;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
}

.plan-card:hover[b-82hnbhm906] {
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.12);
    border-color: #FFA500;
    transform: translateY(-2px);
}

.plan-card-header[b-82hnbhm906] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 1rem;
}

.plan-classes[b-82hnbhm906] {
    font-size: 1rem;
    font-weight: 700;
    color: #1f2937;
    margin-bottom: 0.25rem;
}

.plan-subject[b-82hnbhm906] {
    font-size: 0.875rem;
    color: #6b7280;
}

.status-badge[b-82hnbhm906] {
    display: inline-block;
    padding: 0.375rem 0.875rem;
    border-radius: 2rem;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.status-badge.draft[b-82hnbhm906] {
    background-color: #FFF8E5;
    color: #B37300;
}

.status-badge.pending[b-82hnbhm906] {
    background-color: #E6F7F4;
    color: #225143;
}

.status-badge.active[b-82hnbhm906] {
    background-color: #DCFCE7;
    color: #166534;
}

.status-badge.rejected[b-82hnbhm906] {
    background-color: #FEE2E2;
    color: #B91C1C;
}

.status-badge.completed[b-82hnbhm906] {
    background-color: #f3f4f6;
    color: #4b5563;
}

.plan-details[b-82hnbhm906] {
    flex: 1;
    margin-bottom: 1rem;
}

.plan-detail-row[b-82hnbhm906] {
    display: flex;
    justify-content: space-between;
    padding: 0.625rem 0;
    border-bottom: 1px solid #f3f4f6;
    font-size: 0.875rem;
}

.plan-detail-row:last-child[b-82hnbhm906] {
    border-bottom: none;
}

.plan-detail-label[b-82hnbhm906] {
    color: #6b7280;
    font-weight: 500;
}

.plan-detail-value[b-82hnbhm906] {
    color: #1f2937;
    font-weight: 600;
}

.plan-actions[b-82hnbhm906] {
    display: flex;
    gap: 0.75rem;
    padding-top: 1rem;
    border-top: 1px solid #e5e7eb;
}

.plan-action-btn[b-82hnbhm906] {
    flex: 1;
    padding: 0.625rem 1rem;
    border-radius: 0.375rem;
    border: 1px solid #d1d5db;
    background-color: #ffffff;
    color: #374151;
    font-weight: 600;
    font-size: 0.8125rem;
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.plan-action-btn:hover[b-82hnbhm906] {
    background-color: #f9fafb;
    border-color: #9ca3af;
    color: #1f2937;
}

.plan-action-btn.primary[b-82hnbhm906] {
    background-color: #FFA500;
    color: white;
    border-color: #FFA500;
}

.plan-action-btn.primary:hover[b-82hnbhm906] {
    background-color: #E69500;
    border-color: #E69500;
}

.plan-action-btn.danger[b-82hnbhm906] {
    background-color: #fee2e2;
    color: #dc2626;
    border-color: #fecaca;
}

.plan-action-btn.danger:hover[b-82hnbhm906] {
    background-color: #fecaca;
    color: #991b1b;
}

/* Empty State */
.empty-state[b-82hnbhm906] {
    text-align: center;
    padding: 3rem 2rem;
    background-color: #f9fafb;
    border-radius: 0.625rem;
    border: 2px dashed #d1d5db;
}

.empty-state-icon[b-82hnbhm906] {
    font-size: 4rem;
    color: #d1d5db;
    margin-bottom: 1rem;
}

.empty-state-title[b-82hnbhm906] {
    font-size: 1.25rem;
    font-weight: 700;
    color: #1f2937;
    margin-bottom: 0.5rem;
}

.empty-state-text[b-82hnbhm906] {
    color: #6b7280;
    font-size: 0.9375rem;
    margin-bottom: 1.5rem;
}

.empty-state-btn[b-82hnbhm906] {
    display: inline-block;
    padding: 0.75rem 1.5rem;
    background-color: #dc2626;
    color: white;
    border: none;
    border-radius: 0.375rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    text-decoration: none;
}

.empty-state-btn:hover[b-82hnbhm906] {
    background-color: #b91c1c;
}

/* Buttons */
.btn[b-82hnbhm906] {
    padding: 0.75rem 1.5rem;
    border-radius: 0.375rem;
    font-weight: 600;
    font-size: 0.9375rem;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    text-decoration: none;
}

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

/* Header Section */
.page-header[b-82hnbhm906] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem;
}

.page-title[b-82hnbhm906] {
    font-size: 2rem;
    font-weight: 700;
    color: #1f2937;
    margin-bottom: 0.5rem;
}

.page-subtitle[b-82hnbhm906] {
    color: #6b7280;
    font-size: 0.9375rem;
}

.header-actions[b-82hnbhm906] {
    display: flex;
    gap: 1rem;
}

/* Responsive Design */
@media (max-width: 768px) {
    .summary-cards[b-82hnbhm906] {
        grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
        gap: 1rem;
    }

    .summary-card[b-82hnbhm906] {
        padding: 1rem;
    }

    .summary-card-label[b-82hnbhm906] {
        font-size: 0.8125rem;
    }

    .summary-card-value[b-82hnbhm906] {
        font-size: 1.5rem;
    }

    .summary-card-icon[b-82hnbhm906] {
        font-size: 1.5rem;
    }

    .plans-list[b-82hnbhm906] {
        grid-template-columns: 1fr;
    }

    .filter-tabs[b-82hnbhm906] {
        overflow-x: auto;
        flex-wrap: nowrap;
        padding: 0.75rem;
    }

    .filter-btn[b-82hnbhm906] {
        padding: 0.5rem 1rem;
        font-size: 0.8125rem;
    }

    .plan-action-btn[b-82hnbhm906] {
        padding: 0.5rem 0.75rem;
        font-size: 0.75rem;
    }

    .page-header[b-82hnbhm906] {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }

    .header-actions[b-82hnbhm906] {
        align-self: flex-end;
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    .page-title[b-82hnbhm906] {
        font-size: 1.5rem;
    }
}

@media (max-width: 480px) {
    .summary-cards[b-82hnbhm906] {
        grid-template-columns: 1fr;
    }

    .page-title[b-82hnbhm906] {
        font-size: 1.25rem;
    }

    .btn[b-82hnbhm906] {
        width: 100%;
        justify-content: center;
    }

    .plan-action-btn[b-82hnbhm906] {
        padding: 0.5rem 0.5rem;
    }

    .empty-state-icon[b-82hnbhm906] {
        font-size: 3rem;
    }
}
/* /Pages/Teacher/Curriculum/RequestExtension.razor.rz.scp.css */
/* Request Deadline Extension - scoped styles */

/* Extension form inputs */
input[type="date"][b-1fhocbvl2n],
textarea[b-1fhocbvl2n] {
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

/* Extension days counter */
.days-counter[b-1fhocbvl2n] {
    font-weight: 700;
    color: var(--color-warning-700, #b45309);
}

/* Info box */
.info-note[b-1fhocbvl2n] {
    border-left: 3px solid var(--color-info-400, #38bdf8);
}
/* /Pages/Teacher/Curriculum/UpdateProgress.razor.rz.scp.css */
/* Update Chapter Progress - scoped styles */

/* Range slider */
input[type="range"].slider[b-hg8z8q85q2] {
    accent-color: var(--color-primary-600, #4f46e5);
}

/* Progress bar fill */
.progress-fill[b-hg8z8q85q2] {
    transition: width 0.3s ease;
}

/* History timeline items */
.history-item[b-hg8z8q85q2] {
    transition: box-shadow 0.15s ease;
}

.history-item:hover[b-hg8z8q85q2] {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

/* Status badges */
.status-badge[b-hg8z8q85q2] {
    font-size: 0.7rem;
    letter-spacing: 0.03em;
}
/* /Pages/Teacher/Exams/AIGenerate.razor.rz.scp.css */
/* AIGenerate.razor.css — AI Exam Generator page */

/* ===== Page Layout ===== */
.ai-generate-page[b-3lzgq39trs] {
    padding: var(--spacing-6);
    max-width: 1200px;
    margin: 0 auto;
}

/* ===== Page Header ===== */
.page-header[b-3lzgq39trs] {
    margin-bottom: var(--spacing-6);
}

.page-header-content[b-3lzgq39trs] {
    display: flex;
    align-items: center;
    gap: var(--spacing-4);
}

.page-header-icon[b-3lzgq39trs] {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-lg);
    background: var(--color-primary-100);
    color: var(--color-primary-600);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.375rem;
    flex-shrink: 0;
}

.page-title[b-3lzgq39trs] {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--color-neutral-900);
    margin: 0 0 var(--spacing-1) 0;
    line-height: 1.2;
}

.page-subtitle[b-3lzgq39trs] {
    font-size: 0.875rem;
    color: var(--color-neutral-500);
    margin: 0;
}

/* ===== Form Grid ===== */
.form-grid[b-3lzgq39trs] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-6);
    align-items: start;
}

@media (max-width: 768px) {
    .ai-generate-page[b-3lzgq39trs] {
        padding: var(--spacing-4);
    }

    .form-grid[b-3lzgq39trs] {
        grid-template-columns: 1fr;
    }
}

/* ===== Cards ===== */
.form-card[b-3lzgq39trs] {
    background: var(--color-neutral-0);
    border: 1px solid var(--color-neutral-200);
    border-radius: var(--radius-lg);
    overflow: hidden;
    margin-bottom: var(--spacing-4);
}

.form-column .form-card:last-child[b-3lzgq39trs],
.section-column .form-card:last-child[b-3lzgq39trs] {
    margin-bottom: 0;
}

.card-header[b-3lzgq39trs] {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    padding: var(--spacing-3) var(--spacing-4);
    background: var(--color-neutral-50);
    border-bottom: 1px solid var(--color-neutral-200);
    font-weight: 600;
    font-size: 0.9375rem;
    color: var(--color-neutral-800);
}

.card-header .btn-add-section[b-3lzgq39trs] {
    margin-left: auto;
    background: var(--color-primary-600);
    color: var(--color-neutral-0);
    border: none;
    border-radius: var(--radius-base);
    padding: var(--spacing-1) var(--spacing-3);
    font-size: 0.8125rem;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: var(--spacing-1);
    transition: background 0.15s;
}

.card-header .btn-add-section:hover[b-3lzgq39trs] {
    background: var(--color-primary-700);
}

.card-body[b-3lzgq39trs] {
    padding: var(--spacing-4);
}

/* ===== Form Elements ===== */
.form-group[b-3lzgq39trs] {
    margin-bottom: var(--spacing-4);
}

.form-group:last-child[b-3lzgq39trs] {
    margin-bottom: 0;
}

.form-label[b-3lzgq39trs] {
    display: block;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-neutral-700);
    margin-bottom: var(--spacing-1);
}

.form-label .hint[b-3lzgq39trs] {
    font-weight: 400;
    color: var(--color-neutral-500);
    font-size: 0.8125rem;
}

.form-input[b-3lzgq39trs] {
    display: block;
    width: 100%;
    padding: var(--spacing-2) var(--spacing-3);
    border: 1px solid var(--color-neutral-300);
    border-radius: var(--radius-base);
    font-size: 0.9375rem;
    color: var(--color-neutral-900);
    background: var(--color-neutral-0);
    transition: border-color 0.15s, box-shadow 0.15s;
    box-sizing: border-box;
}

.form-input:focus[b-3lzgq39trs] {
    outline: none;
    border-color: var(--color-primary-500);
    box-shadow: 0 0 0 3px var(--color-primary-100);
}

.form-input:disabled[b-3lzgq39trs] {
    background: var(--color-neutral-100);
    color: var(--color-neutral-400);
    cursor: not-allowed;
}

.form-textarea[b-3lzgq39trs] {
    resize: vertical;
    min-height: 80px;
}

.form-input-sm[b-3lzgq39trs] {
    padding: calc(var(--spacing-1) + 2px) var(--spacing-2);
    font-size: 0.8125rem;
}

.form-row[b-3lzgq39trs] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-3);
}

/* ===== Toggle Group ===== */
.toggle-group[b-3lzgq39trs] {
    display: flex;
    border: 1px solid var(--color-neutral-300);
    border-radius: var(--radius-base);
    overflow: hidden;
}

.toggle-btn[b-3lzgq39trs] {
    flex: 1;
    padding: var(--spacing-2) var(--spacing-3);
    border: none;
    background: var(--color-neutral-0);
    color: var(--color-neutral-600);
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}

.toggle-btn:first-child[b-3lzgq39trs] {
    border-right: 1px solid var(--color-neutral-300);
}

.toggle-btn.active[b-3lzgq39trs] {
    background: var(--color-primary-600);
    color: var(--color-neutral-0);
    font-weight: 600;
}

/* ===== Chapter Grid ===== */
.chapter-grid[b-3lzgq39trs] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-2);
}

.chapter-chip[b-3lzgq39trs] {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-1);
    padding: var(--spacing-1) var(--spacing-3);
    border: 1px solid var(--color-neutral-300);
    border-radius: 999px;
    background: var(--color-neutral-0);
    color: var(--color-neutral-700);
    font-size: 0.8125rem;
    font-weight: 500;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s, color 0.15s;
}

.chapter-chip:hover[b-3lzgq39trs] {
    border-color: var(--color-primary-400);
    color: var(--color-primary-600);
}

.chapter-chip.selected[b-3lzgq39trs] {
    border-color: var(--color-primary-500);
    background: var(--color-primary-50);
    color: var(--color-primary-700);
    font-weight: 600;
}

.chapter-icon[b-3lzgq39trs] {
    font-size: 0.75rem;
}

/* ===== Section Builder ===== */
.empty-sections[b-3lzgq39trs] {
    text-align: center;
    padding: var(--spacing-8) var(--spacing-4);
    color: var(--color-neutral-400);
}

.empty-icon[b-3lzgq39trs] {
    font-size: 2rem;
    margin-bottom: var(--spacing-2);
    display: block;
}

.section-row[b-3lzgq39trs] {
    display: flex;
    gap: var(--spacing-3);
    padding: var(--spacing-3);
    border: 1px solid var(--color-neutral-200);
    border-radius: var(--radius-base);
    margin-bottom: var(--spacing-3);
    background: var(--color-neutral-50);
}

.section-row:last-of-type[b-3lzgq39trs] {
    margin-bottom: 0;
}

.section-label[b-3lzgq39trs] {
    flex-shrink: 0;
    display: flex;
    align-items: flex-start;
    padding-top: var(--spacing-1);
}

.section-letter[b-3lzgq39trs] {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--color-primary-600);
    color: var(--color-neutral-0);
    font-size: 0.8125rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}

.section-fields[b-3lzgq39trs] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-2);
}

.section-field-row[b-3lzgq39trs] {
    display: flex;
    gap: var(--spacing-2);
    align-items: center;
}

.section-name-input[b-3lzgq39trs] {
    flex: 1;
}

.section-detail-row[b-3lzgq39trs] {
    display: flex;
    gap: var(--spacing-2);
    flex-wrap: wrap;
}

.form-group-inline[b-3lzgq39trs] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    min-width: 80px;
}

.inline-label[b-3lzgq39trs] {
    font-size: 0.6875rem;
    font-weight: 600;
    color: var(--color-neutral-500);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.btn-remove-section[b-3lzgq39trs] {
    background: none;
    border: 1px solid var(--color-danger-300);
    color: var(--color-danger-500);
    border-radius: var(--radius-base);
    padding: var(--spacing-1) var(--spacing-2);
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
    flex-shrink: 0;
}

.btn-remove-section:hover[b-3lzgq39trs] {
    background: var(--color-danger-50);
    color: var(--color-danger-700);
}

/* ===== Summary Bar ===== */
.summary-bar[b-3lzgq39trs] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-4);
    background: var(--color-primary-50);
    border: 1px solid var(--color-primary-200);
    border-radius: var(--radius-base);
    padding: var(--spacing-3) var(--spacing-4);
    margin-top: var(--spacing-4);
}

.summary-item[b-3lzgq39trs] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}

.summary-number[b-3lzgq39trs] {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--color-primary-700);
}

.summary-label[b-3lzgq39trs] {
    font-size: 0.75rem;
    color: var(--color-primary-600);
    font-weight: 500;
}

.summary-divider[b-3lzgq39trs] {
    width: 1px;
    height: 32px;
    background: var(--color-primary-300);
}

/* ===== Generate Button ===== */
.btn-generate[b-3lzgq39trs] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-2);
    width: 100%;
    padding: var(--spacing-4);
    background: var(--color-primary-600);
    color: var(--color-neutral-0);
    border: none;
    border-radius: var(--radius-lg);
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.15s, transform 0.1s;
    margin-top: var(--spacing-4);
    min-height: 52px;
}

.btn-generate:hover:not(:disabled)[b-3lzgq39trs] {
    background: var(--color-primary-700);
    transform: translateY(-1px);
}

.btn-generate:disabled[b-3lzgq39trs] {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

.btn-generate.generating[b-3lzgq39trs] {
    background: var(--color-primary-700);
}

.generate-hint[b-3lzgq39trs] {
    font-size: 0.8125rem;
    color: var(--color-neutral-500);
    text-align: center;
    margin-top: var(--spacing-3);
    line-height: 1.5;
}

/* ===== Error Alert ===== */
.error-alert[b-3lzgq39trs] {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-2);
    background: var(--color-danger-50);
    border: 1px solid var(--color-danger-200);
    border-radius: var(--radius-base);
    padding: var(--spacing-3) var(--spacing-4);
    color: var(--color-danger-700);
    font-size: 0.875rem;
    margin-top: var(--spacing-4);
}

/* ===== Loading ===== */
.loading-container[b-3lzgq39trs] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-16);
    gap: var(--spacing-4);
    color: var(--color-neutral-500);
}

/* ===== Generating Overlay ===== */
.ai-generating-overlay[b-3lzgq39trs] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    z-index: var(--z-modal);
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(2px);
}

.overlay-card[b-3lzgq39trs] {
    background: var(--color-neutral-0);
    border-radius: var(--radius-xl);
    padding: var(--spacing-10) var(--spacing-12);
    text-align: center;
    max-width: 380px;
    width: 90%;
    box-shadow: var(--shadow-xl);
}

.overlay-spinner[b-3lzgq39trs] {
    width: 52px;
    height: 52px;
    border: 4px solid var(--color-primary-200);
    border-top-color: var(--color-primary-600);
    border-radius: 50%;
    animation: spin-b-3lzgq39trs 0.7s linear infinite;
    margin: 0 auto var(--spacing-4);
}

.overlay-card h2[b-3lzgq39trs] {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--color-neutral-900);
    margin: 0 0 var(--spacing-2) 0;
}

.overlay-card p[b-3lzgq39trs] {
    font-size: 0.9375rem;
    color: var(--color-neutral-600);
    margin: 0 0 var(--spacing-1) 0;
}

.overlay-hint[b-3lzgq39trs] {
    font-size: 0.8125rem !important;
    color: var(--color-neutral-400) !important;
    margin-top: var(--spacing-3) !important;
}

/* ===== Spinner ===== */
.spinner[b-3lzgq39trs] {
    width: 36px;
    height: 36px;
    border: 3px solid var(--color-neutral-200);
    border-top-color: var(--color-primary-600);
    border-radius: 50%;
    animation: spin-b-3lzgq39trs 0.7s linear infinite;
}

.spinner-sm[b-3lzgq39trs] {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255, 255, 255, 0.4);
    border-top-color: white;
    border-radius: 50%;
    animation: spin-b-3lzgq39trs 0.7s linear infinite;
}

@keyframes spin-b-3lzgq39trs {
    to { transform: rotate(360deg); }
}
/* /Pages/Teacher/Exams/AssignStudents/Index.razor.rz.scp.css */
/* ============================================================
   Assign Students Page — Index.razor.css
   Full-page layout: sticky controls + 2-col content + sticky footer
   ============================================================ */

/* ── Page shell ────────────────────────────────────────────── */
.as-page[b-hc0l2se4kt] {
    display: flex;
    flex-direction: column;
    min-height: calc(100vh - 64px);
    padding: 0;
    background: var(--color-neutral-50, #f8f9fa);
}

/* ── Loading / Error states ────────────────────────────────── */
.as-loading[b-hc0l2se4kt],
.as-list-loading[b-hc0l2se4kt],
.as-error-state[b-hc0l2se4kt],
.as-empty[b-hc0l2se4kt] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: 3rem 1.5rem;
    color: var(--color-neutral-500, #6b7280);
    font-size: 0.9rem;
}
.as-empty i[b-hc0l2se4kt], .as-error-state i[b-hc0l2se4kt] {
    font-size: 2rem;
    opacity: 0.5;
}

.as-spinner[b-hc0l2se4kt] {
    width: 36px;
    height: 36px;
    border: 3px solid var(--color-neutral-200, #e5e7eb);
    border-top-color: var(--color-primary, #059669);
    border-radius: 50%;
    animation: as-spin-b-hc0l2se4kt 0.8s linear infinite;
}
.as-spinner-sm[b-hc0l2se4kt] {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255,255,255,0.4);
    border-top-color: #fff;
    border-radius: 50%;
    animation: as-spin-b-hc0l2se4kt 0.8s linear infinite;
    vertical-align: middle;
}

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

/* ── Breadcrumb ────────────────────────────────────────────── */
.as-breadcrumb[b-hc0l2se4kt] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.75rem 1.5rem 0;
    font-size: 0.8rem;
    color: var(--color-neutral-500, #6b7280);
}
.as-bc-link[b-hc0l2se4kt] {
    color: var(--color-primary, #059669);
    text-decoration: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.35rem;
}
.as-bc-link:hover[b-hc0l2se4kt] { text-decoration: underline; }
.as-bc-sep[b-hc0l2se4kt] { opacity: 0.5; }
.as-bc-current[b-hc0l2se4kt] { color: var(--color-neutral-700, #374151); font-weight: 500; }

/* ── Page Header ───────────────────────────────────────────── */
.as-header[b-hc0l2se4kt] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: 0.75rem 1.5rem 0.5rem;
}
.as-title[b-hc0l2se4kt] {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--color-neutral-900, #111827);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.as-title i[b-hc0l2se4kt] { color: var(--color-primary, #059669); }
.as-subtitle[b-hc0l2se4kt] {
    font-size: 0.85rem;
    color: var(--color-neutral-500, #6b7280);
    margin: 0.25rem 0 0;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: wrap;
}
.as-chip[b-hc0l2se4kt] {
    display: inline-block;
    background: var(--color-neutral-100, #f3f4f6);
    color: var(--color-neutral-700, #374151);
    border-radius: 999px;
    padding: 0.15rem 0.6rem;
    font-size: 0.75rem;
    font-weight: 600;
}

/* ── Top Controls ──────────────────────────────────────────── */
.as-controls[b-hc0l2se4kt] {
    background: var(--color-white, #fff);
    border-bottom: 1px solid var(--color-neutral-200, #e5e7eb);
    padding: 0.75rem 1.5rem;
    position: sticky;
    top: 0;
    z-index: 20;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.as-search-row[b-hc0l2se4kt] {
    display: flex;
    gap: 0.75rem;
    align-items: center;
}
.as-search-wrap[b-hc0l2se4kt] {
    position: relative;
    flex: 1;
}
.as-search-icon[b-hc0l2se4kt] {
    position: absolute;
    left: 0.875rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--color-neutral-400, #9ca3af);
    pointer-events: none;
    font-size: 0.85rem;
}
.as-search-input[b-hc0l2se4kt] {
    width: 100%;
    height: 44px;
    padding: 0 1rem 0 2.4rem;
    border: 1px solid var(--color-neutral-300, #d1d5db);
    border-radius: 8px;
    font-size: 0.875rem;
    background: var(--color-white, #fff);
    color: var(--color-neutral-900, #111827);
    transition: border-color 0.15s;
    box-sizing: border-box;
}
.as-search-input:focus[b-hc0l2se4kt] {
    outline: none;
    border-color: var(--color-primary, #059669);
    box-shadow: 0 0 0 2px rgba(5,150,105,0.15);
}

.as-section-select[b-hc0l2se4kt] {
    height: 44px;
    padding: 0 0.875rem;
    border: 1px solid var(--color-neutral-300, #d1d5db);
    border-radius: 8px;
    font-size: 0.875rem;
    background: var(--color-white, #fff);
    color: var(--color-neutral-900, #111827);
    min-width: 160px;
    cursor: pointer;
}
.as-section-select:focus[b-hc0l2se4kt] {
    outline: none;
    border-color: var(--color-primary, #059669);
}

.as-stats-row[b-hc0l2se4kt] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.5rem;
}
.as-stats[b-hc0l2se4kt] {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}
.as-stat[b-hc0l2se4kt] {
    font-size: 0.78rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.3rem;
}
.as-stat--total[b-hc0l2se4kt] { color: var(--color-neutral-600, #4b5563); }
.as-stat--selected[b-hc0l2se4kt] { color: var(--color-primary, #059669); }
.as-stat--remaining[b-hc0l2se4kt] { color: var(--color-neutral-400, #9ca3af); }

.as-bulk-actions[b-hc0l2se4kt] {
    display: flex;
    gap: 0.5rem;
}
.as-pill-btn[b-hc0l2se4kt] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.3rem 0.875rem;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 600;
    border: 1px solid transparent;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}
.as-pill-btn:disabled[b-hc0l2se4kt] { opacity: 0.4; cursor: not-allowed; }
.as-pill-btn--select[b-hc0l2se4kt] {
    background: rgba(5,150,105,0.08);
    color: var(--color-primary, #059669);
    border-color: rgba(5,150,105,0.2);
}
.as-pill-btn--select:hover:not(:disabled)[b-hc0l2se4kt] { background: rgba(5,150,105,0.15); }
.as-pill-btn--clear[b-hc0l2se4kt] {
    background: var(--color-neutral-100, #f3f4f6);
    color: var(--color-neutral-600, #4b5563);
    border-color: var(--color-neutral-200, #e5e7eb);
}
.as-pill-btn--clear:hover:not(:disabled)[b-hc0l2se4kt] { background: var(--color-neutral-200, #e5e7eb); }

/* ── Alert Banner ──────────────────────────────────────────── */
.as-alert[b-hc0l2se4kt] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1.5rem;
    font-size: 0.85rem;
}
.as-alert > button[b-hc0l2se4kt] {
    margin-left: auto;
    background: none;
    border: none;
    cursor: pointer;
    opacity: 0.6;
}
.as-alert--error[b-hc0l2se4kt] {
    background: #fef2f2;
    color: #b91c1c;
    border-bottom: 1px solid #fecaca;
}

/* ── Conflict Warning Banner ───────────────────────────────── */
.as-conflict-banner[b-hc0l2se4kt] {
    background: #fffbeb;
    border: 1px solid #fcd34d;
    border-radius: 8px;
    margin: 0.75rem 1.5rem;
    padding: 1rem 1.25rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}
.as-conflict-banner-head[b-hc0l2se4kt] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    color: #92400e;
}
.as-conflict-banner-head i[b-hc0l2se4kt] { color: #d97706; font-size: 1rem; }
.as-conflict-actions[b-hc0l2se4kt] {
    display: flex;
    gap: 0.5rem;
}

/* ── 2-Column Content ──────────────────────────────────────── */
.as-content[b-hc0l2se4kt] {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 0;
    flex: 1;
    align-items: start;
    padding: 0.75rem 1.5rem 6rem; /* bottom padding for footer */
    gap: 1.25rem;
}

/* ── Student List Column ───────────────────────────────────── */
.as-list-col[b-hc0l2se4kt] {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.as-section-header[b-hc0l2se4kt] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 0 0.3rem;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-neutral-500, #6b7280);
    border-bottom: 1px solid var(--color-neutral-200, #e5e7eb);
    margin-top: 0.5rem;
}
.as-section-header:first-child[b-hc0l2se4kt] { margin-top: 0; }
.as-section-count[b-hc0l2se4kt] {
    margin-left: auto;
    background: var(--color-neutral-100, #f3f4f6);
    border-radius: 999px;
    padding: 0.1rem 0.5rem;
    font-size: 0.7rem;
}

/* ── Student Card ──────────────────────────────────────────── */
.as-card[b-hc0l2se4kt] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    background: var(--color-white, #fff);
    border: 1.5px solid var(--color-neutral-200, #e5e7eb);
    border-radius: 10px;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
    user-select: none;
}
.as-card:hover[b-hc0l2se4kt] {
    border-color: var(--color-primary, #059669);
    box-shadow: 0 1px 6px rgba(5,150,105,0.12);
}
.as-card--selected[b-hc0l2se4kt] {
    border-color: var(--color-primary, #059669);
    background: #ecfdf5;
    border-left: 4px solid var(--color-primary, #059669);
}

.as-card-check[b-hc0l2se4kt] {
    flex-shrink: 0;
}
.as-checkbox[b-hc0l2se4kt] {
    width: 20px;
    height: 20px;
    border: 2px solid var(--color-neutral-300, #d1d5db);
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s;
    font-size: 0.7rem;
    color: #fff;
}
.as-checkbox--checked[b-hc0l2se4kt] {
    background: var(--color-primary, #059669);
    border-color: var(--color-primary, #059669);
}

.as-card-avatar[b-hc0l2se4kt] {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--color-neutral-100, #f3f4f6);
    color: var(--color-neutral-600, #4b5563);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.95rem;
    flex-shrink: 0;
    text-transform: uppercase;
}
.as-card-avatar--selected[b-hc0l2se4kt] {
    background: rgba(5,150,105,0.12);
    color: var(--color-primary, #059669);
}

.as-card-body[b-hc0l2se4kt] {
    flex: 1;
    min-width: 0;
}
.as-card-name[b-hc0l2se4kt] {
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--color-neutral-900, #111827);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.as-card-meta[b-hc0l2se4kt] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.2rem;
    font-size: 0.75rem;
    color: var(--color-neutral-500, #6b7280);
}
.as-card-meta span[b-hc0l2se4kt] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}
.as-meta-section[b-hc0l2se4kt] {
    color: var(--color-primary-dark, #047857);
    font-weight: 600;
}

.as-card-tick[b-hc0l2se4kt] {
    color: var(--color-primary, #059669);
    font-size: 1.1rem;
    flex-shrink: 0;
}

/* ── Settings Column ───────────────────────────────────────── */
.as-settings-col[b-hc0l2se4kt] {
    position: sticky;
    top: 130px;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.as-settings-card[b-hc0l2se4kt] {
    background: var(--color-white, #fff);
    border: 1px solid var(--color-neutral-200, #e5e7eb);
    border-radius: 10px;
    padding: 1.1rem 1.25rem;
}
.as-settings-title[b-hc0l2se4kt] {
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-neutral-500, #6b7280);
    margin: 0 0 0.875rem;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}
.as-settings-title i[b-hc0l2se4kt] { color: var(--color-primary, #059669); }

.as-field[b-hc0l2se4kt] {
    margin-bottom: 0.875rem;
}
.as-field:last-child[b-hc0l2se4kt] { margin-bottom: 0; }

.as-label[b-hc0l2se4kt] {
    display: block;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--color-neutral-600, #4b5563);
    margin-bottom: 0.3rem;
}
.as-input[b-hc0l2se4kt], .as-select[b-hc0l2se4kt] {
    width: 100%;
    height: 44px;
    padding: 0 0.875rem;
    border: 1px solid var(--color-neutral-300, #d1d5db);
    border-radius: 8px;
    font-size: 0.875rem;
    background: var(--color-white, #fff);
    color: var(--color-neutral-900, #111827);
    box-sizing: border-box;
    transition: border-color 0.15s;
}
.as-input:focus[b-hc0l2se4kt], .as-select:focus[b-hc0l2se4kt] {
    outline: none;
    border-color: var(--color-primary, #059669);
    box-shadow: 0 0 0 2px rgba(5,150,105,0.15);
}

/* ── Notification Toggles ──────────────────────────────────── */
.as-notif-card[b-hc0l2se4kt] {
    padding-bottom: 0.75rem;
}
.as-toggle-row[b-hc0l2se4kt] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.6rem 0;
    border-bottom: 1px solid var(--color-neutral-50, #f9fafb);
    cursor: pointer;
}
.as-toggle-row:last-child[b-hc0l2se4kt] { border-bottom: none; }
.as-toggle-row--sub[b-hc0l2se4kt] {
    padding-left: 1.5rem;
    opacity: 0.9;
}
.as-toggle-info[b-hc0l2se4kt] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 0.85rem;
}
.as-toggle-info > i[b-hc0l2se4kt] {
    width: 28px;
    height: 28px;
    background: var(--color-neutral-100, #f3f4f6);
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    color: var(--color-neutral-500, #6b7280);
    flex-shrink: 0;
}
.as-toggle-label[b-hc0l2se4kt] {
    display: block;
    font-weight: 600;
    color: var(--color-neutral-800, #1f2937);
    font-size: 0.8rem;
}
.as-toggle-desc[b-hc0l2se4kt] {
    display: block;
    font-size: 0.7rem;
    color: var(--color-neutral-400, #9ca3af);
}
.as-toggle-switch[b-hc0l2se4kt] {
    width: 40px;
    height: 22px;
    background: var(--color-neutral-200, #e5e7eb);
    border-radius: 999px;
    position: relative;
    transition: background 0.2s;
    flex-shrink: 0;
}
.as-toggle-switch[b-hc0l2se4kt]::after {
    content: '';
    position: absolute;
    width: 16px;
    height: 16px;
    background: #fff;
    border-radius: 50%;
    top: 3px;
    left: 3px;
    transition: transform 0.2s;
    box-shadow: 0 1px 3px rgba(0,0,0,0.15);
}
.as-toggle-switch--on[b-hc0l2se4kt] {
    background: var(--color-primary, #059669);
}
.as-toggle-switch--on[b-hc0l2se4kt]::after {
    transform: translateX(18px);
}

/* ── Buttons ───────────────────────────────────────────────── */
.as-btn-secondary[b-hc0l2se4kt] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0 1.25rem;
    height: 44px;
    border: 1.5px solid var(--color-neutral-300, #d1d5db);
    background: var(--color-white, #fff);
    color: var(--color-neutral-700, #374151);
    border-radius: 8px;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}
.as-btn-secondary:hover:not(:disabled)[b-hc0l2se4kt] {
    background: var(--color-neutral-50, #f9fafb);
    border-color: var(--color-neutral-400, #9ca3af);
}
.as-btn-secondary:disabled[b-hc0l2se4kt] { opacity: 0.5; cursor: not-allowed; }

.as-btn-warning[b-hc0l2se4kt] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0 1rem;
    height: 38px;
    border: 1px solid #d97706;
    background: #fef3c7;
    color: #92400e;
    border-radius: 8px;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
}
.as-btn-warning:hover[b-hc0l2se4kt] { background: #fde68a; }

.as-btn-assign[b-hc0l2se4kt] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0 1.75rem;
    height: 44px;
    background: var(--color-primary, #059669);
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s;
}
.as-btn-assign:hover:not(:disabled)[b-hc0l2se4kt] { background: var(--color-primary-dark, #047857); }
.as-btn-assign:disabled[b-hc0l2se4kt] { opacity: 0.5; cursor: not-allowed; }

/* ── Sticky Footer ─────────────────────────────────────────── */
.as-footer[b-hc0l2se4kt] {
    position: sticky;
    bottom: 0;
    background: var(--color-white, #fff);
    border-top: 1.5px solid var(--color-neutral-200, #e5e7eb);
    padding: 0.875rem 1.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    z-index: 30;
    box-shadow: 0 -4px 16px rgba(0,0,0,0.06);
}
.as-footer-right[b-hc0l2se4kt] {
    display: flex;
    align-items: center;
    gap: 1rem;
}
.as-footer-count[b-hc0l2se4kt] {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--color-primary, #059669);
    display: flex;
    align-items: center;
    gap: 0.3rem;
}

/* ── Responsive ────────────────────────────────────────────── */
@media (max-width: 900px) {
    .as-content[b-hc0l2se4kt] {
        grid-template-columns: 1fr;
    }
    .as-settings-col[b-hc0l2se4kt] {
        position: static;
        order: -1; /* Settings appear above list on mobile */
    }
}

@media (max-width: 600px) {
    .as-controls[b-hc0l2se4kt],
    .as-header[b-hc0l2se4kt],
    .as-breadcrumb[b-hc0l2se4kt],
    .as-content[b-hc0l2se4kt],
    .as-footer[b-hc0l2se4kt] {
        padding-left: 1rem;
        padding-right: 1rem;
    }
    .as-search-row[b-hc0l2se4kt] {
        flex-direction: column;
        align-items: stretch;
    }
    .as-section-select[b-hc0l2se4kt] {
        width: 100%;
    }
    .as-footer[b-hc0l2se4kt] {
        flex-direction: column;
        gap: 0.5rem;
    }
    .as-footer-right[b-hc0l2se4kt] {
        width: 100%;
        justify-content: space-between;
    }
    .as-btn-assign[b-hc0l2se4kt] {
        flex: 1;
        justify-content: center;
    }
    .as-btn-secondary[b-hc0l2se4kt] {
        width: 100%;
        justify-content: center;
    }
}
/* /Pages/Teacher/Exams/CreateManual.razor.rz.scp.css */
/* ─── Page Shell ──────────────────────────────────────────────────────────── */
.cm-loading[b-xjsmcx1kco] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 60vh;
    gap: 1rem;
    color: var(--color-neutral-500);
}

.cm-page[b-xjsmcx1kco] {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    height: 100vh;
    background: var(--color-neutral-50, #f8fafc);
    overflow: hidden;
}

/* ─── Header ─────────────────────────────────────────────────────────────── */
.cm-header[b-xjsmcx1kco] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1rem; /* tighter on mobile */
    background: #fff;
    border-bottom: 1px solid var(--color-neutral-100);
    position: sticky;
    top: 0;
    z-index: 30;
    gap: 0.75rem;
}

@media (max-width: 640px) {
    .cm-header[b-xjsmcx1kco] {
        flex-wrap: wrap;
        padding-top: 0.625rem;
        padding-bottom: 0.625rem;
        gap: 0.5rem;
    }
}

.cm-header-left[b-xjsmcx1kco] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-width: 0; /* allow text shrink */
}

.cm-btn-back[b-xjsmcx1kco] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border: 1px solid var(--color-neutral-200);
    border-radius: 0.375rem;
    background: #fff;
    color: var(--color-neutral-600);
    cursor: pointer;
    transition: background 0.15s;
}

.cm-btn-back:hover[b-xjsmcx1kco] { background: var(--color-neutral-50); }

.cm-page-label[b-xjsmcx1kco] {
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: var(--color-neutral-400);
    text-transform: uppercase;
}

.cm-page-title[b-xjsmcx1kco] {
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-neutral-900);
    line-height: 1.3;
    min-width: 0; /* enable ellipsis */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@media (max-width: 640px) {
    .cm-page-title[b-xjsmcx1kco] { font-size: 0.9rem; }
}

.cm-header-right[b-xjsmcx1kco] {
    display: flex;
    align-items: center;
    gap: 0.5rem; /* tighter spacing */
    flex-wrap: wrap;
}

@media (max-width: 640px) {
    .cm-header-right[b-xjsmcx1kco] { width: 100%; justify-content: flex-end; }
}

.cm-draft-badge[b-xjsmcx1kco] {
    font-size: 0.75rem;
    color: var(--color-success-600, #16a34a);
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

.cm-btn-draft[b-xjsmcx1kco] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.4rem 0.75rem; /* slightly tighter */
    border: 1px solid var(--color-neutral-300);
    border-radius: 0.375rem;
    background: #fff;
    color: var(--color-neutral-700);
    font-size: 0.8rem;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s;
    white-space: nowrap;
}

@media (max-width: 480px) {
    .cm-btn-draft[b-xjsmcx1kco] { padding: 0.35rem 0.6rem; font-size: 0.75rem; }
}

.cm-btn-draft:hover:not(:disabled)[b-xjsmcx1kco] { background: var(--color-neutral-50); }
.cm-btn-draft:disabled[b-xjsmcx1kco] { opacity: 0.5; cursor: not-allowed; }

/* ─── Stepper ────────────────────────────────────────────────────────────── */
.cm-stepper[b-xjsmcx1kco] {
    display: flex;
    align-items: center;
    padding: 0 1rem; /* tighter horizontally */
    background: #fff;
    border-bottom: 1px solid var(--color-neutral-100);
    overflow-x: auto;
    gap: 0;
    scrollbar-width: none;
    height: 42px; /* slightly smaller on mobile */
    flex-shrink: 0;
}

@media (max-width: 640px) {
    .cm-stepper[b-xjsmcx1kco] { padding-left: 0.75rem; padding-right: 0.75rem; height: 40px; }
}

.cm-stepper[b-xjsmcx1kco]::-webkit-scrollbar { display: none; }

.cm-step[b-xjsmcx1kco] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem; /* tighter */
    padding: 0 0.6rem; /* slightly reduced */
    height: 100%;
    border: none;
    background: transparent;
    cursor: pointer;
    white-space: nowrap;
    border-bottom: 2px solid transparent;
    transition: background 0.12s, border-color 0.12s;
    min-width: 0;
    flex-shrink: 0;
    position: relative;
    margin-bottom: -1px; /* overlap border-bottom of stepper */
}

.cm-step:hover:not(:disabled)[b-xjsmcx1kco] { background: var(--color-neutral-50); }
.cm-step:disabled[b-xjsmcx1kco] { opacity: 0.35; cursor: not-allowed; }

.cm-step-active[b-xjsmcx1kco] {
    border-bottom-color: var(--color-primary-500, #6366f1);
    background: var(--color-primary-50, #eef2ff);
}

.cm-step-circle[b-xjsmcx1kco] {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 1.5px solid var(--color-neutral-300);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.58rem;
    font-weight: 700;
    color: var(--color-neutral-400);
    background: #fff;
    flex-shrink: 0;
    transition: all 0.15s;
}

.cm-step-active .cm-step-circle[b-xjsmcx1kco] {
    border-color: var(--color-primary-500, #6366f1);
    background: var(--color-primary-500, #6366f1);
    color: #fff;
}

.cm-step-done .cm-step-circle[b-xjsmcx1kco] {
    border-color: var(--color-success-500, #22c55e);
    background: var(--color-success-500, #22c55e);
    color: #fff;
}

.cm-step-info[b-xjsmcx1kco] {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.3rem;
}

.cm-step-name[b-xjsmcx1kco] {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--color-neutral-600);
    line-height: 1;
    max-width: 120px; /* slightly smaller */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@media (max-width: 480px) {
    .cm-step-name[b-xjsmcx1kco] { font-size: 0.7rem; max-width: 90px; }
}

.cm-step-active .cm-step-name[b-xjsmcx1kco] { color: var(--color-primary-700, #4338ca); font-weight: 700; }
.cm-step-done .cm-step-name[b-xjsmcx1kco]   { color: var(--color-neutral-600); }

.cm-step-sub[b-xjsmcx1kco] {
    font-size: 0.65rem;
    font-weight: 700;
    color: var(--color-neutral-400);
}

.cm-step-count[b-xjsmcx1kco]     { font-weight: 700; font-size: 0.65rem; }
.cm-count-ok[b-xjsmcx1kco]       { color: var(--color-success-600, #16a34a) !important; }
.cm-count-partial[b-xjsmcx1kco]  { color: var(--color-warning-600, #d97706) !important; }

.cm-step-line[b-xjsmcx1kco] {
    width: 14px;
    min-width: 10px;
    flex-shrink: 0;
    height: 1.5px;
    background: var(--color-neutral-200);
    transition: background 0.2s;
}

.cm-line-done[b-xjsmcx1kco] { background: var(--color-success-400, #4ade80); }

/* ─── Content area ───────────────────────────────────────────────────────── */
.cm-content[b-xjsmcx1kco] {
    flex: 1;
    padding: 1rem; /* tighter on mobile */
    max-width: 1400px;
    width: 100%;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: auto;
}

@media (min-width: 768px) {
    .cm-content[b-xjsmcx1kco] { padding: 1.5rem; }
}

/* Section card steps fill the viewport — no padding/max-width constraint */
.cm-content:has(.cm-section-card)[b-xjsmcx1kco] {
    padding: 0;
    max-width: none;
    overflow: hidden;
}

.cm-card[b-xjsmcx1kco] {
    background: #fff;
    border: 1px solid var(--color-neutral-100);
    border-radius: 0.75rem;
    padding: 1.5rem;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}

.cm-section-card[b-xjsmcx1kco] {
    padding: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
}

.cm-section-title[b-xjsmcx1kco] {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-neutral-500);
    margin-bottom: 1rem;
    border-bottom: 1px solid var(--color-neutral-100);
    padding-bottom: 0.5rem;
}

/* ─── Form elements ──────────────────────────────────────────────────────── */
.cm-form-row[b-xjsmcx1kco] {
    display: flex;
    gap: 0.75rem; /* tighter on mobile */
    margin-bottom: 0.875rem;
    flex-wrap: wrap;
}

@media (min-width: 640px) {
    .cm-form-row[b-xjsmcx1kco] { gap: 1rem; }
}

.cm-field[b-xjsmcx1kco]        { flex: 1; min-width: 0; } /* full width on mobile */
.cm-field-sm[b-xjsmcx1kco]     { flex: 0 1 100%; }

@media (min-width: 640px) {
    .cm-field[b-xjsmcx1kco]        { min-width: 180px; }
    .cm-field-sm[b-xjsmcx1kco]     { min-width: 140px; }
}

.cm-label[b-xjsmcx1kco] {
    display: block;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--color-neutral-600);
    margin-bottom: 0.35rem;
}

.cm-label-hint[b-xjsmcx1kco] {
    font-weight: 400;
    color: var(--color-neutral-400);
}

.cm-input[b-xjsmcx1kco], .cm-select[b-xjsmcx1kco] {
    width: 100%;
    padding: 0.45rem 0.65rem;
    border: 1px solid var(--color-neutral-300);
    border-radius: 0.375rem;
    font-size: 0.85rem;
    color: var(--color-neutral-800);
    background: #fff;
    outline: none;
    transition: border-color 0.15s;
    box-sizing: border-box;
}

.cm-input:focus[b-xjsmcx1kco], .cm-select:focus[b-xjsmcx1kco] {
    border-color: var(--color-primary-400, #818cf8);
    box-shadow: 0 0 0 2px rgba(99,102,241,0.1);
}

.cm-radio-row[b-xjsmcx1kco] {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-top: 0.25rem;
}

.cm-radio-label[b-xjsmcx1kco] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.35rem 0.75rem;
    border: 1px solid var(--color-neutral-300);
    border-radius: 0.375rem;
    font-size: 0.8rem;
    color: var(--color-neutral-600);
    cursor: pointer;
    transition: all 0.15s;
}

.cm-radio-label input[b-xjsmcx1kco] { display: none; }
.cm-radio-active[b-xjsmcx1kco] {
    border-color: var(--color-primary-400, #818cf8);
    background: var(--color-primary-50, #eef2ff);
    color: var(--color-primary-700, #4338ca);
    font-weight: 600;
}

/* ─── Chapter chips ──────────────────────────────────────────────────────── */
.cm-chapter-section[b-xjsmcx1kco] { margin-bottom: 1rem; }

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

.cm-chapter-actions[b-xjsmcx1kco] { display: flex; gap: 0.5rem; }

.cm-chapter-grid[b-xjsmcx1kco] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.cm-chapter-chip[b-xjsmcx1kco] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.35rem 0.7rem;
    border: 1px solid var(--color-neutral-200);
    border-radius: 1rem;
    background: var(--color-neutral-50);
    font-size: 0.78rem;
    color: var(--color-neutral-700);
    cursor: pointer;
    transition: all 0.15s;
}

.cm-chapter-chip:hover[b-xjsmcx1kco] { border-color: var(--color-primary-300); }

.cm-chip-selected[b-xjsmcx1kco] {
    border-color: var(--color-primary-400, #818cf8);
    background: var(--color-primary-50, #eef2ff);
    color: var(--color-primary-700, #4338ca);
    font-weight: 600;
}

.cm-chip-count[b-xjsmcx1kco] {
    font-size: 0.65rem;
    background: var(--color-neutral-200);
    border-radius: 0.75rem;
    padding: 0 0.4rem;
    color: var(--color-neutral-500);
}

.cm-chip-selected .cm-chip-count[b-xjsmcx1kco] {
    background: var(--color-primary-100, #e0e7ff);
    color: var(--color-primary-600, #4f46e5);
}

/* ─── Template grid ──────────────────────────────────────────────────────── */
.cm-template-grid[b-xjsmcx1kco] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); /* smaller for mobile */
    gap: 0.625rem; /* tighter spacing */
    margin-bottom: 1.25rem;
}

@media (min-width: 768px) {
    .cm-template-grid[b-xjsmcx1kco] { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 0.75rem; }
}

.cm-template-card[b-xjsmcx1kco] {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    padding: 1rem;
    border: 2px solid var(--color-neutral-200);
    border-radius: 0.625rem;
    background: #fff;
    text-align: left;
    cursor: pointer;
    transition: all 0.15s;
}

.cm-template-card:hover[b-xjsmcx1kco] { border-color: var(--color-primary-300); box-shadow: 0 2px 8px rgba(99,102,241,0.12); }

.cm-template-active[b-xjsmcx1kco] {
    border-color: var(--color-primary-500, #6366f1) !important;
    background: var(--color-primary-50, #eef2ff);
}

.cm-template-loading[b-xjsmcx1kco] {
    opacity: 0.75;
    cursor: wait;
}

.cm-template-check[b-xjsmcx1kco] {
    position: absolute;
    top: 0.6rem;
    right: 0.6rem;
    color: var(--color-primary-500, #6366f1);
    font-size: 1rem;
}

.cm-template-type[b-xjsmcx1kco] {
    font-size: 0.6rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-primary-500, #6366f1);
}

.cm-template-name[b-xjsmcx1kco] {
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--color-neutral-900);
    line-height: 1.3;
}

.cm-template-meta[b-xjsmcx1kco] {
    display: flex;
    gap: 0.75rem;
    font-size: 0.72rem;
    color: var(--color-neutral-500);
}

.cm-template-types-row[b-xjsmcx1kco] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    margin-top: 0.15rem;
}

.cm-type-pill[b-xjsmcx1kco] {
    font-size: 0.62rem;
    padding: 0.1rem 0.45rem;
    background: var(--color-neutral-100);
    border-radius: 0.75rem;
    color: var(--color-neutral-600);
    font-weight: 500;
}

.cm-template-usage[b-xjsmcx1kco] {
    font-size: 0.65rem;
    color: var(--color-neutral-400);
    margin-top: 0.15rem;
}

/* ─── Section step ───────────────────────────────────────────────────────── */
.cm-sec-header[b-xjsmcx1kco] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem; /* tighter on mobile */
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--color-neutral-100);
    background: #fff;
    flex-shrink: 0;
    flex-wrap: wrap;
}

@media (min-width: 640px) {
    .cm-sec-header[b-xjsmcx1kco] { gap: 1rem; padding: 0.875rem 1.25rem; }
}

.cm-sec-info[b-xjsmcx1kco] { min-width: 0; }

.cm-sec-name[b-xjsmcx1kco] {
    font-size: 1rem; /* slightly smaller on mobile */
    font-weight: 800;
    color: #111827;
    margin-bottom: 0.35rem;
    line-height: 1.2;
}

@media (min-width: 640px) {
    .cm-sec-name[b-xjsmcx1kco] { font-size: 1.25rem; }
}

.cm-sec-meta[b-xjsmcx1kco] {
    display: flex;
    gap: 0.4rem;
    flex-wrap: wrap;
    align-items: center;
}

.cm-sec-instructions[b-xjsmcx1kco] {
    font-size: 0.8rem;
    color: var(--color-neutral-500);
    margin-top: 0.35rem;
    font-style: italic;
}

.cm-sec-complete-badge[b-xjsmcx1kco] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.35rem 0.875rem;
    border-radius: 999px;
    background: #dcfce7;
    color: #15803d;
    font-size: 0.78rem;
    font-weight: 700;
    white-space: nowrap;
    flex-shrink: 0;
}

.cm-badge-type[b-xjsmcx1kco], .cm-badge-marks[b-xjsmcx1kco], .cm-badge-diff[b-xjsmcx1kco] {
    display: inline-flex;
    align-items: center;
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 600;
}

.cm-badge-type[b-xjsmcx1kco]  { background: var(--color-primary-50,  #eef2ff); color: var(--color-primary-700, #4338ca); }
.cm-badge-marks[b-xjsmcx1kco] { background: var(--color-neutral-100); color: var(--color-neutral-600); }
.cm-badge-diff[b-xjsmcx1kco]  { background: var(--color-warning-50, #fffbeb); color: var(--color-warning-700, #b45309); }

.cm-progress-block[b-xjsmcx1kco] { min-width: 140px; } /* smaller on mobile */

@media (min-width: 768px) {
    .cm-progress-block[b-xjsmcx1kco] { min-width: 180px; }
}

@media (max-width: 480px) {
    .cm-progress-block[b-xjsmcx1kco] { width: 100%; display: flex; flex-direction: column; gap: 0.25rem; }
    .cm-sec-header[b-xjsmcx1kco] { flex-direction: column; align-items: stretch; }
}

.cm-progress-label[b-xjsmcx1kco] {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--color-neutral-600);
    margin-bottom: 0.45rem;
    text-align: right;
}

.cm-prog-done[b-xjsmcx1kco] { color: var(--color-success-600, #16a34a) !important; }

.cm-progress-bar[b-xjsmcx1kco] {
    height: 7px;
    background: var(--color-neutral-200);
    border-radius: 4px;
    overflow: hidden;
}

.cm-progress-fill[b-xjsmcx1kco] {
    height: 100%;
    background: var(--color-primary-400, #818cf8);
    border-radius: 4px;
    transition: width 0.4s ease;
}

.cm-prog-fill-done[b-xjsmcx1kco] { background: var(--color-success-500, #22c55e); }

/* ─── Question table ─────────────────────────────────────────────────────── */
.cm-q-table[b-xjsmcx1kco] { width: 100%; }

.cm-q-header[b-xjsmcx1kco], .cm-q-row[b-xjsmcx1kco] {
    display: grid;
    /* pick | question | chapter 120px | diff 110px | marks 70px | source 120px */
    grid-template-columns: 3.25rem 1fr 120px 110px 70px 120px;
    align-items: center;
    gap: 0;
    border-bottom: 1px solid #EEF1F4;
    padding: 0;
}

/* Smaller columns on tablets */
@media (max-width: 1024px) {
    .cm-q-header[b-xjsmcx1kco], .cm-q-row[b-xjsmcx1kco] {
        grid-template-columns: 3rem 1fr 100px 90px 60px 100px;
    }
}

/* On small screens: horizontal scroll wrapper */
@media (max-width: 768px) {
    .cm-q-header[b-xjsmcx1kco], .cm-q-row[b-xjsmcx1kco] {
        grid-template-columns: 3rem 1fr 90px 80px 55px 90px;
        font-size: 0.75rem !important;
    }
}

.cm-q-header[b-xjsmcx1kco] {
    background: #F7F8FA;
    padding: 0.5rem 1rem; /* tighter on mobile */
    font-size: 0.7rem;
    font-weight: 700;
    color: #6B7280;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    position: sticky;
    top: 0;
    z-index: 2;
    border-bottom: 2px solid #E5E7EB;
}

@media (min-width: 640px) {
    .cm-q-header[b-xjsmcx1kco] { padding-left: 1.25rem; padding-right: 1.25rem; }
}

.cm-q-row[b-xjsmcx1kco] {
    padding: 0.75rem 1rem; /* tighter on mobile */
    min-height: 52px;
    cursor: pointer;
    transition: background 0.12s, border-left-color 0.12s;
    border-left: 4px solid transparent;
    align-items: flex-start;
}

@media (min-width: 640px) {
    .cm-q-row[b-xjsmcx1kco] { padding-left: 1.25rem; padding-right: 1.25rem; min-height: 56px; }
}

/* Alternating row backgrounds for scannability */
.cm-q-row:nth-child(even)[b-xjsmcx1kco] { background: #FCFCFD; }
.cm-q-row:hover[b-xjsmcx1kco] { background: #F5FAF8 !important; border-left-color: #D1FAE5; }

/* Strong selected state — green left border + green background */
.cm-q-selected[b-xjsmcx1kco] {
    background: #ECFDF3 !important;
    border-left-color: #22C55E !important;
}

.cm-q-dimmed[b-xjsmcx1kco] { opacity: 0.38; pointer-events: none; }

.cm-q-col-pick[b-xjsmcx1kco], .cm-q-col-text[b-xjsmcx1kco], .cm-q-col-chapter[b-xjsmcx1kco],
.cm-q-col-diff[b-xjsmcx1kco], .cm-q-col-marks[b-xjsmcx1kco], .cm-q-col-source[b-xjsmcx1kco] {
    display: flex;
    align-items: center;
    padding: 0 0.5rem;
    font-size: 0.85rem;
    color: #4B5563;
    line-height: 1.5;
}

.cm-q-col-text[b-xjsmcx1kco] {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.25rem;
    padding: 0 0.625rem;
}

/* Typography hierarchy: category label → question text */
.cm-q-type-pill[b-xjsmcx1kco] {
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #9CA3AF;
    background: transparent;
    padding: 0;
    border-radius: 0;
    white-space: nowrap;
}

.cm-q-text[b-xjsmcx1kco] {
    font-size: 0.875rem;
    font-weight: 600;
    color: #111827;
    line-height: 1.55;
}

/* Right-align marks column */
.cm-q-col-marks[b-xjsmcx1kco] { justify-content: flex-end; font-weight: 700; color: #374151; }

/* Checkbox — 44x44 hit area wrapper */
.cm-q-col-pick[b-xjsmcx1kco] {
    justify-content: center;
}

.cm-checkbox[b-xjsmcx1kco] {
    width: 1.25rem;
    height: 1.25rem;
    border: 2px solid #D1D5DB;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.62rem;
    color: #fff;
    background: #fff;
    transition: all 0.15s cubic-bezier(0.4,0,0.2,1);
    flex-shrink: 0;
}

.cm-cb-checked[b-xjsmcx1kco] {
    border-color: #22C55E;
    background: #22C55E;
    box-shadow: 0 0 0 3px rgba(34,197,94,0.15);
}

/* ─── Difficulty badges ──────────────────────────────────────────────────── */
.cm-diff-badge[b-xjsmcx1kco] {
    display: inline-flex;
    padding: 0.25rem 0.625rem;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    white-space: nowrap;
}

.cm-diff-easy[b-xjsmcx1kco]   { background: #D1FAE5; color: #065F46; }
.cm-diff-medium[b-xjsmcx1kco] { background: #FEF3C7; color: #92400E; }
.cm-diff-hard[b-xjsmcx1kco]   { background: #FEE2E2; color: #991B1B; }
.cm-badge-sm[b-xjsmcx1kco]    { font-size: 0.62rem; }

/* ─── Source badges ──────────────────────────────────────────────────────── */
.cm-src-badge[b-xjsmcx1kco] {
    font-size: 0.7rem;
    padding: 0.2rem 0.55rem;
    background: var(--color-neutral-100);
    border-radius: 999px;
    color: var(--color-neutral-500);
    font-weight: 500;
    white-space: nowrap;
}

/* ─── Load more / all loaded ─────────────────────────────────────────────── */
.cm-load-more-row[b-xjsmcx1kco] {
    display: flex;
    justify-content: center;
    padding: 1rem;
    border-top: 1px solid var(--color-neutral-100);
}

.cm-btn-load-more[b-xjsmcx1kco] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 1.25rem;
    border: 1px solid var(--color-neutral-300);
    border-radius: 0.375rem;
    background: #fff;
    font-size: 0.8rem;
    color: var(--color-neutral-600);
    cursor: pointer;
    transition: background 0.15s;
}

.cm-btn-load-more:hover:not(:disabled)[b-xjsmcx1kco] { background: var(--color-neutral-50); }
.cm-btn-load-more:disabled[b-xjsmcx1kco] { opacity: 0.5; cursor: not-allowed; }

.cm-all-loaded[b-xjsmcx1kco] {
    text-align: center;
    font-size: 0.72rem;
    color: var(--color-neutral-400);
    padding: 0.75rem;
    border-top: 1px solid var(--color-neutral-100);
}

/* ─── Review ─────────────────────────────────────────────────────────────── */
.cm-review-strip[b-xjsmcx1kco] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 0;
    border: 1px solid var(--color-neutral-100);
    border-radius: 0.5rem;
    overflow: hidden;
    margin-bottom: 1.5rem;
}

.cm-review-item[b-xjsmcx1kco] {
    display: flex;
    flex-direction: column;
    padding: 0.65rem 0.875rem;
    border-right: 1px solid var(--color-neutral-100);
    border-bottom: 1px solid var(--color-neutral-100);
}

.cm-ri-label[b-xjsmcx1kco] {
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-neutral-400);
    margin-bottom: 0.2rem;
}

.cm-ri-value[b-xjsmcx1kco] {
    font-size: 0.825rem;
    font-weight: 600;
    color: var(--color-neutral-800);
}

.cm-review-section[b-xjsmcx1kco] {
    border: 1px solid var(--color-neutral-200);
    border-radius: 0.5rem;
    overflow: hidden;
    margin-bottom: 1rem;
}

.cm-review-sec-header[b-xjsmcx1kco] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.7rem 1rem;
    background: var(--color-neutral-50);
    border-bottom: 1px solid var(--color-neutral-200);
    gap: 1rem;
    flex-wrap: wrap;
}

.cm-review-sec-name[b-xjsmcx1kco] {
    font-weight: 700;
    font-size: 0.85rem;
    color: var(--color-neutral-800);
    margin-right: 0.5rem;
}

.cm-review-sec-meta[b-xjsmcx1kco] {
    font-size: 0.75rem;
    color: var(--color-neutral-500);
}

.cm-review-sec-status[b-xjsmcx1kco] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.cm-status-ok[b-xjsmcx1kco]   { font-size: 0.75rem; color: var(--color-success-600, #16a34a); display: flex; align-items: center; gap: 0.3rem; }
.cm-status-warn[b-xjsmcx1kco] { font-size: 0.75rem; color: var(--color-warning-600, #d97706); display: flex; align-items: center; gap: 0.3rem; }

.cm-review-q-row[b-xjsmcx1kco] {
    display: grid;
    grid-template-columns: 2rem 1fr auto auto auto;
    align-items: center;
    gap: 0.625rem;
    padding: 0.6rem 1rem;
    border-bottom: 1px solid var(--color-neutral-50);
    font-size: 0.8rem;
}
.cm-review-q-row:hover[b-xjsmcx1kco] { background: #F9FAFB; }

.cm-review-q-num[b-xjsmcx1kco] {
    font-size: 0.72rem;
    font-weight: 700;
    color: #6B7280;
    background: #F3F4F6;
    border-radius: 50%;
    width: 1.6rem;
    height: 1.6rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.cm-review-q-text[b-xjsmcx1kco] { color: var(--color-neutral-800); line-height: 1.5; }
.cm-review-q-type[b-xjsmcx1kco] { font-size: 0.65rem; color: var(--color-neutral-400); white-space: nowrap; }

.cm-review-replace-btn[b-xjsmcx1kco] {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.25rem 0.6rem;
    font-size: 0.7rem;
    font-weight: 600;
    color: #6366F1;
    background: #EEF2FF;
    border: 1px solid #C7D2FE;
    border-radius: 6px;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.12s, color 0.12s;
}
.cm-review-replace-btn:hover[b-xjsmcx1kco] {
    background: #E0E7FF;
    color: #4338CA;
    border-color: #A5B4FC;
}

.cm-review-empty[b-xjsmcx1kco] {
    padding: 0.75rem 1rem;
    font-size: 0.78rem;
    color: var(--color-neutral-400);
    font-style: italic;
}

/* ─── Navigation buttons ─────────────────────────────────────────────────── */
.cm-step-nav[b-xjsmcx1kco] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem;
    border-top: 1px solid var(--color-neutral-100);
    margin-top: 1.5rem;
    gap: 0.75rem;
    flex-shrink: 0;
}

.cm-section-card .cm-step-nav[b-xjsmcx1kco] {
    margin-top: 0;
    position: sticky;
    bottom: 0;
    background: #fff;
    z-index: 10;
    box-shadow: 0 -2px 8px rgba(0,0,0,0.07);
}

/* ─── Section workspace (split layout) ──────────────────────────────────── */
.cm-filter-bar[b-xjsmcx1kco] {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.625rem 1.25rem;
    border-bottom: 1px solid #E5E7EB;
    background: #FAFBFC;
    flex-wrap: wrap;
    flex-shrink: 0;
    row-gap: 0.5rem;
}

.cm-search-wrap[b-xjsmcx1kco] {
    position: relative;
    flex: 1;
    min-width: 200px;
}

.cm-filter-chips[b-xjsmcx1kco] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: nowrap;
    flex-shrink: 0;
}

.cm-filter-label[b-xjsmcx1kco] {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--color-neutral-500);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    white-space: nowrap;
}

.cm-filter-chip[b-xjsmcx1kco] {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.75rem;
    border: 1.5px solid var(--color-neutral-200);
    border-radius: 999px;
    background: #fff;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--color-neutral-500);
    cursor: pointer;
    transition: all 0.12s;
    white-space: nowrap;
    line-height: 1.4;
}

.cm-filter-chip:hover[b-xjsmcx1kco] { border-color: var(--color-neutral-400); color: var(--color-neutral-700); }

.cm-filter-chip-active[b-xjsmcx1kco] {
    border-color: var(--color-primary-500, #6366f1);
    background: var(--color-primary-50, #eef2ff);
    color: var(--color-primary-700, #4338ca);
}

/* Section workspace: question list (left) + selected panel (right) */
.cm-section-workspace[b-xjsmcx1kco] {
    display: flex;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

.cm-q-panel[b-xjsmcx1kco] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-right: 1px solid var(--color-neutral-100);
}

/* Scrollable question area inside cm-q-panel */
.cm-q-scroll-area[b-xjsmcx1kco] {
    flex: 1;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--color-neutral-200) transparent;
}

/* ─── Selected questions panel ───────────────────────────────────────────── */
.cm-selected-panel[b-xjsmcx1kco] {
    width: 320px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    background: #FFFFFF;
    border-left: 1px solid #E5E7EB;
    overflow: hidden;
    box-shadow: -2px 0 8px rgba(0,0,0,0.04);
}

.cm-sel-header[b-xjsmcx1kco] {
    padding: 1.25rem 1.25rem 1rem;
    border-bottom: 1px solid #E5E7EB;
    background: #fff;
    flex-shrink: 0;
}

.cm-sel-count-big[b-xjsmcx1kco] {
    font-size: 2.5rem;
    font-weight: 800;
    color: #111827;
    line-height: 1;
    margin-bottom: 0.15rem;
    font-variant-numeric: tabular-nums;
    transition: color 0.25s;
}

.cm-sel-count-big.cm-sel-complete[b-xjsmcx1kco] { color: #16A34A; }

.cm-sel-of[b-xjsmcx1kco] {
    font-size: 1.4rem;
    font-weight: 600;
    color: #9CA3AF;
}

.cm-sel-count-label[b-xjsmcx1kco] {
    font-size: 0.7rem;
    font-weight: 700;
    color: #6B7280;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 0.6rem;
}

.cm-sel-marks-row[b-xjsmcx1kco] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.75rem;
    color: #6B7280;
    margin-bottom: 0.6rem;
    padding: 0.4rem 0.6rem;
    background: #F9FAFB;
    border-radius: 0.375rem;
    border: 1px solid #F3F4F6;
}

.cm-sel-marks-val[b-xjsmcx1kco] {
    font-weight: 800;
    color: #111827;
    font-size: 0.88rem;
}

.cm-sel-list[b-xjsmcx1kco] {
    flex: 1;
    overflow-y: auto;
    padding: 0.25rem 0;
    scrollbar-width: thin;
    scrollbar-color: #E5E7EB transparent;
}

.cm-sel-item[b-xjsmcx1kco] {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 0.65rem 1rem;
    border-bottom: 1px solid #F3F4F6;
    transition: background 0.1s;
}

.cm-sel-item:hover[b-xjsmcx1kco] { background: #F9FAFB; }

.cm-sel-num[b-xjsmcx1kco] {
    font-size: 0.68rem;
    font-weight: 700;
    color: #9CA3AF;
    flex-shrink: 0;
    margin-top: 0.15rem;
    min-width: 1.25rem;
}

.cm-sel-q-text[b-xjsmcx1kco] {
    flex: 1;
    font-size: 0.8rem;
    font-weight: 500;
    color: #374151;
    line-height: 1.5;
    max-height: 3rem;
    overflow: hidden;
}

.cm-sel-remove[b-xjsmcx1kco] {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    border: none;
    border-radius: 50%;
    background: #F3F4F6;
    color: #9CA3AF;
    font-size: 0.6rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.12s, color 0.12s;
    margin-top: 0.1rem;
}

.cm-sel-remove:hover[b-xjsmcx1kco] { background: #FEE2E2; color: #DC2626; }

.cm-sel-empty[b-xjsmcx1kco] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    color: #9CA3AF;
    font-size: 0.82rem;
    text-align: center;
    padding: 2rem 1rem;
    line-height: 1.6;
}

.cm-sel-empty i[b-xjsmcx1kco] { font-size: 1.75rem; opacity: 0.4; }

.cm-step-nav-publish[b-xjsmcx1kco] { margin-top: 1rem; }

.cm-nav-right[b-xjsmcx1kco] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.cm-btn-primary[b-xjsmcx1kco] {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.625rem 1.25rem;
    border: none;
    border-radius: 0.5rem;
    background: var(--color-primary-600, #4f46e5);
    color: #fff;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s;
    min-height: 40px;
}

.cm-btn-primary:hover:not(:disabled)[b-xjsmcx1kco] { background: var(--color-primary-700, #4338ca); }
.cm-btn-primary:disabled[b-xjsmcx1kco] { opacity: 0.5; cursor: not-allowed; }

.cm-btn-secondary[b-xjsmcx1kco] {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.625rem 1.125rem;
    border: 1.5px solid var(--color-neutral-300);
    border-radius: 0.5rem;
    background: #fff;
    color: var(--color-neutral-600);
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
    min-height: 40px;
}

.cm-btn-secondary:hover[b-xjsmcx1kco] { background: var(--color-neutral-50); border-color: var(--color-neutral-400); }

.cm-btn-publish[b-xjsmcx1kco] {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.625rem 1.5rem;
    border: none;
    border-radius: 0.5rem;
    background: var(--color-success-600, #16a34a);
    color: #fff;
    font-size: 0.875rem;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.15s;
    min-height: 40px;
}

.cm-btn-publish:hover:not(:disabled)[b-xjsmcx1kco] { background: var(--color-success-700, #15803d); }
.cm-btn-publish:disabled[b-xjsmcx1kco] { opacity: 0.5; cursor: not-allowed; }

.cm-btn-text[b-xjsmcx1kco] {
    background: none;
    border: none;
    color: var(--color-primary-600, #4f46e5);
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    padding: 0.1rem 0.3rem;
}

.cm-btn-text:hover[b-xjsmcx1kco] { text-decoration: underline; }

/* ─── Search bar ─────────────────────────────────────────────────────────── */
.cm-search-bar[b-xjsmcx1kco] {
    position: relative;
    margin-bottom: 1rem;
}

.cm-search-bar-sm[b-xjsmcx1kco] {
    padding: 0;
    margin-bottom: 0;
}

.cm-search-icon[b-xjsmcx1kco] {
    position: absolute;
    left: 0.875rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--color-neutral-400);
    font-size: 0.9rem;
    pointer-events: none;
}

.cm-search-bar-sm .cm-search-icon[b-xjsmcx1kco] { left: 0.875rem; }

.cm-search-input[b-xjsmcx1kco] {
    width: 100%;
    padding: 0 2.5rem;
    height: 44px;
    border: 1px solid var(--color-neutral-300);
    border-radius: 0.5rem;
    font-size: 0.9rem;
    color: var(--color-neutral-800);
    background: #fff;
    outline: none;
    transition: border-color 0.15s;
    box-sizing: border-box;
}

.cm-search-input:focus[b-xjsmcx1kco] {
    border-color: var(--color-primary-400, #818cf8);
    box-shadow: 0 0 0 2px rgba(99,102,241,0.1);
}

.cm-search-clear[b-xjsmcx1kco] {
    position: absolute;
    right: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: var(--color-neutral-400);
    cursor: pointer;
    padding: 0.2rem;
}

/* ─── Misc helpers ───────────────────────────────────────────────────────── */
.cm-spinner-row[b-xjsmcx1kco] {
    padding: 2rem;
    text-align: center;
    color: var(--color-neutral-400);
    font-size: 0.85rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.cm-empty-hint[b-xjsmcx1kco] {
    padding: 2.5rem 1.5rem;
    text-align: center;
    color: var(--color-neutral-400);
    font-size: 0.85rem;
    line-height: 1.7;
}

.cm-hint-text[b-xjsmcx1kco] {
    font-size: 0.82rem;
    color: var(--color-neutral-500);
    margin-bottom: 1.25rem;
    line-height: 1.6;
}

.cm-warn-text[b-xjsmcx1kco] {
    font-size: 0.8rem;
    color: var(--color-warning-600, #d97706);
    display: flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.35rem 0.75rem;
    background: #fffbeb;
    border-radius: 0.375rem;
    border: 1px solid #fde68a;
}

/* ─── Toast ──────────────────────────────────────────────────────────────── */
.cm-toast[b-xjsmcx1kco] {
    position: fixed;
    bottom: 1.5rem;
    left: 50%;
    transform: translateX(-50%);
    padding: 0.65rem 1.25rem;
    border-radius: 0.5rem;
    font-size: 0.83rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    box-shadow: 0 4px 16px rgba(0,0,0,0.15);
    cursor: pointer;
    z-index: 1000;
    white-space: nowrap;
    animation: cm-slide-up-b-xjsmcx1kco 0.25s ease;
}

.cm-toast-ok[b-xjsmcx1kco]    { background: var(--color-success-600, #16a34a); color: #fff; }
.cm-toast-error[b-xjsmcx1kco] { background: var(--color-danger-600, #dc2626); color: #fff; }

@keyframes cm-slide-up-b-xjsmcx1kco {
    from { opacity: 0; transform: translateX(-50%) translateY(1rem); }
    to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}

/* ─── Responsive ─────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
    .cm-selected-panel[b-xjsmcx1kco] { width: 260px; }
}

@media (max-width: 768px) {
    .cm-content[b-xjsmcx1kco] { padding: 0.75rem; }
    .cm-card[b-xjsmcx1kco]    { padding: 1rem; }
    .cm-header[b-xjsmcx1kco]  { padding: 0.75rem 1rem; }
    .cm-stepper[b-xjsmcx1kco] { padding: 0 0.75rem; }

    .cm-section-workspace[b-xjsmcx1kco] { flex-direction: column; }
    .cm-selected-panel[b-xjsmcx1kco] {
        width: 100%;
        max-height: 220px;
        border-right: none;
        border-top: 1px solid var(--color-neutral-100);
        order: -1; /* show above question list on mobile */
    }
    .cm-q-panel[b-xjsmcx1kco] { border-right: none; }
    .cm-filter-bar[b-xjsmcx1kco] { gap: 0.5rem; }
    .cm-filter-chips[b-xjsmcx1kco] { gap: 0.25rem; }

    .cm-q-header[b-xjsmcx1kco],
    .cm-q-row[b-xjsmcx1kco] {
        grid-template-columns: 3rem 1fr 5rem;
    }

    .cm-q-col-chapter[b-xjsmcx1kco],
    .cm-q-col-diff[b-xjsmcx1kco],
    .cm-q-col-source[b-xjsmcx1kco] { display: none; }

    .cm-q-col-marks[b-xjsmcx1kco] { font-weight: 700; }

    .cm-review-strip[b-xjsmcx1kco] {
        grid-template-columns: 1fr 1fr;
    }
}
/* /Pages/Teacher/Exams/Details.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════
   PDF Generation Overlay — same pattern as AdmissionForm
   ═══════════════════════════════════════════════════ */

.pdf-gen-overlay[b-ihqfc6z2ug] {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.72);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    animation: pdf-overlay-in-b-ihqfc6z2ug 0.25s ease;
}

@keyframes pdf-overlay-in-b-ihqfc6z2ug {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.pdf-gen-card[b-ihqfc6z2ug] {
    background: #fff;
    border-radius: 1.25rem;
    padding: 2.5rem 3rem;
    text-align: center;
    width: min(420px, 90vw);
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.30);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.25rem;
    animation: pdf-card-in-b-ihqfc6z2ug 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes pdf-card-in-b-ihqfc6z2ug {
    from { opacity: 0; transform: scale(0.88) translateY(20px); }
    to   { opacity: 1; transform: scale(1)    translateY(0);    }
}

.pdf-gen-icon-wrap[b-ihqfc6z2ug] {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: pdf-icon-pulse-b-ihqfc6z2ug 2s ease-in-out infinite;
}

.pdf-gen-icon[b-ihqfc6z2ug] {
    font-size: 2.1rem;
    color: #fff;
}

@keyframes pdf-icon-pulse-b-ihqfc6z2ug {
    0%,  100% { transform: scale(1);    box-shadow: 0 0 0 0    rgba(239, 68, 68, 0.45); }
    50%        { transform: scale(1.07); box-shadow: 0 0 0 14px rgba(239, 68, 68, 0);    }
}

.pdf-gen-title[b-ihqfc6z2ug] {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--color-text-primary, #0f172a);
    margin: 0;
    letter-spacing: -0.01em;
}

/* Step row — re-animates each time _pdfStepIndex changes via key= */
.pdf-gen-step[b-ihqfc6z2ug] {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    font-size: 0.9rem;
    color: var(--color-primary-600, #2563eb);
    font-weight: 500;
    min-height: 1.6rem;
    animation: pdf-step-in-b-ihqfc6z2ug 0.45s ease;
}

.pdf-gen-step i[b-ihqfc6z2ug] {
    font-size: 0.95rem;
    flex-shrink: 0;
}

@keyframes pdf-step-in-b-ihqfc6z2ug {
    from { opacity: 0; transform: translateY(7px); }
    to   { opacity: 1; transform: translateY(0);   }
}

.pdf-gen-progress-track[b-ihqfc6z2ug] {
    width: 100%;
    height: 8px;
    background: var(--color-border, #e2e8f0);
    border-radius: 999px;
    overflow: hidden;
}

.pdf-gen-progress-bar[b-ihqfc6z2ug] {
    height: 100%;
    background: linear-gradient(90deg, #3b82f6 0%, #6366f1 100%);
    border-radius: 999px;
    transition: width 0.65s cubic-bezier(0.4, 0, 0.2, 1);
}

.pdf-gen-hint[b-ihqfc6z2ug] {
    font-size: 0.78rem;
    color: var(--color-text-muted, #94a3b8);
    margin: 0;
}

/* ── Action bar layout ───────────────────────────────────────────── */

.action-group[b-ihqfc6z2ug] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    flex-wrap: nowrap;
}

.action-divider[b-ihqfc6z2ug] {
    width: 1px;
    height: 28px;
    background: var(--color-neutral-200);
    flex-shrink: 0;
    margin: 0 4px;
}

/* Ghost-style button — consistent across all non-colored actions */
.action-btn[b-ihqfc6z2ug] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    font-size: 0.825rem;
    font-weight: 600;
    border-radius: 8px;
    border: 1.5px solid #d1d5db;
    background: #fff;
    color: #374151;
    cursor: pointer;
    white-space: nowrap;
    line-height: 1.25;
    transition: background 0.15s, border-color 0.15s, color 0.15s, box-shadow 0.15s;
}
.action-btn:hover[b-ihqfc6z2ug] {
    background: var(--color-primary-50, #f0fdf9);
    border-color: var(--color-primary-400, #4A9B8E);
    color: var(--color-primary-700, #2D7var(--color-teal-500)E);
    box-shadow: 0 2px 6px rgba(74,155,142,.12);
}
.action-btn i[b-ihqfc6z2ug] { font-size: 0.8rem; }

/* Danger variant — delete button */
.action-btn--danger[b-ihqfc6z2ug] {
    color: #dc2626;
    border-color: #fca5a5;
}
.action-btn--danger:hover[b-ihqfc6z2ug] {
    background: #fef2f2;
    border-color: #dc2626;
    color: #b91c1c;
    box-shadow: 0 2px 6px rgba(220,38,38,.12);
}

/* Publish button — distinct green gradient */
.btn-publish[b-ihqfc6z2ug] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 18px;
    font-size: 0.875rem;
    font-weight: 700;
    border-radius: 8px;
    border: none;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s, transform 0.1s, box-shadow 0.15s;
    background: linear-gradient(135deg, #059669 0%, #047857 100%);
    color: #fff;
    box-shadow: 0 2px 8px rgba(5,150,105,.25);
}
.btn-publish:hover[b-ihqfc6z2ug] {
    background: linear-gradient(135deg, #047857 0%, #065f46 100%);
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(5,150,105,.35);
}

/* ── PDF download pill group ─────────────────────────────────── */
.pdf-btn-group[b-ihqfc6z2ug] {
    display: inline-flex;
    align-items: stretch;
    border: 1.5px solid #d1d5db;
    border-radius: 8px;
    overflow: hidden;
    flex-wrap: nowrap;
}

.pdf-layout-select[b-ihqfc6z2ug] {
    font-size: 0.8rem;
    font-weight: 500;
    padding: 0 10px;
    height: 38px;
    border: none;
    border-right: 1.5px solid #d1d5db;
    background: #f9fafb;
    color: #374151;
    cursor: pointer;
    transition: background 0.15s;
    appearance: auto;
    min-width: 130px;
}
.pdf-layout-select:hover[b-ihqfc6z2ug]  { background: #f3f4f6; }
.pdf-layout-select:focus[b-ihqfc6z2ug]   { outline: 2px solid var(--color-primary-400); outline-offset: -2px; }

/* The two PDF download buttons sit flush inside the pill */
.pdf-dl-btn[b-ihqfc6z2ug] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 38px;
    padding: 0 14px;
    font-size: 0.82rem;
    font-weight: 700;
    border: none;
    cursor: pointer;
    white-space: nowrap;
    transition: filter 0.15s;
    color: #fff;
}
.pdf-dl-btn--paper[b-ihqfc6z2ug] { background: #16a34a; }
.pdf-dl-btn--key[b-ihqfc6z2ug] {
    background: var(--color-warning-600);
    border-left: 1px solid var(--color-warning-800);
}
.pdf-dl-btn--paper:hover[b-ihqfc6z2ug] { filter: brightness(0.9); }
.pdf-dl-btn--key:hover[b-ihqfc6z2ug]   { filter: brightness(0.9); }

/* ══════════════════════════════════════════════════
   OVERVIEW TAB — ed-* classes
   ══════════════════════════════════════════════════ */

/* ── Quick Stats Strip ── */
.ed-info-strip[b-ihqfc6z2ug] {
    display: flex;
    align-items: center;
    gap: 0;
    background: #fff;
    border: 1.5px solid #e5e7eb;
    border-radius: 10px;
    padding: 12px 20px;
    margin-bottom: 16px;
    overflow-x: auto;
    flex-wrap: nowrap;
    box-shadow: 0 1px 4px rgba(0,0,0,.04);
}

.ed-stat[b-ihqfc6z2ug] {
    display: flex;
    align-items: center;
    gap: 7px;
    white-space: nowrap;
    padding: 0 16px;
}
.ed-stat:first-child[b-ihqfc6z2ug] { padding-left: 0; }
.ed-stat i[b-ihqfc6z2ug] {
    font-size: 0.8rem;
    color: var(--color-primary-500, #4A9B8E);
}
.ed-stat-lbl[b-ihqfc6z2ug] {
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #9ca3af;
}
.ed-stat strong[b-ihqfc6z2ug] {
    font-size: 0.88rem;
    font-weight: 700;
    color: #111827;
}
.ed-stat-sep[b-ihqfc6z2ug] {
    width: 1px;
    height: 26px;
    background: #e5e7eb;
    flex-shrink: 0;
}

/* ── 2-column grid ── */
.ed-overview-grid[b-ihqfc6z2ug] {
    display: grid;
    grid-template-columns: 1fr 290px;
    gap: 16px;
    align-items: start;
}
@media (max-width: 1100px) {
    .ed-overview-grid[b-ihqfc6z2ug] { grid-template-columns: 1fr; }
}

/* ── Sections column ── */
.ed-sections-col[b-ihqfc6z2ug] { display: flex; flex-direction: column; gap: 0; }
.ed-sec-header-row[b-ihqfc6z2ug] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 12px;
}
.ed-sec-heading[b-ihqfc6z2ug] {
    font-size: 1rem;
    font-weight: 700;
    color: #111827;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 7px;
}
.ed-sec-heading i[b-ihqfc6z2ug] { color: var(--color-primary-500, #4A9B8E); font-size: 0.9rem; }
.ed-sec-totals[b-ihqfc6z2ug] { font-size: 0.78rem; color: #9ca3af; font-weight: 500; }

/* ── Section card ── */
.ed-sec-card[b-ihqfc6z2ug] {
    background: #fff;
    border: 1.5px solid #e5e7eb;
    border-radius: 10px;
    margin-bottom: 10px;
    overflow: hidden;
    transition: box-shadow 0.15s, border-color 0.15s;
}
.ed-sec-card:hover[b-ihqfc6z2ug] { box-shadow: 0 2px 10px rgba(0,0,0,.07); }
.ed-sec-card--open[b-ihqfc6z2ug] {
    border-color: var(--color-primary-300, #7BC9BF);
    box-shadow: 0 2px 12px rgba(74,155,142,.12);
}

.ed-sec-card-head[b-ihqfc6z2ug] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    cursor: pointer;
    user-select: none;
    transition: background 0.15s;
}
.ed-sec-card-head:hover[b-ihqfc6z2ug] { background: #f9fafb; }
.ed-sec-card--open .ed-sec-card-head[b-ihqfc6z2ug] { background: #f0fdf9; }

.ed-sec-label[b-ihqfc6z2ug] {
    width: 34px;
    height: 34px;
    border-radius: 8px;
    background: linear-gradient(135deg, var(--color-primary-500, #4A9B8E) 0%, var(--color-primary-700, #2D7var(--color-teal-500)E) 100%);
    color: #fff;
    font-size: 0.85rem;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    letter-spacing: -0.03em;
}

.ed-sec-card-body[b-ihqfc6z2ug] { flex: 1; min-width: 0; }
.ed-sec-name[b-ihqfc6z2ug] {
    font-size: 0.92rem;
    font-weight: 700;
    color: #111827;
    display: block;
    margin-bottom: 5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ed-sec-chips[b-ihqfc6z2ug] {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}
.ed-type-chip[b-ihqfc6z2ug] {
    font-size: 0.68rem;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 999px;
    background: #eff6ff;
    color: #1d4ed8;
    border: 1px solid #bfdbfe;
    white-space: nowrap;
}
.ed-q-chip[b-ihqfc6z2ug], .ed-m-chip[b-ihqfc6z2ug], .ed-mq-chip[b-ihqfc6z2ug] {
    font-size: 0.68rem;
    font-weight: 600;
    padding: 2px 7px;
    border-radius: 999px;
    white-space: nowrap;
}
.ed-q-chip[b-ihqfc6z2ug] { background: #f0fdf4; color: #166534; border: 1px solid #bbf7d0; }
.ed-m-chip[b-ihqfc6z2ug] { background: #fefce8; color: #713f12; border: 1px solid #fde68a; }
.ed-mq-chip[b-ihqfc6z2ug] { background: #f5f3ff; color: #5b21b6; border: 1px solid #ddd6fe; }

.ed-expand-btn[b-ihqfc6z2ug] {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 1.5px solid #e5e7eb;
    background: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #6b7280;
    font-size: 0.78rem;
    flex-shrink: 0;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.ed-expand-btn:hover[b-ihqfc6z2ug] {
    background: var(--color-primary-50, #f0fdf9);
    border-color: var(--color-primary-400, #4A9B8E);
    color: var(--color-primary-700, #2D7var(--color-teal-500)E);
}

/* ── Collapsed question preview ── */
.ed-sec-preview[b-ihqfc6z2ug] {
    border-top: 1px solid #f3f4f6;
    padding: 10px 16px 12px;
    background: #fafafa;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.ed-preview-row[b-ihqfc6z2ug] {
    display: flex;
    align-items: baseline;
    gap: 8px;
}
.ed-preview-num[b-ihqfc6z2ug] {
    font-size: 0.72rem;
    font-weight: 700;
    color: #9ca3af;
    flex-shrink: 0;
    width: 18px;
}
.ed-preview-text[b-ihqfc6z2ug] {
    font-size: 0.78rem;
    color: #374151;
    flex: 1;
    line-height: 1.4;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
}
.ed-preview-marks[b-ihqfc6z2ug] {
    font-size: 0.68rem;
    font-weight: 600;
    color: #9ca3af;
    flex-shrink: 0;
    background: #f3f4f6;
    padding: 1px 6px;
    border-radius: 999px;
}
.ed-preview-more[b-ihqfc6z2ug] {
    font-size: 0.72rem;
    color: var(--color-primary-600, #2D7var(--color-teal-500)E);
    font-weight: 600;
    cursor: pointer;
    margin-top: 2px;
}

/* ── Expanded questions ── */
.ed-sec-questions[b-ihqfc6z2ug] {
    border-top: 1px solid #f3f4f6;
    padding: 12px 16px;
    background: #f5efe2;
}

/* ── Sidebar column ── */
.ed-sidebar-col[b-ihqfc6z2ug] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    position: sticky;
    top: 72px;
}
.ed-sb-card[b-ihqfc6z2ug] {
    background: #fff;
    border: 1.5px solid #e5e7eb;
    border-radius: 10px;
    padding: 14px 16px;
}
.ed-sb-card-head[b-ihqfc6z2ug] {
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #9ca3af;
    margin-bottom: 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid #f3f4f6;
}

/* Status big display */
.ed-status-big[b-ihqfc6z2ug] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 16px;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 10px;
}
.ed-status-big i[b-ihqfc6z2ug] { font-size: 0.9rem; }
.ed-status-draft[b-ihqfc6z2ug] { background: #f3f4f6; color: #374151; border: 1.5px solid #d1d5db; }
.ed-status-published[b-ihqfc6z2ug] { background: #dcfce7; color: #166534; border: 1.5px solid #86efac; }
.ed-status-active[b-ihqfc6z2ug] { background: #dbeafe; color: #1d4ed8; border: 1.5px solid #93c5fd; }
.ed-status-closed[b-ihqfc6z2ug], .ed-status-completed[b-ihqfc6z2ug] { background: #f3f4f6; color: #6b7280; border: 1.5px solid #e5e7eb; }
.ed-status-inactive[b-ihqfc6z2ug] { background: #fef3c7; color: #92400e; border: 1.5px solid #fde68a; }

/* Readiness hint */
.ed-readiness-hint[b-ihqfc6z2ug] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.78rem;
    font-weight: 600;
    padding: 7px 10px;
    border-radius: 6px;
    margin-bottom: 8px;
}
.ed-readiness-hint--ok[b-ihqfc6z2ug] { background: #f0fdf4; color: #166534; }
.ed-readiness-hint--warn[b-ihqfc6z2ug] { background: #fefce8; color: #713f12; }

/* Publish & Edit buttons */
.ed-publish-btn[b-ihqfc6z2ug] {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 10px 0;
    font-size: 0.88rem;
    font-weight: 700;
    border-radius: 8px;
    border: none;
    cursor: pointer;
    background: linear-gradient(135deg, #059669 0%, #047857 100%);
    color: #fff;
    box-shadow: 0 2px 8px rgba(5,150,105,.25);
    transition: filter 0.15s, transform 0.1s, box-shadow 0.15s;
    margin-bottom: 6px;
}
.ed-publish-btn:hover:not(:disabled)[b-ihqfc6z2ug] {
    filter: brightness(0.92);
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(5,150,105,.35);
}
.ed-publish-btn:disabled[b-ihqfc6z2ug] {
    opacity: 0.45;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}
.ed-edit-btn[b-ihqfc6z2ug] {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 8px 0;
    font-size: 0.82rem;
    font-weight: 600;
    border-radius: 8px;
    border: 1.5px solid #d1d5db;
    background: #fff;
    color: #374151;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}
.ed-edit-btn:hover[b-ihqfc6z2ug] {
    background: #f9fafb;
    border-color: #9ca3af;
}

/* Readiness checklist */
.ed-checklist[b-ihqfc6z2ug] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.ed-checklist li[b-ihqfc6z2ug] {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 0.78rem;
    font-weight: 500;
    line-height: 1.4;
}
.ed-checklist li i[b-ihqfc6z2ug] { font-size: 0.7rem; margin-top: 2px; flex-shrink: 0; }
.ed-chk-ok[b-ihqfc6z2ug] { color: #166534; }
.ed-chk-ok i[b-ihqfc6z2ug] { color: #059669; }
.ed-chk-fail[b-ihqfc6z2ug] { color: #b91c1c; }
.ed-chk-fail i[b-ihqfc6z2ug] { color: #dc2626; }
.ed-chk-warn[b-ihqfc6z2ug] { color: #92400e; }
.ed-chk-warn i[b-ihqfc6z2ug] { color: #d97706; }

/* Section breakdown bars */
.ed-breakdown-list[b-ihqfc6z2ug] {
    display: flex;
    flex-direction: column;
    gap: 7px;
    margin-bottom: 8px;
}
.ed-bd-row[b-ihqfc6z2ug] {
    display: flex;
    align-items: center;
    gap: 8px;
}
.ed-bd-lbl[b-ihqfc6z2ug] {
    width: 22px;
    font-size: 0.72rem;
    font-weight: 700;
    color: #6b7280;
    flex-shrink: 0;
    text-align: center;
}
.ed-bd-bar-wrap[b-ihqfc6z2ug] {
    flex: 1;
    height: 8px;
    background: #f3f4f6;
    border-radius: 999px;
    overflow: hidden;
}
.ed-bd-bar[b-ihqfc6z2ug] {
    height: 100%;
    background: linear-gradient(90deg, var(--color-primary-400, #7BC9BF) 0%, var(--color-primary-600, #2D7var(--color-teal-500)E) 100%);
    border-radius: 999px;
    min-width: 4px;
    transition: width 0.5s ease;
}
.ed-bd-val[b-ihqfc6z2ug] {
    font-size: 0.72rem;
    font-weight: 700;
    color: #374151;
    width: 36px;
    text-align: right;
    flex-shrink: 0;
}
.ed-bd-footer[b-ihqfc6z2ug] {
    display: flex;
    justify-content: space-between;
    font-size: 0.7rem;
    color: #9ca3af;
    font-weight: 500;
    padding-top: 6px;
    border-top: 1px solid #f3f4f6;
}

/* Instructions preview */
.ed-instr-text[b-ihqfc6z2ug] {
    font-size: 0.78rem;
    color: #374151;
    line-height: 1.6;
    white-space: pre-line;
}

/* Venue/platform info rows */
.ed-sb-info-row[b-ihqfc6z2ug] {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 0.78rem;
    color: #374151;
    margin-bottom: 6px;
}
.ed-sb-info-row i[b-ihqfc6z2ug] { color: var(--color-primary-500, #4A9B8E); font-size: 0.75rem; margin-top: 2px; flex-shrink: 0; }
.ed-sb-info-row a[b-ihqfc6z2ug] { color: var(--color-primary-600, #2D7var(--color-teal-500)E); font-weight: 600; text-decoration: none; }
.ed-sb-info-row a:hover[b-ihqfc6z2ug] { text-decoration: underline; }


/* -- Tabs ------------------------------------------------------- */
.tabs-container[b-ihqfc6z2ug] { margin-top: var(--spacing-6); }
.tabs-header[b-ihqfc6z2ug] {
    display: flex;
    gap: var(--spacing-2);
    border-bottom: 2px solid var(--color-neutral-200);
    margin-bottom: var(--spacing-5);
}
.tabs-header button[b-ihqfc6z2ug] {
    padding: var(--spacing-3) var(--spacing-5);
    background: none;
    border: none;
    border-bottom: 3px solid transparent;
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    color: var(--color-neutral-500);
    transition: all 0.2s;
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
}
.tab-active[b-ihqfc6z2ug] {
    color: var(--color-primary-600) !important;
    border-bottom: 4px solid var(--color-primary-600) !important;
    font-weight: 700 !important;
    font-size: 15px !important;
}
.tab-inactive:hover[b-ihqfc6z2ug] { color: var(--color-primary-500); background: var(--color-primary-50); }
.tab-pane[b-ihqfc6z2ug] { animation: details-tab-fadeIn-b-ihqfc6z2ug 0.3s; }
@keyframes details-tab-fadeIn-b-ihqfc6z2ug {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* -- Assignments / Publish containers --------------------------- */
.assignments-container[b-ihqfc6z2ug],
.publish-container[b-ihqfc6z2ug] {
    background: var(--color-neutral-0);
    border: 2px solid var(--color-neutral-200);
    border-radius: var(--radius-md);
    padding: var(--spacing-6);
}
.assignments-header[b-ihqfc6z2ug] { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--spacing-5); }
.placeholder-message[b-ihqfc6z2ug] {
    text-align: center;
    padding: var(--spacing-10) var(--spacing-5);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

/* -- OMR Actions Section --------------------------------------- */
.omr-actions-section[b-ihqfc6z2ug] {
    background: linear-gradient(135deg, var(--color-accentB-50) 0%, var(--color-primary-50) 100%);
    border: 2px solid var(--color-primary-200);
    border-radius: var(--radius-md);
    padding: var(--spacing-6);
    margin-bottom: var(--spacing-6);
}
.omr-actions-header[b-ihqfc6z2ug] {
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
    margin-bottom: var(--spacing-5);
}
.omr-actions-header i[b-ihqfc6z2ug] { font-size: 24px; color: var(--color-primary-600); }
.omr-actions-header h3[b-ihqfc6z2ug] { font-size: 20px; font-weight: 700; color: var(--color-neutral-900); margin: 0; }

.omr-actions-grid[b-ihqfc6z2ug] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--spacing-4);
}

.omr-action-card[b-ihqfc6z2ug] {
    background: var(--color-neutral-0);
    border: 2px solid var(--color-neutral-200);
    border-radius: var(--radius-md);
    padding: var(--spacing-5);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-4);
    transition: all 0.2s;
}
.omr-action-card:hover[b-ihqfc6z2ug] {
    border-color: var(--color-primary-400);
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.15);
    transform: translateY(-2px);
}

.omr-action-content[b-ihqfc6z2ug] { display: flex; align-items: center; gap: var(--spacing-3); flex: 1; }
.omr-action-content i[b-ihqfc6z2ug] { font-size: 32px; }
.omr-action-content h4[b-ihqfc6z2ug] { font-size: 16px; font-weight: 700; color: var(--color-neutral-900); margin: 0 0 4px 0; }
.omr-action-content p[b-ihqfc6z2ug] { font-size: 13px; color: var(--color-neutral-600); margin: 0; line-height: 1.4; }

.alert[b-ihqfc6z2ug] {
    padding: var(--spacing-4);
    border-radius: var(--radius-md);
    margin-top: var(--spacing-4);
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
    font-size: 14px;
    font-weight: 600;
}
.alert i[b-ihqfc6z2ug] { font-size: 20px; }
.alert-success[b-ihqfc6z2ug] { background: var(--color-success-100); color: var(--color-success-700); border: 2px solid var(--color-success-300); }
.alert-error[b-ihqfc6z2ug]   { background: var(--color-danger-100);  color: var(--color-danger-700);  border: 2px solid var(--color-danger-300); }

/* -- Question-type renderers (used by Details-page accordions, not the iframe) -- */
.mcq-grid[b-ihqfc6z2ug] { display: grid; grid-template-columns: 1fr 1fr; gap: var(--spacing-2); margin-left: var(--spacing-4); }
@media (max-width: 600px) { .mcq-grid[b-ihqfc6z2ug] { grid-template-columns: 1fr; } }
.option-correct[b-ihqfc6z2ug] {
    background: var(--color-success-50, #f0fdf4);
    border-left: 3px solid var(--color-success-500, #22c55e);
    padding-left: var(--spacing-2);
    border-radius: 4px;
}
.tf-options[b-ihqfc6z2ug] { display: flex; gap: var(--spacing-4); margin-left: var(--spacing-4); }
.match-columns[b-ihqfc6z2ug] { display: grid; grid-template-columns: 1fr 1fr; gap: var(--spacing-4); margin-left: var(--spacing-4); margin-top: var(--spacing-2); }
@media (max-width: 600px) { .match-columns[b-ihqfc6z2ug] { grid-template-columns: 1fr; } }
.match-col-header[b-ihqfc6z2ug] {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-brand-700, #1d4ed8);
    background: var(--color-brand-50, #eff6ff);
    padding: 4px 8px;
    border-radius: 4px;
    margin-bottom: var(--spacing-2);
}
.match-item[b-ihqfc6z2ug] {
    font-size: 13px;
    padding: 4px 0;
    border-bottom: 1px dashed var(--color-neutral-200);
    display: flex;
    gap: var(--spacing-1);
    align-items: baseline;
}
.question-diagram[b-ihqfc6z2ug] { margin-bottom: var(--spacing-3); text-align: center; }
.diagram-img[b-ihqfc6z2ug] {
    max-width: 100%;
    max-height: 280px;
    border-radius: var(--radius-md);
    border: 1px solid var(--color-neutral-200);
    object-fit: contain;
}
.diagram-caption[b-ihqfc6z2ug] { font-size: 12px; color: var(--color-neutral-500); margin-top: var(--spacing-1); font-style: italic; }
.answer-hint[b-ihqfc6z2ug] {
    margin-top: var(--spacing-2);
    padding: var(--spacing-2) var(--spacing-3);
    background: var(--color-success-50, #f0fdf4);
    border-left: 3px solid var(--color-success-400, #4ade80);
    border-radius: 0 4px 4px 0;
    font-size: 13px;
    display: flex;
    gap: var(--spacing-2);
    align-items: baseline;
    flex-wrap: wrap;
}
.answer-hint-label[b-ihqfc6z2ug] { font-weight: 700; color: var(--color-success-700, #15803d); white-space: nowrap; }
.question-type-tag[b-ihqfc6z2ug] {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 2px 6px;
    border-radius: 4px;
    background: var(--color-brand-100, #dbeafe);
    color: var(--color-brand-700, #1d4ed8);
}
.question-options[b-ihqfc6z2ug] { display: flex; flex-direction: column; gap: var(--spacing-2); margin-left: var(--spacing-4); }
.option-item[b-ihqfc6z2ug] { display: flex; gap: var(--spacing-2); font-size: 14px; }
.option-label[b-ihqfc6z2ug] { font-weight: 600; color: var(--color-neutral-700); min-width: 22px; }
.question-text[b-ihqfc6z2ug] { font-size: 14px; line-height: 1.6; color: var(--color-neutral-900); margin-bottom: var(--spacing-3); }
.section-item[b-ihqfc6z2ug] { border: 2px solid var(--color-neutral-200); border-radius: var(--radius-md); margin-bottom: var(--spacing-4); overflow: hidden; }
.section-header[b-ihqfc6z2ug] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-4);
    background: var(--color-neutral-50);
    cursor: pointer;
    transition: background 0.2s;
}
.section-header:hover[b-ihqfc6z2ug] { background: var(--color-primary-50); }
.section-info h4[b-ihqfc6z2ug] { margin: 0 0 var(--spacing-2) 0; font-size: 16px; font-weight: 700; color: var(--color-neutral-900); }
.section-meta[b-ihqfc6z2ug] { display: flex; gap: var(--spacing-3); font-size: 13px; color: var(--color-neutral-600); }
.section-meta span[b-ihqfc6z2ug] { display: flex; align-items: center; gap: 4px; }
.expand-btn[b-ihqfc6z2ug] { background: none; border: none; font-size: 18px; color: var(--color-neutral-600); cursor: pointer; }
.section-questions[b-ihqfc6z2ug] {
    padding: var(--spacing-4);
    background: #f5efe2;
    border-radius: 0 0 var(--radius-md) var(--radius-md);
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.04);
}
.question-item[b-ihqfc6z2ug] {
    padding: var(--spacing-4);
    border: 1px solid var(--color-neutral-200);
    border-radius: var(--radius-sm);
    margin-bottom: var(--spacing-4);
}
.question-header[b-ihqfc6z2ug] {
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
    margin-bottom: var(--spacing-3);
}
.question-number[b-ihqfc6z2ug] { font-weight: 700; color: var(--color-primary-600); font-size: 15px; }
.question-marks[b-ihqfc6z2ug] { font-size: 13px; color: var(--color-neutral-600); font-weight: 600; }
.question-difficulty[b-ihqfc6z2ug] {
    padding: 4px 10px;
    border-radius: var(--radius-md);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
}
.difficulty-easy[b-ihqfc6z2ug]   { background: var(--color-success-100); color: var(--color-success-700); }
.difficulty-medium[b-ihqfc6z2ug] { background: var(--color-warning-100); color: var(--color-warning-700); }
.difficulty-hard[b-ihqfc6z2ug]   { background: var(--color-danger-100);  color: var(--color-danger-700);  }

.instructions-section[b-ihqfc6z2ug] {
    margin-top: var(--spacing-5);
    padding-top: var(--spacing-5);
    border-top: 1px solid var(--color-neutral-200);
}
.instructions-content[b-ihqfc6z2ug] {
    margin-top: var(--spacing-2);
    padding: var(--spacing-4);
    background: var(--color-neutral-50);
    border-radius: var(--radius-sm);
    font-size: 14px;
    line-height: 1.6;
    white-space: pre-line;
}
.details-card[b-ihqfc6z2ug],
.sections-card[b-ihqfc6z2ug] {
    background: var(--color-neutral-0);
    border: 2px solid var(--color-neutral-200);
    border-radius: var(--radius-md);
    padding: var(--spacing-6);
    margin-bottom: var(--spacing-5);
}
.card-title[b-ihqfc6z2ug] {
    font-size: 18px;
    font-weight: 700;
    color: var(--color-neutral-900);
    margin: 0 0 var(--spacing-5) 0;
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
}
.card-title i[b-ihqfc6z2ug] { color: var(--color-primary-600); }
.details-grid[b-ihqfc6z2ug] { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: var(--spacing-4); }
.detail-item[b-ihqfc6z2ug] { display: flex; flex-direction: column; gap: 6px; }
.detail-item.full-width[b-ihqfc6z2ug] { grid-column: 1 / -1; }
.detail-item label[b-ihqfc6z2ug] {
    font-size: 13px;
    font-weight: 600;
    color: var(--color-neutral-600);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.detail-item span[b-ihqfc6z2ug],
.detail-item a[b-ihqfc6z2ug] { font-size: 15px; color: var(--color-neutral-900); font-weight: 500; }

/* -- Preview Modal chrome (paper styling now lives in ExamPaperIframe.razor.css) -- */
.modal-overlay[b-ihqfc6z2ug] {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0, 0, 0, 0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 16px;
}
.modal-container[b-ihqfc6z2ug] {
    background: var(--color-neutral-0);
    border-radius: 12px;
    width: min(92vw, 1440px);
    max-height: 92vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.28);
}
.modal-header[b-ihqfc6z2ug] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding: 12px 20px;
    border-bottom: 1.5px solid var(--color-neutral-200);
    flex-shrink: 0;
    flex-wrap: wrap;
    background: #fff;
    border-radius: 12px 12px 0 0;
}
.modal-title-area[b-ihqfc6z2ug] { display: flex; flex-direction: column; gap: 2px; }
.modal-title[b-ihqfc6z2ug] {
    font-size: 16px;
    font-weight: 700;
    color: var(--color-neutral-900);
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
}
.modal-title i[b-ihqfc6z2ug] { color: var(--color-primary-600); }
.modal-meta[b-ihqfc6z2ug] { font-size: 12px; color: var(--color-neutral-400); font-weight: 500; }
.modal-toolbar[b-ihqfc6z2ug] { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.btn-toggle[b-ihqfc6z2ug] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    border-radius: 7px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    border: none;
    background: var(--color-accentB-600);
    color: #fff;
    transition: filter 0.15s;
}
.btn-toggle:hover[b-ihqfc6z2ug] { filter: brightness(0.9); }
.btn-download[b-ihqfc6z2ug] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    border-radius: 7px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    border: 1.5px solid #3b82f6;
    background: #eff6ff;
    color: #1d4ed8;
    transition: all 0.15s;
}
.btn-download:hover[b-ihqfc6z2ug] { background: #dbeafe; }
.btn-print[b-ihqfc6z2ug] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    border-radius: 7px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    border: 1.5px solid var(--color-neutral-200);
    background: #fff;
    color: var(--color-neutral-600);
    transition: all 0.15s;
}
.btn-print:hover:not(:disabled)[b-ihqfc6z2ug] { background: var(--color-neutral-100); }
.btn-print:disabled[b-ihqfc6z2ug] { opacity: 0.5; cursor: not-allowed; }
.btn-close-isolated[b-ihqfc6z2ug] {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1.5px solid var(--color-neutral-200);
    background: #fff;
    color: var(--color-neutral-500);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    transition: all 0.15s;
    flex-shrink: 0;
}
.btn-close-isolated:hover[b-ihqfc6z2ug] { background: #fef2f2; border-color: #fca5a5; color: #dc2626; }
.modal-body[b-ihqfc6z2ug] {
    flex: 1;
    overflow-y: auto;
    background: #f1f5f9;
    padding: 16px;
    border-radius: 0 0 12px 12px;
}
/* /Pages/Teacher/Exams/Edit.razor.rz.scp.css */
/* =================================================================
   Edit Exam Page  �  Edit.razor.css
   ================================================================= */

/* -- Page shell --------------------------------------------------- */
.ee-page[b-7qavi9qj9p] {
    padding: 0;
    background: var(--color-neutral-50, #f8fafc);
    min-height: 100vh;
}

/* -- Top bar ------------------------------------------------------- */
.ee-topbar[b-7qavi9qj9p] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 2rem;
    background: #fff;
    border-bottom: 1px solid var(--color-neutral-100, #f1f5f9);
    flex-wrap: wrap;
    gap: .75rem;
    position: sticky;
    top: 0;
    z-index: 40;
    box-shadow: 0 1px 3px rgba(0,0,0,.06);
}

.ee-topbar-left[b-7qavi9qj9p] {
    display: flex;
    align-items: center;
    gap: .875rem;
}

.ee-back-btn[b-7qavi9qj9p] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 1.5px solid var(--color-neutral-200, #e2e8f0);
    background: #fff;
    color: var(--color-neutral-500, #64748b);
    cursor: pointer;
    flex-shrink: 0;
    transition: background .15s, color .15s, border-color .15s;
}
.ee-back-btn:hover[b-7qavi9qj9p] {
    background: var(--color-primary-600, #4f46e5);
    color: #fff;
    border-color: var(--color-primary-600, #4f46e5);
}

.ee-page-title[b-7qavi9qj9p] {
    font-size: 1rem;
    font-weight: 700;
    color: var(--color-neutral-900, #0f172a);
    line-height: 1.2;
}
.ee-page-sub[b-7qavi9qj9p] {
    font-size: .78rem;
    color: var(--color-neutral-500, #64748b);
    margin-top: .1rem;
}

.ee-topbar-right[b-7qavi9qj9p] {
    display: flex;
    align-items: center;
    gap: .75rem;
}

.ee-status-badge[b-7qavi9qj9p] {
    font-size: .68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    padding: .2rem .65rem;
    border-radius: 9px;
}
.ee-status-draft[b-7qavi9qj9p]      { background: var(--color-warning-100, #fef9c3);  color: var(--color-warning-700, #a16207); }
.ee-status-published[b-7qavi9qj9p]  { background: var(--color-success-100, #dcfce7);  color: var(--color-success-700, #15803d); }
.ee-status-closed[b-7qavi9qj9p]     { background: var(--color-neutral-100, #f1f5f9);  color: var(--color-neutral-600, #475569); }
.ee-status-cancelled[b-7qavi9qj9p]  { background: var(--color-error-100, #fee2e2);    color: var(--color-error-700, #b91c1c);   }

.ee-autosave[b-7qavi9qj9p] {
    font-size: .75rem;
    color: var(--color-success-600, #16a34a);
    display: inline-flex;
    align-items: center;
    gap: .3rem;
}
.ee-autosave--working[b-7qavi9qj9p] { color: var(--color-neutral-400, #94a3b8); }

/* -- Warning banner ------------------------------------------------ */
.ee-warning-banner[b-7qavi9qj9p] {
    margin: 0 2rem .75rem;
    padding: .7rem 1rem;
    background: #fffbeb;
    border: 1px solid #fde68a;
    border-radius: .5rem;
    font-size: .82rem;
    color: #92400e;
    display: flex;
    align-items: flex-start;
    gap: .5rem;
}

/* -- Tab bar ------------------------------------------------------- */
.ee-tab-bar[b-7qavi9qj9p] {
    display: flex;
    gap: 0;
    padding: 0 2rem;
    background: #fff;
    border-bottom: 2px solid var(--color-neutral-100, #f1f5f9);
    margin-bottom: 1.5rem;
}

.ee-tab[b-7qavi9qj9p] {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .8rem 1.25rem;
    border: none;
    border-bottom: 3px solid transparent;
    margin-bottom: -2px;
    background: transparent;
    font-size: .84rem;
    font-weight: 500;
    color: var(--color-neutral-500, #64748b);
    cursor: pointer;
    transition: color .15s, border-color .15s;
}
.ee-tab:hover[b-7qavi9qj9p] { color: var(--color-neutral-700, #334155); }

.ee-tab--active[b-7qavi9qj9p] {
    color: var(--color-primary-600, #4f46e5);
    border-bottom-color: var(--color-primary-500, #6366f1);
    font-weight: 700;
}

.ee-tab-badge[b-7qavi9qj9p] {
    font-size: .65rem;
    font-weight: 700;
    padding: .1rem .45rem;
    border-radius: 9px;
}
.ee-tab-badge--ok[b-7qavi9qj9p]   { background: var(--color-success-100, #dcfce7); color: var(--color-success-700, #15803d); }
.ee-tab-badge--warn[b-7qavi9qj9p] { background: var(--color-warning-100, #fef9c3); color: var(--color-warning-700, #a16207); }

/* -- 2-column layout ----------------------------------------------- */
.ee-layout[b-7qavi9qj9p] {
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: 1.5rem;
    padding: 0 2rem 7rem;   /* bottom padding for sticky bar */
    max-width: 1400px;
    margin: 0 auto;
    align-items: start;
}

@media (max-width: 1024px) {
    .ee-layout[b-7qavi9qj9p] { grid-template-columns: 1fr; }
    .ee-sidebar[b-7qavi9qj9p] { order: -1; }
}

/* -- Form column sections ------------------------------------------ */
.ee-form-col[b-7qavi9qj9p] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.ee-section-card[b-7qavi9qj9p] {
    background: #fff;
    border: 1px solid var(--color-neutral-100, #f1f5f9);
    border-radius: .75rem;
    overflow: hidden;
    box-shadow: 0 1px 4px rgba(0,0,0,.04);
}

.ee-section-head[b-7qavi9qj9p] {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .875rem 1.25rem;
    background: var(--color-neutral-50, #f8fafc);
    border-bottom: 1px solid var(--color-neutral-100, #f1f5f9);
    font-size: .84rem;
    font-weight: 700;
    color: var(--color-neutral-700, #334155);
}
.ee-section-head i[b-7qavi9qj9p] { color: var(--color-primary-500, #6366f1); }

.ee-section-body[b-7qavi9qj9p] {
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* -- Field layout -------------------------------------------------- */
.ee-field-row[b-7qavi9qj9p] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}
@media (max-width: 640px) {
    .ee-field-row[b-7qavi9qj9p] { grid-template-columns: 1fr; }
}

.ee-field[b-7qavi9qj9p] { display: flex; flex-direction: column; gap: .3rem; }
.ee-field--full[b-7qavi9qj9p] { grid-column: 1 / -1; }

.ee-label[b-7qavi9qj9p] {
    font-size: .8rem;
    font-weight: 600;
    color: var(--color-neutral-600, #475569);
    display: flex;
    align-items: center;
    gap: .35rem;
    flex-wrap: wrap;
}
.ee-required[b-7qavi9qj9p] { color: var(--color-error-500, #ef4444); }
.ee-hint[b-7qavi9qj9p] {
    font-size: .72rem;
    font-weight: 400;
    color: var(--color-neutral-400, #94a3b8);
}

.ee-input[b-7qavi9qj9p] {
    height: 42px;
    padding: 0 .875rem;
    border: 1.5px solid var(--color-neutral-200, #e2e8f0);
    border-radius: .45rem;
    font-size: .875rem;
    color: var(--color-neutral-800, #1e293b);
    background: #fff;
    transition: border-color .15s, box-shadow .15s;
    width: 100%;
    box-sizing: border-box;
}
.ee-input:focus[b-7qavi9qj9p] {
    outline: none;
    border-color: var(--color-primary-400, #818cf8);
    box-shadow: 0 0 0 3px var(--color-primary-50, #eef2ff);
}
.ee-input--error[b-7qavi9qj9p] { border-color: var(--color-error-400, #f87171); background: #fff5f5; }
.ee-err[b-7qavi9qj9p] {
    font-size: .72rem;
    color: var(--color-error-600, #dc2626);
    margin-top: -.1rem;
}

.ee-textarea[b-7qavi9qj9p] {
    padding: .75rem .875rem;
    border: 1.5px solid var(--color-neutral-200, #e2e8f0);
    border-radius: .45rem;
    font-size: .875rem;
    color: var(--color-neutral-800, #1e293b);
    background: #fff;
    resize: vertical;
    line-height: 1.6;
    transition: border-color .15s, box-shadow .15s;
    width: 100%;
    box-sizing: border-box;
}
.ee-textarea:focus[b-7qavi9qj9p] {
    outline: none;
    border-color: var(--color-primary-400, #818cf8);
    box-shadow: 0 0 0 3px var(--color-primary-50, #eef2ff);
}

/* readonly display cells */
.ee-readonly[b-7qavi9qj9p] {
    height: 42px;
    padding: 0 .875rem;
    border: 1.5px solid var(--color-neutral-100, #f1f5f9);
    border-radius: .45rem;
    font-size: .875rem;
    color: var(--color-neutral-600, #475569);
    background: var(--color-neutral-50, #f8fafc);
    display: flex;
    align-items: center;
    gap: .35rem;
}
.ee-readonly--computed[b-7qavi9qj9p] {
    color: var(--color-primary-600, #4f46e5);
    font-weight: 600;
}
.ee-readonly--highlight[b-7qavi9qj9p] {
    color: var(--color-neutral-900, #0f172a);
    font-weight: 700;
    font-size: 1rem;
}

/* -- Pass marks bar ------------------------------------------------ */
.ee-pass-bar[b-7qavi9qj9p] {
    display: flex;
    align-items: center;
    gap: .75rem;
    margin-top: -.25rem;
}
.ee-pass-bar-track[b-7qavi9qj9p] {
    flex: 1;
    height: 6px;
    background: var(--color-neutral-100, #f1f5f9);
    border-radius: 9px;
    overflow: hidden;
}
.ee-pass-bar-fill[b-7qavi9qj9p] {
    height: 100%;
    border-radius: 9px;
    transition: width .3s;
}
.ee-pass-ok[b-7qavi9qj9p]  { background: var(--color-success-500, #22c55e); }
.ee-pass-low[b-7qavi9qj9p] { background: var(--color-warning-500, #f59e0b); }
.ee-pass-pct[b-7qavi9qj9p] { font-size: .72rem; color: var(--color-neutral-500, #64748b); white-space: nowrap; }

/* -- Instruction templates ----------------------------------------- */
.ee-instr-templates[b-7qavi9qj9p] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .35rem;
    margin-bottom: .35rem;
}
.ee-instr-label[b-7qavi9qj9p] { font-size: .7rem; color: var(--color-neutral-400, #94a3b8); font-weight: 500; }
.ee-instr-chip[b-7qavi9qj9p] {
    font-size: .7rem;
    padding: .2rem .55rem;
    border: 1px solid var(--color-neutral-200, #e2e8f0);
    border-radius: 20px;
    background: #fff;
    color: var(--color-primary-600, #4f46e5);
    cursor: pointer;
    transition: background .1s;
}
.ee-instr-chip:hover[b-7qavi9qj9p] { background: var(--color-primary-50, #eef2ff); }

/* -- Delivery mode toggle ------------------------------------------ */
.ee-delivery-toggle[b-7qavi9qj9p] {
    display: flex;
    gap: .5rem;
    flex-wrap: wrap;
}
.ee-mode-btn[b-7qavi9qj9p] {
    flex: 1;
    min-width: 100px;
    padding: .5rem .75rem;
    border: 1.5px solid var(--color-neutral-200, #e2e8f0);
    border-radius: .45rem;
    background: #fff;
    color: var(--color-neutral-600, #475569);
    font-size: .8rem;
    font-weight: 500;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    transition: background .15s, border-color .15s, color .15s;
}
.ee-mode-btn:hover[b-7qavi9qj9p] { border-color: var(--color-primary-300, #a5b4fc); color: var(--color-primary-600, #4f46e5); }
.ee-mode-btn--active[b-7qavi9qj9p] {
    border-color: var(--color-primary-500, #6366f1);
    background: var(--color-primary-50, #eef2ff);
    color: var(--color-primary-700, #4338ca);
    font-weight: 700;
}

/* -- Sidebar ------------------------------------------------------- */
.ee-sidebar[b-7qavi9qj9p] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    position: sticky;
    top: 72px;   /* below sticky topbar */
}

.ee-sidebar-card[b-7qavi9qj9p] {
    background: #fff;
    border: 1px solid var(--color-neutral-100, #f1f5f9);
    border-radius: .75rem;
    overflow: hidden;
    box-shadow: 0 1px 4px rgba(0,0,0,.04);
}

.ee-sidebar-title[b-7qavi9qj9p] {
    display: flex;
    align-items: center;
    gap: .4rem;
    padding: .7rem 1rem;
    background: var(--color-neutral-50, #f8fafc);
    border-bottom: 1px solid var(--color-neutral-100, #f1f5f9);
    font-size: .78rem;
    font-weight: 700;
    color: var(--color-neutral-700, #334155);
    text-transform: uppercase;
    letter-spacing: .04em;
}
.ee-sidebar-title i[b-7qavi9qj9p] { color: var(--color-primary-500, #6366f1); }

/* Readiness ring */
.ee-readiness[b-7qavi9qj9p] {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1rem;
}
.ee-rs-ring[b-7qavi9qj9p] {
    position: relative;
    width: 64px;
    height: 64px;
    flex-shrink: 0;
}
.ee-rs-ring svg[b-7qavi9qj9p] { width: 64px; height: 64px; }
.ee-rs-pct[b-7qavi9qj9p] {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .75rem;
    font-weight: 700;
    color: var(--color-neutral-800, #1e293b);
}

.ee-rs-list[b-7qavi9qj9p] {
    list-style: none;
    margin: 0;
    padding: 0;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: .35rem;
}
.ee-rs-ok[b-7qavi9qj9p], .ee-rs-missing[b-7qavi9qj9p] {
    display: flex;
    align-items: center;
    gap: .35rem;
    font-size: .75rem;
}
.ee-rs-ok[b-7qavi9qj9p]      { color: var(--color-success-700, #15803d); }
.ee-rs-missing[b-7qavi9qj9p] { color: var(--color-neutral-400, #94a3b8); }

/* Summary rows */
.ee-sum-rows[b-7qavi9qj9p] { padding: .25rem 0; }
.ee-sum-row[b-7qavi9qj9p] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    padding: .38rem 1rem;
    border-bottom: 1px solid var(--color-neutral-50, #f8fafc);
    font-size: .78rem;
}
.ee-sum-row:last-child[b-7qavi9qj9p] { border-bottom: none; }
.ee-sum-label[b-7qavi9qj9p] { color: var(--color-neutral-500, #64748b); font-weight: 500; }
.ee-sum-value[b-7qavi9qj9p] { color: var(--color-neutral-800, #1e293b); font-weight: 500; }
.ee-sum-value--strong[b-7qavi9qj9p] { color: var(--color-neutral-900, #0f172a); font-weight: 700; }

/* Sections breakdown pills */
.ee-sec-pill[b-7qavi9qj9p] {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .45rem 1rem;
    border-bottom: 1px solid var(--color-neutral-50, #f8fafc);
    font-size: .78rem;
}
.ee-sec-pill:last-child[b-7qavi9qj9p] { border-bottom: none; }
.ee-sec-pill-label[b-7qavi9qj9p] {
    font-size: .62rem;
    font-weight: 700;
    padding: .1rem .4rem;
    border-radius: 8px;
    background: var(--color-neutral-100, #f1f5f9);
    color: var(--color-neutral-500, #64748b);
    flex-shrink: 0;
}
.ee-sec-pill-name[b-7qavi9qj9p] { color: var(--color-neutral-700, #334155); flex: 1; }
.ee-sec-pill-count[b-7qavi9qj9p] { font-size: .72rem; font-weight: 600; flex-shrink: 0; }
.ee-sec-pill--ok   .ee-sec-pill-count[b-7qavi9qj9p] { color: var(--color-success-600, #16a34a); }
.ee-sec-pill--warn .ee-sec-pill-count[b-7qavi9qj9p] { color: var(--color-warning-600, #d97706); }

/* -- Sticky save bar ----------------------------------------------- */
.ee-sticky-bar[b-7qavi9qj9p] {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 50;
    background: #fff;
    border-top: 1px solid var(--color-neutral-100, #f1f5f9);
    box-shadow: 0 -4px 12px rgba(0,0,0,.08);
}
.ee-sticky-inner[b-7qavi9qj9p] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: 1400px;
    margin: 0 auto;
    padding: .75rem 2rem;
    gap: 1rem;
}
.ee-sticky-err[b-7qavi9qj9p] {
    font-size: .8rem;
    color: var(--color-error-600, #dc2626);
    display: flex;
    align-items: center;
    gap: .35rem;
    flex: 1;
}
.ee-sticky-hint[b-7qavi9qj9p] {
    font-size: .78rem;
    color: var(--color-neutral-400, #94a3b8);
    display: flex;
    align-items: center;
    gap: .35rem;
    flex: 1;
}
.ee-sticky-actions[b-7qavi9qj9p] { display: flex; gap: .625rem; }

/* Buttons */
.ee-btn-primary[b-7qavi9qj9p] {
    display: inline-flex; align-items: center; gap: .4rem;
    padding: .6rem 1.25rem;
    background: var(--color-primary-600, #4f46e5);
    color: #fff;
    border: none;
    border-radius: .45rem;
    font-size: .84rem;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s;
}
.ee-btn-primary:hover:not(:disabled)[b-7qavi9qj9p] { background: var(--color-primary-700, #4338ca); }
.ee-btn-primary:disabled[b-7qavi9qj9p] { opacity: .55; cursor: not-allowed; }

.ee-btn-ghost[b-7qavi9qj9p] {
    display: inline-flex; align-items: center; gap: .4rem;
    padding: .6rem 1.25rem;
    background: transparent;
    color: var(--color-neutral-600, #475569);
    border: 1.5px solid var(--color-neutral-200, #e2e8f0);
    border-radius: .45rem;
    font-size: .84rem;
    font-weight: 500;
    cursor: pointer;
    transition: background .15s, border-color .15s;
}
.ee-btn-ghost:hover[b-7qavi9qj9p] { background: var(--color-neutral-50, #f8fafc); border-color: var(--color-neutral-300, #cbd5e1); }

/* -- Questions tab (reuse eq-* from previous session) --------------- */
.eq-section-card[b-7qavi9qj9p] {
    background: #fff;
    border: 1px solid var(--color-neutral-100);
    border-radius: .75rem;
    margin: 0 2rem .875rem;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0,0,0,.04);
}

.eq-sec-header[b-7qavi9qj9p] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .75rem 1rem;
    background: var(--color-neutral-50);
    border-bottom: 1px solid var(--color-neutral-100);
    gap: 1rem;
    flex-wrap: wrap;
}
.eq-sec-title[b-7qavi9qj9p] { display: flex; align-items: center; gap: .5rem; }
.eq-sec-label[b-7qavi9qj9p] {
    font-size: .65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--color-neutral-400);
    background: var(--color-neutral-100);
    padding: .1rem .45rem;
    border-radius: 9px;
}
.eq-sec-name[b-7qavi9qj9p] { font-size: .85rem; font-weight: 600; color: var(--color-neutral-800); }
.eq-sec-meta[b-7qavi9qj9p] { display: flex; align-items: center; gap: .75rem; font-size: .78rem; }
.eq-sec-count[b-7qavi9qj9p] { font-weight: 600; padding: .1rem .5rem; border-radius: 9px; }
.eq-ok[b-7qavi9qj9p]   { background: var(--color-success-50, #f0fdf4); color: var(--color-success-700, #15803d); }
.eq-warn[b-7qavi9qj9p] { background: var(--color-warning-50, #fffbeb); color: var(--color-warning-700, #b45309); }
.eq-sec-marks[b-7qavi9qj9p] { color: var(--color-neutral-400); }

.eq-q-row[b-7qavi9qj9p] {
    display: grid;
    grid-template-columns: 2rem 6rem 1fr 3.5rem auto;
    align-items: flex-start;
    gap: .5rem;
    padding: .55rem 1rem;
    border-bottom: 1px solid var(--color-neutral-50);
    font-size: .82rem;
}
.eq-q-row:hover[b-7qavi9qj9p] { background: var(--color-neutral-50); }
.eq-q-num[b-7qavi9qj9p]   { color: var(--color-neutral-400); font-size: .75rem; font-weight: 600; }
.eq-q-type[b-7qavi9qj9p]  { font-size: .62rem; padding: .1rem .4rem; background: var(--color-neutral-100); border-radius: 8px; color: var(--color-neutral-500); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.eq-q-text[b-7qavi9qj9p]  { display: block; min-width: 0; color: var(--color-neutral-800); line-height: 1.6; }
/* Markdig wraps each DB paragraph in <p> tags — force them all inline so the question reads as one continuous line */
.eq-q-text p[b-7qavi9qj9p], .eq-q-text .math-text p[b-7qavi9qj9p] { display: inline; margin: 0; padding: 0; }
.eq-q-text br[b-7qavi9qj9p], .eq-q-text .math-text br[b-7qavi9qj9p] { display: none; }
.eq-q-marks[b-7qavi9qj9p] { font-size: .75rem; color: var(--color-neutral-400); text-align: right; }
.eq-q-actions[b-7qavi9qj9p] { display: flex; gap: .35rem; }

.eq-btn-replace[b-7qavi9qj9p] { display: inline-flex; align-items: center; gap: .25rem; font-size: .72rem; font-weight: 500; padding: .25rem .6rem; border: 1px solid var(--color-primary-200, #c7d2fe); border-radius: .3rem; background: var(--color-primary-50, #eef2ff); color: var(--color-primary-600, #4f46e5); cursor: pointer; white-space: nowrap; transition: background .1s; }
.eq-btn-replace:hover[b-7qavi9qj9p] { background: var(--color-primary-100, #e0e7ff); }
.eq-btn-remove[b-7qavi9qj9p] { display: inline-flex; align-items: center; justify-content: center; width: 1.6rem; height: 1.6rem; border: 1px solid var(--color-neutral-200); border-radius: .3rem; background: #fff; color: var(--color-error-500, #ef4444); cursor: pointer; font-size: .7rem; transition: background .1s; }
.eq-btn-remove:hover[b-7qavi9qj9p] { background: var(--color-error-50, #fef2f2); border-color: var(--color-error-200, #fecaca); }

.eq-short-row[b-7qavi9qj9p] { display: flex; align-items: center; gap: .5rem; padding: .5rem 1rem; font-size: .78rem; color: var(--color-warning-700, #b45309); background: var(--color-warning-50, #fffbeb); border-top: 1px solid var(--color-warning-100, #fef3c7); }
.eq-btn-add[b-7qavi9qj9p] { display: inline-flex; align-items: center; gap: .25rem; padding: .2rem .7rem; border: 1px solid var(--color-primary-300, #a5b4fc); border-radius: .3rem; background: var(--color-primary-600, #4f46e5); color: #fff; font-size: .72rem; font-weight: 600; cursor: pointer; margin-left: auto; transition: background .1s; }
.eq-btn-add:hover[b-7qavi9qj9p] { background: var(--color-primary-700, #4338ca); }
.eq-add-row[b-7qavi9qj9p] { padding: .4rem 1rem; border-top: 1px dashed var(--color-neutral-100); }
.eq-btn-add-subtle[b-7qavi9qj9p] { font-size: .72rem; color: var(--color-neutral-400); background: none; border: none; cursor: pointer; display: inline-flex; align-items: center; gap: .25rem; padding: .2rem 0; transition: color .1s; }
.eq-btn-add-subtle:hover[b-7qavi9qj9p] { color: var(--color-primary-600, #4f46e5); }

/* Modals */
.eq-modal-backdrop[b-7qavi9qj9p] { position: fixed; inset: 0; background: rgba(0,0,0,.4); z-index: 200; display: flex; align-items: center; justify-content: center; padding: 1rem; }
.eq-modal[b-7qavi9qj9p] { background: #fff; border-radius: .75rem; width: 100%; max-width: 640px; max-height: 80vh; display: flex; flex-direction: column; box-shadow: 0 20px 60px rgba(0,0,0,.2); }
.eq-modal-sm[b-7qavi9qj9p] { max-width: 400px; }
.eq-modal-header[b-7qavi9qj9p] { display: flex; align-items: center; justify-content: space-between; padding: .875rem 1.25rem; border-bottom: 1px solid var(--color-neutral-100); flex-shrink: 0; }
.eq-modal-title[b-7qavi9qj9p] { font-size: .88rem; font-weight: 600; color: var(--color-neutral-800); display: flex; align-items: center; gap: .4rem; }
.eq-modal-close[b-7qavi9qj9p] { border: none; background: none; color: var(--color-neutral-400); cursor: pointer; font-size: .9rem; padding: .25rem; border-radius: .25rem; transition: color .1s; }
.eq-modal-close:hover[b-7qavi9qj9p] { color: var(--color-neutral-700); }
.eq-modal-search[b-7qavi9qj9p] { display: flex; align-items: center; gap: .5rem; padding: .625rem 1rem; border-bottom: 1px solid var(--color-neutral-100); flex-shrink: 0; }
.eq-modal-search i[b-7qavi9qj9p] { color: var(--color-neutral-400); font-size: .8rem; }
.eq-modal-search input[b-7qavi9qj9p] { flex: 1; border: none; outline: none; font-size: .82rem; color: var(--color-neutral-800); background: transparent; }
.eq-picker-list[b-7qavi9qj9p] { flex: 1; overflow-y: auto; scrollbar-width: thin; }
.eq-picker-spinner[b-7qavi9qj9p], .eq-picker-empty[b-7qavi9qj9p] { padding: 2rem 1.25rem; text-align: center; color: var(--color-neutral-400); font-size: .82rem; }
.eq-picker-row[b-7qavi9qj9p] { display: grid; grid-template-columns: 6rem 1fr 3rem; align-items: center; gap: .5rem; padding: .6rem 1.25rem; border-bottom: 1px solid var(--color-neutral-50); cursor: pointer; font-size: .82rem; transition: background .1s; }
.eq-picker-row:hover[b-7qavi9qj9p] { background: var(--color-primary-50, #eef2ff); }
.eq-picker-type[b-7qavi9qj9p] { font-size: .62rem; padding: .1rem .4rem; background: var(--color-neutral-100); border-radius: 8px; color: var(--color-neutral-500); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.eq-picker-text[b-7qavi9qj9p] { color: var(--color-neutral-800); line-height: 1.6; min-width: 0; display: block; }
.eq-picker-text p[b-7qavi9qj9p], .eq-picker-text .math-text p[b-7qavi9qj9p] { display: inline; margin: 0; padding: 0; }
.eq-picker-text br[b-7qavi9qj9p], .eq-picker-text .math-text br[b-7qavi9qj9p] { display: none; }
.eq-picker-marks[b-7qavi9qj9p] { font-size: .72rem; color: var(--color-neutral-400); text-align: right; }
.eq-op-msg[b-7qavi9qj9p] { padding: .5rem 1.25rem; font-size: .78rem; color: var(--color-success-700, #15803d); background: var(--color-success-50, #f0fdf4); border-bottom: 1px solid var(--color-success-100, #dcfce7); }
.eq-load-more[b-7qavi9qj9p] { width: 100%; padding: .6rem; border: none; border-top: 1px solid var(--color-neutral-100); background: var(--color-neutral-50); font-size: .78rem; color: var(--color-primary-600, #4f46e5); cursor: pointer; font-weight: 500; transition: background .1s; }
.eq-load-more:hover:not(:disabled)[b-7qavi9qj9p] { background: var(--color-primary-50, #eef2ff); }
.eq-load-more:disabled[b-7qavi9qj9p] { opacity: .5; cursor: not-allowed; }
.eq-confirm-msg[b-7qavi9qj9p] { padding: 1rem 1.25rem .5rem; font-size: .85rem; color: var(--color-neutral-700); }
.eq-confirm-btns[b-7qavi9qj9p] { display: flex; justify-content: flex-end; gap: .5rem; padding: .875rem 1.25rem; border-top: 1px solid var(--color-neutral-100); }
.eq-btn-danger[b-7qavi9qj9p] { display: inline-flex; align-items: center; gap: .3rem; padding: .5rem 1rem; border: none; border-radius: .375rem; background: var(--color-error-600, #dc2626); color: #fff; font-size: .8rem; font-weight: 600; cursor: pointer; transition: background .15s; }
.eq-btn-danger:hover[b-7qavi9qj9p] { background: var(--color-error-700, #b91c1c); }
/* /Pages/Teacher/Exams/GradeStudent.razor.rz.scp.css */
/* ── Question navigator pills ── */
.nav-pill[b-debli6i2dv] {
    width: 2rem;
    height: 2rem;
    border-radius: 0.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    font-weight: 700;
    cursor: pointer;
    border: none;
    transition: transform 0.12s, box-shadow 0.12s;
    outline: none;
}
.nav-pill:hover[b-debli6i2dv] { transform: scale(1.1); }
.nav-pill--active[b-debli6i2dv] { transform: scale(1.15) !important; box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--color-primary-500, #6366f1); }
.nav-pill--graded[b-debli6i2dv]  { background: #d1fae5; color: #065f46; }
.nav-pill--graded:hover[b-debli6i2dv]  { background: #a7f3d0; }
.nav-pill--auto[b-debli6i2dv]    { background: var(--color-teal-100); color: var(--color-teal-700); }
.nav-pill--auto:hover[b-debli6i2dv]    { background: var(--color-teal-200); }
.nav-pill--flagged[b-debli6i2dv] { background: #f59e0b; color: #fff; }
.nav-pill--flagged:hover[b-debli6i2dv] { background: #d97706; }
.nav-pill--pending[b-debli6i2dv] { background: #f1f5f9; color: #64748b; }
.nav-pill--pending:hover[b-debli6i2dv] { background: #e2e8f0; }

/* ── Question header chips ── */
.q-chip[b-debli6i2dv] {
    background: rgba(255, 255, 255, 0.18);
    padding: 0.15rem 0.65rem;
    border-radius: 9999px;
    font-size: 0.7rem;
    line-height: 1.4;
}
.q-chip--teal[b-debli6i2dv]  { background: rgba(20, 184, 166, 0.35); }
.q-chip--green[b-debli6i2dv] { background: rgba(34, 197, 94,  0.3);  }
.q-chip--amber[b-debli6i2dv] { background: rgba(245, 158, 11, 0.4);  }

/* ── Scoring panel section label ── */
.section-label[b-debli6i2dv] {
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #94a3b8;
    margin-bottom: 1rem;
}

/* ── Match the Following table ── */
.match-table[b-debli6i2dv] {
    font-size: 0.85rem;
    width: 100%;
}
.match-table-header[b-debli6i2dv] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    background: #dbeafe;
    padding: 0.35rem 0.75rem;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #1e40af;
}
.match-table-header--correct[b-debli6i2dv] {
    background: #d1fae5;
    color: #065f46;
}
.match-table-row[b-debli6i2dv] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    border-top: 1px solid #e2e8f0;
    background: #fff;
}
.match-table-row:hover[b-debli6i2dv] { background: #f8fafc; }
.match-cell-left[b-debli6i2dv],
.match-cell-right[b-debli6i2dv] {
    padding: 0.45rem 0.75rem;
    color: #1e293b;
    line-height: 1.4;
}
.match-cell-left[b-debli6i2dv] {
    border-right: 1px solid #e2e8f0;
    color: #475569;
}

/* ── Assertion-Reason legend ── */
.ar-legend[b-debli6i2dv] {
    font-size: 0.8rem;
}
/* /Pages/Teacher/Exams/Index.razor.rz.scp.css */
/* Styles handled via Tailwind utility classes in markup */

/* ─── Create Exam button pair ────────────────────────────────────────────── */
.create-exam-btns[b-20vvxqpg0t] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.create-btn-alt[b-20vvxqpg0t] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 1rem;
    border: 1px solid var(--color-neutral-300);
    border-radius: 0.375rem;
    background: #fff;
    color: var(--color-neutral-700);
    font-size: 0.82rem;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s;
    white-space: nowrap;
}

.create-btn-alt:hover[b-20vvxqpg0t] { background: var(--color-neutral-50); }
/* /Pages/Teacher/Exams/OfflineMarksEntry.razor.rz.scp.css */
/* OfflineMarksEntry.razor.css — Redesigned */

/* ═══════════════════════════════════════════════════════════════
   LAYOUT — full-width optimized for data entry
═══════════════════════════════════════════════════════════════ */
.page-wrapper[b-0vokl5dp60] {
    max-width: 1600px;
    margin: 0 auto;
    padding: 1rem 1.5rem 3rem;
}

/* ── Loading / Error ── */
.loading-center[b-0vokl5dp60] {
    display: flex;
    justify-content: center;
    padding: 3rem 0;
}

.error-banner[b-0vokl5dp60] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    background: #fef2f2;
    border-left: 4px solid #ef4444;
    border-radius: 0.5rem;
    padding: 1rem 1.25rem;
    color: #991b1b;
    font-weight: 500;
}

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

.header-left[b-0vokl5dp60] {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
}

.btn-back[b-0vokl5dp60] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    background: none;
    border: 1px solid var(--color-neutral-200);
    border-radius: var(--radius-sm, 0.375rem);
    padding: 0.35rem 0.75rem;
    font-size: 0.8rem;
    color: var(--color-neutral-600);
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s;
}

.btn-back:hover[b-0vokl5dp60] { background: var(--color-neutral-50); }

.back-icon[b-0vokl5dp60] { width: 1rem; height: 1rem; }

.page-eyebrow[b-0vokl5dp60] {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-neutral-400);
    margin: 0 0 0.2rem;
}

.page-title[b-0vokl5dp60] {
    font-size: 1.35rem;
    font-weight: 800;
    color: var(--color-neutral-900);
    margin: 0 0 0.15rem;
}

.page-subtitle[b-0vokl5dp60] {
    font-size: 0.8rem;
    color: var(--color-neutral-500);
    margin: 0;
}

.header-right[b-0vokl5dp60] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

/* Autosave indicator */
.autosave-label[b-0vokl5dp60] {
    font-size: 0.75rem;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
}
.autosave-saved[b-0vokl5dp60]  { color: #16a34a; }
.autosave-pending[b-0vokl5dp60] { color: #d97706; }

/* ═══════════════════════════════════════════════════════════════
   KPI BAR
═══════════════════════════════════════════════════════════════ */
.kpi-bar[b-0vokl5dp60] {
    display: flex;
    align-items: stretch;
    gap: 0;
    background: #fff;
    border: 1px solid var(--color-neutral-100);
    border-radius: 0.625rem;
    overflow: hidden;
    margin-bottom: 0.5rem;
    flex-wrap: wrap;
}

.kpi-card[b-0vokl5dp60] {
    flex: 1;
    min-width: 80px;
    padding: 0.65rem 1rem;
    text-align: center;
    border-right: 1px solid var(--color-neutral-100);
}

.kpi-card:last-child[b-0vokl5dp60] { border-right: none; }

.kpi-divider[b-0vokl5dp60] {
    width: 1px;
    background: var(--color-neutral-200);
    margin: 0.5rem 0;
}

.kpi-green[b-0vokl5dp60] { background: #f0fdf4; }
.kpi-blue[b-0vokl5dp60]  { background: #eff6ff; }
.kpi-amber[b-0vokl5dp60] { background: #fffbeb; }
.kpi-red[b-0vokl5dp60]   { background: #fef2f2; }

.kpi-val[b-0vokl5dp60] {
    font-size: 1.35rem;
    font-weight: 800;
    color: var(--color-neutral-800);
    line-height: 1;
    margin-bottom: 0.2rem;
}

.kpi-lbl[b-0vokl5dp60] {
    font-size: 0.68rem;
    font-weight: 500;
    color: var(--color-neutral-500);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* ── Progress Bar ── */
.progress-bar-wrap[b-0vokl5dp60] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.progress-bar-track[b-0vokl5dp60] {
    flex: 1;
    height: 6px;
    background: var(--color-neutral-100);
    border-radius: 999px;
    overflow: hidden;
}

.progress-bar-fill[b-0vokl5dp60] {
    height: 100%;
    background: linear-gradient(90deg, #16a34a, #4ade80);
    border-radius: 999px;
    transition: width 0.4s ease;
}

.progress-label[b-0vokl5dp60] {
    font-size: 0.75rem;
    color: var(--color-neutral-500);
    white-space: nowrap;
}

/* ── Toast ── */
.toast[b-0vokl5dp60] {
    position: fixed;
    bottom: 1.5rem;
    right: 1.5rem;
    z-index: 9999;
    padding: 0.75rem 1.25rem;
    border-radius: 0.5rem;
    font-size: 0.875rem;
    font-weight: 500;
    max-width: 420px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.12);
    animation: slideIn-b-0vokl5dp60 0.25s ease;
}

.toast-success[b-0vokl5dp60] { background: #166534; color: #fff; }
.toast-error[b-0vokl5dp60]   { background: #991b1b; color: #fff; }

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

/* ═══════════════════════════════════════════════════════════════
   STICKY TOOLBAR (search + filter + actions)
═══════════════════════════════════════════════════════════════ */
.marksheet-toolbar[b-0vokl5dp60] {
    position: sticky;
    top: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    background: #fff;
    border: 1px solid var(--color-neutral-100);
    border-radius: 0.625rem 0.625rem 0 0;
    padding: 0.6rem 1rem;
    flex-wrap: wrap;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}

.toolbar-left[b-0vokl5dp60] {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    flex: 1;
    min-width: 0;
    flex-wrap: wrap;
}

.search-wrap[b-0vokl5dp60] {
    position: relative;
    flex: 1;
    min-width: 180px;
    max-width: 320px;
}

.search-icon[b-0vokl5dp60] {
    position: absolute;
    left: 0.625rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--color-neutral-400);
    font-size: 0.8rem;
    pointer-events: none;
}

.search-input[b-0vokl5dp60] {
    width: 100%;
    padding: 0.4rem 2rem 0.4rem 2rem;
    border: 1px solid var(--color-neutral-200);
    border-radius: 0.375rem;
    font-size: 0.825rem;
    background: var(--color-neutral-50);
    color: var(--color-neutral-800);
    outline: none;
    transition: border-color 0.15s;
}

.search-input:focus[b-0vokl5dp60] {
    border-color: var(--color-primary-400, #60a5fa);
    background: #fff;
}

.search-clear[b-0vokl5dp60] {
    position: absolute;
    right: 0.5rem;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    cursor: pointer;
    color: var(--color-neutral-400);
    padding: 0.1rem;
    font-size: 0.75rem;
}

.filter-select[b-0vokl5dp60] {
    padding: 0.4rem 0.75rem;
    border: 1px solid var(--color-neutral-200);
    border-radius: 0.375rem;
    font-size: 0.8rem;
    background: var(--color-neutral-50);
    color: var(--color-neutral-700);
    cursor: pointer;
    outline: none;
}

.row-count[b-0vokl5dp60] {
    font-size: 0.75rem;
    color: var(--color-neutral-400);
    white-space: nowrap;
}

.toolbar-actions[b-0vokl5dp60] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.btn-save[b-0vokl5dp60] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 1.1rem;
    background: var(--color-primary-600, #2563eb);
    color: #fff;
    border: none;
    border-radius: 0.375rem;
    font-size: 0.825rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s;
    white-space: nowrap;
}
.btn-save:hover:not(:disabled)[b-0vokl5dp60] { background: var(--color-primary-700, #1d4ed8); }
.btn-save:disabled[b-0vokl5dp60] { opacity: 0.55; cursor: not-allowed; }

.btn-publish[b-0vokl5dp60] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 1.1rem;
    background: #16a34a;
    color: #fff;
    border: none;
    border-radius: 0.375rem;
    font-size: 0.825rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s;
    white-space: nowrap;
}
.btn-publish:hover:not(:disabled)[b-0vokl5dp60] { background: #15803d; }
.btn-publish:disabled[b-0vokl5dp60] { opacity: 0.55; cursor: not-allowed; }

/* ── Download Template button (indigo) ── */
.btn-template[b-0vokl5dp60] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 1.1rem;
    background: #4f46e5;
    color: #fff;
    border: none;
    border-radius: 0.375rem;
    font-size: 0.825rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s;
    white-space: nowrap;
}
.btn-template:hover:not(:disabled)[b-0vokl5dp60] { background: #4338ca; }
.btn-template:disabled[b-0vokl5dp60] { opacity: 0.55; cursor: not-allowed; }

/* ── Upload Marks button (teal, styled as label) ── */
.btn-upload[b-0vokl5dp60] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 1.1rem;
    background: #0891b2;
    color: #fff;
    border: none;
    border-radius: 0.375rem;
    font-size: 0.825rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s;
    white-space: nowrap;
}
.btn-upload:hover[b-0vokl5dp60] { background: #0e7490; }
.btn-upload-busy[b-0vokl5dp60] { opacity: 0.55; cursor: not-allowed; pointer-events: none; }

/* ── Import Preview Panel ── */
.import-preview[b-0vokl5dp60] {
    margin: 0.75rem 0;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 0.5rem;
    overflow: hidden;
}
.import-preview-header[b-0vokl5dp60] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.65rem 1rem;
    background: #f8fafc;
    border-bottom: 1px solid #e5e7eb;
    gap: 0.75rem;
    flex-wrap: wrap;
}
.import-preview-title[b-0vokl5dp60] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--color-neutral-800, #1f2937);
}
.import-icon-excel[b-0vokl5dp60] { color: #16a34a; font-size: 1rem; }
.import-stat[b-0vokl5dp60] {
    display: inline-block;
    padding: 0.1rem 0.45rem;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 600;
}
.import-stat-ok[b-0vokl5dp60]  { background: #dcfce7; color: #166534; }
.import-stat-err[b-0vokl5dp60] { background: #fee2e2; color: #991b1b; }
.import-preview-actions[b-0vokl5dp60] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.btn-apply-import[b-0vokl5dp60] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.4rem 0.85rem;
    background: #16a34a;
    color: #fff;
    border: none;
    border-radius: 0.375rem;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s;
}
.btn-apply-import:hover[b-0vokl5dp60] { background: #15803d; }
.btn-dismiss-import[b-0vokl5dp60] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    background: transparent;
    border: 1px solid #d1d5db;
    border-radius: 50%;
    color: #6b7280;
    cursor: pointer;
    font-size: 0.75rem;
}
.btn-dismiss-import:hover[b-0vokl5dp60] { background: #f3f4f6; }
.import-errors-list[b-0vokl5dp60] {
    padding: 0.5rem 1rem;
    border-bottom: 1px solid #e5e7eb;
    background: #fff7f7;
}
.import-error-row[b-0vokl5dp60] {
    display: flex;
    align-items: baseline;
    gap: 0.6rem;
    padding: 0.25rem 0;
    font-size: 0.78rem;
    border-bottom: 1px solid #fee2e2;
}
.import-error-row:last-child[b-0vokl5dp60] { border-bottom: none; }
.import-err-row[b-0vokl5dp60]  { font-weight: 700; color: #ef4444; min-width: 3.5rem; }
.import-err-col[b-0vokl5dp60]  { font-weight: 600; color: #374151; min-width: 7rem; }
.import-err-msg[b-0vokl5dp60]  { color: #991b1b; flex: 1; }
.import-err-val[b-0vokl5dp60]  { color: #6b7280; font-style: italic; }
.import-ok-table[b-0vokl5dp60] { overflow-x: auto; }
.import-preview-table[b-0vokl5dp60] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8rem;
}
.import-preview-table th[b-0vokl5dp60] {
    background: #f1f5f9;
    color: #374151;
    font-weight: 700;
    padding: 0.4rem 0.75rem;
    text-align: left;
    border-bottom: 1px solid #e5e7eb;
}
.import-preview-table td[b-0vokl5dp60] {
    padding: 0.35rem 0.75rem;
    border-bottom: 1px solid #f3f4f6;
    color: #374151;
}
.import-row-ok   td[b-0vokl5dp60] { background: #f0fdf4; }
.import-row-err  td[b-0vokl5dp60] { background: #fff7f0; }
.import-row-blank td[b-0vokl5dp60] { background: #f9fafb; color: #9ca3af; }
.import-status-ok[b-0vokl5dp60]   { color: #16a34a; font-weight: 600; font-size: 0.75rem; }
.import-status-warn[b-0vokl5dp60] { color: #d97706; font-weight: 600; font-size: 0.75rem; }
.import-status-blank[b-0vokl5dp60] { color: #9ca3af; font-weight: 500; font-size: 0.75rem; }

.btn-icon-fa[b-0vokl5dp60] { font-size: 0.8rem; }

/* Keyboard hint bar */
.kb-hint[b-0vokl5dp60] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.35rem 1rem;
    background: #fffbeb;
    border: 1px solid #fde68a;
    border-top: none;
    font-size: 0.72rem;
    color: #92400e;
}

kbd[b-0vokl5dp60] {
    display: inline-block;
    padding: 0.05rem 0.35rem;
    background: #fff;
    border: 1px solid #d1d5db;
    border-radius: 3px;
    font-size: 0.7rem;
    font-family: monospace;
    box-shadow: 0 1px 0 #d1d5db;
}

/* ═══════════════════════════════════════════════════════════════
   TABLE — sticky header + frozen columns
═══════════════════════════════════════════════════════════════ */
.table-scroll-wrap[b-0vokl5dp60] {
    overflow: auto;
    max-height: 70vh;
    border: 1px solid var(--color-neutral-100);
    border-top: none;
    border-radius: 0 0 0.625rem 0.625rem;
    background: #fff;
}

.marksheet-table[b-0vokl5dp60] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
    min-width: 900px;
}

/* ── Sticky Header ── */
.marksheet-table thead tr th[b-0vokl5dp60] {
    position: sticky;
    top: 0;
    z-index: 15;
    background: var(--color-neutral-50);
    border-bottom: 2px solid var(--color-neutral-200);
    padding: 0.75rem 0.875rem;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-neutral-500);
    white-space: nowrap;
    user-select: none;
    text-align: left;
}

/* Frozen column header cells */
.th-frozen[b-0vokl5dp60] {
    z-index: 25 !important;
    background: var(--color-neutral-100) !important;
}

.th-no[b-0vokl5dp60]   { left: 0;     min-width: 44px; width: 44px; }
.th-name[b-0vokl5dp60] { left: 44px;  min-width: 190px; width: 190px; }
.th-roll[b-0vokl5dp60] { left: 234px; min-width: 100px; width: 100px; }

.sortable[b-0vokl5dp60] { cursor: pointer; }
.sortable:hover[b-0vokl5dp60] { color: var(--color-neutral-700); }
.sort-icon[b-0vokl5dp60] { margin-left: 0.25rem; font-size: 0.65rem; opacity: 0.5; }
.total-hint[b-0vokl5dp60] { font-weight: 400; opacity: 0.7; }

/* ── Rows ── */
.marksheet-table tbody tr[b-0vokl5dp60] {
    height: 50px;
    transition: background 0.1s;
}

.marksheet-table tbody tr:hover[b-0vokl5dp60] { background: var(--color-neutral-50) !important; }

.row-odd[b-0vokl5dp60]  { background: #fff; }
.row-even[b-0vokl5dp60] { background: #fafafa; }
.row-published[b-0vokl5dp60]    { background: #f0fdf4; }
.row-error[b-0vokl5dp60]        { background: #fef2f2 !important; }
.row-no-submission[b-0vokl5dp60]{ background: #f9fafb; opacity: 0.7; }

/* Frozen body cells */
.td-frozen[b-0vokl5dp60] {
    position: sticky;
    z-index: 10;
    background: inherit;
    border-right: 1px solid var(--color-neutral-100);
}

.td-no[b-0vokl5dp60]   { left: 0;     min-width: 44px; width: 44px; }
.td-name[b-0vokl5dp60] { left: 44px;  min-width: 190px; width: 190px; }
.td-roll[b-0vokl5dp60] { left: 234px; min-width: 100px; width: 100px; }

/* Keep frozen cell bg in sync with row stripe */
.row-even .td-frozen[b-0vokl5dp60]          { background: #fafafa; }
.row-odd  .td-frozen[b-0vokl5dp60]          { background: #fff; }
.row-published .td-frozen[b-0vokl5dp60]     { background: #f0fdf4; }
.row-error .td-frozen[b-0vokl5dp60]         { background: #fef2f2; }
.row-no-submission .td-frozen[b-0vokl5dp60] { background: #f9fafb; }
.marksheet-table tbody tr:hover .td-frozen[b-0vokl5dp60] { background: var(--color-neutral-50) !important; }

/* Submitted online badge */
.badge-submitted[b-0vokl5dp60] {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 6px;
    font-size: 0.65rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    background: #dbeafe;
    color: #1d4ed8;
    border-radius: 4px;
    vertical-align: middle;
    white-space: nowrap;
}

/* "No submission" placeholder in marks cell */
.no-submission-hint[b-0vokl5dp60] {
    font-size: 0.78rem;
    color: var(--color-neutral-400);
    font-style: italic;
}

/* Cell padding */
.marksheet-table td[b-0vokl5dp60] {
    padding: 0 0.875rem;
    vertical-align: middle;
    border-bottom: 1px solid var(--color-neutral-50);
}

.col-no[b-0vokl5dp60]     { text-align: center; font-size: 0.75rem; color: var(--color-neutral-400); }
.col-name[b-0vokl5dp60]   { font-weight: 500; color: var(--color-neutral-800); font-size: 0.875rem; }
.col-roll[b-0vokl5dp60]   { font-size: 0.8rem; color: var(--color-neutral-500); }
.col-marks[b-0vokl5dp60]  { width: 110px; }
.col-pct[b-0vokl5dp60]    { width: 70px; }
.col-grade[b-0vokl5dp60]  { width: 60px; }
.col-remark[b-0vokl5dp60] { min-width: 180px; }
.col-status[b-0vokl5dp60] { width: 56px; text-align: center; }

/* ── Marks Input ── */
.input-wrap[b-0vokl5dp60] { position: relative; }

.marks-input[b-0vokl5dp60] {
    width: 80px;
    height: 38px;
    padding: 0 0.5rem;
    border: 1.5px solid var(--color-neutral-200);
    border-radius: 0.375rem;
    font-size: 0.9375rem;
    font-weight: 600;
    text-align: center;
    color: var(--color-neutral-800);
    background: #fff;
    outline: none;
    transition: border-color 0.15s, box-shadow 0.15s;
    -moz-appearance: textfield;
}
.marks-input[b-0vokl5dp60]::-webkit-outer-spin-button,
.marks-input[b-0vokl5dp60]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.marks-input:focus[b-0vokl5dp60] {
    border-color: var(--color-primary-500, #3b82f6);
    box-shadow: 0 0 0 3px rgba(59,130,246,0.12);
}
.marks-input.input-error[b-0vokl5dp60] {
    border-color: #ef4444;
    background: #fef2f2;
    box-shadow: 0 0 0 3px rgba(239,68,68,0.12);
}

.input-error-tip[b-0vokl5dp60] {
    position: absolute;
    top: calc(100% + 2px);
    left: 0;
    background: #991b1b;
    color: #fff;
    font-size: 0.68rem;
    padding: 0.15rem 0.4rem;
    border-radius: 3px;
    white-space: nowrap;
    z-index: 30;
    pointer-events: none;
}

.marks-readonly[b-0vokl5dp60] {
    font-size: 0.9375rem;
    font-weight: 700;
    color: #166534;
}

/* ── % Percentage ── */
.pct-value[b-0vokl5dp60]  { font-size: 0.825rem; font-weight: 600; }
.pct-pass[b-0vokl5dp60]   { color: #16a34a; }
.pct-warn[b-0vokl5dp60]   { color: #d97706; }
.pct-fail[b-0vokl5dp60]   { color: #dc2626; }
.pct-empty[b-0vokl5dp60]  { color: var(--color-neutral-300); }

/* ── Grade Badges ── */
.grade-badge[b-0vokl5dp60] {
    display: inline-block;
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.03em;
}
.grade-Aplus[b-0vokl5dp60] { background: #dcfce7; color: #14532d; }
.grade-A[b-0vokl5dp60]     { background: #dcfce7; color: #166534; }
.grade-B[b-0vokl5dp60]     { background: #dbeafe; color: #1e40af; }
.grade-C[b-0vokl5dp60]     { background: #fef9c3; color: #713f12; }
.grade-D[b-0vokl5dp60]     { background: #ffedd5; color: #9a3412; }
.grade-E[b-0vokl5dp60]     { background: #fee2e2; color: #991b1b; }
.grade-F[b-0vokl5dp60]     { background: #fecaca; color: #7f1d1d; }

/* ── Remark Column ── */
.remark-wrap[b-0vokl5dp60] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.remark-input[b-0vokl5dp60] {
    flex: 1;
    min-width: 0;
    padding: 0.35rem 0.5rem;
    border: 1px solid var(--color-neutral-200);
    border-radius: 0.375rem;
    font-size: 0.8rem;
    color: var(--color-neutral-700);
    background: transparent;
    outline: none;
    transition: border-color 0.15s;
}
.remark-input:focus[b-0vokl5dp60] {
    border-color: var(--color-primary-400, #60a5fa);
    background: #fff;
}

.chip-toggle[b-0vokl5dp60] {
    flex-shrink: 0;
    width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: 1px solid var(--color-neutral-200);
    border-radius: 0.25rem;
    cursor: pointer;
    color: var(--color-neutral-400);
    font-size: 0.65rem;
    transition: background 0.1s;
}
.chip-toggle:hover[b-0vokl5dp60] { background: var(--color-neutral-50); }

.quick-chips[b-0vokl5dp60] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    margin-top: 0.25rem;
    padding: 0.3rem;
    background: #fff;
    border: 1px solid var(--color-neutral-200);
    border-radius: 0.375rem;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    position: absolute;
    z-index: 40;
    min-width: 220px;
}

.remark-chip[b-0vokl5dp60] {
    padding: 0.2rem 0.6rem;
    background: var(--color-neutral-100);
    border: 1px solid var(--color-neutral-200);
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 500;
    color: var(--color-neutral-700);
    cursor: pointer;
    transition: background 0.1s;
}
.remark-chip:hover[b-0vokl5dp60] { background: var(--color-primary-50, #eff6ff); border-color: var(--color-primary-300, #93c5fd); }

.remark-readonly[b-0vokl5dp60] { font-size: 0.8rem; color: var(--color-neutral-500); }

/* ── Status Icons ── */
.status-icon[b-0vokl5dp60] { font-size: 1rem; }
.status-published[b-0vokl5dp60] { color: #16a34a; }
.status-saved[b-0vokl5dp60]     { color: var(--color-primary-500, #3b82f6); }
.status-pending[b-0vokl5dp60]   { color: var(--color-neutral-300); }

/* ── Empty filter state ── */
.empty-filter-row[b-0vokl5dp60] {
    text-align: center;
    padding: 2rem;
    color: var(--color-neutral-400);
    font-size: 0.875rem;
}

/* ═══════════════════════════════════════════════════════════════
   PUBLISH CONFIRMATION MODAL
═══════════════════════════════════════════════════════════════ */
.modal-overlay[b-0vokl5dp60] {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.45);
    z-index: 9000;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: fadeIn-b-0vokl5dp60 0.15s ease;
}

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

.modal-box[b-0vokl5dp60] {
    background: #fff;
    border-radius: 0.875rem;
    padding: 2rem 2.25rem;
    max-width: 420px;
    width: 90%;
    box-shadow: 0 20px 60px rgba(0,0,0,0.18);
    text-align: center;
    animation: scaleIn-b-0vokl5dp60 0.18s ease;
}

@keyframes scaleIn-b-0vokl5dp60 { from { transform: scale(0.92); opacity: 0; } to { transform: scale(1); opacity: 1; } }

.modal-icon[b-0vokl5dp60] {
    width: 3rem;
    height: 3rem;
    background: #dcfce7;
    color: #16a34a;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    margin: 0 auto 1rem;
}

.modal-title[b-0vokl5dp60] {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--color-neutral-900);
    margin: 0 0 0.625rem;
}

.modal-body[b-0vokl5dp60] {
    font-size: 0.875rem;
    color: var(--color-neutral-600);
    line-height: 1.6;
    margin: 0 0 1.5rem;
}

.modal-actions[b-0vokl5dp60] {
    display: flex;
    gap: 0.75rem;
    justify-content: center;
}

.btn-modal-cancel[b-0vokl5dp60] {
    padding: 0.55rem 1.25rem;
    background: none;
    border: 1px solid var(--color-neutral-200);
    border-radius: 0.375rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--color-neutral-600);
    cursor: pointer;
}
.btn-modal-cancel:hover[b-0vokl5dp60] { background: var(--color-neutral-50); }

.btn-modal-confirm[b-0vokl5dp60] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.55rem 1.25rem;
    background: #16a34a;
    color: #fff;
    border: none;
    border-radius: 0.375rem;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
}
.btn-modal-confirm:hover[b-0vokl5dp60] { background: #15803d; }

/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE
═══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    .page-wrapper[b-0vokl5dp60] { padding: 0.75rem 0.75rem 2rem; }
    .kpi-bar[b-0vokl5dp60] { flex-wrap: wrap; }
    .kpi-card[b-0vokl5dp60] { min-width: 70px; padding: 0.5rem 0.625rem; }
    .kpi-divider[b-0vokl5dp60] { display: none; }
    .toolbar-left[b-0vokl5dp60] { gap: 0.4rem; }
    .search-wrap[b-0vokl5dp60] { max-width: 100%; }
}

/* ═══════════════════════════════════════════════════════════════
   OFFLINE TAG
═══════════════════════════════════════════════════════════════ */
.offline-tag[b-0vokl5dp60] {
    display: inline-flex;
    align-items: center;
    padding: 0.2rem 0.6rem;
    background: #fff7ed;
    color: #c2410c;
    border: 1px solid #fed7aa;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

/* ═══════════════════════════════════════════════════════════════
   TAB BAR
═══════════════════════════════════════════════════════════════ */
.tab-bar[b-0vokl5dp60] {
    display: flex;
    gap: 0;
    border-bottom: 2px solid var(--color-neutral-100);
    margin-bottom: 1.25rem;
}

.tab-btn[b-0vokl5dp60] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.6rem 1.25rem;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    cursor: pointer;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--color-neutral-500);
    transition: color 0.15s, border-color 0.15s;
}

.tab-btn:hover[b-0vokl5dp60] { color: var(--color-neutral-700); }

.tab-active[b-0vokl5dp60] {
    color: var(--color-primary-600, #2563eb);
    border-bottom-color: var(--color-primary-600, #2563eb);
    font-weight: 600;
}

.tab-icon-fa[b-0vokl5dp60] { font-size: 0.875rem; }

.tab-badge[b-0vokl5dp60] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.25rem;
    height: 1.25rem;
    padding: 0 0.3rem;
    background: #ef4444;
    color: #fff;
    border-radius: 999px;
    font-size: 0.65rem;
    font-weight: 700;
    margin-left: 0.15rem;
}

/* ═══════════════════════════════════════════════════════════════
   WEAK STUDENT ANALYSIS — FULL REDESIGN
═══════════════════════════════════════════════════════════════ */

/* Offline exam notice */
.an-notice[b-0vokl5dp60] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: #eff6ff;
    border-left: 3px solid #3b82f6;
    border-radius: 0.375rem;
    padding: 0.5rem 0.875rem;
    font-size: 0.8rem;
    color: #1e3a5f;
    margin-bottom: 0.875rem;
}
.an-notice-icon[b-0vokl5dp60] { color: #3b82f6; }

/* Pending urgency banner */
.an-pending-banner[b-0vokl5dp60] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    background: #fff7ed;
    border: 1.5px solid #fed7aa;
    border-radius: 0.5rem;
    padding: 0.75rem 1rem;
    margin-bottom: 1rem;
    flex-wrap: wrap;
}
.an-pending-left[b-0vokl5dp60] {
    display: flex;
    align-items: flex-start;
    gap: 0.625rem;
    color: #9a3412;
    font-size: 0.825rem;
}
.an-pending-left .fas[b-0vokl5dp60] { font-size: 1rem; margin-top: 0.1rem; color: #ea580c; flex-shrink: 0; }
.an-pending-left div[b-0vokl5dp60] { display: flex; flex-direction: column; gap: 0.1rem; }
.an-pending-left strong[b-0vokl5dp60] { font-size: 0.875rem; }
.an-pending-left span[b-0vokl5dp60] { font-size: 0.78rem; opacity: 0.85; }
.an-pending-btn[b-0vokl5dp60] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.4rem 1rem;
    background: #ea580c;
    color: #fff;
    border: none;
    border-radius: 0.375rem;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
}
.an-pending-btn:hover[b-0vokl5dp60] { background: #c2410c; }

/* ── Two-panel layout ── */
.an-layout[b-0vokl5dp60] {
    display: grid;
    grid-template-columns: 1fr 280px;
    gap: 1.25rem;
    align-items: start;
}

@media (max-width: 1100px) {
    .an-layout[b-0vokl5dp60] { grid-template-columns: 1fr; }
}

.an-main[b-0vokl5dp60] { display: flex; flex-direction: column; gap: 1rem; min-width: 0; }

/* ── Hero KPI cards ── */
.an-hero-kpis[b-0vokl5dp60] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.75rem;
}

@media (max-width: 900px) {
    .an-hero-kpis[b-0vokl5dp60] { grid-template-columns: repeat(2, 1fr); }
}

.an-hero-card[b-0vokl5dp60] {
    padding: 1rem 1.25rem;
    border-radius: 0.625rem;
    border: 1px solid transparent;
}

.an-hero-pass[b-0vokl5dp60]   { background: #f0fdf4; border-color: #bbf7d0; }
.an-hero-fail[b-0vokl5dp60]   { background: #fef2f2; border-color: #fecaca; }
.an-hero-avg[b-0vokl5dp60]    { background: #eff6ff; border-color: #bfdbfe; }
.an-hero-range[b-0vokl5dp60]  { background: #fafafa; border-color: var(--color-neutral-100); }

.an-hero-val[b-0vokl5dp60] {
    font-size: 2rem;
    font-weight: 800;
    color: var(--color-neutral-900);
    line-height: 1;
    margin-bottom: 0.2rem;
}
.an-hero-val-sm[b-0vokl5dp60] { font-size: 1.5rem; }

.an-hero-pass .an-hero-val[b-0vokl5dp60]  { color: #15803d; }
.an-hero-fail .an-hero-val[b-0vokl5dp60]  { color: #dc2626; }
.an-hero-avg  .an-hero-val[b-0vokl5dp60]  { color: #1d4ed8; }

.an-hero-lbl[b-0vokl5dp60] {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--color-neutral-600);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.an-hero-sub[b-0vokl5dp60] {
    font-size: 0.72rem;
    color: var(--color-neutral-400);
    margin-top: 0.2rem;
}

.an-hero-range-row[b-0vokl5dp60] {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 0.1rem;
}
.an-hero-range-div[b-0vokl5dp60] {
    width: 1px;
    height: 2rem;
    background: var(--color-neutral-200);
}

.an-green[b-0vokl5dp60] { color: #15803d !important; }
.an-red[b-0vokl5dp60]   { color: #dc2626 !important; }

/* ── Pass/Fail stacked bar ── */
.an-pf-section[b-0vokl5dp60] {
    background: #fff;
    border: 1px solid var(--color-neutral-100);
    border-radius: 0.625rem;
    padding: 1rem 1.25rem;
}

.an-pf-header[b-0vokl5dp60] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.625rem;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.an-section-title[b-0vokl5dp60] {
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-neutral-500);
}

.an-pf-legend[b-0vokl5dp60] {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.75rem;
    color: var(--color-neutral-500);
}

.an-dot[b-0vokl5dp60] {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
}
.an-dot-green[b-0vokl5dp60] { background: #16a34a; }
.an-dot-red[b-0vokl5dp60]   { background: #dc2626; }
.an-dot-gray[b-0vokl5dp60]  { background: #9ca3af; }

.an-pf-bar[b-0vokl5dp60] {
    display: flex;
    height: 28px;
    border-radius: 0.375rem;
    overflow: hidden;
    gap: 2px;
    margin-bottom: 0.5rem;
}

.an-pf-seg[b-0vokl5dp60] {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.72rem;
    font-weight: 700;
    color: #fff;
    min-width: 28px;
    transition: width 0.4s ease;
}
.an-pf-pass[b-0vokl5dp60]    { background: #16a34a; border-radius: 0.25rem 0 0 0.25rem; }
.an-pf-fail[b-0vokl5dp60]    { background: #dc2626; }
.an-pf-pending[b-0vokl5dp60] { background: #9ca3af; border-radius: 0 0.25rem 0.25rem 0; }

.an-pf-counts[b-0vokl5dp60] {
    display: flex;
    gap: 1.5rem;
    font-size: 0.8rem;
}
.an-pf-count-pass[b-0vokl5dp60]    { color: #15803d; }
.an-pf-count-fail[b-0vokl5dp60]    { color: #dc2626; }
.an-pf-count-pending[b-0vokl5dp60] { color: var(--color-neutral-400); }

/* ── Grade distribution bars ── */
.an-grade-dist[b-0vokl5dp60] {
    background: #fff;
    border: 1px solid var(--color-neutral-100);
    border-radius: 0.625rem;
    padding: 1rem 1.25rem;
}

.an-grade-bars[b-0vokl5dp60] { margin-top: 0.75rem; display: flex; flex-direction: column; gap: 0.5rem; }

.an-grade-row[b-0vokl5dp60] {
    display: flex;
    align-items: center;
    gap: 0.625rem;
}
.an-grade-lbl[b-0vokl5dp60]  { width: 72px; font-size: 0.78rem; font-weight: 500; color: var(--color-neutral-600); flex-shrink: 0; }
.an-grade-track[b-0vokl5dp60] { flex: 1; height: 18px; background: var(--color-neutral-100); border-radius: 999px; overflow: hidden; }
.an-grade-fill[b-0vokl5dp60]  { height: 100%; border-radius: 999px; transition: width 0.5s ease; min-width: 4px; }
.an-grade-count[b-0vokl5dp60] { width: 60px; font-size: 0.75rem; font-weight: 600; color: var(--color-neutral-700); text-align: right; }
.an-grade-pct[b-0vokl5dp60]   { font-weight: 400; color: var(--color-neutral-400); }

.gd-a[b-0vokl5dp60]    { background: #16a34a; }
.gd-b[b-0vokl5dp60]    { background: #4ade80; }
.gd-d[b-0vokl5dp60]    { background: #fbbf24; }
.gd-e[b-0vokl5dp60]    { background: #f97316; }
.gd-f[b-0vokl5dp60]    { background: #ef4444; }

/* ── Group header + search ── */
.an-groups-header[b-0vokl5dp60] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-top: 0.25rem;
}

.an-search-wrap[b-0vokl5dp60] {
    position: relative;
}
.an-search-icon[b-0vokl5dp60] {
    position: absolute;
    left: 0.6rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--color-neutral-400);
    font-size: 0.75rem;
    pointer-events: none;
}
.an-search-input[b-0vokl5dp60] {
    padding: 0.35rem 2rem 0.35rem 1.75rem;
    border: 1px solid var(--color-neutral-200);
    border-radius: 0.375rem;
    font-size: 0.8rem;
    width: 220px;
    background: var(--color-neutral-50);
    color: var(--color-neutral-800);
    outline: none;
}
.an-search-input:focus[b-0vokl5dp60] { border-color: var(--color-primary-400, #60a5fa); background: #fff; }
.an-search-clear[b-0vokl5dp60] {
    position: absolute;
    right: 0.5rem;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    cursor: pointer;
    color: var(--color-neutral-400);
    font-size: 0.7rem;
    padding: 0.1rem;
}

/* ── Side-by-side columns ── */
.an-cols[b-0vokl5dp60] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 0.75rem;
    align-items: start;
}

.an-col[b-0vokl5dp60] {
    background: #fff;
    border: 1px solid var(--color-neutral-100);
    border-radius: 0.625rem;
    overflow: hidden;
}

.an-col-header[b-0vokl5dp60] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.6rem 0.875rem;
    cursor: pointer;
    user-select: none;
    font-size: 0.8rem;
    font-weight: 600;
    gap: 0.4rem;
    flex-wrap: wrap;
}
.an-col-header:hover[b-0vokl5dp60] { filter: brightness(0.96); }

.an-col-red[b-0vokl5dp60]    { background: #fef2f2; color: #991b1b; border-bottom: 1px solid #fecaca; }
.an-col-amber[b-0vokl5dp60]  { background: #fff7ed; color: #9a3412; border-bottom: 1px solid #fed7aa; }
.an-col-yellow[b-0vokl5dp60] { background: #fefce8; color: #854d0e; border-bottom: 1px solid #fde047; }
.an-col-gray[b-0vokl5dp60]   { background: #f9fafb; color: var(--color-neutral-600); border-bottom: 1px solid var(--color-neutral-200); }

.an-col-dot[b-0vokl5dp60] { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.an-col-dot-red[b-0vokl5dp60]    { background: #ef4444; }
.an-col-dot-amber[b-0vokl5dp60]  { background: #f97316; }
.an-col-dot-yellow[b-0vokl5dp60] { background: #eab308; }
.an-col-dot-gray[b-0vokl5dp60]   { background: #9ca3af; }

.an-col-title[b-0vokl5dp60]    { font-weight: 700; }
.an-col-subtitle[b-0vokl5dp60] { font-size: 0.72rem; font-weight: 400; opacity: 0.75; }

.an-col-badge[b-0vokl5dp60] {
    margin-left: auto;
    padding: 0.1rem 0.45rem;
    border-radius: 999px;
    font-size: 0.68rem;
    font-weight: 700;
}
.an-badge-red[b-0vokl5dp60]    { background: #fee2e2; color: #991b1b; }
.an-badge-amber[b-0vokl5dp60]  { background: #ffedd5; color: #9a3412; }
.an-badge-yellow[b-0vokl5dp60] { background: #fef9c3; color: #713f12; }
.an-badge-gray[b-0vokl5dp60]   { background: #f3f4f6; color: var(--color-neutral-600); }

.an-col-chevron[b-0vokl5dp60] { font-size: 0.65rem; opacity: 0.5; flex-shrink: 0; }

/* Student rows inside columns */
.an-student-row[b-0vokl5dp60] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.875rem;
    border-bottom: 1px solid var(--color-neutral-50);
    font-size: 0.82rem;
    min-height: 46px;
    flex-wrap: wrap;
}
.an-student-row:last-child[b-0vokl5dp60] { border-bottom: none; }
.an-student-row:hover[b-0vokl5dp60] { background: var(--color-neutral-50); }

.an-student-name[b-0vokl5dp60]  { flex: 1; font-weight: 500; color: var(--color-neutral-800); min-width: 80px; }
.an-student-roll[b-0vokl5dp60]  { font-size: 0.73rem; color: var(--color-neutral-400); min-width: 44px; }
.an-student-marks[b-0vokl5dp60] { font-size: 0.82rem; font-weight: 600; color: var(--color-neutral-700); min-width: 44px; }
.an-out-of[b-0vokl5dp60]        { font-size: 0.72rem; font-weight: 400; color: var(--color-neutral-400); }
.an-student-pct[b-0vokl5dp60]   { font-size: 0.82rem; font-weight: 700; min-width: 44px; text-align: right; }

.an-pct-danger[b-0vokl5dp60]  { color: #dc2626; }
.an-pct-warning[b-0vokl5dp60] { color: #ea580c; }
.an-pct-caution[b-0vokl5dp60] { color: #ca8a04; }
.an-muted[b-0vokl5dp60]       { color: var(--color-neutral-300); }
.an-row-muted[b-0vokl5dp60]   { opacity: 0.65; }

.an-col-empty[b-0vokl5dp60] {
    padding: 0.75rem 0.875rem;
    font-size: 0.78rem;
    color: var(--color-neutral-400);
    text-align: center;
}

/* ── Right sidebar ── */
.an-sidebar[b-0vokl5dp60] {
    background: #fff;
    border: 1px solid var(--color-neutral-100);
    border-radius: 0.75rem;
    padding: 1.25rem;
    position: sticky;
    top: 0;
}

.an-sidebar-title[b-0vokl5dp60] {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-neutral-400);
    margin-bottom: 1rem;
}

/* CSS ring chart */
.an-ring-wrap[b-0vokl5dp60] {
    position: relative;
    width: 120px;
    height: 120px;
    margin: 0 auto 1.25rem;
}
.an-ring-svg[b-0vokl5dp60] {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}
.an-ring-track[b-0vokl5dp60] {
    fill: none;
    stroke: var(--color-neutral-100);
    stroke-width: 10;
}
.an-ring-fill[b-0vokl5dp60] {
    fill: none;
    stroke-width: 10;
    stroke-linecap: round;
    stroke-dasharray: 283;
    transition: stroke-dashoffset 0.6s ease, stroke 0.4s ease;
}
.an-ring-label[b-0vokl5dp60] {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.an-ring-val[b-0vokl5dp60] {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--color-neutral-900);
    line-height: 1;
}
.an-ring-lbl[b-0vokl5dp60] {
    font-size: 0.68rem;
    color: var(--color-neutral-400);
    font-weight: 500;
    margin-top: 0.15rem;
}

/* Sidebar stat rows */
.an-sb-stats[b-0vokl5dp60] { margin-bottom: 1.25rem; }
.an-sb-row[b-0vokl5dp60] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.35rem 0;
    border-bottom: 1px solid var(--color-neutral-50);
    font-size: 0.82rem;
}
.an-sb-lbl[b-0vokl5dp60] { color: var(--color-neutral-500); font-weight: 400; }
.an-sb-val[b-0vokl5dp60] { font-weight: 700; color: var(--color-neutral-800); }

/* Recommendations */
.an-reco-title[b-0vokl5dp60] {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-neutral-400);
    margin-bottom: 0.625rem;
}
.an-reco-list[b-0vokl5dp60] { display: flex; flex-direction: column; gap: 0.5rem; }
.an-reco[b-0vokl5dp60] {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 0.5rem 0.625rem;
    border-radius: 0.375rem;
    font-size: 0.78rem;
    line-height: 1.45;
}
.an-reco .fas[b-0vokl5dp60] { font-size: 0.875rem; margin-top: 0.1rem; flex-shrink: 0; }
.an-reco-danger[b-0vokl5dp60]  { background: #fef2f2; color: #991b1b; }
.an-reco-danger  .fas[b-0vokl5dp60] { color: #dc2626; }
.an-reco-warning[b-0vokl5dp60] { background: #fff7ed; color: #9a3412; }
.an-reco-warning .fas[b-0vokl5dp60] { color: #ea580c; }
.an-reco-info[b-0vokl5dp60]    { background: #eff6ff; color: #1e40af; }
.an-reco-info    .fas[b-0vokl5dp60] { color: #3b82f6; }
.an-reco-success[b-0vokl5dp60] { background: #f0fdf4; color: #166534; }
.an-reco-success .fas[b-0vokl5dp60] { color: #16a34a; }

/* all-passed state */
.all-passed[b-0vokl5dp60] { text-align: center; padding: 2.5rem 1rem; color: #166534; }
.all-passed p[b-0vokl5dp60] { font-size: 0.9rem; font-weight: 500; margin-top: 0.75rem; }

/* analysis empty state */
.analysis-empty[b-0vokl5dp60] { text-align: center; padding: 3rem 1rem; color: var(--color-neutral-400); }
.analysis-empty .empty-icon[b-0vokl5dp60] { width: 3rem; height: 3rem; margin: 0 auto 1rem; opacity: 0.4; }
.analysis-empty p[b-0vokl5dp60] { font-size: 0.9rem; }

/* badge-pending (reused in analysis) */
.badge-pending[b-0vokl5dp60] {
    display: inline-block;
    padding: 0.15rem 0.45rem;
    background: var(--color-neutral-100);
    color: var(--color-neutral-500);
    border-radius: 999px;
    font-size: 0.68rem;
    font-weight: 600;
}

@media (max-width: 700px) {
    .an-hero-kpis[b-0vokl5dp60] { grid-template-columns: repeat(2, 1fr); }
    .an-cols[b-0vokl5dp60] { grid-template-columns: 1fr; }
    .an-search-input[b-0vokl5dp60] { width: 160px; }
}

/* /Pages/Teacher/Exams/OMROverview.razor.rz.scp.css */
/* Styles handled via Tailwind utility classes in markup */
/* /Pages/Teacher/Exams/OMRReview.razor.rz.scp.css */
/* ============================================================
   OMR Review Page — OMRReview.razor.css
   ============================================================ */

.omr-review-page[b-0ct149se66] {
    padding: var(--spacing-lg);
    max-width: 1000px;
    margin: 0 auto;
}

/* ── Page header ── */
.page-header[b-0ct149se66] {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-xl);
    flex-wrap: wrap;
}

.btn-back-icon[b-0ct149se66] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1.5px solid var(--border-color);
    background: var(--surface-bg);
    color: var(--text-secondary);
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
    flex-shrink: 0;
}

.btn-back-icon:hover[b-0ct149se66] {
    background: var(--primary-color);
    color: white;
    border-color: var(--primary-color);
}

.page-title[b-0ct149se66] {
    font-size: var(--font-size-xl);
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
    flex: 1;
}

.header-meta[b-0ct149se66] {
    margin-left: auto;
}

/* ── Confidence badges ── */
.badge-confidence[b-0ct149se66],
.conf-badge[b-0ct149se66] {
    display: inline-flex;
    align-items: center;
    padding: 2px 10px;
    border-radius: 12px;
    font-size: var(--font-size-xs);
    font-weight: 600;
}

.confidence-high[b-0ct149se66],
.conf-high[b-0ct149se66] {
    background: #dcfce7;
    color: #15803d;
}

.confidence-medium[b-0ct149se66],
.conf-medium[b-0ct149se66] {
    background: #fef9c3;
    color: #854d0e;
}

.confidence-low[b-0ct149se66],
.conf-low[b-0ct149se66] {
    background: #fee2e2;
    color: #991b1b;
}

/* ── Info / summary card ── */
.info-card[b-0ct149se66] {
    background: var(--surface-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-lg);
    padding: var(--spacing-lg);
    margin-bottom: var(--spacing-lg);
}

.info-grid[b-0ct149se66] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: var(--spacing-md);
}

.info-item[b-0ct149se66] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.info-label[b-0ct149se66] {
    font-size: var(--font-size-xs);
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.info-value[b-0ct149se66] {
    font-size: var(--font-size-base);
    font-weight: 600;
    color: var(--text-primary);
}

.score-value[b-0ct149se66] {
    color: var(--primary-color);
    font-size: var(--font-size-lg);
}

/* ── OMR sheet image card ── */
.omr-image-card[b-0ct149se66] {
    background: var(--surface-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-lg);
    padding: var(--spacing-lg);
    margin-bottom: var(--spacing-lg);
    overflow: hidden;
}

.section-title[b-0ct149se66] {
    font-size: var(--font-size-base);
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 var(--spacing-md) 0;
    padding-bottom: var(--spacing-sm);
    border-bottom: 1px solid var(--border-color);
}

.section-hint[b-0ct149se66] {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    margin: -8px 0 var(--spacing-md) 0;
}

.omr-image[b-0ct149se66] {
    max-width: 100%;
    height: auto;
    border-radius: var(--border-radius);
    border: 1px solid var(--border-color);
    display: block;
    margin: 0 auto;
}

/* ── Answers card ── */
.answers-card[b-0ct149se66] {
    background: var(--surface-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-lg);
    padding: var(--spacing-lg);
    margin-bottom: var(--spacing-lg);
}

.answers-header[b-0ct149se66] {
    margin-bottom: var(--spacing-md);
}

/* ── Answers table ── */
.answers-table-container[b-0ct149se66] {
    overflow-x: auto;
    margin-bottom: var(--spacing-lg);
}

.answers-table[b-0ct149se66] {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--font-size-sm);
}

.answers-table th[b-0ct149se66] {
    background: var(--page-bg);
    color: var(--text-secondary);
    font-weight: 600;
    text-transform: uppercase;
    font-size: var(--font-size-xs);
    letter-spacing: 0.05em;
    padding: var(--spacing-sm) var(--spacing-md);
    text-align: left;
    border-bottom: 2px solid var(--border-color);
    white-space: nowrap;
}

.answers-table td[b-0ct149se66] {
    padding: var(--spacing-sm) var(--spacing-md);
    border-bottom: 1px solid var(--border-color);
    vertical-align: middle;
}

.row-correct td[b-0ct149se66] {
    background: #f0fdf4;
}

.row-incorrect td[b-0ct149se66] {
    background: #fff7f7;
}

.row-overridden td[b-0ct149se66] {
    background: #fffbeb;
}

.col-qnum[b-0ct149se66] {
    width: 48px;
    text-align: center;
    font-weight: 600;
    color: var(--text-secondary);
}

/* ── Answer bubbles ── */
.answer-bubble[b-0ct149se66] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    height: 28px;
    padding: 0 8px;
    border-radius: 14px;
    background: var(--page-bg);
    border: 1.5px solid var(--border-color);
    font-weight: 700;
    font-size: var(--font-size-sm);
    color: var(--text-primary);
}

.answer-key[b-0ct149se66] {
    background: #dbeafe;
    border-color: #93c5fd;
    color: #1d4ed8;
}

/* ── Status tags ── */
.status-tag[b-0ct149se66] {
    display: inline-flex;
    align-items: center;
    padding: 2px 10px;
    border-radius: 12px;
    font-size: var(--font-size-xs);
    font-weight: 600;
    white-space: nowrap;
}

.tag-correct[b-0ct149se66] {
    background: #dcfce7;
    color: #15803d;
}

.tag-incorrect[b-0ct149se66] {
    background: #fee2e2;
    color: #991b1b;
}

.tag-overridden[b-0ct149se66] {
    background: #fef9c3;
    color: #854d0e;
}

/* ── Override input ── */
.override-group[b-0ct149se66] {
    display: flex;
    align-items: center;
}

.override-input[b-0ct149se66] {
    width: 64px;
    padding: 4px 8px;
    border: 1.5px solid var(--border-color);
    border-radius: var(--border-radius);
    font-size: var(--font-size-sm);
    font-weight: 600;
    text-align: center;
    text-transform: uppercase;
    background: var(--page-bg);
    color: var(--text-primary);
    transition: border-color 0.15s;
}

.override-input:focus[b-0ct149se66] {
    outline: none;
    border-color: var(--primary-color);
}

/* ── Save error banner ── */
.save-error-banner[b-0ct149se66] {
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: var(--border-radius);
    padding: var(--spacing-md);
    margin-bottom: var(--spacing-md);
    color: #7f1d1d;
    font-size: var(--font-size-sm);
}

/* ── Action row ── */
.action-row[b-0ct149se66] {
    display: flex;
    gap: var(--spacing-md);
    justify-content: flex-end;
    flex-wrap: wrap;
    border-top: 1px solid var(--border-color);
    padding-top: var(--spacing-lg);
    margin-top: var(--spacing-sm);
}

.btn-back[b-0ct149se66] {
    padding: var(--spacing-sm) var(--spacing-lg);
    border: 1.5px solid var(--border-color);
    border-radius: var(--border-radius);
    background: var(--surface-bg);
    color: var(--text-secondary);
    font-size: var(--font-size-base);
    font-weight: 500;
    cursor: pointer;
    margin-top: var(--spacing-md);
}

/* ── Pending card ── */
.pending-card[b-0ct149se66] {
    background: var(--surface-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-lg);
    padding: var(--spacing-2xl);
    text-align: center;
    max-width: 480px;
    margin: 0 auto;
}

.pending-icon[b-0ct149se66] {
    font-size: 3rem;
    margin-bottom: var(--spacing-md);
}

.pending-card h2[b-0ct149se66] {
    font-size: var(--font-size-lg);
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 var(--spacing-sm) 0;
}

.pending-card p[b-0ct149se66] {
    color: var(--text-secondary);
    margin: 0 0 var(--spacing-sm) 0;
}

.pending-detail[b-0ct149se66] {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
}

.pending-actions[b-0ct149se66] {
    display: flex;
    gap: var(--spacing-md);
    justify-content: center;
    flex-wrap: wrap;
    margin-top: var(--spacing-xl);
}

/* ── Empty answers ── */
.empty-answers[b-0ct149se66] {
    text-align: center;
    padding: var(--spacing-2xl);
    color: var(--text-secondary);
}

/* ── Loading / error states ── */
.loading-state[b-0ct149se66],
.error-state[b-0ct149se66] {
    text-align: center;
    padding: var(--spacing-2xl) var(--spacing-lg);
    color: var(--text-secondary);
}

.spinner[b-0ct149se66] {
    width: 40px;
    height: 40px;
    border: 3px solid var(--border-color);
    border-top-color: var(--primary-color);
    border-radius: 50%;
    animation: spin-b-0ct149se66 0.8s linear infinite;
    margin: 0 auto var(--spacing-md);
}

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

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

.icon-error[b-0ct149se66] {
    font-size: 2.5rem;
    margin-bottom: var(--spacing-md);
}

.error-state p[b-0ct149se66] {
    margin-bottom: var(--spacing-lg);
    color: var(--danger-color);
}

/* ── Responsive ── */
@media (max-width: 768px) {
    .omr-review-page[b-0ct149se66] {
        padding: var(--spacing-md);
    }

    .info-grid[b-0ct149se66] {
        grid-template-columns: repeat(2, 1fr);
    }

    .action-row[b-0ct149se66] {
        flex-direction: column-reverse;
    }

    

    .col-confidence[b-0ct149se66],
    .col-status[b-0ct149se66] {
        display: none;
    }
}

@media (max-width: 480px) {
    .answers-table th[b-0ct149se66],
    .answers-table td[b-0ct149se66] {
        padding: var(--spacing-xs) var(--spacing-sm);
    }

    .info-grid[b-0ct149se66] {
        grid-template-columns: 1fr 1fr;
    }
}
/* /Pages/Teacher/Exams/OMRStatus.razor.rz.scp.css */
/* Styles handled via Tailwind utility classes in markup */
/* /Pages/Teacher/Exams/OMRUpload.razor.rz.scp.css */
/* Styles handled via Tailwind utility classes in markup */
/* /Pages/Teacher/Exams/OverallFeedback.razor.rz.scp.css */
/* Styles handled via Tailwind utility classes in markup */
/* /Pages/Teacher/Exams/Preview.razor.rz.scp.css */
/* =============================================================
   Preview.razor — page chrome only.
   Paper styling lives in ExamPaperIframe.razor.css + the engine.
   OMR sheet styling lives inside <ExamOmrSheet>.
   ============================================================= */

/* ── Page wrapper ──────────────────────────────────────────────── */
.preview-page[b-gznjzz0kao] {
    min-height: 100vh;
    background: var(--color-bg-subtle, #f3f4f6);
    padding: 0 0 48px 0;
}

/* ── Sticky toolbar ────────────────────────────────────────────── */
.preview-toolbar[b-gznjzz0kao] {
    position: sticky;
    top: 0;
    z-index: 100;
    background: #fff;
    border-bottom: 1.5px solid var(--color-neutral-200, #e5e7eb);
    padding: 10px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
}

.toolbar-left[b-gznjzz0kao],
.toolbar-right[b-gznjzz0kao] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.paper-title[b-gznjzz0kao] {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--color-neutral-800, #1f2937);
    margin-left: 4px;
    max-width: 320px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Ghost button */
.action-btn[b-gznjzz0kao] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    font-size: 0.825rem;
    font-weight: 600;
    border-radius: 8px;
    border: 1.5px solid #d1d5db;
    background: #fff;
    color: #374151;
    cursor: pointer;
    white-space: nowrap;
    text-decoration: none;
    line-height: 1.25;
    transition: background 0.15s, border-color 0.15s, color 0.15s, box-shadow 0.15s;
}
.action-btn:hover[b-gznjzz0kao] {
    background: var(--color-primary-50, #f0fdf9);
    border-color: var(--color-primary-400, #4A9B8E);
    color: var(--color-primary-700, #2D7var(--color-teal-500)E);
    box-shadow: 0 2px 6px rgba(74,155,142,.12);
}
.action-btn:disabled[b-gznjzz0kao] {
    opacity: 0.5;
    cursor: not-allowed;
    background: #fff;
    color: #9ca3af;
    border-color: #e5e7eb;
    box-shadow: none;
}
.action-btn i[b-gznjzz0kao] { font-size: 0.8rem; }

/* Layout picker */
.layout-select-label[b-gznjzz0kao] {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-neutral-500, #6b7280);
}

.layout-select[b-gznjzz0kao] {
    height: 36px;
    padding: 0 8px;
    border: 1.5px solid #d1d5db;
    border-radius: 6px;
    background: #fff;
    color: #374151;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.layout-select:hover[b-gznjzz0kao] { border-color: var(--color-primary-400, #4A9B8E); }
.layout-select:focus[b-gznjzz0kao] {
    outline: none;
    border-color: var(--color-primary-500, #2D7var(--color-teal-500)E);
    box-shadow: 0 0 0 3px rgba(74,155,142,.15);
}

/* PDF pill group */
.pdf-btn-group[b-gznjzz0kao] {
    display: inline-flex;
    align-items: stretch;
    border: 1.5px solid #d1d5db;
    border-radius: 8px;
    overflow: hidden;
}
.pdf-dl-btn[b-gznjzz0kao] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 38px;
    padding: 0 14px;
    font-size: 0.82rem;
    font-weight: 700;
    border: none;
    cursor: pointer;
    white-space: nowrap;
    color: #fff;
    transition: filter 0.15s;
}
.pdf-dl-btn--paper[b-gznjzz0kao] { background: #16a34a; }
.pdf-dl-btn--paper:hover:not(:disabled)[b-gznjzz0kao] { filter: brightness(0.9); }
.pdf-dl-btn--key[b-gznjzz0kao]   { background: #d97706; border-left: 1.5px solid rgba(255,255,255,.2); }
.pdf-dl-btn--key:hover:not(:disabled)[b-gznjzz0kao]   { filter: brightness(0.9); }
.pdf-dl-btn:disabled[b-gznjzz0kao] { opacity: 0.72; cursor: not-allowed; filter: none; }
.pdf-dl-btn .fa-spinner[b-gznjzz0kao] { animation: pdf-spin-b-gznjzz0kao 0.75s linear infinite; }
@keyframes pdf-spin-b-gznjzz0kao { to { transform: rotate(360deg); } }

/* Delivery mode badge */
.delivery-badge[b-gznjzz0kao] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 12px;
    border-radius: 4px;
    font-size: 0.85rem;
    font-weight: 700;
    border: 2px solid;
}
.badge-omr[b-gznjzz0kao]    { border-color: #c0392b; color: #c0392b; }
.badge-online[b-gznjzz0kao] { border-color: #2980b9; color: #2980b9; }

/* ── OMR answer sheet wrap ─────────────────────────────────────── */
.omr-sheet-wrap[b-gznjzz0kao] {
    max-width: 860px;
    margin: 32px auto 0 auto;
    background: #fff;
    border: 1px solid var(--color-border-subtle, #e5e7eb);
    border-radius: var(--radius-md, 12px);
    padding: 24px 28px;
    box-shadow: 0 2px 16px rgba(0,0,0,0.07);
}

/* ── Loading / error states ────────────────────────────────────── */
.loading-state[b-gznjzz0kao],
.error-state[b-gznjzz0kao] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 80px 24px;
    gap: 16px;
    color: #6b7280;
    text-align: center;
}
.error-state i[b-gznjzz0kao]  { font-size: 2.5rem; color: #ef4444; }
.error-state h3[b-gznjzz0kao] { font-size: 1.25rem; font-weight: 600; color: #374151; margin: 0; }

.spinner[b-gznjzz0kao] {
    width: 40px;
    height: 40px;
    border: 3px solid #e5e7eb;
    border-top-color: var(--color-primary-500, #2D7var(--color-teal-500)E);
    border-radius: 50%;
    animation: pdf-spin-b-gznjzz0kao 0.8s linear infinite;
}

.btn-primary[b-gznjzz0kao] {
    padding: 8px 18px;
    border: none;
    border-radius: 6px;
    background: var(--color-primary-500, #2D7var(--color-teal-500)E);
    color: #fff;
    font-weight: 600;
    cursor: pointer;
    transition: filter 0.15s;
}
.btn-primary:hover[b-gznjzz0kao] { filter: brightness(0.92); }

/* ── Print ─────────────────────────────────────────────────────── */
@media print {
    .no-print[b-gznjzz0kao],
    .preview-toolbar[b-gznjzz0kao] { display: none !important; }

    .preview-page[b-gznjzz0kao] { background: white !important; padding: 0 !important; }

    .omr-sheet-wrap[b-gznjzz0kao] {
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        border: none !important;
        border-radius: 0 !important;
        box-shadow: none !important;
    }

    @page { size: A4 portrait; margin: 20mm 18mm 22mm 25mm; }
}

/* ── Mobile ────────────────────────────────────────────────────── */
@media (max-width: 600px) {
    .preview-toolbar[b-gznjzz0kao] { flex-direction: column; align-items: stretch; padding: 10px 12px; }
    .toolbar-left[b-gznjzz0kao], .toolbar-right[b-gznjzz0kao] { width: 100%; }
    .paper-title[b-gznjzz0kao] { max-width: 100%; }
    .layout-select[b-gznjzz0kao] { flex: 1; }
}
/* /Pages/Teacher/Exams/Review/Index.razor.rz.scp.css */
/* ============================================================
   Review & Publish — Enterprise Layout
   ============================================================ */

.rv-page[b-9pxl9pgm4g] {
    max-width: 1440px;
    margin: 0 auto;
    padding: 2rem 2.5rem 7rem;
    background: #F8FAFC;
    min-height: 100vh;
    font-family: var(--font-sans);
}

/* Loading / Error */
.rv-loading[b-9pxl9pgm4g] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 60vh;
    gap: 1.25rem;
    color: var(--color-neutral-500);
    font-size: 1rem;
}

.rv-spinner[b-9pxl9pgm4g] {
    width: 44px;
    height: 44px;
    border: 3px solid var(--color-neutral-200);
    border-top-color: var(--color-primary-500);
    border-radius: 50%;
    animation: rv-spin-b-9pxl9pgm4g 0.8s linear infinite;
}

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

.rv-error-state[b-9pxl9pgm4g] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 60vh;
    gap: 1rem;
    color: var(--color-neutral-500);
}
.rv-error-state i[b-9pxl9pgm4g] { font-size: 2.5rem; color: var(--color-danger-400); }
.rv-error-state h3[b-9pxl9pgm4g] { font-size: 1.25rem; color: var(--color-neutral-700); margin: 0; }

/* Breadcrumb */
.rv-breadcrumb[b-9pxl9pgm4g] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
    font-size: 0.85rem;
}

.rv-bc-link[b-9pxl9pgm4g] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    color: var(--color-primary-600);
    text-decoration: none;
    font-weight: 500;
}
.rv-bc-link:hover[b-9pxl9pgm4g] { text-decoration: underline; }
.rv-bc-sep[b-9pxl9pgm4g] { font-size: 0.65rem; color: var(--color-neutral-300); }
.rv-bc-current[b-9pxl9pgm4g] { color: var(--color-neutral-600); }

/* Header */
.rv-header[b-9pxl9pgm4g] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.5rem;
    gap: 1rem;
}

.rv-title[b-9pxl9pgm4g] {
    font-size: 2rem;
    font-weight: 800;
    color: var(--color-neutral-900);
    margin: 0 0 0.35rem;
    letter-spacing: -0.02em;
}

.rv-subtitle[b-9pxl9pgm4g] {
    font-size: 1rem;
    color: var(--color-neutral-500);
    margin: 0;
}

.rv-status-badge[b-9pxl9pgm4g] {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    padding: 0.3rem 0.75rem;
    border-radius: 4px;
    background: var(--color-neutral-100);
    color: var(--color-neutral-600);
    border: 1px solid var(--color-neutral-200);
    white-space: nowrap;
    flex-shrink: 0;
}

/* Alert Banner */
.rv-alert-banner[b-9pxl9pgm4g] {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1.25rem 1.5rem;
    background: #FEF2F2;
    border-left: 5px solid #DC2626;
    border-radius: 8px;
    margin-bottom: 2rem;
}

.rv-alert-icon[b-9pxl9pgm4g] {
    width: 36px;
    height: 36px;
    background: #DC2626;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1rem;
    flex-shrink: 0;
}

.rv-alert-body[b-9pxl9pgm4g] { font-size: 0.95rem; color: #7F1D1D; line-height: 1.5; }
.rv-alert-body strong[b-9pxl9pgm4g] { display: block; font-size: 1.05rem; font-weight: 700; margin-bottom: 0.2rem; }
.rv-alert-red[b-9pxl9pgm4g] { font-weight: 700; color: #DC2626; }

/* Layout */
.rv-layout[b-9pxl9pgm4g] {
    display: grid;
    grid-template-columns: 1fr 340px;
    gap: 1.75rem;
    align-items: start;
}

/* Section headings */
.rv-section[b-9pxl9pgm4g] { margin-bottom: 2rem; }

.rv-section-title[b-9pxl9pgm4g] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--color-neutral-800);
    margin: 0 0 1rem;
}
.rv-section-title i[b-9pxl9pgm4g] { color: var(--color-primary-500); }

.rv-section-meta[b-9pxl9pgm4g] {
    margin-left: auto;
    font-size: 0.78rem;
    font-weight: 400;
    color: var(--color-neutral-400);
}

/* Cards */
.rv-card[b-9pxl9pgm4g] {
    background: #FFFFFF;
    border: 1px solid #E2E8F0;
    border-radius: 12px;
    padding: 1.5rem;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}

/* Readiness checklist cards */
.rv-chk-grid[b-9pxl9pgm4g] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.rv-chk-card[b-9pxl9pgm4g] {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1.125rem 1.25rem;
    border-radius: 10px;
    border: 1.5px solid transparent;
    background: #F8FAFC;
}

.rv-chk-card--ok[b-9pxl9pgm4g]   { background: #F0FDF4; border-color: #BBF7D0; }
.rv-chk-card--fail[b-9pxl9pgm4g] { background: #FEF2F2; border-color: #FECACA; }
.rv-chk-card--warn[b-9pxl9pgm4g] { background: #FFFBEB; border-color: #FDE68A; }

.rv-chk-card-icon[b-9pxl9pgm4g] {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.875rem;
    flex-shrink: 0;
}

.rv-chk-card--ok   .rv-chk-card-icon[b-9pxl9pgm4g] { background: #16A34A; color: white; }
.rv-chk-card--fail .rv-chk-card-icon[b-9pxl9pgm4g] { background: #DC2626; color: white; }
.rv-chk-card--warn .rv-chk-card-icon[b-9pxl9pgm4g] { background: #D97706; color: white; }

.rv-chk-card-body[b-9pxl9pgm4g] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    padding-right: 0.5rem;
}

.rv-chk-card-title[b-9pxl9pgm4g] {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--color-neutral-800);
    line-height: 1.3;
}

.rv-chk-card-desc[b-9pxl9pgm4g] {
    font-size: 0.78rem;
    color: var(--color-neutral-500);
    line-height: 1.4;
}

.rv-chk-badge[b-9pxl9pgm4g] {
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
    white-space: nowrap;
    flex-shrink: 0;
    align-self: flex-start;
}

.rv-chk-badge--ok[b-9pxl9pgm4g]   { background: #DCFCE7; color: #15803D; }
.rv-chk-badge--fail[b-9pxl9pgm4g] { background: #FEE2E2; color: #B91C1C; }
.rv-chk-badge--warn[b-9pxl9pgm4g] { background: #FEF9C3; color: #854D0E; }

/* Exam detail grid */
.rv-detail-grid[b-9pxl9pgm4g] {
    display: grid;
    grid-template-columns: 1fr 1fr;
}

.rv-detail-item[b-9pxl9pgm4g] {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    padding: 0.75rem 0.875rem;
    border-bottom: 1px solid #F1F5F9;
}
.rv-detail-item:nth-child(odd)[b-9pxl9pgm4g] { border-right: 1px solid #F1F5F9; }

.rv-detail-label[b-9pxl9pgm4g] {
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-neutral-400);
}

.rv-detail-value[b-9pxl9pgm4g] { font-size: 0.95rem; font-weight: 500; color: var(--color-neutral-800); }
.rv-detail-value--strong[b-9pxl9pgm4g] { font-size: 1rem; font-weight: 700; color: var(--color-neutral-900); }
.rv-detail-value--missing[b-9pxl9pgm4g] { color: #DC2626; font-style: italic; }

/* Section cards */
.rv-sections-list[b-9pxl9pgm4g] { display: flex; flex-direction: column; gap: 0.75rem; }

.rv-sec-card[b-9pxl9pgm4g] {
    background: #FFFFFF;
    border: 1.5px solid #E2E8F0;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 1px 4px rgba(0,0,0,0.04);
    transition: box-shadow 0.15s;
}
.rv-sec-card:hover[b-9pxl9pgm4g] { box-shadow: 0 4px 16px rgba(0,0,0,0.08); }
.rv-sec-card--warn[b-9pxl9pgm4g] { border-color: #FECACA; background: #FFF8F8; }

.rv-sec-header[b-9pxl9pgm4g] {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.25rem;
    cursor: pointer;
    user-select: none;
    transition: background 0.12s;
}
.rv-sec-header:hover[b-9pxl9pgm4g] { background: #F8FAFC; }

.rv-sec-label-circle[b-9pxl9pgm4g] {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #DBEAFE;
    color: #1D4ED8;
    font-size: 0.875rem;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.rv-sec-card--warn .rv-sec-label-circle[b-9pxl9pgm4g] { background: #FEE2E2; color: #B91C1C; }

.rv-sec-info[b-9pxl9pgm4g] { flex: 1; }
.rv-sec-name[b-9pxl9pgm4g] { display: block; font-size: 0.95rem; font-weight: 600; color: var(--color-neutral-800); margin-bottom: 0.35rem; }

.rv-sec-chips[b-9pxl9pgm4g] { display: flex; flex-wrap: wrap; gap: 0.35rem; }

.rv-chip[b-9pxl9pgm4g] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.72rem;
    font-weight: 600;
    padding: 0.2rem 0.55rem;
    border-radius: 4px;
}
.rv-chip--blue[b-9pxl9pgm4g]   { background: #DBEAFE; color: #1D4ED8; }
.rv-chip--green[b-9pxl9pgm4g]  { background: #DCFCE7; color: #15803D; }
.rv-chip--gray[b-9pxl9pgm4g]   { background: #F1F5F9; color: #475569; }
.rv-chip--danger[b-9pxl9pgm4g] { background: #FEE2E2; color: #B91C1C; }

.rv-sec-expand-btn[b-9pxl9pgm4g] { color: var(--color-neutral-400); font-size: 0.8rem; padding: 0.25rem; }

.rv-sec-body[b-9pxl9pgm4g] { border-top: 1px solid #F1F5F9; padding: 1rem 1.25rem; background: #FAFBFF; }

.rv-sec-stats[b-9pxl9pgm4g] { display: flex; gap: 2rem; }

.rv-sec-stat[b-9pxl9pgm4g] { display: flex; flex-direction: column; align-items: flex-start; gap: 0.15rem; }
.rv-sec-stat-num[b-9pxl9pgm4g] { font-size: 1.5rem; font-weight: 800; color: var(--color-primary-600); line-height: 1; }
.rv-sec-stat-label[b-9pxl9pgm4g] { font-size: 0.72rem; color: var(--color-neutral-500); text-transform: uppercase; letter-spacing: 0.05em; font-weight: 600; }

/* Empty card */
.rv-empty-card[b-9pxl9pgm4g] {
    background: #FFFFFF;
    border: 1.5px dashed #CBD5E1;
    border-radius: 12px;
    padding: 2.5rem 1.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    text-align: center;
    color: var(--color-neutral-500);
}
.rv-empty-card i[b-9pxl9pgm4g] { font-size: 2rem; color: var(--color-neutral-300); }
.rv-empty-card p[b-9pxl9pgm4g] { margin: 0; font-size: 0.9rem; }
.rv-empty-card--warn[b-9pxl9pgm4g] { border-color: #FECACA; background: #FFF8F8; }
.rv-empty-card--warn i[b-9pxl9pgm4g] { color: #FCA5A5; }

/* Students card */
.rv-students-count[b-9pxl9pgm4g] { display: flex; align-items: center; gap: 1.5rem; }
.rv-students-num[b-9pxl9pgm4g] { font-size: 3rem; font-weight: 900; color: var(--color-primary-600); line-height: 1; flex-shrink: 0; }
.rv-students-label[b-9pxl9pgm4g] { display: block; font-size: 1rem; font-weight: 600; color: var(--color-neutral-800); margin-bottom: 0.35rem; }
.rv-students-note[b-9pxl9pgm4g] { display: flex; align-items: flex-start; gap: 0.35rem; font-size: 0.8rem; color: var(--color-neutral-400); line-height: 1.5; }
.rv-students-note i[b-9pxl9pgm4g] { margin-top: 0.1rem; flex-shrink: 0; }

/* Sidebar */
.rv-sidebar[b-9pxl9pgm4g] { display: flex; flex-direction: column; gap: 1.25rem; }

/* Score card */
.rv-score-card[b-9pxl9pgm4g] { padding: 1.25rem; }

.rv-score-header[b-9pxl9pgm4g] { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.875rem; }
.rv-score-title[b-9pxl9pgm4g] { font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-neutral-500); }
.rv-score-pct[b-9pxl9pgm4g] { font-size: 1.625rem; font-weight: 900; line-height: 1; }
.rv-score-pct--ok[b-9pxl9pgm4g]   { color: #16A34A; }
.rv-score-pct--warn[b-9pxl9pgm4g] { color: #D97706; }

.rv-score-track[b-9pxl9pgm4g] { height: 8px; background: #F1F5F9; border-radius: 4px; overflow: hidden; margin-bottom: 1rem; }
.rv-score-fill[b-9pxl9pgm4g] { height: 100%; border-radius: 4px; transition: width 0.5s ease; }
.rv-score-fill--ok[b-9pxl9pgm4g]   { background: #16A34A; }
.rv-score-fill--warn[b-9pxl9pgm4g] { background: #D97706; }
.rv-score-fill--fail[b-9pxl9pgm4g] { background: #DC2626; }

.rv-score-list[b-9pxl9pgm4g] { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.5rem; }
.rv-score-list li[b-9pxl9pgm4g] { display: flex; align-items: center; gap: 0.5rem; font-size: 0.83rem; color: var(--color-neutral-700); }
.rv-score-list li.ok   i[b-9pxl9pgm4g] { color: #16A34A; }
.rv-score-list li.fail i[b-9pxl9pgm4g] { color: #DC2626; }
.rv-score-list li.warn i[b-9pxl9pgm4g] { color: #D97706; }

/* Sidebar card heading */
.rv-card-heading[b-9pxl9pgm4g] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.83rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-neutral-500);
    margin: 0 0 1rem;
    padding-bottom: 0.6rem;
    border-bottom: 1px solid #F1F5F9;
}
.rv-card-heading i[b-9pxl9pgm4g] { color: var(--color-primary-500); }

/* Availability */
.rv-avail-card[b-9pxl9pgm4g] { padding: 1.25rem; }
.rv-avail-timeline[b-9pxl9pgm4g] { margin-bottom: 0.875rem; }
.rv-avail-item[b-9pxl9pgm4g] { display: flex; align-items: flex-start; gap: 0.75rem; }
.rv-avail-dot[b-9pxl9pgm4g] { width: 12px; height: 12px; border-radius: 50%; flex-shrink: 0; margin-top: 0.25rem; }
.rv-avail-dot--start[b-9pxl9pgm4g] { background: var(--color-primary-500); }
.rv-avail-item-label[b-9pxl9pgm4g] { display: block; font-size: 0.72rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-neutral-400); margin-bottom: 0.15rem; }
.rv-avail-item-val[b-9pxl9pgm4g] { display: block; font-size: 1rem; font-weight: 700; color: var(--color-neutral-900); }
.rv-avail-item-time[b-9pxl9pgm4g] { display: block; font-size: 0.85rem; color: var(--color-neutral-600); margin-top: 0.1rem; }

.rv-avail-duration[b-9pxl9pgm4g] { display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem 0 0.5rem 0.35rem; }
.rv-avail-line[b-9pxl9pgm4g] { width: 1px; height: 20px; background: #CBD5E1; margin-left: 5px; }
.rv-avail-dur-label[b-9pxl9pgm4g] { display: flex; align-items: center; gap: 0.35rem; font-size: 0.8rem; color: var(--color-neutral-500); font-weight: 500; }

.rv-avail-note[b-9pxl9pgm4g] { display: flex; align-items: flex-start; gap: 0.35rem; font-size: 0.75rem; color: var(--color-neutral-400); line-height: 1.5; border-top: 1px solid #F1F5F9; padding-top: 0.75rem; margin: 0; }
.rv-avail-note i[b-9pxl9pgm4g] { margin-top: 0.15rem; flex-shrink: 0; }

.rv-avail-missing[b-9pxl9pgm4g] { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 0.5rem; padding: 0.75rem 0; color: var(--color-neutral-500); font-size: 0.875rem; }
.rv-avail-missing i[b-9pxl9pgm4g] { font-size: 1.5rem; color: #FCA5A5; }
.rv-avail-missing p[b-9pxl9pgm4g] { margin: 0; }

/* Notification toggles */
.rv-notif-card[b-9pxl9pgm4g] { padding: 1.25rem; }
.rv-notif-subtitle[b-9pxl9pgm4g] { font-size: 0.8rem; color: var(--color-neutral-500); margin: 0 0 0.875rem; }

.rv-notif-toggle[b-9pxl9pgm4g] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.875rem 1rem;
    border-radius: 8px;
    border: 1.5px solid #E2E8F0;
    background: #F8FAFC;
    cursor: pointer;
    user-select: none;
    transition: border-color 0.15s, background 0.15s;
    margin-bottom: 0.5rem;
}
.rv-notif-toggle:last-child[b-9pxl9pgm4g] { margin-bottom: 0; }
.rv-notif-toggle:hover[b-9pxl9pgm4g] { border-color: var(--color-primary-300); background: #F0F7FF; }
.rv-notif-toggle--on[b-9pxl9pgm4g] { border-color: var(--color-primary-400); background: #EFF6FF; }
.rv-notif-toggle--sub[b-9pxl9pgm4g] { margin-left: 1.25rem; border-left-width: 2px; border-left-color: var(--color-primary-200); border-radius: 0 8px 8px 0; }

.rv-notif-toggle-icon[b-9pxl9pgm4g] {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: #DBEAFE;
    color: var(--color-primary-600);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
    flex-shrink: 0;
}
.rv-notif-toggle-icon--sm[b-9pxl9pgm4g] { width: 28px; height: 28px; font-size: 0.78rem; }

.rv-notif-toggle-text[b-9pxl9pgm4g] { flex: 1; }
.rv-notif-toggle-label[b-9pxl9pgm4g] { display: block; font-size: 0.875rem; font-weight: 600; color: var(--color-neutral-800); }
.rv-notif-toggle-desc[b-9pxl9pgm4g] { display: block; font-size: 0.75rem; color: var(--color-neutral-500); margin-top: 0.1rem; }

.rv-toggle-pill[b-9pxl9pgm4g] {
    width: 44px;
    height: 24px;
    border-radius: 12px;
    background: #CBD5E1;
    position: relative;
    transition: background 0.2s;
    flex-shrink: 0;
}
.rv-toggle-pill--on[b-9pxl9pgm4g] { background: var(--color-primary-500); }
.rv-toggle-thumb[b-9pxl9pgm4g] {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: white;
    box-shadow: 0 1px 3px rgba(0,0,0,0.25);
    transition: transform 0.2s;
}
.rv-toggle-pill--on .rv-toggle-thumb[b-9pxl9pgm4g] { transform: translateX(20px); }

/* Error card */
.rv-error-card[b-9pxl9pgm4g] { display: flex; align-items: flex-start; gap: 0.6rem; padding: 0.875rem 1rem; background: #FEF2F2; border: 1px solid #FECACA; border-radius: 8px; font-size: 0.85rem; color: #B91C1C; }

/* Buttons */
.rv-btn[b-9pxl9pgm4g] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.6rem 1.25rem;
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
    border: 1.5px solid transparent;
    text-decoration: none;
}

.rv-btn--ghost[b-9pxl9pgm4g] { background: white; border-color: #CBD5E1; color: var(--color-neutral-700); }
.rv-btn--ghost:hover:not(:disabled)[b-9pxl9pgm4g] { background: #F8FAFC; border-color: #94A3B8; }

.rv-btn--outline[b-9pxl9pgm4g] { background: transparent; border-color: var(--color-primary-500); color: var(--color-primary-600); }
.rv-btn--outline:hover:not(:disabled)[b-9pxl9pgm4g] { background: #EFF6FF; }

.rv-btn--publish[b-9pxl9pgm4g] {
    padding: 0.7rem 2rem;
    background: var(--color-primary-600);
    border-color: var(--color-primary-600);
    color: white;
    font-size: 1rem;
    box-shadow: 0 4px 12px rgba(37,99,235,0.3);
}
.rv-btn--publish:hover:not(:disabled)[b-9pxl9pgm4g] { background: var(--color-primary-700); box-shadow: 0 6px 16px rgba(37,99,235,0.4); }
.rv-btn--publish:disabled[b-9pxl9pgm4g] { background: #CBD5E1; border-color: #CBD5E1; color: #94A3B8; box-shadow: none; cursor: not-allowed; }
.rv-btn:disabled[b-9pxl9pgm4g] { cursor: not-allowed; opacity: 0.6; }

.rv-link[b-9pxl9pgm4g] { color: var(--color-primary-600); text-decoration: none; font-weight: 500; font-size: 0.875rem; }
.rv-link:hover[b-9pxl9pgm4g] { text-decoration: underline; }

/* Sticky footer */
.rv-footer[b-9pxl9pgm4g] {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 72px;
    background: white;
    border-top: 1px solid #E2E8F0;
    box-shadow: 0 -4px 24px rgba(0,0,0,0.08);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 2.5rem;
    z-index: 200;
}

.rv-footer-status[b-9pxl9pgm4g] { display: flex; align-items: center; }
.rv-footer-status-text[b-9pxl9pgm4g] { display: flex; align-items: center; gap: 0.5rem; font-size: 0.875rem; font-weight: 500; }
.rv-footer-status-text--ok[b-9pxl9pgm4g]   { color: #16A34A; }
.rv-footer-status-text--warn[b-9pxl9pgm4g] { color: #D97706; }

.rv-footer-actions[b-9pxl9pgm4g] { display: flex; align-items: center; gap: 1rem; }

.rv-spinner-sm[b-9pxl9pgm4g] {
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255,255,255,0.4);
    border-top-color: white;
    border-radius: 50%;
    animation: rv-spin-b-9pxl9pgm4g 0.7s linear infinite;
    flex-shrink: 0;
}

/* Responsive */
@media (max-width: 1100px) {
    .rv-layout[b-9pxl9pgm4g] { grid-template-columns: 1fr 300px; }
}

@media (max-width: 900px) {
    .rv-layout[b-9pxl9pgm4g] { grid-template-columns: 1fr; }
    .rv-sidebar[b-9pxl9pgm4g] { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
    .rv-chk-grid[b-9pxl9pgm4g] { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 640px) {
    .rv-page[b-9pxl9pgm4g] { padding: 1.25rem 1rem 6rem; }
    .rv-title[b-9pxl9pgm4g] { font-size: 1.5rem; }
    .rv-layout[b-9pxl9pgm4g] { grid-template-columns: 1fr; }
    .rv-sidebar[b-9pxl9pgm4g] { grid-template-columns: 1fr; }
    .rv-chk-grid[b-9pxl9pgm4g] { grid-template-columns: 1fr; }
    .rv-detail-grid[b-9pxl9pgm4g] { grid-template-columns: 1fr; }
    .rv-detail-item:nth-child(odd)[b-9pxl9pgm4g] { border-right: none; }
    .rv-footer[b-9pxl9pgm4g] { padding: 0.875rem 1rem; height: auto; flex-direction: column; gap: 0.75rem; align-items: stretch; }
    .rv-footer-actions[b-9pxl9pgm4g] { flex-direction: column; }
    .rv-btn--publish[b-9pxl9pgm4g] { justify-content: center; }
    .rv-footer-status[b-9pxl9pgm4g] { justify-content: center; }
    .rv-sec-stats[b-9pxl9pgm4g] { flex-wrap: wrap; gap: 1rem; }
}

@media (max-width: 380px) {
    .rv-chk-grid[b-9pxl9pgm4g] { grid-template-columns: 1fr; }
}
/* /Pages/Teacher/Exams/StudentView.razor.rz.scp.css */
/* ══════════════════════════════════════════════════════════════════════════
   StudentView.razor.css  — Teacher "Student View" preview
   Mirrors the TakeExam exam-taking interface layout exactly.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Loading / Error states ── */
.sv-loading[b-bhw0rkj7wi], .sv-error[b-bhw0rkj7wi] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 60vh;
    gap: 16px;
    color: #555;
}

.sv-spinner[b-bhw0rkj7wi] {
    width: 40px;
    height: 40px;
    border: 4px solid #e0e0e0;
    border-top-color: #1e3a5f;
    border-radius: 50%;
    animation: sv-spin-b-bhw0rkj7wi 0.8s linear infinite;
}

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

.sv-btn-back[b-bhw0rkj7wi] {
    padding: 8px 20px;
    background: #1e3a5f;
    color: #fff;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 14px;
}

/* ── Preview Banner ── */
.sv-banner[b-bhw0rkj7wi] {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #fef9c3;
    border-bottom: 2px solid #f59e0b;
    color: #92400e;
    padding: 8px 20px;
    font-size: 13px;
    flex-wrap: wrap;
}

.sv-banner-toggle[b-bhw0rkj7wi] {
    margin-left: auto;
    padding: 4px 14px;
    background: #1e3a5f;
    color: #fff;
    border: none;
    border-radius: 5px;
    font-size: 13px;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s;
}

.sv-banner-toggle:hover[b-bhw0rkj7wi] {
    background: #2c5282;
}

/* ── Main Container ── */
.sv-container[b-bhw0rkj7wi] {
    display: flex;
    flex-direction: column;
    height: calc(100vh - 42px); /* subtract banner height */
    background: #f0f4f8;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    color: #2c3e50;
    overflow: hidden;
}

/* ── Header ── */
.sv-header[b-bhw0rkj7wi] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 20px;
    background: #1e3a5f;
    color: #fff;
    gap: 16px;
    min-height: 60px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.25);
    flex-shrink: 0;
}

.sv-header-left[b-bhw0rkj7wi]   { flex: 1; min-width: 0; }
.sv-header-center[b-bhw0rkj7wi] { flex-shrink: 0; }
.sv-header-right[b-bhw0rkj7wi]  { display: flex; gap: 8px; align-items: center; flex-shrink: 0; }

.sv-title[b-bhw0rkj7wi] {
    font-size: 16px;
    font-weight: 700;
    color: #fff;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sv-subtitle[b-bhw0rkj7wi] {
    font-size: 12px;
    color: #a8c4e0;
    display: block;
    margin-top: 2px;
}

/* Duration chip – same visual as the live ExamTimer but static */
.sv-duration-chip[b-bhw0rkj7wi] {
    display: inline-flex;
    align-items: center;
    padding: 6px 14px;
    background: #fff;
    border: 2px solid #cbd5e0;
    border-radius: 6px;
    font-weight: 600;
    font-size: 16px;
    color: #2d3748;
}

.sv-duration-value[b-bhw0rkj7wi] {
    font-family: 'Courier New', Courier, monospace;
    letter-spacing: 0.05em;
}

/* Header buttons */
.sv-btn-back-header[b-bhw0rkj7wi],
.sv-btn-pdf[b-bhw0rkj7wi] {
    padding: 6px 14px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
}

.sv-btn-back-header[b-bhw0rkj7wi] {
    background: rgba(255,255,255,0.15);
    color: #fff;
    border: 1px solid rgba(255,255,255,0.3);
}

.sv-btn-back-header:hover[b-bhw0rkj7wi] {
    background: rgba(255,255,255,0.25);
}

.sv-btn-pdf[b-bhw0rkj7wi] {
    background: #e53e3e;
    color: #fff;
    border: none;
}

.sv-btn-pdf:hover[b-bhw0rkj7wi] {
    background: #c53030;
    color: #fff;
}

.sv-btn-submit[b-bhw0rkj7wi] {
    padding: 6px 14px;
    background: #38a169;
    color: #fff;
    border: none;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 500;
    opacity: 0.5;
    cursor: not-allowed;
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
}

/* ── Content Layout (mirrors TakeExam exam-content) ── */
.sv-content[b-bhw0rkj7wi] {
    display: flex;
    flex: 1;
    overflow: hidden;
}

/* ── Question Area ── */
.sv-question-area[b-bhw0rkj7wi] {
    flex: 1;
    overflow-y: auto;
    padding: 20px 24px;
    background: #f0f4f8;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.sv-question-meta[b-bhw0rkj7wi] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 14px;
    color: #4a5568;
    padding-bottom: 8px;
    border-bottom: 1px solid #e2e8f0;
}

.sv-qno[b-bhw0rkj7wi]   { font-weight: 600; color: #2d3748; }
.sv-marks[b-bhw0rkj7wi] { color: #2b6cb0; font-weight: 600; font-size: 13px; }

/* Study-guide controls are not part of the student exam experience. */
.sv-question-area[b-bhw0rkj7wi]  .wb-stars,
.sv-question-area[b-bhw0rkj7wi]  .wb-controls {
    display: none;
}

/* Answer placeholder – shows where the input area would be */
.sv-answer-placeholder[b-bhw0rkj7wi] {
    background: #fff;
    border: 2px dashed #cbd5e0;
    border-radius: 10px;
    padding: 20px;
    margin-top: 4px;
}

.sv-answer-hint[b-bhw0rkj7wi] {
    display: flex;
    align-items: center;
    color: #a0aec0;
}

/* ── Palette Sidebar ── */
.sv-palette-area[b-bhw0rkj7wi] {
    width: 240px;
    flex-shrink: 0;
    overflow-y: auto;
    background: #fff;
    border-left: 1px solid #e2e8f0;
    padding: 12px;
}

/* ── Nav Footer ── */
.sv-nav-footer[b-bhw0rkj7wi] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 24px;
    background: #fff;
    border-top: 1px solid #e2e8f0;
    flex-shrink: 0;
}

.sv-nav-btn[b-bhw0rkj7wi] {
    padding: 8px 20px;
    background: #1e3a5f;
    color: #fff;
    border: none;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    transition: background 0.15s;
}

.sv-nav-btn:disabled[b-bhw0rkj7wi] {
    background: #a0aec0;
    cursor: not-allowed;
}

.sv-nav-btn:not(:disabled):hover[b-bhw0rkj7wi] { background: #2c5282; }

.sv-nav-next[b-bhw0rkj7wi] { background: #2b6cb0; }
.sv-nav-next:not(:disabled):hover[b-bhw0rkj7wi] { background: #2c5282; }

.sv-nav-pos[b-bhw0rkj7wi] {
    font-size: 14px;
    color: #4a5568;
    font-weight: 600;
}
/* /Pages/Teacher/Exams/SubmissionReview.razor.rz.scp.css */
/* ── Page wrapper ─────────────────────────────────────────────────── */
.sr-page[b-imrllam6e7] {
    max-width: 1100px;
    margin: 0 auto;
    padding: 1.5rem 1rem;
    font-family: var(--font-base, system-ui, sans-serif);
}

.sr-loading[b-imrllam6e7] {
    display: flex;
    justify-content: center;
    padding: 4rem 0;
}

.sr-error[b-imrllam6e7] {
    background: #fef2f2;
    border-left: 4px solid #f87171;
    padding: 1rem 1.25rem;
    border-radius: 0.5rem;
    color: #b91c1c;
}

/* ── Back button ─────────────────────────────────────────────────── */
.sr-btn-back[b-imrllam6e7] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.5rem 1rem;
    border: 1px solid #d1d5db;
    border-radius: 0.375rem;
    background: #fff;
    color: #374151;
    font-size: 0.875rem;
    cursor: pointer;
    margin-bottom: 1rem;
    transition: background 0.15s;
}
.sr-btn-back:hover[b-imrllam6e7] { background: #f9fafb; }

/* ── Header card ─────────────────────────────────────────────────── */
.sr-header[b-imrllam6e7] {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 0.75rem;
    padding: 1.25rem 1.5rem;
    margin-bottom: 1.5rem;
    box-shadow: 0 1px 3px rgba(0,0,0,.06);
}

.sr-header-top[b-imrllam6e7] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 0.75rem;
}

.sr-exam-name[b-imrllam6e7] {
    font-size: 1.25rem;
    font-weight: 700;
    color: #111827;
    margin: 0 0 0.125rem;
}

.sr-exam-sub[b-imrllam6e7] {
    font-size: 0.875rem;
    color: #6b7280;
    margin: 0;
}

.sr-meta-row[b-imrllam6e7] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 0.75rem;
    font-size: 0.875rem;
    color: #374151;
    margin-bottom: 0.875rem;
}

.sr-score-row[b-imrllam6e7] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
    padding-top: 0.75rem;
    border-top: 1px solid #f3f4f6;
}

.sr-score-total[b-imrllam6e7] {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
}

.sr-score-label[b-imrllam6e7] {
    font-size: 0.8125rem;
    color: #6b7280;
    font-weight: 500;
}

.sr-score-value[b-imrllam6e7] {
    font-size: 1.375rem;
    font-weight: 700;
    color: #1f2937;
}

.sr-score-bar[b-imrllam6e7] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    color: #4b5563;
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 0.375rem;
    padding: 0.25rem 0.75rem;
}

.sr-score-auto[b-imrllam6e7]  { color: #0369a1; font-weight: 600; }
.sr-score-manual[b-imrllam6e7] { color: #7c3aed; font-weight: 600; }
.sr-sep[b-imrllam6e7] { color: #d1d5db; }

/* ── Print button ─────────────────────────────────────────────────── */
.sr-btn-print[b-imrllam6e7] {
    padding: 0.5rem 1.125rem;
    background: #1d4ed8;
    color: #fff;
    border: none;
    border-radius: 0.5rem;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s;
    white-space: nowrap;
}
.sr-btn-print:hover[b-imrllam6e7] { background: #1e40af; }

.sr-btn-grade[b-imrllam6e7] {
    padding: 0.5rem 1.125rem;
    background: #d97706;
    color: #fff;
    border: none;
    border-radius: 0.5rem;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s;
}
.sr-btn-grade:hover[b-imrllam6e7] { background: #b45309; }

/* ── Section block ───────────────────────────────────────────────── */
.sr-section[b-imrllam6e7] {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 0.75rem;
    overflow: hidden;
    margin-bottom: 1.5rem;
    box-shadow: 0 1px 3px rgba(0,0,0,.05);
}

.sr-section-header[b-imrllam6e7] {
    display: flex;
    align-items: stretch;
    flex-direction: column;
    gap: 0.625rem;
    padding: 0.75rem 1.25rem;
    background: #f1f5f9;
    border-bottom: 1px solid #e2e8f0;
}

.sr-section-title[b-imrllam6e7] {
    font-size: 0.9375rem;
    font-weight: 700;
    color: #1e293b;
    letter-spacing: 0.02em;
}

.sr-section-meta[b-imrllam6e7] {
    font-size: 0.8125rem;
    color: #64748b;
}

/* ── Table ───────────────────────────────────────────────────────── */
.sr-table[b-imrllam6e7] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8125rem;
}

.sr-th[b-imrllam6e7] {
    padding: 0.5rem 0.75rem;
    text-align: left;
    background: #f8fafc;
    border-bottom: 1px solid #e2e8f0;
    color: #475569;
    font-weight: 600;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    white-space: nowrap;
}

.sr-th-qno[b-imrllam6e7]     { width: 3rem; text-align: center; }
.sr-th-q[b-imrllam6e7]       { min-width: 200px; }
.sr-th-ans[b-imrllam6e7],
.sr-th-correct[b-imrllam6e7] { min-width: 150px; }
.sr-th-icon[b-imrllam6e7]    { width: 2.5rem; text-align: center; }
.sr-th-marks[b-imrllam6e7]   { width: 5rem; text-align: center; }

.sr-row[b-imrllam6e7] {
    border-bottom: 1px solid #f1f5f9;
    transition: background 0.1s;
}
.sr-row:hover[b-imrllam6e7] { background: #fafafa; }
.sr-row-ungraded[b-imrllam6e7] { background: #fffbeb; }

.sr-td[b-imrllam6e7] {
    padding: 0.625rem 0.75rem;
    vertical-align: top;
    color: #374151;
}

.sr-td-qno[b-imrllam6e7]  { text-align: center; font-weight: 600; color: #6b7280; }
.sr-td-icon[b-imrllam6e7] { text-align: center; }
.sr-td-marks[b-imrllam6e7] { text-align: center; }

/* ── Answer text clamping ─────────────────────────────────────────── */
.sr-clamp[b-imrllam6e7] {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.sr-student-ans[b-imrllam6e7] {
    color: #1e40af;
}

.sr-correct-ans[b-imrllam6e7] {
    color: #166534;
}

.sr-unanswered[b-imrllam6e7] {
    color: #9ca3af;
    font-style: italic;
}

.sr-expand-btn[b-imrllam6e7] {
    background: none;
    border: none;
    color: #6366f1;
    font-size: 0.75rem;
    cursor: pointer;
    padding: 0.125rem 0;
    margin-top: 0.25rem;
    display: block;
}
.sr-expand-btn:hover[b-imrllam6e7] { color: #4338ca; }

/* ── Correct / Wrong / Manual indicators ─────────────────────────── */
.sr-correct[b-imrllam6e7]  { color: #16a34a; font-size: 1rem; font-weight: 700; }
.sr-wrong[b-imrllam6e7]    { color: #dc2626; font-size: 1rem; font-weight: 700; }
.sr-manual[b-imrllam6e7]   { color: #9ca3af; font-size: 1.125rem; }

/* ── Marks display ────────────────────────────────────────────────── */
.sr-marks-scored[b-imrllam6e7]  { font-weight: 700; color: #16a34a; }
.sr-marks-zero[b-imrllam6e7]    { font-weight: 700; color: #6b7280; }
.sr-ungraded-badge[b-imrllam6e7] {
    background: #fef3c7;
    color: #92400e;
    padding: 0.125rem 0.375rem;
    border-radius: 0.25rem;
    font-size: 0.75rem;
    font-weight: 600;
}

.sr-comment[b-imrllam6e7] {
    font-size: 0.75rem;
    margin-top: 0.25rem;
    cursor: help;
}

/* ── Section subtotal ─────────────────────────────────────────────── */
.sr-subtotal-row[b-imrllam6e7] {
    background: #f1f5f9;
}

.sr-subtotal-label[b-imrllam6e7] {
    padding: 0.5rem 0.75rem;
    font-weight: 600;
    color: #374151;
    font-size: 0.8125rem;
    text-align: right;
}

.sr-subtotal-marks[b-imrllam6e7] {
    padding: 0.5rem 0.75rem;
    font-weight: 700;
    color: #1e293b;
    font-size: 0.9375rem;
    text-align: center;
}

/* ── Print footer ─────────────────────────────────────────────────── */
.sr-print-footer[b-imrllam6e7] {
    display: flex;
    gap: 0.75rem;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 1rem;
    padding: 1.5rem 0;
}

/* ── Print media ─────────────────────────────────────────────────── */
@media print {
    .sr-btn-back[b-imrllam6e7],
    .sr-btn-print[b-imrllam6e7],
    .sr-btn-grade[b-imrllam6e7],
    .sr-print-footer[b-imrllam6e7],
    .sr-expand-btn[b-imrllam6e7] {
        display: none !important;
    }
    .sr-page[b-imrllam6e7] {
        padding: 0;
        max-width: 100%;
    }
    .sr-section[b-imrllam6e7] {
        break-inside: avoid;
        box-shadow: none;
    }
    .sr-clamp[b-imrllam6e7] {
        -webkit-line-clamp: unset;
        overflow: visible;
    }
}

/* ── Mobile: stack header top row ────────────────────────────────── */
@media (max-width: 640px) {
    .sr-header-top[b-imrllam6e7] { flex-direction: column; }
    .sr-table[b-imrllam6e7] { font-size: 0.75rem; }
    .sr-th-q[b-imrllam6e7]  { min-width: 120px; }
    .sr-th-ans[b-imrllam6e7],
    .sr-th-correct[b-imrllam6e7] { min-width: 100px; }
}

/* ── Score badges (Auto / Manual) ────────────────────────────────── */
.sr-score-badge[b-imrllam6e7] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem 0.625rem;
    border-radius: 9999px;
    font-size: 0.8125rem;
    font-weight: 600;
    border: 1px solid transparent;
}
.sr-score-badge.sr-score-auto[b-imrllam6e7]   { background: #e0f2fe; border-color: #bae6fd; color: #0369a1; }
.sr-score-badge.sr-score-manual[b-imrllam6e7] { background: #ede9fe; border-color: #ddd6fe; color: #7c3aed; }

a.sr-score-link[b-imrllam6e7] {
    cursor: pointer;
    text-decoration: none;
    transition: opacity 0.15s, transform 0.1s;
}
a.sr-score-link:hover[b-imrllam6e7] { opacity: 0.8; transform: translateY(-1px); text-decoration: none; }

/* ── Section header: two-column layout ─ (override applied in base .sr-section-header above) ── */
.sr-section-header-left[b-imrllam6e7] {
    display: flex;
    align-items: baseline;
    gap: 0.625rem;
    flex-wrap: wrap;
}

/* ── Section insights row ─────────────────────────────────────────── */
.sr-section-insights[b-imrllam6e7] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    padding-top: 0.375rem;
    border-top: 1px solid #e2e8f0;
}

.sr-insight-score[b-imrllam6e7] {
    font-size: 1.125rem;
    font-weight: 700;
    color: #1e293b;
    white-space: nowrap;
}
.sr-insight-denom[b-imrllam6e7] { font-size: 0.875rem; font-weight: 500; color: #64748b; }

.sr-insight-tags[b-imrllam6e7] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
}
.sr-itag[b-imrllam6e7] {
    font-size: 0.6875rem;
    font-weight: 600;
    padding: 0.125rem 0.5rem;
    border-radius: 9999px;
    white-space: nowrap;
}
.sr-itag-green[b-imrllam6e7]  { background: #dcfce7; color: #166534; }
.sr-itag-red[b-imrllam6e7]    { background: #fee2e2; color: #991b1b; }
.sr-itag-blue[b-imrllam6e7]   { background: #ede9fe; color: #5b21b6; }
.sr-itag-orange[b-imrllam6e7] { background: #fef3c7; color: #92400e; }

.sr-insight-bar-track[b-imrllam6e7] {
    flex: 1;
    min-width: 80px;
    max-width: 200px;
    height: 6px;
    background: #e2e8f0;
    border-radius: 9999px;
    overflow: hidden;
}
.sr-insight-bar-fill[b-imrllam6e7] {
    height: 100%;
    border-radius: 9999px;
    transition: width 0.5s ease;
}
.sr-insight-pct[b-imrllam6e7] {
    font-size: 0.8125rem;
    font-weight: 600;
    color: #475569;
    white-space: nowrap;
}

/* ── Descriptive question accordion card ─────────────────────────── */
.sr-td-full[b-imrllam6e7] { padding: 0.5rem 0.75rem; }

.sr-desc-card[b-imrllam6e7] {
    border: 1px solid #e2e8f0;
    border-radius: 0.5rem;
    overflow: hidden;
    margin: 0.25rem 0;
    background: #fff;
}

.sr-desc-header[b-imrllam6e7] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.75rem 1rem;
    background: #f8fafc;
    cursor: pointer;
    user-select: none;
    transition: background 0.15s;
}
.sr-desc-header:hover[b-imrllam6e7] { background: #f1f5f9; }

.sr-desc-header-left[b-imrllam6e7] {
    display: flex;
    align-items: baseline;
    gap: 0.625rem;
    flex: 1;
    flex-wrap: wrap;
}

.sr-desc-qno[b-imrllam6e7] {
    font-weight: 700;
    color: #1e293b;
    font-size: 0.9375rem;
    white-space: nowrap;
}

.sr-desc-qtype[b-imrllam6e7] {
    font-size: 0.6875rem;
    font-weight: 600;
    color: #7c3aed;
    background: #ede9fe;
    border: 1px solid #ddd6fe;
    border-radius: 9999px;
    padding: 0.125rem 0.5rem;
    white-space: nowrap;
}

.sr-desc-question[b-imrllam6e7] {
    font-size: 0.875rem;
    color: #334155;
    line-height: 1.5;
}

.sr-desc-header-right[b-imrllam6e7] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
}

.sr-desc-marks[b-imrllam6e7] {
    font-size: 0.9375rem;
}

.sr-accordion-icon[b-imrllam6e7] {
    font-size: 0.75rem;
    color: #94a3b8;
    margin-left: 0.25rem;
}

/* Horizontal split body */
.sr-desc-body[b-imrllam6e7] {
    display: flex;
    border-top: 1px solid #e2e8f0;
}

.sr-desc-col[b-imrllam6e7] {
    flex: 1;
    padding: 1rem 1.125rem;
    min-width: 0;
}

.sr-desc-col-student[b-imrllam6e7] { background: #eff6ff; }
.sr-desc-col-expected[b-imrllam6e7] { background: #f0fdf4; }

.sr-desc-divider[b-imrllam6e7] {
    width: 1px;
    background: #e2e8f0;
    flex-shrink: 0;
}

.sr-desc-col-label[b-imrllam6e7] {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #64748b;
    margin-bottom: 0.625rem;
}

.sr-desc-col-student .sr-desc-col-label[b-imrllam6e7] { color: #1d4ed8; }
.sr-desc-col-expected .sr-desc-col-label[b-imrllam6e7] { color: #15803d; }

.sr-desc-text[b-imrllam6e7] {
    font-size: 0.875rem;
    line-height: 1.65;
    white-space: pre-wrap;
    word-break: break-word;
    color: #1e293b;
}

.sr-desc-unanswered[b-imrllam6e7] {
    font-style: italic;
    color: #94a3b8;
    font-size: 0.875rem;
}

/* Mobile: stack the two columns vertically */
@media (max-width: 640px) {
    .sr-desc-body[b-imrllam6e7] { flex-direction: column; }
    .sr-desc-divider[b-imrllam6e7] { width: 100%; height: 1px; }
}

/* /Pages/Teacher/Exams/Submissions.razor.rz.scp.css */
/* Styles handled via Tailwind utility classes in markup */
/* /Pages/Teacher/ExamTemplates/Create.razor.rz.scp.css */
/* Styles handled via Tailwind utility classes in markup */
/* /Pages/Teacher/ExamTemplates/Details.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════════
   Template Details Page  (td- prefix for all selectors)
   ═══════════════════════════════════════════════════════════════ */

/* ── Page wrapper ─────────────────────────────────────────────────────────── */
.td-page[b-6tthv9ul1g] {
    max-width: 1000px;
    margin: 0 auto;
    padding: var(--spacing-6) var(--spacing-5);
    font-family: var(--font-primary);
}

/* ── Back button ──────────────────────────────────────────────────────────── */
.td-back[b-6tthv9ul1g] {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-2);
    background: none;
    border: none;
    color: var(--color-neutral-600);
    font-size: var(--font-size-sm);
    font-weight: 600;
    cursor: pointer;
    padding: 0;
    margin-bottom: var(--spacing-5);
    transition: color 0.15s, transform 0.15s;
}
.td-back:hover[b-6tthv9ul1g] { color: var(--color-primary); transform: translateX(-3px); }

/* ── Header card ──────────────────────────────────────────────────────────── */
.td-header[b-6tthv9ul1g] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--spacing-5);
    padding: var(--spacing-6);
    background: white;
    border: 1px solid var(--color-neutral-200);
    border-radius: var(--radius-md);
    margin-bottom: var(--spacing-5);
}

.td-header-left[b-6tthv9ul1g] {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-4);
    flex: 1;
    min-width: 0;
}

.td-icon[b-6tthv9ul1g] {
    width: 52px;
    height: 52px;
    border-radius: var(--radius-md);
    background: var(--color-primary-light, var(--color-teal-100));
    color: var(--color-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    flex-shrink: 0;
}

.td-header-info[b-6tthv9ul1g] { min-width: 0; }

.td-title[b-6tthv9ul1g] {
    margin: 0 0 var(--spacing-3) 0;
    font-size: 22px;
    font-weight: 700;
    color: var(--color-neutral-900);
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.td-meta[b-6tthv9ul1g] {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    flex-wrap: wrap;
}

/* ── Badges ───────────────────────────────────────────────────────────────── */
.td-badge[b-6tthv9ul1g] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    border-radius: var(--radius-full);
    font-size: 12px;
    font-weight: 600;
}

.td-badge--type.unit-test[b-6tthv9ul1g]  { background: var(--color-primary-light, var(--color-teal-100)); color: var(--color-primary-dark); }
.td-badge--type.mid-term[b-6tthv9ul1g]   { background: #dbeafe; color: #1d4ed8; }
.td-badge--type.final-exam[b-6tthv9ul1g] { background: #fee2e2; color: #b91c1c; }
.td-badge--type.quiz[b-6tthv9ul1g]       { background: #fef3c7; color: #92400e; }

/* Active status — strong, prominent */
.td-badge--status.active[b-6tthv9ul1g]   { background: #dcfce7; color: #166534; font-weight: 700; }
.td-badge--status.inactive[b-6tthv9ul1g] { background: var(--color-neutral-200); color: var(--color-neutral-600); }

.td-badge--system[b-6tthv9ul1g]  { background: #f3e8ff; color: #7c3aed; }
.td-badge--usage[b-6tthv9ul1g]   { background: var(--color-primary-light, var(--color-teal-100)); color: var(--color-primary-dark); }

/* ── Header actions ───────────────────────────────────────────────────────── */
.td-actions[b-6tthv9ul1g] {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    flex-shrink: 0;
}

/* Primary CTA — tall, solid, dominant */
.td-btn-primary[b-6tthv9ul1g] {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-2);
    height: 44px;
    padding: 0 var(--spacing-6);
    background: var(--color-primary);
    border: none;
    border-radius: var(--radius-sm);
    color: white;
    font-size: var(--font-size-sm);
    font-weight: 700;
    cursor: pointer;
    transition: background 0.15s, transform 0.1s;
    white-space: nowrap;
}
.td-btn-primary:hover[b-6tthv9ul1g] { background: var(--color-primary-dark); transform: translateY(-1px); }

/* Secondary action buttons */
.td-btn-secondary[b-6tthv9ul1g] {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-2);
    height: 40px;
    padding: 0 var(--spacing-4);
    background: white;
    border: 1px solid var(--color-neutral-200);
    border-radius: var(--radius-sm);
    color: var(--color-neutral-700);
    font-size: var(--font-size-sm);
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}
.td-btn-secondary:hover[b-6tthv9ul1g] { background: var(--color-neutral-50); border-color: var(--color-neutral-300); }

.td-btn-icon[b-6tthv9ul1g] { padding: 0 12px; }

/* ── More actions dropdown ────────────────────────────────────────────────── */
.td-more-wrap[b-6tthv9ul1g] { position: relative; }

.td-more-menu[b-6tthv9ul1g] {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    min-width: 160px;
    background: white;
    border: 1px solid var(--color-neutral-200);
    border-radius: var(--radius-md);
    box-shadow: 0 8px 24px rgba(0,0,0,0.1);
    z-index: 50;
    overflow: hidden;
}

.td-more-item[b-6tthv9ul1g] {
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
    width: 100%;
    padding: 10px var(--spacing-4);
    background: none;
    border: none;
    text-align: left;
    font-size: var(--font-size-sm);
    color: var(--color-neutral-700);
    cursor: pointer;
    transition: background 0.12s;
}
.td-more-item:hover[b-6tthv9ul1g] { background: var(--color-neutral-50); }
.td-more-item--danger[b-6tthv9ul1g] { color: #dc2626; }
.td-more-item--danger:hover[b-6tthv9ul1g] { background: #fef2f2; }

.td-more-divider[b-6tthv9ul1g] { height: 1px; background: var(--color-neutral-100); margin: 4px 0; }

/* ── Description ──────────────────────────────────────────────────────────── */
.td-description[b-6tthv9ul1g] {
    background: var(--color-neutral-50);
    border: 1px solid var(--color-neutral-200);
    border-radius: var(--radius-md);
    padding: var(--spacing-4) var(--spacing-6);
    margin-bottom: var(--spacing-5);
    font-size: var(--font-size-sm);
    color: var(--color-neutral-700);
    line-height: 1.6;
}
.td-description p[b-6tthv9ul1g] { margin: 0; }

/* ── KPI Cards ────────────────────────────────────────────────────────────── */
.td-kpis[b-6tthv9ul1g] {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr;  /* marks card slightly wider = primary emphasis */
    gap: var(--spacing-4);
    margin-bottom: var(--spacing-5);
}

.td-kpi[b-6tthv9ul1g] {
    display: flex;
    align-items: center;
    gap: var(--spacing-4);
    background: white;
    border: 1px solid var(--color-neutral-200);
    border-radius: var(--radius-md);
    padding: var(--spacing-5);
}

.td-kpi--primary[b-6tthv9ul1g] {
    border-left: 3px solid var(--color-primary);
}

.td-kpi-icon[b-6tthv9ul1g] {
    width: 44px;
    height: 44px;
    border-radius: var(--radius-sm);
    background: var(--color-primary-light, var(--color-teal-100));
    color: var(--color-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
}

.td-kpi-icon--blue[b-6tthv9ul1g]   { background: #dbeafe; color: #1d4ed8; }
.td-kpi-icon--purple[b-6tthv9ul1g] { background: #f3e8ff; color: #7c3aed; }

.td-kpi-label[b-6tthv9ul1g] {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--color-neutral-500);
    margin-bottom: 4px;
}

.td-kpi-value[b-6tthv9ul1g] {
    font-size: 26px;
    font-weight: 700;
    color: var(--color-neutral-900);
    font-family: var(--font-numeric-mono);
    line-height: 1;
}

.td-kpi-unit[b-6tthv9ul1g] {
    font-size: 14px;
    font-weight: 500;
    color: var(--color-neutral-400);
    font-family: var(--font-primary);
}

/* ── Sections wrapper ─────────────────────────────────────────────────────── */
.td-sections-wrap[b-6tthv9ul1g] {
    background: white;
    border: 1px solid var(--color-neutral-200);
    border-radius: var(--radius-md);
    overflow: hidden;
    margin-bottom: var(--spacing-5);
}

.td-sections-header[b-6tthv9ul1g] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--spacing-4) var(--spacing-6);
    border-bottom: 1px solid var(--color-neutral-100);
    background: var(--color-neutral-50);
}

.td-sections-title[b-6tthv9ul1g] {
    margin: 0;
    font-size: 15px;
    font-weight: 700;
    color: var(--color-neutral-800);
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
}

.td-expand-actions[b-6tthv9ul1g] { display: flex; gap: var(--spacing-2); }

.td-expand-btn[b-6tthv9ul1g] {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-2);
    height: 32px;
    padding: 0 var(--spacing-3);
    background: white;
    border: 1px solid var(--color-neutral-200);
    border-radius: var(--radius-sm);
    color: var(--color-neutral-600);
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.12s;
}
.td-expand-btn:hover[b-6tthv9ul1g] { background: var(--color-neutral-50); border-color: var(--color-neutral-300); }

/* ── Section list ─────────────────────────────────────────────────────────── */
.td-sections-list[b-6tthv9ul1g] {
    display: flex;
    flex-direction: column;
    gap: 1px;   /* hairline divider between rows */
    background: var(--color-neutral-100);
}

/* ── Individual section ───────────────────────────────────────────────────── */
.td-section[b-6tthv9ul1g] {
    background: white;
    cursor: pointer;
    transition: background 0.12s;
}
.td-section:hover[b-6tthv9ul1g] { background: var(--color-neutral-50); }
.td-section--expanded[b-6tthv9ul1g] { background: white; }

.td-section-row[b-6tthv9ul1g] {
    display: flex;
    align-items: center;
    gap: var(--spacing-4);
    padding: 14px var(--spacing-6);
    min-height: 56px;
}

.td-section-label[b-6tthv9ul1g] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: var(--radius-sm);
    background: var(--color-primary);
    color: white;
    font-weight: 700;
    font-size: 15px;
    flex-shrink: 0;
}

.td-section-info[b-6tthv9ul1g] {
    flex: 1;
    min-width: 0;
}

.td-section-name[b-6tthv9ul1g] {
    font-size: 15px;
    font-weight: 600;
    color: var(--color-neutral-900);
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.td-section-preview[b-6tthv9ul1g] {
    font-size: 12px;
    color: var(--color-neutral-500);
    display: block;
    margin-top: 2px;
}

.td-section-diff[b-6tthv9ul1g] { color: var(--color-neutral-400); }

.td-section-right[b-6tthv9ul1g] {
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
    flex-shrink: 0;
}

.td-marks-badge[b-6tthv9ul1g] {
    font-size: 12px;
    font-weight: 700;
    color: var(--color-primary-dark);
    background: var(--color-primary-light, var(--color-teal-100));
    padding: 3px 10px;
    border-radius: var(--radius-full);
    white-space: nowrap;
}

.td-chevron[b-6tthv9ul1g] {
    color: var(--color-neutral-400);
    font-size: 12px;
    transition: transform 0.2s;
}
.td-chevron--up[b-6tthv9ul1g] { transform: rotate(180deg); }

/* ── Expanded section body ────────────────────────────────────────────────── */
.td-section-body[b-6tthv9ul1g] {
    border-top: 1px solid var(--color-neutral-100);
    padding: var(--spacing-4) var(--spacing-6);
    background: var(--color-neutral-50);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-1);
}

.td-detail-grid[b-6tthv9ul1g] {
    display: flex;
    gap: var(--spacing-8);
    margin-bottom: var(--spacing-3);
    flex-wrap: wrap;
}

.td-detail-row[b-6tthv9ul1g] {
    display: flex;
    align-items: baseline;
    gap: var(--spacing-2);
    padding: 5px 0;
    border-bottom: 1px solid var(--color-neutral-100);
}
.td-detail-row:last-child[b-6tthv9ul1g] { border-bottom: none; }

.td-detail-row--full[b-6tthv9ul1g] { display: flex; flex-direction: row; gap: var(--spacing-3); padding: 5px 0; border-bottom: 1px solid var(--color-neutral-100); }
.td-detail-row--full:last-child[b-6tthv9ul1g] { border-bottom: none; }

.td-detail-label[b-6tthv9ul1g] {
    font-size: 12px;
    color: var(--color-neutral-500);
    font-weight: 500;
    width: 140px;
    flex-shrink: 0;
}

.td-detail-value[b-6tthv9ul1g] {
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--color-neutral-800);
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.td-detail-value--highlight[b-6tthv9ul1g] { color: var(--color-primary-dark); }

.td-type-chip[b-6tthv9ul1g] {
    display: inline-block;
    padding: 2px 8px;
    background: var(--color-primary-light, var(--color-teal-100));
    color: var(--color-primary-dark);
    border-radius: var(--radius-sm);
    font-size: 12px;
    font-weight: 600;
}

/* ── Audit ────────────────────────────────────────────────────────────────── */
.td-audit[b-6tthv9ul1g] {
    background: white;
    border: 1px solid var(--color-neutral-200);
    border-radius: var(--radius-md);
    padding: var(--spacing-5) var(--spacing-6);
    margin-bottom: var(--spacing-5);
    max-width: 500px;
}

.td-audit-title[b-6tthv9ul1g] {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--color-neutral-400);
    margin-bottom: var(--spacing-3);
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
}

.td-audit-rows[b-6tthv9ul1g] { display: flex; flex-direction: column; }

.td-audit-row[b-6tthv9ul1g] {
    display: flex;
    align-items: baseline;
    padding: 6px 0;
    border-bottom: 1px solid var(--color-neutral-50);
}
.td-audit-row:last-child[b-6tthv9ul1g] { border-bottom: none; }

.td-audit-label[b-6tthv9ul1g] {
    width: 120px;
    flex-shrink: 0;
    font-size: 12px;
    color: var(--color-neutral-500);
    font-weight: 500;
}

.td-audit-value[b-6tthv9ul1g] {
    font-size: var(--font-size-sm);
    color: var(--color-neutral-800);
    font-weight: 500;
}

/* ── Inline error ─────────────────────────────────────────────────────────── */
.td-error[b-6tthv9ul1g] {
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
    padding: var(--spacing-4) var(--spacing-5);
    background: #fef2f2;
    border: 1px solid #fca5a5;
    border-radius: var(--radius-sm);
    color: #dc2626;
    font-size: var(--font-size-sm);
    margin-bottom: var(--spacing-5);
}

/* ── Responsive ───────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
    .td-page[b-6tthv9ul1g] { padding: var(--spacing-4); }

    .td-header[b-6tthv9ul1g] { flex-direction: column; gap: var(--spacing-4); }

    .td-actions[b-6tthv9ul1g] { width: 100%; }
    .td-btn-primary[b-6tthv9ul1g] { flex: 1; justify-content: center; }

    .td-kpis[b-6tthv9ul1g] { grid-template-columns: 1fr 1fr; }
    .td-kpis .td-kpi--primary[b-6tthv9ul1g] { grid-column: 1 / -1; }

    .td-section-row[b-6tthv9ul1g] { padding: 12px var(--spacing-4); }

    .td-audit[b-6tthv9ul1g] { max-width: 100%; }
}

@media (max-width: 480px) {
    .td-kpis[b-6tthv9ul1g] { grid-template-columns: 1fr; }
    .td-kpis .td-kpi--primary[b-6tthv9ul1g] { grid-column: 1; }

    .td-title[b-6tthv9ul1g] { font-size: 18px; }
}
/* /Pages/Teacher/ExamTemplates/Index.razor.rz.scp.css */
.exam-templates-page[b-9psk39dkhk] {
    padding: var(--spacing-6);
    max-width: 1600px;
    margin: 0 auto;
}

.page-header[b-9psk39dkhk] {
    margin-bottom: var(--spacing-6);
}

.header-content[b-9psk39dkhk] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--spacing-4);
}

.header-text[b-9psk39dkhk] {
    flex: 1;
}

.page-title[b-9psk39dkhk] {
    font-size: 32px;
    font-weight: 700;
    color: var(--color-neutral-900);
    margin: 0 0 var(--spacing-2) 0;
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
}

.page-title i[b-9psk39dkhk] {
    color: var(--color-primary-600);
}

.page-subtitle[b-9psk39dkhk] {
    font-size: 15px;
    color: var(--color-neutral-600);
    margin: 0;
}

.create-btn[b-9psk39dkhk] {
    white-space: nowrap;
    height: 44px;
    padding: 0 var(--spacing-6);
    font-size: 15px;
}

.filters-section[b-9psk39dkhk] {
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    gap: var(--spacing-3);
    margin-bottom: var(--spacing-5);
    padding: var(--spacing-4) var(--spacing-5);
    background: var(--color-neutral-0);
    border: 1px solid var(--color-neutral-200);
    border-radius: var(--radius-md);
    flex-wrap: wrap;
}

.search-box[b-9psk39dkhk] {
    position: relative;
    flex: 1 1 260px;
    min-width: 0;
}

.search-icon[b-9psk39dkhk] {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--color-neutral-500);
    font-size: 16px;
}

.search-input[b-9psk39dkhk] {
    width: 100%;
    height: 40px;
    padding: 0 44px;
    border: 1px solid #D1D5DB;
    border-radius: var(--radius-sm);
    font-size: 14px;
    transition: all 0.2s;
    box-sizing: border-box;
}

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

.clear-search[b-9psk39dkhk] {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: var(--color-neutral-500);
    cursor: pointer;
    padding: 4px;
    border-radius: var(--radius-xs);
    transition: all 0.2s;
}

.clear-search:hover[b-9psk39dkhk] {
    background: var(--color-neutral-200);
    color: var(--color-neutral-700);
}

.filter-controls[b-9psk39dkhk] {
    display: flex;
    gap: var(--spacing-2);
    align-items: center;
    flex-wrap: wrap;
}

.filter-group[b-9psk39dkhk] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

/* Hide verbose labels — select placeholders are sufficient inline */
.filter-group label[b-9psk39dkhk] {
    display: none;
    font-size: 13px;
    font-weight: 600;
    color: var(--color-neutral-700);
}

.filter-select[b-9psk39dkhk] {
    height: 40px;
    padding: 0 12px;
    border: 1px solid #D1D5DB;
    border-radius: var(--radius-sm);
    font-size: 14px;
    background: var(--color-neutral-0);
    cursor: pointer;
    transition: border-color 0.15s;
    min-width: 130px;
}

.filter-select:focus[b-9psk39dkhk] {
    outline: none;
    border-color: var(--color-primary-400);
}

.clear-filters-btn[b-9psk39dkhk] {
    margin-top: 0;
    height: 40px;
}

.results-summary[b-9psk39dkhk] {
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
    margin-bottom: var(--spacing-4);
    font-size: 14px;
    color: var(--color-neutral-700);
}

.filter-indicator[b-9psk39dkhk] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    background: var(--color-primary-100);
    color: var(--color-primary-700);
    border-radius: var(--radius-full);
    font-size: 13px;
    font-weight: 600;
}

/* Templates Grid — responsive columns */
.templates-grid[b-9psk39dkhk] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 18px;
    margin-bottom: 40px;
}

/* 3 cols at 900px, 4 at 1200px, 5 at 1400px (via minmax above) */
@media (min-width: 1400px) {
    .templates-grid[b-9psk39dkhk] { grid-template-columns: repeat(5, 1fr); }
}
@media (min-width: 1200px) and (max-width: 1399px) {
    .templates-grid[b-9psk39dkhk] { grid-template-columns: repeat(4, 1fr); }
}
@media (min-width: 900px) and (max-width: 1199px) {
    .templates-grid[b-9psk39dkhk] { grid-template-columns: repeat(3, 1fr); }
}

.loading-container[b-9psk39dkhk] {
    min-height: 400px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.skeleton-grid[b-9psk39dkhk] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: var(--spacing-5);
    width: 100%;
}

.skeleton-card[b-9psk39dkhk] {
    background: var(--color-neutral-0);
    border: 2px solid var(--color-neutral-200);
    border-radius: var(--radius-md);
    padding: var(--spacing-5);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-3);
}

.skeleton-header[b-9psk39dkhk],
.skeleton-title[b-9psk39dkhk],
.skeleton-text[b-9psk39dkhk],
.skeleton-footer[b-9psk39dkhk] {
    background: linear-gradient(90deg, var(--color-neutral-200) 25%, var(--color-neutral-100) 50%, var(--color-neutral-200) 75%);
    background-size: 200% 100%;
    animation: skeleton-loading-b-9psk39dkhk 1.5s infinite;
    border-radius: var(--radius-sm);
}

.skeleton-header[b-9psk39dkhk] {
    height: 32px;
    width: 60%;
}

.skeleton-title[b-9psk39dkhk] {
    height: 24px;
    width: 85%;
}

.skeleton-text[b-9psk39dkhk] {
    height: 16px;
    width: 95%;
}

.skeleton-footer[b-9psk39dkhk] {
    height: 40px;
    width: 100%;
    margin-top: var(--spacing-2);
}

@keyframes skeleton-loading-b-9psk39dkhk {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

.error-container[b-9psk39dkhk],
.empty-state[b-9psk39dkhk] {
    min-height: 400px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: var(--spacing-8);
    background: var(--color-neutral-50);
    border-radius: var(--radius-md);
}

.error-icon[b-9psk39dkhk],
.empty-icon[b-9psk39dkhk] {
    font-size: 64px;
    color: var(--color-neutral-400);
    margin-bottom: var(--spacing-4);
}

.error-icon[b-9psk39dkhk] {
    color: var(--color-danger-500);
}

.error-container h3[b-9psk39dkhk],
.empty-state h3[b-9psk39dkhk] {
    font-size: 24px;
    font-weight: 700;
    color: var(--color-neutral-900);
    margin: 0 0 var(--spacing-2) 0;
}

.error-container p[b-9psk39dkhk],
.empty-state p[b-9psk39dkhk] {
    font-size: 15px;
    color: var(--color-neutral-600);
    margin: 0 0 var(--spacing-5) 0;
    max-width: 500px;
}

.pagination-container[b-9psk39dkhk] {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--spacing-2);
    padding: var(--spacing-5) 0;
}

.pagination-btn[b-9psk39dkhk] {
    padding: 10px 16px;
    border: 2px solid var(--color-neutral-300);
    background: var(--color-neutral-0);
    color: var(--color-neutral-700);
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    gap: 8px;
}

.pagination-btn:hover:not(:disabled)[b-9psk39dkhk] {
    border-color: var(--color-primary-400);
    background: var(--color-primary-50);
    color: var(--color-primary-700);
}

.pagination-btn:disabled[b-9psk39dkhk] {
    opacity: 0.4;
    cursor: not-allowed;
}

.page-numbers[b-9psk39dkhk] {
    display: flex;
    gap: 6px;
}

.page-number[b-9psk39dkhk] {
    width: 40px;
    height: 40px;
    border: 2px solid var(--color-neutral-300);
    background: var(--color-neutral-0);
    color: var(--color-neutral-700);
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    transition: all 0.2s;
}

.page-number:hover[b-9psk39dkhk] {
    border-color: var(--color-primary-400);
    background: var(--color-primary-50);
    color: var(--color-primary-700);
}

.page-number.active[b-9psk39dkhk] {
    border-color: var(--color-primary-600);
    background: var(--color-primary-600);
    color: var(--color-neutral-0);
}

.btn-secondary:hover:not(:disabled)[b-9psk39dkhk] {
    border-color: var(--color-neutral-400);
    background: var(--color-neutral-100);
}

@media (max-width: 767px) {
    .exam-templates-page[b-9psk39dkhk] { padding: var(--spacing-4); }

    .header-content[b-9psk39dkhk] { flex-direction: column; }

    .page-title[b-9psk39dkhk] { font-size: 24px; }

    .create-btn[b-9psk39dkhk] { width: 100%; justify-content: center; }

    .filters-section[b-9psk39dkhk] { flex-direction: column; }

    .search-box[b-9psk39dkhk] { width: 100%; flex: none; }

    .templates-grid[b-9psk39dkhk],
    .skeleton-grid[b-9psk39dkhk] { grid-template-columns: 1fr; }

    .filter-controls[b-9psk39dkhk] {
        flex-direction: column;
        width: 100%;
    }

    .filter-group[b-9psk39dkhk],
    .filter-select[b-9psk39dkhk] { width: 100%; }

    .clear-filters-btn[b-9psk39dkhk] { width: 100%; }
}
/* /Pages/Teacher/ExamTemplates/SimpleCreate.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════════
   SimpleCreate — Exam Template Builder
   Design: Grouped form cards + progress bar + sticky footer
   ═══════════════════════════════════════════════════════════════ */

/* ── Page wrapper ─────────────────────────────────────────────────────────── */
.simple-create-page[b-mo2vqk54m2] {
    max-width: 860px;
    margin: 0 auto;
    padding: var(--spacing-7) var(--spacing-5) 100px; /* 100px bottom pad for sticky footer */
    font-family: var(--font-primary);
}

/* ── Page header ──────────────────────────────────────────────────────────── */
.page-header[b-mo2vqk54m2] {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-5);
    margin-bottom: var(--spacing-7);
}

.btn-back[b-mo2vqk54m2] {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-2);
    padding: var(--spacing-3) var(--spacing-4);
    border: 1px solid var(--color-neutral-200);
    border-radius: var(--radius-sm);
    background: white;
    color: var(--color-neutral-600);
    font-size: var(--font-size-sm);
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
    transition: background 0.15s, border-color 0.15s;
}
.btn-back:hover[b-mo2vqk54m2] { background: var(--color-neutral-50); border-color: var(--color-neutral-300); }

.header-text h1[b-mo2vqk54m2] { margin: 0 0 4px 0; font-size: 20px; font-weight: 700; color: var(--color-neutral-900); }
.header-text p[b-mo2vqk54m2]  { margin: 0; font-size: var(--font-size-sm); color: var(--color-neutral-500); }

/* ── Loading ──────────────────────────────────────────────────────────────── */
.loading-state[b-mo2vqk54m2] {
    display: flex; align-items: center; gap: var(--spacing-3);
    padding: var(--spacing-9); justify-content: center;
    color: var(--color-neutral-500); font-size: var(--font-size-sm);
}

/* ── Form Cards ───────────────────────────────────────────────────────────── */
.form-card[b-mo2vqk54m2] {
    background: white;
    border: 1px solid var(--color-neutral-200);
    border-radius: var(--radius-md);
    padding: var(--spacing-6);
    margin-bottom: var(--spacing-5);
}

.objective-only-notice[b-mo2vqk54m2] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-top: var(--spacing-4);
    padding: 10px 14px;
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    border-radius: var(--radius-sm);
    font-size: 0.82rem;
    color: #1d4ed8;
    line-height: 1.5;
}

.objective-only-notice i[b-mo2vqk54m2] {
    margin-top: 2px;
    flex-shrink: 0;
    color: #2563eb;
}

.form-card-title[b-mo2vqk54m2] {
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
    font-size: 13px;
    font-weight: 700;
    color: var(--color-neutral-700);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: var(--spacing-5);
    padding-bottom: var(--spacing-4);
    border-bottom: 1px solid var(--color-neutral-100);
}

.form-card-step[b-mo2vqk54m2] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--color-primary);
    color: white;
    font-size: 11px;
    font-weight: 700;
    flex-shrink: 0;
}

/* ── Grid layout for form fields ─────────────────────────────────────────── */
.form-grid-3[b-mo2vqk54m2] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-5);
}

.form-field[b-mo2vqk54m2] {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-2);
}

.form-field.span-full[b-mo2vqk54m2] { grid-column: 1 / -1; }

.form-field label[b-mo2vqk54m2] {
    font-size: var(--font-size-xs);
    font-weight: 600;
    color: var(--color-neutral-600);
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

.req[b-mo2vqk54m2] { color: #ef4444; }

/* ── Question Bank Panel ──────────────────────────────────────────────────── */
.bank-panel[b-mo2vqk54m2] {
    background: #f8fffe;
    border: 1px solid #bbf7d0;
    border-radius: var(--radius-md);
    padding: var(--spacing-5) var(--spacing-6);
    margin-bottom: var(--spacing-5);
}

.bank-panel.loading[b-mo2vqk54m2] { background: var(--color-neutral-50); border-color: var(--color-neutral-200); }

.bank-loading[b-mo2vqk54m2] { color: var(--color-neutral-500); font-size: var(--font-size-sm); display: flex; align-items: center; gap: var(--spacing-2); }
.bank-empty[b-mo2vqk54m2]   { color: #d97706; font-size: var(--font-size-sm); display: flex; align-items: center; gap: var(--spacing-2); }

.bank-header[b-mo2vqk54m2] {
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: #15803d;
    margin-bottom: var(--spacing-4);
}

.bank-total-badge[b-mo2vqk54m2] {
    background: #dcfce7;
    color: #166534;
    font-size: var(--font-size-xs);
    font-weight: 700;
    padding: 2px 8px;
    border-radius: var(--radius-sm);
}

.bank-groups[b-mo2vqk54m2] {
    display: flex;
    gap: var(--spacing-8);
    flex-wrap: wrap;
}

.bank-group[b-mo2vqk54m2] { min-width: 160px; }

.bank-group-title[b-mo2vqk54m2] {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--color-neutral-400);
    margin-bottom: var(--spacing-2);
    padding-bottom: var(--spacing-1);
    border-bottom: 1px solid #d1fae5;
}

.bank-row[b-mo2vqk54m2] {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    padding: 4px 0;
    font-size: var(--font-size-xs);
    border-bottom: 1px solid #f0fdf4;
}

.bank-row-name[b-mo2vqk54m2]  { flex: 1; color: var(--color-neutral-700); }
.bank-row-count[b-mo2vqk54m2] { font-weight: 700; color: #15803d; font-family: var(--font-numeric-mono); min-width: 28px; text-align: right; }

.bank-row-demand[b-mo2vqk54m2] {
    font-size: 10px;
    color: var(--color-neutral-400);
}

.bank-row--used   .bank-row-name[b-mo2vqk54m2]  { color: #15803d; font-weight: 600; }
.bank-row--used   .bank-row-count[b-mo2vqk54m2] { color: #166534; }

.bank-row--over[b-mo2vqk54m2]   { background: #fef2f2; border-radius: 3px; padding: 4px 4px; }
.bank-row--over   .bank-row-name[b-mo2vqk54m2]  { color: #b91c1c; font-weight: 600; }
.bank-row--over   .bank-row-count[b-mo2vqk54m2] { color: #991b1b; }
.bank-row--over   .bank-row-demand[b-mo2vqk54m2] { color: #dc2626; }

/* ── Marks Progress Bar ───────────────────────────────────────────────────── */
.marks-progress-wrap[b-mo2vqk54m2] {
    margin-bottom: var(--spacing-5);
}

.marks-progress-labels[b-mo2vqk54m2] {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 6px;
    font-size: var(--font-size-sm);
    color: var(--color-neutral-600);
}

.marks-progress-num[b-mo2vqk54m2] {
    font-size: 18px;
    font-weight: 700;
    font-family: var(--font-numeric-mono);
    color: var(--color-neutral-900);
}
.marks-progress-num.done[b-mo2vqk54m2]  { color: #16a34a; }
.marks-progress-num.over[b-mo2vqk54m2]  { color: #dc2626; }

.marks-progress-right[b-mo2vqk54m2] {
    font-size: var(--font-size-sm);
    color: var(--color-neutral-400);
    display: flex; align-items: center; gap: 4px;
}
.marks-progress-right.done[b-mo2vqk54m2]  { color: #16a34a; font-weight: 600; }
.marks-progress-right.over[b-mo2vqk54m2]  { color: #dc2626; font-weight: 600; }

.marks-progress-track[b-mo2vqk54m2] {
    height: 8px;
    background: var(--color-neutral-100);
    border-radius: 99px;
    overflow: hidden;
}

.marks-progress-fill[b-mo2vqk54m2] {
    height: 100%;
    border-radius: 99px;
    transition: width 0.3s ease, background-color 0.3s ease;
    background: var(--color-primary);
}
.marks-progress-fill.done[b-mo2vqk54m2]  { background: #16a34a; }
.marks-progress-fill.over[b-mo2vqk54m2]  { background: #dc2626; }
.marks-progress-fill.under[b-mo2vqk54m2] { background: var(--color-primary); }

/* ── Sections Card ────────────────────────────────────────────────────────── */
.sections-card[b-mo2vqk54m2] { padding: 0; overflow: hidden; }

.sections-card .form-card-title[b-mo2vqk54m2] {
    padding: var(--spacing-5) var(--spacing-6);
    margin-bottom: 0;
    border-bottom: 1px solid var(--color-neutral-100);
}

/* ── Individual section block ─────────────────────────────────────────────── */
.section-block[b-mo2vqk54m2] {
    border-bottom: 1px solid var(--color-neutral-100);
    padding: var(--spacing-4) var(--spacing-6);
}

.section-block:last-child[b-mo2vqk54m2] { border-bottom: none; }

.section-block-header[b-mo2vqk54m2] {
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
    margin-bottom: var(--spacing-4);
    background: var(--color-neutral-50);
    border-radius: var(--radius-xs);
    padding: 8px 10px;
}

.section-custom-name[b-mo2vqk54m2] {
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--color-neutral-700);
    flex: 1;
}

.label-badge[b-mo2vqk54m2] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: var(--radius-sm);
    background: var(--color-primary-light, var(--color-teal-100));
    color: var(--color-primary-dark);
    font-weight: 700;
    font-size: var(--font-size-sm);
    flex-shrink: 0;
}

/* Section fields in a row */
.section-block-fields[b-mo2vqk54m2] {
    display: grid;
    grid-template-columns: 1fr 140px 140px 80px;
    gap: var(--spacing-4);
    align-items: end;
}

.section-field[b-mo2vqk54m2] { display: flex; flex-direction: column; gap: var(--spacing-2); }

.section-field label[b-mo2vqk54m2] {
    font-size: var(--font-size-xs);
    font-weight: 600;
    color: var(--color-neutral-500);
    text-transform: uppercase;
    letter-spacing: 0.3px;
    white-space: nowrap;
}

.section-field-total[b-mo2vqk54m2] {
    align-items: flex-end;
}

.section-total[b-mo2vqk54m2] {
    font-family: var(--font-numeric-mono);
    font-size: 16px;
    font-weight: 700;
    color: var(--color-neutral-300);
    padding-bottom: 8px; /* align with inputs */
}
.section-total.filled[b-mo2vqk54m2] { color: var(--color-neutral-800); }

.field-warn[b-mo2vqk54m2] {
    font-size: 11px;
    color: #dc2626;
    margin-top: 2px;
}

/* ── Advanced toggle ──────────────────────────────────────────────────────── */
.advanced-toggle-row[b-mo2vqk54m2] {
    margin-top: var(--spacing-3);
}

.btn-advanced[b-mo2vqk54m2] {
    background: none;
    border: none;
    color: var(--color-primary);
    font-size: var(--font-size-xs);
    cursor: pointer;
    padding: var(--spacing-1) 0;
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-2);
    font-weight: 500;
}
.btn-advanced:hover[b-mo2vqk54m2] { text-decoration: underline; }

.adv-summary[b-mo2vqk54m2] {
    color: var(--color-neutral-500);
    font-weight: 400;
}

.advanced-panel[b-mo2vqk54m2] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-6);
    padding: var(--spacing-4) 0 var(--spacing-2) 0;
}

.adv-field[b-mo2vqk54m2] {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-2);
    flex: 1;
    min-width: 200px;
}

.adv-field label[b-mo2vqk54m2] {
    font-size: var(--font-size-xs);
    font-weight: 600;
    color: var(--color-neutral-500);
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

/* ── Difficulty row ───────────────────────────────────────────────────────── */
.difficulty-row[b-mo2vqk54m2] { display: flex; align-items: center; gap: var(--spacing-3); flex-wrap: wrap; }

.diff-tag[b-mo2vqk54m2] { font-size: var(--font-size-xs); font-weight: 600; padding: 2px 8px; border-radius: var(--radius-full); }
.diff-tag.easy[b-mo2vqk54m2]   { background: #dcfce7; color: #15803d; }
.diff-tag.medium[b-mo2vqk54m2] { background: #fef9c3; color: #92400e; }
.diff-tag.hard[b-mo2vqk54m2]   { background: #fee2e2; color: #991b1b; }

.diff-total[b-mo2vqk54m2] { font-family: var(--font-numeric-mono); font-size: var(--font-size-sm); font-weight: 600; margin-left: var(--spacing-2); }
.diff-total.ok[b-mo2vqk54m2]   { color: #16a34a; }
.diff-total.warn[b-mo2vqk54m2] { color: var(--color-neutral-500); }

/* ── Remove button ────────────────────────────────────────────────────────── */
.btn-remove[b-mo2vqk54m2] {
    margin-left: auto;
    background: none;
    border: none;
    color: var(--color-neutral-400);
    cursor: pointer;
    padding: var(--spacing-2);
    border-radius: var(--radius-xs);
    font-size: 13px;
    flex-shrink: 0;
    transition: color 0.15s, background 0.15s;
}
.btn-remove:hover:not(:disabled)[b-mo2vqk54m2] { color: #dc2626; background: #fef2f2; }
.btn-remove:disabled[b-mo2vqk54m2] { opacity: 0.3; cursor: not-allowed; }

/* ── Add Section ──────────────────────────────────────────────────────────── */
.add-section-row[b-mo2vqk54m2] {
    padding: var(--spacing-4) var(--spacing-6);
    background: var(--color-neutral-50);
    border-top: 1px solid var(--color-neutral-100);
}

.btn-add-section[b-mo2vqk54m2] {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-2);
    height: 40px;
    padding: 0 var(--spacing-5);
    border: 1.5px solid var(--color-primary);
    border-radius: var(--radius-sm);
    background: white;
    color: var(--color-primary);
    font-size: var(--font-size-sm);
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}
.btn-add-section:hover[b-mo2vqk54m2] { background: var(--color-primary); color: white; }

/* ── Shared inputs ────────────────────────────────────────────────────────── */
.input-text[b-mo2vqk54m2],
.input-select[b-mo2vqk54m2] {
    width: 100%;
    height: 38px;
    padding: 0 var(--spacing-4);
    border: 1px solid var(--color-neutral-200);
    border-radius: var(--radius-xs);
    font-size: var(--font-size-sm);
    color: var(--color-neutral-900);
    background: white;
    outline: none;
    transition: border-color 0.15s, box-shadow 0.15s;
    font-family: var(--font-primary);
    box-sizing: border-box;
}
.input-text:focus[b-mo2vqk54m2],
.input-select:focus[b-mo2vqk54m2] {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px var(--color-primary-50);
}

.input-number-fixed[b-mo2vqk54m2] {
    width: 120px;
    height: 38px;
    padding: 0 var(--spacing-3);
    border: 1px solid var(--color-neutral-200);
    border-radius: var(--radius-xs);
    font-size: var(--font-size-sm);
    color: var(--color-neutral-900);
    background: white;
    outline: none;
    text-align: center;
    font-family: var(--font-numeric-mono);
    transition: border-color 0.15s, box-shadow 0.15s;
    box-sizing: border-box;
}
.input-number-fixed:focus[b-mo2vqk54m2] {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px var(--color-primary-50);
}

/* Small number inputs in advanced panel */
.input-number.small[b-mo2vqk54m2] {
    width: 58px;
    height: 34px;
    padding: 0 var(--spacing-2);
    border: 1px solid var(--color-neutral-200);
    border-radius: var(--radius-xs);
    font-size: var(--font-size-sm);
    color: var(--color-neutral-900);
    background: white;
    outline: none;
    text-align: center;
    font-family: var(--font-numeric-mono);
    box-sizing: border-box;
    transition: border-color 0.15s;
}
.input-number.small:focus[b-mo2vqk54m2] { border-color: var(--color-primary); }

.input-number--over[b-mo2vqk54m2] {
    border-color: #ef4444 !important;
    background: #fef2f2;
    color: #b91c1c;
    box-shadow: 0 0 0 2px #fecaca;
}

/* Pass mark inline */
.pass-field-wrap[b-mo2vqk54m2] { display: flex; align-items: center; gap: var(--spacing-2); }
.pass-pct[b-mo2vqk54m2]  { font-size: var(--font-size-xs); color: var(--color-neutral-400); white-space: nowrap; }
.pass-warn[b-mo2vqk54m2] { font-size: var(--font-size-xs); color: #dc2626; display: flex; align-items: center; gap: 4px; font-weight: 600; white-space: nowrap; }

/* ── Validation error ─────────────────────────────────────────────────────── */
.error-msg[b-mo2vqk54m2] {
    display: flex; align-items: center; gap: var(--spacing-3);
    padding: var(--spacing-4) var(--spacing-5);
    border-radius: var(--radius-sm);
    background: #fef2f2; border: 1px solid #fca5a5;
    color: #dc2626; font-size: var(--font-size-sm);
    margin-bottom: var(--spacing-5);
}

/* ── Sticky footer ────────────────────────────────────────────────────────── */
.sticky-footer[b-mo2vqk54m2] {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: white;
    border-top: 1px solid var(--color-neutral-200);
    box-shadow: 0 -2px 12px rgba(0,0,0,0.06);
    z-index: 100;
}

.sticky-footer-inner[b-mo2vqk54m2] {
    max-width: 860px;
    margin: 0 auto;
    padding: var(--spacing-3) var(--spacing-5);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-4);
}

.sticky-footer-actions[b-mo2vqk54m2] {
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
}

.footer-validation-hint[b-mo2vqk54m2] {
    max-width: 860px;
    margin: 0 auto;
    padding: 0 var(--spacing-5) var(--spacing-2);
    font-size: var(--font-size-xs);
    color: #d97706;
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
}

.btn-preview[b-mo2vqk54m2] {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-2);
    height: 40px;
    padding: 0 var(--spacing-5);
    border: 1.5px solid var(--color-neutral-300);
    border-radius: var(--radius-sm);
    background: white;
    color: var(--color-neutral-600);
    font-size: var(--font-size-sm);
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}
.btn-preview:hover:not(:disabled)[b-mo2vqk54m2] { background: var(--color-neutral-50); border-color: var(--color-neutral-400); }
.btn-preview:disabled[b-mo2vqk54m2] { opacity: 0.4; cursor: not-allowed; }

.btn-cancel[b-mo2vqk54m2] {
    height: 40px;
    padding: 0 var(--spacing-5);
    border: 1px solid var(--color-neutral-200);
    border-radius: var(--radius-sm);
    background: white;
    color: var(--color-neutral-600);
    font-size: var(--font-size-sm);
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s;
}
.btn-cancel:hover[b-mo2vqk54m2] { background: var(--color-neutral-50); }

.btn-save[b-mo2vqk54m2] {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-2);
    height: 40px;
    padding: 0 var(--spacing-7);
    background: var(--color-primary);
    border: none;
    border-radius: var(--radius-sm);
    color: white;
    font-size: var(--font-size-sm);
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s, opacity 0.15s;
}
.btn-save:hover:not(:disabled)[b-mo2vqk54m2] { background: var(--color-primary-dark); }
.btn-save:disabled[b-mo2vqk54m2] { opacity: 0.5; cursor: not-allowed; }

/* ── Preview Modal ────────────────────────────────────────────────────────── */
.preview-backdrop[b-mo2vqk54m2] {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.45);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-5);
}

.preview-modal[b-mo2vqk54m2] {
    background: white;
    border-radius: var(--radius-md);
    width: 100%;
    max-width: 600px;
    max-height: 85vh;
    overflow-y: auto;
    box-shadow: 0 20px 60px rgba(0,0,0,0.2);
}

.preview-modal-header[b-mo2vqk54m2] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: var(--spacing-5) var(--spacing-6);
    border-bottom: 1px solid var(--color-neutral-100);
    position: sticky;
    top: 0;
    background: white;
    z-index: 1;
}

.preview-modal-title[b-mo2vqk54m2] {
    font-size: 16px;
    font-weight: 700;
    color: var(--color-neutral-900);
    margin-bottom: 4px;
}

.preview-modal-meta[b-mo2vqk54m2] {
    font-size: var(--font-size-xs);
    color: var(--color-neutral-500);
}

.preview-close[b-mo2vqk54m2] {
    background: none;
    border: none;
    color: var(--color-neutral-400);
    font-size: 16px;
    cursor: pointer;
    padding: var(--spacing-2);
    border-radius: var(--radius-xs);
    flex-shrink: 0;
}
.preview-close:hover[b-mo2vqk54m2] { background: var(--color-neutral-100); color: var(--color-neutral-700); }

.preview-marks-summary[b-mo2vqk54m2] {
    display: flex;
    gap: var(--spacing-5);
    padding: var(--spacing-3) var(--spacing-6);
    background: var(--color-neutral-50);
    font-size: var(--font-size-sm);
    color: var(--color-neutral-600);
    border-bottom: 1px solid var(--color-neutral-100);
    flex-wrap: wrap;
}
.preview-marks-ok[b-mo2vqk54m2]   { color: #16a34a; font-weight: 600; }
.preview-marks-over[b-mo2vqk54m2] { color: #dc2626; font-weight: 600; }
.preview-marks-warn[b-mo2vqk54m2] { color: #d97706; font-weight: 600; }

.preview-sections[b-mo2vqk54m2] { padding: var(--spacing-4) var(--spacing-6); }

.preview-section[b-mo2vqk54m2] {
    margin-bottom: var(--spacing-5);
    border: 1px solid var(--color-neutral-100);
    border-radius: var(--radius-sm);
    overflow: hidden;
}
.preview-section:last-child[b-mo2vqk54m2] { margin-bottom: 0; }

.preview-section-header[b-mo2vqk54m2] {
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
    padding: var(--spacing-3) var(--spacing-4);
    background: var(--color-neutral-50);
    border-bottom: 1px solid var(--color-neutral-100);
}

.preview-section-name[b-mo2vqk54m2] {
    flex: 1;
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--color-neutral-800);
}

.preview-section-marks[b-mo2vqk54m2] {
    font-size: var(--font-size-xs);
    font-weight: 700;
    color: var(--color-primary-dark);
    background: var(--color-primary-light, var(--color-teal-100));
    padding: 2px 8px;
    border-radius: var(--radius-sm);
}

.preview-section-row[b-mo2vqk54m2] {
    display: flex;
    align-items: baseline;
    padding: 6px var(--spacing-4);
    border-bottom: 1px solid var(--color-neutral-50);
    font-size: var(--font-size-sm);
    color: var(--color-neutral-800);
}
.preview-section-row:last-child[b-mo2vqk54m2] { border-bottom: none; }

.preview-col-label[b-mo2vqk54m2] {
    width: 140px;
    flex-shrink: 0;
    font-size: 12px;
    color: var(--color-neutral-500);
    font-weight: 500;
}

/* ── Responsive ───────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
    .simple-create-page[b-mo2vqk54m2] { padding: var(--spacing-5) var(--spacing-4) 100px; }

    .form-grid-3[b-mo2vqk54m2] { grid-template-columns: 1fr 1fr; }
    .form-field.span-full[b-mo2vqk54m2] { grid-column: 1 / -1; }

    .section-block-fields[b-mo2vqk54m2] { grid-template-columns: 1fr 1fr; }
    .section-field-type[b-mo2vqk54m2]   { grid-column: 1 / -1; }

    .bank-groups[b-mo2vqk54m2] { gap: var(--spacing-5); }

    .sticky-footer-inner[b-mo2vqk54m2] { flex-wrap: wrap; }
    .btn-preview[b-mo2vqk54m2] { order: 2; }
    .sticky-footer-actions[b-mo2vqk54m2] { order: 1; margin-left: auto; }
}

@media (max-width: 480px) {
    .form-grid-3[b-mo2vqk54m2] { grid-template-columns: 1fr; }

    .sticky-footer-actions[b-mo2vqk54m2] { width: 100%; justify-content: stretch; }
    .btn-cancel[b-mo2vqk54m2], .btn-save[b-mo2vqk54m2] { flex: 1; justify-content: center; }
    .btn-preview[b-mo2vqk54m2] { width: 100%; justify-content: center; }
}

/* ── Page header ────────────────────────────────────────────────────────────── */
.page-header[b-mo2vqk54m2] {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-5);
    margin-bottom: var(--spacing-7);
}

.btn-back[b-mo2vqk54m2] {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-2);
    padding: var(--spacing-3) var(--spacing-5);
    border: 1px solid var(--color-neutral-200);
    border-radius: var(--radius-sm);
    background: white;
    color: var(--color-neutral-600);
    font-size: var(--font-size-sm);
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s, border-color 0.15s;
}

.btn-back:hover[b-mo2vqk54m2] {
    background: var(--color-neutral-50);
    border-color: var(--color-neutral-300);
}

.header-text h1[b-mo2vqk54m2] {
    margin: 0 0 var(--spacing-1) 0;
    font-size: 22px;
    font-weight: 700;
    color: var(--color-neutral-900);
}

.header-text p[b-mo2vqk54m2] {
    margin: 0;
    font-size: var(--font-size-sm);
    color: var(--color-neutral-500);
}

/* ── Loading ────────────────────────────────────────────────────────────────── */
.loading-state[b-mo2vqk54m2] {
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
    padding: var(--spacing-9);
    justify-content: center;
    color: var(--color-neutral-500);
    font-size: var(--font-size-sm);
}

/* ── Info bar ───────────────────────────────────────────────────────────────── */
.info-bar[b-mo2vqk54m2] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-5);
    padding: var(--spacing-6);
    background: white;
    border: 1px solid var(--color-neutral-200);
    border-radius: var(--radius-md);
    margin-bottom: var(--spacing-5);
}

.info-field[b-mo2vqk54m2] {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-2);
    flex: 1;
    min-width: 200px;
}

.info-field.narrow[b-mo2vqk54m2] {
    min-width: 130px;
    flex: 0 1 150px;
}

.info-field label[b-mo2vqk54m2] {
    font-size: var(--font-size-xs);
    font-weight: 600;
    color: var(--color-neutral-600);
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

.req[b-mo2vqk54m2] {
    color: var(--color-error, #ef4444);
}

/* ── Question bank bar ──────────────────────────────────────────────────────── */
.bank-bar[b-mo2vqk54m2] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--spacing-3);
    padding: var(--spacing-3) var(--spacing-5);
    border-radius: var(--radius-md);
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    margin-bottom: var(--spacing-5);
    font-size: var(--font-size-sm);
}

.bank-bar.loading[b-mo2vqk54m2] { background: var(--color-neutral-50); border-color: var(--color-neutral-200); }

.bank-title[b-mo2vqk54m2] { font-weight: 600; color: #15803d; display: flex; align-items: center; gap: var(--spacing-2); }

.bank-total[b-mo2vqk54m2] {
    font-weight: 700;
    color: #15803d;
    background: #dcfce7;
    padding: 2px var(--spacing-3);
    border-radius: var(--radius-sm);
}

.bank-chip[b-mo2vqk54m2] {
    padding: 2px var(--spacing-3);
    border-radius: var(--radius-sm);
    background: white;
    border: 1px solid #bbf7d0;
    color: var(--color-neutral-700);
    font-size: var(--font-size-xs, 0.75rem);
}

.bank-chip strong[b-mo2vqk54m2] { color: #15803d; }

.bank-chip--active[b-mo2vqk54m2] {
    background: #dcfce7;
    border-color: #16a34a;
    color: #15803d;
    font-weight: 600;
    box-shadow: 0 0 0 2px #bbf7d0;
    position: relative;
}

.bank-chip--active strong[b-mo2vqk54m2] { color: #166534; }

.bank-chip--over[b-mo2vqk54m2] {
    background: #fef2f2;
    border-color: #ef4444;
    color: #b91c1c;
    font-weight: 600;
    box-shadow: 0 0 0 2px #fecaca;
}

.bank-chip--over strong[b-mo2vqk54m2] { color: #991b1b; }

.input-number--over[b-mo2vqk54m2] {
    border-color: #ef4444 !important;
    background: #fef2f2;
    color: #b91c1c;
    box-shadow: 0 0 0 2px #fecaca;
}

.bank-empty[b-mo2vqk54m2] { color: var(--color-warning, #d97706); font-style: italic; }
.bank-spinner[b-mo2vqk54m2] { color: var(--color-neutral-500); }

/* ── Marks bar ──────────────────────────────────────────────────────────────── */
.marks-bar[b-mo2vqk54m2] {
    display: flex;
    align-items: center;
    gap: var(--spacing-5);
    padding: var(--spacing-4) var(--spacing-6);
    border-radius: var(--radius-md);
    border: 1.5px solid var(--color-neutral-200);
    background: var(--color-neutral-50);
    margin-bottom: var(--spacing-6);
    font-family: var(--font-numeric-mono);
}

.marks-bar.done[b-mo2vqk54m2] {
    border-color: #16a34a;
    background: #f0fdf4;
}

.marks-bar.over[b-mo2vqk54m2] {
    border-color: #dc2626;
    background: #fef2f2;
}

.marks-num[b-mo2vqk54m2] {
    font-size: 28px;
    font-weight: 700;
    color: var(--color-neutral-900);
    line-height: 1;
}

.marks-bar.done .marks-num[b-mo2vqk54m2] { color: #16a34a; }
.marks-bar.over .marks-num[b-mo2vqk54m2] { color: #dc2626; }

.marks-label[b-mo2vqk54m2] {
    font-size: var(--font-size-xs);
    color: var(--color-neutral-500);
    font-family: var(--font-primary);
}

.marks-divider[b-mo2vqk54m2] {
    font-size: 24px;
    color: var(--color-neutral-300);
    margin: 0 var(--spacing-1);
}

.marks-total-wrap[b-mo2vqk54m2] {
    display: flex;
    align-items: baseline;
    gap: var(--spacing-2);
}

.marks-msg[b-mo2vqk54m2] {
    margin-left: auto;
    font-size: var(--font-size-sm);
    color: var(--color-neutral-500);
    font-family: var(--font-primary);
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
}

.marks-msg.done[b-mo2vqk54m2] {
    color: #16a34a;
    font-weight: 600;
}

.marks-bar.over .marks-msg[b-mo2vqk54m2] {
    color: #dc2626;
    font-weight: 600;
}

/* Pass mark inline in info bar */
.pass-field-wrap[b-mo2vqk54m2] {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
}

.pass-pct[b-mo2vqk54m2] {
    font-size: var(--font-size-xs);
    color: var(--color-neutral-400);
    font-family: var(--font-primary);
    white-space: nowrap;
}

.pass-warn[b-mo2vqk54m2] {
    font-size: var(--font-size-xs);
    color: #dc2626;
    font-family: var(--font-primary);
    display: flex;
    align-items: center;
    gap: 4px;
    font-weight: 600;
    white-space: nowrap;
}

/* ── Sections table ─────────────────────────────────────────────────────────── */
.sections-wrap[b-mo2vqk54m2] {
    background: white;
    border: 1px solid var(--color-neutral-200);
    border-radius: var(--radius-md);
    overflow: hidden;
    margin-bottom: var(--spacing-6);
}

.sections-table[b-mo2vqk54m2] {
    width: 100%;
    border-collapse: collapse;
}

.sections-table thead tr[b-mo2vqk54m2] {
    background: var(--color-neutral-50);
    border-bottom: 1px solid var(--color-neutral-200);
}

.sections-table thead th[b-mo2vqk54m2] {
    padding: var(--spacing-4) var(--spacing-5);
    font-size: var(--font-size-xs);
    font-weight: 600;
    color: var(--color-neutral-500);
    text-transform: uppercase;
    letter-spacing: 0.4px;
    text-align: left;
}

.sections-table .section-row td[b-mo2vqk54m2] {
    padding: var(--spacing-4) var(--spacing-5);
    border-bottom: 1px solid var(--color-neutral-100);
    vertical-align: middle;
}

.sections-table .advanced-row td[b-mo2vqk54m2] {
    padding: 0 var(--spacing-5);
    border-bottom: 1px solid var(--color-neutral-100);
}

.col-label[b-mo2vqk54m2]  { width: 64px; }
.col-type[b-mo2vqk54m2]   { min-width: 200px; }
.col-count[b-mo2vqk54m2]  { width: 110px; }
.col-marks[b-mo2vqk54m2]  { width: 110px; }
.col-total[b-mo2vqk54m2]  { width: 90px; }
.col-action[b-mo2vqk54m2] { width: 48px; text-align: center; }

/* ── Label badge ────────────────────────────────────────────────────────────── */
.label-badge[b-mo2vqk54m2] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: var(--radius-sm);
    background: var(--color-primary-light, var(--color-teal-100));
    color: var(--color-primary-dark);
    font-weight: 700;
    font-size: var(--font-size-sm);
}

/* ── Section total ──────────────────────────────────────────────────────────── */
.section-total[b-mo2vqk54m2] {
    font-family: var(--font-numeric-mono);
    font-size: 15px;
    font-weight: 600;
    color: var(--color-neutral-400);
}

.section-total.filled[b-mo2vqk54m2] {
    color: var(--color-neutral-800);
}

/* ── Remove button ──────────────────────────────────────────────────────────── */
.btn-remove[b-mo2vqk54m2] {
    background: none;
    border: none;
    color: var(--color-neutral-400);
    cursor: pointer;
    padding: var(--spacing-2);
    border-radius: var(--radius-xs);
    font-size: 13px;
    transition: color 0.15s, background 0.15s;
}

.btn-remove:hover:not(:disabled)[b-mo2vqk54m2] {
    color: #dc2626;
    background: #fef2f2;
}

.btn-remove:disabled[b-mo2vqk54m2] {
    opacity: 0.3;
    cursor: not-allowed;
}

/* ── Advanced toggle ────────────────────────────────────────────────────────── */
.btn-advanced[b-mo2vqk54m2] {
    background: none;
    border: none;
    color: var(--color-primary);
    font-size: var(--font-size-xs);
    cursor: pointer;
    padding: var(--spacing-2) 0;
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-2);
    font-weight: 500;
}

.btn-advanced:hover[b-mo2vqk54m2] {
    text-decoration: underline;
}

.advanced-panel[b-mo2vqk54m2] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-6);
    padding: var(--spacing-4) 0 var(--spacing-5) 0;
}

.adv-field[b-mo2vqk54m2] {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-2);
    flex: 1;
    min-width: 200px;
}

.adv-field label[b-mo2vqk54m2] {
    font-size: var(--font-size-xs);
    font-weight: 600;
    color: var(--color-neutral-500);
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

/* ── Difficulty row ─────────────────────────────────────────────────────────── */
.difficulty-row[b-mo2vqk54m2] {
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
    flex-wrap: wrap;
}

.diff-tag[b-mo2vqk54m2] {
    font-size: var(--font-size-xs);
    font-weight: 600;
    padding: 2px 8px;
    border-radius: var(--radius-full);
}

.diff-tag.easy[b-mo2vqk54m2]   { background: #dcfce7; color: #15803d; }
.diff-tag.medium[b-mo2vqk54m2] { background: #fef9c3; color: #92400e; }
.diff-tag.hard[b-mo2vqk54m2]   { background: #fee2e2; color: #991b1b; }

.diff-total[b-mo2vqk54m2] {
    font-family: var(--font-numeric-mono);
    font-size: var(--font-size-sm);
    font-weight: 600;
    margin-left: var(--spacing-2);
}

.diff-total.ok[b-mo2vqk54m2]   { color: #16a34a; }
.diff-total.warn[b-mo2vqk54m2] { color: var(--color-neutral-500); }

/* ── Add section ────────────────────────────────────────────────────────────── */
.sections-table tfoot td[b-mo2vqk54m2] {
    padding: var(--spacing-4) var(--spacing-5);
}

.btn-add-section[b-mo2vqk54m2] {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-2);
    padding: var(--spacing-3) var(--spacing-5);
    border: 1.5px dashed var(--color-primary);
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--color-primary);
    font-size: var(--font-size-sm);
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s;
}

.btn-add-section:hover[b-mo2vqk54m2] {
    background: var(--color-primary-light);
}

/* ── Shared inputs ──────────────────────────────────────────────────────────── */
.input-text[b-mo2vqk54m2],
.input-select[b-mo2vqk54m2] {
    width: 100%;
    padding: var(--spacing-3) var(--spacing-4);
    border: 1px solid var(--color-neutral-200);
    border-radius: var(--radius-xs);
    font-size: var(--font-size-sm);
    color: var(--color-neutral-900);
    background: white;
    outline: none;
    transition: border-color 0.15s, box-shadow 0.15s;
    font-family: var(--font-primary);
    box-sizing: border-box;
}

.input-text:focus[b-mo2vqk54m2],
.input-select:focus[b-mo2vqk54m2] {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px var(--color-primary-50);
}

.input-number[b-mo2vqk54m2] {
    width: 80px;
    padding: var(--spacing-3) var(--spacing-3);
    border: 1px solid var(--color-neutral-200);
    border-radius: var(--radius-xs);
    font-size: var(--font-size-sm);
    color: var(--color-neutral-900);
    background: white;
    outline: none;
    text-align: center;
    font-family: var(--font-numeric-mono);
    transition: border-color 0.15s, box-shadow 0.15s;
}

.input-number.small[b-mo2vqk54m2] {
    width: 58px;
}

.input-number:focus[b-mo2vqk54m2] {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px var(--color-primary-50);
}

/* ── Error ──────────────────────────────────────────────────────────────────── */
.error-msg[b-mo2vqk54m2] {
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
    padding: var(--spacing-4) var(--spacing-5);
    border-radius: var(--radius-sm);
    background: #fef2f2;
    border: 1px solid #fca5a5;
    color: #dc2626;
    font-size: var(--font-size-sm);
    margin-bottom: var(--spacing-5);
}

/* ── Form actions ───────────────────────────────────────────────────────────── */
.form-actions[b-mo2vqk54m2] {
    display: flex;
    justify-content: flex-end;
    gap: var(--spacing-4);
}

.btn-cancel[b-mo2vqk54m2] {
    padding: var(--spacing-4) var(--spacing-7);
    border: 1px solid var(--color-neutral-200);
    border-radius: var(--radius-sm);
    background: white;
    color: var(--color-neutral-600);
    font-size: var(--font-size-sm);
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s;
}

.btn-cancel:hover[b-mo2vqk54m2] {
    background: var(--color-neutral-50);
}

.btn-save[b-mo2vqk54m2] {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-2);
    padding: var(--spacing-4) var(--spacing-8);
    background: var(--color-primary);
    border: none;
    border-radius: var(--radius-sm);
    color: white;
    font-size: var(--font-size-sm);
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s;
}

.btn-save:hover:not(:disabled)[b-mo2vqk54m2] {
    background: var(--color-primary-dark);
}

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

/* ── Responsive ─────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
    .simple-create-page[b-mo2vqk54m2] {
        padding: var(--spacing-5) var(--spacing-4);
    }

    .info-bar[b-mo2vqk54m2] {
        flex-direction: column;
    }

    .info-field[b-mo2vqk54m2],
    .info-field.narrow[b-mo2vqk54m2] {
        min-width: 0;
        flex: 1 1 100%;
    }

    .marks-bar[b-mo2vqk54m2] {
        flex-wrap: wrap;
        gap: var(--spacing-3);
    }

    .sections-table[b-mo2vqk54m2] {
        font-size: 13px;
    }

    .col-type[b-mo2vqk54m2] { min-width: 140px; }
    .col-count[b-mo2vqk54m2],
    .col-marks[b-mo2vqk54m2] { width: 80px; }

    .input-number[b-mo2vqk54m2] {
        width: 64px;
    }
}

@media (max-width: 480px) {
    .form-actions[b-mo2vqk54m2] {
        flex-direction: column-reverse;
    }

    .btn-cancel[b-mo2vqk54m2],
    .btn-save[b-mo2vqk54m2] {
        width: 100%;
        justify-content: center;
    }
}
/* /Pages/Teacher/Help.razor.rz.scp.css */
.help-page[b-72en8hv07a] {
    width: min(100% - (2 * var(--spacing-md)), 48rem);
    margin: 0 auto;
    padding: var(--spacing-xl) 0;
}

.help-header[b-72en8hv07a] {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-xl);
}

.help-header h1[b-72en8hv07a] {
    margin: 0;
    color: var(--color-neutral-900);
    font-size: 1.75rem;
    font-weight: 700;
}

.help-header p[b-72en8hv07a] {
    margin: var(--spacing-xs) 0 0;
    color: var(--color-neutral-600);
}

.help-icon[b-72en8hv07a] {
    display: grid;
    place-items: center;
    width: 3rem;
    height: 3rem;
    flex: 0 0 3rem;
    border-radius: var(--radius-lg);
    background: var(--color-primary-100);
    color: var(--color-primary-700);
    font-size: 1.25rem;
}

.support-options[b-72en8hv07a] {
    overflow: hidden;
    border: 1px solid var(--color-neutral-200);
    border-radius: var(--radius-lg);
    background: var(--color-white);
}

.support-option[b-72en8hv07a] {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    width: 100%;
    min-height: 4.5rem;
    padding: var(--spacing-md);
    border: 0;
    background: transparent;
    color: var(--color-neutral-800);
    text-align: left;
    text-decoration: none;
    cursor: pointer;
}

.support-option + .support-option[b-72en8hv07a] {
    border-top: 1px solid var(--color-neutral-200);
}

.support-option:hover[b-72en8hv07a],
.support-option:focus-visible[b-72en8hv07a] {
    background: var(--color-neutral-50);
}

.support-option > i:first-child[b-72en8hv07a] {
    width: 1.5rem;
    color: var(--color-primary-600);
    text-align: center;
}

.support-option span[b-72en8hv07a] {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: var(--spacing-xs);
    min-width: 0;
}

.support-option strong[b-72en8hv07a],
.support-option small[b-72en8hv07a] {
    overflow-wrap: anywhere;
}

.support-option small[b-72en8hv07a] {
    color: var(--color-neutral-500);
}

.option-arrow[b-72en8hv07a] {
    color: var(--color-neutral-400);
}

@media (min-width: 768px) {
    .help-page[b-72en8hv07a] {
        padding-top: var(--spacing-2xl);
    }
}
/* /Pages/Teacher/Inbox/Index.razor.rz.scp.css */
/* Styles handled via Tailwind utility classes in markup */
/* /Pages/Teacher/Leaves/Index.razor.rz.scp.css */
/* Teacher self-leave page */

.leaves-container[b-b803ur7rjt] {
    padding: 1.5rem;
    max-width: 1280px;
    margin: 0 auto;
}

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

.page-title[b-b803ur7rjt] {
    font-size: var(--font-size-2xl);
    font-weight: 700;
    color: var(--color-neutral-900);
    margin: 0 0 0.25rem 0;
}

.page-subtitle[b-b803ur7rjt] {
    color: var(--color-neutral-500);
    font-size: var(--font-size-sm);
    margin: 0;
}

.btn-refresh[b-b803ur7rjt] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: var(--color-primary-500);
    color: #fff;
    border: none;
    border-radius: var(--radius-md);
    cursor: pointer;
    font-size: var(--font-size-sm);
}

.btn-refresh:hover[b-b803ur7rjt] { background: var(--color-primary-600); }

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

.stat-card[b-b803ur7rjt] {
    background: #fff;
    border-radius: var(--radius-lg);
    padding: 1.25rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    box-shadow: var(--shadow-sm);
}

.stat-icon[b-b803ur7rjt] {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: #fff;
}

.stat-pending  .stat-icon[b-b803ur7rjt] { background: var(--color-warning-500, #f59e0b); }
.stat-approved .stat-icon[b-b803ur7rjt] { background: var(--color-success-500, #10b981); }
.stat-rejected .stat-icon[b-b803ur7rjt] { background: var(--color-danger-500,  #ef4444); }
.stat-total    .stat-icon[b-b803ur7rjt] { background: var(--color-primary-500); }

.stat-label[b-b803ur7rjt] {
    font-size: 0.75rem;
    color: var(--color-neutral-500);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 600;
    margin: 0;
}

.stat-value[b-b803ur7rjt] {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--color-neutral-900);
    margin: 0;
}

/* Apply card */
.apply-card[b-b803ur7rjt] {
    background: #fff;
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    box-shadow: var(--shadow-sm);
    margin-bottom: 1.5rem;
}

.card-header[b-b803ur7rjt] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1rem;
    color: var(--color-primary-700);
}

.card-header h2[b-b803ur7rjt] {
    font-size: var(--font-size-lg);
    margin: 0;
}

.form-grid[b-b803ur7rjt] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
}

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

.form-group.full-width[b-b803ur7rjt] {
    grid-column: 1 / -1;
}

.form-group label[b-b803ur7rjt] {
    font-size: var(--font-size-sm);
    color: var(--color-neutral-700);
    font-weight: 500;
}

.required[b-b803ur7rjt] { color: var(--color-danger-500); }

.form-input[b-b803ur7rjt] {
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--color-neutral-300);
    border-radius: var(--radius-md);
    font-size: var(--font-size-sm);
    font-family: inherit;
}

.form-input:focus[b-b803ur7rjt] {
    outline: none;
    border-color: var(--color-primary-500);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.checkbox-label[b-b803ur7rjt] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    margin-top: 1.5rem;
    font-size: var(--font-size-sm);
    color: var(--color-neutral-600);
}

.card-actions[b-b803ur7rjt] {
    margin-top: 1rem;
    display: flex;
    justify-content: flex-end;
}

.btn-primary[b-b803ur7rjt] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1.25rem;
    background: var(--color-primary-500);
    color: #fff;
    border: none;
    border-radius: var(--radius-md);
    font-size: var(--font-size-sm);
    font-weight: 500;
    cursor: pointer;
}

.btn-primary:hover[b-b803ur7rjt] { background: var(--color-primary-600); }
.btn-primary:disabled[b-b803ur7rjt] { opacity: 0.6; cursor: not-allowed; }

/* History */
.history-section h2[b-b803ur7rjt] {
    font-size: var(--font-size-lg);
    color: var(--color-neutral-800);
    margin-bottom: 1rem;
}

.loading-state[b-b803ur7rjt], .empty-state[b-b803ur7rjt] {
    background: #fff;
    border-radius: var(--radius-lg);
    padding: 2rem;
    text-align: center;
    color: var(--color-neutral-500);
    box-shadow: var(--shadow-sm);
}

.empty-state i[b-b803ur7rjt] {
    font-size: 3rem;
    color: var(--color-neutral-300);
    margin-bottom: 0.5rem;
    display: block;
}

.spinner[b-b803ur7rjt] {
    width: 32px;
    height: 32px;
    border: 3px solid var(--color-neutral-200);
    border-top-color: var(--color-primary-500);
    border-radius: 50%;
    animation: spin-b-b803ur7rjt 1s linear infinite;
    margin: 0 auto 0.5rem;
}

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

/* Table */
.leaves-table-wrapper[b-b803ur7rjt] {
    background: #fff;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    overflow-x: auto;
    display: none;
}

@media (min-width: 768px) {
    .leaves-table-wrapper[b-b803ur7rjt] { display: block; }
}

.leaves-table[b-b803ur7rjt] {
    width: 100%;
    border-collapse: collapse;
}

.leaves-table th[b-b803ur7rjt], .leaves-table td[b-b803ur7rjt] {
    padding: 0.75rem 1rem;
    text-align: left;
    border-bottom: 1px solid var(--color-neutral-100);
    font-size: var(--font-size-sm);
}

.leaves-table th[b-b803ur7rjt] {
    background: var(--color-neutral-50);
    color: var(--color-neutral-600);
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.7rem;
    letter-spacing: 0.05em;
}

.leaves-table tr:hover[b-b803ur7rjt] { background: var(--color-neutral-50); }

.reason-cell[b-b803ur7rjt] {
    max-width: 220px;
    display: inline-block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: middle;
}

.type-pill[b-b803ur7rjt] {
    display: inline-block;
    padding: 0.15rem 0.5rem;
    border-radius: var(--radius-sm);
    font-size: 0.7rem;
    font-weight: 600;
    background: var(--color-neutral-100);
    color: var(--color-neutral-700);
}

.type-lwp[b-b803ur7rjt], .type-unpaid[b-b803ur7rjt] {
    background: #fef3c7;
    color: #92400e;
}

.status-badge[b-b803ur7rjt] {
    display: inline-block;
    padding: 0.2rem 0.6rem;
    border-radius: var(--radius-full, 9999px);
    font-size: 0.7rem;
    font-weight: 600;
    background: var(--color-neutral-100);
    color: var(--color-neutral-700);
}

.status-submitted[b-b803ur7rjt] { background: #fff7ed; color: #c2410c; }
.status-approved[b-b803ur7rjt]  { background: #dcfce7; color: #166534; }
.status-rejected[b-b803ur7rjt]  { background: #fee2e2; color: #991b1b; }
.status-cancelled[b-b803ur7rjt] { background: var(--color-neutral-100); color: var(--color-neutral-500); }

.lwp-tag[b-b803ur7rjt] {
    display: inline-block;
    margin-top: 0.25rem;
    padding: 0.1rem 0.4rem;
    background: #fef3c7;
    color: #92400e;
    border: 1px solid #fde68a;
    border-radius: var(--radius-sm);
    font-size: 0.65rem;
    font-weight: 600;
}

.text-muted[b-b803ur7rjt] { color: var(--color-neutral-500); font-size: 0.75rem; }

.btn-cancel[b-b803ur7rjt] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.3rem 0.6rem;
    background: transparent;
    color: var(--color-danger-500, #ef4444);
    border: 1px solid currentColor;
    border-radius: var(--radius-md);
    font-size: 0.75rem;
    cursor: pointer;
}

.btn-cancel:hover[b-b803ur7rjt] { background: var(--color-danger-500, #ef4444); color: #fff; }

/* Mobile cards */
.leaves-cards[b-b803ur7rjt] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}

@media (min-width: 768px) {
    .leaves-cards[b-b803ur7rjt] { display: none; }
}

.leave-card[b-b803ur7rjt] {
    background: #fff;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}

.leave-card .card-top[b-b803ur7rjt] {
    padding: 0.75rem 1rem;
    background: var(--color-neutral-50);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.leave-card .card-body[b-b803ur7rjt] { padding: 0.75rem 1rem; }

.leave-card .info-row[b-b803ur7rjt] {
    display: flex;
    padding: 0.25rem 0;
    font-size: var(--font-size-sm);
}

.leave-card .info-label[b-b803ur7rjt] {
    width: 80px;
    flex-shrink: 0;
    color: var(--color-neutral-500);
    font-weight: 500;
}

.leave-card .card-actions[b-b803ur7rjt] {
    padding: 0.5rem 1rem;
    border-top: 1px solid var(--color-neutral-100);
    display: flex;
    justify-content: flex-end;
}

/* Pass C: per-leave-type balance bars (CL/SL/EL/ML/CompOff) */
.balance-card[b-b803ur7rjt] { background:#fff; border:1px solid #e5e7eb; border-radius:0.75rem; padding:1rem 1.25rem; margin-bottom:1.25rem; box-shadow:0 1px 2px rgba(0,0,0,0.04);}
.balance-card-head[b-b803ur7rjt] { display:flex; align-items:center; gap:0.5rem; margin-bottom:0.75rem; color:var(--color-teal-600); font-size:0.875rem; font-weight:600; }
.balance-card-head h2[b-b803ur7rjt] { margin:0; font-size:0.95rem; color:#1f2937; }
.balance-grid[b-b803ur7rjt] { display:grid; gap:0.75rem; grid-template-columns:repeat(1, minmax(0, 1fr)); }
@media (min-width:640px) { .balance-grid[b-b803ur7rjt] { grid-template-columns:repeat(2, minmax(0, 1fr)); } }
@media (min-width:1024px) { .balance-grid[b-b803ur7rjt] { grid-template-columns:repeat(5, minmax(0, 1fr)); } }
.balance-cell[b-b803ur7rjt] { background:#f9fafb; border-radius:0.5rem; padding:0.5rem 0.75rem; }
.balance-cell-head[b-b803ur7rjt] { display:flex; justify-content:space-between; align-items:baseline; }
.balance-type[b-b803ur7rjt] { font-size:0.75rem; font-weight:600; color:#374151; }
.balance-numbers[b-b803ur7rjt] { font-size:0.875rem; color:#1f2937; }
.balance-bar-track[b-b803ur7rjt] { background:#e5e7eb; height:6px; border-radius:9999px; margin:0.4rem 0; overflow:hidden; }
.balance-bar-fill[b-b803ur7rjt] { height:100%; border-radius:9999px; transition:width 200ms ease; }
.balance-bar-fill.bar-ok[b-b803ur7rjt] { background:#10b981; }
.balance-bar-fill.bar-warn[b-b803ur7rjt] { background:#f59e0b; }
.balance-bar-fill.bar-over[b-b803ur7rjt] { background:#ef4444; }
.balance-cell-foot[b-b803ur7rjt] { display:flex; justify-content:space-between; gap:0.25rem; font-size:0.7rem; color:#6b7280; }
.balance-cell-foot .balance-zero[b-b803ur7rjt] { color:#dc2626; font-weight:600; }
/* /Pages/Teacher/Library/Index.razor.rz.scp.css */
.coming-soon-container[b-t7m8tketv7] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: calc(100vh - var(--total-header-height));
    padding: 2rem;
}

.coming-soon-card[b-t7m8tketv7] {
    background: white;
    border-radius: var(--radius-2xl);
    box-shadow: var(--shadow-lg);
    max-width: 600px;
    width: 100%;
    padding: 3rem 2.5rem;
    text-align: center;
}

.icon-container[b-t7m8tketv7] {
    color: var(--color-primary-500);
    margin-bottom: 1.5rem;
}

.coming-soon-card h1[b-t7m8tketv7] {
    font-size: 2rem;
    font-weight: 700;
    color: var(--color-neutral-900);
    margin-bottom: 0.5rem;
}

.subtitle[b-t7m8tketv7] {
    font-size: 1.25rem;
    color: var(--color-primary-600);
    font-weight: 600;
    margin-bottom: 1rem;
}

.description[b-t7m8tketv7] {
    font-size: 1rem;
    color: var(--color-neutral-500);
    line-height: 1.6;
    margin-bottom: 2rem;
}

.features[b-t7m8tketv7] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
    text-align: left;
}

.feature-item[b-t7m8tketv7] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    background: var(--color-neutral-50);
    border-radius: var(--radius-lg);
}

.feature-item i[b-t7m8tketv7] {
    color: var(--color-primary-500);
    font-size: 1.25rem;
}

.feature-item span[b-t7m8tketv7] {
    font-size: 0.875rem;
    color: var(--color-neutral-700);
    font-weight: 500;
}
/* /Pages/Teacher/Materials/Index.razor.rz.scp.css */
.coming-soon-container[b-cl293jip4o] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: calc(100vh - var(--total-header-height));
    padding: 2rem;
}

.coming-soon-card[b-cl293jip4o] {
    background: white;
    border-radius: var(--radius-2xl);
    box-shadow: var(--shadow-lg);
    max-width: 600px;
    width: 100%;
    padding: 3rem 2.5rem;
    text-align: center;
}

.icon-container[b-cl293jip4o] {
    color: var(--color-primary-500);
    margin-bottom: 1.5rem;
}

.coming-soon-card h1[b-cl293jip4o] {
    font-size: 2rem;
    font-weight: 700;
    color: var(--color-neutral-900);
    margin-bottom: 0.5rem;
}

.subtitle[b-cl293jip4o] {
    font-size: 1.25rem;
    color: var(--color-primary-600);
    font-weight: 600;
    margin-bottom: 1rem;
}

.description[b-cl293jip4o] {
    font-size: 1rem;
    color: var(--color-neutral-500);
    line-height: 1.6;
    margin-bottom: 2rem;
}

.features[b-cl293jip4o] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
    text-align: left;
}

.feature-item[b-cl293jip4o] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    background: var(--color-neutral-50);
    border-radius: var(--radius-lg);
}

.feature-item i[b-cl293jip4o] {
    color: var(--color-primary-500);
    font-size: 1.25rem;
}

.feature-item span[b-cl293jip4o] {
    font-size: 0.875rem;
    color: var(--color-neutral-700);
    font-weight: 500;
}
/* /Pages/Teacher/MicroChapterSchedule/Index.razor.rz.scp.css */
/* ============================================================
   Teacher Micro Chapter Schedule — Index.razor.css
   ============================================================ */

.mc-schedule-page[b-01w92x9mcj] {
    padding: 1.5rem;
    max-width: 1100px;
    margin: 0 auto;
}

/* ── Header ─────────────────────────────────────────── */
.page-header[b-01w92x9mcj] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.25rem;
}
.page-header-left h1[b-01w92x9mcj] {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--color-neutral-900);
    margin-bottom: 0.25rem;
}
.page-header-left p[b-01w92x9mcj] {
    font-size: 0.875rem;
    color: var(--color-neutral-500);
    margin: 0;
}

/* ── Cards / loading ────────────────────────────────── */
.card[b-01w92x9mcj] {
    background: #fff;
    border: 1px solid var(--color-neutral-200);
    border-radius: 12px;
    padding: 1.25rem;
    margin-bottom: 1rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}
.card-title[b-01w92x9mcj] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1rem;
    font-weight: 700;
    color: var(--color-neutral-900);
    margin-bottom: 1rem;
}
.card-title i[b-01w92x9mcj] { color: var(--color-primary-600); }
.loading-block[b-01w92x9mcj] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--color-neutral-500);
    padding: 1rem 0;
    font-size: 0.9rem;
}

/* ── Toolbar ────────────────────────────────────────── */
.toolbar-row[b-01w92x9mcj] {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 0.75rem;
}
.btn-primary[b-01w92x9mcj] {
    padding: 0.55rem 1rem;
    border-radius: 8px;
    font-size: 0.88rem;
    font-weight: 600;
    cursor: pointer;
    border: none;
    background: var(--color-primary-600);
    color: #fff;
}
.btn-primary:hover:not(:disabled)[b-01w92x9mcj] { background: var(--color-primary-700, #0f766e); }
.btn-primary:disabled[b-01w92x9mcj] { opacity: 0.5; cursor: not-allowed; }

/* ── Empty state ────────────────────────────────────── */
.empty-state[b-01w92x9mcj] {
    text-align: center;
    padding: 2.5rem 1rem;
    color: var(--color-neutral-500);
}
.empty-hint[b-01w92x9mcj] { font-size: 0.82rem; margin-top: 0.35rem; }

/* ── Section picker ─────────────────────────────────── */
.section-row[b-01w92x9mcj] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin-top: 0.75rem;
}
.section-label[b-01w92x9mcj] {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--color-neutral-700, #374151);
}
.section-select[b-01w92x9mcj] {
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--color-neutral-300, #d1d5db);
    border-radius: 8px;
    font-size: 0.88rem;
    background: #fff;
    color: var(--color-neutral-900);
    min-width: 140px;
}
.section-select:focus[b-01w92x9mcj] {
    outline: 2px solid var(--color-primary-600);
    outline-offset: 1px;
}
.section-hint[b-01w92x9mcj] {
    font-size: 0.75rem;
    color: var(--color-neutral-400);
}

/* ── Chapter tabs ───────────────────────────────────── */
.chapter-tabs[b-01w92x9mcj] {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}
.chapter-tab[b-01w92x9mcj] {
    padding: 0.5rem 0.9rem;
    border-radius: 999px;
    border: 1px solid var(--color-neutral-300, #d1d5db);
    background: #fff;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--color-neutral-700, #374151);
    cursor: pointer;
    transition: all 0.15s;
}
.chapter-tab:hover[b-01w92x9mcj] { border-color: var(--color-primary-600); }
.chapter-tab-active[b-01w92x9mcj] {
    background: var(--color-primary-600);
    border-color: var(--color-primary-600);
    color: #fff;
}

/* ── Progress card ──────────────────────────────────── */
.progress-card[b-01w92x9mcj] {
    background: #fff;
    border: 1px solid var(--color-neutral-200);
    border-radius: 12px;
    padding: 1.25rem;
    margin-bottom: 1rem;
}
.progress-stats[b-01w92x9mcj] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-bottom: 1rem;
}
.pstat[b-01w92x9mcj] {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0.6rem 1rem;
    border-radius: 10px;
    background: var(--color-neutral-50, #f9fafb);
    border: 1px solid var(--color-neutral-200);
    min-width: 84px;
}
.pstat-num[b-01w92x9mcj] { font-size: 1.3rem; font-weight: 700; color: var(--color-neutral-900); }
.pstat-label[b-01w92x9mcj] { font-size: 0.7rem; color: var(--color-neutral-500); margin-top: 0.1rem; }
.pstat-done .pstat-num[b-01w92x9mcj] { color: var(--color-success-600, #16a34a); }
.pstat-overdue .pstat-num[b-01w92x9mcj] { color: var(--color-danger-600, #dc2626); }
.pstat-scheduled .pstat-num[b-01w92x9mcj] { color: var(--color-primary-600); }
.pstat-notstarted .pstat-num[b-01w92x9mcj] { color: var(--color-neutral-500); }
.progress-bar-track[b-01w92x9mcj] {
    height: 10px;
    background: var(--color-neutral-200);
    border-radius: 999px;
    overflow: hidden;
}
.progress-bar-fill[b-01w92x9mcj] {
    height: 100%;
    background: linear-gradient(90deg, var(--color-primary-600), var(--color-success-600, #16a34a));
    border-radius: 999px;
    transition: width 0.4s ease;
}
.progress-caption[b-01w92x9mcj] {
    font-size: 0.78rem;
    color: var(--color-neutral-500);
    margin-top: 0.4rem;
    text-align: right;
}

/* ── Dirty banner ───────────────────────────────────── */
.dirty-banner[b-01w92x9mcj] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: rgba(245, 158, 11, 0.1);
    color: #92400e;
    border: 1px solid rgba(245, 158, 11, 0.3);
    border-radius: 10px;
    padding: 0.6rem 1rem;
    font-size: 0.85rem;
    margin-bottom: 0.75rem;
}

/* ── Schedule table ─────────────────────────────────── */
.table-scroll[b-01w92x9mcj] {
    overflow-x: auto;
    border-radius: 12px;
    border: 1px solid var(--color-neutral-200);
    margin-bottom: 1rem;
}
.schedule-table[b-01w92x9mcj] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
}
.schedule-table th[b-01w92x9mcj], .schedule-table td[b-01w92x9mcj] {
    padding: 0.7rem 0.85rem;
    text-align: left;
    border-bottom: 1px solid var(--color-neutral-200);
    vertical-align: middle;
}
.schedule-table th[b-01w92x9mcj] {
    background: var(--color-neutral-50, #f9fafb);
    font-weight: 700;
    color: var(--color-neutral-700, #374151);
    white-space: nowrap;
}
.schedule-table tr:last-child td[b-01w92x9mcj] { border-bottom: none; }
.row-dirty[b-01w92x9mcj] { background: rgba(245, 158, 11, 0.08); }
.topic-cell[b-01w92x9mcj] { display: flex; flex-direction: column; }
.topic-name[b-01w92x9mcj] { font-weight: 600; color: var(--color-neutral-900); }
.topic-slug[b-01w92x9mcj] {
    font-family: 'SFMono-Regular', Consolas, monospace;
    font-size: 0.72rem;
    color: var(--color-neutral-400);
}
.date-input[b-01w92x9mcj] {
    padding: 0.4rem 0.5rem;
    border: 1px solid var(--color-neutral-300, #d1d5db);
    border-radius: 8px;
    font-size: 0.85rem;
    background: #fff;
    color: var(--color-neutral-900);
    min-width: 140px;
}

/* ── Status pills ───────────────────────────────────── */
.status-pill[b-01w92x9mcj] {
    display: inline-block;
    padding: 0.15rem 0.6rem;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 700;
    white-space: nowrap;
}
.status-completed[b-01w92x9mcj] { background: rgba(22, 163, 74, 0.12); color: #166534; }
.status-overdue[b-01w92x9mcj] { background: rgba(220, 38, 38, 0.12); color: #991b1b; }
.status-scheduled[b-01w92x9mcj] { background: rgba(20, 184, 166, 0.12); color: #0f766e; }
.status-notstarted[b-01w92x9mcj] { background: var(--color-neutral-100, #f3f4f6); color: var(--color-neutral-500); }

/* ── Actions / save ─────────────────────────────────── */
.step-actions[b-01w92x9mcj] {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    margin-top: 0.5rem;
}
.btn-save[b-01w92x9mcj] {
    padding: 0.6rem 1.2rem;
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    border: none;
    background: var(--color-success-600, #16a34a);
    color: #fff;
}
.btn-save:hover:not(:disabled)[b-01w92x9mcj] { background: #15803d; }
.btn-save:disabled[b-01w92x9mcj] { opacity: 0.5; cursor: not-allowed; }
.spinner-btn[b-01w92x9mcj] {
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 2px solid rgba(255, 255, 255, 0.4);
    border-top-color: #fff;
    border-radius: 50%;
    animation: mcs-spin-b-01w92x9mcj 0.7s linear infinite;
    vertical-align: middle;
    margin-right: 0.4rem;
}
@keyframes mcs-spin-b-01w92x9mcj { to { transform: rotate(360deg); } }

/* ── Responsive: collapse table to cards on mobile ──── */
@media (max-width: 640px) {
    .mc-schedule-page[b-01w92x9mcj] { padding: 1rem; }
    .schedule-table[b-01w92x9mcj], .schedule-table tbody[b-01w92x9mcj], .schedule-table tr[b-01w92x9mcj], .schedule-table td[b-01w92x9mcj] {
        display: block;
        width: 100%;
    }
    .schedule-table thead[b-01w92x9mcj] { display: none; }
    .schedule-table tr[b-01w92x9mcj] {
        border: 1px solid var(--color-neutral-200);
        border-radius: 10px;
        margin-bottom: 0.75rem;
        padding: 0.5rem;
    }
    .schedule-table td[b-01w92x9mcj] {
        border: none;
        padding: 0.35rem 0.5rem;
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 0.5rem;
    }
    .schedule-table td[b-01w92x9mcj]::before {
        content: attr(data-label);
        font-weight: 700;
        font-size: 0.75rem;
        color: var(--color-neutral-500);
    }
    .topic-cell[b-01w92x9mcj] { flex-direction: row; justify-content: space-between; }
    .date-input[b-01w92x9mcj] { width: auto; flex: 1; min-width: 0; }
}
/* /Pages/Teacher/Onboarding.razor.rz.scp.css */
/* ── Shell ───────────────────────────────────────────────────── */
.setup-loading[b-had8xnz5kf] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 60vh;
}

.onboarding-shell[b-had8xnz5kf] {
    min-height: 100vh;
    background: var(--color-neutral-50, #f8fafc);
}

/* ── Header ──────────────────────────────────────────────────── */
.onboarding-header[b-had8xnz5kf] {
    background: #fff;
    border-bottom: 1px solid var(--color-neutral-200, #e2e8f0);
    padding: 1rem 1.5rem;
    position: sticky;
    top: 0;
    z-index: 10;
}

.header-inner[b-had8xnz5kf] {
    max-width: 720px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.header-title[b-had8xnz5kf] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.header-icon[b-had8xnz5kf] {
    font-size: 1.5rem;
    color: var(--color-primary-600, #2563eb);
}

.header-title h1[b-had8xnz5kf] {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--color-neutral-900, #0f172a);
    margin: 0;
}

.header-title p[b-had8xnz5kf] {
    font-size: 0.8rem;
    color: var(--color-neutral-500, #64748b);
    margin: 0;
}

/* ── Step Pills ──────────────────────────────────────────────── */
.step-pills[b-had8xnz5kf] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.step-pill[b-had8xnz5kf] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.78rem;
    font-weight: 500;
    color: var(--color-neutral-400, #94a3b8);
    padding: 0.3rem 0.6rem;
    border-radius: 999px;
    border: 1.5px solid var(--color-neutral-200, #e2e8f0);
    background: #fff;
    transition: all 0.2s;
}

.step-pill.active[b-had8xnz5kf] {
    color: var(--color-primary-700, #1d4ed8);
    border-color: var(--color-primary-400, #60a5fa);
    background: var(--color-primary-50, #eff6ff);
}

.step-pill.done[b-had8xnz5kf] {
    color: var(--color-success-700, #15803d);
    border-color: var(--color-success-300, #86efac);
    background: var(--color-success-50, #f0fdf4);
}

.pill-label[b-had8xnz5kf] {
    display: none;
}

.step-connector[b-had8xnz5kf] {
    width: 1.5rem;
    height: 2px;
    background: var(--color-neutral-200, #e2e8f0);
    border-radius: 1px;
    transition: background 0.2s;
}

.step-connector.done[b-had8xnz5kf] {
    background: var(--color-success-300, #86efac);
}

@media (min-width: 640px) {
    .pill-label[b-had8xnz5kf] { display: inline; }
}

/* ── Content ─────────────────────────────────────────────────── */
.onboarding-content[b-had8xnz5kf] {
    max-width: 720px;
    margin: 2rem auto;
    padding: 0 1rem;
}

/* ── Step Card ───────────────────────────────────────────────── */
.step-card[b-had8xnz5kf] {
    background: #fff;
    border-radius: 0.75rem;
    border: 1px solid var(--color-neutral-200, #e2e8f0);
    padding: 1.75rem;
    box-shadow: 0 1px 3px rgba(0,0,0,.06);
}

.step-card-header[b-had8xnz5kf] {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    margin-bottom: 1.75rem;
    padding-bottom: 1.25rem;
    border-bottom: 1px solid var(--color-neutral-100, #f1f5f9);
}

.step-card-icon[b-had8xnz5kf] {
    font-size: 1.5rem;
    color: var(--color-primary-600, #2563eb);
    margin-top: 0.1rem;
    flex-shrink: 0;
}

.step-card-header h2[b-had8xnz5kf] {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--color-neutral-900, #0f172a);
    margin: 0 0 0.2rem;
}

.step-card-header p[b-had8xnz5kf] {
    font-size: 0.875rem;
    color: var(--color-neutral-500, #64748b);
    margin: 0;
}

/* ── Profile Grid ────────────────────────────────────────────── */
.profile-grid[b-had8xnz5kf] {
    display: flex;
    gap: 1.5rem;
    align-items: flex-start;
    margin-bottom: 1.5rem;
}

.profile-avatar-col[b-had8xnz5kf] {
    flex-shrink: 0;
}

.avatar-circle[b-had8xnz5kf] {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: var(--color-primary-100, #dbeafe);
    color: var(--color-primary-700, #1d4ed8);
    font-size: 1.5rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}

.profile-fields-col[b-had8xnz5kf] {
    flex: 1;
}

/* Compact key-value rows (per copilot-instructions) */
.prop-section[b-had8xnz5kf] { margin-bottom: 1.25rem; }
.prop-section-title[b-had8xnz5kf] {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-neutral-400, #94a3b8);
    padding-bottom: 0.4rem;
    border-bottom: 1px solid var(--color-neutral-100, #f1f5f9);
    margin-bottom: 0.25rem;
}
.prop-row[b-had8xnz5kf] {
    display: flex;
    align-items: baseline;
    padding: 0.35rem 0;
    border-bottom: 1px solid var(--color-neutral-50, #f8fafc);
}
.prop-label[b-had8xnz5kf] {
    width: 120px;
    flex-shrink: 0;
    font-size: 0.78rem;
    color: var(--color-neutral-500, #64748b);
    font-weight: 500;
}
.prop-value[b-had8xnz5kf] {
    font-size: 0.875rem;
    color: var(--color-neutral-900, #0f172a);
    font-weight: 500;
}

.profile-note[b-had8xnz5kf] {
    font-size: 0.8rem;
    color: var(--color-neutral-500, #64748b);
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-top: 0.5rem;
}

.profile-note a[b-had8xnz5kf] {
    color: var(--color-primary-600, #2563eb);
    text-decoration: underline;
}

/* ── Setup Warning ───────────────────────────────────────────── */
.setup-warning[b-had8xnz5kf] {
    display: flex;
    gap: 0.75rem;
    background: var(--color-warning-50, #fffbeb);
    border: 1px solid var(--color-warning-300, #fcd34d);
    border-radius: 0.5rem;
    padding: 1rem;
    margin-bottom: 1.5rem;
    font-size: 0.875rem;
    color: var(--color-warning-800, #92400e);
}

.setup-warning i[b-had8xnz5kf] {
    font-size: 1.1rem;
    color: var(--color-warning-500, #f59e0b);
    flex-shrink: 0;
    margin-top: 0.1rem;
}

.setup-warning strong[b-had8xnz5kf] { display: block; margin-bottom: 0.25rem; }

/* ── Add Assignment Form ─────────────────────────────────────── */
.add-assignment-form[b-had8xnz5kf] {
    background: var(--color-neutral-50, #f8fafc);
    border: 1px solid var(--color-neutral-200, #e2e8f0);
    border-radius: 0.5rem;
    padding: 1.25rem;
    margin-bottom: 1.5rem;
}

.form-section-label[b-had8xnz5kf] {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--color-neutral-600, #475569);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin: 0 0 0.75rem;
}

.assignment-selectors[b-had8xnz5kf] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

@media (max-width: 480px) {
    .assignment-selectors[b-had8xnz5kf] { grid-template-columns: 1fr; }
}

.selector-group label[b-had8xnz5kf] {
    display: block;
    font-size: 0.78rem;
    font-weight: 500;
    color: var(--color-neutral-600, #475569);
    margin-bottom: 0.3rem;
}

.optional-label[b-had8xnz5kf] {
    color: var(--color-neutral-400, #94a3b8);
    font-weight: 400;
}

.form-select[b-had8xnz5kf] {
    width: 100%;
    padding: 0.45rem 0.75rem;
    border: 1px solid var(--color-neutral-300, #cbd5e1);
    border-radius: 0.375rem;
    font-size: 0.875rem;
    background: #fff;
    color: var(--color-neutral-800, #1e293b);
    outline: none;
    transition: border-color 0.15s;
}

.form-select:focus[b-had8xnz5kf] { border-color: var(--color-primary-400, #60a5fa); }
.form-select:disabled[b-had8xnz5kf] { background: var(--color-neutral-100, #f1f5f9); color: var(--color-neutral-400, #94a3b8); cursor: not-allowed; }

/* ── Subjects Picker ─────────────────────────────────────────── */
.subjects-picker[b-had8xnz5kf] {
    margin-bottom: 0.75rem;
}

.subjects-picker-label[b-had8xnz5kf] {
    display: block;
    font-size: 0.78rem;
    font-weight: 500;
    color: var(--color-neutral-600, #475569);
    margin-bottom: 0.4rem;
}

.subjects-grid[b-had8xnz5kf] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.subject-chip[b-had8xnz5kf] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.3rem 0.6rem;
    border-radius: 999px;
    border: 1.5px solid var(--color-neutral-300, #cbd5e1);
    background: #fff;
    font-size: 0.8rem;
    color: var(--color-neutral-700, #334155);
    cursor: pointer;
    transition: all 0.15s;
    user-select: none;
}

.subject-chip input[b-had8xnz5kf] { display: none; }

.subject-chip.selected[b-had8xnz5kf] {
    border-color: var(--color-primary-400, #60a5fa);
    background: var(--color-primary-50, #eff6ff);
    color: var(--color-primary-800, #1e40af);
    font-weight: 500;
}

.subject-chip:hover:not(.selected)[b-had8xnz5kf] {
    border-color: var(--color-neutral-400, #94a3b8);
}

/* ── Add Button ──────────────────────────────────────────────── */
.btn-add[b-had8xnz5kf] {
    margin-top: 0.75rem;
    padding: 0.45rem 1rem;
    background: var(--color-primary-600, #2563eb);
    color: #fff;
    border: none;
    border-radius: 0.375rem;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.btn-add:hover:not(:disabled)[b-had8xnz5kf] { background: var(--color-primary-700, #1d4ed8); }
.btn-add:disabled[b-had8xnz5kf] { opacity: 0.45; cursor: not-allowed; }

/* ── Pending List ────────────────────────────────────────────── */
.pending-list[b-had8xnz5kf] {
    margin-bottom: 1.5rem;
}

.pending-list-title[b-had8xnz5kf] {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--color-neutral-600, #475569);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin: 0 0 0.5rem;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.count-badge[b-had8xnz5kf] {
    background: var(--color-primary-100, #dbeafe);
    color: var(--color-primary-700, #1d4ed8);
    font-size: 0.7rem;
    font-weight: 700;
    padding: 0.1rem 0.45rem;
    border-radius: 999px;
}

.pending-row[b-had8xnz5kf] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.6rem 0.75rem;
    background: var(--color-success-50, #f0fdf4);
    border: 1px solid var(--color-success-200, #bbf7d0);
    border-radius: 0.375rem;
    margin-bottom: 0.4rem;
}

.pending-row-info[b-had8xnz5kf] {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.pending-class[b-had8xnz5kf] {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-neutral-900, #0f172a);
}

.pending-subjects[b-had8xnz5kf] {
    font-size: 0.78rem;
    color: var(--color-neutral-500, #64748b);
}

.btn-remove[b-had8xnz5kf] {
    width: 28px;
    height: 28px;
    border: none;
    background: none;
    color: var(--color-neutral-400, #94a3b8);
    cursor: pointer;
    border-radius: 0.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: color 0.15s, background 0.15s;
}

.btn-remove:hover[b-had8xnz5kf] {
    color: var(--color-error-600, #dc2626);
    background: var(--color-error-50, #fef2f2);
}

/* ── Step Actions ────────────────────────────────────────────── */
.step-actions[b-had8xnz5kf] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.75rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--color-neutral-100, #f1f5f9);
    flex-wrap: wrap;
}

.btn-primary[b-had8xnz5kf] {
    padding: 0.55rem 1.25rem;
    background: var(--color-primary-600, #2563eb);
    color: #fff;
    border: none;
    border-radius: 0.375rem;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s;
    display: inline-flex;
    align-items: center;
}

.btn-primary:hover:not(:disabled)[b-had8xnz5kf] { background: var(--color-primary-700, #1d4ed8); }
.btn-primary:disabled[b-had8xnz5kf] { opacity: 0.5; cursor: not-allowed; }

.btn-ghost[b-had8xnz5kf] {
    padding: 0.5rem 1rem;
    background: transparent;
    color: var(--color-neutral-600, #475569);
    border: 1px solid var(--color-neutral-300, #cbd5e1);
    border-radius: 0.375rem;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
    display: inline-flex;
    align-items: center;
}

.btn-ghost:hover[b-had8xnz5kf] {
    background: var(--color-neutral-50, #f8fafc);
    border-color: var(--color-neutral-400, #94a3b8);
}

@media (max-width: 480px) {
    .step-actions[b-had8xnz5kf] { justify-content: stretch; }
    .btn-primary[b-had8xnz5kf], .btn-ghost[b-had8xnz5kf] { flex: 1; justify-content: center; }
}
/* /Pages/Teacher/PaySlips.razor.rz.scp.css */
/* ═══════════════════════════════════════════
   Pay Slips Page — Component-scoped CSS
   ═══════════════════════════════════════════ */

/* ── Page shell ── */
.payslip-page[b-mns05fjzw0] {
    max-width: 1400px;
    margin: 0 auto;
    padding: var(--spacing-7, 24px) var(--spacing-7, 24px) var(--spacing-10, 48px);
}

.payslip-header[b-mns05fjzw0] {
    margin-bottom: var(--spacing-7, 24px);
}

.payslip-title[b-mns05fjzw0] {
    font-size: 2rem;
    font-weight: 700;
    color: var(--color-neutral-900, #111827);
    letter-spacing: -0.025em;
    line-height: 1.2;
}

.payslip-subtitle[b-mns05fjzw0] {
    font-size: 0.875rem;
    color: var(--color-neutral-500, #6b7280);
    margin-top: var(--spacing-2, 4px);
}

/* ── Two-column layout ── */
.payslip-layout[b-mns05fjzw0] {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: var(--spacing-7, 24px);
    align-items: start;
}

.payslip-main[b-mns05fjzw0] {
    min-width: 0;
}

/* Stack sidebar below main on tablet */
@media (max-width: 1100px) {
    .payslip-layout[b-mns05fjzw0] {
        grid-template-columns: 1fr;
    }

    .payslip-sidebar[b-mns05fjzw0] {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr);
        gap: var(--spacing-5, 16px);
    }
}

@media (max-width: 640px) {
    .payslip-page[b-mns05fjzw0] {
        padding: var(--spacing-5, 16px) var(--spacing-5, 16px) var(--spacing-8, 32px);
    }

    .payslip-title[b-mns05fjzw0] {
        font-size: 1.5rem;
    }

    .payslip-sidebar[b-mns05fjzw0] {
        grid-template-columns: 1fr !important;
    }
}

/* ── Latest Slip Card ── */
.latest-slip-card[b-mns05fjzw0] {
    background: linear-gradient(135deg, var(--color-primary-600, #3D8275) 0%, var(--color-primary-800, #225143) 100%);
    border-radius: var(--radius-lg, 16px);
    padding: var(--spacing-7, 24px) var(--spacing-8, 32px);
    color: var(--color-text-inverse, #FFFFFF);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-7, 24px);
    margin-bottom: var(--spacing-6, 20px);
    box-shadow: 0 8px 24px color-mix(in srgb, var(--color-primary-700, #2F6A5C) 28%, transparent);
}

.latest-badge[b-mns05fjzw0] {
    display: inline-block;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: color-mix(in srgb, var(--color-text-inverse, #FFFFFF) 65%, transparent);
    background: color-mix(in srgb, var(--color-text-inverse, #FFFFFF) 14%, transparent);
    padding: var(--spacing-1, 2px) var(--spacing-3, 8px);
    border-radius: var(--radius-xs, 6px);
    margin-bottom: var(--spacing-2, 4px);
}

.latest-month[b-mns05fjzw0] {
    font-size: 1.625rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    line-height: 1.2;
}

.latest-slip-amounts[b-mns05fjzw0] {
    display: flex;
    align-items: center;
    gap: 0;
    flex-shrink: 0;
}

.slip-amount-item[b-mns05fjzw0] {
    padding: 0 var(--spacing-6, 20px);
    text-align: center;
}

.slip-amount-item:first-child[b-mns05fjzw0] {
    padding-left: 0;
}

.slip-divider[b-mns05fjzw0] {
    width: 1px;
    height: var(--spacing-9, 40px);
    background: color-mix(in srgb, var(--color-text-inverse, #FFFFFF) 22%, transparent);
    flex-shrink: 0;
}

.slip-amount-label[b-mns05fjzw0] {
    font-size: 0.7rem;
    color: color-mix(in srgb, var(--color-text-inverse, #FFFFFF) 60%, transparent);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: var(--spacing-2, 4px);
}

.slip-amount-value[b-mns05fjzw0] {
    font-size: 1.375rem;
    font-weight: 700;
    line-height: 1.1;
}

.slip-amount-deduction[b-mns05fjzw0] {
    color: var(--color-danger-300, #FCA5A5);
}

.slip-amount-net[b-mns05fjzw0] {
    color: var(--color-success-300, #6EE7B7);
}

@media (max-width: 768px) {
    .latest-slip-card[b-mns05fjzw0] {
        flex-direction: column;
        align-items: flex-start;
    }

    .latest-slip-amounts[b-mns05fjzw0] {
        width: 100%;
        justify-content: space-around;
    }

    .slip-amount-item:first-child[b-mns05fjzw0] {
        padding-left: var(--spacing-6, 20px);
    }
}

/* ── KPI Cards ── */
.kpi-grid[b-mns05fjzw0] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--spacing-5, 16px);
    margin-bottom: var(--spacing-6, 20px);
}

@media (max-width: 900px) {
    .kpi-grid[b-mns05fjzw0] {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 480px) {
    .kpi-grid[b-mns05fjzw0] {
        grid-template-columns: repeat(2, 1fr);
    }
}

.kpi-card[b-mns05fjzw0] {
    background: var(--color-surface-primary, #FFFFFF);
    border: 1px solid var(--color-neutral-200, #e5e7eb);
    border-radius: var(--radius-md, 12px);
    padding: var(--spacing-6, 20px);
    display: flex;
    gap: var(--spacing-4, 12px);
    align-items: flex-start;
    min-height: 96px;
    box-shadow: var(--shadow-xs, 0 1px 2px rgba(16, 24, 40, 0.06));
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.kpi-card:hover[b-mns05fjzw0] {
    box-shadow: var(--shadow-md, 0 8px 24px rgba(16, 24, 40, 0.10));
    transform: translateY(-1px);
}

.kpi-icon[b-mns05fjzw0] {
    width: var(--spacing-9, 40px);
    height: var(--spacing-9, 40px);
    border-radius: var(--radius-sm, 8px);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    flex-shrink: 0;
}

.kpi-icon-earnings[b-mns05fjzw0] { background: var(--color-primary-50, #E6F7F4);  color: var(--color-primary-600, #3D8275); }
.kpi-icon-pf[b-mns05fjzw0]       { background: var(--color-success-50, #ECFDF5);   color: var(--color-success-600, #16A34A); }
.kpi-icon-tax[b-mns05fjzw0]      { background: var(--color-warning-50, #FFF8E5);   color: var(--color-warning-600, #E69500); }
.kpi-icon-months[b-mns05fjzw0]   { background: var(--color-primary-100, #B3E8DE);  color: var(--color-primary-700, #2F6A5C); }

.kpi-body[b-mns05fjzw0] {
    flex: 1;
    min-width: 0;
}

.kpi-label[b-mns05fjzw0] {
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-neutral-400, #9ca3af);
    line-height: 1.2;
    margin-bottom: var(--spacing-2, 4px);
}

.kpi-value[b-mns05fjzw0] {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--color-neutral-900, #111827);
    line-height: 1.1;
    letter-spacing: -0.02em;
}

.kpi-sub[b-mns05fjzw0] {
    font-size: 0.7rem;
    color: var(--color-neutral-400, #9ca3af);
    margin-top: var(--spacing-1, 2px);
}

/* ── Table Card ── */
.table-card[b-mns05fjzw0] {
    background: var(--color-surface-primary, #FFFFFF);
    border: 1px solid var(--color-neutral-200, #e5e7eb);
    border-radius: var(--radius-md, 12px);
    box-shadow: var(--shadow-xs, 0 1px 2px rgba(16, 24, 40, 0.06));
    overflow: hidden;
}

.table-header-bar[b-mns05fjzw0] {
    padding: var(--spacing-5, 16px) var(--spacing-7, 24px);
    border-bottom: 1px solid var(--color-neutral-100, #f3f4f6);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.table-title[b-mns05fjzw0] {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--color-neutral-900, #111827);
}

.year-select[b-mns05fjzw0] {
    font-size: 0.8125rem;
    border: 1px solid var(--color-neutral-200, #e5e7eb);
    border-radius: var(--radius-sm, 8px);
    padding: var(--spacing-3, 8px) var(--spacing-8, 32px) var(--spacing-3, 8px) var(--spacing-4, 12px);
    color: var(--color-neutral-700, #374151);
    background: var(--color-surface-primary, #FFFFFF);
    cursor: pointer;
    outline: none;
    transition: border-color 0.15s, box-shadow 0.15s;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%236b7280' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right var(--spacing-3, 8px) center;
}

.year-select:focus[b-mns05fjzw0] {
    border-color: var(--color-primary-600, #3D8275);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary-500, #4A9B8E) 12%, transparent);
}

.table-scroll[b-mns05fjzw0] {
    overflow-x: auto;
    max-width: 100%;
}

.payslip-table[b-mns05fjzw0] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
}

.payslip-table thead tr[b-mns05fjzw0] {
    background: var(--color-neutral-50, #F9FAFB);
    border-bottom: 2px solid var(--color-neutral-100, #f3f4f6);
}

.th-left[b-mns05fjzw0], .th-right[b-mns05fjzw0], .th-center[b-mns05fjzw0] {
    padding: var(--spacing-4, 12px) var(--spacing-6, 20px);
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-neutral-500, #6b7280);
    white-space: nowrap;
}

.th-left[b-mns05fjzw0]   { text-align: left; }
.th-right[b-mns05fjzw0]  { text-align: right; }
.th-center[b-mns05fjzw0] { text-align: center; }

.table-row[b-mns05fjzw0] {
    border-bottom: 1px solid var(--color-neutral-50, #f9fafb);
    transition: background-color 0.15s ease;
    cursor: pointer;
}

.table-row:hover[b-mns05fjzw0] {
    background-color: var(--color-primary-50, #E6F7F4);
}

.table-row:last-child[b-mns05fjzw0] {
    border-bottom: none;
}

.td-month[b-mns05fjzw0], .td-right[b-mns05fjzw0], .td-center[b-mns05fjzw0] {
    padding: var(--spacing-5, 16px) var(--spacing-6, 20px);
    vertical-align: middle;
}

.td-right[b-mns05fjzw0]  { text-align: right; }
.td-center[b-mns05fjzw0] { text-align: center; }

.month-cell[b-mns05fjzw0] {
    display: flex;
    align-items: center;
    gap: var(--spacing-3, 8px);
    font-weight: 500;
    color: var(--color-neutral-900, #111827);
}

.month-icon[b-mns05fjzw0] {
    width: var(--spacing-8, 32px);
    height: var(--spacing-8, 32px);
    border-radius: var(--radius-sm, 8px);
    background: var(--color-primary-50, #E6F7F4);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-primary-600, #3D8275);
    font-size: 0.75rem;
    flex-shrink: 0;
}

.td-muted[b-mns05fjzw0]  { color: var(--color-neutral-500, #6b7280); }
.td-danger[b-mns05fjzw0] { color: var(--color-danger-600, #DC2626); font-weight: 500; }
.td-bold[b-mns05fjzw0]   { color: var(--color-neutral-900, #111827); font-weight: 600; }

.empty-cell[b-mns05fjzw0] {
    padding: var(--spacing-9, 40px) var(--spacing-7, 24px);
    text-align: center;
    color: var(--color-neutral-400, #9ca3af);
    font-size: 0.875rem;
}

/* Action buttons */
.action-buttons[b-mns05fjzw0] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-2, 4px);
}

.btn-action[b-mns05fjzw0] {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-2, 4px);
    padding: var(--spacing-3, 8px) var(--spacing-4, 12px);
    border-radius: var(--radius-xs, 6px);
    font-size: 0.75rem;
    font-weight: 600;
    border: none;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
    min-height: 44px;
    white-space: nowrap;
}

.btn-action:focus-visible[b-mns05fjzw0] {
    outline: 2px solid var(--color-primary-600, #3D8275);
    outline-offset: 2px;
}

.btn-view[b-mns05fjzw0] {
    background: var(--color-primary-50, #E6F7F4);
    color: var(--color-primary-600, #3D8275);
}

.btn-view:hover[b-mns05fjzw0] {
    background: var(--color-primary-100, #B3E8DE);
    color: var(--color-primary-700, #2F6A5C);
}

.btn-download[b-mns05fjzw0] {
    background: var(--color-success-50, #ECFDF5);
    color: var(--color-success-600, #16A34A);
}

.btn-download:hover[b-mns05fjzw0] {
    background: var(--color-success-100, #D1FAE5);
    color: var(--color-success-700, #15803D);
}

/* ═══════════════════════════════════════════
   Right Sidebar Widgets
   ═══════════════════════════════════════════ */
.payslip-sidebar[b-mns05fjzw0] {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-5, 16px);
}

.widget-card[b-mns05fjzw0] {
    background: var(--color-surface-primary, #FFFFFF);
    border: 1px solid var(--color-neutral-200, #e5e7eb);
    border-radius: var(--radius-md, 12px);
    box-shadow: var(--shadow-xs, 0 1px 2px rgba(16, 24, 40, 0.06));
    overflow: hidden;
}

.widget-header[b-mns05fjzw0] {
    display: flex;
    align-items: center;
    gap: var(--spacing-3, 8px);
    padding: var(--spacing-4, 12px) var(--spacing-5, 16px);
    border-bottom: 1px solid var(--color-neutral-100, #f3f4f6);
    background: var(--color-surface-primary, #FFFFFF);
}

.widget-header-icon[b-mns05fjzw0] {
    color: var(--color-primary-600, #3D8275);
    font-size: 0.875rem;
    width: var(--spacing-5, 16px);
    text-align: center;
}

.widget-title[b-mns05fjzw0] {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--color-neutral-800, #1f2937);
}

.widget-body[b-mns05fjzw0] {
    padding: var(--spacing-4, 12px) var(--spacing-5, 16px);
}

/* Upcoming salary */
.widget-upcoming .widget-header[b-mns05fjzw0] {
    background: linear-gradient(135deg, var(--color-primary-50, #E6F7F4) 0%, var(--color-success-50, #ECFDF5) 100%);
    border-bottom-color: var(--color-primary-100, #B3E8DE);
}

.upcoming-date[b-mns05fjzw0] {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--color-neutral-900, #111827);
    line-height: 1.2;
}

.upcoming-label[b-mns05fjzw0] {
    font-size: 0.75rem;
    color: var(--color-neutral-500, #6b7280);
    margin-top: var(--spacing-1, 2px);
    margin-bottom: var(--spacing-4, 12px);
}

.upcoming-amount[b-mns05fjzw0] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--color-success-50, #ECFDF5);
    border: 1px solid var(--color-success-200, #A7F3D0);
    border-radius: var(--radius-sm, 8px);
    padding: var(--spacing-3, 8px) var(--spacing-4, 12px);
}

.upcoming-amount-label[b-mns05fjzw0] {
    font-size: 0.75rem;
    color: var(--color-success-600, #16A34A);
    font-weight: 500;
}

.upcoming-amount-value[b-mns05fjzw0] {
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--color-success-600, #16A34A);
}

/* Tax summary */
.tax-row[b-mns05fjzw0] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 0;
    border-bottom: 1px solid var(--color-neutral-50, #f9fafb);
}

.tax-row:last-of-type[b-mns05fjzw0] {
    border-bottom: none;
}

.tax-row-total[b-mns05fjzw0] {
    padding-top: var(--spacing-3, 8px);
    margin-top: var(--spacing-1, 2px);
    border-top: 1px solid var(--color-neutral-200, #e5e7eb);
    border-bottom: none;
}

.tax-label[b-mns05fjzw0] {
    font-size: 0.8rem;
    color: var(--color-neutral-500, #6b7280);
}

.tax-value[b-mns05fjzw0] {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--color-neutral-700, #374151);
}

.tax-value-total[b-mns05fjzw0] {
    color: var(--color-danger-600, #DC2626);
    font-size: 0.875rem;
}

.tax-bar[b-mns05fjzw0] {
    height: var(--spacing-3, 8px);
    background: var(--color-neutral-100, #f3f4f6);
    border-radius: var(--radius-xs, 6px);
    margin-top: var(--spacing-4, 12px);
    overflow: hidden;
}

.tax-bar-fill[b-mns05fjzw0] {
    height: 100%;
    background: linear-gradient(90deg, var(--color-primary-600, #3D8275), var(--color-success-600, #16A34A));
    border-radius: var(--radius-xs, 6px);
    transition: width 0.6s ease;
    max-width: 100%;
}

.tax-footnote[b-mns05fjzw0] {
    font-size: 0.7rem;
    color: var(--color-neutral-400, #9ca3af);
    margin-top: var(--spacing-2, 4px);
}

/* Download center */
.download-btn[b-mns05fjzw0] {
    display: flex;
    align-items: center;
    gap: var(--spacing-3, 8px);
    width: 100%;
    padding: var(--spacing-3, 8px) var(--spacing-4, 12px);
    border: 1px solid var(--color-neutral-200, #e5e7eb);
    border-radius: var(--radius-sm, 8px);
    background: var(--color-surface-primary, #FFFFFF);
    cursor: pointer;
    text-align: left;
    transition: background-color 0.15s ease, border-color 0.15s ease;
    margin-bottom: var(--spacing-3, 8px);
}

.download-btn:last-child[b-mns05fjzw0] {
    margin-bottom: 0;
}

.download-btn:hover[b-mns05fjzw0] {
    background: var(--color-primary-50, #E6F7F4);
    border-color: var(--color-primary-200, #80D9C8);
}

.download-btn:focus-visible[b-mns05fjzw0] {
    outline: 2px solid var(--color-primary-600, #3D8275);
    outline-offset: 2px;
}

.download-btn .fas[b-mns05fjzw0] {
    font-size: 1.1rem;
    color: var(--color-primary-600, #3D8275);
    width: var(--spacing-6, 20px);
    text-align: center;
    flex-shrink: 0;
}

.download-btn-title[b-mns05fjzw0] {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--color-neutral-800, #1f2937);
    line-height: 1.2;
}

.download-btn-sub[b-mns05fjzw0] {
    font-size: 0.7rem;
    color: var(--color-neutral-500, #6b7280);
    margin-top: var(--spacing-1, 2px);
}

/* Payroll notices */
.notice-item[b-mns05fjzw0] {
    display: flex;
    gap: var(--spacing-3, 8px);
    padding: var(--spacing-3, 8px) 0;
    border-bottom: 1px solid var(--color-neutral-50, #f9fafb);
}

.notice-item:last-child[b-mns05fjzw0] {
    border-bottom: none;
    padding-bottom: 0;
}

.notice-dot[b-mns05fjzw0] {
    width: var(--spacing-3, 8px);
    height: var(--spacing-3, 8px);
    border-radius: var(--radius-full, 9999px);
    flex-shrink: 0;
    margin-top: var(--spacing-2, 4px);
}

.notice-dot-info[b-mns05fjzw0]    { background: var(--color-primary-500, #4A9B8E); }
.notice-dot-warning[b-mns05fjzw0] { background: var(--color-warning-600, #E69500); }

.notice-text[b-mns05fjzw0] {
    font-size: 0.8rem;
    color: var(--color-neutral-700, #374151);
    line-height: 1.45;
}

.notice-date[b-mns05fjzw0] {
    font-size: 0.7rem;
    color: var(--color-neutral-400, #9ca3af);
    margin-top: var(--spacing-1, 2px);
}

/* ── Global accessibility: focus ring ── */
:focus-visible[b-mns05fjzw0] {
    outline: 2px solid var(--color-primary-600, #3D8275);
    outline-offset: 2px;
}

/* ═══════════════════════════════════════════
   Download button — disabled state
   ═══════════════════════════════════════════ */
.download-btn-disabled[b-mns05fjzw0] {
    display: flex;
    align-items: center;
    gap: var(--spacing-3, 8px);
    width: 100%;
    padding: var(--spacing-3, 8px) var(--spacing-4, 12px);
    border: 1px dashed var(--color-neutral-200, #e5e7eb);
    border-radius: var(--radius-sm, 8px);
    background: var(--color-neutral-50, #f9fafb);
    cursor: not-allowed;
    text-align: left;
    margin-bottom: var(--spacing-3, 8px);
    opacity: 0.7;
}

.download-btn-disabled:last-child[b-mns05fjzw0] {
    margin-bottom: 0;
}

.download-btn-disabled .fas[b-mns05fjzw0] {
    font-size: 1.1rem;
    color: var(--color-neutral-300, #d1d5db);
    width: 20px;
    text-align: center;
    flex-shrink: 0;
}

.download-btn-sub-soon[b-mns05fjzw0] {
    color: var(--color-neutral-400, #9ca3af) !important;
    font-style: italic;
}

.download-center-note[b-mns05fjzw0] {
    margin-top: var(--spacing-3, 8px);
    padding: var(--spacing-2, 4px) var(--spacing-3, 8px);
    background: var(--color-primary-50, #E6F7F4);
    border-radius: var(--radius-xs, 6px);
    font-size: 0.75rem;
    color: var(--color-primary-700, #2F6A5C);
    line-height: 1.45;
}

.download-center-note .fas[b-mns05fjzw0] {
    margin-right: 4px;
}

/* ═══════════════════════════════════════════
   Slip Detail Modal
   ═══════════════════════════════════════════ */
.modal-overlay[b-mns05fjzw0] {
    position: fixed;
    inset: 0;
    background: var(--modal-backdrop, rgba(17, 24, 39, 0.45));
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: var(--spacing-5, 16px);
    backdrop-filter: blur(2px);
}

.modal-panel[b-mns05fjzw0] {
    background: var(--color-bg-surface, #FFFFFF);
    border-radius: var(--modal-radius, 16px);
    width: 100%;
    max-width: 680px;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: var(--modal-shadow, var(--shadow-lg));
    display: flex;
    flex-direction: column;
}

/* Modal Header */
.modal-header[b-mns05fjzw0] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: var(--spacing-6, 20px) var(--spacing-7, 24px) var(--spacing-5, 16px);
    border-bottom: 1px solid var(--color-neutral-100, #f3f4f6);
    background: linear-gradient(135deg, var(--color-primary-600, #3D8275), var(--color-primary-800, #225143));
    border-radius: var(--modal-radius, 16px) var(--modal-radius, 16px) 0 0;
    color: var(--color-text-inverse, #FFFFFF);
}

.modal-header-sub[b-mns05fjzw0] {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: color-mix(in srgb, var(--color-text-inverse, #FFFFFF) 60%, transparent);
    margin-bottom: 4px;
}

.modal-header-title[b-mns05fjzw0] {
    font-size: 1.375rem;
    font-weight: 700;
    letter-spacing: 0;
}

.modal-header-actions[b-mns05fjzw0] {
    display: flex;
    align-items: center;
    gap: var(--spacing-3, 8px);
    flex-shrink: 0;
}

.modal-download-btn[b-mns05fjzw0] {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-2, 6px);
    padding: var(--spacing-3, 8px) var(--spacing-5, 16px);
    background: color-mix(in srgb, var(--color-text-inverse, #FFFFFF) 15%, transparent);
    color: var(--color-text-inverse, #FFFFFF);
    border: 1px solid color-mix(in srgb, var(--color-text-inverse, #FFFFFF) 30%, transparent);
    border-radius: var(--radius-sm, 8px);
    font-size: 0.8125rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s;
}

.modal-download-btn:hover[b-mns05fjzw0] {
    background: color-mix(in srgb, var(--color-text-inverse, #FFFFFF) 25%, transparent);
}

.modal-download-btn:disabled[b-mns05fjzw0] {
    opacity: 0.6;
    cursor: wait;
}

.modal-download-btn:focus-visible[b-mns05fjzw0] {
    outline: 2px solid var(--color-text-inverse, #FFFFFF);
    outline-offset: 2px;
}

.modal-close-btn[b-mns05fjzw0] {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-sm, 8px);
    border: 1px solid color-mix(in srgb, var(--color-text-inverse, #FFFFFF) 25%, transparent);
    background: transparent;
    color: color-mix(in srgb, var(--color-text-inverse, #FFFFFF) 80%, transparent);
    cursor: pointer;
    font-size: 0.875rem;
    transition: background 0.15s;
}

.modal-close-btn:hover[b-mns05fjzw0] {
    background: color-mix(in srgb, var(--color-text-inverse, #FFFFFF) 18%, transparent);
    color: var(--color-text-inverse, #FFFFFF);
}

/* Employee Info Strip */
.modal-emp-strip[b-mns05fjzw0] {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    padding: var(--spacing-4, 12px) var(--spacing-7, 24px);
    background: var(--color-surface-secondary, #F9FAFB);
    border-bottom: 1px solid var(--color-neutral-100, #f3f4f6);
}

.modal-emp-item[b-mns05fjzw0] {
    display: flex;
    flex-direction: column;
    min-width: 130px;
    padding: var(--spacing-2, 4px) var(--spacing-5, 16px) var(--spacing-2, 4px) 0;
}

.modal-emp-item:first-child[b-mns05fjzw0] {
    padding-left: 0;
}

.modal-emp-label[b-mns05fjzw0] {
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-neutral-400, #9ca3af);
    margin-bottom: 2px;
}

.modal-emp-value[b-mns05fjzw0] {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--color-neutral-800, #1f2937);
}

.modal-emp-value-attendance[b-mns05fjzw0] {
    color: var(--color-primary-600, #3D8275);
}

.modal-per-day[b-mns05fjzw0] {
    font-size: 0.7rem;
    color: var(--color-neutral-500, #6b7280);
    font-weight: 500;
    margin-left: 4px;
}

/* Earnings/Deductions breakdown */
.modal-breakdown[b-mns05fjzw0] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    padding: 0 var(--spacing-7, 24px) 0;
}

@media (max-width: 540px) {
    .modal-breakdown[b-mns05fjzw0] {
        grid-template-columns: 1fr;
    }
}

.modal-col[b-mns05fjzw0] {
    padding: var(--spacing-5, 16px) var(--spacing-4, 12px) var(--spacing-5, 16px) 0;
}

.modal-col:last-child[b-mns05fjzw0] {
    padding-left: var(--spacing-6, 20px);
    padding-right: 0;
    border-left: 1px solid var(--color-neutral-100, #f3f4f6);
}

.modal-col-header[b-mns05fjzw0] {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: var(--spacing-2, 4px) var(--spacing-3, 8px);
    border-radius: var(--radius-xs, 6px);
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: var(--spacing-2, 6px);
}

.modal-col-header-earnings[b-mns05fjzw0] {
    background: var(--color-success-50, #ECFDF5);
    color: var(--color-success-700, #15803D);
}

.modal-col-header-deductions[b-mns05fjzw0] {
    background: var(--color-danger-50, #FEF2F2);
    color: var(--color-danger-600, #DC2626);
}

.modal-line-item[b-mns05fjzw0] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--spacing-2, 4px) 0;
    border-bottom: 1px solid var(--color-neutral-50, #f9fafb);
    gap: 8px;
}

.modal-line-item:last-child[b-mns05fjzw0] {
    border-bottom: none;
}

.modal-line-label[b-mns05fjzw0] {
    font-size: 0.8rem;
    color: var(--color-neutral-600, #4b5563);
    flex: 1;
}

.modal-line-value[b-mns05fjzw0] {
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--color-neutral-800, #1f2937);
    white-space: nowrap;
}

.modal-line-deduction[b-mns05fjzw0] {
    color: var(--color-danger-600, #DC2626);
}

.modal-line-total[b-mns05fjzw0] {
    margin-top: var(--spacing-2, 4px);
    padding-top: var(--spacing-3, 8px);
    border-top: 2px solid var(--color-neutral-200, #e5e7eb) !important;
    border-bottom: none !important;
}

.modal-line-total .modal-line-label[b-mns05fjzw0] {
    font-weight: 700;
    color: var(--color-neutral-800, #1f2937);
}

.modal-line-total .modal-line-value[b-mns05fjzw0] {
    font-weight: 700;
    font-size: 0.875rem;
}

.modal-line-total-earnings .modal-line-value[b-mns05fjzw0] {
    color: var(--color-success-600, #16A34A);
}

.modal-line-total-deductions .modal-line-value[b-mns05fjzw0] {
    color: var(--color-danger-600, #DC2626);
}

/* Net Pay Footer */
.modal-net-footer[b-mns05fjzw0] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--spacing-5, 16px) var(--spacing-7, 24px);
    background: var(--color-primary-900, #14382A);
    border-radius: 0 0 var(--modal-radius, 16px) var(--modal-radius, 16px);
    margin-top: var(--spacing-2, 4px);
}

.modal-net-label[b-mns05fjzw0] {
    font-size: 0.8125rem;
    font-weight: 600;
    color: color-mix(in srgb, var(--color-text-inverse, #FFFFFF) 75%, transparent);
}

.modal-net-value[b-mns05fjzw0] {
    font-size: 1.375rem;
    font-weight: 700;
    color: var(--color-success-300, #6EE7B7);
    letter-spacing: 0;
}
/* /Pages/Teacher/Ptm/Index.razor.rz.scp.css */
/* No page-specific styles */
/* /Pages/Teacher/Questions/Browse.razor.rz.scp.css */
/* Styles handled via Tailwind utility classes in markup */
/* /Pages/Teacher/Questions/ByType.razor.rz.scp.css */
/* ByType.razor.css — Question Type Preview page */

/* ── Page container ────────────────────────────────────────────────────────── */
.btp-page[b-juex7hb6su] {
    max-width: 960px;
    margin: 0 auto;
    padding: 1.5rem 1rem 4rem;
}

/* ── Page header ───────────────────────────────────────────────────────────── */
.btp-header[b-juex7hb6su] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.25rem;
    flex-wrap: wrap;
}

.btp-title[b-juex7hb6su] {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--color-neutral-900);
    margin: 0 0 0.2rem;
}

.btp-subtitle[b-juex7hb6su] {
    font-size: 0.825rem;
    color: var(--color-neutral-500);
    margin: 0;
}

.btp-btn-secondary[b-juex7hb6su] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.45rem 0.9rem;
    font-size: 0.825rem;
    font-weight: 500;
    color: var(--color-primary-600);
    background: transparent;
    border: 1px solid var(--color-primary-300);
    border-radius: 6px;
    text-decoration: none;
    white-space: nowrap;
    transition: background 0.15s;
}

.btp-btn-secondary:hover[b-juex7hb6su] {
    background: var(--color-primary-50);
    text-decoration: none;
}

/* ── Filter bar ────────────────────────────────────────────────────────────── */
.btp-filter-bar[b-juex7hb6su] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    background: var(--color-neutral-50);
    border: 1px solid var(--color-neutral-100);
    border-radius: 8px;
    margin-bottom: 1.25rem;
}

.btp-filter-group[b-juex7hb6su] {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    min-width: 140px;
}

.btp-filter-label[b-juex7hb6su] {
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-neutral-400);
}

.btp-select[b-juex7hb6su] {
    padding: 0.35rem 0.6rem;
    font-size: 0.825rem;
    border: 1px solid var(--color-neutral-200);
    border-radius: 5px;
    background: #fff;
    color: var(--color-neutral-800);
    cursor: pointer;
}

.btp-select:focus[b-juex7hb6su] {
    outline: none;
    border-color: var(--color-primary-400);
    box-shadow: 0 0 0 2px var(--color-primary-100);
}

.btp-filter-stat[b-juex7hb6su] {
    align-self: flex-end;
    flex-direction: row;
    align-items: center;
    min-width: unset;
}

.btp-stat-chip[b-juex7hb6su] {
    font-size: 0.78rem;
    color: var(--color-neutral-500);
    padding: 0.3rem 0.65rem;
    background: #fff;
    border: 1px solid var(--color-neutral-200);
    border-radius: 20px;
}

/* ── Coverage bar ──────────────────────────────────────────────────────────── */
.btp-coverage-bar[b-juex7hb6su] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-bottom: 1.5rem;
}

.btp-type-chip[b-juex7hb6su] {
    font-size: 0.7rem;
    font-weight: 600;
    padding: 0.2rem 0.55rem;
    border-radius: 4px;
    cursor: default;
}

.btp-chip-found[b-juex7hb6su] {
    background: var(--color-success-50, #ecfdf5);
    color: var(--color-success-700, #065f46);
    border: 1px solid var(--color-success-200, #a7f3d0);
}

.btp-chip-missing[b-juex7hb6su] {
    background: var(--color-neutral-100);
    color: var(--color-neutral-400);
    border: 1px solid var(--color-neutral-200);
}

/* ── Type section ──────────────────────────────────────────────────────────── */
.btp-type-section[b-juex7hb6su] {
    margin-bottom: 2.5rem;
    border-top: 2px solid var(--color-neutral-100);
    padding-top: 1rem;
}

.btp-type-section-extra[b-juex7hb6su] {
    border-top-color: var(--color-warning-300, #fcd34d);
}

.btp-type-header[b-juex7hb6su] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.85rem;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.btp-type-header-left[b-juex7hb6su] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.btp-type-index[b-juex7hb6su] {
    width: 1.6rem;
    height: 1.6rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--color-primary-600);
    background: var(--color-primary-50);
    border-radius: 50%;
    flex-shrink: 0;
}

.btp-type-name[b-juex7hb6su] {
    font-size: 0.925rem;
    font-weight: 600;
    color: var(--color-neutral-800);
}

.btp-badge-new[b-juex7hb6su] {
    font-size: 0.6rem;
    font-weight: 700;
    padding: 0.1rem 0.4rem;
    background: var(--color-warning-100, #fef3c7);
    color: var(--color-warning-700, #92400e);
    border-radius: 3px;
    letter-spacing: 0.05em;
}

.btp-count-badge[b-juex7hb6su] {
    font-size: 0.72rem;
    font-weight: 600;
    padding: 0.2rem 0.6rem;
    background: var(--color-primary-50);
    color: var(--color-primary-600);
    border-radius: 20px;
    white-space: nowrap;
}

.btp-badge-empty[b-juex7hb6su] {
    background: var(--color-neutral-100);
    color: var(--color-neutral-400);
}

/* ── Question wrapper ──────────────────────────────────────────────────────── */
.btp-question-wrapper[b-juex7hb6su] {
    margin-bottom: 1rem;
}

/* ── Empty state ───────────────────────────────────────────────────────────── */
.btp-empty-state[b-juex7hb6su] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
    padding: 1.25rem;
    background: var(--color-neutral-50);
    border: 1px dashed var(--color-neutral-200);
    border-radius: 8px;
    color: var(--color-neutral-400);
    font-size: 0.825rem;
    text-align: center;
}

.btp-empty-state .oi[b-juex7hb6su] {
    font-size: 1.25rem;
    opacity: 0.5;
}

.btp-empty-state p[b-juex7hb6su] {
    margin: 0;
}

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

.btp-link:hover[b-juex7hb6su] {
    text-decoration: underline;
}

/* ── Loading ───────────────────────────────────────────────────────────────── */
.btp-loading[b-juex7hb6su] {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 3rem 1rem;
    gap: 0.75rem;
}

.btp-spinner[b-juex7hb6su] {
    width: 36px;
    height: 36px;
    border: 3px solid var(--color-neutral-100);
    border-top-color: var(--color-primary-500);
    border-radius: 50%;
    animation: btp-spin-b-juex7hb6su 0.75s linear infinite;
}

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

.btp-loading-text[b-juex7hb6su] {
    font-size: 0.85rem;
    color: var(--color-neutral-400);
    margin: 0;
}

/* ── Error ─────────────────────────────────────────────────────────────────── */
.btp-error[b-juex7hb6su] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.85rem 1rem;
    background: var(--color-danger-50, #fef2f2);
    border: 1px solid var(--color-danger-200, #fecaca);
    border-radius: 8px;
    color: var(--color-danger-700, #b91c1c);
    font-size: 0.85rem;
}

/* ── Mobile ────────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
    .btp-page[b-juex7hb6su] {
        padding: 1rem 0.75rem 3rem;
    }

    .btp-filter-bar[b-juex7hb6su] {
        gap: 0.6rem;
    }

    .btp-filter-group[b-juex7hb6su] {
        min-width: calc(50% - 0.4rem);
    }
}

@media (max-width: 480px) {
    .btp-filter-group[b-juex7hb6su] {
        min-width: 100%;
    }
}
/* /Pages/Teacher/Questions/Create.razor.rz.scp.css */
/* ============================================================
   Create.razor.css — Scoped styles for Teacher Question Create/Edit page
   Uses design-token variables from design-tokens.css
   ============================================================ */

/* Loading overlay */
.cq-loading[b-gxeb7xel1o] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 40vh;
    gap: 1rem;
    color: var(--color-text-secondary, #6b7280);
}

.cq-spinner[b-gxeb7xel1o] {
    width: 2.5rem;
    height: 2.5rem;
    border: 3px solid var(--color-border, #e5e7eb);
    border-top-color: var(--color-primary, #4f46e5);
    border-radius: 50%;
    animation: cq-spin-b-gxeb7xel1o 0.8s linear infinite;
}

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

/* Page header */
.cq-header[b-gxeb7xel1o] {
    margin-bottom: 1.5rem;
}

.cq-breadcrumb[b-gxeb7xel1o] {
    font-size: 0.8125rem;
    color: var(--color-text-secondary, #6b7280);
    margin-bottom: 0.375rem;
    display: flex;
    align-items: center;
    gap: 0.375rem;
}

.cq-breadcrumb a[b-gxeb7xel1o] {
    color: var(--color-primary, #4f46e5);
    text-decoration: none;
}

.cq-breadcrumb a:hover[b-gxeb7xel1o] {
    text-decoration: underline;
}

.cq-title[b-gxeb7xel1o] {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--color-text-primary, #111827);
    margin: 0;
}

/* Alert banners */
.cq-alert[b-gxeb7xel1o] {
    padding: 0.875rem 1rem;
    border-radius: 0.5rem;
    margin-bottom: 1rem;
    font-size: 0.875rem;
}

.cq-alert-error[b-gxeb7xel1o] {
    background: #fef2f2;
    border: 1px solid #fecaca;
    color: #b91c1c;
}

.cq-error-list[b-gxeb7xel1o] {
    margin: 0.25rem 0 0 1rem;
    padding: 0;
    list-style: disc;
}

/* Cards */
.cq-card[b-gxeb7xel1o] {
    background: var(--color-surface, #fff);
    border: 1px solid var(--color-border, #e5e7eb);
    border-radius: 0.75rem;
    padding: 1.25rem 1.5rem;
    margin-bottom: 1.25rem;
}

.cq-section-title[b-gxeb7xel1o] {
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-text-primary, #111827);
    margin: 0 0 1rem 0;
}

.cq-section-subtitle[b-gxeb7xel1o] {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-text-secondary, #6b7280);
    margin: 1rem 0 0.5rem;
}

/* Grids */
.cq-grid[b-gxeb7xel1o] {
    display: grid;
    gap: 1rem;
}

.cq-grid-2[b-gxeb7xel1o] { grid-template-columns: repeat(2, 1fr); }
.cq-grid-3[b-gxeb7xel1o] { grid-template-columns: repeat(3, 1fr); }

@media (max-width: 768px) {
    .cq-grid-2[b-gxeb7xel1o],
    .cq-grid-3[b-gxeb7xel1o] {
        grid-template-columns: 1fr;
    }
}

/* Fields */
.cq-field[b-gxeb7xel1o] {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

.cq-field label[b-gxeb7xel1o] {
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--color-text-primary, #374151);
}

.cq-required[b-gxeb7xel1o] { color: #ef4444; margin-left: 0.125rem; }
.cq-optional[b-gxeb7xel1o] { color: var(--color-text-secondary, #9ca3af); font-weight: 400; font-size: 0.75rem; }

.cq-input[b-gxeb7xel1o],
.cq-select[b-gxeb7xel1o] {
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--color-border, #d1d5db);
    border-radius: 0.375rem;
    font-size: 0.875rem;
    color: var(--color-text-primary, #111827);
    background: var(--color-surface, #fff);
    transition: border-color 0.15s;
    width: 100%;
    box-sizing: border-box;
}

.cq-input:focus[b-gxeb7xel1o],
.cq-select:focus[b-gxeb7xel1o] {
    outline: none;
    border-color: var(--color-primary, #4f46e5);
    box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.12);
}

.cq-input:disabled[b-gxeb7xel1o],
.cq-select:disabled[b-gxeb7xel1o] {
    background: var(--color-surface-secondary, #f9fafb);
    color: var(--color-text-secondary, #9ca3af);
    cursor: not-allowed;
}

.cq-select-sm[b-gxeb7xel1o] { max-width: 28rem; }

/* Hint text */
.cq-hint[b-gxeb7xel1o] {
    font-size: 0.8125rem;
    color: var(--color-text-secondary, #6b7280);
    margin: 0.25rem 0 0.75rem;
}

/* Divider */
.cq-divider[b-gxeb7xel1o] {
    height: 1px;
    background: var(--color-border, #e5e7eb);
    margin: 1.25rem 0;
}

/* Radio group */
.cq-radio-group[b-gxeb7xel1o] {
    display: flex;
    gap: 1.5rem;
    padding: 0.5rem 0;
}

.cq-radio-group label[b-gxeb7xel1o] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
}

.cq-radio[b-gxeb7xel1o] { cursor: pointer; accent-color: var(--color-primary, #4f46e5); }

/* MCQ option rows */
.cq-option-row[b-gxeb7xel1o] {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: start;
    gap: 0.625rem;
    margin-bottom: 0.5rem;
}

/* Match the Following */
.cq-match-header[b-gxeb7xel1o] {
    display: grid;
    grid-template-columns: 1fr 1fr auto;
    gap: 0.625rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--color-text-secondary, #6b7280);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 0 0 0.25rem;
}

.cq-match-row[b-gxeb7xel1o] {
    display: grid;
    grid-template-columns: 1fr 1fr auto;
    align-items: start;
    gap: 0.625rem;
    margin-bottom: 0.5rem;
}

/* Buttons */
.cq-btn[b-gxeb7xel1o] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    padding: 0.5rem 1.25rem;
    border-radius: 0.5rem;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    border: none;
    transition: background 0.15s, box-shadow 0.15s;
    white-space: nowrap;
}

.cq-btn:disabled[b-gxeb7xel1o] {
    opacity: 0.5;
    cursor: not-allowed;
}

.cq-btn-primary[b-gxeb7xel1o] {
    background: var(--color-primary, #4f46e5);
    color: #fff;
}

.cq-btn-primary:hover:not(:disabled)[b-gxeb7xel1o] {
    background: var(--color-primary-dark, #4338ca);
    box-shadow: 0 2px 6px rgba(79, 70, 229, 0.35);
}

.cq-btn-ghost[b-gxeb7xel1o] {
    background: transparent;
    color: var(--color-text-secondary, #6b7280);
    border: 1px solid var(--color-border, #d1d5db);
}

.cq-btn-ghost:hover:not(:disabled)[b-gxeb7xel1o] {
    background: var(--color-surface-secondary, #f3f4f6);
}

.cq-btn-outline[b-gxeb7xel1o] {
    background: transparent;
    color: var(--color-primary, #4f46e5);
    border: 1px dashed var(--color-primary, #4f46e5);
    padding: 0.375rem 0.875rem;
    font-size: 0.8125rem;
    margin-top: 0.375rem;
}

.cq-btn-outline:hover:not(:disabled)[b-gxeb7xel1o] {
    background: rgba(79, 70, 229, 0.06);
}

.cq-btn-icon[b-gxeb7xel1o] {
    width: 2rem;
    height: 2rem;
    padding: 0;
    border-radius: 0.375rem;
    font-size: 0.875rem;
    flex-shrink: 0;
}

.cq-btn-danger[b-gxeb7xel1o] {
    background: #fef2f2;
    color: #dc2626;
    border: 1px solid #fecaca;
}

.cq-btn-danger:hover:not(:disabled)[b-gxeb7xel1o] {
    background: #fee2e2;
}

/* Accordion */
.cq-accordion-toggle[b-gxeb7xel1o] {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-primary, #4f46e5);
    padding: 0;
    display: flex;
    align-items: center;
    gap: 0.375rem;
    width: 100%;
    text-align: left;
}

.cq-mt[b-gxeb7xel1o] { margin-top: 1rem; }

/* Preview card */
.cq-preview[b-gxeb7xel1o] {
    border-color: var(--color-primary-light, #c7d2fe);
    background: var(--color-surface-accent, #fafafe);
}

/* Footer actions */
.cq-footer[b-gxeb7xel1o] {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    padding: 1rem 0 2rem;
}

@media (max-width: 480px) {
    .cq-footer[b-gxeb7xel1o] {
        flex-direction: column-reverse;
    }

    .cq-footer .cq-btn[b-gxeb7xel1o] {
        width: 100%;
    }

    .cq-option-row[b-gxeb7xel1o] {
        grid-template-columns: auto 1fr auto;
    }

    .cq-match-row[b-gxeb7xel1o],
    .cq-match-header[b-gxeb7xel1o] {
        grid-template-columns: 1fr;
    }

    .cq-match-row button[b-gxeb7xel1o] {
        width: 100%;
    }
}
/* /Pages/Teacher/Questions/ImportFromJson.razor.rz.scp.css */
/* Styles handled via Tailwind utility classes in markup */
/* /Pages/Teacher/Questions/Preview.razor.rz.scp.css */
/* Styles handled via Tailwind utility classes in markup */
/* /Pages/Teacher/ReportCard/Index.razor.rz.scp.css */
/* =========================================================
   Report Cards Page — co-located styles (full redesign)
   ========================================================= */

/* ── 1. Page wrapper ── */
.rc-page[b-qbgu4vlfnb] {
    min-height: 100%;
    background: #F8FAFC;
    font-size: 14px;
}

/* ── 2. Header – bleeds out of main-content's padding ── */
/* main-content padding is 24px (>=768px) and 16px (<768px); match it exactly
   so the header spans full width without overflowing the viewport. */
.rc-header[b-qbgu4vlfnb] {
    background: linear-gradient(135deg, #14382A 0%, #225143 50%, #2F6A5C 100%);
    color: #fff;
    margin: -24px -24px 0 -24px;
    padding: 0 24px;
}

.rc-header-inner[b-qbgu4vlfnb] {
    padding: 28px 0 32px;
}

.rc-header-content[b-qbgu4vlfnb] {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
}

/* ── 3. Main content ── */
.rc-content[b-qbgu4vlfnb] {
    padding: 24px 0 32px;
}

/* ── 4. Filters card ── */
.rc-filters-card[b-qbgu4vlfnb] {
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    border: 1px solid #E2E8F0;
    padding: 16px 20px;
    margin-bottom: 20px;
}

.rc-filters-row[b-qbgu4vlfnb] {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.rc-search-wrap[b-qbgu4vlfnb] {
    position: relative;
    flex: 1;
    min-width: 220px;
}

.rc-search-icon[b-qbgu4vlfnb] {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: #94A3B8;
    font-size: 14px;
    pointer-events: none;
}

.rc-search-input[b-qbgu4vlfnb] {
    width: 100%;
    height: 44px;
    padding: 0 16px 0 42px;
    border-radius: 12px;
    border: 1.5px solid #E2E8F0;
    font-size: 14px;
    color: #1E293B;
    background: #F8FAFC;
    outline: none;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
    transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
}

.rc-search-input:focus[b-qbgu4vlfnb] {
    border-color: #4A9B8E;
    background: #fff;
    box-shadow: 0 0 0 3px rgba(74, 155, 142, 0.15);
}

.rc-search-input[b-qbgu4vlfnb]::placeholder {
    color: #94A3B8;
}

.rc-select[b-qbgu4vlfnb] {
    height: 44px;
    padding: 0 36px 0 14px;
    border-radius: 12px;
    border: 1.5px solid #E2E8F0;
    font-size: 14px;
    color: #1E293B;
    background: #F8FAFC url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%2364748B' d='M6 8L0 0h12z'/%3E%3C/svg%3E") no-repeat right 12px center;
    -webkit-appearance: none;
    appearance: none;
    cursor: pointer;
    outline: none;
    min-width: 160px;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.rc-select:focus[b-qbgu4vlfnb] {
    border-color: #4A9B8E;
    background-color: #fff;
    box-shadow: 0 0 0 3px rgba(74, 155, 142, 0.15);
}

/* ── 5. Count bar ── */
.rc-count-bar[b-qbgu4vlfnb] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}

.rc-count-text[b-qbgu4vlfnb] {
    font-size: 13px;
    color: #64748B;
}

.rc-count-text strong[b-qbgu4vlfnb] {
    color: #1E293B;
    font-weight: 600;
}

/* ── 6. Table card ── */
.rc-table-card[b-qbgu4vlfnb] {
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    border: 1px solid #E2E8F0;
    overflow: hidden;
}

.rc-table-scroll[b-qbgu4vlfnb] {
    overflow-x: auto;
}

.rc-table[b-qbgu4vlfnb] {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

/* Table header */
.rc-table thead tr[b-qbgu4vlfnb] {
    background: #F8FAFC;
    border-bottom: 2px solid #E8EDF3;
}

.rc-th[b-qbgu4vlfnb] {
    padding: 13px 20px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #64748B;
    text-align: left;
    white-space: nowrap;
}

.rc-th-center[b-qbgu4vlfnb] {
    text-align: center;
}

/* Table rows */
.rc-tr[b-qbgu4vlfnb] {
    border-bottom: 1px solid #F1F5F9;
    transition: background 0.1s;
}

.rc-tr:last-child[b-qbgu4vlfnb] {
    border-bottom: none;
}

.rc-tr:nth-child(even)[b-qbgu4vlfnb] {
    background: #F8FAFC;
}

.rc-tr:hover[b-qbgu4vlfnb] {
    background: #E6F7F4 !important;
}

.rc-td[b-qbgu4vlfnb] {
    padding: 14px 20px;
    vertical-align: middle;
}

.rc-td-num[b-qbgu4vlfnb] {
    color: #CBD5E1;
    font-size: 13px;
    font-weight: 600;
    width: 52px;
    padding-right: 0;
}

/* Student cell */
.rc-student-cell[b-qbgu4vlfnb] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.rc-avatar[b-qbgu4vlfnb] {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: linear-gradient(135deg, #4A9B8E 0%, #3D8275 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    flex-shrink: 0;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    box-shadow: 0 2px 6px rgba(74, 155, 142, 0.3);
}

.rc-student-name[b-qbgu4vlfnb] {
    font-weight: 600;
    font-size: 14px;
    color: #1E293B;
    line-height: 1.3;
}

.rc-student-meta[b-qbgu4vlfnb] {
    font-size: 12px;
    color: #94A3B8;
    margin-top: 2px;
}

.rc-admission-no[b-qbgu4vlfnb] {
    font-size: 13px;
    color: #475569;
    font-family: ui-monospace, 'SFMono-Regular', Menlo, Monaco, Consolas, monospace;
    letter-spacing: 0.02em;
}

.rc-class-badge[b-qbgu4vlfnb] {
    display: inline-flex;
    align-items: center;
    padding: 4px 11px;
    background: #E6F7F4;
    color: #2F6A5C;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}

.rc-td-action[b-qbgu4vlfnb] {
    text-align: center;
    white-space: nowrap;
}

/* ── 7. Grade Card button ── */
.rc-btn-grade-card[b-qbgu4vlfnb] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 36px;
    padding: 0 16px;
    background: linear-gradient(135deg, #4A9B8E 0%, #3D8275 100%);
    color: #fff;
    border: none;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(74, 155, 142, 0.28);
    transition: box-shadow 0.15s, transform 0.12s, background 0.15s;
    white-space: nowrap;
}

.rc-btn-grade-card:hover:not(:disabled)[b-qbgu4vlfnb] {
    background: linear-gradient(135deg, #3D8275 0%, #2F6A5C 100%);
    box-shadow: 0 4px 14px rgba(61, 130, 117, 0.4);
    transform: translateY(-1px);
}

.rc-btn-grade-card:active:not(:disabled)[b-qbgu4vlfnb] {
    transform: translateY(0);
    box-shadow: 0 1px 4px rgba(61, 130, 117, 0.25);
}

.rc-btn-grade-card:disabled[b-qbgu4vlfnb] {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

/* ── 8. Pagination ── */
.rc-pagination[b-qbgu4vlfnb] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 20px;
    border-top: 1px solid #F1F5F9;
    background: #FAFBFC;
}

.rc-pagination-info[b-qbgu4vlfnb] {
    font-size: 13px;
    color: #64748B;
}

.rc-pagination-info strong[b-qbgu4vlfnb] {
    color: #1E293B;
    font-weight: 600;
}

.rc-pagination-btns[b-qbgu4vlfnb] {
    display: flex;
    align-items: center;
    gap: 6px;
}

.rc-page-btn[b-qbgu4vlfnb] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 9px;
    border: 1.5px solid #E2E8F0;
    background: #fff;
    color: #475569;
    font-size: 13px;
    cursor: pointer;
    transition: background 0.12s, border-color 0.12s, color 0.12s;
}

.rc-page-btn:hover:not(:disabled)[b-qbgu4vlfnb] {
    background: #E6F7F4;
    border-color: #4A9B8E;
    color: #2F6A5C;
}

.rc-page-btn:disabled[b-qbgu4vlfnb] {
    opacity: 0.35;
    cursor: not-allowed;
}

/* ── 9. Empty & loading states ── */
.rc-empty-state[b-qbgu4vlfnb] {
    padding: 64px 24px;
    text-align: center;
}

.rc-empty-icon[b-qbgu4vlfnb] {
    width: 64px;
    height: 64px;
    background: #F1F5F9;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 16px;
    font-size: 24px;
    color: #94A3B8;
}

/* ── 10. Toast notification ── */
.toast-notification[b-qbgu4vlfnb] {
    position: fixed;
    bottom: 1.5rem;
    right: 1.5rem;
    z-index: 9999;
    display: flex;
    align-items: center;
    padding: 14px 20px;
    border-radius: 14px;
    font-size: 14px;
    font-weight: 500;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
    animation: slideInToast-b-qbgu4vlfnb 0.3s ease-out;
    max-width: 400px;
}

.toast-success[b-qbgu4vlfnb] {
    background-color: #ecfdf5;
    color: #065f46;
    border: 1px solid #a7f3d0;
}

.toast-error[b-qbgu4vlfnb] {
    background-color: #fef2f2;
    color: #991b1b;
    border: 1px solid #fecaca;
}

@keyframes slideInToast-b-qbgu4vlfnb {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ── 11. Avatar initials ── */
.avatar-initials[b-qbgu4vlfnb] {
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

/* ── 14. Co-Scholastic row card inside modal ── */
.co-row-card[b-qbgu4vlfnb] {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 10px 12px;
}

.co-row-card + .co-row-card[b-qbgu4vlfnb] {
    margin-top: 6px;
}

/* =========================================================
   Generate Grade Card Modal  (gcm-*)
   ========================================================= */

/* ── Overlay ── */
.gcm-overlay[b-qbgu4vlfnb] {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: rgba(15, 23, 42, 0.6);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

/* ── Dialog ── */
.gcm-dialog[b-qbgu4vlfnb] {
    background: #fff;
    border-radius: 20px;
    width: 100%;
    max-width: 620px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    box-shadow:
        0 4px 16px rgba(0, 0, 0, 0.06),
        0 12px 32px rgba(0, 0, 0, 0.10),
        0 24px 56px rgba(0, 0, 0, 0.14);
    overflow: hidden;
}

/* ── Header ── */
.gcm-header[b-qbgu4vlfnb] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px;
    border-bottom: 1px solid #F1F5F9;
    flex-shrink: 0;
    gap: 12px;
}

.gcm-header-identity[b-qbgu4vlfnb] {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
}

.gcm-avatar[b-qbgu4vlfnb] {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: linear-gradient(135deg, #4A9B8E 0%, #3D8275 100%);
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    box-shadow: 0 2px 8px rgba(74, 155, 142, 0.3);
}

.gcm-title[b-qbgu4vlfnb] {
    font-size: 16px;
    font-weight: 700;
    color: #0F172A;
    line-height: 1.2;
    margin: 0;
}

.gcm-subtitle[b-qbgu4vlfnb] {
    font-size: 13px;
    color: #64748B;
    margin: 3px 0 0;
    font-weight: 500;
}

.gcm-close[b-qbgu4vlfnb] {
    width: 34px;
    height: 34px;
    border-radius: 9px;
    border: 1.5px solid #E2E8F0;
    background: transparent;
    color: #64748B;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    font-size: 14px;
    transition: background 0.12s, border-color 0.12s, color 0.12s;
}

.gcm-close:hover[b-qbgu4vlfnb] {
    background: #FEF2F2;
    border-color: #FCA5A5;
    color: #DC2626;
}

/* ── Alerts ── */
.gcm-alert[b-qbgu4vlfnb] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin: 16px 24px 0;
    padding: 12px 16px;
    border-radius: 12px;
    border: 1px solid;
    flex-shrink: 0;
}

.gcm-alert-error[b-qbgu4vlfnb] {
    background: #FEF2F2;
    border-color: #FCA5A5;
    border-left: 4px solid #DC2626;
}

.gcm-alert-warn[b-qbgu4vlfnb] {
    background: #FFFBEB;
    border-color: #FCD34D;
    border-left: 4px solid #F59E0B;
}

.gcm-alert-icon[b-qbgu4vlfnb] {
    flex-shrink: 0;
    font-size: 16px;
    margin-top: 1px;
}

.gcm-alert-error .gcm-alert-icon[b-qbgu4vlfnb] { color: #DC2626; }
.gcm-alert-warn .gcm-alert-icon[b-qbgu4vlfnb]  { color: #D97706; }

.gcm-alert-title[b-qbgu4vlfnb] {
    font-size: 13px;
    font-weight: 700;
    margin: 0 0 2px;
}

.gcm-alert-error .gcm-alert-title[b-qbgu4vlfnb] { color: #991B1B; }
.gcm-alert-warn .gcm-alert-title[b-qbgu4vlfnb]  { color: #92400E; }

.gcm-alert-text[b-qbgu4vlfnb] {
    font-size: 12px;
    margin: 0;
    line-height: 1.5;
}

.gcm-alert-error .gcm-alert-text[b-qbgu4vlfnb] { color: #B91C1C; }
.gcm-alert-warn .gcm-alert-text[b-qbgu4vlfnb]  { color: #B45309; }

/* ── Scrollable body ── */
.gcm-body[b-qbgu4vlfnb] {
    flex: 1;
    overflow-y: auto;
    padding: 20px 24px 8px;
    display: flex;
    flex-direction: column;
    gap: 0;
}

.gcm-body[b-qbgu4vlfnb]::-webkit-scrollbar { width: 5px; }
.gcm-body[b-qbgu4vlfnb]::-webkit-scrollbar-track { background: transparent; }
.gcm-body[b-qbgu4vlfnb]::-webkit-scrollbar-thumb { background: #CBD5E1; border-radius: 4px; }

/* ── Sections ── */
.gcm-section[b-qbgu4vlfnb] {
    padding-bottom: 20px;
    margin-bottom: 20px;
    border-bottom: 1px solid #F1F5F9;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.gcm-section:last-of-type[b-qbgu4vlfnb] {
    border-bottom: none;
}

.gcm-section-label[b-qbgu4vlfnb] {
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: #94A3B8;
    margin: 0;
}

.gcm-section-label-note[b-qbgu4vlfnb] {
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
    color: #CBD5E1;
    font-size: 10.5px;
}

/* ── Fields ── */
.gcm-field[b-qbgu4vlfnb] {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.gcm-label[b-qbgu4vlfnb] {
    font-size: 13px;
    font-weight: 600;
    color: #374151;
}

.gcm-label-xs[b-qbgu4vlfnb] {
    font-size: 11px;
    font-weight: 600;
    color: #64748B;
}

.gcm-helper[b-qbgu4vlfnb] {
    font-size: 11.5px;
    color: #94A3B8;
    line-height: 1.4;
}

/* ── Inputs / selects / textareas ── */
.gcm-input[b-qbgu4vlfnb],
.gcm-select[b-qbgu4vlfnb],
.gcm-textarea[b-qbgu4vlfnb] {
    width: 100%;
    border-radius: 12px;
    border: 1.5px solid #E2E8F0;
    background: #FAFAFC;
    color: #0F172A;
    font-size: 14px;
    outline: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
    font-family: inherit;
}

.gcm-input[b-qbgu4vlfnb] { height: 44px; padding: 0 14px; }

.gcm-select[b-qbgu4vlfnb] {
    height: 44px;
    padding: 0 36px 0 14px;
    -webkit-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%2364748B' d='M6 8L0 0h12z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    cursor: pointer;
}

.gcm-textarea[b-qbgu4vlfnb] {
    padding: 12px 14px;
    min-height: 110px;
    resize: vertical;
    line-height: 1.6;
}

.gcm-textarea-sm[b-qbgu4vlfnb] { min-height: 80px; }

.gcm-input-sm[b-qbgu4vlfnb] { height: 38px; font-size: 13px; border-radius: 9px; }
.gcm-select-sm[b-qbgu4vlfnb] { height: 38px; font-size: 13px; border-radius: 9px; }

.gcm-input:focus[b-qbgu4vlfnb],
.gcm-select:focus[b-qbgu4vlfnb],
.gcm-textarea:focus[b-qbgu4vlfnb] {
    border-color: #4A9B8E;
    background: #fff;
    box-shadow: 0 0 0 4px rgba(74, 155, 142, 0.15);
}

.gcm-input[b-qbgu4vlfnb]::placeholder,
.gcm-textarea[b-qbgu4vlfnb]::placeholder {
    color: #A0ABBA;
}

/* ── Co-Scholastic block ── */
.gcm-coscho-block[b-qbgu4vlfnb] {
    border: 1.5px solid #B3E8DE;
    border-radius: 14px;
    background: #F8FAFC;
    overflow: hidden;
    margin-bottom: 8px;
}

.gcm-coscho-toggle[b-qbgu4vlfnb] {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    background: transparent;
    border: none;
    cursor: pointer;
    text-align: left;
    gap: 8px;
}

.gcm-coscho-toggle:hover[b-qbgu4vlfnb] {
    background: #E6F7F4;
}

.gcm-coscho-toggle-left[b-qbgu4vlfnb] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 600;
    color: #225143;
}

.gcm-coscho-chevron[b-qbgu4vlfnb] {
    font-size: 11px;
    color: #2F6A5C;
    transition: transform 0.2s ease;
    width: 12px;
}

.gcm-coscho-badge-part[b-qbgu4vlfnb] {
    font-size: 10px;
    font-weight: 600;
    background: #E6F7F4;
    color: #2F6A5C;
    padding: 2px 7px;
    border-radius: 5px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.gcm-coscho-count[b-qbgu4vlfnb] {
    min-width: 20px;
    height: 20px;
    background: #3D8275;
    color: #fff;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 5px;
}

.gcm-coscho-add[b-qbgu4vlfnb] {
    font-size: 12px;
    font-weight: 600;
    color: #2F6A5C;
    background: #E6F7F4;
    border: none;
    padding: 5px 10px;
    border-radius: 7px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 5px;
    flex-shrink: 0;
    transition: background 0.12s;
}

.gcm-coscho-add:hover[b-qbgu4vlfnb] { background: #B3E8DE; }

.gcm-coscho-body[b-qbgu4vlfnb] {
    padding: 0 16px 16px;
    border-top: 1px solid #B3E8DE;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.gcm-coscho-empty[b-qbgu4vlfnb] {
    font-size: 12px;
    color: #94A3B8;
    font-style: italic;
    padding: 12px 0 4px;
    margin: 0;
}

.gcm-co-row[b-qbgu4vlfnb] {
    background: #fff;
    border: 1.5px solid #B3E8DE;
    border-radius: 11px;
    padding: 12px 14px;
    margin-top: 10px;
}

.gcm-co-row-grid[b-qbgu4vlfnb] {
    display: grid;
    grid-template-columns: 1fr 1fr 120px auto;
    gap: 10px;
    align-items: end;
}

.gcm-co-remove[b-qbgu4vlfnb] {
    width: 34px;
    height: 38px;
    border-radius: 9px;
    border: 1.5px solid #FECACA;
    background: #FFF5F5;
    color: #EF4444;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    transition: background 0.12s, border-color 0.12s;
    flex-shrink: 0;
}

.gcm-co-remove:hover[b-qbgu4vlfnb] { background: #FEE2E2; border-color: #F87171; }

.gcm-coscho-save[b-qbgu4vlfnb] {
    display: flex;
    align-items: center;
    gap: 7px;
    justify-content: center;
    width: 100%;
    height: 38px;
    border-radius: 10px;
    border: none;
    background: #E6F7F4;
    color: #2F6A5C;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    margin-top: 6px;
    transition: background 0.12s;
}

.gcm-coscho-save:hover:not(:disabled)[b-qbgu4vlfnb] { background: #B3E8DE; }
.gcm-coscho-save:disabled[b-qbgu4vlfnb] { opacity: 0.5; cursor: not-allowed; }

/* ── Footer ── */
.gcm-footer[b-qbgu4vlfnb] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 16px 24px;
    border-top: 1px solid #F1F5F9;
    background: #FAFBFC;
    border-radius: 0 0 20px 20px;
    flex-shrink: 0;
    flex-wrap: wrap;
}

.gcm-footer-actions[b-qbgu4vlfnb] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

/* Cancel — ghost */
.gcm-btn-cancel[b-qbgu4vlfnb] {
    height: 40px;
    padding: 0 16px;
    border-radius: 10px;
    border: none;
    background: transparent;
    color: #64748B;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: color 0.12s, background 0.12s;
}

.gcm-btn-cancel:hover:not(:disabled)[b-qbgu4vlfnb] { background: #F1F5F9; color: #334155; }
.gcm-btn-cancel:disabled[b-qbgu4vlfnb] { opacity: 0.45; cursor: not-allowed; }

/* Download PDF — neutral outlined */
.gcm-btn-tertiary[b-qbgu4vlfnb] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 40px;
    padding: 0 14px;
    border-radius: 10px;
    border: 1.5px solid #CBD5E1;
    background: #fff;
    color: #475569;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: border-color 0.12s, background 0.12s, color 0.12s;
}

.gcm-btn-tertiary:hover:not(:disabled)[b-qbgu4vlfnb] { border-color: #94A3B8; background: #F8FAFC; color: #334155; }
.gcm-btn-tertiary:disabled[b-qbgu4vlfnb] { opacity: 0.45; cursor: not-allowed; }

/* Preview — dark outlined */
.gcm-btn-secondary[b-qbgu4vlfnb] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 40px;
    padding: 0 14px;
    border-radius: 10px;
    border: 1.5px solid #334155;
    background: #fff;
    color: #1E293B;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.12s, color 0.12s;
}

.gcm-btn-secondary:hover:not(:disabled)[b-qbgu4vlfnb] { background: #0F172A; color: #fff; }
.gcm-btn-secondary:disabled[b-qbgu4vlfnb] { opacity: 0.45; cursor: not-allowed; }

/* Send to Parent — primary teal */
.gcm-btn-primary[b-qbgu4vlfnb] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 40px;
    padding: 0 20px;
    border-radius: 10px;
    border: none;
    background: linear-gradient(135deg, #4A9B8E 0%, #3D8275 100%);
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 2px 10px rgba(74, 155, 142, 0.35);
    transition: box-shadow 0.15s, transform 0.12s, background 0.15s;
}

.gcm-btn-primary:hover:not(:disabled)[b-qbgu4vlfnb] {
    background: linear-gradient(135deg, #3D8275 0%, #2F6A5C 100%);
    box-shadow: 0 4px 16px rgba(61, 130, 117, 0.45);
    transform: translateY(-1px);
}

.gcm-btn-primary:active:not(:disabled)[b-qbgu4vlfnb] {
    transform: translateY(0);
    box-shadow: 0 1px 6px rgba(61, 130, 117, 0.3);
}

.gcm-btn-primary:disabled[b-qbgu4vlfnb] { opacity: 0.5; cursor: not-allowed; transform: none; }

/* ── Responsive ── */
@media (max-width: 639px) {
    .gcm-dialog[b-qbgu4vlfnb] {
        max-width: 100%;
        max-height: 100%;
        border-radius: 20px 20px 0 0;
        align-self: flex-end;
    }

    .gcm-overlay[b-qbgu4vlfnb] {
        align-items: flex-end;
        padding: 0;
    }

    .gcm-co-row-grid[b-qbgu4vlfnb] {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto auto;
    }

    .gcm-co-remove[b-qbgu4vlfnb] {
        grid-column: 2;
        justify-self: end;
    }

    .gcm-footer[b-qbgu4vlfnb] {
        border-radius: 0;
    }

    .gcm-footer-actions[b-qbgu4vlfnb] {
        width: 100%;
        justify-content: flex-end;
    }
}

/* ── 13. Responsive ── */
@media (max-width: 1023px) {
    .rc-header[b-qbgu4vlfnb] {
        padding: 0 24px;
    }
}

@media (max-width: 767px) {
    /* main-content padding is 16px on mobile; match it so the header is full-bleed
       without overflowing the viewport. */
    .rc-header[b-qbgu4vlfnb] {
        margin: -16px -16px 0 -16px;
        padding: 0 16px;
    }

    .rc-filters-row[b-qbgu4vlfnb] {
        flex-direction: column;
        align-items: stretch;
    }

    .rc-search-wrap[b-qbgu4vlfnb] {
        min-width: unset;
    }

    .rc-select[b-qbgu4vlfnb] {
        min-width: unset;
        width: 100%;
    }
}
/* /Pages/Teacher/Settings/GradingScales.razor.rz.scp.css */
/* =========================================================
   GradingScales page — co-located styles
   ========================================================= */

.page-wrap[b-zusfwpyend] {
    min-height: 100vh;
    background: linear-gradient(135deg, #F8FAFC 0%, #E6F7F4 100%);
}

/* ── Header ── */
.page-header[b-zusfwpyend] {
    background: linear-gradient(to right, #14382A, #225143, #14382A);
    color: #fff;
    padding: 1.25rem 0 1rem;
}

.page-header-inner[b-zusfwpyend] {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1.5rem;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}

.breadcrumb[b-zusfwpyend] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.75rem;
    color: #94a3b8;
    margin-bottom: 0.5rem;
}

.breadcrumb a[b-zusfwpyend] { color: #94a3b8; text-decoration: none; }
.breadcrumb a:hover[b-zusfwpyend] { color: #fff; }
.breadcrumb .active[b-zusfwpyend] { color: #fff; font-weight: 500; }
.breadcrumb .fas[b-zusfwpyend] { font-size: 0.6rem; }

.page-title[b-zusfwpyend] {
    font-size: 1.5rem;
    font-weight: 700;
    color: #fff;
    display: flex;
    align-items: center;
    gap: 0.625rem;
    margin: 0;
}

.title-icon[b-zusfwpyend] {
    width: 2.25rem;
    height: 2.25rem;
    background: #3D8275;
    border-radius: 0.625rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.page-sub[b-zusfwpyend] { color: #94a3b8; font-size: 0.85rem; margin-top: 0.25rem; }

.header-actions[b-zusfwpyend] { display: flex; align-items: center; gap: 0.5rem; flex-shrink: 0; padding-top: 0.25rem; }

/* ── Content ── */
.content-area[b-zusfwpyend] {
    max-width: 1200px;
    margin: 1.5rem auto;
    padding: 0 1.5rem;
}

/* ── Info Banner ── */
.info-banner[b-zusfwpyend] {
    display: flex;
    align-items: flex-start;
    gap: 0.625rem;
    background: #E6F7F4;
    border: 1px solid #B3E8DE;
    border-radius: 0.75rem;
    padding: 0.75rem 1rem;
    font-size: 0.8rem;
    color: #225143;
    margin-bottom: 1rem;
}

.info-banner .fas[b-zusfwpyend] { color: #3D8275; flex-shrink: 0; margin-top: 0.1rem; }

/* ── Table Card ── */
.table-card[b-zusfwpyend] {
    background: #fff;
    border-radius: 1rem;
    border: 1px solid #e2e8f0;
    box-shadow: 0 1px 4px rgba(0,0,0,.04);
    /* Allow the wide scale table to scroll inside the card on small screens
       (keeps rounded corners clipped) instead of clipping columns off-screen. */
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
}

.gs-table[b-zusfwpyend] {
    /* min-width keeps all columns visible; the card scrolls horizontally on mobile. */
    width: 100%;
    min-width: 560px;
    border-collapse: collapse;
    font-size: 0.82rem;
}

.gs-table thead tr[b-zusfwpyend] {
    background: #f8fafc;
    border-bottom: 1px solid #e2e8f0;
}

.gs-table th[b-zusfwpyend] {
    padding: 0.75rem 1rem;
    text-align: left;
    font-weight: 600;
    color: #475569;
    font-size: 0.76rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.gs-table tbody tr[b-zusfwpyend] {
    border-bottom: 1px solid #f1f5f9;
}

.gs-table tbody tr:last-child[b-zusfwpyend] { border-bottom: none; }

.gs-table tbody tr:hover td[b-zusfwpyend] { background: #fafbfc; }

.gs-table td[b-zusfwpyend] {
    padding: 0.625rem 1rem;
    vertical-align: middle;
    color: #374151;
}

.grade-badge[b-zusfwpyend] {
    display: inline-block;
    padding: 0.25rem 0.625rem;
    background: #E6F7F4;
    color: #2F6A5C;
    border-radius: 0.375rem;
    font-weight: 800;
    font-size: 0.8rem;
    letter-spacing: 0.04em;
}

.type-badge[b-zusfwpyend] {
    display: inline-block;
    padding: 0.15rem 0.5rem;
    background: #FFF8E5;
    color: #CC8400;
    border-radius: 0.3rem;
    font-size: 0.72rem;
    font-weight: 600;
}

.range-cell[b-zusfwpyend] { font-family: 'Courier New', monospace; font-size: 0.8rem; font-weight: 600; color: #1E293B; }
.desc-cell[b-zusfwpyend]  { color: #64748b; font-size: 0.78rem; }
.actions-cell[b-zusfwpyend] { white-space: nowrap; text-align: right; }

/* ── Mobile card (Grading Scales collapses to cards < 768px) ── */
.gs-card[b-zusfwpyend] {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 0.75rem;
    box-shadow: 0 1px 4px rgba(0,0,0,.04);
    padding: 1rem;
}
.gs-card .range-cell[b-zusfwpyend] { font-size: 0.9rem; }

/* ── Buttons ── */
.btn[b-zusfwpyend] {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.5rem 1rem;
    border-radius: 0.625rem;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    border: none;
    transition: all 0.15s;
}

.btn:disabled[b-zusfwpyend] { opacity: 0.5; cursor: not-allowed; }
.btn-primary[b-zusfwpyend]  { background: #4A9B8E; color: #fff; }
.btn-primary:not(:disabled):hover[b-zusfwpyend] { background: #3D8275; }
.btn-outline[b-zusfwpyend]  { background: transparent; color: #374151; border: 1px solid #d1d5db; }
.btn-outline:not(:disabled):hover[b-zusfwpyend] { background: #f9fafb; }
.btn-danger[b-zusfwpyend]   { background: #dc2626; color: #fff; }
.btn-danger:not(:disabled):hover[b-zusfwpyend] { background: #b91c1c; }
.btn-sm[b-zusfwpyend]       { padding: 0.375rem 0.75rem; font-size: 0.75rem; }

.btn-icon[b-zusfwpyend] {
    width: 1.875rem;
    height: 1.875rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 0.375rem;
    background: #f1f5f9;
    color: #475569;
    cursor: pointer;
    transition: all 0.15s;
    font-size: 0.7rem;
    margin-left: 0.25rem;
}

.btn-icon:hover[b-zusfwpyend] { background: #e2e8f0; color: #1e293b; }
.btn-icon-danger:hover[b-zusfwpyend] { background: #fee2e2; color: #dc2626; }

/* ── Loading / Error / Empty ── */
.loading-box[b-zusfwpyend] { background: #fff; border-radius: 1rem; border: 1px solid #e2e8f0; padding: 3rem; text-align: center; }

.error-box[b-zusfwpyend] {
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: 1rem;
    padding: 1.5rem;
    text-align: center;
    color: #991b1b;
}

.error-box .fas[b-zusfwpyend] { font-size: 1.5rem; margin-bottom: 0.5rem; display: block; }

.empty-state[b-zusfwpyend] {
    padding: 3rem;
    text-align: center;
    color: #94a3b8;
}

.empty-state .fas[b-zusfwpyend] { font-size: 2rem; margin-bottom: 0.75rem; display: block; }
.empty-state p[b-zusfwpyend]    { font-weight: 600; font-size: 0.95rem; margin: 0; }
.empty-sub[b-zusfwpyend]        { font-weight: 400 !important; font-size: 0.8rem !important; margin-top: 0.25rem !important; }

/* ── Modal ── */
.modal-backdrop[b-zusfwpyend] {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.4);
    backdrop-filter: blur(3px);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

.modal-box[b-zusfwpyend] {
    background: #fff;
    border-radius: 1rem;
    box-shadow: 0 20px 60px rgba(0,0,0,.15);
    width: 100%;
    max-width: 520px;
}

.modal-sm[b-zusfwpyend] { max-width: 380px; }

.modal-hdr[b-zusfwpyend] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem 0.75rem;
    border-bottom: 1px solid #e2e8f0;
}

.modal-hdr h2[b-zusfwpyend] { font-size: 1rem; font-weight: 700; color: #1e293b; margin: 0; }

.modal-close[b-zusfwpyend] {
    width: 1.75rem;
    height: 1.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent;
    color: #94a3b8;
    border-radius: 50%;
    cursor: pointer;
    font-size: 0.8rem;
}

.modal-close:hover[b-zusfwpyend] { background: #f1f5f9; color: #374151; }

.modal-body[b-zusfwpyend] { padding: 1rem 1.25rem; }
.modal-ftr[b-zusfwpyend]  { display: flex; align-items: center; justify-content: flex-end; gap: 0.625rem; padding: 0.75rem 1.25rem; background: #f8fafc; border-top: 1px solid #e2e8f0; border-radius: 0 0 1rem 1rem; }

/* ── Form ── */
.form-row[b-zusfwpyend]     { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 0.75rem; margin-bottom: 0.75rem; }
.form-group[b-zusfwpyend]   { display: flex; flex-direction: column; gap: 0.25rem; margin-bottom: 0.75rem; }
.form-group label[b-zusfwpyend] { font-size: 0.78rem; font-weight: 600; color: #374151; }
.req[b-zusfwpyend]          { color: #dc2626; }
.form-input[b-zusfwpyend]   { padding: 0.5rem 0.75rem; border: 1px solid #d1d5db; border-radius: 0.5rem; font-size: 0.82rem; outline: none; transition: border 0.15s; }
.form-input:focus[b-zusfwpyend] { border-color: #4A9B8E; box-shadow: 0 0 0 3px rgba(74,155,142,.15); }
.form-error[b-zusfwpyend]   { font-size: 0.78rem; color: #dc2626; font-weight: 500; }

/* ── Toast ── */
.toast[b-zusfwpyend] {
    position: fixed;
    bottom: 1.5rem;
    right: 1.5rem;
    z-index: 9999;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.125rem;
    border-radius: 0.75rem;
    font-size: 0.82rem;
    font-weight: 500;
    box-shadow: 0 8px 24px rgba(0,0,0,.12);
    animation: toastIn-b-zusfwpyend 0.25s ease-out;
}

.toast-ok[b-zusfwpyend]  { background: #ecfdf5; color: #065f46; border: 1px solid #a7f3d0; }
.toast-err[b-zusfwpyend] { background: #fef2f2; color: #991b1b; border: 1px solid #fecaca; }

@keyframes toastIn-b-zusfwpyend { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
/* /Pages/Teacher/StudentLeaves.razor.rz.scp.css */
.status-badge[b-rq7d5vx1qb],
.leave-type-badge[b-rq7d5vx1qb] {
    display: inline-flex;
    align-items: center;
    padding: var(--spacing-1) var(--spacing-2);
    border-radius: var(--radius-full);
    font-size: var(--font-size-xs);
    font-weight: 600;
}

.status-badge[b-rq7d5vx1qb] {
    text-transform: uppercase;
}

.leave-type-badge[b-rq7d5vx1qb] {
    background-color: var(--color-teal-50);
    color: var(--color-teal-700);
}

.status-pendingclassteacher[b-rq7d5vx1qb],
.status-pending[b-rq7d5vx1qb],
.status-pendingescalation[b-rq7d5vx1qb],
.status-needmoreinfo[b-rq7d5vx1qb] {
    background-color: var(--color-warning-100);
    color: var(--color-warning-800);
}

.status-approved[b-rq7d5vx1qb] {
    background-color: var(--color-success-100);
    color: var(--color-success-800);
}

.status-rejected[b-rq7d5vx1qb] {
    background-color: var(--color-error-100);
    color: var(--color-error-800);
}

.modal-overlay[b-rq7d5vx1qb] {
    position: fixed;
    inset: 0;
    z-index: 50;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-4);
    background: rgb(0 0 0 / 50%);
}

.modal-content[b-rq7d5vx1qb] {
    width: 100%;
    max-width: 32rem;
    max-height: 90vh;
    overflow-y: auto;
    background: var(--color-white);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xl);
}

.modal-header[b-rq7d5vx1qb],
.modal-footer[b-rq7d5vx1qb] {
    display: flex;
    align-items: center;
    padding: var(--spacing-4) var(--spacing-5);
    border-color: var(--color-neutral-200);
}

.modal-header[b-rq7d5vx1qb] {
    justify-content: space-between;
    border-bottom-width: 1px;
}

.modal-body[b-rq7d5vx1qb] {
    padding: var(--spacing-5);
}

.modal-footer[b-rq7d5vx1qb] {
    justify-content: flex-end;
    gap: var(--spacing-2);
    border-top-width: 1px;
}

.btn-secondary[b-rq7d5vx1qb],
.btn-primary[b-rq7d5vx1qb],
.btn-danger[b-rq7d5vx1qb] {
    min-height: 44px;
    padding: var(--spacing-2) var(--spacing-4);
    border-radius: var(--radius-md);
    font-size: var(--font-size-sm);
}

.btn-secondary[b-rq7d5vx1qb] {
    color: var(--color-neutral-700);
    background: var(--color-white);
    border: 1px solid var(--color-neutral-300);
}

.btn-primary[b-rq7d5vx1qb] {
    color: var(--color-white);
    background: var(--color-teal-600);
    font-weight: 500;
}

.btn-primary:hover[b-rq7d5vx1qb] {
    background: var(--color-teal-700);
}

.btn-danger[b-rq7d5vx1qb] {
    color: var(--color-white);
    background: var(--color-error-600);
    font-weight: 500;
}

.btn-danger:hover[b-rq7d5vx1qb] {
    background: var(--color-error-700);
}

.btn-primary:disabled[b-rq7d5vx1qb],
.btn-danger:disabled[b-rq7d5vx1qb] {
    cursor: not-allowed;
    opacity: 0.5;
}

.btn-close[b-rq7d5vx1qb] {
    min-width: 44px;
    min-height: 44px;
    color: var(--color-neutral-400);
    background: none;
    border: none;
    font-size: var(--font-size-xl);
    cursor: pointer;
}

.spinner[b-rq7d5vx1qb] {
    width: 1.75rem;
    height: 1.75rem;
    border: 3px solid var(--color-neutral-200);
    border-top-color: var(--color-teal-600);
    border-radius: var(--radius-full);
    animation: spin-b-rq7d5vx1qb 0.8s linear infinite;
}

@keyframes spin-b-rq7d5vx1qb {
    to { transform: rotate(360deg); }
}
/* /Pages/Teacher/Students/Enrollment.razor.rz.scp.css */
/* Styles handled via Tailwind utility classes in markup */
/* /Pages/Teacher/Students/Index.razor.rz.scp.css */
.student-stats-grid[b-zgw2wzc821] {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--spacing-3);
	margin-top: var(--spacing-5);
}

.student-stat-card[b-zgw2wzc821] {
	display: flex;
	align-items: center;
	gap: var(--spacing-3);
	min-width: 0;
	padding: var(--spacing-3) var(--spacing-4);
	border: 1px solid var(--stat-border);
	border-radius: var(--border-radius-md);
	background: var(--stat-surface);
	box-shadow: var(--shadow-sm);
}

.student-stat-icon[b-zgw2wzc821] {
	display: grid;
	place-items: center;
	width: var(--spacing-8);
	height: var(--spacing-8);
	flex: 0 0 var(--spacing-8);
	border-radius: var(--border-radius-sm);
	background: var(--stat-icon-surface);
	color: var(--stat-accent);
}

.student-stat-content[b-zgw2wzc821] {
	min-width: 0;
}

.student-stat-label[b-zgw2wzc821],
.student-stat-value[b-zgw2wzc821] {
	margin: 0;
}

.student-stat-label[b-zgw2wzc821] {
	color: var(--color-text-secondary);
	font-size: var(--font-size-xs);
	line-height: var(--line-height-tight);
}

.student-stat-value[b-zgw2wzc821] {
	margin-top: var(--spacing-1);
	color: var(--color-text-primary);
	font-size: var(--font-size-xl);
	font-weight: var(--font-weight-bold);
	line-height: var(--line-height-tight);
}

.student-stat-card--teal[b-zgw2wzc821] {
	--stat-surface: var(--color-teal-50);
	--stat-border: var(--color-teal-200);
	--stat-icon-surface: var(--color-teal-100);
	--stat-accent: var(--color-teal-700);
}

.student-stat-card--success[b-zgw2wzc821] {
	--stat-surface: var(--color-success-50);
	--stat-border: var(--color-success-200);
	--stat-icon-surface: var(--color-success-100);
	--stat-accent: var(--color-success-700);
}

.student-stat-card--neutral[b-zgw2wzc821] {
	--stat-surface: var(--color-neutral-50);
	--stat-border: var(--color-neutral-200);
	--stat-icon-surface: var(--color-neutral-100);
	--stat-accent: var(--color-neutral-700);
}

.student-stat-card--orange[b-zgw2wzc821] {
	--stat-surface: var(--color-orange-50);
	--stat-border: var(--color-orange-200);
	--stat-icon-surface: var(--color-orange-100);
	--stat-accent: var(--color-orange-700);
}

@media (min-width: 640px) {
	.student-stats-grid[b-zgw2wzc821] {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 1024px) {
	.student-stats-grid[b-zgw2wzc821] {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

/* Form controls for search bar and filter panel (design tokens only) */
.input-primary[b-zgw2wzc821] {
    width: 100%;
    padding: var(--spacing-3) var(--spacing-4);
    border: 1px solid var(--color-neutral-200);
    border-radius: var(--border-radius-md);
    background-color: var(--color-neutral-0);
    color: var(--color-neutral-800);
    font-size: var(--font-size-sm);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.input-primary:focus[b-zgw2wzc821] {
    outline: none;
    border-color: var(--color-teal-500);
    box-shadow: 0 0 0 3px var(--color-teal-50);
}

.input-primary[b-zgw2wzc821]::placeholder {
    color: var(--color-neutral-400);
}

.label[b-zgw2wzc821] {
    display: block;
    margin-bottom: var(--spacing-2);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-bold);
    color: var(--color-neutral-700);
}

.checkbox[b-zgw2wzc821] {
    width: 1rem;
    height: 1rem;
    accent-color: var(--color-teal-500);
    cursor: pointer;
}

.checkbox.accent-warning-500[b-zgw2wzc821] {
    accent-color: var(--color-warning-500);
}
/* /Pages/Teacher/Students/Profile.razor.rz.scp.css */
/* Styles handled via Tailwind utility classes in markup */
/* /Pages/Teacher/StudyGuide/Chapter.razor.rz.scp.css */
.tsgq-loading[b-w8g7ehagvh] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: 4rem 0;
    color: var(--color-neutral-500);
    font-size: 0.875rem;
}

.tsgq-spinner[b-w8g7ehagvh] {
    width: 36px;
    height: 36px;
    border: 3px solid var(--color-neutral-200);
    border-top-color: var(--color-primary-500);
    border-radius: 50%;
    animation: tsgq-spin-b-w8g7ehagvh 0.7s linear infinite;
}

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

.tsgq-page[b-w8g7ehagvh] {
    max-width: 860px;
    margin: 0 auto;
    padding: 1.5rem 1rem 3rem;
}

/* Breadcrumb */
.tsgq-breadcrumb[b-w8g7ehagvh] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-bottom: 1rem;
    font-size: 0.8rem;
}

.tsgq-back[b-w8g7ehagvh] {
    color: var(--color-primary-600);
    text-decoration: none;
    font-weight: 500;
    cursor: pointer;
}

.tsgq-back:hover[b-w8g7ehagvh] { text-decoration: underline; }

/* Chapter header */
.tsgq-header[b-w8g7ehagvh] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.25rem;
}

.tsgq-title[b-w8g7ehagvh] {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--color-neutral-900);
    margin: 0 0 0.2rem;
}

.tsgq-meta[b-w8g7ehagvh] {
    font-size: 0.8rem;
    color: var(--color-neutral-500);
    margin: 0;
}

.tsgq-teacher-badge[b-w8g7ehagvh] {
    flex-shrink: 0;
    display: inline-block;
    padding: 0.25rem 0.7rem;
    background: #dbeafe;
    color: #1d4ed8;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    white-space: nowrap;
}

/* Question list */
.tsgq-list[b-w8g7ehagvh] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

/* Load more */
.tsgq-load-more-wrap[b-w8g7ehagvh] {
    display: flex;
    justify-content: center;
    margin-top: 1.5rem;
}

/* Sticky type filter bar */
.tsgq-type-bar[b-w8g7ehagvh] {
    position: sticky;
    top: 0;
    z-index: 20;
    background: #fff;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding: 0.75rem 0;
    margin-bottom: 1rem;
    border-bottom: 1px solid var(--color-neutral-100);
}

.tsgq-type-chip[b-w8g7ehagvh] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.3rem 0.75rem;
    border: 1px solid var(--color-neutral-200);
    border-radius: 999px;
    background: #fff;
    color: var(--color-neutral-600);
    font-size: 0.78rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s;
    white-space: nowrap;
}

.tsgq-type-chip:hover[b-w8g7ehagvh] {
    border-color: var(--color-primary-400);
    color: var(--color-primary-600);
    background: var(--color-primary-50);
}

.tsgq-type-chip.active[b-w8g7ehagvh] {
    background: var(--color-primary-600);
    color: #fff;
    border-color: var(--color-primary-600);
}

.tsgq-type-count[b-w8g7ehagvh] {
    background: rgba(0,0,0,0.12);
    border-radius: 999px;
    padding: 0 0.4rem;
    font-size: 0.7rem;
    font-weight: 600;
    min-width: 18px;
    text-align: center;
}

.tsgq-type-chip.active .tsgq-type-count[b-w8g7ehagvh] {
    background: rgba(255,255,255,0.25);
}


.tsgq-load-more-btn[b-w8g7ehagvh] {
    padding: 0.6rem 1.5rem;
    border: 1px solid var(--color-primary-300);
    border-radius: 8px;
    background: #fff;
    color: var(--color-primary-600);
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s;
}

.tsgq-load-more-btn:hover[b-w8g7ehagvh] {
    background: var(--color-primary-50);
}

.tsgq-load-spinner[b-w8g7ehagvh] {
    width: 28px;
    height: 28px;
    border: 3px solid var(--color-neutral-200);
    border-top-color: var(--color-primary-500);
    border-radius: 50%;
    animation: tsgq-spin-b-w8g7ehagvh 0.7s linear infinite;
}

/* Error / empty */
.tsgq-error[b-w8g7ehagvh] {
    background: #fef2f2;
    border: 1px solid #fca5a5;
    border-radius: 8px;
    padding: 0.75rem 1rem;
    font-size: 0.875rem;
    color: #b91c1c;
    margin-bottom: 1rem;
}

.tsgq-empty[b-w8g7ehagvh] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: 3rem 1rem;
    text-align: center;
    color: var(--color-neutral-400);
}

.tsgq-empty-icon[b-w8g7ehagvh] { font-size: 2.5rem; }

.tsgq-empty p[b-w8g7ehagvh] {
    font-size: 0.875rem;
    max-width: 300px;
    line-height: 1.5;
    margin: 0;
}

.tsgq-back-link[b-w8g7ehagvh] {
    color: var(--color-primary-600);
    text-decoration: none;
    font-size: 0.875rem;
}
/* /Pages/Teacher/StudyGuide/Chapters.razor.rz.scp.css */
.tsgc-loading[b-u7ht548zy7] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: 4rem 0;
    color: var(--color-neutral-500);
    font-size: 0.875rem;
}

.tsgc-spinner[b-u7ht548zy7] {
    width: 36px;
    height: 36px;
    border: 3px solid var(--color-neutral-200);
    border-top-color: var(--color-primary-500);
    border-radius: 50%;
    animation: tsgc-spin-b-u7ht548zy7 0.7s linear infinite;
}

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

.tsgc-page[b-u7ht548zy7] {
    max-width: 860px;
    margin: 0 auto;
    padding: 1.5rem 1rem 3rem;
}

/* Breadcrumb */
.tsgc-breadcrumb[b-u7ht548zy7] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-bottom: 1rem;
    font-size: 0.8rem;
    color: var(--color-neutral-500);
}

.tsgc-back[b-u7ht548zy7] {
    color: var(--color-primary-600);
    text-decoration: none;
    font-weight: 500;
}

.tsgc-back:hover[b-u7ht548zy7] { text-decoration: underline; }

.tsgc-bc-sep[b-u7ht548zy7] { color: var(--color-neutral-300); }

.tsgc-bc-current[b-u7ht548zy7] {
    color: var(--color-neutral-700);
    font-weight: 500;
}

/* Subject header */
.tsgc-header[b-u7ht548zy7] {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    padding: 0.875rem 1rem;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 1px 4px rgba(0,0,0,.06);
    margin-bottom: 1.25rem;
}

.tsgc-header-icon[b-u7ht548zy7] {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    flex-shrink: 0;
}

.tsgc-title[b-u7ht548zy7] {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--color-neutral-900);
    margin: 0 0 0.2rem;
}

.tsgc-meta[b-u7ht548zy7] {
    font-size: 0.8rem;
    color: var(--color-neutral-500);
    margin: 0;
}

/* Chapter list */
.tsgc-list[b-u7ht548zy7] {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
}

/* Skeleton */
.tsgc-skeleton[b-u7ht548zy7] {
    height: 72px;
    border-radius: 12px;
    background: linear-gradient(90deg, #f1f5f9 25%, #e2e8f0 50%, #f1f5f9 75%);
    background-size: 200% 100%;
    animation: tsgc-shimmer-b-u7ht548zy7 1.2s infinite;
}

@keyframes tsgc-shimmer-b-u7ht548zy7 {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* Error / empty */
.tsgc-error[b-u7ht548zy7] {
    background: #fef2f2;
    border: 1px solid #fca5a5;
    border-radius: 8px;
    padding: 0.75rem 1rem;
    font-size: 0.875rem;
    color: #b91c1c;
    margin-bottom: 1rem;
}

.tsgc-empty[b-u7ht548zy7] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: 3rem 1rem;
    text-align: center;
    color: var(--color-neutral-400);
}

.tsgc-empty-icon[b-u7ht548zy7] { font-size: 2.5rem; }

.tsgc-empty p[b-u7ht548zy7] {
    font-size: 0.875rem;
    max-width: 300px;
    line-height: 1.5;
    margin: 0;
}
/* /Pages/Teacher/StudyGuide/Index.razor.rz.scp.css */
/* ─── Loading ────────────────────────────────────────────── */
.tsg-loading[b-pvayr96xid] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: 4rem 0;
    color: var(--color-neutral-500);
    font-size: 0.875rem;
}

.tsg-spinner[b-pvayr96xid] {
    width: 36px;
    height: 36px;
    border: 3px solid var(--color-neutral-200);
    border-top-color: var(--color-primary-500);
    border-radius: 50%;
    animation: tsg-spin-b-pvayr96xid 0.7s linear infinite;
}

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

/* ─── Page Wrap ──────────────────────────────────────────── */
.tsg-wrap[b-pvayr96xid] {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1rem 3rem;
}

/* ─── App Header ─────────────────────────────────────────── */
.tsg-app-header[b-pvayr96xid] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 0 1.25rem;
    border-bottom: 1px solid var(--color-neutral-100);
    margin-bottom: 1.25rem;
    gap: 1rem;
}

.tsg-app-title[b-pvayr96xid] {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
}

.tsg-app-brand[b-pvayr96xid] {
    font-size: 1.1rem;
    font-weight: 800;
    color: var(--color-primary-600);
    letter-spacing: -0.02em;
}

.tsg-app-page[b-pvayr96xid] {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--color-neutral-800);
}

.tsg-header-actions[b-pvayr96xid] {
    display: flex;
    align-items: center;
    gap: 1rem;
}

/* ─── Role Toggle ────────────────────────────────────────── */
.tsg-role-toggle[b-pvayr96xid] {
    display: flex;
    background: var(--color-neutral-100);
    border-radius: 999px;
    padding: 3px;
    gap: 2px;
}

.tsg-role-btn[b-pvayr96xid] {
    padding: 0.3rem 0.85rem;
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--color-neutral-500);
    border: none;
    background: transparent;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.15s;
}

.tsg-role-btn:hover[b-pvayr96xid] {
    color: var(--color-neutral-700);
}

.tsg-role-btn--active[b-pvayr96xid] {
    background: #fff;
    color: var(--color-primary-600) !important;
    box-shadow: 0 1px 3px rgba(0,0,0,.1);
}

/* ─── Class Row ──────────────────────────────────────────── */
.tsg-class-row[b-pvayr96xid] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1.25rem;
}

.tsg-class-label[b-pvayr96xid] {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--color-neutral-500);
    white-space: nowrap;
}

.tsg-class-select[b-pvayr96xid] {
    min-width: 180px;
    padding: 0.45rem 0.75rem;
    border: 1px solid var(--color-neutral-200);
    border-radius: 8px;
    font-size: 0.875rem;
    color: var(--color-neutral-900);
    background: #fff;
    cursor: pointer;
}

.tsg-class-select:focus[b-pvayr96xid] {
    outline: none;
    border-color: var(--color-primary-400);
    box-shadow: 0 0 0 2px var(--color-primary-100);
}

.tsg-class-chip[b-pvayr96xid] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.3rem 0.9rem;
    background: var(--color-primary-50);
    color: var(--color-primary-700);
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 600;
}

/* ─── Search Row ─────────────────────────────────────────── */
.tsg-search-row[b-pvayr96xid] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1.25rem;
}

.tsg-search-wrap[b-pvayr96xid] {
    flex: 1;
    position: relative;
}

.tsg-search-icon[b-pvayr96xid] {
    position: absolute;
    left: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.875rem;
    pointer-events: none;
}

.tsg-search-input[b-pvayr96xid] {
    width: 100%;
    padding: 0.55rem 0.75rem 0.55rem 2.25rem;
    border: 1px solid var(--color-neutral-200);
    border-radius: 10px;
    font-size: 0.875rem;
    color: var(--color-neutral-900);
    background: #fff;
    box-sizing: border-box;
}

.tsg-search-input:focus[b-pvayr96xid] {
    outline: none;
    border-color: var(--color-primary-400);
    box-shadow: 0 0 0 2px var(--color-primary-50);
}

.tsg-filter-btns[b-pvayr96xid] {
    display: flex;
    gap: 0.5rem;
}

.tsg-filter-sel[b-pvayr96xid] {
    padding: 0.5rem 0.7rem;
    border: 1px solid var(--color-neutral-200);
    border-radius: 8px;
    font-size: 0.8rem;
    color: var(--color-neutral-700);
    background: #fff;
    cursor: pointer;
    white-space: nowrap;
}

.tsg-filter-sel:focus[b-pvayr96xid] {
    outline: none;
    border-color: var(--color-primary-400);
}

/* ─── Stats Row ──────────────────────────────────────────── */
.tsg-stats-row[b-pvayr96xid] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}

.tsg-stat-card[b-pvayr96xid] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 1.1rem;
    border-radius: 12px;
    background: #fff;
    border: 1px solid var(--color-neutral-100);
    box-shadow: 0 1px 3px rgba(0,0,0,.04);
}

.tsg-stat-card--blue[b-pvayr96xid]  { border-left: 3px solid var(--color-primary-400); }
.tsg-stat-card--yellow[b-pvayr96xid] { border-left: 3px solid #f59e0b; }
.tsg-stat-card--purple[b-pvayr96xid] { border-left: 3px solid #8b5cf6; }
.tsg-stat-card--green[b-pvayr96xid]  { border-left: 3px solid #22c55e; }

.tsg-stat-icon[b-pvayr96xid] {
    font-size: 1.5rem;
    flex-shrink: 0;
}

.tsg-stat-body[b-pvayr96xid] {
    display: flex;
    flex-direction: column;
    gap: 0;
    min-width: 0;
}

.tsg-stat-num[b-pvayr96xid] {
    font-size: 1.35rem;
    font-weight: 800;
    color: var(--color-neutral-900);
    line-height: 1.1;
}

.tsg-stat-lbl[b-pvayr96xid] {
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-neutral-400);
    margin-top: 0.1rem;
}

.tsg-stat-sub[b-pvayr96xid] {
    font-size: 0.72rem;
    color: var(--color-neutral-400);
    margin-top: 0.1rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ─── Section Header ─────────────────────────────────────── */
.tsg-section-hdr[b-pvayr96xid] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.9rem;
}

.tsg-section-title[b-pvayr96xid] {
    font-size: 1rem;
    font-weight: 700;
    color: var(--color-neutral-800);
    margin: 0;
}

.tsg-section-meta[b-pvayr96xid] {
    font-size: 0.8rem;
    color: var(--color-neutral-400);
    white-space: nowrap;
}

/* ─── Subjects Grid ──────────────────────────────────────── */
.tsg-subjects-grid[b-pvayr96xid] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 0.9rem;
    margin-bottom: 1.5rem;
}

/* ─── Skeleton ───────────────────────────────────────────── */
.tsg-card-skeleton[b-pvayr96xid] {
    height: 150px;
    border-radius: 14px;
    background: linear-gradient(90deg, #f1f5f9 25%, #e2e8f0 50%, #f1f5f9 75%);
    background-size: 200% 100%;
    animation: tsg-shimmer-b-pvayr96xid 1.2s infinite;
}

@keyframes tsg-shimmer-b-pvayr96xid {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ─── Chapters Section ───────────────────────────────────── */
.tsg-chapters-section[b-pvayr96xid] {
    margin-top: 0.5rem;
    border-top: 2px solid var(--color-primary-100);
    padding-top: 1.25rem;
}

/* ─── Tip Banner ─────────────────────────────────────────── */
.tsg-tip-banner[b-pvayr96xid] {
    background: #fefce8;
    border: 1px solid #fde047;
    border-radius: 10px;
    padding: 0.65rem 1rem;
    font-size: 0.82rem;
    color: #713f12;
    margin-bottom: 1.1rem;
    line-height: 1.5;
}

/* ─── Type Chips ─────────────────────────────────────────── */
.tsg-type-chips[b-pvayr96xid] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-bottom: 1rem;
}

.tsg-type-chip[b-pvayr96xid] {
    padding: 0.28rem 0.75rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    background: var(--color-neutral-100);
    color: var(--color-neutral-600);
    border: 1px solid var(--color-neutral-200);
    cursor: pointer;
    transition: all 0.12s;
}

.tsg-type-chip:hover[b-pvayr96xid] {
    background: var(--color-primary-50);
    border-color: var(--color-primary-300);
    color: var(--color-primary-700);
}

.tsg-type-chip--active[b-pvayr96xid] {
    background: var(--color-primary-500);
    color: #fff;
    border-color: var(--color-primary-500);
}

/* ─── Chapters Grid ──────────────────────────────────────── */
.tsg-chapters-grid[b-pvayr96xid] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 1rem;
}

/* ─── Error / Empty ──────────────────────────────────────── */
.tsg-error[b-pvayr96xid] {
    background: #fef2f2;
    border: 1px solid #fca5a5;
    border-radius: 8px;
    padding: 0.75rem 1rem;
    font-size: 0.875rem;
    color: #b91c1c;
    margin-bottom: 1rem;
}

.tsg-empty[b-pvayr96xid] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: 3rem 1rem;
    text-align: center;
    color: var(--color-neutral-400);
}

.tsg-empty-icon[b-pvayr96xid] {
    font-size: 2.5rem;
}

.tsg-empty p[b-pvayr96xid] {
    font-size: 0.875rem;
    max-width: 320px;
    line-height: 1.5;
    margin: 0;
}

/* ─── Responsive ─────────────────────────────────────────── */
@media (max-width: 900px) {
    .tsg-stats-row[b-pvayr96xid] {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 640px) {
    .tsg-app-header[b-pvayr96xid] {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.75rem;
    }

    .tsg-search-row[b-pvayr96xid] {
        flex-direction: column;
        align-items: stretch;
    }

    .tsg-filter-btns[b-pvayr96xid] {
        justify-content: flex-end;
    }

    .tsg-stats-row[b-pvayr96xid] {
        grid-template-columns: repeat(2, 1fr);
    }

    .tsg-section-hdr[b-pvayr96xid] {
        flex-direction: column;
        gap: 0.15rem;
    }
}
/* /Pages/Teacher/TaxDeclaration.razor.rz.scp.css */
.tax-page[b-w5pl4cgavt] { --touch-target-min: 2.5rem; max-width: var(--container-xl); margin: 0 auto; padding: var(--spacing-6); color: var(--color-text-primary); }
.page-heading[b-w5pl4cgavt], .section-heading[b-w5pl4cgavt], .form-actions[b-w5pl4cgavt], .status-strip[b-w5pl4cgavt] { display: flex; align-items: center; justify-content: space-between; gap: var(--spacing-4); }
.page-heading[b-w5pl4cgavt] { margin-bottom: var(--spacing-6); }
.page-heading h1[b-w5pl4cgavt] { margin: 0; font-size: var(--font-size-3xl); }
.page-heading p[b-w5pl4cgavt] { margin: var(--spacing-2) 0 0; color: var(--color-text-muted); }
.year-picker[b-w5pl4cgavt], .field[b-w5pl4cgavt] { display: flex; flex-direction: column; gap: var(--spacing-2); color: var(--color-text-secondary); font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); }
.year-picker input[b-w5pl4cgavt], .field input[b-w5pl4cgavt], .field select[b-w5pl4cgavt] { min-height: var(--touch-target-min); padding: var(--spacing-3) var(--spacing-4); color: var(--color-text-primary); background: var(--color-surface-primary); border: 1px solid var(--color-border-dark); border-radius: var(--input-radius); }
.status-strip[b-w5pl4cgavt], .review-note[b-w5pl4cgavt] { margin-bottom: var(--spacing-5); padding: var(--spacing-4); border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: var(--color-surface-secondary); }
.status-submitted[b-w5pl4cgavt] { color: var(--color-warning-800); background: var(--color-warning-50); border-color: var(--color-warning-200); }
.status-approved[b-w5pl4cgavt] { color: var(--color-success-800); background: var(--color-success-50); border-color: var(--color-success-200); }
.status-rejected[b-w5pl4cgavt] { color: var(--color-danger-800); background: var(--color-danger-50); border-color: var(--color-danger-200); }
.review-note[b-w5pl4cgavt] { display: flex; flex-direction: column; gap: var(--spacing-2); color: var(--color-danger-800); }
.form-section[b-w5pl4cgavt] { margin-bottom: var(--spacing-6); padding: var(--spacing-6); background: var(--color-surface-primary); border: 1px solid var(--color-border); border-radius: var(--radius-sm); box-shadow: var(--shadow-sm); }
.section-heading[b-w5pl4cgavt] { margin-bottom: var(--spacing-5); padding-bottom: var(--spacing-4); border-bottom: 1px solid var(--color-border-light); }
.section-heading span[b-w5pl4cgavt] { color: var(--color-primary-700); font-size: var(--font-size-xs); font-weight: var(--font-weight-bold); text-transform: uppercase; }
.section-heading h2[b-w5pl4cgavt] { margin: var(--spacing-2) 0 0; font-size: var(--font-size-xl); }
.form-grid[b-w5pl4cgavt] { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--spacing-5); }
.items-hint[b-w5pl4cgavt] { margin: 0 0 var(--spacing-4); color: var(--color-text-muted); font-size: var(--font-size-sm); }
.section-suggestions[b-w5pl4cgavt] { display: flex; flex-wrap: wrap; gap: var(--spacing-2); margin-bottom: var(--spacing-5); }
.chip[b-w5pl4cgavt] { min-height: var(--touch-target-min); padding: var(--spacing-2) var(--spacing-4); color: var(--color-primary-800); background: var(--color-primary-50); border: 1px solid var(--color-primary-200); border-radius: var(--radius-pill, 999px); font-size: var(--font-size-sm); cursor: pointer; }
.chip strong[b-w5pl4cgavt] { color: var(--color-primary-700); }
.items-total[b-w5pl4cgavt] { display: flex; justify-content: flex-end; gap: var(--spacing-3); padding-top: var(--spacing-3); color: var(--color-text-secondary); font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); }
.items-list[b-w5pl4cgavt] { display: flex; flex-direction: column; gap: var(--spacing-4); }
.field-hint[b-w5pl4cgavt] { margin-top: var(--spacing-2); color: var(--color-text-muted); font-size: var(--font-size-xs); font-weight: var(--font-weight-normal); }
.item-row[b-w5pl4cgavt] { display: grid; grid-template-columns: minmax(7rem, .7fr) 1.4fr minmax(8rem, .7fr) 1.4fr var(--touch-target-min); align-items: end; gap: var(--spacing-4); padding-bottom: var(--spacing-4); border-bottom: 1px solid var(--color-border-light); }
.primary-button[b-w5pl4cgavt], .secondary-button[b-w5pl4cgavt], .icon-button[b-w5pl4cgavt] { min-height: var(--touch-target-min); display: inline-flex; align-items: center; justify-content: center; gap: var(--spacing-2); border-radius: var(--radius-sm); font-weight: var(--font-weight-semibold); }
.primary-button[b-w5pl4cgavt], .secondary-button[b-w5pl4cgavt] { padding: var(--spacing-3) var(--spacing-5); }
.primary-button[b-w5pl4cgavt] { color: var(--color-text-white); background: var(--color-primary-600); border: 1px solid var(--color-primary-600); }
.secondary-button[b-w5pl4cgavt] { color: var(--color-primary-700); background: var(--color-surface-primary); border: 1px solid var(--color-primary-300); }
.icon-button[b-w5pl4cgavt] { width: var(--touch-target-min); color: var(--color-danger-700); background: var(--color-danger-50); border: 1px solid var(--color-danger-200); }
.form-actions[b-w5pl4cgavt] { justify-content: flex-end; margin-top: var(--spacing-6); }
.state-panel[b-w5pl4cgavt], .empty-state[b-w5pl4cgavt] { padding: var(--spacing-6); text-align: center; color: var(--color-text-muted); background: var(--color-surface-primary); border: 1px solid var(--color-border); border-radius: var(--radius-sm); }
.validation-summary[b-w5pl4cgavt] { margin-bottom: var(--spacing-4); color: var(--color-danger-700); }
@media (max-width: 768px) { .tax-page[b-w5pl4cgavt] { padding: var(--spacing-4); } .page-heading[b-w5pl4cgavt], .status-strip[b-w5pl4cgavt] { align-items: stretch; flex-direction: column; } .form-grid[b-w5pl4cgavt], .item-row[b-w5pl4cgavt] { grid-template-columns: 1fr; } .form-section[b-w5pl4cgavt] { padding: var(--spacing-4); } }
/* /Pages/Teacher/TeachingPlan/History.razor.rz.scp.css */
/* History.razor.css — Teaching Plan Import History */

.status-badge[b-cspr4x2uev] {
    display: inline-block;
    padding: 0.2rem 0.65rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.02em;
}

.status-completed[b-cspr4x2uev] {
    background: var(--color-success-100, #dcfce7);
    color: var(--color-success-700, #15803d);
}

.status-partialsuccess[b-cspr4x2uev] {
    background: var(--color-warning-100, #fef9c3);
    color: var(--color-warning-700, #a16207);
}

.status-failed[b-cspr4x2uev] {
    background: var(--color-danger-100, #fee2e2);
    color: var(--color-danger-700, #b91c1c);
}

.status-processing[b-cspr4x2uev] {
    background: var(--color-primary-100, #dbeafe);
    color: var(--color-primary-700, #1d4ed8);
}
/* /Pages/Teacher/TeachingPlan/Index.razor.rz.scp.css */
/* ── PAGE ────────────────────────────────────────────────────────────────── */
.tp-page[b-ybnb7hivag] {
    min-height: 100vh;
    background: #F8FAFC;
}

/* ── STICKY TOOLBAR ──────────────────────────────────────────────────────── */
.tp-toolbar[b-ybnb7hivag] {
    background: #ffffff;
    border-bottom: 1px solid #E5E7EB;
    position: sticky;
    top: 0;
    z-index: 20;
    box-shadow: 0 1px 4px rgba(0,0,0,0.06);
}

.tp-toolbar-inner[b-ybnb7hivag] {
    max-width: 1400px;
    margin: 0 auto;
    padding: 12px 32px;
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
}

.tp-title-block[b-ybnb7hivag] { flex-shrink: 0; }

.tp-title[b-ybnb7hivag] {
    font-size: 1.0625rem;
    font-weight: 700;
    color: #111827;
    line-height: 1.3;
}

.tp-subtitle[b-ybnb7hivag] {
    font-size: 0.75rem;
    color: #6B7280;
    margin-top: 1px;
}

.tp-toolbar-controls[b-ybnb7hivag] {
    display: flex;
    align-items: flex-end;
    gap: 10px;
    flex-wrap: wrap;
    flex: 1;
}

/* ── SELECTORS ───────────────────────────────────────────────────────────── */
.tp-select-wrap[b-ybnb7hivag] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 145px;
}

.tp-select-label[b-ybnb7hivag] {
    font-size: 0.68rem;
    font-weight: 700;
    color: #9CA3AF;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.tp-select[b-ybnb7hivag] {
    height: 40px;
    border: 1px solid #D1D5DB;
    border-radius: 8px;
    padding: 0 12px;
    font-size: 0.8125rem;
    color: #111827;
    background: #fff;
    outline: none;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.tp-select:focus[b-ybnb7hivag] { border-color: #3B82F6; box-shadow: 0 0 0 3px rgba(59,130,246,0.12); }
.tp-select:disabled[b-ybnb7hivag] { opacity: 0.45; cursor: not-allowed; }

.tp-select-skeleton[b-ybnb7hivag] {
    height: 40px;
    background: #F3F4F6;
    border-radius: 8px;
    animation: tp-pulse-b-ybnb7hivag 1.5s ease-in-out infinite;
    min-width: 145px;
}

/* ── LOAD BUTTON ─────────────────────────────────────────────────────────── */
.tp-load-wrap[b-ybnb7hivag] { display: flex; flex-direction: column; gap: 4px; }

.tp-load-btn[b-ybnb7hivag] {
    height: 40px;
    padding: 0 20px;
    background: #2563EB;
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 7px;
    white-space: nowrap;
    transition: background 0.15s, transform 0.1s;
}
.tp-load-btn:hover:not(:disabled)[b-ybnb7hivag] { background: #1D4ED8; }
.tp-load-btn:active:not(:disabled)[b-ybnb7hivag] { transform: scale(0.98); }
.tp-load-btn:disabled[b-ybnb7hivag] { opacity: 0.5; cursor: not-allowed; }

/* ── SECONDARY ACTION BUTTONS ────────────────────────────────────────────── */
.tp-toolbar-actions[b-ybnb7hivag] { display: flex; gap: 8px; margin-left: auto; }

.tp-action-btn[b-ybnb7hivag] {
    height: 40px;
    padding: 0 14px;
    background: #F9FAFB;
    color: #374151;
    border: 1px solid #E5E7EB;
    border-radius: 8px;
    font-size: 0.8rem;
    font-weight: 500;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
    transition: background 0.15s, border-color 0.15s;
}
.tp-action-btn:hover[b-ybnb7hivag] { background: #F3F4F6; border-color: #D1D5DB; text-decoration: none; }

/* ── CONTENT AREA ────────────────────────────────────────────────────────── */
.tp-content[b-ybnb7hivag] {
    max-width: 1400px;
    margin: 0 auto;
    padding: 24px 32px 48px;
}

/* ── ERROR ───────────────────────────────────────────────────────────────── */
.tp-error[b-ybnb7hivag] {
    background: #FEF2F2;
    border: 1px solid #FCA5A5;
    color: #B91C1C;
    border-radius: 10px;
    padding: 12px 16px;
    font-size: 0.875rem;
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 20px;
}

/* ── PROGRESS SECTION ────────────────────────────────────────────────────── */
.tp-progress-section[b-ybnb7hivag] { margin-bottom: 20px; }

.tp-progress-bar-row[b-ybnb7hivag] {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 12px;
}

.tp-progress-bar-wrap[b-ybnb7hivag] {
    flex: 1;
    height: 7px;
    background: #E5E7EB;
    border-radius: 9999px;
    overflow: hidden;
}

.tp-progress-bar-fill[b-ybnb7hivag] {
    height: 100%;
    background: linear-gradient(90deg, #10B981 0%, #2563EB 100%);
    border-radius: 9999px;
    transition: width 0.7s ease;
}

.tp-progress-pct[b-ybnb7hivag] {
    font-size: 0.8125rem;
    font-weight: 700;
    color: #2563EB;
    white-space: nowrap;
    flex-shrink: 0;
}

/* ── STATS ROW ───────────────────────────────────────────────────────────── */
.tp-stats-row[b-ybnb7hivag] {
    display: flex;
    gap: 1px;
    background: #E5E7EB;
    border-radius: 12px;
    overflow: hidden;
}

.tp-stat[b-ybnb7hivag] {
    flex: 1;
    background: #ffffff;
    padding: 12px 20px;
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.tp-stat:first-child[b-ybnb7hivag] { border-radius: 12px 0 0 12px; }
.tp-stat:last-child[b-ybnb7hivag]  { border-radius: 0 12px 12px 0; }

.tp-stat-val[b-ybnb7hivag] { font-size: 1.5rem; font-weight: 800; line-height: 1; }
.tp-stat-val--blue[b-ybnb7hivag]  { color: #2563EB; }
.tp-stat-val--green[b-ybnb7hivag] { color: #10B981; }
.tp-stat-val--amber[b-ybnb7hivag] { color: #F59E0B; }
.tp-stat-val--gray[b-ybnb7hivag]  { color: #6B7280; }

.tp-stat-lbl[b-ybnb7hivag] { font-size: 0.72rem; color: #9CA3AF; font-weight: 500; }

/* ── CHAPTER LIST ────────────────────────────────────────────────────────── */
.tp-chapter-list[b-ybnb7hivag] {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

/* ── CHAPTER CARD ────────────────────────────────────────────────────────── */
.tp-chapter[b-ybnb7hivag] {
    background: #ffffff;
    border: 1px solid #E5E7EB;
    border-radius: 10px;
    overflow: hidden;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.tp-chapter:hover[b-ybnb7hivag] { border-color: #D1D5DB; box-shadow: 0 2px 6px rgba(0,0,0,0.05); }
.tp-chapter--open[b-ybnb7hivag]  { border-color: #BFDBFE; box-shadow: 0 2px 8px rgba(37,99,235,0.08); }

/* ── COMPACT CHAPTER ROW ─────────────────────────────────────────────────── */
.tp-chapter-row[b-ybnb7hivag] {
    height: 64px;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 0 18px;
    cursor: pointer;
    user-select: none;
}

.tp-chapter-num[b-ybnb7hivag] {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: #EFF6FF;
    color: #2563EB;
    font-weight: 700;
    font-size: 0.8125rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background 0.15s, color 0.15s;
}
.tp-chapter--open .tp-chapter-num[b-ybnb7hivag] { background: #2563EB; color: #ffffff; }

.tp-chapter-info[b-ybnb7hivag] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.tp-chapter-name[b-ybnb7hivag] {
    font-size: 0.9375rem;
    font-weight: 600;
    color: #111827;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tp-chapter-meta[b-ybnb7hivag] { font-size: 0.75rem; color: #9CA3AF; }

.tp-chapter-right[b-ybnb7hivag] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

/* ── STATUS BADGES ───────────────────────────────────────────────────────── */
.tp-badge[b-ybnb7hivag] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 9px;
    border-radius: 9999px;
    font-size: 0.69rem;
    font-weight: 700;
    letter-spacing: 0.01em;
}
.tp-badge--active[b-ybnb7hivag]  { background: #D1FAE5; color: #065F46; }
.tp-badge--pending[b-ybnb7hivag] { background: #F3F4F6; color: #9CA3AF; }

.tp-lessons-pill[b-ybnb7hivag] {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: #DBEAFE;
    color: #1D4ED8;
    font-size: 0.72rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}

.tp-chapter-chevron[b-ybnb7hivag] {
    font-size: 0.75rem;
    color: #9CA3AF;
    transition: transform 0.2s, color 0.15s;
}
.tp-chapter--open .tp-chapter-chevron[b-ybnb7hivag] { color: #2563EB; transform: rotate(180deg); }

/* ── CHAPTER BODY ────────────────────────────────────────────────────────── */
.tp-chapter-body[b-ybnb7hivag] { border-top: 1px solid #EFF6FF; }

.tp-chapter-loading[b-ybnb7hivag] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 14px 18px;
    font-size: 0.875rem;
    color: #9CA3AF;
}

/* ── LESSON TIMELINE ─────────────────────────────────────────────────────── */
.tp-lesson-timeline[b-ybnb7hivag] {
    padding: 8px 18px;
    border-bottom: 1px solid #F3F4F6;
}

.tp-lesson-item[b-ybnb7hivag] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 4px;
    border-radius: 6px;
    transition: background 0.12s;
}
.tp-lesson-item:hover[b-ybnb7hivag] { background: #F9FAFB; }

.tp-lesson-dot[b-ybnb7hivag] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #10B981;
    flex-shrink: 0;
}

.tp-lesson-content[b-ybnb7hivag] {
    flex: 1;
    display: flex;
    align-items: baseline;
    gap: 10px;
    flex-wrap: wrap;
    min-width: 0;
}

.tp-lesson-topic[b-ybnb7hivag] {
    font-size: 0.875rem;
    font-weight: 600;
    color: #1F2937;
}

.tp-lesson-meta[b-ybnb7hivag] {
    font-size: 0.75rem;
    color: #9CA3AF;
}
.tp-lesson-meta i[b-ybnb7hivag] { opacity: 0.7; }

.tp-lesson-del[b-ybnb7hivag] {
    opacity: 0;
    background: none;
    border: none;
    cursor: pointer;
    color: #D1D5DB;
    padding: 4px 6px;
    border-radius: 4px;
    font-size: 0.75rem;
    transition: opacity 0.12s, color 0.12s, background 0.12s;
    flex-shrink: 0;
}
.tp-lesson-item:hover .tp-lesson-del[b-ybnb7hivag] { opacity: 1; }
.tp-lesson-del:hover[b-ybnb7hivag] { color: #EF4444; background: #FEF2F2; }

/* ── EMPTY STATE ─────────────────────────────────────────────────────────── */
.tp-empty-state[b-ybnb7hivag] {
    text-align: center;
    padding: 24px 20px;
}
.tp-empty-icon[b-ybnb7hivag] { font-size: 1.875rem; opacity: 0.2; display: block; margin-bottom: 8px; color: #6B7280; }
.tp-empty-title[b-ybnb7hivag] { font-size: 0.9375rem; font-weight: 600; color: #374151; margin-bottom: 4px; }
.tp-empty-sub[b-ybnb7hivag] { font-size: 0.8125rem; color: #9CA3AF; }

/* ── LOG LESSON BUTTON ───────────────────────────────────────────────────── */
.tp-log-btn-row[b-ybnb7hivag] { padding: 12px 18px; }

.tp-log-lesson-btn[b-ybnb7hivag] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 16px;
    background: #EFF6FF;
    color: #2563EB;
    border: 1px dashed #93C5FD;
    border-radius: 8px;
    font-size: 0.8125rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}
.tp-log-lesson-btn:hover[b-ybnb7hivag] { background: #DBEAFE; border-color: #60A5FA; }

/* ── LOG LESSON FORM ─────────────────────────────────────────────────────── */
.tp-log-form[b-ybnb7hivag] {
    padding: 14px 18px 18px;
    background: #F8FAFC;
    border-top: 1px solid #EFF6FF;
}

.tp-log-form-title[b-ybnb7hivag] {
    font-size: 0.875rem;
    font-weight: 700;
    color: #1F2937;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 6px;
}
.tp-log-form-title i[b-ybnb7hivag] { color: #6B7280; font-size: 0.8125rem; }

.tp-form-grid[b-ybnb7hivag] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 12px;
}

.tp-field[b-ybnb7hivag] { display: flex; flex-direction: column; gap: 5px; }
.tp-field--full[b-ybnb7hivag] { grid-column: 1 / -1; }

.tp-field-label[b-ybnb7hivag] { font-size: 0.72rem; font-weight: 600; color: #6B7280; }

.tp-input[b-ybnb7hivag] {
    height: 44px;
    border: 1px solid #E5E7EB;
    border-radius: 10px;
    padding: 0 14px;
    font-size: 0.875rem;
    color: #111827;
    background: #ffffff;
    outline: none;
    transition: border-color 0.15s, box-shadow 0.15s;
    box-shadow: 0 1px 2px rgba(0,0,0,0.04);
}
.tp-input:focus[b-ybnb7hivag] { border-color: #3B82F6; box-shadow: 0 0 0 3px rgba(59,130,246,0.12); }

/* ── FORM ACTION BUTTONS ─────────────────────────────────────────────────── */
.tp-form-actions[b-ybnb7hivag] { display: flex; align-items: center; gap: 10px; }

.tp-save-btn[b-ybnb7hivag] {
    height: 40px;
    padding: 0 22px;
    background: #2563EB;
    color: #ffffff;
    border: none;
    border-radius: 8px;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 7px;
    transition: background 0.15s;
}
.tp-save-btn:hover:not(:disabled)[b-ybnb7hivag] { background: #1D4ED8; }
.tp-save-btn:disabled[b-ybnb7hivag] { opacity: 0.55; cursor: not-allowed; }

.tp-cancel-btn[b-ybnb7hivag] {
    height: 40px;
    padding: 0 18px;
    background: transparent;
    color: #6B7280;
    border: 1px solid #E5E7EB;
    border-radius: 8px;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s;
}
.tp-cancel-btn:hover[b-ybnb7hivag] { background: #F3F4F6; }

/* ── PLACEHOLDER (pre-load / empty) ──────────────────────────────────────── */
.tp-placeholder[b-ybnb7hivag] {
    background: #ffffff;
    border: 1px solid #E5E7EB;
    border-radius: 12px;
    text-align: center;
    padding: 60px 24px;
}
.tp-placeholder-icon[b-ybnb7hivag] { font-size: 2.75rem; opacity: 0.18; display: block; margin-bottom: 14px; color: #6B7280; }
.tp-placeholder-title[b-ybnb7hivag] { font-size: 1.0625rem; font-weight: 600; color: #374151; margin-bottom: 6px; }
.tp-placeholder-sub[b-ybnb7hivag] { font-size: 0.875rem; color: #9CA3AF; }

/* ── SPINNER ─────────────────────────────────────────────────────────────── */
.tp-spinner[b-ybnb7hivag] {
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 2px solid currentColor;
    border-top-color: transparent;
    border-radius: 50%;
    animation: tp-spin-b-ybnb7hivag 0.7s linear infinite;
    opacity: 0.7;
}

@keyframes tp-spin-b-ybnb7hivag { to { transform: rotate(360deg); } }
@keyframes tp-pulse-b-ybnb7hivag { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }

/* ── RESPONSIVE ──────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
    .tp-toolbar-inner[b-ybnb7hivag] { padding: 12px 16px; flex-direction: column; align-items: flex-start; gap: 10px; }
    .tp-toolbar-controls[b-ybnb7hivag] { width: 100%; flex-wrap: wrap; }
    .tp-toolbar-actions[b-ybnb7hivag] { margin-left: 0; }
    .tp-content[b-ybnb7hivag] { padding: 16px 16px 32px; }
    .tp-stats-row[b-ybnb7hivag] { flex-direction: column; gap: 0; }
    .tp-stat:first-child[b-ybnb7hivag] { border-radius: 12px 12px 0 0; }
    .tp-stat:last-child[b-ybnb7hivag]  { border-radius: 0 0 12px 12px; }
    .tp-form-grid[b-ybnb7hivag] { grid-template-columns: 1fr; }
    .tp-field--full[b-ybnb7hivag] { grid-column: 1; }
}
/* /Pages/Teacher/TeachingPlan/Upload.razor.rz.scp.css */
/* Upload.razor.css — Teaching Plan Upload Page */

.step-item[b-uz1eyl2ss1] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    flex: 0 0 auto;
}

.step-circle[b-uz1eyl2ss1] {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    background: var(--color-neutral-200);
    color: var(--color-neutral-500);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.95rem;
    transition: background 0.2s, color 0.2s;
}

.step-item.active .step-circle[b-uz1eyl2ss1] {
    background: var(--color-primary-600);
    color: #ffffff;
}

.step-label[b-uz1eyl2ss1] {
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--color-neutral-500);
    white-space: nowrap;
}

.step-item.active .step-label[b-uz1eyl2ss1] {
    color: var(--color-primary-700);
    font-weight: 600;
}

.step-divider[b-uz1eyl2ss1] {
    flex: 1;
    height: 2px;
    background: var(--color-neutral-200);
    margin-bottom: 1.5rem;
    transition: background 0.2s;
}

.step-divider.active[b-uz1eyl2ss1] {
    background: var(--color-primary-400);
}

/* Drop zone */
.drop-zone[b-uz1eyl2ss1] {
    position: relative;
    border: 2px dashed var(--color-neutral-300);
    border-radius: 0.75rem;
    transition: border-color 0.2s, background 0.2s;
    background: var(--color-neutral-50);
    overflow: hidden;
}

.drop-zone:hover[b-uz1eyl2ss1],
.drop-zone.dragging[b-uz1eyl2ss1] {
    border-color: var(--color-primary-400);
    background: var(--color-primary-50);
}

.drop-zone-content[b-uz1eyl2ss1] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem 1.5rem;
    text-align: center;
    width: 100%;
    display: block;
}

.file-input[b-uz1eyl2ss1] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
    z-index: 10;
}

/* Row colours */
.row-valid[b-uz1eyl2ss1] {
    background: var(--color-success-50, #f0fdf4);
}

.row-invalid[b-uz1eyl2ss1] {
    background: var(--color-danger-50, #fef2f2);
}

/* Spinner */
.spinner-sm[b-uz1eyl2ss1] {
    width: 1rem;
    height: 1rem;
    border: 2px solid rgba(255,255,255,0.4);
    border-top-color: #ffffff;
    border-radius: 50%;
    display: inline-block;
    animation: spin-b-uz1eyl2ss1 0.7s linear infinite;
}

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

/* Mobile responsive */
@media (max-width: 640px) {
    .step-label[b-uz1eyl2ss1] {
        display: none;
    }
}
/* /Pages/Teacher/Timetable/Index.razor.rz.scp.css */
/* Teacher Timetable Page — matches wireframe 10 */

/* Mobile-first wrapper */
.timetable-mobile-wrap[b-jzd3lzt2jg] {
    max-width: 440px;
    margin: 0 auto;
    background: #fff;
    min-height: 100vh;
    position: relative;
}

@media (min-width: 768px) {
    .timetable-mobile-wrap[b-jzd3lzt2jg] {
        max-width: 100%;
    }
}

/* Teal gradient header */
.teacher-header[b-jzd3lzt2jg] {
    background: linear-gradient(135deg, var(--color-teal-600), var(--color-teal-700));
    color: #fff;
    padding: 16px 16px 12px;
    top: 0;
    z-index: 20;
}

.teacher-name[b-jzd3lzt2jg] {
    font-size: 17px;
    font-weight: 700;
}

.teacher-sub[b-jzd3lzt2jg] {
    font-size: 12px;
    opacity: .8;
    margin-top: 2px;
}

/* Week nav */
.week-nav[b-jzd3lzt2jg] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 10px;
}

.week-label[b-jzd3lzt2jg] {
    font-size: 13px;
    font-weight: 600;
    opacity: .9;
}

.week-btn[b-jzd3lzt2jg] {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: rgba(255,255,255,.2);
    border: none;
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    transition: background .15s;
}

.week-btn:hover[b-jzd3lzt2jg] {
    background: rgba(255,255,255,.3);
}

/* Day tabs */
.day-tabs[b-jzd3lzt2jg] {
    overflow-x: auto;
    scrollbar-width: none;
}

/* Period cards */
.period-card[b-jzd3lzt2jg] {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    padding: 12px 14px;
    margin-bottom: 8px;
    display: flex;
    gap: 12px;
    align-items: flex-start;
    transition: border-color .15s, box-shadow .15s;
}

.period-card:hover[b-jzd3lzt2jg] {
    border-color: var(--color-teal-400);
    box-shadow: 0 1px 4px rgba(0,0,0,.06);
}

.period-card.free[b-jzd3lzt2jg] {
    background: #f9fafb;
    border-style: dashed;
    border-color: #e5e7eb;
}

.period-card.now[b-jzd3lzt2jg] {
    border-color: var(--color-teal-500);
    box-shadow: 0 0 0 2px rgba(20, 184, 166, 0.15);
}

/* Color strip */
.pc-divider[b-jzd3lzt2jg] {
    width: 3px;
    border-radius: 2px;
    flex-shrink: 0;
    align-self: stretch;
    background: var(--color-teal-500);
}

.pc-divider.free[b-jzd3lzt2jg] {
    background: #e5e7eb;
}

.pc-subject[b-jzd3lzt2jg] {
    font-size: 14px;
    font-weight: 700;
    color: #111827;
    margin-bottom: 2px;
}

.pc-free-label[b-jzd3lzt2jg] {
    font-size: 13px;
    font-weight: 600;
    color: #9ca3af;
}

/* Break cards */
.break-card[b-jzd3lzt2jg] {
    background: #f9fafb;
    border-radius: 6px;
    padding: 8px 14px;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    color: #9ca3af;
    font-style: italic;
}

/* Bottom summary bar */
.week-summary-bar[b-jzd3lzt2jg] {
    background: #fff;
    border-top: 2px solid #e5e7eb;
    padding: 12px 16px;
    position: fixed;
    bottom: 0;
    max-width: 440px;
    width: 100%;
    z-index: 10;
}

@media (min-width: 768px) {
    .week-summary-bar[b-jzd3lzt2jg] {
        max-width: 100%;
        position: sticky;
    }
}

/* Grid overflow */
.timetable-grid-wrapper[b-jzd3lzt2jg] {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

table td[b-jzd3lzt2jg],
table th[b-jzd3lzt2jg] {
    vertical-align: top;
}

/* /Pages/Teacher/VideoLessons/Analytics.razor.rz.scp.css */
/* Analytics page has no special custom styles — Tailwind handles everything */
/* /Pages/Teacher/VideoLessons/Index.razor.rz.scp.css */
/* Toggle switch — Visible column */
.toggle-track[b-2nahfxs116] {
    width: 36px;
    height: 20px;
    background: #d1d5db;
    border-radius: 9999px;
    position: relative;
    transition: background 0.2s ease;
    display: inline-block;
    flex-shrink: 0;
}

.toggle-track--on[b-2nahfxs116] {
    background: #22c55e;
}

.toggle-thumb[b-2nahfxs116] {
    width: 16px;
    height: 16px;
    background: #ffffff;
    border-radius: 9999px;
    position: absolute;
    top: 2px;
    left: 2px;
    transition: transform 0.2s ease;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
}

.toggle-thumb--on[b-2nahfxs116] {
    transform: translateX(16px);
}

/* Table last row — no bottom border */
table tbody tr:last-child[b-2nahfxs116] {
    border-bottom: none;
}

.modal-overlay[b-2nahfxs116] {
    animation: fadeIn-b-2nahfxs116 0.15s ease;
}

/* Inline Video Preview Modal */
.preview-overlay[b-2nahfxs116] {
    animation: fadeIn-b-2nahfxs116 0.15s ease;
}

.preview-video-container[b-2nahfxs116] {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
}

.preview-iframe[b-2nahfxs116] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
}

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

.modal-panel[b-2nahfxs116] {
    animation: slideUp-b-2nahfxs116 0.2s ease;
}

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

@keyframes slideUp-b-2nahfxs116 {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0); }
}
/* /Pages/TestDesignSystem.razor.rz.scp.css */
/* Styles handled via Tailwind utility classes in markup */
/* /Pages/TestDomainSwitcher.razor.rz.scp.css */
/* Styles handled via Tailwind utility classes in markup */
/* /Pages/TestSelector.razor.rz.scp.css */
/* Styles handled via Tailwind utility classes in markup */
/* /Pages/VerifyCertificate.razor.rz.scp.css */
.verification-page[b-kwafh4387h]{align-items:flex-start;background:var(--color-bg-secondary);display:flex;justify-content:center;min-height:100vh;padding:var(--spacing-5)}.verification-panel[b-kwafh4387h]{background:var(--color-bg-white);border:1px solid var(--color-border);border-radius:var(--radius-md);box-shadow:var(--shadow-md);margin-top:var(--spacing-7);max-width:680px;padding:var(--spacing-5);width:100%}.verification-panel header[b-kwafh4387h]{align-items:center;border-bottom:1px solid var(--color-border);display:flex;gap:var(--spacing-4);padding-bottom:var(--spacing-4)}.verification-panel header>i[b-kwafh4387h]{align-items:center;background:var(--color-primary);border-radius:var(--radius-md);color:var(--color-bg-white);display:flex;font-size:var(--font-size-xl);height:48px;justify-content:center;width:48px}.eyebrow[b-kwafh4387h]{color:var(--color-primary);font-size:var(--font-size-xs);font-weight:var(--font-weight-semibold);margin:0;text-transform:uppercase}.verification-panel h1[b-kwafh4387h]{color:var(--color-text-primary);font-size:var(--font-size-xl);margin:var(--spacing-1) 0 0}.verification-state[b-kwafh4387h]{align-items:center;border:1px solid var(--color-border);border-radius:var(--radius-md);display:flex;flex-direction:column;margin-top:var(--spacing-5);padding:var(--spacing-5);text-align:center}.verification-state i[b-kwafh4387h]{font-size:var(--font-size-3xl)}.verification-state h2[b-kwafh4387h]{font-size:var(--font-size-lg);margin:var(--spacing-3) 0 var(--spacing-2)}.verification-state p[b-kwafh4387h]{color:var(--color-text-secondary);margin:0}.verification-state.valid[b-kwafh4387h]{background:var(--color-success-50);border-color:var(--color-success-500);color:var(--color-success-500)}.verification-state.invalid[b-kwafh4387h]{background:var(--color-danger-50);border-color:var(--color-danger-500);color:var(--color-danger-500)}.verification-state.neutral[b-kwafh4387h]{background:var(--color-bg-secondary);color:var(--color-text-secondary)}.certificate-details[b-kwafh4387h]{margin:var(--spacing-5) 0 0}.certificate-details div[b-kwafh4387h]{border-bottom:1px solid var(--color-border);display:grid;gap:var(--spacing-1);padding:var(--spacing-3) 0}.certificate-details dt[b-kwafh4387h]{color:var(--color-text-secondary);font-size:var(--font-size-xs);font-weight:var(--font-weight-semibold)}.certificate-details dd[b-kwafh4387h]{color:var(--color-text-primary);font-size:var(--font-size-sm);margin:0;overflow-wrap:anywhere}@media (min-width:768px){.verification-page[b-kwafh4387h]{padding:var(--spacing-7)}.verification-panel[b-kwafh4387h]{padding:var(--spacing-7)}.certificate-details div[b-kwafh4387h]{align-items:center;grid-template-columns:minmax(140px,.45fr) 1fr}}
/* /Pages/VicePrincipal/Academics/Index.razor.rz.scp.css */
/* placeholder */
/* /Pages/VicePrincipal/Announcements/Index.razor.rz.scp.css */
/* placeholder */
/* /Pages/VicePrincipal/Attendance/Index.razor.rz.scp.css */
/* Styles handled via Tailwind utility classes in markup */
/* /Pages/VicePrincipal/Certificates/Index.razor.rz.scp.css */
:host[b-zle9etsmil]{display:block}
/* /Pages/VicePrincipal/Classes/Index.razor.rz.scp.css */
/* placeholder */
/* /Pages/VicePrincipal/Dashboard.razor.rz.scp.css */
.loading-overlay[b-ui1sboror5] {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-neutral-50, #f9fafb);
    z-index: 9997;
}

.error-state[b-ui1sboror5] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 40vh;
    gap: var(--spacing-2, 0.5rem);
}

/* ── Header ─────────────────────────────────────────────────── */
.dashboard-header[b-ui1sboror5] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--spacing-4, 1rem);
    margin-bottom: var(--spacing-6, 1.5rem);
}

.welcome-text[b-ui1sboror5] {
    font-size: var(--font-size-2xl, 1.5rem);
    font-weight: 700;
    color: var(--color-neutral-900, #111827);
    margin: 0;
}

.date-text[b-ui1sboror5] {
    font-size: var(--font-size-sm, 0.875rem);
    color: var(--color-neutral-500, #6b7280);
    margin: var(--spacing-1, 0.25rem) 0 0;
}

.header-badges[b-ui1sboror5] {
    display: flex;
    gap: var(--spacing-2, 0.5rem);
    flex-wrap: wrap;
    align-items: center;
}

.badge[b-ui1sboror5] {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-1, 0.25rem);
    padding: var(--spacing-1, 0.25rem) var(--spacing-3, 0.75rem);
    border-radius: var(--radius-full, 9999px);
    font-size: var(--font-size-xs, 0.75rem);
    font-weight: 600;
}

.badge-warning[b-ui1sboror5] {
    background: var(--color-warning-100, #fef3c7);
    color: var(--color-warning-700, #b45309);
}

.badge-info[b-ui1sboror5] {
    background: var(--color-info-100, #dbeafe);
    color: var(--color-info-700, #1d4ed8);
}

/* ── KPI Grid ───────────────────────────────────────────────── */
.kpi-grid[b-ui1sboror5] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-4, 1rem);
    margin-bottom: var(--spacing-6, 1.5rem);
}

@media (min-width: 768px) {
    .kpi-grid[b-ui1sboror5] {
        grid-template-columns: repeat(4, 1fr);
    }
}

.kpi-card[b-ui1sboror5] {
    background: white;
    border-radius: var(--radius-xl, 0.75rem);
    padding: var(--spacing-5, 1.25rem);
    box-shadow: var(--shadow-sm, 0 1px 2px rgb(0 0 0 / 5%));
    border: 1px solid var(--color-neutral-200, #e5e7eb);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-2, 0.5rem);
}

.kpi-icon[b-ui1sboror5] {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: var(--radius-lg, 0.5rem);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.125rem;
}

.kpi-blue .kpi-icon[b-ui1sboror5] { background: var(--color-info-100, #dbeafe); color: var(--color-info-600, #2563eb); }
.kpi-green .kpi-icon[b-ui1sboror5] { background: var(--color-success-100, #dcfce7); color: var(--color-success-600, #16a34a); }
.kpi-purple .kpi-icon[b-ui1sboror5] { background: #f3e8ff; color: #9333ea; }
.kpi-orange .kpi-icon[b-ui1sboror5] { background: var(--color-warning-100, #fef3c7); color: var(--color-warning-600, #d97706); }

.kpi-content[b-ui1sboror5] {
    display: flex;
    flex-direction: column;
}

.kpi-value[b-ui1sboror5] {
    font-size: var(--font-size-2xl, 1.5rem);
    font-weight: 700;
    color: var(--color-neutral-900, #111827);
    line-height: 1.2;
}

.kpi-label[b-ui1sboror5] {
    font-size: var(--font-size-sm, 0.875rem);
    color: var(--color-neutral-500, #6b7280);
}

.kpi-sub[b-ui1sboror5] {
    font-size: var(--font-size-xs, 0.75rem);
    color: var(--color-neutral-400, #9ca3af);
}

.attendance-bar-wrap[b-ui1sboror5] { width: 100%; }

.attendance-bar[b-ui1sboror5] {
    width: 100%;
    height: 6px;
    background: var(--color-neutral-200, #e5e7eb);
    border-radius: var(--radius-full, 9999px);
    overflow: hidden;
    margin-top: var(--spacing-1, 0.25rem);
}

.attendance-fill[b-ui1sboror5] {
    height: 100%;
    background: linear-gradient(to right, #9333ea, #6d28d9);
    border-radius: var(--radius-full, 9999px);
    max-width: 100%;
}

/* ── Middle Grid ─────────────────────────────────────────────── */
.mid-grid[b-ui1sboror5] {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--spacing-6, 1.5rem);
    margin-bottom: var(--spacing-6, 1.5rem);
}

@media (min-width: 768px) {
    .mid-grid[b-ui1sboror5] {
        grid-template-columns: 1fr 1fr;
    }
}

/* ── Card ────────────────────────────────────────────────────── */
.card[b-ui1sboror5] {
    background: white;
    border-radius: var(--radius-xl, 0.75rem);
    padding: var(--spacing-5, 1.25rem);
    box-shadow: var(--shadow-sm, 0 1px 2px rgb(0 0 0 / 5%));
    border: 1px solid var(--color-neutral-200, #e5e7eb);
    margin-bottom: var(--spacing-6, 1.5rem);
}

.card-header[b-ui1sboror5] {
    display: flex;
    align-items: center;
    gap: var(--spacing-2, 0.5rem);
    margin-bottom: var(--spacing-4, 1rem);
}

.card-header h2[b-ui1sboror5] {
    font-size: var(--font-size-base, 1rem);
    font-weight: 600;
    color: var(--color-neutral-900, #111827);
    margin: 0;
    flex: 1;
}

.card-link[b-ui1sboror5] {
    font-size: var(--font-size-sm, 0.875rem);
    color: var(--color-info-600, #2563eb);
    text-decoration: none;
    font-weight: 500;
}

.card-link:hover[b-ui1sboror5] { text-decoration: underline; }

/* ── Attention Items ─────────────────────────────────────────── */
.attention-list[b-ui1sboror5] {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-2, 0.5rem);
}

.attention-item[b-ui1sboror5] {
    display: flex;
    align-items: center;
    gap: var(--spacing-3, 0.75rem);
    padding: var(--spacing-3, 0.75rem);
    border-radius: var(--radius-lg, 0.5rem);
    font-size: var(--font-size-sm, 0.875rem);
}

.attention-item i[b-ui1sboror5] {
    width: 1.25rem;
    text-align: center;
    flex-shrink: 0;
}

.attention-item > div[b-ui1sboror5] {
    flex: 1;
    display: flex;
    align-items: center;
    gap: var(--spacing-2, 0.5rem);
}

.item-count[b-ui1sboror5] {
    font-weight: 700;
    font-size: var(--font-size-base, 1rem);
}

.item-label[b-ui1sboror5] { color: var(--color-neutral-600, #4b5563); }

.item-ok[b-ui1sboror5] { background: var(--color-neutral-50, #f9fafb); color: var(--color-neutral-500, #6b7280); }
.item-warning[b-ui1sboror5] { background: var(--color-warning-50, #fffbeb); color: var(--color-warning-700, #b45309); }
.item-error[b-ui1sboror5] { background: var(--color-error-50, #fef2f2); color: var(--color-error-700, #b91c1c); }
.item-info[b-ui1sboror5] { background: var(--color-info-50, #eff6ff); color: var(--color-info-700, #1d4ed8); }

.item-action[b-ui1sboror5] {
    margin-left: auto;
    font-size: var(--font-size-xs, 0.75rem);
    font-weight: 600;
    padding: 2px var(--spacing-2, 0.5rem);
    border-radius: var(--radius-md, 0.375rem);
    background: white;
    border: 1px solid currentcolor;
    text-decoration: none;
    color: inherit;
}

/* ── Events ─────────────────────────────────────────────────── */
.event-list[b-ui1sboror5] {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-2, 0.5rem);
}

.event-item[b-ui1sboror5] {
    display: flex;
    align-items: center;
    gap: var(--spacing-3, 0.75rem);
    padding: var(--spacing-2, 0.5rem) 0;
    border-bottom: 1px solid var(--color-neutral-100, #f3f4f6);
}

.event-item:last-child[b-ui1sboror5] { border-bottom: none; }

.event-date-badge[b-ui1sboror5] {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: var(--color-info-600, #2563eb);
    color: white;
    border-radius: var(--radius-md, 0.375rem);
    padding: var(--spacing-1, 0.25rem) var(--spacing-2, 0.5rem);
    min-width: 2.5rem;
}

.event-day[b-ui1sboror5] { font-size: var(--font-size-lg, 1.125rem); font-weight: 700; line-height: 1; }
.event-month[b-ui1sboror5] { font-size: var(--font-size-xs, 0.75rem); text-transform: uppercase; }

.event-info[b-ui1sboror5] { flex: 1; }
.event-title[b-ui1sboror5] { font-size: var(--font-size-sm, 0.875rem); font-weight: 600; color: var(--color-neutral-800, #1f2937); margin: 0; }
.event-category[b-ui1sboror5] { font-size: var(--font-size-xs, 0.75rem); color: var(--color-neutral-500, #6b7280); }

.event-countdown[b-ui1sboror5] {
    font-size: var(--font-size-xs, 0.75rem);
    font-weight: 600;
    color: var(--color-info-600, #2563eb);
    white-space: nowrap;
}

.empty-state[b-ui1sboror5] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-8, 2rem);
    color: var(--color-neutral-400, #9ca3af);
    font-size: var(--font-size-sm, 0.875rem);
    text-align: center;
}

/* ── Quick Links ─────────────────────────────────────────────── */
.quick-links-grid[b-ui1sboror5] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--spacing-3, 0.75rem);
}

@media (max-width: 640px) {
    .quick-links-grid[b-ui1sboror5] {
        grid-template-columns: repeat(2, 1fr);
    }
}

.quick-link[b-ui1sboror5] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-2, 0.5rem);
    padding: var(--spacing-4, 1rem);
    background: var(--color-neutral-50, #f9fafb);
    border: 1px solid var(--color-neutral-200, #e5e7eb);
    border-radius: var(--radius-lg, 0.5rem);
    text-decoration: none;
    color: var(--color-neutral-700, #374151);
    font-size: var(--font-size-sm, 0.875rem);
    font-weight: 500;
    transition: all 0.15s ease;
}

.quick-link:hover[b-ui1sboror5] {
    background: var(--color-info-50, #eff6ff);
    border-color: var(--color-info-300, #93c5fd);
    color: var(--color-info-700, #1d4ed8);
    transform: translateY(-1px);
    box-shadow: var(--shadow-sm, 0 1px 2px rgb(0 0 0 / 5%));
}

.quick-link i[b-ui1sboror5] {
    font-size: 1.25rem;
}
/* /Pages/VicePrincipal/Discipline/Index.razor.rz.scp.css */
/* ── KPI skeleton loader ────────────────────────────────────────────────── */
.kpi-skeleton[b-jionck4tsj] {
    width: 3rem;
    height: 1.75rem;
    border-radius: 6px;
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: shimmer-b-jionck4tsj 1.4s infinite;
}

@keyframes shimmer-b-jionck4tsj {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ── Severity badges ────────────────────────────────────────────────────── */
.severity-badge[b-jionck4tsj] {
    display: inline-block;
    font-size: 0.7rem;
    font-weight: 600;
    padding: 0.15rem 0.6rem;
    border-radius: 9999px;
}

.severity-high[b-jionck4tsj] {
    background-color: #fee2e2;
    color: #b91c1c;
}

.severity-medium[b-jionck4tsj] {
    background-color: #fef3c7;
    color: #b45309;
}

.severity-low[b-jionck4tsj] {
    background-color: #f3f4f6;
    color: #4b5563;
}

/* ── Compact property rows (detail modal) ───────────────────────────────── */
.prop-section[b-jionck4tsj] {
    margin-bottom: 1.25rem;
}

.prop-section-title[b-jionck4tsj] {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-neutral-400);
    padding-bottom: 0.4rem;
    border-bottom: 1px solid var(--color-neutral-100);
    margin-bottom: 0.25rem;
}

.prop-row[b-jionck4tsj] {
    display: flex;
    align-items: baseline;
    padding: 0.35rem 0;
    border-bottom: 1px solid var(--color-neutral-50);
}

.prop-label[b-jionck4tsj] {
    width: 130px;
    flex-shrink: 0;
    font-size: 0.78rem;
    color: var(--color-neutral-500);
    font-weight: 500;
}

.prop-value[b-jionck4tsj] {
    font-size: 0.875rem;
    color: var(--color-neutral-900);
    font-weight: 500;
}

/* /Pages/VicePrincipal/Events/Index.razor.rz.scp.css */
/* placeholder */
/* /Pages/VicePrincipal/Finance/Index.razor.rz.scp.css */
/* placeholder */
/* /Pages/VicePrincipal/Inbox/Index.razor.rz.scp.css */
/* Styles handled via Tailwind utility classes in markup */
/* /Pages/VicePrincipal/Payroll/Approvals.razor.rz.scp.css */
/* Payroll approval styles are owned by Components/Approvals/PayrollApprovalsView.razor.css. *//* ── KPI Cards (pending run) ───────────────────────────────── */
[b-zsibpl33m8] .papr-kpi-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin-bottom: 20px;
}
@media (max-width: 640px) {
    [b-zsibpl33m8] .papr-kpi-grid { grid-template-columns: repeat(2, 1fr); }
}
[b-zsibpl33m8] .papr-kpi-card {
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    padding: 14px 16px;
    text-align: center;
}
[b-zsibpl33m8] .papr-kpi-card-red  { background: #fff5f5; border-color: #fecaca; }
[b-zsibpl33m8] .papr-kpi-card-green { background: #f0fdf4; border-color: #bbf7d0; }

[b-zsibpl33m8] .papr-kpi-label {
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #6b7280;
    margin-bottom: 6px;
}
[b-zsibpl33m8] .papr-kpi-value {
    font-size: 1.35rem;
    font-weight: 800;
    color: #111827;
    font-variant-numeric: tabular-nums;
    line-height: 1.1;
}
[b-zsibpl33m8] .papr-kpi-red   { color: #dc2626; }
[b-zsibpl33m8] .papr-kpi-green { color: #059669; }
[b-zsibpl33m8] .papr-kpi-sub {
    font-size: 0.68rem;
    color: #9ca3af;
    margin-top: 3px;
}

/* ── Audit Timeline ─────────────────────────────────────────── */
[b-zsibpl33m8] .papr-timeline {
    display: flex;
    align-items: center;
    gap: 0;
    padding: 12px 0;
    overflow-x: auto;
    scrollbar-width: none;
}
[b-zsibpl33m8] .papr-timeline::-webkit-scrollbar { display: none; }

[b-zsibpl33m8] .papr-step {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

[b-zsibpl33m8] .papr-dot {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    flex-shrink: 0;
    border: 2px solid transparent;
}
[b-zsibpl33m8] .papr-dot-green  { background: #d1fae5; color: #059669; border-color: #6ee7b7; }
[b-zsibpl33m8] .papr-dot-amber  { background: #fef3c7; color: #d97706; border-color: #fcd34d; box-shadow: 0 0 0 3px rgba(217,119,6,0.15); }
[b-zsibpl33m8] .papr-dot-red    { background: #fee2e2; color: #dc2626; border-color: #fca5a5; }
[b-zsibpl33m8] .papr-dot-gray   { background: #f3f4f6; color: #d1d5db; border-color: #e5e7eb; }

[b-zsibpl33m8] .papr-step-text { min-width: 110px; }
[b-zsibpl33m8] .papr-step-label { font-size: 0.75rem; font-weight: 700; color: #374151; line-height: 1.2; white-space: nowrap; }
[b-zsibpl33m8] .papr-step-sub   { font-size: 0.68rem; color: #9ca3af; margin-top: 2px; white-space: nowrap; }

[b-zsibpl33m8] .papr-step-active .papr-dot-amber { animation: papr-pulse-b-zsibpl33m8 2s ease-in-out infinite; }
[b-zsibpl33m8] .papr-step-active .papr-step-label { color: #d97706; }
[b-zsibpl33m8] .papr-step-dim   .papr-step-label  { color: #d1d5db; }
[b-zsibpl33m8] .papr-step-dim   .papr-step-sub    { color: #e5e7eb; }

@keyframes papr-pulse-b-zsibpl33m8 {
    0%, 100% { box-shadow: 0 0 0 3px rgba(217,119,6,0.15); }
    50%       { box-shadow: 0 0 0 6px rgba(217,119,6,0.08); }
}

[b-zsibpl33m8] .papr-line {
    flex: 1;
    height: 2px;
    background: #10b981;
    min-width: 20px;
    margin: 0 4px;
}
[b-zsibpl33m8] .papr-line-dim { background: #e5e7eb; }

/* ── History Table ──────────────────────────────────────────── */
[b-zsibpl33m8] .papr-th {
    padding: 10px 16px;
    text-align: left;
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #6b7280;
    white-space: nowrap;
}
[b-zsibpl33m8] .papr-th-right  { text-align: right; }
[b-zsibpl33m8] .papr-th-center { text-align: center; }

[b-zsibpl33m8] .papr-row {
    border-bottom: 1px solid #f3f4f6;
    transition: background 0.12s;
}
[b-zsibpl33m8] .papr-row:hover { background: #f9fafb; }

[b-zsibpl33m8] .papr-td {
    padding: 14px 16px;
    font-size: 0.8125rem;
    color: #374151;
    font-variant-numeric: tabular-nums;
}
[b-zsibpl33m8] .papr-td-right { text-align: right; font-weight: 600; color: #111827; }

[b-zsibpl33m8] .papr-net {
    font-weight: 800;
    color: #0e7490;
    font-size: 0.875rem;
}

[b-zsibpl33m8] .papr-variance {
    font-size: 0.72rem;
    font-weight: 700;
    margin-top: 3px;
    display: flex;
    align-items: center;
    gap: 3px;
    justify-content: flex-end;
    letter-spacing: -0.01em;
}
[b-zsibpl33m8] .papr-variance-up   { color: #059669; }
[b-zsibpl33m8] .papr-variance-down { color: #dc2626; }

/* ── Status Chips ───────────────────────────────────────────── */
[b-zsibpl33m8] .papr-chip {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    white-space: nowrap;
}
[b-zsibpl33m8] .papr-chip-green { background: #dcfce7; color: #15803d; }
[b-zsibpl33m8] .papr-chip-blue  { background: #dbeafe; color: #1d4ed8; }
[b-zsibpl33m8] .papr-chip-red   { background: #fee2e2; color: #b91c1c; }
[b-zsibpl33m8] .papr-chip-amber { background: #fef3c7; color: #b45309; }
[b-zsibpl33m8] .papr-chip-gray  { background: #f3f4f6; color: #6b7280; }

/* ── View Button ────────────────────────────────────────────── */
[b-zsibpl33m8] .papr-view-btn {
    display: inline-flex;
    align-items: center;
    padding: 5px 12px;
    border: 1px solid #e0f2fe;
    background: #f0f9ff;
    color: #0369a1;
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.12s;
    white-space: nowrap;
}
[b-zsibpl33m8] .papr-view-btn:hover {
    background: #e0f2fe;
    border-color: #bae6fd;
    color: #075985;
}

/* ── Modal KPI Grid ─────────────────────────────────────────── */
[b-zsibpl33m8] .papr-modal-kpi-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    border-bottom: 1px solid #f3f4f6;
}
@media (max-width: 640px) {
    [b-zsibpl33m8] .papr-modal-kpi-grid { grid-template-columns: repeat(2, 1fr); }
}
[b-zsibpl33m8] .papr-modal-kpi {
    padding: 16px 20px;
    text-align: center;
    border-right: 1px solid #f3f4f6;
}
[b-zsibpl33m8] .papr-modal-kpi:last-child { border-right: none; }
[b-zsibpl33m8] .papr-modal-kpi-green { background: #f0fdf4; border-right: none; }
[b-zsibpl33m8] .papr-modal-green { color: #15803d; }
[b-zsibpl33m8] .papr-modal-kpi-red { background: #fff5f5; }

[b-zsibpl33m8] .papr-modal-kpi-label {
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #9ca3af;
    margin-bottom: 6px;
}
[b-zsibpl33m8] .papr-modal-kpi-value {
    font-size: 1.6rem;
    font-weight: 800;
    color: #111827;
    font-variant-numeric: tabular-nums;
    line-height: 1.1;
}
[b-zsibpl33m8] .papr-modal-red { color: #dc2626; }
[b-zsibpl33m8] .papr-modal-kpi-sub {
    font-size: 0.67rem;
    color: #9ca3af;
    margin-top: 3px;
}

@media (max-width: 640px) {
    [b-zsibpl33m8] .papr-timeline { padding: 8px 0; }
    [b-zsibpl33m8] .papr-step-text { min-width: 70px; }
    [b-zsibpl33m8] .papr-step-label { font-size: 0.7rem; white-space: nowrap; }
    [b-zsibpl33m8] .papr-step-sub   { display: none; }
    [b-zsibpl33m8] .papr-line { min-width: 12px; }
}

/* ── Table improvements ─────────────────────────────────────── */
[b-zsibpl33m8] .papr-thead-row {
    background: #f8fafc;
    border-bottom: 1px solid #e5e7eb;
}
[b-zsibpl33m8] .papr-row:nth-child(even) { background: #fafafa; }
[b-zsibpl33m8] .papr-row-alt { background: #fafafa; }
[b-zsibpl33m8] .papr-row-alt:hover { background: #f3f4f6; }

[b-zsibpl33m8] .papr-totals-row {
    background: #f8fafc;
    border-top: 2px solid #e5e7eb;
}
[b-zsibpl33m8] .papr-totals-row .papr-td { padding: 12px 16px; }

/* ── Modal sections ─────────────────────────────────────────── */
[b-zsibpl33m8] .papr-section-title {
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #6b7280;
    margin-bottom: 4px;
}
[b-zsibpl33m8] .papr-section-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #e5e7eb;
    color: #374151;
    font-size: 0.68rem;
    font-weight: 700;
    border-radius: 999px;
    padding: 2px 7px;
    margin-left: 6px;
}

/* ── Deduction cards ────────────────────────────────────────── */
[b-zsibpl33m8] .papr-deduct-card {
    background: #fff8f8;
    border: 1px solid #fecaca;
    border-radius: 8px;
    padding: 12px 14px;
    text-align: center;
}
[b-zsibpl33m8] .papr-deduct-icon {
    font-size: 1rem;
    color: #f87171;
    margin-bottom: 6px;
}
[b-zsibpl33m8] .papr-deduct-label {
    font-size: 0.68rem;
    font-weight: 600;
    color: #9ca3af;
    margin-bottom: 4px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
[b-zsibpl33m8] .papr-deduct-value {
    font-size: 1.1rem;
    font-weight: 800;
    color: #dc2626;
    font-variant-numeric: tabular-nums;
    line-height: 1.1;
}
[b-zsibpl33m8] .papr-deduct-pct {
    font-size: 0.67rem;
    color: #ef4444;
    margin-top: 3px;
    opacity: 0.75;
}

/* ── Insight rows ───────────────────────────────────────────── */
[b-zsibpl33m8] .papr-insight-row {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 6px 0;
    font-size: 0.8125rem;
    color: #374151;
}
[b-zsibpl33m8] .papr-insight-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
    margin-top: 4px;
}
[b-zsibpl33m8] .papr-insight-text { line-height: 1.4; }
[b-zsibpl33m8] .papr-insight-text strong { color: #111827; }

/* ── Modal footer ───────────────────────────────────────────── */
[b-zsibpl33m8] .papr-modal-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 24px;
    border-top: 1px solid #f3f4f6;
    background: #f9fafb;
    flex-shrink: 0;
    border-radius: 0 0 16px 16px;
}
[b-zsibpl33m8] .papr-close-btn {
    display: inline-flex;
    align-items: center;
    padding: 7px 16px;
    border: 1px solid #e5e7eb;
    background: #fff;
    color: #374151;
    border-radius: 8px;
    font-size: 0.8125rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.12s;
}
[b-zsibpl33m8] .papr-close-btn:hover {
    background: #f3f4f6;
    border-color: #d1d5db;
}
/* /Pages/VicePrincipal/Reports/Index.razor.rz.scp.css */
/* placeholder */
/* /Pages/VicePrincipal/Students/Details.razor.rz.scp.css */
.vp-student-details[b-cb8f82lr11] {
    padding: 1.5rem;
    max-width: 1200px;
    margin: 0 auto;
}

.details-header[b-cb8f82lr11] {
    margin-bottom: 1.25rem;
}

.back-btn[b-cb8f82lr11] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: var(--color-neutral-0, #fff);
    border: 1.5px solid var(--color-neutral-300, #d1d5db);
    border-radius: var(--radius-sm, 6px);
    color: var(--color-neutral-700, #374151);
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s;
}

.back-btn:hover[b-cb8f82lr11] {
    border-color: var(--color-primary-400, #34d399);
    background: var(--color-primary-50, #ecfdf5);
    color: var(--color-primary-700, #047857);
}

/* Profile card */
.profile-card[b-cb8f82lr11] {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    background: white;
    border: 1.5px solid var(--color-neutral-200, #e5e7eb);
    border-radius: var(--radius-md, 8px);
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}

.profile-left[b-cb8f82lr11] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
}

.avatar[b-cb8f82lr11] {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: var(--color-primary-100, #d1fae5);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border: 3px solid white;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.avatar img[b-cb8f82lr11] { width: 100%; height: 100%; object-fit: cover; }
.avatar i[b-cb8f82lr11] { font-size: 2rem; color: var(--color-primary-600, #059669); }

.status-badge[b-cb8f82lr11] {
    padding: 0.2rem 0.75rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 700;
}
.status-badge.active[b-cb8f82lr11] { background: var(--color-success-100, #d1fae5); color: var(--color-success-800, #065f46); }
.status-badge.inactive[b-cb8f82lr11] { background: var(--color-neutral-200, #e5e7eb); color: var(--color-neutral-700, #374151); }

.profile-info h1[b-cb8f82lr11] {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--color-neutral-900, #111827);
    margin: 0 0 0.5rem 0;
}

.meta-row[b-cb8f82lr11] {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    font-size: 0.875rem;
    color: var(--color-neutral-600, #4b5563);
}

.meta-row i[b-cb8f82lr11] { color: var(--color-primary-600, #059669); margin-right: 0.25rem; }

/* Tabs */
.tabs-bar[b-cb8f82lr11] {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    border-bottom: 2px solid var(--color-neutral-200, #e5e7eb);
    margin-bottom: 1.5rem;
    overflow-x: auto;
}

.tab[b-cb8f82lr11] {
    padding: 0.75rem 1.25rem;
    border: none;
    background: transparent;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-neutral-600, #4b5563);
    cursor: pointer;
    transition: all 0.15s;
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    border-bottom: 3px solid transparent;
    margin-bottom: -2px;
}

.tab:hover[b-cb8f82lr11] { color: var(--color-neutral-900, #111827); background: var(--color-neutral-50, #f9fafb); }
.tab.active[b-cb8f82lr11] { color: var(--color-primary-700, #047857); border-bottom-color: var(--color-primary-600, #059669); }

/* Tab content */
.tab-content[b-cb8f82lr11] { animation: fadeIn-b-cb8f82lr11 0.25s ease; }
@keyframes fadeIn-b-cb8f82lr11 { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }

/* ── Compact key-value rows (NNGroup / Salesforce / GitHub standard) ── */
.prop-panel[b-cb8f82lr11] {
    background: white;
    border: 1px solid var(--color-neutral-200, #e5e7eb);
    border-radius: var(--radius-md, 8px);
    padding: 1.25rem 1.5rem;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
    max-width: 780px;
}

.prop-section[b-cb8f82lr11] {
    margin-bottom: 1.25rem;
}

.prop-section:last-child[b-cb8f82lr11] {
    margin-bottom: 0;
}

.prop-section-title[b-cb8f82lr11] {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-neutral-400, #9ca3af);
    padding-bottom: 0.4rem;
    border-bottom: 1px solid var(--color-neutral-200, #e5e7eb);
    margin-bottom: 0.1rem;
}

.prop-row[b-cb8f82lr11] {
    display: flex;
    align-items: baseline;
    padding: 0.35rem 0;
    border-bottom: 1px solid var(--color-neutral-50, #f9fafb);
}

.prop-row:last-child[b-cb8f82lr11] {
    border-bottom: none;
}

.prop-label[b-cb8f82lr11] {
    width: 170px;
    flex-shrink: 0;
    font-size: 0.78rem;
    color: var(--color-neutral-500, #6b7280);
    font-weight: 500;
}

.prop-value[b-cb8f82lr11] {
    font-size: 0.875rem;
    color: var(--color-neutral-900, #111827);
    font-weight: 500;
    word-break: break-word;
}

.prop-empty[b-cb8f82lr11] {
    font-size: 0.875rem;
    color: var(--color-neutral-400, #9ca3af);
    padding: 0.5rem 0;
}

.not-found[b-cb8f82lr11] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 200px;
    color: var(--color-neutral-500, #6b7280);
    gap: 0.75rem;
}
.not-found i[b-cb8f82lr11] { font-size: 2.5rem; }

/* Achievements placeholder */
.placeholder-box[b-cb8f82lr11] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4rem 1rem;
    text-align: center;
    color: var(--color-neutral-400, #9ca3af);
    gap: 0.75rem;
}
.placeholder-box i[b-cb8f82lr11] { font-size: 3rem; color: #fcd34d; }
.placeholder-box p[b-cb8f82lr11] { font-size: 1rem; margin: 0; }
.placeholder-box small[b-cb8f82lr11] { font-size: 0.8rem; }

@media (max-width: 640px) {
    .profile-card[b-cb8f82lr11] { flex-direction: column; text-align: center; }
    .meta-row[b-cb8f82lr11] { justify-content: center; }
    .card-grid[b-cb8f82lr11] { grid-template-columns: 1fr; }
}
/* /Pages/VicePrincipal/Students/Index.razor.rz.scp.css */
/* placeholder */
/* /Pages/VicePrincipal/Teachers/AssignClasses/Index.razor.rz.scp.css */
/* AssignClasses/Index — teacher cards grid */
/* All styling via inline Tailwind. This file satisfies the paired .razor.css requirement. */
/* /Pages/VicePrincipal/Teachers/AssignClasses/Manage.razor.rz.scp.css */
/* AssignClasses/Manage — subject-first, class-block layout */

.teacher-avatar[b-gwmsfnqt7m] {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 9999px;
    background-color: var(--color-info-600, #2563eb);
    color: #fff;
    font-weight: 700;
    font-size: 0.8125rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.class-card[b-gwmsfnqt7m] {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 1rem;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0,0,0,.06);
}

.class-card-header[b-gwmsfnqt7m] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1.25rem;
    background: #f9fafb;
    border-bottom: 1px solid #e5e7eb;
    gap: 0.75rem;
}

.subject-grid[b-gwmsfnqt7m] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 0.5rem;
}

.subject-chip[b-gwmsfnqt7m] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    border-radius: 0.625rem;
    border: 1px solid;
    cursor: pointer;
    user-select: none;
    transition: background 0.15s, border-color 0.15s, box-shadow 0.15s;
    font-size: 0.8125rem;
    line-height: 1.25;
}

.subject-chip--on[b-gwmsfnqt7m] {
    background: #eff6ff;
    border-color: #3b82f6;
    color: #1d4ed8;
    box-shadow: 0 0 0 1px #3b82f6;
    font-weight: 600;
}

.subject-chip--off[b-gwmsfnqt7m] {
    background: #fff;
    border-color: #e5e7eb;
    color: #374151;
}

.subject-chip--off:hover[b-gwmsfnqt7m] {
    border-color: #93c5fd;
    background: #eff6ff;
}

@media (max-width: 640px) {
    .subject-grid[b-gwmsfnqt7m] {
        grid-template-columns: repeat(2, 1fr);
    }
}
/* /Pages/VicePrincipal/Teachers/Details.razor.rz.scp.css */
.vp-teacher-details[b-qnjalkuamo] {
    padding: 1.5rem;
    max-width: 1200px;
    margin: 0 auto;
}

.details-header[b-qnjalkuamo] {
    margin-bottom: 1.25rem;
}

.back-btn[b-qnjalkuamo] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: var(--color-neutral-0, #fff);
    border: 1.5px solid var(--color-neutral-300, #d1d5db);
    border-radius: var(--radius-sm, 6px);
    color: var(--color-neutral-700, #374151);
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s;
}

.back-btn:hover[b-qnjalkuamo] {
    border-color: var(--color-primary-400, #34d399);
    background: var(--color-primary-50, #ecfdf5);
    color: var(--color-primary-700, #047857);
}

/* Profile card */
.profile-card[b-qnjalkuamo] {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    background: white;
    border: 1.5px solid var(--color-neutral-200, #e5e7eb);
    border-radius: var(--radius-md, 8px);
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}

.profile-left[b-qnjalkuamo] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
}

.avatar[b-qnjalkuamo] {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: var(--color-primary-100, #d1fae5);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border: 3px solid white;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.avatar i[b-qnjalkuamo] { font-size: 2rem; color: var(--color-primary-600, #059669); }

.status-badge[b-qnjalkuamo] {
    padding: 0.2rem 0.75rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 700;
}
.status-badge.active[b-qnjalkuamo] { background: var(--color-success-100, #d1fae5); color: var(--color-success-800, #065f46); }
.status-badge.inactive[b-qnjalkuamo] { background: var(--color-neutral-200, #e5e7eb); color: var(--color-neutral-700, #374151); }

.profile-info h1[b-qnjalkuamo] {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--color-neutral-900, #111827);
    margin: 0 0 0.5rem 0;
}

.meta-row[b-qnjalkuamo] {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    font-size: 0.875rem;
    color: var(--color-neutral-600, #4b5563);
}

.meta-row i[b-qnjalkuamo] { color: var(--color-primary-600, #059669); margin-right: 0.25rem; }

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

.stat-card[b-qnjalkuamo] {
    background: white;
    border: 1.5px solid var(--color-neutral-200, #e5e7eb);
    border-radius: var(--radius-md, 8px);
    padding: 1.25rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}

.stat-icon[b-qnjalkuamo] {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-md, 8px);
    background: var(--color-primary-100, #d1fae5);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.stat-icon i[b-qnjalkuamo] { font-size: 1.25rem; color: var(--color-primary-600, #059669); }

.stat-value[b-qnjalkuamo] {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--color-neutral-900, #111827);
    line-height: 1;
}

.stat-label[b-qnjalkuamo] {
    font-size: 0.75rem;
    color: var(--color-neutral-500, #6b7280);
    margin-top: 0.25rem;
}

/* Tabs */
.tabs-bar[b-qnjalkuamo] {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    border-bottom: 2px solid var(--color-neutral-200, #e5e7eb);
    margin-bottom: 1.5rem;
}

.tab[b-qnjalkuamo] {
    padding: 0.75rem 1.25rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-neutral-500, #6b7280);
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    cursor: pointer;
    transition: all 0.15s;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.tab:hover[b-qnjalkuamo] { color: var(--color-neutral-700, #374151); }
.tab.active[b-qnjalkuamo] {
    color: var(--color-primary-700, #047857);
    border-bottom-color: var(--color-primary-500, #10b981);
}

/* Tab content */
.tab-content[b-qnjalkuamo] { margin-bottom: 2rem; }

/* Property panel (compact key-value rows) */
.prop-panel[b-qnjalkuamo] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 1.5rem;
}

.prop-section[b-qnjalkuamo] {
    background: white;
    border: 1.5px solid var(--color-neutral-200, #e5e7eb);
    border-radius: var(--radius-md, 8px);
    padding: 1.25rem;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}

.prop-section-title[b-qnjalkuamo] {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-neutral-400, #9ca3af);
    padding-bottom: 0.4rem;
    border-bottom: 1px solid var(--color-neutral-100, #f3f4f6);
    margin-bottom: 0.25rem;
}

.prop-row[b-qnjalkuamo] {
    display: flex;
    align-items: baseline;
    padding: 0.35rem 0;
    border-bottom: 1px solid var(--color-neutral-50, #f9fafb);
}

.prop-label[b-qnjalkuamo] {
    width: 160px;
    flex-shrink: 0;
    font-size: 0.78rem;
    color: var(--color-neutral-500, #6b7280);
    font-weight: 500;
}

.prop-value[b-qnjalkuamo] {
    font-size: 0.875rem;
    color: var(--color-neutral-900, #111827);
    font-weight: 500;
}

/* Status pills */
.status-pill[b-qnjalkuamo] {
    display: inline-flex;
    align-items: center;
    padding: 0.15rem 0.6rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
}
.status-pill.status-active[b-qnjalkuamo] { background: var(--color-success-100, #d1fae5); color: var(--color-success-800, #065f46); }
.status-pill.status-leave[b-qnjalkuamo] { background: var(--color-warning-100, #fef3c7); color: var(--color-warning-800, #92400e); }
.status-pill.status-inactive[b-qnjalkuamo] { background: var(--color-neutral-200, #e5e7eb); color: var(--color-neutral-700, #374151); }

/* Assignments table */
.assignments-table-wrap[b-qnjalkuamo] {
    background: white;
    border: 1.5px solid var(--color-neutral-200, #e5e7eb);
    border-radius: var(--radius-md, 8px);
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}

.assignments-table[b-qnjalkuamo] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
}

.assignments-table thead[b-qnjalkuamo] {
    background: var(--color-neutral-50, #f9fafb);
}

.assignments-table th[b-qnjalkuamo] {
    text-align: left;
    padding: 0.75rem 1rem;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--color-neutral-500, #6b7280);
    border-bottom: 1px solid var(--color-neutral-200, #e5e7eb);
}

.assignments-table td[b-qnjalkuamo] {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--color-neutral-100, #f3f4f6);
    color: var(--color-neutral-700, #374151);
}

.assignments-table tbody tr:last-child td[b-qnjalkuamo] { border-bottom: none; }

.ct-badge[b-qnjalkuamo] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    background: var(--color-warning-100, #fef3c7);
    color: var(--color-warning-800, #92400e);
}

/* Placeholder / empty state */
.placeholder-box[b-qnjalkuamo] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem;
    background: var(--color-neutral-50, #f9fafb);
    border: 1.5px dashed var(--color-neutral-300, #d1d5db);
    border-radius: var(--radius-md, 8px);
    text-align: center;
    color: var(--color-neutral-500, #6b7280);
}

.placeholder-box i[b-qnjalkuamo] { font-size: 2rem; margin-bottom: 0.75rem; color: var(--color-neutral-400, #9ca3af); }
.placeholder-box p[b-qnjalkuamo] { font-size: 0.875rem; font-weight: 500; margin: 0; }

/* Not found */
.not-found[b-qnjalkuamo] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4rem;
    text-align: center;
    color: var(--color-neutral-500, #6b7280);
}

.not-found i[b-qnjalkuamo] { font-size: 3rem; margin-bottom: 1rem; color: var(--color-neutral-400, #9ca3af); }
.not-found p[b-qnjalkuamo] { font-size: 1rem; font-weight: 500; margin: 0; }

/* Responsive */
@media (max-width: 640px) {
    .vp-teacher-details[b-qnjalkuamo] { padding: 1rem; }
    .profile-card[b-qnjalkuamo] { flex-direction: column; align-items: flex-start; }
    .stats-grid[b-qnjalkuamo] { grid-template-columns: 1fr; }
    .prop-panel[b-qnjalkuamo] { grid-template-columns: 1fr; }
    .prop-label[b-qnjalkuamo] { width: 120px; }
    .assignments-table-wrap[b-qnjalkuamo] { overflow-x: auto; }
    .assignments-table[b-qnjalkuamo] { min-width: 600px; }
}
/* /Pages/VicePrincipal/Teachers/Index.razor.rz.scp.css */
/* placeholder */
/* /Pages/Warden/Attendance.razor.rz.scp.css */
/* shared warden page styles */
.loading-center[b-irjnousqgd] { display: flex; justify-content: center; padding: 2rem; }
.spinner[b-irjnousqgd] { width: 2rem; height: 2rem; border: 3px solid #e5e7eb; border-top-color: #7c3aed; border-radius: 50%; animation: spin-b-irjnousqgd 0.6s linear infinite; }
@keyframes spin-b-irjnousqgd { to { transform: rotate(360deg); } }

.warden-page[b-irjnousqgd] { padding: 1.5rem; }
.page-header[b-irjnousqgd] { margin-bottom: 1.5rem; }
.page-title[b-irjnousqgd] { font-size: 1.5rem; font-weight: 700; color: #111827; margin: 0 0 0.25rem; }
.page-subtitle[b-irjnousqgd] { color: #6b7280; margin: 0; font-size: 0.875rem; }

.alert[b-irjnousqgd] { padding: 0.75rem 1rem; border-radius: 0.5rem; margin-bottom: 1rem; font-size: 0.875rem; }
.alert-danger[b-irjnousqgd] { background: #fef2f2; color: #dc2626; border: 1px solid #fecaca; }
.alert-success[b-irjnousqgd] { background: #f0fdf4; color: #166534; border: 1px solid #bbf7d0; }

.filter-row[b-irjnousqgd] { display: flex; gap: 0.75rem; margin-bottom: 1.25rem; align-items: flex-end; flex-wrap: wrap; }
.filter-group[b-irjnousqgd] { display: flex; flex-direction: column; gap: 0.3rem; }
.filter-group label[b-irjnousqgd] { font-size: 0.75rem; font-weight: 600; color: #374151; }
.filter-group select[b-irjnousqgd], .filter-group input[b-irjnousqgd] { padding: 0.4rem 0.75rem; border: 1px solid #d1d5db; border-radius: 0.375rem; font-size: 0.875rem; }

.btn[b-irjnousqgd] { padding: 0.5rem 1.25rem; border-radius: 0.5rem; border: none; cursor: pointer; font-size: 0.875rem; font-weight: 600; }
.btn-sm[b-irjnousqgd] { padding: 0.3rem 0.75rem; border-radius: 0.375rem; border: none; cursor: pointer; font-size: 0.75rem; font-weight: 600; }

.table-container[b-irjnousqgd] { background: #fff; border-radius: 0.75rem; border: 1px solid #e5e7eb; overflow-x: auto; }
.data-table[b-irjnousqgd] { width: 100%; border-collapse: collapse; font-size: 0.875rem; }
.data-table th[b-irjnousqgd] { padding: 0.75rem 1rem; text-align: left; background: #f9fafb; border-bottom: 1px solid #e5e7eb; font-weight: 600; color: #374151; }
.data-table td[b-irjnousqgd] { padding: 0.75rem 1rem; border-bottom: 1px solid #f3f4f6; color: #374151; }
.data-table tr:last-child td[b-irjnousqgd] { border-bottom: none; }
.empty-row[b-irjnousqgd] { text-align: center; color: #9ca3af; font-style: italic; padding: 2rem !important; }

.badge[b-irjnousqgd] { display: inline-block; padding: 0.2rem 0.6rem; border-radius: 9999px; font-size: 0.75rem; font-weight: 600; }
.badge-green[b-irjnousqgd] { background: #d1fae5; color: #065f46; }
.badge-yellow[b-irjnousqgd] { background: #fef3c7; color: #92400e; }
.badge-red[b-irjnousqgd] { background: #fee2e2; color: #991b1b; }
.badge-blue[b-irjnousqgd] { background: #dbeafe; color: #1e40af; }
.badge-orange[b-irjnousqgd] { background: #ffedd5; color: #9a3412; }
.badge-gray[b-irjnousqgd] { background: #f3f4f6; color: #374151; }

.modal-overlay[b-irjnousqgd] { position: fixed; inset: 0; background: rgba(0,0,0,0.5); display: flex; align-items: center; justify-content: center; z-index: 1000; }
.modal[b-irjnousqgd] { background: #fff; border-radius: 0.75rem; padding: 1.5rem; width: 90%; max-width: 500px; max-height: 90vh; overflow-y: auto; }
.modal h3[b-irjnousqgd] { margin: 0 0 1rem; font-size: 1.1rem; font-weight: 700; }
.modal-footer[b-irjnousqgd] { display: flex; gap: 0.75rem; justify-content: flex-end; margin-top: 1.25rem; }

.form-row[b-irjnousqgd] { display: flex; flex-direction: column; gap: 0.3rem; margin-bottom: 0.875rem; }
.form-row label[b-irjnousqgd] { font-size: 0.8rem; font-weight: 600; color: #374151; }
.form-row input[b-irjnousqgd], .form-row select[b-irjnousqgd], .form-row textarea[b-irjnousqgd] { padding: 0.5rem 0.75rem; border: 1px solid #d1d5db; border-radius: 0.375rem; font-size: 0.875rem; }
.form-row textarea[b-irjnousqgd] { resize: vertical; min-height: 80px; }

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

.attendance-grid[b-irjnousqgd] { display: grid; gap: 0.5rem; }
.attendance-student-row[b-irjnousqgd] { display: flex; justify-content: space-between; align-items: center; padding: 0.75rem 1rem; background: #fff; border: 1px solid #e5e7eb; border-radius: 0.5rem; }
.attendance-student-name[b-irjnousqgd] { font-weight: 500; font-size: 0.875rem; }
.attendance-toggle[b-irjnousqgd] { display: flex; gap: 0.5rem; }
.toggle-btn[b-irjnousqgd] { padding: 0.3rem 0.75rem; border-radius: 0.375rem; border: 1px solid; cursor: pointer; font-size: 0.75rem; font-weight: 600; }
.toggle-present[b-irjnousqgd] { background: #d1fae5; color: #065f46; border-color: #6ee7b7; }
.toggle-present.active[b-irjnousqgd] { background: #065f46; color: #fff; }
.toggle-absent[b-irjnousqgd] { background: #fee2e2; color: #991b1b; border-color: #fca5a5; }
.toggle-absent.active[b-irjnousqgd] { background: #991b1b; color: #fff; }
/* /Pages/Warden/Discharges.razor.rz.scp.css */
.discharge-page[b-iypvzpjg9w] {
    padding: var(--spacing-6, 1.5rem);
    max-width: 1200px;
    margin: 0 auto;
}
.page-header[b-iypvzpjg9w] {
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: var(--spacing-4, 1rem); margin-bottom: var(--spacing-6, 1.5rem); flex-wrap: wrap;
}
.page-title[b-iypvzpjg9w] { font-size: 1.5rem; font-weight: 700; color: var(--color-text-primary, #111827); margin: 0; }
.page-subtitle[b-iypvzpjg9w] { font-size: 0.875rem; color: var(--color-text-secondary, #6b7280); margin: 0.25rem 0 0; }
.header-actions[b-iypvzpjg9w] { display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; }

.btn-refresh[b-iypvzpjg9w] {
    padding: 0.45rem 1rem; border: 1px solid var(--color-border, #d1d5db);
    border-radius: var(--radius-md, 6px); background: #fff; font-size: 0.875rem;
    cursor: pointer; color: var(--color-text-primary, #111827);
}
.btn-refresh:hover[b-iypvzpjg9w] { background: var(--color-bg-hover, #f3f4f6); }

.filter-row[b-iypvzpjg9w] { margin-bottom: var(--spacing-4, 1rem); }
.filter-select[b-iypvzpjg9w] {
    padding: 0.45rem 0.75rem; border: 1px solid var(--color-border, #d1d5db);
    border-radius: var(--radius-md, 6px); font-size: 0.875rem; background: #fff;
}

.empty-state[b-iypvzpjg9w] {
    padding: 2rem; text-align: center;
    background: var(--color-bg-surface, #f9fafb);
    border-radius: var(--radius-md, 6px);
    color: var(--color-text-secondary, #6b7280); font-size: 0.95rem;
}
.table-wrap[b-iypvzpjg9w] { overflow-x: auto; }
.discharge-table[b-iypvzpjg9w] { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.discharge-table th[b-iypvzpjg9w] {
    background: var(--color-bg-surface, #f9fafb); padding: 0.65rem 1rem; text-align: left;
    font-weight: 600; font-size: 0.8rem; color: var(--color-text-secondary, #6b7280);
    border-bottom: 1px solid var(--color-border, #d1d5db); white-space: nowrap;
}
.discharge-table td[b-iypvzpjg9w] {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--color-border, #d1d5db);
    color: var(--color-text-primary, #111827);
}
.discharge-table tr:last-child td[b-iypvzpjg9w] { border-bottom: none; }
.discharge-table tr:hover td[b-iypvzpjg9w] { background: var(--color-bg-hover, #f3f4f6); }

/* Status badges */
.status-badge[b-iypvzpjg9w] {
    display: inline-block; padding: 0.2rem 0.65rem;
    border-radius: 9999px; font-size: 0.75rem; font-weight: 600;
}
.status-pendingapproval[b-iypvzpjg9w] { background: #fef3c7; color: #92400e; }
.status-approved[b-iypvzpjg9w] { background: #d1fae5; color: #065f46; }
.status-rejected[b-iypvzpjg9w] { background: #fee2e2; color: #991b1b; }

.badge-dues[b-iypvzpjg9w] { background: #fee2e2; color: #b91c1c; padding: 0.2rem 0.6rem; border-radius: 9999px; font-size: 0.78rem; font-weight: 600; }
.badge-clear[b-iypvzpjg9w] { background: #d1fae5; color: #065f46; padding: 0.2rem 0.6rem; border-radius: 9999px; font-size: 0.78rem; font-weight: 600; }
.badge-issued[b-iypvzpjg9w] { background: #e0e7ff; color: #3730a3; padding: 0.2rem 0.6rem; border-radius: 9999px; font-size: 0.78rem; font-weight: 600; }

.btn-cert[b-iypvzpjg9w] {
    padding: 0.3rem 0.75rem; border: none;
    border-radius: var(--radius-sm, 4px);
    background: #e0e7ff; color: #3730a3;
    font-size: 0.8rem; font-weight: 600; cursor: pointer;
}
.btn-cert:hover[b-iypvzpjg9w] { background: #c7d2fe; }

.alert-error[b-iypvzpjg9w] {
    background: #fee2e2; color: #991b1b;
    padding: 0.75rem 1rem; border-radius: var(--radius-md, 6px);
    font-size: 0.875rem; margin-bottom: var(--spacing-4, 1rem);
}
.loading-state[b-iypvzpjg9w] {
    display: flex; flex-direction: column; align-items: center;
    gap: var(--spacing-4, 1rem); padding: 3rem;
    color: var(--color-text-secondary, #6b7280);
}
.spinner[b-iypvzpjg9w] {
    width: 36px; height: 36px;
    border: 3px solid var(--color-border, #d1d5db);
    border-top-color: var(--color-primary, #4f46e5);
    border-radius: 50%; animation: spin-b-iypvzpjg9w 0.8s linear infinite;
}
@keyframes spin-b-iypvzpjg9w { to { transform: rotate(360deg); } }

/* Modal */
.modal-overlay[b-iypvzpjg9w] {
    position: fixed; inset: 0; background: rgba(0,0,0,0.45);
    z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 1rem;
}
.modal-card[b-iypvzpjg9w] {
    background: #fff; border-radius: var(--radius-lg, 8px);
    width: 100%; max-width: 460px; box-shadow: 0 20px 60px rgba(0,0,0,0.2);
}
.modal-header[b-iypvzpjg9w] {
    display: flex; align-items: center; justify-content: space-between;
    padding: 1rem 1.25rem; border-bottom: 1px solid var(--color-border, #d1d5db);
}
.modal-header h3[b-iypvzpjg9w] { margin: 0; font-size: 1rem; font-weight: 600; }
.btn-close[b-iypvzpjg9w] { background: none; border: none; font-size: 1.4rem; cursor: pointer; color: var(--color-text-secondary, #6b7280); line-height: 1; }
.modal-body[b-iypvzpjg9w] { padding: 1.25rem; display: flex; flex-direction: column; gap: 0.75rem; }
.form-field[b-iypvzpjg9w] { display: flex; flex-direction: column; gap: 0.3rem; }
.form-label[b-iypvzpjg9w] { font-size: 0.85rem; font-weight: 600; color: var(--color-text-primary, #111827); }
.form-input[b-iypvzpjg9w] {
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--color-border, #d1d5db);
    border-radius: var(--radius-md, 6px); font-size: 0.875rem;
}
.form-textarea[b-iypvzpjg9w] {
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--color-border, #d1d5db);
    border-radius: var(--radius-md, 6px); font-size: 0.875rem; resize: vertical; font-family: inherit;
}
.modal-footer[b-iypvzpjg9w] {
    display: flex; justify-content: flex-end; gap: 0.75rem;
    padding: 1rem 1.25rem; border-top: 1px solid var(--color-border, #d1d5db);
}

@media (max-width: 640px) {
    .discharge-page[b-iypvzpjg9w] { padding: var(--spacing-4, 1rem); }
    .header-actions[b-iypvzpjg9w] { gap: 0.4rem; }
    .discharge-table th[b-iypvzpjg9w], .discharge-table td[b-iypvzpjg9w] { padding: 0.55rem 0.6rem; }
}
/* /Pages/Warden/Inbox/Index.razor.rz.scp.css */
/* Styles handled via Tailwind utility classes in markup */
/* /Pages/Warden/Incidents.razor.rz.scp.css */
/* Warden Incidents page */
.loading-center[b-znvgi7gu7v] { display: flex; justify-content: center; padding: 2rem; }
.spinner[b-znvgi7gu7v] { width: 2rem; height: 2rem; border: 3px solid #e5e7eb; border-top-color: #7c3aed; border-radius: 50%; animation: spin-b-znvgi7gu7v 0.6s linear infinite; }
@keyframes spin-b-znvgi7gu7v { to { transform: rotate(360deg); } }

.warden-page[b-znvgi7gu7v] { padding: 1.5rem; }
.section-header[b-znvgi7gu7v] { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 1.5rem; flex-wrap: wrap; gap: 1rem; }
.page-title[b-znvgi7gu7v] { font-size: 1.5rem; font-weight: 700; color: #111827; margin: 0 0 0.25rem; }
.page-subtitle[b-znvgi7gu7v] { color: #6b7280; margin: 0; font-size: 0.875rem; }

.alert[b-znvgi7gu7v] { padding: 0.75rem 1rem; border-radius: 0.5rem; margin-bottom: 1rem; font-size: 0.875rem; }
.alert-danger[b-znvgi7gu7v] { background: #fef2f2; color: #dc2626; border: 1px solid #fecaca; }

.filter-row[b-znvgi7gu7v] { display: flex; gap: 0.75rem; margin-bottom: 1.25rem; align-items: flex-end; flex-wrap: wrap; }
.filter-group[b-znvgi7gu7v] { display: flex; flex-direction: column; gap: 0.3rem; }
.filter-group label[b-znvgi7gu7v] { font-size: 0.75rem; font-weight: 600; color: #374151; }
.filter-group select[b-znvgi7gu7v] { padding: 0.4rem 0.75rem; border: 1px solid #d1d5db; border-radius: 0.375rem; font-size: 0.875rem; }

.btn[b-znvgi7gu7v] { padding: 0.5rem 1.25rem; border-radius: 0.5rem; border: none; cursor: pointer; font-size: 0.875rem; font-weight: 600; }
.btn-sm[b-znvgi7gu7v] { padding: 0.3rem 0.75rem; border-radius: 0.375rem; border: none; cursor: pointer; font-size: 0.75rem; font-weight: 600; }

.table-container[b-znvgi7gu7v] { background: #fff; border-radius: 0.75rem; border: 1px solid #e5e7eb; overflow-x: auto; }
.data-table[b-znvgi7gu7v] { width: 100%; border-collapse: collapse; font-size: 0.875rem; }
.data-table th[b-znvgi7gu7v] { padding: 0.75rem 1rem; text-align: left; background: #f9fafb; border-bottom: 1px solid #e5e7eb; font-weight: 600; color: #374151; }
.data-table td[b-znvgi7gu7v] { padding: 0.75rem 1rem; border-bottom: 1px solid #f3f4f6; color: #374151; }
.data-table tr:last-child td[b-znvgi7gu7v] { border-bottom: none; }
.empty-row[b-znvgi7gu7v] { text-align: center; color: #9ca3af; font-style: italic; padding: 2rem !important; }

.badge[b-znvgi7gu7v] { display: inline-block; padding: 0.2rem 0.6rem; border-radius: 9999px; font-size: 0.75rem; font-weight: 600; }
.badge-green[b-znvgi7gu7v] { background: #d1fae5; color: #065f46; }
.badge-yellow[b-znvgi7gu7v] { background: #fef3c7; color: #92400e; }
.badge-orange[b-znvgi7gu7v] { background: #ffedd5; color: #9a3412; }
.badge-red[b-znvgi7gu7v] { background: #fee2e2; color: #991b1b; }
.badge-gray[b-znvgi7gu7v] { background: #f3f4f6; color: #374151; }

.modal-overlay[b-znvgi7gu7v] { position: fixed; inset: 0; background: rgba(0,0,0,0.5); display: flex; align-items: center; justify-content: center; z-index: 1000; }
.modal[b-znvgi7gu7v] { background: #fff; border-radius: 0.75rem; padding: 1.5rem; width: 90%; max-width: 480px; max-height: 90vh; overflow-y: auto; }
.modal h3[b-znvgi7gu7v] { margin: 0 0 1rem; font-size: 1.1rem; font-weight: 700; }
.modal-footer[b-znvgi7gu7v] { display: flex; gap: 0.75rem; justify-content: flex-end; margin-top: 1.25rem; }

.form-row[b-znvgi7gu7v] { display: flex; flex-direction: column; gap: 0.3rem; margin-bottom: 0.875rem; }
.form-row label[b-znvgi7gu7v] { font-size: 0.8rem; font-weight: 600; color: #374151; }
.form-row input[b-znvgi7gu7v], .form-row select[b-znvgi7gu7v], .form-row textarea[b-znvgi7gu7v] { padding: 0.5rem 0.75rem; border: 1px solid #d1d5db; border-radius: 0.375rem; font-size: 0.875rem; }
.form-row textarea[b-znvgi7gu7v] { resize: vertical; min-height: 80px; }
/* /Pages/Warden/Index.razor.rz.scp.css */
.warden-dashboard[b-bgwuj3kqic] { padding: var(--space-6); }
.stats-grid[b-bgwuj3kqic] { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: var(--space-4); margin-bottom: var(--space-6); }
.stat-card[b-bgwuj3kqic] { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-4); display: flex; align-items: center; gap: var(--space-3); }
.stat-card--warning[b-bgwuj3kqic] { border-left: 4px solid var(--color-warning); }
.stat-card--danger[b-bgwuj3kqic] { border-left: 4px solid var(--color-danger); }
.stat-icon[b-bgwuj3kqic] { font-size: 1.5rem; color: var(--color-primary); width: 40px; text-align: center; }
.stat-value[b-bgwuj3kqic] { display: block; font-size: var(--text-2xl); font-weight: 700; }
.stat-label[b-bgwuj3kqic] { display: block; font-size: var(--text-xs); color: var(--color-text-secondary); }
.quick-links[b-bgwuj3kqic] { margin-top: var(--space-4); }
.link-grid[b-bgwuj3kqic] { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: var(--space-3); margin-top: var(--space-3); }
.quick-link[b-bgwuj3kqic] { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-4); text-align: center; text-decoration: none; color: var(--color-text); display: flex; flex-direction: column; align-items: center; gap: var(--space-2); transition: background .15s; }
.quick-link:hover[b-bgwuj3kqic] { background: var(--color-surface-raised); }
.quick-link i[b-bgwuj3kqic] { font-size: 1.5rem; color: var(--color-primary); }
@media (max-width: 640px) { .stats-grid[b-bgwuj3kqic] { grid-template-columns: repeat(2, 1fr); } }
/* /Pages/Warden/LeaveRequests.razor.rz.scp.css */
/* ── Page shell ─────────────────────────────────────── */
.leave-requests-page[b-9k2ut6b6l9] { padding: var(--space-6); max-width: 1100px; }
.page-header[b-9k2ut6b6l9] { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: var(--space-5); }
.page-title[b-9k2ut6b6l9]   { font-size: var(--text-2xl); font-weight: 700; color: var(--color-neutral-900); margin: 0; }
.page-subtitle[b-9k2ut6b6l9] { font-size: var(--text-sm); color: var(--color-neutral-500); margin: 0.25rem 0 0; }

/* ── Status tabs ─────────────────────────────────────── */
.tab-bar[b-9k2ut6b6l9] { display: flex; gap: var(--space-1); border-bottom: 2px solid var(--color-neutral-200); margin-bottom: var(--space-6); flex-wrap: wrap; }
.tab-btn[b-9k2ut6b6l9]  { padding: 0.75rem 1.25rem; border: none; background: none; font-size: var(--text-sm); font-weight: 500; color: var(--color-neutral-500); cursor: pointer; border-bottom: 3px solid transparent; margin-bottom: -2px; display: inline-flex; align-items: center; gap: var(--space-2); transition: color 0.15s; }
.tab-btn:hover[b-9k2ut6b6l9] { color: var(--color-primary-600); }
.tab-btn.active[b-9k2ut6b6l9] { color: var(--color-primary-700); border-bottom-color: var(--color-primary-600); font-weight: 600; }
.badge-count[b-9k2ut6b6l9] { background: var(--color-primary-600); color: white; border-radius: var(--radius-full); font-size: 0.7rem; padding: 0.1rem 0.45rem; font-weight: 700; }

/* ── States ──────────────────────────────────────────── */
.loading-indicator[b-9k2ut6b6l9] { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-8); color: var(--color-neutral-500); font-size: var(--text-sm); }
.alert-error[b-9k2ut6b6l9] { background: var(--color-danger-50); border: 1px solid var(--color-danger-200); border-radius: var(--radius-lg); padding: var(--space-4); color: var(--color-danger-800); margin-bottom: var(--space-4); }
.empty-state[b-9k2ut6b6l9] { text-align: center; padding: var(--space-10) var(--space-4); color: var(--color-neutral-400); }
.empty-state i[b-9k2ut6b6l9] { font-size: 2.5rem; display: block; margin-bottom: var(--space-3); }
.empty-state p[b-9k2ut6b6l9] { font-size: var(--text-sm); margin: 0; }

/* ── Table ───────────────────────────────────────────── */
.requests-table-wrap[b-9k2ut6b6l9] { background: white; border-radius: var(--radius-xl); box-shadow: var(--shadow-md); overflow-x: auto; }
.data-table[b-9k2ut6b6l9] { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
.data-table th[b-9k2ut6b6l9] { padding: 0.75rem 1rem; text-align: left; background: var(--color-neutral-50); border-bottom: 1px solid var(--color-neutral-200); font-weight: 600; color: var(--color-neutral-700); white-space: nowrap; }
.data-table td[b-9k2ut6b6l9] { padding: 0.75rem 1rem; border-bottom: 1px solid var(--color-neutral-100); color: var(--color-neutral-800); vertical-align: middle; }
.data-table tr:last-child td[b-9k2ut6b6l9] { border-bottom: none; }
.data-table tr:hover td[b-9k2ut6b6l9] { background: var(--color-neutral-50); }

/* ── Cell helpers ────────────────────────────────────── */
.student-info[b-9k2ut6b6l9]  { display: flex; flex-direction: column; gap: 0.15rem; }
.student-name[b-9k2ut6b6l9]  { font-weight: 600; color: var(--color-neutral-900); }
.adm-no[b-9k2ut6b6l9]        { font-size: 0.75rem; color: var(--color-neutral-500); }
.text-center[b-9k2ut6b6l9]   { text-align: center; }
.text-success[b-9k2ut6b6l9]  { color: var(--color-success-600); }
.text-danger[b-9k2ut6b6l9]   { color: var(--color-danger-600); }
.text-muted[b-9k2ut6b6l9]    { color: var(--color-neutral-500); font-size: var(--text-sm); }
.purpose-cell[b-9k2ut6b6l9]  { max-width: 180px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ── Badges ──────────────────────────────────────────── */
.badge[b-9k2ut6b6l9] { display: inline-flex; align-items: center; border-radius: var(--radius-full); padding: 0.2rem 0.65rem; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.02em; }
.leave-type[b-9k2ut6b6l9]        { background: var(--color-primary-50);  color: var(--color-primary-700); }
.status-pending[b-9k2ut6b6l9]    { background: var(--color-warning-50);  color: var(--color-warning-700); }
.status-approved[b-9k2ut6b6l9]   { background: var(--color-success-50);  color: var(--color-success-700); }
.status-rejected[b-9k2ut6b6l9]   { background: var(--color-danger-50);   color: var(--color-danger-700);  }
.status-returned[b-9k2ut6b6l9]   { background: var(--color-neutral-100); color: var(--color-neutral-600); }

/* ── Action buttons in rows ──────────────────────────── */
.action-btns[b-9k2ut6b6l9] { display: flex; gap: var(--space-2); flex-wrap: nowrap; }
.btn-sm[b-9k2ut6b6l9] { display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.3rem 0.7rem; border-radius: var(--radius-md); font-size: 0.78rem; font-weight: 600; border: none; cursor: pointer; transition: opacity 0.15s; white-space: nowrap; }
.btn-sm:disabled[b-9k2ut6b6l9] { opacity: 0.5; cursor: not-allowed; }
.btn-sm
.btn-sm
.btn-sm
.btn-sm
.btn-sm
.btn-sm

/* ── Modal ───────────────────────────────────────────── */
.modal-overlay[b-9k2ut6b6l9] { position: fixed; inset: 0; background: rgba(0,0,0,0.48); z-index: 9000; display: flex; align-items: center; justify-content: center; padding: var(--space-4); }
.modal-card[b-9k2ut6b6l9] { background: white; border-radius: var(--radius-xl); width: 100%; max-width: 480px; max-height: 90vh; overflow-y: auto; box-shadow: var(--shadow-xl); display: flex; flex-direction: column; }
.modal-header[b-9k2ut6b6l9] { display: flex; align-items: center; justify-content: space-between; padding: var(--space-4) var(--space-6); border-bottom: 1px solid var(--color-neutral-200); }
.modal-header h3[b-9k2ut6b6l9] { font-size: var(--text-base); font-weight: 700; color: var(--color-neutral-900); margin: 0; display: flex; align-items: center; gap: var(--space-2); }
.modal-body[b-9k2ut6b6l9]   { padding: var(--space-6); display: flex; flex-direction: column; gap: var(--space-4); }
.modal-body p[b-9k2ut6b6l9] { margin: 0; font-size: var(--text-sm); color: var(--color-neutral-700); }
.modal-body p strong[b-9k2ut6b6l9] { color: var(--color-neutral-900); }
.modal-footer[b-9k2ut6b6l9] { padding: var(--space-4) var(--space-6); border-top: 1px solid var(--color-neutral-200); display: flex; justify-content: flex-end; gap: var(--space-3); }
.modal-close[b-9k2ut6b6l9]  { background: none; border: none; cursor: pointer; color: var(--color-neutral-500); font-size: 1.1rem; padding: var(--space-1); border-radius: var(--radius-md); }
.modal-close:hover[b-9k2ut6b6l9] { background: var(--color-neutral-100); color: var(--color-neutral-800); }

/* ── Form helpers inside modals ──────────────────────── */
.form-group[b-9k2ut6b6l9]        { display: flex; flex-direction: column; gap: var(--space-1); }
.form-group label[b-9k2ut6b6l9]  { font-size: var(--text-sm); font-weight: 600; color: var(--color-neutral-700); }
.form-control[b-9k2ut6b6l9]      { border: 1px solid var(--color-neutral-300); border-radius: var(--radius-md); padding: var(--space-2) var(--space-3); font-size: var(--text-sm); color: var(--color-neutral-900); background: white; width: 100%; box-sizing: border-box; resize: vertical; font-family: inherit; }
.form-control:focus[b-9k2ut6b6l9] { outline: none; border-color: var(--color-primary-500); box-shadow: 0 0 0 2px var(--color-primary-100); }

/* ── Full-size modal buttons ─────────────────────────── */
.btn[b-9k2ut6b6l9] { display: inline-flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-4); border-radius: var(--radius-md); font-size: var(--text-sm); font-weight: 600; border: none; cursor: pointer; transition: opacity 0.15s; }
.btn:disabled[b-9k2ut6b6l9] { opacity: 0.5; cursor: not-allowed; }

/* ── Responsive ──────────────────────────────────────── */
@media (max-width: 768px) {
    .leave-requests-page[b-9k2ut6b6l9] { padding: var(--space-4); }
    .page-header[b-9k2ut6b6l9] { flex-direction: column; }
    .data-table th[b-9k2ut6b6l9], .data-table td[b-9k2ut6b6l9] { padding: 0.6rem 0.75rem; }
    .purpose-cell[b-9k2ut6b6l9] { max-width: 100px; }
    .action-btns[b-9k2ut6b6l9] { flex-wrap: wrap; }
    .modal-card[b-9k2ut6b6l9] { max-width: 100%; }
}
/* /Pages/Warden/Meals.razor.rz.scp.css */
/* Warden Meals Attendance page */
.loading-center[b-29idf51t2j] { display: flex; justify-content: center; padding: 2rem; }
.spinner[b-29idf51t2j] { width: 2rem; height: 2rem; border: 3px solid #e5e7eb; border-top-color: #7c3aed; border-radius: 50%; animation: spin-b-29idf51t2j 0.6s linear infinite; }
@keyframes spin-b-29idf51t2j { to { transform: rotate(360deg); } }

.warden-page[b-29idf51t2j] { padding: 1.5rem; }
.page-header[b-29idf51t2j] { margin-bottom: 1.5rem; }
.page-title[b-29idf51t2j] { font-size: 1.5rem; font-weight: 700; color: #111827; margin: 0 0 0.25rem; }
.page-subtitle[b-29idf51t2j] { color: #6b7280; margin: 0; font-size: 0.875rem; }

.alert[b-29idf51t2j] { padding: 0.75rem 1rem; border-radius: 0.5rem; margin-bottom: 1rem; font-size: 0.875rem; }
.alert-danger[b-29idf51t2j] { background: #fef2f2; color: #dc2626; border: 1px solid #fecaca; }
.alert-success[b-29idf51t2j] { background: #f0fdf4; color: #166534; border: 1px solid #bbf7d0; }

.filter-row[b-29idf51t2j] { display: flex; gap: 0.75rem; margin-bottom: 1.25rem; align-items: flex-end; flex-wrap: wrap; }
.filter-group[b-29idf51t2j] { display: flex; flex-direction: column; gap: 0.3rem; }
.filter-group label[b-29idf51t2j] { font-size: 0.75rem; font-weight: 600; color: #374151; }
.filter-group select[b-29idf51t2j], .filter-group input[b-29idf51t2j] { padding: 0.4rem 0.75rem; border: 1px solid #d1d5db; border-radius: 0.375rem; font-size: 0.875rem; }

.attendance-summary[b-29idf51t2j] { display: flex; gap: 1.5rem; padding: 0.75rem 1rem; background: #f9fafb; border-radius: 0.5rem; margin-bottom: 1rem; font-size: 0.875rem; font-weight: 600; color: #374151; }
.present-count[b-29idf51t2j] { color: #059669; }
.absent-count[b-29idf51t2j] { color: #dc2626; }

.attendance-grid[b-29idf51t2j] { display: grid; gap: 0.5rem; }
.attendance-student-row[b-29idf51t2j] { display: flex; justify-content: space-between; align-items: center; padding: 0.75rem 1rem; background: #fff; border: 1px solid #e5e7eb; border-radius: 0.5rem; }
.attendance-student-name[b-29idf51t2j] { font-weight: 500; font-size: 0.875rem; color: #111827; }
.attendance-toggle[b-29idf51t2j] { display: flex; gap: 0.5rem; }
.toggle-btn[b-29idf51t2j] { padding: 0.3rem 0.75rem; border-radius: 0.375rem; border: 1px solid; cursor: pointer; font-size: 0.75rem; font-weight: 700; transition: all 0.15s; }
.toggle-btn:not(.active)[b-29idf51t2j] { background: #f9fafb; color: #6b7280; border-color: #d1d5db; }
.toggle-present.active[b-29idf51t2j] { background: #059669; color: #fff; border-color: #059669; }
.toggle-absent.active[b-29idf51t2j] { background: #dc2626; color: #fff; border-color: #dc2626; }

.btn[b-29idf51t2j] { padding: 0.5rem 1.25rem; border-radius: 0.5rem; border: none; cursor: pointer; font-size: 0.875rem; font-weight: 600; }

/* /Pages/Warden/Movement.razor.rz.scp.css */
.movement-page[b-esmbnlhfze] { padding: 1.5rem; max-width: 1200px; margin: 0 auto; }
.page-header[b-esmbnlhfze] { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 1.5rem; flex-wrap: wrap; gap: 1rem; }
.page-title[b-esmbnlhfze] { font-size: 1.5rem; font-weight: 700; color: var(--color-text-primary, #1a202c); margin: 0 0 0.25rem 0; }
.page-subtitle[b-esmbnlhfze] { font-size: 0.875rem; color: var(--color-text-secondary, #6b7280); margin: 0; }
.header-actions[b-esmbnlhfze] { display: flex; gap: 0.75rem; flex-wrap: wrap; }

.btn-outline[b-esmbnlhfze] { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.5rem 1rem; border: 1.5px solid var(--color-primary, #4f46e5); border-radius: 6px; color: var(--color-primary, #4f46e5); font-size: 0.875rem; font-weight: 500; text-decoration: none; background: none; cursor: pointer; transition: background 0.2s; }
.btn-outline:hover[b-esmbnlhfze] { background: var(--color-primary-light, #eef2ff); }

.btn-check-in[b-esmbnlhfze] { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.35rem 0.75rem; background: #dcfce7; color: #16a34a; border: 1px solid #bbf7d0; border-radius: 5px; font-size: 0.8rem; font-weight: 600; cursor: pointer; transition: background 0.2s; white-space: nowrap; }
.btn-check-in:hover[b-esmbnlhfze] { background: #bbf7d0; }

.tabs[b-esmbnlhfze] { display: flex; gap: 0.25rem; border-bottom: 1px solid var(--color-border, #e2e8f0); margin-bottom: 1.25rem; }
.tab-btn[b-esmbnlhfze] { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.6rem 1.25rem; background: none; border: none; border-bottom: 2px solid transparent; color: var(--color-text-secondary, #6b7280); font-size: 0.875rem; font-weight: 500; cursor: pointer; transition: color 0.2s, border-color 0.2s; margin-bottom: -1px; }
.tab-btn.active[b-esmbnlhfze] { color: var(--color-primary, #4f46e5); border-bottom-color: var(--color-primary, #4f46e5); }
.tab-btn:hover:not(.active)[b-esmbnlhfze] { color: var(--color-text-primary, #1a202c); }
.tab-count[b-esmbnlhfze] { background: #fee2e2; color: #dc2626; font-size: 0.7rem; font-weight: 700; padding: 0.1rem 0.45rem; border-radius: 999px; }

.loading-center[b-esmbnlhfze] { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 4rem 2rem; color: var(--color-text-secondary, #6b7280); gap: 1rem; }
.spinner[b-esmbnlhfze] { width: 36px; height: 36px; border: 3px solid var(--color-border, #e2e8f0); border-top-color: var(--color-primary, #4f46e5); border-radius: 50%; animation: spin-b-esmbnlhfze 0.8s linear infinite; }
@keyframes spin-b-esmbnlhfze { to { transform: rotate(360deg); } }

.alert-error[b-esmbnlhfze] { background: #fef2f2; border: 1px solid #fecaca; color: #dc2626; padding: 0.75rem 1rem; border-radius: 8px; font-size: 0.875rem; display: flex; align-items: center; gap: 0.5rem; margin-bottom: 1rem; }
.small-alert[b-esmbnlhfze] { padding: 0.5rem 0.75rem; font-size: 0.8rem; margin-top: 0.75rem; margin-bottom: 0; }

.card[b-esmbnlhfze] { background: #fff; border: 1px solid var(--color-border, #e2e8f0); border-radius: 10px; overflow: hidden; }
.card-header[b-esmbnlhfze] { padding: 1rem 1.25rem; border-bottom: 1px solid var(--color-border, #e2e8f0); }
.card-title[b-esmbnlhfze] { font-size: 1rem; font-weight: 600; color: var(--color-text-primary, #1a202c); margin: 0; display: flex; align-items: center; gap: 0.5rem; }
.count-badge[b-esmbnlhfze] { background: #fee2e2; color: #dc2626; font-size: 0.75rem; font-weight: 600; padding: 0.2rem 0.6rem; border-radius: 999px; }

.table-wrapper[b-esmbnlhfze] { overflow-x: auto; }
.data-table[b-esmbnlhfze] { width: 100%; border-collapse: collapse; font-size: 0.875rem; }
.data-table th[b-esmbnlhfze] { padding: 0.75rem 1rem; text-align: left; font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--color-text-secondary, #6b7280); background: var(--color-surface, #f8fafc); border-bottom: 1px solid var(--color-border, #e2e8f0); white-space: nowrap; }
.data-table td[b-esmbnlhfze] { padding: 0.75rem 1rem; border-bottom: 1px solid var(--color-border, #e2e8f0); color: var(--color-text-primary, #1a202c); vertical-align: middle; }
.data-table tr:last-child td[b-esmbnlhfze] { border-bottom: none; }
.data-table tr:hover td[b-esmbnlhfze] { background: var(--color-surface, #f8fafc); }
.row-overdue td[b-esmbnlhfze] { background: #fff5f5; }
.row-overdue:hover td[b-esmbnlhfze] { background: #fee2e2; }
.student-name[b-esmbnlhfze] { font-weight: 600; }
.student-sub[b-esmbnlhfze] { font-size: 0.75rem; color: var(--color-text-secondary, #6b7280); }
.text-danger[b-esmbnlhfze] { color: #dc2626; font-weight: 600; }
.text-muted[b-esmbnlhfze] { color: var(--color-text-secondary, #6b7280); }
.status-badge[b-esmbnlhfze] { display: inline-block; padding: 0.25rem 0.7rem; border-radius: 999px; font-size: 0.72rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; }
.badge-out[b-esmbnlhfze] { background: #dbeafe; color: #1d4ed8; }
.badge-overdue[b-esmbnlhfze] { background: #fee2e2; color: #dc2626; }
.empty-cell[b-esmbnlhfze] { text-align: center; color: var(--color-text-secondary, #6b7280); padding: 2.5rem; font-style: italic; }

.modal-overlay[b-esmbnlhfze] { position: fixed; inset: 0; background: rgba(0,0,0,0.45); z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 1rem; }
.modal[b-esmbnlhfze] { background: #fff; border-radius: 12px; width: 100%; max-width: 520px; max-height: 90vh; overflow-y: auto; box-shadow: 0 20px 60px rgba(0,0,0,0.2); }
.modal-sm[b-esmbnlhfze] { max-width: 400px; }
.modal-header[b-esmbnlhfze] { display: flex; justify-content: space-between; align-items: center; padding: 1.25rem 1.5rem 1rem; border-bottom: 1px solid var(--color-border, #e2e8f0); }
.modal-header h3[b-esmbnlhfze] { font-size: 1rem; font-weight: 600; color: var(--color-text-primary, #1a202c); margin: 0; display: flex; align-items: center; gap: 0.5rem; }
.close-btn[b-esmbnlhfze] { background: none; border: none; font-size: 1rem; cursor: pointer; color: var(--color-text-secondary, #6b7280); padding: 0.25rem; line-height: 1; }
.close-btn:hover[b-esmbnlhfze] { color: var(--color-text-primary, #1a202c); }
.modal-body[b-esmbnlhfze] { padding: 1.25rem 1.5rem; }
.modal-footer[b-esmbnlhfze] { display: flex; justify-content: flex-end; gap: 0.75rem; padding: 1rem 1.5rem 1.25rem; border-top: 1px solid var(--color-border, #e2e8f0); }
.form-group[b-esmbnlhfze] { margin-bottom: 1rem; }
.form-group label[b-esmbnlhfze] { display: block; font-size: 0.8rem; font-weight: 600; color: var(--color-text-secondary, #6b7280); text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 0.35rem; }
.form-input[b-esmbnlhfze] { width: 100%; padding: 0.5rem 0.75rem; border: 1px solid var(--color-border, #e2e8f0); border-radius: 6px; font-size: 0.875rem; color: var(--color-text-primary, #1a202c); background: #fff; box-sizing: border-box; transition: border-color 0.2s; }
.form-input:focus[b-esmbnlhfze] { outline: none; border-color: var(--color-primary, #4f46e5); box-shadow: 0 0 0 3px rgba(79,70,229,0.1); }
.form-textarea[b-esmbnlhfze] { resize: vertical; min-height: 70px; }
.checkbox-label[b-esmbnlhfze] { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.875rem; cursor: pointer; font-weight: normal; text-transform: none; letter-spacing: normal; }
.required[b-esmbnlhfze] { color: #dc2626; }
.btn-spinner[b-esmbnlhfze] { display: inline-block; width: 14px; height: 14px; border: 2px solid rgba(255,255,255,0.4); border-top-color: #fff; border-radius: 50%; animation: spin-b-esmbnlhfze 0.7s linear infinite; margin-right: 0.25rem; }

@media (max-width: 768px) {
    .movement-page[b-esmbnlhfze] { padding: 1rem; }
    .page-header[b-esmbnlhfze] { flex-direction: column; }
    .tabs[b-esmbnlhfze] { overflow-x: auto; }
    .tab-btn[b-esmbnlhfze] { white-space: nowrap; }
    .data-table th[b-esmbnlhfze], .data-table td[b-esmbnlhfze] { padding: 0.6rem 0.75rem; }
    .modal[b-esmbnlhfze] { margin: 0.5rem; }
}
/* /Pages/Warden/MyApprovals.razor.rz.scp.css */
.my-approvals-page[b-l9vnal7ym8] {
    padding: var(--spacing-6, 1.5rem);
    max-width: 1200px;
    margin: 0 auto;
}
.page-header[b-l9vnal7ym8] {
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: var(--spacing-4, 1rem); margin-bottom: var(--spacing-6, 1.5rem); flex-wrap: wrap;
}
.page-title[b-l9vnal7ym8] { font-size: 1.5rem; font-weight: 700; color: var(--color-text-primary, #111827); margin: 0; }
.page-subtitle[b-l9vnal7ym8] { font-size: 0.875rem; color: var(--color-text-secondary, #6b7280); margin: 0.25rem 0 0; }
.btn-refresh[b-l9vnal7ym8] {
    padding: 0.45rem 1rem; border: 1px solid var(--color-border, #d1d5db);
    border-radius: var(--radius-md, 6px); background: #fff; font-size: 0.875rem;
    cursor: pointer; color: var(--color-text-primary, #111827);
}
.btn-refresh:hover[b-l9vnal7ym8] { background: var(--color-bg-hover, #f3f4f6); }

/* Tab bar */
.tab-bar[b-l9vnal7ym8] {
    display: flex; gap: 0.25rem; border-bottom: 2px solid var(--color-border, #d1d5db);
    margin-bottom: var(--spacing-4, 1rem);
}
.tab-btn[b-l9vnal7ym8] {
    padding: 0.55rem 1.1rem; border: none; background: none; cursor: pointer;
    font-size: 0.9rem; color: var(--color-text-secondary, #6b7280);
    border-bottom: 2px solid transparent; margin-bottom: -2px;
    display: flex; align-items: center; gap: 0.4rem;
}
.tab-btn:hover[b-l9vnal7ym8] { color: var(--color-primary, #4f46e5); }
.tab-active[b-l9vnal7ym8] { color: var(--color-primary, #4f46e5); font-weight: 600; border-bottom-color: var(--color-primary, #4f46e5); }
.tab-count[b-l9vnal7ym8] {
    background: var(--color-bg-surface, #f3f4f6);
    padding: 0.1rem 0.45rem; border-radius: 9999px; font-size: 0.75rem; font-weight: 600;
}
.tab-active .tab-count[b-l9vnal7ym8] { background: rgba(79,70,229,0.1); color: var(--color-primary, #4f46e5); }

.empty-state[b-l9vnal7ym8] {
    padding: 2rem; text-align: center;
    background: var(--color-bg-surface, #f9fafb);
    border-radius: var(--radius-md, 6px);
    color: var(--color-text-secondary, #6b7280); font-size: 0.95rem;
}
.table-wrap[b-l9vnal7ym8] { overflow-x: auto; }
.approvals-table[b-l9vnal7ym8] { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.approvals-table th[b-l9vnal7ym8] {
    background: var(--color-bg-surface, #f9fafb); padding: 0.65rem 1rem; text-align: left;
    font-weight: 600; font-size: 0.8rem; color: var(--color-text-secondary, #6b7280);
    border-bottom: 1px solid var(--color-border, #d1d5db); white-space: nowrap;
}
.approvals-table td[b-l9vnal7ym8] {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--color-border, #d1d5db);
    color: var(--color-text-primary, #111827);
}
.approvals-table tr:last-child td[b-l9vnal7ym8] { border-bottom: none; }
.approvals-table tr:hover td[b-l9vnal7ym8] { background: var(--color-bg-hover, #f3f4f6); }

/* Type badges */
.type-badge[b-l9vnal7ym8] {
    display: inline-block; padding: 0.18rem 0.6rem;
    border-radius: 9999px; font-size: 0.75rem; font-weight: 600;
}
.type-studentadmission[b-l9vnal7ym8] { background: #dbeafe; color: #1e40af; }
.type-roomallocation[b-l9vnal7ym8] { background: #fce7f3; color: #9d174d; }
.type-payment[b-l9vnal7ym8] { background: #fef9c3; color: #854d0e; }
.type-discharge[b-l9vnal7ym8] { background: #ffe4e6; color: #9f1239; }
.type-feestructure[b-l9vnal7ym8] { background: #f3e8ff; color: #6b21a8; }

/* Status badges */
.status-badge[b-l9vnal7ym8] {
    display: inline-block; padding: 0.2rem 0.65rem;
    border-radius: 9999px; font-size: 0.75rem; font-weight: 600;
}
.status-pendingapproval[b-l9vnal7ym8] { background: #fef3c7; color: #92400e; }
.status-approved[b-l9vnal7ym8] { background: #d1fae5; color: #065f46; }
.status-rejected[b-l9vnal7ym8] { background: #fee2e2; color: #991b1b; }

.alert-error[b-l9vnal7ym8] {
    background: #fee2e2; color: #991b1b;
    padding: 0.75rem 1rem; border-radius: var(--radius-md, 6px);
    font-size: 0.875rem; margin-bottom: var(--spacing-4, 1rem);
}
.loading-state[b-l9vnal7ym8] {
    display: flex; flex-direction: column; align-items: center;
    gap: var(--spacing-4, 1rem); padding: 3rem;
    color: var(--color-text-secondary, #6b7280);
}
.spinner[b-l9vnal7ym8] {
    width: 36px; height: 36px;
    border: 3px solid var(--color-border, #d1d5db);
    border-top-color: var(--color-primary, #4f46e5);
    border-radius: 50%; animation: spin-b-l9vnal7ym8 0.8s linear infinite;
}
@keyframes spin-b-l9vnal7ym8 { to { transform: rotate(360deg); } }

@media (max-width: 640px) {
    .my-approvals-page[b-l9vnal7ym8] { padding: var(--spacing-4, 1rem); }
    .approvals-table th[b-l9vnal7ym8], .approvals-table td[b-l9vnal7ym8] { padding: 0.55rem 0.6rem; }
}
/* /Pages/Warden/RollCall.razor.rz.scp.css */
.rollcall-controls[b-og6r2yxxr3] {
    display: flex;
    gap: 1.5rem;
    align-items: flex-end;
    flex-wrap: wrap;
    margin-bottom: 1.5rem;
    padding: 1rem 1.25rem;
    background: var(--color-white, #fff);
    border-radius: 0.75rem;
    box-shadow: 0 1px 4px rgba(0,0,0,.08);
}

.control-group[b-og6r2yxxr3] {
    display: flex;
    flex-direction: column;
    gap: .375rem;
}

.control-group label[b-og6r2yxxr3] {
    font-size: .75rem;
    font-weight: 600;
    color: var(--color-neutral-500, #6b7280);
    text-transform: uppercase;
    letter-spacing: .04em;
}

.type-toggle[b-og6r2yxxr3] {
    display: flex;
    gap: .5rem;
}

.type-btn[b-og6r2yxxr3] {
    padding: .5rem 1rem;
    border: 1px solid var(--color-neutral-300, #d1d5db);
    border-radius: .5rem;
    background: var(--color-white, #fff);
    cursor: pointer;
    font-size: .875rem;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: .375rem;
    transition: all .15s;
}

.type-btn:hover[b-og6r2yxxr3] { background: var(--color-neutral-100, #f3f4f6); }

.type-btn.active[b-og6r2yxxr3] {
    background: var(--color-primary-600, #7c3aed);
    color: #fff;
    border-color: var(--color-primary-600, #7c3aed);
}

.summary-bar[b-og6r2yxxr3] {
    display: flex;
    gap: 1rem;
    margin-bottom: 1rem;
    flex-wrap: wrap;
}

.summary-card[b-og6r2yxxr3] {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: .75rem 1.5rem;
    border-radius: .75rem;
    background: var(--color-white, #fff);
    box-shadow: 0 1px 4px rgba(0,0,0,.08);
    min-width: 90px;
}

.summary-total[b-og6r2yxxr3] { border-top: 3px solid var(--color-neutral-400, #9ca3af); }
.summary-present[b-og6r2yxxr3] { border-top: 3px solid #22c55e; }
.summary-absent[b-og6r2yxxr3] { border-top: 3px solid #ef4444; }
.summary-pct[b-og6r2yxxr3] { border-top: 3px solid #3b82f6; }

.summary-num[b-og6r2yxxr3] {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--color-neutral-800, #1f2937);
}

.summary-label[b-og6r2yxxr3] {
    font-size: .75rem;
    color: var(--color-neutral-500, #6b7280);
    font-weight: 500;
}

.bulk-actions[b-og6r2yxxr3] {
    display: flex;
    gap: .75rem;
    margin-bottom: 1rem;
    align-items: center;
}

.btn-save[b-og6r2yxxr3] { margin-left: auto; }

.rollcall-list[b-og6r2yxxr3] {
    display: flex;
    flex-direction: column;
    gap: .5rem;
}

.rollcall-row[b-og6r2yxxr3] {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: .75rem 1rem;
    background: var(--color-white, #fff);
    border-radius: .5rem;
    border-left: 3px solid #22c55e;
    box-shadow: 0 1px 3px rgba(0,0,0,.06);
    transition: border-color .15s;
}

.rollcall-row.absent[b-og6r2yxxr3] { border-left-color: #ef4444; background: #fff7f7; }

.student-info[b-og6r2yxxr3] {
    display: flex;
    align-items: center;
    gap: .75rem;
    flex: 1;
    min-width: 0;
}

.student-avatar[b-og6r2yxxr3] {
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 50%;
    background: var(--color-primary-100, #ede9fe);
    color: var(--color-primary-700, #6d28d9);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: .875rem;
    flex-shrink: 0;
}

.student-details[b-og6r2yxxr3] { display: flex; flex-direction: column; min-width: 0; }
.student-name[b-og6r2yxxr3] { font-weight: 600; font-size: .9rem; color: var(--color-neutral-800, #1f2937); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.room-num[b-og6r2yxxr3] { font-size: .75rem; color: var(--color-neutral-500, #6b7280); }

.attendance-toggle[b-og6r2yxxr3] { flex-shrink: 0; }

.toggle-btn[b-og6r2yxxr3] {
    padding: .375rem .875rem;
    border-radius: .5rem;
    border: none;
    cursor: pointer;
    font-size: .8rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: .375rem;
    transition: all .15s;
}

.toggle-btn.present[b-og6r2yxxr3] { background: #dcfce7; color: #16a34a; }
.toggle-btn.absent-btn[b-og6r2yxxr3] { background: #fee2e2; color: #dc2626; }

.remarks-col[b-og6r2yxxr3] { flex: 0 0 200px; }
.remarks-input[b-og6r2yxxr3] { font-size: .8rem; padding: .35rem .6rem; }

.empty-state[b-og6r2yxxr3] {
    padding: 3rem;
    text-align: center;
    color: var(--color-neutral-500, #6b7280);
    background: var(--color-white, #fff);
    border-radius: .75rem;
}
/* /Pages/Warden/Rooms.razor.rz.scp.css */
.rooms-page[b-ni3uep87ko] { min-height: 100vh; background: var(--color-neutral-50); padding: var(--space-6); }
.page-header[b-ni3uep87ko] { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: var(--space-6); flex-wrap: wrap; gap: var(--space-4); }
.page-title[b-ni3uep87ko] { font-size: var(--text-3xl); font-weight: 700; color: var(--color-neutral-900); }
.page-subtitle[b-ni3uep87ko] { color: var(--color-neutral-600); margin-top: var(--space-1); }
.header-actions[b-ni3uep87ko] { display: flex; gap: var(--space-3); }
.btn-outline[b-ni3uep87ko] { display: inline-flex; align-items: center; gap: var(--space-2); border: 1px solid var(--color-neutral-300); color: var(--color-neutral-700); padding: var(--space-2) var(--space-4); border-radius: var(--radius-md); font-weight: 500; text-decoration: none; cursor: pointer; background: white; transition: background 0.15s; }
.btn-outline:hover[b-ni3uep87ko] { background: var(--color-neutral-50); }
.loading-center[b-ni3uep87ko] { display: flex; flex-direction: column; align-items: center; padding: var(--space-16); gap: var(--space-4); }
.spinner[b-ni3uep87ko] { width: 3rem; height: 3rem; border: 4px solid var(--color-neutral-200); border-top-color: var(--color-primary-600); border-radius: 50%; animation: spin-b-ni3uep87ko 0.8s linear infinite; }
@keyframes spin-b-ni3uep87ko { to { transform: rotate(360deg); } }
.alert-error[b-ni3uep87ko] { background: var(--color-danger-50); border: 1px solid var(--color-danger-200); border-radius: var(--radius-lg); padding: var(--space-4); color: var(--color-danger-800); }
.alert-success[b-ni3uep87ko] { background: var(--color-success-50); border: 1px solid var(--color-success-200); border-radius: var(--radius-lg); padding: var(--space-4); color: var(--color-success-800); }
.buildings-grid[b-ni3uep87ko] { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--space-4); margin-bottom: var(--space-6); }
.building-card[b-ni3uep87ko] { background: white; border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); padding: var(--space-4); cursor: pointer; border: 2px solid transparent; transition: border-color 0.15s, box-shadow 0.15s, background 0.15s; position: relative; }
.building-card:hover[b-ni3uep87ko] { box-shadow: var(--shadow-md); background: var(--color-neutral-50); }
.building-card.selected[b-ni3uep87ko] { border-color: var(--color-primary-500); background: var(--color-primary-50, #eef2ff); box-shadow: 0 0 0 3px rgba(99,102,241,0.15); }
.building-card.selected .building-name[b-ni3uep87ko] { color: var(--color-primary-700, #4338ca); }
.building-card:not(.selected)[b-ni3uep87ko]::after { content: 'Click to view rooms'; position: absolute; bottom: 0.4rem; right: 0.6rem; font-size: 0.65rem; color: var(--color-neutral-400); opacity: 0; transition: opacity 0.15s; }
.building-card:not(.selected):hover[b-ni3uep87ko]::after { opacity: 1; }
.building-header[b-ni3uep87ko] { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: var(--space-3); }
.building-name[b-ni3uep87ko] { font-size: var(--text-lg); font-weight: 600; color: var(--color-neutral-900); }
.building-code[b-ni3uep87ko] { font-size: var(--text-sm); color: var(--color-neutral-500); margin-top: 0.125rem; }
.building-header-right[b-ni3uep87ko] { display: flex; align-items: center; gap: var(--space-2); flex-shrink: 0; }
.building-address[b-ni3uep87ko] { font-size: var(--text-xs); color: var(--color-neutral-500); margin: 0.1rem 0 0.5rem; display: flex; align-items: center; gap: 0.3rem; }
.gender-badge[b-ni3uep87ko] { font-size: var(--text-xs); font-weight: 600; padding: 0.2rem 0.5rem; border-radius: var(--radius-full); }
.badge-blue[b-ni3uep87ko] { background: #dbeafe; color: #1e40af; }
.badge-pink[b-ni3uep87ko] { background: #fce7f3; color: #831843; }
.badge-purple[b-ni3uep87ko] { background: #ede9fe; color: #4c1d95; }
.building-stats[b-ni3uep87ko] { display: grid; grid-template-columns: repeat(4,1fr); gap: var(--space-2); text-align: center; border-top: 1px solid var(--color-neutral-100); padding-top: var(--space-3); margin-top: var(--space-2); }
.stat-value[b-ni3uep87ko] { display: block; font-size: var(--text-xl); font-weight: 700; color: var(--color-neutral-900); }
.stat-label[b-ni3uep87ko] { display: block; font-size: var(--text-xs); color: var(--color-neutral-500); }
.text-success[b-ni3uep87ko] { color: var(--color-success-600); }
.text-danger[b-ni3uep87ko]  { color: var(--color-danger-600); }
.card[b-ni3uep87ko] { background: white; border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); overflow: hidden; }
.card-header[b-ni3uep87ko] { padding: var(--space-4) var(--space-6); border-bottom: 1px solid var(--color-neutral-100); }
.card-title[b-ni3uep87ko] { font-size: var(--text-lg); font-weight: 600; color: var(--color-neutral-900); display: flex; align-items: center; gap: var(--space-2); }
.flex-between[b-ni3uep87ko] { display: flex; align-items: center; justify-content: space-between; }
.count-badge[b-ni3uep87ko] { background: var(--color-primary-100); color: var(--color-primary-700); border-radius: var(--radius-full); padding: 0.125rem 0.5rem; font-size: var(--text-sm); }
.table-wrapper[b-ni3uep87ko] { overflow-x: auto; }
.data-table[b-ni3uep87ko] { width: 100%; border-collapse: collapse; }
.data-table th[b-ni3uep87ko] { background: var(--color-neutral-50); font-size: var(--text-xs); font-weight: 600; text-transform: uppercase; color: var(--color-neutral-500); padding: var(--space-3) var(--space-4); text-align: left; }
.data-table td[b-ni3uep87ko] { padding: var(--space-3) var(--space-4); border-top: 1px solid var(--color-neutral-100); font-size: var(--text-sm); vertical-align: middle; }
.data-table tr:hover td[b-ni3uep87ko] { background: var(--color-neutral-50); }
.font-medium[b-ni3uep87ko] { font-weight: 500; }
.type-badge[b-ni3uep87ko] { font-size: var(--text-xs); font-weight: 600; padding: 0.2rem 0.5rem; border-radius: var(--radius-full); }
.type-single[b-ni3uep87ko] { background: #dbeafe; color: #1e40af; }
.type-double[b-ni3uep87ko] { background: var(--color-teal-100); color: #134e4a; }
.type-triple[b-ni3uep87ko] { background: #ede9fe; color: #4c1d95; }
.type-dorm[b-ni3uep87ko]   { background: #ffedd5; color: #7c2d12; }
.type-other[b-ni3uep87ko]  { background: var(--color-neutral-100); color: var(--color-neutral-700); }
.status-badge[b-ni3uep87ko] { font-size: var(--text-xs); font-weight: 600; padding: 0.2rem 0.5rem; border-radius: var(--radius-full); }
.badge-full[b-ni3uep87ko]    { background: var(--color-danger-100); color: var(--color-danger-700); }
.badge-vacant[b-ni3uep87ko]  { background: var(--color-success-100); color: var(--color-success-700); }
.badge-partial[b-ni3uep87ko] { background: var(--color-warning-100); color: var(--color-warning-700); }
.empty-state[b-ni3uep87ko] { text-align: center; padding: var(--space-16); color: var(--color-neutral-500); }
.empty-state h3[b-ni3uep87ko] { margin-top: var(--space-4); font-size: var(--text-xl); color: var(--color-neutral-700); }
.empty-state p[b-ni3uep87ko] { margin-top: var(--space-2); }
.text-5xl[b-ni3uep87ko] { font-size: 3rem; }
.text-neutral-300[b-ni3uep87ko] { color: var(--color-neutral-300); }

.mt-4[b-ni3uep87ko] { margin-top: var(--space-4); }
.mb-4[b-ni3uep87ko] { margin-bottom: var(--space-4); }
.icon-btn[b-ni3uep87ko] { background: none; border: 1px solid var(--color-neutral-200); border-radius: var(--radius-md); padding: 0.25rem 0.5rem; cursor: pointer; color: var(--color-neutral-500); transition: color 0.15s, background 0.15s; }
.icon-btn:hover[b-ni3uep87ko] { background: var(--color-neutral-100); color: var(--color-neutral-800); }
.spinner-sm[b-ni3uep87ko] { width: 1.2rem; height: 1.2rem; border: 2px solid var(--color-neutral-200); border-top-color: var(--color-primary-600); border-radius: 50%; animation: spin-b-ni3uep87ko 0.8s linear infinite; display: inline-block; }
.modal-overlay[b-ni3uep87ko] { position: fixed; inset: 0; background: rgba(0,0,0,0.48); z-index: 9000; display: flex; align-items: center; justify-content: center; padding: var(--space-4); }
.modal-box[b-ni3uep87ko] { background: white; border-radius: var(--radius-xl); width: 100%; max-width: 520px; max-height: 90vh; overflow-y: auto; box-shadow: var(--shadow-xl); display: flex; flex-direction: column; }
.modal-wide[b-ni3uep87ko] { max-width: 700px; }
.modal-header[b-ni3uep87ko] { display: flex; align-items: center; justify-content: space-between; padding: var(--space-4) var(--space-6); border-bottom: 1px solid var(--color-neutral-200); }
.modal-header h3[b-ni3uep87ko] { font-size: var(--text-lg); font-weight: 700; color: var(--color-neutral-900); }
.close-btn[b-ni3uep87ko] { background: none; border: none; cursor: pointer; padding: var(--space-1); color: var(--color-neutral-500); font-size: 1.1rem; border-radius: var(--radius-md); }
.close-btn:hover[b-ni3uep87ko] { background: var(--color-neutral-100); color: var(--color-neutral-800); }
.modal-body[b-ni3uep87ko] { padding: var(--space-6); display: flex; flex-direction: column; gap: var(--space-4); }
.modal-footer[b-ni3uep87ko] { padding: var(--space-4) var(--space-6); border-top: 1px solid var(--color-neutral-200); display: flex; justify-content: flex-end; gap: var(--space-3); }
.form-group[b-ni3uep87ko] { display: flex; flex-direction: column; gap: var(--space-1); }
.form-group label[b-ni3uep87ko] { font-size: var(--text-sm); font-weight: 600; color: var(--color-neutral-700); }
.form-input[b-ni3uep87ko] { border: 1px solid var(--color-neutral-300); border-radius: var(--radius-md); padding: var(--space-2) var(--space-3); font-size: var(--text-sm); color: var(--color-neutral-900); background: white; width: 100%; box-sizing: border-box; }
.form-input:focus[b-ni3uep87ko] { outline: none; border-color: var(--color-primary-500); box-shadow: 0 0 0 2px var(--color-primary-100); }
.form-row[b-ni3uep87ko] { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
.form-row.three-col[b-ni3uep87ko] { grid-template-columns: 1fr 1fr 1fr; }
.section-label[b-ni3uep87ko] { font-size: var(--text-xs); font-weight: 700; text-transform: uppercase; color: var(--color-neutral-500); letter-spacing: 0.05em; margin-top: var(--space-1); }
.req[b-ni3uep87ko] { color: var(--color-danger-600); }
.checkbox-label[b-ni3uep87ko] { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm); cursor: pointer; }
@media (max-width: 768px) { .rooms-page[b-ni3uep87ko] { padding: var(--space-4); } .page-header[b-ni3uep87ko] { flex-direction: column; } .buildings-grid[b-ni3uep87ko] { grid-template-columns: 1fr; } }
@media (max-width: 520px) { .form-row[b-ni3uep87ko] { grid-template-columns: 1fr; } .form-row.three-col[b-ni3uep87ko] { grid-template-columns: 1fr; } .modal-box[b-ni3uep87ko] { max-width: 100%; } }
/* /Pages/Warden/Students.razor.rz.scp.css */
.students-page[b-s462qq9uym] {
    min-height: 100vh;
    background: var(--color-neutral-50);
    padding: var(--space-6);
}

.page-header[b-s462qq9uym] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: var(--space-6);
    flex-wrap: wrap;
    gap: var(--space-4);
}

.page-title[b-s462qq9uym] { font-size: var(--text-3xl); font-weight: 700; color: var(--color-neutral-900); }
.page-subtitle[b-s462qq9uym] { color: var(--color-neutral-600); margin-top: var(--space-1); }

.header-actions[b-s462qq9uym] { display: flex; gap: var(--space-3); flex-wrap: wrap; }

.btn-outline[b-s462qq9uym] {
    display: inline-flex; align-items: center; gap: var(--space-2);
    border: 1px solid var(--color-neutral-300); color: var(--color-neutral-700);
    padding: var(--space-2) var(--space-4); border-radius: var(--radius-md);
    font-weight: 500; text-decoration: none; cursor: pointer; background: white;
    transition: background 0.15s;
}
.btn-outline:hover[b-s462qq9uym] { background: var(--color-neutral-50); }

.filter-bar[b-s462qq9uym] { display: flex; gap: var(--space-3); margin-bottom: var(--space-4); flex-wrap: wrap; }
.filter-select[b-s462qq9uym] {
    padding: var(--space-2) var(--space-3); border: 1px solid var(--color-neutral-300);
    border-radius: var(--radius-md); background: white; color: var(--color-neutral-800);
    font-size: var(--text-sm);
}

.loading-center[b-s462qq9uym] { display: flex; flex-direction: column; align-items: center; padding: var(--space-16); gap: var(--space-4); }
.spinner[b-s462qq9uym] { width: 3rem; height: 3rem; border: 4px solid var(--color-neutral-200); border-top-color: var(--color-primary-600); border-radius: 50%; animation: spin-b-s462qq9uym 0.8s linear infinite; }
@keyframes spin-b-s462qq9uym { to { transform: rotate(360deg); } }
.alert-error[b-s462qq9uym] { background: var(--color-danger-50); border: 1px solid var(--color-danger-200); border-radius: var(--radius-lg); padding: var(--space-4); color: var(--color-danger-800); display: flex; align-items: center; gap: var(--space-2); }

.card[b-s462qq9uym] { background: white; border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); overflow: hidden; margin-bottom: var(--space-6); }
.card-header[b-s462qq9uym] { padding: var(--space-4) var(--space-6); border-bottom: 1px solid var(--color-neutral-100); }
.card-title[b-s462qq9uym] { font-size: var(--text-lg); font-weight: 600; color: var(--color-neutral-900); display: flex; align-items: center; gap: var(--space-2); }
.flex-between[b-s462qq9uym] { display: flex; align-items: center; justify-content: space-between; }
.count-badge[b-s462qq9uym] { background: var(--color-primary-100); color: var(--color-primary-700); border-radius: var(--radius-full); padding: 0.125rem 0.5rem; font-size: var(--text-sm); }

.table-wrapper[b-s462qq9uym] { overflow-x: auto; }
.data-table[b-s462qq9uym] { width: 100%; border-collapse: collapse; }
.data-table th[b-s462qq9uym] { background: var(--color-neutral-50); font-size: var(--text-xs); font-weight: 600; text-transform: uppercase; color: var(--color-neutral-500); padding: var(--space-3) var(--space-4); text-align: left; }
.data-table td[b-s462qq9uym] { padding: var(--space-3) var(--space-4); border-top: 1px solid var(--color-neutral-100); font-size: var(--text-sm); vertical-align: middle; }
.data-table tr:hover td[b-s462qq9uym] { background: var(--color-neutral-50); }

.student-name[b-s462qq9uym] { font-weight: 500; color: var(--color-neutral-900); }
.mono-text[b-s462qq9uym] { font-family: monospace; color: var(--color-neutral-700); }
.text-muted[b-s462qq9uym] { color: var(--color-neutral-400); font-style: italic; }
.text-danger[b-s462qq9uym] { color: var(--color-danger-600); }
.bed-label[b-s462qq9uym] { color: var(--color-neutral-500); font-size: var(--text-xs); }

.type-badge[b-s462qq9uym] { font-size: var(--text-xs); font-weight: 600; padding: 0.2rem 0.5rem; border-radius: var(--radius-full); }
.type-full[b-s462qq9uym]    { background: #dbeafe; color: #1e40af; }
.type-weekly[b-s462qq9uym]  { background: var(--color-teal-100); color: #134e4a; }
.type-day[b-s462qq9uym]     { background: #ede9fe; color: #4c1d95; }
.type-meal[b-s462qq9uym]    { background: #ffedd5; color: #7c2d12; }
.type-other[b-s462qq9uym]   { background: var(--color-neutral-100); color: var(--color-neutral-700); }

.status-badge[b-s462qq9uym] { font-size: var(--text-xs); font-weight: 600; padding: 0.2rem 0.5rem; border-radius: var(--radius-full); }
.badge-active[b-s462qq9uym]   { background: var(--color-success-100); color: var(--color-success-700); }
.badge-inactive[b-s462qq9uym] { background: var(--color-neutral-200); color: var(--color-neutral-500); }

.btn-icon[b-s462qq9uym] { background: none; border: 1px solid var(--color-neutral-200); padding: 0.375rem 0.5rem; border-radius: var(--radius-md); cursor: pointer; color: var(--color-neutral-600); transition: background 0.15s; margin-right: var(--space-1); }
.btn-icon:hover[b-s462qq9uym] { background: var(--color-neutral-100); }
.btn-icon-edit[b-s462qq9uym]    { color: var(--color-primary-600); }
.btn-icon-allocate[b-s462qq9uym] { color: var(--color-success-600); }
.btn-icon-danger[b-s462qq9uym]  { color: var(--color-danger-600); }
.actions-cell[b-s462qq9uym] { white-space: nowrap; }

.empty-cell[b-s462qq9uym] { text-align: center; padding: var(--space-8); color: var(--color-neutral-400); font-style: italic; }

.pagination[b-s462qq9uym] { display: flex; align-items: center; justify-content: center; gap: var(--space-3); padding: var(--space-4); border-top: 1px solid var(--color-neutral-100); }
.page-btn[b-s462qq9uym] { background: white; border: 1px solid var(--color-neutral-300); padding: var(--space-2) var(--space-3); border-radius: var(--radius-md); cursor: pointer; color: var(--color-neutral-700); }
.page-btn:disabled[b-s462qq9uym] { opacity: 0.4; cursor: not-allowed; }
.page-info[b-s462qq9uym] { color: var(--color-neutral-600); font-size: var(--text-sm); }

/* Modal / Detail Panel */
.modal-overlay[b-s462qq9uym] { position: fixed; inset: 0; background: rgba(0,0,0,0.4); z-index: 50; display: flex; align-items: center; justify-content: center; padding: var(--space-4); }
.detail-panel[b-s462qq9uym] { background: white; border-radius: var(--radius-xl); box-shadow: var(--shadow-xl); width: 100%; max-width: 28rem; max-height: 90vh; overflow-y: auto; }
.detail-header[b-s462qq9uym] { display: flex; align-items: center; justify-content: space-between; padding: var(--space-4) var(--space-6); border-bottom: 1px solid var(--color-neutral-100); }
.detail-header h2[b-s462qq9uym] { font-size: var(--text-xl); font-weight: 700; color: var(--color-neutral-900); }
.close-btn[b-s462qq9uym] { background: none; border: none; color: var(--color-neutral-500); cursor: pointer; font-size: var(--text-xl); padding: var(--space-1); }
.close-btn:hover[b-s462qq9uym] { color: var(--color-neutral-800); }
.detail-body[b-s462qq9uym] { padding: var(--space-4) var(--space-6); display: flex; flex-direction: column; gap: var(--space-3); }
.detail-row[b-s462qq9uym] { display: flex; justify-content: space-between; padding: var(--space-2) 0; border-bottom: 1px solid var(--color-neutral-50); }
.detail-label[b-s462qq9uym] { font-weight: 500; color: var(--color-neutral-600); }
.due-row[b-s462qq9uym] { background: var(--color-danger-50); padding: var(--space-2) var(--space-3); border-radius: var(--radius-md); border: none; }

/* Flash banners */
.alert-success[b-s462qq9uym] { background: var(--color-success-50); border: 1px solid var(--color-success-200); border-radius: var(--radius-lg); padding: var(--space-3) var(--space-4); color: var(--color-success-800); margin-top: var(--space-3); }
.alert-warn[b-s462qq9uym]    { background: var(--color-warning-50); border: 1px solid var(--color-warning-200); border-radius: var(--radius-lg); padding: var(--space-3) var(--space-4); color: var(--color-warning-800); margin-top: var(--space-3); }
.alert-error.small[b-s462qq9uym] { font-size: var(--text-sm); padding: var(--space-2) var(--space-3); margin-top: var(--space-2); }

/* Shared modal shell */
.smodal[b-s462qq9uym]    { background: white; border-radius: var(--radius-xl); width: 100%; max-width: 560px; max-height: 90vh; overflow-y: auto; box-shadow: var(--shadow-xl); display: flex; flex-direction: column; }
.smodal-sm[b-s462qq9uym] { max-width: 420px; }
.smodal-header[b-s462qq9uym] { display: flex; align-items: center; justify-content: space-between; padding: var(--space-4) var(--space-6); border-bottom: 1px solid var(--color-neutral-200); }
.smodal-header h3[b-s462qq9uym] { font-size: var(--text-lg); font-weight: 700; color: var(--color-neutral-900); margin: 0; }
.smodal-body[b-s462qq9uym]   { padding: var(--space-6); display: flex; flex-direction: column; gap: var(--space-4); }
.smodal-footer[b-s462qq9uym] { padding: var(--space-4) var(--space-6); border-top: 1px solid var(--color-neutral-200); display: flex; justify-content: flex-end; gap: var(--space-3); }

/* Form helpers */
.form-group[b-s462qq9uym]       { display: flex; flex-direction: column; gap: var(--space-1); }
.form-group label[b-s462qq9uym] { font-size: var(--text-sm); font-weight: 600; color: var(--color-neutral-700); }
.form-input[b-s462qq9uym]       { border: 1px solid var(--color-neutral-300); border-radius: var(--radius-md); padding: var(--space-2) var(--space-3); font-size: var(--text-sm); color: var(--color-neutral-900); background: white; width: 100%; box-sizing: border-box; }
.form-input:focus[b-s462qq9uym] { outline: none; border-color: var(--color-primary-500); box-shadow: 0 0 0 2px var(--color-primary-100); }
.form-row[b-s462qq9uym]         { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
.req[b-s462qq9uym]              { color: var(--color-danger-600); }
.checkbox-label[b-s462qq9uym]   { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm); cursor: pointer; }

/* Student picker styles */
.student-picker-group[b-s462qq9uym] { grid-column: 1 / -1; }
.student-search-wrap[b-s462qq9uym]  { position: relative; }
.student-dropdown[b-s462qq9uym] {
    position: absolute; top: 100%; left: 0; right: 0; z-index: 100;
    background: white; border: 1px solid var(--color-neutral-200);
    border-radius: var(--radius-md); box-shadow: var(--shadow-lg);
    max-height: 220px; overflow-y: auto;
}
.student-option[b-s462qq9uym] {
    display: flex; flex-direction: column; padding: var(--space-3) var(--space-4);
    cursor: pointer; border-bottom: 1px solid var(--color-neutral-100);
}
.student-option:last-child[b-s462qq9uym] { border-bottom: none; }
.student-option:hover[b-s462qq9uym] { background: var(--color-primary-50); }
.s-name[b-s462qq9uym] { font-weight: 600; font-size: var(--text-sm); color: var(--color-neutral-900); }
.s-meta[b-s462qq9uym] { font-size: var(--text-xs); color: var(--color-neutral-500); margin-top: 0.1rem; }
.search-hint[b-s462qq9uym] { font-size: var(--text-sm); color: var(--color-neutral-500); padding: var(--space-2) var(--space-3); }
.search-empty[b-s462qq9uym] { color: var(--color-warning-700); }

.selected-student-chip[b-s462qq9uym] {
    display: flex; align-items: center; justify-content: space-between;
    background: var(--color-primary-50); border: 1px solid var(--color-primary-200);
    border-radius: var(--radius-md); padding: var(--space-2) var(--space-3); gap: var(--space-3);
}
.chip-info[b-s462qq9uym] { display: flex; flex-direction: column; gap: 0.125rem; }
.chip-name[b-s462qq9uym] { font-weight: 600; font-size: var(--text-sm); color: var(--color-primary-900); }
.chip-meta[b-s462qq9uym] { font-size: var(--text-xs); color: var(--color-primary-700); }
.chip-clear[b-s462qq9uym] { background: none; border: none; color: var(--color-primary-600); cursor: pointer; padding: var(--space-1); border-radius: var(--radius-sm); }
.chip-clear:hover[b-s462qq9uym] { background: var(--color-primary-100); }

/* Misc helpers */
.warn-text[b-s462qq9uym]  { font-size: var(--text-sm); color: var(--color-warning-700); }
.spinner-sm[b-s462qq9uym] { width: 1rem; height: 1rem; border: 2px solid var(--color-neutral-200); border-top-color: var(--color-primary-600); border-radius: 50%; animation: spin-b-s462qq9uym 0.8s linear infinite; display: inline-block; vertical-align: middle; }

@media (max-width: 768px) { .students-page[b-s462qq9uym] { padding: var(--space-4); } .page-header[b-s462qq9uym] { flex-direction: column; } }
@media (max-width: 520px) { .form-row[b-s462qq9uym] { grid-template-columns: 1fr; } .smodal[b-s462qq9uym] { max-width: 100%; } }
/* /Pages/Warden/Visitors.razor.rz.scp.css */
/* Warden Visitors page */
.loading-center[b-v1ukfm3xjw] { display: flex; justify-content: center; padding: 2rem; }
.spinner[b-v1ukfm3xjw] { width: 2rem; height: 2rem; border: 3px solid #e5e7eb; border-top-color: #7c3aed; border-radius: 50%; animation: spin-b-v1ukfm3xjw 0.6s linear infinite; }
@keyframes spin-b-v1ukfm3xjw { to { transform: rotate(360deg); } }

.warden-page[b-v1ukfm3xjw] { padding: 1.5rem; }
.page-header[b-v1ukfm3xjw] { margin-bottom: 1.5rem; }
.page-title[b-v1ukfm3xjw] { font-size: 1.5rem; font-weight: 700; color: #111827; margin: 0 0 0.25rem; }
.page-subtitle[b-v1ukfm3xjw] { color: #6b7280; margin: 0; font-size: 0.875rem; }

.alert[b-v1ukfm3xjw] { padding: 0.75rem 1rem; border-radius: 0.5rem; margin-bottom: 1rem; font-size: 0.875rem; }
.alert-danger[b-v1ukfm3xjw] { background: #fef2f2; color: #dc2626; border: 1px solid #fecaca; }
.alert-success[b-v1ukfm3xjw] { background: #f0fdf4; color: #166534; border: 1px solid #bbf7d0; }

.tab-bar[b-v1ukfm3xjw] { display: flex; gap: 0; border-bottom: 2px solid #e5e7eb; margin-bottom: 1rem; }
.tab-btn[b-v1ukfm3xjw] { padding: 0.5rem 1.25rem; background: none; border: none; cursor: pointer; font-size: 0.875rem; font-weight: 500; color: #6b7280; border-bottom: 2px solid transparent; margin-bottom: -2px; }
.tab-btn.active[b-v1ukfm3xjw] { color: #7c3aed; border-bottom-color: #7c3aed; font-weight: 600; }

.btn[b-v1ukfm3xjw] { padding: 0.5rem 1.25rem; border-radius: 0.5rem; border: none; cursor: pointer; font-size: 0.875rem; font-weight: 600; }
.btn-sm[b-v1ukfm3xjw] { padding: 0.3rem 0.75rem; border-radius: 0.375rem; border: none; cursor: pointer; font-size: 0.75rem; font-weight: 600; }

.table-container[b-v1ukfm3xjw] { background: #fff; border-radius: 0.75rem; border: 1px solid #e5e7eb; overflow-x: auto; }
.data-table[b-v1ukfm3xjw] { width: 100%; border-collapse: collapse; font-size: 0.875rem; }
.data-table th[b-v1ukfm3xjw] { padding: 0.75rem 1rem; text-align: left; background: #f9fafb; border-bottom: 1px solid #e5e7eb; font-weight: 600; color: #374151; }
.data-table td[b-v1ukfm3xjw] { padding: 0.75rem 1rem; border-bottom: 1px solid #f3f4f6; color: #374151; }
.data-table tr:last-child td[b-v1ukfm3xjw] { border-bottom: none; }
.empty-row[b-v1ukfm3xjw] { text-align: center; color: #9ca3af; font-style: italic; padding: 2rem !important; }

.modal-overlay[b-v1ukfm3xjw] { position: fixed; inset: 0; background: rgba(0,0,0,0.5); display: flex; align-items: center; justify-content: center; z-index: 1000; }
.modal[b-v1ukfm3xjw] { background: #fff; border-radius: 0.75rem; padding: 1.5rem; width: 90%; max-width: 480px; max-height: 90vh; overflow-y: auto; }
.modal h3[b-v1ukfm3xjw] { margin: 0 0 1rem; font-size: 1.1rem; font-weight: 700; }
.modal-footer[b-v1ukfm3xjw] { display: flex; gap: 0.75rem; justify-content: flex-end; margin-top: 1.25rem; }

.form-row[b-v1ukfm3xjw] { display: flex; flex-direction: column; gap: 0.3rem; margin-bottom: 0.875rem; }
.form-row label[b-v1ukfm3xjw] { font-size: 0.8rem; font-weight: 600; color: #374151; }
.form-row input[b-v1ukfm3xjw], .form-row select[b-v1ukfm3xjw], .form-row textarea[b-v1ukfm3xjw] { padding: 0.5rem 0.75rem; border: 1px solid #d1d5db; border-radius: 0.375rem; font-size: 0.875rem; }