/* =====================================================
   FIX APENAS PARA TABELAS E STATUS TOPO - MÓDULO EB
   SEM alterações em dropdowns, menus ou outros elementos
   ===================================================== */

/* ================================================
   CORREÇÃO BARRA DE STATUS (MENU TOPO)
   ================================================ */

/* Navbar left com scroll horizontal */
.navbar-left .table {
  white-space: nowrap !important;
  width: auto !important;
  margin: 0 !important;
  display: table !important;
}

.navbar-left .table tbody {
  display: table-row-group !important;
}

.navbar-left .table tr {
  display: table-row !important;
}

/* Status cards no menu superior */
.navbar-left .table td.status {
  display: table-cell !important;
  white-space: nowrap !important;
  min-width: 140px !important;
  font-size: 11px !important;
  padding: 10px 12px !important;
  vertical-align: middle !important;
}

/* ================================================
   TABELAS DE CONTEÚDO
   ================================================ */

/* X_panel - container principal não deve extrapolar */
.x_panel {
  overflow: hidden !important;
  max-width: 100% !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

/* X_title também não deve extrapolar */
.x_title {
  max-width: 100% !important;
  width: 100% !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}

/* Container com scroll horizontal para tabelas */
.x_content {
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/* Tabelas não devem ultrapassar */
.x_content .table {
  margin-bottom: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
}

/* Gráficos responsivos */
canvas {
  max-width: 100% !important;
  width: 100% !important;
  height: auto !important;
}

/* Container de gráfico */
.x_content canvas,
.x_content svg,
.x_content img {
  max-width: 100% !important;
  width: 100% !important;
  height: auto !important;
}

/* ================================================
   MOBILE: Tabelas com scroll horizontal
   ================================================ */

@media (max-width: 767px) {
  
  /* ===== BARRA DE STATUS MOBILE (TOPO) ===== */
  
  /* Top nav principal sem scroll */
  .top_nav {
    position: relative !important;
    z-index: 999 !important;
  }
  
  /* Nav menu com z-index */
  .nav_menu {
    z-index: 1000 !important;
    position: relative !important;
  }
  
  /* Botões vermelhos do topo */
  .top_nav .btn,
  .top_nav a[style*="background"] {
    font-size: 10px !important;
    padding: 8px 10px !important;
    white-space: nowrap !important;
  }
  
  /* ===== CARDS DE NOTIFICAÇÃO (VERDE, LARANJA, VERMELHO) ===== */
  
  /* Cards de notificação responsivos */
  .col-md-4.col-sm-4.col-xs-12 {
    margin-bottom: 15px !important;
  }
  
  /* Cards com alert/notificação */
  .alert {
    font-size: 13px !important;
    padding: 12px !important;
    margin-bottom: 10px !important;
    word-wrap: break-word !important;
  }
  
  /* ===== CARDS DE CONTAGEM (PERÍODO ATUAL, GESTÃO FROTA) ===== */
  
  /* Ícones nos cards */
  .x_panel .fa,
  .x_panel i {
    font-size: 24px !important;
  }
  
  /* Números grandes nos cards */
  .x_panel h2,
  .x_panel .count {
    font-size: 28px !important;
    line-height: 1.2 !important;
  }
  
  /* Textos descritivos nos cards */
  .x_panel p,
  .x_panel span {
    font-size: 12px !important;
    word-wrap: break-word !important;
  }
  
  /* ===== NAVBAR LEFT (CARDS STATUS) ===== */
  
  /* Container com scroll horizontal apenas em mobile */
  .navbar-left {
    width: 100% !important;
    overflow-x: auto !important;
    overflow-y: visible !important;
    -webkit-overflow-scrolling: touch !important;
    display: block !important;
  }
  
  .navbar-left .table {
    display: table !important;
    width: auto !important;
    min-width: 100% !important;
  }
  
  .navbar-left .table tbody {
    display: table-row-group !important;
  }
  
  .navbar-left .table tr {
    display: table-row !important;
  }
  
  /* Status cards menores em mobile */
  .navbar-left .table td.status {
    display: table-cell !important;
    min-width: 120px !important;
    max-width: 120px !important;
    font-size: 9px !important;
    padding: 8px 6px !important;
    vertical-align: middle !important;
  }
  
  /* ===== TABELAS CONTEÚDO ===== */
  
  /* Garantir que NADA extrapole o viewport */
  .right_col {
    overflow-x: hidden !important;
    max-width: 100% !important;
  }
  
  /* Rows não devem extrapolar */
  .row {
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  
  /* Colunas não devem extrapolar */
  .col-md-6, .col-md-12,
  .col-sm-6, .col-sm-12,
  .col-xs-6, .col-xs-12 {
    padding-left: 10px !important;
    padding-right: 10px !important;
    max-width: 100% !important;
  }
  
  /* X_panel forçar a não extrapolar */
  .x_panel {
    max-width: 100% !important;
    width: 100% !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }
  
  /* X_title não extrapolar */
  .x_title {
    max-width: 100% !important;
    width: 100% !important;
    overflow: hidden !important;
    word-wrap: break-word !important;
    box-sizing: border-box !important;
  }
  
  .x_title h2 {
    font-size: 16px !important;
    word-wrap: break-word !important;
  }
  
  /* X_content forçar containers a não extrapolarem */
  .x_content {
    max-width: 100% !important;
    width: 100% !important;
    overflow-x: auto !important;
    box-sizing: border-box !important;
  }
  
  /* Tabelas mantêm estrutura com scroll */
  .table {
    min-width: 600px;
    font-size: 12px;
    width: 100% !important;
    max-width: 100% !important;
  }
  
  .table thead th {
    font-size: 11px;
    padding: 8px 6px !important;
    white-space: nowrap;
  }
  
  .table tbody td {
    font-size: 11px;
    padding: 6px 4px !important;
    white-space: nowrap;
  }
  
  /* ===== GRÁFICOS ===== */
  
  /* Forçar gráficos a caberem no container */
  canvas,
  .x_content canvas,
  .x_content svg {
    max-width: 100% !important;
    width: 100% !important;
    height: auto !important;
    display: block !important;
  }
  
  /* Container de gráfico não extrapolar */
  #graph_bar,
  #graph_area,
  [id*="graph"],
  [id*="chart"] {
    max-width: 100% !important;
    width: 100% !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }
  
  /* Legenda do gráfico */
  .tile_info {
    font-size: 11px !important;
  }
  
  .tile_info td {
    padding: 4px 6px !important;
    font-size: 10px !important;
  }
}

/* ================================================
   TABLET
   ================================================ */

@media (min-width: 768px) and (max-width: 991px) {
  
  .table {
    font-size: 13px;
  }
  
  .table thead th {
    font-size: 12px;
    padding: 10px 8px !important;
  }
  
  .table tbody td {
    font-size: 12px;
    padding: 8px 6px !important;
  }
}