/* Select2 - Chenge default <Select> height  */
.select2-selection__rendered {
    line-height: 31px !important;
}
.select2-container .select2-selection--single {
    height: 35px !important;
}
.select2-selection__arrow {
    height: 34px !important;
}

/* Buttons size */
.btn-very-small {
    padding: 0.2rem 0.2rem;
    font-size: 10px;
}

.link-default a {
    text-decoration: none;
}

body {
    background: #f5f7fb;
}

:root {
    --topbar-offset: 110px;
    --topbar-bg: rgba(255, 255, 255, 0.96);
    --topbar-border: #dfe6ef;
    --topbar-hover: #edf3f9;
    --topbar-active: #e3edf8;
}

nav.navbar.topbar-nav {
    border-bottom-left-radius: 18px;
    border-bottom-right-radius: 18px;
    border-bottom: 1px solid var(--topbar-border);
    background: var(--topbar-bg) !important;
    backdrop-filter: blur(10px);
    padding: 0.55rem 0.95rem;

    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1030;
}

.topbar-nav .navbar-collapse {
    align-items: center;
    gap: 0.5rem;
}

.topbar-nav .navbar-brand img {
    height: 34px;
    width: auto;
}

.topbar-nav .topbar-primary-nav {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 0.15rem;
    min-width: 0;
    overflow: visible;
    padding-bottom: 0;
}

.topbar-nav .topbar-primary-nav .nav-link {
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
    line-height: 1.2;
    font-size: 0.92rem;
    font-weight: 500;
    color: #3c4b5d;
    padding: 0.45rem 0.72rem;
    border-radius: 10px;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.topbar-nav .topbar-primary-nav .nav-link:hover {
    background: var(--topbar-hover);
}

.topbar-nav .topbar-primary-nav .nav-link.active {
    background: var(--topbar-active);
    color: var(--bs-primary) !important;
}

.topbar-nav .topbar-primary-nav .dropdown-toggle::after {
    margin-left: 0.35rem;
    vertical-align: middle;
}

.topbar-nav .topbar-notifications-nav,
.topbar-nav .topbar-user-nav {
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    gap: 0.25rem;
}

.topbar-nav .topbar-notifications-nav .nav-link,
.topbar-nav .topbar-user-nav .nav-link {
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
    line-height: 1.2;
}

.topbar-nav .topbar-notifications-nav > .nav-item,
.topbar-nav .topbar-user-nav > .nav-item {
    margin-right: 0 !important;
}

.topbar-nav .dropdown-menu {
    border-radius: 12px;
    border: 1px solid #e4ebf2;
    padding: 0.45rem 0;
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.12);
}

.topbar-nav .dropdown-item {
    padding: 0.5rem 0.85rem;
    border-radius: 8px;
    font-size: 0.92rem;
}

.topbar-nav .dropdown-item:hover {
    background: #eef3f8;
}

@media (min-width: 1200px) {
    .topbar-nav .topbar-primary-nav .dropdown:hover > .dropdown-menu {
        display: block;
        margin-top: 0;
    }
}

/* ------------------------------------------------------------------------ *
 *  O menu como GAVETA abaixo de 1200px
 *
 *  Antes era um `collapse`: ao tocar no botao, os 13 itens se abriam como uma
 *  lista centralizada que empurrava a pagina inteira para baixo. Num iPad isso
 *  ocupava a tela toda, e o item que se queria tocar estava sempre no fim.
 *
 *  A gaveta desliza por cima, rola sozinha, fecha ao tocar fora e nao move a
 *  pagina. Os itens ficam alinhados a esquerda, na vertical, com altura de
 *  toque de verdade — ler uma coluna de rotulos a esquerda e muito mais rapido
 *  do que varrer texto centralizado.
 * ------------------------------------------------------------------------ */
@media (max-width: 1199.98px) {
    nav.navbar.topbar-nav {
        border-bottom-left-radius: 14px;
        border-bottom-right-radius: 14px;
    }

    /* O `backdrop-filter` da barra cria BLOCO DE CONTENCAO para descendentes
       `position: fixed` — e a gaveta vive dentro da barra. Com ele ligado, o
       `top:0; bottom:0` do offcanvas se resolvia contra a barra de 62px, e a
       gaveta abria com 62px de altura: so o cabecalho aparecia. O desfoque e
       decorativo e so se nota no desktop, entao abaixo de 1200px ele sai.
       A altura explicita fica como cinto e suspensorio — `dvh` porque no
       Safari do iPhone a barra de enderecos muda a altura da janela. */
    nav.navbar.topbar-nav {
        backdrop-filter: none;
    }

    .topbar-drawer {
        --bs-offcanvas-width: min(86vw, 340px);
        height: 100vh;
        height: 100dvh;
    }

    /* A gaveta vive DENTRO da barra fixa, e a barra (z-index 1030) forma um
       contexto de empilhamento proprio: o 1045 da gaveta e o 1040 do fundo
       escurecido — que o Bootstrap poe no pai da gaveta, tambem dentro da barra —
       so valem la dentro. Para o resto da pagina os dois estavam a 1030, e o
       balao de chamados (fixo no canto, 1035) aparecia POR CIMA da gaveta aberta,
       no meio dos itens, pegando o toque de quem queria o menu.
       Enquanto a gaveta esta aberta ou deslizando, a barra inteira sobe para o
       nivel de um offcanvas (1045): gaveta e fundo cobrem o balao, e um modal
       (1055) continua por cima de tudo. Fechada, a barra volta aos 1030 e o
       balao segue como sempre. `:has` e nao um script: o estado vem das classes
       que o proprio Bootstrap poe na gaveta, entao nao ha como sair de sincronia. */
    nav.navbar.topbar-nav:has(.topbar-drawer.show, .topbar-drawer.showing, .topbar-drawer.hiding) {
        z-index: 1045;
    }

    /* O mesmo efeito para navegador sem `:has` (Safari/iPadOS anterior ao 15.4): a classe vem dos
       eventos do próprio offcanvas (layouts/app.blade.php). Regra separada de propósito — um
       seletor que o navegador não entende derruba a regra inteira em que está. */
    nav.navbar.topbar-nav.gaveta-aberta {
        z-index: 1045;
    }

    .topbar-drawer .offcanvas-header {
        padding: 0.9rem 1rem;
    }

    .topbar-drawer .offcanvas-body {
        padding: 0.5rem 0 1.25rem 0;
        display: flex;
        flex-direction: column;
    }

    /* Cada lista vira uma secao da gaveta, separada por um filete. */
    .topbar-drawer .navbar-nav {
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        width: 100%;
    }

    .topbar-drawer .topbar-notifications-nav,
    .topbar-drawer .topbar-user-nav {
        margin-top: 0.5rem;
        padding-top: 0.5rem;
        border-top: 1px solid #edf2f7;
    }

    /* 48px de altura: o dedo acerta, e a lista continua compacta o bastante
       para os 13 itens caberem sem rolagem num iPad em pe. */
    .topbar-drawer .nav-link {
        padding: 0.75rem 1.1rem;
        min-height: 48px;
        display: flex;
        align-items: center;
        gap: 0.5rem;
        border-radius: 0;
    }

    .topbar-drawer .nav-link.active,
    .topbar-drawer .nav-link:hover {
        background: #eef3f8;
    }

    /* Submenu recuado, para o pai e os filhos nao virarem uma lista chapada. */
    .topbar-drawer .dropdown-menu {
        position: static !important;
        float: none;
        border: 0;
        box-shadow: none;
        margin: 0;
        padding: 0 0 0.25rem 0;
        background: #f8fafc;
    }

    .topbar-drawer .dropdown-item {
        padding: 0.65rem 1.1rem 0.65rem 2rem;
        min-height: 44px;
        display: flex;
        align-items: center;
        white-space: normal;
    }

    /* Os contadores (sinos, carrinhos) ficam numa faixa horizontal propria:
       sao icones, nao itens de navegacao, e empilhados um por linha ocupariam
       meia gaveta. */
    .topbar-drawer .topbar-notifications-nav {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 0.35rem;
        padding-left: 1.1rem;
        padding-right: 1.1rem;
    }

    .topbar-drawer .topbar-notifications-nav .nav-link {
        padding: 0.5rem;
        min-height: 44px;
        min-width: 44px;
        justify-content: center;
    }
}

