/* Tela de Conexões. Cada linha responde a uma pergunta só — "de quem é este
   recurso" —, então o dono tem coluna própria e não disputa espaço com o resto. */

.connection-group { margin-bottom: 26px; }
.connection-group .section-toolbar { margin-bottom: 10px; }
.connection-group .section-title { display: inline-flex; align-items: center; gap: 8px; }
.connection-group .section-title .delivery-icon { width: 18px; height: 18px; color: var(--brand); }

.connection-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: 16px; }
.connection-row-copy { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 6px 18px; min-width: 0; }
.connection-row-head { display: flex; align-items: center; gap: 9px; min-width: 0; grid-column: 1; }
.connection-row-head strong { overflow-wrap: anywhere; }
.connection-row-head img, .connection-row-head svg { width: 18px; height: 18px; flex: 0 0 18px; }
.connection-row-copy > .detail { grid-column: 1; }
.connection-suggestion { grid-column: 1 / -1; padding: 6px 10px; border-left: 3px solid var(--brand, var(--brand)); background: var(--surface-hover); border-radius: 4px; font-size: 13px; }
.connection-suggestion.ambiguous { border-left-color: var(--badge-warning-dot); background: var(--badge-warning-bg); }

.connection-external-id { grid-column: 1; justify-self: start; padding: 3px 7px; border-radius: 4px; background: var(--surface-hover); color: var(--muted); font-size: 12px; overflow-wrap: anywhere; }

/* O dono ocupa a segunda coluna das duas primeiras linhas: é o que o olho procura. */
.connection-owner { grid-column: 2; grid-row: 1 / span 2; display: grid; gap: 3px; align-content: start; min-width: 0; }
.connection-owner .table-action { justify-self: start; padding-left: 0; padding-right: 0; }
.connection-owner strong { font-size: 13px; }

.connection-flags { grid-column: 1 / -1; display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.connection-flags .detail { font-size: 12px; }

.connection-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; }
.connection-owner-select { min-height: 38px; max-width: 260px; }

.connection-history-row { display: block; }
.connection-history-row div { display: grid; gap: 3px; }

#connection-reason-dialog textarea { width: 100%; resize: vertical; }

@media (max-width: 860px) {
  .connection-row { grid-template-columns: 1fr; }
  .connection-row-copy { grid-template-columns: 1fr; }
  .connection-row-head, .connection-row-copy > .detail, .connection-external-id, .connection-owner, .connection-flags { grid-column: 1; }
  .connection-owner { grid-row: auto; padding-top: 6px; border-top: 1px solid var(--line-soft, var(--line)); }
  .connection-actions { justify-content: flex-start; }
  .connection-owner-select { max-width: none; width: 100%; }
}

