:root {
    /* Pixel / Brutalist Theme Variables */
    --bg-color: #ffffff;
    --text-color: #000000;
    --nav-bg: #e0e0e0;
    --border-color: #000000;
    --primary-color: #ffff00;
    /* Bright Yellow */
    --primary-text: #000000;
    --secondary-color: #0000ff;
    /* Blue */
    --accent-color: #ff00ff;
    /* Magenta */
    --card-bg: #ffffff;
    --card-shadow: none;

    /* Chart specific palette for variety */
    --chart-red: #ff0000;
    --chart-green: #00ff00;
    --chart-blue: #0000ff;
    --chart-cyan: #00ffff;
    --chart-magenta: #ff00ff;
    --chart-yellow: #ffff00;
    --chart-orange: #ff9800;
    
    --note-color: #D97706;
    --note-bg: #FEF3C7;
    --note-text: #78350F;
    --note-inline-color: #b45309;

    --header-height: 48px;
    --spacing-unit: 8px;
    --control-height: 36px;
    /* Standardize height */

    font-family: 'Courier New', Courier, monospace;
    font-size: 14px;
    line-height: 1.2;
}

/* ... (skip dark mode) */

/* Buttons */
.primary-btn,
.secondary-btn,
.icon-btn {
    height: var(--control-height);
    padding: 0 1rem;
    /* Horizontal padding only, height set by line-height/height */
    border: 1px solid var(--border-color);
    cursor: pointer;
    font-weight: bold;
    font-size: 0.8rem;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-transform: uppercase;
    background: var(--bg-color);
    color: var(--text-color);
    transition: transform 0.1s;
    vertical-align: middle;
}

/* Form Elements */
.select-input,
.date-input,
.file-input,
input[type="text"],
input[type="number"],
input[type="date"],
select {
    height: var(--control-height);
    padding: 0 8px;
    border: 1px solid var(--border-color);
    background: var(--bg-color);
    color: var(--text-color);
    font-family: 'Courier New', Courier, monospace;
    font-size: 0.9rem;
    vertical-align: middle;
    box-shadow: none;
}

[data-theme="dark"] {
    --bg-color: #000000;
    --text-color: #e0e0e0;
    --nav-bg: #222222;
    --border-color: #e0e0e0;
    --primary-color: #ffff00;
    --primary-text: #000000;
    --secondary-color: #00ffff;
    /* Cyan */
    --accent-color: #ff00ff;
    --card-bg: #000000;

    --chart-red: #ff0000;
    --chart-green: #00ff00;
    --chart-blue: #0000ff;
    --chart-cyan: #00ffff;
    --chart-magenta: #ff00ff;
    --chart-yellow: #ffff00;
    --chart-orange: #ff9800;

    --note-color: #F59E0B;
    --note-bg: #78350F;
    --note-text: #FDE68A;
    --note-inline-color: #f59e0b;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    border-radius: 0 !important;
    /* STRICT PIXEL RULE */
    font-family: 'Courier New', Courier, monospace !important;
    text-transform: uppercase;
    /* Optional: enhances brutalist look, maybe too much? Let's try regular case first if user didn't specify caps, but screenshot looks mixed. Stick to normal case for readability but monospace handles the vibe. */
    text-transform: none;
}

::selection {
    background: var(--primary-color);
    color: var(--primary-text);
}

body {
    background-color: var(--bg-color);
    color: var(--text-color);
    height: 100vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    /* App-like feel */
}

/* Scrollbars */
::-webkit-scrollbar {
    width: 12px;
    height: 12px;
}

::-webkit-scrollbar-track {
    background: var(--nav-bg);
    border-left: 1px solid var(--border-color);
}

::-webkit-scrollbar-thumb {
    background: var(--text-color);
    border: 1px solid var(--nav-bg);
}

::-webkit-scrollbar-corner {
    background: var(--nav-bg);
}


