:root {
    --bg: #f3f7f6;
    --bg-strong: #eaf2f0;
    --card: rgba(255, 255, 255, 0.94);
    --card-strong: #ffffff;
    --text: #203744;
    --muted: #71818a;
    --primary: #167d78;
    --primary-dark: #126b68;
    --secondary: #edf5f3;
    --success: #10b981;
    --danger: #ef4444;
    --warning: #f59e0b;
    --shadow: 0 16px 36px rgba(31, 74, 75, 0.08);
    --border: rgba(112, 143, 145, 0.2);
    --radius: 20px;
}

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    background:
        radial-gradient(ellipse at 88% 0%, rgba(213, 237, 229, 0.52), transparent 34%),
        linear-gradient(135deg, var(--bg-strong) 0%, #f4f8f7 42%, #f8faf9 100%);
    color: var(--text);
}

a {
    text-decoration: none;
}

button, input, select, textarea {
    font: inherit;
}

.app-shell {
    display: grid;
    grid-template-columns: 280px 1fr;
    min-height: 100vh;
    gap: 24px;
    padding: 28px;
    align-items: start;
}

.sidebar {
    position: sticky;
    top: 28px;
    align-self: start;
    min-height: 460px;
    background: linear-gradient(180deg, rgba(17, 24, 39, 0.98), rgba(15, 23, 42, 0.96));
    color: #fff;
    border-radius: 28px;
    padding: 22px 18px 18px;
    box-shadow: 0 22px 48px rgba(15, 23, 42, 0.18);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    overflow: visible;
    flex-shrink: 0;
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.brand-block {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 8px 10px 24px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.brand-mark {
    width: 46px;
    height: 46px;
    border-radius: 14px;
    display: grid;
    place-items: center;
    font-weight: 800;
    background: linear-gradient(135deg, #7c3aed, #22c55e);
    box-shadow: 0 14px 28px rgba(124, 58, 237, 0.35);
}

.brand-logo {
    width: 52px;
    height: 52px;
    border-radius: 16px;
    object-fit: cover;
    border: 1px solid rgba(255,255,255,0.18);
    background: rgba(255,255,255,0.08);
}

.brand-copy {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.brand-copy h1 {
    white-space: normal;
    line-height: 1.2;
}

.brand-copy small {
    color: rgba(255,255,255,0.7);
    display: block;
    margin-top: 2px;
    max-width: 150px;
    line-height: 1.4;
}

.eyebrow {
    display: block;
    font-size: 11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    opacity: 0.7;
    margin-bottom: 4px;
}

.text-primary {
    color: var(--primary);
}

.brand-block h1 {
    margin: 0;
    font-size: 1.4rem;
}

.nav-menu {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 18px;
    margin-top: 24px;
    padding: 6px 4px;
    min-height: 0;
    overflow: visible;
}

.nav-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.nav-group-title {
    font-size: 0.68rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.52);
    padding: 0 8px 4px;
    font-weight: 700;
}

.nav-dropdown-toggle {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    background: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.02));
    border: 1px solid rgba(255,255,255,0.04);
    color: rgba(255,255,255,0.9);
    padding: 10px 12px;
    border-radius: 12px;
    cursor: pointer;
    font: inherit;
    font-weight: 700;
    font-size: 0.9rem;
    transition: all 0.2s ease;
}

.nav-dropdown-toggle:hover {
    background: linear-gradient(135deg, rgba(79, 70, 229, 0.2), rgba(124, 58, 237, 0.12));
}

.nav-title-wrap {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.nav-chevron {
    font-size: 0.88rem;
    opacity: 0.8;
    transition: transform 0.2s ease;
}

.nav-dropdown-toggle.is-open .nav-chevron {
    transform: rotate(180deg);
}

.nav-submenu {
    display: none;
    flex-direction: column;
    gap: 8px;
    padding-left: 10px;
    margin-top: 6px;
}

.nav-submenu.is-open {
    display: flex;
}

.nav-submenu .nav-item {
    padding-left: 12px;
    font-size: 0.85rem;
    background: rgba(255,255,255,0.03);
}

.nav-item {
    display: flex;
    align-items: center;
    gap: 10px;
    justify-content: flex-start;
    padding: 10px 12px;
    border-radius: 12px;
    color: rgba(255, 255, 255, 0.8);
    background: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.02));
    border: 1px solid rgba(255, 255, 255, 0.04);
    transition: transform 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
    font-weight: 600;
    letter-spacing: 0.01em;
    font-size: 0.9rem;
}

.nav-icon {
    width: 20px;
    min-width: 20px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    font-size: 0.95rem;
    opacity: 0.95;
}

.nav-item:hover,
.nav-item.active {
    background: linear-gradient(135deg, rgba(79, 70, 229, 0.28), rgba(124, 58, 237, 0.18));
    color: #fff;
    transform: translateX(2px);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.08), 0 10px 22px rgba(79, 70, 229, 0.18);
}

.sidebar-footer {
    color: rgba(255,255,255,0.6);
    font-size: 0.8rem;
    text-align: center;
    padding: 14px 0 0;
    border-top: 1px solid rgba(255,255,255,0.08);
    margin-top: 18px;
}

.main-content {
    min-width: 0;
    padding: 18px 0;
}

.page-header,
.panel,
.stat-card {
    animation: floatIn 0.7s ease both;
}

.page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 8px 4px 18px;
}

.page-header h2 {
    margin: 0;
    font-size: clamp(1.8rem, 3vw, 2.5rem);
}

.dashboard-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    margin: 4px 0 24px;
    padding: 28px 30px;
    border: 1px solid rgba(79, 70, 229, 0.14);
    border-radius: 24px;
    background: linear-gradient(120deg, #eef2ff 0%, #f8faff 62%, #ecfdf5 100%);
    box-shadow: 0 18px 38px rgba(79, 70, 229, 0.1);
}

.dashboard-hero-v2 {
    min-height: 168px;
    padding: 30px 34px;
    background:
        radial-gradient(circle at 88% 20%, rgba(79, 70, 229, 0.14), transparent 34%),
        linear-gradient(120deg, #eef2ff 0%, #ffffff 58%, #ecfdf5 100%);
}

.dashboard-hero-v2 h2 {
    letter-spacing: -0.03em;
}

.dashboard-hero h2 {
    margin: 5px 0 8px;
    font-size: clamp(1.7rem, 3vw, 2.35rem);
}

.dashboard-hero p {
    max-width: 600px;
    margin: 0;
    color: var(--muted);
}

.dashboard-hero-kicker,
.dashboard-kpi span,
.dashboard-finance-card span {
    color: var(--muted);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.dashboard-hero-kicker {
    color: var(--primary);
}

.dashboard-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    flex-shrink: 0;
}

.dashboard-kpi-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(180px, 1fr));
    gap: 16px;
    margin-bottom: 16px;
}

.dashboard-kpi-grid-v2 {
    gap: 14px;
}

.dashboard-kpi-grid-v2 .dashboard-kpi {
    position: relative;
    overflow: hidden;
    min-height: 122px;
}

.dashboard-kpi-grid-v2 .dashboard-kpi::after {
    content: "";
    position: absolute;
    width: 72px;
    height: 72px;
    right: -24px;
    bottom: -28px;
    border-radius: 50%;
    background: currentColor;
    opacity: 0.06;
}

.dashboard-kpi {
    display: flex;
    align-items: center;
    gap: 14px;
    min-height: 128px;
    padding: 20px;
    border: 1px solid var(--border);
    border-radius: 20px;
    background: var(--card);
    box-shadow: var(--shadow);
}

.dashboard-kpi strong,
.dashboard-finance-card strong {
    display: block;
    margin-top: 4px;
    color: var(--text);
    font-size: 1.85rem;
}

.dashboard-kpi small {
    display: block;
    margin-top: 4px;
    color: var(--muted);
    font-size: 0.78rem;
}

