/* Renderização de texto mais nítida (Inter) */
body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Números com largura fixa: alinha colunas de valores/datas nas listagens */
.table-neutral td, .table-neutral th,
.detail-value, .counter {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum";
}

/* Table */
.dataTables_length, .dataTables_filter, .dataTables_info, .dataTables_paginate {
    padding: 0.5rem 0 !important;
    font-size: 0.875rem !important;
}
.table-responsive {
    margin-top: 0px !important;
    margin-bottom: 0px !important;
}
.table-sm th, .table-sm td {
    padding: .3rem !important;
    font-size: 0.85em !important;
}
/* End Table */

label {
    color: #575d63;
    font-weight: bold;
    font-size: 0.9rem;
}
.form-control:disabled, .form-select:disabled {
    background-color: #e9ecef;
    opacity: 1;
}
.form-control, .form-select {
    color: #212529;
}
.form-label {
    margin-bottom: 0.1rem;
}
::placeholder {
    color: #c6c4c4 !important;
    opacity: 1 !important; /* Firefox */
}
.border {
    border: 1px solid #DDD !important;
}
.text-bg-default {
    background-color: #6c757d !important;
    color: #fff !important;
}

.item-name {font-size: 0.95rem;}
.cursor-pointer {cursor: pointer;}

/* Badge suave (fundo claro + texto colorido), alternativa mais discreta ao text-bg-* sólido.
   Fundo e texto calibrados para leitura sobre a zebra da tabela (2026-09-24); o ponto usa
   currentColor, então segue a cor do texto de cada status. */
.badge-subtle {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-weight: 700;
    font-size: 0.75rem;
    padding: 0.4rem 0.7rem;
    border: none;
    line-height: 1;
    white-space: nowrap;
}
.badge-subtle::before {
    content: "";
    width: 0.4rem;
    height: 0.4rem;
    border-radius: 50%;
    background-color: currentColor;
    flex-shrink: 0;
}
/* Médio: status em cabeçalho, fora de tabela. Um pouco mais baixo que o .segmented-control-sm (2rem)
   porque o fundo cheio do badge pesa mais que o trilho claro do controle. */
