/* ==========================================================================
   FiscoBI - Design System
   Bootstrap 5.3 overrides and custom components
   ========================================================================== */

/* Tokens
   ========================================================================== */
:root {
    /* Primaria */
    --bs-primary: #2ECC71;
    --nfg-primary-dark: #1A8A4A;
    --nfg-primary-subtle: #F0FFF6;
    --nfg-accent: #00FF88;

    /* Superficie */
    --bs-body-bg: #EEF1F4;
    --nfg-surface: #FFFFFF;
    --nfg-surface-muted: #E4E9EF;
    --nfg-surface-dark: #1C1C1C;
    --nfg-table-header-bg: #4B5563;
    --nfg-table-header-color: #FFFFFF;
    --nfg-shadow-soft: 0 2px 8px rgba(17, 24, 39, 0.08);
    --bs-dark: #111827;

    /* Texto */
    --bs-body-color: #1C1C1C;
    --bs-secondary-color: #6B7280;
    --bs-border-color: #D4DCE5;
    --nfg-text-on-dark-muted: #9CA3AF;

    /* Semanticas */
    --bs-warning: #F5A623;
    --bs-warning-bg-subtle: #FFF8E7;
    --bs-danger: #E53935;
    --bs-info: #1E88E5;
    --bs-success: #2ECC71;

    --nfg-sidebar-width: 232px;
}

/* Portal do Contribuinte (Acesso Externo)
   ========================================================================== */
.nfg-portal-header { text-align: center; margin-bottom: 24px; }
.nfg-portal-brasao { width: 72px; height: 72px; object-fit: contain; margin-bottom: 2px; }
.nfg-portal-municipio { font-size: 16px; font-weight: 700; color: var(--bs-body-color); }
.nfg-portal-brand { margin-top: 6px; }
.nfg-portal-brand-fiscobi { font-size: 17px; font-weight: 700; color: var(--bs-primary); }
.nfg-portal-brand-sub { font-size: 11px; color: #9CA3AF; display: block; }
.nfg-portal-container { max-width: 480px; padding-top: 32px; }

.nfg-portal-frame {
    display: flex;
    height: 100vh;
    min-width: 0;
    overflow: hidden;
}

.nfg-portal-shell {
    display: flex;
    height: 100%;
    min-width: 0;
    flex: 1 1 auto;
    flex-direction: column;
    overflow: hidden;
}

.nfg-sidebar.nfg-portal-sidebar {
    position: static;
    inset: auto;
    z-index: auto;
    display: flex;
    min-width: var(--nfg-sidebar-width);
    max-width: none;
    flex-direction: column;
    padding: 20px 12px 16px;
    box-shadow: none;
}

.nfg-portal-sidebar-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 10px 20px;
    color: var(--nfg-surface);
    text-decoration: none;
}

.nfg-portal-sidebar-brand:hover,
.nfg-portal-sidebar-brand:focus-visible {
    color: var(--nfg-surface);
}

.nfg-portal-sidebar-brand img {
    width: 36px;
    height: 36px;
    object-fit: contain;
}

.nfg-portal-sidebar-brand span {
    display: flex;
    min-width: 0;
    flex-direction: column;
    line-height: 1.2;
}

.nfg-portal-sidebar-brand strong { font-size: 15px; }
.nfg-portal-sidebar-brand small { color: var(--bs-border-color); font-size: 10px; }

.nfg-portal-sidebar-municipality {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 18px;
    padding: 10px;
    color: var(--bs-border-color);
    border-top: 1px solid var(--bs-secondary-color);
    border-bottom: 1px solid var(--bs-secondary-color);
    font-size: 11px;
}

.nfg-portal-sidebar-municipality img {
    width: 28px;
    height: 28px;
    flex: 0 0 auto;
    object-fit: contain;
}

.nfg-portal-sidebar-municipality span { overflow-wrap: anywhere; }