.kpi-primary { border-top: 3px solid #4f46e5; }
.kpi-success { border-top: 3px solid #10b981; }
.kpi-warning { border-top: 3px solid #f59e0b; }
.kpi-purple { border-top: 3px solid #a855f7; }

.dashboard-finance-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(180px, 1fr));
    gap: 16px;
    margin-bottom: 24px;
}

.dashboard-finance-grid-v2 {
    gap: 14px;
}

.dashboard-finance-grid-v2 .dashboard-finance-card {
    min-height: 112px;
}

.dashboard-finance-card {
    display: flex;
    align-items: center;
    gap: 14px;
    position: relative;
    min-height: 104px;
    padding: 17px 18px;
    border: 1px solid var(--border);
    border-radius: 18px;
    background: var(--card);
    box-shadow: 0 12px 26px rgba(79, 70, 229, 0.07);
}

.dashboard-finance-card a {
    position: absolute;
    right: 18px;
    bottom: 14px;
    color: var(--primary);
    font-size: 0.78rem;
    font-weight: 700;
}

.finance-blue { border-left: 4px solid #4f46e5; }
.finance-green { border-left: 4px solid #10b981; }
.finance-orange { border-left: 4px solid #f59e0b; }

.dashboard-finance-card .stat-icon {
    width: 46px;
    height: 46px;
    border-radius: 14px;
}

.dashboard-finance-card strong {
    font-size: 1.25rem;
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(180px, 1fr));
    gap: 18px;
    margin: 10px 0 28px;
}

.stat-card {
    display: flex;
    gap: 18px;
    align-items: center;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 22px 18px;
    box-shadow: var(--shadow);
    backdrop-filter: blur(10px);
}

.stat-icon {
    width: 54px;
    height: 54px;
    border-radius: 16px;
    display: grid;
    place-items: center;
    font-weight: 700;
    color: #fff;
}

.icon-a { background: linear-gradient(135deg, #4f46e5, #6366f1); }
.icon-b { background: linear-gradient(135deg, #14b8a6, #22c55e); }
.icon-c { background: linear-gradient(135deg, #f59e0b, #f97316); }
.icon-d { background: linear-gradient(135deg, #ec4899, #a855f7); }

.stat-card span {
    display: block;
    color: var(--muted);
    font-size: 0.82rem;
}

.stat-card strong {
    display: block;
    font-size: 2rem;
    margin-top: 4px;
}

.panel {
    background: rgba(255, 255, 255, 0.82);
    border: 1px solid var(--border);
    border-radius: 26px;
    box-shadow: var(--shadow);
    padding: 20px 20px 10px;
    backdrop-filter: blur(12px);
}

.panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 20px;
}

.panel-header h3 {
    margin: 0;
    font-size: 1.2rem;
}

.schedule-summary {
    margin: 0 0 18px;
    padding: 12px 14px;
    border-radius: 12px;
    background: rgba(79, 70, 229, 0.06);
    border: 1px solid rgba(79, 70, 229, 0.12);
    color: var(--primary-dark);
    font-size: 0.95rem;
}

.schedule-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 16px;
    margin-top: 14px;
}

.schedule-day {
    background: rgba(148, 163, 184, 0.06);
    border: 1px solid rgba(148, 163, 184, 0.18);
    border-radius: 18px;
    padding: 16px;
}

.schedule-day h4 {
    margin: 0 0 12px;
    color: var(--primary-dark);
    font-size: 1rem;
}

.schedule-item {
    background: rgba(255, 255, 255, 0.8);
    border: 1px solid rgba(148, 163, 184, 0.12);
    border-radius: 12px;
    padding: 12px 10px;
    margin-bottom: 10px;
}

.schedule-item:last-child {
    margin-bottom: 0;
}

.schedule-title {
    font-weight: 700;
    color: var(--primary-dark);
    margin-bottom: 6px;
}

.schedule-meta {
    font-size: 0.83rem;
    color: var(--muted);
    line-height: 1.5;
}

.empty-state-box {
    padding: 18px;
    border-radius: 12px;
    background: rgba(148, 163, 184, 0.06);
    border: 1px dashed rgba(148, 163, 184, 0.25);
    color: var(--muted);
    text-align: center;
}

.print-school-header {
    display: none;
}

.search-field input {
    min-width: 250px;
    border: 1px solid var(--border);
    background: var(--secondary);
    border-radius: 12px;
    padding: 12px 14px;
    outline: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.search-field input:focus,
.field-group input:focus,
.field-group select:focus,
.field-group textarea:focus {
    border-color: rgba(79, 70, 229, 0.7);
    box-shadow: 0 0 0 4px rgba(79, 70, 229, 0.08);
    outline: none;
}

.header-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.inline-actions {
    justify-content: flex-end;
}

.import-form {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.file-input-label {
    position: relative;
    overflow: hidden;
}

.file-input-label input {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
}

.table-wrap {
    overflow-x: auto;
}

.table-summary {
    margin: 0 0 12px;
    color: var(--muted);
    font-size: 0.85rem;
    font-weight: 600;
}

.table-controls {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 14px;
    color: var(--muted);
    font-size: 0.9rem;
}

.table-control-link {
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--primary-dark);
    cursor: pointer;
    font: inherit;
}

.table-control-link:hover {
    text-decoration: underline;
}

.table-control-separator {
    color: rgba(105, 115, 134, 0.55);
}

.table-controls .field-select {
    min-width: 76px;
    padding: 8px 28px 8px 10px;
}

table {
    width: 100%;
    border-collapse: collapse;
}

.class-table {
    font-size: 0.9rem;
    border: 1px solid rgba(149, 165, 194, 0.2);
    border-radius: 14px;
    overflow: hidden;
}

.class-table th,
.class-table td {
    padding: 12px 14px;
    border-bottom: 1px solid rgba(149, 165, 194, 0.2);
    text-align: left;
    vertical-align: middle;
}

.class-table thead th {
    background: rgba(79, 70, 229, 0.05);
    color: var(--muted);
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.class-table tbody tr:last-child td {
    border-bottom: none;
}

.student-table {
    min-width: 780px;
    font-size: 0.88rem;
    border: 1px solid rgba(149, 165, 194, 0.2);
    border-radius: 14px;
    overflow: hidden;
}

.student-table th,
.student-table td {
    padding: 13px 14px;
    border-bottom: 1px solid rgba(149, 165, 194, 0.2);
    text-align: left;
    vertical-align: middle;
}

.student-table thead th {
    background: rgba(79, 70, 229, 0.05);
    color: var(--muted);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    white-space: nowrap;
}

.student-table tbody tr {
    transition: background 0.2s ease;
}

.student-table tbody tr:hover {
    background: rgba(79, 70, 229, 0.04);
}

.student-table tbody tr:last-child td {
    border-bottom: none;
}

.student-table td:nth-child(2) {
    color: var(--muted);
}

.student-table td:last-child {
    min-width: 190px;
}

.student-table .action-group {
    flex-wrap: nowrap;
}

.attendance-table {
    min-width: 560px;
    border: 1px solid var(--border);
}

.attendance-table th,
.attendance-table td {
    padding: 12px 14px;
    border: 1px solid var(--border);
    text-align: left;
}

.attendance-table thead th {
    background: rgba(79, 70, 229, 0.05);
    color: var(--muted);
    font-size: 0.75rem;
    text-transform: uppercase;
}

.attendance-table select {
    min-width: 150px;
}

.attendance-summary p {
    margin: 6px 0 0;
    color: var(--muted);
    font-size: 0.9rem;
}

.attendance-permissions {
    margin: 4px 0;
    padding: 16px;
    border: 1px solid var(--border);
    border-radius: 14px;
}

.attendance-permissions legend {
    padding: 0 8px;
    font-weight: 700;
}

.teacher-table {
    font-size: 0.82rem;
}

.teacher-table th,
.teacher-table td {
    padding: 12px 10px;
    border-bottom: 1px solid rgba(149, 165, 194, 0.2);
    text-align: left;
    vertical-align: middle;
}

.teacher-table th {
    color: var(--muted);
    font-size: 0.7rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.teacher-table .btn,
.teacher-table .field-select,
.teacher-table input,
.teacher-table select,
.teacher-table textarea {
    font-size: 0.8rem;
}

.course-table {
    font-size: 0.86rem;
}

.course-table th,
.course-table td {
    padding: 12px 12px;
    border-bottom: 1px solid rgba(149, 165, 194, 0.2);
    text-align: left;
    vertical-align: middle;
}

.course-table thead th {
    background: rgba(79, 70, 229, 0.05);
    color: var(--muted);
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.course-table tbody tr:last-child td {
    border-bottom: none;
}

.data-table {
    min-width: 620px;
    border: 1px solid rgba(149, 165, 194, 0.2);
    border-radius: 14px;
    overflow: hidden;
    font-size: 0.88rem;
}

.data-table th,
.data-table td {
    padding: 12px 14px;
    border-bottom: 1px solid rgba(149, 165, 194, 0.2);
    text-align: left;
    vertical-align: middle;
    white-space: nowrap;
}

.data-table thead th {
    background: rgba(79, 70, 229, 0.05);
    color: var(--muted);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.data-table tbody tr {
    transition: background 0.2s ease;
}

.data-table tbody tr:hover {
    background: rgba(79, 70, 229, 0.04);
}

.data-table tbody tr:last-child td {
    border-bottom: none;
}

.table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.grading-year-filter,
.grading-period-filter {
    display: flex;
    align-items: end;
    gap: 12px;
}

.grading-year-filter label,
.grading-period-filter label {
    display: block;
    margin-bottom: 6px;
    color: var(--muted);
    font-size: 0.82rem;
    font-weight: 700;
}

.grading-year-filter select,
.grading-period-filter select {
    min-width: 190px;
}

.grading-summary-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin: 20px 0;
    padding: 18px 0;
    border-top: 1px solid rgba(149, 165, 194, 0.2);
    border-bottom: 1px solid rgba(149, 165, 194, 0.2);
}

.grading-summary-row h3 {
    margin: 4px 0;
}

.grading-formula-section,
.grading-results-heading {
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid rgba(149, 165, 194, 0.25);
}

.grading-results-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}

.grading-results-heading h3 {
    margin: 5px 0 0;
}

.grading-mode-field {
    max-width: 430px;
}

.grading-weight-grid {
    margin-top: 12px;
}

.grading-deliberation-table {
    min-width: max-content;
}

.grading-deliberation-table .grading-student-column {
    position: sticky;
    left: 0;
    z-index: 1;
    min-width: 190px;
    background: var(--surface, #fff);
}

.grading-deliberation-table thead .grading-student-column {
    z-index: 2;
    background: var(--surface-raised, #f7f8fa);
}

.grading-progress-count {
    display: block;
    margin-top: 4px;
    color: var(--muted);
    font-size: 0.72rem;
}

.grading-state {
    display: inline-block;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 0.76rem;
    font-weight: 700;
}

.grading-state-ready {
    color: #166534;
    background: rgba(34, 197, 94, 0.12);
}

.grading-state-pending {
    color: #92400e;
    background: rgba(245, 158, 11, 0.14);
}

.grading-state-missing {
    color: #991b1b;
    background: rgba(239, 68, 68, 0.1);
}

.report-print-area {
    max-width: 1100px;
    margin: 0 auto;
    padding: 28px;
    color: #17212b;
    font-family: Georgia, 'Times New Roman', serif;
}

.report-kindergarten {
    max-width: 900px;
}

.report-school-header {
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr) auto;
    align-items: center;
    gap: 14px;
    padding-bottom: 12px;
    border-bottom: 2px solid #17212b;
    text-align: center;
}

.report-school-header img,
.report-brand-mark {
    width: 72px;
    height: 72px;
    flex: 0 0 72px;
    object-fit: contain;
    border: 1px solid #d6dfdc;
}

.report-brand-mark {
    display: grid;
    place-items: center;
    background: #1769aa;
    color: #fff;
    font-size: 1rem;
    font-weight: 800;
}

.report-congo-flag {
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0;
    background: transparent;
}

.report-congo-flag svg {
    display: block;
    width: 100%;
    height: auto;
    border: 1px solid #d6dfdc;
    print-color-adjust: exact;
    -webkit-print-color-adjust: exact;
}

.report-school-header .report-country,
.report-school-header .report-ministry {
    margin: 0 0 2px;
    color: #17212b;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
}

.report-school-header h1 {
    margin: 0;
    font-size: 1rem;
    text-transform: uppercase;
}

.report-school-header p {
    margin: 4px 0 0;
    color: #52616b;
}

.report-document-title {
    color: #17212b !important;
    font-weight: 800;
    text-transform: uppercase;
}

.report-year-stamp {
    min-width: 112px;
    padding: 7px;
    border: 1px solid #17212b;
    font-size: 0.68rem;
    text-align: center;
}

.report-student {
    display: grid;
    grid-template-columns: 0.55fr 1.5fr 1.2fr 0.9fr;
    gap: 10px;
    margin: 12px 0;
    padding: 8px 0;
    border-bottom: 1px solid #17212b;
}

.report-student span,
.report-average span {
    display: block;
    color: #17212b;
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
}

.report-student strong {
    display: block;
    min-height: 20px;
    margin-top: 3px;
    font-size: 0.82rem;
}

.report-table {
    width: 100%;
    min-width: 0;
    border-collapse: collapse;
    font-size: 0.76rem;
}

.report-table th,
.report-table td {
    white-space: normal;
    border: 1px solid #17212b;
    padding: 6px;
    text-align: center;
}

.report-table th:first-child,
.report-table td:first-child {
    min-width: 150px;
    text-align: left;
}

.report-table thead th {
    background: #e8edf0;
    color: #17212b;
}

.report-table .report-group-row th {
    background: #dce5e8;
    text-align: left;
    text-transform: uppercase;
}

.report-state {
    display: inline-block;
    padding: 5px 9px;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 700;
}

.report-state-complete {
    background: #e5f3ec;
    color: #176344;
}

.report-state-pending {
    background: #fff1d7;
    color: #8a4b08;
}

.report-average {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-top: 14px;
    padding: 10px;
    border: 1px solid #17212b;
}

.report-average strong {
    display: block;
    margin: 3px 0;
    font-size: 1.15rem;
}

.report-average small {
    color: #17212b;
}

.report-note {
    color: #52616b;
    font-size: 0.84rem;
}

.report-signatures {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
    margin-top: 38px;
}

.report-signatures div {
    min-height: 68px;
    padding-top: 28px;
    text-align: center;
    font-size: 0.72rem;
    font-weight: 700;
}

.report-issued-date {
    margin: 10px 0 0;
    color: #17212b;
    font-size: 0.75rem;
    text-align: right;
}

@media print {
    @page {
        size: A4 portrait;
        margin: 9mm;
    }

    body * {
        visibility: hidden !important;
    }

    .report-print-area,
    .report-print-area * {
        visibility: visible !important;
    }

    .report-print-area {
        position: static !important;
        display: block !important;
        width: 100% !important;
        max-width: none;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        background: #fff !important;
    }

    .report-print-area,
    .report-print-area * {
        opacity: 1 !important;
        transform: none !important;
    }

    .report-print-area .report-table {
        min-width: 0 !important;
        font-size: 8pt;
    }

    .report-print-area .report-table th,
    .report-print-area .report-table td {
        padding: 4px !important;
        border: 1px solid #17212b !important;
        color: #17212b !important;
        white-space: normal !important;
    }

    .report-school-header img,
    .report-brand-mark {
        width: 56px;
        height: 56px;
    }

    .report-student {
        margin: 8px 0;
    }

    .report-signatures,
    .report-average,
    .report-table tr {
        break-inside: avoid;
        page-break-inside: avoid;
    }

    .no-print {
        display: none !important;
    }
}

@media (max-width: 700px) {
    .report-print-area {
        padding: 16px;
    }

    .report-school-header {
        grid-template-columns: 48px minmax(0, 1fr);
    }

    .report-school-header img,
    .report-brand-mark {
        width: 48px;
        height: 48px;
    }

    .report-year-stamp {
        grid-column: 1 / -1;
    }

    .report-student {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.grading-category-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
    gap: 14px;
    margin-top: 18px;
}

.grading-category {
    min-width: 0;
    margin: 0;
    padding: 16px;
    border: 1px solid rgba(149, 165, 194, 0.3);
    border-radius: 8px;
}

.grading-category legend {
    padding: 0 6px;
    font-weight: 700;
}

.grading-work-list {
    display: grid;
    gap: 10px;
    margin-bottom: 12px;
}

.grading-work-row {
    display: flex;
    align-items: end;
    gap: 10px;
}

.grading-work-row > label {
    flex: 1;
    min-width: 0;
}

.grading-work-input {
    display: flex;
    align-items: center;
    gap: 8px;
}

.grading-work-input input {
    width: 100%;
    min-width: 0;
}

.grading-work-input > span {
    color: var(--muted);
    white-space: nowrap;
}

.grading-score-table {
    min-width: max-content;
}

.grading-score-table .grading-student-column {
    position: sticky;
    left: 0;
    z-index: 1;
    min-width: 190px;
    background: var(--surface, #fff);
}

.grading-score-table thead .grading-student-column {
    z-index: 2;
    background: var(--surface-raised, #f7f8fa);
}

.grading-score-table thead tr:nth-child(2) th {
    padding-top: 5px;
    color: var(--muted);
    font-size: 0.75rem;
}

.grading-score-input {
    width: 86px;
    min-width: 86px;
    padding: 8px;
}

@media (max-width: 700px) {
    .grading-year-filter,
    .grading-period-filter,
    .grading-summary-row {
        align-items: stretch;
        flex-direction: column;
    }

    .grading-year-filter select,
    .grading-period-filter select {
        width: 100%;
    }
}

.school-year-progress-section {
    margin-top: 28px;
    padding-top: 18px;
    border-top: 1px solid rgba(79, 70, 229, 0.12);
}

.level-progress-table th,
.level-progress-table td {
    min-width: 120px;
    vertical-align: middle;
}

.level-progress-table td:first-child {
    min-width: 150px;
}

.level-progress-table .field-select,
.level-progress-table input {
    width: 100%;
    min-width: 110px;
}

.level-progress-table input {
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 9px 10px;
    background: #fff;
    color: var(--text);
}

.period-level-list {
    display: grid;
    gap: 20px;
}

.school-year-period-panel {
    width: 100%;
    max-width: none;
    padding: 28px;
}

.period-level-card {
    margin: 0;
    padding: 22px;
    border: 1px solid rgba(79, 70, 229, 0.18);
    border-radius: 18px;
    background: linear-gradient(145deg, rgba(248, 250, 252, 0.95), rgba(238, 242, 255, 0.72));
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.06);
}

.period-level-card legend {
    padding: 0 8px;
    color: var(--text);
    font-weight: 800;
}

.period-level-toolbar,
.period-item-heading,
.subperiod-heading,
.subperiod-item {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
}

.period-level-toolbar {
    align-items: end;
    margin-bottom: 16px;
}

.period-count-field {
    width: min(100%, 240px);
    margin: 0;
}

.period-level-selector {
    width: min(100%, 420px);
    margin-bottom: 18px;
}

.period-year-selector {
    width: min(100%, 520px);
    margin-bottom: 18px;
}

.period-level-selector select {
    font-weight: 700;
}

.form-help {
    margin: 5px 0 0;
    color: var(--muted);
    font-size: 0.86rem;
}

.period-items {
    display: grid;
    gap: 14px;
}

.period-item {
    padding: 16px;
    border: 1px solid rgba(148, 163, 184, 0.28);
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 6px 16px rgba(15, 23, 42, 0.04);
}

.period-item-heading {
    align-items: center;
    margin-bottom: 14px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(148, 163, 184, 0.2);
}

.period-fields {
    grid-template-columns: minmax(180px, 1.4fr) repeat(3, minmax(145px, 1fr));
    margin-bottom: 0;
}

.subperiod-section {
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid var(--border);
    padding-left: 14px;
    border-left: 3px solid rgba(20, 184, 166, 0.45);
}

.subperiod-heading {
    align-items: center;
    margin-bottom: 12px;
}

.subperiod-items {
    display: grid;
    gap: 10px;
}

.subperiod-item {
    align-items: end;
    padding: 12px;
    border: 1px dashed var(--border);
    border-radius: 10px;
    background: var(--surface-muted, #f8fafc);
}

.subperiod-item .period-fields {
    flex: 1;
}

@media (max-width: 700px) {
    .period-level-card {
        padding: 14px;
    }

    .period-level-toolbar,
    .period-item-heading,
    .subperiod-heading,
    .subperiod-item {
        display: grid;
        align-items: stretch;
    }

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

    .period-count-field {
        width: 100%;
    }

    .subperiod-item .btn,
    .period-item-heading .btn,
    .subperiod-heading .btn {
        width: 100%;
    }
}

.teacher-row {
    transition: background 0.2s ease, box-shadow 0.2s ease;
}

.teacher-status-actif {
    background: rgba(16, 185, 129, 0.08);
}

.teacher-status-suspendu {
    background: rgba(220, 38, 38, 0.18);
}

.teacher-status-retraite {
    background: rgba(234, 179, 8, 0.12);
}

.teacher-status-renvoi {
    background: rgba(239, 68, 68, 0.1);
}

.teacher-status-demission {
    background: rgba(15, 23, 42, 0.14);
}

.user-cell {
    display: flex;
    align-items: center;
    gap: 12px;
    font-weight: 600;
}

.user-avatar {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, #e0e7ff, #c7d2fe);
    color: var(--primary-dark);
    font-weight: 700;
}

.badge {
    display: inline-flex;
    padding: 7px 12px;
    border-radius: 999px;
    font-size: 0.76rem;
    font-weight: 600;
}

.badge-soft {
    background: rgba(79, 70, 229, 0.08);
    color: var(--primary-dark);
}

.action-group {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 12px;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    font-weight: 600;
}

.btn:hover {
    transform: translateY(-1px);
}

.btn-primary {
    background: linear-gradient(135deg, var(--primary), #7c3aed);
    color: #fff;
    padding: 12px 18px;
    box-shadow: 0 15px 24px rgba(79, 70, 229, 0.2);
}

.btn-secondary {
    background: var(--secondary);
    color: var(--text);
    padding: 12px 18px;
}

.btn-danger {
    background: rgba(239, 68, 68, 0.1);
    color: var(--danger);
    padding: 10px 14px;
}

.btn-success {
    background: rgba(16, 185, 129, 0.12);
    color: #15803d;
    padding: 10px 14px;
}

.btn-small {
    padding: 9px 14px;
    font-size: 0.82rem;
}

.dashboard-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) minmax(300px, 0.8fr);
    gap: 22px;
    margin-top: 28px;
}

.dashboard-main-panel,
.dashboard-side-panel {
    min-height: 360px;
}

.dashboard-grid-v2 {
    align-items: start;
}

.dashboard-grid-v2 .panel {
    padding: 22px;
}

.panel-kicker {
    display: block;
    margin-bottom: 4px;
    color: var(--primary);
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.payment-card strong {
    font-size: 1.4rem;
}

.class-chart {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.chart-row {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.chart-label {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.92rem;
    color: var(--text);
}

.chart-label strong {
    font-size: 0.92rem;
    color: var(--primary-dark);
}

.chart-bar-bg {
    width: 100%;
    height: 12px;
    border-radius: 999px;
    background: rgba(79, 70, 229, 0.08);
    overflow: hidden;
}

.dashboard-pie-layout {
    display: grid;
    grid-template-columns: minmax(190px, 0.9fr) minmax(220px, 1fr);
    align-items: center;
    gap: 28px;
    min-height: 250px;
    margin-top: 12px;
}

.dashboard-pie-chart {
    width: min(100%, 220px);
    aspect-ratio: 1;
    display: grid;
    place-items: center;
    margin: 0 auto;
    border-radius: 50%;
    box-shadow: 0 14px 28px rgba(79, 70, 229, 0.12);
}

.dashboard-pie-center {
    width: 98px;
    height: 98px;
    display: grid;
    place-content: center;
    border-radius: 50%;
    background: var(--card-strong);
    text-align: center;
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.08);
}

.dashboard-pie-center strong {
    color: var(--primary-dark);
    font-size: 1.45rem;
}

.dashboard-pie-center span {
    color: var(--muted);
    font-size: 0.75rem;
}

.dashboard-pie-legend {
    display: grid;
    gap: 10px;
}

.dashboard-pie-legend-item {
    display: flex;
    align-items: center;
    gap: 9px;
    min-width: 0;
    padding: 8px 10px;
    border-radius: 10px;
    background: rgba(79, 70, 229, 0.035);
}

.dashboard-pie-dot {
    width: 10px;
    height: 10px;
    flex-shrink: 0;
    border-radius: 50%;
}

.dashboard-pie-name {
    min-width: 0;
    flex: 1;
    overflow: hidden;
    color: var(--text);
    font-size: 0.82rem;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dashboard-pie-name small {
    display: block;
    margin-bottom: 2px;
    color: var(--muted);
    font-size: 0.68rem;
    font-weight: 600;
}

.dashboard-pie-legend-item strong {
    color: var(--primary-dark);
    font-size: 0.84rem;
}

.chart-bar {
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--primary), #7c3aed);
}

.payments-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.fee-type-panel {
    padding: 18px;
    border: 1px solid rgba(79, 70, 229, 0.16);
    border-radius: 16px;
    background: linear-gradient(135deg, rgba(238, 242, 255, 0.82), rgba(240, 253, 250, 0.72));
}

.fee-type-panel-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 14px;
}

.fee-type-panel-heading h4 {
    margin: 3px 0 0;
    color: var(--text);
}

.fee-type-selection,
.fee-type-badge {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    padding: 5px 10px;
    border-radius: 999px;
    background: rgba(79, 70, 229, 0.1);
    color: var(--primary-dark);
    font-size: 0.8rem;
    font-weight: 700;
}

.fee-type-options {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 10px;
}

.fee-type-button {
    min-height: 52px;
    padding: 10px 12px;
    border: 1px solid rgba(79, 70, 229, 0.16);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.78);
    color: var(--text);
    cursor: pointer;
    font-weight: 700;
    line-height: 1.25;
    transition: transform 0.2s ease, border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}

.fee-type-button:hover,
.fee-type-button.is-selected {
    border-color: var(--primary);
    background: var(--primary);
    color: #fff;
    box-shadow: 0 8px 18px rgba(79, 70, 229, 0.2);
    transform: translateY(-2px);
}

.fee-type-button:nth-child(1),
.fee-type-button:nth-child(1):hover,
.fee-type-button:nth-child(1).is-selected {
    border-color: #f59e0b;
    background: #f59e0b;
    color: #241500;
}

.fee-type-button:nth-child(2),
.fee-type-button:nth-child(2):hover,
.fee-type-button:nth-child(2).is-selected {
    border-color: #dc2626;
    background: #dc2626;
    color: #fff;
}

.fee-type-button:nth-child(3),
.fee-type-button:nth-child(3):hover,
.fee-type-button:nth-child(3).is-selected {
    border-color: #16a34a;
    background: #16a34a;
    color: #fff;
}

.fee-type-button:nth-child(4),
.fee-type-button:nth-child(4):hover,
.fee-type-button:nth-child(4).is-selected {
    border-color: #2563eb;
    background: #2563eb;
    color: #fff;
}

.fee-type-button:nth-child(5),
.fee-type-button:nth-child(5):hover,
.fee-type-button:nth-child(5).is-selected {
    border-color: #111827;
    background: #111827;
    color: #fff;
}

.fee-configuration-panel {
    scroll-margin-top: 24px;
}

.fee-configuration-panel [hidden] {
    display: none !important;
}

.fee-config-grid {
    grid-template-columns: repeat(3, minmax(180px, 1fr));
}

.installments-panel {
    padding: 20px;
    border: 1px solid rgba(20, 184, 166, 0.2);
    border-radius: 16px;
    background: rgba(240, 253, 250, 0.58);
}

.installments-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 16px;
}

.installments-heading h4 {
    margin: 3px 0 0;
}

.installment-count-field {
    width: min(100%, 220px);
    margin: 0;
}

.installment-items {
    display: grid;
    gap: 12px;
}

.installment-item {
    padding: 16px;
    border: 1px solid rgba(20, 184, 166, 0.2);
    border-radius: 12px;
    background: #fff;
}

.installment-fields {
    grid-template-columns: 1.3fr repeat(3, minmax(150px, 1fr));
    margin-top: 12px;
}

@media (max-width: 820px) {
    .fee-type-options {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .fee-config-grid,
    .installment-fields {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 520px) {
    .fee-type-panel-heading {
        align-items: flex-start;
        flex-direction: column;
    }

    .fee-type-options {
        grid-template-columns: 1fr;
    }

    .installments-heading {
        flex-direction: column;
    }

    .installment-count-field,
    .fee-config-grid,
    .installment-fields {
        width: 100%;
        grid-template-columns: 1fr;
    }
}

.payment-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 14px;
    border-radius: 14px;
    background: rgba(79, 70, 229, 0.04);
    border: 1px solid rgba(79, 70, 229, 0.08);
}

.dashboard-payment-item {
    position: relative;
    padding-left: 18px;
    background: #fff;
    box-shadow: 0 8px 18px rgba(79, 70, 229, 0.05);
}

.payment-status-dot {
    width: 8px;
    height: 8px;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--success);
    box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.1);
}

.payment-item strong,
.payment-item small,
.payment-meta {
    display: block;
}

.payment-item small,
.payment-meta small {
    color: var(--muted);
}

.payment-meta {
    text-align: right;
}

.form-panel {
    padding: 28px 22px;
}

.page-header-subtitle {
    margin: 8px 0 0;
    color: var(--muted);
    font-size: 0.92rem;
}

.assignment-profile {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 18px;
    margin-bottom: 24px;
    border: 1px solid rgba(79, 70, 229, 0.14);
    border-radius: 18px;
    background: linear-gradient(135deg, rgba(79, 70, 229, 0.08), rgba(124, 58, 237, 0.03));
}

.assignment-avatar {
    width: 58px;
    height: 58px;
    display: grid;
    place-items: center;
    flex-shrink: 0;
    border-radius: 18px;
    background: linear-gradient(135deg, var(--primary), #7c3aed);
    color: #fff;
    font-size: 1.15rem;
    font-weight: 800;
    box-shadow: 0 12px 24px rgba(79, 70, 229, 0.22);
}

.assignment-profile-label,
.assignment-kicker {
    display: block;
    color: var(--muted);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}

.assignment-profile-copy h3 {
    margin: 3px 0 8px;
    font-size: 1.2rem;
}

.teacher-profile-header {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px;
    margin-bottom: 24px;
    border: 1px solid rgba(79, 70, 229, 0.14);
    border-radius: 20px;
    background: linear-gradient(135deg, rgba(79, 70, 229, 0.08), rgba(124, 58, 237, 0.03));
}

.teacher-profile-avatar {
    width: 68px;
    height: 68px;
    display: grid;
    place-items: center;
    flex-shrink: 0;
    border-radius: 20px;
    background: linear-gradient(135deg, var(--primary), #7c3aed);
    color: #fff;
    font-size: 1.35rem;
    font-weight: 800;
    box-shadow: 0 14px 28px rgba(79, 70, 229, 0.22);
    overflow: hidden;
}

.teacher-profile-avatar .image-avatar {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: inherit;
    object-fit: cover;
}

.teacher-profile-copy {
    min-width: 0;
    flex: 1;
}

.teacher-profile-copy h3 {
    margin: 4px 0 9px;
    font-size: 1.35rem;
}

.teacher-profile-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.teacher-profile-actions {
    margin-left: auto;
}

.status-pill {
    display: inline-flex;
    align-items: center;
    padding: 6px 10px;
    border-radius: 999px;
    font-size: 0.76rem;
    font-weight: 700;
}

.status-actif {
    background: rgba(16, 185, 129, 0.12);
    color: #047857;
}

.status-suspendu,
.status-renvoi {
    background: rgba(239, 68, 68, 0.12);
    color: #b42318;
}

.status-retraite,
.status-demission {
    background: rgba(245, 158, 11, 0.14);
    color: #a16207;
}

.info-card {
    position: relative;
}

.info-card-count {
    position: absolute;
    top: 18px;
    right: 18px;
    min-width: 28px;
    padding: 5px 8px;
    border-radius: 999px;
    background: rgba(79, 70, 229, 0.1);
    color: var(--primary-dark);
    font-size: 0.78rem;
    font-weight: 800;
    text-align: center;
}

.detail-list {
    display: grid;
    gap: 12px;
}

.detail-item {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(149, 165, 194, 0.16);
}

.detail-item:last-child {
    padding-bottom: 0;
    border-bottom: none;
}

.detail-item span {
    color: var(--muted);
    font-size: 0.84rem;
}

.detail-item strong {
    max-width: 62%;
    color: var(--text);
    font-size: 0.88rem;
    text-align: right;
    overflow-wrap: anywhere;
}

.assignment-chip-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.assignment-chip-list li {
    padding: 8px 11px;
    border-radius: 10px;
    background: rgba(79, 70, 229, 0.08);
    color: var(--primary-dark);
    font-size: 0.84rem;
    font-weight: 700;
}

.assignment-section {
    padding: 22px;
    border: 1px solid var(--border);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.6);
}

.assignment-section-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 16px;
}

.assignment-section-heading h3 {
    margin: 4px 0 0;
    font-size: 1.12rem;
}

.school-year-current {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 24px;
    padding: 18px 20px;
    border: 1px solid rgba(22, 163, 74, 0.2);
    border-radius: 16px;
    background: rgba(22, 163, 74, 0.06);
}

.school-year-current > div {
    display: grid;
    gap: 4px;
}

.school-year-label {
    color: var(--muted);
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.school-year-current strong {
    font-size: 1.1rem;
}

.school-year-current small {
    color: var(--muted);
}

.badge-success {
    background: rgba(22, 163, 74, 0.12);
    color: #15803d;
}

.school-year-form {
    margin-bottom: 30px;
}

.school-years-list-heading {
    margin-top: 24px;
}

.inline-form {
    display: inline-flex;
    margin: 0;
}

.assignment-count {
    padding: 7px 10px;
    border-radius: 999px;
    background: rgba(79, 70, 229, 0.08);
    color: var(--primary-dark);
    font-size: 0.78rem;
    font-weight: 700;
    white-space: nowrap;
}

.assignment-table-heading {
    margin-top: 28px;
}

.panel-subtitle {
    margin: 6px 0 0;
    color: var(--muted);
    font-size: 0.86rem;
}

.teacher-assignment-table {
    min-width: 520px;
    border: 1px solid rgba(149, 165, 194, 0.2);
    border-radius: 14px;
    overflow: hidden;
    font-size: 0.9rem;
}

.teacher-assignment-table th,
.teacher-assignment-table td {
    padding: 13px 16px;
    border-bottom: 1px solid rgba(149, 165, 194, 0.2);
    text-align: left;
    vertical-align: middle;
}

.teacher-assignment-table thead th {
    background: rgba(79, 70, 229, 0.05);
    color: var(--muted);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.teacher-assignment-table tbody tr {
    transition: background 0.2s ease;
}

.teacher-assignment-table tbody tr:hover {
    background: rgba(79, 70, 229, 0.04);
}

.teacher-assignment-table tbody tr:last-child td {
    border-bottom: none;
}

.teacher-assignment-table td:first-child {
    color: var(--primary-dark);
    font-weight: 700;
}

.student-form {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(220px, 1fr));
    gap: 18px;
}

.form-grid.period-fields {
    grid-template-columns: minmax(190px, 1.35fr) repeat(3, minmax(130px, 1fr));
    gap: 12px;
}

.form-grid.full-width {
    grid-column: 1 / -1;
}

.course-form-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.course-row-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 18px;
}

.course-row-grid .field-group:first-child {
    grid-column: span 2;
}

.course-row-grid .course-description-field {
    grid-column: span 2;
    min-width: 0;
}

.course-row-grid .course-description-field textarea {
    min-height: 48px;
}

.course-row-grid .field-group.full-width {
    grid-column: 1 / -1;
}

.humanity-extra-fields {
    display: none;
    margin-top: 8px;
}

.humanity-extra-fields.is-visible {
    display: grid;
}

.field-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

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

.field-group label {
    font-weight: 600;
    color: var(--text);
}

.field-group input,
.field-group select,
.field-group textarea {
    width: 100%;
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 12px 14px;
    background: #f8faff;
    color: var(--text);
    resize: vertical;
}

.form-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.alert {
    padding: 14px 16px;
    border-radius: 14px;
    font-size: 0.95rem;
    border: 1px solid transparent;
    transition: opacity 0.35s ease, transform 0.35s ease, max-height 0.35s ease, padding 0.35s ease, margin 0.35s ease, border-width 0.35s ease;
}

.alert.is-hidden {
    opacity: 0;
    transform: translateY(-4px);
    max-height: 0;
    padding-top: 0;
    padding-bottom: 0;
    margin-top: 0;
    margin-bottom: 0;
    border-width: 0;
    overflow: hidden;
}

.alert.error {
    background: rgba(239, 68, 68, 0.08);
    border-color: rgba(239, 68, 68, 0.15);
    color: #b42318;
}

.alert.success {
    background: rgba(16, 185, 129, 0.08);
    border-color: rgba(16, 185, 129, 0.2);
    color: #057a55;
}

.alert.warning {
    background: rgba(245, 158, 11, 0.1);
    border-color: rgba(245, 158, 11, 0.24);
    color: #92400e;
}

.alert ul {
    margin: 0;
    padding-left: 18px;
}

.empty-state {
    text-align: center;
    padding: 26px 12px;
    color: var(--muted);
}

.school-settings-panel {
    padding: 28px 22px;
}

.school-header-card {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 18px 20px;
    border: 1px solid var(--border);
    background: linear-gradient(135deg, rgba(79, 70, 229, 0.04), rgba(22, 163, 74, 0.04));
    border-radius: 20px;
    margin-bottom: 22px;
}

.school-logo-preview {
    width: 84px;
    height: 84px;
    border-radius: 22px;
    object-fit: cover;
    border: 1px solid var(--border);
    background: #fff;
}

.school-logo-placeholder {
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, var(--primary), #7c3aed);
    color: white;
    font-size: 2rem;
    font-weight: 800;
}

.school-header-card h3 {
    margin: 0 0 8px;
    font-size: 1.5rem;
}

.school-header-card p {
    margin: 0;
    color: var(--muted);
}

.school-form {
    gap: 20px;
}

.auth-wrapper {
    min-height: 80vh;
    display: grid;
    place-items: center;
}

.auth-card {
    width: min(100%, 480px);
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid var(--border);
    border-radius: 28px;
    box-shadow: var(--shadow);
    padding: 30px 28px;
}

.auth-header {
    text-align: center;
    margin-bottom: 22px;
}

.auth-header h2 {
    margin: 12px 0 6px;
}

.auth-header p {
    margin: 0;
    color: var(--muted);
}

.brand-large {
    width: 64px;
    height: 64px;
    margin: 0 auto;
    font-size: 1.7rem;
}

.auth-btn {
    width: 100%;
}

.auth-footer {
    margin-top: 16px;
    text-align: center;
    color: var(--muted);
}

.image-avatar {
    object-fit: cover;
}

.current-photo-box {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px;
    border: 1px solid var(--border);
    border-radius: 16px;
    background: #f8faff;
    margin-top: 8px;
}

.current-photo-box img {
    width: 72px;
    height: 72px;
    border-radius: 14px;
    object-fit: cover;
}

.checkbox-inline {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--muted);
    font-size: 0.9rem;
}

.form-hint {
    margin: -2px 0 12px;
    color: var(--muted);
    font-size: 0.88rem;
}

.assignment-class-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 14px;
}

.assignment-class-group {
    padding: 14px;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: rgba(79, 70, 229, 0.03);
}

.assignment-class-group h4 {
    margin: 0 0 10px;
    color: var(--primary-dark);
    font-size: 0.95rem;
}

.checkbox-list {
    display: grid;
    gap: 8px;
}

.checkbox-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border: 1px solid rgba(149, 165, 194, 0.2);
    border-radius: 11px;
    background: #fff;
    color: var(--text);
    cursor: pointer;
    transition: border-color 0.2s ease, background 0.2s ease, transform 0.2s ease;
}

.checkbox-item:hover {
    border-color: rgba(79, 70, 229, 0.35);
    background: rgba(79, 70, 229, 0.04);
    transform: translateY(-1px);
}

.checkbox-item input {
    width: 17px;
    height: 17px;
    accent-color: var(--primary);
}

.reveal {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 0.55s ease, transform 0.55s ease;
}

.reveal.visible {
    opacity: 1;
    transform: translateY(0);
}

.delete-form {
    display: inline-flex;
}

.confirmation-modal {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2000;
    visibility: hidden;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.26s ease, visibility 0.26s ease;
}

.confirmation-modal.is-open {
    visibility: visible;
    pointer-events: auto;
    opacity: 1;
}

.confirmation-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.55);
    backdrop-filter: blur(4px);
    opacity: 0;
    transition: opacity 0.26s ease;
}

.confirmation-modal.is-open .confirmation-modal-backdrop {
    opacity: 1;
}

.confirmation-modal-card {
    position: relative;
    width: min(92vw, 420px);
    background: var(--card-strong);
    border: 1px solid rgba(239, 68, 68, 0.18);
    border-radius: 22px;
    box-shadow: 0 24px 80px rgba(15, 23, 42, 0.24);
    padding: 30px 26px 24px;
    text-align: center;
    transform: translateY(22px) scale(0.97);
    opacity: 0;
    transition: transform 0.26s ease, opacity 0.26s ease;
}

.confirmation-modal.is-open .confirmation-modal-card {
    transform: translateY(0) scale(1);
    opacity: 1;
}

.confirmation-modal-icon {
    width: 58px;
    height: 58px;
    margin: 0 auto 16px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: rgba(239, 68, 68, 0.12);
    color: #b42318;
    font-size: 1.8rem;
    font-weight: 800;
}

.confirmation-modal-card h3 {
    margin: 0 0 10px;
    font-size: 1.35rem;
    color: var(--text);
}

.confirmation-modal-card p {
    margin: 0 0 22px;
    color: var(--muted);
    line-height: 1.5;
}

.confirmation-modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    flex-wrap: wrap;
}

.confirmation-modal-actions .btn {
    min-width: 118px;
}

.details-modal {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1990;
    visibility: hidden;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.26s ease, visibility 0.26s ease;
}

.details-modal.is-open {
    visibility: visible;
    pointer-events: auto;
    opacity: 1;
}

.details-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.55);
    backdrop-filter: blur(4px);
}

.details-modal-card {
    position: relative;
    width: min(94vw, 760px);
    max-height: 88vh;
    overflow-y: auto;
    background: var(--card-strong);
    border: 1px solid rgba(15, 23, 42, 0.12);
    border-radius: 22px;
    box-shadow: 0 24px 80px rgba(15, 23, 42, 0.24);
    padding: 26px;
    transform: translateY(22px) scale(0.97);
    transition: transform 0.26s ease;
}

.details-modal.is-open .details-modal-card {
    transform: translateY(0) scale(1);
}

.details-modal-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 22px;
}

.details-modal-header h3 {
    margin: 4px 0 0;
}

.details-summary-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.details-summary-grid > div,
.details-installment {
    padding: 13px;
    border: 1px solid rgba(15, 23, 42, 0.1);
    border-radius: 10px;
    background: rgba(248, 250, 252, 0.8);
}

.details-summary-grid span,
.details-installment span {
    display: block;
    color: var(--muted);
    font-size: 0.78rem;
}

.details-summary-grid strong {
    display: block;
    margin-top: 5px;
}

.details-installments-list {
    margin-top: 24px;
}

.details-installments-list h4 {
    margin: 0 0 12px;
}

.details-installment {
    display: grid;
    grid-template-columns: 1.2fr 1fr 0.8fr 1.8fr;
    gap: 12px;
    align-items: center;
    margin-top: 10px;
}

@media (max-width: 720px) {
    .details-summary-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .details-installment {
        grid-template-columns: 1fr 1fr;
    }
}

.receipt-toolbar {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    margin-bottom: 18px;
}

.receipt-page {
    width: min(100%, 148mm);
    min-height: 210mm;
    margin: 0 auto;
    padding: 18mm 14mm;
    background: #fff;
    color: #182230;
    box-shadow: 0 18px 50px rgba(15, 23, 42, 0.14);
}

.receipt-header,
.receipt-footer {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
}

.receipt-school-brand {
    display: flex;
    align-items: center;
    gap: 12px;
}

.receipt-school-brand img,
.receipt-logo-placeholder {
    width: 54px;
    height: 54px;
    flex: 0 0 54px;
    object-fit: contain;
}

.receipt-logo-placeholder {
    display: grid;
    place-items: center;
    border-radius: 12px;
    background: var(--primary);
    color: #fff;
    font-size: 1.5rem;
    font-weight: 800;
}

.receipt-school-brand h1 {
    margin: 0;
    font-size: 1.05rem;
}

.receipt-school-brand p {
    margin: 4px 0 0;
    color: #5d6878;
    font-size: 0.76rem;
}

.receipt-title-block {
    text-align: right;
}

.receipt-title-block span {
    display: block;
    color: var(--primary-dark);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.08em;
}

.receipt-title-block strong {
    display: block;
    margin-top: 6px;
    font-size: 0.86rem;
}

.receipt-meta,
.receipt-details {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-top: 24px;
    padding: 14px 0;
    border-top: 1px solid #dbe1ea;
    border-bottom: 1px solid #dbe1ea;
}

.receipt-details {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: 14px;
    border-top: 0;
}

.receipt-meta span,
.receipt-details span,
.receipt-amount-box span,
.receipt-note span {
    display: block;
    color: #687486;
    font-size: 0.7rem;
}

.receipt-meta strong,
.receipt-details strong {
    display: block;
    margin-top: 4px;
    font-size: 0.82rem;
}

.receipt-amount-box {
    margin-top: 20px;
    padding: 16px;
    border: 1px solid rgba(79, 70, 229, 0.25);
    border-radius: 10px;
    background: rgba(79, 70, 229, 0.06);
    text-align: center;
}

.receipt-amount-box strong {
    display: block;
    margin: 5px 0;
    color: var(--primary-dark);
    font-size: 1.35rem;
}

.receipt-amount-box small {
    color: #687486;
    font-size: 0.7rem;
}

.receipt-amount-secondary {
    margin-top: 12px;
}

.receipt-note {
    margin-top: 18px;
    padding-top: 12px;
    border-top: 1px solid #dbe1ea;
}

.receipt-note p {
    margin: 5px 0 0;
    font-size: 0.78rem;
}

.receipt-footer {
    align-items: flex-end;
    margin-top: 28px;
    padding-top: 14px;
    border-top: 1px solid #dbe1ea;
}

.receipt-footer p {
    margin: 0;
    font-size: 0.8rem;
    font-weight: 700;
}

.receipt-footer small {
    display: block;
    margin-top: 5px;
    color: #687486;
    font-size: 0.68rem;
}

.receipt-footer img {
    width: 82px;
    height: 82px;
}

@media print {
    @page {
        size: A5 portrait;
        margin: 0;
    }

    body {
        background: #fff;
    }

    body * {
        visibility: hidden;
    }

    .receipt-page,
    .receipt-page * {
        visibility: visible;
    }

    .receipt-page {
        position: absolute;
        inset: 0;
        width: 148mm;
        min-height: 210mm;
        margin: 0;
        padding: 14mm;
        box-shadow: none;
    }

    .no-print {
        display: none !important;
    }
}

.print-school-header {
    display: none;
}

.print-student-filters {
    display: none;
}

@media print {
    @page {
        margin: 4mm 9mm 9mm;
    }

    @page student-list-print {
        size: A4 portrait;
        margin: 4mm 9mm 9mm;
    }

    body {
        page: student-list-print;
        margin: 0 !important;
        background: #fff !important;
        color: #111827 !important;
    }

    .sidebar-toggle {
        display: none !important;
    }

    .sidebar,
    .topbar,
    .page-header,
    .header-actions,
    .panel-header .search-field,
    .panel-header form,
    .btn,
    .action-group,
    .delete-form,
    .nav-menu,
    .sidebar-footer,
    .main-wrapper,
    .print-student-list .table-controls {
        display: none !important;
    }

    .print-school-header,
    .print-school-header *,
    .print-student-filters,
    .print-student-filters *,
    .print-student-list,
    .print-student-list * {
        visibility: visible !important;
    }

    .print-student-list {
        opacity: 1 !important;
        transform: none !important;
    }

    .print-student-list tbody tr.student-row {
        display: table-row !important;
    }

    .print-school-header {
        display: flex !important;
        align-items: flex-start;
        gap: 12px;
        width: 100%;
        box-sizing: border-box;
        padding: 0 0 12px;
        border-bottom: 1px solid #d1d5db;
        margin: 0 auto 12px;
    }

    .print-school-header img {
        width: 52px;
        height: 52px;
        object-fit: contain;
    }

    .print-school-header h3 {
        margin: 0;
        font-size: 16px;
        color: #111827;
    }

    .print-school-header p {
        margin: 3px 0 0;
        color: #374151;
        font-size: 10px;
    }

    .print-class-name {
        margin-top: 2px !important;
        font-weight: 600;
        color: #111827 !important;
    }

    .brand-mark-small {
        width: 52px;
        height: 52px;
        display: grid;
        place-items: center;
        border-radius: 8px;
        background: linear-gradient(135deg, #4f46e5, #7c3aed);
        color: #fff;
        font-weight: 700;
        font-size: 1.2rem;
    }

    .brand-mark-small.brand-print-logo {
        object-fit: contain;
        padding: 2px;
        border: 1px solid #dce5e5;
        background: #fff;
    }

    .app-shell {
        display: block !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .main-content {
        display: block !important;
        margin: 0 !important;
        padding: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    .main-content > :not(.print-student-list):not(.report-print-area):not(.platform-ranking-print-area) {
        display: none !important;
    }

    .print-student-list {
        display: block !important;
        position: static !important;
        margin: 0 !important;
        width: 100% !important;
        max-width: none !important;
        box-sizing: border-box !important;
    }

    .print-school-header {
        margin: 0 0 8px !important;
    }

    .print-student-filters {
        display: grid !important;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 8px;
        margin: 0 0 8px !important;
        padding: 6px 0;
        border-top: 1px solid #d1d5db;
        border-bottom: 1px solid #d1d5db;
        font-size: 9px;
    }

    .print-student-filters strong,
    .print-student-filters span {
        display: block;
    }

    .print-student-filters strong {
        margin-bottom: 2px;
        color: #374151;
    }

    .panel,
    .print-student-list {
        box-shadow: none !important;
        border: 0 !important;
        background: #fff !important;
        padding: 0 !important;
        margin: 0 !important;
        width: 100% !important;
    }

    .print-student-list .panel-header {
        display: block !important;
        margin: 0 0 8px !important;
        text-align: center;
    }

    .print-student-list .panel-header h3 {
        margin: 0;
        font-size: 14px;
        text-align: center;
        text-decoration: underline;
    }

    .table-wrap {
        overflow: visible !important;
        width: 100% !important;
    }

    .print-student-list .student-table {
        width: 100% !important;
        min-width: 0 !important;
        table-layout: auto;
        font-size: 9px !important;
        border-collapse: collapse !important;
        border: 1px solid #111 !important;
    }

    .print-student-list .student-table th,
    .print-student-list .student-table td {
        padding: 4px 5px !important;
        border: 1px solid #111 !important;
        background: #fff !important;
        color: #111 !important;
        print-color-adjust: exact;
        -webkit-print-color-adjust: exact;
    }

    .print-student-list .student-table th:last-child,
    .print-student-list .student-table td:last-child {
        display: none !important;
    }

    .print-student-list .student-table thead th {
        background: #f3f4f6 !important;
        font-weight: 700;
    }

    .print-class-name {
        margin-top: 2px !important;
        font-weight: 600;
        color: #111827 !important;
    }

    .print-student-list .student-table tbody tr {
        page-break-inside: avoid;
        break-inside: avoid;
    }
}

@media (max-width: 980px) {
    .app-shell {
        grid-template-columns: 1fr;
        padding: 18px;
    }

    .sidebar {
        padding-bottom: 16px;
    }

    .stats-grid {
        grid-template-columns: repeat(2, minmax(170px, 1fr));
    }

    .dashboard-kpi-grid {
        grid-template-columns: repeat(2, minmax(170px, 1fr));
    }

    .dashboard-hero {
        align-items: flex-start;
        flex-direction: column;
    }

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

    .dashboard-finance-grid {
        grid-template-columns: 1fr;
    }

    .dashboard-pie-layout {
        grid-template-columns: 1fr;
    }
}

.schedule-class-filter {
    display: flex;
    align-items: flex-end;
    gap: 14px;
    margin-bottom: 24px;
}

.schedule-class-filter .field-group {
    flex: 1;
}

.schedule-period-filter {
    display: flex;
    align-items: flex-end;
    gap: 10px;
    margin: 14px 0 4px;
}

.schedule-period-filter .field-group {
    flex: 0 1 340px;
    width: 340px;
    max-width: 100%;
}

.schedule-period-filter .field-group select {
    padding: 9px 12px;
}

.schedule-period-filter .btn {
    white-space: nowrap;
}

.schedule-selected-class {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin: 4px 0 20px;
    padding: 14px 16px;
    border: 1px solid rgba(79, 70, 229, 0.14);
    border-radius: 14px;
    background: rgba(79, 70, 229, 0.04);
}

.schedule-selected-class > div {
    display: grid;
    gap: 3px;
    margin-right: auto;
}

.schedule-selected-label {
    color: var(--muted);
    font-size: 0.76rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.schedule-school-year-context {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: -8px 0 20px;
    padding: 10px 14px;
    border-left: 3px solid var(--success);
    background: rgba(16, 185, 129, 0.06);
    color: var(--text);
    font-size: 0.86rem;
}

.schedule-school-year-context span {
    color: var(--muted);
}

.schedule-school-year-filter {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 20px;
}

.schedule-school-year-filter label {
    color: var(--muted);
    font-size: 0.85rem;
    font-weight: 600;
}

.schedule-school-year-filter select {
    width: min(100%, 260px);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 9px 12px;
    background: #f8faff;
    color: var(--text);
}

.schedule-period-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(220px, 1fr));
    gap: 16px;
    padding: 18px;
    margin-bottom: 20px;
    border: 1px solid rgba(79, 70, 229, 0.14);
    border-radius: 16px;
    background: rgba(79, 70, 229, 0.04);
}

.schedule-course-list {
    display: grid;
    gap: 10px;
}

.schedule-course-row {
    display: grid;
    grid-template-columns: minmax(180px, 220px) 1fr;
    gap: 12px;
    align-items: start;
    padding: 12px 14px;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: #fff;
}

.schedule-course-name {
    display: grid;
    gap: 6px;
    min-width: 0;
}

.schedule-course-name strong {
    color: var(--text);
    line-height: 1.3;
}

.schedule-course-name small {
    color: var(--muted);
    font-size: 0.76rem;
    line-height: 1.35;
}

.schedule-course-slots {
    display: grid;
    gap: 8px;
}

.schedule-slot {
    display: grid;
    grid-template-columns: minmax(120px, 1fr) minmax(100px, 0.7fr) auto minmax(100px, 0.7fr) auto;
    gap: 8px;
    align-items: center;
    padding: 8px 10px;
    border: 1px solid #e7eaf3;
    border-radius: 10px;
    background: #f8faff;
}

.schedule-course-row input,
.schedule-course-row select {
    width: 100%;
    min-width: 0;
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 8px 9px;
    background: #fff;
    color: var(--text);
    font-size: 0.88rem;
}

.schedule-time-separator {
    color: var(--muted);
    font-size: 0.82rem;
    text-align: center;
}

.remove-schedule-slot {
    min-width: 32px;
    padding: 6px 8px;
    white-space: nowrap;
    justify-self: end;
}

.add-schedule-slot {
    justify-self: start;
    margin-top: 2px;
}

.schedule-step-heading {
    display: flex;
    align-items: center;
    gap: 13px;
    margin: 4px 0 16px;
}

.schedule-step-heading > div,
.schedule-courses-heading > div {
    display: grid;
    gap: 3px;
}

.schedule-step-heading strong,
.schedule-courses-heading strong {
    color: var(--text);
    font-size: 1rem;
}

.schedule-step-heading small,
.schedule-courses-heading small {
    color: var(--muted);
    font-size: 0.82rem;
}

.schedule-courses-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin: 24px 0 12px;
}

.schedule-course-count {
    padding: 7px 11px;
    border-radius: 999px;
    background: #f1f5f9;
    color: var(--muted);
    font-size: 0.78rem;
    font-weight: 700;
}

.schedule-view-toggle {
    display: flex;
    gap: 10px;
    margin: 18px 0 20px;
    flex-wrap: wrap;
}

.schedule-view-toggle .btn {
    min-width: 120px;
}

.calendar-table-wrapper {
    overflow-x: auto;
    margin-top: 18px;
}

.schedule-calendar-table {
    width: 100%;
    min-width: 900px;
    border-collapse: collapse;
    border: 1px solid rgba(148, 163, 184, 0.5);
    background: #fff;
    table-layout: fixed;
}

.schedule-calendar-table th,
.schedule-calendar-table td {
    padding: 10px 8px;
    border: 1px solid rgba(148, 163, 184, 0.5);
    text-align: center;
    vertical-align: top;
    font-size: 0.8rem;
}

.schedule-calendar-table thead th {
    background: rgba(79, 70, 229, 0.06);
    color: var(--muted);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.schedule-calendar-hour {
    background: rgba(148, 163, 184, 0.08);
    color: var(--muted);
    font-weight: 700;
    width: 96px;
}

.schedule-calendar-cell {
    min-height: 52px;
    background: rgba(255, 255, 255, 0.7);
}

.calendar-event {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 34px;
    padding: 6px 4px;
    border-radius: 8px;
    background: rgba(99, 102, 241, 0.12);
    color: var(--primary-dark);
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1.2;
    word-break: break-word;
}

.is-disabled {
    opacity: 0.55;
    pointer-events: none;
}

@media (max-width: 620px) {
    .page-header,
    .dashboard-hero,
    .panel-header,
    .form-actions {
        flex-direction: column;
        align-items: flex-start;
    }

    .schedule-class-filter {
        display: flex;
        align-items: flex-end;
        gap: 14px;
        margin-bottom: 24px;
    }

    .schedule-class-filter .field-group {
        flex: 1;
    }

    .schedule-period-filter {
        align-items: flex-end;
    }

    .schedule-period-filter .field-group {
        width: min(100%, 340px);
    }

    .schedule-selected-class {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        gap: 10px;
        margin: 4px 0 20px;
        padding: 14px 16px;
        border: 1px solid rgba(79, 70, 229, 0.14);
        border-radius: 14px;
        background: rgba(79, 70, 229, 0.04);
    }

    .schedule-selected-class > div {
        display: grid;
        gap: 3px;
        margin-right: auto;
    }

    .schedule-selected-label {
        color: var(--muted);
        font-size: 0.76rem;
        text-transform: uppercase;
        letter-spacing: 0.06em;
    }

    .schedule-period-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(220px, 1fr));
        gap: 16px;
        padding: 18px;
        margin-bottom: 20px;
        border: 1px solid rgba(79, 70, 229, 0.14);
        border-radius: 16px;
        background: rgba(79, 70, 229, 0.04);
    }

    .schedule-course-list {
        display: grid;
        gap: 10px;
    }

    .schedule-course-row {
        display: grid;
        grid-template-columns: minmax(180px, 1.4fr) minmax(120px, 0.8fr) minmax(110px, 0.6fr) auto minmax(110px, 0.6fr);
        align-items: center;
        gap: 12px;
        padding: 13px 14px;
        border: 1px solid var(--border);
        border-radius: 14px;
        background: #fff;
    }

    .schedule-course-name {
        display: grid;
        gap: 4px;
    }

    .schedule-course-name strong {
        color: var(--text);
    }

    .schedule-course-name small {
        color: var(--muted);
        font-size: 0.78rem;
    }

    .schedule-course-row input,
    .schedule-course-row select {
        width: 100%;
        min-width: 0;
        border: 1px solid var(--border);
        border-radius: 10px;
        padding: 10px;
        background: #f8faff;
        color: var(--text);
    }

    .schedule-time-separator {
        color: var(--muted);
        font-size: 0.85rem;
        text-align: center;
    }

    .is-disabled {
        opacity: 0.55;
        pointer-events: none;
    }

    @media (max-width: 620px) {
        .schedule-class-filter {
            flex-direction: column;
            align-items: stretch;
        }

        .schedule-period-filter {
            flex-direction: column;
            align-items: stretch;
        }

        .schedule-period-filter .field-group {
            width: 100%;
        }

        .schedule-period-grid,
        .schedule-course-row {
            grid-template-columns: 1fr 1fr;
        }

        .schedule-course-name {
            grid-column: 1 / -1;
        }

        .schedule-time-separator {
            display: none;
        }
    }

    .stats-grid,
    .dashboard-kpi-grid,
    .form-grid {
        grid-template-columns: 1fr;
    }

    .dashboard-hero {
        padding: 22px 20px;
    }

    .dashboard-hero-actions .btn {
        width: 100%;
    }

    .search-field input {
        min-width: 100%;
    }

    th, td {
        padding: 12px 8px;
    }
}

@keyframes floatIn {
    from {
        opacity: 0;
        transform: translateY(18px);
    }

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

@media (max-width: 1180px) {
    .dashboard-grid {
        grid-template-columns: 1fr;
    }

    .dashboard-kpi-grid,
    .stats-grid,
    .dashboard-finance-grid {
        grid-template-columns: repeat(2, minmax(180px, 1fr));
    }
}

@media (max-width: 980px) {
    .app-shell {
        grid-template-columns: 1fr;
        padding: 18px;
    }

    .app-shell > .main-content {
        grid-row: 1;
    }

    .sidebar {
        position: fixed;
        top: 12px;
        left: 12px;
        bottom: 12px;
        z-index: 1000;
        width: min(88vw, 320px);
        transform: translateX(-120%);
        opacity: 0;
        pointer-events: none;
        transition: transform 0.25s ease, opacity 0.25s ease;
    }

    body.sidebar-open .sidebar {
        transform: translateX(0);
        opacity: 1;
        pointer-events: auto;
    }

    body:not(.sidebar-open) .sidebar.reveal.visible {
        transform: translateX(-120%);
        opacity: 0;
        pointer-events: none;
    }

    body.sidebar-open .sidebar.reveal.visible {
        transform: translateX(0);
        opacity: 1;
        pointer-events: auto;
    }

    body.sidebar-open::before {
        content: "";
        position: fixed;
        inset: 0;
        background: rgba(15, 23, 42, 0.45);
        z-index: 900;
    }

    .sidebar-toggle {
        display: inline-flex;
        position: fixed;
        top: 16px;
        left: 16px;
        z-index: 1001;
    }

    .dashboard-hero {
        flex-direction: column;
        align-items: flex-start;
    }

    .dashboard-pie-layout {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 720px) {
    .app-shell {
        padding: 12px;
        gap: 12px;
    }

    .page-header,
    .panel-header,
    .dashboard-hero,
    .header-actions,
    .form-actions,
    .schedule-view-toggle,
    .schedule-courses-heading,
    .schedule-class-filter,
    .schedule-period-filter,
    .schedule-school-year-context,
    .schedule-selected-class {
        flex-direction: column;
        align-items: stretch;
    }

    .page-header h2,
    .dashboard-hero h2 {
        font-size: clamp(1.4rem, 8vw, 2rem);
    }

    .stats-grid,
    .dashboard-kpi-grid,
    .dashboard-finance-grid,
    .form-grid,
    .schedule-period-grid,
    .schedule-course-row {
        grid-template-columns: 1fr;
    }

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

    .dashboard-hero {
        padding: 22px 18px;
    }

    .dashboard-hero-actions .btn {
        width: 100%;
    }

    .panel,
    .form-panel {
        padding: 16px 14px;
    }

    .search-field input,
    .field-group input,
    .field-group select,
    .field-group textarea,
    .field-select,
    .search-field {
        width: 100%;
        min-width: 0;
    }

    .table-controls,
    .table-controls .field-select,
    .search-field {
        flex-wrap: wrap;
    }

    .table-wrap {
        margin: 0 -2px;
    }

    .schedule-class-filter .field-group,
    .schedule-period-filter .field-group,
    .schedule-period-filter {
        width: 100%;
    }

    .schedule-course-row {
        display: grid;
        gap: 12px;
        padding: 14px;
    }

    .schedule-course-name {
        grid-column: 1 / -1;
    }

    .schedule-time-separator {
        display: none;
    }

    .btn,
    .btn-primary,
    .btn-secondary,
    .btn-danger,
    .btn-success {
        width: 100%;
    }
}

.sidebar-toggle:focus-visible {
    outline: 3px solid rgba(79, 70, 229, 0.3);
    outline-offset: 2px;
}

.platform-heading,
.platform-section-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
}

.platform-heading {
    margin: 8px 0 24px;
}

.platform-heading h2,
.platform-section-heading h3 {
    margin: 4px 0;
}

.platform-heading p {
    margin: 8px 0 0;
    color: var(--muted);
}

.platform-admin-label,
.platform-section-heading > span {
    color: var(--muted);
    font-size: 0.88rem;
}

.platform-metrics {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 30px;
}

.platform-metrics article {
    display: grid;
    gap: 10px;
    min-width: 0;
    padding: 18px;
    border: 1px solid var(--border);
    border-top: 3px solid #258b78;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.8);
}

.platform-metrics article:nth-child(even) {
    border-top-color: #d28a38;
}

.platform-metrics article span {
    color: var(--muted);
    font-size: 0.82rem;
}

.platform-metrics article strong {
    font-size: 1.55rem;
    overflow-wrap: anywhere;
}

.platform-content-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) minmax(280px, 0.75fr);
    align-items: start;
    gap: 28px;
}

.platform-section-heading {
    margin-bottom: 16px;
}

.platform-schools-section {
    min-width: 0;
}

.platform-schools-section .table-wrap {
    margin: 0;
    overflow-x: auto;
    border: 1px solid rgba(113, 138, 127, 0.24);
    border-radius: 8px;
    background: #fff;
    -webkit-overflow-scrolling: touch;
}

.platform-table {
    min-width: 760px;
    font-size: 0.86rem;
}

.platform-table th,
.platform-table td {
    padding: 14px 16px;
    border-bottom: 1px solid rgba(113, 138, 127, 0.16);
    text-align: left;
    vertical-align: middle;
}

.platform-table thead th {
    background: #eef4f1;
    color: #52665f;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    white-space: nowrap;
}

.platform-table th:first-child,
.platform-table td:first-child {
    min-width: 190px;
}

.platform-table th:nth-child(2),
.platform-table td:nth-child(2) {
    min-width: 220px;
}

.platform-table tbody tr {
    transition: background-color 0.16s ease;
}

.platform-table tbody tr:hover {
    background: #f6faf8;
}

.platform-table tbody tr:last-child td {
    border-bottom: 0;
}

.platform-table td:first-child strong,
.platform-table td:first-child small,
.platform-table td:nth-child(2) strong,
.platform-table td:nth-child(2) small {
    display: block;
}

.platform-table td small {
    margin-top: 4px;
    color: var(--muted);
    font-size: 0.78rem;
    overflow-wrap: anywhere;
}

.platform-table .platform-number-cell {
    text-align: right;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.platform-table thead .platform-number-cell {
    text-align: right;
}

.platform-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 64px;
    padding: 5px 9px;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 700;
}

.platform-status.is-active {
    background: #e8f5ed;
    color: #247447;
}

.platform-status.is-inactive {
    background: #f2eeee;
    color: #775858;
}

.platform-create-section {
    padding: 20px;
    border: 1px solid var(--border);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.78);
}

.platform-create-section .btn {
    align-self: flex-start;
}

.platform-empty-state {
    padding: 20px 0;
    color: var(--muted);
}

.platform-ranking-section {
    margin-top: 24px;
}

.platform-ranking-filters {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    align-items: end;
    gap: 14px;
    margin-bottom: 30px;
    padding: 18px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.82);
}

.platform-ranking-filters .btn {
    min-height: 44px;
}

.platform-ranking-import-tools {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 14px;
    padding: 16px;
    border: 1px solid var(--border);
    border-radius: 8px;
    margin: -12px 0 24px;
    background: rgba(255, 255, 255, 0.82);
}

.platform-ranking-import-form {
    display: flex;
    align-items: end;
    flex-wrap: wrap;
    gap: 10px;
}

.platform-ranking-file-label {
    display: grid;
    gap: 5px;
    color: var(--muted);
    font-size: 0.78rem;
    font-weight: 600;
}

.platform-ranking-file-label input {
    max-width: min(100%, 340px);
    font-size: 0.82rem;
}

.platform-ranking-import-form .btn {
    min-height: 44px;
}

.platform-student-import {
    display: grid;
    gap: 20px;
}

.platform-student-import > .student-form {
    max-width: 520px;
}

.platform-student-import-school {
    padding: 16px 18px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.72);
}

.platform-student-import-school h3,
.platform-student-import-school p {
    margin: 0;
}

.platform-student-import-school p {
    margin-top: 5px;
    color: var(--muted);
}

.platform-student-import-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 14px;
    padding-top: 4px;
}

