/* Color palettes — work with data-theme=light|dark.
   Side panel (--sidebar-*) and right panel (--body-bg, --card-bg, --text). */

[data-color="navy"] {
  --sidebar-bg: #f3f6fb;
  --sidebar-text: #1a3148;
  --sidebar-border: rgba(22, 50, 79, 0.1);
  --sidebar-hover-bg: rgba(22, 50, 79, 0.08);
  --sidebar-active-bg: #16324f;
  --sidebar-active-fg: #ffffff;
  --sidebar-muted: rgba(22, 50, 79, 0.55);
  --sidebar-line: rgba(22, 50, 79, 0.12);
  --sidebar-heading: #13263d;
  --primary: #16324f;
  --accent: #16324f;
  --accent-dark: #0e2238;
  --card-bg: #ffffff;
  --body-bg: #e7eef6;
  --text: #13263d;
  --muted: #5b7088;
  --border: rgba(22, 50, 79, 0.14);
  --shadow: 0 1px 2px rgba(22, 50, 79, 0.06), 0 8px 24px rgba(22, 50, 79, 0.07);
  --glass-bg: #ffffff;
  --glass-border: rgba(22, 50, 79, 0.12);
  --surface-elevated: #f3f7fb;
  --surface-2: #d9e4f0;
  --focus-ring: rgba(22, 50, 79, 0.26);
  --hover-fill: rgba(22, 50, 79, 0.06);
  --row-fill: rgba(22, 50, 79, 0.04);
  --btn-brand-fg: #ffffff;
  --btn-brand-bg: #16324f;
  --btn-brand-border: #16324f;
  --bs-primary: #16324f;
  --bs-primary-rgb: 22, 50, 79;
  --bs-link-color: #16324f;
  --bs-link-hover-color: #0e2238;
}

[data-theme="dark"][data-color="navy"] {
  --sidebar-bg: #0b1726;
  --sidebar-text: rgba(214, 230, 245, 0.78);
  --sidebar-border: rgba(180, 210, 235, 0.12);
  --sidebar-hover-bg: rgba(186, 214, 238, 0.08);
  --sidebar-active-bg: rgba(186, 214, 238, 0.16);
  --sidebar-active-fg: #ffffff;
  --sidebar-muted: rgba(214, 230, 245, 0.5);
  --sidebar-line: rgba(180, 210, 235, 0.14);
  --sidebar-heading: #e8f1f8;
  --primary: #c9dcea;
  --accent: #c9dcea;
  --accent-dark: #e8f2fa;
  --card-bg: #132033;
  --body-bg: #0a1220;
  --text: #e8f1f8;
  --muted: #8aa3ba;
  --border: rgba(186, 214, 238, 0.14);
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 10px 28px rgba(0, 0, 0, 0.45);
  --glass-bg: #132033;
  --glass-border: rgba(186, 214, 238, 0.12);
  --surface-elevated: #18283d;
  --surface-2: #1c3048;
  --focus-ring: rgba(186, 214, 238, 0.28);
  --hover-fill: rgba(186, 214, 238, 0.07);
  --row-fill: rgba(186, 214, 238, 0.05);
  --btn-brand-fg: #0a1220;
  --btn-brand-bg: #d6e6f5;
  --btn-brand-border: #d6e6f5;
  --bs-primary: #d6e6f5;
  --bs-primary-rgb: 214, 230, 245;
  --bs-link-color: #d6e6f5;
  --bs-link-hover-color: #ffffff;
}

[data-color="forest"] {
  --sidebar-bg: #f3f8f5;
  --sidebar-text: #1a3328;
  --sidebar-border: rgba(27, 67, 50, 0.1);
  --sidebar-hover-bg: rgba(27, 67, 50, 0.08);
  --sidebar-active-bg: #1b4332;
  --sidebar-active-fg: #ffffff;
  --sidebar-muted: rgba(27, 67, 50, 0.55);
  --sidebar-line: rgba(27, 67, 50, 0.12);
  --sidebar-heading: #143024;
  --primary: #1b4332;
  --accent: #1b4332;
  --accent-dark: #10291e;
  --card-bg: #ffffff;
  --body-bg: #e8f2ec;
  --text: #143024;
  --muted: #547063;
  --border: rgba(27, 67, 50, 0.14);
  --shadow: 0 1px 2px rgba(27, 67, 50, 0.06), 0 8px 24px rgba(27, 67, 50, 0.07);
  --glass-bg: #ffffff;
  --glass-border: rgba(27, 67, 50, 0.12);
  --surface-elevated: #f2f8f4;
  --surface-2: #d7e8de;
  --focus-ring: rgba(27, 67, 50, 0.26);
  --hover-fill: rgba(27, 67, 50, 0.06);
  --row-fill: rgba(27, 67, 50, 0.04);
  --btn-brand-fg: #ffffff;
  --btn-brand-bg: #1b4332;
  --btn-brand-border: #1b4332;
  --bs-primary: #1b4332;
  --bs-primary-rgb: 27, 67, 50;
  --bs-link-color: #1b4332;
  --bs-link-hover-color: #10291e;
}

