/*
 * Malls Shibata — Padrões de página: indicadores, filtros, listagens, gráficos e impressão.
 */

/* ---------------------------------------------------------------- Cabeçalho de cards */
.malls-card-header {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 0.75rem 1rem;
    padding: 1rem 1.25rem 0.75rem;
}

.malls-card-header .form-label {
    font-size: var(--malls-font-size-xs);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--malls-text-secondary);
    margin-bottom: 0.2rem;
}

.malls-card-header .form-select-sm {
    min-width: 140px;
}

.malls-card-header__hint {
    font-size: var(--malls-font-size-sm);
    color: var(--malls-text-secondary);
}

/* ---------------------------------------------------------------- Abas internas de uma tela */
/* Ex.: Boletos | Faturamento. Linha vermelha na aba ativa, como na barra de abas do shell. */
.malls-page-tabs > .tab-content {
    padding: 0;
}

.nav-tabs.malls-section-tabs {
    flex-wrap: nowrap;
    gap: 0.25rem;
    margin-bottom: 1.25rem;
    overflow-x: auto;
    scrollbar-width: none;
    border-bottom: 1px solid var(--malls-border);
}

.nav-tabs.malls-section-tabs .nav-item {
    flex: 0 0 auto;
}

.nav-tabs.malls-section-tabs .nav-link {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    width: auto;
    min-height: var(--malls-touch-target);
    margin: 0 0 -1px;
    padding: 0.5rem 1rem;
    border: 0;
    border-bottom: 3px solid transparent;
    border-radius: 0;
    background: transparent;
    color: var(--malls-text-secondary);
    white-space: nowrap;
}

.nav-tabs.malls-section-tabs .nav-link:not(.active):not(.disabled):hover {
    color: var(--malls-navy-800);
    border-bottom-color: var(--malls-border-strong);
}

.nav-tabs.malls-section-tabs .nav-link.active,
.nav-tabs.malls-section-tabs .nav-link.active:hover,
.nav-tabs.malls-section-tabs .nav-link.active:focus {
    color: var(--malls-navy-800);
    background: transparent;
    border-bottom-color: var(--malls-red-600);
}

.nav-tabs.malls-section-tabs .nav-link.disabled,
.nav-tabs.malls-section-tabs .nav-link:disabled {
    color: var(--malls-text-muted);
    cursor: not-allowed;
}

.malls-section-title {
    margin: 0 0 0.35rem;
    font-size: var(--malls-font-size-lg);
    font-weight: 700;
    color: var(--malls-text);
}

.malls-section-text {
    margin: 0 0 1rem;
    color: var(--malls-text-secondary);
}

.malls-hint-box {
    padding: 0.85rem 1rem;
    border: 1px solid var(--malls-border);
    border-radius: var(--malls-radius-md);
    background: var(--malls-surface-muted);
    font-size: var(--malls-font-size-md);
}

/* Texto longo em célula de tabela: uma linha com reticências (texto completo no title) */
.malls-cell-clip {
    display: inline-block;
    max-width: 280px;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: middle;
}

/* ---------------------------------------------------------------- Indicadores (KPI) */
.malls-kpi {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 1rem;
    padding: 1.1rem 1.25rem;
}

.malls-kpi__icon {
    flex: 0 0 52px;
    width: 52px;
    height: 52px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    font-size: 1.5rem;
}

.malls-kpi__icon--blue { background: var(--malls-blue-100); color: var(--malls-blue-600); }
.malls-kpi__icon--green { background: var(--malls-success-bg); color: var(--malls-success); }
.malls-kpi__icon--red { background: var(--malls-danger-bg); color: var(--malls-red-600); }
.malls-kpi__icon--orange { background: var(--malls-warning-bg); color: #d97706; }

.malls-kpi__body {
    /* O valor do indicador se ajusta à largura do card (cards estreitos em tablets/notebooks) */
    container-type: inline-size;
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.malls-kpi__label {
    margin: 0;
    font-size: var(--malls-font-size-md);
    font-weight: 600;
    color: var(--malls-text);
}

.malls-kpi__value {
    margin: 0;
    font-size: 1.75rem;
    font-size: clamp(1.1rem, 14cqi, 1.75rem);
    font-weight: 800;
    line-height: 1.2;
    color: var(--malls-navy-900);
    display: flex;
    align-items: baseline;
    gap: 0.4rem;
    flex-wrap: wrap;
}

.malls-kpi__unit {
    font-size: var(--malls-font-size-sm);
    font-weight: 500;
    color: var(--malls-text-secondary);
}

.malls-kpi__hint {
    margin: 0;
    font-size: var(--malls-font-size-sm);
    color: var(--malls-text-secondary);
}

.malls-kpi__placeholder {
    display: inline-block;
    width: 64px;
    height: 28px;
}

.malls-kpi__link {
    align-self: flex-start;
    text-align: left;
    margin-top: 0.35rem;
    padding: 0;
    border: 0;
    background: none;
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    font-size: var(--malls-font-size-sm);
    font-weight: 600;
    color: var(--malls-blue-600);
    text-decoration: none;
}

.malls-kpi__link:hover,
.malls-kpi__link:focus-visible {
    color: var(--malls-navy-800);
    text-decoration: underline;
}

/* ---------------------------------------------------------------- Filtros e chips */
.malls-filter-card .card-body {
    padding: 1rem 1.25rem;
}

.malls-filter-chips {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.85rem;
}

.malls-filter-chips__list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.malls-filter-chips__list[hidden] + .malls-filter-chips__clear:disabled {
    display: none;
}

.malls-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    min-height: 30px;
    padding: 0.15rem 0.35rem 0.15rem 0.75rem;
    border-radius: var(--malls-radius-sm);
    background: var(--malls-blue-50);
    border: 1px solid var(--malls-blue-100);
    color: var(--malls-navy-800);
    font-size: var(--malls-font-size-sm);
    font-weight: 600;
}

.malls-chip:not(:has(.malls-chip__remove)) {
    padding-right: 0.75rem;
}

.malls-chip__remove {
    width: 24px;
    height: 24px;
    display: grid;
    place-items: center;
    padding: 0;
    border: 0;
    border-radius: var(--malls-radius-sm);
    background: transparent;
    color: var(--malls-navy-800);
    font-size: 1rem;
}

.malls-chip__remove:hover,
.malls-chip__remove:focus-visible {
    background: var(--malls-blue-100);
}

.malls-filter-chips__clear {
    color: var(--malls-blue-600);
    min-height: 30px;
}

.malls-filter-chips__clear:disabled {
    opacity: 0.5;
}

/* Filtros movidos para o painel de telas pequenas (responsive.js) */
#contrato-filters-sm-section .row > [class*="col-"] {
    flex: 0 0 100%;
    max-width: 100%;
}

