/* ============================================================================
   FLAG OS V1.9 - RESPONSIVE
   Arquivo: assets/css/05-responsive.css
   Versão: 1.9.0
   ============================================================================ */

/* ============================================================================
   TABLET (max-width: 1200px)
   ============================================================================ */

@media (max-width: 1200px) {
  :root {
    --sidebar-w: 240px;
  }

  .main-header {
    padding: 0 1rem;
  }
  
  .header-center {
    max-width: 300px;
    margin: 0 1rem;
  }
  
  .sidebar {
    width: 240px;
  }
  
  .main-content {
    margin-left: 240px;
    padding: 1.5rem;
  }
  
  .pilar-header-main {
    padding: 1.5rem;
  }
  
  .pilar-icon-large {
    font-size: 3rem;
  }
  
  .config-card {
    padding: 1.5rem;
  }
}

/* ============================================================================
   LAPTOP (max-width: 1024px) — P0: evita overlap 900–1440
   ============================================================================ */

@media (max-width: 1024px) {
  :root {
    --sidebar-w: clamp(200px, 24vw, 240px);
  }

  .header-center {
    max-width: 260px;
    margin: 0 0.75rem;
  }

  .main-content {
    padding: 1.25rem;
  }
}

/* ============================================================================
   MID (max-width: 900px) — transição suave antes do mobile
   ============================================================================ */

@media (max-width: 900px) {
  :root {
    --sidebar-w: 200px;
  }

  .main-content {
    padding: 1rem;
  }
}

/* ============================================================================
   MOBILE (max-width: 768px)
   ============================================================================ */

@media (max-width: 768px) {
  /* Header compacto */
  .main-header {
    height: auto;
    flex-wrap: wrap;
    padding: 0.5rem;
  }
  
  .header-left .logo {
    font-size: var(--text-lg);
  }
  
  .header-center {
    order: 3;
    width: 100%;
    margin: 0.5rem 0 0 0;
    max-width: 100%;
  }
  
  .header-right {
    gap: 0.5rem;
  }
  
  .theme-select,
  .mode-toggle {
    padding: 6px 12px;
    font-size: var(--text-sm);
  }
  
  .btn-save-all {
    padding: 8px 16px;
    font-size: var(--text-sm);
  }
  
  .btn-save-all .btn-text {
    display: none;
  }
  
	  /* Sidebar: sem drawer (toggle único interno) */
	  .sidebar {
	    transform: none;
	    width: var(--sidebar-w-collapsed);
	  }
  
	  /* Main content */
	  .main-content {
	    margin-left: var(--sidebar-w-collapsed);
	    margin-top: 100px;
	    padding: 1rem;
	  }
  
  /* Pilar header vertical */
  .pilar-header-main {
    flex-direction: column;
    text-align: center;
    padding: 1rem;
  }
  
  .pilar-icon-large {
    font-size: 2.5rem;
  }
  
  .pilar-info h1 {
    font-size: var(--text-2xl);
  }
  
  /* Grids viram colunas */
  .radio-cards-grid,
  .thumbnail-styles-grid,
  .transition-cards-grid,
  .audio-presets-grid,
  .platforms-grid {
    grid-template-columns: 1fr;
  }
  
  /* Form rows viram stack */
  .form-row-two-cols {
    grid-template-columns: 1fr;
  }
  
  /* Toggles grid viram 1 coluna */
  .toggles-grid-2x2,
  .toggles-grid-3-cols {
    grid-template-columns: 1fr;
  }
  
  /* Welcome stats vira stack */
  .welcome-stats {
    grid-template-columns: 1fr;
  }
  
  /* Stats grid vira stack */
  .stats-grid {
    grid-template-columns: 1fr;
  }
  
  /* Action tabs viram stack */
  .action-tabs {
    flex-direction: column;
  }
  
  /* Sub-tabs viram stack */
  .sub-tabs {
    flex-direction: column;
  }
  
  /* Toast container */
  .toast-container {
    left: 10px;
    right: 10px;
    top: 110px;
    max-width: 100%;
  }
  
  .toast {
    min-width: auto;
    max-width: 100%;
  }
}

/* ============================================================================
   MOBILE PEQUENO (max-width: 480px)
   ============================================================================ */

@media (max-width: 480px) {
  html {
    font-size: 14px;
  }
  
  .main-content {
    padding: 0.75rem;
  }
  
  .config-card {
    padding: 1rem;
  }
  
  .pilar-header-main {
    padding: 0.75rem;
  }
  
  /* Botões menores */
  .btn-action-mega {
    padding: 16px;
    font-size: var(--text-lg);
  }
  
  /* Position grid menor */
  .position-grid {
    max-width: 150px;
    gap: 6px;
  }
  
  .pos-btn {
    font-size: 1.2rem;
  }
  
  /* Preview boxes */
  .preview-thumbnail-box,
  .preview-legenda-box {
    max-width: 100%;
  }
  
  /* Welcome content */
  .welcome-icon {
    font-size: 3rem;
  }
  
  .welcome-content h1 {
    font-size: var(--text-2xl);
  }
}

/* ============================================================================
   PRINT
   ============================================================================ */

@media print {
  .main-header,
  .sidebar,
  .btn-save-all,
  .theme-select,
  .mode-toggle,
  .toast-container,
  .loading-overlay {
    display: none !important;
  }
  
  .main-content {
    margin-left: 0;
    margin-top: 0;
  }
  
  .pilar-page {
    page-break-inside: avoid;
  }
}