/* =========================================
   FUNDO E ALTURA — PÁGINA CADASTRO
   (mesmo bege de Transações / .nf-content)
========================================= */

html:has(#nfCategoriesPage){

    background:#f8f3ea !important;

    background-image:none !important;

    min-height:100%;
}

body:has(#nfCategoriesPage){

    background:#f8f3ea !important;

    background-image:none !important;

    min-height:100vh;
}

body:has(#nfCategoriesPage)
.site,
body:has(#nfCategoriesPage)
.site-content,
body:has(#nfCategoriesPage)
.site-main,
body:has(#nfCategoriesPage)
#content,
body:has(#nfCategoriesPage)
.entry-content,
body:has(#nfCategoriesPage)
.elementor-location-single{

    background:#f8f3ea !important;

    background-image:none !important;
}

.nf-app:has(#nfCategoriesPage){

    background:#f8f3ea !important;

    min-height:100vh;
}

.nf-main:has(#nfCategoriesPage){

    flex:1;

    min-height:100vh;

    background:#f8f3ea !important;
}

.nf-content:has(#nfCategoriesPage){

    flex:1;

    display:flex;

    flex-direction:column;

    min-height:calc(100vh - 80px);

    background:#f8f3ea !important;
}

/* =========================================
   SETTINGS PAGE
========================================= */

#nfCategoriesPage.nf-settings-page{

    display:grid;

    grid-template-columns:
    230px 1fr;

    gap:24px;

    align-items:start;

    flex:1;

    width:100%;

    max-width:100%;

    min-height:calc(100vh - 80px);

    background:#f8f3ea;
}

/* =========================================
   SIDEBAR
========================================= */

#nfCategoriesPage
.nf-settings-sidebar{

    background:#ffffff;

    border-radius:28px;

    padding:20px;

    position:sticky;

    top:24px;

    box-shadow:
    0 10px 30px
    rgba(0,0,0,.04);
}

#nfCategoriesPage
.nf-settings-logo{

    margin-bottom:28px;
}

#nfCategoriesPage
.nf-settings-logo h2{

    font-size:28px;

    font-weight:900;

    color:#211404;

    margin-bottom:6px;
}

#nfCategoriesPage
.nf-settings-logo span{

    font-size:14px;

    color:#8e8577;
}

#nfCategoriesPage
.nf-settings-menu{

    display:flex;

    flex-direction:column;

    gap:10px;
}

#nfCategoriesPage
.nf-settings-menu button{

    height:50px;

    border:none;

    border-radius:16px;

    background:transparent;

    color:#6b5840;

    font-size:14px;

    font-weight:700;

    text-align:left;

    padding:0 16px;

    cursor:pointer;

    transition:.25s ease;
}

#nfCategoriesPage
.nf-settings-menu button:hover{

    background:#f8f3e8;
}

#nfCategoriesPage
.nf-settings-menu button.active{

    background:#2b1600;

    color:#f6d58a;
}

.nf-settings-menu-hidden{

    display:none !important;
}

/* =========================================
   CONTENT
========================================= */

#nfCategoriesPage
.nf-settings-content{

    display:flex;

    flex-direction:column;

    gap:24px;

    min-width:0;

    flex:1;

    min-height:calc(100vh - 80px);

    background:#f8f3ea;
}

/* =========================================
   CATEGORIAS — GRID WRAP + TOOLBAR
========================================= */

#nfRegisterCategoriasPanel
.nf-categories-grid-wrap,
#nfRegisterCartoesPanel
.nf-cartoes-grid-wrap{

    position:relative;

    flex:1;

    min-height:0;
}

#nfRegisterCategoriasPanel
.nf-cartoes-actions-bar{

    justify-content:flex-start;

    align-items:center;

    gap:12px;

    flex-wrap:nowrap;

    width:100%;
}

#nfRegisterCategoriasPanel
.nf-cartoes-actions-start{

    display:flex;

    align-items:center;

    gap:10px;

    flex-wrap:nowrap;

    flex:1 1 auto;

    min-width:0;
}

#nfRegisterCategoriasPanel
.nf-categories-tabs-row{

    flex:0 0 auto;

    margin-left:0;
}

#nfRegisterCategoriasPanel
.nf-selection-toolbar,
#nfRegisterCategoriasPanel
.nf-selection-toolbar-tabs{

    position:relative;

    z-index:6;
}

/* =========================================
   PAINÉIS
========================================= */

#nfCategoriesPage
.nf-register-panel{

    display:flex;

    flex-direction:column;

    gap:14px;

    flex:1;

    width:100%;

    min-height:0;

    background:transparent;
}

#nfCategoriesPage.nf-cadastro-page
.nf-register-panel{

    gap:14px;
}

#nfCategoriesPage
.nf-register-placeholder{

    margin:0;

    padding:28px 20px;

    text-align:center;

    font-size:15px;

    font-weight:600;

    color:#8e8577;

    background:#ffffff;

    border-radius:20px;

    border:1px solid
    rgba(139,94,0,.10);

    box-shadow:
    0 10px 30px
    rgba(0,0,0,.04);
}

/* =========================================
   GRID
========================================= */

#nfCategoriesPage
.nf-settings-grid{

    display:grid;

    grid-template-columns:
    repeat(3,minmax(0,1fr));

    gap:18px;
}

@media(max-width:1024px){

    #nfCategoriesPage
    .nf-settings-grid{

        grid-template-columns:
        repeat(2,minmax(0,1fr));
    }

}

/* =========================================
   PERÍODO (MESES)
========================================= */

#nfCategoriesPage
.nf-categories-period-toolbar{

    margin:30px 0 0;

    display:flex;

    flex-direction:column;

    gap:10px;
}

#nfCategoriesPage
.nf-categories-period-toolbar
.nf-period-year-nav,
#nfForecastPage
.nf-table-actions
.nf-period-year-nav{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:4px;

    width:100%;

    min-width:0;
}

#nfCategoriesPage
.nf-period-year-arrow,
#nfForecastPage
.nf-period-year-arrow{

    width:auto;

    min-width:28px;

    height:auto;

    padding:4px 6px;

    border:none;

    border-radius:0;

    background:transparent;

    color:#8b5e00;

    font-size:22px;

    font-weight:900;

    line-height:1;

    cursor:pointer;

    transition:
    color .2s ease,
    transform .2s ease;

    font-family:'Inter',sans-serif;

    letter-spacing:-.08em;

    box-shadow:none;
}

#nfCategoriesPage
.nf-period-year-arrow:hover,
#nfForecastPage
.nf-period-year-arrow:hover{

    background:transparent;

    color:#211404;

    transform:scale(1.08);
}

#nfCategoriesPage
.nf-period-year-list,
#nfForecastPage
.nf-period-year-list{

    display:flex;

    align-items:baseline;

    gap:4px;
}

#nfCategoriesPage
.nf-period-year-btn,
#nfForecastPage
.nf-period-year-btn{

    min-width:56px;

    height:auto;

    padding:6px 10px;

    border:none;

    border-radius:10px;

    background:transparent;

    color:#8b7355;

    font-size:14px;

    font-weight:700;

    cursor:pointer;

    transition:.2s ease;

    font-family:'Inter',sans-serif;

    transform:scale(1);

    transform-origin:center center;
}

#nfCategoriesPage
.nf-period-year-btn:hover,
#nfForecastPage
.nf-period-year-btn:hover{

    background:#f5efe3;

    color:#211404;
}

#nfCategoriesPage
.nf-period-year-btn.is-active,
#nfForecastPage
.nf-period-year-btn.is-active{

    background:#211404;

    color:#f3d38a;

    font-size:15px;

    font-weight:800;

    padding:6px 12px;

    transform:scale(1.03);

    box-shadow:
    0 3px 10px
    rgba(18,11,2,.12);

    border:1px solid
    rgba(139,94,0,.22);
}

#nfCategoriesPage
.nf-categories-period-months{

    display:flex;

    flex-wrap:nowrap;

    gap:8px;

    justify-content:space-between;

    width:100%;

    max-width:100%;

    overflow-x:auto;

    overflow-y:hidden;

    scrollbar-width:none;

    padding-bottom:4px;
}

#nfCategoriesPage
.nf-categories-period-months::-webkit-scrollbar{

    display:none;
}

#nfCategoriesPage
.nf-period-mobile-month{

    display:none;

    position:relative;

    width:100%;

    max-width:100%;
}

#nfCategoriesPage
.nf-categories-period-toolbar
.nf-period-month-btn{

    position:relative;

    display:inline-flex;

    align-items:center;

    justify-content:center;

    flex:1 1 0;

    min-width:0;

    min-height:30px;

    padding:5px 16px 4px;

    border:1px solid
    rgba(139,94,0,.14);

    border-radius:999px;

    background:#fffdf8;

    color:#6b4a12;

    font-size:12px;

    font-weight:700;

    cursor:pointer;

    transition:.2s ease;

    font-family:'Inter',sans-serif;

    letter-spacing:.01em;

    white-space:nowrap;

    overflow:visible;
}

#nfCategoriesPage
.nf-categories-period-toolbar
.nf-period-month-btn:hover{

    background:#f5efe3;

    color:#211404;

    border-color:
    rgba(139,94,0,.22);
}

#nfCategoriesPage
.nf-categories-period-toolbar
.nf-period-month-btn.is-active{

    background:#211404;

    color:#f3d38a;

    font-size:12px;

    font-weight:800;

    padding:6px 18px 5px;

    min-height:32px;

    border-color:#211404;

    box-shadow:
    0 3px 10px
    rgba(18,11,2,.12);
}

#nfCategoriesPage
.nf-month-label{

    display:block;

    line-height:1.1;
}

#nfCategoriesPage
.nf-month-count{

    display:none !important;
}

#nfCategoriesPage
.nf-period-mobile-month-btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:8px;

    width:100%;

    max-width:280px;

    margin:0 auto;

    min-height:40px;

    padding:0 16px;

    border:1px solid
    rgba(139,94,0,.14);

    border-radius:14px;

    background:#fffdf8;

    color:#211404;

    font-size:14px;

    font-weight:800;

    font-family:'Inter',sans-serif;

    cursor:pointer;

    transition:.2s ease;
}

#nfCategoriesPage
.nf-period-mobile-month-btn:hover{

    background:#f5efe3;

    border-color:
    rgba(139,94,0,.22);
}

#nfCategoriesPage
.nf-period-mobile-month-chevron{

    width:0;

    height:0;

    border-left:5px solid transparent;

    border-right:5px solid transparent;

    border-top:6px solid #8b5e00;
}

#nfCategoriesPage
.nf-period-mobile-panel{

    position:absolute;

    left:50%;

    z-index:40;

    width:min(100%,360px);

    margin-top:8px;

    padding:12px;

    border-radius:16px;

    background:#fffdf8;

    border:1px solid
    rgba(139,94,0,.12);

    box-shadow:
    0 16px 40px
    rgba(18,11,2,.14);

    transform:translateX(-50%);
}

#nfCategoriesPage
.nf-period-mobile-grid{

    display:grid;

    grid-template-columns:repeat(4,minmax(0,1fr));

    gap:8px;
}

#nfCategoriesPage
.nf-period-mobile-grid
.nf-period-month-btn{

    width:100%;

    min-width:0;

    flex:none;

    padding:8px 6px 6px;

    font-size:11px;
}

@media(max-width:1024px){

    #nfCategoriesPage
    .nf-categories-period-months{

        display:none;
    }

    #nfCategoriesPage
    .nf-period-mobile-month{

        display:block;

        text-align:center;

        margin-top:2px;
    }

}

@media(max-width:430px){

    #nfCategoriesPage
    .nf-period-mobile-grid{

        gap:6px;
    }

    #nfCategoriesPage
    .nf-period-mobile-grid
    .nf-period-month-btn{

        font-size:11px;

        padding:7px 2px 5px;
    }

}

/* =========================================
   CARD EXPANDIDO
========================================= */

#nfCategoriesPage
.nf-setting-card{

    position:relative;

    background:#fffdf8;

    border-radius:14px;

    padding:18px;

    display:block;

    border:1px solid
    rgba(139,94,0,.08);

    box-shadow:
    0 4px 14px
    rgba(0,0,0,.04);

    transition:
    border-color .2s ease,
    box-shadow .2s ease,
    transform .2s ease;
}

#nfCategoriesPage
.nf-setting-card:hover{

    transform:translateY(-2px);
}

#nfCategoriesPage
.nf-setting-card.is-usage-exceed--receita,
#nfCategoriesPage
.nf-setting-card.is-usage-exceed--despesa{

    border-color:transparent;
}

#nfCategoriesPage
.nf-setting-card.is-usage-exceed--receita::before,
#nfCategoriesPage
.nf-setting-card.is-usage-exceed--despesa::before{

    content:"";

    position:absolute;

    inset:0;

    border-radius:14px;

    padding:2px;

    pointer-events:none;

    z-index:0;

    -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);

    -webkit-mask-composite:xor;

    mask-composite:exclude;
}

#nfCategoriesPage
.nf-setting-card.is-usage-exceed--receita::before{

    background:linear-gradient(
        90deg,
        #16a34a 0%,
        #bef264 100%
    );
}

#nfCategoriesPage
.nf-setting-card.is-usage-exceed--despesa::before{

    background:linear-gradient(
        90deg,
        #dc2626 0%,
        #f87171 100%
    );
}

#nfCategoriesPage
.nf-setting-card.is-usage-exceed--receita
.nf-category-card,
#nfCategoriesPage
.nf-setting-card.is-usage-exceed--despesa
.nf-category-card{

    position:relative;

    z-index:1;
}

#nfCategoriesPage
.nf-category-card{

    display:flex;

    flex-direction:column;

    gap:10px;

    width:100%;

    min-width:0;
}

#nfCategoriesPage
.nf-category-card__head{

    display:flex;

    align-items:center;

    gap:10px;

    min-width:0;

    width:100%;
}

#nfCategoriesPage
.nf-category-card__stats{

    width:100%;

    grid-template-columns:
    repeat(4,minmax(0,1fr));

    gap:10px 14px;
}

#nfCategoriesPage
.nf-category-card__stats
div{

    min-width:0;
}

#nfCategoriesPage
.nf-category-card__stats
small{

    font-size:11px;
}

#nfCategoriesPage
.nf-category-card__stats
strong{

    font-size:13px;
}

#nfCategoriesPage
.nf-category-card__bar{

    width:100%;

    margin-top:2px;
}

/* =========================================
   USO — BADGES E BARRAS POR TIPO
========================================= */

#nfCategoriesPage
.nf-category-stat-usage{

    gap:5px;
}

#nfCategoriesPage
.nf-category-usage-icon{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    width:1em;

    flex:0 0 1em;

    font-size:12px;

    line-height:1;
}

#nfCategoriesPage
.nf-category-usage-value{

    line-height:1;
}

#nfCategoriesPage
.nf-budget-percent.success-strong{

    background:#bbf7d0;

    color:#14532d;
}

#nfCategoriesPage
.nf-budget-percent.exceed-positive{

    background:linear-gradient(
        135deg,
        #dcfce7 0%,
        #fef9c3 100%
    );

    color:#14532d;

    box-shadow:
    0 0 0 1px
    rgba(22,163,74,.28);
}

#nfCategoryDetailModal
.nf-budget-percent.success-strong{

    background:#bbf7d0;

    color:#14532d;
}

#nfCategoryDetailModal
.nf-budget-percent.exceed-positive{

    background:linear-gradient(
        135deg,
        #dcfce7 0%,
        #fef9c3 100%
    );

    color:#14532d;

    box-shadow:
    0 0 0 1px
    rgba(22,163,74,.28);
}

#nfCategoriesPage
.nf-category-card__progress.nf-category-progress--success{

    background:linear-gradient(
        90deg,
        #16a34a 0%,
        #4ade80 100%
    );
}

#nfCategoriesPage
.nf-category-card__progress.nf-category-progress--warning{

    background:linear-gradient(
        90deg,
        #d97706 0%,
        #fbbf24 100%
    );
}

#nfCategoriesPage
.nf-category-card__progress.nf-category-progress--danger{

    background:linear-gradient(
        90deg,
        #dc2626 0%,
        #f87171 100%
    );
}

#nfCategoriesPage
.nf-category-card__progress.nf-category-progress--success-strong{

    background:linear-gradient(
        90deg,
        #15803d 0%,
        #22c55e 100%
    );
}

#nfCategoriesPage
.nf-category-card__progress.nf-category-progress--exceed-positive{

    background:linear-gradient(
        90deg,
        #16a34a 0%,
        #bef264 100%
    );

    box-shadow:inset 0 0 0 1px
    rgba(22,163,74,.24);
}

#nfCategoryDetailModal
.nf-category-detail-progress.nf-category-progress--success{

    background:linear-gradient(
        90deg,
        #16a34a 0%,
        #4ade80 100%
    );
}

#nfCategoryDetailModal
.nf-category-detail-progress.nf-category-progress--warning{

    background:linear-gradient(
        90deg,
        #d97706 0%,
        #fbbf24 100%
    );
}

#nfCategoryDetailModal
.nf-category-detail-progress.nf-category-progress--danger{

    background:linear-gradient(
        90deg,
        #dc2626 0%,
        #f87171 100%
    );
}

#nfCategoryDetailModal
.nf-category-detail-progress.nf-category-progress--success-strong{

    background:linear-gradient(
        90deg,
        #15803d 0%,
        #22c55e 100%
    );
}

#nfCategoryDetailModal
.nf-category-detail-progress.nf-category-progress--exceed-positive{

    background:linear-gradient(
        90deg,
        #16a34a 0%,
        #bef264 100%
    );

    box-shadow:inset 0 0 0 1px
    rgba(22,163,74,.24);
}

#nfCategoriesPage
.nf-setting-card{

    cursor:pointer;
}

#nfCategoriesPage
.nf-settings-grid.nf-categories-select-mode
.nf-setting-card{

    cursor:pointer;
}

/* =========================================
   MODAL CATEGORIA — TIPO
========================================= */

.nf-category-modal-type-tabs{

    display:flex;

    gap:10px;
}

.nf-category-modal-type-tabs button{

    flex:1;

    height:38px;

    border:none;

    border-radius:12px;

    background:#efe7d7;

    color:#6b5840;

    font-size:13px;

    font-weight:700;

    cursor:pointer;

    transition:.25s ease;
}

.nf-category-modal-type-tabs button.active{

    background:#2b1600;

    color:#f6d58a;
}

.nf-textarea{

    resize:vertical;

    min-height:88px;
}

.nf-field-hint{

    display:block;

    margin-top:6px;

    font-size:12px;

    color:#8e8577;
}

.nf-category-planned-apply{

    margin-top:4px;

    padding:14px;

    border-radius:16px;

    background:#f8f3e8;

    border:1px solid
    rgba(139,94,0,.12);
}

.nf-category-planned-apply__title{

    margin:0 0 12px;

    font-size:14px;

    font-weight:700;

    color:#211404;
}

.nf-category-planned-apply__options{

    display:flex;

    flex-direction:column;

    gap:10px;
}

.nf-category-planned-apply__option{

    display:flex;

    align-items:center;

    gap:10px;

    font-size:14px;

    color:#4a3b2a;

    cursor:pointer;
}

.nf-category-planned-apply__option input{

    width:16px;

    height:16px;

    margin:0;

    accent-color:#211404;
}

.nf-category-planned-apply__until{

    margin-top:14px;
}

.nf-category-planned-apply__until-fields{

    display:grid;

    grid-template-columns:1.2fr .8fr;

    gap:10px;

    margin-top:8px;
}

#nfCategoryModal
#nfSaveCategoryModal:disabled{

    opacity:.55;

    cursor:not-allowed;

    transform:none !important;
}

/* =========================================
   MODAL DETALHE DA CATEGORIA
========================================= */

.nf-category-detail-modal{

    max-width:640px;
}

.nf-category-detail-header{

    display:flex;

    align-items:center;

    gap:12px;
}

.nf-category-detail-icon{

    width:48px;
    height:48px;

    border-radius:14px;

    background:#f8f3e8;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:24px;

    flex:0 0 auto;
}

.nf-category-detail-metrics{

    margin-bottom:12px;

    grid-template-columns:
    repeat(4,minmax(0,1fr));

    gap:10px 14px;
}

.nf-category-detail-bar{

    margin-bottom:20px;
}

.nf-category-detail-section{

    display:flex;

    flex-direction:column;

    gap:10px;

    margin-bottom:18px;
}

.nf-category-detail-section h3{

    margin:0;

    font-size:15px;

    color:#211404;
}

.nf-category-detail-hint{

    margin:0;

    font-size:13px;

    color:#8e8577;
}

.nf-category-detail-transactions{

    margin-bottom:0;
}

.nf-category-detail-tx-list{

    display:flex;

    flex-direction:column;

    gap:8px;

    max-height:240px;

    overflow-y:auto;
}

.nf-category-detail-tx-item{

    display:grid;

    grid-template-columns:
    72px minmax(0,1fr) auto auto;

    align-items:center;

    gap:10px;

    padding:10px 12px;

    border-radius:10px;

    background:#faf7f2;

    border:1px solid
    rgba(139,94,0,.08);
}

.nf-category-detail-tx-date{

    font-size:12px;

    color:#8e8577;

    white-space:nowrap;
}

.nf-category-detail-tx-desc{

    font-size:13px;

    color:#211404;

    overflow:hidden;

    text-overflow:ellipsis;

    white-space:nowrap;
}

.nf-category-detail-tx-amount{

    font-size:13px;

    color:#211404;

    white-space:nowrap;
}

.nf-category-detail-tx-status{

    white-space:nowrap;
}

.nf-category-detail-tx-empty{

    margin:0;

    padding:12px;

    font-size:13px;

    color:#8e8577;

    text-align:center;

    border-radius:10px;

    background:#faf7f2;
}

@media(max-width:560px){

    .nf-category-detail-tx-item{

        grid-template-columns:
        1fr auto;

        grid-template-areas:
        "desc amount"
        "date status";
    }

    .nf-category-detail-tx-date{
        grid-area:date;
    }

    .nf-category-detail-tx-desc{
        grid-area:desc;
    }

    .nf-category-detail-tx-amount{
        grid-area:amount;
    }

    .nf-category-detail-tx-status{
        grid-area:status;
        justify-self:start;
    }

}

/* =========================================
   ÍCONE (−15%)
========================================= */

#nfCategoriesPage
.nf-setting-icon{

    width:42px;
    height:42px;

    border-radius:12px;

    background:#f8f3e8;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:20px;

    flex:0 0 auto;
}

/* =========================================
   NOME
========================================= */

#nfCategoriesPage
.nf-setting-name{

    font-size:14px;

    font-weight:700;

    color:#211404;

    line-height:1.2;

    min-width:0;

    flex:1 1 auto;

    overflow:hidden;

    text-overflow:ellipsis;

    white-space:nowrap;
}

/* =========================================
   SWITCH (−22%)
========================================= */

#nfCategoriesPage
.nf-switch{

    position:relative;

    width:40px;

    height:24px;

    flex:0 0 auto;
}

#nfCategoriesPage
.nf-switch input{

    display:none;
}

#nfCategoriesPage
.nf-switch span{

    position:absolute;

    inset:0;

    border-radius:999px;

    background:#d6d3d1;

    cursor:pointer;

    transition:.25s ease;
}

#nfCategoriesPage
.nf-switch span::before{

    content:"";

    position:absolute;

    width:18px;
    height:18px;

    border-radius:50%;

    background:#ffffff;

    top:3px;
    left:3px;

    transition:.25s ease;
}

#nfCategoriesPage
.nf-switch input:checked + span{

    background:#2b1600;
}

#nfCategoriesPage
.nf-switch input:checked + span::before{

    transform:translateX(16px);
}

/* =========================================
   CATEGORIAS — SELEÇÃO (EDITAR / EXCLUIR)
========================================= */

#nfCategoriesPage
.nf-setting-card__select{

    position:absolute;

    top:8px;
    left:8px;

    z-index:2;

    display:none;

    margin:0;

    cursor:pointer;
}

#nfCategoriesPage
.nf-settings-grid.nf-categories-select-mode
.nf-setting-card__select{

    display:block;
}

#nfCategoriesPage
.nf-setting-card__select input{

    position:absolute;

    opacity:0;

    width:0;
    height:0;
}

#nfCategoriesPage
.nf-setting-card__select span{

    display:flex;

    align-items:center;

    justify-content:center;

    width:16px;
    height:16px;

    border-radius:4px;

    border:2px solid
    rgba(33,20,4,.22);

    background:#ffffff;

    transition:
    background .15s ease,
    border-color .15s ease;
}

#nfCategoriesPage
.nf-setting-card__select input:checked + span{

    border-color:#2b1600;

    background:#2b1600;
}

#nfCategoriesPage
.nf-setting-card__select input:checked + span::after{

    content:"";

    width:4px;
    height:7px;

    border-right:2px solid #f6d58a;
    border-bottom:2px solid #f6d58a;

    transform:rotate(45deg) translateY(-1px);
}

#nfCategoriesPage
.nf-settings-grid.nf-categories-select-mode
.nf-setting-card{

    cursor:pointer;

    padding-left:30px;
}

#nfCategoriesPage
.nf-settings-grid.nf-categories-select-mode--edit
.nf-setting-card:hover{

    border-color:rgba(43,22,0,.22);

    box-shadow:
    0 6px 18px
    rgba(0,0,0,.06);
}

#nfCategoriesPage
.nf-setting-card.is-selected{

    border-color:#f3d38a;

    box-shadow:
    0 0 0 2px
    #f3d38a,
    0 8px 26px
    rgba(243,211,138,.42);

    transform:translateY(-1px);
}

#nfCategoriesPage
.nf-settings-grid.nf-categories-select-mode
.nf-switch{

    pointer-events:none;
}

/* =========================================
   AÇÕES — PADRÃO TRANSAÇÕES (legado)
========================================= */

#nfCategoriesPage
.nf-setting-card-actions.nf-actions{

    display:flex;

    align-items:center;

    justify-content:flex-end;

    gap:4px;

    flex:0 0 auto;

    padding:0;

    margin-top:0;
}

#nfCategoriesPage
.nf-action-btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    min-width:28px;

    min-height:28px;

    padding:3px;

    border:none !important;

    border-radius:8px;

    background:transparent !important;

    background-image:none !important;

    box-shadow:none !important;

    cursor:pointer;

    opacity:.88;

    transition:
    opacity .15s ease,
    transform .15s ease;

    -webkit-tap-highlight-color:
    transparent;
}

#nfCategoriesPage
.nf-action-icon{

    display:block;

    font-size:15px;

    line-height:1;
}

#nfCategoriesPage
.nf-action-btn:hover,
#nfCategoriesPage
.nf-action-btn:focus-visible{

    opacity:1;

    transform:scale(1.05);

    background:transparent !important;

    color:inherit !important;

    outline:none !important;

    box-shadow:none !important;
}

#nfCategoriesPage
.nf-action-btn:active{

    transform:scale(1);

    opacity:.95;
}

/* =========================================
   REMOVER ROSA — MENU E AÇÕES DOS CARDS
========================================= */

#nfCategoriesPage
.nf-settings-menu button,
#nfCategoriesPage
.nf-settings-menu button:hover,
#nfCategoriesPage
.nf-settings-menu button:focus,
#nfCategoriesPage
.nf-settings-menu button:active,
#nfCategoriesPage
.nf-settings-menu button:focus-visible,

#nfCategoriesPage
.nf-action-btn,
#nfCategoriesPage
.nf-action-btn:hover,
#nfCategoriesPage
.nf-action-btn:focus,
#nfCategoriesPage
.nf-action-btn:active,
#nfCategoriesPage
.nf-action-btn:focus-visible{

    outline:none !important;

    box-shadow:none !important;

    border-color:transparent !important;

    background-image:none !important;

    -webkit-tap-highlight-color:
    transparent !important;
}

/* =========================================
   MENU — FOCO / ACTIVE
========================================= */

#nfCategoriesPage
.nf-settings-menu button:focus,
#nfCategoriesPage
.nf-settings-menu button:active{

    outline:none !important;

    box-shadow:none !important;
}

#nfCategoriesPage
.nf-settings-menu button:not(.active):focus,
#nfCategoriesPage
.nf-settings-menu button:not(.active):active{

    background:#f8f3e8 !important;

    color:#6b5840 !important;
}

#nfCategoriesPage
.nf-settings-menu button.active,
#nfCategoriesPage
.nf-settings-menu button.active:focus,
#nfCategoriesPage
.nf-settings-menu button.active:focus-visible,
#nfCategoriesPage
.nf-settings-menu button.active:active{

    background:#2b1600 !important;

    color:#f6d58a !important;
}

/* =========================================
   RESPONSIVO
========================================= */

@media(max-width:1024px){

    #nfCategoriesPage.nf-settings-page{

        grid-template-columns:1fr;
    }

    #nfCategoriesPage
    .nf-settings-sidebar{

        position:relative;

        top:auto;
    }

}

