/*
 * SmartApp dark theme
 *
 * This file is loaded after Metronic and plugin styles. Keep dark-only
 * overrides under the root selector so the existing light theme is unchanged.
 */
html[data-theme="dark"] {
    --kr-bg: #111821;
    --kr-surface: #182231;
    --kr-surface-raised: #202C3B;
    --kr-surface-muted: #263244;
    --kr-border: #344154;
    --kr-border-strong: #526176;
    --kr-text: #F1F5F9;
    --kr-text-secondary: #CBD3DF;
    --kr-muted: #A7B1C2;
    --kr-subtle: #8793A5;
    --kr-primary: #35D0C7;
    --kr-primary-muted: rgba(53, 208, 199, 0.16);
    --kr-shadow: rgba(0, 0, 0, 0.36);
    color-scheme: dark;
}

html[data-theme="dark"] body,
html[data-theme="dark"] #app,
html[data-theme="dark"] .page,
html[data-theme="dark"] .wrapper,
html[data-theme="dark"] .content,
html[data-theme="dark"] .subheader {
    background-color: var(--kr-bg);
    color: var(--kr-text-secondary);
}

html[data-theme="dark"] ::selection {
    background: rgba(53, 208, 199, 0.35);
    color: var(--kr-text);
}

html[data-theme="dark"] a:not(.btn) {
    color: var(--kr-primary);
}

html[data-theme="dark"] a:not(.btn):hover {
    color: #67E2DB;
}

html[data-theme="dark"] hr,
html[data-theme="dark"] .border,
html[data-theme="dark"] .border-top,
html[data-theme="dark"] .border-right,
html[data-theme="dark"] .border-bottom,
html[data-theme="dark"] .border-left {
    border-color: var(--kr-border) !important;
}

/* Metronic color utilities */
html[data-theme="dark"] .bg-white,
html[data-theme="dark"] .bg-gray-100,
html[data-theme="dark"] .bg-gray-200 {
    background-color: var(--kr-surface) !important;
}

html[data-theme="dark"] .bg-light,
html[data-theme="dark"] .bg-secondary,
html[data-theme="dark"] .bg-gray-300,
html[data-theme="dark"] .bg-gray-400 {
    background-color: var(--kr-surface-muted) !important;
}

html[data-theme="dark"] .bg-light-white,
html[data-theme="dark"] .bg-light-secondary,
html[data-theme="dark"] .bg-light-light {
    background-color: var(--kr-surface-muted) !important;
}

html[data-theme="dark"] .bg-light-primary {
    background-color: #183C3A !important;
}

html[data-theme="dark"] .bg-light-success {
    background-color: #1D344D !important;
}

html[data-theme="dark"] .bg-light-info {
    background-color: #2F284D !important;
}

html[data-theme="dark"] .bg-light-warning {
    background-color: #3A3022 !important;
}

html[data-theme="dark"] .bg-light-danger {
    background-color: #40262C !important;
}

html[data-theme="dark"] .bg-light-dark {
    background-color: #303B4B !important;
}

html[data-theme="dark"] .text-dark,
html[data-theme="dark"] .text-dark-75,
html[data-theme="dark"] .text-gray-800,
html[data-theme="dark"] .text-gray-900 {
    color: var(--kr-text) !important;
}

html[data-theme="dark"] .text-dark-50,
html[data-theme="dark"] .text-gray-600,
html[data-theme="dark"] .text-gray-700 {
    color: var(--kr-text-secondary) !important;
}

html[data-theme="dark"] .text-muted,
html[data-theme="dark"] .text-secondary,
html[data-theme="dark"] .text-gray-400,
html[data-theme="dark"] .text-gray-500 {
    color: var(--kr-muted) !important;
}

html[data-theme="dark"] .separator {
    border-color: var(--kr-border) !important;
}

/* Application shell */
html[data-theme="dark"] .header-mobile,
html[data-theme="dark"] .aside,
html[data-theme="dark"] .aside .aside-primary,
html[data-theme="dark"] .aside .aside-secondary,
html[data-theme="dark"] .footer,
html[data-theme="dark"] .topbar {
    background-color: var(--kr-surface);
    color: var(--kr-text-secondary);
}

html[data-theme="dark"] #overlay-container,
html[data-theme="dark"] #overlay-container > .overlay-content > .d-flex.flex-column-fluid {
    background-color: var(--kr-bg) !important;
    color: var(--kr-text-secondary);
}

html[data-theme="dark"] .header-mobile,
html[data-theme="dark"] .aside,
html[data-theme="dark"] .offcanvas {
    box-shadow: 0 0.5rem 2rem var(--kr-shadow);
}

html[data-theme="dark"] .aside-secondary-enabled .aside .aside-primary {
    border-color: var(--kr-border);
}

