/* ---------------------------------------------------------------------------
   Portals modal — list-row glyph + active-rail styling.
   Hub Portals dialog (artifact row, column 2 under the Dashboard app tile).

   Mirrors graphs.css exactly, but in the DASHBOARD accent (emerald
   --hs-accent-good #16a34a) rather than the GRAPH accent (cobalt #0048BA).
   A Portal is a container of dashboards, and the dialog opens dashboards —
   so it shares the Dashboard app's color so the surface reads as
   "the Dashboard app's content."

   Reuses .conn-list / .conn-list-row / .conn-list-active from connections.css
   for the left-pane chrome (identical to how graphs.css does it). This file
   only adds portal-specific glyph color, the active-row emerald rail, and the
   right-pane dashboard rows that are unique to this dialog.
   --------------------------------------------------------------------------- */

/* Portal list row glyph — leading character before the name */
.pm-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;
    color: #16a34a; /* emerald — the Dashboard accent */
}

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

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

/* Active row carries the emerald rail to mirror the Dashboard palette
   (datasets/graphs use their own accents; portals use emerald). */
.pm-list-row.pm-list-active {
    background: rgba(22, 163, 74, 0.08);
    border-left: 2px solid #16a34a;
}
:is(.dark) .pm-list-row.pm-list-active {
    background: rgba(22, 163, 74, 0.14);
}

/* ─── Right pane: dashboard rows under the selected portal ───
   Each row is a clickable button that opens the Dashboard app focused on
   that dashboard. Premium quiet at rest, emerald edge + Open affordance on
   hover. */
.pm-dash-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

.pm-dash-row {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    text-align: left;
    padding: 0.625rem 0.75rem;
    border-radius: 0.625rem;
    border: 1px solid rgb(228, 228, 231); /* zinc-200 */
    background: white;
    color: rgb(63, 63, 70); /* zinc-700 */
    cursor: pointer;
    transition: border-color 140ms ease, background-color 140ms ease, transform 140ms ease;
}
:is(.dark) .pm-dash-row {
    border-color: rgb(63, 63, 70); /* zinc-700 */
    background: rgb(39, 39, 42); /* zinc-800 */
    color: rgb(212, 212, 216); /* zinc-300 */
}
.pm-dash-row:hover {
    border-color: #16a34a;
    background: rgba(22, 163, 74, 0.06);
    transform: translateY(-1px);
}
:is(.dark) .pm-dash-row:hover {
    background: rgba(22, 163, 74, 0.12);
}

.pm-dash-row-main {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    min-width: 0;
}
.pm-dash-row-name {
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1.2;
    color: rgb(24, 24, 27); /* zinc-900 */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
:is(.dark) .pm-dash-row-name { color: rgb(244, 244, 245); }
.pm-dash-row-sub {
    font-family: "Space Mono", "JetBrains Mono", monospace;
    font-size: 0.625rem;
    color: rgb(113, 113, 122); /* zinc-500 */
    letter-spacing: 0.04em;
}
:is(.dark) .pm-dash-row-sub { color: rgb(161, 161, 170); }

.pm-dash-row-open {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 0.3125rem;
    font-family: "Space Mono", "JetBrains Mono", monospace;
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgb(113, 113, 122); /* zinc-500 */
    transition: color 140ms ease;
}
.pm-dash-row:hover .pm-dash-row-open { color: #16a34a; }

/* Built-in / empty-dashboards tag pill on a portal that has no dashboards */
.pm-empty-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) .pm-empty-tag {
    background: rgba(161, 161, 170, 0.18);
    color: #a1a1aa;
}

/* ---------------------------------------------------------------------------
   USED BY dependency panel (section 13). Premium-quiet count, never a grid.
   Mirrors graphs.css .gm-usedby-*; for a portal the only dependent is its
   contained dashboards (count). Painted by pmRenderUsedBy().
   --------------------------------------------------------------------------- */

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

/* The count reads as the signal: bold, slightly larger, ink-strong. */
.pm-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) .pm-usedby-count { color: #fafafa; }

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

/* The summary line is the quiet detail. */
.pm-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) .pm-usedby-summary { color: #a1a1aa; }

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

/* ---------------------------------------------------------------------------
   Quiet delete affordance (section 13). Ink-soft at rest, signal-amber on
   hover. Never a loud resting red. Mirrors graphs.css .gm-selection-delete.
   --------------------------------------------------------------------------- */
.pm-detail-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;
    color: #71717a;
    transition: color 120ms ease-out;
}
.pm-detail-delete:hover { color: #b45309; }   /* amber-700 light */
:is(.dark) .pm-detail-delete { color: #a1a1aa; }
:is(.dark) .pm-detail-delete:hover { color: #fbbf24; }  /* amber-400 dark */