/* Dark Mode Styling */
body.dark-mode {
    background-color: #1a1a1a;
    color: #e0e0e0;
}

body.dark-mode .card {
    background-color: #2d2d2d;
    border-color: #404040;
    color: #e0e0e0;
}

body.dark-mode .card-header {
    background-color: #252525;
    border-bottom-color: #404040;
    color: #e0e0e0;
}

body.dark-mode .card-body {
    background-color: #2d2d2d;
}

body.dark-mode .table {
    color: #e0e0e0;
    border-color: #404040;
}

body.dark-mode .table thead th {
    background-color: #252525;
    border-color: #404040;
    color: #e0e0e0;
}

body.dark-mode .table tbody tr {
    background-color: #2d2d2d;
}

body.dark-mode .table tbody tr:hover {
    background-color: #353535;
}

body.dark-mode .table-striped tbody tr:nth-of-type(odd) {
    background-color: #2a2a2a;
}

body.dark-mode .form-control,
body.dark-mode .form-select {
    background-color: #353535;
    border-color: #505050;
    color: #e0e0e0;
}

body.dark-mode .form-control:focus,
body.dark-mode .form-select:focus {
    background-color: #3a3a3a;
    border-color: #1b6ec2;
    color: #e0e0e0;
}

body.dark-mode .form-control::placeholder {
    color: #888;
}

body.dark-mode .btn-primary {
    background-color: #1b6ec2;
    border-color: #1861ac;
    color: #fff;
}

body.dark-mode .btn-primary:hover {
    background-color: #1558a0;
    border-color: #134d85;
}

body.dark-mode .btn-secondary {
    background-color: #505050;
    border-color: #404040;
    color: #e0e0e0;
}

body.dark-mode .btn-secondary:hover {
    background-color: #5a5a5a;
    border-color: #4a4a4a;
}

body.dark-mode .btn-success {
    background-color: #28a745;
    border-color: #28a745;
}

body.dark-mode .btn-danger {
    background-color: #dc3545;
    border-color: #dc3545;
}

body.dark-mode .btn-warning {
    background-color: #ffc107;
    border-color: #ffc107;
    color: #000;
}

body.dark-mode .btn-info {
    background-color: #17a2b8;
    border-color: #17a2b8;
}

body.dark-mode .btn-light {
    background-color: #505050;
    border-color: #404040;
    color: #e0e0e0;
}

body.dark-mode .btn-dark {
    background-color: #1a1a1a;
    border-color: #000;
}

body.dark-mode .modal-content {
    background-color: #2d2d2d;
    border-color: #404040;
    color: #e0e0e0;
}

body.dark-mode .modal-header {
    background-color: #252525;
    border-bottom-color: #404040;
}

body.dark-mode .modal-footer {
    background-color: #252525;
    border-top-color: #404040;
}

body.dark-mode .alert-info {
    background-color: #1a3a4a;
    border-color: #17a2b8;
    color: #9dd9ec;
}

body.dark-mode .alert-success {
    background-color: #1a3a2a;
    border-color: #28a745;
    color: #9de7ad;
}

body.dark-mode .alert-warning {
    background-color: #3a3a1a;
    border-color: #ffc107;
    color: #ffe69c;
}

body.dark-mode .alert-danger {
    background-color: #3a1a1a;
    border-color: #dc3545;
    color: #f1aeb5;
}

/* Dark mode overrides for ERPAthos design system alerts */
body.dark-mode .erp-alert {
    background-color: #262626;
    border-color: #4d4d4d;
    color: #f5f5f5;
}

body.dark-mode .erp-alert-info {
    background-color: #1a3a4a;
    border-color: #17a2b8;
    color: #9dd9ec;
}

body.dark-mode .erp-alert-success {
    background-color: #1a3a2a;
    border-color: #28a745;
    color: #9de7ad;
}

body.dark-mode .erp-alert-warning {
    background-color: #3a3a1a;
    border-color: #ffc107;
    color: #ffe69c;
}

