/* ==========================================================================
   OKE Design System - CSS Custom Properties & Base Styles
   Sistema de variáveis para Light/Dark mode com tipografia profissional
   ========================================================================== */

/* Google Fonts - Inter */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');

/* ==========================================================================
   Light Theme (Default)
   ========================================================================== */
:root,
[data-theme="light"] {
    /* Primary Colors */
    --oke-primary: #4F46E5;
    --oke-primary-hover: #4338CA;
    --oke-primary-light: #EEF2FF;
    --oke-primary-dark: #3730A3;
    --oke-primary-rgb: 79, 70, 229;

    /* Secondary Colors */
    --oke-secondary: #64748B;
    --oke-secondary-hover: #475569;
    --oke-secondary-light: #F1F5F9;

    /* Accent Colors */
    --oke-accent: #06B6D4;
    --oke-accent-hover: #0891B2;
    --oke-accent-light: #ECFEFF;

    /* Status Colors */
    --oke-success: #10B981;
    --oke-success-light: #D1FAE5;
    --oke-success-dark: #059669;
    --oke-warning: #F59E0B;
    --oke-warning-light: #FEF3C7;
    --oke-warning-dark: #D97706;
    --oke-danger: #EF4444;
    --oke-danger-light: #FEE2E2;
    --oke-danger-dark: #DC2626;
    --oke-info: #3B82F6;
    --oke-info-light: #DBEAFE;
    --oke-info-dark: #2563EB;

    /* Background Colors */
    --oke-bg-body: #F8FAFC;
    --oke-bg-surface: #FFFFFF;
    --oke-bg-surface-hover: #F8FAFC;
    --oke-bg-surface-secondary: #F1F5F9;
    --oke-bg-sidebar: #1E293B;
    --oke-bg-sidebar-hover: #334155;
    --oke-bg-sidebar-active: #4F46E5;
    --oke-bg-header: #FFFFFF;
    --oke-bg-input: #FFFFFF;
    --oke-bg-card: #FFFFFF;
    --oke-bg-modal: #FFFFFF;
    --oke-bg-overlay: rgba(15, 23, 42, 0.5);
    --oke-bg-skeleton: linear-gradient(90deg, #F1F5F9 25%, #E2E8F0 50%, #F1F5F9 75%);

    /* Text Colors */
    --oke-text-primary: #0F172A;
    --oke-text-secondary: #475569;
    --oke-text-tertiary: #94A3B8;
    --oke-text-inverse: #FFFFFF;
    --oke-text-link: #4F46E5;
    --oke-text-link-hover: #4338CA;
    --oke-text-sidebar: #CBD5E1;
    --oke-text-sidebar-active: #FFFFFF;
    --oke-text-sidebar-heading: #64748B;

    /* Border Colors */
    --oke-border: #E2E8F0;
    --oke-border-light: #F1F5F9;
    --oke-border-dark: #CBD5E1;
    --oke-border-focus: #4F46E5;
    --oke-border-input: #CBD5E1;

    /* Shadow System */
    --oke-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05);
    --oke-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04);
    --oke-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.08), 0 2px 4px -2px rgba(0, 0, 0, 0.04);
    --oke-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -4px rgba(0, 0, 0, 0.04);
    --oke-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.08), 0 8px 10px -6px rgba(0, 0, 0, 0.04);
    --oke-shadow-header: 0 1px 3px rgba(0, 0, 0, 0.06);
    --oke-shadow-sidebar: 2px 0 8px rgba(0, 0, 0, 0.08);
    --oke-shadow-card: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
    --oke-shadow-card-hover: 0 10px 20px -5px rgba(0, 0, 0, 0.1);
    --oke-shadow-focus: 0 0 0 3px rgba(79, 70, 229, 0.15);

    /* Scrollbar */
    --oke-scrollbar-bg: #F1F5F9;
    --oke-scrollbar-thumb: #CBD5E1;
    --oke-scrollbar-thumb-hover: #94A3B8;
}

/* ==========================================================================
   Dark Theme
   ========================================================================== */
