/* =========================================================
   MONEY POINT GLOBAL THEME
   Primary colours extracted from the supplied Money Point logo
   ========================================================= */

:root {
    --money-blue: #0256ED;
    --money-blue-dark: #003DA8;
    --money-blue-soft: #EAF2FF;

    --money-green: #2A8103;
    --money-green-dark: #1D5E00;
    --money-green-soft: #EDF8E8;

    --money-gold: #FFB400;
    --money-gold-dark: #B77A00;
    --money-gold-soft: #FFF7DB;

    --money-red: #FF0000;
    --money-red-dark: #C90000;
    --money-red-soft: #FFF0F0;

    --money-text: #1E293B;
    --money-muted: #64748B;
    --money-border: #D9E2F0;
    --money-white: #FFFFFF;
}

/* =========================================================
   PRIMARY BRAND COMPONENTS
   ========================================================= */

.bg-primary,
.btn-primary,
.badge-primary,
.label-primary,
.progress-bar-primary,
.modal-header.bg-primary {
    background-color: var(--money-blue) !important;
    border-color: var(--money-blue) !important;
    color: var(--money-white) !important;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary:not(:disabled):not(.disabled):active {
    background-color: var(--money-blue-dark) !important;
    border-color: var(--money-blue-dark) !important;
    color: var(--money-white) !important;
}

.btn-outline-primary {
    color: var(--money-blue) !important;
    border-color: var(--money-blue) !important;
    background: transparent !important;
}

.btn-outline-primary:hover,
.btn-outline-primary:focus,
.btn-outline-primary:active {
    background-color: var(--money-blue) !important;
    border-color: var(--money-blue) !important;
    color: var(--money-white) !important;
}

.text-primary,
a.text-primary {
    color: var(--money-blue) !important;
}

.border-primary {
    border-color: var(--money-blue) !important;
}

/* =========================================================
   SUCCESS / APPROVAL COMPONENTS
   ========================================================= */

.bg-success,
.btn-success,
.badge-success,
.label-success,
.progress-bar-success {
    background-color: var(--money-green) !important;
    border-color: var(--money-green) !important;
    color: var(--money-white) !important;
}

.btn-success:hover,
.btn-success:focus,
.btn-success:active,
.btn-success:not(:disabled):not(.disabled):active {
    background-color: var(--money-green-dark) !important;
    border-color: var(--money-green-dark) !important;
    color: var(--money-white) !important;
}

.btn-outline-success {
    color: var(--money-green) !important;
    border-color: var(--money-green) !important;
    background: transparent !important;
}

.btn-outline-success:hover,
.btn-outline-success:focus,
.btn-outline-success:active {
    background-color: var(--money-green) !important;
    border-color: var(--money-green) !important;
    color: var(--money-white) !important;
}

.alert-success {
    background-color: var(--money-green-soft) !important;
    border-color: rgba(42, 129, 3, 0.35) !important;
    color: var(--money-green-dark) !important;
}

.text-success,
a.text-success {
    color: var(--money-green) !important;
}

.border-success {
    border-color: var(--money-green) !important;
}

/* =========================================================
   WARNING / HIGHLIGHT COMPONENTS
   ========================================================= */

.bg-warning,
.btn-warning,
.badge-warning,
.label-warning,
.progress-bar-warning {
    background-color: var(--money-gold) !important;
    border-color: var(--money-gold) !important;
    color: #352500 !important;
}

.btn-warning:hover,
.btn-warning:focus,
.btn-warning:active,
.btn-warning:not(:disabled):not(.disabled):active {
    background-color: var(--money-gold-dark) !important;
    border-color: var(--money-gold-dark) !important;
    color: var(--money-white) !important;
}

.btn-outline-warning {
    color: var(--money-gold-dark) !important;
    border-color: var(--money-gold) !important;
    background: transparent !important;
}

.btn-outline-warning:hover,
.btn-outline-warning:focus,
.btn-outline-warning:active {
    background-color: var(--money-gold) !important;
    border-color: var(--money-gold) !important;
    color: #352500 !important;
}

.alert-warning {
    background-color: var(--money-gold-soft) !important;
    border-color: rgba(255, 180, 0, 0.45) !important;
    color: #624400 !important;
}

.text-warning,
a.text-warning {
    color: var(--money-gold-dark) !important;
}

.border-warning {
    border-color: var(--money-gold) !important;
}

/* =========================================================
   DANGER / DELETE / REJECT / FRAUD / ERRORS
   Red is intentionally retained for destructive actions.
   ========================================================= */

.text-danger,
.text-red,
.invalid-feedback,
.v-error,
.error,
.form-text.text-danger {
    color: var(--money-red-dark) !important;
}

.bg-danger,
.bg-red,
.badge-danger,
.label-danger,
.btn-danger,
.progress-bar-danger {
    background-color: var(--money-red) !important;
    border-color: var(--money-red) !important;
    color: var(--money-white) !important;
}

.btn-danger:hover,
.btn-danger:focus,
.btn-danger:active,
.btn-danger:not(:disabled):not(.disabled):active {
    background-color: var(--money-red-dark) !important;
    border-color: var(--money-red-dark) !important;
    color: var(--money-white) !important;
}

.btn-outline-danger {
    color: var(--money-red-dark) !important;
    border-color: var(--money-red) !important;
    background-color: transparent !important;
}

.btn-outline-danger:hover,
.btn-outline-danger:focus,
.btn-outline-danger:active {
    background-color: var(--money-red) !important;
    border-color: var(--money-red) !important;
    color: var(--money-white) !important;
}

.alert-danger {
    background-color: var(--money-red-soft) !important;
    border-color: rgba(255, 0, 0, 0.32) !important;
    color: var(--money-red-dark) !important;
}

.border-danger,
[class*="border-red"] {
    border-color: var(--money-red) !important;
}

.table-danger,
.table-danger > th,
.table-danger > td {
    background-color: var(--money-red-soft) !important;
    color: var(--money-red-dark) !important;
}

a.text-danger:hover,
a.text-red:hover {
    color: var(--money-red-dark) !important;
}

.swal2-icon.swal2-error {
    border-color: var(--money-red) !important;
    color: var(--money-red) !important;
}

.swal2-icon.swal2-error [class^="swal2-x-mark-line"] {
    background-color: var(--money-red) !important;
}

/* =========================================================
   NAVIGATION
   ========================================================= */

.horizontal-nav {
    background: var(--money-blue) !important;
    border-color: var(--money-blue-dark) !important;
}

.horizontal-menu > li > a {
    color: rgba(255, 255, 255, 0.92) !important;
}

.horizontal-menu > li.active > a,
.horizontal-menu > li > a:hover,
.horizontal-menu > li.show > a {
    background-color: var(--money-blue-dark) !important;
    color: var(--money-white) !important;
}

.horizontal-menu .dropdown-menu {
    border-top: 3px solid var(--money-gold) !important;
}

.horizontal-menu .dropdown-menu a {
    color: var(--money-text) !important;
}

.horizontal-menu .dropdown-menu a:hover,
.horizontal-menu .dropdown-menu a:focus,
.horizontal-menu .dropdown-menu .active > a {
    background-color: var(--money-blue-soft) !important;
    color: var(--money-blue-dark) !important;
}

.metismenu li.active > a,
.metismenu a:hover,
.metismenu a:focus {
    background-color: var(--money-blue) !important;
    color: var(--money-white) !important;
}

.dropdown-item.active,
.dropdown-item:active {
    background-color: var(--money-blue) !important;
    color: var(--money-white) !important;
}

/* =========================================================
   HEADERS, CARDS AND PAGE TITLES
   ========================================================= */

.card-header,
.panel-heading,
.portlet-title,
.box-header,
.section-header,
.module-header,
.page-card-header,
.report-header {
    border-color: var(--money-border);
}

.card-header.bg-primary,
.panel-heading.bg-primary,
.portlet-title.bg-primary,
.box-header.bg-primary,
.section-header.bg-primary,
.module-header.bg-primary,
.page-card-header.bg-primary,
.report-header.bg-primary {
    background: linear-gradient(
        135deg,
        var(--money-blue),
        var(--money-blue-dark)
    ) !important;
    color: var(--money-white) !important;
}

.page-title-area .page-title {
    color: var(--money-blue-dark) !important;
    font-weight: 700;
}

.card {
    border-color: var(--money-border);
}

.card-title {
    color: var(--money-text);
}

/* =========================================================
   FORMS AND SELECT CONTROLS
   ========================================================= */

.form-control,
.custom-select,
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
    border-color: var(--money-border) !important;
}

