/* ══════════════════════════════════════════
   ADMIN CONSOLE (admin.html)

   Layered on top of the shared account-page shell in css/embenco-clone.css:
   this file only adds what the admin surface needs. Kept as a separate
   stylesheet (and a separate page) so the consumer bundle does not carry the
   admin surface at all — UX-002.
══════════════════════════════════════════ */

.admin-shell {
  width: min(1080px, calc(100vw - 32px));
}

.admin-shell .account-card {
  margin-bottom: 16px;
}

.admin-page.admin-busy {
  cursor: progress;
}

.admin-page.admin-busy button {
  pointer-events: none;
  opacity: 0.6;
}

.admin-gate h2 {
  margin-bottom: 6px;
}

.admin-help {
  margin-top: 10px;
  font-size: 13px;
}

/* ---- Status header ---- */

.admin-status-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.admin-status-card h2 {
  margin-bottom: 4px;
}

/* ---- Badges ---- */

.admin-badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 9px;
  border-radius: 999px;
  border: 1px solid var(--clone-secondary-border);
  background: var(--clone-secondary);
  color: var(--clone-muted-text);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
}

.admin-badge.is-on {
  color: #0b1b10;
  background: var(--clone-ready);
  border-color: var(--clone-ready);
}

.admin-badge.is-off {
  color: var(--clone-muted-text);
}

.admin-badge.is-owner {
  color: #2a1206;
  background: var(--clone-warn);
  border-color: var(--clone-warn);
}

.admin-badge.is-admin {
  color: #1c0b18;
  background: var(--clone-primary);
  border-color: var(--clone-primary);
}

.admin-badge.is-access {
  text-transform: none;
  letter-spacing: 0.02em;
  color: var(--clone-text);
}

/* ---- Fields ---- */

.admin-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1 1 260px;
  min-width: 0;
}

.admin-field > span {
  color: var(--clone-muted-text);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.admin-field input,
.admin-field select,
.admin-field textarea,
.admin-source-field select {
  width: 100%;
  min-height: 38px;
  padding: 8px 10px;
  color: var(--clone-text);
  background: var(--clone-input-bg);
  border: 1px solid var(--clone-input-border);
  border-radius: var(--r-sm);
  font-size: 13px;
}

.admin-field textarea {
  resize: vertical;
  min-height: 112px;
  font-family: inherit;
  line-height: 1.5;
}

.admin-field small {
  float: right;
  color: var(--clone-muted-text);
  font: inherit;
  font-weight: 500;
}

.admin-source-field {
  max-width: 320px;
  margin: 14px 0;
}

.admin-search-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 10px;
  margin: 14px 0 10px;
}

.admin-inline-status {
  margin: 10px 0 0;
  color: var(--clone-muted-text);
  font-size: 13px;
  min-height: 18px;
}

.admin-inline-status.ok {
  color: var(--clone-ready);
}

.admin-inline-status.warn {
  color: var(--clone-warn);
}

.admin-muted-inline {
  color: var(--clone-muted-text);
  font-size: 12px;
}

/* ---- Announcements ---- */

.admin-announcement-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(300px, 0.85fr);
  gap: 24px;
  margin-top: 20px;
}

.admin-announcement-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.admin-announcement-fields {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.admin-announcement-fields:last-of-type {
  grid-template-columns: minmax(160px, 0.45fr) minmax(0, 1fr);
}

.admin-announcement-preview {
  align-self: start;
  padding: 16px;
  border: 1px solid var(--clone-card-border);
  border-radius: var(--r-md);
  background: var(--clone-card-bg);
}

.admin-preview-item {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  gap: 12px;
  margin-top: 12px;
  padding: 14px;
  border: 1px solid var(--clone-secondary-border);
  border-left: 3px solid var(--clone-accent-2);
  border-radius: var(--r-sm);
  background: var(--clone-input-bg);
}

.admin-preview-item.is-success {
  border-left-color: var(--clone-ready);
}

.admin-preview-item.is-warning {
  border-left-color: var(--clone-warn);
}

.admin-preview-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border: 1px solid currentColor;
  border-radius: 50%;
  color: var(--clone-accent-2);
  font-weight: 800;
}