.nfg-portal-sidebar-nav {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.nfg-sidebar .nfg-portal-sidebar-link {
    width: 100%;
    min-height: 44px;
    padding: 8px 12px;
    border: 0;
    font-size: 12px;
    font-weight: 400;
    text-align: left;
}

.nfg-sidebar .nfg-portal-sidebar-link.active { font-weight: 600; }
.nfg-portal-sidebar-profile { margin-top: auto; }

.nfg-portal-topbar {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 4px;
    padding: 0 16px;
    height: 56px;
}

.nfg-portal-logo {
    display: inline-flex;
    min-width: 0;
    align-items: center;
    gap: 9px;
    color: var(--bs-body-color);
    text-decoration: none;
}

.nfg-portal-logo img {
    width: 30px;
    height: 30px;
    object-fit: contain;
}

.nfg-portal-logo span {
    display: flex;
    flex-direction: column;
    line-height: 1.15;
}

.nfg-portal-logo strong { font-size: 13px; }
.nfg-portal-logo small { color: var(--bs-secondary-color); font-size: 9px; }

.nfg-portal-tabs {
    display: flex;
    align-items: center;
    gap: 4px;
}

.nfg-portal-tabs .nfg-nav-link {
    min-height: 36px;
    gap: 2px;
    padding: 8px 14px;
}

.nfg-portal-municipality {
    display: flex;
    flex-direction: row;
}

.nfg-portal-municipality-image > img{
    object-fit: contain;
    width: 48px;
    height: 48px;
}

.nfg-portal-municipality-text{
   display: flex;
   flex-direction: column;
   gap: 0px;
}

.nfg-portal-municipality-text span{
    padding: 0px;   
}

.nfg-portal-municipality-info {
    display: flex;
    flex-direction: column;
    min-width: 0;
    gap: 1px;
}

.nfg-portal-municipality-name {
    font-size: 12px;
    font-weight: 600;
    color: var(--bs-body-color);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.nfg-portal-municipality-meta {
    font-size: 10px;
    color: var(--bs-secondary-color);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.nfg-portal-profile-trigger {
    display: inline-flex;
    min-width: 48px;
    align-items: center;
    justify-content: center;
    gap: 5px;
}

.nfg-portal-main {
    min-height: 0;
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 16px;
}

.nfg-portal-content {
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
}

.nfg-portal-welcome {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.nfg-portal-filter { padding: 12px 16px; }
.nfg-filter-field { min-width: fit-content !important; }
.nfg-filter-field > input.form-control { min-width: fit-content !important; }
.nfg-portal-filter .nfg-portal-segmented { width: auto; }
.nfg-portal-filter .nfg-portal-segmented button { min-height: 32px; padding: 0 12px; }

.nfg-portal-summary-filter .card-body {
    padding: 8px;
}

.nfg-portal-topbar-logo { display: none; }

.nfg-portal-topbar-title {
    min-width: 0;
    overflow: hidden;
    font-size: 12px;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: none !important;
    color: transparent !important; /* Comentado para esconder o titulo das páginas */
}

.nfg-portal-summary-filter-grid {
    display: grid;
    grid-template-columns: repeat(5, fit-content(100%));
    gap: 4px;
    align-items: end;
}

.nfg-portal-summary-filter-actions {
    display: grid;
    grid-template-columns: repeat(2, fit-content(100%));
    gap: 4px;
}

.nfg-portal-summary-filter-grid .nfg-portal-segmented {
    width: auto;
    min-width: 210px;
}

.nfg-portal-summary-groups {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 4px;
}

.nfg-portal-summary-group,
.nfg-portal-summary-metric,
.nfg-portal-summary-chart {
    min-width: 0;
}

.nfg-portal-summary-group .card-header {
    min-height: 42px;
}

.nfg-portal-summary-metrics {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 4px;
    padding: 6px;
}

.nfg-portal-summary-metrics-three {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.nfg-portal-summary-metric {
    display: flex;
    min-height: 72px;
    flex-direction: column;
    justify-content: center;
    padding: 12px;
    color: inherit;
    text-decoration: none;
}

.nfg-portal-summary-metric:hover,
.nfg-portal-summary-metric:focus-visible {
    color: inherit;
    border-color: var(--bs-primary);
    box-shadow: var(--bs-focus-ring-box-shadow);
}

.nfg-portal-summary-metric .nfg-kpi-value {
    overflow-wrap: anywhere;
}

.nfg-portal-summary-unknown {
    grid-column: 1 / -1;
    color: var(--bs-secondary-color);
}

.nfg-portal-summary-chart .card-header {
    flex-wrap: wrap;
    gap: 4px 8px;
}

.nfg-portal-summary-chart-text {
    padding-top: 4px;
    overflow-wrap: anywhere;
}

.nfg-portal-segmented {
    display: grid;
    width: min(360px, 100%);
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 4px;
    padding: 4px;
    background: var(--nfg-surface);
    border: 1px solid var(--bs-border-color);
    border-radius: 10px;
}

.nfg-portal-segmented button {
    min-height: 44px;
    color: var(--bs-secondary-color);
    background: transparent;
    border: 0;
    border-radius: 7px;
    font-size: 12px;
    font-weight: 500;
}

.nfg-portal-segmented button.active {
    color: var(--nfg-primary-dark);
    background: var(--nfg-primary-subtle);
    font-weight: 600;
}

.nfg-direction-icon {
    display: inline-flex;
    width: 30px;
    height: 30px;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
}

.nfg-direction-icon.issued {
    color: var(--nfg-primary-dark);
    background: var(--nfg-primary-subtle);
}

.nfg-direction-icon.received {
    color: var(--bs-info);
    background: var(--nfg-primary-subtle);
}

.nfg-portal-profile-drawer {
    width: min(480px, 100vw);
    background: var(--bs-body-bg);
}

.nfg-portal-profile-drawer .offcanvas-header {
    min-height: 68px;
    padding: 16px 20px;
    background: var(--nfg-surface);
}

.nfg-portal-profile-drawer .offcanvas-header .btn-close {
    margin: 0;
}

.nfg-portal-profile-drawer .offcanvas-body {
    padding: 20px;
}

.nfg-profile-identity {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 24px;
}

.nfg-profile-identity-text {
    min-width: 0;
    padding-top: 4px;
}

.nfg-profile-identity h2 {
    overflow-wrap: anywhere;
    font-size: 16px;
    line-height: 1.35;
}

.nfg-profile-section {
    overflow: hidden;
}

.nfg-portal-profile-drawer .nfg-profile-section .card-body {
    padding: 0 !important;
}

.nfg-profile-section .label-uppercase {
    display: block;
    margin: 0 !important;
    padding: 16px 16px 8px;
}

.nfg-profile-list > div {
    display: grid;
    grid-template-columns: minmax(140px, .75fr) minmax(0, 1.25fr);
    align-items: start;
    gap: 16px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--bs-border-color);
}

.nfg-profile-list > div:last-child { border-bottom: 0; }
.nfg-profile-list dt { color: var(--bs-secondary-color); font-weight: 500; }
.nfg-profile-list dd {
    min-width: 0;
    margin: 0;
    overflow-wrap: anywhere;
    text-align: left;
    line-height: 1.45;
}

.nfg-auth-shell {
    display: grid;
    width: 100%;
    min-height: 100vh;
    grid-template-columns: minmax(320px, .9fr) minmax(420px, 1.1fr);
    overflow-y: auto;
}

.nfg-auth-brand {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 48px;
    color: var(--nfg-surface);
    background: var(--bs-dark);
}

.nfg-auth-brand-content { width: min(440px, 100%); }
.nfg-auth-brand img { width: 54px; height: 54px; margin-bottom: 32px; object-fit: contain; }
.nfg-auth-brand .label-uppercase { color: var(--bs-primary); }
.nfg-auth-brand h1 { max-width: 420px; margin: 10px 0 16px; color: var(--nfg-surface); font-size: 32px; line-height: 1.15; }
.nfg-auth-brand p { max-width: 390px; margin: 0; color: var(--bs-border-color); font-size: 14px; }

.nfg-auth-form-panel {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 32px;
    background: var(--bs-body-bg);
}

.nfg-auth-card {
    width: min(420px, 100%);
    padding: 32px;
    background: var(--nfg-surface);
    border: 1px solid var(--bs-border-color);
    border-radius: 14px;
    box-shadow: 0 18px 48px rgba(17, 24, 39, .08);
}

.nfg-auth-logo {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 36px;
    color: var(--bs-body-color);
    text-decoration: none;
}

.nfg-auth-logo img { width: 32px; height: 32px; object-fit: contain; }
.nfg-auth-logo span { display: flex; flex-direction: column; line-height: 1.1; }
.nfg-auth-logo strong { font-size: 13px; }
.nfg-auth-logo small { color: var(--bs-secondary-color); font-size: 9px; }

.nfg-auth-links {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.nfg-auth-card .btn {
    min-height: 44px;
}

.nfg-turnstile {
    width: 100%;
    min-height: 69px;
    overflow: hidden;
    padding: 2px;
    background: var(--nfg-primary-subtle);
    border: 1px solid rgba(46, 204, 113, .28);
    border-radius: 9px;
}

.nfg-turnstile iframe {
    display: block;
    max-width: 100%;
    border-radius: 6px;
}

.nfg-input-icon {
    position: relative;
}

.nfg-input-icon > .bi {
    position: absolute;
    top: 50%;
    left: 14px;
    z-index: 2;
    color: var(--bs-secondary-color);
    font-size: 16px;
    line-height: 1;
    pointer-events: none;
    transform: translateY(-50%);
}

.nfg-input-icon > .form-control {
    padding-left: 42px;
}

.nfg-input-password > .form-control {
    padding-right: 44px;
}

.nfg-password-toggle {
    position: absolute;
    top: 50%;
    right: 0;
    z-index: 3;
    display: inline-flex;
    width: 32px;
    height: 32px;
    align-items: center;
    justify-content: center;
    padding: 0;
    color: var(--bs-secondary-color);
    background: transparent;
    border: 0;
    border-radius: 8px;
    transform: translateY(-50%);
}

.nfg-password-toggle::after {
    position: absolute;
    inset: -6px;
    content: "";
}

.nfg-password-toggle:hover,
.nfg-password-toggle:focus-visible {
    color: var(--bs-primary);
    background: var(--nfg-primary-soft);
    outline: 0;
}

.nfg-input-icon:focus-within > .bi {
    color: var(--bs-primary);
}

@media (max-width: 575.98px) {
    .nfg-portal-container { max-width: 100%; padding: 16px 12px; }
    .nfg-portal-header { margin-bottom: 16px; }
    .nfg-portal-brasao { width: 56px; height: 56px; }
    .nfg-portal-municipio { font-size: 14px; }
    .nfg-portal-topbar { padding: 0 12px; }
    .nfg-portal-logo small { display: none; }
    .nfg-portal-tabs { display: none; }
    .nfg-portal-main { padding: 12px 12px calc(76px + env(safe-area-inset-bottom)); }
    .nfg-portal-welcome { align-items: flex-start; flex-direction: column; }
    .nfg-portal-account-button { width: auto !important; }
    .nfg-filter-field { width: 100%; min-width: 0; }
    .nfg-portal-filter .btn { width: 100%; }
    .nfg-profile-list > div { grid-template-columns: 1fr; gap: 3px; }
    .nfg-profile-list dd { text-align: left; }
    .nfg-portal-profile-drawer .offcanvas-body { padding: 16px; }
    .nfg-auth-form-panel { align-items: center; padding: 16px 12px; }
    .nfg-auth-card { padding: 24px 20px; border-radius: 10px; }
    .nfg-auth-logo { margin-bottom: 28px; }
    .nfg-auth-links { align-items: flex-start; flex-direction: column; }
}

@media (max-width: 991.98px) {
    .nfg-auth-shell { display: block; background: var(--bs-body-bg); }
    .nfg-auth-brand { display: none; }
    .nfg-auth-form-panel { min-height: 100vh; }
}

/* Base
   ========================================================================== */
html,
body {
    height: 100%;
    overflow: hidden;
}

body {
    background: var(--bs-body-bg);
    color: var(--bs-body-color);
    font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 12px;
    line-height: 1.45;
}

a {
    color: var(--bs-primary);
}

a:hover {
    color: var(--nfg-primary-dark);
}

.display-fiscal {
    font-size: 26px;
    font-weight: 700;
    line-height: 1.15;
}

h1,
.h1 {
    font-size: 18px;
    font-weight: 600;
}

h2,
.h2 {
    font-size: 15px;
    font-weight: 600;
}

h3,
.h3 {
    font-size: 13px;
    font-weight: 600;
}

small,
.small {
    font-size: 11px;
    font-weight: 400;
}

.text-xs {
    font-size: 10px;
    font-weight: 400;
}

.label-uppercase {
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.tabular {
    font-variant-numeric: tabular-nums;
}

/* Layout
   ========================================================================== */
[x-cloak] {
    display: none !important;
}

.nfg-sidebar {
    width: var(--nfg-sidebar-width);
    height: 100%;
    overflow-y: auto;
    background: var(--bs-dark);
    flex-shrink: 0;
    scrollbar-width: none;
}

.nfg-sidebar-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1020;
    background: rgba(17, 24, 39, 0.48);
    display: none;
}

.nfg-sidebar-close {
    display: none;
}

.nfg-mobile-nav {
    display: none;
}

.nfg-sidebar::-webkit-scrollbar {
    display: none;
}

#main-content {
    scrollbar-width: none;
}

#main-content::-webkit-scrollbar {
    display: none;
}

.nfg-sidebar .nav-link {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #9CA3AF;
    font-size: 12px;
    padding: 6px 12px;
    border-radius: 6px;
}

.nfg-sidebar .nav-link:hover {
    background: rgba(255, 255, 255, 0.06);
    color: #E5E7EB;
}

.nfg-sidebar .nav-link.active {
    background: rgba(46, 204, 113, 0.15);
    color: var(--bs-primary);
    border-left: 3px solid var(--bs-primary);
    padding-left: 9px;
}

.nfg-sidebar .nav-link i {
    width: 16px;
    text-align: center;
}

.nfg-sidebar-brand-copy {
    display: flex;
    min-width: 0;
    flex-direction: column;
    align-items: flex-start;
    gap: 1px;
}

.nav-section-label {
    display: block;
    padding: 4px 12px;
    color: #4B5563;
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.nfg-topbar {
    box-sizing: border-box;
    height: 64px;
    min-height: 64px;
    flex: 0 0 64px;
    justify-content: space-between;
    background: var(--nfg-surface);
    border-bottom: 1px solid var(--bs-border-color);
}

.nfg-topbar > .ms-auto {
    display: flex;
    min-width: 0;
    flex: 0 1 auto;
    justify-content: flex-end;
}

.nfg-topbar-actions {
    margin-left: auto;
    width: auto;
    flex: 0 1 auto;
    max-width: 100%;
    justify-content: flex-end;
}

.nfg-topbar-actions .nfg-municipio-picker {
    min-width: 0;
    flex-direction: row-reverse;
}

.nfg-topbar-actions .nfg-municipio-picker .dropdown {
    min-width: 0;
    max-width: 100%;
}

.nfg-municipio-picker .dropdown {
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    width: clamp(380px, 40vw, 560px);
}

.nfg-municipio-picker .form-select {
    overflow: hidden;
    font-size: 11px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.nfg-municipio-menu {
    width: min(320px, calc(100vw - 24px));
    padding: 0;
    font-size: 12px;
}

.nfg-municipio-menu .form-control,
.nfg-municipio-menu .input-group-text,
.nfg-municipio-menu .dropdown-item {
    font-size: 12px;
}

.nfg-municipio-opcoes {
    max-height: 260px;
    overflow-y: auto;
    padding: 4px 0;
}

.nfg-title-block {
    min-width: 0;
}

.nfg-title-block h1,
.nfg-title-block nav {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Sync indicator
   ========================================================================== */
.nfg-sync {
    display: flex;
    align-items: center;
    gap: 4px;
    color: var(--nfg-text-on-dark-muted);
    font-size: 9px;
    line-height: 1.2;
}

.nfg-sync .dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--bs-primary);
    animation: nfgPulse 2s infinite;
}

.nfg-sync.fail .dot {
    background: var(--bs-danger);
    animation: none;
}

@keyframes nfgPulse {
    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.4;
    }
}

/* HTMX indicators — garante hide mesmo sem CSS injection do runtime
   ========================================================================== */
.htmx-indicator          { opacity: 0; transition: opacity 200ms ease-in; }
.htmx-request .htmx-indicator,
.htmx-request.htmx-indicator { opacity: 1; }

/* Overlay loader — cobre o painel de análise durante requisições HTMX */
.nfg-overlay-loader {
    position: absolute;
    inset: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(var(--bs-body-bg-rgb, 255 255 255) / 0.75);
    backdrop-filter: blur(3px);
    border-radius: 8px;
    pointer-events: none;
    transition: opacity 250ms ease-in;
}
.nfg-overlay-loader-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    background: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: 12px;
    padding: 20px 28px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}
.nfg-overlay-loader-card small {
    color: var(--bs-secondary-color);
    font-size: 12px;
}
.htmx-request .nfg-overlay-loader,
.htmx-request.nfg-overlay-loader { pointer-events: auto; }
.nfg-analise-container { position: relative; }

/* KPI cards
   ========================================================================== */
.nfg-kpi {
    position: relative;
    overflow: hidden;
    box-shadow: var(--nfg-shadow-soft);
}

.nfg-kpi-light {
    background: var(--nfg-surface);
    border: 1px solid var(--bs-border-color);
    border-left: 4px solid var(--bs-primary);
    border-radius: 10px;
}

.nfg-kpi-dark {
    background: var(--nfg-surface-dark);
    border-left: 4px solid var(--bs-primary);
    border-radius: 10px;
}

.nfg-kpi-risk {
    border-left-color: var(--bs-warning);
}

.nfg-kpi-conform {
    border-left-color: var(--bs-info);
}

.nfg-kpi-label {
    margin-bottom: 4px;
    color: var(--bs-secondary-color);
    font-size: 10px;
    font-weight: 400;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.nfg-kpi-value {
    color: var(--bs-body-color);
    font-size: 18px;
    font-weight: 600;
    line-height: 1.1;
}

.nfg-kpi-dark .nfg-kpi-label {
    color: #9CA3AF;
}

.nfg-kpi-dark .nfg-kpi-value {
    color: #FFFFFF;
}

.nfg-kpi-delta {
    margin-top: 4px;
    color: var(--bs-secondary-color);
    font-size: 11px;
}

.nfg-kpi-delta.up {
    color: var(--bs-primary);
}

.nfg-kpi-delta.down {
    color: var(--bs-danger);
}

.nfg-kpi-delta.warn {
    color: var(--bs-warning);
}

/* Tables
   ========================================================================== */
.table-responsive {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.nfg-table {
    min-width: 760px;
}

.nfg-app-shell .table > thead > tr > th {
    background-color: var(--nfg-table-header-bg);
    color: var(--nfg-table-header-color);
    font-size: 11px;
    font-weight: 600;
    padding: 9px 12px !important;
}

.nfg-table thead th {
    position: sticky;
    top: 0;
    z-index: 1;
    background: var(--nfg-table-header-bg);
    padding: 9px 12px;
    color: var(--nfg-table-header-color);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: capitalize;
    white-space: nowrap;
    border-bottom: 2px solid var(--bs-border-color);
}

.nfg-table tbody td {
    padding: 8px 12px;
    color: var(--bs-body-color);
    font-size: 10px;
    vertical-align: middle;
    border-bottom: 1px solid var(--bs-border-color);
}

.nfg-table th,
.nfg-table td {
    overflow-wrap: anywhere;
}

.nfg-table tbody tr:hover td {
    background: #F9FAFB;
}

.nfg-table tfoot td {
    padding: 8px 12px;
    font-size: 10px;
    font-weight: 600;
    border-top: 2px solid var(--bs-border-color);
}

.td-num {
    text-align: right;
}

.td-actions {
    width: 80px;
    text-align: center;
    white-space: nowrap;
}

/* Status badges
   ========================================================================== */
.badge.rounded-pill.nfg-status-regular,
.badge.rounded-pill.nfg-status-sem-cadastro,
.badge.rounded-pill.nfg-status-notificado,
.badge.rounded-pill.nfg-status-cancelada,
.badge.rounded-pill.nfg-status-substituida,
.badge.rounded-pill.nfg-status-pendente,
.badge.rounded-pill.nfg-status-enviado,
.badge.rounded-pill.nfg-status-entregue,
.badge.rounded-pill.nfg-status-falhou,
.badge.rounded-pill.nfg-status-aberto,
.badge.rounded-pill.nfg-status-pago,
.badge.rounded-pill.nfg-status-vencido,
.badge.rounded-pill.nfg-status-cancelado,
.badge.rounded-pill.nfg-status-parcelado,
.badge.rounded-pill.nfg-status-desconhecido {
    padding: 3px 8px;
    font-size: 10px;
    font-weight: 500;
}

.badge.rounded-pill.nfg-status-regular:not(.no-dot)::before,
.badge.rounded-pill.nfg-status-sem-cadastro:not(.no-dot)::before,
.badge.rounded-pill.nfg-status-notificado:not(.no-dot)::before,
.badge.rounded-pill.nfg-status-cancelada:not(.no-dot)::before,
.badge.rounded-pill.nfg-status-substituida:not(.no-dot)::before,
.badge.rounded-pill.nfg-status-pendente:not(.no-dot)::before,
.badge.rounded-pill.nfg-status-enviado:not(.no-dot)::before,
.badge.rounded-pill.nfg-status-entregue:not(.no-dot)::before,
.badge.rounded-pill.nfg-status-falhou:not(.no-dot)::before,
.badge.rounded-pill.nfg-status-aberto:not(.no-dot)::before,
.badge.rounded-pill.nfg-status-pago:not(.no-dot)::before,
.badge.rounded-pill.nfg-status-vencido:not(.no-dot)::before,
.badge.rounded-pill.nfg-status-cancelado:not(.no-dot)::before,
.badge.rounded-pill.nfg-status-parcelado:not(.no-dot)::before,
.badge.rounded-pill.nfg-status-desconhecido:not(.no-dot)::before {
    content: "\2022 ";
    margin-right: 2px;
}

.nfg-status-regular {
    background: #D1FAE5;
    color: #065F46;
}

.nfg-status-sem-cadastro {
    background: #FEF3C7;
    color: #92400E;
}

.nfg-status-notificado {
    background: #DBEAFE;
    color: #1E40AF;
}

.nfg-status-cancelada {
    background: #FEE2E2;
    color: #991B1B;
}

.nfg-status-substituida {
    background: #FFEDD5;
    color: #9A3412;
}

.nfg-status-pendente {
    background: #F3F4F6;
    color: #374151;
}

.nfg-status-enviado {
    background: #DBEAFE;
    color: #1E40AF;
}

.nfg-status-entregue {
    background: #D1FAE5;
    color: #065F46;
}

.nfg-status-falhou {
    background: #FEE2E2;
    color: #991B1B;
}

/* Status badges — DAM / portal */
.nfg-status-aberto {
    background: #FEF3C7;
    color: #92400E;
}
.nfg-status-pago {
    background: #D1FAE5;
    color: #065F46;
}
.nfg-status-vencido {
    background: #FEE2E2;
    color: #991B1B;
}
.nfg-status-cancelado {
    background: #F3F4F6;
    color: #374151;
}
.nfg-status-parcelado {
    background: #DBEAFE;
    color: #1E40AF;
}
.nfg-status-desconhecido {
    background: #F3F4F6;
    color: #6B7280;
}

/* Portal topbar nav links */
.nfg-topbar .nfg-nav-link {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    font-size: 12px;
    font-weight: 500;
    color: var(--bs-secondary-color);
    text-decoration: none;
    border-radius: 6px;
    transition: background 0.15s, color 0.15s;
}
.nfg-topbar .nfg-nav-link:hover {
    background: #F3F4F6;
    color: var(--bs-body-color);
}
.nfg-topbar .nfg-nav-link.active {
    background: var(--nfg-primary-subtle);
    color: var(--nfg-primary-dark);
    font-weight: 600;
}

/* Buttons and forms
   ========================================================================== */
.btn {
    min-height: 32px;
    font-size: 12px;
    white-space: nowrap;
}

.btn-sm {
    min-height: 26px;
    font-size: 11px;
}

.btn-lg {
    min-height: 38px;
    font-size: 13px;
}

.btn-primary {
    --bs-btn-bg: var(--bs-primary);
    --bs-btn-border-color: var(--bs-primary);
    --bs-btn-hover-bg: var(--nfg-primary-dark);
    --bs-btn-hover-border-color: var(--nfg-primary-dark);
    --bs-btn-active-bg: var(--nfg-primary-dark);
    --bs-btn-active-border-color: var(--nfg-primary-dark);
}

.btn-outline-primary {
    --bs-btn-color: var(--bs-primary);
    --bs-btn-border-color: var(--bs-primary);
    --bs-btn-hover-bg: var(--bs-primary);
    --bs-btn-hover-border-color: var(--bs-primary);
    --bs-btn-active-bg: var(--bs-primary);
    --bs-btn-active-border-color: var(--bs-primary);
}

.btn-ghost {
    padding: 4px 8px;
    color: var(--bs-secondary-color);
    background: transparent;
    border: none;
    border-radius: 6px;
    font-size: 12px;
}

.btn-ghost:hover {
    color: var(--bs-body-color);
    background: #F3F4F6;
}

.btn-ghost.btn-on-dark {
    color: #9CA3AF;
}

.btn-ghost.btn-on-dark:hover {
    color: #FFFFFF;
    background: rgba(255, 255, 255, 0.08);
}

.form-control,
.form-select {
    min-height: 32px;
    background-color: var(--nfg-surface);
    font-size: 12px;
    border-color: var(--bs-border-color);
}

.form-select {
    width: max-content;
    max-width: 100%;
    padding-right: 2.25rem;
}

.form-label {
    margin-bottom: 4px;
}

.form-control:focus,
.form-select:focus {
    border-color: var(--bs-primary);
    box-shadow: 0 0 0 0.2rem rgba(46, 204, 113, 0.16);
}

/* Cards
   ========================================================================== */
.nfg-card {
    background: var(--nfg-surface-muted);
    border: 1px solid var(--bs-border-color);
    border-radius: 10px;
    box-shadow: var(--nfg-shadow-soft);
    overflow: clip;
}

.nfg-card .card-header {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    padding: 12px 16px;
    color: var(--bs-body-color);
    background: var(--nfg-surface-muted);
    border-bottom: 1px solid #F3F4F6;
    font-size: 12px;
    font-weight: 600;
}

.nfg-card .card-footer {
    background: var(--nfg-surface-muted);
    border-top: 1px solid var(--bs-border-color);
}

.nfg-card .table {
    --bs-table-bg: var(--nfg-surface);
}

/* Filter panels
   ========================================================================== */
.nfg-filter-panel {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    flex-wrap: wrap;
    padding: 10px 12px;
    background: var(--nfg-surface-muted);
    border: 1px solid var(--bs-border-color);
    border-radius: 10px;
    box-shadow: var(--nfg-shadow-soft);
}

/* Alerts and empty states
   ========================================================================== */
.nfg-smart-alert {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    color: #92400E;
    background: var(--bs-warning-bg-subtle);
    border: 1px solid var(--bs-warning);
    border-radius: 8px;
    font-size: 12px;
}

.nfg-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 48px 24px;
    color: #9CA3AF;
    text-align: center;
}

.nfg-empty i {
    margin-bottom: 12px;
    font-size: 32px;
}

.nfg-empty p {
    margin: 0;
    font-size: 12px;
}

/* Progress and indicators
   ========================================================================== */
.nfg-progress {
    height: 4px;
    overflow: hidden;
    background: var(--bs-border-color);
    border-radius: 2px;
}

.nfg-progress i {
    display: block;
    height: 100%;
    background: var(--bs-primary);
    border-radius: 2px;
}

.nfg-progress.warn i {
    background: var(--bs-warning);
}

.nfg-progress.danger i {
    background: var(--bs-danger);
}

.nfg-trend {
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 500;
}

.nfg-trend-growth-fast {
    background: #D1FAE5;
    color: #065F46;
}

.nfg-trend-growth {
    background: #ECFDF5;
    color: #059669;
}

.nfg-trend-stable {
    background: #F3F4F6;
    color: #374151;
}

.nfg-trend-decline {
    background: #FEE2E2;
    color: #991B1B;
}

.nfg-risk-badge {
    display: inline-block;
    min-width: 28px;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 700;
    text-align: center;
}

.nfg-risk-low {
    background: #D1FAE5;
    color: #065F46;
}

.nfg-risk-mid {
    background: #FEF3C7;
    color: #92400E;
}

.nfg-risk-high {
    background: #FEE2E2;
    color: #991B1B;
}

.b-high,
.b-mid,
.b-low {
    border-radius: 999px;
    font-size: 10px;
    font-weight: 600;
}

.b-high {
    background: #FEE2E2;
    color: #991B1B;
}

.b-mid {
    background: #FEF3C7;
    color: #92400E;
}

.b-low {
    background: #D1FAE5;
    color: #065F46;
}

.nfg-regime-card {
    height: 100%;
    padding: 12px;
    background: var(--nfg-surface);
    border: 1px solid var(--bs-border-color);
    border-left: 3px solid var(--nfg-primary);
    border-radius: 6px;
}

.nfg-regime-card.mei {
    border-left-color: var(--bs-warning);
}

.nfg-regime-card.simples {
    border-left-color: var(--bs-info);
}

.nfg-regime-card.lpres {
    border-left-color: #9C27B0;
}

.nfg-regime-card.lreal {
    border-left-color: #374151;
}

.nfg-regime-name {
    color: var(--bs-secondary-color);
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
}

.nfg-regime-iss {
    margin-top: 4px;
    font-size: 18px;
    font-weight: 700;
}

.nfg-regime-meta {
    margin-top: 2px;
    color: var(--bs-secondary-color);
    font-size: 10px;
}

/* Avatar
   ========================================================================== */
.nfg-avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    color: var(--bs-primary);
    background: rgba(46, 204, 113, 0.2);
    border-radius: 50%;
    font-size: 10px;
    font-weight: 700;
}

.nfg-avatar-lg {
    width: 56px;
    height: 56px;
    font-size: 20px;
}

.nfg-timeline {
    display: grid;
    gap: 10px;
}

.nfg-timeline-item {
    position: relative;
    padding: 10px 12px 10px 16px;
    border-left: 3px solid var(--nfg-primary);
    background: var(--nfg-surface);
    border-radius: 6px;
}

/* Pagination
   ========================================================================== */
.pagination {
    margin: 0;
}

.page-link {
    display: inline-flex;
    height: 36px;
    align-items: center;
    justify-content: center;
    padding: 0 12px;
    color: var(--bs-secondary-color);
    border-color: var(--bs-border-color);
    font-size: 12px;
    line-height: 1;
}

.page-link:hover {
    color: var(--bs-body-color);
    background: #F3F4F6;
    border-color: var(--bs-border-color);
}

.page-item.active .page-link {
    color: #FFFFFF;
    background: var(--bs-primary);
    border-color: var(--bs-primary);
}

.nfg-pagination-footer {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    gap: 4px 8px;
}

.nfg-pagination-meta {
    grid-column: 1;
    grid-row: 1;
    min-width: 0;
}

.nfg-pagination {
    grid-column: 2;
    grid-row: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
}

.nfg-pagination-control {
    position: relative;
    display: inline-flex !important;
    height: 36px !important;
    min-height: 36px !important;
    align-items: center;
    justify-content: center;
    gap: 4px;
    box-sizing: border-box;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    line-height: 1 !important;
    white-space: nowrap;
    cursor: pointer;
}

.nfg-pagination-control:focus-visible {
    z-index: 3;
    outline: 3px solid rgba(46, 204, 113, .25);
    outline-offset: 2px;
}

.page-item.disabled .nfg-pagination-control,
.nfg-pagination-control:disabled,
.nfg-pagination-control.disabled,
.nfg-pagination-control[aria-disabled="true"],
.nfg-pagination-control[aria-current="page"] {
    cursor: default;
}

.nfg-pagination-control.disabled,
.nfg-pagination-control[aria-disabled="true"] {
    pointer-events: none;
}

.nfg-pagination-touch {
    min-width: 44px;
}

.nfg-pagination-touch::after {
    position: absolute;
    inset: -4px 0;
    content: "";
}

.nfg-contribuintes-table {
    min-width: 1040px;
}

.nfg-contribuintes-table .nfg-contribuintes-dados {
    white-space: nowrap;
}

/* Mobile bottom navigation
   ========================================================================== */
.nfg-mobile-nav {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1010;
    align-items: stretch;
    justify-content: space-around;
    min-height: calc(60px + env(safe-area-inset-bottom));
    padding: 6px 8px calc(6px + env(safe-area-inset-bottom));
    background: var(--nfg-surface);
    border-top: 1px solid var(--bs-border-color);
    box-shadow: 0 -8px 24px rgba(17, 24, 39, 0.08);
}

.nfg-mobile-nav-item {
    display: flex;
    flex: 1 1 0;
    min-width: 0;
    min-height: 48px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    color: var(--bs-secondary-color);
    background: transparent;
    border: 0;
    border-radius: 8px;
    font-size: 10px;
    font-weight: 500;
    text-decoration: none;
}

.nfg-mobile-nav-item i {
    font-size: 17px;
    line-height: 1;
}

.nfg-mobile-nav-item span {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.nfg-mobile-nav-item.active {
    color: var(--nfg-primary-dark);
    background: var(--nfg-primary-subtle);
}

.nfg-mobile-nav-item:active,
.nfg-mobile-nav-item:hover {
    color: var(--nfg-primary-dark);
}

/* Table fill — footer fixo no rodapé
   ========================================================================== */
.nfg-table-fill {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.nfg-table-fill.card,
.nfg-table-fill > .nfg-card {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.nfg-table-fill .table-responsive[style*="max-height"] {
    max-height: none !important;
}

.nfg-table-fill.card > .table-responsive,
.nfg-table-fill > .nfg-card > .table-responsive {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
}

.nfg-table-fill #bloco-tabela-usuarios {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.nfg-table-fill #bloco-tabela-usuarios > .table-responsive {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
}

.nfg-table-fill.card > .card-footer,
.nfg-table-fill > .nfg-card > .card-footer {
    flex-shrink: 0;
}

#main-content > form.nfg-card,
#main-content > .nfg-card.mb-2,
#main-content > .nfg-card.mb-3 {
    flex-shrink: 0;
}

.nfg-notas-page {
    display: flex;
    flex: 1;
    min-height: 0;
    flex-direction: column;
}

@media (min-width: 768px) {
    #main-content:has(> .nfg-notas-page) {
        padding-top: 8px !important;
        padding-bottom: 8px !important;
    }
}

.nfg-notas-page .nfg-card .card-body {
    padding-top: 8px;
    padding-bottom: 8px;
}

.nfg-notas-page .nfg-notas-tbl tbody td {
    padding-top: 1px !important;
    padding-bottom: 1px !important;
    line-height: 1.05;
}

.nfg-notas-page .nfg-pagination-footer {
    padding-top: 4px !important;
    padding-bottom: 4px !important;
}

/* Charts
   ========================================================================== */
.chart-panel {
    position: relative;
    width: 100%;
    min-width: 0;
    height: 280px;
    min-height: 280px;
    max-height: 280px;
}

.chart-panel-sm {
    position: relative;
    width: 100%;
    min-width: 0;
    height: 240px;
    min-height: 240px;
    max-height: 240px;
}

.chart-panel canvas,
.chart-panel-sm canvas {
    display: block;
    max-width: 100%;
    max-height: 100%;
}

.nfg-portal-chart-grid > [class*="col-"],
.nfg-portal-chart-grid .nfg-card,
.nfg-portal-chart-grid .card-body {
    min-width: 0;
}

.nfg-chart-empty {
    min-height: 280px;
    justify-content: center;
}

@media (min-width: 992px) {
    .nfg-sidebar-backdrop {
        display: none !important;
    }
}

@media (max-width: 991.98px) {
    .nfg-sidebar-backdrop {
        display: block;
    }

    .nfg-sidebar-close {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        order: 10;
        margin-left: auto;
    }

    .nfg-sidebar {
        position: fixed;
        inset: 0 auto 0 0;
        z-index: 1030;
        width: min(var(--nfg-sidebar-width), 86vw) !important;
        max-width: 320px;
        height: 100dvh;
        box-shadow: 0 16px 40px rgba(17, 24, 39, 0.32);
    }

    .nfg-app-shell {
        width: 100%;
    }

    .nfg-municipio-picker .dropdown {
        width: clamp(280px, 45vw, 440px);
    }

    .nfg-topbar {
        height: 64px;
        min-height: 64px;
        flex-basis: 48px;
        padding-right: 16px !important;
        padding-left: 16px !important;
        padding-top: 12px !important;
        padding-bottom: 12px !important;
    }

    .chart-panel,
    .chart-panel-sm {
        height: 240px;
        min-height: 240px;
        max-height: 240px;
    }

    .nfg-chart-empty { min-height: 240px; }

    .nfg-portal-summary-filter-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .nfg-portal-summary-filter-grid .nfg-portal-segmented,
    .nfg-portal-summary-filter-grid .nfg-filter-full,
    .nfg-portal-summary-filter-grid > button[type="button"],
    .nfg-portal-summary-filter-actions {
        width: 100%;
        grid-column: 1 / -1;
    }

    .nfg-portal-summary-groups {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .nfg-portal-summary-group:nth-child(3) {
        grid-column: 1 / -1;
    }
}

@media (max-width: 767.98px) {
    body {
        font-size: 12px;
    }

    .display-fiscal {
        font-size: 22px;
    }

    h1,
    .h1 {
        font-size: 16px;
    }

    .nfg-topbar {
        padding-right: 12px !important;
        padding-left: 12px !important;
    }

    .nfg-municipio-picker .dropdown {
        width: min(72vw, 360px);
    }

    .nfg-menu-toggle {
        display: none;
    }

    #main-content {
        padding: 12px 12px calc(76px + env(safe-area-inset-bottom)) !important;
    }

    #main-content.d-flex {
        padding-bottom: calc(76px + env(safe-area-inset-bottom)) !important;
    }

    .nfg-mobile-nav {
        display: flex;
    }

    /* Sidebar lateral do portal oculta em mobile — a nfg-mobile-nav substitui.
       Especificidade dupla (0-2-0) é necessária para superar a regra base do .nfg-sidebar.nfg-portal-sidebar. */
    .nfg-sidebar.nfg-portal-sidebar { display: none; }
    .nfg-portal-topbar-logo { display: inline-flex; }
    .nfg-portal-topbar-title { display: none; }
    .nfg-portal-main { padding: 12px 12px calc(76px + env(safe-area-inset-bottom)); }

    .alert {
        margin-right: 12px !important;
        margin-left: 12px !important;
    }

    .nfg-kpi-value {
        font-size: 16px;
        overflow-wrap: anywhere;
    }

    .nfg-card {
        border-radius: 8px;
    }

    .nfg-card .card-header {
        padding: 6px 12px;
    }

    .nfg-card .card-body:not(.p-0) {
        padding: 12px;
    }

    .nfg-card .card-footer {
        flex-wrap: wrap;
        gap: 8px;
    }

    .nfg-card .card-footer nav {
        margin-left: 0 !important;
    }

    .table-responsive[style*="max-height"] {
        max-height: none !important;
    }

    .nfg-table {
        min-width: 680px;
    }

    .nfg-table thead th,
    .nfg-table tbody td,
    .nfg-table tfoot td {
        padding: 8px 10px;
    }

    .chart-panel,
    .chart-panel-sm {
        height: 220px;
        min-height: 220px;
        max-height: 220px;
    }

    .nfg-chart-empty { min-height: 220px; }
}

@media (max-width: 575.98px) {
    .nfg-sidebar {
        width: 100vw !important;
        max-width: none;
        border-radius: 0;
    }

    .btn:not(.btn-ghost):not(.page-link) {
        width: 100%;
    }

    .btn-ghost {
        min-width: 32px;
    }

    .nfg-smart-alert {
        align-items: flex-start;
        padding: 10px 12px;
    }

    .nfg-empty {
        padding: 32px 16px;
    }

    .pagination {
        flex-wrap: wrap;
    }

    .nfg-portal-sidebar { display: none; }
    .nfg-portal-topbar-logo { display: inline-flex; }
    .nfg-portal-topbar-title { display: none; }

    .nfg-pagination-footer {
        grid-template-columns: 1fr;
        justify-items: center;
    }

    .nfg-pagination-meta {
        grid-column: 1;
        grid-row: 2;
        text-align: center;
    }

    .nfg-pagination {
        grid-column: 1;
        grid-row: 1;
    }

    .nfg-portal-summary-groups {
        grid-template-columns: 1fr;
    }

    .nfg-portal-summary-filter-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
    }

    .nfg-portal-summary-filter-grid > * {
        min-width: 0;
    }

    .nfg-portal-summary-filter-grid .nfg-portal-segmented,
    .nfg-portal-summary-filter-grid .nfg-portal-notas-filtros-grid,
    .nfg-portal-summary-filter-grid > input[type="hidden"],
    .nfg-portal-summary-filter-actions {
        grid-column: 1 / -1;
    }

    .nfg-portal-summary-filter-grid > button[type="button"] {
        grid-column: auto;
    }

    .nfg-portal-summary-filter-actions {
        flex-direction: column;
    }

    .nfg-portal-summary-filter .nfg-filter-field input,
    .nfg-portal-summary-filter .nfg-filter-field select {
        width: 100% !important;
        min-width: 0 !important;
    }

    .nfg-portal-summary-filter input,
    .nfg-portal-summary-filter select,
    .nfg-portal-summary-filter button,
    .nfg-portal-summary-metric {
        min-height: 44px;
    }

    f
     .chart-panel {
        height: 240px;
        min-height: 240px;
        max-height: 240px;
    }
}

