@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;
  }

  /* 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;
  }
}