/* LoopWeer redesign styles */

/* ── Light theme (default) ── */
:root {
    --background: 0 0% 96%;
    --foreground: 220 20% 14%;
    --border: 220 13% 88%;
    --card: 0 0% 100%;
    --card-foreground: 220 20% 14%;
    /* primary = #0188ec */
    --primary: 205 98% 46%;
    --primary-foreground: 0 0% 100%;
    /* accent = #f84819 */
    --accent: 18 94% 53%;
    --accent-foreground: 0 0% 100%;
    --muted: 220 13% 92%;
    --muted-foreground: 220 9% 46%;
    --ring: 205 98% 46%;
    --input: 220 13% 88%;
    --radius: 0.75rem;
    --app-font-sans: "Inter", sans-serif;
    --color-gray-400: oklch(70.7% 0.022 261.325);
    --color-orange-100: oklch(95.4% 0.038 75.164);
    --color-orange-600: oklch(64.6% 0.222 41.116);
    --color-yellow-100: oklch(97.3% 0.071 103.193);
    --color-yellow-600: oklch(68.1% 0.162 75.834);
    --color-purple-100: oklch(94.6% 0.033 307.174);
    --color-purple-600: oklch(55.8% 0.288 302.321);
    --color-blue-500: oklch(62.3% 0.214 259.815);
}

/* ── Dark theme ── */
[data-theme="dark"] {
    --background: 220 20% 10%;
    --foreground: 210 20% 92%;
    --border: 220 13% 22%;
    --card: 220 18% 15%;
    --card-foreground: 210 20% 92%;
    /* primary = #0188ec slightly brightened */
    --primary: 205 98% 50%;
    --primary-foreground: 0 0% 100%;
    /* accent = #f84819 */
    --accent: 18 94% 53%;
    --accent-foreground: 0 0% 100%;
    --muted: 220 15% 20%;
    --muted-foreground: 220 10% 58%;
    --ring: 205 98% 50%;
    --input: 220 13% 22%;
    --color-orange-100: oklch(25% 0.04 55);
    --color-orange-600: oklch(72% 0.18 45);
    --color-yellow-100: oklch(24% 0.04 100);
    --color-yellow-600: oklch(78% 0.14 80);
    --color-purple-100: oklch(24% 0.04 307);
    --color-purple-600: oklch(68% 0.22 302);
}

/* ── Auto dark (browser default) when no explicit choice is stored ── */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]):not([data-theme="dark"]) {
        --background: 220 20% 10%;
        --foreground: 210 20% 92%;
        --border: 220 13% 22%;
        --card: 220 18% 15%;
        --card-foreground: 210 20% 92%;
        --primary: 205 98% 50%;
        --primary-foreground: 0 0% 100%;
        --accent: 18 94% 53%;
        --accent-foreground: 0 0% 100%;
        --muted: 220 15% 20%;
        --muted-foreground: 220 10% 58%;
        --ring: 205 98% 50%;
        --input: 220 13% 22%;
        --color-orange-100: oklch(25% 0.04 55);
        --color-orange-600: oklch(72% 0.18 45);
        --color-yellow-100: oklch(24% 0.04 100);
        --color-yellow-600: oklch(78% 0.14 80);
        --color-purple-100: oklch(24% 0.04 307);
        --color-purple-600: oklch(68% 0.22 302);
    }
}

*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    border: 0 solid;
}

html {
    -webkit-text-size-adjust: 100%;
    line-height: 1.5;
    font-family: var(--app-font-sans);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    background-color: hsl(var(--background));
    color: hsl(var(--foreground));
    font-family: var(--app-font-sans);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
}

a { color: inherit; text-decoration: inherit; }
h1,h2,h3,h4,h5,h6 { font-size: inherit; font-weight: inherit; }
ol, ul { list-style: none; }
img, svg, video { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; background: transparent; border-radius: 0; opacity: 1; }
button { cursor: pointer; }

[v-cloak] { visibility: hidden; }

/* ---- utility classes ---- */

.lw-page {
    min-height: 100dvh;
    padding-bottom: 3rem;
}

