/* ============================================================
 * evps-pages.css — Feature 11 client-area page polish (Wave 1, PAGES zone)
 * Presentation-only enrichment classes for the client-area page family:
 *   clientareahome / products / productdetails / domains / domaindetails / invoices
 *
 * All colours/spacing derive from the --evps-* token system so light/dark
 * and the active skin adapt automatically. NO hardcoded hex.
 *
 * INTEGRATION NOTE (for the orchestrator): register this fragment in
 * header.tpl after evps-1000x.css, e.g.
 *   <link rel="stylesheet" href="{$WEB_ROOT}/templates/{$template}/assets/css/evps-pages.css?v={$evps_version}">
 * Until registered, each owning template also inlines the same rules in a
 * {literal}<style data-evps-pages>{/literal} block so the feature works
 * stand-alone.
 * ============================================================ */

/* ---- Quick-action grid (dashboards + service/domain detail) ---- */
.evps-quickactions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--evps-space-3);
  margin: 0;
}
.evps-quickaction {
  display: flex;
  align-items: center;
  gap: var(--evps-space-3);
  padding: var(--evps-space-4);
  border: 1px solid var(--evps-border);
  border-radius: var(--evps-radius-md);
  background: var(--evps-surface);
  color: var(--evps-text);
  text-decoration: none;
  transition: border-color .15s ease, transform .15s ease, background .15s ease;
}
.evps-quickaction:hover {
  border-color: var(--evps-primary);
  background: var(--evps-surface-2);
  transform: translateY(-1px);
  text-decoration: none;
}
.evps-quickaction:focus-visible {
  outline: 2px solid var(--evps-primary);
  outline-offset: 2px;
}
.evps-quickaction__icon {
  flex-shrink: 0;
  width: 34px; height: 34px;
  border-radius: var(--evps-radius-sm);
  display: grid; place-items: center;
  background: var(--evps-primary-soft);
  color: var(--evps-primary);
}
.evps-quickaction__label {
  font-weight: var(--evps-fw-medium, 500);
  font-size: var(--evps-fs-sm);
  line-height: 1.2;
}
.evps-quickaction__sub {
  display: block;
  font-size: var(--evps-fs-xs, 11px);
  color: var(--evps-text-muted);
  margin-top: 2px;
}

/* ---- Usage meters block (productdetails) ---- */
.evps-usage {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--evps-space-4);
}
.evps-usage__item { min-width: 0; }
.evps-usage__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--evps-space-2);
  margin-bottom: var(--evps-space-2);
}
.evps-usage__label {
  font-size: var(--evps-fs-sm);
  font-weight: var(--evps-fw-medium, 500);
  color: var(--evps-text);
}
.evps-usage__nums {
  font-size: var(--evps-fs-xs, 11px);
  color: var(--evps-text-muted);
  font-variant-numeric: tabular-nums;
}
.evps-usage__pct {
  font-size: var(--evps-fs-xs, 11px);
  color: var(--evps-text-muted);
  margin-top: 4px;
}

/* ---- Detail metadata grid (cards row on detail pages) ---- */
.evps-detail-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--evps-space-4);
}

/* ---- Mini fact tiles (inside detail cards) ---- */
.evps-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: var(--evps-space-3);
  padding: var(--evps-space-4);
}
.evps-fact {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.evps-fact__label {
  font-size: var(--evps-fs-xs, 11px);
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--evps-text-muted);
}
.evps-fact__value {
  font-size: var(--evps-fs-base);
  font-weight: var(--evps-fw-medium, 500);
  color: var(--evps-text);
  word-break: break-word;
}

/* ---- Chip row (auto-renew / SSL / lock state on detail headers) ---- */
.evps-chiprow {
  display: flex;
  flex-wrap: wrap;
  gap: var(--evps-space-2);
  align-items: center;
}

/* ---- Totals / summary bar (invoices) ---- */
.evps-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: var(--evps-space-4);
  padding: var(--evps-space-4) var(--evps-space-5);
}
.evps-summary__item {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.evps-summary__label {
  font-size: var(--evps-fs-xs, 11px);
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--evps-text-muted);
}
.evps-summary__value {
  font-size: var(--evps-fs-lg, 18px);
  font-weight: var(--evps-fw-semibold, 600);
  color: var(--evps-text);
  font-variant-numeric: tabular-nums;
}
.evps-summary__value--due { color: var(--evps-warning); }
.evps-summary__value--paid { color: var(--evps-success); }

/* ---- Section heading inside a page (between cards) ---- */
.evps-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--evps-space-3);
  margin: var(--evps-space-5) 0 var(--evps-space-3);
}
.evps-section-head__title {
  font-size: var(--evps-fs-base);
  font-weight: var(--evps-fw-semibold, 600);
  color: var(--evps-text);
  margin: 0;
}