/* Weather Dashboard - Main Stylesheet */
/* Cyclone-Rated Meteorological Instrumentation Platform */
/* All styles separated per specification - NO inline CSS */

:root {
    --slate-950: #020617;
    --slate-900: #0f172a;
    --slate-800: #1e293b;
    --slate-700: #334155;
    --slate-600: #475569;
    --slate-500: #64748b;
    --slate-400: #94a3b8;
    --slate-300: #cbd5e1;
    --cyan-400: #22d3ee;
    --cyan-500: #06b6d4;
    --amber-400: #fbbf24;
    --amber-500: #f59e0b;
    --rose-400: #fb7185;
    --rose-500: #f43f5e;
    --emerald-400: #34d399;
    --emerald-500: #10b981;
    --violet-400: #a78bfa;
    --violet-500: #8b5cf6;
    --orange-400: #fb923c;
    --orange-500: #f97316;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
    font-family: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, sans-serif;
    background-color: var(--slate-950);
    color: #ffffff;
    min-height: 100vh;
    line-height: 1.5;
}

.mono { font-family: 'JetBrains Mono', monospace; }
.tabular-nums { font-variant-numeric: tabular-nums; }

/* Layout */
.dashboard-container { max-width: 1400px; margin: 0 auto; padding: 1.5rem; }
.main-grid { display: grid; grid-template-columns: 1fr; gap: 1.5rem; }
@media (min-width: 1024px) { .main-grid { grid-template-columns: repeat(3, 1fr); } }
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.history-grid { display: grid; grid-template-columns: 1fr; gap: 1.5rem; margin-top: 1.5rem; }
@media (min-width: 768px) { .history-grid { grid-template-columns: repeat(2, 1fr); } }
.space-y-6 > * + * { margin-top: 1.5rem; }
.space-y-3 > * + * { margin-top: 0.75rem; }
.space-y-2 > * + * { margin-top: 0.5rem; }