@media(max-width:768px){

    #nfCategoriesPage
    .nf-settings-header{

        flex-direction:column;

        align-items:stretch;
    }

    #nfCategoriesPage
    .nf-btn-new-transaction{

        width:100%;
    }

    #nfCategoriesPage
    .nf-settings-grid{

        grid-template-columns:
        repeat(2,minmax(0,1fr));

        gap:10px;
    }

    #nfRegisterCategoriasPanel
    .nf-cartoes-actions-bar{

        flex-wrap:wrap;
    }

    #nfRegisterCategoriasPanel
    .nf-cartoes-actions-start{

        flex-wrap:wrap;
    }

    #nfRegisterCategoriasPanel
    .nf-categories-tabs-row{

        width:100%;

        margin-left:0;
    }

    #nfRegisterCategoriasPanel
    .nf-cartoes-actions-start
    .nf-secondary-btn,
    #nfRegisterCategoriasPanel
    .nf-cartoes-actions-start
    .nf-primary-btn{

        flex:1;
    }

    #nfCategoriesPage
    .nf-setting-card{

        padding:12px;
    }

    #nfCategoriesPage
    .nf-category-card{

        gap:8px;
    }

    #nfCategoriesPage
    .nf-setting-icon{

        width:40px;
        height:40px;

        font-size:18px;
    }

    #nfCategoriesPage
    .nf-category-card__stats{

        grid-template-columns:
        repeat(2,minmax(0,1fr));

        gap:6px 8px;
    }

}


