:root{
    --topbar:#1d3557;
    --topbar-dark:#172b49;
    --topbar-hover:#2a527d;
    --topbar-active:#3373ad;
    --bg:#eef2f7;
    --text:#25324a;
    --content-padding:24px;
    --card-radius:12px;
}

*{box-sizing:border-box}

html{
    scroll-behavior:smooth;
}

body{
    min-height:100vh;
    margin:0;
    background:var(--bg);
    color:var(--text);
    font-size:15px;
}

/*
|--------------------------------------------------------------------------
| Menu superior
|--------------------------------------------------------------------------
*/
.topbar{
    position:sticky;
    top:0;
    z-index:1030;
    color:#fff;
    background:linear-gradient(135deg,var(--topbar) 0%,var(--topbar-dark) 100%);
    box-shadow:0 5px 20px rgba(20,42,72,.18);
}

.topbar-main{
    min-height:62px;
    padding:8px clamp(14px,2vw,28px);
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:18px;
}

.topbar-brand{
    min-width:0;
    display:inline-flex!important;
    align-items:center;
    gap:11px;
    color:#fff;
    text-decoration:none;
}

.topbar-brand:hover{
    color:#fff;
}

.topbar-logo{
    display:block;
    width:44px;
    height:44px;
    flex:0 0 44px;
    object-fit:contain;
    border-radius:11px;
    filter:drop-shadow(0 4px 8px rgba(0,0,0,.18));
}

.topbar-brand-copy{
    min-width:0;
    display:flex;
    flex-direction:column;
    line-height:1.05;
}

.topbar-brand-title{
    color:#fff;
    font-size:1.08rem;
    font-weight:750;
    letter-spacing:.01em;
    white-space:nowrap;
}

.topbar-brand-subtitle{
    margin-top:4px;
    color:#bcd0e7;
    font-size:.73rem;
    font-weight:600;
    letter-spacing:.08em;
    text-transform:uppercase;
}

.topbar-account{
    display:flex;
    align-items:center;
    gap:10px;
}

.topbar-user{
    display:flex;
    align-items:center;
    gap:8px;
    color:#dbe7f4;
    padding-right:12px;
    border-right:1px solid rgba(255,255,255,.16);
}

.topbar-user > i{
    font-size:1.45rem;
    line-height:1;
}

.topbar-user-copy{
    display:flex;
    flex-direction:column;
    line-height:1.05;
}

.topbar-user-copy small{
    color:#abc2db;
    font-size:.66rem;
}

