/* ── Project show ──────────────────────────────────────────── */
.project-show {
  /* Explicit: this class also rides a <turbo-frame> on the cashbook entry show
     page, and frames are display:inline by default — which would drop the
     max-width / centering / padding below. */
  display: block;
  max-width: 900px;
  margin: 0 auto;
  padding: 2.5rem 2rem;
}

.project-show--wide {
  max-width: min(1600px, 95vw);
}

.project-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.project-header h1 {
  font: var(--md-sys-typescale-headline-small);
  letter-spacing: var(--md-sys-typescale-headline-small-tracking);
  color: var(--md-sys-color-on-surface);
  margin-bottom: 0.25rem;
}

.project-code {
  font: var(--md-sys-typescale-body-medium);
  letter-spacing: var(--md-sys-typescale-body-medium-tracking);
  color: var(--md-sys-color-on-surface-variant);
}

/* Project code as a link to the SharePoint folder, when an admin stored one. */
.project-code--link {
  text-decoration: none;
  cursor: pointer;
}

.project-code--link:hover,
.project-code--link:focus-visible {
  color: var(--md-sys-color-primary);
  text-decoration: underline;
}

/* The project's facts on one wrapping line under its name: code, runtime,
   donor and status badges, contract number. */
.project-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 0.75rem;
}

/* Runtime and contract number: muted metadata, not status pills. */
.project-period,
.project-contract-number {
  font: var(--md-sys-typescale-body-medium);
  letter-spacing: var(--md-sys-typescale-body-medium-tracking);
  color: var(--md-sys-color-on-surface-variant);
  white-space: nowrap;
}

/* Project Donor badge — same shape as .status-badge (badges.css),
   donor-coded: EU indigo, GIZ red, Other neutral grey. EU uses the deeper
   Europa blue (#003399) rather than the status-ongoing sky blue, so the donor
   and status badges stay visually distinct when shown side by side. */
.donor-badge--eu    { background: var(--eu-blue-bg); color: var(--eu-blue); }
.donor-badge--giz   { background: var(--md-sys-color-error-container); color: var(--md-sys-color-on-error-container); }
.donor-badge--other { background: var(--md-sys-color-surface-container-high); color: var(--md-sys-color-on-surface-variant); }

/* Project name rendered as a one-click link back to the project entry page.
   Inherits the surrounding heading/label colour; hover hints it's a link. */
.project-backlink {
  color: inherit;
  text-decoration: none;
}

.project-backlink:hover {
  color: var(--md-sys-color-primary);
  text-decoration: underline;
}

.project-budget-bar {
  margin-bottom: 0.75rem;
}

.budget-bar-track {
  display: flex;
  height: 4px;
  background: var(--md-sys-color-secondary-container);
  border-radius: var(--md-sys-shape-corner-full);
  overflow: hidden;
}

.budget-bar-fill {
  height: 100%;
  transition: width var(--md-sys-motion-duration-medium4) var(--md-sys-motion-easing-emphasized-decelerate);
}

.budget-bar-fill--paid {
  background: var(--md-sys-color-primary);
}

.budget-bar-fill--approved {
  background: var(--teal-tint);
}

/* Planned open-ToR allocation, stacked after the actuals fill. */
.budget-bar-fill--planned {
  background: var(--teal-tint);
}

.budget-bar-over { background: var(--md-sys-color-error); }

.budget-bar-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  margin-bottom: 1.5rem;
  font: var(--md-sys-typescale-body-small);
  letter-spacing: var(--md-sys-typescale-body-small-tracking);
  color: var(--md-sys-color-on-surface-variant);
}

.budget-legend-item {
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.budget-legend-item--budget {
  margin-left: auto;
  font-weight: 500;
  color: var(--md-sys-color-on-surface);
}

.legend-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.budget-legend-item--paid .legend-dot     { background: var(--md-sys-color-primary); }
.budget-legend-item--approved .legend-dot { background: var(--teal-tint); border: 1px solid var(--md-sys-color-primary); }

.project-sections {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 1.5rem;
  margin-top: 1.5rem;
}

/* Cashbook-only users (no view_invoices) see a single section that fills the width. */
.project-sections--single {
  grid-template-columns: 1fr;
}

@media (max-width: 640px) {
  .project-sections { grid-template-columns: 1fr; }
}