/*
 * Base styling for the time and weather dashboard.
 * The layout and sizing remain unchanged while rules are reorganized
 * for clarity and predictable overrides.
 */

/* -------------------------------------------------------------------------- */
/* Theme tokens                                                               */
/* -------------------------------------------------------------------------- */
:root {
    --accent-color: #5eead4;
    --page-background: radial-gradient(circle at 20% 15%, rgba(94, 234, 212, 0.18), transparent 55%),
        radial-gradient(circle at 80% 10%, rgba(59, 130, 246, 0.25), transparent 60%),
        #061026;
    --text-color: #e0f2f1;
    --card-bg: rgba(10, 24, 49, 0.9);
    --glass-bg: rgba(12, 36, 58, 0.7);
    --header-bg: linear-gradient(135deg, #0b172f, #0b3b33);
    --border-color: rgba(94, 234, 212, 0.28);
    --subtle-card-bg: rgba(9, 25, 46, 0.8);
    --subtle-card-border: rgba(94, 234, 212, 0.12);
}

body.theme-night {
    --accent-color: #5eead4;
    --page-background: radial-gradient(circle at 20% 15%, rgba(94, 234, 212, 0.18), transparent 55%),
        radial-gradient(circle at 80% 10%, rgba(59, 130, 246, 0.25), transparent 60%),
        #061026;
    --text-color: #e0f2f1;
    --card-bg: rgba(10, 24, 49, 0.9);
    --glass-bg: rgba(12, 36, 58, 0.7);
    --header-bg: linear-gradient(135deg, #0b172f, #0b3b33);
    --border-color: rgba(94, 234, 212, 0.28);
    --subtle-card-bg: rgba(9, 25, 46, 0.8);
    --subtle-card-border: rgba(94, 234, 212, 0.12);
}

body.theme-day {
    --accent-color: #0ea5e9;
    --page-background: linear-gradient(180deg, #dff3ff 0%, #d6f2ec 45%, #c9def7 100%);
    --text-color: #0f172a;
    --card-bg: rgba(245, 250, 255, 0.92);
    --glass-bg: rgba(240, 248, 255, 0.78);
    --header-bg: linear-gradient(135deg, #1fa971, #38bdf8);
    --border-color: rgba(37, 150, 190, 0.35);
    --subtle-card-bg: rgba(236, 245, 255, 0.88);
    --subtle-card-border: rgba(22, 163, 74, 0.2);
}

/* -------------------------------------------------------------------------- */
/* Global layout                                                              */
/* -------------------------------------------------------------------------- */
html,
body {
    height: 100%;
    width: 100%;
}

html {
    font-size: clamp(15px, 0.9vw + 0.25rem, 20px);
}

body {
    margin: 0;
    overflow: hidden;
    background: var(--page-background);
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
    color: var(--text-color);
    font-family: 'Space Grotesk', 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: clamp(1rem, 0.35vw + 0.95rem, 1.2rem);
    transition: background 0.6s ease, color 0.6s ease;
}

body.debug-page {
    overflow: auto;
}

.app-shell {
    display: flex;
    min-height: 100dvh;
    height: 100dvh;
    width: 100%;
    padding-block: clamp(0.35rem, 0.9vh, 0.8rem);
    padding-inline: clamp(0.45rem, 1.4vw, 1.1rem);
    box-sizing: border-box;
    overflow: hidden;
}

.debug-shell {
    flex-direction: column;
    gap: clamp(1.25rem, 1.6vw, 1.75rem);
    overflow: visible;
    height: auto;
}

.dashboard-layout {
    --dashboard-card-max: 100%;
    display: grid;
    grid-template-columns: 1fr;
    grid-auto-rows: minmax(0, 1fr);
    gap: clamp(0.85rem, 1.6vw, 1.4rem);
    width: 100%;
    height: 100%;
    min-height: 0;
    align-items: stretch;
    justify-items: stretch;
    align-content: stretch;
}

.dashboard-card-wrapper {
    display: flex;
    width: 100%;
    flex: 1 1 auto;
    justify-content: stretch;
    align-items: stretch;
    min-width: 0;
    min-height: 0;
    height: 100%;
}

.dashboard-card {
    width: 100%;
    min-width: 280px;
    min-height: 0;
    height: 100%;
}

/* Responsive grid tweaks */
@media (max-width: 1200px) {
    .dashboard-layout {
        gap: 1.5rem;
        --dashboard-card-max: 100%;
    }

    .forecast-card .card-body {
        padding: clamp(1.25rem, 3vw, 2rem);
    }
}

@media (min-width: 992px) {
    .dashboard-layout {
        grid-template-columns: clamp(300px, 32vw, 420px) minmax(0, 1fr);
        align-items: stretch;
    }

    .weather-scene-shell {
        height: 100%;
        min-height: 0;
        aspect-ratio: auto;
    }
}

/* -------------------------------------------------------------------------- */
/* Card framework                                                             */
/* -------------------------------------------------------------------------- */
header,
footer {
    background: var(--header-bg);
    color: var(--text-color);
    border-bottom: 1px solid var(--border-color);
    transition: background 0.6s ease;
}

footer {
    border-top: 1px solid var(--border-color);
    border-bottom: 0;
}

.card {
    background: var(--card-bg);
    color: var(--text-color);
    border: 0;
    border-radius: 1.25rem;
    box-shadow: 0 1.5rem 3rem rgba(2, 6, 23, 0.35);
    transition: background 0.6s ease, color 0.6s ease, box-shadow 0.6s ease;
}

.gradient-border {
    --gradient-border-size: 3px;
    position: relative;
    overflow: hidden;
    background: var(--card-bg);
    padding: var(--gradient-border-size);
}

.gradient-border::before {
    content: "";
    position: absolute;
    inset: 0;
    padding: var(--gradient-border-size);
    border-radius: 1.25rem;
    background: linear-gradient(135deg, rgba(94, 234, 212, 0.85), rgba(56, 189, 248, 0.85));
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
}

.card-body {
    position: relative;
    z-index: 1;
    min-height: 0;
}

.primary-widget .card-body {
    display: flex;
    align-items: stretch;
    height: 100%;
    min-height: 0;
    padding: 0;
}

.forecast-card .card-body {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
}

.spacer-card .card-body {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: max(220px, 38vh);
    color: rgba(148, 163, 184, 0.6);
}

.glass-card {
    background: var(--glass-bg);
    backdrop-filter: blur(10px);
}

@supports not (backdrop-filter: blur(1px)) {
    .glass-card {
        backdrop-filter: none;
        background: rgba(15, 23, 42, 0.9);
    }
}

/* -------------------------------------------------------------------------- */
/* Typography and accents                                                     */
/* -------------------------------------------------------------------------- */
.text-accent {
    color: var(--accent-color);
    letter-spacing: 0.2em;
}

.display-1,
.display-6 {
    text-shadow: 0 5px 35px rgba(13, 148, 136, 0.35);
}

.date-display {
    font-size: clamp(2rem, 3.5vw, 3.2rem);
    text-shadow: 0 5px 35px rgba(56, 189, 248, 0.35);
}

.time-display {
    font-size: clamp(4.5rem, 6vw + 1.5rem, 9rem);
    text-shadow: 0 5px 35px rgba(13, 148, 136, 0.5);
}

.current-weather {
    border-color: var(--border-color) !important;
}

/* -------------------------------------------------------------------------- */
/* Utility classes (Bootstrap-free replacements)                              */
/* -------------------------------------------------------------------------- */
:root {
    --spacing-0: 0;
    --spacing-1: 0.25rem;
    --spacing-2: 0.5rem;
    --spacing-3: 1rem;
    --spacing-4: 1.5rem;
    --spacing-5: 3rem;
    --container-max-width: 1200px;
    --container-padding: 1rem;
}

.min-vh-100 { min-height: 100vh; }
.d-flex { display: flex; }
.d-none { display: none !important; }
.flex-column { flex-direction: column; }
.flex-row { flex-direction: row; }
.flex-grow-1 { flex: 1 1 auto; }
.justify-content-between { justify-content: space-between; }
.justify-content-center { justify-content: center; }
.align-items-center { align-items: center; }
.align-items-start { align-items: flex-start; }
.text-center { text-align: center; }
.mt-auto { margin-top: auto !important; }
.h-100 { height: 100%; }
.lh-1 { line-height: 1; }
.gap-3 { gap: var(--spacing-3); }

.container {
    width: min(var(--container-max-width), 100%);
    margin: 0 auto;
    padding-inline: var(--container-padding);
    box-sizing: border-box;
}

.row {
    --row-gap: 1.25rem;
    --row-cols: 1;
    display: grid;
    grid-template-columns: repeat(var(--row-cols), minmax(0, 1fr));
    gap: var(--row-gap);
}

.col { min-width: 0; }
.row-cols-1 { --row-cols: 1; }
.row-cols-2 { --row-cols: 2; }
.row-cols-3 { --row-cols: 3; }
.row-cols-4 { --row-cols: 4; }
.row-cols-8 { --row-cols: 8; }
.g-3 { --row-gap: var(--spacing-3); }
.g-4 { --row-gap: var(--spacing-4); }

@media (min-width: 576px) {
    .row-cols-sm-3 { --row-cols: 3; }
}

@media (min-width: 768px) {
    .row-cols-md-2 { --row-cols: 2; }
    .flex-md-row { flex-direction: row; }
    .align-items-md-center { align-items: center; }
    .justify-content-md-between { justify-content: space-between; }
    .mt-md-0 { margin-top: 0 !important; }
    .row-cols-md-4 { --row-cols: 4; }
}

@media (min-width: 992px) {
    .flex-lg-row { flex-direction: row; }
    .align-items-lg-center { align-items: center; }
    .justify-content-lg-between { justify-content: space-between; }
    .row-cols-lg-8 { --row-cols: 8; }
    .mt-lg-0 { margin-top: 0 !important; }
    .mb-lg-5 { margin-bottom: var(--spacing-5) !important; }
}

@media (min-width: 1200px) {
    .row-cols-xl-4 { --row-cols: 4; }
}

.mb-0 { margin-bottom: var(--spacing-0) !important; }
.mb-1 { margin-bottom: var(--spacing-1) !important; }
.mb-2 { margin-bottom: var(--spacing-2) !important; }
.mb-3 { margin-bottom: var(--spacing-3) !important; }
.mb-4 { margin-bottom: var(--spacing-4) !important; }
.mb-5 { margin-bottom: var(--spacing-5) !important; }
.mt-2 { margin-top: var(--spacing-2) !important; }
.mt-5 { margin-top: var(--spacing-5) !important; }
.py-3 { padding-top: var(--spacing-3) !important; padding-bottom: var(--spacing-3) !important; }
.py-4 { padding-top: var(--spacing-4) !important; padding-bottom: var(--spacing-4) !important; }
.py-5 { padding-top: var(--spacing-5) !important; padding-bottom: var(--spacing-5) !important; }
.p-2 { padding: var(--spacing-2) !important; }

h1, h2, h3, h4, h5, h6 {
    margin: 0 0 0.5rem;
    font-weight: 700;
    line-height: 1.2;
}

p {
    margin: 0 0 1rem;
}

.h1 { font-size: 2.5rem; }
.h2 { font-size: 2rem; }
.h3 { font-size: 1.75rem; }
.h4 { font-size: 1.5rem; }
.h5 { font-size: 1.25rem; }
.h6 { font-size: 1rem; }

.small { font-size: 0.85rem; }
.lead { font-size: 1.25em; font-weight: 500; }
.fw-semibold { font-weight: 600; }
.fw-bold { font-weight: 700; }
.text-uppercase { text-transform: uppercase; letter-spacing: 0.08em; }
.text-info { color: #67e8f9; }
.text-muted { color: rgba(226, 232, 240, 0.72); }
.text-white { color: #fff; }
.text-white-50 { color: rgba(255, 255, 255, 0.65); }
.text-decoration-none { text-decoration: none; }

.badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.35rem 0.6rem;
    border-radius: 0.75rem;
    border: 1px solid var(--border-color, rgba(226, 232, 240, 0.2));
    font-size: 0.75rem;
    letter-spacing: 0.08em;
}

.rounded-pill { border-radius: 999px; }
.border { border: 1px solid var(--border-color, rgba(226, 232, 240, 0.2)); }
.border-light { border-color: rgba(226, 232, 240, 0.6); }

.btn-group { display: inline-flex; gap: 0.5rem; align-items: center; }
.btn-check {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    border-radius: 0.75rem;
    padding: 0.45rem 0.9rem;
    border: 1px solid var(--border-color, rgba(226, 232, 240, 0.25));
    background: transparent;
    color: var(--text-color, #e2e8f0);
    font-weight: 600;
    cursor: pointer;
    transition: color 0.2s ease, background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.btn:focus-visible,
.btn-check:focus-visible + .btn {
    outline: 2px solid var(--accent-color, #67e8f9);
    outline-offset: 2px;
}

.btn-outline-light {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(226, 232, 240, 0.25);
}

.btn:hover,
.btn.active,
.btn-check:checked + .btn,
.btn-outline-light:hover,
.btn-outline-light.active,
.btn-check:checked + .btn-outline-light {
    color: #0f172a;
    background: var(--accent-color, #67e8f9);
    border-color: transparent;
    box-shadow: 0 10px 30px rgba(8, 47, 73, 0.25);
}

.bg-secondary {
    background: rgba(148, 163, 184, 0.16);
    color: var(--text-color, #e2e8f0);
}

.shadow-sm { box-shadow: 0 0.75rem 1.5rem rgba(2, 6, 23, 0.2); }

body.theme-day .text-muted { color: #475569; }
body.theme-day .text-info { color: #0284c7; }
body.theme-day .bg-secondary { background: #e2e8f0; color: #0f172a; }


/* -------------------------------------------------------------------------- */
/* Debug and preview layout                                                   */
/* -------------------------------------------------------------------------- */
.debug-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: clamp(0.75rem, 2vw, 1.25rem);
    flex-wrap: wrap;
}

.debug-actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.home-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.55rem 0.9rem;
    border-radius: 0.85rem;
    border: 1px solid var(--border-color);
    text-decoration: none;
    color: var(--text-color);
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.08));
    transition: transform 0.15s ease, border-color 0.2s ease, background 0.2s ease;
}

.home-link:hover {
    transform: translateY(-1px);
    border-color: var(--accent-color);
    background: linear-gradient(135deg, rgba(94, 234, 212, 0.12), rgba(56, 189, 248, 0.12));
}

.debug-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(1rem, 2vw, 1.5rem);
    width: 100%;
}

@media (min-width: 1100px) {
    .debug-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.debug-card {
    min-height: 0;
}

.debug-card-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}

.theme-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.45rem 0.75rem;
    border-radius: 0.75rem;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid var(--border-color);
    font-weight: 600;
    letter-spacing: 0.01em;
    color: var(--text-color);
}

.theme-toggle {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0.6rem;
    border-radius: 0.9rem;
    border: 1px solid var(--border-color);
    background: rgba(255, 255, 255, 0.04);
}

.toggle-label {
    font-weight: 600;
    letter-spacing: 0.01em;
}

.toggle-buttons {
    display: inline-flex;
    gap: 0.35rem;
}

.toggle-btn {
    border: 1px solid var(--border-color);
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-color);
    padding: 0.4rem 0.85rem;
    border-radius: 0.7rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.15s ease;
}

.toggle-btn:hover {
    transform: translateY(-1px);
    border-color: var(--accent-color);
}

.toggle-btn.active {
    background: var(--accent-color);
    color: #0f172a;
    border-color: transparent;
    box-shadow: 0 10px 30px rgba(8, 47, 73, 0.3);
}

.weather-list {
    display: flex;
    flex-direction: column;
    gap: clamp(1rem, 1.6vw, 1.25rem);
}

.landscape-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(1rem, 2vw, 1.35rem);
}

.landscape-preview {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 0.85rem;
    border-radius: 1.1rem;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.02), rgba(255, 255, 255, 0.06));
    border: 1px solid var(--border-color);
    box-shadow: 0 16px 38px rgba(2, 6, 23, 0.32);
}

.landscape-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.65rem;
    flex-wrap: wrap;
}

.landscape-header h2 {
    font-size: clamp(1.1rem, 0.4vw + 1.05rem, 1.35rem);
}

.landscape-chips {
    display: inline-flex;
    gap: 0.35rem;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.landscape-preview .weather-scene-shell {
    min-height: clamp(340px, 55vw, 760px);
}

.theme-chip.subtle-chip {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.14);
    color: var(--text-color);
}

.weather-list-item {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    padding: 0.35rem;
    border-radius: 1rem;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.02), rgba(255, 255, 255, 0.05));
    border: 1px solid var(--border-color);
}

