/* Shared Theme CSS for MacroScore Application */
/* Used by Summary.html and VIEW generated HTML files */

:root {
  --bg-color: #f5f5f5;
  --fg-color: #181818;
  --table-bg: #ffffff;
  --header-bg: #e0e0e0;
  --border-color: #cccccc;
  --hover-bg: #eeeeee;
  --link-color: #0066cc;
  --highlight-color: #c0c0c0;
  --panel: #f6f6f6;
  --chart-grid: var(--fg-color);
  --chart-axis: var(--fg-color);
  --chart-bh: var(--fg-color);
  --highlight-overlay: rgba(0, 0, 0, 0.1);
}

body {
  font-family: Cambria, Georgia, "Times New Roman", serif;
  background-color: var(--bg-color);
  color: var(--fg-color);
  margin: 20px;
  font-size: 24px;
  transition: background-color 0.3s, color 0.3s;
}

a {
  color: var(--fg-color); /* User requested uniform links */
  text-decoration: underline;
  text-decoration-color: var(--border-color);
  text-decoration-thickness: 2px;
  font-weight: bold;
}

a:hover {
  text-decoration-color: var(--fg-color);
  text-decoration-style: solid;
}

/* Theme Classes */
body.light {
  --bg-color: #f0f0f0;
  --fg-color: #181818;
  --table-bg: #ffffff;
  --header-bg: #d9d9d9;
  --hover-bg: color-mix(in srgb, var(--bg-color) 80%, black 20%);
  --highlight-color: #e0e0e0;
  --panel: #ffffff;
  --chart-grid: var(--fg-color);
  --chart-axis: var(--fg-color);
  --chart-bh: var(--fg-color);
  --chart-long: rgba(44, 160, 44, 0.8);
  --chart-short: rgba(214, 39, 40, 0.8);
  --row-hover-color: rgba(0, 0, 0, 0.1);
}

body.dark {
  --bg-color: #1a1a1a;
  --fg-color: #e8e8e8;
  --table-bg: #252525;
  --header-bg: #333333;
  --border-color: #444444;
  --hover-bg: color-mix(in srgb, var(--bg-color) 80%, white 20%);
  --link-color: #66b3ff;
  --highlight-color: #404040;
  --panel: #111111;
  --chart-grid: var(--fg-color);
  --chart-axis: var(--fg-color);
  --chart-bh: var(--fg-color);
  --chart-long: rgba(44, 160, 44, 0.8);
  --chart-short: rgba(214, 39, 40, 0.8);
  --row-hover-color: rgba(255, 255, 255, 0.1);
  --highlight-overlay: rgba(255, 255, 255, 0.1);
}

body.solarized-light {
  --bg-color: #fdf6e3;
  --fg-color: #2d2608;
  --table-bg: #eee8d5;
  --header-bg: #d3cbb7;
  --border-color: #b58900;
  --hover-bg: color-mix(in srgb, var(--bg-color) 80%, black 20%);
  --highlight-color: #d3cbb7;
  --panel: #eee8d5;
  --chart-grid: var(--fg-color);
  --chart-axis: var(--fg-color);
  --chart-bh: var(--fg-color);
  --chart-long: rgba(44, 160, 44, 0.8);
  --chart-short: rgba(214, 39, 40, 0.8);
  --row-hover-color: rgba(0, 0, 0, 0.1);
}

body.kiwi-light {
  --bg-color: #e8f5e9;
  --fg-color: #0e1a0e;
  --table-bg: #c8e6c9;
  --header-bg: #a5d6a7;
  --border-color: #81c784;
  --hover-bg: color-mix(in srgb, var(--bg-color) 80%, black 20%);
  --highlight-color: #a5d6a7;
  --panel: #c8e6c9;
  --chart-grid: var(--fg-color);
  --chart-axis: var(--fg-color);
  --chart-bh: var(--fg-color);
  --chart-long: rgba(44, 160, 44, 0.8);
  --chart-short: rgba(214, 39, 40, 0.8);
  --row-hover-color: rgba(0, 0, 0, 0.1);
  --highlight-overlay: rgba(0, 0, 0, 0.1);
}

