/* Componentes compartilhados do painel. */

/* Identidade do tenant no cabeçalho lateral. */
.navbar-brand-box .logo .tenant-brand-logo {
    width: auto;
    max-width: 185px;
    height: auto;
    max-height: 42px;
    object-fit: contain;
    vertical-align: middle;
}

.navbar-brand-box .logo .logo-sm .tenant-brand-logo {
    max-width: 42px;
    max-height: 34px;
}

.navbar-brand-box .logo .tenant-brand-fallback-icon {
    width: auto;
    max-width: 28px;
    object-fit: contain;
    vertical-align: middle;
}

/*
 * Choices.js de selecao unica.
 *
 * O valor fechado permanece em uma linha e recebe reticencias conforme o
 * espaco real do controle. As opcoes abertas preservam o texto completo e
 * podem quebrar linha. Selecoes multiplas continuam usando seus chips.
 */
.choices[data-type*=select-one] {
    --dashboard-choice-single-height: 38px;
    width: 100%;
    min-width: 0;
}

/*
 * Altura global dos selects simples do Choices.js.
 *
 * O prefixo `body` garante precedencia mesmo quando o CSS original da
 * biblioteca for carregado depois deste arquivo. Selecoes multiplas ficam
 * fora da regra para continuarem crescendo conforme seus chips.
 */
body .choices[data-type*=select-one] .choices__inner {
    box-sizing: border-box;
    min-height: var(--dashboard-choice-single-height);
    height: var(--dashboard-choice-single-height);
    padding: .47rem 2.5rem .47rem .75rem;
}

body .choices[data-type*=select-one] .choices__list--single {
    padding: 0;
    line-height: 1.5;
}

body .choices[data-type*=select-one] .choices__inner,
.choices[data-type*=select-one] .choices__list--single {
    min-width: 0;
}

.choices[data-type*=select-one] .choices__list--single {
    display: block;
    overflow: hidden;
}

