/* Base styles and the small component set shared by every screen. No framework. */

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

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--text-md);
  line-height: var(--leading-normal);
  color: var(--text);
  background: var(--bg);
}

h1,
h2,
h3,
p {
  margin: 0;
}

h1 {
  font-size: var(--text-xl);
  font-weight: 700;
  line-height: var(--leading-tight);
}

h2 {
  font-size: var(--text-lg);
  font-weight: 600;
  line-height: var(--leading-tight);
}

a {
  color: var(--accent);
}

a:hover {
  color: var(--accent-hover);
}

code {
  font-size: var(--text-sm);
  background: var(--gray-100);
  padding: 1px 4px;
  border-radius: 4px;
}

:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}

img {
  max-width: 100%;
  display: block;
}

/* Layout helpers */
.container {
  width: 100%;
  max-width: var(--content-max);
  margin-inline: auto;
  padding: var(--space-5) var(--space-4);
}

.container.narrow {
  max-width: var(--content-narrow);
}

.container.wide {
  max-width: var(--content-wide);
}

.stack {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.section {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding-block: var(--space-4);
}

.section + .section {
  border-top: 1px solid var(--border);
}

.muted {
  color: var(--text-muted);
}

.hint {
  color: var(--text-muted);
  font-size: var(--text-sm);
}

/* Inline SVG icons from IconSprite (line icons stroke with currentColor; the paw is filled) */
.icon {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Top bar */
.topbar {
  display: flex;
  align-items: center;
  height: 56px;
  padding-inline: var(--space-4);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  position: sticky;
  top: 0;
  z-index: 10;
}

.wordmark {
  font-weight: 700;
  color: var(--text);
  text-decoration: none;
  letter-spacing: -0.01em;
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: var(--touch-min);
  padding: 0 var(--space-5);
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  font: inherit;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 120ms ease, border-color 120ms ease;
}

.btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.btn-primary {
  width: 100%;
  min-height: var(--cta-height);
  background: var(--accent);
  color: #ffffff;
}

.btn-primary:hover:not(:disabled) {
  background: var(--accent-hover);
}

/* Links styled as buttons must keep their own text color on hover/focus/active
   (the global a:hover rule would otherwise paint the label with the hover background color;
   iOS keeps :hover applied after a tap, which made primary buttons look empty). */
a.btn:hover,
a.btn:focus,
a.btn:active {
  color: inherit;
}

a.btn-primary,
a.btn-primary:hover,
a.btn-primary:focus,
a.btn-primary:active,
a.btn-primary:visited {
  color: #ffffff;
}

a.btn-secondary,
a.btn-secondary:hover,
a.btn-secondary:focus,
a.btn-secondary:active,
a.btn-secondary:visited {
  color: var(--text);
}

.btn-secondary {
  background: var(--surface);
  border-color: var(--border);
  color: var(--text);
}

.btn-secondary:hover:not(:disabled) {
  border-color: var(--gray-400);
}

.btn-danger {
  background: var(--surface);
  border-color: var(--lost);
  color: var(--lost);
}

.btn-link {
  min-height: var(--touch-min);
  padding: 0 var(--space-2);
  background: none;
  border: 0;
  color: var(--accent);
}

.btn-link:hover {
  text-decoration: underline;
}

@media (min-width: 768px) {
  .btn-primary {
    width: auto;
    min-height: var(--touch-min);
  }
}

/* Form fields */
.field {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.field label {
  font-size: var(--text-sm);
  font-weight: 600;
}

.field input,
.field select,
.field textarea {
  min-height: var(--touch-min);
  padding: 0 var(--space-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font: inherit;
  font-size: var(--text-md);
  color: var(--text);
  background: var(--surface);
}

.field textarea {
  padding-block: var(--space-3);
  resize: vertical;
}

.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border: 2px solid var(--accent);
  padding-inline: calc(var(--space-3) - 1px);
}

.field input.invalid,
.field .invalid {
  border-color: var(--lost);
}

.field-error,
.validation-message {
  color: var(--lost);
  font-size: var(--text-sm);
}

.validation-errors {
  margin: 0;
  padding-left: var(--space-4);
  color: var(--lost);
  font-size: var(--text-sm);
}

.checkbox {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--touch-min);
}

.checkbox input {
  width: 20px;
  height: 20px;
  accent-color: var(--accent);
}

/* Status pill */
.pill {
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding: 2px 10px;
  border-radius: var(--radius-sm);
  font-size: var(--text-xs);
  font-weight: 600;
  white-space: nowrap;
}

.pill-safe {
  background: var(--safe-soft);
  color: var(--safe);
}

.pill-lost {
  background: var(--lost-soft);
  color: var(--lost);
}

.pill-warning {
  background: var(--warning-soft);
  color: var(--warning);
}

.pill-inactive {
  background: var(--inactive-soft);
  color: var(--inactive);
}

.pill-accent {
  background: var(--accent-soft);
  color: var(--accent);
}

/* List row */
.list {
  display: flex;
  flex-direction: column;
}

.list-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--space-3);
  min-height: 64px;
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--border);
  color: inherit;
  text-decoration: none;
}

.list-row:hover {
  background: var(--gray-100);
}

.list-row .title {
  font-weight: 600;
}

.list-row .subtitle {
  color: var(--text-muted);
  font-size: var(--text-sm);
}

