/* REQ 337 (was REQ 332/CMD-0104 via REQ 335, CMD-0106, issue #450): sectie "Verbinding" op de tenantdetailpagina
   (microsoft-connection.js).
   Gebruikt uitsluitend bestaande design-tokens uit tokens.css/skins/*.css (geen nieuwe custom
   properties), zodat licht en donker automatisch werken (AC5 in combinatie met de bestaande
   skin.js). Responsive vanaf 360px breed (AC5), zie de mobiele media query onderaan. */

.msconn-summary { display: grid; gap: .5rem; margin-bottom: 1rem; }
.msconn-status-row { display: flex; align-items: center; gap: .5rem; }

/* AC1: het balletje is nooit de enige drager van status. Het staat altijd naast een icoon en tekst
   (zie microsoft-connection.js: statusMeta()/summaryHtml()/profileCardHtml()). */
.msconn-dot { width: .65rem; height: .65rem; border-radius: 50%; flex-shrink: 0; display: inline-block; }
.msconn-dot-success { background: var(--color-success, #7fb069); }
.msconn-dot-danger  { background: var(--color-danger, #e2624f); }
.msconn-dot-warning { background: var(--color-warning, #e8a04a); }
.msconn-dot-neutral { background: var(--color-text-muted, #b3a596); }
.msconn-icon { flex-shrink: 0; }
.msconn-icon path, .msconn-icon circle { stroke: currentColor; }
.msconn-dot-success + .msconn-icon, .msconn-status-row .msconn-dot-success ~ .msconn-icon { color: var(--color-success, #7fb069); }

.msconn-summary-time, .msconn-summary-context { margin: 0; color: var(--color-text-muted, #b3a596); }

.msconn-tech-details { margin-top: .5rem; }
.msconn-tech-details summary { cursor: pointer; color: var(--color-text-muted, #b3a596); }
.msconn-tech-list { display: grid; grid-template-columns: max-content 1fr; gap: .25rem .75rem; margin: .5rem 0 0; }
.msconn-tech-list dt { font-weight: 600; }
.msconn-tech-list dd { margin: 0; overflow-wrap: anywhere; }

.msconn-setup { display: grid; gap: .75rem; margin: 1rem 0; }
.msconn-profile-picker { display: grid; gap: .75rem; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }
.msconn-profile-choice { display: flex; gap: .5rem; align-items: flex-start; padding: .75rem; border: 1px solid var(--color-border, #444); border-radius: .5rem; }
.msconn-profile-choice input { margin-top: .2rem; }
.msconn-permissions-label { display: block; margin-top: .35rem; font-weight: 600; font-size: .85em; }
.msconn-setup-actions { display: flex; flex-wrap: wrap; gap: .5rem; }

.msconn-progress { margin: 1rem 0; padding: .75rem; }
.msconn-progress h4 { margin: 0 0 .5rem; }

.msconn-chip-list { list-style: none; display: flex; flex-wrap: wrap; gap: .35rem; margin: .25rem 0 0; padding: 0; }
.msconn-chip { padding: .1rem .5rem; border: 1px solid var(--color-border, #444); border-radius: 1rem; font-size: .85em; }

.msconn-detail { margin-top: 1rem; }
.msconn-profile-grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); margin-top: .5rem; }
.msconn-profile-card { padding: .9rem; display: grid; gap: .5rem; align-content: start; }
.msconn-profile-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem; }
.msconn-detail-list { display: grid; grid-template-columns: minmax(9rem, 1fr) minmax(0, 1.4fr); gap: .4rem .75rem; margin: 0; }
.msconn-detail-list dt { font-weight: 600; align-self: start; }
.msconn-detail-list dd { margin: 0; min-width: 0; }
.msconn-profile-actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .25rem; }

/* AC5: mobiel bruikbaar vanaf 360px. De profielenraster en het detailrooster stapelen op smalle
   viewports in plaats van kolommen af te knijpen tot onbruikbaar smal. */
@media (max-width: 480px) {
  .msconn-profile-grid { grid-template-columns: 1fr; }
  .msconn-profile-picker { grid-template-columns: 1fr; }
  .msconn-detail-list { grid-template-columns: 1fr; }
  .msconn-detail-list dt { margin-top: .35rem; }
  .msconn-setup-actions, .msconn-profile-actions { flex-direction: column; align-items: stretch; }
}