/* Projects — lijst en projectpagina (Penpot: Projects concept; componenten in "Projects — voorstel" op Componeneten). */

/* === Uitklapmenu bij een knop (Navigation / Menu) === */
.pop-menu { position: fixed; top: 0; left: 0; right: auto; z-index: 40; min-width: 220px; max-height: 70vh; overflow: auto; }
.menu-item.is-current { background: var(--color-bg-muted); }
.menu-check { display: flex; align-items: center; gap: 10px; }
.menu-check .checkbox { pointer-events: none; }
.menu-check .menu-label { flex: 1; min-width: 0; font-weight: 400; }

/* === Kop en bedieningsregel === */
.page-projects { gap: 18px; }
.page-projects .page-head h1 { margin: 0 0 4px; }
.page-head-actions { display: flex; align-items: flex-start; gap: 8px; }
.page-head-actions .capture { width: min(420px, 100%); }
.page-head-actions > .btn { height: 34px; }
.controls { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; row-gap: 10px; }
.controls .spacer { flex: 1; }
.fbtn { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px 0 14px; border: 1px solid var(--color-border-strong); border-radius: var(--radius-chip); background: var(--color-bg-surface); font: 600 13px/1 var(--font-body); color: var(--color-text-default); white-space: nowrap; }
.fbtn:hover { border-color: var(--color-border-control); }
.fbtn.is-on { background: var(--color-bg-inverse); border-color: var(--color-bg-inverse); color: var(--color-text-inverse); }
.fbtn-caret { font-size: 9px; color: var(--color-text-subtle); }
.fbtn.is-on .fbtn-caret { color: var(--color-text-inverse); }
.search { width: 240px; height: 32px; padding: 0 12px; border: 1px solid var(--color-border-strong); border-radius: var(--radius-control); background: var(--color-bg-surface); font: 400 13px/1.5 var(--font-body); color: var(--color-text-default); outline: 0; }
.search:focus { border-color: var(--color-border-focus); }