.list-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    flex-wrap: wrap;
    padding: 0.5rem 0.85rem 0.35rem;
}

.list-heading .label {
    font-weight: 700;
    letter-spacing: 0.01em;
}

.static-meta {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.95rem;
    color: var(--text-color);
    opacity: 0.85;
}

.dot-separator {
    opacity: 0.6;
}

.theme-preview {
    position: relative;
    color: var(--text-color);
}

.compact-preview {
    min-height: clamp(320px, 40vh, 520px);
}

.simple-overlay {
    background: linear-gradient(180deg, rgba(4, 7, 15, 0.05) 0%, rgba(4, 7, 15, 0.45) 55%, rgba(4, 7, 15, 0.92) 100%);
}

.simple-overlay-content {
    gap: 0.75rem;
}

.simple-current-weather {
    justify-content: flex-start;
}

.moon-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: clamp(0.85rem, 1.6vw, 1.1rem);
    margin-top: 0.75rem;
}

@media (max-width: 900px) {
    .moon-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.moon-sample {
    display: flex;
    gap: 0.85rem;
    align-items: center;
    padding: 0.85rem;
    border-radius: 1rem;
    border: 1px solid var(--border-color);
    background: rgba(255, 255, 255, 0.02);
}

.moon-glyph-wrapper {
    width: 88px;
    height: 88px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: radial-gradient(circle at 40% 40%, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.04));
    box-shadow: inset 0 0 25px rgba(2, 6, 23, 0.35);
}

.moon-sample .moon-phase-value {
    font-weight: 700;
}

.moon-glyph {
    width: 76px;
    height: 76px;
}

.debug-divider {
    height: 1px;
    margin: 0.25rem 0 1.5rem;
    background: linear-gradient(90deg, transparent, var(--border-color), transparent);
    border: 0;
}

.scene-overlay .current-weather-details .text-info {
    font-weight: 600;
}

.theme-preview.theme-day .text-muted { color: #475569; }
.theme-preview.theme-day .text-info { color: #0284c7; }
.theme-preview.theme-day .scene-overlay .moon-phase-chip {
    background: rgba(255, 255, 255, 0.85);
    border-color: rgba(14, 165, 233, 0.35);
    color: #2563eb;
}

.theme-preview.theme-day .scene-overlay .current-weather {
    background: rgba(255, 255, 255, 0.9);
    color: #0f172a;
}

.theme-preview.theme-day .moon-phase-card {
    background: rgba(255, 255, 255, 0.72);
    border-color: rgba(14, 165, 233, 0.3);
}