.admin-teams-one-sync-section {
  margin-top:
    34px;

  padding-top:
    28px;

  border-top:
    1px solid
    var(--admin-border);
}

.admin-teams-one-sync-button {
  flex:
    0 0 auto;
}

.admin-teams-one-sync-note {
  margin:
    14px 0 0;

  padding:
    12px 14px;

  border-radius:
    14px;

  background:
    rgba(90, 16, 27, 0.05);

  color:
    var(--admin-muted);

  font-size:
    13px;

  line-height:
    1.7;
}

body.admin-teams-one-sync-open {
  overflow:
    hidden;
}

.admin-teams-one-sync-overlay {
  position:
    fixed;

  inset:
    0;

  z-index:
    1000;

  display:
    grid;

  place-items:
    center;

  padding:
    20px;

  background:
    rgba(26, 8, 12, 0.58);
}

.admin-teams-one-sync-overlay[hidden] {
  display:
    none;
}

.admin-teams-one-sync-dialog {
  width:
    min(
      100%,
      620px
    );

  max-height:
    min(
      88vh,
      720px
    );

  overflow:
    auto;

  padding:
    22px;

  border:
    1px solid
    var(--admin-border);

  border-radius:
    22px;

  background:
    var(--admin-surface);

  box-shadow:
    0 24px 56px
    rgba(24, 7, 11, 0.24);
}

.admin-teams-one-sync-dialog-header {
  display:
    flex;

  align-items:
    flex-start;

  justify-content:
    space-between;

  gap:
    16px;
}

.admin-teams-one-sync-dialog-header h2 {
  margin:
    4px 0 0;
}

.admin-teams-one-sync-close {
  display:
    inline-grid;

  width:
    42px;

  height:
    42px;

  flex:
    0 0 auto;

  place-items:
    center;

  border:
    1px solid
    var(--admin-border);

  border-radius:
    50%;

  background:
    var(--admin-surface);

  color:
    var(--admin-text);

  font:
    inherit;

  font-size:
    24px;

  cursor:
    pointer;
}

.admin-teams-one-sync-preview {
  margin-top:
    22px;
}

.admin-teams-one-sync-status {
  margin:
    0;

  padding:
    12px 14px;

  border-radius:
    14px;

  background:
    rgba(175, 126, 9, 0.08);

  color:
    var(--admin-text);

  font-size:
    13px;

  line-height:
    1.7;
}

.admin-teams-one-sync-preview-grid {
  display:
    grid;

  grid-template-columns:
    repeat(
      2,
      minmax(0, 1fr)
    );

  gap:
    12px;

  margin:
    16px 0 0;
}

.admin-teams-one-sync-preview-grid > div {
  min-width:
    0;

  padding:
    14px;

  border:
    1px solid
    var(--admin-border);

  border-radius:
    14px;

  background:
    rgba(90, 16, 27, 0.03);
}

.admin-teams-one-sync-preview-grid dt {
  color:
    var(--admin-muted);

  font-size:
    12px;

  font-weight:
    700;
}

.admin-teams-one-sync-preview-grid dd {
  margin:
    5px 0 0;

  color:
    var(--admin-text);

  font-size:
    15px;

  font-weight:
    800;

  overflow-wrap:
    anywhere;
}

.admin-teams-one-sync-actions {
  display:
    flex;

  justify-content:
    flex-end;

  gap:
    10px;

  margin-top:
    22px;
}

.admin-teams-one-sync-actions button:disabled {
  cursor:
    not-allowed;

  opacity:
    0.48;
}

.admin-teams-one-sync-close:focus-visible,
.admin-teams-one-sync-button:focus-visible {
  outline:
    3px solid
    rgba(175, 126, 9, 0.28);

  outline-offset:
    2px;
}

@media screen and (max-width: 640px) {
  .admin-teams-one-sync-section
  .admin-section-heading {
    align-items:
      stretch;

    flex-direction:
      column;
  }

  .admin-teams-one-sync-button {
    width:
      100%;
  }

  .admin-teams-one-sync-preview-grid {
    grid-template-columns:
      1fr;
  }

  .admin-teams-one-sync-actions {
    flex-direction:
      column-reverse;
  }

  .admin-teams-one-sync-actions button {
    width:
      100%;
  }
}