/* Header & Nav */
.app-header {
    height: var(--header-height);
    background-color: var(--bg-color);
    border-bottom: 2px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 1rem;
    position: sticky;
    top: 0;
    z-index: 1000;
}

.header-left h1 {
    font-size: 1rem;
    font-weight: 900;
    letter-spacing: -1px;
    text-transform: uppercase;
    background: var(--text-color);
    color: var(--bg-color);
    padding: 2px 6px;
}

@media (max-width: 1200px) {
    .header-left h1 {
        display: none;
    }
}

.main-nav {
    display: flex;
    gap: -1px;
    /* Remove gaps for border collapse look */
    height: 100%;
    align-items: stretch;
}

.nav-btn {
    background: none;
    border: none;
    border-left: 1px solid var(--border-color);
    padding: 0 1.5rem;
    color: var(--text-color);
    cursor: pointer;
    font-weight: bold;
    font-size: 0.9rem;
    text-decoration: none;
    display: flex;
    align-items: center;
    height: 100%;
}

.nav-btn:last-child {
    border-right: 1px solid var(--border-color);
}

.nav-btn:hover {
    background-color: var(--nav-bg);
}

.nav-btn.active {
    background-color: var(--primary-color);
    color: var(--primary-text);
    box-shadow: inset 0 0 0 2px var(--border-color);
    /* Inner border focus */
}

.header-right {
    display: flex;
    align-items: center;
    gap: 1rem;
}

/* Buttons */
.primary-btn,
.secondary-btn,
.icon-btn {
    padding: 0.5rem 1rem;
    border: 1px solid var(--border-color);
    cursor: pointer;
    font-weight: bold;
    font-size: 0.8rem;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-transform: uppercase;
    background: var(--bg-color);
    color: var(--text-color);
    transition: transform 0.1s;
}

.primary-btn:active,
.secondary-btn:active,
.icon-btn:active {
    transform: translate(1px, 1px);
}

.primary-btn {
    background-color: var(--primary-color);
    color: var(--primary-text);
}

.secondary-btn:hover {
    background-color: var(--nav-bg);
}

.icon-btn {
    padding: 4px;
    border-radius: 0;
    min-width: 32px;
    min-height: 32px;
}

/* Form Elements */
.select-input,
.date-input,
.file-input,
input[type="text"],
input[type="number"],
input[type="date"],
select {
    padding: 6px;
    border: 1px solid var(--border-color);
    background: var(--bg-color);
    color: var(--text-color);
    font-family: 'Courier New', Courier, monospace;
    font-size: 0.9rem;
}

/* Focus Indicators */
:focus-visible {
    outline: 2px solid var(--border-color);
    outline-offset: 2px;
}

.nav-btn:focus-visible {
    outline-offset: -2px;
}

.select-input:focus,
.date-input:focus,
input:focus {
    outline: 2px solid var(--border-color);
    outline-offset: 1px;
}

/* Main Content */
#app-content {
    flex: 1;
    overflow: hidden;
    position: relative;
    padding: 0;
    /* Add some breathing room around the grid */
    background-color: var(--bg-color);
}

/* Make the grid lines very subtle or use a distinct background color for content */
#app-content::before {
    content: "";
    /* Optional overlay to fade grid if needed, or remove grid if too busy */
    /* For now, sticking to clean background for content containers */
}

.view-container {
    height: 100%;
    overflow-y: auto;
    background: var(--bg-color);
    padding: 0;
}

.placeholder-message {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    text-align: center;
    gap: 1rem;
    border: 1px dashed var(--border-color);
    padding: 1rem;
}

/* Generic Tables */
.data-table,
.generic-table {
    width: 100%;
    border-collapse: collapse;
    border: 1px solid var(--border-color);
    font-size: 0.85rem;
}

.data-table th,
.generic-table th {
    background: var(--nav-bg);
    border-bottom: 2px solid var(--border-color);
    border-right: 1px solid var(--border-color);
    padding: 8px;
    text-align: left;
    text-transform: uppercase;
    font-weight: 900;
}

