/**
 * Utility Classes - Structure Only
 * Colors are defined in colors.css
 */

/* ===== BACKGROUND UTILITIES ===== */
.bg-light {
  /* Color applied in colors.css */
}

.bg-dark {
  /* Color applied in colors.css */
}

/* ===== TEXT ALIGNMENT ===== */
.text-left { text-align: left; }
.text-center { text-align: center; }
.text-right { text-align: right; }

/* ===== TEXT TRANSFORM ===== */
.text-uppercase { text-transform: uppercase; }
.text-lowercase { text-transform: lowercase; }
.text-capitalize { text-transform: capitalize; }

/* ===== FONT WEIGHT ===== */
.font-normal { font-weight: var(--font-normal); }
.font-medium { font-weight: var(--font-medium); }
.font-semibold { font-weight: var(--font-semibold); }
.font-bold { font-weight: var(--font-bold); }

/* ===== OPACITY ===== */
.opacity-50 { opacity: 0.5; }
.opacity-70 { opacity: 0.7; }
.opacity-80 { opacity: 0.8; }
.opacity-90 { opacity: 0.9; }

/* ===== TEXT UTILITIES ===== */
.text-danger { color: var(--color-danger); }
.text-success { color: var(--color-success); }
.text-warning { color: var(--color-warning); }
.text-info { color: var(--color-info); }
.text-primary { color: var(--color-primary); }
.text-sm { font-size: var(--text-sm); }
.text-lg { font-size: var(--text-lg); }
.text-xl { font-size: var(--text-xl); }
.text-2xl { font-size: var(--text-2xl); }

/* ===== CURSOR ===== */
.cursor-pointer { cursor: pointer; }
.cursor-not-allowed { cursor: not-allowed; }

/* ===== USER SELECT ===== */
.select-none { user-select: none; }
.select-text { user-select: text; }
.select-all { user-select: all; }

/* ===== POINTER EVENTS ===== */
.pointer-events-none { pointer-events: none; }
.pointer-events-auto { pointer-events: auto; }

/* ===== VISIBILITY ===== */
.visible { visibility: visible; }
.invisible { visibility: hidden; }

/* ===== WIDTH/HEIGHT ===== */
.w-full { width: 100%; }
.h-full { height: 100%; }
.w-auto { width: auto; }
.h-auto { height: auto; }

/* ===== MARGIN AUTO ===== */
.mx-auto {
  margin-left: auto;
  margin-right: auto;
}

.my-auto {
  margin-top: auto;
  margin-bottom: auto;
}

/* ===== TRUNCATE TEXT ===== */
.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ===== LINE CLAMP ===== */
.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.line-clamp-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ===== ASPECT RATIOS ===== */
.aspect-square { aspect-ratio: 1 / 1; }
.aspect-video { aspect-ratio: 16 / 9; }
.aspect-portrait { aspect-ratio: 3 / 4; }

/* ===== ROUNDED UTILITIES ===== */
.rounded-none { border-radius: 0; }
.rounded-full { border-radius: var(--radius-full); }

/* ===== SHADOW UTILITIES ===== */
.shadow-sm { box-shadow: var(--shadow-sm); }
.shadow { box-shadow: var(--shadow-md); }
.shadow-lg { box-shadow: var(--shadow-lg); }
.shadow-xl { box-shadow: var(--shadow-xl); }
.shadow-2xl { box-shadow: var(--shadow-2xl); }
.shadow-none { box-shadow: none; }

/* ===== Z-INDEX ===== */
.z-0 { z-index: 0; }
.z-10 { z-index: 10; }
.z-20 { z-index: 20; }
.z-30 { z-index: 30; }
.z-40 { z-index: 40; }
.z-50 { z-index: 50; }

/* ===== SPACING ===== */
.mb-2 { margin-bottom: var(--space-2); }
.mb-4 { margin-bottom: var(--space-4); }
.mb-6 { margin-bottom: var(--space-6); }
.mt-2 { margin-top: var(--space-2); }
.mt-4 { margin-top: var(--space-4); }
.ml-2 { margin-left: var(--space-2); }
.mr-2 { margin-right: var(--space-2); }

/* ===== DISPLAY ===== */
.d-block { display: block; }
.d-flex { display: flex; }
.d-grid { display: grid; }

/* ===== FLEX ===== */
.flex-start { align-items: flex-start; }
.flex-center { align-items: center; }
.flex-end { align-items: flex-end; }
.flex-wrap { flex-wrap: wrap; }
.gap-2 { gap: var(--space-2); }
.gap-3 { gap: var(--space-3); }
.gap-4 { gap: var(--space-4); }

/* ===== GRID LAYOUTS ===== */
.grid-2-cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: var(--space-4);
}

.grid-3-cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--space-4);
}

.filter-row {
  display: grid;
  grid-template-columns: 2fr 1fr 1.5fr auto;
  gap: var(--space-4);
  align-items: end;
}

@media (max-width: 1024px) {
  .filter-row {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 768px) {
  .filter-row {
    grid-template-columns: 1fr;
  }
}

.profile-layout {
  display: grid;
  grid-template-columns: 1fr 400px;
  gap: var(--space-6);
  align-items: start;
}

@media (max-width: 1024px) {
  .profile-layout {
    grid-template-columns: 1fr;
  }
}

/* ===== FORM HELPERS ===== */
.checkbox-label {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  cursor: pointer;
}

.help-text {
  display: block;
  margin-top: var(--space-2);
  font-size: var(--text-sm);
  opacity: 0.7;
}

.w-100 { width: 100%; }

/* ===== RESPONSIVE MOBILE ===== */
@media (max-width: 768px) {
  /* Auto-wrap flex containers with gaps on mobile */
  .d-flex.gap-3,
  .d-flex.gap-4 {
    flex-wrap: wrap;
  }

  /* Grid layouts single column on mobile */
  .grid-2-cols,
  .grid-3-cols {
    grid-template-columns: 1fr;
  }
}