/* ================================================================
   DOAR DIGITAL — Custom Theme Override
   Refined SaaS aesthetic over Velzon Bootstrap 5
   ================================================================ */

/* ----------------------------------------------------------------
   1. DESIGN TOKENS
   ---------------------------------------------------------------- */
:root {
    /* Brand */
    --dd-primary: #00128D;
    --dd-primary-soft: rgba(0, 18, 141, 0.08);
    --dd-primary-hover: #000f73;
    --dd-accent: #0d9488;
    --dd-accent-soft: rgba(13, 148, 136, 0.08);

    /* Semantic */
    --dd-success: #059669;
    --dd-success-soft: rgba(5, 150, 105, 0.08);
    --dd-danger: #dc2626;
    --dd-danger-soft: rgba(220, 38, 38, 0.08);
    --dd-warning: #d97706;
    --dd-warning-soft: rgba(217, 119, 6, 0.08);
    --dd-info: #0284c7;
    --dd-info-soft: rgba(2, 132, 199, 0.08);

    /* Neutrals */
    --dd-bg: #f6f7f9;
    --dd-surface: #ffffff;
    --dd-surface-raised: #ffffff;
    --dd-border: #e5e7eb;
    --dd-border-light: #f0f1f3;
    --dd-text: #111827;
    --dd-text-secondary: #6b7280;
    --dd-text-muted: #9ca3af;

    /* Sidebar */
    --dd-sidebar-bg: #000833;
    --dd-sidebar-item: #94a3b8;
    --dd-sidebar-item-hover: #e2e8f0;
    --dd-sidebar-item-active: #ffffff;
    --dd-sidebar-item-active-bg: rgba(255, 255, 255, 0.08);
    --dd-sidebar-divider: rgba(255, 255, 255, 0.06);
    --dd-sidebar-width: 210px;

    /* Shadows */
    --dd-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.04);
    --dd-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
    --dd-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.06), 0 1px 3px rgba(0, 0, 0, 0.04);
    --dd-shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.08), 0 4px 8px rgba(0, 0, 0, 0.04);

    /* Radius */
    --dd-radius-sm: 6px;
    --dd-radius: 10px;
    --dd-radius-lg: 14px;
    --dd-radius-xl: 20px;

    /* Transitions */
    --dd-transition: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    --dd-transition-slow: 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}


/* ----------------------------------------------------------------
   2. GLOBAL FOUNDATIONS
   ---------------------------------------------------------------- */
body {
    background-color: var(--dd-bg) !important;
    color: var(--dd-text);
    font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    letter-spacing: -0.01em;
}

/* Google Font — loaded in head-css.php */

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-weight: 600;
    color: var(--dd-text);
    letter-spacing: -0.02em;
}

.text-muted {
    color: var(--dd-text-secondary) !important;
}

a {
    transition: color var(--dd-transition);
}

::selection {
    background: var(--dd-primary);
    color: #fff;
}


/* ----------------------------------------------------------------
   3. TOPBAR / HEADER
   ---------------------------------------------------------------- */
#page-topbar {
    background: var(--dd-surface) !important;
    border-bottom: 1px solid var(--dd-border) !important;
    box-shadow: none !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.header-item {
    transition: background var(--dd-transition), color var(--dd-transition);
}

.header-item:hover {
    background: transparent !important;
}

/* Notification/whatsapp icon buttons */
.btn-topbar {
    width: 36px !important;
    height: 36px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: var(--dd-radius-sm) !important;
    transition: background var(--dd-transition) !important;
}

.btn-topbar:hover {
    background: var(--dd-bg) !important;
}

.topnav-hamburger {
    border-radius: var(--dd-radius-sm) !important;
    transition: background var(--dd-transition) !important;
}

.topnav-hamburger:hover {
    background: var(--dd-primary-soft) !important;
}

/* Hamburger bars */
.hamburger-icon span {
    background-color: var(--dd-text) !important;
    border-radius: 2px;
    transition: all var(--dd-transition);
}


/* ----------------------------------------------------------------
   4. SIDEBAR
   ---------------------------------------------------------------- */
/* Override Velzon core color vars — higher specificity to beat [data-bs-theme=light] */
:root,
:root[data-bs-theme="light"],
[data-bs-theme="light"] {
    --vz-primary: #00128D;
    --vz-primary-rgb: 0, 18, 141;
    --vz-success: #059669;
    --vz-success-rgb: 5, 150, 105;
    --vz-danger: #dc2626;
    --vz-danger-rgb: 220, 38, 38;
    --vz-warning: #d97706;
    --vz-warning-rgb: 217, 119, 6;
    --vz-info: #0284c7;
    --vz-info-rgb: 2, 132, 199;
    --vz-secondary: #6366f1;
    --vz-secondary-rgb: 99, 102, 241;
}

/* Override Velzon sidebar — CSS vars don't support !important,
   so we set vars AND apply backgrounds directly on elements */
:root,
:root[data-sidebar="dark"],
[data-sidebar="dark"] {
    --vz-vertical-menu-width: 240px;
    --vz-vertical-menu-bg: #000833;
    --vz-vertical-menu-border: transparent;
    --vz-vertical-menu-item-color: #94a3b8;
    --vz-vertical-menu-item-hover-color: #e2e8f0;
    --vz-vertical-menu-item-active-color: #fff;
    --vz-vertical-menu-item-active-bg: rgba(255, 255, 255, 0.08);
    --vz-vertical-menu-item-bg: rgba(255, 255, 255, 0.08);
    --vz-vertical-menu-sub-item-color: #94a3b8;
    --vz-vertical-menu-sub-item-hover-color: #fff;
    --vz-vertical-menu-sub-item-active-color: #fff;
    --vz-vertical-menu-title-color: #64748b;
    --vz-vertical-menu-box-shadow: none;
    --vz-vertical-menu-dropdown-box-shadow: 4px 4px 20px rgba(0, 0, 0, 0.25);
}

/* Direct background on EVERY sidebar element — bypasses var cascade */
.navbar-menu,
.app-menu,
.sidebar-background,
.navbar-brand-box {
    background: #000833 !important;
    background-image: none !important;
    border-right: none !important;
}

.navbar-brand-box {
    border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
}

/* Nested popup fix — target by class added via JS + by ID */
.dd-nested-popup {
    background: #000833 !important;
    background-color: #000833 !important;
    border-radius: 8px !important;
    box-shadow: 8px 4px 24px rgba(0, 0, 0, 0.3) !important;
}

#sideAguaLuz,
#sideImpostoRenda {
    background: #000833 !important;
    background-color: #000833 !important;
    border-radius: 8px !important;
    box-shadow: 8px 4px 24px rgba(0, 0, 0, 0.3) !important;
}

/* Menu titles */
.menu-title {
    color: var(--dd-text-muted) !important;
    font-size: 0.65rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    padding: 20px 16px 6px !important;
}

/* Menu items — only apply custom spacing in expanded mode */
.navbar-nav .nav-link {
    color: var(--dd-sidebar-item) !important;
    font-size: 0.8125rem !important;
    font-weight: 450 !important;
    transition: all var(--dd-transition) !important;
}