/* DANFSe modal
   ========================================================================== */
.nfg-danfse-modal .modal-dialog {
    max-width: min(1120px, calc(100vw - 24px));
    margin-top: 0;
}

.nfg-danfse-modal-header {
    flex-shrink: 0;
    background: #ffffff;
}

.nfg-danfse-modal-body {
    background: #eef1f5;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    max-height: calc(100vh - 120px);
    overflow-y: auto;
}

.nfg-danfse-actionbar {
    position: sticky;
    top: 0;
    z-index: 10;
    display: flex;
    justify-content: flex-end;
    padding: 8px 16px;
    background: #ffffff;
    border-bottom: 1px solid #e5e7eb;
    box-shadow: 0 1px 4px rgba(0,0,0,.06);
}

.nfg-danfse-modal-content {
    padding: 16px;
    width: 100%;
    display: flex;
    justify-content: center;
}

.nfg-detalhe-danfse-print-only {
    position: absolute;
    left: -10000px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.nfg-danfse-page {
    width: min(100%, 920px);
    min-height: 1180px;
    margin: 0 auto;
    padding: 10px 12px 18px;
    color: #111827;
    background: #ffffff;
    border: 2px solid #111827;
    box-shadow: 0 18px 45px rgba(15, 23, 42, 0.22);
    font-family: Arial, Helvetica, sans-serif;
    font-size: 10px;
    line-height: 1.18;
}

.nfg-danfse-header {
    display: grid;
    grid-template-columns: 1.3fr 1fr 1.3fr;
    align-items: center;
    gap: 8px;
    padding-bottom: 6px;
    border-bottom: 2px solid #111827;
}

.nfg-danfse-brand {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.nfg-danfse-brand img {
    width: 86px;
    max-height: 36px;
    object-fit: contain;
}

.nfg-danfse-brand-title {
    font-size: 18px;
    font-weight: 800;
    line-height: 1;
}

.nfg-danfse-title {
    text-align: center;
    font-size: 11px;
}

.nfg-danfse-title strong,
.nfg-danfse-title span,
.nfg-danfse-city strong,
.nfg-danfse-city span {
    display: block;
}

.nfg-danfse-city {
    text-align: right;
    font-size: 10px;
    text-transform: uppercase;
}

.nfg-danfse-grid {
    display: grid;
    border-top: 1px solid #111827;
    border-left: 1px solid #111827;
}

.nfg-danfse-grid-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.nfg-danfse-grid-8 {
    grid-template-columns: repeat(8, minmax(0, 1fr));
}

.nfg-danfse-notop {
    border-top: 0;
}

.nfg-danfse-field {
    min-width: 0;
    min-height: 42px;
    padding: 4px 6px;
    border-right: 1px solid #111827;
    border-bottom: 1px solid #111827;
}

.nfg-danfse-field span {
    display: block;
    margin-bottom: 3px;
    color: #111827;
    font-size: 8px;
    font-weight: 700;
}

.nfg-danfse-field strong {
    display: block;
    overflow-wrap: anywhere;
    color: #000000;
    font-size: 10px;
    font-weight: 700;
}

.nfg-danfse-field.span-2 {
    grid-column: span 2;
}

.nfg-danfse-field.span-3 {
    grid-column: span 3;
}

.nfg-danfse-field.span-4 {
    grid-column: span 4;
}

.nfg-danfse-field-destaque strong {
    font-size: 13px;
}

.nfg-danfse-section-title {
    margin: 7px 0 0;
    padding: 3px 6px;
    color: #000000;
    background: #f3f4f6;
    border: 1px solid #111827;
    border-bottom: 0;
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
}

.nfg-danfse-municipio {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    text-align: center;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
}

.nfg-danfse-brasao {
    width: 52px;
    height: 52px;
    object-fit: contain;
}

.nfg-danfse-ftable {
    width: 100%;
    border-collapse: collapse;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 10px;
    line-height: 1.18;
}

.nfg-danfse-ftable th,
.nfg-danfse-ftable td {
    padding: 4px 6px;
    border: 1px solid #111827;
}

.nfg-danfse-ftable th {
    background: #f3f4f6;
    font-size: 8px;
    font-weight: 700;
    text-align: left;
    border-top: 0;
}

.nfg-danfse-ftable tbody td {
    font-size: 10px;
}

.nfg-danfse-ftable tbody td:first-child {
    font-weight: 700;
}

.nfg-danfse-complement {
    min-height: 80px;
    padding: 6px;
    border: 1px solid #111827;
    font-size: 10px;
    overflow-wrap: anywhere;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.nfg-danfse-complement-text {
    flex: 1;
    min-height: 48px;
}

.nfg-danfse-complement-meta {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0 8px;
    border-top: 1px solid #d1d5db;
    padding-top: 6px;
}

.nfg-danfse-complement-meta span {
    display: block;
    font-size: 8px;
    font-weight: 700;
}

.nfg-danfse-complement-meta strong {
    display: block;
    font-size: 10px;
    font-weight: 700;
}

@media (max-width: 767.98px) {
    .nfg-danfse-modal-content {
        padding: 10px;
    }

    .nfg-danfse-page {
        min-height: auto;
        padding: 8px;
    }

    .nfg-danfse-header {
        grid-template-columns: 1fr;
        text-align: left;
    }

    .nfg-danfse-title,
    .nfg-danfse-city {
        text-align: left;
    }

    .nfg-danfse-grid-8 {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .nfg-danfse-complement-meta {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media print {
    @page {
        size: A4 portrait;
        margin: 1.5mm;
    }

    body * {
        visibility: hidden !important;
    }

    #danfse-print-area,
    #danfse-print-area * {
        visibility: visible !important;
    }

    #danfse-print-area {
        position: absolute;
        inset: 0 auto;
        width: 207mm;
        min-height: 294mm;
        overflow: visible;
        margin: 0;
        padding: 1.5mm;
        border: 1pt solid #000000;
        box-shadow: none;
        background: #ffffff;
        color: #000000;
    }

    .nfg-detalhe-danfse-print-only {
        position: static;
        width: auto;
        height: auto;
        overflow: visible;
    }

    .modal,
    .modal-dialog,
    .modal-content,
    .modal-body {
        position: static !important;
        display: block !important;
        overflow: visible !important;
        width: auto !important;
        height: auto !important;
        max-width: none !important;
        max-height: none !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        box-shadow: none !important;
        background: transparent !important;
    }

    .modal-header,
    .modal-backdrop,
    .nfg-danfse-actionbar,
    .nfg-sidebar,
    .nfg-topbar,
    .nfg-mobile-nav {
        display: none !important;
    }

    /* Compacta o documento para caber em uma folha A4 */
    .nfg-danfse-page {
        font-size: 8.5px;
        line-height: 1.1;
        padding: 5px 7px 6px;
    }

    .nfg-danfse-header {
        padding-bottom: 3px;
        gap: 4px;
    }

    .nfg-danfse-brand-title {
        font-size: 13px;
    }

    .nfg-danfse-brasao {
        width: 34px;
        height: 34px;
    }

    .nfg-danfse-section-title {
        margin: 3px 0 0;
        padding: 1px 4px;
        font-size: 8px;
    }

    .nfg-danfse-field {
        min-height: 26px;
        padding: 2px 3px;
    }

    .nfg-danfse-field span {
        font-size: 6px;
        margin-bottom: 1px;
    }

    .nfg-danfse-field strong {
        font-size: 8.5px;
    }

    .nfg-danfse-field-destaque strong {
        font-size: 10px;
    }

    .nfg-danfse-ftable th {
        font-size: 6px;
        padding: 1px 3px;
    }

    .nfg-danfse-ftable td {
        font-size: 8.5px;
        padding: 1px 3px;
    }

    .nfg-danfse-complement {
        min-height: 30px;
        padding: 3px 4px;
        font-size: 8px;
        gap: 4px;
    }

    .nfg-danfse-complement-meta {
        padding-top: 2px;
    }

    .nfg-danfse-complement-meta span {
        font-size: 6px;
    }

    .nfg-danfse-complement-meta strong {
        font-size: 8px;
    }
}

/* Impressão DANFSe do backoffice — mesma folha visual do documento nacional. */
.nfg-notas-print-shell #danfse-print-area {
    width: 100%;
    max-width: 207mm;
    min-height: 0;
}

@media print {
    .nfg-notas-print-body {
        padding: 0;
        background: transparent;
    }

    .nfg-notas-print-toolbar {
        display: none;
    }

    .nfg-notas-print-shell {
        width: 100%;
        margin: 0;
    }

    .nfg-notas-print-shell #danfse-print-area {
        width: 207mm;
        max-width: none;
        min-height: 294mm;
        height: auto;
        margin: 0;
        box-shadow: none;
    }
}

/* Portal do Contribuinte — Notas fiscais
   ========================================================================== */
.nfg-portal-notas-header {
    margin-bottom: 12px;
}

.nfg-portal-notas-contribuinte {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 6px;
    font-size: 18px;
    line-height: 1.2;
}

.nfg-portal-notas-total {
    text-align: right;
}

.nfg-portal-notas-direcao .btn,
.nfg-portal-notas-control {
    display: inline-flex;
    min-height: 32px;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 4px 12px;
    font-size: 12px;
    line-height: 1.2;
}

.nfg-portal-notas-filtros .form-label {
    margin-bottom: 2px;
    color: var(--bs-secondary-color);
    font-size: 10px;
}

.nfg-portal-notas-filtros-grid {
    display: grid;
    grid-template-columns: repeat(5, fit-content(140px)) auto;
    grid-auto-columns: fit-content(140px);
    align-items: end;
    gap: 2px;
}

.nfg-portal-notas-filter-actions {
    grid-row: 1;
    grid-column: 6;
}

.nfg-portal-notas-filtros-grid:has(.nfg-portal-notas-issrf-filter) .nfg-portal-notas-issrf-filter {
    grid-row: 2;
    grid-column: 1 / 6;
}

.nfg-portal-notas-filtros .form-select,
.nfg-portal-notas-filtros .form-control {
    height: 32px;
    min-height: 32px;
    font-size: 12px;
}

.nfg-portal-notas-issrf-filter {
    display: flex;
    min-height: 32px;
    align-items: center;
}

.nfg-portal-notas-issrf-filter .form-check {
    margin: 0;
}

.nfg-portal-notas-filter-actions,
.nfg-portal-notas-actions,
.nfg-portal-notas-detail-actions,
.nfg-portal-notas-document-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
}

.nfg-portal-notas-lista {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.nfg-portal-notas-mobile {
    display: none;
}

.nfg-portal-notas-table-shell {
    overflow: hidden;
}

.nfg-portal-notas-table {
    width: 100%;
    table-layout: fixed;
    font-size: .66rem;
}

.nfg-portal-notas-table thead {
    background: var(--bs-secondary-color);
    position: sticky;
    top: 0;
    z-index: 1;
}

.nfg-portal-notas-table th,
.nfg-portal-notas-table td {
    padding: 5px 6px;
    vertical-align: middle;
}

.nfg-portal-notas-table th {
    background: var(--bs-tertiary-bg);
    color: var(--bs-body-color);
    font-weight: 600;
    white-space: nowrap;
}

.nfg-portal-notas-table th:first-child,
.nfg-portal-notas-table td:first-child {
    width: 14%;
    padding-left: 10px;
}

.nfg-portal-notas-table th:nth-child(2) {
    width: 6%;
}

.nfg-portal-notas-table th:last-child,
.nfg-portal-notas-table td:last-child {
    width: 25%;
    padding-left: 10px;
}

.nfg-portal-notas-table-identificacao {
    display: flex;
    min-width: 0;
    align-items: center;
    overflow: hidden;
    white-space: nowrap;
}

.nfg-portal-notas-number-action {
    min-width: 0;
    padding: 0;
    border: 0;
    font-size: inherit;
    font-weight: 600;
    line-height: 1.2;
    text-align: left;
    text-decoration: none;
}

.nfg-portal-notas-icon-action {
    display: inline-flex;
    width: 1.5em;
    height: 1.5em;
    flex: 0 0 1.5em;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    border-radius: 3px;
    background: transparent;
    color: var(--bs-secondary-color);
    line-height: 1;
    text-decoration: none;
}

.nfg-portal-notas-icon-action:hover,
.nfg-portal-notas-icon-action:focus-visible {
    background: var(--bs-tertiary-bg);
    color: var(--bs-primary);
}

.nfg-portal-notas-status-dot {
    width: 8px;
    height: 8px;
    flex: 0 0 8px;
    border-radius: 50%;
}

.nfg-portal-notas-status-regular {
    background: var(--bs-success);
}

.nfg-portal-notas-status-cancelada {
    background: var(--bs-danger);
}

.nfg-portal-notas-status-substituida {
    background: var(--bs-warning);
}

.nfg-portal-notas-row-cancelada {
    color: var(--bs-secondary-color);
    text-decoration: line-through;
}

.nfg-portal-notas-table td:first-child > small {
    display: block;
}

.nfg-portal-notas-table-contraparte {
    overflow: hidden;
}

.nfg-portal-notas-table-contraparte small,
.nfg-portal-notas-table-contraparte span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.nfg-portal-notas-table-contraparte span {
    display: block;
}

.nfg-portal-notas-item-grid {
    display: grid;
    grid-template-columns: minmax(150px, .8fr) minmax(180px, 1.35fr) minmax(150px, .8fr) auto;
    align-items: center;
    gap: 8px 16px;
}

.nfg-portal-notas-identificacao,
.nfg-portal-notas-contraparte,
.nfg-portal-notas-valores {
    min-width: 0;
}

.nfg-portal-notas-contraparte .bi {
    flex: 0 0 auto;
    font-size: 11px;
}

.nfg-portal-notas-valores {
    display: grid;
    grid-template-columns: repeat(2, minmax(60px, 1fr));
    gap: 8px;
}

.nfg-portal-notas-valores span,
.nfg-portal-notas-valores strong {
    display: block;
}

.nfg-portal-notas-actions {
    flex-wrap: wrap;
}

.nfg-portal-notas-actions .btn-ghost {
    color: var(--bs-secondary-color);
}

.nfg-portal-notas-public-form {
    display: inline-flex;
    margin: 0;
}

.badge.rounded-pill.nfg-portal-notas-issrf {
    border: 1px solid var(--bs-warning);
    background: var(--bs-warning-bg-subtle);
    color: var(--bs-warning-text-emphasis);
}

.nfg-portal-notas-spinner {
    z-index: 1100;
}

.nfg-portal-notas-modal .modal-dialog {
    width: calc(100% - 32px);
    max-width: 920px;
    min-height: calc(100% - 32px);
    margin: 16px auto;
}

.nfg-portal-notas-modal .modal-content {
    max-height: calc(100vh - 32px);
    overflow: hidden;
    border-color: var(--bs-border-color);
    border-radius: 12px;
    box-shadow: var(--bs-box-shadow-lg);
}

.nfg-portal-notas-modal .modal-body {
    padding: 12px;
}

.nfg-portal-notas-detail-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 4px;
}

.nfg-portal-notas-detail-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr);
    gap: 8px;
}