.data-table td,
.generic-table td {
    border-bottom: 1px solid var(--border-color);
    border-right: 1px solid var(--border-color);
    padding: 6px 8px;
}

.data-table tr:hover td,
.generic-table tr:hover td {
    background-color: var(--primary-color);
    color: var(--primary-text);
}


/* View Specific Padding */
finance-view,
health-view,
timeline-view,
energy-view,
raw-data-view,
import-view {
    display: block;
    padding: 1rem;
    height: 100%;
    /* Ensure height for scroll if needed, though view-container handles scroll */
}

/* Map View needs no padding for full bleed */
map-view {
    display: block;
    height: 100%;
    width: 100%;
}

/* Finance View */
.finance-dashboard {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
    margin-bottom: 2rem;
}

.card,
.movie-card,
.import-card,
.day-card {
    background: var(--card-bg);
    padding: 0;
    border: none;
    margin-bottom: 0;
    border-bottom: 1px solid var(--border-color);
}

.card h3 {
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 0.5rem;
    margin-bottom: 0.5rem;
    text-transform: uppercase;
    font-size: 0.9rem;
}

.amount {
    font-size: 1.5rem;
    font-weight: 900;
    font-family: 'Courier New', Courier, monospace;
}

/* Modals */
.modal-overlay {
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(2px);
    /* Slight blur for modern touch effectively used in retro */
}

.modal-content {
    background: var(--bg-color);
    padding: 1rem;
    border: 2px solid var(--border-color);
    border-radius: 0;
}

.close-modal {
    top: 0;
    right: 0;
    padding: 0.5rem 1rem;
    background: var(--primary-color);
    color: var(--primary-text);
    border-left: 1px solid var(--border-color);
    border-bottom: 1px solid var(--border-color);
    font-family: monospace;
    font-weight: bold;
}

.close-modal:hover {
    background: var(--text-color);
    color: var(--bg-color);
}

/* Timeline */
.timeline-controls {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    min-height: 1.2rem;
    margin-bottom: 0.5rem;
    padding-right: 40px; /* Clear the timeline scale */
}

#timeline-stats {
    font-size: 0.8rem;
    text-transform: uppercase;
    opacity: 0.7;
}

/* Marks the end of the loaded days: scrolling to it loads the next batch */
.timeline-sentinel {
    padding: 1rem;
    text-align: center;
    font-size: 0.8rem;
    text-transform: uppercase;
    opacity: 0.7;
}

.timeline-content .no-data {
    border: 1px dashed var(--border-color);
    padding: 1rem;
    text-align: center;
}

.timeline-item {
    border-left: 2px solid var(--border-color);
    padding-left: 1rem;
    position: relative;
    margin-left: 0.5rem;
}

.timeline-item::before {
    content: '';
    position: absolute;
    left: -6px;
    top: 0;
    width: 10px;
    height: 10px;
    background: var(--primary-color);
    border: 1px solid var(--border-color);
}

.day-header {
    background: var(--nav-bg);
    border-bottom: 1px solid var(--border-color);
    padding: 0.75rem;
    font-weight: 900;
    text-transform: uppercase;
    font-size: 1.3rem;
}

.day-stats-list {
    display: flex;
    flex-direction: column;
}

