/* ====================================================
   RESPONSIVE DESIGN - SCOREPLACE
   Mobile-first approach with breakpoints:
   - Mobile: max-width 767px
   - Tablet: 768px - 1199px
   - Desktop: 1200px+
   ==================================================== */

/* ====================================================
   MOBILE FIRST BASE (320px - 767px)
   ==================================================== */

/* Topbar/Header — handled by MOBILE TOPBAR section below */

/* Dashboard cards - Mobile Stack */
@media (max-width: 767px) {
  .dashboard-cards {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    margin-bottom: 2rem;
  }

  .stat-card {
    padding: 1.25rem;
  }

  .stat-card h3 {
    font-size: 1rem;
  }

  .stat-card .stat-number {
    font-size: 1.75rem;
  }

  .stat-box {
    min-width: 0;
    flex: 1 1 auto;
  }

  .info-box {
    width: 100%;
    box-sizing: border-box;
  }

  .card {
    overflow-x: hidden;
  }
}

/* Modal - Full-screen on mobile */
@media (max-width: 767px) {
  .modal {
    width: 100% !important;
    max-width: 100% !important;
    max-height: 100vh !important;
    border-radius: 0 !important;
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    transform: translateY(100%);
  }

  .modal-overlay.active .modal {
    transform: translateY(0);
  }

  .modal-header {
    padding: 1.25rem;
    position: sticky;
    top: 0;
    z-index: 10;
  }

  .modal-body {
    padding: 1.25rem;
    overflow-y: auto;
  }

  .modal-footer {
    padding: 1.25rem;
    flex-direction: column;
    gap: 0.75rem;
  }

  .modal-footer .btn {
    width: 100%;
  }

  /* Form groups stack vertically */
  .d-flex.modal-body > * {
    flex-direction: column;
  }

  .form-group {
    margin-bottom: 1rem;
  }

  .form-control {
    font-size: 16px;
  }
}

/* Bracket - Mobile scroll */
@media (max-width: 767px) {
  .bracket-container {
    gap: 1.5rem;
    padding: 1.5rem 0;
    min-height: 400px;
  }

  .bracket-round {
    min-width: 180px;
  }

  .bracket-match {
    margin-bottom: 1rem;
  }

  .match-player {
    padding: 0.6rem 0.75rem;
    font-size: 0.85rem;
  }

  .bracket-round-title {
    font-size: 0.75rem;
    margin-bottom: 1.5rem;
  }

  .match-score {
    padding: 0.15rem 0.4rem;
    font-size: 0.8rem;
  }
}

