/* ==========================================
   VIDEO PROGRESS BAR FIX - v3
   FIXAR: Progress bar döljs av .video-info overlay
   ========================================== */

/* ==========================================
   PROBLEM: .video-info har position: absolute; bottom: 0
   och täcker progress bar som också ligger vid bottom: 0
   
   LÖSNING: Ge progress bar högre z-index och placera den
   utanpå video-info overlay
   ========================================== */

/* Säkerställ att video-card har overflow:hidden */
.video-card {
    overflow: hidden !important;
}

/* Video-info overlay - säkerställ z-index */
.video-card .video-info {
    z-index: 10 !important;
}

/* ==========================================
   PROGRESS BAR - Högre z-index än video-info
   ========================================== */

/* Progress bar SKA ligga i .video-thumbnail */
.video-card .video-thumbnail {
    position: relative !important;
    overflow: visible !important; /* Tillåt progress bar att "sticka ut" */
}

/* Progress bar styling */
.video-card .progress-bar {
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    height: 5px !important;
    background: linear-gradient(90deg, #e50914, #ff6b6b) !important;
    z-index: 50 !important; /* ÖVER video-info (z-index: 10) */
    transition: all 0.3s ease !important;
    border-radius: 0 !important;
    /* Ingen max-width begränsning */
    max-width: none !important;
}

/* Hover - tjockare progress bar */
.video-card:hover .progress-bar {
    height: 7px !important;
}

/* ==========================================
   ALTERNATIV LÖSNING: Flytta progress bar 
   till CARD-nivå istället för thumbnail
   ========================================== */

/* Om progress bar ligger direkt i .video-card (inte i thumbnail) */
.video-card > .progress-bar {
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    height: 5px !important;
    background: linear-gradient(90deg, #e50914, #ff6b6b) !important;
    z-index: 100 !important; /* Allra högst */
    transition: all 0.3s ease !important;
}

/* ==========================================
   ÄMNESSIDOR - VideoProgressManager classes
   ========================================== */

/* Video progress bar container */
.video-progress-bar {
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 5px !important;
    background: rgba(0, 0, 0, 0.5) !important;
    z-index: 50 !important;
}

/* Video progress fill (den röda/gröna delen) */
.video-progress-fill {
    height: 100% !important;
    background: linear-gradient(90deg, #e50914, #ff6b6b) !important;
    transition: width 0.3s ease !important;
}

/* ==========================================
   THUMBNAIL CONTAINERS - Alla varianter
   ========================================== */

.video-thumbnail,
.engelska-video-thumbnail,
.matematik-video-thumbnail,
.svenska-video-thumbnail,
.historia-video-thumbnail,
.naturkunskap-video-thumbnail,
.religion-video-thumbnail,
.samhallsvetenskap-video-thumbnail,
.filosofi-video-thumbnail,
[class*="-video-thumbnail"] {
    position: relative !important;
}

/* Progress bar i alla thumbnail-varianter */
[class*="-video-thumbnail"] .progress-bar,
[class*="-video-thumbnail"] .video-progress-bar {
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    z-index: 50 !important;
}

/* ==========================================
   COMPLETED STATE (grön)
   ========================================== */

.progress-bar.completed,
.video-progress-fill.completed {
    background: linear-gradient(90deg, #2ecc71, #27ae60) !important;
}

/* ==========================================
   BADGES
   ========================================== */

.video-completed-badge {
    position: absolute !important;
    top: 10px !important;
    left: 10px !important;
    background: linear-gradient(135deg, #2ecc71, #27ae60) !important;
    color: white !important;
    padding: 4px 10px !important;
    border-radius: 12px !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    z-index: 60 !important;
}

.video-inprogress-badge {
    position: absolute !important;
    top: 10px !important;
    left: 10px !important;
    background: rgba(0, 0, 0, 0.85) !important;
    color: white !important;
    padding: 4px 10px !important;
    border-radius: 12px !important;
    font-size: 11px !important;
    z-index: 60 !important;
}

/* ==========================================
   LIGHT MODE
   ========================================== */

body.light-mode .progress-bar,
body.light-mode .video-progress-fill {
    box-shadow: 0 0 4px rgba(229, 9, 20, 0.4) !important;
}