/*
 * Echo Distribution — единая адаптивная система.
 * Этот слой подключается последним и меняет только компоновку: цвета,
 * типографика и логика компонентов остаются в их основных файлах.
 */

:root {
    --page-padding: clamp(16px, 2.1vw, 32px);
    --section-gap: clamp(20px, 2.2vw, 32px);
    --card-padding: clamp(16px, 1.65vw, 24px);
    --content-max-width: 1480px;
    --mobile-safe-inline: max(14px, env(safe-area-inset-left));
}

@media (min-width: 1800px) {
    :root { --content-max-width: 1560px; }
}

html,
body {
    max-width: 100%;
    overflow-x: clip;
}

body.sidebar-open { overflow: hidden; }

.app-layout,
.main-content,
.page-content,
.topbar,
.card,
.table-container,
.content-container,
.release-info,
.release-page,
.release-insights,
.site-audio-player,
.file-upload,
.track-upload-item,
.modal {
    min-width: 0;
}

/* В карточках с popover-элементами список не должен обрезаться общим overflow. */
.card:has(.release-dropdown),
.card:has(.release-datepicker) { overflow: visible; }

.app-layout,
.main-content,
.sidebar { min-height: 100dvh; }

.main-content { overflow-x: clip; }

.topbar {
    min-height: 72px;
    height: auto;
    padding-inline: var(--page-padding);
}

.topbar > .flex { min-width: 0; }

.page-content {
    padding: var(--page-padding);
}

/* Унифицированная комфортная ширина кабинета на больших экранах. */
.page-content > * { min-width: 0; }

.page-content > :where(.max-w-full, .max-w-2xl, .max-w-3xl, .max-w-4xl, .max-w-5xl, .max-w-6xl, .content-container, .release-page) {
    width: min(100%, var(--content-max-width));
    margin-inline: auto;
}

/* Большинство страниц уже имеют внутренний px-6. Отступ задаёт page-content,
   поэтому на узких и широких экранах не возникает двойного поля. */
.page-content > .max-w-full.px-6 { padding-inline: 0; }

.card { padding: var(--card-padding); }

.page-content :where(input, select, textarea, .form-input, .form-select, .release-dropdown, .release-datepicker) {
    max-width: 100%;
}

.page-content :where(.form-group, .release-dropdown, .release-datepicker) { min-width: 0; }

.page-content textarea { min-width: 0; resize: vertical; }

/* Обложки музыки всегда сохраняют квадратные пропорции. */
:where(.release-cover, .release-hero__cover, .release-hero__cover-placeholder, .cover-preview img, #coverImg) {
    aspect-ratio: 1 / 1;
    object-fit: cover;
}

/* Таблица может прокручиваться только внутри собственного контейнера. */
.table-container,
.overflow-x-auto {
    max-width: 100%;
    overscroll-behavior-x: contain;
}

.table-container { overflow-x: auto; }

.table-container > .table,
.overflow-x-auto > .table {
    min-width: 620px;
}

:where(.table-container, .overflow-x-auto)::-webkit-scrollbar { height: 6px; }

/* Chart.js измеряет родительский контейнер: не даём canvas выходить за него. */
.chart-container {
    width: 100%;
    min-width: 0;
    max-width: 100%;
}

.chart-container > canvas { max-width: 100% !important; }

.release-dropdown,
.release-datepicker { min-width: 0; }

.release-dropdown__menu {
    max-width: min(100%, calc(100vw - (var(--page-padding) * 2)));
    overscroll-behavior: contain;
}

.release-datepicker__panel { max-width: calc(100vw - (var(--page-padding) * 2)); }

/* Диалоги и панель уведомлений не выходят за видимую область. */
.modal-overlay {
    padding: max(16px, env(safe-area-inset-top)) max(var(--page-padding), env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) max(var(--page-padding), env(safe-area-inset-left));
}

