/* ============================================================================
   PERMISSION MATRIX
   ----------------------------------------------------------------------------
   The control that decides what a User Group may do — 410 permissions, in 14
   sections, in 75 sub-groups (ADR-0005: a group is a bundle of permissions and
   there are no roles).

   TWO LAYOUTS, CHOSEN BY WIDTH, NEVER BY THE OPERATOR
   Wide  — a section rail beside one section's permissions.
   Narrow — one column of collapsible sections.
   The switch is at 900 pixels, which is where the wide layout's pane stops
   fitting two columns of permissions. Below that the rail is 244 pixels spent
   to show a single column, which is the narrow layout with a wasted third of
   the screen. The JavaScript owns the switch because the two layouts are
   different markup, not the same markup restyled.

   Specification: shared/components/permission-matrix/README.md
   Packet:        docs/packets/PACKET-08-permission-matrix.md
   ========================================================================== */

/* ==========================================================================
   1 · TOOLBAR
   ========================================================================== */

.pm-bar {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-5);
  padding-block-end: var(--space-5);
  border-block-end: 1px solid var(--color-border);
  margin-block-end: var(--space-6);
}
.pm-bar__spacer { flex: 1 1 var(--space-8); }
.pm-bar__search { position: relative; flex: 0 1 340px; min-inline-size: 180px; }
.pm-bar__search .input { padding-inline-start: var(--space-9); }
.pm-bar__icon {
  position: absolute; inset-block-start: 50%; inset-inline-start: var(--space-4);
  transform: translateY(-50%); inline-size: 15px; block-size: 15px;
  color: var(--color-text-tertiary); pointer-events: none;
}
.pm-bar__say { font-size: var(--fs-sm); color: var(--color-text-secondary); white-space: nowrap; }
.pm-bar__say strong { color: var(--color-text-primary); font-variant-numeric: tabular-nums; }
.pm-bar__filter { color: var(--color-info-fg); }
.pm-bar__all { font-weight: var(--fw-medium); }

/* Ticking a heading during a search does not mean what it means without one,
   so the control says which it is doing rather than leaving it to be found
   out afterwards — README §4. */
.pm-scoped {
  display: flex; align-items: flex-start; gap: var(--space-4);
  font-size: var(--fs-xs); color: var(--color-info-fg);
  background: var(--color-info-subtle); border: 1px solid var(--color-info-border);
  border-radius: var(--radius-sm); padding: var(--space-4) var(--space-5);
  margin-block-end: var(--space-6);
}
.pm-scoped svg { inline-size: 15px; block-size: 15px; flex: none; margin-block-start: 1px; }

/* ==========================================================================
   2 · THE PART-TICKED STATE
   A parent whose children are partly granted must never read as "off".
   ========================================================================== */

.checkbox input:indeterminate + .checkbox__box {
  background: var(--color-primary); border-color: var(--color-primary);
}
.checkbox input:indeterminate + .checkbox__box svg { opacity: 1; }

/* ==========================================================================
   3 · COUNTS
   Tabular figures so the numbers form a column and a changed count is seen
   rather than read.
   ========================================================================== */

.pm-count {
  font-size: var(--fs-2xs); font-variant-numeric: tabular-nums;
  color: var(--color-text-tertiary); white-space: nowrap; flex: none;
  padding: 1px var(--space-3); border-radius: var(--radius-full);
}
.pm-count.is-on { color: var(--color-primary); background: var(--color-primary-subtle); font-weight: var(--fw-semi); }
.pm-count__of { opacity: .65; font-weight: var(--fw-normal); }

/* ==========================================================================
   4 · SUB-GROUPS AND PERMISSIONS — shared by both layouts
   ========================================================================== */

.pm-group { margin-block-end: var(--space-7); }
.pm-group:last-child { margin-block-end: 0; }
.pm-group__head {
  display: flex; align-items: center; gap: var(--space-4);
  padding-block-end: var(--space-3); margin-block-end: var(--space-4);
  border-block-end: 1px solid var(--color-border-subtle);
}
.pm-group__name { font-size: var(--fs-sm); font-weight: var(--fw-semi); color: var(--color-text-primary); }
.pm-group__all { min-inline-size: 0; }

/* The column count follows the available width. One permission per row would
   make Clients' 49-permission General sub-group a 49-row scroll on its own,
   and no media query has to name a column count for the phone. */
