/* Titanor UI Contract — foundation shared by CRUD, Flow and Decision surfaces. */
:root {
  --ui-space-description: 6px;
  --ui-space-control: 8px;
  --ui-space-choice: 8px;
  --ui-space-field: 20px;
  --ui-space-column: 16px;
  --ui-space-section: 32px;
  --ui-space-summary-actions: 22px;
  --ui-page-inline: clamp(16px, 2.4vw, 32px);
  --ui-page-max: 1240px;
  --ui-reading-max: 72ch;
  --ui-form-max: 980px;
  --ui-type-page-title: clamp(2rem, 4vw, 2.75rem);
  --ui-type-section-title: clamp(1.2rem, 2vw, 1.45rem);
  --ui-type-subsection-title: 1rem;
  --ui-type-body: 1rem;
  --ui-type-helper: .84rem;
  --ui-type-label: .88rem;
  --ui-type-value: clamp(1.3rem, 2.5vw, 1.85rem);
  --ui-weight-body: 400;
  --ui-weight-emphasis: 500;
  --ui-weight-title: 600;
  --ui-focus-ring: 0 0 0 3px color-mix(in srgb, var(--brand) 28%, transparent);
}

/* Rhythm: the parent owns spacing; children do not add external margins. */
.ui-page,
.ui-content-section,
.ui-form,
.ui-form-section,
.ui-field-stack,
.ui-repeatable-collection,
.ui-summary-panel,
.ui-empty-state,
.ui-error-state {
  min-width: 0;
  margin: 0;
}

.ui-page > *,
.ui-content-section > *,
.ui-form > *,
.ui-form-section > *,
.ui-field-stack > *,
.ui-repeatable-collection > *,
.ui-summary-panel > * {
  margin-block: 0;
}

.ui-page {
  width: min(100%, var(--ui-page-max));
  display: grid;
  gap: var(--ui-space-section);
  padding-inline: var(--ui-page-inline);
  margin-inline: auto;
}

.ui-page-header,
.ui-section-header {
  min-width: 0;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--ui-space-column);
  margin: 0;
}

.ui-page-header > div,
.ui-section-header > div {
  min-width: 0;
  display: grid;
  gap: var(--ui-space-description);
}

.ui-page-header :is(h1, p),
.ui-section-header :is(h2, p) { margin: 0; }
.ui-page-title { font-size: var(--ui-type-page-title); font-weight: var(--ui-weight-title); line-height: 1.08; letter-spacing: -.035em; }
.ui-page-description { max-width: var(--ui-reading-max); color: var(--muted); font-size: var(--ui-type-body); font-weight: var(--ui-weight-body); }
.ui-section-title { font-size: var(--ui-type-section-title); font-weight: var(--ui-weight-title); line-height: 1.2; }
.ui-section-description { max-width: var(--ui-reading-max); color: var(--muted); font-size: var(--ui-type-helper); }
.ui-subsection-title { font-size: var(--ui-type-subsection-title); font-weight: var(--ui-weight-title); }
.ui-body-text { font-size: var(--ui-type-body); font-weight: var(--ui-weight-body); }
.ui-helper-text { color: var(--muted); font-size: var(--ui-type-helper); font-weight: var(--ui-weight-body); }
.ui-primary-value { font-size: var(--ui-type-value); font-weight: var(--ui-weight-title); font-variant-numeric: tabular-nums; }
.ui-secondary-value { color: var(--muted); font-size: var(--ui-type-helper); font-weight: var(--ui-weight-emphasis); }
.ui-button-text,
[data-ui-contract] :is(button, .button) { font-weight: var(--ui-weight-emphasis); }
.ui-link-text,
[data-ui-contract] a:not(.button) { font-weight: var(--ui-weight-emphasis); text-underline-offset: .18em; }
.ui-badge-text,
[data-ui-contract] .badge { font-size: var(--ui-type-helper); font-weight: var(--ui-weight-emphasis); }
.ui-table-header,
[data-ui-contract] th { font-size: var(--ui-type-label); font-weight: var(--ui-weight-emphasis); }
.ui-table-cell,
[data-ui-contract] td { font-size: var(--ui-type-body); font-weight: var(--ui-weight-body); }

.ui-content-section,
.ui-form-section {
  display: grid;
  gap: var(--ui-space-field);
}

