/**
 * Identidade visual do painel web alinhada ao app mobile (semur-v1-mobile).
 * Paleta/tokens copiados de semur-v1-mobile/src/theme/variables.scss.
 * Carregado por último em main.php — sobrepõe material-dashboard.css e
 * custom-geral.css/custom-admin.css sem alterar o markup Yii existente.
 */

:root {
    --app-primary: #2563eb;
    --app-primary-rgb: 37, 99, 235;
    --app-tertiary: #ea580c;
    --app-success: #16a34a;
    --app-warning: #f59e0b;
    --app-danger: #dc2626;
    --app-neutral: #64748b;

    --app-canvas: #e8f1fc;
    --app-surface: #ffffff;
    --app-surface-2: #eef1f6;
    --app-border: #dce6f4;

    --app-text: #16233d;
    --app-text-body: #1e293b;
    --app-text-muted: #64748b;
    --app-chip-bg: #eaf1fd;

    --app-acc-reds: #584fee;
    --app-acc-rsm: #1a8a74;
    --app-acc-transito: #3f6a8f;
}

/* dark mode segue a preferência do sistema por padrão... */
@media (prefers-color-scheme: dark) {
    :root {
        --app-canvas: #0c1220;
        --app-surface: #141d2e;
        --app-surface-2: #182236;
        --app-border: #26334a;

        --app-text: #e9eefb;
        --app-text-body: #cbd5e1;
        --app-text-muted: #8a97ad;
        --app-chip-bg: #1b2740;

        --app-primary: #5b93f5;
        --app-primary-rgb: 91, 147, 245;
    }
}

/* ...mas o botão de tema na sidebar pode escolher manualmente, guardando
   só no localStorage do navegador — nunca muda a preferência do sistema,
   e [data-theme] sempre tem a palavra final sobre o @media acima. */
:root[data-theme="dark"] {
    --app-canvas: #0c1220;
    --app-surface: #141d2e;
    --app-surface-2: #182236;
    --app-border: #26334a;

    --app-text: #e9eefb;
    --app-text-body: #cbd5e1;
    --app-text-muted: #8a97ad;
    --app-chip-bg: #1b2740;

    --app-primary: #5b93f5;
    --app-primary-rgb: 91, 147, 245;
}

:root[data-theme="light"] {
    --app-canvas: #e8f1fc;
    --app-surface: #ffffff;
    --app-surface-2: #eef1f6;
    --app-border: #dce6f4;

    --app-text: #16233d;
    --app-text-body: #1e293b;
    --app-text-muted: #64748b;
    --app-chip-bg: #eaf1fd;

    --app-primary: #2563eb;
    --app-primary-rgb: 37, 99, 235;
}

body,
input,
button,
select,
textarea {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

body {
    background: var(--app-canvas) !important;
}

/* ───────────────────────── navbar ─────────────────────────
   A <nav> "SEMUR" fixa no topo do vendor foi removida do markup (era
   redundante com a marca que já aparece no topo da sidebar, e mantinha
   o botão de abrir o menu mobile sempre alinhado à direita, diferente
   do mockup) — o botão hamburger virou parte do .app-page-header. */

.main-panel > .content {
    margin-top: 0 !important;
}

@media (min-width: 992px) {
    .main-panel > .content {
        padding-top: 24px;
    }
}

/* Material Dashboard's ".card{margin-top:30px}" (ver [[semur-css-recurring-bugs]])
   é sempre um bug aqui, nunca um espaçamento desejado — foi corrigido
   card a card (listagem, inserir/alterar, exibir, o filtro do
   dashboard...) até ficar claro que era mais rápido zerar uma vez só,
   globalmente, do que continuar caçando o próximo lugar onde o
   primeiro card depois do breadcrumb sobra com um vão grande em cima.
   margin-bottom não entra aqui — cada componente já cuida do próprio
   respiro embaixo quando precisa.

   Fundo branco fixo do vendor (mesmo comentário acima) — coincidia com
   o claro e passava batido, mas no escuro qualquer .card puro (sem uma
   variante própria como .card-chart/.card-alert-stat/.detail-card, que
   já tinham esse fix individualmente) sobra sem contraste com o fundo
   da página (ex: o form de Cecom, que usa .card puro na tela de
   alterar/inserir). Aplicando aqui uma vez só, global — variantes mais
   específicas declaradas depois no arquivo continuam vencendo o empate
   de especificidade pela ordem (ex: .card-alert-stat, .card-chart). */
.card {
    margin-top: 0 !important;
    background: var(--app-surface) !important;
    border: 1px solid var(--app-border);
    box-shadow: 0 2px 8px rgba(20, 40, 80, .06);
}

/* título da tela atual — fixo no topo ao rolar a página */
.app-page-header {
    position: sticky;
    top: 0;
    z-index: 20;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--app-surface);
    border-bottom: 1px solid var(--app-border);
    padding: 0 15px;
}

.app-page-header h1 {
    font-size: 20px;
    font-weight: 800;
    color: var(--app-text);
    margin: 0;
    letter-spacing: -.01em;
}

.app-page-header-title {
    display: flex;
    align-items: center;
    gap: 6px;
}

.app-page-header-actions {
    display: flex;
    align-items: center;
    gap: 16px;
}

.page-heading-current {
    color: inherit !important;
}

.page-heading-link,
.page-heading-link:link,
.page-heading-link:visited {
    color: var(--app-primary) !important;
    text-decoration: underline !important;
}

.page-heading-link:hover {
    opacity: .8;
}

.page-heading-sep {
    margin: 0 6px;
    opacity: .45;
}

.app-page-header-separator {
    width: 1px;
    height: 24px;
    background: var(--app-border);
}

/* botão hambúrguer do menu mobile — antes vivia numa <nav> separada do
   vendor, acima do cabeçalho, sempre alinhada à direita (diferente do
   mockup, que fica à esquerda colado no título). Movido pra dentro do
   .app-page-header; a cor das barrinhas (.navbar-toggler-icon) dependia
   do seletor ".navbar .navbar-toggler .navbar-toggler-icon" do vendor,
   que só valia dentro daquela <nav> — precisa de estilo próprio aqui. */
.app-page-header-title .navbar-toggler {
    display: none;
    cursor: pointer;
    outline: 0;
    padding: 6px;
    background: transparent;
    border: 0;
    border-radius: 8px;
}

.app-page-header-title .navbar-toggler:hover {
    background: var(--app-surface-2);
}

.app-page-header-title .navbar-toggler .navbar-toggler-icon {
    width: 20px;
    height: 2px;
    display: block;
    border-radius: 1px;
    background-color: var(--app-text);
}

.app-page-header-title .navbar-toggler .navbar-toggler-icon + .navbar-toggler-icon {
    margin-top: 4px;
}

@media (max-width: 991px) {
    .app-page-header-title .navbar-toggler {
        display: inline-block;
    }
}

/* breadcrumb ficava colado no título da página logo acima — o widget
   zii.widgets.CBreadcrumbs usa class="breadcrumbs" por padrão, não id */
.breadcrumbs {
    display: block;
    padding-top: 14px;
    padding-bottom: 14px;
}

/* o último nível (span, não-link) herdava um cinza escuro fixo do
   vendor (#3C4858, pensado só pra tema claro) — ilegível no dark. */
.breadcrumbs span {
    color: var(--app-text-muted) !important;
}

.breadcrumbs a {
    color: var(--app-primary) !important;
}

/* ───────────────────────── sidebar ───────────────────────── */

.sidebar,
.sidebar .sidebar-wrapper,
.semur-menu-background {
    background: var(--app-surface) !important;
    border-right: 1px solid var(--app-border);
}

/* logo (mini-marca) e nome/badge são dois blocos com fundo distinto,
   igual ao mockup (.brand sem destaque / .hero com --app-surface-2) */
.sidebar-logo-block {
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--app-surface) !important;
    border-bottom: 1px solid var(--app-border);
    padding: 0 !important;
}

.sidebar .logo {
    background: var(--app-surface-2) !important;
    border-bottom: 1px solid var(--app-border);
    padding: 2px 10px !important;
}

/* linha cinza fixa do vendor (rgba(180,180,180,.3), não segue o tema —
   ficava muito clara/lavada no dark) duplicando a border-bottom real
   do .logo acima, no mesmo lugar. */
.sidebar .logo:after {
    display: none;
}

/* mini-logo (mesmo ícone/nome da tela de login) linkado pro início */
.sidebar-brand {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    text-decoration: none !important;
}

.sidebar-brand i {
    color: var(--app-primary) !important;
    font-size: 28px !important;
}

.sidebar-brand span {
    font-weight: 800;
    font-size: 18px;
    letter-spacing: .02em;
    color: var(--app-text) !important;
}

.sidebar .logo .logo-normal,
.sidebar .logo .simple-text {
    display: block;
    color: var(--app-text) !important;
    font-weight: 500;
    font-size: 11px;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

/* "display:flex" (não inline-flex) pra virar caixa de nível bloco e poder
   centralizar com margin:auto — inline-flex só respeitaria um text-align:
   center herdado do pai, que nem sempre está garantido aqui. */
.user-role-pill {
    display: flex;
    width: fit-content;
    max-width: 100%;
    align-items: center;
    gap: 5px;
    margin: 0 auto;
    padding: 0;
    background: none;
    border: none;
    color: var(--app-primary);
    font-size: 9px;
    font-weight: 600;
    letter-spacing: .03em;
    text-transform: uppercase;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.theme-toggle-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    padding: 0;
    border: 1px solid var(--app-border);
    border-radius: 50%;
    background: var(--app-surface);
    color: var(--app-text-muted);
    cursor: pointer;
    transition: color .15s ease, border-color .15s ease;
}

.theme-toggle-btn:hover {
    color: var(--app-primary);
    border-color: var(--app-primary);
}

.theme-toggle-btn .material-icons {
    font-size: 17px !important;
}

/* "Sair" fixo no rodapé da sidebar, fora da lista rolável de módulos.
   .sidebar vira flex-column com altura garantida de 100vh — sidebar-wrapper
   e o próprio nav ganham min-height:0, que é o que realmente permite o
   overflow:auto funcionar dentro de um flex item (sem isso o filho flex
   não encolhe e o rodapé é empurrado pra fora da tela).

   Tudo isso só vale em telas >=992px: nesse breakpoint o vendor já dá
   display:none pro .sidebar por padrão (só aparece via .nav-open, como
   off-canvas) — sem essa media query, .sidebar{display:flex} sem
   qualificação cancelava esse display:none e a sidebar ficava sempre
   visível, espremendo o conteúdo no mobile mesmo sem o menu aberto. */
@media (min-width: 992px) {
    .sidebar {
        display: flex;
        flex-direction: column;
        height: 100vh;
        width: 215px;
    }

    .sidebar .sidebar-wrapper {
        display: flex;
        flex-direction: column;
        flex: 1;
        min-height: 0;
        width: 215px;
        /* o vendor dá padding-bottom:30px aqui — sobra como vão embaixo do
           "Sair", que devia ficar quase encostado. */
        padding-bottom: 5px;
    }

    /* sidebar mais estreita (215px em vez dos 260px padrão do vendor) — o
       .main-panel usa o mesmo 260px num calc() fixo pra descontar a largura
       da sidebar, então sem esse ajuste ele ficaria com 45px de vão à
       esquerda. Só vale no desktop — no mobile o vendor já cuida disso
       (.main-panel{width:100%} dentro do próprio breakpoint <=991px). */
    .main-panel {
        width: calc(100% - 215px);
    }
}

/* no mobile a sidebar vira off-canvas (.nav-open a abre, deslizando por
   cima do conteúdo) — mantém o "Sair" fixo no rodapé também nesse caso,
   sem mexer na largura (o vendor já desliza 260px via transform). */
.nav-open .sidebar {
    display: flex;
    flex-direction: column;
    height: 100vh;
}

.nav-open .sidebar .sidebar-wrapper {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    padding-bottom: 5px;
}

/* o vendor abre a gaveta mobile ancorada à DIREITA por padrão
   (".sidebar{right:0;left:auto;transform:translate3d(260px,0,0)}" dentro
   do breakpoint <=991px, com o main-panel deslizando -260px pra
   "revelar" — mesmo padrão do off-canvas antigo do Bootstrap) —
   diferente do mockup, que abre pela ESQUERDA. Inverte a âncora/direção
   e remove o deslocamento do conteúdo: a gaveta passa a flutuar por
   cima (o .close-layer que o próprio vendor já cria escurece o fundo),
   sem empurrar nada, igual ao mockup. */
@media (max-width: 991px) {
    .sidebar {
        left: 0 !important;
        right: auto !important;
        /* sem !important aqui de propósito: precisa perder pra
           ".nav-open .sidebar{transform:...}" do vendor (mais específica),
           que é o que reseta o transform ao abrir a gaveta. */
        transform: translate3d(-260px, 0, 0);
        /* o .close-layer (escurece o fundo ao abrir o menu) tem
           z-index:9999, bem maior que o z-index:2 do vendor pra .sidebar
           — como agora ambos ocupam a mesma faixa horizontal (sidebar à
           esquerda, close-layer cobrindo 100% do .main-panel), a camada
           escura pintava por cima do menu em vez de só atrás dele. */
        z-index: 10000 !important;
    }
}

.nav-open .main-panel {
    transform: none !important;
}

.sidebar .sidebar-wrapper #nav-accordion {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    scrollbar-color: var(--app-border) transparent;
    margin-top: 0;
}

