/**
 * OYROPA Utility Classes
 * Helper-Klassen für schnelle Styling-Anpassungen
 * Version 1.0
 */

/* ================================ */
/* ACCESSIBILITY UTILITIES         */
/* ================================ */

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

/* Skip Links */
.skip-link {
  position: absolute;
  top: -40px;
  left: 6px;
  background: var(--oyropa-navy);
  color: var(--oyropa-white);
  padding: var(--space-2) var(--space-3);
  text-decoration: none;
  border-radius: var(--radius-md);
  z-index: var(--z-max);
  transition: top var(--transition-fast);
}

.skip-link:focus {
  top: 6px;
}

/* Focus Visible */
.focus-ring:focus-visible {
  outline: 2px solid var(--oyropa-gold);
  outline-offset: 2px;
}

/* High Contrast Support */
@media (prefers-contrast: high) {
  .high-contrast-border {
    border: 2px solid currentColor !important;
  }

  .high-contrast-text {
    color: black !important;
  }
}

/* ================================ */
/* VISIBILITY UTILITIES            */
/* ================================ */

.visible { visibility: visible; }
.invisible { visibility: hidden; }
.collapse { visibility: collapse; }

.show { display: block !important; }
.hide { display: none !important; }

/* Responsive Visibility */
@media (max-width: 48rem) {
  .mobile-show { display: block !important; }
  .mobile-hide { display: none !important; }
}

@media (min-width: 48rem) {
  .desktop-show { display: block !important; }
  .desktop-hide { display: none !important; }
}

/* ================================ */
/* BORDER UTILITIES                */
/* ================================ */

/* Border Radius */
.rounded-none { border-radius: var(--radius-none); }
.rounded-sm { border-radius: var(--radius-sm); }
.rounded { border-radius: var(--radius-md); }
.rounded-md { border-radius: var(--radius-md); }
.rounded-lg { border-radius: var(--radius-lg); }
.rounded-xl { border-radius: var(--radius-xl); }
.rounded-2xl { border-radius: var(--radius-2xl); }
.rounded-3xl { border-radius: var(--radius-3xl); }
.rounded-full { border-radius: var(--radius-full); }

/* Border Width */
.border-0 { border-width: 0; }
.border { border-width: 1px; }
.border-2 { border-width: 2px; }
.border-4 { border-width: 4px; }

/* Border Colors */
.border-navy { border-color: var(--oyropa-navy); }
.border-gold { border-color: var(--oyropa-gold); }
.border-gray-200 { border-color: var(--gray-200); }
.border-gray-300 { border-color: var(--gray-300); }
.border-transparent { border-color: transparent; }

/* ================================ */
/* BACKGROUND UTILITIES            */
/* ================================ */

/* Background Colors */
.bg-white { background-color: var(--oyropa-white); }
.bg-navy { background-color: var(--oyropa-navy); }
.bg-gold { background-color: var(--oyropa-gold); }

.bg-gray-50 { background-color: var(--gray-50); }
.bg-gray-100 { background-color: var(--gray-100); }
.bg-gray-200 { background-color: var(--gray-200); }
.bg-gray-800 { background-color: var(--gray-800); }
.bg-gray-900 { background-color: var(--gray-900); }

.bg-success { background-color: var(--color-success); }
.bg-warning { background-color: var(--color-warning); }
.bg-error { background-color: var(--color-error); }
.bg-info { background-color: var(--color-info); }

.bg-transparent { background-color: transparent; }

/* Background Gradients */
.bg-gradient-navy {
  background: linear-gradient(135deg, var(--oyropa-navy) 0%, var(--oyropa-navy-hover) 100%);
}

.bg-gradient-gold {
  background: linear-gradient(135deg, var(--oyropa-gold) 0%, var(--oyropa-gold-hover) 100%);
}

.bg-gradient-hero {
  background: linear-gradient(135deg, var(--oyropa-navy) 0%, var(--oyropa-gold) 100%);
}

/* ================================ */
/* SHADOW UTILITIES                */
/* ================================ */

.shadow-none { box-shadow: none; }
.shadow-xs { box-shadow: var(--shadow-xs); }
.shadow-sm { box-shadow: var(--shadow-sm); }
.shadow { box-shadow: var(--shadow-md); }
.shadow-md { 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); }

/* ================================ */
/* ANIMATION UTILITIES             */
/* ================================ */

/* Transitions */
.transition-none { transition: none; }
.transition-all { transition: all var(--transition-normal); }
.transition-fast { transition: all var(--transition-fast); }
.transition-slow { transition: all var(--transition-slow); }

/* Transform */
.transform { transform: var(--transform, none); }

.scale-95 { transform: scale(0.95); }
.scale-100 { transform: scale(1); }
.scale-105 { transform: scale(1.05); }
.scale-110 { transform: scale(1.1); }

.rotate-45 { transform: rotate(45deg); }
.rotate-90 { transform: rotate(90deg); }
.rotate-180 { transform: rotate(180deg); }

.translate-x-1 { transform: translateX(var(--space-1)); }
.translate-y-1 { transform: translateY(var(--space-1)); }
.translate-x-2 { transform: translateX(var(--space-2)); }
.translate-y-2 { transform: translateY(var(--space-2)); }

/* Hover Transforms */
.hover\:scale-105:hover { transform: scale(1.05); }
.hover\:scale-110:hover { transform: scale(1.1); }
.hover\:-translate-y-1:hover { transform: translateY(-var(--space-1)); }
.hover\:-translate-y-2:hover { transform: translateY(-var(--space-2)); }

/* ================================ */
/* CURSOR UTILITIES                */
/* ================================ */

