/* CrossBank personal colour themes. The layout and typography stay shared; only the atmosphere changes. */
html[data-theme] { --accent: var(--forest-2); }

html[data-theme="moss"] {
  --ink: #19312b; --ink-soft: #4e665c; --muted: #819189; --paper: #f5f3ee; --card: #fffdf9; --line: rgba(20, 42, 37, .12);
  --forest: #142a25; --forest-2: #2d6b55; --mint: #dcebe0; --mint-strong: #78a98b; --peach: #d1836e; --peach-pale: #f5e0d7; --lav: #ddd4e5; --blue: #d8e7ed;
  --theme-sidebar: #eeece7; --theme-sidebar-active: #e0ebe1; --theme-soft: #f1f6f0; --theme-glow: rgba(217, 233, 220, .8); --theme-avatar: var(--mint); --theme-avatar-ink: var(--forest);
}

html[data-theme="sea-glass"] {
  --ink: #17323a; --ink-soft: #4f6970; --muted: #7f969a; --paper: #f2f5f4; --card: #fcfffe; --line: rgba(23, 50, 58, .13);
  --forest: #14353a; --forest-2: #28727a; --mint: #d8eceb; --mint-strong: #73a7a9; --peach: #d48a75; --peach-pale: #f5dfd8; --lav: #dedbe9; --blue: #d8e8ee;
  --theme-sidebar: #e9f0ef; --theme-sidebar-active: #dceceb; --theme-soft: #eff6f5; --theme-glow: rgba(213, 234, 233, .82); --theme-avatar: var(--mint); --theme-avatar-ink: var(--forest);
}

html[data-theme="oat-clay"] {
  --ink: #3d312b; --ink-soft: #6f5d52; --muted: #97877d; --paper: #f5f0e8; --card: #fffaf2; --line: rgba(61, 49, 43, .14);
  --forest: #3d312b; --forest-2: #76503b; --mint: #dfe8d7; --mint-strong: #9caf84; --peach: #e2a17e; --peach-pale: #f4dfd2; --lav: #e7deea; --blue: #dfe7e7;
  --theme-sidebar: #ece5da; --theme-sidebar-active: #e4eadb; --theme-soft: #f5efe6; --theme-glow: rgba(235, 224, 203, .78); --theme-avatar: var(--mint); --theme-avatar-ink: var(--forest);
}

html[data-theme="lavender-dusk"] {
  --ink: #2f2a3e; --ink-soft: #625c70; --muted: #8e879b; --paper: #f5f2f7; --card: #fffdfd; --line: rgba(47, 42, 62, .13);
  --forest: #30293d; --forest-2: #6d5b86; --mint: #dfe9e4; --mint-strong: #91b4a2; --peach: #d79179; --peach-pale: #f3ddd8; --lav: #e4d9ef; --blue: #dbe4ee;
  --theme-sidebar: #ece8f0; --theme-sidebar-active: #e6deee; --theme-soft: #f2edf5; --theme-glow: rgba(229, 218, 239, .78); --theme-avatar: var(--lav); --theme-avatar-ink: var(--forest);
}

html[data-theme="butter-olive"] {
  --ink: #33402c; --ink-soft: #5e6d50; --muted: #8a967f; --paper: #f6f2e3; --card: #fffdf7; --line: rgba(51, 64, 44, .14);
  --forest: #354029; --forest-2: #688049; --mint: #e6edd5; --mint-strong: #a7bd76; --peach: #d58c6c; --peach-pale: #f0dfce; --lav: #e8def0; --blue: #dce9e9;
  --theme-sidebar: #eeeadd; --theme-sidebar-active: #e6ecd8; --theme-soft: #f5f0dd; --theme-glow: rgba(236, 232, 196, .8); --theme-avatar: var(--mint); --theme-avatar-ink: var(--forest);
}

html[data-theme="berry-paper"] {
  --ink: #392b34; --ink-soft: #6b5661; --muted: #97828d; --paper: #f6f0f1; --card: #fffdfb; --line: rgba(57, 43, 52, .13);
  --forest: #3d2634; --forest-2: #8a5368; --mint: #e1ebe0; --mint-strong: #8eaf94; --peach: #cf8a83; --peach-pale: #f0d9db; --lav: #e4d8e6; --blue: #dce6ec;
  --theme-sidebar: #eee5e8; --theme-sidebar-active: #eadce2; --theme-soft: #f5ecee; --theme-glow: rgba(239, 218, 225, .8); --theme-avatar: var(--peach-pale); --theme-avatar-ink: var(--forest);
}