/* Alerts (status messages) */
.alert {
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
}

.alert-success {
  background: var(--safe-soft);
  color: var(--safe);
}

.alert-error {
  background: var(--lost-soft);
  color: var(--lost);
}

/* Empty state */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-8) var(--space-4);
  text-align: center;
}

.empty-state h2 {
  font-size: var(--text-lg);
}

/* Summary row (dashboards) */
.summary-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
}

.summary-row .value {
  font-size: var(--text-xl);
  font-weight: 700;
  line-height: var(--leading-tight);
}

.summary-row .label {
  color: var(--text-muted);
  font-size: var(--text-sm);
}

/* Blazor reconnect / error UI */
#blazor-error-ui {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  padding: var(--space-3) var(--space-4);
  background: var(--warning-soft);
  color: var(--warning);
  box-shadow: var(--shadow-sm);
  z-index: 1000;
}

#blazor-error-ui .dismiss {
  cursor: pointer;
  position: absolute;
  right: var(--space-4);
  top: var(--space-3);
}

/* ------------------------------------------------------------------ */
/* Owner area: dashboard sections, registration wizard (M3)            */
/* ------------------------------------------------------------------ */
.section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}

.section-head h2 {
  font-size: var(--text-lg);
}

.dashboard-pets .btn-link .icon,
.new-link .icon {
  width: 20px;
  height: 20px;
}

/* Wizard shell */
.wizard {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.wizard-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  width: 100%;
  padding: var(--space-5) var(--space-4);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-card);
}

.wizard-card > .badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--accent-tint);
  color: var(--accent);
}

.wizard-card > .badge .icon {
  width: 28px;
  height: 28px;
}

.wizard-card > h2,
.wizard-card > .muted {
  text-align: center;
}

.wizard-h2 {
  font-size: var(--text-md);
  font-weight: 700;
  margin-top: var(--space-2);
}

.wizard-cta {
  width: 100%;
  min-height: var(--cta-height);
  border-radius: var(--radius-lg);
  font-size: var(--text-md);
}

.wizard-cta .btn-icon {
  width: 20px;
  height: 20px;
}

.wizard-back,
.no-tag-link {
  align-self: center;
}

.tag-line {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  align-self: flex-start;
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-pill);
  background: var(--accent-tint);
  color: var(--accent);
  font-size: var(--text-sm);
}

.tag-line .icon {
  width: 18px;
  height: 18px;
}

.tag-line strong {
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  letter-spacing: 0.12em;
}

.code-input {
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  font-size: 1.25rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-align: center;
}

/* Progress */
.wizard-progress {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.progress-track {
  height: 6px;
  border-radius: var(--radius-pill);
  background: var(--gray-200);
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  background: var(--accent);
  transition: width 200ms ease;
}

.progress-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

.progress-label {
  color: var(--text-muted);
  font-size: var(--text-sm);
  font-weight: 600;
}

.skip-link {
  min-height: 32px;
}

/* Chips (species, sex) */
.chip-field {
  margin: 0;
  padding: 0;
  border: 0;
  min-width: 0;
}

.chip-field legend {
  padding: 0;
  margin-bottom: var(--space-1);
  font-size: var(--text-sm);
  font-weight: 600;
}

.chip-group {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.chip {
  min-height: 44px;
  padding: 0 var(--space-4);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

.chip.selected {
  border-color: var(--accent);
  background: var(--accent-tint);
  color: var(--accent);
}

.chip:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* Two fields side by side on wide screens */
.field-row {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.field-short {
  max-width: 160px;
}

/* Photo picker */
.photo-picker {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.photo-drop {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 112px;
  height: 112px;
  border: 2px dashed var(--accent-tint-strong);
  border-radius: var(--radius-lg);
  background: var(--accent-tint);
  color: var(--accent);
  cursor: pointer;
  overflow: hidden;
}

.photo-drop.has-photo {
  border-style: solid;
}

.photo-drop img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.photo-drop input[type="file"] {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}

.photo-add,
.photo-ready {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  font-size: var(--text-xs);
  font-weight: 600;
  text-align: center;
}

.photo-title {
  font-weight: 600;
}

.toggle-list {
  display: flex;
  flex-direction: column;
}

.contact-block {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}

.contact-block-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.contact-block-title {
  font-weight: 600;
}

.add-contact {
  align-self: flex-start;
}

.add-contact .icon {
  width: 20px;
  height: 20px;
}

/* Review */
.preview-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-4);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--bg);
  text-align: center;
}

.preview-photo {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 120px;
  height: 120px;
  margin-bottom: var(--space-2);
  border-radius: 50%;
  background: var(--accent-tint);
  color: var(--accent);
  overflow: hidden;
}

.preview-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.preview-photo .icon {
  width: 40px;
  height: 40px;
}

.preview-name {
  font-size: var(--text-xl);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.preview-line {
  color: var(--text-muted);
}

.preview-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-2);
  margin-top: var(--space-2);
}

.preview-actions span {
  padding: 4px 12px;
  border-radius: var(--radius-pill);
  background: var(--accent);
  color: #ffffff;
  font-size: var(--text-sm);
  font-weight: 600;
}

.edit-links {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
}

.hint.centered {
  text-align: center;
}

@media (min-width: 768px) {
  .wizard-card {
    max-width: 560px;
    margin-inline: auto;
    padding: var(--space-6) var(--space-6) var(--space-5);
  }

  .field-row {
    flex-direction: row;
  }

  .field-row > .field {
    flex: 1;
  }
}

/* ---------- Admin: QR inventory (M1, docs/04-ux-ui.md §3.15–3.16) ---------- */
.btn-inline {
  width: auto;
  min-height: var(--touch-min);
  padding-inline: var(--space-4);
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

.btn-inline .btn-icon {
  width: 20px;
  height: 20px;
}

.panel {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-4);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}

.panel-title {
  font-size: var(--text-md);
  font-weight: 700;
}

.toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}

