/* ── 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-size: 1.5rem;
  font-weight: 700;
  color: var(--gray-dark);
  margin-bottom: 0.25rem;
}

.project-code {
  font-size: 0.82rem;
  color: var(--gray-mid);
  font-weight: 500;
  letter-spacing: 0.04em;
}

/* 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(--teal);
  text-decoration: underline;
}

/* No `align-items`: flex-end would shrink .header-actions and wrap buttons early. */
.header-meta {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.project-contract-number {
  align-self: flex-end;
  font-size: 0.82rem;
  color: var(--gray-mid);
  font-weight: 500;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

/* .project-header stacks below 600px (base.css), so stack left too. */
@media (max-width: 600px) {
  .project-contract-number {
    align-self: flex-start;
  }
}

/* Baseline, not center: the cashbook CTA is two rows tall. Keyed on .header-meta,
   not .project-header — that class is used by ~50 views that must keep centring. */
.header-meta .header-actions {
  align-items: baseline;
}

/* Read-only project runtime shown among the header badges — muted metadata,
   not a status pill. */
.project-period {
  font-size: 0.82rem;
  color: var(--gray-mid);
  font-weight: 500;
  align-self: baseline;
  white-space: nowrap;
}

/* Project Donor badge — same pill 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(--danger-bg); color: var(--danger); }
.donor-badge--other { background: var(--gray-light); color: var(--gray-mid); }

/* 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(--teal);
  text-decoration: underline;
}

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

.budget-bar-track {
  display: flex;
  height: 10px;
  background: var(--border);
  border-radius: 99px;
  overflow: hidden;
}

.budget-bar-fill {
  height: 100%;
  transition: width 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

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

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

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

.budget-bar-over { background: var(--danger); }

.budget-bar-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  margin-bottom: 1.5rem;
  font-size: 0.78rem;
  color: var(--gray-mid);
}

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

.budget-legend-item--budget {
  margin-left: auto;
  font-weight: 600;
  color: var(--gray-dark);
}

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

.budget-legend-item--paid .legend-dot     { background: var(--teal); }
.budget-legend-item--approved .legend-dot { background: rgba(0, 154, 149, 0.45); border: 1px solid var(--teal); }

.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; }
}