@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');

:root {
    --custom-blue: #2868c2;
    --custom-red: #ff6661;
    --custom-orange: #fba81f;
    --custom-green: #4ca971;

    --custom-dark-gray: #292929;
    --custom-medium-gray: #62606c;
    --custom-light-gray: #e2e2e4;
    --custom-very-light-gray: #f7f6f9;
    --custom-off-white: #ffffff;

    --bs-primary: var(--custom-blue);
    --bs-primary-rgb: 40, 104, 194;
    --app-font-family: "Inter", sans-serif;
    --app-body-font-size: 13px;
    --app-text-xs-size: 12px;
    --app-text-sm-size: var(--app-body-font-size);
    --app-text-sm-plus-size: 0.875rem;
    --app-text-caption-size: 0.9rem;
    --app-text-meta-size: 0.95rem;
    --app-text-md-size: 16px;
    --app-text-lg-size: 18px;
    --app-text-lead-size: 1.2rem;
    --app-text-xl-size: 20px;
    --app-text-2xl-size: 22px;
    --app-text-3xl-size: 32px;
    --app-text-4xl-size: 2.5rem;
    --app-metric-value-md-size: 1.8rem;
    --app-h1-size: 36px;
    --app-h1-weight: 500;
    --app-h2-size: 22px;
    --app-h2-weight: 600;
    --app-h3-size: 18px;
    --app-h3-weight: 500;
    --app-stat-card-h2-size: 30px;
    --app-stat-card-h2-weight: 600;
    --app-top-card-h4-size: 38px;
    --app-top-card-h4-weight: 600;
    --app-icon-md-size: 16px;
    --app-icon-lg-size: 34px;
    --app-icon-xl-size: 1.7rem;
    --app-icon-2xl-size: 2rem;
    --app-font-weight-normal: 400;
    --app-font-weight-medium: 500;
    --app-font-weight-semibold: 600;
    --app-font-weight-bold: 700;
    --app-button-font-weight: 400;
    --app-table-head-font-weight: 600;
    --primary-color: var(--custom-blue);
    --success-color: var(--custom-green);
    --warning-color: var(--custom-orange);
    --danger-color: var(--custom-red);
    --info-color: var(--custom-blue);
    --light-color: #f8fafc;
    --dark-color: var(--custom-dark-gray);
    --border-color: var(--custom-light-gray);
    --secondary-color: var(--custom-medium-gray);
}

[data-bs-theme='light'] {
    --bs-body-bg: var(--custom-very-light-gray);
    --bs-body-color: var(--custom-dark-gray);
    --bs-heading-color: var(--custom-dark-gray);
    --bs-heading-text: var(--custom-dark-gray);
    --bg-secondary-color: var(--custom-medium-gray);
    --stat-card-text-color: var(--custom-medium-gray);
    --live-badge-color: var(--custom-medium-gray);
    --bs-card-title-icon: #737373;
    --bs-top-card-text: var(--custom-medium-gray);
    --bs-highlighted-label-text: var(--custom-medium-gray);
    --row-details-bg: #f8fafc;
    --action-btn-hover-bg: #f8fafc;
    --table-hover-bg: #f8fafc;
    --table-td-color: var(--custom-medium-gray);
    --table-border-color: #e5e7eb;
    --top-card-shadow: 4px 4px 4px 0 #e5e5e566;
    --secondary-color: var(--custom-medium-gray);
}

[data-bs-theme='dark'] {
    --bs-heading-text: #ffffff;
    --bg-secondary-color: #6b7280;
    --stat-card-text-color: #d4d4d4;
    /* --stat-card-text-color: #6c757d; */
    --live-badge-color: #6c757d;
    --bs-body-color: #6b7280;
    --bs-highlighted-label-text: #6b7280;
    --row-details-bg: #2a2e42;
    --action-btn-hover-bg: #2a2e42;
    --table-hover-bg: rgb(248 250 252 / 5%);
    --table-td-color: #6c757d;
    --table-border-color: #e5e7eb36;
    --top-card-shadow: none;
    --secondary-color: #6b7280;
}

html,
body {
    font-size: var(--app-body-font-size) !important;
}

body,
button,
input,
select,
textarea {
    font-family: var(--app-font-family) !important;
}

body,
p,
a:not(.btn),
span:not(.icon-base):not([class*='tabler-']),
label,
small,
li,
td,
th,
.form-label,
.form-control,
.form-select,
.form-control-sm,
.form-select-sm,
.input-group-text,
.dropdown-item,
.page-link,
.dataTables_info,
.dt-info,
.select2-results__option,
.select2-selection__rendered {
    font-size: var(--app-body-font-size) !important;
}

