/* Organisations tab: the action toolbar above the tree and the logo block. Loaded after
   app.css, so it uses its tokens. */

/* Add, add child, move and delete together; the last two act on the selected organisation. */
.org-toolbar { display: grid; grid-template-columns: max-content 1fr; align-items: center; gap: 0.5rem 0.75rem; margin: 0.5rem 0 0.75rem; padding: 0.6rem 0.75rem; border: 1px solid var(--line); border-radius: var(--radius); background: color-mix(in srgb, var(--surface) 75%, transparent); }
.org-toolbar-label { font-size: 0.8rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); }
.org-toolbar-group { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.org-toolbar-caption { grid-column: 1 / -1; margin: 0; padding-top: 0.4rem; border-top: 1px solid var(--line); font-size: 0.85rem; overflow-wrap: anywhere; }
.org-toolbar .btn:disabled { cursor: not-allowed; }
@media (max-width: 30rem) {
  .org-toolbar { grid-template-columns: 1fr; }
  .org-toolbar-group .btn { flex: 1 1 auto; }
}

/* The logo: a wide white tile that shows the whole image, beside its buttons. */
.logo-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1rem; margin: 0.5rem 0 1rem; padding: 0.75rem; border: 1px solid var(--line); border-radius: var(--radius); }
/* The image is centred inside the tile and capped to it, whatever its shape or size: a tall or square
   logo cannot grow the tile, and a small one is not stretched blurry. */
.logo-preview { position: relative; flex: none; width: 168px; height: 104px; box-sizing: border-box; background: #fff; color: #475569; border: 1px solid var(--line); border-radius: 8px; }
.logo-preview > .muted { position: absolute; inset: 0; display: grid; place-items: center; color: inherit; }
.logo-preview img { position: absolute; inset: 0; margin: auto; display: block; max-width: calc(100% - 20px); max-height: calc(100% - 20px); width: auto; height: auto; object-fit: contain; }
.logo-controls .picture-actions { flex-direction: column; align-items: flex-start; }
.logo-controls .hint, .logo-controls [role="status"] { flex: 1 1 100%; margin: 0; }
.logo-controls [role="status"]:empty { display: none; }