/* Einstellungen (admin area): the settings list beside the page on wall and desktop, a stacked list on
   phones; cards, fact lists, the e-ink previews and the file choosers of the admin pages. */
@layer features {
  .admin { display: grid; gap: var(--space-5); align-items: start; }
  .admin-nav-list { display: grid; gap: var(--space-1); }
  .admin-nav-item {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    min-height: var(--tap-min);
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-sm);
    color: var(--color-text);
    text-decoration: none;
  }
  .admin-nav-item .icon { flex: none; color: var(--color-accent); }
  .admin-nav-text { display: grid; min-width: 0; }
  .admin-nav-label { font-weight: var(--weight-bold); }
  .admin-nav-help { font-size: var(--text-sm); color: var(--color-text-muted); }
  .admin-nav-item[aria-current='page'] { background: var(--color-accent-soft); }
  .admin-nav-item:focus-visible { outline: var(--focus-ring) solid var(--color-focus); outline-offset: 2px; }
  .admin-content { display: grid; gap: var(--space-4); min-width: 0; }
  .admin-head { display: grid; gap: var(--space-1); }
  .admin-back {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    min-height: var(--tap-min);
    width: fit-content;
    color: var(--color-accent);
    font-weight: var(--weight-bold);
    text-decoration: none;
  }
  .admin-body { min-width: 0; }
  .admin-card h2 { font-size: var(--text-lg); }
  .admin-card h3.eyebrow { margin-top: var(--space-2); }
  .admin-form { gap: var(--space-4); }
  .admin-advanced { border-top: 1px solid var(--color-line); padding-top: var(--space-2); }
  .admin-danger-zone { border-top: 1px solid var(--color-line); padding-top: var(--space-3); }

  /* Phones: #/einstellungen is the list; a page shows a back link instead of the list. */
  @media (max-width: 899px) {
    .admin[data-view='list'] .admin-content { order: -1; }
    .admin[data-view='list'] .admin-body, .admin[data-view='list'] .admin-back { display: none; }
    .admin[data-view='page'] .admin-nav { display: none; }
    .admin[data-view='list'] .admin-nav-list { background: var(--color-surface); border-radius: var(--radius-md); padding: var(--space-2); }
  }
  /* Wall and desktop: the settings list stays on the left. */
  @media (min-width: 900px) {
    .admin { grid-template-columns: minmax(220px, 280px) minmax(0, 1fr); }
    .admin-nav { position: sticky; top: 0; }
    .admin-back { display: none; }
    .admin[data-view='list'] .admin-back { display: none; }
  }

  .facts { display: grid; grid-template-columns: minmax(8em, max-content) minmax(0, 1fr); gap: var(--space-1) var(--space-4); margin: 0; }
  .facts dt { color: var(--color-text-muted); }
  .facts dd { margin: 0; overflow-wrap: anywhere; }
  .readonly-value { font-weight: var(--weight-bold); }
  .secret-state { font-weight: var(--weight-bold); }
  .row-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); justify-content: flex-end; }
  .flip-icon .icon { transform: rotate(180deg); }
  .list-row.archived .row-title { color: var(--color-text-muted); }
  .list-row.warning-row .row-meta { color: var(--color-danger); }
  .backup-flags { font-weight: var(--weight-bold); }
  .admin-body .list-row .row-main > * { min-width: 0; overflow-wrap: anywhere; }
  .licence-text { white-space: pre-wrap; overflow-wrap: anywhere; font: var(--text-sm) / 1.5 var(--font-mono); max-height: 60vh; overflow-y: auto; }
  .token-text { font-size: var(--text-md); }
  .ai-test-result:focus, .guide-result:focus, .restore-pending:focus { outline: none; }
  .outbound .row-main { gap: var(--space-1); }
  .outbound-switch { padding: 0; border: 0; }
  .place-current .list-row { border-bottom: 0; }

  .waste-source { display: grid; gap: var(--space-2); padding: var(--space-4); border: 1px solid var(--color-line); border-radius: var(--radius-md); }
  .waste-source h3.row-title { font-size: var(--text-md); margin: 0; }
  .waste-source .list-row { border-bottom: 0; padding: 0; }

  .display-card { display: grid; gap: var(--space-3); padding: var(--space-4); border: 1px solid var(--color-line); border-radius: var(--radius-md); }
  .display-head { display: flex; align-items: center; gap: var(--space-2); }
  .display-head .icon { color: var(--color-accent); }
  .display-name { font-size: var(--text-lg); margin: 0; }
  .display-grid { display: grid; gap: var(--space-4); }
  @media (min-width: 1100px) {
    .display-grid { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); align-items: start; }
  }
  .display-figure { margin: 0; display: grid; gap: var(--space-2); justify-items: start; }
  .display-preview {
    display: block;
    width: 100%;
    max-width: 640px;
    height: auto;
    border: 1px solid var(--color-line);
    border-radius: var(--radius-sm);
    background: var(--color-qr-bg);
  }
  .display-preview.portrait { max-width: 320px; }
  .display-settings summary { min-height: var(--tap-min); }
  .display-actions { flex-wrap: wrap; }

  @media (hover: hover) and (pointer: fine) {
    .admin-nav-item:hover:not([aria-current='page']) { background: var(--color-surface-2); }
  }
}