﻿/* ══════════════════════════════════════════════════════════════
   student-portal-nebula.css — Nebula Theme for Student Dashboard
   ══════════════════════════════════════════════════════════════
   PURPOSE: Overrides old gray/purple palette in StudentDashboard.cshtml
            inline styles with the Nebula cyberpunk theme.
   
   LOAD ORDER: adapted-cyberpunk.css → THIS FILE
   Add to _Layout.cshtml after adapted-cyberpunk.css:
     <link href="~/css/student-portal-nebula.css" rel="stylesheet">
   
   SPECIFICITY: html[data-theme="dark"] beats inline [data-theme="dark"].
   ══════════════════════════════════════════════════════════════ */


/* ── 1. STAT CARDS & DASHBOARD SECTIONS ────────────────────── */
html[data-theme="dark"] .stat-card,
html[data-theme="dark"] .dashboard-section {
    background: rgba(255, 255, 255, 0.025);
    border-color: rgba(255, 255, 255, 0.06);
}

    html[data-theme="dark"] .stat-card:hover {
        border-color: rgba(0, 230, 118, 0.25);
        box-shadow: 0 0 20px rgba(0, 230, 118, 0.05);
    }

html[data-theme="dark"] .stat-number {
    color: #ffffff;
}

html[data-theme="dark"] .stat-label {
    color: #9ca3b8;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

html[data-theme="dark"] .section-title {
    color: #ffffff;
}


/* ── 2. ZONE LEGEND ────────────────────────────────────────── */
html[data-theme="dark"] .zone-legend,
html[data-theme="dark"] div[style*="border-radius: 8px"][style*="#f9fafb"] {
    background: rgba(255, 255, 255, 0.025) !important;
    border-color: rgba(255, 255, 255, 0.06) !important;
}


/* ── 3. POD TABLE ──────────────────────────────────────────── */
html[data-theme="dark"] .pod-table th {
    background: #0c1016;
    color: #9ca3b8;
    border-color: rgba(255, 255, 255, 0.06);
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

html[data-theme="dark"] .pod-table td {
    color: #c8cdd8;
    border-color: rgba(255, 255, 255, 0.04);
}

html[data-theme="dark"] .pod-table tr:hover td {
    background: rgba(0, 230, 118, 0.03);
}


/* ── 4. ASSIGNED POD CARDS ─────────────────────────────────── */
html[data-theme="dark"] .assigned-pod-card {
    background: rgba(255, 255, 255, 0.025);
    border-color: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.06);
}

    html[data-theme="dark"] .assigned-pod-card:hover {
        border-color: rgba(0, 230, 118, 0.3);
        box-shadow: 0 0 20px rgba(0, 230, 118, 0.05);
    }

    html[data-theme="dark"] .assigned-pod-card.overdue {
        background: rgba(255, 82, 82, 0.04);
        border-color: rgba(255, 82, 82, 0.25);
    }

    html[data-theme="dark"] .assigned-pod-card.retake-available {
        border-left-color: #00e0ff;
    }

    html[data-theme="dark"] .assigned-pod-card.in-progress {
        background: rgba(255, 234, 0, 0.04);
        border-color: rgba(255, 234, 0, 0.2);
    }

    html[data-theme="dark"] .assigned-pod-card.intervention {
        background: rgba(255, 45, 120, 0.04);
        border-color: rgba(255, 45, 120, 0.2);
    }


/* ── 5. STANDARD CARDS (Focus Areas) ──────────────────────── */
html[data-theme="dark"] .standard-card {
    background: rgba(255, 82, 82, 0.04);
    border-color: rgba(255, 82, 82, 0.15);
}

html[data-theme="dark"] .standard-code {
    color: #ff5252;
}

html[data-theme="dark"] .standard-desc {
    color: #9ca3b8;
}


/* ── 6. DAILY REVIEW SECTION ──────────────────────────────── */
html[data-theme="dark"] #dailyReviewSection {
    background: rgba(255, 255, 255, 0.025);
    border-color: rgba(255, 255, 255, 0.06);
}

html[data-theme="dark"] #reviewDueStatCard[style*="background: #fef2f2"] {
    background: rgba(255, 82, 82, 0.06) !important;
    border-color: rgba(255, 82, 82, 0.2) !important;
}


/* ── 7. REVIEW ALERT BANNER ───────────────────────────────── */
html[data-theme="dark"] #reviewAlertBanner {
    background: linear-gradient(135deg, rgba(255, 82, 82, 0.06), rgba(255, 82, 82, 0.03)) !important;
    border-color: rgba(255, 82, 82, 0.25) !important;
    box-shadow: 0 2px 12px rgba(255, 82, 82, 0.08) !important;
}

