/* ============================================================
   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.15rem;
}

/* ============================================================
   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;
}

[id^="view-lista-"] td.align-middle:last-child .d-flex {
    gap: 0 !important;
    column-gap: 0 !important;
}

[id^="view-lista-"] td.align-middle:last-child .btn.btn-icon {
    width: 0.9rem !important;
    height: 0.9rem !important;
    inline-size: 0.9rem !important;
    block-size: 0.9rem !important;
    padding: 0 !important;
    margin: 0 !important;
    line-height: 1 !important;
    border: 0 !important;
    font-size: 0.8rem !important;
}

[id^="view-lista-"] td.align-middle:last-child .btn.btn-icon i {
    font-size: 0.8rem !important;
    line-height: 1 !important;
    margin: 0 !important;
}

[id^="view-lista-"] td.align-middle:last-child .btn.btn-icon + .btn.btn-icon {
    margin-left: 0.15rem !important;
}