/* ============================================
   Aviation Wind Compass + Speed Gauge Widget
   Inspired by HSI/Gyro Compass instrumentation
   ============================================ */

/* === MAIN CONTAINER === */
.wind-widget {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    width: 100%;
    padding: 0.2rem 0;
}

/* === COMPASS === */
.wind-compass {
    position: relative;
    width: 170px;
    height: 170px;
    flex-shrink: 0;
}

.wind-compass svg {
    width: 100%;
    height: 100%;
    display: block;
}

/* Compass ring */
.compass-ring {
    fill: none;
    stroke: rgba(255, 255, 255, 0.15);
    stroke-width: 1;
}

.compass-ring-outer {
    fill: none;
    stroke: rgba(255, 255, 255, 0.25);
    stroke-width: 1.5;
}

/* Tick marks */
.compass-tick {
    stroke: rgba(255, 255, 255, 0.3);
    stroke-width: 1;
}

.compass-tick-major {
    stroke: rgba(255, 255, 255, 0.6);
    stroke-width: 1.5;
}

/* Heading labels (N, 3, 6, E, etc.) */
.compass-label {
    fill: rgba(255, 255, 255, 0.45);
    font-family: var(--font-main);
    font-size: 9px;
    font-weight: 600;
    text-anchor: middle;
    dominant-baseline: central;
}

.compass-label-cardinal {
    fill: rgba(255, 255, 255, 0.8);
    font-family: var(--font-main);
    font-size: 11px;
    font-weight: 700;
    text-anchor: middle;
    dominant-baseline: central;
}

.compass-label-north {
    fill: var(--accent-red);
    font-size: 12px;
    font-weight: 800;
}

/* Fixed heading triangle (like HSI lubber line) */
.compass-lubber {
    fill: white;
}

/* === RUNWAY === */
.runway-graphic {
    transition: none;
}

.runway-body {
    fill: #1a1a1a;
    stroke: rgba(255, 255, 255, 0.3);
    stroke-width: 0.5;
}

.runway-centerline {
    stroke: white;
    stroke-width: 1;
    stroke-dasharray: 4 3;
}

.runway-threshold {
    stroke: white;
    stroke-width: 2;
}

.runway-label {
    fill: white;
    font-family: var(--font-display);
    font-size: 7px;
    font-weight: 700;
    text-anchor: middle;
    dominant-baseline: central;
}

/* === WIND ARROW (Triangles) === */
.wind-arrow-group {
    transition: transform 1s cubic-bezier(0.4, 0.0, 0.2, 1);
}

.wind-arrow-main {
    fill: white;
    filter: drop-shadow(0 0 3px rgba(255, 255, 255, 0.5));
}

.wind-arrow-tail {
    fill: white;
    opacity: 0.7;
}

/* Line from center */
.wind-line {
    stroke: rgba(255, 255, 255, 0.4);
    stroke-width: 0.8;
}

/* Center dot */
.compass-center {
    fill: var(--text-primary);
    stroke: rgba(0, 0, 0, 0.5);
    stroke-width: 1;
}

/* === WIND GAUGE (Speed) === */
.wind-gauge {
    position: relative;
    width: 100px;
    height: 170px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.wind-gauge svg {
    width: 100%;
    height: auto;
    display: block;
}

.gauge-arc-bg {
    fill: none;
    stroke: rgba(255, 255, 255, 0.08);
    stroke-width: 6;
    stroke-linecap: round;
}

.gauge-arc-green {
    fill: none;
    stroke: var(--accent-green);
    stroke-width: 4;
    stroke-linecap: round;
    opacity: 0.4;
}

.gauge-arc-amber {
    fill: none;
    stroke: var(--accent-amber);
    stroke-width: 4;
    stroke-linecap: round;
    opacity: 0.4;
}

.gauge-arc-red {
    fill: none;
    stroke: var(--accent-red);
    stroke-width: 4;
    stroke-linecap: round;
    opacity: 0.4;
}

.gauge-tick {
    stroke: rgba(255, 255, 255, 0.25);
    stroke-width: 0.8;
}

.gauge-tick-major {
    stroke: rgba(255, 255, 255, 0.5);
    stroke-width: 1.2;
}

.gauge-label {
    fill: rgba(255, 255, 255, 0.5);
    font-family: var(--font-main);
    font-size: 8px;
    font-weight: 600;
    text-anchor: middle;
    dominant-baseline: central;
}

.gauge-unit {
    fill: rgba(255, 255, 255, 0.5);
    font-family: var(--font-main);
    font-size: 9px;
    font-weight: 600;
    text-anchor: middle;
}

.gauge-needle {
    transition: transform 1s cubic-bezier(0.4, 0.0, 0.2, 1);
}

.gauge-needle-bar {
    fill: white;
    filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.5));
}