/* ---------------------------------------------------------------- Listagens */
.malls-table-card {
    overflow: visible;
}

.malls-table-card > .card-datatable,
.malls-table-card > .card-body {
    padding: 0.75rem 1.25rem 1rem;
}

/* O DataTables controla a rolagem horizontal (scrollX); o wrapper não precisa rolar,
   o que permite manter o cabeçalho fixo durante a rolagem vertical da página. */
.malls-table-card > .card-datatable.table-responsive {
    overflow: visible;
}

body.malls-frame-body div.dt-scroll-head {
    position: sticky;
    top: 0;
    z-index: 3;
    background: var(--malls-surface);
}

/* Listagens antigas com card padrão também recebem respiro */
.malls-page .card > .card-datatable.p-4 {
    padding: 1rem 1.25rem !important;
}

/* Célula agrupada (relatórios com linhas mescladas) */
.malls-group-cell {
    background: var(--malls-surface-sunken) !important;
    color: var(--malls-navy-900) !important;
    font-weight: 700;
}

/* Linhas canceladas: além da cor, mantém o tachado (não depende só de cor) */
table.dataTable tr.text-danger > td {
    color: var(--malls-danger-text) !important;
}

/* Variação positiva/negativa */
.malls-variation {
    display: inline-flex;
    align-items: center;
    gap: 0.15rem;
    font-weight: 700;
    white-space: nowrap;
}

/* ---------------------------------------------------------------- Gráficos */
.malls-chart {
    position: relative;
    height: 380px;
}

@media (max-width: 575.98px) {
    .malls-chart {
        height: 300px;
    }
}

.apexcharts-legend-text {
    color: var(--malls-text) !important;
    font-family: var(--malls-font-family) !important;
}

/* ---------------------------------------------------------------- Dashboard */
#occurrences-table .badge {
    text-transform: uppercase;
}

/* Seletor de competência/período no cabeçalho da página */
.malls-period-select {
    position: relative;
    min-width: 200px;
}

.malls-period-select__icon {
    position: absolute;
    left: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--malls-text-secondary);
    pointer-events: none;
}

.malls-period-select .form-select {
    padding-left: 2.25rem;
    font-weight: 600;
    color: var(--malls-text);
}

/* Indicador com variação e minigráfico */
.malls-kpi--trend {
    position: relative;
    align-items: stretch;
}

.malls-kpi--trend .malls-kpi__body {
    padding-right: 0.25rem;
}

.malls-kpi__spark {
    flex: 0 0 92px;
    width: 92px;
    height: 46px;
    align-self: flex-end;
    margin-bottom: 0.15rem;
}

.malls-kpi__trend {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.15rem 0.4rem;
    margin: 0.1rem 0 0;
    min-height: 1.25rem;
    font-size: var(--malls-font-size-sm);
}

.malls-kpi__trend:empty {
    display: none;
}

.malls-kpi__trend-ref {
    color: var(--malls-text-secondary);
}

.malls-trend {
    display: inline-flex;
    align-items: center;
    gap: 0.1rem;
    font-weight: 700;
    white-space: nowrap;
}

.malls-trend .bx {
    font-size: 1.05rem;
}

.malls-trend--good { color: var(--malls-success-text); }
.malls-trend--bad { color: var(--malls-danger-text); }
.malls-trend--neutral { color: var(--malls-text-secondary); }

@media (min-width: 1200px) and (max-width: 1499.98px) {
    /* Quatro cards lado a lado em telas médias: o minigráfico vai para baixo do valor */
    .malls-kpi--trend {
        flex-wrap: wrap;
    }

    .malls-kpi--trend .malls-kpi__spark {
        flex: 1 0 100%;
        width: 100%;
        height: 36px;
    }
}

/* Legenda simples (bolinha + texto) */
.malls-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem 1rem;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: var(--malls-font-size-sm);
    color: var(--malls-text-secondary);
}

.malls-legend li {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.malls-legend__dot {
    flex: 0 0 10px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--dot, var(--malls-navy-800));
}

/* Gráficos: alturas, carregamento e erro */
.malls-chart--md {
    height: 320px;
}

.malls-chart--sm {
    height: 260px;
}

.malls-chart--radial {
    height: 300px;
}

.malls-chart__placeholder {
    width: 100%;
    height: 100%;
    border-radius: var(--malls-radius-md);
}

.malls-chart__error {
    height: 100%;
    min-height: 160px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 1rem;
    text-align: center;
    color: var(--malls-text-secondary);
    font-size: var(--malls-font-size-sm);
}

.malls-chart__error .bx {
    font-size: 1.25rem;
    color: var(--malls-danger);
}

@media (max-width: 575.98px) {
    .malls-chart--md {
        height: 260px;
    }
}

/* Donut com legenda em lista (valor e percentual) */
.malls-donut {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.5rem 1.25rem;
}

.malls-donut__chart {
    flex: 0 0 200px;
    width: 200px;
    min-height: 210px;
}

.malls-donut__placeholder {
    width: 180px;
    height: 180px;
    margin: 15px 10px;
    border-radius: 50%;
}

.malls-donut__legend {
    flex: 1 1 170px;
    max-width: 300px;
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: var(--malls-font-size-sm);
}

.malls-donut__legend li {
    display: grid;
    grid-template-columns: 10px minmax(0, 1fr) auto 3.25rem;
    align-items: center;
    gap: 0.6rem;
}

.malls-donut__label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--malls-text);
}

.malls-donut__legend strong {
    color: var(--malls-navy-900);
}

.malls-donut__share {
    text-align: right;
    color: var(--malls-text-secondary);
}

/* Valores monetários na legenda do donut: coluna de valor mais larga */
.malls-donut__legend--money li {
    grid-template-columns: 10px minmax(0, 1fr) auto 2.75rem;
}

/* ---------------------------------------------------------------- Visão do diretor */
.malls-period-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    min-height: 38px;
    padding: 0.35rem 0.85rem;
    border: 1px solid var(--malls-border);
    border-radius: var(--malls-radius-pill);
    background: var(--malls-surface);
    color: var(--malls-text);
    font-size: var(--malls-font-size-sm);
    font-weight: 600;
}

.malls-period-badge .bx {
    color: var(--malls-text-secondary);
}

#diretor-dashboard {
    transition: opacity var(--malls-transition);
}

#diretor-dashboard.is-updating {
    opacity: 0.55;
    pointer-events: none;
}