h1,
.h1,
.page-title {
    font-size: var(--app-h1-size) !important;
    font-weight: var(--app-h1-weight) !important;
    line-height: 1.3 !important;
}

h2,
.h2 {
    font-size: var(--app-h2-size) !important;
    font-weight: var(--app-h2-weight) !important;
    line-height: 1.35 !important;
}

h3,
.h3,
.page-subtitle {
    font-size: var(--app-h3-size) !important;
    font-weight: var(--app-h3-weight) !important;
    line-height: 1.4 !important;
}

.page-title {
    color: var(--bs-heading-color) !important;
    margin-bottom: 0;
}

.page-subtitle {
    color: var(--bg-secondary-color) !important;
}

thead th,
.table > :not(caption) > * > th {
    font-weight: var(--app-table-head-font-weight) !important;
}

.stat-card h2 {
    font-size: var(--app-stat-card-h2-size) !important;
    font-weight: var(--app-stat-card-h2-weight) !important;
}

.top-card h4 {
    margin-top: 16px !important;
    font-size: var(--app-top-card-h4-size) !important;
    font-weight: var(--app-top-card-h4-weight) !important;
    line-height: 1 !important;
}

.btn {
    font-size: var(--app-body-font-size) !important;
    font-weight: var(--app-button-font-weight) !important;
    box-shadow: none !important;
}

.btn-sm,
.btn-lg,
.btn-group-sm > .btn,
.btn-group-lg > .btn,
.dt-buttons .btn,
.btn.buttons-collection {
    font-size: var(--app-body-font-size) !important;
}

.form-control,
.form-select,
.form-control-sm,
.form-select-sm,
.input-group-text {
    font-size: var(--app-body-font-size) !important;
}

.btn-app-primary,
.btn.btn-success:not(.btn-icon):not(.btn-close):not([class*='btn-text-']) {
    color: var(--custom-off-white) !important;
    background: var(--custom-blue) !important;
    border: 1px solid var(--custom-blue) !important;
    box-shadow: none !important;
}

.btn.btn-primary {
    color: var(--custom-off-white) !important;
    background: var(--bs-primary) !important;
    border: 1px solid var(--bs-primary) !important;
    box-shadow: none !important;
}

.btn-app-outline,
.btn.btn-primary-outline,
.btn.btn-label-primary:not(.btn-icon),
.btn.btn-label-secondary:not(.btn-icon),
.btn.btn-label-success:not(.btn-icon),
.btn.btn-label-danger:not(.btn-icon),
.btn.btn-outline-primary:not(.btn-icon),
.btn.btn-outline-secondary:not(.btn-icon),
.btn.btn-outline-success:not(.btn-icon),
.btn.btn-outline-danger:not(.btn-icon),
.btn.btn-outline-info:not(.btn-icon),
.btn.btn-secondary:not(.btn-icon):not(.btn-close):not([class*='btn-text-']),
.btn.btn-light:not(.btn-icon):not(.btn-close):not([class*='btn-text-']),
.btn.btn-danger:not(.btn-icon):not(.btn-close):not([class*='btn-text-']) {
    color: var(--custom-blue) !important;
    /* background: transparent !important; */
    border: 1px solid var(--custom-light-gray) !important;
    box-shadow: none !important;
}

.btn.btn-danger:not(.btn-icon):not(.btn-close):not([class*='btn-text-']) {
    color: #ffffff !important;
}

.btn.btn-label-success:not(.btn-icon) {
    background-color: #ebebed !important;
}

.btn-app-primary:hover,
.btn-app-primary:focus,
.btn.btn-success:not(.btn-icon):not(.btn-close):not([class*='btn-text-']):hover,
.btn.btn-success:not(.btn-icon):not(.btn-close):not([class*='btn-text-']):focus {
    color: var(--custom-off-white) !important;
    background: #2259a7 !important;
    border-color: #2259a7 !important;
}

.btn.btn-primary:hover,
.btn.btn-primary:focus,
.btn.btn-primary:active,
.btn.btn-primary.active,
.btn.btn-primary.show {
    color: var(--custom-off-white) !important;
    background: var(--bs-primary) !important;
    border-color: var(--bs-primary) !important;
}

