/*
 * responsive.css — ClipMaster PRO
 * Mobile-first responsive layer
 * Drop-in: adicione APÓS todos os outros CSS no base.html
 *
 * Breakpoints usados:
 *   --bp-xs : 380px  (smartphones pequenos)
 *   --bp-sm : 480px  (smartphones padrão)
 *   --bp-md : 768px  (tablets portrait)
 *   --bp-lg : 1024px (tablets landscape / laptops)
 */

/* ─────────────────────────────────────────────────────────────
   1. TOKENS GLOBAIS
───────────────────────────────────────────────────────────── */
:root {
  --nav-h: 64px;
  --safe-side: clamp(12px, 4vw, 28px);
}

/* ─────────────────────────────────────────────────────────────
   2. NAVBAR — reescreve o header inline para ser responsivo
───────────────────────────────────────────────────────────── */
.simple-header {
  position: sticky;
  top: 0;
  z-index: 900;
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-rows: auto auto;
  align-items: center;
  gap: 0;
  padding: 0 var(--safe-side);
  min-height: var(--nav-h);
  background: rgba(5, 0, 18, 0.95);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

/* Logo — coluna 1 */
.simple-header > a:first-child {
  grid-column: 1;
  grid-row: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  padding: 12px 0;
  white-space: nowrap;
}

/* Tabs container — linha 2 (mobile) / coluna 2 (desktop) */
.nav-tabs-wrapper {
  grid-column: 1 / -1;
  grid-row: 2;
  display: flex;
  align-items: center;
  gap: 6px;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding: 8px 0 10px;
  /* fade edges para indicar scroll */
  mask-image: linear-gradient(to right, transparent 0, black 12px, black calc(100% - 12px), transparent 100%);
  -webkit-mask-image: linear-gradient(to right, transparent 0, black 12px, black calc(100% - 12px), transparent 100%);
}

.nav-tabs-wrapper::-webkit-scrollbar {
  display: none;
}

/* Direito — coluna 3 */
.nav-right-group {
  grid-column: 3;
  grid-row: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 0;
}

/* Cada tab pill */
.nav-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border-radius: 999px;
  text-decoration: none;
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
  flex-shrink: 0;
  transition: all 0.2s ease;
  border: 1px solid rgba(255, 255, 255, 0.05);
  background: rgba(255, 255, 255, 0.05);
  color: rgba(255, 255, 255, 0.7);
  min-height: 36px;
  /* mínimo touch target */
  touch-action: manipulation;
}

.nav-tab:hover {
  background: rgba(255, 255, 255, 0.12) !important;
  color: #fff !important;
  transform: translateY(-1px);
}

.nav-tab:active {
  transform: translateY(0) scale(0.97);
}

/* Status label: oculta em telas muito pequenas */
.nav-status-group {
  gap: 7px;
}

/* ≥ 768px: tabs voltam para a linha do logo */
@media (min-width: 768px) {
  .simple-header {
    grid-template-columns: auto auto 1fr auto;
    grid-template-rows: 1fr;
    min-height: var(--nav-h);
  }

  .simple-header > a:first-child {
    grid-column: 1;
    grid-row: 1;
  }

  .nav-tabs-wrapper {
    grid-column: 2 / 4;
    grid-row: 1;
    padding: 0 18px;
    justify-content: center;
    mask-image: none;
    -webkit-mask-image: none;
    overflow: visible;
  }

  .nav-right-group {
    grid-column: 4;
    grid-row: 1;
  }
}

/* ≥ 1024px: tab labels completos e espaçamento maior */
@media (min-width: 1024px) {
  .nav-tab {
    font-size: 13px;
    padding: 8px 18px;
    gap: 8px;
  }
}

/* xs: nome da marca vira apenas logo */
@media (max-width: 380px) {
  .nav-brand-text {
    display: none;
  }
  .nav-status-group .nav-status-admin,
  .nav-status-group .nav-status-active,
  .nav-status-group .nav-status-trial,
  .nav-status-group .nav-status-expired {
    display: none;
  }
}

/* ─────────────────────────────────────────────────────────────
   3. LAYOUT PRINCIPAL
───────────────────────────────────────────────────────────── */
.app-main {
  min-height: calc(100dvh - var(--nav-h));
}

/* Wrap container — garantir padding seguro em mobile */
.wrap {
  width: min(100% - 24px, 1240px);
  margin-inline: auto;
  padding-top: clamp(16px, 3vw, 28px);
  padding-bottom: clamp(32px, 6vw, 56px);
}

/* ─────────────────────────────────────────────────────────────
   4. GRID DOS DASHBOARDS (search + favoritos)
───────────────────────────────────────────────────────────── */
/* Mobile primeiro: uma coluna */
.grid-top {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}

/* ≥ 768px: duas colunas */
@media (min-width: 768px) {
  .grid-top {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 18px;
  }
}

