/* Readability layer: loaded last. Keeps the brand colour but guarantees readable text in light and dark mode. */
:root { --accent-strong: #b3510f; --accent-strong-hover: #9a450d; }   /* the branding head replaces these with the shade of the chosen brand colour */

/* white text on the brand colour needs a deeper shade of it */
.btn-primary, a.btn-primary, button.btn-primary, .btn-primary-lux, a.btn-primary-lux,
.kd-help-btn, .cl-btn:not(.ghost), .cl-badge, .cl-filters button.on, .cl-item.is-new::after, .rank-badge.rank-top,
.nav-pills .nav-link.active, .nav-tabs .nav-link.active.bg-primary, .badge.bg-primary {
    background: var(--accent-strong) !important; border-color: var(--accent-strong) !important; color: #fff !important;
}
.btn-primary *, .kd-help-btn *, .cl-btn:not(.ghost) * { color: #fff !important; }
.btn-primary:hover, a.btn-primary:hover, button.btn-primary:hover, .kd-help-btn:hover, .cl-btn:not(.ghost):hover {
    background: var(--accent-strong-hover) !important; border-color: var(--accent-strong-hover) !important; color: #fff !important;
}
.btn-outline-primary { color: var(--accent-strong) !important; border-color: var(--accent-strong) !important; }
.btn-outline-primary:hover { background: var(--accent-strong) !important; color: #fff !important; }
.btn-success, a.btn-success, button.btn-success { background: #15803d !important; border-color: #15803d !important; color: #fff !important; }
.btn-success:hover { background: #166534 !important; border-color: #166534 !important; }
.btn-info, a.btn-info, button.btn-info { background: #0369a1 !important; border-color: #0369a1 !important; color: #fff !important; }
.btn-danger, a.btn-danger, button.btn-danger { background: #b91c1c !important; border-color: #b91c1c !important; color: #fff !important; }
.btn-secondary, a.btn-secondary, button.btn-secondary { background: #475569 !important; border-color: #475569 !important; color: #fff !important; }

/* light mode: the template's pale greys and neon greens are too faint on white */
html:not(.dark):not([data-color-mode="dark"]) {
    --cd-muted: #5b6b7f;
}
html:not(.dark):not([data-color-mode="dark"]) .text-muted,
html:not(.dark):not([data-color-mode="dark"]) .text-body-secondary,
html:not(.dark):not([data-color-mode="dark"]) .kpi-title,
html:not(.dark):not([data-color-mode="dark"]) .menu-header-text,
html:not(.dark):not([data-color-mode="dark"]) .side-role,
html:not(.dark):not([data-color-mode="dark"]) small.text-muted,
html:not(.dark):not([data-color-mode="dark"]) .layout-menu .menu-header,
html:not(.dark):not([data-color-mode="dark"]) .side-money span { color: #5b6b7f !important; }
html:not(.dark):not([data-color-mode="dark"]) .text-success, html:not(.dark):not([data-color-mode="dark"]) .is-plus, html:not(.dark):not([data-color-mode="dark"]) .kpi-value.text-success { color: #15803d !important; }
html:not(.dark):not([data-color-mode="dark"]) .text-warning, html:not(.dark):not([data-color-mode="dark"]) .is-due { color: #b45309 !important; }
html:not(.dark):not([data-color-mode="dark"]) .text-info { color: #0369a1 !important; }
html:not(.dark):not([data-color-mode="dark"]) .text-secondary { color: #475569 !important; }
html:not(.dark):not([data-color-mode="dark"]) .text-danger { color: #b91c1c !important; }
html:not(.dark):not([data-color-mode="dark"]) .badge.bg-label-success, html:not(.dark):not([data-color-mode="dark"]) .badge.bg-label-success.text-success { color: #166534 !important; background: #dcfce7 !important; }
html:not(.dark):not([data-color-mode="dark"]) .badge.bg-label-warning, html:not(.dark):not([data-color-mode="dark"]) .badge.bg-label-warning.text-warning { color: #92400e !important; background: #fef3c7 !important; }
html:not(.dark):not([data-color-mode="dark"]) .badge.bg-label-info, html:not(.dark):not([data-color-mode="dark"]) .badge.bg-label-info.text-info { color: #075985 !important; background: #e0f2fe !important; }
html:not(.dark):not([data-color-mode="dark"]) .badge.bg-label-secondary, html:not(.dark):not([data-color-mode="dark"]) .badge.bg-label-secondary.text-secondary { color: #334155 !important; background: #e2e8f0 !important; }
html:not(.dark):not([data-color-mode="dark"]) .badge.bg-label-danger, html:not(.dark):not([data-color-mode="dark"]) .badge.bg-label-danger.text-danger { color: #991b1b !important; background: #fee2e2 !important; }
html:not(.dark):not([data-color-mode="dark"]) .alert-info { color: #075985; }
html:not(.dark):not([data-color-mode="dark"]) .carrier-chip-amber { color: #92400e; }
html:not(.dark):not([data-color-mode="dark"]) .carrier-chip-emerald { color: #166534; }

/* dark mode */
html.dark .alert-primary, html[data-color-mode="dark"] .alert-primary { color: #fed7aa; }

/* brand-coloured TEXT on light surfaces uses the deeper shade too */
html:not(.dark):not([data-color-mode="dark"]) .text-primary,
html:not(.dark):not([data-color-mode="dark"]) .badge.bg-label-primary,
html:not(.dark):not([data-color-mode="dark"]) .badge.bg-label-primary.text-primary,
html:not(.dark):not([data-color-mode="dark"]) .cl .cl-tag.new,
html:not(.dark):not([data-color-mode="dark"]) .cl .cl-rhead .d,
html:not(.dark):not([data-color-mode="dark"]) .cl .cl-item a.go,
html:not(.dark):not([data-color-mode="dark"]) .cl .cl-btn.ghost,
html:not(.dark):not([data-color-mode="dark"]) .cl .cl-card-head h5 i { color: var(--accent-strong) !important; }
html:not(.dark):not([data-color-mode="dark"]) .layout-menu .menu-item.active > .menu-link,
html:not(.dark):not([data-color-mode="dark"]) .layout-menu .menu-item.active > .menu-link div { color: var(--accent-strong) !important; }
html:not(.dark):not([data-color-mode="dark"]) .alert-primary { color: #7c2d12; }
html:not(.dark):not([data-color-mode="dark"]) .btn-outline-secondary { color: #475569 !important; border-color: #94a3b8 !important; }
html:not(.dark):not([data-color-mode="dark"]) .btn-outline-secondary:hover { background: #475569 !important; color: #fff !important; }
.panel-bottom-nav a.active { color: var(--accent-strong) !important; }
html.dark .panel-bottom-nav a.active, html[data-color-mode="dark"] .panel-bottom-nav a.active { color: color-mix(in srgb, var(--accent-color, #F97316) 70%, #fff) !important; }
html:not(.dark):not([data-color-mode="dark"]) .alert-danger, html:not(.dark):not([data-color-mode="dark"]) .alert-danger * { color: #7f1d1d; }
html:not(.dark):not([data-color-mode="dark"]) .alert-danger .btn { color: #1f2937; }

/* dark mode: brand-coloured text and tinted alerts */
html.dark .btn-outline-primary, html[data-color-mode="dark"] .btn-outline-primary { color: color-mix(in srgb, var(--accent-color, #F97316) 70%, #fff) !important; border-color: color-mix(in srgb, var(--accent-color, #F97316) 70%, #fff) !important; }
html.dark .btn-outline-primary:hover, html[data-color-mode="dark"] .btn-outline-primary:hover { color: #fff !important; background: var(--accent-strong) !important; }
html.dark .alert-primary, html[data-color-mode="dark"] .alert-primary { background: rgba(249, 115, 22, .16) !important; border-color: rgba(249, 115, 22, .35) !important; color: #fed7aa !important; }
html.dark .alert-info, html[data-color-mode="dark"] .alert-info { background: rgba(14, 165, 233, .16) !important; color: #bae6fd !important; }
html.dark .alert-success, html[data-color-mode="dark"] .alert-success { background: rgba(34, 197, 94, .16) !important; color: #bbf7d0 !important; }
html.dark .alert-warning, html[data-color-mode="dark"] .alert-warning { background: rgba(245, 158, 11, .16) !important; color: #fde68a !important; }
html.dark .alert-danger, html[data-color-mode="dark"] .alert-danger { background: rgba(239, 68, 68, .16) !important; color: #fecaca !important; }
.badge.bg-danger { background-color: #b91c1c !important; color: #fff !important; }
.badge.bg-success { background-color: #15803d !important; color: #fff !important; }
html:not(.dark):not([data-color-mode="dark"]) .btn-outline-warning { color: #92400e !important; border-color: #b45309 !important; }
html:not(.dark):not([data-color-mode="dark"]) .btn-outline-info { color: #075985 !important; border-color: #0369a1 !important; }
html:not(.dark):not([data-color-mode="dark"]) .btn-outline-danger { color: #b91c1c !important; border-color: #b91c1c !important; }
html:not(.dark):not([data-color-mode="dark"]) .form-text, html:not(.dark):not([data-color-mode="dark"]) .page-link { color: #475569 !important; }
html:not(.dark):not([data-color-mode="dark"]) .apexcharts-legend-text { color: #334155 !important; }
html.dark .btn-warning, html[data-color-mode="dark"] .btn-warning { color: #1f2937 !important; }
html:not(.dark):not([data-color-mode="dark"]) .alert-warning, html:not(.dark):not([data-color-mode="dark"]) .alert-warning * { color: #78350f; }
html:not(.dark):not([data-color-mode="dark"]) .alert-warning .btn-warning { color: #1f2937; }
html:not(.dark):not([data-color-mode="dark"]) .fee-old { color: #64748b !important; }
html:not(.dark):not([data-color-mode="dark"]) .dr-link { color: var(--accent-strong) !important; }
.dr-tab.on { background: var(--accent-strong) !important; color: #fff !important; }
html.dark .fee-final.is-plus, html[data-color-mode="dark"] .fee-final.is-plus { color: #4ade80 !important; }
html.dark .page-link, html[data-color-mode="dark"] .page-link { color: #e2e8f0 !important; }
html.dark .badge.bg-label-secondary, html[data-color-mode="dark"] .badge.bg-label-secondary { color: #e2e8f0 !important; background: #334155 !important; }
.btn-warning, a.btn-warning, button.btn-warning { color: #1f2937 !important; }

/* public site */
.btn-primary-lux, a.btn-primary-lux, button.btn-primary-lux { background: var(--accent-strong) !important; border-color: var(--accent-strong) !important; color: #fff !important; }
.btn-primary-lux:hover { background: var(--accent-strong-hover) !important; }
html:not(.dark):not([data-color-mode="dark"]) .text-primary { color: var(--accent-strong) !important; }
html:not(.dark):not([data-color-mode="dark"]) .footer-text, html:not(.dark):not([data-color-mode="dark"]) .footer-text * { color: #475569 !important; }
html:not(.dark):not([data-color-mode="dark"]) .hero-badge { color: #7c2d12 !important; }
a.nav-link.active, a.kd-ig, .nw-new, .hero-view-tab.active { background: var(--accent-strong) !important; color: #fff !important; }

/* Charts: tooltips, axis labels and menus follow the page theme, whatever theme the chart was created with */
html:not(.dark):not([data-color-mode="dark"]) .apexcharts-tooltip,
html:not(.dark):not([data-color-mode="dark"]) .apexcharts-tooltip.apexcharts-theme-dark,
html:not(.dark):not([data-color-mode="dark"]) .apexcharts-tooltip.apexcharts-theme-light { background: #ffffff !important; color: #0f172a !important; border: 1px solid #cbd5e1 !important; box-shadow: 0 8px 24px rgba(15, 23, 42, .18) !important; }
html:not(.dark):not([data-color-mode="dark"]) .apexcharts-tooltip-title { background: #f1f5f9 !important; color: #0f172a !important; border-bottom: 1px solid #e2e8f0 !important; }
html:not(.dark):not([data-color-mode="dark"]) .apexcharts-tooltip *:not(.apexcharts-tooltip-marker):not(.apexcharts-tooltip-marker *) { color: #0f172a !important; }
html.dark .apexcharts-tooltip, html[data-color-mode="dark"] .apexcharts-tooltip,
html.dark .apexcharts-tooltip.apexcharts-theme-light, html[data-color-mode="dark"] .apexcharts-tooltip.apexcharts-theme-light { background: #1e293b !important; color: #f1f5f9 !important; border: 1px solid #475569 !important; box-shadow: 0 8px 24px rgba(0, 0, 0, .5) !important; }
html.dark .apexcharts-tooltip-title, html[data-color-mode="dark"] .apexcharts-tooltip-title { background: #0f172a !important; color: #f1f5f9 !important; border-bottom: 1px solid #334155 !important; }
html.dark .apexcharts-tooltip *:not(.apexcharts-tooltip-marker), html[data-color-mode="dark"] .apexcharts-tooltip *:not(.apexcharts-tooltip-marker) { color: #f1f5f9 !important; }
html.dark .apexcharts-xaxistooltip, html[data-color-mode="dark"] .apexcharts-xaxistooltip, html.dark .apexcharts-yaxistooltip, html[data-color-mode="dark"] .apexcharts-yaxistooltip { background: #1e293b !important; color: #f1f5f9 !important; border-color: #475569 !important; }
html:not(.dark):not([data-color-mode="dark"]) .apexcharts-xaxistooltip, html:not(.dark):not([data-color-mode="dark"]) .apexcharts-yaxistooltip { background: #fff !important; color: #0f172a !important; border-color: #cbd5e1 !important; }
html.dark .apexcharts-xaxistooltip-bottom:after, html[data-color-mode="dark"] .apexcharts-xaxistooltip-bottom:after { border-bottom-color: #1e293b !important; }
html.dark .apexcharts-xaxistooltip-bottom:before, html[data-color-mode="dark"] .apexcharts-xaxistooltip-bottom:before { border-bottom-color: #475569 !important; }
html.dark .apexcharts-text, html[data-color-mode="dark"] .apexcharts-text, html.dark .apexcharts-legend-text, html[data-color-mode="dark"] .apexcharts-legend-text { fill: #cbd5e1 !important; color: #cbd5e1 !important; }
html:not(.dark):not([data-color-mode="dark"]) .apexcharts-text { fill: #475569 !important; }
html.dark .apexcharts-menu, html[data-color-mode="dark"] .apexcharts-menu { background: #1e293b !important; border-color: #475569 !important; }
html.dark .apexcharts-menu-item:hover, html[data-color-mode="dark"] .apexcharts-menu-item:hover { background: #334155 !important; }
html.dark .apexcharts-gridline, html[data-color-mode="dark"] .apexcharts-gridline { stroke: #334155 !important; }

/* modals and notes */
html:not(.dark):not([data-color-mode="dark"]) .btn-outline-success { color: #166534 !important; border-color: #15803d !important; }
html:not(.dark):not([data-color-mode="dark"]) .btn-outline-success:hover { background: #15803d !important; color: #fff !important; }
html:not(.dark):not([data-color-mode="dark"]) .modal code { color: #9d174d; }
html.dark .modal .text-warning-emphasis, html[data-color-mode="dark"] .modal .text-warning-emphasis, html.dark .text-warning-emphasis, html[data-color-mode="dark"] .text-warning-emphasis { color: #fcd34d !important; }
html.dark .modal .text-muted, html[data-color-mode="dark"] .modal .text-muted { color: #cbd5e1 !important; }
html.dark .carrier-rate-note, html[data-color-mode="dark"] .carrier-rate-note { color: #e2e8f0 !important; }
html.dark .btn-outline-success, html[data-color-mode="dark"] .btn-outline-success { color: #86efac !important; border-color: #4ade80 !important; }
html.dark .btn-outline-success:hover, html[data-color-mode="dark"] .btn-outline-success:hover { background: #15803d !important; color: #fff !important; }
.btn-warning, a.btn-warning, button.btn-warning { background: #f59e0b !important; border-color: #f59e0b !important; color: #1f2937 !important; }