/* --- Стили для просмотра лекций --- */
.lecture-detail #pdf-container {
    text-align: center;
    max-width: 100%;
    overflow: hidden;
}

.lecture-detail canvas {
    max-width: 100%;
    height: auto;
    border-radius: 5px;
    border: 1px solid #ddd;
}

.lecture-detail .controls {
    margin-top: 10px;
    margin-bottom: 20px;
}

@media (max-width: 576px) {
    .lecture-detail .btn-lg {
        font-size: 16px;
        padding: 10px;
    }
}

/* --- ПРАКТИЧЕСКИЕ ЗАДАНИЯ СТИЛИ --- */
.practice-detail .bg-light-yellow {
    background-color: #f8e8c8;
}

.practice-detail .bg-light-green {
    background-color: #e6f5d0;
}

.practice-detail .border {
    border: 1px solid #ddd;
    border-radius: 5px;
}

/* Одинаковая высота колонок */
@media (min-width: 768px) {
    .practice-detail .row {
        display: flex;
        align-items: stretch;
        gap: 20px;
    }
    .practice-detail .col-md-6 {
        display: flex;
        flex-direction: column;
    }
}

/* Отступ для кнопки "Следующая задача" */
.practice-detail .btn-success {
    padding: 12px 24px;
    font-size: 18px;
}

/* 🌙 Тёмная тема */
.dark-mode {
    background-color: #121212 !important;
    color: #ffffff !important;
}

/* 🖼️ Увеличение серой границы сверху и снизу */
.dark-mode .container {
    background-color: #1f1f1f !important;
    color: white !important;
    border-radius: 10px; /* Закругляем углы */
}

/* 📌 Карточки и элементы списка */
.dark-mode .card, 
.dark-mode .list-group-item {
    background-color: #1f1f1f !important;
    color: white !important;
    border-color: #444 !important;
    
}

/* 🛠️ Границы */
.dark-mode .border {
    border-color: #444 !important;
    
    
}

/* 🔝 Навигация */
.dark-mode .navbar {
    background-color: #1f1f1f !important;
}

/* 🎛️ Кнопка переключения */
.dark-mode .btn-outline-dark {
    border-color: white !important;
    color: white !important;
}

.dark-mode .btn-outline-dark:hover {
    background-color: white !important;
    color: black !important;
}

/* ✅ Стиль завершённых элементов */
.completed {
    font-weight: bold;
    color: green;
}

.pdf-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 2rem;
    flex-wrap: nowrap;
  }
  
  .canvas-container {
    width: 100%;
    max-width: 100%; /* подбирается под ширину заголовка */
  }
  
  .canvas-container canvas {
    width: 100% !important;
    height: auto !important;
  }
  
  
  #pdf-render {
    max-width: 100%;
    height: auto;
    margin: auto;
    display: block;
  }