@layer pages {
/*
static/css/pages/channel-detail.css
CSS específico da página de detalhes do canal (/channels/{slug}).
Inclui: banner, perfil, redes sociais, responsividade.
*/

/* === Banner do Canal === */
.channel-banner-wrapper {
  position: relative;
  width: 100%;
  max-width: 100%;
  min-height: 280px;
  max-height: 480px;
  height: auto;
  background: var(--bg-secondary);
  overflow: hidden;
  margin-bottom: 0;
  z-index: 1;
  isolation: isolate;
}

.channel-banner-img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  display: block;
  transition: none;
  z-index: 1;
}

.channel-banner-gradient {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top,
      rgb(11 7 16 / 85%) 0%,
      rgb(11 7 16 / 40%) 30%,
      transparent 60%);
  z-index: 2;
  pointer-events: none;
}

/* === Header do Canal === */
.channel-header {
  position: relative;
  z-index: 3;
  padding-block: 18px;
  margin-block: 10px;
}

.videos-section {
  margin-top: 10px;
}

.channel-profile {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 0;
  margin-top: 0;
  position: relative;
  z-index: 5;
}

.channel-pfp-wrapper {
  flex-shrink: 0;
}

.channel-pfp {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  object-fit: cover;
  border: 4px solid var(--bg);
  box-shadow: 0 8px 30px rgb(0 0 0 / 35%);
}

.channel-meta-wrapper {
  min-width: 0;
}

.channel-main-title {
  font-size: 2.2rem;
  font-weight: 800;
  color: var(--text);
  margin: 0 0 4px;
  text-shadow: 0 2px 10px rgb(0 0 0 / 70%);
}

.channel-main-stats {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  color: var(--text-2);
  line-height: 1.5;
}

/* === Redes Sociais === */
.channel-social-networks {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 10;
}

.social-networks-container {
  display: flex;
  gap: 8px;
}