.pill-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.filter-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--space-3);
}

.filter-row .field {
  flex: 1 1 200px;
  margin: 0;
}

.filter-row .field-short {
  flex: 0 1 200px;
}

.filter-row select,
.field select {
  min-height: 48px;
  padding: 0 var(--space-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface);
  font: inherit;
  color: var(--text);
}

.data-table {
  width: 100%;
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
}

.data-table table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
}

.data-table th,
.data-table td {
  padding: var(--space-3) var(--space-3);
  text-align: left;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}

.data-table th {
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted);
  background: var(--gray-50);
}

.data-table tbody tr:last-child td {
  border-bottom: 0;
}

.data-table tbody tr:hover {
  background: var(--gray-50);
}

.data-table .num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.data-table .chevron {
  width: 40px;
  text-align: right;
}

.data-table .chevron .icon {
  width: 20px;
  height: 20px;
  color: var(--text-muted);
}

.row-link {
  color: var(--accent);
  font-weight: 600;
  text-decoration: none;
}

.row-link:hover {
  text-decoration: underline;
}

.mono {
  font-family: ui-monospace, "Cascadia Mono", "Consolas", "Roboto Mono", monospace;
  letter-spacing: 0.08em;
}

.pager {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.pager .btn-link {
  width: auto;
}

.code-hero {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-5);
  align-items: flex-start;
}

.qr-preview {
  flex: 0 0 auto;
  padding: var(--space-2);
  background: #ffffff;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}

.qr-preview img {
  width: 256px;
  height: 256px;
  image-rendering: pixelated;
}

.code-facts {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  min-width: 0;
  flex: 1 1 280px;
}

.code-facts a {
  color: var(--accent);
  word-break: break-all;
}

.code-big {
  font-size: var(--text-2xl);
  font-weight: 700;
}

.facts {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: var(--space-1) var(--space-4);
  margin: 0;
  font-size: var(--text-sm);
}

.facts dt {
  color: var(--text-muted);
}

.facts dd {
  margin: 0;
}

.history {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

.history-row {
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.history-row:last-child {
  border-bottom: 0;
}

.history-meta {
  font-size: var(--text-sm);
}

@media (max-width: 767px) {
  .qr-preview img {
    width: 200px;
    height: 200px;
  }
}

/* ---------- Tag scanner (camera) ---------- */
.scan-btn {
  width: 100%;
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
}

.scan-btn .btn-icon {
  width: 20px;
  height: 20px;
}

.scan-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  padding: var(--space-4);
  background: rgb(15 23 42 / 0.94);
  color: #ffffff;
}

.scan-stage {
  position: relative;
  width: min(92vw, 420px);
  aspect-ratio: 1 / 1;
  border-radius: var(--radius-xl);
  overflow: hidden;
  background: #000000;
}

.scan-stage video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.scan-frame {
  position: absolute;
  inset: 12%;
  border: 3px solid var(--accent-tint-strong, #99e0d3);
  border-radius: var(--radius-lg);
  pointer-events: none;
}

.scan-text {
  font-size: var(--text-md);
  text-align: center;
  max-width: 420px;
}

.scan-error {
  color: #fecaca;
  text-align: center;
  max-width: 420px;
}

.scan-cancel {
  width: min(92vw, 420px);
  min-height: 48px;
  border-radius: var(--radius-lg);
  border: 1px solid rgb(255 255 255 / 0.5);
  background: transparent;
  color: #ffffff;
  font: inherit;
  font-weight: 600;
}

/* Photo actions under the picker */
.photo-actions {
  display: flex;
  gap: var(--space-3);
  margin-top: var(--space-1);
}

.photo-action {
  position: relative;
  padding: 0;
  min-height: 32px;
  font-size: var(--text-sm);
  cursor: pointer;
}

.photo-action input[type="file"] {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}

/* Full-screen photo viewer (wizard and pet detail) */
.photo-viewer {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-4);
  background: rgba(15, 23, 42, 0.92);
}

.photo-viewer img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: var(--radius-lg);
  background: #000;
}

.photo-viewer-close {
  position: absolute;
  top: max(var(--space-4), env(safe-area-inset-top));
  right: var(--space-4);
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
  font-size: 20px;
  cursor: pointer;
}

.pet-photo-button {
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: zoom-in;
}

.pet-photo-button img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Inputs whose value is stored uppercase (pet name, breed, color) */
input.uppercase,
input.uppercase::placeholder {
  text-transform: uppercase;
}

/* Chips as native radios (finder forms): the input stays accessible but invisible */
.chip-radio {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.chip-radio input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.chip-radio:has(input:checked) {
  border-color: var(--accent);
  background: var(--accent-tint);
  color: var(--accent);
}

.chip-radio:has(input:focus-visible) {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Admin panel (M8) */
.admin-page h1 {
  font-size: var(--text-xl);
  letter-spacing: -0.02em;
}

.kpi-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
}

.kpi {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--space-4);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  text-decoration: none;
  color: var(--text);
}

.kpi:hover {
  border-color: var(--accent-tint-strong);
  color: var(--text);
}

.kpi-value {
  font-size: var(--text-xl);
  font-weight: 700;
  line-height: var(--leading-tight);
}

.kpi-label {
  color: var(--text-muted);
  font-size: var(--text-sm);
}

.kpi-alert .kpi-value {
  color: var(--danger, #b91c1c);
}

.admin-two-col {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-4);
  align-items: start;
}

.admin-hero {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.admin-hero-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  min-width: 0;
}

.admin-hero-body h1 {
  font-size: var(--text-xl);
}

.admin-photo {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 96px;
  height: 96px;
  border-radius: var(--radius-lg);
  background: var(--accent-tint);
  color: var(--accent);
  overflow: hidden;
}

.admin-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.admin-photo .icon {
  width: 36px;
  height: 36px;
}

.admin-avatar {
  border-radius: var(--radius-pill);
}

.list .thumb {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-sm);
  background: var(--accent-tint);
  color: var(--accent);
  overflow: hidden;
  flex-shrink: 0;
}