.choices[data-type*=select-one] .choices__list--single .choices__item {
    display: block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.choices[data-type*=select-one] .choices__list--dropdown .choices__item,
.choices[data-type*=select-one] .choices__list[aria-expanded] .choices__item {
    overflow: visible;
    text-overflow: clip;
    white-space: normal;
    word-break: normal;
    overflow-wrap: anywhere;
}

/* Quantidade de registros: dimensões do form-control-sm da referência Fiscal.
 * Variante global opt-in; os demais selects conservam a altura padrão. */
.dataTables_length .choices.choices-table-length[data-type*=select-one] {
    --dashboard-choice-single-height: calc(1.5em + .5rem + calc(var(--bs-border-width) * 2));
    width: calc(3ch + 1rem + calc(var(--bs-border-width) * 2));
    margin: 0;
    font-size: .765625rem;
}

body .dataTables_length .choices-table-length[data-type*=select-one] .choices__inner {
    padding: .25rem .5rem;
    line-height: 1.5;
    font-size: inherit;
    background-color: var(--bs-tertiary-bg) !important;
    border-color: var(--bs-border-color);
    border-radius: var(--bs-border-radius-sm);
}

body .dataTables_length .choices-table-length[data-type*=select-one]:is(.is-focused, .is-open) .choices__inner {
    border-color: var(--bs-primary);
}

.dataTables_length .choices-table-length[data-type*=select-one]::after {
    display: none;
}

.dataTables_length .choices-table-length .choices__list--dropdown .choices__item--selectable {
    padding: .25rem .5rem;
    font-size: inherit;
}

/*
 * Modais Bootstrap curtos que contêm Choices.js.
 *
 * A classe é intencionalmente opt-in: use `modal-choices-overflow` no elemento
 * `.modal` quando a lista precisar avançar sobre o rodapé. Não aplique em
 * modais extensos que dependem da rolagem interna de `.modal-body`.
 */
.modal-choices-overflow .modal-content,
.modal-choices-overflow form {
    overflow: visible;
}

.modal-choices-overflow .modal-body {
    position: relative;
    z-index: 3;
    overflow: visible;
}

.modal-choices-overflow .modal-footer {
    position: relative;
    z-index: 1;
}

.modal-choices-overflow .choices {
    position: relative;
    z-index: 4;
    margin-bottom: 0;
}

.modal-choices-overflow .choices.is-open {
    z-index: 10;
}

.modal-choices-overflow .choices__list--dropdown,
.modal-choices-overflow .choices__list[aria-expanded] {
    z-index: 11;
}

.modal-choices-overflow .choices__list--dropdown .choices__list,
.modal-choices-overflow .choices__list[aria-expanded] .choices__list {
    max-height: 240px;
    overflow-y: auto;
    overscroll-behavior: contain;
}

/* Utilitário para listas compactas: mantém cerca de quatro opções visíveis. */
.modal-choices-overflow .choices.choices-visible-options-4 .choices__list--dropdown .choices__list,
.modal-choices-overflow .choices.choices-visible-options-4 .choices__list[aria-expanded] .choices__list {
    max-height: 192px;
}

/* Choices aberto deve permanecer acima de editores e toolbars dentro de modais. */
.modal .choices.is-open {
    position: relative;
    z-index: 1100;
}

.modal .choices.is-open .choices__list--dropdown,
.modal .choices.is-open .choices__list[aria-expanded] {
    z-index: 1101;
}

/*
 * Modais extensos com Choices.js e rolagem interna preservada.
 *
 * A classe trabalha com `response-choices-modal-overlay.js`, que posiciona o
 * dropdown no viewport. Assim, a lista pode sobrepor cabeçalho e rodapé sem
 * trocar o `overflow` da `.modal-body` usado por `modal-dialog-scrollable`.
 */
.modal-choices-overlay .choices.is-open {
    position: relative;
    z-index: 1100;
}

.modal-choices-overlay .choices.is-open .choices__list--dropdown,
.modal-choices-overlay .choices.is-open .choices__list[aria-expanded] {
    z-index: 1101;
}

/*
 * Alinha selects Choices.js à altura dos controles Bootstrap vizinhos.
 * Use no contêiner do formulário quando a composição alternar Choices e
 * `.form-control` na mesma grade.
 */
.choices-bootstrap-height .choices {
    width: 100%;
    margin-bottom: 0;
}

.choices-bootstrap-height .choices__inner,
.choices-bootstrap-height .choices[data-type*=select-one] .choices__inner {
    box-sizing: border-box;
    min-height: var(--dashboard-choice-single-height, 38px);
    height: var(--dashboard-choice-single-height, 38px);
    padding: .47rem 2.5rem .47rem .75rem;
}

.choices-bootstrap-height .choices__list--single {
    padding: 0;
    line-height: 1.5;
}

.choices-bootstrap-height .choices__list--single .choices__item {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Novo preço: formulário extenso contido no viewport e seleção múltipla rolável. */
#price-create-modal .modal-content {
    max-height: calc(100vh - 2rem);
    max-height: calc(100dvh - 2rem);
    overflow: hidden;
}

#price-create-modal form {
    display: flex;
    flex-direction: column;
    min-height: 0;
    max-height: inherit;
}

#price-create-modal .modal-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
}

#price-create-modal .modal-header,
#price-create-modal .modal-footer {
    flex: 0 0 auto;
}

#price-create-modal.price-create-choices-open .modal-body {
    position: relative;
    z-index: 3;
    overflow: visible;
}

#price-create-modal.price-create-choices-open .modal-footer {
    position: relative;
    z-index: 1;
}

#price-create-modal .price-create-variations-panel .choices {
    position: relative;
    z-index: 4;
    margin-bottom: 0;
}

#price-create-modal .price-create-variations-panel .choices.is-open {
    z-index: 10;
}

#price-create-modal .price-create-variations-panel .choices__inner {
    max-height: 200px;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
}

#price-create-modal .price-create-variations-panel .choices__list--dropdown,
#price-create-modal .price-create-variations-panel .choices__list[aria-expanded] {
    z-index: 11;
}

#price-create-modal .price-create-variations-panel .choices__list--dropdown .choices__list,
#price-create-modal .price-create-variations-panel .choices__list[aria-expanded] .choices__list {
    max-height: 200px;
    overflow-y: auto;
    overscroll-behavior: contain;
}

/* Documento de estoque: cabeçalho e ações fixos, com os itens rolando no corpo. */
#stock-document-modal .modal-content {
    max-height: calc(100vh - 2rem);
    overflow: hidden;
}

#stock-document-modal form {
    display: flex;
    flex-direction: column;
    min-height: 0;
    max-height: inherit;
}