.social-network-link {
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.social-network-link:hover {
  transform: translateY(-2px);
}

.social-network-link:active {
  transform: scale(0.95);
}

.social-icon-circle {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgb(0 0 0 / 50%);
  backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgb(255 255 255 / 15%);
  transition: background 0.2s ease, border-color 0.2s ease;
}

.breathing-delay--zero { animation-delay: 0s; }
.breathing-delay--five { animation-delay: 0.5s; }
.breathing-delay--ten { animation-delay: 1s; }
.breathing-delay--fifteen { animation-delay: 1.5s; }
.breathing-delay--twenty { animation-delay: 2s; }
.breathing-delay--twenty-five { animation-delay: 2.5s; }

.social-icon-circle i {
  width: 18px;
  height: 18px;
  color: rgb(255 255 255 / 90%);
  transition: color 0.2s ease;
}

.light-mode .social-icon-circle {
  background: rgb(255 255 255 / 90%);
  border-color: rgb(0 0 0 / 10%);
  box-shadow: 0 2px 8px rgb(0 0 0 / 10%);
}

.light-mode .social-icon-circle i {
  color: var(--social-color, var(--neon-pink));
}

.social-network-link:hover .social-icon-circle {
  background: var(--social-color, var(--neon-pink));
  border-color: var(--social-color, var(--neon-pink));
}

.social-network-link:hover .social-icon-circle i {
  color: #fff;
}

.social-network-link:focus {
  outline: none;
}

.social-network-link:focus .social-icon-circle {
  box-shadow: 0 0 0 2px var(--social-color, var(--neon-pink));
}

/* === Modo Claro === */
.light-mode .social-network-link:hover .social-icon-circle {
  background: var(--social-color, var(--neon-pink));
}

.light-mode .social-network-link:hover .social-icon-circle i {
  color: #fff;
}

/* === Responsividade === */
@media (width <= 768px) {
  .channel-banner-wrapper {
    min-height: 200px;
    max-height: 320px;
  }

  .channel-profile {
    align-items: center;
    gap: 16px;
  }

  .channel-pfp {
    width: 96px;
    height: 96px;
  }

  .channel-main-title {
    font-size: 1.8rem;
  }

  .channel-social-networks {
    top: 12px;
    right: 12px;
  }

  .social-networks-container {
    gap: 6px;
  }

  .social-icon-circle {
    width: 32px;
    height: 32px;
  }

  .social-icon-circle i {
    width: 16px;
    height: 16px;
  }
}

@media (width <= 480px) {
  .channel-banner-wrapper {
    min-height: 160px;
    max-height: 240px;
  }

  .channel-profile {
    flex-direction: column;
    align-items: flex-start;
  }

  .channel-meta-wrapper {
    width: 100%;
  }

  .channel-main-title {
    font-size: 1.6rem;
  }

  .social-icon-circle {
    width: 30px;
    height: 30px;
  }

  .social-icon-circle i {
    width: 14px;
    height: 14px;
  }
}

/* === Channel Description === */
.channel-description-section {
  margin-top: 24px;
}

.channel-description {
  color: var(--text-2);
  font-size: 0.95rem;
  line-height: 1.6;
  margin: 0;
}

/* Admin actions for channel video cards */
.video-admin-actions {
  padding: 8px 12px;
  display: flex;
  gap: 8px;
}

.video-admin-actions .btn {
  flex: 1;
}

/* ===== CSS inline migrado da Fase 3 ===== */

/* Migrado de templates/detalhes_canal.html */

/* Tabs Navigation */
    .channel-tabs {
      display: flex;
      gap: 16px;
      margin-bottom: 24px;
      border-bottom: 1px solid var(--border);
      padding-bottom: 12px;
    }

    .channel-tab {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 8px 16px;
      border-radius: 8px;
      color: var(--muted);
      text-decoration: none;
      font-weight: 600;
      transition: all 0.2s ease;
      position: relative;
    }

    .channel-tab:hover {
      background: rgb(255 255 255 / 5%);
      color: var(--text);
    }

    .channel-tab.active {
      color: var(--text);
      background: rgb(255 255 255 / 10%);
    }

    .channel-tab.active::after {
      content: '';
      position: absolute;
      bottom: -13px;
      left: 0;
      width: 100%;
      height: 3px;
      background: var(--neon-pink, #f0f);

      /* Fallback */
      border-radius: 2px;
      box-shadow: 0 0 10px var(--neon-pink, #f0f);
    }

    /* Shorts Grid (TikTok/YouTube style) */
    .shorts-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
      gap: 16px;
      margin-top: 20px;
    }

    .short-card {
      position: relative;
      aspect-ratio: 9 / 16;
      border-radius: 12px;
      overflow: hidden;
      display: block;
      text-decoration: none;
      transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
      background: #000;
      box-shadow: 0 4px 12px rgb(0 0 0 / 30%);
    }

    .short-card:hover {
      transform: scale(1.05);
      z-index: 2;
      box-shadow: 0 8px 24px rgb(0 0 0 / 50%), 0 0 12px rgb(255 0 255 / 30%);
      border: 1px solid rgb(255 255 255 / 20%);
    }

    .short-thumb {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: filter 0.3s ease;
    }

    .short-card:hover .short-thumb {
      filter: brightness(1.1);
    }

    .short-info-overlay {
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      padding: 40px 12px 12px;
      background: linear-gradient(to top, rgb(0 0 0 / 90%), transparent);
      color: #fff;
    }

    .short-title {
      font-size: 0.95rem;
      font-weight: 600;
      line-height: 1.3;
      margin-bottom: 4px;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      line-clamp: 2;

      /* Propriedade padrão para compatibilidade */
      -webkit-box-orient: vertical;
      overflow: hidden;
      text-shadow: 0 2px 4px rgb(0 0 0 / 80%);
    }

    .short-views {
      font-size: 0.8rem;
      opacity: 0.8;
      display: flex;
      align-items: center;
      gap: 4px;
    }

    .short-badge {
      position: absolute;
      top: 12px;
      right: 12px;
      background: rgb(0 0 0 / 60%);
      backdrop-filter: blur(4px);
      padding: 4px;
      border-radius: 6px;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    /* Mobile Responsiveness for Shorts */
    @media (width <= 640px) {
      .shorts-grid {
        grid-template-columns: repeat(2, 1fr);

        /* 2 columns on mobile */
        gap: 12px;
      }

      .channel-tabs {
        overflow-x: auto;
        padding-bottom: 0;
        margin-bottom: 16px;
      }

      .channel-tab {
        white-space: nowrap;
      }

      .short-title {
        font-size: 0.85rem;
      }
    }

.channel-detail__no-results-layout {
  margin-top: 2rem;
}

.channel-detail__btn-gerenciar-tags-layout {
  width: 100%;
}

.channel-detail__video-admin-actions-layout {
  margin-top: 8px;
}

.channel-detail__channel-banner-wrapper-media {
  aspect-ratio: 16/2.5;
}

[id="tags-modal-overlay"] {
  position: fixed;
  inset: 0;
  z-index: 3000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgb(0 0 0 / 72%);
  backdrop-filter: blur(8px);
}

[id="tags-modal-overlay"].active {
  display: flex;
}

[id="tags-modal"] {
  width: min(680px, 100%);
  max-height: min(760px, calc(100vh - 48px));
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--surface-1, var(--card));
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: 0 24px 80px rgb(0 0 0 / 50%);
}

[id="tags-modal"] .modal-header,
[id="tags-modal"] .modal-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 22px;
  border-color: var(--border);
}

[id="tags-modal"] .modal-header {
  border-bottom: 1px solid var(--border);
}

[id="tags-modal"] .modal-footer {
  justify-content: flex-end;
  border-top: 1px solid var(--border);
}

[id="tags-modal"] .modal-title {
  margin: 0;
  color: var(--text);
  font-size: 1.1rem;
}

[id="tags-modal"] .modal-close-btn {
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: rgb(255 255 255 / 6%);
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--text);
  cursor: pointer;
}

[id="tags-modal"] .modal-body {
  min-height: 220px;
  overflow: auto;
  padding: 20px 22px;
}

[id="tags-modal"] .modal-loading {
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 140px;
  color: var(--text-2);
}

[id="tags-modal"] .tag-group {
  margin-bottom: 20px;
}

[id="tags-modal"] .tag-group h4 {
  margin: 0 0 10px;
  color: var(--text);
  text-transform: capitalize;
}

[id="tags-modal"] .tag-checkbox {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  color: var(--text-2);
}

@media (width <= 768px) {
  .channel-tabs {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .channel-tabs::-webkit-scrollbar {
    display: none;
  }

  .channel-tabs .tab {
    white-space: nowrap;
    flex-shrink: 0;
  }

  .channel-videos-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }

  .channel-banner-wrapper {
    min-height: 160px;
    max-height: 240px;
  }
}

@media (width <= 480px) {
  .channel-videos-grid {
    grid-template-columns: 1fr;
  }
}
}