/* themes/cozy.css — a warm, quiet theme.
 *
 * Sand paper and sea blues, humanist sans for the UI and a serif for the
 * headings that carry meaning (the app title, day dates). Soft 1px rules,
 * gentle corners, shadows instead of hard borders.
 *
 * Palette: #4F7F8F dark blue, #57A3BD blue, #96D5EB light blue,
 *          #DBCEC1 dark sand, #F7F6F5 sand.
 * Text and fills are the palette colours darkened only where white or black
 * text sits on them, so every label clears WCAG AA (4.5:1); the checked
 * ratios are noted beside those values.
 *
 * Layout lives in app.css; this file sets tokens plus a few theme ornaments.
 */

:root {
    /* Surfaces & text */
    --bg-color: #f7f6f5;
    /* sand */
    --text-color: #1f2e33;
    /* 13.0:1 on sand */
    --text-muted: #5c6c72;
    /* 5.1:1 on sand */
    --nav-bg: #efebe6;
    --surface-muted: #efebe6;
    --card-bg: #ffffff;
    --border-color: #dbcec1;
    /* dark sand */
    --hairline-color: rgba(31, 46, 51, 0.08);

    /* Accents: sea blues */
    --primary-color: #487280;
    /* dark blue, deepened so white reads on it at 5.3:1 */
    --primary-text: #ffffff;
    --primary-border: #487280;
    --primary-hover: #3c606c;
    --secondary-color: #3d7387;
    /* 5.3:1 on a card */
    --accent-color: #96d5eb;
    /* light blue: fills and markers, never small text */

    /* States */
    --hover-surface: #efebe6;
    --row-hover-bg: #eff5f8;
    --row-hover-text: inherit;
    --nav-active-bg: #e4eff3;
    --nav-active-text: #1f2e33;
    --focus-color: #4f7f8f;
    --scrollbar-thumb: #cfc4b8;
    --overlay-bg: rgba(31, 46, 51, 0.4);

    /* Chart palette: the blues lead, with muted companions for the series
       the palette has no colour for. */
    --chart-blue: #4f7f8f;
    --chart-cyan: #5199b2;
    /* the palette blue, a shade deeper so a line clears 3:1 on a white card */
    --chart-green: #5f8f76;
    --chart-yellow: #b28f45;
    --chart-orange: #b4764f;
    --chart-red: #a85d57;
    --chart-magenta: #7d719b;

    /* Notes: sand toned */
    --note-color: #b08b5a;
    --note-bg: #f5efe7;
    --note-text: #5b4327;
    --note-inline-color: #8a6733;

    /* Type */
    --font-ui: ui-sans-serif, -apple-system, BlinkMacSystemFont, 'Segoe UI', Inter,
        'Helvetica Neue', Arial, sans-serif;
    --font-display: ui-serif, Georgia, 'Iowan Old Style', 'Times New Roman', serif;
    --font-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;
    --font-size-base: 15px;
    --line-height: 1.5;
    --weight-heading: 600;
    --weight-strong: 500;
    --label-transform: none;
    --label-tracking: normal;

    /* Shape: rounded, hairline, softly shadowed */
    --radius: 6px;
    --radius-lg: 12px;
    --radius-pill: 999px;
    --border-width: 1px;
    --border-width-strong: 1px;
    --table-cell-border: 0;
    --card-shadow: 0 1px 2px rgba(31, 46, 51, 0.05), 0 1px 3px rgba(31, 46, 51, 0.04);
    --shadow-pop: 0 8px 24px rgba(31, 46, 51, 0.16);

    /* Cards float as panels rather than sitting flush */
    --card-padding: 1rem;
    --card-border-width: 1px;
    --card-radius: 10px;
    --card-gap: 0.75rem;
    --day-header-bg: transparent;
}

[data-theme="dark"] {
    --bg-color: #1a2124;
    --text-color: #e9eef0;
    /* 14.0:1 on the page */
    --text-muted: #9fb0b6;
    /* 7.3:1 on the page */
    --nav-bg: #263136;
    --surface-muted: #263136;
    --card-bg: #212a2e;
    --border-color: #35434a;
    --hairline-color: rgba(233, 238, 240, 0.09);

    /* On a dark ground the light blue carries the accent */
    --primary-color: #96d5eb;
    --primary-text: #12262e;
    /* 9.7:1 on the button */
    --primary-border: #96d5eb;
    --primary-hover: #aee0f0;
    --secondary-color: #96d5eb;
    --accent-color: #dbcec1;

    --hover-surface: #2a3539;
    --row-hover-bg: #263136;
    --row-hover-text: inherit;
    --nav-active-bg: #2c383d;
    --nav-active-text: #f2f7f9;
    --focus-color: #96d5eb;
    --scrollbar-thumb: #3e4c53;
    --overlay-bg: rgba(0, 0, 0, 0.6);

    --chart-blue: #7fb6c9;
    --chart-cyan: #96d5eb;
    --chart-green: #8fbfa4;
    --chart-yellow: #d8bc7c;
    --chart-orange: #ce9670;
    --chart-red: #c98682;
    --chart-magenta: #afa3c9;

    --note-color: #c9a577;
    --note-bg: #33291d;
    --note-text: #f0e2cd;
    --note-inline-color: #c9a577;

    --card-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-pop: 0 8px 24px rgba(0, 0, 0, 0.45);
}

