/* Global ListView (admin)
 * Based on the "Pedidos" list styling, but reusable across tabs.
 */

.lv {
  display: grid;
  gap: 6px;
  width: 100%;
}

.lv-row {
  display: grid;
  grid-template-columns: var(--lv-cols, 1fr);
  gap: 0;
  /* Stretch cells so vertical separators connect to the row border. */
  align-items: stretch;
  padding: 0;
  border: 1px solid var(--admin-border);
  border-radius: var(--r);
  background: #fff;
  min-width: 0;
  width: 100%;
}

.lv-row[hidden] {
  display: none !important;
}

.lv-head {
  background: #f5f5f7;
  color: var(--admin-muted);
  font-weight: 700;
  font-size: 12px;
}

.lv-row > div {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  min-height: 100%;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 10px 12px;
  border-right: 1px solid var(--admin-border);
}

.lv-row > div:last-child {
  border-right: none;
}

.lv-head > div {
  white-space: normal;
}

.lv-item:hover {
  border-color: rgba(96, 100, 108, 0.35);
}

.lv-item {
  cursor: pointer;
}

.lv-item:focus-visible {
  outline: 2px solid rgba(255, 138, 0, 0.55);
  outline-offset: 2px;
}

.lv-right {
  justify-self: end;
  text-align: right;
}

.lv-empty {
  color: var(--admin-muted);
  font-weight: 600;
  padding: 12px 0 2px;
}

.lv-loading {
  color: var(--admin-muted);
  font-weight: 650;
  padding: 8px 2px;
}

/* Allow consumers to keep a semantic wrapper element while still letting
 * `.lv` manage the vertical spacing between rows via `gap`.
 */
.lv-rows {
  display: contents;
}

@media (max-width: 740px) {
  /* Consumers can opt-in to hiding columns by setting [data-lv-hide-mobile="6,7"] etc.
   * We keep CSS generic here and leave the per-view behaviour to the view-specific CSS.
   */
}