@layer utilities {
  /* ==========================================================================
     Utilities
     Helper classes for common patterns
     ========================================================================== */

  /* Scrollable Containers
     ------------------------------------------------------------------------- */
  .scrollable-200 {
    max-height: 200px;
    overflow-y: auto;
  }

  .scrollable-500 {
    max-height: 500px;
    overflow-y: auto;
  }

  /* Cursor Utilities
     ------------------------------------------------------------------------- */
  .cursor-pointer {
    cursor: pointer;
  }

  .cursor-default {
    cursor: default;
  }

  /* Border Accent Utilities
     ------------------------------------------------------------------------- */
  .border-accent-warning {
    border-left: 3px solid var(--bs-warning);
  }

  .border-accent-success {
    border-left: 3px solid var(--bs-success);
  }

  .border-accent-danger {
    border-left: 3px solid var(--bs-danger);
  }

  .border-accent-info {
    border-left: 3px solid var(--bs-info);
  }

  .divider-accent {
    border-left: 3px solid var(--bs-secondary);
  }

  /* Flex Utilities
     ------------------------------------------------------------------------- */
  .flex-center {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .flex-between {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  /* Gap Utilities
     ------------------------------------------------------------------------- */
  .gap-2px {
    gap: 2px;
  }

  .gap-4px {
    gap: 4px;
  }

  /* Text Truncation
     ------------------------------------------------------------------------- */
  .text-truncate-250 {
    max-width: 250px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* Form Utilities
     ------------------------------------------------------------------------- */
  .form-width-auto {
    width: auto;
  }

  /* Hash-Details Anchor Targets
     -------------------------------------------------------------------------
     Empty <span id="foo" class="anchor-target"> markers used by the
     `hash-details` Stimulus controller to scroll operators to a
     sub-section inside a <details> that just auto-expanded.
     Without scroll-margin-top, the span lands behind the sticky admin
     topbar (~56px on desktop, ~48px on mobile). 5rem covers both plus
     a comfortable breathing room. 2026-07-05. */
  .anchor-target {
    display: block;
    scroll-margin-top: 5rem;
  }

  /* Chart Sizing
     ------------------------------------------------------------------------- */
  .circular-chart-size {
    width: 80px;
    height: 80px;
  }

  .uptime-progress-bar {
    width: 60px;
    height: 6px;
  }

  /* Text Sizing
     ------------------------------------------------------------------------- */
  .text-label-small {
    font-size: 0.7rem;
  }

  /* Whitespace
     ------------------------------------------------------------------------- */
  .ws-pre-wrap {
    white-space: pre-wrap;
  }
}