.form-control:focus,
.custom-select:focus,
.select2-container--default.select2-container--focus
    .select2-selection--single,
.select2-container--default.select2-container--focus
    .select2-selection--multiple,
.select2-container--default .select2-selection--single:focus {
    border-color: var(--money-blue) !important;
    box-shadow: 0 0 0 0.15rem rgba(2, 86, 237, 0.18) !important;
}

.custom-control-input:checked ~ .custom-control-label::before {
    background-color: var(--money-blue) !important;
    border-color: var(--money-blue) !important;
}

input[type="checkbox"]:checked,
input[type="radio"]:checked {
    accent-color: var(--money-blue);
}

/* =========================================================
   TABLES AND PAGINATION
   ========================================================= */

.table thead th {
    border-bottom-color: var(--money-blue) !important;
}

.table-hover tbody tr:hover {
    background-color: var(--money-blue-soft) !important;
}

.page-item.active .page-link {
    background-color: var(--money-blue) !important;
    border-color: var(--money-blue) !important;
    color: var(--money-white) !important;
}

.page-link {
    color: var(--money-blue) !important;
}

.page-link:hover {
    background-color: var(--money-blue-soft) !important;
    border-color: var(--money-blue) !important;
    color: var(--money-blue-dark) !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
    background: var(--money-blue) !important;
    border-color: var(--money-blue) !important;
    color: var(--money-white) !important;
}

