:root {
    --bg: #F4F6FA;
    --panel: #fff;
    --text: #172033;
    --muted: #667085;
    --line: #e6eaf2;
    --primary: #2375FF;
    --primary2: #1E49F2;
    --success: #16a34a;
    --danger: #dc2626;
    --warning: #d97706;
    --shadow: 0 18px 45px rgba(15, 23, 42, .08);
    --radius: 20px
}

* {
    box-sizing: border-box
}

body {
    margin: 0;
    font-family: Inter, Segoe UI, Roboto, Arial, sans-serif;
    background: var(--bg);
    color: var(--text)
}

a {
    text-decoration: none;
    color: inherit
}

.sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    width: 285px;
    background: #081D4A;
    color: #dce7ff;
    padding: 22px 18px;
    z-index: 30;
    overflow: auto
}

.brand {
    display: flex;
    gap: 12px;
    align-items: center;
    margin-bottom: 24px
}

.brand.big {
    margin-bottom: 30px
}

.brand-mark {
    width: 44px;
    height: 44px;
    border-radius: 14px;
    background: linear-gradient(135deg, #2375FF, #1E49F2);
    display: grid;
    place-items: center;
    color: white;
    font-weight: 800;
    box-shadow: 0 10px 24px rgba(35, 117, 255, .3)
}

.brand strong {
    display: block;
    font-size: 18px
}

.brand span {
    display: block;
    color: #97a6c4;
    font-size: 12px
}

.sidebar nav {
    display: grid;
    gap: 5px
}

.sidebar nav a {
    padding: 12px 13px;
    border-radius: 13px;
    color: #d7e3fb;
    font-size: 14px
}

.sidebar nav a:hover {
    background: rgba(255, 255, 255, .08)
}

.topbar {
    position: fixed;
    left: 285px;
    right: 0;
    top: 0;
    height: 76px;
    background: rgba(255, 255, 255, .82);
    backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--line);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 28px;
    z-index: 20
}

.topbar strong {
    display: block;
    font-size: 19px
}

.topbar small {
    display: block;
    color: var(--muted);
    font-size: 12px;
    margin-top: 3px
}

.content {
    margin-left: 285px;
    padding: 100px 28px 38px
}

.auth-content {
    min-height: 100vh
}

.user-pill {
    display: flex;
    gap: 10px;
    align-items: center;
    background: #f2f5fb;
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: 8px 10px 8px 16px
}

.user-pill span {
    font-weight: 700
}

.user-pill small {
    margin: 0
}

.user-pill a {
    background: #fff;
    border: 1px solid var(--line);
    padding: 7px 12px;
    border-radius: 999px;
    color: var(--primary);
    font-weight: 700
}

.mobile-menu {
    display: none;
    border: 0;
    background: var(--primary);
    color: white;
    border-radius: 12px;
    padding: 9px 12px
}

.grid {
    display: grid;
    gap: 18px
}

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

.grid.two {
    grid-template-columns: 1.35fr .8fr
}

.grid.three {
    grid-template-columns: repeat(3, minmax(0, 1fr))
}

.card {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 20px
}

.metric {
    position: relative;
    overflow: hidden
}

.metric:after {
    content: "";
    position: absolute;
    right: -35px;
    top: -35px;
    width: 120px;
    height: 120px;
    background: linear-gradient(135deg, rgba(30, 91, 255, .12), rgba(14, 165, 233, .06));
    border-radius: 50%
}

.metric span {
    color: var(--muted);
    font-size: 13px
}

.metric strong {
    display: block;
    font-size: 28px;
    margin-top: 9px
}

.metric small {
    display: block;
    color: var(--muted);
    margin-top: 8px
}

.section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 8px 0 16px
}

.section-head h2,
.section-head h1 {
    margin: 0
}

.actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap
}

.btn,
button {
    border: 0;
    border-radius: 13px;
    padding: 10px 14px;
    font-weight: 800;
    cursor: pointer;
    display: inline-flex;
    gap: 8px;
    align-items: center;
    justify-content: center
}

.btn.primary,
button.primary {
    background: var(--primary);
    color: white
}

.btn.ghost {
    background: #eef3ff;
    color: var(--primary)
}

.btn.danger {
    background: #fee2e2;
    color: var(--danger)
}

.btn.success {
    background: #dcfce7;
    color: var(--success)
}

.btn.full {
    width: 100%
}

.table-wrap {
    overflow: auto
}

.table {
    width: 100%;
    border-collapse: collapse;
    background: white;
    border-radius: 16px;
    overflow: hidden
}

.table th {
    background: #f8fafc;
    color: #475467;
    text-align: left;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .04em
}

.table th,
.table td {
    padding: 13px 12px;
    border-bottom: 1px solid var(--line);
    font-size: 14px;
    vertical-align: middle
}

.table tr:hover td {
    background: #fafcff
}

.badge {
    padding: 5px 9px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 800;
    background: #eef2ff;
    color: #3444b5
}

.badge.paga,
.badge.ativo,
.badge.finalizada {
    background: #dcfce7;
    color: #15803d
}

.badge.vencida,
.badge.inadimplente {
    background: #fee2e2;
    color: #b91c1c
}

.badge.aberto,
.badge.em {
    background: #fef3c7;
    color: #a16207
}

.form {
    display: grid;
    gap: 14px
}

.form.grid2 {
    grid-template-columns: repeat(2, minmax(0, 1fr))
}

.form.grid3 {
    grid-template-columns: repeat(3, minmax(0, 1fr))
}

.form label {
    display: grid;
    gap: 6px;
    color: #344054;
    font-size: 13px;
    font-weight: 700
}

.form input,
.form select,
.form textarea {
    width: 100%;
    border: 1px solid var(--line);
    border-radius: 13px;
    padding: 11px 12px;
    font: inherit;
    background: #fff;
    color: var(--text)
}

.form textarea {
    min-height: 88px;
    resize: vertical
}

.stack {
    display: grid;
    gap: 14px
}

.filters {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 16px
}

.filters input,
.filters select {
    border: 1px solid var(--line);
    border-radius: 13px;
    padding: 10px 12px
}

.alert-list {
    display: grid;
    gap: 10px
}

.alert-item {
    padding: 12px;
    border-radius: 15px;
    border: 1px solid var(--line);
    background: #fbfcff;
    display: flex;
    justify-content: space-between;
    gap: 12px
}

.alert-item strong {
    display: block
}

.alert-item small {
    color: var(--muted)
}

.flash-wrap {
    display: grid;
    gap: 10px;
    margin-bottom: 16px
}

.flash {
    padding: 13px 15px;
    border-radius: 14px;
    font-weight: 700
}

.flash.success {
    background: #dcfce7;
    color: #166534
}

.flash.danger {
    background: #fee2e2;
    color: #991b1b
}

.flash.warning {
    background: #fef3c7;
    color: #92400e
}

.login-shell {
    min-height: 100vh;
    display: grid;
    place-items: center;
    background: radial-gradient(circle at 20% 20%, rgba(35, 117, 255, .22), transparent 32%), linear-gradient(135deg, #081D4A, #081D4A)
}

.login-card {
    width: min(440px, calc(100% - 30px));
    background: white;
    border-radius: 28px;
    padding: 34px;
    box-shadow: 0 30px 80px rgba(0, 0, 0, .3)
}

.login-card h1 {
    font-size: 30px;
    margin: 0 0 8px
}

.login-card p,
.muted {
    color: var(--muted)
}

.report-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px
}

.report-item {
    padding: 16px;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: #fff;
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: center
}

.receipt-frame {
    width: 100%;
    height: 80vh;
    border: 1px solid var(--line);
    border-radius: 16px
}

.item-row {
    display: grid;
    grid-template-columns: 1fr 2fr 100px 120px 44px;
    gap: 10px;
    align-items: end;
    margin-bottom: 10px
}

.kpi-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px
}

.mini-card {
    background: #f8fafc;
    border: 1px solid var(--line);
    border-radius: 16px;
    padding: 15px
}

@media(max-width:1100px) {
    .grid.cards {
        grid-template-columns: repeat(2, 1fr)
    }

    .grid.two,
    .grid.three {
        grid-template-columns: 1fr
    }

    .form.grid3 {
        grid-template-columns: 1fr 1fr
    }
}

@media(max-width:800px) {
    .sidebar {
        transform: translateX(-105%);
        transition: .2s
    }

    .menu-open .sidebar {
        transform: translateX(0)
    }

    .topbar {
        left: 0
    }

    .content {
        margin-left: 0;
        padding: 95px 15px 28px
    }

    .mobile-menu {
        display: block
    }

    .grid.cards,
    .form.grid2,
    .form.grid3,
    .report-grid {
        grid-template-columns: 1fr
    }

    .topbar {
        padding: 0 14px
    }

    .user-pill small {
        display: none
    }

    .item-row {
        grid-template-columns: 1fr
    }

    .card {
        padding: 16px
    }
}

.text-center {
    text-align: center
}

.green {
    color: #169b62 !important
}

.orange {
    color: #d97706 !important
}

.red {
    color: #dc2626 !important
}

.dark {
    color: #1f2937 !important
}

.clickable {
    text-decoration: none;
    color: inherit;
    transition: .15s
}

.clickable:hover {
    transform: translateY(-2px);
    box-shadow: 0 16px 34px rgba(15, 23, 42, .12)
}

.dashboard-filter {
    display: flex;
    gap: 12px;
    align-items: end;
    flex-wrap: wrap;
    margin-bottom: 18px
}

.dashboard-filter label {
    font-size: 12px;
    color: #64748b
}

.dashboard-filter input {
    display: block;
    margin-top: 6px
}

.badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 74px;
    min-height: 26px;
    padding: 4px 10px;
    white-space: nowrap;
    text-align: center;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700
}

.badge.vencida,
.badge.inadimplente {
    background: #fee2e2;
    color: #991b1b
}

.badge.emaberto,
.badge.parcial,
.badge.pendente {
    background: #fef3c7;
    color: #92400e
}

.badge.paga,
.badge.ativo,
.badge.entrada {
    background: #dcfce7;
    color: #166534
}

.badge.saida,
.badge.inativo {
    background: #ffedd5;
    color: #9a3412
}

.badge.cancelada {
    background: #e5e7eb;
    color: #374151
}

.alert-item {
    align-items: center;
    gap: 10px
}

.checkline {
    display: flex !important;
    align-items: center;
    gap: 10px;
    min-height: 44px
}

.checkline input {
    width: auto !important
}

.collapsible summary {
    cursor: pointer;
    font-weight: 800;
    font-size: 18px;
    list-style: none
}

.collapsible summary:before {
    content: '+';
    display: inline-flex;
    width: 24px;
    height: 24px;
    align-items: center;
    justify-content: center;
    margin-right: 8px;
    border-radius: 8px;
    background: #eef2ff;
    color: #1E49F2
}

.collapsible[open] summary:before {
    content: '–'
}

body.sidebar-collapsed .sidebar {
    width: 76px
}

body.sidebar-collapsed .sidebar .brand span,
body.sidebar-collapsed .sidebar .brand strong,
body.sidebar-collapsed .sidebar nav a {
    font-size: 0
}

body.sidebar-collapsed .sidebar nav a::first-letter {
    font-size: 20px
}

body.sidebar-collapsed .content,
body.sidebar-collapsed .topbar {
    margin-left: 76px
}

.user-menu {
    position: relative
}

.user-name {
    border: 0;
    background: #fff;
    border-radius: 999px;
    padding: 10px 14px;
    font-weight: 700;
    box-shadow: 0 6px 18px rgba(15, 23, 42, .08)
}

.user-dropdown {
    display: none;
    position: absolute;
    right: 0;
    top: 42px;
    background: #fff;
    box-shadow: 0 18px 38px rgba(15, 23, 42, .16);
    border-radius: 14px;
    min-width: 190px;
    z-index: 20;
    padding: 8px
}

.user-dropdown a {
    display: block;
    padding: 10px 12px;
    color: #0f172a;
    text-decoration: none;
    border-radius: 10px
}

.user-dropdown a:hover {
    background: #f1f5f9
}

.user-menu:hover .user-dropdown {
    display: block
}

.mini-edit {
    position: relative
}

.mini-edit summary {
    list-style: none
}

.mini-edit form {
    position: absolute;
    right: 0;
    top: 36px;
    background: #fff;
    z-index: 30;
    width: 300px;
    box-shadow: 0 22px 50px rgba(15, 23, 42, .2);
    padding: 14px;
    border-radius: 16px
}

.profile-row {
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    padding: 12px
}

.profile-row summary {
    cursor: pointer;
    display: flex;
    justify-content: space-between
}

.chart-compact {
    max-height: 280px !important
}

@media(max-width:900px) {

    body.sidebar-collapsed .content,
    body.sidebar-collapsed .topbar {
        margin-left: 0
    }

    .mini-edit form {
        position: static;
        width: auto
    }
}

/* V3 layout refinements */
.sidebar {
    transition: width .2s ease;
    padding-bottom: 82px
}

.sidebar nav a {
    display: flex;
    align-items: center;
    gap: 11px;
    position: relative
}

.nav-icon {
    width: 25px;
    text-align: center;
    font-size: 18px;
    flex: 0 0 25px
}

.nav-text {
    white-space: nowrap
}

.sidebar-toggle {
    position: fixed;
    left: 18px;
    bottom: 18px;
    width: 48px;
    height: 44px;
    background: rgba(255, 255, 255, .09);
    color: #dce7ff;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 14px
}

.expand-icon {
    display: none
}

.brand-text {
    min-width: 0
}

.brand-text strong {
    max-width: 190px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.topbar {
    transition: left .2s ease
}

.content {
    transition: margin-left .2s ease
}

body.sidebar-collapsed .sidebar {
    width: 78px;
    padding-left: 14px;
    padding-right: 14px;
    overflow: visible
}

body.sidebar-collapsed .brand {
    justify-content: center
}

body.sidebar-collapsed .brand-text {
    display: none
}

body.sidebar-collapsed .sidebar nav a {
    justify-content: center;
    padding: 12px 10px
}

body.sidebar-collapsed .nav-text {
    display: none
}

body.sidebar-collapsed .sidebar nav a:hover::after {
    content: attr(data-title);
    position: absolute;
    left: 64px;
    top: 50%;
    transform: translateY(-50%);
    background: #0f172a;
    color: #fff;
    padding: 8px 10px;
    border-radius: 10px;
    white-space: nowrap;
    font-size: 12px;
    box-shadow: 0 14px 30px rgba(15, 23, 42, .25);
    z-index: 1000
}

body.sidebar-collapsed .topbar {
    left: 78px;
    margin-left: 0
}

body.sidebar-collapsed .content {
    margin-left: 78px
}

body.sidebar-collapsed .collapse-icon {
    display: none
}

body.sidebar-collapsed .expand-icon {
    display: inline
}

.user-dropdown.is-open {
    display: block
}

.user-menu:hover .user-dropdown {
    display: block
}

.action-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px
}

.create-panel {
    margin-bottom: 18px
}

.create-panel>summary {
    list-style: none;
    display: inline-flex
}

.create-panel>summary::-webkit-details-marker {
    display: none
}

.modal-card {
    margin-top: 14px
}

.select-search {
    position: relative
}

.select-search-results {
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    background: #fff;
    border: 1px solid var(--line);
    box-shadow: 0 18px 38px rgba(15, 23, 42, .16);
    border-radius: 14px;
    margin-top: 6px;
    z-index: 50;
    max-height: 240px;
    overflow: auto
}

.select-search-results.open {
    display: block
}

.select-search-results button {
    display: block;
    width: 100%;
    text-align: left;
    background: #fff;
    color: #172033;
    border-radius: 0;
    padding: 10px 12px;
    font-weight: 600
}

.select-search-results button:hover {
    background: #f1f5f9
}

.chart-card canvas {
    max-height: 285px
}

.chart-card {
    min-height: 365px
}

.profile-summary-row {
    display: grid;
    grid-template-columns: 1.2fr 2fr 180px 120px 110px;
    gap: 10px;
    align-items: center
}

