/* =============================================================================
   SUCCESS SPACE EDU LMS — CORE DESIGN SYSTEM & FOUNDATION TOKENS
   Vanilla CSS Design System: Multi-Color Palettes, Typography, App Shell & Utilities
   ============================================================================= */

:root {
    /* --- Base Brand & Neutral Colors --- */
    --primary: #2563eb;
    --primary-hover: #1d4ed8;
    --primary-deep: #1e40af;
    --primary-soft: #eff6ff;
    --primary-ring: rgba(37, 99, 235, 0.2);

    --bg: #f8fafc;
    --surface: #ffffff;
    --surface-alt: #f1f5f9;
    --line: #e2e8f0;
    --line-subtle: #f8fafc;

    --ink: #0f172a;
    --ink-soft: #334155;
    --muted: #64748b;
    --muted-2: #94a3b8;

    /* --- Vibrant Curated Multi-Color System --- */
    /* 1. Electric Blue / Royal Indigo (Learners & Main) */
    --color-blue-50: #eff6ff;
    --color-blue-100: #dbeafe;
    --color-blue-200: #bfdbfe;
    --color-blue-500: #3b82f6;
    --color-blue-600: #2563eb;
    --color-blue-700: #1d4ed8;
    --grad-blue: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
    --grad-blue-soft: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);

    /* 2. Lush Emerald / Mint Green (Passed, Published, Active) */
    --color-emerald-50: #ecfdf5;
    --color-emerald-100: #d1fae5;
    --color-emerald-200: #a7f3d0;
    --color-emerald-500: #10b981;
    --color-emerald-600: #059669;
    --color-emerald-700: #047857;
    --grad-emerald: linear-gradient(135deg, #10b981 0%, #059669 100%);
    --grad-emerald-soft: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%);

    /* 3. Electric Violet / Royal Purple (Live Tests, Question Bank, AI) */
    --color-violet-50: #f5f3ff;
    --color-violet-100: #ede9fe;
    --color-violet-200: #ddd6fe;
    --color-violet-500: #8b5cf6;
    --color-violet-600: #7c3aed;
    --color-violet-700: #6d28d9;
    --grad-violet: linear-gradient(135deg, #8b5cf6 0%, #6d28d9 100%);
    --grad-violet-soft: linear-gradient(135deg, #f5f3ff 0%, #ede9fe 100%);

    /* 4. Radiant Amber / Sunset Orange (Submissions, Pending, High Scores) */
    --color-amber-50: #fffbeb;
    --color-amber-100: #fef3c7;
    --color-amber-200: #fde68a;
    --color-amber-500: #f59e0b;
    --color-amber-600: #d97706;
    --color-amber-700: #b45309;
    --grad-amber: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    --grad-amber-soft: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%);

    /* 5. Coral Rose / Crimson (Alerts, Proctoring, Top Milestones) */
    --color-rose-50: #fff1f2;
    --color-rose-100: #ffe4e6;
    --color-rose-200: #fecdd3;
    --color-rose-500: #f43f5e;
    --color-rose-600: #e11d48;
    --color-rose-700: #be123c;
    --grad-rose: linear-gradient(135deg, #f43f5e 0%, #be123c 100%);
    --grad-rose-soft: linear-gradient(135deg, #fff1f2 0%, #ffe4e6 100%);

    /* 6. Cyan / Sky Blue (Analytics & Insights) */
    --color-cyan-50: #f0f9ff;
    --color-cyan-100: #e0f2fe;
    --color-cyan-200: #bae6fd;
    --color-cyan-500: #06b6d4;
    --color-cyan-600: #0284c7;
    --color-cyan-700: #0369a1;
    --grad-cyan: linear-gradient(135deg, #06b6d4 0%, #0284c7 100%);
    --grad-cyan-soft: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);

    /* Semantic Aliases */
    --success: var(--color-emerald-600);
    --success-soft: var(--color-emerald-50);
    --warning: var(--color-amber-600);
    --warning-soft: var(--color-amber-50);
    --danger: var(--color-rose-600);
    --danger-soft: var(--color-rose-50);
    --info: var(--color-cyan-600);
    --info-soft: var(--color-cyan-50);

    /* Typography & Radius */
    --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --font-display: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 20px;
    --radius-full: 9999px;

    /* Elevated Shadows */
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.07), 0 2px 4px -2px rgba(0, 0, 0, 0.05);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -4px rgba(0, 0, 0, 0.05);
    --shadow-card: 0 4px 20px rgba(15, 23, 42, 0.04);
}

/* ─── Global Reset & Typography ─── */
*, *::before, *::after {
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
}

body {
    margin: 0;
    font-family: var(--font-sans);
    background-color: var(--bg);
    color: var(--ink);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
}

/* Skip link */
.skip-link {
    position: absolute;
    top: -40px;
    left: 0;
    background: var(--primary);
    color: #ffffff;
    padding: 8px 16px;
    z-index: 9999;
    border-radius: 0 0 8px 0;
    font-weight: 700;
    text-decoration: none;
    transition: top 0.2s ease;
}
.skip-link:focus {
    top: 0;
}

/* Material Symbols alignment */
.material-symbols-rounded {
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
    vertical-align: middle;
    line-height: 1;
    display: inline-block;
}

/* ─── Global Button System ─── */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 9px 18px;
    font-size: 0.84rem;
    font-weight: 750;
    border-radius: 10px;
    border: 1.5px solid transparent;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.18s cubic-bezier(0.16, 1, 0.3, 1);
    line-height: 1.25;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
}