.malls-kpi--hero .malls-kpi__value {
    font-size: 1.9rem;
    font-size: clamp(1.25rem, 13cqi, 1.9rem);
}

/* Barra fina de proporção nos indicadores */
.malls-meter {
    height: 6px;
    margin: 0.35rem 0 0.2rem;
    border-radius: var(--malls-radius-pill);
    background: var(--malls-surface-sunken);
    overflow: hidden;
}

.malls-meter__bar {
    display: block;
    width: 0;
    height: 100%;
    border-radius: inherit;
    transition: width 600ms ease;
}

.malls-meter__bar--green { background: var(--malls-success); }
.malls-meter__bar--red { background: var(--malls-red-600); }
.malls-meter__bar--navy { background: var(--malls-navy-800); }

/* Destaques do período */
.malls-insights__list {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.malls-insights__placeholder {
    height: 52px;
    border-radius: var(--malls-radius-md);
}

.malls-insight {
    --tone: var(--malls-info);
    --tone-bg: var(--malls-info-bg);
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.7rem 0.85rem;
    border: 1px solid var(--malls-border);
    border-left: 3px solid var(--tone);
    border-radius: var(--malls-radius-md);
    background: var(--malls-surface);
}

.malls-insight p {
    margin: 0;
    font-size: var(--malls-font-size-md);
    line-height: 1.45;
    color: var(--malls-text);
}

.malls-insight strong {
    color: var(--malls-navy-900);
}

.malls-insight__icon {
    flex: 0 0 32px;
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--tone-bg);
    color: var(--tone);
    font-size: 1.1rem;
}

.malls-insight--good { --tone: var(--malls-success); --tone-bg: var(--malls-success-bg); }
.malls-insight--warn { --tone: var(--malls-warning); --tone-bg: var(--malls-warning-bg); }
.malls-insight--bad { --tone: var(--malls-red-600); --tone-bg: var(--malls-danger-bg); }

/* Tabela compacta dentro de cards de gráfico */
.malls-mini-table {
    font-size: var(--malls-font-size-sm);
}

.malls-mini-table th,
.malls-mini-table td {
    padding: 0.4rem 0.5rem;
    white-space: nowrap;
    color: var(--malls-text);
}

.malls-mini-table thead th {
    font-size: var(--malls-font-size-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--malls-text-secondary);
    background: transparent;
}

.malls-mini-table tbody th {
    font-size: inherit;
    font-weight: 600;
    text-transform: none;
    letter-spacing: normal;
}

/* Ranking em barras (lojas, cidades) */
.malls-rank {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    margin: 0;
    padding: 0;
    list-style: none;
    --rank-color: var(--malls-navy-800);
    --rank-bg: var(--malls-blue-50);
}

.malls-rank--red {
    --rank-color: var(--malls-red-600);
    --rank-bg: var(--malls-red-50);
}

.malls-rank li {
    display: grid;
    grid-template-columns: 1.6rem minmax(5.5rem, 9rem) minmax(0, 1fr) auto;
    grid-template-areas: "pos name track value" ". . note note";
    align-items: center;
    column-gap: 0.75rem;
    font-size: var(--malls-font-size-md);
}

.malls-rank li:has(.malls-rank__note) {
    grid-template-areas: "pos name track value" ". . track note";
}

.malls-rank__pos {
    grid-area: pos;
    width: 1.6rem;
    height: 1.6rem;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--rank-bg);
    color: var(--rank-color);
    font-size: var(--malls-font-size-xs);
    font-weight: 800;
}

.malls-rank__name {
    grid-area: name;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--malls-text);
    font-weight: 600;
}

.malls-rank__track {
    grid-area: track;
    height: 10px;
    border-radius: var(--malls-radius-pill);
    background: var(--malls-surface-sunken);
    overflow: hidden;
}

.malls-rank__bar {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: var(--rank-color);
    transition: width 600ms ease;
}

.malls-rank__value {
    grid-area: value;
    min-width: 5.5rem;
    text-align: right;
    color: var(--malls-navy-900);
}

.malls-rank__note {
    grid-area: note;
    text-align: right;
    font-size: var(--malls-font-size-xs);
    color: var(--malls-text-secondary);
}

.malls-rank__placeholder {
    display: block !important;
    height: 22px;
    border-radius: var(--malls-radius-sm);
}

.malls-rank__empty {
    display: block !important;
    padding: 1.5rem 0;
    text-align: center;
    color: var(--malls-text-secondary);
}

@media (max-width: 575.98px) {
    .malls-rank li {
        grid-template-columns: 1.6rem minmax(0, 1fr) auto;
        grid-template-areas: "pos name value" ". track track" ". note note";
        row-gap: 0.3rem;
    }

    .malls-rank li:has(.malls-rank__note) {
        grid-template-areas: "pos name value" ". track track" ". note note";
    }
}

.malls-mini-table .malls-legend__dot {
    display: inline-block;
    margin-right: 0.45rem;
    vertical-align: middle;
}

@media print {
    #diretor-dashboard .card {
        break-inside: avoid;
    }
}

/* Botões segmentados (ex.: Loja | Categoria) */
.malls-segmented .btn {
    font-weight: 600;
}

/* O tema marca o botão selecionado com !important */
.malls-segmented .btn-check:checked + .btn {
    background-color: var(--malls-navy-800) !important;
    border-color: var(--malls-navy-800) !important;
    color: #fff !important;
}