body.dark-mode .erp-alert-error {
    background-color: #3a1a1a;
    border-color: #dc3545;
    color: #f1aeb5;
}

/* Dark mode overrides for ERPAthos design system buttons */
body.dark-mode .erp-btn {
    color: #ffffff;
    background-color: #3a3a3a;
    border-color: #555555;
}

body.dark-mode .erp-btn-primary {
    color: #ffffff;
    background-color: #1b6ec2;
    border-color: #1b6ec2;
}

body.dark-mode .erp-btn-secondary {
    color: #ffffff;
    background-color: #4a4a4a;
    border-color: #6c757d;
}

body.dark-mode .erp-btn-info {
    color: #ffffff;
    background-color: #17a2b8;
    border-color: #17a2b8;
}

body.dark-mode .erp-btn-warning {
    color: #212529;
    background-color: #ffc107;
    border-color: #ffca2c;
}

body.dark-mode .erp-btn-danger {
    color: #ffffff;
    background-color: #dc3545;
    border-color: #dc3545;
}

/* Dark mode overrides for ERPAthos design system form fields */
body.dark-mode .erp-form-label {
    color: #e0e0e0;
}

body.dark-mode .erp-form-error {
    color: #f1aeb5;
}

/* Dark mode overrides for ERPAthos design system modals */
body.dark-mode .erp-modal-content {
    background-color: #2d2d2d;
    color: #e0e0e0;
    border-color: #404040;
}

body.dark-mode .erp-modal-header {
    background-color: #2d2d2d;
    border-bottom-color: #404040;
    color: #e0e0e0;
}

body.dark-mode .erp-modal-body {
    background-color: #2d2d2d;
    color: #e0e0e0;
}

body.dark-mode .erp-modal-footer {
    background-color: #2d2d2d;
    border-top-color: #404040;
}

body.dark-mode .nav-tabs {
    border-bottom-color: #505050;
}

body.dark-mode .nav-tabs .nav-link {
    color: #ffffff !important;
    background-color: #1b6ec2 !important;
    border-color: #1b6ec2 !important;
    border-bottom: 3px solid #1558a0 !important;
}

body.dark-mode .nav-tabs .nav-link:hover {
    color: #ffffff !important;
    background-color: #1558a0 !important;
    border-color: #1558a0 !important;
    border-bottom: 3px solid #0f4379 !important;
}

body.dark-mode .nav-tabs .nav-link.active {
    color: #ffffff !important;
    background-color: #f28c28 !important;
    border-color: #f28c28 !important;
    border-bottom: 3px solid #d97706 !important;
}

body.dark-mode .erp-tabs {
    border-bottom-color: #505050 !important;
}

body.dark-mode .erp-tabs .nav-link {
    color: #ffffff !important;
    background-color: #1b6ec2 !important;
    border-color: #1b6ec2 !important;
}

body.dark-mode .erp-tabs .nav-link:hover,
body.dark-mode .erp-tabs .nav-link:focus {
    color: #ffffff !important;
    background-color: #1b6ec2 !important;
    border-color: #1b6ec2 !important;
}

body.dark-mode .erp-tabs .nav-link.active {
    color: #ffffff !important;
    background-color: #f28c28 !important;
    border-color: #f28c28 !important;
}

body.dark-mode .erp-tabs .nav-link:focus-visible {
    outline: 2px solid #9fc5ff;
    outline-offset: 2px;
}

body.dark-mode .dropdown-menu {
    background-color: #2d2d2d;
    border-color: #404040;
}

body.dark-mode .dropdown-item {
    color: #e0e0e0;
}

body.dark-mode .dropdown-item:hover {
    background-color: #353535;
    color: #fff;
}

body.dark-mode .badge {
    background-color: #505050;
    color: #e0e0e0;
}

body.dark-mode .badge.bg-primary {
    background-color: #1b6ec2 !important;
}

body.dark-mode .badge.bg-success {
    background-color: #28a745 !important;
}

body.dark-mode .badge.bg-danger {
    background-color: #dc3545 !important;
}

