/* The Admin pages of /next/ (pages/admin.js and pages/admin/*.js): team, settings, connections, agents, quick fixes and scripts, security, backups,
   setup, usage, billing setup. Only the layout these pages need on top of the component library in next.css; every colour, size and radius is a
   token from next.css. No inline styles anywhere (the /next/ CSP is style-src 'self'). Class names start with ad-. */

/* ---------- the frame: the Admin sub-menu beside the content (a desktop), a row that scrolls sideways above it (a phone) ---------- */
.ad-layout { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: var(--s-6); align-items: start; min-width: 0; }
.ad-main { display: flex; flex-direction: column; gap: var(--s-5); min-width: 0; }
.ad-nav { position: sticky; top: calc(var(--top-h) + var(--s-4)); display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ad-nav__item { display: flex; align-items: center; gap: var(--s-3); min-height: var(--h); padding: 0 var(--s-3); border-radius: var(--r); color: var(--ink-2); font-size: var(--t-14); font-weight: 500; text-decoration: none; }
.ad-nav__item:hover { background: var(--hover); color: var(--ink); }
.ad-nav__item[aria-current="page"] { background: var(--selected); color: var(--selected-ink); font-weight: 600; }
.ad-nav__item .ico { flex: none; }
@media (max-width: 959px) {
  .ad-layout { grid-template-columns: minmax(0, 1fr); gap: var(--s-4); }
  .ad-nav { position: static; flex-direction: row; overflow-x: auto; gap: var(--s-1); padding-bottom: var(--s-1); scrollbar-width: thin; scrollbar-color: var(--scroll-thumb) var(--scroll-track); }
  .ad-nav__item { flex: none; white-space: nowrap; border: 1px solid var(--line); background: var(--surface); }
}

/* ---------- small parts ---------- */
.ad-pad { padding: var(--s-4) var(--s-5); }
.ad-pad-x { padding: var(--s-3) var(--s-5) 0; }
.ad-h2 { font-size: var(--t-17); font-weight: 600; }
.ad-grow { flex: 1 1 auto; }
.ad-line { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-3); font-size: var(--t-14); min-width: 0; overflow-wrap: anywhere; }
.ad-dirty { color: var(--amber); font-size: var(--t-13); font-weight: 500; }
.ad-plain { border: 0; margin: 0; padding: 0; min-width: 0; }
.ad-toolbar { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--s-3) var(--s-5); }
.ad-toolbar > .field { flex: 0 1 320px; }
.ad-toolbar > .note { flex: 1 1 280px; }
.ad-inline { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--s-2) var(--s-3); }
.ad-inline > .field { flex: 1 1 220px; max-width: 420px; }
.ad-search { max-width: 520px; }

/* ---------- settings: one setting per row ---------- */
.ad-rows { display: flex; flex-direction: column; }
.ad-set { padding: var(--s-4) var(--s-5); border-top: 1px solid var(--line-soft); min-width: 0; }
.ad-set:first-child { border-top: 0; }
.ad-set > .field, .ad-set > .check { max-width: 640px; }
.ad-set input[type="number"], .ad-dur input[type="number"] { max-width: 220px; }
.ad-rows--bare { gap: var(--s-4); }
.ad-rows--bare > .ad-set { padding: 0; border: 0; }
.ad-dur { display: grid; grid-template-columns: minmax(0, 260px) 160px; gap: var(--s-3); align-items: end; max-width: 460px; }
.ad-dur .field__hint { white-space: normal; }
.ad-th { border: 0; margin: 0; padding: 0; }
.ad-th legend { font-size: var(--t-14); font-weight: 500; margin-bottom: var(--s-2); padding: 0; }
.ad-th .fields { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); max-width: 640px; }
@media (max-width: 519px) { .ad-dur { grid-template-columns: minmax(0, 1fr); } }

/* ---------- team ---------- */
.ad-person { display: flex; align-items: center; gap: var(--s-3); min-width: 0; }
.ad-person__text { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; overflow-wrap: anywhere; }
.ad-summary { font-size: var(--t-14); color: var(--ink-2); overflow-wrap: anywhere; }
.ad-levels { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--s-4); }
.ad-details > summary { cursor: pointer; min-height: var(--h); display: flex; align-items: center; color: var(--accent); font-weight: 500; }
.ad-caps { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--s-3) var(--s-5); padding-top: var(--s-2); }
.ad-caps__head { font-size: var(--t-13); font-weight: 600; color: var(--ink-2); margin-bottom: 4px; }
.ad-caps__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.ad-cap { display: flex; gap: var(--s-2); align-items: flex-start; font-size: var(--t-13); line-height: 1.4; }
.ad-cap .ico { margin-top: 2px; }
.ad-cap--yes .ico { color: var(--green); }
.ad-cap--no { color: var(--muted); }

