/*
 * Ski Resort Dashboard - Apple Premium Design
 * Glassmorphism system for vertical kiosk displays
 */

/* ===== Icon Font ===== */
/* Note: Intrawest custom font files are corrupted and cannot be used.
   Using emoji icons exclusively with optimized font stack for cross-browser compatibility */
:root {
    --icon-font-stack: -apple-system, 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', sans-serif;
}

/* ===== Design Tokens ===== */
:root {
    /* Glass System - Enhanced Depth Layers */
    --glass-bg: rgba(28, 28, 30, 0.70);
    --glass-bg-hover: rgba(28, 28, 30, 0.82);
    --glass-border: rgba(255, 255, 255, 0.1);
    --glass-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
    --glass-shadow-hover: 0 16px 48px 0 rgba(0, 0, 0, 0.5);
    
    /* Gradient Borders */
    --gradient-border-1: linear-gradient(135deg, rgba(255, 255, 255, 0.25), rgba(255, 255, 255, 0.05));
    --gradient-border-2: linear-gradient(135deg, rgba(100, 181, 246, 0.4), rgba(149, 117, 205, 0.4));
    --gradient-border-accent: linear-gradient(135deg, rgba(0, 122, 255, 0.4), rgba(52, 199, 89, 0.4));
    
    /* Blur Intensity Levels */
    --blur-base: blur(40px);
    --blur-hover: blur(60px);
    --blur-active: blur(80px);
    
    /* Colors — boosted secondary/tertiary for better readability */
    --text-primary: rgba(255, 255, 255, 0.97);
    --text-secondary: rgba(255, 255, 255, 0.7);
    --text-tertiary: rgba(255, 255, 255, 0.48);
    
    /* Status Colors — slightly brighter for punch */
    --status-open: #4dd0a8;
    --status-closed: #ff6b6b;
    --status-hold: #ffd93d;
    --status-scheduled: #6ea0f0;
    --status-weather: #e0aa60;
    
    /* Spacing - ONE unified scale */
    --space: 12px;
    --space-sm: 8px;
    --space-lg: 16px;
    
    /* Typography */
    --font-system: -apple-system, BlinkMacSystemFont, "SF Pro Display", sans-serif;
    --text-xs: 12px;
    --text-sm: 14px;
    --text-base: 16px;
    --text-lg: 24px;
    --text-xl: 32px;
    
    /* Border Radius - consistent */
    --radius: 16px;
    --radius-sm: 12px;
    --radius-xs: 8px;
}

/* ===== Base Styles ===== */
body {
    font-family: var(--font-system);
    background: radial-gradient(ellipse at 50% 20%, #0c1a2e 0%, #060d18 50%, #000 100%);
    color: var(--text-primary);
    margin: 0;
    padding: 0;
    font-size: var(--text-base);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

/* Ambient aurora glow behind the dashboard */
body::before {
    content: '';
    position: fixed;
    top: -20%;
    left: 50%;
    width: 140%;
    height: 50%;
    transform: translateX(-50%);
    background: radial-gradient(ellipse, rgba(80, 140, 240, 0.06) 0%, rgba(120, 70, 200, 0.03) 40%, transparent 70%);
    pointer-events: none;
    z-index: 0;
}

#dashboard {
    position: relative;
    z-index: 1;
    max-width: 960px;
    margin: 0 auto;
    padding: 0 16px;
}

/* ===== ANIMATIONS ===== */

/* Fade in animation for page load */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Pulsing animation for live indicators */
@keyframes pulse {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
    }
    50% {
        opacity: 0.8;
        transform: scale(1.05);
    }
}

/* Smooth fade-in on all glass cards */
.glass-card {
    animation: fadeIn 0.6s ease-out;
}

/* Stagger animation delays for sequential fade-in */
.glass-card:nth-child(1) { animation-delay: 0.1s; opacity: 0; animation-fill-mode: forwards; }
.glass-card:nth-child(2) { animation-delay: 0.2s; opacity: 0; animation-fill-mode: forwards; }
.glass-card:nth-child(3) { animation-delay: 0.3s; opacity: 0; animation-fill-mode: forwards; }
.glass-card:nth-child(4) { animation-delay: 0.4s; opacity: 0; animation-fill-mode: forwards; }
.glass-card:nth-child(5) { animation-delay: 0.5s; opacity: 0; animation-fill-mode: forwards; }

/* Navbar removed - unnecessary for kiosk dashboard */

h1, h2 {
    margin: 0 !important;
}

/* ===== UNIFIED GLASS CARD SYSTEM ===== */