/* --- Conexões por dono ------------------------------------------------------ */
.connections-tools { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.connections-tools .search-label input { min-width: 260px; }
#view-connections .contracts-title { margin-top: 22px; }

.suggestion-card { display: grid; gap: 10px; padding: 14px 16px; margin-bottom: 10px; border: 1px solid var(--line, var(--line, var(--line))); border-left: 3px solid var(--brand, var(--brand)); border-radius: 8px; background: var(--surface); }
.suggestion-card.ambiguous { border-left-color: var(--badge-warning-dot); }
.suggestion-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.suggestion-head img, .suggestion-head svg { width: 18px; height: 18px; }

.owner-card { border: 1px solid var(--line, var(--line, var(--line))); border-radius: 8px; background: var(--surface); margin-bottom: 8px; }
.owner-card[open] { box-shadow: 0 1px 0 rgba(0, 0, 0, .03); }
.owner-summary { display: grid; grid-template-columns: 14px auto minmax(0, 1fr) auto auto; align-items: center; gap: 14px; padding: 12px 16px; cursor: pointer; list-style: none; }
.owner-summary::-webkit-details-marker { display: none; }
.owner-summary::before { content: ''; width: 7px; height: 7px; border-right: 2px solid var(--muted, #6b7280); border-bottom: 2px solid var(--muted, #6b7280); transform: rotate(-45deg); transition: transform .15s; justify-self: center; }
.owner-card[open] > .owner-summary::before { transform: rotate(45deg); }
.owner-logos { display: inline-flex; gap: 4px; align-items: center; }
.owner-logos img, .owner-logos svg { width: 18px; height: 18px; }
.owner-name { display: grid; min-width: 0; }
.owner-name strong { overflow-wrap: anywhere; font-size: 15px; font-weight: 600; }
.owner-name small { color: var(--muted, #6b7280); font-size: 12.5px; }
.owner-count { color: var(--muted, #6b7280); font-size: 13px; white-space: nowrap; }
.owner-body { display: grid; gap: 12px; padding: 4px 16px 16px; }
.owner-body .connection-row { padding: 8px 0; border-top: 1px solid var(--line, var(--line, var(--line))); background: none; }
.owner-body .connection-row:first-child { border-top: 0; }
.owner-project { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding-top: 10px; border-top: 1px dashed var(--line, var(--line, var(--line))); }

.orphan-line { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 14px; padding: 10px 14px; border-radius: 8px; background: var(--surface-hover); font-size: 13px; }
.connection-inactive { margin-top: 18px; }
.connection-inactive > summary { cursor: pointer; font-weight: 600; padding: 8px 0; }

/* --- vínculo dentro das listas dos provedores -------------------------------- */
.link-owner { display: inline-block; margin-top: 6px; }
.link-details { margin-top: 8px; font-size: 13px; }
.link-details > summary { cursor: pointer; color: var(--muted, #6b7280); }
.link-details.suggested > summary { color: var(--brand, var(--text)); font-weight: 600; }
.link-details[open] { padding: 8px 10px; border-radius: 6px; background: var(--surface-muted); }
.link-control { display: grid; gap: 8px; margin-top: 8px; }
.link-error:empty { display: none; }

@media (max-width: 720px) {
 .owner-summary { grid-template-columns: 14px minmax(0, 1fr) auto; }
 .owner-logos { display: none; }
 .connections-tools .search-label input { min-width: 0; width: 100%; }
}

/* --- cartão de sugestão: uma linha por recurso, etiqueta curta, ação principal --- */
.suggestion-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.suggestion-list li { display: grid; grid-template-columns: 16px minmax(0, 1fr) auto; align-items: center; gap: 4px 10px; padding: 4px 0; border-top: 1px solid var(--line, var(--line, var(--line))); }
.suggestion-list li:first-child { border-top: 0; }
.suggestion-list img, .suggestion-list svg { width: 16px; height: 16px; }
.suggestion-list strong { font-weight: 500; overflow-wrap: anywhere; min-width: 0; }
.suggestion-tag { padding: 2px 8px; border-radius: 999px; background: var(--surface-hover); color: var(--muted, #6b7280); font-size: 12px; white-space: nowrap; }
.suggestion-actions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.other-owner > summary { cursor: pointer; color: var(--muted, #6b7280); font-size: 13px; }
.other-owner[open] { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.other-owner[open] > summary { flex: 0 0 100%; }
.connection-owner-select { max-width: 100%; min-width: 0; }
@media (max-width: 720px) {
 .suggestion-list li { grid-template-columns: 16px minmax(0, 1fr); }
 .suggestion-tag { grid-column: 2; justify-self: start; }
 .suggestion-actions > .primary { width: 100%; }
 .other-owner[open] select, .other-owner[open] button { width: 100%; }
}

/* --- linha compacta de recurso dentro do cartão do dono ---------------------- */
.resource-row { display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--line, var(--line, var(--line))); }
.resource-row:first-child { border-top: 0; }
.resource-row > img, .resource-row > svg { width: 18px; height: 18px; }
.resource-text { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; min-width: 0; }
.resource-text strong { font-weight: 600; overflow-wrap: anywhere; }
.resource-meta { color: var(--muted, #6b7280); font-size: 12.5px; }
.resource-actions { display: flex; gap: 2px; }
button.ghost { padding: 4px 8px; border: 0; border-radius: 6px; background: none; color: var(--muted, #6b7280); font: inherit; font-size: 13px; cursor: pointer; }
button.ghost:hover { background: var(--surface-hover); color: var(--ink, var(--text)); }
button.ghost.danger:hover { background: var(--badge-danger-bg); color: var(--badge-danger-fg); }

.check-pill { display: inline-flex; align-items: center; gap: 8px; padding: 3px 10px; border-radius: 999px; font-size: 12.5px; font-weight: 600; white-space: nowrap; }
.check-pill.partial { background: var(--badge-warning-bg); color: var(--badge-warning-fg); }
.check-pill.ready { background: var(--badge-success-bg); color: var(--badge-success-fg); }
.check-bar { display: inline-block; width: 38px; height: 4px; border-radius: 2px; background: rgba(0, 0, 0, .12); overflow: hidden; }
.check-bar b { display: block; height: 100%; background: currentColor; }

.owner-project { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.owner-project-text { display: grid; gap: 2px; min-width: 0; flex: 1 1 260px; }
.owner-project-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.owner-project-actions .secondary, .owner-project-actions .primary { padding: 6px 12px; font-size: 13px; }

/* --- a linha de dono nas listas dos provedores -------------------------------- */
.own-line { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 8px 0 2px; font-size: 13px; }
.own-tag { padding: 2px 8px; border-radius: 999px; font-size: 12px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; background: var(--surface-hover); color: var(--muted, #6b7280); }
.own-tag.linked { background: var(--badge-success-bg); color: var(--badge-success-fg); }
.own-tag.suggested { background: var(--badge-info-bg); color: var(--badge-info-fg); }
.own-tag.warn { background: var(--badge-warning-bg); color: var(--badge-warning-fg); }
.own-name { font-weight: 600; overflow-wrap: anywhere; }
.own-name.muted { font-weight: 400; color: var(--muted, #6b7280); }
button.mini { color: var(--text); padding: 3px 10px; border: 1px solid var(--line, var(--line)); border-radius: 6px; background: var(--surface); font: inherit; font-size: 12.5px; cursor: pointer; }
button.mini.primary { background: var(--brand, #29292c); border-color: var(--brand, var(--brand)); color: var(--on-brand); }
button.mini:disabled { opacity: .55; cursor: default; }
.own-line .other-owner { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.own-line .other-owner > summary { display: inline; cursor: pointer; color: var(--muted, #6b7280); }
.own-line .other-owner[open] { flex: 1 0 100%; padding: 8px; border-radius: 6px; background: var(--surface-muted); }
.own-line .other-owner[open] > summary { flex: 0 0 100%; }

@media (max-width: 720px) {
 .resource-row { grid-template-columns: 20px minmax(0, 1fr); }
 .resource-actions { grid-column: 2; margin-left: -8px; }
 .owner-project-actions { width: 100%; }
}