/* ================= Admin: Organizations, Teams & Boards — the hierarchy layout =================
   Adds only what alt-admin.css doesn't already re-skin: the Organizations pane's two-column
   layout, its rail card, and the list's selected-row treatment. Teams and Boards keep their
   existing single-column layout — the rail is Organization-scoped content. Scoped `.alt-app`
   at (0,2,0), matching alt-admin.css's own convention. */

/* `.a-hier-card` is its own class, never `.sec-section` — admin-paneling.test.js asserts
   `.sec-section` is a closed set (#usersPane/#securityPane/#smtpPane/#turnstilePane only).
   Reusing it here would silently widen that assertion's scope. */

.alt-app .a-org-grid{
  display:grid;
  /* The wireframe's "approximately two-thirds" column, not a hard fraction: a 280px floor on
     the rail keeps its own stat grid from being crushed before the layout goes to one column. */
  grid-template-columns:minmax(0, 2fr) minmax(280px, 1fr);
  gap:var(--a-4, 16px);
  align-items:start;
}
.alt-app .a-org-list-col{ min-width:0; display:flex; flex-direction:column; gap:var(--a-2, 8px); }
.alt-app .a-org-rail{ min-width:0; display:flex; flex-direction:column; gap:var(--a-3, 12px); }

.alt-app .a-hier-card{
  min-width:0; padding:14px 16px;
  background:var(--a-panel); border:1px solid var(--a-line-soft); border-radius:var(--a-r-sm);
}
.alt-app .a-hier-card h3{
  margin:0 0 10px; font-family:var(--a-display); font-size:14px; font-weight:700; color:var(--a-text);
}
/* The summary's tiles are not destinations — reuses admin-overview.js's own `.a-stats`/`.a-stat`
   components with their non-interactive cursor, not a second stat-tile component. */
.alt-app #hierarchySummary .a-stats{ margin-top:0; }
.alt-app #hierarchySummary .a-stat{ cursor:default; }
.alt-app #hierarchySummary .a-stat:hover{ border-color:var(--a-line-soft); }

/* Matches admin-team-detail.js's own `.a-admin-p` measure and `.sec-note` warning line — no new
   colour or type scale, only the layout this card needed. */
.alt-app .a-hier-safeguards .a-admin-p{ margin:0 0 10px; max-width:60ch; }
.alt-app .a-hier-safeguards .sec-note{ padding:9px 10px; margin-bottom:10px; }
.alt-app .a-hier-safeguards .a-admin-drow{ font-size:12px; }

/* ---------- the Organizations list's single-select rows ----------
   A real <button>, styled to read like the `.row` a <div> would draw — only UA defaults (font,
   text-align, cursor, width) are reset; colour/border/spacing still come from alt-admin.css. */
.alt-app .row.entity-row{
  width:100%; font:inherit; text-align:left; cursor:pointer; -webkit-appearance:none;
}
.alt-app .row.entity-row .badge{ margin-left:auto; }
.alt-app .row.entity-row.is-selected{
  border-color:var(--a-blue); background:var(--a-blue-soft);
}
.alt-app .row.entity-row:focus-visible{ outline:2px solid var(--a-ring); outline-offset:2px; }

/* ---------- responsive contract, matching the wireframe's own stated breakpoints ----------
   Above 1180px: the two-thirds/one-third grid. At 1180px and below: the rail reorders ahead of
   the list rather than dropping to a second row, per the wireframe's own Implementation guide. */
@media (max-width: 1180px){
  .alt-app .a-org-grid{ grid-template-columns:1fr; }
  .alt-app .a-org-rail{ order:-1; }
}