/* ---------------------------------------------------------------- Impressão / exportação */
@media print {
    @page {
        size: A4 landscape;
        margin: 12mm;
    }

    body,
    body.malls-frame-body {
        background: #fff !important;
        min-height: 0;
    }

    .malls-page {
        padding: 0;
        max-width: none;
    }

    .malls-page-header__actions,
    .d-print-none,
    .dt-paging,
    .dt-length,
    .dt-search,
    .jquery-spinner-wrap,
    .swal2-container {
        display: none !important;
    }

    .card {
        box-shadow: none !important;
        border-color: #cbd5e1 !important;
        break-inside: avoid;
    }

    .malls-kpi__icon {
        border: 1px solid #cbd5e1;
    }

    div.dt-scroll-head {
        position: static !important;
    }

    div.dt-scroll-body {
        max-height: none !important;
        overflow: visible !important;
    }

    .table thead th,
    table.dataTable thead th {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
}

/* ---------------------------------------------------------------- Visão do diretor: cartões e detalhamentos */
.malls-dir-tip {
    margin: -0.25rem 0 0.75rem;
    font-size: var(--malls-font-size-sm);
    color: var(--malls-text-secondary);
}

.malls-kpi__icon--teal { background: #dff6f6; color: #0b8a89; }
.malls-kpi__icon--violet { background: #eeebfe; color: #5b4bd6; }
.malls-meter__bar--teal { background: #0ea5a4; }
.malls-meter__bar--orange { background: var(--malls-warning); }

.malls-dir-tip .bx {
    margin-right: 0.25rem;
    vertical-align: -2px;
}

/* Cartão com valor principal e quebra (por tipo, por categoria) */
.malls-stat {
    container-type: inline-size;
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    padding: 1.1rem 1.25rem 1.15rem;
}

.malls-stat__head {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-width: 0;
}

.malls-stat__icon {
    flex: 0 0 40px;
    width: 40px;
    height: 40px;
    font-size: 1.25rem;
}

.malls-stat__title {
    flex: 1 1 auto;
    min-width: 0;
}

.malls-stat__label {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    font-size: var(--malls-font-size-md);
    font-weight: 600;
    color: var(--malls-text);
}

.malls-stat__value {
    /* O valor se ajusta à largura do cartão (cartões estreitos em tablets) */
    margin: 0;
    font-size: clamp(1.35rem, 1.1rem + 1vw, 1.85rem);
    font-weight: 800;
    line-height: 1.15;
    color: var(--malls-navy-900);
    overflow-wrap: anywhere;
}

.malls-stat__title .malls-stat__value {
    font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem);
}

.malls-stat__hint,
.malls-stat__trend {
    margin: 0;
    font-size: var(--malls-font-size-sm);
    color: var(--malls-text-secondary);
}

.malls-stat__trend {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    min-width: 0;
}

.malls-stat__aside {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    margin: 0;
    text-align: right;
    font-size: var(--malls-font-size-xs);
    color: var(--malls-text-secondary);
}

.malls-stat__aside strong {
    font-size: var(--malls-font-size-sm);
    color: var(--malls-navy-900);
}

.malls-stat__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.malls-stat__more {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    min-height: 32px;
    padding: 0.2rem 0.6rem;
    border: 1px solid var(--malls-border);
    border-radius: var(--malls-radius-pill);
    background: var(--malls-surface);
    color: var(--malls-blue-600);
    font-size: var(--malls-font-size-xs);
    font-weight: 700;
    white-space: nowrap;
    cursor: pointer;
}

.malls-stat__more:hover,
.malls-stat__more:focus-visible {
    border-color: var(--malls-blue-600);
    background: var(--malls-blue-50);
}

.malls-stat__breakdown {
    margin-top: auto;
    padding-top: 0.6rem;
    border-top: 1px solid var(--malls-border);
}

.malls-stat__breakdown-title {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    margin: 0 0 0.35rem;
    font-size: var(--malls-font-size-xs);
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--malls-text-secondary);
}

.malls-stat__list {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: var(--malls-font-size-sm);
}

.malls-stat__list > li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    min-height: 30px;
}

.malls-stat__list > li:has(> .malls-stat__row) {
    display: block;
}

.malls-stat__name {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    min-width: 0;
    color: var(--malls-text);
}

.malls-stat__list strong {
    color: var(--malls-navy-900);
}

.malls-stat__sub {
    font-size: var(--malls-font-size-xs);
    color: var(--malls-text-secondary);
}

.malls-stat__empty {
    color: var(--malls-text-secondary);
}

.malls-stat__placeholder {
    height: 22px;
    margin: 0.2rem 0;
    border-radius: var(--malls-radius-sm);
}

/* Cartão estreito: "Detalhar" só com o ícone, para o título não quebrar */
@container (max-width: 300px) {
    .malls-stat__head .malls-stat__more {
        width: 32px;
        justify-content: center;
        padding: 0;
    }

    .malls-stat__head .malls-stat__more span {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
    }
}

/* Linha clicável (abre o detalhamento) */
.malls-stat__row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: center;
    column-gap: 0.6rem;
    width: 100%;
    min-height: 32px;
    padding: 0.2rem 0.4rem;
    margin: 0 -0.4rem;
    width: calc(100% + 0.8rem);
    border: 0;
    border-radius: var(--malls-radius-sm);
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.malls-stat__row:hover,
.malls-stat__row:focus-visible {
    background: var(--malls-blue-50);
}

.malls-stat__list--bars .malls-stat__row {
    row-gap: 0.25rem;
    padding-bottom: 0.35rem;
}

.malls-stat__bar {
    grid-column: 1 / -1;
    display: block;
    height: 6px;
    border-radius: var(--malls-radius-pill);
    background: var(--malls-surface-sunken);
    overflow: hidden;
}

.malls-stat__bar > span {
    display: block;
    height: 100%;
    border-radius: inherit;
}

/* Valor resumido que mostra o número completo ao toque */
.malls-money {
    display: inline;
    padding: 0;
    border: 0;
    border-bottom: 1px dashed var(--malls-border-strong);
    background: transparent;
    color: inherit;
    font: inherit;
    line-height: inherit;
    cursor: pointer;
    text-align: inherit;
}

.malls-money:hover,
.malls-money:focus-visible {
    border-bottom-color: var(--malls-blue-600);
    color: var(--malls-blue-600);
}

.malls-money[aria-pressed="true"] {
    border-bottom-style: solid;
}

/* Botões de mês (alternativa ao toque no gráfico) */
.malls-chip-list {
    display: flex;
    gap: 0.4rem;
    margin-top: 0.6rem;
    padding-bottom: 0.25rem;
    overflow-x: auto;
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
}

.malls-chip-list:empty {
    display: none;
}

.malls-chip {
    flex: 0 0 auto;
    min-height: 32px;
    padding: 0.2rem 0.7rem;
    border: 1px solid var(--malls-border);
    border-radius: var(--malls-radius-pill);
    background: var(--malls-surface);
    color: var(--malls-text);
    font-size: var(--malls-font-size-xs);
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
}

.malls-chip:hover:not(:disabled),
.malls-chip:focus-visible {
    border-color: var(--malls-blue-600);
    color: var(--malls-blue-600);
}

.malls-chip:disabled {
    opacity: 0.45;
    cursor: default;
}

.malls-chart--clickable .apexcharts-bar-area,
.malls-chart--clickable .apexcharts-radialbar-area,
.malls-chart--clickable .apexcharts-pie-area,
.malls-chart--clickable .apexcharts-marker {
    cursor: pointer;
}

.malls-link {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--malls-blue-600);
    font: inherit;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
}

.malls-link:hover,
.malls-link:focus-visible {
    text-decoration: underline;
}

.malls-link .bx-chevron-right {
    color: var(--malls-text-muted);
}