.ui-form {
  width: min(100%, var(--ui-form-max));
  display: grid;
  gap: var(--ui-space-section);
}

.ui-field-grid {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--ui-space-field) var(--ui-space-column);
}

.ui-field-grid > .ui-field-wide,
.ui-field-grid > .full { grid-column: 1 / -1; }

.ui-field,
.ui-field-stack {
  min-width: 0;
  display: grid;
  gap: var(--ui-space-control);
}

.ui-field > label,
.ui-field > span:first-child,
.ui-field-label {
  color: var(--ink);
  font-size: var(--ui-type-label);
  font-weight: var(--ui-weight-emphasis);
}

.ui-choice-list {
  min-width: 0;
  display: grid;
  gap: var(--ui-space-choice);
  padding: 0;
  margin: 0;
  list-style: none;
}
fieldset.ui-choice-list { border: 0; }
.ui-choice-list > legend { padding: 0; margin-bottom: var(--ui-space-control); }
.ui-choice-list > .checkbox-row,
.ui-field > .checkbox-row { gap: var(--ui-space-control); min-height: var(--control-target); }
.ui-choice-list > .checkbox-row { justify-content: start; }
.ui-choice-list input[type="checkbox"],
.ui-field > .checkbox-row input[type="checkbox"],
.form-grid label > input[type="checkbox"],
.attendance-choice input[type="checkbox"],
.attendance-choice-list input[type="checkbox"],
.payment-options input[type="checkbox"] {
  flex: 0 0 20px;
  width: 20px;
  height: 20px;
  min-height: 20px;
  margin: 0;
}
.quick-choice-list input[type="radio"] { flex: 0 0 20px; width: 20px; height: 20px; min-height: 20px; margin: 0; }
.form-grid label:has(> input[type="checkbox"]):not(.configuration-switch),
.payment-options label {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--ui-space-control);
  min-height: var(--control-target);
  cursor: pointer;
}
.form-grid label > input[type="checkbox"] { order: -1; }
.ui-field > .checkbox-row input[type="checkbox"] { order: -1; }
.form-grid label:has(> input[type="checkbox"]) > small { flex-basis: 100%; }
.compact-fields input[name="year"] { --ui-control-max: 12ch; width: min(100%, var(--ui-control-max)); }
.form-grid > label { align-content: start; }
.attendance-form-field input[type="number"],
.ui-field input[type="number"] { --ui-control-max: 16ch; width: min(100%, var(--ui-control-max)); max-width: var(--ui-control-max); }

.ui-repeatable-collection { display: grid; gap: var(--ui-space-field); }
.ui-repeatable-list { display: grid; gap: var(--ui-space-column); }
.ui-repeatable-add { justify-self: start; }

.ui-list-toolbar,
.ui-actions,
.ui-form-actions {
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: var(--ui-space-control);
  margin: 0;
}

.ui-list-toolbar { justify-content: space-between; }
.ui-filter-panel { min-width: 0; display: grid; gap: var(--ui-space-column); }
.ui-data-list { min-width: 0; overflow-x: auto; }
.ui-summary-panel { display: grid; gap: var(--ui-space-summary-actions); }

.ui-empty-state,
.ui-error-state {
  display: grid;
  gap: var(--ui-space-description);
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface-soft);
}

.ui-error-state {
  color: var(--state-danger-text);
  background: var(--state-danger-surface);
  border-color: color-mix(in srgb, var(--state-danger-text) 30%, transparent);
}

.ui-feedback { margin: 0; }
.ui-sticky-actions { position: sticky; z-index: 8; bottom: 12px; padding: 12px; background: color-mix(in srgb, var(--card) 94%, transparent); border: 1px solid var(--line); border-radius: var(--radius-md); }
.ui-mobile-action-bar { display: none; }

.ui-modal,
.ui-drawer {
  max-width: min(92vw, 680px);
  max-height: min(88dvh, 760px);
  padding: 0;
  color: var(--ink);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
}
.ui-modal::backdrop,
.ui-drawer::backdrop { background: rgba(2, 8, 18, .68); }
.ui-modal-body,
.ui-drawer-body { min-width: 0; display: grid; gap: var(--ui-space-field); padding: 20px; }
.ui-drawer { width: min(92vw, 420px); height: 100dvh; max-height: 100dvh; margin: 0 0 0 auto; border-radius: var(--radius-lg) 0 0 var(--radius-lg); }
.ui-lab-type { display: grid; gap: var(--ui-space-control); }
.ui-lab { --ui-form-max: 1080px; }
.ui-lab-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--ui-space-column); }

