/*
 * Admin skin: a dark sidebar borrowed from the site's fight-poster palette on
 * top of Administrate's light chrome, plus the styles for the pieces
 * Administrate has no opinion about (the translations widget, the overview).
 */

:root {
  --admin-ink: #0c0b10;
  --admin-gold: #ffc933;
  --admin-red: #ff3d5a;
  --admin-blue: #2e9bff;
  --admin-line: #e5e7eb;
  --admin-muted: #6b7280;
}

/* --- Shell ---
 * Administrate centres the whole admin in a 100rem box with a ring of padding,
 * which leaves the dark sidebar floating as a square-cornered slab on the grey
 * page. A dark sidebar only reads as a sidebar when it is full-bleed, so drop
 * the centring and the padding and let the two columns meet the window edges.
 */

.app-container {
  max-width: none;
  padding: 0;
}

.main-content {
  min-width: 0; /* Administrate's 800px floor scrolls the whole page on narrow screens. */
  border-radius: 0;
  box-shadow: none;
}

/* The table is the one thing that can outgrow the column. Keep it at its natural
 * width and scroll it inside the body, rather than squeezing every cell into a
 * three-line wrap or scrolling the whole page sideways. */
.main-content__body--flush { overflow-x: auto; }
.main-content__body--flush > table { min-width: 800px; }

/* --- Sidebar --- */

.navigation {
  flex: 0 0 220px !important;
  align-self: flex-start;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
  padding: 20px 12px !important;
  background: var(--admin-ink);
}

.navigation__link {
  display: block;
  margin: 0 !important;
  padding: 7px 12px !important;
  border-radius: 6px;
  color: #cbd0da !important;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3 !important;
  text-decoration: none !important;
  transition: background-color 120ms, color 120ms;
}

.navigation__link:hover { background: rgba(255, 255, 255, 0.07); color: #fff !important; }

.navigation__link--active,
.navigation__link--active:hover {
  background: var(--admin-gold);
  color: var(--admin-ink) !important;
}

.navigation__sublink { padding-left: 26px !important; font-size: 13px; font-weight: 500; }

.navigation .button--nav {
  margin-bottom: 16px;
  border-color: rgba(255, 255, 255, 0.25);
  color: #fff;
  font-size: 13px;
}

.nav-section {
  padding: 16px 12px 4px;
  color: #6b7280;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.nav-badge {
  float: right;
  min-width: 18px;
  padding: 0 6px;
  border-radius: 9px;
  background: var(--admin-red);
  color: #fff !important;
  font-size: 11px;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
}

.navigation__link--active .nav-badge { background: var(--admin-ink); color: #fff !important; }

/* --- Translations field --- */

.translations-form {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.translations-form__locale {
  margin: 0;
  padding: 10px 12px 12px;
  border: 1px solid var(--admin-line);
  border-radius: 8px;
}

.translations-form__locale legend {
  padding: 0 4px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
}

.translations-form__locale label {
  display: block;
  margin: 6px 0 2px;
  color: var(--admin-muted);
  font-size: 12px;
}

.translations-form__locale input[type="text"],
.translations-form__locale textarea {
  box-sizing: border-box;
  width: 100%;
  padding: 6px 8px;
  border: 1px solid var(--admin-line);
  border-radius: 6px;
  font: inherit;
  font-size: 14px;
}

.translations-count { font-variant-numeric: tabular-nums; font-weight: 700; }
.translations-missing { color: var(--admin-red); font-size: 12px; }

.translations-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.translations-table th,
.translations-table td { padding: 6px 8px; border-bottom: 1px solid #f3f4f6; text-align: left; vertical-align: top; }
.translations-table thead th { color: var(--admin-muted); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; }
.translations-table__row--incomplete th { color: var(--admin-red); }

/* --- Overview --- */

.kpi-grid {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  margin-bottom: 28px;
}

.kpi {
  padding: 16px;
  border: 1px solid var(--admin-line);
  border-radius: 8px;
  background: #fff;
}

.kpi__label { color: var(--admin-muted); font-size: 12px; letter-spacing: 0.05em; text-transform: uppercase; }
.kpi__value { margin-top: 4px; color: var(--admin-ink); font-size: 28px; font-weight: 600; font-variant-numeric: tabular-nums; }

.panel {
  margin-bottom: 24px;
  padding: 16px;
  border: 1px solid var(--admin-line);
  border-radius: 8px;
  background: #fff;
}

.panel h2 { margin: 0 0 4px; font-size: 16px; }
.panel p.panel__hint { margin: 0 0 12px; color: var(--admin-muted); font-size: 13px; }
.panel table { width: 100%; border-collapse: collapse; font-size: 14px; }
.panel th { color: var(--admin-muted); font-size: 11px; letter-spacing: 0.06em; text-align: left; text-transform: uppercase; }
.panel th, .panel td { padding: 6px 4px; border-bottom: 1px solid #f3f4f6; }
.panel .num { text-align: right; font-variant-numeric: tabular-nums; }
.panel .empty { padding: 8px 0; color: #9ca3af; font-size: 14px; }

.panels { display: grid; gap: 24px; grid-template-columns: 1fr 1fr; }
@media (max-width: 900px) { .panels { grid-template-columns: 1fr; } }

.pill { padding: 2px 8px; border-radius: 999px; background: #f3f4f6; font-size: 12px; font-weight: 600; }