/* Primary glass card - Enhanced depth layers with gradient borders */
.glass-card {
    background: var(--glass-bg);
    backdrop-filter: var(--blur-base);
    -webkit-backdrop-filter: var(--blur-base);
    position: relative;
    border-radius: var(--radius);
    box-shadow: var(--glass-shadow);
    padding: var(--space);
    margin-bottom: var(--space);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Gradient border effect using pseudo-element */
.glass-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: var(--radius);
    padding: 1px;
    background: var(--gradient-border-1);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
    opacity: 0.8;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Enhanced hover effect — subtle lift, no jarring scale */
.glass-card:hover {
    transform: translateY(-2px) !important;
    box-shadow: var(--glass-shadow-hover) !important;
    background: var(--glass-bg-hover) !important;
    backdrop-filter: var(--blur-hover) !important;
    -webkit-backdrop-filter: var(--blur-hover) !important;
}

.glass-card:hover::before {
    opacity: 1;
    background: var(--gradient-border-accent);
}

/* Active state with maximum blur intensity */
.glass-card:active,
.glass-card.active {
    backdrop-filter: var(--blur-active) !important;
    -webkit-backdrop-filter: var(--blur-active) !important;
}

/* Section card variant - for sections with headers */
.section-card {
    padding: var(--space);
}

/* Main section header - for major sections like Mountain Weather, Snow Report */
.main-section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--glass-border);
}

.main-section-title {
    font-size: var(--text-lg);
    font-weight: 700;
    color: var(--text-primary);
    text-transform: none;
    letter-spacing: -0.3px;
}

/* Subsection header - for mountain areas and subsections */
.section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.section-title {
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.section-badge {
    font-size: var(--text-xs);
    font-weight: 600;
    padding: 4px 8px;
    border-radius: var(--radius-xs);
    background: rgba(255, 255, 255, 0.1);
    color: var(--text-secondary);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Pulsing live indicator */
.section-badge.live-update {
    animation: pulse 2s ease-in-out infinite;
}

/* Live pulsing dot */
@keyframes pulseDot {
    0%, 100% {
        opacity: 1;
        box-shadow: 0 0 0 0 rgba(90, 200, 168, 0.6);
    }
    50% {
        opacity: 0.7;
        box-shadow: 0 0 0 3px rgba(90, 200, 168, 0);
    }
}

.live-dot {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--status-open);
    margin-right: 4px;
    animation: pulseDot 2s ease-in-out infinite;
}

.section-badge.fresh-powder {
    background: rgba(90, 200, 168, 0.12);
    color: var(--status-open);
}

/* ===== OVERVIEW HEADER CARD ===== */

.ov-card { padding-bottom: 10px !important; }

.ov-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    padding-bottom: 7px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.ov-logo {
    height: 24px;
    width: auto;
    flex-shrink: 0;
}

.ov-update {
    font-size: 10px;
    font-weight: 500;
    color: var(--text-tertiary);
    display: flex;
    align-items: center;
    gap: 3px;
}

.ov-update .live-dot {
    width: 5px;
    height: 5px;
}

.ov-refresh-btn {
    background: none;
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 4px;
    color: var(--text-tertiary);
    font-size: 12px;
    cursor: pointer;
    padding: 1px 4px;
    line-height: 1;
    transition: all 0.2s ease;
}
.ov-refresh-btn:hover { color: var(--text-primary); border-color: rgba(255,255,255,0.3); }
.ov-refresh-btn.refreshing {
    animation: spin 0.8s linear infinite;
    pointer-events: none;
    opacity: 0.5;
}
@keyframes spin { to { transform: rotate(360deg); } }

.ov-header .ov-ops {
    margin-left: auto;
    margin-top: 0;
}

/* ===== OVERVIEW STATS STRIP ===== */

.ov-strip {
    display: flex;
    gap: 3px;
}

.ov-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1 1 0;
    min-width: 0;
    padding: 6px 2px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 5px;
    text-align: center;
}

.ov-val {
    font-size: 15px;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.1;
    white-space: nowrap;
}

.ov-of {
    font-weight: 500;
    color: var(--text-tertiary);
    font-size: 11px;
}

.ov-label {
    font-size: 10px;
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-top: 2px;
}

.ov-ops {
    display: flex;
    gap: 4px;
    margin-top: 6px;
    flex-wrap: wrap;
}

/* ===== TRAIL DIFFICULTY BREAKDOWN ===== */

