/* EgyptAuth — Administrators, Platform settings and Account (staff/pages/admins.js, settings.js, settings-telegram.js,
   settings-intel.js, shared/account.js — the account panel also serves the reseller portal and customers).
   The settings template itself (.set-layout .set-section .set-head .set-group .set-caption .set-rows .set-row …, the
   save bar and the danger zone) is shared: components.css. Owns: .set-kv .set-drop (platform settings), .acct-* (account),
   .tg-* (Telegram bot), .intel-* (IP lookup), .adm-* (administrators). Semantic tokens only (docs/DESIGN_SYSTEM.md §2). */

/* ---------- Platform settings ---------- */
/* The platform pilot uses the same field markup and save behavior as account/app settings,
   with a flatter page composition. Keep this scoped until the remaining layouts are reviewed. */
.platform-settings { width: 100%; max-width: 1120px; gap: 28px; }
.platform-settings .page-header { padding-bottom: 0; }
.platform-settings .set-layout { grid-template-columns: 184px minmax(0, 1fr); gap: 32px; }
.platform-settings .set-nav { top: calc(var(--header-h) + 24px); }
.platform-settings .subnav-item { min-height: 40px; height: auto; padding-block: 9px; font-weight: 400; }
.platform-settings .subnav-item.is-active { font-weight: 500; }
.platform-settings .subnav-item.is-active::before { background: var(--focus-color); }
.platform-settings .set-nav .subnav-item > .grow { white-space: normal; overflow-wrap: anywhere; }
.platform-settings .set-head { border: 0; padding-bottom: 0; }
.platform-settings .set-head h2 { font-size: 18px; }
.platform-settings .set-group { gap: 12px; }
.platform-settings .set-caption { color: var(--ink-1); font: 500 14px/1.4 var(--font-sans); letter-spacing: 0; text-transform: none; }
.platform-settings .set-caption.is-danger { color: var(--danger-text); }
.platform-settings .set-card:not(.danger-zone) {
  background: transparent; border: 0; border-top: 1px solid var(--line-1); border-radius: 0; box-shadow: none; overflow: visible;
}
.platform-settings .set-rows { --set-control-w: min(360px, 44%); }
.platform-settings .set-rows > :is(.field, .toggle-row, .set-row),
.platform-settings .set-rows > div.full:not(.field),
.platform-settings .set-rows > .field > .toggle-row { padding: 16px 0; }
.platform-settings .set-rows > .field:has(> .toggle-row) { padding: 0; }
.platform-settings .set-rows > .field > .field-label { padding-top: 9px; }
.platform-settings .set-rows > .field:has(> .textarea) > .field-label { padding-top: 0; }
.platform-settings :is(.field-hint, .field-error, .t-hint, .set-help, .set-row-hint) { font-size: 13px; line-height: 1.5; }
.platform-settings .set-help { max-width: 80ch; }
.platform-settings .set-rows > .field > .toggle-row + .field-error { padding-inline: 0; }
.platform-settings .save-bar { box-shadow: none; }
.platform-settings .set-card > .card-footer { background: transparent; padding-inline: 0; }
@media (max-width: 900px) {
  .platform-settings .set-layout { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .platform-settings .set-nav .subnav-item > .grow { white-space: nowrap; }
}
@media (max-width: 640px) {
  .platform-settings { gap: 20px; }
  .platform-settings .set-rows > .field > .field-label { padding-top: 0; }
  .platform-settings .subnav-item { min-height: 44px; }
}
.set-kv { padding: 2px var(--s4); }
.set-kv .kv { grid-template-columns: minmax(140px, 30%) minmax(0, 1fr); }
.set-kv .kv dd { flex-wrap: nowrap; align-items: flex-start; }
.set-kv .kv dd > .mono.break { flex: 0 1 auto; min-width: 0; padding-top: 1px; }
.set-kv .kv dd > .copy-btn { margin-top: -4px; }
.set-drop { margin-top: var(--s3); }
.set-drop .icon-lg { color: var(--ink-3); }
.set-drop:focus-within { outline: 2px solid var(--accent-line); outline-offset: 2px; }

/* Telegram bot */
.tg-token .input { letter-spacing: 0.01em; }
.tg-skeleton { height: 120px; }
.tg-pending .spinner { display: inline-block; vertical-align: -2px; margin-inline-end: 6px; color: var(--accent-text); }
.tg-recv { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px var(--s6); margin: 0; padding: var(--s3) var(--s4); }
.tg-recv > li { display: flex; align-items: flex-start; gap: 10px; color: var(--ink-2); font-size: var(--fs-sm); line-height: 1.5; }
.tg-recv > li > .icon { flex: none; margin-top: 2px; color: var(--ink-3); }
.tg-account { display: flex; flex-direction: column; min-width: 0; }
@media (max-width: 640px) { .tg-recv { grid-template-columns: minmax(0, 1fr); } }

/* IP lookup: the provider choice is a list of radio rows inside one panel. */
.intel-opt { display: flex; align-items: flex-start; gap: var(--s3); padding: var(--s3) var(--s4); cursor: var(--cursor-action, pointer); transition: background-color var(--t-fast); }
.intel-opt + .intel-opt { border-top: 1px solid var(--line-1); }
.intel-opt:hover { background: var(--state-row-hover); }
.intel-opt:has(input:checked), .intel-opt.is-active { background: var(--state-selected); }
.intel-opt input { flex: none; margin-top: 3px; accent-color: var(--accent); }
.intel-opt-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.intel-opt-name { color: var(--ink-1); font-size: var(--fs-sm); font-weight: 500; }
.intel-opt-desc { color: var(--ink-3); font-size: var(--fs-xs); line-height: 1.45; }
.intel-key { display: flex; flex-wrap: wrap; gap: var(--s2); }
.intel-key .input { flex: 1 1 240px; min-width: 0; }

/* ---------- Account (shared/account.js) ---------- */
.acct-photo { display: flex; align-items: center; gap: var(--s3); flex: 1 1 auto; min-width: 0; }
.acct-photo > .avatar { flex: none; }
.acct-drop { transition: background-color var(--t-fast), box-shadow var(--t-fast); }
.acct-drop.is-dragover { background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--accent-line); }
.acct-enrol { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--s5); align-items: start; padding: var(--s4); }
.acct-enrol > .qr { justify-self: start; }
.acct-enrol-steps { display: flex; flex-direction: column; gap: var(--s3); min-width: 0; }
.acct-enrol-steps > p { color: var(--ink-2); font-size: var(--fs-sm); }
.acct-meter { width: 100%; }
@media (max-width: 640px) {
  .acct-enrol { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Administrators ---------- */
.adm-user { display: flex; align-items: center; gap: 10px; min-width: 0; }
.adm-user .avatar { flex: none; }
.adm-user-text { display: flex; flex-direction: column; min-width: 0; }
.adm-user-name { display: flex; align-items: center; gap: var(--s2); min-width: 0; }
.adm-user-name .chip { flex: none; }
.adm-actions { display: inline-flex; align-items: center; gap: var(--s1); }
.adm-roles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0; border: 1px solid var(--line-1); border-radius: var(--r-lg); background: var(--surface-1); }
.adm-role { display: flex; flex-direction: column; gap: var(--s1); padding: var(--s3) var(--s4) 14px; min-width: 0; }
.adm-role + .adm-role { border-inline-start: 1px solid var(--line-1); }
.adm-role dt { display: flex; align-items: center; gap: var(--s2); }
.adm-role dd { color: var(--ink-2); font-size: var(--fs-sm); line-height: 1.5; }
@media (max-width: 1100px) {
  .adm-roles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .adm-role + .adm-role { border-inline-start: 0; }
  .adm-role:nth-child(even) { border-inline-start: 1px solid var(--line-1); }
  .adm-role:nth-child(n + 3) { border-top: 1px solid var(--line-1); }
}
@media (max-width: 760px) {
  .adm-actions .adm-edit { display: none; }
}
@media (max-width: 560px) {
  .adm-roles { grid-template-columns: minmax(0, 1fr); }
  .adm-role:nth-child(even) { border-inline-start: 0; }
  .adm-role + .adm-role { border-top: 1px solid var(--line-1); }
}