body.kiwi-dark {
  --bg-color: #0d2f10;
  --fg-color: #d5f0d7;
  --table-bg: #184d1c;
  --header-bg: #1f5c23;
  --border-color: #2e7d32;
  --hover-bg: color-mix(in srgb, var(--bg-color) 80%, white 20%);
  --highlight-color: #1f5c23;
  --panel: #184d1c;
  --chart-grid: var(--fg-color);
  --chart-axis: var(--fg-color);
  --chart-bh: var(--fg-color);
  --chart-long: rgba(44, 160, 44, 0.8);
  --chart-short: rgba(214, 39, 40, 0.8);
  --row-hover-color: rgba(255, 255, 255, 0.1);
  --highlight-overlay: rgba(255, 255, 255, 0.1);
}

body.oil {
  --bg-color: hsl(180, 100%, 4.3%);
  --fg-color: hsl(180, 100%, 89%);
  --table-bg: hsl(180, 100%, 9%);
  --header-bg: hsl(180, 100%, 14%);
  --border-color: hsl(180, 50%, 30%);
  --hover-bg: color-mix(in srgb, var(--bg-color) 80%, white 20%);
  --highlight-color: hsl(180, 100%, 20%);
  --panel: hsl(180, 100%, 9%);
  --chart-grid: var(--fg-color);
  --chart-axis: var(--fg-color);
  --chart-bh: var(--fg-color);
  --chart-long: rgba(44, 160, 44, 0.8);
  --chart-short: rgba(214, 39, 40, 0.8);
  --row-hover-color: rgba(255, 255, 255, 0.1);
  --highlight-overlay: rgba(255, 255, 255, 0.1);
}

body.rust-brown {
  --bg-color: #2b1f1a;
  --fg-color: #e8ddd6;
  --table-bg: #3e2d26;
  --header-bg: #523b32;
  --border-color: #795548;
  --hover-bg: color-mix(in srgb, var(--bg-color) 80%, white 20%);
  --highlight-color: #523b32;
  --panel: #3e2d26;
  --chart-grid: var(--fg-color);
  --chart-axis: var(--fg-color);
  --chart-bh: var(--fg-color);
  --chart-long: rgba(44, 160, 44, 0.8);
  --chart-short: rgba(214, 39, 40, 0.8);
  --row-hover-color: rgba(255, 255, 255, 0.1);
  --highlight-overlay: rgba(255, 255, 255, 0.1);
}

/* Standard Grid Table Style */
.grid-table {
  border-collapse: collapse;
  width: fit-content !important;
  max-width: fit-content !important;
  table-layout: fixed;
  font-size: 18px;
  margin-bottom: 30px;
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box; /* Include padding/border in width */
}

