/* ============================================================
   Wizard steps — desktop: center chevrons vertically
   Steps are at odd positions (1,3,5,7,9),
   chevrons at even positions (2,4,6,8).
   ============================================================ */
.wizard-steps > *:nth-child(even) {
    padding-top: 13px; /* center chevron at midpoint of 50px circle */
}

/* Botões de visualização lista/cards exibidos só no mobile (regra ativada
   no media query abaixo). Em desktop a visão é sempre tabela. */
.filtro-mobile {
    display: none;
}

/* ============================================================
   Wizard steps — responsive sizing for mobile
   ============================================================ */
@media (max-width: 767.98px) {
    .wizard-steps {
        padding-left: 0 !important;
        padding-right: 0 !important;
        overflow: hidden;
    }
    .wizard-steps > *:nth-child(odd) {
        flex: 1 1 0% !important;
        min-width: 0 !important;
        max-width: none !important;
    }
    .wizard-steps > *:nth-child(odd) > .d-inline-flex {
        width: 30px !important;
        height: 30px !important;
        font-size: 0.85rem !important;
    }
    .wizard-steps > *:nth-child(odd) > .mt-1 {
        display: none !important;
    }
    .wizard-steps > *:nth-child(even) {
        flex: 0 0 10px !important;
        width: 10px !important;
        max-width: 10px !important;
        min-width: 0 !important;
        font-size: 0.65rem !important;
        padding-top: 4px !important;
    }
}

/* ============================================================
   passo2 — label alignment
   ============================================================ */
.item-declaracao label {
    min-height: 2.4rem;
    display: flex;
    align-items: flex-end;
    margin-bottom: 4px;
}

/* ============================================================
   Legacy Wizard-JS (.wizard-nav.dots) — kept for safety
   ============================================================ */
.wizard-nav.dots { align-items: flex-start !important; }
.wizard-nav.dots .wizard-step {
    display: inline-flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    vertical-align: top !important;
}

/* Image upload preview — constrain inside modals */
.image-upload-placeholder { min-height: 40px; }
.image-upload-placeholder .image-upload {
    max-width: 100%;
    max-height: 150px;
    width: auto;
    height: auto;
    object-fit: contain;
    border-radius: 4px;
    display: block;
}

/* ============================================================
   Responsive listing tables — mobile card layout
   When .tabela-mobile loses the #tabela-freedo id (via JS on
   mobile or by clicking the "list" button), each row becomes
   a stacked card and each cell shows its column label
   (populated by ensureTabelaMobileLabels in custom.js).
   When the id is present (grid button), the regular table
   layout is preserved.
   ============================================================ */