[data-ui-hx-state][aria-busy="true"] { opacity: .68; cursor: progress; }
[data-ui-bar-value] { height: max(6px, var(--bar-value, 8%)); }

/* Flow pilot: Atendimento Rápido, using the shared rhythm and type roles. */
.quick-intake { max-width: 980px; }
.quick-intake .sales-form-section + .sales-form-section { margin-top: 0; }
.quick-choice-list ul { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--ui-space-choice); margin: 0; padding: 0; list-style: none; }
.quick-choice-list li { min-width: 0; }
.quick-choice-list label { min-height: var(--control-target); display: flex; align-items: center; gap: var(--ui-space-control); padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface-soft); cursor: pointer; }
.quick-choice-list input { width: auto; margin: 0; }
.quick-choice-list > span { font-size: var(--ui-type-label); font-weight: var(--ui-weight-emphasis); }
.quick-helper { margin: 0; color: var(--muted); font-size: var(--ui-type-helper); }
.quick-hidden { display: none !important; }
.quick-review { max-width: 900px; }
.quick-review-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--ui-space-column); }
.quick-review-grid article { min-width: 0; display: grid; gap: var(--ui-space-description); padding: 16px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--card); }
.quick-review-grid article.full { grid-column: 1 / -1; }
.quick-review-grid span { color: var(--muted); font-size: var(--ui-type-helper); font-weight: var(--ui-weight-emphasis); text-transform: uppercase; letter-spacing: .04em; }
.quick-review-grid strong { overflow-wrap: anywhere; font-weight: var(--ui-weight-title); }
.quick-review-grid p { color: var(--muted); }
.quick-chain { display: grid; grid-template-columns: 1fr auto 1fr; align-items: stretch; gap: var(--ui-space-column); }
.quick-chain article { display: grid; gap: var(--ui-space-description); padding: 16px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface-soft); }
.quick-chain > span { align-self: center; color: var(--brand); font-size: 1.4rem; }

[data-ui-contract] :is(a, button, input, select, textarea, summary):focus-visible {
  outline: 2px solid transparent;
  box-shadow: var(--ui-focus-ring);
}
[data-ui-contract] :is(input, select, textarea)[aria-invalid="true"] {
  border-color: var(--state-danger-text);
}

@media (max-width: 768px) {
  :root {
    --ui-space-field: 16px;
    --ui-space-section: 24px;
  }
  .ui-page { padding-inline: 16px; }
  .ui-page-header,
  .ui-section-header { align-items: stretch; flex-direction: column; }
  .ui-field-grid { grid-template-columns: 1fr; }
  .ui-lab-grid { grid-template-columns: 1fr; }
  .ui-field-grid > .ui-field-wide,
  .ui-field-grid > .full { grid-column: auto; }
  .ui-actions,
  .ui-form-actions { align-items: stretch; flex-direction: column-reverse; }
  .ui-actions > *,
  .ui-form-actions > * { width: 100%; text-align: center; }
  .ui-mobile-action-bar {
    position: sticky;
    z-index: 9;
    bottom: 0;
    display: grid;
    gap: var(--ui-space-control);
    padding: 10px max(16px, env(safe-area-inset-right)) max(10px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
    background: var(--card);
    border-top: 1px solid var(--line);
  }
  .quick-choice-list ul,
  .quick-review-grid,
  .quick-chain { grid-template-columns: 1fr; }
  .quick-review-grid article.full { grid-column: auto; }
  .quick-chain > span { transform: rotate(90deg); justify-self: center; }
}

@media (max-width: 390px) {
  .ui-page { padding-inline: 16px; }
  .ui-page-title { font-size: clamp(1.7rem, 9vw, 2.1rem); }
}

@media (min-width: 1440px) {
  .ui-page { --ui-page-inline: 32px; }
}

/* Deleted formset rows stay hidden when their work layout uses grid/flex. */
.assisted-sale-item-row[hidden],
.commercial-item-row[hidden],
.service-order-item-row[hidden] { display: none !important; }