/* ==========================================================================
   Utilities — Reusable helper classes for display, cursor, sizing
   ========================================================================== */

/* ---------------------------------------------------------------------------
   Display State Utilities — Used by JavaScript instead of direct style manipulation
   --------------------------------------------------------------------------- */

.js-hidden {
  display: none !important;
}

.js-visible {
  display: block !important;
}

.status-container-hidden {
  display: none;
}

.status-container-visible {
  display: block;
}

.clear-search-hidden {
  display: none;
}

.clear-search-visible {
  display: block;
}

.form-status-hidden {
  display: none;
}

.form-status-visible {
  display: block;
}

.error-message-hidden {
  display: none;
}

.error-message-visible {
  display: block;
}

/* ---------------------------------------------------------------------------
   Positioning
   --------------------------------------------------------------------------- */

.alert-container-positioning {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 9999;
  max-width: 400px;
}

/* ---------------------------------------------------------------------------
   Cursor & Selection States
   --------------------------------------------------------------------------- */

.cursor-pointer {
  cursor: pointer;
}

.cursor-default {
  cursor: default;
}

.cursor-col-resize {
  cursor: col-resize;
}

.user-select-none {
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}

.user-select-auto {
  user-select: auto;
  -webkit-user-select: auto;
  -moz-user-select: auto;
  -ms-user-select: auto;
}

/* Body dragging state - applied to body during splitter drag */
.body-dragging {
  user-select: none !important;
  -webkit-user-select: none !important;
  -moz-user-select: none !important;
  -ms-user-select: none !important;
}

/* ---------------------------------------------------------------------------
   Dynamic Layout Classes — For splitter/JS manipulation
   --------------------------------------------------------------------------- */

.dynamic-flex-1 {
  flex: 1 !important;
}

.dynamic-flex-0-auto {
  flex: 0 0 auto !important;
}

.dynamic-width-auto {
  width: auto !important;
}

.dynamic-width-custom {
  width: var(--dynamic-panel-width) !important;
}

.dynamic-min-width-custom {
  min-width: var(--dynamic-panel-min-width, 250px) !important;
}

/* ---------------------------------------------------------------------------
   Button Sizing
   --------------------------------------------------------------------------- */

.btn-min-width-sm {
  min-width: 2.5rem;
}

.btn-width-sm {
  width: 2.5rem;
  height: 2.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-xs);
}

.btn-width-sm i {
  font-size: var(--font-size-base);
}