/* CR-UX.GLASS — reusable "glass" primitives (design-system), re-skinned on the B3G role tokens.
   Structure ported from the pixel ref (Docs/handoff/ref-glass-style-b3g.html). ROLE TOKENS ONLY — no raw
   hex/rgba here (raw values live in themes/*). Direction is LOGICAL (padding-inline, border-inline-*, :dir);
   NO physical [dir="rtl"] override. Reduced-motion is neutralised centrally (reset.css) — no block here. */

/* ── Glass surface primitive ─────────────────────────────────────────────── */
.glass {
  background: var(--glass-bg);
  backdrop-filter: blur(var(--blur-glass));
  -webkit-backdrop-filter: blur(var(--blur-glass));
  border: var(--border-width) solid var(--glass-border);
  box-shadow: var(--shadow-glass), var(--shadow-inner);
}

/* ── Stat card (with corner glow) ────────────────────────────────────────── */
.glass-stat {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-xl);
  padding: var(--space-lg);
}

.glass-stat::before {
  content: '';
  position: absolute;
  inset-block-start: 0;
  inset-inline-end: 0;
  inline-size: 6.875rem;
  block-size: 6.875rem;
  background: radial-gradient(circle, var(--color-info-subtle) 0%, transparent 70%);
  border-radius: var(--radius-full);
  transform: translate(30%, -30%);
}

.glass-stat__label {
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--color-text-muted);
  font-weight: var(--font-weight-semibold);
}

.glass-stat__value {
  font-family: var(--font-serif);
  font-size: var(--text-3xl);
  color: var(--color-text-primary);
  font-weight: var(--font-weight-bold);
  margin-block-start: var(--space-2xs);
  font-variant-numeric: tabular-nums;
}

.glass-stat__unit {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  font-family: var(--font-sans);
  font-weight: var(--font-weight-semibold);
}

/* ── Detail grid (2-col hairline) ────────────────────────────────────────── */
.glass-detail {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.glass-detail__field {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
  padding: var(--space-md) var(--space-xl);
  border-block-end: var(--border-width) solid var(--hairline);
}

.glass-detail__field:nth-child(odd) {
  border-inline-end: var(--border-width) solid var(--hairline);
}

.glass-detail__label {
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-info);
  font-weight: var(--font-weight-bold);
}

.glass-detail__value {
  color: var(--color-text-primary);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-medium);
}

.glass-detail__value.mono {
  font-family: var(--font-mono);
}

/* ── Avatar (initials) ───────────────────────────────────────────────────── */
.glass-avatar {
  inline-size: 3.5rem;
  block-size: 3.5rem;
  border-radius: var(--radius-full);
  background: var(--avatar-grad);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--b3g-neutral-0);
  font-weight: var(--font-weight-bold);
  font-size: var(--text-xl);
  flex-shrink: 0;
  box-shadow: var(--shadow-lift);
}

/* ── Glass table treatment (accent head, hairline rows, hover-reveal actions) ── */
.glass-table {
  inline-size: 100%;
  border-collapse: separate;
  border-spacing: 0;
}

.glass-table thead {
  background: var(--thead-bg);
}

.glass-table th {
  padding: var(--space-sm) var(--space-md);
  text-align: start;
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-info);
  font-weight: var(--font-weight-bold);
  border-block-end: var(--border-width) solid var(--glass-border);
  white-space: nowrap;
}

.glass-table th.glass-table__right,
.glass-table td.glass-table__right {
  text-align: end;
}

.glass-table tbody tr {
  transition: background var(--transition-base);
  border-block-end: var(--border-width) solid var(--hairline);
}

.glass-table tbody tr:hover {
  background: var(--row-hover);
}

.glass-table td {
  padding: var(--space-sm) var(--space-md);
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  border-block-end: var(--border-width) solid var(--hairline);
  vertical-align: middle;
}

/* LOT 2 (CR-UX.GLASS-DOCS) — row actions are ALWAYS visible (never hover-gated): discoverability must not
   depend on hover. Colour emphasis + keyboard focus stay on the icon buttons themselves. */
.glass-table__actions {
  display: flex;
  gap: var(--space-2xs);
  justify-content: flex-end;
  opacity: 1;
}

/* ── Two-line cell (primary mono number + secondary muted line), from the ref ── */
.glass-cell-primary {
  color: var(--color-text-primary);
  font-weight: var(--font-weight-semibold);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
}

.glass-cell-secondary {
  margin-block-start: var(--space-3xs);
  color: var(--color-text-muted);
  font-size: var(--text-xs);
}

/* ── Aging rail (segments à-jour / échoit / retard) ──────────────────────── */
.aging-rail {
  display: flex;
  block-size: 0.875rem;
  border-radius: var(--radius-full);
  overflow: hidden;
  border: var(--border-width) solid var(--glass-border);
}

.aging-rail__seg {
  display: block;
}

.aging-rail__seg--ok {
  background: var(--color-success);
}

.aging-rail__seg--soon {
  background: var(--color-warning);
}

.aging-rail__seg--late {
  background: var(--color-error);
}

.aging-legend {
  display: flex;
  gap: var(--space-lg);
  margin-block-start: var(--space-md);
  flex-wrap: wrap;
}

.aging-legend__item {
  display: flex;
  align-items: center;
  gap: var(--space-2xs);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

.aging-legend__dot {
  inline-size: 0.625rem;
  block-size: 0.625rem;
  border-radius: var(--radius-sm);
}

.aging-legend__dot--ok {
  background: var(--color-success);
}

.aging-legend__dot--soon {
  background: var(--color-warning);
}

.aging-legend__dot--late {
  background: var(--color-error);
}