/* Tournament detail cards - Single column */
@media (max-width: 767px) {
  .tournament-details {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  .tournament-header {
    gap: 1rem;
  }

  .tournament-header h1 {
    font-size: 1.5rem;
  }

  .detail-section {
    grid-template-columns: 1fr;
  }
}

/* Buttons - Full width on mobile */
@media (max-width: 767px) {
  .view-container .btn-primary,
  .view-container .btn-secondary {
    width: 100%;
  }

  /* v1.1.11-beta: nome do venue agora vai numa linha SEPARADA abaixo do
     header (não compete mais com Voltar/Editar/Reivindicar). Labels dos
     botões podem voltar a ser visíveis em mobile — header tem espaço
     livre. Removida a regra .venue-detail-btn-label { display:none } da
     v1.1.9. */

  /* v1.1.10-beta: botão "+ Cadastrar" nos cards de Sugestões do Google
     vira círculo só com "+" no mobile pra liberar espaço pro nome do
     local não truncar. Mantém cor/borda da v1.1.8. */
  .gv-register-label {
    display: none;
  }
  .gv-register-btn {
    width: 26px;
    height: 26px;
    padding: 0 !important;
    border-radius: 50% !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    font-size: 0.95rem !important;
  }

  .btn-group {
    flex-direction: column;
    gap: 0.75rem;
  }

  .btn-group .btn {
    width: 100%;
  }
}

/* Reduce padding and margins */
@media (max-width: 767px) {
  .view-container {
    padding: 1rem;
  }

  .card {
    padding: 1rem;
  }

  .card-header {
    padding-bottom: 0.75rem;
    margin-bottom: 0.75rem;
  }

  .card-title {
    font-size: 1.1rem;
  }

  h1 {
    font-size: 1.5rem;
  }

  h2 {
    font-size: 1.25rem;
  }

  h3 {
    font-size: 1.1rem;
  }

  h4, h5, h6 {
    font-size: 1rem;
  }

  .mt-4 {
    margin-top: 1rem;
  }

  .mb-4 {
    margin-bottom: 1rem;
  }

  .gap-3 {
    gap: 1rem !important;
  }
}

/* Tables - Horizontal scroll */
@media (max-width: 767px) {
  table {
    font-size: 0.85rem;
  }

  .table-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  table th,
  table td {
    padding: 0.75rem 0.5rem;
  }
}

/* Touch targets - At least 44px */
@media (max-width: 767px) {
  .btn {
    min-height: 44px;
    font-size: 0.95rem;
  }

  input[type="checkbox"]:not(.toggle-switch input),
  input[type="radio"]:not(.toggle-switch input) {
    min-width: 22px;
    min-height: 22px;
    width: 22px;
    height: 22px;
  }
  /* Touch target via label instead — exclude toggle switches */
  label:has(input[type="checkbox"]):not(.toggle-switch),
  label:has(input[type="radio"]):not(.toggle-switch) {
    min-height: 44px;
    display: flex;
    align-items: center;
    gap: 8px;
  }

  .nav-link {
    min-height: 44px;
    display: flex;
    align-items: center;
  }

  button,
  a[role="button"] {
    min-height: 44px;
  }
}

/* Flex layouts - Stack on mobile (only form/card contexts, NOT topbar or inline content) */
@media (max-width: 767px) {
  .modal-body .d-flex,
  .form-group .d-flex {
    flex-direction: column;
  }

  .modal-body .d-flex.justify-between {
    align-items: flex-start;
  }

  .flex-row {
    flex-direction: column;
  }
}

/* ====================================================
   TABLET (768px - 1199px)
   ==================================================== */

@media (min-width: 768px) and (max-width: 1199px) {
  /* Tablet: same 2-line layout, handled by <1200px rule above */

  /* Dashboard cards - 2+1 or 3 columns */
  .dashboard-cards {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
    margin-bottom: 2rem;
  }

  .dashboard-cards .stat-card:nth-child(3) {
    grid-column: 1 / 3;
  }

  .stat-card {
    padding: 1.5rem;
  }

  /* Modal on tablet */
  .modal {
    width: 95%;
    max-width: 700px;
    max-height: 90vh;
  }

  .modal-footer {
    flex-wrap: wrap;
  }

  .modal-footer .btn {
    flex: 1;
    min-width: 120px;
  }

  /* Bracket on tablet */
  .bracket-container {
    gap: 2rem;
    padding: 1.5rem 0;
  }

  .bracket-round {
    min-width: 220px;
  }

  .tournament-details {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
  }

  .view-container {
    padding: 1.5rem;
  }

  h1 {
    font-size: 1.75rem;
  }

  h2 {
    font-size: 1.5rem;
  }
}

/* ====================================================
   DESKTOP (1200px+)
   ==================================================== */

@media (min-width: 1200px) {
  .topbar {
    min-height: 60px;
    padding: 0.5rem 2rem;
    flex-wrap: wrap;
    overflow: visible;
    gap: 4px;
  }

  .hamburger-btn {
    display: none !important;
  }

  .topbar-menu {
    display: flex !important;
    position: static !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    background: transparent !important;
    box-shadow: none !important;
    padding: 0 !important;
    border-bottom: none !important;
    gap: 4px !important;
  }

  .topbar-nav-group {
    gap: 2px !important;
  }

  .topbar-action-group {
    gap: 9px !important;
  }

  /* page-title h1 size is fixed in layout.css */

  /* View mode — inline, same height as other buttons */
  #view-mode-selector {
    white-space: nowrap !important;
  }

  /* Dashboard cards - 3 columns */
  .dashboard-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    margin-bottom: 2rem;
  }

  .stat-card {
    padding: 1.5rem;
  }

  .stat-card h3 {
    font-size: 1.1rem;
  }

  .stat-card .stat-number {
    font-size: 2rem;
  }

  /* Modal - Centered with max-width */
  .modal {
    width: 90%;
    max-width: 800px;
    max-height: 90vh;
  }

  .modal-footer {
    justify-content: flex-end;
  }

  .modal-footer .btn {
    width: auto;
    min-width: 100px;
  }

  /* Bracket - Normal horizontal layout */
  .bracket-container {
    gap: 3rem;
    padding: 2rem 0;
    min-height: 500px;
  }

  .bracket-round {
    min-width: 250px;
  }

  .bracket-round-title {
    font-size: 0.85rem;
  }

  .match-player {
    padding: 0.75rem 1rem;
    font-size: 0.95rem;
  }

  .tournament-details {
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
  }

  .view-container {
    padding: 2rem;
  }

  h1 {
    font-size: 2rem;
  }

  h2 {
    font-size: 1.75rem;
  }

  h3 {
    font-size: 1.25rem;
  }
}