[data-theme="dark"][data-color="forest"] {
  --sidebar-bg: #0d2118;
  --sidebar-text: rgba(214, 237, 222, 0.78);
  --sidebar-border: rgba(170, 214, 186, 0.12);
  --sidebar-hover-bg: rgba(180, 220, 190, 0.08);
  --sidebar-active-bg: rgba(180, 220, 190, 0.16);
  --sidebar-active-fg: #ffffff;
  --sidebar-muted: rgba(214, 237, 222, 0.5);
  --sidebar-line: rgba(170, 214, 186, 0.14);
  --sidebar-heading: #e6f5ec;
  --primary: #c5e3d1;
  --accent: #c5e3d1;
  --accent-dark: #e4f5eb;
  --card-bg: #13261c;
  --body-bg: #0a1812;
  --text: #e6f5ec;
  --muted: #8aada0;
  --border: rgba(180, 220, 190, 0.14);
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 10px 28px rgba(0, 0, 0, 0.45);
  --glass-bg: #13261c;
  --glass-border: rgba(180, 220, 190, 0.12);
  --surface-elevated: #183024;
  --surface-2: #1c382a;
  --focus-ring: rgba(180, 220, 190, 0.28);
  --hover-fill: rgba(180, 220, 190, 0.07);
  --row-fill: rgba(180, 220, 190, 0.05);
  --btn-brand-fg: #0a1812;
  --btn-brand-bg: #d4edde;
  --btn-brand-border: #d4edde;
  --bs-primary: #d4edde;
  --bs-primary-rgb: 212, 237, 222;
  --bs-link-color: #d4edde;
  --bs-link-hover-color: #ffffff;
}

[data-color="wine"] {
  --sidebar-bg: #faf4f6;
  --sidebar-text: #3d1822;
  --sidebar-border: rgba(92, 36, 50, 0.1);
  --sidebar-hover-bg: rgba(92, 36, 50, 0.08);
  --sidebar-active-bg: #5c2432;
  --sidebar-active-fg: #ffffff;
  --sidebar-muted: rgba(92, 36, 50, 0.55);
  --sidebar-line: rgba(92, 36, 50, 0.12);
  --sidebar-heading: #3d1822;
  --primary: #5c2432;
  --accent: #5c2432;
  --accent-dark: #3d1620;
  --card-bg: #ffffff;
  --body-bg: #f6ebee;
  --text: #3d1822;
  --muted: #7a5560;
  --border: rgba(92, 36, 50, 0.14);
  --shadow: 0 1px 2px rgba(92, 36, 50, 0.06), 0 8px 24px rgba(92, 36, 50, 0.07);
  --glass-bg: #ffffff;
  --glass-border: rgba(92, 36, 50, 0.12);
  --surface-elevated: #faf3f5;
  --surface-2: #eddce1;
  --focus-ring: rgba(92, 36, 50, 0.26);
  --hover-fill: rgba(92, 36, 50, 0.06);
  --row-fill: rgba(92, 36, 50, 0.04);
  --btn-brand-fg: #ffffff;
  --btn-brand-bg: #5c2432;
  --btn-brand-border: #5c2432;
  --bs-primary: #5c2432;
  --bs-primary-rgb: 92, 36, 50;
  --bs-link-color: #5c2432;
  --bs-link-hover-color: #3d1620;
}

[data-theme="dark"][data-color="wine"] {
  --sidebar-bg: #2a1219;
  --sidebar-text: rgba(246, 220, 226, 0.8);
  --sidebar-border: rgba(230, 186, 196, 0.14);
  --sidebar-hover-bg: rgba(232, 190, 200, 0.08);
  --sidebar-active-bg: rgba(232, 190, 200, 0.16);
  --sidebar-active-fg: #ffffff;
  --sidebar-muted: rgba(246, 220, 226, 0.5);
  --sidebar-line: rgba(230, 186, 196, 0.14);
  --sidebar-heading: #f7e8ec;
  --primary: #ecc6cf;
  --accent: #ecc6cf;
  --accent-dark: #f7e0e5;
  --card-bg: #2a171d;
  --body-bg: #190e12;
  --text: #f7e8ec;
  --muted: #b38e97;
  --border: rgba(232, 190, 200, 0.16);
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 10px 28px rgba(0, 0, 0, 0.45);
  --glass-bg: #2a171d;
  --glass-border: rgba(232, 190, 200, 0.12);
  --surface-elevated: #341c24;
  --surface-2: #3d222b;
  --focus-ring: rgba(232, 190, 200, 0.28);
  --hover-fill: rgba(232, 190, 200, 0.07);
  --row-fill: rgba(232, 190, 200, 0.05);
  --btn-brand-fg: #190e12;
  --btn-brand-bg: #f0d4da;
  --btn-brand-border: #f0d4da;
  --bs-primary: #f0d4da;
  --bs-primary-rgb: 240, 212, 218;
  --bs-link-color: #f0d4da;
  --bs-link-hover-color: #ffffff;
}

