/* ══════════════════════════════════════════════════════════════════════
   TEKAN ADS — Settings module shared component layer
   Unified workspace for Account / Channels / Messaging / AI / Billing /
   Users / Security / Advanced settings. Built on the same --ds-* tokens
   and the mk-* component language used across Dashboard/Customers/Marketing
   so Settings reads as one product. Presentation only.
   ══════════════════════════════════════════════════════════════════════ */

.set-page { display: flex; flex-direction: column; gap: var(--ds-space-2); width: 100%; }

/* Channel/section identity chip inside a card head */
.set-ident { display: inline-flex; align-items: center; gap: 10px; }
.set-ident__icon {
  width: 38px; height: 38px; border-radius: var(--ds-radius-button);
  display: flex; align-items: center; justify-content: center;
  background: var(--ds-color-primary-muted); color: var(--ds-color-primary-hover);
  border: 1px solid var(--ds-color-primary-border);
}
.set-ident__icon i { width: 20px; height: 20px; }
.set-ident__icon.is-whatsapp { color: #25D366; background: rgba(37,211,102,0.12); border-color: rgba(37,211,102,0.35); }
.set-ident__icon.is-telegram { color: #2AABEE; background: rgba(42,171,238,0.12); border-color: rgba(42,171,238,0.35); }
.set-ident__icon.is-bale     { color: #7C5CFC; background: rgba(124,92,252,0.12); border-color: rgba(124,92,252,0.35); }
.set-ident__icon.is-ai       { color: var(--ds-color-primary-hover); }

/* ---- Connection status card ---- */
.set-conn {
  display: flex; align-items: center; gap: 0.9rem;
  padding: 0.9rem 1rem; border-radius: var(--ds-radius-input);
  border: 1px solid var(--ds-color-border-strong); background: var(--ds-color-surface-raised);
  line-height: 1.85; color: var(--ds-color-text-secondary);
}
.set-conn__dot {
  flex: 0 0 auto; width: 12px; height: 12px; border-radius: 50%;
  background: var(--ds-color-text-muted); box-shadow: 0 0 0 4px var(--ds-color-secondary-muted);
}
.set-conn__body { flex: 1; min-width: 0; font-size: 0.88rem; }
.set-conn.is-connected    { border-color: var(--ds-color-success-border); }
.set-conn.is-connected .set-conn__dot    { background: var(--ds-color-success); box-shadow: 0 0 0 4px var(--ds-color-success-muted); }
.set-conn.is-warning .set-conn__dot       { background: var(--ds-color-warning); box-shadow: 0 0 0 4px var(--ds-color-warning-muted); }
.set-conn.is-disconnected .set-conn__dot  { background: var(--ds-color-danger); box-shadow: 0 0 0 4px var(--ds-color-danger-muted); }

/* ---- Masked API-key / secret field ---- */
.set-key { display: flex; align-items: stretch; gap: 0; width: 100%; }
.set-key > input {
  flex: 1 1 auto; min-width: 0;
  border-top-right-radius: var(--ds-radius-button) !important;
  border-bottom-right-radius: var(--ds-radius-button) !important;
  border-top-left-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
}
.set-key__btns { display: inline-flex; }
.set-key__btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; min-height: 44px; cursor: pointer;
  background: var(--ds-color-bg-subtle); color: var(--ds-color-text-secondary);
  border: 1px solid var(--ds-color-border-strong); border-inline-start: 0;
  transition: var(--ds-transition-colors);
}
.set-key__btn:hover { background: var(--ds-color-card-hover); color: var(--ds-color-text); }
.set-key__btn:last-child {
  border-top-left-radius: var(--ds-radius-button); border-bottom-left-radius: var(--ds-radius-button);
}
.set-key__btn i { width: 16px; height: 16px; }

/* ---- Danger zone card ---- */
.set-danger {
  border: 1px solid var(--ds-color-danger-border);
  background: linear-gradient(180deg, var(--ds-color-danger-muted), transparent);
}
.set-danger .mk-card__title, .set-danger .mk-card__title i { color: var(--ds-color-danger); }
.set-danger__row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap; padding: 0.75rem 0;
}
.set-danger__row + .set-danger__row { border-top: 1px solid var(--ds-color-divider); }
.set-danger__info { min-width: 0; }
.set-danger__info strong { color: var(--ds-color-text); display: block; font-size: 0.92rem; }
.set-danger__info span { color: var(--ds-color-text-muted); font-size: 0.82rem; }

/* ---- Numbered steps (setup guides) ---- */
.set-steps { margin: 0; padding: 0; list-style: none; counter-reset: setstep; display: flex; flex-direction: column; gap: 0.6rem; }
.set-steps li { position: relative; padding-inline-start: 2rem; color: var(--ds-color-text-secondary); font-size: 0.86rem; line-height: 1.7; counter-increment: setstep; }
.set-steps li::before {
  content: counter(setstep); position: absolute; inset-inline-start: 0; top: 1px;
  width: 22px; height: 22px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-size: 0.72rem; font-weight: 800; color: var(--ds-color-primary-hover);
  background: var(--ds-color-primary-muted); border: 1px solid var(--ds-color-primary-border);
}

/* ---- Switch card (notification-style toggles) ---- */
.set-switch {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 0.85rem 1rem; border-radius: var(--ds-radius-input);
  border: 1px solid var(--ds-color-border-strong); background: var(--ds-color-surface-raised);
}
.set-switch__info strong { display: block; color: var(--ds-color-text); font-size: 0.9rem; }
.set-switch__info span { color: var(--ds-color-text-muted); font-size: 0.8rem; }

/* ---- Sticky save bar ---- */
.set-savebar {
  position: sticky; bottom: 0; z-index: 5;
  display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap;
  padding: 0.8rem 1rem; border-radius: var(--ds-radius-input);
  border: 1px solid var(--ds-color-border-strong);
  background: color-mix(in srgb, var(--ds-color-card) 92%, transparent);
  backdrop-filter: blur(8px);
  box-shadow: var(--ds-shadow-card, 0 -4px 16px rgba(0,0,0,0.2));
}
.set-savebar__spacer { flex: 1 1 auto; }

/* QR / pairing area */
.set-qr { text-align: center; padding: 1rem; border: 1px dashed var(--ds-color-border-strong); border-radius: var(--ds-radius-input); background: var(--ds-color-bg-subtle); }
.set-qr img { max-width: 260px; border-radius: 12px; background: #fff; padding: 12px; }

/* ══════════════════════════════════════════════════════════════════════
   Premium polish — inputs, channel cards, status badges, info chips
   ══════════════════════════════════════════════════════════════════════ */

/* Unified inputs on settings pages (match Marketing/Campaign contrast) */
.set-page input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
.set-page textarea,
.set-page select {
  width: 100%;
  min-height: 44px;
  background: var(--ds-color-bg-subtle);
  border: 1px solid var(--ds-color-border-strong);
  border-radius: var(--ds-radius-button);
  color: var(--ds-color-text);
  padding: 0 0.85rem;
  font-family: inherit; font-size: 0.9rem;
  transition: var(--ds-transition-colors), box-shadow var(--ds-duration-fast, 120ms) var(--ds-ease-default);
}
.set-page textarea { padding: 0.7rem 0.85rem; min-height: 90px; line-height: 1.7; resize: vertical; }
.set-page input:hover, .set-page textarea:hover, .set-page select:hover { background: var(--ds-color-card-hover); }
.set-page input:focus, .set-page textarea:focus, .set-page select:focus {
  outline: none; border-color: var(--ds-color-primary);
  box-shadow: var(--ds-shadow-glow-focus, 0 0 0 3px var(--ds-color-primary-muted));
  background: var(--ds-color-card);
}
.set-page select { appearance: none; padding-inline-end: 2rem; }
/* keep masked-key input square edge next to buttons */
.set-page .set-key > input:focus { box-shadow: none; position: relative; z-index: 1; }

/* Card micro-interactions */
.set-page .mk-card { transition: border-color var(--ds-duration-normal, 180ms) var(--ds-ease-default), box-shadow var(--ds-duration-normal, 180ms) var(--ds-ease-default); }
.set-page .mk-card:hover { border-color: var(--ds-color-border-strong); }
.set-page .btn { transition: var(--ds-transition-colors), transform 120ms var(--ds-ease-default); }
.set-page .btn:active { transform: translateY(1px) scale(0.99); }
.set-key__btn:active { transform: scale(0.94); }

/* Channel card head */
.set-channel__head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 0.75rem; flex-wrap: wrap; margin-bottom: 0.9rem;
  padding-bottom: 0.9rem; border-bottom: 1px solid var(--ds-color-divider);
}
.set-channel__name { display: block; font-size: 1.05rem; font-weight: 700; color: var(--ds-color-text); }
.set-channel__desc { display: block; font-size: 0.82rem; color: var(--ds-color-text-muted); margin-top: 2px; }
.set-channel__body { align-items: start; }
.set-channel__info { display: flex; flex-direction: column; gap: 0.7rem; }

/* Large connection status badge */
.set-state {
  display: inline-flex; align-items: center; gap: 7px; flex: 0 0 auto;
  padding: 6px 14px; border-radius: var(--ds-radius-full);
  font-size: 0.82rem; font-weight: 800; white-space: nowrap;
  border: 1px solid var(--ds-color-border-strong); background: var(--ds-color-secondary-muted); color: var(--ds-color-text-secondary);
  transition: background var(--ds-duration-normal, 180ms) var(--ds-ease-default), color var(--ds-duration-normal, 180ms) var(--ds-ease-default), border-color var(--ds-duration-normal, 180ms) var(--ds-ease-default);
}
.set-state i { width: 15px; height: 15px; }
.set-state.is-connected    { background: var(--ds-color-success-muted); color: var(--ds-color-success); border-color: var(--ds-color-success-border); }
.set-state.is-disconnected { background: var(--ds-color-danger-muted);  color: var(--ds-color-danger);  border-color: var(--ds-color-danger-border); }
.set-state.is-needcfg      { background: var(--ds-color-warning-muted); color: var(--ds-color-warning); border-color: var(--ds-color-warning-border); }
.set-state.is-testing      { background: var(--ds-color-info-muted);    color: var(--ds-color-info);    border-color: var(--ds-color-info-border); }
.set-state.is-testing i { animation: set-spin 0.9s linear infinite; }
.set-state.is-connected i { animation: set-pop 0.25s var(--ds-ease-default); }
@keyframes set-spin { to { transform: rotate(360deg); } }
@keyframes set-pop { 0% { transform: scale(0.6); opacity: 0.4; } 100% { transform: scale(1); opacity: 1; } }

/* Info chips */
.set-infochips { display: grid; grid-template-columns: 1fr; gap: 0.5rem; }
.set-chip {
  display: flex; flex-direction: column; gap: 3px;
  padding: 0.6rem 0.75rem; border-radius: var(--ds-radius-input);
  border: 1px solid var(--ds-color-border); background: var(--ds-color-bg-subtle);
}
.set-chip__label { display: inline-flex; align-items: center; gap: 6px; font-size: 0.72rem; color: var(--ds-color-text-muted); }
.set-chip__label i { width: 13px; height: 13px; }
.set-chip__value { font-size: 0.84rem; color: var(--ds-color-text-secondary); line-height: 1.6; word-break: break-word; }

/* Footer action toolbar — primary dominant */
.set-toolbar { align-items: center; }
.set-toolbar .btn.success { font-weight: 800; }
.set-toolbar__spacer { flex: 1 1 auto; }

/* Advanced settings collapsible */
.set-adv { margin-top: 0.9rem; border: 1px solid var(--ds-color-border); border-radius: var(--ds-radius-input); background: var(--ds-color-bg-subtle); overflow: hidden; }
.set-adv > summary { list-style: none; cursor: pointer; padding: 0.7rem 0.9rem; display: flex; align-items: center; gap: 8px; font-size: 0.86rem; font-weight: 700; color: var(--ds-color-text-secondary); }
.set-adv > summary::-webkit-details-marker { display: none; }
.set-adv > summary .set-adv__chev { margin-inline-start: auto; transition: transform var(--ds-duration-normal, 180ms) var(--ds-ease-default); width: 16px; height: 16px; }
.set-adv[open] > summary .set-adv__chev { transform: rotate(180deg); }
.set-adv__body { padding: 0 0.9rem 0.9rem; }