@media (max-width: 767.98px) {
    table.tabela-mobile:not(#tabela-freedo),
    table.tabela-mobile:not(#tabela-freedo) tbody,
    table.tabela-mobile:not(#tabela-freedo) tr,
    table.tabela-mobile:not(#tabela-freedo) td {
        display: block;
        width: 100%;
        /* neutralize Bootstrap's .table-striped/.table row colors so the
           stacked cards always show the white background of .tr below */
        --bs-table-bg: transparent;
        --bs-table-striped-bg: transparent;
        --bs-table-accent-bg: transparent;
        --bs-table-hover-bg: transparent;
        background-color: transparent !important;
    }
    table.tabela-mobile:not(#tabela-freedo) thead {
        display: none;
    }
    table.tabela-mobile:not(#tabela-freedo) tr {
        margin-bottom: 0.75rem;
        border: 1px solid #d9dee3;
        border-radius: 0.5rem;
        padding: 0.5rem 0.75rem;
        background-color: #fff !important;
        box-shadow: 0 1px 2px rgba(67, 89, 113, 0.06);
    }
    table.tabela-mobile:not(#tabela-freedo) td {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 0.25rem;
        text-align: center;
        border: 0;
        border-bottom: 1px solid #f1f3f5;
        padding: 0.5rem 0;
        white-space: normal;
        word-break: break-word;
    }
    table.tabela-mobile:not(#tabela-freedo) td:last-child {
        border-bottom: 0;
    }
    table.tabela-mobile:not(#tabela-freedo) td::before {
        content: attr(data-title);
        font-weight: 600;
        color: #566a7f;
        text-align: center;
        display: block;
        font-size: 0.8rem;
        text-transform: uppercase;
        letter-spacing: 0.02em;
    }
    table.tabela-mobile:not(#tabela-freedo) td:empty,
    table.tabela-mobile:not(#tabela-freedo) td:not([data-title])::before,
    table.tabela-mobile:not(#tabela-freedo) td[data-title=""]::before {
        display: none;
    }
    .filtro-mobile {
        display: flex;
        gap: 0.25rem;
        margin-bottom: 0.5rem;
    }
}

/* ============================================================
   Legacy .icon-muted action links
   Used in personal/vendidos, personal/personalshopper,
   personal/moedaCotacoes and personal/tipofrete on row-level
   action icons (edit/delete/etc). The class came from the old
   theme and was never ported to Sneat, so without this rule
   the <a> falls back to Bootstrap's default link color, which
   is the primary color. Force the icons to match body text
   color and give a subtle hover state so users still get
   feedback when hovering.
   ============================================================ */
a.icon-muted,
a.icon-muted:link,
a.icon-muted:visited {
    color: var(--bs-body-color);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.25rem 0.35rem;
    border-radius: 50rem;
    line-height: 1;
}
a.icon-muted:hover,
a.icon-muted:focus {
    color: var(--bs-body-color);
    text-decoration: none;
    background-color: rgba(67, 89, 113, 0.08);
}
a.icon-muted + a.icon-muted {
    margin-left: 0.3rem;
}
/* Padroniza o tamanho dos ícones de ação legados (.icon-muted) com o das
   demais telas (que usam .btn-icon). Sem isto, esses ícones ficavam bem
   menores que os das listagens já migradas. */
a.icon-muted i {
    font-size: 1.2rem;
    line-height: 1;
}

/* ============================================================
   Template Customizer — 6º chip de Primary Color com ícone
   de balde de tinta em vez de mostrar a cor atual selecionada.
   O Pickr por default renderiza o .pcr-button com
   `background: var(--pcr-color)`, mostrando a cor atual como um
   swatch sólido. Aqui sobrescrevemos isso pra exibir um SVG
   inline de balde de tinta, deixando explícito que é o botão
   pra abrir o color picker livre.
   ============================================================ */
#template-customizer .template-customizer-colors-options .custom-option:last-child .pcr-button,
#template-customizer .template-customizer-colors-options .custom-option:last-child .custom-option-content .pcr-button {
    background-color: #fff !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M16.56 8.94L7.62 0 6.21 1.41l2.38 2.38-5.15 5.15c-.59.59-.59 1.54 0 2.12l5.5 5.5c.29.29.68.44 1.06.44s.77-.15 1.06-.44l5.5-5.5c.59-.58.59-1.53 0-2.12zM5.21 10L10 5.21 14.79 10H5.21zM19 11.5s-2 2.17-2 3.5c0 1.1.9 2 2 2s2-.9 2-2c0-1.33-2-3.5-2-3.5z' fill='%23697a8d'/%3E%3C/svg%3E") !important;
    background-size: 90% 90% !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
}
#template-customizer .template-customizer-colors-options .custom-option:last-child .pcr-button::before,
#template-customizer .template-customizer-colors-options .custom-option:last-child .pcr-button::after {
    background: transparent !important;
}

/* ============================================================
   Ícones de ação nas listagens — mais escuros
   O btn-text-secondary do Sneat usa uma cor cinza clara que
   fica quase invisível. Forçamos a cor do corpo (escura) nos
   botões de ação dentro de tabelas, cards e list-groups.
   ============================================================ */
.table .btn-text-secondary,
.list-group .btn-text-secondary,
.card-body .btn-text-secondary,
[id^="view-grid-"] .btn-text-secondary {
    color: var(--bs-body-color) !important;
}
.table .btn-text-secondary:hover,
.list-group .btn-text-secondary:hover,
.card-body .btn-text-secondary:hover,
[id^="view-grid-"] .btn-text-secondary:hover {
    color: var(--bs-body-color) !important;
    background-color: rgba(67, 89, 113, 0.08);
}

/* ============================================================
   Sombreado nos cards individuais das grid views (mobile)
   Os cards de item dentro de #view-grid-* não tinham shadow
   visível porque estavam nested dentro de outro .card que
   resetava box-shadow. Forçamos um shadow discreto.
   ============================================================ */
[id^="view-grid-"] > .card,
[id^="view-grid-"] > .row > .col-12 > .card {
    box-shadow: 0 2px 6px rgba(67, 89, 113, 0.1) !important;
}

/* ============================================================
   Zebra striping nos cards das visões grid (mobile)
   Alterna branco/cinza nos cards de item, imitando o
   table-striped do desktop. Sem !important para que cards com
   status próprio (ex: checklist .row-completa/.row-parcial/
   .row-pendente) continuem vencendo pelo !important deles.
   ============================================================ */
[id^="view-grid-"] > .card:nth-of-type(even),
[id^="view-grid-"] > .row > .col-12:nth-of-type(even) > .card {
    background-color: rgba(67, 89, 113, 0.04);
}

/* ============================================================
   Mobile: alinha a largura do navbar com os cards do conteúdo
   (o .container-xxl interno usa padding-inline 1rem abaixo de
   992px, enquanto o navbar-detached usa 1.625rem). Igualamos.
   ============================================================ */
@media (max-width: 991.98px) {
    .layout-navbar.navbar-detached {
        inline-size: calc(100% - 1rem * 2) !important;
        padding-inline: 1rem !important;
    }
}

/* ============================================================
   Listagens (todas as views com id="view-lista-*"): compacta a
   tabela para evitar barra de rolagem horizontal e aproxima os
   ícones da coluna de ações.
   ============================================================ */
[id^="view-lista-"] {
    font-size: 0.85rem;
}

[id^="view-lista-"] table.table-sm > :not(caption) > * > * {
    padding: 0.35rem 0.25rem !important;
}

[id^="view-lista-"] #tabela-freedo,
[id^="view-lista-"] #tabela-freedo table {
    min-width: 0 !important;
    table-layout: auto !important;
}

[id^="view-lista-"] #tabela-freedo td.align-middle:last-child {
    min-width: 0 !important;
}

[id^="view-lista-"] .badge {
    font-size: 0.75rem;
    padding: 0.25em 0.5em;
}

/* Espaçamento uniforme entre os ícones de ação em TODAS as views em lista,
   mantendo tudo em uma única linha. Antes o gap era zerado e os botões ficavam
   colados; agora damos um respiro consistente. Ajuste o valor do gap abaixo
   para mais/menos espaço horizontal entre os ícones. */
[id^="view-lista-"] td.align-middle:last-child .d-flex,
[id^="view-lista-"] td.align-middle:last-child .d-inline-flex {
    gap: 0.4rem !important;
    column-gap: 0.4rem !important;
    flex-wrap: nowrap !important;
}

/* Ícones de ação no tamanho natural do tema (maior). Antes eram reduzidos
   para 0.9rem a fim de caber muitos ícones na coluna; como agora as ações
   extras vão para o menu de 3 pontinhos, os ícones voltam ao tamanho padrão.
   Zera apenas a margem (o espaçamento vem do gap acima). */
[id^="view-lista-"] td.align-middle:last-child .btn.btn-icon {
    margin: 0 !important;
}

/* Os ícones Boxicons (contorno fino, classe .bx) aparentam menor tamanho que
   os Font Awesome sólidos (.fas) no mesmo font-size. Aumenta os Boxicons das
   colunas de ação para ficarem com a mesma presença visual dos demais ícones
   (ex.: a tela de Fretes, que usa Font Awesome). Vale para todas as views. */
[id^="view-lista-"] td.align-middle:last-child .btn.btn-icon i.bx {
    font-size: 1.25rem !important;
    line-height: 1 !important;
}

/* Coluna de ações com largura fixa (ajustada ao conteúdo): reserva sempre o
   mesmo espaço e evita que os ícones sejam espremidos/quebrados no celular
   (a tabela rola na horizontal quando falta largura). */
[id^="view-lista-"] table th:last-child,
[id^="view-lista-"] td.align-middle:last-child {
    width: 1%;
    white-space: nowrap;
}

/* O menu de ações (3 pontinhos) é uma <div class="dropdown"> dentro do flex:
   garante o mesmo tamanho/alinhamento do botão de ícone que ele contém. */
[id^="view-lista-"] td.align-middle:last-child .dropdown {
    display: inline-flex;
    align-items: center;
}

/* Garante um espaçamento consistente entre o ícone e o texto dos botões,
   evitando que o ícone fique encostado no texto em todas as views.
   Usa flex + gap: em botões somente com ícone (um único filho) o gap não
   tem efeito, então o ícone permanece centralizado. Não depende de :has()
   para funcionar em qualquer navegador. */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5em;
}