[data-theme="dark"] {
    --oke-primary: #818CF8;
    --oke-primary-hover: #A5B4FC;
    --oke-primary-light: rgba(129, 140, 248, 0.1);
    --oke-primary-dark: #6366F1;
    --oke-primary-rgb: 129, 140, 248;

    --oke-secondary: #94A3B8;
    --oke-secondary-hover: #CBD5E1;
    --oke-secondary-light: rgba(148, 163, 184, 0.1);

    --oke-accent: #22D3EE;
    --oke-accent-hover: #67E8F9;
    --oke-accent-light: rgba(34, 211, 238, 0.1);

    --oke-success: #34D399;
    --oke-success-light: rgba(52, 211, 153, 0.15);
    --oke-success-dark: #10B981;
    --oke-warning: #FBBF24;
    --oke-warning-light: rgba(251, 191, 36, 0.15);
    --oke-warning-dark: #F59E0B;
    --oke-danger: #F87171;
    --oke-danger-light: rgba(248, 113, 113, 0.15);
    --oke-danger-dark: #EF4444;
    --oke-info: #60A5FA;
    --oke-info-light: rgba(96, 165, 250, 0.15);
    --oke-info-dark: #3B82F6;

    --oke-bg-body: #111827;
    --oke-bg-surface: #1F2937;
    --oke-bg-surface-hover: #374151;
    --oke-bg-surface-secondary: #1F2937;
    --oke-bg-sidebar: #111827;
    --oke-bg-sidebar-hover: #1F2937;
    --oke-bg-sidebar-active: #4F46E5;
    --oke-bg-header: #1F2937;
    --oke-bg-input: #374151;
    --oke-bg-card: #1F2937;
    --oke-bg-modal: #1F2937;
    --oke-bg-overlay: rgba(0, 0, 0, 0.65);
    --oke-bg-skeleton: linear-gradient(90deg, #1F2937 25%, #374151 50%, #1F2937 75%);

    --oke-text-primary: #F9FAFB;
    --oke-text-secondary: #D1D5DB;
    --oke-text-tertiary: #9CA3AF;
    --oke-text-inverse: #111827;
    --oke-text-link: #A5B4FC;
    --oke-text-link-hover: #C7D2FE;
    --oke-text-sidebar: #D1D5DB;
    --oke-text-sidebar-active: #FFFFFF;
    --oke-text-sidebar-heading: #6B7280;

    --oke-border: #374151;
    --oke-border-light: #1F2937;
    --oke-border-dark: #4B5563;
    --oke-border-focus: #818CF8;
    --oke-border-input: #4B5563;

    --oke-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.3);
    --oke-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.35), 0 1px 2px rgba(0, 0, 0, 0.2);
    --oke-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 2px 4px -2px rgba(0, 0, 0, 0.2);
    --oke-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.3), 0 4px 6px -4px rgba(0, 0, 0, 0.2);
    --oke-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.3), 0 8px 10px -6px rgba(0, 0, 0, 0.2);
    --oke-shadow-header: 0 1px 3px rgba(0, 0, 0, 0.3);
    --oke-shadow-sidebar: 2px 0 8px rgba(0, 0, 0, 0.3);
    --oke-shadow-card: 0 1px 3px rgba(0, 0, 0, 0.3);
    --oke-shadow-card-hover: 0 10px 20px -5px rgba(0, 0, 0, 0.4);
    --oke-shadow-focus: 0 0 0 3px rgba(129, 140, 248, 0.2);

    --oke-scrollbar-bg: #1E293B;
    --oke-scrollbar-thumb: #475569;
    --oke-scrollbar-thumb-hover: #64748B;
}

/* ==========================================================================
   Typography System
   ========================================================================== */
:root {
    /* Font Families */
    --oke-font-primary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --oke-font-mono: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', monospace;

    /* Font Sizes */
    --oke-text-xs: 0.75rem;     /* 12px */
    --oke-text-sm: 0.8125rem;   /* 13px */
    --oke-text-base: 0.875rem;  /* 14px */
    --oke-text-md: 1rem;        /* 16px */
    --oke-text-lg: 1.125rem;    /* 18px */
    --oke-text-xl: 1.25rem;     /* 20px */
    --oke-text-2xl: 1.5rem;     /* 24px */
    --oke-text-3xl: 1.875rem;   /* 30px */
    --oke-text-4xl: 2.25rem;    /* 36px */

    /* Font Weights */
    --oke-font-light: 300;
    --oke-font-normal: 400;
    --oke-font-medium: 500;
    --oke-font-semibold: 600;
    --oke-font-bold: 700;
    --oke-font-extrabold: 800;

    /* Line Heights */
    --oke-leading-none: 1;
    --oke-leading-tight: 1.25;
    --oke-leading-snug: 1.375;
    --oke-leading-normal: 1.5;
    --oke-leading-relaxed: 1.625;

    /* Letter Spacing */
    --oke-tracking-tight: -0.025em;
    --oke-tracking-normal: 0;
    --oke-tracking-wide: 0.025em;
    --oke-tracking-wider: 0.05em;
    --oke-tracking-widest: 0.1em;
}

/* ==========================================================================
   Spacing & Layout System
   ========================================================================== */