[data-sidebar-size="lg"] .navbar-nav .nav-link {
    padding: 9px 14px !important;
    margin: 2px 10px !important;
    border-radius: var(--dd-radius-sm) !important;
}

[data-sidebar-size="lg"] .navbar-nav .nav-link:hover {
    color: var(--dd-sidebar-item-hover) !important;
    background: var(--dd-sidebar-item-active-bg) !important;
}

/* Sub-item active — highlighted */
[data-sidebar-size="lg"] .navbar-nav .nav-sm .nav-link.active {
    color: var(--dd-sidebar-item-active) !important;
    background: var(--dd-sidebar-item-active-bg) !important;
    font-weight: 500 !important;
}

/* Parent toggle when expanded — just brighter text, no bg */
[data-sidebar-size="lg"] .navbar-nav > .nav-item > .nav-link.active[data-bs-toggle="collapse"],
[data-sidebar-size="lg"] .navbar-nav > .nav-item > a.menu-link.active[data-bs-toggle="collapse"] {
    color: var(--dd-sidebar-item-active) !important;
    background: transparent !important;
    font-weight: 500 !important;
}

/* Direct link active (no submenu) — keep bg highlight */
[data-sidebar-size="lg"] .navbar-nav > .nav-item > .nav-link.active:not([data-bs-toggle]),
[data-sidebar-size="lg"] .navbar-nav > .nav-item > a.menu-link.active:not([data-bs-toggle]) {
    color: var(--dd-sidebar-item-active) !important;
    background: var(--dd-sidebar-item-active-bg) !important;
    font-weight: 500 !important;
}

/* Menu icons */
.navbar-nav .nav-link .ri,
.navbar-nav .nav-link [class*="ri-"],
.navbar-nav .menu-link i {
    font-size: 1.1rem !important;
    opacity: 0.7;
    transition: opacity var(--dd-transition);
}

[data-sidebar-size="lg"] .navbar-nav .menu-link i {
    width: 20px;
}

.navbar-nav .nav-link:hover i,
.navbar-nav .nav-link.active i {
    opacity: 1;
}

/* Submenu items — expanded mode */
[data-sidebar-size="lg"] .nav-sm .nav-link {
    font-size: 0.775rem !important;
    padding: 7px 28px 7px 32px !important;
    color: var(--dd-sidebar-item) !important;
    margin: 2px 10px !important;
    position: relative !important;
    border-radius: var(--dd-radius-sm) !important;
    transition: all 0.15s ease !important;
}

/* Hide Velzon's submenu dash indicator */
[data-sidebar-size="lg"] .nav-sm .nav-link:before {
    display: none !important;
}

[data-sidebar-size="lg"] .nav-sm .nav-link:hover {
    color: #fff !important;
    background: rgba(255, 255, 255, 0.08) !important;
}

[data-sidebar-size="lg"] .nav-sm .nav-link.active {
    color: #fff !important;
}

/* Collapse arrow */
.navbar-nav .menu-link[data-bs-toggle="collapse"]::after {
    color: var(--dd-sidebar-item) !important;
    transition: transform var(--dd-transition) !important;
}



/* ----------------------------------------------------------------
   5. CARDS
   ---------------------------------------------------------------- */
.card {
    background: var(--dd-surface) !important;
    border: 1px solid var(--dd-border-light) !important;
    border-radius: var(--dd-radius) !important;
    box-shadow: var(--dd-shadow-xs) !important;
    transition: box-shadow var(--dd-transition-slow), transform var(--dd-transition-slow);
}

.card:hover {
    box-shadow: var(--dd-shadow-sm) !important;
}

.card-header {
    background: transparent !important;
    border-bottom: 1px solid var(--dd-border-light) !important;
    padding: 16px 20px !important;
}

.card-body {
    padding: 20px !important;
}

.card-title {
    font-size: 0.875rem !important;
    font-weight: 600 !important;
    color: var(--dd-text) !important;
    letter-spacing: -0.01em;
}

.card-footer {
    background: transparent !important;
    border-top: 1px solid var(--dd-border-light) !important;
}


/* ----------------------------------------------------------------
   6. BUTTONS
   ---------------------------------------------------------------- */
.btn {
    font-weight: 500 !important;
    font-size: 0.8125rem !important;
    border-radius: var(--dd-radius-sm) !important;
    padding: 8px 16px !important;
    transition: all var(--dd-transition) !important;
    letter-spacing: -0.01em;
    border: none !important;
}

.btn:active {
    transform: scale(0.97);
}

/* btn-group: remove inner border-radius */
.btn-group > .btn:not(:first-child):not(:last-child) {
    border-radius: 0 !important;
}

.btn-group > .btn:first-child:not(:last-child) {
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}

.btn-group > .btn:last-child:not(:first-child) {
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
}

/* Único botão dentro de btn-group (mesmo com dropdown-menu irmão): mantém radius */
.btn-group > .btn:first-of-type:last-of-type {
    border-radius: var(--dd-radius-sm) !important;
}

/* Primary */
.btn-primary {
    background: var(--dd-primary) !important;
    box-shadow: 0 1px 2px rgba(0, 18, 141, 0.3);
}
.btn-primary:hover {
    background: var(--dd-primary-hover) !important;
    box-shadow: 0 2px 6px rgba(0, 18, 141, 0.35);
}

/* Success */
.btn-success {
    background: var(--dd-success) !important;
    box-shadow: 0 1px 2px rgba(5, 150, 105, 0.3);
}
.btn-success:hover {
    background: #047857 !important;
    box-shadow: 0 2px 6px rgba(5, 150, 105, 0.35);
}

/* Danger */
.btn-danger {
    background: var(--dd-danger) !important;
    box-shadow: 0 1px 2px rgba(220, 38, 38, 0.3);
}
.btn-danger:hover {
    background: #b91c1c !important;
}

/* Warning */
.btn-warning {
    background: var(--dd-warning) !important;
    color: #fff !important;
    box-shadow: 0 1px 2px rgba(217, 119, 6, 0.3);
}
.btn-warning:hover {
    background: #b45309 !important;
}

/* Info */
.btn-info {
    background: var(--dd-info) !important;
    color: #fff !important;
}

/* Secondary / Light */
.btn-secondary,
.btn-light {
    background: var(--dd-bg) !important;
    color: var(--dd-text) !important;
    border: 1px solid var(--dd-border) !important;
    box-shadow: none !important;
}
.btn-secondary:hover,
.btn-light:hover {
    background: var(--dd-border-light) !important;
    border-color: var(--dd-border) !important;
}

/* Soft variants */
.btn-soft-primary {
    background: var(--dd-primary-soft) !important;
    color: var(--dd-primary) !important;
    border: none !important;
}
.btn-soft-primary:hover {
    background: var(--dd-primary) !important;
    color: #fff !important;
}

.btn-soft-success {
    background: var(--dd-success-soft) !important;
    color: var(--dd-success) !important;
}
.btn-soft-success:hover {
    background: var(--dd-success) !important;
    color: #fff !important;
}

.btn-soft-danger {
    background: var(--dd-danger-soft) !important;
    color: var(--dd-danger) !important;
}
.btn-soft-danger:hover {
    background: var(--dd-danger) !important;
    color: #fff !important;
}