.malls-mini-table--rows tbody tr {
    cursor: pointer;
}

.malls-mini-table--rows tbody tr:hover {
    background: var(--malls-blue-50);
}

/* Ranking e legenda do donut com botão (linha inteira clicável) */
.malls-rank li:has(> .malls-rank__btn) {
    display: block;
}

.malls-rank__btn {
    display: grid;
    grid-template-columns: 1.6rem minmax(5.5rem, 9rem) minmax(0, 1fr) auto;
    grid-template-areas: "pos name track value" ". . track note";
    align-items: center;
    column-gap: 0.75rem;
    width: 100%;
    padding: 0.3rem 0.4rem;
    border: 0;
    border-radius: var(--malls-radius-sm);
    background: transparent;
    color: inherit;
    font: inherit;
    font-size: var(--malls-font-size-md);
    text-align: left;
    cursor: pointer;
}

.malls-rank__btn:hover,
.malls-rank__btn:focus-visible {
    background: var(--rank-bg);
}

.malls-donut__legend li:has(> .malls-donut__row) {
    display: block;
}

.malls-donut__row {
    display: grid;
    grid-template-columns: 10px minmax(0, 1fr) auto 2.75rem;
    align-items: center;
    gap: 0.6rem;
    margin: 0;
    width: 100%;
}

.malls-insight--link {
    padding: 0;
}

.malls-insight--link > button {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    width: 100%;
    padding: 0.7rem 0.85rem;
    border: 0;
    border-radius: inherit;
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.malls-insight--link > button:hover,
.malls-insight--link > button:focus-visible {
    background: var(--malls-surface-muted);
}

.malls-insight--link p {
    flex: 1 1 auto;
}

.malls-insight__go {
    align-self: center;
    color: var(--malls-text-muted);
    font-size: 1.2rem;
}

/* Receita por cidade: maiores e menores lado a lado */
.malls-city {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem 1.5rem;
}

.malls-city__title {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin: 0 0 0.5rem;
    font-size: var(--malls-font-size-sm);
    font-weight: 700;
    color: var(--malls-text-secondary);
}

.malls-city__list {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.malls-city__btn {
    display: grid;
    grid-template-columns: 1.75rem minmax(0, 1fr);
    grid-template-areas: "pos name" "pos value";
    align-items: center;
    column-gap: 0.65rem;
    width: 100%;
    padding: 0.35rem 0.4rem;
    border: 0;
    border-radius: var(--malls-radius-sm);
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.malls-city__btn:hover,
.malls-city__btn:focus-visible {
    background: var(--malls-blue-50);
}

.malls-city__pos {
    grid-area: pos;
    width: 1.75rem;
    height: 1.75rem;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--malls-blue-50);
    color: var(--malls-blue-600);
    font-size: var(--malls-font-size-xs);
    font-weight: 800;
}

.malls-city__name {
    grid-area: name;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: var(--malls-font-size-sm);
    font-weight: 700;
    color: var(--malls-text);
}

.malls-city__value {
    grid-area: value;
    font-size: var(--malls-font-size-xs);
    color: var(--malls-text-secondary);
}

@media (max-width: 399.98px) {
    .malls-city {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* Aviso de contratos vencidos (abre a lista) */
.malls-dir-alert {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    width: 100%;
    margin-bottom: 0.75rem;
    padding: 0.6rem 0.85rem;
    border: 1px solid #f7d79a;
    border-radius: var(--malls-radius-md);
    background: var(--malls-warning-bg);
    color: var(--malls-warning-text);
    font: inherit;
    font-size: var(--malls-font-size-sm);
    text-align: left;
    cursor: pointer;
}

.malls-dir-alert > .bx {
    font-size: 1.2rem;
}

.malls-dir-alert > span:first-of-type {
    flex: 1 1 auto;
}

.malls-dir-alert__action {
    display: inline-flex;
    align-items: center;
    font-weight: 700;
    white-space: nowrap;
}

.malls-dir-alert:hover,
.malls-dir-alert:focus-visible {
    border-color: var(--malls-warning);
}

@media (max-width: 575.98px) {
    .malls-dir-alert {
        flex-wrap: wrap;
    }

    .malls-rank__btn {
        grid-template-columns: 1.6rem minmax(0, 1fr) auto;
        grid-template-areas: "pos name value" ". track track" ". note note";
        row-gap: 0.3rem;
    }
}

/* Modal de detalhamento */
.malls-detail__header {
    align-items: flex-start;
    gap: 0.75rem;
}

.malls-detail__heading {
    flex: 1 1 auto;
    min-width: 0;
}

.malls-detail__title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
    font-size: var(--malls-font-size-xl);
    font-weight: 800;
    color: var(--malls-navy-900);
}

.malls-detail__title > .bx {
    flex: 0 0 auto;
    color: var(--malls-blue-600);
}

.malls-detail__title > span {
    min-width: 0;
    overflow-wrap: anywhere;
}

.malls-detail__title small {
    display: block;
    font-size: var(--malls-font-size-xs);
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--malls-text-secondary);
}

.malls-detail__subtitle {
    margin: 0.15rem 0 0;
    font-size: var(--malls-font-size-sm);
    color: var(--malls-text-secondary);
}

.malls-detail__back {
    flex: 0 0 auto;
}

.malls-detail__body {
    background: var(--malls-surface-muted);
}

.malls-detail__loading,
.malls-detail__error {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    min-height: 240px;
    color: var(--malls-text-secondary);
    text-align: center;
}

.malls-detail__error .bx {
    font-size: 2rem;
    color: var(--malls-red-600);
}

.malls-detail__meta {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    margin: 0 0 0.75rem;
    color: var(--malls-text-secondary);
}

.malls-detail__tiles {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.malls-detail__tile {
    --tone: var(--malls-border-strong);
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
    padding: 0.75rem 0.9rem;
    border: 1px solid var(--malls-border);
    border-top: 3px solid var(--tone);
    border-radius: var(--malls-radius-md);
    background: var(--malls-surface);
}

.malls-detail__tile--good { --tone: var(--malls-success); }
.malls-detail__tile--warn { --tone: var(--malls-warning); }
.malls-detail__tile--bad { --tone: var(--malls-red-600); }

.malls-detail__tile-label {
    font-size: var(--malls-font-size-xs);
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--malls-text-secondary);
}

.malls-detail__tile-value {
    font-size: 1.3rem;
    font-weight: 800;
    color: var(--malls-navy-900);
    overflow-wrap: anywhere;
}

.malls-detail__tile-note {
    font-size: var(--malls-font-size-xs);
    color: var(--malls-text-secondary);
}

.malls-detail__section {
    margin-bottom: 1rem;
    padding: 1rem;
    border: 1px solid var(--malls-border);
    border-radius: var(--malls-radius-md);
    background: var(--malls-surface);
}

.malls-detail__section-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-bottom: 0.75rem;
}

.malls-detail__section-head h3 {
    margin: 0;
    font-size: var(--malls-font-size-lg);
    font-weight: 700;
    color: var(--malls-navy-900);
}

.malls-detail__section-head p {
    margin: 0.1rem 0 0;
    font-size: var(--malls-font-size-sm);
    color: var(--malls-text-secondary);
}

.malls-detail__actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.malls-detail__actions .btn {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
}

.malls-detail__search {
    position: relative;
    display: block;
    margin: 0;
}

.malls-detail__search .bx {
    position: absolute;
    top: 50%;
    left: 0.6rem;
    transform: translateY(-50%);
    color: var(--malls-text-muted);
}

.malls-detail__search input {
    width: 200px;
    max-width: 100%;
    padding-left: 1.9rem;
}

.malls-detail__chart {
    width: 100%;
    min-width: 0;
}

.malls-detail__split {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
    gap: 1rem;
    align-items: center;
}

.malls-detail__table {
    max-height: 60vh;
    overflow: auto;
    border: 1px solid var(--malls-border);
    border-radius: var(--malls-radius-sm);
}

.malls-detail__table table {
    font-size: var(--malls-font-size-sm);
}

.malls-detail__table th,
.malls-detail__table td {
    padding: 0.45rem 0.6rem;
    white-space: nowrap;
    vertical-align: middle;
}

.malls-detail__table thead th {
    position: sticky;
    top: 0;
    z-index: 1;
    background: var(--malls-surface-muted);
    font-size: var(--malls-font-size-xs);
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--malls-text-secondary);
}