.sidebar .sidebar-wrapper #nav-accordion::-webkit-scrollbar {
    width: 8px;
}

.sidebar .sidebar-wrapper #nav-accordion::-webkit-scrollbar-track {
    background: transparent;
}

.sidebar .sidebar-wrapper #nav-accordion::-webkit-scrollbar-thumb {
    background: var(--app-border);
    border-radius: 100px;
}

.nav-footer-sair {
    border-top: 1px solid var(--app-border);
    padding: 2px 12px;
    flex-shrink: 0;
}

.nav-footer-sair a {
    display: flex;
    align-items: center;
    gap: 12px;
    border-radius: 12px;
    margin: 0;
    padding: 4px 12px;
    color: var(--app-text) !important;
    font-weight: 600;
    font-size: 13.5px;
    text-transform: initial;
}

.nav-footer-sair a:hover {
    background: var(--app-surface-2);
}

/* o label vem de um <p> (herdado do CMenu) que traz margin própria do
   Bootstrap — sem zerar isso, o texto fica desalinhado do ícone. */
.nav-footer-sair a p {
    margin: 0;
}

.nav-footer-sair i {
    color: var(--app-primary) !important;
    background: var(--app-chip-bg);
    width: 28px;
    height: 28px;
    border-radius: 9px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 16px !important;
    flex-shrink: 0;
}

.sidebar[data-background-color="black"] .nav .nav-item .nav-link,
.sidebar .nav p {
    color: var(--app-text) !important;
    font-weight: 600;
    font-size: 13.5px !important;
}

.sidebar[data-background-color="black"] .nav .nav-item i,
.sidebar .nav i {
    color: var(--app-primary) !important;
    background: var(--app-chip-bg);
    width: 28px;
    height: 28px;
    border-radius: 9px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 16px !important;
    margin-right: 8px;
}

.sidebar .nav > li,
.sidebar .nav .nav-item {
    margin: 0 !important;
    padding: 0 !important;
    width: auto !important;
}

.sidebar .nav li > a {
    border-radius: 12px !important;
    margin: 2px 6px !important;
    padding: 7px 8px !important;
    width: auto !important;
}

.sidebar .nav li.active > a,
.sidebar .nav li.active-pro > a {
    background: var(--app-chip-bg) !important;
}

.sidebar .nav li.active > a .nav-link,
.sidebar[data-background-color="black"] .nav .nav-item.active > a,
.sidebar[data-background-color="black"] .nav .nav-item.active > a i {
    color: var(--app-primary) !important;
}

.sidebar .nav li.active > a i {
    background: var(--app-chip-bg);
}

.sidebar .nav li > a:hover {
    background: var(--app-surface-2);
}

/* ───────────────────────── filtro de período (dashboard) ─────────────────────────
   envolvido num card (como no mockup) — campos de data próximos entre si
   e do botão "Atualizar", tudo numa linha só e sem depender do grid do
   Bootstrap (que somava mais que 12 colunas e quebrava linha). */
.filter-card {
    display: inline-block;
    background: var(--app-surface) !important;
    border: 1px solid var(--app-border);
    border-radius: 12px;
    box-shadow: 0 6px 16px rgba(20, 40, 80, .08);
    margin-top: 0 !important;
    margin-bottom: 20px;
}

/* no mobile os espaços entre seções (filtro -> cards -> mapa ->
   gráficos) tinham valores bem maiores que o respiro entre os
   gráficos (10px) — normaliza tudo pro mesmo valor pequeno.
   margin-top:0 acima mata o "margin-top:30px" que o .card do vendor
   aplica por padrão (sobrava entre o cabeçalho e o filtro). */
@media (max-width: 767px) {
    .filter-card {
        margin-top: 10px !important;
        margin-bottom: 10px;
    }
}

.filter-card .card-body {
    padding: 16px 20px;
}

.filter-fields {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 14px;
}

.filter-field {
    margin: 0 !important;
}

/* !important nas 3 propriedades que também aparecem na regra global
   ".form-group > label" (mesma especificidade — quem carrega
   .filter-field É também um .form-group, então sem isso a ordem no
   arquivo decidiria, e a legenda compacta/uppercase-like daqui perdia
   pro estilo genérico de label de formulário). */
.filter-field label {
    display: block;
    font-size: 14px !important;
    font-weight: 700 !important;
    letter-spacing: .03em;
    color: var(--app-text-muted) !important;
    margin-bottom: 12px !important;
}

.filter-field input,
.filter-field select {
    width: 140px;
    padding: 7px 12px !important;
}

/* label de formulário de verdade que reaproveita o layout flex do
   .filter-fields (ex: "Inserir Comentário"/"Inserir Arquivo" dentro de
   telas de exibir) mas não é uma busca - não deve herdar a fonte
   pequena/maiúscula de busca. Só reseta o texto do label, sem tocar
   em .filter-field/.filter-field-wide (largura dos campos, e o
   upload de foto que depende do ancestral .filter-field pra se
   posicionar certo). */
.filter-field .quick-add-label {
    font-size: 14px !important;
    font-weight: 400 !important;
    letter-spacing: normal !important;
    color: var(--app-text) !important;
    margin-bottom: 4px !important;
}

/* cresce pra ocupar o espaço sobrando na linha (Placa/Status/Buscar
   ficam no tamanho natural, Características/Nome Solicitante dividem
   o resto) — sem isso a div de busca ficava com uma sobra de espaço
   vazio à direita, com campos de texto livre bem apertados. */
.filter-field-wide {
    flex: 1 1 180px;
}

.filter-field-wide input {
    width: 100%;
}

.filter-field-narrow input {
    width: 130px;
}

.filter-field-medium {
    flex: 0 1 220px;
}

.filter-field-medium input {
    width: 100%;
}

/* Padrão de busca "primeiro campo largo": o 1º campo (geralmente
   nome/título) fica com 40% fixo, e os demais — sejam quantos forem —
   dividem os 60% restantes em partes iguais (flex-grow:1 + basis:0 faz
   isso automaticamente, sem precisar contar quantos campos existem).
   min-width:0 evita que o tamanho intrínseco do <select>/<input> force
   overflow ou quebra de linha. */
.filter-fields-40-60 {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    align-items: end;
    margin-bottom: 14px;
}

.filter-fields-40-60 > .filter-field:first-child {
    flex: 0 0 40%;
    min-width: 0;
}

.filter-fields-40-60 > .filter-field:not(:first-child) {
    flex: 1 1 0;
    min-width: 0;
}

.filter-fields-40-60 .filter-field input,
.filter-fields-40-60 .filter-field select {
    width: 100%;
}

@media (max-width: 767px) {
    .filter-fields-40-60 > .filter-field:first-child,
    .filter-fields-40-60 > .filter-field:not(:first-child) {
        flex: 1 1 100%;
    }
}

.filter-field-status select {
    width: 110px;
}

.filter-field-btn .btn {
    height: 38px;
    margin: 0;
}

@media (max-width: 767px) {
    .filter-fields {
        flex-direction: column;
        align-items: stretch;
    }

    .filter-field input,
    .filter-field select,
    .filter-field-wide input,
    .filter-field-narrow input,
    .filter-field-status select {
        width: 100%;
    }

    .filter-field-btn,
    .filter-field-btn .btn {
        width: 100%;
    }
}

/* ───────────────────────── cards de indicador ───────────────────────── */