.btn-primary {
    background: var(--grad-blue);
    color: #ffffff;
    border-color: transparent;
    box-shadow: 0 3px 10px rgba(37, 99, 235, 0.28);
}

.btn-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(37, 99, 235, 0.38);
    color: #ffffff;
}

.btn-outline {
    background: #ffffff;
    color: var(--ink-soft);
    border-color: var(--line);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
}

.btn-outline:hover {
    background: var(--surface-alt);
    border-color: var(--muted-2);
    color: var(--ink);
}

.btn-success {
    background: var(--grad-emerald);
    color: #ffffff;
    border-color: transparent;
    box-shadow: 0 3px 10px rgba(16, 185, 129, 0.28);
}
.btn-success:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(16, 185, 129, 0.38);
    color: #ffffff;
}

.btn-danger {
    background: var(--grad-rose);
    color: #ffffff;
    border-color: transparent;
    box-shadow: 0 3px 10px rgba(244, 63, 94, 0.25);
}

.btn-danger:hover {
    background: #be123c;
    color: #ffffff;
}

.btn-sm {
    padding: 6px 12px;
    font-size: 0.76rem;
    border-radius: 8px;
}

/* ─── Global Alerts ─── */
.alert {
    padding: 12px 18px;
    border-radius: 12px;
    font-size: 0.86rem;
    font-weight: 600;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.alert-success {
    background: var(--color-emerald-50);
    color: var(--color-emerald-700);
    border: 1px solid var(--color-emerald-200);
}

.alert-error,
.alert-danger {
    background: var(--color-rose-50);
    color: var(--color-rose-700);
    border: 1px solid var(--color-rose-200);
}

.alert-info {
    background: var(--color-blue-50);
    color: var(--color-blue-700);
    border: 1px solid var(--color-blue-200);
}

/* ─── Colorful KPI Card Tokens ─── */
.kpi-card--blue {
    border-color: var(--color-blue-200) !important;
    background: linear-gradient(135deg, #ffffff 0%, #f0f7ff 100%) !important;
}
.kpi-card--blue:hover {
    border-color: var(--color-blue-500) !important;
    box-shadow: 0 8px 24px rgba(37, 99, 235, 0.12) !important;
}

.kpi-card--emerald {
    border-color: var(--color-emerald-200) !important;
    background: linear-gradient(135deg, #ffffff 0%, #f0fdf4 100%) !important;
}
.kpi-card--emerald:hover {
    border-color: var(--color-emerald-500) !important;
    box-shadow: 0 8px 24px rgba(16, 185, 129, 0.12) !important;
}

.kpi-card--violet {
    border-color: var(--color-violet-200) !important;
    background: linear-gradient(135deg, #ffffff 0%, #faf5ff 100%) !important;
}
.kpi-card--violet:hover {
    border-color: var(--color-violet-500) !important;
    box-shadow: 0 8px 24px rgba(139, 92, 246, 0.12) !important;
}

.kpi-card--amber {
    border-color: var(--color-amber-200) !important;
    background: linear-gradient(135deg, #ffffff 0%, #fffbeb 100%) !important;
}
.kpi-card--amber:hover {
    border-color: var(--color-amber-500) !important;
    box-shadow: 0 8px 24px rgba(245, 158, 11, 0.12) !important;
}

.kpi-card--rose {
    border-color: var(--color-rose-200) !important;
    background: linear-gradient(135deg, #ffffff 0%, #fff1f2 100%) !important;
}
.kpi-card--rose:hover {
    border-color: var(--color-rose-500) !important;
    box-shadow: 0 8px 24px rgba(244, 63, 94, 0.12) !important;
}

.kpi-card--cyan {
    border-color: var(--color-cyan-200) !important;
    background: linear-gradient(135deg, #ffffff 0%, #f0f9ff 100%) !important;
}
.kpi-card--cyan:hover {
    border-color: var(--color-cyan-500) !important;
    box-shadow: 0 8px 24px rgba(6, 182, 212, 0.12) !important;
}

/* ─── Responsive Table Wrapper ─── */
.table-responsive {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: 12px;
    border: 1px solid var(--line);
    background: #ffffff;
}

.table-responsive::-webkit-scrollbar {
    height: 6px;
}
.table-responsive::-webkit-scrollbar-thumb {
    background: var(--muted-2);
    border-radius: 999px;
}
.table-responsive::-webkit-scrollbar-track {
    background: var(--surface-alt);
}

/* =============================================================================
   UNIVERSAL PROJECT-WIDE MOBILE RESPONSIVENESS & ORIENTATION SHIELD
   Applies across all admin, student, auth, and common LMS views (≤ 768px)
   ============================================================================= */

@media (max-width: 768px) {
    /* 1. Global Viewport & Container Containment */
    html, body {
        width: 100% !important;
        max-width: 100vw !important;
        overflow-x: hidden !important;
        position: relative !important;
    }

    .container,
    .sh-container,
    .admin-page-container,
    .edunova-container,
    .orivex-profile-wrap {
        width: 100% !important;
        max-width: 100% !important;
        padding-left: 10px !important;
        padding-right: 10px !important;
        box-sizing: border-box !important;
    }

    /* 2. Headings & Fluid Typography */
    h1, .dashboard-head h1, .page-title h1 {
        font-size: 1.45rem !important;
        line-height: 1.25 !important;
        word-break: break-word !important;
    }

    h2, .dashboard-head h2, .panel-head h2 {
        font-size: 1.28rem !important;
        line-height: 1.25 !important;
        word-break: break-word !important;
    }

    h3, .panel-head h3 {
        font-size: 1.05rem !important;
        line-height: 1.3 !important;
    }

    .dashboard-head {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 12px !important;
        margin-bottom: 14px !important;
    }

    .dashboard-actions,
    .sh-score-actions {
        display: flex !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        gap: 8px !important;
        width: 100% !important;
    }

    .dashboard-actions .btn,
    .sh-score-actions .btn {
        flex: 1 1 auto !important;
        min-height: 40px !important;
        justify-content: center !important;
    }

    /* 3. Multi-Column Forms & Filter Rows Collapse */
    .form-row.two,
    .form-row.three,
    .form-row.four,
    .form-row {
        display: flex !important;
        flex-direction: column !important;
        gap: 12px !important;
        width: 100% !important;
    }

    .input-group {
        width: 100% !important;
        min-width: 0 !important;
    }

    /* Prevent iOS Safari 16px zoom bug on form focus */
    input[type="text"],
    input[type="search"],
    input[type="email"],
    input[type="password"],
    input[type="number"],
    input[type="tel"],
    input[type="date"],
    select,
    textarea {
        font-size: 16px !important;
        min-height: 42px !important;
        box-sizing: border-box !important;
    }

    /* 4. Panels & Cards */
    .panel-card,
    .table-card,
    .sh-panel,
    .form-card {
        padding: 16px 14px !important;
        border-radius: 16px !important;
        box-sizing: border-box !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    /* 5. Tables & Horizontal Scroll Container */
    .table-wrap,
    .table-responsive,
    .orivex-access-table-wrap {
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        border-radius: 12px !important;
        box-sizing: border-box !important;
    }

    .table-wrap table,
    .table-responsive table,
    .orivex-access-table-wrap table {
        min-width: 540px !important;
    }

    /* 6. Toggle & Filter Buttons */
    .toggle-row,
    .filter-pills,
    .dashboard-tab-list {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 6px !important;
        width: 100% !important;
    }

    .toggle-row .btn,
    .dashboard-tab {
        flex: 1 1 auto !important;
        text-align: center !important;
        justify-content: center !important;
    }

    /* 7. Dropdown & Modals */
    .account-dropdown,
    .notification-dropdown {
        position: fixed !important;
        top: 58px !important;
        left: 10px !important;
        right: 10px !important;
        width: auto !important;
        max-width: calc(100vw - 20px) !important;
        box-shadow: 0 16px 40px rgba(15, 23, 42, 0.18) !important;
        border-radius: 16px !important;
        z-index: 1060 !important;
    }

    /* 8. Touch Targets */
    .btn, button, a.side-link, .nav-item, .exam-option-item {
        -webkit-tap-highlight-color: transparent !important;
        touch-action: manipulation !important;
    }
}

@media (max-width: 480px) {
    .container,
    .sh-container,
    .admin-page-container,
    .edunova-container,
    .orivex-profile-wrap {
        padding-left: 8px !important;
        padding-right: 8px !important;
    }

    .panel-card,
    .table-card,
    .sh-panel,
    .form-card {
        padding: 14px 10px !important;
        border-radius: 14px !important;
    }

    .dashboard-actions .btn,
    .sh-score-actions .btn {
        width: 100% !important;
    }
}

/* =============================================================================
   Universal Global Watermark Styling (High-Fidelity, Click-Through Overlay)
   ============================================================================= */
.site-watermark-layer,
.exam-watermark-layer,
.exam-security-watermark {
    display: block !important;
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    z-index: 990 !important;
    pointer-events: none !important;
    user-select: none !important;
    -webkit-user-select: none !important;
    opacity: var(--watermark-opacity, 0.18) !important;
    background-image: url('../img/watermark.png') !important;
    background-repeat: no-repeat !important;
    background-position: center center !important;
    background-size: min(54vw, 420px) auto !important;
    filter: none !important;
    mix-blend-mode: normal !important;
}

body.auth-page .site-watermark-layer,
body.orivex-login-page .site-watermark-layer,
body.orivex-signup-page .site-watermark-layer,
body.orivex-forgot-page .site-watermark-layer,
body.login-auth-page .site-watermark-layer {
    opacity: var(--watermark-opacity, 0.22) !important;
    background-size: min(58vw, 380px) auto !important;
}

body.exam-mode .site-watermark-layer,
body.exam-mode .exam-watermark-layer,
body.exam-mode .exam-security-watermark {
    z-index: 999 !important;
    opacity: var(--watermark-opacity, 0.24) !important;
    background-size: min(65vw, 460px) auto !important;
}

@media (max-width: 768px) {
    .site-watermark-layer,
    .exam-watermark-layer,
    .exam-security-watermark {
        background-size: min(78vw, 320px) auto !important;
        opacity: var(--watermark-opacity, 0.20) !important;
    }

    body.auth-page .site-watermark-layer,
    body.orivex-login-page .site-watermark-layer,
    body.login-auth-page .site-watermark-layer {
        background-size: min(80vw, 300px) auto !important;
        opacity: var(--watermark-opacity, 0.22) !important;
    }
}

@media (max-width: 480px) {
    .site-watermark-layer,
    .exam-watermark-layer,
    .exam-security-watermark {
        background-size: min(88vw, 270px) auto !important;
        opacity: var(--watermark-opacity, 0.22) !important;
    }
}