/* ============================================================================
   MOBILE RESPONSIVE STYLES - MAPA-RT Dashboard
   Mobile First Approach - Escrito do zero
   ============================================================================ */

/* ============================================================================
   BASE MOBILE (< 768px) - Aplicado apenas em mobile/tablet
   ============================================================================ */

@media (max-width: 768px) {

  /* Layout Principal */
  .app-layout {
    display: flex;
    flex-direction: column;
    padding-top: 70px;
    min-height: 100vh;
  }

  /* Header */
  .header__content {
    flex-direction: column;
    gap: 12px;
    padding: 12px;
  }

  .header__logo h1 {
    font-size: 18px;
  }

  .header__logo span {
    font-size: 11px;
  }

  .header__actions {
    width: 100%;
    justify-content: space-between;
  }

  .header__search {
    flex: 1;
    max-width: none;
  }

  /* Sidebar → Menu Horizontal */
  .sidebar {
    width: 100%;
    height: auto;
    position: sticky;
    top: 0;
    z-index: 100;
    border-right: none;
    border-bottom: 1px solid var(--color-border);
  }

  .nav-menu {
    display: flex;
    flex-direction: row;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 8px 12px;
    gap: 4px;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
  }

  .nav-item {
    flex-shrink: 0;
    padding: 8px 12px;
  }

  .nav-text {
    font-size: 12px;
  }

  /* Main Content */
  .main-content {
    padding: 16px;
    margin-left: 0;
    width: 100%;
    max-width: 100vw;
    overflow-x: hidden;
  }

  .content-section {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
  }

  .content-section--active {
    display: block;
  }

  /* ========== KPI CARDS - SOLUÇÃO DEFINITIVA ========== */
  
  /* Grid: 2 colunas em tablets, 1 coluna em celulares */
  .kpis-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    width: 100%;
  }

  /* Todos os cards KPI - Base comum */
  .kpi-card {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 12px;
    padding: 12px;
    width: 100%;
    min-width: 0;
  }

  /* Card de alerta - preservar estilo */
  .kpi-card.kpi-card--alert {
    display: flex;
    flex-direction: row;
    align-items: center;
  }

  .kpi-card__icon {
    font-size: 24px;
    flex-shrink: 0;
  }

  .kpi-card__content {
    flex: 1;
    min-width: 0;
  }

  .kpi-card__value {
    font-size: 20px;
    font-weight: bold;
  }

  .kpi-card__label {
    font-size: 11px;
    white-space: normal;
    line-height: 1.2;
  }

  /* ========== CHARTS ========== */
  
  .charts-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
    width: 100%;
  }

  .chart-card {
    padding: 16px;
    width: 100%;
    min-width: 0;
  }

  .chart-container {
    width: 100%;
    min-width: 0;
  }

  canvas {
    max-width: 100%;
    height: auto;
  }

  /* ========== TABLES ========== */
  
  .table-container {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  table {
    min-width: 600px;
  }

  th, td {
    padding: 8px;
    font-size: 12px;
  }

  /* ========== MODAL ========== */
  
  .modal {
    width: 95%;
    max-width: 95%;
    max-height: 90vh;
    margin: 16px;
  }

  .modal__content {
    padding: 16px;
  }

  /* ========== GRIDS ========== */
  
  .phases-grid,
  .contadores-grid {
    display: grid;
    grid-template-columns: 1fr;
    width: 100%;
  }

  /* ========== ALERTS ========== */
  
  .alerts-panel {
    width: 100%;
  }

  .alert-item {
    flex-direction: column;
    gap: 8px;
    align-items: flex-start;
  }

  /* ========== MISC ========== */
  
  .content-card,
  .card {
    padding: 12px;
    width: 100%;
    min-width: 0;
  }

  .btn {
    padding: 8px 12px;
    font-size: 12px;
  }

  .section-header {
    flex-direction: column;
    gap: 8px;
    align-items: flex-start;
  }

  .section-header h2 {
    font-size: 18px;
  }

  .filters {
    flex-direction: column;
    gap: 8px;
  }

  .filter-group {
    width: 100%;
  }

  /* Prevenir zoom em inputs no iOS */
  select,
  input[type="text"],
  input[type="search"] {
    font-size: 16px;
  }

  .task-item {
    grid-template-columns: 1fr;
    gap: 8px;
    padding: 12px;
  }

  .task-phase-header {
    flex-direction: column;
    gap: 8px;
    align-items: flex-start;
  }

  .panel-header {
    flex-wrap: wrap;
    gap: 8px;
  }

}