.admin-preview-item.is-success .admin-preview-icon {
  color: var(--clone-ready);
}

.admin-preview-item.is-warning .admin-preview-icon {
  color: var(--clone-warn);
}

.admin-preview-meta {
  margin: 0 0 5px;
  color: var(--clone-muted-text);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.admin-preview-item h3 {
  margin: 0 0 6px;
  color: var(--clone-text);
  font-size: 15px;
}

.admin-preview-item p:not(.admin-preview-meta) {
  margin: 0;
  color: var(--clone-muted-text);
  font-size: 13px;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.admin-preview-action {
  display: inline-block;
  margin-top: 10px;
  color: var(--clone-accent-2);
  font-size: 12px;
  font-weight: 700;
}

.admin-preview-action[hidden] {
  display: none;
}

.admin-announcement-history-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 26px;
}

.admin-announcement-history-heading h3 {
  margin: 0;
}

.admin-announcement-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 12px;
}

.admin-announcement-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  padding: 12px;
  border: 1px solid var(--clone-card-border);
  border-radius: var(--r-sm);
  background: var(--clone-card-bg);
}

.admin-announcement-row h4,
.admin-announcement-row p {
  margin: 0;
}

.admin-announcement-row h4 {
  margin-bottom: 4px;
  font-size: 14px;
}

.admin-announcement-row p {
  color: var(--clone-muted-text);
  font-size: 12px;
}

/* ---- User list ---- */

.admin-user-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 10px;
  max-height: 480px;
  overflow-y: auto;
}

.admin-user-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  background: var(--clone-card-bg);
  border: 1px solid var(--clone-card-border);
  border-radius: var(--r-md);
}

.admin-user-row.is-selected {
  border-color: var(--clone-primary);
  box-shadow: 0 0 0 1px var(--clone-primary-dim);
}

.admin-user-main {
  min-width: 0;
}

.admin-user-name {
  margin: 0 0 2px;
  font-size: 14px;
  font-weight: 700;
  overflow-wrap: anywhere;
}

.admin-user-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin: 0 0 6px;
  color: var(--clone-muted-text);
  font-size: 12px;
  overflow-wrap: anywhere;
}

.admin-uid {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px;
}

.admin-dot {
  opacity: 0.5;
}

.admin-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

/* ---- Grant editor ---- */

.admin-mode-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 14px;
}

.admin-radio {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 12px;
  background: var(--clone-secondary);
  border: 1px solid var(--clone-secondary-border);
  border-radius: var(--r-sm);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

.admin-radio input {
  accent-color: var(--clone-primary);
}

.admin-location-picker[hidden] {
  display: none;
}

.admin-picker-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.admin-location-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 6px;
  max-height: 320px;
  padding: 8px;
  overflow-y: auto;
  background: var(--clone-card-bg);
  border: 1px solid var(--clone-card-border);
  border-radius: var(--r-md);
}

.admin-location-item {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 7px 9px;
  border-radius: var(--r-sm);
  font-size: 13px;
  cursor: pointer;
}

.admin-location-item:hover {
  background: var(--clone-secondary);
}

.admin-location-item input {
  accent-color: var(--clone-primary);
}

.admin-location-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.admin-location-name {
  overflow-wrap: anywhere;
}

.admin-location-category {
  color: var(--clone-muted-text);
  font-size: 11px;
}

/* ---- Audit log ---- */

.admin-audit-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 12px;
  max-height: 420px;
  overflow-y: auto;
}

.admin-audit-row {
  display: grid;
  grid-template-columns: minmax(140px, auto) minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 10px;
  padding: 9px 11px;
  background: var(--clone-card-bg);
  border: 1px solid var(--clone-card-border);
  border-radius: var(--r-sm);
  font-size: 12px;
}

