/* ==========================================================================
   DIAMOND PUBLIC SCHOOL, KHERLI (DPS KHERLI)
   Principal & Management Portal - Animated School ERP Dashboard Background Engine
   ========================================================================== */

/* 1. Global Reset & Body Background Override */
body.login-page-bg.principal-bg-theme {
    position: relative;
    min-height: 100vh;
    background-color: #050A14 !important;
    background-image: none !important;
    overflow-x: hidden;
}

/* 2. Main Background Fixed Canvas */
.principal-bg-canvas {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
    background: radial-gradient(circle at 50% 40%, #0B1528 0%, #050A14 75%, #020409 100%);
}

/* 3. Ambient Dynamic Gradient Mesh */
.bg-gradient-mesh {
    position: absolute;
    top: -25%;
    left: -25%;
    width: 150%;
    height: 150%;
    background: 
        radial-gradient(circle at 20% 25%, rgba(30, 58, 110, 0.40) 0%, transparent 45%),
        radial-gradient(circle at 80% 30%, rgba(183, 138, 52, 0.10) 0%, transparent 40%),
        radial-gradient(circle at 50% 85%, rgba(15, 30, 60, 0.55) 0%, transparent 50%),
        radial-gradient(circle at 85% 75%, rgba(56, 189, 248, 0.12) 0%, transparent 45%);
    filter: blur(50px);
    animation: auraMeshRotate 28s ease-in-out infinite alternate;
}

@keyframes auraMeshRotate {
    0% { transform: rotate(0deg) scale(1); }
    50% { transform: rotate(5deg) scale(1.04); }
    100% { transform: rotate(-4deg) scale(0.97); }
}

/* 4. Soft Window Lighting Beam */
.bg-window-light {
    position: absolute;
    top: -10%;
    right: 8%;
    width: 650px;
    height: 850px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.04) 0%, rgba(56, 189, 248, 0.02) 40%, transparent 75%);
    clip-path: polygon(25% 0, 100% 0, 75% 100%, 0% 100%);
    filter: blur(15px);
    animation: windowRayBreathe 14s ease-in-out infinite alternate;
    opacity: 0.65;
}

@keyframes windowRayBreathe {
    0% { opacity: 0.45; transform: translateY(0) scaleX(1); }
    100% { opacity: 0.80; transform: translateY(18px) scaleX(1.06); }
}

/* 5. ERP Dashboard Left & Right Flanks Container */
.erp-dashboard-grid {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    display: flex;
    justify-content: space-between;
    padding: 24px 3vw;
    box-sizing: border-box;
}

.erp-left-flank,
.erp-right-flank {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 16px;
    width: 320px;
    max-width: 25vw;
}

/* 6. Base Glassmorphism ERP Widget Card (15% - 35% Translucency) */
.erp-widget-card {
    background: rgba(11, 20, 38, 0.32);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 16px;
    padding: 14px 16px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.1);
    color: #E2E8F0;
    transition: transform 0.4s ease, border-color 0.4s ease, background 0.4s ease;
}

.erp-widget-card:hover {
    background: rgba(15, 26, 48, 0.48);
    border-color: rgba(56, 189, 248, 0.28);
}

/* Header inside Card */
.erp-widget-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
    padding-bottom: 6px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.erp-widget-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #94A3B8;
}

.erp-widget-title i {
    font-size: 14px;
    color: #38BDF8;
}

.erp-status-pill {
    font-size: 9.5px;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 10px;
    background: rgba(56, 189, 248, 0.12);
    color: #38BDF8;
    border: 1px solid rgba(56, 189, 248, 0.25);
    letter-spacing: 0.04em;
    display: flex;
    align-items: center;
    gap: 4px;
}

.erp-status-pill.gold {
    background: rgba(183, 138, 52, 0.15);
    color: #E4C77E;
    border-color: rgba(183, 138, 52, 0.3);
}

.erp-status-pill.green {
    background: rgba(34, 197, 94, 0.12);
    color: #4ADE80;
    border-color: rgba(34, 197, 94, 0.25);
}

.pulse-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: #22C55E;
    box-shadow: 0 0 6px #22C55E;
    animation: liveDotPulse 2s infinite;
}

@keyframes liveDotPulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.4; transform: scale(0.85); }
}

/* 7. MODULE 1: SCHOOL ADMIN */
.card-school-admin .admin-metrics {
    display: flex;
    justify-content: space-between;
    font-size: 11.5px;
}

.admin-metric-item {
    display: flex;
    flex-direction: column;
}

.admin-metric-label {
    font-size: 10px;
    color: #64748B;
    font-weight: 500;
}

.admin-metric-val {
    font-weight: 700;
    color: #F8FAFC;
    font-size: 12.5px;
}