.list .thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.list .thumb .icon {
  width: 22px;
  height: 22px;
}

.list .thumb.kind {
  border-radius: var(--radius-pill);
}

.data-table .thumb-cell {
  width: 52px;
}

.data-table .thumb {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-sm);
  background: var(--accent-tint);
  color: var(--accent);
  overflow: hidden;
}

.data-table .thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.data-table .thumb .icon {
  width: 20px;
  height: 20px;
}

.data-table .cell-label {
  display: none;
}

.data-table .nowrap {
  white-space: nowrap;
}

.data-table .detail-cell {
  max-width: 420px;
}

.audit-json {
  margin: 0;
  padding: var(--space-2);
  max-width: 100%;
  max-height: 240px;
  overflow: auto;
  background: var(--gray-50);
  border-radius: var(--radius-sm);
  font-size: var(--text-xs);
  white-space: pre-wrap;
  word-break: break-all;
}

.uppercase {
  text-transform: uppercase;
}

/* Status pages (not found, error) share the auth card look */
.status-page {
  position: relative;
  isolation: isolate;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-5) var(--space-4) var(--space-8);
}

.status-brand {
  padding-top: var(--space-4);
}

.status-brand a {
  text-decoration: none;
  color: inherit;
}

.status-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  max-width: 480px;
  padding: var(--space-6) var(--space-4);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-card);
  text-align: center;
}

.status-card .badge {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: var(--radius-pill);
  background: var(--accent-tint);
  color: var(--accent);
}

.status-card .badge .icon {
  width: 28px;
  height: 28px;
}

.status-card h1 {
  font-size: var(--text-xl);
}

.status-card .btn {
  width: 100%;
  min-height: 56px;
  margin-top: var(--space-2);
}

@media (min-width: 768px) {
  .kpi-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .kpi-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  .admin-two-col {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
}

/* Admin/owner detail lists must never widen the page on phones: long e-mails, codes and URLs wrap. */
.facts {
  grid-template-columns: minmax(0, max-content) minmax(0, 1fr);
}

.facts .data-row {
  display: contents;
}

.facts dt,
.facts dd {
  min-width: 0;
  overflow-wrap: anywhere;
}

.list-row > * {
  min-width: 0;
}

.list-row .title,
.list-row .subtitle {
  overflow-wrap: anywhere;
}

.kpi,
.admin-hero-body,
.admin-hero-body h1,
.admin-hero-body p {
  min-width: 0;
  overflow-wrap: anywhere;
}

@media (max-width: 767px) {
  .facts {
    grid-template-columns: minmax(0, 38%) minmax(0, 1fr);
  }
}

/* Phones: while the PWA install banner is visible, the empty dashboard drops its photo
   so the page still fits one screen (Dashboard.razor.css cannot see the layout banner). */
@media (max-width: 767px) {
  body:has(.pwa-banner:not([hidden])) .welcome-illustration {
    display: none;
  }
}

/* Same for the empty "Mis mascotas" card: a smaller photo leaves room for the banner. */
@media (max-width: 767px) {
  body:has(.pwa-banner:not([hidden])) .pets-empty .illustration {
    height: clamp(0px, calc(100dvh - 560px), 160px);
  }
}

/* Same for the tag-code pre-screen: drop the helper line while the banner is visible. */
@media (max-width: 767px) {
  body:has(.pwa-banner:not([hidden])) .prescreen > .muted,
  body:has(.pwa-banner:not([hidden])) .prescreen .hint {
    display: none;
  }
}

@media (max-width: 767px) {
  body:has(.pwa-banner:not([hidden])) .wizard-card.prescreen {
    row-gap: var(--space-2);
  }
}

/* Admin dashboard on phones: compact 3x2 KPIs, smaller status pills and only the three
   latest rows per list ("Ver todas" opens the rest), so the page reads at a glance. */
@media (max-width: 767px) {
  .admin-page.stack {
    gap: var(--space-3);
  }

  .admin-page h1 {
    font-size: var(--text-lg);
  }

  .kpi-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-2);
  }

  .kpi {
    align-items: center;
    padding: var(--space-3) var(--space-2);
    text-align: center;
  }

  .kpi-value {
    font-size: var(--text-lg);
  }

  .kpi-label {
    font-size: 0.72rem;
    line-height: 1.2;
  }

  .admin-page .panel {
    gap: var(--space-2);
    padding: var(--space-3);
  }

  .admin-page .pill-row {
    gap: var(--space-1);
  }

  .admin-page .pill-row .pill {
    font-size: 0.72rem;
  }

  /* The latest-records lists stay on tablet/desktop; on phones the KPI tiles and the
     chip row already lead to Mascotas and Reportes, and the page fits one screen. */
  .admin-dashboard .admin-two-col {
    display: none;
  }
}

