/* ============================================================
   FS25 Portal — Admin shell
   Depends on: 01-tokens.css .. 11-home.css

   The console layout: a fixed sidebar of areas, sub-tabs per
   area, and the denser instrument styling the admin pages use.
   ============================================================ */

.admin-layout {
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr);
  gap: var(--s6);
  align-items: start;
}

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

/* ============================================================
   Sidebar
   ============================================================ */

.admin-sidebar {
  position: sticky;
  top: calc(var(--nav-height) + var(--s5));
}

.admin-nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--s2);
  background: var(--surface);
  border: var(--hairline) solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--edge-light);
}

.admin-nav-item {
  display: flex;
  align-items: center;
  gap: var(--s2);
  padding: var(--s2) var(--s3);
  border-radius: var(--r);
  border-left: var(--plate-edge) solid transparent;
  font-family: var(--font-display);
  font-size: var(--fs-md);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--track-caps);
  color: var(--text-dim);
  transition: background var(--t) var(--ease), color var(--t) var(--ease), border-color var(--t) var(--ease);
}

.admin-nav-item svg { opacity: 0.6; flex-shrink: 0; }
.admin-nav-item:hover { background: var(--surface-2); color: var(--text); }
.admin-nav-item:hover svg { opacity: 1; }

.admin-nav-item.active {
  background: var(--amber-soft);
  border-left-color: var(--amber);
  color: var(--amber);
}
.admin-nav-item.active svg { opacity: 1; }

/* Superadmin entries carry a steel edge so the boundary is visible at a
   glance rather than only in the group heading. */
.admin-nav-item.restricted { border-left-color: var(--steel-line); }
.admin-nav-item.restricted.active { border-left-color: var(--amber); }

.admin-nav-sep {
  margin-top: var(--s3);
  padding: var(--s2) var(--s3) var(--s1);
  border-top: var(--hairline) solid var(--border);
}

/* ============================================================
   Sub-tabs
   ============================================================ */

.admin-subtabs {
  display: flex;
  gap: var(--s1);
  flex-wrap: wrap;
  margin-bottom: var(--s5);
  border-bottom: var(--hairline) solid var(--border);
}

.admin-subtabs a {
  position: relative;
  padding: var(--s2) var(--s3);
  font-family: var(--font-display);
  font-size: var(--fs-md);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--track-caps);
  color: var(--text-dim);
  transition: color var(--t) var(--ease);
}

.admin-subtabs a:hover { color: var(--text); }
.admin-subtabs a.active { color: var(--amber); }

.admin-subtabs a.active::after {
  content: '';
  position: absolute;
  left: var(--s2); right: var(--s2);
  bottom: -1px;
  height: 2px;
  background: var(--amber);
}

/* ============================================================
   Shared admin pieces
   ============================================================ */

.section-gap { margin-top: var(--s6); }

.bulk-panel { margin-bottom: var(--s4); }

.bulk-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s4);
  margin-top: var(--s2);
}

.bulk-action {
  display: flex;
  align-items: center;
  gap: var(--s2);
}

.bulk-action select,
.bulk-action input { width: auto; min-width: 120px; }

.row-banned { opacity: 0.6; }
.row-banned td:first-child { border-left: var(--plate-edge) solid var(--red); }
.row-muted { opacity: 0.5; }

.comment-excerpt {
  max-width: 380px;
  font-size: var(--fs-sm);
  color: var(--text-dim);
}

.create-member { margin-top: var(--s5); }

/* ---- Categories ---- */

.category-list {
  display: flex;
  flex-direction: column;
  gap: var(--s3);
  margin-top: var(--s4);
}

.category-row { position: relative; }
.category-row.inactive { opacity: 0.6; }

.category-head {
  display: flex;
  align-items: center;
  gap: var(--s2);
  margin-bottom: var(--s3);
  padding-bottom: var(--s2);
  border-bottom: var(--hairline) solid var(--border);
}

.category-icon { font-size: var(--fs-md); }

.category-actions { margin-top: var(--s3); }

.category-delete {
  position: absolute;
  top: var(--s4);
  right: var(--s4);
}

/* ============================================================
   Insights
   ============================================================ */

.chart-card { margin-bottom: var(--s5); }

.activity-chart {
  width: 100%;
  height: auto;
  overflow: visible;
}

.chart-axis { stroke: var(--border-strong); stroke-width: 1; }
.chart-grid { stroke: var(--border-faint); stroke-width: 1; }

.chart-line {
  fill: none;
  stroke-width: 2;
  stroke-linejoin: round;
  stroke-linecap: round;
  /* Draw themselves in on load. */
  stroke-dasharray: 2000;
  stroke-dashoffset: 2000;
  animation: fs-chart-draw 1.4s var(--ease) forwards;
}

