/* Ops dashboard custom layer — utilities for things Tailwind can't easily express. */

body {
  background: #FAFAF8;
}

.screen { display: none; }
.screen[data-active] { display: block; animation: fadeIn 0.25s ease; }

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: none; }
}

.section-h {
  font-family: 'Manrope', sans-serif;
  font-weight: 800;
  letter-spacing: -0.025em;
  font-size: 18px;
  color: #1C0F07;
  margin-top: 8px;
  margin-bottom: 12px;
}

.metric {
  background: #ffffff;
  border: 1px solid #E7E5E4;
  border-radius: 12px;
  padding: 14px 16px;
  box-shadow: 0 1px 3px rgba(249,115,22,0.08);
}

.metric-label {
  font-family: 'Manrope', sans-serif;
  font-size: 11px;
  font-weight: 600;
  color: #78716C;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.metric-value {
  font-family: 'Manrope', sans-serif;
  font-weight: 800;
  letter-spacing: -0.025em;
  font-size: 28px;
  color: #1C0F07;
  font-variant-numeric: tabular-nums;
  margin-top: 2px;
}
.metric-sub {
  font-size: 12px;
  color: #78716C;
  margin-top: 2px;
}

#items-table-body td,
#agents-table-body td {
  padding: 8px 12px;
  border-top: 1px solid #F5F0E8;
}
#items-table-body tr:hover,
#agents-table-body tr:hover {
  background: #FFF7ED;
}

.code-cell {
  font-family: 'Fira Code', monospace;
  font-size: 12px;
  font-weight: 700;
  color: #4A3728;
}
.num { text-align: right; font-variant-numeric: tabular-nums; }
.dim { color: #78716C; }
.warn { color: #CA8A04; font-weight: 700; }
.bad  { color: #E11D48; font-weight: 700; }
.ok   { color: #15803D; font-weight: 700; }

#env-pill[data-env="production"] {
  background: rgba(21,128,61,0.12);
  color: #15803D;
}
#env-pill[data-env="development"] {
  background: rgba(202,138,4,0.18);
  color: #CA8A04;
}