#stock-document-modal .modal-body {
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
}

#stock-document-modal .modal-header,
#stock-document-modal .modal-footer {
    flex: 0 0 auto;
}

/* Envio avulso dos Correios: mantém as ações visíveis e rola somente o formulário. */
#correios-shipment-modal .modal-dialog {
    height: calc(100vh - 2rem);
    height: calc(100dvh - 2rem);
    margin-top: 1rem;
    margin-bottom: 1rem;
}

#correios-shipment-modal .modal-content {
    height: 100%;
    max-height: 100%;
    overflow: hidden;
}

#correios-shipment-modal .modal-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
}

#correios-shipment-modal .modal-header,
#correios-shipment-modal .modal-footer {
    flex: 0 0 auto;
}

@media (min-width: 576px) {
    #correios-shipment-modal .modal-dialog {
        height: calc(100vh - 3.5rem);
        height: calc(100dvh - 3.5rem);
        margin-top: 1.75rem;
        margin-bottom: 1.75rem;
    }
}

/* Organização de categorias e coleções do catálogo. */
#product-organize-modal .modal-dialog {
    max-width: 1040px;
}

#product-organize-modal .modal-body {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.25rem;
    padding: 1.5rem;
}

#product-organize-modal .modal-body > .alert {
    grid-column: 1 / -1;
    margin-bottom: 0;
}

#product-organize-modal .modal-body > div:not(.alert),
#variation-form-modal .variation-color-panel {
    min-width: 0;
    margin-bottom: 0 !important;
    padding: 1.25rem;
    border: 1px solid #e9e9ef;
    border-radius: .5rem;
    background: #fff;
}

#product-organize-modal .form-label,
#variation-form-modal .variation-color-panel .form-label {
    margin-bottom: .75rem;
    font-weight: 500;
}

#product-organize-modal .choices[data-type*=select-multiple] .choices__inner,
#variation-form-modal .variation-color-panel .choices__inner {
    min-height: 52px;
    padding: .45rem .55rem;
}

#product-organize-modal .choices__list--multiple .choices__item,
#variation-form-modal .variation-color-panel .choices__list--multiple .choices__item {
    margin: .2rem .3rem .2rem 0;
    border: 0;
    border-radius: 1rem;
}

@media (max-width: 767.98px) {
    #product-organize-modal .modal-body {
        grid-template-columns: 1fr;
        gap: 1rem;
        padding: 1rem;
    }
}
#domains-filter-form .choices,
#domain-form .choices,
#domain-renewal-form .choices {
    margin-bottom: 0;
}

#domain-form .row > [class*="col-"],
#domain-renewal-form .row > [class*="col-"] {
    min-width: 0;
}

#domain-form .choices,
#domain-form .choices__inner,
#domain-form .choices__list--single,
#domain-renewal-form .choices,
#domain-renewal-form .choices__inner,
#domain-renewal-form .choices__list--single {
    width: 100%;
    max-width: 100%;
}

#domain-form .choices__list--single,
#domain-renewal-form .choices__list--single {
    overflow: hidden;
}

#domain-form .choices__list--single .choices__item,
#domain-renewal-form .choices__list--single .choices__item {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#domain-form .choices__list--dropdown .choices__item,
#domain-form .choices__list[aria-expanded] .choices__item,
#domain-renewal-form .choices__list--dropdown .choices__item,
#domain-renewal-form .choices__list[aria-expanded] .choices__item {
    overflow-wrap: anywhere;
    white-space: normal;
}

/* Abas responsivas com rolagem restrita ao eixo horizontal. */
.nav-tabs-horizontal-scroll {
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
}
/* Segmentação geográfica reutilizável dos rascunhos de tráfego pago. */
.paid-traffic-location-layout {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: 1rem;
    align-items: stretch;
}

.paid-traffic-location-selected {
    min-height: 260px;
    max-height: 360px;
    overflow-y: auto;
}

.paid-traffic-location-item {
    border: 1px solid var(--bs-border-color, #e9e9ef);
    border-radius: .375rem;
    padding: .875rem;
    background: var(--bs-body-bg, #fff);
}

.paid-traffic-location-item + .paid-traffic-location-item {
    margin-top: .75rem;
}

.paid-traffic-location-skeleton {
    min-height: 118px;
}

.paid-traffic-location-skeleton-line {
    position: relative;
    display: block;
    height: .75rem;
    overflow: hidden;
    border-radius: 999px;
    background: #e5e7eb;
}

.paid-traffic-location-skeleton-line::after {
    position: absolute;
    inset: 0;
    content: "";
    transform: translateX(-100%);
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .8), transparent);
    animation: paid-traffic-location-shimmer 1.25s ease-in-out infinite;
}