.grid-table th, .grid-table td {
  border: 1px solid var(--border-color);
  padding: 6px 6px; /* Match user preference */
  text-align: right;
  white-space: nowrap;
  box-sizing: border-box; /* Strict width enforcement */
  /* Standardized Widths (User Request: 60px default) */
  width: 80px;
  min-width: 80px;
  max-width: 80px;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Specific Column Styles */

/* Ix (Index): Compact 30px */
/* Standard Column Classes */
.col-ix, .grid-table td.col-ix, .grid-table th.col-ix {
  width: 60px !important;
  min-width: 60px !important;
  max-width: 60px !important;
  text-align: right !important;
}

.col-ticker, .grid-table td.col-ticker, .grid-table th.col-ticker {
  width: 100px !important;
  min-width: 100px !important;
  max-width: 100px !important;
  text-align: left !important;
  font-weight: bold !important;
}

.col-name, .grid-table td.col-name, .grid-table th.col-name {
  width: 240px !important;
  min-width: 240px !important;
  max-width: 240px !important;
  text-align: left !important;
  white-space: nowrap !important; /* Enforce single line */
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.col-meta, .grid-table td.col-meta, .grid-table th.col-meta {
  width: 165px !important;
  min-width: 165px !important;
  max-width: 165px !important;
  text-align: left !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.meta-chip {
  display: inline-block;
  max-width: 100%;
  padding: 2px 8px;
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: 0.86em;
  line-height: 1.2;
  font-weight: 600;
  vertical-align: middle;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Numeric Data Column */
.col-num, .grid-table td.col-num, .grid-table th.col-num {
  width: 80px !important;
  min-width: 80px !important;
  max-width: 80px !important;
  text-align: right !important;
}

/* Date Column */
.col-date, .grid-table td.col-date, .grid-table th.col-date {
  width: 160px !important;
  min-width: 160px !important;
  max-width: 160px !important;
  text-align: center !important;
  white-space: nowrap !important;
}

/* Header Styles */
.grid-table th.col-name {
  font-weight: bold !important;
  font-style: normal !important;
}

/* Body Styles */
.grid-table td.col-name {
  font-weight: normal !important;
  font-style: italic !important;
}

/* Highlighted/Sorted Column */
/* Highlighted/Sorted Column - DISABLED per user request */
.highlight-cell {
  /* Use STRONG box-shadow inset to overlay color on top of background-color */
  /* Inset shadow renders ABOVE background-color but BELOW text content */
  /* Increased opacity in variables to ensure visibility on colored cells */
  box-shadow: none !important;
  background-image: none !important;
}

/* Sort Arrows (Unicode) */
th.sort-asc::after {
  content: "\00A0 \25B2"; /* Up Arrow */
  color: var(--fg-color) !important;
  opacity: 1;
  display: inline-block;
  vertical-align: middle;
  position: relative;
  top: -2px;
}

th.sort-desc::after {
  content: "\00A0 \25BC"; /* Down Arrow */
  color: var(--fg-color) !important;
  opacity: 1;
  display: inline-block;
  vertical-align: middle;
  position: relative;
  top: -2px;
}

.grid-table:not(.no-sticky) th {
  background-color: var(--header-bg);
  position: sticky;
  top: -5px; /* User request: Scroll extra 5px up */
  z-index: 10;
  font-weight: 600;
  /* text-align: center; REMOVED */
  padding-right: 15px; /* Guaranteed space for Arrow */
}

/* Ensure stacking context for highlight overlay */
.grid-table td {
  position: relative;
  z-index: 1;
}

/* Limit width for specific large tables (User Request) */
#summaryTable, #timerTable {
  width: fit-content;
  table-layout: fixed;
  margin: 0 auto;
}

/* Enforce Right Alignment for Index (First Column) */
/* Exclude Ticker/Name if they happen to be first */
.grid-table td:first-child:not(.col-ticker):not(.col-name),
.grid-table th:first-child:not(.col-ticker):not(.col-name) {
  text-align: right !important;
}

/* STICKY COLUMNS (User Request) */
/* Freeze Ix, Ticker, and Name columns */

/* Common Sticky Styles */
.grid-table:not(.no-sticky) th.col-ix,
.grid-table:not(.no-sticky) td.col-ix,
.grid-table:not(.no-sticky) th.col-ticker,
.grid-table:not(.no-sticky) td.col-ticker,
.grid-table:not(.no-sticky) th.col-name,
.grid-table:not(.no-sticky) td.col-name {
  position: sticky !important; /* Force override */
  z-index: 15; /* High z-index so borders stay on top during scroll */
  background-color: var(--table-bg);
  /* borders handled by generic td/th */
}

/* 1. Index Column (Width 60px) */
.grid-table:not(.no-sticky) th.col-ix, .grid-table:not(.no-sticky) td.col-ix {
  left: 0;
  border-right: 1px solid var(--border-color);
}

/* 2. Ticker Column (Width 100px, Start 60px) */
.grid-table:not(.no-sticky) th.col-ticker, .grid-table:not(.no-sticky) td.col-ticker {
  left: 60px;
  border-right: 1px solid var(--border-color);
}

/* 3. Name Column (Width 240px, Start 160px) */
.grid-table:not(.no-sticky) th.col-name, .grid-table:not(.no-sticky) td.col-name {
  left: 160px;
  border-right: 3px solid
    var(--border-color); /* 3x thickness for frozen separator */
}

/* HEADERS (Top Row) must sit on top of sticky columns */
.grid-table:not(.no-sticky) th.col-ix,
.grid-table:not(.no-sticky) th.col-ticker,
.grid-table:not(.no-sticky) th.col-name {
  z-index: 20; /* Higher than data column sticky (15) */
  background-color: var(--header-bg);
}

/* Ensure hover state works on sticky columns */
.grid-table tr:hover td.col-ix,
.grid-table tr:hover td.col-ticker,
.grid-table tr:hover td.col-name {
  background-color: var(--hover-bg);
}

body.solarized-light .grid-table th {
  border-color: #b58900;
}

.card {
  background-color: var(--panel);
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  padding: 20px; /* Restored default padding */
  margin-bottom: 20px;
  /* overflow: hidden;  REMOVED to allow sticky headers/columns to work with body scroll */
  box-sizing: border-box;
}

/* Special override for Correlation Matrix to prevent sticky column shift */
/* Removed overrides to unify scrolling behavior with Summary */

/* Controls and Palette Dropdown */
/* Report Header (Title + Widgets) */
.report-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  flex-wrap: wrap;
  gap: 15px;
}

/* Controls Group (Buttons/Dropdowns) */
.controls-group, .controls {
  display: flex;
  gap: 10px;
  align-items: center;
}

select {
  padding: 2px 10px;
  font-size: 21px;
  border-radius: 4px;
  border: 1px solid var(--border-color);
  background-color: var(--bg-color);
  color: var(--fg-color);
  transition: all 0.2s;
  height: 40px;
  width: 180px;
}

select:focus {
  outline: none;
  border-color: var(--highlight-color);
}

option:checked {
  background-color: var(--highlight-color);
  color: #fff;
}

/* Custom Palette Dropdown */
.palette-dropdown {
  position: relative;
  display: inline-block;
  font-size: 14px;
  user-select: none;
}

.palette-button {
  padding: 2px 12px;
  border: 1px solid var(--border-color);
  background: var(--bg-color); /* Default, overridden by JS */
  color: #000; /* Text color on gradient */
  cursor: pointer;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 180px;
  height: 40px;
  font-weight: bold;
  font-size: 21px;
  text-shadow: 0 1px 2px rgba(255, 255, 255, 0.8);
  box-sizing: border-box;
}

.palette-button span {
  background: rgba(255, 255, 255, 0.7);
  padding: 2px 6px;
  border-radius: 3px;
}

.palette-preview {
  height: 14px;
  width: 80px;
  border-radius: 2px;
  border: 1px solid #888;
}

.palette-menu {
  display: none;
  position: absolute;
  top: 100%;
  right: 0;
  background: var(--bg-color);
  border: 1px solid var(--border-color);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  max-height: 400px;
  overflow-y: auto;
  z-index: 100;
  min-width: 180px;
  margin-top: 4px;
  border-radius: 4px;
}

.palette-item {
  padding: 8px 12px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border-bottom: 1px solid var(--border-color);
}

.palette-item:hover {
  background: var(--hover-bg);
}

.palette-item.selected {
  background: var(--highlight-color);
  color: #fff;
}

.palette-item:last-child {
  border-bottom: none;
}

#palette-toggle {
  display: none;
}
#palette-toggle:checked ~ .palette-menu {
  display: block;
}