/* ─────────────────────────────────────────────────────────────
   5. GRID DE CARDS (clips / VODs / media-cards)
───────────────────────────────────────────────────────────── */
.grid {
  display: grid;
  gap: 12px;
  /* 1 coluna em mobile */
  grid-template-columns: 1fr;
}

@media (min-width: 480px) {
  .grid {
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  }
}

@media (min-width: 1024px) {
  .grid {
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 16px;
  }
}

/* ─────────────────────────────────────────────────────────────
   6. TOOLBAR — botões de ação empilham em mobile
───────────────────────────────────────────────────────────── */
.toolbar,
.content-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.toolbar-right,
.content-toolbar-right {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

/* Em mobile: ocupa largura total e empilha */
@media (max-width: 620px) {
  .toolbar,
  .content-toolbar {
    flex-direction: column;
    align-items: stretch;
  }

  .toolbar-right,
  .content-toolbar-right,
  .content-toolbar-left {
    width: 100%;
    justify-content: center;
  }

  .btn-mini {
    flex: 1 1 auto;
    justify-content: center;
    min-height: 40px; /* touch-friendly */
  }

  /* Segmented pills: largura total */
  .segmented {
    width: 100%;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .segmented::-webkit-scrollbar {
    display: none;
  }

  .segmented .pill {
    flex: 1 1 auto;
    text-align: center;
    min-height: 36px;
  }

  /* Page indicator inline */
  .page-indicator {
    font-size: 12px;
  }
}

/* ─────────────────────────────────────────────────────────────
   7. TOP CLIPS — filtros e grid
───────────────────────────────────────────────────────────── */
.tc-hero,
.tc-filters,
.tc-grid,
.tc-pagination,
.tc-no-creds {
  width: min(100% - 24px, 1180px);
  margin-inline: auto;
}

.tc-grid {
  display: grid;
  gap: 12px;
  grid-template-columns: 1fr;
}

@media (min-width: 480px) {
  .tc-grid {
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  }
}

@media (min-width: 1024px) {
  .tc-grid {
    grid-template-columns: repeat(auto-fill, minmax(258px, 1fr));
    gap: 16px;
  }
}

/* Filtros: scroll horizontal em mobile */
.tc-filter-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.tc-filter-group {
  display: flex;
  flex-wrap: nowrap;
  gap: 4px;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.tc-filter-group::-webkit-scrollbar {
  display: none;
}

.tc-filter-btn {
  flex-shrink: 0;
  min-height: 36px;
  touch-action: manipulation;
}

@media (max-width: 560px) {
  .tc-filter-row {
    flex-direction: column;
  }

  .tc-filter-group {
    width: 100%;
  }

  .tc-filter-btn {
    flex: 1 1 auto;
    text-align: center;
  }

  .tc-hero {
    padding-top: 24px;
  }

  .tc-hero h1 {
    font-size: clamp(22px, 6vw, 32px);
  }
}

/* ─────────────────────────────────────────────────────────────
   8. CARDS DE CLIP / MEDIA
───────────────────────────────────────────────────────────── */
.media-card,
.item {
  min-width: 0; /* evita overflow em grid */
}

.media-thumb-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: var(--dash-radius, 8px) var(--dash-radius, 8px) 0 0;
  background: rgba(0, 0, 0, 0.3);
}

.media-thumb-wrap img,
.media-thumb-wrap video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Legenda e ações do card */
.media-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 10px 12px;
}

@media (max-width: 380px) {
  .media-actions {
    flex-direction: column;
  }

  .media-actions > * {
    width: 100%;
    justify-content: center;
  }
}

/* ─────────────────────────────────────────────────────────────
   9. PAINEL — padding adaptativo
───────────────────────────────────────────────────────────── */
.panel {
  padding: clamp(14px, 3vw, 24px);
}

.card {
  padding: clamp(12px, 3vw, 20px);
}

/* ─────────────────────────────────────────────────────────────
   10. BOTÕES — tamanho mínimo de toque
───────────────────────────────────────────────────────────── */
.btn-mini,
.btn-icon,
.pill,
.nav-tab,
.tc-filter-btn,
.tab-premium-btn {
  /* WCAG 2.5.5 — mínimo 44×44px de área de toque */
  min-height: 36px;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

/* ─────────────────────────────────────────────────────────────
   11. FLASH / TOAST — posição segura em mobile
───────────────────────────────────────────────────────────── */
.global-flash-stack {
  top: calc(var(--nav-h) + 8px);
  padding: 0 12px;
  max-width: min(560px, 100%);
}

.toast-system {
  top: 12px;
  right: 12px;
  max-width: calc(100vw - 24px);
  font-size: 12px;
}

@media (min-width: 480px) {
  .toast-system {
    top: 24px;
    right: 24px;
    max-width: 380px;
    font-size: 13px;
  }
}

/* ─────────────────────────────────────────────────────────────
   12. MODAL — responsivo e seguro para notch/home bar
───────────────────────────────────────────────────────────── */
.premium-modal-overlay {
  padding: 16px;
  padding-bottom: max(16px, env(safe-area-inset-bottom));
  align-items: flex-end; /* mobile: sobe do bottom */
}

.premium-modal {
  width: 100%;
  max-width: 480px;
  border-radius: 20px 20px 16px 16px;
  padding: clamp(20px, 5vw, 36px);
}

@media (min-width: 480px) {
  .premium-modal-overlay {
    align-items: center;
  }

  .premium-modal {
    border-radius: 20px;
  }
}

/* ─────────────────────────────────────────────────────────────
   13. DOWNLOAD HISTORY — toolbar e tabs
───────────────────────────────────────────────────────────── */
.downloads-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}

.tabs-premium {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

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

.tab-premium-btn {
  flex-shrink: 0;
  white-space: nowrap;
}

.toolbar-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

@media (max-width: 620px) {
  .downloads-toolbar {
    flex-direction: column;
    align-items: stretch;
  }

  .toolbar-actions {
    width: 100%;
  }

  .btn-clear-action {
    flex: 1;
    justify-content: center;
  }
}

/* Jobs grid */
.jobs-grid {
  display: grid;
  gap: 12px;
  grid-template-columns: 1fr;
}

@media (min-width: 640px) {
  .jobs-grid {
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  }
}

/* ─────────────────────────────────────────────────────────────
   14. LOGIN / REGISTER — form centralizado e responsivo
───────────────────────────────────────────────────────────── */
.auth-container,
.login-box,
.register-box {
  width: min(420px, calc(100% - 32px));
  margin-inline: auto;
  padding: clamp(20px, 5vw, 36px);
}

/* ─────────────────────────────────────────────────────────────
   15. SEGMENTED CONTROL — scroll em mobile
───────────────────────────────────────────────────────────── */
#periodPills {
  display: flex;
  flex-wrap: nowrap;
  gap: 4px;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 2px;
}

#periodPills::-webkit-scrollbar {
  display: none;
}

