/*
  impeccable direction contract
  THESIS: a field point-of-sale tool refuses the dashboard-card look; every
  screen is one clear task, sized for a thumb, readable in sun glare.
  OWN-WORLD: restrained palette, one deep teal accent (river water) on warm
  paper neutrals; system sans at a fixed rem scale; payment/ticket-type/size
  pickers are large tap-target segmented groups, never dropdowns.
  STORY: a seller opens "Nova venda", picks payment with one tap, fills
  buyer + tickets, and the line keeps moving.
  FIRST VIEWPORT: sales#new — buyer fields, then a segmented payment picker,
  then ticket rows, primary action pinned full-width at the bottom.
  FORM: restrained/Operate mode, no concept round (Operate + small internal
  tool; full concept-seed/decision-page ceremony judged disproportionate to
  scope and stated explicitly to the user).
  FINISH: unreviewed and undocumented is unfinished; this build ends with
  the finish review, the verdict, DESIGN.md, and every shipping raster
  carrying its provenance. (No screenshot tool available in this
  environment — finish review is a careful CSS read, not a captured
  comparison; disclosed to the user, not silently skipped.)
*/

:root {
  --color-bg: #faf8f4;
  --color-surface: #ffffff;
  --color-surface-sunken: #f1ede4;
  --color-border: #ddd6c7;
  --color-border-strong: #c3b89f;

  --color-text: #241f16;
  --color-text-secondary: #5c5343;
  --color-text-on-accent: #ffffff;

  --color-accent: #0f5c52;
  --color-accent-strong: #0a4038;
  --color-accent-tint: #e3efec;

  --color-success: #1a7f37;
  --color-success-tint: #e6f4ea;
  --color-warning: #b45309;
  --color-warning-tint: #fdf1e3;
  --color-danger: #b91c1c;
  --color-danger-tint: #fbe9e9;
  --color-info: #1d5fa8;
  --color-info-tint: #e7f0fa;

  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --step--1: 0.875rem;
  --step-0: 1rem;
  --step-1: 1.125rem;
  --step-2: 1.375rem;
  --step-3: 1.75rem;

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;

  --radius: 10px;
  --radius-sm: 6px;
  --touch-target: 48px;

  --shadow-1: 0 1px 2px rgba(36, 31, 22, 0.06), 0 1px 1px rgba(36, 31, 22, 0.04);
  --shadow-2: 0 4px 12px rgba(36, 31, 22, 0.08), 0 2px 4px rgba(36, 31, 22, 0.06);
}

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

html {
  -webkit-text-size-adjust: 100%;
  accent-color: var(--color-accent);
}

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--step-0);
  line-height: 1.5;
  color: var(--color-text);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
}

::selection { background: var(--color-accent); color: var(--color-text-on-accent); }

a { color: var(--color-accent); text-decoration-thickness: 1.5px; text-underline-offset: 2px; }
a:hover { color: var(--color-accent-strong); }

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

h1, h2, h3 {
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.2;
  margin: 0 0 var(--space-4);
}
h1 { font-size: var(--step-3); }
h2 { font-size: var(--step-2); margin-top: var(--space-6); }
h3 { font-size: var(--step-1); }

p { margin: 0 0 var(--space-3); max-width: 65ch; }

/* ---------- Layout shell ---------- */

.page {
  max-width: 640px;
  margin: 0 auto;
  padding: var(--space-4) var(--space-4) var(--space-7);
}

/* O formulário de venda nasceu pro celular; no computador as telas de mesa
   ganham largura em vez de empilhar tudo numa coluna de 640px. */
.page--form { max-width: 760px; }
.page--wide { max-width: 1080px; }
.page--full { max-width: 1480px; }

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  position: sticky;
  top: 0;
  z-index: 10;
}

.topbar__brand {
  font-weight: 700;
  font-size: var(--step-1);
  color: var(--color-text);
  text-decoration: none;
}

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

.topbar__nav a,
.topbar__nav button {
  font-size: var(--step--1);
  color: var(--color-text-secondary);
  text-decoration: none;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
}

.topbar__nav a:hover { background: var(--color-surface-sunken); color: var(--color-text); }

/* ---------- Flash ---------- */

.flash {
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-sm);
  margin: 0 0 var(--space-4);
  font-size: var(--step--1);
  font-weight: 600;
}
.flash--notice { background: var(--color-success-tint); color: var(--color-success); }
.flash--alert { background: var(--color-danger-tint); color: var(--color-danger); }

/* ---------- Forms ---------- */

.field {
  display: block;
  margin: 0 0 var(--space-4);
}