:root {
    /* Spacing Scale */
    --oke-space-0: 0;
    --oke-space-1: 0.25rem;   /* 4px */
    --oke-space-2: 0.5rem;    /* 8px */
    --oke-space-3: 0.75rem;   /* 12px */
    --oke-space-4: 1rem;      /* 16px */
    --oke-space-5: 1.25rem;   /* 20px */
    --oke-space-6: 1.5rem;    /* 24px */
    --oke-space-8: 2rem;      /* 32px */
    --oke-space-10: 2.5rem;   /* 40px */
    --oke-space-12: 3rem;     /* 48px */

    /* Border Radius */
    --oke-radius-none: 0;
    --oke-radius-sm: 0.25rem;   /* 4px */
    --oke-radius-md: 0.5rem;    /* 8px */
    --oke-radius-lg: 0.75rem;   /* 12px */
    --oke-radius-xl: 1rem;      /* 16px */
    --oke-radius-2xl: 1.5rem;   /* 24px */
    --oke-radius-full: 9999px;

    /* Layout Dimensions */
    --oke-sidebar-width: 260px;
    --oke-sidebar-collapsed: 72px;
    --oke-header-height: 64px;
    --oke-footer-height: 48px;

    /* Transitions */
    --oke-transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
    --oke-transition-base: 200ms cubic-bezier(0.4, 0, 0.2, 1);
    --oke-transition-slow: 300ms cubic-bezier(0.4, 0, 0.2, 1);
    --oke-transition-sidebar: 280ms cubic-bezier(0.4, 0, 0.2, 1);

    /* Z-Index Scale */
    --oke-z-sidebar: 1040;
    --oke-z-header: 1030;
    --oke-z-overlay: 1050;
    --oke-z-modal: 1060;
    --oke-z-toast: 1080;
    --oke-z-tooltip: 1090;
}

/* ==========================================================================
   Base Reset & Global Styles
   ========================================================================== */
*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    font-family: var(--oke-font-primary);
    font-size: var(--oke-text-base);
    font-weight: var(--oke-font-normal);
    line-height: var(--oke-leading-normal);
    color: var(--oke-text-primary);
    background-color: var(--oke-bg-body);
    margin: 0;
    padding: 0;
    transition: background-color var(--oke-transition-slow), color var(--oke-transition-slow);
}

/* Custom Scrollbar */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
::-webkit-scrollbar-track {
    background: var(--oke-scrollbar-bg);
}
::-webkit-scrollbar-thumb {
    background: var(--oke-scrollbar-thumb);
    border-radius: var(--oke-radius-full);
}
::-webkit-scrollbar-thumb:hover {
    background: var(--oke-scrollbar-thumb-hover);
}

/* Selection */
::selection {
    background-color: rgba(var(--oke-primary-rgb), 0.2);
    color: var(--oke-text-primary);
}

/* Links */
a {
    color: var(--oke-text-link);
    text-decoration: none;
    transition: color var(--oke-transition-fast);
}
a:hover {
    color: var(--oke-text-link-hover);
}

/* Headings */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--oke-font-primary);
    font-weight: var(--oke-font-semibold);
    color: var(--oke-text-primary);
    line-height: var(--oke-leading-tight);
    margin: 0 0 var(--oke-space-3) 0;
}

h1 { font-size: var(--oke-text-3xl); letter-spacing: var(--oke-tracking-tight); }
h2 { font-size: var(--oke-text-2xl); letter-spacing: var(--oke-tracking-tight); }
h3 { font-size: var(--oke-text-xl); }
h4 { font-size: var(--oke-text-lg); }
h5 { font-size: var(--oke-text-md); }
h6 { font-size: var(--oke-text-base); }

/* Paragraphs */
p {
    margin: 0 0 var(--oke-space-4) 0;
    color: var(--oke-text-secondary);
}

/* Images */
img {
    max-width: 100%;
    height: auto;
    border: 0;
}

/* Tables base reset */
table {
    border-collapse: collapse;
    width: 100%;
}

/* ==========================================================================
   Legacy CSS Override (neutraliza layout.css antigo)
   ========================================================================== */
.main {
    width: 100% !important;
    float: none !important;
    display: block !important;
}

.topo {
    display: none !important;
}

/* Neutraliza botões legados que conflitam com Bootstrap/OKE */
button, input[type=button], input[type=submit], input[type=reset] {
    background: none !important;
    background-image: none !important;
    -moz-box-shadow: none !important;
    -webkit-box-shadow: none !important;
    box-shadow: none !important;
    text-shadow: none !important;
    border: none !important;
    color: inherit !important;
    font-family: var(--oke-font-primary) !important;
}

/* Restore specific button classes */
.oke-btn,
.wc-tab,
.btn,
.btn-close,
.oke-theme-toggle,
.oke-header__toggle,
.oke-header__action-btn,
.wc-header__logout,
.login-submit,
.login-toggle-btn,
.login-theme-toggle {
    box-shadow: revert !important;
    text-shadow: revert !important;
}

/* Restore Bootstrap btn styles */
.btn {
    border: 1px solid transparent !important;
}

.btn-close {
    background: transparent url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e") center/1em auto no-repeat !important;
    border: 0 !important;
}

[data-theme="dark"] .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%);
}

/* Restore legacy .close button (Bootstrap 4 compat) */
button.close {
    background: transparent !important;
    border: none !important;
    color: var(--oke-text-secondary) !important;
    font-size: 1.5rem !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    opacity: 0.5 !important;
    padding: 0 !important;
    cursor: pointer;
}

button.close:hover {
    opacity: 1 !important;
    color: var(--oke-text-primary) !important;
}

button.close span {
    color: inherit !important;
}

/* Inside receipt modals, close button should use dark color */
#detalhesReceita button.close,
#detalhesDespesa button.close {
    color: #333333 !important;
}

