/* ======================================
   MELHORIAS DE RESPONSIVIDADE MOBILE
   TudoAqui - Mobile-First Improvements
   ====================================== */

/* ========== BREAKPOINTS ========== */
/* 
  xs: 0-479px (smartphones pequenos)
  sm: 480-767px (smartphones)
  md: 768-1023px (tablets)
  lg: 1024-1199px (desktop pequeno)
  xl: 1200px+ (desktop grande)
*/

/* ========== LAYOUT PRINCIPAL - MOBILE FIRST ========== */
@media (max-width: 1023px) {
  /* Transformar layout em stack para tablets e mobile */
  .app {
    display: block !important;
    grid-template-columns: none !important;
    gap: 0 !important;
  }
  
  /* Sidebar como drawer/accordion em mobile */
  aside {
    position: static !important;
    top: auto !important;
    height: auto !important;
    margin-bottom: 16px;
    background: var(--panel);
    border-radius: 12px;
    z-index: 10;
  }
  
  /* Header não sticky em mobile */
  header {
    position: static !important;
    top: auto !important;
  }
  
  /* Padding reduzido em mobile */
  .wrap {
    padding: 12px;
  }
}

/* ========== HEADER RESPONSIVO ========== */
@media (max-width: 767px) {
  /* Header topbar em stack */
  .topbar {
    flex-direction: column !important;
    gap: 12px !important;
    align-items: stretch !important;
  }
  
  /* Logo centralizada */
  .logo {
    justify-content: center !important;
    font-size: 18px !important;
    margin-bottom: 8px;
  }
  
  /* Search container full width */
  .search-container {
    width: 100% !important;
    order: 2;
  }
  
  .search-box {
    width: 100% !important;
  }
  
  .search-box input {
    width: 100% !important;
    font-size: 16px !important; /* Evita zoom no iOS */
  }
  
  /* Header controls em linha */
  .header-controls {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 8px !important;
    flex-wrap: wrap !important;
    order: 3;
  }
  
  /* Botão tema mais compacto */
  .theme-toggle {
    padding: 6px 10px !important;
    font-size: 12px !important;
  }
  
  .theme-toggle #themeText {
    display: none !important; /* Esconder texto em mobile */
  }
  
  /* Seletor de idioma compacto */
  #langSelect {
    margin-left: 0 !important;
    padding: 6px 8px !important;
    font-size: 12px !important;
  }
}

@media (max-width: 479px) {
  /* Extra small devices - ainda mais compacto */
  .topbar {
    gap: 8px !important;
  }
  
  .header-controls {
    gap: 6px !important;
  }
  
  .logo {
    font-size: 16px !important;
  }
}

/* ========== CONTADORES NO HEADER (MOBILE) ========== */
@media (max-width: 767px) {
  .header-pomodoro,
  .header-timer {
    padding: 6px 12px !important;
    font-size: 12px !important;
    margin-right: 0 !important;
  }
  
  .header-pomodoro-info,
  .header-timer-info {
    display: none !important; /* Esconder modo, mostrar só tempo */
  }
  
  .header-pomodoro-time,
  .header-timer-time {
    font-size: 12px !important;
  }
  
  .header-pomodoro-controls,
  .header-timer-controls {
    margin-left: 4px !important;
    gap: 2px !important;
  }
  
  .header-pomodoro-btn,
  .header-timer-btn {
    width: 20px !important;
    height: 20px !important;
    font-size: 10px !important;
  }
}

/* ========== SIDEBAR MOBILE ========== */
@media (max-width: 1023px) {
  /* Sidebar como accordion */
  .sidebar h4 {
    padding: 12px 8px !important;
    font-size: 14px !important;
    background: var(--panel2);
    border-radius: 8px;
    margin-bottom: 8px !important;
  }
  
  /* Navegação em grid para melhor uso do espaço */
  .nav {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)) !important;
    gap: 8px !important;
    margin-bottom: 12px !important;
  }
  
  .nav button {
    padding: 10px 8px !important;
    font-size: 12px !important;
    text-align: center !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
}

@media (max-width: 767px) {
  /* Mobile: 2 colunas na navegação */
  .nav {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 6px !important;
  }
  
  .nav button {
    padding: 8px 6px !important;
    font-size: 11px !important;
  }
}

@media (max-width: 479px) {
  /* Extra small: 1 coluna */
  .nav {
    grid-template-columns: 1fr !important;
  }
}

/* ========== CARDS E GRID RESPONSIVO ========== */
@media (max-width: 1023px) {
  /* Cards sempre full width em tablets/mobile */
  .cards {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
  
  .card {
    grid-column: span 1 !important;
    padding: 16px !important;
  }
  
  /* Spans ignorados em mobile */
  .span-7, .span-5, .span-6, .span-12 {
    grid-column: span 1 !important;
  }
}

/* ========== FORMULÁRIOS MOBILE ========== */
@media (max-width: 767px) {
  /* Inputs maiores para touch */
  input, select, textarea {
    padding: 12px !important;
    font-size: 16px !important; /* Evita zoom no iOS */
    border-radius: 8px !important;
  }
  
  /* Labels mais visíveis */
  label {
    font-size: 14px !important;
    font-weight: 600 !important;
    margin-bottom: 6px !important;
    display: block !important;
  }
  
  /* Botões maiores para touch */
  .cta {
    padding: 12px 20px !important;
    font-size: 16px !important;
    min-height: 44px !important; /* Apple guidelines */
  }
  
  .clear-btn {
    padding: 10px 16px !important;
    font-size: 14px !important;
    min-height: 40px !important;
  }
  
  /* Row vira stack em mobile */
  .row {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 12px !important;
  }
  
  /* Grid simplificado */
  .grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
  
  .col-12, .col-6, .col-4, .col-8, .col-3, .col-2 {
    grid-column: span 1 !important;
  }
}

/* ========== FEATURE CARDS (HOME) ========== */
@media (max-width: 1023px) {
  .feature-grid {
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)) !important;
    gap: 16px !important;
  }
}

