/* Claude Critic Admin - complementary styles (plain CSS, no @apply) */

[x-cloak] { display: none !important; }

body {
  font-family: -apple-system, 'Segoe UI', Roboto, 'Inter', system-ui, sans-serif;
}

/* Stat cards */
.stat-card {
  background: #0f172a;
  border: 1px solid #1e293b;
  border-radius: 0.5rem;
  padding: 0.75rem;
}
.stat-label {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #64748b;
}
.stat-value {
  font-size: 1.75rem;
  font-weight: 600;
  margin-top: 0.25rem;
}

/* Panels */
.panel {
  background: #0f172a;
  border: 1px solid #1e293b;
  border-radius: 0.5rem;
  padding: 1rem;
}
.panel-title {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: #94a3b8;
  margin-bottom: 0.75rem;
  font-weight: 600;
}

/* Inputs */
.input {
  background: #1e293b;
  border: 1px solid #334155;
  border-radius: 0.375rem;
  padding: 0.5rem 0.75rem;
  font-size: 0.875rem;
  color: #f1f5f9;
  outline: none;
  transition: border-color 0.15s;
}
.input:focus {
  border-color: #6366f1;
  box-shadow: 0 0 0 1px #6366f1;
}

/* Buttons */
.btn {
  background: #4f46e5;
  color: white;
  font-size: 0.875rem;
  font-weight: 500;
  padding: 0.5rem 1rem;
  border-radius: 0.375rem;
  border: none;
  cursor: pointer;
  transition: background 0.15s;
}
.btn:hover { background: #6366f1; }

.btn-secondary {
  background: #334155;
  color: #f1f5f9;
  font-size: 0.875rem;
  font-weight: 500;
  padding: 0.5rem 1rem;
  border-radius: 0.375rem;
  border: none;
  cursor: pointer;
  transition: background 0.15s;
}
.btn-secondary:hover { background: #475569; }

.btn-xs {
  background: #1e293b;
  border: 1px solid #334155;
  color: #e2e8f0;
  font-size: 0.75rem;
  padding: 0.25rem 0.5rem;
  border-radius: 0.25rem;
  cursor: pointer;
  transition: background 0.15s;
}
.btn-xs:hover { background: #334155; }

.btn-xs-danger {
  background: rgba(127, 29, 29, 0.6);
  border: 1px solid #b91c1c;
  color: #fee2e2;
  font-size: 0.75rem;
  padding: 0.25rem 0.5rem;
  border-radius: 0.25rem;
  cursor: pointer;
  transition: background 0.15s;
}
.btn-xs-danger:hover { background: #991b1b; }

/* Status dots */
.status-dot {
  display: inline-block;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 9999px;
}
.status-completed, .status-success, .status-active { background-color: #4ade80; }
.status-running, .status-in_progress { background-color: #60a5fa; }
.status-queued, .status-pending { background-color: #facc15; }
.status-failed, .status-error { background-color: #f87171; }
.status-cancelled, .status-inactive { background-color: #94a3b8; }
.status-unknown { background-color: #64748b; }

/* Status pills */
.status-pill {
  display: inline-block;
  font-size: 0.7rem;
  padding: 0.15rem 0.55rem;
  border-radius: 9999px;
  border: 1px solid transparent;
}
.status-pill.status-completed, .status-pill.status-success {
  background: rgba(20, 83, 45, 0.5);
  color: #86efac;
  border-color: #166534;
}
.status-pill.status-running, .status-pill.status-in_progress {
  background: rgba(30, 58, 138, 0.5);
  color: #93c5fd;
  border-color: #1e40af;
}
.status-pill.status-queued, .status-pill.status-pending {
  background: rgba(113, 63, 18, 0.5);
  color: #fde68a;
  border-color: #854d0e;
}
.status-pill.status-failed, .status-pill.status-error {
  background: rgba(127, 29, 29, 0.5);
  color: #fca5a5;
  border-color: #991b1b;
}
.status-pill.status-cancelled {
  background: #1e293b;
  color: #94a3b8;
  border-color: #334155;
}

/* Log view */
.log-view {
  background: #020617;
  border: 1px solid #1e293b;
  border-radius: 0.375rem;
  padding: 0.75rem;
  font-size: 0.75rem;
  color: #cbd5e1;
  font-family: 'JetBrains Mono', 'SFMono-Regular', Menlo, Monaco, Consolas, monospace;
  overflow: auto;
  white-space: pre-wrap;
  max-height: 60vh;
}

/* Scrollbar */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
::-webkit-scrollbar-track { background: #0f172a; }
::-webkit-scrollbar-thumb {
  background: #334155;
  border-radius: 5px;
}
::-webkit-scrollbar-thumb:hover { background: #475569; }

table { border-collapse: collapse; }
table th, table td { vertical-align: top; }