#detalhesReceita button.close span,
#detalhesDespesa button.close span {
    color: #333333 !important;
}

/* Receipt modal header - better styling for radio buttons */
#detalhesReceita .modal-header,
#detalhesDespesa .modal-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: var(--oke-space-4) var(--oke-space-6) !important;
    gap: var(--oke-space-4) !important;
}

#detalhesReceita .modal-header .d-flex,
#detalhesDespesa .modal-header .d-flex {
    gap: var(--oke-space-4) !important;
}

#detalhesReceita .modal-header input[type="radio"],
#detalhesDespesa .modal-header input[type="radio"] {
    width: 16px !important;
    height: 16px !important;
    margin: 0 4px 0 0 !important;
    accent-color: var(--oke-primary);
    cursor: pointer;
    vertical-align: middle;
}

#detalhesReceita .modal-header .d-flex > div:first-child,
#detalhesDespesa .modal-header .d-flex > div:first-child {
    display: flex !important;
    align-items: center !important;
    gap: var(--oke-space-3) !important;
    background: var(--oke-bg-surface-secondary);
    padding: var(--oke-space-2) var(--oke-space-3) !important;
    border-radius: var(--oke-radius-md);
    font-size: var(--oke-text-sm);
    color: var(--oke-text-secondary);
}

#detalhesReceita .modal-header a i.fa-print,
#detalhesDespesa .modal-header a i.fa-print {
    color: var(--oke-primary) !important;
    transition: color 0.2s ease;
}

#detalhesReceita .modal-header a:hover i.fa-print,
#detalhesDespesa .modal-header a:hover i.fa-print {
    color: var(--oke-primary-hover) !important;
}

/* Fix legado: body overrides */
body {
    background: var(--oke-bg-body) !important;
    font-family: var(--oke-font-primary) !important;
    font-size: var(--oke-text-base) !important;
    color: var(--oke-text-primary) !important;
}

/* Fix legado: heading colors */
h1, h2, h3, h4, h5, h6 {
    color: var(--oke-text-primary) !important;
    margin: 0 !important;
    font-weight: var(--oke-font-semibold);
}

h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
    color: var(--oke-primary) !important;
}

/* Fix legado: table border-collapse */
table {
    border-collapse: collapse !important;
}

/* Fix: .table (Bootstrap) dark mode support */
.table {
    --bs-table-bg: transparent;
    --bs-table-color: var(--oke-text-primary);
    --bs-table-border-color: var(--oke-border-light);
    --bs-table-striped-bg: rgba(var(--oke-primary-rgb), 0.03);
    --bs-table-hover-bg: rgba(var(--oke-primary-rgb), 0.06);
    color: var(--oke-text-primary);
}

.table > thead > tr > th {
    background: var(--oke-bg-surface-secondary) !important;
    color: var(--oke-text-secondary) !important;
    font-weight: var(--oke-font-semibold);
    font-size: var(--oke-text-xs);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    border-bottom: 2px solid var(--oke-border) !important;
}

.table > tbody > tr > td {
    color: var(--oke-text-primary);
    border-bottom-color: var(--oke-border-light);
    vertical-align: middle;
}

.table-striped > tbody > tr:nth-of-type(odd) > td {
    background-color: rgba(var(--oke-primary-rgb), 0.02);
}

.table-hover > tbody > tr:hover > td {
    background-color: rgba(var(--oke-primary-rgb), 0.06) !important;
}

/* Legacy Bootstrap utilities/components that still appear in older templates */
[data-theme="dark"] .bg-light,
[data-theme="dark"] .bg-white {
    background-color: var(--oke-bg-surface-secondary) !important;
    color: var(--oke-text-primary) !important;
}

[data-theme="dark"] .text-dark {
    color: var(--oke-text-primary) !important;
}

[data-theme="dark"] .text-secondary {
    color: var(--oke-text-secondary) !important;
}

[data-theme="dark"] .text-muted {
    color: var(--oke-text-tertiary) !important;
}

[data-theme="dark"] .btn-light {
    background-color: var(--oke-bg-surface-secondary) !important;
    border-color: var(--oke-border-dark) !important;
    color: var(--oke-text-primary) !important;
}

[data-theme="dark"] .btn-light:hover,
[data-theme="dark"] .btn-light:focus,
[data-theme="dark"] .btn-light:active {
    background-color: var(--oke-bg-surface-hover) !important;
    border-color: var(--oke-border-dark) !important;
    color: var(--oke-text-primary) !important;
}

[data-theme="dark"] .card,
[data-theme="dark"] .list-group-item {
    background-color: var(--oke-bg-card) !important;
    border-color: var(--oke-border) !important;
    color: var(--oke-text-primary) !important;
}

[data-theme="dark"] .card-header,
[data-theme="dark"] .card-footer {
    background-color: var(--oke-bg-surface-secondary) !important;
    border-color: var(--oke-border) !important;
    color: var(--oke-text-primary) !important;
}

[data-theme="dark"] .list-group-item-action:hover,
[data-theme="dark"] .list-group-item-action:focus {
    background-color: rgba(var(--oke-primary-rgb), 0.08) !important;
    color: var(--oke-text-primary) !important;
}