.topbar-user-copy strong{
    max-width:150px;
    overflow:hidden;
    color:#fff;
    font-size:.88rem;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.topbar-logout{
    display:inline-flex!important;
    align-items:center;
    justify-content:center;
    gap:7px;
    min-height:38px;
    padding:7px 11px!important;
    color:#e7eff8;
    text-decoration:none;
    border:1px solid rgba(255,255,255,.15);
    border-radius:9px;
    background:rgba(255,255,255,.055);
    transition:background-color .18s ease,border-color .18s ease,color .18s ease,transform .18s ease;
}

.topbar-logout:hover{
    color:#fff;
    border-color:rgba(255,255,255,.25);
    background:rgba(255,255,255,.12);
    transform:translateY(-1px);
}

.topbar-nav-shell{
    padding:7px clamp(10px,1.5vw,22px) 8px;
    overflow:hidden;
    border-top:1px solid rgba(255,255,255,.08);
    background:rgba(5,20,39,.18);
}

.topbar-nav{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:5px;
    overflow-x:auto;
    overflow-y:hidden;
    padding:1px 0 2px;
    scroll-behavior:smooth;
    scrollbar-color:rgba(255,255,255,.24) transparent;
    scrollbar-width:thin;
    overscroll-behavior-x:contain;
}

.topbar-nav::-webkit-scrollbar{
    height:4px;
}

.topbar-nav::-webkit-scrollbar-track{
    background:transparent;
}

.topbar-nav::-webkit-scrollbar-thumb{
    background:rgba(255,255,255,.24);
    border-radius:10px;
}

.topbar-link{
    position:relative;
    flex:0 0 auto;
    display:inline-flex!important;
    align-items:center;
    justify-content:center;
    gap:7px;
    min-height:38px;
    padding:8px 11px!important;
    color:#d4e1ef;
    text-decoration:none;
    border:1px solid transparent;
    border-radius:9px;
    font-size:.9rem;
    font-weight:500;
    line-height:1.1;
    white-space:nowrap;
    transition:background-color .18s ease,border-color .18s ease,color .18s ease,box-shadow .18s ease,transform .18s ease;
}

.topbar-link-icon{
    font-size:1rem;
    line-height:1;
}

.topbar-link:hover{
    color:#fff;
    border-color:rgba(255,255,255,.10);
    background:var(--topbar-hover);
    transform:translateY(-1px);
}

.topbar-link.active{
    color:#fff;
    border-color:rgba(143,208,255,.28);
    background:linear-gradient(135deg,var(--topbar-active) 0%,#2b6296 100%);
    box-shadow:0 5px 14px rgba(0,0,0,.18),inset 0 -2px 0 #8fd0ff;
    font-weight:700;
}

.topbar-link:focus-visible,
.topbar-brand:focus-visible,
.topbar-logout:focus-visible{
    outline:3px solid rgba(143,208,255,.9);
    outline-offset:2px;
}

.content{
    width:100%;
    padding:var(--content-padding);
}

/*
|--------------------------------------------------------------------------
| Títulos, cartões e botões
|--------------------------------------------------------------------------
*/
.page-heading{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
}

.page-heading,
.content > .d-flex.justify-content-between.align-items-center{
    margin-bottom:18px!important;
}

.page-heading h2,
.content > .d-flex h2{
    font-size:1.8rem;
    line-height:1.15;
    margin-bottom:5px;
}

.page-heading p{
    color:#6c757d;
    margin:0;
}

.card{
    border:0;
    border-radius:var(--card-radius);
    box-shadow:0 3px 14px rgba(0,0,0,.07);
}

.card-body{
    padding:16px;
}

.card-header{
    background:#fff;
    border-bottom:1px solid #edf0f5;
    padding:12px 16px;
}

.btn{
    padding:.45rem .78rem;
    font-size:.94rem;
}

.btn-sm{
    padding:.28rem .5rem;
    font-size:.82rem;
}

.metric-card .card-body{
    padding:15px 16px;
}

.metric-card .metric-icon{
    font-size:1.45rem;
    float:right;
}

.metric-card .h4,
.compact-summary .h4{
    font-size:1.35rem;
    margin-top:3px;
    margin-bottom:0;
}

/*
|--------------------------------------------------------------------------
| Formulários
|--------------------------------------------------------------------------
*/
.form-label{
    margin-bottom:4px;
}

.form-control,
.form-select{
    min-height:38px;
    padding:.4rem .68rem;
    font-size:.93rem;
}

textarea.form-control{
    min-height:auto;
}

/* Barra de filtros flexível: permanece em uma linha quando há espaço e
   quebra de forma organizada quando a largura diminui. */
.filter-toolbar{
    display:flex;
    flex-wrap:wrap;
    align-items:flex-end;
    gap:10px;
}

.filter-toolbar .filter-search{
    flex:2 1 210px;
}

.filter-toolbar .filter-select{
    flex:1 1 150px;
}

.filter-toolbar .filter-date{
    flex:0 1 132px;
}

.filter-toolbar .filter-action{
    flex:0 0 42px;
}

.filter-toolbar .filter-action .btn{
    width:42px;
    height:38px;
    padding:0;
    display:flex;
    align-items:center;
    justify-content:center;
}

/*
|--------------------------------------------------------------------------
| Tabelas
|--------------------------------------------------------------------------
*/
.table{
    margin-bottom:0;
    font-size:.92rem;
}

.table > :not(caption) > * > *{
    padding:.62rem .68rem;
}

.table thead th{
    font-size:.88rem;
    white-space:nowrap;
}

.entry-table .entry-date,
.entry-table .entry-status,
.entry-table .entry-value,
.entry-table .entry-actions{
    white-space:nowrap;
}

.entry-table .entry-description{
    min-width:180px;
}

.entry-table .entry-account{
    min-width:155px;
}

.entry-table .badge{
    font-size:.72rem;
    padding:.35em .55em;
}

.entry-table .entry-actions .btn{
    width:31px;
    height:31px;
    padding:0;
    display:inline-flex;
    align-items:center;
    justify-content:center;
}

.entry-table .small{
    line-height:1.25;
}

.category-dot{
    width:9px;
    height:9px;
    border-radius:50%;
    display:inline-block;
    margin-right:6px;
}

.category-icon{
    width:34px;
    height:34px;
    border-radius:9px;
    color:#fff;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    margin-right:9px;
}

.login-page{background:linear-gradient(135deg,#eef2f7,#dce6f2)}
.progress{height:10px}
.account-card{transition:.2s}
.account-card:hover{transform:translateY(-2px)}

/* Gráficos com altura controlada para não ocuparem a tela inteira. */
#chartMonthly,
#chartCategories{
    max-height:255px;
}

/*
|--------------------------------------------------------------------------
| Monitores intermediários e notebooks
|--------------------------------------------------------------------------
*/
@media(max-width:1440px){
    :root{
        --content-padding:18px;
    }

    body{font-size:14px}

    .topbar-main{
        min-height:58px;
        padding-top:7px;
        padding-bottom:7px;
    }

    .topbar-logo{
        width:40px;
        height:40px;
        flex-basis:40px;
    }

    .topbar-brand-title{
        font-size:1rem;
    }

    .topbar-brand-subtitle{
        font-size:.68rem;
    }

    .topbar-nav-shell{
        padding-top:6px;
        padding-bottom:7px;
    }

    .topbar-link{
        min-height:36px;
        padding:7px 9px!important;
        font-size:.84rem;
    }

    .topbar-user-copy strong{
        max-width:115px;
        font-size:.84rem;
    }

    .topbar-logout{
        min-height:36px;
        padding:6px 9px!important;
    }

    .page-heading,
    .content > .d-flex.justify-content-between.align-items-center{
        margin-bottom:14px!important;
    }

    .page-heading h2,
    .content > .d-flex h2{
        font-size:1.55rem;
    }

    .row.g-3.mb-4,
    .row.g-4.mb-4{
        margin-bottom:14px!important;
    }

    .card-body{padding:13px}
    .card-header{padding:10px 13px}

    .metric-card .card-body{padding:12px 13px}
    .metric-card .h4,
    .compact-summary .h4{font-size:1.18rem}

    .table > :not(caption) > * > *{
        padding:.52rem .55rem;
    }

    .filter-toolbar{
        gap:8px;
    }

    .filter-toolbar .filter-search{flex-basis:190px}
    .filter-toolbar .filter-select{flex-basis:140px}
    .filter-toolbar .filter-date{flex-basis:125px}
}

/* Em larguras menores, os filtros quebram em linhas sem criar rolagem. */
@media(max-width:1180px){
    .topbar-nav{
        justify-content:flex-start;
    }

    .filter-toolbar .filter-search{flex:1 1 250px}
    .filter-toolbar .filter-select{flex:1 1 190px}
    .filter-toolbar .filter-date{flex:1 1 150px}
    .filter-toolbar .filter-action{flex:0 0 42px}
}

@media(max-width:991px){
    .content{
        padding:15px;
    }

    .page-heading{
        align-items:flex-start;
        gap:10px;
    }
}

@media(max-width:767px){
    .topbar-main{
        padding-left:12px;
        padding-right:12px;
        gap:10px;
    }

    .topbar-brand{
        gap:9px;
    }

    .topbar-brand-subtitle{
        display:none;
    }

    .topbar-user{
        padding-right:9px;
    }

    .topbar-user-copy small{
        display:none;
    }

    .topbar-nav-shell{
        padding-left:8px;
        padding-right:8px;
    }

    .topbar-link{
        min-height:35px;
        padding-left:9px!important;
        padding-right:9px!important;
        font-size:.83rem;
    }
}

@media(max-width:575px){
    .page-heading{
        display:block;
    }

    .page-heading .btn{
        margin-top:10px;
        width:100%;
    }

    .page-heading > .d-flex{
        width:100%;
        flex-direction:column;
        gap:0!important;
    }

    .content > .d-flex.justify-content-between.align-items-center{
        align-items:flex-start!important;
        flex-wrap:wrap;
        gap:10px;
    }

    .filter-toolbar > *{
        flex:1 1 100%!important;
    }

    .filter-toolbar .filter-action .btn{
        width:100%;
    }

    .topbar-main{
        min-height:54px;
        padding:7px 10px;
    }

    .topbar-logo{
        width:36px;
        height:36px;
        flex-basis:36px;
        border-radius:9px;
    }

    .topbar-brand-title{
        font-size:.92rem;
    }

    .topbar-user{
        padding-right:7px;
    }

    .topbar-user > i{
        font-size:1.3rem;
    }

    .topbar-user-copy{
        display:none;
    }

    .topbar-logout{
        min-width:35px;
        min-height:35px;
        padding:6px 8px!important;
    }

    .topbar-logout span{
        display:none;
    }

    .topbar-link{
        font-size:.81rem;
    }
}

@media(max-width:360px){
    .topbar-brand-title{
        font-size:.86rem;
    }

    .topbar-account{
        gap:6px;
    }
}

@media print{
    .topbar,.no-print,.btn{display:none!important}
    .content{padding:0}
    .card{box-shadow:none}
}

/*
|--------------------------------------------------------------------------
| Tela de login
|--------------------------------------------------------------------------
*/
.login-page{
    min-height:100vh;
    margin:0;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:24px;
    background:
        radial-gradient(circle at top left,rgba(255,255,255,.9),transparent 34%),
        linear-gradient(135deg,#eef3f9,#dce6f2);
}

.login-container{
    width:100%;
    max-width:460px;
}

.login-card{
    width:100%;
    padding:30px 34px 34px;
    border:1px solid rgba(255,255,255,.8);
    border-radius:18px;
    box-shadow:0 16px 42px rgba(29,53,87,.14);
}

.login-brand{
    margin-bottom:22px;
}

.login-logo{
    display:block;
    width:100%;
    height:auto;
    max-width:360px;
    max-height:118px;
    margin:0 auto 12px;
    object-fit:contain;
}

.login-title{
    margin:0 0 5px;
    color:#17233a;
    font-size:2rem;
    font-weight:700;
    line-height:1.15;
}

.login-subtitle{
    margin:0;
    color:#6b778c;
    font-size:1rem;
}

.login-form .form-label{
    color:#344054;
    font-weight:600;
}

.login-form .input-group-text{
    min-width:44px;
    justify-content:center;
    color:#52709a;
    background:#f6f8fb;
    border-color:#d8e0ea;
}

.login-form .form-control{
    min-height:44px;
    border-color:#d8e0ea;
}

.login-form .form-control:focus{
    border-color:#6ea8fe;
    box-shadow:0 0 0 .2rem rgba(13,110,253,.12);
}

.login-button{
    min-height:44px;
    font-weight:600;
}

@media(max-height:650px){
    .login-page{
        align-items:flex-start;
        padding-top:18px;
        padding-bottom:18px;
    }

    .login-card{
        padding-top:20px;
        padding-bottom:24px;
    }

    .login-brand{
        margin-bottom:14px;
    }

    .login-logo{
        max-width:310px;
        max-height:92px;
        margin-bottom:6px;
    }

    .login-title{
        font-size:1.7rem;
    }
}

@media(max-width:575px){
    .login-page{
        padding:14px;
    }

    .login-card{
        padding:24px 20px 26px;
        border-radius:15px;
    }

    .login-logo{
        max-width:285px;
        max-height:90px;
    }

    .login-title{
        font-size:1.65rem;
    }
}

/*
|--------------------------------------------------------------------------
| Celular (set/2026)
|--------------------------------------------------------------------------
| No celular o menu de cima fica só com a marca e a navegação passa para uma
| barra fixa embaixo, no estilo de app. As tabelas principais viram cartões
| e os filtros de lançamentos ficam recolhidos atrás de um botão.
*/
.flash-alert{
    z-index:9999;
    min-width:320px;
    max-width:calc(100vw - 2rem);
}

.chart-box{
    position:relative;
    height:255px;
}

.fatura-seletor{
    min-width:0;
    flex:1 1 220px;
    max-width:340px;
}

.entry-mobile-label{
    display:none;
}

.bottom-nav,
.menu-mais{
    display:none;
}

@media screen and (max-width:767px){
    body{
        padding-bottom:calc(74px + env(safe-area-inset-bottom));
    }

    /* Topo: só a marca e a conta, sem ficar grudado na tela. */
    .topbar{
        position:static;
    }

    .topbar-nav-shell{
        display:none;
    }

    /* Barra inferior */
    .bottom-nav{
        position:fixed;
        left:0;
        right:0;
        bottom:0;
        z-index:1035;
        display:grid;
        grid-template-columns:repeat(5,1fr);
        align-items:end;
        padding:6px 4px calc(6px + env(safe-area-inset-bottom));
        background:#fff;
        border-top:1px solid #e3e8ef;
        box-shadow:0 -6px 20px rgba(20,42,72,.08);
    }

    .bottom-nav-link{
        position:relative;
        display:flex;
        flex-direction:column;
        align-items:center;
        justify-content:center;
        gap:2px;
        min-height:52px;
        padding:4px 2px;
        color:#6b778c;
        font-size:.68rem;
        font-weight:500;
        line-height:1.1;
        text-decoration:none;
        background:none;
        border:0;
        -webkit-tap-highlight-color:transparent;
    }

    .bottom-nav-link i{
        font-size:1.3rem;
        line-height:1;
    }

    .bottom-nav-link.active{
        color:var(--topbar-active);
        font-weight:700;
    }

    .bottom-nav-link.active::before{
        content:"";
        position:absolute;
        top:-6px;
        left:28%;
        right:28%;
        height:3px;
        border-radius:0 0 3px 3px;
        background:var(--topbar-active);
    }

    .bottom-nav-add{
        justify-self:center;
        display:flex;
        align-items:center;
        justify-content:center;
        width:54px;
        height:54px;
        margin-top:-22px;
        color:#fff;
        font-size:1.6rem;
        text-decoration:none;
        border-radius:50%;
        border:4px solid var(--bg);
        background:linear-gradient(135deg,var(--topbar-active) 0%,var(--topbar) 100%);
        box-shadow:0 6px 16px rgba(29,53,87,.35);
        -webkit-tap-highlight-color:transparent;
    }

    .bottom-nav-add:hover,
    .bottom-nav-add:active{
        color:#fff;
    }

    /* Painel "Mais" */
    .menu-mais{
        display:flex;
        height:auto!important;
        max-height:80vh;
        border-radius:18px 18px 0 0;
        padding-bottom:env(safe-area-inset-bottom);
    }

    .menu-mais-grid{
        display:grid;
        grid-template-columns:repeat(3,1fr);
        gap:8px;
    }

    .menu-mais-item{
        display:flex;
        flex-direction:column;
        align-items:center;
        justify-content:center;
        gap:6px;
        min-height:78px;
        padding:10px 4px;
        color:var(--text);
        font-size:.8rem;
        font-weight:500;
        text-align:center;
        text-decoration:none;
        border:1px solid #e3e8ef;
        border-radius:12px;
        background:#f7f9fc;
    }

    .menu-mais-item i{
        font-size:1.35rem;
        color:var(--topbar-active);
    }

    .menu-mais-item.active{
        color:#fff;
        border-color:transparent;
        background:linear-gradient(135deg,var(--topbar-active) 0%,#2b6296 100%);
    }

    .menu-mais-item.active i{
        color:#fff;
    }

    /* Campos com 16px para o iPhone não dar zoom ao tocar. */
    .form-control,
    .form-select,
    .form-control-sm,
    .form-select-sm{
        font-size:16px;
    }

    .form-control,
    .form-select{
        min-height:42px;
    }

    .page-heading h2,
    .content > .d-flex h2{
        font-size:1.35rem;
    }

    .page-heading p{
        font-size:.88rem;
    }

    /* Cards de resumo lado a lado (2 por linha) */
    .compact-summary .card-body,
    .metric-card .card-body,
    .report-summary .card-body{
        padding:11px 12px;
    }

    .compact-summary small,
    .metric-card .small{
        font-size:.74rem;
        line-height:1.2;
        display:block;
    }

    .metric-card .h4,
    .compact-summary .h4,
    .report-summary h4{
        font-size:1.05rem;
        white-space:nowrap;
    }

    .metric-card .metric-icon{
        font-size:1.1rem;
    }

    .chart-box{
        height:230px;
    }

    /* "Sua parte: R$ ..." não quebra no meio do valor. */
    td.text-end .small,
    .list-group-item .text-end .small{
        white-space:nowrap;
    }

    #chartCategories{
        max-height:none;
    }

    .col-lg-4 .chart-box{
        height:280px;
    }

    .flash-alert{
        left:12px;
        right:12px;
        margin:10px 0!important;
        min-width:0;
        max-width:none;
    }

    /* Botão que abre/fecha os filtros */
    .filter-toggle{
        display:flex;
        align-items:center;
        justify-content:space-between;
        gap:10px;
        background:#fff;
    }

    .filter-toggle:hover .text-secondary,
    .filter-toggle:active .text-secondary{
        color:rgba(255,255,255,.85)!important;
    }

    .fatura-seletor{
        flex:1 1 0;
        max-width:none;
    }

    .modal-fullscreen-sm-down .modal-footer .btn{
        flex:1 1 0;
    }

    /*
    | Lançamentos e fatura em formato de cartão.
    | Linha 1: descrição .......... valor
    | Linha 2: conta/categoria .... situação
    | Linha 3: data ............... ações
    */
    .entry-table-cards thead{
        display:none;
    }

    .entry-table-cards,
    .entry-table-cards tbody,
    .entry-table-cards tfoot{
        display:block;
        width:100%;
    }

    .entry-table-cards tbody tr{
        display:grid;
        grid-template-columns:minmax(0,1fr) auto;
        grid-template-areas:
            "desc value"
            "account status"
            "date actions";
        column-gap:0;
        row-gap:3px;
        padding:12px 14px;
        border-bottom:1px solid #edf0f5;
    }

    .entry-table-cards tbody tr:last-child{
        border-bottom:0;
    }

    .entry-table-cards > :not(caption) > * > *{
        padding:0;
        border:0;
        box-shadow:none;
    }

    /* Espaço entre colunas feito com padding para a linha tracejada ficar contínua. */
    .entry-table-cards tbody td + td.entry-value,
    .entry-table-cards tbody td.entry-status,
    .entry-table-cards tbody td.entry-actions{
        padding-left:12px!important;
    }

    .entry-table-cards .entry-description{
        grid-area:desc;
        min-width:0;
    }

    .entry-table-cards .entry-description .badge{
        margin-left:0!important;
        margin-right:3px;
        white-space:normal;
        text-align:left;
    }

    .entry-table-cards .entry-account{
        grid-area:account;
        min-width:0;
        color:#6c757d;
        font-size:.83rem;
    }

    .entry-table-cards .entry-account .small{
        display:inline;
        margin-left:6px;
    }

    .entry-table-cards .entry-date{
        grid-area:date;
        display:flex;
        flex-direction:column;
        justify-content:center;
        color:#6c757d;
        font-size:.8rem;
        line-height:1.25;
    }

    .entry-table-cards .entry-date,
    .entry-table-cards .entry-actions{
        margin-top:8px;
        padding-top:8px!important;
        border-top:1px solid #eef1f6!important;
    }

    .entry-table-cards .entry-date .small{
        font-size:.75rem;
    }

    .entry-table-cards .entry-status{
        grid-area:status;
        align-self:start;
        text-align:right;
    }

    .entry-table-cards .entry-value{
        grid-area:value;
        text-align:right;
    }

    .entry-table-cards .entry-actions{
        grid-area:actions;
        display:flex;
        flex-wrap:wrap;
        justify-content:flex-end;
        align-items:center;
        gap:6px;
    }

    .entry-table-cards .entry-actions .btn{
        width:38px;
        height:36px;
    }

    .entry-table-cards .entry-empty{
        grid-column:1 / -1;
    }

    .entry-mobile-label{
        display:inline;
        font-size:.75rem;
    }

    /* Na fatura: sua parte em cima, total embaixo e situação junto das ações. */
    .fatura-table tbody tr{
        grid-template-columns:minmax(0,1fr) auto auto;
        grid-template-areas:
            "desc desc share"
            "account account total"
            "date status actions";
    }

    /* O vencimento é o da própria fatura (já aparece no topo). */
    .fatura-table .entry-date .small{
        display:none;
    }

    .fatura-table .entry-status{
        display:flex;
        align-items:center;
        margin-top:8px;
        padding-top:8px!important;
        border-top:1px solid #eef1f6!important;
    }

    .fatura-table .entry-share{
        grid-area:share;
    }

    .fatura-table .entry-total{
        grid-area:total;
        color:#6c757d;
        font-size:.83rem;
    }

    .fatura-table tfoot tr{
        display:grid;
        grid-template-columns:1fr auto auto;
        gap:10px;
        padding:12px 14px;
        background:#f7f9fc;
    }

    .fatura-table tfoot td{
        padding:0;
        border:0;
    }

    .fatura-table tfoot td:first-child{
        text-align:left!important;
    }

    .fatura-table tfoot td:last-child{
        display:none;
    }

    /*
    | Tabelas simples (.table-stack): cada linha vira um cartão com
    | "rótulo ...... valor". O rótulo vem do data-label (preenchido no app.js).
    */
    .table-stack thead{
        display:none;
    }

    .table-stack,
    .table-stack tbody,
    .table-stack tr,
    .table-stack td{
        display:block;
        width:100%;
    }

    .table-stack tbody tr{
        padding:10px 14px;
        border-bottom:1px solid #edf0f5;
    }

    .table-stack tbody tr:last-child{
        border-bottom:0;
    }

    .table-stack > :not(caption) > * > *{
        position:relative;
        padding:3px 0 3px 40%;
        text-align:right;
        border:0;
        box-shadow:none;
    }

    .table-stack td::before{
        content:attr(data-label);
        position:absolute;
        left:0;
        top:3px;
        width:38%;
        color:#6c757d;
        font-size:.8rem;
        text-align:left;
    }

    .table-stack td[data-label=""]{
        padding-left:0;
    }

    .table-stack td.stack-title{
        padding-left:0;
        padding-bottom:6px;
        font-size:1rem;
        font-weight:600;
        text-align:left;
    }

    .table-stack td.stack-title .small{
        font-weight:400;
    }

    .table-stack td.stack-title::before,
    .table-stack td.stack-actions::before{
        content:none;
    }

    .table-stack td.stack-actions{
        padding-left:0;
        padding-top:8px;
        margin-top:6px;
        border-top:1px solid #eef1f6;
    }

    .table-stack td.stack-actions .btn{
        min-height:36px;
    }
}

@media (max-width:575px){
    .content{
        padding:12px;
    }

    .btn-mobile-block,
    .btn-group-mobile-block{
        width:100%;
    }

    /* Dois botões no cabeçalho (ex.: Nova compra / Voltar) ficam lado a lado. */
    .page-heading > .d-flex{
        flex-direction:row!important;
        gap:8px!important;
        margin-top:10px;
    }

    .page-heading > .d-flex > *{
        flex:1 1 0;
    }

    .page-heading > .d-flex .btn{
        margin-top:0;
    }

    .btn-group-mobile-block > .btn{
        flex:1 1 0;
    }

    /* Filtros: pesquisa e botão na linha inteira, o resto dois por linha. */
    .filter-toolbar > *{
        flex:1 1 calc(50% - 5px)!important;
        min-width:0;
    }

    .filter-toolbar .filter-search,
    .filter-toolbar .filter-action{
        flex-basis:100%!important;
    }

    .filter-toolbar .form-label{
        margin-bottom:2px;
    }
}

@media print{
    body{padding-bottom:0}
}

/* ------------------------------------------------------------------
   Veículos (set/2026)
   ------------------------------------------------------------------ */
.veiculos-subnav{
    flex-wrap:nowrap;
    overflow-x:auto;
    gap:4px;
    scrollbar-width:none;
}
.veiculos-subnav::-webkit-scrollbar{display:none}
.veiculos-subnav .nav-link{white-space:nowrap}
.veiculo-numeros{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:10px 16px;
}
.combustivel-opcoes{
    display:flex;
    flex-wrap:wrap;
    gap:6px;
}
.combustivel-opcoes .btn{border-radius:999px}