#periodPills > div {
  display: flex;
  gap: 4px;
  flex-shrink: 0;
}

/* ─────────────────────────────────────────────────────────────
   16. BARRA DE DOWNLOAD GLOBAL — mobile safe
───────────────────────────────────────────────────────────── */
.global-download-tracker {
  position: sticky;
  top: var(--nav-h);
  z-index: 800;
  padding-inline: var(--safe-side);
}

/* ─────────────────────────────────────────────────────────────
   17. CHECKOUT — card responsivo
───────────────────────────────────────────────────────────── */
.checkout-card,
.card.checkout-wrap {
  width: min(560px, calc(100% - 32px));
  margin-inline: auto;
  padding: clamp(20px, 5vw, 36px);
}

/* ─────────────────────────────────────────────────────────────
   18. ADMIN — tabelas com scroll horizontal
───────────────────────────────────────────────────────────── */
.admin-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: 8px;
}

.admin-table-wrap table {
  min-width: 600px;
  width: 100%;
}

/* ─────────────────────────────────────────────────────────────
   19. SAFE AREA — iOS notch e home bar
───────────────────────────────────────────────────────────── */
@supports (padding: env(safe-area-inset-bottom)) {
  body {
    padding-bottom: env(safe-area-inset-bottom);
  }

  .simple-header {
    padding-left: max(var(--safe-side), env(safe-area-inset-left));
    padding-right: max(var(--safe-side), env(safe-area-inset-right));
  }
}

/* ─────────────────────────────────────────────────────────────
   20. PERFORMANCE — reduz efeitos pesados em mobile e otimiza renderizacao
───────────────────────────────────────────────────────────── */
html {
  scroll-behavior: smooth;
}

body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overscroll-behavior-y: none; /* Previne "pull-to-refresh" lag no mobile */
}

.panel, .card {
  contain: content; /* Isola layout e pintura (GPU) melhorando muito o scroll lag */
}

@media (max-width: 768px) {
  .panel,
  .card,
  .simple-header,
  .user-menu-dropdown {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  /* Desativa gradiente de fundo pesado em mobile */
  body.platform-twitch,
  body.platform-kick,
  body.platform-youtube {
    background:
      linear-gradient(180deg, #070914 0%, #0b1020 52%, #070914 100%);
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ─────────────────────────────────────────────────────────────
   21. UTILITÁRIOS RESPONSIVOS
───────────────────────────────────────────────────────────── */
/* Mostra/oculta por breakpoint */
.hide-xs { display: none !important; }
@media (min-width: 380px) { .hide-xs { display: revert !important; } }

.hide-sm { display: none !important; }
@media (min-width: 480px) { .hide-sm { display: revert !important; } }

.show-sm-only {
  display: revert !important;
}
@media (min-width: 480px) { .show-sm-only { display: none !important; } }

/* Text truncation segura */
.text-ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

/* Touch target padding extra */
.touch-target {
  padding: 8px;
  margin: -8px;
}