@media (max-width: 767px) and (max-height: 700px) {
  .admin-dashboard .panel > .muted {
    display: none;
  }
}

/* ------------------------------------------------------------------ */
/* Admin pages: shared header, filters, actions and responsive tables. */
/* Everything is scoped to .admin-main (or admin-only classes) so the  */
/* owner and public screens keep their own look.                       */
/* ------------------------------------------------------------------ */

/* Back link above the page title */
.admin-main .back-link {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: 2px;
  min-height: 40px;
  margin-block: calc(var(--space-2) * -1);
  margin-left: -6px;
  padding-right: var(--space-2);
  color: var(--text-muted);
  font-size: var(--text-sm);
  font-weight: 600;
  text-decoration: none;
}

.admin-main .back-link:hover {
  color: var(--accent);
}

.admin-main .back-link .icon {
  width: 18px;
  height: 18px;
}

/* Page header: title + meta line on the left, one compact primary action on the right */
.page-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  min-width: 0;
}

.page-head-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.page-head h1 {
  overflow-wrap: anywhere;
}

.page-head > .btn {
  flex-shrink: 0;
}

/* Batch detail: the status pills live inside the header; below desktop they wrap under the title. */
.batch-page .page-head {
  flex-wrap: wrap;
}

.batch-page .page-head .pill-row {
  flex-basis: 100%;
}

.page-meta {
  color: var(--text-muted);
  font-size: var(--text-sm);
}

/* Action group (exports, and toggles for the panels that open below) */
.action-grid {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.action-grid .btn[aria-expanded="true"] {
  border-color: var(--accent-tint-strong);
  background: var(--accent-tint);
  color: var(--accent);
}

/* Search input with its button on one row */
.search-box {
  display: flex;
  gap: var(--space-2);
}

.search-box input {
  flex: 1 1 auto;
  min-width: 0;
}

.search-box .btn {
  flex: 0 0 auto;
}

.admin-main .filter-row .field-search {
  flex: 2 1 280px;
}

/* Pager: previous / page info / next, info centered */
.admin-main .pager {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-2);
}

.admin-main .pager > span {
  text-align: center;
  font-size: var(--text-sm);
}

/* QR code detail: preview + code + status, facts below */
.code-summary {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-3) var(--space-5);
  align-items: start;
}

.code-summary .code-facts {
  flex: none;
}

.code-summary .facts,
.code-summary .code-url {
  grid-column: 1 / -1;
}

.admin-main .panel .section-head {
  margin-bottom: 0;
}

.code-url {
  font-size: var(--text-sm);
  overflow-wrap: anywhere;
}

/* ---------- QR code detail (/admin/qr/codes/{code}) ---------- */
/* Phones and tablets: the columns dissolve (display: contents) and the panels stack in reading
   order; the history goes last. */
