/*
 * The admin pages (app/views/admin): People, a person's page, Activity, Logs, Errors and Questions. Their own layout
 * is the admin- classes here; the shared components of docs/web-plan.md (.panel, .chip, .table, .button--quiet and the
 * rest) come from the look, in components.css, buttons.css and forms.css.
 */
/* The admin pages' own navigation. */
.admin-nav { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 16px; margin: 0 0 20px; padding-bottom: 8px; border-bottom: 1px solid var(--rule); }
.admin-nav-title { margin: 0; color: var(--accent-text); font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; }
.admin-nav-links { display: flex; flex-wrap: wrap; gap: 0 16px; list-style: none; margin: 0; padding: 0; }
.admin-nav-links a { display: inline-block; padding: 8px 0; color: var(--ink); text-decoration: none; }
.admin-nav-links a:hover { text-decoration: underline; }
.admin-nav-links a[aria-current="page"] { font-weight: 600; box-shadow: inset 0 -3px 0 var(--accent-text); }

.admin-jump ul { display: flex; flex-wrap: wrap; gap: 0 16px; list-style: none; margin: 8px 0 0; padding: 0; font-size: 14px; }
.admin-jump a { display: inline-block; padding: 6px 0; }

/* Lists of things: people, activity, log entries, errors, questions. */
.admin-list { list-style: none; margin: 0; padding: 0; }
.admin-list > li { padding: 14px 0; border-top: 1px solid var(--rule); min-width: 0; }
.admin-list > li:first-child { border-top: 0; padding-top: 0; }
.admin-list > li:last-child { padding-bottom: 0; }
.admin-item > p { margin: 0 0 4px; }
.admin-item-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.admin-item-line { font-weight: 500; }
.admin-message { white-space: pre-wrap; overflow-wrap: anywhere; }

.admin-person-who { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; margin-bottom: 4px; }
.admin-person-name { font-weight: 600; font-size: 17px; }
.admin-person > p { margin: 0 0 4px; }
.admin-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 8px; }

/* Details to open, and what's in them. */
.admin-more { margin-top: 6px; }
.admin-more > summary { cursor: pointer; color: var(--accent-text); font-size: 14px; width: max-content; max-width: 100%; padding: 4px 0; }
.admin-more > summary:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.admin-facts { display: grid; grid-template-columns: minmax(5em, max-content) minmax(0, 1fr); gap: 4px 12px; margin: 8px 0 0; font-size: 14px; }
.admin-facts > div { display: contents; }
.admin-facts dt { color: var(--ink-soft); }
.admin-facts dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.admin-backtrace { margin: 8px 0 0; max-height: 360px; overflow: auto; padding: 12px; border: 1px solid var(--rule); border-radius: 8px; background: var(--paper);
  font: 12px/1.5 ui-monospace, Menlo, monospace; white-space: pre; }

/* Forms. */
.admin-form { max-width: 560px; }
.admin-fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.admin-fieldset > legend { font-weight: 600; padding: 0; margin-bottom: 8px; }
.admin-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px 16px; margin-bottom: 8px; }
/* Filters sit in even columns that wrap: four across on a desktop, two on a phone, one on the smallest. */
.admin-filters { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); align-items: end; gap: 12px 16px; }
.admin-filters > .field { min-width: 0; }
.admin-filters > .form-actions { justify-self: start; }
/* A person's page filters inside its What happened panel, above the list. */
.panel > .admin-filters { margin: 16px 0; padding-bottom: 16px; border-bottom: 1px solid var(--rule); }
.admin-add { margin-top: 16px; }
.admin-inline-form { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; }
.admin-switch { display: flex; align-items: center; gap: 10px; font-weight: 600; }
.admin-switch input[type="checkbox"] { width: 22px; height: 22px; margin: 0; accent-color: var(--accent-text); }

.admin-page select, .admin-page input[type="date"], .admin-page input[type="time"] {
  font: inherit; font-size: 16px; min-height: 46px; padding: 9px 10px; border: 1px solid var(--rule); border-radius: 8px; background: var(--paper);
  color: var(--ink); max-width: 100%; min-width: 0;
}
.admin-page .field select, .admin-page .field input[type="date"], .admin-page .field input[type="time"] { width: 100%; }
.admin-page select:focus-visible, .admin-page input:focus-visible { outline: 3px solid var(--focus); outline-offset: 1px; }

/* Tables of a person's products, browsers and devices, and the invites waiting. Long words only break when they must,
   so a column isn't squeezed down to a letter or two. */
.admin-table td, .admin-table th, .admin-table .wrap { overflow-wrap: break-word; }
.admin-table td .button, .admin-table td form.button_to { white-space: nowrap; }
.admin-subheading { font-size: 15px; font-weight: 600; margin: 20px 0 8px; }
.admin-subheading:first-of-type { margin-top: 4px; }

/* Words that matter. */
.admin-callout { padding: 10px 14px; border-left: 4px solid var(--alert); background: var(--paper); border-radius: 4px; }
.admin-quote { margin: 8px 0; padding: 2px 0 2px 12px; border-left: 3px solid var(--rule); }
.admin-quote > p { margin: 0 0 2px; }
.admin-quote--answer { border-left-color: var(--accent-text); }
.admin-summary { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.admin-roles { margin: 0; display: flex; flex-direction: column; gap: 10px; }
.admin-roles dt { font-weight: 600; }
.admin-roles dd { margin: 0; }
.admin-older { margin: 16px 0 0; }

.admin-page .admin-danger { border-left: 4px solid var(--alert); }
.admin-confirm > summary { list-style: none; display: inline-block; cursor: pointer; }
.admin-confirm > summary::-webkit-details-marker { display: none; }
.admin-confirm-body { margin-top: 12px; }

/* Read by a screen reader, not seen. */
.admin-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }

/* On a wide screen the admin pages keep to a readable width beside the sidebar. */
.page.admin-page { max-width: 1120px; }