.nfg-portal-notas-description {
    white-space: pre-wrap;
}

.nfg-portal-notas-values {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 4px 16px;
    font-size: 12px;
}

.nfg-portal-notas-values dt {
    color: var(--bs-secondary-color);
    font-weight: 400;
}

.nfg-portal-notas-values dd {
    margin: 0;
    text-align: right;
}

.nfg-portal-notas-key {
    display: flex;
    align-items: flex-start;
    gap: 6px;
}

.nfg-portal-notas-document-body {
    min-height: 100vh;
    margin: 0;
    padding: 16px;
    background: var(--bs-body-bg);
}

.nfg-portal-notas-document-toolbar {
    display: flex;
    width: min(207mm, 100%);
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 0 auto 8px;
    padding: 8px 12px;
    border: 1px solid var(--bs-border-color);
    border-radius: 10px;
    background: var(--nfg-surface);
}

.nfg-portal-notas-document-toolbar small {
    display: block;
    color: var(--bs-secondary-color);
}

.nfg-portal-notas-document-shell {
    width: min(207mm, 100%);
    margin: 0 auto;
}

#danfse-print-area.nfg-portal-notas-document {
    width: 100%;
    max-width: 207mm;
    min-height: 0;
    height: auto;
}

@media (max-width: 991.98px) {
    .nfg-portal-notas-desktop {
        display: none;
    }

    .nfg-portal-notas-mobile {
        display: block;
    }

    .nfg-portal-notas-filtros-grid {
        grid-template-columns: auto repeat(2, minmax(0, 1fr));
    }

    .nfg-portal-notas-filter-actions {
        grid-column: 1 / -1;
    }

    .nfg-portal-notas-item-grid {
        grid-template-columns: minmax(140px, .8fr) minmax(180px, 1.2fr) minmax(140px, .8fr);
    }

    .nfg-portal-notas-actions {
        grid-column: 1 / -1;
    }
}