.content-wrapper {
    width: 95%;
    max-width: 1800px;
    margin: 100px auto 20px auto !important;
    background: #ffffff;
    padding: 30px 35px;
    border-radius: 16px;
    box-shadow: 0 4px 14px rgba(0,0,0,0.07);
    min-height: 400px;
}

footer {
    font-size: 14px;
    opacity: 0.7;
}

.table {
    width: 100% !important;
}

/* A caixa da tabela rola, mas SEM o `-webkit-overflow-scrolling: touch` que o Bootstrap põe em
   todo .table-responsive — desfeito aqui de propósito. No iOS/iPadOS esse `touch` transforma a
   caixa num contexto de empilhamento (z-index 0): o modal incluído numa célula (transferir ativo
   ou kit, assinar termo) fica preso lá dentro, ABAIXO do fundo cinza do próprio modal e do
   cabeçalho fixo — escurecido, com o título coberto e surdo ao toque (iPad, deploy de 29/09/2026).
   A rolagem com inércia já é a padrão desde o iOS 13; o `touch` só trazia o efeito colateral.
   Só o WebKit do iPhone/iPad entende a propriedade (nem o Safari do Mac), então isto só se
   confere num aparelho desses; o reforço que se testa em qualquer navegador é o modal subir
   para o <body> ao abrir (script "modal preso numa caixa", em layouts/app.blade.php). */
.table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: auto;
}

.px-4 {
    margin-top: 30px;
}

/* =========================================================
   MOBILE RESPONSIVENESS
   ========================================================= */

/* --- Content wrapper: reduce padding on mobile --- */
@media (max-width: 767.98px) {
    .content-wrapper {
        width: 100%;
        margin: 72px auto 12px auto !important;
        padding: 16px 12px;
        border-radius: 10px;
    }

    /* Full-width containers inside pages — prevent over-padding */
    .container,
    .container-fluid,
    .container-fluid.px-4 {
        padding-left: 4px !important;
        padding-right: 4px !important;
    }

    /* Page top margin */
    .px-4 { margin-top: 12px; }

    /* Card padding reduction */
    .card-body {
        padding: 0.75rem;
    }

    .card-header {
        padding: 0.6rem 0.75rem;
    }

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

    /* Headings */
    .h3, h3 { font-size: 1.25rem; }
    .h4, h4 { font-size: 1.1rem; }
    .h5, h5 { font-size: 1rem; }

    /* Tables without explicit .table-responsive wrapper. Sem `-webkit-overflow-scrolling: touch`
       pelo mesmo motivo do .table-responsive lá em cima: no iPhone ele prendia o modal das
       células (transferir, na aba de ativos da ficha do usuário e da localização) por baixo do
       fundo cinza. */
    .card-body > .table,
    .tab-pane > .table {
        display: block;
        overflow-x: auto;
    }

    /* Stacked form rows on mobile */
    .row.g-2 > [class*="col-"],
    .row.g-3 > [class*="col-"] {
        margin-bottom: 0.4rem;
    }

    /* Filter forms: stack inputs vertically */
    form .row .col-auto,
    form .row .col-md-auto {
        width: 100%;
    }

    /* Input groups full width */
    .input-group {
        flex-wrap: wrap;
    }

    /* Btn groups on mobile */
    .btn-group {
        flex-wrap: wrap;
    }

    /* Nav tabs scrollable on mobile */
    .nav-tabs {
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .nav-tabs::-webkit-scrollbar { display: none; }
    .nav-tabs .nav-link {
        white-space: nowrap;
    }

    /* Pagination: smaller font */
    .pagination {
        font-size: 0.82rem;
    }

    /* Alert padding */
    .alert {
        padding: 0.6rem 0.85rem;
        font-size: 0.9rem;
    }

    /* List group items: reduce padding */
    .list-group-item {
        padding: 0.6rem 0.85rem;
    }

    /* Modals: full width on mobile */
    .modal-dialog {
        margin: 0.5rem;
    }

    /* Badges: smaller */
    .badge.fs-6 { font-size: 0.78rem !important; }

    /* Bulk transfer bar */
    #bulk-transfer-bar {
        font-size: 0.85rem;
        padding: 0.4rem 0.6rem;
        flex-wrap: wrap;
        gap: 0.4rem;
    }

    /* Page title margin */
    .px-4 { margin-top: 16px; }

    /* d-flex gap stacks on mobile */
    .d-flex.gap-2.flex-wrap { gap: 0.35rem !important; }
}

/* --- Small tablets (576px–767px) --- */
@media (min-width: 576px) and (max-width: 767.98px) {
    .content-wrapper {
        padding: 20px 16px;
    }
}

/* --- Navbar: expanded menu top margin adjustment --- */
@media (max-width: 1199.98px) {
    .content-wrapper {
        margin-top: 72px !important;
    }

}

/* --- Desktop: ensure full width usage --- */
@media (min-width: 992px) {
    .content-wrapper {
        width: 97%;
        max-width: 1920px;
        margin: 100px auto 20px auto !important;
        padding: 28px 32px;
    }
}

/* ------------------------------------------------------------------------ *
 *  Toque: o almoxarifado trabalha de iPad na mão
 *
 *  `pointer: coarse` é o seletor certo aqui — vale para dedo (iPad, celular) e
 *  NÃO vale para mouse, então o desktop continua exatamente como está. Nada de
 *  adivinhar por largura de tela: um notebook de 768px continua com mouse.
 *
 *  Medido antes: as caixas de seleção de linha têm 16px e os botões de ação 32px.
 *  A diretriz da Apple pede 44px — abaixo disso o dedo erra o alvo, e errar em
 *  "excluir" ao lado de "ver" custa caro.
 * ------------------------------------------------------------------------ */