.btn-app-outline:hover,
.btn-app-outline:focus,
.btn.btn-primary-outline:hover,
.btn.btn-primary-outline:focus,
.btn.btn-label-primary:not(.btn-icon):hover,
.btn.btn-label-primary:not(.btn-icon):focus,
.btn.btn-label-secondary:not(.btn-icon):hover,
.btn.btn-label-secondary:not(.btn-icon):focus,
.btn.btn-label-success:not(.btn-icon):hover,
.btn.btn-label-success:not(.btn-icon):focus,
.btn.btn-label-danger:not(.btn-icon):hover,
.btn.btn-label-danger:not(.btn-icon):focus,
.btn.btn-outline-primary:not(.btn-icon):hover,
.btn.btn-outline-primary:not(.btn-icon):focus,
.btn.btn-outline-secondary:not(.btn-icon):hover,
.btn.btn-outline-secondary:not(.btn-icon):focus,
.btn.btn-outline-success:not(.btn-icon):hover,
.btn.btn-outline-success:not(.btn-icon):focus,
.btn.btn-outline-danger:not(.btn-icon):hover,
.btn.btn-outline-danger:not(.btn-icon):focus,
.btn.btn-outline-info:not(.btn-icon):hover,
.btn.btn-outline-info:not(.btn-icon):focus,
.btn.btn-secondary:not(.btn-icon):not(.btn-close):not([class*='btn-text-']):hover,
.btn.btn-secondary:not(.btn-icon):not(.btn-close):not([class*='btn-text-']):focus,
.btn.btn-light:not(.btn-icon):not(.btn-close):not([class*='btn-text-']):hover,
.btn.btn-light:not(.btn-icon):not(.btn-close):not([class*='btn-text-']):focus,
.btn.btn-danger:not(.btn-icon):not(.btn-close):not([class*='btn-text-']):hover,
.btn.btn-danger:not(.btn-icon):not(.btn-close):not([class*='btn-text-']):focus {
    color: var(--custom-medium-gray) !important;
    background: rgba(255, 255, 255, 0.08) !important;
    border-color: var(--custom-light-gray) !important;
}

.btn.btn-primary:active,
.btn.btn-primary.active,
.btn.btn-primary.show,
.btn.btn-primary-outline:active,
.btn.btn-primary-outline.active,
.btn.btn-primary-outline.show {
    box-shadow: none !important;
}

.template-customizer-t-panel_header {
    font-weight: var(--app-font-weight-semibold) !important;
    font-size: var(--app-body-font-size) !important;
}

/* Custom Status Button - Using Green Variable */
.custom-status-btn {
    color: var(--custom-green) !important;
    border-color: var(--custom-green) !important;
    background-color: transparent !important;
}

.custom-status-btn:hover {
    color: var(--custom-green) !important;
    border-color: var(--custom-green) !important;
    background-color: rgba(76, 169, 113, 0.1) !important;
}

/* Subtitle Counter */
#total-listing-counter,
#total-listing-counter .counter-text {
    font-size: var(--app-text-lg-size) !important;
}

/* ============================= */
[data-bs-theme='dark'] div.dt-container .dt-buttons.btn-group:not(.btn-group-vertical) > .btn-group:not(:last-child) > .btn,
[data-bs-theme='dark'] .btn-group:not(.btn-group-vertical)>.btn-group:last-child>.btn:not([class*=btn-outline-]):last-of-type,
[data-bs-theme='dark'] .btn.btn-label-primary.dropdown-toggle,
[data-bs-theme='dark'] #resetAllFilters,
[data-bs-theme='dark'] .btn.btn-outline-primary,
[data-bs-theme='dark'] .btn.btn-primary-outline {
    color: var(--bs-heading-color) !important;
    border-color: var(--bs-border-color) !important;
    background-color: var(--bs-border-color) !important;
}

[data-bs-theme='dark'] .btn.btn-outline-primary:hover,
[data-bs-theme='dark'] .btn.btn-primary-outline:hover,
[data-bs-theme='dark'] .btn.btn-outline-primary:focus,
[data-bs-theme='dark'] .btn.btn-primary-outline:focus {
    color: var(--bs-heading-color) !important;
    border-color: var(--bs-border-color) !important;
    background-color: var(--bs-border-color) !important;
}

[data-bs-theme="dark"] .btn.btn-label-danger {
    color: var(--bs-heading-color) !important;
    border-color: #5a3952 !important;
}

[data-bs-theme="dark"] .btn.btn-label-danger:hover {
    color: var(--bs-heading-color) !important;
    border-color: #5a3952 !important;
    background-color: var(--bs-body-bg) !important;
}