/* Role color tokens — single source of truth for role → color mapping.
 *
 * Loaded universally from `_layouts/base.html` so any consumer surface
 * (planner grid, timesheet, admin role list, future dashboards) can
 * read `var(--role-{slug}, var(--role-default))` and resolve to the
 * canonical hue for that role.
 *
 * Variable naming: `--role-{slug}` where `{slug}` is the slug-form of
 * `Role.name` (lowercase, underscores → hyphens). The slug computation
 * lives in the per-page view layer (e.g., `aperture/web/planning.py::
 * _role_slug`, `aperture/web/views/timesheet.py::_role_slug`); both
 * agree on the convention.
 *
 * Post-MVP migration path: when colors land on the Role model
 * (`Role.color_hex` — auto-assigned on creation, admin-overridable in
 * the role editor), this file becomes a Jinja-rendered include that
 * loops the active roles and emits `--role-{slug}: {hex};` from the
 * database. Consumers need no change — the CSS-variable contract is
 * the abstraction boundary. */

:root {
  /* Seeded role hues. Adjacent siblings share a base color (engineer
   * / senior-engineer; equipment-a / equipment-b) so the legend reads
   * as a coherent palette. */
  --role-engineer: #2563eb;
  --role-senior-engineer: #1e40af;       /* darker blue, sibling of engineer */
  --role-technician: #16a34a;
  --role-project-manager: #d97706;
  --role-equipment-a: #9333ea;
  --role-equipment-b: #7e22ce;           /* darker purple, sibling */

  /* Aliases — mockup vocabulary that maps onto seed-aligned hues. */
  --role-operator: #d97706;              /* alias of project-manager */
  --role-expert: #9333ea;                /* alias of equipment-a */
  --role-internal: #6b7280;              /* recurring "internal" pill */

  /* Neutral fallback for any role whose slug isn't keyed above. */
  --role-default: #6c757d;
}

/* Client short-code chip. Internal-only scannability cue prepended to
 * client / project rows across the app. Rendered by the
 * ``client_code_chip`` and ``client_label`` Jinja macros (and inline
 * in timesheet.js for bar / editor surfaces). */
code.client-code {
  display: inline-block;
  padding: 0.05em 0.4em;
  margin-right: 0.4em;
  background: #e5e7eb;
  color: #374151;
  border-radius: 0.25rem;
  font-size: 0.78em;
  font-weight: 600;
  letter-spacing: 0.04em;
  font-family: var(--bs-font-monospace, ui-monospace, monospace);
  text-transform: uppercase;
  vertical-align: baseline;
  line-height: 1.3;
}

/* Variant when embedded inside a placed-block bar — tighter, lighter,
 * sized to overlay the role color cleanly. */
.placed-block code.client-code.pb-code {
  background: rgba(255, 255, 255, 0.85);
  color: #1f2937;
  margin-right: 0.25em;
  padding: 0 0.25em;
  font-size: 0.72em;
}

/* Placed-block hover popover. Renders the value of the
 * ``data-popover`` attribute as a floating bubble on hover — adds
 * context beyond what the bar label can fit, especially for narrow
 * (≤1h) bars where the chip is suppressed. */
.placed-block[data-popover] {
  position: relative;
}

.placed-block[data-popover]:hover::after {
  content: attr(data-popover);
  position: absolute;
  bottom: calc(100% + 4px);
  left: 50%;
  transform: translateX(-50%);
  background: #1f2937;
  color: #fff;
  padding: 0.4em 0.6em;
  border-radius: 0.25rem;
  font-size: 0.75rem;
  line-height: 1.3;
  white-space: pre-line;
  max-width: 22rem;
  z-index: 50;
  pointer-events: none;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}