/* Submission Operations console — builds on /shared/tokens.css. */

.ops { padding-top: 2rem; padding-bottom: 3rem; max-width: var(--cbm-container); }
.ops__header h1 { color: var(--cbm-navy); font-family: var(--cbm-font-serif); margin-bottom: 0.25rem; }
.ops__sub { color: var(--cbm-text); margin-top: 0; }

.ops__login { max-width: 420px; margin: 2rem auto; background: var(--cbm-surface);
  padding: 2rem; border-radius: var(--cbm-radius); border: 1px solid var(--cbm-border); }
.ops__login h2 { color: var(--cbm-navy); margin-top: 0; }

.ops__toolbar { display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  flex-wrap: wrap; margin: 1rem 0 1rem; padding-bottom: 1rem; border-bottom: 1px solid var(--cbm-border); }
.ops__who { color: var(--cbm-slate-700); }
.ops__actions { display: flex; gap: 0.5rem; }

.ops__metrics { color: var(--cbm-slate-700); font-size: var(--cbm-text-sm); margin: 0 0 0.6rem; }
.ops__metrics.is-alert { color: var(--cbm-danger); font-weight: 600; }
.ops__counts { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 0.85rem; }
.count-chip { padding: 0.2rem 0.6rem; border-radius: 999px; font-size: var(--cbm-text-sm);
  background: var(--cbm-surface); border: 1px solid var(--cbm-border); color: var(--cbm-slate-700); }

.ops__filters { display: flex; gap: 0.6rem; margin-bottom: 1rem; flex-wrap: wrap; }
.ops__filters select { padding: 0.5rem; border: 1px solid var(--cbm-border);
  border-radius: var(--cbm-radius); font-family: var(--cbm-font-body); }

.ops__notice { padding: 0.75rem 1rem; border-radius: var(--cbm-radius); margin: 0 0 1rem; }
.ops__notice.is-success { background: #eafaef; color: #2f7a3f; border: 1px solid var(--cbm-success); }
.ops__notice.is-error { background: #fdeaea; color: #a23b38; border: 1px solid var(--cbm-danger); }
.form-error { color: var(--cbm-danger); margin: 0.5rem 0; }

.ops__table { width: 100%; border-collapse: collapse; background: var(--cbm-white); }
.ops__table th, .ops__table td { text-align: left; padding: 0.55rem 0.7rem;
  border-bottom: 1px solid var(--cbm-border); vertical-align: top; font-size: var(--cbm-text-sm); }
.ops__table thead th { color: var(--cbm-navy); background: var(--cbm-surface); font-weight: var(--cbm-fw-heading); }
.ops__table th.num, .ops__table td.num { text-align: right; }
.ops__table td.err { color: var(--cbm-text); max-width: 320px; word-break: break-word; }
.ops__empty, .ops__loading { color: var(--cbm-text); padding: 1.25rem 0; }

.ref-link { background: none; border: 0; padding: 0; font: inherit; font-weight: 600;
  color: var(--cbm-blue); cursor: pointer; }
.ref-link:hover { text-decoration: underline; }
.redrive-btn { padding: 0.3rem 0.7rem; font-size: 12px; }

/* status colours, shared by badges and count chips */
.status-badge { display: inline-block; padding: 0.1rem 0.55rem; border-radius: 999px;
  font-size: 12px; font-weight: 600; border: 1px solid var(--cbm-border); text-transform: capitalize; }
.status-completed { background: #eafaef; color: #2f7a3f; border-color: var(--cbm-success); }
.status-needs_attention { background: #fdeaea; color: #a23b38; border-color: var(--cbm-danger); }
.status-retry, .status-held_honeypot { background: #fff6e6; color: #8a5a00; border-color: var(--cbm-warning); }
.status-pending, .status-processing { background: var(--cbm-surface); color: var(--cbm-slate-700); }

/* detail modal */
.modal { position: fixed; inset: 0; z-index: 100; align-items: center; justify-content: center; padding: 1rem; }
.modal:not([hidden]) { display: flex; }
.modal__backdrop { position: absolute; inset: 0; background: rgba(23, 59, 96, 0.55); }
.modal__dialog { position: relative; background: var(--cbm-white); border-radius: var(--cbm-radius);
  box-shadow: 0 18px 48px rgba(0,0,0,0.3); width: clamp(340px, 88vw, 880px); max-height: 90vh;
  overflow: auto; padding: 1.6rem 1.8rem; }
.modal__close { position: absolute; top: 0.6rem; right: 0.8rem; border: 0; background: none;
  font-size: 1.8rem; line-height: 1; color: var(--cbm-text); cursor: pointer; }
.modal__title { color: var(--cbm-navy); font-family: var(--cbm-font-serif); margin: 0 2rem 0.5rem 0; }
.detail-field h3 { color: var(--cbm-navy); font-size: var(--cbm-h6); text-transform: uppercase;
  letter-spacing: 0.04em; margin: 1rem 0 0.3rem; }
.detail-field pre { background: var(--cbm-surface); border: 1px solid var(--cbm-border);
  border-radius: var(--cbm-radius); padding: 0.75rem; overflow: auto; margin: 0;
  font-size: 12px; white-space: pre-wrap; word-break: break-word; }