/* Custom styles goes here */

:root {
  --bs-root-font-size: 12.8px;
  --bs-menu-width: 13rem;
  --epicenter-navy: #202040;
  --epicenter-cyan: #30a0d0;
  --epicenter-cyan-bright: #56c6f7;
  --epicenter-white: #f8fbff;
}

.epicenter-brand-mark,
.epicenter-brand-full {
  display: inline-flex;
  align-items: center;
  line-height: 1;
}

.epicenter-brand-mark img,
.epicenter-brand-full img {
  display: block;
}

.epicenter-brand-mark img {
  width: 28px;
  height: auto;
}

.epicenter-brand-full img {
  height: 32px;
  width: auto;
}

.epicenter-brand-mark-dark,
.epicenter-brand-full-dark {
  display: none !important;
}

[data-bs-theme="dark"] .epicenter-brand-mark-light,
[data-bs-theme="dark"] .epicenter-brand-full-light {
  display: none !important;
}

[data-bs-theme="dark"] .epicenter-brand-mark-dark,
[data-bs-theme="dark"] .epicenter-brand-full-dark {
  display: block !important;
}

.epicenter-brand-force-dark .epicenter-brand-mark-light,
.epicenter-brand-force-dark .epicenter-brand-full-light {
  display: none !important;
}

.epicenter-brand-force-dark .epicenter-brand-mark-dark,
.epicenter-brand-force-dark .epicenter-brand-full-dark {
  display: block !important;
}

.epicenter-brand-force-light .epicenter-brand-mark-dark,
.epicenter-brand-force-light .epicenter-brand-full-dark {
  display: none !important;
}

.epicenter-brand-force-light .epicenter-brand-mark-light,
.epicenter-brand-force-light .epicenter-brand-full-light {
  display: block !important;
}

.login-logo-block .epicenter-brand-full img,
.authentication-wrapper .epicenter-brand-full img {
  height: 56px;
}

.epicenter-sidebar-brand {
  width: 100%;
  justify-content: space-between;
  gap: 0.75rem;
}

.epicenter-sidebar-brand .app-brand-link {
  min-width: 0;
  flex: 1 1 auto;
}

.epicenter-sidebar-brand .app-brand-logo {
  display: flex;
  align-items: center;
  min-width: 0;
}

.epicenter-sidebar-brand .app-brand-img,
.epicenter-sidebar-brand .app-brand-img-collapsed {
  align-items: center;
}

.epicenter-sidebar-brand .app-brand-img .epicenter-brand-full img {
  height: 34px;
  max-width: 100%;
}

.epicenter-sidebar-brand .app-brand-img-collapsed .epicenter-brand-mark img {
  width: 30px;
}

.epicenter-menu-collapse-toggle {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  padding: 0.35rem;
  border-radius: 0.65rem;
  color: rgba(32, 32, 64, 0.75);
  transition: color 0.2s ease, background-color 0.2s ease, transform 0.2s ease;
}

.epicenter-menu-collapse-toggle:hover,
.epicenter-menu-collapse-toggle:focus {
  color: var(--epicenter-navy);
  background: rgba(48, 160, 208, 0.12);
}

.epicenter-menu-collapse-toggle i {
  transition: transform 0.2s ease;
}

.layout-menu-collapsed:not(.layout-menu-hover) .epicenter-menu-collapse-toggle i,
.menu-collapsed:not(:hover) .epicenter-menu-collapse-toggle i {
  transform: rotate(180deg);
}