/* =========================================
   MODO SELEÇÃO — OVERLAY + CAMADAS
========================================= */

#nfRegisterCategoriasPanel,
#nfRegisterCartoesPanel{

    position:relative;
}

#nfRegisterCartoesPanel
.nf-selection-toolbar{

    position:relative;

    z-index:6;
}

.nf-selection-overlay{

    position:absolute;

    inset:0;

    z-index:4;

    background:rgba(248,243,234,.52);

    backdrop-filter:blur(2px);

    -webkit-backdrop-filter:blur(2px);

    pointer-events:none;

    border-radius:0;
}

.nf-panel-selection-mode
.nf-selection-surface,
.nf-panel-selection-mode
.nf-selection-toolbar,
.nf-panel-selection-mode
.nf-selection-toolbar-tabs{

    position:relative;

    z-index:6;
}

#nfCategoryConfirmDelete,
#nfCardConfirmDelete{

    height:44px;

    min-height:44px;

    padding:0 18px;

    border:none !important;

    border-radius:14px !important;

    font-size:14px;

    font-weight:700 !important;

    font-family:'Inter',sans-serif;

    background:#dc2626 !important;

    color:#ffffff !important;

    box-shadow:
    0 10px 24px
    rgba(220,38,38,.28) !important;
}

#nfCategoryConfirmDelete:hover,
#nfCardConfirmDelete:hover{

    background:#b91c1c !important;

    color:#ffffff !important;

    transform:translateY(-2px);
}

