/* Organisation chart inline drag-and-drop edit mode.
   Desktop only by design: native HTML5 drag events don't fire reliably on
   touch, and mobile keeps the existing form-based "Manage organisation"
   modal. The Edit entry point itself is hidden below 767px so mobile
   users never see a mode that wouldn't work for them. */

.library-v13-hierarchy-controls { flex-wrap: wrap; }
.library-v13-hierarchy-controls-right { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.library-v13-hierarchy-controls-right .ghost-btn.active { background: var(--ch-primary); border-color: var(--ch-primary); color: #fff; }

.library-v13-hierarchy.is-editing [data-org-drag-unit],
.library-v13-hierarchy.is-editing [data-org-drag-person] { cursor: grab; }
.library-v13-hierarchy.is-editing [data-org-drag-unit]:active,
.library-v13-hierarchy.is-editing [data-org-drag-person]:active { cursor: grabbing; }

.library-v13-hierarchy-delete-dept {
  display: inline-grid !important; place-items: center; flex: 0 0 auto; margin-left: auto;
  width: 20px; height: 20px; border: none !important; border-radius: 999px !important;
  background: #fff !important; color: var(--ch-danger) !important;
  font-size: 11px; line-height: 1; cursor: pointer; box-shadow: 0 1px 2px rgba(0,0,0,.15);
}
.library-v13-hierarchy-delete-dept:hover { background: var(--ch-danger-soft) !important; }
.library-v13-org-confirm-card.is-destructive h3 { color: var(--ch-danger); }

.library-v13-hierarchy-remove {
  display: inline-grid; place-items: center; flex: 0 0 auto;
  width: 15px; height: 15px; margin-left: 6px;
  border: none; border-radius: 999px;
  background: var(--ch-danger-soft); color: var(--ch-danger);
  font-size: 11px; line-height: 1; cursor: pointer;
}
.library-v13-hierarchy-remove:hover { filter: brightness(0.95); }

.library-v13-hierarchy-add-staff,
.library-v13-hierarchy-add-department {
  box-sizing: border-box; border: 1px dashed var(--ch-line-strong); border-radius: 8px;
  background: transparent; color: var(--ch-muted);
  font-size: 11px; font-weight: 700; cursor: pointer;
}
/* Fixed size (not flex-grow) so this always matches the ~43px team-member
   chips next to it, whatever row it wraps onto and however many chips
   share that row. */
.library-v13-hierarchy-add-staff { flex: 0 0 auto; width: 43px; height: 43px; padding: 0; }
.library-v13-hierarchy-add-department { display: block; width: 100%; margin-top: 10px; padding: 8px; text-align: center; }
.library-v13-hierarchy-add-staff:hover,
.library-v13-hierarchy-add-department:hover { border-color: var(--ch-primary); color: var(--ch-primary-hover); }

select[data-org-add-staff-picker] {
  margin-top: 6px; padding: 4px 6px; width: 100%;
  border: 1px solid var(--ch-line-strong); border-radius: 6px;
  color: var(--ch-text-strong); font-size: 12px;
}

.library-v13-hierarchy-lead-slot { border-radius: 8px; transition: outline-color .15s ease; }
.is-org-drop-target { outline: 2px dashed var(--ch-primary) !important; outline-offset: 3px; background: var(--ch-primary-soft) !important; border-radius: 8px; }

/* Confirm-before-exit and Activity modals reuse the app's existing .modal /
   .modal-card shell (same one Organisation Admin and Publish Content use),
   so only their inner content needs its own rules here. */
.library-v13-org-confirm-card { max-width: 420px; padding: 24px; }
.library-v13-org-confirm-card h3 { margin: 0 0 8px; color: var(--ch-text-strong); font-size: 17px; }
.library-v13-org-confirm-card p { margin: 0 0 20px; color: var(--ch-muted); font-size: 13px; line-height: 1.5; }
.library-v13-org-confirm-card footer { display: flex; justify-content: flex-end; gap: 10px; }

.library-v13-org-activity-card { max-width: 560px; max-height: 70vh; padding: 24px; overflow-y: auto; }
.library-v13-org-activity-card h3 { margin: 0 0 4px; color: var(--ch-text-strong); font-size: 17px; }
.library-v13-org-activity-card > p { margin: 0 0 16px; color: var(--ch-muted); font-size: 13px; }
.library-v13-org-activity-list { display: grid; gap: 2px; }
.library-v13-org-activity-row {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px;
  padding: 10px 0; border-bottom: 1px solid var(--ch-line);
  color: var(--ch-text-control); font-size: 13px;
}
.library-v13-org-activity-row strong { color: var(--ch-text-strong); }
.library-v13-org-activity-row time { margin-left: auto; color: var(--ch-muted); font-size: 11px; white-space: nowrap; }

@media (max-width: 767px) {
  [data-org-edit-toggle], [data-org-edit-cancel], [data-org-edit-done] { display: none !important; }
}