.btn-soft-warning {
    background: var(--dd-warning-soft) !important;
    color: var(--dd-warning) !important;
}
.btn-soft-warning:hover {
    background: var(--dd-warning) !important;
    color: #fff !important;
}

.btn-soft-info {
    background: var(--dd-info-soft) !important;
    color: var(--dd-info) !important;
}
.btn-soft-info:hover {
    background: var(--dd-info) !important;
    color: #fff !important;
}

/* Outline */
.btn-outline-primary {
    border: 1px solid var(--dd-primary) !important;
    color: var(--dd-primary) !important;
    background: transparent !important;
}
.btn-outline-primary:hover {
    background: var(--dd-primary) !important;
    color: #fff !important;
}

.btn-outline-secondary {
    border: 1px solid var(--dd-border) !important;
    color: var(--dd-text-secondary) !important;
    background: transparent !important;
}
.btn-outline-secondary:hover {
    background: var(--dd-bg) !important;
    color: var(--dd-text) !important;
    border-color: var(--dd-text-secondary) !important;
}

.btn-outline-info {
    border: 1px solid var(--dd-info) !important;
    color: var(--dd-info) !important;
    background: transparent !important;
}

/* Checkout: radio/check button toggle styles */
.btn-check:checked + .btn-outline-secondary {
    background: var(--dd-primary) !important;
    border-color: var(--dd-primary) !important;
    color: #fff !important;
}

.btn-check:checked + .btn-outline-primary {
    background: var(--dd-primary) !important;
    border-color: var(--dd-primary) !important;
    color: #fff !important;
}

/* Button sizes */
.btn-sm {
    padding: 5px 12px !important;
    font-size: 0.75rem !important;
}

.btn-lg {
    padding: 12px 24px !important;
    font-size: 0.9375rem !important;
}

/* Icon buttons */
.btn-icon {
    width: 36px;
    height: 36px;
    padding: 0 !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--dd-radius-sm) !important;
}


/* ----------------------------------------------------------------
   7. TABLES
   ---------------------------------------------------------------- */
.table {
    font-size: 0.8125rem;
    color: var(--dd-text);
}

.table > :not(caption) > * > * {
    padding: 12px 16px !important;
    border-bottom-color: var(--dd-border-light) !important;
}

.table thead th {
    font-weight: 600 !important;
    font-size: 0.7rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    color: var(--dd-text-secondary) !important;
    background: var(--dd-bg) !important;
    border-bottom: 2px solid var(--dd-border) !important;
    white-space: nowrap;
}

.table tbody tr {
    transition: background var(--dd-transition);
}

.table tbody tr:hover {
    background: var(--dd-primary-soft) !important;
}

.table-striped > tbody > tr:nth-of-type(odd) > * {
    background-color: rgba(0, 0, 0, 0.015) !important;
}

/* Grid.js overrides */
.gridjs-wrapper {
    border-radius: var(--dd-radius) !important;
    border: 1px solid var(--dd-border-light) !important;
}

.gridjs-table {
    font-size: 0.8125rem !important;
}

.gridjs-th {
    background: var(--dd-bg) !important;
    border-color: var(--dd-border) !important;
    font-weight: 600 !important;
    font-size: 0.7rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    color: var(--dd-text-secondary) !important;
}

.gridjs-td {
    border-color: var(--dd-border-light) !important;
}

.gridjs-tr:hover td {
    background: var(--dd-primary-soft) !important;
}


/* ----------------------------------------------------------------
   8. FORMS
   ---------------------------------------------------------------- */
.form-control,
.form-select {
    border: 1px solid var(--dd-border) !important;
    border-radius: var(--dd-radius-sm) !important;
    font-size: 0.8125rem !important;
    padding: 9px 14px !important;
    color: var(--dd-text) !important;
    background-color: var(--dd-surface) !important;
    transition: border-color var(--dd-transition), box-shadow var(--dd-transition) !important;
}

.form-control:focus,
.form-select:focus {
    border-color: var(--dd-primary) !important;
    box-shadow: 0 0 0 3px var(--dd-primary-soft) !important;
    outline: none !important;
}

.form-control::placeholder {
    color: var(--dd-text-muted) !important;
    font-weight: 400;
}

.form-label {
    font-size: 0.775rem !important;
    font-weight: 550 !important;
    color: var(--dd-text) !important;
    margin-bottom: 6px !important;
}

.form-check-input:checked {
    background-color: var(--dd-primary) !important;
    border-color: var(--dd-primary) !important;
}

.form-check-input:focus {
    box-shadow: 0 0 0 3px var(--dd-primary-soft) !important;
}

/* Input groups */
.input-group-text {
    background: var(--dd-bg) !important;
    border-color: var(--dd-border) !important;
    color: var(--dd-text-secondary) !important;
    font-size: 0.8125rem !important;
}

/* Choices.js */
.choices__inner {
    border: 1px solid var(--dd-border) !important;
    border-radius: var(--dd-radius-sm) !important;
    background: var(--dd-surface) !important;
    min-height: 40px !important;
    padding: 4px 8px !important;
    font-size: 0.8125rem !important;
}

.choices__inner:focus-within {
    border-color: var(--dd-primary) !important;
    box-shadow: 0 0 0 3px var(--dd-primary-soft) !important;
}


/* ----------------------------------------------------------------
   9. BADGES
   ---------------------------------------------------------------- */
.badge {
    font-weight: 550 !important;
    font-size: 0.6875rem !important;
    letter-spacing: 0.02em;
    padding: 4px 10px !important;
    border-radius: 100px !important;
}

.badge.bg-primary,
.bg-primary {
    background-color: var(--dd-primary) !important;
}

.badge.bg-success,
.bg-success {
    background-color: var(--dd-success) !important;
}

.badge.bg-danger,
.bg-danger {
    background-color: var(--dd-danger) !important;
}

.badge.bg-warning,
.bg-warning {
    background-color: var(--dd-warning) !important;
}

.badge.bg-info,
.bg-info {
    background-color: var(--dd-info) !important;
}

/* Soft badges */
.badge-soft-primary,
.badge.bg-primary-subtle {
    background-color: var(--dd-primary-soft) !important;
    color: var(--dd-primary) !important;
}

.badge-soft-success,
.badge.bg-success-subtle {
    background-color: var(--dd-success-soft) !important;
    color: var(--dd-success) !important;
}

.badge-soft-danger,
.badge.bg-danger-subtle {
    background-color: var(--dd-danger-soft) !important;
    color: var(--dd-danger) !important;
}

.badge-soft-warning,
.badge.bg-warning-subtle {
    background-color: var(--dd-warning-soft) !important;
    color: var(--dd-warning) !important;
}

.badge-soft-info,
.badge.bg-info-subtle {
    background-color: var(--dd-info-soft) !important;
    color: var(--dd-info) !important;
}


/* ----------------------------------------------------------------
   10. MODALS
   ---------------------------------------------------------------- */
.modal-content {
    border: none !important;
    border-radius: var(--dd-radius-lg) !important;
    box-shadow: var(--dd-shadow-lg) !important;
    overflow: hidden;
}

.modal-header {
    border-bottom: 1px solid var(--dd-border-light) !important;
    padding: 18px 24px !important;
}

.modal-title {
    font-size: 1rem !important;
    font-weight: 600 !important;
}