/* Slim, borderless scrollbars that fade into the page */
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-track {
    background: transparent;
    border-left: none;
}

::-webkit-scrollbar-thumb {
    background: var(--scrollbar-thumb);
    border: 2px solid transparent;
    background-clip: padding-box;
    border-radius: var(--radius-pill);
}

::-webkit-scrollbar-corner {
    background: transparent;
}

/* Header: a quiet rule, a serif wordmark */
.app-header {
    background-color: var(--bg-color);
}

.header-left h1 {
    letter-spacing: -0.01em;
    font-size: 1.05rem;
}

/* Nav items are pills centred in the bar, not full-height tabs */
.main-nav {
    gap: 2px;
    align-items: center;
}

.nav-btn {
    height: auto;
    padding: 6px 12px;
    border-radius: var(--radius);
    color: var(--text-muted);
    transition: background-color 0.12s ease, color 0.12s ease;
}

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

.nav-btn.active {
    color: var(--text-color);
    font-weight: 600;
}

/* Controls: soft surfaces, no press-shift.
   The primary button keeps the accent fill app.css gives it — listing it here
   would override that background and leave --primary-text unreadable. */
.secondary-btn,
.icon-btn {
    background: var(--card-bg);
}

.primary-btn,
.secondary-btn,
.icon-btn {
    box-shadow: 0 1px 2px rgba(31, 46, 51, 0.05);
    transition: background-color 0.12s ease, border-color 0.12s ease;
}

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

.icon-btn:hover {
    background-color: var(--hover-surface);
}

.select-input,
.date-input,
.file-input,
input[type="text"],
input[type="number"],
input[type="date"],
select {
    box-shadow: inset 0 1px 2px rgba(31, 46, 51, 0.05);
}

/* Tables read as rows of text, ruled only where a rule helps */
.data-table,
.generic-table {
    border: none;
}

.data-table th,
.generic-table th {
    background: transparent;
    border-bottom: 1px solid var(--border-color);
    border-right: none;
    color: var(--text-muted);
    font-weight: 500;
    font-size: 0.8rem;
}

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

/* Cards: floating panels, headings without the rule underneath */
.card h3 {
    border-bottom: none;
    padding-bottom: 0;
    margin-bottom: 0.25rem;
    color: var(--text-muted);
    font-weight: 500;
    font-size: 0.85rem;
}

.amount {
    font-family: var(--font-ui);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
}

/* Day headings are the editorial moment: serif, no banner */
.day-header {
    border-bottom: 1px solid var(--hairline-color);
    font-size: 1.25rem;
    letter-spacing: -0.01em;
}

.day-map-container {
    border-radius: var(--radius);
    overflow: hidden;
}

/* Notes: a tinted card rather than a dashed box */
.day-notes-section {
    border-style: solid;
    border-color: var(--note-color);
    background: var(--note-bg);
    color: var(--note-text);
}

.timeline-content .no-data,
.placeholder-message {
    border-color: var(--border-color);
    color: var(--text-muted);
}

/* Timeline scale markers sit lighter over the content */
.scale-marker {
    opacity: 0.55;
    box-shadow: var(--card-shadow);
}

.scale-marker:hover {
    background: var(--primary-color);
    color: var(--primary-text);
    border-color: var(--primary-color);
}

#timeline-date-indicator {
    border-color: var(--primary-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: var(--radius) !important;
    border: 1px solid var(--border-color) !important;
    color: var(--text-color) !important;
    background: var(--card-bg) !important;
    box-shadow: var(--card-shadow);
}

.leaflet-container {
    font-family: var(--font-ui) !important;
}

/* The pixel-art icons are heavy black artwork; ease them onto warm paper */
.icon,
.day-notes-header::before,
.timeline-inline-note::before {
    opacity: 0.75;
}