:root { --school-green: #07543a; --school-dark: #063c2b; --school-gold: #d7a928; --school-ink: #18332b; --school-muted: #61736b; --school-line: #dce7e1; --school-bg: #f3f7f5; }
* { box-sizing: border-box; }
html, body { min-height: 100%; }
body.school-shell { margin: 0; color: var(--school-ink); background: var(--school-bg); font-family: Inter, "Segoe UI", Arial, sans-serif; font-size: 14px; }
.school-shell a:focus-visible, .school-shell button:focus-visible, .school-shell input:focus-visible, .school-shell select:focus-visible { outline: 3px solid rgba(215, 169, 40, .7); outline-offset: 2px; }
.school-app { display: flex; min-height: 100vh; }
.school-sidebar { position: fixed; z-index: 1040; inset: 0 auto 0 0; display: flex; width: 260px; flex-direction: column; color: #fff; background: var(--school-dark); box-shadow: 7px 0 22px rgba(0, 40, 24, .09); }
.school-brand { display: flex; min-height: 78px; align-items: center; justify-content: space-between; padding: 14px 19px; border-bottom: 1px solid rgba(255,255,255,.14); }
.school-brand img { display: block; width: 153px; height: 49px; padding: 4px 7px; border-radius: 5px; background: #fff; object-fit: contain; }
.school-sidebar-close, .school-menu-toggle { border: 0; background: none; cursor: pointer; }
.school-sidebar-close { display: none; color: #fff; font-size: 21px; }
.school-sidebar-context { padding: 23px 20px 19px; border-bottom: 1px solid rgba(255,255,255,.12); }
.school-sidebar-context span { display: block; margin-bottom: 7px; color: #a9cfbc; font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.school-sidebar-context strong { display: block; overflow-wrap: anywhere; font-size: 14px; line-height: 1.4; }
.school-navigation { overflow-y: auto; padding: 18px 12px; }
.school-navigation-label { display: block; padding: 0 10px 8px; color: #a9cfbc; font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.school-navigation-label-secondary { padding-top: 20px; }
.school-navigation a, .school-logout button, .school-logout a { display: flex; min-height: 43px; align-items: center; gap: 12px; width: 100%; padding: 9px 12px; border: 0; border-radius: 7px; color: rgba(255,255,255,.83); background: transparent; font-size: 13px; font-weight: 600; text-align: left; text-decoration: none; }
.school-navigation a:hover, .school-navigation a.is-active, .school-logout button:hover, .school-logout a:hover { color: #fff; background: rgba(255,255,255,.12); text-decoration: none; }
.school-navigation a.is-active { box-shadow: inset 3px 0 0 var(--school-gold); }
.school-navigation .mdi, .school-logout .mdi { flex: 0 0 20px; font-size: 19px; line-height: 1; text-align: center; }
.school-logout { margin: auto 12px 18px; padding-top: 13px; border-top: 1px solid rgba(255,255,255,.14); }
.school-logout button { cursor: pointer; }
.school-main { display: flex; width: calc(100% - 260px); min-width: 0; min-height: 100vh; flex-direction: column; margin-left: 260px; }
.school-topbar { display: flex; min-height: 78px; align-items: center; gap: 22px; padding: 13px 30px; border-bottom: 1px solid var(--school-line); background: #fff; }
.school-menu-toggle { display: none; color: var(--school-green); font-size: 25px; }
.school-topbar-title { min-width: 0; }
.school-topbar-title span { display: block; margin-bottom: 3px; color: var(--school-green); font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.school-topbar-title strong { display: block; overflow: hidden; color: var(--school-ink); font-size: 17px; line-height: 1.3; text-overflow: ellipsis; white-space: nowrap; }
.school-topbar-home { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; color: var(--school-muted); font-size: 12px; font-weight: 700; text-decoration: none; white-space: nowrap; }
.school-topbar-home:hover { color: var(--school-green); text-decoration: none; }
.school-user { display: inline-flex; align-items: center; gap: 6px; max-width: 190px; color: var(--school-muted); font-size: 12px; }
.school-user .mdi { color: var(--school-green); font-size: 21px; }
.school-user span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.school-content { flex: 1; min-width: 0; padding: 30px; }
.school-content > .container, .school-content > .container-fluid { max-width: 100%; }
.school-footer { padding: 15px 30px; border-top: 1px solid var(--school-line); color: var(--school-muted); background: #fff; font-size: 11px; }
.school-sidebar-backdrop { display: none; }

.school-dashboard { max-width: 1420px; margin: 0 auto; }
.school-dashboard-header { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin-bottom: 22px; }
.school-dashboard-eyebrow { color: var(--school-green); font-size: 10px; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; }
.school-dashboard-header h1 { margin: 5px 0 5px; font-size: 25px; line-height: 1.25; }
.school-dashboard-header p { margin: 0; color: var(--school-muted); font-size: 13px; }
.school-dashboard-count { padding: 10px 14px; border: 1px solid var(--school-line); border-radius: 7px; background: #fff; color: var(--school-green); font-size: 22px; font-weight: 800; text-align: right; white-space: nowrap; }
.school-dashboard-count span { display: block; color: var(--school-muted); font-size: 10px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.school-filters { display: flex; flex-wrap: wrap; align-items: end; gap: 12px; margin-bottom: 20px; padding: 15px 17px; border: 1px solid var(--school-line); border-radius: 8px; background: #fff; }
.school-filters label { min-width: 160px; margin: 0; color: var(--school-muted); font-size: 11px; font-weight: 700; }
.school-filters select { display: block; width: 100%; height: 38px; margin-top: 5px; padding: 0 10px; border: 1px solid var(--school-line); border-radius: 6px; color: var(--school-ink); background: #fff; font-size: 13px; }
.school-tab { display: none; }
.school-tab.is-active { display: block; }
.school-panel { padding: 24px; border: 1px solid var(--school-line); border-radius: 8px; background: #fff; box-shadow: 0 5px 18px rgba(24,51,43,.035); }
.school-panel-heading { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin-bottom: 18px; }
.school-panel h2 { margin: 0 0 16px; font-size: 19px; line-height: 1.3; }
.school-panel-heading h2 { margin: 0; }
.school-action-link { display: inline-flex; align-items: center; gap: 7px; padding: 9px 12px; border: 1px solid #b8d9c7; border-radius: 6px; color: var(--school-green); font-size: 12px; font-weight: 700; text-decoration: none; }
.school-action-link:hover { color: var(--school-dark); background: #eef8f1; text-decoration: none; }
.school-table-wrap { max-width: 100%; overflow-x: auto; }
.school-data-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.school-data-table th { padding: 11px 13px; border-bottom: 1px solid var(--school-line); background: #f7faf8; color: var(--school-muted); font-size: 10px; font-weight: 700; letter-spacing: .05em; text-align: left; text-transform: uppercase; white-space: nowrap; }
.school-data-table td { padding: 12px 13px; border-bottom: 1px solid var(--school-line); vertical-align: middle; }
.school-data-table tr:last-child td { border-bottom: 0; }
.school-data-table td img { width: 42px; height: 50px; border-radius: 5px; object-fit: cover; }
.school-data-table td a { color: var(--school-green); font-weight: 700; white-space: nowrap; }
.school-data-table td a:hover { text-decoration: underline; }
.school-empty { padding: 45px 16px !important; color: var(--school-muted); text-align: center; }
.school-payment-form { max-width: 600px; }
.school-payment-form label, .school-panel label { color: var(--school-ink); font-size: 12px; font-weight: 700; }
.school-payment-form .form-control, .school-panel .form-control { height: 41px; border-color: var(--school-line); border-radius: 6px; font-size: 13px; }
.school-payment-form .form-control:focus, .school-panel .form-control:focus { border-color: var(--school-green); box-shadow: 0 0 0 3px rgba(7,84,58,.11); }
.school-panel .btn-primary, .school-panel .btn-success { border-color: var(--school-green); background: var(--school-green); }
.school-panel .btn-primary:hover, .school-panel .btn-success:hover { border-color: var(--school-dark); background: var(--school-dark); }
.school-payment-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.school-payment-actions a { white-space: nowrap; }
.school-content .card, .school-content .pin-card, .school-content .reg-card, .school-content .profile-card { max-width: 100%; border: 1px solid var(--school-line); border-radius: 8px; background: #fff; box-shadow: 0 5px 18px rgba(24,51,43,.05); }
.school-content .pin-card, .school-content .reg-card, .school-content .profile-card { margin-top: 0; }
.school-content .form-control { border-color: var(--school-line); border-radius: 6px; }
.school-content .form-control:focus { border-color: var(--school-green); box-shadow: 0 0 0 3px rgba(7,84,58,.11); }
.school-content .btn-primary, .school-content .btn-success { border-color: var(--school-green); background: var(--school-green); }
.school-content .btn-primary:hover, .school-content .btn-success:hover { border-color: var(--school-dark); background: var(--school-dark); }
.school-content .btn-outline-primary { border-color: var(--school-green); color: var(--school-green); }
.school-content .btn-outline-primary:hover { background: var(--school-green); color: #fff; }
.school-content .table-responsive { max-width: 100%; overflow-x: auto; }
.school-content .table th { background: #f7faf8; color: var(--school-muted); font-size: 11px; }
.school-content .table td { color: var(--school-ink); font-size: 12px; }

@media (max-width: 991.98px) {
    .school-sidebar { transform: translateX(-100%); transition: transform .2s ease; }
    .school-menu-open .school-sidebar { transform: translateX(0); }
    .school-menu-open .school-sidebar-backdrop { position: fixed; z-index: 1030; inset: 0; display: block; width: 100%; border: 0; background: rgba(0, 29, 17, .5); }
    .school-sidebar-close, .school-menu-toggle { display: inline-block; }
    .school-main { width: 100%; margin-left: 0; }
    .school-content { padding: 22px 18px; }
}
@media (max-width: 640px) {
    .school-topbar { min-height: 66px; gap: 11px; padding: 10px 14px; }
    .school-topbar-title strong { font-size: 14px; }
    .school-topbar-home span, .school-user span { display: none; }
    .school-user { margin-left: 0; }
    .school-content { padding: 15px 12px; }
    .school-dashboard-header { align-items: start; flex-direction: column; }
    .school-dashboard-header h1 { font-size: 21px; }
    .school-dashboard-count { width: 100%; text-align: left; }
    .school-filters label { flex: 1 1 135px; min-width: 0; }
    .school-panel { padding: 17px 14px; }
    .school-footer { padding: 14px; text-align: center; }
}
@media print {
    .school-sidebar, .school-sidebar-backdrop, .school-topbar, .school-footer { display: none !important; }
    .school-main { width: 100%; margin: 0; }
    .school-content { padding: 0; }
}