.td-strip {
    display: flex;
    justify-content: center;
    gap: 12px;
    padding: 5px 0 2px;
    margin-top: 4px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.td-item {
    display: flex;
    align-items: center;
    gap: 4px;
}

.td-icon {
    font-size: 11px;
}

.td-icon.td-green { color: #34c759; }
.td-icon.td-blue { color: #007aff; }
.td-icon.td-black { color: #e0e0e0; }
.td-icon.td-dblack { color: #e0e0e0; }

.td-count {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-primary);
}

.td-of {
    font-weight: 500;
    color: var(--text-tertiary);
    font-size: 10px;
}

.td-val-zero {
    color: var(--text-tertiary);
}

.ops-tag {
    font-size: 10px;
    font-weight: 600;
    padding: 3px 8px;
    border-radius: 5px;
    display: inline-flex;
    align-items: center;
    gap: 3px;
}

.ops-tag.grooming-active {
    background: rgba(90, 200, 168, 0.10);
    color: var(--status-open);
    border: 1px solid rgba(90, 200, 168, 0.2);
}

.ops-tag.grooming-inactive {
    background: rgba(224, 112, 112, 0.10);
    color: var(--status-closed);
    border: 1px solid rgba(224, 112, 112, 0.2);
}

.ops-tag.snowmaking-active {
    background: rgba(100, 160, 255, 0.10);
    color: var(--status-scheduled);
    border: 1px solid rgba(100, 160, 255, 0.2);
}

/* Snow / lift area section labels */
.snow-section-label {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    color: var(--text-primary);
    text-transform: uppercase;
    letter-spacing: 0.8px;
    margin-top: 14px;
    margin-bottom: 6px;
    padding: 4px 10px;
    border-radius: 5px;
    background: rgba(255, 255, 255, 0.06);
    border-left: 2px solid rgba(100, 180, 255, 0.3);
}

/* ===== UNIFIED GRID SYSTEM ===== */

/* Card grid - 4 columns for overview metrics, responsive width */
.card-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-sm);
}

/* Compact grid - 5 columns for snow metrics */
.card-grid.compact {
    grid-template-columns: repeat(5, 1fr);
}

/* Card list - vertical stack */
.card-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

/* Legacy weather grid (kept for fallback) */
.weather-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-sm); }

/* ===== METRIC CARDS ===== */

.metric-card {
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: var(--blur-base);
    -webkit-backdrop-filter: var(--blur-base);
    position: relative;
    border-radius: var(--radius-sm);
    padding: 8px 3px;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 3px;
    min-height: 65px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Gradient border for metric cards */
.metric-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: var(--radius-sm);
    padding: 1px;
    background: var(--gradient-border-1);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
    opacity: 0.6;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.metric-card:hover {
    transform: translateY(-2px) scale(1.02) !important;
    background: rgba(255, 255, 255, 0.1) !important;
    backdrop-filter: var(--blur-hover) !important;
    -webkit-backdrop-filter: var(--blur-hover) !important;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.4) !important;
}

.metric-card:hover::before {
    opacity: 1;
    background: var(--gradient-border-2);
}

.metric-card:active {
    backdrop-filter: var(--blur-active) !important;
    -webkit-backdrop-filter: var(--blur-active) !important;
}

.metric-value {
    font-size: 18px;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1;
}

.metric-value.value-zero {
    color: var(--status-closed);
}

.metric-value.value-positive {
    color: var(--status-open);
}

.metric-label {
    font-size: var(--text-sm);
    color: var(--text-secondary);
    font-weight: 600;
    letter-spacing: 0.5px;
}

.metric-secondary {
    font-size: var(--text-base);
    font-weight: 600;
    color: var(--text-secondary);
    margin-left: 4px;
}

.metric-card.highlight .metric-value {
    color: var(--status-open);
}

/* Snow visual indicators */
.snow-visual {
    font-size: 14px;
    line-height: 1;
    margin: 0;
}

/* Snow intensity classes - light blue to purple gradient */
.metric-card.snow-trace {
    border-color: rgba(179, 229, 252, 0.4);
    background: rgba(179, 229, 252, 0.05);
}

.metric-card.snow-light {
    border-color: rgba(100, 181, 246, 0.6);
    background: rgba(100, 181, 246, 0.08);
}

.metric-card.snow-moderate {
    border-color: rgba(66, 165, 245, 0.8);
    background: rgba(66, 165, 245, 0.12);
}

.metric-card.snow-heavy {
    border-color: rgba(126, 87, 194, 0.9);
    background: rgba(126, 87, 194, 0.15);
}

.metric-card.snow-epic {
    border-color: rgba(149, 117, 205, 1);
    background: rgba(149, 117, 205, 0.2);
}

.metric-card.snow-epic .metric-value {
    color: #9575cd;
}

/* ===== COMPACT WEATHER TABLE ===== */

