@tailwind base;
@tailwind components;
@tailwind utilities;

/* --- App-like Layout --- */
body {
  @apply bg-gradient-to-br from-white via-orange-50 to-orange-200 min-h-screen;
}
.app-container {
  @apply max-w-md mx-auto min-h-screen flex flex-col bg-white/90 shadow-2xl rounded-3xl border border-orange-100;
  backdrop-filter: blur(16px);
}
.sticky-header {
  @apply sticky top-0 z-30 bg-white/95 border-b border-orange-100 px-4 py-3 flex items-center gap-2;
  backdrop-filter: blur(12px);
}
.section-divider {
  @apply border-b border-orange-100 my-2;
}

/* --- Search --- */
.search-bar {
  @apply flex items-center bg-white/80 rounded-full shadow px-3 py-2 gap-2 mt-2 mb-3;
}
.search-bar input {
  @apply flex-1 bg-transparent outline-none text-base text-gray-900 placeholder-gray-400;
}
#searchResults {
  @apply absolute left-0 right-0 mt-2 bg-white rounded-xl shadow-lg z-20;
  max-height: 16rem;
  overflow-y: auto;
}
#searchResults > div {
  @apply px-4 py-2 cursor-pointer hover:bg-orange-100 transition rounded-xl;
}

/* --- Current Weather --- */
.current-weather {
  @apply flex flex-col items-center gap-2 py-2;
}
.current-weather-main {
  @apply flex items-center gap-3;
}
.current-weather-icon {
  @apply text-6xl text-orange-400 drop-shadow-lg;
}
.current-weather-temp {
  @apply text-5xl font-extrabold text-orange-500;
}
.current-weather-details {
  @apply flex gap-4 mt-2;
}
.current-weather-details > div {
  @apply flex flex-col items-center;
}
.current-weather-details span {
  @apply text-xs text-gray-500;
}

/* --- Forecast Grid --- */
#forecastDays {
  @apply grid grid-cols-2 sm:grid-cols-3 gap-2 w-full mt-2;
}
#forecastDays > div {
  @apply bg-white/80 rounded-xl shadow border border-orange-100 flex flex-col items-center py-3 px-2 transition hover:bg-orange-50;
}
#forecastDays > div .material-symbols-outlined {
  @apply text-2xl text-orange-400;
}
#forecastDays > div .day-label {
  @apply text-xs text-gray-500 font-semibold;
}
#forecastDays > div .desc-label {
  @apply text-xs text-gray-400;
}
#forecastDays > div .temp-main {
  @apply text-lg font-bold text-gray-900 mt-1;
}
#forecastDays > div .temp-range {
  @apply text-xs text-gray-400;
}

/* --- Map Card --- */
#precipMap {
  @apply bg-gradient-to-tr from-blue-100 to-blue-300 rounded-xl shadow border border-blue-100 flex flex-col items-center justify-center py-4 mt-2 transition hover:scale-105;
}
#precipMap .material-symbols-outlined {
  @apply text-3xl text-blue-700 animate-bounce;
}
#precipMap .map-label {
  @apply font-bold text-blue-900 mt-1 text-sm;
}

/* --- API Status --- */
#apiStatus {
  @apply flex gap-2 mt-2;
}
#apiStatus > span {
  @apply flex items-center gap-1 px-2 py-1 rounded-full text-xs font-semibold;
}
.bg-success {
  @apply bg-green-100 text-green-700;
}
.bg-fail {
  @apply bg-red-100 text-red-700;
}

/* --- Loading Overlay --- */
#loadingOverlay {
  @apply fixed inset-0 bg-black/40 flex items-center justify-center z-50;
  backdrop-filter: blur(4px);
}
#loadingOverlay .material-symbols-outlined {
  @apply text-5xl text-orange-500 animate-spin;
}
#loadingOverlay .loading-text {
  @apply text-white text-lg font-semibold animate-pulse;
}

/* --- Animations --- */
@keyframes weather-icon {
  0% { transform: scale(1) rotate(-8deg); }
  50% { transform: scale(1.08) rotate(8deg); }
  100% { transform: scale(1) rotate(-8deg); }
}
.animate-weather-icon {
  animation: weather-icon 2.5s infinite cubic-bezier(.77,0,.18,1);
}
@keyframes fade-in {
  from { opacity: 0; transform: translateY(40px); }
  to { opacity: 1; transform: translateY(0); }
}
.animate-fade-in {
  animation: fade-in 1s cubic-bezier(.77,0,.18,1);
}
@keyframes rainDrop { 0% { transform: translateY(-40px); opacity: 0; } 10% { opacity: 1; } 90% { opacity: 1; } 100% { transform: translateY(120px); opacity: 0; } }

/* --- Responsive --- */
@media (max-width: 600px) {
  .app-container { border-radius: 0; }
  #forecastDays { grid-template-columns: 1fr 1fr; }
}