/* 8. MODULE 2: STUDENT RECORDS */
.card-student-records .student-mini-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.student-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 4px 8px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 6px;
    font-size: 11px;
}

.student-row-left {
    display: flex;
    align-items: center;
    gap: 8px;
}

.student-avatar {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: linear-gradient(135deg, #1E3A8A, #3B82F6);
    color: #FFFFFF;
    font-size: 9px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}

.student-name {
    font-weight: 600;
    color: #E2E8F0;
}

.student-roll {
    font-size: 10px;
    color: #64748B;
}

/* 9. MODULE 3: ATTENDANCE MANAGEMENT */
.card-attendance .attendance-stats {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    margin-bottom: 8px;
}

.attendance-perc {
    font-size: 20px;
    font-weight: 800;
    color: #38BDF8;
    line-height: 1;
}

.attendance-subtext {
    font-size: 10.5px;
    color: #94A3B8;
}

.erp-progress-bg {
    width: 100%;
    height: 6px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    overflow: hidden;
    position: relative;
}

.erp-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #3B82F6 0%, #38BDF8 100%);
    border-radius: 10px;
    width: 94%;
    animation: attendanceFill 4s ease-out infinite alternate;
}

@keyframes attendanceFill {
    0% { width: 80%; }
    100% { width: 96%; }
}

/* 10. MODULE 4: RFID SMART ID CARD */
.card-rfid .rfid-card-frame {
    position: relative;
    background: linear-gradient(135deg, rgba(30, 58, 138, 0.4), rgba(15, 23, 42, 0.6));
    border: 1px solid rgba(56, 189, 248, 0.25);
    border-radius: 10px;
    padding: 10px 12px;
    overflow: hidden;
}

.rfid-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 6px;
}

.rfid-chip {
    width: 18px;
    height: 14px;
    background: linear-gradient(135deg, #E4C77E, #B78A34);
    border-radius: 3px;
}

.rfid-title {
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.1em;
    color: #94A3B8;
}

.rfid-body {
    display: flex;
    align-items: center;
    gap: 10px;
}

.rfid-avatar-ph {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    color: #38BDF8;
}

.rfid-details {
    font-size: 10.5px;
}

.rfid-student-name {
    font-weight: 700;
    color: #F8FAFC;
}

.rfid-student-class {
    font-size: 9.5px;
    color: #94A3B8;
}

/* Laser Scanning Beam Sweep */
.rfid-laser-beam {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg, transparent, #38BDF8, #60A5FA, transparent);
    box-shadow: 0 0 10px #38BDF8;
    animation: laserScanSweep 3s ease-in-out infinite;
}

@keyframes laserScanSweep {
    0% { top: 0%; opacity: 0.2; }
    50% { top: 90%; opacity: 1; }
    100% { top: 0%; opacity: 0.2; }
}

/* 11. MODULE 5: FEE MANAGEMENT */
.card-fee .fee-stats-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}

.fee-amount {
    font-size: 15px;
    font-weight: 800;
    color: #E4C77E;
}

.fee-collected-lbl {
    font-size: 10px;
    color: #64748B;
}

.fee-chart-bars {
    display: flex;
    align-items: flex-end;
    gap: 6px;
    height: 28px;
}

.fee-bar {
    flex: 1;
    background: rgba(183, 138, 52, 0.2);
    border-top: 2px solid #E4C77E;
    border-radius: 2px 2px 0 0;
    animation: barHeightGrow 3s ease-in-out infinite alternate;
}

.fee-bar-1 { height: 75%; animation-delay: 0s; }
.fee-bar-2 { height: 90%; animation-delay: 0.5s; }
.fee-bar-3 { height: 60%; animation-delay: 1s; }
.fee-bar-4 { height: 95%; animation-delay: 1.5s; }

@keyframes barHeightGrow {
    0% { transform: scaleY(0.7); }
    100% { transform: scaleY(1); }
}

/* 12. MODULE 6: ACADEMIC 2026 */
.card-academic .academic-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 11px;
}