.card-indicators {
    background: var(--app-surface) !important;
    color: var(--app-text-body) !important;
    border: 1px solid var(--app-border);
    border-left: 4px solid var(--stat-c, var(--app-primary));
    border-radius: 12px;
    box-shadow: 0 6px 16px rgba(20, 40, 80, .08);
    height: 95%;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

/* no mobile cada card ocupa a linha sozinho (1 por vez) — o height:95%
   (pensado pra igualar a altura dos cards vizinhos na mesma linha) não
   tem ninguém pra igualar e só sobra como vão vazio embaixo do
   conteúdo mais curto. Below 768px o card assume a própria altura. */
@media (max-width: 767px) {
    .card-indicators {
        height: auto;
    }
}

/* 3 linhas por card: (1) ícone + número/porcentagem juntos, (2) label do
   que é aquela informação, (3) link "veja todos" (ou vazio, pra manter
   a mesma altura em todo card), alinhado à esquerda. */
.card-indicators .card-body {
    padding: 18px 10px 10px !important;
    display: flex;
    flex-direction: column;
}

/* gap de 20px entre os cards (10px de cada lado), na horizontal e na
   vertical — sem depender do gutter padrão do Bootstrap.
   o stretch padrão do bootstrap iguala a altura das colunas de uma
   mesma linha (é o que mantém os cards com altura igual), mas o
   height:90% do .card-indicators sobra como ~20px de espaço morto
   embaixo do card — que se somava ao row-gap e dobrava a distância
   real entre linhas. row-gap:0 deixa só esse espaço morto controlar
   o respiro entre linhas. */
.stats-row {
    margin-left: -5px;
    margin-right: -5px;
    row-gap: 0;
}

.stats-row > [class*="col-"] {
    padding-left: 5px !important;
    padding-right: 5px !important;
}

.stat-link-empty {
    visibility: hidden;
}

.stat-line1 {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 6px;
}

.card-indicators .number-indicators {
    color: var(--app-text) !important;
    margin: 0;
    line-height: 1;
}

/* mesma cor do ícone do card — a label é o que amarra visualmente a
   dupla ícone+número ao texto que explica o que ela significa
   (voltou a ser assim por preferência explícita, mesmo divergindo do
   mockup, que usa cinza neutro pra todas as labels) */
.stat-label {
    color: var(--stat-c, var(--app-primary)) !important;
    margin: 15px 0 20px;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.3;
}

.card-indicators p {
    color: var(--app-text-muted) !important;
}

.icon-indicators {
    font-size: 18px !important;
    color: var(--stat-c, var(--app-primary)) !important;
    background: color-mix(in srgb, var(--stat-c, var(--app-primary)) 14%, transparent);
    width: 32px;
    height: 32px;
    border-radius: 9px;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* "veja todos/todas" virou um botãozinho — pílula com o tom do card,
   ícone que deslila pra direita no hover, preenche sólido ao passar o
   mouse. Reserva um min-height fixo pra bater com o placeholder vazio
   dos 4 cards sem link (mesmo com/sem ícone dentro). */
.porcentage-number-indicators.font-yellow-indicators {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    align-self: flex-start;
    margin-top: auto;
    min-height: 26px;
    padding: 4px 10px 4px 12px;
    border-radius: 100px;
    background: color-mix(in srgb, var(--stat-c, var(--app-primary)) 12%, transparent);
    color: var(--stat-c, var(--app-primary)) !important;
    font-weight: 700;
    font-size: 13px;
    text-decoration: none !important;
    transition: background .15s ease, color .15s ease;
}

.porcentage-number-indicators.font-yellow-indicators:hover {
    background: var(--stat-c, var(--app-primary));
    color: #fff !important;
}

.stat-link-icon {
    font-size: 16px !important;
    transition: transform .15s ease;
}

.porcentage-number-indicators.font-yellow-indicators:hover .stat-link-icon {
    transform: translateX(2px);
}

.stat-link-empty {
    min-height: 26px;
}

/* no mobile o card vira mais compacto: ícone+número+descrição na mesma
   linha (quebrando naturalmente por texto, não por um <p> forçado
   embaixo), e o botão "ver todos"/placeholder passa a ocupar a largura
   toda do card — isso é o que dá a altura padrão entre os cards,
   já que hoje ela varia com o tamanho da descrição de cada um. */
@media (max-width: 767px) {
    .card-indicators .card-body {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        column-gap: 10px;
        row-gap: 8px;
    }

    /* "desembrulha" o ícone+número pra virarem itens diretos da linha
       flex do card-body, na mesma linha da descrição que vem a seguir */
    .stat-line1 {
        display: contents;
    }

    .stat-label {
        margin: 0;
        flex: 1 1 auto;
        min-width: 0;
    }

    .porcentage-number-indicators.font-yellow-indicators,
    .stat-link-empty {
        flex-basis: 100%;
        width: 100%;
        justify-content: center;
        align-self: auto;
        margin-top: 2px;
    }
}

/* cores por indicador — casam com o "status" real de cada métrica */
.card-indicators.stat-atendidas,
.card-indicators.stat-atendidas-pct { --stat-c: var(--app-success); }
.card-indicators.stat-aberto,
.card-indicators.stat-aberto-pct { --stat-c: var(--app-danger); }
.card-indicators.stat-abordagens { --stat-c: var(--app-primary); }
.card-indicators.stat-faltas,
.card-indicators.stat-logs { --stat-c: var(--app-neutral); }
.card-indicators.stat-apreensoes,
.card-indicators.stat-viaturas { --stat-c: var(--app-tertiary); }
.card-indicators.stat-reds { --stat-c: var(--app-acc-reds); }
.card-indicators.stat-rsm { --stat-c: var(--app-acc-rsm); }
.card-indicators.stat-transitos { --stat-c: var(--app-acc-transito); }
.card-indicators.stat-alertas { --stat-c: var(--app-warning); }
.card-indicators.stat-arquivos,
.card-indicators.stat-comentarios { --stat-c: var(--app-primary); }

/* ───────────────────────── card "atendimento por prioridade" ───────────────────────── */

.card-prioridades {
    background: var(--app-surface) !important;
    border: 1px solid var(--app-border);
    border-radius: 12px;
    box-shadow: 0 6px 16px rgba(20, 40, 80, .08);
}

.card-prioridades .breakdown-title {
    color: var(--app-text) !important;
    font-size: 12.5px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .03em;
    margin-bottom: 10px;
}

/* 3 colunas -> os 5 itens caem em 2 linhas (3+2), deixando a altura
   igual à dos outros cards do grid, em vez de 2 colunas (3 linhas). */
.card-prioridades .breakdown-list {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 8px 16px;
}

/* no celular a coluna do card fica estreita demais pra 3 colunas sem
   quebrar o texto — volta pra 1 coluna, igual ao mockup. */
@media (max-width: 576px) {
    .card-prioridades .breakdown-list {
        grid-template-columns: 1fr;
    }
}

.card-prioridades .breakdown-row {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 13px;
    color: var(--app-text-body);
    font-weight: 600;
}

.card-prioridades .breakdown-row b {
    margin-left: auto;
    font-weight: 800;
    color: var(--app-text);
}

.card-prioridades .dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    flex-shrink: 0;
}

.card-prioridades .dot-success { background: var(--app-success); }
.card-prioridades .dot-warning { background: var(--app-warning); }
.card-prioridades .dot-reds { background: var(--app-acc-reds); }
.card-prioridades .dot-primary { background: var(--app-primary); }
.card-prioridades .dot-danger { background: var(--app-danger); }

/* ───────────────────────── mapa de calor ─────────────────────────
   sem essa margem o título "Mapa de calor" ficava colado (quase
   sobreposto) na última linha dos cards de indicador acima. */
.mapa-calor-row {
    margin-top: 50px;
    margin-bottom: 20px;
}

/* dentro do dashboard o gap acima do título já vem do 50px/25px de
   .mapa-calor-row — sem isso aqui o título ganharia os 24px novos do
   .section-title TAMBÉM, virando um respiro duplo/exagerado. */
.mapa-calor-row .section-title {
    margin-top: 0;
}

@media (max-width: 767px) {
    .mapa-calor-row {
        /* 15px a mais que o respiro-padrão de 10px entre seções, a
           pedido — só o gap vindo do card anterior (atendimento por
           prioridade) até o título "Mapa de calor". */
        margin-top: 25px;
        margin-bottom: 10px;
    }
}

/* teste: título de seção no mesmo cinza do label do filtro — se aprovar,
   repetir nas demais páginas */
.section-title {
    /* texto alinhado à esquerda, colado na mesma borda do
       .mapa-calor-card embaixo (x=240) — nada de padding/inset
       horizontal aqui, só a linha por baixo. */
    margin: 24px 0 12px;
    padding-bottom: 5px;
    /* --app-border sozinho quase se perde no --app-canvas por baixo (os
       dois são um azul bem clarinho parecido, e esse título fica direto
       no fundo da página, não dentro de um card branco) — mas
       --app-text-muted puro é forte demais, deixa de ser um traço sutil.
       Mistura os dois pra um meio-termo bem mais discreto que antes. */
    border-bottom: 1px solid color-mix(in srgb, var(--app-border), var(--app-text-muted) 25%);
    font-size: 15.5px;
    font-weight: 800;
    text-align: left;
    color: var(--app-text) !important;
}

@media (max-width: 767px) {
    .section-title {
        margin-bottom: 10px;
    }
}

/* moldura branca fina em volta do mapa, dentro de um card — o vendor dá
   margin-bottom:30px pro .card por padrão, que somava com o gap que já
   controlo via .mapa-calor-row (virava 50px em vez de 20px). */
.mapa-calor-card {
    background: var(--app-surface) !important;
    border: 2px solid var(--app-border);
    border-radius: 12px;
    box-shadow: 0 6px 16px rgba(20, 40, 80, .08);
    padding: 4px;
    margin-top: 0 !important;
    margin-bottom: 20px !important;
    /* sem isso, o iframe/div do mapa (cantos retos) vaza pra fora do
       canto arredondado do card, já que só o card em si tinha
       border-radius. O padding de 4px é reforço: mesmo se o overflow
       não clipar em algum navegador, o cantos retos do iframe não
       encostam na borda arredondada do card. */
    overflow: hidden;
}

.mapa-calor-row .mapa-calor-card {
    /* no dashboard o respiro depois do card já vem do
       .mapa-calor-row{margin-bottom:20px} — sem isso aqui o gap dobraria. */
    margin-bottom: 0 !important;
}

#divcalor {
    border-radius: 10px;
    overflow: hidden;
}

/* altura fixa de 500px (inline no PHP) fica desproporcional numa tela
   estreita — reduz só no mobile, mais perto da proporção do mockup. */
@media (max-width: 767px) {
    #divcalor {
        height: 300px !important;
    }
}

/* ───────────────────────── cards de gráfico (séries históricas) ─────────────────────────
   mesma técnica da .stats-row — 5px de cada lado = 10px entre os cards,
   sem depender do gutter padrão do Bootstrap. */
.charts-row {
    margin-left: -5px;
    margin-right: -5px;
    margin-top: 0;
    margin-bottom: 10px;
    row-gap: 10px;
}

.charts-row > [class*="col-"] {
    padding-left: 5px !important;
    padding-right: 5px !important;
}

/* o .card do vendor tem fundo branco fixo — no claro coincidia com o
   token de superfície e passava batido, no escuro sobrava branco atrás
   do card-body (só o card-header, por trás do gráfico, estava themado). */
.card-chart {
    background: var(--app-surface) !important;
    border: 1px solid var(--app-border);
    border-radius: 12px;
    box-shadow: 0 6px 16px rgba(20, 40, 80, .08);
    overflow: hidden;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

.card-chart .card-title {
    color: var(--app-text) !important;
    font-weight: 800;
}

.card-chart .card-category {
    color: var(--app-text-muted) !important;
}

/* gráfico sem nenhum dado no período — mostra o intervalo selecionado
   no mesmo lugar onde ficam as datas do eixo X nos gráficos com dados
   (embaixo da grade, dentro da área do gráfico), não junto do texto de
   quantidade do card-body. */
.card-chart .card-header {
    position: relative;
}

.chart-period-fallback {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 6px;
    text-align: center;
    color: var(--app-text-muted) !important;
    font-size: 11px;
    margin: 0;
}

/* grade e rótulos dos eixos na mesma cor discreta do subtítulo do card
   (ex.: "Últimos RSM criados") — escala de 5 em 5 vem do PHP (axisY
   FixedScaleAxis em index_master.php). Sem isso o Chartist usa preto
   translúcido fixo (rgba(0,0,0,.2/.4) do vendor), ilegível no dark.
   Também cobre .detail-card — os gráficos dos relatórios (report/turno,
   report/viatura) usam esse wrapper em vez do .card-chart antigo. */
.card-chart .ct-grid,
.detail-card .ct-grid {
    stroke: var(--app-border) !important;
    stroke-dasharray: 0 !important;
}

.card-chart .ct-label,
.detail-card .ct-label {
    fill: var(--app-text-muted) !important;
    color: var(--app-text-muted) !important;
}

/* o vendor alinha o número ao fundo da própria "banda" (ct-vertical.ct-start
   com align-items:flex-end), mas a folga do line-height padrão deixa o
   número visivelmente acima da linha de grade que ele representa —
   aperta o line-height e desloca um pouco pra baixo pra colar no traço. */
.card-chart .ct-label.ct-vertical,
.detail-card .ct-label.ct-vertical {
    line-height: 1 !important;
    transform: translateY(6px);
}

.card-chart .ct-chart,
.detail-card .ct-chart {
    height: 160px;
    cursor: default;
}

/* tooltip de quantidade por dia (custom-admin.js attachChartTooltip) —
   um único elemento reaproveitado por todos os gráficos do dashboard. */
.chart-tooltip {
    position: fixed;
    pointer-events: none;
    background: var(--app-text);
    color: var(--app-surface);
    font-size: 12px;
    font-weight: 700;
    padding: 5px 10px;
    border-radius: 6px;
    box-shadow: 0 6px 16px rgba(20, 40, 80, .2);
    /* pre-line em vez de nowrap - tooltip de gráfico com mais de uma série
       (report/turno, report/viatura) usa \n pra colocar cada série na sua
       própria linha, em vez de tudo espremido numa linha só. */
    white-space: pre-line;
    text-align: left;
    z-index: 2000;
    opacity: 0;
    transform: translate(-50%, -130%);
    transition: opacity .1s ease;
}

.chart-tooltip.visible {
    opacity: 1;
}

/* cor de cada série casa com a identidade do módulo no app (REDS roxo, RSM
   verde-azulado, Trânsito azul-slate) — mesmas classes já usadas no mobile */
/* mesmo padrão do mockup: cartão branco, sem bloco de cor atrás do
   gráfico — a cor mora na linha/área do próprio Chartist, não no fundo. */
.card-chart .card-header {
    background: var(--app-surface) !important;
    box-shadow: none !important;
}

#RedsChart .ct-series-a .ct-line, #RedsChart .ct-series-a .ct-point { stroke: var(--app-acc-reds); }
#RedsChart .ct-series-a .ct-area { fill: var(--app-acc-reds); fill-opacity: .15; }

#RsmChart .ct-series-a .ct-line, #RsmChart .ct-series-a .ct-point { stroke: var(--app-acc-rsm); }
#RsmChart .ct-series-a .ct-area { fill: var(--app-acc-rsm); fill-opacity: .15; }

#TransitoChart .ct-series-a .ct-line, #TransitoChart .ct-series-a .ct-point { stroke: var(--app-acc-transito); }
#TransitoChart .ct-series-a .ct-area { fill: var(--app-acc-transito); fill-opacity: .15; }

#ArquivoChart .ct-series-a .ct-line, #ArquivoChart .ct-series-a .ct-point { stroke: var(--app-tertiary); }
#ArquivoChart .ct-series-a .ct-area { fill: var(--app-tertiary); fill-opacity: .15; }

#ComentarioChart .ct-series-a .ct-line, #ComentarioChart .ct-series-a .ct-point { stroke: var(--app-primary); }
#ComentarioChart .ct-series-a .ct-area { fill: var(--app-primary); fill-opacity: .15; }

#AtendimentoChart .ct-series-a .ct-line, #AtendimentoChart .ct-series-a .ct-point { stroke: var(--app-danger); }
#AtendimentoChart .ct-series-a .ct-area { fill: var(--app-danger); fill-opacity: .15; }

/* ───────────────────────── login / esqueci minha senha ─────────────────────────
   O wrapper "col-lg-6 col-md-6 col-sm-8" do login.php é grid do Bootstrap —
   a largura em % muda de forma não-monotônica entre breakpoints (o container
   também pula de largura a cada breakpoint), o que fazia o card mudar de
   tamanho de forma inconsistente e até estourar em telas médias. O card já
   controla seu próprio tamanho (max-width:475px, centralizado), então o
   wrapper só precisa ocupar 100% e sair do caminho. */
.login-page .col-lg-6.col-md-6.col-sm-8 {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

.app-login-bg {
    background: var(--app-canvas) !important;
    background-image: none !important;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 20px;
}

.app-login-bg:before,
.app-login-bg:after {
    display: none !important;
}

.app-login-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}

.app-login-brand i {
    color: var(--app-primary);
    font-size: 46px;
}

.app-login-brand span {
    font-weight: 800;
    font-size: 32px;
    letter-spacing: .01em;
    color: var(--app-text);
}

/* custom-login.css tem ".card{background-color:rgba(255,255,255,.5)!important}"
   — mesma especificidade que ".card-login" (ambos 1 classe), carregado
   depois, então vencia o empate. Isso ficava quase invisível no tema claro
   (branco 50% sobre fundo claro ~ branco), mas no escuro virava um cinza
   sólido feio. Escopar com o ID resolve pra sempre, em qualquer tema. */
#div-login.card-login,
#div-esqueci.card-login {
    background: var(--app-surface) !important;
    border: 1px solid var(--app-border);
    border-radius: 16px;
    box-shadow: 0 12px 32px rgba(20, 40, 80, .12) !important;
    max-width: 475px;
    margin: 12px auto;
    overflow: hidden;
}