#nfCategoryConfirmDelete:focus,
#nfCategoryConfirmDelete:focus-visible,
#nfCardConfirmDelete:focus,
#nfCardConfirmDelete:focus-visible{

    outline:none !important;

    border-radius:14px !important;
}

/* =========================================
   SELETOR DE ÍCONES — CATEGORIA
========================================= */

#nfCategoryModal
.nf-icon-picker-field{

    position:relative;
}

#nfCategoryModal
.nf-icon-picker-trigger{

    display:flex;

    align-items:center;

    gap:12px;

    width:100%;

    min-height:48px;

    padding:8px 14px;

    border:1px solid
    rgba(139,94,0,.18);

    border-radius:14px;

    background:#fffdf8;

    cursor:pointer;

    font-family:'Inter',sans-serif;

    transition:
    border-color .2s ease,
    background .2s ease;
}

#nfCategoryModal
.nf-icon-picker-trigger:hover{

    border-color:rgba(139,94,0,.32);

    background:#f8f3e8;
}

#nfCategoryModal
.nf-icon-picker-preview{

    display:flex;

    align-items:center;

    justify-content:center;

    width:42px;
    height:42px;

    border-radius:12px;

    background:#f8f3e8;

    font-size:22px;

    flex-shrink:0;
}

#nfCategoryModal
.nf-icon-picker-trigger__text{

    font-size:14px;

    font-weight:600;

    color:#6b5840;
}