html[data-theme] body {
  background: radial-gradient(circle at 94% -5%, var(--theme-glow), transparent 27rem), var(--paper);
}
#app.dashboard-app:not(.foundation-ready) { visibility: hidden; pointer-events: none; }
#app.dashboard-app.foundation-ready,
#app.guest-app-shell,
#app.trip-app-shell,
#app.prague-app-shell { visibility: visible; pointer-events: auto; }

html[data-theme] .app-shell { background: linear-gradient(90deg, var(--theme-sidebar) 0 250px, transparent 250px); }
@media (max-width: 780px) {
  html[data-theme] .app-shell,
  html[data-theme] .app-shell.sidebar-is-collapsed {
    background: var(--paper);
    background-image: none;
  }
}
html[data-theme] .sidebar { background: color-mix(in srgb, var(--theme-sidebar) 88%, transparent); }
html[data-theme] .nav-item.active,
html[data-theme] .nav-item:hover { background: var(--theme-sidebar-active); color: var(--forest); }
html[data-theme] .nav-item:hover { border-color: color-mix(in srgb, var(--forest-2) 16%, transparent); }
html[data-theme] .topbar { background: linear-gradient(to bottom, color-mix(in srgb, var(--paper) 96%, transparent) 60%, color-mix(in srgb, var(--paper) 0%, transparent)); }
html[data-theme] .login-art { background: radial-gradient(circle at 54% 42%, var(--forest-2) 0, var(--forest) 63%, var(--ink) 100%); }
html[data-theme] .welcome-banner { background: radial-gradient(circle at 86% 25%, color-mix(in srgb, var(--forest-2) 70%, transparent), transparent 17rem), linear-gradient(135deg, var(--forest), var(--forest-2)); }
html[data-theme] .login-panel h1 em,
html[data-theme] .welcome-banner em { color: var(--peach); }
html[data-theme] .current-profile { background: color-mix(in srgb, var(--card) 72%, transparent); }
html[data-theme] .current-profile > span:first-child,
html[data-theme] .profile-avatar-large,
html[data-theme] .profile-avatar-stage { background: var(--theme-avatar); color: var(--theme-avatar-ink); }
html[data-theme] .current-profile > span:first-child { color: var(--theme-avatar-ink); }
html[data-theme] .profile-avatar-stage { border-color: color-mix(in srgb, var(--forest-2) 22%, transparent); }
html[data-theme] .profile-hero { background: linear-gradient(115deg, var(--card) 0%, var(--theme-soft) 100%); border-color: color-mix(in srgb, var(--forest-2) 18%, transparent); }
html[data-theme] .profile-fields input,
html[data-theme] .profile-fields select,
html[data-theme] .profile-notes-label textarea,
html[data-theme] .profile-avatar-adjustments,
html[data-theme] .modal input { background: color-mix(in srgb, var(--paper) 55%, var(--card)); }
html[data-theme] .profile-connection { border-color: color-mix(in srgb, var(--forest-2) 12%, var(--line)); background: color-mix(in srgb, var(--theme-soft) 58%, var(--card)); }
html[data-theme] .primary-btn,
html[data-theme] .auth-loading-mark,
html[data-theme] .quick-add-toggle { background: var(--forest); }
html[data-theme] .brand-chip { background-color: var(--forest); }
html[data-theme="moss"] .brand-chip,
html[data-theme="moss"] .art-badge,
html[data-theme="moss"] .banner-art { background-image: url("/assets/branding/crossbank-theme-moss.svg"); }
html[data-theme="sea-glass"] .brand-chip,
html[data-theme="sea-glass"] .art-badge,
html[data-theme="sea-glass"] .banner-art { background-image: url("/assets/branding/crossbank-theme-sea-glass.svg"); }
html[data-theme="oat-clay"] .brand-chip,
html[data-theme="oat-clay"] .art-badge,
html[data-theme="oat-clay"] .banner-art { background-image: url("/assets/branding/crossbank-theme-oat-clay.svg"); }
html[data-theme="lavender-dusk"] .brand-chip,
html[data-theme="lavender-dusk"] .art-badge,
html[data-theme="lavender-dusk"] .banner-art { background-image: url("/assets/branding/crossbank-theme-lavender-dusk.svg"); }
html[data-theme="butter-olive"] .brand-chip,
html[data-theme="butter-olive"] .art-badge,
html[data-theme="butter-olive"] .banner-art { background-image: url("/assets/branding/crossbank-theme-butter-olive.svg"); }
html[data-theme="berry-paper"] .brand-chip,
html[data-theme="berry-paper"] .art-badge,
html[data-theme="berry-paper"] .banner-art { background-image: url("/assets/branding/crossbank-theme-berry-paper.svg"); }
html[data-theme] .small-action,
html[data-theme] .data-pill,
html[data-theme] .profile-section-index { background: var(--theme-soft); color: var(--forest-2); }
html[data-theme] .mint-index,
html[data-theme] .mint-icon,
html[data-theme] .mint { background: var(--mint); color: var(--forest-2); }
html[data-theme] .peach-index,
html[data-theme] .peach-icon,
html[data-theme] .peach { background: var(--peach-pale); color: var(--forest-2); }
html[data-theme] .lavender-icon { background: var(--lav); color: var(--forest-2); }
html[data-theme] .profile-fields input:focus,
html[data-theme] .profile-fields select:focus,
html[data-theme] .profile-notes-label textarea:focus,
html[data-theme] .currency-input:focus-within { border-color: var(--forest-2); outline-color: color-mix(in srgb, var(--forest-2) 18%, transparent); }
html[data-theme] .profile-avatar-actions .small-action:hover,
html[data-theme] .profile-avatar-actions .small-action:focus-visible { border-color: var(--forest-2); }