.layout-menu-collapsed:not(.layout-menu-hover) .epicenter-menu-collapse-toggle,
.menu-collapsed:not(:hover) .epicenter-menu-collapse-toggle {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.authentication-wrapper .epicenter-auth-brand img,
.login-logo-block .epicenter-auth-brand img {
  height: 76px;
  max-width: min(100%, 340px);
}

[data-bs-theme="dark"] .epicenter-menu-collapse-toggle {
  color: rgba(248, 251, 255, 0.82);
}

[data-bs-theme="dark"] .epicenter-menu-collapse-toggle:hover,
[data-bs-theme="dark"] .epicenter-menu-collapse-toggle:focus {
  color: var(--epicenter-white);
  background: rgba(86, 198, 247, 0.14);
}

.card-datatable .dt-container,
.card-datatable .dt-layout-row,
.card-datatable .dt-layout-cell,
.card-datatable .dt-layout-table,
.card-datatable .dt-layout-full {
  max-width: 100%;
  min-width: 0;
}

.card-datatable .dt-layout-full {
  overflow-x: auto;
}

.card-datatable table.dataTable {
  width: 100% !important;
}

.card-datatable table.dataTable thead > tr > th.dt-orderable-asc,
.card-datatable table.dataTable thead > tr > th.dt-orderable-desc,
.card-datatable table.dataTable thead > tr > th.dt-ordering-asc,
.card-datatable table.dataTable thead > tr > th.dt-ordering-desc,
.card-datatable table.dataTable thead > tr > td.dt-orderable-asc,
.card-datatable table.dataTable thead > tr > td.dt-orderable-desc,
.card-datatable table.dataTable thead > tr > td.dt-ordering-asc,
.card-datatable table.dataTable thead > tr > td.dt-ordering-desc {
  position: relative;
  padding-inline-end: 2rem;
}

.card-datatable table.dataTable thead .dt-column-order {
  position: absolute !important;
  inset-inline: auto 0.5rem !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  inline-size: 0.75rem !important;
  block-size: 1.1rem !important;
  pointer-events: none;
}

.card-datatable table.dataTable thead .dt-orderable-asc .dt-column-order::before,
.card-datatable table.dataTable thead .dt-orderable-desc .dt-column-order::before,
.card-datatable table.dataTable thead .dt-orderable-asc.dt-orderable-desc .dt-column-order::before,
.card-datatable table.dataTable thead .dt-ordering-asc .dt-column-order::before,
.card-datatable table.dataTable thead .dt-ordering-desc .dt-column-order::before,
.card-datatable table.dataTable thead .dt-orderable-asc .dt-column-order::after,
.card-datatable table.dataTable thead .dt-orderable-desc .dt-column-order::after,
.card-datatable table.dataTable thead .dt-orderable-asc.dt-orderable-desc .dt-column-order::after,
.card-datatable table.dataTable thead .dt-ordering-asc .dt-column-order::after,
.card-datatable table.dataTable thead .dt-ordering-desc .dt-column-order::after {
  display: block !important;
  position: absolute !important;
  inset-inline-start: 0 !important;
  inline-size: 100% !important;
  block-size: auto !important;
  color: var(--bs-heading-color) !important;
  background: none !important;
  background-color: transparent !important;
  mask: none !important;
  mask-image: none !important;
  -webkit-mask: none !important;
  -webkit-mask-image: none !important;
  font-size: 0.65rem !important;
  line-height: 1 !important;
  text-align: center !important;
  visibility: visible !important;
  transition: opacity 0.15s ease !important;
}

.card-datatable table.dataTable thead .dt-orderable-asc .dt-column-order::before,
.card-datatable table.dataTable thead .dt-orderable-desc .dt-column-order::before,
.card-datatable table.dataTable thead .dt-orderable-asc.dt-orderable-desc .dt-column-order::before,
.card-datatable table.dataTable thead .dt-ordering-asc .dt-column-order::before,
.card-datatable table.dataTable thead .dt-ordering-desc .dt-column-order::before {
  content: "\25B2" !important;
  top: 0 !important;
  bottom: auto !important;
  opacity: 0.4;
}

.card-datatable table.dataTable thead .dt-orderable-asc .dt-column-order::after,
.card-datatable table.dataTable thead .dt-orderable-desc .dt-column-order::after,
.card-datatable table.dataTable thead .dt-orderable-asc.dt-orderable-desc .dt-column-order::after,
.card-datatable table.dataTable thead .dt-ordering-asc .dt-column-order::after,
.card-datatable table.dataTable thead .dt-ordering-desc .dt-column-order::after {
  content: "\25BC" !important;
  top: auto !important;
  bottom: 0 !important;
  opacity: 0.4;
}

.card-datatable table.dataTable thead .dt-orderable-asc:hover .dt-column-order::before,
.card-datatable table.dataTable thead .dt-orderable-desc:hover .dt-column-order::after,
.card-datatable table.dataTable thead .dt-orderable-asc.dt-orderable-desc:hover .dt-column-order::before,
.card-datatable table.dataTable thead .dt-orderable-asc.dt-orderable-desc:hover .dt-column-order::after {
  opacity: 0.75;
}

.card-datatable table.dataTable thead .dt-ordering-asc .dt-column-order::before,
.card-datatable table.dataTable thead .dt-ordering-desc .dt-column-order::after {
  opacity: 1 !important;
}

.card-datatable table.dataTable thead .dt-ordering-asc .dt-column-order::after,
.card-datatable table.dataTable thead .dt-ordering-desc .dt-column-order::before {
  opacity: 0.2 !important;
}

.list-filters-card {
  --epicenter-filter-active-bg: #fff7d6;
  --epicenter-filter-active-border: #ffab00;
  --epicenter-filter-active-shadow: rgba(255, 171, 0, 0.16);
}

.list-filters-card .form-control.epicenter-filter-active,
.list-filters-card .form-select.epicenter-filter-active,
.list-filters-card .select2-container.epicenter-filter-active .select2-selection {
  background-color: var(--epicenter-filter-active-bg) !important;
  border-color: var(--epicenter-filter-active-border) !important;
}

.list-filters-card .form-control.epicenter-filter-active:focus,
.list-filters-card .form-select.epicenter-filter-active:focus,
.list-filters-card .select2-container.epicenter-filter-active.select2-container--focus .select2-selection {
  box-shadow: 0 0 0 0.2rem var(--epicenter-filter-active-shadow) !important;
}

[data-bs-theme="dark"] .list-filters-card {
  --epicenter-filter-active-bg: rgba(255, 171, 0, 0.18);
  --epicenter-filter-active-border: #ffbd35;
  --epicenter-filter-active-shadow: rgba(255, 171, 0, 0.22);
}

/* CRM field labels: keep text/date/select labels on the outline border. */
:where(.epicenter-field-labels, .list-filters-card) .form-floating.form-floating-outline > label {
  block-size: auto !important;
  inline-size: auto !important;
  margin-block-start: 0.125rem !important;
  margin-inline-start: 0.625rem !important;
  opacity: 1 !important;
  padding-block: 2px !important;
  padding-inline: 0.375rem !important;
  transform: translateY(-0.8rem) translateX(-2px) !important;
  z-index: 3 !important;
  pointer-events: none;
}

:where(.epicenter-field-labels, .list-filters-card) .form-floating.form-floating-outline > label::after {
  position: absolute;
  z-index: -1;
  block-size: 0.75rem;
  content: "";
  inline-size: 100%;
  inset-block-start: 0.5rem;
  inset-inline-start: 0;
  background-color: var(--bs-card-bg, var(--bs-modal-bg, var(--bs-body-bg))) !important;
}

:where(.epicenter-field-labels, .list-filters-card) .form-floating.form-floating-outline > .form-control::placeholder,
:where(.epicenter-field-labels, .list-filters-card) .form-floating.form-floating-outline > .form-select::placeholder {
  color: transparent !important;
}

:where(.epicenter-field-labels, .list-filters-card) .form-floating.form-floating-outline > .select2-container ~ label {
  block-size: auto !important;
  inline-size: auto !important;
  margin-block-start: 0.125rem !important;
  margin-inline-start: 0.625rem !important;
  opacity: 1 !important;
  padding-block: 2px !important;
  padding-inline: 0.375rem !important;
  transform: translateY(-0.8rem) translateX(-2px) !important;
  z-index: 10 !important;
  pointer-events: none;
}

:where(.epicenter-field-labels, .list-filters-card) :is(
  :has(> label.form-label + input.form-control:not([type="file"])),
  :has(> label.form-label + textarea.form-control),
  :has(> label.form-label + select.form-select),
  :has(> label.form-label + .input-group),
  :has(> label.form-label + .flatpickr-wrapper),
  :has(> label.form-label + .select2-container)
) {
  position: relative;
}

:where(.epicenter-field-labels, .list-filters-card) :is(
  :has(> label.form-label + input.form-control:not([type="file"])),
  :has(> label.form-label + textarea.form-control),
  :has(> label.form-label + select.form-select),
  :has(> label.form-label + .input-group),
  :has(> label.form-label + .flatpickr-wrapper),
  :has(> label.form-label + .select2-container)
) > label.form-label {
  position: absolute !important;
  inset-block-start: -0.55rem !important;
  inset-inline-start: 0.625rem !important;
  z-index: 3 !important;
  max-inline-size: calc(100% - 1.25rem);
  margin: 0 !important;
  padding-block: 2px !important;
  padding-inline: 0.375rem !important;
  background-color: var(--bs-card-bg, var(--bs-modal-bg, var(--bs-body-bg))) !important;
  color: var(--bs-body-color) !important;
  font-size: 0.8125rem !important;
  font-weight: 400 !important;
  line-height: 1.1 !important;
  pointer-events: none;
  white-space: nowrap;
}

:where(.epicenter-field-labels, .list-filters-card) :is(
  :has(> label.form-label + input.form-control:not([type="file"])),
  :has(> label.form-label + textarea.form-control),
  :has(> label.form-label + select.form-select),
  :has(> label.form-label + .input-group),
  :has(> label.form-label + .flatpickr-wrapper),
  :has(> label.form-label + .select2-container)
) > :is(.form-control, .form-select, .input-group, .flatpickr-wrapper, .select2-container) {
  margin-block-start: 0 !important;
}

#navbar-language-text {
  font-weight: 500;
}

/* Dark mode fixes for dropdown active/selected items */
[data-bs-theme="dark"] .dropdown-item.active,
[data-bs-theme="dark"] .dropdown-item:active,
[data-bs-theme="dark"] .dropdown-menu .active {
  color: #fff !important;
  background-color: rgba(255, 255, 255, 0.1) !important;
}

[data-bs-theme="dark"] .dropdown-item.active:hover,
[data-bs-theme="dark"] .dropdown-item:active:hover {
  background-color: rgba(255, 255, 255, 0.15) !important;
}

/* Dark mode fix for language dropdown selected item */
[data-bs-theme="dark"] .dropdown-language .dropdown-item.active span,
[data-bs-theme="dark"] .dropdown-language .dropdown-item:active span {
  color: #fff !important;
}

/* Dark mode fix for style switcher active button */
[data-bs-theme="dark"] [data-bs-theme-value].active,
[data-bs-theme="dark"] [data-bs-theme-value][aria-pressed="true"] {
  color: #fff !important;
  background-color: rgba(255, 255, 255, 0.1) !important;
}