.modal-body {
    padding: 24px !important;
}

.modal-footer {
    border-top: 1px solid var(--dd-border-light) !important;
    padding: 16px 24px !important;
}

.modal-backdrop.show {
    opacity: 0.35 !important;
    background-color: #000 !important;
}

/* Ensure modals and offcanvas are above everything */
.modal {
    z-index: 9999 !important;
}

.modal-backdrop {
    z-index: 9998 !important;
}

.offcanvas {
    z-index: 9999 !important;
}

.offcanvas-backdrop {
    z-index: 9998 !important;
    opacity: 0.35 !important;
}

/* Offcanvas header — compact */
.offcanvas-header {
    padding: 12px 16px !important;
    min-height: 0 !important;
}

.offcanvas-title {
    font-size: 0.9rem !important;
    font-weight: 600 !important;
}

.offcanvas-body {
    font-size: 0.8125rem !important;
    padding: 12px 16px !important;
}

/* Compact spacing inside filter offcanvas */
.offcanvas-body .mb-3 {
    margin-bottom: 10px !important;
}

.offcanvas-body .form-label {
    margin-bottom: 4px !important;
    font-size: 0.75rem !important;
}

.offcanvas-body .form-control,
.offcanvas-body .form-select {
    padding: 7px 12px !important;
    font-size: 0.775rem !important;
}

.offcanvas-body .choices__inner {
    min-height: 34px !important;
    padding: 3px 8px !important;
}

/* Footer sticky at bottom */
.offcanvas-footer {
    padding: 10px 16px !important;
}

/* Choices.js dropdown inside modals/offcanvas must be on top */
.modal .choices__list--dropdown,
.offcanvas .choices__list--dropdown {
    z-index: 10000 !important;
}

/* Modal/offcanvas overflow fix */
.modal.show .modal-content,
.modal.show .modal-body {
    overflow: visible !important;
}

.btn-close {
    opacity: 0.4 !important;
    transition: opacity var(--dd-transition) !important;
}

.btn-close:hover {
    opacity: 0.8 !important;
}


/* ----------------------------------------------------------------
   11. TABS / NAV
   ---------------------------------------------------------------- */
.nav-tabs {
    border-bottom: 1px solid var(--dd-border) !important;
    gap: 0;
}

.nav-tabs .nav-link {
    font-size: 0.8125rem !important;
    font-weight: 500 !important;
    color: var(--dd-text-secondary) !important;
    border: none !important;
    border-bottom: 2px solid transparent !important;
    padding: 10px 18px !important;
    transition: all var(--dd-transition) !important;
    border-radius: 0 !important;
}

.nav-tabs .nav-link:hover {
    color: var(--dd-text) !important;
    border-bottom-color: var(--dd-border) !important;
}

.nav-tabs .nav-link.active {
    color: var(--dd-primary) !important;
    border-bottom-color: var(--dd-primary) !important;
    background: transparent !important;
    font-weight: 600 !important;
}


/* ----------------------------------------------------------------
   12. PAGINATION
   ---------------------------------------------------------------- */
.pagination {
    gap: 4px;
}

.page-link {
    border: 1px solid var(--dd-border) !important;
    border-radius: var(--dd-radius-sm) !important;
    font-size: 0.8125rem !important;
    font-weight: 500 !important;
    color: var(--dd-text) !important;
    padding: 6px 12px !important;
    transition: all var(--dd-transition) !important;
}

.page-link:hover {
    background: var(--dd-primary-soft) !important;
    border-color: var(--dd-primary) !important;
    color: var(--dd-primary) !important;
}

.page-item.active .page-link {
    background: var(--dd-primary) !important;
    border-color: var(--dd-primary) !important;
    color: #fff !important;
    box-shadow: 0 1px 3px rgba(0, 18, 141, 0.3);
}


/* ----------------------------------------------------------------
   13. ALERTS (static/informational)
   ---------------------------------------------------------------- */
.alert {
    border-radius: var(--dd-radius) !important;
    font-size: 0.8125rem !important;
    border: none !important;
    padding: 14px 18px !important;
}

.alert-success {
    background: var(--dd-success-soft) !important;
    color: var(--dd-success) !important;
}

.alert-danger {
    background: var(--dd-danger-soft) !important;
    color: var(--dd-danger) !important;
}

.alert-warning {
    background: var(--dd-warning-soft) !important;
    color: var(--dd-warning) !important;
}

.alert-info {
    background: var(--dd-info-soft) !important;
    color: var(--dd-info) !important;
}


/* ----------------------------------------------------------------
   14. DROPDOWNS
   ---------------------------------------------------------------- */
.dropdown-menu {
    border: 1px solid var(--dd-border-light) !important;
    border-radius: var(--dd-radius) !important;
    box-shadow: var(--dd-shadow-md) !important;
    padding: 6px !important;
}

.dropdown-item {
    font-size: 0.8125rem !important;
    padding: 8px 14px !important;
    border-radius: var(--dd-radius-sm) !important;
    color: var(--dd-text) !important;
    transition: background var(--dd-transition) !important;
}

.dropdown-item:hover,
.dropdown-item:focus {
    background: var(--dd-primary-soft) !important;
    color: var(--dd-primary) !important;
}

.dropdown-item.active,
.dropdown-item:active {
    background: var(--dd-primary) !important;
    color: #fff !important;
}

.dropdown-divider {
    border-color: var(--dd-border-light) !important;
    margin: 4px 0 !important;
}



/* ----------------------------------------------------------------
   15. PAGE TITLE
   ---------------------------------------------------------------- */

/* Nuke the Velzon page-title-box completely — just a plain heading */
.page-title-box {
    padding: 0 !important;
    margin: 0 0 16px 0 !important;
    min-height: 0 !important;
    border: none !important;
    border-top: none !important;
    border-bottom: none !important;
    background: none !important;
    background-color: transparent !important;
    box-shadow: none !important;
    -webkit-box-shadow: none !important;
}

.page-title-box h4 {
    font-size: 1.05rem !important;
    font-weight: 700 !important;
    letter-spacing: -0.02em;
    text-transform: none !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1.3 !important;
    color: var(--dd-text) !important;
}

/* Hide breadcrumb (redundant with sidebar navigation) */
.page-title-box .breadcrumb {
    display: none !important;
}

/* Section headings inside cards */
.card-title {
    font-size: 0.875rem !important;
    font-weight: 600 !important;
}

/* Dashboard greeting */
.page-content h4.fs-16 {
    font-size: 0.9375rem !important;
    font-weight: 600 !important;
}


/* ----------------------------------------------------------------
   16. FOOTER
   ---------------------------------------------------------------- */
.footer {
    position: static !important;
    height: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    background: transparent !important;
    border-top: 1px solid var(--dd-border-light) !important;
    padding: 12px 20px !important;
    margin: 0 !important;
}


/* Footer always at bottom — flexbox approach */
.main-content {
    display: flex !important;
    flex-direction: column !important;
    min-height: 100vh !important;
}

.page-content {
    flex: 1 !important;
    margin-top: 0 !important;
}



/* ----------------------------------------------------------------
   17. SCROLLBAR
   ---------------------------------------------------------------- */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: var(--dd-border);
    border-radius: 100px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--dd-text-muted);
}