#nfCategoryModal
.nf-icon-picker-popover{

    position:absolute;

    left:0;
    right:0;

    top:calc(100% + 8px);

    z-index:20;

    padding:12px;

    border-radius:16px;

    border:1px solid
    rgba(139,94,0,.14);

    background:#ffffff;

    box-shadow:
    0 16px 40px
    rgba(18,11,2,.14);
}

#nfCategoryModal
.nf-icon-picker-grid{

    display:grid;

    grid-template-columns:
    repeat(7,minmax(0,1fr));

    gap:6px;

    max-height:220px;

    overflow-y:auto;
}

#nfCategoryModal
.nf-icon-picker-option{

    display:flex;

    align-items:center;

    justify-content:center;

    width:100%;

    min-height:0;

    height:34px;

    padding:3px 4px;

    border:none;

    border-radius:10px;

    background:#f8f3e8;

    font-size:22px;

    line-height:1;

    cursor:pointer;

    transition:
    background .15s ease,
    transform .15s ease;
}

#nfCategoryModal
.nf-icon-picker-option:hover{

    background:#efe7d7;

    transform:scale(1.06);
}

#nfCategoryModal
.nf-icon-picker-option.selected{

    background:#2b1600;

    box-shadow:0 0 0 2px
    #f3d38a;
}