.stat-item {
    padding: 0.25rem 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* Pixel icons from icons/*.svg. The artwork is black; the dark theme
   inverts it to stay legible on a dark background. */
.icon {
    display: inline-block;
    width: 1.1em;
    height: 1.1em;
    vertical-align: -0.2em;
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
}

.icon-steps { background-image: url('icons/steps.svg'); }
.icon-sleep { background-image: url('icons/sleep.svg'); }
.icon-nutrition { background-image: url('icons/nutrition.svg'); }
.icon-weight { background-image: url('icons/weight.svg'); }
.icon-music { background-image: url('icons/music.svg'); }
.icon-dive { background-image: url('icons/dive.svg'); }
.icon-running { background-image: url('icons/running.svg'); }
.icon-cycling { background-image: url('icons/cycling.svg'); }
.icon-swimming { background-image: url('icons/swimming.svg'); }
.icon-hiking { background-image: url('icons/hiking.svg'); }
.icon-ski { background-image: url('icons/ski.svg'); }
.icon-multisport { background-image: url('icons/multisport.svg'); }
.icon-workout { background-image: url('icons/workout.svg'); }
.icon-calendar { background-image: url('icons/calendar.svg'); }
.icon-post { background-image: url('icons/post.svg'); }

/* Note marker: decorative, always precedes note text. */
.day-notes-header::before,
.timeline-inline-note::before {
    content: '';
    display: inline-block;
    width: 1.1em;
    height: 1.1em;
    vertical-align: -0.2em;
    margin-right: 0.25em;
    background: url('icons/note.svg') center / contain no-repeat;
}

[data-theme="dark"] .icon,
[data-theme="dark"] .day-notes-header::before,
[data-theme="dark"] .timeline-inline-note::before {
    filter: invert(1);
}

.stat-icon {
    display: inline-flex;
    align-items: center;
    color: var(--text-color);
}

.stat-value {
    font-weight: 900;
}

.stat-sub {
    opacity: 0.7;
    font-size: 0.9em;
}

.stat-toggle {
    color: var(--text-color);
    cursor: pointer;
}

.stat-details-collapsible {
    padding-left: 1.75rem;
    font-size: 0.85em;
}

.sleep-phases {
    margin: 0;
    padding-left: 1.25rem;
    list-style: disc;
    opacity: 0.8;
}

.nutrition-macros {
    margin-bottom: 0.25rem;
    font-weight: 600;
}

.nutrition-meal {
    margin-bottom: 0.25rem;
}

.nutrition-foods {
    margin: 0;
    padding-left: 1.25rem;
    list-style: disc;
    opacity: 0.8;
}

/* Map */
.map-overlay {
    background: var(--bg-color);
    border: 1px solid var(--border-color);
    border-radius: 0;
}

/* Chart Card specific */
chart-card {
    display: block;
    border: 1px solid var(--border-color);
    padding: 1rem;
    background: var(--bg-color);
    min-width: 0;
}

chart-card .chart-container {
    position: relative;
    height: 300px;
    /* Fixed height to prevent growth loop */
    width: 100%;
    display: flex;
    flex-direction: column;
}

chart-card canvas {
    flex: 1;
    min-height: 0;
}

/* Helper Utils */
.hidden {
    display: none !important;
}

.text-center {
    text-align: center;
}

/* Status Indicator */
#db-status {
    font-size: 0.8rem;
    padding: 4px 8px;
    border: 1px solid var(--border-color);
    background: var(--bg-color);
    margin-right: 1rem;
}

/* Navigation Active State Line */
.main-nav {
    border-left: 1px solid var(--border-color);
}

/* Leaflet Overrides */
.leaflet-bar,
.leaflet-control-zoom-in,
.leaflet-control-zoom-out,
.leaflet-touch .leaflet-bar,
.leaflet-touch .leaflet-control-zoom-in,
.leaflet-touch .leaflet-control-zoom-out {
    border-radius: 0 !important;
    border: 1px solid var(--border-color) !important;
    color: var(--text-color) !important;
    background: var(--bg-color) !important;
}

.leaflet-container {
    font-family: 'Courier New', Courier, monospace !important;
}

/* Grids for Charts */
.charts-grid,
.dashboard-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    margin-bottom: 2rem;
}

@media (min-width: 2000px) {
    .charts-grid,
    .dashboard-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Map Dimensions DO NOT REMOVE */
.full-map {
    width: 100%;
    height: 100%;
    z-index: 1;
}

.day-body {
    display: flex;
    flex-direction: row-reverse;
}

.day-map-container {
    width: 250px;
    min-width: 250px;
    height: 200px;
    background: var(--nav-bg);
    position: relative;
    z-index: 1;
}

.day-content {
    flex: 1;
    padding: 0.5rem;
}

/* Loading Overlay */
.loading-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--bg-color);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10;
    font-size: 1.5rem;
    font-weight: bold;
    text-transform: uppercase;
    color: var(--text-color);
}