@media(max-width:900px) {

    body.sidebar-collapsed .content,
    body.sidebar-collapsed .topbar {
        margin-left: 0;
        left: 0
    }

    .profile-summary-row {
        grid-template-columns: 1fr
    }

    .create-panel>summary {
        width: 100%
    }
}

/* V4 - ajustes finos */
.dashboard-finance-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px
}

.dashboard-finance-grid .chart-wide {
    grid-column: 1/-1
}

.dashboard-finance-grid .chart-category {
    min-height: 365px
}

.dashboard-finance-grid .chart-category canvas {
    height: 270px !important;
    max-height: 270px !important
}

.dashboard-finance-grid .chart-wide canvas {
    height: 285px !important;
    max-height: 285px !important
}

.modal-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, .48);
    z-index: 100;
    align-items: flex-start;
    justify-content: center;
    padding: 7vh 18px 28px;
    overflow: auto
}

.modal-backdrop.open {
    display: flex
}

.modal-box {
    width: min(920px, 100%);
    box-shadow: 0 28px 80px rgba(0, 0, 0, .28)
}

.modal-wide {
    width: min(1180px, 100%)
}

.modal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 16px
}

.modal-head h2 {
    margin: 0
}

.btn.small {
    padding: 7px 10px;
    font-size: 12px
}

.form input[data-mask],
.form input[name="documento"],
.form input[name="cnpj"],
.form input[name="telefone"],
.form input[name="whatsapp"],
.form input[name="cep"] {
    letter-spacing: .01em
}

@media(max-width:900px) {
    .dashboard-finance-grid {
        grid-template-columns: 1fr
    }

    .dashboard-finance-grid .chart-category,
    .dashboard-finance-grid .chart-wide {
        grid-column: auto
    }

    .modal-backdrop {
        padding-top: 12px
    }

    .modal-head {
        align-items: flex-start
    }
}

/* V5 - dropdowns pesquisáveis, responsividade mobile refinada e modo escuro */
.top-actions {
    display: flex;
    align-items: center;
    gap: 10px
}

.theme-toggle {
    width: 42px;
    height: 42px;
    border-radius: 999px;
    background: #fff;
    border: 1px solid var(--line);
    box-shadow: 0 6px 18px rgba(15, 23, 42, .08);
    padding: 0;
    font-size: 18px
}

.theme-toggle .theme-sun {
    display: inline
}

.theme-toggle .theme-moon {
    display: none
}

.dark-mode .theme-toggle .theme-sun {
    display: none
}

.dark-mode .theme-toggle .theme-moon {
    display: inline
}

.native-select-hidden {
    position: absolute !important;
    left: -9999px !important;
    width: 1px !important;
    height: 1px !important;
    opacity: 0 !important;
    pointer-events: none !important
}

.search-select {
    position: relative;
    width: 100%
}

.search-select-button {
    width: 100%;
    min-height: 43px;
    border: 1px solid var(--line);
    border-radius: 13px;
    background: var(--panel);
    color: var(--text);
    font: inherit;
    font-weight: 600;
    text-align: left;
    justify-content: flex-start;
    padding: 11px 38px 11px 12px;
    position: relative
}

.search-select-button:after {
    content: '⌄';
    position: absolute;
    right: 12px;
    color: var(--muted);
    font-weight: 800
}

.search-select-button.placeholder {
    color: var(--muted)
}

.search-select-input {
    display: none !important;
    position: absolute;
    left: 8px;
    right: 8px;
    top: 8px;
    width: calc(100% - 16px) !important;
    z-index: 55;
    border: 1px solid var(--line);
    border-radius: 11px;
    padding: 10px 11px;
    font: inherit;
    background: var(--panel);
    color: var(--text)
}

.search-select-list {
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    top: calc(100% + 6px);
    max-height: 260px;
    overflow: auto;
    background: var(--panel);
    border: 1px solid var(--line);
    box-shadow: 0 18px 38px rgba(15, 23, 42, .16);
    border-radius: 15px;
    z-index: 54;
    padding: 58px 6px 6px
}

.search-select.open .search-select-input,
.search-select.open .search-select-list {
    display: block !important
}

.search-select-option {
    width: 100%;
    border-radius: 10px;
    background: transparent;
    color: var(--text);
    justify-content: flex-start;
    text-align: left;
    font-weight: 600;
    padding: 10px 11px
}

.search-select-option:hover,
.search-select-option.selected {
    background: #eef3ff;
    color: var(--primary)
}

.search-select-empty {
    padding: 12px;
    color: var(--muted);
    font-size: 13px
}

.form label .search-select {
    margin-top: 0
}

.filters .search-select {
    min-width: 190px
}

.mobile-backdrop {
    display: none
}

.chart-card canvas {
    width: 100% !important
}

.table-wrap {
    max-width: 100%
}

.modal-box {
    max-height: 88vh;
    overflow: auto
}

.btn {
    white-space: nowrap
}

.dashboard-filter input,
.filters input,
.filters select {
    background: var(--panel);
    color: var(--text)
}

.dark-mode {
    --bg: #081D4A;
    --panel: #081D4A;
    --text: #e5edf8;
    --muted: #94a3b8;
    --line: #263244;
    --primary: #2375FF;
    --primary2: #2375FF;
    --success: #4ade80;
    --danger: #f87171;
    --warning: #f59e0b;
    --shadow: 0 18px 48px rgba(0, 0, 0, .30)
}

.dark-mode body,
body:has(.dark-mode) {
    background: var(--bg);
    color: var(--text)
}

.dark-mode .topbar {
    background: rgba(15, 23, 42, .88);
    border-color: var(--line)
}

.dark-mode .sidebar {
    background: #050b18
}

.dark-mode .card,
.dark-mode .login-card,
.dark-mode .modal-box,
.dark-mode .mini-card,
.dark-mode .report-item {
    background: var(--panel);
    border-color: var(--line);
    color: var(--text)
}

.dark-mode .table {
    background: var(--panel)
}

.dark-mode .table th {
    background: #0f172a;
    color: #cbd5e1
}

.dark-mode .table td {
    border-color: var(--line)
}

.dark-mode .table tr:hover td {
    background: #182235
}

.dark-mode .form label {
    color: #cbd5e1
}

.dark-mode .form input,
.dark-mode .form select,
.dark-mode .form textarea,
.dark-mode .filters input,
.dark-mode .filters select,
.dark-mode .dashboard-filter input {
    background: #0f172a;
    border-color: #334155;
    color: #e5edf8
}

.dark-mode .form input::placeholder,
.dark-mode .form textarea::placeholder {
    color: #94a3b8
}

.dark-mode .btn.ghost {
    background: #172554;
    color: #bfdbfe
}

.dark-mode .btn.danger {
    background: #451a1a;
    color: #fecaca
}

.dark-mode .btn.success {
    background: #052e16;
    color: #bbf7d0
}

.dark-mode .user-name,
.dark-mode .theme-toggle,
.dark-mode .user-dropdown {
    background: #0f172a;
    color: #e5edf8;
    border: 1px solid #334155
}

.dark-mode .user-dropdown a {
    color: #e5edf8
}

.dark-mode .user-dropdown a:hover {
    background: #1e293b
}

.dark-mode .alert-item {
    background: #0f172a;
    border-color: #334155
}

.dark-mode .flash.success {
    background: #052e16;
    color: #bbf7d0
}

.dark-mode .flash.danger {
    background: #451a1a;
    color: #fecaca
}

.dark-mode .flash.warning {
    background: #422006;
    color: #fde68a
}