[data-theme="dark"] .dropdown-menu {
    background: var(--oke-bg-card) !important;
    border-color: var(--oke-border) !important;
    box-shadow: var(--oke-shadow-lg) !important;
}

[data-theme="dark"] .dropdown-item {
    color: var(--oke-text-secondary) !important;
}

[data-theme="dark"] .dropdown-item:hover,
[data-theme="dark"] .dropdown-item:focus {
    background: rgba(var(--oke-primary-rgb), 0.1) !important;
    color: var(--oke-text-primary) !important;
}

[data-theme="dark"] .breadcrumb {
    background-color: transparent !important;
}

[data-theme="dark"] .breadcrumb-item a {
    color: var(--oke-text-secondary) !important;
}

[data-theme="dark"] .breadcrumb-item.active {
    color: var(--oke-text-primary) !important;
}

[data-theme="dark"] .breadcrumb-item + .breadcrumb-item::before {
    color: var(--oke-text-tertiary) !important;
}

[data-theme="dark"] .form-control,
[data-theme="dark"] .form-select {
    background-color: var(--oke-bg-input) !important;
    border-color: var(--oke-border-input) !important;
    color: var(--oke-text-primary) !important;
}

[data-theme="dark"] .form-control:focus,
[data-theme="dark"] .form-select:focus {
    border-color: var(--oke-border-focus) !important;
    box-shadow: var(--oke-shadow-focus) !important;
}

[data-theme="dark"] .form-control::placeholder {
    color: var(--oke-text-tertiary) !important;
}

[data-theme="dark"] .navbar-toggler .text-dark,
[data-theme="dark"] .navbar .text-dark {
    color: var(--oke-text-primary) !important;
}

/* Fix: links */
a {
    color: var(--oke-text-link);
}

a:hover {
    color: var(--oke-text-link-hover);
}

/* ==========================================================================
   Bootstrap 4 → 5 Utility Compatibility
   ml-*, mr-*, pl-*, pr-* foram renomeados para ms-*, me-*, ps-*, pe-*
   ========================================================================== */
.ml-1 { margin-left: 0.25rem !important; }
.ml-2 { margin-left: 0.5rem !important; }
.ml-3 { margin-left: 1rem !important; }
.ml-4 { margin-left: 1.5rem !important; }
.ml-5 { margin-left: 3rem !important; }
.ml-auto { margin-left: auto !important; }
.mr-1 { margin-right: 0.25rem !important; }
.mr-2 { margin-right: 0.5rem !important; }
.mr-3 { margin-right: 1rem !important; }
.mr-4 { margin-right: 1.5rem !important; }
.mr-5 { margin-right: 3rem !important; }
.mr-auto { margin-right: auto !important; }
.pl-1 { padding-left: 0.25rem !important; }
.pl-2 { padding-left: 0.5rem !important; }
.pl-3 { padding-left: 1rem !important; }
.pl-4 { padding-left: 1.5rem !important; }
.pl-5 { padding-left: 3rem !important; }
.pr-1 { padding-right: 0.25rem !important; }
.pr-2 { padding-right: 0.5rem !important; }
.pr-3 { padding-right: 1rem !important; }
.pr-4 { padding-right: 1.5rem !important; }
.pr-5 { padding-right: 3rem !important; }
.float-left { float: left !important; }
.float-right { float: right !important; }
.text-left { text-align: left !important; }
.text-right { text-align: right !important; }
.font-weight-bold { font-weight: 700 !important; }
.font-weight-normal { font-weight: 400 !important; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

/* Fix: .conteudo do layout antigo */
#conteudo {
    margin: 0 !important;
}

/* Fix: panel antigo (exceto recibos) */
.panel {
    width: 100% !important;
    margin: 0 0 var(--oke-space-4) 0 !important;
    background: var(--oke-bg-card);
    border: 1px solid var(--oke-border);
    border-radius: var(--oke-radius-lg);
}

/* ==========================================================================
   Recibos/Demonstrativos - Preservar layout de impressão
   Modais de recibo usam layout de tabela com fundo branco para impressão.
   O tema NÃO deve afetar o conteúdo do recibo.
   ========================================================================== */
#detalhesReceita .modal-body,
#detalhesDespesa .modal-body {
    background: #ffffff !important;
    color: #000000 !important;
    overflow: hidden !important;
}

#detalhesReceita .modal-body > .row,
#detalhesDespesa .modal-body > .row {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

#detalhesReceita .modal-body [style*="border: 1px solid"],
#detalhesDespesa .modal-body [style*="border: 1px solid"] {
    max-width: 100% !important;
    box-sizing: border-box !important;
}

#detalhesReceita .modal-body *,
#detalhesDespesa .modal-body * {
    color: inherit !important;
}

