/*
  Enrot — Admin styles (M4, extended M5)

  Same material language as the public site (tokens.css) but denser and
  flatter per brief §9: no card shadows, tighter rhythm, Bakelite-dark
  sidebar replacing the public header. Loaded after main.css on every
  admin page, so it can freely reuse .button/.mono/.empty-state etc.
  without redefining them.

  M5 additions: the item-list filter bar, live photo management (grid
  of small per-photo controls, replacing M4's read-only gallery), the
  danger-zone soft-delete section, and a compact table variant reused
  by the dashboard's per-category breakdown and (unchanged) the Items
  and Trash tables.
*/

.admin-body {
  background-color: var(--surface-page);
  background-image: none; /* no paper grain in admin — "flatter" per §9 */
  min-height: 100vh;
}

.admin-shell {
  display: flex;
  min-height: 100vh;
}

/* ---- Sidebar ---- */

.admin-sidebar {
  width: 220px;
  flex: 0 0 220px;
  background-color: var(--surface-admin);
  color: var(--text-on-dark);
  display: flex;
  flex-direction: column;
  padding: var(--space-5) var(--space-4);
}

.admin-sidebar__wordmark {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-display);
  font-size: 1.1rem;
  color: var(--text-on-dark);
  margin: 0 0 var(--space-6);
}

.admin-sidebar__wordmark span {
  color: var(--accent-primary);
}

/* Logo mark (M10 addendum #3) — same asset/reasoning as
   .site-header__mark in main.css; paired ahead of the text, not a
   replacement for it. */
.admin-sidebar__mark {
  width: 26px;
  height: 26px;
  flex: none;
}

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

.admin-sidebar__nav a {
  color: var(--text-on-dark);
  opacity: 0.75;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-control);
}

.admin-sidebar__nav a:hover {
  opacity: 1;
}

.admin-sidebar__nav a.is-active {
  opacity: 1;
  background-color: rgb(176 141 87 / 15%);
  color: var(--accent-primary);
}

.admin-sidebar__footer {
  border-top: 1px solid rgb(243 236 221 / 12%);
  padding-top: var(--space-4);
}

/* M10 — "View site →" link, bottom-pinned above the user/logout block
   per the design handoff's admin sidebar spec. */
.admin-sidebar__view-site {
  display: block;
  color: var(--accent-primary);
  opacity: 0.9;
  font-size: 0.8rem;
  margin: 0 0 var(--space-3);
}

.admin-sidebar__view-site:hover {
  opacity: 1;
  text-decoration: underline;
}

.admin-sidebar__user {
  color: var(--text-on-dark);
  opacity: 0.6;
  font-size: 0.75rem;
  margin: 0 0 var(--space-3);
  word-break: break-all;
}

.admin-sidebar__logout {
  background: none;
  border: 1px solid rgb(243 236 221 / 25%);
  color: var(--text-on-dark);
  padding: var(--space-2) var(--space-3);
  width: 100%;
  cursor: pointer;
  font-family: var(--font-body);
  font-size: 0.85rem;
}

.admin-sidebar__logout:hover {
  border-color: var(--accent-primary);
  color: var(--accent-primary);
}

/* ---- Main content ---- */

.admin-main {
  flex: 1;
  padding: var(--space-6) var(--space-7);
  max-width: 960px;
}

.admin-main h1 {
  font-size: 1.75rem;
  margin-bottom: var(--space-2);
}

.admin-main h2 {
  font-size: 1.1rem;
  margin-top: var(--space-6);
}

/* ---- Flash messages ---- */

.admin-flash {
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-panel);
  margin: 0 0 var(--space-4);
  font-size: 0.9rem;
}

.admin-flash--ok {
  background-color: rgb(95 120 99 / 12%);
  border: 1px solid var(--signal);
  color: var(--signal);
}

.admin-flash--error {
  background-color: rgb(165 103 74 / 12%);
  border: 1px solid var(--accent-secondary);
  color: var(--accent-secondary);
}

.admin-flash--info {
  background-color: var(--surface-card);
  border: 1px solid var(--border-hairline);
  color: var(--text-primary);
}