/* =========================================================
   LINKS, BADGES AND INFORMATIONAL ELEMENTS
   ========================================================= */

a {
    color: var(--money-blue);
}

a:hover,
a:focus {
    color: var(--money-blue-dark);
}

.badge-info,
.bg-info,
.btn-info {
    background-color: var(--money-blue) !important;
    border-color: var(--money-blue) !important;
    color: var(--money-white) !important;
}

.btn-info:hover,
.btn-info:focus,
.btn-info:active {
    background-color: var(--money-blue-dark) !important;
    border-color: var(--money-blue-dark) !important;
    color: var(--money-white) !important;
}

.alert-info {
    background-color: var(--money-blue-soft) !important;
    border-color: rgba(2, 86, 237, 0.28) !important;
    color: var(--money-blue-dark) !important;
}

/* =========================================================
   LEGACY INLINE TRAVO / BANKORA COLOUR CORRECTIONS
   ========================================================= */

button[style*="#087a52"],
span[style*="#087a52"],
div[style*="#087a52"],
a[style*="#087a52"],
button[style*="#007a53"],
span[style*="#007a53"],
div[style*="#007a53"],
a[style*="#007a53"] {
    border-color: var(--money-blue) !important;
}

button[style*="background: #087a52"],
button[style*="background-color: #087a52"],
span[style*="background: #087a52"],
span[style*="background-color: #087a52"],
div[style*="background: #087a52"],
div[style*="background-color: #087a52"],
a[style*="background: #087a52"],
a[style*="background-color: #087a52"],
button[style*="background: #007a53"],
button[style*="background-color: #007a53"],
span[style*="background: #007a53"],
span[style*="background-color: #007a53"],
div[style*="background: #007a53"],
div[style*="background-color: #007a53"],
a[style*="background: #007a53"],
a[style*="background-color: #007a53"] {
    background: var(--money-blue) !important;
    background-color: var(--money-blue) !important;
    color: var(--money-white) !important;
}