[data-color="slate"] {
  --sidebar-bg: #f4f6f8;
  --sidebar-text: #1e293b;
  --sidebar-border: rgba(51, 65, 85, 0.1);
  --sidebar-hover-bg: rgba(51, 65, 85, 0.08);
  --sidebar-active-bg: #334155;
  --sidebar-active-fg: #ffffff;
  --sidebar-muted: rgba(51, 65, 85, 0.55);
  --sidebar-line: rgba(51, 65, 85, 0.12);
  --sidebar-heading: #1e293b;
  --primary: #334155;
  --accent: #334155;
  --accent-dark: #1e293b;
  --card-bg: #ffffff;
  --body-bg: #e8edf3;
  --text: #1e293b;
  --muted: #5b6b7c;
  --border: rgba(51, 65, 85, 0.14);
  --shadow: 0 1px 2px rgba(51, 65, 85, 0.06), 0 8px 24px rgba(51, 65, 85, 0.07);
  --glass-bg: #ffffff;
  --glass-border: rgba(51, 65, 85, 0.12);
  --surface-elevated: #f4f6f9;
  --surface-2: #d8dee7;
  --focus-ring: rgba(51, 65, 85, 0.26);
  --hover-fill: rgba(51, 65, 85, 0.06);
  --row-fill: rgba(51, 65, 85, 0.04);
  --btn-brand-fg: #ffffff;
  --btn-brand-bg: #334155;
  --btn-brand-border: #334155;
  --bs-primary: #334155;
  --bs-primary-rgb: 51, 65, 85;
  --bs-link-color: #334155;
  --bs-link-hover-color: #1e293b;
}

[data-theme="dark"][data-color="slate"] {
  --sidebar-bg: #151b24;
  --sidebar-text: rgba(220, 230, 240, 0.78);
  --sidebar-border: rgba(180, 196, 214, 0.12);
  --sidebar-hover-bg: rgba(186, 200, 216, 0.08);
  --sidebar-active-bg: rgba(186, 200, 216, 0.16);
  --sidebar-active-fg: #ffffff;
  --sidebar-muted: rgba(220, 230, 240, 0.5);
  --sidebar-line: rgba(180, 196, 214, 0.14);
  --sidebar-heading: #e8eef5;
  --primary: #cbd5e1;
  --accent: #cbd5e1;
  --accent-dark: #e2e8f0;
  --card-bg: #1b2330;
  --body-bg: #0f141c;
  --text: #e8eef5;
  --muted: #94a3b8;
  --border: rgba(186, 200, 216, 0.14);
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 10px 28px rgba(0, 0, 0, 0.45);
  --glass-bg: #1b2330;
  --glass-border: rgba(186, 200, 216, 0.12);
  --surface-elevated: #222c3b;
  --surface-2: #283446;
  --focus-ring: rgba(186, 200, 216, 0.28);
  --hover-fill: rgba(186, 200, 216, 0.07);
  --row-fill: rgba(186, 200, 216, 0.05);
  --btn-brand-fg: #0f141c;
  --btn-brand-bg: #d7e0ea;
  --btn-brand-border: #d7e0ea;
  --bs-primary: #d7e0ea;
  --bs-primary-rgb: 215, 224, 234;
  --bs-link-color: #d7e0ea;
  --bs-link-hover-color: #ffffff;
}

