/* ============================================
   MOBILE / TOUCH УЛУЧШЕНИЯ АДМИН-ПАНЕЛИ
   ============================================
   Применяется на ≤768px:
   - B2: Таблица Releases → card-list (cover + title + status + primary action).
   - B3: Quick-actions на странице релиза → большая sticky-bottom CTA
         «Одобрить» + secondary «Отклонить» в overflow.
   - B6: Список модерации → card-list (та же идея, что и для Releases).
   ============================================ */

@media (max-width: 768px) {
  /* Глобальные safe-area и touch-target улучшения */
  html,
  body {
    padding: 0;
    margin: 0;
  }

  /* Под все sticky-bottom элементы нужен padding-bottom */
  .page,
  .admin-content {
    padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px));
  }

  .btn,
  .nav-item,
  .rd-tab {
    min-height: 44px;
  }
}

/* ----------------------------------------
   B2: Releases page — таблица → card-list
   ---------------------------------------- */

@media (max-width: 768px) {
  /* На десктопе это просто таблица, на mobile — card-list */
  .releases-page .table-wrap,
  .admin-content .page.releases .table-wrap {
    overflow: visible;
    background: transparent;
    border-radius: 0;
  }

  .releases-page table.table,
  .admin-content .page.releases table.table,
  table#adminReleasesTable {
    display: block;
    width: 100%;
  }

  .releases-page table.table thead,
  .admin-content .page.releases table.table thead,
  table#adminReleasesTable thead {
    display: none;
  }

  .releases-page table.table tbody,
  .admin-content .page.releases table.table tbody,
  table#adminReleasesTable tbody {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  .releases-page table.table tr,
  .admin-content .page.releases table.table tr,
  table#adminReleasesTable tr {
    display: flex;
    flex-direction: column;
    background: var(--bg-card, #141414);
    border: 1px solid var(--border, rgba(255, 255, 255, 0.07));
    border-radius: 14px;
    padding: 14px;
    gap: 10px;
    position: relative;
    -webkit-tap-highlight-color: transparent;
  }

  .releases-page table.table tr > td,
  .admin-content .page.releases table.table tr > td,
  table#adminReleasesTable td {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0;
    border: none;
    font-size: 13px;
    width: 100%;
  }

  /* Cover-картинка: первая и самая заметная */
  .releases-page table.table tr > td:first-child,
  table#adminReleasesTable td:first-child {
    width: 64px;
    height: 64px;
    flex-shrink: 0;
    padding: 0;
    margin-right: 12px;
  }

  .releases-page table.table tr > td:first-child img,
  table#adminReleasesTable td:first-child img {
    width: 64px;
    height: 64px;
    border-radius: 8px;
    object-fit: cover;
  }

  /* Контейнер: cover + основной контент рядом */
  .releases-page table.table tr > td:nth-child(1),
  .releases-page table.table tr > td:nth-child(2),
  .releases-page table.table tr > td:nth-child(3) {
    display: contents;
  }

  /* Универсальный label для каждого td через ::before */
  .releases-page table.table td::before,
  table#adminReleasesTable td::before {
    content: attr(data-label);
    font-size: 10px;
    font-weight: 700;
    color: var(--text-muted, rgba(255, 255, 255, 0.5));
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-right: auto;
    flex-shrink: 0;
  }

  /* Hide empty/no-meaning cols */
  .releases-page table.table td[data-mobile-hide='true'],
  table#adminReleasesTable td[data-mobile-hide='true'] {
    display: none !important;
  }

  /* Primary action — выпячиваем на всю ширину */
  .releases-page table.table td[data-mobile-primary='true'],
  table#adminReleasesTable td[data-mobile-primary='true'] {
    background: linear-gradient(135deg, var(--primary, #00b0b9), var(--primary-dark, #008c93));
    color: #fff;
    border-radius: 10px;
    padding: 12px;
    justify-content: center;
    font-weight: 700;
    font-size: 14px;
    margin-top: 4px;
  }

  .releases-page table.table td[data-mobile-primary='true'] a,
  .releases-page table.table td[data-mobile-primary='true'] button,
  table#adminReleasesTable td[data-mobile-primary='true'] a,
  table#adminReleasesTable td[data-mobile-primary='true'] button {
    color: #fff;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
  }

  /* «Имя артиста» — побольше, основной titlerow */
  .releases-page table.table td[data-artist='true'],
  table#adminReleasesTable td[data-artist='true'] {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
  }
}

/* ----------------------------------------
   B3: ReleaseDetail quick-actions → sticky CTA
   ---------------------------------------- */