body.dark-mode .badge.bg-warning {
    background-color: #ffc107 !important;
    color: #000 !important;
}

body.dark-mode .badge.bg-info {
    background-color: #17a2b8 !important;
}

body.dark-mode .badge.bg-secondary {
    background-color: #6c757d !important;
}

/* Strong overrides for things that may be forced white elsewhere (e.g., financial-statements.css) */
body.dark-mode h1,
body.dark-mode h2,
body.dark-mode h3,
body.dark-mode h4,
body.dark-mode h5,
body.dark-mode h6 {
    color: #e0e0e0 !important;
}

body.dark-mode .badge {
    background-color: #505050 !important;
    color: #e0e0e0 !important;
    border-color: #333 !important;
}

/* Override Bootstrap utility background classes (some files set these with !important) */
body.dark-mode .bg-success,
body.dark-mode .bg-primary,
body.dark-mode .bg-warning,
body.dark-mode .bg-info,
body.dark-mode .bg-light,
body.dark-mode .bg-white,
body.dark-mode .bg-body {
    background-color: #2d2d2d !important;
    color: #e0e0e0 !important;
    border-color: #404040 !important;
}

/* Also override explicit white backgrounds used for special components */
body.dark-mode .summary-badge,
body.dark-mode .financial-summary .badge,
body.dark-mode .report-badge {
    background-color: #505050 !important;
    color: #e0e0e0 !important;
}

/* If some components still force colours via inline styles or very specific selectors, this last-resort rule
   will attempt to neutralize white backgrounds for common containers used in app pages. Use sparingly. */
body.dark-mode .card .badge,
body.dark-mode .panel .badge,
body.dark-mode .card .summary,
body.dark-mode .card .report-value {
    background-color: #505050 !important;
    color: #e0e0e0 !important;
}

/* Global fallback overrides for elements not explicitly covered above */
body.dark-mode .page,
body.dark-mode main,
body.dark-mode article.content,
body.dark-mode .content,
body.dark-mode .container,
body.dark-mode .container-fluid,
body.dark-mode .row {
    background-color: #1a1a1a !important;
    color: #e0e0e0 !important;
}

/* Navbar / header / sticky areas */
body.dark-mode .navbar,
body.dark-mode .navbar.navbar-dark,
body.dark-mode .navbar-light,
body.dark-mode .top-row,
body.dark-mode header,
body.dark-mode .app-header,
body.dark-mode .page-header {
    background-color: #252525 !important;
    color: #e0e0e0 !important;
}

/* Override common Bootstrap background utility classes that may keep a white box */
body.dark-mode .bg-white,
body.dark-mode .bg-light,
body.dark-mode .bg-body {
    background-color: #2d2d2d !important;
    color: #e0e0e0 !important;
}

/* Text utilities that force dark text should be neutralized */
body.dark-mode .text-dark,
body.dark-mode .text-body {
    color: #e0e0e0 !important;
}

