/**
 * NUGUI Utility Classes
 * Helper classes for common styling needs
 */

/* ========================================
   VISIBILITY
   ======================================== */
.visible { visibility: visible; }
.invisible { visibility: hidden; }
.opacity-0 { opacity: 0; }
.opacity-50 { opacity: 0.5; }
.opacity-75 { opacity: 0.75; }
.opacity-100 { opacity: 1; }

/* ========================================
   BORDERS
   ======================================== */
.border-0 { border-width: 0; }
.border { border-width: 1px; }
.border-2 { border-width: 2px; }
.border-4 { border-width: 4px; }

.border-solid { border-style: solid; }
.border-dashed { border-style: dashed; }
.border-dotted { border-style: dotted; }

.rounded-none { border-radius: 0; }
.rounded-sm { border-radius: 0.125rem; }
.rounded { border-radius: 0.25rem; }
.rounded-md { border-radius: 0.375rem; }
.rounded-lg { border-radius: 0.5rem; }
.rounded-xl { border-radius: 0.75rem; }
.rounded-2xl { border-radius: 1rem; }
.rounded-3xl { border-radius: 1.5rem; }
.rounded-full { border-radius: 9999px; }

/* ========================================
   SHADOWS
   ======================================== */
.shadow-sm { box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); }
.shadow { box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); }
.shadow-md { box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); }
.shadow-lg { box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1); }
.shadow-xl { box-shadow: 0 16px 32px rgba(0, 0, 0, 0.1); }
.shadow-2xl { box-shadow: 0 24px 48px rgba(0, 0, 0, 0.15); }
.shadow-none { box-shadow: none; }

/* ========================================
   COLORS
   ======================================== */
.text-primary { color: var(--color-primary); }
.text-secondary { color: var(--color-text-secondary); }
.text-success { color: var(--color-success); }
.text-error { color: var(--color-error); }
.text-warning { color: var(--color-warning); }
.text-info { color: var(--color-info); }
.text-white { color: #FFFFFF; }
.text-black { color: #000000; }

.bg-primary { background-color: var(--color-primary); }
.bg-secondary { background-color: var(--color-secondary); }
.bg-success { background-color: var(--color-success); }
.bg-error { background-color: var(--color-error); }
.bg-warning { background-color: var(--color-warning); }
.bg-info { background-color: var(--color-info); }
.bg-white { background-color: #FFFFFF; }
.bg-black { background-color: #000000; }
.bg-transparent { background-color: transparent; }

/* ========================================
   CURSOR
   ======================================== */
.cursor-auto { cursor: auto; }
.cursor-default { cursor: default; }
.cursor-pointer { cursor: pointer; }
.cursor-wait { cursor: wait; }
.cursor-move { cursor: move; }
.cursor-not-allowed { cursor: not-allowed; }

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

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

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

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

/* ========================================
   GRADIENTS
   ======================================== */
.gradient-primary {
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-light) 100%);
}

.gradient-secondary {
  background: linear-gradient(135deg, var(--color-secondary) 0%, var(--color-primary) 100%);
}

.gradient-accent {
  background: linear-gradient(135deg, var(--color-accent) 0%, var(--color-accent-secondary) 100%);
}

/* ========================================
   FILTERS
   ======================================== */
.blur-sm { filter: blur(4px); }
.blur { filter: blur(8px); }
.blur-lg { filter: blur(16px); }
.grayscale { filter: grayscale(100%); }
.invert { filter: invert(100%); }
.sepia { filter: sepia(100%); }

/* ========================================
   BACKDROP FILTERS
   ======================================== */
.backdrop-blur-sm { backdrop-filter: blur(4px); }
.backdrop-blur { backdrop-filter: blur(8px); }
.backdrop-blur-lg { backdrop-filter: blur(16px); }

/* ========================================
   ACCESSIBILITY
   ======================================== */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

.focus-visible:focus {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* ========================================
   RESPONSIVE UTILITIES
   ======================================== */
@media (max-width: 640px) {
  .sm\:hidden { display: none; }
  .sm\:block { display: block; }
}

@media (min-width: 768px) {
  .md\:hidden { display: none; }
  .md\:block { display: block; }
}

@media (min-width: 1024px) {
  .lg\:hidden { display: none; }
  .lg\:block { display: block; }
}

/* ========================================
   PRINT UTILITIES
   ======================================== */
@media print {
  .print\:hidden { display: none; }
  .print\:block { display: block; }
}