/* The backend page — page-local layout only. The frame is the workbench's
 * (/ui/sitekit/workbench.css), the chrome is the site kit's; this sheet says
 * only what THIS page's grid is — a sidebar and a main pane — how an empty
 * pane reads, and how the person's forms read. Every color, font and spacing
 * is a platform token (--t-*). */

.admin-workspace {
  --sidebar-w: 232px;
  --sidebar-h: 32vh;
  grid-template-columns: var(--sidebar-w) minmax(0, 1fr);
}
.admin-workspace:has(.admin-sidebar.is-collapsed) { grid-template-columns: 48px minmax(0, 1fr); }

.admin-pane { background: var(--t-bg, #fff); min-width: 0; }   /* a grid item's default min-width lets a wide table push the page sideways */
.admin-pane h1.wb-panel-title { margin: 0; font-size: inherit; font-weight: inherit; line-height: inherit; }   /* a heading for navigation, the panel's own look */
.admin-sections { padding: 2px 12px 12px; }

/* An empty pane says so, in the notice's register: a dashed card, no alarm. */
.admin-empty {
  margin: 8px 12px; padding: 14px; border-radius: 8px;
  border: 1px dashed var(--t-border); color: var(--t-text-2); font-size: var(--t-text-sm, 14px);
}
/* A room that is one sentence (Billing): the sentence, in the page's own text, nothing around it. */
.admin-sentence { margin: 8px 12px; max-width: 560px; color: var(--t-text); font-size: var(--t-text-base, 16px); line-height: 1.5; }
.admin-pane .admin-empty { margin: 16px; }
.admin-rooms { list-style: none; margin: 0; padding: 0; }
.admin-rooms a { display: block; padding: 8px 10px; border-radius: 6px; color: var(--t-text); text-decoration: none; }
.admin-rooms a:hover { background: var(--t-white, #fff); color: var(--t-blue); }
.admin-rooms a[aria-current="page"] { background: var(--t-blue-tint, #eef4fc); color: var(--t-blue); font-weight: 600; }
.admin-room { display: flex; flex-direction: column; min-height: 0; flex: 1; padding: 8px 16px 16px; gap: 16px; }
.admin-room .nt { flex: 1; min-height: 0; }

/* Forms: one fact per row, the label first, the platform's answer under the row. */
.admin-form { display: grid; grid-template-columns: 140px minmax(0, 360px); gap: 10px 14px; align-items: center; max-width: 560px; }
.admin-form h2 { grid-column: 1 / -1; margin: 6px 0 0; font-size: var(--t-text-base, 16px); font-weight: 600; }
.admin-form label, .admin-form .admin-label { color: var(--t-text-2); font-size: var(--t-text-sm, 14px); }
.admin-form input, .admin-form select { font: inherit; font-size: 14px; padding: 6px 9px; border: 1px solid var(--t-border); border-radius: 6px; background: var(--t-white, #fff); color: var(--t-text); }
.admin-form input:focus, .admin-form select:focus { outline: 2px solid var(--t-blue-dark, #1d4ed8); outline-offset: 1px; }
.admin-form .admin-actions { grid-column: 2; display: flex; gap: 8px; align-items: center; }
.admin-form .admin-fact { color: var(--t-text); font-size: var(--t-text-sm, 14px); }
.admin-form .admin-note { grid-column: 1 / -1; color: var(--t-text-3); font-size: 13px; margin: 0; }
/* One row per network, in the same two columns as the default above it — a container that
 * participates in the parent grid rather than a layout of its own. */
.admin-form .vis-rows { display: contents; }
.admin-danger { border: 1px solid var(--t-error, #b42318); border-radius: 8px; padding: 12px 14px; max-width: 560px; }
.admin-danger h2 { margin: 0 0 6px; font-size: var(--t-text-base, 16px); color: var(--t-error, #b42318); }
.admin-danger p { margin: 0 0 8px; color: var(--t-text-2); font-size: var(--t-text-sm, 14px); }
.admin-chip { font-family: var(--t-font-mono); font-size: 12px; color: var(--t-text-3); }

/* The organizations rooms: sections of one room — a heading, then a table, a list or a form. */
.org-section { display: flex; flex-direction: column; gap: 8px; }
.org-section h2 { margin: 6px 0 0; font-size: var(--t-text-base, 16px); font-weight: 600; }
.org-section .admin-form h3 { grid-column: 1 / -1; margin: 6px 0 0; font-size: var(--t-text-sm, 14px); font-weight: 600; }
.org-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.org-list li { padding: 8px 10px; border: 1px solid var(--t-border); border-radius: 8px; font-size: var(--t-text-sm, 14px); }
.org-note { color: var(--t-text-3); font-style: italic; }
.org-verbs { margin-left: 6px; }
.org-table { max-width: 960px; }
.org-table tbody tr.is-you td { background: var(--t-blue-tint, #eef4fc); }
.org-verb.is-end { color: var(--t-text-2); }
.org-pending { color: var(--t-text-3); font-size: var(--t-text-sm, 14px); margin: 0; }
.org-head .admin-note { margin: 0; }
.org .nt { flex: none; }
.admin-rooms .admin-org-name { font-family: inherit; font-size: var(--t-text-sm, 14px); }   /* an organization's name is a name, not an address */
/* A host that serves one network (move 6): the network's room first, a rule, then the person's rooms
 * and one link that leaves the host. */
.admin-rooms .admin-rule { margin: 8px 10px; border-top: 1px solid var(--t-border); }
.admin-rooms a.admin-network-name { font-weight: 600; }
.admin-rooms a.admin-elsewhere::after { content: ' \2197'; color: var(--t-text-3); }

@media (max-width: 900px) {
  /* Stacked: the sidebar is a sheet above the pane; its splitter drags the sheet's edge. */
  .admin-workspace { grid-template-columns: 1fr; grid-template-rows: var(--sidebar-h) minmax(0, 1fr); }
  .admin-workspace:has(.admin-sidebar.is-collapsed) { grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr); }
  .admin-form { grid-template-columns: 1fr; }
  .admin-form .admin-actions { grid-column: 1; }
}

/* The users room's second section: the invitations the administrator has minted. The users
 * table above keeps the room's flex share; this one takes its own height. */
.admin-invitations { display: flex; flex-direction: column; gap: 10px; }
.admin-invitations h2 { margin: 8px 0 0; font-size: var(--t-text-base, 16px); font-weight: 600; }
.admin-invitations .nt { flex: 0 0 auto; }
.admin-invitations .nt-code { font-family: var(--t-font-mono); font-size: 13px; user-select: all; }
.admin-invitations .nt-copy { margin-left: 6px; }
.admin-invitations .admin-form { margin-top: 2px; }