.wx-table {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.wx-row {
    display: grid;
    grid-template-columns: 24px minmax(100px, 1.2fr) 42px minmax(80px, 1fr) minmax(90px, 1.1fr);
    align-items: center;
    gap: 4px;
    padding: 5px 10px;
    border-radius: 6px;
    transition: background 0.2s ease, transform 0.15s ease;
}

.wx-row:hover {
    background: rgba(255, 255, 255, 0.08) !important;
    transform: translateX(2px);
}

.wx-col { display: flex; align-items: center; min-width: 0; }
.wx-col-icon { justify-content: center; }
.wx-col-icon .weather-fa-icon { font-size: 18px; }
.wx-col-name {
    font-size: 11px; font-weight: 600; color: var(--text-primary);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.wx-elev { font-size: 10px; color: var(--text-tertiary); margin-left: 4px; font-weight: 400; }
.wx-col-temp { font-size: 15px; font-weight: 700; justify-content: flex-end; }
.wx-col-cond {
    font-size: 10px; color: var(--text-secondary); padding-left: 4px;
    display: flex; flex-direction: column; gap: 0; line-height: 1.2;
}
.wx-chill { font-size: 9px; color: #64d2ff; font-weight: 500; }
.wx-col-wind { font-size: 10px; font-weight: 500; justify-content: flex-end; white-space: nowrap; }
.wx-gust { font-size: 9px; color: var(--text-tertiary); }

/* Temperature color classes */
.temp-freezing { color: #00d4ff; }
.temp-cold { color: #64b5f6; }
.temp-cool { color: #90caf9; }
.temp-mild { color: var(--text-primary); }
.temp-warm { color: #ffb74d; }
.temp-hot { color: #ff6b6b; }

/* Wind intensity classes */
.wind-calm { color: var(--text-tertiary); }
.wind-light { color: var(--text-secondary); }
.wind-moderate { color: #ffcc00; }
.wind-strong { color: #ff9500; }
.wind-extreme { color: #ff3b30; }

.card-meta { font-size: var(--text-sm); color: var(--text-secondary); }

/* ===== INLINE SNOW REPORT (inside Mountain Weather card) ===== */

.sr-header {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.4px;
    padding: 0 8px;
    margin-bottom: 4px;
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.sr-powder {
    font-size: 9px;
    font-weight: 700;
    color: #b3e5fc;
    text-transform: none;
}

.sr-cond-tag {
    font-size: 9px;
    font-weight: 500;
    color: var(--text-tertiary);
    text-transform: none;
    letter-spacing: 0;
}

.sr-cond-tag i { font-size: 10px; margin-right: 2px; }

.sr-layout {
    display: flex;
    gap: 3px;
    padding: 0 8px;
    align-items: stretch;
}

.sr-rows {
    flex: 1;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 2px 4px;
    align-items: center;
    min-width: 0;
}

.sr-row-block { display: contents; }

.sr-side-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-secondary);
    white-space: nowrap;
}

.sr-elev { font-weight: 400; color: var(--text-tertiary); font-size: 10px; margin-left: 3px; }

.sr-cells {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2px;
}

.sr-season-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 4px 8px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 5px;
    min-width: 52px;
}

.sr-cell {
    text-align: center;
    padding: 3px 2px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 4px;
}

.sr-label {
    display: block;
    font-size: 9px;
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.2px;
    line-height: 1;
    margin-bottom: 1px;
}

.sr-val {
    display: block;
    font-size: 14px;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1;
}

.sr-val-snow { color: #b3e5fc; }

/* ===== LIFT GRID (Row-based layout) ===== */

.lift-list {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.lift-row {
    display: grid;
    grid-template-columns: 30px minmax(100px, 2fr) 40px minmax(50px, 1fr) minmax(70px, 1fr);
    align-items: center;
    gap: 8px;
    padding: 5px 10px;
    border-radius: 6px;
    transition: background 0.2s ease, transform 0.15s ease;
}

.lift-row.status-closed { opacity: 0.45; }
.lift-row.status-hold { border-left: 2px solid var(--status-hold); }
.lift-row.status-scheduled { border-left: 2px solid var(--status-scheduled); }
.lift-row.status-weather { border-left: 2px solid var(--status-weather); }

.lift-col {
    display: flex;
    align-items: center;
    min-width: 0;
}

.lift-col-icon { justify-content: center; }

.lift-icon-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.lift-fa-icon {
    font-size: 18px;
    color: var(--text-primary);
    line-height: 1;
}

.lift-dot {
    position: absolute;
    top: -2px;
    right: -4px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    border: 1.5px solid rgba(28, 28, 30, 0.9);
}
.lift-dot.dot-open { background: var(--status-open); animation: dotPulse 2s ease-in-out infinite; }
@keyframes dotPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(90, 200, 168, 0.5); }
    50% { box-shadow: 0 0 0 3px rgba(90, 200, 168, 0); }
}
.lift-dot.dot-closed { background: var(--status-closed); }
.lift-dot.dot-hold { background: var(--status-hold); }
.lift-dot.dot-scheduled { background: var(--status-scheduled); }
.lift-dot.dot-weather { background: var(--status-weather); }
.lift-dot.dot-default { background: var(--text-tertiary); }

.lift-col-name {
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    overflow: hidden;
}

.lift-name-text {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

.lift-loc {
    font-size: 10px;
    font-weight: 500;
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.lift-col-diff {
    justify-content: center;
    gap: 2px;
}

.diff-icon { font-size: 13px; line-height: 1; }
.diff-icon.diff-green { color: #34c759; }
.diff-icon.diff-blue { color: #007aff; }
.diff-icon.diff-black { color: #fff; }
.diff-icon.diff-doubleblack { color: #fff; }

.lift-col-wait { justify-content: center; }

.wait-badge {
    font-size: 11px;
    font-weight: 600;
    padding: 3px 8px;
    border-radius: 4px;
    text-align: center;
    white-space: nowrap;
}

.wait-badge.wait-time-none { color: var(--text-tertiary); }
.wait-badge.wait-time-closed { color: var(--status-closed); opacity: 0.5; }
.wait-badge.wait-time-warn {
    background: rgba(255, 217, 61, 0.15);
    color: var(--status-hold);
    animation: pulseWarn 2s ease-in-out infinite;
}
.wait-badge.wait-time-0-2 { background: rgba(90, 200, 168, 0.12); color: var(--status-open); }
.wait-badge.wait-time-3-5 { background: rgba(90, 200, 168, 0.08); color: var(--status-open); }
.wait-badge.wait-time-5-10 { background: rgba(255, 204, 0, 0.15); color: var(--status-hold); }
.wait-badge.wait-time-10-15,
.wait-badge.wait-time-15-20 { background: rgba(230, 170, 80, 0.12); color: var(--status-weather); }
.wait-badge.wait-time-20-25,
.wait-badge.wait-time-25-30,
.wait-badge.wait-time-30-plus { background: rgba(224, 112, 112, 0.12); color: var(--status-closed); }

.lift-col-hours {
    flex-direction: column;
    align-items: flex-end;
    gap: 1px;
    white-space: nowrap;
}

.lift-hours-text {
    font-size: 11px;
    color: var(--text-secondary);
    font-weight: 500;
}

.lift-status-tag {
    font-size: 9px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    color: var(--text-tertiary);
}
.lift-status-tag.status-open { color: var(--status-open); }
.lift-status-tag.status-closed { color: var(--status-closed); }
.lift-status-tag.status-hold { color: var(--status-hold); animation: pulseWarn 2s ease-in-out infinite; }
.lift-status-tag.status-scheduled { color: var(--status-scheduled); animation: pulseWarn 2.5s ease-in-out infinite; }
.lift-status-tag.status-weather { color: var(--status-weather); animation: pulseWarn 2s ease-in-out infinite; }

@keyframes pulseWarn {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}

@media (max-width: 520px) {
    .lift-row {
        grid-template-columns: 26px 1fr 32px 42px;
        gap: 4px;
        padding: 4px 6px;
    }
    .lift-col-hours { display: none; }
    .lift-name-text { font-size: 10px; }
    .lift-fa-icon { font-size: 16px; }
}

/* ===== FORECAST BOXES (horizontal, inside Mountain Weather card) ===== */

.wx-divider {
    height: 1px;
    background: rgba(255, 255, 255, 0.06);
    margin: 5px 0 4px;
}

.fc-strip {
    display: flex;
    gap: 2px;
}

.fc-box {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 6px 4px 7px;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.03);
    gap: 2px;
    transition: background 0.2s ease, transform 0.2s ease;
}

.fc-box:hover {
    background: rgba(255, 255, 255, 0.08);
    transform: translateY(-1px);
}

.fc-day {
    font-size: 9px;
    font-weight: 600;
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.3px;
    line-height: 1;
}

.fc-icon { line-height: 1; }
.fc-icon .weather-fa-icon { font-size: 18px; }
.fc-icon .fak { font-size: 18px; }

.fc-temp {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-primary);
    line-height: 1;
}

.fc-lo {
    font-weight: 500;
    color: var(--text-tertiary);
}

.fc-snow {
    font-size: 10px;
    font-weight: 700;
    color: #b3e5fc;
    line-height: 1;
}

/* ===== RADIAL PROGRESS RINGS ===== */

.radial-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
}

.radial-container {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: var(--space-sm) 0;
}

.radial-progress {
    filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.3));
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.radial-card:hover .radial-progress {
    transform: scale(1.1);
    filter: drop-shadow(0 6px 20px rgba(0, 0, 0, 0.5));
}

.progress-ring {
    transition: stroke-dashoffset 1s cubic-bezier(0.4, 0, 0.2, 1);
}

.progress-text {
    font-size: 12px;
    font-weight: 700;
    fill: var(--text-primary);
    font-family: var(--font-system);
}

.radial-subtext {
    font-size: 11px;
    color: var(--text-secondary);
    text-align: center;
    font-weight: 500;
    margin-top: -4px;
}

.radial-subtext.value-zero {
    color: var(--status-closed);
}

.radial-subtext.value-positive {
    color: var(--status-open);
}

/* Metric visual icons */
.metric-visual {
    display: block;
    margin: 0 auto;
}

.metric-icon {
    font-family: var(--icon-font-stack);
}

/* ===== TEMPERATURE GRADIENT BAR ===== */

.temp-gradient-widget {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: var(--space) 0;
    margin-bottom: var(--space);
}

.temp-gradient-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: var(--space);
}

.temp-gradient-container {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--space-lg);
}

.temp-gradient-svg {
    filter: drop-shadow(0 4px 16px rgba(0, 0, 0, 0.4));
}

.temp-markers {
    position: relative;
    height: 200px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.temp-marker {
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    transform: translateY(-50%);
}

.temp-value {
    font-size: 20px;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1;
}

.temp-label {
    font-size: 10px;
    font-weight: 500;
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Temperature profile card */
.temp-profile-card {
    display: flex;
    flex-direction: column;
}

.temp-gradient-content {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space);
    padding: var(--space-sm) 0;
}

/* Compact temperature markers */
.temp-markers-compact {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 160px;
}

.temp-marker-compact {
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    left: 0;
}

.temp-value-compact {
    font-size: 16px;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1;
}

.temp-label-compact {
    font-size: 10px;
    font-weight: 400;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Forecast snow intensity highlights */
.fc-box.snow-trace { background: rgba(179, 229, 252, 0.05); }
.fc-box.snow-light { background: rgba(100, 181, 246, 0.08); }
.fc-box.snow-moderate { background: rgba(66, 165, 245, 0.10); }
.fc-box.snow-heavy { background: rgba(126, 87, 194, 0.10); }
.fc-box.snow-epic { background: rgba(149, 117, 205, 0.15); }
.fc-box.snow-epic .fc-snow { color: #9575cd; }

/* ===== MAIN HEADER (Resort Name) ===== */

.header-container {
    padding: var(--space-lg) 0 !important;
    margin-bottom: var(--space-lg) !important;
    border-bottom: 2px solid var(--glass-border) !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: baseline !important;
}

.header-container .title {
    font-size: 32px !important;
    font-weight: 700 !important;
    color: var(--text-primary) !important;
    letter-spacing: -0.5px !important;
    line-height: 1.1 !important;
    margin: 0 !important;
}

.header-container .update-time {
    font-size: var(--text-xs);
    color: var(--text-tertiary);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Navbar removed - unnecessary for ski resort dashboard */

/* ===== SNOW LOADING ANIMATION ===== */

/* Snow loader styles are self-contained in snow_loader.py */

/* ===== FONT AWESOME WEATHER ICONS ===== */

.weather-fa-icon {
    font-size: 28px;
    line-height: 1;
    display: inline-block;
}

.weather-fa-icon.sun-icon { color: #ffcc00; }
.weather-fa-icon.partlycloudy-icon { color: #a0c4ff; }
.weather-fa-icon.cloud-icon { color: #8e99a4; }
.weather-fa-icon.snow-icon { color: #b3e5fc; }
.weather-fa-icon.rain-icon { color: #64b5f6; }
.weather-fa-icon.storm-icon { color: #ffb74d; }
.weather-fa-icon.fog-icon { color: #78909c; }
.weather-fa-icon.wind-icon { color: #90a4ae; }

/* Weather FA icon sizes (stations + forecast rows share the same column) */
.wx-col-icon .weather-fa-icon,
.wx-col-icon .fak { font-size: 18px; }

/* Value color helpers (overview, snow report) */
.value-zero { color: var(--status-closed) !important; }
.value-positive { color: var(--status-open) !important; }

/* ===== ALTERNATING LIFT ROW STRIPES ===== */

.lift-row:nth-child(even) {
    background: rgba(255, 255, 255, 0.015);
}

.lift-row:nth-child(odd) {
    background: rgba(255, 255, 255, 0.04);
}

.lift-row:hover {
    background: rgba(255, 255, 255, 0.08) !important;
}

/* Subtle green tint on open lifts */
.lift-row.status-open {
    border-left: 2px solid rgba(77, 208, 168, 0.35);
}

/* ===== WEATHER ROW POLISH ===== */

.wx-row:nth-child(even) {
    background: rgba(255, 255, 255, 0.015);
}

.wx-row:nth-child(odd) {
    background: rgba(255, 255, 255, 0.04);
}

/* ===== FORECAST TODAY HIGHLIGHT ===== */

.fc-box:first-child {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.fc-box:first-child .fc-day {
    color: var(--text-primary);
    font-weight: 700;
}

/* ===== DATA REFRESH ANIMATION ===== */

@keyframes dataRefresh {
    0% { opacity: 0.6; }
    100% { opacity: 1; }
}

.glass-card.refreshing {
    animation: dataRefresh 0.5s ease-out forwards;
}

/* ===== SECTION GRADIENT DIVIDERS ===== */

#sec-weather,
#sec-lifts,
#sec-trail-map {
    position: relative;
}

#sec-weather::before,
#sec-lifts::before,
#sec-trail-map::before {
    content: '';
    display: block;
    height: 1px;
    margin: 4px 20px 8px;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(255, 255, 255, 0.06) 20%,
        rgba(255, 255, 255, 0.06) 80%,
        transparent 100%);
}


/* ===== SMOOTH VALUE TRANSITIONS ===== */

.metric-value, .ov-val, .sr-val, .wx-col-temp, .lift-name-text {
    transition: color 0.3s ease, opacity 0.3s ease;
}

/* ===== TRAIL MAP OVERLAY ===== */

.map-tabs {
    display: flex;
    gap: 3px;
    padding: 0 4px 8px;
    flex-wrap: wrap;
}
.map-tab {
    flex: 1 1 auto;
    min-width: 0;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 6px;
    color: rgba(255,255,255,0.5);
    font-size: 10px;
    font-weight: 600;
    padding: 6px 4px;
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: center;
    white-space: nowrap;
}
.map-tab:hover { background: rgba(255,255,255,0.07); }
.map-tab.active {
    background: rgba(255,255,255,0.10);
    border-color: rgba(255,255,255,0.18);
    color: #fff;
}
.map-tab-count {
    font-weight: 400;
    opacity: 0.6;
    font-size: 10px;
}

.map-stage {
    display: grid;
    border-radius: 8px;
    overflow: hidden;
}
.map-container {
    position: relative;
    grid-area: 1 / 1;
    width: 100%;
    max-height: 60vh;
    border-radius: 8px;
    overflow: hidden;
    background: #0a0f18;
    cursor: grab;
    touch-action: none;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.6s ease;
    z-index: 0;
    content-visibility: auto;
    contain-intrinsic-size: 100% 400px;
}
.map-container.map-visible {
    opacity: 1;
    pointer-events: auto;
    z-index: 1;
    content-visibility: visible;
}
.map-container.is-dragging { cursor: grabbing; }

.map-zoom-inner {
    position: relative;
    width: 100%;
    transform-origin: 0 0;
}

.map-svg-object {
    display: block;
    width: 100%;
    height: auto;
    border: none;
}


/* Zoom controls */
.map-zoom-controls {
    position: absolute;
    top: 8px;
    right: 8px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    z-index: 20;
}
.map-zoom-btn {
    width: 32px;
    height: 32px;
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 6px;
    background: rgba(0,0,0,0.6);
    backdrop-filter: blur(8px);
    color: #fff;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s;
    padding: 0;
}
.map-zoom-btn:hover { background: rgba(255,255,255,0.15); }
.map-zoom-reset { font-size: 15px; }
.map-fullscreen-btn { font-size: 16px; }

/* Fullscreen mode */
#trail-map-card:fullscreen,
#trail-map-card:-webkit-full-screen {
    background: #000;
    padding: var(--space);
    display: flex;
    flex-direction: column;
}
#trail-map-card:fullscreen .map-stage,
#trail-map-card:-webkit-full-screen .map-stage {
    flex: 1;
    min-height: 0;
}
#trail-map-card:fullscreen .map-container,
#trail-map-card:-webkit-full-screen .map-container {
    max-height: none;
    height: 100%;
}
#trail-map-card:fullscreen .map-zoom-inner,
#trail-map-card:-webkit-full-screen .map-zoom-inner {
    height: 100%;
}
#trail-map-card:fullscreen .map-svg-object,
#trail-map-card:-webkit-full-screen .map-svg-object {
    height: 100%;
    object-fit: contain;
}
#trail-map-card:fullscreen .map-fullscreen-btn::after,
#trail-map-card:-webkit-full-screen .map-fullscreen-btn::after {
    content: '';
}

/* Layer toggles */
.map-layer-toggles {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 8px;
    padding: 0 6px 8px;
    align-items: center;
}
.map-layer-toggle {
    display: flex;
    align-items: center;
    gap: 4px;
    cursor: pointer;
    user-select: none;
    font-size: 10px;
    color: rgba(255,255,255,0.45);
    transition: color 0.15s;
}
.map-layer-toggle:hover { color: rgba(255,255,255,0.7); }
.map-layer-toggle input[type="checkbox"] { display: none; }
.map-layer-toggle input:checked ~ .toggle-label { color: rgba(255,255,255,0.85); }
.toggle-icon {
    flex-shrink: 0;
    opacity: 0.4;
    transition: opacity 0.15s;
    display: flex;
    align-items: center;
    font-size: 12px;
}
.map-layer-toggle input:checked ~ .toggle-icon { opacity: 1; }
.toggle-label { font-weight: 500; }


.map-legend {
    display: flex;
    justify-content: center;
    gap: 16px;
    padding: 8px 0 4px;
    font-size: 10px;
    color: rgba(255,255,255,0.5);
}
.map-legend-item { display: flex; align-items: center; gap: 5px; }
.legend-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
}
.legend-open   { background: #22c55e; box-shadow: 0 0 4px #22c55e; }
.legend-closed { background: #ef4444; box-shadow: 0 0 4px #ef4444; }
.legend-hold   { background: #eab308; box-shadow: 0 0 4px #eab308; }


/* ===== MAP INFO BAR ===== */
.map-info-bar {
    margin-left: auto;
    flex-shrink: 0;
}
.map-info-content {
    display: flex;
    align-items: center;
    gap: 6px;
    background: rgba(20, 20, 30, 0.85);
    backdrop-filter: blur(10px);
    flex-wrap: nowrap;
    font-size: 12px;
    white-space: nowrap;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 8px;
    padding: 6px 12px;
    color: #fff;
    font-family: 'Inter', sans-serif;
}
.map-info-close {
    background: none;
    border: none;
    color: rgba(255,255,255,0.4);
    font-size: 16px;
    cursor: pointer;
    line-height: 1;
    padding: 0 2px;
    order: 99;
}
.map-info-close:hover { color: #fff; }
.map-info-name {
    font-weight: 700;
    font-size: 12px;
    white-space: nowrap;
}
.map-info-status {
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}
.map-info-detail {
    color: rgba(255,255,255,0.65);
    display: flex;
    align-items: center;
    gap: 4px;
}
.map-info-detail::before {
    content: '·';
    color: rgba(255,255,255,0.3);
}
.map-info-detail {
    white-space: nowrap;
}
.map-info-wait {
    color: #eab308;
    font-weight: 600;
}
.groom-icon {
    vertical-align: middle;
    opacity: 0.7;
}

/* ===== MOUNTAIN CAROUSEL ===== */

/* Per-mountain titles are hidden by default (single-page mode) */
.main-section-title[data-mountain],
.section-badge[data-mountain] {
    display: none;
}

/* When carousel is active, hide the generic titles and show mountain-specific ones */
#dashboard[data-mountain-view] .carousel-off-title {
    display: none !important;
}
#dashboard[data-mountain-view] .main-section-title[data-mountain],
#dashboard[data-mountain-view] .section-badge[data-mountain] {
    display: inline;
}

/* Hide elements belonging to the inactive mountain */
#dashboard[data-mountain-view="palisades"] [data-mountain="alpine"] {
    display: none !important;
}
#dashboard[data-mountain-view="alpine"] [data-mountain="palisades"] {
    display: none !important;
}

/* Maps exempt from display:none — use opacity so SVGs always load */
#dashboard[data-mountain-view] .map-stage .map-container {
    display: block !important;
}
/* Hide interactive controls in carousel/kiosk mode */
#dashboard[data-mountain-view] .map-tab,
#dashboard[data-mountain-view] .map-zoom-controls,
#dashboard[data-mountain-view] .map-layer-toggles {
    display: none !important;
}

/* Crossfade transition */
#dashboard {
    transition: opacity 0.4s ease;
}
#dashboard.carousel-fading {
    opacity: 0;
}


/* Carousel page indicator */
.carousel-indicator {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    padding: 10px 0 6px;
}
.carousel-indicator .ci-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(255,255,255,0.2);
    transition: background 0.3s, transform 0.3s;
}
.carousel-indicator .ci-dot.active {
    background: rgba(255,255,255,0.7);
    transform: scale(1.3);
}
.carousel-indicator .ci-label {
    font-size: 10px;
    color: rgba(255,255,255,0.4);
    letter-spacing: 1px;
    text-transform: uppercase;
    font-weight: 600;
}

/* ===== RESPONSIVE: SMALL DISPLAYS ===== */
/* Hide map when either viewport dimension is 640px or less (covers rotated/portrait screens) */

@media (max-width: 640px), (max-height: 640px) {
    #sec-trail-map { display: none !important; }
    #dashboard { max-width: none; }

    /* Hide cursor for kiosk/touch displays */
    *, *::before, *::after { cursor: none !important; }

    /* Trim low-value columns so remaining content scales bigger */
    .lift-col-diff { display: none; }
    .lift-col-hours { display: none; }
    .lift-loc { display: none; }
    .lift-row {
        grid-template-columns: 26px 1fr 52px;
        gap: 4px;
        padding: 5px 8px;
    }

    /* Bump base font sizes for readability on small kiosk displays.
       Auto-scaler zooms to ~0.70, so sizes here ÷ 0.70 = visual size. */
    .lift-name-text { font-size: 24px; font-weight: 600; }
    .wait-badge { font-size: 22px; padding: 6px 14px; }
    .lift-fa-icon { font-size: 32px; }
    .lift-dot { width: 10px; height: 10px; }
    .lift-status-tag { font-size: 13px; }
    .snow-section-label { font-size: 22px; font-weight: 700; }
    .main-section-title { font-size: 22px; }
    .section-badge { font-size: 15px; }

    /* Compact weather rows */
    .wx-row { grid-template-columns: 26px 1fr 48px 1fr; }
    .wx-col-cond { display: none; }
    .wx-col-wind { font-size: 13px; }

    /* Compact snow report */
    .sr-cells { grid-template-columns: repeat(3, 1fr); }

    /* Compact overview header */
    .ov-stat { min-width: 48px; }
    .ov-val { font-size: 28px; font-weight: 700; }
    .ov-label { font-size: 14px; }
    .ov-of { font-size: 18px; }

    /* Weather text */
    .wx-col-name { font-size: 20px; }
    .wx-col-temp { font-size: 22px; font-weight: 700; }
    .weather-fa-icon { font-size: 30px; }

    /* Reduce section spacing */
    .main-section { margin-bottom: 6px; padding: 6px; }
    .main-section-header { padding: 4px 8px; }
}

/* ===== RESPONSIVE: NARROW SCREENS ===== */

@media (max-width: 520px) {
    .wx-row { grid-template-columns: 22px 1fr 40px 1fr; }
    .wx-col-cond { display: none; }
    .wx-col-wind { font-size: 9px; }
    .sr-cells { grid-template-columns: repeat(3, 1fr); }
    .ov-stat { min-width: 48px; }
    .ov-val { font-size: 14px; }
}