/* ---- Dashboard stat cards ---- */

/* M10 — explicit 4-column grid (wraps), replacing the flex-wrap row,
   per the design handoff's "4-column stat-card grid (7 cards, wraps)". */
.admin-stat-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-4);
  margin: var(--space-5) 0 var(--space-6);
}

@media (max-width: 860px) {
  .admin-stat-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.admin-stat-card {
  background-color: var(--surface-card);
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-panel);
  padding: var(--space-4);
  min-width: 0;
}

.admin-stat-card--flag {
  background-color: rgb(165 103 74 / 6%);
  border-color: var(--accent-secondary);
}

.admin-stat-card__value {
  font-size: 1.75rem;
  color: var(--text-primary);
  margin: 0;
}

.admin-stat-card__value--brass {
  color: var(--accent-primary);
}

.admin-stat-card__value--signal {
  color: var(--signal);
}

.admin-stat-card__label {
  font-size: 0.75rem;
  color: var(--text-primary);
  opacity: 0.7;
  margin: 0;
}

/* ---- Dashboard: recently edited (M10) ---- */

.admin-recent-list {
  list-style: none;
  margin: 0 0 var(--space-5);
  padding: 0;
  background-color: var(--surface-card);
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-panel);
}

.admin-recent-list li {
  border-top: 1px solid var(--border-hairline);
}

.admin-recent-list li:first-child {
  border-top: none;
}

.admin-recent-list a {
  display: flex;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-3) var(--space-4);
  color: var(--text-primary);
}

.admin-recent-list a:hover {
  background-color: rgb(176 141 87 / 6%);
}

.admin-recent-list__time {
  opacity: 0.6;
  font-size: 0.8rem;
  white-space: nowrap;
}

/* ---- Dashboard: per-category breakdown, create-item link row ---- */

.admin-table--compact {
  max-width: 480px;
  margin-bottom: var(--space-5);
}

.admin-dashboard__actions {
  display: flex;
  gap: var(--space-3);
}

/* ---- Item list table ---- */

.admin-list-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: var(--space-4);
}

/* ---- Filter bar (item list) ---- */

.admin-filter-bar {
  display: flex;
  align-items: flex-end;
  gap: var(--space-4);
  background-color: var(--surface-card);
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-panel);
  padding: var(--space-3) var(--space-4);
  margin-bottom: var(--space-4);
}

.admin-filter-bar label {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  font-size: 0.8rem;
  color: var(--text-primary);
}

.admin-filter-bar select,
.admin-filter-bar input[type="search"] {
  font-family: var(--font-body);
  font-size: 0.85rem;
  padding: var(--space-2);
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-control);
  background-color: var(--surface-page);
  color: var(--text-body);
}

.admin-filter-bar input[type="search"]:focus {
  outline: none;
  border-color: var(--signal);
}

.admin-filter-bar__search {
  flex: 1;
  min-width: 200px;
}

.admin-filter-bar__search input {
  width: 100%;
}

.admin-filter-bar a {
  font-size: 0.8rem;
}

/* ---- Language-completeness dots (M10 item list) ---- */

.admin-lang-dots {
  letter-spacing: 0.15em;
}

.admin-lang-dots__dot {
  opacity: 0.35;
}

.admin-lang-dots__dot.is-present {
  opacity: 1;
  color: var(--signal);
}

.admin-table {
  width: 100%;
  border-collapse: collapse;
  background-color: var(--surface-card);
  border: 1px solid var(--border-hairline);
}

.admin-table th,
.admin-table td {
  text-align: left;
  padding: var(--space-2) var(--space-3);
  border-top: 1px solid var(--border-hairline);
  font-size: 0.85rem;
}

.admin-table th {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  opacity: 0.7;
  border-top: none;
}

.admin-table tbody tr:hover {
  background-color: rgb(176 141 87 / 6%);
}

.admin-pagination {
  display: flex;
  gap: var(--space-4);
  align-items: center;
  margin-top: var(--space-4);
  font-size: 0.85rem;
}

