/* ---------------------------------------------------------------------------
   Graphs modal — list-row glyph + tag styling.
   Hub.md §11.9 / Slice 2.4.

   Reuses .conn-list / .conn-list-row / .conn-list-active from
   connections.css so the left-pane chrome is identical. This file only
   adds graph-specific glyph colors (Cobalt #0048BA — the locked GRAPH
   accent, see Hub.md §11.6) and the BUILT-IN tag pill on the Sample row.
   --------------------------------------------------------------------------- */

/* Graph list row glyph — leading character before the name */
.gm-row-glyph {
    display: inline-block;
    width: 14px;
    text-align: center;
    margin-right: 8px;
    font-family: "Space Mono", "JetBrains Mono", monospace;
    font-size: 11px;
    line-height: 1;
    flex-shrink: 0;
}
.gm-row-glyph.gm-glyph-sample      { color: #71717a; }  /* zinc-500 — quiet built-in */
.gm-row-glyph.gm-glyph-graph       { color: #0048BA; }  /* Cobalt — connected graph (= dataset) */
.gm-row-glyph.gm-glyph-unconnected { color: #a1a1aa; }  /* zinc-400 — graph with no connection (○) */

/* Built-in tag pill on the Sample row (mirrors .ds-builtin-tag) */
.gm-builtin-tag {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 6px;
    background: rgba(113, 113, 122, 0.15);
    color: #71717a;
    font-family: "Space Mono", "JetBrains Mono", monospace;
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    border-radius: 3px;
    flex-shrink: 0;
}
:is(.dark) .gm-builtin-tag {
    background: rgba(161, 161, 170, 0.18);
    color: #a1a1aa;
}

/* Graph list row — two-line layout matching .ds-list-row-* */
.gm-list-row-name {
    display: flex;
    align-items: center;
    min-width: 0;
    font-weight: 600;
    font-size: 12px;
    color: #18181b;
}
:is(.dark) .gm-list-row-name { color: #fafafa; }

.gm-list-row-sub {
    margin-top: 2px;
    margin-left: 22px; /* aligns with the name after the glyph */
    font-family: "Space Mono", "JetBrains Mono", monospace;
    font-size: 10px;
    color: #71717a;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
:is(.dark) .gm-list-row-sub { color: #a1a1aa; }

/* Active row carries the Cobalt rail to mirror the graph palette
   (datasets use emerald, connections use ink-soft, graphs use Cobalt). */
.gm-list-row.gm-list-active {
    background: rgba(0, 72, 186, 0.08);
    border-left: 2px solid #0048BA;
}
:is(.dark) .gm-list-row.gm-list-active {
    background: rgba(0, 72, 186, 0.14);
}

/* ---------------------------------------------------------------------------
   USED BY dependency panel (Hub.md section 13.4). Read-only, premium-quiet:
   a few counts with ink-soft summary lines, never a grid. Painted by
   gmRenderUsedBy() in graphs.js.
   --------------------------------------------------------------------------- */

/* One dependency line: count + noun on the left, ink-soft summary trailing. */
.gm-usedby-row {
    display: flex;
    align-items: baseline;
    gap: 8px;
    font-size: 12px;
    line-height: 1.4;
    color: #3f3f46;
}
:is(.dark) .gm-usedby-row { color: #d4d4d8; }

/* The count reads as the signal: bold, slightly larger, ink-strong. */
.gm-usedby-count {
    font-family: "Space Mono", "JetBrains Mono", monospace;
    font-weight: 700;
    font-size: 13px;
    color: #18181b;
    min-width: 16px;
    text-align: right;
    flex-shrink: 0;
}
:is(.dark) .gm-usedby-count { color: #fafafa; }

/* The noun (datasets / widgets / teammates) sits next to the count. */
.gm-usedby-noun {
    font-weight: 600;
    flex-shrink: 0;
}

/* The summary line is the quiet detail (names, "across N dashboards"). */
.gm-usedby-summary {
    font-family: "Space Mono", "JetBrains Mono", monospace;
    font-size: 11px;
    color: #71717a;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}
:is(.dark) .gm-usedby-summary { color: #a1a1aa; }

/* Empty + loading states render as a single quiet line, no count column. */
.gm-usedby-row.gm-usedby-empty,
.gm-usedby-row.gm-usedby-loading {
    font-family: "Space Mono", "JetBrains Mono", monospace;
    font-size: 11px;
    color: #71717a;
    display: block;
}
:is(.dark) .gm-usedby-row.gm-usedby-empty,
:is(.dark) .gm-usedby-row.gm-usedby-loading { color: #a1a1aa; }

/* ---------------------------------------------------------------------------
   Multiselect (Hub.md section 13.7). A per-row checkbox calm at rest: hidden
   until the row is hovered, OR shown on every row once any row is selected
   (.gm-has-selection on the list). A thin selection bar at the top of the list
   pane carries the count + Delete + Clear. Delete is signal-amber-on-hover,
   never a loud resting red (section 13.10).
   --------------------------------------------------------------------------- */

/* Per-row checkbox. The row is position relative (from .conn-list-row); the
   checkbox sits in a leading gutter, vertically aligned with the name line.
   Calm at rest: 0 opacity until hover or an active selection. */
.gm-list-row { position: relative; }

.gm-row-checkbox {
    position: absolute;
    top: 0.6rem;       /* aligns with the row name line, not the row top edge */
    left: 0.75rem;     /* sits inside the gutter reserved by padding-left below */
    width: 13px;
    height: 13px;
    margin: 0;
    cursor: pointer;
    accent-color: #0048BA;   /* Cobalt -- the graph accent */
    opacity: 0;
    transition: opacity 120ms ease-out;
}
/* Reveal on row hover, or persistently once any row is selected. */
.gm-list-row:hover .gm-row-checkbox,
.gm-has-selection .gm-row-checkbox,
.gm-row-checkbox:checked {
    opacity: 1;
}

/* Reserve the checkbox lane by growing the ROW's left padding -- never child
   margins. The row is border-box (Hub shell universal box-sizing), so the
   extra padding shrinks the content box and the stacked name/sub lines reflow
   rightward INSIDE the row. The row never gets wider, so the list never gets a
   horizontal scrollbar (the bug the per-child margin approach caused). The
   resting left padding is .875rem (from .conn-list-row); selection mode bumps
   it to ~2.1rem so the glyph + name clear the checkbox. Gated to hover OR an
   active selection so a list you're not selecting in looks pixel-identical to
   before. Transition makes the content glide, not snap. */
.gm-list-row {
    transition: background-color 120ms ease, border-color 120ms ease,
                transform 120ms ease, padding-left 120ms ease-out;
}
.gm-list-row:hover,
.gm-has-selection .gm-list-row {
    padding-left: 2.1rem;
}

/* The graph list scrolls vertically only -- never sideways. The :hover
   transform on .conn-list-row (translateX(1px), from connections.css) paints
   1px past the right edge, and the <ul> is overflow-y:auto / overflow-x:visible
   -- so that 1px becomes a horizontal scrollbar on the hovered row (and not on
   a checked row, which has no :hover transform -- the exact asymmetry seen).
   Clamping overflow-x kills it. Scoped to #gm-list-ul so the Connections and
   Portals lists are untouched. */
#gm-list-ul { overflow-x: hidden; }

/* Selected row -- a quiet emerald-free, ink-soft wash distinct from the
   Cobalt .gm-list-active "open" treatment so "selected" != "open". */
.gm-list-row.gm-row-selected {
    background: rgba(245, 163, 0, 0.07);   /* faint signal-amber, matches delete intent */
}
:is(.dark) .gm-list-row.gm-row-selected {
    background: rgba(245, 163, 0, 0.10);
}

/* Selection bar -- thin, mono-caps count + actions, sits above the list. */
.gm-selection-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 8px 12px;
    border-bottom: 1px solid #e4e4e7;
    background: rgba(245, 163, 0, 0.06);
}
.gm-selection-bar.hidden { display: none; }
:is(.dark) .gm-selection-bar {
    border-bottom-color: #3f3f46;
    background: rgba(245, 163, 0, 0.08);
}

.gm-selection-count {
    font-family: "Space Mono", "JetBrains Mono", monospace;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    color: #71717a;
}
:is(.dark) .gm-selection-count { color: #a1a1aa; }

.gm-selection-actions {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.gm-selection-clear,
.gm-selection-delete {
    font-family: "Space Mono", "JetBrains Mono", monospace;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    background: transparent;
    border: 0;
    padding: 2px 4px;
    cursor: pointer;
    transition: color 120ms ease-out;
}

/* Clear -- quiet ink-soft, brightens to ink on hover. */
.gm-selection-clear { color: #a1a1aa; }
.gm-selection-clear:hover { color: #52525b; }
:is(.dark) .gm-selection-clear { color: #71717a; }
:is(.dark) .gm-selection-clear:hover { color: #d4d4d8; }

/* Delete -- ink-soft at rest, signal-amber on hover. Never loud red at rest. */
.gm-selection-delete { color: #71717a; }
.gm-selection-delete:hover { color: #b45309; }   /* amber-700 light */
:is(.dark) .gm-selection-delete { color: #a1a1aa; }
:is(.dark) .gm-selection-delete:hover { color: #fbbf24; }  /* amber-400 dark */