/* vibeWidgets CSS - Utility Classes */

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

.flex-col {
  display: flex;
  flex-direction: column;
}

.flex-col-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.flex-col-hidden {
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}

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

.flex-row-center {
  display: flex;
  align-items: center;
  gap: var(--space-6);
}

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

.flex-row {
  display: flex;
  align-items: center;
}

.flex-grow {
  flex: 1;
  min-height: 0;
}

.flex-grow-shrink {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
}

.flex-no-shrink {
  flex-shrink: 0;
}

/* Size Utilities */
.full-size {
  width: 100%;
  height: 100%;
}

.full-size-flex {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-height: 0;
}

.box-border {
  box-sizing: border-box;
}

/* Panel Base Classes */
.panel-base {
  background: var(--gradient-panel);
  border: 2px solid var(--blue-opacity-30);
  border-radius: var(--space-9);
  box-shadow: 0 var(--space-6) var(--space-24) var(--black-opacity-60);
  contain: layout style paint;
}

.card-base {
  background: var(--space-opacity-95);
  border: 2px solid var(--blue-opacity-20);
  border-radius: var(--space-9);
  transition: all var(--timing-fast);
}

.card-base:hover {
  border-color: var(--blue-opacity-40);
  box-shadow: 0 0 var(--space-18) var(--blue-opacity-20);
}

/* Button Base Classes */
.btn-base {
  padding: var(--space-9) var(--space-18);
  border-radius: var(--space-6);
  font-size: var(--font-12);
  font-weight: 600;
  cursor: pointer;
  transition: all var(--timing-fast);
  border: none;
  outline: none;
}

.btn-primary {
  background: var(--gradient-button-primary);
  color: var(--space-deep);
  box-shadow: 0 0 var(--space-12) var(--glow-blue);
}

.btn-primary:hover {
  box-shadow: 0 0 var(--space-24) var(--glow-blue-strong);
  transform: translateY(-2px);
}

.btn-secondary {
  background: var(--space-opacity-80);
  color: var(--text-primary);
  border: 2px solid var(--blue-opacity-30);
}

.btn-secondary:hover {
  background: var(--blue-opacity-15);
  border-color: var(--blue-opacity-60);
}

/* Form Input Base */
.form-input-base {
  width: 100%;
  border-radius: var(--space-6);
  border: 2px solid var(--blue-opacity-30);
  background: var(--space-opacity-80);
  padding: var(--space-9) var(--space-12);
  font-size: var(--font-12);
  color: var(--text-primary);
  transition: all var(--timing-fast);
  box-shadow: 0 0 var(--space-6) var(--blue-opacity-10);
  outline: none;
  font-family: inherit;
  box-sizing: border-box;
}

.form-input-base:focus {
  border-color: var(--blue-electric);
  box-shadow: 
    0 0 0 2px rgb(0 153 255 / 30%),
    0 0 var(--space-12) var(--glow-blue);
  background: var(--blue-opacity-10);
}

.form-input-base:hover:not(:focus) {
  border-color: rgb(0 153 255 / 60%);
  box-shadow: 0 0 var(--space-9) var(--blue-opacity-20);
}

/* Display Utilities - !important justified for utility overrides */
.hidden {
  display: none !important;
}

.block {
  display: block;
}

.inline-block {
  display: inline-block;
}

/* Text Utilities */
.text-center {
  text-align: center;
}

.text-left {
  text-align: left;
}

.text-right {
  text-align: right;
}

.text-muted {
  color: var(--text-muted);
}

.text-primary {
  color: var(--text-primary);
}

.text-secondary {
  color: var(--text-secondary);
}

/* GPU Acceleration */
.gpu-accelerate {
  will-change: transform;
  transform: translateZ(0);
}

/* Overflow Utilities */
.overflow-auto {
  overflow: auto;
}

.overflow-hidden {
  overflow: hidden;
}

.overflow-y-auto {
  overflow-y: auto;
}

.overflow-x-auto {
  overflow-x: auto;
}

/* Position Utilities */
.relative {
  position: relative;
}

.absolute {
  position: absolute;
}

.fixed {
  position: fixed;
}

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

.cursor-default {
  cursor: default;
}

.cursor-not-allowed {
  cursor: not-allowed;
}

/* Opacity Utilities */
.opacity-0 {
  opacity: 0;
}

.opacity-50 {
  opacity: 0.5;
}

.opacity-100 {
  opacity: 1;
}

/* Pointer Events */
.pointer-events-none {
  pointer-events: none;
}

.pointer-events-auto {
  pointer-events: auto;
}

/* Spacing Utilities */
.p-0 { padding: 0; }
.p-3 { padding: var(--space-3); }
.p-6 { padding: var(--space-6); }
.p-9 { padding: var(--space-9); }
.p-12 { padding: var(--space-12); }
.p-18 { padding: var(--space-18); }
.p-24 { padding: var(--space-24); }

.m-0 { margin: 0; }
.m-3 { margin: var(--space-3); }
.m-6 { margin: var(--space-6); }
.m-9 { margin: var(--space-9); }
.m-12 { margin: var(--space-12); }
.m-18 { margin: var(--space-18); }
.m-24 { margin: var(--space-24); }

.gap-3 { gap: var(--space-3); }
.gap-6 { gap: var(--space-6); }
.gap-9 { gap: var(--space-9); }
.gap-12 { gap: var(--space-12); }
.gap-18 { gap: var(--space-18); }

/* Border Radius Utilities */
.rounded-3 { border-radius: var(--space-3); }
.rounded-6 { border-radius: var(--space-6); }
.rounded-9 { border-radius: var(--space-9); }
.rounded-12 { border-radius: var(--space-12); }
.rounded-full { border-radius: 50%; }

/* Width & Height Utilities */
.w-full { width: 100%; }
.h-full { height: 100%; }
.w-auto { width: auto; }
.h-auto { height: auto; }

/* Min/Max Utilities */
.min-h-0 { min-height: 0; }
.min-w-0 { min-width: 0; }
.max-w-full { max-width: 100%; }
.max-h-full { max-height: 100%; }

/* Transition Utilities */
.transition-fast { transition: all var(--timing-fast); }
.transition-medium { transition: all var(--timing-medium); }
.transition-slow { transition: all var(--timing-slow); }

/* Shadow Utilities */
.shadow-sm { box-shadow: 0 0 var(--space-6) var(--blue-opacity-10); }
.shadow-md { box-shadow: 0 0 var(--space-12) var(--blue-opacity-20); }
.shadow-lg { box-shadow: 0 0 var(--space-24) var(--blue-opacity-30); }
.shadow-glow { box-shadow: 0 0 var(--space-18) var(--glow-blue); }

/* User Select Utilities */
.select-none { user-select: none; }
.select-text { user-select: text; }
.select-all { user-select: all; }

/* Z-Index Utilities */
.z-base { z-index: var(--z-base); }
.z-modal { z-index: var(--z-modal); }
.z-popover { z-index: var(--z-popover); }
.z-tooltip { z-index: var(--z-tooltip); }
.z-header { z-index: var(--z-header); }