@media (max-width: 575.98px) {
    .nfg-portal-notas-header {
        margin-bottom: 8px;
    }

    .nfg-portal-notas-direcao {
        display: flex;
        width: 100%;
    }

    .nfg-portal-notas-direcao .btn {
        flex: 1;
    }

    .nfg-portal-notas-direcao .btn,
    .nfg-portal-notas-control {
        min-height: 44px;
        max-width: 100%;
    }

    .nfg-portal-notas-filtros-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        align-items: end;
    }

    .nfg-portal-notas-item-grid,
    .nfg-portal-notas-detail-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .nfg-portal-notas-filtros-grid > div {
        grid-column: 1 / -1;
    }

    .nfg-portal-notas-filtros-grid > .nfg-notas-date,
    .nfg-portal-notas-filtros-grid > .nfg-notas-situacao,
    .nfg-portal-notas-filtros-grid > .nfg-portal-notas-filter-actions {
        grid-column: auto;
        width: 100%;
        align-self: end;
    }

    .nfg-portal-notas-filtros-grid > .nfg-portal-notas-filter-actions {
        display: flex;
        flex-direction: column;   
        justify-content: flex-end;
    }

    .nfg-portal-notas-filtros-grid > .nfg-portal-notas-filter-actions .btn {
        width: 100%;
        padding: auto;
    }

    .nfg-portal-notas-filter-actions {
        grid-row: auto;
    }

    .nfg-portal-notas-filtros-grid:has(.nfg-portal-notas-issrf-filter) .nfg-portal-notas-issrf-filter {
        grid-row: auto;
    }

    .nfg-portal-notas-filtros .form-select,
    .nfg-portal-notas-filtros .form-control,
    .nfg-portal-notas-issrf-filter {
        min-height: 44px;
        height: 44px;
    }

    .nfg-portal-notas-filter-actions,
    .nfg-portal-notas-actions,
    .nfg-portal-notas-detail-actions,
    .nfg-portal-notas-document-actions {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-column: 1 / -1;
        width: 100%;
    }

    .nfg-portal-notas-actions .nfg-portal-notas-public-form,
    .nfg-portal-notas-detail-actions .nfg-portal-notas-public-form {
        grid-column: 1 / -1;
    }

    .nfg-portal-notas-public-form .btn,
    .nfg-portal-notas-detail-actions .btn,
    .nfg-portal-notas-filter-actions .btn,
    .nfg-portal-notas-document-actions .btn {
        width: 100%;
    }

    .nfg-portal-notas-modal .modal-dialog {
        width: calc(100% - 16px);
        min-height: calc(100% - 16px);
        margin: 8px auto;
    }

    .nfg-portal-notas-modal .modal-content {
        max-height: calc(100vh - 16px);
        border-radius: 10px;
    }

    .nfg-portal-notas-document-body {
        padding: 8px;
    }

    .nfg-portal-notas-document-toolbar {
        align-items: stretch;
        flex-direction: column;
    }

    #danfse-print-area.nfg-portal-notas-document .nfg-danfse-header {
        grid-template-columns: 1fr;
        text-align: left;
    }

    #danfse-print-area.nfg-portal-notas-document .nfg-danfse-municipio {
        text-align: left;
    }

    #danfse-print-area.nfg-portal-notas-document .nfg-danfse-identificacao {
        padding-right: 0;
    }

    #danfse-print-area.nfg-portal-notas-document .nfg-danfse-qr {
        position: static;
        width: 100%;
        padding: 6px;
    }

    #danfse-print-area.nfg-portal-notas-document .nfg-danfse-grid-4 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    #danfse-print-area.nfg-portal-notas-document .span-2,
    #danfse-print-area.nfg-portal-notas-document .span-3,
    #danfse-print-area.nfg-portal-notas-document .span-4 {
        grid-column: 1 / -1;
    }
}