/* ============================================================================
   SMARTPHONES PEQUENOS (< 480px) - 1 coluna
   ============================================================================ */

@media (max-width: 480px) {
  
  /* KPIs em coluna única */
  .kpis-grid {
    grid-template-columns: 1fr;
  }

  /* Header compacto */
  .header {
    padding: 8px 0;
  }

  .header__logo h1 {
    font-size: 16px;
  }

  .header__user {
    display: none;
  }

  /* Navegação apenas ícones */
  .nav-text {
    display: none;
  }

  .nav-item {
    padding: 8px;
    justify-content: center;
    min-width: 44px;
  }

  .nav-icon {
    font-size: 16px;
  }

  /* Conteúdo mais compacto */
  .main-content {
    padding: 12px;
  }

  .card,
  .chart-card,
  .content-card {
    padding: 12px;
  }

  /* Modal tela cheia */
  .modal {
    width: 100%;
    max-width: 100%;
    height: 100vh;
    max-height: 100vh;
    margin: 0;
    border-radius: 0;
  }

  /* Tabelas menores */
  table {
    min-width: 500px;
  }

  th, td {
    padding: 6px;
    font-size: 11px;
  }

  .progress-bar {
    min-width: 60px;
  }

  .status-badge {
    padding: 4px 6px;
    font-size: 10px;
  }

  .btn--sm {
    padding: 6px 8px;
    font-size: 11px;
  }

}

/* ============================================================================
   IPHONE SE e menores (< 400px)
   ============================================================================ */

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

  .main-content {
    padding: 12px;
  }

}

/* ============================================================================
   TABLETS MÉDIOS (601px - 900px)
   ============================================================================ */

@media (min-width: 601px) and (max-width: 900px) {
  
  .kpis-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .sidebar {
    width: 200px;
  }

  .phases-grid {
    grid-template-columns: repeat(2, 1fr);
  }

}

/* ============================================================================
   TABLETS LANDSCAPE
   ============================================================================ */

@media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
  
  .kpis-grid {
    grid-template-columns: repeat(4, 1fr);
  }

  .charts-grid {
    grid-template-columns: repeat(2, 1fr);
  }

}

/* ============================================================================
   ALTURA PEQUENA (Landscape)
   ============================================================================ */

@media (max-height: 500px) and (orientation: landscape) {
  
  .header {
    padding: 4px 0;
  }

  .main-content {
    padding: 8px;
  }

  .kpi-card {
    padding: 8px;
  }

}

/* ============================================================================
   DISPOSITIVOS TOUCH
   ============================================================================ */

@media (hover: none) and (pointer: coarse) {
  
  /* Áreas de toque mínimas */
  .btn,
  .nav-item,
  button,
  a {
    min-height: 44px;
    min-width: 44px;
  }

  /* Desabilitar hover em touch */
  .nav-item:hover,
  .btn:hover {
    transform: none;
  }

  /* Feedback touch */
  .btn:active,
  .nav-item:active {
    transform: scale(0.98);
    opacity: 0.8;
  }

}

/* ============================================================================
   SAFE AREA (iPhone X+)
   ============================================================================ */

@supports (padding: env(safe-area-inset-left)) {
  
  @media (max-width: 768px) {
    .header__content {
      padding-left: env(safe-area-inset-left);
      padding-right: env(safe-area-inset-right);
    }

    .main-content {
      padding-left: max(16px, env(safe-area-inset-left));
      padding-right: max(16px, env(safe-area-inset-right));
      padding-bottom: max(16px, env(safe-area-inset-bottom));
    }
  }

}

/* ============================================================================
   REDUCED MOTION
   ============================================================================ */

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

}

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

@media print {
  
  .header,
  .sidebar,
  .nav-menu,
  .filters,
  .btn {
    display: none;
  }

  .main-content {
    margin: 0;
    padding: 0;
  }

  .kpis-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .chart-card {
    page-break-inside: avoid;
  }

}