/* ----------------------------------------------------------------
   18. STAT CARDS (Dashboard)
   ---------------------------------------------------------------- */
.mini-stats-wid .card-body {
    padding: 20px !important;
}

/* Counter values */
.counter-value,
.card .fs-22,
.card .fs-20,
.card .fw-bold.fs-22 {
    font-weight: 700 !important;
    letter-spacing: -0.02em;
}

/* Dashboard stat icons */
.avatar-sm {
    width: 40px !important;
    height: 40px !important;
}

.avatar-title {
    border-radius: var(--dd-radius-sm) !important;
}


/* ----------------------------------------------------------------
   19. PROFILE PAGES
   ---------------------------------------------------------------- */
.profile-wid-bg {
    border-radius: var(--dd-radius) var(--dd-radius) 0 0 !important;
    overflow: hidden !important;
    max-height: 180px !important;
}

.profile-wid-img {
    object-fit: cover !important;
    width: 100% !important;
}

.profile-foreground {
    border-radius: var(--dd-radius) !important;
}

/* Profile avatar — circle with initials */
.user-profile-image {
    width: 100px !important;
    height: 100px !important;
    border-radius: 50% !important;
    overflow: hidden !important;
    border: 3px solid #fff !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12) !important;
}

.user-profile-image .avatar-title {
    width: 100% !important;
    height: 100% !important;
    border-radius: 50% !important;
    font-size: 1.5rem !important;
    font-weight: 600 !important;
    background: var(--dd-primary) !important;
}

/* Profile setting card */
.profile-setting-img {
    max-height: 160px !important;
    overflow: hidden !important;
}


/* ----------------------------------------------------------------
   20. HIDE VELZON CUSTOMIZER
   ---------------------------------------------------------------- */
.customizer-setting,
#theme-settings-offcanvas {
    display: none !important;
}

/* ----------------------------------------------------------------
   20b. PAGE TRANSITIONS & ANIMATIONS
   ---------------------------------------------------------------- */

/* Animate everything together — topbar waits for sidebar/content */
#layout-wrapper {
    animation: dd-page-in 0.3s ease-out both;
}

#page-topbar {
    animation: dd-page-in 0.3s ease-out both;
    animation-delay: 0.08s;
}

@keyframes dd-page-in {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* Staggered card reveal */
.card {
    animation: dd-card-in 0.35s ease-out both;
}

.row > [class*="col-"]:nth-child(1) .card { animation-delay: 0.02s; }
.row > [class*="col-"]:nth-child(2) .card { animation-delay: 0.06s; }
.row > [class*="col-"]:nth-child(3) .card { animation-delay: 0.10s; }
.row > [class*="col-"]:nth-child(4) .card { animation-delay: 0.14s; }
.row > [class*="col-"]:nth-child(5) .card { animation-delay: 0.18s; }
.row > [class*="col-"]:nth-child(6) .card { animation-delay: 0.22s; }
.row > [class*="col-"]:nth-child(7) .card { animation-delay: 0.26s; }
.row > [class*="col-"]:nth-child(8) .card { animation-delay: 0.30s; }

@keyframes dd-card-in {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Disable animations for reduced motion */
@media (prefers-reduced-motion: reduce) {
    #layout-wrapper,
    .card {
        animation: none !important;
    }
}


/* ----------------------------------------------------------------
   21. MISC OVERRIDES
   ---------------------------------------------------------------- */

/* Remove node-waves purple ripple */
.waves-effect .waves-ripple {
    background: rgba(0, 0, 0, 0.06) !important;
}

/* SweetAlert2 overrides */
.swal2-popup {
    border-radius: var(--dd-radius-lg) !important;
    font-family: inherit !important;
    box-shadow: var(--dd-shadow-lg) !important;
}

.swal2-confirm {
    border-radius: var(--dd-radius-sm) !important;
}

.swal2-cancel {
    border-radius: var(--dd-radius-sm) !important;
}

/* Simplebar */
.simplebar-scrollbar::before {
    background: var(--dd-text-muted) !important;
    border-radius: 100px !important;
    opacity: 0.3 !important;
}

/* Flatpickr */
.flatpickr-calendar {
    border-radius: var(--dd-radius) !important;
    box-shadow: var(--dd-shadow-md) !important;
    border: 1px solid var(--dd-border-light) !important;
}

/* Tooltip */
.tooltip-inner {
    border-radius: var(--dd-radius-sm) !important;
    font-size: 0.75rem !important;
    padding: 6px 12px !important;
}

/* Progress bars */
.progress {
    border-radius: 100px !important;
    height: 6px !important;
    background: var(--dd-border-light) !important;
}

.progress-bar {
    border-radius: 100px !important;
}

/* ── Accordion (FAQ, etc.) ── */
.accordion-item {
    border: 1px solid var(--dd-border-light) !important;
    border-radius: var(--dd-radius-sm) !important;
    margin-bottom: 6px !important;
    overflow: hidden !important;
}

.accordion-button {
    font-size: 0.8125rem !important;
    font-weight: 500 !important;
    padding: 12px 16px !important;
    color: var(--dd-text) !important;
    background: var(--dd-surface) !important;
    box-shadow: none !important;
}

.accordion-button:not(.collapsed) {
    background: var(--dd-primary-soft) !important;
    color: var(--dd-primary) !important;
}

.accordion-button:focus {
    box-shadow: none !important;
}

.accordion-body {
    font-size: 0.8rem !important;
    padding: 12px 16px !important;
    color: var(--dd-text-secondary) !important;
    line-height: 1.6 !important;
}

/* ══════════════════════════════════════════
   ApexCharts — theme-aligned styling
   ══════════════════════════════════════════ */

/* Chart container */
.apexcharts-canvas {
    font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif !important;
}

/* Axis labels */
.apexcharts-xaxis-label,
.apexcharts-yaxis-label {
    font-family: 'DM Sans', sans-serif !important;
    font-size: 11px !important;
    fill: var(--dd-text-secondary) !important;
}

/* Grid lines */
.apexcharts-gridline {
    stroke: var(--dd-border-light) !important;
}

.apexcharts-grid-borders line {
    stroke: var(--dd-border-light) !important;
}

/* Tooltip */
.apexcharts-tooltip {
    border: 1px solid var(--dd-border-light) !important;
    border-radius: var(--dd-radius-sm) !important;
    box-shadow: var(--dd-shadow-md) !important;
    font-family: 'DM Sans', sans-serif !important;
    font-size: 0.8rem !important;
}

.apexcharts-tooltip-title {
    background: var(--dd-bg) !important;
    border-bottom: 1px solid var(--dd-border-light) !important;
    font-weight: 600 !important;
    font-size: 0.75rem !important;
}

/* Legend */
.apexcharts-legend-text {
    font-family: 'DM Sans', sans-serif !important;
    font-size: 12px !important;
    color: var(--dd-text-secondary) !important;
}

/* Data labels */
.apexcharts-datalabel,
.apexcharts-data-labels text {
    font-family: 'DM Sans', sans-serif !important;
}

/* Chart title */
.apexcharts-title-text {
    font-family: 'DM Sans', sans-serif !important;
    font-weight: 600 !important;
    fill: var(--dd-text) !important;
}

/* Pie/donut labels */
.apexcharts-pie-label {
    font-family: 'DM Sans', sans-serif !important;
    font-size: 12px !important;
}

/* Toolbar */
.apexcharts-toolbar {
    z-index: 1 !important;
}

.apexcharts-menu {
    border: 1px solid var(--dd-border-light) !important;
    border-radius: var(--dd-radius-sm) !important;
    box-shadow: var(--dd-shadow-sm) !important;
}

.apexcharts-menu-item:hover {
    background: var(--dd-primary-soft) !important;
}

/* ── NProgress loading bar ── */
#nprogress .bar {
    background: var(--dd-primary) !important;
    height: 3px !important;
    z-index: 999999 !important;
}

#nprogress .peg {
    box-shadow: 0 0 10px var(--dd-primary), 0 0 5px var(--dd-primary) !important;
}