@media print {
    .nfg-portal-notas-document-body {
        padding: 0;
        background: transparent;
    }

    .nfg-portal-notas-document-toolbar {
        display: none;
    }

    .nfg-portal-notas-document-shell {
        width: 100%;
        margin: 0;
    }

    #danfse-print-area.nfg-portal-notas-document {
        width: 207mm;
        max-width: none;
        height: 294mm;
        min-height: 294mm;
    }
}

/* Portal do Contribuinte — DAM
   Mantém os tokens compactos da área administrativa com alvos de toque móveis. */
.nfg-portal-dam-page {
    min-width: 0;
}

.nfg-portal-dam-heading {
    max-width: 720px;
}

.nfg-portal-dam-mode {
    width: fit-content;
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

.nfg-portal-dam-mode-options {
    display: flex;
    gap: 4px;
    padding: 4px;
    background: var(--nfg-surface);
    border: 1px solid var(--bs-border-color);
    border-radius: 8px;
}

.nfg-portal-dam-mode-option {
    display: inline-flex;
    min-width: 96px;
    min-height: 32px;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 4px 10px;
    color: var(--bs-secondary-color);
    font-size: 12px;
    font-weight: 500;
    border: 1px solid transparent;
    border-radius: 6px;
    cursor: pointer;
}

.nfg-portal-dam-mode-option:hover {
    color: var(--bs-body-color);
    background: #F9FAFB;
}

.nfg-portal-dam-mode-option.active {
    color: var(--nfg-primary-dark);
    background: var(--nfg-primary-subtle);
    border-color: rgba(46, 204, 113, .35);
    font-weight: 600;
}

.nfg-portal-dam-mode-option:focus-within {
    outline: 3px solid rgba(46, 204, 113, .2);
    outline-offset: 1px;
}

.nfg-portal-dam-mode-option .form-check-input {
    flex: 0 0 auto;
}

.nfg-portal-touch {
    min-width: 32px;
    min-height: 32px;
}

.btn.nfg-portal-touch {
    padding: 4px 10px;
}

.nfg-portal-control {
    height: 32px;
    min-height: 32px;
    padding-top: 4px;
    padding-bottom: 4px;
    font-size: 12px;
    width: 100%;
}

.nfg-portal-dam-section {
    border: 0;
    background: transparent;
}

.nfg-portal-dam-section .card-header h2,
.nfg-portal-dam-filters .card-header h2,
.nfg-portal-dam-summary h2,
.nfg-portal-dam-page #lista-dams-title,
.nfg-portal-dam-page .modal-title {
    font-size: 15px;
    font-weight: 600;
}

.nfg-portal-dam-section .card-header p {
    font-size: 11px;
}

.nfg-portal-dam-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 8px;
}

