/*
  NormaOne — Sidebar dos módulos internos (Refinamento do Design System — Densidade, Sidebar e
  Responsividade)

  Fonte única e compartilhada para as 4 telas que hoje reimplementam o mesmo padrão "coluna de
  navegação + coluna de conteúdo" via MudGrid (SegurancaModulo, ColaboradorDetalhe,
  InstalacoesEletricasModulo, EmpresaDetalhe) — cada uma tinha sua própria cópia de
  `Style="justify-content:flex-start;"` e nenhuma controlava a largura da coluna, que crescia
  proporcionalmente à tela (MudGrid `sm="3" md="2"` = 25%/16,7% da largura, não um valor fixo).
  Corrigido na origem aqui, uma vez só, em vez de em cada página. Carregado depois de density.css
  em App.razor.

  NÃO é a barra superior (etapa separada, não tocada aqui) — isto é exclusivamente a coluna de
  navegação interna que aparece dentro de Segurança, Ficha do Colaborador, Instalações Elétricas e
  Detalhe da Empresa.
*/

/* Coluna da sidebar: largura fixa, não cresce com a tela (Regra Fundamental da etapa: tela maior
   não deve significar sidebar maior, o espaço extra vai para o conteúdo). As props xs/sm/md do
   MudItem continuam nas telas (valor "morto", sobrescrito aqui) para não precisar reestruturar o
   MudGrid de cada página. */
.module-sidebar-col {
    flex: 0 0 224px !important;
    max-width: 224px !important;
    width: 224px !important;
}

/* Coluna de conteúdo: ocupa todo o espaço restante. */
.module-content-col {
    flex: 1 1 0 !important;
    max-width: 100% !important;
    min-width: 0; /* evita que tabelas largas estourem a coluna em vez de rolar internamente */
}

/* Botão de navegação — compacto (altura ~38px, ícone ~19px, fonte 13px, gap ~9px), igual nas 4
   telas. Quando o texto for longo demais para 224px (ex.: "Relatório das Instalações Elétricas
   (RIT)"), quebra em até 2 linhas de forma controlada — nunca corta/trunca, nunca overflow. */
.module-nav-btn.mud-button-root {
    min-height: 38px;
    padding: 7px 12px;
    font-size: 13px;
    border-radius: 6px;
    text-transform: none;
}

    .module-nav-btn .mud-button-label {
        white-space: normal;
        line-height: 1.3;
        text-align: left;
        gap: 9px;
    }

    .module-nav-btn .mud-icon-root {
        font-size: 19px;
        flex-shrink: 0;
    }

/* Variante usada pela Segurança (ícone alinhado ao topo do texto quando quebra em 2 linhas — ver
   `nav-item-content`/`nav-item-text` em SegurancaModulo.razor, migrado para cá). */
.nav-item-seguranca.mud-button-root {
    min-height: 38px;
    padding: 7px 12px;
    border-radius: 6px;
}

.nav-item-content {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    width: 100%;
    text-align: left;
}

    .nav-item-content .mud-icon-root {
        flex-shrink: 0;
        font-size: 19px;
        margin-top: 2px;
    }

.nav-item-text {
    text-align: left;
    white-space: normal;
    line-height: 1.3;
    font-size: 13px;
    flex: 1 1 auto;
}

/* Categoria da sidebar (ex.: "CATÁLOGOS", "PROCEDIMENTOS") — hierarquia própria, mas compacta. */
.module-nav-category {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    opacity: 0.6;
    margin: 6px 0 2px 10px;
}