#detalhesReceita .modal-body h1,
#detalhesReceita .modal-body h2,
#detalhesReceita .modal-body h3,
#detalhesReceita .modal-body h4,
#detalhesReceita .modal-body h5,
#detalhesReceita .modal-body h6,
#detalhesDespesa .modal-body h1,
#detalhesDespesa .modal-body h2,
#detalhesDespesa .modal-body h3,
#detalhesDespesa .modal-body h4,
#detalhesDespesa .modal-body h5,
#detalhesDespesa .modal-body h6 {
    color: #000000 !important;
    margin: 10px 10px 10px 0 !important;
}

#detalhesReceita .modal-body .panel,
#detalhesDespesa .modal-body .panel {
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    margin: 0 !important;
    width: 100% !important;
    box-shadow: none !important;
    padding: 0 !important;
}

#detalhesReceita .modal-body .row,
#detalhesDespesa .modal-body .row {
    margin-left: 0 !important;
    margin-right: 0 !important;
    --bs-gutter-x: 0 !important;
}

#detalhesReceita .modal-dialog,
#detalhesDespesa .modal-dialog {
    margin: 2.5rem auto !important;
}

@media (min-width: 576px) {
    #detalhesReceita .modal-dialog,
    #detalhesDespesa .modal-dialog {
        min-height: calc(100% - 5rem) !important;
        display: flex !important;
        align-items: center !important;
    }
}

#detalhesReceita .cabecalho-demonstrativo,
#detalhesDespesa .cabecalho-demonstrativo {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 0.5rem !important;
}

#detalhesReceita .cabecalho-demonstrativo .cabecalho-imobiliaria-logo,
#detalhesDespesa .cabecalho-demonstrativo .cabecalho-imobiliaria-logo {
    flex: 0 0 150px !important;
    max-width: 150px !important;
    min-width: 110px !important;
}

#detalhesReceita .cabecalho-demonstrativo .cabecalho-imobiliaria-dados,
#detalhesDespesa .cabecalho-demonstrativo .cabecalho-imobiliaria-dados {
    flex: 1 1 auto !important;
    min-width: 0 !important;
}

#detalhesReceita .cabecalho-demonstrativo .cabecalho-imobiliaria-documentos,
#detalhesDespesa .cabecalho-demonstrativo .cabecalho-imobiliaria-documentos {
    flex: 0 0 220px !important;
    max-width: 220px !important;
}

#detalhesReceita .cabecalho-demonstrativo .cabecalho-imobiliaria-logo img,
#detalhesDespesa .cabecalho-demonstrativo .cabecalho-imobiliaria-logo img {
    max-height: 72px !important;
    width: auto !important;
}

@media (max-width: 991px) {
    #detalhesReceita .cabecalho-demonstrativo,
    #detalhesDespesa .cabecalho-demonstrativo {
        flex-wrap: wrap !important;
    }

    #detalhesReceita .cabecalho-demonstrativo .cabecalho-imobiliaria-logo,
    #detalhesDespesa .cabecalho-demonstrativo .cabecalho-imobiliaria-logo {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        justify-content: flex-start !important;
    }

    #detalhesReceita .cabecalho-demonstrativo .cabecalho-imobiliaria-documentos,
    #detalhesDespesa .cabecalho-demonstrativo .cabecalho-imobiliaria-documentos {
        flex: 1 1 100% !important;
        max-width: 100% !important;
        padding-top: 0 !important;
    }
}

#detalhesReceita .modal-body a,
#detalhesDespesa .modal-body a {
    color: #333333 !important;
}

#detalhesReceita .modal-body .table th,
#detalhesReceita .modal-body .table td,
#detalhesDespesa .modal-body .table th,
#detalhesDespesa .modal-body .table td {
    background: transparent !important;
    color: #000000 !important;
    border-color: #000000 !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    font-size: inherit !important;
}

#detalhesReceita .modal-body strong,
#detalhesReceita .modal-body span,
#detalhesDespesa .modal-body strong,
#detalhesDespesa .modal-body span {
    color: #000000 !important;
}

/* Hide broken images in receipts gracefully */
#detalhesReceita .modal-body img[alt],
#detalhesDespesa .modal-body img[alt] {
    min-height: 40px;
    object-fit: contain;
}

/* Preserve inline color styles for status */
#detalhesReceita .modal-body [style*="color: red"],
#detalhesReceita .modal-body [style*="color:red"],
#detalhesDespesa .modal-body [style*="color: red"],
#detalhesDespesa .modal-body [style*="color:red"] {
    color: red !important;
}

#detalhesReceita .modal-body [style*="color: green"],
#detalhesReceita .modal-body [style*="color:green"],
#detalhesDespesa .modal-body [style*="color: green"],
#detalhesDespesa .modal-body [style*="color:green"] {
    color: green !important;
}

/* ==========================================================================
   DEMONSTRATIVO PAGAMENTO MODAL - Proteger do tema
   O modal de demonstrativo de pagamento usa .card e .card-body do Bootstrap
   que são sobrescritos pelos estilos do tema. Precisamos manter o visual original.
   ========================================================================== */

/* Modal dialog - tamanho e posicionamento (largo o suficiente para o cabeçalho não encavalar) */
#demonstrativoPagamento .modal-dialog {
    max-width: 1100px !important;
    width: 95% !important;
    margin: 1.75rem auto !important;
}

