/* /admin and /ads management pages. Builds on tokens in application.css and
   .page/.card/.table/.badge/.dl in components.css. */

/* ---------- Section nav (horizontal pill tabs) ---------- */
.admin-nav {
  display: flex; gap: var(--space-2);
  margin: 0 calc(var(--space-4) * -1) var(--space-5); padding: 0 var(--space-4) var(--space-1);
  overflow-x: auto; scrollbar-width: none;
}
.admin-nav::-webkit-scrollbar { display: none; }
.admin-nav__link {
  flex: none; padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-pill); background: var(--color-surface);
  font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--color-text-muted);
}
.admin-nav__link[aria-current="page"] { background: var(--color-text); color: #fff; }

/* ---------- Dashboard stats ---------- */
.stat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--space-3); }
.stat { display: flex; flex-direction: column; gap: var(--space-1); transition: background 0.15s; }
a.stat:hover { background: var(--color-row); }
.stat__label { font-size: var(--text-sm); color: var(--color-text-muted); }
.stat__count { font-size: var(--text-2xl); font-weight: var(--weight-bold); line-height: var(--leading-tight); }
.stat__detail { font-size: var(--text-xs); color: var(--color-text-muted); }

/* ---------- Sections, filters, tables ---------- */
.section { margin-top: var(--space-6); }
.section__header { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-3); }
.section__title { font-size: var(--text-lg); font-weight: var(--weight-bold); }

.filters { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-4); }
.filters__input {
  flex: 1 1 200px; min-height: 44px; padding: 0 var(--space-4);
  border: 1.5px solid var(--color-border); border-radius: var(--radius-pill);
  background: var(--color-bg); font: inherit; font-size: var(--text-sm);
}
.filters__input:focus { outline: 3px solid color-mix(in srgb, var(--color-primary) 35%, transparent); border-color: var(--color-text); }
select.filters__input { flex: 0 1 180px; }
.filters .button { min-height: 44px; padding: 0 var(--space-4); font-size: var(--text-sm); }

.table a:not(.button) { color: var(--color-primary); }
.table td.num, .table th.num { text-align: right; font-variant-numeric: tabular-nums; }
.table .muted { font-size: var(--text-xs); }
.table tr:last-child td { border-bottom: 0; }
.empty { padding: var(--space-5); text-align: center; color: var(--color-text-muted); }

.dl a { color: var(--color-primary); overflow-wrap: anywhere; }
.prose { white-space: pre-line; }

.actions { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-5); }
.button--sm { min-height: 36px; padding: var(--space-2) var(--space-4); font-size: var(--text-sm); }

/* ---------- Pagination ---------- */
.pagination { display: flex; align-items: center; justify-content: center; gap: var(--space-3); margin-top: var(--space-5); }
.pagination .button[aria-disabled="true"] { opacity: 0.4; }
.pagination__page { font-size: var(--text-sm); color: var(--color-text-muted); }

/* ---------- Ad editor (map + sheet) ---------- */
.map--picker .map__canvas { cursor: crosshair; }
.location-field {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-3) var(--space-4); margin-bottom: var(--space-3);
  border-radius: var(--radius-md); background: var(--color-row);
}
.location-field__text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.location-field__title { font-size: var(--text-sm); color: var(--color-text-muted); }
.location-field__value { font-variant-numeric: tabular-nums; }
.location-field--error { outline: 2px solid var(--color-danger); }
.location-field__error { color: var(--color-danger); font-size: var(--text-sm); }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }
.field-row .field + .field { margin-top: 0; }
.field-row + .field, .field + .field-row, .field-row + .field-row { margin-top: var(--space-3); }
.field-row .field__input { padding: var(--space-3); font-size: var(--text-md); }
select.field__input { appearance: none; background-image: none; }
.form-actions { display: flex; flex-direction: column; gap: var(--space-2); margin-top: var(--space-5); }

.ad-meta { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--space-2); margin-bottom: var(--space-4); }
@media (max-width: 480px) { .field-row { grid-template-columns: 1fr; } }