/* ====================================================
   UTILITY CLASSES FOR RESPONSIVE
   ==================================================== */

.hidden-mobile {
  display: none;
}

.hidden-tablet {
  display: block;
}

.hidden-desktop {
  display: block;
}

@media (min-width: 768px) {
  .hidden-mobile {
    display: block;
  }

  .hidden-tablet {
    display: none;
  }
}

@media (min-width: 1200px) {
  .hidden-tablet {
    display: block;
  }

  .hidden-desktop {
    display: none;
  }
}

/* Responsive spacing utilities */
@media (max-width: 767px) {
  .p-mobile {
    padding: 0.75rem !important;
  }

  .m-mobile {
    margin: 0.5rem !important;
  }

  .gap-mobile {
    gap: 0.5rem !important;
  }
}

@media (min-width: 768px) and (max-width: 1199px) {
  .p-tablet {
    padding: 1rem !important;
  }

  .m-tablet {
    margin: 1rem !important;
  }

  .gap-tablet {
    gap: 1rem !important;
  }
}

@media (min-width: 1200px) {
  .p-desktop {
    padding: 1.5rem !important;
  }

  .m-desktop {
    margin: 1.5rem !important;
  }

  .gap-desktop {
    gap: 1.5rem !important;
  }
}

/* ====================================================
   RESPONSIVE IMAGES & MEDIA
   ==================================================== */

img {
  max-width: 100%;
  height: auto;
  display: block;
}

@media (max-width: 767px) {
  .image-large {
    width: 100%;
  }

  .image-medium {
    width: 100%;
  }
}

@media (min-width: 768px) and (max-width: 1199px) {
  .image-large {
    width: 80%;
  }

  .image-medium {
    width: 100%;
  }
}

@media (min-width: 1200px) {
  .image-large {
    width: 100%;
  }

  .image-medium {
    width: 80%;
  }
}

/* ====================================================
   RESPONSIVE GRID SYSTEMS
   ==================================================== */

.grid-auto {
  display: grid;
  gap: 1rem;
}

@media (max-width: 767px) {
  .grid-auto {
    grid-template-columns: 1fr;
  }
}