/* --- Common UI Components --- */

h1 {
  font-size: 36px;
  font-weight: 700;
  margin: 0;
  color: var(--fg-color);
}

.card h3 {
  text-align: center;
  margin-top: 0;
}

.report-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--border-color);
}

.controls-group {
  display: flex;
  gap: 10px;
  align-items: center;
}

button, input, select, textarea {
  font-family: inherit;
}

/* Buttons */
.control-btn, .percent-toggle {
  /* Kept legacy name just in case, but prefer control-btn */
  height: 40px;
  min-width: 40px;
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
  padding: 0 12px;
  border-radius: 4px; /* More standard look */
  border: 1px solid var(--border-color);
  background-color: var(--panel);
  color: var(--fg-color);
  cursor: pointer;
  transition: all 0.2s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
}

.control-btn:hover, .percent-toggle:hover {
  background-color: var(--hover-bg);
  border-color: var(--fg-color);
}

.control-btn:active,
.percent-toggle:active,
.control-btn.active,
.percent-toggle.active {
  background-color: var(--highlight-color);
  color: #fff;
}

/* Tables */
table {
  width: 100%; /* Default, can be overridden */
  border-collapse: collapse;
  font-size: 18px; /* Base table size, 12px * 1.5 */
  margin-bottom: 30px;
}

th, td {
  padding: 6px 6px;
  text-align: right; /* Default Right for numbers (headers and body) */
  border-bottom: 1px solid var(--border-color);
  white-space: nowrap;
  /* Removed overflow: hidden to allow arrows */
  text-overflow: ellipsis;
}

