/* ============================================================
   Responsivo Global — Fase 1 (estrutura)
   Aplicado via base.html. Cobre os 290 templates sem alterações
   individuais: modais, tabelas, page-header, filtros, formulários,
   botões e listagens herdam comportamento mobile uniforme.
   ============================================================ */

/* ------------------------------------------------------------
   1. Modais — full-screen em mobile
   Bootstrap por padrão deixa modal com margem lateral em telas
   pequenas, espremendo o conteúdo. Em < 576px, modal ocupa tela
   inteira. Inline styles legados (role="document" style="display: grid;")
   são neutralizados aqui.
   ------------------------------------------------------------ */
@media (max-width: 575.98px) {
  .modal-dialog {
    margin: 0;
    max-width: 100%;
    min-height: 100vh;
    display: flex;
    align-items: stretch;
  }

  .modal-dialog.modal-sm,
  .modal-dialog.modal-md,
  .modal-dialog.modal-lg,
  .modal-dialog.modal-xl {
    max-width: 100%;
  }

  .modal-dialog .modal-content {
    border-radius: 0;
    min-height: 100vh;
    width: 100%;
  }

  .modal-body {
    max-height: calc(100vh - 130px);
    overflow-y: auto;
  }

  .modal-footer {
    flex-wrap: wrap;
    gap: 0.5rem;
  }

  .modal-footer > * {
    flex: 1 1 auto;
    margin: 0;
  }
}

/* ------------------------------------------------------------
   2. Tabelas — transformação em cards no mobile
   Toda tabela .card-table (48+ listagens FlexAdmin/Tabler) vira
   uma lista de cards verticais em < 768px. O JS auxiliar
   js/utils/tabela-mobile-cards.js injeta data-label em cada <td>
   copiando o texto do <th> — sem mexer em template.

   Para tabelas que NÃO devem virar cards (ex.: DRE/DFC analíticos),
   marcar a tag <table> com a classe `.table-no-cards-mobile`.
   ------------------------------------------------------------ */