.code-detail {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.code-col {
  display: contents;
}

.history-panel {
  order: 10;
}

.panel-count {
  margin-left: var(--space-1);
  color: var(--text-muted);
  font-size: var(--text-sm);
  font-weight: 500;
}

.panel-lead {
  font-size: var(--text-sm);
}

.code-summary .panel-title {
  grid-column: 1 / -1;
}

/* Pages that fit the desktop viewport (`.fit-viewport`): the layout's vertical padding drops to 16 px and the
   section takes exactly the height left under the 64 px top bar, so the page itself never scrolls. Each page
   decides which region absorbs the leftover height (a column, a list, a table). */
@media (min-width: 1024px) {
  .admin-main .admin-content:has(> .fit-viewport) {
    padding-top: var(--space-4);
    padding-bottom: var(--space-4);
  }

  .admin-main .admin-page.fit-viewport {
    height: calc(100dvh - 64px - 2 * var(--space-4));
    min-height: 440px;
    gap: var(--space-3);
  }
}

/* Desktop: three columns (code + history · laser · actions) that share the height left under the back link.
   Everything is sized to fit a 1366 × 768 laptop without any scrollbar; the history list, the laser block and
   the actions column scroll inside their own box only when the window is shorter than that. */
@media (min-width: 1024px) {
  .code-detail {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr);
    gap: var(--space-3);
    flex: 1 1 auto;
    min-height: 0;
  }

  .code-col {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    min-height: 0;
    min-width: 0;
  }

  .code-col-actions {
    overflow-y: auto;
  }

  .code-detail .panel {
    gap: var(--space-2);
    padding: var(--space-3) var(--space-4);
    flex-shrink: 0;
  }

  .code-detail .panel-title {
    line-height: 1.25;
  }

  /* Summary: title, then QR left with code + status right, facts across, URL on one line across. */
  .code-detail .code-summary {
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-rows: auto auto auto auto;
    gap: var(--space-2) var(--space-3);
  }

  .code-detail .code-summary .panel-title {
    grid-row: 1;
    grid-column: 1 / -1;
  }

  .code-detail .code-summary .qr-preview {
    grid-row: 2;
    grid-column: 1;
    padding: var(--space-1);
  }

  .code-detail .code-summary .code-facts {
    grid-row: 2;
    grid-column: 2;
    align-self: center;
    gap: var(--space-1);
  }

  .code-detail .code-summary .facts {
    grid-row: 3;
    grid-column: 1 / -1;
    gap: 2px var(--space-3);
    line-height: 1.35;
  }

  .code-detail .code-summary .code-url {
    grid-row: 4;
    grid-column: 1 / -1;
    font-size: var(--text-xs);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .code-detail .qr-preview img {
    width: 112px;
    height: 112px;
  }

  .code-detail .code-big {
    font-size: 1.5rem;
    line-height: 1.2;
  }

  .code-detail .history-panel {
    order: 0;
    flex: 1 1 auto;
    min-height: 0;
  }

  .history-panel .history {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    font-size: var(--text-sm);
    line-height: 1.35;
  }

  .history-panel .history-row {
    padding: var(--space-2) 0;
  }

  /* Laser: the title and the lead stay put; the engraving block scrolls when the column is short. */
  .code-detail .laser-panel {
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
  }

  .code-detail .laser-engrave {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    gap: var(--space-2);
  }

  .code-detail .laser-endpoint {
    gap: 2px;
  }

  .code-detail .laser-endpoint label {
    font-size: var(--text-xs);
    line-height: 1.2;
  }

  .code-detail .laser-state {
    gap: var(--space-1);
    padding: var(--space-2) var(--space-3);
  }

  .code-detail .laser-state-title {
    font-size: var(--text-xs);
  }

  .code-detail .laser-meta {
    line-height: 1.35;
  }

  .code-detail .laser-steps {
    gap: 2px;
    margin: 0;
    font-size: var(--text-sm);
    line-height: 1.35;
  }

  .code-detail .checkbox {
    min-height: 28px;
  }

  /* Compact desktop forms (mouse, not thumbs): 36 px controls, stacked fields, small labels. */
  .code-detail .field-row {
    flex-direction: column;
    gap: var(--space-2);
  }

  .code-detail .field-short {
    max-width: none;
  }

  .code-detail .field {
    gap: 2px;
  }

  .code-detail .field label {
    font-size: var(--text-xs);
    line-height: 1.2;
  }

  .code-detail .field input,
  .code-detail .field select,
  .code-detail .btn,
  .code-detail .laser-actions .btn,
  .code-detail .laser-unlock,
  .code-detail .laser-endpoint-row input,
  .code-detail .laser-test,
  .code-detail .laser-plate-field input,
  .code-detail .laser-plate-field select,
  .code-detail .laser-plate-save {
    min-height: 36px;
    font-size: var(--text-sm);
  }

  .code-detail .laser-plate {
    gap: var(--space-1);
  }

  .code-detail .laser-plate legend,
  .code-detail .laser-plate-field span {
    font-size: var(--text-xs);
    line-height: 1.2;
  }

  .code-detail .laser-plate-field {
    gap: 2px;
  }

  .code-detail .panel-lead {
    font-size: var(--text-xs);
    line-height: 1.35;
  }
}

/* Batch detail (/admin/qr/batches/{id}) on desktop: one-line header with the status pills at the right,
   40 px actions and inline-labelled filters, and the code table takes the leftover height and scrolls
   inside (sticky header) instead of the page. */
@media (min-width: 1024px) {
  .batch-page .page-head {
    align-items: flex-start;
  }

  .batch-page .page-head-text {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: baseline;
    column-gap: var(--space-3);
  }

  .batch-page .page-head .pill-row {
    flex: 0 1 auto;
    justify-content: flex-end;
    padding-top: 6px;
  }

  .batch-page .action-grid .btn {
    min-height: 40px;
  }

  .batch-page .filter-row {
    align-items: center;
  }

  .batch-page .filter-row .field {
    flex-direction: row;
    align-items: center;
    gap: var(--space-2);
  }

  .batch-page .filter-row .field label {
    white-space: nowrap;
  }

  .batch-page .filter-row .field-search {
    flex: 1 1 auto;
  }

  .batch-page .filter-row .field-search .search-box {
    flex: 1 1 auto;
    max-width: 480px;
  }

  .batch-page .filter-row .field-short {
    flex: 0 0 auto;
    max-width: none;
  }

  .batch-page .filter-row .field-short select {
    width: 180px;
  }

  .batch-page .filter-row input,
  .batch-page .filter-row select,
  .batch-page .filter-row .btn {
    min-height: 40px;
  }

  .batch-page .data-table {
    flex: 1 1 auto;
    min-height: 160px;
    overflow: auto;
  }

  .batch-page .data-table thead th {
    position: sticky;
    top: 0;
    z-index: 1;
    border-bottom: 0;
    box-shadow: inset 0 -1px 0 var(--border);
  }

  .batch-page .data-table th,
  .batch-page .data-table td {
    padding: 10px var(--space-3);
  }

  .batch-page .pager {
    flex-shrink: 0;
  }

  .batch-page .pager .btn-link {
    min-height: 36px;
  }
}

/* Detail heroes: the secondary link sits under the pills, left-aligned */
.admin-hero-body .btn-link {
  align-self: flex-start;
  min-height: 32px;
  padding: 0;
}

/* Lists inside admin panels (pets of a user, reports of a pet, latest records):
   title over subtitle, aligned with the panel edge */
.admin-main .panel .list-row {
  padding-inline: 0;
}

.admin-main .list-row .title,
.admin-main .list-row .subtitle {
  display: block;
}

.admin-main .list-row .subtitle {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

.admin-main .panel .list-row:last-child {
  border-bottom: 0;
}

.admin-main .history-meta {
  color: var(--text-muted);
}

@media (min-width: 768px) {
  .code-summary {
    grid-template-rows: auto auto auto 1fr;
  }

  .code-summary .panel-title {
    grid-row: 1;
  }

  .code-summary .qr-preview {
    grid-row: 2 / span 3;
  }

  .code-summary .facts,
  .code-summary .code-url {
    grid-column: 2;
  }
}

/* Phones (<= 767 px): compact headers, aligned filters, equal-width actions and tables
   rendered as stacked rows (primary + status on the first line, muted details below). */
@media (max-width: 767px) {
  .admin-main .admin-page.stack {
    gap: var(--space-3);
  }

  .admin-main h1 {
    font-size: 1.25rem;
    letter-spacing: -0.01em;
  }

  .admin-main .page-head > .btn {
    min-height: 44px;
    padding-inline: var(--space-3);
  }

  .admin-main .field-short {
    max-width: none;
  }

  .admin-main .panel {
    gap: var(--space-2);
    padding: var(--space-3);
  }

  .admin-main .pill-row {
    gap: var(--space-1);
  }

  .admin-main .pill-row .pill {
    font-size: 0.72rem;
  }

  /* Detail heroes */
  .admin-main .admin-hero {
    gap: var(--space-3);
  }

  .admin-main .history-row {
    padding-block: var(--space-2);
  }

  .admin-main .panel .list-row {
    min-height: 56px;
    padding-block: var(--space-2);
  }

  .admin-main .admin-photo {
    width: 72px;
    height: 72px;
  }

  .admin-main .admin-photo .icon {
    width: 28px;
    height: 28px;
  }

  /* Buttons inside panels share the row instead of hugging their label */
  .admin-main .panel .toolbar > .btn:not(.btn-link) {
    flex: 1 1 auto;
  }

  .admin-main .panel > .btn-inline {
    width: 100%;
  }

  .action-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .action-grid .btn {
    width: 100%;
    padding-inline: var(--space-2);
    font-size: var(--text-sm);
    line-height: 1.2;
    text-align: center;
  }

  /* Filters: full-width fields, two half fields side by side, search + button on one row */
  .admin-main .filter-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-2);
  }

  .admin-main .filter-row .field {
    grid-column: 1 / -1;
    gap: 2px;
  }

  .admin-main .filter-row .field-half {
    grid-column: auto;
  }

  .admin-main .filter-row label {
    font-size: var(--text-xs);
    color: var(--text-muted);
  }

  .admin-main .filter-row .field-search label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }

  .admin-main .filter-row input,
  .admin-main .filter-row select {
    width: 100%;
    min-width: 0;
  }

  .admin-main .filter-row .search-box input {
    width: auto;
  }

  /* Tables become stacked rows */
  .admin-main .data-table {
    overflow: hidden;
  }

  /* A table inside a panel runs edge to edge instead of nesting a second card */
  .admin-main .panel .data-table {
    width: auto;
    margin-inline: calc(var(--space-3) * -1);
    border-inline: 0;
    border-radius: 0;
  }

  .admin-main .facts dd.mono {
    font-size: var(--text-sm);
    letter-spacing: 0;
  }

  .admin-main .data-table table,
  .admin-main .data-table tbody {
    display: block;
  }

  .admin-main .data-table thead {
    display: none;
  }

  .admin-main .data-table tr {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    column-gap: 12px;
    row-gap: 2px;
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--border);
    background: var(--surface);
  }

  .admin-main .data-table tbody tr:last-child {
    border-bottom: 0;
  }

  .admin-main .data-table tbody tr:active {
    background: var(--gray-50);
  }

  /* Forces the details onto their own line */
  .admin-main .data-table tr::after {
    content: "";
    order: 2;
    flex-basis: 100%;
    height: 0;
  }

  .admin-main .data-table td {
    display: block;
    order: 3;
    min-width: 0;
    padding: 0;
    border: 0;
    color: var(--text-muted);
    font-size: var(--text-sm);
    line-height: 1.4;
    text-align: left;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .admin-main .data-table td.cell-primary {
    order: 0;
    flex: 1 1 0;
    color: var(--text);
    font-size: var(--text-md);
    font-weight: 600;
  }

  .admin-main .data-table td.cell-primary.clamp {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
  }

  .admin-main .data-table td.cell-status {
    order: 1;
    flex: 0 0 auto;
  }

  .admin-main .data-table td.cell-block {
    flex-basis: 100%;
  }

  .admin-main .data-table td.cell-thumb {
    position: absolute;
    top: var(--space-3);
    left: var(--space-4);
    width: auto;
  }

  .admin-main .data-table tr:has(> td.cell-thumb) {
    min-height: 68px;
    padding-left: calc(var(--space-4) + 52px);
  }

  .admin-main .data-table .chevron,
  .admin-main .data-table td.hide-sm,
  .admin-main .data-table td.is-empty {
    display: none;
  }

  .admin-main .data-table .pill {
    height: 20px;
    padding: 0 6px;
    font-size: 0.7rem;
  }

  /* " · " separators between the details. The dot hangs in the column gap; when a detail
     wraps to a new line its dot falls left of the content edge, under the row's mask. */
  .admin-main .data-table tr::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: calc(var(--space-4) - 12px);
    width: 12px;
    background: inherit;
  }

  .admin-main .data-table tr:has(> td.cell-thumb)::before {
    left: calc(var(--space-4) + 52px - 12px);
  }

  .admin-main .data-table td.cell-meta ~ td.cell-meta::before {
    content: "\00b7";
    display: inline-block;
    width: 12px;
    margin-left: -12px;
    text-align: center;
  }

  .admin-main .data-table .cell-label {
    display: inline;
  }

  .admin-main .data-table td.cell-meta .row-link {
    font-weight: 500;
  }

  .admin-main .data-table td[data-unit]::after {
    content: " " attr(data-unit);
  }

  /* The primary link covers the whole row; other links and buttons stay on top of it */
  .admin-main .data-table td.cell-primary .row-link::after {
    content: "";
    position: absolute;
    inset: 0;
  }

  .admin-main .data-table td:not(.cell-primary) a,
  .admin-main .data-table td button {
    position: relative;
    z-index: 1;
  }

  .admin-main .data-table .btn-link {
    min-height: 32px;
    padding: 0 var(--space-1);
  }

  /* QR code detail */
  .code-summary .qr-preview {
    padding: var(--space-1);
  }

  .code-summary .qr-preview img {
    width: 112px;
    height: 112px;
  }

  .code-summary .code-big {
    font-size: var(--text-xl);
  }

  .admin-main .pager {
    gap: var(--space-1);
  }

  .admin-main .pager .btn-link {
    padding-inline: var(--space-1);
  }
}