.nfg-portal-dam-metric {
    min-width: 0;
    padding: 8px 12px;
    background: var(--nfg-surface);
    border: 1px solid var(--bs-border-color);
    border-left: 4px solid var(--bs-primary);
    border-radius: 10px;
}

.nfg-portal-dam-metric-overdue {
    border-left-color: var(--bs-danger);
}

.nfg-portal-dam-metric-next {
    border-left-color: var(--bs-warning);
}

.nfg-portal-dam-metric-paid {
    border-left-color: var(--bs-success);
}

.nfg-portal-dam-metric-pending {
    border-left-color: var(--bs-info);
}

.nfg-portal-dam-metric .nfg-kpi-value {
    display: block;
    overflow-wrap: anywhere;
}

.nfg-portal-dam-filter-grid {
    display: grid;
    grid-template-columns: 0.20fr 0.20fr 0.20fr 0.20fr 0.20fr 0.20fr 0.20fr;
    gap: 4px;
    align-items: end;
}

.nfg-portal-dam-field {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 4px;
}

.nfg-portal-dam-generation-controls {
    display: flex;
    align-items: end;
    gap: 4px;
    flex-wrap: wrap;
}

.nfg-portal-dam-search-notes {
    flex: 0 0 auto;
}

.nfg-portal-dam-item {
    transition: border-color .15s ease, box-shadow .15s ease;
}

.nfg-portal-dam-item:hover {
    border-color: #D1D5DB;
    box-shadow: 0 2px 8px rgba(17, 24, 39, .05);
}

.nfg-portal-dam-item-overdue {
    border-left: 4px solid var(--bs-danger);
}

.nfg-portal-dam-identity strong {
    font-size: 13px;
}

.nfg-portal-dam-item-layout {
    display: grid;
    grid-template-columns: minmax(150px, .85fr) minmax(460px, 3fr) auto;
    grid-template-areas:
        "identity data status"
        "identity data actions";
    gap: 4px 16px;
    align-items: center;
}

.nfg-portal-dam-identity {
    grid-area: identity;
    min-width: 0;
}

.nfg-portal-dam-item-data {
    grid-area: data;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px 12px;
    align-items: center;
}

.nfg-portal-dam-item-data > div {
    min-width: 0;
}

.nfg-portal-dam-item-value,
.nfg-portal-dam-item-due {
    display: block;
    overflow-wrap: anywhere;
    font-size: 15px;
    line-height: 1.2;
}

.nfg-portal-dam-item-overdue .nfg-portal-dam-item-value,
.nfg-portal-dam-item-overdue .nfg-portal-dam-item-due {
    color: var(--bs-danger);
}

.nfg-portal-dam-status {
    grid-area: status;
    justify-self: end;
}

.nfg-portal-dam-actions {
    grid-area: actions;
    justify-self: end;
}

.nfg-portal-dam-actions .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.nfg-portal-dam-pagination {
    padding: 4px 8px 4px 12px;
}

.nfg-portal-dam-note-option {
    cursor: pointer;
}

.nfg-portal-dam-note-option:has(.form-check-input:checked) {
    background: var(--nfg-primary-subtle);
}

.nfg-portal-dam-note-checkbox {
    width: 22px;
    height: 22px;
}

.nfg-portal-dam-notes-scroll {
    max-height: 55vh;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.nfg-portal-dam-selection-summary {
    z-index: 2;
    padding-bottom: 4px;
}

.nfg-portal-dam-detail-item {
    padding: 8px 12px;
}

.nfg-portal-dam-pdf-dialog {
    height: 92vh;
    max-height: 92vh;
}

.nfg-portal-dam-pdf-viewer-container {
    display: none;
    height: 100%;
    overflow-y: auto;
    background: #525659;
}

.nfg-portal-dam-pdf-viewer {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 12px 0;
}

.nfg-portal-dam-email {
    max-width: 250px;
}

.nfg-portal-rotate-180 {
    transform: rotate(180deg);
}

@media (max-width: 991.98px) {
    .nfg-portal-dam-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .nfg-portal-dam-metric-pending {
        grid-column: span 2;
    }

    .nfg-portal-dam-filter-grid {
        grid-template-columns: repeat(6, minmax(0, 1fr));
    }

    .nfg-portal-dam-filter-status,
    .nfg-portal-dam-filter-ndam {
        grid-column: span 2;
    }

    .nfg-portal-dam-item-layout {
        grid-template-columns: minmax(130px, .7fr) minmax(340px, 2fr) auto;
        gap: 4px 10px;
    }
}

@media (min-width: 768px) {
    .nfg-portal-dam-filters {
        display: block !important;
    }
}

@media (max-width: 767.98px) {
    .nfg-portal-dam-filters {
        display: none;
    }

    .nfg-portal-dam-filters.is-open {
        display: block;
    }

    .nfg-portal-dam-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .nfg-portal-dam-metric-pending {
        grid-column: auto;
    }

    .nfg-portal-dam-item-layout {
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas:
            "identity status"
            "data data"
            "actions actions";
        gap: 6px 8px;
    }

    .nfg-portal-dam-item-data {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 6px 12px;
    }

    .nfg-portal-dam-actions {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        width: 100%;
    }

    .nfg-portal-dam-actions .btn {
        width: 100%;
    }

    #modalPdfViewer .modal-header {
        align-items: flex-start;
    }

    #modalPdfViewer .modal-header > .d-flex {
        width: 100%;
        justify-content: center;
    }
}