.field__label {
  display: block;
  font-size: var(--step--1);
  font-weight: 600;
  color: var(--color-text-secondary);
  margin-bottom: var(--space-2);
}

.field__hint {
  display: block;
  font-size: var(--step--1);
  color: var(--color-text-secondary);
  font-weight: 400;
  margin-top: var(--space-1);
}

input[type="text"],
input[type="tel"],
input[type="number"],
input[type="email"],
input[type="password"],
select,
textarea {
  width: 100%;
  min-height: var(--touch-target);
  padding: var(--space-3);
  font-size: var(--step-0);
  font-family: inherit;
  color: var(--color-text);
  background: var(--color-surface);
  border: 1.5px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  appearance: none;
}

textarea { min-height: 5rem; resize: vertical; }

input:focus, select:focus, textarea:focus {
  border-color: var(--color-accent);
  outline: 3px solid var(--color-accent-tint);
  outline-offset: 0;
}

input::placeholder { color: var(--color-text-secondary); opacity: 0.7; }

select {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%235c5343'><path fill-rule='evenodd' d='M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z' clip-rule='evenodd'/></svg>");
  background-repeat: no-repeat;
  background-position: right var(--space-3) center;
  padding-right: var(--space-6);
}

/* Segmented tap-target picker: a <label> wraps its <input> directly (no
   id/for pair), so rows can be cloned by JS without colliding IDs. Works
   with no JS, degrades to plain radios if this stylesheet fails to load. */
.picker {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.picker__option {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: var(--touch-target);
  padding: var(--space-2) var(--space-4);
  border: 1.5px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-text);
  font-weight: 600;
  font-size: var(--step--1);
  text-align: center;
  cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
}

.picker__option input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}

.picker__option:has(input:checked) {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-text-on-accent);
}

.picker__option:has(input:focus-visible) {
  outline: 3px solid var(--color-accent);
  outline-offset: 2px;
}

/* ---------- Buttons ---------- */

.btn,
input[type="submit"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: var(--touch-target);
  padding: var(--space-3) var(--space-5);
  font-family: inherit;
  font-size: var(--step-0);
  font-weight: 700;
  color: var(--color-text-on-accent);
  background: var(--color-accent);
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  text-decoration: none;
  transition: background 120ms ease, transform 120ms ease;
}

.btn:hover, input[type="submit"]:hover { background: var(--color-accent-strong); }
.btn:active, input[type="submit"]:active { transform: scale(0.98); }
.btn:disabled, input[type="submit"]:disabled { background: var(--color-border-strong); cursor: not-allowed; }

.btn--block, input[type="submit"] { width: 100%; }

.btn--secondary {
  background: var(--color-surface);
  color: var(--color-text);
  border: 1.5px solid var(--color-border-strong);
}
.btn--secondary:hover { background: var(--color-surface-sunken); }

.btn--danger { background: var(--color-danger); }
.btn--danger:hover { background: #8f1616; }

.btn--sm { min-height: 36px; padding: var(--space-2) var(--space-4); font-size: var(--step--1); }

/* ---------- Cards / lists ---------- */

.card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: var(--space-5);
  box-shadow: var(--shadow-1);
  margin-bottom: var(--space-4);
}

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

.list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }

.list-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  text-decoration: none;
  color: inherit;
}

.list-item:hover { border-color: var(--color-border-strong); }

/* ---------- Badges / status ---------- */

.badge {
  display: inline-flex;
  align-items: center;
  padding: var(--space-1) var(--space-3);
  border-radius: 999px;
  font-size: var(--step--1);
  font-weight: 700;
}

.badge--success { background: var(--color-success-tint); color: var(--color-success); }
.badge--warning { background: var(--color-warning-tint); color: var(--color-warning); }
.badge--danger { background: var(--color-danger-tint); color: var(--color-danger); }
.badge--info { background: var(--color-info-tint); color: var(--color-info); }
.badge--neutral { background: var(--color-surface-sunken); color: var(--color-text-secondary); }

/* ---------- Ticket rows (sales/new) ---------- */

.ticket-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-2);
  padding: var(--space-4);
  background: var(--color-surface-sunken);
  border-radius: var(--radius-sm);
  margin-bottom: var(--space-3);
}

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

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

.remove-ticket-row {
  justify-self: start;
}

#add-ticket-row {
  margin-bottom: var(--space-5);
}

/* ---------- Sale summary ---------- */

.summary-row {
  display: flex;
  justify-content: space-between;
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--color-border);
  font-size: var(--step--1);
}
.summary-row:last-child { border-bottom: none; }
.summary-row dt { color: var(--color-text-secondary); }
.summary-row dd { margin: 0; font-weight: 600; }