/* Make sure sidebar and top-row (headers) stay dark even if other styles interfere */
body.dark-mode .sidebar {
    background: linear-gradient(180deg, rgb(2, 20, 52) 0%, #1a0a28 70%) !important;
}
body.dark-mode .top-row {
    background-color: #252525 !important;
}

/* Toaster / notifications */
body.dark-mode .toast,
body.dark-mode .toast-header,
body.dark-mode .toast-body {
    background-color: #2d2d2d !important;
    color: #e0e0e0 !important;
    border-color: #404040 !important;
}

/* Dropdowns, modals and overlays */
body.dark-mode .dropdown-menu,
body.dark-mode .dropdown-menu.show {
    background-color: #2d2d2d !important;
    color: #e0e0e0 !important;
    border-color: #404040 !important;
}

body.dark-mode .modal-backdrop.show {
    background-color: rgba(0,0,0,0.65) !important;
}

/* Ensure cards/forms/buttons that use utility classes are covered */
body.dark-mode .card,
body.dark-mode .card-body,
body.dark-mode .card-header,
body.dark-mode .panel {
    background-color: #2d2d2d !important;
    color: #e0e0e0 !important;
    border-color: #404040 !important;
}

body.dark-mode .form-control,
body.dark-mode input.form-control,
body.dark-mode textarea.form-control,
body.dark-mode .form-select {
    background-color: #353535 !important;
    color: #e0e0e0 !important;
    border-color: #505050 !important;
}

/* Buttons that rely on outline or background utilities */
body.dark-mode .btn-outline-primary,
body.dark-mode .btn-outline-secondary,
body.dark-mode .btn-outline-light {
    background: transparent !important;
    color: #1b6ec2 !important;
    border-color: #1b6ec2 !important;
}

/* Ensure breadcrumb, list-group and pagination are dark */
body.dark-mode .breadcrumb,
body.dark-mode .list-group-item,
body.dark-mode .pagination .page-link {
    background-color: #2d2d2d !important;
    color: #e0e0e0 !important;
    border-color: #404040 !important;
}

/* Global catch-all: reduce risk of plain white elements by forcing background/text defaults
   This is deliberately last-resort and scoped to elements likely to contain content. */
body.dark-mode .content :where(div,section,header,aside,main,article) {
    background-color: transparent !important;
    color: inherit !important;
}

/* Last-resort overrides to catch inline styles or very specific selectors that force white backgrounds
   These are intentionally narrow and only active under body.dark-mode to minimise side-effects. */
body.dark-mode [style*="background-color: white"] {
    background-color: #2d2d2d !important;
    color: #e0e0e0 !important;
}
body.dark-mode [style*="background-color:#fff"] {
    background-color: #2d2d2d !important;
    color: #e0e0e0 !important;
}
body.dark-mode [style*="background-color: #fff"] {
    background-color: #2d2d2d !important;
    color: #e0e0e0 !important;
}
body.dark-mode [style*="background: white"] {
    background: #2d2d2d !important;
    color: #e0e0e0 !important;
}

/* Additional patterns to match other inline notations for white backgrounds */
body.dark-mode [style*="background-color:#ffffff"] {
    background-color: #2d2d2d !important;
    color: #e0e0e0 !important;
}
body.dark-mode [style*="background-color: #ffffff"] {
    background-color: #2d2d2d !important;
    color: #e0e0e0 !important;
}
body.dark-mode [style*="background:#ffffff"] {
    background: #2d2d2d !important;
    color: #e0e0e0 !important;
}
body.dark-mode [style*="rgb(255,255,255)"] {
    background-color: #2d2d2d !important;
    color: #e0e0e0 !important;
}
body.dark-mode [style*="rgb(255, 255, 255)"] {
    background-color: #2d2d2d !important;
    color: #e0e0e0 !important;
}

/* Neutralize inline color forcing dark text specifically */
body.dark-mode [style*="color: #000"] {
    color: #e0e0e0 !important;
}

/* End of last-resort overrides */

/* Also apply rules when <html> has dark-mode class (we add it in JS now) */
html.dark-mode, html.dark-mode body {
    background-color: #1a1a1a !important;
    color: #e0e0e0 !important;
}

/* Target direct children of .content/.page with increased specificity to avoid being overridden */
body.dark-mode .content > *,
html.dark-mode .content > *,
body.dark-mode .page > *,
html.dark-mode .page > * {
    background-color: transparent !important; /* let parent handle the page background */
    color: inherit !important;
}

/* If direct children still have white backgrounds, force them dark explicitly */
body.dark-mode .content > *[style*="background"],
html.dark-mode .content > *[style*="background"],
body.dark-mode .page > *[style*="background"],
html.dark-mode .page > *[style*="background"] {
    background-color: #2d2d2d !important;
    color: #e0e0e0 !important;
}

/* High-specificity fallback for main/article/section headers and panels */
html.dark-mode main,
html.dark-mode article,
html.dark-mode section,
html.dark-mode header,
html.dark-mode aside {
    background-color: #1a1a1a !important;
    color: #e0e0e0 !important;
}

/* End of dark-mode.css additions */