/* =========================================
   PÁGINAS INDEPENDENTES (Categorias / Cartões)
========================================= */

#nfCategoriesPage.nf-cadastro-page{

    display:flex;

    flex-direction:column;

    gap:14px;

    width:100%;

    min-height:0;

    flex:1;
}

.nf-content:has(#nfCategoriesPage.nf-cadastro-page){

    gap:14px;

    margin-top:0 !important;

    padding-top:0 !important;
}

#nfCategoriesPage
.nf-categories-toolbar-card,
#nfCategoriesPage
.nf-categories-grid-card,
#nfCategoriesPage
.nf-cartoes-main-card{

    margin:0;
}

#nfCategoriesPage
.nf-categories-toolbar-card{

    padding:18px 22px;
}

#nfCategoriesPage
.nf-categories-toolbar-card
.nf-cartoes-actions-bar{

    margin:0;
}

#nfCategoriesPage
.nf-categories-grid-card,
#nfCategoriesPage
.nf-cartoes-main-card{

    padding:22px;

    display:flex;

    flex-direction:column;

    gap:18px;
}

#nfCategoriesPage
.nf-cartoes-main-card
.nf-cartoes-actions-bar{

    margin:0;
}

#nfCategoriesPage
.nf-categories-grid-card
.nf-categories-grid-wrap,
#nfCategoriesPage
.nf-cartoes-main-card
.nf-cartoes-grid-wrap{

    position:relative;

    flex:1;

    min-height:0;
}