.pm-perms { display: grid; grid-template-columns: repeat(auto-fill, minmax(232px, 1fr)); gap: var(--space-3) var(--space-6); }
.pm-perm { align-items: flex-start; padding-block: 3px; font-size: var(--fs-sm); line-height: var(--lh-tight); }
.pm-perm .checkbox__box { margin-block-start: 2px; }
.pm-perm__label { color: var(--color-text-secondary); }
.pm-perm:hover .pm-perm__label { color: var(--color-text-primary); }
.pm-perm input:checked ~ .pm-perm__label { color: var(--color-text-primary); }
.pm-perm mark { background: var(--color-warning-subtle); color: var(--color-text-primary); border-radius: 2px; }
.pm-empty { font-size: var(--fs-sm); color: var(--color-text-tertiary); padding: var(--space-6) 0; }

/* ==========================================================================
   5 · WIDE LAYOUT — a section rail beside one section
   ========================================================================== */

.pm-two { display: grid; grid-template-columns: 244px minmax(0, 1fr); gap: var(--space-7); align-items: start; }
.pm-rail {
  display: flex; flex-direction: column; gap: 1px;
  border: 1px solid var(--color-border); border-radius: var(--radius-md);
  padding: var(--space-3); background: var(--color-surface-sunken);
  position: sticky; inset-block-start: var(--space-5);
}
.pm-rail__item {
  display: flex; align-items: center; gap: var(--space-4);
  font: inherit; font-size: var(--fs-sm); text-align: start;
  padding: var(--space-3) var(--space-4); border: 0; border-radius: var(--radius-sm);
  background: transparent; color: var(--color-text-secondary); cursor: pointer;
}
.pm-rail__item:hover { background: var(--color-surface-hover); color: var(--color-text-primary); }
.pm-rail__item.is-current { background: var(--color-surface); color: var(--color-text-primary); font-weight: var(--fw-semi); box-shadow: var(--elev-1); }
.pm-rail__item:focus-visible { outline: 2px solid var(--color-focus); outline-offset: -2px; }
.pm-rail__icon { inline-size: 15px; block-size: 15px; flex: none; color: var(--color-text-tertiary); }
.pm-rail__item.is-current .pm-rail__icon { color: var(--color-primary); }
.pm-rail__name { flex: 1 1 auto; min-inline-size: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.pm-pane {
  border: 1px solid var(--color-border); border-radius: var(--radius-md);
  background: var(--color-surface); padding: var(--space-6);
  max-block-size: 60vh; overflow-y: auto;
}
.pm-pane__head {
  display: flex; align-items: center; gap: var(--space-4);
  position: sticky; inset-block-start: calc(var(--space-6) * -1); z-index: 1;
  background: var(--color-surface);
  padding-block: var(--space-6) var(--space-5);
  margin-block: calc(var(--space-6) * -1) var(--space-6);
  border-block-end: 1px solid var(--color-border);
}
.pm-pane__title { font-size: var(--fs-lg); font-weight: var(--fw-semi); }

/* ==========================================================================
   6 · NARROW LAYOUT — one column of collapsible sections
   ========================================================================== */

.pm-stack { max-block-size: 66vh; overflow-y: auto; padding-inline-end: var(--space-3); }
.pm-sec { border: 1px solid var(--color-border); border-radius: var(--radius-md); margin-block-end: var(--space-4); background: var(--color-surface); }
.pm-sec__head { display: flex; align-items: center; gap: var(--space-4); padding-inline-end: var(--space-5); }
.pm-sec__toggle {
  display: flex; align-items: center; gap: var(--space-4); flex: 1 1 auto; min-inline-size: 0;
  font: inherit; font-size: var(--fs-md); font-weight: var(--fw-semi);
  color: var(--color-text-primary); text-align: start;
  background: transparent; border: 0; cursor: pointer;
  padding: var(--space-5); border-radius: var(--radius-md);
}
.pm-sec__toggle:hover { background: var(--color-surface-hover); }
.pm-sec__toggle:focus-visible { outline: 2px solid var(--color-focus); outline-offset: -2px; }
.pm-sec__chev { inline-size: 14px; block-size: 14px; flex: none; color: var(--color-text-tertiary); transition: transform var(--dur-fast) var(--ease-out); }
.pm-sec.is-open .pm-sec__chev { transform: rotate(90deg); }
.pm-sec__name { flex: 1 1 auto; min-inline-size: 0; overflow: hidden; text-overflow: ellipsis; }
.pm-sec__body { padding: var(--space-2) var(--space-6) var(--space-6) calc(var(--space-6) + 22px); }

@media (prefers-reduced-motion: reduce) {
  .pm-sec__chev { transition: none; }
}

/* The narrow layout is used on a phone, where a scrolling region inside a
   scrolling page traps the thumb. It scrolls with the page instead. */
@media (max-width: 720px) {
  .pm-stack { max-block-size: none; overflow-y: visible; padding-inline-end: 0; }
  .pm-sec__body { padding-inline-start: var(--space-5); }
  .pm-bar__search { flex-basis: 100%; }
}