/* File: /public-widgets/weatherStnWidget/weatherStnWidget.css */
/* Production Release 1.3 */

/* ============================================================
   Weather Station Widget — Light Theme
   Scoped under .weatherStationWidget-root
   ============================================================ */

.weatherStationWidget-root {
    --wsw-scale: 1;

    --wsw-wind-breaks: 0, 10, 20, 30, 40;
    --wsw-wind-colors: #00ff00, #aaff00, #ffff00, #ff9900, #ff0000;

    font-family: Arial, sans-serif;
    display: inline-block;
}

/* ============================================================
   Card Layout
   ============================================================ */

.weatherStationWidget-root .wsw-card {
    background: #ffffff;
    color: #000000;
    border-radius: 8px;
    padding: 10px 12px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.1);

    width: calc(320px * var(--wsw-scale));
    box-sizing: border-box;
}

/* ============================================================
   Header
   ============================================================ */

.weatherStationWidget-root .wsw-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: calc(8px * var(--wsw-scale));
}

/* Station name styled like Windguru/Windy links */
.weatherStationWidget-root .wsw-station-name a,
.weatherStationWidget-root .wsw-station-name a:link,
.weatherStationWidget-root .wsw-station-name a:visited {
    color: #0077cc !important;
    text-decoration: none !important;
    cursor: pointer;
}

.weatherStationWidget-root .wsw-station-name a:hover,
.weatherStationWidget-root .wsw-station-name a:active {
    text-decoration: underline !important;
}

.weatherStationWidget-root .wsw-station-name {
    font-size: calc(24px * var(--wsw-scale));
    font-weight: bold;
    text-align: center;
    width: 100%;
}

/* ============================================================
   Compass Container
   ============================================================ */

.weatherStationWidget-root .wsw-widget-container {
    display: flex;
    justify-content: center;
    margin-bottom: calc(10px * var(--wsw-scale));
}

.weatherStationWidget-root .wsw-compass {
    width: calc(300px * var(--wsw-scale));
    height: calc(300px * var(--wsw-scale));
    position: relative;
}

/* ============================================================
   Bubble Tooltip (UPDATED POSITION)
   ============================================================ */

.weatherStationWidget-root .wsw-tooltip-bubble {
    position: absolute;
    padding: 6px 10px;
    background: rgba(255,255,255,0.95);
    color: #000;
    border-radius: 6px;
    font-size: calc(14px * var(--wsw-scale));
    pointer-events: none;
    opacity: 0;
    white-space: nowrap;
    transform: translate(0, 0);
    transition: opacity 0.15s ease;
    z-index: 50;
}

.weatherStationWidget-root .wsw-tooltip-bubble.visible {
    opacity: 1;
}

/* ============================================================
   Metrics Layout
   ============================================================ */

.weatherStationWidget-root .wsw-metrics {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: calc(14px * var(--wsw-scale));
}

.weatherStationWidget-root .wsw-atmos-row {
    width: 100%;
    display: flex;
    justify-content: center;
    gap: calc(40px * var(--wsw-scale));
    margin-top: -3%;
}

.weatherStationWidget-root .wsw-atmos-row.two-visible {
    justify-content: space-between;
    padding: 0 calc(80px * var(--wsw-scale));
}

.weatherStationWidget-root .wsw-atmos-row.one-visible {
    justify-content: center;
}

.weatherStationWidget-root .wsw-metric {
    text-align: center;
    pointer-events: auto;
}

.weatherStationWidget-root .wsw-label {
    font-size: calc(16px * var(--wsw-scale));
    opacity: 0.1;
}

.weatherStationWidget-root .wsw-value {
    font-size: calc(18px * var(--wsw-scale));
    font-weight: bold;
}

.weatherStationWidget-root .wsw-metric .wsw-value:empty {
    opacity: 0;
}

.weatherStationWidget-root .wsw-metric .wsw-value:empty ~ .wsw-label {
    opacity: 0;
    pointer-events: none;
}

.weatherStationWidget-root .wsw-metric:hover .wsw-label {
    opacity: 0.5;
}

.weatherStationWidget-root .wsw-countdown-line {
    font-size: calc(15px * var(--wsw-scale));
    font-weight: 600;
    text-align: center;
}

.weatherStationWidget-root .wsw-countdown-line.negative {
    color: #d50000;
}

/* ============================================================
   Links
   ============================================================ */

.weatherStationWidget-root .wsw-links {
    display: flex;
    justify-content: center;
    gap: calc(60px * var(--wsw-scale));
    font-size: calc(14px * var(--wsw-scale));
}

.weatherStationWidget-root .wsw-link {
    color: #0077cc;
    text-decoration: none;
}