.loading-overlay.hidden {
    display: none !important;
}

/* Screen Reader Only */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Skip Link */
.skip-link {
    position: absolute;
    top: -100%;
    left: 0;
    z-index: 10000;
    padding: 0.5rem 1rem;
    background: var(--text-color);
    color: var(--bg-color);
    font-weight: bold;
    border: 2px solid var(--border-color);
}

.skip-link:focus {
    top: 0;
}

/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* Timeline Scale */
#timeline-scale {
    position: fixed;
    top: var(--header-height);
    right: 0;
    bottom: 0;
    width: 40px;
    z-index: 999;
    pointer-events: none; /* Let clicks pass through to scrollbar if not on a marker */
}

.scale-marker {
    position: absolute;
    right: 15px; /* Clear the scrollbar */
    font-size: 0.7rem;
    font-weight: bold;
    color: var(--text-color);
    background: var(--bg-color);
    padding: 2px 4px;
    border: 1px solid var(--border-color);
    cursor: pointer;
    pointer-events: auto;
    transform: translateY(-50%);
    white-space: nowrap;
    opacity: 0.7;
    transition: opacity 0.2s;
}

.scale-marker:hover {
    opacity: 1;
    background: var(--primary-color);
    color: var(--primary-text);
    z-index: 1000;
}

.scale-marker.major {
    font-weight: 900;
    border-width: 2px;
    right: 15px;
}

#timeline-date-indicator {
    position: fixed;
    right: 60px; /* Left of scale */
    background: var(--primary-color);
    color: var(--primary-text);
    padding: 4px 8px;
    font-weight: bold;
    border: 2px solid var(--border-color);
    z-index: 10001;
    pointer-events: none;
    display: none; /* Hidden by default */
    white-space: nowrap;
    box-shadow: 4px 4px 0 rgba(0,0,0,0.2);
}

/* Note Component Styles */
.day-notes-section {
    margin-top: 1rem;
    padding: 0.75rem;
    border: 1px dashed var(--border-color);
    background: var(--nav-bg);
}
.day-notes-header {
    font-weight: bold;
    font-size: 0.85rem;
    margin-bottom: 0.5rem;
    text-transform: uppercase;
}
.day-notes-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.day-notes-list li {
    font-size: 0.85rem;
    padding: 0.2rem 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}
[data-theme="dark"] .day-notes-list li {
    border-bottom-color: rgba(255, 255, 255, 0.05);
}
.day-notes-list li:last-child {
    border-bottom: none;
}
.day-note-type {
    font-weight: bold;
    color: var(--secondary-color);
}
.day-note-content {
    font-style: italic;
}
.timeline-inline-note {
    font-style: italic;
    color: var(--note-inline-color);
}

/* Chart Note Hover Banner */
chart-card .chart-container {
    position: relative;
}
.chart-note-hover {
    position: absolute;
    top: 35px;
    right: 10px;
    background: var(--note-bg);
    border: 2px solid var(--note-color);
    color: var(--note-text);
    padding: 6px 12px;
    font-size: 0.8rem;
    font-weight: bold;
    z-index: 10;
    max-width: 250px;
    box-shadow: 4px 4px 0 rgba(0,0,0,0.15);
    white-space: normal;
    word-wrap: break-word;
}
/* Manual Entry Form (Import view) */
.manual-entry-form {
    display: grid;
    grid-template-columns: max-content minmax(0, 320px);
    gap: 0.5rem 1rem;
    align-items: center;
    margin-top: 1rem;
}

.manual-entry-form label {
    font-weight: bold;
    font-size: 0.85rem;
}

.manual-entry-form button {
    justify-self: start;
}