/* ---------- a code shown once, a command to copy ---------- */
.ad-code { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-3) var(--s-4); border: 1px solid var(--line); border-radius: var(--r); background: var(--surface-2); min-width: 0; }
.ad-code code { flex: 1 1 auto; min-width: 0; font-size: var(--t-15); overflow-wrap: anywhere; word-break: break-all; }
.ad-code--block { align-items: flex-start; padding: 0; border: 0; background: none; }
.ad-code--block pre { flex: 1 1 auto; min-width: 0; }
.ad-restore { margin: 0; padding-left: 1.4em; display: flex; flex-direction: column; gap: var(--s-4); }
.ad-restore li > p { margin: 2px 0 var(--s-2); font-size: var(--t-14); }

/* ---------- a file chooser that looks like a button (never the browser's own control) and the import drop zone ---------- */
.ad-file { position: relative; cursor: pointer; }
.ad-file:focus-within { outline: 2px solid var(--focus); outline-offset: 2px; }
.ad-drop { border-style: dashed; border-color: var(--control); }
.ad-drop.is-drop-over { border-color: var(--accent); background: var(--hover); }
.ad-drop__label { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--s-2); min-height: 180px; padding: var(--s-6) var(--s-5); text-align: center; cursor: pointer; }
.ad-drop__label:focus-within { outline: 2px solid var(--focus); outline-offset: -4px; border-radius: var(--r-lg); }
.ad-drop__title { font-size: var(--t-17); font-weight: 600; }

/* ---------- chips with a remove button (countries, addresses) ---------- */
.ad-chips { display: flex; flex-wrap: wrap; gap: var(--s-2); margin: var(--s-2) 0 var(--s-3); }
.ad-chip { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 0 4px 0 12px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface-2); font-size: var(--t-14); max-width: 100%; overflow-wrap: anywhere; }
.ad-chip:not(:has(button)) { padding-right: 12px; }
.ad-chip__x { display: inline-grid; place-items: center; width: 28px; height: 28px; border: 0; border-radius: 50%; background: none; color: var(--muted); }
.ad-chip__x:hover { background: var(--sunk); color: var(--ink); }

/* ---------- a list whose whole row is one button (the setup checklist) ---------- */
.ad-rowlist { list-style: none; margin: 0; padding: 0; container-type: inline-size; }
.ad-rowbtn { display: grid; grid-template-columns: 150px minmax(0, 1fr) auto; gap: var(--s-2) var(--s-4); align-items: center; width: 100%; min-height: 56px; padding: 10px var(--s-5); border: 0; border-top: 1px solid var(--line-soft); background: none; color: var(--ink); text-align: left; font: inherit; }
.ad-rowlist li:first-child .ad-rowbtn { border-top: 0; }
.ad-rowbtn:hover { background: var(--hover); }
.ad-rowbtn:focus-visible { outline-offset: -2px; }
.ad-rowbtn__trail { font-size: var(--t-13); color: var(--muted); white-space: nowrap; }
@container (max-width: 560px) { .ad-rowbtn { grid-template-columns: minmax(0, 1fr) auto; } .ad-rowbtn > .status { grid-column: 1 / -1; } }
.ad-person-row { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) auto; }
@container (max-width: 560px) { .ad-person-row { grid-template-columns: minmax(0, 1fr); } .ad-person-row .ad-rowbtn__trail { white-space: normal; } }

/* ---------- lists of things with their actions (codes, releases, scripts, phones) ---------- */
.alist__row > .btn-row { justify-content: flex-end; }
@container (max-width: 560px) { .alist__row > .btn-row { grid-column: 1 / -1; justify-content: flex-start; } }
.ad-rel .alist__title { font-size: var(--t-15); }
.ad-fix .check { min-height: 36px; padding: 0; font-size: var(--t-13); }

/* ---------- usage ---------- */
.ad-uscards { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--s-4) var(--s-5); }
.ad-uscard { display: flex; flex-direction: column; gap: var(--s-2); min-width: 0; }