/* === Lijst (Projects / List header + Row) === */
.ptable { display: flex; flex-direction: column; }
.ptable-head, .prow { display: grid; grid-template-columns: 24px 40px minmax(0, 1fr) 180px 160px 120px 150px 28px; column-gap: 16px; align-items: center; }
.ptable-head { padding: 0 8px 8px; border-bottom: 1px solid var(--color-border-default); font: 600 11px/1.3 var(--font-body); color: var(--color-text-muted); }
.prow { padding: 14px 8px; border-bottom: 1px solid var(--color-border-default); cursor: pointer; }
.prow:hover { background: var(--color-bg-subtle); }
.prow:focus-visible { outline: 2px solid var(--color-border-focus); outline-offset: -2px; }
.prow-toggle { width: 24px; height: 24px; border-radius: var(--radius-control); font: 600 16px/1 var(--font-body); color: var(--color-text-muted); transition: transform .15s; }
.prow-toggle:hover { background: var(--color-bg-muted); color: var(--color-text-default); }
.prow-toggle[data-empty] { opacity: .35; }
.prow.is-open .prow-toggle { transform: rotate(90deg); }
.prow-main { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.prow-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0; }
.prow-name { font: 600 16px/1.25 var(--font-display); letter-spacing: -0.2px; color: var(--color-text-default); }
.prow-reason { font: 400 13px/1.5 var(--font-body); color: var(--color-text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.prow-areas { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.prow-more { width: 28px; height: 28px; border-radius: var(--radius-control); color: var(--color-text-subtle); font: 600 15px/1 var(--font-body); opacity: 0; }
.prow:hover .prow-more, .prow-more:focus-visible, .prow-more[aria-expanded="true"] { opacity: 1; }
.prow-more:hover { background: var(--color-bg-muted); color: var(--color-text-default); }
@media (hover: none) { .prow-more { opacity: 1; } }
.link-tile { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; border-radius: 4px; background: var(--color-bg-muted); font: 600 10px/1 var(--font-body); color: var(--color-text-muted); }
.row-dep { font: 600 11px/1.3 var(--font-body); color: var(--color-text-muted); }
.row-dep.is-wait { color: var(--color-status-blocked-text); }

/* Prioriteit (Status & signals / Priority): P1 gevuld, P2 omlijnd, P3–P5 rustiger */
.prio { display: inline-flex; align-items: center; justify-content: center; min-width: 30px; height: 20px; padding: 0 6px; border-radius: var(--radius-chip); border: 1.5px solid var(--color-text-default); font: 600 11px/1 var(--font-body); color: var(--color-text-default); }
.prio-1 { background: var(--color-bg-inverse); border-color: var(--color-bg-inverse); color: var(--color-text-inverse); }
.prio-3 { border-color: var(--color-border-control); color: var(--color-text-muted); border-width: 1px; }
.prio-4, .prio-5 { border-color: var(--color-border-strong); color: var(--color-text-subtle); border-width: 1px; }
.prio-none { border-color: transparent; color: var(--color-text-subtle); }

/* Stappen-kolom: telling + balk in de statusfamilie */
.steps-cell { display: flex; flex-direction: column; gap: 4px; }
.steps-count { font: 600 11px/1.3 var(--font-body); color: var(--color-text-muted); display: flex; gap: 4px; flex-wrap: wrap; }
.steps-count b { color: var(--color-text-default); font-weight: 600; }
.steps-alert { color: var(--color-status-blocked-text); }
.steps-bar { height: 4px; border-radius: var(--radius-chip); background: var(--color-bg-muted); overflow: hidden; }
.steps-bar i { display: block; height: 100%; border-radius: inherit; background: var(--color-status-done-solid); }
.steps-bar.fam-active i { background: var(--color-status-active-solid); }
.steps-bar.fam-blocked i { background: var(--color-status-blocked-solid); }
.steps-bar.fam-waiting i { background: var(--color-status-waiting-solid); }
.steps-bar.fam-paused i { background: var(--color-status-paused-solid); }
.steps-bar.fam-planned i { background: var(--color-status-planned-solid); }

/* Deadline-kolom (Status & signals / Deadline): alleen open items krijgen een signaal */
.dl { display: inline-flex; align-items: center; height: 20px; padding: 0 8px; border-radius: var(--radius-chip); font: 600 11px/1.3 var(--font-body); white-space: nowrap; color: var(--color-text-default); }
.dl-normal { padding: 0; }
.dl-soon { background: var(--color-bg-muted); }
.dl-attention { background: var(--color-bg-muted); color: var(--color-status-paused-solid); }
.dl-overdue { background: var(--color-status-blocked-wash); color: var(--color-status-blocked-text); }

/* Uitgeklapte stappen onder een rij */
.prow-steps-list { display: flex; flex-direction: column; gap: 6px; padding: 8px 8px 16px 96px; border-bottom: 1px solid var(--color-border-default); background: var(--color-bg-subtle); }
.steps-done-toggle { align-self: flex-start; font: 600 11px/1.3 var(--font-body); color: var(--color-text-muted); padding: 2px 0; }
.steps-done-toggle:hover { color: var(--color-text-default); }

/* === Stap (Steps & tasks / Item · Detail) === */
.item--detail { gap: 10px; padding: 6px 6px 6px 2px; border-radius: var(--radius-control); max-width: 760px; }
.item--detail:hover { background: var(--color-bg-subtle); }
.prow-steps-list .item--detail:hover { background: var(--color-bg-muted); }
.item--detail .checkbox { margin-top: 2px; }
.item--detail .item-body { cursor: pointer; }
.item-grip { flex: none; width: 12px; margin-top: 1px; font: 600 11px/1.4 var(--font-body); color: var(--color-text-subtle); letter-spacing: -2px; cursor: grab; opacity: 0; }
.item--detail:hover .item-grip { opacity: 1; }
.step-state { font: 600 11px/1.3 var(--font-body); }
.st-in_progress { color: var(--color-status-active-solid); }
.st-blocked { color: var(--color-status-blocked-text); }
.st-skipped { color: var(--color-text-subtle); }
.item--detail.is-skipped .item-title { color: var(--color-text-subtle); text-decoration: line-through; }
.item--detail.is-done .item-title { color: var(--color-text-muted); text-decoration: line-through; }
.item--detail.is-blocked .item-signal { color: var(--color-status-blocked-text); }
.item--detail.is-dragging { opacity: .4; }
.item--detail.is-drop-before { box-shadow: inset 0 2px 0 var(--color-border-focus); }
.steps-list { display: flex; flex-direction: column; gap: 2px; }

/* === Projectpagina: kopkaart (Projects / Detail header) === */
.page-project { max-width: none; }
.phead { display: flex; align-items: flex-end; gap: 32px; padding: 24px; border: 1px solid var(--color-border-default); border-radius: var(--radius-card); background: var(--color-bg-surface); }
.phead-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.phead-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.phead-title { margin: 0; align-self: flex-start; font: 600 28px/1.2 var(--font-display); letter-spacing: -0.4px; border-radius: var(--radius-control); cursor: text; }
.phead-title:hover { background: var(--color-bg-subtle); }
.phead-title-input { width: 100%; padding: 6px 10px; border: 1px solid var(--color-border-focus); border-radius: var(--radius-control); font: 600 24px/1.2 var(--font-display); color: var(--color-text-default); outline: 0; }
.phead-reason { align-self: flex-start; font: 400 16px/1.5 var(--font-body); color: var(--color-text-muted); border-radius: var(--radius-control); cursor: pointer; }
.phead-reason:hover { background: var(--color-bg-subtle); }
.phead-reason.is-empty { color: var(--color-text-subtle); font-style: italic; font-size: 13px; }
.phead-side { flex: none; width: 280px; display: flex; flex-direction: column; gap: 8px; }
.phead-side .meter { min-width: 0; }
.health.is-alert { color: var(--color-status-blocked-text); }
.health.is-alert i { background: var(--color-status-blocked-solid); }

/* Story: lange tekst ingeklapt */
.inline-value.is-clamped { display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; overflow: hidden; }
.inline-more { align-self: flex-start; font: 600 11px/1.3 var(--font-body); color: var(--color-text-muted); }
.inline-more:hover { color: var(--color-text-default); }

/* Zijkolom */
.page-project .detail-cols { grid-template-columns: minmax(0, 1fr) 340px; }
.link-btn { font: 600 13px/1.3 var(--font-body); color: var(--color-text-default); text-decoration: underline; text-decoration-color: var(--color-border-strong); text-underline-offset: 3px; }
.link-btn:hover { text-decoration-color: currentColor; }
.link-actions { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; min-width: 0; }
.net-row { position: relative; }
.net-link { display: grid; grid-template-columns: auto 1fr; gap: 0 8px; }
.net-link .t-label-md { grid-column: 1 / -1; }
.net-edit { position: absolute; top: 8px; right: 10px; }
.net-row:hover .net-edit { opacity: 1; }
.net-add { align-self: flex-start; margin-left: -10px; }
.dep-link { text-decoration: underline; text-decoration-color: var(--color-border-strong); text-underline-offset: 3px; }

/* === Dialogen === */
.status-group { display: flex; flex-direction: column; gap: 6px; }
.status-choice.is-on.fam-planned { background: var(--color-status-planned-solid); border-color: var(--color-status-planned-solid); color: var(--color-status-planned-on-solid); }
.status-choice.is-on.fam-active { background: var(--color-status-active-solid); border-color: var(--color-status-active-solid); color: var(--color-status-active-on-solid); }
.status-choice.is-on.fam-paused { background: var(--color-status-paused-solid); border-color: var(--color-status-paused-solid); color: var(--color-status-paused-on-solid); }
.status-choice.is-on.fam-blocked { background: var(--color-status-blocked-solid); border-color: var(--color-status-blocked-solid); color: var(--color-status-blocked-on-solid); }
.status-choice.is-on.fam-waiting { background: var(--color-status-waiting-solid); border-color: var(--color-status-waiting-solid); color: var(--color-status-waiting-on-solid); }
.status-choice.is-on.fam-done { background: var(--color-status-done-solid); border-color: var(--color-status-done-solid); color: var(--color-status-done-on-solid); }
.status-choice.is-on.fam-stopped { background: var(--color-status-stopped-solid); border-color: var(--color-border-strong); color: var(--color-status-stopped-on-solid); }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.field select { width: 100%; height: 34px; padding: 0 8px; border: 1px solid var(--color-border-strong); border-radius: var(--radius-control); background: var(--color-bg-surface); font: 400 13px/1.5 var(--font-body); color: var(--color-text-default); }
.dlg-extra { display: flex; }
.btn.is-danger { color: var(--color-status-blocked-text); }

/* === Notitiepaneel op de projectpagina: op de iPad over de zijkolom heen (Remco, 5 nov) === */
@media (min-width: 761px) and (max-width: 1280px) {
  .main.with-notes.notes-over { display: flex; position: relative; }
  .main.with-notes.notes-over > .notes-panel { position: absolute; top: var(--np-top, 69px); right: 0; bottom: 0; width: var(--side-w); z-index: 7; box-shadow: -8px 0 24px rgba(27, 25, 22, .08); }
  .page-project .detail-cols { grid-template-columns: minmax(0, 1fr) 340px; }
  .ptable-head, .prow { grid-template-columns: 24px 36px minmax(0, 1fr) 140px 120px 110px 28px; }
  .ptable-head > :nth-child(4), .prow-areas { display: none; }
  .phead-side { width: 220px; }
}

/* === Telefoon: rij in twee regels, kopkaart onder elkaar === */
@media (max-width: 760px) {
  .controls { flex-wrap: nowrap; overflow-x: auto; margin: 0 -16px; padding: 0 16px 2px; scrollbar-width: none; }
  .controls .scales { flex: none; }
  .search { flex: none; width: 180px; }
  .page-head-actions { width: 100%; }
  .page-head-actions .capture { flex: 1; }
  .ptable-head { display: none; }
  .prow { grid-template-columns: 22px 34px minmax(0, 1fr) auto; grid-template-areas: "tog prio main status" "tog prio steps dl"; row-gap: 6px; column-gap: 10px; }
  .prow-toggle { grid-area: tog; align-self: start; }
  .prow-prio { grid-area: prio; align-self: start; }
  .prow-main { grid-area: main; }
  .prow-status { grid-area: status; align-self: start; }
  .prow-steps { grid-area: steps; }
  .prow-deadline { grid-area: dl; justify-self: end; }
  .prow-areas, .prow-more { display: none; }
  .prow-steps-list { padding-left: 16px; }
  .phead { flex-direction: column; align-items: stretch; gap: 16px; padding: 16px; }
  .phead-title { font-size: 22px; }
  .phead-side { width: auto; }
  .page-project .detail-cols { grid-template-columns: 1fr; }
  .field-row { grid-template-columns: 1fr; }
  .item-grip { display: none; }
}