.paid-traffic-location-skeleton-title {
    width: 42%;
}

.paid-traffic-location-skeleton-detail {
    width: 72%;
    margin-top: .75rem;
}

.paid-traffic-location-skeleton-controls {
    width: 56%;
    margin-top: 1.5rem;
}

@keyframes paid-traffic-location-shimmer {
    100% {
        transform: translateX(100%);
    }
}

/* Espera localizada da sugestão de conteúdo dos rascunhos de tráfego pago. */
.paid-traffic-ai-control {
    position: relative;
}

.paid-traffic-ai-skeleton {
    position: absolute;
    inset: 0;
    display: none;
    flex-direction: column;
    gap: .85rem;
    padding: 1rem;
    border: 1px solid var(--bs-border-color, #ced4da);
    border-radius: .25rem;
    background: var(--bs-body-bg, #fff);
}

.paid-traffic-ai-field.is-loading .paid-traffic-ai-skeleton {
    display: flex;
}

.paid-traffic-ai-field.is-loading textarea {
    visibility: hidden;
}

.paid-traffic-ai-skeleton-line {
    position: relative;
    display: block;
    height: .75rem;
    overflow: hidden;
    border-radius: 999px;
    background: #e5e7eb;
}

.paid-traffic-ai-skeleton-line::after {
    position: absolute;
    inset: 0;
    content: "";
    transform: translateX(-100%);
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .8), transparent);
    animation: paid-traffic-location-shimmer 1.25s ease-in-out infinite;
}

/* Diálogo Bootstrap secundário sobre um formulário modal que deve permanecer aberto. */
.modal.modal-stacked-dialog {
    z-index: 1070;
}

.modal-backdrop.modal-stacked-backdrop {
    z-index: 1060;
}

.paid-traffic-location-map {
    width: 100%;
    min-height: 360px;
    border: 1px solid var(--bs-border-color, #e9e9ef);
    border-radius: .375rem;
    background: #eef1f5;
    overflow: hidden;
}

.paid-traffic-location-map .leaflet-container,
.paid-traffic-location-map.leaflet-container {
    font: inherit;
}

.paid-traffic-location-marker {
    background: transparent;
    border: 0;
}

.paid-traffic-location-marker svg {
    display: block;
    width: 36px;
    height: 44px;
    color: #556ee6;
    fill: currentColor;
    stroke: #fff;
    stroke-width: 1.25;
    filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .35));
}

/* Menu compacto das ações por campanha de tráfego pago. */
.paid-traffic-actions-trigger {
    width: 2.25rem;
    height: 2.25rem;
    padding: 0;
}

.paid-traffic-actions-menu {
    min-width: 13.5rem;
    padding: .375rem;
}

.paid-traffic-actions-menu .paid-traffic-action-item {
    display: flex;
    align-items: center;
    width: 100%;
    padding: .5rem .75rem;
    font-size: inherit;
    border: 0;
    border-radius: .25rem;
    background: transparent;
    box-shadow: none;
    text-align: left;
}

.paid-traffic-actions-menu .paid-traffic-action-item:hover,
.paid-traffic-actions-menu .paid-traffic-action-item:focus {
    background: rgba(85, 110, 230, .1);
}

.paid-traffic-actions-menu .paid-traffic-action-item:disabled,
.paid-traffic-actions-menu .paid-traffic-action-item[aria-disabled="true"] {
    pointer-events: none;
    opacity: .45;
}

@media (max-width: 991.98px) {
    .paid-traffic-location-layout {
        grid-template-columns: 1fr;
    }

    .paid-traffic-location-selected {
        min-height: 0;
        max-height: none;
    }

    .paid-traffic-location-map {
        min-height: 300px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .paid-traffic-location-skeleton-line::after,
    .paid-traffic-ai-skeleton-line::after {
        display: none;
        animation: none;
    }

    .paid-traffic-location-map .leaflet-zoom-animated {
        transition: none !important;
    }
}