@media (max-width: 767.98px) {
  .table-responsive {
    -webkit-overflow-scrolling: touch;
  }

  table.card-table:not(.table-no-cards-mobile) {
    display: block;
    width: 100%;
  }

  table.card-table:not(.table-no-cards-mobile) thead {
    display: none;
  }

  table.card-table:not(.table-no-cards-mobile) tbody,
  table.card-table:not(.table-no-cards-mobile) tbody tr,
  table.card-table:not(.table-no-cards-mobile) tbody td,
  table.card-table:not(.table-no-cards-mobile) tfoot,
  table.card-table:not(.table-no-cards-mobile) tfoot tr,
  table.card-table:not(.table-no-cards-mobile) tfoot td {
    display: block;
    width: 100%;
  }

  table.card-table:not(.table-no-cards-mobile) tbody tr,
  table.card-table:not(.table-no-cards-mobile) tfoot tr {
    border: 1px solid var(--bs-border-color, #dee2e6);
    border-radius: 0.5rem;
    margin-bottom: 0.75rem;
    padding: 0.5rem 0.75rem;
    background: var(--bs-body-bg, #fff);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
  }

  table.card-table:not(.table-no-cards-mobile) tfoot tr {
    background: color-mix(in srgb, var(--bs-primary, #2d6a4f) 8%, transparent);
    font-weight: 700;
  }

  table.card-table:not(.table-no-cards-mobile) tbody td,
  table.card-table:not(.table-no-cards-mobile) tfoot td {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem;
    padding: 0.4rem 0;
    border: 0;
    border-bottom: 1px dashed var(--bs-border-color, #e9ecef);
    text-align: right;
    word-break: break-word;
  }

  table.card-table:not(.table-no-cards-mobile) tbody td:last-child,
  table.card-table:not(.table-no-cards-mobile) tfoot td:last-child {
    border-bottom: 0;
  }

  table.card-table:not(.table-no-cards-mobile) tbody td::before,
  table.card-table:not(.table-no-cards-mobile) tfoot td::before {
    content: attr(data-label);
    flex: 0 0 40%;
    text-align: left;
    font-weight: 600;
    font-size: 0.75rem;
    color: var(--muted-color, #6c757d);
    text-transform: uppercase;
    letter-spacing: 0.02em;
  }

  /* Coluna de ações (botões) ocupa linha inteira no card */
  table.card-table:not(.table-no-cards-mobile) tbody td:has(.btn-list),
  table.card-table:not(.table-no-cards-mobile) tbody td:has(.btn) {
    flex-direction: column;
    align-items: stretch;
    text-align: center;
  }

  table.card-table:not(.table-no-cards-mobile) tbody td:has(.btn-list)::before,
  table.card-table:not(.table-no-cards-mobile) tbody td:has(.btn)::before {
    text-align: center;
    flex: none;
    margin-bottom: 0.25rem;
  }

  table.card-table:not(.table-no-cards-mobile) tbody td .btn-list {
    justify-content: center;
  }

  /* Linha vazia (empty state) ocupa o card inteiro */
  table.card-table:not(.table-no-cards-mobile) tbody td[colspan]::before {
    display: none;
  }

  table.card-table:not(.table-no-cards-mobile) tbody td[colspan] {
    justify-content: center;
    text-align: center;
  }
}

/* ------------------------------------------------------------
   3. Page Header — botões empilham bem
   Páginas como Vendas em Trânsito têm 4-5 botões (Filtrar, Nova,
   PDF, Excel) que viram parede em telas estreitas.
   ------------------------------------------------------------ */
@media (max-width: 767.98px) {
  .page-header {
    align-items: stretch;
  }

  .page-header .col,
  .page-header .col-12.col-md-auto,
  .page-header .ms-auto {
    width: 100%;
    margin-left: 0 !important;
  }

  .page-header .d-flex.gap-2 {
    flex-wrap: wrap;
  }

  .page-header .d-flex.gap-2 > .btn,
  .page-header .d-flex.gap-2 > a.btn {
    flex: 1 1 calc(50% - 0.5rem);
    min-width: 0;
    justify-content: center;
  }

  .page-header .page-title {
    font-size: 1.2rem;
  }

  .page-pretitle {
    font-size: 0.7rem;
  }
}

@media (max-width: 575.98px) {
  .page-header .d-flex.gap-2 > .btn,
  .page-header .d-flex.gap-2 > a.btn {
    flex: 1 1 100%;
  }
}

/* ------------------------------------------------------------
   4. Filtros — card-header com inputs em row
   Filtros de busca rápida no topo de listagens devem empilhar
   verticalmente em mobile.
   ------------------------------------------------------------ */
@media (max-width: 767.98px) {
  .card-header .row.g-2 > [class*="col-"],
  .card-header .row > [class*="col-md-"] {
    margin-bottom: 0.5rem;
  }

  .card-header .row.g-2 > [class*="col-"]:last-child {
    margin-bottom: 0;
  }
}

/* ------------------------------------------------------------
   5. Botões de ação em listagens
   .btn-list (coluna AÇÕES com vários ícones) — wrap em mobile.
   ------------------------------------------------------------ */
@media (max-width: 575.98px) {
  .btn-list {
    flex-wrap: wrap;
    gap: 0.25rem !important;
  }

  .btn-list .btn-icon {
    width: 32px;
    height: 32px;
  }
}

/* ------------------------------------------------------------
   6. Input groups com botões
   Em telas estreitas, .input-group com botões anexos quebra.
   ------------------------------------------------------------ */
@media (max-width: 575.98px) {
  .input-group {
    flex-wrap: wrap;
  }

  .input-group > .form-control,
  .input-group > .form-select {
    flex: 1 1 100%;
    border-radius: var(--bs-border-radius);
  }

  .input-group > .btn {
    margin-top: 0.25rem;
    border-radius: var(--bs-border-radius);
  }
}

/* ------------------------------------------------------------
   7. Cards de form/listagem — padding menor em mobile
   ------------------------------------------------------------ */
@media (max-width: 575.98px) {
  .card-body {
    padding: 0.75rem;
  }

  .card-header {
    padding: 0.75rem;
  }

  .card-footer {
    padding: 0.75rem;
  }
}

/* ------------------------------------------------------------
   8. Dropdowns — mais espaço de toque em mobile
   ------------------------------------------------------------ */
@media (max-width: 575.98px) {
  .dropdown-menu {
    min-width: 200px;
  }

  .dropdown-item {
    padding: 0.6rem 1rem;
  }
}

/* ------------------------------------------------------------
   9. Back-to-top — aproxima da borda em telas pequenas
   ------------------------------------------------------------ */
@media (max-width: 575.98px) {
  .back-to-top {
    bottom: 12px;
    right: 12px;
    width: 36px;
    height: 36px;
  }
}

/* ------------------------------------------------------------
   10. (removido) — `style="display: grid;"` em modais foi limpo
   diretamente dos 32 templates legados; override CSS não é
   mais necessário.
   ------------------------------------------------------------ */

/* ------------------------------------------------------------
   11. Quill editor — não estourar largura em mobile
   ------------------------------------------------------------ */
@media (max-width: 575.98px) {
  .ql-toolbar.ql-snow {
    flex-wrap: wrap;
  }

  .ql-container {
    min-height: 120px;
  }
}

/* ------------------------------------------------------------
   12. Forms grandes — labels com mais respiro em mobile
   ------------------------------------------------------------ */
@media (max-width: 575.98px) {
  .form-label {
    margin-bottom: 0.35rem;
  }

  .mb-3 {
    margin-bottom: 0.75rem !important;
  }
}

/* ------------------------------------------------------------
   13. Tabs (nav-tabs/nav-pills) — scroll horizontal em mobile
   ------------------------------------------------------------ */
@media (max-width: 575.98px) {
  .nav-tabs,
  .nav-pills {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .nav-tabs .nav-item,
  .nav-pills .nav-item {
    flex-shrink: 0;
  }
}

/* ============================================================
   FASE 3 — Formulários
   ============================================================ */

/* ------------------------------------------------------------
   14. Card-footer com botões — empilhar em mobile
   Padrão `.card-footer.text-center.text-md-end` (51 ocorrências)
   tem botões em linha no desktop. Em mobile precisa empilhar com
   o botão primário no topo.
   ------------------------------------------------------------ */
@media (max-width: 767.98px) {
  .card-footer.text-center,
  .card-footer.text-md-end,
  .card-footer {
    display: flex;
    flex-direction: column-reverse;
    gap: 0.5rem;
    padding: 0.75rem;
  }

  .card-footer > .btn,
  .card-footer > a.btn,
  .card-footer > button {
    width: 100%;
    margin: 0 !important;
  }

  .card-footer > .ms-auto,
  .card-footer > .me-auto {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}

/* ------------------------------------------------------------
   15. Inputs file, date e textarea — toque maior em mobile
   ------------------------------------------------------------ */
@media (max-width: 575.98px) {
  input[type="file"].form-control,
  input[type="date"].form-control,
  input[type="datetime-local"].form-control,
  input[type="time"].form-control {
    min-height: 42px;
    font-size: 0.95rem;
  }

  textarea.form-control {
    min-height: 90px;
  }

  /* Evita zoom automático do iOS em focus de input com font-size < 16px */
  .form-control,
  .form-select {
    font-size: max(16px, 0.95rem);
  }
}

/* ------------------------------------------------------------
   16. Choices.js (select avançado FlexAdmin) — full width mobile
   ------------------------------------------------------------ */
@media (max-width: 575.98px) {
  .choices {
    width: 100%;
  }

  .choices__inner {
    min-height: 42px;
    font-size: max(16px, 0.95rem);
  }

  .choices[data-type*="select-multiple"] .choices__inner {
    padding-right: 0.5rem;
  }
}

/* ------------------------------------------------------------
   17. Botões em row (form-selectgroup, btn-group) — wrap mobile
   ------------------------------------------------------------ */
@media (max-width: 575.98px) {
  .form-selectgroup {
    flex-direction: column;
    gap: 0.4rem;
  }

  .form-selectgroup-item {
    flex: 1 1 100%;
  }

  .btn-group:not(.btn-group-sm) {
    flex-wrap: wrap;
  }
}

/* ------------------------------------------------------------
   18. Linhas de form (.row > col-md-X) — espaçamento mobile
   col-md-X já colapsa em 1 coluna em < 768px (Bootstrap nativo).
   Garantir margin inferior consistente quando há vários campos.
   ------------------------------------------------------------ */
@media (max-width: 767.98px) {
  .row > [class*="col-md-"]:not(:last-child),
  .row > [class*="col-lg-"]:not(:last-child) {
    margin-bottom: 0.75rem;
  }

  /* Form em modal — não força margin extra (já há .mb-3) */
  .modal-body .row > [class*="col-md-"]:not(:last-child),
  .modal-body .row > [class*="col-lg-"]:not(:last-child) {
    margin-bottom: 0;
  }
}

/* ------------------------------------------------------------
   19. Form de edição/cadastro grande — botão voltar/cancelar
   Páginas como editar_emissao têm botão "Voltar" + "Salvar" no
   rodapé. Garante boa hierarquia visual no mobile.
   ------------------------------------------------------------ */
@media (max-width: 767.98px) {
  .card > form > .card-footer .btn,
  form > .card-footer .btn {
    padding-top: 0.6rem;
    padding-bottom: 0.6rem;
  }
}

/* ------------------------------------------------------------
   20. Switches/checkboxes — área de toque maior
   ------------------------------------------------------------ */
@media (max-width: 575.98px) {
  .form-check {
    padding-left: 1.75em;
    margin-bottom: 0.4rem;
  }

  .form-check-input {
    margin-left: -1.75em;
    width: 1.15em;
    height: 1.15em;
  }

  .form-switch .form-check-input {
    width: 2.2em;
  }
}

/* ============================================================
   FASE 4 — Dashboards e cards
   ============================================================ */

/* ------------------------------------------------------------
   21. Stat cards (KPIs) — empilham 1 por linha em telas estreitas
   ------------------------------------------------------------ */
@media (max-width: 575.98px) {
  .col-stats,
  .col-card-stat,
  .card.card-stats,
  .card-kpi {
    margin-bottom: 0.75rem;
  }

  .card-stats .h1,
  .card-stats .h2,
  .card-kpi .valor,
  .card-kpi .h2 {
    font-size: 1.5rem;
  }
}

/* ------------------------------------------------------------
   22. ApexCharts / gráficos — altura adaptada
   ------------------------------------------------------------ */
@media (max-width: 575.98px) {
  .apexcharts-canvas,
  [id^="chart-"],
  .chart-container {
    width: 100% !important;
  }

  /* Legenda dos gráficos quebra em várias linhas */
  .apexcharts-legend {
    flex-wrap: wrap !important;
  }
}

/* ------------------------------------------------------------
   23. Painel operacional / cards de status em grid
   ------------------------------------------------------------ */
@media (max-width: 767.98px) {
  .painel-op__head {
    flex-direction: column;
    align-items: stretch;
    gap: 0.75rem;
  }

  .painel-op__head-direita,
  .painel-op__filtros {
    width: 100%;
    justify-content: space-between;
  }

  .painel-op__filtro {
    flex: 1;
  }
}

/* ------------------------------------------------------------
   24. Kanban — scroll horizontal em mobile (colunas mantidas)
   ------------------------------------------------------------ */
@media (max-width: 767.98px) {
  .kanban-board,
  .kanban-container {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .kanban-column,
  .kanban-coluna {
    min-width: 280px;
  }
}

/* ============================================================
   FASE 5 — Telas de relatório (filtros)
   ============================================================ */

/* ------------------------------------------------------------
   25. Form de filtros de relatório — empilhar
   Relatórios têm modais com 6-10 inputs em grid; já cobertos
   por regra 18. Aqui ajustamos botões de Exportar.
   ------------------------------------------------------------ */
@media (max-width: 575.98px) {
  .btn-exportar-pdf,
  .btn-exportar-excel,
  button[name="exportar_pdf"],
  button[name="exportar_excel"] {
    width: 100%;
  }
}

/* ------------------------------------------------------------
   26. Breadcrumb com muitos níveis — wrap
   ------------------------------------------------------------ */
@media (max-width: 575.98px) {
  .breadcrumb {
    font-size: 0.7rem;
    flex-wrap: wrap;
  }

  .breadcrumb-item {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

/* ------------------------------------------------------------
   27. Alertas/flash messages — padding compacto
   ------------------------------------------------------------ */
@media (max-width: 575.98px) {
  .alert {
    padding: 0.6rem 0.75rem;
    font-size: 0.875rem;
  }

  .alert .btn-close {
    padding: 0.5rem;
  }
}

/* ============================================================
   FASE 7 — UX mobile (touch targets, sticky, micro-ajustes)
   ============================================================ */

/* ------------------------------------------------------------
   28. Touch targets mínimos 44x44 (Apple HIG / WCAG 2.5.5)
   Garante que botões/links interativos tenham área de toque
   confortável em mobile.
   ------------------------------------------------------------ */
@media (max-width: 767.98px) {
  .btn:not(.btn-sm):not(.btn-xs):not(.btn-icon),
  a.btn:not(.btn-sm):not(.btn-xs):not(.btn-icon) {
    min-height: 44px;
  }

  .nav-link,
  .dropdown-item,
  .pagination .page-link {
    min-height: 44px;
    display: flex;
    align-items: center;
  }

  .sidebar-toggle {
    min-width: 44px;
    min-height: 44px;
  }

  /* Botões de ícone em listagens — 36px é suficiente, ainda confortável */
  .btn-icon {
    min-width: 36px;
    min-height: 36px;
  }
}

/* ------------------------------------------------------------
   29. Header com sidebar-toggle bem visível no mobile
   ------------------------------------------------------------ */
@media (max-width: 1199.98px) {
  .sidebar-toggle {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
  }

  .sidebar-toggle i {
    font-size: 1.4rem;
  }
}

/* ------------------------------------------------------------
   30. Notif dropdown — full-width em mobile estreito
   ------------------------------------------------------------ */
@media (max-width: 575.98px) {
  .dropdown-notif {
    position: fixed !important;
    top: var(--header-height, 56px) !important;
    left: 8px !important;
    right: 8px !important;
    width: auto !important;
    max-width: none !important;
    transform: none !important;
  }

  .dropdown-notif__lista {
    max-height: calc(100vh - 200px);
    overflow-y: auto;
  }
}

/* ------------------------------------------------------------
   31. Sidebar mobile — scroll suave e fechar com transição
   ------------------------------------------------------------ */
@media (max-width: 1199.98px) {
  .sidebar {
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }

  .sidebar-nav {
    padding-bottom: 80px;
  }
}

/* ------------------------------------------------------------
   32. Empty states — ícone gigante (font-size: 70px inline) escala
   Inline style 70px estoura cards estreitos. Override por seletor
   de atributo + clamp pra escalar bem.
   ------------------------------------------------------------ */
@media (max-width: 575.98px) {
  [style*="font-size: 70px"] {
    font-size: clamp(40px, 14vw, 70px) !important;
  }

  [style*="padding: 30px"] {
    padding: 1.25rem !important;
  }
}

/* ------------------------------------------------------------
   33. Print fallback — esconde sidebar/header em impressão
   ------------------------------------------------------------ */
@media print {
  .sidebar,
  .header,
  .sidebar-overlay,
  .back-to-top,
  .mobile-header-menu {
    display: none !important;
  }

  .main {
    margin-left: 0 !important;
    margin-top: 0 !important;
  }
}

/* ============================================================
   FASE 8 — Dashboard principal (telão / mobile)
   ============================================================ */

/* ------------------------------------------------------------
   34. Espaçamentos do dashboard — compactar no mobile
   .page-body, .dashboard-section e .glass-card usam padding/
   margin pensados pra desktop. Em < 768px ficam soltos demais.
   ------------------------------------------------------------ */
@media (max-width: 767.98px) {
  .page-body {
    padding: 0.75rem 0 !important;
  }

  .dashboard-container {
    padding: 0 0.5rem;
  }

  .dashboard-section {
    margin-bottom: 1.25rem !important;
  }

  .glass-card {
    padding: 0.75rem !important;
    border-radius: 12px;
  }

  .chart-header {
    padding: 0.75rem !important;
  }

  .chart-body {
    padding: 0.5rem !important;
  }

  .chart-title {
    font-size: 0.95rem !important;
  }
}

/* ------------------------------------------------------------
   35. Canvas / charts — escalar à largura disponível
   O gauge usa <canvas width="380" height="240"> fixo. Forçamos
   max-width: 100% mantendo aspect ratio.
   ------------------------------------------------------------ */
@media (max-width: 767.98px) {
  #gauge-canvas,
  canvas[id^="gauge-"],
  #gauge-fluxo-entregas canvas {
    max-width: 100% !important;
    height: auto !important;
  }

  #gauge-fluxo-entregas {
    max-width: 100% !important;
  }

  #chart-toneladas-por-mes,
  [id^="chart-"]:not(.dont-shrink) {
    min-height: 200px !important;
  }
}

/* ------------------------------------------------------------
   36. Stat cards — espaçamento e proporção em mobile
   Cards "CARGAS SEM NF" etc ficam com muita altura/padding.
   ------------------------------------------------------------ */
@media (max-width: 767.98px) {
  .stat-card {
    padding: 0.75rem 1rem !important;
    margin-bottom: 0.5rem;
  }

  .stat-content {
    gap: 0.75rem !important;
  }

  .stat-icon {
    width: 40px !important;
    height: 40px !important;
    flex-shrink: 0;
  }

  .stat-icon svg {
    width: 20px;
    height: 20px;
  }

  .stat-label {
    font-size: 0.75rem !important;
  }

  .stat-value {
    font-size: 1.5rem !important;
    line-height: 1.1 !important;
  }
}

/* ------------------------------------------------------------
   37. Carrossel do dashboard — indicadores e padding
   ------------------------------------------------------------ */
@media (max-width: 575.98px) {
  #carouselDashboard {
    padding-bottom: 1.5rem !important;
  }

  #carouselDashboard .carousel-item {
    padding: 0 0.25rem !important;
  }
}

/* ------------------------------------------------------------
   38. Back-to-top — não cobrir conteúdo importante no mobile
   ------------------------------------------------------------ */
@media (max-width: 575.98px) {
  .back-to-top {
    bottom: 70px !important;
  }
}

/* ------------------------------------------------------------
   39. Ambiente nao-prod banner — não duplicar selo no mobile
   O selo "LOCAL/NÃO OFICIAL" fixo (`__selo`) + barra superior
   com mesma info viram ruído em telas estreitas. Esconde o selo
   flutuante; mantém a barra do topo.
   ------------------------------------------------------------ */
@media (max-width: 575.98px) {
  .ambiente-aviso-global__selo {
    display: none !important;
  }
}

/* ------------------------------------------------------------
   40. Painel Dev Root (.erp-root) — KPIs em scroll horizontal
   Os 4 cards (Erros, Solicitações, Huey, Logins) em grade 2x2
   ficam altos demais no mobile. Convertemos em fila com swipe
   horizontal nativo + snap, mostrando 1.3 cards por vez.
   Também compactamos padding/fontes.
   ------------------------------------------------------------ */
@media (max-width: 767.98px) {
  /* Container dos 4 KPIs vira fila horizontal */
  .erp-root .row.g-3.align-items-stretch {
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 0.25rem;
  }

  .erp-root .row.g-3.align-items-stretch::-webkit-scrollbar {
    display: none;
  }

  .erp-root .row.g-3.align-items-stretch > [class*="col-"] {
    flex: 0 0 78%;
    max-width: 78%;
    scroll-snap-align: start;
  }

  /* Compactar conteúdo dos KPI cards */
  .erp-root .glass-card .p-4 {
    padding: 0.85rem !important;
  }

  .erp-root .glass-card .gap-3 {
    gap: 0.6rem !important;
  }

  .erp-root .glass-card .mb-3 {
    margin-bottom: 0.5rem !important;
  }

  .erp-root .stat-icon {
    width: 36px !important;
    height: 36px !important;
  }

  .erp-root .stat-icon svg {
    width: 18px;
    height: 18px;
  }

  .erp-root [id^="kpi"] {
    font-size: 1.5rem !important;
  }

  /* Eyebrow + descrição menores */
  .erp-root .glass-card .fw-bold[style*="font-size:.72rem"] {
    font-size: 0.65rem !important;
  }

  .erp-root .glass-card .text-muted[style*="font-size:.68rem"] {
    font-size: 0.62rem !important;
  }
}

/* ------------------------------------------------------------
   41. Painel Dev Root — tabs ERP em scroll horizontal
   `.erp-tabs` (Alertas/Operação/Auditoria) também vira fila
   com scroll no mobile, evita quebrar em duas linhas.
   ------------------------------------------------------------ */
@media (max-width: 575.98px) {
  .erp-tabs {
    flex-wrap: nowrap !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .erp-tabs::-webkit-scrollbar {
    display: none;
  }

  .erp-tab {
    flex-shrink: 0;
  }
}