html[data-theme="dark"] #kt_aside_menu_wrapper,
html[data-theme="dark"] #kt_aside_menu,
html[data-theme="dark"] .aside-menu,
html[data-theme="dark"] .aside-menu .menu-nav,
html[data-theme="dark"] .aside-menu .menu-submenu,
html[data-theme="dark"] .aside-menu .menu-subnav {
    background-color: var(--kr-surface) !important;
}

html[data-theme="dark"] .aside-menu .menu-nav > .menu-section {
    border-top: 1px solid var(--kr-border);
}

html[data-theme="dark"] .aside-menu .menu-nav > .menu-section:first-child {
    border-top: 0;
}

html[data-theme="dark"] .aside-menu .menu-nav .menu-section .menu-text,
html[data-theme="dark"] .aside-menu .menu-nav .menu-section .menu-icon {
    color: var(--kr-muted) !important;
}

html[data-theme="dark"] .aside-menu .menu-nav > .menu-item > .menu-heading,
html[data-theme="dark"] .aside-menu .menu-nav > .menu-item > .menu-link,
html[data-theme="dark"] .aside-menu .menu-nav .menu-submenu .menu-item > .menu-heading,
html[data-theme="dark"] .aside-menu .menu-nav .menu-submenu .menu-item > .menu-link,
html[data-theme="dark"] .navi .navi-item .navi-link,
html[data-theme="dark"] .nav .nav-link {
    color: var(--kr-text-secondary);
}

html[data-theme="dark"] .aside-menu .menu-nav .menu-item > .menu-heading,
html[data-theme="dark"] .aside-menu .menu-nav .menu-item > .menu-link {
    background-color: transparent !important;
}

html[data-theme="dark"] .aside-menu .menu-nav .menu-item > .menu-heading .menu-text,
html[data-theme="dark"] .aside-menu .menu-nav .menu-item > .menu-link .menu-text {
    color: var(--kr-text-secondary) !important;
}

html[data-theme="dark"] .aside-menu .menu-nav .menu-item > .menu-heading .menu-icon,
html[data-theme="dark"] .aside-menu .menu-nav .menu-item > .menu-heading .menu-arrow,
html[data-theme="dark"] .aside-menu .menu-nav .menu-item > .menu-link .menu-icon,
html[data-theme="dark"] .aside-menu .menu-nav .menu-item > .menu-link .menu-arrow {
    color: var(--kr-muted) !important;
}

html[data-theme="dark"] .aside-menu .menu-nav .menu-item > .menu-heading .menu-icon.svg-icon svg g [fill],
html[data-theme="dark"] .aside-menu .menu-nav .menu-item > .menu-link .menu-icon.svg-icon svg g [fill] {
    fill: currentColor !important;
}

html[data-theme="dark"] .aside-menu .menu-nav > .menu-item.menu-item-active > .menu-heading,
html[data-theme="dark"] .aside-menu .menu-nav > .menu-item.menu-item-active > .menu-link,
html[data-theme="dark"] .aside-menu .menu-nav .menu-item.menu-item-open > .menu-heading,
html[data-theme="dark"] .aside-menu .menu-nav .menu-item.menu-item-open > .menu-link,
html[data-theme="dark"] .aside-menu .menu-nav .menu-item.menu-item-here > .menu-heading,
html[data-theme="dark"] .aside-menu .menu-nav .menu-item.menu-item-here > .menu-link,
html[data-theme="dark"] .aside-menu .menu-nav .menu-item > .menu-link:hover,
html[data-theme="dark"] .navi .navi-item .navi-link:hover,
html[data-theme="dark"] .navi.navi-active .navi-item .navi-link.active,
html[data-theme="dark"] .nav .nav-link:hover {
    background-color: var(--kr-surface-muted) !important;
    color: var(--kr-primary) !important;
}

html[data-theme="dark"] .navi.navi-active .navi-item .navi-link.active .navi-text,
html[data-theme="dark"] .navi.navi-active .navi-item .navi-link.active .navi-icon,
html[data-theme="dark"] .navi.navi-active .navi-item .navi-link.active .navi-icon i {
    color: var(--kr-primary) !important;
}

