body {
    font-family: Inter, sans-serif;
    margin: 8px;
    --c-bg-sidebar: rgb(246, 247, 249);    /* nav sidebar and tabs background */
    --c-bg-main: rgb(239, 241, 244);       /* main panel background */
    --c-bg-tabpanel: rgb(255, 255, 255);   /* tab panel background */
    --c-bg-highlight: var(--c-bg-main);
    --c-text: rgb(22, 28, 39);             /* most small "black" text */
    --c-header-text: rgb(22, 28, 39);      /* same as --c-text in mode:light */
    --c-link-text: rgb(3, 99, 166);        /* urls */
    --c-text-dim: rgb(107, 114, 128);      /* tab titles / text on tabs */
    --c-text-dimmer: rgba(0, 0, 0, 0.5);   /* semi-headers or dim body text */
    --c-border: rgb(221, 223, 228);        /* hr color */
    --c-c7-blue: hsl(204, 71%, 49%);

    --c-fill-sun: hsl(45, 99%, 69%); /*rgb(254, 216, 97); #f5b952 */
    --c-fill-moon: #ead88c;
    --c-fill-cloud: hsl(206, 71%, 88%); /*#cae3f6; */
    --c-fill-cloud-circle: hsl(206, 71%, 50%);
    --c-fill-sun-circle: hsl(45, 99%, 50%); /*rgb(254, 216, 97); #f5b952 */

    --c-svg-stroke: var(--c-text);
    --c-svg-outline: var(--c-header-text);
    --c-svg-fog: var(--c-text-dimmer);

    --c-temp-chart-min-line: hsl(from var(--c-c7-blue) h s 73%);
    --c-temp-chart-max-line: var(--c-fill-sun);
    --c-temp-chart-min-dot: var(--c-temp-chart-min-line);
    --c-temp-chart-max-dot: var(--c-temp-chart-max-line);
    --c-temp-chart-zone-hot: rgba(220, 53, 69, .20);
    --c-temp-chart-zone-cold: hsla(from var(--c-c7-blue) h 95% 90% / 0.5);

    font-family: Inter, sans-serif;
    margin: 8px;

    color: var(--c-text);
}

body[data-theme="dark"] {
    --c-bg-sidebar: rgb(18, 23, 33);
    --c-bg-main: hsl(220, 23.7%, 14.9%); /* rgb(29, 35, 47); */
    --c-bg-tabpanel: rgb(22, 28, 39);
    --c-bg-highlight: hsl(220, 23.7%, 25%); /* rgb(29, 35, 47); */
    --c-text: rgba(239, 241, 244);
    --c-header-text: rgb(255, 255, 255);
    --c-link-text: rgb(66, 172, 240);
    --c-text-dim: rgb(157, 163, 174);
    --c-text-dimmer: rgb(255, 255, 255, 0.6);

    --c-border: rgb(77, 83, 97);

    --c-fill-sun: rgba(0, 0, 0, 0); /* var(--c-bg-tabpanel) */;
    --c-fill-cloud: var(--c-bg-main);

    --c-temp-chart-min-line: var(--c-text-dim);
    --c-temp-chart-max-line: var(--c-text);
    --c-temp-chart-min-dot: var(--c-temp-chart-min-line);
    --c-temp-chart-max-dot: var(--c-temp-chart-max-line);
    --c-temp-chart-zone-hot: rgba(220, 53, 69, .3);
    --c-temp-chart-zone-cold: hsla(from var(--c-c7-blue) h 95% 90% / 0.18);
}

table {
    border-collapse: collapse;
}

th, td {
    padding: 4px 8px;
    text-align: left;
}

th {
    border-bottom: 1px solid var(--c-border);
}

