/* ============================================
   ТЕМНАЯ ТЕМА ДЛЯ КОНТЕНТНЫХ БЛОКОВ
   ============================================ */

/* Основные контентные блоки */
.music-content {
    background-color: rgba(33, 37, 41, 0.95) !important;
    color: #e9ecef !important;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.music-content h3,
.music-content h4,
.music-content h5 {
    color: #fff !important;
}

.music-content p {
    color: #ced4da !important;
}

.music-content a {
    color: #8ab4f8 !important;
}

.music-content a:hover {
    color: #adc6ff !important;
}

/* Карточки альбомов/видео */
.card-album,
.video-card {
    background-color: rgba(33, 37, 41, 0.9) !important;
    color: #e9ecef !important;
    border: 1px solid rgba(255, 255, 255, 0.15);
}

/* Карточки Splide слайдера */
.splide__slide .card {
    background-color: rgba(33, 37, 41, 0.95) !important;
    color: #e9ecef !important;
}

.splide__slide .card-body {
    background-color: transparent !important;
}

.splide__slide .card-title,
.splide__slide .card-text {
    color: #e9ecef !important;
}

/* Заголовки разделов */
.music-title {
    color: #fff !important;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
}

/* Футер */
footer,
.footer {
    background-color: #1a1d20 !important;
    color: #ced4da !important;
}

footer a,
.footer a {
    color: #8ab4f8 !important;
}

footer a:hover,
.footer a:hover {
    color: #adc6ff !important;
}

/* Формы */
.form-control,
.form-select {
    background-color: rgba(33, 37, 41, 0.9) !important;
    color: #e9ecef !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
}

.form-control:focus,
.form-select:focus {
    background-color: rgba(33, 37, 41, 0.95) !important;
    color: #fff !important;
    border-color: #8a2be2 !important;
    box-shadow: 0 0 0 0.25rem rgba(138, 43, 226, 0.25) !important;
}

/* Таблицы */
.table {
    color: #e9ecef !important;
}

.table-striped > tbody > tr:nth-of-type(odd) > * {
    background-color: rgba(255, 255, 255, 0.05) !important;
}

/* Модальные окна */
.modal-content {
    background-color: #212529 !important;
    color: #e9ecef !important;
}

.modal-header,
.modal-footer {
    border-color: rgba(255, 255, 255, 0.1) !important;
}

/* Аккордеоны */
.accordion-item {
    background-color: rgba(33, 37, 41, 0.9) !important;
    color: #e9ecef !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
}

.accordion-button {
    background-color: rgba(33, 37, 41, 0.9) !important;
    color: #e9ecef !important;
}

.accordion-button:not(.collapsed) {
    background-color: rgba(138, 43, 226, 0.2) !important;
    color: #fff !important;
}

/* Навигационные табы */
.nav-tabs .nav-link {
    color: #ced4da !important;
}

.nav-tabs .nav-link.active {
    background-color: rgba(33, 37, 41, 0.9) !important;
    color: #fff !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
}

/* Badges */
.badge {
    background-color: rgba(138, 43, 226, 0.8) !important;
}

/* Alerts */
.alert-primary {
    background-color: rgba(138, 43, 226, 0.2) !important;
    border-color: rgba(138, 43, 226, 0.4) !important;
    color: #e9ecef !important;
}

.alert-secondary {
    background-color: rgba(108, 117, 125, 0.2) !important;
    border-color: rgba(108, 117, 125, 0.4) !important;
    color: #e9ecef !important;
}

.alert-success {
    background-color: rgba(25, 135, 84, 0.2) !important;
    border-color: rgba(25, 135, 84, 0.4) !important;
    color: #e9ecef !important;
}

.alert-danger {
    background-color: rgba(220, 53, 69, 0.2) !important;
    border-color: rgba(220, 53, 69, 0.4) !important;
    color: #e9ecef !important;
}

.alert-warning {
    background-color: rgba(255, 193, 7, 0.2) !important;
    border-color: rgba(255, 193, 7, 0.4) !important;
    color: #e9ecef !important;
}

.alert-info {
    background-color: rgba(13, 202, 240, 0.2) !important;
    border-color: rgba(13, 202, 240, 0.4) !important;
    color: #e9ecef !important;
}

/* Списки */
.list-group-item {
    background-color: rgba(33, 37, 41, 0.9) !important;
    color: #e9ecef !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
}

.list-group-item:hover {
    background-color: rgba(33, 37, 41, 0.95) !important;
}

/* Breadcrumbs */
.breadcrumb {
    background-color: rgba(33, 37, 41, 0.7) !important;
}

.breadcrumb-item a {
    color: #8ab4f8 !important;
}

/* Pagination */
.page-link {
    background-color: rgba(33, 37, 41, 0.9) !important;
    color: #8ab4f8 !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
}

.page-link:hover {
    background-color: rgba(138, 43, 226, 0.3) !important;
    color: #fff !important;
}

.page-item.active .page-link {
    background-color: #8a2be2 !important;
    border-color: #8a2be2 !important;
}

/* Прогресс-бары */
.progress {
    background-color: rgba(33, 37, 41, 0.9) !important;
}

/* Тосты */
.toast {
    background-color: rgba(33, 37, 41, 0.95) !important;
    color: #e9ecef !important;
}

.toast-header {
    background-color: rgba(33, 37, 41, 0.95) !important;
    color: #e9ecef !important;
    border-bottom-color: rgba(255, 255, 255, 0.1) !important;
}

/* Dropdown меню */
.dropdown-menu {
    background-color: #212529 !important;
    border-color: rgba(255, 255, 255, 0.15) !important;
}

.dropdown-item {
    color: #e9ecef !important;
}

.dropdown-item:hover,
.dropdown-item:focus {
    background-color: rgba(138, 43, 226, 0.3) !important;
    color: #fff !important;
}

.dropdown-divider {
    border-top-color: rgba(255, 255, 255, 0.1) !important;
}

/* Offcanvas */
.offcanvas {
    background-color: #212529 !important;
    color: #e9ecef !important;
}

.offcanvas-header {
    border-bottom-color: rgba(255, 255, 255, 0.1) !important;
}

/* Carousel */
.carousel-caption {
    background-color: rgba(0, 0, 0, 0.7) !important;
    border-radius: 10px;
    padding: 15px;
}

/* Spinners */
.spinner-border,
.spinner-grow {
    color: #8a2be2 !important;
}

/* Tooltips & Popovers */
.tooltip-inner {
    background-color: rgba(33, 37, 41, 0.98) !important;
}

.popover {
    background-color: #212529 !important;
    border-color: rgba(255, 255, 255, 0.15) !important;
}

.popover-header {
    background-color: rgba(33, 37, 41, 0.95) !important;
    border-bottom-color: rgba(255, 255, 255, 0.1) !important;
    color: #fff !important;
}

.popover-body {
    color: #e9ecef !important;
}

/* Кастомные классы для видео */
.media-content {
    background-color: rgba(0, 0, 0, 0.5);
    padding: 10px;
    border-radius: 8px;
}

/* === АДАПТИВНОЕ ВИДЕО === */
.ratio {
    position: relative;
    width: 100%;
}

.ratio::before {
    display: block;
    padding-top: var(--bs-aspect-ratio);
    content: "";
}

.ratio > * {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.ratio-16x9 {
    --bs-aspect-ratio: 56.25%; /* 9/16 * 100% */
}

.ratio-16x9::before {
    padding-top: 56.25%;
}

/* Улучшение читаемости текста */
body {
    color: #e9ecef !important;
}

h1, h2, h3, h4, h5, h6 {
    color: #fff !important;
}

p {
    color: #ced4da !important;
}

/* Ссылки */
a {
    color: #8ab4f8 !important;
}

a:hover {
    color: #adc6ff !important;
}

/* Текст на темном фоне */
.text-dark {
    color: #e9ecef !important;
}

/* Фон для контента */
.bg-white {
    background-color: rgba(33, 37, 41, 0.95) !important;
}

.bg-light {
    background-color: rgba(52, 58, 64, 0.9) !important;
}

/* Тени для темной темы */
.shadow {
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.5) !important;
}

.shadow-sm {
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.4) !important;
}

.shadow-lg {
    box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.6) !important;
}