[data-color="teal"] {
  --sidebar-bg: #f2f8f9;
  --sidebar-text: #123640;
  --sidebar-border: rgba(15, 76, 92, 0.1);
  --sidebar-hover-bg: rgba(15, 76, 92, 0.08);
  --sidebar-active-bg: #0f4c5c;
  --sidebar-active-fg: #ffffff;
  --sidebar-muted: rgba(15, 76, 92, 0.55);
  --sidebar-line: rgba(15, 76, 92, 0.12);
  --sidebar-heading: #123640;
  --primary: #0f4c5c;
  --accent: #0f4c5c;
  --accent-dark: #0a3540;
  --card-bg: #ffffff;
  --body-bg: #e6f3f5;
  --text: #123640;
  --muted: #54747c;
  --border: rgba(15, 76, 92, 0.14);
  --shadow: 0 1px 2px rgba(15, 76, 92, 0.06), 0 8px 24px rgba(15, 76, 92, 0.07);
  --glass-bg: #ffffff;
  --glass-border: rgba(15, 76, 92, 0.12);
  --surface-elevated: #f1f8f9;
  --surface-2: #d3e8ec;
  --focus-ring: rgba(15, 76, 92, 0.26);
  --hover-fill: rgba(15, 76, 92, 0.06);
  --row-fill: rgba(15, 76, 92, 0.04);
  --btn-brand-fg: #ffffff;
  --btn-brand-bg: #0f4c5c;
  --btn-brand-border: #0f4c5c;
  --bs-primary: #0f4c5c;
  --bs-primary-rgb: 15, 76, 92;
  --bs-link-color: #0f4c5c;
  --bs-link-hover-color: #0a3540;
}

[data-theme="dark"][data-color="teal"] {
  --sidebar-bg: #0a2a33;
  --sidebar-text: rgba(210, 236, 240, 0.8);
  --sidebar-border: rgba(160, 214, 222, 0.14);
  --sidebar-hover-bg: rgba(170, 220, 226, 0.08);
  --sidebar-active-bg: rgba(170, 220, 226, 0.16);
  --sidebar-active-fg: #ffffff;
  --sidebar-muted: rgba(210, 236, 240, 0.5);
  --sidebar-line: rgba(160, 214, 222, 0.14);
  --sidebar-heading: #e5f5f7;
  --primary: #b9e3ea;
  --accent: #b9e3ea;
  --accent-dark: #def3f6;
  --card-bg: #12333b;
  --body-bg: #0a1f25;
  --text: #e5f5f7;
  --muted: #86aeb6;
  --border: rgba(170, 220, 226, 0.16);
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 10px 28px rgba(0, 0, 0, 0.45);
  --glass-bg: #12333b;
  --glass-border: rgba(170, 220, 226, 0.12);
  --surface-elevated: #173d46;
  --surface-2: #1c4752;
  --focus-ring: rgba(170, 220, 226, 0.28);
  --hover-fill: rgba(170, 220, 226, 0.07);
  --row-fill: rgba(170, 220, 226, 0.05);
  --btn-brand-fg: #0a1f25;
  --btn-brand-bg: #c8ebf0;
  --btn-brand-border: #c8ebf0;
  --bs-primary: #c8ebf0;
  --bs-primary-rgb: 200, 235, 240;
  --bs-link-color: #c8ebf0;
  --bs-link-hover-color: #ffffff;
}

[data-color="sand"] {
  --sidebar-bg: #f8f5f0;
  --sidebar-text: #3d2d1a;
  --sidebar-border: rgba(107, 79, 46, 0.1);
  --sidebar-hover-bg: rgba(107, 79, 46, 0.08);
  --sidebar-active-bg: #6b4f2e;
  --sidebar-active-fg: #ffffff;
  --sidebar-muted: rgba(107, 79, 46, 0.55);
  --sidebar-line: rgba(107, 79, 46, 0.12);
  --sidebar-heading: #3d2d1a;
  --primary: #6b4f2e;
  --accent: #6b4f2e;
  --accent-dark: #4a351e;
  --card-bg: #fffdf9;
  --body-bg: #f4eee4;
  --text: #3d2d1a;
  --muted: #7a6a54;
  --border: rgba(107, 79, 46, 0.16);
  --shadow: 0 1px 2px rgba(107, 79, 46, 0.06), 0 8px 24px rgba(107, 79, 46, 0.07);
  --glass-bg: #fffdf9;
  --glass-border: rgba(107, 79, 46, 0.12);
  --surface-elevated: #faf6ef;
  --surface-2: #eadfcb;
  --focus-ring: rgba(107, 79, 46, 0.26);
  --hover-fill: rgba(107, 79, 46, 0.06);
  --row-fill: rgba(107, 79, 46, 0.04);
  --btn-brand-fg: #ffffff;
  --btn-brand-bg: #6b4f2e;
  --btn-brand-border: #6b4f2e;
  --bs-primary: #6b4f2e;
  --bs-primary-rgb: 107, 79, 46;
  --bs-link-color: #6b4f2e;
  --bs-link-hover-color: #4a351e;
}