/* Modal content - fundo branco, sem interferência do tema */
#demonstrativoPagamento .modal-content {
    background: #ffffff !important;
    color: #000000 !important;
    width: 100% !important;
    border: 1px solid #dee2e6 !important;
    border-radius: 0.5rem !important;
    box-shadow: 0 0.5rem 1rem rgba(0,0,0,.15) !important;
    overflow: hidden !important;
}

/* ============================================
   MODAL HEADER - botão fechar à DIREITA
   ============================================ */
#demonstrativoPagamento .modal-header {
    background: #f8f9fa !important;
    color: #000000 !important;
    border-bottom: 1px solid #dee2e6 !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 0.75rem 1rem !important;
}

#demonstrativoPagamento .modal-header .modal-title {
    color: #000000 !important;
    font-size: 1.1rem !important;
    font-weight: 600 !important;
    order: 0 !important;
    flex: 1 !important;
}

/* Botão de fechar (.close do Bootstrap 4) - posicionar à DIREITA */
#demonstrativoPagamento .modal-header .close,
#demonstrativoPagamento .modal-header .btn-close {
    color: #000000 !important;
    opacity: 0.6 !important;
    order: 1 !important;
    margin: 0 !important;
    padding: 0.5rem !important;
    background: transparent !important;
    border: none !important;
    font-size: 1.5rem !important;
    line-height: 1 !important;
    cursor: pointer !important;
    float: none !important;
    margin-left: auto !important;
}

#demonstrativoPagamento .modal-header .close:hover,
#demonstrativoPagamento .modal-header .btn-close:hover {
    opacity: 1 !important;
}

/* ============================================
   CARD LANCAMENTOS - conteúdo principal
   ============================================ */
#demonstrativoPagamento #cardLancamentos {
    background: #ffffff !important;
    color: #000000 !important;
    padding: 1rem !important;
    overflow-x: auto !important;
}

#demonstrativoPagamento .card {
    background: #ffffff !important;
    color: #000000 !important;
    border: 1px solid rgba(0,0,0,.125) !important;
    border-radius: 0.25rem !important;
    box-shadow: none !important;
    margin-bottom: 1rem !important;
}

#demonstrativoPagamento .card-header {
    background: #f8f9fa !important;
    color: #000000 !important;
    border-bottom: 1px solid rgba(0,0,0,.125) !important;
    padding: 0.75rem 1.25rem !important;
}

#demonstrativoPagamento .card-header h5,
#demonstrativoPagamento .card-header i {
    color: #000000 !important;
}

#demonstrativoPagamento .card-body {
    background: #ffffff !important;
    color: #000000 !important;
    padding: 1rem !important;
}

#demonstrativoPagamento .card-body * {
    color: inherit !important;
}

/* ============================================
   TABELAS - alinhamento correto
   ============================================ */
#demonstrativoPagamento .card-body [style*="border: 1px solid"],
#demonstrativoPagamento .card-body [style*="border:1px solid"] {
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow-x: auto !important;
}

#demonstrativoPagamento .card-body table {
    width: 100% !important;
    max-width: 100% !important;
    table-layout: auto !important;
    border-collapse: collapse !important;
}

#demonstrativoPagamento .card-body .table th,
#demonstrativoPagamento .card-body .table td {
    background: transparent !important;
    color: #000000 !important;
    border-color: #dee2e6 !important;
    padding: 0.4rem 0.5rem !important;
    font-size: 0.85rem !important;
    word-break: break-word !important;
}

#demonstrativoPagamento .card-body img[alt] {
    min-height: 40px;
    max-width: 200px !important;
    object-fit: contain;
}

/* ============================================
   TEXTOS E TIPOGRAFIA
   ============================================ */
#demonstrativoPagamento .card-body strong,
#demonstrativoPagamento .card-body span {
    color: #000000 !important;
}

#demonstrativoPagamento .card-body h1,
#demonstrativoPagamento .card-body h2,
#demonstrativoPagamento .card-body h3,
#demonstrativoPagamento .card-body h4,
#demonstrativoPagamento .card-body h5,
#demonstrativoPagamento .card-body h6 {
    color: #000000 !important;
    margin: 10px 10px 10px 0 !important;
}

/* ============================================
   GRID BOOTSTRAP - preservar margens
   ============================================ */
#demonstrativoPagamento .row {
    margin-left: -15px !important;
    margin-right: -15px !important;
}

#demonstrativoPagamento .col,
#demonstrativoPagamento [class*="col-"] {
    padding-left: 15px !important;
    padding-right: 15px !important;
}

/* ============================================
   CABEÇALHO DA IMOBILIÁRIA - evitar encavalamento
   ============================================ */
#demonstrativoPagamento .cabecalho-demonstrativo {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 0 !important;
}

#demonstrativoPagamento .cabecalho-demonstrativo .col-2 {
    flex: 0 0 auto !important;
    width: auto !important;
    max-width: 120px !important;
    min-width: 80px !important;
}

