/* 4VB Office — settings button, settings panel, and the dark themes.
   html[data-canvas="dark"]  boards + notes (Obsidian's dark look, the default)
   html[data-portal="dark"]  project pages and other portal pages */

/* ---------- settings button + panel ---------- */
.vb-gear { position: fixed; left: 14px; bottom: 14px; z-index: 99990; width: 44px; height: 44px; border-radius: 50%; border: 3px solid #F4F4F4; background: #141414; color: #00E85A; display: grid; place-items: center; cursor: pointer; box-shadow: 0 4px 0 #5C343B, 0 6px 16px rgba(0,0,0,.25); }
.vb-gear svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.vb-gear:hover { color: #FFD500; }
body.fourvb-gated .vb-gear { display: none; }
.vbs-bg { position: fixed; inset: 0; z-index: 100005; background: rgba(10,10,10,.6); display: grid; place-items: center; padding: 16px; }
.vbs-panel { width: min(420px, 100%); max-height: 90vh; overflow: auto; background: #F4F4F4; border: 4px solid #141414; border-radius: 16px; font-family: 'Poppins', system-ui, sans-serif; color: #141414; box-shadow: 0 8px 0 #DF1F46; }
.vbs-head { display: flex; align-items: center; background: #141414; color: #00E85A; font-family: 'Russo One', sans-serif; font-size: 18px; padding: 12px 16px; }
.vbs-head span { flex: 1; letter-spacing: 1px; }
.vbs-x { border: 0; background: #DF1F46; color: #fff; width: 34px; height: 34px; border-radius: 50%; font-size: 22px; cursor: pointer; }
.vbs-body { padding: 14px 16px 18px; }
.vbs-who { display: flex; flex-direction: column; margin-bottom: 6px; } .vbs-who b { font-family: 'Russo One', sans-serif; font-weight: 400; font-size: 20px; } .vbs-who small { color: #5E6B63; }
.vbs-sec { font-family: 'Russo One', sans-serif; font-size: 12px; color: #DF1F46; letter-spacing: 1px; margin: 16px 0 8px; }
.vbs-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 6px 0; }
.vbs-label { font-size: 15px; }
.vbs-seg { display: flex; background: #141414; border-radius: 10px; padding: 3px; gap: 3px; }
.vbs-opt { border: 0; background: transparent; color: #F4F4F4; font: 600 13px 'Poppins', sans-serif; padding: 7px 14px; border-radius: 8px; cursor: pointer; }
.vbs-opt.on { background: #00E85A; color: #141414; }
.vbs-form { display: flex; flex-direction: column; gap: 8px; }
.vbs-in { height: 40px; border-radius: 10px; border: 2px solid #141414; padding: 0 12px; font: 15px 'Poppins', sans-serif; background: #fff; color: #141414; }
.vbs-btn { border: 0; border-radius: 10px; padding: 11px 16px; background: #00E85A; color: #141414; font: 600 14px 'Poppins', sans-serif; cursor: pointer; box-shadow: 0 4px 0 #1F2A24; }
.vbs-btn:disabled { opacity: .6; } .vbs-out { background: #141414; color: #F4F4F4; box-shadow: 0 4px 0 #5C343B; width: 100%; }
.vbs-msg { color: #DF1F46; font-size: 13px; min-height: 0; } .vbs-hint { color: #5E6B63; font-size: 12px; }

/* ---------- boards in the dark (Obsidian-like) ---------- */
html[data-canvas="dark"] .vbc-root { background: #1e1e1e; color: #dcddde; }
html[data-canvas="dark"] .vbc-vp { background-color: #1e1e1e; background-image: radial-gradient(circle, #3a3a3a 1.1px, transparent 1.3px); }
html[data-canvas="dark"] .vbc-vp.vbc-far { background-image: none; }
html[data-canvas="dark"] .vbc-body { background: #262626; border-color: #3f3f3f; box-shadow: none; }
html[data-canvas="dark"] .vbc-node.colored .vbc-body { background: color-mix(in srgb, var(--nc) 16%, #262626); border-color: var(--nc); }
html[data-canvas="dark"] .vbc-text { color: #dcddde; }
html[data-canvas="dark"] .vbc-node.editing .vbc-text { background: #2b2b2b; }
html[data-canvas="dark"] .vbc-text a { color: #7cc4ff; }
html[data-canvas="dark"] .vbc-text code { background: #333; color: #f0f0f0; }
html[data-canvas="dark"] .vbc-text blockquote { color: #bbb; }
html[data-canvas="dark"] .vbc-text mark { background: #8a7a00; color: #fff; }
html[data-canvas="dark"] ul.vb-check > li::before { background: #1e1e1e; border-color: #bbb; }
html[data-canvas="dark"] ul.vb-check > li[data-checked="true"]::before { background: #00E85A; border-color: #00E85A; box-shadow: inset 0 0 0 2px #1e1e1e; }
html[data-canvas="dark"] .vbc-t-group .vbc-body { background: rgba(255,255,255,.025); border-color: #555; }
html[data-canvas="dark"] .vbc-t-group.colored .vbc-body { background: color-mix(in srgb, var(--nc) 8%, transparent); border-color: var(--nc); }
html[data-canvas="dark"] .vbc-elabel { background: #262626; color: #dcddde; border-color: #666; }
html[data-canvas="dark"] .vbc-edges g { --ec: #8c8c8c; }
html[data-canvas="dark"] .vbc-empty { color: #777; }
html[data-canvas="dark"] .vbc-missing { color: #9a9a9a; }
html[data-canvas="dark"] .vbc-fname { color: #dcddde; }
html[data-canvas="dark"] .vbc-upbar { background: #3a3a3a; }
html[data-canvas="dark"] .vbc-frame { background: #262626; }
html[data-canvas="dark"] .vbc-h { background: #1e1e1e; }
html[data-canvas="dark"] .vbc-dot { border-color: #1e1e1e; }

/* ---------- notes in the dark ---------- */
html[data-canvas="dark"] .vbn-root { background: #1e1e1e; }
html[data-canvas="dark"] .vbn-paper { background: #262626; border-color: #3f3f3f; box-shadow: 0 6px 0 #000; }
html[data-canvas="dark"] .vbn-ed.vbc-text { color: #dcddde; }

/* ---------- portal pages in the dark ---------- */
html[data-portal="dark"] .vbv-root:not(.vbn-root) { background: #161616; color: #e6e6e6; }
html[data-portal="dark"] .vbv-main .vbv-head h1 { color: #F4F4F4; }
html[data-portal="dark"] .vbv-card { background: #232323; color: #e6e6e6; border-color: #3a3a3a; box-shadow: 0 5px 0 #000; }
html[data-portal="dark"] .vbv-card small { color: #9a9a9a; }
html[data-portal="dark"] .vbv-ccanvas { border-color: #DF1F46; box-shadow: 0 5px 0 #7d1127; }
html[data-portal="dark"] .vbv-cnote svg { color: #e6e6e6; }
html[data-portal="dark"] .vbv-cfolder { background: #0d0d0d; border-color: #00E85A; }
html[data-portal="dark"] .vbv-more { background: #333; color: #eee; }
html[data-portal="dark"] .vbv-hint, html[data-portal="dark"] .vbv-empty { color: #888; }
html[data-portal="dark"] .vbv-modal, html[data-portal="dark"] .vbs-panel { background: #1f1f1f; color: #e6e6e6; border-color: #000; }
html[data-portal="dark"] .vbv-dbox { background: #2a2a2a; border-color: #444; }
html[data-portal="dark"] .vbv-flist { background: #1a1a1a; }
html[data-portal="dark"] .vbs-in { background: #2a2a2a; color: #eee; border-color: #555; }
html[data-portal="dark"] .vbs-who small, html[data-portal="dark"] .vbs-hint { color: #9a9a9a; }
html[data-portal="dark"] .vbph-root { background: #161616; }

/* ---------- the portal's own pages in the dark: office home, task pages, project home, COO, Project Management ----------
   The red / black / lime / yellow art stays exactly as it is; only the light grounds and plates go dark. */
html[data-portal="dark"] body { background: #121212; }
html[data-portal="dark"] .fourvb-home, html[data-portal="dark"] .fourvb-home-world { background: #141414 !important; }
html[data-portal="dark"] .fourvb-home-btn, html[data-portal="dark"] .fourvb-home-sheet { background: #2A2A2A; }
html[data-portal="dark"] .fourvb-home a { color: #9a9a9a; }
html[data-portal="dark"] .fourvb-an-host { background: #121212 !important; }
html[data-portal="dark"] .fourvb-an-host .fourvb-an { background: #121212 !important; }
html[data-portal="dark"] .fourvb-an .fourvb-an__card { background: #1E1E1E; }
html[data-portal="dark"] .fourvb-an .fourvb-an__menu-item:hover { background: #262626; }
html[data-portal="dark"] .vbt-ask .vbs-panel { background: #1f1f1f; color: #e6e6e6; }

/* ---------- scrollbars inside cards and pages follow the theme (no white bar on a dark board) ---------- */
.vbc-text, .vbn-ed { scrollbar-width: thin; scrollbar-color: #B9B9B9 transparent; }
html[data-canvas="dark"] .vbc-text, html[data-canvas="dark"] .vbn-ed, html[data-canvas="dark"] .vbn-root { scrollbar-color: #4a4a4a transparent; }
html[data-canvas="dark"] .vbc-text::-webkit-scrollbar, html[data-canvas="dark"] .vbn-root ::-webkit-scrollbar { width: 8px; height: 8px; background: transparent; }
html[data-canvas="dark"] .vbc-text::-webkit-scrollbar-thumb, html[data-canvas="dark"] .vbn-root ::-webkit-scrollbar-thumb { background: #4a4a4a; border-radius: 8px; }
html[data-canvas="dark"] .vbc-text::-webkit-scrollbar-track { background: transparent; }
html[data-portal="dark"] { color-scheme: dark; }
html[data-canvas="dark"] .vbc-root, html[data-canvas="dark"] .vbn-root { color-scheme: dark; }

/* ---------- boards in the light: crisp white cards, black text, no grey wash ---------- */
html[data-canvas="light"] .vbc-root { background: #F7F7F7; color: #141414; }
html[data-canvas="light"] .vbc-vp { background-color: #F7F7F7; background-image: radial-gradient(circle, #CFCFCF 1.1px, transparent 1.3px); }
html[data-canvas="light"] .vbc-body { background: #FFFFFF; border-color: #BDBDBD; }
html[data-canvas="light"] .vbc-text { color: #141414; }
html[data-canvas="light"] .vbc-t-group .vbc-body { background: rgba(0,0,0,.025); border-color: #8A8A8A; }
html[data-canvas="light"] .vbc-edges g { --ec: #6B6B6B; }
html[data-canvas="light"] .vbc-elabel { background: #fff; color: #141414; }
html[data-canvas="light"] .vbn-root { background: #F7F7F7; }
html[data-canvas="light"] .vbn-paper { background: #fff; }
html[data-canvas="light"] .vbn-ed.vbc-text { color: #141414; }
html[data-portal="dark"] .fourvb-an .fourvb-an__ground { background: #121212 !important; }
html[data-portal="dark"] .fourvb-an-foot { background: #121212; color: #9a9a9a; }
html[data-portal="dark"] { background: #121212; }