.card-login .card-header,
.card-login .card-header-blue {
    background: transparent !important;
    box-shadow: none !important;
    margin-top: 0 !important;
    padding: 26px 30px 2px !important;
}

.card-login .card-title {
    color: var(--app-text) !important;
    font-weight: 800;
    font-size: 22px;
    margin-bottom: 2px;
    text-transform: uppercase;
    letter-spacing: .02em;
}

.card-login .card-category {
    color: var(--app-text-muted) !important;
    font-size: 13px;
}

/* #div-login/#div-esqueci (IDs) pra garantir especificidade maior que
   custom-login.css's ".card .card-body{padding-top:25px!important}", que
   carrega depois deste arquivo e senão vencia o empate de especificidade. */
#div-login.card-login .card-body,
#div-esqueci.card-login .card-body {
    padding: 16px 30px 6px !important;
}

.card-login .input-group {
    background: var(--app-canvas);
    border: 1px solid var(--app-border);
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 6px;
}

.login-page .card-login .card-body .input-group .input-group-text {
    background: transparent;
    border: 0;
    color: var(--app-primary);
    padding: 7px 10px;
}

.card-login .input-group-prepend .input-group-text i,
.card-login .input-group-append .input-group-text i {
    font-size: 22px;
}

.card-login .input-group-append .input-group-text.btn-toggle-senha {
    cursor: pointer;
    color: var(--app-text-muted);
}

.card-login .input-group-append .input-group-text.btn-toggle-senha:hover {
    color: var(--app-primary);
}

/* Alternador de visibilidade de senha (ícone de olho) fora do contexto do
   card-login - ex: "Meu Perfil", onde o campo não usa input-group. */
.password-field-wrapper {
    position: relative;
}

.password-field-wrapper .form-control {
    padding-right: 40px;
}

.password-field-wrapper .btn-toggle-senha {
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translateY(-50%);
    cursor: pointer;
    color: var(--app-text-muted);
    font-size: 20px;
}

.password-field-wrapper .btn-toggle-senha:hover {
    color: var(--app-primary);
}

.card-body .input-group .form-control {
    border: 0 !important;
    background: transparent !important;
    color: var(--app-text-body) !important;
    box-shadow: none !important;
    font-size: 16px !important;
    height: auto !important;
    margin: 10px 0 !important;
    padding: 3px 14px !important;
}

.card-login ::-webkit-input-placeholder {
    color: var(--app-text-muted) !important;
}

/* a versão minificada do Material Dashboard aplica ".card .card-footer{margin:
   0 15px 10px}" — isso estava encolhendo o footer (e o botão Entrar dentro
   dele) 30px mais estreito que os campos acima. */
#div-login.card-login .card-footer,
#div-esqueci.card-login .card-footer {
    background: transparent;
    margin: 0 !important;
    padding: 10px 30px 30px !important;
}

/* no #div-login o rodapé não é mais o último elemento (o link "Esqueci
   minha senha" vem depois dele), então não precisa do respiro de 30px —
   esse espaço agora fica por conta do padding-bottom do próprio link. */
#div-login.card-login .card-footer {
    padding-bottom: 6px !important;
}

.card-login .btn-login {
    background: var(--app-success) !important;
    border-color: var(--app-success) !important;
    border-radius: 10px;
    font-weight: 700;
    font-size: 15px;
    letter-spacing: .02em;
    padding: 13px !important;
    width: 100%;
    margin: 0 !important;
}

#div-esqueci .card-footer {
    display: flex;
    gap: 12px;
}

#div-esqueci .card-footer .btn {
    flex: 1;
    margin: 0 !important;
    padding: 13px !important;
    font-size: 15px;
}

/* ".btn-registro" (Voltar) também carrega ".btn-exibir-login" — que é usada
   como gancho de clique pro toggle via JS, não só estilo — então a exclusão
   abaixo evita que a cor âmbar do link "Esqueci minha senha" vaze pro botão. */
.btn-registro {
    background: var(--app-surface) !important;
    border: 1px solid var(--app-border) !important;
    color: var(--app-text-body) !important;
    border-radius: 10px;
    font-weight: 700;
    box-shadow: none !important;
}

.esqueci-senha {
    background: transparent !important;
    border: 0 !important;
    border-radius: 0;
    margin: 0 !important;
    padding: 0 0 15px !important;
}

.esqueci-senha,
.esqueci-links {
    display: flex;
    justify-content: center;
    gap: 18px;
}

.btn-exibir-login:not(.btn-registro) {
    color: var(--app-warning) !important;
    font-weight: 600;
    font-size: 13px;
    cursor: pointer;
}

/* ───────────────────────── cards de conteúdo (perfil, cadastros, etc.) ─────────────────────────
   Estilo genérico pra os cards/formulários usados nas telas internas do
   painel (Meu Perfil, Alterar Perfil e o resto do CRUD) — mesma linguagem
   visual do dashboard, sem depender de classe por classe. */

.card:not(.card-indicators):not(.card-chart):not(.card-login) {
    background: var(--app-surface) !important;
    border: 1px solid var(--app-border);
    border-radius: 12px;
    box-shadow: 0 6px 16px rgba(20, 40, 80, .08) !important;
}

.card .card-header-info,
.card .card-header-primary,
.card .card-header-dynamic,
.card .card-header-rose,
.card .card-header-success,
.card .card-header-warning,
.card .card-header-danger {
    background: var(--app-surface) !important;
    box-shadow: none !important;
    border-radius: 12px 12px 0 0;
    border-bottom: 1px solid var(--app-border);
}

.card > .card-header:first-child {
    margin-top: 0 !important;
}

.card .card-header .card-title {
    color: var(--app-text) !important;
    font-weight: 800;
}

.card .card-header .card-category {
    color: var(--app-text-muted) !important;
}

/* regra global: label de formulário (CActiveForm::labelEx/label, sempre
   dentro de um .form-group) — vinha com o cinza apagado padrão do
   Bootstrap (#aaa), sem negrito mas também sem nenhuma cor do tema.
   Usa a mesma cor do título "Alertas"/qualquer card-title (--app-text),
   mas sem negrito (só o title leva peso 800) — e 2px de respiro até o
   campo embaixo, que antes vinha colado (margin-bottom:0). Não cobre
   os labels que já têm estilo próprio e deliberado (.filter-field,
   .detail-label, .toggle-row-label). */
.form-group > label {
    color: var(--app-text) !important;
    font-weight: 400 !important;
    /* custom-geral.css tem ".form-group label{margin-bottom:0!important}"
       (mesma especificidade — precisa do !important pra ganhar). */
    margin-bottom: 4px !important;
}

/* regra global: qualquer input .form-control ganha respiro dos dois
   lados por padrão — vira e mexe algum outro seletor (Bootstrap,
   vendor) zera o padding horizontal e o texto cola na borda esquerda
   (já apareceu no campo de data do filtro, agora no email do perfil). */
.form-control {
    border: 1px solid var(--app-border) !important;
    border-radius: 8px !important;
    background: var(--app-canvas) !important;
    color: var(--app-text-body) !important;
    box-shadow: none !important;
    box-sizing: border-box !important;
    height: 38px !important;
    /* padding vertical zerado + line-height preenchendo o box de conteúdo
       inteiro (38px de altura - 2px de borda = 36px), em vez de padding
       8px+line-height 20px (tentativa anterior, ainda deixava sobra pro
       navegador distribuir e <select>/<input> distribuem essa sobra de
       jeitos diferentes). Sem sobra nenhuma, não tem o que centralizar de
       forma diferente - o line-box passa a SER o box de conteúdo. */
    padding: 0 12px !important;
    line-height: 36px !important;
    font-size: 14px !important;
}

textarea.form-control {
    height: auto !important;
    line-height: 1.5 !important;
    padding: 8px 12px !important;
}

/* CAUSA REAL do desalinhamento select vs input, e depois da quebra do
   grid nos formulários de comentário/arquivo (achada via DevTools, não
   CSS-arqueologia): o bootstrap-material-design.js, chamado globalmente
   em material-dashboard.js ($('body').bootstrapMaterialDesign()),
   adiciona a classe "bmd-form-group" DIRETO no .form-group já existente
   (não cria um wrapper novo quando já há um .form-group ancestral - e
   quase todo formulário deste app tem um). Isso é inofensivo quando o
   .form-group não tem outro papel, mas quando ele TAMBÉM é uma coluna
   do grid (col-lg-4, col-lg-12), qualquer neutralização via CSS
   (ex: display:contents) neutraliza a própria coluna e quebra o layout.
   Como o app nunca usa o label flutuante que esse plugin existe pra
   animar, a correção definitiva foi desativar a chamada
   bootstrapMaterialDesign() na raiz (material-dashboard.js) em vez de
   remendar o efeito aqui - assim a classe nunca é adicionada. */

.form-control:focus {
    border-color: var(--app-primary) !important;
    box-shadow: 0 0 0 3px rgba(var(--app-primary-rgb), .15) !important;
}

/* seta customizada em todo <select> do sistema — a seta nativa do
   navegador ficava quase invisível (cinza claro sobre fundo claro) e
   sem ela o campo não fica óbvio que é uma seleção, não um texto. */
select.form-control,
.filter-field select,
.page-size-selector select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 10px center !important;
    background-size: 14px !important;
    padding-right: 32px !important;
    /* padding-block: alguns navegadores mantêm um respiro vertical interno
       do <select> nativo via essa propriedade lógica mesmo com padding e
       height já zerados/fixados acima - só o `padding` normal não some com
       ele em todo motor de renderização. */
    padding-block: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

.btn-success {
    background: var(--app-success) !important;
    border-color: var(--app-success) !important;
}

.btn-info:not(.btn-registro) {
    background: var(--app-primary) !important;
    border-color: var(--app-primary) !important;
}

.btn-outline-info {
    color: var(--app-primary) !important;
    border-color: var(--app-primary) !important;
    background: transparent !important;
}

/* CDetailView (tela "Meu Perfil") */
.detail-view {
    width: 100%;
    border-collapse: collapse;
    background: transparent !important;
}

/* zii/widgets/assets/detailview/styles.css também fixa "border:1px
   white solid" em toda th/td — invisível no claro (branco sobre
   branco), mas sobrava como um contorno branco vivo em cada célula no
   dark. !important derruba os 4 lados antes de recolocar só o
   border-bottom que a gente quer. */
.detail-view th {
    text-align: left;
    color: var(--app-text-muted);
    font-weight: 700;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .03em;
    padding: 11px 14px;
    width: 240px;
    border: 0 !important;
    border-bottom: 1px solid var(--app-border) !important;
    vertical-align: top;
}