.badge-subtle.badge-md {
    height: 1.85rem;
    padding: 0 0.95rem;
    font-size: 0.8rem;
}
.badge-subtle.badge-success { background-color: #d4f3e0; color: #146c3a; }
.badge-subtle.badge-warning { background-color: #fdebc8; color: #8a5a00; }
.badge-subtle.badge-danger  { background-color: #fbd9d6; color: #a82a1f; }
.badge-subtle.badge-primary { background-color: #e3dcfa; color: #5a32a8; }
.badge-subtle.badge-secondary,
.badge-subtle.badge-default { background-color: #e2e6ec; color: #3d4550; }

/* =====================================================================
   Tabela padrão das listagens (.table-neutral)

   Valores copiados das opções B e C comparadas em Artifact (2026-09-24):
   https://claude.ai/artifact/LaEMir2DzFeAq515iAkrFa

   A variante vale para o sistema inteiro e vem da classe no <body>
   (config/ui.php → UI_TABLE_VARIANT no .env):
   - table-variant-striped (padrão) = B: cabeçalho colorido + zebra
   - table-variant-cards            = C: cada linha como bloco arredondado

   Os !important são necessários para ganhar do DataTables (bordas de 30% de
   preto, text-transform: capitalize), do Hope UI e do .table-sm global.
   ===================================================================== */

/* --- Base comum às duas variantes / variante B (striped) ---------------- */
table.table-neutral {
    border-collapse: separate !important;
    border-spacing: 0;
    border-bottom: 0 !important;
    /* Hope UI deixa o texto das linhas pares cinza (#8A92A6); manter uniforme */
    --bs-table-color: #232d42;
    --bs-table-striped-color: #232d42;
    --bs-table-hover-color: #232d42;
}
table.table-neutral > thead > tr > th {
    background-color: rgba(var(--bs-primary-rgb), 0.10) !important;
    color: color-mix(in srgb, var(--bs-primary) 72%, #000) !important;
    font-size: 0.76rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em;
    font-weight: 700;
    padding: 10px 10px !important;
    border: 0 !important;
    box-shadow: none !important;
    vertical-align: middle;
}
/* Espaço para as setas de ordenação do DataTables */
table.table-neutral > thead > tr > th.sorting,
table.table-neutral > thead > tr > th.sorting_asc,
table.table-neutral > thead > tr > th.sorting_desc {
    padding-right: 26px !important;
}
/* Hope UI dá fundo #f5f6fa ao <tr> do thead; aparece nos cantos arredondados e no modo escuro */
table.table-neutral > thead > tr { background: transparent !important; }
table.table-neutral > thead > tr > th:first-child { border-radius: 8px 0 0 8px; }
table.table-neutral > thead > tr > th:last-child  { border-radius: 0 8px 8px 0; }

table.table-neutral > tbody > tr > td {
    padding: 8px 10px !important;
    font-size: 0.85rem !important;
    color: #232d42;
    vertical-align: middle;
    background-color: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    transition: background-color .12s ease-in-out;
}
table.table-neutral > tbody > tr:nth-child(even) > td {
    background-color: #f7f8fb !important;
}
table.table-neutral > tbody > tr:hover > td {
    background-color: rgba(var(--bs-primary-rgb), 0.07) !important;
}
/* Linha que o wrapper do DataTables (dom "table-responsive border-bottom") desenha embaixo */
.table-responsive.border-bottom:has(> table.table-neutral) {
    border-bottom: 0 !important;
}
/* Badge compacto dentro da tabela para não aumentar a altura da linha */
table.table-neutral .badge-subtle {
    padding: 0.3rem 0.6rem;
    font-size: 0.72rem;
}

/* --- Variante C (cards) -------------------------------------------------- */
body.table-variant-cards .card:has(table.table-neutral) {
    background-color: #f7f8fb;
}
body.table-variant-cards table.table-neutral {
    border-spacing: 0 3px;
}
body.table-variant-cards table.table-neutral > tbody > tr > td,
body.table-variant-cards table.table-neutral > tbody > tr:nth-child(even) > td,
body.table-variant-cards table.table-neutral > tbody > tr:hover > td {
    background-color: #fff !important;
    padding: 10px 12px !important;
    border-top: 1px solid #eceef3 !important;
    border-bottom: 1px solid #eceef3 !important;
}
body.table-variant-cards table.table-neutral > tbody > tr > td:first-child {
    border-left: 1px solid #eceef3 !important;
    border-radius: 10px 0 0 10px;
}
body.table-variant-cards table.table-neutral > tbody > tr > td:last-child {
    border-right: 1px solid #eceef3 !important;
    border-radius: 0 10px 10px 0;
}
/* Hover: reforço de borda para dentro (inset) em cima/direita/baixo — não desloca o
   layout; a borda esquerda fica igual às das outras linhas */
body.table-variant-cards table.table-neutral > tbody > tr:hover > td {
    box-shadow: inset 0 1px 0 rgba(var(--bs-primary-rgb), .45),
                inset 0 -1px 0 rgba(var(--bs-primary-rgb), .45) !important;
}
body.table-variant-cards table.table-neutral > tbody > tr:hover > td:last-child {
    box-shadow: inset 0 1px 0 rgba(var(--bs-primary-rgb), .45),
                inset 0 -1px 0 rgba(var(--bs-primary-rgb), .45),
                inset -1px 0 0 rgba(var(--bs-primary-rgb), .45) !important;
}

/* Controles do DataTables no mesmo visual da barra de filtros (campos em pílula,
   paginação com botões redondos). Textos em pt-BR vêm de resources/js/datatables-defaults.js */
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter,
.dataTables_wrapper .dataTables_info {
    color: #8a92a6;
    font-size: 0.85rem !important;
}
.dataTables_wrapper .dataTables_length label,
.dataTables_wrapper .dataTables_filter label {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
    font-weight: 500;
    font-size: 0.85rem;
    color: #8a92a6;
}
.dataTables_wrapper .dataTables_length select,
.dataTables_wrapper .dataTables_filter input {
    height: 2.2rem;
    border: 1px solid #e3e6ec !important;
    border-radius: 999px !important;
    background-color: #f7f8fb !important;
    color: #232d42;
    font-size: 0.85rem;
    margin: 0 !important;
    transition: border-color .12s ease, box-shadow .12s ease, background-color .12s ease;
}
.dataTables_wrapper .dataTables_length select {
    appearance: none;
    -webkit-appearance: none;
    padding: 0 2rem 0 0.9rem !important;
    cursor: pointer;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%239aa0a6' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e") !important;
    background-repeat: no-repeat !important;
    background-position: right 0.75rem center !important;
    background-size: 11px 9px !important;
}
.dataTables_wrapper .dataTables_filter input {
    width: 260px;
    padding: 0 1rem 0 2.3rem !important;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3ccircle cx='7' cy='7' r='5' fill='none' stroke='%239aa0a6' stroke-width='2'/%3e%3cpath stroke='%239aa0a6' stroke-linecap='round' stroke-width='2' d='m11 11 3 3'/%3e%3c/svg%3e") !important;
    background-repeat: no-repeat !important;
    background-position: left 0.9rem center !important;
    background-size: 14px 14px !important;
}
.dataTables_wrapper .dataTables_length select:focus,
.dataTables_wrapper .dataTables_filter input:focus {
    outline: none;
    background-color: #fff !important;
    border-color: rgba(var(--bs-primary-rgb), 0.5) !important;
    box-shadow: 0 0 0 3px rgba(var(--bs-primary-rgb), 0.12);
}

.dataTables_wrapper .dataTables_paginate {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 0.25rem;
}
.dataTables_wrapper .dataTables_paginate > span {
    display: inline-flex;
    gap: 0.25rem;
}
.dataTables_wrapper .dataTables_paginate .paginate_button {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    min-width: 2.1rem;
    height: 2.1rem;
    padding: 0 0.6rem !important;
    margin: 0 !important;
    border: none !important;
    border-radius: 999px !important;
    background: transparent !important;
    color: #475069 !important;
    font-size: 0.85rem;
    font-weight: 600;
    box-shadow: none !important;
    transition: background-color .12s ease, color .12s ease;
}
.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    background: rgba(var(--bs-primary-rgb), 0.08) !important;
    color: var(--bs-primary) !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
    background: var(--bs-primary) !important;
    color: #fff !important;
    box-shadow: 0 2px 8px rgba(var(--bs-primary-rgb), 0.3) !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover {
    background: transparent !important;
    color: #c9ced6 !important;
    cursor: default;
}
.dataTables_wrapper .dataTables_paginate .ellipsis {
    color: #8a92a6;
    padding: 0 0.25rem;
}

@media (max-width: 767.98px) {
    /* Controles do DataTables empilhados e alinhados à esquerda no mobile */
    .dataTables_filter, .dataTables_length {
        text-align: left !important;
    }
    .dataTables_filter label, .dataTables_length label {
        width: 100%;
    }
    .dataTables_filter input {
        width: 100% !important;
        margin-left: 0 !important;
    }
    .dataTables_info, .dataTables_paginate {
        text-align: center !important;
        float: none !important;
    }
    .dataTables_wrapper .dataTables_paginate {
        justify-content: center;
        margin-top: 0.5rem;
    }
    /* Segmented control ocupa a largura toda no celular */
    .segmented-control {
        width: 100%;
    }
    .segmented-control .btn {
        flex: 1 1 0;
    }
}

/* Card mais suave: sombra leve em vez de borda dura */
.card-elevated {
    border: 1px solid #eceef1;
    box-shadow: 0 2px 10px rgba(20, 20, 43, 0.04);
    border-radius: 0.75rem;
}

/* Corrige herança de fonte em <button class="dropdown-item"> (ex. Excluir em <form>) */
button.dropdown-item {
    font-family: inherit;
    font-size: inherit;
    text-align: inherit;
    width: 100%;
}
.dropdown-menu .dropdown-item {
    font-size: 0.875rem;
    display: flex;
    align-items: center;
}
.dropdown-menu .dropdown-item i {
    width: 1rem;
    text-align: center;
}

/* Slider de indicadores (cards no topo das listagens) — repetido em várias views, consolidado aqui */
.text-bg-warning { background-color: #ffc107 !important; }
.card-slide { max-height: 95px; }
.d-slider1 .swiper-button.swiper-button-next,
.d-slider1 .swiper-button.swiper-button-prev { top: 60px; }

/* Grade de indicadores (ui.stat-tile): todos visíveis, quebra em 3/2/1 colunas conforme a largura */
.stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(10.5rem, 1fr));
    gap: 0.75rem;
}
.stat-tile {
    container-type: inline-size;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.6rem;
    color: var(--bs-body-color);
    position: relative;
    overflow: hidden;
    min-width: 0;
    padding: 0.85rem 1rem;
    background: var(--bs-body-bg);
    border-radius: 0.75rem;
    box-shadow: 0 2px 8px rgba(20, 30, 80, 0.12);
}
.stat-tile-row { display: flex; align-items: center; gap: 0.75rem; }
.stat-tile-icon {
    flex: none;
    display: grid;
    place-items: center;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 0.75rem;
    font-size: 1.15rem;
}
.stat-tile-body { flex: 1 1 auto; min-width: 0; }
.stat-tile-value { font-size: 1.25rem; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; white-space: nowrap; }
.stat-tile-value small { font-size: 0.85rem; font-weight: 600; color: var(--bs-secondary-color); }
/*
 * Valores longos (moeda): a fonte é calculada para o número caber ao lado do ícone.
 * Largura útil = largura do card (cqi) menos ícone e espaços (3.5rem); --chars = nº de caracteres do valor.
 * Limites: 1.25rem (igual aos demais) e 0.85rem (piso legível).
 */
.stat-tile-value--compact { font-size: clamp(0.85rem, calc((100cqi - 3.5rem) / (var(--chars, 8) * 0.66)), 1.25rem); }
.stat-tile-label { margin-top: 0.1rem; line-height: 1.2; font-size: 0.8rem; font-weight: 500; color: var(--bs-secondary-color); }
/* Barra de progresso colada na base do card: não altera a altura, então todos os cards ficam iguais */
.stat-tile-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 5px; background: var(--bs-border-color); }
.stat-tile-bar i { display: block; height: 100%; background: var(--bs-info); border-radius: 0 9px 9px 0; transition: width 0.3s; }

/* Informação em pílula no banner-header (ex. data de hoje): mesmo vidro do botão, sem ação */
.banner-badge { display: inline-flex; align-items: center; gap: 0.5rem; height: 2.4rem; padding: 0 1.1rem; border-radius: 50rem; background-color: rgba(255, 255, 255, 0.15); color: #fff; font-size: 0.875rem; font-weight: 600; white-space: nowrap; }
@media (max-width: 575.98px) {
    .banner-badge { height: 2rem; padding: 0 0.85rem; font-size: 0.8125rem; margin-top: 0.5rem; }
}

/* Botão de ação primária do banner-header (sobre fundo colorido do tema) */
/* Mesmo formato do .btn-cta (pílula + ícone em círculo), mas translúcido para contrastar com o banner */
a.btn.btn-banner-action,
.btn.btn-banner-action {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    height: 2.4rem;
    background-color: rgba(255, 255, 255, 0.15) !important;
    color: #fff !important;
    font-weight: 600;
    font-size: 0.875rem;
    padding: 0 1.35rem 0 0.4rem;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.55) !important;
    text-decoration: none;
    white-space: nowrap;
    transition: transform .12s ease;
}
a.btn.btn-banner-action:hover,
.btn.btn-banner-action:hover,
a.btn.btn-banner-action:focus,
.btn.btn-banner-action:focus {
    background-color: rgba(255, 255, 255, 0.25) !important;
    color: #fff !important;
    border-color: #fff !important;
}

/* Campo de detalhe (label em cima, valor embaixo) usado nas telas/modais de visualização */
.detail-field {
    margin-bottom: 1.25rem;
}
.detail-label {
    display: block;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 600;
    color: #9aa0a6;
    margin-bottom: 0.15rem;
}
.detail-value {
    display: block;
    font-size: 0.95rem;
    color: #212529;
}

/* Título de seção (ui.section-title) */
.header-title .card-title {
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 700;
    color: var(--bs-primary);
    margin-bottom: 0;
}
.header-title .card-title i {
    margin-right: 0.4rem;
    opacity: 0.85;
}

/* Modal com mais respiro */
.modal-header {
    padding: 1.25rem 1.75rem;
    border-bottom: 1px solid #eceef1;
}

/* Nome do casal: reduz em telas menores para não quebrar em muitas linhas */
.detail-couple-name {
    font-size: 1.35rem;
    word-break: break-word;
}

@media (max-width: 767.98px) {
    .detail-couple-name {
        font-size: 1.1rem;
    }
    .detail-field {
        margin-bottom: 1rem;
    }
    .detail-label {
        font-size: 0.7rem;
    }
    .detail-value {
        font-size: 0.9rem;
    }
}

@media (max-width: 575.98px) {
    .modal-header {
        padding: 1rem 1.1rem;
    }
    .modal-body {
        padding: 1.1rem;
    }
    .modal-title {
        font-size: 1rem;
    }
    /* Modal ocupa quase toda a tela no celular */
    .modal-dialog {
        margin: 0.5rem;
    }
    /* ...exceto o de tela cheia (ex. formulário de inscrição), que encosta nas bordas */
    .modal-dialog.modal-fullscreen-md-down {
        margin: 0;
    }
}
.modal-body {
    padding: 1.75rem;
}
.modal-content {
    border: none;
    border-radius: 0.9rem;
    box-shadow: 0 12px 40px rgba(20, 20, 43, 0.16);
}
.modal-title {
    font-weight: 700;
}

/* Segmented control (ex. filtro Participantes / Equipe) */
.segmented-control {
    display: inline-flex;
    background-color: #eceef3;
    border-radius: 999px;
    padding: 0.25rem;
    gap: 0.25rem;
}
.segmented-control .btn {
    border: none;
    border-radius: 999px;
    font-weight: 600;
    color: #6c757d;
    background-color: transparent;
    text-decoration: none;
}
.segmented-control .btn.active,
.segmented-control .btn-check:checked + .btn {
    background-color: var(--bs-primary);
    color: #fff;
    box-shadow: 0 1px 4px rgba(20, 20, 43, 0.15);
}
/* Versão de formulário: dois radio .btn-check + label (ex. Participante / Equipe) */
.segmented-control .btn-check:focus-visible + .btn {
    outline: 2px solid rgba(var(--bs-primary-rgb), 0.45);
    outline-offset: 1px;
}
/* Opções com a mesma largura, independentemente do texto */
.segmented-control-equal {
    display: inline-grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
}
.segmented-control-equal .btn {
    padding-left: 1rem;
    padding-right: 1rem;
}
/* Compacto (2rem de altura total): para ficar ao lado de um .badge-md, ex. cabeçalho de formulário */
.segmented-control-sm {
    padding: 0.2rem;
    gap: 0.2rem;
}
.segmented-control-sm .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 1.6rem;
    padding-top: 0;
    padding-bottom: 0;
    font-size: 0.8rem;
}

/* Botão de chamada principal (ex. "Cadastrar" no cabeçalho de página): pílula com ícone em círculo */
.btn.btn-cta {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    height: 2.4rem; /* mesma altura dos campos da barra de filtros */
    border-radius: 999px;
    padding: 0 1.35rem 0 0.4rem;
    font-size: 0.875rem;
    font-weight: 600;
    white-space: nowrap;
    box-shadow: 0 2px 8px rgba(var(--bs-primary-rgb), 0.25);
    transition: transform .12s ease, box-shadow .12s ease;
}
.btn.btn-cta:hover,
.btn.btn-cta:focus-visible {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(var(--bs-primary-rgb), 0.32);
}
.btn-cta-icon {
    width: 1.7rem;
    height: 1.7rem;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(255, 255, 255, 0.22);
    font-size: 0.7rem;
}

/* Botão secundário em pílula (ex. "Cancelar" ao lado do .btn-cta no rodapé de modal) */
.btn.btn-pill {
    height: 2.4rem;
    border-radius: 999px;
    padding: 0 1.5rem;
    font-size: 0.875rem;
    font-weight: 600;
}

/* Switch um pouco maior que o padrão do Bootstrap (2em × 1em), alinhado ao centro do rótulo */
.form-switch {
    padding-left: 3.1em;
    min-height: 1.4em;
}
.form-switch .form-check-input {
    width: 2.6em;
    height: 1.4em;
    margin-left: -3.1em;
    margin-top: 0;
    cursor: pointer;
}
.form-switch .form-check-label {
    line-height: 1.4em;
    cursor: pointer;
}

/* O customizer do Hope UI pinta de primária todo .form-check-input:focus (com !important), então
   um switch/checkbox desmarcado ficava colorido até perder o foco. Desmarcado volta ao visual
   normal na hora; o foco continua indicado pelo anel (box-shadow). */
.form-check-input:focus:not(:checked):not(:indeterminate) {
    background-color: #fff !important;
}
.form-switch .form-check-input:focus:not(:checked) {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgba%280, 0, 0, 0.25%29'/%3e%3c/svg%3e");
}

/* Rodapé de formulário (ui.form-actions): Cancelar + Salvar à direita */
.form-actions {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 0.5rem;
    margin-top: 1rem;
    padding-top: 1.25rem;
    border-top: 1px solid #eceef1;
}

/* Ação dentro de formulário (ex. "Adicionar filho"): tom suave da cor primária, em pílula */
.btn.btn-soft {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    gap: 0.35rem;
    white-space: nowrap;
    border: none;
    border-radius: 999px;
    padding: 0.35rem 0.85rem;
    font-weight: 600;
    color: var(--bs-primary);
    background-color: rgba(var(--bs-primary-rgb), 0.1);
}
.btn.btn-soft:hover,
.btn.btn-soft:focus-visible {
    color: #fff;
    background-color: var(--bs-primary);
}

/* Menu de ações rotulado ("Ações ▾"), ex. topo do modal de detalhes: .btn-soft compacto.
   Altura igual ao .badge-md para manter a proporção com nome e badges. Segue a cor do tema. */
.btn.btn-soft.btn-menu {
    height: 1.85rem;
    padding: 0 0.95rem;
    font-size: 0.8rem;
}
.btn-menu-caret {
    font-size: 0.6rem;
    transition: transform .15s ease;
}
/* Aberto: só reforça o fundo suave (não vira bloco sólido como no hover) */
.btn.btn-soft.btn-menu.show {
    color: var(--bs-primary);
    background-color: rgba(var(--bs-primary-rgb), 0.2);
}
.btn.btn-menu.show .btn-menu-caret {
    transform: rotate(180deg);
}

/* Remover linha em campo repetível: ícone discreto que fica vermelho no hover */
.btn.btn-icon-remove {
    width: 2.4rem;
    height: 2.4rem;
    padding: 0;
    border: none;
    border-radius: 50%;
    color: #9aa0a6;
    background-color: transparent;
}
.btn.btn-icon-remove:hover,
.btn.btn-icon-remove:focus-visible {
    color: #dc3545;
    background-color: rgba(220, 53, 69, 0.1);
}

/* Linhas de campo repetível (ex. filhos): mais juntas, label só na primeira a partir do md.
   Nas demais o label fica oculto só visualmente, para leitor de tela continuar lendo. */
.child-row .form-group {
    margin-bottom: 0.5rem;
}
@media (min-width: 768px) {
    .child-row + .child-row .form-label {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
    }
}
@media (max-width: 767.98px) {
    /* No celular cada filho vira um bloco; separa um do outro */
    .child-row + .child-row {
        border-top: 1px dashed #e2e6ec;
        padding-top: 0.5rem;
    }
}

/* Aviso de lista vazia em campo repetível; some quando existe ao menos uma linha */
.children-empty {
    font-size: 0.85rem;
    color: #9aa0a6;
    margin: 0.25rem 0 0.5rem;
}
[data-children-wrapper]:has(.child-row) + .children-empty {
    display: none;
}

.modal-footer {
    padding: 1rem 1.75rem;
    border-top: 1px solid #eceef1;
    gap: 0.5rem;
}
.modal-footer > * {
    margin: 0;
}
@media (max-width: 575.98px) {
    .modal-footer {
        padding: 0.75rem 1.1rem;
    }
}

/* Toasts (ui.toasts + resources/js/toast.js): canto superior direito, empilhados */
.toast-stack {
    position: fixed;
    top: 1.25rem;
    right: 1.25rem;
    z-index: 1090; /* acima de modal */
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    width: 26rem;
    max-width: calc(100vw - 2rem);
    pointer-events: none;
}
/* Cada tipo define: cor forte (ícone/título/barra), fundo do ícone, fundo do card e borda.
   O fundo do card é uma camada sobre o branco, para o toast nunca ficar transparente. */
.toast.toast-ds {
    --toast-color: #3d4550;
    --toast-soft: #e2e6ec;
    --toast-bg: #f6f7f9;
    --toast-border: #e2e6ec;
    position: relative;
    width: 100%;
    overflow: hidden;
    pointer-events: auto;
    background-color: #fff;
    background-image: linear-gradient(var(--toast-bg), var(--toast-bg));
    border: 1px solid var(--toast-border);
    border-radius: 0.85rem;
    box-shadow: 0 10px 28px rgba(20, 20, 43, 0.1);
}
.toast.toast-ds-success { --toast-color: #17804a; --toast-soft: #d4f3e0; --toast-bg: #f2fbf6; --toast-border: #cdeedb; }
.toast.toast-ds-error   { --toast-color: #b3362b; --toast-soft: #fbdcd8; --toast-bg: #fef5f4; --toast-border: #f7d3ce; }
.toast.toast-ds-warning { --toast-color: #a86b00; --toast-soft: #fdebc8; --toast-bg: #fffaf0; --toast-border: #f8e3b8; }
.toast.toast-ds-info    { --toast-color: #1f6fd1; --toast-soft: #d9e8fc; --toast-bg: #f3f8fe; --toast-border: #d2e3f9; }

.toast-ds-body {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.9rem 0.9rem 1rem 1rem;
}
.toast-ds-icon {
    flex-shrink: 0;
    width: 2.1rem;
    height: 2.1rem;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--toast-color);
    background-color: var(--toast-soft);
}
.toast-ds-text {
    flex: 1 1 auto;
    min-width: 0;
    padding-top: 0.1rem;
}
.toast-ds-title {
    display: block;
    font-size: 0.9rem;
    color: var(--toast-color);
}
.toast-ds-message {
    margin: 0.1rem 0 0;
    font-size: 0.85rem;
    color: #4f5663;
    white-space: pre-line; /* quebras de linha da mensagem sem precisar de nl2br */
    word-break: break-word;
}
.toast-ds-close {
    flex-shrink: 0;
    font-size: 0.7rem;
    margin-top: 0.2rem;
    opacity: 0.45;
}
.toast-ds-close:hover { opacity: 0.8; }

/* Toast que não some sozinho (erro): fechar em destaque, já que é a única saída */
.toast-ds.is-persistent .toast-ds-close {
    width: 1.9rem;
    height: 1.9rem;
    padding: 0;
    margin-top: 0;
    border-radius: 50%;
    opacity: 0.7;
    background-color: var(--toast-soft);
    background-size: 0.65rem;
}
.toast-ds.is-persistent .toast-ds-close:hover,
.toast-ds.is-persistent .toast-ds-close:focus-visible {
    opacity: 1;
}

/* Barra de tempo restante: esvazia no mesmo tempo do autohide */
.toast-ds-progress {
    position: absolute;
    left: 0;
    bottom: 0;
    height: 3px;
    width: 100%;
    background-color: var(--toast-color);
    opacity: 0.35;
    transform-origin: left;
    animation: toast-ds-countdown var(--toast-delay, 5000ms) linear forwards;
}
.toast-ds.is-paused .toast-ds-progress {
    animation-play-state: paused;
}
@keyframes toast-ds-countdown {
    from { transform: scaleX(1); }
    to   { transform: scaleX(0); }
}

/* Entrada deslizando da direita */
.toast.toast-ds.showing,
.toast.toast-ds.show {
    animation: toast-ds-in 0.25s ease-out;
}
@keyframes toast-ds-in {
    from { transform: translateX(1.5rem); opacity: 0; }
    to   { transform: translateX(0); opacity: 1; }
}

@media (max-width: 575.98px) {
    .toast-stack {
        top: 0.75rem;
        right: 1rem;
        left: 1rem;
        width: auto;
        max-width: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .toast.toast-ds.showing,
    .toast.toast-ds.show { animation: none; }
}

/* Barra de filtros das listagens: busca + seletores + segmented control */
.filter-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6rem;
}
/* Segmented control sempre à direita e na mesma altura dos campos da barra */
.filter-bar .segmented-control {
    margin-left: auto;
    height: 2.4rem;
    align-items: stretch;
}
.filter-bar .segmented-control .btn {
    display: flex;
    align-items: center;
    padding-top: 0;
    padding-bottom: 0;
}
/* Seletor de campanha (form GET + combobox): ocupa a largura livre até um limite */
.filter-bar > form {
    flex: 1 1 320px;
    max-width: 440px;
}
.filter-bar > form .combobox,
.filter-bar > form .filter-select {
    width: 100%;
}
.filter-search {
    position: relative;
    display: flex;
    align-items: center;
    flex: 1 1 300px;
    margin: 0;
    /* label global do custom.css deixa negrito/cinza — neutralizar aqui */
    font-weight: normal;
}
.filter-search i {
    position: absolute;
    left: 1rem;
    color: #9aa0a6;
    font-size: 0.85rem;
    pointer-events: none;
}
.filter-search input,
.filter-select {
    height: 2.4rem;
    border: 1px solid #e3e6ec;
    border-radius: 999px;
    background-color: #f7f8fb;
    color: #232d42;
    font-size: 0.875rem;
    transition: border-color .12s ease, box-shadow .12s ease, background-color .12s ease;
}
.filter-search input {
    width: 100%;
    padding: 0 1rem 0 2.5rem;
}
.filter-search input::-webkit-search-cancel-button { cursor: pointer; }
.filter-select {
    appearance: none;
    -webkit-appearance: none;
    padding: 0 2.4rem 0 1rem;
    cursor: pointer;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%239aa0a6' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 1rem center;
    background-size: 12px 10px;
}
.filter-search input:focus,
.filter-select:focus {
    outline: none;
    background-color: #fff;
    border-color: rgba(var(--bs-primary-rgb), 0.5);
    box-shadow: 0 0 0 3px rgba(var(--bs-primary-rgb), 0.12);
}

/* Combobox (select com busca) — resources/js/combobox.js, ativado por data-combobox */
.combobox {
    position: relative;
    display: flex;
}
.combobox-toggle {
    width: 100%;
    min-width: 12rem;
    text-align: left;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.combobox-toggle[aria-expanded="true"] {
    background-color: #fff;
    border-color: rgba(var(--bs-primary-rgb), 0.5);
    box-shadow: 0 0 0 3px rgba(var(--bs-primary-rgb), 0.12);
}
.combobox-panel {
    position: absolute;
    top: calc(100% + 0.4rem);
    left: 0;
    z-index: 1050;
    width: max(100%, 16rem);
    padding: 0.5rem;
    background-color: #fff;
    border: 1px solid #eceef3;
    border-radius: 0.9rem;
    box-shadow: 0 12px 32px rgba(20, 20, 43, 0.14);
}
.combobox-search {
    width: 100%;
    height: 2.2rem;
    padding: 0 0.9rem;
    margin-bottom: 0.4rem;
    border: 1px solid #e3e6ec;
    border-radius: 999px;
    background-color: #f7f8fb;
    font-size: 0.85rem;
    color: #232d42;
}
.combobox-search:focus {
    outline: none;
    background-color: #fff;
    border-color: rgba(var(--bs-primary-rgb), 0.5);
}
.combobox-list {
    list-style: none;
    margin: 0;
    padding: 0;
    max-height: 15rem;
    overflow-y: auto;
}
.combobox-option {
    padding: 0.45rem 0.75rem;
    border-radius: 0.5rem;
    font-size: 0.875rem;
    color: #232d42;
    cursor: pointer;
}
.combobox-option.is-active {
    background-color: rgba(var(--bs-primary-rgb), 0.08);
}
.combobox-option.is-selected {
    color: var(--bs-primary);
    font-weight: 600;
}
/* Texto do botão e das opções corta com reticências; ícone opcional (data-icon na <option>) */
.combobox-toggle { display: flex; align-items: center; gap: 0.5rem; }
.combobox-toggle-text,
.combobox-option-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.combobox-option { display: flex; align-items: center; gap: 0.5rem; }
.combobox-option.is-disabled { opacity: .45; cursor: not-allowed; }
.combobox-ic {
    flex: none;
    width: 1.625rem;
    height: 1.625rem;
    border-radius: 0.5rem;
    display: grid;
    place-items: center;
    color: var(--combobox-ic-color, #64748b);
    background: color-mix(in srgb, var(--combobox-ic-color, #64748b) 13%, transparent);
}
.combobox-ic .ms { width: 1.0625rem; height: 1.0625rem; }
/* Em formulário (form-select): o ícone não aumenta a altura do campo */
.form-select.combobox-toggle { padding-top: 0.3125rem; padding-bottom: 0.3125rem; }
/* Subcategoria do lançamento: texto e ícone no tamanho dos chips de categoria logo acima */
#entryFormModal .combobox-toggle { font-size: 0.8125rem; font-weight: 600; padding-left: 0.5rem; }
#entryFormModal .combobox-toggle .combobox-ic { width: 1.5rem; height: 1.5rem; border-radius: 0.4375rem; }
#entryFormModal .combobox-toggle .combobox-ic .ms { width: 1rem; height: 1rem; }
#entryFormModal .combobox-option { font-size: 0.8125rem; font-weight: 600; }
/* "Nenhuma" (valor vazio) no tom de placeholder */
#entryFormModal .combobox-toggle.is-empty { color: var(--bs-secondary-color, #8a92a6); font-weight: 400; }
.combobox-empty {
    padding: 0.6rem 0.75rem;
    font-size: 0.85rem;
    color: #8a92a6;
}

@media (max-width: 767.98px) {
    .filter-search { flex-basis: 100%; }
    .filter-bar .combobox { flex: 1 1 40%; min-width: 0; }
    .combobox-toggle { min-width: 0; }
    .filter-select { flex: 1 1 40%; min-width: 0; }
    .filter-bar .segmented-control { width: 100%; }
}

/* Botão de ação discreto (usado no dropdown de Ações das listagens) */
.btn-action-trigger {
    appearance: none;
    -webkit-appearance: none;
    width: 24px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    margin: 0;
    border-radius: 50%;
    background-color: transparent;
    border: none;
    outline: none;
    color: #6c757d;
    font-size: 0.9rem;
    line-height: 1;
}
.btn-action-trigger:hover,
.btn-action-trigger:focus {
    background-color: #f1f2f4;
    color: #212529;
    box-shadow: none;
}
.sidebar-base .nav-item {margin-top: 0;}
        
/* Buttons */
.btn-xs {
    padding: .25rem .4rem !important;
    line-height: .9 !important;
    border-radius: .2rem !important;
    font-size: 0.70em !important;
}
.fs-1 { font-size: 2.5rem; }
.fs-2 { font-size: 2rem; }
.fs-3 { font-size: 1.75rem; }
.fs-4 { font-size: 1.5rem; }
.fs-5 { font-size: 1.25rem; }
.fs-6 { font-size: 1rem; }
.fs-7 { font-size: .875rem; } 
.fs-8 { font-size: .75rem; }
.fs-9 { font-size: .625rem; }
.fs-10 { font-size: .5rem; }

/* Footer */
.by-tecledev {
    color: #3B82F6;
}
.by-tecledev:hover {
    color: blue
}

/* =====================================================================
   Minhas Despesas (Fase 1a — estrutura: banner, navegação de mês, barra fixa, seletor de modo)
   Banner: mesmo fundo do banner-header padrão do sistema (iq-header-img, imagens que trocam de
   cor com o customizer), com navegação de mês + saldo dentro dele, sem título (como no
   protótipo) — decisão do
   usuário em 2026-09-24, revisando a 1ª versão (gradiente CSS próprio) e a 2ª (banner-header
   genérico sem conteúdo dentro). Referência visual: docs/my-expenses/reference/preview.html
   (estrutura/tipografia do protótipo, cor de fundo do sistema).
   ===================================================================== */
/* O .content-inner do layout tem mt-n5 (sobe por cima do banner-header padrão) e padding
   lateral. Esta tela não usa o banner-header padrão, então anula o padding e vai de borda a
   borda com margem negativa — mas mantém o mesmo mt-n5 no conteúdo seguinte
   (.my-expenses-content), replicando o padrão: o conteúdo sobe e sobrepõe a base do banner,
   como em qualquer outra tela do sistema — decisão do usuário em 2026-09-25. */
.my-expenses {
    position: relative;
    margin: 2rem calc(var(--bs-gutter-x, 0.75rem) * -3) 0;
}
/* Mesmo breakpoint do padding lateral do .content-inner no tema (24px abaixo de 1200px, 36px a
   partir dele). Com 768px aqui, entre 768 e 1199px sobravam 12px e abria scroll horizontal. */
@media (max-width: 1199.98px) {
    .my-expenses { margin-inline: calc(var(--bs-gutter-x, 0.75rem) * -2); }
}

/* Banner: reaproveita o iq-header-img do tema (mesmas imagens do banner-header padrão),
   com a mesma altura fixa de 310px do banner-header genérico do sistema — decisão do
   usuário em 2026-09-25, revertendo o ajuste anterior que encolhia a imagem ao tamanho do
   conteúdo (deixava o banner bem mais baixo que o resto do sistema). */
.my-expenses-banner {
    position: relative;
    overflow: hidden;
    border-radius: 0 0 1rem 1rem; /* mesmo arredondamento visível do banner-header padrão */
    height: 310px; /* altura fixa e previsível: o conteúdo interno é absoluto e não participa
                       do fluxo, então não empurra a section independente do que ele tiver */
}
.my-expenses-banner .iq-header-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 310px;
    border-radius: inherit;
}
.my-expenses-banner-content {
    position: absolute;
    inset: 0;
    z-index: 1;
    padding: 1.375rem 1.5rem;
}
@media (max-width: 575.98px) {
    .my-expenses-banner-content { padding: 1.125rem 1rem 4rem; }
}

.my-expenses-eyebrow {
    font-size: 0.6875rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    font-weight: 600;
    color: rgba(255, 255, 255, .72);
}

/* Navegação de mês */
.my-expenses-month-nav {
    display: flex;
    align-items: center;
    gap: 0.375rem;
}
.my-expenses-arrow {
    width: 2.125rem;
    height: 2.125rem;
    border-radius: 50%;
    border: 0;
    background: rgba(255, 255, 255, .14);
    color: #fff;
    display: grid;
    place-items: center;
    transition: background .15s;
    flex: none;
}
.my-expenses-arrow:hover,
.my-expenses-arrow:focus-visible { background: rgba(255, 255, 255, .26); color: #fff; }
.my-expenses-month-label {
    font-size: 1.0625rem;
    font-weight: 700;
    min-width: 9.375rem;
    text-align: center;
    letter-spacing: -.01em;
}
@media (max-width: 575.98px) {
    .my-expenses-arrow { width: 2.5rem; height: 2.5rem; }
    /* Celular: navegação de ponta a ponta — seta em cada canto, mês no centro (pedido do
       usuário em 2026-09-25). Alvos maiores e mais fáceis de alcançar com o polegar. */
    .my-expenses-month-nav { width: 100%; justify-content: space-between; }
    .my-expenses-month-label { flex: 1; min-width: 0; }
}

/* Base do banner: saldo do mês (esquerda) + seletor de modo (direita), lado a lado no PC,
   empilhado no celular. */
.my-expenses-banner-bottom {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-top: 0.875rem;
}
@media (max-width: 575.98px) {
    .my-expenses-banner-bottom { align-items: stretch; }
}

/* Saldo do mês */
.my-expenses-balance {
    font-size: 2.375rem;
    font-weight: 800;
    letter-spacing: -.03em;
    line-height: 1.05;
    margin-top: 0.375rem;
    color: #fff;
}
.my-expenses-balance small {
    font-size: 1.25rem;
    font-weight: 700;
    opacity: .8;
    margin-right: 0.25rem;
}
.my-expenses-balance-sub {
    margin-top: 0.375rem;
    color: rgba(255, 255, 255, .8);
    font-size: 0.8125rem;
}
@media (max-width: 575.98px) {
    .my-expenses-balance { font-size: 2rem; }
}

/* Conteúdo abaixo do banner: sobe e sobrepõe a base do banner (mesmo mt-n5 que o .content-inner
   do layout usa sobre o banner-header padrão do sistema — decisão do usuário em 2026-09-25).
   Layout de duas colunas, cada uma com sua própria barra/coluna lateral começando no mesmo topo. */
.my-expenses-content {
    padding: 0.375rem 1.5rem 1.75rem;
    margin-top: -8.75rem;
    position: relative;
    z-index: 2;
}
@media (max-width: 575.98px) {
    /* No celular o conteúdo do banner é mais alto (chips quebram linha), sobra menos azul vazio
       embaixo — sobreposição menor para não subir por cima do saldo. Com as abas fora do banner
       (2026-09-25), elas abrem o conteúdo logo abaixo do saldo. */
    .my-expenses-content { padding: 0.375rem 0.75rem 1.25rem; margin-top: -6.25rem; }
}

/* Seletor de modo (Extrato/Painel/Agenda): navegação entre páginas, não filtro. Fica na grade do
   conteúdo (área "tabs" do .me-layout), na mesma linha da barra de filtro e com a largura do
   card lateral (21.25rem) — decisão do usuário em 2026-09-25 (antes ficava na base do banner).
   Continua sobre o azul do banner, então usa o trilho translúcido dos .me-chip: o
   .segmented-control padrão (fundo #eceef3, texto cinza) não tem contraste ali.
   Altura igual à do filtro de tipo da barra (segmento de 2rem + trilho de 0.25rem = 40px). */
.me-tabs {
    grid-area: tabs;
    justify-self: end;
    width: 21.25rem;
    max-width: 100%;
}
.me-tabs .segmented-control {
    width: 100%;
    padding: 0.25rem;
    gap: 0.125rem;
    background-color: rgba(255, 255, 255, .12);
}
.me-tabs .segmented-control .btn {
    flex: 1 1 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 2rem;
    padding: 0 0.875rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: rgba(255, 255, 255, .85);
}
.me-tabs .segmented-control .btn.active,
.me-tabs .segmented-control .btn-check:checked + .btn {
    background-color: #fff;
    color: var(--bs-primary);
}
@media (max-width: 575.98px) {
    /* Largura total no celular: os 21.25rem fixos passavam da tela em aparelhos de ~360px */
    .me-tabs { width: 100%; }
}

/* Barra de ferramentas: sticky, sem card em volta — busca, filtro e botão flutuam direto sobre a
   tela (decisão do usuário em 2026-09-25; antes tinha fundo translúcido com blur). Sem padding
   nem margem: altura igual à das abas ao lado, e o espaço abaixo vem do row-gap da grade
   (.me-layout). Item próprio da grade (área "toolbar"): sticky pela altura toda do conteúdo, na
   largura da coluna esquerda. */
.my-expenses-toolbar {
    grid-area: toolbar;
    display: flex;
    gap: 0.625rem;
    align-items: center;
    flex-wrap: wrap;
    position: sticky;
    top: 0;
    z-index: 5;
    margin: 0;
    padding: 0;
}
.my-expenses-search {
    flex: 1 1 220px;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: #fff;
    border: 1px solid #e6e9f0;
    border-radius: 999px;
    padding: 0 0.875rem;
    height: 2.5rem;
}
.my-expenses-search .ms { color: #8a92a6; }
.my-expenses-search input {
    border: 0;
    outline: 0;
    background: transparent;
    width: 100%;
    font: inherit;
    /* O <label> em volta vem em negrito do tema; a busca é texto comum de 14px, como no protótipo */
    font-size: 0.875rem;
    font-weight: 400;
    color: var(--bs-heading-color);
}
/* O input não tem contorno próprio (outline: 0): o foco aparece na pílula inteira */
.my-expenses-search:focus-within { box-shadow: 0 0 0 2px rgba(var(--bs-primary-rgb), .5); }
/* Segmentos da barra no tamanho do protótipo (32px, texto 13px), para busca + tipo + modo +
   botão principal caberem numa linha no PC. Não altera o .segmented-control global. */
.my-expenses-toolbar .segmented-control { padding: 0.25rem; gap: 0.125rem; }
.my-expenses-toolbar .segmented-control .btn {
    display: inline-flex;
    align-items: center;
    height: 2rem;
    padding: 0 0.875rem;
    font-size: 0.8125rem;
}
.my-expenses-new-btn { order: 4; white-space: nowrap; }
.my-expenses-new-btn .btn-cta-icon .ms { width: 1.125rem; height: 1.125rem; }

@media (max-width: 860px) {
    /* .btn.btn-cta define display: inline-flex; precisa de especificidade maior para sumir */
    .my-expenses-toolbar .btn.my-expenses-new-btn { display: none; }
    .my-expenses-search { height: 2.75rem; flex-basis: 100%; }
}

/* Botão flutuante (celular): mesma ação do "Novo lançamento" da toolbar */
.my-expenses-fab {
    display: none;
    position: fixed;
    right: 1rem;
    bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 1.125rem;
    background: var(--bs-primary);
    color: #fff;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 22px rgba(var(--bs-primary-rgb), .45);
    z-index: 6;
}
.my-expenses-fab:hover,
.my-expenses-fab:focus-visible { color: #fff; }
.my-expenses-fab .ms { width: 1.75rem; height: 1.75rem; }
@media (max-width: 860px) {
    .my-expenses-fab { display: inline-flex; }
}

/* Atalhos de mês (chips), no banner ao lado da navegação */
.me-chips {
    display: flex;
    gap: 0.375rem;
    overflow-x: auto;
    scrollbar-width: none;
}
.me-chips::-webkit-scrollbar { display: none; }
.me-chip {
    border: 0;
    border-radius: 999px;
    padding: 0.375rem 0.8125rem;
    font-size: 0.78125rem;
    font-weight: 600;
    background: rgba(255, 255, 255, .12);
    color: rgba(255, 255, 255, .85);
    white-space: nowrap;
    transition: background .15s;
    text-decoration: none;
}
.me-chip:hover,
.me-chip:focus-visible { background: rgba(255, 255, 255, .22); color: rgba(255, 255, 255, .95); }
.me-chip[aria-current="true"] { background: #fff; color: var(--bs-primary); }
.my-expenses-banner-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}
@media (max-width: 575.98px) {
    .me-chips { width: 100%; }
    /* Celular: a fileira ocupa a largura toda, com o 1º chip alinhado à seta da esquerda e o
       último à da direita (mesma largura da navegação de mês acima) — pedido do usuário em
       2026-09-25. Chips com largura igual dividindo o espaço, texto centralizado. */
    .me-chip { flex: 1 1 0; text-align: center; }
}

/* Grade dos modos. Extrato (padrão): 1ª linha barra de filtro | abas (mesma altura, 40px);
   abaixo lista | coluna lateral, que começam alinhadas porque o row-gap é um só. Espaço abaixo
   da barra igual ao do Painel (1rem) — pedido do usuário em 2026-09-25. O Painel mantém a 1ª
   linha e troca o resto (bloco "modo Painel", mais abaixo). */
.me-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 21.25rem;
    grid-template-rows: auto 1fr;
    grid-template-areas:
        "toolbar tabs"
        "main aside";
    column-gap: 1.25rem;
    row-gap: 1rem;
    align-items: start;
}
.me-main { grid-area: main; min-width: 0; }
.me-aside {
    grid-area: aside;
    display: grid;
    gap: 0.625rem;
    position: sticky;
    top: 4.5rem;
}
@media (max-width: 991.98px) {
    /* minmax(0, 1fr), não 1fr: 1fr não deixa a coluna ficar mais estreita que o conteúdo
       (busca + filtros), e em ~360px a lista passava da tela, com scroll horizontal. */
    .me-layout {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: auto;
        grid-template-areas: "tabs" "aside" "toolbar" "main";
        row-gap: 0.625rem;
    }
    .me-aside { position: static; }
}

/* Cartões de Receitas/Despesas */
/* Receitas/Despesas empilhados na coluna lateral (PC); lado a lado só no celular, onde a
   coluna sobe para cima da lista com largura total (ver .me-aside no media query abaixo). */
.me-kpis { display: grid; grid-template-columns: 1fr; gap: 0.625rem; }
@media (max-width: 991.98px) {
    .me-kpis { grid-template-columns: 1fr 1fr; }
}
/* Hope UI dá margin-bottom: 2rem para todo .card — some com o gap do grid e some do próprio
   layout (não é do design system, é do .card do tema). Zerado nos 3 cards deste layout.
   border-radius também sobrescrito: o padrão do tema é 0.5rem (--bs-card-border-radius), mas a
   referência visual (docs/my-expenses/reference/preview.html, .card) usa 16px — decisão do
   usuário em 2026-09-25. */
.me-kpi,
.me-cats,
.me-list {
    margin-bottom: 0;
    border-radius: 1rem;
}
.me-kpi { padding: 1rem 1.125rem; display: grid; gap: 0.625rem; }
.me-kpi-head { display: flex; align-items: center; gap: 0.625rem; }
.me-kpi-value { font-size: 1.375rem; font-weight: 700; letter-spacing: -.02em; color: var(--bs-heading-color); }
.me-kpi-foot {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 0.25rem 0.5rem;
    font-size: 0.78125rem;
    color: var(--bs-body-color, #8a92a6);
    opacity: .8;
}
.me-kpi-foot span { white-space: nowrap; }
/* Valor já recebido/pago em destaque, no tom escuro dos títulos (protótipo: .foot b = --text) */
.me-kpi-foot b { color: var(--bs-heading-color); font-weight: 600; }
.me-eyebrow {
    font-size: 0.6875rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    font-weight: 600;
    color: var(--bs-body-color, #8a92a6);
    opacity: .72;
}

/* Barra de progresso (pago/recebido, maiores gastos) */
.me-bar { height: 0.375rem; border-radius: 999px; background: #eceef3; overflow: hidden; }
.me-bar i { display: block; height: 100%; border-radius: 999px; transition: width .5s cubic-bezier(.2, .8, .2, 1); }

/* Maiores gastos: <details> nativo. No PC vem sempre aberto (padding fixo, chevron/summary sem
   destaque de clique); no celular nasce fechado (my-expenses.js remove o atributo `open` na
   carga) para não empurrar a lista para baixo da rolagem — antes sumia de vez no celular
   (scope.md, "Regras de layout"), revisado em 2026-09-25 para virar disclosure em vez de
   esconder a informação. */
.me-cats { padding: 1rem 1.125rem; }
.me-cats-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    cursor: pointer;
    list-style: none;
}
.me-cats-summary::-webkit-details-marker { display: none; }
.me-cats h3 { margin: 0; font-size: 0.875rem; font-weight: 700; color: var(--bs-heading-color); }
.me-cats-chevron {
    display: none;
    color: var(--bs-body-color, #6c757d);
    transition: transform .15s;
}
.me-cats-chevron .ms { width: 1.25rem; height: 1.25rem; }
.me-cats[open] .me-cats-chevron { transform: rotate(180deg); }
.me-cats-body { display: grid; gap: 0.75rem; margin-top: 0.75rem; }
@media (max-width: 991.98px) {
    .me-cats-summary { cursor: pointer; }
    .me-cats-chevron { display: inline-flex; }
}
.me-cat { display: grid; gap: 0.375rem; font-size: 0.8125rem; }
.me-cat-top { display: flex; justify-content: space-between; gap: 0.5rem; color: var(--bs-heading-color); }
.me-cat-top b { font-weight: 600; }

/* Ícone de categoria (lista e cartões) */
.me-cat-ic {
    width: 2.375rem;
    height: 2.375rem;
    border-radius: 0.75rem;
    display: grid;
    place-items: center;
    flex: none;
    color: var(--me-cat-color, #64748b);
    background: color-mix(in srgb, var(--me-cat-color, #64748b) 13%, transparent);
}
.me-cat-ic .ms { width: 1.25rem; height: 1.25rem; }
.me-cat-ic-sm { width: 2.125rem; height: 2.125rem; border-radius: 0.625rem; }

/* Lista do extrato, agrupada por dia */
.me-list { padding: 0.5rem; }
.me-day-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 0.375rem 0.875rem;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--bs-body-color, #8a92a6);
    opacity: .8;
    text-transform: uppercase;
    letter-spacing: .06em;
}
.me-day-head .me-day-total { text-transform: none; letter-spacing: 0; font-weight: 600; opacity: 1; }
/* Tipografia da linha no tamanho do protótipo (base 14px, altura de linha ~1.25): o 16px/1.5 do
   tema deixava descrição e valor maiores e cada linha ~10px mais alta — 1f, 2026-09-25. */
.me-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.6875rem 0.875rem;
    border-radius: 0.75rem;
    transition: background .15s;
    cursor: pointer;
    font-size: 0.875rem;
    line-height: 1.25;
}
.me-row:hover { background: #f1f3f8; }
.me-row-main { flex: 1; min-width: 0; }
/* Descrição e valor são o texto "de destaque" da linha — var(--bs-heading-color), o mesmo tom
   escuro que os h1-h6 do tema já usam, em vez do cinza de --bs-body-color (pensado para texto
   secundário). Data/categoria (.me-row-meta) continuam discretas, sem mudança — decisão do
   usuário em 2026-09-25, corrigindo o uso do token, não uma paleta nova (o valor já é do tema). */
.me-row-desc { font-weight: 600; color: var(--bs-heading-color); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.me-row-meta { color: var(--bs-body-color, #8a92a6); opacity: .8; font-size: 0.78125rem; margin-top: 0.125rem; white-space: nowrap; overflow: hidden; display: flex; align-items: center; gap: 0.25rem; }
/* "Principal › Sub" (category-path): cada parte corta com reticências; a mais longa encolhe
   mais e a sub mantém um mínimo visível, para não sumir atrás de uma principal longa (2g). */
.me-meta-day, .me-meta-sep { flex: none; }
.me-meta-cat, .me-meta-sub { flex: 0 1 auto; min-width: 3em; overflow: hidden; text-overflow: ellipsis; }
/* Agenda no celular: data + principal já ocupam a linha; a sub fica no Extrato, no Painel e
   na edição (a busca continua encontrando por ela) */
@media (max-width: 575.98px) {
    .me-agenda-row .me-meta-sep,
    .me-agenda-row .me-meta-sub { display: none; }
}
.me-meta-sep { width: 0.875rem; height: 0.875rem; opacity: .7; }
.me-row-right { text-align: right; flex: none; display: grid; gap: 0.25rem; justify-items: end; }
.me-amount { font-weight: 700; color: var(--bs-heading-color); white-space: nowrap; }
.me-amount.in { color: var(--bs-success); }
.me-inst {
    font-size: 0.6875rem;
    font-weight: 700;
    color: var(--bs-primary);
    background: rgba(var(--bs-primary-rgb), .1);
    border-radius: 0.375rem;
    padding: 0.0625rem 0.375rem;
    margin-left: 0.375rem;
    vertical-align: 1px;
}
/* Recorrente: só o ícone, na cor do "N/total" do parcelado (o texto fica em title e visually-hidden) */
.me-rec { color: var(--bs-primary); margin-left: 0.375rem; }
.me-rec .ms { width: 0.9375rem; height: 0.9375rem; vertical-align: -2px; }

/* Pílula de situação: só o que exige atenção ganha cor (guidelines, "Só o que exige atenção
   ganha pílula colorida") */
.me-pill { display: inline-flex; align-items: center; gap: 0.3125rem; border-radius: 999px; padding: 0.125rem 0.5625rem 0.125rem 0.4375rem; font-size: 0.71875rem; font-weight: 600; white-space: nowrap; }
.me-pill::before { content: ""; width: 0.375rem; height: 0.375rem; border-radius: 50%; background: currentColor; }
.me-pill.ok { color: var(--bs-body-color, #8a92a6); opacity: .8; background: transparent; padding-right: 0; }
.me-pill.ok::before { background: var(--bs-success); }
.me-pill.late { color: var(--bs-danger); background: rgba(var(--bs-danger-rgb), .1); }
.me-pill.soon { color: var(--bs-warning); background: rgba(var(--bs-warning-rgb), .12); }
.me-pill.wait { color: var(--bs-body-color, #8a92a6); opacity: .8; background: #f1f3f8; }

/* Celular: menos respiro lateral e cartões Receitas/Despesas compactos (lado a lado em ~180px
   cada). Vale para Extrato e Agenda, que usam a mesma .me-row — 1f, 2026-09-25. O texto fica no
   mesmo tamanho do PC: o aumento do modo "phone" do protótipo (15/13/14.5/12px, chips e filtro
   maiores) foi testado e revertido — o usuário achou grande no celular. */
@media (max-width: 575.98px) {
    .me-list { padding: 0.25rem; }
    .me-row { padding: 0.625rem 0.5rem; gap: 0.625rem; }
    .me-kpi { padding: 0.75rem; }
    .me-kpi-value { font-size: 1rem; }
    .me-kpi-foot { flex-direction: column; gap: 0.125rem; }
}

.me-empty { text-align: center; color: var(--bs-body-color, #8a92a6); opacity: .8; padding: 2.5rem 1rem; }
.me-empty .ms { width: 2.5rem; height: 2.5rem; display: block; margin: 0 auto 0.5rem; opacity: .5; }

/* =====================================================================
   Minhas Despesas — modo Painel (etapa 1d, 2026-09-25)
   partials/dashboard (indicadores + gráficos) e partials/dashboard-table. Referência: bloco
   "B — Painel" de docs/my-expenses/reference/preview.html.
   ===================================================================== */

/* Visibilidade por modo (data-mode na raiz, definido pelo my-expenses.js). Sem data-mode ainda
   (antes do JS), vale o Extrato. */
.me-dashboard,
.me-dashboard-table { display: none; }
.my-expenses[data-mode="dashboard"] .me-dashboard { display: grid; gap: 1rem; grid-area: dash; }
.my-expenses[data-mode="dashboard"] .me-dashboard-table { display: block; }
.my-expenses[data-mode="dashboard"] #my-expenses-statement-container,
.my-expenses[data-mode="dashboard"] .me-aside { display: none; }
/* Painel: mesma 1ª linha do Extrato (barra de filtro | abas — decisão do usuário em 2026-09-25,
   no lugar da barra entre gráficos e tabela da referência); abaixo indicadores e gráficos, e a
   tabela na largura toda. No celular segue a ordem do Extrato: cards, barra, lista. */
.my-expenses[data-mode="dashboard"] .me-layout {
    grid-template-rows: auto;
    grid-template-areas:
        "toolbar tabs"
        "dash dash"
        "main main";
    row-gap: 1rem;
}
@media (max-width: 991.98px) {
    .my-expenses[data-mode="dashboard"] .me-layout {
        grid-template-areas: "tabs" "dash" "toolbar" "main";
        row-gap: 0.625rem;
    }
}

/* Indicadores: 3 colunas no PC, empilhados no celular */
.me-dash-kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.me-dash-kpi {
    margin-bottom: 0;
    border-radius: 1rem;
    padding: 1rem 1.125rem 0.75rem;
    display: grid;
    gap: 0.25rem;
    overflow: hidden;
}
.me-dash-kpi-value { font-size: 1.5rem; font-weight: 700; letter-spacing: -.02em; color: var(--bs-heading-color); }
.me-dash-kpi-value.in { color: var(--bs-success); }
.me-dash-kpi-value.out { color: var(--bs-danger); }
.me-dash-kpi-value.balance { color: var(--bs-primary); }
.me-delta { font-size: 0.75rem; font-weight: 600; }
.me-delta.good { color: var(--bs-success); }
.me-delta.bad { color: var(--bs-danger); }
.me-delta.flat { color: var(--bs-body-color, #8a92a6); opacity: .8; }

.me-spark { display: block; width: 100%; height: 2.375rem; margin-top: 0.375rem; overflow: visible; }
.me-spark-area { fill: var(--me-spark-color); fill-opacity: .1; }
.me-spark-line { fill: none; stroke: var(--me-spark-color); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.me-spark-dot { stroke: var(--me-spark-color); stroke-width: 7; stroke-linecap: round; }
.me-spark-dot-ring { stroke: var(--bs-card-bg, #fff); stroke-width: 11; stroke-linecap: round; }

/* Fluxo de caixa + rosca */
.me-dash-grid { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 1rem; }
.me-dash-panel { margin-bottom: 0; border-radius: 1rem; padding: 1.125rem; }
.me-dash-panel h3 { margin: 0 0 0.125rem; font-size: 0.9375rem; font-weight: 700; color: var(--bs-heading-color); }
.me-dash-sub { color: var(--bs-body-color, #8a92a6); opacity: .8; font-size: 0.78125rem; }
.me-dash-panel-head { display: flex; justify-content: space-between; gap: 0.625rem; flex-wrap: wrap; }
.me-legend { display: flex; gap: 0.875rem; font-size: 0.75rem; color: var(--bs-body-color, #8a92a6); }
.me-legend i { display: inline-block; width: 0.5625rem; height: 0.5625rem; border-radius: 3px; margin-right: 0.3125rem; vertical-align: -1px; }
.me-legend i.in { background: var(--bs-success); }
.me-legend i.out { background: var(--bs-danger); }

.me-flow-chart { display: block; width: 100%; height: auto; margin-top: 0.625rem; }
.me-flow-grid { stroke: #e6e9f0; }
.me-flow-grid.dashed { stroke-dasharray: 3 4; }
.me-flow-tick { font-size: 10.5px; fill: var(--bs-body-color, #8a92a6); }
.me-flow-col { cursor: pointer; outline: 0; }
.me-flow-hit { fill: transparent; transition: fill .15s; }
.me-flow-col:hover .me-flow-hit,
.me-flow-col.is-current .me-flow-hit { fill: #f1f3f8; }
.me-flow-col:focus-visible .me-flow-hit { fill: #f1f3f8; stroke: var(--bs-primary); stroke-width: 2; }
.me-flow-bar { fill-opacity: .45; }
.me-flow-col.is-current .me-flow-bar { fill-opacity: 1; }
.me-flow-bar.in { fill: var(--bs-success); }
.me-flow-bar.out { fill: var(--bs-danger); }
.me-flow-month { font-size: 11.5px; font-weight: 500; fill: var(--bs-body-color, #8a92a6); }
.me-flow-col.is-current .me-flow-month { font-weight: 700; fill: var(--bs-heading-color); }

.me-donut-wrap { display: grid; grid-template-columns: 9.375rem minmax(0, 1fr); gap: 1rem; align-items: center; margin-top: 0.75rem; }
.me-donut { width: 9.375rem; height: 9.375rem; }
.me-donut-track,
.me-donut-arc { fill: none; stroke-width: 18; }
.me-donut-track { stroke: #f1f3f8; }
.me-donut-arc.rest { stroke: #d5d9e2; }
.me-donut-label { font-size: 10.5px; fill: var(--bs-body-color, #8a92a6); }
.me-donut-total { font-size: 14px; font-weight: 700; fill: var(--bs-heading-color); }
.me-donut-legend { display: grid; gap: 0.5rem; font-size: 0.78125rem; color: var(--bs-heading-color); }
.me-donut-legend div { display: grid; grid-template-columns: 0.625rem minmax(0, 1fr) auto; gap: 0.5rem; align-items: center; }
.me-donut-legend i { width: 0.625rem; height: 0.625rem; border-radius: 3px; }
.me-donut-legend i.rest { background: #d5d9e2; }
.me-donut-legend span:first-of-type { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.me-donut-legend span:last-child { font-weight: 600; }

/* Tabela do mês */
.me-dash-table-card { margin-bottom: 0; border-radius: 1rem; overflow: hidden; }
.me-dash-table-wrap { overflow-x: auto; }
.me-dash-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 0.875rem; }
.me-dash-table th {
    text-align: left;
    font-size: 0.6875rem;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--bs-body-color, #8a92a6);
    font-weight: 600;
    padding: 0.625rem 0.875rem;
    border-bottom: 1px solid #eef0f4;
}
.me-dash-table td { padding: 0.6875rem 0.875rem; border-bottom: 1px solid #eef0f4; vertical-align: middle; }
.me-dash-table tbody tr:last-child td { border-bottom: 0; }
.me-dash-table tbody tr { cursor: pointer; transition: background .15s; }
.me-dash-table tbody tr:hover { background: #f8f9fb; }
.me-dash-table .r { text-align: right; }
.me-dash-date { color: var(--bs-body-color, #8a92a6); white-space: nowrap; }
.me-dash-cat { color: var(--bs-body-color, #8a92a6); }
.me-dash-sub { display: block; font-size: 0.75rem; opacity: .8; }
.me-dash-desc { display: flex; align-items: center; gap: 0.625rem; font-weight: 600; color: var(--bs-heading-color); }
.me-dash-desc .me-cat-ic { width: 1.875rem; height: 1.875rem; border-radius: 0.5625rem; }
.me-dash-desc .me-cat-ic .ms { width: 1.0625rem; height: 1.0625rem; }

@media (max-width: 991.98px) {
    .me-dash-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 767.98px) {
    .me-dash-kpis { grid-template-columns: minmax(0, 1fr); gap: 0.625rem; }
    .me-dashboard { gap: 0.625rem; }
    .me-dash-table thead,
    .me-dash-table .hide-sm { display: none; }
    .me-dash-table td { padding: 0.625rem 0.5rem; }
    /* A descrição absorve a falta de espaço (reticências); sem isso a tabela passava ~8px do
       card em 400px e o valor ficava cortado atrás da rolagem horizontal. */
    .me-dash-desc-cell { width: 100%; max-width: 0; }
    .me-dash-desc-text { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .me-dash-table td.r { white-space: nowrap; }
}
@media (max-width: 575.98px) {
    .me-donut-wrap { grid-template-columns: 6.875rem minmax(0, 1fr); }
    .me-donut { width: 6.875rem; height: 6.875rem; }
}

/* =====================================================================
   Minhas Despesas — modo Agenda (etapa 1e, 2026-09-25)
   partials/agenda (seções), partials/agenda-calendar e o resumo no banner (partials/banner).
   Referência: bloco "C — Agenda" de docs/my-expenses/reference/preview.html.
   ===================================================================== */

/* Visibilidade: o resumo da Agenda (anel + números) troca de lugar com o saldo do banner; as
   seções entram no lugar da lista e o calendário no lugar da coluna lateral, na mesma grade do
   Extrato (calendário à direita, alinhado às abas — no protótipo fica à esquerda, mas aqui a
   coluna lateral é sempre a da direita). No celular o calendário sobe para cima da lista. */
.me-agenda-hero,
.me-agenda-container,
.me-agenda-cal { display: none; }
.my-expenses[data-mode="agenda"] .me-agenda-hero { display: grid; }
.my-expenses[data-mode="agenda"] .my-expenses-balance-block,
.my-expenses[data-mode="agenda"] #my-expenses-statement-container,
.my-expenses[data-mode="agenda"] .me-aside { display: none; }
.my-expenses[data-mode="agenda"] .me-agenda-container { display: block; }
.my-expenses[data-mode="agenda"] .me-agenda-cal {
    display: block;
    grid-area: aside;
    position: sticky;
    top: 4.5rem;
}
@media (max-width: 991.98px) {
    .my-expenses[data-mode="agenda"] .me-agenda-cal { position: static; }
}

/* Resumo no banner: anel de % das contas pagas + falta pagar / a receber / saldo previsto */
.me-agenda-hero {
    grid-template-columns: auto minmax(0, 1fr);
    gap: 1.375rem;
    align-items: center;
    color: #fff;
}
.me-ring { width: 6.5rem; height: 6.5rem; position: relative; flex: none; }
.me-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.me-ring svg circle:last-child { transition: stroke-dasharray .6s; }
.me-ring-txt { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; }
.me-ring-txt b { font-size: 1.5rem; font-weight: 800; letter-spacing: -.02em; display: block; line-height: 1.1; }
.me-ring-txt span { font-size: 0.6875rem; opacity: .8; display: block; max-width: 4.5rem; line-height: 1.2; }
.me-agenda-facts {
    display: grid;
    grid-template-columns: repeat(3, auto);
    gap: 0.5rem 1.75rem;
    justify-content: start;
    margin-top: 0.625rem;
}
.me-agenda-fact-val { font-size: 1.1875rem; font-weight: 700; letter-spacing: -.01em; white-space: nowrap; }
.me-agenda-fact-lbl { font-size: 0.75rem; color: rgba(255, 255, 255, .75); }
@media (max-width: 575.98px) {
    /* Celular: anel menor à esquerda e os três números lado a lado, divididos por igual — no
       protótipo o anel fica em cima, centralizado, mas não cabe na altura fixa do banner. */
    .me-agenda-hero { gap: 0.875rem; }
    .me-ring { width: 5.25rem; height: 5.25rem; }
    .me-ring-txt b { font-size: 1.125rem; }
    .me-ring-txt span { font-size: 0.5625rem; max-width: 3.5rem; }
    .me-agenda-facts { grid-template-columns: repeat(3, auto); justify-content: space-between; gap: 0.25rem 0.625rem; }
    .me-agenda-fact-val { font-size: 0.8125rem; }
    .me-agenda-fact-lbl { font-size: 0.6875rem; }
}

/* Calendário do mês */
.me-cal { margin-bottom: 0; border-radius: 1rem; padding: 0.875rem 0.875rem 0.75rem; }
.me-cal-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.625rem; min-height: 1.5rem; }
.me-cal-head b { font-size: 0.875rem; color: var(--bs-heading-color); }
.me-cal-head .my-expenses-eyebrow { color: var(--bs-body-color, #8a92a6); opacity: .8; }
.me-cal-clear { border: 0; background: none; padding: 0; color: var(--bs-primary); font-weight: 600; font-size: 0.78125rem; }
.me-cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 0.25rem; }
.me-cal-wd { text-align: center; font-size: 0.6875rem; font-weight: 600; color: var(--bs-body-color, #8a92a6); opacity: .8; padding-bottom: 0.25rem; }
.me-cal-day {
    border: 0;
    background: transparent;
    border-radius: 0.625rem;
    padding: 0.375rem 0 0.3125rem;
    display: grid;
    justify-items: center;
    gap: 0.1875rem;
    min-height: 2.75rem;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--bs-heading-color);
    font-variant-numeric: tabular-nums;
    transition: background .15s;
}
.me-cal-day:hover { background: #f1f3f8; }
.me-cal-day.muted { color: var(--bs-body-color, #8a92a6); font-weight: 500; }
.me-cal-day.today { box-shadow: inset 0 0 0 1.5px var(--bs-primary); }
.me-cal-day[aria-pressed="true"] { background: var(--bs-primary); color: #fff; }
.me-cal-dots { display: flex; gap: 0.1875rem; height: 0.3125rem; }
.me-cal-dots i { width: 0.3125rem; height: 0.3125rem; border-radius: 50%; }
.me-cal-dots i.in { background: var(--bs-success); }
.me-cal-dots i.open { background: var(--bs-danger); }
.me-cal-dots i.done { background: #8a92a6; }
.me-cal-day[aria-pressed="true"] .me-cal-dots i { box-shadow: 0 0 0 1px #fff; }

/* Seções (Vencidos, Próximos 7 dias, Mais adiante, Concluídos) */
.me-agenda { display: grid; gap: 1rem; }
.me-agenda-sec { margin-bottom: 0; border-radius: 1rem; padding: 0.5rem; }
.me-agenda-sec[hidden] { display: none; }
.me-agenda-sec-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 0.75rem 0.375rem;
}
.me-agenda-sec-head h3 {
    margin: 0;
    font-size: 0.875rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--bs-heading-color);
}
.me-agenda-sec-head h3 .ms { width: 1.25rem; height: 1.25rem; display: block; }
.me-agenda-count { font-size: 0.6875rem; font-weight: 700; border-radius: 999px; padding: 0.0625rem 0.5rem; background: #f1f3f8; color: var(--bs-body-color, #8a92a6); }
.me-agenda-total { font-size: 0.8125rem; font-weight: 600; color: var(--bs-body-color, #8a92a6); white-space: nowrap; }

/* Concluídos: <details>, a própria linha do título é o botão Mostrar/Ocultar */
.me-agenda-done > summary { list-style: none; cursor: pointer; }
.me-agenda-done > summary::-webkit-details-marker { display: none; }
.me-agenda-toggle { display: flex; align-items: center; gap: 0.125rem; font-size: 0.78125rem; font-weight: 600; color: var(--bs-body-color, #8a92a6); }
.me-agenda-toggle .ms { width: 1.125rem; height: 1.125rem; transition: transform .2s; }
.me-agenda-toggle-hide,
.me-agenda-done[open] .me-agenda-toggle-show { display: none; }
.me-agenda-done[open] .me-agenda-toggle-hide { display: inline; }
.me-agenda-done[open] .me-agenda-toggle .ms { transform: rotate(180deg); }
.me-agenda-done[open] > summary { padding-bottom: 0.375rem; }
.me-agenda-done:not([open]) > summary { padding-bottom: 0.625rem; }

/* Linha da Agenda: .me-row do Extrato + botão redondo de marcar como pago */
.me-check {
    width: 1.625rem;
    height: 1.625rem;
    border-radius: 50%;
    border: 2px solid #e6e9f0;
    background: transparent;
    display: grid;
    place-items: center;
    flex: none;
    padding: 0;
    color: transparent;
    transition: all .2s;
}
.me-check .ms { width: 1rem; height: 1rem; }
.me-check:hover,
.me-check:focus-visible { border-color: var(--bs-success); color: var(--bs-success); }
.me-check.on { background: var(--bs-success); border-color: var(--bs-success); color: #fff; }
.me-agenda-row.done .me-row-desc {
    color: var(--bs-body-color, #8a92a6);
    text-decoration: line-through;
    text-decoration-color: #e6e9f0;
}
.me-agenda .me-empty { margin-bottom: 0; border-radius: 1rem; }
@media (max-width: 575.98px) {
    .me-agenda { gap: 0.625rem; }
}

/* =====================================================================
   Minhas Despesas — acessibilidade (etapa 1f, 2026-09-25)
   ===================================================================== */

/* Foco visível pelo teclado em tudo que é clicável na tela (o tema zera o outline de vários
   desses elementos). Sobre o banner azul o anel é branco; no resto, o azul do tema a 50%, como no
   protótipo. */
.my-expenses :is(.me-row, .me-dash-table tr, .me-cal-day, .me-check, .me-cal-clear, .me-agenda-done > summary, .me-cats-summary):focus-visible {
    outline: 2px solid rgba(var(--bs-primary-rgb), .5);
    outline-offset: 2px;
}
.my-expenses :is(.me-chip, .my-expenses-arrow):focus-visible {
    outline: 2px solid rgba(255, 255, 255, .8);
    outline-offset: 2px;
}
.my-expenses-fab:focus-visible { outline: 3px solid rgba(var(--bs-primary-rgb), .4); outline-offset: 3px; }

/* Movimento reduzido: sem transições nem animações na tela (barras, anel, hover, a entrada do
   banner do tema). */
@media (prefers-reduced-motion: reduce) {
    .my-expenses *,
    .my-expenses *::before,
    .my-expenses-fab {
        transition: none !important;
        animation: none !important;
    }
}

/* =====================================================================
   Dashboard (tela inicial) — 2026-09-30
   ===================================================================== */

/* Indicador como link (ui.stat-tile com 'url') */
a.stat-tile { text-decoration: none; border: 1px solid transparent; transition: transform 0.15s, border-color 0.15s; }
a.stat-tile:hover { color: var(--bs-body-color); transform: translateY(-2px); border-color: rgba(var(--bs-primary-rgb), 0.35); }
a.stat-tile:focus-visible { outline: 2px solid rgba(var(--bs-primary-rgb), .5); outline-offset: 2px; }

/* Grade de indicadores com legenda curta, sempre em uma linha. No desktop divide a largura pelo
   número de indicadores que o usuário pode ver; abaixo disso, 3 e 2 colunas. */
.stat-grid.stat-grid-single-line { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
/* Ícone e número na primeira linha; a legenda ocupa a largura toda embaixo, para caber sem cortar */
.stat-grid-single-line .stat-tile-row { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 0.6rem 0.75rem; }
.stat-grid-single-line .stat-tile-body { display: contents; }
.stat-grid-single-line .stat-tile-value { font-size: 1.6rem; text-align: right; }
.stat-grid-single-line .stat-tile-label { grid-column: 1 / -1; margin-top: 0; font-size: 0.8125rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 1199.98px) {
    .stat-grid.stat-grid-single-line { grid-auto-flow: row; grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 575.98px) {
    .stat-grid.stat-grid-single-line { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Espaço entre os cards igual ao da grade de indicadores (o tema usa 2rem) */
.dashboard .card { margin-bottom: 1rem; }
.dashboard .row > [class*="col-"] > .card { height: calc(100% - 1rem); }

/* Lista com altura máxima e rolagem suave (Campanhas em andamento e Atalhos) */
.dash-scroll { max-height: 24rem; overflow-x: hidden; overflow-y: auto; scroll-behavior: smooth; overscroll-behavior: contain; margin: 0 -0.6rem; padding: 0 0.6rem; scrollbar-width: thin; scrollbar-color: rgba(var(--bs-primary-rgb), 0.3) transparent; }
.dash-scroll::-webkit-scrollbar { width: 6px; }
.dash-scroll::-webkit-scrollbar-thumb { background: rgba(var(--bs-primary-rgb), 0.3); border-radius: 99px; }
.dash-scroll:focus-visible { outline: 2px solid rgba(var(--bs-primary-rgb), .5); outline-offset: 2px; border-radius: 0.5rem; }
.dash-scroll > .dash-campaign:first-child { padding-top: 0.25rem; }

/* Campanhas em andamento */
.dash-campaign { display: block; color: var(--bs-body-color); text-decoration: none; padding: 0.85rem 0.6rem; margin: 0 -0.6rem; border-radius: 0.65rem; transition: background-color 0.15s; }
.dash-campaign:hover { color: var(--bs-body-color); background-color: rgba(var(--bs-primary-rgb), 0.06); }
.dash-campaign + .dash-campaign { border-top: 1px dashed #e3e6ec; border-radius: 0 0 0.65rem 0.65rem; }
.dash-campaign-name { font-weight: 600; font-size: 0.95rem; color: var(--bs-heading-color, #232d42); }
.dash-campaign-when { color: var(--bs-secondary-color); font-size: 0.8rem; }
.dash-meters { display: grid; grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr)); gap: 0.6rem 1rem; margin-top: 0.55rem; }
.dash-meter-label { display: flex; justify-content: space-between; gap: 0.5rem; font-size: 0.76rem; font-weight: 500; color: var(--bs-secondary-color); }
.dash-meter-label b { color: var(--bs-heading-color, #232d42); font-weight: 600; font-variant-numeric: tabular-nums; }
.dash-meter-track { height: 7px; border-radius: 99px; background: #e9ecf3; margin-top: 0.3rem; overflow: hidden; }
.dash-meter-track i { display: block; height: 100%; border-radius: 99px; }

/* Atalhos */
.dash-shortcuts { display: flex; flex-direction: column; gap: 0.5rem; }
.dash-shortcuts-wide { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }
.dash-shortcut { display: flex; align-items: center; gap: 0.75rem; padding: 0.6rem 0.7rem; border: 1px solid #eceef1; border-radius: 0.65rem; color: var(--bs-body-color); text-decoration: none; transition: background-color 0.15s, border-color 0.15s; }
.dash-shortcut:hover { color: var(--bs-body-color); background-color: rgba(var(--bs-primary-rgb), 0.08); border-color: transparent; }
.dash-shortcut-icon { flex: none; display: grid; place-items: center; width: 2.1rem; height: 2.1rem; border-radius: 50%; background: var(--bs-primary); color: #fff; font-size: 0.85rem; }
.dash-shortcut-text { min-width: 0; line-height: 1.25; }
.dash-shortcut-text b { display: block; font-weight: 600; font-size: 0.88rem; color: var(--bs-heading-color, #232d42); }
.dash-shortcut-text span { color: var(--bs-secondary-color); font-size: 0.76rem; }
.dash-shortcut-arrow { margin-left: auto; color: var(--bs-secondary-color); font-size: 0.75rem; }
:is(.dash-campaign, .dash-shortcut):focus-visible { outline: 2px solid rgba(var(--bs-primary-rgb), .5); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
    a.stat-tile, .dash-campaign, .dash-shortcut { transition: none; }
    .dash-scroll { scroll-behavior: auto; }
    a.stat-tile:hover { transform: none; }
}

/* =====================================================================
   Foto do usuário e campo de senha (cadastro de usuários e Meu Perfil) — 2026-09-30
   ===================================================================== */
.avatar-upload { display: flex; flex-direction: column; align-items: center; padding: 1rem 0 1.5rem; margin-bottom: 0.5rem; border-bottom: 1px solid #eceef1; }
.avatar-upload-photo { position: relative; display: grid; place-items: center; width: 110px; height: 110px; border-radius: 50%; overflow: hidden; cursor: pointer; background: rgba(var(--bs-primary-rgb), 0.08); border: 3px solid rgba(var(--bs-primary-rgb), 0.25); }
.avatar-upload-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.avatar-upload-placeholder { font-size: 2.6rem; color: rgba(var(--bs-primary-rgb), 0.55); }
.avatar-upload-overlay { position: absolute; inset: 0; display: grid; place-items: center; border-radius: 50%; background: rgba(0, 0, 0, 0.35); color: #fff; font-size: 1.4rem; opacity: 0; transition: opacity 0.2s; }
.avatar-upload-photo:hover .avatar-upload-overlay { opacity: 1; }

.password-field { position: relative; }
.password-field .form-control { padding-right: 2.4rem; }
.password-field .toggle-password { position: absolute; top: 0; right: 0; height: calc(1.5em + 1rem + 2px); padding: 0 0.7rem; border: 0; background: transparent; color: var(--bs-secondary-color); }
.password-field .form-control.is-invalid { background-image: none; }

/* =====================================================================
   Linha inativa em listagem (ex. campanha inativa) — 2026-09-30
   <tr class="row-inactive"> + <span class="tag-inactive">Inativa</span> ao lado do nome.
   Texto esmaecido e nome sem negrito: as linhas ativas continuam com o peso normal.
   ===================================================================== */
table.table-neutral tbody tr.row-inactive > td { color: #a3aabb !important; }
table.table-neutral tbody tr.row-inactive > td.fw-semibold { font-weight: 500 !important; }
.tag-inactive { display: inline-block; margin-left: 0.5rem; padding: 0.1rem 0.45rem; border-radius: 0.35rem; background: #e6e9ef; color: #5b6475; font-size: 0.66rem; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; vertical-align: 0.08em; }

/* =====================================================================
   Menu lateral (layouts/dashboard/sidebar.blade.php) — 2026-09-30
   Visual próprio sobre a raiz .sidebar do Hope UI, que continua cuidando da largura
   (--sidebar-width), da margem do conteúdo e da classe .sidebar-mini.
   Desktop (>= 1200px): expandido 16.2rem / recolhido 4.8rem (só ícones, com painel flutuante).
   Abaixo disso: gaveta sobre o conteúdo; .sidebar-mini = gaveta fechada.
   ===================================================================== */
.sidebar.ds-sidebar {
    --ds-side-item: #4b5468;
    --ds-side-strong: #232d42;
    --ds-side-muted: #8a92a6;
    --ds-side-line: #eceef1;
    --ds-side-guide: #e1e5ee;
    --ds-side-hover: rgba(var(--bs-primary-rgb), 0.06);
    --ds-side-active-bg: rgba(var(--bs-primary-rgb), 0.11);
    --ds-side-active-fg: var(--bs-primary);
    --ds-side-surface: #ffffff;
    display: flex;
    flex-direction: column;
    background-color: var(--ds-side-surface);
    color: var(--ds-side-item);
    border-right: 1px solid var(--ds-side-line);
    box-shadow: none;
    font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
}
.ds-sidebar :is(a, button):focus-visible { outline: 2px solid rgba(var(--bs-primary-rgb), .55); outline-offset: 2px; }

/* Cabeçalho: mesma altura da barra superior (60px, ver nav-header) */
.ds-side-head { flex: none; display: flex; align-items: center; height: 60px; padding: 0 1rem; border-bottom: 1px solid var(--ds-side-line); overflow: hidden; }
.ds-brand { display: flex; align-items: center; gap: 0.65rem; min-width: 0; color: var(--ds-side-strong); text-decoration: none; }
.ds-brand:hover { color: var(--ds-side-strong); }
/* Logo inteira (sem corte) sobre um disco suave na cor do tema */
.ds-brand-mark { flex: none; display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: 50%; background: rgba(var(--bs-primary-rgb), 0.08); }
.ds-brand-mark img { width: 84%; height: 84%; object-fit: contain; }
.ds-brand-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.15; white-space: nowrap; }
.ds-brand-name { font-size: 1.15rem; font-weight: 600; letter-spacing: -0.015em; color: var(--ds-side-strong); }
.ds-brand-name b { font-weight: 800; color: var(--bs-primary); letter-spacing: 0; }
/* Barra superior: uma linha só em qualquer largura. Abaixo de 1200px aparecem o botão do menu e a
   marca à esquerda; o usuário fica sempre à direita (sem o botão "sanduíche" que abria outra linha). */
.iq-navbar.ds-topbar .navbar-inner { flex-wrap: nowrap; gap: 0.6rem; }
.iq-navbar.ds-topbar .ds-brand { --ds-side-strong: #232d42; --ds-side-muted: #8a92a6; display: none; margin: 0; padding: 0; min-width: 0; }
/* Mesma aba redonda com seta do menu lateral (.ds-side-toggle) */
.ds-topbar-menu { display: none; flex: none; place-items: center; width: 26px; height: 26px; padding: 0; border: 1px solid #e3e6ec; border-radius: 50%; background: #fff; color: #8a92a6; box-shadow: 0 2px 6px rgba(20, 30, 80, 0.1); transition: color 0.15s, border-color 0.15s; }
.ds-topbar-menu:hover { color: var(--bs-primary); border-color: rgba(var(--bs-primary-rgb), 0.4); }
.ds-topbar-menu:focus-visible { outline: 2px solid rgba(var(--bs-primary-rgb), .55); outline-offset: 2px; }
.ds-topbar-menu .ms { width: 18px; height: 18px; }
/* Área de toque de 44px sem aumentar o desenho */
.ds-topbar-menu { position: relative; }
.ds-topbar-menu::after { content: ''; position: absolute; inset: -9px; }
.iq-navbar.ds-topbar .ds-topbar-user { flex-direction: row; flex: none; margin-left: auto; }
.iq-navbar.ds-topbar .ds-topbar-user .nav-link { padding: 0.15rem; border-radius: 99px; }
.iq-navbar.ds-topbar .ds-topbar-user .dropdown-menu { position: absolute; right: 0; left: auto; top: calc(100% + 0.5rem); }
@media (max-width: 1199.98px) {
    .iq-navbar.ds-topbar .navbar-inner { padding-inline: 0.75rem; }
    .iq-navbar.ds-topbar .ds-brand { display: flex; }
    .ds-topbar-menu { display: grid; }
}
@media (max-width: 359.98px) {
    .iq-navbar.ds-topbar .ds-brand-text { display: none; }
}

/* Botão de recolher: aba redonda na borda do menu */
.ds-side-toggle { position: absolute; top: 17px; right: -13px; z-index: 2; display: grid; place-items: center; width: 26px; height: 26px; padding: 0; border: 1px solid var(--ds-side-line); border-radius: 50%; background: var(--ds-side-surface); color: var(--ds-side-muted); box-shadow: 0 2px 6px rgba(20, 30, 80, 0.1); transition: transform 0.25s, color 0.15s; }
.ds-side-toggle:hover { color: var(--bs-primary); }
.ds-side-toggle .ms { width: 18px; height: 18px; }
.ds-sidebar.sidebar-mini .ds-side-toggle { transform: rotate(180deg); }

.ds-side-body { flex: 1 1 auto; min-height: 0; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; padding: 0.5rem 0.75rem 1rem; scrollbar-width: thin; scrollbar-color: var(--ds-side-guide) transparent; }
.ds-side-body::-webkit-scrollbar { width: 5px; }
.ds-side-body::-webkit-scrollbar-thumb { background: var(--ds-side-guide); border-radius: 99px; }
.ds-side-label { margin: 1.1rem 0 0.35rem; padding: 0 0.7rem; font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ds-side-muted); white-space: nowrap; }
.ds-side-label:first-child { margin-top: 0.4rem; }

.ds-nav, .ds-sub { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.ds-nav { gap: 2px; }
.ds-nav-link { position: relative; display: flex; align-items: center; gap: 0.75rem; width: 100%; min-height: 2.5rem; padding: 0.4rem 0.7rem; border: 0; border-radius: 0.6rem; background: transparent; color: var(--ds-side-item); font-family: inherit; font-size: 0.875rem; font-weight: 500; line-height: 1.3; text-align: left; text-decoration: none; white-space: nowrap; cursor: pointer; transition: background-color 0.15s, color 0.15s; }
.ds-nav-link:hover { background: var(--ds-side-hover); color: var(--ds-side-strong); }
.ds-nav-icon { flex: none; display: grid; place-items: center; width: 1.375rem; color: var(--ds-side-muted); transition: color 0.15s; }
.ds-nav-icon .ms { width: 22px; height: 22px; }
.ds-nav-link:hover .ds-nav-icon { color: var(--ds-side-strong); }
.ds-nav-text { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.ds-nav-caret { flex: none; display: grid; color: var(--ds-side-muted); transition: transform 0.24s; }
.ds-nav-caret .ms { width: 18px; height: 18px; }

/* Tela atual: pílula suave na cor do tema; o grupo dela fica só com texto e ícone na cor */
.ds-nav-link.is-active,
.ds-nav-link.is-active:hover { background: var(--ds-side-active-bg); color: var(--ds-side-active-fg); font-weight: 600; }
.ds-nav-link.is-active .ds-nav-icon,
.ds-group.has-active > .ds-nav-link .ds-nav-icon { color: var(--ds-side-active-fg); }
.ds-group.has-active > .ds-nav-link { color: var(--ds-side-active-fg); font-weight: 600; }
.ds-group.is-open > .ds-nav-link .ds-nav-caret { transform: rotate(90deg); }

/* Submenu: altura animada (0fr -> 1fr) e linha-guia */
.ds-sub-wrap { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.24s ease; }
.ds-group.is-open > .ds-sub-wrap { grid-template-rows: 1fr; }
.ds-sub-inner { min-height: 0; overflow: hidden; }
.ds-group:not(.is-open) > .ds-sub-wrap .ds-sub-inner { visibility: hidden; transition: visibility 0s 0.24s; }
.ds-sub { gap: 1px; margin: 2px 0 4px 1.35rem; padding-left: 0.85rem; border-left: 1.5px solid var(--ds-side-guide); }
.ds-sub .ds-nav-link { min-height: 2.125rem; padding: 0.3rem 0.7rem; font-size: 0.84375rem; }
.ds-sub .ds-nav-link.is-active::before { content: ''; position: absolute; left: calc(-0.85rem - 1.5px); top: 0.45rem; bottom: 0.45rem; width: 2.5px; border-radius: 2px; background: var(--bs-primary); }
.ds-flyout-title { display: none; }

/* Rodapé: usuário logado (leva a Meu Perfil) e sair */
.ds-side-foot { flex: none; display: flex; align-items: center; gap: 0.25rem; padding: 0.6rem 0.75rem; border-top: 1px solid var(--ds-side-line); }
.ds-user { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 0.7rem; padding: 0.4rem 0.5rem; border-radius: 0.7rem; color: var(--ds-side-strong); text-decoration: none; transition: background-color 0.15s; }
.ds-user:hover { background: var(--ds-side-hover); color: var(--ds-side-strong); }
.ds-user-photo { flex: none; display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: 50%; object-fit: cover; background: var(--ds-side-active-bg); color: var(--ds-side-active-fg); font-size: 0.8rem; font-weight: 600; }
.ds-user-text { min-width: 0; line-height: 1.25; }
.ds-user-text b { display: block; font-size: 0.84375rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ds-user-text span { display: block; font-size: 0.75rem; color: var(--ds-side-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ds-user-out { flex: none; display: grid; place-items: center; width: 2.25rem; height: 2.25rem; padding: 0; border: 0; border-radius: 0.6rem; background: transparent; color: var(--ds-side-muted); transition: background-color 0.15s, color 0.15s; }
.ds-user-out:hover { background: var(--ds-side-hover); color: var(--bs-primary); }
.ds-user-out .ms { width: 20px; height: 20px; }

.ds-sidebar-scrim { display: none; }

/* Menu do usuário na barra superior: ícone alinhado e afastado do texto */
.ds-user-menu { min-width: 13.5rem; padding: 0.4rem; border: 1px solid #eceef1; border-radius: 0.8rem; box-shadow: 0 10px 30px rgba(20, 30, 80, 0.14); font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif; }
.ds-user-menu .dropdown-item { display: flex; align-items: center; gap: 0.7rem; padding: 0.55rem 0.75rem; border-radius: 0.55rem; color: #4b5468; font-size: 0.875rem; font-weight: 500; cursor: pointer; }
.ds-user-menu .dropdown-item .ms { flex: none; width: 20px; height: 20px; color: #8a92a6; transition: color 0.15s; }
.ds-user-menu .dropdown-item:is(:hover, :focus) { background: rgba(var(--bs-primary-rgb), 0.08); color: var(--bs-primary); }
.ds-user-menu .dropdown-item:is(:hover, :focus) .ms { color: var(--bs-primary); }
.ds-user-menu-head { padding: 0.5rem 0.75rem 0.35rem; line-height: 1.3; }
.ds-user-menu-head b { display: block; font-size: 0.875rem; font-weight: 600; color: #232d42; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ds-user-menu-head span { font-size: 0.75rem; color: #8a92a6; }
.ds-user-menu .dropdown-divider { margin: 0.35rem 0.4rem; border-color: #eceef1; opacity: 1; }

/* ---------- Desktop: recolhido (só ícones) ---------- */
@media (min-width: 1200px) {
    .ds-sidebar.sidebar-mini :is(.ds-brand-text, .ds-nav-caret, .ds-user-text, .ds-user-out) { display: none; }
    .ds-sidebar.sidebar-mini .ds-nav > li > .ds-nav-link > .ds-nav-text { display: none; }
    .ds-sidebar.sidebar-mini .ds-side-head { justify-content: center; padding: 0; }
    /* Recolhido, a logo encolhe um pouco para não encostar na seta da borda */
    .ds-sidebar.sidebar-mini .ds-brand-mark { width: 2.25rem; height: 2.25rem; }
    .ds-sidebar.sidebar-mini .ds-side-body { overflow: visible; padding-inline: 0.65rem; }
    .ds-sidebar.sidebar-mini .ds-side-label { height: 1px; margin: 0.85rem 0.9rem 0.6rem; padding: 0; font-size: 0; background: var(--ds-side-line); }
    .ds-sidebar.sidebar-mini .ds-side-label:first-child { display: none; }
    .ds-sidebar.sidebar-mini .ds-nav > li { position: relative; }
    .ds-sidebar.sidebar-mini .ds-nav > li > .ds-nav-link { justify-content: center; height: 2.6rem; padding: 0; }
    .ds-sidebar.sidebar-mini .ds-group.has-active > .ds-nav-link { background: var(--ds-side-active-bg); }
    .ds-sidebar.sidebar-mini .ds-side-foot { justify-content: center; padding-inline: 0; }
    .ds-sidebar.sidebar-mini .ds-user { flex: none; padding: 0.3rem; }

    /* Nome do item ao passar o mouse ou focar */
    .ds-sidebar.sidebar-mini .ds-nav > li > a.ds-nav-link::after { content: attr(data-tip); position: absolute; left: calc(100% + 0.75rem); top: 50%; transform: translateY(-50%); padding: 0.35rem 0.7rem; border-radius: 0.5rem; background: var(--ds-side-strong); color: var(--ds-side-surface); font-size: 0.78rem; font-weight: 500; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity 0.12s; }
    .ds-sidebar.sidebar-mini .ds-nav > li > a.ds-nav-link:is(:hover, :focus-visible)::after { opacity: 1; }

    /* Grupo vira painel flutuante à direita do ícone */
    .ds-sidebar.sidebar-mini .ds-sub-wrap { display: block; position: absolute; left: 100%; top: -0.4rem; min-width: 13.5rem; padding-left: 0.65rem; visibility: hidden; opacity: 0; transition: opacity 0.12s, visibility 0.12s; }
    .ds-sidebar.sidebar-mini .ds-group:is(:hover, :focus-within) > .ds-sub-wrap { visibility: visible; opacity: 1; }
    .ds-sidebar.sidebar-mini .ds-sub-inner { visibility: inherit !important; overflow: visible; padding: 0.5rem; border: 1px solid var(--ds-side-line); border-radius: 0.8rem; background: var(--ds-side-surface); box-shadow: 0 10px 30px rgba(20, 30, 80, 0.16); }
    .ds-sidebar.sidebar-mini .ds-sub { margin: 0; padding: 0; border-left: 0; }
    .ds-sidebar.sidebar-mini .ds-sub .ds-nav-link.is-active::before { display: none; }
    .ds-sidebar.sidebar-mini .ds-flyout-title { display: block; padding: 0.25rem 0.7rem 0.45rem; font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ds-side-muted); }
}

/* ---------- Abaixo de 1200px: gaveta ---------- */
@media (max-width: 1199.98px) {
    .sidebar.ds-sidebar { max-width: min(17.5rem, 86vw); box-shadow: 0 10px 40px rgba(20, 30, 80, 0.2); transform: translateX(0); }
    .sidebar.ds-sidebar.sidebar-mini { --sidebar-width: 17.5rem; transform: translateX(-105%); box-shadow: none; }
    /* Itens um pouco mais altos: alvo de toque de 44px */
    .ds-nav-link { min-height: 2.75rem; }
    .ds-sub .ds-nav-link { min-height: 2.5rem; }
    .ds-side-body { padding-bottom: calc(1rem + env(safe-area-inset-bottom, 0px)); }
    .ds-side-foot { padding-bottom: calc(0.6rem + env(safe-area-inset-bottom, 0px)); }
    /* Aberta, a aba vira um botão de fechar dentro do cabeçalho; fechada, some (abre pela barra superior) */
    .ds-side-toggle { top: 17px; right: 0.75rem; box-shadow: none; }
    .ds-sidebar.sidebar-mini .ds-side-toggle { display: none; }
    .ds-side-head { padding-right: 3rem; }

    .ds-sidebar-scrim { display: block; position: fixed; inset: 0; z-index: 905; background: rgba(15, 20, 40, 0.45); opacity: 0; visibility: hidden; transition: opacity 0.25s, visibility 0.25s; }
    .ds-sidebar:not(.sidebar-mini) ~ .ds-sidebar-scrim { opacity: 1; visibility: visible; }
}

@media (prefers-reduced-motion: reduce) {
    .ds-sidebar, .ds-sidebar *, .ds-sidebar-scrim { transition: none !important; }
}

/* =====================================================================
   Categorias — ícone e cor por categoria (2026-10-01)
   Lista em grade/lista, formulário com seletor de cor e ícone e prévia. Referência:
   docs/categories/reference/preview.html. O ícone (ui.category-icon) também é usado em Minhas
   Despesas. Cor vem de --cat-color; fundo a 13% (20% no escuro) e ícone na cor.
   ===================================================================== */
:root { --cat-tint: 13%; --cat-ink: 100%; }

.cat-ic {
    width: 2.25rem;
    height: 2.25rem;
    flex: none;
    border-radius: 0.625rem;
    display: grid;
    place-items: center;
    background: color-mix(in srgb, var(--cat-color, #64748b) var(--cat-tint), transparent);
    color: color-mix(in srgb, var(--cat-color, #64748b) var(--cat-ink), white);
}
.cat-ic .ms { width: 1.25rem; height: 1.25rem; }
.cat-ic-lg { width: 3rem; height: 3rem; border-radius: 0.875rem; }
.cat-ic-lg .ms { width: 1.625rem; height: 1.625rem; }
.cat-ic-sm { width: 1.625rem; height: 1.625rem; border-radius: 0.5rem; }
.cat-ic-sm .ms { width: 1rem; height: 1rem; }

.cat-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    border-radius: 999px;
    padding: 0.2rem 0.65rem 0.2rem 0.3rem;
    font-size: 0.78rem;
    font-weight: 600;
    background: color-mix(in srgb, var(--cat-color, #64748b) var(--cat-tint), transparent);
    color: color-mix(in srgb, var(--cat-color, #64748b) var(--cat-ink), white);
}
.cat-badge .ms { width: 1rem; height: 1rem; }

.cat-origin { display: inline-flex; align-items: center; gap: 0.25rem; font-size: 0.78rem; font-weight: 500; color: var(--bs-secondary-color); white-space: nowrap; }
.cat-origin .ms { width: 1rem; height: 1rem; }
.cat-origin-mine { color: var(--bs-primary); }
.cat-lock { display: inline-grid; place-items: center; width: 2rem; height: 2rem; color: var(--bs-secondary-color); }
.cat-lock .ms { width: 1.125rem; height: 1.125rem; }

/* Barra de filtro: o alternador grade/lista fica colado no filtro de tipo */
.cat-filter-bar { margin-bottom: 1rem; }
.filter-bar .cat-view-toggle { margin-left: 0; }
.cat-view-toggle .btn { padding-left: 0.6rem; padding-right: 0.6rem; }
.cat-view-toggle .ms { width: 1.2rem; height: 1.2rem; }
.filter-search > .ms { position: absolute; left: 0.9rem; width: 1.15rem; height: 1.15rem; color: #9aa0a6; pointer-events: none; }
@media (max-width: 767.98px) {
    /* Busca e alternador grade/lista na 1ª linha; filtro de tipo na linha toda abaixo */
    .cat-filter-bar .filter-search { flex: 1 1 0; min-width: 0; }
    .cat-filter-bar .cat-view-toggle { flex: none; width: auto; order: 1; }
    .cat-filter-bar .cat-type-filter { order: 2; margin-left: 0; }
    .cat-filter-bar .cat-type-filter .btn { flex: 1; justify-content: center; padding-left: 0.5rem; padding-right: 0.5rem; font-size: 0.875rem; }
}
.cat-empty { color: var(--bs-secondary-color); text-align: center; padding: 1.5rem 0; margin: 0; }

/* Grade agrupada por tipo */
.cat-group-title { display: flex; align-items: center; gap: 0.5rem; margin: 0.25rem 0 0.75rem; font-weight: 700; font-size: 0.95rem; color: var(--bs-heading-color); }
.cat-count { font-size: 0.75rem; font-weight: 600; color: var(--bs-secondary-color); background: #f1f3f8; border-radius: 999px; padding: 0.1rem 0.5rem; }
.cat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); gap: 0.75rem; margin-bottom: 1.4rem; }
@media (max-width: 767.98px) {
    .cat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.625rem; }
}
.cat-tile {
    position: relative;
    display: grid;
    gap: 0.625rem;
    padding: 0.875rem;
    border: 1px solid #e6e9f0;
    border-radius: 0.875rem;
    background: #fff;
    cursor: pointer;
    transition: border-color .15s, box-shadow .15s, transform .15s;
}
.cat-tile:hover { border-color: color-mix(in srgb, var(--cat-color, #64748b) 45%, #e6e9f0); box-shadow: 0 6px 18px rgba(20, 24, 43, 0.07); transform: translateY(-1px); }
.cat-tile:focus-visible { outline: 2px solid rgba(var(--bs-primary-rgb), 0.5); outline-offset: 2px; }
.cat-tile-bar { position: absolute; left: 0.875rem; right: 0.875rem; top: 0; height: 3px; border-radius: 0 0 3px 3px; background: var(--cat-color, #64748b); opacity: .85; }
.cat-tile-top { display: flex; justify-content: space-between; align-items: flex-start; }
.cat-tile-name { font-weight: 700; color: var(--bs-heading-color); line-height: 1.25; overflow-wrap: break-word; hyphens: auto; }
.cat-tile-meta { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 0.125rem 0.375rem; font-size: 0.75rem; color: var(--bs-secondary-color); }
.cat-tile-meta .cat-origin:not(.cat-origin-mine) .ms { display: none; }
.cat-tile-add { border-style: dashed; place-items: center; align-content: center; min-height: 7.25rem; color: var(--bs-secondary-color); font-weight: 600; text-decoration: none; }
.cat-tile-add:hover { color: var(--bs-primary); }
.cat-tile-add .ms { width: 1.6rem; height: 1.6rem; }

/* Lista: tabela no PC, linhas no celular */
.cat-cell { display: flex; align-items: center; gap: 0.75rem; text-align: left; }
.cat-cell-name { font-weight: 600; color: var(--bs-heading-color); }
.cat-cell-desc { font-size: 0.78rem; color: var(--bs-secondary-color); }
.cat-rows { display: grid; }
.cat-row { display: flex; align-items: center; gap: 0.75rem; padding: 0.7rem 0.25rem; border-bottom: 1px solid #e6e9f0; cursor: pointer; }
.cat-row:last-child { border-bottom: 0; }
.cat-row-body { flex: 1; min-width: 0; }
.cat-row-name { font-weight: 600; color: var(--bs-heading-color); }
.cat-row-meta { font-size: 0.78rem; color: var(--bs-secondary-color); }

/* Detalhe (modal e página) */
.cat-detail-hero { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 1rem; }
.cat-detail-name { font-size: 1.1rem; font-weight: 700; color: var(--bs-heading-color); margin: 0; }
.cat-detail-sub { font-size: 0.8rem; color: var(--bs-secondary-color); }
.cat-detail dl { display: grid; grid-template-columns: auto 1fr; gap: 0.5rem 1rem; margin: 0 0 1rem; font-size: 0.875rem; }
.cat-detail dt { font-weight: 500; color: var(--bs-secondary-color); }
.cat-detail dd { margin: 0; }
.cat-notice { display: flex; gap: 0.625rem; align-items: flex-start; padding: 0.75rem 0.875rem; border-radius: 0.75rem; background: rgba(var(--bs-primary-rgb), 0.08); font-size: 0.82rem; line-height: 1.5; margin-bottom: 1rem; }
.cat-notice > .ms { flex: none; width: 1.25rem; height: 1.25rem; color: var(--bs-primary); }
.cat-detail-actions { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 0.5rem; padding-top: 1rem; border-top: 1px solid #e6e9f0; }
.cat-detail-actions .btn { display: inline-flex; align-items: center; gap: 0.35rem; }
.cat-detail-actions .btn .ms { width: 1.1rem; height: 1.1rem; }

/* Formulário: cards de campos à esquerda e prévia fixa à direita. Abaixo do lg a prévia é um card
   próprio entre Informações e Cor (ordem do DOM; decisão do usuário em 2026-10-01) */
.cat-form-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; align-items: start; }
@media (min-width: 992px) {
    .cat-form-grid { grid-template-columns: minmax(0, 1fr) 20rem; grid-template-areas: "info preview" "look preview"; }
    .cat-form-info { grid-area: info; }
    .cat-form-look { grid-area: look; }
    .cat-preview { grid-area: preview; position: sticky; top: 5rem; }
}
/* Mesma altura do .form-control ao lado (42px) */
.cat-type-options { height: 2.625rem; padding: 0.2rem; }
@media (min-width: 576px) {
    .cat-type-options { width: 16rem !important; }
    /* Nome não espreme abaixo disso: desce para a linha de baixo */
    .cat-name-col { min-width: 15rem; }
}
.cat-type-options .btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.35rem; padding-top: 0; padding-bottom: 0; white-space: nowrap; }
.cat-type-options .ms { width: 1.1rem; height: 1.1rem; }
/* Campos no mesmo padrão do formulário de lançamento (#entryFormModal): cantos 0.75rem e fundo cinza */
#cat-form .form-control {
    border-radius: 0.75rem;
    border: 1px solid #e6e9f0;
    background-color: #f5f6fa;
    color: var(--bs-heading-color);
}
#cat-form input.form-control { height: 2.625rem; }
#cat-form .form-control:focus {
    background-color: #fff;
    border-color: rgba(var(--bs-primary-rgb), 0.5);
    box-shadow: 0 0 0 3px rgba(var(--bs-primary-rgb), 0.12);
}
.cat-delete-btn { display: inline-flex; align-items: center; gap: 0.35rem; }
.cat-delete-btn .ms { width: 1.1rem; height: 1.1rem; }
.cat-hint { font-size: 0.8rem; color: var(--bs-secondary-color); margin: -0.25rem 0 0.75rem; }

.cat-swatches { display: flex; flex-wrap: wrap; gap: 0.625rem; margin-bottom: 0.5rem; }
.cat-swatch { position: relative; margin: 0; }
.cat-swatch input { position: absolute; opacity: 0; pointer-events: none; }
.cat-swatch span {
    display: grid;
    place-items: center;
    width: 2.125rem;
    height: 2.125rem;
    border-radius: 50%;
    background: var(--cat-color, #64748b);
    color: #fff;
    cursor: pointer;
    box-shadow: 0 0 0 2px #fff, 0 0 0 3px transparent;
    transition: box-shadow .12s, transform .12s;
}
.cat-swatch span .ms { width: 1.2rem; height: 1.2rem; visibility: hidden; }
.cat-swatch span:hover { transform: scale(1.08); }
.cat-swatch input:checked + span { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--cat-color, #64748b); }
.cat-swatch input:checked + span .ms { visibility: visible; }
.cat-swatch input:focus-visible + span { outline: 2px solid rgba(var(--bs-primary-rgb), 0.5); outline-offset: 4px; }

.cat-icon-search { margin-bottom: 0.625rem; }
.cat-icon-grid { scrollbar-width: thin; display: grid; grid-template-columns: repeat(auto-fill, minmax(2.875rem, 1fr)); gap: 0.375rem; max-height: 20rem; overflow-y: auto; padding: 2px; margin-bottom: 0.375rem; }
.cat-icon-group { grid-column: 1 / -1; font-size: 0.72rem; font-weight: 700; color: var(--bs-secondary-color); text-transform: uppercase; letter-spacing: .05em; padding: 0.5rem 0.125rem 0; }
.cat-icon-group:first-child { padding-top: 0; }
.cat-icon-opt { position: relative; margin: 0; }
.cat-icon-opt input { position: absolute; opacity: 0; pointer-events: none; }
.cat-icon-opt span {
    display: grid;
    place-items: center;
    height: 2.875rem;
    border-radius: 0.625rem;
    border: 1px solid #e6e9f0;
    color: var(--bs-secondary-color);
    cursor: pointer;
    transition: background .12s, color .12s, border-color .12s;
}
.cat-icon-opt span .ms { width: 1.375rem; height: 1.375rem; }
.cat-icon-opt span:hover { background: #f1f3f8; color: var(--bs-body-color); }
.cat-icon-opt input:checked + span {
    border-color: transparent;
    background: color-mix(in srgb, var(--cat-color, #64748b) var(--cat-tint), transparent);
    color: color-mix(in srgb, var(--cat-color, #64748b) var(--cat-ink), white);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--cat-color, #64748b) 70%, transparent);
}
.cat-icon-opt input:focus-visible + span { outline: 2px solid rgba(var(--bs-primary-rgb), 0.5); outline-offset: 2px; }
.cat-icon-empty { font-size: 0.82rem; color: var(--bs-secondary-color); margin: 0 0 0.75rem; }
.cat-icon-selected { font-size: 0.8rem; color: var(--bs-secondary-color); margin: 0 0 1rem; }
.cat-icon-selected b { color: var(--bs-body-color); }

/* Prévia */
.cat-preview-label { font-size: 0.78rem; font-weight: 600; color: var(--bs-secondary-color); text-transform: uppercase; letter-spacing: .06em; margin: 0 0 0.25rem; }
.cat-preview-hero { display: flex; gap: 0.75rem; align-items: center; padding: 0.875rem 0 1rem; border-bottom: 1px solid #e6e9f0; }
.cat-preview-name { font-weight: 700; font-size: 1rem; color: var(--bs-heading-color); overflow-wrap: anywhere; }
.cat-preview-sub { font-size: 0.78rem; color: var(--bs-secondary-color); }
.cat-sample { display: grid; gap: 0.75rem; padding-top: 0.875rem; }
.cat-sample > div { min-width: 0; }
.cat-sample-label { font-size: 0.7rem; font-weight: 600; color: var(--bs-secondary-color); text-transform: uppercase; letter-spacing: .05em; margin-bottom: 0.375rem; }
.cat-stmt { display: flex; align-items: center; gap: 0.625rem; padding: 0.5rem 0.625rem; border-radius: 0.75rem; background: #f1f3f8; }
.cat-stmt-body { flex: 1; min-width: 0; }
.cat-stmt-title { font-weight: 600; font-size: 0.84rem; color: var(--bs-heading-color); }
.cat-stmt-sub { font-size: 0.75rem; color: var(--bs-secondary-color); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cat-stmt-value { font-weight: 700; font-size: 0.84rem; white-space: nowrap; font-variant-numeric: tabular-nums; }
.cat-donut { display: flex; align-items: center; gap: 0.75rem; }
.cat-donut-legend { display: grid; gap: 0.25rem; font-size: 0.78rem; }
.cat-donut-legend span { display: inline-flex; align-items: center; gap: 0.375rem; }
.cat-donut-legend i { width: 0.55rem; height: 0.55rem; border-radius: 50%; background: var(--cat-color, #64748b); }
.cat-donut-legend i.cat-donut-track-dot { background: #e6e9f0; }

/* =====================================================================
   Modo escuro (Hope UI coloca .dark no <body>).
   Paleta do tema: fundo #151824, card #222738, borda #30384f.
   Cobre tudo que acima tem cor fixa pensada para o tema claro.
   ===================================================================== */
body.dark {
    --ds-text: #d7dbe6;
    --ds-muted: #8a92a6;
    --ds-field-bg: #1b1f2e;
    --ds-border: #30384f;
    --ds-surface: #222738;
    /* O tema não redefine estas variáveis do Bootstrap no escuro: texto secundário e títulos ficavam
       escuros sobre fundo escuro em tudo que lê var(--bs-secondary-color) / var(--bs-heading-color). */
    --bs-secondary-color: #9aa2b6;
    --bs-heading-color: #e4e7ef;
}

/* Cards e título de página */
body.dark .card-elevated {
    border-color: var(--ds-border);
    box-shadow: none;
}
body.dark .page-title { color: #fff; }

/* Formulários e labels (regras globais do topo do arquivo) */
body.dark label { color: #a3aabb; }
body.dark .form-control,
body.dark .form-select { color: var(--ds-text); }
body.dark .form-control:disabled,
body.dark .form-select:disabled { background-color: var(--ds-field-bg); }
body.dark .detail-value { color: var(--ds-text); }

/* Tabela */
body.dark table.table-neutral {
    --bs-table-color: var(--ds-text);
    --bs-table-striped-color: var(--ds-text);
    --bs-table-hover-color: var(--ds-text);
}
body.dark table.table-neutral > thead > tr > th {
    background-color: rgba(var(--bs-primary-rgb), 0.18) !important;
    color: color-mix(in srgb, var(--bs-primary) 35%, #fff) !important;
}
body.dark table.table-neutral > tbody > tr > td { color: var(--ds-text); }
body.dark table.table-neutral > tbody > tr:nth-child(even) > td {
    background-color: rgba(255, 255, 255, 0.035) !important;
}
body.dark table.table-neutral > tbody > tr:hover > td {
    background-color: rgba(var(--bs-primary-rgb), 0.14) !important;
}
body.dark.table-variant-cards .card:has(table.table-neutral) { background-color: #1b1f2e; }
body.dark.table-variant-cards table.table-neutral > tbody > tr > td,
body.dark.table-variant-cards table.table-neutral > tbody > tr:nth-child(even) > td,
body.dark.table-variant-cards table.table-neutral > tbody > tr:hover > td {
    background-color: var(--ds-surface) !important;
    border-color: var(--ds-border) !important;
}

/* Badges: fundo translúcido e texto claro da mesma cor */
body.dark .badge-subtle.badge-success { background-color: rgba(34, 170, 90, 0.18); color: #6fdaa0; }
body.dark .badge-subtle.badge-warning { background-color: rgba(245, 166, 35, 0.18); color: #f5c563; }
body.dark .badge-subtle.badge-danger  { background-color: rgba(231, 76, 60, 0.2); color: #f29488; }
body.dark .badge-subtle.badge-primary { background-color: rgba(139, 92, 246, 0.22); color: #c1abf8; }
body.dark .badge-subtle.badge-secondary,
body.dark .badge-subtle.badge-default { background-color: rgba(255, 255, 255, 0.08); color: #c3c8d4; }

/* Campos da barra de filtros, combobox e controles do DataTables */
body.dark .filter-search input,
body.dark .filter-select,
body.dark .combobox-search,
body.dark .dataTables_wrapper .dataTables_length select,
body.dark .dataTables_wrapper .dataTables_filter input {
    background-color: var(--ds-field-bg) !important;
    border-color: var(--ds-border) !important;
    color: var(--ds-text);
}
body.dark .filter-search input:focus,
body.dark .filter-select:focus,
body.dark .combobox-toggle[aria-expanded="true"],
body.dark .combobox-search:focus,
body.dark .dataTables_wrapper .dataTables_length select:focus,
body.dark .dataTables_wrapper .dataTables_filter input:focus {
    background-color: var(--ds-surface) !important;
    border-color: rgba(var(--bs-primary-rgb), 0.6) !important;
}
body.dark .dataTables_wrapper .dataTables_length select option,
body.dark .filter-select option { background-color: var(--ds-surface); color: var(--ds-text); }
body.dark .combobox-panel {
    background-color: var(--ds-surface);
    border-color: var(--ds-border);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
}
body.dark .combobox-option { color: var(--ds-text); }
body.dark .combobox-option.is-active { background-color: rgba(var(--bs-primary-rgb), 0.18); }
body.dark .combobox-option.is-selected { color: color-mix(in srgb, var(--bs-primary) 45%, #fff); }

body.dark .dataTables_wrapper .dataTables_paginate .paginate_button { color: #b4bacb !important; }
body.dark .dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    background: rgba(var(--bs-primary-rgb), 0.18) !important;
    color: #fff !important;
}
body.dark .dataTables_wrapper .dataTables_paginate .paginate_button.current,
body.dark .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover { color: #fff !important; }
body.dark .dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
body.dark .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover { color: #4a5168 !important; }

/* Segmented control e botão de ações */
body.dark .segmented-control { background-color: var(--ds-field-bg); }
body.dark .segmented-control .btn:not(.active) { color: var(--ds-muted); }
body.dark .segmented-control .btn-check:checked + .btn { color: #fff; }
body.dark .btn-action-trigger { color: var(--ds-muted); }
body.dark .btn-action-trigger:hover,
body.dark .btn-action-trigger:focus {
    background-color: rgba(255, 255, 255, 0.08);
    color: var(--ds-text);
}

/* Botões de formulário e modal */
body.dark .btn.btn-soft {
    color: color-mix(in srgb, var(--bs-primary) 45%, #fff);
    background-color: rgba(var(--bs-primary-rgb), 0.18);
}
body.dark .btn.btn-soft:hover,
body.dark .btn.btn-soft:focus-visible { color: #fff; background-color: var(--bs-primary); }
body.dark .btn.btn-icon-remove { color: var(--ds-muted); }
body.dark .btn.btn-icon-remove:hover,
body.dark .btn.btn-icon-remove:focus-visible { color: #f29488; background-color: rgba(231, 76, 60, 0.2); }
body.dark .children-empty { color: var(--ds-muted); }
body.dark .child-row + .child-row { border-color: var(--ds-border); }
/* Modal: o Hope UI deixa o .modal-content branco no escuro */
body.dark .modal-content {
    background-color: var(--ds-surface);
    color: var(--ds-text);
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.55);
}
body.dark .modal-header,
body.dark .modal-footer,
body.dark .form-actions { border-color: var(--ds-border); }
body.dark .modal-title { color: #fff; }
body.dark .form-check-input:focus:not(:checked):not(:indeterminate) { background-color: var(--ds-surface) !important; }
body.dark .modal-content .text-muted { color: var(--ds-muted) !important; }
body.dark .modal-content .form-control,
body.dark .modal-content .form-select {
    background-color: var(--ds-field-bg);
    border-color: var(--ds-border);
}
/* Hope UI fixa placeholder claro no escuro; sem !important ele fica igual a valor digitado */
body.dark .form-control::placeholder { color: #5d6479 !important; opacity: 1; }
body.dark .header-title .card-title { color: color-mix(in srgb, var(--bs-primary) 55%, #fff); }
body.dark .btn.btn-light {
    background-color: rgba(255, 255, 255, 0.08);
    border-color: transparent;
    color: var(--ds-text);
}
body.dark .btn.btn-light:hover,
body.dark .btn.btn-light:focus-visible {
    background-color: rgba(255, 255, 255, 0.14);
    color: #fff;
}
body.dark .btn.btn-soft.btn-menu.show {
    color: color-mix(in srgb, var(--bs-primary) 45%, #fff);
    background-color: rgba(var(--bs-primary-rgb), 0.3);
}

/* Toasts */
body.dark .toast.toast-ds {
    background-color: var(--ds-surface);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
}
body.dark .toast-ds-message { color: var(--ds-text); }
body.dark .toast-ds-close { filter: invert(1); }
/* No persistente o invert escureceria o círculo; troca o ícone por um X claro */
body.dark .toast-ds.is-persistent .toast-ds-close {
    filter: none;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414'/%3e%3c/svg%3e");
}
body.dark .toast.toast-ds-success { --toast-color: #6fdaa0; --toast-soft: rgba(34, 170, 90, 0.2);  --toast-bg: rgba(34, 170, 90, 0.1);  --toast-border: rgba(34, 170, 90, 0.3); }
body.dark .toast.toast-ds-error   { --toast-color: #f29488; --toast-soft: rgba(231, 76, 60, 0.22); --toast-bg: rgba(231, 76, 60, 0.1);  --toast-border: rgba(231, 76, 60, 0.32); }
body.dark .toast.toast-ds-warning { --toast-color: #f5c563; --toast-soft: rgba(245, 166, 35, 0.2); --toast-bg: rgba(245, 166, 35, 0.09); --toast-border: rgba(245, 166, 35, 0.3); }
body.dark .toast.toast-ds-info    { --toast-color: #8dbaf5; --toast-soft: rgba(59, 130, 246, 0.22); --toast-bg: rgba(59, 130, 246, 0.1); --toast-border: rgba(59, 130, 246, 0.32); }

/* Minhas Despesas — banner usa a mesma imagem/cor do banner-header padrão, sem regra própria
   de dark mode (o customizer já resolve). Só o restante da tela precisa de ajuste. */
body.dark .my-expenses-search {
    background-color: var(--ds-field-bg);
    border-color: var(--ds-border);
    color: var(--ds-text);
}
body.dark .my-expenses-search .ms { color: var(--ds-muted); }
body.dark .my-expenses-search input::placeholder { color: var(--ds-muted); }

/* Abas de modo (Extrato/Painel/Agenda) ficam sobre o banner azul mesmo no dark mode — não usam
   var(--ds-field-bg)/--ds-text como o restante da tela. Sem este bloco, a regra genérica de
   body.dark .segmented-control (linha ~1605) forçava texto branco no ativo, que já tem fundo
   branco por cima do banner: texto sumia. Achado em 2026-09-25. */
body.dark .me-tabs .segmented-control .btn-check:checked + .btn {
    color: var(--bs-primary);
}
/* Mesmo motivo: trilho translúcido e texto claro do banner, não o fundo/texto escuro genérico */
body.dark .me-tabs .segmented-control { background-color: rgba(255, 255, 255, .12); }
body.dark .me-tabs .segmented-control .btn:not(.active) { color: rgba(255, 255, 255, .85); }

/* Modo Extrato */
body.dark .me-list,
body.dark .me-kpi,
body.dark .me-cats {
    background-color: var(--ds-surface);
    color: var(--ds-text);
}
body.dark .me-row:hover { background: var(--ds-field-bg); }
body.dark .me-row-meta,
body.dark .me-eyebrow,
body.dark .me-day-head,
body.dark .me-kpi-foot,
body.dark .me-empty { color: var(--ds-muted); }
body.dark .me-kpi-foot b { color: var(--ds-text); }
body.dark .me-bar { background: var(--ds-field-bg); }
body.dark .me-pill.wait { background: var(--ds-field-bg); }
/* Textos em destaque (2026-09-25) usam var(--bs-heading-color), que não muda no dark mode —
   precisam do mesmo --ds-text que .me-kpi/.me-cats/.me-list já usam no pai, porque a declaração
   direta nesses seletores vence a herança. */
body.dark .me-row-desc,
body.dark .me-amount,
body.dark .me-kpi-value,
body.dark .me-cats h3,
body.dark .me-cat-top,
body.dark .my-expenses-search input { color: var(--ds-text); }
body.dark .me-amount.in { color: var(--bs-success); }

/* Modo Painel (1d) */
body.dark .me-dash-kpi,
body.dark .me-dash-panel,
body.dark .me-dash-table-card {
    background-color: var(--ds-surface);
    color: var(--ds-text);
}
body.dark .me-dash-kpi-value,
body.dark .me-dash-panel h3,
body.dark .me-donut-legend,
body.dark .me-dash-desc { color: var(--ds-text); }
body.dark .me-dash-kpi-value.in { color: var(--bs-success); }
body.dark .me-dash-kpi-value.out { color: var(--bs-danger); }
body.dark .me-dash-kpi-value.balance { color: color-mix(in srgb, var(--bs-primary) 60%, #fff); }
body.dark .me-dash-sub,
body.dark .me-legend,
body.dark .me-delta.flat,
body.dark .me-dash-date,
body.dark .me-dash-cat,
body.dark .me-dash-table th { color: var(--ds-muted); }
body.dark .me-spark-dot-ring { stroke: var(--ds-surface); }
body.dark .me-flow-grid { stroke: var(--ds-border); }
body.dark .me-flow-tick,
body.dark .me-flow-month,
body.dark .me-donut-label { fill: var(--ds-muted); }
body.dark .me-flow-col.is-current .me-flow-month,
body.dark .me-donut-total { fill: var(--ds-text); }
body.dark .me-flow-col:hover .me-flow-hit,
body.dark .me-flow-col.is-current .me-flow-hit,
body.dark .me-flow-col:focus-visible .me-flow-hit { fill: var(--ds-field-bg); }
body.dark .me-donut-track { stroke: var(--ds-field-bg); }
body.dark .me-donut-arc.rest { stroke: #4a5168; }
body.dark .me-donut-legend i.rest { background: #4a5168; }
body.dark .me-dash-table th,
body.dark .me-dash-table td { border-color: var(--ds-border); }
body.dark .me-dash-table tbody tr:hover { background: var(--ds-field-bg); }

/* Modo Agenda (1e) */
body.dark .me-cal,
body.dark .me-agenda-sec,
body.dark .me-agenda .me-empty {
    background-color: var(--ds-surface);
    color: var(--ds-text);
}
body.dark .me-cal-head b,
body.dark .me-cal-day,
body.dark .me-agenda-sec-head h3 { color: var(--ds-text); }
body.dark .me-cal-day[aria-pressed="true"] { color: #fff; }
body.dark .me-cal-head .my-expenses-eyebrow,
body.dark .me-cal-wd,
body.dark .me-cal-day.muted,
body.dark .me-agenda-total,
body.dark .me-agenda-toggle,
body.dark .me-agenda-row.done .me-row-desc { color: var(--ds-muted); }
body.dark .me-cal-day:not([aria-pressed="true"]):hover,
body.dark .me-agenda-count { background: var(--ds-field-bg); }
body.dark .me-agenda-count { color: var(--ds-muted); }
body.dark .me-cal-dots i.done { background: #4a5168; }
body.dark .me-check:not(.on) { border-color: var(--ds-border); }
body.dark .me-agenda-row.done .me-row-desc { text-decoration-color: var(--ds-border); }

/* =====================================================================
   Minhas Despesas — formulário único de criar/editar (etapa 1c, 2026-09-25)
   entry-form.blade.php: modal Bootstrap padrão (PC), modal-fullscreen-md-down (celular).
   ===================================================================== */

/* Casca do modal: cantos maiores, cabeçalho e rodapé sem linha divisória, X num círculo cinza —
   como o .sheet da referência (reference/preview.html). No celular o modal é tela cheia
   (modal-fullscreen-md-down), então os cantos somem sozinhos. */
#entryFormModal .modal-content { border: 0; border-radius: 1.375rem; }
#entryFormModal .modal-header { border-bottom: 0; padding: 1.375rem 1.375rem 0.5rem; }
#entryFormModal .modal-title { font-size: 1.0625rem; font-weight: 700; color: var(--bs-heading-color); }
#entryFormModal .btn-close {
    width: 2rem;
    height: 2rem;
    padding: 0;
    border-radius: 50%;
    background-color: #eceef3;
    background-size: 0.625rem;
    opacity: 1;
}
#entryFormModal .modal-body { padding: 0.5rem 1.375rem; }
#entryFormModal .modal-footer { border-top: 0; padding: 0.5rem 1.375rem 1.375rem; }

/* Rótulos e campos: rótulo pequeno e cinza, campo com fundo cinza-claro e cantos de 12px */
#entryFormModal .form-label {
    font-size: 0.78125rem;
    font-weight: 600;
    color: var(--bs-body-color, #8a92a6);
    margin-bottom: 0.375rem;
}
#entryFormModal .form-control,
#entryFormModal .combobox-toggle {
    height: 2.625rem;
    border-radius: 0.75rem;
    border: 1px solid #e6e9f0;
    background-color: #f5f6fa;
    color: var(--bs-heading-color);
}

/* Valor em destaque: centralizado, sem caixa, número grande (.value-field da referência) */
.entry-value-field { text-align: center; }
.entry-value-field > label {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--bs-body-color, #8a92a6);
}
.entry-value-input {
    display: flex;
    justify-content: center;
    align-items: baseline;
    gap: 0.375rem;
}
.entry-value-input span {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--bs-body-color, #8a92a6);
}
.entry-value-input input {
    border: 0;
    outline: 0;
    background: transparent;
    font: inherit;
    font-size: 2.5rem;
    font-weight: 800;
    letter-spacing: -.03em;
    width: 13.75rem;
    max-width: 70%;
    color: var(--bs-heading-color);
    font-variant-numeric: tabular-nums;
}

/* Vencimento + Pago lado a lado; a caixa do switch alinha com a base do campo de data */
/* minmax(0, 1fr): o input type="date" tem largura mínima própria e, com 1fr, empurrava a caixa
   do switch para fora do modal em telas de ~360px. */
.entry-row-2 {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 0.75rem;
    align-items: end;
}
.entry-row-2 .form-control { width: 100%; min-width: 0; padding-inline: 0.625rem; }
.entry-switch-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 2.625rem;
    padding: 0 0.75rem;
    border-radius: 0.75rem;
    background-color: #f5f6fa;
    font-weight: 600;
    color: var(--bs-heading-color);
    cursor: pointer;
    margin: 0;
}
/* .form-switch do Bootstrap tem padding-left de 2.5em (espaço do input com margem negativa); sem
   zerar, o switch passava da borda direita da caixa. */
.entry-switch-row .form-switch { padding-left: 0; min-height: 0; display: flex; }
/* Ligado = cor primária do tema (o customizer do Hope UI já pinta .form-check-input:checked);
   decisão do usuário em 2026-10-01, antes era verde. */
.entry-switch-row .form-check-input { margin: 0; width: 2.625rem; height: 1.5rem; cursor: pointer; }
/* Número de parcelas centralizado (decisão do usuário em 2026-10-01; stepper fica para depois) */
#entry-installments { text-align: center; }

/* Categorias como chips clicáveis, filtradas por tipo no JS (my-expenses.js) */
.entry-cat-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
}
.entry-cat-chip {
    border: 1px solid #e6e9f0;
    background: #fff;
    border-radius: 999px;
    padding: 0.3125rem 0.6875rem 0.3125rem 0.4375rem;
    display: inline-flex;
    align-items: center;
    gap: 0.3125rem;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--bs-heading-color);
}
.entry-cat-chip .ms { color: var(--me-cat-color, #64748b); width: 1rem; height: 1rem; }
.entry-cat-chip[aria-pressed="true"] {
    border-color: var(--bs-primary);
    background: color-mix(in srgb, var(--bs-primary) 10%, transparent);
    color: var(--bs-primary);
}
.entry-cat-chip[aria-pressed="true"] .ms { color: var(--bs-primary); }

/* Celular: grade de 3 colunas iguais, ícone em cima e nome embaixo — em linha, as pílulas
   quebravam de forma irregular e deixavam a borda direita "serrilhada" (pedido do usuário,
   2026-09-25). Nome longo corta com reticências em vez de quebrar. */
@media (max-width: 575.98px) {
    .entry-cat-chips {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 0.5rem;
    }
    .entry-cat-chips.d-none { display: none; }
    .entry-cat-chip {
        flex-direction: column;
        justify-content: center;
        gap: 0.25rem;
        padding: 0.625rem 0.25rem;
        border-radius: 0.875rem;
        font-size: 0.75rem;
        min-width: 0;
    }
    .entry-cat-chip .ms { width: 1.375rem; height: 1.375rem; }
    .entry-cat-chip-name {
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
}

/* Seletor de tipo: largura toda, duas metades iguais; o lado ativo fica vermelho (despesa) ou
   verde (receita), não azul — sinaliza o tipo antes de ler o texto (.type-seg da referência). */
.entry-type-seg { display: grid; width: 100%; padding: 0.25rem; }
.entry-type-seg .btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    padding: 0.5625rem;
    font-weight: 700;
}
.entry-type-seg .btn .ms { width: 1.125rem; height: 1.125rem; }
.entry-type-seg .btn-check:checked + .entry-type-btn-d { background-color: var(--bs-danger); color: #fff; }
.entry-type-seg .btn-check:checked + .entry-type-btn-c { background-color: var(--bs-success); color: #fff; }

/* Repetição: trilho com borda, opções compactas (13px, 36px de altura) */
.entry-repeat-seg {
    display: grid;
    width: 100%;
    padding: 0.1875rem;
    gap: 0.1875rem;
    border: 1px solid #e6e9f0;
    background-color: #f5f6fa;
}
.entry-repeat-seg .btn {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 2.125rem;
    padding: 0 0.5rem;
    font-size: 0.8125rem;
    white-space: nowrap;
}

/* Rodapé: Excluir compacto à esquerda (só ao editar) + Salvar ocupando o resto da linha — a
   referência não tem "Cancelar", o X do cabeçalho já fecha (.sheet-actions). */
.entry-form-footer { flex-wrap: nowrap; gap: 0.625rem; }
.entry-form-footer > * { margin: 0; }
.entry-submit-btn,
.entry-delete-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    height: 2.875rem;
    border-radius: 999px;
    font-weight: 600;
    white-space: nowrap;
}
.entry-submit-btn { flex: 1; min-width: 0; box-shadow: 0 2px 8px rgba(var(--bs-primary-rgb), .3); }
.entry-delete-btn {
    flex: none;
    padding: 0 1.125rem;
    border: 1px solid #e6e9f0;
    background-color: #fff;
    color: var(--bs-danger);
}
.entry-delete-btn:hover { border-color: var(--bs-danger); color: var(--bs-danger); }
/* Mesma altura para os três botões do rodapé (.btn-pill tem altura própria e ficava mais baixo) */
.entry-form-footer .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 2.875rem;
}
.entry-form-footer .entry-cancel-btn { flex: none; padding: 0 1.125rem; }
/* Celular: Excluir vira só o ícone e "Salvar alterações" vira "Salvar", para os três botões
   caberem numa linha. Com o Excluir armado ("Confirmar"), o Cancelar some — o X do cabeçalho
   continua fechando o modal (e fechar desarma a exclusão). */
@media (max-width: 575.98px) {
    .entry-delete-btn:not(.confirming) { width: 2.875rem; padding: 0; }
    .entry-delete-btn:not(.confirming) .entry-delete-btn-text { display: none; }
    .entry-form-footer .entry-cancel-btn { padding: 0 0.875rem; }
    .entry-delete-btn.confirming ~ .entry-cancel-btn { display: none; }
    .entry-submit-extra { display: none; }
}

/* Exclusão em dois toques (scope.md, "Formulário"): o 1º clique só "arma" o botão (vermelho,
   texto "Confirmar"); o 2º clique exclui de fato — sem confirm() nativo do navegador. */
#entry-delete-btn.confirming,
#entry-delete-btn.confirming:hover {
    background-color: var(--bs-danger);
    border-color: var(--bs-danger);
    color: #fff;
}

/* O dark.css do tema inverte o .btn-close com filter: invert(1), o que invertia também o fundo
   do círculo (ficava claro). Sem filtro, com o X desenhado já na cor clara (--ds-text). */
body.dark #entryFormModal .btn-close {
    filter: none;
    background-color: var(--ds-field-bg);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23d7dbe6'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e");
}
body.dark #entryFormModal .modal-title { color: var(--ds-text); }
body.dark #entryFormModal .form-label,
body.dark .entry-value-field > label,
body.dark .entry-value-input span { color: var(--ds-muted); }
body.dark #entryFormModal .form-control,
body.dark #entryFormModal .combobox-toggle,
body.dark .entry-switch-row,
body.dark .entry-repeat-seg { background-color: var(--ds-field-bg); border-color: var(--ds-border); color: var(--ds-text); }
body.dark .entry-value-input input { color: var(--ds-text); }
body.dark #entryFormModal .combobox-toggle.is-empty { color: var(--ds-muted); }
body.dark .entry-cat-chip { border-color: var(--ds-border); background: var(--ds-field-bg); color: var(--ds-text); }
body.dark .entry-delete-btn { background-color: var(--ds-field-bg); border-color: var(--ds-border); }


/* Dashboard */
body.dark a.stat-tile:hover,
body.dark .dash-campaign,
body.dark .dash-campaign:hover,
body.dark .dash-shortcut,
body.dark .dash-shortcut:hover,
body.dark .dash-meter-label b,
body.dark .dash-campaign-name,
body.dark .dash-shortcut-text b { color: var(--ds-text); }
body.dark .dash-campaign + .dash-campaign,
body.dark .dash-shortcut { border-color: var(--ds-border); }
body.dark .dash-shortcut:hover { border-color: transparent; }
body.dark .dash-meter-track { background: var(--ds-border); }

/* Foto do usuário */
body.dark .avatar-upload { border-color: var(--ds-border); }

/* Menu lateral */
body.dark .sidebar.ds-sidebar {
    --ds-side-item: #b3bacb;
    --ds-side-strong: #e4e7ef;
    --ds-side-muted: #8a92a6;
    --ds-side-line: var(--ds-border);
    --ds-side-guide: #353d55;
    --ds-side-hover: rgba(255, 255, 255, 0.05);
    --ds-side-active-bg: rgba(var(--bs-primary-rgb), 0.26);
    --ds-side-active-fg: color-mix(in srgb, var(--bs-primary) 45%, #fff);
    --ds-side-surface: var(--ds-surface);
}
body.dark .ds-user-menu { border-color: var(--ds-border); background: var(--ds-surface); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45); }
body.dark .ds-user-menu .dropdown-item { color: #b3bacb; }
body.dark .ds-user-menu .dropdown-item:is(:hover, :focus) { background: rgba(255, 255, 255, 0.06); color: #fff; }
body.dark .ds-user-menu .dropdown-item:is(:hover, :focus) .ms { color: #fff; }
body.dark .ds-user-menu .dropdown-divider { border-color: var(--ds-border); }
body.dark .ds-brand-mark { background: rgba(255, 255, 255, 0.92); }
body.dark .ds-brand-name b { color: color-mix(in srgb, var(--bs-primary) 50%, #fff); }

/* Indicadores (ui.stat-tile) e textos secundários da dashboard no escuro */
body.dark .stat-tile { background: var(--ds-surface); color: var(--ds-text); box-shadow: none; border: 1px solid var(--ds-border); }
body.dark a.stat-tile:hover { border-color: rgba(var(--bs-primary-rgb), 0.6); }
body.dark .stat-tile-value small,
body.dark .stat-tile-label,
body.dark .dash-campaign-when,
body.dark .dash-meter-label,
body.dark .dash-shortcut-text span,
body.dark .dash-shortcut-arrow { color: var(--ds-muted); }
body.dark .stat-tile-bar { background: var(--ds-border); }
body.dark .iq-navbar.ds-topbar .ds-brand { --ds-side-strong: #e4e7ef; }
body.dark .ds-topbar-menu { background: var(--ds-surface); border-color: var(--ds-border); color: #b3bacb; box-shadow: none; }
body.dark .ds-topbar-menu:hover { color: #fff; border-color: #4a5470; }
body.dark .ds-user-menu-head b { color: #e4e7ef; }
/* Linha inativa */
body.dark table.table-neutral tbody tr.row-inactive > td { color: #6f778c !important; }
body.dark .tag-inactive { background: rgba(255, 255, 255, 0.08); color: #aab1c2; }
/* Barra de rolagem horizontal das tabelas: ficava branca no escuro */
body.dark .table-responsive { scrollbar-color: #4a5470 transparent; }
/* Categorias */
body.dark { --cat-tint: 20%; --cat-ink: 62%; }
body.dark .cat-tile,
body.dark .cat-icon-opt span { border-color: var(--ds-border); }
body.dark .cat-tile { background: transparent; }
body.dark .cat-tile:hover { border-color: color-mix(in srgb, var(--cat-color) 45%, var(--ds-border)); box-shadow: none; }
body.dark .cat-row,
body.dark .cat-preview-hero,
body.dark .cat-detail-actions { border-color: var(--ds-border); }
body.dark .cat-count,
body.dark .cat-stmt,
body.dark .cat-icon-opt span:hover { background: var(--ds-field-bg); }
body.dark .cat-swatch span { box-shadow: 0 0 0 2px var(--ds-surface), 0 0 0 3px transparent; }
body.dark .cat-swatch input:checked + span { box-shadow: 0 0 0 2px var(--ds-surface), 0 0 0 4px var(--cat-color); }
body.dark .cat-donut-track { stroke: var(--ds-border); }
body.dark .cat-donut-legend i.cat-donut-track-dot { background: var(--ds-border); }
body.dark .cat-icon-grid { scrollbar-color: #4a5470 transparent; }
body.dark #cat-form .form-control { background-color: var(--ds-field-bg); border-color: var(--ds-border); color: var(--ds-text); }
body.dark #cat-form .form-control:focus { background-color: var(--ds-field-bg); }