@media (max-width: 767px) {
  .feature-grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
  
  .feature-card {
    padding: 16px !important;
  }
  
  .feature-icon {
    font-size: 36px !important;
    margin-bottom: 12px !important;
  }
  
  .feature-card h3 {
    font-size: 18px !important;
  }
  
  .feature-card p {
    font-size: 14px !important;
  }
  
  .feature-tags {
    justify-content: flex-start !important;
  }
  
  .tag {
    font-size: 11px !important;
    padding: 3px 6px !important;
  }
}

/* ========== BREADCRUMBS MOBILE ========== */
@media (max-width: 767px) {
  .breadcrumbs .wrap {
    padding: 8px 12px !important;
  }
  
  .breadcrumb-list {
    font-size: 12px !important;
  }
  
  .breadcrumb-link,
  .breadcrumb-current {
    max-width: 150px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }
}

/* ========== CANVAS E MEDIA ========== */
@media (max-width: 767px) {
  canvas {
    max-width: 100% !important;
    height: auto !important;
  }
  
  /* Compressor de imagem */
  #compCanvas {
    max-width: 100% !important;
    max-height: 300px !important;
  }
  
  /* QR Code */
  #qrCanvas {
    max-width: 200px !important;
    max-height: 200px !important;
  }
}

/* ========== TABELAS RESPONSIVAS ========== */
@media (max-width: 767px) {
  .table-responsive {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }
  
  table {
    font-size: 12px !important;
    min-width: 500px !important;
  }
  
  th, td {
    padding: 8px 6px !important;
    white-space: nowrap !important;
  }
}

/* ========== MELHORIAS DE TOQUE ========== */
@media (max-width: 767px) {
  /* Aumentar área de toque para elementos pequenos */
  button, .nav button, .tab-btn {
    min-height: 44px !important;
    min-width: 44px !important;
  }
  
  /* Links e botões com espaçamento adequado */
  a, button {
    touch-action: manipulation !important; /* Evita double-tap zoom */
  }
  
  /* Scrollbar mais visível em mobile */
  ::-webkit-scrollbar {
    width: 8px !important;
  }
  
  ::-webkit-scrollbar-thumb {
    background: var(--border) !important;
    border-radius: 4px !important;
  }
}

/* ========== ORIENTAÇÃO LANDSCAPE ========== */
@media (max-width: 767px) and (orientation: landscape) {
  /* Header mais compacto em landscape */
  .topbar {
    flex-direction: row !important;
    flex-wrap: wrap !important;
  }
  
  .logo {
    font-size: 14px !important;
  }
  
  .search-container {
    flex: 1 !important;
    min-width: 200px !important;
  }
  
  .header-controls {
    order: 3 !important;
    flex-basis: 100% !important;
    justify-content: center !important;
    margin-top: 8px !important;
  }
}

/* ========== DARK MODE MOBILE ADJUSTMENTS ========== */
@media (max-width: 767px) {
  [data-theme="light"] .nav button {
    background: var(--panel2) !important;
    border: 1px solid var(--border) !important;
  }
  
  [data-theme="dark"] .nav button {
    background: var(--panel) !important;
    border: 1px solid var(--border) !important;
  }
}

/* ========== NOTCH SUPPORT (iPhone X+) ========== */
@supports (padding: max(0px)) {
  @media (max-width: 767px) {
    .wrap {
      padding-left: max(12px, env(safe-area-inset-left)) !important;
      padding-right: max(12px, env(safe-area-inset-right)) !important;
    }
    
    header .wrap {
      padding-top: max(12px, env(safe-area-inset-top)) !important;
    }
  }
}

/* ========== PERFORMANCE MOBILE ========== */
@media (max-width: 767px) {
  /* Reduzir animações para melhor performance */
  *, *::before, *::after {
    animation-duration: 0.2s !important;
    transition-duration: 0.2s !important;
  }
  
  /* Desabilitar hover effects em touch devices */
  @media (hover: none) and (pointer: coarse) {
    .feature-card:hover,
    .cta:hover,
    .theme-toggle:hover {
      transform: none !important;
      box-shadow: none !important;
    }
  }
}

/* ========== ACCESSIBILITY MOBILE ========== */
@media (max-width: 767px) {
  /* Aumentar contraste em elementos importantes */
  .cta, .clear-btn {
    font-weight: 700 !important;
  }
  
  /* Focus mais visível */
  input:focus, select:focus, textarea:focus, button:focus {
    outline: 3px solid var(--brand) !important;
    outline-offset: 2px !important;
  }
}

/* ========== LOADER E ESTADOS ========== */
@media (max-width: 767px) {
  .loading {
    padding: 20px !important;
    text-align: center !important;
  }
  
  .error-state {
    padding: 16px !important;
    text-align: center !important;
    font-size: 14px !important;
  }
}

/* ========== PRINT MOBILE ========== */
@media print {
  aside, .header-controls, .breadcrumbs {
    display: none !important;
  }
  
  .app {
    display: block !important;
  }
  
  main {
    width: 100% !important;
  }
}