.detail-view td {
    padding: 11px 14px;
    color: var(--app-text-body);
    border: 0 !important;
    border-bottom: 1px solid var(--app-border) !important;
}

.detail-view tr:last-child th,
.detail-view tr:last-child td {
    border-bottom: 0 !important;
}

/* zii/widgets/assets/detailview/styles.css (publicado automaticamente
   pelo próprio widget CDetailView, mesmo esquema do pager.css do
   CGridView) pinta tr.odd/tr.even com um azul clarinho/cinza fixos,
   sem variar por tema — visual datado (mesmo motivo por trás de ter
   removido o zebra-stripe da grid) e ilegível no dark. Mesmo tratamento
   flat: linhas iguais, só o divisor (já vem do border-bottom acima). */
.detail-view tr.odd,
.detail-view tr.even {
    background: transparent !important;
}

/* mesmo vendor leak de sempre (.card{margin-top:30px}) — a tela de
   exibir não tinha nenhuma seção "search-form"-like acima pra absorver
   essa margem, então o primeiro card sobrava com um vão grande embaixo
   do breadcrumb/botão Imprimir. */
.alerta-exibir-content > [class*="col-"]:first-child .card {
    margin-top: 0 !important;
}

.main-panel a:not(.btn) {
    color: var(--app-primary);
}

.main-panel > .footer {
    border-top: 0;
}

/* "© 2026 by Digitale" vinha com float-right (Bootstrap) do vendor —
   centralizado igual ao rodapé do mockup. */
.main-panel > .footer .copyright {
    float: none !important;
    width: 100%;
    text-align: center;
}

/* ───────────────────────── meu perfil / alterar perfil ───────────────────────── */

.back-link {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    font-size: 13px;
    font-weight: 700;
    color: var(--app-text-muted) !important;
    text-decoration: none !important;
    margin-bottom: 16px;
}

.back-link:hover {
    color: var(--app-primary) !important;
}

.back-link .material-icons {
    font-size: 18px !important;
}

.profile-top {
    display: flex;
    gap: 16px;
    margin-bottom: 20px;
    flex-wrap: wrap;
    align-items: stretch;
}

.profile-header {
    background: var(--app-surface);
    border: 1px solid var(--app-border);
    border-radius: 12px;
    box-shadow: 0 6px 16px rgba(20, 40, 80, .08);
    padding: 26px 24px;
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    flex: 1 1 380px;
}

.avatar-lg {
    width: 76px;
    height: 76px;
    border-radius: 50%;
    background: var(--app-chip-bg);
    color: var(--app-primary);
    font-weight: 800;
    font-size: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 6px 16px rgba(20, 40, 80, .16);
}

.avatar-lg-img {
    object-fit: cover;
}

.profile-header-info {
    flex: 1;
    min-width: 0;
}

.profile-header-info h2 {
    margin: 0 0 8px;
    font-size: 19px;
    font-weight: 800;
    color: var(--app-text);
}

.profile-header-pills {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.pill {
    display: inline-flex;
    align-items: center;
    padding: 3px 11px;
    border-radius: 100px;
    background: var(--app-chip-bg);
    border: 1px solid rgba(var(--app-primary-rgb), .18);
    color: var(--app-primary);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .03em;
    text-transform: uppercase;
}

.pill-muted {
    background: var(--app-surface-2);
    border-color: var(--app-border);
    color: var(--app-text-muted);
}

.btn-profile-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    margin-top: 4px;
    background: var(--app-primary);
    color: #fff !important;
    border: 0;
    border-radius: 9px;
    padding: 11px 18px;
    font-size: 13.5px;
    font-weight: 700;
    cursor: pointer;
    text-decoration: none !important;
    transition: opacity .15s ease;
}

.btn-profile-primary:hover {
    opacity: .9;
    color: #fff !important;
}

/* ícone de calendário sobreposto num campo de data (ex: postoFixo
   Entrada/Saída) - pointer-events:none pro clique atravessar até o
   input e abrir o datepicker normalmente, mesmo clicando em cima do
   ícone. */
.input-icon-wrap {
    position: relative;
}

.input-icon-wrap .form-control {
    padding-right: 34px;
}

.input-icon-wrap .input-icon {
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translateY(-50%);
    font-size: 18px;
    color: var(--app-text-muted);
    pointer-events: none;
}

.detail-photos {
    display: flex;
    gap: 16px;
    flex: 0 1 auto;
}

.photo-card {
    background: var(--app-surface);
    border: 1px solid var(--app-border);
    border-radius: 12px;
    box-shadow: 0 6px 16px rgba(20, 40, 80, .08);
    padding: 16px;
    text-align: center;
    flex: 1 1 160px;
    max-width: 200px;
    display: block;
    text-decoration: none !important;
}

.photo-card img {
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    border-radius: 8px;
    display: block;
    margin-bottom: 10px;
    background: var(--app-surface-2);
}

.photo-card-label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--app-text-muted) !important;
    letter-spacing: .03em;
}

/* linha do breadcrumb (widget renderizado pelo layout) + grupo de
   ações da tela (Buscar/Exportar), lado a lado, alinhados ao centro —
   view nenhuma consegue injetar HTML dentro dessa div (ela já foi
   renderizada pelo layout antes do $content), então o grupo de ações
   é montado normalmente na view e um JS move ele pra cá
   (appendTo('.breadcrumb-wrap')) logo no carregamento. Isso evita de
   vez o truque de margin-top negativo — que "comia" o respiro do que
   vinha depois (buscador/cards ficavam colados). */
.breadcrumb-wrap {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 10px;
    min-height: 48px;
    padding: 14px 0;
}

/* sem botões de ação pra mostrar (telas que não registram nada pra
   mover pra cá via JS) — fica vazia pra sempre, então não faz sentido
   reservar o mesmo respiro de quando tem conteúdo. */
.breadcrumb-wrap:empty {
    min-height: 0;
    padding: 0 0 15px;
}

/* padrão "Buscar" (pill com texto, ícone troca lupa/x) + "Exportar"
   (PDF/CSV) — mesmo grupo de botões na linha do breadcrumb, pensado
   pra repetir em toda tela de listagem (Alerta Geral, Abordagem, etc). */
.breadcrumb-actions-group {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    position: relative;
}

.btn-pill-search {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 38px;
    padding: 0 16px;
    border: none;
    border-radius: 19px;
    background: var(--app-primary);
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: filter .15s ease;
}

.btn-pill-search:hover {
    filter: brightness(.92);
}

/* sem nenhum contorno/borda ao clicar ou focar (foco padrão do
   navegador some) */
.btn-pill-search:focus,
.btn-pill-search:active {
    outline: none;
    box-shadow: none;
}

.btn-pill-search .material-icons {
    font-size: 18px;
}

/* no dark o visual "sólido" já ficava bom por si só como chip claro
   sobre texto azul — mantém como estava, só o claro pede o fundo
   azul sólido + texto branco. */
@media (prefers-color-scheme: dark) {
    .btn-pill-search {
        background: var(--app-chip-bg);
        color: var(--app-primary);
    }
}

:root[data-theme="dark"] .btn-pill-search {
    background: var(--app-chip-bg);
    color: var(--app-primary);
}

:root[data-theme="light"] .btn-pill-search {
    background: var(--app-primary);
    color: #fff;
}

/* só o ícone, sem fundo/borda em nenhum tema */
.btn-export-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    padding: 0;
    border: none;
    background: transparent;
    color: var(--app-text-muted);
    cursor: pointer;
    transition: color .15s ease;
}

.btn-export-icon:hover {
    color: var(--app-primary);
}

.btn-export-icon:focus,
.btn-export-icon:active {
    outline: none;
    box-shadow: none;
}

.export-dropdown-menu {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    z-index: 50;
    background: var(--app-surface);
    border: 1px solid var(--app-border);
    border-radius: 8px;
    box-shadow: 0 6px 16px rgba(20, 40, 80, .12);
    min-width: 120px;
    overflow: hidden;
    display: none;
}

.export-dropdown-menu a {
    display: block;
    padding: 10px 14px;
    color: var(--app-text-body);
    font-size: 14px;
    text-decoration: none;
}

.export-dropdown-menu a:hover {
    background: var(--app-chip-bg);
}

/* formulário de busca em N linhas fixas (não depende do wrap do
   flex/grid do Bootstrap) — cada .busca-row é uma linha só no
   desktop, os campos dividem a largura igualmente entre si não
   importa se são 6 ou 7. */
.busca-row {
    display: flex;
    gap: 12px;
    margin-bottom: 16px;
}

.busca-row:last-child {
    margin-bottom: 0;
}

.busca-row .form-group {
    flex: 1 1 0;
    min-width: 0;
    margin-bottom: 0;
}

@media (max-width: 991px) {
    .busca-row {
        flex-wrap: wrap;
    }

    .busca-row .form-group {
        flex: 1 1 45%;
    }
}

@media (max-width: 600px) {
    .busca-row .form-group {
        flex: 1 1 100%;
    }
}

.detail-card {
    background: var(--app-surface);
    border: 1px solid var(--app-border);
    border-radius: 12px;
    box-shadow: 0 6px 16px rgba(20, 40, 80, .08);
    padding: 6px 24px;
    margin-bottom: 20px;
}

.detail-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

/* info de auditoria (Criado por/Aprovado por) dentro de um FORM de
   edição - era texto puro sem estilo nenhum, jogado no final da página
   (ex: cartaoPrograma/alterar). Rótulo carrega o peso visual
   (maiúsculo/muted), o nome fica normal - mesma regra de "valor nunca é
   bold" usada em .detail-value. */
.form-audit-info {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    background: var(--app-surface-2);
    border: 1px solid var(--app-border);
    border-radius: 8px;
    padding: 10px 16px;
    margin: 4px 0 16px;
}

.form-audit-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
}

.form-audit-item .material-icons {
    font-size: 16px;
    color: var(--app-text-muted);
}

.form-audit-label {
    color: var(--app-text-muted);
    font-weight: 700;
    text-transform: uppercase;
    font-size: 11px;
    letter-spacing: .03em;
}

.form-audit-name {
    color: var(--app-text);
}

.detail-cell {
    padding: 16px 12px 16px 0;
    border-bottom: 1px solid var(--app-border);
}

.detail-label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--app-text-muted);
    margin-bottom: 4px;
}

.detail-value {
    font-size: 14.5px;
    font-weight: 400;
    color: var(--app-text);
    overflow-wrap: anywhere;
}

/* título dentro de um .detail-card (ex.: "Informações do Solicitante"
   na tela de exibir do Alerta Geral) — mesma linguagem do card-title
   comum, só que sem precisar do .card-header/.row que ele carrega. */
.section-title-inline {
    /* .detail-card só tem 6px de padding-top (pensado pro card "sem
       título" do Meu Perfil, cujo primeiro filho já é uma célula do
       grid) — aqui, com um título antes do grid, sobrava colado na
       borda de cima do card. */
    margin: 10px 0 4px;
    font-size: 16px;
    font-weight: 800;
    color: var(--app-text);
}

/* contador "(N)" ao lado do título de uma seção (ex: resultados de
   busca agrupados por entidade) e a mensagem de "nada encontrado". */
.section-title-inline .section-count {
    font-weight: 400;
    color: var(--app-text-muted);
    font-size: 14px;
}

/* subtítulo de uma listagem dentro de .detail-card - mesmo papel do
   .card-category do card antigo (título + linha secundária), pras
   listagens que não usam mais o .card/.card-header clássico. */
.section-subtitle {
    margin: -2px 0 12px;
    color: var(--app-text-muted);
    font-size: 13px;
}

/* legenda de cores dos gráficos de linha (report/turno.php,
   report/viatura.php) — era um <div style="background-color:..."> cru
   por item + texto solto + tag <BR> antiga, sem espaçamento nenhum
   entre os itens. Cor de cada item é dinâmica (por equipe/tipo), então
   o quadrado continua vindo via style inline; aqui só padroniza
   layout/tipografia. */
.chart-legend {
    list-style: none;
    margin: 10px 0 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 6px 20px;
}

.chart-legend-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--app-text-body);
}

.chart-legend-dot {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 3px;
    flex-shrink: 0;
}

/* lista de itens pra selecionar (pedido/separarPedido, devolverPedido)
   — era um .row cru com pares col-lg-1/col-lg-11 repetidos por item,
   dependendo da aritmética de 12 colunas pra quebrar linha sozinho.
   Cada item ganha sua própria linha com fundo/borda, igual o resto dos
   cards de conteúdo do painel. */
