/* =====================================================================
   GOHIGHLEVEL CONNECTION - Owner-only page styles (.ghl-*)
   Token-driven, theme-aware. Reuses .ds-card / .ds-field / .ds-btn / .ds-chip.
   ===================================================================== */

.ghl-page { max-width: 980px; margin: 0 auto; }

.ghl-head { margin-bottom: var(--sp-4); }
.ghl-title { display: flex; gap: var(--sp-3); align-items: flex-start; margin-top: var(--sp-2); }
.ghl-mark {
  flex: 0 0 auto; width: 46px; height: 46px; border-radius: var(--r-md);
  display: grid; place-items: center; font-size: 22px;
  background: linear-gradient(150deg, var(--ds-gold-200), var(--ds-gold-400));
  color: var(--ds-on-gold); box-shadow: var(--el-glow);
}

.ghl-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); align-items: start; }
@media (max-width: 820px) { .ghl-grid { grid-template-columns: 1fr; } }

.ghl-card { padding: var(--sp-4) var(--sp-5); }
.ghl-card h3 { margin: 0 0 var(--sp-2); font: 600 16px/1.2 var(--font-display); color: var(--ds-text-hi); }
.ghl-card p { color: var(--ds-text-lo); font: 400 13.5px/1.5 var(--font-ui); margin: 0 0 var(--sp-3); }
.ghl-card__head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); margin-bottom: var(--sp-2); flex-wrap: wrap; }
.ghl-card__head h3 { margin: 0; }
.ghl-badges { display: inline-flex; gap: var(--sp-2); flex-wrap: wrap; }
.ghl-card .ds-field { margin-bottom: var(--sp-3); }

.ghl-note {
  border-radius: var(--r-md); padding: var(--sp-3) var(--sp-3);
  font: 400 13px/1.5 var(--font-ui); margin-bottom: var(--sp-4);
  border: 1px solid var(--ds-hairline); background: var(--ds-surface-2); color: var(--ds-text);
}
.ghl-note code { background: var(--ds-surface-3); padding: 1px 5px; border-radius: 4px; font-size: 12px; }
.ghl-note--info { border-color: var(--ds-gold-300); background: var(--ds-surface-glass); }
.ghl-note--ok   { border-color: var(--ds-positive); background: var(--ds-positive-soft); color: var(--ds-text-hi); }
.ghl-note--warn { border-color: var(--ds-gold-400); background: var(--ds-surface-glass); }
.ghl-note--err  { border-color: var(--ds-danger); background: var(--ds-danger-soft); color: var(--ds-text-hi); }

.ghl-srow {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-3);
  padding: var(--sp-2) 0; border-top: 1px solid var(--ds-hairline);
}
.ghl-srow:first-of-type { border-top: none; }
.ghl-srow__k { font: 500 12.5px/1.4 var(--font-ui); color: var(--ds-text-lo); }
.ghl-srow__v { font: 500 13px/1.4 var(--font-ui); color: var(--ds-text-hi); text-align: right; word-break: break-word; }
.ghl-srow__v code { background: var(--ds-surface-3); padding: 2px 7px; border-radius: var(--r-sm); font-size: 12.5px; letter-spacing: .04em; }
.ghl-srow__v--ok  { color: var(--ds-positive); }
.ghl-srow__v--err { color: var(--ds-danger-strong); }
.ghl-srow__v em { color: var(--ds-text-mute); font-style: normal; }

.ghl-pre {
  background: var(--ds-surface-3); border: 1px solid var(--ds-hairline);
  border-radius: var(--r-sm); padding: var(--sp-3); overflow-x: auto;
  font: 400 12.5px/1.7 ui-monospace, "SF Mono", Menlo, Consolas, monospace; color: var(--ds-text-hi);
  margin: 0 0 var(--sp-3);
}

.ghl-locrow { display: flex; gap: var(--sp-2); align-items: center; flex-wrap: wrap; }
.ghl-locrow .ds-select { flex: 1; min-width: 200px; }

.ghl-ctrl {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
  padding: var(--sp-3) 0; border-top: 1px solid var(--ds-hairline); flex-wrap: wrap;
}
.ghl-ctrl:first-of-type { border-top: none; }
.ghl-ctrl .set-k { font: 600 13px/1.3 var(--font-ui); color: var(--ds-text-hi); display: block; }
.ghl-ctrl .set-sub { font: 400 12px/1.4 var(--font-ui); color: var(--ds-text-lo); margin: 2px 0 0; }
.ghl-ctrl--danger .set-k { color: var(--ds-danger-strong); }

/* toggle switch */
.ghl-toggle {
  position: relative; width: 46px; height: 26px; border-radius: var(--r-pill);
  background: var(--ds-surface-3); border: 1px solid var(--ds-hairline-strong);
  cursor: pointer; flex: 0 0 auto; transition: background var(--dur-1) var(--ease);
}
.ghl-toggle.is-on { background: var(--ds-accent); border-color: var(--ds-accent); }
.ghl-toggle__dot {
  position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; border-radius: 50%;
  background: #fff; box-shadow: var(--el-1); transition: transform var(--dur-1) var(--ease);
}
.ghl-toggle.is-on .ghl-toggle__dot { transform: translateX(20px); }
.ghl-toggle:disabled { opacity: .6; cursor: default; }

.ghl-lock { max-width: 620px; }

/* Live synced-data summary (read-only counts pulled from the Sub-Account) */
.ghl-synced {
  margin: var(--sp-3) 0; padding: var(--sp-3); border: 1px solid var(--ds-hairline);
  border-radius: var(--r-3, 12px); background: var(--ds-surface-2);
}
.ghl-synced__head {
  display: flex; align-items: center; gap: var(--sp-2);
  font: 600 12px/1.3 var(--font-ui); letter-spacing: .02em; text-transform: uppercase;
  color: var(--ds-text-lo); margin-bottom: var(--sp-3);
}
.ghl-synced__grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: var(--sp-2);
}
.ghl-synced__cell {
  display: flex; flex-direction: column; gap: 2px; padding: var(--sp-3) var(--sp-2);
  border: 1px solid var(--ds-hairline); border-radius: var(--r-2, 10px);
  background: var(--ds-surface-1); text-align: center;
}
.ghl-synced__n { font: 700 22px/1 var(--font-display, var(--font-ui)); color: var(--ds-accent); }
.ghl-synced__l { font: 500 11px/1.2 var(--font-ui); color: var(--ds-text-lo); }