html[data-theme="dark"] .aside-menu .menu-nav .menu-item.menu-item-active > .menu-heading .menu-text,
html[data-theme="dark"] .aside-menu .menu-nav .menu-item.menu-item-active > .menu-heading .menu-icon,
html[data-theme="dark"] .aside-menu .menu-nav .menu-item.menu-item-active > .menu-link .menu-text,
html[data-theme="dark"] .aside-menu .menu-nav .menu-item.menu-item-active > .menu-link .menu-icon,
html[data-theme="dark"] .aside-menu .menu-nav .menu-item.menu-item-open > .menu-heading .menu-text,
html[data-theme="dark"] .aside-menu .menu-nav .menu-item.menu-item-open > .menu-heading .menu-icon,
html[data-theme="dark"] .aside-menu .menu-nav .menu-item.menu-item-open > .menu-link .menu-text,
html[data-theme="dark"] .aside-menu .menu-nav .menu-item.menu-item-open > .menu-link .menu-icon,
html[data-theme="dark"] .aside-menu .menu-nav .menu-item.menu-item-here > .menu-heading .menu-text,
html[data-theme="dark"] .aside-menu .menu-nav .menu-item.menu-item-here > .menu-heading .menu-icon,
html[data-theme="dark"] .aside-menu .menu-nav .menu-item.menu-item-here > .menu-link .menu-text,
html[data-theme="dark"] .aside-menu .menu-nav .menu-item.menu-item-here > .menu-link .menu-icon,
html[data-theme="dark"] .aside-menu .menu-nav .menu-item > .menu-link:hover .menu-text,
html[data-theme="dark"] .aside-menu .menu-nav .menu-item > .menu-link:hover .menu-icon {
    color: var(--kr-primary) !important;
}

html[data-theme="dark"] .aside-menu .menu-nav .menu-item .menu-text,
html[data-theme="dark"] .aside-menu .menu-nav .menu-item .menu-arrow,
html[data-theme="dark"] .aside-menu .menu-nav .menu-item .menu-icon,
html[data-theme="dark"] .aside-menu .menu-nav .menu-item .menu-bullet,
html[data-theme="dark"] .navi .navi-item .navi-link .navi-text {
    color: inherit;
}