.weatherStationWidget-root .wsw-link:hover {
    text-decoration: underline;
}

/* ============================================================
   Battery
   ============================================================ */

.weatherStationWidget-root .wsw-battery {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    position: relative;
    gap: 0;
}

.weatherStationWidget-root .wsw-battery-case {
    border-radius: calc(6px * var(--wsw-scale));
    border: calc(3px * var(--wsw-scale)) solid #444;
    padding: calc(1px * var(--wsw-scale));
    width: calc(100px * var(--wsw-scale));
    height: calc(28px * var(--wsw-scale));
    box-sizing: border-box;
    position: relative;
    overflow: hidden;
}

.weatherStationWidget-root .wsw-battery-bar {
    height: 100%;
    width: 0%;
    border-radius: calc(2px * var(--wsw-scale));
    background-color: #04AA6D;
    transition: width 0.3s ease, background 0.3s ease;
}

.weatherStationWidget-root .wsw-battery-bump {
    border-radius: calc(5px * var(--wsw-scale));
    background-color: #444;
    width: calc(5px * var(--wsw-scale));
    height: calc(16px * var(--wsw-scale));
    margin-left: 0;
}

/* Updated battery tooltip position */
.weatherStationWidget-root .wsw-battery-tooltip {
    position: absolute;
/*    top: calc(-28px * var(--wsw-scale));
    left: calc(-100px * var(--wsw-scale)); */
    font-size: calc(12px * var(--wsw-scale));
    background: transparent;
    padding: 4px 6px;
    border-radius: 4px;
    opacity: 0;
    transition: opacity 0.2s ease;
    white-space: nowrap;
    pointer-events: none;
}

.weatherStationWidget-root .wsw-battery:hover .wsw-battery-tooltip {
    opacity: 1;
}

/* ============================================================
   Compass SVG
   ============================================================ */

.weatherStationWidget-root .wg-compass-svg {
    width: 100%;
    height: 100%;
    display: block;
}

.weatherStationWidget-root .wg-ring {
    stroke: #555;
    stroke-width: 1;
    fill: none;
}

.weatherStationWidget-root .wg-cardinal-line {
    stroke: #555;
    stroke-width: 2;
}

.weatherStationWidget-root .wg-cardinal-label {
    fill: #555;
    font-family: sans-serif;
    font-size: calc(8px + (4px * var(--wsw-scale)));
}

.weatherStationWidget-root .wg-dot {
    fill: #555;
}

.weatherStationWidget-root .wg-arc {
    fill: none;
    stroke-width: 14px;
    stroke-linecap: butt;
}

.weatherStationWidget-root .wg-arc-dirMarg {
    stroke: #ffc900;
}

.weatherStationWidget-root .wg-arc-dirBad {
    stroke: #FFD0D0;
}

.weatherStationWidget-root .wg-arc-dirGood {
    stroke: #04AA6D;
}

.weatherStationWidget-root .wg-wind-arrow {
    transition: transform 0.25s ease-out;
}

.weatherStationWidget-root .wg-arrow-fill {
    fill: #444;
    transition: fill 0.25s ease-out;
}

.weatherStationWidget-root .wg-arrow-outline {
    stroke: #444;
    fill: none;
    transition: stroke 0.25s ease-out;
}

.weatherStationWidget-root .wsw-compass svg {
    background: transparent;
}

/* ============================================================
   Compass Overlay (Big Four)
   ============================================================ */

.weatherStationWidget-root .wsw-overlay {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.weatherStationWidget-root .wsw-ov-block {
    position: absolute;
    text-align: center;
    pointer-events: auto;
}

.weatherStationWidget-root .wsw-ov-label {
    font-size: calc(16px * var(--wsw-scale));
    opacity: 0.1;
    transition: opacity 0.2s ease;
    margin-bottom: 0px;
}

.weatherStationWidget-root .wsw-ov-block:hover .wsw-ov-label {
    opacity: 0.5;
}

.weatherStationWidget-root .wsw-ov-value {
    font-size: calc(24px * var(--wsw-scale));
    font-weight: 600;
    color: #000;
}

.weatherStationWidget-root .wsw-ov-speed {
    top: 5%;
    left: 5%;
}

.weatherStationWidget-root .wsw-ov-dir {
    top: 5%;
    right: 5%;
}

.weatherStationWidget-root .wsw-ov-gust {
    bottom: 5%;
    left: 5%;
}

.weatherStationWidget-root .wsw-ov-temp {
    bottom: 5%;
    right: 5%;
}

.weatherStationWidget-root .wsw-label.wsw-hidden-label {
    opacity: 0;
    pointer-events: none;
}

.weatherStationWidget-root.wsw-stale {
    opacity: 0.3;
}