/*
 * Admin › Profile themes (specs/006 US5, contracts/ui-profile-themes.md §7): the tabs, the
 * rows of each list, and the New piece menu. The forms are shared/theme_upload.css.
 * Tokens only (constitution Principle VII).
 */

.admin-themes {
  max-width: 960px;
  margin: 0 auto;
  padding: var(--space-6) var(--space-4) var(--space-12);
}

.admin-themes__header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-4);
}

.admin-themes__header .text-caption {
  max-width: 560px;
  margin-top: var(--space-1);
}

.admin-themes__title {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

/* ---- New piece: a menu of the four kinds of form */

.admin-themes__create {
  position: relative;
}

.admin-themes__create > summary {
  width: auto;
  list-style: none;
  cursor: pointer;
}

.admin-themes__create > summary::-webkit-details-marker {
  display: none;
}

.btn.admin-themes__create {
  width: auto;
}

.admin-themes__menu {
  position: absolute;
  top: calc(100% + var(--space-1));
  right: 0;
  z-index: 10;
  display: flex;
  flex-direction: column;
  min-width: 200px;
  padding: var(--space-1);
  background-color: var(--color-card-raised);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-standard);
  box-shadow: var(--shadow-dialog);
}

.admin-themes__menu-item {
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-md);
  color: var(--color-foreground);
  text-decoration: none;
  border-radius: var(--radius-subtle);
}

.admin-themes__menu-item:hover,
.admin-themes__menu-item:focus-visible {
  background-color: var(--color-selection);
  text-decoration: none;
}

/* ---- Tabs */

.admin-themes__tabs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
  border-bottom: 1px solid var(--color-border-subtle);
}

.admin-themes__tab {
  margin-bottom: -1px;
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  color: var(--color-comment);
  text-decoration: none;
  border-bottom: 2px solid transparent;
}

.admin-themes__tab:hover {
  color: var(--color-foreground);
  text-decoration: none;
}

.admin-themes__tab[aria-current="page"] {
  color: var(--color-foreground);
  border-bottom-color: var(--color-purple);
}

/* ---- Search: by name or a pasted ID, within the tab */

.admin-themes__search {
  display: flex;
  gap: var(--space-2);
  max-width: 560px;
  margin-bottom: var(--space-4);
}

.admin-themes__search .input {
  flex: 1;
  min-width: 0;
}

.admin-themes__search .btn {
  width: auto;
}

.admin-themes__empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
}

.admin-themes__empty .btn {
  width: auto;
}

/* ---- Cards: the piece or theme playing on a sample card on top, then what it is
   (owner's request, 2026-10-20). As many as fit, at least 260px wide, like the shop. */

.admin-themes__page {
  display: block;
}

.admin-themes__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr));
  gap: var(--space-4);
}

.admin-themes__grid + turbo-frame,
.admin-themes__list + turbo-frame {
  display: block;
  margin-top: var(--space-4);
}

.admin-themes__card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
  background-color: var(--color-card);
  border-radius: var(--radius-comfortable);
  box-shadow: var(--shadow-card);
}

.admin-themes__preview {
  padding: var(--space-3);
  background-color: var(--color-deep-night);
}

.admin-themes__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-3);
}

/* ---- Refused uploads: a list of rows, newest first */

.admin-themes__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.admin-themes__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4);
  background-color: var(--color-card);
  border-radius: var(--radius-comfortable);
  box-shadow: var(--shadow-card);
}

.admin-themes__main {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  min-width: 0;
}

.admin-themes__name,
.admin-themes__filename {
  margin: 0;
  overflow: hidden;
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-themes__filename {
  font-family: var(--font-mono);
}

.admin-themes__meta {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--color-comment);
}

.admin-themes__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: auto;
  padding-top: var(--space-1);
}

.admin-themes__actions form {
  display: contents;
}

.admin-themes__actions .btn {
  width: auto;
}

.admin-themes__chip {
  padding: var(--space-0-5) var(--space-2);
  color: var(--color-orange);
  background-color: var(--color-deep-night);
  border-radius: var(--radius-subtle);
}

.admin-themes__row > .admin-themes__chip {
  justify-self: end;
}

.admin-themes__chip--disguised {
  color: var(--color-red);
}

.admin-themes__chip--too_large,
.admin-themes__chip--wrong_kind,
.admin-themes__chip--unreadable {
  color: var(--color-comment);
}

.admin-themes__loading {
  margin: 0;
  padding: var(--space-4);
  font-size: var(--text-md);
  text-align: center;
  color: var(--color-comment);
}

.admin-themes__empty {
  padding: var(--space-8) var(--space-4);
  text-align: center;
  color: var(--color-comment);
}

.admin-themes__empty p {
  margin: 0;
}