html[data-theme="dark"] #reviewAlertTitle {
    color: #ff5252 !important;
}


/* ── 8. BELL RINGER CARD ──────────────────────────────────── */
html[data-theme="dark"] #bellRingerCard {
    background: linear-gradient(135deg, rgba(0, 224, 255, 0.06), rgba(0, 224, 255, 0.03)) !important;
    border-color: rgba(0, 224, 255, 0.25) !important;
}

html[data-theme="dark"] #brCardTitle {
    color: #00e0ff !important;
}

html[data-theme="dark"] #brCardMessage {
    color: #9ca3b8 !important;
}

html[data-theme="dark"] #brCardTimer {
    color: #00e0ff !important;
}

html[data-theme="dark"] #brCardMulti {
    color: #9ca3b8 !important;
    border-top-color: rgba(0, 224, 255, 0.1) !important;
}


/* ── 9. WORD WALL CARDS ───────────────────────────────────── */
html[data-theme="dark"] .ww-card {
    border-color: rgba(255, 255, 255, 0.06);
    background: rgba(255, 255, 255, 0.025);
}

    html[data-theme="dark"] .ww-card:hover {
        border-color: rgba(0, 224, 255, 0.3);
        background: rgba(0, 224, 255, 0.04);
    }

html[data-theme="dark"] .ww-card-meta {
    color: #9ca3b8;
}

html[data-theme="dark"] .ww-sent-badge {
    background: rgba(0, 224, 255, 0.1);
    color: #00e0ff;
}


/* ── 10. DAILY AGENDA ──────────────────────────────────────── */
html[data-theme="dark"] .agenda-eq {
    background: rgba(0, 224, 255, 0.06);
    border-left-color: #00e0ff;
    color: #00e0ff;
}

html[data-theme="dark"] .agenda-eq-label {
    color: #00e0ff;
}

html[data-theme="dark"] .agenda-item {
    background: rgba(255, 255, 255, 0.015);
}

    html[data-theme="dark"] .agenda-item:nth-child(odd) {
        background: rgba(255, 255, 255, 0.025);
    }

html[data-theme="dark"] .agenda-item-title {
    color: #c8cdd8;
}

html[data-theme="dark"] .agenda-not-today {
    background: rgba(255, 234, 0, 0.06);
    color: #ffea00;
}

html[data-theme="dark"] .agenda-num {
    background: linear-gradient(135deg, #00e0ff, #00b8d4);
    color: #0c1016;
}


/* ── 11. RESTROOM PASS CARDS ──────────────────────────────── */
html[data-theme="dark"] .rp-card {
    border-color: rgba(255, 255, 255, 0.06);
    background: rgba(255, 255, 255, 0.025);
}

    html[data-theme="dark"] .rp-card:hover {
        border-color: rgba(0, 230, 118, 0.3);
        background: rgba(0, 230, 118, 0.04);
    }

html[data-theme="dark"] .rp-card-meta {
    color: #9ca3b8;
}


/* ── 12. GENERAL INLINE STYLE OVERRIDES ───────────────────── */
/* Welcome header "AdaptEd" school name */
html[data-theme="dark"] .text-muted {
    color: #4b5563 !important;
}

/* Pod score dash in table */
html[data-theme="dark"] .badge.bg-secondary {
    background: rgba(255, 255, 255, 0.06) !important;
    color: #9ca3b8 !important;
}

/* "Continue" button on assigned pods */
html[data-theme="dark"] .assigned-pod-card .btn-primary,
html[data-theme="dark"] .assigned-pod-card .btn-success {
    background: linear-gradient(135deg, #00e676, #00c853);
    border: none;
    color: #0c1016;
    font-weight: 600;
}

    html[data-theme="dark"] .assigned-pod-card .btn-primary:hover,
    html[data-theme="dark"] .assigned-pod-card .btn-success:hover {
        box-shadow: 0 0 16px rgba(0, 230, 118, 0.25);
    }

/* "In Progress" badge */
html[data-theme="dark"] .badge.bg-warning {
    background: rgba(255, 234, 0, 0.15) !important;
    color: #ffea00 !important;
}

/* Overdue badge */
html[data-theme="dark"] .badge.bg-danger {
    background: rgba(255, 82, 82, 0.15) !important;
    color: #ff5252 !important;
}


/* ── 13. NO STUDENT RECORD PAGE ───────────────────────────── */
html[data-theme="dark"] .no-student-container,
html[data-theme="dark"] .no-student-card {
    background: rgba(255, 255, 255, 0.025);
    border-color: rgba(255, 255, 255, 0.06);
    color: #c8cdd8;
}
