/* Visão compacta das listas: mais itens visíveis sem perder os alvos de toque. */
.list-tools {
  gap: 7px;
  margin: 6px 0 10px;
}

.list-tools label {
  font-size: 12px;
  line-height: 1.2;
}

.list-tools select {
  min-height: 38px;
  padding: 7px 9px;
  margin-top: 3px;
  border-radius: 10px;
}

.list-tools button {
  min-width: 72px;
  min-height: 38px;
  padding: 7px 11px;
  font-size: 13px;
  border-radius: 10px;
}

.compact-details,
.compact-order {
  margin: 6px 0;
  border-width: 1px;
  border-bottom-width: 3px;
  border-radius: 16px;
}

.compact-details > summary {
  min-height: 52px;
  padding: 8px 11px;
  gap: 7px;
  grid-template-columns: minmax(0, 1fr) auto 16px;
}

.summary-main strong {
  font-size: 14px;
  line-height: 1.15;
}

.summary-product .summary-main {
  min-width: 0;
}

.compact-details .product-thumb {
  width: 40px;
  height: 40px;
  flex-basis: 40px;
  border-radius: 10px;
}

.summary-main small,
.summary-value small {
  font-size: 10.5px;
  line-height: 1.15;
  margin-top: 2px;
}

.summary-value {
  font-size: 13px;
  line-height: 1.1;
}

.compact-details > summary > b {
  font-size: 17px;
}

.price-row > summary {
  grid-template-columns: minmax(0, 1fr) auto auto;
}

.edit-pill {
  padding: 4px 7px;
  border-width: 1px;
  border-radius: 8px;
  font-size: 11px;
}

.details-body {
  padding: 1px 12px 12px;
}

.details-body p {
  margin: 8px 0;
  font-size: 13px;
}

.details-body dl {
  margin: 7px 0;
}

.details-body dl > div {
  padding: 6px 0;
  font-size: 13px;
}

.compact-order {
  grid-template-columns: minmax(0, 1fr) auto 12px;
  gap: 4px 8px;
  padding: 9px 11px;
  min-height: 60px;
}

.order-main strong {
  font-size: 14px;
  line-height: 1.15;
}

.order-main small {
  font-size: 10.5px;
  line-height: 1.2;
  margin-top: 2px;
}

.order-total {
  font-size: 13px;
}

.order-arrow {
  font-size: 20px;
}

.compact-order .tags {
  gap: 4px;
}

.compact-order .tags span {
  font-size: 9.5px;
  line-height: 1.1;
  padding: 3px 6px;
  border-radius: 6px;
}

@media (max-width: 480px) {
  .list-tools.order-tools {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
  }

  .list-tools.order-tools button {
    grid-column: auto;
    width: auto;
  }

  .price-row > summary {
    grid-template-columns: minmax(0, 1fr) auto auto;
  }

  .price-row .edit-pill {
    grid-column: auto;
    justify-self: auto;
  }

  .compact-details > summary {
    gap: 6px;
  }

  .summary-value,
  .order-total {
    font-size: 12px;
  }

  .compact-order {
    grid-template-columns: minmax(0, 1fr) auto 12px;
  }
}

.danger-zone {
  padding: 2px;
}

.danger-zone h2 {
  margin: 0 0 4px;
  font-size: 16px;
}

.danger-zone p,
.protected-history {
  font-size: 12px;
}

button.danger {
  background: #fff1f2;
  color: #b42318;
  border: 1px solid #f5b7b1;
  box-shadow: none;
}

button.danger:hover {
  background: #ffe4e6;
}

.cancelled-order {
  padding: 14px;
  border: 2px solid #b8c2d1;
  background: #f0f3f7;
  border-radius: 16px;
  margin: 12px 0;
  color: #36465d;
}

.cancelled-order strong { font-size: 18px; }
.cancelled-order p { margin: 3px 0; }
.cancelled-order small { display: block; }

.cancel-order {
  margin-top: 12px;
  border: 2px solid #efb4b0;
  border-radius: 16px;
  padding: 0;
}

.cancel-order > summary {
  cursor: pointer;
  font-weight: 900;
  color: #a12820;
  padding: 13px 15px;
}

.cancel-order[open] > :not(summary) {
  margin-left: 15px;
  margin-right: 15px;
}

.cancel-order[open] > button {
  width: calc(100% - 30px);
  margin-bottom: 15px;
}

/* Pedido: resumo primeiro, uma tarefa aberta e o restante recolhido. */
.order-overview {
  padding: 14px 16px;
  margin: 10px 0;
  border-radius: 18px;
}

.order-status-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.order-status-line h2 { margin: 0; }
.order-status-line .tags { justify-content: flex-end; }
.order-status-line .tags span { font-size: 11px; padding: 4px 7px; }
.order-overview dl { margin: 7px 0 0; }
.order-overview dl > div { padding: 6px 0; font-size: 13px; }

