/* Base styles for the GoodWork Strategy Crafting app
   (einzige ausgelieferte Stylesheet-Datei — wird von index.html als /index.css geladen) */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap');

/* Reset and base styles */
* {
  box-sizing: border-box;
}

body {
  margin: 0;
  /* iOS Safe Area Support */
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
    sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background-color: #f8fafc; /* slate-50 */
  color: #1f2937;
}

/* Custom utility classes */
.prose {
  max-width: none;
}

.prose h1, .prose h2, .prose h3, .prose h4, .prose h5, .prose h6 {
  margin-top: 2rem;
  margin-bottom: 1rem;
  font-weight: 600;
}

.prose p {
  margin-bottom: 1rem;
  line-height: 1.6;
}

.prose ul, .prose ol {
  margin-bottom: 1rem;
  padding-left: 2rem;
}

.prose li {
  margin-bottom: 0.5rem;
}

/* Animation utilities */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes slideInRight {
  from { opacity: 0; transform: translateX(20px); }
  to { opacity: 1; transform: translateX(0); }
}

@keyframes slideInLeft {
  from { opacity: 0; transform: translateX(-20px); }
  to { opacity: 1; transform: translateX(0); }
}

@keyframes scaleIn {
  from { opacity: 0; transform: scale(0.95); }
  to { opacity: 1; transform: scale(1); }
}

@keyframes pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}

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

.animate-slide-in-right {
  animation: slideInRight 0.3s ease-out;
}

.animate-slide-in-left {
  animation: slideInLeft 0.3s ease-out;
}

.animate-scale-in {
  animation: scaleIn 0.2s ease-out;
}

.animate-pulse-once {
  animation: pulse 0.3s ease-out;
}

/* PWA Install Banner Animation */
@keyframes slide-up {
  from {
    transform: translateY(100%);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

.animate-slide-up {
  animation: slide-up 0.3s ease-out;
}

/* Safe area for mobile devices */
.safe-area-top {
  padding-top: env(safe-area-inset-top);
}

.safe-area-bottom {
  padding-bottom: env(safe-area-inset-bottom);
}

/* Custom scrollbar styles */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 10px;
}

::-webkit-scrollbar-thumb {
  background: #888;
  border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
  background: #555;
}

/* Gradient text utility */
.gradient-text {
  background: linear-gradient(135deg, #9333ea 0%, #6b21a8 100%); /* purple-600 -> purple-800 */
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

/* ==========================================
   SCREEN-ONLY: Print Header ausblenden
   (Print-Styles sind in /public/print.css)
   ========================================== */
.print-report-header {
  display: none;
}

/* Print-spezifische Utility-Klassen (Screen-Ansicht) */
.print-heading,
.print-section-title,
.print-subsection-title,
.print-paragraph,
.print-list,
.print-list-item,
.print-keep-together,
.print-page-break-before {
  /* Keine Auswirkung auf Screen */
}

/* Touch-friendly tap targets */
@media (max-width: 768px) {
  button, a, select, input[type="checkbox"], input[type="radio"] {
    min-height: 44px;
    min-width: 44px;
  }

  /* Prevent horizontal overflow on mobile */
  .max-w-7xl {
    overflow-x: hidden;
  }
}

/* Standalone PWA mode adjustments */
@media (display-mode: standalone) {
  body {
    -webkit-user-select: none;
    user-select: none;
  }

  /* Allow text selection in inputs and content areas */
  input, textarea, [contenteditable], p, span, h1, h2, h3, h4, h5, h6 {
    -webkit-user-select: text;
    user-select: text;
  }
}