/* Admin pages (layout "admin", body.admin). Tokens come from site.css. */

.admin .site-header,
.admin .site-main { max-width: 64rem; }
.admin-nav { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-3); }
.admin-nav form { display: inline; }
.admin-nav__logout { background: none; border: 0; padding: 0; color: var(--muted); font: inherit; text-decoration: underline; cursor: pointer; }

.admin-flash { padding: var(--space-2) var(--space-3); border-radius: var(--radius); border: 1px solid var(--border); background: var(--surface); }
.admin-flash--alert { border-color: var(--danger); color: var(--danger); }

.admin-table { width: 100%; border-collapse: collapse; font-size: 0.95rem; }
.admin-table th, .admin-table td { text-align: left; vertical-align: top; padding: var(--space-2); border-bottom: 1px solid var(--border); }
.admin-table th { color: var(--muted); font-weight: 600; }
.admin-table td.num { text-align: right; font-variant-numeric: tabular-nums; }
.admin-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.admin-actions form { display: inline; }
.admin-table .admin-actions { flex-wrap: nowrap; }

.admin-form { display: grid; gap: var(--space-2); max-width: 40rem; }
.admin-form--narrow { max-width: 22rem; }
.admin-form label { font-weight: 600; }
.admin-form .hint { color: var(--muted); font-size: 0.9rem; margin: 0; }
.admin-form fieldset { border: 1px solid var(--border); border-radius: var(--radius); display: grid; gap: var(--space-2); }
.admin-errors { color: var(--danger); }

.admin-small { font-size: 0.85rem; color: var(--muted); }
/* Scoped under .admin: stylesheets load alphabetically, so site.css's .button
   would otherwise win over these. */
.admin .button--quiet { background: none; color: var(--accent) !important; border: 1px solid var(--border); text-decoration: none; }
.admin .button--danger { background: none; color: var(--danger) !important; border: 1px solid var(--danger); }

.admin-images { display: grid; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); gap: var(--space-3); }
.admin-image { margin: 0; min-width: 0; border: 1px solid var(--border); border-radius: var(--radius); padding: var(--space-2); background: var(--surface); display: grid; gap: var(--space-1); align-content: start; }
.admin-image .admin-actions { flex-wrap: nowrap; align-items: center; }
.admin .admin-image__turn { font-size: 1.5rem; line-height: 1; padding: 0.2rem var(--space-3); }
.admin-image img { width: 100%; height: 9rem; object-fit: contain; }

/* Dropdown buttons (<details> + dropdown_controller.js). */
.dropdown { position: relative; }
.dropdown > summary { list-style: none; display: inline-block; cursor: pointer; white-space: nowrap; }
.dropdown > summary::-webkit-details-marker { display: none; }
.dropdown__menu {
  position: absolute;
  z-index: 10;
  top: calc(100% + 4px);
  right: 0; /* opens leftwards: the actions column is the last one */
  min-width: 18rem;
  max-width: min(26rem, 90vw);
  display: grid;
  padding: var(--space-1);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: 0 6px 24px rgb(0 0 0 / 0.12);
}
.dropdown__menu form { display: block; }
.dropdown__item {
  display: block;
  width: 100%;
  padding: var(--space-2);
  border: 0;
  border-radius: calc(var(--radius) - 4px);
  background: none;
  color: var(--text) !important;
  font: inherit;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}
.dropdown__item:hover, .dropdown__item:focus-visible { background: var(--bubble-bot); }
.dropdown__item--weak { color: var(--muted) !important; }
.dropdown__heading { margin: var(--space-2) var(--space-2) 0; font-size: 0.8rem; color: var(--muted); }

.admin-tabs { display: flex; gap: var(--space-3); margin-bottom: var(--space-2); }
.admin-tabs a { padding-bottom: 2px; text-decoration: none; }
.admin-tabs a.is-current { color: var(--text) !important; border-bottom: 2px solid var(--accent); font-weight: 600; }

.admin-image-edit { display: grid; gap: var(--space-4); grid-template-columns: minmax(10rem, 18rem) 1fr; align-items: start; }
.admin-image-edit__preview { width: 100%; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
@media (max-width: 640px) { .admin-image-edit { grid-template-columns: 1fr; } }

/* Follow-up rows in the responses index, indented under the response that links to them. */
.admin-followup td { border-bottom-style: dashed; }
.admin-followup--depth-1 .admin-followup__reply { padding-left: calc(var(--space-2) + 1.5rem); }
.admin-followup--depth-2 .admin-followup__reply { padding-left: calc(var(--space-2) + 3rem); }
.admin-followup--depth-3 .admin-followup__reply { padding-left: calc(var(--space-2) + 4.5rem); }
.admin-followup--depth-4 .admin-followup__reply { padding-left: calc(var(--space-2) + 6rem); }

/* Responses index: toolbar with search; phrases inline with separators. */
.admin-toolbar { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; margin-bottom: var(--space-2); }
.admin-search { display: flex; gap: var(--space-1); flex: 1; min-width: 14rem; max-width: 28rem; }
.admin-search input { flex: 1; min-width: 0; }
.admin-search .button { flex: none; }
.admin-phrases { list-style: none; margin: 0; padding: 0; }
.admin-phrases li { display: inline; }
.admin-phrases li + li::before { content: " · "; }

/* On narrow screens each response row is a card like the image library's: a
   title bar (id, then the buttons), then the intent phrases (stacked), the
   reply and the attachments, each labelled. Follow-ups are indented cards. */
@media (max-width: 640px) {
  .admin-responses thead { display: none; }
  .admin-responses,
  .admin-responses tbody { display: block; }
  .admin-responses tr {
    display: grid; grid-template-columns: 1fr auto; gap: var(--space-1) var(--space-2);
    grid-template-areas: "id actions" "phrases phrases" "reply reply" "attachments attachments";
    margin-bottom: var(--space-2); padding: var(--space-2);
    border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface);
  }
  .admin-responses td { display: block; padding: 0; border: 0; min-width: 0; }
  .admin-responses .admin-responses__id { grid-area: id; align-self: center; font-weight: 600; }
  .admin-responses .admin-responses__actions { grid-area: actions; }
  .admin-responses .admin-responses__phrases { grid-area: phrases; }
  .admin-responses .admin-responses__reply { grid-area: reply; padding-left: 0; }
  .admin-responses .admin-responses__attachments { grid-area: attachments; }
  .admin-responses .admin-responses__attachments--none { display: none; }
  .admin-responses td[data-label]::before { content: attr(data-label); display: block; font-size: 0.75rem; font-weight: 600; color: var(--muted); }
  .admin-responses .admin-phrases li { display: block; }
  .admin-responses .admin-phrases li + li::before { content: none; }
  /* A follow-up link ("yes → #12 … has its own row"): one line, no title bar. */
  .admin-responses .admin-followup--link { grid-template-areas: "reply"; grid-template-columns: 1fr; }
  .admin-responses .admin-followup--link .admin-responses__id { display: none; }
  .admin-responses .admin-followup--link .admin-responses__reply::before { content: none; }
  .admin-responses .admin-followup--depth-1 { margin-left: 1rem; }
  .admin-responses .admin-followup--depth-2 { margin-left: 2rem; }
  .admin-responses .admin-followup--depth-3,
  .admin-responses .admin-followup--depth-4 { margin-left: 2.5rem; }
}