/* ==========================================================================
   Operations screens — a quieter variation of the storefront system
   ========================================================================== */

.page-admin {
  background: var(--cream-100);
}

/* Wider than the storefront container — this is a data view, not a page. */
.admin-shell {
  max-width: 1500px;
  padding-block: var(--space-7) var(--space-9);
}

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

.admin-head h1 {
  font-size: var(--text-3xl);
  color: var(--forest-800);
}

.admin-head p {
  font-size: var(--text-sm);
  color: var(--color-ink-muted);
  margin-top: var(--space-1);
}

/* --- Summary tiles -------------------------------------------------------- */

.admin-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 175px), 1fr));
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}

.admin-stat {
  padding: var(--space-5);
  background: var(--color-surface);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-xs);
}

.admin-stat__label {
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-ink-subtle);
}

.admin-stat__value {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--forest-800);
  margin-top: var(--space-2);
}

/* --- Filters -------------------------------------------------------------- */

.admin-filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: flex-end;
  padding: var(--space-4);
  background: var(--color-surface);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-5);
}

.admin-filters .field {
  flex: 1 1 190px;
}

/* --- Table ---------------------------------------------------------------- */

.table-wrap {
  overflow-x: auto;
  background: var(--color-surface);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-xs);
}

.data-table {
  width: 100%;
  min-width: 860px;
  border-collapse: collapse;
}

.data-table th,
.data-table td {
  padding: var(--space-4);
  text-align: left;
  font-size: var(--text-sm);
  border-bottom: 1px solid var(--color-border-soft);
  white-space: nowrap;
}

.data-table thead th {
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-ink-subtle);
  background: var(--cream-100);
  position: sticky;
  top: 0;
}

.data-table tbody tr {
  transition: background-color var(--duration-fast) var(--ease-out);
}

.data-table tbody tr:hover {
  background: var(--cream-50);
}

.data-table tbody tr:last-child td {
  border-bottom: none;
}

.data-table .mono {
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  font-size: var(--text-xs);
  letter-spacing: 0.03em;
  color: var(--forest-700);
  font-weight: 600;
}

.data-table .amount {
  font-weight: 600;
  color: var(--forest-800);
}

.data-table .wrap {
  white-space: normal;
  min-width: 220px;
}

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-9) var(--space-5);
  text-align: center;
  color: var(--color-ink-subtle);
}

.empty-state .icon {
  width: 42px;
  height: 42px;
  color: var(--cream-400);
}

/* --- Pagination ----------------------------------------------------------- */

.pagination {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  margin-top: var(--space-5);
  font-size: var(--text-sm);
  color: var(--color-ink-muted);
}

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

/* --- Detail --------------------------------------------------------------- */

.admin-detail {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  gap: var(--space-5);
  align-items: start;
}

.admin-panel {
  padding: var(--space-6);
  background: var(--color-surface);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-xs);
}

.admin-panel + .admin-panel {
  margin-top: var(--space-4);
}

.admin-panel h2 {
  font-size: var(--text-base);
  font-weight: 600;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-ink-subtle);
  margin-bottom: var(--space-4);
}

.definition-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr));
  gap: var(--space-4);
}

.definition-grid dt {
  font-size: var(--text-xs);
  letter-spacing: 0.02em;
  color: var(--color-ink-subtle);
  margin-bottom: 2px;
}

.definition-grid dd {
  margin: 0;
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-ink);
  word-break: break-word;
}

@media (max-width: 900px) {
  .admin-detail {
    grid-template-columns: 1fr;
  }
}

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

.admin-login {
  display: grid;
  place-items: center;
  min-height: calc(100dvh - var(--header-height) - 220px);
  padding-block: var(--space-9);
}

.admin-login__card {
  width: min(100%, 420px);
  padding: clamp(1.75rem, 1.2rem + 2vw, 2.5rem);
  background: var(--color-surface);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}

.admin-login__card h1 {
  font-size: var(--text-2xl);
  color: var(--forest-800);
  margin-bottom: var(--space-2);
}

.admin-login__card > p {
  font-size: var(--text-sm);
  color: var(--color-ink-muted);
  margin-bottom: var(--space-5);
}

.admin-login__card form {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}