@layer modules {
  /* ── Order status card (tela /orders/:token) ────── */
  .order-status {
    --tone: var(--color-info);
    display: flex;
    align-items: flex-start;
    gap: var(--space-md);
    padding: var(--space-md) var(--space-lg);
    margin-block: var(--space-md) var(--space-lg);
    background: color-mix(in oklch, var(--tone) 8%, var(--color-canvas));
    border: 1.5px solid color-mix(in oklch, var(--tone) 35%, var(--color-ink-border));
    border-radius: var(--radius-lg);
    box-shadow: 0 4px 14px color-mix(in oklch, var(--tone) 15%, transparent);
  }

  .order-status__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    background: var(--tone);
    color: white;
    font-size: 1.15rem;
    line-height: 1;
    box-shadow: 0 2px 8px color-mix(in oklch, var(--tone) 45%, transparent);
  }

  .order-status__content {
    flex: 1;
    min-width: 0;
  }

  .order-status__title {
    font-family: var(--font-display);
    font-size: clamp(1.15rem, 3vw, 1.45rem);
    font-weight: 800;
    letter-spacing: -0.005em;
    color: var(--tone);
    margin: 0 0 0.25rem;
    text-transform: uppercase;
    line-height: 1.1;
  }

  .order-status__body {
    margin: 0;
    color: var(--color-ink);
    font-size: var(--text-small);
    line-height: var(--leading-relaxed);
  }

  .order-status--pending  { --tone: var(--color-accent, #BA7517); }
  .order-status--active   { --tone: var(--color-info,   #185FA5); }
  .order-status--success  { --tone: var(--color-primary,#1D9E75); }
  .order-status--danger   { --tone: var(--color-danger, #C8161F); }

  /* ── Order hero — scoreboard header ────────────── */
  .order-hero {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: var(--space-2xl);
    position: relative;

    &::after {
      content: "";
      position: absolute;
      bottom: -0.6rem;
      left: 0;
      width: 3.5rem;
      height: 0.18rem;
      background: var(--page-accent);
      transform: skewX(-14deg);
      border-radius: 1px;
    }
  }

  .order-hero__label {
    font-size: var(--text-xs);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--color-ink-secondary);
  }

  .order-hero__number {
    font-family: var(--font-display);
    font-size: clamp(2.5rem, 11vw, 4.5rem);
    font-weight: 800;
    letter-spacing: -0.005em;
    line-height: 0.9;
    color: var(--color-ink);
    text-transform: uppercase;
  }

  /* Public order pages (bg-pedido) sit on dark overlay — invert colors */
  body.bg-pedido .order-hero__label { color: var(--on-dark-text-muted); }
  body.bg-pedido .order-hero__number {
    color: var(--on-dark-text);
    text-shadow: 0 2px 12px oklch(0% 0 0 / 0.5);
  }

  .order-hero__right {
    padding-bottom: 0.3rem;
  }

  /* ── Order card — match sheet ──────────────────── */
  .order-card {
    border: 2.5px solid var(--color-navy);
    border-radius: var(--radius-lg);
    overflow: hidden;
    margin-bottom: var(--space-xl);
    background: var(--color-canvas);
  }

  .order-card__header {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-sm) var(--space-md);
    background: var(--color-navy);
    color: white;

    &::after {
      content: "";
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      width: 4.5rem;
      background: var(--page-accent);
      clip-path: polygon(35% 0, 100% 0, 100% 100%, 0 100%);
    }

    & h2 {
      font-size: var(--text-small);
      font-weight: 900;
      text-transform: uppercase;
      letter-spacing: 0.06em;
    }
  }

  .order-card__count {
    position: relative;
    z-index: 1;
    background: oklch(100% 0 0 / 0.2);
    padding: 0.15em 0.6em;
    border-radius: var(--radius-pill);
    font-size: var(--text-xs);
    font-weight: 800;
  }

  .order-card__body {
    padding: 0;
  }

  .order-card__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-sm) var(--space-md);
    font-size: var(--text-small);

    & + & { border-top: 0.5px solid var(--color-ink-border); }
  }

  .order-card__row--total {
    background: var(--color-canvas-alt);
  }

  .order-card__label {
    font-weight: 700;
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-ink-secondary);
  }

  .order-card__value {
    font-weight: 700;
  }

  .order-card__value--total {
    font-size: var(--text-large);
    font-weight: 900;
    letter-spacing: -0.02em;
    color: var(--page-accent);
  }

  .order-card__vendor-link {
    display: inline-flex;
    align-items: center;
    gap: 0.4em;
    color: inherit;
    font-weight: 700;
    text-decoration: none;
    transition: color var(--duration-fast) ease;

    @media (any-hover: hover) {
      &:hover { color: var(--color-primary); }
    }
  }

  .order-card__vendor-wa {
    width: 1rem;
    height: 1rem;
    flex-shrink: 0;
    color: #25D366;
  }

  .order-card__code {
    font-family: inherit;
    font-weight: 800;
    font-size: var(--text-xs);
    letter-spacing: 0.05em;
    background: var(--color-canvas-alt);
    padding: 0.2em 0.5em;
    border-radius: var(--radius-sm);
  }

  /* ── Order card items ──────────────────────────── */
  .order-card__item {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-sm) var(--space-md);

    & + & { border-top: 0.5px solid var(--color-ink-border); }
  }

  .order-card__product-icon {
    width: var(--size-sticker-number);
    height: var(--size-sticker-number);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-canvas-alt);
    font-size: var(--text-normal);
    flex-shrink: 0;
  }

  .order-card__item-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.1em;

    & strong {
      font-size: var(--text-small);
      font-weight: 700;
    }
  }

  .order-card__item-qty {
    font-size: var(--text-xs);
    color: var(--color-ink-secondary);
  }

  .order-card__item-price {
    font-weight: 800;
    font-size: var(--text-small);
    flex-shrink: 0;
    letter-spacing: -0.01em;
  }

  /* ── Rate CTA ──────────────────────────────────── */
  .order-rate {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-md);
    border: 1.5px solid var(--color-ink-border);
    border-radius: var(--radius-lg);
    margin-top: var(--space-xl);
    background: var(--color-canvas);

    & h3 { font-size: var(--text-small); font-weight: 800; }
  }

  .order-rate__icon {
    font-size: 1.5rem;
    flex-shrink: 0;
  }

  .order-rate--done {
    background: var(--color-canvas-alt);
  }

  /* legacy — keep for other pages */
  .order-details {
    display: grid;
    grid-template-columns: 7rem 1fr;
    gap: var(--space-xs) var(--space-md);
    font-size: var(--text-small);

    @media (min-width: 1024px) {
      grid-template-columns: 9rem 1fr;
    }

    & dt {
      font-weight: 700;
      font-size: var(--text-xs);
      text-transform: uppercase;
      letter-spacing: 0.04em;
      color: var(--color-ink-secondary);
      padding-top: 0.15em;
    }

    & dd { font-weight: 600; }
  }

  .rating-stars {
    display: flex;
    gap: var(--space-sm);
    margin-block: var(--space-sm);
  }

  .rating-star {
    cursor: pointer;
    font-size: var(--text-xlarge);

    & input[type="radio"] {
      position: absolute;
      opacity: 0;
      width: 0;
      height: 0;
      min-height: 0;
    }

    & span {
      transition: transform var(--duration-fast) ease;
    }

    @media (any-hover: hover) {
      &:hover span { transform: scale(1.2); }
    }
  }

  /* Pix payment */
  .pix-payment {
    text-align: center;
    padding: var(--space-xl);
    max-width: 28rem;
    margin-inline: auto;
  }

  .pix-status {
    font-size: var(--text-small);
    color: var(--color-ink-secondary);
    margin-top: var(--space-md);
  }

  .pix-status--confirmed {
    color: var(--color-primary);
    font-weight: 700;
  }

  /* ── Order show — tighter spacing ──────────────── */
  .page-order-show .section {
    margin-block: var(--space-md);
  }

  .page-order-show .order-hero {
    margin-bottom: var(--space-lg);
  }

  .page-order-show .order-card {
    margin-bottom: var(--space-md);
  }

  .page-order-show .order-card__header {
    padding-block: var(--space-xs);
  }

  .page-order-show .order-card__row,
  .page-order-show .order-card__item {
    padding-block: var(--space-xs);
  }

  .page-order-show .order-confirmed__notice {
    padding: var(--space-sm) var(--space-md);
  }

  .page-order-show .order-confirmed__store {
    padding: var(--space-md);
    margin-top: var(--space-md);
  }

  .page-order-show .order-confirmed__store-sub {
    margin-bottom: var(--space-sm);
  }

  /* ── Panel orders page ─────────────────────────── */
  .orders-page {
    --page-accent: var(--color-primary);
    max-width: 36rem;
    margin-inline: auto;
  }

  .orders-page--wide {
    max-width: 64rem;
  }

  .orders-page--order {
    --page-accent: var(--color-info);
    border-top: 3px solid var(--color-info);
    padding-top: var(--space-md);
  }

  .orders-page--proposal {
    --page-accent: var(--color-accent);
    border-top: 3px solid var(--color-accent);
    padding-top: var(--space-md);
  }

  .orders-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    margin-top: var(--space-md);
  }

  /* ── Order row (index) ─────────────────────────── */
  .order-row {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: 0.65rem 0.75rem;
    border: 1.5px solid var(--color-ink-border);
    border-radius: var(--radius-md);
    background: var(--color-canvas);
    text-decoration: none;
    color: inherit;
    transition: transform var(--duration-fast) var(--ease-out),
                box-shadow var(--duration-fast) ease,
                border-color var(--duration-fast) ease;

    @media (any-hover: hover) {
      &:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 12px oklch(0% 0 0 / 0.08);
        border-color: color-mix(in oklch, var(--color-primary) 30%, var(--color-ink-border));
      }
    }

    &:active { transform: translateY(0); }

    @media (min-width: 640px) {
      padding: 0.75rem var(--space-md);
    }
  }

  /* Status-specific hover colors */
  .order-row--awaiting_shipment {
    @media (any-hover: hover) {
      &:hover { border-color: color-mix(in oklch, var(--color-accent) 40%, var(--color-ink-border)); }
    }
  }

  .order-row--shipped {
    @media (any-hover: hover) {
      &:hover { border-color: color-mix(in oklch, var(--color-primary) 40%, var(--color-ink-border)); }
    }
  }

  .order-row--delivered {
    @media (any-hover: hover) {
      &:hover { border-color: color-mix(in oklch, var(--color-success) 40%, var(--color-ink-border)); }
    }
  }

  .order-row--cancelled {
    opacity: 0.55;

    @media (any-hover: hover) {
      &:hover { transform: none; box-shadow: none; }
    }
  }

  .order-row--new {
    border-left: 3px solid var(--color-primary);
    background: color-mix(in oklch, var(--color-primary) 4%, var(--color-canvas));

    & .order-row__id::after {
      content: "novo";
      font-size: var(--text-caption);
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: 0.04em;
      color: var(--color-primary);
      margin-left: 0.4em;
      vertical-align: middle;
    }
  }

  /* Status icon square */
  .order-row__icon {
    width: var(--size-sticker-number);
    height: var(--size-sticker-number);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: var(--text-normal);
    line-height: 1;
    flex-shrink: 0;
  }

  .order-row__icon--separating { background: var(--color-info); }
  .order-row__icon--awaiting_shipment { background: var(--color-accent); }
  .order-row__icon--shipped { background: var(--color-primary); }
  .order-row__icon--delivered { background: var(--color-success); }
  .order-row__icon--cancelled { background: var(--color-ink-badge); }

  .order-row__body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.1em;
  }


  .order-row__id {
    font-weight: 800;
    font-size: var(--text-small);
    letter-spacing: -0.01em;
  }

  .order-row__meta {
    font-size: var(--text-xs);
    color: var(--color-ink-secondary);
  }

  .order-row__total {
    font-weight: 800;
    font-size: var(--text-small);
    flex-shrink: 0;
    letter-spacing: -0.01em;
  }

  /* ── Order show — info block ───────────────────── */
  .order-info {
    border: 1.5px solid var(--color-ink-border);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-lg);
    overflow: hidden;
    background: var(--color-canvas);
  }

  .order-info__row {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-sm) var(--space-md);
    font-size: var(--text-small);

    & + & { border-top: 0.5px solid var(--color-ink-border); }
  }

  .order-info__label {
    font-weight: 700;
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-ink-secondary);
    min-width: 5rem;
    flex-shrink: 0;
  }

  .order-info__value {
    font-weight: 600;
    flex: 1;
    display: flex;
    align-items: center;
    gap: var(--space-sm);
  }

  /* ── Order item rows (show) ────────────────────── */
  .order-item-row {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: 0.65rem 0.75rem;
    border: 1.5px solid var(--color-ink-border);
    border-radius: var(--radius-md);
    background: var(--color-canvas);
  }

  .order-item-row__product-icon {
    width: var(--size-sticker-number);
    height: var(--size-sticker-number);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-canvas-alt);
    font-size: var(--text-normal);
    flex-shrink: 0;
  }

  .order-item-row__info {
    flex: 1;
    min-width: 0;
  }

  .order-item-row__name {
    font-weight: 700;
    font-size: var(--text-small);
    line-height: var(--leading-tight);
    display: block;
  }

  .order-item-row__qty {
    font-size: var(--text-xs);
    color: var(--color-ink-secondary);
  }

  .order-item-row__price {
    font-weight: 800;
    font-size: var(--text-small);
    flex-shrink: 0;
    letter-spacing: -0.01em;
  }

  /* ── Total block ───────────────────────────────── */
  .order-total {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-md);
    margin-top: var(--space-sm);
    font-size: var(--text-small);
    color: var(--color-ink-secondary);

    & strong {
      font-size: var(--text-large);
      font-weight: 900;
      color: var(--color-ink);
      letter-spacing: -0.02em;
    }
  }

  /* ── Shipment confirmation ─────────────────────── */
  .order-ship {
    margin-top: var(--space-xl);
    padding: var(--space-md);
    border: 2px solid var(--page-accent);
    border-radius: var(--radius-lg);
    background: color-mix(in oklch, var(--page-accent) 8%, var(--color-canvas));
  }

  .order-ship__title {
    font-weight: 800;
    margin-bottom: var(--space-md);
  }

  /* ── Tracking timeline ─────────────────────────── */
  .tracking {
    margin-bottom: var(--space-xl);
    background: var(--color-canvas);
    border-radius: var(--radius-lg);
    padding: var(--space-md) var(--space-lg);
    box-shadow: var(--shadow-md);
  }

  .tracking__title {
    font-size: var(--text-small);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: var(--space-md);
  }

  .tracking__list {
    list-style: none;
    padding: 0;
    margin: 0;
  }

  .tracking__event {
    display: flex;
    gap: var(--space-md);
    padding-bottom: var(--space-md);
    position: relative;
    padding-left: 1.5rem;

    &::before {
      content: "";
      position: absolute;
      left: 0.3rem;
      top: 0.7rem;
      bottom: 0;
      width: 1.5px;
      background: var(--color-ink-border);
    }

    &:last-child::before { display: none; }
  }

  .tracking__dot {
    position: absolute;
    left: 0;
    top: 0.25rem;
    width: 0.6rem;
    height: 0.6rem;
    border-radius: 50%;
    background: var(--color-ink-border);
    flex-shrink: 0;
  }

  .tracking__event--latest .tracking__dot {
    background: var(--color-primary);
    box-shadow: 0 0 0 3px var(--color-primary-light);
  }

  .tracking__desc {
    font-size: var(--text-small);
    font-weight: 700;
    display: block;
    line-height: var(--leading-tight);
  }

  .tracking__meta {
    font-size: var(--text-xs);
    color: var(--color-ink-secondary);
  }

  .tracking-loading {
    padding: var(--space-md) 0;
  }

  /* ── Painel: link + botão de copiar lado a lado ───── */
  .order-entry {
    display: flex;
    align-items: stretch;
  }

  .order-entry .order-row {
    flex: 1;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
  }

  .order-entry__actions {
    display: flex;
  }

  .order-entry__copy {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    border: 1.5px solid var(--color-ink-border, #d6d6d6);
    border-left: none;
    border-radius: 0 var(--radius-md, 8px) var(--radius-md, 8px) 0;
    background: var(--color-canvas-alt, #f6f6f6);
    color: var(--color-ink-secondary, #555);
    cursor: pointer;
    transition: background 80ms ease, color 80ms ease;
    min-height: 44px;
    padding: 0;

    @media (any-hover: hover) {
      &:hover { background: var(--color-canvas, #fff); color: var(--color-primary, #1D9E75); }
    }

    &.copy-btn--copied {
      background: var(--color-primary, #1D9E75);
      color: #fff;
      border-color: var(--color-primary, #1D9E75);
    }
  }

  .order-row__customer {
    font-weight: 600;
    color: var(--color-ink, #111);
  }

  /* ── Admin: célula "Link público" ───── */
  .order-link-copy { display: inline-flex; align-items: center; }

  .order-link-copy__btn {
    white-space: nowrap;
    font-size: var(--text-xs, 0.75rem);
    padding: 0.25em 0.6em;
    min-height: auto;

    &.copy-btn--copied {
      background: var(--color-primary, #1D9E75) !important;
      color: #fff !important;
      border-color: var(--color-primary, #1D9E75) !important;
    }
  }

  .order-id-link {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
  }

  .nowrap { white-space: nowrap; }
}

/* ── Print items table ───────────────────────────────── */
.print-items {
  width: 100%;
  border-collapse: collapse;
  border-radius: var(--card-radius, 0.75rem);
  overflow: hidden;
  font-size: var(--text-small);

  & thead tr {
    background: var(--color-navy);
    color: white;
  }

  & th, & td {
    padding: 0.35rem 0.6rem;
    text-align: left;
  }

  & .print-items__num {
    text-align: right;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
  }

  & .print-items__code {
    font-weight: 700;
    white-space: nowrap;
  }

  & tbody .print-items__code {
    color: var(--color-ink-dark, #555);
  }

  & .print-items__name {
    width: 100%;
  }

  & tbody tr {
    border-bottom: 1px solid var(--color-border, #eee);

    &:last-child { border-bottom: none; }
    &:nth-child(even) { background: oklch(97% 0 0); }
  }
}

/* ── Edição de pedido (painel vendedor) ──────────────── */
.edition-items {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.edition-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.75rem 1rem;
  border: 1px solid var(--color-border, #e5e7eb);
  border-radius: var(--radius-md);
  background: var(--color-canvas);
  transition: background var(--duration-normal) ease, border-color var(--duration-normal) ease;

  &__info {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    flex: 1;
    min-width: 0;
  }

  &__name {
    font-size: var(--text-small);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  &__code, &__unit { font-size: var(--text-xs, 0.75rem); }

  &__controls {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-shrink: 0;
  }

  &__orig { white-space: nowrap; font-size: var(--text-xs, 0.75rem); }

  &__input {
    width: 4rem;
    text-align: center;
    padding: 0.35em 0.5em;
    border: 1px solid var(--color-border, #e5e7eb);
    border-radius: var(--radius-md);
    font-size: var(--text-small);
    font-weight: 700;
  }

  &__total {
    min-width: 5rem;
    text-align: right;
    font-weight: 700;
    font-size: var(--text-small);
    font-variant-numeric: tabular-nums;
  }

  &--changed {
    background: oklch(97% 0.02 250);
    border-color: var(--color-info, #185FA5);
  }

  &--removed {
    background: oklch(97% 0.02 20);
    border-color: var(--color-danger, #e74c3c);
    opacity: 0.7;

    .edition-item__total { color: var(--color-danger, #e74c3c); }
  }
}

/* ── Segregação de itens no admin ────────────────────── */
.order-section-label {
  margin-block: 0.75rem 0.25rem;
  font-size: var(--text-small);
}

.print-items__subtotal td {
  background: var(--color-canvas-alt, #f5f5f5) !important;
  font-weight: 600;
  border-top: 2px solid var(--color-border, #eee);
}

/* ── Print doc header ────────────────────────────────── */
.print-doc__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--inline-space);
}

.print-doc__brand {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  z-index: 1;
}

.print-doc__logo {
  height: 2.5rem;
  width: auto;
  object-fit: contain;
}

.print-doc__meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.1rem;
  z-index: 1;
}

.print-doc__order-num {
  font-size: 1.4rem;
  font-weight: 900;
  line-height: 1;
}

@media print {
  .print-doc__logo {
    height: 2rem;
  }
}