.cursor-auto { cursor: auto; }
.cursor-default { cursor: default; }
.cursor-pointer { cursor: pointer; }
.cursor-wait { cursor: wait; }
.cursor-text { cursor: text; }
.cursor-move { cursor: move; }
.cursor-help { cursor: help; }
.cursor-not-allowed { cursor: not-allowed; }

/* ================================ */
/* POINTER EVENTS                  */
/* ================================ */

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

/* ================================ */
/* USER SELECT                     */
/* ================================ */

.select-none { user-select: none; }
.select-text { user-select: text; }
.select-all { user-select: all; }
.select-auto { user-select: auto; }

/* ================================ */
/* INTERACTIVITY UTILITIES         */
/* ================================ */

/* Hover Effects */
.hover\:bg-gray-100:hover { background-color: var(--gray-100); }
.hover\:bg-navy:hover { background-color: var(--oyropa-navy); }
.hover\:bg-gold:hover { background-color: var(--oyropa-gold); }

.hover\:text-navy:hover { color: var(--oyropa-navy); }
.hover\:text-gold:hover { color: var(--oyropa-gold); }
.hover\:text-white:hover { color: var(--oyropa-white); }

.hover\:shadow-md:hover { box-shadow: var(--shadow-md); }
.hover\:shadow-lg:hover { box-shadow: var(--shadow-lg); }

/* Focus Effects */
.focus\:outline-none:focus { outline: none; }
.focus\:ring-navy:focus { box-shadow: 0 0 0 3px rgba(26, 54, 93, 0.1); }
.focus\:ring-gold:focus { box-shadow: 0 0 0 3px rgba(214, 158, 46, 0.1); }

/* ================================ */
/* LOADING & STATE UTILITIES       */
/* ================================ */

/* Loading Spinner */
.loading {
  position: relative;
}

.loading::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1.5rem;
  height: 1.5rem;
  margin: -0.75rem 0 0 -0.75rem;
  border: 2px solid var(--gray-300);
  border-top: 2px solid var(--oyropa-navy);
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* Pulse Animation */
.pulse {
  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}

/* Fade Animations */
.fade-in {
  animation: fadeIn 0.3s ease-in-out;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.fade-out {
  animation: fadeOut 0.3s ease-in-out;
}

@keyframes fadeOut {
  from { opacity: 1; }
  to { opacity: 0; }
}

/* Slide Animations */
.slide-up {
  animation: slideUp 0.3s ease-out;
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(1rem);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.slide-down {
  animation: slideDown 0.3s ease-out;
}

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-1rem);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ================================ */
/* UTILITY COMBINATIONS             */
/* ================================ */

/* Card Hover Effect */
.card-hover {
  transition: all var(--transition-normal);
}

.card-hover:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}

/* Button Hover Effect */
.btn-hover {
  transition: all var(--transition-normal);
}

.btn-hover:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

/* Icon Button */
.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--btn-min-height);
  height: var(--btn-min-height);
  padding: 0;
  border: none;
  background: none;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.icon-btn:hover {
  background-color: var(--gray-100);
}

/* Floating Action Button */
.fab {
  position: fixed;
  bottom: var(--space-6);
  right: var(--space-6);
  width: 3.5rem;
  height: 3.5rem;
  background: var(--oyropa-navy);
  color: var(--oyropa-white);
  border: none;
  border-radius: var(--radius-full);
  box-shadow: var(--shadow-lg);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--transition-normal);
  z-index: var(--z-fixed);
}

.fab:hover {
  transform: scale(1.1);
  box-shadow: var(--shadow-xl);
}

/* ================================ */
/* PRINT UTILITIES                 */
/* ================================ */

@media print {
  .print\:hidden {
    display: none !important;
  }

  .print\:block {
    display: block !important;
  }

  .print\:text-black {
    color: black !important;
  }

  .print\:bg-white {
    background: white !important;
  }
}

/* ================================ */
/* DARK MODE PREPARATION            */
/* ================================ */

@media (prefers-color-scheme: dark) {
  /* Wird später implementiert wenn gewünscht */
  .dark\:bg-gray-900 {
    background-color: var(--gray-900);
  }

  .dark\:text-white {
    color: var(--oyropa-white);
  }
}

/* ================================ */
/* REDUCED MOTION UTILITIES         */
/* ================================ */

@media (prefers-reduced-motion: reduce) {
  .motion-reduce\:transition-none {
    transition: none !important;
  }

  .motion-reduce\:animate-none {
    animation: none !important;
  }

  .motion-reduce\:transform-none {
    transform: none !important;
  }
}

/* ================================ */
/* RESPONSIVE UTILITIES             */
/* ================================ */

/* Mobile Only */
@media (max-width: 47.9375rem) {
  .mobile\:text-center { text-align: center; }
  .mobile\:w-full { width: 100%; }
  .mobile\:px-4 { padding-left: var(--space-4); padding-right: var(--space-4); }
  .mobile\:py-6 { padding-top: var(--space-6); padding-bottom: var(--space-6); }
}

/* Tablet and up */
@media (min-width: 48rem) {
  .tablet\:flex { display: flex; }
  .tablet\:hidden { display: none; }
  .tablet\:text-left { text-align: left; }
}

/* Desktop and up */
@media (min-width: 64rem) {
  .desktop\:grid { display: grid; }
  .desktop\:flex-row { flex-direction: row; }
  .desktop\:px-8 { padding-left: var(--space-8); padding-right: var(--space-8); }
}

/* ================================ */
/* DEBUG UTILITIES                 */
/* ================================ */

.debug-red { outline: 2px solid red !important; }
.debug-blue { outline: 2px solid blue !important; }
.debug-green { outline: 2px solid green !important; }

.debug-grid {
  background-image:
    linear-gradient(rgba(255, 0, 0, 0.15) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 0, 0, 0.15) 1px, transparent 1px);
  background-size: var(--space-4) var(--space-4);
}