html[data-theme="dark"] .aside-secondary .list.list-hover .list-item {
    border: 1px solid transparent;
    transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

html[data-theme="dark"] .aside-secondary .list.list-hover .list-item:hover {
    background-color: var(--kr-surface-muted) !important;
    border-color: var(--kr-border);
}

html[data-theme="dark"] .aside-secondary .list.list-hover .list-item.active {
    background-color: #183C3A !important;
    border-color: #285C59;
    box-shadow: inset 3px 0 0 var(--kr-primary);
}

html[data-theme="dark"] .aside-secondary .list.list-hover .symbol.symbol-light .symbol-label {
    background-color: var(--kr-surface-raised) !important;
    color: var(--kr-text-secondary);
}

html[data-theme="dark"] .aside-secondary .list.list-hover .list-item:hover .symbol-label,
html[data-theme="dark"] .aside-secondary .list.list-hover .list-item.active .symbol-label {
    background-color: var(--kr-surface) !important;
}

html[data-theme="dark"] .aside-secondary .list.list-hover .list-item:hover .text-hover-primary,
html[data-theme="dark"] .aside-secondary .list.list-hover .list-item.active .text-hover-primary {
    color: var(--kr-primary) !important;
}

html[data-theme="dark"] svg [fill="#000000"],
html[data-theme="dark"] svg [fill="#000"],
html[data-theme="dark"] svg [fill="black"] {
    fill: currentColor;
}

/* Cards and content containers */
html[data-theme="dark"] .card,
html[data-theme="dark"] .card-header,
html[data-theme="dark"] .card-body,
html[data-theme="dark"] .card-footer,
html[data-theme="dark"] .offcanvas,
html[data-theme="dark"] .offcanvas-content,
html[data-theme="dark"] .quick-panel,
html[data-theme="dark"] .quick-user {
    background-color: var(--kr-surface);
    border-color: var(--kr-border);
    color: var(--kr-text-secondary);
}

html[data-theme="dark"] .card {
    box-shadow: 0 0.25rem 1.25rem rgba(0, 0, 0, 0.18);
}

html[data-theme="dark"] .card.card-custom > .card-header .card-title,
html[data-theme="dark"] .card.card-custom > .card-header .card-title .card-label,
html[data-theme="dark"] .card .card-header,
html[data-theme="dark"] .modal .modal-header .modal-title,
html[data-theme="dark"] h1,
html[data-theme="dark"] h2,
html[data-theme="dark"] h3,
html[data-theme="dark"] h4,
html[data-theme="dark"] h5,
html[data-theme="dark"] h6 {
    color: var(--kr-text);
}

html[data-theme="dark"] .card.card-custom > .card-header,
html[data-theme="dark"] .card > .card-footer {
    border-color: var(--kr-border);
}

html[data-theme="dark"] .card.bg-primary > .card-header,
html[data-theme="dark"] .card.bg-primary > .card-body,
html[data-theme="dark"] .card.bg-warning > .card-header,
html[data-theme="dark"] .card.bg-warning > .card-body {
    background-color: transparent;
}

html[data-theme="dark"] .dashboard-donation-stats {
    background-color: #1BC5BD;
    background-image: radial-gradient(circle, rgba(201, 247, 245, 0.4), #1BC5BD 70%);
}

html[data-theme="dark"] .dashboard-donation-stats > .card-header,
html[data-theme="dark"] .dashboard-donation-stats > .card-body {
    background-color: transparent;
}

html[data-theme="dark"] .dashboard-donation-stats .card-title,
html[data-theme="dark"] .dashboard-donation-stats .text-white {
    color: #FFFFFF !important;
}

html[data-theme="dark"] .dashboard-donation-stats .card-spacer.bg-white {
    background-color: var(--kr-surface-raised) !important;
    color: var(--kr-text);
}

html[data-theme="dark"] .dashboard-donation-stats .card-spacer .text-muted {
    color: var(--kr-muted) !important;
}

/* Forms */
html[data-theme="dark"] .form-group label,
html[data-theme="dark"] .form-label,
html[data-theme="dark"] .col-form-label,
html[data-theme="dark"] .form-check-label,
html[data-theme="dark"] .custom-control-label,
html[data-theme="dark"] fieldset legend {
    color: var(--kr-text-secondary);
}

html[data-theme="dark"] .form-control,
html[data-theme="dark"] .custom-select,
html[data-theme="dark"] .input-group-text,
html[data-theme="dark"] .form-control-solid,
html[data-theme="dark"] .input-group.input-group-solid .form-control,
html[data-theme="dark"] .input-group.input-group-solid .input-group-text,
html[data-theme="dark"] .stripe-card-element {
    background-color: var(--kr-surface-muted) !important;
    border-color: var(--kr-border) !important;
    color: var(--kr-text) !important;
}

html[data-theme="dark"] .input-group.input-group-solid {
    background-color: var(--kr-surface-muted);
    border-color: var(--kr-border);
}

html[data-theme="dark"] .form-control-plaintext {
    color: var(--kr-text) !important;
}

html[data-theme="dark"] .form-control:disabled,
html[data-theme="dark"] .form-control[readonly],
html[data-theme="dark"] .custom-select:disabled,
html[data-theme="dark"] .bootstrap-select.disabled > .dropdown-toggle,
html[data-theme="dark"] select:disabled,
html[data-theme="dark"] textarea:disabled,
html[data-theme="dark"] input:disabled {
    background-color: var(--kr-surface) !important;
    border-color: var(--kr-border) !important;
    color: var(--kr-muted) !important;
    opacity: 1;
}

html[data-theme="dark"] input[type="number"],
html[data-theme="dark"] input[type="number"].form-control {
    color: var(--kr-text) !important;
    -webkit-text-fill-color: var(--kr-text);
}

html[data-theme="dark"] input[type="number"]:disabled,
html[data-theme="dark"] input[type="number"][readonly] {
    color: var(--kr-text-secondary) !important;
    -webkit-text-fill-color: var(--kr-text-secondary);
    opacity: 1;
}

html[data-theme="dark"] .stripe-card-element {
    background-clip: padding-box;
    border: 1px solid;
    border-radius: 0.25rem;
    display: block;
    font-size: 1rem;
    line-height: 1.5;
    padding: 0.75rem;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    width: 100%;
}

html[data-theme="dark"] .form-control:focus,
html[data-theme="dark"] .custom-select:focus,
html[data-theme="dark"] .stripe-card-element:focus-within {
    background-color: var(--kr-surface-raised) !important;
    border-color: var(--kr-primary) !important;
    box-shadow: 0 0 0 0.2rem rgba(53, 208, 199, 0.18);
    color: var(--kr-text) !important;
}

html[data-theme="dark"] .form-control::placeholder,
html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder {
    color: var(--kr-subtle) !important;
    opacity: 1;
}

html[data-theme="dark"] select option,
html[data-theme="dark"] select optgroup {
    background-color: var(--kr-surface-raised);
    color: var(--kr-text);
}

html[data-theme="dark"] input[type="checkbox"],
html[data-theme="dark"] input[type="radio"],
html[data-theme="dark"] input[type="range"] {
    accent-color: var(--kr-primary);
}

html[data-theme="dark"] .checkbox > span,
html[data-theme="dark"] .radio > span,
html[data-theme="dark"] .switch input:empty ~ span::before {
    background-color: var(--kr-surface-muted);
    border-color: var(--kr-border-strong);
}

html[data-theme="dark"] input[type="file"] {
    color: var(--kr-text-secondary);
}

html[data-theme="dark"] input[type="file"]::file-selector-button,
html[data-theme="dark"] input[type="file"]::-webkit-file-upload-button {
    background-color: var(--kr-surface-muted);
    border-color: var(--kr-border);
    color: var(--kr-text);
}

html[data-theme="dark"] input[type="color"] {
    background-color: var(--kr-surface-muted);
    border-color: var(--kr-border);
}

html[data-theme="dark"] input[type="date"]::-webkit-calendar-picker-indicator,
html[data-theme="dark"] input[type="time"]::-webkit-calendar-picker-indicator,
html[data-theme="dark"] input[type="datetime-local"]::-webkit-calendar-picker-indicator,
html[data-theme="dark"] input[type="month"]::-webkit-calendar-picker-indicator,
html[data-theme="dark"] input[type="week"]::-webkit-calendar-picker-indicator {
    filter: invert(1);
}

html[data-theme="dark"] .validation-summary-errors,
html[data-theme="dark"] .validation-errors,
html[data-theme="dark"] .validation-message,
html[data-theme="dark"] .invalid-feedback {
    color: #FF7A88;
}

html[data-theme="dark"] .form-text {
    color: var(--kr-muted);
}

html[data-theme="dark"] .valid-feedback {
    color: #63E6BE;
}

html[data-theme="dark"] .form-floating > label {
    color: var(--kr-muted);
}

html[data-theme="dark"] .form-floating > .form-control:focus ~ label,
html[data-theme="dark"] .form-floating > .form-control:not(:placeholder-shown) ~ label {
    color: var(--kr-primary);
}

html[data-theme="dark"] input:-webkit-autofill,
html[data-theme="dark"] input:-webkit-autofill:hover,
html[data-theme="dark"] input:-webkit-autofill:focus,
html[data-theme="dark"] textarea:-webkit-autofill,
html[data-theme="dark"] select:-webkit-autofill {
    -webkit-text-fill-color: var(--kr-text);
    box-shadow: 0 0 0 1000px var(--kr-surface-muted) inset;
    caret-color: var(--kr-text);
}

/* Buttons, badges and pagination */
html[data-theme="dark"] .btn-light,
html[data-theme="dark"] .btn-secondary,
html[data-theme="dark"] .btn.btn-clean,
html[data-theme="dark"] .page-link {
    background-color: var(--kr-surface-muted);
    border-color: var(--kr-border);
    color: var(--kr-text-secondary);
}

html[data-theme="dark"] .btn-light:hover,
html[data-theme="dark"] .btn-secondary:hover,
html[data-theme="dark"] .btn.btn-clean:hover,
html[data-theme="dark"] .page-link:hover {
    background-color: var(--kr-border);
    border-color: var(--kr-border-strong);
    color: var(--kr-text);
}

html[data-theme="dark"] [class*="btn-light-"] {
    border-color: transparent;
}

html[data-theme="dark"] .label-light,
html[data-theme="dark"] [class*="label-light-"] {
    border: 1px solid rgba(255, 255, 255, 0.08);
}

html[data-theme="dark"] .pagination .page-item.disabled .page-link {
    background-color: var(--kr-surface);
    color: var(--kr-subtle);
}

/* Tables and lists */
html[data-theme="dark"] .table,
html[data-theme="dark"] .table th,
html[data-theme="dark"] .table td,
html[data-theme="dark"] table tbody tr,
html[data-theme="dark"] .list-group-item {
    background-color: transparent;
    border-color: var(--kr-border);
    color: var(--kr-text-secondary);
}

html[data-theme="dark"] .table thead th,
html[data-theme="dark"] .table .thead-light th {
    background-color: var(--kr-surface-muted);
    border-color: var(--kr-border);
    color: var(--kr-text);
}

html[data-theme="dark"] .table-hover tbody tr:hover,
html[data-theme="dark"] .table-active,
html[data-theme="dark"] .table-active > th,
html[data-theme="dark"] .table-active > td {
    background-color: var(--kr-surface-raised);
    color: var(--kr-text);
}

/* Menus, dialogs and notifications */
html[data-theme="dark"] .dropdown-menu,
html[data-theme="dark"] .modal-content,
html[data-theme="dark"] .modal-header,
html[data-theme="dark"] .modal-body,
html[data-theme="dark"] .modal-footer,
html[data-theme="dark"] .popover,
html[data-theme="dark"] .popover-header,
html[data-theme="dark"] .popover-body,
html[data-theme="dark"] .toast,
html[data-theme="dark"] .toast-header,
html[data-theme="dark"] .swal2-popup,
html[data-theme="dark"] .swal2-content,
html[data-theme="dark"] .swal2-title {
    background-color: var(--kr-surface-raised);
    border-color: var(--kr-border);
    color: var(--kr-text-secondary);
}

html[data-theme="dark"] .dropdown-item,
html[data-theme="dark"] .dropdown-menu > li > a {
    color: var(--kr-text-secondary);
}

html[data-theme="dark"] .dropdown-item:hover,
html[data-theme="dark"] .dropdown-item:focus,
html[data-theme="dark"] .dropdown-item.active,
html[data-theme="dark"] .dropdown-menu > li > a:hover {
    background-color: var(--kr-surface-muted);
    color: var(--kr-text);
}

html[data-theme="dark"] .modal-header,
html[data-theme="dark"] .modal-footer,
html[data-theme="dark"] .dropdown-divider {
    border-color: var(--kr-border);
}

html[data-theme="dark"] .modal-backdrop.show,
html[data-theme="dark"] .offcanvas-overlay {
    opacity: 0.7;
}

/* Login, signup, wizard and errors */
html[data-theme="dark"] .login,
html[data-theme="dark"] .login .login-container,
html[data-theme="dark"] .login .login-content,
html[data-theme="dark"] #kt_app_root {
    background-color: var(--kr-bg) !important;
    color: var(--kr-text-secondary);
}

html[data-theme="dark"] .login.login-4 .login-aside {
    background: linear-gradient(147deg, #123C43 0%, #111821 100%);
}

html[data-theme="dark"] .login.login-4 .wizard-step .wizard-icon,
html[data-theme="dark"] .wizard.wizard-4 .wizard-nav .wizard-steps .wizard-step {
    background-color: var(--kr-surface-muted);
}

html[data-theme="dark"] .login.login-4 .wizard-step .wizard-label .wizard-title,
html[data-theme="dark"] .login.login-4 .wizard-step .wizard-icon .wizard-number,
html[data-theme="dark"] .wizard.wizard-4 .wizard-nav .wizard-steps .wizard-step .wizard-wrapper {
    color: var(--kr-text);
}

html[data-theme="dark"] img[src$="kindreff-logo-black.png"] {
    content: url("/_content/SmartApp.Content/assets/media/img/kindreff-logo-white.png");
}

html[data-theme="dark"] [style*="color: black"] {
    color: var(--kr-text) !important;
}

html[data-theme="dark"] #blazor-error-ui {
    background-color: #42272A;
    color: #FFE2E5;
}

html[data-theme="dark"] .loading-progress circle:first-child {
    stroke: var(--kr-border);
}

/* Typeahead and plugin controls */
html[data-theme="dark"] .blazored-typeahead,
html[data-theme="dark"] .blazored-typeahead:hover,
html[data-theme="dark"] .blazored-typeahead:focus,
html[data-theme="dark"] .blazored-typeahead__input,
html[data-theme="dark"] .blazored-typeahead__results,
html[data-theme="dark"] .blazored-typeahead__result,
html[data-theme="dark"] .blazored-typeahead__active-item,
html[data-theme="dark"] .blazored-typeahead__result:hover,
html[data-theme="dark"] .blazored-typeahead__result:focus {
    background-color: var(--kr-surface-muted);
    border-color: var(--kr-border);
    color: var(--kr-text);
}

html[data-theme="dark"] .select2-container--default .select2-selection--single,
html[data-theme="dark"] .select2-container--default .select2-selection--multiple,
html[data-theme="dark"] .select2-dropdown,
html[data-theme="dark"] .select2-results__option,
html[data-theme="dark"] .bootstrap-select > .dropdown-toggle,
html[data-theme="dark"] .tagify,
html[data-theme="dark"] .tagify__input,
html[data-theme="dark"] .daterangepicker,
html[data-theme="dark"] .datepicker,
html[data-theme="dark"] .timepicker,
html[data-theme="dark"] .bootstrap-timepicker-widget {
    background-color: var(--kr-surface-muted) !important;
    border-color: var(--kr-border) !important;
    color: var(--kr-text) !important;
}

html[data-theme="dark"] .select2-container--default .select2-selection--single .select2-selection__rendered,
html[data-theme="dark"] .select2-container--default .select2-selection--multiple .select2-selection__choice,
html[data-theme="dark"] .select2-container--default .select2-search__field {
    color: var(--kr-text) !important;
}

html[data-theme="dark"] .select2-container--default .select2-selection--single .select2-selection__placeholder,
html[data-theme="dark"] .select2-container--default .select2-search__field::placeholder,
html[data-theme="dark"] .bootstrap-select.disabled > .dropdown-toggle .filter-option,
html[data-theme="dark"] .bootstrap-select > .dropdown-toggle.bs-placeholder,
html[data-theme="dark"] .bootstrap-select > .dropdown-toggle.bs-placeholder:hover,
html[data-theme="dark"] .bootstrap-select > .dropdown-toggle.bs-placeholder:focus {
    color: var(--kr-subtle) !important;
}

html[data-theme="dark"] .bootstrap-select .dropdown-menu li.disabled > a {
    background-color: transparent;
    color: var(--kr-subtle) !important;
}

html[data-theme="dark"] .tagify {
    --tag-bg: var(--kr-surface-raised);
    --tag-hover: var(--kr-border);
    --tag-text-color: var(--kr-text-secondary);
    --tag-text-color--edit: var(--kr-text);
}

html[data-theme="dark"] .tagify__input::before {
    color: var(--kr-subtle) !important;
}

html[data-theme="dark"] .select2-container--default .select2-results__option[aria-selected="true"],
html[data-theme="dark"] .select2-container--default .select2-results__option--highlighted,
html[data-theme="dark"] .datepicker table tr td.day:hover,
html[data-theme="dark"] .daterangepicker td.available:hover,
html[data-theme="dark"] .daterangepicker th.available:hover {
    background-color: var(--kr-surface-raised) !important;
    color: var(--kr-text) !important;
}

html[data-theme="dark"] .datepicker table tr td,
html[data-theme="dark"] .datepicker table tr th,
html[data-theme="dark"] .daterangepicker .calendar-table,
html[data-theme="dark"] .daterangepicker td,
html[data-theme="dark"] .daterangepicker th {
    background-color: var(--kr-surface-muted);
    border-color: var(--kr-border);
    color: var(--kr-text-secondary);
}

html[data-theme="dark"] .datepicker table tr td.old,
html[data-theme="dark"] .datepicker table tr td.new,
html[data-theme="dark"] .datepicker table tr td.disabled,
html[data-theme="dark"] .datepicker table tr td span.disabled,
html[data-theme="dark"] .daterangepicker td.off,
html[data-theme="dark"] .daterangepicker td.disabled {
    background-color: var(--kr-surface-muted);
    color: var(--kr-subtle);
}

html[data-theme="dark"] .datepicker table tr td span:hover,
html[data-theme="dark"] .datepicker .datepicker-switch:hover,
html[data-theme="dark"] .datepicker .prev:hover,
html[data-theme="dark"] .datepicker .next:hover,
html[data-theme="dark"] .datepicker tfoot th:hover,
html[data-theme="dark"] .bootstrap-timepicker-widget table td a:hover {
    background-color: var(--kr-surface-raised) !important;
    border-color: var(--kr-border) !important;
    color: var(--kr-text) !important;
}

html[data-theme="dark"] .datepicker-dropdown::after,
html[data-theme="dark"] .bootstrap-timepicker-widget.dropdown-menu::after {
    border-bottom-color: var(--kr-surface-muted) !important;
}

html[data-theme="dark"] .bootstrap-timepicker-widget table td a,
html[data-theme="dark"] .bootstrap-timepicker-widget table td input {
    color: var(--kr-text-secondary);
}

html[data-theme="dark"] .bootstrap-timepicker-widget table td input {
    background-color: var(--kr-surface-raised);
    border-color: var(--kr-border);
}

/* Radzen */
html[data-theme="dark"] .rz-dialog,
html[data-theme="dark"] .rz-dialog-content,
html[data-theme="dark"] .rz-textbox,
html[data-theme="dark"] .rz-textarea,
html[data-theme="dark"] .rz-numeric,
html[data-theme="dark"] .rz-datepicker,
html[data-theme="dark"] .rz-dropdown,
html[data-theme="dark"] .rz-dropdown-panel,
html[data-theme="dark"] .rz-multiselect,
html[data-theme="dark"] .rz-multiselect-panel,
html[data-theme="dark"] .rz-popup,
html[data-theme="dark"] .rz-menu,
html[data-theme="dark"] .rz-context-menu,
html[data-theme="dark"] .rz-notification-item,
html[data-theme="dark"] .rz-tooltip-content {
    background-color: var(--kr-surface-raised);
    border-color: var(--kr-border);
    color: var(--kr-text-secondary);
}

html[data-theme="dark"] .rz-dropdown-label,
html[data-theme="dark"] .rz-multiselect-label,
html[data-theme="dark"] .rz-inputtext {
    color: var(--kr-text);
}

html[data-theme="dark"] .rz-dropdown-label.rz-placeholder,
html[data-theme="dark"] .rz-multiselect-label.rz-placeholder,
html[data-theme="dark"] .rz-placeholder {
    color: var(--kr-subtle) !important;
}

html[data-theme="dark"] .rz-dropdown-trigger,
html[data-theme="dark"] .rz-dropdown-clear-icon,
html[data-theme="dark"] .rz-multiselect-trigger,
html[data-theme="dark"] .rz-calendar-button {
    color: var(--kr-muted);
}

html[data-theme="dark"] .rz-chip {
    background-color: var(--kr-surface-muted);
    border-color: var(--kr-border);
    color: var(--kr-text-secondary);
}

html[data-theme="dark"] .rz-state-disabled,
html[data-theme="dark"] .rz-disabled {
    color: var(--kr-subtle);
    opacity: 0.65;
}

html[data-theme="dark"] .rz-dropdown-item,
html[data-theme="dark"] .rz-multiselect-item,
html[data-theme="dark"] .rz-menuitem-link {
    color: var(--kr-text-secondary);
}

html[data-theme="dark"] .rz-dropdown-item:hover,
html[data-theme="dark"] .rz-dropdown-item.rz-state-highlight,
html[data-theme="dark"] .rz-multiselect-item:hover,
html[data-theme="dark"] .rz-multiselect-item.rz-state-highlight,
html[data-theme="dark"] .rz-menuitem-link:hover {
    background-color: var(--kr-surface-muted);
    color: var(--kr-text);
}

/* Editors and calendars */
html[data-theme="dark"] .ck.ck-editor__main > .ck-editor__editable,
html[data-theme="dark"] .ck.ck-toolbar,
html[data-theme="dark"] .ck.ck-dropdown__panel,
html[data-theme="dark"] .ck.ck-list,
html[data-theme="dark"] .ck.ck-input {
    background-color: var(--kr-surface-muted) !important;
    border-color: var(--kr-border) !important;
    color: var(--kr-text) !important;
}

html[data-theme="dark"] .ck.ck-button,
html[data-theme="dark"] .ck.ck-button .ck-button__label,
html[data-theme="dark"] .ck.ck-icon {
    color: var(--kr-text-secondary) !important;
}

html[data-theme="dark"] .ck.ck-editor__editable .ck-placeholder::before,
html[data-theme="dark"] .ck-placeholder::before {
    color: var(--kr-subtle) !important;
}

html[data-theme="dark"] .ck.ck-button:hover,
html[data-theme="dark"] .ck.ck-button.ck-on {
    background-color: var(--kr-surface-raised) !important;
}

html[data-theme="dark"] .fc-unthemed th,
html[data-theme="dark"] .fc-unthemed td,
html[data-theme="dark"] .fc-unthemed thead,
html[data-theme="dark"] .fc-unthemed tbody,
html[data-theme="dark"] .fc-unthemed .fc-divider,
html[data-theme="dark"] .fc-unthemed .fc-row,
html[data-theme="dark"] .fc-unthemed .fc-content,
html[data-theme="dark"] .fc-unthemed .fc-popover,
html[data-theme="dark"] .fc-unthemed .fc-list-view,
html[data-theme="dark"] .fc-unthemed .fc-list-heading td {
    background-color: var(--kr-surface);
    border-color: var(--kr-border);
    color: var(--kr-text-secondary);
}

html[data-theme="dark"] .fc-unthemed .fc-today {
    background-color: var(--kr-primary-muted);
}

/* Charts */
html[data-theme="dark"] .apexcharts-text,
html[data-theme="dark"] .apexcharts-title-text,
html[data-theme="dark"] .apexcharts-legend-text,
html[data-theme="dark"] .apexcharts-xaxis-label,
html[data-theme="dark"] .apexcharts-yaxis-label {
    fill: var(--kr-muted) !important;
    color: var(--kr-muted) !important;
}

html[data-theme="dark"] .apexcharts-gridline {
    stroke: var(--kr-border);
}

html[data-theme="dark"] .apexcharts-menu,
html[data-theme="dark"] .apexcharts-tooltip.apexcharts-theme-light,
html[data-theme="dark"] .apexcharts-tooltip.apexcharts-theme-light .apexcharts-tooltip-title,
html[data-theme="dark"] .apexcharts-xaxistooltip.apexcharts-theme-light {
    background: var(--kr-surface-raised) !important;
    border-color: var(--kr-border) !important;
    color: var(--kr-text-secondary) !important;
}

/* Theme toggle */
html[data-theme="dark"] .theme-toggle {
    background-color: var(--kr-surface-raised);
    border-color: var(--kr-border);
    box-shadow: 0 0.5rem 1.5rem var(--kr-shadow);
    color: #FFD166;
}

html[data-theme="dark"] .theme-toggle:hover {
    background-color: var(--kr-surface-muted);
    color: #FFE29A;
}

html[data-theme="dark"] .theme-toggle--aside {
    background-color: transparent;
    border-color: transparent;
    box-shadow: none;
}

html[data-theme="dark"] .theme-toggle--aside:hover {
    background-color: var(--kr-surface-muted);
}

html[data-theme="dark"] ::-webkit-scrollbar-track {
    background: var(--kr-bg);
}

html[data-theme="dark"] ::-webkit-scrollbar-thumb {
    background: var(--kr-border-strong);
}

@media print {
    html[data-theme="dark"],
    html[data-theme="dark"] body {
        color-scheme: light;
    }

    html[data-theme="dark"] img[src$="kindreff-logo-black.png"] {
        content: url("/_content/SmartApp.Content/assets/media/img/kindreff-logo-black.png");
    }
}