#nfCategoriesPage
.nf-categories-grid-card
.nf-selection-overlay,
#nfCategoriesPage
.nf-cartoes-main-card
.nf-selection-overlay{

    border-radius:18px;
}

/* =========================================
   PREVISÃO — REUSO VISUAL CADASTRO
========================================= */

#nfForecastPage
.nf-budget-percent{

    display:inline-flex;

    align-items:center;

    gap:5px;

    height:auto;

    padding:4px 10px;

    border-radius:999px;

    font-size:10px;

    font-weight:700;

    line-height:1.2;

    white-space:nowrap;
}

#nfForecastPage
.nf-budget-percent.exceed-positive{

    background:linear-gradient(
        135deg,
        #dcfce7 0%,
        #fef9c3 100%
    );

    color:#14532d;

    box-shadow:
    0 0 0 1px
    rgba(22,163,74,.28),
    0 8px 18px
    rgba(22,163,74,.12);
}

#nfForecastPage
.nf-budget-percent.exceed-negative{

    background:linear-gradient(
        135deg,
        #fee2e2 0%,
        #fecaca 100%
    );

    color:#991b1b;

    box-shadow:
    0 0 0 1px
    rgba(220,38,38,.24),
    0 8px 18px
    rgba(220,38,38,.12);
}

