/* Permissions: the org chart (People), the person panel's role and key rows, the roles x keys matrix.
   Ported from Nutracom's perms-app. Tokens only; the one harness class touched (the checkbox's on state) is scoped to the matrix. */

.pm-meta { font-size: var(--fs-sm); color: var(--color-label); }
.pm-spacer { flex: 1; }
.pm-loading { padding: var(--space-8); display: flex; justify-content: center; }
.pm-note { padding: var(--space-4) 0 0; }
.pm-p { margin: 0 0 var(--space-3); }
.pm-panel-notes { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-4) var(--space-5) 0; }

/* ---- People: the org chart ---- */
.pm-chart-bar { display: flex; align-items: center; gap: var(--space-4); padding: var(--space-4) 0; }
.pm-chart-bar > :first-child { width: 280px; }
.pm-chart { display: flex; flex-direction: column; align-items: center; padding: var(--space-2) 0 var(--space-8); overflow-x: auto; }
.pm-root { position: relative; padding: var(--space-3) var(--space-6); border: 1px solid var(--color-border); border-radius: var(--radius-card);
  background: var(--color-bg); text-align: center; box-shadow: var(--shadow-sm); }
.pm-root::after { content: ''; position: absolute; left: 50%; bottom: calc(-1 * var(--space-5)); height: var(--space-5); border-left: 1px solid var(--color-border); }
.pm-root-name { font-size: var(--fs-lg); font-weight: var(--fw-semibold); }
.pm-branches { display: grid; grid-template-columns: repeat(var(--pm-cols), minmax(158px, 1fr)); gap: 0; width: 100%; margin-top: var(--space-5); }
.pm-col { position: relative; padding: var(--space-5) var(--space-2) 0; min-width: 0; }
/* the connector: a stub up from each column to one bar that spans the column centers */
.pm-col::before { content: ''; position: absolute; top: 0; left: 50%; height: var(--space-5); border-left: 1px solid var(--color-border); }
.pm-col::after { content: ''; position: absolute; top: 0; left: 0; right: 0; border-top: 1px solid var(--color-border); }
.pm-col:first-child::after { left: 50%; }
.pm-col:last-child::after { right: 50%; }
.pm-col:only-child::after { display: none; }
.pm-col-head { padding: var(--space-2) var(--space-3); border: 1px solid var(--color-border); border-radius: var(--radius-card);
  background: var(--color-surface-alt); text-align: center; }
