/* ---- people, groups and the org chart (mod/admin/people.js) ----
   Ported from the demo's mod-people.css. Shared pieces (.urow, .lockrow,
   .permlist, .permrow, .pill) live in app-ui.css / app.css. */

/* access end date + its two helper buttons, on one line */
.endsrow{display:flex; gap:8px; align-items:center; flex-wrap:wrap;}
.endsrow input{flex:1; min-width:150px;}
.endsrow button{width:auto; flex:none;}

/* the tree */
.callout{border-left:3px solid var(--warn); padding-left:10px; color:var(--text);}
.org{margin-top:6px;}
.orghead{font-family:var(--mono); font-size:11px; color:var(--accent); letter-spacing:.1em;
  text-transform:uppercase; margin:14px 0 2px;}
.orgrow{display:flex; align-items:center; gap:8px 14px; flex-wrap:wrap;
  padding:9px 0; border-bottom:1px solid var(--line); position:relative;}
/* Indent by reporting depth, with a rule down the left so the levels read
   as a tree rather than a ragged list. */
.orgrow.d1{padding-left:18px;}
.orgrow.d2{padding-left:36px;}
.orgrow.d1::before, .orgrow.d2::before{content:''; position:absolute; top:0; bottom:0;
  left:6px; border-left:1px solid var(--line);}
.orgrow.d2::before{left:24px;}
.orgrow.off{opacity:.45;}
.orgrow .oi{flex:1; min-width:160px;}
.orgrow .oi b{display:block; font-size:14px;}
.orgrow .oi span{font-size:11.5px; color:var(--muted); font-family:var(--mono);}
/* the inline "Reports to" control — app.css makes label a block with its
   own top margin and select full-width; neither fits on a row */
.orgrow .oto{display:flex; align-items:center; gap:8px; margin:0; font-size:12px;
  color:var(--muted); flex:none;}
.orgrow .oto select{width:auto; min-width:170px; margin:0; min-height:34px; font-size:13px;}
/* QA audit 2026-09-03 P1: on a phone the nested "Reports to" selects ran past
   the right edge. Below 600 px the select goes under the name at full width
   and the indent rail is a few pixels per level. */
@media (max-width:600px){
  .orgrow{gap:6px 10px;}
  .orgrow.d1{padding-left:10px;} .orgrow.d2{padding-left:20px;}
  .orgrow.d1::before{left:3px;} .orgrow.d2::before{left:12px;}
  .orgrow .oi{min-width:0; flex:1 1 100%;}
  .orgrow .oto{flex:1 1 100%; flex-wrap:wrap;}
  .orgrow .oto select{width:100%; min-width:0; min-height:44px;}
}
/* a contractor under their supervisor */
.orgrow.contractor .oi b::after{content:'contractor'; font-family:var(--mono); font-size:10px;
  letter-spacing:.08em; text-transform:uppercase; color:var(--accent); margin-left:8px;
  border:1px solid var(--accent); border-radius:var(--r-pill); padding:1px 6px; vertical-align:middle;}

/* ---- assigned machines (contractors) — the picker in the person forms ----
   Chips for the chosen numbers, a search box over the Asset Book, tap a
   row to add. Hidden unless the role picker says Guest. */
.machpick.hidden{display:none;}
.machchips{display:flex; flex-wrap:wrap; gap:6px; margin:6px 0 8px;}
.machchip{display:inline-flex; align-items:center; gap:6px; padding:4px 4px 4px 10px;
  border:1px solid var(--accent); border-radius:var(--r-pill); font-size:12.5px;
  background:var(--panel); color:var(--text);}
.machchip b{font-family:var(--mono);}
.machchip .x{width:auto; min-height:0; padding:2px 7px; margin:0; font-size:12px; line-height:1.4;
  border:none; background:transparent; color:var(--muted); border-radius:var(--r-pill);}
.machchip .x:hover{color:var(--bad);}
.machres{max-height:240px; overflow:auto; margin-top:6px;}
.machres .srow{display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:8px 6px; border-bottom:1px solid var(--line); cursor:pointer;}
.machres .srow:hover{background:var(--panel);}
.machres .srow.dim{cursor:default; opacity:.55;}
.machres .srow.dim:hover{background:transparent;}
.machres .srow .n{font-family:var(--mono); font-weight:700; font-size:14px;}
.machres .srow .d{font-size:12px; color:var(--muted);}
.machres .pill{flex:none;}