/* Main content */
.main-content {
    margin-left: var(--shell-sidebar-w) !important;
    /* Em ≥992px vale o `margin-block-start` de authenticated.css (mesma
       propriedade física, declarada depois), então este valor só age abaixo
       de 992px — onde 60px deixava o topo do conteúdo atrás do header. */
    margin-top: var(--shell-header-h) !important;
    width: calc(100vw - var(--shell-sidebar-w)) !important;
    max-width: none !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
}

.main-content .container-fluid {
    max-width: none !important;
    padding: 0 !important;
    width: 100% !important;
    margin: 0 !important;
}

.page-header-breadcrumb {
    margin-top: 0 !important;
    margin-bottom: 1rem !important;
}

/* SIG-519: tabelas largas dentro de `.table-responsive` (Bootstrap, ~146
   usos) rolam na horizontal via `overflow-x: auto` herdado do Bootstrap, mas
   sem nenhuma indicação visual — a coluna de Ações, geralmente a última à
   direita, ficava escondida sem o usuário perceber que dava pra rolar.
   Mesmo padrão visual da scrollbar de #spa-main-content: 8px, cor pelas
   variáveis de tema (funciona em claro e escuro sem trabalho extra). */
.table-responsive::-webkit-scrollbar {
    height: 8px;
    width: 8px;
}

.table-responsive::-webkit-scrollbar-track {
    background: transparent;
}

.table-responsive::-webkit-scrollbar-thumb {
    background: var(--input-border);
    border-radius: 3px;
}

.table-responsive::-webkit-scrollbar-thumb:hover {
    background: var(--text-muted);
}

.table-responsive {
    scrollbar-width: thin;
    scrollbar-color: var(--input-border) transparent;
}

/* SIG-519: última coluna (Ações/Status) presa à borda direita do
   `.table-responsive`. Com a tabela mais larga que o card, os botões continuam
   à vista sem rolar na horizontal, e a sombra à esquerda sinaliza que há mais
   colunas por baixo. Opt-in: só vale onde o th/td recebe a classe. O fundo
   precisa ser opaco (senão as colunas passam por baixo da coluna presa); o
   box-shadow repete o realce de linha do Bootstrap (hover/striped), que também
   é aplicado por box-shadow, para a célula acompanhar o estado da linha. */
.col-fixa-direita {
    position: sticky;
    right: 0;
    z-index: 1;
    white-space: nowrap;
    background-color: var(--custom-white);
    box-shadow:
        inset 0 0 0 9999px var(--bs-table-bg-state, var(--bs-table-bg-type, var(--bs-table-accent-bg))),
        -6px 0 6px -6px rgba(0, 0, 0, 0.25);
}

/* Scrollbar do conteúdo: única área que rola (ver #spa-main-content em
   base.html) — estilizada separada da scrollbar padrão do resto do site
   (body ::-webkit-scrollbar, em static/css/styles.css), que fica em 0.25rem. */
#spa-main-content::-webkit-scrollbar {
    width: 8px;
}

#spa-main-content::-webkit-scrollbar-track {
    background: transparent;
}

#spa-main-content::-webkit-scrollbar-thumb {
    background: var(--input-border);
    border-radius: 3px;
}

#spa-main-content::-webkit-scrollbar-thumb:hover {
    background: var(--text-muted);
}

#spa-main-content {
    scrollbar-width: thin;
    scrollbar-color: var(--input-border) transparent;
}

/* Barra desenhada por static/js/scrollbar-conteudo.js: a nativa não aceita
   `cursor: pointer`. A nativa acima segue como fallback sem o script. */
#spa-main-content.scrollbar-conteudo-ativa,
.table-responsive.scrollbar-conteudo-ativa {
    scrollbar-width: none;
}

#spa-main-content.scrollbar-conteudo-ativa::-webkit-scrollbar,
.table-responsive.scrollbar-conteudo-ativa::-webkit-scrollbar {
    display: none;
}

.scrollbar-conteudo {
    position: fixed;
    width: 8px;
    z-index: 50;
    display: flex;
    flex-direction: column;
    background: rgba(128, 128, 128, 0.22);
    background: color-mix(in srgb, var(--text-muted) 22%, transparent);
    border-radius: 4px;
}