.lw-container {
    max-width: 28rem;
    margin-inline: auto;
    width: 100%;
    padding: 1.5rem 0.5rem 0;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* Search */
.lw-search-wrap {
    position: relative;
    z-index: 50;
}

.lw-search-icon {
    position: absolute;
    left: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    width: 1rem;
    height: 1rem;
    color: hsl(var(--muted-foreground));
    pointer-events: none;
}

.lw-search-input {
    width: 100%;
    padding: 0 3rem 0 2.25rem;
    height: 3rem;
    border-radius: 1rem;
    background-color: hsl(var(--card));
    border: none;
    box-shadow: 0 1px 3px #0000001a;
    font-size: 1rem;
    color: hsl(var(--foreground));
    outline: none;
    transition: box-shadow 0.15s;
}

.lw-search-input::placeholder { color: hsl(var(--muted-foreground)); }
.lw-search-input:focus { box-shadow: 0 0 0 2px hsl(var(--ring)); }

.lw-location-btn {
    position: absolute;
    right: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    color: hsl(var(--muted-foreground));
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.15s;
}

.lw-location-btn:hover { color: hsl(var(--foreground)); }

/* Location header */
.lw-header {
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
    gap: 0.5rem;
}

.lw-header-left { display: flex; flex-direction: column; gap: 0.1rem; }
.lw-header-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.2rem;
}

.lw-sun-item {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.8rem;
    color: hsl(var(--muted-foreground));
}

.lw-date { color: hsl(var(--muted-foreground)); font-size: 0.875rem; }
.lw-time { font-size: 1.5rem; font-weight: 600; letter-spacing: -0.02em; }

/* Main weather card */
.lw-card-primary {
    border-radius: calc(var(--radius) + 4px);
    background-color: hsl(var(--primary));
    color: hsl(var(--primary-foreground));
    box-shadow: 0 4px 6px -1px #0000001a, 0 2px 4px -2px #0000001a;
    overflow: hidden;
    position: relative;
}

.lw-card-primary-bg {
    position: absolute;
    right: 0; top: 0;
    opacity: 0.1;
    transform: scale(1.5) translate(25%, -25%);
    pointer-events: none;
}

.lw-card-primary-bg svg { width: 16rem; height: 16rem; color: hsl(var(--primary-foreground)); }

.lw-card-primary-body {
    padding: 1.5rem;
    position: relative;
    z-index: 10;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.lw-temp-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.lw-temp-main { display: flex; flex-direction: column; gap: 0.25rem; }

.lw-temp {
    font-size: 3.75rem;
    font-weight: 700;
    letter-spacing: -0.05em;
    line-height: 1;
}

.lw-description {
    font-size: 1.125rem;
    opacity: 0.9;
    font-weight: 500;
}

.lw-weather-icon-lg { width: 4rem; height: 4rem; }

.lw-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    padding-top: 1rem;
    border-top: 1px solid color-mix(in oklab, hsl(var(--primary-foreground)) 20%, transparent);
}

.lw-stat-label {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    color: color-mix(in oklab, hsl(var(--primary-foreground)) 70%, transparent);
    font-size: 0.75rem;
    margin-bottom: 0.25rem;
}

.lw-stat-label svg { width: 0.75rem; height: 0.75rem; }
.lw-stat-value { font-weight: 500; font-size: 0.875rem; }

/* Generic card */
.lw-card {
    border-radius: calc(var(--radius) + 4px);
    background-color: hsl(var(--card));
    color: hsl(var(--card-foreground));
    box-shadow: 0 1px 3px #0000001a;
    overflow: hidden;
}

/* Clothing advice */
.lw-clothing {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1.25rem;
}
.lw-clothing-icon {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 9999px;
    background-color: color-mix(in oklab, hsl(var(--primary)) 10%, transparent);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.lw-clothing-icon svg { width: 1.25rem; height: 1.25rem; color: hsl(var(--primary)); }

.lw-clothing-body { flex: 1; min-width: 0; }
.lw-clothing-header { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; margin-bottom: 0.25rem; }
.lw-clothing-title { font-size: 0.875rem; font-weight: 600; }
.lw-clothing-text { font-size: 0.875rem; color: hsl(var(--muted-foreground)); line-height: 1.625; margin-top: 0.25rem; }
[data-theme="dark"] .lw-clothing-text { color: hsl(220 15% 78%); }
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]):not([data-theme="dark"]) .lw-clothing-text { color: hsl(220 15% 78%); }
}