#nprogress .spinner {
    display: none !important;
}

/* ── Loading overlay ── */
.dd-loading-overlay {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: rgba(255, 255, 255, 0.6) !important;
    backdrop-filter: blur(2px) !important;
    -webkit-backdrop-filter: blur(2px) !important;
    z-index: 999998 !important;
    display: none !important;
    align-items: center !important;
    justify-content: center !important;
    pointer-events: none;
}

.dd-loading-overlay.active {
    display: flex !important;
    opacity: 1 !important;
    pointer-events: auto !important;
}

.dd-loading-spinner {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 14px !important;
}

.dd-loading-spinner svg {
    width: 40px !important;
    height: 40px !important;
    animation: dd-spin 0.8s linear infinite !important;
    color: var(--dd-primary) !important;
}

.dd-loading-spinner span {
    display: none !important;
}

@keyframes dd-spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* ── Tags in tables ── */
td.tags .badge {
    border: 1px solid var(--dd-border) !important;
    background: var(--dd-surface) !important;
    color: var(--dd-text) !important;
    font-size: 0.65rem !important;
    font-weight: 500 !important;
    padding: 3px 8px !important;
    border-radius: 100px !important;
}

/* Empty states */
.noresult,
.no-result {
    color: var(--dd-text-muted) !important;
    font-size: 0.875rem;
}

/* Custom link style */
a.text-primary {
    color: var(--dd-primary) !important;
}

a.text-primary:hover {
    color: var(--dd-primary-hover) !important;
}


/* ================================================================
   22. SIDEBAR REFINEMENTS
   ================================================================ */

/* Fix: hide duplicate logo in topbar (vertical layout uses sidebar logo) */
[data-layout="vertical"] .horizontal-logo {
    display: none !important;
}

/* Hide "Menu" title label */
.menu-title {
    display: none !important;
}

/* Sidebar logo area */
.navbar-brand-box {
    padding: 0 16px !important;
    height: 56px !important;
    min-height: 0 !important;
    max-height: 56px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
}

/* Hide the hover toggle button inside logo area */
.navbar-brand-box .btn-vertical-sm-hover {
    display: none !important;
}

/* Dark sidebar = show only logo-light, hide logo-dark */
.navbar-menu .logo-dark {
    display: none !important;
}

.navbar-menu .logo-light {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.navbar-brand-box .logo-lg img {
    height: 46px !important;
    width: auto !important;
}

.navbar-brand-box .logo-sm img {
    height: 36px !important;
    width: auto !important;
}

/* Sidebar nav — spacing */
.navbar-nav {
    padding: 12px 0 !important;
}

/* Menu group dividers — subtle line instead of title */
.nav-item + .nav-item > .menu-link {
    margin-top: 1px !important;
}

/* Collapse indicator — cleaner arrow (expanded only) */
[data-sidebar-size="lg"] .navbar-nav .menu-link[data-bs-toggle="collapse"]::after {
    font-size: 0.65rem !important;
    opacity: 0.4;
    transition: transform var(--dd-transition), opacity var(--dd-transition) !important;
    right: 14px !important;
}

[data-sidebar-size="lg"] .navbar-nav .menu-link[data-bs-toggle="collapse"]:hover::after {
    opacity: 0.7;
}

[data-sidebar-size="lg"] .navbar-nav .menu-link[data-bs-toggle="collapse"][aria-expanded="true"]::after {
    opacity: 0.7;
}

/* ══════════════════════════════════════════════════════
   SIDEBAR COLLAPSED — complete rewrite
   Target every Velzon selector with exact specificity
   ══════════════════════════════════════════════════════ */

/* Remove active bar in collapsed */
[data-sidebar-size="sm"] .navbar-nav .nav-link::before {
    display: none !important;
}

/* Menu-link with submenu: hide the expanded header bar, show only submenu */
:is([data-layout=vertical],[data-layout=semibox])[data-sidebar-size=sm] .navbar-menu .navbar-nav .nav-item:hover > a.menu-link[data-bs-toggle="collapse"] {
    width: var(--vz-vertical-menu-width-sm) !important;
    background: rgba(255, 255, 255, 0.08) !important;
}

:is([data-layout=vertical],[data-layout=semibox])[data-sidebar-size=sm] .navbar-menu .navbar-nav .nav-item:hover > a.menu-link[data-bs-toggle="collapse"] span {
    display: none !important;
}

:is([data-layout=vertical],[data-layout=semibox])[data-sidebar-size=sm] .navbar-menu .navbar-nav .nav-item:hover > a.menu-link[data-bs-toggle="collapse"]:after {
    display: none !important;
}

/* Menu-link WITHOUT submenu: show label on hover */
:is([data-layout=vertical],[data-layout=semibox])[data-sidebar-size=sm] .navbar-menu .navbar-nav .nav-item:hover > a.menu-link:not([data-bs-toggle]) {
    background: #000833 !important;
    color: #fff !important;
    border-radius: 0 6px 6px 0 !important;
    width: calc(170px + var(--vz-vertical-menu-width-sm)) !important;
}

:is([data-layout=vertical],[data-layout=semibox])[data-sidebar-size=sm] .navbar-menu .navbar-nav .nav-item:hover > a.menu-link i {
    color: #fff !important;
    opacity: 1 !important;
}

:is([data-layout=vertical],[data-layout=semibox])[data-sidebar-size=sm] .navbar-menu .navbar-nav .nav-item:hover > a.menu-link span {
    color: #fff !important;
}

/* Popup submenu dropdown — appears next to icon, no header */
:is([data-layout=vertical],[data-layout=semibox])[data-sidebar-size=sm] .navbar-menu .navbar-nav .nav-item:hover > .menu-dropdown {
    background: #000833 !important;
    border-radius: 0 8px 8px 0 !important;
    box-shadow: 8px 4px 24px rgba(0, 0, 0, 0.3) !important;
    padding: 8px 0 !important;
    width: 170px !important;
    top: 0 !important;
}

/* Nested submenu dropdown (2nd+ level) — rounded corners */
:is([data-layout=vertical],[data-layout=semibox])[data-sidebar-size=sm] .navbar-menu .menu-dropdown .menu-dropdown {
    border-radius: 8px !important;
    box-shadow: 8px 4px 24px rgba(0, 0, 0, 0.3) !important;
}

/* Submenu items */
:is([data-layout=vertical],[data-layout=semibox])[data-sidebar-size=sm] .navbar-menu .nav-sm .nav-link {
    color: #94a3b8 !important;
    background: transparent !important;
    padding: 8px 18px !important;
    font-size: 0.8rem !important;
}

:is([data-layout=vertical],[data-layout=semibox])[data-sidebar-size=sm] .navbar-menu .nav-sm .nav-item:hover > .nav-link,
:is([data-layout=vertical],[data-layout=semibox])[data-sidebar-size=sm] .navbar-menu .nav-sm .nav-link.active {
    color: #fff !important;
}

/* Single-link items (no submenu) — the span label on hover */
:is([data-layout=vertical],[data-layout=semibox])[data-sidebar-size=sm] .navbar-menu .navbar-nav .nav-item:hover > .nav-link {
    color: #fff !important;
}

/* Active indicator — left accent bar (expanded only) */
[data-sidebar-size="lg"] .navbar-nav .nav-link {
    position: relative !important;
}

[data-sidebar-size="lg"] .navbar-nav > .nav-item > .nav-link.active::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 20px;
    background: var(--dd-primary);
    border-radius: 0 3px 3px 0;
}