div.weather-forecast {
    display: grid;
    align-items: stretch;
    justify-content: start;

    --weather-row-index: 6;

    @media only screen and (min-width: 50rem) {
        max-width: 50rem;
        padding-left: 3rem;
        grid-template-columns: repeat(10, 1fr);
        justify-items: start;

        div.weather-chart {
            grid-row: var(--weather-row-index);
            grid-column: 1 / -1;
            z-index: 3;

            padding: 0em;
            pointer-events: none;
    
            svg {
                pointer-events: none;
            }
        }
    
        div.chart-overlay {
            grid-row: var(--weather-row-index);
            z-index: 2;
        }
    }
    @media only screen and (max-width: calc(50rem - 1px)) {
        max-width: 20rem;
        padding-left: .5rem;
        grid-template-rows: repeat(10, 4rem);
        grid-auto-flow: column;
        align-items: stretch;

        & > * {
            /* center the text vertically, but fill the whole grid cell */
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .forecast-icon {
            padding: .65rem;
        }

        div.weather-chart-labels,
        div.weather-chart,
        div.chart-overlay,
        div.day2 {
            display: none;
        }
    }

    div {
        box-sizing: border-box;
        padding: .3em;
        text-align: center;
        vertical-align: top;
        cursor: pointer;
        width: 5em;

        &.selected {
            background-color: var(--c-bg-highlight);
        }
    }

    div.temp-cell {
        --temp-inset: .75em;

        position: relative;
        padding-top: 0em;
        padding-bottom: 0em;

        .temp-max {
            font-weight: bold;
        }

        .temp-min {
            color: var(--c-text-dim);
        }
    }

    .alert-icon {
        display: inline-block;
        width: 1.5em;
        height: 1.5em;
        vertical-align: middle;
        margin: 0.15em;
        margin: 0.15em;
    }

    .alert-details {
        margin-bottom: 0.5em;
    }

    &:has(.col-0:hover) .col-0,
    &:has(.col-1:hover) .col-1,
    &:has(.col-2:hover) .col-2,
    &:has(.col-3:hover) .col-3,
    &:has(.col-4:hover) .col-4,
    &:has(.col-5:hover) .col-5,
    &:has(.col-6:hover) .col-6,
    &:has(.col-7:hover) .col-7,
    &:has(.col-8:hover) .col-8,
    &:has(.col-9:hover) .col-9 {
        background-color: var(--c-bg-highlight);
    }
}

.alert-panel {
    margin-top: 8px;
    padding: 8px;

    .alert-details {
        border-top: 1px solid var(--c-border);
    }
}


/* Settings form styles */
.settings-form {
    max-width: 30rem;
    padding: 0 0.5rem;
}

.settings-form h3 {
    margin-top: 0;
}

.settings-field {
    margin-bottom: 1rem;
    border: none;
    padding: 0;
}

fieldset.settings-field {
    border: 1px solid var(--c-border);
    border-radius: 4px;
    padding: 0.5rem 1rem;

    legend {
        font-weight: 500;
        padding: 0 0.25rem;
    }
}

.settings-field label {
    display: block;
    font-weight: 500;
    margin-bottom: 0.25rem;
}

.settings-field .radio-option {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 400;
    padding: 0.25rem 0;
    cursor: pointer;
}

.settings-field input[type="number"],
.settings-field input[type="text"] {
    width: 100%;
    padding: 0.4rem 0.5rem;
    border: 1px solid var(--c-border);
    border-radius: 4px;
    background: var(--c-bg-tabpanel);
    color: var(--c-text);
    font-size: 0.9rem;
    box-sizing: border-box;
}

.settings-save-btn {
    background: var(--c-c7-blue);
    color: white;
    border: none;
    border-radius: 4px;
    padding: 0.5rem 1.5rem;
    font-size: 0.9rem;
    cursor: pointer;
}

.settings-save-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.settings-message {
    margin-top: 0.75rem;
    padding: 0.5rem 0.75rem;
    border-radius: 4px;
    font-size: 0.85rem;
}

.settings-message.success {
    background: hsla(120, 40%, 50%, 0.15);
    color: hsl(120, 40%, 35%);
}

.settings-message.error {
    background: hsla(0, 60%, 50%, 0.15);
    color: hsl(0, 60%, 40%);
}

body[data-theme="dark"] .settings-message.success {
    background: hsla(120, 40%, 50%, 0.2);
    color: hsl(120, 40%, 65%);
}

body[data-theme="dark"] .settings-message.error {
    background: hsla(0, 60%, 50%, 0.2);
    color: hsl(0, 60%, 70%);
}

/* Weather icon styles */
.wi-sun {
    fill: var(--c-fill-sun);
}
.wi-moon {
    fill: var(--c-fill-moon);
}
.wi-cloud {
    fill: var(--c-fill-cloud);
}
.wi-stroke-4 {
    fill: none;
    stroke: var(--c-svg-stroke);
    stroke-miterlimit: 10;
    stroke-width: 4px;
}
.wi-stroke-4-sq {
    fill: none;
    stroke: var(--c-svg-stroke);
    stroke-miterlimit: 10;
    stroke-width: 4px;
    stroke-linecap: square;
}
.wi-outline {
    fill: none;
    stroke: var(--c-svg-outline);
    stroke-miterlimit: 10;
    stroke-width: 4px;
}
.wi-stroke-3 {
    fill: none;
    stroke: var(--c-svg-stroke);
    stroke-miterlimit: 10;
    stroke-width: 3px;
}
.wi-stroke-3-round {
    fill: none;
    stroke: var(--c-svg-stroke);
    stroke-miterlimit: 10;
    stroke-width: 3px;
    stroke-linecap: round;
}
.wi-stroke-1h {
    fill: none;
    stroke: var(--c-svg-stroke);
    stroke-miterlimit: 10;
    stroke-width: 1.5px;
}
.wi-stroke-2 {
    fill: none;
    stroke: var(--c-svg-stroke);
    stroke-miterlimit: 10;
    stroke-width: 2px;
}
.wi-fog {
    fill: none;
    stroke: var(--c-svg-fog);
    stroke-width: 2.5px;
    stroke-linecap: round;
    stroke-miterlimit: 10;
}
.wi-lucide {
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Temperature chart styles */
.temp-chart {
    --labels-width: 3em;
    width: calc(var(--labels-width) + 50em);
    margin-left: calc(-1 * var(--labels-width));
    height: auto;
    margin-top: 12px;
 
    line.grid {
        stroke: var(--c-border);
        stroke-width: 1px;
    }

    line.axis {
      stroke: var(--c-svg-outline);
      stroke-width: 2px;
    }

    text {
        fill: var(--c-text-dim);
        font-size: 10px;
    }

    polyline {
        fill: none;
        stroke-width: 2.5px;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

    .mintemp polyline {
        stroke: var(--c-temp-chart-min-line);
    }

    .maxtemp polyline {
        stroke: var(--c-temp-chart-max-line);
    }

    circle.chart-dot {
        stroke: var(--c-svg-outline);
        stroke-width: 1px;
    }
    .mintemp circle.chart-dot {
        fill: var(--c-temp-chart-min-dot);
    }

    .maxtemp circle.chart-dot {
        fill: var(--c-temp-chart-max-dot);
    }

    rect.zone-hot {
        fill: var(--c-temp-chart-zone-hot);
    }

    rect.zone-cold {
        fill: var(--c-temp-chart-zone-cold);
    }
}