.scrollbar-conteudo[hidden] {
    display: none;
}

/* Tabela dentro de `.modal` do Bootstrap (z-index 1055): sem isto a barra
   desenhada fica escondida atrás do modal. */
.scrollbar-conteudo--em-modal {
    z-index: 1060;
}

.scrollbar-conteudo--horizontal {
    width: auto;
    height: 8px;
    flex-direction: row;
}

.scrollbar-conteudo--horizontal .scrollbar-conteudo__faixa {
    min-height: 0;
    min-width: 0;
}

.scrollbar-conteudo--horizontal .scrollbar-conteudo__seta {
    flex: 0 0 14px;
    width: 14px;
    height: 100%;
}

.scrollbar-conteudo--horizontal .scrollbar-conteudo__polegar {
    width: auto;
    height: 100%;
}

.scrollbar-conteudo--horizontal .scrollbar-conteudo__seta::before {
    border-left: 0;
    border-right: 0;
    border-top: 4px solid transparent;
    border-bottom: 4px solid transparent;
}

.scrollbar-conteudo--horizontal .scrollbar-conteudo__seta--esquerda::before {
    border-right: 6px solid var(--text-muted);
}

.scrollbar-conteudo--horizontal .scrollbar-conteudo__seta--direita::before {
    border-left: 6px solid var(--text-muted);
}

.scrollbar-conteudo--horizontal .scrollbar-conteudo__seta--esquerda:hover::before {
    border-right-color: var(--default-text-color, currentColor);
    opacity: 1;
}

.scrollbar-conteudo--horizontal .scrollbar-conteudo__seta--direita:hover::before {
    border-left-color: var(--default-text-color, currentColor);
    opacity: 1;
}

.scrollbar-conteudo__faixa {
    position: relative;
    flex: 1 1 auto;
    min-height: 0;
    cursor: pointer;
}

.scrollbar-conteudo__seta {
    flex: 0 0 14px;
    width: 100%;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
    position: relative;
}

.scrollbar-conteudo__seta::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    opacity: 0.85;
}

.scrollbar-conteudo__seta--cima::before {
    border-bottom: 6px solid var(--text-muted);
}

.scrollbar-conteudo__seta--baixo::before {
    border-top: 6px solid var(--text-muted);
}

.scrollbar-conteudo__seta--cima:hover::before {
    border-bottom-color: var(--default-text-color, currentColor);
    opacity: 1;
}

.scrollbar-conteudo__seta--baixo:hover::before {
    border-top-color: var(--default-text-color, currentColor);
    opacity: 1;
}

.scrollbar-conteudo__polegar {
    width: 100%;
    background: rgba(128, 128, 128, 0.6);
    background: color-mix(in srgb, var(--text-muted) 60%, transparent);
    border-radius: 3px;
    cursor: pointer;
    touch-action: none;
}

.scrollbar-conteudo__polegar:hover,
.scrollbar-conteudo__polegar--arrastando {
    background: var(--text-muted);
}

/* SIG-692: em 375px os cabeçalhos de tela (`.page-header-breadcrumb > .d-flex`,
   ~120 templates) e a paginação (35 listagens) são linhas flex sem quebra;
   título + botões e contador + páginas estouram a largura e
   `.main-content { overflow-x: hidden }` corta o que sobra. Uma regra aqui
   em vez de tocar cada template. */
@media (max-width: 767.98px) {
    .page-header-breadcrumb > .d-flex,
    #paginacaoContainer,
    #paginacaoContainer > .d-flex {
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    /* `.pagination` sem id: das 35 listagens com paginador, 17 usam
       `#paginacaoContainer` e as outras usam outro id ou nenhum. Só
       `row-gap`: `gap` desfaz o encaixe dos botões do Bootstrap
       (`.page-item:not(:first-child) .page-link { margin-left: -1px }`,
       cantos arredondados só nas pontas) e vira caixas soltas; `row-gap`
       separa só as linhas quando quebra. */
    .pagination {
        flex-wrap: wrap;
        row-gap: 0.5rem;
    }
}

/* Caixa de erro preenchida por `textContent` com o texto de
   `extrairErroApi`, que separa os erros com quebra de linha: sem isto o
   navegador cola as frases numa linha só. */
.texto-multilinha {
    white-space: pre-line;
}