.order-facts {
  margin-top: 8px;
  border-top: 1px solid #dce5ef;
}

.order-facts > summary,
.order-history > summary,
.order-action > summary {
  cursor: pointer;
  list-style: none;
}

.order-facts > summary::-webkit-details-marker,
.order-history > summary::-webkit-details-marker,
.order-action > summary::-webkit-details-marker { display: none; }

.order-facts > summary {
  padding: 10px 0 2px;
  color: #174d9c;
  font-size: 13px;
  font-weight: 900;
}

.order-facts > summary::after,
.order-history > summary::after,
.order-action > summary::after {
  content: '›';
  float: right;
  font-size: 21px;
  line-height: 1;
  transform: rotate(90deg);
  transition: transform .15s ease;
}

.order-facts[open] > summary::after,
.order-history[open] > summary::after,
.order-action[open] > summary::after { transform: rotate(-90deg); }

.next-step {
  padding: 11px 13px;
  margin: 10px 0;
  border-radius: 13px;
  background: #e6f0ff;
  border: 1px solid #aac8ef;
  color: #173f78;
  font-size: 14px;
  font-weight: 900;
}

.next-step.urgent { background: #fff1cf; border-color: #e6bd67; color: #6b3d00; }
.next-step.done { background: #e7f6ee; border-color: #74aa8c; color: #214f36; }

form.card:has(> .order-action),
form.card:has(> .cancel-order) {
  padding: 0;
  margin: 7px 0;
  border-width: 1px;
  border-bottom-width: 3px;
  border-radius: 15px;
  overflow: hidden;
}

.order-action { margin: 0; }

.order-action > summary {
  min-height: 50px;
  padding: 9px 13px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 2px 10px;
}

.order-action > summary::after { grid-column: 2; grid-row: 1 / span 2; }
.order-action > summary span { font-weight: 900; font-size: 14px; }
.order-action > summary small { display: block; color: #51637a; font-size: 11px; line-height: 1.2; }
.order-action[open] > summary { background: #edf5ff; border-bottom: 1px solid #d6e4f3; }
.order-action.primary-action[open] > summary { background: #dfeeff; }
.order-action.urgent[open] > summary { background: #fff1cf; }

.order-action-body { padding: 2px 13px 13px; }
.order-action-body label { margin: 11px 0; font-size: 13px; }
.order-action-body input,
.order-action-body select { min-height: 44px; padding: 9px 10px; }
.order-action-body button { margin-top: 12px; }

.order-history {
  margin: 7px 0;
  border: 1px solid #d6e1ee;
  border-radius: 14px;
  background: #fafcff;
}

.order-history > summary {
  min-height: 48px;
  padding: 10px 13px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 3px 10px;
  font-weight: 900;
  font-size: 13px;
}

.order-history > summary::after { grid-column: 2; grid-row: 1 / span 2; }
.order-history > summary small { display: block; color: #596a80; font-size: 10.5px; }
.order-history > div { padding: 0 11px 11px; }
.order-history .card { margin: 7px 0; padding: 11px; border-radius: 13px; border-bottom-width: 3px; }
.order-history .card p { margin: 4px 0; font-size: 12px; }

.other-actions {
  margin: 14px 0 7px;
  border: 1px dashed #aebdce;
  border-radius: 14px;
  background: #f8fafc;
}

.other-actions > summary {
  cursor: pointer;
  list-style: none;
  min-height: 48px;
  padding: 9px 13px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 2px 10px;
  color: #465a73;
}

.other-actions > summary::-webkit-details-marker { display: none; }
.other-actions > summary span { font-weight: 900; font-size: 13px; }
.other-actions > summary small { display: block; font-size: 10.5px; }
.other-actions > summary::after { content: '›'; grid-column: 2; grid-row: 1 / span 2; font-size: 21px; transform: rotate(90deg); }
.other-actions[open] > summary::after { transform: rotate(-90deg); }
.other-actions[open] > summary { border-bottom: 1px solid #d9e1ea; }
.other-actions-body { padding: 5px 10px 10px; }
.other-actions-body > form.card { margin: 6px 0; }

form.card:has(> .cancel-order) .cancel-order {
  margin: 0;
  border: 0;
  border-radius: 0;
}

form.card:has(> .cancel-order) .cancel-order > summary {
  padding: 10px 13px;
  font-size: 12px;
}

@media (max-width: 480px) {
  .order-overview { padding: 12px 13px; }
  .order-status-line { align-items: flex-start; }
  .order-status-line .tags { gap: 3px; }
  .order-status-line .tags span { font-size: 9.5px; }
}