/* Requests — reuses app.css primitives (.gcc-panel, .gcc-toolbar, .gcc-btn,
   .gcc-search, .gcc-table, .gcc-num, .empty-state, .center-loading,
   .modal-box), cheques.css's .gcc-modal-head/-body/-close and
   .cheq-detail-card, and vatreport.css's .vat-modal-nav for the Prev/Next
   header nav. This file only adds the module-specific bits: the six summary
   stat cards (same language as the dashboard/.stat-card), the chip filter
   groups (approval radio + needs-action toggle + dynamic type chips), and
   the table cell/badge/detail-field treatments the row renderer uses. */

/* ---------- Summary stat cards ---------- */
.req-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(165px, 1fr));
  gap: 12px;
  padding: 14px 16px 4px;
}
.req-stat-card {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background: var(--surface-2, #f8fafc);
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 12px;
  padding: 12px;
  transition: box-shadow 0.15s ease, transform 0.15s ease;
}
.req-stat-card:hover { box-shadow: var(--shadow-lg, 0 8px 18px rgba(15,23,42,0.06)); transform: translateY(-1px); }
.req-stat-card.req-alert { border-color: var(--danger-500, #f43f5e); background: var(--danger-50, #fef2f2); }
.req-stat-icon {
  width: 34px; height: 34px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  border-radius: 9px; font-size: 16px;
}
.req-stat-icon.primary { background: var(--info-50, #eff6ff); color: var(--primary, #6366f1); }
.req-stat-icon.success { background: var(--success-50, #ecfdf5); color: var(--success-600, #059669); }
.req-stat-icon.warning { background: var(--warning-50, #fffbeb); color: var(--warning-600, #d97706); }
.req-stat-icon.danger { background: var(--danger-50, #fef2f2); color: var(--danger-600, #e11d48); }
.req-stat-body { min-width: 0; }
.req-stat-label { font-size: 10.5px; font-weight: 700; color: var(--text-muted, #64748b); text-transform: uppercase; letter-spacing: 0.03em; }
.req-stat-value { font-size: 1.15rem; font-weight: 750; letter-spacing: -0.02em; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---------- Chips ---------- */
/* .gcc-btn.active exists but reads as a button; chips are tighter pill
   toggles (radio-group semantics), so a small dedicated treatment — same
   palette, less chrome. */
.req-chip {
  border: 1px solid var(--border, #e5e7eb);
  background: var(--surface, #fff);
  color: var(--text-muted, #64748b);
  border-radius: 999px;
  padding: 4px 12px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
  transition: all 0.12s ease;
}
.req-chip:hover { border-color: var(--border-strong, #cbd5e1); color: var(--text, #0f172a); }
.req-chip.active { background: var(--primary, #6366f1); border-color: var(--primary, #6366f1); color: #fff; }
.req-chip-group { display: inline-flex; gap: 4px; }
.req-chips-row {
  display: flex; flex-wrap: wrap; gap: 6px;
  padding: 0 16px 8px;
}

/* ---------- Rows / cells ---------- */
.req-row { cursor: pointer; }
.req-row-needs-action td:first-child { box-shadow: inset 3px 0 0 var(--danger-500, #f43f5e); }
.req-cell-primary { font-weight: 600; color: var(--text); }
.req-cell-secondary { font-size: 12px; color: var(--text); }
.req-cell-tertiary { font-size: 11px; color: var(--text-muted, #64748b); }
.req-cell-mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-variant-numeric: tabular-nums; }
.req-truncate { max-width: 240px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.req-priority-dot {
  display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  margin-right: 5px; vertical-align: middle;
}

.req-badge {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 10.5px; font-weight: 700;
  padding: 2px 8px; border-radius: 999px;
  white-space: nowrap;
}
.req-badge.ok { background: var(--success-50, #ecfdf5); color: var(--success-700, #047857); }
.req-badge.warning { background: var(--warning-50, #fffbeb); color: var(--warning-600, #d97706); }
.req-badge.danger { background: var(--danger-50, #fef2f2); color: var(--danger-600, #e11d48); }
.req-badge.muted { background: var(--gray-100, #f1f5f9); color: var(--text-muted, #64748b); }
.req-badge.info { background: var(--info-50, #eff6ff); color: var(--primary, #6366f1); }
.req-account-badge { border: 1px solid var(--border, #e5e7eb); cursor: pointer; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.req-account-badge:hover { border-color: var(--primary, #6366f1); }

th.req-th { cursor: default; }
th.req-th[data-sort] { cursor: pointer; }
th.req-th.active { color: var(--primary, #6366f1); }
.req-sort-icon { font-size: 10px; opacity: 0.7; }

/* ---------- Detail modal ---------- */
.req-detail-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 16px;
}
.req-detail-field { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.req-detail-field.full { grid-column: 1 / -1; }
.req-dl { font-size: 10.5px; font-weight: 650; color: var(--text-muted, #64748b); text-transform: uppercase; letter-spacing: 0.03em; }
.req-dv { font-size: 12.5px; color: var(--text); word-break: break-word; }
.req-dv.empty { color: var(--text-faint, #94a3b8); }
.req-dv-plate { font-size: 16px; font-weight: 700; letter-spacing: 0.03em; }