.chart-posts    { stroke: var(--amber); }
.chart-comments { stroke: var(--steel); animation-delay: 0.15s; }
.chart-signups  { stroke: var(--green); animation-delay: 0.3s; }

@keyframes fs-chart-draw { to { stroke-dashoffset: 0; } }

@media (prefers-reduced-motion: reduce) {
  .chart-line { animation: none; stroke-dashoffset: 0; }
}

.chart-legend {
  display: flex;
  align-items: center;
  gap: var(--s4);
  flex-wrap: wrap;
  margin-top: var(--s3);
  padding-top: var(--s3);
  border-top: var(--hairline) solid var(--border);
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  text-transform: uppercase;
  letter-spacing: var(--track-plate);
  color: var(--text-faint);
}

.legend-item { display: inline-flex; align-items: center; gap: var(--s2); }

.legend-swatch {
  width: 14px;
  height: 2px;
  border-radius: var(--r-pill);
}

.legend-item.posts    .legend-swatch { background: var(--amber); }
.legend-item.comments .legend-swatch { background: var(--steel); }
.legend-item.signups  .legend-swatch { background: var(--green); }
.legend-range { margin-left: auto; }

.insight-columns {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: var(--s4);
}

.rank-number {
  width: 22px;
  flex-shrink: 0;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-variant-numeric: tabular-nums;
  color: var(--text-faint);
  text-align: right;
}

/* ============================================================
   System
   ============================================================ */

.export-buttons { display: flex; flex-wrap: wrap; gap: var(--s2); }

.prune-form .form-row { max-width: 460px; }

.audit-filters .form-actions-row { margin-top: var(--s3); padding-top: var(--s3); }

.audit-table td { vertical-align: top; }

.audit-action {
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  letter-spacing: var(--track-caps);
  color: var(--amber);
  white-space: nowrap;
}

/* ============================================================
   Database browser
   ============================================================ */

.db-layout {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: var(--s4);
  align-items: start;
}

.db-tables {
  padding: var(--s3);
  background: var(--surface);
  border: var(--hairline) solid var(--border);
  border-radius: var(--r-lg);
}

.db-table-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 1px;
  margin-top: var(--s2);
  max-height: 60vh;
  overflow-y: auto;
}

.db-table-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s2);
  padding: var(--s1) var(--s2);
  border-radius: var(--r-sm);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--text-dim);
  transition: background var(--t) var(--ease), color var(--t) var(--ease);
}

.db-table-link:hover { background: var(--surface-2); color: var(--text); }
.db-table-link.active { background: var(--amber-soft); color: var(--amber); }

.db-table-count {
  font-variant-numeric: tabular-nums;
  color: var(--text-faint);
}
.db-table-link.active .db-table-count { color: var(--amber); }

.db-rows { min-width: 0; }

.db-toolbar {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s3);
  margin-bottom: var(--s3);
}

.db-toolbar h2 {
  font-family: var(--font-mono);
  font-size: var(--fs-md);
  text-transform: none;
  letter-spacing: 0;
  color: var(--amber);
}

.db-meta {
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  color: var(--text-faint);
}

.db-table th,
.db-table td { white-space: nowrap; }

.db-cell { max-width: 220px; }

.db-value {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
}

.db-cell.masked .db-value { color: var(--text-faint); letter-spacing: 2px; }

.db-col-flag {
  margin-left: var(--s1);
  padding: 0 var(--s1);
  font-family: var(--font-mono);
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: var(--track-caps);
  color: var(--amber);
  background: var(--amber-soft);
  border-radius: var(--r-sm);
}

.db-col-flag.hidden-flag { color: var(--text-faint); background: var(--surface-3); }

.db-edit-form textarea {
  min-height: 0;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
}

.db-edit-form input[disabled],
.db-edit-form textarea[disabled] { opacity: 0.5; cursor: not-allowed; }

.db-delete-form {
  padding: var(--s3) var(--s5) var(--s4);
  border-top: var(--hairline) solid var(--border);
}

/* ============================================================
   Responsive
   ============================================================ */

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

  .admin-sidebar { position: static; }

  .admin-nav {
    flex-direction: row;
    flex-wrap: wrap;
    gap: var(--s1);
  }

  .admin-nav-item { border-left: 0; border-bottom: var(--plate-edge) solid transparent; }
  .admin-nav-item.active { border-left: 0; border-bottom-color: var(--amber); }
  .admin-nav-sep { width: 100%; margin-top: var(--s2); }

  .db-layout { grid-template-columns: 1fr; }
  .db-table-list { flex-direction: row; flex-wrap: wrap; max-height: none; }
}

@media (max-width: 600px) {
  .bulk-row { flex-direction: column; align-items: stretch; }
  .bulk-action { flex-wrap: wrap; }
  .comment-excerpt { max-width: 200px; }
  .category-delete { position: static; margin-top: var(--s2); }
}