.dark-mode .login-shell {
    background: radial-gradient(circle at 20% 20%, rgba(96, 165, 250, .18), transparent 32%), linear-gradient(135deg, #020617, #0f172a)
}

.dark-mode .search-select-button,
.dark-mode .search-select-input,
.dark-mode .search-select-list,
.dark-mode .select-search-results {
    background: #0f172a;
    color: #e5edf8;
    border-color: #334155
}

.dark-mode .search-select-option:hover,
.dark-mode .search-select-option.selected,
.dark-mode .select-search-results button:hover {
    background: #172554;
    color: #bfdbfe
}

.dark-mode .select-search-results button {
    background: #0f172a;
    color: #e5edf8
}

.dark-mode .metric:after {
    background: linear-gradient(135deg, rgba(96, 165, 250, .14), rgba(14, 165, 233, .06))
}

.dark-mode .dark {
    color: #e5edf8 !important
}

.dark-mode .green {
    color: #4ade80 !important
}

.dark-mode .red {
    color: #f87171 !important
}

.dark-mode .orange {
    color: #f59e0b !important
}

.dark-mode .badge.cancelada {
    background: #334155;
    color: #e2e8f0
}

.dark-mode .profile-row {
    border-color: #334155
}

.dark-mode .modal-backdrop {
    background: rgba(2, 6, 23, .70)
}

@media(max-width:800px) {
    body {
        overflow-x: hidden
    }

    .sidebar {
        width: min(86vw, 320px);
        transform: translateX(-105%);
        transition: transform .22s ease;
        width: min(86vw, 320px) !important;
        overflow: auto
    }

    .menu-open .sidebar {
        transform: translateX(0)
    }

    .mobile-backdrop {
        display: none;
        position: fixed;
        inset: 0;
        background: rgba(15, 23, 42, .45);
        z-index: 25
    }

    .menu-open .mobile-backdrop {
        display: block
    }

    .topbar {
        left: 0 !important;
        margin-left: 0 !important;
        height: auto;
        min-height: 70px;
        padding: 10px 12px;
        gap: 10px
    }

    .topbar>div:not(.top-actions) {
        min-width: 0;
        flex: 1
    }

    .topbar strong {
        font-size: 16px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis
    }

    .content {
        margin-left: 0 !important;
        padding: 88px 12px 24px
    }

    .grid.cards {
        grid-template-columns: 1fr
    }

    .grid.two,
    .grid.three,
    .dashboard-finance-grid,
    .kpi-row,
    .form.grid2,
    .form.grid3,
    .report-grid {
        grid-template-columns: 1fr !important
    }

    .section-head,
    .action-head {
        align-items: flex-start;
        flex-direction: column
    }

    .actions,
    .filters,
    .dashboard-filter {
        width: 100%;
        align-items: stretch
    }

    .actions .btn,
    .filters .btn,
    .dashboard-filter .btn,
    .filters input,
    .filters select,
    .dashboard-filter input,
    .dashboard-filter label {
        width: 100%
    }

    .filters .search-select {
        width: 100%;
        min-width: 0
    }

    .metric strong {
        font-size: 24px
    }

    .card {
        padding: 15px;
        border-radius: 17px
    }

    .table-wrap {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        border-radius: 16px
    }

    .table {
        min-width: 720px
    }

    .modal-backdrop {
        align-items: flex-start;
        padding: 10px
    }

    .modal-box {
        width: 100%;
        max-height: calc(100vh - 20px);
        overflow: auto;
        border-radius: 18px
    }

    .modal-head {
        position: sticky;
        top: 0;
        background: var(--panel);
        z-index: 3;
        padding-bottom: 10px
    }

    .item-row {
        grid-template-columns: 1fr !important
    }

    .search-select-list {
        max-height: 45vh
    }

    .user-dropdown {
        right: 0
    }

    .login-card {
        padding: 24px;
        border-radius: 22px
    }

    .login-card h1 {
        font-size: 24px
    }

    .brand.big {
        align-items: flex-start
    }

    .brand.big .brand-mark {
        flex: 0 0 44px
    }

    .chart-card {
        min-height: 330px
    }

    .dashboard-finance-grid .chart-category canvas,
    .dashboard-finance-grid .chart-wide canvas {
        height: 235px !important;
        max-height: 235px !important
    }

    body.sidebar-collapsed .sidebar {
        width: min(86vw, 320px) !important
    }

    .sidebar-toggle {
        position: static;
        width: 100%;
        margin-top: 16px
    }

    .sidebar nav a {
        font-size: 14px !important;
        justify-content: flex-start !important
    }

    .nav-text,
    .brand-text {
        display: block !important
    }

    .sidebar .brand {
        justify-content: flex-start !important
    }

    .collapse-icon {
        display: inline !important
    }

    .expand-icon {
        display: none !important
    }
}

    .sidebar-toggle {
  display: none !important;
}

.login-logo-area {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 24px;
}

.login-logo {
  width: 330px;
  max-width: 100%;
  height: auto;
  display: block;
  object-fit: contain;
}

.logo-preview-box {
  max-width: 260px;
  width: 260px;
  min-height: auto;
  padding: 12px;
}

.logo-preview-box img {
  width: 100%;
  max-width: 240px;
  max-height: 120px;
  object-fit: contain;
  display: block;
}

.brand-logo-img {
  width: 42px !important;
  height: 42px !important;
  max-width: 42px !important;
  max-height: 42px !important;
  object-fit: contain;
  border-radius: 10px;
  padding: 3px;
}

/* Mantém a tela de login sempre em modo claro */
body.login-light-only {
  background: linear-gradient(135deg, #081D4A 0%, #1E49F2 45%, #081D4A 100%) !important;
  color: #0f172a !important;
}

body.login-light-only .login-card {
  background: #ffffff !important;
  color: #0f172a !important;
  border-color: rgba(15, 23, 42, 0.08) !important;
}

body.login-light-only .login-card h1,
body.login-light-only .login-card label,
body.login-light-only .login-card strong {
  color: #0f172a !important;
}

body.login-light-only .login-card span,
body.login-light-only .login-card .muted {
  color: #64748b !important;
}

body.login-light-only input {
  background: #ffffff !important;
  color: #0f172a !important;
  border-color: #dbe3ef !important;
}

body.login-light-only input:focus {
  border-color: #2375FF !important;
  box-shadow: 0 0 0 3px rgba(35, 117, 255, 0.12) !important;
}

/* Força a tela de login a ignorar o modo escuro */
html body.login-light-only,
html[data-theme="dark"] body.login-light-only,
body.dark.login-light-only,
body.dark-mode.login-light-only,
body.theme-dark.login-light-only {
  background: linear-gradient(135deg, #081D4A 0%, #1E49F2 45%, #081D4A 100%) !important;
  color: #0f172a !important;
}

html body.login-light-only .login-shell,
html[data-theme="dark"] body.login-light-only .login-shell,
body.dark.login-light-only .login-shell,
body.dark-mode.login-light-only .login-shell,
body.theme-dark.login-light-only .login-shell {
  background: transparent !important;
}

html body.login-light-only .login-card,
html[data-theme="dark"] body.login-light-only .login-card,
body.dark.login-light-only .login-card,
body.dark-mode.login-light-only .login-card,
body.theme-dark.login-light-only .login-card {
  background: #ffffff !important;
  color: #0f172a !important;
  border-color: rgba(15, 23, 42, 0.08) !important;
  box-shadow: 0 28px 80px rgba(0, 0, 0, 0.28) !important;
}

html body.login-light-only .login-card h1,
html body.login-light-only .login-card label,
html body.login-light-only .login-card strong,
html[data-theme="dark"] body.login-light-only .login-card h1,
html[data-theme="dark"] body.login-light-only .login-card label,
html[data-theme="dark"] body.login-light-only .login-card strong {
  color: #0f172a !important;
}

html body.login-light-only .login-card span,
html body.login-light-only .login-card .muted,
html[data-theme="dark"] body.login-light-only .login-card span,
html[data-theme="dark"] body.login-light-only .login-card .muted {
  color: #64748b !important;
}

html body.login-light-only .login-card input,
html[data-theme="dark"] body.login-light-only .login-card input,
body.dark.login-light-only .login-card input,
body.dark-mode.login-light-only .login-card input,
body.theme-dark.login-light-only .login-card input {
  background: #ffffff !important;
  color: #0f172a !important;
  border-color: #dbe3ef !important;
}

html body.login-light-only .login-card input:focus,
html[data-theme="dark"] body.login-light-only .login-card input:focus {
  border-color: #2375FF !important;
  box-shadow: 0 0 0 3px rgba(35, 117, 255, 0.12) !important;
}

html body.login-light-only .login-card .btn.primary,
html[data-theme="dark"] body.login-light-only .login-card .btn.primary {
  background: #2375FF !important;
  color: #ffffff !important;
}

/* =========================================================
   RESPONSIVIDADE MOBILE - VELOJA
   Ajustado para o base.html atual
   ========================================================= */

* {
  box-sizing: border-box;
}

html,
body {
  max-width: 100%;
  overflow-x: hidden;
}

/* O botão mobile já existe no base.html como .mobile-menu */
.mobile-menu {
  display: none;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border: 1px solid rgba(148, 163, 184, 0.35);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.08);
  color: inherit;
  font-size: 22px;
  cursor: pointer;
}

/* Backdrop escuro quando o menu abre no mobile */
.mobile-backdrop {
  display: none;
}

@media (max-width: 900px) {
  body {
    overflow-x: hidden;
  }

  .mobile-menu {
    display: inline-flex !important;
    flex-shrink: 0;
  }

  /* Sidebar vira menu lateral sobreposto */
  .sidebar {
    position: fixed !important;
    top: 0;
    left: -285px;
    width: 270px !important;
    max-width: 82vw;
    height: 100vh;
    z-index: 9999;
    transition: left 0.25s ease;
    overflow-y: auto;
    box-shadow: 20px 0 50px rgba(0, 0, 0, 0.35);
  }

  body.menu-open .sidebar {
    left: 0 !important;
  }

  body.sidebar-collapsed .sidebar {
    left: -285px !important;
  }

  body.menu-open .mobile-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 9998;
    background: rgba(2, 6, 23, 0.55);
    backdrop-filter: blur(2px);
  }

  /* No mobile, o botão interno de recolher menu não precisa aparecer */
  .sidebar-toggle {
    display: none !important;
  }

  /* Topbar ocupa toda a tela */
  .topbar {
    left: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 10px 14px !important;
    gap: 10px;
  }

  .topbar > div:first-of-type {
    min-width: 0;
    flex: 1;
  }

  .topbar strong {
    display: block;
    font-size: 16px !important;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .topbar small {
    display: block;
    font-size: 11px !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .top-actions {
    gap: 6px !important;
    flex-shrink: 0;
  }

  .theme-toggle {
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
  }

  .user-name {
    max-width: 110px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* Conteúdo principal */
  .content {
    margin-left: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 86px 14px 24px !important;
  }

  body.sidebar-collapsed .content {
    margin-left: 0 !important;
  }

  body.sidebar-collapsed .topbar {
    left: 0 !important;
  }

  /* Títulos */
  .content h1,
  .page-title,
  .section-title {
    font-size: 24px !important;
    line-height: 1.2;
  }

  /* Cards e indicadores em coluna */
  .kpi-grid,
  .cards-grid,
  .dashboard-cards,
  .stats-grid,
  .grid4,
  .grid-4 {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }

  .card,
  .kpi-card,
  .stat-card {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  /* Gráficos em uma coluna */
  .chart-grid,
  .dashboard-grid,
  .dashboard-finance-grid,
  .grid2,
  .grid-2,
  .charts-row {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  .chart-card,
  .chart-wide,
  .chart-category {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow: hidden !important;
  }

  canvas,
  .chart-card canvas {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Formulários em uma coluna */
  .form.grid,
  .form.grid2,
  .form.grid3,
  .form-grid,
  .grid-form {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }

  form label,
  .form label,
  input,
  select,
  textarea {
    width: 100% !important;
    max-width: 100% !important;
  }

  textarea {
    min-height: 100px;
  }

  /* Botões */
  .btn,
  button {
    min-height: 42px;
  }

  .form-actions,
  .actions,
  .table-actions {
    display: flex !important;
    flex-wrap: wrap;
    gap: 8px;
  }

  .form-actions .btn,
  .form-actions button {
    width: 100%;
  }

  /* Tabelas com rolagem horizontal */
  .table-wrapper,
  .table-responsive,
  .data-table-wrapper,
  .card:has(table) {
    width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  table {
    min-width: 720px;
  }

  th,
  td {
    white-space: nowrap;
  }

  /* Modais */
  .modal,
  .modal-content,
  .modal-card,
  .dialog,
  .dialog-card {
    width: calc(100vw - 24px) !important;
    max-width: calc(100vw - 24px) !important;
    max-height: calc(100vh - 24px) !important;
    overflow-y: auto !important;
  }

  /* Login mobile */
  .auth-content {
    width: 100% !important;
    max-width: 100% !important;
  }

  .login-shell {
    min-height: 100vh;
    padding: 24px 14px !important;
  }

  .login-card {
    width: 100% !important;
    max-width: 420px !important;
    padding: 28px 22px !important;
    border-radius: 24px !important;
  }

  .login-logo {
    width: 230px !important;
    max-width: 100% !important;
    height: auto !important;
  }

  .login-card h1 {
    font-size: 26px !important;
  }
}

@media (max-width: 480px) {
  .content {
    padding: 78px 12px 20px !important;
  }

  .topbar {
    padding: 9px 10px !important;
  }

  .topbar small {
    display: none !important;
  }

  .user-name {
    max-width: 82px;
  }

  .card,
  .chart-card,
  .kpi-card,
  .stat-card {
    border-radius: 18px !important;
    padding: 16px !important;
  }

  table {
    min-width: 660px;
  }

  .login-card {
    padding: 24px 18px !important;
  }

  .login-logo {
    width: 205px !important;
  }
}

/* Item ativo no menu lateral */
.sidebar nav a.active {
  background: linear-gradient(135deg, rgba(37, 99, 235, 0.28), rgba(59, 130, 246, 0.16));
  color: #ffffff !important;
  border-left: 4px solid #2375FF;
  box-shadow: inset 0 0 0 1px rgba(96, 165, 250, 0.18);
}

.sidebar nav a.active .nav-icon,
.sidebar nav a.active .nav-text {
  color: #ffffff !important;
}

.sidebar nav a.active .nav-icon {
  filter: brightness(1.15);
}

/* Quando o menu estiver recolhido, mantém o destaque bonito */
body.sidebar-collapsed .sidebar nav a.active {
  border-left: none;
  border-radius: 14px;
  background: rgba(37, 99, 235, 0.32);
}
/* E-mails automáticos */
.email-config-block {
  border-top: 1px solid rgba(148, 163, 184, .22);
  margin-top: 10px;
  padding-top: 18px;
}
.email-config-block h2,
.email-config-block h3 {
  margin: 0 0 6px;
}
.check-line {
  display: flex !important;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 10px 12px;
  border: 1px solid rgba(148, 163, 184, .22);
  border-radius: 14px;
  background: rgba(148, 163, 184, .06);
}
.check-line input[type="checkbox"] {
  width: 18px !important;
  height: 18px;
  flex: 0 0 auto;
}
.email-test-form {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid rgba(148, 163, 184, .22);
}
.badge.enviado { background: rgba(16,185,129,.14); color: #059669; }
.badge.falhou { background: rgba(239,68,68,.14); color: #dc2626; }
.badge.pendente { background: rgba(245,158,11,.16); color: #d97706; }
.dark-mode .check-line,
.dark-mode .email-test-form,
.dark-mode .email-config-block { border-color: rgba(148, 163, 184, .18); }

/* =========================
   LOGS / AUDITORIA
========================= */

.audit-log-table tbody tr.audit-row {
  cursor: pointer;
  transition: background 0.18s ease;
}

.audit-log-table tbody tr.audit-row:hover {
  background: rgba(37, 99, 235, 0.08);
}

/* Backdrop do modal */
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.45);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
  z-index: 9999;
}

.modal-backdrop.open {
  display: flex;
}

/* Caixa do modal */
.audit-modal-card,
.modal-box.audit-modal-card {
  width: min(1000px, 96vw);
  max-height: 90vh;
  overflow-y: auto;
  border-radius: 18px;
  padding: 22px;
  box-shadow: 0 24px 60px rgba(15, 23, 42, 0.22);
  border: 1px solid rgba(148, 163, 184, 0.18);
  background: #ffffff;
  color: #0f172a;
}

/* Cabeçalho do modal */
.audit-modal-card .modal-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
}

.audit-modal-card .modal-head h2 {
  margin: 0;
  font-size: 28px;
  line-height: 1.15;
  color: #0f172a;
}

.audit-modal-card .modal-head .muted {
  margin-top: 6px;
  color: #64748b;
}

/* Botão fechar */
.audit-modal-card .modal-close {
  border: none;
  background: #f1f5f9;
  color: #0f172a;
  width: 38px;
  height: 38px;
  border-radius: 12px;
  font-size: 24px;
  font-weight: 700;
  cursor: pointer;
  flex-shrink: 0;
}

.audit-modal-card .modal-close:hover {
  background: #e2e8f0;
}

/* Grid de informações */
.audit-detail-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin: 18px 0;
}

.audit-detail-grid > div,
.audit-block,
.audit-compare > div {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  padding: 14px;
}

.audit-detail-grid strong,
.audit-block strong,
.audit-compare strong {
  display: block;
  margin-bottom: 8px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #64748b;
}

.audit-detail-grid span,
.audit-block p,
.audit-compare pre {
  color: #0f172a;
}

/* Descrição */
.audit-block {
  margin-top: 10px;
}

.audit-block p {
  margin: 0;
  white-space: pre-wrap;
  word-break: break-word;
  line-height: 1.5;
}

/* Dado antigo x dado novo */
.audit-compare {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-top: 16px;
}

.audit-compare pre {
  margin: 0;
  font-size: 13px;
  line-height: 1.45;
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 320px;
  overflow-y: auto;
}

/* Tema escuro */
html.dark-mode .modal-backdrop {
  background: rgba(2, 6, 23, 0.72);
}

html.dark-mode .audit-modal-card,
html.dark-mode .modal-box.audit-modal-card {
  background: #0f172a;
  color: #e5e7eb;
  border: 1px solid rgba(148, 163, 184, 0.18);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.38);
}

html.dark-mode .audit-modal-card .modal-head h2 {
  color: #f8fafc;
}

html.dark-mode .audit-modal-card .modal-head .muted {
  color: #94a3b8;
}

html.dark-mode .audit-modal-card .modal-close {
  background: rgba(148, 163, 184, 0.14);
  color: #f8fafc;
}

html.dark-mode .audit-modal-card .modal-close:hover {
  background: rgba(148, 163, 184, 0.22);
}

html.dark-mode .audit-detail-grid > div,
html.dark-mode .audit-block,
html.dark-mode .audit-compare > div {
  background: rgba(15, 23, 42, 0.92);
  border: 1px solid rgba(148, 163, 184, 0.18);
}

html.dark-mode .audit-detail-grid strong,
html.dark-mode .audit-block strong,
html.dark-mode .audit-compare strong {
  color: #94a3b8;
}

html.dark-mode .audit-detail-grid span,
html.dark-mode .audit-block p,
html.dark-mode .audit-compare pre {
  color: #f8fafc;
}

/* Responsivo */
@media (max-width: 900px) {
  .audit-detail-grid,
  .audit-compare {
    grid-template-columns: 1fr;
  }

  .audit-modal-card,
  .modal-box.audit-modal-card {
    width: 100%;
    max-height: 92vh;
    padding: 16px;
    border-radius: 16px;
  }

  .audit-modal-card .modal-head h2 {
    font-size: 22px;
  }
}


/* Modal de edição de produtos */
.product-edit-modal {
  width: min(1050px, 96vw);
  max-height: 92vh;
  overflow-y: auto;
}

.product-edit-modal .modal-head h2 {
  margin: 0;
}

.stock-panel {
  border: 1px solid rgba(37, 99, 235, 0.18);
  border-radius: 16px;
  padding: 14px;
  background: rgba(37, 99, 235, 0.06);
  display: grid;
  gap: 10px;
}

.stock-panel input[readonly] {
  background: rgba(148, 163, 184, 0.14);
  cursor: not-allowed;
}

html.dark-mode .stock-panel {
  border-color: rgba(96, 165, 250, 0.22);
  background: rgba(37, 99, 235, 0.10);
}

@media (max-width: 800px) {
  .product-edit-modal {
    width: 100%;
    max-height: 94vh;
  }
}

/* =========================================================
   Correção do modal de edição de produtos - tema claro/escuro
   ========================================================= */

.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.55) !important;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
  z-index: 9999;
}

.modal-backdrop.open {
  display: flex !important;
}

.product-edit-modal,
.modal-box.product-edit-modal,
.modal-wide.product-edit-modal {
  width: min(1050px, 96vw) !important;
  max-height: 92vh !important;
  overflow-y: auto !important;
  background: #ffffff !important;
  color: #0f172a !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 22px !important;
  padding: 28px !important;
  box-shadow: 0 30px 90px rgba(15, 23, 42, 0.35) !important;
  opacity: 1 !important;
}

.product-edit-modal .modal-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 20px;
}

.product-edit-modal .modal-head h2 {
  margin: 0;
  color: #0f172a !important;
}

.product-edit-modal .modal-head .muted {
  color: #64748b !important;
}

.product-edit-modal label {
  color: #334155 !important;
}

.product-edit-modal input,
.product-edit-modal select,
.product-edit-modal textarea {
  background: #ffffff !important;
  color: #0f172a !important;
  border: 1px solid #cbd5e1 !important;
  border-radius: 14px !important;
  min-height: 44px !important;
  width: 100% !important;
  max-width: 100% !important;
}

.product-edit-modal textarea {
  min-height: 90px !important;
}

/* Corrige o bloco de estoque para ocupar apenas uma célula da grid */
.product-edit-modal .stock-panel {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  border: 1px solid rgba(37, 99, 235, 0.20) !important;
  border-radius: 16px !important;
  padding: 14px !important;
  background: rgba(37, 99, 235, 0.06) !important;
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 10px !important;
}

.product-edit-modal .stock-panel label {
  width: 100% !important;
  max-width: 100% !important;
}

.product-edit-modal .stock-panel input {
  width: 100% !important;
  max-width: 100% !important;
}

.product-edit-modal .stock-panel input[readonly] {
  background: #f1f5f9 !important;
  color: #475569 !important;
  cursor: not-allowed;
}

/* Garante que estoque mínimo não herde tamanho errado */
.product-edit-modal input[name="estoque_minimo"] {
  width: 100% !important;
  max-width: 100% !important;
  min-height: 44px !important;
}

/* Botão de fechar */
.product-edit-modal .modal-close {
  border: none !important;
  background: #f1f5f9 !important;
  color: #0f172a !important;
  width: 40px !important;
  height: 40px !important;
  border-radius: 12px !important;
  font-size: 24px !important;
  font-weight: 700 !important;
  cursor: pointer;
  flex-shrink: 0;
}

.product-edit-modal .modal-close:hover {
  background: #e2e8f0 !important;
}

/* Tema escuro */
html.dark-mode .modal-backdrop {
  background: rgba(2, 6, 23, 0.72) !important;
}

html.dark-mode .product-edit-modal,
html.dark-mode .modal-box.product-edit-modal,
html.dark-mode .modal-wide.product-edit-modal {
  background: #0f172a !important;
  color: #f8fafc !important;
  border-color: rgba(148, 163, 184, 0.18) !important;
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.45) !important;
}

html.dark-mode .product-edit-modal .modal-head h2 {
  color: #f8fafc !important;
}

html.dark-mode .product-edit-modal .modal-head .muted,
html.dark-mode .product-edit-modal label {
  color: #cbd5e1 !important;
}

html.dark-mode .product-edit-modal input,
html.dark-mode .product-edit-modal select,
html.dark-mode .product-edit-modal textarea {
  background: #081D4A !important;
  color: #f8fafc !important;
  border-color: rgba(148, 163, 184, 0.28) !important;
}

html.dark-mode .product-edit-modal .stock-panel {
  background: rgba(37, 99, 235, 0.10) !important;
  border-color: rgba(96, 165, 250, 0.24) !important;
}

html.dark-mode .product-edit-modal .stock-panel input[readonly] {
  background: rgba(148, 163, 184, 0.12) !important;
  color: #cbd5e1 !important;
}

html.dark-mode .product-edit-modal .modal-close {
  background: rgba(148, 163, 184, 0.14) !important;
  color: #f8fafc !important;
}

html.dark-mode .product-edit-modal .modal-close:hover {
  background: rgba(148, 163, 184, 0.22) !important;
}

/* Mobile */
@media (max-width: 900px) {
  .product-edit-modal,
  .modal-box.product-edit-modal,
  .modal-wide.product-edit-modal {
    width: 96vw !important;
    max-height: 92vh !important;
    padding: 20px !important;
  }

  .product-edit-modal form.grid3 {
    grid-template-columns: 1fr !important;
  }
}

/* Correção específica do campo Estoque mínimo no modal de produto */
.product-edit-modal form.grid3 {
  align-items: start !important;
}

.product-edit-modal .stock-min-field {
  align-self: start !important;
  height: auto !important;
  min-height: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
}

.product-edit-modal .stock-min-field input {
  height: 44px !important;
  min-height: 44px !important;
  max-height: 44px !important;
  padding: 0 14px !important;
  display: block !important;
  line-height: 44px !important;
}

/* Evita que labels simples estiquem junto com blocos altos no grid */
.product-edit-modal form.grid3 > label {
  align-self: start !important;
}
/* =========================================================
   Área do Cliente / Calendário / Pedidos / H4LVION
   ========================================================= */
.h4-footer,
.login-h4-footer {
  width: 100%; display: flex; align-items: center; justify-content: flex-end; gap: 8px;
  padding: 22px 4px 8px; color: #64748b; font-size: 12px;
}
.h4-footer img,
.login-h4-footer img { width: 22px; height: 22px; object-fit: contain; filter: drop-shadow(0 4px 10px rgba(15,23,42,.18)); }
.h4-footer strong,
.login-h4-footer strong { color: #2375FF; letter-spacing: .4px; }
.login-h4-footer { justify-content: center; color: rgba(226,232,240,.78); }
.login-h4-footer strong { color: #fff; }

.access-choice-card { width: min(860px, calc(100vw - 28px)); background: #fff; border-radius: 28px; padding: 34px; box-shadow: 0 25px 80px rgba(0,0,0,.28); text-align: center; }
.choice-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin-top: 22px; }
.choice-card { border: 1px solid #e2e8f0; border-radius: 20px; padding: 22px; text-align: left; background: #f8fafc; display: grid; gap: 12px; }
.choice-card h2 { margin: 0; }

.portal-body { background: #f4f7fb; min-height: 100vh; }
.portal-topbar { position: sticky; top: 0; z-index: 20; background: rgba(255,255,255,.92); backdrop-filter: blur(12px); border-bottom: 1px solid #e5e7eb; padding: 14px 24px; display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.portal-brand { display: flex; align-items: center; gap: 10px; min-width: 220px; }
.portal-brand img { width: 42px; height: 42px; object-fit: contain; }
.portal-brand strong { display:block; font-size: 16px; color:#0f172a; }
.portal-brand span { display:block; font-size:12px; color:#64748b; }
.portal-nav { display:flex; flex-wrap:wrap; gap:8px; justify-content:flex-end; }
.portal-nav a { padding: 9px 12px; border-radius: 999px; background: #eef4ff; color: #1e3a8a; font-weight: 700; font-size: 13px; }
.portal-nav a:hover { background:#dbeafe; }
.portal-content { width: min(1180px, 100%); margin: 0 auto; padding: 28px 18px 34px; }
.portal-hero { border-radius: 28px; padding: 28px; background: linear-gradient(135deg,#1E49F2,#2375FF); color:white; display:flex; justify-content:space-between; gap:18px; align-items:center; margin-bottom:18px; box-shadow: 0 20px 50px rgba(35,117,255,.25); }
.portal-hero h1 { margin:0 0 6px; font-size:32px; }
.portal-hero p { margin:0; color: rgba(255,255,255,.82); }
.portal-grid-2 { display:grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap:16px; margin-top:16px; }
.portal-cards { display:grid; grid-template-columns: repeat(auto-fit,minmax(260px,1fr)); gap:16px; }
.portal-list-item { padding:12px 0; border-bottom:1px solid #e5e7eb; display:grid; gap:4px; }
.portal-list-item:last-child { border-bottom:0; }
.portal-list-item span { color:#64748b; font-size:13px; }
.calendar-list { display:grid; gap:14px; }
.calendar-card { display:grid; grid-template-columns:90px 1fr; gap:14px; border-left:6px solid #2375FF; background:#fff; border-radius:20px; padding:16px; box-shadow: var(--shadow); }
.calendar-card > div { display:grid; place-content:center; text-align:center; background:#f1f5f9; border-radius:16px; color:#0f172a; }
.calendar-card > div strong { font-size:22px; }
.calendar-card h2 { margin:0 0 6px; }
.calendar-card p { margin:0 0 8px; color:#475569; }
.calendar-admin-grid { display:grid; grid-template-columns: repeat(auto-fit,minmax(310px,1fr)); gap:16px; }
.calendar-admin-card { border-left:5px solid #2375FF; }
.order-item-row { display:grid; grid-template-columns: 1fr 160px; gap:12px; align-items:end; }
html.dark-mode .portal-body { background:#081D4A; color:#e5e7eb; }
html.dark-mode .portal-topbar { background: rgba(15,23,42,.92); border-color: rgba(148,163,184,.16); }
html.dark-mode .portal-brand strong { color:#fff; }
html.dark-mode .portal-brand span, html.dark-mode .portal-list-item span { color:#94a3b8; }
html.dark-mode .portal-nav a { background: rgba(37,99,235,.18); color:#bfdbfe; }
html.dark-mode .calendar-card { background:#0f172a; }
html.dark-mode .calendar-card > div { background:#081D4A; color:#f8fafc; }
html.dark-mode .calendar-card p { color:#cbd5e1; }
html.dark-mode .h4-footer { color:#94a3b8; }
@media (max-width: 820px) {
  .choice-grid, .portal-grid-2, .order-item-row { grid-template-columns:1fr; }
  .portal-topbar { align-items:flex-start; flex-direction:column; }
  .portal-nav { justify-content:flex-start; }
  .portal-hero { flex-direction:column; align-items:flex-start; }
  .portal-hero h1 { font-size:26px; }
  .calendar-card { grid-template-columns:1fr; }
  .h4-footer { justify-content:center; }
}


/* =========================================================
   Ajustes V8.1 - login, calendário, fornecedor e senha portal
   ========================================================= */
.login-shell {
  min-height: 100vh !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 28px !important;
  padding: 32px 16px !important;
}
.login-card {
  margin: 0 !important;
}
.login-h4-footer {
  position: static !important;
  transform: none !important;
  margin-top: 0 !important;
  opacity: .95;
}
.login-h4-footer img {
  width: 22px !important;
  height: 22px !important;
  object-fit: contain !important;
  filter: none !important;
}
.portal-access-check {
  min-height: 44px;
  align-items: center;
  align-self: start;
  margin-top: 23px;
}
.calendar-event-modal,
.supplier-edit-modal {
  width: min(1120px, 96vw) !important;
  max-height: 92vh !important;
  overflow-y: auto !important;
  background: #fff !important;
  color: #0f172a !important;
  border-radius: 22px !important;
  border: 1px solid #e2e8f0 !important;
  box-shadow: 0 30px 90px rgba(15,23,42,.35) !important;
  padding: 24px !important;
}
.calendar-event-modal .modal-head,
.supplier-edit-modal .modal-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 18px;
}
.calendar-event-modal .modal-close,
.supplier-edit-modal .modal-close {
  border: none !important;
  background: #f1f5f9 !important;
  color: #0f172a !important;
  width: 40px !important;
  height: 40px !important;
  border-radius: 12px !important;
  font-size: 24px !important;
  font-weight: 700 !important;
  cursor: pointer;
  flex-shrink: 0;
}
.calendar-event-modal input,
.calendar-event-modal select,
.calendar-event-modal textarea,
.supplier-edit-modal input,
.supplier-edit-modal select,
.supplier-edit-modal textarea {
  background: #ffffff !important;
  color: #0f172a !important;
  border: 1px solid #cbd5e1 !important;
  border-radius: 14px !important;
  min-height: 44px !important;
  width: 100% !important;
}
.calendar-event-modal textarea,
.supplier-edit-modal textarea { min-height: 96px !important; }
html.dark-mode .calendar-event-modal,
html.dark-mode .supplier-edit-modal {
  background: #0f172a !important;
  color: #f8fafc !important;
  border-color: rgba(148,163,184,.18) !important;
}
html.dark-mode .calendar-event-modal input,
html.dark-mode .calendar-event-modal select,
html.dark-mode .calendar-event-modal textarea,
html.dark-mode .supplier-edit-modal input,
html.dark-mode .supplier-edit-modal select,
html.dark-mode .supplier-edit-modal textarea {
  background: #081D4A !important;
  color: #f8fafc !important;
  border-color: rgba(148,163,184,.28) !important;
}
html.dark-mode .calendar-event-modal .modal-close,
html.dark-mode .supplier-edit-modal .modal-close {
  background: rgba(148,163,184,.14) !important;
  color: #f8fafc !important;
}
@media (max-width: 900px) {
  .login-shell { justify-content: center !important; gap: 22px !important; }
  .calendar-event-modal,
  .supplier-edit-modal { width: 96vw !important; padding: 18px !important; }
  .calendar-event-modal form.grid3,
  .supplier-edit-modal form.grid3 { grid-template-columns: 1fr !important; }
  .portal-access-check { margin-top: 0; }
}

/* =========================================================
   Ajustes V8.2 - Pedidos, indicadores, filtros e paginação
   ========================================================= */
.portal-kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin: 18px 0;
}
.portal-kpi-card {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 22px;
  padding: 20px;
  box-shadow: 0 14px 36px rgba(15,23,42,.08);
  display: flex;
  flex-direction: column-reverse;
  align-items: flex-start;
  justify-content: center;
  min-height: 122px;
  gap: 8px;
}
.portal-kpi-card strong {
  font-size: 34px;
  line-height: 1;
  color: #0f172a;
}
.portal-kpi-card span {
  font-size: 13px;
  font-weight: 800;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.portal-kpi-blue { border-left: 5px solid #2375FF; }
.portal-kpi-neutral { border-left: 5px solid #334155; }
.portal-kpi-red { border-left: 5px solid #dc2626; }
.portal-kpi-green { border-left: 5px solid #16a34a; }
.portal-kpi-blue strong { color: #2375FF; }
.portal-kpi-red strong { color: #dc2626; }
.portal-kpi-green strong { color: #16a34a; }
html.dark-mode .portal-kpi-card { background:#0f172a; border-color:rgba(148,163,184,.18); }
html.dark-mode .portal-kpi-card strong { color:#f8fafc; }
html.dark-mode .portal-kpi-blue strong { color:#2375FF; }
html.dark-mode .portal-kpi-red strong { color:#f87171; }
html.dark-mode .portal-kpi-green strong { color:#4ade80; }

.order-status { min-width: 128px; }
.order-novo-pedido { background:#e0f2fe !important; color:#075985 !important; }
.order-em-analise { background:#dbeafe !important; color:#1E49F2 !important; }
.order-aguardando-pagamento { background:#ffedd5 !important; color:#c2410c !important; }
.order-pago { background:#dcfce7 !important; color:#15803d !important; }
.order-separado { background:#ede9fe !important; color:#6d28d9 !important; }
.order-entregue { background:#bbf7d0 !important; color:#166534 !important; }
.order-cancelado { background:#fee2e2 !important; color:#b91c1c !important; }

.filters-form { margin: 0; }
.filter-actions { display:flex; align-items:end; gap:10px; flex-wrap:wrap; }
.table-pagination {
  display:flex;
  justify-content:flex-end;
  align-items:center;
  gap:8px;
  margin-top:14px;
  flex-wrap:wrap;
}
.table-pagination button,
.table-pagination span {
  min-height: 36px;
  border-radius: 10px;
  padding: 8px 11px;
  border: 1px solid var(--line);
  background: var(--panel);
  color: var(--text);
  font-weight: 800;
}
.table-pagination button.active {
  background: var(--primary);
  color: #fff;
  border-color: var(--primary);
}
.table-pagination button:disabled {
  opacity: .45;
  cursor: not-allowed;
}

@media(max-width:900px){
  .portal-kpi-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .filter-actions { width:100%; }
  .filter-actions .btn, .filter-actions button { width:100%; }
}
@media(max-width:520px){
  .portal-kpi-grid { grid-template-columns: 1fr; }
}

/* Ajuste final do rodapé H4LVION */
.h4-footer img,
.login-h4-footer img {
  width: 38px !important;
  height: 38px !important;
  min-width: 38px !important;
  object-fit: contain !important;
  opacity: 1 !important;
  filter: none !important;
}

.h4-footer,
.login-h4-footer {
  gap: 10px !important;
  font-size: 13px !important;
}

.h4-footer strong,
.login-h4-footer strong {
  font-size: 13px !important;
  font-weight: 800 !important;
  letter-spacing: 0.5px !important;
}
/* =========================================================
   Ajuste financeiro do Área do Cliente - V8.2.1
   ========================================================= */
.portal-finance-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 18px;
  margin-bottom: 18px;
}

.portal-finance-header h1 {
  margin: 0 0 8px;
  font-size: clamp(28px, 3vw, 38px);
  line-height: 1.1;
  letter-spacing: -0.03em;
  color: #0f172a;
}

.portal-finance-header p {
  margin: 0;
  color: #64748b;
  font-size: 15px;
  line-height: 1.5;
}

.portal-finance-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin: 18px 0 22px;
}

.portal-finance-card {
  position: relative;
  overflow: hidden;
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 24px;
  padding: 20px;
  min-height: 158px;
  box-shadow: 0 18px 45px rgba(15, 23, 42, 0.08);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 14px;
}

.portal-finance-card::after {
  content: "";
  position: absolute;
  width: 112px;
  height: 112px;
  right: -42px;
  bottom: -48px;
  border-radius: 999px;
  opacity: 0.16;
  background: currentColor;
}

.portal-finance-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.portal-finance-card-top span {
  color: #64748b;
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.portal-finance-icon {
  width: 40px;
  height: 40px;
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  font-size: 14px;
  background: rgba(15, 23, 42, 0.06);
  color: currentColor;
  flex: 0 0 auto;
}

.portal-finance-card strong {
  display: block;
  color: #0f172a;
  font-size: clamp(28px, 2.4vw, 36px);
  line-height: 1;
  letter-spacing: -0.04em;
  white-space: nowrap;
}

.portal-finance-card p {
  margin: 0;
  color: #64748b;
  font-size: 13px;
  line-height: 1.4;
  max-width: 260px;
}

.portal-finance-open {
  color: #f59e0b;
  border-left: 6px solid #f59e0b;
}

.portal-finance-overdue {
  color: #ef4444;
  border-left: 6px solid #ef4444;
}

.portal-finance-monthly {
  color: #2375FF;
  border-left: 6px solid #2375FF;
}

.portal-finance-titles {
  color: #7c3aed;
  border-left: 6px solid #7c3aed;
}

.portal-finance-table-card {
  margin-top: 4px;
}

.portal-finance-table-card .section-head {
  margin-top: 0;
}

.portal-finance-table-card .section-head p {
  margin: 6px 0 0;
}

html.dark-mode .portal-finance-header h1,
.dark-mode .portal-finance-header h1 {
  color: #f8fafc;
}

html.dark-mode .portal-finance-header p,
.dark-mode .portal-finance-header p,
html.dark-mode .portal-finance-card-top span,
.dark-mode .portal-finance-card-top span,
html.dark-mode .portal-finance-card p,
.dark-mode .portal-finance-card p {
  color: #94a3b8;
}

html.dark-mode .portal-finance-card,
.dark-mode .portal-finance-card {
  background: #0f172a;
  border-color: rgba(148, 163, 184, 0.18);
  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.26);
}

html.dark-mode .portal-finance-card strong,
.dark-mode .portal-finance-card strong {
  color: #f8fafc;
}

html.dark-mode .portal-finance-icon,
.dark-mode .portal-finance-icon {
  background: rgba(148, 163, 184, 0.12);
}

html.dark-mode .portal-finance-open,
.dark-mode .portal-finance-open { color: #fbbf24; }
html.dark-mode .portal-finance-overdue,
.dark-mode .portal-finance-overdue { color: #f87171; }
html.dark-mode .portal-finance-monthly,
.dark-mode .portal-finance-monthly { color: #2375FF; }
html.dark-mode .portal-finance-titles,
.dark-mode .portal-finance-titles { color: #a78bfa; }

@media (max-width: 1100px) {
  .portal-finance-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .portal-finance-header {
    align-items: flex-start;
    flex-direction: column;
  }

  .portal-finance-grid {
    grid-template-columns: 1fr;
  }

  .portal-finance-card {
    min-height: 138px;
    padding: 18px;
  }

  .portal-finance-card strong {
    font-size: 30px;
  }
}

/* =========================================================
   V8.3 - Refinamento de filtros, tabelas, impressão e paginação
   ========================================================= */
.filters-form,
form.filters,
.card.filters {
  align-items: end !important;
}
.filters-form label,
form.filters label,
.card.filters label {
  align-self: end !important;
}
.filter-actions {
  display: flex;
  gap: 10px;
  align-items: end;
  align-self: end;
  flex-wrap: wrap;
}
.filter-actions .btn,
form.filters .btn,
.card.filters .btn {
  min-height: 43px;
}
.sortable-th {
  cursor: pointer;
  user-select: none;
  position: relative;
  padding-right: 24px !important;
}
.sortable-th:after {
  content: '↕';
  position: absolute;
  right: 8px;
  color: #94a3b8;
  font-size: 12px;
}
.sortable-th.sort-asc:after { content: '↑'; color: var(--primary); }
.sortable-th.sort-desc:after { content: '↓'; color: var(--primary); }
.table-tools {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}
.table-pagination {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 8px;
  padding: 14px 2px 0;
  color: var(--muted);
  font-size: 13px;
}
.table-pagination button {
  min-height: 34px;
  padding: 7px 10px;
  border-radius: 10px;
  background: #eef3ff;
  color: var(--primary);
}
.table-pagination button:disabled {
  opacity: .45;
  cursor: not-allowed;
}
.table-pagination span {
  padding: 0 6px;
  font-weight: 700;
}
.badge.Novo,
.badge.novo,
.badge.Novopedido,
.badge.novopedido { background: #e0f2fe; color: #0369a1; }
.badge.Emanálise,
.badge.emanálise,
.badge.emanalise { background: #dbeafe; color: #1E49F2; }
.badge.Aguardandopagamento,
.badge.aguardandopagamento { background: #ffedd5; color: #c2410c; }
.badge.Separado,
.badge.separado { background: #ede9fe; color: #6d28d9; }
.badge.Entregue,
.badge.entregue,
.badge.Pago,
.badge.pago { background: #dcfce7; color: #15803d; }
.badge.Cancelado,
.badge.cancelado { background: #fee2e2; color: #b91c1c; }
.dark-mode .table-pagination button { background: #172554; color: #bfdbfe; }
.dark-mode .sortable-th:after { color: #64748b; }
.dark-mode .table-tools { color: #94a3b8; }
@media (max-width: 900px) {
  .filters-form,
  form.filters,
  .card.filters {
    grid-template-columns: 1fr !important;
    align-items: stretch !important;
  }
  .filter-actions,
  .table-tools,
  .table-pagination {
    justify-content: stretch;
  }
  .filter-actions .btn,
  .table-tools .btn,
  form.filters .btn,
  .card.filters .btn {
    width: 100%;
  }
}


/* =========================================================
   V8.3.1 - Padronização global das barras de filtros
   ========================================================= */
.card.filters,
.filters {
  display: flex !important;
  align-items: flex-end !important;
  justify-content: flex-start !important;
  gap: 14px !important;
  flex-wrap: wrap !important;
  padding: 18px 20px !important;
}

.filters label,
.filters-form label {
  display: grid !important;
  grid-template-rows: auto auto;
  align-items: start !important;
  gap: 6px !important;
  margin: 0 !important;
  min-width: 180px;
  max-width: 260px;
  color: #344054 !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
}

.filters label:first-child,
.filters-form label:first-child {
  min-width: 240px;
  flex: 1 1 260px;
}

.filters input,
.filters select,
.filters .search-select-button,
.filters-form input,
.filters-form select,
.filters-form .search-select-button {
  height: 44px !important;
  min-height: 44px !important;
  max-height: 44px !important;
  width: 100% !important;
  border-radius: 14px !important;
  padding: 0 14px !important;
  font-size: 14px !important;
  line-height: 44px !important;
}

.filters .search-select,
.filters-form .search-select {
  width: 100% !important;
  min-width: 0 !important;
}

.filters .btn,
.filters button,
.filters-form .btn,
.filters-form button,
.filter-actions .btn,
.filter-actions button {
  height: 44px !important;
  min-height: 44px !important;
  align-self: end !important;
  white-space: nowrap !important;
}

.filter-actions {
  display: flex !important;
  align-items: flex-end !important;
  gap: 10px !important;
  align-self: end !important;
  min-height: 44px !important;
}

.filters-form {
  align-items: end !important;
}

.filters-form .filter-actions {
  grid-column: auto !important;
}

.dark-mode .filters label,
.dark-mode .filters-form label {
  color: #cbd5e1 !important;
}

@media (max-width: 900px) {
  .card.filters,
  .filters,
  .filters-form {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    padding: 16px !important;
  }

  .filters label,
  .filters-form label,
  .filters label:first-child,
  .filters-form label:first-child {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  .filter-actions,
  .filters .btn,
  .filters button,
  .filters-form .btn,
  .filters-form button {
    width: 100% !important;
  }

  .filter-actions {
    display: grid !important;
    grid-template-columns: 1fr !important;
  }
}


/* =========================================================
   IDENTIDADE VISUAL VELOJA - Paleta oficial
   Azul Primário: #2375FF | Azul Profundo: #1E49F2 | Azul Marinho: #081D4A
   Branco: #FFFFFF | Cinza Claro: #F4F6FA
   ========================================================= */
:root {
  --bg: #F4F6FA;
  --panel: #FFFFFF;
  --text: #081D4A;
  --muted: #667085;
  --line: #E6EAF2;
  --primary: #2375FF;
  --primary2: #1E49F2;
}
.dark-mode {
  --bg: #081D4A;
  --panel: #0B265F;
  --text: #FFFFFF;
  --muted: #B8C4D9;
  --line: rgba(255,255,255,.12);
  --primary: #2375FF;
  --primary2: #1E49F2;
}
.sidebar {
  background: linear-gradient(180deg, #081D4A 0%, #061638 100%);
}
.brand-logo-img {
  background: transparent !important;
  border-radius: 12px;
  padding: 0 !important;
}
.login-logo {
  width: 360px;
  max-height: 124px;
  object-fit: contain;
}
.btn.primary, button.btn.primary, .primary {
  background: linear-gradient(135deg, #2375FF, #1E49F2);
  border-color: #2375FF;
}
body.login-light-only,
html body.login-light-only,
html[data-theme="dark"] body.login-light-only,
body.dark.login-light-only,
body.dark-mode.login-light-only,
body.theme-dark.login-light-only {
  background: radial-gradient(circle at top left, rgba(35,117,255,.28), transparent 35%), linear-gradient(135deg, #081D4A 0%, #1E49F2 52%, #081D4A 100%) !important;
}
.login-h4-footer strong,
.h4-footer strong {
  color: #2375FF !important;
}

/* =========================================================
   VELOJA UI REFRESH 2026 - camada visual SaaS varejo
   Mantém rotas/lógica intactas e altera apenas apresentação.
   ========================================================= */
:root{
  --bg:#F4F6FA;
  --panel:#FFFFFF;
  --text:#081D4A;
  --muted:#667085;
  --line:#E3E9F5;
  --primary:#2375FF;
  --primary2:#1E49F2;
  --navy:#081D4A;
  --soft-blue:#EAF2FF;
  --shadow:0 22px 60px rgba(8,29,74,.10);
  --shadow-soft:0 10px 30px rgba(8,29,74,.07);
  --radius:22px;
}
body{
  background:
    radial-gradient(circle at 18% 4%, rgba(35,117,255,.13), transparent 30%),
    linear-gradient(180deg,#F9FBFF 0%,#F4F6FA 42%,#EEF3FB 100%);
  color:var(--text);
}
.sidebar{
  width:300px;
  background:
    radial-gradient(circle at 30% -10%, rgba(35,117,255,.55), transparent 28%),
    linear-gradient(180deg,#081D4A 0%,#07183C 48%,#04102A 100%);
  border-right:1px solid rgba(255,255,255,.08);
  box-shadow:14px 0 45px rgba(8,29,74,.18);
}
.brand{
  padding:8px 6px 18px;
  border-bottom:1px solid rgba(255,255,255,.10);
}
.brand-logo-img{
  width:46px!important;height:46px!important;max-width:46px!important;max-height:46px!important;
  border-radius:16px!important;background:#2375FF;padding:4px!important;box-shadow:0 16px 30px rgba(35,117,255,.35);
}
.brand strong{font-size:20px;letter-spacing:.01em;color:#fff}.brand span{color:#BFD3FF;font-weight:600}
.sidebar nav{gap:7px;padding-top:4px}.sidebar nav a{border:1px solid transparent;color:#D8E5FF;font-weight:750;letter-spacing:.005em}
.sidebar nav a:hover{background:rgba(255,255,255,.10);border-color:rgba(255,255,255,.10);transform:translateX(2px)}
.sidebar nav a.active{background:linear-gradient(135deg,#2375FF,#1E49F2)!important;border-left:0!important;border-color:rgba(255,255,255,.18)!important;box-shadow:0 14px 28px rgba(35,117,255,.24)}
.nav-icon{background:rgba(255,255,255,.10);border-radius:10px;width:30px!important;height:30px;display:inline-grid;place-items:center;font-size:16px!important}
.sidebar nav a.active .nav-icon{background:rgba(255,255,255,.18)}
.topbar{left:300px;height:82px;background:rgba(255,255,255,.78);border-bottom:1px solid rgba(226,232,240,.9);box-shadow:0 12px 34px rgba(8,29,74,.05);backdrop-filter:blur(20px);padding:0 32px}
.topbar strong{font-size:21px;color:#081D4A}.topbar small{color:#6B7894;font-weight:600}.content{margin-left:300px;padding:106px 32px 44px;max-width:1920px}
.user-name,.theme-toggle{border:1px solid #E2E8F0;background:#fff;box-shadow:0 10px 24px rgba(8,29,74,.08)}
.card{border:1px solid rgba(226,232,240,.95);box-shadow:var(--shadow-soft);border-radius:24px;background:rgba(255,255,255,.94)}
.card:hover{box-shadow:0 18px 46px rgba(8,29,74,.095)}
.veloja-hero{display:flex;align-items:center;justify-content:space-between;gap:24px;margin-bottom:22px;padding:28px;border-radius:30px;color:#fff;background:radial-gradient(circle at 18% 10%, rgba(255,255,255,.18), transparent 28%),linear-gradient(135deg,#081D4A 0%,#1E49F2 58%,#2375FF 100%);box-shadow:0 26px 70px rgba(30,73,242,.22);overflow:hidden;position:relative}.veloja-hero:after{content:"";position:absolute;right:-70px;bottom:-85px;width:250px;height:250px;border-radius:50%;background:rgba(255,255,255,.11)}.veloja-hero>*{position:relative;z-index:1}.veloja-hero h1{margin:6px 0 8px;font-size:34px;line-height:1.05;letter-spacing:-.04em}.veloja-hero p{margin:0;max-width:680px;color:#DCE8FF;font-weight:600}.veloja-hero.compact{padding:24px 26px}.eyebrow{display:inline-flex;align-items:center;gap:7px;font-size:11px;font-weight:900;text-transform:uppercase;letter-spacing:.11em;color:#2375FF}.veloja-hero .eyebrow{color:#CFE0FF}.period-panel{display:grid;grid-template-columns:1fr 1fr auto;gap:12px;align-items:end;min-width:min(560px,100%);background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.22);border-radius:22px;padding:14px;backdrop-filter:blur(10px)}.period-panel label{display:grid;gap:6px;color:#E7EEFF;font-size:12px;font-weight:800}.period-panel input{height:42px;border:1px solid rgba(255,255,255,.28);border-radius:13px;background:rgba(255,255,255,.94);color:#081D4A;padding:0 12px;font-weight:700}.period-actions{display:flex;gap:8px}.period-panel .btn.ghost{background:rgba(255,255,255,.18);color:#fff;border:1px solid rgba(255,255,255,.18)}
.kpi-modern-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-bottom:18px}.kpi-modern{position:relative;overflow:hidden;min-height:154px;padding:18px;border-radius:24px;background:#fff;border:1px solid #E3E9F5;box-shadow:var(--shadow-soft);display:flex;flex-direction:column;gap:8px}.kpi-modern:after{content:"";position:absolute;right:-34px;top:-38px;width:126px;height:126px;border-radius:50%;background:var(--kpi-soft,rgba(35,117,255,.10))}.kpi-modern small{position:relative;color:#667085;font-weight:850;text-transform:uppercase;font-size:11px;letter-spacing:.06em}.kpi-modern strong{position:relative;font-size:25px;letter-spacing:-.035em;color:var(--kpi-color,#2375FF);line-height:1.1}.kpi-modern em{position:relative;font-style:normal;color:#73809A;font-size:12px;font-weight:650;margin-top:auto}.kpi-icon{position:relative;width:38px;height:38px;border-radius:14px;display:grid;place-items:center;background:var(--kpi-soft,rgba(35,117,255,.10));color:var(--kpi-color,#2375FF);font-weight:900}.kpi-blue{--kpi-color:#2375FF;--kpi-soft:rgba(35,117,255,.13)}.kpi-navy{--kpi-color:#081D4A;--kpi-soft:rgba(8,29,74,.10)}.kpi-green{--kpi-color:#16a34a;--kpi-soft:rgba(22,163,74,.13)}.kpi-orange{--kpi-color:#f97316;--kpi-soft:rgba(249,115,22,.14)}.kpi-red{--kpi-color:#ef4444;--kpi-soft:rgba(239,68,68,.12)}
.dashboard-modern-grid{display:grid;grid-template-columns:1.45fr .9fr;gap:18px;margin-bottom:18px}.chart-card{min-height:390px}.chart-main canvas{height:300px!important;max-height:300px!important}.chart-side canvas{height:300px!important;max-height:300px!important}.section-head.clean{margin:0 0 16px}.section-head.clean h2{font-size:19px;letter-spacing:-.02em;color:#081D4A}.insight-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}.insight-card{min-height:230px}.alert-item.modern,.alert-item{border-radius:17px;background:linear-gradient(180deg,#FFFFFF,#FAFCFF);border:1px solid #E6ECF6;padding:13px 14px}.alert-item.modern strong,.alert-item strong{color:#081D4A}.badge{border:1px solid rgba(255,255,255,.6);font-weight:850}.dashboard-finance-grid.modern{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}.dashboard-finance-grid.modern .chart-wide{grid-column:1/-1}.ranking-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}.ranking-card{border:1px solid #E3E9F5;border-radius:20px;background:linear-gradient(180deg,#fff,#F8FBFF);padding:16px}.ranking-card>strong{display:block;color:#081D4A;margin-bottom:12px}.ranking-card p{display:flex;align-items:center;justify-content:space-between;gap:12px;border-top:1px solid #EEF2F8;margin:0;padding:11px 0;color:#667085}.ranking-card p:first-of-type{border-top:0}.ranking-card b{color:#2375FF}.ranking-card.accent{background:linear-gradient(135deg,#081D4A,#1E49F2);color:#fff}.ranking-card.accent strong,.ranking-card.accent p{color:#fff;border-color:rgba(255,255,255,.16)}
.filters,.dashboard-filter{border:1px solid #E3E9F5;border-radius:22px;background:rgba(255,255,255,.92);box-shadow:var(--shadow-soft);padding:14px}.filters label,.dashboard-filter label,.form label{font-weight:850;color:#263A62}.filters input,.filters select,.dashboard-filter input,.form input,.form select,.form textarea{border-color:#DDE6F4;background:#fff;border-radius:14px;min-height:43px}.filters input:focus,.filters select:focus,.dashboard-filter input:focus,.form input:focus,.form select:focus,.form textarea:focus{outline:0;border-color:#2375FF;box-shadow:0 0 0 4px rgba(35,117,255,.12)}.btn,button{border-radius:14px;transition:.18s ease}.btn.primary,button.primary{background:linear-gradient(135deg,#2375FF,#1E49F2);box-shadow:0 14px 25px rgba(35,117,255,.22)}.btn.primary:hover,button.primary:hover{transform:translateY(-1px);box-shadow:0 18px 36px rgba(35,117,255,.28)}.btn.ghost{background:#EAF2FF;color:#1E49F2;border:1px solid #D8E7FF}.btn.success{background:#EAFBF0;color:#15803d}.btn.danger{background:#FFF0F0;color:#dc2626}.table{border-collapse:separate;border-spacing:0;background:#fff;border:1px solid #E3E9F5;border-radius:20px;overflow:hidden}.table th{background:#F4F8FF;color:#42526E;font-size:11px;letter-spacing:.08em}.table td{border-bottom:1px solid #ECF1F8}.table tr:hover td{background:#F8FBFF}.table-wrap{border-radius:22px}.report-item,.mini-card{border-radius:20px;background:linear-gradient(180deg,#FFFFFF,#FAFCFF)}.modal-box,.audit-modal-card{border-radius:26px!important;border:1px solid #E3E9F5!important}.login-card{border:1px solid rgba(255,255,255,.5)}
body.sidebar-collapsed .topbar{left:78px}body.sidebar-collapsed .content{margin-left:78px}body.sidebar-collapsed .brand-logo-img{width:42px!important;height:42px!important}
.dark-mode{--bg:#061126;--panel:#0B1A38;--text:#EAF2FF;--muted:#9FB0D0;--line:#1D315A;--soft-blue:#102A5C;--shadow:0 22px 60px rgba(0,0,0,.32);--shadow-soft:0 10px 30px rgba(0,0,0,.24)}.dark-mode body{background:radial-gradient(circle at 18% 4%, rgba(35,117,255,.15), transparent 32%),linear-gradient(180deg,#061126,#081D4A)}.dark-mode .topbar{background:rgba(6,17,38,.84);border-color:#1D315A}.dark-mode .topbar strong,.dark-mode .section-head.clean h2,.dark-mode .alert-item.modern strong,.dark-mode .alert-item strong,.dark-mode .ranking-card>strong{color:#EAF2FF}.dark-mode .card,.dark-mode .kpi-modern,.dark-mode .filters,.dark-mode .dashboard-filter,.dark-mode .ranking-card,.dark-mode .alert-item,.dark-mode .report-item,.dark-mode .mini-card{background:linear-gradient(180deg,#0B1A38,#08172F);border-color:#1D315A;color:#EAF2FF}.dark-mode .kpi-modern em,.dark-mode .kpi-modern small{color:#9FB0D0}.dark-mode .table{background:#0B1A38;border-color:#1D315A}.dark-mode .table th{background:#102A5C;color:#BFD3FF}.dark-mode .table tr:hover td{background:#10264F}.dark-mode .filters input,.dark-mode .filters select,.dark-mode .dashboard-filter input,.dark-mode .form input,.dark-mode .form select,.dark-mode .form textarea{background:#08172F;border-color:#263E70;color:#EAF2FF}.dark-mode .btn.ghost{background:#102A5C;color:#BFD3FF;border-color:#1D4ED8}.dark-mode .user-name,.dark-mode .theme-toggle{background:#0B1A38;border-color:#1D315A}.dark-mode .ranking-card.accent{background:linear-gradient(135deg,#0B1A38,#2375FF)}.dark-mode .alert-item.modern,.dark-mode .alert-item{background:linear-gradient(180deg,#0B1A38,#08172F)}.dark-mode .veloja-hero{box-shadow:0 26px 70px rgba(0,0,0,.35)}
@media(max-width:1180px){.kpi-modern-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.dashboard-modern-grid,.insight-grid,.dashboard-finance-grid.modern{grid-template-columns:1fr}.dashboard-finance-grid.modern .chart-wide{grid-column:auto}.period-panel{grid-template-columns:1fr 1fr}}
@media(max-width:900px){.topbar{left:0!important}.content{margin-left:0!important;padding:92px 14px 28px!important}.veloja-hero{flex-direction:column;align-items:stretch;padding:22px}.veloja-hero h1{font-size:27px}.period-panel{grid-template-columns:1fr}.period-actions{display:grid;grid-template-columns:1fr 1fr}.kpi-modern-grid{grid-template-columns:1fr}.ranking-grid{grid-template-columns:1fr}.chart-card{min-height:340px}.chart-main canvas,.chart-side canvas{height:245px!important;max-height:245px!important}.sidebar{width:min(86vw,320px)!important}.sidebar nav a:hover{transform:none}}
@media(max-width:520px){.veloja-hero h1{font-size:24px}.period-actions{grid-template-columns:1fr}.kpi-modern{min-height:135px}.content{padding-left:12px!important;padding-right:12px!important}.top-actions{gap:6px}.user-name{max-width:88px}.section-head.clean{align-items:flex-start;flex-direction:column}.kpi-modern strong{font-size:22px}}

/* =========================================================
   VELOJA V9 - correções de tema escuro, ícones e contraste
   ========================================================= */
.nav-icon svg{
  width:20px;
  height:20px;
  display:block;
  stroke:currentColor;
  fill:none;
  stroke-width:2;
  stroke-linecap:round;
  stroke-linejoin:round;
}
body.sidebar-collapsed .sidebar nav a::first-letter{font-size:0!important;}
html.dark-mode,
html.dark-mode body{
  background:radial-gradient(circle at 18% 4%, rgba(35,117,255,.15), transparent 32%),linear-gradient(180deg,#061126,#081D4A)!important;
  color:#EAF2FF!important;
}
html.dark-mode .content,
html.dark-mode main,
html.dark-mode section,
html.dark-mode article,
html.dark-mode .card,
html.dark-mode .modal-box,
html.dark-mode .modal-card,
html.dark-mode .report-item,
html.dark-mode .mini-card,
html.dark-mode .chart-card,
html.dark-mode .dashboard-filter,
html.dark-mode .filters,
html.dark-mode .table,
html.dark-mode .table-wrap,
html.dark-mode .user-dropdown,
html.dark-mode .search-select-list,
html.dark-mode .select-search-results,
html.dark-mode .portal-body,
html.dark-mode .portal-content,
html.dark-mode .portal-topbar,
html.dark-mode .portal-finance-card,
html.dark-mode .portal-kpi-card{
  color:#EAF2FF!important;
}
html.dark-mode h1,
html.dark-mode h2,
html.dark-mode h3,
html.dark-mode h4,
html.dark-mode h5,
html.dark-mode h6,
html.dark-mode p,
html.dark-mode span,
html.dark-mode small,
html.dark-mode strong,
html.dark-mode b,
html.dark-mode label,
html.dark-mode th,
html.dark-mode td,
html.dark-mode summary,
html.dark-mode .muted,
html.dark-mode .section-head h1,
html.dark-mode .section-head h2,
html.dark-mode .topbar strong,
html.dark-mode .topbar small,
html.dark-mode .portal-brand strong,
html.dark-mode .portal-brand span{
  color:inherit;
}
html.dark-mode .muted,
html.dark-mode small,
html.dark-mode .topbar small,
html.dark-mode .metric span,
html.dark-mode .metric small,
html.dark-mode .kpi-modern small,
html.dark-mode .kpi-modern em,
html.dark-mode .portal-list-item span,
html.dark-mode .portal-finance-card p,
html.dark-mode .portal-finance-card-top span{
  color:#AFC1E3!important;
}
html.dark-mode .card,
html.dark-mode .kpi-modern,
html.dark-mode .filters,
html.dark-mode .dashboard-filter,
html.dark-mode .table,
html.dark-mode .modal-box,
html.dark-mode .modal-card,
html.dark-mode .report-item,
html.dark-mode .mini-card,
html.dark-mode .portal-kpi-card,
html.dark-mode .portal-finance-card,
html.dark-mode .calendar-card,
html.dark-mode .alert-item{
  background:linear-gradient(180deg,#0B1A38,#08172F)!important;
  border-color:#1D315A!important;
}
html.dark-mode input,
html.dark-mode select,
html.dark-mode textarea,
html.dark-mode .search-select-button,
html.dark-mode .search-select-input,
html.dark-mode .search-select-list,
html.dark-mode .select-search-results,
html.dark-mode .select-search-results button{
  background:#061B3D!important;
  color:#F8FAFC!important;
  border-color:#2C477D!important;
}
html.dark-mode input::placeholder,
html.dark-mode textarea::placeholder{
  color:#8EA3C7!important;
  opacity:1!important;
}
html.dark-mode .table th{
  background:#102A5C!important;
  color:#D7E5FF!important;
}
html.dark-mode .table td{
  color:#F1F5F9!important;
  border-color:#1D315A!important;
}
html.dark-mode .table tr:hover td{background:#10264F!important;}
html.dark-mode .h4-footer,
html.dark-mode .login-h4-footer,
html.dark-mode .h4-footer span,
html.dark-mode .login-h4-footer span,
html.dark-mode .h4-footer strong,
html.dark-mode .login-h4-footer strong{
  color:#FFFFFF!important;
}
html.dark-mode .h4-footer img,
html.dark-mode .login-h4-footer img{filter:brightness(0) invert(1)!important;}
html.dark-mode .badge.paga,
html.dark-mode .badge.ativo,
html.dark-mode .badge.finalizada,
html.dark-mode .badge.entrada,
html.dark-mode .badge.pago{background:rgba(34,197,94,.18)!important;color:#BBF7D0!important;border-color:rgba(34,197,94,.28)!important;}
html.dark-mode .badge.vencida,
html.dark-mode .badge.com-pendencia,
html.dark-mode .badge.saida{background:rgba(248,113,113,.18)!important;color:#FECACA!important;border-color:rgba(248,113,113,.28)!important;}
html.dark-mode .badge.emaberto,
html.dark-mode .badge.aberto,
html.dark-mode .badge.parcial,
html.dark-mode .badge.pendente{background:rgba(251,191,36,.18)!important;color:#FDE68A!important;border-color:rgba(251,191,36,.28)!important;}
html.dark-mode .badge.cancelada,
html.dark-mode .badge.cancelado,
html.dark-mode .badge.inativo{background:rgba(148,163,184,.18)!important;color:#E2E8F0!important;border-color:rgba(148,163,184,.28)!important;}
html.dark-mode .btn.ghost{background:#102A5C!important;color:#D7E5FF!important;border:1px solid #2C477D!important;}
html.dark-mode .btn.primary,
html.dark-mode button.primary{color:#FFFFFF!important;}
html.dark-mode .btn.danger{background:rgba(248,113,113,.14)!important;color:#FECACA!important;}
html.dark-mode .btn.success{background:rgba(34,197,94,.14)!important;color:#BBF7D0!important;}
html.dark-mode .user-dropdown a{color:#EAF2FF!important;}
html.dark-mode .user-dropdown a:hover{background:#102A5C!important;}
html.dark-mode .portal-nav a{background:#102A5C!important;color:#D7E5FF!important;}
html.dark-mode .portal-nav a:hover{background:#173A7A!important;}
html.dark-mode .calendar-card > div{background:#061B3D!important;color:#F8FAFC!important;}
html.dark-mode .sortable-th:after{color:#AFC1E3!important;}
html.dark-mode .flash.success{background:#052E16!important;color:#BBF7D0!important;}
html.dark-mode .flash.danger{background:#451A1A!important;color:#FECACA!important;}
html.dark-mode .flash.warning{background:#422006!important;color:#FDE68A!important;}
html.dark-mode .login-light-only .login-card,
html.dark-mode body.login-light-only .login-card{color:#0f172a!important;}
html.dark-mode body.login-light-only .login-card h1,
html.dark-mode body.login-light-only .login-card label,
html.dark-mode body.login-light-only .login-card strong{color:#0f172a!important;}
html.dark-mode body.login-light-only .login-card span,
html.dark-mode body.login-light-only .login-card .muted{color:#64748b!important;}

/* =========================================================
   VELOJA V9.1 - Ajuste simples solicitado
   H4LVION branco na tela de login
   ========================================================= */
body.login-light-only .login-h4-footer,
body.login-light-only .login-h4-footer span,
body.login-light-only .login-h4-footer strong {
  color: #FFFFFF !important;
}

body.login-light-only .login-h4-footer img {
  filter: brightness(0) invert(1) !important;
}

/* =========================================================
   VELOJA V10 - Menu lateral recolhível, responsividade e Área do Cliente
   ========================================================= */
:root{--sidebar-expanded:285px;--sidebar-collapsed:78px;}
.brand-logo-img{display:block;max-width:158px;max-height:50px;object-fit:contain;transition:all .22s ease;}
.sidebar{width:var(--sidebar-expanded);transition:width .24s ease,padding .24s ease;overflow-x:hidden;}
.sidebar nav a{min-height:44px;display:flex;align-items:center;gap:12px;}
.nav-icon{display:inline-flex;align-items:center;justify-content:center;width:26px;min-width:26px;height:26px;}
.nav-icon svg{width:21px;height:21px;stroke:currentColor;stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round;}
.nav-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.topbar{left:var(--sidebar-expanded);margin-left:0;transition:left .24s ease;}
.content{margin-left:var(--sidebar-expanded);transition:margin-left .24s ease;width:auto;max-width:none;}
body.sidebar-collapsed .sidebar{width:var(--sidebar-collapsed);padding-left:14px;padding-right:14px;overflow:visible;}
body.sidebar-collapsed .brand{justify-content:center;gap:0;margin-bottom:20px;}
body.sidebar-collapsed .brand-logo-img{width:44px!important;height:44px!important;max-width:44px!important;max-height:44px!important;object-fit:contain;}
body.sidebar-collapsed .brand-text{display:none!important;}
body.sidebar-collapsed .sidebar nav{gap:7px;}
body.sidebar-collapsed .sidebar nav a{justify-content:center;padding:12px 10px;font-size:14px;}
body.sidebar-collapsed .sidebar nav a::first-letter{font-size:inherit!important;}
body.sidebar-collapsed .nav-text{display:none!important;}
body.sidebar-collapsed .topbar{left:var(--sidebar-collapsed);margin-left:0;}
body.sidebar-collapsed .content{margin-left:var(--sidebar-collapsed);}
body.sidebar-collapsed .sidebar nav a:hover::after,
body.sidebar-collapsed .sidebar nav a:focus-visible::after{content:attr(data-title);position:absolute;left:64px;top:50%;transform:translateY(-50%);background:#0f172a;color:#fff;padding:8px 11px;border-radius:10px;white-space:nowrap;font-size:12px;font-weight:800;box-shadow:0 14px 32px rgba(15,23,42,.28);z-index:2000;pointer-events:none;}
.sidebar-toggle{display:flex;align-items:center;justify-content:center;transition:left .24s ease,background .2s ease;}
body.sidebar-collapsed .sidebar-toggle{left:15px;}
.grid,.kpi-modern-grid,.dashboard-modern-grid,.insight-grid,.portal-kpi-grid,.portal-modern-sections{min-width:0;}
.card,.chart-card,.table-wrap{min-width:0;}
.table-wrap{overflow-x:auto;}
.chart-card canvas,.card canvas{width:100%!important;max-width:100%;}
.dashboard-modern-grid{align-items:stretch;}
@media(max-width:900px){
  .sidebar{transform:translateX(-105%);width:min(86vw,300px);box-shadow:0 30px 80px rgba(15,23,42,.35);}
  body.menu-open .sidebar{transform:translateX(0);}
  .topbar{left:0!important;margin-left:0!important;padding-left:16px;padding-right:16px;}
  .content{margin-left:0!important;padding:92px 16px 32px;}
  .mobile-menu{display:inline-flex!important;}
  .grid.cards,.grid.two,.grid.three,.kpi-modern-grid,.dashboard-modern-grid,.insight-grid,.portal-grid-2{grid-template-columns:1fr!important;}
  .section-head,.action-head{align-items:flex-start;gap:12px;flex-direction:column;}
  .form.grid3,.filters-form,.grid3{grid-template-columns:1fr!important;}
  .modal-box,.modal-wide{width:calc(100vw - 24px)!important;max-width:calc(100vw - 24px)!important;max-height:92vh;overflow:auto;}
}
@media(max-width:520px){
  .topbar small{display:none;}
  .content{padding-left:12px;padding-right:12px;}
  .kpi-modern,.portal-kpi-card{padding:16px;}
  .portal-content{padding:20px 12px 28px;}
}

/* Área do Cliente - visual V10 */
.portal-body{background:linear-gradient(180deg,#f4f7fb 0%,#eef4ff 100%);}
.portal-topbar{gap:16px;}
.portal-nav a{display:inline-flex;align-items:center;min-height:36px;}
.portal-hero{position:relative;overflow:hidden;}
.portal-hero:after{content:"";position:absolute;right:-70px;top:-80px;width:240px;height:240px;border-radius:50%;background:rgba(255,255,255,.14);}
.portal-hero>*{position:relative;z-index:1;}
.portal-kpi-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin:18px 0;}
.portal-kpi-card{display:flex;flex-direction:column;gap:8px;background:#fff;border:1px solid #e6eaf2;border-radius:22px;padding:20px;box-shadow:0 16px 36px rgba(15,23,42,.07);position:relative;overflow:hidden;}
.portal-kpi-card:before{content:"";position:absolute;right:-28px;top:-28px;width:86px;height:86px;border-radius:50%;background:rgba(35,117,255,.09);}
.portal-kpi-card .portal-kpi-icon{width:38px;height:38px;border-radius:14px;display:grid;place-items:center;background:#eef4ff;color:#2375FF;font-weight:900;margin-bottom:2px;}
.portal-kpi-card strong{font-size:30px;line-height:1;color:#081D4A;}
.portal-kpi-card span{font-size:13px;font-weight:800;color:#475467;}
.portal-kpi-card small{color:#667085;}
.portal-kpi-red .portal-kpi-icon{background:#fee2e2;color:#dc2626;}.portal-kpi-green .portal-kpi-icon{background:#dcfce7;color:#16a34a;}.portal-kpi-neutral .portal-kpi-icon{background:#e2e8f0;color:#334155;}.portal-kpi-blue .portal-kpi-icon{background:#dbeafe;color:#2375FF;}
.portal-modern-sections{display:grid;grid-template-columns:1.1fr 1fr;gap:16px;margin-top:16px;}
.portal-section-full{grid-column:1/-1;}
.portal-list-item{gap:7px;}
.portal-list-item .row-between{display:flex;align-items:center;justify-content:space-between;gap:10px;}
.portal-empty{padding:18px;border:1px dashed #cbd5e1;border-radius:16px;color:#64748b;background:#f8fafc;}
html.dark-mode .portal-body{background:linear-gradient(180deg,#06183e 0%,#081D4A 100%);color:#e5e7eb;}
html.dark-mode .portal-topbar{background:rgba(6,24,62,.92);border-color:rgba(148,163,184,.18);}
html.dark-mode .portal-kpi-card,html.dark-mode .portal-modern-sections .card{background:#0f172a;border-color:rgba(148,163,184,.18);box-shadow:0 20px 45px rgba(0,0,0,.25);}
html.dark-mode .portal-kpi-card strong{color:#f8fafc;}html.dark-mode .portal-kpi-card span{color:#cbd5e1;}html.dark-mode .portal-kpi-card small{color:#94a3b8;}
html.dark-mode .portal-empty{background:#081D4A;border-color:rgba(148,163,184,.25);color:#cbd5e1;}
html.dark-mode .portal-list-item{border-color:rgba(148,163,184,.18);}
html.dark-mode .h4-footer,html.dark-mode .h4-footer span,html.dark-mode .h4-footer strong{color:#fff!important;}
@media(max-width:980px){.portal-kpi-grid{grid-template-columns:repeat(2,minmax(0,1fr));}.portal-modern-sections{grid-template-columns:1fr;}}
@media(max-width:560px){.portal-kpi-grid{grid-template-columns:1fr;}.portal-hero h1{font-size:26px;}}

/* =========================================================
   VELOJA V10.1 - Correção menu recolhível e dashboards
   Mantém a lógica existente e corrige apenas layout/responsividade.
   ========================================================= */
:root{
  --sidebar-expanded:285px;
  --sidebar-collapsed:82px;
  --topbar-height:76px;
}

@media (min-width:901px){
  body:not(.login-light-only) .sidebar{
    position:fixed!important;
    inset:0 auto 0 0!important;
    width:var(--sidebar-expanded)!important;
    min-width:var(--sidebar-expanded)!important;
    max-width:var(--sidebar-expanded)!important;
    transform:none!important;
    left:0!important;
    z-index:1000!important;
    overflow-y:auto!important;
    overflow-x:visible!important;
    transition:width .24s ease,min-width .24s ease,max-width .24s ease,padding .24s ease!important;
  }
  body:not(.login-light-only) .topbar{
    position:fixed!important;
    left:var(--sidebar-expanded)!important;
    right:0!important;
    width:auto!important;
    margin-left:0!important;
    z-index:900!important;
    transition:left .24s ease!important;
  }
  body:not(.login-light-only) .content{
    margin-left:var(--sidebar-expanded)!important;
    width:calc(100% - var(--sidebar-expanded))!important;
    max-width:calc(100% - var(--sidebar-expanded))!important;
    transition:margin-left .24s ease,width .24s ease,max-width .24s ease!important;
  }

  body.sidebar-collapsed:not(.login-light-only) .sidebar{
    width:var(--sidebar-collapsed)!important;
    min-width:var(--sidebar-collapsed)!important;
    max-width:var(--sidebar-collapsed)!important;
    padding-left:14px!important;
    padding-right:14px!important;
    overflow:visible!important;
  }
  body.sidebar-collapsed:not(.login-light-only) .topbar{
    left:var(--sidebar-collapsed)!important;
  }
  body.sidebar-collapsed:not(.login-light-only) .content{
    margin-left:var(--sidebar-collapsed)!important;
    width:calc(100% - var(--sidebar-collapsed))!important;
    max-width:calc(100% - var(--sidebar-collapsed))!important;
  }

  .sidebar-toggle{
    display:flex!important;
    position:fixed!important;
    left:calc(var(--sidebar-expanded) - 24px)!important;
    top:22px!important;
    bottom:auto!important;
    width:42px!important;
    height:42px!important;
    align-items:center!important;
    justify-content:center!important;
    border-radius:999px!important;
    border:1px solid rgba(255,255,255,.22)!important;
    background:#2375FF!important;
    color:#fff!important;
    box-shadow:0 16px 34px rgba(8,29,74,.28)!important;
    cursor:pointer!important;
    z-index:3500!important;
    font-size:16px!important;
    line-height:1!important;
  }
  .sidebar-toggle:hover{background:#1E49F2!important;transform:translateY(-1px);}
  body.sidebar-collapsed .sidebar-toggle{left:58px!important;}
  body.sidebar-collapsed .collapse-icon{display:none!important;}
  body.sidebar-collapsed .expand-icon{display:inline!important;}
  body:not(.sidebar-collapsed) .collapse-icon{display:inline!important;}
  body:not(.sidebar-collapsed) .expand-icon{display:none!important;}

  body.sidebar-collapsed .brand{justify-content:center!important;gap:0!important;}
  body.sidebar-collapsed .brand-text{display:none!important;}
  body.sidebar-collapsed .brand-logo-img{
    width:44px!important;height:44px!important;max-width:44px!important;max-height:44px!important;object-fit:contain!important;
  }
  body.sidebar-collapsed .sidebar nav a{
    justify-content:center!important;
    gap:0!important;
    padding:12px 10px!important;
    position:relative!important;
    overflow:visible!important;
  }
  body.sidebar-collapsed .nav-text{display:none!important;}
  body.sidebar-collapsed .sidebar nav a:hover::after,
  body.sidebar-collapsed .sidebar nav a:focus-visible::after{
    content:attr(data-title)!important;
    position:absolute!important;
    left:64px!important;
    top:50%!important;
    transform:translateY(-50%)!important;
    background:#081D4A!important;
    color:#fff!important;
    padding:8px 11px!important;
    border-radius:10px!important;
    white-space:nowrap!important;
    font-size:12px!important;
    font-weight:800!important;
    box-shadow:0 14px 32px rgba(15,23,42,.28)!important;
    z-index:5000!important;
    pointer-events:none!important;
  }
}

/* Blindagem dos dashboards/gráficos */
.dashboard-modern-grid,
.dashboard-finance-grid,
.dashboard-finance-grid.modern,
.insight-grid,
.kpi-modern-grid,
.grid,
.grid.two,
.grid.three{
  min-width:0!important;
}
.card,
.chart-card,
.chart-wide,
.chart-category,
.table-wrap{
  min-width:0!important;
  max-width:100%!important;
}
.chart-card,
.dashboard-finance-grid .chart-wide,
.dashboard-finance-grid .chart-category{
  position:relative!important;
  overflow:hidden!important;
}
.chart-card canvas,
.card canvas,
.dashboard-finance-grid .chart-wide canvas,
.dashboard-finance-grid .chart-category canvas{
  display:block!important;
  width:100%!important;
  max-width:100%!important;
}
.chart-main canvas,
.chart-side canvas{height:300px!important;max-height:300px!important;}
.dashboard-finance-grid .chart-wide canvas{height:330px!important;max-height:330px!important;}
.dashboard-finance-grid .chart-category canvas{height:280px!important;max-height:280px!important;}

@media(max-width:1180px){
  .dashboard-modern-grid,
  .dashboard-finance-grid.modern,
  .insight-grid{grid-template-columns:1fr!important;}
  .dashboard-finance-grid.modern .chart-wide{grid-column:auto!important;}
}

@media(max-width:900px){
  body:not(.login-light-only) .sidebar{
    position:fixed!important;
    top:0!important;
    left:0!important;
    width:min(86vw,300px)!important;
    min-width:0!important;
    max-width:min(86vw,300px)!important;
    height:100vh!important;
    transform:translateX(-105%)!important;
    z-index:9999!important;
    overflow:auto!important;
    transition:transform .24s ease!important;
  }
  body.menu-open:not(.login-light-only) .sidebar{transform:translateX(0)!important;}
  body.sidebar-collapsed:not(.login-light-only) .sidebar{transform:translateX(-105%)!important;}
  body:not(.login-light-only) .topbar{left:0!important;margin-left:0!important;width:100%!important;}
  body:not(.login-light-only) .content{margin-left:0!important;width:100%!important;max-width:100%!important;}
  .sidebar-toggle{display:none!important;}
  .mobile-menu{display:inline-flex!important;}
  .dashboard-modern-grid,
  .dashboard-finance-grid,
  .dashboard-finance-grid.modern,
  .insight-grid,
  .kpi-modern-grid,
  .portal-kpi-grid,
  .portal-modern-sections{grid-template-columns:1fr!important;}
  .chart-main canvas,.chart-side canvas{height:245px!important;max-height:245px!important;}
  .dashboard-finance-grid .chart-wide canvas,.dashboard-finance-grid .chart-category canvas{height:260px!important;max-height:260px!important;}
}


/* =========================================================
   VELOJA V10.3 - Ajuste final menu inferior + tema cliente
   ========================================================= */
@media (min-width: 901px) {
  body:not(.login-light-only) .sidebar-toggle {
    display: inline-flex !important;
    position: fixed !important;
    left: calc((var(--sidebar-expanded, 280px) / 2) - 24px) !important;
    right: auto !important;
    top: auto !important;
    bottom: 18px !important;
    width: 48px !important;
    height: 48px !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 999px !important;
    border: 1px solid rgba(255,255,255,.18) !important;
    background: linear-gradient(135deg, #2375FF, #1E49F2) !important;
    color: #FFFFFF !important;
    box-shadow: 0 16px 34px rgba(8, 29, 74, .34) !important;
    cursor: pointer !important;
    z-index: 3600 !important;
    transform: none !important;
  }
  body:not(.login-light-only) .sidebar-toggle:hover {
    filter: brightness(1.06);
    transform: translateY(-1px) !important;
  }
  body.sidebar-collapsed:not(.login-light-only) .sidebar-toggle {
    left: calc((var(--sidebar-collapsed, 78px) / 2) - 24px) !important;
    bottom: 18px !important;
    top: auto !important;
  }
  body.sidebar-collapsed:not(.login-light-only) .collapse-icon { display: none !important; }
  body.sidebar-collapsed:not(.login-light-only) .expand-icon { display: inline !important; }
  body:not(.sidebar-collapsed):not(.login-light-only) .collapse-icon { display: inline !important; }
  body:not(.sidebar-collapsed):not(.login-light-only) .expand-icon { display: none !important; }
  body:not(.login-light-only) .sidebar { padding-bottom: 92px !important; }
}
@media (max-width: 900px) {
  body:not(.login-light-only) .sidebar-toggle { display: none !important; }
}

.portal-theme-toggle {
  border: 1px solid rgba(35,117,255,.18) !important;
  background: #eef4ff !important;
  color: #1e3a8a !important;
  min-width: 42px;
  height: 38px;
  padding: 0 12px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.portal-theme-toggle .theme-moon { display: inline; }
.portal-theme-toggle .theme-sun { display: none; }
html.dark-mode .portal-theme-toggle {
  background: rgba(37,99,235,.18) !important;
  color: #f8fafc !important;
  border-color: rgba(191,219,254,.24) !important;
}
html.dark-mode .portal-theme-toggle .theme-moon { display: none; }
html.dark-mode .portal-theme-toggle .theme-sun { display: inline; }

html.dark-mode .portal-body,
html.dark-mode body.portal-body {
  background: radial-gradient(circle at top left, rgba(35,117,255,.20), transparent 34%), #07152f !important;
  color: #e5edff !important;
}
html.dark-mode .portal-topbar {
  background: rgba(8,29,74,.92) !important;
  border-color: rgba(148,163,184,.20) !important;
}
html.dark-mode .portal-brand strong,
html.dark-mode .portal-content h1,
html.dark-mode .portal-content h2,
html.dark-mode .portal-content h3,
html.dark-mode .portal-content strong {
  color: #ffffff !important;
}
html.dark-mode .portal-brand span,
html.dark-mode .portal-content p,
html.dark-mode .portal-list-item span,
html.dark-mode .portal-kpi-card span {
  color: #b8c7e6 !important;
}
html.dark-mode .portal-nav a {
  background: rgba(35,117,255,.16) !important;
  color: #dbeafe !important;
  border: 1px solid rgba(191,219,254,.12) !important;
}
html.dark-mode .portal-nav a:hover { background: rgba(35,117,255,.28) !important; }
html.dark-mode .portal-kpi-card,
html.dark-mode .portal-finance-card,
html.dark-mode .portal-finance-table-card,
html.dark-mode .portal-content .card,
html.dark-mode .portal-content .table-wrap {
  background: rgba(8,29,74,.78) !important;
  border-color: rgba(148,163,184,.20) !important;
  color: #e5edff !important;
  box-shadow: 0 18px 40px rgba(0,0,0,.24) !important;
}
html.dark-mode .portal-list-item { border-color: rgba(148,163,184,.18) !important; }
html.dark-mode .portal-content table th {
  background: rgba(15,23,42,.86) !important;
  color: #dbeafe !important;
}
html.dark-mode .portal-content table td {
  color: #e5edff !important;
  border-color: rgba(148,163,184,.16) !important;
}
html.dark-mode .portal-content input,
html.dark-mode .portal-content select,
html.dark-mode .portal-content textarea {
  background: rgba(15,23,42,.88) !important;
  color: #f8fafc !important;
  border-color: rgba(148,163,184,.26) !important;
}
html.dark-mode .portal-content input::placeholder,
html.dark-mode .portal-content textarea::placeholder { color: #94a3b8 !important; }
html.dark-mode .portal-content .h4-footer,
html.dark-mode .portal-content .h4-footer span,
html.dark-mode .portal-content .h4-footer strong { color: #ffffff !important; }

/* =========================================================
   VELOJA V11 - acabamento visual, dropdowns e comunicados
   ========================================================= */
:root{
  --veloja-radius:18px;
  --veloja-shadow:0 18px 45px rgba(8,29,74,.10);
}
.card, .modal, .report-card-pro, .portal-kpi-card{
  border-radius: var(--veloja-radius);
  box-shadow: var(--veloja-shadow);
}
.module-hero.slim{
  display:flex;align-items:center;justify-content:space-between;gap:24px;
  padding:26px 28px;margin-bottom:22px;border-radius:24px;
  background:linear-gradient(135deg,#081D4A 0%,#1E49F2 52%,#2375FF 100%);
  color:#fff;overflow:hidden;position:relative;
}
.module-hero.slim:after{content:"";position:absolute;right:-80px;top:-80px;width:230px;height:230px;border-radius:50%;background:rgba(255,255,255,.16)}
.module-hero.slim h1{margin:6px 0;font-size:30px;letter-spacing:-.03em;color:#fff}.module-hero.slim p{max-width:820px;color:rgba(255,255,255,.86);font-weight:600}.module-hero.slim .eyebrow{color:rgba(255,255,255,.78)}
.filters-card{margin-bottom:18px}.section-head.clean{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:16px}.section-head.clean h2{margin:2px 0 0}.row-between{display:flex;align-items:center;justify-content:space-between;gap:12px}
.form label{gap:7px}.form input,.form select,.form textarea,.search-select-button{transition:border-color .16s ease, box-shadow .16s ease, background .16s ease}.form input:focus,.form select:focus,.form textarea:focus,.search-select.open .search-select-button{outline:0;border-color:var(--primary);box-shadow:0 0 0 4px rgba(35,117,255,.16)}
.btn{transition:transform .16s ease, box-shadow .16s ease, background .16s ease}.btn:hover{transform:translateY(-1px)}.btn.danger{background:#fee2e2;color:#991b1b;border:1px solid #fecaca}.btn.danger:hover{background:#fecaca}
.table th{letter-spacing:.045em}.table td{vertical-align:middle}.actions{white-space:nowrap;display:flex;align-items:center;gap:6px;flex-wrap:wrap}

/* Dropdowns pesquisáveis: remove espaços em branco indevidos e mantém busca acessível */
.search-select{position:relative;z-index:1}.search-select.open{z-index:80}.native-select-hidden{display:none!important}.search-select-button{height:44px;display:flex;align-items:center;background:var(--panel);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.search-select-input{top:7px!important;display:none!important;height:38px!important;z-index:82!important}.search-select-list{top:calc(100% + 7px)!important;padding:50px 6px 6px!important;max-height:238px!important;z-index:81!important;overscroll-behavior:contain}.search-select.open .search-select-input{display:block!important}.search-select.open .search-select-list{display:block!important}.search-select-option{min-height:38px;display:flex;align-items:center}.search-select-empty{min-height:38px;display:flex;align-items:center}.modal .search-select-list{max-height:210px!important}.filters .search-select{min-width:0;width:100%}
.dark-mode .search-select-list,.dark-mode .search-select-input,.dark-mode .search-select-button{background:#0b1733!important;color:#eaf1ff!important;border-color:rgba(148,163,184,.25)!important}.dark-mode .search-select-option:hover,.dark-mode .search-select-option.selected{background:rgba(35,117,255,.18)!important;color:#fff!important}

/* Catálogo de relatórios */
.reports-catalog{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}.report-card-pro{background:var(--panel);border:1px solid var(--line);padding:22px;display:flex;flex-direction:column;gap:12px;min-height:210px}.report-card-pro h2{font-size:20px;margin:0;color:var(--text)}.report-card-pro p{color:var(--muted);line-height:1.45;margin:0;flex:1}.report-top{display:flex;align-items:center;justify-content:space-between}.report-dot{width:10px;height:10px;border-radius:999px;background:linear-gradient(135deg,#2375FF,#1E49F2);box-shadow:0 0 0 6px rgba(35,117,255,.12)}.report-filter-modal .muted{margin-top:-4px;margin-bottom:14px}.span2{grid-column:span 2}.span3{grid-column:1/-1}

/* Comunicados */
.announcement-card{border-left:4px solid #2375FF}.announcement-card.priority-baixa{border-left-color:#2375FF}.announcement-card.priority-media{border-left-color:#facc15}.announcement-card.priority-alta{border-left-color:#f97316}.announcement-card.priority-critica{border-left-color:#ef4444}.badge.priority-baixa{background:#dbeafe;color:#1d4ed8}.badge.priority-media{background:#fef3c7;color:#92400e}.badge.priority-alta{background:#ffedd5;color:#9a3412}.badge.priority-critica{background:#fee2e2;color:#991b1b}.portal-announcements-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.portal-list-item.announcement-card{padding-left:14px}
.dark-mode .badge.priority-baixa{background:rgba(35,117,255,.18);color:#bfdbfe}.dark-mode .badge.priority-media{background:rgba(250,204,21,.16);color:#fde68a}.dark-mode .badge.priority-alta{background:rgba(249,115,22,.16);color:#fed7aa}.dark-mode .badge.priority-critica{background:rgba(239,68,68,.18);color:#fecaca}

/* Refinos gerais de tema escuro */
.dark-mode .card,.dark-mode .report-card-pro,.dark-mode .modal{box-shadow:0 18px 45px rgba(0,0,0,.28)}.dark-mode .module-hero.slim{box-shadow:0 18px 45px rgba(0,0,0,.32)}.dark-mode .table th{background:rgba(148,163,184,.10)}.dark-mode .btn.danger{background:rgba(239,68,68,.14);color:#fecaca;border-color:rgba(239,68,68,.28)}

@media(max-width:1100px){.reports-catalog{grid-template-columns:repeat(2,minmax(0,1fr))}.module-hero.slim{align-items:flex-start;flex-direction:column}.span2,.span3{grid-column:1/-1}}
@media(max-width:720px){.reports-catalog,.portal-announcements-grid{grid-template-columns:1fr}.report-card-pro{min-height:auto}.module-hero.slim{padding:22px}.module-hero.slim h1{font-size:25px}.actions{white-space:normal}.search-select-list{position:fixed!important;left:16px!important;right:16px!important;top:18vh!important;max-height:62vh!important}.search-select-input{position:fixed!important;left:24px!important;right:24px!important;top:calc(18vh + 8px)!important;width:calc(100% - 48px)!important}}

/* =========================================================
   VELOJA V11.1 - Correção definitiva de dropdowns e CTA de comunicados
   - Remove espaço em branco dos dropdowns pesquisáveis.
   - Campo de busca substitui o botão enquanto o dropdown está aberto.
   - Lista abre imediatamente abaixo, sem padding superior artificial.
   - Garante que botões dentro do hero fiquem clicáveis acima dos elementos decorativos.
   ========================================================= */
.module-hero.slim > *{
  position:relative;
  z-index:2;
}
.module-hero.slim:after{
  pointer-events:none!important;
  z-index:1;
}
.module-hero.slim .btn,
.module-hero.slim button,
.module-hero.slim a{
  position:relative;
  z-index:3;
  pointer-events:auto;
}

.search-select{
  position:relative!important;
  z-index:1;
  width:100%;
}
.search-select.open{
  z-index:999!important;
}
.native-select-hidden{
  display:none!important;
}
.search-select-button{
  width:100%!important;
  height:44px!important;
  min-height:44px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:flex-start!important;
  border:1px solid var(--line)!important;
  border-radius:14px!important;
  background:var(--panel)!important;
  color:var(--text)!important;
  font:inherit!important;
  font-weight:700!important;
  text-align:left!important;
  padding:0 38px 0 14px!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  box-shadow:none!important;
}
.search-select.open .search-select-button{
  display:none!important;
}
.search-select-button:after{
  content:'⌄'!important;
  position:absolute!important;
  right:14px!important;
  top:50%!important;
  transform:translateY(-50%)!important;
  color:var(--muted)!important;
  font-weight:900!important;
}
.search-select-input{
  display:none!important;
  position:relative!important;
  inset:auto!important;
  top:auto!important;
  left:auto!important;
  right:auto!important;
  width:100%!important;
  height:44px!important;
  min-height:44px!important;
  z-index:1001!important;
  border:1px solid var(--primary)!important;
  border-radius:14px!important;
  padding:0 14px!important;
  font:inherit!important;
  font-weight:700!important;
  background:var(--panel)!important;
  color:var(--text)!important;
  box-shadow:0 0 0 4px rgba(35,117,255,.14)!important;
}
.search-select.open .search-select-input{
  display:block!important;
}
.search-select-list{
  display:none!important;
  position:absolute!important;
  left:0!important;
  right:0!important;
  top:calc(100% + 8px)!important;
  width:100%!important;
  max-height:236px!important;
  overflow:auto!important;
  padding:6px!important;
  margin:0!important;
  z-index:1000!important;
  background:var(--panel)!important;
  border:1px solid var(--line)!important;
  border-radius:16px!important;
  box-shadow:0 20px 44px rgba(8,29,74,.20)!important;
  overscroll-behavior:contain!important;
}
.search-select.open .search-select-list{
  display:block!important;
}
.search-select-option,
.search-select-empty{
  width:100%!important;
  min-height:40px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:flex-start!important;
  border:0!important;
  border-radius:11px!important;
  background:transparent!important;
  color:var(--text)!important;
  text-align:left!important;
  font:inherit!important;
  font-weight:700!important;
  padding:9px 12px!important;
  box-shadow:none!important;
}
.search-select-option:hover,
.search-select-option.selected{
  background:#EAF2FF!important;
  color:var(--primary)!important;
}
.search-select-empty{
  color:var(--muted)!important;
  cursor:default!important;
}
.filters .search-select,
.filters-form .search-select,
.form .search-select{
  min-width:0!important;
  width:100%!important;
}
.modal .search-select.open{
  z-index:1200!important;
}
.modal .search-select-list{
  max-height:220px!important;
}
html.dark-mode .search-select-button,
html.dark-mode .search-select-input,
html.dark-mode .search-select-list{
  background:#0B1733!important;
  color:#EAF2FF!important;
  border-color:rgba(148,163,184,.28)!important;
}
html.dark-mode .search-select-input{
  border-color:#2375FF!important;
  box-shadow:0 0 0 4px rgba(35,117,255,.20)!important;
}
html.dark-mode .search-select-option,
html.dark-mode .search-select-empty{
  color:#EAF2FF!important;
}
html.dark-mode .search-select-option:hover,
html.dark-mode .search-select-option.selected{
  background:rgba(35,117,255,.20)!important;
  color:#FFFFFF!important;
}

@media(max-width:720px){
  .search-select.open{
    z-index:3000!important;
  }
  .search-select.open .search-select-input{
    position:fixed!important;
    left:16px!important;
    right:16px!important;
    top:16vh!important;
    width:calc(100% - 32px)!important;
  }
  .search-select.open .search-select-list{
    position:fixed!important;
    left:16px!important;
    right:16px!important;
    top:calc(16vh + 52px)!important;
    width:calc(100% - 32px)!important;
    max-height:58vh!important;
  }
}

/* =========================================================
   VELOJA V11.2 - Correção de modal de relatórios
   - Modal com fundo sólido, sem transparência sobre os cards.
   - Backdrop com blur e contraste adequado.
   - Formulário de filtros mais legível no tema claro/escuro.
   ========================================================= */
.modal-backdrop.open{
  display:flex!important;
  background:rgba(8,29,74,.54)!important;
  backdrop-filter:blur(4px)!important;
  -webkit-backdrop-filter:blur(4px)!important;
  z-index:5000!important;
}
.modal.report-filter-modal,
.report-filter-modal{
  width:min(1040px,calc(100vw - 36px))!important;
  max-height:calc(100vh - 72px)!important;
  overflow:auto!important;
  background:#FFFFFF!important;
  color:#081D4A!important;
  border:1px solid rgba(35,117,255,.18)!important;
  border-radius:24px!important;
  box-shadow:0 34px 90px rgba(8,29,74,.38)!important;
  padding:28px!important;
  opacity:1!important;
  isolation:isolate!important;
}
.report-filter-modal .modal-head{
  position:sticky;
  top:0;
  z-index:5;
  background:#FFFFFF;
  padding-bottom:14px;
  border-bottom:1px solid rgba(8,29,74,.08);
}
.report-filter-modal .modal-head button{
  width:42px!important;
  height:42px!important;
  min-width:42px!important;
  border-radius:999px!important;
  border:1px solid rgba(8,29,74,.10)!important;
  background:#F4F6FA!important;
  color:#081D4A!important;
  box-shadow:none!important;
}
.report-filter-modal .modal-head h2,
.report-filter-modal h2{
  color:#081D4A!important;
}
.report-filter-modal .muted{
  color:#52627A!important;
}
.report-filter-modal label{
  color:#25405F!important;
  font-weight:800!important;
}
.report-filter-modal input,
.report-filter-modal select,
.report-filter-modal textarea,
.report-filter-modal .search-select-button,
.report-filter-modal .search-select-input,
.report-filter-modal .search-select-list{
  background:#FFFFFF!important;
  color:#081D4A!important;
  border-color:#D7E1F2!important;
}
.report-filter-modal .modal-actions{
  display:flex!important;
  justify-content:flex-start!important;
  gap:10px!important;
  padding-top:8px!important;
}
html.dark-mode .modal.report-filter-modal,
html.dark-mode .report-filter-modal{
  background:#0B1733!important;
  color:#EAF2FF!important;
  border-color:rgba(148,163,184,.22)!important;
  box-shadow:0 34px 90px rgba(0,0,0,.56)!important;
}
html.dark-mode .report-filter-modal .modal-head{
  background:#0B1733!important;
  border-bottom-color:rgba(148,163,184,.16)!important;
}
html.dark-mode .report-filter-modal .modal-head button{
  background:#111F3E!important;
  color:#FFFFFF!important;
  border-color:rgba(148,163,184,.24)!important;
}
html.dark-mode .report-filter-modal .modal-head h2,
html.dark-mode .report-filter-modal h2,
html.dark-mode .report-filter-modal label{
  color:#EAF2FF!important;
}
html.dark-mode .report-filter-modal .muted{
  color:#AFC2E4!important;
}
html.dark-mode .report-filter-modal input,
html.dark-mode .report-filter-modal select,
html.dark-mode .report-filter-modal textarea,
html.dark-mode .report-filter-modal .search-select-button,
html.dark-mode .report-filter-modal .search-select-input,
html.dark-mode .report-filter-modal .search-select-list{
  background:#111F3E!important;
  color:#EAF2FF!important;
  border-color:rgba(148,163,184,.28)!important;
}
@media(max-width:720px){
  .modal.report-filter-modal,
  .report-filter-modal{
    width:calc(100vw - 20px)!important;
    max-height:calc(100vh - 20px)!important;
    padding:20px!important;
    border-radius:20px!important;
  }
  .report-filter-modal .modal-actions .btn{
    flex:1 1 auto!important;
  }
}