/*
 * DarziOS PWA — SCR-DASH-02 counter dashboard 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/size literals. Control patterns
 * (buttons, inputs, tags) come from css/controls.css — the single
 * production control kit mirroring the approved Design Board.
 *
 * Doc 7 §4.3 ergonomics: 48px+ touch targets, tabular numerals on every
 * numeric column, 7:1 primary-text contrast on dark surfaces.
 */

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

.dash__toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.dash__title {
  margin: 0;
  font-size: var(--text-2xl);
  font-weight: var(--weight-semibold);
}

/* Note: the shared .sample-chip fixture-honesty badge lives in
   css/app.css — it is used by every screen that renders sample data. */

/* ------------------------------------------------------------------ KPIs */
.kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: var(--space-4);
}

.kpi {
  display: grid;
  gap: var(--space-1);
  padding: var(--space-4);
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
}
/* Display-only clickable KPI (nav route, e.g. Due Today → ledger). */
.kpi--link {
  cursor: pointer;
  transition: border-color var(--duration-fast) var(--ease-standard);
}
.kpi--link:hover {
  border-color: var(--brand-brass);
}

.kpi__head {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--chalk-muted);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.kpi__icon {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  color: var(--brand-brass-light);
}
.kpi__icon svg {
  width: 100%;
  height: 100%;
}

.kpi__value {
  font-size: var(--text-2xl);
  font-weight: var(--weight-bold);
  font-variant-numeric: tabular-nums;
}
.kpi__value--due { color: var(--status-danger); }
.kpi__value--progress { color: var(--status-warning); }
.kpi__value--success { color: var(--status-success); }

.kpi__hint {
  font-size: var(--text-xs);
  color: var(--chalk-muted);
}

/* ---------------------------------------------------------- quick actions */
.quick-actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
}

/* Inline action icons inside buttons (currentColor — inherits the btn). */
.btn__icon {
  display: inline-grid;
  place-items: center;
  width: 20px;
  height: 20px;
}
.btn__icon svg {
  width: 100%;
  height: 100%;
}

.kbd-hint {
  font-size: var(--text-xs);
  color: var(--chalk-muted);
  letter-spacing: 0.04em;
}

/* ---------------------------------------------------------- two columns */
.dash__cols {
  display: grid;
  grid-template-columns: 3fr 2fr;
  gap: var(--space-4);
  align-items: start;
}

@media (max-width: 820px) {
  .dash__cols {
    grid-template-columns: 1fr;
  }
}

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

.panel__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--border-subtle);
}

.panel__title {
  margin: 0;
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
}

.panel__meta {
  font-size: var(--text-xs);
  color: var(--chalk-muted);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* Right side of a panel head (meta + action), keeps the title left. */
.panel__head-side {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  margin-left: auto;
}

/* -------------------------------------------------- needs-attention list */
.attention-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.attention-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px dashed var(--border-subtle);
}
.attention-row:last-child {
  border-bottom: none;
}

.attention-row__main {
  display: grid;
  gap: var(--space-1);
  min-width: 0;
  flex: 1;
}

.attention-row__id {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--chalk-white);
}

.attention-row__meta {
  font-size: var(--text-sm);
  color: var(--chalk-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.attention-row__amount {
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  font-variant-numeric: tabular-nums;
  color: var(--chalk-white);
}

/* ---------------------------------------------------------- recent orders */
.recent-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
}

.recent-table th {
  padding: var(--space-2) var(--space-4);
  text-align: left;
  color: var(--chalk-muted);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.recent-table td {
  padding: var(--space-3) var(--space-4);
  border-top: 1px dashed var(--border-subtle);
  font-variant-numeric: tabular-nums;
}

.recent-table__id {
  font-family: var(--font-mono);
  font-weight: var(--weight-semibold);
}

.recent-table__num {
  text-align: right;
}

/* Demo: the hub's sample order row opens SCR-ORD-03. */
.recent-table__row--hub {
  cursor: pointer;
}
.recent-table__row--hub:hover td {
  background: var(--brass-faint);
}

/* ------------------------------------------------------- compact shell */
/* Smartphone (Doc 7 §16): tighter gutters, keyboard hints hidden,
   attention rows wrap, and the recent-orders table scrolls
   horizontally instead of crushing its columns. */
@media (max-width: 560px) {
  .dash {
    padding: var(--space-4);
    gap: var(--space-4);
  }
  .kbd-hint {
    display: none;
  }
  .attention-row {
    flex-wrap: wrap;
    row-gap: var(--space-2);
  }
  .attention-row__amount {
    margin-left: auto;
  }
  .recent-table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    min-width: 560px;
  }
  .recent-table th,
  .recent-table td {
    white-space: nowrap;
  }
}