#nfForecastPage
.nf-category-usage-icon{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    width:1em;

    flex:0 0 1em;

    font-size:11px;

    line-height:1;
}

#nfForecastPage
.nf-budget-percent.exceed-positive
.nf-category-usage-icon{

    color:#16a34a;
}

#nfForecastPage
.nf-budget-percent.exceed-negative
.nf-category-usage-icon{

    color:#dc2626;
}

#nfForecastPage
.nf-forecast-table tbody tr.is-usage-exceed--receita td,
#nfForecastPage
.nf-forecast-table tbody tr.is-usage-exceed--despesa td{

    position:relative;

    background:#fffdf8;
}

#nfForecastPage
.nf-forecast-table tbody tr.is-usage-exceed--receita td{

    box-shadow:
    inset 0 0 0 2px
    rgba(22,163,74,.28),
    inset 0 0 18px
    rgba(22,163,74,.08);
}

#nfForecastPage
.nf-forecast-table tbody tr.is-usage-exceed--despesa td{

    box-shadow:
    inset 0 0 0 2px
    rgba(220,38,38,.24),
    inset 0 0 18px
    rgba(220,38,38,.08);
}

#nfForecastPage
.nf-forecast-table tbody tr.is-usage-exceed--receita:hover td,
#nfForecastPage
.nf-forecast-table tbody tr.is-usage-exceed--despesa:hover td{

    background:#fffdf8;
}

#nfForecastPage
.nf-forecast-table tbody tr.is-usage-exceed--receita td:first-child{

    border-radius:14px 0 0 14px;
}

#nfForecastPage
.nf-forecast-table tbody tr.is-usage-exceed--receita td:last-child{

    border-radius:0 14px 14px 0;
}

#nfForecastPage
.nf-forecast-table tbody tr.is-usage-exceed--despesa td:first-child{

    border-radius:14px 0 0 14px;
}

#nfForecastPage
.nf-forecast-table tbody tr.is-usage-exceed--despesa td:last-child{

    border-radius:0 14px 14px 0;
}