/* Custom layer on top of pico.min.css. Pico supplies the reset, typography,
   form controls and button shape/spacing; everything here is either a brand
   color override on Pico's own CSS variables, or a component Pico has no
   opinion on (badges, the request log, the item list). */

:root {
  --pico-font-size: 87.5%; /* Pico scales all rem-based spacing off this - a compact 14px base instead of the 16px default suits this dense utility UI */
  --pico-primary: #3b82f6;
  --pico-primary-background: #3b82f6;
  --pico-primary-border: #3b82f6;
  --pico-primary-hover: #2563eb;
  --pico-primary-hover-background: #2563eb;
  --pico-primary-hover-border: #2563eb;
  --pico-primary-focus: rgba(59, 130, 246, 0.35);
  --pico-primary-inverse: #fff;
}

body > main.container { max-width: 760px; }

h1 span { color: var(--pico-primary); }

.intro { color: var(--pico-muted-color); margin-bottom: 1.5rem; }

footer.app-footer {
  margin-top: 2rem;
  padding-top: 1rem;
  border-top: 1px solid var(--pico-muted-border-color);
  font-size: 0.8125rem;
  color: var(--pico-muted-color);
  line-height: 1.6;
}

.row { display: flex; gap: 8px; margin-bottom: 1rem; align-items: flex-end; }
.field { display: flex; flex-direction: column; gap: 4px; flex: 1; }
.field label { margin-bottom: 0; }
.field input { margin-bottom: 0; }
.field small { color: var(--pico-muted-color); }

button.sm, button.pg {
  height: 30px;
  padding: 0 10px;
  font-size: 0.8125rem;
  --pico-form-element-spacing-vertical: 0;
}
button.pg { min-width: 34px; }
button.pg.active, button.sm.active {
  background: var(--pico-secondary-focus);
  font-weight: 600;
}

/* Semantic action colors Pico's core doesn't ship (secondary/outline aren't red or blue) */
button.primary { background: var(--pico-primary-background); border-color: var(--pico-primary-border); color: #fff; }
button.primary:hover:not(:disabled) { background: var(--pico-primary-hover-background); border-color: var(--pico-primary-hover-border); }
button.danger { background: #ef4444; border-color: #ef4444; color: #fff; }
button.danger:hover:not(:disabled) { background: #dc2626; border-color: #dc2626; }

.status { font-size: 0.8125rem; color: var(--pico-muted-color); margin-bottom: 1rem; min-height: 20px; }
.status.err { color: #dc2626; }
.status.ok  { color: #16a34a; }
.progress { font-size: 0.8125rem; color: var(--pico-primary); margin-bottom: 1rem; }

.toolbar { display: flex; gap: 6px; align-items: center; margin-bottom: 8px; flex-wrap: wrap; }
.toolbar .sel-count { font-size: 0.8125rem; color: var(--pico-muted-color); margin-right: auto; }

.page-size { font-size: 0.75rem; color: var(--pico-muted-color); display: flex; align-items: center; gap: 4px; margin-bottom: 0; }
.page-size select { height: 30px; padding: 0 8px; font-size: 0.8125rem; margin-bottom: 0; --pico-form-element-spacing-vertical: 0; }

.log-wrap { margin-bottom: 1rem; }
.log-wrap summary { font-size: 0.75rem; color: var(--pico-muted-color); }
#log {
  background: #111;
  color: #d4d4d4;
  font-family: "SF Mono", "Fira Code", monospace;
  font-size: 0.75rem;
  padding: 10px 12px;
  border-radius: var(--pico-border-radius);
  height: 160px;
  overflow-y: auto;
  white-space: pre-wrap;
  word-break: break-all;
}
#log .req  { color: #60a5fa; }
#log .res  { color: #4ade80; }
#log .err  { color: #f87171; }
#log .info { color: #a78bfa; }

.list { border: 1px solid var(--pico-muted-border-color); border-radius: var(--pico-border-radius); overflow: hidden; margin-bottom: 10px; }
.item { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-bottom: 1px solid var(--pico-muted-border-color); cursor: pointer; }
.item:last-child { border-bottom: none; }
.item:hover { background: var(--pico-code-background-color); }
.item input[type=checkbox] { width: 15px; height: 15px; cursor: pointer; flex-shrink: 0; margin-bottom: 0; }
.item-info { flex: 1; min-width: 0; }
.item-name { font-size: 0.875rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.item-meta { font-size: 0.75rem; color: var(--pico-muted-color); margin-top: 2px; }

.badge { display: inline-block; font-size: 0.6875rem; padding: 2px 8px; border-radius: 99px; font-weight: 500; flex-shrink: 0; }
.badge-paused          { background: #fef9c3; color: #a16207; }
.badge-campaign_paused { background: #fde68a; color: #92400e; }
.badge-not_started     { background: #f1f5f9; color: #64748b; }
.badge-archived         { background: #e5e7eb; color: #4b5563; }

.pager { display: flex; gap: 4px; align-items: center; margin-top: 4px; flex-wrap: wrap; }
.pager-info { font-size: 0.75rem; color: var(--pico-muted-color); margin-left: 6px; }