/* Theme chooser */
.sidebar-theme-strip { margin: 0 0 19px; padding: 14px 10px 0; border-top: 1px solid color-mix(in srgb, var(--forest-2) 10%, var(--line)); }
.sidebar-theme-label { margin: 0 0 10px; color: var(--muted); font: 500 9px 'DM Mono', monospace; letter-spacing: 1.25px; }
.sidebar-theme-swatches { display: flex; align-items: center; gap: 7px; }
.sidebar-theme-swatch { width: 25px; height: 25px; flex: 0 0 25px; padding: 0; border: 1px solid rgba(20, 42, 37, .16); border-radius: 50%; box-shadow: 0 2px 7px rgba(20, 42, 37, .12); transition: transform .18s ease, box-shadow .18s ease; }
.sidebar-theme-swatch:hover { transform: translateY(-1px) scale(1.05); }
.sidebar-theme-swatch:focus-visible { outline: 3px solid color-mix(in srgb, var(--forest-2) 28%, transparent); outline-offset: 2px; }
.sidebar-theme-swatch.is-selected { box-shadow: 0 0 0 2px var(--nav-surface, var(--paper)), 0 0 0 4px var(--forest-2), 0 4px 10px rgba(20, 42, 37, .14); transform: scale(1.08); }
.sidebar-theme-status { display: block; min-height: 12px; margin-top: 9px; color: var(--muted); font-size: 9px; }
.sidebar-theme-moss { background: #eeece7; }
.sidebar-theme-sea-glass { background: #e9f0ef; }
.sidebar-theme-oat-clay { background: #ece5da; }
.sidebar-theme-lavender-dusk { background: #ece8f0; }
.sidebar-theme-butter-olive { background: #eeeadd; }
.sidebar-theme-berry-paper { background: #eee5e8; }

@media (min-width: 781px) {
  .sidebar { position: sticky; top: 0; align-self: flex-start; height: 100vh; overflow-y: auto; }
  .sidebar.is-collapsed .sidebar-bottom { display: block; }
  .sidebar.is-collapsed .sidebar-theme-label,
  .sidebar.is-collapsed .sidebar-theme-status,
  .sidebar.is-collapsed .sidebar-theme-strip { padding-left: 0; padding-right: 0; }
  .sidebar.is-collapsed .sidebar-theme-label,
  .sidebar.is-collapsed .sidebar-theme-status,
  .sidebar.is-collapsed .sidebar-rule,
  .sidebar.is-collapsed .developer,
  .sidebar.is-collapsed .switch-profile { display: none; }
  .sidebar.is-collapsed .sidebar-theme-swatches { display: grid; justify-items: center; gap: 10px; }
  .sidebar.is-collapsed .sidebar-theme-swatch { width: 27px; height: 27px; flex-basis: 27px; }
}

.profile-theme-card { margin-top: 14px; padding: 23px; }
.theme-picker { min-width: 0; margin: 0; padding: 0; border: 0; }
.theme-picker legend { margin-bottom: 11px; color: var(--ink-soft); font-size: 10px; font-weight: 800; }
.theme-options { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.theme-option { position: relative; display: block; min-width: 0; cursor: pointer; }
.theme-option input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.theme-option-card { display: grid; min-height: 105px; gap: 12px; padding: 13px; border: 1px solid var(--line); border-radius: 12px; background: var(--card); transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease; }
.theme-option:hover .theme-option-card { border-color: color-mix(in srgb, var(--forest-2) 38%, var(--line)); transform: translateY(-1px); }
.theme-option input:focus-visible + .theme-option-card { outline: 3px solid color-mix(in srgb, var(--forest-2) 22%, transparent); outline-offset: 2px; }
.theme-option.is-selected .theme-option-card { border-color: var(--forest-2); box-shadow: 0 0 0 2px color-mix(in srgb, var(--forest-2) 15%, transparent), 0 9px 20px color-mix(in srgb, var(--forest-2) 9%, transparent); }
.theme-option-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.theme-option-top strong { font-size: 11px; }
.theme-option-check { display: grid; width: 20px; height: 20px; place-items: center; border-radius: 50%; background: var(--theme-soft); color: var(--forest-2); font-size: 11px; opacity: 0; }
.theme-option.is-selected .theme-option-check { opacity: 1; }
.theme-option-swatches { display: flex; gap: 6px; }
.theme-option-swatches i { display: block; width: 24px; height: 24px; border: 1px solid rgba(20, 42, 37, .1); border-radius: 50%; }
.theme-option-card small { color: var(--muted); font-size: 8px; line-height: 1.35; }
.theme-option-moss .theme-option-swatches i:nth-child(1) { background: #f5f3ee; }.theme-option-moss .theme-option-swatches i:nth-child(2) { background: #142a25; }.theme-option-moss .theme-option-swatches i:nth-child(3) { background: #dcebe0; }.theme-option-moss .theme-option-swatches i:nth-child(4) { background: #d1836e; }
.theme-option-sea-glass .theme-option-swatches i:nth-child(1) { background: #f2f5f4; }.theme-option-sea-glass .theme-option-swatches i:nth-child(2) { background: #14353a; }.theme-option-sea-glass .theme-option-swatches i:nth-child(3) { background: #d8eceb; }.theme-option-sea-glass .theme-option-swatches i:nth-child(4) { background: #d48a75; }
.theme-option-oat-clay .theme-option-swatches i:nth-child(1) { background: #f5f0e8; }.theme-option-oat-clay .theme-option-swatches i:nth-child(2) { background: #3d312b; }.theme-option-oat-clay .theme-option-swatches i:nth-child(3) { background: #dfe8d7; }.theme-option-oat-clay .theme-option-swatches i:nth-child(4) { background: #e2a17e; }
.theme-option-lavender-dusk .theme-option-swatches i:nth-child(1) { background: #f5f2f7; }.theme-option-lavender-dusk .theme-option-swatches i:nth-child(2) { background: #30293d; }.theme-option-lavender-dusk .theme-option-swatches i:nth-child(3) { background: #e4d9ef; }.theme-option-lavender-dusk .theme-option-swatches i:nth-child(4) { background: #d79179; }
.theme-option-butter-olive .theme-option-swatches i:nth-child(1) { background: #f6f2e3; }.theme-option-butter-olive .theme-option-swatches i:nth-child(2) { background: #354029; }.theme-option-butter-olive .theme-option-swatches i:nth-child(3) { background: #e6edd5; }.theme-option-butter-olive .theme-option-swatches i:nth-child(4) { background: #d58c6c; }
.theme-option-berry-paper .theme-option-swatches i:nth-child(1) { background: #f6f0f1; }.theme-option-berry-paper .theme-option-swatches i:nth-child(2) { background: #3d2634; }.theme-option-berry-paper .theme-option-swatches i:nth-child(3) { background: #e1ebe0; }.theme-option-berry-paper .theme-option-swatches i:nth-child(4) { background: #cf8a83; }

@media (max-width: 780px) {
  .sidebar-bottom { display: block; }
  .sidebar-theme-strip { margin-top: 18px; padding: 14px 0 0; }
  .sidebar-theme-swatches { justify-content: space-between; gap: 6px; }
  .sidebar-theme-swatch { width: 31px; height: 31px; flex-basis: 31px; }
  .theme-options { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .profile-theme-card { padding: 18px; }
}

@media (max-width: 420px) {
  .theme-option-card { padding: 11px; }
  .theme-option-swatches i { width: 21px; height: 21px; }
}

@media (prefers-reduced-motion: reduce) {
  .theme-option-card { transition: none; }
}