th {
  background-color: var(--header-bg);
  font-weight: 700;
  position: sticky;
  top: 0;
  z-index: 10;
  cursor: pointer;
  user-select: none;
  border-bottom: 4px solid var(--border-color)
    !important; /* Thick header separator */
}

th:hover {
  box-shadow: inset 0 0 0 9999px var(--row-hover-color);
}

tr:hover {
  background-color: var(--hover-bg);
}

/* Robust Row Hover for Palette Cells */
tr:hover td {
  box-shadow: inset 0 0 0 9999px var(--row-hover-color) !important;
}

/* Sorting Arrows */

/* For CorrelationMatrix and others using specific container */
#table-container {
  /* overflow: auto; REMOVED to allow sticky headers to work relative to viewport. */
  width: fit-content;
  min-width: 100%;
}

/* Footer */
/* Standard Footer */
.footer {
  margin-top: 30px;
  padding-top: 15px;
  border-top: 1px solid var(--border-color);
  font-size: 18px;
  opacity: 0.9;
  text-align: center;
  font-weight: bold;
}

.copy-btn {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1.1rem;
    color: inherit;
    opacity: 0.6;
    transition: opacity 0.2s;
    margin-left: auto;
    padding: 0 4px;
}
.copy-btn:hover {
    opacity: 1;
}

body.sage-sea {
  /* Sage Sea – Light */
  --bg-color: #f0eeea;
  --fg-color: #02120f;
  --table-bg: #c3cfcc;
  --header-bg: #75908c;
  --border-color: #576f6b;
  --hover-bg: #6d7f7c;
  --highlight-color: #79948f;
  --panel: #97b3ae;
  --row-hover-color: rgba(0,0,0,0.08);
  --accent: #79948f;
  --accent-fg: #1c1c1c;
  --chart-grid: #02120f;
  --chart-axis: #02120f;
  --chart-bh: #02120f;
  --chart-long: rgba(44,160,44,0.8);
  --chart-short: rgba(214,39,40,0.8);
}

body.sage-sea-dark {
  /* Sage Sea – Dark */
  --bg-color: #0d1a18;
  --fg-color: #a3abaa;
  --table-bg: #152321;
  --header-bg: #283b38;
  --border-color: #3d4e4b;
  --hover-bg: #495855;
  --highlight-color: #48615d;
  --panel: #1c2c2a;
  --row-hover-color: rgba(255,255,255,0.08);
  --accent: #48615d;
  --accent-fg: #f4f4f4;
  --chart-grid: #a3abaa;
  --chart-axis: #a3abaa;
  --chart-bh: #a3abaa;
  --chart-long: rgba(44,160,44,0.8);
  --chart-short: rgba(214,39,40,0.8);
  --highlight-overlay: rgba(255,255,255,0.1);
}

body.mint-haze {
  /* Mint Haze – Light */
  --bg-color: #f0eeea;
  --fg-color: #101810;
  --table-bg: #fbfffc;
  --header-bg: #a7b5a8;
  --border-color: #808b81;
  --hover-bg: #97a098;
  --highlight-color: #b2c0b3;
  --panel: #d2e0d3;
  --row-hover-color: rgba(0,0,0,0.08);
  --accent: #b2c0b3;
  --accent-fg: #1c1c1c;
  --chart-grid: #101810;
  --chart-axis: #101810;
  --chart-bh: #101810;
  --chart-long: rgba(44,160,44,0.8);
  --chart-short: rgba(214,39,40,0.8);
}

body.mint-haze-dark {
  /* Mint Haze – Dark */
  --bg-color: #1c221d;
  --fg-color: #d2d6d2;
  --table-bg: #272d27;
  --header-bg: #424b42;
  --border-color: #5b635b;
  --hover-bg: #687069;
  --highlight-color: #687469;
  --panel: #313932;
  --row-hover-color: rgba(255,255,255,0.08);
  --accent: #687469;
  --accent-fg: #f4f4f4;
  --chart-grid: #d2d6d2;
  --chart-axis: #d2d6d2;
  --chart-bh: #d2d6d2;
  --chart-long: rgba(44,160,44,0.8);
  --chart-short: rgba(214,39,40,0.8);
  --highlight-overlay: rgba(255,255,255,0.1);
}

