/*
 * The admin panel (app/views/admin). Plain on purpose: easy to read and act
 * on, built from the app's cards and rows. The overview is laid out like the
 * home (.home-grid): what needs the admin and the latest log in a wide
 * column, the site's numbers, backups, background jobs and the admins in a
 * narrow one; on narrow screens one column, most urgent first.
 */
.app {
  .admin-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 28px; align-items: start; }
  .admin-main, .admin-side { display: grid; gap: 22px; min-width: 0; align-content: start; }
  @media (max-width: 1000px) {
    .admin-grid { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  }

  .admin-grid .card { gap: 12px; }
  .admin-grid .card h2 { font-size: 18px; }
  .admin-grid ul.rows li { align-items: center; }
  .admin-grid .card > .btn { justify-self: start; }

  /* "Precisa de atenção": each row starts with a mark in the warning colour. */
  ul.attention .title::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 8px; border-radius: 50%; background: var(--ribbon); vertical-align: middle; }

  /* "O site em números": label above a big number, two per row. */
  .stat-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 12px; margin: 0; }
  .stat-grid div { display: grid; gap: 2px; }
  .stat-grid dt { font-size: 13px; color: var(--muted); }
  .stat-grid dd { margin: 0; font-size: 22px; font-weight: 700; font-variant-numeric: tabular-nums; }

  /* Something that went wrong (a backup, a background job). */
  .warning { background: var(--warn-bg); border-radius: var(--radius-sm); padding: 8px 10px; }

  /* The photo gallery: a dense grid like a phone's, three across on phones. */
  ul.photo-gallery { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 4px; }
  @media (max-width: 600px) { ul.photo-gallery { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
  ul.photo-gallery a { display: grid; gap: 3px; color: var(--ink); text-decoration: none; }
  ul.photo-gallery img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 4px; background: var(--soft-bg); }
  ul.photo-gallery a:hover img, ul.photo-gallery a:focus-visible img { outline: 2px solid var(--accent); outline-offset: 1px; }
  ul.photo-gallery .caption { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 0 2px 6px; }

  /* One photo, in the gallery's modal or as a page: the photo fits the
     screen's height, whatever its size, with the facts and arrows under it. */
  .photo-details .photo { display: block; max-width: 100%; max-height: min(52vh, 520px); width: auto; height: auto; margin: 0 auto;
    object-fit: contain; border-radius: var(--radius-sm); background: var(--soft-bg); }
  .photo-details .facts-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
  .photo-details .facts { display: grid; gap: 4px; min-width: 0; }
  .photo-details .arrows { display: flex; gap: 6px; flex: none; }

  /* Two lists side by side (Blocks), one under the other on narrow screens. */
  .admin-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: 22px; align-items: start; }
  .admin-cols .card { gap: 12px; }
  .admin-cols .card h2 { font-size: 18px; }
  ul.attempt-blocks li { align-items: center; }
  .chip.until { background: var(--warn-bg); color: var(--ink); box-shadow: none; }

  /* Reports: the reason in quotes under the list's name, Open beside. */
  ul.open-reports li, ul.resolved-reports li { align-items: center; }

  /* The log: the filters on top, then the entries under day headings. */
  .card.log { gap: 6px; }
  .log-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; padding-bottom: 10px; font-size: 14px; color: var(--muted); }
  .log h3.day { margin: 14px 0 2px; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }

  /* How to restore, under the backup download form. */
  .restore-steps { display: grid; gap: 6px; padding-top: 12px; border-top: 1px solid var(--line); }
  .restore-steps h3 { font-size: 15px; }
  .restore-steps ol { margin: 0; padding-left: 20px; display: grid; gap: 4px; }
}