/* Laser panel on the code detail page: address row + "Probar", one status block, checklist, gated buttons,
   live progress. Stacked on phones (the panel is ~360 px wide). */
.laser-engrave {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.laser-endpoint {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.laser-endpoint label {
  font-size: var(--text-sm);
  font-weight: 600;
}

.laser-endpoint-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-2);
}

.laser-endpoint-row input {
  min-width: 0;
  min-height: var(--cta-height);
}

/* "Probar" states; the class names come from LaserLabels.TestClass. */
.laser-test {
  min-width: 7.5rem;
  min-height: var(--cta-height);
  white-space: nowrap;
  transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease;
}

.laser-test.is-testing,
.laser-test.is-testing:disabled {
  background: var(--warning-soft);
  border-color: var(--warning);
  color: var(--warning);
  opacity: 1;
}

.laser-test.is-ok {
  background: var(--safe);
  border-color: var(--safe);
  color: #ffffff;
}

.laser-test.is-ok:hover:not(:disabled) {
  border-color: var(--safe);
}

.laser-test.is-fail {
  background: var(--lost);
  border-color: var(--lost);
  color: #ffffff;
}

.laser-test.is-fail:hover:not(:disabled) {
  border-color: var(--lost);
}

/* Plate dimensions: three numbers in one row, hole side + "Guardar placa", derived QR/cross line. */
.laser-plate {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  border: 0;
  min-width: 0;
}