body.rose-linen {
  /* Rose Linen – Light */
  --bg-color: #f0eeea;
  --fg-color: #1e1310;
  --table-bg: #fffdfa;
  --header-bg: #c3b1aa;
  --border-color: #978882;
  --hover-bg: #ab9f9a;
  --highlight-color: #cfbdb6;
  --panel: #f0ddd6;
  --row-hover-color: rgba(0,0,0,0.08);
  --accent: #cfbdb6;
  --accent-fg: #1c1c1c;
  --chart-grid: #1e1310;
  --chart-axis: #1e1310;
  --chart-bh: #1e1310;
  --chart-long: rgba(44,160,44,0.8);
  --chart-short: rgba(214,39,40,0.8);
}

body.rose-linen-dark {
  /* Rose Linen – Dark */
  --bg-color: #28201d;
  --fg-color: #ded9d7;
  --table-bg: #332b28;
  --header-bg: #544743;
  --border-color: #6c615c;
  --hover-bg: #786e6a;
  --highlight-color: #806f69;
  --panel: #403632;
  --row-hover-color: rgba(255,255,255,0.08);
  --accent: #806f69;
  --accent-fg: #f4f4f4;
  --chart-grid: #ded9d7;
  --chart-axis: #ded9d7;
  --chart-bh: #ded9d7;
  --chart-long: rgba(44,160,44,0.8);
  --chart-short: rgba(214,39,40,0.8);
  --highlight-overlay: rgba(255,255,255,0.1);
}

body.petal-blush {
  /* Petal Blush – Light */
  --bg-color: #f0eeea;
  --fg-color: #240b06;
  --table-bg: #ffeeea;
  --header-bg: #c89b91;
  --border-color: #9c756d;
  --hover-bg: #ab8c86;
  --highlight-color: #d1a39a;
  --panel: #f2c3b9;
  --row-hover-color: rgba(0,0,0,0.08);
  --accent: #d1a39a;
  --accent-fg: #1c1c1c;
  --chart-grid: #240b06;
  --chart-axis: #240b06;
  --chart-bh: #240b06;
  --chart-long: rgba(44,160,44,0.8);
  --chart-short: rgba(214,39,40,0.8);
}

body.petal-blush-dark {
  /* Petal Blush – Dark */
  --bg-color: #2c1814;
  --fg-color: #d4c6c3;
  --table-bg: #37221e;
  --header-bg: #593b35;
  --border-color: #6f534d;
  --hover-bg: #79605b;
  --highlight-color: #895f57;
  --panel: #452c26;
  --row-hover-color: rgba(255,255,255,0.08);
  --accent: #895f57;
  --accent-fg: #f4f4f4;
  --chart-grid: #d4c6c3;
  --chart-axis: #d4c6c3;
  --chart-bh: #d4c6c3;
  --chart-long: rgba(44,160,44,0.8);
  --chart-short: rgba(214,39,40,0.8);
  --highlight-overlay: rgba(255,255,255,0.1);
}

body.warm-sand {
  /* Warm Sand – Light */
  --bg-color: #f0eeea;
  --fg-color: #18120b;
  --table-bg: #f4efea;
  --header-bg: #ada397;
  --border-color: #867d73;
  --hover-bg: #989189;
  --highlight-color: #b6aba0;
  --panel: #d6cbbf;
  --row-hover-color: rgba(0,0,0,0.08);
  --accent: #b6aba0;
  --accent-fg: #1c1c1c;
  --chart-grid: #18120b;
  --chart-axis: #18120b;
  --chart-bh: #18120b;
  --chart-long: rgba(44,160,44,0.8);
  --chart-short: rgba(214,39,40,0.8);
}

body.warm-sand-dark {
  /* Warm Sand – Dark */
  --bg-color: #211d17;
  --fg-color: #cac7c3;
  --table-bg: #2c2721;
  --header-bg: #494139;
  --border-color: #5f5951;
  --hover-bg: #6a655e;
  --highlight-color: #72685e;
  --panel: #37312b;
  --row-hover-color: rgba(255,255,255,0.08);
  --accent: #72685e;
  --accent-fg: #f4f4f4;
  --chart-grid: #cac7c3;
  --chart-axis: #cac7c3;
  --chart-bh: #cac7c3;
  --chart-long: rgba(44,160,44,0.8);
  --chart-short: rgba(214,39,40,0.8);
  --highlight-overlay: rgba(255,255,255,0.1);
}