.gauge-needle-cap {
    fill: #333;
    stroke: rgba(255, 255, 255, 0.4);
    stroke-width: 0.5;
}

/* Speed value display */
.gauge-value-display {
    fill: var(--accent-blue);
    font-family: var(--font-display);
    font-size: 16px;
    font-weight: 700;
    text-anchor: middle;
    dominant-baseline: central;
}

/* === WIND COMPONENTS BAR === */
.wind-components {
    display: flex;
    gap: 0.5rem;
    justify-content: center;
    align-items: center;
    font-size: 0.6rem;
    color: var(--text-secondary);
    margin-top: 0.15rem;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    padding-top: 0.2rem;
}

.wind-component-item {
    display: flex;
    align-items: center;
    gap: 3px;
    font-family: var(--font-main);
    white-space: nowrap;
}

.wind-component-icon {
    font-size: 0.7rem;
    opacity: 0.7;
}

.wind-component-value {
    font-weight: 700;
    color: var(--text-primary);
    font-family: var(--font-display);
    font-size: 0.7rem;
}

/* === LIGHT THEME OVERRIDES === */
body.light-theme .compass-ring {
    stroke: rgba(0, 0, 0, 0.12);
}

body.light-theme .compass-ring-outer {
    stroke: rgba(0, 0, 0, 0.2);
}

body.light-theme .compass-tick {
    stroke: rgba(0, 0, 0, 0.15);
}

body.light-theme .compass-tick-major {
    stroke: rgba(0, 0, 0, 0.35);
}

body.light-theme .compass-label {
    fill: rgba(0, 0, 0, 0.4);
}

body.light-theme .compass-label-cardinal {
    fill: rgba(0, 0, 0, 0.7);
}

body.light-theme .compass-label-north {
    fill: var(--accent-red);
}

body.light-theme .compass-lubber {
    fill: #1e293b;
}

body.light-theme .runway-body {
    fill: #374151;
    stroke: rgba(0, 0, 0, 0.3);
}

body.light-theme .runway-centerline {
    stroke: #e5e7eb;
}

body.light-theme .runway-threshold {
    stroke: #e5e7eb;
}

body.light-theme .runway-label {
    fill: #e5e7eb;
}

body.light-theme .wind-arrow-main {
    fill: #1e293b;
    filter: drop-shadow(0 0 3px rgba(0, 0, 0, 0.2));
}

body.light-theme .wind-arrow-tail {
    fill: #374151;
}

body.light-theme .wind-line {
    stroke: rgba(0, 0, 0, 0.2);
}

body.light-theme .compass-center {
    fill: #1e293b;
    stroke: rgba(0, 0, 0, 0.2);
}

body.light-theme .gauge-arc-bg {
    stroke: rgba(0, 0, 0, 0.06);
}

body.light-theme .gauge-tick {
    stroke: rgba(0, 0, 0, 0.15);
}

body.light-theme .gauge-tick-major {
    stroke: rgba(0, 0, 0, 0.3);
}

body.light-theme .gauge-label {
    fill: rgba(0, 0, 0, 0.45);
}

body.light-theme .gauge-unit {
    fill: rgba(0, 0, 0, 0.45);
}

body.light-theme .gauge-needle-bar {
    fill: #1e293b;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.2));
}

body.light-theme .gauge-needle-cap {
    fill: #9ca3af;
    stroke: rgba(0, 0, 0, 0.2);
}

body.light-theme .gauge-value-display {
    fill: var(--accent-blue);
}

/* === HIGH RESOLUTION (2560x1600) === */
@media (min-width: 2500px) {
    .wind-compass {
        width: 220px;
        height: 220px;
    }

    .wind-gauge {
        width: 120px;
        height: 220px;
    }

    .compass-label {
        font-size: 11px;
    }

    .compass-label-cardinal {
        font-size: 13px;
    }

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

    .gauge-value-display {
        font-size: 20px;
    }

    .wind-components {
        font-size: 0.7rem;
    }

    .wind-component-value {
        font-size: 0.8rem;
    }
}