[data-theme="dark"][data-color="sand"] {
  --sidebar-bg: #2a1f13;
  --sidebar-text: rgba(242, 226, 198, 0.82);
  --sidebar-border: rgba(220, 190, 140, 0.14);
  --sidebar-hover-bg: rgba(228, 206, 168, 0.08);
  --sidebar-active-bg: rgba(228, 206, 168, 0.16);
  --sidebar-active-fg: #ffffff;
  --sidebar-muted: rgba(242, 226, 198, 0.5);
  --sidebar-line: rgba(220, 190, 140, 0.14);
  --sidebar-heading: #f4ead8;
  --primary: #e6d3b0;
  --accent: #e6d3b0;
  --accent-dark: #f4e8d0;
  --card-bg: #2a2218;
  --body-bg: #19140e;
  --text: #f4ead8;
  --muted: #b3a184;
  --border: rgba(228, 206, 168, 0.16);
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 10px 28px rgba(0, 0, 0, 0.45);
  --glass-bg: #2a2218;
  --glass-border: rgba(228, 206, 168, 0.12);
  --surface-elevated: #342a1e;
  --surface-2: #3d3224;
  --focus-ring: rgba(228, 206, 168, 0.28);
  --hover-fill: rgba(228, 206, 168, 0.07);
  --row-fill: rgba(228, 206, 168, 0.05);
  --btn-brand-fg: #19140e;
  --btn-brand-bg: #ecd9b6;
  --btn-brand-border: #ecd9b6;
  --bs-primary: #ecd9b6;
  --bs-primary-rgb: 236, 217, 182;
  --bs-link-color: #ecd9b6;
  --bs-link-hover-color: #ffffff;
}

/* Picker */
.color-theme-dropdown .topbar-color-btn {
  width: auto !important;
  min-width: 34px;
  height: 32px !important;
  gap: 0.4rem;
  padding: 0 0.6rem !important;
  border-radius: 999px !important;
  border: 1px solid var(--border) !important;
  background: var(--surface-elevated) !important;
  color: var(--text) !important;
}
.color-theme-dropdown .topbar-color-btn .color-theme-dot {
  width: 0.7rem;
  height: 0.7rem;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.45);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.18);
  background: var(--btn-brand-bg);
  flex-shrink: 0;
}
[data-theme="light"][data-color="mono"] .color-theme-dropdown .topbar-color-btn .color-theme-dot {
  background: #111111;
}
[data-theme="dark"][data-color="mono"] .color-theme-dropdown .topbar-color-btn .color-theme-dot {
  background: #f4f4f5;
}
.color-theme-menu {
  min-width: 14.5rem;
  padding: 0.7rem 0.75rem 0.8rem;
  background: var(--card-bg) !important;
  border: 1px solid var(--border) !important;
  color: var(--text);
}
.color-theme-menu__title {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 0.55rem;
}
.color-theme-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.4rem;
}
.color-theme-swatch {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  width: 100%;
  margin: 0;
  padding: 0.4rem 0.45rem;
  border: 1px solid var(--border);
  border-radius: 0.5rem;
  background: var(--surface-elevated);
  color: var(--text);
  font-size: 0.75rem;
  font-weight: 600;
  text-align: left;
}
.color-theme-swatch:hover,
.color-theme-swatch.is-active {
  border-color: var(--text);
}
.color-theme-swatch.is-active {
  box-shadow: inset 0 0 0 1px var(--text);
}
.color-theme-swatch__chip {
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  flex-shrink: 0;
  border: 1px solid rgba(0, 0, 0, 0.18);
}
.color-theme-swatch[data-color-pick="mono"] .color-theme-swatch__chip {
  background: linear-gradient(135deg, #111 50%, #f4f4f5 50%);
}
.color-theme-swatch[data-color-pick="navy"] .color-theme-swatch__chip { background: #16324f; }
.color-theme-swatch[data-color-pick="forest"] .color-theme-swatch__chip { background: #1b4332; }
.color-theme-swatch[data-color-pick="wine"] .color-theme-swatch__chip { background: #5c2432; }
.color-theme-swatch[data-color-pick="slate"] .color-theme-swatch__chip { background: #334155; }
.color-theme-swatch[data-color-pick="teal"] .color-theme-swatch__chip { background: #0f4c5c; }
.color-theme-swatch[data-color-pick="sand"] .color-theme-swatch__chip { background: #6b4f2e; }

@media (max-width: 576px) {
  .color-theme-dropdown .topbar-color-btn .topbar-theme-label {
    display: none;
  }
  .color-theme-dropdown .topbar-color-btn {
    width: 32px !important;
    padding: 0 !important;
    justify-content: center;
  }
}