.platform-student-import-actions .import-form {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

.platform-ranking-import-tools .btn:disabled {
    cursor: not-allowed;
    opacity: 0.55;
}

@media (max-width: 720px) {
    .platform-ranking-import-tools,
    .platform-ranking-import-form,
    .platform-student-import-actions,
    .platform-student-import-actions .import-form {
        align-items: stretch;
        flex-direction: column;
    }

    .platform-ranking-import-form .btn,
    .platform-ranking-import-tools > .btn,
    .platform-student-import-actions > .btn,
    .platform-student-import-actions .import-form .btn {
        width: 100%;
    }

    .platform-ranking-file-label input {
        max-width: 100%;
    }
}

.platform-ranking-heading {
    align-items: end;
}

.platform-ranking-table {
    min-width: 620px;
}

.platform-ranking-table th[scope="row"] {
    font-weight: 600;
}

.platform-ranking-note {
    margin: 12px 0 0;
    color: var(--muted);
    font-size: 0.82rem;
}

.platform-access-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
    gap: 18px;
}

.platform-access-section {
    min-width: 0;
    padding: 20px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.82);
}

.platform-access-section .btn {
    align-self: flex-start;
}

.platform-access-list {
    min-width: 0;
    margin-top: 30px;
}

.platform-access-list .table-wrap {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.platform-admin-table {
    min-width: 700px;
}

.platform-admin-table th,
.platform-admin-table td {
    padding: 12px 14px;
    border-bottom: 1px solid rgba(113, 138, 127, 0.16);
    text-align: left;
}

.platform-admin-table thead th {
    background: #eef4f1;
    color: #52665f;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
}

.platform-admin-table tbody tr:last-child td {
    border-bottom: 0;
}

.platform-delete-form {
    margin: 0;
}

.platform-delete-form .btn {
    padding: 7px 10px;
    font-size: 0.78rem;
}

.platform-owner-badge {
    display: inline-flex;
    padding: 5px 9px;
    border-radius: 999px;
    background: #e8f5ed;
    color: #247447;
    font-size: 0.75rem;
    font-weight: 700;
}

.platform-owner-notice {
    margin: 0;
    padding: 14px 16px;
    border-left: 3px solid #d28a38;
    background: rgba(210, 138, 56, 0.08);
    color: var(--text);
}

@media (max-width: 1080px) {
    .platform-content-grid {
        grid-template-columns: 1fr;
    }

    .platform-create-section {
        max-width: 680px;
    }
}

@media (max-width: 720px) {
    .platform-heading {
        align-items: flex-start;
        flex-direction: column;
    }

    .platform-metrics {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .platform-create-section {
        padding: 16px;
    }

    .platform-access-grid {
        grid-template-columns: 1fr;
    }

    .platform-access-section {
        padding: 16px;
    }

    .platform-schools-section .table-wrap {
        overflow: visible;
        border: 0;
        background: transparent;
    }

    .platform-table {
        display: block;
        min-width: 0;
    }

    .platform-table thead {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        clip-path: inset(50%);
    }

    .platform-table tbody {
        display: grid;
        gap: 10px;
    }

    .platform-table tbody tr {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        border: 1px solid rgba(113, 138, 127, 0.24);
        border-radius: 8px;
        background: #fff;
        overflow: hidden;
    }

    .platform-table th:first-child,
    .platform-table td:first-child,
    .platform-table th:nth-child(2),
    .platform-table td:nth-child(2) {
        min-width: 0;
    }

    .platform-table td {
        display: flex;
        min-width: 0;
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
        padding: 11px 13px;
        border-bottom: 1px solid rgba(113, 138, 127, 0.14);
        text-align: left;
        white-space: normal;
        overflow-wrap: anywhere;
    }

    .platform-table td::before {
        content: attr(data-label);
        color: #697b74;
        font-size: 0.68rem;
        font-weight: 700;
        text-transform: uppercase;
    }

    .platform-table td:first-child,
    .platform-table td:nth-child(2) {
        grid-column: 1 / -1;
    }

    .platform-table td:first-child strong {
        font-size: 0.98rem;
    }

    .platform-table .platform-number-cell {
        text-align: left;
    }

    .platform-table td:last-child {
        border-bottom: 0;
    }
}

.platform-ranking-print-header,
.platform-ranking-print-details,
.platform-ranking-print-only {
    display: none;
}

.super-admin-dashboard {
    --platform-ink: #172b3a;
    --platform-muted: #71818d;
    --platform-line: #e5ebef;
    --platform-accent: #167d78;
    color: var(--platform-ink);
}

.super-admin-dashboard .platform-heading {
    position: relative;
    overflow: hidden;
    min-height: 176px;
    margin: 0 0 24px;
    padding: 30px 34px;
    border: 1px solid rgba(35, 111, 112, 0.12);
    border-radius: 24px;
    background:
        radial-gradient(ellipse at 85% 5%, rgba(153, 224, 202, 0.48), transparent 38%),
        linear-gradient(118deg, #f0f8f7 0%, #f9fbfa 52%, #edf5f4 100%);
}

.super-admin-dashboard .platform-heading::after {
    position: absolute;
    right: 31%;
    bottom: -112px;
    width: 230px;
    height: 230px;
    border: 1px solid rgba(22, 125, 120, 0.1);
    border-radius: 50%;
    content: "";
    pointer-events: none;
}

.super-admin-dashboard .platform-heading h2 {
    margin: 8px 0 0;
    color: #17313d;
    font-size: clamp(1.8rem, 3vw, 2.35rem);
    letter-spacing: -0.045em;
}

.super-admin-dashboard .platform-heading p {
    margin-top: 9px;
    color: #657982;
}

.super-admin-dashboard .platform-heading .panel-kicker,
.super-admin-dashboard .platform-section-heading .panel-kicker {
    color: var(--platform-accent);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.13em;
    text-transform: uppercase;
}

.platform-heading-actions {
    z-index: 1;
    display: grid;
    justify-items: end;
    gap: 16px;
}

.super-admin-dashboard .platform-admin-label {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: #667982;
    font-size: 0.78rem;
}

.super-admin-dashboard .platform-admin-label strong {
    display: block;
    margin-top: 2px;
    color: #263e49;
    font-size: 0.9rem;
}

.platform-admin-avatar {
    display: grid;
    width: 38px;
    height: 38px;
    place-items: center;
    border: 1px solid rgba(22, 125, 120, 0.12);
    border-radius: 50%;
    background: #fff;
    color: var(--platform-accent);
    font-size: 0.9rem;
    font-weight: 800;
}

.platform-create-link {
    display: inline-flex;
    min-height: 43px;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0 17px;
    border: 1px solid #126b68;
    border-radius: 12px;
    background: #167d78;
    box-shadow: 0 7px 16px rgba(22, 125, 120, 0.16);
    color: #fff;
    font-size: 0.84rem;
    font-weight: 750;
    text-decoration: none;
    transition: background 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.platform-create-link:hover {
    transform: translateY(-1px);
    background: #116b67;
    box-shadow: 0 10px 20px rgba(22, 125, 120, 0.2);
}

.platform-create-link span {
    font-size: 1.2rem;
    line-height: 1;
}

.super-admin-dashboard .platform-metrics {
    gap: 15px;
    margin-bottom: 24px;
}

.platform-dashboard-section-heading {
    margin: 0 0 12px;
}

.platform-dashboard-section-heading .panel-kicker {
    color: var(--platform-accent);
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.platform-dashboard-section-heading h3 {
    margin: 4px 0 0;
    color: #203744;
    font-size: 1.08rem;
    letter-spacing: -0.02em;
}

.super-admin-dashboard .platform-administrative-metrics {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-bottom: 24px;
}

.super-admin-dashboard .platform-metrics article {
    position: relative;
    grid-template-columns: 1fr auto;
    gap: 4px 12px;
    min-height: 148px;
    padding: 20px;
    border: 1px solid var(--platform-line);
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 5px 18px rgba(31, 54, 67, 0.035);
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.super-admin-dashboard .platform-metrics article:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 24px rgba(31, 54, 67, 0.08);
}

.super-admin-dashboard .platform-metrics article > span:not(.platform-metric-icon) {
    align-self: center;
    color: #62747e;
    font-size: 0.82rem;
    font-weight: 650;
}

.platform-metric-icon {
    display: grid;
    width: 42px;
    height: 42px;
    grid-column: 2;
    grid-row: 1 / span 2;
    place-items: center;
    border-radius: 13px;
    background: #eaf5f2;
    color: #197c72;
    font-size: 1.3rem;
    font-weight: 700;
}

.platform-metric-icon.is-students {
    background: #eef2ff;
    color: #5969c2;
}

.platform-metric-icon.is-teachers {
    background: #fff4e8;
    color: #bd762b;
}

.platform-metric-icon.is-classes {
    background: #f1edfb;
    color: #8063b4;
}

.super-admin-dashboard .platform-metrics article strong {
    grid-column: 1;
    margin-top: 9px;
    color: #203744;
    font-size: 1.9rem;
    letter-spacing: -0.045em;
    line-height: 1.1;
}

.super-admin-dashboard .platform-metrics article small {
    grid-column: 1 / -1;
    margin-top: 5px;
    color: #91a0a8;
    font-size: 0.75rem;
}

.super-admin-dashboard .platform-schools-section {
    padding: 24px;
    border: 1px solid var(--platform-line);
    border-radius: 20px;
    background: #fff;
    box-shadow: 0 6px 22px rgba(31, 54, 67, 0.04);
}



.super-admin-dashboard .platform-section-heading {
    align-items: center;
    margin: 0 0 20px;
}

.super-admin-dashboard .platform-section-heading h3 {
    margin: 5px 0 0;
    color: #203744;
    font-size: 1.25rem;
    letter-spacing: -0.025em;
}

.super-admin-dashboard .platform-presence-count {
    display: inline-flex;
    min-height: 48px;
    align-items: center;
    gap: 9px;
    padding: 7px 14px;
    border: 1px solid #d8eee0;
    border-radius: 14px;
    background: #eff9f2;
    color: #28784a;
    font-size: 0.8rem;
    white-space: nowrap;
}

.super-admin-dashboard .platform-presence-count strong {
    color: #1e6840;
    font-size: 1.35rem;
    line-height: 1;
}

.platform-presence-indicator {
    width: 9px;
    height: 9px;
    flex: 0 0 auto;
    border-radius: 50%;
    background: #38a568;
    box-shadow: 0 0 0 4px rgba(56, 165, 104, 0.12);
}

.platform-count-badge {
    padding: 7px 11px;
    border: 1px solid #dcece8;
    border-radius: 999px;
    background: #f0f8f6;
    color: #24766c !important;
    font-size: 0.77rem !important;
    font-weight: 750;
}

.super-admin-dashboard .platform-schools-section .table-wrap {
    border: 1px solid var(--platform-line);
    border-radius: 15px;
    background: #fff;
}

.super-admin-dashboard .platform-table {
    min-width: 850px;
    font-size: 0.84rem;
}

.super-admin-dashboard .platform-table th,
.super-admin-dashboard .platform-table td {
    padding: 15px 14px;
    border-bottom-color: #edf1f3;
}

.super-admin-dashboard .platform-table thead th {
    background: #f7f9fa;
    color: #7b8991;
    font-size: 0.67rem;
    letter-spacing: 0.065em;
}

.super-admin-dashboard .platform-table tbody tr:hover {
    background: #f8fbfa;
}

.super-admin-dashboard .platform-table td:first-child strong,
.super-admin-dashboard .platform-table td:nth-child(2) strong {
    color: #2a414c;
    font-weight: 750;
}

.super-admin-dashboard .platform-table td small {
    color: #86949b;
}

.super-admin-dashboard .platform-table .btn {
    min-height: 34px;
    padding: 7px 11px;
    border-radius: 9px;
    font-size: 0.74rem;
    font-weight: 700;
    white-space: nowrap;
}

.super-admin-dashboard .platform-table td form {
    margin: 0;
}

.super-admin-dashboard .platform-status {
    gap: 6px;
    border: 1px solid transparent;
    font-size: 0.72rem;
}

.super-admin-dashboard .platform-status::before {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    content: "";
}

.super-admin-dashboard .platform-status.is-active {
    border-color: #d8eee0;
    background: #eff9f2;
    color: #28784a;
}

.super-admin-dashboard .platform-status.is-inactive {
    border-color: #ece3e3;
    background: #f8f3f3;
    color: #8c5b5b;
}

.super-admin-dashboard .platform-empty-state {
    margin: 0;
    padding: 34px 20px;
    border: 1px dashed #dce5e8;
    border-radius: 14px;
    background: #fafcfc;
    color: #72828b;
    text-align: center;
}

@media (max-width: 720px) {
    .super-admin-dashboard .platform-heading {
        min-height: 0;
        gap: 22px;
        padding: 24px;
        border-radius: 20px;
    }

    .platform-heading-actions {
        width: 100%;
        justify-items: stretch;
    }

    .super-admin-dashboard .platform-admin-label {
        align-self: start;
    }

    .super-admin-dashboard .platform-metrics {
        gap: 10px;
    }

    .super-admin-dashboard .platform-administrative-metrics {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .super-admin-dashboard .platform-metrics article {
        min-height: 136px;
        padding: 15px;
        border-radius: 15px;
    }

    .platform-metric-icon {
        width: 36px;
        height: 36px;
        border-radius: 11px;
    }

    .super-admin-dashboard .platform-metrics article strong {
        font-size: 1.65rem;
    }

    .super-admin-dashboard .platform-schools-section {
        padding: 18px;
        border-radius: 18px;
    }

    .super-admin-dashboard .platform-schools-section .table-wrap {
        border: 0;
        background: transparent;
    }

    .super-admin-dashboard .platform-table {
        min-width: 0;
    }

    .super-admin-dashboard .platform-table tbody tr {
        border-color: var(--platform-line);
        border-radius: 15px;
        box-shadow: 0 4px 14px rgba(31, 54, 67, 0.04);
    }

    .super-admin-dashboard .platform-table td {
        border-bottom-color: #edf1f3;
    }

    .super-admin-dashboard .platform-table td::before {
        color: #85939a;
        letter-spacing: 0.04em;
    }

    .super-admin-dashboard .platform-table td:last-child {
        grid-column: 1 / -1;
    }
}

@media (max-width: 420px) {
    .super-admin-dashboard .platform-metrics article {
        grid-template-columns: 1fr auto;
        gap: 4px 7px;
        padding: 13px;
    }

    .super-admin-dashboard .platform-metrics article > span:not(.platform-metric-icon) {
        font-size: 0.74rem;
    }

    .super-admin-dashboard .platform-metrics article strong {
        font-size: 1.45rem;
    }

    .super-admin-dashboard .platform-section-heading {
        align-items: flex-start;
        flex-direction: column;
    }

    .super-admin-dashboard .platform-presence-count {
        white-space: normal;
    }
}

.super-admin-sidebar,
.school-admin-sidebar {
    --sidebar-accent: #42b7a3;
    --sidebar-accent-soft: rgba(66, 183, 163, 0.15);
    position: sticky;
    top: 20px;
    min-height: min(740px, calc(100vh - 40px));
    padding: 20px 15px 16px;
    border: 1px solid rgba(190, 224, 217, 0.13);
    border-radius: 23px;
    background:
        radial-gradient(ellipse at 0% 0%, rgba(38, 123, 113, 0.23), transparent 34%),
        linear-gradient(165deg, #172c38 0%, #142631 55%, #10232d 100%);
    box-shadow: 0 18px 42px rgba(23, 49, 61, 0.16);
    color: #f1f7f6;
}

.super-admin-sidebar .brand-block,
.school-admin-sidebar .brand-block {
    gap: 12px;
    padding: 7px 8px 19px;
    border-bottom-color: rgba(222, 241, 237, 0.12);
}

.super-admin-sidebar .brand-mark,
.school-admin-sidebar .brand-mark {
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    border: 1px solid rgba(183, 240, 222, 0.23);
    border-radius: 14px;
    background: linear-gradient(145deg, #39a995, #237b77);
    box-shadow: 0 8px 20px rgba(28, 151, 131, 0.22);
    color: #fff;
}

.super-admin-sidebar .brand-logo,
.school-admin-sidebar .brand-logo {
    width: 46px;
    height: 46px;
    flex: 0 0 46px;
    border: 1px solid rgba(210, 237, 231, 0.24);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.96);
}

.super-admin-sidebar .app-brand-logo,
.school-admin-sidebar .app-brand-logo {
    object-fit: contain;
    padding: 2px;
    background: #fff;
}

.super-admin-sidebar .brand-copy,
.school-admin-sidebar .brand-copy {
    gap: 1px;
}

.super-admin-sidebar .brand-copy .eyebrow,
.school-admin-sidebar .brand-copy .eyebrow {
    margin-bottom: 4px;
    color: #80cbbb;
    font-size: 0.59rem;
    font-weight: 750;
    letter-spacing: 0.11em;
    opacity: 1;
}

.super-admin-sidebar .brand-block h1,
.school-admin-sidebar .brand-block h1 {
    color: #f5f9f8;
    font-size: 1.04rem;
    font-weight: 750;
    letter-spacing: -0.025em;
    overflow-wrap: anywhere;
}

.super-admin-sidebar .brand-copy small,
.school-admin-sidebar .brand-copy small {
    max-width: 175px;
    margin-top: 5px;
    color: #9bb0b8;
    font-size: 0.7rem;
}

.super-admin-sidebar .nav-menu,
.school-admin-sidebar .nav-menu {
    gap: 17px;
    margin-top: 19px;
    padding: 3px 0;
}

.super-admin-sidebar .nav-group,
.school-admin-sidebar .nav-group {
    gap: 6px;
}

.super-admin-sidebar .nav-group + .nav-group {
    padding-top: 7px;
    border-top: 1px solid rgba(222, 241, 237, 0.08);
}

.super-admin-sidebar .nav-group-title,
.school-admin-sidebar .nav-group-title {
    padding: 0 10px 5px;
    color: #7f969e;
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.14em;
}

.super-admin-sidebar .nav-item,
.school-admin-sidebar .nav-item,
.super-admin-sidebar .nav-dropdown-toggle,
.school-admin-sidebar .nav-dropdown-toggle {
    min-height: 42px;
    gap: 11px;
    padding: 9px 10px;
    border: 1px solid transparent;
    border-radius: 11px;
    background: transparent;
    box-shadow: none;
    color: #bdcbd0;
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 0;
    transition: background 0.16s ease, border-color 0.16s ease, color 0.16s ease, transform 0.16s ease;
}

.super-admin-sidebar .nav-dropdown-toggle,
.school-admin-sidebar .nav-dropdown-toggle {
    cursor: pointer;
    font-family: inherit;
    text-align: left;
}

.super-admin-sidebar .nav-dropdown-toggle {
    min-height: 46px;
    font-size: 0.84rem;
    font-weight: 700;
}

.super-admin-sidebar .nav-title-wrap,
.school-admin-sidebar .nav-title-wrap {
    gap: 11px;
}

.super-admin-sidebar .nav-icon,
.school-admin-sidebar .nav-icon {
    width: 25px;
    min-width: 25px;
    height: 25px;
    border-radius: 8px;
    background: rgba(225, 240, 236, 0.07);
    color: #abc0c4;
    font-size: 0.88rem;
    opacity: 1;
    transition: background 0.16s ease, color 0.16s ease;
}

.super-admin-sidebar .nav-dropdown-toggle:hover,
.school-admin-sidebar .nav-dropdown-toggle:hover,
.super-admin-sidebar .nav-item:hover,
.school-admin-sidebar .nav-item:hover {
    transform: none;
    border-color: rgba(173, 225, 212, 0.1);
    background: rgba(227, 244, 239, 0.075);
    box-shadow: none;
    color: #fff;
}

.super-admin-sidebar .nav-item.active,
.school-admin-sidebar .nav-item.active,
.super-admin-sidebar .nav-dropdown-toggle.is-open,
.school-admin-sidebar .nav-dropdown-toggle.is-open {
    border-color: rgba(103, 212, 186, 0.15);
    background: linear-gradient(100deg, rgba(47, 159, 139, 0.27), rgba(42, 131, 123, 0.16));
    box-shadow: inset 3px 0 #55c5a9;
    color: #f4fffb;
}

.super-admin-sidebar .nav-item.active .nav-icon,
.school-admin-sidebar .nav-item.active .nav-icon,
.super-admin-sidebar .nav-dropdown-toggle.is-open .nav-icon,
.school-admin-sidebar .nav-dropdown-toggle.is-open .nav-icon {
    background: rgba(72, 190, 163, 0.18);
    color: #76ddbd;
}

.super-admin-sidebar .nav-chevron,
.school-admin-sidebar .nav-chevron {
    color: #8399a0;
    font-size: 0.78rem;
}

.super-admin-sidebar .nav-submenu,
.school-admin-sidebar .nav-submenu {
    gap: 4px;
    margin-top: 4px;
    padding-left: 9px;
    border-left: 1px solid rgba(180, 211, 205, 0.16);
}

.super-admin-sidebar .nav-submenu {
    margin-left: 12px;
}

.super-admin-sidebar .nav-submenu .nav-item,
.school-admin-sidebar .nav-submenu .nav-item {
    min-height: 38px;
    padding: 7px 8px;
    font-size: 0.77rem;
}

.super-admin-sidebar .nav-submenu .nav-icon,
.school-admin-sidebar .nav-submenu .nav-icon {
    width: 23px;
    min-width: 23px;
    height: 23px;
    font-size: 0.8rem;
}

.super-admin-sidebar .sidebar-footer,
.school-admin-sidebar .sidebar-footer {
    margin-top: 20px;
    padding-top: 12px;
    border-top-color: rgba(222, 241, 237, 0.11);
    color: #7f969e;
    font-size: 0.7rem;
}

.super-admin-sidebar .sidebar-footer p,
.school-admin-sidebar .sidebar-footer p {
    margin: 0;
}

.super-admin-sidebar :focus-visible,
.school-admin-sidebar :focus-visible {
    outline: 2px solid #77d7bf;
    outline-offset: 2px;
}

@media (max-width: 980px) {
    .super-admin-sidebar,
    .school-admin-sidebar {
        top: 12px;
        min-height: 0;
        border-radius: 21px;
        box-shadow: 0 24px 60px rgba(12, 35, 44, 0.28);
    }
}

.school-admin-dashboard {
    --school-ink: #203744;
    --school-muted: #71818a;
    --school-line: #e4ebed;
    --school-accent: #167d78;
}

.school-admin-dashboard .dashboard-hero-v2 {
    position: relative;
    overflow: hidden;
    min-height: 184px;
    margin: 0 0 20px;
    padding: 30px 34px;
    border: 1px solid rgba(35, 111, 112, 0.12);
    border-radius: 24px;
    background:
        radial-gradient(ellipse at 84% 4%, rgba(153, 224, 202, 0.44), transparent 38%),
        linear-gradient(118deg, #f0f8f7 0%, #fbfcfc 54%, #eef6f4 100%);
    box-shadow: 0 12px 30px rgba(31, 74, 75, 0.06);
}

.school-admin-dashboard .dashboard-hero-v2::after {
    position: absolute;
    right: 30%;
    bottom: -122px;
    width: 240px;
    height: 240px;
    border: 1px solid rgba(22, 125, 120, 0.1);
    border-radius: 50%;
    content: "";
    pointer-events: none;
}

.school-admin-dashboard .dashboard-hero-kicker {
    color: var(--school-accent);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.13em;
}

.school-admin-dashboard .dashboard-hero h2 {
    margin: 8px 0;
    color: #17313d;
    font-size: clamp(1.8rem, 3vw, 2.35rem);
    letter-spacing: -0.045em;
}

.school-admin-dashboard .dashboard-hero p {
    color: #657982;
}

.school-dashboard-actions {
    z-index: 1;
    display: grid;
    justify-items: end;
    gap: 16px;
}

.school-dashboard-user {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: #71818a;
    font-size: 0.76rem;
}

.school-dashboard-user strong {
    display: block;
    margin-top: 2px;
    color: #263e49;
    font-size: 0.88rem;
}

.school-dashboard-avatar {
    display: grid;
    width: 38px;
    height: 38px;
    place-items: center;
    border: 1px solid rgba(22, 125, 120, 0.12);
    border-radius: 50%;
    background: #fff;
    color: var(--school-accent);
    font-size: 0.9rem;
    font-weight: 800;
}

.school-dashboard-primary-action {
    display: inline-flex;
    min-height: 43px;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0 17px;
    border: 1px solid #126b68;
    border-radius: 12px;
    background: #167d78;
    box-shadow: 0 7px 16px rgba(22, 125, 120, 0.16);
    color: #fff;
    font-size: 0.84rem;
    font-weight: 750;
    text-decoration: none;
    transition: background 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.school-dashboard-primary-action:hover {
    transform: translateY(-1px);
    background: #116b67;
    box-shadow: 0 10px 20px rgba(22, 125, 120, 0.2);
}

.school-dashboard-primary-action span {
    font-size: 1.2rem;
    line-height: 1;
}

.school-admin-dashboard .dashboard-kpi-grid-v2 {
    gap: 14px;
    margin-bottom: 15px;
}

.school-admin-dashboard .dashboard-kpi-grid-v2 .dashboard-kpi {
    min-height: 132px;
    padding: 19px;
    border: 1px solid var(--school-line);
    border-top: 0;
    border-radius: 17px;
    background: #fff;
    box-shadow: 0 5px 18px rgba(31, 54, 67, 0.04);
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.school-admin-dashboard .dashboard-kpi-grid-v2 .dashboard-kpi:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 24px rgba(31, 54, 67, 0.08);
}

.school-admin-dashboard .dashboard-kpi-grid-v2 .dashboard-kpi::after {
    right: -25px;
    bottom: -31px;
    width: 84px;
    height: 84px;
    opacity: 0.045;
}

.school-admin-dashboard .dashboard-kpi span,
.school-admin-dashboard .dashboard-finance-card span {
    color: #62747e;
    font-size: 0.75rem;
    letter-spacing: 0.065em;
}

.school-admin-dashboard .dashboard-kpi strong {
    color: #203744;
    font-size: 1.9rem;
    letter-spacing: -0.04em;
}

.school-admin-dashboard .dashboard-kpi small {
    color: #91a0a8;
}

.school-admin-dashboard .kpi-primary { color: #167d78; }
.school-admin-dashboard .kpi-success { color: #4d9a83; }
.school-admin-dashboard .kpi-warning { color: #bd843f; }
.school-admin-dashboard .kpi-purple { color: #786aab; }

.school-admin-dashboard .dashboard-kpi .stat-icon,
.school-admin-dashboard .dashboard-finance-card .stat-icon {
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    border-radius: 13px;
    background: #eaf5f2;
    color: #197c72;
}

.school-admin-dashboard .dashboard-kpi .icon-a,
.school-admin-dashboard .dashboard-finance-card .icon-a {
    background: #eaf5f2;
    color: #197c72;
}

.school-admin-dashboard .dashboard-kpi .icon-b,
.school-admin-dashboard .dashboard-finance-card .icon-b {
    background: #eef2fb;
    color: #5c75aa;
}

.school-admin-dashboard .dashboard-kpi .icon-c,
.school-admin-dashboard .dashboard-finance-card .icon-c {
    background: #fff4e8;
    color: #bd762b;
}

.school-admin-dashboard .dashboard-kpi .icon-d {
    background: #f1edfb;
    color: #8063b4;
}

.school-admin-dashboard .dashboard-finance-grid-v2 {
    gap: 14px;
    margin-bottom: 20px;
}

.school-admin-dashboard .dashboard-finance-grid-v2 .dashboard-finance-card {
    min-height: 112px;
    padding: 17px;
    border: 1px solid var(--school-line);
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 5px 18px rgba(31, 54, 67, 0.04);
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.school-admin-dashboard .dashboard-finance-grid-v2 .dashboard-finance-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 24px rgba(31, 54, 67, 0.08);
}

.school-admin-dashboard .finance-blue { border-left: 3px solid #5c91c5; }
.school-admin-dashboard .finance-green { border-left: 3px solid #4d9a83; }
.school-admin-dashboard .finance-orange { border-left: 3px solid #c38a45; }

.school-admin-dashboard .dashboard-finance-card strong {
    color: #203744;
    font-size: 1.23rem;
}

.school-admin-dashboard .dashboard-finance-card a {
    color: var(--school-accent);
    font-size: 0.75rem;
}

.school-admin-dashboard .dashboard-grid-v2 {
    gap: 18px;
    margin-top: 0;
}

.school-admin-dashboard .dashboard-grid-v2 .panel {
    min-height: 330px;
    padding: 22px;
    border: 1px solid var(--school-line);
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 6px 22px rgba(31, 54, 67, 0.04);
}

.school-admin-dashboard .panel-header h3 {
    color: #203744;
    font-size: 1.12rem;
    letter-spacing: -0.02em;
}

.school-admin-dashboard .panel-kicker {
    color: var(--school-accent);
}

.school-admin-dashboard .table-control-link {
    color: var(--school-accent);
    font-size: 0.8rem;
    font-weight: 750;
}

.school-admin-dashboard .dashboard-pie-chart {
    box-shadow: inset 0 0 0 1px rgba(32, 55, 68, 0.06);
}

.school-admin-dashboard .dashboard-pie-center {
    background: #fff;
}

.school-admin-dashboard .dashboard-pie-center strong {
    color: #203744;
}

.school-admin-dashboard .dashboard-pie-legend-item {
    border-bottom-color: #edf1f3;
}

.school-admin-dashboard .dashboard-pie-legend-item > strong {
    color: #344b56;
}

.school-admin-dashboard .dashboard-payment-item {
    border-bottom-color: #edf1f3;
}

.school-admin-dashboard .dashboard-payment-item > div > strong {
    color: #2a414c;
}

.school-admin-dashboard .dashboard-payment-item small,
.school-admin-dashboard .dashboard-payment-item .payment-meta {
    color: #86949b;
}

@media (max-width: 900px) {
    .school-admin-dashboard .dashboard-kpi-grid-v2 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .school-admin-dashboard .dashboard-grid-v2 {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 720px) {
    .school-admin-dashboard .dashboard-hero-v2 {
        min-height: 0;
        align-items: flex-start;
        flex-direction: column;
        gap: 22px;
        padding: 24px;
        border-radius: 20px;
    }

    .school-dashboard-actions {
        width: 100%;
        align-items: center;
        justify-items: stretch;
    }

    .school-admin-dashboard .dashboard-hero-actions {
        width: 100%;
    }

    .school-dashboard-primary-action {
        width: 100%;
    }

    .school-admin-dashboard .dashboard-finance-grid-v2 {
        grid-template-columns: 1fr;
    }

    .school-admin-dashboard .dashboard-grid-v2 .panel {
        min-height: 0;
        padding: 18px;
        border-radius: 16px;
    }
}

@media (max-width: 420px) {
    .school-admin-dashboard .dashboard-kpi-grid-v2 {
        gap: 9px;
    }

    .school-admin-dashboard .dashboard-kpi-grid-v2 .dashboard-kpi {
        min-height: 119px;
        gap: 10px;
        padding: 13px;
        border-radius: 14px;
    }

    .school-admin-dashboard .dashboard-kpi .stat-icon {
        width: 36px;
        height: 36px;
        flex-basis: 36px;
        border-radius: 11px;
        font-size: 0.85rem;
    }

    .school-admin-dashboard .dashboard-kpi span {
        font-size: 0.66rem;
    }

    .school-admin-dashboard .dashboard-kpi strong {
        font-size: 1.55rem;
    }
}

@media print {
    @page palmares-page {
        size: A4 portrait;
        margin: 10mm;
    }

    .platform-ranking-print-area,
    .platform-ranking-print-area * {
        visibility: visible !important;
    }

    .platform-ranking-print-area {
        position: absolute;
        inset: 0;
        display: block !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        color: #111827 !important;
        background: #fff !important;
        font-family: Georgia, 'Times New Roman', serif;
        page: palmares-page;
        opacity: 1 !important;
        transform: none !important;
    }

    .platform-ranking-print-header {
        display: grid;
        grid-template-columns: 58px minmax(0, 1fr) 88px;
        align-items: center;
        gap: 10px;
        padding-bottom: 7px;
        border-bottom: 2px solid #111;
        text-align: center;
    }

    .platform-ranking-print-header img,
    .platform-ranking-print-mark {
        display: grid;
        width: 54px;
        height: 54px;
        place-items: center;
        object-fit: contain;
        border: 1px solid #777;
        font-family: Georgia, 'Times New Roman', serif;
        font-size: 10pt;
        font-weight: 700;
    }

    .platform-ranking-congo-flag {
        border: 0;
        background: transparent;
    }

    .platform-ranking-congo-flag svg {
        display: block;
        width: 100%;
        height: auto;
        border: 1px solid #777;
    }

    .platform-ranking-print-country,
    .platform-ranking-print-ministry,
    .platform-ranking-print-header h1,
    .platform-ranking-print-address,
    .platform-ranking-print-document {
        margin: 0 0 2px;
        color: #111 !important;
    }

    .platform-ranking-print-country,
    .platform-ranking-print-ministry {
        font-size: 7pt;
        font-weight: 700;
        text-transform: uppercase;
    }

    .platform-ranking-print-header h1 {
        font-size: 11pt;
        text-transform: uppercase;
    }

    .platform-ranking-print-address {
        font-size: 7.5pt;
    }

    .platform-ranking-print-document {
        margin-top: 5px;
        font-size: 9pt;
        font-weight: 800;
        text-transform: uppercase;
    }

    .platform-ranking-print-year {
        padding: 6px 4px;
        border: 1px solid #111;
        font-size: 7pt;
        text-align: center;
    }

    .platform-ranking-print-year strong {
        display: inline-block;
        margin-top: 3px;
        font-size: 8pt;
    }

    .platform-ranking-print-details {
        display: flex;
        justify-content: space-between;
        gap: 16px;
        margin: 7px 0 9px;
        padding-bottom: 5px;
        border-bottom: 1px solid #111;
        font-size: 8.5pt;
    }

    .platform-ranking-print-details p {
        margin: 0;
    }

    .platform-ranking-print-only {
        display: block;
    }

    .platform-ranking-print-only h2 {
        margin: 7px 0 4px;
        color: #111 !important;
        font-family: Georgia, 'Times New Roman', serif;
        font-size: 8pt;
        text-align: center;
        text-transform: uppercase;
    }

    .platform-ranking-print-stats {
        display: flex;
        justify-content: space-between;
        gap: 10px;
        margin: 0 0 5px;
        padding: 4px 6px;
        border: 1px solid #111;
        font-size: 7pt;
    }

    .platform-ranking-print-stats strong {
        margin-left: 4px;
    }

    .platform-ranking-course-summary,
    .platform-ranking-detailed-table {
        width: 100%;
        border-collapse: collapse;
        color: #111 !important;
        font-family: Georgia, 'Times New Roman', serif;
        table-layout: fixed;
    }

    .platform-ranking-course-summary {
        margin-bottom: 7px;
        font-size: 6.5pt;
    }

    .platform-ranking-course-summary th,
    .platform-ranking-course-summary td,
    .platform-ranking-detailed-table th,
    .platform-ranking-detailed-table td {
        padding: 3px 2px;
        border: 1px solid #111;
        color: #111 !important;
        text-align: center;
        vertical-align: middle;
        overflow-wrap: anywhere;
    }

    .platform-ranking-course-summary thead th,
    .platform-ranking-detailed-table thead th {
        background: #e5e7eb !important;
        font-size: 6.5pt;
        font-weight: 700;
        text-transform: uppercase;
    }

    .platform-ranking-course-summary th:first-child,
    .platform-ranking-course-summary td:first-child {
        width: 13%;
        text-align: left;
    }

    .platform-ranking-course-summary thead {
        display: table-header-group;
    }

    .platform-ranking-detailed-table {
        font-size: 6.5pt;
    }

    .platform-ranking-detailed-table thead {
        display: table-header-group;
    }

    .platform-ranking-detailed-table tbody tr {
        break-inside: avoid;
    }

    .platform-ranking-detailed-table th:nth-child(1),
    .platform-ranking-detailed-table td:nth-child(1) { width: 5%; }
    .platform-ranking-detailed-table th:nth-child(2),
    .platform-ranking-detailed-table td:nth-child(2) { width: 19%; text-align: left; }
    .platform-ranking-detailed-table th:nth-child(3),
    .platform-ranking-detailed-table td:nth-child(3) { width: 5%; }
    .platform-ranking-detailed-table th:nth-child(4),
    .platform-ranking-detailed-table td:nth-child(4) { width: 10%; }
    .platform-ranking-detailed-table th:nth-child(5),
    .platform-ranking-detailed-table td:nth-child(5) { width: 8%; }
    .platform-ranking-detailed-table th:nth-child(6),
    .platform-ranking-detailed-table td:nth-child(6) { width: 10%; }
    .platform-ranking-detailed-table th:nth-child(7),
    .platform-ranking-detailed-table td:nth-child(7) { width: 9%; }
    .platform-ranking-detailed-table th:nth-child(8),
    .platform-ranking-detailed-table td:nth-child(8) { width: 7%; }
    .platform-ranking-detailed-table th:nth-child(9),
    .platform-ranking-detailed-table td:nth-child(9) { width: 27%; text-align: left; }

    .platform-ranking-print-note {
        margin: 4px 0 0;
        color: #111 !important;
        font-size: 6.5pt;
        text-align: right;
    }

    .platform-ranking-heading {
        display: none !important;
    }

    .platform-ranking-print-area .table-wrap {
        overflow: visible !important;
        border: 1px solid #9ca3af;
        border-radius: 0;
    }

    .platform-ranking-print-area .platform-ranking-table {
        display: table !important;
        width: 100% !important;
        min-width: 0 !important;
        border-collapse: collapse;
        font-family: Georgia, 'Times New Roman', serif;
        font-size: 9pt;
    }

    .platform-ranking-print-area .platform-ranking-table thead {
        position: static !important;
        display: table-header-group !important;
        width: auto !important;
        height: auto !important;
        clip: auto !important;
        clip-path: none !important;
        overflow: visible !important;
    }

    .platform-ranking-print-area .platform-ranking-table tbody {
        display: table-row-group !important;
    }

    .platform-ranking-print-area .platform-ranking-table tbody tr {
        display: table-row !important;
        border: 0;
        border-radius: 0;
        background: #fff !important;
        break-inside: avoid;
    }

    .platform-ranking-print-area .platform-ranking-table th,
    .platform-ranking-print-area .platform-ranking-table td {
        display: table-cell !important;
        min-width: 0 !important;
        padding: 5px 7px;
        border: 1px solid #111;
        color: #111 !important;
        text-align: left;
        white-space: normal;
    }

    .platform-ranking-print-area .platform-ranking-table thead th {
        background: #e5e7eb !important;
        font-size: 7.5pt;
        text-transform: uppercase;
    }

    .platform-ranking-print-area .platform-ranking-table th:first-child,
    .platform-ranking-print-area .platform-ranking-table td:first-child {
        width: 12%;
    }

    .platform-ranking-print-area .platform-ranking-table th:nth-child(2),
    .platform-ranking-print-area .platform-ranking-table td:nth-child(2) {
        width: 48%;
    }

    .platform-ranking-print-area .platform-ranking-table th:nth-child(3),
    .platform-ranking-print-area .platform-ranking-table td:nth-child(3),
    .platform-ranking-print-area .platform-ranking-table th:nth-child(4),
    .platform-ranking-print-area .platform-ranking-table td:nth-child(4) {
        width: 20%;
    }

    .platform-ranking-print-area .platform-ranking-table td::before {
        content: none !important;
    }

    .platform-ranking-print-area .platform-ranking-table .platform-number-cell {
        text-align: right;
    }

    .platform-ranking-print-area .platform-ranking-note {
        margin-top: 7px;
        color: #111 !important;
        font-size: 7.5pt;
    }
}

@media screen {
    body {
        background-color: #f4f8f7;
        color: var(--text);
    }

    a:not(.nav-item):not(.platform-create-link):not(.school-dashboard-primary-action):not(.btn) {
        color: var(--primary-dark);
    }

    a:not(.nav-item):not(.platform-create-link):not(.school-dashboard-primary-action):not(.btn):hover {
        color: #0f625f;
    }

    :focus-visible {
        outline: 3px solid rgba(22, 125, 120, 0.34);
        outline-offset: 2px;
    }

    .btn {
        border-radius: 11px;
        font-weight: 700;
        transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
    }

    .btn-primary {
        background: linear-gradient(135deg, #167d78, #279b88);
        box-shadow: 0 9px 18px rgba(22, 125, 120, 0.18);
    }

    .btn-primary:hover {
        background: linear-gradient(135deg, #126b68, #208575);
        box-shadow: 0 12px 22px rgba(22, 125, 120, 0.22);
    }

    .btn-secondary {
        border: 1px solid #dce8e6;
        background: #f0f6f4;
        color: #31515a;
    }

    .btn-secondary:hover {
        background: #e5f0ed;
    }

    .auth-header .brand-mark {
        background: linear-gradient(145deg, #39a995, #237b77);
        box-shadow: 0 10px 22px rgba(28, 151, 131, 0.22);
    }

    .page-header h2,
    .panel-header h3 {
        color: #203744;
        letter-spacing: -0.025em;
    }

    .panel,
    .form-panel,
    .school-settings-panel,
    .platform-create-section,
    .platform-access-section,
    .auth-card {
        border-color: #e4ebed;
        border-radius: 18px;
        background: rgba(255, 255, 255, 0.94);
        box-shadow: 0 7px 24px rgba(31, 54, 67, 0.045);
    }

    .panel-kicker {
        color: var(--primary);
    }

    .field-group input,
    .field-group select,
    .field-group textarea,
    .field-select,
    .search-field input,
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="number"],
    input[type="date"],
    input[type="time"],
    select,
    textarea {
        border-color: #dbe5e5;
        border-radius: 11px;
        background-color: #fbfcfc;
        color: #263e49;
    }

    .field-group input:focus,
    .field-group select:focus,
    .field-group textarea:focus,
    .field-select:focus,
    .search-field input:focus,
    input:focus,
    select:focus,
    textarea:focus {
        border-color: #5ba99b;
        outline: 3px solid rgba(22, 125, 120, 0.11);
        background-color: #fff;
    }

    .table-wrap {
        border-radius: 13px;
    }

    .student-table,
    .class-table {
        border-color: #e3eaec;
        border-radius: 12px;
    }

    .student-table th,
    .student-table td,
    .class-table th,
    .class-table td {
        border-bottom-color: #e9eef0;
    }

    .student-table thead th,
    .class-table thead th {
        background: #f3f7f6;
        color: #667a82;
    }

    .student-table tbody tr:hover,
    .teacher-assignment-table tbody tr:hover {
        background: #f4f9f7;
    }

    .badge-soft {
        background: #eaf5f2;
        color: #176f69;
    }

    .assignment-profile,
    .school-header-card {
        border-color: #dcebe7;
        background: linear-gradient(135deg, rgba(22, 125, 120, 0.07), rgba(77, 154, 131, 0.035));
    }

    .assignment-avatar {
        background: linear-gradient(145deg, #2d9c8b, #237b77);
        box-shadow: 0 10px 20px rgba(22, 125, 120, 0.18);
    }

    .chart-label strong,
    .table-control-link {
        color: var(--primary-dark);
    }

    .chart-bar-bg {
        background: rgba(22, 125, 120, 0.09);
    }

    .dashboard-payment-item {
        border-color: #e7eeee;
        border-radius: 12px;
        box-shadow: 0 5px 14px rgba(31, 54, 67, 0.04);
    }

    .auth-card {
        border-radius: 22px;
        box-shadow: 0 18px 42px rgba(31, 74, 75, 0.1);
    }

    .alert {
        border-radius: 12px;
    }
}

.auth-wrapper:has(.auth-card) {
    position: relative;
    min-height: min(780px, calc(100vh - 56px));
    padding: 28px;
    isolation: isolate;
}

.auth-wrapper:has(.auth-card)::before {
    position: absolute;
    z-index: -1;
    top: 8%;
    right: 7%;
    width: 240px;
    height: 240px;
    border: 1px solid rgba(22, 125, 120, 0.1);
    border-radius: 50%;
    content: "";
}

.auth-card {
    display: grid;
    grid-template-columns: minmax(245px, 0.82fr) minmax(320px, 1.18fr);
    width: min(100%, 900px);
    min-height: 520px;
    overflow: hidden;
    padding: 0;
    border: 1px solid rgba(212, 227, 225, 0.9);
    border-radius: 25px;
    background: #fff;
    box-shadow: 0 26px 70px rgba(31, 74, 75, 0.13);
}

.auth-brand-panel {
    position: relative;
    display: flex;
    overflow: hidden;
    min-height: 100%;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-end;
    padding: 36px;
    background:
        radial-gradient(ellipse at 78% 11%, rgba(103, 212, 186, 0.27), transparent 39%),
        linear-gradient(150deg, #1b434a 0%, #17615f 54%, #167d78 100%);
    color: #fff;
}

.auth-brand-panel::before {
    position: absolute;
    top: 22%;
    left: 22%;
    width: 270px;
    height: 270px;
    border: 1px solid rgba(232, 255, 248, 0.12);
    border-radius: 50%;
    content: "";
}

.auth-brand-panel::after {
    position: absolute;
    top: 28%;
    left: 30%;
    width: 190px;
    height: 190px;
    border: 1px solid rgba(232, 255, 248, 0.1);
    border-radius: 50%;
    content: "";
}

.auth-brand-orb {
    position: absolute;
    border-radius: 50%;
    background: rgba(215, 255, 243, 0.08);
    filter: blur(1px);
}

.auth-brand-orb-one {
    top: -66px;
    right: -48px;
    width: 210px;
    height: 210px;
}

.auth-brand-orb-two {
    top: 31%;
    left: -45px;
    width: 115px;
    height: 115px;
}

.auth-brand-mark {
    z-index: 1;
    display: grid;
    width: 62px;
    height: 62px;
    margin-bottom: auto;
    place-items: center;
    border: 1px solid rgba(237, 255, 248, 0.25);
    border-radius: 19px;
    background: rgba(240, 255, 250, 0.14);
    box-shadow: 0 12px 30px rgba(9, 43, 48, 0.16);
    color: #fff;
    font-size: 1.75rem;
    font-weight: 850;
    backdrop-filter: blur(8px);
}

.auth-brand-logo {
    z-index: 1;
    width: min(100%, 178px);
    aspect-ratio: 1;
    margin: 0 auto auto;
    border: 1px solid rgba(237, 255, 248, 0.28);
    border-radius: 22px;
    background: #fff;
    box-shadow: 0 16px 38px rgba(9, 43, 48, 0.18);
    object-fit: contain;
}

.auth-brand-name,
.auth-brand-caption,
.auth-brand-lines {
    z-index: 1;
}

.auth-brand-name {
    font-size: 1.85rem;
    font-weight: 800;
    letter-spacing: -0.05em;
}

.auth-brand-caption {
    max-width: 220px;
    margin-top: 8px;
    color: rgba(238, 255, 249, 0.76);
    font-size: 0.9rem;
    line-height: 1.55;
}

.auth-brand-lines {
    display: flex;
    gap: 6px;
    margin-top: 26px;
}

.auth-brand-lines span {
    width: 22px;
    height: 4px;
    border-radius: 999px;
    background: rgba(228, 255, 247, 0.42);
}

.auth-brand-lines span:first-child {
    width: 42px;
    background: #a6e8d3;
}

.auth-form-panel {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 54px clamp(30px, 6vw, 62px);
}

.auth-header {
    margin-bottom: 30px;
    text-align: left;
}

.auth-kicker {
    display: inline-block;
    margin-bottom: 10px;
    color: #167d78;
    font-size: 0.69rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.auth-header h2 {
    margin: 0 0 9px;
    color: #203744;
    font-size: clamp(1.8rem, 3vw, 2.15rem);
    letter-spacing: -0.05em;
}

.auth-header p {
    max-width: 340px;
    color: #77878e;
    font-size: 0.9rem;
    line-height: 1.6;
}

.auth-form-panel .student-form {
    gap: 20px;
}

.auth-form-panel .field-group {
    gap: 9px;
}

.auth-form-panel .field-group label {
    color: #40535d;
    font-size: 0.82rem;
    font-weight: 700;
}

.auth-form-panel .field-group input {
    min-height: 49px;
    padding: 13px 15px;
    border: 1px solid #dfe8e7;
    border-radius: 11px;
    background: #fbfcfc;
    font-size: 0.88rem;
    transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

.auth-form-panel .field-group input::placeholder {
    color: #a5b0b4;
}

.auth-form-panel .field-group input:focus {
    border-color: #55a99a;
    outline: 0;
    background: #fff;
    box-shadow: 0 0 0 4px rgba(22, 125, 120, 0.1);
}

.auth-form-panel .auth-btn {
    display: flex;
    min-height: 50px;
    align-items: center;
    justify-content: space-between;
    margin-top: 5px;
    padding: 0 17px;
    border-radius: 11px;
    background: linear-gradient(110deg, #167d78, #249886);
    box-shadow: 0 10px 19px rgba(22, 125, 120, 0.19);
    font-size: 0.9rem;
}

.auth-form-panel .auth-btn:hover {
    background: linear-gradient(110deg, #126b68, #1e8376);
    box-shadow: 0 13px 24px rgba(22, 125, 120, 0.24);
}

.auth-submit-arrow {
    display: grid;
    width: 29px;
    height: 29px;
    place-items: center;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.15);
    font-size: 1.15rem;
}

.auth-security-note {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-top: 24px;
    color: #819096;
    font-size: 0.74rem;
}

.auth-security-icon {
    display: grid;
    width: 20px;
    height: 20px;
    place-items: center;
    border-radius: 50%;
    background: #eaf5f0;
    color: #31836d;
    font-size: 0.7rem;
    font-weight: 800;
}

.auth-owner-credit {
    margin: 18px 0 0;
    color: #819096;
    font-size: 0.76rem;
    text-align: center;
}

.auth-owner-credit strong {
    color: #40535d;
}

.auth-form-panel .alert {
    margin: -11px 0 19px;
    font-size: 0.84rem;
}

@media (max-width: 760px) {
    .auth-wrapper:has(.auth-card) {
        min-height: calc(100vh - 24px);
        padding: 18px 0;
    }

    .auth-card {
        grid-template-columns: 1fr;
        width: min(100%, 520px);
        min-height: 0;
        border-radius: 22px;
    }

    .auth-brand-panel {
        min-height: 160px;
        padding: 23px 26px;
    }

    .auth-brand-panel::before {
        top: -86px;
        left: 50%;
        width: 240px;
        height: 240px;
    }

    .auth-brand-panel::after {
        top: -45px;
        left: 59%;
        width: 165px;
        height: 165px;
    }

    .auth-brand-mark {
        width: 47px;
        height: 47px;
        margin-bottom: 18px;
        border-radius: 15px;
        font-size: 1.35rem;
    }

    .auth-brand-logo {
        width: 84px;
        margin: 0 0 14px;
        border-radius: 15px;
    }

    .auth-brand-name {
        font-size: 1.35rem;
    }

    .auth-brand-caption {
        margin-top: 3px;
        font-size: 0.8rem;
    }

    .auth-brand-lines {
        position: absolute;
        right: 26px;
        bottom: 28px;
        margin: 0;
    }

    .auth-form-panel {
        padding: 32px 27px 28px;
    }

    .auth-header {
        margin-bottom: 23px;
    }
}

@media (max-width: 420px) {
    .auth-form-panel {
        padding: 27px 21px 24px;
    }

    .auth-brand-panel {
        min-height: 148px;
        padding: 19px 21px;
    }

    .auth-brand-lines {
        right: 21px;
        bottom: 24px;
    }
}

body.login-page .sidebar,
body.login-page .sidebar-toggle {
    display: none !important;
}

body.login-page .app-shell {
    display: block;
    min-height: 100vh;
    padding: 28px;
}

body.login-page .main-content {
    width: 100%;
    min-height: calc(100vh - 56px);
    padding: 0;
}

body.login-page .auth-wrapper:has(.auth-card) {
    min-height: calc(100vh - 56px);
    padding: 28px;
}

@media (max-width: 720px) {
    body.login-page .app-shell {
        padding: 12px;
    }

    body.login-page .main-content {
        min-height: calc(100vh - 24px);
    }

    body.login-page .auth-wrapper:has(.auth-card) {
        min-height: calc(100vh - 24px);
        padding: 12px;
    }
}

    .admin-areas-page {
        --area-ink: #203744;
        --area-muted: #71818a;
        --area-line: rgba(112, 143, 145, 0.2);
        display: grid;
        gap: 24px;
    }

    .admin-areas-hero {
        position: relative;
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 24px;
        overflow: hidden;
        padding: clamp(24px, 4vw, 40px);
        border: 1px solid rgba(255, 255, 255, 0.72);
        border-radius: 24px;
        background:
            radial-gradient(circle at 92% 12%, rgba(91, 185, 159, 0.2), transparent 28%),
            linear-gradient(120deg, #fff 0%, #f1f8f6 100%);
        box-shadow: 0 18px 42px rgba(31, 74, 75, 0.07);
    }

    .admin-areas-hero-copy {
        min-width: 0;
    }

    .admin-areas-hero h2 {
        margin: 8px 0;
        color: var(--area-ink);
        font-size: clamp(1.65rem, 3vw, 2.2rem);
        letter-spacing: -0.035em;
    }

    .admin-areas-hero p,
    .admin-areas-section-heading p {
        max-width: 650px;
        margin: 0;
        color: var(--area-muted);
        line-height: 1.65;
    }

    .admin-areas-back {
        flex: 0 0 auto;
        border-radius: 12px;
    }

    .admin-areas-hierarchy {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        gap: 9px;
        margin-top: 22px;
    }

    .admin-areas-hierarchy span {
        padding: 7px 11px;
        border: 1px solid rgba(22, 125, 120, 0.13);
        border-radius: 999px;
        background: rgba(255, 255, 255, 0.76);
        color: #28655f;
        font-size: 0.78rem;
        font-weight: 700;
    }

    .admin-areas-hierarchy b {
        color: #9aaca9;
        font-weight: 500;
    }

    .admin-areas-stats {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 16px;
    }

    .admin-areas-stats article {
        display: grid;
        grid-template-columns: 46px minmax(0, 1fr);
        align-items: center;
        column-gap: 14px;
        row-gap: 2px;
        min-width: 0;
        padding: 18px 20px;
        border: 1px solid var(--area-line);
        border-radius: 18px;
        background: rgba(255, 255, 255, 0.88);
        box-shadow: 0 10px 28px rgba(31, 74, 75, 0.045);
    }

    .admin-areas-stat-icon,
    .admin-area-list-icon {
        display: grid;
        place-items: center;
        width: 46px;
        height: 46px;
        grid-row: span 2;
        border-radius: 15px;
        background: #e9f5f1;
        color: #167d78;
        font-size: 1.25rem;
        font-weight: 700;
    }

    .admin-areas-stat-icon.is-division,
    .admin-area-list-icon.is-division {
        background: #fbf1e5;
        color: #b8792b;
    }

    .admin-areas-stat-icon.is-subdivision,
    .admin-area-list-icon.is-subdivision {
        background: #eeedfb;
        color: #6658b4;
    }

    .admin-areas-stats article > span:nth-child(2) {
        color: var(--area-muted);
        font-size: 0.82rem;
        font-weight: 600;
    }

    .admin-areas-stats article strong {
        color: var(--area-ink);
        font-size: 1.45rem;
        line-height: 1.2;
    }

    .admin-areas-section {
        min-width: 0;
        padding: clamp(20px, 3vw, 30px);
        border: 1px solid var(--area-line);
        border-radius: 22px;
        background: rgba(255, 255, 255, 0.82);
        box-shadow: 0 14px 36px rgba(31, 74, 75, 0.05);
    }

    .admin-areas-section-heading {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 18px;
        margin-bottom: 22px;
    }

    .admin-areas-section-heading h3 {
        margin: 5px 0 6px;
        color: var(--area-ink);
        font-size: 1.28rem;
    }

    .admin-areas-section-heading p {
        font-size: 0.9rem;
    }

    .admin-areas-text-link {
        flex: 0 0 auto;
        color: var(--primary-dark);
        font-size: 0.88rem;
        font-weight: 700;
    }

    .admin-areas-text-link:hover {
        text-decoration: underline;
        text-underline-offset: 4px;
    }

    .admin-areas-form-grid {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 16px;
    }

    .admin-area-card {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 18px;
        min-width: 0;
        padding: 20px;
        border: 1px solid var(--area-line);
        border-radius: 18px;
        background: linear-gradient(160deg, #fff, #f9fbfa);
        transition: border-color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
    }

    .admin-area-card:hover {
        transform: translateY(-2px);
        border-color: rgba(22, 125, 120, 0.34);
        box-shadow: 0 14px 28px rgba(31, 74, 75, 0.08);
    }

    .admin-area-card-heading {
        display: flex;
        align-items: center;
        gap: 12px;
    }

    .admin-area-step {
        display: grid;
        place-items: center;
        width: 40px;
        height: 40px;
        flex: 0 0 40px;
        border-radius: 13px;
        background: #e9f5f1;
        color: #167d78;
        font-size: 0.76rem;
        font-weight: 800;
        letter-spacing: 0.04em;
    }

    .admin-area-card:nth-child(2) .admin-area-step {
        background: #fbf1e5;
        color: #b8792b;
    }

    .admin-area-card:nth-child(3) .admin-area-step {
        background: #eeedfb;
        color: #6658b4;
    }

    .admin-area-card-heading h4,
    .admin-area-list-heading h4 {
        margin: 0;
        color: var(--area-ink);
        font-size: 0.96rem;
    }

    .admin-area-card-heading p {
        margin: 4px 0 0;
        color: var(--area-muted);
        font-size: 0.78rem;
    }

    .admin-area-card .field-group {
        min-width: 0;
    }

    .admin-area-card .field-group label {
        font-size: 0.82rem;
    }

    .admin-area-card .field-group input,
    .admin-area-card .field-group select {
        min-height: 46px;
        border-color: #dce7e4;
        border-radius: 12px;
        background-color: #fff;
    }

    .admin-area-card .btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 9px;
        width: 100%;
        min-height: 46px;
        margin-top: auto;
        border-radius: 12px;
    }

    .admin-area-card .btn:disabled {
        cursor: not-allowed;
        opacity: 0.55;
    }

    .admin-area-list {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        align-items: start;
        gap: 16px;
    }

    .admin-area-list-card {
        min-width: 0;
        overflow: hidden;
        border: 1px solid var(--area-line);
        border-radius: 17px;
        background: #fff;
    }

    .admin-area-list-heading {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 17px;
        border-bottom: 1px solid #edf1f0;
        background: #fbfdfc;
    }

    .admin-area-list-icon {
        width: 40px;
        height: 40px;
        grid-row: auto;
        flex: 0 0 40px;
        border-radius: 13px;
        font-size: 1.05rem;
    }

    .admin-area-list-heading > div > span {
        display: block;
        margin-top: 3px;
        color: var(--area-muted);
        font-size: 0.75rem;
    }

    .admin-area-list-card ul {
        max-height: 350px;
        margin: 0;
        padding: 0;
        overflow-y: auto;
        list-style: none;
    }

    .admin-area-list-card li {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        min-width: 0;
        padding: 12px 15px;
        border-bottom: 1px solid #f0f3f2;
    }

    .admin-area-list-card li:last-child {
        border-bottom: 0;
    }

    .admin-area-list-card li > span {
        display: block;
        min-width: 0;
        overflow-wrap: anywhere;
        color: var(--area-ink);
        font-size: 0.86rem;
    }

    .admin-area-list-card li strong,
    .admin-area-list-card li small {
        display: block;
    }

    .admin-area-list-card li small {
        margin-top: 3px;
        color: var(--area-muted);
        font-size: 0.75rem;
    }

    .admin-area-list-card li form {
        flex: 0 0 auto;
    }

    .admin-area-delete {
        display: grid;
        place-items: center;
        width: 32px;
        height: 32px;
        border: 1px solid #f0d9d7;
        border-radius: 10px;
        background: #fff8f7;
        color: #b42318;
        cursor: pointer;
        font-size: 1.25rem;
        line-height: 1;
        transition: background 0.15s ease, border-color 0.15s ease;
    }

    .school-report-page {
        display: grid;
        gap: 22px;
    }

    .school-report-print-header,
    .school-report-print-summary {
        display: none;
    }

    .school-report-hero,
    .school-report-panel {
        padding: clamp(22px, 3vw, 32px);
        border: 1px solid rgba(112, 143, 145, 0.2);
        border-radius: 22px;
        background: rgba(255, 255, 255, 0.9);
        box-shadow: 0 14px 36px rgba(31, 74, 75, 0.06);
    }

    .school-report-hero {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 20px;
        background:
            radial-gradient(circle at 94% 8%, rgba(91, 185, 159, 0.18), transparent 27%),
            linear-gradient(120deg, #fff 0%, #f1f8f6 100%);
    }

    .school-report-hero h2 {
        margin: 8px 0;
        color: #203744;
        font-size: clamp(1.65rem, 3vw, 2.2rem);
        letter-spacing: -0.035em;
    }

    .school-report-hero p {
        max-width: 680px;
        margin: 0;
        color: #71818a;
        line-height: 1.6;
    }

    .school-report-filters {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr)) auto;
        align-items: end;
        gap: 14px;
        padding-bottom: 24px;
        border-bottom: 1px solid #edf1f0;
    }

    .student-report-page .school-report-filters {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .school-report-filters .field-group {
        min-width: 0;
    }

    .school-report-filters select {
        min-height: 46px;
        border-color: #dce7e4;
        border-radius: 12px;
        background-color: #fff;
    }

    .school-report-filters select:disabled {
        cursor: not-allowed;
        background-color: #f2f5f4;
        opacity: 0.7;
    }

    .school-report-actions {
        display: flex;
        gap: 9px;
    }

    .school-report-results {
        padding-top: 24px;
    }

    .school-report-results-heading {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 16px;
        margin-bottom: 18px;
    }

    .school-report-results-heading h3 {
        margin: 5px 0 0;
        color: #203744;
        font-size: 1.25rem;
    }

    .school-report-table td small {
        display: block;
        margin-top: 4px;
        color: #71818a;
    }

    .audit-filters {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        align-items: start;
        gap: 20px 18px;
    }

    .audit-filters .field-group {
        min-width: 0;
    }

    .audit-filters .field-group > label {
        color: #29454d;
    }

    .audit-filters select,
    .audit-filters input {
        min-width: 0;
        min-height: 46px;
        border: 1px solid #dce7e4;
        border-radius: 12px;
        background-color: #fff;
    }

    .audit-combobox {
        position: relative;
        min-width: 0;
    }

    .audit-combobox input {
        width: 100%;
    }

    .audit-combobox-options {
        position: absolute;
        z-index: 20;
        top: calc(100% + 5px);
        right: 0;
        left: 0;
        max-height: 260px;
        overflow-y: auto;
        padding: 5px;
        border: 1px solid #dce7e4;
        border-radius: 12px;
        background: #fff;
        box-shadow: 0 12px 28px rgba(31, 74, 75, 0.16);
    }

    .audit-combobox-options[hidden],
    .audit-combobox-option[hidden],
    .audit-combobox-empty[hidden] {
        display: none;
    }

    .audit-combobox-option {
        display: flex;
        width: 100%;
        flex-direction: column;
        align-items: flex-start;
        gap: 3px;
        padding: 10px 12px;
        border: 0;
        border-radius: 8px;
        background: transparent;
        color: #29454d;
        cursor: pointer;
        text-align: left;
    }

    .audit-combobox-option:hover,
    .audit-combobox-option.is-active {
        background: #edf6f3;
    }

    .audit-combobox-option small {
        color: #71818a;
        font-size: 0.8rem;
    }

    .audit-combobox-empty {
        margin: 0;
        padding: 10px 12px;
        color: #71818a;
        font-size: 0.9rem;
    }

    .audit-filter-actions {
        display: flex;
        align-items: end;
        align-self: end;
        gap: 10px;
        flex-wrap: wrap;
        grid-column: 1 / -1;
        padding-top: 4px;
    }

    @media (max-width: 1050px) {
        .school-report-filters {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }

        .student-report-page .school-report-filters {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }

        .audit-filters {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }
    }

    @media (max-width: 640px) {
        .school-report-hero {
            align-items: flex-start;
            flex-direction: column;
        }

        .school-report-filters {
            grid-template-columns: 1fr;
        }

        .student-report-page .school-report-filters {
            grid-template-columns: 1fr;
        }

        .audit-filters {
            grid-template-columns: 1fr;
            gap: 16px;
        }

        .audit-filter-actions {
            grid-column: auto;
        }

        .school-report-actions {
            flex-wrap: wrap;
        }
    }

    @media print {
        @page school-report {
            size: A4 landscape;
            margin: 12mm;
        }

        .main-content > .school-report-page {
            display: block !important;
        }

        .school-report-page,
        .school-report-page * {
            visibility: visible !important;
        }

        .school-report-page {
            position: static !important;
            display: block;
            width: 100%;
            padding: 0;
            color: #111827;
            background: #fff;
            opacity: 1 !important;
            transform: none !important;
            font-family: Arial, Helvetica, sans-serif;
            page: school-report;
        }

        .school-report-page .reveal,
        .school-report-page .reveal * {
            opacity: 1 !important;
            transform: none !important;
        }

        .school-report-page .school-report-print-header {
            display: grid !important;
            grid-template-columns: 62px minmax(0, 1fr) auto;
            align-items: center;
            gap: 14px;
            padding: 0 0 12px;
            border-bottom: 2px solid #167d78;
            margin: 0 0 16px;
        }

        .school-report-print-header img {
            width: 58px;
            height: 58px;
            object-fit: contain;
        }

        .school-report-print-brand p,
        .school-report-print-brand h1,
        .school-report-print-brand span,
        .school-report-print-date span,
        .school-report-print-date strong {
            display: block;
            margin: 0;
            color: #203744 !important;
        }

        .school-report-print-brand p {
            color: #167d78 !important;
            font-size: 8pt;
            font-weight: 700;
            letter-spacing: 0.08em;
            text-transform: uppercase;
        }

        .school-report-print-brand h1 {
            margin: 3px 0;
            font-size: 19pt;
        }

        .school-report-print-brand span,
        .school-report-print-date span {
            color: #64748b !important;
            font-size: 8pt;
        }

        .school-report-print-date {
            padding: 8px 11px;
            border: 1px solid #d7e4e1;
            border-radius: 8px;
            text-align: right;
        }

        .school-report-print-date strong {
            margin-top: 4px;
            font-size: 9pt;
        }

        .school-report-page .school-report-hero {
            display: none !important;
        }

        .school-report-page .school-report-panel {
            padding: 0;
            border: 0;
            box-shadow: none;
        }

        .school-report-results {
            padding-top: 0;
        }

        .school-report-results-heading {
            margin-bottom: 8px;
        }

        .school-report-results-heading .panel-kicker {
            color: #167d78 !important;
            font-size: 8pt;
            font-weight: 700;
            letter-spacing: 0.08em;
            text-transform: uppercase;
        }

        .school-report-results-heading h3 {
            margin-top: 3px;
            color: #203744 !important;
            font-size: 14pt;
        }

        .school-report-results-heading .platform-count-badge {
            border: 1px solid #d7e4e1;
            background: #f2f8f6 !important;
            color: #16665f !important;
            font-size: 9pt;
        }

        .school-report-print-summary {
            display: grid !important;
            grid-template-columns: repeat(4, minmax(0, 1fr));
            gap: 10px;
            padding: 9px 11px;
            border: 1px solid #dce7e4;
            border-radius: 8px;
            margin: 0 0 12px;
            background: #f7faf9 !important;
            color: #334155 !important;
            font-size: 8pt;
        }

        .school-report-print-summary strong {
            color: #203744 !important;
        }

        .school-report-page .table-wrap {
            overflow: visible !important;
            border: 0;
            border-radius: 0;
        }

        .school-report-page .table-controls {
            display: none !important;
        }

        .school-report-page .school-report-table {
            display: table !important;
            width: 100%;
            min-width: 0 !important;
            border-collapse: collapse;
            color: #1f2937 !important;
            font-size: 9pt;
        }

        .student-report-page .school-report-table {
            font-size: 7pt;
        }

        .school-report-table thead {
            display: table-header-group !important;
        }

        .school-report-table tbody {
            display: table-row-group !important;
        }

        .school-report-table tr {
            display: table-row !important;
            break-inside: avoid;
            page-break-inside: avoid;
        }

        .school-report-table th,
        .school-report-table td {
            display: table-cell !important;
            padding: 8px 9px !important;
            border: 1px solid #d6dfdf !important;
            color: #1f2937 !important;
            text-align: left;
            vertical-align: middle;
            white-space: normal !important;
        }

        .school-report-table th {
            background: #e9f3f1 !important;
            color: #174c48 !important;
            font-size: 8pt;
            font-weight: 700;
            text-transform: uppercase;
        }

        .school-report-table tbody tr:nth-child(even) {
            background: #f7faf9 !important;
        }

        .school-report-table .platform-status {
            padding: 3px 7px;
            border: 1px solid #cfe5d8;
            background: #eef8f1 !important;
            color: #247044 !important;
            font-size: 8pt;
        }

        .school-report-page .platform-empty-state {
            padding: 14px;
            border: 1px solid #dce7e4;
            color: #475569 !important;
            text-align: center;
        }
    }

    .admin-area-delete:hover {
        border-color: #e7b9b5;
        background: #feeeec;
    }

    .admin-area-empty {
        margin: 0;
        padding: 18px 16px;
        color: var(--area-muted);
        font-size: 0.84rem;
    }

    @media (max-width: 1180px) {
        .admin-areas-form-grid,
        .admin-area-list {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }
    }

    @media (max-width: 760px) {
        .admin-areas-hero {
            flex-direction: column;
            padding: 24px 20px;
        }

        .admin-areas-back {
            align-self: flex-start;
        }

        .admin-areas-stats {
            gap: 10px;
        }

        .admin-areas-stats article {
            grid-template-columns: 38px minmax(0, 1fr);
            column-gap: 9px;
            padding: 14px 11px;
        }

        .admin-areas-stat-icon {
            width: 38px;
            height: 38px;
            border-radius: 12px;
        }

        .admin-areas-stats article > span:nth-child(2) {
            font-size: 0.72rem;
        }

        .admin-areas-stats article strong {
            font-size: 1.2rem;
        }

        .admin-areas-section-heading {
            align-items: flex-start;
            flex-direction: column;
        }

        .admin-areas-form-grid,
        .admin-area-list {
            grid-template-columns: 1fr;
        }
    }

    @media (max-width: 420px) {
        .admin-areas-stats {
            grid-template-columns: 1fr;
        }

        .admin-areas-stats article {
            grid-template-columns: 42px minmax(0, 1fr);
            padding: 12px 14px;
        }

        .admin-areas-stat-icon {
            width: 42px;
            height: 42px;
        }

        .admin-areas-hierarchy {
            gap: 6px;
        }

        .admin-areas-hierarchy span {
            padding: 6px 9px;
            font-size: 0.7rem;
        }
    }