:root {
    --hm-primary-50: #fff4ee;
    --hm-primary-100: #ffe4d6;
    --hm-primary-200: #ffc7ad;
    --hm-primary-300: #ffa07c;
    --hm-primary-400: #f97142;
    --hm-primary-500: #ef4e15;
    --hm-primary-600: #d84411;
    --hm-primary-700: #b6390f;
    --hm-primary-800: #8f2f11;
    --hm-primary-900: #732811;
    --hm-secondary-50: #eef4ef;
    --hm-secondary-100: #d8e3da;
    --hm-secondary-200: #b6c8ba;
    --hm-secondary-300: #90a794;
    --hm-secondary-400: #68816d;
    --hm-secondary-500: #213b27;
    --hm-secondary-600: #1b3120;
    --hm-secondary-700: #16281a;
    --hm-secondary-800: #101f14;
    --hm-secondary-900: #0b150e;
    --hm-surface-50: #fffaf5;
    --hm-surface-100: #f8efe6;
    --hm-border: #ecd9c7;
    --bs-primary: #ef4e15;
    --bs-primary-rgb: 239, 78, 21;
    --bs-link-color: #ef4e15;
    --bs-link-hover-color: #d84411;
    --bs-focus-ring-color: rgba(239, 78, 21, 0.22);
}

body {
    background-color: var(--hm-surface-50);
}

a,
.link-primary,
.text-primary {
    color: var(--hm-primary-500) !important;
}

a:hover,
.link-primary:hover {
    color: var(--hm-primary-600) !important;
}

.btn.btn-primary,
.btn-primary {
    background-color: var(--hm-primary-500) !important;
    border-color: var(--hm-primary-500) !important;
    color: #fff !important;
    box-shadow: 0 10px 24px rgba(239, 78, 21, 0.18);
}

.btn.btn-primary:hover,
.btn.btn-primary:focus,
.btn.btn-primary:active,
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.show > .btn.btn-primary.dropdown-toggle {
    background-color: var(--hm-primary-600) !important;
    border-color: var(--hm-primary-600) !important;
    color: #fff !important;
    box-shadow: 0 12px 28px rgba(239, 78, 21, 0.24) !important;
}

.btn.btn-light-primary,
.btn-light-primary {
    background-color: var(--hm-primary-50) !important;
    border-color: transparent !important;
    color: var(--hm-primary-700) !important;
}

.btn.btn-light-primary:hover,
.btn.btn-light-primary:focus,
.btn-light-primary:hover,
.btn-light-primary:focus {
    background-color: var(--hm-primary-100) !important;
    color: var(--hm-primary-700) !important;
}

.btn.btn-outline-primary,
.btn-outline-primary {
    border-color: var(--hm-primary-500) !important;
    color: var(--hm-primary-500) !important;
}

.btn.btn-outline-primary:hover,
.btn.btn-outline-primary:focus,
.btn-outline-primary:hover,
.btn-outline-primary:focus {
    background-color: var(--hm-primary-500) !important;
    color: #fff !important;
}

.btn.btn-active-color-primary:hover,
.btn.btn-active-color-primary:focus,
.btn.btn-color-primary,
.btn.btn-hover-color-primary:hover {
    color: var(--hm-primary-500) !important;
}

.menu .menu-item .menu-link.active,
.menu .menu-item .menu-link:hover,
.menu .menu-item .menu-link:focus {
    color: var(--hm-primary-500) !important;
}

.nav-line-tabs .nav-item .nav-link.active,
.nav-line-tabs .nav-item .nav-link:hover:not(.disabled),
.nav-line-tabs .nav-item .nav-link:focus:not(.disabled) {
    color: var(--hm-primary-500) !important;
    border-bottom-color: var(--hm-primary-500) !important;
}

.form-control:focus,
.form-select:focus,
.form-check-input:focus {
    border-color: rgba(239, 78, 21, 0.45) !important;
    box-shadow: 0 0 0 .25rem rgba(239, 78, 21, 0.14) !important;
}

.form-check-input:checked {
    background-color: var(--hm-primary-500) !important;
    border-color: var(--hm-primary-500) !important;
}

.badge-light-primary,
.bg-light-primary {
    background-color: var(--hm-primary-50) !important;
    color: var(--hm-primary-700) !important;
}

.app-sidebar,
[data-kt-app-layout="dark-sidebar"] .app-sidebar {
    background: linear-gradient(180deg, var(--hm-secondary-700), var(--hm-secondary-900)) !important;
}

.app-header,
.app-toolbar,
.card,
.modal-content {
    background-color: #fffdfb;
}

.card,
.modal-content,
.app-content .table,
.select2-container--bootstrap5 .select2-selection {
    border-color: var(--hm-border) !important;
}

.page-link {
    color: var(--hm-secondary-500);
}

.page-link.active,
.active > .page-link {
    background-color: var(--hm-primary-500) !important;
    border-color: var(--hm-primary-500) !important;
    color: #fff !important;
}

.swal2-confirm.btn-primary {
    background-color: var(--hm-primary-500) !important;
    border-color: var(--hm-primary-500) !important;
}

.swal2-cancel.btn-light,
.swal2-cancel.btn-active-light-primary {
    background-color: var(--hm-primary-50) !important;
    color: var(--hm-primary-700) !important;
}

/* Coverage editor responsive polish */
.store-location-item,
.store-location-item .card-body,
.store-location-item .border.rounded,
.store-location-item .border.border-dashed {
    min-width: 0;
}

.store-location-item .table-responsive table {
    min-width: 560px;
}

#store_location_coverage_modal .modal-dialog {
    max-width: 1180px;
}

#store_location_coverage_modal .modal-body,
#store_location_map_modal .modal-body {
    overflow-x: hidden;
}

@media (max-width: 1200px) {
    .store-location-item .row.g-6 > [class*="col-md-"],
    .store-location-item .js-sector-item .row.g-4 > [class*="col-md-"],
    .store-location-item .js-neighborhood-item .row.g-4 > [class*="col-md-"] {
        width: 100%;
    }

    .store-location-item .card-body {
        padding: 1.25rem !important;
    }

    .store-location-item .border.rounded.p-5,
    .store-location-item .border.border-dashed.rounded.p-5,
    .store-location-item .border.rounded.p-4 {
        padding: 1rem !important;
    }

    #store_location_coverage_modal .modal-dialog {
        max-width: 96vw;
        margin: 1rem auto;
    }
}

@media (max-width: 992px) {
    .store-location-item .card-header,
    .store-location-item .d-flex.align-items-center.justify-content-between,
    .store-location-item .d-flex.align-items-start.justify-content-between {
        gap: 0.75rem !important;
    }

    .store-location-item .table-responsive table {
        min-width: 640px;
    }

    #store_location_coverage_modal .row.g-5 > [class*="col-lg-"] {
        width: 100%;
    }

    #store_location_coverage_map {
        height: 420px !important;
    }
}

@media (max-width: 768px) {
    .store-location-item .card-body {
        padding: 1rem !important;
    }

    .store-location-item .table-responsive table {
        min-width: 600px;
    }

    #store_location_map,
    #store_location_coverage_map {
        height: 360px !important;
    }
}