/* Header */
.header { display: flex; flex-direction: column; gap: 1rem; margin-bottom: 1.5rem; }
@media (min-width: 768px) { .header { flex-direction: row; align-items: center; justify-content: space-between; } }
.header-title { font-size: 1.5rem; font-weight: 900; letter-spacing: -0.025em; color: #ffffff; }
@media (min-width: 768px) { .header-title { font-size: 1.875rem; } }
.header-subtitle { color: var(--slate-400); font-size: 0.875rem; margin-top: 0.25rem; }
.header-status { display: flex; align-items: center; gap: 1rem; }
.status-badge { display: flex; align-items: center; gap: 0.5rem; padding: 0.375rem 0.75rem; border-radius: 9999px; font-size: 0.875rem; }
.status-badge.online { background-color: rgba(16, 185, 129, 0.2); color: var(--emerald-400); }
.status-badge.offline { background-color: rgba(244, 63, 94, 0.2); color: var(--rose-400); }
.status-dot { width: 0.5rem; height: 0.5rem; border-radius: 50%; }
.status-dot.online { background-color: var(--emerald-400); animation: pulse-glow 2s ease-in-out infinite; }
.status-dot.offline { background-color: var(--rose-400); }
.timestamp { color: var(--slate-500); font-size: 0.875rem; }

/* Navigation */
.nav-tabs { display: flex; gap: 0.5rem; margin-bottom: 1.5rem; overflow-x: auto; padding-bottom: 0.5rem; }
.nav-tab { padding: 0.5rem 1rem; border-radius: 0.5rem; font-size: 0.875rem; font-weight: 500; white-space: nowrap; border: none; cursor: pointer; transition: all 0.2s ease; }
.nav-tab.active { background-color: var(--cyan-500); color: #ffffff; }
.nav-tab:not(.active) { background-color: var(--slate-800); color: var(--slate-400); }
.nav-tab:not(.active):hover { background-color: var(--slate-700); }

/* Cards */
.card { background-color: rgba(15, 23, 42, 0.5); backdrop-filter: blur(12px); border: 1px solid var(--slate-800); border-radius: 1.5rem; padding: 1.5rem; }
.card-header { color: var(--slate-400); font-size: 0.875rem; font-weight: 600; margin-bottom: 1rem; display: flex; align-items: center; gap: 0.5rem; }
.card-header-icon { font-size: 1.25rem; }

/* Data Cards */
.data-card { border-radius: 1rem; padding: 1rem; backdrop-filter: blur(8px); transition: transform 0.2s ease; cursor: default; }
.data-card:hover { transform: scale(1.05); }
.data-card.cyan { background-color: rgba(6, 182, 212, 0.05); border: 1px solid rgba(6, 182, 212, 0.3); }
.data-card.amber { background-color: rgba(245, 158, 11, 0.05); border: 1px solid rgba(245, 158, 11, 0.3); }
.data-card.rose { background-color: rgba(244, 63, 94, 0.05); border: 1px solid rgba(244, 63, 94, 0.3); }
.data-card.emerald { background-color: rgba(16, 185, 129, 0.05); border: 1px solid rgba(16, 185, 129, 0.3); }
.data-card.violet { background-color: rgba(139, 92, 246, 0.05); border: 1px solid rgba(139, 92, 246, 0.3); }
.data-card.orange { background-color: rgba(249, 115, 22, 0.05); border: 1px solid rgba(249, 115, 22, 0.3); }
.data-card-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.5rem; }
.data-card-title { color: var(--slate-400); font-size: 0.875rem; font-weight: 500; }
.data-card-icon { font-size: 1.5rem; }
.data-card-value { display: flex; align-items: baseline; gap: 0.5rem; }
.data-card-number { font-size: 1.875rem; font-weight: 900; }
.data-card-number.cyan { color: var(--cyan-400); }
.data-card-number.amber { color: var(--amber-400); }
.data-card-number.rose { color: var(--rose-400); }
.data-card-number.emerald { color: var(--emerald-400); }
.data-card-number.violet { color: var(--violet-400); }
.data-card-number.orange { color: var(--orange-400); }
.data-card-unit { color: var(--slate-500); font-size: 0.875rem; }
.data-card-trend { font-size: 1rem; }
.data-card-trend.up { color: var(--emerald-400); }
.data-card-trend.down { color: var(--rose-400); }
.data-card-sub { margin-top: 0.5rem; padding-top: 0.5rem; border-top: 1px solid rgba(51, 65, 85, 0.5); }
.data-card-sub-label { color: var(--slate-500); font-size: 0.75rem; }
.data-card-sub-value { color: var(--slate-300); font-size: 0.75rem; font-weight: 500; }

/* Wind Gauge */
.wind-gauge-container { position: relative; width: 18rem; height: 18rem; margin: 0 auto; }
.wind-gauge-svg { width: 100%; height: 100%; }
.wind-gauge-center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.wind-gauge-speed { font-size: 3rem; font-weight: 900; color: #ffffff; }
.wind-gauge-unit { color: var(--cyan-400); font-size: 0.875rem; font-weight: 500; letter-spacing: 0.1em; }
.wind-gauge-direction { position: absolute; bottom: -0.5rem; left: 50%; transform: translateX(-50%); background-color: rgba(30, 41, 59, 0.8); backdrop-filter: blur(8px); padding: 0.5rem 1rem; border-radius: 9999px; border: 1px solid var(--slate-700); }
.wind-gauge-compass { font-size: 1.125rem; font-weight: 700; color: var(--amber-400); }
.wind-gauge-degrees { color: var(--slate-400); font-size: 0.875rem; margin-left: 0.5rem; }
.wind-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; margin-top: 1.5rem; }
.wind-stat { background-color: rgba(30, 41, 59, 0.5); border-radius: 0.75rem; padding: 0.75rem; text-align: center; }
.wind-stat-label { color: var(--slate-500); font-size: 0.75rem; margin-bottom: 0.25rem; }
.wind-stat-value { font-size: 1.5rem; font-weight: 900; }
.wind-stat-value.rose { color: var(--rose-400); }
.wind-stat-value.cyan { color: var(--cyan-400); }
.wind-stat-unit { color: var(--slate-600); font-size: 0.75rem; }

/* Wind Rose */
.wind-rose-container { position: relative; width: 12rem; height: 12rem; margin: 0 auto; }
.wind-rose-svg { width: 100%; height: 100%; }

/* Lightning Radar */
.lightning-radar-container { position: relative; width: 100%; max-width: 16rem; aspect-ratio: 1; margin: 0 auto; }
.lightning-radar-svg { width: 100%; height: 100%; }
.lightning-radar-rate { position: absolute; bottom: 0.5rem; right: 0.5rem; background-color: rgba(15, 23, 42, 0.8); padding: 0.25rem 0.5rem; border-radius: 0.25rem; font-size: 0.75rem; }
.lightning-radar-rate-value { color: var(--amber-400); font-weight: 700; }
.lightning-radar-rate-unit { color: var(--slate-400); }
.lightning-legend { display: flex; justify-content: center; gap: 1.5rem; margin-top: 1rem; font-size: 0.75rem; }
.lightning-legend-item { display: flex; align-items: center; gap: 0.5rem; }
.lightning-legend-dot { width: 0.75rem; height: 0.75rem; border-radius: 50%; }
.lightning-legend-dot.cg { background-color: var(--amber-400); }
.lightning-legend-dot.cc { background-color: var(--violet-400); }
.lightning-legend-label { color: var(--slate-400); }
.strikes-list { max-height: 12rem; overflow-y: auto; }
.strike-item { display: flex; align-items: center; justify-content: space-between; background-color: rgba(30, 41, 59, 0.5); border-radius: 0.5rem; padding: 0.5rem 0.75rem; }
.strike-info { display: flex; align-items: center; gap: 0.75rem; }
.strike-icon.cg { color: var(--amber-400); }
.strike-icon.cc { color: var(--violet-400); }
.strike-distance { color: var(--slate-300); font-size: 0.875rem; }
.strike-bearing { color: var(--slate-500); font-size: 0.75rem; }
.no-strikes { color: var(--slate-500); font-size: 0.875rem; text-align: center; padding: 1rem; }

/* Rain */
.rain-intensity-header { display: flex; justify-content: space-between; font-size: 0.75rem; color: var(--slate-400); margin-bottom: 0.5rem; }
.rain-intensity-track { height: 0.75rem; background-color: var(--slate-800); border-radius: 9999px; overflow: hidden; }
.rain-intensity-fill { height: 100%; border-radius: 9999px; transition: width 0.5s ease, background-color 0.3s ease; }
.rain-intensity-fill.light { background-color: var(--emerald-500); }
.rain-intensity-fill.moderate { background-color: var(--cyan-500); }
.rain-intensity-fill.heavy { background-color: var(--amber-500); }
.rain-intensity-fill.extreme { background-color: var(--rose-500); }
.rain-intensity-labels { display: flex; justify-content: space-between; font-size: 0.75rem; color: var(--slate-500); margin-top: 0.5rem; }
.rain-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-top: 1.5rem; }
.rain-stat { text-align: center; }
.rain-stat:nth-child(2) { border-left: 1px solid var(--slate-700); border-right: 1px solid var(--slate-700); }
.rain-stat-value { font-size: 1.5rem; font-weight: 900; color: var(--cyan-400); }
.rain-stat-label { color: var(--slate-500); font-size: 0.75rem; }
.rain-stat-text { font-size: 1.125rem; font-weight: 700; color: var(--slate-300); }

