/* ==========================================================================
   Painel Legacy - estilos globais compartilhados (scrollbar + responsividade)
   ========================================================================== */

:root {
  --sb-track: #05070b;
  --sb-thumb-a: #2563eb;
  --sb-thumb-b: #1d4ed8;
  --sb-thumb-hover-a: #3b82f6;
  --sb-thumb-hover-b: #2563eb;
  color-scheme: dark;
}

/* ---------- Scrollbar global: fundo preto + barra azul ---------- */
/* Chrome, Edge, Opera, Safari (e qualquer área rolável: página, tabelas, modais, textareas) */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
  background: var(--sb-track);
}
::-webkit-scrollbar-track {
  background: var(--sb-track);
}
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--sb-thumb-a), var(--sb-thumb-b));
  border-radius: 8px;
  border: 2px solid var(--sb-track);
}
::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, var(--sb-thumb-hover-a), var(--sb-thumb-hover-b));
}
::-webkit-scrollbar-corner {
  background: var(--sb-track);
}
/* Firefox (e navegadores sem ::-webkit-scrollbar) */
@supports not selector(::-webkit-scrollbar) {
  * {
    scrollbar-width: thin;
    scrollbar-color: var(--sb-thumb-a) var(--sb-track);
  }
}

/* ---------- Base responsiva ---------- */
html, body {
  max-width: 100%;
}
body {
  overflow-x: hidden; /* rede de segurança: a rolagem horizontal fica só dentro das tabelas */
}
img, video, svg {
  max-width: 100%;
}
#page-content-wrapper {
  min-width: 0 !important;
  max-width: 100%;
}
.container-fluid {
  max-width: 100%;
}

/* ---------- Componentes do painel ---------- */
.panel-badge {
  display: inline-block;
  padding: 10px 14px;
  border: 1px solid var(--card-border);
  color: var(--text-main);
  background: rgba(255, 255, 255, .04);
  border-radius: 10px;
  font-size: 13px;
  font-weight: 600;
  white-space: normal;
}
.panel-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.panel-toolbar-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.cell-break {
  word-break: break-all;
}
/* Descrição: texto livre; quebra por palavra e não estica a tabela */
.cell-desc {
  min-width: 140px;
  max-width: 320px;
  white-space: normal;
  word-break: break-word;
}

/* Tabelas: a rolagem horizontal acontece dentro do contêiner, nunca na página */
.table-responsive {
  display: block;
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.table td, .table th {
  vertical-align: middle;
}

/* Modais e alertas nunca passam da largura da tela */
.modal-dialog {
  max-width: min(500px, calc(100vw - 24px));
}
#pageMessages .alert {
  margin-bottom: 8px;
}
.alert {
  word-break: break-word;
}

/* ---------- Tablet ---------- */
@media (max-width: 991px) {
  .navbar {
    padding: 12px 14px;
  }
  .card-header h2 {
    font-size: 1.5rem;
  }
}

/* ---------- Celular ---------- */
@media (max-width: 767px) {
  h2 { font-size: 1.35rem; }
  h3 { font-size: 1.15rem; }

  .container-fluid {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
  .card-header h2 { font-size: 1.2rem; }
  .card-body { padding: 14px; }

  /* títulos e badges centralizados em telas pequenas */
  .text-md-right { text-align: center !important; }
  .row.mb-3 > [class*="col-"] { text-align: center; }
  .panel-toolbar { justify-content: center; text-align: center; }
  .panel-toolbar-actions { justify-content: center; width: 100%; }
  .panel-toolbar-actions .btn { flex: 1 1 100%; }

  /* formulários: campos e botões ocupam a largura toda */
  .form-group .btn,
  form > .text-center .btn { width: 100%; margin-bottom: 8px; }
  .input-group { flex-wrap: nowrap; }

  /* a tabela mantém largura mínima e rola dentro do contêiner */
  .table-responsive > .table {
    min-width: 560px;
  }

  .modal-dialog { margin: 12px auto; }
  #pageMessages { width: calc(100% - 24px) !important; }

  .metric-value { word-break: break-word; }
}

/* ---------- Telas muito pequenas ---------- */
@media (max-width: 400px) {
  .navbar .btn { padding-left: 10px; padding-right: 10px; }
  .panel-badge { width: 100%; }
}