/* --- assets/css/styles.css --- */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: var(--ui-font);
    width: 100%;
    overflow: hidden;
}

body.nose-body {
    background: linear-gradient(180deg, #f6f9ff 0%, #eef3fb 60%, #fdfdff 100%);
    min-height: 100vh;
    height: auto;
    overflow-x: hidden;
    overflow-y: auto;
}

/* --- assets/fonts/fonts.css --- */
/*
 * Modern Font Configuration
 * Optimized for performance with system fonts and modern fallbacks
 * Prioritizes readability and cross-platform consistency
 */

/* Define primary UI font stack with modern system fonts */
:root {
  --ui-font: -apple-system, BlinkMacSystemFont, 'Inter', 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-bold: 700;
  --line-height-base: 1.5;
}

/* Apply base typography to the document body */
body {
  font-family: var(--ui-font);
  font-weight: var(--font-weight-normal);
  line-height: var(--line-height-base);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}


/* --- assets/css/components/scrollbar/custom-scrollbar.css --- */
/**
 * Custom Scrollbar — global styling
 * Thin, glowing track with animated thumb
 * Supports light, dark, and themed modes
 */

:root {
    --scrollbar-size: 8px;
    --scrollbar-track: rgba(0, 0, 0, 0.04);
    --scrollbar-thumb: rgba(100, 116, 139, 0.35);
    --scrollbar-thumb-hover: rgba(100, 116, 139, 0.55);
    --scrollbar-thumb-active: rgba(100, 116, 139, 0.7);
    --scrollbar-radius: 100px;
    --scrollbar-glow: transparent;
}

html[data-theme="dark"] {
    --scrollbar-track: rgba(255, 255, 255, 0.03);
    --scrollbar-thumb: rgba(99, 211, 150, 0.22);
    --scrollbar-thumb-hover: rgba(99, 211, 150, 0.40);
    --scrollbar-thumb-active: rgba(99, 211, 150, 0.55);
    --scrollbar-glow: rgba(52, 211, 153, 0.12);
}

/* Firefox */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
}

/* Webkit / Blink */
::-webkit-scrollbar {
    width: var(--scrollbar-size);
    height: var(--scrollbar-size);
}

::-webkit-scrollbar-track {
    background: var(--scrollbar-track);
    border-radius: var(--scrollbar-radius);
}

::-webkit-scrollbar-thumb {
    background: var(--scrollbar-thumb);
    border-radius: var(--scrollbar-radius);
    border: 2px solid transparent;
    background-clip: content-box;
    transition: background 0.25s ease, box-shadow 0.25s ease;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--scrollbar-thumb-hover);
    border: 1px solid transparent;
    background-clip: content-box;
    box-shadow: 0 0 6px var(--scrollbar-glow);
}

::-webkit-scrollbar-thumb:active {
    background: var(--scrollbar-thumb-active);
    border: 1px solid transparent;
    background-clip: content-box;
    box-shadow: 0 0 10px var(--scrollbar-glow);
}

::-webkit-scrollbar-corner {
    background: transparent;
}

/* Thin variant for dropdowns, modals, smaller panels */
.scrollbar-thin::-webkit-scrollbar {
    width: 5px;
    height: 5px;
}

.scrollbar-thin {
    scrollbar-width: thin;
}

/* Hidden scrollbar but still scrollable */
.scrollbar-hidden::-webkit-scrollbar {
    display: none;
}

.scrollbar-hidden {
    scrollbar-width: none;
}


/* --- assets/css/components/animations/animation.css --- */
/* Page-load reveal animations for dashboard grids */

:root {
    --reveal-duration: 600ms;
    --reveal-ease: cubic-bezier(.2,.9,.2,1);
}

.dashboard-grid .grid-card-1,
.dashboard-grid .grid-card-2,
.dashboard-grid .grid-card-3,
.dashboard-grid .grid-card-4,
.dashboard-grid .grid-card-5 {
    opacity: 0;
    transform: translateY(10px) scale(0.996);
    will-change: opacity, transform;
}

.animate .dashboard-grid .grid-card-1 { animation: reveal var(--reveal-duration) var(--reveal-ease) 900ms both; }
.animate .dashboard-grid .grid-card-2 { animation: reveal var(--reveal-duration) var(--reveal-ease) 1100ms both; }
.animate .dashboard-grid .grid-card-3 { animation: reveal var(--reveal-duration) var(--reveal-ease) 1200ms both; }
.animate .dashboard-grid .grid-card-4 { animation: reveal var(--reveal-duration) var(--reveal-ease) 1300ms both; }
.animate .dashboard-grid .grid-card-5 { animation: reveal var(--reveal-duration) var(--reveal-ease) 1400ms both; }