@media (max-width: 575.98px) {
    .nfg-portal-dam-mode,
    .nfg-portal-dam-mode-options {
        width: 100%;
        padding-left: 0;
        padding-right: 0;
    }
    .nfg-portal-dam-mode-options {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 4px;
    }

    .nfg-portal-dam-mode-option {
        min-width: 0;
        min-height: 44px;   
    }

    .nfg-portal-touch,
    .nfg-portal-control {
        min-height: 44px;
    }

    .nfg-portal-control {
        height: 44px;
        width: 100%;
    }

    .nfg-portal-dam-generation-controls {
        display: grid;
        grid-template-columns: 1fr 1fr;
        column-gap: 4px;
        row-gap: 8px;
    }

    .nfg-portal-dam-field-month,
    .nfg-portal-dam-field-year {
        width: 100%;
    }

    .nfg-portal-dam-search-notes {
        grid-column: 1 / -1;
        width: 100%;
    }

    .nfg-portal-dam-filter-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .nfg-portal-dam-selection-summary {
        align-items: stretch !important;
        flex-direction: column;
    }

    .nfg-portal-dam-selection-summary .btn {
        width: 100%;
    }

    .nfg-portal-dam-email {
        max-width: none;
    }
}

@media (max-width: 389.98px) {
    .nfg-portal-dam-grid {
        grid-template-columns: 1fr;
    }

    .nfg-portal-dam-filter-grid {
        grid-template-columns: 1fr;
    }

    .nfg-portal-dam-filter-status,
    .nfg-portal-dam-filter-ndam {
        grid-column: auto;
    }

    .nfg-portal-dam-actions {
        gap: 6px !important;
    }
}

/* DANFSe v2.0 — NT 008/2026 */
.nfg-danfse-page {
    position: relative;
    width: min(100%, 210mm);
    min-height: 0;
    margin: 0 auto;
    padding: 2mm;
    color: #000;
    border: 1pt solid #000;
    font-family: "Microsoft Sans Serif", Arial, sans-serif;
    font-size: 7pt;
    line-height: 1.1;
}

.nfg-danfse-header {
    grid-template-columns: 4cm 1fr 4cm;
    min-height: 1.16cm;
    gap: 0;
    padding-bottom: 0;
    border-bottom: .5pt solid #000;
}

.nfg-danfse-logo { width: 4cm; max-height: .85cm; object-fit: contain; }
.nfg-danfse-title { font-family: Arial, sans-serif; font-size: 9pt; }
.nfg-danfse-municipio { gap: 1px; text-align: right; font-size: 6pt; font-weight: 400; text-transform: none; }
.nfg-danfse-municipio strong { font-size: 8pt; font-weight: 400; }
.nfg-danfse-sem-validade { display: block; margin-top: 1px; color: #f00; font-family: Arial, sans-serif; font-size: 9pt; }

.nfg-danfse-identificacao { position: relative; padding-right: 4.8cm; }
.nfg-danfse-qr { position: absolute; top: 2px; right: 0; width: 4.5cm; text-align: center; font-size: 6pt; line-height: 1.1; }
.nfg-danfse-qr img { display: block; width: 1.52cm; height: 1.52cm; margin: 0 auto 2px; }
.nfg-danfse-watermark { position: absolute; z-index: 2; top: 45%; left: 4%; width: 92%; color: #a6a6a6; font-family: Arial, sans-serif; font-size: 50pt; font-weight: 400; text-align: center; transform: rotate(-33deg); pointer-events: none; }

.nfg-danfse-grid { border-color: #000; border-width: .5pt; }
.nfg-danfse-field { min-height: .52cm; padding: 1px 2px; border-color: #000; border-width: .5pt; }
.nfg-danfse-field span { margin-bottom: 1px; color: #000; font-family: Arial, sans-serif; font-size: 6pt; font-weight: 700; }
.nfg-danfse-field strong { color: #000; font-family: "Microsoft Sans Serif", Arial, sans-serif; font-size: 7pt; font-weight: 400; }
.nfg-danfse-field-destaque { background: #f2f2f2; }
.nfg-danfse-field-destaque strong { font-size: 8pt; }
.nfg-danfse-section-title { margin: 0; padding: 1px 2px; background: #f2f2f2; border-color: #000; border-width: .5pt; font-family: Arial, sans-serif; font-size: 7pt; }
.nfg-danfse-description { min-height: .45cm; }
.nfg-danfse-blank-block .nfg-danfse-field { min-height: .42cm; }
.nfg-danfse-ausente { display: flex; min-height: .6cm; align-items: center; gap: 8px; padding: 1px 2px; border: .5pt solid #000; border-top: 0; font-family: Arial, sans-serif; font-size: 6pt; }
.nfg-danfse-ausente strong { font-size: 7pt; }
.nfg-danfse-ausente span { font-family: "Microsoft Sans Serif", Arial, sans-serif; }
.nfg-danfse-service .nfg-danfse-description:last-child { min-height: 1.65cm; }
.nfg-danfse-municipal .nfg-danfse-field { min-height: .42cm; }
.nfg-danfse-totals { margin-top: 2px; }
.nfg-danfse-complement { min-height: 4.4cm; padding: 2px; border-color: #000; border-width: .5pt; font-size: 7pt; line-height: 1.24; }
.nfg-danfse-canhoto { display: grid; grid-template-columns: 1.2fr 2fr 1.8fr; margin-top: 2px; border: .5pt solid #000; font-family: Arial, sans-serif; }
.nfg-danfse-canhoto > div { min-height: .85cm; padding: 1px 2px; border-right: .5pt solid #000; }
.nfg-danfse-canhoto > div:last-child { border-right: 0; }
.nfg-danfse-canhoto span { display: block; font-size: 6pt; font-weight: 700; }
.nfg-danfse-canhoto strong { display: block; margin-top: 2px; font-family: "Microsoft Sans Serif", Arial, sans-serif; font-size: 6pt; font-weight: 400; }

@media print {
    .nfg-danfse-page { box-shadow: none; }
}

/*
 * DANFSe — composição A4 do Anexo I.
 * Esta camada é exclusivamente visual: consolida medidas, fonte, grade e
 * alinhamento do canhoto sem interferir nos campos renderizados pelo Razor.
 */
#danfse-print-area.nfg-danfse-page {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    width: 207mm;
    height: 294mm;
    min-height: 294mm;
    margin: 0;
    padding: 1.5mm;
    overflow: hidden;
    border: .5pt solid #000;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 9px;
    line-height: 1.12;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
}

.nfg-danfse-page,
.nfg-danfse-page * {
    box-sizing: border-box;
    font-family: Arial, Helvetica, sans-serif;
}

/* Cabeçalho: logo, título e identificação municipal ocupam a mesma régua. */
.nfg-danfse-page .nfg-danfse-header {
    grid-template-columns: 40mm minmax(0, 1fr) 40mm;
    min-height: 13mm;
    align-items: center;
    border-bottom: .5pt solid #000;
}

.nfg-danfse-page .nfg-danfse-logo {
    width: 38mm;
    max-height: 10mm;
}

.nfg-danfse-page .nfg-danfse-title {
    font-size: 12px;
    font-weight: 700;
    line-height: 1.08;
}

.nfg-danfse-page .nfg-danfse-municipio,
.nfg-danfse-page .nfg-danfse-municipio strong {
    font-size: 8px;
    line-height: 1.12;
}

/* Grade contínua, com rótulos destacados e valores sempre em linha própria. */
.nfg-danfse-page .nfg-danfse-grid {
    border-width: .5pt;
}

.nfg-danfse-page .nfg-danfse-field {
    min-height: 19px;
    padding: 2px 3px;
    border-width: .5pt;
}

.nfg-danfse-page .nfg-danfse-field span,
.nfg-danfse-page .nfg-danfse-section-title,
.nfg-danfse-page .nfg-danfse-canhoto span {
    margin: 0 0 1px;
    color: #000;
    font-size: 8px;
    font-weight: 700;
    line-height: 1.05;
}

.nfg-danfse-page .nfg-danfse-field strong,
.nfg-danfse-page .nfg-danfse-canhoto strong {
    color: #000;
    font-size: 9px;
    font-weight: 400;
    line-height: 1.1;
}

.nfg-danfse-page .nfg-danfse-section-title {
    min-height: 14px;
    margin: 0;
    padding: 2px 3px;
    border-width: .5pt;
    /* Cinza muito leve, como as faixas do DANFSe de referência. */
    background: #f1f1f1;
}

.nfg-danfse-page .nfg-danfse-field-destaque {
    background: #f7f7f7;
}

.nfg-danfse-page .nfg-danfse-field-destaque strong {
    font-size: 9px;
}

.nfg-danfse-page .nfg-danfse-description {
    min-height: 19px;
}

.nfg-danfse-page .nfg-danfse-service .nfg-danfse-description:last-child {
    min-height: 44px;
}

.nfg-danfse-page .nfg-danfse-municipal .nfg-danfse-field,
.nfg-danfse-page .nfg-danfse-blank-block .nfg-danfse-field {
    min-height: 19px;
}

.nfg-danfse-page .nfg-danfse-ausente {
    min-height: 19px;
    padding: 2px 3px;
    border-width: .5pt;
    font-size: 8px;
}

/* QR permanece precisamente ancorado à área de identificação do modelo. */
.nfg-danfse-page .nfg-danfse-identificacao {
    padding-right: 45mm;
}

.nfg-danfse-page .nfg-danfse-qr {
    width: 42mm;
    font-size: 8px;
    line-height: 1.08;
}

.nfg-danfse-page .nfg-danfse-qr img {
    width: 16mm;
    height: 16mm;
}

/* A área complementar absorve o espaço residual; o canhoto fica no rodapé. */
.nfg-danfse-page .nfg-danfse-complement {
    display: flex;
    flex: 1 1 auto;
    min-height: 35mm;
    margin: 0;
    padding: 3px;
    border-width: .5pt;
    font-size: 9px;
    line-height: 1.15;
}

.nfg-danfse-page .nfg-danfse-complement-meta {
    border-top-color: #000;
}

.nfg-danfse-page .nfg-danfse-complement-text {
    min-height: 0;
}

.nfg-danfse-page .nfg-danfse-complement-meta {
    padding-top: 3px;
}

.nfg-danfse-page .nfg-danfse-canhoto {
    flex: 0 0 auto;
    margin-top: auto;
    border-width: .5pt;
}

.nfg-danfse-page .nfg-danfse-canhoto > div {
    min-height: 26px;
    padding: 2px 3px;
    border-width: .5pt;
}

@media print {
    #danfse-print-area.nfg-danfse-page {
        position: absolute;
        inset: 0 auto;
        width: 207mm;
        height: 294mm;
        min-height: 294mm;
        overflow: hidden;
        padding: 1.5mm;
        border: .5pt solid #000;
    }
}