/*
 * AfroPin's look for the third-party widgets, on top of each library's own stylesheet: select2 pickers (theme
 * "bootstrap5", which console.css brands further), the date-range picker, Tagify address lists, chart tooltips
 * and map controls.
 */

/* ---------- select2 ---------- */

.select2-container--bootstrap5 .select2-selection { box-shadow: none !important; height: auto; outline: 0 !important; }
.select2-container--bootstrap5.select2-container--focus .form-select:not(.form-select-solid):not(.form-select-white),
.select2-container--bootstrap5.select2-container--open .form-select:not(.form-select-solid):not(.form-select-white) { border-color: #b5b5c3; }
.select2-container--bootstrap5 .select2-selection--single { display: flex; align-items: center; }
.select2-container--bootstrap5 .select2-selection--single .select2-selection__rendered {
    display: block; padding-left: 0; padding-right: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #a1a5b7;
}
.select2-container--bootstrap5 .select2-selection--single .select2-selection__placeholder { color: #a1a5b7; }
.select2-container--bootstrap5 .select2-dropdown { border: 0; box-shadow: 0 0 50px 0 rgba(82, 63, 105, .15); border-radius: .475rem; padding: 1rem 0; }
.select2-container--bootstrap5 .select2-dropdown .select2-search { padding: .5rem 1.25rem; margin: 0 0 .5rem; }
.select2-container--bootstrap5 .select2-dropdown .select2-search .select2-search__field {
    padding: .55rem .75rem; color: #181c32; font-size: .925rem; font-weight: 200; border: 1px solid #e4e6ef; border-radius: .475rem; outline: 0 !important;
}
.select2-container--bootstrap5 .select2-dropdown .select2-results__options { max-height: 200px; overflow-y: auto; }
.select2-container--bootstrap5 .select2-dropdown .select2-results__option { color: #5e6278; padding: .75rem 1.25rem; margin: 0; transition: color .2s ease, background-color .2s ease; }
.select2-container--bootstrap5 .select2-dropdown .select2-results__option.select2-results__option--highlighted { background-color: #f1faff; color: #00a3ff; }
.select2-container--bootstrap5 .select2-dropdown .select2-results__option.select2-results__option--selected { background-color: #00a3ff; color: #fff; }
.select2-container--bootstrap5 .select2-dropdown .select2-results__option.select2-results__option--disabled { color: #b5b5c3; }

/* ---------- Date-range picker ---------- */

.daterangepicker { padding: 0; margin: 0; border: 0; width: auto; box-shadow: 0 0 50px 0 rgba(82, 63, 105, .15); font-family: Roboto, sans-serif; z-index: 1000; border-radius: .475rem; }
.daterangepicker::before, .daterangepicker::after { display: none; }
.modal-open .daterangepicker { z-index: 1061; }
.daterangepicker .ranges ul { padding: 1rem 0; width: 175px; }
.daterangepicker .ranges li { padding: .7rem 1.75rem; font-weight: 500; font-size: 1rem; color: #7e8299; transition: color .2s ease, background-color .2s ease; }
.daterangepicker .ranges li.active { background-color: #00a3ff; color: #fff; }
.daterangepicker.show-calendar .ranges { border-right: 1px solid #eff2f5; margin-top: 0; height: 297px; }
.daterangepicker.show-ranges .drp-calendar.left { border-left: 0; }
.daterangepicker .drp-buttons { padding: 1rem 1.75rem; border-top: 1px solid #eff2f5; }
.daterangepicker .drp-buttons .btn { font-size: 1rem; font-weight: 500; padding: .5rem 1rem; }
.daterangepicker .drp-buttons .cancelBtn { color: #7e8299; border-color: #f5f8fa; background-color: #f5f8fa; }
.daterangepicker .drp-selected { font-size: .9rem; }
.daterangepicker .drp-calendar.left, .daterangepicker .drp-calendar.right { padding: 1rem; }
.daterangepicker .drp-calendar.left { border-left: 0 !important; }
.daterangepicker .drp-calendar td, .daterangepicker .drp-calendar th { font-size: 1rem; font-weight: 400; width: 33px; height: 33px; }
.daterangepicker .drp-calendar th, .daterangepicker .drp-calendar th.month { font-weight: 500; color: #3f4254; }
.daterangepicker .drp-calendar th.next span, .daterangepicker .drp-calendar th.prev span { border-width: 0 1px 1px 0; border-color: #7e8299; }
.daterangepicker .drp-calendar th.prev span { margin-left: 1px; }
.daterangepicker .drp-calendar td { color: #5e6278; }
.daterangepicker .drp-calendar td.available.off { color: #b5b5c3; }
.daterangepicker .drp-calendar td.active { background-color: #00a3ff !important; color: #fff !important; border-radius: .475rem; }
.daterangepicker .drp-calendar td.active.start-date { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.daterangepicker .drp-calendar td.active.end-date { border-top-left-radius: 0; border-bottom-left-radius: 0; }
.daterangepicker .drp-calendar td.today, .daterangepicker .drp-calendar td.today.active { background: #f1faff !important; color: #00a3ff !important; border-radius: .475rem; }
.daterangepicker .drp-calendar td.in-range.available:not(.active):not(.off):not(.today) { background-color: #f1faff; color: #00a3ff; }
@media (max-width: 767.98px) {
    .daterangepicker.show-calendar .ranges { float: none !important; height: auto !important; }
    .daterangepicker.show-calendar .drp-calendar { float: none !important; max-width: unset !important; display: flex; flex-direction: column; align-items: center; }
}

/* ---------- Tagify (IP address lists on API keys) ---------- */

/* Chips laid out inline, as before the library's flex layout */
.tagify { cursor: text; }
.tagify + input, .tagify + textarea { display: none !important; }
.tagify__tag { max-width: none; }
.tagify__tag > div { display: block; flex: 0 1 auto; line-height: inherit; }
.tagify__tag > div > * { display: inline-block; }
.tagify__input { min-height: 0; overflow: visible; line-height: inherit; }

.tagify {
    --tags-border-color: #E4E6EF; --tags-hover-border-color: #E4E6EF; --tags-focus-border-color: #B5B5C3;
    --tag-bg: #EFF2F5; --tag-hover: #EFF2F5; --tag-text-color: #5E6278; --tag-text-color--edit: #5E6278;
    --tag-pad: 0 0.5rem; --tag-inset-shadow-size: 1rem; --tag-invalid-color: #F1416C; --tag-invalid-bg: #FFF5F8;
    --tag-remove-bg: #EFF2F5; --tag-remove-btn-color: transparent; --tag-remove-btn-bg: transparent; --tag-remove-btn-bg--hover: transparent;
    --input-color: #5E6278; --placeholder-color: #B5B5C3; --placeholder-color-focus: #A1A5B7; --loader-size: .8rem;
}
.tagify .tagify__tag { background-color: var(--tag-bg); }
.tagify .tagify__tag div { border-radius: inherit; }
.tagify .tagify__tag .tagify__tag__removeBtn {
    border-radius: 0; background: transparent no-repeat center;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23B5B5C3'%3e%3cpath d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/%3e%3c/svg%3e");
}
.tagify .tagify__tag .tagify__tag__removeBtn::after { display: none; }
.tagify .tagify__input::before { font-size: inherit; line-height: inherit; font-weight: inherit; }
.tagify:not(.form-control-sm):not(.form-control-lg) { padding: calc((1.5rem + 2px - .8rem) / 2) 10px; }
.tagify:not(.form-control-sm):not(.form-control-lg) .tagify__tag { border-radius: .475rem; padding: .2rem .4rem; margin: .2rem .4rem .2rem 0; font-weight: inherit; }
.tagify:not(.form-control-sm):not(.form-control-lg) .tagify__tag div { padding: 0 .4rem; font-size: .9rem; font-weight: inherit; }
.tagify:not(.form-control-sm):not(.form-control-lg) .tagify__tag .tagify__tag__removeBtn { width: .6rem; height: .6rem; margin: 0 .5rem 0 0; }
.tagify:not(.form-control-sm):not(.form-control-lg) .tagify__input { padding: 0; margin-block: calc(.75rem - (1.5rem + 2px - .8rem) / 2); }

/* ---------- Charts and maps ---------- */

.apexcharts-text, .apexcharts-title-text, .apexcharts-legend-text { font-family: Roboto, sans-serif !important; }
.apexcharts-tooltip.apexcharts-theme-light { border-radius: .475rem; box-shadow: 0 0 50px 0 rgba(82, 63, 105, .15); border: 0 !important; background: #fff; }
.apexcharts-tooltip.apexcharts-theme-light .apexcharts-tooltip-title { background: #f5f8fa !important; border: 0 !important; }
.apexcharts-tooltip .apexcharts-tooltip-title { padding: .5rem 1rem; }
.leaflet-container :is(.leaflet-pane, .leaflet-control, .leaflet-top, .leaflet-bottom) { z-index: 1 !important; }