@keyframes reveal {
    from { opacity: 0; transform: translateY(10px) scale(0.996); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* Slight stagger for inner card content to feel lively */
.animate .grid-card-1 *,
.animate .grid-card-2 *,
.animate .grid-card-3 *,
.animate .grid-card-4 *,
.animate .grid-card-5 * {
    animation: none;
}

/* Electric Nose Dashboard Animations */
.nose-kpi-row .nose-kpi-card:nth-child(1),
.nose-kpi-row .nose-kpi-card:nth-child(2),
.nose-kpi-row .nose-kpi-card:nth-child(3),
.nose-kpi-row .nose-kpi-card:nth-child(4) {
    opacity: 0;
    transform: translateY(15px) scale(0.98);
    will-change: opacity, transform;
}

.animate .nose-kpi-row .nose-kpi-card:nth-child(1) { 
    animation: reveal var(--reveal-duration) var(--reveal-ease) 200ms both; 
}
.animate .nose-kpi-row .nose-kpi-card:nth-child(2) { 
    animation: reveal var(--reveal-duration) var(--reveal-ease) 350ms both; 
}
.animate .nose-kpi-row .nose-kpi-card:nth-child(3) { 
    animation: reveal var(--reveal-duration) var(--reveal-ease) 500ms both; 
}
.animate .nose-kpi-row .nose-kpi-card:nth-child(4) { 
    animation: reveal var(--reveal-duration) var(--reveal-ease) 650ms both; 
}

/* Compound Signatures Card Animation */
.nose-card:not(.wide) {
    opacity: 0;
    transform: translateY(20px) scale(0.97);
    will-change: opacity, transform;
}

.animate .nose-card:not(.wide) {
    animation: reveal var(--reveal-duration) var(--reveal-ease) 800ms both;
}

/* Sensor Health Matrix Card Animation */
.nose-card.wide {
    opacity: 0;
    transform: translateY(20px) scale(0.97);
    will-change: opacity, transform;
}

.animate .nose-card.wide {
    animation: reveal var(--reveal-duration) var(--reveal-ease) 950ms both;
}

/* Gas Metrics Stagger Animation */
.gas-metric {
    opacity: 0;
    transform: translateX(-10px);
    will-change: opacity, transform;
}

.animate .gas-metric:nth-child(1) { 
    animation: slideInLeft var(--reveal-duration) var(--reveal-ease) 1100ms both; 
}
.animate .gas-metric:nth-child(2) { 
    animation: slideInLeft var(--reveal-duration) var(--reveal-ease) 1250ms both; 
}
.animate .gas-metric:nth-child(3) { 
    animation: slideInLeft var(--reveal-duration) var(--reveal-ease) 1400ms both; 
}
.animate .gas-metric:nth-child(4) { 
    animation: slideInLeft var(--reveal-duration) var(--reveal-ease) 1550ms both; 
}
.animate .gas-metric:nth-child(5) { 
    animation: slideInLeft var(--reveal-duration) var(--reveal-ease) 1700ms both; 
}
.animate .gas-metric:nth-child(6) { 
    animation: slideInLeft var(--reveal-duration) var(--reveal-ease) 1850ms both; 
}

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

/* Sensor Stats Animation */
.sensor-stat {
    opacity: 0;
    transform: scale(0.9);
    will-change: opacity, transform;
}

.animate .sensor-stat:nth-child(1) { 
    animation: scaleIn var(--reveal-duration) var(--reveal-ease) 1200ms both; 
}
.animate .sensor-stat:nth-child(2) { 
    animation: scaleIn var(--reveal-duration) var(--reveal-ease) 1350ms both; 
}
.animate .sensor-stat:nth-child(3) { 
    animation: scaleIn var(--reveal-duration) var(--reveal-ease) 1500ms both; 
}
.animate .sensor-stat:nth-child(4) { 
    animation: scaleIn var(--reveal-duration) var(--reveal-ease) 1650ms both; 
}

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

/* Sensor Metrics (Temp, Humidity, Battery, Signal) */
.sensor-metrics .metric-item {
    opacity: 0;
    transform: translateY(10px);
    will-change: opacity, transform;
}

.animate .sensor-metrics .metric-item:nth-child(1) { 
    animation: fadeInUp var(--reveal-duration) var(--reveal-ease) 1400ms both; 
}
.animate .sensor-metrics .metric-item:nth-child(2) { 
    animation: fadeInUp var(--reveal-duration) var(--reveal-ease) 1500ms both; 
}
.animate .sensor-metrics .metric-item:nth-child(3) { 
    animation: fadeInUp var(--reveal-duration) var(--reveal-ease) 1600ms both; 
}
.animate .sensor-metrics .metric-item:nth-child(4) { 
    animation: fadeInUp var(--reveal-duration) var(--reveal-ease) 1700ms both; 
}

@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Table Header Animation */
.nose-table thead {
    opacity: 0;
    transform: translateY(-10px);
    will-change: opacity, transform;
}

.animate .nose-table thead {
    animation: fadeInDown var(--reveal-duration) var(--reveal-ease) 1500ms both;
}

@keyframes fadeInDown {
    from { opacity: 0; transform: translateY(-10px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Table Rows Animation */
.nose-table tbody tr {
    opacity: 0;
    transform: translateX(-15px);
    will-change: opacity, transform;
}

.animate .nose-table tbody tr:nth-child(1) { 
    animation: slideInLeft var(--reveal-duration) var(--reveal-ease) 1600ms both; 
}
.animate .nose-table tbody tr:nth-child(2) { 
    animation: slideInLeft var(--reveal-duration) var(--reveal-ease) 1750ms both; 
}
.animate .nose-table tbody tr:nth-child(3) { 
    animation: slideInLeft var(--reveal-duration) var(--reveal-ease) 1900ms both; 
}
.animate .nose-table tbody tr:nth-child(4) { 
    animation: slideInLeft var(--reveal-duration) var(--reveal-ease) 2050ms both; 
}

/* Card Headers Animation */
.nose-card header,
.nose-kpi-card header {
    opacity: 0;
    transform: translateY(-8px);
    will-change: opacity, transform;
}

.animate .nose-card header {
    animation: fadeInDown var(--reveal-duration) var(--reveal-ease) 850ms both;
}

.animate .nose-kpi-card header {
    animation: fadeInDown calc(var(--reveal-duration) * 0.7) var(--reveal-ease) 100ms both;
}

/* Export Button Animation */
.nose-pill#export-data {
    opacity: 0;
    transform: scale(0.9) translateY(-5px);
    will-change: opacity, transform;
}

.animate .nose-pill#export-data {
    animation: scaleIn var(--reveal-duration) var(--reveal-ease) 1000ms both;
}

/* Gas Legend Animation */
.gas-legend {
    opacity: 0;
    transform: translateY(10px);
    will-change: opacity, transform;
}

.animate .gas-legend {
    animation: fadeInUp var(--reveal-duration) var(--reveal-ease) 2000ms both;
}

/* Scoped to gas page — global .legend-item hid onboard gender legend (opacity: 0) */
.gas-legend .legend-item {
    opacity: 0;
    transform: scale(0.8);
    will-change: opacity, transform;
}

.animate .gas-legend .legend-item:nth-child(1) { 
    animation: scaleIn var(--reveal-duration) var(--reveal-ease) 2100ms both; 
}
.animate .gas-legend .legend-item:nth-child(2) { 
    animation: scaleIn var(--reveal-duration) var(--reveal-ease) 2200ms both; 
}
.animate .gas-legend .legend-item:nth-child(3) { 
    animation: scaleIn var(--reveal-duration) var(--reveal-ease) 2300ms both; 
}

/* Progress Bars Width Animation - Handled by JavaScript */
.gas-metric .progress-bar {
    transition: width 1s cubic-bezier(.33,1.7,.54,.99);
}

/* Status Badges Animation */
.status-badge {
    opacity: 0;
    transform: scale(0.8);
    will-change: opacity, transform;
}

.animate .nose-table tbody tr:nth-child(1) .status-badge { 
    animation: scaleIn var(--reveal-duration) var(--reveal-ease) 1700ms both; 
}
.animate .nose-table tbody tr:nth-child(2) .status-badge { 
    animation: scaleIn var(--reveal-duration) var(--reveal-ease) 1850ms both; 
}
.animate .nose-table tbody tr:nth-child(3) .status-badge { 
    animation: scaleIn var(--reveal-duration) var(--reveal-ease) 2000ms both; 
}
.animate .nose-table tbody tr:nth-child(4) .status-badge { 
    animation: scaleIn var(--reveal-duration) var(--reveal-ease) 2150ms both; 
}

/* Divider Animation */
.nose-divider {
    opacity: 0;
    transform: scaleX(0);
    transform-origin: left;
    will-change: opacity, transform;
}

.animate .nose-divider {
    animation: expandWidth var(--reveal-duration) var(--reveal-ease) 1950ms both;
}

@keyframes expandWidth {
    from { opacity: 0; transform: scaleX(0); }
    to   { opacity: 1; transform: scaleX(1); }
}

/* KPI Trend Badges Animation */
.kpi-trend {
    opacity: 0;
    transform: scale(0.9);
    will-change: opacity, transform;
}

.animate .kpi-trend {
    animation: scaleIn calc(var(--reveal-duration) * 0.6) var(--reveal-ease) 300ms both;
}

/* KPI Main Values Animation (scoped — avoids hiding onboard .kpi-value) */
.nose-kpi-card .kpi-value {
    opacity: 0;
    transform: translateY(10px) scale(0.95);
    will-change: opacity, transform;
}

.animate .nose-kpi-card:nth-child(1) .kpi-value {
    animation: revealValue var(--reveal-duration) var(--reveal-ease) 400ms both;
}
.animate .nose-kpi-card:nth-child(2) .kpi-value {
    animation: revealValue var(--reveal-duration) var(--reveal-ease) 550ms both;
}
.animate .nose-kpi-card:nth-child(3) .kpi-value {
    animation: revealValue var(--reveal-duration) var(--reveal-ease) 700ms both;
}
.animate .nose-kpi-card:nth-child(4) .kpi-value {
    animation: revealValue var(--reveal-duration) var(--reveal-ease) 850ms both;
}

@keyframes revealValue {
    from { opacity: 0; transform: translateY(10px) scale(0.95); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* KPI Footer Animation */
.nose-kpi-card footer {
    opacity: 0;
    transform: translateY(8px);
    will-change: opacity, transform;
}

.animate .nose-kpi-card:nth-child(1) footer {
    animation: fadeInUp calc(var(--reveal-duration) * 0.8) var(--reveal-ease) 500ms both;
}
.animate .nose-kpi-card:nth-child(2) footer {
    animation: fadeInUp calc(var(--reveal-duration) * 0.8) var(--reveal-ease) 650ms both;
}
.animate .nose-kpi-card:nth-child(3) footer {
    animation: fadeInUp calc(var(--reveal-duration) * 0.8) var(--reveal-ease) 800ms both;
}
.animate .nose-kpi-card:nth-child(4) footer {
    animation: fadeInUp calc(var(--reveal-duration) * 0.8) var(--reveal-ease) 950ms both;
}

/* Gas Value Spans in Footer - Subtle Stagger */
.nose-kpi-card footer span[id*="-level"],
.nose-kpi-card footer .last-calibration-text {
    opacity: 0;
    transform: scale(0.9);
    will-change: opacity, transform;
    display: inline-block;
}

.animate .nose-kpi-card:nth-child(1) footer span[id*="-level"],
.animate .nose-kpi-card:nth-child(1) footer .last-calibration-text {
    animation: scaleIn calc(var(--reveal-duration) * 0.5) var(--reveal-ease) 600ms both;
}
.animate .nose-kpi-card:nth-child(2) footer span[id*="-level"],
.animate .nose-kpi-card:nth-child(2) footer .last-calibration-text {
    animation: scaleIn calc(var(--reveal-duration) * 0.5) var(--reveal-ease) 750ms both;
}
.animate .nose-kpi-card:nth-child(3) footer span[id*="-level"],
.animate .nose-kpi-card:nth-child(3) footer .last-calibration-text {
    animation: scaleIn calc(var(--reveal-duration) * 0.5) var(--reveal-ease) 900ms both;
}
.animate .nose-kpi-card:nth-child(4) footer span[id*="-level"],
.animate .nose-kpi-card:nth-child(4) footer .last-calibration-text {
    animation: scaleIn calc(var(--reveal-duration) * 0.5) var(--reveal-ease) 1050ms both;
}

/* Header Titles Animation */
.header-title-primary,
.header-title-secondary {
    opacity: 0;
    transform: translateX(-10px);
    will-change: opacity, transform;
}

.animate .header-title-primary,
.animate .header-title-secondary {
    animation: slideInLeft var(--reveal-duration) var(--reveal-ease) 900ms both;
}

.header-subtitle {
    opacity: 0;
    transform: translateX(-10px);
    will-change: opacity, transform;
}

.animate .header-subtitle {
    animation: slideInLeft var(--reveal-duration) var(--reveal-ease) 1050ms both;
}

/* Sensor Count Badge Animation */
.nose-pill.passive#nose-sensor-count {
    opacity: 0;
    transform: scale(0.9);
    will-change: opacity, transform;
}

.animate .nose-pill.passive#nose-sensor-count {
    animation: scaleIn var(--reveal-duration) var(--reveal-ease) 1100ms both;
}

/* Power Production Dashboard Animations */
.power-grid .power-card {
    opacity: 0;
    transform: translateY(20px) scale(0.97);
    will-change: opacity, transform;
}

.animate .power-grid .power-card:nth-child(1) { 
    animation: reveal var(--reveal-duration) var(--reveal-ease) 200ms both; 
}
.animate .power-grid .power-card:nth-child(2) { 
    animation: reveal var(--reveal-duration) var(--reveal-ease) 350ms both; 
}
.animate .power-grid .power-card:nth-child(3) { 
    animation: reveal var(--reveal-duration) var(--reveal-ease) 500ms both; 
}
.animate .power-grid .power-card:nth-child(4) { 
    animation: reveal var(--reveal-duration) var(--reveal-ease) 650ms both; 
}
.animate .power-grid .power-card:nth-child(5) { 
    animation: reveal var(--reveal-duration) var(--reveal-ease) 800ms both; 
}
.animate .power-grid .power-card:nth-child(6) { 
    animation: reveal var(--reveal-duration) var(--reveal-ease) 950ms both; 
}

/* Power Card Headers Animation */
.power-card-header {
    opacity: 0;
    transform: translateY(-8px);
    will-change: opacity, transform;
}

.animate .power-card-header {
    animation: fadeInDown calc(var(--reveal-duration) * 0.7) var(--reveal-ease) 100ms both;
}

/* Power Stat Main Values Animation */
.power-stat-main-value {
    opacity: 0;
    transform: translateY(10px) scale(0.95);
    will-change: opacity, transform;
}

.animate .power-card:nth-child(1) .power-stat-main-value {
    animation: revealValue var(--reveal-duration) var(--reveal-ease) 400ms both;
}
.animate .power-card:nth-child(2) .power-stat-main-value {
    animation: revealValue var(--reveal-duration) var(--reveal-ease) 550ms both;
}
.animate .power-card:nth-child(3) .power-stat-main-value {
    animation: revealValue var(--reveal-duration) var(--reveal-ease) 700ms both;
}
.animate .power-card:nth-child(4) .power-stat-main-value {
    animation: revealValue var(--reveal-duration) var(--reveal-ease) 850ms both;
}
.animate .power-card:nth-child(5) .power-stat-main-value {
    animation: revealValue var(--reveal-duration) var(--reveal-ease) 1000ms both;
}
.animate .power-card:nth-child(6) .power-stat-main-value {
    animation: revealValue var(--reveal-duration) var(--reveal-ease) 1150ms both;
}

/* Power Stat Labels Animation */
.power-stat-label {
    opacity: 0;
    transform: translateX(-10px);
    will-change: opacity, transform;
}

.animate .power-card:nth-child(1) .power-stat-label {
    animation: slideInLeft calc(var(--reveal-duration) * 0.7) var(--reveal-ease) 300ms both;
}
.animate .power-card:nth-child(2) .power-stat-label {
    animation: slideInLeft calc(var(--reveal-duration) * 0.7) var(--reveal-ease) 450ms both;
}
.animate .power-card:nth-child(3) .power-stat-label {
    animation: slideInLeft calc(var(--reveal-duration) * 0.7) var(--reveal-ease) 600ms both;
}
.animate .power-card:nth-child(4) .power-stat-label {
    animation: slideInLeft calc(var(--reveal-duration) * 0.7) var(--reveal-ease) 750ms both;
}
.animate .power-card:nth-child(5) .power-stat-label {
    animation: slideInLeft calc(var(--reveal-duration) * 0.7) var(--reveal-ease) 900ms both;
}
.animate .power-card:nth-child(6) .power-stat-label {
    animation: slideInLeft calc(var(--reveal-duration) * 0.7) var(--reveal-ease) 1050ms both;
}

/* Power Bars Animation - Handled by JavaScript */
.power-bar-fill {
    transition: width 1s cubic-bezier(.33,1.7,.54,.99);
}

/* Chart Canvas Animation */
.power-chart-canvas {
    opacity: 0;
    transform: scale(0.95);
    will-change: opacity, transform;
}

.animate .power-chart-canvas {
    animation: scaleIn var(--reveal-duration) var(--reveal-ease) 600ms both;
}

/* Sources Breakdown List Items Animation */
.sources-breakdown-list li {
    opacity: 0;
    transform: translateX(-15px);
    will-change: opacity, transform;
}

.animate .sources-breakdown-list li:nth-child(1) {
    animation: slideInLeft var(--reveal-duration) var(--reveal-ease) 900ms both;
}
.animate .sources-breakdown-list li:nth-child(2) {
    animation: slideInLeft var(--reveal-duration) var(--reveal-ease) 1050ms both;
}
.animate .sources-breakdown-list li:nth-child(3) {
    animation: slideInLeft var(--reveal-duration) var(--reveal-ease) 1200ms both;
}

/* Power Stat Meta Animation */
.power-stat-meta {
    opacity: 0;
    transform: translateY(5px);
    will-change: opacity, transform;
}

.animate .power-card:nth-child(1) .power-stat-meta {
    animation: fadeInUp calc(var(--reveal-duration) * 0.6) var(--reveal-ease) 500ms both;
}
.animate .power-card:nth-child(2) .power-stat-meta {
    animation: fadeInUp calc(var(--reveal-duration) * 0.6) var(--reveal-ease) 650ms both;
}
.animate .power-card:nth-child(3) .power-stat-meta {
    animation: fadeInUp calc(var(--reveal-duration) * 0.6) var(--reveal-ease) 800ms both;
}
.animate .power-card:nth-child(4) .power-stat-meta {
    animation: fadeInUp calc(var(--reveal-duration) * 0.6) var(--reveal-ease) 950ms both;
}
.animate .power-card:nth-child(5) .power-stat-meta {
    animation: fadeInUp calc(var(--reveal-duration) * 0.6) var(--reveal-ease) 1100ms both;
}
.animate .power-card:nth-child(6) .power-stat-meta {
    animation: fadeInUp calc(var(--reveal-duration) * 0.6) var(--reveal-ease) 1250ms both;
}

/* Trend Details Button Animation */
.trend-details-btn {
    opacity: 0;
    transform: scale(0.9);
    will-change: opacity, transform;
}

.animate .trend-details-btn {
    animation: scaleIn var(--reveal-duration) var(--reveal-ease) 750ms both;
}

/* Additional KPI Cards Animation */
.additional-kpi-container .kpi-card {
    opacity: 0;
    transform: translateY(15px) scale(0.98);
    will-change: opacity, transform;
}

.animate .additional-kpi-container .kpi-card:nth-child(1) {
    animation: reveal var(--reveal-duration) var(--reveal-ease) 1100ms both;
}
.animate .additional-kpi-container .kpi-card:nth-child(2) {
    animation: reveal var(--reveal-duration) var(--reveal-ease) 1250ms both;
}
.animate .additional-kpi-container .kpi-card:nth-child(3) {
    animation: reveal var(--reveal-duration) var(--reveal-ease) 1400ms both;
}
.animate .additional-kpi-container .kpi-card:nth-child(4) {
    animation: reveal var(--reveal-duration) var(--reveal-ease) 1550ms both;
}

/* KPI Card Content Animation */
.kpi-card .kpi-title {
    opacity: 0;
    transform: translateY(-5px);
    will-change: opacity, transform;
}

.animate .kpi-card .kpi-title {
    animation: fadeInDown calc(var(--reveal-duration) * 0.6) var(--reveal-ease) 100ms both;
}

.kpi-card .kpi-value {
    opacity: 0;
    transform: scale(0.9);
    will-change: opacity, transform;
}

.animate .kpi-card:nth-child(1) .kpi-value {
    animation: scaleIn calc(var(--reveal-duration) * 0.7) var(--reveal-ease) 1300ms both;
}
.animate .kpi-card:nth-child(2) .kpi-value {
    animation: scaleIn calc(var(--reveal-duration) * 0.7) var(--reveal-ease) 1450ms both;
}
.animate .kpi-card:nth-child(3) .kpi-value {
    animation: scaleIn calc(var(--reveal-duration) * 0.7) var(--reveal-ease) 1600ms both;
}
.animate .kpi-card:nth-child(4) .kpi-value {
    animation: scaleIn calc(var(--reveal-duration) * 0.7) var(--reveal-ease) 1750ms both;
}

.kpi-card .kpi-meta {
    opacity: 0;
    transform: translateY(5px);
    will-change: opacity, transform;
}

.animate .kpi-card .kpi-meta {
    animation: fadeInUp calc(var(--reveal-duration) * 0.5) var(--reveal-ease) 200ms both;
}

/* Gas Dashboard Animations */
.gas-grid .gas-card {
    opacity: 0;
    transform: translateY(18px) scale(0.975);
    will-change: opacity, transform;
}

.animate .gas-grid .gas-card:nth-child(1) { animation: reveal var(--reveal-duration) var(--reveal-ease) 200ms both; }
.animate .gas-grid .gas-card:nth-child(2) { animation: reveal var(--reveal-duration) var(--reveal-ease) 350ms both; }
.animate .gas-grid .gas-card:nth-child(3) { animation: reveal var(--reveal-duration) var(--reveal-ease) 500ms both; }
.animate .gas-grid .gas-card:nth-child(4) { animation: reveal var(--reveal-duration) var(--reveal-ease) 650ms both; }

.gas-stat-value,
.gas-stat-value span {
    transition: transform 0.3s ease, color 0.3s ease;
}

.gas-stat-value.gas-flash {
    animation: gasValuePulse 320ms ease;
}

@keyframes gasValuePulse {
    0%   { transform: scale(1);   color: inherit; }
    50%  { transform: scale(1.06); color: #0D47A1; }
    100% { transform: scale(1);   color: inherit; }
}

.gas-card-header {
    opacity: 0;
    transform: translateY(-8px);
    will-change: opacity, transform;
}

.animate .gas-card-header {
    animation: fadeInDown calc(var(--reveal-duration) * 0.7) var(--reveal-ease) 150ms both;
}

.gas-stat {
    opacity: 0;
    transform: translateX(-10px);
    will-change: opacity, transform;
}

.animate .gas-card:nth-child(1) .gas-stat:nth-child(1) { animation: slideInLeft var(--reveal-duration) var(--reveal-ease) 400ms both; }
.animate .gas-card:nth-child(1) .gas-stat:nth-child(2) { animation: slideInLeft var(--reveal-duration) var(--reveal-ease) 550ms both; }
.animate .gas-card:nth-child(1) .gas-stat:nth-child(3) { animation: slideInLeft var(--reveal-duration) var(--reveal-ease) 700ms both; }

.animate .gas-card:nth-child(2) .gas-stat:nth-child(1) { animation: slideInLeft var(--reveal-duration) var(--reveal-ease) 500ms both; }
.animate .gas-card:nth-child(2) .gas-stat:nth-child(2) { animation: slideInLeft var(--reveal-duration) var(--reveal-ease) 650ms both; }
.animate .gas-card:nth-child(2) .gas-stat:nth-child(3) { animation: slideInLeft var(--reveal-duration) var(--reveal-ease) 800ms both; }

.animate .gas-card:nth-child(3) .gas-stat:nth-child(1) { animation: slideInLeft var(--reveal-duration) var(--reveal-ease) 600ms both; }
.animate .gas-card:nth-child(3) .gas-stat:nth-child(2) { animation: slideInLeft var(--reveal-duration) var(--reveal-ease) 750ms both; }
.animate .gas-card:nth-child(3) .gas-stat:nth-child(3) { animation: slideInLeft var(--reveal-duration) var(--reveal-ease) 900ms both; }
.animate .gas-card:nth-child(3) .gas-stat:nth-child(4) { animation: slideInLeft var(--reveal-duration) var(--reveal-ease) 1050ms both; }

.gas-schedule-item {
    opacity: 0;
    transform: translateY(8px);
    will-change: opacity, transform;
}

.animate .gas-schedule-item:nth-child(1) { animation: fadeInUp var(--reveal-duration) var(--reveal-ease) 700ms both; }
.animate .gas-schedule-item:nth-child(2) { animation: fadeInUp var(--reveal-duration) var(--reveal-ease) 850ms both; }
.animate .gas-schedule-item:nth-child(3) { animation: fadeInUp var(--reveal-duration) var(--reveal-ease) 1000ms both; }

/* Power Bar Labels Animation */
.power-bar-label {
    opacity: 0;
    transform: translateY(-5px);
    will-change: opacity, transform;
}

.animate .power-card:nth-child(1) .power-bar-label {
    animation: fadeInDown calc(var(--reveal-duration) * 0.6) var(--reveal-ease) 450ms both;
}
.animate .power-card:nth-child(2) .power-bar-label {
    animation: fadeInDown calc(var(--reveal-duration) * 0.6) var(--reveal-ease) 600ms both;
}
.animate .power-card:nth-child(3) .power-bar-label {
    animation: fadeInDown calc(var(--reveal-duration) * 0.6) var(--reveal-ease) 750ms both;
}
.animate .power-card:nth-child(4) .power-bar-label {
    animation: fadeInDown calc(var(--reveal-duration) * 0.6) var(--reveal-ease) 900ms both;
}
.animate .power-card:nth-child(5) .power-bar-label {
    animation: fadeInDown calc(var(--reveal-duration) * 0.6) var(--reveal-ease) 1050ms both;
}
.animate .power-card:nth-child(6) .power-bar-label {
    animation: fadeInDown calc(var(--reveal-duration) * 0.6) var(--reveal-ease) 1200ms both;
}

/* reduced-motion support */
@media (prefers-reduced-motion: reduce) {
    .dashboard-grid .grid-card-1,
    .dashboard-grid .grid-card-2,
    .dashboard-grid .grid-card-3,
    .dashboard-grid .grid-card-4,
    .dashboard-grid .grid-card-5 { 
        opacity: 1; 
        transform: none; 
        animation: none; 
    }
    
    .nose-kpi-row .nose-kpi-card,
    .nose-card,
    .nose-card.wide,
    .gas-metric,
    .sensor-stat,
    .sensor-metrics .metric-item,
    .nose-table tbody tr,
    .nose-table thead,
    .nose-card header,
    .nose-kpi-card header,
    .nose-pill,
    .gas-legend,
    .gas-legend .legend-item,
    .status-badge,
    .nose-divider,
    .kpi-trend,
    .kpi-value,
    .nose-kpi-card footer,
    .nose-kpi-card footer span,
    .header-title-primary,
    .header-title-secondary,
    .header-subtitle,
    .gas-grid .gas-card,
    .gas-card-header,
    .gas-stat,
    .gas-schedule-item,
    .power-grid .power-card,
    .power-card-header,
    .power-stat-main-value,
    .power-stat-label,
    .power-stat-meta,
    .power-chart-canvas,
    .sources-breakdown-list li,
    .trend-details-btn,
    .additional-kpi-container .kpi-card,
    .kpi-card .kpi-title,
    .kpi-card .kpi-value,
    .kpi-card .kpi-meta,
    .power-bar-label {
        opacity: 1;
        transform: none;
        animation: none;
    }
    
    .power-bar-fill {
        width: auto !important;
        transition: none;
    }
    
    .progress-bar {
        width: auto !important;
        transition: none;
    }
}

/*
 * Project setting: Animations toggle off.
 * When `body.animations-disabled` is set, hard-disable keyframe animations and
 * transitions so the UI stops "moving" even after the initial reveal.
 */
body.animations-disabled * {
    animation: none !important;
    transition-duration: 0.001ms !important;
    transition-delay: 0.001ms !important;
}


/* --- assets/css/components/responsive/screen-responsive.css --- */
/* Additional responsive tweaks layered on top of styles.css
 * Targets: phones, laptops/desktops, and large TV displays
 * 
 * All responsive code from styles.css has been moved here for better organization
 */

/* Loading Screen Responsive */
@media (max-width: 768px) {
    .loading-spinner {
        width: 48px;
        height: 48px;
        border-width: 4px;
        margin-bottom: 20px;
    }
    
    .loading-text {
        font-size: 20px;
    }
    
    .loading-subtext {
        font-size: 14px;
    }
}

/* Mobile: Allow scrolling */
@media (max-width: 768px) {
    body {
        overflow-y: auto;
        overflow-x: hidden;
        height: auto;
        min-height: 100vh;
    }
}

@media (min-aspect-ratio: 16/9) {
    .dashboard-container {
        width: calc(100vh * 16 / 9);
        height: 100vh;
    }
}

@media (max-aspect-ratio: 16/9) {
    .dashboard-container {
        width: 100vw;
        height: calc(100vw * 9 / 16);
    }
}


/* Tablets & smaller: prevent horizontal overflow, scale content */
@media (max-width: 950px) {
  html {
    overflow-x: hidden;
  }
  body {
    overflow-x: hidden !important;
  }
  .hourly-track-wrapper {
    overflow: hidden;
    width: 100%;
    max-width: 100%;
  }
  .hourly-card {
    min-width: min(120px, 32vw);
  }
  .wind-meta {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px 14px;
  }
  .meta-item {
    min-width: 0;
  }
  .meta-item.wind-arrow-meta {
    grid-column: 1 / -1;
  }
  .summary-inner {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px 16px;
  }
  .metric {
    min-width: 0;
  }
  .side-location,
  .grid1-greeting,
  .side-time {
    overflow-wrap: break-word;
    word-wrap: break-word;
  }
  .wind-body {
    min-width: 0;
  }
  .wind-graph,
  .wind-graph-svg {
    min-width: 0;
  }
  .wind-value { font-size: clamp(18px, 4vw, 28px); }
  .meta-value { font-size: clamp(11px, 2vw, 14px); }
  .meta-label { font-size: clamp(9px, 1.5vw, 12px); }
  .meta-item {
    align-items: center;
    text-align: center;
  }
  .clock-meta,
  .clock-date {
    overflow-wrap: break-word;
    word-wrap: break-word;
    text-align: center;
  }
}

/* Small phones: stack content, tighten paddings and fonts */
@media (max-width: 600px) {
  html {
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    height: auto;
    overflow-y: visible;
  }

  body {
    overflow-y: auto !important;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    min-height: 100vh;
    height: auto;
    position: relative;
  }

  /* Header improvements for mobile */
  .header {
    padding: 8px 14px;
    flex-wrap: wrap;
    gap: 12px;
    border-bottom-left-radius: 16px;
    border-bottom-right-radius: 16px;
  }

  .logo-container {
    flex: 1;
    min-width: 0;
  }

  .logo-graphic {
    height: 45px;
  }

  .logo-graphic img {
    max-height: 45px;
    width: auto;
  }

  .header-nav {
    width: 100%;
    justify-content: space-between;
    gap: 8px;
    margin-top: 4px;
  }

  .nav-link {
    font-size: 12px;
    padding: 8px 12px;
    flex: 1;
    text-align: center;
    min-width: 0;
    white-space: nowrap;
  }

  /* Dashboard grid improvements */
  .dashboard-grid {
    padding: 12px 14px;
    gap: 14px;
    min-height: auto;
    display: flex;
    flex-direction: column;
    width: 100%;
    align-items: stretch;
  }

  .grid-card-1,
  .grid-card-2,
  .grid-card-3,
  .grid-card-4,
  .grid-card-5 {
    border-radius: 18px;
    box-shadow: 0 4px 12px rgba(13, 71, 161, 0.15);
    padding: 16px 14px;
    width: 100%;
    min-height: auto;
    display: block !important;
    grid-column: 1 !important;
    grid-row: auto !important;
    margin-bottom: 0;
    position: relative;
    background: radial-gradient(circle at top left, #ffffff 0%, #f3f8ff 42%, #e6f2ff 100%);
  }

  /* Grid Card 1 - Main Weather - Professional Mobile Layout */
  .grid-card-1 {
    min-height: auto;
    padding: 18px 16px;
  }

  .grid1-greeting {
    font-size: clamp(14px, 4vw, 18px);
    margin-bottom: 16px;
    line-height: 1.3;
    padding-bottom: 12px;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    border-bottom: 1px solid rgba(13, 71, 161, 0.1);
  }

  .grid1-greeting::after {
    font-size: 9px;
    letter-spacing: 0.08em;
    margin-top: 4px;
    display: block;
    opacity: 0.7;
    overflow-wrap: break-word;
  }

  .grid1-inner {
    gap: 20px;
    flex-direction: column;
    height: auto;
    min-height: auto;
  }

  .grid1-left,
  .grid1-center,
  .grid1-side {
    width: 100%;
    flex: initial;
    align-items: center;
    justify-content: center;
  }

  /* Reorder: Center (temp + icon) first, then left (sunrise/sunset), then side */
  .grid1-left {
    order: 2;
    gap: 12px;
    text-align: center;
    margin-top: 4px;
  }

  .grid1-center {
    order: 1;
    text-align: center;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: clamp(12px, 4vw, 20px);
    padding: 12px 16px;
    background: linear-gradient(135deg, rgba(227, 242, 253, 0.3) 0%, rgba(255, 255, 255, 0.1) 100%);
    border-radius: 20px;
    margin-bottom: 8px;
  }

  .grid1-side {
    order: 3;
    margin-top: 12px;
    border-top: 1px solid rgba(13, 71, 161, 0.08);
    padding-top: 16px;
    width: 100%;
    max-width: 100%;
  }

  /* Temperature - larger and more prominent */
  .temp-large {
    font-size: clamp(56px, 14vw, 72px);
    line-height: 1;
    display: flex;
    align-items: flex-start;
    gap: 4px;
    margin: 0;
  }

  .temp-unit {
    font-size: clamp(24px, 6vw, 32px);
    margin-top: 4px;
  }

  /* Weather icon next to temperature */
  .center-graphic {
    width: clamp(80px, 20vw, 110px);
    height: clamp(80px, 20vw, 110px);
    margin: 0;
    filter: drop-shadow(0 8px 16px rgba(13, 71, 161, 0.2));
  }

  .center-label {
    display: none; /* Hide on mobile, icon is enough */
  }

  /* Sunrise/Sunset - side by side layout */
  .sun-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    width: 100%;
    margin-top: 0;
  }

  .sun-item {
    gap: 10px;
    padding: 12px 10px;
    background: rgba(227, 242, 253, 0.5);
    border-radius: 14px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    transition: background 0.2s ease, transform 0.2s ease;
  }

  .sun-item:active {
    transform: scale(0.98);
    background: rgba(227, 242, 253, 0.7);
  }

  .sun-ico {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 4px;
  }

  .sun-ico img {
    width: 36px;
    height: 36px;
    object-fit: contain;
  }

  .sun-text {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
  }

  .sun-label {
    font-size: 10px;
    margin-bottom: 2px;
  }

  .sun-time {
    font-size: 15px;
    font-weight: 800;
  }

  .side-panel {
    gap: 12px;
    padding: 16px 12px;
    background: linear-gradient(160deg, rgba(243, 247, 255, 0.8) 0%, rgba(225, 242, 255, 0.6) 40%, rgba(248, 251, 255, 0.9) 100%);
    border-radius: 16px;
    box-shadow: 0 4px 12px rgba(13, 71, 161, 0.08);
  }

  .side-location {
    font-size: 13px;
    font-weight: 700;
    margin-bottom: 4px;
    overflow-wrap: break-word;
    word-wrap: break-word;
  }

  .side-time {
    font-size: 16px;
    font-weight: 800;
    margin-bottom: 8px;
  }

  .side-weather {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding-top: 10px;
    border-top: 1px solid rgba(13, 71, 161, 0.1);
    width: 100%;
  }

  .side-weather-icon {
    width: 48px;
    height: 48px;
    margin-bottom: 6px;
  }

  .side-weather-arrow-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    margin: 0 auto 8px;
  }

  .side-weather-arrow {
    width: 48px;
    height: 48px;
    transform-origin: center center;
    transition: transform 0.5s ease-out;
    display: block;
  }

  .side-condition {
    font-size: 13px;
    font-weight: 700;
    margin-bottom: 8px;
  }

  .side-wind {
    font-size: 13px;
    color: #0D47A1;
    font-weight: 700;
    text-align: center;
    margin: 0;
    line-height: 1.3;
    letter-spacing: 0.01em;
  }

  .side-wind-direction {
    font-size: 11px;
    color: #1976D2;
    font-weight: 600;
    text-align: center;
    margin: 2px 0 0 0;
    line-height: 1.4;
    text-transform: capitalize;
    opacity: 0.9;
  }

  .side-humidity {
    font-size: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-top: 10px;
    padding-top: 12px;
    border-top: 1px solid rgba(13, 71, 161, 0.12);
    width: 100%;
  }

  /* Grid Card 2 - Hourly Forecast */
  .grid-card-2 {
    min-height: 200px;
  }

  .hourly-header {
    font-size: 15px;
    font-weight: 700;
    margin-bottom: 12px;
    color: #0D47A1;
  }

  .hourly-track-wrapper {
    gap: 6px;
    position: relative;
  }

  .hourly-track-wrapper {
    padding: 0 8px;
  }

  .carousel-arrow {
    width: 32px;
    height: 32px;
    font-size: 14px;
    flex-shrink: 0;
    z-index: 2;
  }

  .carousel-arrow.left {
    left: 0;
  }

  .carousel-arrow.right {
    right: 0;
  }

  .hourly-track {
    flex: 1;
    overflow-x: auto;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }

  .hourly-track::-webkit-scrollbar {
    display: none;
  }

  .hourly-card {
    padding: 14px 10px 12px;
    min-width: min(100px, 30vw);
    flex-shrink: 0;
  }

  .hourly-time {
    font-size: 11px;
    margin-bottom: 6px;
  }

  .hourly-icon img {
    width: 36px;
    height: 36px;
  }

  .hourly-temp {
    font-size: 14px;
    margin: 6px 0;
  }

  .hourly-meta {
    font-size: 10px;
  }

  /* Grid Card 3 - Clock */
  .grid-card-3 {
    min-height: 180px;
  }

  .clock-card {
    padding: 18px 16px;
    gap: 18px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
  }

  .clock-info {
    margin-left: 0;
  }

  .clock-face {
    width: 110px;
    height: 110px;
    border-width: 3px;
    flex-shrink: 0;
  }

  .clock-info {
    text-align: center;
    width: 100%;
  }

  .clock-time {
    font-size: clamp(30px, 8vw, 42px);
    margin-bottom: 6px;
  }

  /* Improve touch targets for mobile */
  .carousel-arrow,
  .nav-link {
    min-height: 44px;
    min-width: 44px;
  }

  /* Better spacing for carousel dots */
  .carousel-dots {
    margin-top: 10px;
    gap: 6px;
  }

  .carousel-dots button {
    width: 8px;
    height: 8px;
  }

  /* Prevent horizontal scroll - target main containers only (avoid breaking flex/grid) */
  .dashboard-grid,
  .grid-card-1,
  .grid-card-2,
  .grid-card-3,
  .grid-card-4,
  .grid-card-5,
  .grid1-inner,
  .hourly-track-wrapper,
  .wind-card,
  .summary-inner {
    max-width: 100%;
    box-sizing: border-box;
  }

  img, svg {
    max-width: 100%;
    height: auto;
    object-fit: contain;
  }

  /* Ensure cards don't collapse */
  .grid-card-1,
  .grid-card-2,
  .grid-card-3,
  .grid-card-4,
  .grid-card-5 {
    opacity: 1;
    visibility: visible;
    display: block !important;
  }

  /* Better visual separation */
  .grid-card-1 {
    border-left: 3px solid #4CAF50;
  }

  /* Improve loading state on mobile */
  .loading-screen {
    position: fixed;
    z-index: 10000;
  }

  .clock-date {
    font-size: 13px;
  }

  .clock-meta {
    font-size: 11px;
  }

  /* Grid Card 4 - Wind */
  .grid-card-4 {
    min-height: 220px;
  }

  .wind-card {
    padding: 16px 14px;
    display: flex;
    flex-direction: column;
    height: 100%;
  }

  .wind-header {
    margin-bottom: 14px;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .wind-title {
    font-size: 20px;
    font-weight: 700;
  }

  .wind-sub {
    font-size: 11px;
    padding: 4px 10px;
    border-radius: 12px;
  }

  .wind-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: stretch;
  }

  .wind-main {
    gap: 10px;
    margin-bottom: 14px;
    text-align: center;
  }

  .wind-value {
    font-size: clamp(36px, 9vw, 52px);
    line-height: 1;
  }

  .wind-direction {
    font-size: 15px;
    font-weight: 600;
  }

  .wind-visual {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin: 12px 0;
  }

  .wind-arrow {
    width: 44px;
    height: 44px;
    flex-shrink: 0;
  }

  .wind-graph {
    flex: 1;
    min-height: 50px;
  }

  .wind-meta {
    gap: 10px 16px;
    margin-top: auto;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    align-items: start;
  }

  .meta-item {
    gap: 4px;
    min-width: 0;
    justify-content: center;
    align-items: center;
    text-align: center;
  }

  .meta-item.wind-arrow-meta {
    grid-column: 1 / -1;
  }

  .meta-label {
    font-size: 10px;
  }

  .meta-value {
    font-size: 12px;
  }

  /* Grid Card 5 - Summary Metrics */
  .grid-card-5 {
    min-height: 200px;
  }

  .summary-inner {
    gap: 12px 16px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
  }

  .metric {
    gap: 6px;
    text-align: center;
    padding: 12px 8px;
    border-radius: 12px;
    background: rgba(13, 71, 161, 0.03);
    transition: background 0.2s ease;
    min-width: 0;
  }

  .metric:hover {
    background: rgba(13, 71, 161, 0.06);
  }

  .metric-icon {
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .metric-icon img {
    width: 32px;
    height: 32px;
  }

  .metric-value {
    font-size: clamp(22px, 6vw, 30px);
    font-weight: 700;
    color: #0D47A1;
    line-height: 1.2;
  }

  .metric-label {
    font-size: 12px;
    font-weight: 600;
    color: #546E7A;
    text-transform: uppercase;
    letter-spacing: 0.5px;
  }

  /* Ensure all content is visible */
  .side-panel {
    width: 100%;
    text-align: center;
  }

  .side-weather {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
  }

  /* Better spacing for sun items */
  .sun-item {
    padding: 10px 12px;
    background: rgba(13, 71, 161, 0.04);
    border-radius: 10px;
    width: 100%;
    justify-content: center;
  }

  /* Improve carousel visibility */
  .hourly-carousel {
    width: 100%;
  }

  /* Ensure proper text wrapping */
  .grid1-greeting,
  .side-location,
  .side-condition {
    word-wrap: break-word;
    overflow-wrap: break-word;
  }

  /* CRITICAL: Fix scrolling to access all cards including Grid 5 */
  body {
    overflow-y: auto !important;
    overflow-x: hidden;
    height: auto !important;
  }

  .dashboard-grid {
    padding-bottom: 60px !important;
    min-height: auto !important;
    height: auto !important;
    display: flex !important;
    flex-direction: column;
  }

  /* Ensure all cards are visible and scrollable */
  .grid-card-1,
  .grid-card-2,
  .grid-card-3,
  .grid-card-4,
  .grid-card-5 {
    margin-bottom: 0;
    flex-shrink: 0;
  }
}

/* Very small phones - tighter spacing */
@media (max-width: 400px) {
  .dashboard-grid {
    padding: 10px 12px;
    gap: 12px;
  }
  .grid-card-1,
  .grid-card-2,
  .grid-card-3,
  .grid-card-4,
  .grid-card-5 {
    padding: 14px 12px;
  }
  .grid1-center {
    gap: 10px;
    padding: 10px 12px;
  }
  .summary-inner {
    gap: 10px 12px;
  }
  .metric {
    padding: 10px 6px;
  }
}

/* Medium phones / small tablets */
@media (min-width: 601px) and (max-width: 767px) {
  html {
    height: auto;
    overflow-y: auto;
  }

  body {
    overflow-y: auto;
    overflow-x: hidden;
    min-height: 100vh;
    height: auto;
  }

  .dashboard-grid {
    padding-bottom: 20px;
    min-height: auto;
    height: auto;
  }

  .header {
    padding: 10px 18px;
  }

  .header-nav {
    gap: 10px;
  }

  .nav-link {
    font-size: 13px;
    padding: 9px 16px;
  }

  .dashboard-grid {
    gap: clamp(16px, 2vw, 20px);
    padding: clamp(14px, 2vw, 18px);
  }

  .grid-card-1,
  .grid-card-2,
  .grid-card-3,
  .grid-card-4,
  .grid-card-5 {
    border-radius: 22px;
    padding: 16px 18px;
  }

  .temp-large {
    font-size: clamp(56px, 8vw, 72px);
  }

  .center-graphic {
    width: clamp(120px, 20vw, 160px);
    height: clamp(120px, 20vw, 160px);
  }
}

/* Tablets / laptops: default behavior, just slightly relax gap on medium screens */
@media (min-width: 768px) and (max-width: 1199px) {
  /* Grid Card 1 responsive from styles.css */
  .grid1-greeting {
    font-size: 16px;
    margin-bottom: 10px;
    padding-bottom: 8px;
    text-align: center;
  }

  .grid1-inner {
    flex-direction: column;
    padding: 8px;
    height: calc(100% - 45px);
  }

  .grid1-left,
  .grid1-center,
  .grid1-side {
    flex: initial;
    width: 100%;
    align-items: center;
  }

  .temp-large {
    font-size: 48px;
  }

  .center-graphic {
    width: 120px;
    height: 120px;
  }

  .sun-ico {
    width: 52px;
    height: 52px;
  }

  /* Hourly carousel responsive */
  .hourly-card {
    min-width: 100%;
  }

  .carousel-arrow.left {
    left: 6px;
  }

  .carousel-arrow.right {
    right: 6px;
  }

  /* Wind card responsive */
  .wind-body {
    flex-direction: column;
    align-items: center;
  }

  .wind-value {
    font-size: 22px;
  }

  .wind-graph-svg {
    height: 40px;
  }

  .wind-meta {
    flex-direction: row;
    gap: 8px;
  }

  /* Summary metrics responsive */
  .summary-inner {
    flex-direction: column;
    gap: 16px;
    padding: 14px;
  }

  .metric {
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 12px;
    width: 100%;
  }

  .metric-icon img,
  .metric-icon svg {
    width: auto;
    height: 60px;
  }

  .metric-value {
    font-size: 18px;
  }

  /* Header responsive */
  .header {
    padding: 11px 20px;
  }

  .header-nav {
    gap: 12px;
  }

  .nav-link {
    font-size: 14px;
    padding: 8px 14px;
  }

  /* Dashboard grid responsive */
  .dashboard-grid {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    gap: clamp(16px, 2vw, 20px);
    padding: clamp(14px, 2vw, 18px);
    padding-bottom: 20px;
    min-height: auto;
    height: auto;
  }

  .grid-card-1,
  .grid-card-2,
  .grid-card-3,
  .grid-card-4,
  .grid-card-5 {
    grid-column: 1;
    grid-row: auto;
  }

  /* Clock card responsive */
  .clock-card {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 24px;
  }

  .clock-face {
    width: 120px;
    height: 120px;
    border-width: 4px;
  }

  .clock-info {
    align-items: center;
  }

  .clock-time {
    font-size: 44px;
  }

  /* Gas page responsive */
  .gas-main {
    padding: 16px;
  }

  .gas-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .gas-schedule-item {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  .gas-schedule-time {
    margin: 0;
  }
}

/* Large desktops / TV-style displays: optimized for distant viewing */
@media (min-width: 1600px) {
  /* Base layout improvements */
  body {
    overflow: hidden;
  }

  .header {
    padding: clamp(12px, 1.2vw, 18px) clamp(32px, 4vw, 60px);
    border-bottom-left-radius: 28px;
    border-bottom-right-radius: 28px;
  }

  .logo-graphic {
    height: clamp(70px, 5vw, 90px);
  }

  .header-nav {
    gap: clamp(20px, 2vw, 32px);
  }

  .nav-link {
    font-size: clamp(16px, 1.3vw, 20px);
    padding: clamp(12px, 1.2vw, 16px) clamp(20px, 2vw, 28px);
    border-radius: 999px;
    min-height: 56px;
  }

  /* Dashboard grid - optimized for large screens */
  .dashboard-grid {
    max-width: 1920px;
    margin: 0 auto;
    padding: clamp(24px, 2.5vw, 40px);
    gap: clamp(24px, 2.5vw, 35px);
    min-height: calc(100vh - 140px);
  }

  /* Enhanced card styling for TV viewing */
  .grid-card-1,
  .grid-card-2,
  .grid-card-3,
  .grid-card-4,
  .grid-card-5 {
    border-radius: 32px;
    box-shadow: 0 20px 50px rgba(13, 71, 161, 0.15);
    padding: clamp(24px, 2.5vw, 32px);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
  }

  .grid-card-1:hover,
  .grid-card-2:hover,
  .grid-card-3:hover,
  .grid-card-4:hover,
  .grid-card-5:hover {
    transform: translateY(-4px);
    box-shadow: 0 24px 60px rgba(13, 71, 161, 0.2);
  }

  /* Grid Card 1 - Main Weather (Enhanced for TV) */
  .grid-card-1 {
    padding: clamp(28px, 3vw, 40px);
  }

  .grid1-greeting {
    font-size: clamp(22px, 2vw, 28px);
    margin-bottom: clamp(20px, 2vw, 28px);
    padding-bottom: clamp(14px, 1.5vw, 20px);
  }

  .grid1-greeting::after {
    font-size: clamp(14px, 1.2vw, 18px);
    margin-top: 8px;
  }

  .grid1-inner {
    gap: clamp(28px, 3vw, 40px);
  }

  .temp-large {
    font-size: clamp(96px, 8vw, 140px);
    line-height: 1;
  }

  .temp-unit {
    font-size: clamp(32px, 3vw, 48px);
    margin-top: clamp(12px, 1.2vw, 18px);
  }

  .sun-list {
    gap: clamp(16px, 1.8vw, 24px);
    margin-top: clamp(8px, 1vw, 12px);
  }

  .sun-item {
    padding: clamp(16px, 1.8vw, 24px) clamp(18px, 2vw, 28px);
    border-radius: 20px;
    gap: clamp(14px, 1.5vw, 20px);
  }

  .sun-ico {
    width: clamp(64px, 5vw, 80px);
    height: clamp(64px, 5vw, 80px);
  }

  .sun-ico img {
    width: auto;
    height: clamp(56px, 4.5vw, 72px);
  }

  .sun-label {
    font-size: clamp(14px, 1.2vw, 18px);
  }

  .sun-time {
    font-size: clamp(24px, 2.2vw, 32px);
  }

  .center-graphic {
    width: clamp(200px, 16vw, 280px);
    height: clamp(200px, 16vw, 280px);
    filter: drop-shadow(0 24px 40px rgba(13, 71, 161, 0.3));
  }

  .center-label {
    font-size: clamp(24px, 2.2vw, 32px);
    margin-top: clamp(12px, 1.2vw, 18px);
  }

  .side-panel {
    padding: clamp(20px, 2.2vw, 28px) clamp(22px, 2.5vw, 32px);
    border-radius: 24px;
    gap: clamp(14px, 1.5vw, 20px);
  }

  .side-location {
    font-size: clamp(18px, 1.6vw, 24px);
  }

  .side-time {
    font-size: clamp(28px, 2.5vw, 36px);
  }

  .side-weather-icon {
    width: clamp(80px, 6vw, 100px);
    height: clamp(80px, 6vw, 100px);
  }

  .side-weather-arrow-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    width: clamp(80px, 6vw, 100px);
    height: clamp(80px, 6vw, 100px);
    margin: 0 auto;
  }

  .side-weather-arrow {
    width: clamp(80px, 6vw, 100px);
    height: clamp(80px, 6vw, 100px);
    transform-origin: center center;
    transition: transform 0.5s ease-out;
  }

  .side-weather {
    gap: clamp(12px, 1.3vw, 16px);
    padding-top: clamp(10px, 1.2vw, 14px);
  }

  .side-wind {
    font-size: clamp(18px, 1.6vw, 24px);
    color: #0D47A1;
    font-weight: 700;
    text-align: center;
    margin: 0;
    line-height: 1.2;
    letter-spacing: 0.02em;
  }

  .side-wind-direction {
    font-size: clamp(15px, 1.3vw, 20px);
    color: #1976D2;
    font-weight: 600;
    text-align: center;
    margin: 0;
    line-height: 1.3;
    text-transform: capitalize;
    opacity: 0.85;
  }

  .side-humidity {
    margin-top: clamp(8px, 1vw, 12px);
    padding-top: clamp(10px, 1.2vw, 14px);
  }

  .side-wind-direction {
    font-size: clamp(16px, 1.4vw, 22px);
    color: #0D47A1;
    font-weight: 700;
    text-align: center;
    margin-bottom: clamp(8px, 1vw, 12px);
    text-transform: capitalize;
  }

  .side-humidity {
    font-size: clamp(16px, 1.4vw, 22px);
  }

  /* Grid Card 2 - Hourly Forecast (Enhanced) */
  .grid-card-2 {
    padding: clamp(24px, 2.5vw, 32px);
  }

  .hourly-header {
    font-size: clamp(22px, 2vw, 28px);
    margin-bottom: clamp(16px, 1.8vw, 24px);
  }

  .hourly-card {
    padding: clamp(24px, 2.5vw, 32px) clamp(20px, 2.2vw, 28px);
    border-radius: 24px;
    gap: clamp(12px, 1.3vw, 18px);
    min-width: calc((100% - 54px) / 3);
  }

  .hourly-time {
    font-size: clamp(18px, 1.6vw, 24px);
  }

  .hourly-icon img {
    width: clamp(80px, 6vw, 100px);
    height: clamp(80px, 6vw, 100px);
  }

  .hourly-temp {
    font-size: clamp(20px, 1.8vw, 26px);
  }

  .hourly-meta {
    font-size: clamp(14px, 1.2vw, 18px);
  }

  .carousel-arrow {
    width: clamp(48px, 4vw, 60px);
    height: clamp(48px, 4vw, 60px);
    font-size: clamp(20px, 1.8vw, 26px);
  }

  /* Grid Card 3 - Clock (Enhanced) */
  .grid-card-3 {
    padding: clamp(28px, 3vw, 40px);
  }

  .clock-card {
    gap: clamp(32px, 3.5vw, 48px);
    padding: clamp(12px, 1.5vw, 20px);
  }

  .clock-face {
    width: clamp(180px, 14vw, 240px);
    height: clamp(180px, 14vw, 240px);
    border-width: clamp(6px, 0.6vw, 8px);
  }

  .clock-hand {
    width: clamp(5px, 0.5vw, 6px);
  }

  .hand-hour {
    height: clamp(54px, 4.5vw, 70px);
  }

  .hand-minute {
    height: clamp(78px, 6.5vw, 100px);
  }

  .clock-center {
    width: clamp(18px, 1.5vw, 22px);
    height: clamp(18px, 1.5vw, 22px);
  }

  .clock-time {
    font-size: clamp(48px, 4.5vw, 64px);
  }

  .clock-date {
    font-size: clamp(20px, 1.8vw, 26px);
  }

  .clock-meta {
    font-size: clamp(18px, 1.6vw, 24px);
  }

  /* Grid Card 4 - Wind (Enhanced) */
  .grid-card-4 {
    padding: clamp(24px, 2.5vw, 32px);
  }

  .wind-title {
    font-size: clamp(24px, 2.2vw, 32px);
  }

  .wind-sub {
    font-size: clamp(16px, 1.4vw, 22px);
    padding: clamp(6px, 0.7vw, 10px) clamp(14px, 1.5vw, 20px);
  }

  .wind-value {
    font-size: clamp(48px, 4.5vw, 64px);
  }

  .wind-unit {
    font-size: clamp(20px, 1.8vw, 26px);
  }

  .wind-direction {
    font-size: clamp(20px, 1.8vw, 26px);
  }

  .wind-arrow {
    width: clamp(64px, 5.5vw, 80px);
    height: clamp(64px, 5.5vw, 80px);
  }

  .wind-graph {
    height: clamp(70px, 6vw, 90px);
  }

  .wind-graph-svg {
    height: clamp(70px, 6vw, 90px);
  }

  .wind-meta {
    gap: clamp(20px, 2.2vw, 28px);
    margin-top: clamp(16px, 1.8vw, 24px);
  }

  .meta-label {
    font-size: clamp(16px, 1.4vw, 22px);
  }

  .meta-value {
    font-size: clamp(22px, 2vw, 28px);
  }

  /* Grid Card 5 - Summary Metrics (Enhanced) */
  .grid-card-5 {
    padding: clamp(28px, 3vw, 40px);
  }

  .summary-inner {
    gap: clamp(24px, 2.5vw, 32px);
    padding: clamp(20px, 2.2vw, 28px) clamp(24px, 2.5vw, 32px);
    border-radius: 28px;
  }

  .metric {
    gap: clamp(12px, 1.3vw, 18px);
  }

  .metric-icon img,
  .metric-icon svg {
    width: auto;
    height: clamp(90px, 7.5vw, 120px);
  }

  .metric-value {
    font-size: clamp(28px, 2.5vw, 36px);
  }

  .metric-label {
    font-size: clamp(18px, 1.6vw, 24px);
  }

  /* Enhanced loading screen for TV */
  .loading-spinner {
    width: clamp(80px, 7vw, 100px);
    height: clamp(80px, 7vw, 100px);
    border-width: clamp(6px, 0.6vw, 8px);
  }

  .loading-text {
    font-size: clamp(32px, 3vw, 40px);
  }

  .loading-subtext {
    font-size: clamp(20px, 1.8vw, 26px);
  }
}

/* Ultra-wide / 4K TV displays (1920px and above) */
@media (min-width: 1920px) {
  .dashboard-grid {
    max-width: 2200px;
    padding: clamp(32px, 3vw, 48px);
    gap: clamp(28px, 3vw, 42px);
  }

  .temp-large {
    font-size: clamp(120px, 9vw, 160px);
  }

  .temp-unit {
    font-size: clamp(40px, 3.5vw, 56px);
  }

  .center-graphic {
    width: clamp(240px, 18vw, 320px);
    height: clamp(240px, 18vw, 320px);
  }

  .clock-face {
    width: clamp(220px, 16vw, 280px);
    height: clamp(220px, 16vw, 280px);
  }

  .clock-time {
    font-size: clamp(56px, 5vw, 72px);
  }
}

/* Very large displays / Digital signage (2560px and above) */
@media (min-width: 2560px) {
  .dashboard-grid {
    max-width: 2400px;
  }

  .header {
    padding: clamp(24px, 2vw, 32px) clamp(48px, 4vw, 80px);
  }

  .nav-link {
    font-size: clamp(20px, 1.8vw, 28px);
    padding: clamp(16px, 1.5vw, 24px) clamp(28px, 2.5vw, 40px);
    min-height: 72px;
  }

  .temp-large {
    font-size: clamp(140px, 10vw, 180px);
  }

  .center-graphic {
    width: clamp(280px, 20vw, 360px);
    height: clamp(280px, 20vw, 360px);
  }

  .clock-face {
    width: clamp(260px, 18vw, 320px);
    height: clamp(260px, 18vw, 320px);
  }
}



/* --- assets/css/components/pages/loading/loading-screen.css --- */
/* Loading Screen */
.loading-screen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    opacity: 1;
    visibility: visible;
    /* Smooth dissolving transition for container */
    transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1),
                visibility 0.6s cubic-bezier(0.4, 0, 0.2, 1),
                backdrop-filter 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    /* Ensure smooth backdrop-filter transition */
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

/* Background layer with smooth dissolve transition */
.loading-screen::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at center, rgba(13, 71, 161, 0.95) 0%, rgba(13, 71, 161, 0.98) 100%);
    z-index: -1;
    opacity: 1;
    /* Smooth background dissolve transition */
    transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.loading-screen.dissolving {
    opacity: 0;
    backdrop-filter: blur(0px);
    -webkit-backdrop-filter: blur(0px);
}

/* Dissolve the background layer */
.loading-screen.dissolving::before {
    opacity: 0;
}

.loading-screen.hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    backdrop-filter: blur(0px);
    -webkit-backdrop-filter: blur(0px);
}

.loading-content {
    text-align: center;
    color: #ffffff;
    /* Content fade-out animation */
    transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1),
                transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    transform: scale(1);
    opacity: 1;
}