/* ---- Status / review badges ---- */

.badge-status {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  padding: 2px var(--space-2);
  border-radius: var(--radius-control);
  border: 1px solid var(--border-hairline);
  text-transform: lowercase;
}

.badge-status--draft {
  color: var(--text-primary);
  opacity: 0.7;
}

.badge-status--published_partial {
  border-color: var(--accent-primary);
  color: var(--accent-primary);
}

.badge-status--published_complete {
  border-color: var(--signal);
  color: var(--signal);
  background-color: rgb(95 120 99 / 10%);
}

.badge-review {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  padding: 2px var(--space-2);
  border-radius: var(--radius-control);
  border: 1px solid var(--accent-secondary);
  color: var(--accent-secondary);
}

.badge-pending {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  padding: 2px var(--space-2);
  border-radius: var(--radius-control);
  border: 1px solid var(--accent-primary);
  color: var(--accent-primary);
  background-color: rgb(176 141 87 / 10%);
}

/* M7 — admin-side pending-translation badge, next to an ES/EN fieldset
   legend when item_translations has no row yet for that locale. Same
   visual treatment as .badge-review (both flag "not done yet"). */
.badge-translation-missing {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.65rem;
  text-transform: none;
  padding: 2px var(--space-2);
  border-radius: var(--radius-control);
  border: 1px solid var(--accent-secondary);
  color: var(--accent-secondary);
  margin-left: var(--space-2);
  vertical-align: middle;
}

/* ---- Pending Changes banner + diff table (M6) ---- */

.admin-pending-banner {
  background-color: var(--surface-card);
  border: 1px solid var(--accent-primary);
  border-radius: var(--radius-panel);
  padding: var(--space-4);
  margin-bottom: var(--space-5);
}

.admin-pending-banner p {
  font-size: 0.85rem;
  opacity: 0.9;
}

.admin-diff-table {
  width: 100%;
  border-collapse: collapse;
  margin: var(--space-3) 0 var(--space-4);
  font-size: 0.82rem;
}

.admin-diff-table th,
.admin-diff-table td {
  text-align: left;
  padding: var(--space-2);
  border-top: 1px solid var(--border-hairline);
}

.admin-diff-table th {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  opacity: 0.7;
  border-top: none;
}

.admin-diff-table__old {
  color: var(--text-primary);
  opacity: 0.6;
  text-decoration: line-through;
}

.admin-diff-table__new {
  color: var(--signal);
}

/* ---- Item edit header ---- */

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

.admin-edit-header__id {
  color: var(--accent-secondary);
  font-size: 0.75rem;
  margin: 0 0 var(--space-1);
}

.admin-edit-header__badges {
  display: flex;
  gap: var(--space-2);
  padding-top: var(--space-1);
}

/* ---- Item Edit tabs (M10) ----
   Progressive enhancement: with JS disabled, every .admin-tab-panel
   stays visible (stacked), so the form is still fully usable — JS only
   adds .is-hidden to non-active panels/lang-groups on load. */

.admin-edit-tabs {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  border-bottom: 1px solid var(--border-hairline);
  margin-bottom: var(--space-5);
}

.admin-edit-tab {
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  font-family: var(--font-body);
  font-size: 0.9rem;
  color: rgb(59 42 33 / 60%);
  padding: var(--space-3) 0;
  cursor: pointer;
  transition: color var(--motion-duration) var(--motion-easing), border-color var(--motion-duration) var(--motion-easing);
}

.admin-edit-tab:hover {
  color: var(--text-primary);
}

.admin-edit-tab.is-active {
  color: var(--text-primary);
  border-bottom-color: var(--accent-primary);
}

.admin-save-indicator {
  margin-left: auto;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  opacity: 0.6;
}

.admin-save-indicator[data-state="saving"] {
  color: var(--accent-primary);
  opacity: 1;
}

.admin-save-indicator[data-state="error"] {
  color: var(--accent-secondary);
  opacity: 1;
}

.admin-tab-panel.is-hidden {
  display: none;
}

/* ---- Technical tab: progressive disclosure (M10) ---- */