.malls-detail__table tbody th {
    font-weight: 600;
    text-transform: none;
    letter-spacing: normal;
}

.malls-detail__table tbody th small {
    display: block;
    max-width: 18rem;
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: 400;
    color: var(--malls-text-secondary);
}

.malls-detail__table tr.is-clickable {
    cursor: pointer;
}

.malls-detail__table tr.is-clickable:hover {
    background: var(--malls-blue-50);
}

.malls-detail__table tfoot th,
.malls-detail__table tfoot td {
    position: sticky;
    bottom: 0;
    background: var(--malls-blue-50);
    font-weight: 700;
    color: var(--malls-navy-900);
}

.malls-detail__empty,
.malls-detail__note {
    margin: 0.5rem 0 0;
    font-size: var(--malls-font-size-sm);
    color: var(--malls-text-secondary);
}

.malls-rate {
    display: inline-block;
    padding: 0.05rem 0.45rem;
    border-radius: var(--malls-radius-pill);
    font-weight: 700;
    font-size: var(--malls-font-size-xs);
}

.malls-rate--good { background: var(--malls-success-bg); color: var(--malls-success-text); }
.malls-rate--warn { background: var(--malls-warning-bg); color: var(--malls-warning-text); }
.malls-rate--bad { background: var(--malls-danger-bg); color: var(--malls-danger-text); }
.malls-rate--info { background: var(--malls-info-bg); color: var(--malls-info-text); }

.malls-inline-bar {
    display: inline-block;
    width: 48px;
    height: 6px;
    margin-right: 0.45rem;
    vertical-align: middle;
    border-radius: var(--malls-radius-pill);
    background: var(--malls-surface-sunken);
    overflow: hidden;
}

.malls-inline-bar > span {
    display: block;
    height: 100%;
    background: var(--malls-navy-800);
}

@media (min-width: 992px) {
    /* Detalhes com tabelas largas: aproveita a largura da tela (o modal-xl só vale a partir de 1200px) */
    .modal.malls-detail .modal-dialog {
        max-width: min(1140px, calc(100vw - 3rem));
    }
}

@media (max-width: 991.98px) {
    /* O tema recua ".modal-dialog:not(.modal-fullscreen)" no celular; aqui é tela cheia. */
    .modal.malls-detail .modal-dialog {
        max-width: none;
        margin: 0;
        padding: 0 !important;
    }

    .malls-detail__split {
        grid-template-columns: minmax(0, 1fr);
    }

    .malls-detail__table {
        max-height: none;
    }

    .malls-detail__table tfoot th,
    .malls-detail__table tfoot td {
        position: static;
    }
}

@media (max-width: 575.98px) {
    .malls-detail__body {
        padding: 0.75rem;
    }

    .malls-detail__section {
        padding: 0.75rem;
    }

    .malls-detail__tiles {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.5rem;
    }

    .malls-detail__tile-value {
        font-size: 1.1rem;
    }

    .malls-detail__search,
    .malls-detail__search input {
        width: 100%;
    }

    .malls-detail__actions {
        width: 100%;
    }
}

/* ---------------------------------------------------------------- Relatório executivo (impressão / PDF) */
/*
 * Versão para papel de uma tela (ex.: visão do diretor). Fica fora da tela, já na largura útil da folha
 * (A4 retrato com margens de 14 mm = 182 mm), para os gráficos serem desenhados no tamanho final.
 * Ao imprimir, substitui todo o conteúdo da página.
 */
.malls-report {
    position: fixed;
    top: 0;
    left: -10000px;
    width: 182mm;
    visibility: hidden;
    pointer-events: none;
    page: malls-report;
    font-family: var(--malls-font-family);
    font-size: 8.5pt;
    line-height: 1.4;
    color: var(--malls-text);
    background: #fff;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
}

.malls-report p,
.malls-report h1,
.malls-report h2,
.malls-report ul,
.malls-report dl,
.malls-report dd {
    margin: 0;
}

.malls-report__header {
    display: flex;
    align-items: center;
    gap: 6mm;
    padding-bottom: 4mm;
    border-bottom: 0.6mm solid var(--malls-navy-800);
}

.malls-report__logo {
    width: 38mm;
    height: auto;
    flex: 0 0 auto;
}

.malls-report__heading {
    padding-left: 6mm;
    border-left: 1px solid var(--malls-border);
}

.malls-report__eyebrow {
    font-size: 7pt;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--malls-red-600);
}

.malls-report__title {
    font-size: 19pt;
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -0.01em;
    color: var(--malls-navy-900);
}

.malls-report__subtitle {
    font-size: 8.5pt;
    color: var(--malls-text-secondary);
}

.malls-report__meta {
    display: grid;
    grid-template-columns: 1.25fr 0.7fr 0.7fr 1.75fr;
    gap: 4mm;
    margin: 4mm 0 5mm;
    padding: 2.5mm 4mm;
    background: var(--malls-surface-muted);
    border: 1px solid var(--malls-border);
    border-radius: 1.5mm;
}

