/*
 * DarziOS PWA — SCR-CUST-01 customer directory styles (production).
 *
 * Owner rule (strict): every color, spacing value, radius, shadow and
 * duration in this file resolves to a custom property in
 * css/design-tokens.css. Zero raw color literals. Control patterns
 * (buttons, inputs, fields, tags) come from css/controls.css.
 *
 * Doc 7 §4.3 ergonomics: 48px+ touch targets, tabular numerals on every
 * phone/quantity/amount figure.
 */

/* ---------------------------------------------------------------- page */
.custdir {
  max-width: 1160px;
  margin: 0 auto;
  padding: var(--space-6);
  display: grid;
  gap: var(--space-4);
}

.custdir__toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  flex-wrap: wrap;
}
.custdir__title {
  margin: 0;
  font-size: var(--text-2xl);
  font-weight: var(--weight-semibold);
}

/* ------------------------------------------------------------ search */
.custdir__search {
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  gap: var(--space-3);
  align-items: end;
}
@media (max-width: 720px) {
  .custdir__search {
    grid-template-columns: 1fr;
  }
}
.custdir__count {
  min-height: var(--touch-workshop);
  display: inline-flex;
  align-items: center;
  font-size: var(--text-sm);
  color: var(--chalk-muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.field--grow {
  min-width: 0;
}

/* ------------------------------------------------------------ body */
.custdir__body {
  display: grid;
  grid-template-columns: 3fr 2fr;
  gap: var(--space-4);
  align-items: start;
}
@media (max-width: 900px) {
  .custdir__body {
    grid-template-columns: 1fr;
  }
}

.dir-card {
  overflow: hidden;
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
}

/* ------------------------------------------------------------- table */
.dir-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-md);
}
.dir-table th {
  padding: var(--space-3) var(--space-4);
  text-align: left;
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--chalk-muted);
  border-bottom: 1px solid var(--border-subtle);
}
.dir-table td {
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--border-subtle);
}
.dir-table tbody tr:last-child td {
  border-bottom: none;
}
.dir-table__num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.dir-table__id {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--brand-brass-light);
  font-variant-numeric: tabular-nums;
}
.dir-table__phone {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-variant-numeric: tabular-nums;
}

.dir-row {
  cursor: pointer;
  transition: background-color var(--duration-fast) var(--ease-standard);
}
.dir-row:hover {
  background: var(--surface-elevated);
}
.dir-row--selected {
  background: var(--brass-faint);
}
.dir-row--selected td:first-child {
  box-shadow: inset 3px 0 0 var(--brand-brass);
}

.dir-empty {
  margin: 0;
  padding: var(--space-6) var(--space-4);
  color: var(--chalk-muted);
  font-size: var(--text-sm);
}

/* ------------------------------------------------------------ detail */
.dir-detail {
  position: sticky;
  top: calc(var(--touch-min) + var(--space-3) + var(--space-3) + var(--space-4));
  display: grid;
  gap: var(--space-4);
  padding: var(--space-4);
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
}

.dir-detail__empty {
  display: grid;
  gap: var(--space-3);
  justify-items: center;
  text-align: center;
  padding: var(--space-8) var(--space-4);
  color: var(--chalk-muted);
  font-size: var(--text-sm);
}
.dir-detail__icon {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: var(--radius-full);
  background: var(--brass-faint);
  color: var(--brand-brass-light);
}
.dir-detail__icon svg {
  width: 24px;
  height: 24px;
}
.dir-detail__empty p {
  margin: 0;
  max-width: 32ch;
}

.dir-detail__head {
  display: grid;
  gap: var(--space-1);
}
.dir-detail__name {
  margin: 0;
  font-size: var(--text-xl);
  font-weight: var(--weight-semibold);
}
.dir-detail__meta {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--chalk-muted);
  font-variant-numeric: tabular-nums;
}
.dir-detail__stat {
  font-size: var(--text-sm);
  color: var(--chalk-muted);
}

.dir-detail__actions {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
}
.dir-detail__soon {
  margin: 0;
  font-size: var(--text-xs);
  color: var(--chalk-muted);
}

/* --------------------------------------------------- recent orders */
.dir-orders {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-2);
}
.dir-orders__none {
  font-size: var(--text-sm);
  color: var(--chalk-muted);
}
.dir-order {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  background: var(--surface-elevated);
}
.dir-order__main {
  display: grid;
  gap: var(--space-1);
  min-width: 0;
}
.dir-order__id {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--brand-brass-light);
  font-variant-numeric: tabular-nums;
}
.dir-order__item {
  font-size: var(--text-sm);
}
.dir-order__balance {
  margin-left: auto;
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* ------------------------------------------------------- compact shell */
@media (max-width: 560px) {
  .custdir {
    padding: var(--space-4);
  }
}