body.sage-sea {
  /* Sage Sea – Light */
  --bg-color: #c6cecc;
  --fg-color: #02120f;
  --table-bg: #c3cfcc;
  --header-bg: #75908c;
  --border-color: #576f6b;
  --hover-bg: #6d7f7c;
  --highlight-color: #79948f;
  --panel: #97b3ae;
  --row-hover-color: rgba(0,0,0,0.08);
  --accent: #79948f;
  --accent-fg: #1c1c1c;
  --chart-grid: #02120f;
  --chart-axis: #02120f;
  --chart-bh: #02120f;
  --chart-long: rgba(44,160,44,0.8);
  --chart-short: rgba(214,39,40,0.8);
}

body.sage-sea-dark {
  /* Sage Sea – Dark */
  --bg-color: #0d1a18;
  --fg-color: #a3abaa;
  --table-bg: #152321;
  --header-bg: #283b38;
  --border-color: #3d4e4b;
  --hover-bg: #495855;
  --highlight-color: #48615d;
  --panel: #1c2c2a;
  --row-hover-color: rgba(255,255,255,0.08);
  --accent: #48615d;
  --accent-fg: #f4f4f4;
  --chart-grid: #a3abaa;
  --chart-axis: #a3abaa;
  --chart-bh: #a3abaa;
  --chart-long: rgba(44,160,44,0.8);
  --chart-short: rgba(214,39,40,0.8);
  --highlight-overlay: rgba(255,255,255,0.1);
}

body.mint-haze {
  /* Mint Haze – Light */
  --bg-color: #fafefa;
  --fg-color: #101810;
  --table-bg: #fbfffc;
  --header-bg: #a7b5a8;
  --border-color: #808b81;
  --hover-bg: #97a098;
  --highlight-color: #b2c0b3;
  --panel: #d2e0d3;
  --row-hover-color: rgba(0,0,0,0.08);
  --accent: #b2c0b3;
  --accent-fg: #1c1c1c;
  --chart-grid: #101810;
  --chart-axis: #101810;
  --chart-bh: #101810;
  --chart-long: rgba(44,160,44,0.8);
  --chart-short: rgba(214,39,40,0.8);
}

body.mint-haze-dark {
  /* Mint Haze – Dark */
  --bg-color: #1c221d;
  --fg-color: #d2d6d2;
  --table-bg: #272d27;
  --header-bg: #424b42;
  --border-color: #5b635b;
  --hover-bg: #687069;
  --highlight-color: #687469;
  --panel: #313932;
  --row-hover-color: rgba(255,255,255,0.08);
  --accent: #687469;
  --accent-fg: #f4f4f4;
  --chart-grid: #d2d6d2;
  --chart-axis: #d2d6d2;
  --chart-bh: #d2d6d2;
  --chart-long: rgba(44,160,44,0.8);
  --chart-short: rgba(214,39,40,0.8);
  --highlight-overlay: rgba(255,255,255,0.1);
}

body.rose-linen {
  /* Rose Linen – Light */
  --bg-color: #fffefc;
  --fg-color: #1e1310;
  --table-bg: #fffdfa;
  --header-bg: #c3b1aa;
  --border-color: #978882;
  --hover-bg: #ab9f9a;
  --highlight-color: #cfbdb6;
  --panel: #f0ddd6;
  --row-hover-color: rgba(0,0,0,0.08);
  --accent: #cfbdb6;
  --accent-fg: #1c1c1c;
  --chart-grid: #1e1310;
  --chart-axis: #1e1310;
  --chart-bh: #1e1310;
  --chart-long: rgba(44,160,44,0.8);
  --chart-short: rgba(214,39,40,0.8);
}

body.rose-linen-dark {
  /* Rose Linen – Dark */
  --bg-color: #28201d;
  --fg-color: #ded9d7;
  --table-bg: #332b28;
  --header-bg: #544743;
  --border-color: #6c615c;
  --hover-bg: #786e6a;
  --highlight-color: #806f69;
  --panel: #403632;
  --row-hover-color: rgba(255,255,255,0.08);
  --accent: #806f69;
  --accent-fg: #f4f4f4;
  --chart-grid: #ded9d7;
  --chart-axis: #ded9d7;
  --chart-bh: #ded9d7;
  --chart-long: rgba(44,160,44,0.8);
  --chart-short: rgba(214,39,40,0.8);
  --highlight-overlay: rgba(255,255,255,0.1);
}