.modal {
    width: min(100%, 720px);
    max-height: calc(100dvh - 32px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
    overflow: auto;
}

/* Предсказуемое поведение длинных данных в списках и профилях. */
.page-content :where(dd, .break-words, .break-all, .overflow-wrap) {
    min-width: 0;
    overflow-wrap: anywhere;
}

#notificationsPanel.notifications-panel {
    width: min(400px, calc(100vw - (var(--page-padding) * 2)));
    max-width: calc(100vw - (var(--page-padding) * 2));
    max-height: 100dvh;
    padding-bottom: env(safe-area-inset-bottom);
}

.sidebar-overlay,
.sidebar-close-btn { display: none; }

/* 1024px — начало desktop-состояния: боковое меню возвращается в постоянный
   layout, а не остаётся в промежуточном «полускрытом» варианте. */
@media (min-width: 1024px) {
    .sidebar { transform: translateX(0) !important; }
    .main-content { margin-left: 260px; }
    .mobile-menu-btn { display: none !important; }
}

/* Tablet: drawer-навигация вместо сжатого постоянного sidebar. */
@media (max-width: 1023px) {
    .sidebar {
        width: min(300px, 86vw);
        min-height: 100dvh;
        padding-bottom: env(safe-area-inset-bottom);
        z-index: 80;
        box-shadow: 18px 0 40px rgba(0, 0, 0, 0.26);
    }

    .sidebar-overlay {
        position: fixed;
        inset: 0;
        z-index: 70;
        display: block;
        background: rgba(0, 0, 0, 0.45);
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition: opacity 200ms ease, visibility 200ms step-end;
    }

    .sidebar-overlay.is-visible {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transition: opacity 200ms ease;
    }

    .sidebar-close-btn {
        position: absolute;
        top: max(12px, env(safe-area-inset-top));
        right: 12px;
        z-index: 2;
        display: inline-grid;
        width: 40px;
        height: 40px;
        padding: 0;
        place-items: center;
        color: var(--color-text-muted);
        border: 1px solid var(--color-border);
        border-radius: var(--radius-sm);
        background: var(--color-card);
    }

    .sidebar-close-btn:hover,
    .sidebar-close-btn:focus-visible {
        color: var(--color-accent);
        border-color: var(--color-accent);
        outline: none;
    }

    .sidebar-close-btn .app-icon,
    .sidebar-close-btn svg { width: 18px; height: 18px; }

    .sidebar-logo { padding-right: 64px; }

    .mobile-menu-btn {
        min-width: 44px;
        min-height: 44px;
    }

    .page-content > :where(.max-w-full, .max-w-2xl, .max-w-3xl, .max-w-4xl, .max-w-5xl, .max-w-6xl, .content-container, .release-page) {
        width: 100%;
    }

    .page-content .grid.grid-cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .page-content .grid.grid-cols-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Планшет: компактная обложка оставляет место для названия и метаданных. */
@media (max-width: 768px) {
    .release-card {
        flex-direction: row;
        align-items: flex-start;
        gap: 16px;
    }

    .release-cover {
        width: 96px;
        height: 96px;
        flex: 0 0 96px;
    }
}

/* Phone: одна удобная колонка для полей и компактные отступы. */
@media (max-width: 639px) {
    :root {
        --page-padding: 16px;
        --section-gap: 20px;
        --card-padding: 16px;
    }

    .topbar {
        min-height: 64px;
        padding-inline: var(--mobile-safe-inline);
        padding-top: env(safe-area-inset-top);
    }

    /* Авторизация и восстановление пароля не должны обрезать форму высотой
       браузерной панели на мобильных устройствах. */
    body.auth-bg,
    .auth-container {
        height: auto !important;
        min-height: 100dvh;
        overflow-y: auto !important;
        align-items: flex-start !important;
        padding-top: max(24px, env(safe-area-inset-top));
        padding-bottom: max(24px, env(safe-area-inset-bottom));
    }

    .auth-card,
    body.auth-bg .w-full.max-w-md { width: min(100%, 420px); }

    .page-content {
        padding-right: max(var(--page-padding), env(safe-area-inset-right));
        padding-bottom: max(var(--page-padding), env(safe-area-inset-bottom));
        padding-left: max(var(--page-padding), env(safe-area-inset-left));
    }

    .page-content > .max-w-full.px-6 { padding-inline: 0; }

    .page-header { margin-bottom: 24px; }

    .page-header > .flex.items-center.justify-between,
    .page-header > .flex.items-start.justify-between {
        align-items: flex-start;
        flex-direction: column;
    }

    .page-header .btn-primary:not(.btn-icon) {
        width: 100%;
        min-height: 44px;
    }

    .page-content form.flex {
        flex-wrap: wrap;
    }

    .page-content form.flex > .flex-1 {
        flex-basis: 100%;
        min-width: 0;
    }

    .page-content .grid.grid-cols-2,
    .page-content .grid.grid-cols-3,
    .page-content .grid.grid-cols-4 {
        grid-template-columns: minmax(0, 1fr);
    }

    .page-content .flex.items-center.justify-between.p-4,
    .page-content .flex.items-center.justify-between.p-5 {
        flex-wrap: wrap;
        align-items: flex-start;
    }

    .page-content dl > .flex.justify-between {
        align-items: flex-start;
        gap: 12px;
    }

    .page-content dl > .flex.justify-between dd {
        max-width: 62%;
        text-align: right;
        overflow-wrap: anywhere;
    }

    .card { border-radius: var(--radius-md); }

    .table-container > .table,
    .overflow-x-auto > .table {
        min-width: 560px;
        font-size: 13px;
    }

    .chart-container { height: clamp(220px, 68vw, 280px); }

    .modal-overlay {
        align-items: flex-end;
        padding: max(10px, env(safe-area-inset-top)) max(10px, env(safe-area-inset-right)) max(10px, env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-left));
    }

    .modal {
        width: 100%;
        max-height: calc(100dvh - 20px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
        border-bottom-right-radius: var(--radius-md);
        border-bottom-left-radius: var(--radius-md);
    }

    #notificationsPanel.notifications-panel {
        width: min(400px, calc(100vw - 16px));
        max-width: calc(100vw - 16px);
    }

    .release-card {
        flex-direction: row;
        align-items: flex-start;
        gap: 12px;
        padding: 14px;
    }

    .release-cover {
        width: clamp(64px, 22vw, 84px);
        height: auto;
        min-height: 0;
        aspect-ratio: 1 / 1;
        border-radius: var(--radius-sm);
    }

    .release-info > .flex.items-start.justify-between {
        flex-wrap: wrap;
        gap: 10px;
        margin-bottom: 10px;
    }

    .release-card__actions {
        width: 100%;
        align-items: center !important;
        flex-direction: row !important;
        flex-wrap: wrap;
        gap: 8px !important;
    }

    .release-meta {
        gap: 8px 12px;
        margin-bottom: 14px;
    }

    .release-meta-item {
        flex: 0 0 auto;
        white-space: nowrap;
    }

    .release-card .flex.items-center.gap-6 { flex-wrap: wrap; gap: 14px; }

    .release-card__view-action {
        min-height: 36px;
        padding-inline: 12px;
    }

    .release-hero__cover,
    .release-hero__cover-placeholder { justify-self: start; }

    .release-metadata-grid { min-width: 0; }

    .track-upload-file-row { min-width: 0; }

    .file-upload--dropzone { min-height: 164px; }

    .file-upload__title,
    .file-upload__subtitle { overflow-wrap: anywhere; }

    .site-audio-player--track { min-width: 0; }

    .release-dropdown__menu {
        max-width: calc(100vw - (var(--page-padding) * 2));
        max-height: min(300px, calc(100dvh - 20px));
    }

    .release-datepicker__panel { width: min(320px, calc(100vw - (var(--page-padding) * 2))); }

    .page-content :where(.flex.items-center.justify-between.p-4, .flex.items-center.justify-between.p-5) {
        gap: 12px;
    }
}

@media (max-width: 374px) {
    :root { --page-padding: 14px; }

    .mobile-menu-btn > span { display: none; }
    .release-card { gap: 10px; padding: 12px; }
    .release-cover { width: 64px; }
    .release-meta { gap: 7px 10px; }
}

@media (prefers-reduced-motion: reduce) {
    .sidebar,
    .sidebar-overlay { transition: none; }
}