/* Graphs dashboards — theme-aware (tokens flip in light mode via :root[data-theme]).
   The converged board chrome (toolbar grid, button system, panel chrome, touch-lock,
   agent-added, chart-notes) is the SHARED boardkit.CSS(); this file keeps only the
   graphs-specific chrome: the editable dashboard-name box, the dashboards menu, the
   pinned-tab strip, the new-chart staging modal and the per-series panel editor.
   Colors use var(--token,#darkfallback) so dark stays byte-identical and light flips. */

/* The editable dashboard name is a button-box matching ".btn" (same 36px height, border,
   padding, square corners) so it lines up with the "← Dashboards" button beside it. */
/* Title is the editable h1 (shared .board-title in boardkit) — dash parity. */
.dash-toolbar .dash-title { margin: 0; max-width: 100%; overflow-wrap: anywhere; }
.dash-toolbar a.lnk { color: var(--link,#58a6ff); font-size: .85rem; text-decoration: none; }

/* Pinned-dashboard tab strip — one-tap, reload-free switching between pinned dashboards. */
.dash-tabs { display: flex; gap: .4rem; flex-wrap: wrap; margin: -.5rem 0 1rem; }
.dash-tab { display: inline-flex; align-items: center; gap: .4rem; background: transparent; color: var(--muted,#8b949e); border: 1px solid var(--border2,#30363d); padding: .34rem .8rem; font-size: .82rem; letter-spacing: .02em; cursor: pointer; transition: border-color .13s, color .13s, background .13s; }
.dash-tab:hover { border-color: var(--text-hi,#f0f6fc); color: var(--text-hi,#f0f6fc); background: var(--panel,#161b22); }
.dash-tab.active { border-color: var(--link,#58a6ff); color: var(--link,#58a6ff); background: rgba(31,111,235,.10); }
.dash-tab i { font-size: .72em; transform: rotate(30deg); }
.dc-pinned { color: var(--link,#58a6ff); font-size: .82em; transform: rotate(30deg); }

/* Dashboards menu (shown when a user has more than one). */
.dash-menu { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: .8rem; }
.dash-card { background: var(--panel2,#0d1117); border: 1px solid var(--border,#21262d); border-radius:0; padding: .9rem 1rem; transition: border-color .12s; }
.dash-card:hover { border-color: var(--border2,#30363d); }
.dash-card .dc-name { color: var(--text-hi,#f0f6fc); font-weight: 600; font-size: 1rem; cursor: pointer; }
.dash-card .dc-sub { color: var(--muted,#8b949e); font-size: .82rem; margin: .2rem 0 .7rem; }
.dash-card .dc-actions { display: flex; gap: .4rem; flex-wrap: wrap; }
.btn-sm { background: var(--border,#21262d); color: var(--text,#c9d1d9); border: 1px solid var(--border2,#30363d); border-radius:0; padding: .25rem .6rem; font-size: .78rem; cursor: pointer; }
.btn-sm:hover { background: var(--border2,#30363d); }
.btn-sm.danger:hover { background: #da3633; border-color: #da3633; color: #fff; }

/* Panel config strip (graphs-specific — the per-panel dataset toggles). */
.panel-cfg { padding: .5rem .7rem; border-bottom: 1px solid var(--panel,#161b22); background: var(--bg,#0b0f15); flex: none; }
.panel-cfg.is-hidden { display: none; }
.cfg-row { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; font-size: .8rem; color: var(--muted,#8b949e); margin-bottom: .4rem; }
.cfg-row label { display: inline-flex; align-items: center; gap: .3rem; cursor: pointer; }
.cfg-row select { background: var(--panel,#161b22); color: var(--text,#c9d1d9); border: 1px solid var(--border2,#30363d); border-radius:0; padding: .15rem .35rem; font-size: .78rem; }
.cfg-ds { display: flex; flex-wrap: wrap; gap: .3rem .9rem; }
.cfg-ds .ds { display: inline-flex; align-items: center; gap: .35rem; font-size: .8rem; color: var(--text,#c9d1d9); cursor: pointer; }
.cfg-ds .dot { width: .7rem; height: .7rem; border-radius:0; display: inline-block; }
.cfg-ds .muted { color: var(--faint,#6e7681); font-size: .8rem; }

/* New-chart STAGING modal: pick a dashboard's sources + options before the chart exists. */
.stage-ov { position: fixed; inset: 0; background: rgba(1,4,9,.72); display: flex; align-items: center; justify-content: center; z-index: 1000; padding: 1rem; }
.stage-card { background: var(--panel2,#0d1117); border: 1px solid var(--border2,#30363d); width: min(560px, 100%); max-height: 86vh; display: flex; flex-direction: column; box-shadow: 0 16px 48px rgba(0,0,0,.55); }
.stage-head { display: flex; align-items: center; justify-content: space-between; padding: .75rem 1rem; border-bottom: 1px solid var(--border,#21262d); }
.stage-head strong { color: var(--text-hi,#f0f6fc); font-size: 1rem; }
.stage-body { padding: 1rem; overflow: auto; display: flex; flex-direction: column; gap: .7rem; }
.stage-label { color: var(--faint,#6e7681); font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; margin-top: .2rem; }
.stage-srcs { display: flex; flex-direction: column; gap: .15rem; }
.stage-src { display: flex; align-items: center; gap: .5rem; color: var(--text,#c9d1d9); font-size: .9rem; padding: .3rem .35rem; border: 1px solid transparent; cursor: pointer; }
.stage-src:hover { border-color: var(--border,#21262d); background: var(--row-hover,#11161d); }
.stage-src .dot { width: .7rem; height: .7rem; flex: none; }
.stage-src .nm { flex: 1; }
.stage-untag { background: transparent; border: none; color: var(--faint,#6e7681); cursor: pointer; font-size: 1.05rem; line-height: 1; padding: 0 .2rem; }
.stage-untag:hover { color: #f85149; }
.stage-add { display: flex; align-items: center; flex-wrap: wrap; gap: .4rem; }
.stage-chip { display: inline-flex; align-items: center; gap: .35rem; background: var(--panel,#161b22); border: 1px solid var(--border2,#30363d); color: var(--text,#c9d1d9); padding: .25rem .6rem; font-size: .82rem; cursor: pointer; }
.stage-chip:hover { border-color: var(--link,#58a6ff); color: var(--link,#58a6ff); }
.stage-chip .dot { width: .6rem; height: .6rem; }
.stage-chip i { font-size: .7em; }
.stage-import { align-self: flex-start; background: transparent; border: 1px dashed var(--border2,#30363d); color: var(--muted,#8b949e); padding: .35rem .7rem; cursor: pointer; font-size: .82rem; display: inline-flex; align-items: center; gap: .4rem; }
.stage-import:hover { border-color: #2ea043; color: #2ea043; }
.stage-opts { display: flex; flex-wrap: wrap; gap: .9rem; align-items: center; font-size: .85rem; color: var(--muted,#8b949e); }
.stage-opts label { display: inline-flex; align-items: center; gap: .3rem; }
.stage-opts select { background: var(--panel,#161b22); color: var(--text,#c9d1d9); border: 1px solid var(--border2,#30363d); padding: .2rem .4rem; }
.stage-foot { display: flex; justify-content: flex-end; gap: .5rem; padding: .75rem 1rem; border-top: 1px solid var(--border,#21262d); }
.stage-create[disabled] { opacity: .45; cursor: not-allowed; }

/* ---- Panel EDITOR (the per-series overlay that replaced the settings cog) ---- */
.ed-card { width: min(680px, 100%); }
.ed-body { gap: .55rem; }
.ed-panelrow { display: flex; flex-wrap: wrap; gap: .8rem; align-items: flex-start; font-size: .85rem; color: var(--muted,#8b949e); }
/* House form pattern (matches the rest of the mesh): label ABOVE its control, muted,
   with breathing room. Applied to text/select-bearing labels; checkbox labels stay inline. */
.ed-panelrow label { display: flex; flex-direction: column; align-items: flex-start; gap: .25rem; font-size: .78rem; color: var(--muted,#8b949e); }
.ed-panelrow input.e-title { background: var(--panel,#161b22); color: var(--text,#c9d1d9); border: 1px solid var(--border2,#30363d); padding: .22rem .45rem; font-size: .85rem; min-width: 10rem; }
.ed-panelrow select { background: var(--panel,#161b22); color: var(--text,#c9d1d9); border: 1px solid var(--border2,#30363d); padding: .2rem .4rem; }

.ed-entries { display: flex; flex-direction: column; gap: .5rem; }
/* One series entry: a bordered card with its render controls on the first row and its
   indicator chips wrapping below, dense enough to read several at a glance on a phone. */
.ed-entry { border: 1px solid var(--border,#21262d); background: var(--bg,#0b0f15); padding: .5rem .55rem; }
.ed-entry-main { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem; }
.ed-entry-main select { background: var(--panel,#161b22); color: var(--text,#c9d1d9); border: 1px solid var(--border2,#30363d); padding: .22rem .4rem; font-size: .8rem; }
.ed-entry-main .e-source { flex: 1 1 9rem; min-width: 7rem; }
.ed-render-ctl { display: inline-flex; flex-wrap: wrap; align-items: flex-end; gap: .5rem; font-size: .8rem; color: var(--muted,#8b949e); }
.ed-render-ctl label { display: inline-flex; align-items: center; gap: .3rem; }
/* Bucket/Style/Brick get the label-above pattern; Smooth/Normalize checkbox labels stay inline. */
.ed-render-ctl label:has(select), .ed-render-ctl label:has(> input[type="number"]) { display: inline-flex; flex-direction: column; align-items: flex-start; gap: .25rem; }
.ed-render-ctl input[type="number"] { width: 4.5rem; background: var(--panel,#161b22); color: var(--text,#c9d1d9); border: 1px solid var(--border2,#30363d); padding: .15rem .2rem .15rem .35rem; font-size: .78rem; }
.ed-render-ctl .e-brick-lbl.is-hidden { display: none; }
.ed-entry-del { margin-left: auto; color: var(--faint,#6e7681); }
.ed-entry-del:hover { color: #f85149; background: var(--border,#21262d); }

/* Indicator chips attached to a series entry: an editable [indicator ▾][period][×] pill. */
.ed-inds { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; margin-top: .45rem; }
.ind-chip { display: inline-flex; align-items: center; gap: .25rem; background: var(--panel,#161b22); border: 1px solid var(--border2,#30363d); padding: .1rem .2rem .1rem .3rem; }
.ind-chip select { background: transparent; color: var(--text,#c9d1d9); border: none; font-size: .78rem; padding: .1rem .1rem; max-width: 8.5rem; }
.ind-chip .ind-period { width: 4.5rem; background: var(--panel2,#0d1117); color: var(--text,#c9d1d9); border: 1px solid var(--border2,#30363d); padding: .1rem .2rem .1rem .3rem; font-size: .75rem; }
/* Hide the native number spinners in the editor — their arrows overlapped the digits.
   Scoped to the editor overlay, never global. */
.ed-body input[type="number"] { -moz-appearance: textfield; appearance: textfield; }
.ed-body input[type="number"]::-webkit-inner-spin-button,
.ed-body input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.ind-chip .ind-del { background: transparent; border: none; color: var(--faint,#6e7681); cursor: pointer; font-size: 1rem; line-height: 1; padding: 0 .15rem; }
.ind-chip .ind-del:hover { color: #f85149; }
.ed-ind-add { background: transparent; border: 1px dashed var(--border2,#30363d); color: var(--muted,#8b949e); padding: .18rem .5rem; font-size: .76rem; cursor: pointer; display: inline-flex; align-items: center; gap: .3rem; }
.ed-ind-add:hover { border-color: var(--link,#58a6ff); color: var(--link,#58a6ff); }

.ed-add-series { align-self: flex-start; background: transparent; border: 1px solid var(--border2,#30363d); color: var(--text-hi,#f0f6fc); padding: .35rem .7rem; cursor: pointer; font-size: .82rem; display: inline-flex; align-items: center; gap: .4rem; }
.ed-add-series:hover { border-color: var(--text-hi,#f0f6fc); background: var(--panel,#161b22); }
.ed-add-series[disabled] { opacity: .45; cursor: not-allowed; }
.ed-add-src { display: flex; align-items: center; flex-wrap: wrap; gap: .4rem; }
.ed-src-chip { display: inline-flex; align-items: center; gap: .35rem; background: var(--panel,#161b22); border: 1px solid var(--border2,#30363d); color: var(--text,#c9d1d9); padding: .25rem .6rem; font-size: .82rem; cursor: pointer; }
.ed-src-chip:hover { border-color: var(--link,#58a6ff); color: var(--link,#58a6ff); }
.ed-src-chip .dot { width: .6rem; height: .6rem; }
.ed-import { margin-top: .1rem; }

/* Share modal: the "secured agent" toggle block under the publicshare dialog */
.graphs-share-agent { border-top: 1px solid var(--border,#21262d); margin-top: .9rem; padding-top: .9rem; }
.graphs-share-agent form { margin: 0; }
.graphs-share-agent-hint { font-size: .78rem; margin: .45rem 0 0; }