#demonstrativoPagamento .cabecalho-demonstrativo .col-7 {
    flex: 1 1 auto !important;
    width: auto !important;
    min-width: 0 !important;
    word-break: break-word !important;
}

#demonstrativoPagamento .cabecalho-demonstrativo .col-3 {
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: 150px !important;
    white-space: nowrap !important;
    text-align: right !important;
}

#demonstrativoPagamento .cabecalhoImobiliariaP1,
#demonstrativoPagamento .cabecalhoImobiliariaP2 {
    font-size: 12px !important;
    line-height: 1.5 !important;
}

#demonstrativoPagamento .cabecalho-demonstrativo img {
    max-width: 100% !important;
    max-height: 70px !important;
    object-fit: contain !important;
}

/* Preserve status colors inside demonstrativo */
#demonstrativoPagamento [style*="color: red"],
#demonstrativoPagamento [style*="color:red"] {
    color: red !important;
}

#demonstrativoPagamento [style*="color: green"],
#demonstrativoPagamento [style*="color:green"] {
    color: green !important;
}

#demonstrativoPagamento .bg-warning {
    background-color: #ffc107 !important;
    color: #000000 !important;
}

/* ============================================
   BOTÕES
   ============================================ */
#demonstrativoPagamento .btn {
    background-image: none !important;
    box-shadow: none !important;
    text-shadow: none !important;
}

#demonstrativoPagamento .btn-light {
    background: #f8f9fa !important;
    border: 1px solid #dee2e6 !important;
    color: #212529 !important;
}

/* ============================================
   RESPONSIVO - tela menor
   ============================================ */
@media (max-width: 768px) {
    #demonstrativoPagamento .modal-dialog {
        max-width: 98% !important;
        width: 98% !important;
        margin: 0.5rem auto !important;
    }
}

/* Fix: form antigo */
.form span label {
    color: var(--oke-text-secondary) !important;
}

.form span .input,
.input {
    border: 1px solid var(--oke-border-input) !important;
    border-radius: var(--oke-radius-md) !important;
    background: var(--oke-bg-input) !important;
    color: var(--oke-text-primary) !important;
    font-family: var(--oke-font-primary) !important;
}

/* Fix: fieldset/legend */
fieldset {
    border: 1px solid var(--oke-border);
    border-radius: var(--oke-radius-lg);
    padding: var(--oke-space-4);
    background: var(--oke-bg-card);
}

legend {
    color: var(--oke-text-primary);
    font-weight: var(--oke-font-semibold);
    font-size: var(--oke-text-md);
    padding: 0 var(--oke-space-2);
}

/* Fix: formVisualizar e formOportunidades */
.formVisualizar span,
.formOportunidades span {
    border-bottom-color: var(--oke-border-light) !important;
}

.formVisualizar span label,
.formOportunidades span label {
    background: var(--oke-bg-surface-secondary) !important;
    color: var(--oke-text-secondary) !important;
}

.formVisualizar span .bold {
    color: var(--oke-text-primary) !important;
}

/* Fix: accordion de filtros */
#filtros {
    background: var(--oke-bg-card);
    border: 1px solid var(--oke-border);
    border-radius: var(--oke-radius-lg);
    padding: var(--oke-space-4);
}

/* Fix: jQuery UI dialog para dark mode */
.ui-dialog {
    background: var(--oke-bg-card) !important;
    border: 1px solid var(--oke-border) !important;
    border-radius: var(--oke-radius-lg) !important;
    box-shadow: var(--oke-shadow-xl) !important;
}

.ui-dialog .ui-dialog-titlebar {
    background: var(--oke-bg-surface-secondary) !important;
    border-bottom: 1px solid var(--oke-border) !important;
    color: var(--oke-text-primary) !important;
}

.ui-dialog .ui-dialog-content {
    color: var(--oke-text-primary) !important;
    background: var(--oke-bg-card) !important;
}

.ui-widget-overlay {
    background: rgba(15, 23, 42, 0.5) !important;
    backdrop-filter: blur(4px);
}

/* Fix: jQuery UI tabs para dark mode */
.ui-tabs {
    background: transparent !important;
    border: none !important;
}

.ui-tabs .ui-tabs-nav {
    background: var(--oke-bg-surface-secondary) !important;
    border: 1px solid var(--oke-border) !important;
    border-radius: var(--oke-radius-lg) var(--oke-radius-lg) 0 0 !important;
}

.ui-tabs .ui-tabs-nav li a {
    color: var(--oke-text-secondary) !important;
}

.ui-tabs .ui-tabs-nav li.ui-tabs-active a {
    color: var(--oke-primary) !important;
    font-weight: var(--oke-font-semibold) !important;
}

.ui-tabs .ui-tabs-panel {
    background: var(--oke-bg-card) !important;
    border: 1px solid var(--oke-border) !important;
    border-top: none !important;
    border-radius: 0 0 var(--oke-radius-lg) var(--oke-radius-lg) !important;
    color: var(--oke-text-primary) !important;
}