.malls-report__meta dt {
    font-size: 6.5pt;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--malls-text-secondary);
}

.malls-report__meta dd {
    font-size: 8.5pt;
    font-weight: 600;
    color: var(--malls-text);
}

/* Indicadores */
.malls-report__kpis {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 3mm;
    margin-bottom: 6mm;
}

.malls-report__kpi {
    padding: 3mm 3.5mm;
    border: 1px solid var(--malls-border);
    border-top: 1mm solid var(--accent);
    border-radius: 1.5mm;
    break-inside: avoid;
}

.malls-report__kpi-label {
    font-size: 6.5pt;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--malls-text-secondary);
}

.malls-report__kpi-value {
    margin-top: 1mm;
    font-size: 17pt;
    font-weight: 800;
    line-height: 1.15;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
    color: var(--malls-navy-900);
}

.malls-report__kpi-full {
    font-size: 7pt;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
    color: var(--malls-text-secondary);
}

.malls-report__meter {
    height: 1.2mm;
    margin: 2mm 0 1.5mm;
    overflow: hidden;
    background: var(--malls-surface-sunken);
    border-radius: 1mm;
}

.malls-report__meter span {
    display: block;
    height: 100%;
    background: var(--accent);
    border-radius: inherit;
}

.malls-report__kpi-note {
    font-size: 7.5pt;
    color: var(--malls-text);
}

/* Sem barra (Faturado): a nota começa logo abaixo do valor */
.malls-report__kpi-full + .malls-report__kpi-note {
    margin-top: 2mm;
}

/* Seções */
.malls-report__section {
    margin-bottom: 6mm;
    break-inside: avoid;
}

/* Seção longa (tabela por mês): pode continuar na página seguinte, repetindo o cabeçalho da tabela */
.malls-report__section--flow {
    break-inside: auto;
}

.malls-report__section-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 4mm;
    margin-bottom: 2.5mm;
    padding-bottom: 1.2mm;
    border-bottom: 1px solid var(--malls-border-strong);
    break-after: avoid;
}

.malls-report__section-head h2 {
    font-size: 10.5pt;
    font-weight: 700;
    color: var(--malls-navy-900);
}

.malls-report__section-head p {
    font-size: 7.5pt;
    color: var(--malls-text-secondary);
}

.malls-report__legend {
    display: flex;
    gap: 3.5mm;
    padding: 0;
    list-style: none;
    font-size: 7.5pt;
    color: var(--malls-text-secondary);
}

.malls-report__legend span,
.malls-report__dot {
    display: inline-block;
    width: 2.2mm;
    height: 2.2mm;
    margin-right: 1.4mm;
    border-radius: 50%;
    background: var(--dot);
}

.malls-report__columns {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6mm;
}

/* Destaques */
.malls-report__highlights {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2mm 4mm;
    padding: 0;
    list-style: none;
}

.malls-report__highlight {
    --tone: var(--malls-info);
    --tone-bg: var(--malls-info-bg);
    display: flex;
    align-items: flex-start;
    gap: 2mm;
    padding: 2mm 2.5mm;
    background: var(--tone-bg);
    border-left: 0.8mm solid var(--tone);
    border-radius: 1mm;
    break-inside: avoid;
}

.malls-report__highlight--good { --tone: var(--malls-success); --tone-bg: var(--malls-success-bg); }
.malls-report__highlight--warn { --tone: var(--malls-warning); --tone-bg: var(--malls-warning-bg); }
.malls-report__highlight--bad { --tone: var(--malls-danger); --tone-bg: var(--malls-danger-bg); }

.malls-report__highlight .bx {
    font-size: 10pt;
    line-height: 1.25;
    color: var(--tone);
}

.malls-report__highlight p {
    font-size: 8pt;
}

/* Gráficos */
.malls-report__chart {
    height: 200px;
    margin-bottom: 2mm;
    break-inside: avoid;
    break-after: avoid;
}

.malls-report__chart--sm {
    height: 150px;
}

/* Tabelas */
.malls-report__table {
    width: 100%;
    border-collapse: collapse;
    font-size: 8pt;
    font-variant-numeric: tabular-nums;
}

.malls-report__table th,
.malls-report__table td {
    padding: 1.1mm 2mm;
    text-align: right;
    white-space: nowrap;
    border-bottom: 1px solid #e6ebf2;
}

.malls-report__table th:first-child {
    text-align: left;
}

.malls-report__table thead {
    display: table-header-group;
}

.malls-report__table thead th {
    padding-top: 0;
    font-size: 6.5pt;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--malls-text-secondary);
    border-bottom: 1px solid var(--malls-navy-800);
}

.malls-report__table tbody th {
    font-weight: 600;
    color: var(--malls-text);
}

.malls-report__table tbody tr:nth-child(even) {
    background: var(--malls-surface-muted);
}

.malls-report__table tr {
    break-inside: avoid;
}

.malls-report__table tfoot th,
.malls-report__table tfoot td {
    font-weight: 700;
    color: var(--malls-navy-900);
    background: var(--malls-blue-50);
    border-top: 1px solid var(--malls-navy-800);
    border-bottom: 0;
}

.malls-report__table--grid {
    table-layout: fixed;
    font-size: 7pt;
}

.malls-report__table--grid th:first-child {
    width: 21mm;
}

.malls-report__table--grid th,
.malls-report__table--grid td {
    padding: 1mm 1.2mm;
}

.malls-report__col-bar > span:not(.malls-report__bar) {
    display: inline-block;
    min-width: 10mm;
    margin-left: 1.5mm;
}

.malls-report__bar {
    display: inline-block;
    width: 14mm;
    height: 1.6mm;
    overflow: hidden;
    vertical-align: middle;
    background: var(--malls-surface-sunken);
    border-radius: 1mm;
}

.malls-report__col-fill {
    width: 45%;
}

.malls-report__col-fill .malls-report__bar {
    width: 100%;
}

.malls-report__bar > span {
    display: block;
    height: 100%;
    background: var(--malls-navy-800);
    border-radius: inherit;
}

.malls-report__rate {
    font-weight: 700;
}

.malls-report__rate--good { color: var(--malls-success-text); }
.malls-report__rate--warn { color: var(--malls-warning-text); }
.malls-report__rate--bad { color: var(--malls-danger-text); }

.malls-report__table .malls-report__empty {
    padding: 3mm 2mm;
    text-align: center;
    color: var(--malls-text-secondary);
}