.pedido-item-picker-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.pedido-item-picker-row {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 12px;
    border: 1px solid var(--app-border);
    border-radius: 8px;
    background: var(--app-surface-2);
}

.pedido-item-picker-checkbox {
    flex-shrink: 0;
}

.pedido-item-picker-photo {
    flex-shrink: 0;
    width: 150px;
}

/* o carrossel de fotos aqui é uma miniatura dentro de uma linha de
   lista, não o card grande e isolado de outras telas — a altura fixa
   de 200px do .img-carousel-block padrão deixava cada linha enorme. */
.pedido-item-picker-photo .img-carousel-block {
    height: 110px !important;
}

.pedido-item-picker-info {
    flex: 1;
    min-width: 0;
}

.pedido-item-picker-title {
    font-weight: 700;
    font-size: 15px;
    color: var(--app-text);
    margin-bottom: 4px;
}

.pedido-item-picker-meta {
    font-size: 13px;
    color: var(--app-text-muted);
}

.section-empty {
    color: var(--app-text-muted);
    margin: 4px 0 0;
}

/* seção de resultado que abre/fecha (ex: cada bloco do Procurar
   Pessoas) — nasce fechada, clique no título revela o conteúdo. */
.section-collapse-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    user-select: none;
}

.section-collapse-icon {
    color: var(--app-text-muted);
    transition: transform .15s ease;
}

.section-collapse-head.open .section-collapse-icon {
    transform: rotate(180deg);
}

/* formulário de alterar perfil — regra base sumiu numa edição anterior
   (só tinha sobrado ".form-card .alert"), por isso o formulário
   aparecia sem o cartão (fundo/borda/sombra) por trás. */
.form-card {
    background: var(--app-surface);
    border: 1px solid var(--app-border);
    border-radius: 12px;
    box-shadow: 0 6px 16px rgba(20, 40, 80, .08);
    padding: 24px;
    margin-bottom: 20px;
}

.form-card .alert {
    margin-bottom: 18px;
}

/* Cerca Digital unificada (regra embutida na própria cerca, sem tela
   separada) - passos numerados dentro do mesmo form-card, e o toggle de
   Entrar/Sair/Entrar e sair que mostra/esconde os blocos de notificação. */
.form-step-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--app-text);
    margin: 28px 0 16px;
    padding-top: 20px;
    border-top: 1px solid var(--app-border);
}
.form-card > .row:first-of-type + .form-step-title,
.form-step-title:first-child {
    margin-top: 0;
    padding-top: 0;
    border-top: none;
}
.form-step-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--app-primary);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    margin-right: 6px;
}
.badge-nota-interna {
    display: inline-block;
    background: var(--app-surface-2);
    color: var(--app-text-muted);
    border-radius: 6px;
    padding: 2px 8px;
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .03em;
    margin-left: 8px;
    margin-bottom: 6px;
}
.tipo-regra-toggle {
    display: inline-flex;
    border: 1px solid var(--app-border);
    border-radius: 9px;
    overflow: hidden;
    margin-bottom: 10px;
}
.tipo-regra-opcao {
    margin: 0;
    padding: 9px 20px;
    font-size: 13px;
    font-weight: 600;
    color: var(--app-text-body);
    cursor: pointer;
    border-right: 1px solid var(--app-border);
}
.tipo-regra-opcao:last-child { border-right: none; }
.tipo-regra-opcao input {
    margin-right: 6px;
}
.tipo-regra-opcao:has(input:checked) {
    background: var(--app-surface-2);
    color: var(--app-text);
    box-shadow: inset 0 0 0 2px var(--app-primary);
}
.bloco-notif {
    border-left: 3px solid var(--app-success);
    padding-left: 18px;
    margin-top: 14px;
}
.bloco-notif.saida {
    border-left-color: var(--app-danger);
}
.bloco-notif-titulo {
    font-size: 13px;
    font-weight: 700;
    margin-bottom: 12px;
}
.bloco-notif.entrada .bloco-notif-titulo { color: var(--app-success); }
.bloco-notif.saida .bloco-notif-titulo { color: var(--app-danger); }
.form-footer-buttons {
    display: flex;
    justify-content: flex-end;
    margin-top: 24px;
}

.form-row {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    margin-bottom: 18px;
}

.form-row .form-field {
    flex: 1 1 240px;
}

.form-row .form-field label {
    display: block;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--app-text-muted) !important;
    margin-bottom: 6px;
}

/* mesma legenda de campo, mas sem letter-spacing - "TIPO *" parecia
   começar mais à direita que "Chefe Cecom" (mesmo box, mesmo x=0)
   mesmo os dois começando na mesma coordenada de fato. */
.form-usuario-top-grid .form-field label {
    display: block;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--app-text-muted) !important;
    margin-bottom: 6px;
}

/* usuario/alterar: 3 colunas lado a lado sempre (não usa flex-wrap
   como .form-row, que embaralhava a ordem - os 2 campos de foto
   "sobravam" pra linha de baixo em telas mais estreitas, cada um
   isolado, dando a impressão de 3 seções empilhadas em vez de 3
   colunas). Coluna 1 é ela mesma uma mini-grade 2x2 pros 4 campos
   (Tipo/Cargo/Status/Email); colunas 2 e 3 são cada foto. */
.form-usuario-top-grid {
    display: grid;
    grid-template-columns: 3fr 1fr 1fr;
    gap: 20px;
    margin-bottom: 18px;
    align-items: stretch;
}

/* cada coluna é seu próprio box - mesma fórmula visual do
   .profile-header/.photo-card (fundo branco, borda, raio, sombra),
   como 3 irmãs lado a lado, não aninhadas dentro de outro card.
   align-items:stretch no grid pai já iguala a altura das 3; as colunas
   de foto (que também levam .form-field) centralizam o conteúdo
   verticalmente nessa altura extra, em vez de ficar colado no topo. */
.form-usuario-col-box {
    background: var(--app-surface);
    border: 1px solid var(--app-border);
    border-radius: 12px;
    box-shadow: 0 6px 16px rgba(20, 40, 80, .08);
    padding: 20px;
}

.form-usuario-col-box.form-field {
    display: flex;
    flex-direction: column;
}

/* legenda ("Foto"/"Foto Assinatura") fica presa no topo do box, na
   mesma altura da legenda "Tipo" (mesma regra de label acima) - só o
   ícone+texto do upload centralizam no espaço que sobra embaixo. */
.form-usuario-photo-fill {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.form-usuario-fields-col {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px 20px;
}

@media (max-width: 900px) {
    .form-usuario-fields-col {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 700px) {
    .form-usuario-top-grid {
        grid-template-columns: 1fr;
    }

    .form-usuario-fields-col {
        grid-template-columns: 1fr;
    }
}

/* linha dos 6 toggles - mesma grade (mesmo x=0 da coluna 1, alinhado
   com "Tipo") mas com colunas do tamanho do próprio conteúdo
   (max-content), não 1fr fixo - senão rótulos curtos ("Chefe Cecom")
   e longos ("Receber Notificação Email") ficariam com a mesma largura
   e nenhum dos 6 caberia numa linha só. */
.form-usuario-toggles-row {
    display: grid;
    grid-template-columns: repeat(6, max-content);
    gap: 18px 24px;
}

@media (max-width: 1100px) {
    .form-usuario-toggles-row {
        grid-template-columns: repeat(3, max-content);
    }
}

@media (max-width: 700px) {
    .form-usuario-toggles-row {
        grid-template-columns: 1fr;
    }
}

.form-photo {
    flex: 0 0 140px;
    text-align: center;
}

.form-photo .avatar-lg {
    margin: 0 auto 12px;
    width: 76px;
    height: 76px;
}

.form-photo-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 1px solid var(--app-border);
    background: var(--app-surface);
    color: var(--app-primary) !important;
    font-weight: 700;
    font-size: 12px;
    padding: 7px 14px;
    border-radius: 100px;
    cursor: pointer;
}

.toggle-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 12px 0;
    border-bottom: 1px solid var(--app-border);
}

.toggle-row-last {
    border-bottom: 0;
}

/* variante pra quando o toggle é um campo isolado num form (não uma
   lista de configurações) — label e switch colados, sem esticar pra
   pontas opostas da linha. */
.toggle-row-inline {
    justify-content: flex-start;
    gap: 10px;
    border-bottom: 0;
    padding: 6px 0;
}

.toggle-row-label {
    font-size: 13.5px;
    font-weight: 400;
    color: var(--app-text);
}

.switch {
    position: relative;
    display: inline-flex;
    width: 44px;
    height: 26px;
    flex-shrink: 0;
    cursor: pointer;
}

.switch input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.switch .track {
    position: absolute;
    inset: 0;
    background: var(--app-border);
    border-radius: 100px;
    transition: background .15s ease;
}

.switch .thumb {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--app-surface);
    box-shadow: 0 2px 4px rgba(0, 0, 0, .25);
    transition: transform .15s ease;
}

.switch input:checked ~ .track {
    background: var(--app-primary);
}

.switch input:checked ~ .track .thumb {
    transform: translateX(18px);
}

/* variante compacta — usada onde tem muitos switches lado a lado numa
   grid apertada (ex: camadas do Mapa, 2 por linha x 5 linhas x 3
   colunas) e o .switch padrão (44x26) não cabe. */
.switch.switch-sm {
    width: 34px;
    height: 19px;
}

.switch.switch-sm .thumb {
    top: 2.5px;
    left: 3px;
    width: 14px;
    height: 14px;
}

.switch.switch-sm input:checked ~ .track .thumb {
    transform: translateX(15px);
}

.form-check-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 4px;
    cursor: pointer;
    width: fit-content;
}

.form-check-row input {
    width: 17px;
    height: 17px;
    margin: 0;
    accent-color: var(--app-primary);
    cursor: pointer;
}

.form-check-row span {
    font-size: 13.5px;
    font-weight: 400;
    color: var(--app-text);
}

.password-section {
    margin-top: 15px;
}

.password-section .progress {
    height: 6px !important;
    border-radius: 100px;
    background: var(--app-border);
    overflow: hidden;
    margin-top: 8px;
    font-size: 0;
}

@media (max-width: 600px) {
    .profile-header {
        flex-direction: column;
        text-align: center;
    }

    .form-row .form-field,
    .form-row .form-photo {
        flex-basis: auto;
    }

    /* foto de usuário/assinatura ocupa a largura toda, igual às demais
       divs da tela — no desktop o max-width:200px mantém os cards de
       foto compactos lado a lado, mas empilhados no mobile isso só
       deixava sobrando espaço vazio ao redor. */
    .photo-card {
        max-width: none;
        flex-basis: 100%;
    }
}

/* ───────────────────────── acessibilidade ───────────────────────── */

a:focus-visible,
button:focus-visible,
input:focus-visible,
.sidebar .nav li > a:focus-visible {
    outline: 2px solid var(--app-primary);
    outline-offset: 2px;
}

/* ───────────────────────── tabelas: cor do texto ─────────────────────────
   nenhuma regra do vendor/custom-geral definia color pra <td>/<th> de
   dentro de .table (CGridView, usado em todas as telas de "gerenciar") —
   o texto ficava sempre com o color:#212529 (quase preto) herdado do
   body do Bootstrap, ilegível no dark. O CDetailView (.detail-view, usado
   no "Meu Perfil"/exibir) já tinha esse fix; faltava aqui. */
.table > tbody > tr > td,
.table > tbody > tr > th {
    color: var(--app-text-body);
}

/* ───────────────────────── tabelas: zebra-striping ─────────────────────────
   custom-geral.css fixa um ciano forte (#e9fbfd) pra linha par/cabeçalho de
   TODA .table do sistema — além de não variar por tema (ilegível no dark),
   é um visual datado. Zera o zebra-stripe (visual "flat", linhas todas
   iguais + divisor fino + hover) igual ao tema de referência que o
   cliente gostou — só o cabeçalho fica com um tom sutil pra se destacar. */
.table > tbody > tr:nth-child(even) {
    background-color: transparent !important;
}

.table > thead > tr {
    background-color: var(--app-surface-2) !important;
}

/* ───────────────────────── tabelas: acabamento geral ───────────────────────── */

.table > tbody > tr > td {
    padding-top: 14px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--app-border) !important;
}

.table > thead > tr > th {
    text-transform: uppercase;
    font-size: .72rem !important;
    letter-spacing: .04em;
    font-weight: 700 !important;
    color: var(--app-text) !important;
    border-bottom: 1px solid var(--app-border) !important;
}