/* Preserve hard-coded danger actions as red. */
button[style*="background: red"],
button[style*="background-color: red"],
span[style*="background: red"],
span[style*="background-color: red"],
div[style*="background: red"],
div[style*="background-color: red"],
a[style*="background: red"],
a[style*="background-color: red"],
button[style*="background: #dc3545"],
button[style*="background-color: #dc3545"],
span[style*="background: #dc3545"],
span[style*="background-color: #dc3545"],
div[style*="background: #dc3545"],
div[style*="background-color: #dc3545"],
a[style*="background: #dc3545"],
a[style*="background-color: #dc3545"] {
    background: var(--money-red) !important;
    background-color: var(--money-red) !important;
    border-color: var(--money-red) !important;
    color: var(--money-white) !important;
}

/* =========================================================
   COMPACT FILTER CONTROLS
   ========================================================= */

.page-title-area {
    margin-bottom: 12px !important;
}

.page-title-area .row.py-3 {
    padding-top: 8px !important;
    padding-bottom: 8px !important;
}

.page-title-area .page-title {
    font-size: 25px;
    line-height: 1.2;
    margin-bottom: 0;
}

.page-title-area .dropdown.float-right,
.page-title-area .dropdown.float {
    margin-top: 0;
}

.page-title-area .dropdown-toggle.btn,
.compact-filter .btn,
.filter-toolbar .btn {
    min-height: 34px;
    padding: 6px 12px !important;
    font-size: 12px !important;
    line-height: 1.25;
    border-radius: 5px;
}

.page-title-area .dropdown-menu {
    font-size: 13px;
    padding: 6px 0;
}

.page-title-area .dropdown-item {
    padding: 6px 14px;
}

#customDateModal .modal-dialog {
    max-width: 380px;
}

#customDateModal .modal-header,
#customDateModal .modal-footer {
    padding: 10px 14px;
}

#customDateModal .modal-body {
    padding: 14px;
}

#customDateModal .form-group {
    margin-bottom: 10px;
}

#customDateModal label {
    font-size: 13px;
    margin-bottom: 4px;
}

#customDateModal .form-control {
    min-height: 34px;
    height: 34px;
    padding: 5px 9px;
    font-size: 13px;
}

.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter {
    margin-bottom: 10px;
}

.dataTables_wrapper .dataTables_length label,
.dataTables_wrapper .dataTables_filter label {
    font-size: 13px;
    margin-bottom: 0;
}

.dataTables_wrapper .dataTables_length select {
    width: 86px !important;
    height: 34px !important;
    min-height: 34px !important;
    padding: 4px 8px !important;
    font-size: 13px !important;
}

.dataTables_wrapper .dataTables_filter input {
    width: 210px !important;
    height: 34px !important;
    min-height: 34px !important;
    padding: 5px 9px !important;
    font-size: 13px !important;
}

.filter-select,
.filter-toolbar .form-control,
.compact-filter .form-control,
.report-filter .form-control,
.report-filter .custom-select,
.approval-filter .form-control,
.approval-filter .custom-select {
    max-width: 220px;
    min-height: 34px !important;
    height: 34px !important;
    padding: 5px 9px !important;
    font-size: 13px !important;
}

.filter-toolbar,
.compact-filter,
.report-filter,
.approval-filter {
    gap: 10px;
    align-items: flex-end;
}

.filter-toolbar label,
.compact-filter label,
.report-filter label,
.approval-filter label {
    font-size: 13px;
    margin-bottom: 4px;
}

/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 767.98px) {
    .page-title-area .page-title {
        font-size: 22px;
    }

    .page-title-area .dropdown.float-right,
    .page-title-area .dropdown.float {
        margin-top: 8px;
    }

    .dataTables_wrapper .dataTables_filter input,
    .filter-select,
    .filter-toolbar .form-control,
    .compact-filter .form-control,
    .report-filter .form-control,
    .approval-filter .form-control {
        width: 100% !important;
        max-width: 100%;
    }
}