/* ==========================================================================
   Theme picker (profile menu + settings) and the third theme "Koyu" (black).
   Black keeps data-theme=dark, so every dark contrast rule still applies; this
   file only swaps the navy surfaces for neutral black/grey ones.
   ========================================================================== */
.nb-theme-row { display: flex; align-items: center; gap: 10px; padding: 7px 10px; }
.nb-theme-row > span { display: flex; align-items: center; gap: 12px; flex: 1; font-size: 13px; font-weight: 600; color: var(--ink); }
.nb-theme-row > span svg { color: var(--muted); }
.nb-theme-row > div { display: flex; gap: 2px; padding: 3px; border-radius: 10px; background: var(--surface2); border: 1px solid var(--line); }
.nb-theme-row button { display: grid; place-items: center; width: 32px; height: 28px; border: 0; border-radius: 7px; background: transparent; color: var(--muted); cursor: pointer; }
.nb-theme-row button em { display: none; }
.nb-theme-row button:hover { color: var(--ink); }
.nb-theme-row button.on { background: var(--surface); color: var(--accent); box-shadow: 0 1px 4px rgba(0, 0, 0, .15); }

.theme-options { flex-wrap: wrap; }
.theme-options button { flex: 1; min-width: 110px; flex-direction: column; gap: 6px; padding: 10px 10px 12px; }
.theme-swatch { display: block; width: 100%; height: 44px; border-radius: 8px; border: 1px solid var(--line); position: relative; overflow: hidden; }
.theme-swatch::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 26%; }
.theme-swatch::after { content: ""; position: absolute; left: 34%; right: 10%; top: 30%; height: 7px; border-radius: 4px; box-shadow: 0 13px 0 -1px currentColor; }
.theme-swatch.light { background: #f3f6fd; color: #c9d6ef; } .theme-swatch.light::before { background: #0d2852; } .theme-swatch.light::after { background: #245bbd; }
.theme-swatch.dark { background: #08172f; color: #1d3a66; } .theme-swatch.dark::before { background: #0d2852; } .theme-swatch.dark::after { background: #9dbdff; }
.theme-swatch.black { background: #0e1013; color: #2a2e35; } .theme-swatch.black::before { background: #16181c; } .theme-swatch.black::after { background: #8ab4ff; }

/* ---------- Koyu (black) ---------- */
:root[data-shade=black] {
  --bg: #0e1013; --surface: #17191d; --surface2: #1f2227; --ink: #eceef2;
  --muted: #9aa1ac; --line: #2c3037; --purple: #9ec1ff; --soft: #232a36; --accent: #8ab4ff; --accent-bright: #b9d2ff;
  --shadow: 0 16px 38px rgba(0, 0, 0, .35);
  --ch-bg: #0b0c0f; --ch-dots: rgba(255, 255, 255, .05); --ch-in: #1f2227; --ch-out: #22406e; --ch-in-ink: #eceef2; --ch-out-ink: #f1f5ff; --ch-meta: #9aa1ac;
  background: #0e1013; color-scheme: dark;
}
:root[data-shade=black] body { background: var(--bg); }
:root[data-shade=black] .sidebar { background: #121417; border-right: 1px solid #23262c; }
:root[data-shade=black] .nav-item { color: #a3aab5; }
:root[data-shade=black] .nav-item:hover { background: #1d2025; color: #eceef2; }
:root[data-shade=black] .nav-item.active { color: #e6eeff; background: linear-gradient(90deg, #232a36, #1c2028); box-shadow: inset 3px 0 #8ab4ff; }
:root[data-shade=black] .nav-item em { background: #262a31; color: #b9c6dd; }
:root[data-shade=black] .nav-label { color: #6b7380; }
:root[data-shade=black] .sidebar-footer { border-top-color: #23262c; }
:root[data-shade=black] .avatar { background: #262a31; color: #c3cbd8; }
:root[data-shade=black] .window-titlebar { background: #0b0c0f; border-bottom-color: #23262c; }
:root[data-shade=black] .hero { background: radial-gradient(circle at 87% 8%, rgba(138, 180, 255, .22), transparent 35%), linear-gradient(115deg, #15181d 0%, #1c2230 60%, #23324d 100%); box-shadow: 0 15px 35px rgba(0, 0, 0, .4); }
:root[data-shade=black] .badge.todo { background: #262a31; color: #b7bec9; }
:root[data-shade=black] .badge.progress { background: #1e3150; color: #b3d0ff; }
:root[data-shade=black] .badge.done { background: #2b2a45; color: #d2ccff; }
:root[data-shade=black] .badge.backlog { background: #24282f; color: #b0b8c6; }
:root[data-shade=black] .modal-backdrop { background: rgba(0, 0, 0, .65); }
:root[data-shade=black] .ch-emoji, :root[data-shade=black] .ch-date-pop, :root[data-shade=black] .ch-picker { box-shadow: 0 18px 40px rgba(0, 0, 0, .55); }