.lw-race-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.2rem 0.55rem 0.2rem 0.3rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 500;
    border: 1.5px solid hsl(var(--border));
    background: transparent;
    color: hsl(var(--muted-foreground));
    cursor: pointer;
    transition: border-color 0.2s, color 0.2s;
    white-space: nowrap;
    flex-shrink: 0;
}

.lw-race-toggle:hover {
    border-color: hsl(var(--accent));
    color: hsl(var(--accent));
}

.lw-race-toggle.is-active {
    border-color: hsl(var(--accent));
    color: hsl(var(--accent));
}

/* sliding track */
.lw-race-toggle-track {
    display: inline-flex;
    align-items: center;
    width: 1.75rem;
    height: 1rem;
    border-radius: 9999px;
    background-color: hsl(var(--border));
    transition: background-color 0.2s;
    flex-shrink: 0;
    padding: 0.125rem;
}

.lw-race-toggle.is-active .lw-race-toggle-track {
    background-color: hsl(var(--accent));
}

/* sliding dot */
.lw-race-toggle-dot {
    width: 0.75rem;
    height: 0.75rem;
    border-radius: 9999px;
    background-color: hsl(var(--card));
    box-shadow: 0 1px 2px #0003;
    transition: transform 0.2s;
    transform: translateX(0);
}

.lw-race-toggle.is-active .lw-race-toggle-dot {
    transform: translateX(0.75rem);
}

/* Section heading */
.lw-section-title {
    font-size: 0.875rem;
    font-weight: 600;
    padding: 0 0.25rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: hsl(var(--foreground));
}

.lw-section-title svg { width: 1rem; height: 1rem; color: hsl(var(--muted-foreground)); }

