/* TennisMap Custom Styles */

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

/* Safe area for mobile devices */
@supports (padding: max(0px)) {
  body {
    padding-top: env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
  }
}

/* PWA Install Button */
.pwa-install-btn {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 1000;
}

/* Match Scoring Styles */
.score-button {
  @apply px-6 py-4 text-lg font-bold rounded-lg shadow-md transition-all duration-200;
  @apply active:scale-95 active:shadow-sm;
}

.score-button:active {
  transform: scale(0.95);
}

/* Touch feedback */
.touch-feedback {
  position: relative;
  overflow: hidden;
}

.touch-feedback::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.5);
  transform: translate(-50%, -50%);
  transition: width 0.3s, height 0.3s;
}

.touch-feedback:active::after {
  width: 300px;
  height: 300px;
}

/* Loading spinner */
.spinner {
  border: 3px solid rgba(0, 0, 0, 0.1);
  border-left-color: #3b82f6;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  animation: spin 1s linear infinite;
}

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

/* Toast notifications */
.toast {
  @apply fixed bottom-4 left-1/2 transform -translate-x-1/2 z-50;
  @apply bg-gray-800 text-white px-6 py-3 rounded-lg shadow-lg;
  animation: slideUp 0.3s ease-out;
}

@keyframes slideUp {
  from {
    transform: translate(-50%, 100px);
    opacity: 0;
  }
  to {
    transform: translate(-50%, 0);
    opacity: 1;
  }
}

/* Match card */
.match-card {
  @apply bg-white rounded-lg shadow p-4 mb-4 hover:shadow-md transition-shadow;
}

/* Button states */
.btn-primary {
  @apply bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded;
}

.btn-secondary {
  @apply bg-gray-600 hover:bg-gray-700 text-white font-bold py-2 px-4 rounded;
}

.btn-danger {
  @apply bg-red-600 hover:bg-red-700 text-white font-bold py-2 px-4 rounded;
}

/* Offline indicator */
.offline-indicator {
  @apply fixed top-0 left-0 right-0 bg-yellow-500 text-white text-center py-2 z-50;
}