.laser-plate legend {
  padding: 0;
  font-size: var(--text-sm);
  font-weight: 600;
}

.laser-plate-dims {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-2);
}

.laser-plate-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-2);
  align-items: end;
}

.laser-plate-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  min-width: 0;
}

.laser-plate-field span {
  font-size: var(--text-sm);
  font-weight: 600;
}

.laser-plate-field small {
  font-weight: 400;
  color: var(--text-muted);
}

.laser-plate-field input,
.laser-plate-field select,
.laser-plate-save {
  min-width: 0;
  min-height: var(--cta-height);
}

.laser-plate-field input {
  font-variant-numeric: tabular-nums;
}

.laser-plate-save {
  white-space: nowrap;
}

.laser-plate-layout {
  color: var(--text-muted);
}

/* Status block: the only place for connection results, warnings, progress and the last outcome. */
.laser-state {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  background: var(--inactive-soft);
  border-radius: var(--radius-md);
}

.laser-state.is-running {
  background: var(--accent-soft);
}

.laser-state.is-ok {
  background: var(--safe-soft);
}

.laser-state.is-error {
  background: var(--lost-soft);
}

.laser-state-title {
  font-size: var(--text-sm);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
}

.laser-state .progress-track {
  height: 10px;
  background: var(--surface);
}

.laser-phase {
  font-weight: 700;
}

.laser-meta {
  font-size: var(--text-sm);
  overflow-wrap: anywhere;
}

.laser-ok {
  color: var(--safe);
  font-weight: 600;
}

.laser-error {
  color: var(--lost);
  font-weight: 600;
}

.laser-warning {
  color: var(--warning);
  font-weight: 600;
}

.laser-steps {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding-left: var(--space-5);
  color: var(--text);
}

.laser-actions {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-2);
}

.laser-actions .btn,
.laser-unlock {
  width: 100%;
  min-height: var(--cta-height);
}

@media (min-width: 480px) {
  .laser-actions {
    grid-template-columns: 1fr 1fr;
  }
}