@layer custom {
  /* Save indicator: the status dot and label of every input component.
     Linked by base.html on every page. */

  /* Save Indicator Container */
  .save-indicator {
    display: inline-flex;
    align-items: center;
    gap: var(--bs-spacer-3);
    font-size: var(--bs-font-size-xs);
    font-weight: 500;
  }

  /* Save Indicator Dot */
  .save-indicator-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    transition: background-color 0.3s ease;
    flex-shrink: 0;
  }

  /* Saved State - Green */
  .save-indicator-dot.saved {
    background-color: var(--bs-success-bg);
  }

  /* Unsaved State - Red */
  .save-indicator-dot.unsaved {
    background-color: var(--bs-danger-bg);
  }

  /* Saving State - Orange with pulse animation */
  .save-indicator-dot.saving {
    background-color: var(--bs-warning-bg);
    animation: saveIndicatorPulse 1s infinite;
  }

  @keyframes saveIndicatorPulse {
    0%,
    100% {
      opacity: 1;
      transform: scale(1);
    }
    50% {
      opacity: 0.5;
      transform: scale(0.9);
    }
  }

  /* Text Labels (optional) */
  .save-indicator-text {
    color: var(--bs-fg-2);
    font-size: var(--bs-font-size-xs);
    text-transform: uppercase;
    letter-spacing: 0.025em;
  }

  .save-indicator-text.saved {
    color: var(--bs-success-fg);
  }

  .save-indicator-text.unsaved {
    color: var(--bs-danger-fg);
  }

  .save-indicator-text.saving {
    color: var(--bs-warning-fg);
  }

  /* Dark mode support (for dark headers) */
  .bg-primary .save-indicator-dot,
  .bg-black .save-indicator-dot,
  .hsc-header .save-indicator-dot {
    box-shadow: 0 0 0 2px var(--app-on-fill-ring);
  }

  .bg-primary .save-indicator-text,
  .bg-black .save-indicator-text,
  .hsc-header .save-indicator-text {
    color: var(--app-on-fill);
  }

  .bg-primary .save-indicator-text.saved,
  .bg-black .save-indicator-text.saved,
  .hsc-header .save-indicator-text.saved {
    color: var(--app-on-fill-saved);
  }

  .bg-primary .save-indicator-text.unsaved,
  .bg-black .save-indicator-text.unsaved,
  .hsc-header .save-indicator-text.unsaved {
    color: var(--app-on-fill-unsaved);
  }

  /* Windows High Contrast Mode Support */
  @media (forced-colors: active) {
    .bg-black .save-indicator-dot {
      forced-color-adjust: none;
    }
    .bg-black .save-indicator-text {
      forced-color-adjust: none;
    }
    .bg-black .save-indicator-text.saved {
      forced-color-adjust: none;
    }
    .bg-black .save-indicator-text.unsaved {
      forced-color-adjust: none;
    }
    .bg-primary .save-indicator-dot {
      forced-color-adjust: none;
    }
    .bg-primary .save-indicator-text {
      forced-color-adjust: none;
    }
    .bg-primary .save-indicator-text.saved {
      forced-color-adjust: none;
    }
    .bg-primary .save-indicator-text.unsaved {
      forced-color-adjust: none;
    }
    .hsc-header .save-indicator-dot {
      forced-color-adjust: none;
    }
    .hsc-header .save-indicator-text {
      forced-color-adjust: none;
    }
    .hsc-header .save-indicator-text.saved {
      forced-color-adjust: none;
    }
    .hsc-header .save-indicator-text.unsaved {
      forced-color-adjust: none;
    }
    .save-indicator-dot.saved {
      forced-color-adjust: none;
    }
    .save-indicator-dot.saving {
      forced-color-adjust: none;
    }
    .save-indicator-dot.unsaved {
      forced-color-adjust: none;
    }
    .save-indicator-text {
      forced-color-adjust: none;
    }
    .save-indicator-text.saved {
      forced-color-adjust: none;
    }
    .save-indicator-text.saving {
      forced-color-adjust: none;
    }
    .save-indicator-text.unsaved {
      forced-color-adjust: none;
    }
  }
}