.admin-more-fields-toggle {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  background: none;
  border: none;
  color: var(--accent-primary);
  font-family: var(--font-body);
  font-size: 0.85rem;
  padding: var(--space-2) 0;
  margin-bottom: var(--space-3);
  cursor: pointer;
}

.admin-more-fields-toggle__chevron {
  display: inline-block;
  transition: transform var(--motion-duration) var(--motion-easing);
}

.admin-more-fields-toggle.is-open .admin-more-fields-toggle__chevron {
  transform: rotate(90deg);
}

/* Visible by default (progressive enhancement) — matches ".admin-form
   fieldset"'s own display:grid, so there's nothing to override until
   JS decides to collapse it. admin_item_edit.js adds .is-collapsed on
   page load (confirming JS actually ran) and toggles it on click; a
   no-JS visitor simply always sees every field. #id selector so the
   collapsed state reliably outranks ".admin-form fieldset"'s
   class+element specificity. */
#more-fields-block.is-collapsed {
  display: none;
}

/* ---- Editorial tab: inline CA/ES/EN switch (M10) ---- */

.admin-lang-switch {
  display: inline-flex;
  border-radius: var(--radius-round);
  border: 1px solid var(--border-hairline-brass);
  overflow: hidden;
  margin-bottom: var(--space-4);
}

.admin-lang-switch__btn {
  background-color: var(--surface-page);
  border: none;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  padding: var(--space-2) var(--space-4);
  color: var(--text-primary);
  cursor: pointer;
  transition: background-color var(--motion-duration) var(--motion-easing), color var(--motion-duration) var(--motion-easing);
}

.admin-lang-switch__btn + .admin-lang-switch__btn {
  border-left: 1px solid var(--border-hairline-brass);
}

.admin-lang-switch__btn.is-active {
  background-color: var(--surface-dark);
  color: var(--text-on-dark);
}

.admin-lang-switch__pending {
  color: var(--accent-secondary);
  margin-left: 2px;
}

.admin-lang-switch__btn.is-active .admin-lang-switch__pending {
  color: var(--text-on-dark);
  opacity: 0.7;
}

.admin-editorial-lang.is-hidden {
  display: none;
}

/* ---- Forms ---- */

.admin-form fieldset {
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-panel);
  padding: var(--space-4);
  margin: 0 0 var(--space-4);
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--space-3) var(--space-4);
}

.admin-form fieldset:disabled {
  opacity: 0.65;
}

.admin-form legend {
  font-family: var(--font-display);
  color: var(--text-primary);
  padding: 0 var(--space-2);
  font-size: 1rem;
}

.admin-form label {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  font-size: 0.85rem;
  color: var(--text-primary);
}

.admin-form label:has(textarea) {
  grid-column: 1 / -1;
}

.admin-form__hint {
  font-weight: normal;
  opacity: 0.6;
  font-size: 0.75rem;
}

.admin-form__hint--full {
  grid-column: 1 / -1;
  margin: 0;
}

.admin-form input[type="text"],
.admin-form input[type="number"],
.admin-form input[type="date"],
.admin-form input[type="url"],
.admin-form input[type="email"],
.admin-form input[type="password"],
.admin-form select,
.admin-form textarea {
  font-family: var(--font-body);
  font-size: 0.9rem;
  padding: var(--space-2);
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-control);
  background-color: var(--surface-page);
  color: var(--text-body);
}

.admin-form textarea {
  resize: vertical;
  min-height: 4.5em;
}

.admin-form__checkbox {
  flex-direction: row;
  align-items: center;
  gap: var(--space-2);
}

.admin-form__actions {
  margin-top: var(--space-5);
}

/* ---- Photo gallery (M5: live upload/reorder/delete/primary) ---- */

.admin-photo-gallery__note {
  font-size: 0.8rem;
  opacity: 0.7;
}

.admin-photo-gallery__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

.admin-photo-card {
  position: relative;
  margin: 0;
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-panel);
  overflow: hidden;
  background-color: var(--surface-card);
}

.admin-photo-card--primary {
  border-color: var(--accent-primary);
}

