/* ============================================================
   view_materials.css — Premium User-Facing Content Viewer
   ============================================================ */

/* ---- Page Wrapper ---- */
.vm-page {
    background: #F1F5F9;
    min-height: 100vh;
}

/* ============================================================
   HEADER — theme color overrides for page-header
   ============================================================ */
.theme-sky .vm-header-theme {
    background: linear-gradient(135deg, #0C4A6E 0%, #0369A1 40%, #0EA5E9 80%, #38BDF8 100%);
    box-shadow: 0 20px 60px rgba(14, 165, 233, 0.28);
}

.theme-blue .vm-header-theme {
    background: linear-gradient(135deg, #1E1B4B 0%, #1E3A8A 40%, #1D4ED8 80%, #60A5FA 100%);
    box-shadow: 0 20px 60px rgba(29, 78, 216, 0.28);
}

.theme-green .vm-header-theme {
    background: linear-gradient(135deg, #052e16 0%, #14532D 40%, #15803D 80%, #4ADE80 100%);
    box-shadow: 0 20px 60px rgba(21, 128, 61, 0.28);
}

.theme-purple .vm-header-theme {
    background: linear-gradient(135deg, #2E1065 0%, #5B21B6 40%, #7C3AED 80%, #A78BFA 100%);
    box-shadow: 0 20px 60px rgba(124, 58, 237, 0.28);
}

.theme-indigo .vm-header-theme {
    background: linear-gradient(135deg, #1E1B4B 0%, #3730A3 40%, #4F46E5 80%, #818CF8 100%);
    box-shadow: 0 20px 60px rgba(79, 70, 229, 0.28);
}

.theme-amber .vm-header-theme {
    background: linear-gradient(135deg, #431407 0%, #B45309 40%, #D97706 80%, #FCD34D 100%);
    box-shadow: 0 20px 60px rgba(217, 119, 6, 0.28);
}

/* Back button hover per theme */
.theme-sky .back-button:hover {
    border-color: #0EA5E9;
    color: #0369A1 !important;
}

.theme-blue .back-button:hover {
    border-color: #1D4ED8;
    color: #1E3A8A !important;
}

.theme-green .back-button:hover {
    border-color: #15803D;
    color: #14532D !important;
}

.theme-purple .back-button:hover {
    border-color: #7C3AED;
    color: #5B21B6 !important;
}

.theme-indigo .back-button:hover {
    border-color: #4F46E5;
    color: #3730A3 !important;
}

.theme-amber .back-button:hover {
    border-color: #D97706;
    color: #B45309 !important;
}


/* ============================================================
   BODY AREA
   ============================================================ */
.vm-body {
    padding: 16px 16px 60px;
}

/* ---- Nav Row ---- */
.vm-nav-row {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 28px;
    flex-wrap: wrap;
}

.vm-back-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 22px;
    background: white;
    border: 1.5px solid #E5E7EB;
    border-radius: 12px;
    color: #374151;
    font-weight: 700;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.25s;
    text-decoration: none;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    white-space: nowrap;
}

.vm-back-btn:hover {
    background: #F9FAFB;
    transform: translateX(3px);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
}

/* Theme back button hover accent */
.theme-sky .vm-back-btn:hover {
    border-color: #0EA5E9;
    color: #0369A1;
}

.theme-blue .vm-back-btn:hover {
    border-color: #1D4ED8;
    color: #1E3A8A;
}

.theme-green .vm-back-btn:hover {
    border-color: #15803D;
    color: #14532D;
}

.theme-purple .vm-back-btn:hover {
    border-color: #7C3AED;
    color: #5B21B6;
}

.theme-indigo .vm-back-btn:hover {
    border-color: #4F46E5;
    color: #3730A3;
}

.theme-amber .vm-back-btn:hover {
    border-color: #D97706;
    color: #B45309;
}

/* ---- Search Box ---- */
.vm-search-box {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 12px;
    background: white;
    border: 1.5px solid #E5E7EB;
    border-radius: 12px;
    padding: 12px 18px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    transition: border-color 0.25s, box-shadow 0.25s;
    min-width: 220px;
}

.vm-search-box:focus-within {
    border-color: #6366F1;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.08);
}

.vm-search-box i {
    color: #9CA3AF;
    font-size: 16px;
}

.vm-search-box input {
    flex: 1;
    border: none;
    outline: none;
    font-size: 14px;
    font-family: inherit;
    color: #1F2937;
    background: transparent;
    direction: rtl;
    text-align: right;
}

.vm-search-box input::placeholder {
    color: #9CA3AF;
}

/* ============================================================
   MATERIALS GRID
   ============================================================ */
.vm-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 22px;
}

/* ---- Card ---- */
.vm-card {
    background: white;
    border-radius: 20px;
    border: 1px solid #E5E7EB;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    position: relative;
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1),
        box-shadow 0.35s ease,
        border-color 0.35s ease;
}

/* Entrance animation */
@keyframes cardIn {
    from {
        opacity: 0;
        transform: translateY(18px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.vm-animate-in {
    animation: cardIn 0.5s ease both;
}

/* Card Shine */
.vm-card-shine {
    position: absolute;
    top: 0;
    left: -100%;
    width: 60%;
    height: 100%;
    background: linear-gradient(105deg, transparent 40%, rgba(255, 255, 255, 0.35) 50%, transparent 60%);
    transition: left 0.55s ease;
    z-index: 1;
    pointer-events: none;
}

.vm-card:hover .vm-card-shine {
    left: 150%;
}

/* Card hover states per theme */
.vm-card:hover {
    transform: translateY(-8px);
}

/* إبراز المادة القادمة من رابط المشاركة مؤقتاً فقط. */
.vm-share-focus {
    animation: vmShareFocus 0.9s ease-in-out 4;
    border-color: #0EA5E9;
}

@keyframes vmShareFocus {
    0%, 100% {
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04);
    }
    50% {
        box-shadow: 0 0 0 5px rgba(14, 165, 233, 0.18), 0 18px 42px rgba(14, 165, 233, 0.25);
    }
}

.theme-sky .vm-card:hover {
    box-shadow: 0 20px 50px rgba(14, 165, 233, 0.12);
    border-color: rgba(14, 165, 233, 0.3);
}

.theme-blue .vm-card:hover {
    box-shadow: 0 20px 50px rgba(29, 78, 216, 0.12);
    border-color: rgba(29, 78, 216, 0.3);
}

.theme-green .vm-card:hover {
    box-shadow: 0 20px 50px rgba(21, 128, 61, 0.12);
    border-color: rgba(21, 128, 61, 0.3);
}

.theme-purple .vm-card:hover {
    box-shadow: 0 20px 50px rgba(124, 58, 237, 0.12);
    border-color: rgba(124, 58, 237, 0.3);
}

.theme-indigo .vm-card:hover {
    box-shadow: 0 20px 50px rgba(79, 70, 229, 0.12);
    border-color: rgba(79, 70, 229, 0.3);
}

.theme-amber .vm-card:hover {
    box-shadow: 0 20px 50px rgba(217, 119, 6, 0.12);
    border-color: rgba(217, 119, 6, 0.3);
}

/* Top accent line */
.vm-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    transform: scaleX(0);
    transform-origin: right;
    transition: transform 0.4s ease;
}

.vm-card:hover::before {
    transform: scaleX(1);
    transform-origin: left;
}

.theme-sky .vm-card::before {
    background: linear-gradient(90deg, #0369A1, #38BDF8);
}

.theme-blue .vm-card::before {
    background: linear-gradient(90deg, #1E3A8A, #60A5FA);
}

.theme-green .vm-card::before {
    background: linear-gradient(90deg, #14532D, #4ADE80);
}

.theme-purple .vm-card::before {
    background: linear-gradient(90deg, #5B21B6, #A78BFA);
}

.theme-indigo .vm-card::before {
    background: linear-gradient(90deg, #3730A3, #818CF8);
}

.theme-amber .vm-card::before {
    background: linear-gradient(90deg, #B45309, #FCD34D);
}

/* ---- Card Head ---- */
.vm-card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: 24px 22px 0;
}

.vm-card-head-tags {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 7px;
}

.vm-file-type {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    border-radius: 50px;
    padding: 5px 10px;
    font-size: 11px;
    font-weight: 800;
    line-height: 1;
    white-space: nowrap;
    border: 1px solid transparent;
}

.vm-file-type i {
    font-size: 13px;
}

.vm-file-type-pdf {
    color: #B91C1C;
    background: #FEF2F2;
    border-color: #FECACA;
}

.vm-file-type-word {
    color: #1D4ED8;
    background: #EFF6FF;
    border-color: #BFDBFE;
}

.vm-file-type-powerpoint {
    color: #C2410C;
    background: #FFF7ED;
    border-color: #FED7AA;
}

.vm-file-type-excel {
    color: #15803D;
    background: #F0FDF4;
    border-color: #BBF7D0;
}

.vm-file-type-image {
    color: #7C3AED;
    background: #FAF5FF;
    border-color: #E9D5FF;
}

.vm-file-type-archive {
    color: #A16207;
    background: #FEFCE8;
    border-color: #FEF08A;
}

.vm-file-type-video {
    color: #6D28D9;
    background: #F5F3FF;
    border-color: #DDD6FE;
}

.vm-file-type-link,
.vm-file-type-generic {
    color: #475569;
    background: #F8FAFC;
    border-color: #CBD5E1;
}

.vm-icon {
    width: 60px;
    height: 60px;
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    transition: transform 0.35s ease;
    flex-shrink: 0;
}

.vm-card:hover .vm-icon {
    transform: scale(1.12) rotate(-6deg);
}

.ic-book {
    background: linear-gradient(135deg, #DBEAFE, #EFF6FF);
    color: #1D4ED8;
}

.ic-model {
    background: linear-gradient(135deg, #DCFCE7, #F0FDF4);
    color: #15803D;
}

.ic-summary {
    background:        linear-gradient(135deg, #FFEDD5, #FFF7ED);
    color: #C2410C;    
}

.ic-explanation {
    background: linear-gradient(135deg, #CCFBF1, #F0FDFA);
    color: #0F766E;
}

.ic-default {

    background: linear-gradient(135deg, #F3E8FF, #FAF5FF);
    color: #7C3AED;
}

.ic-video {
    background: linear-gradient(135deg, #FEF3C7, #FFFBEB);
    color: #D97706;
}

.ic-exam {
    background: linear-gradient(135deg, #FEF3C7, #FFFBEB);
    color: #D97706;
}

.vm-year-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: #F1F5F9;
    color: #64748B;
    border-radius: 50px;
    padding: 5px 12px;
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
}

/* ---- Card Body ---- */
.vm-card-body {
    padding: 16px 22px 12px;
    flex: 1;
}

.vm-card-title {
    font-size: 16px;
    font-weight: 800;
    color: #1F2937;
    line-height: 1.4;
    margin: 0 0 8px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.vm-card-note {
    font-size: 13px;
    color: #6B7280;
    line-height: 1.7;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.vm-exam-type {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: #FFFBEB;
    color: #D97706;
    border: 1px solid #FDE68A;
    border-radius: 50px;
    padding: 4px 12px;
    font-size: 12px;
    font-weight: 700;
    margin-top: 6px;
}

/* ---- Explanation course metadata ---- */
.vm-explanation-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-top: 12px;
    color: #0F766E;
    font-size: 11px;
    font-weight: 700;
}
.vm-explanation-meta span {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 5px 8px;
    border-radius: 7px;
    background: #F0FDFA;
    border: 1px solid #CCFBF1;
}
.vm-explanation-meta i { font-size: 12px; }

/* ---- Related explanation lessons ---- */
.vm-lesson-details {
    margin: 0 18px 14px;
    border: 1px solid #DDE8F5;
    border-radius: 12px;
    background: #F8FBFF;
    overflow: hidden;
}

.vm-lesson-details summary {
    cursor: pointer;
    list-style: none;
    padding: 11px 13px;
    color: #1D4ED8;
    font-size: 13px;
    font-weight: 800;
}

.vm-lesson-details summary::-webkit-details-marker { display: none; }
.vm-lesson-details summary i { margin-left: 6px; }
.vm-lesson-list { border-top: 1px solid #DDE8F5; }
.vm-lesson-item {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 10px 12px;
    color: #334155;
    text-decoration: none;
    border-bottom: 1px solid #E8EEF6;
}
.vm-lesson-item:last-child { border-bottom: 0; }
.vm-lesson-item:hover { background: #EFF6FF; color: #1D4ED8; }
.vm-lesson-number {
    width: 26px;
    height: 26px;
    flex: 0 0 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: #1D4ED8;
    background: #DBEAFE;
    font-size: 11px;
    font-weight: 800;
}
.vm-lesson-content { min-width: 0; flex: 1; display: grid; gap: 2px; }
.vm-lesson-content strong { font-size: 12px; }
.vm-lesson-content small { color: #64748B; font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vm-lesson-meta { display: flex; gap: 10px; color: #64748B; font-size: 10px; }
.vm-lesson-link-icon { color: #1D4ED8; }
.vm-lesson-actions { display: flex; align-items: center; gap: 8px; min-width: 0; }
.vm-lesson-only-label { flex: 1; color: #0F766E; font-size: 12px; font-weight: 800; }
.vm-course-link {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 9px 10px;
    color: #0F766E;
    border: 1px solid #99F6E4;
    border-radius: 9px;
    background: #F0FDFA;
    font-size: 11px;
    font-weight: 800;
    text-decoration: none;
    white-space: nowrap;
}
.vm-course-link:hover { color: #115E59; background: #CCFBF1; }

/* ---- Card Foot ---- */
.vm-card-foot {
    padding: 14px 22px 20px;
}

.vm-btn-primary {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    width: 100%;
    padding: 13px;
    border-radius: 12px;
    font-weight: 700;
    font-size: 14px;
    color: white !important;
    text-decoration: none !important;
    transition: all 0.25s;
    cursor: pointer;
}

.theme-sky .vm-btn-primary {
    background: linear-gradient(135deg, #0369A1, #0EA5E9);
    box-shadow: 0 4px 14px rgba(14, 165, 233, 0.25);
}

.theme-blue .vm-btn-primary {
    background: linear-gradient(135deg, #1E3A8A, #1D4ED8);
    box-shadow: 0 4px 14px rgba(29, 78, 216, 0.25);
}

.theme-green .vm-btn-primary {
    background: linear-gradient(135deg, #14532D, #15803D);
    box-shadow: 0 4px 14px rgba(21, 128, 61, 0.25);
}

.theme-purple .vm-btn-primary {
    background: linear-gradient(135deg, #5B21B6, #7C3AED);
    box-shadow: 0 4px 14px rgba(124, 58, 237, 0.25);
}

.theme-indigo .vm-btn-primary {
    background: linear-gradient(135deg, #3730A3, #4F46E5);
    box-shadow: 0 4px 14px rgba(79, 70, 229, 0.25);
}

.theme-amber .vm-btn-primary {
    background: linear-gradient(135deg, #B45309, #D97706);
    box-shadow: 0 4px 14px rgba(217, 119, 6, 0.25);
}

.vm-btn-primary:hover {
    transform: translateY(-2px);
    filter: brightness(1.08);
}

.vm-btn-exam {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    width: 100%;
    padding: 13px;
    border-radius: 12px;
    font-weight: 700;
    font-size: 14px;
    color: white !important;
    text-decoration: none !important;
    background: linear-gradient(135deg, #B45309, #F59E0B);
    box-shadow: 0 4px 14px rgba(245, 158, 11, 0.25);
    transition: all 0.25s;
}

.vm-btn-exam:hover {
    transform: translateY(-2px);
    filter: brightness(1.08);
}

.vm-no-file {
    text-align: center;
    color: #9CA3AF;
    font-size: 13px;
    font-weight: 600;
    padding: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

/* ============================================================
   EMPTY STATE
   ============================================================ */
.vm-empty {
    text-align: center;
    padding: 90px 30px;
    background: white;
    border-radius: 24px;
    border: 1px solid #E5E7EB;
}

.vm-empty-icon {
    font-size: 4rem;
    opacity: 0.15;
    display: block;
    margin: 0 auto 20px;
    animation: floatOrb 4s ease-in-out infinite;
}

.vm-empty-title {
    font-size: 22px;
    font-weight: 800;
    color: #1F2937;
    margin: 0 0 10px;
}

.vm-empty-sub {
    font-size: 15px;
    color: #6B7280;
    margin: 0;
    line-height: 1.7;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 768px) {
    .vm-grid {
        grid-template-columns: 1fr;
    }

    .vm-nav-row {
        flex-direction: column;
        align-items: stretch;
    }

    .vm-search-box {
        min-width: unset;
    }

    .vm-back-btn {
        width: 100%;
        justify-content: center;
    }
}

/* ---- Material Card Actions ---- */
.vm-card-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
}

.vm-card-actions .vm-btn-primary {
    min-width: 0;
}

.vm-card-actions .vm-no-file {
    min-width: 0;
    padding: 10px 4px;
}

.vm-card-actions--only-share {
    grid-template-columns: auto;
    justify-content: start;
}

@media (max-width: 420px) {
    .vm-card-actions {
        gap: 8px;
    }

    .vm-card-actions .vm-btn-primary {
        padding: 11px 8px;
        font-size: 13px;
    }
}