/* ================= Themes =================
   Chosen per person (sidebar → 🎨). Set on <html data-theme="…"> by theme-boot.js before the page draws.
   aurora (default) = the glass look in vivid.css. sunset / ocean = the same glass with other colours.
   claude-dark / light = flat and calm, no glass or moving background ("flat" themes, html[data-flat]). */

/* ---------- gradient themes: same glass, other colours ---------- */
html[data-theme="sunset"] {
  --accent: #f97316; --accent2: #f43f5e; --pink: #fb7185;
  --edge: linear-gradient(140deg, rgba(255, 255, 255, .32), rgba(255, 255, 255, .05) 38%, rgba(255, 255, 255, .03) 62%, rgba(249, 115, 22, .32));
}
html[data-theme="sunset"] body { background: #120609; }
html[data-theme="sunset"] body::before {
  background:
    radial-gradient(42vmax 38vmax at 24% 22%, rgba(249, 115, 22, .42), transparent 60%),
    radial-gradient(36vmax 32vmax at 82% 20%, rgba(244, 63, 94, .36), transparent 60%),
    radial-gradient(46vmax 40vmax at 70% 84%, rgba(168, 85, 247, .32), transparent 60%),
    radial-gradient(34vmax 30vmax at 16% 82%, rgba(251, 191, 36, .22), transparent 60%);
}
html[data-theme="sunset"] body::after { background: radial-gradient(30vmax 26vmax at 52% 50%, rgba(251, 113, 133, .12), transparent 62%); }
html[data-theme="sunset"] button.primary, html[data-theme="sunset"] a.btn.primary { background: linear-gradient(135deg, #ea580c, #e11d48 60%, #a21caf); border-color: rgba(254, 215, 170, .3); box-shadow: 0 4px 16px rgba(234, 88, 12, .3); }
html[data-theme="sunset"] .nav > button.active { background: linear-gradient(135deg, rgba(249, 115, 22, .26), rgba(244, 63, 94, .12)); border-color: rgba(253, 186, 116, .35); box-shadow: 0 0 14px rgba(249, 115, 22, .18), inset 0 1px 0 rgba(255, 255, 255, .16); }
html[data-theme="sunset"] .msg.me { background: linear-gradient(135deg, #c2410c, #be123c 60%, #86198f); border-color: rgba(254, 215, 170, .25); }
html[data-theme="sunset"] .bar i { background: linear-gradient(180deg, rgba(253, 186, 116, .9), rgba(244, 63, 94, .85) 50%, rgba(168, 85, 247, .8)); }
html[data-theme="sunset"] .brand { background: linear-gradient(90deg, #fed7aa, #fda4af, #f0abfc, #fed7aa); background-size: 300% 100%; -webkit-background-clip: text; background-clip: text; }
html[data-theme="sunset"] .kpi::after { background: radial-gradient(circle, rgba(249, 115, 22, .2), transparent 70%); }
html[data-theme="sunset"] .chip { background: rgba(249, 115, 22, .14); border-color: rgba(253, 186, 116, .3); }

html[data-theme="ocean"] {
  --accent: #38bdf8; --accent2: #2dd4bf; --pink: #818cf8;
  --edge: linear-gradient(140deg, rgba(255, 255, 255, .32), rgba(255, 255, 255, .05) 38%, rgba(255, 255, 255, .03) 62%, rgba(56, 189, 248, .32));
}
html[data-theme="ocean"] body { background: #03101a; }
html[data-theme="ocean"] body::before {
  background:
    radial-gradient(42vmax 38vmax at 24% 22%, rgba(14, 165, 233, .42), transparent 60%),
    radial-gradient(36vmax 32vmax at 82% 20%, rgba(45, 212, 191, .32), transparent 60%),
    radial-gradient(46vmax 40vmax at 70% 84%, rgba(99, 102, 241, .34), transparent 60%),
    radial-gradient(34vmax 30vmax at 16% 82%, rgba(6, 182, 212, .3), transparent 60%);
}
html[data-theme="ocean"] body::after { background: radial-gradient(30vmax 26vmax at 52% 50%, rgba(45, 212, 191, .1), transparent 62%); }
html[data-theme="ocean"] button.primary, html[data-theme="ocean"] a.btn.primary { background: linear-gradient(135deg, #0284c7, #0d9488 60%, #4f46e5); border-color: rgba(186, 230, 253, .3); box-shadow: 0 4px 16px rgba(2, 132, 199, .3); }
html[data-theme="ocean"] .nav > button.active { background: linear-gradient(135deg, rgba(14, 165, 233, .26), rgba(45, 212, 191, .12)); border-color: rgba(125, 211, 252, .35); box-shadow: 0 0 14px rgba(14, 165, 233, .18), inset 0 1px 0 rgba(255, 255, 255, .16); }
html[data-theme="ocean"] .msg.me { background: linear-gradient(135deg, #0369a1, #0f766e 60%, #4338ca); border-color: rgba(186, 230, 253, .25); }
html[data-theme="ocean"] .bar i { background: linear-gradient(180deg, rgba(125, 211, 252, .9), rgba(14, 165, 233, .85) 50%, rgba(45, 212, 191, .8)); }
html[data-theme="ocean"] .brand { background: linear-gradient(90deg, #bae6fd, #99f6e4, #c7d2fe, #bae6fd); background-size: 300% 100%; -webkit-background-clip: text; background-clip: text; }
html[data-theme="ocean"] .kpi::after { background: radial-gradient(circle, rgba(14, 165, 233, .2), transparent 70%); }
html[data-theme="ocean"] .chip { background: rgba(14, 165, 233, .14); border-color: rgba(125, 211, 252, .3); }

/* ---------- flat themes (Claude Dark, Light): calm surfaces, no glass, no moving background ---------- */
html[data-theme="claude-dark"] {
  --bg: #262624; --side: #1f1e1d; --surface: #30302e; --surface2: #3a3a37; --raise: #34342f;
  --text: #faf9f5; --muted: #a6a39a; --line: rgba(222, 220, 209, .12); --line-hi: rgba(222, 220, 209, .24);
  --accent: #d97757; --accent-soft: rgba(217, 119, 87, .14); --accent-text: #e8a283;
  --good: #7fbf8e; --warn: #e0b354; --bad: #e57373;
  --glass: var(--surface); --glass2: var(--surface2); --glass3: #45453f;
  color-scheme: dark;
}
html[data-theme="light"] {
  --bg: #faf9f5; --side: #f5f4ee; --surface: #ffffff; --surface2: #f0eee6; --raise: #ffffff;
  --text: #1a1915; --muted: #6e6c64; --line: rgba(31, 30, 29, .12); --line-hi: rgba(31, 30, 29, .24);
  --accent: #c6613f; --accent-soft: rgba(198, 97, 63, .1); --accent-text: #a8502f;
  --good: #2f8a4b; --warn: #a66d00; --bad: #c43d3d;
  --glass: var(--surface); --glass2: var(--surface2); --glass3: #e6e3d8;
  color-scheme: light;
}
html[data-flat] body { background: var(--bg); color: var(--text); font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; }
html[data-flat] body::before, html[data-flat] body::after { display: none; }
html[data-flat] h1 { background: none; color: var(--text); -webkit-background-clip: border-box; background-clip: border-box;
  font-family: "Iowan Old Style", "Palatino Linotype", Georgia, ui-serif, serif; font-weight: 500; letter-spacing: -.01em; }
html[data-flat] h2 { color: var(--muted); }
html[data-flat] .brand { background: none; color: var(--accent); -webkit-background-clip: border-box; background-clip: border-box; animation: none;
  font-family: "Iowan Old Style", "Palatino Linotype", Georgia, serif; font-weight: 600; }

/* surfaces: solid, a hairline border, barely-there shadow */
html[data-flat] .nav, html[data-flat] .card, html[data-flat] .kpi, html[data-flat] .conv-list, html[data-flat] .chat, html[data-flat] dialog, html[data-flat] #toast {
  background: var(--surface); border: 1px solid var(--line); box-shadow: 0 1px 2px rgba(0, 0, 0, .12);
  backdrop-filter: none; -webkit-backdrop-filter: none;
}
html[data-flat] .nav { background: var(--side); }
html[data-flat] .card:hover, html[data-flat] .kpi:hover { transform: none; box-shadow: 0 1px 2px rgba(0, 0, 0, .12); border-color: var(--line-hi); }
html[data-flat] .kpi::before, html[data-flat] .kpi::after { display: none; }
html[data-flat] .kpi .v.good, html[data-flat] .kpi .v.bad { text-shadow: none; }
html[data-flat] dialog { background: var(--raise); }
html[data-flat] dialog::backdrop { background: rgba(0, 0, 0, .45); backdrop-filter: none; }
html[data-flat] #toast { background: var(--raise); }

/* controls */
html[data-flat] button { background: var(--surface2); border: 1px solid var(--line); color: var(--text); box-shadow: none; }
html[data-flat] button:hover { background: var(--glass3); border-color: var(--line-hi); transform: none; }
html[data-flat] button.primary, html[data-flat] a.btn.primary { background: var(--accent); border-color: var(--accent); color: #fff; box-shadow: none; }
html[data-flat] button.primary:hover { filter: brightness(1.08); box-shadow: none; }
html[data-flat] button.good { background: var(--good); border-color: var(--good); color: #fff; box-shadow: none; }
html[data-flat] button.danger { background: transparent; border-color: var(--bad); color: var(--bad); }
html[data-flat] .ripple { background: rgba(255, 255, 255, .25); }
html[data-flat] input, html[data-flat] select, html[data-flat] textarea { background: var(--bg); border: 1px solid var(--line); color: var(--text); }
html[data-flat] input:focus, html[data-flat] select:focus, html[data-flat] textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
html[data-flat] input::placeholder, html[data-flat] textarea::placeholder { color: var(--muted); }
html[data-flat] option { background: var(--surface); color: var(--text); }

/* sidebar */
html[data-flat] .nav > button { background: none; border-color: transparent; }
html[data-flat] .nav > button:hover { background: var(--surface2); transform: none; }
html[data-flat] .nav > button.active { background: var(--surface2); border-color: var(--line); box-shadow: none; }
html[data-flat] .nav .sync.install { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-text); }
html[data-flat] .badge { background: var(--accent); box-shadow: none; }
html[data-flat] .badge.muted { background: var(--glass3); color: var(--text); }
html[data-flat] .dot { box-shadow: none; }

/* tables, pills, tags */
html[data-flat] th { background: var(--surface2); color: var(--muted); }
html[data-flat] tr:not(:first-child):hover td { background: var(--accent-soft); }
html[data-flat] tr.fresh td { animation: none; background: var(--accent-soft); }
html[data-flat] .pill { background: transparent; box-shadow: none; animation: none; }
html[data-flat] .pill.pending { color: var(--warn); border-color: var(--warn); }
html[data-flat] .pill.completed, html[data-flat] .pill.sold { color: var(--good); border-color: var(--good); }
html[data-flat] .pill.delivered { color: var(--accent-text); border-color: var(--accent); }
html[data-flat] .pill.disputed { color: var(--bad); border-color: var(--bad); }
html[data-flat] .pill.cancelled { color: var(--muted); }
html[data-flat] .uname, html[data-flat] .ext-note a, html[data-flat] .composer a { color: var(--accent-text); }
html[data-flat] .tag { background: var(--surface2); }
html[data-flat] .claim { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-text); }
html[data-flat] .claim.mine { background: transparent; border-color: var(--good); color: var(--good); }
html[data-flat] code { background: var(--surface2); }

/* chart */
html[data-flat] .bar i { background: var(--accent); border: none; box-shadow: none; opacity: .85; }
html[data-flat] .bars .bar:hover i { opacity: 1; filter: none; box-shadow: none; }
html[data-flat] .bars:hover .bar i { opacity: .4; }
html[data-flat] .bar .tip, html[data-flat] .bar .tip::after { background: var(--raise); border-color: var(--line-hi); }

/* inbox + chat */
html[data-flat] .conv:hover { background: var(--surface2); transform: none; }
html[data-flat] .conv.active { background: var(--surface2); box-shadow: inset 3px 0 0 var(--accent); }
html[data-flat] .conv.fresh { animation: none; }
html[data-flat] .conv.unread b::after { background: var(--accent); box-shadow: none; animation: none; }
html[data-flat] .chat-head { background: var(--surface); }
html[data-flat] .msg { background: var(--surface2); border-color: var(--line); box-shadow: none; }
html[data-flat] .msg.me { background: var(--accent-soft); border-color: transparent; color: var(--text); box-shadow: none; }
html[data-flat] .msg.out.failed { background: rgba(229, 115, 115, .14); }
html[data-flat] .msg.out.pending small::after, html[data-flat] .msg.out.sending small::after { background-image: radial-gradient(circle, var(--muted) 2px, transparent 2.5px); }
html[data-flat] .quick { border-color: var(--line); }
html[data-flat] .chip { background: var(--surface2); border-color: var(--line); color: var(--text); }
html[data-flat] .chip:hover { border-color: var(--accent); }
html[data-flat] .composer, html[data-flat] .ext-note { background: transparent; }
html[data-flat] .loading-note, html[data-flat] #offline-note { background: var(--raise); }
html[data-flat] .spin { border-color: var(--line-hi); border-top-color: var(--accent); }

/* order details, notes, banners */
html[data-flat] .facts > div, html[data-flat] .note, html[data-flat] .od-actions { background: var(--bg); border-color: var(--line); }
html[data-flat] .timeline li::before { background: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
html[data-flat] .due-alert { background: rgba(229, 115, 115, .12); border-color: var(--bad); color: var(--bad); animation: none; }
html[data-flat] .cb-alert { background: rgba(224, 179, 84, .12); border-color: var(--warn); color: var(--warn); }
html[data-flat] ::-webkit-scrollbar-thumb { background: var(--line-hi); }
html[data-flat] .due-bad { text-shadow: none; }

/* light theme: dark text on light surfaces where the dark themes used light tints */
html[data-theme="light"] .msg.me { color: var(--text); }
html[data-theme="light"] .msg.out.failed { background: rgba(196, 61, 61, .08); }
html[data-theme="light"] .kpi .v.good { color: var(--good); }
html[data-theme="light"] .nav, html[data-theme="light"] .card, html[data-theme="light"] .kpi, html[data-theme="light"] .conv-list, html[data-theme="light"] .chat { box-shadow: 0 1px 3px rgba(31, 30, 29, .06); }
html[data-theme="light"] .ripple { background: rgba(0, 0, 0, .08); }
html[data-theme="light"] .qr { border: 1px solid var(--line); }

/* ---------- the theme picker ---------- */
.theme-pop { position: absolute; bottom: 56px; left: 12px; right: 12px; z-index: 40; padding: 10px; border-radius: 16px; display: grid; gap: 6px;
  background: var(--glass); border: 1px solid var(--line-hi); box-shadow: 0 16px 40px rgba(0, 0, 0, .45); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); }
html[data-flat] .theme-pop { background: var(--raise); backdrop-filter: none; }
.theme-pop button { display: flex; align-items: center; gap: 10px; text-align: left; padding: 7px 9px; }
.theme-pop button.on { border-color: var(--accent); }
.swatch { width: 30px; height: 20px; border-radius: 6px; flex: none; border: 1px solid rgba(255, 255, 255, .2); }
.swatch.aurora { background: linear-gradient(135deg, #7c3aed, #22d3ee 55%, #ec4899); }
.swatch.sunset { background: linear-gradient(135deg, #f97316, #f43f5e 55%, #a855f7); }
.swatch.ocean { background: linear-gradient(135deg, #0ea5e9, #2dd4bf 55%, #6366f1); }
.swatch.claude-dark { background: linear-gradient(135deg, #262624 60%, #d97757 60%); }
.swatch.light { background: linear-gradient(135deg, #faf9f5 60%, #c6613f 60%); border-color: rgba(0, 0, 0, .15); }
.theme-pop small { display: block; color: var(--muted); font-size: 11px; }
.nav { position: relative; }

/* USD | IDR switch in the sidebar */
.cur-switch { display: flex; margin-top: 8px; padding: 3px; gap: 3px; border-radius: 12px; border: 1px solid var(--line); background: rgba(0, 0, 0, .15); }
.cur-switch button { flex: 1; padding: 6px 8px; font-size: 12px; border: 1px solid transparent; background: transparent; box-shadow: none; border-radius: 9px; }
.cur-switch button:hover { transform: none; background: var(--glass2); }
.cur-switch button.on { background: var(--glass3); border-color: var(--line-hi); font-weight: 600; }
html[data-flat] .cur-switch { background: var(--bg); }
html[data-flat] .cur-switch button { background: transparent; border-color: transparent; }
html[data-flat] .cur-switch button.on { background: var(--surface); border-color: var(--line-hi); color: var(--accent-text); }
.cur-rate { display: block; text-align: center; font-size: 10px; color: var(--muted); margin-top: 4px; min-height: 12px; }

/* rupiah amounts are long (Rp 15.133.390): wider cards, slightly smaller numbers, never cut off */
html[data-cur="IDR"] .kpis { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
html[data-cur="IDR"] .kpi .v { font-size: 21px; }
.kpi .v { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html[data-cur="IDR"] .siterow .num b { white-space: nowrap; }