/* admin-tools: the admin tab "Kunden", the bulk edits of the product table, and the CSV export / retention of the log tab */

/* ---------- Kunden ---------- */

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

.cust-line {
  display: block;
  color: var(--color-charcoal-muted);
  font-size: var(--text-xs);
  line-height: var(--leading-ui);
  overflow-wrap: anywhere;
}

/* phone: the table is a stack of cards (styles.css); the small line under a value takes a row of its own */
@media (max-width: 40rem) {
  .orders-table td .cust-line {
    flex: 1 0 100%;
    text-align: right;
  }
}

.cust-table td .text-button {
  min-height: var(--touch);
}

.cust-pager {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-2);
  font-size: var(--text-sm);
}

.cust-pager .text-button {
  min-height: var(--touch);
}

.cust-pager .text-button:disabled {
  opacity: 0.4;
  cursor: default;
}

.cust-detail-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-3);
  margin: 0 0 var(--space-2);
}

.cust-detail-actions .text-button {
  min-height: var(--touch);
}

.cust-orders .orders-table td .text-button {
  min-height: var(--touch);
}

.cust-orders-pager {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-1);
  font-size: var(--text-sm);
}

/* ---------- bulk edits of the product table ---------- */

.bulk-bar {
  margin: 0 0 var(--space-3);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-line);
  background: var(--color-porcelain);
}

.bulk-filter,
.bulk-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: var(--space-2) var(--space-3);
  margin-bottom: var(--space-2);
}

.bulk-filter .field,
.bulk-controls .field {
  flex: 1 1 12rem;
  margin: 0;
}

.bulk-all {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  min-height: var(--touch);
  font-size: var(--text-sm);
  cursor: pointer;
}

.bulk-all input,
.bulk-pick {
  width: 1.1rem;
  height: 1.1rem;
  accent-color: var(--color-charcoal);
}

.bulk-pick {
  margin: 0 0.5rem 0 0;
  vertical-align: -0.15rem;
  cursor: pointer;
}

.bulk-count {
  font-size: var(--text-sm);
  color: var(--color-charcoal-muted);
}

.bulk-bar .admin-hint {
  margin: 0 0 var(--space-2);
}

.bulk-bar .admin-hint:empty {
  display: none;
}

.bulk-bar .delete-confirm {
  margin-bottom: var(--space-2);
}

.bulk-bar .delete-confirm .button:not(.button-outline) {
  border-color: var(--color-charcoal);
  background: var(--color-charcoal);
  color: var(--color-porcelain);
}

.bulk-result {
  font-size: var(--text-sm);
}

.bulk-result details {
  margin-top: var(--space-1);
}

.bulk-result ul {
  margin: var(--space-1) 0 0;
  padding-left: 1.2rem;
}

.inventory-table tr.is-picked > td {
  background: color-mix(in srgb, var(--color-charcoal) 6%, var(--color-porcelain));
}

/* ---------- log: CSV export and retention ---------- */

.log-retention {
  margin-top: var(--space-3);
}

.log-retention-table td {
  vertical-align: middle;
}

.log-retention-table .cell-input {
  width: 6rem;
}

.log-retention-table .cust-line {
  display: block;
}