.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
  position: relative;
  min-height: 100%;
  /*
   * Reserve space for the vertical scrollbar at all times so the layout width
   * remains constant when navigating between pages with different heights.
   */
  overflow-y: scroll;
}



body {
  margin-bottom: 60px;
}
.landing-page {
  background-color: #f8f9fb;
}

.landing-hero {
  background: linear-gradient(135deg, rgba(85, 112, 241, 0.08), rgba(30, 214, 181, 0.12));
}

.bg-gradient-primary {
  background: linear-gradient(120deg, rgba(85, 112, 241, 0.45), rgba(30, 214, 181, 0.4));
}

.hero-preview {
  border-radius: 1.5rem;
}

.hero-preview .card-body {
  background: #ffffff;
  border-radius: 1.5rem;
}

.progress-stack .progress {
  border-radius: 999px;
}

.workflow-image {
  min-height: 360px;
  background: linear-gradient(135deg, #4f46e5, #22d3ee);
  position: relative;
}

.workflow-image::after {
  content: "";
  position: absolute;
  inset: 15%;
  border-radius: 1.5rem;
  background: rgba(255, 255, 255, 0.12);
  border: 1px dashed rgba(255, 255, 255, 0.6);
}

.endpoints-filter-badge {
  font-size: 0.95rem;
  line-height: 1.1;
}

.endpoints-filter-label {
  font-size: 0.95rem;
}

.endpoints-filter-button {
    font-size: 0.95rem;
    height: 2rem !important;
}

.progress.progress-endpoint {
  min-width: 260px;
  height: 0.75rem;
  border-radius: 999px;
}

.rating i {
  margin-right: 0.25rem;
}

@media (max-width: 991.98px) {
  .landing-hero {
    padding: 2.5rem;
  }

  .workflow-image {
    min-height: 260px;
  }
}

#endpoints_filters_wrapper,
#issues_filters_wrapper {
    position: relative;
}

.filters-popover {
    position: absolute;
    top: 100%;
    inset-inline-start: 0;
    min-width: 320px;
    max-width: min(360px, calc(100vw - 3rem));
    margin-top: 0.5rem;
    display: none;
    z-index: 1080;
}

.filters-popover[data-show="true"] {
        display: block;
    }

@media (max-width: 767.98px) {
    .filters-popover {
        position: fixed;
        inset-inline: 1rem;
        top: 5rem;
        max-width: none;
        width: auto;
        z-index: 1080;
}
}

[data-bs-theme="dark"] .app-header-dark {
  background-color: #151521;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

[data-bs-theme="dark"] .app-header-dark .menu-link,
[data-bs-theme="dark"] .app-header-dark .menu-title,
[data-bs-theme="dark"] .app-header-dark .app-navbar-item .btn,
[data-bs-theme="dark"] .app-header-dark .app-navbar-item .menu-link,
[data-bs-theme="dark"] .app-header-dark .app-navbar-item .menu-title,
[data-bs-theme="dark"] .app-header-dark .app-navbar-item .btn .svg-icon,
[data-bs-theme="dark"] .app-header-dark .app-navbar-item .btn i,
[data-bs-theme="dark"] .app-header-dark .text-gray-700,
[data-bs-theme="dark"] .app-header-dark .text-muted {
  color: #f5f8fa !important;
}

[data-bs-theme="dark"] .app-header-dark .btn.btn-icon.btn-custom {
  background-color: rgba(255, 255, 255, 0.1);
  border-color: transparent;
  color: #f5f8fa;
}

[data-bs-theme="dark"] .app-header-dark .btn.btn-icon.btn-custom:hover,
[data-bs-theme="dark"] .app-header-dark .btn.btn-icon.btn-custom:focus {
  background-color: rgba(255, 255, 255, 0.2);
  color: #ffffff;
}

[data-bs-theme="light"] .app-header-dark {
  background-color: #ffffff;
  border-bottom: 1px solid rgba(15, 23, 42, 0.08);
}

[data-bs-theme="light"] .app-header-dark .menu-link,
[data-bs-theme="light"] .app-header-dark .menu-title,
[data-bs-theme="light"] .app-header-dark .app-navbar-item .btn,
[data-bs-theme="light"] .app-header-dark .app-navbar-item .menu-link,
[data-bs-theme="light"] .app-header-dark .app-navbar-item .menu-title,
[data-bs-theme="light"] .app-header-dark .app-navbar-item .btn .svg-icon,
[data-bs-theme="light"] .app-header-dark .app-navbar-item .btn i,
[data-bs-theme="light"] .app-header-dark .text-gray-700,
[data-bs-theme="light"] .app-header-dark .text-muted {
  color: #111827 !important;
}

[data-bs-theme="light"] .app-header-dark .btn.btn-icon.btn-custom {
  background-color: rgba(15, 23, 42, 0.06);
  border-color: transparent;
  color: #1f2937;
}

[data-bs-theme="light"] .app-header-dark .btn.btn-icon.btn-custom:hover,
[data-bs-theme="light"] .app-header-dark .btn.btn-icon.btn-custom:focus {
  background-color: rgba(15, 23, 42, 0.12);
  color: #0f172a;
}

.api-keys-table-wrapper {
  overflow: visible;
}

.dmarc-sparkline {
  width: 100px;
  height: 26px;
  color: var(--kt-primary, #1B84FF);
}

.dmarc-sparkline__line {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.dmarc-sparkline__marker {
  fill: #ffffff;
  stroke: currentColor;
  stroke-width: 1.5;
}

.dmarc-sparkline--empty {
  color: var(--kt-gray-400, #B5B5C3);
}

.dmarc-sparkline--empty .dmarc-sparkline__line {
  stroke-dasharray: 3 3;
}