/* ================================================================
   23. TOPBAR / HEADER FIX — prevent clipping
   ================================================================ */

/* Ensure topbar doesn't clip content */
#page-topbar {
    z-index: 1002 !important;
    overflow: visible !important;
}

.navbar-header {
    height: 56px !important;
    min-height: 56px !important;
    padding: 0 16px !important;
}

#page-topbar {
    height: 56px !important;
}

/* Fix header items — compact to match 56px header */
.header-item {
    height: 56px !important;
    padding: 0 6px !important;
    display: flex !important;
    align-items: center !important;
}

/* Topbar action buttons — same height as tenant button */
.topbar-head-dropdown .btn,
.topbar-head-dropdown a.btn {
    font-size: 0.72rem !important;
    padding: 6px 12px !important;
    border-radius: var(--dd-radius-sm) !important;
    font-weight: 500 !important;
    white-space: nowrap !important;
    line-height: 1.4 !important;
}

.topbar-head-dropdown .btn-primary {
    max-width: 280px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

/* Notification bell */
.topbar-badge {
    font-size: 0.6rem !important;
    min-width: 16px;
    height: 16px;
    line-height: 16px;
    padding: 0 4px !important;
}

/* ── Profile area in topbar ── */
.topbar-user {
    margin-left: 4px !important;
}

.topbar-user .btn {
    padding: 5px 10px !important;
    border-radius: var(--dd-radius) !important;
    border: 1px solid var(--dd-border-light) !important;
    background: var(--dd-surface) !important;
    transition: all var(--dd-transition) !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}

.topbar-user .btn:hover {
    border-color: var(--dd-border) !important;
    box-shadow: var(--dd-shadow-xs) !important;
}

.header-profile-user {
    width: 30px !important;
    height: 30px !important;
    min-width: 30px !important;
}

.header-profile-user .avatar-title {
    width: 30px !important;
    height: 30px !important;
    font-size: 0.65rem !important;
    font-weight: 600 !important;
    border-radius: 8px !important;
    background: var(--dd-primary) !important;
    letter-spacing: 0.5px !important;
    box-shadow: 0 2px 6px rgba(0, 18, 141, 0.25) !important;
}

.user-name-text {
    font-size: 0.8rem !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
    color: var(--dd-text) !important;
}

.user-name-sub-text {
    font-size: 0.6rem !important;
    color: var(--dd-text-muted) !important;
    line-height: 1 !important;
    letter-spacing: 0.03em !important;
    text-transform: uppercase !important;
    font-weight: 500 !important;
}

/* Kill the gray background behind profile area */
.topbar-user.header-item,
.topbar-user {
    background: none !important;
    box-shadow: none !important;
}

/* ══════════════════════════════════════════
   Dashboard avançado tables — clean design
   ══════════════════════════════════════════ */

/* Base table */
.dashboard-avancado .tbl-cad-fat,
.dashboard-avancado .tbl-av-campanhas {
    font-size: 0.75rem !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
}

/* All cells */
.dashboard-avancado .tbl-cad-fat th,
.dashboard-avancado .tbl-cad-fat td,
.dashboard-avancado .tbl-av-campanhas th,
.dashboard-avancado .tbl-av-campanhas td {
    padding: 10px 12px !important;
    text-align: center !important;
    border-color: var(--dd-border-light) !important;
    vertical-align: middle !important;
}

/* Top group header */
.dashboard-avancado .tbl-cad-fat-head-top th {
    background: #1e293b !important;
    color: rgba(255, 255, 255, 0.9) !important;
    font-size: 0.65rem !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
    border: none !important;
    padding: 10px 12px !important;
}

.dashboard-avancado .tbl-cad-fat-head-top th:first-child {
    border-radius: var(--dd-radius) 0 0 0 !important;
}

.dashboard-avancado .tbl-cad-fat-head-top th:last-child {
    border-radius: 0 var(--dd-radius) 0 0 !important;
}

/* Sub header */
.dashboard-avancado .tbl-cad-fat-head-sub th {
    background: var(--dd-bg) !important;
    color: var(--dd-text-secondary) !important;
    font-size: 0.6rem !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.04em !important;
    white-space: nowrap !important;
    border-bottom: 2px solid var(--dd-border) !important;
}

/* Month column */
.dashboard-avancado .tbl-cad-fat-col-mes {
    font-weight: 600 !important;
    color: var(--dd-text) !important;
    text-align: left !important;
    background: var(--dd-surface) !important;
}

/* Data rows — subtle zebra */
.dashboard-avancado .tbl-cad-fat tbody tr:nth-child(even) td {
    background: rgba(0, 0, 0, 0.015) !important;
}

.dashboard-avancado .tbl-cad-fat tbody tr:hover td {
    background: var(--dd-primary-soft) !important;
}

/* Financial columns — tinted */
.dashboard-avancado .tbl-cad-fat-fin {
    font-weight: 600 !important;
    color: var(--dd-text) !important;
}

/* Total row */
.dashboard-avancado .tbl-cad-fat-total td {
    font-weight: 700 !important;
    background: var(--dd-bg) !important;
    border-top: 2px solid var(--dd-border) !important;
    color: var(--dd-primary) !important;
}

.dashboard-avancado .tbl-cad-fat-total td:first-child {
    border-radius: 0 0 0 var(--dd-radius) !important;
}

.dashboard-avancado .tbl-cad-fat-total td:last-child {
    border-radius: 0 0 var(--dd-radius) 0 !important;
}

.dashboard-avancado .tbl-cad-fat-total .tbl-cad-fat-col-mes {
    color: var(--dd-primary) !important;
}

/* Campanhas table */
.dashboard-avancado .table-avancado-title th {
    background: #1e293b !important;
    color: rgba(255, 255, 255, 0.9) !important;
    text-align: center !important;
    font-size: 0.65rem !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
    padding: 10px 12px !important;
    border: none !important;
    border-radius: var(--dd-radius) var(--dd-radius) 0 0 !important;
}

/* Card wrapper for tables */
.dashboard-avancado .dashboard-av-table-responsive {
    border-radius: var(--dd-radius) !important;
    overflow-x: auto !important;
    overflow-y: visible !important;
}

/* Campanhas sub-header */
.dashboard-avancado .tbl-av-campanhas thead .small th {
    background: var(--dd-bg) !important;
    color: var(--dd-text-secondary) !important;
    font-size: 0.6rem !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.04em !important;
    padding: 8px 10px !important;
    border-bottom: 2px solid var(--dd-border) !important;
}

/* Campanhas total row */
.dashboard-avancado .table-total-row td {
    font-weight: 700 !important;
    background: var(--dd-bg) !important;
    border-top: 2px solid var(--dd-border) !important;
    color: var(--dd-primary) !important;
}

/* Campanhas data cells */
.dashboard-avancado .tbl-av-campanhas td {
    padding: 10px 12px !important;
    font-size: 0.75rem !important;
}

.dashboard-avancado .tbl-av-campanhas tbody tr:hover td {
    background: var(--dd-primary-soft) !important;
}

/* ── Dashboard stat cards — softer pastel versions of original colors ── */
.card > .bg-primary.card-body { background: #00128D !important; border-radius: var(--dd-radius) !important; }
.card > .bg-success.card-body { background: #059669 !important; border-radius: var(--dd-radius) !important; }
.card > .bg-warning.card-body { background: #d97706 !important; border-radius: var(--dd-radius) !important; }
.card > .bg-danger.card-body { background: #dc2626 !important; border-radius: var(--dd-radius) !important; }

/* ── Topbar dropdowns — let Popper handle positioning naturally ── */

/* Fix page-content top spacing */
.page-content {
    padding-top: 80px !important;
}

/* Environment badge — doesn't clip header */
[style*="position: fixed"][style*="top: 0"][style*="left: 0"][style*="z-index: 9999"] {
    z-index: 1003 !important;
}


/* ================================================================
   24. SEARCH, INPUTS & SELECTS — Refined
   ================================================================ */

/* Search inputs with icon */
.search-box {
    position: relative;
}

.search-box .form-control {
    padding-left: 36px !important;
}

.search-box .search-icon {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--dd-text-muted);
    font-size: 0.875rem;
    pointer-events: none;
}

/* Choices.js — theme aligned */
.choices__inner {
    border: 1px solid var(--dd-border) !important;
    border-radius: var(--dd-radius-sm) !important;
    background: var(--dd-surface) !important;
    min-height: 38px !important;
    padding: 4px 8px !important;
    font-size: 0.8125rem !important;
    transition: border-color var(--dd-transition), box-shadow var(--dd-transition) !important;
}

.choices.is-focused .choices__inner,
.choices__inner:focus-within {
    border-color: var(--dd-primary) !important;
    box-shadow: 0 0 0 3px var(--dd-primary-soft) !important;
}

.choices__list--dropdown {
    border: 1px solid var(--dd-border-light) !important;
    border-radius: var(--dd-radius) !important;
    box-shadow: var(--dd-shadow-md) !important;
    margin-top: 4px !important;
    overflow: hidden;
}

/* Fix: Choices.js uses visibility:hidden which adds to scrollHeight */
.choices__list--dropdown[aria-expanded="false"],
.choices__list--dropdown:not(.is-active) {
    display: none !important;
}

.choices__list--dropdown .choices__item {
    font-size: 0.8125rem !important;
    padding: 8px 14px !important;
    transition: background var(--dd-transition) !important;
}

.choices__list--dropdown .choices__item--selectable.is-highlighted {
    background: var(--dd-primary-soft) !important;
    color: var(--dd-primary) !important;
}

.choices__list--dropdown .choices__item--selectable:hover {
    background: var(--dd-primary-soft) !important;
}

/* Choices multi-select items */
.choices__list--multiple .choices__item {
    background: var(--dd-primary) !important;
    border: none !important;
    border-radius: 4px !important;
    font-size: 0.75rem !important;
    padding: 3px 8px !important;
    font-weight: 500;
}

/* Choices search input inside dropdown */
.choices__list--dropdown .choices__input {
    border-bottom: 1px solid var(--dd-border-light) !important;
    padding: 10px 14px !important;
    font-size: 0.8125rem !important;
}

/* Flatpickr inputs */
.flatpickr-input {
    border: 1px solid var(--dd-border) !important;
    border-radius: var(--dd-radius-sm) !important;
    padding: 9px 14px !important;
    font-size: 0.8125rem !important;
}

/* Input group: first/last item gets rounded, middle items flat */
.input-group > :not(:first-child):not(:last-child) {
    border-radius: 0 !important;
}

.input-group > :first-child:not(:last-child) {
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}

.input-group > :last-child:not(:first-child) {
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
}

/* Select2 (if used) */
.select2-container--default .select2-selection--single {
    border: 1px solid var(--dd-border) !important;
    border-radius: var(--dd-radius-sm) !important;
    height: 38px !important;
}

/* Filter bar containers */
.card-header .row .col-auto,
.card-header .d-flex {
    gap: 8px;
}

/* Small form controls in table headers */
.card-header .form-control-sm,
.card-header .form-select-sm {
    font-size: 0.75rem !important;
    padding: 5px 10px !important;
    border-radius: var(--dd-radius-sm) !important;
}


/* ================================================================
   25. MAIN CONTENT SPACING FIX
   ================================================================ */

/* Fix for content spacing with fixed topbar */
[data-layout="vertical"] .main-content {
    margin-top: 0 !important;
}

/* Page content container — balanced padding */
.page-content {
    padding: 76px 20px 20px 20px !important;
}

.page-content > .container-fluid {
    padding: 0 !important;
    max-width: 100%;
}

/* Greeting/welcome row — less bottom margin */
.page-content > .container-fluid > .row:first-child {
    margin-bottom: 4px;
}


/* ================================================================
   26. RESPONSIVE FIXES
   ================================================================ */
@media (max-width: 991.98px) {
    .page-content {
        padding: 68px 14px 16px 14px !important;
    }

    .card-body {
        padding: 16px !important;
    }

    .card-header {
        padding: 12px 16px !important;
    }

    .navbar-header {
        padding: 0 12px !important;
    }
}

@media (max-width: 575.98px) {
    .page-content {
        padding: 64px 10px 12px 10px !important;
    }

    .btn {
        font-size: 0.75rem !important;
        padding: 7px 12px !important;
    }

    .table > :not(caption) > * > * {
        padding: 10px 12px !important;
        font-size: 0.75rem !important;
    }

    .modal-body {
        padding: 16px !important;
    }
}

/* Dashboard fatura cards — reduzir borda lateral/vertical do fundo colorido */
.card-body.bg-primary,
.card-body.bg-success,
.card-body.bg-warning,
.card-body.bg-danger {
    padding: 0.5rem !important;
}

/* Reduzir gap vertical entre os cards brancos internos */
.card-body.bg-primary .vstack,
.card-body.bg-success .vstack,
.card-body.bg-warning .vstack,
.card-body.bg-danger .vstack {
    gap: 0.35rem !important;
}

/* Force primary color on dashboard cards (Velzon's .bg-primary falls back to old hex) */
.card-body.bg-primary {
    background-color: rgba(0, 18, 141, 0.9) !important;
}