/* UV */
.uv-display { text-align: center; }
.uv-circle-container { position: relative; width: 6rem; height: 6rem; margin: 0 auto 0.75rem; }
.uv-circle-svg { width: 100%; height: 100%; }
.uv-category { font-size: 1.125rem; font-weight: 700; }
.uv-category.low { color: var(--emerald-400); }
.uv-category.moderate { color: var(--amber-400); }
.uv-category.high { color: var(--orange-400); }
.uv-category.very-high { color: var(--rose-400); }
.uv-category.extreme { color: var(--violet-400); }
.uv-advice { color: var(--slate-500); font-size: 0.75rem; margin-top: 0.25rem; }

/* Cyclone Warning */
.cyclone-warning { border-width: 2px; border-style: solid; border-radius: 0.75rem; padding: 1rem; margin-bottom: 1.5rem; animation: pulse-glow 2s ease-in-out infinite; display: none; }
.cyclone-warning.active { display: block; }
.cyclone-warning.cat-ts { background-color: rgba(6, 182, 212, 0.3); border-color: var(--cyan-400); }
.cyclone-warning.cat-1 { background-color: rgba(234, 179, 8, 0.3); border-color: #facc15; }
.cyclone-warning.cat-2 { background-color: rgba(245, 158, 11, 0.3); border-color: var(--amber-400); }
.cyclone-warning.cat-3 { background-color: rgba(249, 115, 22, 0.3); border-color: var(--orange-400); }
.cyclone-warning.cat-4 { background-color: rgba(244, 63, 94, 0.3); border-color: var(--rose-400); }
.cyclone-warning.cat-5 { background-color: rgba(139, 92, 246, 0.3); border-color: var(--violet-400); }
.cyclone-warning-content { display: flex; align-items: center; gap: 0.75rem; }
frames cyclone-spin { from { transform: rotate.cyclone-warning-icon { font-size: 2.5rem; animation: cyclone-spin 2s linear infinite; }
.cyclone-warning-title { color: #ffffff; font-weight: 900; font-size: 1.125rem; }
.cyclone-warning-details { color: rgba(255, 255, 255, 0.8); font-size: 0.875rem; }

/* Historical Chart */
.history-chart { background-color: rgba(15, 23, 42, 0.5); backdrop-filter: blur(12px); border: 1px solid var(--slate-800); border-radius: 1rem; padding: 1rem; }
.history-chart-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.75rem; }
.history-chart-title { color: var(--slate-400); font-size: 0.875rem; font-weight: 500; }
.history-chart-value { font-size: 0.875rem; font-weight: 700; }
.history-chart-value.cyan { color: var(--cyan-400); }
.history-chart-value.rose { color: var(--rose-400); }
.history-chart-value.violet { color: var(--violet-400); }
.history-chart-svg { width: 100%; height: 5rem; }
.history-chart-labels { display: flex; justify-content: space-between; font-size: 0.75rem; color: var(--slate-600); margin-top: 0.25rem; }

/* Station Status */
.sensor-status-item { display: flex; align-items: center; justify-content: space-between; }
.sensor-status-name { color: var(--slate-400); font-size: 0.875rem; }
.sensor-status-badge { font-size: 0.75rem; padding: 0.125rem 0.5rem; border-radius: 9999px; }
.sensor-status-badge.online { background-color: rgba(16, 185, 129, 0.2); color: var(--emerald-400); }
.sensor-status-badge.offline { background-color: rgba(244, 63, 94, 0.2); color: var(--rose-400); }

/* Footer */
.footer { margin-top: 2rem; text-align: center; color: var(--slate-600); font-size: 0.875rem; }
.footer p + p { margin-top: 0.25rem; }

/* Animations */
@keyframes radar-sweep { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
.radar-sweep { animation: radar-sweep 4s linear infinite; transform-origin: center; }
@keyframes pulse-glow { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }
.pulse-glow { animation: pulse-glow 2s ease-in-out infinite; }

/* Scrollbar */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--slate-800); }
::-webkit-scrollbar-thumb { background: var(--slate-600); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--slate-500); }

/* Utilities */
.text-center { text-align: center; }
.flex { display: flex; }
.items-center { align-items: center; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.gap-2 { gap: 0.5rem; }
.gap-3 { gap: 0.75rem; }
.gap-4 { gap: 1rem; }
.gap-6 { gap: 1.5rem; }
.mt-4 { margin-top: 1rem; }
.mt-6 { margin-top: 1.5rem; }
.mb-3 { margin-bottom: 0.75rem; }
.mx-auto { margin-left: auto; margin-right: auto; }
.w-full { width: 100%; }
.hidden { display: none; }