.loading-screen.dissolving .loading-content {
    opacity: 0;
    transform: scale(0.95);
}

.loading-spinner {
    width: 64px;
    height: 64px;
    border: 5px solid rgba(255, 255, 255, 0.2);
    border-top-color: #ffffff;
    border-radius: 50%;
    margin: 0 auto 24px;
    animation: spin 1s linear infinite;
    transition: opacity 0.3s ease;
}

.loading-screen.dissolving .loading-spinner {
    animation-play-state: paused;
    opacity: 0;
}

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

.loading-text {
    font-size: clamp(20px, 2.5vw, 28px);
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 8px;
    letter-spacing: 0.02em;
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.loading-screen.dissolving .loading-text {
    opacity: 0;
    transform: translateY(-10px);
}

.loading-subtext {
    font-size: clamp(14px, 1.5vw, 16px);
    font-weight: 500;
    color: rgba(255, 255, 255, 0.85);
    letter-spacing: 0.01em;
    transition: opacity 0.3s ease 0.1s, transform 0.3s ease 0.1s;
}

.loading-screen.dissolving .loading-subtext {
    opacity: 0;
    transform: translateY(-10px);
}

/* --- assets/css/components/navigation/header-nav.css --- */
.header {
    background: radial-gradient(circle at top left, #ffffff 0%, #f5f9ff 40%, #e4f2ff 100%);
    width: 100%;
    /* Force thinner header bar (some responsive files override padding otherwise) */
    padding: 8px clamp(22px, 3.2vw, 44px) 8px clamp(22px, 3.2vw, 44px) !important;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    box-shadow: 0 10px 24px rgba(13, 71, 161, 0.16);
    border-bottom-left-radius: 22px;
    border-bottom-right-radius: 22px;
    border-bottom: 1px solid rgba(13, 71, 161, 0.06);
}

/* Logo: explicit defaults — screen-responsive only sized ≤600px and ≥1600px, leaving mid-range viewports unbounded */
.logo-container {
    flex-shrink: 0;
    min-width: 0;
    display: flex;
    align-items: center;
}

.logo-graphic {
    display: flex;
    align-items: center;
    line-height: 0;
    max-height: 48px !important;
}

.logo-graphic a {
    display: flex;
    align-items: center;
    max-height: inherit;
}

.logo-graphic img {
    display: block;
    width: auto;
    height: auto;
    max-height: 48px !important;
    max-width: min(260px, 42vw);
    object-fit: contain;
}

.header-nav {
    display: flex;
    align-items: center;
    gap: 24px;
}

.nav-link {
    color: #209DD8;
    font-weight: 600;
    font-size: clamp(14px, 1.1vw, 16px);
    text-transform: uppercase;
    text-decoration: none;
    letter-spacing: 0.08em;
    padding: 9px 18px;
    border-radius: 999px;
    border: 1px solid rgba(33, 150, 243, 0.18);
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 6px 14px rgba(33, 150, 243, 0.12);
    transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

/* Icon-only nav links */
.nav-link.nav-icon {
    padding: 7px 10px !important;
    display: flex;
    align-items: center;
    justify-content: center;
}
.nav-link.nav-icon svg {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
}

.nav-link:hover,
.nav-link:focus-visible {
    background-color: #2196F3;
    color: #ffffff;
    border-color: rgba(33, 150, 243, 0.7);
    box-shadow: 0 8px 18px rgba(33, 150, 243, 0.35);
}

.nav-link.active {
    background-color: #2196F3;
    color: #ffffff;
    border-color: rgba(33, 150, 243, 0.7);
    box-shadow: 0 8px 18px rgba(33, 150, 243, 0.35);
}

/* User Dropdown (separate from nav links, not part of auto-rotation) */
.nav-user-dropdown {
    position: relative;
    display: inline-block;
}

.nav-user-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    color: #209DD8;
    font-weight: 600;
    cursor: pointer;
    padding: 7px 12px !important;
    border-radius: 999px;
    border: 1px solid rgba(33, 150, 243, 0.18);
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 6px 14px rgba(33, 150, 243, 0.12);
    transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.nav-user-btn:hover,
.nav-user-btn:focus-visible {
    background-color: #2196F3;
    color: #ffffff;
    border-color: rgba(33, 150, 243, 0.7);
    box-shadow: 0 8px 18px rgba(33, 150, 243, 0.35);
}

.nav-user-btn.active {
    background-color: #2196F3;
    color: #ffffff;
    border-color: rgba(33, 150, 243, 0.7);
    box-shadow: 0 8px 18px rgba(33, 150, 243, 0.35);
}

.nav-user-btn svg {
    flex-shrink: 0;
}

.nav-user-btn .dropdown-arrow {
    transition: transform 0.2s ease;
    width: 14px;
    height: 14px;
}

.nav-user-btn.active .dropdown-arrow {
    transform: rotate(180deg);
}

/* Dropdown Menu */
.nav-dropdown-menu {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 8px;
    background: white;
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(13, 71, 161, 0.2);
    border: 1px solid rgba(33, 150, 243, 0.15);
    min-width: 160px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
    z-index: 1000;
    padding: 8px 0;
    pointer-events: none;
}

.nav-dropdown-menu.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
}

.nav-dropdown-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 18px;
    color: #209DD8;
    text-decoration: none;
    font-weight: 600;
    font-size: 14px;
    letter-spacing: 0.02em;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.nav-dropdown-item:hover,
.nav-dropdown-item:focus {
    background-color: #f5f9ff;
    color: #2196F3;
}

.nav-dropdown-item svg {
    flex-shrink: 0;
    width: 16px;
    height: 16px;
}

/* Responsive */
@media (max-width: 900px) {
    /* Make header use available width and wrap nicely */
    .header {
        flex-wrap: wrap;
        gap: 10px 14px;
        padding: 8px 12px;
    }

    /* Navigation becomes a full-width row */
    .header-nav {
        order: 3;
        width: 100%;
        justify-content: center;
        flex-wrap: wrap;
        gap: 10px 12px;
    }

    /* Keep the user dropdown on the right, same row as logo */
    .nav-user-dropdown {
        order: 2;
        margin-left: auto;
    }

    .logo-container {
        order: 1;
    }
}

@media (max-width: 640px) {
    /* On small screens, allow horizontal scrolling instead of squeezing */
    .header-nav {
        flex-wrap: nowrap;
        justify-content: flex-start;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none; /* Firefox */
        padding-bottom: 4px;
    }

    .header-nav::-webkit-scrollbar {
        display: none;
    }

    .nav-link {
        white-space: nowrap;
        padding: 7px 12px;
        font-size: 13px;
    }

    .nav-link.nav-icon {
        padding: 7px 8px;
    }
    .nav-link.nav-icon svg {
        width: 20px;
        height: 20px;
    }
}

@media (max-width: 768px) {
    .nav-user-btn {
        padding: 8px 10px;
    }
    
    .nav-dropdown-menu {
        right: 0;
        left: auto;
    }
}

/* Short-height displays (e.g. 900x600): compact single-row header */
@media (max-width: 1000px) and (max-height: 680px) {
    .header {
        flex-wrap: nowrap !important;
        gap: 8px !important;
        padding: 6px 14px !important;
        border-bottom-left-radius: 16px;
        border-bottom-right-radius: 16px;
        align-items: center;
    }

    .logo-container {
        order: 1;
        flex: 0 0 auto;
    }

    .logo-graphic {
        max-height: 40px !important;
    }

    .logo-graphic img {
        max-height: 40px !important;
        max-width: min(190px, 34vw);
    }

    .header-nav {
        order: 2;
        width: auto !important;
        margin: 0 auto;
        justify-content: center;
        flex-wrap: nowrap;
        gap: 8px;
    }

    .nav-link.nav-icon {
        padding: 6px 8px !important;
    }

    .nav-link.nav-icon svg {
        width: 18px;
        height: 18px;
    }

    .nav-user-dropdown {
        order: 3;
        margin-left: 0;
        flex: 0 0 auto;
    }

    .nav-user-btn {
        padding: 6px 10px !important;
    }
}

/* Tablet portrait (768x1024 class): keep two rows but tighter */
@media (min-width: 700px) and (max-width: 820px) and (min-height: 900px) {
    .header {
        flex-wrap: nowrap !important;
        align-items: center;
        justify-content: space-between;
        padding: 7px 16px !important;
        gap: 8px !important;
        border-bottom-left-radius: 18px;
        border-bottom-right-radius: 18px;
    }

    .logo-container {
        order: 1;
        flex: 0 0 auto;
    }

    .logo-graphic,
    .logo-graphic img {
        max-height: 40px !important;
    }

    .logo-graphic img {
        max-width: min(200px, 36vw);
    }

    .header-nav {
        order: 2;
        width: auto !important;
        margin: 0 auto;
        justify-content: center;
        flex-wrap: nowrap;
        gap: 8px;
    }

    .nav-user-dropdown {
        order: 3;
        margin-left: 0;
        flex: 0 0 auto;
    }

    .nav-link.nav-icon {
        padding: 6px 8px !important;
    }

    .nav-link.nav-icon svg {
        width: 18px;
        height: 18px;
    }

    .nav-user-btn {
        padding: 6px 10px !important;
    }
}

/* --- assets/css/components/layouts/grid-layout.css --- */
.dashboard-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(6, 1fr);
    gap: clamp(16px, 2vw, 25px);
    padding: clamp(12px, 2vw, 20px);
    min-height: calc(100vh - 120px);
}

.grid-card-1 {
    grid-column: span 2 / span 2;
    grid-row: span 3 / span 3;
    border-radius: 28px;
    padding: 16px 22px 16px;
    background: radial-gradient(circle at top left, #ffffff 0%, #f3f8ff 42%, #e6f2ff 100%);
    box-shadow: 0 14px 35px rgba(13, 71, 161, 0.12);
}

/* Grid 1: Large weather overview layout */
.grid1-greeting {
    font-size: clamp(16px, 1.4vw, 18px);
    font-weight: 700;
    color: #0D47A1;
    margin-bottom: 14px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(13, 71, 161, 0.08);
    display: flex;
    align-items: center;
    justify-content: space-between;
    letter-spacing: 0.01em;
}

.grid1-greeting::after {
    content: "Today • Local Weather";
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: #90A4AE;
}

.grid1-inner { 
    display:flex; 
    gap:20px; align-items:stretch; 
    height:calc(100% - 52px); 
}
.grid1-left { 
    flex:0 0 26%;
    display:flex;
    flex-direction:column;
    gap:20px;
    align-items:flex-start;
    justify-content:flex-start
}

.grid1-center { 
    flex:1 1 48%; 
    display:flex; 
    flex-direction:column; 
    align-items:center; 
    justify-content:center; 
    gap:10px
}

.grid1-side { 
    flex:0 0 24%; 
    display:flex; 
    align-items:center; 
    justify-content:center 
}

.grid-card-2 {
    grid-column: span 2 / span 2;
    grid-row: span 3 / span 3;
    grid-column-start: 1;
    grid-row-start: 4;
    border-radius: 28px;
    /* Slightly reduced vertical padding so the card is a bit shorter */
    padding: 16px 22px 14px;
    background: radial-gradient(circle at top, #ffffff 0%, #f5f9ff 40%, #e8f3ff 100%);
    box-shadow: 0 14px 35px rgba(13, 71, 161, 0.10);
}

.grid-card-3 {
    grid-column: span 2 / span 2;
    grid-row: span 2 / span 2;
    grid-column-start: 3;
    grid-row-start: 1;
    border-radius: 28px;
    /* Restore original padding so the grid size matches the previous layout */
    padding: 20px;
    background: radial-gradient(circle at top, #ffffff 0%, #f4f8ff 40%, #e6f3ff 100%);
    box-shadow: 0 14px 35px rgba(13, 71, 161, 0.10);
    display: flex;
    align-items: center;
    justify-content: center;
}

.grid-card-4 {
    grid-column: span 2 / span 2;
    grid-row: span 2 / span 2;
    grid-column-start: 3;
    grid-row-start: 3;
    border-radius: 26px;
    /* Restore original padding so the grid size matches the previous layout */
    padding: 12px;
    background: radial-gradient(circle at top, #ffffff 0%, #f3f7ff 45%, #e4f1ff 100%);
    box-shadow: 0 14px 35px rgba(13, 71, 161, 0.10);
}

.grid-card-5 {
    grid-column: span 2 / span 2;
    grid-row: span 2 / span 2;
    grid-column-start: 3;
    grid-row-start: 5;
    border-radius: 26px;
    min-height: 240px; /* Set minimum height for cards */
    padding: 40px 32px; /* Increased padding to make card bigger without changing content appearance */
    background: radial-gradient(circle at top, #ffffff 0%, #f5fbff 40%, #e3f5ff 100%);
    box-shadow: 0 14px 35px rgba(13, 71, 161, 0.10);
    display: flex;
    align-items: center;
    justify-content: center;
}

.gas-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: clamp(20px, 3vw, 28px);
}

.nose-kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: clamp(16px, 3vw, 24px);
    margin-bottom: clamp(24px, 3vw, 40px);
}

.nose-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: clamp(20px, 3vw, 28px);
    margin-bottom: clamp(24px, 3vw, 40px);
    align-items: stretch;
}

.nose-secondary-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: clamp(20px, 3vw, 28px);
    margin-bottom: clamp(24px, 4vw, 60px);
}

.schedule-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 12px;
}

/* --- assets/css/components/layouts/cards.css --- */
.hourly-card {
    /* Default width: 3 cards visible on desktop */
    min-width: calc((100% - 36px) / 3);
    min-height: 240px; /* Set minimum height for cards */
    background: linear-gradient(160deg, #f3f7ff 0%, #e0ecff 45%, #f7fbff 100%);
    border-radius: 20px;
    padding: 22px 14px 20px; /* taller vertical padding for a longer card */
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    box-shadow: 0 10px 22px rgba(13, 71, 161, 0.10);
}

.hourly-carousel {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

.hourly-header {
    font-size: clamp(16px, 1.6vw, 20px);
    font-weight: 700;
    color: #0D47A1;
    margin-bottom: 8px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.hourly-track-wrapper {
    width: 100%;
    position: relative;
}

.hourly-track {
    display: flex;
    gap: 18px;
    overflow: hidden;
    scroll-behavior: smooth;
    padding: 10px 6px 6px;
}

.hourly-meta {
    font-size: clamp(13px, 1.3vw, 15px);
    color: #1976D2;
    font-weight: 600;
}

.hourly-info {
    font-size: clamp(12px, 1.2vw, 14px);
    color: #546E7A;
    font-weight: 600;
}

.hourly-time {
    color: #0D47A1;
    font-weight: 700;
    font-size: clamp(14px, 1.5vw, 18px);
}

.hourly-temp {
    color: #0D47A1;
    font-weight: 700;
    font-size: clamp(14px, 1.4vw, 16px);
}

.hourly-icon img { width: 64px; height: 64px; object-fit: contain; }

.carousel-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 36px;
    height: 36px;
    background: rgba(255, 255, 255, 0.96);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 18px rgba(13, 71, 161, 0.18);
    cursor: pointer;
    border: 1px solid rgba(13, 71, 161, 0.08);
    color: #0D47A1;
    font-weight: 700;
}

.carousel-arrow.left { left: -18px; }
.carousel-arrow.right { right: -18px; }

.carousel-dots {
    display:flex;
    gap:8px;
    align-items:center;
    justify-content:center;
    margin-top:10px;
}
.carousel-dots button {
    width:9px;
    height:9px;
    border-radius:999px;
    border:2px solid rgba(13, 71, 161, 0.45);
    background:transparent;
    cursor:pointer;
    transition: background-color 0.18s ease, border-color 0.18s ease, width 0.18s ease;
}
.carousel-dots button.active {
    background:#0D47A1;
    border-color:#0D47A1;
    width:16px;
}

.clock-card {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 32px;
    padding: 8px 6px;
}

.clock-face {
    position: relative;
    width: 136px;
    height: 136px;
    border: 5px solid #2196F3;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: radial-gradient(circle, #ffffff 58%, #e3f2fd 100%);
}

.clock-center {
    position: absolute;
    width: 14px;
    height: 14px;
    background-color: #2196F3;
    border-radius: 50%;
    z-index: 3;
}

.clock-hand {
    position: absolute;
    width: 4px;
    background-color: #2196F3;
    border-radius: 4px;
    transform-origin: bottom center;
    bottom: 50%;
    left: 50%;
    transform: translateX(-50%) rotate(0deg);
}

.hand-hour {
    height: 40px;
    z-index: 2;
}

.hand-minute {
    height: 58px;
    background-color: #1976D2;
    z-index: 1;
}

.clock-info {
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
    margin-left: auto;
    align-items: center;
    text-align: center;
}

.clock-time {
    font-size: clamp(28px, 3.2vw, 44px);
    font-weight: 700;
    color: #0D47A1;
    line-height: 1;
    letter-spacing: 0.02em;
}

.clock-date {
    font-size: clamp(14px, 1.6vw, 18px);
    font-weight: 600;
    color: #1976D2;
}

.clock-meta {
    font-size: clamp(13px, 1.4vw, 16px);
    color: #1E88E5;
}

.clock-location {
    font-weight: 600;
}

.wind-card { 
    display:flex; 
    flex-direction:column; 
    height:100%; 
    gap:14px 
}

.wind-header { 
    display:flex; 
    justify-content:space-between; 
    align-items:center 
}

.wind-title { 
    font-size:18px; 
    font-weight:800; 
    color:#0D47A1; 
    letter-spacing:0.04em; 
    text-transform:uppercase 
}

.wind-sub { 
    font-size:13px; 
    color:#1976D2; 
    font-weight:700; 
    text-transform:uppercase; 
    letter-spacing:0.12em 
}

.wind-body { 
    display:flex; 
    gap:10px; 
    align-items:center 
}

.wind-main { 
    display:flex; 
    flex-direction:column; 
    gap:4px;
     min-width:120px 
}

.wind-value { 
    font-size:28px; 
    font-weight:800; 
    color:#0D47A1
}

.wind-unit { 
    font-size:14px; 
    font-weight:700; 
    margin-left:4px 
}

.wind-direction { 
    font-weight:700; 
    color:#1976D2 
}

.wind-visual { 
    display:flex; 
    flex-direction:column; 
    gap:6px; 
    align-items:center; 
    flex:1 
}

.wind-arrow-wrap { 
    display:flex; 
    align-items:center; 
    justify-content:center 
}

.wind-arrow { 
    width:auto; 
    height:50px; 
    transform-origin:12px 12px; 
    transition:transform 500ms ease 
}

.wind-graph { 
    width:100%; 
    max-width:560px; 
    height:60px 
}

.wind-graph-svg { 
    width:100%; 
    height:77px; 
    display:block 
}
.wind-meta { 
    display:flex; 
    gap:14px; 
    justify-content:space-between; 
    margin-top:auto 
}

.meta-item { 
    display:flex; 
    flex-direction:column; 
    gap:6px; 
    align-items:flex-start 
}

.meta-label { 
    font-size:12px; 
    color:#1976D2; 
    font-weight:700 
}

.meta-value { 
    font-size:16px; 
    color:#0D47A1; 
    font-weight:800 
}



/* --- assets/css/components/layouts/dashboard.css --- */
/* Ensure consistent scaling for TV displays */
.dashboard-container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 90vw; /* Adjust width relative to viewport */
    height: calc(90vw * 9 / 16); /* Maintain 16:9 aspect ratio */
    max-height: 90vh; /* Ensure it fits within the viewport height */
    max-width: calc(90vh * 16 / 9); /* Ensure it fits within the viewport width */
}

/* Scale content inside the dashboard */
.dashboard-grid {
    transform: scale(1);
    transform-origin: center top;
    width: 100%;
    height: 100%;
}