/* Dedicated School ERP Page Styles */
.erp-hero { background: radial-gradient(circle at 12% 10%, rgba(82, 159, 255, 0.35), transparent 40%), linear-gradient(135deg, #071632, #0a2f6b 58%, #0d3e88); color: #eaf2ff; padding: 92px 0 70px; position: relative; overflow: hidden; }
.erp-copy h1 { font-size: clamp(2rem, 5vw, 3.2rem); line-height: 1.16; margin: 0 0 16px; font-weight: 800; color: #ffffff; }
.erp-kicker { margin: 0 0 14px; font-size: 0.9rem; letter-spacing: 0; font-weight: 800; color: #28de6b; }
.erp-subtext { color: #c4d8f6; font-size: 1.05rem; line-height: 1.75; margin-bottom: 18px; }
.erp-btn-main, .erp-btn-alt { border-radius: 999px; padding: 11px 22px; font-weight: 700; }
.erp-btn-main { color: #0b2f68; }
.erp-btn-alt { border-color: rgba(234, 242, 255, 0.6); color: #eaf2ff; }
.erp-btn-alt:hover { background: rgba(255, 255, 255, 0.16); color: #ffffff; }
.erp-points { margin-top: 16px; display: grid; gap: 8px; }
.erp-points span { color: #d6e6fb; font-weight: 600; font-size: 0.92rem; }
.erp-points i { margin-right: 6px; color: #7df2ab; }
.erp-dash-shell { position: relative; background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(160, 197, 245, 0.35); border-radius: 18px; backdrop-filter: blur(7px); box-shadow: 0 28px 45px rgba(5, 16, 42, 0.4); padding: 14px; animation: floating 5.5s ease-in-out infinite; }
.erp-dash-top { display: flex; align-items: center; justify-content: space-between; padding-bottom: 10px; margin-bottom: 10px; border-bottom: 1px solid rgba(181, 210, 248, 0.35); }
.erp-dash-top h6 { color: #e3efff; font-weight: 700; }
.erp-status { font-size: 0.78rem; color: #7ff3ae; font-weight: 700; }
.erp-status i { font-size: 0.5rem; margin-right: 4px; }
.erp-dash-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.erp-kpi { background: rgba(255, 255, 255, 0.12); border: 1px solid rgba(188, 214, 248, 0.2); border-radius: 12px; padding: 12px; }
.erp-kpi p { margin: 0; color: #ccdef8; font-size: 0.84rem; }
.erp-kpi h3 { margin: 5px 0; color: #ffffff; font-weight: 800; }
.erp-kpi small { color: #b6cced; }
.erp-wide { grid-column: span 2; }
.erp-progress { height: 8px; background: rgba(220, 236, 255, 0.22); }
.erp-progress .progress-bar { background: linear-gradient(90deg, #35d188, #7df2ab); }
.erp-wave { margin-top: 8px; height: 50px; display: flex; align-items: flex-end; gap: 6px; }
.erp-wave span { flex: 1; background: linear-gradient(180deg, #6cb4ff, #2f8fff); border-radius: 6px 6px 2px 2px; animation: erpBars 2.5s ease-in-out infinite; }
.erp-wave span:nth-child(1) { height: 35%; }
.erp-wave span:nth-child(2) { height: 55%; animation-delay: 0.2s; }
.erp-wave span:nth-child(3) { height: 44%; animation-delay: 0.35s; }
.erp-wave span:nth-child(4) { height: 70%; animation-delay: 0.5s; }
.erp-wave span:nth-child(5) { height: 82%; animation-delay: 0.65s; }
.erp-wave span:nth-child(6) { height: 66%; animation-delay: 0.8s; }
@keyframes erpBars { 0%, 100% { opacity: 0.8; } 50% { opacity: 1; filter: brightness(1.2); } }
.erp-floating { position: absolute; display: flex; align-items: center; gap: 9px; background: #ffffff; border-radius: 10px; padding: 8px 10px; border: 1px solid #d6e6ff; box-shadow: 0 12px 24px rgba(7, 30, 76, 0.24); min-width: 186px; }
.erp-floating i { width: 32px; height: 32px; border-radius: 8px; background: #e8f1ff; color: #0a66ff; display: inline-flex; align-items: center; justify-content: center; }
.erp-floating strong { display: block; color: #16396f; font-size: 0.84rem; }
.erp-floating span { color: #57739d; font-size: 0.73rem; }
.erp-float-a { left: -16px; top: 24%; }
.erp-float-b { right: -18px; bottom: 12%; }
.erp-process { margin-top: 40px; }
.erp-step { background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(172, 206, 248, 0.35); border-radius: 14px; padding: 16px 14px; height: 100%; }
.erp-step span { width: 32px; height: 32px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: #08316d; background: #bde0ff; font-weight: 800; margin-bottom: 8px; }
.erp-step h6 { margin-bottom: 7px; font-weight: 800; color: #f0f6ff; }
.erp-step p { margin: 0; color: #bdd1ee; font-size: 0.9rem; line-height: 1.55; }
.erp-modules { background: linear-gradient(180deg, #f7faff 0%, #eaf1ff 100%); position: relative; overflow: hidden; }
.erp-modules::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 10% 10%, rgba(67, 145, 255, 0.15), transparent 36%), radial-gradient(circle at 90% 85%, rgba(74, 165, 255, 0.12), transparent 34%); pointer-events: none; }
.erp-module-sub { color: #56729c; }
.erp-module-card { height: 100%; background: linear-gradient(145deg, rgba(8, 35, 78, 0.9), rgba(13, 55, 116, 0.85)); border: 1px solid rgba(157, 195, 243, 0.45); border-radius: 14px; padding: 20px 18px; box-shadow: 0 14px 24px rgba(3, 18, 45, 0.24); transition: transform 0.25s ease, box-shadow 0.25s ease; backdrop-filter: blur(5px); position: relative; z-index: 1; }
.erp-module-card:hover { transform: translateY(-5px); box-shadow: 0 20px 32px rgba(3, 18, 45, 0.34); }
.erp-module-icon { width: 46px; height: 46px; border-radius: 12px; background: linear-gradient(135deg, #6cb4ff, #2f8fff); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 1.15rem; margin-bottom: 12px; }
.erp-module-card h5 { color: #edf4ff; font-weight: 800; margin-bottom: 9px; }
.erp-module-card p { margin: 0; color: #c1d6f5; line-height: 1.6; }
@media (max-width: 991.98px) { .erp-dash-grid { grid-template-columns: 1fr; } .erp-wide { grid-column: span 1; } .erp-float-a { left: 8px; top: 8px; } .erp-float-b { right: 8px; bottom: 8px; } }
@media (max-width: 575.98px) { .erp-floating { position: static; margin-top: 10px; width: 100%; } .erp-hero { padding-top: 72px; } }

@media (max-width: 767.98px) {
    .erp-hero { padding: 58px 0 48px; }
    .erp-copy h1 { font-size: clamp(2rem, 10vw, 2.7rem); }
    .erp-subtext { font-size: 0.98rem; line-height: 1.68; }
    .erp-dash-shell { padding: 10px; border-radius: 16px; animation: none; }
    .erp-floating { position: static; width: 100%; margin-top: 10px; }
    .erp-process { margin-top: 24px; }
    .erp-step,
    .erp-module-card { border-radius: 14px; }
    .erp-module-card { padding: 20px 16px; }
}