.table > tbody > tr:hover {
    background-color: var(--app-chip-bg) !important;
}

.table > tbody > tr:last-child > td {
    border-bottom: 0 !important;
}

/* categoria com a cor de destaque do próprio tipo (mesma paleta dos
   cards de resumo), em vez de texto cinza neutro */
.category-text {
    font-weight: 600;
}

/* nomes de cor prefixados com "cat-" (não "text-") de propósito — o
   Bootstrap/Material Dashboard já reservam .text-primary/.text-success/
   etc. com as PRÓPRIAS cores (ex.: .text-primary é roxo Material,
   #9c27b0, não o azul --app-primary daqui), então usar esses nomes
   colidia e a cor do vendor ganhava. */
.category-text.cat-danger { color: var(--app-danger); }
.category-text.cat-tertiary { color: var(--app-tertiary); }
.category-text.cat-primary { color: var(--app-primary); }
.category-text.cat-success { color: var(--app-success); }
.category-text.cat-neutral { color: var(--app-neutral); }

/* rodapé customizado da grid: seletor "Mostrar N registros" + paginação
   + resumo, tudo na mesma linha (era summary em cima da tabela e pager
   solto embaixo, cada um com seu alinhamento). */
.grid-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 16px;
}

.grid-footer .pager {
    margin-top: 0;
}

.grid-footer .grid-summary {
    color: var(--app-text-muted);
    font-size: .82rem;
    white-space: nowrap;
}

.page-size-selector {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--app-text-muted);
    font-size: .85rem;
    white-space: nowrap;
}

.page-size-selector select {
    width: auto;
    padding: 5px 10px !important;
    padding-right: 32px !important;
    background-color: var(--app-surface);
    color: var(--app-text-body);
    border: 1px solid var(--app-border);
    border-radius: 6px;
}

@media (max-width: 767px) {
    .grid-footer {
        justify-content: center;
        text-align: center;
    }
}

/* ───────────────────────── alerta geral: cards de resumo ───────────────────────── */

/* ───────────────────────── paginação (CGridView/CLinkPager) ─────────────────────────
   o Yii publica seu próprio assets/.../pager.css junto com o widget
   CLinkPager (ul.yiiPager{display:inline}, ul.yiiPager .first/.last
   {display:none}, bordas/cores fixas no <a>) — como usa seletores com
   "ul." é mais específico que ".yiiPager" sozinho, então tudo aqui
   precisa do prefixo "ul." + !important pra realmente ganhar. */
.pager {
    margin-top: 16px;
    color: var(--app-text-muted);
}

ul.yiiPager {
    display: flex !important;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px !important;
    list-style: none;
    padding: 0 !important;
    margin: 0 !important;
}

ul.yiiPager li {
    display: flex !important;
}

ul.yiiPager li.first,
ul.yiiPager li.last {
    display: flex !important;
}

ul.yiiPager li a {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    min-width: 34px;
    height: 34px;
    padding: 0 10px !important;
    border: 0 !important;
    border-radius: 8px;
    background: var(--app-chip-bg);
    color: var(--app-text-body) !important;
    font-size: .85rem;
    font-weight: 600;
    text-decoration: none;
}

ul.yiiPager li a .material-icons {
    font-size: 18px;
}

ul.yiiPager li a:hover {
    background: var(--app-border);
    text-decoration: none;
}

ul.yiiPager li.selected a {
    background: var(--app-primary) !important;
    color: #fff !important;
}

/* precisa de !important pra ganhar de "ul.yiiPager li.first/.last" acima
   quando os dois batem no mesmo <li> (ex.: classe "first hidden" na
   página 1) — mesma especificidade, quem tem !important e vem depois no
   arquivo é quem decide. */
ul.yiiPager li.hidden {
    display: none !important;
}

.alerta-stats-row {
    margin-left: -5px;
    margin-right: -5px;
    margin-bottom: 10px;
    row-gap: 15px;
}

/* mesmo vendor leak de sempre (.card{margin-top:30px}) — o card da
   listagem, logo depois da busca, sobrava com um vão grande no topo. */
.search-form + .row .card {
    margin-top: 0 !important;
}

.alerta-stats-row > [class*="col-"] {
    padding-left: 5px !important;
    padding-right: 5px !important;
}

/* acima de 6 categorias de estatística, só as 6 primeiras aparecem —
   o resto (.stat-card-extra) nasce oculto e é revelado pelo botão
   "Ver mais" (custom-admin.js, statCardsToggle) em vez de sobrar uma
   segunda linha incompleta (ex: 6 numa linha + 1 sozinho embaixo). */
.stat-card-extra {
    display: none;
}

.stat-cards-toggle-wrap {
    text-align: center;
}

.stat-cards-toggle-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border-radius: 8px;
    background: transparent;
    border: 1px dashed var(--app-border);
    color: var(--app-primary);
    font-weight: 600;
    font-size: 13px;
    cursor: pointer;
}

.stat-cards-toggle-btn:hover {
    background: var(--app-chip-bg);
}

.stat-cards-toggle-btn .material-icons {
    font-size: 18px;
}

.card-alert-stat {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    background: var(--app-surface) !important;
    border: 1px solid var(--app-border);
    border-radius: 12px;
    box-shadow: 0 6px 16px rgba(20, 40, 80, .08);
}

/* mesmo vendor leak de sempre (.card{margin-top:30px}) — sem search-form
   acima pra "absorver" a margem (como na listagem), o card de inserir/
   alterar era o primeiro da página e sobrava um vão grande embaixo do
   breadcrumb. */
.card-form-alerta {
    margin-top: 0 !important;
}

/* cabeçalho "Alertas ... Novo" sem depender do grid do Bootstrap
   (.row > .col-md-6) — o gutter do col (15px) + padding do card-header
   (15px) deixava o botão "Novo" 26px mais pra dentro que o "Buscar" do
   card de busca (que usa 20px de padding direto, sem grid). */
.card-header-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    /* usa margin (não padding) pros 20px de respiro dos dois lados —
       assim a borda inferior do cabeçalho (título+Novo) nasce e termina
       exatamente onde o conteúdo da grid abaixo começa/termina (mesmo
       20px de padding do card-body), em vez de esticar de ponta a ponta
       do card enquanto a grid embaixo é mais estreita. */
    margin: 0 20px !important;
    padding: 15px 0 !important;
}

@media (max-width: 767px) {
    .card-header-actions {
        flex-direction: column;
        align-items: stretch;
        text-align: center;
    }
}

.card-alert-stat .card-body {
    padding: 20px 22px !important;
}

.alert-stat-top {
    display: flex;
    align-items: baseline;
    gap: 8px;
}

.alert-stat-count {
    font-size: 1.9rem;
    font-weight: 700;
    color: var(--app-text);
    line-height: 1;
}

.alert-stat-pct {
    font-size: .95rem;
    color: var(--app-text-muted);
}

/* rótulo mais longo (ex: "Despacho Prioritário") quebrava em 2 linhas e
   deixava esse card mais alto que os vizinhos de rótulo curto — o JS
   (custom-admin.js, fitStatLabels) encolhe o font-size pra caber numa
   linha só; nowrap/ellipsis aqui é só a rede de segurança caso o JS não
   rode (ex: JS desabilitado). */
.alert-stat-label {
    margin: 6px 0 0;
    color: var(--app-text-muted);
    font-size: .85rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.alert-stat-bar {
    margin-top: 14px;
    height: 6px;
    border-radius: 3px;
    background: var(--app-chip-bg);
    overflow: hidden;
}

.alert-stat-bar-fill {
    height: 100%;
    border-radius: 3px;
    background: var(--stat-c, var(--app-primary));
}

.card-alert-stat.stat-danger { --stat-c: var(--app-danger); }
.card-alert-stat.stat-tertiary { --stat-c: var(--app-tertiary); }
.card-alert-stat.stat-primary { --stat-c: var(--app-primary); }
.card-alert-stat.stat-success { --stat-c: var(--app-success); }
.card-alert-stat.stat-warning { --stat-c: var(--app-warning); }
.card-alert-stat.stat-neutral { --stat-c: var(--app-neutral); }

/* badge de prioridade e dot de status — grid de listagem do Alerta Geral */

.badge-prioridade {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 12px;
    font-size: .75rem;
    font-weight: 600;
    color: #fff;
    white-space: nowrap;
}

.badge-prioridade.badge-danger { background: var(--app-danger); }
.badge-prioridade.badge-primary { background: var(--app-primary); }
.badge-prioridade.badge-warning { background: var(--app-warning); color: #1a1a1a; }
.badge-prioridade.badge-neutral { background: var(--app-neutral); }

.status-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-right: 6px;
}

.status-dot.dot-success { background: var(--app-success); }
.status-dot.dot-primary { background: var(--app-primary); }
.status-dot.dot-neutral { background: var(--app-neutral); }
.status-dot.dot-warning { background: var(--app-warning); }
.status-dot.dot-danger { background: var(--app-danger); }

/* cards de atalho da tela de Cadastros (coreTipo/gerenciarCadastros) —
   o cartão inteiro é o link (sem botão/rodapé separado), altura fixa pra
   ficarem todos idênticos independente do tamanho do título, 4 por linha
   caindo pra 3/2/1 conforme a tela encolhe. */
.cadastro-cards-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
    margin-bottom: 28px;
}

/* modificador pra quando a tela só tem 3 atalhos (ex: transito/gerenciar,
   que não tem um 4º como "Apreendidos") - sem isso a grade de 4 colunas
   sobra uma vazia à direita em telas largas; as media queries abaixo já
   caem pra 3 a partir de 1300px, então aqui só cobrimos a faixa acima
   disso. */
.cadastro-cards-grid-3 {
    grid-template-columns: repeat(3, 1fr);
}

/* pra 2 atalhos só (ex: report/index): 1fr esticaria cada card até
   metade da largura da tela (enorme comparado ao tamanho normal de um
   atalho) - largura máxima fixa mantém o tamanho parecido com o de um
   grid de 4, só que sem as 2 colunas vazias sobrando. */
.cadastro-cards-grid-2 {
    grid-template-columns: repeat(2, minmax(0, 320px));
}

@media (max-width: 1300px) {
    .cadastro-cards-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 900px) {
    .cadastro-cards-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 560px) {
    .cadastro-cards-grid {
        grid-template-columns: 1fr;
    }
}

.cadastro-card {
    display: flex;
    align-items: center;
    gap: 14px;
    height: 76px;
    padding: 0 18px;
    background: var(--app-surface);
    border: 1px solid var(--app-border);
    border-radius: 14px;
    box-shadow: 0 4px 12px rgba(20, 40, 80, .06);
    text-decoration: none;
    transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}

.cadastro-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 22px rgba(20, 40, 80, .12);
    border-color: var(--app-primary);
    text-decoration: none;
}

.cadastro-card-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: color-mix(in srgb, var(--app-primary), transparent 88%);
    color: var(--app-primary);
}

.cadastro-card-icon .material-icons {
    font-size: 22px;
}

.cadastro-card-title {
    margin: 0;
    font-size: 14px;
    font-weight: 700;
    color: var(--app-text);
    line-height: 1.3;
}

/* cards de ajuda (FAQ > Ajuda, instruções/materiais/faqs) — mesma
   linguagem visual do .cadastro-card (cartão inteiro é o link, ícone
   numa caixa colorida, sem botão de rodapé separado), só que mais alto
   pra caber título + descrição em vez de só um rótulo de uma linha. */
.help-card {
    display: flex;
    flex-direction: column;
    gap: 10px;
    height: 100%;
    padding: 18px;
    background: var(--app-surface);
    border: 1px solid var(--app-border);
    border-radius: 14px;
    box-shadow: 0 4px 12px rgba(20, 40, 80, .06);
    text-decoration: none;
    transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}

.help-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 22px rgba(20, 40, 80, .12);
    border-color: var(--app-primary);
    text-decoration: none;
}

.help-card-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: color-mix(in srgb, var(--app-primary), transparent 88%);
    color: var(--app-primary);
}

.help-card-icon .material-icons {
    font-size: 22px;
}

.help-card-title {
    margin: 0;
    font-size: 15px;
    font-weight: 700;
    color: var(--app-text);
    line-height: 1.3;
}