body.petal-blush {
  /* Petal Blush – Light */
  --bg-color: #fbede9;
  --fg-color: #240b06;
  --table-bg: #ffeeea;
  --header-bg: #c89b91;
  --border-color: #9c756d;
  --hover-bg: #ab8c86;
  --highlight-color: #d1a39a;
  --panel: #f2c3b9;
  --row-hover-color: rgba(0,0,0,0.08);
  --accent: #d1a39a;
  --accent-fg: #1c1c1c;
  --chart-grid: #240b06;
  --chart-axis: #240b06;
  --chart-bh: #240b06;
  --chart-long: rgba(44,160,44,0.8);
  --chart-short: rgba(214,39,40,0.8);
}

body.petal-blush-dark {
  /* Petal Blush – Dark */
  --bg-color: #2c1814;
  --fg-color: #d4c6c3;
  --table-bg: #37221e;
  --header-bg: #593b35;
  --border-color: #6f534d;
  --hover-bg: #79605b;
  --highlight-color: #895f57;
  --panel: #452c26;
  --row-hover-color: rgba(255,255,255,0.08);
  --accent: #895f57;
  --accent-fg: #f4f4f4;
  --chart-grid: #d4c6c3;
  --chart-axis: #d4c6c3;
  --chart-bh: #d4c6c3;
  --chart-long: rgba(44,160,44,0.8);
  --chart-short: rgba(214,39,40,0.8);
  --highlight-overlay: rgba(255,255,255,0.1);
}

body.warm-sand {
  /* Warm Sand – Light */
  --bg-color: #f0ede9;
  --fg-color: #18120b;
  --table-bg: #f4efea;
  --header-bg: #ada397;
  --border-color: #867d73;
  --hover-bg: #989189;
  --highlight-color: #b6aba0;
  --panel: #d6cbbf;
  --row-hover-color: rgba(0,0,0,0.08);
  --accent: #b6aba0;
  --accent-fg: #1c1c1c;
  --chart-grid: #18120b;
  --chart-axis: #18120b;
  --chart-bh: #18120b;
  --chart-long: rgba(44,160,44,0.8);
  --chart-short: rgba(214,39,40,0.8);
}

body.warm-sand-dark {
  /* Warm Sand – Dark */
  --bg-color: #211d17;
  --fg-color: #cac7c3;
  --table-bg: #2c2721;
  --header-bg: #494139;
  --border-color: #5f5951;
  --hover-bg: #6a655e;
  --highlight-color: #72685e;
  --panel: #37312b;
  --row-hover-color: rgba(255,255,255,0.08);
  --accent: #72685e;
  --accent-fg: #f4f4f4;
  --chart-grid: #cac7c3;
  --chart-axis: #cac7c3;
  --chart-bh: #cac7c3;
  --chart-long: rgba(44,160,44,0.8);
  --chart-short: rgba(214,39,40,0.8);
  --highlight-overlay: rgba(255,255,255,0.1);
}

/* ── Lazy Days Theme Aggregate & Title Styles ───────────────────── */

/* Table section title (h2 with copy-btn) */
.card > h2:has(.copy-btn) {
  background: var(--accent, var(--header-bg));
  color: var(--accent-fg, var(--fg-color));
  padding: 10px 16px;
  border-radius: 8px;
  margin: -20px -20px 14px -20px;
  display: flex;
  align-items: center;
  font-size: 1.15em;
}

.card > h2:has(.copy-btn) .copy-btn {
  margin-left: auto;
  color: var(--accent-fg, inherit);
  opacity: 0.75;
}

/* Aggregate footer rows */
.grid-table tfoot tr {
  background: var(--accent, var(--header-bg)) !important;
  color: var(--accent-fg, var(--fg-color)) !important;
  font-weight: bold !important;
}

.grid-table tfoot td {
  border-top: 2px solid var(--border-color) !important;
  font-weight: bold !important;
}

.grid-table tfoot td:first-child {
  text-align: left !important;
  font-weight: bold !important;
}