/* ── Settings page (signature + users & access) ─────────────────────────── */
.settings-view { padding: 24px 32px 48px; max-width: 1400px; margin: 0 auto; }

.stg-body { display: block; }
.stg-grid {
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: 20px; align-items: start;
}
@media (max-width: 900px) { .stg-grid { grid-template-columns: 1fr; } }

.stg-card {
  background: var(--bg-surface); border: 1px solid rgba(0,0,0,0.08);
  border-radius: var(--radius-lg); padding: 22px 24px;
}
.stg-card-wide { grid-column: 1 / -1; }
.stg-card-title { font-family: var(--font-display); font-size: 17px; font-weight: 600; margin: 0 0 4px; color: var(--text-primary); }
.stg-card-sub { font-size: 13px; color: var(--text-secondary); margin: 0 0 18px; line-height: 1.5; }
.stg-optional { font-weight: 400; font-size: 11px; color: var(--text-tertiary); margin-left: 4px; }
.stg-loading { font-size: 13px; color: var(--text-secondary); padding: 8px 0; }

/* Toggle switch */
.stg-switch { display: flex; align-items: center; gap: 10px; cursor: pointer; margin-bottom: 18px; user-select: none; }
.stg-switch input { display: none; }
.stg-switch-track {
  width: 36px; height: 20px; border-radius: 999px; background: rgba(0,0,0,0.18);
  position: relative; flex-shrink: 0; transition: background var(--dur-fast) ease;
}
.stg-switch-thumb {
  position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,0.25); transition: left var(--dur-fast) ease;
}
.stg-switch input:checked + .stg-switch-track { background: var(--brand-primary); }
.stg-switch input:checked + .stg-switch-track .stg-switch-thumb { left: 18px; }
.stg-switch-label { font-size: 13px; font-weight: 500; color: var(--text-primary); }

/* Logo upload */
.stg-logo-row { display: flex; align-items: center; gap: 14px; }
.stg-logo-thumb {
  max-width: 120px; max-height: 56px; border-radius: var(--radius-sm);
  border: 1px solid rgba(0,0,0,0.1); background: #fff; padding: 4px;
}
.stg-logo-empty { font-size: 12.5px; color: var(--text-tertiary); }
.stg-logo-btns { display: flex; gap: 8px; }

.stg-actions { display: flex; align-items: center; gap: 12px; margin-top: 18px; }
.stg-save-status { font-size: 12.5px; color: var(--text-secondary); }

/* Signature preview */
.stg-sig-preview {
  border: 1px dashed rgba(0,0,0,0.15); border-radius: var(--radius-md);
  padding: 18px; background: #fff; overflow-x: auto;
}
.stg-preview-off { font-size: 13px; color: var(--text-tertiary); }

/* Users list */
.stg-users { display: flex; flex-direction: column; }
.stg-user-row {
  display: grid; grid-template-columns: minmax(180px, 1.2fr) auto minmax(0, 2fr) auto;
  gap: 16px; align-items: center; padding: 14px 0;
  border-top: 1px solid rgba(0,0,0,0.07);
}
.stg-user-row.disabled .stg-user-id,
.stg-user-row.disabled .stg-user-mods { opacity: 0.45; }
.stg-user-id { display: flex; align-items: center; gap: 10px; min-width: 0; }
.stg-user-avatar {
  width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--brand-primary), var(--brand-secondary));
  color: #fff; font-size: 12px; font-weight: 600; letter-spacing: 0.03em;
}
.stg-user-names { display: flex; flex-direction: column; min-width: 0; }
.stg-user-name { font-size: 13.5px; font-weight: 600; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stg-user-name em { font-style: normal; font-weight: 500; color: var(--text-tertiary); font-size: 12px; }
.stg-user-email { font-size: 12px; color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Role segmented control */
.stg-seg { display: inline-flex; border: 1px solid rgba(0,0,0,0.12); border-radius: 999px; overflow: hidden; }
.stg-seg-btn {
  border: none; background: transparent; padding: 5px 12px; font-size: 12px; font-weight: 500;
  color: var(--text-secondary); cursor: pointer; transition: all var(--dur-fast) ease;
}
.stg-seg-btn.active { background: linear-gradient(135deg, var(--brand-primary), var(--brand-secondary)); color: #fff; }
.stg-seg-btn:disabled { cursor: default; }
.stg-seg-btn:not(.active):not(:disabled):hover { color: var(--text-primary); }

/* Module chips */
.stg-user-mods { display: flex; flex-wrap: wrap; gap: 6px; }
.stg-mod-chip {
  border: 1px solid rgba(0,0,0,0.12); background: var(--bg-surface); border-radius: 999px;
  padding: 4px 11px; font-size: 12px; font-weight: 500; color: var(--text-tertiary);
  cursor: pointer; transition: all var(--dur-fast) ease;
}
.stg-mod-chip.on {
  background: rgba(var(--brand-primary-rgb), 0.1); border-color: rgba(var(--brand-primary-rgb), 0.45);
  color: var(--brand-primary);
}
.stg-mod-chip:disabled { cursor: default; opacity: 0.75; }
.stg-mod-chip:not(:disabled):hover { border-color: var(--brand-primary); }

/* Status pill */
.stg-status-pill {
  border: 1px solid transparent; border-radius: 999px; padding: 5px 12px;
  font-size: 12px; font-weight: 600; cursor: pointer; transition: all var(--dur-fast) ease;
}
.stg-status-pill.active { background: rgba(34,197,94,0.12); color: #16a34a; }
.stg-status-pill.off    { background: rgba(0,0,0,0.07); color: var(--text-tertiary); }
button.stg-status-pill:hover { border-color: currentColor; }
span.stg-status-pill { cursor: default; }

@media (max-width: 820px) {
  .stg-user-row { grid-template-columns: 1fr auto; }
  .stg-user-mods { grid-column: 1 / -1; }
}

/* Compose hint (signature note under the message box) */
.crm-compose-sig-hint { font-size: 12px; color: var(--text-tertiary); margin-top: 6px; }
.crm-compose-sig-hint a { color: var(--brand-primary); text-decoration: none; }
.crm-compose-sig-hint a:hover { text-decoration: underline; }

/* Deactivated-account stop screen */
.account-disabled-screen {
  position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center;
  background: var(--bg-base);
}
.account-disabled-box { text-align: center; max-width: 380px; padding: 24px; }
.account-disabled-icon { font-size: 40px; margin-bottom: 12px; }
.account-disabled-box h2 { font-family: var(--font-display); font-size: 20px; margin: 0 0 8px; color: var(--text-primary); }
.account-disabled-box p { font-size: 13.5px; color: var(--text-secondary); line-height: 1.6; margin: 0 0 18px; }