@media (pointer: coarse) {
    .form-check-input {
        width: 1.35rem;
        height: 1.35rem;
    }

    /* Os botões de ação dentro de tabela. Só ficou barato depois que as tabelas
       passaram a rolar por dentro: antes, engordar o botão alargava a página. */
    .table .btn,
    .btn-very-small {
        min-height: 44px;
        min-width: 44px;
        padding: 0.45rem 0.55rem;
    }

    .btn-very-small {
        font-size: 0.8rem;
    }

    /* Ícone do Material Icons dentro desses botões acompanha, senão o botão cresce
       e o desenho fica perdido no meio. */
    .table .btn .material-icons,
    .btn-very-small .material-icons {
        font-size: 20px;
    }

    /* Abas: alvo maior e rolagem horizontal própria, para a barra nunca empurrar
       a página. A tela de Localização já fazia isso no `style` inline; aqui passa
       a valer para as 12 telas que têm abas. */
    .nav-tabs {
        overflow-x: auto;
        overflow-y: hidden;
        flex-wrap: nowrap;
        -webkit-overflow-scrolling: touch;
    }

    .nav-tabs .nav-link {
        min-height: 44px;
        white-space: nowrap;
        display: flex;
        align-items: center;
    }

    /* Link de ordenação no cabeçalho da tabela: é controle, não texto corrido.
       Media 9px de altura (o "#" com a setinha) — impossível de acertar com o dedo.
       Os links DENTRO das células ficam como estão de propósito: ali o alvo é a
       linha inteira, e engordar cada palavra quebraria a leitura da tabela. */
    .table thead th a {
        display: inline-flex;
        align-items: center;
        min-height: 44px;
    }
}

/* ------------------------------------------------------------------------ *
 *  Lista larga em iPad: a LINHA vira FICHA
 *
 *  A lista de ativos tem 11 colunas. Num iPad Pro de 1024px isso dá ~90px por
 *  coluna, e o resultado e o que se ve na tela: "Taubate - Tooling Ce...",
 *  "Medidor de Grandezas...". Nenhum ajuste de largura resolve — 11 colunas nao
 *  cabem, e rolar de lado atras da coluna certa e pior ainda para quem esta de pe
 *  com o aparelho na mao.
 *
 *  A saida e trocar o LAYOUT, nao os dados: cada linha vira uma ficha, com a mesma
 *  marcacao HTML. Uma renderizacao so — duplicar o laco em Blade seria criar duas
 *  verdades que divergem no primeiro mes. O Grid rearranja as celulas por posicao;
 *  a ordem das colunas esta documentada abaixo e e o unico acoplamento.
 *
 *  O gatilho tem duas partes de proposito:
 *    - abaixo de 992px, para qualquer aparelho;
 *    - ate 1199px QUANDO o ponteiro e dedo, que e o caso do iPad Pro de 1024 e do
 *      iPad em paisagem. Um notebook de 1024 com mouse continua com a tabela.
 *  O iPad Pro de 12.9" deitado (1366px) fica de fora: ali ha espaco de verdade.
 *
 *  Layout da ficha:
 *      [ ] codigo                                      [status]
 *          grupo              modelo            [validade]
 *          LOCALIZACAO: x                       [acoes]
 *          RESPONSAVEL: y     SUBRESPONSAVEL: z
 * ------------------------------------------------------------------------ */
@media (max-width: 991.98px), (pointer: coarse) and (max-width: 1199.98px) {
    .table-ficha,
    .table-ficha tbody {
        display: block;
    }

    .table-ficha thead {
        display: none;
    }

    .ficha-ativos tr {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr) minmax(0, 1fr) auto;
        grid-template-areas:
            "sel codigo codigo  status"
            "sel grupo  modelo  calib"
            "sel local  local   acoes"
            "sel pessoa subresp subresp";
        gap: 0.25rem 0.6rem;
        align-items: center;
        padding: 0.75rem 0.9rem;
        margin-bottom: 0.6rem;
        border: 1px solid #dfe6ef;
        border-radius: 0.5rem;
        background: #fff;
    }

    /* A listra zebrada briga com o fundo da ficha: cada cartao e um objeto so. */
    .table-ficha.table-striped > tbody > tr > * {
        background: transparent;
        box-shadow: none;
    }

    /* `!important` porque os utilitarios do Bootstrap (.text-center nas celulas)
       tambem usam, e sem isto o codigo do ativo sai centralizado no cartao. */
    .table-ficha td {
        display: block;
        border: 0;
        padding: 0;
        text-align: left !important;
        min-width: 0;
        overflow-wrap: break-word;
    }

    /* Ordem das colunas na lista de ativos — o acoplamento desta regra.
       1 selecao · 2 ID · 3 codigo · 4 grupo · 5 modelo · 6 validade
       7 status · 8 localizacao · 9 responsavel · 10 subresponsavel · 11 acoes */
    .ficha-ativos td:nth-child(1)  { grid-area: sel; align-self: start; padding-right: 0.4rem; }
    .ficha-ativos td:nth-child(2)  { display: none; }
    .ficha-ativos td:nth-child(3)  { grid-area: codigo; font-weight: 600; font-size: 1.05rem; }
    .ficha-ativos td:nth-child(4)  { grid-area: grupo; }
    .ficha-ativos td:nth-child(5)  { grid-area: modelo; }
    .ficha-ativos td:nth-child(6)  { grid-area: calib; }
    .ficha-ativos td:nth-child(7)  { grid-area: status; justify-self: end; }
    .ficha-ativos td:nth-child(8)  { grid-area: local; }
    .ficha-ativos td:nth-child(9)  { grid-area: pessoa; }
    .ficha-ativos td:nth-child(10) { grid-area: subresp; }
    .ficha-ativos td:nth-child(11) { grid-area: acoes; justify-self: end; }

    /* Grupo e modelo sao a linha de descricao: menores e discretos, porque quem
       procura na lista procura pelo codigo, nao pelo modelo. */
    .ficha-ativos td:nth-child(4),
    .ficha-ativos td:nth-child(5) {
        font-size: 0.875rem;
        color: #6c757d;
    }

    .ficha-ativos td:nth-child(8),
    .ficha-ativos td:nth-child(9),
    .ficha-ativos td:nth-child(10) {
        font-size: 0.875rem;
    }

    /* Sem o cabecalho, "Aguinaldo Scarpim" e "MANUEL JORGE" ficariam
       indistinguiveis. O rotulo vem do `data-rotulo`, que o Blade so emite quando
       ha valor — e por vir de __() acompanha o idioma de quem le. */
    .table-ficha td[data-rotulo]::before {
        content: attr(data-rotulo) ": ";
        font-size: 0.7rem;
        text-transform: uppercase;
        letter-spacing: 0.02em;
        color: #8a94a6;
    }

    /* Celula vazia nao ocupa linha: sem isto um ativo sem subresponsavel deixaria
       um vao no cartao, e a ficha de cada item teria uma altura diferente. */
    .table-ficha td:not([data-rotulo]):empty,
    .table-ficha td:not([data-rotulo]):-moz-only-whitespace {
        display: none;
    }

    .ficha-ativos td:nth-child(11) .btn-group {
        flex-wrap: wrap;
        justify-content: flex-end;
    }

    /* -------------------------------------------------------------------- *
     *  Ficha GENERICA — as demais listas
     *
     *  A de ativos tem 11 colunas e um desenho proprio, feito a mao. Para as
     *  outras oito (usuarios, compras, termos, consumiveis, grupos, unidades,
     *  categorias) o cartao e montado sozinho: o rotulo vem do cabecalho da
     *  propria tabela, por JavaScript, e aqui so se diz como desenhar.
     *
     *  Duas colunas: a caixa de selecao a esquerda, tudo o mais a direita. O
     *  titulo abre o cartao, os campos vem como "ROTULO: valor" e os botoes
     *  fecham, separados por um filete.
     * -------------------------------------------------------------------- */
    .table-ficha:not(.ficha-ativos),
    .table-ficha:not(.ficha-ativos) tbody {
        display: block;
    }

    .table-ficha:not(.ficha-ativos) thead {
        display: none;
    }

    .table-ficha:not(.ficha-ativos) tbody tr {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr);
        gap: 0.2rem 0.55rem;
        padding: 0.75rem 0.9rem;
        margin-bottom: 0.6rem;
        border: 1px solid #dfe6ef;
        border-radius: 0.5rem;
        background: #fff;
    }

    .table-ficha:not(.ficha-ativos).table-striped > tbody > tr > * {
        background: transparent;
        box-shadow: none;
    }

    .table-ficha:not(.ficha-ativos) td {
        display: block;
        grid-column: 2;
        border: 0;
        padding: 0;
        text-align: left !important;
        min-width: 0;
        overflow-wrap: break-word;
        font-size: 0.875rem;
    }

    /* A caixa de selecao fica na coluna da esquerda, na altura do titulo. So a
       primeira linha: as demais celulas tem `grid-column: 2` fixo, entao nada
       mais cai na coluna 1 e ela continua "so da caixa" de cima a baixo.
       Antes era `1 / span 30`, e as 30 linhas existiam de verdade: cada uma
       vazia ainda levava o `gap` de 0.2rem, e todo cartao com caixa de selecao
       (consumiveis com fusao, termos recusados) ganhava ~85px em branco no pe. */
    .table-ficha:not(.ficha-ativos) td.ficha-sel {
        grid-column: 1;
        grid-row: 1;
        align-self: start;
        padding-right: 0.3rem;
    }

    /* O titulo vai para a PRIMEIRA linha do cartao, qualquer que seja a posicao
       da coluna na tabela. Sem isto as celulas entravam no grid na ordem do HTML
       e o cartao abria por "ID: 12" (ou, no RDO, por seis campos antes do dia),
       com o titulo la embaixo, so mais gordo. `grid-row: 1` fixa a linha; as
       demais celulas, de coluna fixa e linha automatica, descem para as linhas
       livres seguintes na mesma ordem do cabecalho. A caixa de selecao mora na
       coluna 1 e divide a linha com ele, sem disputar a celula. */
    .table-ficha:not(.ficha-ativos) td.ficha-titulo {
        grid-row: 1;
        font-weight: 600;
        font-size: 1.02rem;
        margin-bottom: 0.15rem;
    }

    /* Celula sem conteudo nao vira linha em branco no cartao. */
    .table-ficha:not(.ficha-ativos) td.ficha-vazia {
        display: none;
    }

    .table-ficha:not(.ficha-ativos) td.ficha-acoes {
        margin-top: 0.5rem;
        padding-top: 0.5rem;
        border-top: 1px solid #eef2f7;
    }

    .table-ficha:not(.ficha-ativos) td.ficha-acoes .btn-group {
        flex-wrap: wrap;
        justify-content: flex-start;
    }

    .table-ficha:not(.ficha-ativos) td.ficha-acoes .btn-group > * {
        flex: 0 0 auto;
    }

    /* Rotulo e valor lado a lado: a coluna de rotulos a esquerda deixa o olho
       descer por ela, que e como se le uma ficha. */
    .table-ficha:not(.ficha-ativos) td[data-rotulo] {
        display: flex;
        align-items: baseline;
        gap: 0.4rem;
    }

    .table-ficha:not(.ficha-ativos) td[data-rotulo]::before {
        content: attr(data-rotulo) ":";
        flex: 0 0 auto;
        max-width: 42%;
        font-size: 0.7rem;
        text-transform: uppercase;
        letter-spacing: 0.02em;
        color: #8a94a6;
    }
}