.help-card-subtitle {
    margin: 0;
    color: var(--app-text-muted);
    font-size: 13px;
    line-height: 1.5;
    /* descrições variam bastante de tamanho — sem truncar, um card com
       texto longo desalinhava a altura de toda a fileira. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* visualizador de JSON (tela de detalhe do Log, custom-json-viewer.js) —
   sem lib externa no repo, cores via token do tema pra funcionar em
   claro/escuro sem bloco de dark mode duplicado. */
.log-json-viewer {
    background: var(--app-surface-2);
    border: 1px solid var(--app-border);
    border-radius: 10px;
    padding: 14px 16px;
    font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--app-text-body);
    overflow-x: auto;
    white-space: pre;
    margin: 0;
}

.log-json-viewer .jv-key { color: var(--app-primary); font-weight: 700; }
.log-json-viewer .jv-string { color: var(--app-success); }
.log-json-viewer .jv-number { color: var(--app-tertiary); }
.log-json-viewer .jv-boolean { color: var(--app-danger); font-weight: 700; }
.log-json-viewer .jv-null { color: var(--app-text-muted); font-style: italic; }

/* tabelas dos relatórios (report/turno.php, viatura.php, atendimento.php)
   eram <table class="table"> cru, sem nenhuma regra própria — herdavam
   cor de texto do body base do Bootstrap, ilegível no dark. */
.wa-table-report {
    color: var(--app-text-body);
}

.wa-table-report th,
.wa-table-report td {
    color: var(--app-text-body);
    border-color: var(--app-border);
}

.wa-table-report thead th {
    color: var(--app-text-muted);
    font-weight: 700;
}

/* selo "CARTÃO Nº" do form de alterar cartão programa — era cor fixa
   (#00C5AC) fora da paleta do tema, e um <h2> cru com padding fixo
   quebrando linha na coluna estreita (mesmo problema do selo G.U.T
   logo abaixo — aqui reaproveita a mesma caixa de tamanho fixo). */
.cartao-programa-badge {
    background: var(--app-primary) !important;
}

/* painel de Atividades aninhado dentro do card do form de Cartão
   Programa — usava a utility .bg-light do Bootstrap (cinza claro fixo)
   pra se distinguir do card pai; agora que .card puro ganhou fundo
   temático (ver comentário acima de ".card"), troquei por essa classe
   própria, um tom levemente diferente do pai, dark/light aware. */
.card-nested-panel {
    background: var(--app-surface-2) !important;
}

/* selo G.U.T do form de Atividade (Cartão Programa) — era um <h2> cru
   com "p-4" do Bootstrap (padding fixo de 1.5rem nos 4 lados) tentando
   caber "G.U.T" + o número numa coluna de só 2/12, sem largura/altura
   fixa nem flex — o texto quebrava linha de forma feia dependendo do
   tamanho da tela. Vira uma caixa de tamanho fixo, conteúdo centralizado. */
.wa-js-gut-square,
.cartao-programa-badge {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    width: 100%;
    max-width: 130px;
    min-height: 100px;
    margin: 0 auto;
    padding: 10px;
    border-radius: 12px;
    text-align: center;
}

.wa-js-gut-square .gut-label,
.cartao-programa-badge .gut-label {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .5px;
}

/* selo G.U.T compacto pra dentro de célula de tabela (report/atendimento
   - listagem por equipe) — era um <h4> cru com "p-2" tentando caber
   numa célula de <td>, com o mesmo problema de tamanho/alinhamento do
   .wa-js-gut-square acima, só que numa escala bem menor. */
.gut-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    height: 24px;
    padding: 0 6px;
    border-radius: 6px;
    color: #fff;
    font-weight: 700;
    font-size: 12px;
}

.wa-js-gut-square .wa-js-total-gut,
.cartao-programa-badge .cartao-programa-badge-numero {
    font-size: 32px;
    font-weight: 800;
    line-height: 1;
}

/* abas Intervalo/Ocorrências/Novidades do form de Cecom (inserir/alterar)
   e as abas Viaturas/Posto/Faltas/Controle/Novidades do form de Mapa
   Força — os dois JS (custom-cecom.js, custom-mapa-forca.js) já
   alternam as classes btn-light/btn-success pra marcar a aba ativa;
   só reaproveito a mesma aparência pill do tema nos dois, sem tocar na
   lógica de troca de aba de nenhum dos dois. */
.wa-js-cecom-btn-aba,
.wa-js-mapa-btn-aba {
    border-radius: 100px !important;
    background: var(--app-surface-2) !important;
    border: 1px solid var(--app-border) !important;
    color: var(--app-text) !important;
    font-weight: 600;
    box-shadow: none !important;
}

.wa-js-cecom-btn-aba.btn-success,
.wa-js-mapa-btn-aba.btn-success {
    background: var(--app-primary) !important;
    border-color: var(--app-primary) !important;
    color: #fff !important;
}

/* linha das abas + painel abaixo — cola os dois (sem vão), a aba ativa
   já basta como "título" do painel (não repete "INTERVALO"/"OCORRÊNCIAS"
   dentro dele de novo). */
.cecom-tabs-row {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 10px;
}

.cecom-tab-panel {
    margin-top: 0 !important;
}

/* form de alterar/inserir do Mapa Força — card do "Buscar RSM" sempre
   visível (não é uma busca colapsável de listagem, é a ação que
   carrega viaturas/postos/faltas do turno/data/status escolhidos
   acima), linha dos 2 gráficos, e linha das 5 abas em pill. */
.mapa-forca-busca-card {
    margin: 16px 0 0;
}

.mapa-forca-busca-card .card-body {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}

.mapa-forca-busca-hint {
    color: var(--app-text-muted);
    font-size: 12.5px;
}

.wa-js-btn-mapa-buscar-rsm {
    border-radius: 100px !important;
    font-weight: 700;
    box-shadow: none !important;
}

/* estado de repouso (antes de clicar) — o JS alterna pra .btn-success
   sozinho durante o carregamento (ver custom-mapa-forca.js,
   btnRsmBuscar), aqui só troco o cinza-chapado do .btn-light padrão
   por um contorno no tom do tema, sem mexer na lógica de troca. */
.wa-js-btn-mapa-buscar-rsm.btn-light {
    background: transparent !important;
    border: 1px solid var(--app-primary) !important;
    color: var(--app-primary) !important;
}

.mapa-forca-charts-row {
    margin-top: 16px;
    align-items: stretch;
}

/* os dois cards (Viaturas/Posto Fixo e Faltas) devem ficar com a mesma
   altura mesmo tendo quantidade de conteúdo diferente (um tem legenda
   embaixo, o outro não) — sem isso, o card mais baixo desalinhava a
   linha visualmente. */
.mapa-forca-charts-row .card-chart {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.mapa-forca-charts-row .card-chart .card-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    /* mais respiro entre o título (card-header) e o gráfico — sem isso,
       os rótulos "explode" do Chartist quase encostavam no título. */
    padding-top: 18px;
}

/* estado vazio dos 2 gráficos (custom-mapa-forca.js, InitEmptyCharts)
   — desenhado assim que a página carrega, antes do "Buscar RSM"; cinza
   neutro pra não parecer dado real (que usa a cor padrão do Chartist). */
.ct-chart-empty .ct-series-a .ct-slice-pie {
    fill: var(--app-border);
    stroke: var(--app-surface);
}

/* cores fixas e distintas por fatia do gráfico de pizza (Viaturas e
   Motos / Posto Fixo) — sem isso, dependia de CSS de vendor que às
   vezes deixava as duas fatias parecendo a mesma cor. */
#ChartViaturas .ct-series-a .ct-slice-pie {
    fill: var(--app-primary);
}

#ChartViaturas .ct-series-b .ct-slice-pie {
    fill: var(--app-tertiary);
}

/* legenda embaixo do gráfico de pizza (custom-mapa-forca.js,
   RenderChartLegend) — uma cor por item, na mesma ordem das fatias. */
.wa-js-chart-legend {
    list-style: none;
    margin: 10px 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 12px;
    color: var(--app-text-muted);
}

.wa-js-chart-legend-dot {
    display: inline-block;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    margin-right: 6px;
    vertical-align: middle;
}

.wa-js-chart-legend-dot.ct-series-a {
    background: var(--app-primary);
}

.wa-js-chart-legend-dot.ct-series-b {
    background: var(--app-tertiary);
}

/* cabeçalho das 4 tabelas do form de alterar Mapa Força (Viaturas,
   Postos Fixos, Faltas, Controle) — só os <th>, não os títulos das
   seções (esses continuam alinhados à esquerda). */
.wa-table-itens-abas > thead > tr > th,
.wa-table-itens-aba-faltas > thead > tr > th,
.wa-table-itens-aba-controle > thead > tr > th {
    text-align: center;
    /* o Bootstrap alinha <th>/<td> pelo topo por padrão — nos
       cabeçalhos de 1 linha só (ex: "RSM", "Viatura") isso deixava o
       texto "flutuando" no topo da célula, mais alta por causa dos
       vizinhos de 2 linhas (ex: "Escala Ordinária"). */
    vertical-align: middle;
}

.mapa-forca-tabs-row {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin: 16px 0;
}

/* botões Inserir/Salvar (+ Imprimir) no rodapé do form — sem isso,
   "col-lg-12" fora de um .row (não tinha .row em volta) ganhava o
   padding do grid do Bootstrap sem a margem negativa que o cancela,
   ficando mais pra dentro que os cards acima. */
.mapa-forca-buttons-row {
    margin-top: 20px;
}

/* "Total: N" da aba Controle — movido pra depois da tabela (antes
   ficava colado em cima, sem nenhum respiro/estilo). */
.mapa-forca-controle-total {
    margin: 14px 0 0;
    padding: 12px 16px;
    border-top: 1px solid var(--app-border);
    background: var(--app-surface-2);
    border-radius: 8px;
    font-weight: 700;
    color: var(--app-text);
}

.mapa-forca-controle-total .wa-js-totalViaturas {
    color: var(--app-primary);
}

/* botão "Adicionar intervalo/ocorrência" — ícone + texto, contorno no
   tom do tema em vez do btn-light cinza-chapado do vendor. */
.btn-add-row {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border-radius: 8px;
    background: transparent;
    border: 1px dashed var(--app-border);
    color: var(--app-primary);
    font-weight: 600;
    font-size: 13px;
}

.btn-add-row:hover {
    background: var(--app-chip-bg);
    color: var(--app-primary);
}

.btn-add-row .material-icons {
    font-size: 18px;
}

/* linha dinâmica de intervalo/ocorrência (Cecom) — alinha todas as
   colunas pela base (onde fica o campo), não pelo topo, senão a
   lixeira (sem label acima) fica mais alta que os campos ao lado. */
.cecom-dynamic-row {
    align-items: flex-end;
}

.cecom-row-trash {
    display: flex;
    justify-content: center;
    padding-bottom: 12px;
}

/* popup de confirmação de logoff (SweetAlert2) — segue o tema dark/light
   igual ao resto do painel, com uma barra de título no lugar do título
   gigante padrão do SweetAlert2. */
.semur-swal-popup {
    padding: 0 !important;
    border-radius: 12px !important;
    background: var(--app-surface) !important;
    overflow: hidden;
}

.semur-swal-popup .swal2-title {
    width: 100%;
    margin: 0 !important;
    padding: 14px 44px 14px 20px !important;
    background: var(--app-surface-2);
    border-bottom: 1px solid var(--app-border);
    color: var(--app-text) !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    text-align: left !important;
}

.semur-swal-popup .swal2-close {
    top: 10px;
    right: 10px;
    color: var(--app-danger) !important;
    font-size: 22px;
}

.semur-swal-popup .swal2-close:hover {
    color: var(--app-danger) !important;
    opacity: .75;
}

.semur-swal-popup .swal2-content {
    padding: 20px !important;
    color: var(--app-text-body) !important;
    font-size: 14px !important;
}

.semur-swal-popup .swal2-actions {
    width: 100%;
    margin: 0 !important;
    padding: 0 20px 20px;
    justify-content: center;
    gap: 10px;
}

.semur-swal-btn {
    padding: 8px 22px;
    border-radius: 8px;
    font-size: 13.5px;
    font-weight: 600;
    border: 1px solid transparent;
    cursor: pointer;
}

.semur-swal-btn-confirm {
    background: var(--app-primary);
    color: #fff;
}

.semur-swal-btn-cancel {
    background: var(--app-surface);
    color: var(--app-text);
    border-color: var(--app-border);
}