html{scroll-behavior:smooth}
body{min-width:320px}
:root{
  --fb:#1877F2;--red:#ed1c24;--yellow:#ffcb08;--green:#00a651;
  --lavender:#a19bcc;--black:#231f20;--sidebar-expanded:256px;--sidebar-collapsed:76px;
}
.app-sidebar{width:var(--sidebar-expanded);background:linear-gradient(180deg,#231f20 0%,#171519 100%)}
.app-content{min-height:100vh}
@media(min-width:1024px){.app-content{padding-left:var(--sidebar-expanded)}body.sidebar-collapsed .app-content{padding-left:var(--sidebar-collapsed)}body.sidebar-collapsed .app-sidebar{width:var(--sidebar-collapsed)}}
.app-sidebar,.app-content{transition:width .2s ease,padding-left .2s ease}
.sidebar-nav::-webkit-scrollbar{width:4px}.sidebar-nav::-webkit-scrollbar-thumb{background:rgba(255,255,255,.18);border-radius:99px}

.app-icon-btn{display:grid;height:36px;width:36px;place-items:center;border:1px solid #e2e8f0;border-radius:10px;background:white;color:#475569;font-size:13px}
.app-icon-btn:hover{background:#f8fafc;color:var(--fb)}
.app-icon-btn-dark{display:grid;height:34px;width:34px;place-items:center;border-radius:10px;background:rgba(255,255,255,.1)}

.nav-link,.nav-group-toggle{width:100%;display:flex;align-items:center;gap:8px;min-height:38px;border-radius:10px;padding:5px 8px;font-size:12px;font-weight:650;color:#cbd5e1;transition:.15s}
.nav-link:hover,.nav-group-toggle:hover{background:rgba(255,255,255,.08);color:white}
.nav-link.is-active{background:var(--fb);color:white;box-shadow:0 6px 14px rgba(24,119,242,.22)}
.nav-icon{display:grid;width:26px;height:26px;flex:0 0 26px;place-items:center;border-radius:8px;background:rgba(255,255,255,.06);font-size:11px}
.nav-link.is-active .nav-icon{background:rgba(255,255,255,.16)}
.nav-group{margin-top:4px}.nav-group-items{display:none;padding-left:8px}.nav-group.is-open .nav-group-items{display:block}
.nav-child{min-height:34px}.nav-child .nav-icon{width:24px;height:24px;flex-basis:24px}
.nav-chevron{transition:transform .15s}.nav-group.is-open .nav-chevron{transform:rotate(180deg)}

body.sidebar-collapsed .sidebar-copy,body.sidebar-collapsed .nav-text,body.sidebar-collapsed .nav-chevron{display:none}
body.sidebar-collapsed .sidebar-brand{justify-content:center;padding-left:8px;padding-right:8px}
body.sidebar-collapsed .sidebar-brand>a{justify-content:center}
body.sidebar-collapsed .nav-link,body.sidebar-collapsed .nav-group-toggle{justify-content:center;padding-left:4px;padding-right:4px}
body.sidebar-collapsed .nav-group-items{display:block!important;padding-left:0}
body.sidebar-collapsed .nav-group{margin-top:2px}

.school-color-stripes i{flex:1}.school-color-stripes i:nth-child(1){background:#ed1c24}.school-color-stripes i:nth-child(2){background:#ffcb08}.school-color-stripes i:nth-child(3){background:#00a651}.school-color-stripes i:nth-child(4){background:#a19bcc}.school-color-stripes i:nth-child(5){background:#231f20}

.panel-compact{border:1px solid #e2e8f0;background:white;border-radius:14px;padding:16px;box-shadow:0 4px 16px rgba(35,31,32,.045)}
.panel-title{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}
.panel-title h2{font-size:14px;font-weight:800;color:#231f20}.panel-title p{font-size:11px;color:#94a3b8;margin-top:1px}
.metric-card{border:1px solid #e2e8f0;background:white;border-radius:13px;padding:13px 14px;box-shadow:0 4px 14px rgba(35,31,32,.04)}
.metric-card span{display:block;font-size:10px;font-weight:650;color:#64748b}.metric-card strong{display:block;margin-top:5px;font-size:17px;line-height:1.1;color:#231f20}
.metric-card:nth-child(5n+1){border-top:3px solid #1877F2}.metric-card:nth-child(5n+2){border-top:3px solid #ed1c24}.metric-card:nth-child(5n+3){border-top:3px solid #ffcb08}.metric-card:nth-child(5n+4){border-top:3px solid #00a651}.metric-card:nth-child(5n+5){border-top:3px solid #a19bcc}

.input-compact{width:100%;min-height:36px;border:1px solid #dbe3ee;border-radius:9px;background:#fff;padding:7px 10px;font-size:12px;outline:none;transition:.15s}
.input-compact:focus{border-color:#1877F2;box-shadow:0 0 0 3px rgba(24,119,242,.10)}
.field-label{display:block;font-size:11px;font-weight:700;color:#475569}.field-label .input-compact{margin-top:4px}
.check-line{display:flex;align-items:center;gap:7px;font-size:12px;color:#475569}

.btn-compact{display:inline-flex;min-height:34px;align-items:center;justify-content:center;border-radius:9px;padding:6px 12px;font-size:11px;font-weight:800;transition:.15s}
.btn-primary{background:#1877F2;color:white}.btn-primary:hover{background:#1468d4}
.btn-secondary{border:1px solid #dbe3ee;background:white;color:#334155}.btn-secondary:hover{border-color:#1877F2;color:#1877F2}
.btn-success{background:#00a651;color:white}.btn-success:hover{filter:brightness(.94)}

.table-compact{min-width:100%;font-size:11px}
.table-compact thead{background:#f8fafc;color:#64748b}
.table-compact th{padding:9px 10px;text-align:left;font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.035em;white-space:nowrap}
.table-compact td{padding:9px 10px;border-top:1px solid #eef2f7;vertical-align:middle}
.table-compact tbody tr:hover{background:#fbfdff}
.empty-cell{padding:28px!important;text-align:center;color:#94a3b8;font-size:12px}

.alert-error,.alert-success,.notice-amber{border-radius:11px;padding:10px 12px;font-size:12px}
.alert-error{border:1px solid #fecaca;background:#fef2f2;color:#b91c1c}
.alert-success{border:1px solid #bbf7d0;background:#f0fdf4;color:#15803d}
.notice-amber{border:1px solid #fde68a;background:#fffbeb;color:#92400e}

.input-control{width:100%;border:1px solid #dbe3ee;border-radius:10px;padding:.65rem .8rem;outline:none;transition:.15s;background:#fff}
.input-control:focus{border-color:#1877F2;box-shadow:0 0 0 3px rgba(24,119,242,.1)}
.login-pattern{background-image:radial-gradient(circle at 20% 20%,rgba(24,119,242,.18),transparent 35%),radial-gradient(circle at 80% 70%,rgba(255,203,8,.18),transparent 32%),radial-gradient(circle at 75% 20%,rgba(0,166,81,.12),transparent 25%)}

@media(max-width:1023px){.app-sidebar{width:256px}}
@media print{
  .app-sidebar,header,footer,[data-sidebar-overlay],.print-hidden{display:none!important}
  .app-content{padding-left:0!important}.panel-compact{box-shadow:none}.bg-\[\#f5f7fb\]{background:white!important}
  main{padding:0!important}
}