/* Hourly scroll */
.lw-hourly-scroll {
    overflow-x: auto;
    padding-bottom: 0.5rem;
    padding-top: 2px;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.lw-hourly-scroll::-webkit-scrollbar { display: none; }

.lw-hourly-list {
    display: flex;
    gap: 0.75rem;
    padding: 0 0.25rem;
    width: max-content;
}

.lw-hourly-item {
    border-radius: calc(var(--radius) + 4px);
    background-color: hsl(var(--card));
    box-shadow: 0 1px 3px #0000001a;
    width: 5rem;
    flex-shrink: 0;
    padding: 0.75rem;
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    align-items: center;
    cursor: pointer;
    transition: background-color 0.15s;
}

.lw-hourly-item:hover { background-color: hsl(var(--muted)); }

.lw-hourly-item.is-selected {
    box-shadow: 0 0 0 2px hsl(var(--primary));
}

.lw-hourly-time { font-size: 0.75rem; font-weight: 500; color: hsl(var(--muted-foreground)); }
.lw-hourly-temp { font-size: 0.875rem; font-weight: 700; }
.lw-hourly-item svg { width: 1.5rem; height: 1.5rem; }

/* Daily forecast */
.lw-daily-list { display: flex; flex-direction: column; gap: 0.5rem; }

.lw-daily-item {
    border-radius: calc(var(--radius) + 4px);
    background-color: hsl(var(--card));
    box-shadow: 0 1px 3px #0000001a;
    cursor: pointer;
    transition: background-color 0.15s;
}

.lw-daily-item:hover { background-color: hsl(var(--muted)); }

.lw-daily-item.is-selected {
    box-shadow: 0 0 0 2px hsl(var(--primary));
}

.lw-daily-inner {
    padding: 1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.lw-daily-name { font-weight: 500; font-size: 0.875rem; text-transform: capitalize; width: 6rem; }
.lw-daily-icon { display: flex; align-items: center; gap: 0.5rem; }
.lw-daily-icon svg { width: 1.25rem; height: 1.25rem; }

.lw-daily-temps {
    width: 6rem;
    text-align: right;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.5rem;
    font-size: 0.875rem;
    font-weight: 500;
}

.lw-daily-temps .min { color: hsl(var(--muted-foreground)); font-weight: 400; }

/* Details card */
.lw-details-title { font-size: 0.875rem; font-weight: 600; padding: 1.5rem 1.5rem 0.5rem; }

.lw-details-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
    padding: 0 1.5rem 1.5rem;
}

.lw-detail-item { display: flex; align-items: center; gap: 0.75rem; }

.lw-detail-icon {
    width: 2rem;
    height: 2rem;
    border-radius: 9999px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.lw-detail-icon.orange { background-color: var(--color-orange-100); }
.lw-detail-icon.orange svg { color: var(--color-orange-600); }
.lw-detail-icon.purple { background-color: var(--color-purple-100); }
.lw-detail-icon.purple svg { color: var(--color-purple-600); }
.lw-detail-icon.yellow { background-color: var(--color-yellow-100); }
.lw-detail-icon.yellow svg { color: var(--color-yellow-600); }
.lw-detail-icon svg { width: 1rem; height: 1rem; }

.lw-detail-label { font-size: 0.75rem; color: hsl(var(--muted-foreground)); margin-bottom: 0.125rem; }
.lw-detail-value { font-size: 0.875rem; font-weight: 500; }

/* Weather icon colors */
.icon-cloud { color: var(--color-gray-400); }
.icon-rain { color: var(--color-blue-500); }
.icon-sun { color: var(--color-yellow-600); }

/* Weather icon fix – give icons a muted backdrop so cloud icons are visible on any background */
.lw-hourly-item img,
.lw-daily-icon img {
    background-color: hsl(var(--muted));
    border-radius: 9999px;
}

/* Theme toggle button */
.lw-theme-toggle {
    position: fixed;
    bottom: 1.25rem;
    right: 1.25rem;
    z-index: 200;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 9999px;
    background-color: hsl(var(--card));
    color: hsl(var(--foreground));
    box-shadow: 0 2px 8px #0000002a;
    border: 1px solid hsl(var(--border));
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color 0.2s, box-shadow 0.2s;
}

.lw-theme-toggle:hover {
    box-shadow: 0 4px 12px #0000003a;
}

.lw-theme-toggle svg { width: 1.1rem; height: 1.1rem; }

/* Show/hide correct icon */
.lw-theme-toggle .icon-moon { display: block; }
.lw-theme-toggle .icon-sun  { display: none; }
[data-theme="dark"] .lw-theme-toggle .icon-moon { display: none; }
[data-theme="dark"] .lw-theme-toggle .icon-sun  { display: block; }
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]):not([data-theme="dark"]) .lw-theme-toggle .icon-moon { display: none; }
    :root:not([data-theme="light"]):not([data-theme="dark"]) .lw-theme-toggle .icon-sun  { display: block; }
}

/* Location permission dialog */
.lw-dialog-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.5);
    z-index: 100;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

.lw-dialog-overlay.is-open { display: flex; }

.lw-dialog {
    background: hsl(var(--card));
    border-radius: calc(var(--radius) + 4px);
    padding: 1.5rem;
    max-width: 24rem;
    width: 100%;
    box-shadow: 0 20px 25px -5px #0000001a;
}

.lw-dialog-title { font-size: 1.125rem; font-weight: 600; margin-bottom: 0.75rem; }
.lw-dialog-body { font-size: 0.875rem; color: hsl(var(--muted-foreground)); margin-bottom: 1rem; line-height: 1.625; }

.lw-dialog-actions { display: flex; gap: 0.75rem; }

.lw-btn {
    padding: 0.625rem 1rem;
    border-radius: calc(var(--radius) - 2px);
    font-size: 0.875rem;
    font-weight: 500;
    border: none;
    cursor: pointer;
    transition: opacity 0.15s;
}

.lw-btn:hover { opacity: 0.9; }
.lw-btn-primary { background-color: hsl(var(--primary)); color: hsl(var(--primary-foreground)); }
.lw-btn-secondary { background-color: hsl(var(--muted)); color: hsl(var(--foreground)); }