/* ------------------------------------------------------------------------ *
 *  Telefone: a ficha de duas colunas nao cabe
 *
 *  O iPad tem largura para por grupo e modelo lado a lado; um iPhone de 390px
 *  nao tem. Com duas colunas de conteudo sobram ~100px para cada uma, e a
 *  palavra quebra letra a letra — "Mul/tim/etro", "RES/PON/SAV/EL". Abaixo de
 *  576px cada campo recebe a linha inteira.
 *
 *  As acoes ganham a propria linha, na horizontal. Empilhar os cinco botoes na
 *  vertical custaria 5 x 44px = 220px de altura por cartao; na horizontal eles
 *  cabem em 44px, porque 5 x 44 = 220px entram nos ~340px de largura util do
 *  cartao. Mesma legibilidade, um quinto da rolagem.
 * ------------------------------------------------------------------------ */
@media (max-width: 575.98px) {
    .ficha-ativos tr {
        grid-template-columns: auto minmax(0, 1fr) auto;
        grid-template-areas:
            "sel   codigo  status"
            "sel   grupo   grupo"
            "sel   modelo  modelo"
            "sel   calib   calib"
            "sel   local   local"
            "sel   pessoa  pessoa"
            "sel   subresp subresp"
            "acoes acoes   acoes";
        row-gap: 0.15rem;
    }

    /* A validade deixa de ser um canto e vira uma linha: no telefone ela some
       entre o modelo e a localizacao se ficar espremida a direita. */
    .ficha-ativos td:nth-child(6) {
        justify-self: start;
    }

    .ficha-ativos td:nth-child(11) {
        justify-self: stretch;
        margin-top: 0.4rem;
        padding-top: 0.4rem;
        border-top: 1px solid #eef2f7;
    }

    /* Os botoes ficam do tamanho natural e alinhados a esquerda. Com
       `space-between` quem tem UMA acao so — o caso do almoxarife, que so ve o
       "visualizar" — via o botao esticar por todo o cartao e virar uma barra
       cinza do tamanho da tela. */
    .ficha-ativos td:nth-child(11) .btn-group {
        width: 100%;
        justify-content: flex-start;
    }

    .ficha-ativos td:nth-child(11) .btn-group > * {
        flex: 0 0 auto;
    }

    /* Barra de filtros: em 390px os campos precisam da linha inteira, senao o
       select de localizacao vira "-- Localiz..." e o segundo campo de data cai
       sozinho numa linha. */
    .row.row-cols-lg-auto > .col-2,
    .row.row-cols-lg-auto > .col-4,
    .row.row-cols-lg-auto > .col-5 {
        width: 100%;
        max-width: 100%;
        flex: 0 0 100%;
    }

    .row.row-cols-lg-auto > .col-2 .input-group,
    .row.row-cols-lg-auto > .col-4 .input-group,
    .row.row-cols-lg-auto > .col-5 .input-group {
        max-width: 100% !important;
    }
}

/* ------------------------------------------------------------------------ *
 *  Paginação em tela estreita
 *
 *  São 23 mil ativos a 20 por página: a paginação do Laravel desenha uma dúzia
 *  de links numa linha só, o que dá um `<nav>` de 543px. Num telefone de 390px
 *  era ELE que fazia a página andar para o lado — não o cartão, que já cabia.
 *
 *  Quebrar a linha é melhor que rolar: numa lista longa o usuário quer ver
 *  para que páginas pode pular, e uma barra que rola esconde justamente isso.
 *  Vale para toda lista paginada do sistema, não só a de ativos.
 * ------------------------------------------------------------------------ */
@media (max-width: 767.98px) {
    .pagination {
        flex-wrap: wrap;
        justify-content: center;
        row-gap: 0.25rem;
    }
}