/* Indicadores de ordenação nas tabelas .sortable-table (cabeçalhos gerados
   por sortColumn()). A setinha aparece à direita do título: uma dupla seta
   esmaecida quando a coluna é ordenável mas não é a ativa, e uma seta sólida
   para cima (do menor para o maior) ou para baixo (do maior para o menor) na
   coluna atualmente ordenada. */
.sortable-table thead th.sorting {
    white-space: nowrap;
}
.sortable-table thead th.sorting > a {
    position: relative;
    padding-right: 1.2em;
}
.sortable-table thead th.sorting > a::after {
    content: "\21F5"; /* ⇅ ordenável, ainda sem direção */
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.85em;
    line-height: 1;
    opacity: 0.35;
}
.sortable-table thead th.sorting_asc > a::after {
    content: "\2191"; /* ↑ crescente: do menor para o maior */
    opacity: 1;
    color: var(--bs-primary, #696cff);
}
.sortable-table thead th.sorting_desc > a::after {
    content: "\2193"; /* ↓ decrescente: do maior para o menor */
    opacity: 1;
    color: var(--bs-primary, #696cff);
}

/* ============================================================
   Menu de ações (3 pontinhos) das listagens movido para o <body>.
   Enquanto aberto, o .dropdown-menu é reparentado no <body> (ver
   custom.js) para escapar do overflow do .table-responsive. Garantimos
   aqui um z-index acima da tabela/paginação para que o menu apareça
   inteiro por cima do conteúdo.
   ============================================================ */
.dropdown-menu.acoes-dropdown-portaled {
    z-index: 1055;
}

/* ============================================================
   Grids/listagens — compactação do espaçamento interno
   ------------------------------------------------------------
   O tema Sneat aplica em .table > * > * um padding de
   0.782rem 1.25rem, ou seja ~20px de padding HORIZONTAL por
   célula. Em telas com muitas colunas (produtos, pedidos,
   envios, wallet, etc.) isso força barra de rolagem horizontal
   e desperdiça largura em colunas curtas (ID, quantidade,
   valor, status, datas).

   Esta regra reduz o padding horizontal para 0.5rem (~8px) em
   TODAS as tabelas de grid do sistema, identificadas pelos
   marcadores usados no projeto — independente de estarem ou não
   dentro de um wrapper view-lista-*:
     .sortable-table   (cabeçalhos ordenáveis)
     .tabela-mobile    (listagens responsivas)
     #tabela-freedo    (grid padrão das listagens)
     #ajaxTable        (listagens carregadas via AJAX)

   Grids em [id^="view-lista-"] que casam apenas por classe
   (.sortable-table / .tabela-mobile) mantêm o padding ainda
   menor definido acima (0.25rem), por terem maior
   especificidade. Já os #tabela-freedo / #ajaxTable convergem
   para estes 8px (o seletor de id vence), ficando uniformes com
   os demais grids. Em ambos os casos o resultado permanece bem
   abaixo dos ~20px originais do tema.
   ============================================================ */
.sortable-table > :not(caption) > * > *,
.tabela-mobile > :not(caption) > * > *,
#tabela-freedo > :not(caption) > * > *,
#ajaxTable > :not(caption) > * > * {
    padding-inline: 0.5rem !important; /* ~8px, antes ~20px */
}

/* ============================================================
   Miniaturas de produto — placeholder padrão "sem imagem"
   ------------------------------------------------------------
   Quando a foto do produto não existe (URL vazia ou 404), o
   navegador mostra o ícone de imagem quebrada + o texto do alt
   (a descrição longa do produto), poluindo a coluna/card. O
   custom.js troca essas <img class="freedo-thumb"> por este
   placeholder padronizado: uma caixa do mesmo tamanho da
   miniatura, com um ícone neutro. Assim todas as listagens
   ficam uniformes, com ou sem foto.
   ============================================================ */
.freedo-thumb {
    border-radius: 5px;
    width: 60px;
    height: 60px;
    object-fit: cover;
}
.freedo-thumb-fallback {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    border-radius: 5px;
    background-color: rgba(67, 89, 113, 0.06);
    border: 1px solid rgba(67, 89, 113, 0.12);
    color: #a7acb2;
    vertical-align: middle;
}
.freedo-thumb-fallback i {
    font-size: 1.6rem;
    line-height: 1;
}

/* Colunas numéricas / curtas (ID, quantidade, valor, status,
   datas) normalmente recebem .text-center ou .text-end nestas
   grids. Deixa que encolham até o conteúdo, sem quebrar linha,
   em vez de reservar uma largura mínima grande. */
.sortable-table th.text-center,
.sortable-table th.text-end,
.sortable-table td.text-center,
.sortable-table td.text-end,
.tabela-mobile th.text-center,
.tabela-mobile th.text-end,
.tabela-mobile td.text-center,
.tabela-mobile td.text-end,
#tabela-freedo th.text-center,
#tabela-freedo th.text-end,
#tabela-freedo td.text-center,
#tabela-freedo td.text-end,
#ajaxTable th.text-center,
#ajaxTable th.text-end,
#ajaxTable td.text-center,
#ajaxTable td.text-end {
    min-width: 0 !important;
    width: 1%;
    white-space: nowrap;
}