.malls-report__notes {
    padding-top: 2mm;
    border-top: 1px solid var(--malls-border);
    font-size: 6.5pt;
    line-height: 1.5;
    color: var(--malls-text-secondary);
}

@page malls-report {
    size: A4 portrait;
    margin: 14mm 14mm 16mm;

    @bottom-left {
        content: "Shibata Malls · Relatório executivo";
        font-family: "Inter", system-ui, sans-serif;
        font-size: 7pt;
        color: #64748b;
    }

    @bottom-right {
        content: "Página " counter(page) " de " counter(pages);
        font-family: "Inter", system-ui, sans-serif;
        font-size: 7pt;
        color: #64748b;
    }
}

/*
 * Relatórios gerenciais (Faturamento, Inadimplência, Metragem): mesma base do relatório executivo,
 * montados por js/malls/report-print.js com os filtros e os dados da tela. "--wide" = A4 paisagem
 * (tabelas com muitas colunas).
 */
.malls-report--doc {
    page: malls-report-doc;
}
.malls-report--doc.malls-report--wide {
    page: malls-report-doc-wide;
    width: 269mm;
}
.malls-report--doc .malls-report__meta {
    grid-template-columns: repeat(var(--meta-cols, 4), minmax(0, 1fr));
}
.malls-report--doc .malls-report__kpis {
    grid-template-columns: repeat(var(--kpi-cols, 4), minmax(0, 1fr));
}
.malls-report__kpi-value--sm {
    font-size: 12.5pt;
}
.malls-report__kpi-value--xs {
    font-size: 11pt;
}
.malls-report__issued {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    margin-left: auto;
    font-size: 7pt;
    line-height: 1.35;
    text-align: right;
    color: var(--malls-text-secondary);
}
.malls-report__issued span:first-child {
    font-size: 6.5pt;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.malls-report__issued strong {
    font-size: 8.5pt;
    font-weight: 600;
    color: var(--malls-text);
}
.malls-report__summary {
    margin: -2mm 0 5mm;
    padding: 2.5mm 3.5mm;
    font-size: 8pt;
    color: var(--malls-text);
    background: var(--malls-blue-50);
    border-left: 0.8mm solid var(--malls-navy-800);
    border-radius: 1mm;
}
.malls-report__table td.is-text,
.malls-report__table th.is-text {
    text-align: left;
}
.malls-report__table td.is-center,
.malls-report__table th.is-center {
    text-align: center;
}
.malls-report__table--wrap td,
.malls-report__table--wrap th {
    white-space: normal;
}
.malls-report__table tbody td.is-negative {
    color: var(--malls-red-600);
}
.malls-report__table tbody td.is-positive {
    color: var(--malls-success);
}
.malls-report__table tbody tr.is-group th,
.malls-report__table tbody tr.is-group td {
    font-weight: 700;
    color: var(--malls-navy-900);
    background: var(--malls-surface-sunken);
}
.malls-report__count {
    font-size: 7.5pt;
    color: var(--malls-text-secondary);
}
.malls-report__figure {
    margin: 0 0 3mm;
    break-inside: avoid;
}
.malls-report__figure img {
    display: block;
    width: 100%;
    max-height: 95mm;
    object-fit: contain;
}
.malls-report__empty {
    padding: 6mm 0;
    text-align: center;
    color: var(--malls-text-secondary);
}
@page malls-report-doc {
    size: A4 portrait;
    margin: 14mm 14mm 16mm;
    @bottom-left {
        content: "Shibata Malls · Relatório gerencial";
        font-family: "Inter", system-ui, sans-serif;
        font-size: 7pt;
        color: #64748b;
    }
    @bottom-right {
        content: "Página " counter(page) " de " counter(pages);
        font-family: "Inter", system-ui, sans-serif;
        font-size: 7pt;
        color: #64748b;
    }
}
@page malls-report-doc-wide {
    size: A4 landscape;
    margin: 12mm 14mm 14mm;
    @bottom-left {
        content: "Shibata Malls · Relatório gerencial";
        font-family: "Inter", system-ui, sans-serif;
        font-size: 7pt;
        color: #64748b;
    }
    @bottom-right {
        content: "Página " counter(page) " de " counter(pages);
        font-family: "Inter", system-ui, sans-serif;
        font-size: 7pt;
        color: #64748b;
    }
}
@media print {
    /* Página com relatório: imprime somente o relatório */
    body:has(> .malls-report) > :not(.malls-report) {
        display: none !important;
    }

    body:has(> .malls-report) {
        margin: 0 !important;
        padding: 0 !important;
    }

    .malls-report {
        position: static;
        width: auto;
        visibility: visible;
        pointer-events: auto;
    }
}

/* ---------------------------------------------------------------- Páginas de erro (404/500) */
.malls-error-page {
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem 1rem;
    background: var(--malls-bg);
}

.malls-error-page__card {
    width: 100%;
    max-width: 520px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.malls-error-page__image,
.malls-loader__illustration {
    width: min(280px, 70vw);
    height: auto;
    margin-bottom: 1.25rem;
}

.malls-error-page__code {
    margin: 0 0 0.35rem;
    font-size: var(--malls-font-size-xs);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--malls-red-600);
}

.malls-error-page__title {
    margin: 0 0 0.5rem;
    font-size: var(--malls-font-size-2xl);
    font-weight: 800;
    color: var(--malls-navy-900);
}

.malls-error-page__text,
.malls-error-page__detail {
    margin: 0;
    color: var(--malls-text-secondary);
}

.malls-error-page__detail {
    margin-top: 0.5rem;
    font-size: var(--malls-font-size-sm);
}

.malls-error-page__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 1.5rem;
}

.malls-error-page__exception {
    max-width: 1100px;
    margin: 0 auto 2rem;
    padding: 0 1rem;
    overflow-x: auto;
}

.malls-error-page__brand {
    width: 150px;
    height: auto;
    margin-bottom: 1.5rem;
}

.malls-error-page__file {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    max-width: 100%;
    margin: 1rem 0 0;
    padding: 0.4rem 0.8rem;
    border: 1px solid var(--malls-border);
    border-radius: var(--malls-radius-pill);
    background: var(--malls-surface);
    font-size: var(--malls-font-size-sm);
    font-weight: 600;
    color: var(--malls-text);
    overflow-wrap: anywhere;
}

.malls-error-page__file .bx {
    flex: 0 0 auto;
    font-size: 1.15rem;
    color: var(--malls-red-600);
}

.malls-error-page__hint {
    margin: 1rem 0 0;
    font-size: var(--malls-font-size-sm);
    color: var(--malls-text-secondary);
}