@media (pointer: coarse) {
    .pagination .page-link {
        min-width: 44px;
        min-height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
}

/* ------------------------------------------------------------------------ *
 *  Formulários em seções
 *
 *  Os formulários de cadastro despejavam 21 campos numa fileira contínua, sem
 *  agrupamento nenhum: identificação, dados fiscais, calibração, custódia e
 *  anexos tudo misturado. E como o container é de largura total, num monitor de
 *  1920px um campo de NCM de seis caracteres ficava com 480px — daí a sensação
 *  de campo flutuando perdido no espaço.
 *
 *  Duas correções: um teto de largura para a linha de leitura não passar do
 *  confortável, e um título de seção que diz onde o olho está.
 * ------------------------------------------------------------------------ */
.form-secoes {
    max-width: 1180px;
}

.form-secao {
    margin-top: 1.4rem;
}

.form-secao:first-child {
    margin-top: 0.25rem;
}

.form-secao-titulo {
    margin: 0;
    padding-bottom: 0.4rem;
    border-bottom: 1px solid #e4ebf2;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #6c7a8c;
}

/* Em telefone o título encosta demais no campo anterior sem isto. */
@media (max-width: 575.98px) {
    .form-secao {
        margin-top: 1.1rem;
    }
}

/* ------------------------------------------------------------------------ *
 *  Barra de filtros das listas (/assets e /purchase-requests)
 *
 *  O pedido foi "os filtros numa linha só" — e cada papel via a barra quebrar
 *  num ponto diferente, porque os controles que dependem do papel (a chave de
 *  desabilitados/arquivadas, os botões de novo, importar, exportar) ficavam
 *  dentro dela. Esses controles vão para a linha do título (.filtros-titulo),
 *  e a barra sai com o MESMO HTML para todo papel:
 *
 *    <form class="filtros-barra filtros-barra--linha-95em">
 *      <div class="filtros-barra__linha"> itens da 1ª linha </div>
 *      <div class="filtros-barra__linha"> itens da 2ª linha </div>
 *    </form>
 *
 *  Com mouse, a partir do ponto de quebra da página (o modificador
 *  --linha-<N>em, escolhido pelo orçamento de larguras medido de cada tela),
 *  as linhas-envelope somem (display: contents) e os itens viram UMA linha
 *  flex. Abaixo disso, e em qualquer toque, são duas linhas FIXAS. No iPad em
 *  pé (< 992px) e no telefone (< 576px) os itens empilham em pontos definidos;
 *  a página cuja primeira linha fixa não cabe num toque mais largo empilha
 *  também ali, com o modificador --empilha-toque-<N>em.
 *
 *  Itens:
 *    __checks   caixas de marcar, do tamanho do texto
 *    __status   select de largura fixa: --filtro-status (mouse) e
 *               --filtro-status-toque (texto de 16px). Pode crescer a partir
 *               dela, até --filtro-status-max, com --filtro-status-cresce
 *    __campo    item elástico: --filtro-cresce, --filtro-base, --filtro-min,
 *               --filtro-max
 *    __meia     campo que divide a linha no iPad em pé e a ocupa no telefone
 *    __periodo  input-group "rótulo · data · Até · data" (datas em __data)
 *    __acoes    os botões de buscar e de limpar
 *  As larguras próprias de cada página são só essas variáveis, definidas na
 *  própria página: a mecânica mora toda aqui, e uma regra da página nunca briga
 *  em especificidade com a do componente.
 *
 *  Rem/em em vez de px: com a fonte do navegador maior, o ponto de quebra anda
 *  junto com o texto em vez de estourar a linha sem quebra.
 * ------------------------------------------------------------------------ */
.filtros-barra {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
}

.filtros-barra__linha {
    display: flex;
    flex: 1 1 100%;
    flex-wrap: nowrap;
    align-items: center;
    gap: .5rem;
    min-width: 0;
}

.filtros-barra__checks {
    display: flex;
    align-items: center;
    gap: .75rem;
    flex: 0 0 auto;
    white-space: nowrap;
    font-size: .875rem;
}

.filtros-barra__checks .form-check {
    margin-bottom: 0;
}

/* Sem as variáveis de crescer e de máximo (o padrão), a largura é fixa. Com
   elas, um fator alto põe o status à frente dos campos na partilha da sobra: o
   flex a reparte na proporção dos fatores e, quando um item bate no máximo,
   passa o resto aos outros. */
.filtros-barra__status {
    flex: var(--filtro-status-cresce, 0) 0 var(--filtro-status, 14rem);
    width: var(--filtro-status, 14rem);
    max-width: var(--filtro-status-max, none);
}

/* A largura vem do layout (flex), não do texto: escolher a opção de nome mais
   comprido não reorganiza a barra. */
.filtros-barra__campo {
    flex: var(--filtro-cresce, 1) 1 var(--filtro-base, 10rem);
    min-width: var(--filtro-min, 0);
    max-width: var(--filtro-max, none);
    width: auto;
}

/* `.filtros-barra__periodo > .filtros-barra__data` empata em especificidade com
   a regra do Bootstrap (.input-group > .form-control { flex: 1 1 auto; width: 1%;
   min-width: 0 }) e vence por vir depois — uma classe solta perderia e o campo
   de data voltaria a ser espremido. */
.filtros-barra .input-group.filtros-barra__periodo {
    flex: 0 0 auto;
    width: auto;
    flex-wrap: nowrap;
}

.filtros-barra__periodo > .filtros-barra__data {
    flex: 0 0 6.25rem;
    width: 6.25rem;
    min-width: 0;
}

.filtros-barra__acoes {
    display: flex;
    align-items: center;
    gap: .5rem;
    flex: 0 0 auto;
}

/* O select2 fica em 31px, a altura dos form-*-sm vizinhos (o padrão do app, no
   topo deste arquivo, é 35px). */
.filtros-barra .select2-container .select2-selection--single {
    height: 31px !important;
}

.filtros-barra .select2-selection__rendered {
    line-height: 29px !important;
    font-size: .875rem;
}

.filtros-barra .select2-selection__arrow {
    height: 29px !important;
}

/* Uma linha só: as linhas-envelope somem e os itens viram filhos diretos do
   form. Só com mouse — no toque os controles têm 44px e não cabem. */
@media (min-width: 95em) and (pointer: fine) {
    .filtros-barra--linha-95em {
        flex-wrap: nowrap;
    }

    .filtros-barra--linha-95em > .filtros-barra__linha {
        display: contents;
    }
}

/* iPad em pé: cada linha-envelope quebra por dentro — as caixas dividem a linha
   com o status, os __meia dividem outra, o período fica com uma só para ele. */
@media (max-width: 991.98px) {
    .filtros-barra__linha {
        flex-wrap: wrap;
    }

    .filtros-barra__checks {
        flex: 1 1 auto;
    }

    .filtros-barra__meia {
        flex: 1 1 calc(50% - .25rem);
        min-width: 0;
    }

    .filtros-barra .input-group.filtros-barra__periodo {
        flex: 1 1 100%;
    }

    .filtros-barra__periodo > .filtros-barra__data {
        flex: 1 1 0;
        width: auto;
    }
}

/* O mesmo empilhamento do iPad em pé, no TOQUE de 992px a 67em (1072px), para
   a página que o pede com --empilha-toque-67em: com os controles de 44px, a
   primeira linha fixa de Compras não cabe no iPad antigo deitado (1024px) e
   passava 41px da barra. Só a partir de 62em: abaixo disso já vale o bloco do
   iPad em pé, e estas regras, mais específicas, venceriam as do telefone. As
   datas só ganham o crescer: a base de toque delas (7.25rem, abaixo) vale como
   no iPad em pé. */
@media (pointer: coarse) and (min-width: 62em) and (max-width: 66.99em) {
    .filtros-barra--empilha-toque-67em .filtros-barra__linha {
        flex-wrap: wrap;
    }

    .filtros-barra--empilha-toque-67em .filtros-barra__checks {
        flex: 1 1 auto;
    }

    .filtros-barra--empilha-toque-67em .filtros-barra__meia {
        flex: 1 1 calc(50% - .25rem);
        min-width: 0;
    }

    .filtros-barra--empilha-toque-67em .input-group.filtros-barra__periodo {
        flex: 1 1 100%;
    }

    .filtros-barra--empilha-toque-67em .filtros-barra__periodo > .filtros-barra__data {
        flex-grow: 1;
        flex-shrink: 1;
    }
}

/* Telefone: status e __meia na largura toda; o período quebra DE PROPÓSITO em
   duas linhas — o rótulo em cima, "data Até data" embaixo — com os cantos
   refeitos para o bloco continuar parecendo um grupo só. */
@media (max-width: 575.98px) {
    .filtros-barra__status,
    .filtros-barra__meia {
        flex: 1 1 100%;
        width: 100%;
    }

    .filtros-barra .input-group.filtros-barra__periodo {
        flex-wrap: wrap;
    }

    .filtros-barra__periodo > .input-group-text:first-child {
        flex: 0 0 100%;
        border-radius: var(--bs-border-radius) var(--bs-border-radius) 0 0 !important;
    }

    .filtros-barra__periodo > .filtros-barra__data:nth-child(2) {
        border-top-left-radius: 0;
        border-bottom-left-radius: var(--bs-border-radius) !important;
        margin-left: 0 !important;
        margin-top: -1px;
    }

    .filtros-barra__periodo > .input-group-text:nth-child(3),
    .filtros-barra__periodo > .filtros-barra__data:last-child {
        margin-top: -1px;
    }

    .filtros-barra__periodo > .filtros-barra__data:last-child {
        border-top-right-radius: 0 !important;
    }
}

/* Dedo: 44px de altura e texto de 16px (abaixo disso o iOS dá zoom ao focar o
   campo). */
@media (pointer: coarse) {
    .filtros-barra .form-control,
    .filtros-barra .form-select,
    .filtros-barra .input-group-text,
    .filtros-barra__checks {
        font-size: 1rem;
    }

    .filtros-barra .form-control,
    .filtros-barra .form-select,
    .filtros-barra .input-group-text {
        min-height: 44px;
    }

    .filtros-barra .select2-container .select2-selection--single {
        height: 44px !important;
    }

    .filtros-barra .select2-selection__rendered {
        line-height: 42px !important;
        font-size: 1rem;
    }

    .filtros-barra .select2-selection__arrow {
        height: 42px !important;
    }

    /* O "×" de limpar do select2 é um botão de 26px preso no topo: com os 44px
       ficava 8px acima do texto e da seta. Ocupa a altura toda e ganha largura,
       que é alvo de dedo. Uma classe a mais que a regra do select2
       (.select2-container--default .select2-selection--single
       .select2-selection__clear): o select2.min.css carrega DEPOIS deste
       arquivo e venceria o empate. */
    .filtros-barra .select2-container .select2-selection--single .select2-selection__clear {
        height: 42px;
        padding: 0 .75rem;
    }

    /* Chave e caixas: o alvo é o rótulo (o for= marca a caixa), esticado aos
       44px e encostado no quadradinho — o padding do rótulo faz o respiro que a
       margem fazia. */
    .filtros-titulo .form-switch,
    .filtros-barra__checks .form-check {
        display: flex;
        align-items: center;
        min-height: 44px;
    }

    .filtros-titulo .form-switch .form-check-input,
    .filtros-barra__checks .form-check-input {
        margin-top: 0;
    }

    .filtros-titulo .form-switch .form-check-label,
    .filtros-barra__checks .form-check-label {
        align-self: stretch;
        display: flex;
        align-items: center;
        padding-left: .5em;
    }
}

/* Toque, de 576px para cima: o status na largura de toque da página (com o
   texto de 16px a de mouse cortaria a opção mais comprida) e as datas com base
   própria. No telefone os dois já ocupam a largura que há (status na linha
   toda, datas dividindo a linha), e a base de 7.25rem empurrava a segunda data
   para uma terceira linha a 320px. */
@media (pointer: coarse) and (min-width: 576px) {
    .filtros-barra__status {
        flex-basis: var(--filtro-status-toque, var(--filtro-status, 14rem));
        width: var(--filtro-status-toque, var(--filtro-status, 14rem));
    }

    .filtros-barra__periodo > .filtros-barra__data {
        flex-basis: 7.25rem;
        width: 7.25rem;
    }
}

/* Com mouse, os botões de ícone ficam na altura dos campos (31px, a dos
   form-*-sm): com o padding do .btn-very-small tinham 36px e saíam
   desalinhados da busca. No toque valem os 44px do .btn-very-small, acima. */
@media (pointer: fine) {
    .filtros-barra__acoes .btn {
        display: inline-flex;
        align-items: center;
        height: 31px;
        padding-top: 0;
        padding-bottom: 0;
    }
}

/* ------------------------------------------------------------------------ *
 *  Fotos de inspeção: miniatura, barra de progresso e "remover"
 *  (public/js/photo-uploader.js, campo _fields.photo-uploader)
 *
 *  O visual é o dos anexos do RDO (rdos/_form.blade.php), copiado para cá e
 *  não compartilhado: o do RDO fica como está até ele passar a usar este
 *  componente. Os botões de remover/tentar de novo têm classe própria, e não
 *  .btn, de propósito: no toque a regra `.table .btn` (44x44) cobriria a
 *  miniatura inteira de 48px na linha da cautela em massa.
 *
 *  Modo compacto (dentro das linhas da cautela em massa): uma tira de
 *  miniaturas de 48px, a barra de 4px embaixo de cada uma e o "x" no canto.
 * ------------------------------------------------------------------------ */
.photo-upload {
    min-width: 0;
    padding: 12px;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    background: linear-gradient(135deg, rgba(250, 251, 255, 0.95), rgba(242, 246, 255, 0.9));
}

/* A largura que decide o layout da área de adicionar é a do campo (col-md-6 no iPad em pé, a
   caixa da inspeção no iPhone), e não a da tela: por isso consulta de contêiner. Só no modo
   completo — o compacto fica dentro de célula de tabela, que se mede pelo conteúdo. */
.photo-upload:not(.photo-upload--compact) {
    container: photo-upload / inline-size;
}

/* Quebra em vez de espremer: com o "Selecionar arquivos" sem encolher e o texto encolhendo
   abaixo da maior palavra, o texto ficava uma palavra por linha e passava por baixo do botão. */
.photo-upload__drop {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    min-width: 0;
    margin: 0;
    padding: 12px 14px;
    border: 2px dashed #cbd5f5;
    border-radius: 14px;
    background: #fff;
    cursor: pointer;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.photo-upload.is-dragging .photo-upload__drop {
    border-color: #6b7cff;
    box-shadow: 0 0 0 4px rgba(107, 124, 255, 0.15);
}

/* O campo de verdade fica dentro do rótulo, invisível mas focável: é o rótulo
   que abre o seletor de arquivos (no iPad, mais confiável que input.click()). */
.photo-upload__drop:focus-within {
    outline: 3px solid rgba(13, 110, 253, 0.45);
    outline-offset: 2px;
}

.photo-upload__input {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    margin: -1px !important;
    padding: 0 !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
    clip-path: inset(50%) !important;
    border: 0 !important;
    white-space: nowrap !important;
    opacity: 0;
}

.photo-upload__drop-icon {
    display: flex;
    flex: 0 0 44px;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #eef1ff;
    color: #4f5bd5;
}

.photo-upload__drop-text {
    display: flex;
    flex: 1 1 10rem;
    flex-direction: column;
    min-width: 0;
}

.photo-upload__drop-title {
    font-weight: 600;
}

.photo-upload__drop-hint {
    color: #6b7280;
    font-size: 0.8rem;
}

.photo-upload__pick {
    flex: 0 0 auto;
    padding: 0.25rem 0.6rem;
    border: 1px solid #0d6efd;
    border-radius: 0.25rem;
    color: #0d6efd;
    font-size: 0.875rem;
    white-space: nowrap;
}

/* Campo estreito: o "Selecionar arquivos" sai (o rótulo inteiro já abre o seletor) e o texto fica
   com a largura toda. Sem suporte a consulta de contêiner (iPadOS 15), o botão só quebra de linha. */
@container photo-upload (max-width: 26rem) {
    .photo-upload__pick {
        display: none;
    }
}

/* Mais estreito ainda (a caixa da inspeção da cautela no iPhone): o ícone também sai. Ao lado dele
   o texto não cabia e descia para baixo do ícone, e a área de adicionar ficava com 150px de altura. */
@container photo-upload (max-width: 20rem) {
    .photo-upload__drop-icon {
        display: none;
    }
}

/* Desligado (inspeção rápida desligada, linha sem ativo): não aceita foto. */
.photo-upload:has(.photo-upload__input:disabled) .photo-upload__drop {
    opacity: 0.55;
    cursor: not-allowed;
}

.photo-upload__list {
    display: grid;
    gap: 10px;
    margin: 10px 0 0;
    padding: 0;
    list-style: none;
}

.photo-upload__list:empty {
    display: none;
}

.photo-upload__item {
    display: grid;
    grid-template-columns: 56px minmax(0, 1fr) auto;
    gap: 12px;
    align-items: center;
    min-width: 0;
    padding: 10px;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    background: #fff;
}

.photo-upload__thumb {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    overflow: hidden;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    background: #f8fafc;
    color: #94a3b8;
}

.photo-upload__thumb img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.photo-upload__thumb [hidden] {
    display: none !important;
}

/* Nome longo corta com reticências: nunca empurra a página para o lado. */
.photo-upload__body {
    min-width: 0;
}

.photo-upload__name {
    overflow: hidden;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.photo-upload__size,
.photo-upload__status {
    color: #6b7280;
    font-size: 12px;
}

.photo-upload__status {
    margin-top: 4px;
}

.photo-upload__bar {
    height: 6px;
    margin-top: 6px;
    overflow: hidden;
    border-radius: 999px;
    background: #edf0ff;
}

.photo-upload__bar > span {
    display: block;
    width: 0;
    height: 100%;
    background: #5b6bff;
    transition: width 0.2s ease;
}

.photo-upload__item.is-done .photo-upload__bar > span {
    background: #16a34a;
}

.photo-upload__item.is-error {
    border-color: #fecaca;
    background: #fff5f5;
}

.photo-upload__item.is-error .photo-upload__bar > span {
    width: 100% !important;
    background: #ef4444;
}

.photo-upload__item.is-error .photo-upload__status {
    color: #b91c1c;
}

.photo-upload__actions {
    display: flex;
    gap: 6px;
    align-items: center;
}

.photo-upload__retry,
.photo-upload__remove {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    background: #fff;
    color: #334155;
    cursor: pointer;
}

.photo-upload__remove {
    border-color: #fca5a5;
    color: #dc2626;
}

.photo-upload__retry:hover,
.photo-upload__retry:focus-visible {
    background: #f1f5f9;
}

.photo-upload__remove:hover,
.photo-upload__remove:focus-visible {
    background: #fef2f2;
}

.photo-upload__retry:disabled,
.photo-upload__remove:disabled,
.photo-upload__remove[aria-disabled="true"] {
    opacity: 0.5;
    cursor: default;
}

.photo-upload__retry[hidden],
.photo-upload__remove[hidden] {
    display: none;
}

.photo-upload__retry .material-icons,
.photo-upload__remove .material-icons {
    font-size: 18px;
}

.photo-upload__error {
    margin-top: 8px;
    color: #b91c1c;
    font-size: 0.85rem;
    white-space: pre-line;
    overflow-wrap: anywhere;
}

.photo-upload__error[hidden] {
    display: none;
}

/* ---------------------------------------------- fotos pelo celular (QR)
   O botão "Enviar fotos pelo celular" e o painel do QR, no fluxo da página — nunca um modal: dentro
   da linha de tabela da cautela em massa (.table-responsive), o modal do Bootstrap fica atrás do
   fundo cinza no iPad/iPhone. */
.photo-upload__phone-btn {
    display: inline-flex;
    gap: 6px;
    align-items: center;
    margin-top: 10px;
    padding: 0.3rem 0.7rem;
    border: 1px solid #0d6efd;
    border-radius: 0.375rem;
    background: #fff;
    color: #0d6efd;
    font-size: 0.875rem;
    cursor: pointer;
}

.photo-upload__phone-btn .material-icons {
    font-size: 20px;
}

.photo-upload__phone-btn:hover,
.photo-upload__phone-btn:focus-visible,
.photo-upload__phone-btn.is-open {
    background: #eef4ff;
}

.photo-upload__phone-btn:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

/* QR aberto e recebendo: um ponto verde, para quem fechou o painel saber que ainda chega foto. */
.photo-upload__phone-btn.is-active {
    position: relative;
}

.photo-upload__phone-btn.is-active::after {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #16a34a;
    box-shadow: 0 0 0 2px #fff;
}

.photo-upload--compact .photo-upload__phone-btn.is-active::after {
    position: absolute;
    top: 4px;
    right: 4px;
}

.photo-upload__phone {
    margin-top: 10px;
    padding: 12px;
    border: 1px solid #c7d2fe;
    border-radius: 14px;
    background: #fff;
}

.photo-upload__phone[hidden] {
    display: none;
}

.photo-upload__phone-head {
    display: flex;
    gap: 8px;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 8px;
}

.photo-upload__phone-title {
    min-width: 0;
}

.photo-upload__phone-target {
    color: #4b5563;
    font-size: 0.85rem;
    overflow-wrap: anywhere;
}

.photo-upload__phone-close {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    background: #fff;
    color: #334155;
    cursor: pointer;
}

.photo-upload__phone-close .material-icons {
    font-size: 18px;
}

.photo-upload__phone-body {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    align-items: flex-start;
}

.photo-upload__qr {
    flex: 0 0 auto;
    width: 172px;
    min-height: 172px;
    padding: 2px;
    border-radius: 10px;
    background: #fff;
    line-height: 0;
}

.photo-upload__qr svg {
    display: block;
    width: 168px;
    height: 168px;
}

.photo-upload__qr:empty {
    background: #f1f5f9;
}

.photo-upload__phone.is-expired .photo-upload__qr {
    opacity: 0.15;
}

.photo-upload__phone-text {
    flex: 1 1 14rem;
    min-width: 0;
    font-size: 0.875rem;
}

.photo-upload__phone-steps {
    margin: 0 0 8px;
    padding-left: 1.2rem;
}

.photo-upload__phone-link {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 8px;
    align-items: center;
    margin-bottom: 8px;
    color: #4b5563;
    font-size: 0.8rem;
}

.photo-upload__phone-or {
    flex: 1 0 100%;
}

.photo-upload__phone-url {
    min-width: 0;
    overflow-wrap: anywhere;
    font-family: SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.78rem;
}

.photo-upload__phone-copy,
.photo-upload__phone-new {
    padding: 0.15rem 0.5rem;
    border: 1px solid #94a3b8;
    border-radius: 0.25rem;
    background: #fff;
    color: #334155;
    font-size: 0.8rem;
    cursor: pointer;
}

.photo-upload__phone-new {
    margin-top: 6px;
    border-color: #0d6efd;
    color: #0d6efd;
}

.photo-upload__phone-new[hidden] {
    display: none;
}

.photo-upload__phone-status {
    color: #1d4ed8;
    font-weight: 600;
}

.photo-upload__phone-status:empty {
    display: none;
}

.photo-upload__phone-status.is-ok {
    color: #15803d;
}

.photo-upload__phone-status.is-error {
    color: #b91c1c;
}

/* A foto que veio do celular: um selo no canto da miniatura. */
.photo-upload__thumb {
    position: relative;
}

.photo-upload__from-phone {
    position: absolute;
    bottom: 2px;
    left: 2px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: rgba(29, 78, 216, 0.9);
    color: #fff;
}

.photo-upload__from-phone .material-icons {
    font-size: 12px;
}

/* Perto do botão de salvar: "esperando as fotos" e "há envios com falha". */
.photo-upload-wait,
.photo-upload-formmsg {
    display: flex;
    gap: 8px;
    align-items: center;
    margin: 0 0 8px;
    font-size: 0.9rem;
}

.photo-upload-wait {
    color: #1d4ed8;
}

.photo-upload-formmsg {
    color: #b91c1c;
    font-weight: 600;
}

/* ------------------------------------------------------------ compacto */
.photo-upload--compact {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: flex-start;
    padding: 0;
    border: 0;
    background: none;
}

.photo-upload--compact .photo-upload__list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
}

.photo-upload--compact .photo-upload__list:empty {
    display: none;
}

.photo-upload--compact .photo-upload__drop {
    flex: 0 0 48px;
    justify-content: center;
    width: 48px;
    height: 48px;
    padding: 0;
    border-radius: 10px;
    color: #4f5bd5;
}

.photo-upload--compact .photo-upload__error {
    flex: 1 0 100%;
    margin-top: 0;
}

/* Na tira: o QR é mais um quadrado de 48px, ao lado do "adicionar"; o painel ocupa a linha toda. */
.photo-upload--compact .photo-upload__phone-btn {
    flex: 0 0 48px;
    justify-content: center;
    width: 48px;
    height: 48px;
    margin: 0;
    padding: 0;
    border: 2px dashed #cbd5f5;
    border-radius: 10px;
    color: #4f5bd5;
}

.photo-upload--compact .photo-upload__phone-btn .material-icons {
    font-size: 24px;
}

.photo-upload--compact .photo-upload__phone {
    flex: 1 0 100%;
    margin-top: 0;
}

.photo-upload--compact .photo-upload__item {
    position: relative;
    display: block;
    width: 48px;
    padding: 0;
    border: 0;
    background: none;
}

.photo-upload--compact .photo-upload__thumb {
    width: 48px;
    height: 48px;
}

.photo-upload--compact .photo-upload__item.is-error .photo-upload__thumb {
    border: 2px solid #ef4444;
}

.photo-upload--compact .photo-upload__bar {
    height: 4px;
    margin-top: 3px;
}

/* Nome, tamanho e situação continuam lá para o leitor de tela e o title. */
.photo-upload--compact .photo-upload__name,
.photo-upload--compact .photo-upload__size,
.photo-upload--compact .photo-upload__status {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
}

.photo-upload--compact .photo-upload__remove {
    position: absolute;
    top: -7px;
    right: -7px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.photo-upload--compact .photo-upload__remove .material-icons {
    font-size: 14px;
}

/* "Tentar de novo" é a própria miniatura da foto que falhou: alvo de 48px sem
   disputar espaço com o "x" do canto (que fica por cima dele). */
.photo-upload--compact .photo-upload__retry {
    position: absolute;
    top: 0;
    left: 0;
    width: 48px;
    height: 48px;
    border: 0;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.65);
    color: #b91c1c;
}

.photo-upload--compact .photo-upload__retry .material-icons {
    font-size: 24px;
}

/* ------------------------------------------------------------ toque (iPad) */
@media (pointer: coarse) {
    .photo-upload__drop {
        min-height: 44px;
    }

    .photo-upload:not(.photo-upload--compact) .photo-upload__phone-btn {
        min-height: 44px;
    }

    .photo-upload__phone-close {
        width: 44px;
        height: 44px;
    }

    .photo-upload__retry,
    .photo-upload__remove {
        width: 44px;
        height: 44px;
    }

    .photo-upload--compact .photo-upload__retry {
        width: 48px;
        height: 48px;
    }

    .photo-upload--compact .photo-upload__remove {
        width: 24px;
        height: 24px;
    }

    /* A miniatura continua de 48px; o alvo do dedo é que cresce, POR FORA: a área
       de 44px parte do canto de baixo à esquerda do "x" e sobe para a direita. Centrada
       no "x", ela cobria o meio da miniatura — e o toque no "tentar de novo" (desenhado
       ali) apagava a foto. Assim, da miniatura ela só pega o canto de 17px. */
    .photo-upload--compact .photo-upload__remove::before {
        content: "";
        position: absolute;
        bottom: -1px;
        left: -1px;
        width: 44px;
        height: 44px;
    }

    /* A área passa 27px da miniatura para a direita e para cima: o espaço entre as
       miniaturas (e entre as linhas da tira) é maior que isso, para o dedo que mira o
       "x" de uma foto não acertar a foto do lado nem o "adicionar"; e o recuo no topo
       tira a área de cima da observação logo acima da tira. */
    .photo-upload--compact,
    .photo-upload--compact .photo-upload__list {
        gap: 28px;
    }

    .photo-upload--compact {
        padding-top: 24px;
    }
}

/* Contraste (10/10/2026): no tema (Flatly), `text-dark` é CINZA (#7b8a8b), e não preto — sobre fundo
   colorido (badge azul, laranja...) o texto ficava apagado. Em qualquer tela, inclusive nas cores
   montadas nos models (status de compra, chamado, hora extra, RDO...): sobre fundo colorido o texto
   vira branco; sobre o cinza-claro (bg-light), o escuro de verdade. */
.bg-info.text-dark,
.bg-warning.text-dark,
.bg-primary.text-dark,
.bg-success.text-dark,
.bg-danger.text-dark,
.bg-secondary.text-dark {
    color: #fff !important;
}

.bg-light.text-dark {
    color: var(--bs-gray-900, #212529) !important;
}