@media (min-width: 768px) and (max-width: 1199px) {
  .grid-auto {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1200px) {
  .grid-auto {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ====================================================
   RESPONSIVE TYPOGRAPHY
   ==================================================== */

@media (max-width: 767px) {
  .text-lg {
    font-size: 1rem;
  }

  .text-xl {
    font-size: 1.125rem;
  }

  .text-2xl {
    font-size: 1.25rem;
  }
}

@media (min-width: 768px) and (max-width: 1199px) {
  .text-lg {
    font-size: 1.1rem;
  }

  .text-xl {
    font-size: 1.25rem;
  }

  .text-2xl {
    font-size: 1.5rem;
  }
}

@media (min-width: 1200px) {
  .text-lg {
    font-size: 1.125rem;
  }

  .text-xl {
    font-size: 1.375rem;
  }

  .text-2xl {
    font-size: 1.875rem;
  }
}

/* ====================================================
   MOBILE LANDSCAPE
   ==================================================== */

@media (max-width: 900px) and (orientation: landscape) {
  .topbar {
    height: 50px;
    padding: 0 1rem;
  }

  .view-container {
    padding: 0.75rem;
  }

  .card {
    padding: 0.75rem;
  }

  h1 {
    font-size: 1.25rem;
  }

  h2 {
    font-size: 1.1rem;
  }
}

/* ====================================================
   ACCESSIBILITY & PRINT
   ==================================================== */

@media print {
  /* ── Ocultar elementos não-essenciais ─────────────────────────────── */
  .topbar,
  .sidebar,
  .modal-overlay,
  .hidden-print,
  .no-print,
  .btn,
  [onclick*="generateDraw"],
  [onclick*="_startTournament"] {
    display: none !important;
  }

  /* Manter botões que são na verdade links de navegação visíveis? Não, ocultar tudo */
  a.btn {
    display: none !important;
  }

  /* ── Layout base ──────────────────────────────────────────────────── */
  body {
    background: white !important;
    color: #1a1a1a !important;
    font-size: 11pt !important;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }

  .view-container {
    padding: 0 !important;
    max-width: 100% !important;
  }

  /* ── Títulos e badges ─────────────────────────────────────────────── */
  h2, h3, h4 {
    color: #1a1a1a !important;
  }

  .badge {
    border: 1px solid #999 !important;
    background: #f0f0f0 !important;
    color: #333 !important;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }

  /* ── Bracket (Eliminatórias) ──────────────────────────────────────── */
  .bracket-container {
    overflow: visible !important;
    min-height: auto !important;
    gap: 1.5rem !important;
  }

  .bracket-round {
    min-width: 150px !important;
  }

  .bracket-round-title {
    color: #555 !important;
  }

  .bracket-match {
    background: white !important;
    border: 1.5px solid #333 !important;
    box-shadow: none !important;
    break-inside: avoid;
    page-break-inside: avoid;
  }

  .match-player {
    border-bottom-color: #ccc !important;
    color: #1a1a1a !important;
  }

  .match-player.winner {
    background: #e8f5e9 !important;
    color: #1b5e20 !important;
    font-weight: 700 !important;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }

  .match-player.loser {
    color: #666 !important;
  }

  .match-score {
    background: #f5f5f5 !important;
    border-color: #999 !important;
    color: #1a1a1a !important;
  }

  .match-player.winner .match-score {
    border-color: #2e7d32 !important;
  }

  /* ── Tabelas de classificação (Liga/Suíço) ────────────────────────── */
  table {
    border-collapse: collapse !important;
    width: 100% !important;
  }

  table th,
  table td {
    border: 1px solid #ccc !important;
    padding: 6px 10px !important;
    color: #1a1a1a !important;
    background: white !important;
  }

  table th {
    background: #f0f0f0 !important;
    font-weight: 700 !important;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }

  table tr:nth-child(even) td {
    background: #fafafa !important;
  }

  /* ── Cards e containers ───────────────────────────────────────────── */
  .card,
  [style*="background: rgba"],
  [style*="background:rgba"],
  [style*="background: linear-gradient"],
  [style*="background:linear-gradient"] {
    background: white !important;
    border: 1px solid #ddd !important;
    box-shadow: none !important;
    color: #1a1a1a !important;
  }

  /* ── Barra de progresso — manter visível ──────────────────────────── */
  [style*="Progresso do Torneio"] {
    border: 1px solid #ccc !important;
    background: white !important;
  }

  /* ── Rodadas anteriores — expandir para impressão ─────────────────── */
  details {
    break-inside: avoid;
    page-break-inside: avoid;
  }

  details[open] summary {
    font-weight: 700 !important;
  }

  /* ── Estatísticas ─────────────────────────────────────────────────── */
  span[style*="color:var(--text-muted)"],
  span[style*="color: var(--text-muted)"] {
    color: #666 !important;
  }

  span[style*="color:var(--text-bright)"],
  span[style*="color: var(--text-bright)"] {
    color: #1a1a1a !important;
  }

  /* ── Imagens/avatares — ocultar para limpeza ──────────────────────── */
  img[data-player-name] {
    display: none !important;
  }

  /* ── Links ────────────────────────────────────────────────────────── */
  a {
    color: #1a1a1a !important;
    text-decoration: none !important;
  }

  /* ── Page setup ───────────────────────────────────────────────────── */
  @page {
    margin: 1.5cm;
    size: landscape;
  }
}

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

/* ====================================================
   TOPBAR — Progressive responsive header
   States (managed by JS _checkTopbarWrap):
     1. Full: logo + all items with labels on 1 line
     2. .topbar-compact: logo + all items (no labels) on 1 line
     3. .topbar-hamburger (JS) or ≤767px: hamburger menu
   ==================================================== */

/* Groups: never wrap internally */
.topbar-nav-group,
.topbar-action-group,
.topbar-profile-group {
  display: flex;
  align-items: center;
  flex-wrap: nowrap !important;
}
.topbar-nav-group { flex-shrink: 1; min-width: 0; }
.topbar-action-group { flex-shrink: 0; }
.topbar-profile-group { flex-shrink: 0; }

/* Hamburger: hidden by default */
.hamburger-btn { display: none !important; }
/* Header notification bell: hidden by default, shown alongside hamburger */
#header-notif-bell { display: none !important; }

/* ══════════════════════════════════════════════════════════════════════
   HAMBURGER MODE — ARCHITECTURE RULES (DO NOT CHANGE)
   ──────────────────────────────────────────────────────────────────
   1. The hamburger dropdown (#hamburger-dropdown) is a SIBLING of
      <header class="topbar">, NOT a child. This is critical.
   2. Nav content is CLONED into the dropdown by JS (_toggleHamburger).
   3. The .topbar-menu is ALWAYS display:none in hamburger mode.
   4. Z-index stack: topbar(100) < back-header(101) < dropdown(102).
   5. When dropdown opens, JS pushes .sticky-back-header down.
   6. DO NOT move the dropdown inside the topbar.
   7. DO NOT change z-index values without updating style.css + tests.
   ══════════════════════════════════════════════════════════════════════ */

/* ── JS-triggered hamburger (.topbar-hamburger) ── */
.topbar.topbar-hamburger .hamburger-btn {
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  flex-shrink: 0;
}
.topbar.topbar-hamburger #header-notif-bell { display: flex !important; }
.topbar.topbar-hamburger { align-items: center !important; padding-bottom: 0.15rem !important; }
.topbar.topbar-hamburger .topbar-menu {
  display: none !important;  /* ALWAYS hidden — content cloned into #hamburger-dropdown */
}

/* Hide header notif bell when dropdown is open (avoids duplicate with nav bell inside dropdown) */
body.hamburger-open #header-notif-bell { display: none !important; }

/* ── ≤767px always triggers hamburger via CSS ── */
@media (max-width: 767px) {
  .hamburger-btn {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    flex-shrink: 0;
  }
  #header-notif-bell { display: flex !important; }
  .topbar { align-items: center !important; flex-wrap: nowrap !important; padding-bottom: 0.15rem !important; }
  .topbar-menu {
    display: none !important;  /* ALWAYS hidden — content cloned into #hamburger-dropdown */
  }
}

/* Menu: visible when not in hamburger mode (desktop/tablet only) */
@media (min-width: 768px) {
  .topbar-menu {
    display: flex;
    flex: 1 1 0%;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: clamp(8px, 1.2vw, 16px) !important;
    padding-top: 0 !important;
    border-top: none !important;
    margin-top: 0 !important;
  }

  /* Nav items: icon↔text spacing */
  .topbar-nav-group { gap: 2px !important; }
  .topbar-nav-group a,
  .topbar-nav-group button {
    gap: 4px !important;
    padding: 6px 6px !important;
  }
  /* Action buttons group */
  .topbar-action-group { gap: 6px !important; }
  /* Profile group */
  .topbar-profile-group { gap: 4px !important; }
}

/* Nav text labels: transition for smooth hide/show */
.topbar-nav-group a > span,
.topbar-nav-group button > span {
  overflow: hidden;
  white-space: nowrap;
  transition: max-width 0.2s ease, opacity 0.2s ease, margin 0.2s ease;
  display: inline-block;
  max-width: 120px;
  opacity: 1;
}

/* ── Compact state (JS toggles .topbar-compact on .topbar-menu) ── */
/* Hide nav text labels, keep everything on 1 line with logo */
.topbar-menu.topbar-compact .topbar-nav-group a > span,
.topbar-menu.topbar-compact .topbar-nav-group button > span {
  max-width: 0 !important;
  opacity: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}
.topbar-menu.topbar-compact .user-name-label {
  display: none !important;
}
.topbar-menu.topbar-compact .topbar-nav-group a,
.topbar-menu.topbar-compact .topbar-nav-group button {
  padding: 0 6px !important;
  gap: 0 !important;
}

/* ====================================================
   Topbar fluid adjustments
   ==================================================== */
.topbar {
  align-items: center !important;
  padding: clamp(0.4rem, 1vw, 0.5rem) clamp(0.75rem, 2vw, 2rem) !important;
}
@media (min-width: 768px) {
  .topbar { flex-wrap: nowrap !important; }
}
@media (max-width: 767px) {
  .topbar { flex-wrap: wrap !important; }
}
.page-title {
  flex: 0 0 auto;
  min-width: 0;
}

/* Separator hidden at all widths */
.topbar-menu div[style*="width: 1px"] {
  display: none !important;
}
/* View mode */
#view-mode-container { margin: 0 !important; }
#view-mode-selector {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 0 12px !important;
  white-space: nowrap !important;
}
/* Login/Perfil */
#btn-login {
  flex-shrink: 0 !important;
}
#btn-login.d-flex {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  gap: 4px !important;
}
.logoff-btn {
  margin-left: 4px !important;
  flex-shrink: 0 !important;
}

/* ====================================================
   TOPBAR PROGRESSIVE COMPACTION (JS-driven classes)
   Order: hide-viewlabel → hide-username → hide-notif → hide-explorar → hide-inicio
   ==================================================== */

/* Step 2: Hide user name */
.topbar-menu.hide-username .user-name-label {
  display: none !important;
}

/* Steps 3-5: Hide nav labels progressively */
.topbar-menu.hide-notif .nav-label-notificacoes,
.topbar-menu.hide-explorar .nav-label-explorar,
.topbar-menu.hide-inicio .nav-label-inicio {
  max-width: 0 !important;
  opacity: 0 !important;
  overflow: hidden !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Collapse gap on nav links when their label is hidden */
.topbar-menu.hide-notif .topbar-nav-group a[href="#notifications"],
.topbar-menu.hide-explorar .topbar-nav-group a[href="#explore"],
.topbar-menu.hide-inicio .topbar-nav-group a[href="#dashboard"] {
  gap: 0 !important;
  padding: 0 6px !important;
}

/* ====================================================
   HERO CREATE BUTTON
   ==================================================== */
/* Botão +Novo Torneio — agora centralizado abaixo da saudação */
/* .btn-create-hero class removed — button is now inline centered */
@media (max-width: 767px) {
  .hero-box {
    position: relative;
    padding: 1.5rem 1.2rem !important;
  }
}

/* ====================================================
   DATES ROW — stack vertically on mobile
   ==================================================== */
@media (max-width: 767px) {
  .dates-row {
    flex-direction: column !important;
  }
  .dates-row > div {
    flex: none !important;
    width: 100% !important;
  }
}

/* ====================================================
   COURTS ROW — side by side on desktop/tablet/landscape,
   stacked on portrait mobile
   ==================================================== */
@media (max-width: 767px) {
  .courts-row {
    flex-direction: column !important;
  }
  .courts-row .courts-count-field {
    flex: none !important;
    width: 100% !important;
  }
}

/* ── Dashboard Compact List — Mobile ── */
@media (max-width: 767px) {
  .compact-row {
    flex-wrap: wrap !important;
    padding: 10px 12px !important;
    gap: 8px !important;
  }
  .compact-row .compact-logo {
    width: 32px !important;
    height: 32px !important;
  }
  .compact-row .compact-info {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 4px !important;
    flex: 1 1 calc(100% - 44px) !important;
    min-width: 0 !important;
  }
  .compact-row .compact-name-block {
    width: 100% !important;
  }
  .compact-row .compact-details {
    flex-wrap: wrap !important;
    gap: 6px !important;
  }
  .compact-row .compact-badges {
    flex-wrap: wrap !important;
    gap: 6px !important;
  }
}