@media (max-width: 768px) {
  /* Хедер действий прячем — будет sticky CTA */
  .rd-header__actions,
  .rd-page > .rd-header + nav + .rd-tab-content .rd-header__actions {
    display: none !important;
  }

  /* Большая нижняя кнопка */
  .admin-sticky-cta {
    position: fixed;
    bottom: calc(20px + env(safe-area-inset-bottom, 0px));
    left: 16px;
    right: 16px;
    z-index: 95;
    padding: 14px 18px;
    background: linear-gradient(135deg, var(--primary, #00b0b9), var(--primary-dark, #008c93));
    color: #fff;
    border: none;
    border-radius: 14px;
    font-family: inherit;
    font-size: 15px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    box-shadow:
      0 12px 30px rgba(0, 176, 185, 0.45),
      0 4px 8px rgba(0, 0, 0, 0.25);
    text-decoration: none;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    visibility: hidden;
    opacity: 0;
    transition:
      transform 0.18s,
      opacity 0.18s;
  }

  .admin-sticky-cta.is-active {
    visibility: visible;
    opacity: 1;
  }

  .admin-sticky-cta:active {
    transform: scale(0.98);
  }

  /* Secondary actions (overflow) — раскрываются из-под основной кнопки */
  .admin-sticky-overflow {
    position: fixed;
    bottom: calc(76px + env(safe-area-inset-bottom, 0px));
    left: 16px;
    right: 16px;
    z-index: 94;
    display: flex;
    gap: 8px;
    justify-content: center;
    padding: 10px;
    background: rgba(20, 20, 24, 0.92);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border-radius: 12px;
    border: 1px solid var(--border-light);
    visibility: hidden;
    opacity: 0;
    transform: translateY(8px);
    transition:
      opacity 0.18s,
      transform 0.18s;
  }

  .admin-sticky-overflow.is-active {
    visibility: visible;
    opacity: 1;
    transform: translateY(0);
  }

  .admin-sticky-overflow button {
    flex: 1;
    min-height: 40px;
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 600;
  }

  /* Скрываем стандартный actions-блок из хедера релиза */
  .rd-quick-actions-toolbar {
    display: none;
  }
}

/* ----------------------------------------
   B6: Moderation page — список как card-list
   ---------------------------------------- */

@media (max-width: 768px) {
  .moderation-page .table-wrap,
  .admin-content .page.moderation .table-wrap,
  table#adminModerationTable {
    /* Подменяем table на flex-list */
    display: block;
    background: transparent;
  }

  .moderation-page table.table,
  .admin-content .page.moderation table.table,
  table#adminModerationTable {
    display: block;
  }

  .moderation-page table.table thead,
  .admin-content .page.moderation table.table thead,
  table#adminModerationTable thead {
    display: none;
  }

  .moderation-page table.table tbody,
  table#adminModerationTable tbody {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  .moderation-page table.table tr,
  table#adminModerationTable tr {
    display: flex;
    flex-direction: column;
    background: var(--bg-card, #141414);
    border: 1px solid var(--border, rgba(255, 255, 255, 0.07));
    border-radius: 14px;
    padding: 14px;
    gap: 10px;
  }

  .moderation-page table.table td,
  table#adminModerationTable td {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0;
    border: none;
    font-size: 13px;
    width: 100%;
    flex-wrap: wrap;
  }

  .moderation-page table.table td::before,
  table#adminModerationTable td::before {
    content: attr(data-label);
    font-size: 10px;
    font-weight: 700;
    color: var(--text-muted, rgba(255, 255, 255, 0.5));
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-right: 6px;
  }

  /* Cover в модерации */
  .moderation-page table.table td:first-child img,
  table#adminModerationTable td:first-child img {
    width: 56px;
    height: 56px;
    border-radius: 8px;
    object-fit: cover;
    flex-shrink: 0;
  }

  /* Action-кнопки превращаются в sticky-CTA */
  .moderation-page table.table td[data-mobile-primary='true'],
  table#adminModerationTable td[data-mobile-primary='true'] {
    background: linear-gradient(135deg, var(--primary, #00b0b9), var(--primary-dark, #008c93));
    color: #fff;
    border-radius: 10px;
    padding: 12px;
    justify-content: center;
    font-weight: 700;
    font-size: 14px;
    margin-top: 4px;
  }

  .moderation-page table.table td[data-mobile-primary='true'] a,
  .moderation-page table.table td[data-mobile-primary='true'] button,
  table#adminModerationTable td[data-mobile-primary='true'] a,
  table#adminModerationTable td[data-mobile-primary='true'] button {
    color: #fff;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
  }
}

/* ----------------------------------------
   Общие мобильные улучшения админки
   ---------------------------------------- */

@media (max-width: 768px) {
  /* Sidebar — drawer */
  .admin-sidebar {
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    width: 280px;
    z-index: 1100;
    transform: translateX(-100%);
    transition: transform 0.22s cubic-bezier(0.4, 0, 0.2, 1);
  }

  .admin-sidebar.show {
    transform: translateX(0);
    box-shadow: 0 0 40px rgba(0, 0, 0, 0.5);
  }

  .admin-content {
    margin-left: 0 !important;
  }

  /* Page-header items не должны разрываться на mobile */
  .page-header {
    flex-wrap: wrap;
    padding: 16px;
  }

  .page-title {
    font-size: 22px;
    line-height: 1.2;
  }

  /* Табы — горизонтальный scroll */
  .rd-tabs,
  .tab-nav {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .rd-tabs::-webkit-scrollbar,
  .tab-nav::-webkit-scrollbar {
    display: none;
  }

  .rd-tab,
  .tab-btn {
    flex-shrink: 0;
    padding: 10px 14px;
    min-height: 44px;
  }

  /* Карточки-статистики */
  .stats-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px;
  }

  .stat-value {
    font-size: 22px;
  }

  /* Track player — в админке он тоже мелкий, даём мобильную версию */
  .rd-track-player {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    background: rgba(255, 255, 255, 0.02);
    border-radius: 10px;
  }

  .rd-track-player audio {
    width: 100%;
    height: 44px;
  }
}