.pm-col--red .pm-col-head { background: var(--pill-red-bg); border-color: var(--pill-red-bg); }
.pm-col--gray .pm-col-head { opacity: .8; }
.pm-col-name { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--fs-sm); font-weight: var(--fw-semibold); }
.pm-col-count { font-size: var(--fs-xs); font-weight: var(--fw-medium); color: var(--color-label); }
.pm-col-desc { margin-top: 2px; font-size: var(--fs-xs); line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pm-col-body { display: flex; flex-direction: column; gap: var(--space-2); padding-top: var(--space-3); }
.pm-col-empty { text-align: center; padding: var(--space-2) 0; }
.pm-card { display: flex; align-items: center; gap: var(--space-2); width: 100%; padding: var(--space-2); text-align: left; cursor: pointer;
  border: 1px solid var(--color-border); border-radius: var(--radius-card); background: var(--color-bg); font: inherit; color: var(--color-text); }
.pm-card:hover { border-color: var(--color-label); }
.pm-card-main { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.pm-card-name { font-size: var(--fs-sm); font-weight: var(--fw-medium); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pm-card-meta { font-size: var(--fs-xs); color: var(--color-label); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pm-card-tags { display: flex; flex-wrap: wrap; gap: 3px; margin-top: 3px; }
.pm-tag { font-size: 10px; line-height: 16px; padding: 0 5px; border-radius: var(--radius-pill); background: var(--color-surface-alt); color: var(--color-label); }
.pm-tag--ex { background: var(--pill-amber-bg); color: var(--pill-amber-text); }
.pm-card-pages { flex-shrink: 0; min-width: 24px; text-align: center; font-size: var(--fs-xs); font-weight: var(--fw-semibold); color: var(--color-label); }
.pm-node { display: flex; flex-direction: column; gap: var(--space-2); }
.pm-kids { display: flex; flex-direction: column; gap: var(--space-2); margin-left: var(--space-3); padding-left: var(--space-3); border-left: 1px solid var(--color-border); }
.pm-chart--searching .pm-card:not(.pm-card--hit) { opacity: .35; }
.pm-card--hit { border-color: var(--color-text); }

/* ---- person panel ---- */
.pm-roles { display: flex; flex-direction: column; gap: var(--space-2); }
.pm-role-row { display: flex; flex-direction: column; gap: 2px; }
.pm-role-desc { padding-left: 26px; }
.pm-pages { display: flex; flex-direction: column; gap: var(--space-4); }
.pm-group-t { font-size: var(--fs-xs); font-weight: var(--fw-semibold); color: var(--color-label); text-transform: uppercase; letter-spacing: .04em; margin-bottom: var(--space-1); }
.pm-page { display: grid; grid-template-columns: minmax(0, 1fr) auto 120px 150px; align-items: center; gap: var(--space-3);
  padding: var(--space-1) 0; border-top: 1px solid var(--color-border-faint); }
.pm-page-t { font-size: var(--fs-sm); font-weight: var(--fw-medium); }
.pm-page--off .pm-page-t { color: var(--color-label); }
.pm-page--action .pm-page-t { padding-left: var(--space-4); font-weight: var(--fw-regular); }
.pm-page-why { white-space: nowrap; }

/* ---- Roles: roles x keys, full bleed with a line between every column ---- */
.pm-matrix-wrap { margin: calc(-1 * var(--space-3)) calc(-1 * var(--space-8)) 0; padding-bottom: var(--space-8); overflow-x: clip; }   /* clip, not auto: the header sticks to the page */
.pm-matrix { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: var(--fs-sm); }
.pm-matrix th, .pm-matrix td { border-bottom: 1px solid var(--color-border-faint); border-right: 1px solid var(--color-border-faint);
  padding: var(--space-2) var(--space-2); text-align: center; vertical-align: middle; }
.pm-matrix th:last-child, .pm-matrix td:last-child { border-right: 0; }
.pm-matrix thead th { position: sticky; top: var(--pm-sticky, 0px); z-index: 2; background: var(--color-bg);
  border-bottom: 0; box-shadow: inset 0 -1px 0 var(--color-border); vertical-align: top; font-weight: var(--fw-regular); }
.pm-matrix .pm-m-page { text-align: left; width: 260px; padding-left: var(--space-8); font-weight: var(--fw-medium); }
.pm-matrix thead .pm-m-page { font-weight: var(--fw-semibold); vertical-align: bottom; }
.pm-matrix .pm-m-page--action { padding-left: calc(var(--space-8) + var(--space-4)); font-weight: var(--fw-regular); color: var(--color-label); }
.pm-matrix .pm-m-role { width: 136px; }
.pm-matrix .pm-m-fill { width: auto; }
.pm-matrix thead .pm-m-role { vertical-align: bottom; cursor: pointer; }
.pm-matrix thead .pm-m-role:hover { background: var(--pill-gray-bg); }
.pm-m-name { font-weight: var(--fw-semibold); color: var(--color-text); }
.pm-m-group td { text-align: left; padding-left: var(--space-8); font-size: var(--fs-xs); font-weight: var(--fw-semibold); color: var(--color-label);
  text-transform: uppercase; letter-spacing: .04em; background: var(--color-surface-alt); }
.pm-m-cell .ui-check { justify-content: center; }
.pm-m-cell--on { background: var(--pill-green-bg); }
.pm-m-cell--edit { cursor: pointer; }
.pm-m-cell--edit:hover { background: var(--pill-gray-bg); }
.pm-m-cell--edit .ui-check { cursor: pointer; }
.pm-matrix .ui-check-box--on { background: var(--pill-green-text); border-color: var(--pill-green-text); }
.pm-m-all { display: inline-flex; color: var(--pill-green-text); }
.pm-m-all .icon { width: 14px; height: 14px; }