/* GBPXray back office: a plain base layout only (plan task M9.1). The look of the screens is not decided yet. */

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  color: #1f2328;
  background: #ffffff;
}

.site-header {
  display: flex;
  align-items: center;
  gap: 2rem;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid #d0d7de;
}

.site-name {
  display: flex;
  font-weight: 700;
  color: inherit;
  text-decoration: none;
}

.site-logo { display: block; height: 32px; width: auto; }

.site-nav { display: flex; gap: 1rem; }

.site-main {
  max-width: 72rem;
  margin: 0 auto;
  padding: 1rem;
}

.messages:empty { display: none; }

.message {
  margin: 0 0 0.5rem;
  padding: 0.5rem 0.75rem;
  border: 1px solid #d0d7de;
  border-radius: 4px;
  background: #f6f8fa;
}

.message-success { border-color: #1a7f37; background: #dafbe1; }
.message-error { border-color: #cf222e; background: #ffebe9; }
.message-warning { border-color: #9a6700; background: #fff8c5; }

/* Task M9.2: user box in the header, forms, the users table. */
.site-user { margin-left: auto; display: flex; align-items: center; gap: 0.75rem; }
.inline-form { display: inline; margin: 0; }
.stack-form { display: grid; gap: 0.75rem; max-width: 24rem; margin-bottom: 1.5rem; }
.stack-form label { display: grid; gap: 0.25rem; }
.stack-form input, .stack-form select { font: inherit; padding: 0.375rem 0.5rem; }
.table { border-collapse: collapse; margin-bottom: 1.5rem; }
.table th, .table td { text-align: left; padding: 0.375rem 0.75rem; border-bottom: 1px solid #d0d7de; }

/* Task M9.3: brand colour swatches and the logo preview. */
.swatch { display: inline-block; width: 1rem; height: 1rem; border: 1px solid #d0d7de; vertical-align: middle; }
.logo-preview { max-width: 8rem; max-height: 8rem; border: 1px solid #d0d7de; }

/* Task M10.5: the confirm screen (screen 2). */
.saved-answers { margin-bottom: 1rem; }
.saved-answers dl { display: grid; grid-template-columns: max-content 1fr; gap: 0.25rem 0.75rem; margin: 0.5rem 0 0; }
.saved-answers dt { color: #57606a; }
.saved-answers dd { margin: 0; }

.preflight-panel { max-width: 48rem; }
.preflight-running { min-height: 2.75rem; }
.preflight-running small { color: #57606a; }

.confirm-section { margin: 1.5rem 0; padding-top: 1rem; border-top: 1px solid #d0d7de; max-width: 48rem; }
.confirm-section h2 { margin: 0 0 0.75rem; font-size: 1.1rem; }

/* "Is this the business?": up to 5 candidate cards, the best match first and pre-selected. */
.business-cards { display: grid; gap: 0.75rem; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); margin: 0 0 0.5rem; }
.business-card {
  display: grid; gap: 0.15rem; padding: 0.75rem; border: 1px solid #d0d7de; border-radius: 6px;
  cursor: pointer; font-size: 0.9rem; background: #fff;
}
.business-card:has(input:checked) { border-color: #0969da; border-width: 2px; background: #f6f9ff; }
.business-card input[type="radio"] { margin-bottom: 0.25rem; }
.business-card-name { font-weight: 600; }
.business-card-category { color: #57606a; }
.business-card-reason { color: #57606a; font-size: 0.8rem; }

/* "Your other listings": ticked by default, the reason in plain words, easy to untick. */
.own-listings { display: grid; gap: 0.5rem; margin: 0.5rem 0; }
.own-listing { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: baseline; }
.own-listing-reason { color: #57606a; font-size: 0.85rem; }

/* "Website check": pass / blocked / not found as a clear coloured badge. */
.website-badge { display: inline-block; padding: 0.1rem 0.6rem; border-radius: 999px; font-size: 0.8rem; font-weight: 600; }
.website-badge-pass { background: #dafbe1; color: #1a7f37; }
.website-badge-blocked { background: #fff8c5; color: #9a6700; }
.website-badge-not_found { background: #ffebe9; color: #cf222e; }

/* "Keyword and area": the grid preview map (Leaflet) and the area names below it. */
.grid-map { height: 20rem; max-width: 36rem; margin-top: 0.5rem; border: 1px solid #d0d7de; border-radius: 6px; background: #eef1f4; }
.map-attribution { font-size: 0.75rem; color: #57606a; margin: 0.35rem 0 0.75rem; }
.area-names { columns: 2; column-gap: 1.5rem; margin: 0.5rem 0; padding-left: 1.1rem; max-width: 36rem; }

/* "Cost and time": plain, right-aligned numbers. */
.cost-table { border-collapse: collapse; margin: 0; width: 100%; max-width: 30rem; }
.cost-table td { padding: 0.25rem 0.5rem; }
.cost-table td:last-child { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* The "advanced" box: collapsed by default (<details>). */
.advanced { margin-top: 1.5rem; max-width: 36rem; }
.advanced summary { cursor: pointer; font-weight: 600; padding: 0.25rem 0; }
.advanced label { display: grid; gap: 0.25rem; margin: 0.75rem 0; }
.advanced input, .advanced textarea { font: inherit; padding: 0.375rem 0.5rem; }

/* Screen 3, the job status (M11.1): one mark per group and per step. Tick, spinner, error,
   waiting; the text next to each mark says the same in words. */
.status-meta { color: #57606a; margin-top: -0.5rem; }
.status-line { margin: 0.5rem 0 1rem; }
.status-job, .status-live { color: #57606a; }
.status-groups { list-style: none; padding: 0; margin: 1rem 0; max-width: 40rem; }
.status-group { padding: 0.4rem 0; border-bottom: 1px solid #eaeef2; }
.status-group-label { font-weight: 600; }
.status-steps { list-style: none; padding: 0.25rem 0 0 1.75rem; margin: 0; font-size: 0.85rem; }
.status-step { padding: 0.1rem 0; }
.status-mark-text, .status-time, .status-cost { color: #57606a; font-size: 0.85rem; margin-left: 0.4rem; }
.status-mark {
  display: inline-block; width: 1rem; height: 1rem; margin-right: 0.4rem; vertical-align: -0.15rem;
  border-radius: 50%; border: 2px solid #d0d7de; box-sizing: border-box; text-align: center;
  font-size: 0.7rem; line-height: 0.75rem; font-weight: 700;
}
.mark-done > .status-mark { border-color: #1a7f37; background: #1a7f37; color: #fff; }
.mark-done > .status-mark::before { content: "\2713"; }
.mark-failed > .status-mark { border-color: #cf222e; background: #cf222e; color: #fff; }
.mark-failed > .status-mark::before { content: "!"; }
.mark-waiting > .status-mark { border-color: #9a6700; background: #fff8c5; }
.mark-running > .status-mark { border-color: #d0d7de; border-top-color: #0969da; animation: status-spin 0.8s linear infinite; }
.mark-not_run > .status-mark, .mark-skipped > .status-mark { border-style: dashed; }
.mark-failed > .status-mark-text { color: #cf222e; font-weight: 600; }
@keyframes status-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .mark-running > .status-mark { animation: none; border-color: #0969da; } }
.status-error { border: 1px solid #ffcecb; background: #ffebe9; border-radius: 6px; padding: 0.75rem 1rem; max-width: 40rem; }
.status-error h2 { margin: 0 0 0.5rem; font-size: 1.1rem; }
.status-error-text { white-space: pre-wrap; word-break: break-word; }
.status-hint { color: #57606a; font-size: 0.85rem; max-width: 40rem; }
.status-cost-box { margin-top: 1.5rem; max-width: 40rem; }
.status-cost-box h2 { font-size: 1.1rem; }

/* Screen 4, the Review screen (M11.2): the PDF frame, checks, number check and owner questions. */
.review-meta { color: #57606a; margin-top: -0.5rem; }
.review-section { margin: 1.5rem 0; padding-top: 1rem; border-top: 1px solid #d0d7de; max-width: 48rem; }
.review-section h2 { margin: 0 0 0.75rem; font-size: 1.1rem; }
.review-hint { color: #57606a; }
.review-pdf-frame { width: 100%; height: 70vh; border: 1px solid #d0d7de; border-radius: 6px; background: #eef1f4; }
.review-downloads { margin-top: 0.5rem; }
.check-ok { color: #1a7f37; }
.check-red { color: #cf222e; }
.review-check-list { list-style: none; padding: 0; margin: 0; }
.review-check { padding: 0.35rem 0; border-bottom: 1px solid #eaeef2; }
.check-badge { display: inline-block; min-width: 5.5rem; font-weight: 600; font-size: 0.8rem; }
.check-name { font-weight: 600; }
.check-problems { margin: 0.25rem 0 0.25rem 1.25rem; color: #57606a; font-size: 0.9rem; }
.review-numbers-table td, .review-numbers-table th { vertical-align: top; }
.owner-question-list { padding-left: 1.25rem; }
.owner-question { margin-bottom: 0.75rem; }
.owner-question p { margin: 0.1rem 0; }
.review-writer-log summary { cursor: pointer; font-weight: 600; padding: 0.25rem 0; }
.writer-log-text { white-space: pre-wrap; word-break: break-word; max-height: 30rem; overflow-y: auto;
  padding: 0.75rem; border: 1px solid #d0d7de; border-radius: 6px; background: #f6f8fa; font-size: 0.9rem; }
/* M11.3: Approve, Send back (with a note) and the review history. */
.review-approve-form { display: flex; gap: 0.75rem; align-items: center; flex-wrap: wrap; margin-bottom: 1rem; }
.review-send-back-form { max-width: 40rem; }
.review-send-back-form textarea { font: inherit; padding: 0.375rem 0.5rem; width: 100%; }
.review-history-note { white-space: pre-wrap; word-break: break-word; }