.admin-audit-action {
  font-weight: 700;
  color: var(--clone-text);
}

.admin-audit-who {
  color: var(--clone-muted-text);
  overflow-wrap: anywhere;
}

.admin-audit-detail {
  color: var(--clone-accent-2);
  white-space: nowrap;
}

.admin-audit-time {
  color: var(--clone-muted-text);
  white-space: nowrap;
}

@media (max-width: 720px) {
  .admin-announcement-layout,
  .admin-announcement-fields,
  .admin-announcement-fields:last-of-type {
    grid-template-columns: minmax(0, 1fr);
  }

  .admin-announcement-row {
    grid-template-columns: minmax(0, 1fr);
  }

  .admin-user-row {
    flex-direction: column;
    align-items: flex-start;
  }

  .admin-audit-row {
    grid-template-columns: minmax(0, 1fr);
  }

  .admin-audit-detail,
  .admin-audit-time {
    white-space: normal;
  }
}

/* ── Location catalog (CAT-001) ──────────────────────────────────────────────
   Release and recovery surface for the catalog authored on the map. */

.admin-catalog-stats {
  margin-bottom: 8px;
}

.admin-catalog-pending {
  display: grid;
  gap: 6px;
  margin: 10px 0 0;
  padding: 10px;
  background: var(--dc-surface-soft);
  border: 1px solid var(--dc-border);
  border-radius: var(--dc-radius-md);
}

.admin-catalog-pending-row {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
}

.admin-catalog-op {
  flex: 0 0 auto;
  min-width: 54px;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid var(--dc-border-strong);
  font-size: 11px;
  font-weight: 700;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.admin-catalog-op.is-delete {
  color: #ff9da8;
  border-color: rgba(255, 77, 106, 0.42);
  background: rgba(255, 77, 106, 0.12);
}

.admin-catalog-op.is-upsert {
  color: var(--dc-blue-bright);
  border-color: rgba(65, 105, 225, 0.4);
  background: var(--dc-blue-soft);
}

.admin-catalog-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* The history keeps up to 50 snapshots. It scrolls inside its own panel so a
   busy catalog never stretches the admin page to several screens. */
.admin-catalog-history {
  display: grid;
  gap: 6px;
  align-content: start;
  margin-top: 10px;
  max-height: 320px;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 4px;
  background: var(--dc-surface);
  border: 1px solid var(--dc-border);
  border-radius: var(--dc-radius-md);
  scrollbar-width: thin;
}

.admin-catalog-history:empty {
  display: none;
}

.admin-catalog-snapshot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 7px 10px;
  background: var(--dc-surface-soft);
  border: 1px solid var(--dc-border);
  border-radius: var(--dc-radius-md);
}

.admin-catalog-snapshot-meta {
  display: grid;
  gap: 1px;
  min-width: 0;
  font-size: 12px;
  color: var(--dc-muted);
}

.admin-catalog-snapshot-title {
  display: flex;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
}

.admin-catalog-snapshot-detail {
  display: flex;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.admin-catalog-snapshot-detail > span {
  overflow: hidden;
  text-overflow: ellipsis;
}

.admin-catalog-snapshot-meta strong {
  color: var(--dc-text);
  font-size: 13px;
  white-space: nowrap;
}

.admin-catalog-snapshot-reason {
  color: var(--dc-muted-strong);
  flex: 0 1 auto;
}

.admin-catalog-snapshot-time {
  flex: 0 0 auto;
}

.admin-catalog-snapshot button {
  flex: 0 0 auto;
}

@media (max-width: 720px) {
  .admin-catalog-history {
    max-height: 260px;
  }

  .admin-catalog-snapshot {
    flex-direction: column;
    align-items: stretch;
  }

  .admin-catalog-snapshot-detail {
    white-space: normal;
  }
}