/* ---------- Sales table (sales_overview#index) ---------- */

.sales-table-filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}

.sales-table-filters__search {
  flex: 1 1 220px;
}

.sales-table-filters select {
  width: auto;
  min-width: 160px;
  flex: 1 1 auto;
}

.sales-table-count {
  margin-bottom: var(--space-3);
  font-size: var(--step--1);
}

.sales-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface);
}

.sales-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--step--1);
  white-space: nowrap;
}

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

.sales-table thead th {
  cursor: pointer;
  user-select: none;
  color: var(--color-text-secondary);
  font-weight: 700;
  background: var(--color-surface-sunken);
  position: sticky;
  top: 0;
  z-index: 1;
}

/* Lista de passageiros quebra linha: sem isso a coluna vira a mais larga da
   tabela e empurra o resto pra fora da tela. */
.sales-table__tickets-cell { white-space: normal; min-width: 18rem; }

/* No computador a tabela rola dentro da própria caixa: o cabeçalho fica fixo
   e a barra de rolagem horizontal fica à vista, sem descer até o fim da lista. */
@media (min-width: 900px) {
  .sales-table-wrap { max-height: calc(100vh - 16rem); overflow: auto; }
}

.sales-table thead th[data-sort-direction="asc"]::after { content: " \25B2"; }
.sales-table thead th[data-sort-direction="desc"]::after { content: " \25BC"; }

.sales-table tbody tr:hover { background: var(--color-surface-sunken); }

.sales-table td { vertical-align: top; }

.sales-table__tickets {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-1);
}

/* ---------- Utility ---------- */

.text-secondary { color: var(--color-text-secondary); }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.text-center { text-align: center; }
.mt-0 { margin-top: 0; }
.qr-code { max-width: 260px; width: 100%; height: auto; display: block; margin: 0 auto var(--space-4); border-radius: var(--radius-sm); border: 1px solid var(--color-border); }

@media (min-width: 640px) {
  .page { padding-top: var(--space-6); }
}

/* ---------- Atribuição de ingressos (/atribuicoes) ---------- */

.allocation-item {
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-2);
}

.allocation-item__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2);
}

.allocation-stats {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.allocation-release {
  display: flex;
  gap: var(--space-2);
}

.allocation-release input[type="text"] {
  flex: 1;
  min-width: 0;
}

/* ---------- Layouts de duas colunas (telas largas) ---------- */

.form-grid { display: grid; column-gap: var(--space-4); }

@media (min-width: 720px) {
  .form-grid { grid-template-columns: 1fr 1fr; }
}

@media (min-width: 900px) {
  .split {
    display: grid;
    grid-template-columns: 340px minmax(0, 1fr);
    gap: var(--space-6);
    align-items: start;
  }
  .split--detail { grid-template-columns: minmax(0, 1fr) 360px; }
  /* Só o formulário curto de atribuição acompanha a rolagem; o painel do Pix
     (QR + copia-e-cola) pode passar da altura da tela. */
  .split:not(.split--detail) > .split__aside { position: sticky; top: 5rem; }
  .split > * > h2:first-child { margin-top: 0; }
}

/* ---------- Painel do organizador ---------- */

.seat-summary__stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-4);
  margin: 0 0 var(--space-4);
}

.seat-stat dt {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--step--1);
  color: var(--color-text-secondary);
}

.seat-stat dd {
  margin: var(--space-1) 0 0;
  font-size: var(--step-2);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.seat-stat__of { font-size: var(--step--1); font-weight: 600; color: var(--color-text-secondary); }

.seat-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.seat-dot--paid { background: var(--color-accent); }
.seat-dot--pending { background: var(--color-warning); }
.seat-dot--free { background: var(--color-surface-sunken); border: 1px solid var(--color-border-strong); }

.seat-meter {
  display: flex;
  height: 12px;
  border-radius: 999px;
  overflow: hidden;
  background: var(--color-surface-sunken);
  border: 1px solid var(--color-border);
}
.seat-meter__bar--paid { background: var(--color-accent); }
.seat-meter__bar--pending { background: var(--color-warning); }

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

@media (min-width: 860px) {
  .seat-summary__stats { grid-template-columns: repeat(4, 1fr); }
  .dash-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: var(--space-6);
    align-items: start;
  }
}

/* Prévia do vendedor sob o campo de número em /registro. */
.seller-lookup {
  grid-column: 1 / -1;
  font-weight: 600;
  color: var(--color-text);
}