/* Poppins Light (300) */
@font-face {
    font-family: 'Poppins';
    src: url('../fonts/Poppins/Poppins-Light.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

/* Poppins Regular (400) */
@font-face {
    font-family: 'Poppins';
    src: url('../fonts/Poppins/Poppins-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

/* Poppins Medium (500) */
@font-face {
    font-family: 'Poppins';
    src: url('../fonts/Poppins/Poppins-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

/* Poppins SemiBold (600) */
@font-face {
    font-family: 'Poppins';
    src: url('../fonts/Poppins/Poppins-SemiBold.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

/* Poppins Bold (700) */
@font-face {
    font-family: 'Poppins';
    src: url('../fonts/Poppins/Poppins-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

:root {
    --color-light-bg: #ffffff;
    --color-light-border: #e0e0e0;
    --color-light-subtle: #f8f9fa;

    --color-dark-bg: #343a40;
    --color-dark-bg-alt: #3a4047;
    --color-dark-bg-muted: #474d54;
    --color-dark-bg-soft: #2e3338;

    --color-dark-border: #6c757d;
    --color-dark-border-strong: #343a40;

    --color-dark-text: #343a40;
    --color-dark-text-muted: #adb5bd;
    --color-light-text: #dee2e6;
}

html, body {
    font-family: 'Poppins', 'sans-serif' !important;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

.rounded-xl {
    border-radius: 8px !important;
}

.color-foreground {
    color: var(--foreground) !important;
}

.card-header {
    background-color: var(--gray-50) !important;
    color: var(--foreground) !important;
}

.card-body, .card {
    background: var(--background) !important;
    color: var(--foreground) !important;
}

.main-footer {
    background: var(--background) !important;
    color: var(--foreground) !important;
    border: 1px solid var(--border) !important;
    padding: 1.3rem 1rem;
}

.select2-container--default.select2-container--disabled .select2-selection--multiple, .ranges {
    background-color: var(--gray-100) !important;
}

body.dark-mode .select2-container--default.select2-container--disabled .select2-selection--multiple,
body.dark-mode .select2-container--default.select2-container--disabled .select2-selection--single {
    background-color: var(--gray-100) !important;
    border-color: var(--border) !important;
}

.select2-container--default .select2-selection--single, 
.select2-container--default .select2-selection--multiple {
    color: var(--foreground);
    background: var(--background);
    border: 1px solid var(--border) !important;
    border-radius: 8px !important;
    font-size: 15px;
}

.select2-dropdown {
    background: var(--background) !important;
    color: var(--foreground) !important;
    border: 1px solid var(--gray-300) !important;
    border-radius: 8px !important;
    margin-top: 8px;
    margin-bottom: 8px;
    overflow: hidden;
    min-height: 40px;
}

.select2-search--dropdown  {
    background: var(--gray-50) !important;
    border-bottom: 1px solid var(--border) !important;
}

.select2-dropdown .select2-search__field {
    background: var(--background) !important;
    color: var(--foreground) !important;
    border: 1px solid var(--gray-300) !important;
    border-radius: 8px !important;
}

.select2-dropdown .select2-search__field:focus {
    border: 1px solid var(--primary) !important;
}

.select2-container--default .select2-results__option {
    border-radius: 8px !important;
}

.select2-container--default .select2-results__option:hover {
    background: var(--gray-100) !important;
    color: var(--foreground) !important;
}

.select2-container--default .select2-results__option--highlighted {
    background: var(--gray-100) !important;
    color: var(--foreground) !important;
}

.select2-container--default .select2-results__option[aria-selected=true] {
    background: var(--background) !important;
    color: var(--primary) !important;
}

.select2-container--default .select2-results__option[aria-selected=true]:hover {
    background: var(--gray-100) !important;
}

.select2-results__options {
    padding: 4px;
    font-size: 15px;
    transition: all 0.2s ease;
}

body.dark-mode .ranges {
    background-color: var(--color-dark-bg-alt) !important;
}

body.dark-mode .ranges li:hover {
    background-color: var(--color-dark-border) !important;
}

.bg-subtle-dark {
    background-color: var(--background) !important;
    border-color: var(--gray-200) !important;
}

.bg-subtle-gray {
    background-color: var(--layout) !important;
    border-color: var(--gray-100) !important;
}

body.dark-mode .chart-legend-selectable {
    background-color: var(--color-dark-bg-alt);
    border-color: var(--color-dark-border);
}

body.dark-mode .table td, .table th {
    border-bottom: 1px solid var(--color-dark-border) !important;
    background-color: transparent !important;
}

body.dark-mode .select2-container--default .select2-selection--single {
    border-color: var(--color-dark-border);
}

body.dark-mode .period-picker-end,
body.dark-mode #creation-time-range-filter,
body.dark-mode #last-login-range-filter,
body.dark-mode #campaign-plans-plans-create-period,
body.dark-mode #create-date-range,
body.dark-mode #campaign-plans-transactions-period {
    background: var(--color-dark-bg) !important;
    border: 1px solid var(--color-dark-border) !important;
}

body.dark-mode td,
body.dark-mode .card-header-config {
    color: var(--foreground) !important;
}

body.dark-mode .jconfirm .jconfirm-box,
body.dark-mode .accordion-item,
body.dark-mode .accordion-button,
body.dark-mode .list-group-item,
body.dark-mode .jconfirm-title {
    background: var(--color-dark-bg-muted) !important;
    color: var(--color-light-text) !important;
}

body.dark-mode .daterangepicker,
body.dark-mode .daterangepicker .calendar-table {
    background: var(--color-dark-bg-muted) !important;
    color: var(--color-light-text) !important;
    border-color: var(--color-dark-border) !important;
}

body.dark-mode .daterangepicker td {
    background: transparent !important;
}

body.dark-mode .daterangepicker td.in-range {
    background: var(--color-dark-bg-soft) !important;
}

body.dark-mode .daterangepicker td.ends {
    background: var(--color-dark-text-muted) !important
}

body.dark-mode .daterangepicker td.active {
    background: #2196f3 !important;
}

body.dark-mode .component-name-container .style-container {
    background-color: var(--color-dark-bg-soft) !important;
    border-color: var(--color-dark-border) !important;
}

body.dark-mode .style-container,
body.dark-mode .style-label,
body.dark-mode .style-card-color,
body.dark-mode .config-card {
    background-color: var(--color-dark-bg) !important;
    border-color: var(--color-dark-border) !important;
}

body.dark-mode #Configs_UploadFileConfig_Dir,
body.dark-mode #Configs_UploadFileConfig_AmazonCloud_BucketName,
body.dark-mode #Configs_UploadFileConfig_AmazonCloud_AccessKey,
body.dark-mode #Configs_UploadFileConfig_AmazonCloud_SecretKey,
body.dark-mode #Configs_UploadFileConfig_AzureCloud_AccessKey,
body.dark-mode #Configs_UploadFileConfig_AzureCloud_SecretKey,
body.dark-mode #Configs_JobsConfigs_DaysToKeep,
body.dark-mode #Configs_JobsConfigs_DaysToKeepHourlyProfiles,
body.dark-mode #Configs_JobsConfigs_DaysToKeepMongoArchive {
    background-color: var(--color-dark-bg) !important;
    border-color: var(--color-dark-border) !important;
    color: var(--foreground) !important;
}

body.dark-mode input[type="date"]::-webkit-calendar-picker-indicator {
    color: var(--foreground);
    filter: invert(100%) sepia(0%) saturate(100%) hue-rotate(0deg);
}

.dataTables_length {
    margin-top: 12px;
}