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

   Reuses .conn-list / .conn-list-row / .conn-list-active from
   connections.css so the left-pane chrome is identical. This file only
   adds dataset-specific glyph colors and the BUILT-IN tag pill on the
   Sample row.
   --------------------------------------------------------------------------- */

/* Dataset list row glyph — leading character before the name */
.ds-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;
}
.ds-row-glyph.ds-glyph-sample { color: #71717a; }      /* zinc-500 — quiet built-in */
.ds-row-glyph.ds-glyph-bonded { color: #16a34a; }      /* emerald — has graph + connection */
.ds-row-glyph.ds-glyph-missing { color: #F5A300; }     /* amber — no graph linked */

/* Built-in tag pill on the Sample row */
.ds-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) .ds-builtin-tag {
    background: rgba(161, 161, 170, 0.18);
    color: #a1a1aa;
}

/* Dataset list row — slightly different from connection rows so the
   bond/dataset semantics read distinctly. Two lines: name + sub. */
.ds-list-row-name {
    display: flex;
    align-items: center;
    min-width: 0;
    font-weight: 600;
    font-size: 12px;
    color: #18181b;
}
:is(.dark) .ds-list-row-name { color: #fafafa; }

.ds-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) .ds-list-row-sub { color: #a1a1aa; }

/* Active row carries the same accent treatment .conn-list-active uses,
   but with the emerald rail to mirror the dataset palette. */
.ds-list-row.ds-list-active {
    background: rgba(22, 163, 74, 0.08);
    border-left: 2px solid #16a34a;
}
:is(.dark) .ds-list-row.ds-list-active {
    background: rgba(22, 163, 74, 0.10);
}

/* ----- Slice 2.7b — Bond validation status pill ----------------------------
   Renders below the connection summary line in each list row. Render-only
   in 2.7b — no click handler yet (slice 2.7c lights the amber pill up).
   Color tokens picked to match the existing glyph palette so the pill
   reads as a sibling to the row glyph rather than a foreign element.
   Mono caps + tight padding keeps it inside the dense row footprint. */
.ds-validation-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: 3px;
    margin-left: 22px; /* aligns with .ds-list-row-sub under the glyph */
    padding: 1px 6px;
    font-family: "Space Mono", "JetBrains Mono", monospace;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    border-radius: 3px;
    line-height: 1.4;
    flex-shrink: 0;
}
.ds-validation-pill .ds-validation-pill-glyph {
    font-size: 10px;
    line-height: 1;
}

/* Never-validated — quiet ink-soft, no background. The user's read is "we
   haven't checked yet" not "something's wrong." */
.ds-validation-pill.ds-validation-never {
    background: transparent;
    color: #71717a; /* zinc-500 — same ink as ds-list-row-sub */
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
    padding-left: 0;
    padding-right: 0;
}
:is(.dark) .ds-validation-pill.ds-validation-never {
    color: #a1a1aa;
}

/* OK — Emerald, matches the bonded glyph. */
.ds-validation-pill.ds-validation-ok {
    background: rgba(22, 163, 74, 0.10);
    color: #16a34a;
}
:is(.dark) .ds-validation-pill.ds-validation-ok {
    background: rgba(22, 163, 74, 0.15);
    color: #4ade80; /* emerald-400 — readable on dark */
}

/* Drift — Amber, matches the missing-graph glyph. */
.ds-validation-pill.ds-validation-drift {
    background: rgba(245, 163, 0, 0.12);
    color: #b45309; /* amber-700 — readable on light bg */
}
:is(.dark) .ds-validation-pill.ds-validation-drift {
    background: rgba(245, 163, 0, 0.18);
    color: #f5a300;
}

/* Couldn't validate — premium signal-amber (NOT loud red). A failed check is
   an attention state, not a catastrophe; the label ("couldn't validate") and
   the Re-check affordance carry the meaning. Shares the amber family with drift
   and reconnect so the modal reads as one calm signal system. */
.ds-validation-pill.ds-validation-error {
    background: rgba(245, 158, 11, 0.12);
    color: #b45309; /* amber-700 */
}
:is(.dark) .ds-validation-pill.ds-validation-error {
    background: rgba(245, 158, 11, 0.18);
    color: #fbbf24; /* amber-400 */
}

/* Reconnect — the bonded connection's secret can't be decrypted. Amber,
   actionable; matches the Connections dialog "Reconnect" language. */
.ds-validation-pill.ds-validation-reconnect {
    background: rgba(245, 158, 11, 0.12);
    color: #b45309; /* amber-700 */
}
:is(.dark) .ds-validation-pill.ds-validation-reconnect {
    background: rgba(245, 158, 11, 0.18);
    color: #fbbf24; /* amber-400 */
}

/* Not checked here — dialect validation doesn't support yet (Snowflake/PG/etc.).
   Quiet ink-soft neutral, same read as never-validated: "healthy, just not
   checked" — never an alarm. */
.ds-validation-pill.ds-validation-unsupported {
    background: transparent;
    color: #71717a; /* zinc-500 */
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
    padding-left: 0;
    padding-right: 0;
}
:is(.dark) .ds-validation-pill.ds-validation-unsupported {
    color: #a1a1aa;
}

/* Bond action buttons in the Graphs detail pane (Re-check / Reconnect).
   Signal-amber border at rest, fill on hover (Hub doctrine: never loud at
   rest). Small, dense, premium. */
.gm-bond-action-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.375rem 0.75rem;
    border-radius: 0.5rem;
    font-size: 0.75rem;
    font-weight: 700;
    cursor: pointer;
    background: transparent;
    color: #b45309;                 /* amber-700 */
    border: 1px solid rgb(252, 211, 77); /* amber-300 */
    transition: all 0.15s ease;
}
.gm-bond-action-btn:hover {
    background: rgb(254, 243, 199);  /* amber-100 */
}
.gm-bond-action-btn:disabled {
    opacity: 0.6;
    cursor: default;
}
:is(.dark) .gm-bond-action-btn {
    color: #fbbf24;                  /* amber-400 */
    border-color: rgba(245, 158, 11, 0.4);
}
:is(.dark) .gm-bond-action-btn:hover {
    background: rgba(245, 158, 11, 0.15);
}