.academic-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.academic-label { color: #94A3B8; }
.academic-val { font-weight: 700; color: #F8FAFC; }

/* 13. MODULE 7: TEACHERS & STAFF */
.card-teachers .teachers-grid {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 11px;
}

.teachers-count {
    font-size: 16px;
    font-weight: 800;
    color: #4ADE80;
}

/* 14. MODULE 8: CLASSES & EXAMINATIONS */
.card-classes .classes-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

.class-pill {
    font-size: 10px;
    font-weight: 600;
    padding: 3px 8px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 6px;
    color: #CBD5E1;
}

/* 15. Widget Flank Floating Keyframes */
.float-left-1 { animation: erpFloatLeft 11s ease-in-out infinite alternate; }
.float-left-2 { animation: erpFloatLeft 13s ease-in-out infinite alternate 1s; }
.float-left-3 { animation: erpFloatLeft 10s ease-in-out infinite alternate 2s; }
.float-left-4 { animation: erpFloatLeft 14s ease-in-out infinite alternate 0.5s; }

.float-right-1 { animation: erpFloatRight 12s ease-in-out infinite alternate; }
.float-right-2 { animation: erpFloatRight 10s ease-in-out infinite alternate 1.5s; }
.float-right-3 { animation: erpFloatRight 14s ease-in-out infinite alternate 0.5s; }
.float-right-4 { animation: erpFloatRight 11s ease-in-out infinite alternate 2s; }

@keyframes erpFloatLeft {
    0% { transform: translateY(0px) translateX(0px); }
    100% { transform: translateY(-12px) translateX(4px); }
}

@keyframes erpFloatRight {
    0% { transform: translateY(0px) translateX(0px); }
    100% { transform: translateY(12px) translateX(-4px); }
}

/* 16. Floating Light Particles */
.particles-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.bg-particle {
    position: absolute;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255,255,255,0.7) 0%, rgba(56,189,248,0.3) 60%, transparent 100%);
    box-shadow: 0 0 8px rgba(56, 189, 248, 0.4);
    opacity: 0;
    animation: particleDrift 16s linear infinite;
}

.particle-p1 { width: 4px; height: 4px; left: 18%; animation-delay: 0s; }
.particle-p2 { width: 5px; height: 5px; left: 38%; animation-delay: 3s; }
.particle-p3 { width: 3px; height: 3px; left: 52%; animation-delay: 6s; }
.particle-p4 { width: 5px; height: 5px; left: 72%; animation-delay: 2s; }
.particle-p5 { width: 4px; height: 4px; left: 85%; animation-delay: 7s; }

@keyframes particleDrift {
    0% { transform: translateY(105vh) translateX(0); opacity: 0; }
    20% { opacity: 0.5; }
    80% { opacity: 0.5; }
    100% { transform: translateY(-5vh) translateX(20px); opacity: 0; }
}

/* 17. Dark Soft Overlay (Ensures 100% Contrast & Unobstructed Login Card) */
.bg-soft-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(ellipse at center, rgba(5, 10, 20, 0.55) 0%, rgba(5, 10, 20, 0.82) 70%, rgba(2, 4, 9, 0.94) 100%);
    z-index: 3;
}

/* 18. Elevating Login Wrapper & Card */
.principal-bg-theme .login-wrapper-inst {
    position: relative;
    z-index: 10;
}

.principal-bg-theme .login-card-inst {
    background: rgba(255, 255, 255, 0.97) !important;
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border: 1px solid rgba(255, 255, 255, 0.85) !important;
    box-shadow: 
        0 30px 60px -15px rgba(0, 0, 0, 0.6), 
        0 0 0 1px rgba(183, 138, 52, 0.2),
        0 12px 35px rgba(11, 21, 40, 0.3) !important;
    transition: transform 0.3s ease, box-shadow 0.3s ease !important;
}

.principal-bg-theme .login-card-inst:hover {
    transform: translateY(-3px);
    box-shadow: 
        0 35px 70px -15px rgba(0, 0, 0, 0.7), 
        0 0 0 1px rgba(183, 138, 52, 0.35),
        0 18px 45px rgba(11, 21, 40, 0.4) !important;
}

/* 19. Responsive Media Queries */
@media (max-width: 1399px) {
    .erp-left-flank, .erp-right-flank {
        width: 270px;
    }
    .erp-widget-card {
        padding: 12px 14px;
        margin-bottom: 12px;
    }
}

@media (max-width: 1199px) {
    .erp-dashboard-grid {
        padding: 16px 2vw;
    }
    .erp-left-flank, .erp-right-flank {
        width: 240px;
    }
    .card-classes, .card-teachers {
        display: none;
    }
}

@media (max-width: 991px) {
    .erp-left-flank, .erp-right-flank {
        width: 200px;
        opacity: 0.7;
    }
    .card-academic, .card-student-records {
        display: none;
    }
}

@media (max-width: 767px) {
    .erp-dashboard-grid {
        display: none;
    }
    .bg-window-light {
        width: 320px;
        height: 500px;
        right: -25%;
    }
}

/* 20. Accessibility: Reduced Motion Support */
@media (prefers-reduced-motion: reduce) {
    .bg-gradient-mesh,
    .bg-window-light,
    .erp-widget-card,
    .erp-progress-fill,
    .rfid-laser-beam,
    .fee-bar,
    .pulse-dot,
    .bg-particle {
        animation: none !important;
    }
}