.admin-photo-card img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.admin-photo-card__badge {
  position: absolute;
  top: var(--space-2);
  left: var(--space-2);
  font-family: var(--font-mono);
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 2px var(--space-2);
  border-radius: var(--radius-control);
  background-color: var(--accent-primary);
  color: var(--surface-dark);
}

.admin-photo-card__badge--warn {
  left: auto;
  right: var(--space-2);
  background-color: var(--accent-secondary);
  color: var(--text-on-dark);
}

.admin-photo-card__alt-form {
  display: flex;
  gap: 2px;
  padding: var(--space-1);
  border-top: 1px solid var(--border-hairline);
}

.admin-photo-card__alt-form input {
  flex: 1;
  min-width: 0;
  font-family: var(--font-body);
  font-size: 0.75rem;
  padding: var(--space-1);
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-control);
  background-color: var(--surface-page);
}

.admin-photo-card__alt-form button {
  font-size: 0.75rem;
  padding: var(--space-1) var(--space-2);
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-control);
  background: none;
  cursor: pointer;
}

.admin-photo-card__controls {
  display: flex;
  gap: 2px;
  padding: var(--space-1);
  background-color: var(--surface-card);
  border-top: 1px solid var(--border-hairline);
}

.admin-photo-card__controls form {
  flex: 1;
}

.admin-photo-card__controls button {
  width: 100%;
  padding: var(--space-1);
  font-size: 0.85rem;
  border: 1px solid transparent;
  border-radius: var(--radius-control);
  background: none;
  cursor: pointer;
  color: var(--text-primary);
}

.admin-photo-card__controls button:hover {
  border-color: var(--border-hairline);
  background-color: var(--surface-page);
}

.admin-photo-card__delete:hover {
  color: var(--accent-secondary);
  border-color: var(--accent-secondary);
}

.admin-photo-upload {
  display: flex;
  align-items: flex-end;
  gap: var(--space-3);
}

.admin-photo-upload label {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  font-size: 0.85rem;
}

.admin-photo-upload input[type="file"] {
  font-family: var(--font-body);
  font-size: 0.85rem;
}

/* ---- Danger zone (soft delete) ---- */

.admin-danger-zone {
  background-color: var(--surface-card);
  border: 1px solid var(--accent-secondary);
  border-radius: var(--radius-panel);
  padding: var(--space-4);
  margin-top: var(--space-6);
}

.admin-danger-zone p {
  font-size: 0.85rem;
  opacity: 0.85;
}

.admin-danger-zone__button {
  font-family: var(--font-body);
  font-size: 0.9rem;
  padding: var(--space-2) var(--space-4);
  border: 1px solid var(--accent-secondary);
  border-radius: var(--radius-control);
  background: none;
  color: var(--accent-secondary);
  cursor: pointer;
}

.admin-danger-zone__button:hover {
  background-color: var(--accent-secondary);
  color: var(--text-on-dark);
}

/* ---- Publish section ---- */

.admin-publish {
  background-color: var(--surface-card);
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-panel);
  padding: var(--space-4);
  margin-top: var(--space-6);
}

.admin-publish p {
  font-size: 0.85rem;
  opacity: 0.85;
}

/* ---- Login ---- */

.admin-body--login {
  display: flex;
  align-items: center;
  justify-content: center;
}

.login-panel {
  width: 100%;
  max-width: 360px;
  background-color: var(--surface-card);
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-panel);
  padding: var(--space-6);
}

.login-panel__wordmark {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  font-family: var(--font-display);
  font-size: 1.35rem;
  color: var(--text-primary);
  margin-bottom: var(--space-5);
}

.login-panel__wordmark span {
  color: var(--accent-primary);
}

.login-panel__mark {
  width: 28px;
  height: 28px;
  flex: none;
}

.login-panel__form {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.login-panel__form label {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  font-size: 0.85rem;
  color: var(--text-primary);
}

.login-panel__form input {
  font-family: var(--font-body);
  font-size: 0.95rem;
  padding: var(--space-3);
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-control);
  background-color: var(--surface-page);
}