/* retoor <retoor@molodetz.nl> */
.admin-layout { display: grid; grid-template-columns: 12rem minmax(0, 1fr); gap: var(--space-xl); }

.admin-nav { display: grid; gap: var(--space-xs); align-content: start; font-family: var(--font-sans); font-size: var(--text-sm); }
.admin-nav a { text-decoration: none; color: var(--muted); padding: var(--space-xs) 0; border-bottom: var(--border); }
.admin-nav a.active, .admin-nav a:hover { color: var(--ink); }

.admin-main { min-width: 0; }
.admin-main h1 { font-weight: 500; font-size: var(--text-xl); margin: 0 0 var(--space-lg); }

.stat-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr)); gap: var(--space-md); margin-bottom: var(--space-xl); }
.stat-card { border: var(--border); padding: var(--space-md); display: grid; gap: var(--space-xs); }
.stat-card .value { font-size: var(--text-xl); }
.stat-card .name { font-family: var(--font-sans); font-size: var(--text-xs); color: var(--muted); letter-spacing: 0.08em; text-transform: uppercase; }

.admin-table { width: 100%; border-collapse: collapse; font-family: var(--font-sans); font-size: var(--text-sm); }
.admin-table th { text-align: left; font-weight: 500; color: var(--muted); font-size: var(--text-xs); letter-spacing: 0.08em; text-transform: uppercase; border-bottom: var(--border-strong); padding: var(--space-sm); }
.admin-table td { border-bottom: var(--border); padding: var(--space-sm); vertical-align: top; overflow-wrap: anywhere; }
.table-wrap { overflow-x: auto; }

.status { font-family: var(--font-sans); font-size: var(--text-xs); letter-spacing: 0.08em; text-transform: uppercase; }
.status.running, .status.done, .status.published, .status.accepted { color: var(--success); }
.status.stalled, .status.failed, .status.declined { color: var(--danger); }
.status.stopped, .status.draft, .status.pending, .status.open { color: var(--warning); }

.log-tail { background: var(--bg-sunken); border: var(--border); padding: var(--space-md); font-family: var(--font-mono); font-size: var(--text-xs); max-height: 24rem; overflow: auto; white-space: pre-wrap; }

.tabs { display: flex; gap: var(--space-lg); border-bottom: var(--border); margin-bottom: var(--space-lg); font-family: var(--font-sans); font-size: var(--text-sm); }
.tabs button { background: none; border: 0; color: var(--muted); font: inherit; padding: var(--space-sm) 0; cursor: pointer; border-bottom: 1px solid transparent; }
.tabs button.active { color: var(--ink); border-bottom-color: var(--accent); }

.editor { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-lg); }
.editor textarea { min-height: 28rem; }
.editor .preview { border: var(--border); padding: var(--space-md) var(--space-lg); min-height: 28rem; overflow: auto; }

@media (max-width: 1024px) {
  .editor { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 768px) {
  .admin-layout { grid-template-columns: minmax(0, 1fr); }
  .admin-nav { grid-auto-flow: column; overflow-x: auto; }
}